/* ══════════════════════════════════════════════════════════════
   JANUSEE — halaman peta ("instrumen sang orakel")
   Dunia yang sama dengan key art: wajah kiri biru dingin (masa lalu),
   wajah kanan emas sampanye (masa depan), cincin halo terbelah.
   Hijau/merah HANYA untuk angka harga — tidak pernah untuk hiasan.
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg: #07080c;
  --bg-2: #0b0d14;
  --panel: rgba(16, 19, 28, 0.78);
  --panel-2: #121520;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #eef0f8;
  --muted: #aeb2c7;
  --dim: #7f849c;
  /* dua wajah Janus */
  --blue: #5b8cff;      /* masa lalu — menoleh ke belakang */
  --blue-2: #9fb8ff;
  --gold: #e9b86a;      /* masa depan — menatap ke depan */
  --gold-2: #f6d9a4;
  --uv: #7b5cff;        /* aksen merek */
  --uv-2: #a58fff;
  --uv-soft: rgba(123, 92, 255, 0.14);
  --up: #3ddc97;        /* khusus angka harga */
  --down: #ff5c7a;      /* khusus angka harga */
  --warn: #ffc15e;
  /* warna jenis kejadian — membawa makna, jangan diubah */
  --k-quake: #b69cff;
  --k-fed: #f2f1f8;
  --k-cyclone: #4cc9f0;
  --k-flood: #4d8dff;
  --k-volcano: #ffb347;
  --k-wildfire: #ff8a3d;
  --k-drought: #d9b95b;
  --display: 'Unbounded', system-ui, sans-serif;
  --body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r: 14px;
  --r-sm: 8px;
  /* garis rambut bergradasi (dipakai lewat trik mask "exclude") */
  --hair-blue: linear-gradient(160deg, rgba(159, 184, 255, 0.55), rgba(91, 140, 255, 0.14) 30%, rgba(255, 255, 255, 0.05) 65%, rgba(255, 255, 255, 0.07));
  --hair-gold: linear-gradient(200deg, rgba(246, 217, 164, 0.55), rgba(233, 184, 106, 0.14) 30%, rgba(255, 255, 255, 0.05) 65%, rgba(255, 255, 255, 0.07));
  --hair-split: linear-gradient(90deg, rgba(159, 184, 255, 0.5), rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.06) 68%, rgba(246, 217, 164, 0.5));
  --foil: linear-gradient(90deg, #6f5022, #f6d9a4 16%, #c28f45 34%, #fff1d4 50%, #b3843c 66%, #f6d9a4 84%, #6f5022);
  --top-h: 64px;
  --tl-h: 172px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); font-family: var(--body); font-size: 14px; line-height: 1.45; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; background: var(--bg); position: relative; isolation: isolate; overflow-x: hidden; }
