*{margin:0;padding:0;box-sizing:border-box}

:root{
  
  --bg: #000;       
  --text: #fff;     
  
  --yl-1: #ef045e;  
  
  /* Variasi glow & accent */
  --yl-1: #ef045e;  
  --yl-2: #ef045e;  
  --yl-3: #ef045e;  
  --yl-4: #ef045e;  

  --btn: var(--yl-1);   
  --container: 1200px;
  --radius: 12px;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
}

body{
  font-family:'Comic Sans MS',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.page{
  width:100%;
  min-height:100vh;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:grid;
  place-items:center;
  padding:100px 20px;
  position:relative;
  overflow:hidden;
}

.page-1 main{
  display:grid; place-items:center; gap:20px; text-align:center; z-index:2;
}

.ponke-head{
  width:min(800px,90vw); height:auto;
  filter:
    drop-shadow(0 0 16px rgba(255,229,76,.55))
    drop-shadow(0 0 34px rgba(255,210,58,.45));
  animation: headFlicker .95s steps(2,jump-none) infinite;
}

.subtitle{ font-size:clamp(16px,2.2vw,22px); font-weight:700; opacity:.95; }

/* Buttons */
.btn{
  appearance:none; border:none;
  background:var(--btn); color:#1a1000;
  font-weight:900; font-size:clamp(16px,2.2vw,22px);
  padding:12px 28px; border-radius:10px;
  box-shadow:0 4px 0 #fbaa08, var(--shadow);
  cursor:pointer; transform:rotate(-2deg);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:rotate(0deg) scale(1.04); }

.social-buttons{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.social-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--btn); color:#FFF;
  padding:10px 16px; font-weight:900; border-radius:10px; text-decoration:none;
  box-shadow:0 3px 0 #7a5200,var(--shadow);
  transform:rotate(-2deg); transition:transform .15s ease, background .15s ease;
}
.social-btn:hover{ transform:rotate(0deg) scale(1.04); }
.social-btn img{ width:20px; height:20px; }

/* Frame tepi (music icons) */
.fire-frame-edges{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120vmax 80vmax at 50% 105%, rgba(255,210,58,.10), transparent 60%),
    radial-gradient(80vmax 50vmax at 0% 100%,  rgba(255,229,76,.13), transparent 60%),
    radial-gradient(80vmax 50vmax at 100% 100%,rgba(255,184,0,.13), transparent 60%);
}
.fire-frame-edges::before,
.fire-frame-edges::after{
  content:"♪"; position:absolute; bottom:10%;
  width:80px; height:80px; opacity:.95;
  filter:drop-shadow(0 0 26px rgba(255,229,76,.6));
  background:radial-gradient(circle, rgba(255,240,122,.95) 0%, rgba(255,184,0,.3) 70%, transparent 100%);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; color:#FFE54C;
  text-shadow:0 0 20px #FFE54C, 0 0 40px #FFB800;
  mix-blend-mode:screen;
  animation: musicFloat 3s ease-in-out infinite;
}
.fire-frame-edges::before{ left:5%; transform-origin:center; }
.fire-frame-edges::after { right:5%; transform-origin:center; animation-duration:3.6s; content:"♫"; }

@keyframes headFlicker{
  0%  { filter:drop-shadow(0 0 10px rgba(255,229,76,.5)) drop-shadow(0 0 20px rgba(255,210,58,.35)); }
  50% { filter:drop-shadow(0 0 20px rgba(255,240,122,.9)) drop-shadow(0 0 44px rgba(255,210,58,.65)); }
  100%{ filter:drop-shadow(0 0 12px rgba(255,229,76,.6)) drop-shadow(0 0 26px rgba(255,200,50,.5)); }
}
@keyframes musicFloat{
  0%,100%{ transform:translateY(0) scale(1) rotate(-5deg); }
  25%    { transform:translateY(-8px) scale(1.1) rotate(5deg); }
  75%    { transform:translateY(4px) scale(0.95) rotate(-3deg); }
}


