/* ============================================================
   Deck TARA — token diambil dari design system prototipe
   (tara/apps/web/styles/tokens.css + tara-web.css).
   TIDAK ADA PALET BARU. Yang berbeda hanya skala tipografi:
   panggung 1920×1080 butuh ukuran jauh lebih besar dari aplikasi.
   ============================================================ */

@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype");  font-weight: 400; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.ttf") format("truetype");   font-weight: 500; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype");     font-weight: 700; font-display: block; }

:root {
  /* ---- palet prototipe (salinan harfiah) ---- */
  --primary-deep: #0857C3; --primary-mid: #307FE2; --primary-light: #71C5EB;
  --blue-50: #ECF3FE; --blue-100: #D6E6FC; --blue-200: #A9C8F6; --blue-300: #5B8DEF;
  --blue-400: #307FE2; --blue-500: #0857C3; --blue-600: #02519C; --blue-700: #033782; --blue-800: #0B2E66;
  --fg1: #1E293B; --fg2: #475569; --fg3: #64748B; --fg4: #808893; --fg5: #94A3B8;
  --bg0: #FFFFFF; --bg1: #F8FAFC; --bg2: #F1F5F9; --bg3: #ECF3FE;
  --border-1: #EAEBEB; --border-2: #E2E8F0; --border-3: #F0F0F0;
  --success-fg: #237804; --success-bg: #F6FFED; --success-border: #B7EB8F; --success-solid: #22C55E;
  --danger-fg: #A8071A; --danger-bg: #FFF2F0; --danger-border: #FFCCC7; --danger-solid: #DC2626;
  --warning-fg: #D46B08; --warning-bg: #FFF7E6; --warning-border: #FFD591; --warning-solid: #F59E0B;
  --tinta: #16223A;                 /* = --st-simulasi-bg prototipe */
  --netral-peta: #CBD5E1;           /* = warna 'seimbang' peta prototipe */

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- skala tipografi panggung 1920×1080 ---- */
  --t-cover:   700 132px/1.02 var(--font-sans);
  --t-judul:   700 60px/1.1  var(--font-sans);
  --t-besar:   700 46px/1.2  var(--font-sans);
  --t-angka:   700 92px/1.0  var(--font-sans);
  --t-angka-s: 700 62px/1.05 var(--font-sans);
  --t-isi:     400 30px/1.45 var(--font-sans);
  --t-isi-b:   600 30px/1.45 var(--font-sans);
  --t-kecil:   400 24px/1.4  var(--font-sans);
  --t-kaki:    400 22px/1.4  var(--font-sans);
  --t-eyebrow: 700 22px/1.2  var(--font-sans);

  --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15,23,42,.04);
  --shadow-pop: 0 6px 16px rgba(15,23,42,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #0B1220; color: var(--fg1); font-family: var(--font-sans);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}

/* ============================================================ panggung */
#panggung { position: fixed; inset: 0; display: grid; place-items: center; }
#stage {
  width: 1920px; height: 1080px; position: relative; transform-origin: center center;
  background: var(--bg0); overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

.slide {
  position: absolute; inset: 0; display: none; padding: 64px 88px 74px;
  background: var(--bg0); flex-direction: column;
}
.slide.aktif { display: flex; }
.slide.gelap { background: var(--blue-800); color: #fff; }

/* kepala slide */
.s-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 26px; flex: 0 0 auto; }
.s-nomor {
  font: var(--t-eyebrow); color: var(--primary-deep); background: var(--blue-50);
  border: 1px solid var(--blue-200); border-radius: var(--r-pill); padding: 4px 16px; letter-spacing: .06em;
}
.s-judul { font: var(--t-judul); color: var(--fg1); margin: 0; letter-spacing: -.01em; }
.slide.gelap .s-judul { color: #fff; }
.s-isi { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 26px; }
.s-kaki {
  flex: 0 0 auto; margin-top: 22px; font: var(--t-kaki); color: var(--fg3);
  border-top: 1px solid var(--border-2); padding-top: 16px;
}
.s-kaki.tanpa-garis { border-top: 0; padding-top: 0; }

/* ============================================================ atom */
.kartu {
  background: var(--bg0); border: 1px solid var(--border-2); border-radius: var(--r-xl);
  padding: 26px 30px; box-shadow: var(--shadow-card);
}
.kartu.abu { background: var(--bg1); }
.kartu.biru { background: var(--blue-50); border-color: var(--blue-200); }

.eyebrow { font: var(--t-eyebrow); color: var(--fg3); text-transform: uppercase; letter-spacing: .08em; }
.isi { font: var(--t-isi); color: var(--fg2); }
.isi-b { font: var(--t-isi-b); color: var(--fg1); }
.kecil { font: var(--t-kecil); color: var(--fg3); }
.besar { font: var(--t-besar); color: var(--fg1); }
.angka { font: var(--t-angka); color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.angka-s { font: var(--t-angka-s); color: var(--primary-deep); font-variant-numeric: tabular-nums; }

/* nilai [ISI] — placeholder yang HARUS terlihat berbeda */
.a-isi {
  font-weight: 700; color: var(--warning-fg); background: repeating-linear-gradient(
    135deg, var(--warning-bg), var(--warning-bg) 10px, #FFEFD3 10px, #FFEFD3 20px);
  border: 2px dashed var(--warning-border); border-radius: var(--r-md);
  padding: 0 10px; letter-spacing: .02em;
}

/* tiga token status — konsisten dengan StatusBadge prototipe */
.st { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px; border-radius: var(--r-pill);
  font: 700 20px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: .05em; border: 1px solid transparent; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; }
.st-done   { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); }
.st-partial{ color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.st-target { color: var(--fg3);        background: var(--bg2);        border-color: var(--border-2); }
.st-sim    { color: #fff;              background: var(--tinta);      border-color: var(--tinta); }
.st-proxy  { color: var(--primary-deep); background: var(--blue-50);  border-color: var(--blue-200); }
.chip-kuartal {
  display: inline-block; font: 600 20px/1.5 var(--font-sans); color: var(--fg2);
  background: var(--bg1); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 3px 14px;
}
.chip {
  display: inline-block; font: 500 22px/1.45 var(--font-sans); color: var(--fg2);
  background: var(--bg1); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 5px 16px;
}
.chip.biru { background: var(--blue-50); border-color: var(--blue-200); color: var(--primary-deep); }

.ikon { width: 44px; height: 44px; color: var(--primary-deep); flex: 0 0 auto; }
.ikon svg { width: 100%; height: 100%; display: block; }

/* susunan */
.baris { display: flex; align-items: center; gap: 16px; }
.kolom { display: flex; flex-direction: column; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tumbuh { flex: 1 1 auto; min-height: 0; }

/* ============================================================ SVG + slot */
.svg-holder { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.svg-holder > svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.slot-isi { position: absolute; overflow: hidden; border-radius: 6px; background: var(--bg0); }
/* contain, bukan cover: isi inset tidak boleh terpotong walau rasionya beda */
.slot-isi img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot-isi.logo { border-radius: var(--r-pill); background: #fff; display: grid; place-items: center; padding: 10px; }
.slot-isi.logo img { object-fit: contain; }

/* GIF panel demo */
.gif-panel { position: relative; background: var(--bg1); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gif-panel img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.gif-panel .cadangan { position: absolute; right: 12px; bottom: 12px; }

/* ============================================================ overlay */
#hud {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; color: #94A3B8; font: 500 14px/1 var(--font-sans);
  background: linear-gradient(to top, rgba(11,18,32,.92), rgba(11,18,32,0)); pointer-events: none;
}
#hud .kanan { margin-left: auto; display: flex; gap: 18px; align-items: center; }
#timer { font: 700 18px/1 var(--font-mono); color: #E2E8F0; }
#timer.merah { color: #FCA5A5; }
#timer.jalan { color: #86EFAC; }
#progres { position: fixed; left: 0; top: 0; height: 4px; background: var(--primary-mid); transition: width .25s; }

/* langkah (fragment) */
[data-langkah] { opacity: 0; transition: opacity .28s ease, transform .28s ease; transform: translateY(10px); }
[data-langkah].tampil { opacity: 1; transform: none; }

/* ============================================================ mode cetak (PDF) */
@page { size: 1920px 1080px; margin: 0; }

body.pdf { overflow: visible; background: #fff; }
body.pdf #panggung { position: static; display: block; }
body.pdf #stage { width: 1920px; height: auto; box-shadow: none; }
body.pdf #hud, body.pdf #progres { display: none; }
body.pdf .slide { position: relative; inset: auto; display: flex; width: 1920px; height: 1080px;
  page-break-after: always; break-after: page; }
body.pdf [data-langkah] { opacity: 1; transform: none; }