/* Suasana halaman: cahaya biru dari kiri, emas dari kanan — statis, dilukis sekali */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 70vh at -8% 38%, rgba(91, 140, 255, 0.11), transparent 62%),
    radial-gradient(55vw 65vh at 108% 46%, rgba(233, 184, 106, 0.075), transparent 62%),
    radial-gradient(80vw 50vh at 50% 118%, rgba(123, 92, 255, 0.06), transparent 70%),
    linear-gradient(180deg, #080a11 0%, #06070b 100%);
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h2, h3 { margin: 0; }
ol { list-style: none; margin: 0; padding: 0; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }

/* Bingkai garis rambut bergradasi untuk panel kaca: pseudo-elemen + mask exclude */
.col::before, .timeline::before, .stage-frame::before, .how::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── Header ─────────────────────────────── */
.top {
  height: var(--top-h); display: flex; align-items: center; gap: 22px; padding: 0 22px;
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.94), rgba(8, 10, 16, 0.82));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
/* garis bawah: biru di kiri, emas di kanan — dua wajah bertemu di tengah */
.top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(91, 140, 255, 0), rgba(91, 140, 255, 0.6) 16%, rgba(255, 255, 255, 0.08) 50%, rgba(233, 184, 106, 0.6) 84%, rgba(233, 184, 106, 0));
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
/* medali logo: cincin terbelah biru/emas seperti halo di key art */
.brand img {
  width: 40px; height: 40px; flex: none; border-radius: 50%; padding: 4px; object-fit: contain;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 40%, #1a1f2e 0%, #0b0d14 72%) padding-box,
    conic-gradient(from 0deg, #fff1d4, var(--gold) 30%, rgba(233, 184, 106, 0.15) 50%, rgba(91, 140, 255, 0.15) 50%, var(--blue) 70%, #d6e1ff) border-box;
  box-shadow: -7px 0 18px -9px rgba(91, 140, 255, 0.9), 7px 0 18px -9px rgba(233, 184, 106, 0.85);
}
.brand-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.word {
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.2em; line-height: 1;
  background: linear-gradient(90deg, #d4defd 0%, #ffffff 45%, #ffffff 55%, #f6e2bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.26em; color: var(--dim); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.tag { margin: 0; color: var(--muted); font-size: 12.5px; padding-left: 22px; border-left: 1px solid var(--line-2); line-height: 26px; letter-spacing: 0.01em; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Pil = perhiasan: bingkai gradasi tipis, sorot dalam di atas, bukan tombol bawaan */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid transparent; font-size: 12px; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; color: var(--text);
  background:
    linear-gradient(180deg, rgba(24, 27, 38, 0.95), rgba(12, 14, 21, 0.95)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px -10px rgba(0, 0, 0, 0.9);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
.pill.ghost:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(28, 32, 46, 0.95), rgba(14, 16, 24, 0.95)) padding-box,
    linear-gradient(90deg, rgba(159, 184, 255, 0.7), rgba(255, 255, 255, 0.12) 50%, rgba(246, 217, 164, 0.7)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px -8px rgba(123, 140, 255, 0.55);
}
.pill.icon { width: 34px; padding: 0; justify-content: center; }
/* status live: titik biru bercahaya dengan cincin denyut (hanya transform/opacity) */
.pill.live { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pill.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.pill.live.ok i { background: var(--blue-2); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.18), 0 0 10px rgba(91, 140, 255, 0.9); }
.pill.live.ok i::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(159, 184, 255, 0.7);
  animation: ping 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.pill.live.warn i { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 193, 94, 0.16); }
@keyframes ping { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }

/* Token: emas sampanye, seperti perhiasan */
.token { display: flex; gap: 6px; }
.token .tk {
  height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 9px; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; color: var(--gold-2);
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(233, 184, 106, 0.2), transparent 60%) padding-box,
    linear-gradient(180deg, #1d1810, #0d0b08) padding-box,
    linear-gradient(120deg, #f6d9a4, #8a6428 34%, #fff1d4 52%, #8a6428 72%, #f6d9a4) border-box;
  box-shadow: inset 0 1px 0 rgba(246, 217, 164, 0.22), 0 0 24px -10px rgba(233, 184, 106, 0.75);
}
.token .tk b { font-weight: 500; }
.token .tk.soon { cursor: default; }
.token .tk em {
  font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: #1a1307; background: linear-gradient(180deg, #f6d9a4, #d9a55a);
}
/* koin kecil: dipahat lewat gradasi radial, tanpa aset */
.coin {
  width: 16px; height: 16px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 34% 30%, #fff5dd 0%, #f0c67f 34%, #a97a33 72%, #5e4217 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 241, 212, 0.35), 0 0 8px rgba(233, 184, 106, 0.6);
}
.coin::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(94, 66, 23, 0.55); }
.token a.tk.buy { color: #1a1307; background: linear-gradient(180deg, #fbe6bd, #e0ac5e) padding-box, linear-gradient(120deg, #fff1d4, #a57a34) border-box; padding: 0 16px; }
.token .ca { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; opacity: 0.8; }

.mtabs { display: none; }

/* ── Grid utama ─────────────────────────── */
.grid {
  display: grid; grid-template-columns: 340px minmax(0, 1fr) 350px; grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 12px 12px 0;
  height: calc(100vh - var(--top-h) - var(--tl-h) - 24px); min-height: 560px;
}
/* Kolom = lempeng kaca gelap. Kiri beridentitas biru, kanan emas. */
.col {
  position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 18px; overflow: hidden;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.back { background: radial-gradient(120% 45% at 0% 0%, rgba(91, 140, 255, 0.13), transparent 62%), linear-gradient(180deg, rgba(16, 19, 29, 0.82), rgba(9, 11, 17, 0.78)); }
.ahead { background: radial-gradient(120% 45% at 100% 0%, rgba(233, 184, 106, 0.1), transparent 62%), linear-gradient(180deg, rgba(18, 18, 24, 0.82), rgba(10, 10, 15, 0.78)); }
.back::before { background: var(--hair-blue); z-index: 2; }
.ahead::before { background: var(--hair-gold); z-index: 2; }

.col-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 20px 15px; flex: none; }
.ahead .col-head { justify-content: flex-end; text-align: right; }
.col-head::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; }
.back .col-head::after { background: linear-gradient(90deg, rgba(159, 184, 255, 0.55), rgba(91, 140, 255, 0.12) 45%, transparent); }
.ahead .col-head::after { background: linear-gradient(270deg, rgba(246, 217, 164, 0.55), rgba(233, 184, 106, 0.12) 45%, transparent); }
.eyebrow { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 6px; }
.back .eyebrow { color: var(--blue-2); }
.ahead .eyebrow { color: var(--gold-2); }
.col-head h2 { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; }
.col-head p { margin: 4px 0 0; color: var(--dim); font-size: 12px; }
/* separuh logo marmer: kiri menoleh ke kiri (cahaya biru), kanan ke kanan (cahaya emas) */
.face { width: 21px; height: 42px; flex: none; background: url(/favicon-192.png) no-repeat; background-size: 42px 42px; }
.face-l { background-position: left center; filter: drop-shadow(-2px 0 6px rgba(91, 140, 255, 0.85)) drop-shadow(0 0 1px rgba(159, 184, 255, 0.6)); }
.face-r { background-position: right center; filter: drop-shadow(2px 0 6px rgba(233, 184, 106, 0.85)) drop-shadow(0 0 1px rgba(246, 217, 164, 0.6)); }

/* Rekap: rata-rata gerak BTC per jenis kejadian */
.recap {
  margin: 14px 16px 12px; padding: 14px 16px 13px; border-radius: var(--r); flex: none;
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.07), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(159, 184, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.recap h4 { margin: 0 0 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-2); font-weight: 500; opacity: 0.9; }
.recap-row { display: grid; grid-template-columns: 1fr auto; gap: 7px 8px; align-items: center; padding: 5px 0 6px; font-size: 13px; }
.recap-row .k { display: flex; align-items: center; gap: 9px; }
.recap-row .num { font-size: 12.5px; color: var(--text); }
.recap-row .bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); position: relative; }
.recap-row .bar b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, rgba(91, 140, 255, 0.35), var(--blue-2)); box-shadow: 0 0 10px rgba(91, 140, 255, 0.55); }
.recap-row .bar i { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255, 255, 255, 0.6); }
.recap .note { margin: 9px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.045); }

.chips { display: flex; gap: 6px; padding: 0 16px 12px; flex-wrap: wrap; flex: none; }
.chip {
  height: 27px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);
  font-size: 11.5px; color: var(--muted); letter-spacing: 0.01em; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { color: var(--text); border-color: rgba(159, 184, 255, 0.3); }
.chip.on { background: rgba(91, 140, 255, 0.14); border-color: rgba(159, 184, 255, 0.55); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px -6px rgba(91, 140, 255, 0.8); }