.about-burny{
  background:
    radial-gradient(80vw 60vw at 50% 20%, rgba(87, 235, 42, 0.1), transparent 60%),
    radial-gradient(100vw 70vw at 50% 100%, rgba(179, 14, 14, 0.12), transparent 65%),
    linear-gradient(#995817,#f13232 35%,#79470f);
  padding:90px 20px;
}

.about-container{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:48px;
}
.about-media{ display:grid; place-items:center; }

.about-img{
  width:min(520px,42vw); height:auto;
  filter:drop-shadow(0 10px 25px rgba(228, 227, 222, 0.35)) drop-shadow(0 0 22px rgba(241, 241, 238, 0.3));
  animation: aboutFloat 3.6s ease-in-out infinite, aboutFlicker 1s steps(2,jump-none) infinite;
}

.about-title{
  font-family:'Luckiest Guy',cursive,system-ui;
  color:#fff; font-weight:900;
  font-size:clamp(28px,4.4vw,60px); line-height:1.05; margin-bottom:10px;
  text-shadow:0 2px 0 hsl(30, 7%, 89%), 0 6px 18px rgba(252, 239, 208, 0.788);
}
.about-lead{
  font-weight:800; font-size:clamp(16px,2vw,20px);
  color:#fff4bf; margin-bottom:12px; opacity:.95;
}
.about-copy p{ font-size:clamp(14px,1.4vw,18px); line-height:1.7; opacity:.92; margin:6px 0; }

/* spark halus */
.about-fire{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.about-fire::before{
  content:""; position:absolute; inset:-18%;
  background:
    radial-gradient(2px 2px at 12% 88%, rgba(255,240,122,.9) 60%, transparent 62%),
    radial-gradient(2px 2px at 46% 92%, rgba(255,229,76,.85) 60%, transparent 62%),
    radial-gradient(2px 2px at 74% 90%, rgba(255,210,58,.9) 60%, transparent 62%),
    radial-gradient(2px 2px at 88% 95%, rgba(255,184,0,.85) 60%, transparent 62%);
  background-size:900px 900px;
  animation: aboutSparks 18s linear infinite;
  mix-blend-mode:screen; opacity:.65; filter:blur(.2px);
}

@keyframes aboutFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes aboutFlicker{
  0%  { filter:drop-shadow(0 10px 25px rgba(255,229,76,.35)) drop-shadow(0 0 20px rgba(255,210,58,.25)); }
  50% { filter:drop-shadow(0 10px 25px rgba(255,240,122,.6)) drop-shadow(0 0 40px rgba(255,210,58,.45)); }
  100%{ filter:drop-shadow(0 10px 25px rgba(255,229,76,.35)) drop-shadow(0 0 20px rgba(255,210,58,.25)); }
}
@keyframes aboutSparks{ 0%{transform:translate(0,0)} 100%{transform:translate(-900px,-900px)} }

@media (max-width:900px){
  .about-container{ grid-template-columns:1fr; text-align:center; gap:28px; }
  .about-img{ width:min(520px,66vw); }
}

/* =========================================
   GALLERY (horizontal scroller)
   ========================================= */
.burn-gallery{
  padding:80px 0 110px; color:#fffbe3;
  background:
    radial-gradient(60vw 40vw at 50% 20%, rgba(255,210,58,.12), transparent 60%),
    radial-gradient(80vw 60vw at 50% 100%, rgba(255,184,0,.18), transparent 60%),
    linear-gradient(#120a02,#1a0d03);
}
.burn-title {
  text-align: center;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 5rem;              
  font-weight: 900;             
  letter-spacing: 4px;         
  color: #EFBF04;              
  text-transform: uppercase;    
  text-shadow: 
    0 0 25px #EFBF04, 
    0 0 50px rgba(239,191,4,.9),
    0 0 80px rgba(239,191,4,.6);
  margin-bottom: 4rem;          
}


.burn-scroller{
  --edge-fade:140px;
  position:relative; overflow:hidden; padding:16px 0;
  mask:linear-gradient(90deg, transparent 0 var(--edge-fade), #000 calc(var(--edge-fade) + 1px) calc(100% - var(--edge-fade)), transparent 100%);
}
.burn-track{
  display:flex; gap:22px; width:max-content; padding:10px 18px;
  animation: burnScroll 42s linear infinite;
}
.burn-track:hover{ animation-play-state:paused; }

.burn-card{
  flex:0 0 auto; width:280px; height:280px;
  border-radius:22px; padding:12px;
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow), inset 0 0 0 2px rgba(255,210,58,.16);
  backdrop-filter:blur(2px);
  position:relative;
}
.burn-card::after{
  content:""; position:absolute; inset:0; border-radius:22px;
  box-shadow:0 0 30px rgba(255,210,58,.28), inset 0 0 0 3px rgba(255,210,58,.16);
  pointer-events:none;
}
.burn-card img{ width:100%; height:100%; object-fit:cover; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.35); }

@keyframes burnScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (max-width:768px){
  .page{ padding:80px 16px; }
  .burn-card{ width:200px; height:200px; }
  .burn-scroller{ --edge-fade:60px; }
}
@media (max-width:480px){
  .burn-card{ width:160px; height:160px; }
  .burn-scroller{ --edge-fade:30px; }
}

/* =========================================
   PIKACHU GLOW 
   ========================================= */
.pikachu-glow{
  position:relative; display:inline-block;
  filter:drop-shadow(0 0 6px rgba(255,230,90,.6)) drop-shadow(0 0 12px rgba(255,210,60,.4));
  animation:pikaPulse 1.4s infinite alternate;
  will-change:filter,transform;
}

.pikachu-glow::before{
  content:""; position:absolute; inset:-8%; z-index:-1; border-radius:18px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,240,120,.60), transparent 70%),
    radial-gradient(80% 70% at 50% 55%, rgba(255,215,80,.35), transparent 75%);
  filter:blur(6px); pointer-events:none;
}

