/* =====================================================================
   STAGE — diadaptasi dari ihsg_shorts_chart.html referensi.
   Kanvas tetap 1080x1920 (ukuran asli YouTube Shorts); .scaler hanya
   menskalakan untuk preview di browser. Alat rekam sebaiknya menangkap
   area 1080x1920 aslinya, bukan hasil scale ini.
===================================================================== */
:root{
  --bg-0:#05070C;
  --bg-1:#0A0F18;
  --panel:#0E1420;
  --grid:#1A2330;
  --text-hi:#EEF3F8;
  --text-mid:#8B97A8;
  --text-low:#4C5666;
  --up:#22E6B7;
  --up-dim:#0E5245;
  --down:#FF4F64;
  --down-dim:#5A1A24;
  --gold:#F2B441;
}

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

html,body{
  background:#000;
  width:100%; height:100%;
  overflow:hidden;
}

.scaler{
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.stage{
  position:relative;
  width:1080px; height:1920px;
  background:
    radial-gradient(circle at 50% 0%, #101826 0%, var(--bg-1) 46%, var(--bg-0) 100%);
  color:var(--text-hi);
  font-family:'Archivo', sans-serif;
  overflow:hidden;
  flex-shrink:0;
}

.bgGrid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity:.35;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 78%, transparent);
}

/* ---------------- HEADER ---------------- */
.header{
  position:absolute; top:96px; left:72px; right:72px;
  opacity:0; transform:translateY(-14px);
  animation: fadeDown .6s ease-out .15s forwards;
}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:26px; letter-spacing:6px; font-weight:500;
  color:var(--gold); text-transform:uppercase;
}
.wordmark{
  font-family:'Archivo Expanded', sans-serif;
  font-weight:900; font-size:104px; line-height:1;
  letter-spacing:-1px; margin-top:14px;
  color:var(--text-hi);
  white-space:nowrap;
}
.subline{
  margin-top:14px; font-size:30px; color:var(--text-mid);
  font-family:'JetBrains Mono', monospace;
}

@keyframes fadeDown{ to{ opacity:1; transform:translateY(0); } }

/* ---------------- HERO VALUE ---------------- */
.hero{
  position:absolute; top:330px; left:72px; right:72px;
  opacity:0; animation: fadeUp .6s ease-out .55s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

.heroValue{
  font-family:'Archivo Expanded', sans-serif;
  font-weight:900; font-size:172px; line-height:1;
  letter-spacing:-2px;
  font-variant-numeric: tabular-nums;
  background:linear-gradient(180deg,#fff, #C9D6E3);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.badgeRow{ margin-top:26px; display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.badge{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:36px;
  padding:12px 26px; border-radius:100px;
  display:inline-flex; align-items:center; gap:12px;
  opacity:0; transform:scale(.85);
}
.badge.show{ animation: pop .45s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pop{ to{ opacity:1; transform:scale(1); } }
.badge.up{ background:var(--up-dim); color:var(--up); border:2px solid var(--up); }
.badge.down{ background:var(--down-dim); color:var(--down); border:2px solid var(--down); }
.badge .arrow{ font-size:34px; line-height:0; }

.liveTag{
  font-family:'JetBrains Mono', monospace; font-size:26px; color:var(--text-mid);
  display:none; align-items:center; gap:10px;
}
.liveTag.show{ display:flex; }
.liveDot{
  width:14px; height:14px; border-radius:50%; background:var(--down);
  box-shadow:0 0 0 0 rgba(255,79,100,.6);
  animation: livePulse 1.4s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(255,79,100,.55); }
  70%{ box-shadow:0 0 0 16px rgba(255,79,100,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,79,100,0); }
}

/* ---------------- CHART ---------------- */
.chartWrap{
  position:absolute; top:700px; left:0; right:0; height:760px;
  opacity:0; animation: fadeUp .6s ease-out .8s forwards;
}
.chartPanel{
  margin:0 56px; height:100%;
  background:linear-gradient(180deg, var(--panel), #0A0F18);
  border:1px solid var(--grid);
  border-radius:28px;
  padding:44px 40px 30px 40px;
  position:relative;
}
.chartTitle{
  font-family:'JetBrains Mono', monospace; font-size:24px; color:var(--text-mid);
  letter-spacing:2px; text-transform:uppercase;
}

svg#chart{ width:100%; height:560px; margin-top:10px; overflow:visible; }
.gridline{ stroke:var(--grid); stroke-width:1.5; }
.yLabel{ font-family:'JetBrains Mono', monospace; font-size:20px; fill:var(--text-low); }
.dayLabel{ font-family:'JetBrains Mono', monospace; font-size:20px; fill:var(--text-mid); text-anchor:middle; }

.areaFill{ opacity:.18; }
.linePath{ fill:none; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.headDot{ r:11; }
.headDot.glow{ filter:drop-shadow(0 0 14px currentColor); }

.pointDot{ r:7; fill:var(--bg-1); stroke-width:4; opacity:0; }

/* ---------------- FOOTER STATS (0–6 kotak, kolom menyesuaikan) ------- */
.stats{
  position:absolute; top:1500px; left:56px; right:56px;
  display:grid; gap:16px;
  opacity:0; animation: fadeUp .6s ease-out 1.05s forwards;
}
.statCard{
  background:var(--panel); border:1px solid var(--grid); border-radius:20px;
  padding:24px 18px; text-align:center;
}
.statLabel{
  font-family:'JetBrains Mono', monospace; font-size:18px; color:var(--text-mid);
  letter-spacing:1.5px; text-transform:uppercase;
}
.statValue{
  font-family:'Archivo', sans-serif; font-weight:700; font-size:32px;
  color:var(--text-hi); margin-top:10px; font-variant-numeric:tabular-nums;
}

/* ---------------- CTA / FOOTER BRAND ---------------- */
.cta{
  position:absolute; bottom:80px; left:0; right:0;
  text-align:center;
  opacity:0; animation: fadeUp .6s ease-out 1.3s forwards;
}
.ctaLine{
  font-family:'JetBrains Mono', monospace; font-size:24px; color:var(--text-mid);
  letter-spacing:2px; padding:0 60px;
}
.ctaHandle{
  font-family:'Archivo Expanded', sans-serif; font-weight:900; font-size:44px;
  color:var(--gold); margin-top:8px; letter-spacing:1px;
}

/* ---------------- placeholder: data belum cukup ---------------- */
.notEnough{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:18px; text-align:center; padding:0 90px;
}
.notEnough h2{ font-family:'Archivo Expanded', sans-serif; font-size:44px; color:var(--text-hi); }
.notEnough p{ font-family:'JetBrains Mono', monospace; font-size:22px; color:var(--text-mid); line-height:1.6; }
.notEnough a{
  font-family:'JetBrains Mono', monospace; font-size:20px; color:#1a1305; background:var(--gold);
  padding:14px 30px; border-radius:100px; text-decoration:none; font-weight:700;
}

/* ---------------- helper banner (di luar area rekam) ---------------- */
.helper{
  position:fixed; top:16px; left:16px; z-index:9999;
  font-family:'JetBrains Mono', monospace; font-size:13px; color:#7BE3CF;
  background:rgba(0,0,0,.6); border:1px solid #1A2330; border-radius:8px;
  padding:10px 14px; max-width:340px; line-height:1.6;
}
.helper b{ color:#F2B441; }
.helper a{ color:#7BE3CF; }
.helper button{
  margin-top:8px; font-family:'JetBrains Mono', monospace; font-size:11px;
  background:transparent; border:1px solid #1A2330; color:#8B97A8; border-radius:6px;
  padding:4px 8px; cursor:pointer;
}