.ledger, .calls, .upcoming { overflow-y: auto; min-height: 0; padding: 2px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; }
.ledger { flex: 1; }
.ledger li, .calls li, .upcoming li { border-radius: 12px; }
.ledger li + li, .calls li + li { margin-top: 2px; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px; align-items: center;
  width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 12px; padding: 11px 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.back .row:hover { background: rgba(91, 140, 255, 0.06); border-color: rgba(159, 184, 255, 0.12); }
.back .row.sel { background: linear-gradient(90deg, rgba(91, 140, 255, 0.16), rgba(91, 140, 255, 0.03)); border-color: rgba(159, 184, 255, 0.3); box-shadow: inset 2px 0 0 var(--blue-2); }
.ahead .row:hover, .ahead .row.sel { background: rgba(233, 184, 106, 0.05); border-color: rgba(246, 217, 164, 0.14); }
.ahead .row.sel { box-shadow: inset -2px 0 0 var(--gold-2); }
.upcoming .row { cursor: default; }
.row .t { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.005em; }
.row .m { grid-column: 2 / 3; color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .m:last-child { grid-column: 2 / 4; }
.row .vd { text-align: right; }
.row .vd .verdict { margin-left: 0; }
.row .v { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--muted); }
.verdict {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; border: 1px solid transparent; line-height: 1.5;
}
.verdict.noise { border-color: rgba(255, 255, 255, 0.1); color: var(--dim); background: rgba(255, 255, 255, 0.02); }
.verdict.notable { background: rgba(255, 193, 94, 0.08); border-color: rgba(255, 193, 94, 0.32); color: var(--warn); }
.verdict.outlier { background: var(--uv-soft); border-color: rgba(165, 143, 255, 0.4); color: var(--uv-2); }
.verdict.pending { background: none; border: 1px dashed var(--line-2); color: var(--dim); }
.tagk { font-size: 10px; font-family: var(--mono); color: var(--dim); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; margin-left: 2px; }

/* ── Panggung peta: tempat dua wajah bertemu ── */
.stage {
  position: relative; min-width: 0; border-radius: 20px; overflow: hidden; isolation: isolate;
  container-type: size; background: #06070b;
}
/* Latar angkasa bersih — seni kota dicabut supaya planet jadi bintang utama.
   Hitam pekat + pendar biru samar di kiri, emas samar di kanan, bintang halus statis (CSS murni). */
.stage-space {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 75% at 0% 50%, rgba(91, 140, 255, 0.10), rgba(91, 140, 255, 0.03) 55%, transparent 80%),
    radial-gradient(55% 75% at 100% 50%, rgba(233, 184, 106, 0.08), rgba(233, 184, 106, 0.02) 55%, transparent 80%),
    radial-gradient(90% 70% at 50% 50%, #070a14, #04050a 75%);
}
/* bintang: beberapa ubin kecil berukuran prima supaya polanya tidak terlihat berulang */
.stage-space::before, .stage-space::after { content: ''; position: absolute; inset: 0; }
.stage-space::before {
  opacity: 0.75;
  background-image:
    radial-gradient(circle at 23px 41px, rgba(255, 255, 255, 0.85) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 131px 97px, rgba(214, 225, 255, 0.7) 0 0.5px, transparent 1.1px),
    radial-gradient(circle at 71px 163px, rgba(255, 255, 255, 0.6) 0 0.5px, transparent 1px),
    radial-gradient(circle at 197px 23px, rgba(246, 217, 164, 0.6) 0 0.5px, transparent 1.1px),
    radial-gradient(circle at 157px 211px, rgba(159, 184, 255, 0.65) 0 0.6px, transparent 1.2px);
  background-size: 173px 151px, 223px 199px, 269px 241px, 311px 283px, 379px 331px;
}
/* segelintir bintang lebih terang dengan pendar kecil */
.stage-space::after {
  opacity: 0.8;
  background-image:
    radial-gradient(circle at 83px 67px, rgba(214, 225, 255, 0.95) 0 0.8px, rgba(91, 140, 255, 0.25) 1.4px, transparent 3px),
    radial-gradient(circle at 311px 199px, rgba(255, 241, 212, 0.9) 0 0.8px, rgba(233, 184, 106, 0.22) 1.4px, transparent 3px);
  background-size: 443px 409px, 557px 487px;
}
#map { position: absolute; inset: 0; z-index: 1; }   /* peta selalu di atas latar & pendar */

/* Efek bola: ukurannya ikut jari-jari globe di layar (--gr, dihitung app.js saat zoom/resize — bukan tiap frame).
   --gfx memudarkannya saat diperbesar (bola sudah memenuhi layar). */
.globe-glow, .halo, .globe-limb {
  position: absolute; left: 50%; top: 50%; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: var(--gfx, 1);
  transition: opacity 0.4s ease;
}
/* pendar di belakang bola: biru di sisi kiri, emas di sisi kanan, ungu tipis di kutub */
.globe-glow {
  z-index: 0; width: calc(var(--gr, 36cqmin) * 3.1); aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    rgba(150, 140, 230, 0.30) 0deg, rgba(233, 184, 106, 0.42) 80deg, rgba(233, 184, 106, 0.30) 110deg,
    rgba(150, 140, 230, 0.26) 180deg, rgba(91, 140, 255, 0.55) 260deg, rgba(91, 140, 255, 0.45) 290deg, rgba(150, 140, 230, 0.30) 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 63%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0.16) 80%, rgba(0, 0, 0, 0.04) 92%, transparent 100%);
          mask: radial-gradient(closest-side, #000 63%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0.16) 80%, rgba(0, 0, 0, 0.04) 92%, transparent 100%);
}
/* Cincin halo terbelah — gema dari key art. Tipis & redup supaya tidak bersaing dengan planet. Statis. */
.halo { z-index: 0; width: calc(var(--gr, 36cqmin) * 2.26); aspect-ratio: 1; }
.halo::before, .halo::after, .halo i { content: ''; position: absolute; border-radius: 50%; }
/* cincin tajam: kiri biru, kanan emas, celah di atas & bawah seperti tulang punggung patung */
.halo::before {
  inset: 0; opacity: 0.42;
  background: conic-gradient(from 0deg,
    transparent 0deg 3deg, #fff1d4 7deg, var(--gold) 60deg, rgba(233, 184, 106, 0.5) 130deg, rgba(233, 184, 106, 0) 174deg,
    transparent 174deg 186deg, rgba(91, 140, 255, 0) 186deg, rgba(91, 140, 255, 0.5) 230deg, var(--blue) 300deg, #d6e1ff 353deg, transparent 357deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.1px), #000 calc(100% - 0.4px), transparent 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.1px), #000 calc(100% - 0.4px), transparent 100%);
}
/* pendar lembut di sisi dalam cincin */
.halo::after {
  inset: 0; opacity: 0.16;
  background: conic-gradient(from 0deg, transparent 0deg 4deg, var(--gold) 40deg, rgba(233, 184, 106, 0) 172deg, transparent 172deg 188deg, rgba(91, 140, 255, 0) 188deg, var(--blue) 320deg, transparent 356deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.55) 99%, transparent 100%);
          mask: radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.55) 99%, transparent 100%);
}
/* bezel bertakik: kesan jarum instrumen presisi */
.halo i {
  inset: -2.4%; opacity: 0.13;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.9) 0deg 0.35deg, transparent 0.35deg 6deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px), #000 100%, transparent 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px), #000 100%, transparent 100%);
}
/* Tepi atmosfer DI ATAS kanvas: laut menggelap pelan ke arah tepi (kesan bulat),
   lalu garis cahaya biru→ungu tepat di pinggir bola. Tembus klik. */