.pikachu-glow::after{
  content:"⚡"; position:absolute; top:-15px; right:-15px; font-size:20px; color:#ffe54c;
  text-shadow:0 0 6px #ffe54c, 0 0 12px #ffd23a, 0 0 22px #ffb800;
  animation:sparkBlink .6s infinite; pointer-events:none;
}
@keyframes pikaPulse{
  0%{ filter:drop-shadow(0 0 4px rgba(255,220,70,.5)) drop-shadow(0 0 8px rgba(255,200,50,.3)); }
  50%{ filter:drop-shadow(0 0 12px rgba(255,240,120,.95)) drop-shadow(0 0 22px rgba(255,230,100,.7)); }
  100%{ filter:drop-shadow(0 0 6px rgba(255,220,70,.6)) drop-shadow(0 0 14px rgba(255,200,50,.5)); }
}
@keyframes sparkBlink{
  0%,100%{ opacity:0; transform:scale(.6) rotate(0deg); }
  50%    { opacity:1; transform:scale(1.2) rotate(20deg); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pikachu-glow, .pikachu-glow::after{ animation:none !important; }
}


.burn-gallery{
  background: radial-gradient(60% 50% at 50% 0%, #141200 0%, #0b0a00 55%, #000 100%);
  padding: 2.5rem 0 4rem;   /* semula besar, sekarang lebih rapat */
  position: relative;
  overflow: hidden;
}

.burn-title{
  text-align:center;
  font-family:'Comic Sans MS',sans-serif;
  font-size:5rem; font-weight:900; letter-spacing:4px;
  color:#EFBF04;
  text-transform:uppercase;
  text-shadow:0 0 25px #EFBF04,0 0 55px rgba(239,191,4,.8);
  margin-bottom:.5rem;
  position:relative;
}
.burn-title::after{ 
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:50%; width:680px; height:220px; pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(239,191,4,.25) 0%, rgba(239,191,4,0) 70%);
  filter: blur(14px);
  z-index:-1;
}

.burn-sub{
  text-align:center;
  color:#EFBF04;
  opacity:.7;
  letter-spacing:2px;
  margin-bottom:1rem;
}

.marquee-separator{overflow:hidden;border-top:1px solid #EFBF04;border-bottom:1px solid #EFBF04;background:rgba(239,191,4,.06)}
.marquee{display:flex;width:max-content;animation:marq 14s linear infinite}
.marquee span{white-space:nowrap;padding:.4rem 2rem;font-weight:700;color:#EFBF04;opacity:.85}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.burn-gallery::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(239,191,4,.45) 0, transparent 60%),
    radial-gradient(2px 2px at 70% 20%, rgba(239,191,4,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 60%, rgba(239,191,4,.28) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(239,191,4,.28) 0, transparent 60%);
  animation: floatembers 8s linear infinite;
  opacity:.6;
}
@keyframes floatembers{
  from{transform:translateY(8px)}
  to{transform:translateY(-8px)}
}

.burn-scroller{margin-top:1.2rem;}




/* === Sprite swap (bostie1 <-> bostie2) === */
.sprite-swap{
  position: relative;
  width: min(800px, 90vw);   
  margin-inline: auto;
}
.sprite-swap .frame{
  display: block;
  width: 100%;
  height: auto;
}

.sprite-swap .frame-b{
  position: absolute;
  inset: 0;
}

@keyframes swapA{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes swapB{ 0%,49%{opacity:0} 50%,100%{opacity:1} }

.sprite-swap .frame-a{ animation: swapA 1s linear infinite; }
.sprite-swap .frame-b{ animation: swapB 1s linear infinite; }

.sprite-swap .frame-a,
.sprite-swap .frame-b{
  transition: opacity .12s ease;
}

/* Hormati preferensi user (reduce motion) */
@media (prefers-reduced-motion: reduce){
  .sprite-swap .frame-a,
  .sprite-swap .frame-b{ animation: none !important; }
  .sprite-swap .frame-b{ opacity: 0; }
}

.about-fire {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.about-fire::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 15%;
  width: 8px;
  height: 140%;
  background: linear-gradient(180deg, rgba(239,191,4,0) 0%, #EFBF04 40%, rgba(239,191,4,0) 80%);
  filter: blur(1px) drop-shadow(0 0 12px #EFBF04);
  transform: rotate(12deg);
  opacity: 0;
  animation: boostyBolt 5s infinite;
}

.about-fire::after {
  content: "";
  position: absolute;
  top: -20%;
  right: 20%;
  width: 10px;
  height: 140%;
  background: linear-gradient(180deg, rgba(239,191,4,0) 0%, #EFBF04 50%, rgba(239,191,4,0) 80%);
  filter: blur(1.5px) drop-shadow(0 0 14px #EFBF04);
  transform: rotate(-15deg);
  opacity: 0;
  animation: boostyBolt 6.5s infinite 1.5s;
}

@keyframes boostyBolt {
  0%, 80% { opacity: 0; }
  82%     { opacity: 1; }
  85%     { opacity: .3; }
  88%     { opacity: 1; }
  100%    { opacity: 0; }
}


.burn-gallery {
  background: radial-gradient(60% 50% at 50% 0%, #141200 0%, #000 100%);
  padding: 1.5rem 0 2rem;   
  position: relative;
}
.burn-title {
  text-align: center;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 2rem;
  color: #EFBF04; /* kuning emas */
  text-shadow: 0 0 12px #EFBF04, 0 0 24px rgba(239,191,4,.8);
  margin-bottom: 2rem;
}

.burn-scroller {
  overflow: hidden;
}

.burn-track {
  display: flex;
  gap: 1rem;
  animation: scroll-x 30s linear infinite;
}

.burn-card {
  flex: 0 0 auto;
  width: 250px;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #EFBF04;
  box-shadow: 0 0 20px rgba(239,191,4,.6), 0 0 40px rgba(239,191,4,.3);
}

.burn-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #ff0162;
  color: #fff;
  line-height: 1.6;
}

/* Section Dex */
.dex-section {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.dex-title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 15px;
  color: #FFC300;
}

.dex-iframe {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

/* Footer */
.footer {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  border-top: 2px solid #EFBF04;
  padding: 40px 20px;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #EFBF04 50%, transparent 100%);
  box-shadow: 0 0 20px #EFBF04;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  text-align: center;
}

.copyright {
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #EFBF04;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(239, 191, 4, 0.5);
}

.disclaimer {
  font-size: 14px;
  color: #ccc;
  opacity: 0.8;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .footer {
    padding: 30px 15px;
  }
  
  .copyright {
    font-size: 16px;
  }
  
  .disclaimer {
    font-size: 12px;
  }
}