.globe-limb {
  z-index: 1; width: calc(var(--gr, 36cqmin) * 2); aspect-ratio: 1;
  background:
    radial-gradient(closest-side at 50% 50%, transparent 0 93%, rgba(120, 150, 255, 0.10) 96.5%, rgba(150, 165, 255, 0.34) 99%, rgba(196, 186, 255, 0.55) 99.7%, transparent 100%),
    radial-gradient(closest-side at 44% 42%, transparent 0 55%, rgba(3, 6, 18, 0.16) 80%, rgba(3, 6, 18, 0.34) 100%);
}
.legend {
  position: absolute; left: 18px; bottom: 44px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: calc(100% - 36px);
  padding: 8px 14px; border-radius: 12px; font-size: 11.5px; color: var(--muted);
  background: linear-gradient(180deg, rgba(14, 17, 26, 0.9), rgba(9, 11, 17, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .dot { width: 7px; height: 7px; }
/* tombol zoom MapLibre: kaca gelap bergaris rambut */
.maplibregl-ctrl-top-left { top: 8px !important; left: 8px !important; }
.maplibregl-ctrl-group {
  background: linear-gradient(180deg, rgba(20, 24, 36, 0.92), rgba(10, 12, 19, 0.92)) !important;
  border: 1px solid rgba(159, 184, 255, 0.2); border-radius: 11px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; overflow: hidden;
}
.maplibregl-ctrl-group button { width: 30px !important; height: 30px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; }
.maplibregl-ctrl-group button:hover { background-color: rgba(91, 140, 255, 0.12) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(0.9); }

/* Bingkai instrumen di atas peta */
.stage-frame { position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; }
.stage-frame::before { background: var(--hair-split); }
.stage-frame .ruler { position: absolute; opacity: 0.4; }
.stage-frame .ruler.top, .stage-frame .ruler.bottom {
  left: 28px; right: 28px; height: 9px;
  background: linear-gradient(90deg, var(--blue-2), rgba(255, 255, 255, 0.55) 50%, var(--gold-2));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 40px), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 40px), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.stage-frame .ruler.top { top: 0; } .stage-frame .ruler.bottom { bottom: 0; }
.stage-frame .ruler.left, .stage-frame .ruler.right {
  top: 28px; bottom: 28px; width: 9px;
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 32px), linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 32px), linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.stage-frame .ruler.left { left: 0; background: var(--blue-2); } .stage-frame .ruler.right { right: 0; background: var(--gold-2); }
.stage-frame .mark { position: absolute; width: 16px; height: 16px; opacity: 0.75; }
.stage-frame .mark.tl { top: 12px; left: 12px; border-top: 1px solid var(--blue-2); border-left: 1px solid var(--blue-2); border-top-left-radius: 6px; }
.stage-frame .mark.bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--blue-2); border-left: 1px solid var(--blue-2); border-bottom-left-radius: 6px; }
.stage-frame .mark.tr { top: 12px; right: 12px; border-top: 1px solid var(--gold-2); border-right: 1px solid var(--gold-2); border-top-right-radius: 6px; }
.stage-frame .mark.br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--gold-2); border-right: 1px solid var(--gold-2); border-bottom-right-radius: 6px; }
.stage-frame .mark.tl, .stage-frame .mark.tr { display: none; } /* sudut atas ditempati tombol zoom & angka */
.stage-frame .proj {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; color: rgba(214, 222, 245, 0.4);
}
/* Baris status: angka tentang PENGUKURAN, bukan pengintaian */
.stage-status {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px; z-index: 3; display: flex; align-items: center; gap: 0;
  padding: 0 18px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--dim);
  background: linear-gradient(180deg, rgba(6, 7, 11, 0), rgba(6, 7, 11, 0.9) 55%); pointer-events: none; white-space: nowrap; overflow: hidden;
}
.stage-status span { padding: 0 11px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.stage-status span:first-child { padding-left: 0; border-left: 0; }
.stage-status b { color: #dfe5f7; font-weight: 500; margin-left: 4px; }
.stage-status .right { margin-left: auto; border-left: 0; }
.stage-note {
  position: absolute; right: 18px; top: 14px; z-index: 3; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); font-family: var(--mono); text-align: right; line-height: 1.75;
}
.stage-note b { color: var(--text); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; margin-right: 3px; }
/* atribusi dipindah ke kanan atas (di bawah angka) supaya tidak menabrak legenda */
.maplibregl-ctrl-bottom-right { top: 60px !important; bottom: auto !important; right: 8px !important; }
.maplibregl-ctrl-attrib { background: rgba(9, 11, 17, 0.8) !important; color: var(--dim) !important; font-size: 10px; border-radius: 10px !important; }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1) brightness(0.8); background-color: transparent !important; }

/* popup peta: kartu gelap dengan garis foil emas tipis di atas */
.maplibregl-popup-content {
  max-width: 260px; color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  background: var(--foil) top / 100% 1px no-repeat, linear-gradient(180deg, #161a26, #0d0f16);
  border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
}
.maplibregl-popup-content b { font-weight: 600; }
.maplibregl-popup-tip { border-top-color: #0d0f16 !important; border-bottom-color: #161a26 !important; }
.pop-thumb { display: none; }
.maplibregl-popup-content { min-width: 220px; padding: 12px 14px 11px; }
.pop-k { display: flex; align-items: center; gap: 7px; font: 600 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.pop-k i { width: 6px; height: 6px; border-radius: 50%; }
.pop-t { font: 600 14px/1.3 var(--body); color: #fff; }
.pop-p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pop-m { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.12); font: 12px/1 var(--mono); }
.pop-m .l { color: var(--dim); }
.pop-cta { margin-top: 8px; font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--gold-2); text-transform: uppercase; }
.pop-credit { font-size: 10px; color: var(--dim); letter-spacing: 0.04em; }

/* Sapuan radar sangat pelan (biru) — rasa "alat yang sedang bekerja" */
.stage::after {
  content: ''; position: absolute; inset: -10%; z-index: 1; pointer-events: none; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(91, 140, 255, 0.12) 0deg, rgba(91, 140, 255, 0) 40deg, transparent 360deg);
  animation: sweep 26s linear infinite; mix-blend-mode: screen; opacity: 0.4;
}
@keyframes sweep { to { transform: rotate(360deg); } }
/* vignette: fokus ke tengah */
.stage::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(72% 72% at 50% 50%, transparent 58%, rgba(4, 5, 9, 0.6) 100%);
}

/* ── Kolom kanan: skor AI ───────────────── */
.score {
  margin: 14px 16px 6px; padding: 16px; border-radius: var(--r); flex: none;
  background: linear-gradient(180deg, rgba(233, 184, 106, 0.06), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(246, 217, 164, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.score .big { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 12.5px; }
.score .big b {
  font-family: var(--mono); font-size: 34px; font-weight: 400; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #fff3da, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score .vs { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--muted); }
.score .vs .bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.score .vs .bar b { display: block; height: 100%; background: linear-gradient(90deg, rgba(233, 184, 106, 0.4), var(--gold-2)); }
.score .vs .bar.base b { background: var(--dim); }
.score .fine, .fine { margin: 12px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.sub {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; padding: 14px 20px 6px;
}
.sub::before { content: ''; width: 14px; height: 1px; background: var(--gold); opacity: 0.8; }
.sub::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(246, 217, 164, 0.18), transparent); }
.upcoming { flex: none; max-height: 140px; }
.calls { flex: 1; }
.call-res { font-family: var(--mono); font-size: 11px; }
.hit { color: var(--up); }
.miss { color: var(--down); }
.empty { color: var(--dim); font-size: 12.5px; padding: 8px 10px; }
.cd { font-family: var(--mono); color: var(--gold-2); font-weight: 500; }

/* Kisi 20 panggilan pertama: kosong sampai ada tebakan yang benar-benar dinilai */
.grid20 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 16px; }
.grid20 .cell { aspect-ratio: 1; border-radius: 3px; border: 1px solid rgba(246, 217, 164, 0.14); background: linear-gradient(180deg, rgba(233, 184, 106, 0.05), transparent); }
.grid20 .cell.hit { background: var(--up); border-color: transparent; }
.grid20 .cell.miss { background: var(--down); border-color: transparent; }
.gridcap { margin-top: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: rgba(246, 217, 164, 0.7); }
/* Aturan main AI, menggantikan ruang kosong */
.protocol { padding: 8px 10px 4px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.protocol div { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); line-height: 1.5; }
.protocol div:first-child { border-top: 0; }
.protocol b {
  flex: none; width: 19px; height: 19px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 500;
  color: var(--gold-2); border: 1px solid rgba(246, 217, 164, 0.35); background: rgba(233, 184, 106, 0.06);
}
.protocol p { font-family: var(--body); color: var(--dim); font-size: 12px; margin: 12px 0 0; line-height: 1.5; }

/* ── Linimasa: masa lalu (biru, kiri) mengalir ke kini (emas, kanan) ── */
.timeline {
  position: relative; height: var(--tl-h); margin: 12px; padding: 12px 18px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 18, 27, 0.82), rgba(9, 10, 16, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.timeline::before { background: var(--hair-split); }
.tl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.assets { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); }
.assets button {
  height: 26px; padding: 0 11px; border-radius: 8px; border: 0; background: none; color: var(--muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.assets button:hover { color: var(--text); }
.assets button.on {
  color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(246, 217, 164, 0.28), 0 0 16px -8px rgba(233, 184, 106, 0.8);
}
.assets button small { color: var(--dim); margin-left: 6px; font-size: 10.5px; }
.assets button.on small { color: var(--gold-2); }
.tl-note { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.tl-wrap { position: relative; }
#tl { width: 100%; height: 112px; display: block; cursor: crosshair; }
.tl-tip {
  position: absolute; top: 0; pointer-events: none; border-radius: 10px; padding: 7px 10px; font-size: 12px; white-space: nowrap; transform: translateX(-50%); z-index: 2;
  background: var(--foil) top / 100% 1px no-repeat, linear-gradient(180deg, #161a26, #0d0f16);
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9);
}

.foot { position: relative; padding: 14px 24px 26px; color: var(--dim); font-size: 12px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot p { margin: 0; }
.foot strong { color: var(--gold-2); font-weight: 500; letter-spacing: 0.01em; }
.foot .srcs { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; }

/* ── Struk: benda khas JANUSEE ─────────── */
.scrim { position: fixed; inset: 0; background: rgba(3, 4, 8, 0.62); z-index: 40; }
.receipt {
  position: fixed; top: calc(var(--top-h) + 14px); right: 18px; bottom: 18px; width: 432px; max-width: calc(100vw - 24px); z-index: 50;
  overflow-y: auto; border-radius: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--text);
  scrollbar-width: thin; scrollbar-color: rgba(246, 217, 164, 0.2) transparent;
  /* kertas gelap: foil emas di tepi atas (diam), butir kertas + segel ikut menggulir */
  background:
    var(--foil) top / 100% 2px no-repeat,
    radial-gradient(circle at calc(100% - 46px) 58px, transparent 70px, rgba(246, 217, 164, 0.14) 70.5px, transparent 71.5px, transparent 78px, rgba(159, 184, 255, 0.12) 78.5px, transparent 79.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(110% 40% at 50% 0%, rgba(233, 184, 106, 0.08), transparent 70%),
    linear-gradient(180deg, #13151d 0%, #0d0f15 100%);
  background-attachment: scroll, local, local, local, scroll;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.5), -30px 0 80px -40px rgba(91, 140, 255, 0.35);
  animation: slip 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slip { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.rc { position: relative; padding: 26px 24px 24px; }
.rc .x {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); transition: color 0.15s ease, border-color 0.15s ease;
}
.rc .x:hover { color: #fff; border-color: rgba(246, 217, 164, 0.45); }
.rc .brandline { display: flex; justify-content: space-between; gap: 12px; color: var(--dim); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.rc > .brandline { padding-right: 46px; }
.rc > .brandline span:first-child { color: var(--gold-2); }
.rc h3 { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; margin: 18px 0 5px; padding-right: 20px; }
.rc .place { color: var(--muted); font-family: var(--body); font-size: 13.5px; }
.rc .meta { color: var(--dim); margin-top: 10px; font-size: 11px; line-height: 1.75; }
/* garis pemisah terbelah: biru | berlian | emas */
.rc hr {
  position: relative; border: 0; height: 1px; margin: 20px 0; overflow: visible;
  background: linear-gradient(90deg, rgba(91, 140, 255, 0), rgba(159, 184, 255, 0.5) 30%, rgba(91, 140, 255, 0.15) 47%, transparent 48.5%, transparent 51.5%, rgba(233, 184, 106, 0.15) 53%, rgba(246, 217, 164, 0.5) 70%, rgba(233, 184, 106, 0));
}
.rc hr::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(45deg, var(--blue-2) 50%, var(--gold-2) 50%); box-shadow: 0 0 8px rgba(233, 184, 106, 0.4);
}
.rc table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rc th {
  color: var(--dim); font-weight: 400; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; text-align: right;
  padding: 0 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rc th:first-child, .rc td:first-child { text-align: left; padding-left: 0; }
.rc th:last-child, .rc td:last-child { padding-right: 0; }
.rc td { text-align: right; padding: 9px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); vertical-align: top; }
.rc tbody tr:last-child td { border-bottom: 0; }
.rc td:first-child { font-weight: 500; letter-spacing: 0.04em; }
.rc td small { display: block; font-size: 9.5px; color: var(--dim); margin-top: 2px; letter-spacing: 0.02em; font-weight: 400; }
.rc td.s { color: var(--dim); font-size: 10.5px; letter-spacing: 0.04em; }
/* sel utama (BTC +1h): dibingkai foil emas tipis */
.rc td.hl, .rc .hl {
  background: linear-gradient(180deg, rgba(233, 184, 106, 0.1), rgba(233, 184, 106, 0.03));
  box-shadow: inset 0 0 0 1px rgba(246, 217, 164, 0.32); border-radius: 7px; padding-right: 8px;
}
.rc td:last-child.hl { padding-right: 8px; }
.rc .sum { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--muted); }
.rc .sum .num { color: var(--text); }
.rc .sum .big { font-family: var(--display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px; color: var(--text); }
.rc .sum .big:last-child {
  background: linear-gradient(180deg, #fff3da, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
.rc .aibox {
  border-radius: 12px; padding: 14px; border: 1px solid rgba(246, 217, 164, 0.18);
  background: linear-gradient(180deg, rgba(233, 184, 106, 0.06), rgba(233, 184, 106, 0.015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.rc .aibox .brandline span:first-child { color: var(--gold-2); }
.rc .aibox .sum { font-size: 12px; }
.rc .aibox p { font-family: var(--body); color: var(--muted); margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
/* baris lubang sobekan di atas kaki struk */
.rc .foot2 { text-align: center; color: var(--dim); font-size: 9.5px; margin-top: 22px; letter-spacing: 0.26em; }
.rc .foot2::before {
  content: ''; display: block; height: 10px; margin: 0 -24px 18px;
  background: radial-gradient(circle, #06070b 3px, rgba(255, 255, 255, 0.07) 3.5px, transparent 4.2px) 7px 50% / 14px 10px repeat-x;
}
.rc .barcode {
  height: 34px; margin: 14px auto 0; width: 70%; opacity: 0.6;
  background: linear-gradient(90deg, var(--blue-2), #e8eaf4 50%, var(--gold-2));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px, #000 4px 5px, transparent 5px 8px, #000 8px 11px, transparent 11px 12px);
          mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px, #000 4px 5px, transparent 5px 8px, #000 8px 11px, transparent 11px 12px);
}
.rc .foot2 .pill { font-family: var(--body); letter-spacing: 0.01em; }
.rc .src { color: var(--blue-2); text-decoration: none; }
.rc .src:hover { text-decoration: underline; }

/* gambar resmi di dalam struk */
.rc-media { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 16px; }
.rc-media figure { margin: 12px 0 0; }
.rc-media img {
  width: 100%; border-radius: 10px; display: block; background: var(--panel-2);
  border: 1px solid rgba(255, 255, 255, 0.1); animation: fadeimg 0.5s ease;
}
@keyframes fadeimg { from { opacity: 0; } }
.rc-media figcaption { font-family: var(--body); font-size: 11.5px; color: var(--dim); margin-top: 7px; line-height: 1.45; }
.rc-media figcaption b { color: var(--muted); font-weight: 600; display: block; font-size: 12.5px; }
.rc-media figcaption span { opacity: 0.75; }

/* ── Dialog cara mengukur ───────────────── */
.how {
  max-width: 620px; width: calc(100vw - 32px); color: var(--text); border: 0; border-radius: 20px; padding: 28px 30px;
  background: var(--foil) top / 100% 1px no-repeat, radial-gradient(120% 40% at 0% 0%, rgba(91, 140, 255, 0.1), transparent 60%), linear-gradient(180deg, #141722, #0c0e14);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.95);
}
.how::before { background: var(--hair-split); }
.how::backdrop { background: rgba(3, 4, 8, 0.7); }
.how h2 { font-family: var(--display); font-weight: 500; font-size: 18px; margin-bottom: 16px; padding-right: 40px; }
.how ol { list-style: decimal; padding-left: 20px; }
.how li { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.how li::marker { color: var(--gold-2); font-family: var(--mono); font-size: 12px; }
.how li b { color: var(--text); font-weight: 600; }
.how em { color: var(--blue-2); font-style: normal; }
.how .x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); font-size: 17px; color: var(--muted); z-index: 1; }
.how form { margin: 0; }

/* ── Layar kecil ────────────────────────── */
@media (max-width: 1180px) {
  .grid { grid-template-columns: 300px minmax(0, 1fr) 300px; }
  .tag { display: none; }
}
@media (max-width: 900px) {
  :root { --top-h: 60px; }
  .top { padding: 0 14px; gap: 10px; }
  .brand { gap: 10px; }
  .brand img { width: 36px; height: 36px; padding: 3px; }
  .brand-sub { display: none; }
  .word { font-size: 15px; letter-spacing: 0.14em; }
  .top-right { gap: 6px; }
  #howBtn, #liveStatus span { display: none; }
  #liveStatus { width: 34px; padding: 0; justify-content: center; }
  /* pemilih tab: kontrol bersegmen; tiap tab membawa warna wajahnya */
  .mtabs {
    display: flex; gap: 4px; margin: 10px 10px 0; padding: 4px; border-radius: 14px; position: sticky; top: calc(var(--top-h) + 6px); z-index: 15;
    background: linear-gradient(180deg, #11141d, #0b0d13); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
  }
  .mtabs button { flex: 1; height: 34px; border-radius: 10px; border: 0; background: none; font-size: 12.5px; color: var(--muted); letter-spacing: 0.01em; }
  .mtabs button.on { color: #fff; }
  .mtabs button[data-tab="back"].on { background: rgba(91, 140, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(159, 184, 255, 0.4); }
  .mtabs button[data-tab="map"].on { background: linear-gradient(90deg, rgba(91, 140, 255, 0.16), rgba(233, 184, 106, 0.13)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
  .mtabs button[data-tab="ahead"].on { background: rgba(233, 184, 106, 0.13); box-shadow: inset 0 0 0 1px rgba(246, 217, 164, 0.4); }
  .grid { display: block; height: auto; min-height: 0; padding: 10px 10px 0; }
  .grid > * { display: none; }
  .grid[data-tab="map"] .stage { display: block; height: 62vh; border-radius: 18px; }
  .grid[data-tab="back"] .back { display: flex; }
  .grid[data-tab="ahead"] .ahead { display: flex; }
  /* di HP daftar menggulir bersama halaman: blur latar akan dihitung ulang tiap frame, jadi dimatikan */
  .col { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ledger, .calls { max-height: none; overflow: visible; }
  .timeline { margin: 10px; padding: 10px 12px; }
  .tl-note { display: none; }
  .assets { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .assets::-webkit-scrollbar { display: none; }
  .receipt {
    top: auto; left: 8px; right: 8px; bottom: 0; width: auto; max-height: 86vh; border-radius: 18px 18px 0 0; border-bottom: 0;
    box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.95);
  }
  .rc { padding: 24px 18px 22px; }
  .rc .foot2::before { margin: 0 -18px 18px; }
  .legend { left: 12px; bottom: 40px; max-width: calc(100% - 24px); padding: 7px 11px; gap: 4px 11px; font-size: 11px; }
  .stage-frame .proj { top: auto; bottom: 108px; font-size: 8px; letter-spacing: 0.14em; }
  .stage-note { right: 14px; }
  .stage-status { padding: 0 14px; }
  .stage-status span { padding: 0 10px; }
  .foot { padding: 14px 16px 24px; }
}
@media (max-width: 420px) {
  .word { font-size: 14px; letter-spacing: 0.1em; }
  .top { gap: 8px; padding: 0 12px; }
  .brand img { width: 34px; height: 34px; }
  .token .tk { padding: 0 6px 0 12px; gap: 7px; letter-spacing: 0.06em; }
  .token .tk em { padding: 2px 6px; letter-spacing: 0.12em; }
  .coin { display: none; }
  .token .ca { display: none; }
}
@media (max-width: 350px) {
  .brand-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt, .rc-media img { animation: none; }
  .pill.live.ok i::after { animation: none; opacity: 0; }
  .stage::after { animation: none; opacity: 0.3; }
  .globe-glow, .halo, .globe-limb { transition: none; }
}

/* Fokus keyboard & angka rata (disamakan dengan halaman depan) */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }
.score .big b, .rc td, .recap-row, .verdict, .row .v, .num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ══ Citra kejadian di struk: flipbook satelit (NASA GIBS), foto berita, peta resmi ══ */
.rc .x { z-index: 6; background: rgba(6, 8, 14, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rc-hero { margin: -26px -24px 22px; }
.rc-hero:empty { display: none; }
.sat-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #05060a;
  border-radius: 15px 15px 0 0; isolation: isolate;
}
.sat-stage canvas, .sat-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* warna asli GOES/VIIRS digelapkan sedikit supaya menyatu dengan kertas gelap */
/* bingkai satelit sudah diwarnai di kanvas (app.js → gradeFrame); foto Fed diberi nada serupa lewat CSS */
.sat-photo img { filter: saturate(0.72) contrast(1.06) brightness(0.8) sepia(0.12); }
.sat .sat-stage canvas { opacity: 0; transition: opacity 0.6s ease; }
.sat.ready .sat-stage canvas { opacity: 1; }
.sat-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 6, 11, 0.62) 0%, transparent 26%, transparent 58%, rgba(15, 17, 24, 0.94) 100%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(4, 5, 9, 0.6) 100%),
    linear-gradient(90deg, rgba(91, 140, 255, 0.16), transparent 45%, transparent 60%, rgba(233, 184, 106, 0.12));
}
.sat.mono .sat-shade { background:
    linear-gradient(180deg, rgba(5, 6, 11, 0.6) 0%, transparent 26%, transparent 58%, rgba(15, 17, 24, 0.94) 100%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(4, 5, 9, 0.6) 100%); }
.sat-chip {
  position: absolute; top: 16px; left: 16px; z-index: 2; max-width: calc(100% - 80px);
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  padding: 7px 10px; border-radius: 999px; background: rgba(6, 8, 14, 0.58); border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sat-chip b { color: var(--gold-2); font-weight: 600; }
/* penanda lokasi kejadian (dihitung dari kotak wilayah bingkai) */
.sat-pin { position: absolute; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(246, 217, 164, 0.75); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 18px rgba(233, 184, 106, 0.35); }
.sat-pin::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--gold-2); }
.sat-pin::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(246, 217, 164, 0.5); opacity: 0; }
.sat.at-ev .sat-pin::after { animation: satping 1.6s ease-out infinite; }
@keyframes satping { from { transform: scale(0.55); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
.sat-ts { position: absolute; left: 18px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.sat-rel { font: 600 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--blue-2); }
.sat.at-ev .sat-rel { color: var(--gold-2); }
.sat-time { font: 400 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.sat-flag { position: absolute; right: 16px; bottom: 14px; z-index: 2; font: 600 9.5px/1 var(--mono); letter-spacing: 0.2em; color: #1a1408;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 6px 9px; border-radius: 999px; box-shadow: 0 6px 20px -6px rgba(233, 184, 106, 0.7); }
.sat-load { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font: 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.sat.ready .sat-load { display: none; }
.sat-ctl { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 12px 24px 0; }
.sat-play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(246, 217, 164, 0.3); }
.sat-play:hover { border-color: rgba(246, 217, 164, 0.6); }
.sat-play svg { width: 11px; height: 11px; fill: currentColor; }
.sat-play .i-play, .sat.paused .sat-play .i-pause { display: none; }
.sat.paused .sat-play .i-play { display: inline; }
.sat-scrub { position: relative; height: 20px; }
.sat-scrub i { position: absolute; top: 50%; width: 1px; height: 5px; margin: -2.5px 0 0 -0.5px; background: rgba(255, 255, 255, 0.22); pointer-events: none; }
.sat-scrub i.ev { width: 2px; height: 12px; margin: -6px 0 0 -1px; background: var(--gold); box-shadow: 0 0 8px rgba(233, 184, 106, 0.6); }
.sat-scrub input { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sat-scrub input::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, rgba(159, 184, 255, 0.45), rgba(246, 217, 164, 0.45)); }
.sat-scrub input::-moz-range-track { height: 1px; background: linear-gradient(90deg, rgba(159, 184, 255, 0.45), rgba(246, 217, 164, 0.45)); }
.sat-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 0 10px rgba(233, 184, 106, 0.55); }
.sat-scrub input::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }
.sat-n { font: 10px/1 var(--mono); color: var(--dim); letter-spacing: 0.08em; white-space: nowrap; }
.sat-cap { margin: 10px 0 0; padding: 0 24px; font: 11.5px/1.5 var(--body); color: var(--dim); }
.sat-cap span { color: var(--muted); opacity: 0.8; white-space: nowrap; }
.sat-photo { margin: 0; }
.sat-photo .sat-cap { padding-top: 0; }

/* foto berita: kartu tautan (gambar ditautkan langsung dari penerbit, tidak disimpan ulang) */
.rc-news { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 16px; }
.rc-news .brandline span:first-child { color: var(--gold-2); }
.news-row { display: flex; gap: 10px; overflow-x: auto; margin: 12px -24px 0; padding: 0 24px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.news-row::-webkit-scrollbar { display: none; }
.news-card { flex: 0 0 176px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text);
  border-radius: 10px; padding-bottom: 4px; }
.news-img { display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--panel-2); border: 1px solid rgba(255, 255, 255, 0.08); }
.news-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) brightness(0.9); transition: filter 0.2s ease, transform 0.4s ease; }
.news-card:hover .news-img img { filter: none; transform: scale(1.04); }
.news-dom { font: 9.5px/1 var(--mono); color: var(--blue-2); letter-spacing: 0.06em; }
.news-t { font: 500 12px/1.35 var(--body); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .news-t { color: var(--text); }

/* popup peta: gambar mini satelit gelap di atas kartu */
.pop-sat { position: relative; height: 92px; margin: -12px -14px 11px; overflow: hidden; border-radius: 11px 11px 0 0; background: #07090f; }
.pop-sat img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.35s ease; }
.pop-sat.in img { opacity: 1; }
.pop-sat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #161a26 100%), radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(5, 6, 10, 0.55)); }
.pop-sat::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1px solid rgba(246, 217, 164, 0.8); box-shadow: 0 0 12px rgba(233, 184, 106, 0.4); }
.pop-sat span { position: absolute; z-index: 1; right: 8px; bottom: 6px; font: 8.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

@media (max-width: 900px) {
  .rc-hero { margin: -24px -18px 20px; }
  .sat-ctl { padding: 12px 18px 0; }
  .sat-cap { padding: 0 18px; }
  .news-row { margin: 12px -18px 0; padding: 0 18px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sat.at-ev .sat-pin::after { animation: none; opacity: 0.6; transform: none; }
  .sat .sat-stage canvas, .pop-sat img, .news-img img { transition: none; }
}
.pop-sat.photo::before { display: none; }

/* laci struk terbuka (layar lebar): angka & atribusi pojok kanan peta tertutup laci → sembunyikan rapi */
@media (min-width: 901px) {
  .rc-open #stageNote, .rc-open .maplibregl-ctrl-bottom-right, .rc-open .maplibregl-ctrl-top-right { opacity: 0; pointer-events: none; transition: opacity .2s; }
  .rc-open .stage-status .right { visibility: hidden; }
}