/* =========================================================
   BongkarJudol — tata letak artikel-simulasi
   Kolom baca sempit, diagram melebar, angka monospace.
   ========================================================= */

:root{
  --bg:#060e1c;
  --bg2:#081426;
  --card:#0b1a30;
  --sunk2:#0a1729;

  --line:#17304f;
  --line2:#1e3f66;
  /* nomor bagian raksasa: cukup terbaca sebagai angka, tidak sampai
     bersaing dengan judulnya. --line2 terlalu pudar di ukuran itu. */
  --hantu:#2e5c90;

  --tx:#e7f0fb;
  --dim:#9db2ce;
  --dim2:#8296b4;

  /* aksen halaman: kuningan arsip. Dipakai untuk perabot:
     nomor bagian, garis aktif, cincin fokus. */
  --aksen:#c9873c;
  --aksen2:#e3a457;
  --aksenglow:rgba(201,135,60,.3);

  /* biru turun pangkat: hanya menandai sesuatu yang SEDANG BERJALAN
     atau angka yang NYATA, bukan lagi warna halaman. */
  --blue:#3d8bfd;
  --blue2:#5aa2ff;
  --blueglow:rgba(61,139,253,.26);

  /* arti tetap: hijau untung, merah rugi, emas peraga judol
     (scatter, putaran gratis, "menang" yang sebenarnya rugi). */
  --pos:#2ee6a0;
  --neg:#f0576b;
  --gold:#f5b73d;

  /* satu tangga ukuran untuk seluruh halaman; tidak ada ukuran lepas di luar ini */
  --t2:12px;     /* label kapital terkecil; lantai ukuran halaman */
  --t3:13px;     /* keterangan, baris kedua */
  --t4:14px;     /* daftar, tautan, judul kecil */
  --t5:15.5px;   /* isi kartu */
  --t6:17px;     /* bacaan utama */
  --t7:19px;     /* paragraf pembuka */
  --a2:20px;     /* angka sedang */
  --a3:26px;     /* angka besar */
  --a4:30px;     /* angka peraga mesin */

  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;

  --read:700px;      /* lebar kolom baca */
  --figw:1000px;     /* lebar diagram saat melebar */
  --kolom:960px;     /* satu lebar kolom: hero, pengantar, jalur data, isi */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--tx);
  font:17px/1.72 var(--sans);
  background:
    radial-gradient(900px 520px at 80% -8%,rgba(201,135,60,.13),transparent 62%),
    radial-gradient(720px 460px at 6% 10%,rgba(201,135,60,.06),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
svg{display:block}
p{margin:0}

/* ---------- tipografi ---------- */
h1,h2{margin:0;font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1.06}
h1{font-size:clamp(34px,5.4vw,54px)}
h2{font-size:clamp(23px,2.8vw,30px)}
em{font-style:normal;font-weight:600;color:var(--gold)}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.kicker,.sect-kicker,.ds-lead,.toc-cap{
  font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.kicker{color:var(--aksen2);margin-bottom:20px}
.deck{font-size:var(--t7);color:var(--dim);margin-top:20px;max-width:56ch;line-height:1.62}
.fine{font-size:var(--t4);color:var(--dim2);line-height:1.6}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.hl{color:var(--aksen2)}

/* ---------- fokus papan ketik ----------
   Sebelumnya tidak ada sama sekali, dan .inp input{outline:none}
   malah mematikan cincin bawaan tanpa menggantinya. Satu aturan
   ini menutup seluruh halaman sekaligus. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--aksen2);
  outline-offset:2px;
  border-radius:4px;
}
/* panel isian sudah punya cincinnya sendiri di .inp:focus-within,
   jadi kotak dalamnya tidak perlu cincin kedua */
.inp input:focus-visible{outline:none}

/* ---------- tombol ---------- */
.btn{
  display:inline-block;border:1px solid transparent;cursor:pointer;
  font:inherit;font-size:var(--t5);font-weight:600;
  padding:11px 22px;border-radius:10px;text-decoration:none;transition:.16s;
}
.btn.primary{background:var(--aksen);color:#031022;border-color:var(--aksen)}
.btn.primary:hover{background:var(--aksen2)}
.btn.primary:disabled{background:#1b2c46;border-color:#1b2c46;color:#5b7395;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--dim);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--aksen);color:#fff}
.btn.block{display:block;width:100%}
.btn.ico{display:inline-flex;align-items:center;gap:8px}
.btn.ico svg{width:15px;height:15px}

/* ---------- tirai pembuka ---------- */
body.locked{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:32px 22px;
  transition:opacity .4s ease,visibility .4s;
}
.intro::before{content:"";position:absolute;inset:0;background:#040913;opacity:.97}
.intro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 28%,rgba(0,0,0,.82) 100%);
}
.intro.out{opacity:0;visibility:hidden}
.intro-in{position:relative;z-index:2;text-align:center;max-width:600px;width:100%}
.intro-reel{display:flex;gap:12px;justify-content:center;margin-bottom:38px}
.ir-sym{
  width:72px;height:82px;border:1px solid var(--line2);border-radius:10px;background:var(--sunk2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ir-sym svg{width:34px;height:34px}
.ir-sym.rolling svg{animation:roll .09s linear infinite}
.intro-lines{min-height:0;margin-bottom:26px}
.intro-lines p{
  font-size:clamp(18px,3vw,24px);font-weight:600;line-height:1.45;color:#fff;
  opacity:0;transform:translateY(10px);margin-bottom:6px;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);
}
.intro-lines p.on{opacity:1;transform:none}
.intro-lines p.dim{opacity:.55}
.intro-meter{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;margin-bottom:28px;
  opacity:0;transform:translateY(10px);transition:.8s cubic-bezier(.2,.7,.3,1);
}
.intro-meter.on{opacity:1;transform:none}
.im-cap{font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.im-sub{font-size:var(--t3);color:var(--dim2);margin-top:6px}
.im-num{
  font-family:var(--mono);font-size:clamp(30px,6vw,46px);font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;margin:10px 0 0;
}
.intro-act{opacity:0;transform:translateY(10px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.intro-act.on{opacity:1;transform:none}
.intro-skip{
  display:block;margin:14px auto 0;font:inherit;font-size:var(--t4);cursor:pointer;
  background:none;border:none;color:var(--dim2);text-decoration:underline;text-underline-offset:3px;
}
.intro-skip:hover{color:var(--tx)}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;background:var(--aksen);transition:width .1s linear}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(6,14,28,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:22px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand-mark{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line2);color:var(--aksen2);
}
.brand-mark svg{width:20px;height:20px}
.brand-text{font-size:var(--t6);font-weight:700;color:#fff;letter-spacing:-.02em}
.brand-text b{color:var(--aksen2);font-weight:700}
.nav-links{display:flex;gap:24px;margin:0 auto}
.nav-links a{font-size:var(--t4);color:var(--dim2);text-decoration:none;transition:.16s}
.nav-links a:hover{color:#fff}
/* tombol kanan header: satu-satunya ajakan bertindak, jadi diberi aksen */
.tag-btn{
  font-size:var(--t3);font-weight:600;color:var(--aksen2);text-decoration:none;
  border:1px solid rgba(201,135,60,.45);border-radius:99px;padding:8px 15px;transition:.16s;white-space:nowrap;
}
.tag-btn:hover{border-color:var(--aksen);background:rgba(201,135,60,.1);color:#fff}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.hero-in{max-width:var(--kolom)}

/* kepala hero: teks kiri, ilustrasi kanan */
.hero-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,392px);
  gap:34px;align-items:center;
}
.hero-copy{min-width:0}
.hero-art{margin:0;min-width:0}
.hero-art img{
  display:block;width:100%;height:auto;
  /* Ilustrasi diekspor di atas hitam pekat. screen membuat bagian
     hitam itu tembus ke latar halaman.

     Sempat dicoba menggantinya dengan alfa sungguhan; hasilnya
     membengkakkan webp dari 53KB jadi 139-205KB, karena membagi
     warna dengan alfa memperkuat derau di daerah gelap dan derau
     tidak bisa dimampatkan. Latar halaman sendiri sudah nyaris
     hitam, jadi angkatan nadanya di bawah 3% - tidak sepadan
     dengan tiga kali lipat ongkos unduh. */
  mix-blend-mode:screen;
}
.rule-art{margin:40px 0 0}
.rule-art picture{display:block}
.rule-art img{
  display:block;width:100%;height:auto;
  mix-blend-mode:screen;   /* alasan sama seperti .hero-art img */
}

figcaption{font-size:var(--t3);color:var(--dim2);line-height:1.6}
figcaption b{color:var(--dim);font-weight:600}

/* ---------- pita data ---------- */
.datastrip{border-bottom:1px solid var(--line);padding:34px 0;background:rgba(8,20,38,.5)}
.datastrip .wrap{max-width:var(--kolom)}
.ds-lead{color:var(--dim2);margin-bottom:18px}
.ds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.ds{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:18px 18px 16px;
}
.ds::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--aksen),rgba(201,135,60,0));
}
.ds-ic{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;margin-bottom:13px;
  background:rgba(201,135,60,.1);border:1px solid var(--line2);color:var(--aksen2);
}
.ds-ic svg{width:16px;height:16px}
.ds b{
  display:block;font-family:var(--mono);font-size:var(--a3);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;
}
.ds-u{font-size:.58em;font-weight:600;color:var(--dim);margin:0 .14em;letter-spacing:0}
.ds i{display:block;font-style:normal;font-size:var(--t3);color:var(--dim2);line-height:1.5;margin-top:7px}

/* =========================================================
   TATA LETAK DOKUMEN
   ========================================================= */
.doc{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;align-items:start;padding:56px 28px 40px}

.toc{
  position:sticky;top:88px;
  max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
.toc::-webkit-scrollbar{width:6px}
.toc::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.toc::-webkit-scrollbar-track{background:transparent}
.toc-cap{color:var(--dim2);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 0 7px 14px;margin-left:-1px;
  border-left:1px solid transparent;
  font-size:var(--t4);color:var(--dim2);text-decoration:none;line-height:1.4;transition:.16s;
}
.toc a i{font-style:normal;font-family:var(--mono);font-size:var(--t2);color:var(--line2);flex:0 0 auto}
.toc a:hover{color:var(--tx)}
.toc a.on{color:#fff;border-left-color:var(--aksen)}
.toc a.on i{color:var(--aksen2)}
.toc-help{
  display:block;margin-top:20px;font-size:var(--t4);color:var(--aksen2);text-decoration:none;
  border-top:1px solid var(--line);padding-top:16px;
}
.toc-help:hover{color:#fff}

.body{min-width:0}
.sect{padding-bottom:88px}
.sect-head{margin-bottom:24px;position:relative}

/* Angka urutan dibesarkan jadi penanda, bukan label.
   Di layar lebar ia keluar ke margin kiri; di bawah itu duduk
   di atas judul. aria-hidden karena kata "Bagian 01" tepat di
   bawahnya sudah mengucapkan hal yang sama. */
.sect-num{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(44px,6vw,76px);font-weight:700;letter-spacing:-.05em;
  color:var(--hantu);line-height:.9;margin-bottom:10px;
}
.sect-kicker{color:var(--aksen2);margin-bottom:10px}
.prose{max-width:var(--read)}
.prose p{color:var(--dim);margin-bottom:18px}
.prose p:last-child{margin-bottom:0}

/* gambar: kotak diagram, boleh melebar dari kolom baca.
   Garis mendatar samar memberi kesan kertas bergaris tanpa
   mengganggu apa pun yang dicetak di atasnya. */
.fig{
  margin:26px 0 0;max-width:var(--read);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;
  background-image:repeating-linear-gradient(
    180deg,rgba(201,135,60,.028) 0 1px,transparent 1px 28px);
}
.fig.wide{max-width:var(--figw)}
.fig figcaption{border-top:1px solid var(--line);margin-top:24px;padding-top:16px}
/* nomor gambar dibaca sebagai penanda arsip, bukan teks tebal biasa */
.fig figcaption b:first-child{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--t2);font-weight:700;letter-spacing:.04em;
  color:var(--aksen2);text-transform:uppercase;
}

/* ---------- 01 mesin ---------- */
.machine-row{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:20px;align-items:start}
.reels{display:flex;gap:7px;justify-content:center;margin-bottom:14px}
.reel{
  flex:1;height:76px;background:var(--tx);border:1px solid var(--dim);border-radius:9px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.reel.spin .sym{animation:roll .11s linear infinite}
@keyframes roll{0%{transform:translateY(-30px);opacity:.25}50%{opacity:1}100%{transform:translateY(30px);opacity:.25}}
.sym svg{width:36px;height:36px}
.reel.hit{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,183,61,.28)}
.sy-seven{color:#d8404f}.sy-diamond{color:#3f7fd0}.sy-bell{color:#d99a25}
.sy-lemon{color:#b8a520}.sy-grape{color:#7b53c7}.sy-cherry{color:#d8404f}
.sy-scatter{color:#e0a42e}

/* panel isian: pengguna menentukan sendiri deposit dan taruhannya */
.params{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;
}
.fld{display:block;flex:1 1 190px;min-width:0}
.fld>span{
  display:block;font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim2);margin-bottom:7px;
}
.inp{
  display:flex;align-items:center;gap:2px;
  background:var(--bg);border:1px solid var(--line2);border-radius:9px;
  padding:0 12px;transition:.15s;
}
.inp:focus-within{border-color:var(--aksen);box-shadow:0 0 0 3px var(--aksenglow)}
.inp>i{font-style:normal;font-family:var(--mono);font-size:var(--t4);color:var(--dim2);flex:0 0 auto}
.inp input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--mono);font-size:var(--t6);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;padding:11px 0 11px 4px;
}
.inp input::-webkit-outer-spin-button,
.inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp input[type=number]{-moz-appearance:textfield;appearance:textfield}
.params .btn{flex:0 0 auto}
.params-note{
  flex:1 1 100%;font-size:var(--t3);color:var(--dim2);line-height:1.6;
  border-top:1px solid var(--line);padding-top:12px;margin-top:2px;
}
.params-note b{color:#fff;font-weight:600}
.params-note b.neg{color:var(--neg)}

.verdict{min-height:38px;font-size:var(--t4);color:var(--dim2);margin-top:11px;line-height:1.45}
.verdict.win{color:var(--pos)}
.verdict.lose{color:var(--neg)}
.verdict.fake{color:var(--gold)}

.fsflash{
  margin-top:12px;padding:12px;border-radius:10px;text-align:center;
  background:rgba(245,183,61,.09);border:1px solid rgba(245,183,61,.38);
  opacity:0;transform:scale(.95);transition:.28s;pointer-events:none;
}
.fsflash.on{opacity:1;transform:none}
.fs-star{display:block;margin:0 auto 6px;width:24px;height:24px;color:var(--gold)}
.fs-star svg{width:100%;height:100%}
.fsflash b{display:block;font-size:var(--t2);letter-spacing:.1em;color:var(--gold)}
.fsflash i{display:block;font-style:normal;font-family:var(--mono);font-size:var(--t4);color:#fff;margin-top:4px}

.machine-side{display:flex;flex-direction:column;gap:13px}
.kvrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.kvbox{background:var(--sunk2);padding:13px 15px}
.kvbox span{display:block;font-size:var(--t2);color:var(--dim2);margin-bottom:5px}
.kvbox b{display:block;font-size:var(--a3);font-weight:700;margin-bottom:9px}
.bar{height:4px;background:#0a1729;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;transition:width .3s ease}
.bar i.pos{background:var(--pos);width:100%}
.bar i.neg{background:var(--neg)}

.tally3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.t3{background:var(--sunk2);padding:14px 16px;text-align:center}
.t3 b{display:block;font-size:var(--a3);font-weight:700;color:#fff}
.t3 i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);line-height:1.3;margin-top:3px}

canvas{display:block;width:100%;border:1px solid var(--line);border-radius:11px;background:var(--sunk2)}
.machine-acts{display:flex;gap:9px;flex-wrap:wrap}
.machine-acts .btn{flex:1 1 auto}

/* ---------- 02 alur ---------- */
.pipe{
  position:relative;display:flex;justify-content:space-between;gap:12px;
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;
  padding:20px 18px;text-align:center;margin-bottom:12px;
}
.track{position:absolute;left:14%;right:14%;top:42px;height:1px;background:var(--line2)}
.packet{
  position:absolute;left:0;top:42px;width:9px;height:9px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--blue2);box-shadow:0 0 0 4px var(--blueglow);
  opacity:0;z-index:3;transition:opacity .2s,background .2s,box-shadow .2s;
}
.packet.on{opacity:1}
.packet.hasil{background:var(--neg);box-shadow:0 0 0 4px rgba(240,87,107,.22)}
.stage{flex:1 1 0;min-width:0;position:relative;z-index:2;opacity:.72;transition:.25s}
.stage.on{opacity:1}
.stage .pi{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:11px;margin-bottom:10px;background:var(--card);border:1px solid var(--line2);
  color:var(--dim2);transition:.25s;
}
.stage .pi svg{width:20px;height:20px}
.stage.on .pi{border-color:var(--blue);color:var(--blue2)}
.stage b{display:block;font-size:var(--t3);font-weight:600;color:#fff;margin-bottom:2px}
.stage i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);line-height:1.35}

.pipe-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.lockbox{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:15px;transition:.3s}
.lock-label{font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);margin-bottom:9px}
.lock-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.lock-num{
  font-size:var(--a4);font-weight:700;letter-spacing:.1em;color:var(--blue2);
  background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:5px 11px;
}
.lock-chip{display:inline-flex;align-items:center;gap:7px;color:var(--dim2);font-size:var(--t2);max-width:126px;line-height:1.35}
.lock-chip svg{width:14px;height:14px;flex:0 0 auto}
.lock-chip i{font-style:normal}
.lockbox.live{border-color:var(--gold)}
.lockbox.live .lock-num,.lockbox.live .lock-chip{color:var(--gold)}
.lockbox.locked{border-color:var(--neg)}
.lockbox.locked .lock-num,.lockbox.locked .lock-chip{color:var(--neg)}

.theater{
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:15px;
  display:flex;align-items:center;gap:13px;opacity:.5;transition:.3s;
}
.theater.on{opacity:1;border-color:var(--blue)}
.th-reels{display:flex;gap:5px;flex:0 0 auto}
.th-reel{
  width:29px;height:37px;background:var(--tx);border:1px solid var(--dim);border-radius:6px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.th-reel span svg{width:17px;height:17px}
.th-reel.rolling span{animation:roll .09s linear infinite}
.th-txt{flex:1;min-width:0}
.th-cap{font-size:var(--t3);color:var(--dim2);line-height:1.45;margin-bottom:8px}
.th-cap b{color:#fff;font-weight:600}
.th-bar{height:3px;background:var(--bg);border-radius:99px;overflow:hidden}
.th-bar i{display:block;height:100%;width:0;background:var(--blue)}

.punch{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:14px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  opacity:0;transform:translateY(6px);transition:.45s;
}
.punch.on{opacity:1;transform:none}
.pn{background:var(--sunk2);padding:14px}
.pn>span{display:block;font-size:var(--t2);color:var(--dim2);margin-bottom:5px}
.pn>b{display:block;font-size:var(--a2);font-weight:700;margin-bottom:9px}
.pn-bar{height:4px;background:var(--bg);border-radius:99px;overflow:hidden}
.pn-bar i{display:block;height:100%}
.pn-bar i.tiny{width:1.5%;min-width:3px;background:var(--pos)}
.pn-bar i.wide{width:100%;background:var(--neg)}
.pn.flat{display:flex;align-items:center;justify-content:center}
.pn.flat p{font-size:var(--t4);color:var(--tx);text-align:center}

/* ---------- 03 ---------- */
.fw-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,210px);gap:20px;align-items:center}
.fw-screen{
  background:rgba(245,183,61,.07);border:1px solid rgba(245,183,61,.3);
  border-radius:11px;padding:18px;margin-bottom:12px;text-align:center;transition:.3s;
}
.fw-screen.buka{background:rgba(240,87,107,.07);border-color:rgba(240,87,107,.3)}
.fw-label{font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.fw-screen.buka .fw-label{color:var(--neg)}
.fw-big{display:flex;align-items:center;justify-content:center;gap:13px}
.fw-coin{width:30px;height:30px;color:var(--gold);flex:0 0 auto}
.fw-screen.buka .fw-coin{color:var(--neg)}
.fw-amt{font-size:clamp(26px,4.4vw,34px);font-weight:700;color:var(--gold)}
.fw-screen.buka .fw-amt{color:var(--neg)}
.fw-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:13px}
.fw-cell{background:var(--sunk2);padding:12px}
.fw-cell span{display:block;font-size:var(--t2);color:var(--dim2);margin-bottom:4px}
.fw-cell b{display:block;font-size:var(--t5);font-weight:700;margin-bottom:8px}
.coinrow{display:flex;gap:3px;flex-wrap:wrap;min-height:11px}
.bigcoin{width:9px;height:9px;border-radius:50%;background:var(--gold);opacity:0;transform:scale(.4);transition:opacity .2s}
.bigcoin.show{opacity:1;transform:none}
.bigcoin.back{background:var(--pos)}
.bigcoin.lost{background:var(--neg)}
.fw-cell.hilang{opacity:0;transition:.4s}
.fw-cell.hilang.show{opacity:1}
.fw-art svg{width:100%;height:auto;max-height:240px}
.art-win{font:700 26px var(--sans);fill:#fff;text-anchor:middle;letter-spacing:1px}

/* ---------- 04 papan RTP ---------- */
.rtp-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px;align-items:start}
.rtp-panel{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:16px}
.rtp-head{display:flex;align-items:center;gap:9px;margin-bottom:15px;flex-wrap:wrap}
.rtp-head b{font-size:var(--t2);letter-spacing:.1em;color:#fff}
.rtp-head i{font-style:normal;font-size:var(--t2);color:var(--dim2);margin-left:auto}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--neg);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(240,87,107,.2);
}
.rtp-list{display:flex;flex-direction:column;gap:10px}
.rg{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.rg-name{font-size:var(--t3);color:#fff;font-weight:600}
.rg-time{font-family:var(--mono);font-size:var(--t2);color:var(--dim2);text-align:right}
.rg-bar{grid-column:1;height:4px;background:var(--bg);border-radius:99px;overflow:hidden}
.rg-bar i{display:block;height:100%}
.rg-bar i.hot{background:var(--pos)}
.rg-bar i.warm{background:var(--gold)}
.rg-bar i.cold{background:var(--neg)}
.rg-val{grid-column:2;font-family:var(--mono);font-size:var(--t3);font-weight:700}
.rg-val.hot{color:var(--pos)}.rg-val.warm{color:var(--gold)}.rg-val.cold{color:var(--neg)}
.rtp-foot{font-size:var(--t2);color:var(--dim2);margin-top:14px;line-height:1.55}

.rtp-truth{display:flex;flex-direction:column;gap:10px}
.truth-box{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.truth-box.real{border-color:var(--blue)}
.tb-cap{font-size:var(--t2);color:var(--dim2);margin-bottom:5px;line-height:1.45}
.tb-num{font-size:var(--a4);font-weight:700;color:var(--dim2)}
.truth-box.real .tb-num{color:var(--blue2)}

/* ---------- 05 bonus ---------- */
.bonus-flow{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;
}
.bf{flex:1 1 108px;min-width:0}
.bf span{display:block;font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;color:var(--dim2);margin-bottom:5px}
.bf b{font-size:var(--t7);font-weight:700;color:#fff}
.bf-arr{width:15px;height:15px;color:var(--line2);flex:0 0 auto;margin-top:22px}
.bf.bonus b{color:var(--pos)}
.bf.lock{border-left:1px solid var(--line);padding-left:14px}
.bonus-ctl{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.bc-cap{font-size:var(--t3);color:var(--dim2)}
.tochips{display:flex;gap:5px}
.to{
  font:inherit;font-family:var(--mono);font-size:var(--t3);font-weight:600;cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--dim2);
  border-radius:7px;padding:6px 12px;transition:.15s;
}
.to:hover{border-color:var(--aksen);color:var(--tx)}
.to.active{background:var(--neg);border-color:var(--neg);color:#fff}
.bonus-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:12px}
.bo{background:var(--sunk2);padding:14px 16px;border-top:2px solid var(--pos)}
.bo.bad{border-top-color:var(--neg)}
.bo b{display:block;font-size:var(--a3);font-weight:700;color:var(--pos)}
.bo.bad b{color:var(--neg)}
.bo i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);line-height:1.5;margin-top:5px}
.bonus-note{
  font-size:var(--t4);color:var(--dim);line-height:1.65;
  background:rgba(240,87,107,.06);border-left:2px solid var(--neg);
  border-radius:0 8px 8px 0;padding:13px 16px;
}
.bonus-note b{color:#fff;font-weight:600}

/* ---------- 06 seribu orang ---------- */
.people-wrap{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:22px;align-items:start}
.people{
  display:grid;grid-template-columns:repeat(10,1fr);gap:4px;
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:13px;
}
.pp{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:5px;background:var(--card);color:#2b4368;cursor:pointer;transition:.2s;
}
.pp svg{width:72%;height:72%}
.pp.win{background:rgba(46,230,160,.14);color:var(--pos)}
.pp.mix{background:rgba(245,183,61,.14);color:var(--gold)}
.pp.lose{background:rgba(240,87,107,.13);color:var(--neg)}
.pp.picked{outline:2px solid var(--blue2);outline-offset:1px}
/* kanvas sebaran duduk tepat di bawah kisi orang */
#chartSebar{margin-top:11px}
.sebar-cap{margin-top:8px}

/* kotak seed: kecil, tidak menuntut perhatian, tapi ada */
.seedfld{flex:none}
.seedfld>span i{
  font-style:normal;font-weight:400;letter-spacing:.04em;text-transform:none;
  color:var(--dim2);opacity:.8;
}
.seedfld .inp input{font-size:var(--t5);padding:9px 0}
.seedfld .inp input::placeholder{color:var(--dim2);opacity:.7;font-weight:400}

#btnSalin{justify-content:center}

.peek{
  font-size:var(--t3);color:var(--dim2);line-height:1.6;
  border:1px dashed var(--line2);border-radius:10px;padding:11px 13px;margin-top:11px;
}
.peek b{color:#fff}
.peek b.pos{color:var(--pos)}
.peek b.neg{color:var(--neg)}

.fw-left,.near-left{min-width:0}
.lg.dimr .lg-ic{background:var(--card);color:#2b4368}
.people-side{display:flex;flex-direction:column;gap:11px}
.legend{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:13px}
.lg{display:flex;align-items:center;gap:10px;padding:6px 0}
.lg-ic{
  width:25px;height:25px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:var(--card);color:#2b4368;flex:0 0 auto;
}
.lg-ic svg{width:15px;height:15px}
.lg.pos .lg-ic{background:rgba(46,230,160,.14);color:var(--pos)}
.lg.neg .lg-ic{background:rgba(240,87,107,.13);color:var(--neg)}
.lg b{font-size:var(--t6);font-weight:700;min-width:34px}
.lg.pos b{color:var(--pos)}
.lg.neg b{color:var(--neg)}
.lg i{font-style:normal;font-size:var(--t3);color:var(--dim2);line-height:1.4}

/* ---------- 07 nyaris ---------- */
.near-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.strip{display:flex;gap:5px;background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:11px}
.strip i{
  flex:1;height:58px;background:var(--tx);border:1px solid var(--dim);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.strip i svg{width:28px;height:28px}
.near-stats{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:14px}
.ns{display:flex;align-items:center;gap:11px;padding:7px 0;flex-wrap:wrap}
.ns-ic{
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(245,183,61,.12);color:var(--gold);flex:0 0 auto;
}
.ns.near .ns-ic{background:rgba(240,87,107,.12);color:var(--neg)}
.ns-ic svg{width:15px;height:15px}
.ns b{display:block;font-size:var(--t6);font-weight:700;color:#fff}
.ns i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2)}
.dots{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:3px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.dot.n{background:var(--neg)}

.near-right{display:flex;flex-direction:column;gap:10px}
.cmp{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:14px;
}
.near-combo{display:flex;gap:5px}
.near-combo svg{width:28px;height:28px;background:var(--tx);border:1px solid var(--dim);border-radius:6px;padding:4px}
.near-eq{font-size:var(--t5);color:var(--line2)}
.near-verdict{
  font-size:var(--t2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--neg);background:rgba(240,87,107,.12);border-radius:6px;padding:6px 11px;
}
.cmp-note{font-size:var(--t3);color:var(--dim2);text-align:center}

/* ---------- 08 kalkulator ---------- */
.calc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sliders{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:22px}
.sl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.sl-top i{font-style:normal;font-size:var(--t3);letter-spacing:.13em;text-transform:uppercase;color:var(--dim2)}
.sl-top b{font-size:var(--t5);font-weight:700;color:#fff}
input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer;height:18px}

.calc-out{display:flex;flex-direction:column;gap:10px}
.jarbox{background:var(--sunk2);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center}
.jar{
  position:relative;width:46px;height:88px;flex:0 0 auto;
  background:var(--bg);border:1px solid var(--line2);border-radius:5px 5px 10px 10px;
  overflow:hidden;display:flex;align-items:flex-end;
}
.jar-fill{
  width:100%;height:0;transition:height .35s ease;background:var(--gold);
  background-image:radial-gradient(circle at 3px 3px,rgba(0,0,0,.16) 1.3px,transparent 1.7px);
  background-size:9px 9px;
}
.jar-txt{flex:1;min-width:0}
.jar-num{display:flex;align-items:center;gap:9px;margin:8px 0}
.jn-ic{width:22px;height:22px;color:var(--aksen2);flex:0 0 auto}
.jar-num span{font-family:var(--mono);font-size:clamp(21px,3.2vw,27px);font-weight:700;color:#fff;line-height:1.1}
.warn{display:flex;align-items:center;gap:12px;background:rgba(240,87,107,.06);border-left:2px solid var(--neg);border-radius:0 8px 8px 0;padding:13px 16px}
.warn svg{width:20px;height:20px;color:var(--neg);flex:0 0 auto}
.warn p{font-size:var(--t4);color:var(--dim);line-height:1.5}
.warn b{color:var(--neg);font-weight:600}

/* ---------- daftar isi: label bab ---------- */
.toc-grp{
  margin:16px 0 5px;padding-left:14px;
  font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim2);opacity:.85;
}
.toc ol>li.toc-grp:first-child{margin-top:0}
.toc-grp em,.toc-help em{
  font-style:normal;font-family:var(--mono);color:var(--aksen2);margin-right:7px;letter-spacing:0;
}

/* label kepala panel, dipakai diagram lingkaran */
.rule-tag{
  font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--aksen2);
}
.rule-sub{font-size:var(--t3);color:var(--dim2)}

/* ---------- apa itu judol + lingkaran ketagihan ---------- */
.primer{border-top:1px solid var(--line);padding:56px 0}
.primer-in{max-width:var(--kolom)}
.primer-head{max-width:64ch}
.primer-head h2{margin-top:10px}
.primer-deck{margin-top:14px;font-size:var(--t6);color:var(--dim);line-height:1.66}

.primer-two{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;margin-top:30px;
}
.prim{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  background-image:repeating-linear-gradient(
    180deg,rgba(201,135,60,.028) 0 1px,transparent 1px 28px);
}
.prim h3{
  margin:0 0 14px;font-size:var(--t5);font-weight:600;color:#fff;
  display:flex;align-items:center;gap:11px;
}
.prim-ic{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:var(--sunk2);border:1px solid var(--line2);color:var(--aksen2);
  display:flex;align-items:center;justify-content:center;
}
.prim-ic svg{width:18px;height:18px}
.prim p{font-size:var(--t5);color:var(--dim);line-height:1.7}
.prim p+p{margin-top:11px}
.prim p b{color:var(--tx);font-weight:600}
.prim-list{margin:15px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.prim-list li{
  position:relative;padding-left:18px;font-size:var(--t4);color:var(--dim2);line-height:1.6;
}
.prim-list li::before{
  content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;
  background:var(--aksen);opacity:.75;
}
.prim-list li i{font-style:normal}

.loopfig{
  margin:26px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
}
.loop-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(61,139,253,.05);
}
/* lingkaran yang berputar */
.ringwrap{position:relative;width:100%;max-width:840px;margin:0 auto;padding:24px 162px 14px}
.ring{position:relative;margin:0;padding:0;list-style:none;width:100%;aspect-ratio:1/1}
.ring-arc{position:absolute;inset:0;width:100%;height:100%;color:var(--blue);pointer-events:none}
.ring-jalur{opacity:.7}

/* titik penanda enam langkah, menyala satu per satu */
.ring-tik .tik{fill:var(--line2);transition:fill .3s ease,opacity .3s ease}
.ring-tik .tik.on{fill:var(--blue2)}

/* Komet mengelilingi lingkaran, satu putaran sembilan detik.
   Rotasinya memakai animateTransform bawaan SVG, bukan animasi CSS:
   transform-box pada grup SVG tidak seragam antar peramban dan
   membuat titiknya terlempar ke luar bidang gambar. */
.ring-orbit{pointer-events:none}

.rn{position:absolute;display:flex;align-items:center;gap:11px;width:max-content}
.rn1{left:50%;top:13%;flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 25px))}
.rn4{left:50%;top:87%;flex-direction:column;transform:translate(-50%,-25px)}
.rn2{left:82%;top:31.5%;transform:translate(-25px,-50%)}
.rn3{left:82%;top:68.5%;transform:translate(-25px,-50%)}
.rn5{left:18%;top:68.5%;flex-direction:row-reverse;transform:translate(calc(-100% + 25px),-50%)}
.rn6{left:18%;top:31.5%;flex-direction:row-reverse;transform:translate(calc(-100% + 25px),-50%)}
.rn1,.rn4{gap:9px}
.rn-t{width:124px}
.rn1 .rn-t,.rn4 .rn-t{width:152px;text-align:center}
.rn2 .rn-t,.rn3 .rn-t{text-align:left}
.rn5 .rn-t,.rn6 .rn-t{text-align:right}

.rn-ic{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;flex:0 0 auto;border-radius:15px;
  background:var(--sunk2);border:1px solid var(--line2);color:var(--blue2);
  box-shadow:0 0 0 6px var(--card),0 6px 18px rgba(2,8,20,.5);
}
.rn-ic svg{width:23px;height:23px}
.rn-ic em{
  position:absolute;top:-8px;right:-8px;
  width:19px;height:19px;border-radius:6px;
  background:var(--blue);color:#04101f;
  font:700 11px/19px var(--mono);font-style:normal;text-align:center;
}
.rn b{display:block;font-size:var(--t4);color:var(--dim);font-weight:600;line-height:1.35;transition:color .35s ease}
.rn i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);line-height:1.45;margin-top:3px;
      transition:color .35s ease,opacity .35s ease;opacity:.72}

/* langkah yang sedang disorot */
.rn.aktif b{color:#fff}
.rn.aktif i{color:var(--dim);opacity:1}
.rn.aktif .rn-ic{
  border-color:var(--blue);color:#fff;
  background:linear-gradient(180deg,rgba(61,139,253,.3),rgba(61,139,253,.12));
  transform:translateY(-3px) scale(1.07);
  box-shadow:0 0 0 6px var(--card),0 0 18px rgba(61,139,253,.45),0 8px 20px rgba(2,8,20,.6);
}
.rn.aktif .rn-ic em{background:var(--blue2);box-shadow:0 0 10px rgba(90,162,255,.6)}

.ring-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;padding:0 14px;border-radius:50%;
  background:var(--sunk2);border:1px solid var(--line2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-align:center;
}
.ring-hub b{font-family:var(--mono);font-size:var(--a2);color:var(--blue2);font-weight:700}
.ring-hub i{font-style:normal;font-size:var(--t2);color:var(--dim2)}
.ring-hub span{
  margin-top:7px;font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;line-height:1.3;
  color:var(--dim2);opacity:.8;
}

.loopfig figcaption{
  padding:0 22px 20px;font-size:var(--t4);color:var(--dim2);line-height:1.68;
}
.loopfig figcaption a{color:var(--blue2);text-decoration:none;border-bottom:1px solid var(--line2)}
.loopfig figcaption a:hover{border-bottom-color:var(--blue2)}

/* ---------- penutup: pita pemandangan fajar ---------- */
.outro{position:relative;border-top:1px solid var(--line);overflow:hidden;min-height:330px}
.outro-bg{
  position:absolute;inset:0;width:100%;height:100%;
}
.outro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,14,28,0) 26%,rgba(6,14,28,.72) 46%,var(--bg) 64%),
    linear-gradient(180deg,var(--bg) 0,rgba(6,14,28,0) 22%);
}
.outro-in{position:relative;z-index:1;display:flex;justify-content:flex-end;
  padding-top:56px;padding-bottom:56px;min-height:330px;align-items:center}
.outro-copy{width:min(100%,470px)}
.outro-copy h2{font-size:clamp(20px,2.3vw,27px);line-height:1.34}
.outro-sub{margin-top:13px;font-size:var(--t5);color:var(--dim)}
.outro-note{
  margin-top:18px;display:inline-block;
  font-family:var(--sans);font-size:var(--t5);font-weight:600;
  letter-spacing:.04em;color:var(--gold);
}

/* ---------- kaki halaman ---------- */
/* ---------- bab A-F ----------
   Sebelas bagian dibagi jadi bab supaya pembaca tahu sedang di
   mana dan apa berikutnya. Huruf bab memakai aksen kuningan,
   nomor bagian tetap abu hantu: huruf = peta, angka = urutan. */
.bab{
  display:flex;align-items:center;gap:20px;
  margin:0 0 48px;padding:20px 24px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--aksen);
  border-radius:0 14px 14px 0;
}
.bab-huruf{
  flex:0 0 auto;width:1.1em;text-align:center;
  font-family:var(--mono);font-size:clamp(40px,5vw,58px);font-weight:700;line-height:1;
  color:var(--aksen2);
}
.bab-teks{min-width:0}
.bab-kicker{font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim2)}
.bab-judul{margin-top:4px;font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.25;color:#fff}
.bab-ringkas{margin-top:6px;font-size:var(--t4);color:var(--dim);line-height:1.6}

/* penanda bab kecil untuk pengantar (A) dan bantuan (F) */
.bab-tag{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--aksen2);
}
.bab-tag span{
  font-family:var(--mono);letter-spacing:0;color:var(--bg);background:var(--aksen2);
  border-radius:6px;padding:2px 8px;
}

/* ajakan lanjut di ujung tiap bagian: pembaca di ponsel tidak punya
   daftar isi yang menempel, jadi arah berikutnya ditulis di sini */
.lanjut{
  display:flex;flex-direction:column;gap:3px;margin-top:22px;max-width:var(--read);
  padding:14px 18px;border:1px dashed var(--line2);border-radius:12px;
  text-decoration:none;transition:border-color .2s ease,background .2s ease;
}
.lanjut span{font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim2)}
.lanjut b{font-size:var(--t5);font-weight:600;color:var(--aksen2);line-height:1.4}
.lanjut b::after{content:" \2192"}
.lanjut:hover{border-style:solid;border-color:var(--aksen);background:rgba(201,135,60,.06)}
.fig.wide + .lanjut{max-width:none}

@media(max-width:560px){
  .bab{gap:14px;padding:16px;margin-bottom:36px}
}

/* ---------- bantuan ----------
   Semua tautan "Butuh bantuan" mendarat di sini. */
.bantuan{border-top:1px solid var(--line);padding:48px 0}
.bantuan-in{max-width:var(--kolom)}
.bantuan-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.bantuan-ic{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:var(--sunk2);border:1px solid var(--line2);color:var(--aksen2);
  display:flex;align-items:center;justify-content:center;
}
.bantuan-ic svg{width:22px;height:22px}
.bantuan-head h2{font-size:clamp(20px,2.3vw,26px);line-height:1.3}
.bantuan-head p{margin-top:4px;font-size:var(--t5);color:var(--dim)}
.bantuan-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
}
.kanal{
  height:100%;display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;
  color:inherit;text-decoration:none;transition:border-color .2s ease;
}
a.kanal:hover{border-color:var(--aksen)}
.kanal>span{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:var(--sunk2);border:1px solid var(--line2);color:var(--aksen2);
  display:flex;align-items:center;justify-content:center;
}
.kanal>span svg{width:17px;height:17px}
.kanal>div{min-width:0}
.kanal b{display:block;font-size:var(--t5);font-weight:600;color:#fff;overflow-wrap:anywhere}
.kanal i{display:block;font-style:normal;font-size:var(--t3);color:var(--dim2);line-height:1.5;margin-top:3px}
.bantuan-foot{margin-top:16px;font-size:var(--t3);color:var(--dim2);line-height:1.6}

footer{border-top:1px solid var(--line);background:rgba(4,9,19,.55)}

/* badan kaki halaman */
.foot-in{
  max-width:var(--kolom);
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) minmax(0,1.2fr);
  gap:30px;padding-top:34px;padding-bottom:30px;align-items:start;
}
.foot-merek .brand{margin-bottom:12px}
.foot-txt{font-size:var(--t3);color:var(--dim2);line-height:1.7}
.foot-cap{
  font-size:var(--t2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim2);margin-bottom:11px;
}
.foot-tautan{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-tautan a,.foot-tautan span{
  font-size:var(--t3);color:var(--dim);text-decoration:none;line-height:1.5;
  transition:color .2s ease;
}
.foot-tautan a:hover{color:var(--aksen2)}
.foot-jamin{display:flex;flex-direction:column;gap:10px}
.foot-jamin .foot-shield{margin-bottom:1px}
.foot-shield{width:26px;height:26px;color:var(--line2);flex:0 0 auto}
.foot-shield svg{width:100%;height:100%}

.foot-kaki{
  max-width:var(--kolom);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px;padding-bottom:26px;
}
.foot-kaki p{font-size:var(--t2);color:var(--dim2)}
.foot-tagar{font-weight:700;color:var(--aksen2);letter-spacing:.02em}

/* Kemunculan saat digulir kini seluruhnya di blok GERAK paling bawah,
   memakai [data-anim] yang dipasang stage.js. */

/* ---------- responsif ---------- */
@media(max-width:1080px){
  .doc{grid-template-columns:1fr;gap:0;padding:40px 28px}
  .toc{
    position:static;margin-bottom:34px;
    border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--card);
  }
  .toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-left:none;gap:2px}
  .toc a{padding:6px 0;border-left:none}
  .toc a.on{border-left:none;color:var(--aksen2)}
  .toc-help{margin-top:14px}
  .fig,.fig.wide,.prose{max-width:none}
}
@media(max-width:620px){
  .ringwrap{max-width:none;padding:6px 0 2px}
  .ring{aspect-ratio:auto;display:grid;gap:10px}
  .ring-arc,.ring-hub{display:none}
  .rn,.rn1,.rn2,.rn3,.rn4,.rn5,.rn6{
    position:static;transform:none;width:auto;margin:0;
    flex-direction:row;align-items:center;gap:13px;
    background:var(--sunk2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;
  }
  .rn-ic{box-shadow:none}
  .rn-t,.rn1 .rn-t,.rn4 .rn-t{width:auto;text-align:left;flex:1 1 auto}
}
@media(max-width:820px){
  .nav-links{display:none}
  /* tanpa deret tautan, tidak ada lagi yang mendorong tombol ke kanan */
  .tag-btn{margin-left:auto}
  /* layar sempit: teks penutup duduk di atas gambar, jadi peredupnya
     diputar jadi tegak supaya bagian terang pemandangan tidak menabrak huruf */
  .outro::after{
    background:linear-gradient(180deg,rgba(6,14,28,.3) 0,rgba(6,14,28,.55) 34%,
               rgba(6,14,28,.88) 62%,var(--bg) 100%);
  }
  .outro-in{justify-content:flex-start;align-items:flex-end;padding-top:120px;padding-bottom:34px}
  .outro-copy{width:100%}
  .outro-in{grid-template-columns:1fr;gap:0}
  .outro-art{margin:0 -28px}
  .outro-art svg{max-height:210px}
  .outro-copy{padding:26px 0 34px;text-align:center}
  .hero-top{grid-template-columns:1fr;gap:24px}
  .hero-art{max-width:330px;margin:0 auto}
  .rule-body{grid-template-columns:1fr;gap:18px}
  .rtp-wrap,.people-wrap,.calc-wrap,.near-wrap,.fw-wrap,.machine-row,.pipe-out{grid-template-columns:1fr}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .punch{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:var(--t5)}
  .primer{padding:40px 0}
  .prim{padding:18px}
  .loopfig figcaption{padding:0 16px 16px}
  .wrap{padding:0 18px}
  .doc{padding:32px 18px}
  .hero{padding:48px 0 40px}
  .fig{padding:16px}
  .fw-art{display:none}
  .params .btn{width:100%}
  .fw-cells{grid-template-columns:1fr}
  .bf.lock{border-left:none;padding-left:0}
  .foot-txt.right{text-align:left}
  .pipe{flex-direction:column;gap:16px;text-align:left}
  .stage{display:flex;align-items:center;gap:13px}
  .stage .pi{margin:0;flex:0 0 42px}
  .track{left:39px;right:auto;top:32px;bottom:32px;width:1px;height:auto}
  .packet{top:0;left:39px}
}

/* =========================================================
   GLOSARIUM — istilah yang bisa diklik
   ========================================================= */
.term{
  font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;
  cursor:help;display:inline;
  border-bottom:1px dashed var(--aksen);
  text-underline-offset:2px;transition:.15s;
}
.term:hover{color:var(--aksen2);border-bottom-color:var(--aksen2)}
.term.on{color:var(--aksen2);border-bottom-style:solid}
.term::after{
  content:"?";
  font-family:var(--sans);font-size:.62em;font-weight:700;
  vertical-align:super;margin-left:2px;color:var(--aksen);
}
.term:hover::after,.term.on::after{color:var(--aksen2)}

.gloss{
  position:fixed;z-index:300;width:min(320px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--aksen);border-radius:12px;
  padding:16px 18px 14px;
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.gloss.on{opacity:1;visibility:visible;transform:none}
.gloss-x{
  position:absolute;top:8px;right:9px;
  font:inherit;font-size:var(--a2);line-height:1;cursor:pointer;
  background:none;border:none;color:var(--dim2);padding:4px 6px;border-radius:6px;
}
.gloss-x:hover{color:#fff}
.gloss-t{
  font-size:var(--t4);font-weight:700;color:var(--aksen2);
  letter-spacing:.02em;margin-bottom:8px;padding-right:20px;
}
.gloss-d{font-size:var(--t4);color:var(--dim);line-height:1.6}
.gloss-s{
  font-size:var(--t2);color:var(--dim2);margin-top:10px;
  border-top:1px solid rgba(201,135,60,.35);padding-top:9px;
}

/* =========================================================
   08 — DERET MARTINGALE
   ========================================================= */
.mg-seq{
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:12px;
}
.mg-cap{
  font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim2);margin-bottom:12px;
}
.mg-bars{
  display:flex;align-items:flex-end;gap:2px;height:120px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:8px;overflow:hidden;
}
.mg-bars i{
  flex:1 1 0;min-width:2px;border-radius:2px 2px 0 0;
  background:var(--neg);opacity:.85;transition:height .2s;
}
.mg-bars i.win{background:var(--pos)}
.mg-bars i.cap{background:var(--gold)}
.mg-bars:empty::before{
  content:"Tekan tombol di atas untuk menjalankan";
  font-size:var(--t3);color:var(--dim2);align-self:center;margin:auto;
}
.mg-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px}
.mg-key span{display:flex;align-items:center;gap:7px;font-size:var(--t2);color:var(--dim2)}
.mg-key i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.k-win{background:var(--pos)}
.k-lose{background:var(--neg)}
.k-cap{background:var(--gold)}

.mg-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;
  overflow:hidden;margin-bottom:12px;
}
.ms{background:var(--sunk2);padding:13px 14px}
.ms b{display:block;font-size:var(--a2);font-weight:700;color:#fff}
.ms i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);line-height:1.35;margin-top:4px}

.mg-crowd{display:flex;flex-direction:column;gap:12px}
.mg-crowd .btn{align-self:flex-start}
.mg-out{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;
}

@media(max-width:820px){
  .mg-crowd .btn{align-self:stretch}
}

/* =========================================================
   02 — BUKU KAS BERJALAN
   ========================================================= */
.ledger2{
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:12px;
}
.lg2-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.lg2-cap{
  font-size:var(--t2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aksen2);
}
.lg2-sub{font-size:var(--t2);color:var(--dim2)}
.lg2-reset{
  margin-left:auto;font:inherit;font-size:var(--t3);cursor:pointer;
  background:none;border:1px solid var(--line2);color:var(--dim2);
  border-radius:7px;padding:5px 11px;transition:.15s;
}
.lg2-reset:hover{border-color:var(--aksen);color:#fff}

.lg2-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.lg2{
  flex:1 1 130px;min-width:0;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;opacity:.72;
  transition:opacity .3s,border-color .3s,background .3s;
}
.lg2.on{opacity:1;background:var(--sunk2);border-color:var(--line2)}
.lg2.akhir.on{border-color:var(--blue)}
.lg2>span{
  display:block;font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim2);margin-bottom:6px;
}
.lg2>b{display:block;font-size:var(--a2);font-weight:700;color:#fff;line-height:1.2}
.lg2>i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);margin-top:5px}
.lg2-arr{width:15px;height:15px;color:var(--line2);flex:0 0 auto;align-self:center}

.lg2-note{
  font-size:var(--t3);color:var(--dim);line-height:1.6;
  border-top:1px solid var(--line);padding-top:12px;margin-top:13px;
}
.lg2-note b{font-weight:600}

@media(max-width:820px){
  .lg2-row{flex-direction:column}
  /* barisnya sudah tegak, jadi flex-basis 130px itu berlaku sebagai
     TINGGI, bukan lebar. Isinya cuma 65px, sisanya ruang melompong. */
  .lg2{flex:0 0 auto}
  .lg2-arr{transform:rotate(90deg);align-self:flex-start;margin-left:16px}
}

/* =========================================================
   02 — KISI 100 ANGKA
   ========================================================= */
.undi{
  background:var(--sunk2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:12px;
}
.undi-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.undi-cap{font-size:var(--t2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aksen2)}
.undi-sub{font-size:var(--t2);color:var(--dim2)}

.undi-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.undi-grid i{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--mono);font-size:var(--t2);border-radius:3px;
  color:rgba(255,255,255,.42);transition:.18s;
}
.undi-grid i.big{background:var(--blue);color:#fff}
.undi-grid i.win{background:var(--pos);color:#04241a}
.undi-grid i.fake{background:#b98a2e;color:#1c1405}
.undi-grid i.lose{background:rgba(240,87,107,.26)}
.undi-grid i.kena{
  outline:2px solid #fff;outline-offset:1px;transform:scale(1.4);
  z-index:2;color:#fff;font-weight:700;
}

.undi-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.uk{display:flex;align-items:center;gap:7px;font-size:var(--t2);color:var(--dim2)}
.uk>i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.uk>i.big{background:var(--blue)}
.uk>i.win{background:var(--pos)}
.uk>i.fake{background:#b98a2e}
.uk>i.lose{background:rgba(240,87,107,.26)}
.uk b{color:#fff;font-family:var(--mono);font-weight:700}
.uk em{font-style:normal;font-family:var(--mono);color:var(--dim)}

.undi-hasil{
  font-size:var(--t4);color:var(--dim);line-height:1.65;
  border-top:1px solid var(--line);padding-top:13px;margin-top:14px;
}
.undi-hasil b{color:#fff;font-weight:600}
.t-big{color:var(--blue2)}
.t-win{color:var(--pos)}
.t-fake{color:var(--gold)}
.t-lose{color:var(--neg)}
.undi-foot{font-size:var(--t2);color:var(--dim2);line-height:1.6;margin-top:10px}

@media(max-width:560px){
  .undi-grid{grid-template-columns:repeat(10,1fr);gap:4px}
  .undi-grid i{font-size:var(--t2)}
}

/* =========================================================
   02 — MENGEJAR JACKPOT
   ========================================================= */
.kejar{
  background:var(--sunk2);border:1px solid var(--line);border-left:2px solid var(--blue);
  border-radius:0 12px 12px 0;padding:18px 20px;margin-bottom:12px;
}
.kejar-tanya{
  font-size:var(--t5);font-weight:600;color:#fff;line-height:1.45;margin-bottom:8px;
}
.kejar-jawab{font-size:var(--t4);color:var(--dim);line-height:1.65;margin-bottom:16px}

.kejar-inti{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;
}
.ki{flex:1 1 150px;min-width:0}
.ki>span{display:block;font-size:var(--t2);letter-spacing:.13em;text-transform:uppercase;color:var(--dim2);margin-bottom:5px}
.ki>b{font-size:var(--a3);font-weight:700;color:#fff}
.ki-vs{
  font-size:var(--t2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim2);flex:0 0 auto;
}
.kejar-inti-note{font-size:var(--t3);color:var(--dim);line-height:1.6;margin-top:10px}

.kejar-uji{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:16px}
.kejar-uji .fld{flex:0 1 200px}

.kejar-hasil{
  font-size:var(--t4);color:var(--dim);line-height:1.7;
  border-top:1px solid var(--line);padding-top:13px;margin-top:15px;
}
.kejar-hasil b{color:#fff;font-weight:600}

.kejar-out{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin-top:13px;
}
.ko{background:var(--bg);padding:13px 15px;border-top:2px solid var(--pos)}
.ko.bad{border-top-color:var(--neg)}
.ko b{display:block;font-size:var(--a3);font-weight:700;color:var(--pos)}
.ko.bad b{color:var(--neg)}
.ko i{display:block;font-style:normal;font-size:var(--t2);color:var(--dim2);line-height:1.45;margin-top:4px}

@media(max-width:560px){
  .kejar-uji .fld{flex:1 1 100%}
  .kejar-uji .btn{flex:1 1 100%}
}

/* dipakai app.js untuk angka yang dihitung tapi tidak dipajang */
.sembunyi{display:none}

/* Beda dengan .sembunyi: yang ini tetap dibacakan pembaca layar.
   Dipakai untuk kata "Bagian" di depan nomor, yang di layar sudah
   jelas dari bentuknya tapi di telinga jadi angka telanjang. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* =========================================================
   KEBERSIHAN TATA LETAK
   Mencegah teks saling tindih dan keluar dari kotaknya.
   ========================================================= */

/* anak flex dan grid menolak menyusut di bawah isinya, lalu meluber.
   min-width:0 mengembalikan perilaku yang diharapkan. */
.ki,.bf,.fld,.lg2,.stage,.t3,.ms,.bo,.ko,.ds,.uk,
.machine-side,.jar-txt,.th-txt,.people-side,.near-right,.calc-out,
.rtp-truth,.fw-left,.near-left,.help-lead,.foot-txt{min-width:0}

/* angka panjang seperti Rp50.000.000 dipaksa tetap di dalam kotaknya */
.t3 b,.ms b,.bo b,.ko b,.kvbox b,.lg2>b,.ki>b,.ds b,.tb-num,.lock-num,
.jar-num span,.sl-top b,.fs-item b{
  overflow-wrap:anywhere;
}

/* kotak yang tertarik cukup ditandai cincin, tidak perlu membesar
   sampai menimpa tetangganya */
.undi-grid i.kena{
  position:relative;z-index:2;transform:scale(1.18);
  outline:2px solid #fff;outline-offset:1px;
  box-shadow:0 0 0 4px rgba(6,14,28,.9);
}

/* baris angka undian boleh turun baris di layar sempit */
.lock-row{row-gap:9px}
.lock-chip{max-width:none;flex:1 1 130px}

/* batang Martingale tetap muat walau banyak */
.mg-bars{gap:1px}
.mg-bars i{min-width:1px}

/* tombol di panel isian tidak melebihi lebarnya */
.params .btn,.kejar-uji .btn{max-width:100%}

/* tumpukan dalam bagian 11 tidak berhimpitan */
.jar-num{flex-wrap:wrap}

/* keterangan gambar selalu punya jarak dari isi di atasnya */
.fig>figcaption{clear:both}

@media(max-width:700px){
  /* dua kotak angka jadi satu kolom penuh supaya angkanya tidak terpotong */
  .tally3,.mg-stats{grid-template-columns:1fr}
  .kejar-inti{flex-direction:column;align-items:stretch;gap:12px}
  .ki-vs{text-align:center}
  .rule-body{grid-template-columns:1fr}
  .rl-mid{justify-content:flex-start}
  .foot-txt.right{text-align:left}
}

/* kisi dengan 1fr polos bisa meluber kalau isinya lebih lebar dari jatahnya */
.people{grid-template-columns:repeat(10,minmax(0,1fr))}
.undi-grid{grid-template-columns:repeat(20,minmax(0,1fr))}
@media(max-width:560px){
  .undi-grid{grid-template-columns:repeat(10,minmax(0,1fr))}
}

/* Layar lebar: kolom isi disamakan dengan blok lain, daftar isi digeser
   ke pinggir kiri di luar kolom. Di bawah 1360px ruang pinggirnya tidak
   cukup, jadi tata letak dua kolom yang lama tetap dipakai. */
@media(min-width:1360px){
  .doc{max-width:var(--kolom);grid-template-columns:minmax(0,1fr);gap:0}
  .toc{grid-area:1/1;align-self:start;width:152px;margin-left:-184px}
  .body{grid-area:1/1}
  .toc a{font-size:var(--t4)}
}

/* Di layar yang cukup lebar angka urutan keluar ke margin kanan isi,
   jadi kolom baca tetap rata dan angkanya membaca sebagai penomoran
   dokumen. Di bawah itu ia duduk di atas judul apa adanya. */
@media(min-width:1180px){
  .sect-head{padding-right:104px}
  .sect-num{
    position:absolute;right:0;top:-6px;margin:0;
    text-align:right;width:96px;
  }
}

/* Bagian 10 memutus irama.
   Sembilan bagian sebelumnya bentuknya sama persis; tanpa satu pun
   yang melanggar, pembaca kehilangan rasa kemajuan. Ini puncaknya:
   seribu orang, deposit sama. */
.sect.puncak{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:64px calc(50vw - 50%) 72px;
  background:var(--bg2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sect.puncak .fig{background-color:var(--card)}
@media(max-width:560px){
  .sect.puncak{padding-top:44px;padding-bottom:48px}
}

/* judul bagian jangan tertutup bilah navigasi saat diloncati dari daftar isi */
.sect,.bab,#apa,#bantuan,#edukasi{scroll-margin-top:84px}

/* Tidak ada satu pun yang boleh menggeser halaman ke samping.
   Dipakai clip, bukan hidden: hidden memaksa overflow-y menjadi auto,
   html berubah jadi wadah gulir, dan sticky pada daftar isi mati. */
html{overflow-x:clip}

/* =========================================================
   KALIMAT DIPISAH
   ========================================================= */

/* kalimatnya dijaga tetap pendek, tapi tetap mengalir sebagai
   paragraf biasa, bukan ditumpuk jadi daftar */
.br{display:inline}
.br + .br::before{content:" "}
.br.neg{color:var(--neg)}

.params-note,.lg2-note,.undi-hasil,.kejar-hasil,.bonus-note,.mg-note{line-height:1.75}

/* =========================================================
   BINGKAI PONSEL
   Mesin dilihat sebagaimana ditemui aslinya: di dalam layar
   ponsel, bukan sebagai kotak melayang.
   ========================================================= */
.phone{
  position:relative;
  background:linear-gradient(160deg,#212f4a 0%,#131e33 45%,#0a1222 100%);
  border-radius:36px;padding:11px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 4px rgba(0,0,0,.5),
    0 28px 56px -16px rgba(0,0,0,.85);
}
/* kilau tipis di sisi kiri, memberi kesan lengkung badan ponsel */
.phone::before{
  content:"";position:absolute;left:0;top:34px;bottom:34px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);
}
/* poni di atas layar */
.phone::after{
  content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:74px;height:18px;border-radius:12px;background:#080e1a;z-index:4;
}

.phone-screen{
  position:relative;overflow:hidden;border-radius:27px;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(61,139,253,.16),transparent 60%),
    linear-gradient(180deg,#0b1628,#070f1d);
  box-shadow:inset 0 0 0 1px #1d3050, inset 0 0 34px rgba(0,0,0,.55);
  display:flex;flex-direction:column;
}

/* ---- bilah status ---- */
.statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 18px 4px;position:relative;z-index:5;
}
.sb-time{font-size:var(--t2);font-weight:700;color:#fff;letter-spacing:.02em}
.sb-ic{display:flex;align-items:center;gap:5px;color:#fff}
.sb-ic svg{width:12px;height:12px}

/* ---- kepala aplikasi ---- */
.app-top{
  display:flex;align-items:center;gap:9px;
  padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(61,139,253,.10),transparent);
}
.app-mark{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(150deg,#ffd772,#e09a1e);color:#4a3405;
  display:flex;align-items:center;justify-content:center;
}
.app-mark svg{width:15px;height:15px}
.app-name{font-size:var(--t3);font-weight:700;color:#fff;letter-spacing:.06em;line-height:1.1}
.app-name i{
  display:block;font-style:normal;font-size:var(--t2);letter-spacing:.14em;
  color:var(--dim2);margin-top:2px;
}
.app-saldo{
  margin-left:auto;font-size:var(--t5);font-weight:700;color:var(--pos);
  background:rgba(46,230,160,.1);border:1px solid rgba(46,230,160,.25);
  border-radius:8px;padding:4px 9px;
}

/* ---- badan aplikasi ---- */
.app-body{padding:16px 15px 12px;text-align:center;flex:1}

/* gulungan di dalam ponsel diberi bingkai emas seperti aslinya */
.phone .reels{
  gap:6px;padding:9px;border-radius:12px;
  background:linear-gradient(180deg,#2a1f08,#170f04);
  box-shadow:inset 0 0 0 1px rgba(245,183,61,.35), 0 2px 10px rgba(0,0,0,.45);
}
.phone .reel{
  height:70px;border-radius:8px;border:1px solid #d8c79a;
  background:linear-gradient(180deg,#fff,var(--tx));
  box-shadow:inset 0 -6px 12px rgba(90,110,140,.22), inset 0 2px 0 #fff;
}
.phone .sym svg{width:34px;height:34px}

/* ---- tombol putar ---- */
.spinbtn{
  display:block;width:calc(100% - 30px);margin:0 15px 12px;
  font:inherit;font-size:var(--t5);font-weight:800;letter-spacing:.14em;cursor:pointer;
  color:#3a2503;border:none;border-radius:12px;padding:14px 0;
  background:linear-gradient(180deg,#ffd772,#f0a91e);
  box-shadow:0 4px 0 #b8790d, 0 10px 22px -6px rgba(240,169,30,.5);
  transition:.12s;
}
.spinbtn:hover{filter:brightness(1.06)}
.spinbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #b8790d}
.spinbtn:disabled{
  background:#2a3854;color:#64789a;box-shadow:none;cursor:not-allowed;transform:none;
}

/* ---- bilah bawah ---- */
.app-nav{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.25);
}
.app-nav span{
  padding:10px 4px 13px;text-align:center;font-size:var(--t2);letter-spacing:.04em;
  color:var(--dim2);
}
.app-nav span.aktif{color:var(--blue2);box-shadow:inset 0 2px 0 var(--blue2)}

/* keterangan hasil di dalam layar ponsel */
.phone .verdict{min-height:42px;margin-top:10px;font-size:var(--t3);padding:0 2px}
.phone .fsflash{margin-top:8px;padding:9px}
.phone .fsflash b{font-size:var(--t2)}
.phone .fsflash i{font-size:var(--t3)}

/* layar perangkat di Bagian 02 diberi bingkai senada */
.theater{border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.th-reel{
  background:linear-gradient(180deg,#fff,var(--tx));border-color:#d8c79a;
  box-shadow:inset 0 -4px 8px rgba(90,110,140,.2);
}

@media(max-width:820px){
  /* width:100% wajib. Tanpa itu margin:0 auto pada grid item bikin
     .phone menyusut mengikuti isi terlebarnya, dan isi terlebarnya
     adalah teks .verdict yang berganti tiap putaran. Bingkai ponsel
     ikut melar-mengkerut ~7px setiap kali tombol ditekan. */
  .phone{width:100%;max-width:330px;margin:0 auto}
}

/* =========================================================
   GERAK — kemunculan saat digulir, denyut, dan sentuhan kecil
   Semuanya mati total saat pengguna minta gerak dikurangi.
   ========================================================= */
[data-anim]{opacity:0;transform:translateY(16px)}
[data-anim].in{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.22,.68,.3,1) var(--dl,0ms),
             transform .62s cubic-bezier(.22,.68,.3,1) var(--dl,0ms);
}

/* kartu dan panel: sedikit terangkat saat disentuh penunjuk */
.prim,.ds,.lp,.fig{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.prim:hover,.ds:hover{transform:translateY(-3px);border-color:var(--line2)}
.toc a{transition:color .2s ease,padding-left .2s ease}
.toc a:hover{padding-left:4px}

/* angka besar di jalur data: berdenyut halus sekali saat muncul */
.ds b{display:inline-block}
.ds.in b{animation:angkaMasuk .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes angkaMasuk{from{transform:scale(.88);opacity:.4}to{transform:none;opacity:1}}

/* gambar hero: mengambang pelan */
.hero-art img{animation:apung 7s ease-in-out infinite}
@keyframes apung{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* lingkaran: busur digambar sekali, simpul muncul berurutan, pusat berdenyut */
.ring-arc path{
  stroke-dasharray:26;stroke-dashoffset:26;
  transition:stroke-dashoffset .5s ease var(--dl,0ms);
}
.ringwrap.in .ring-arc path{stroke-dashoffset:0}
.ring .rn{opacity:0}
.ring .rn .rn-ic{transform:scale(.88)}
.ringwrap.in .rn{opacity:1;transition:opacity .45s ease var(--dl,0ms)}
.ringwrap.in .rn .rn-ic{
  transform:none;
  transition:transform .45s cubic-bezier(.2,.8,.3,1.3) var(--dl,0ms),
             border-color .25s ease,color .25s ease;
}
.ringwrap.in .ring-hub b{animation:denyut 3s ease-in-out infinite}
.ringwrap.jeda .ring-hub b{animation-play-state:paused}
.ring-hub{transition:border-color .35s ease,box-shadow .35s ease}
.ringwrap.in .ring-hub{box-shadow:0 0 26px rgba(61,139,253,.12) inset}
@keyframes denyut{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.965)}}
.rn-ic{transition:transform .25s ease,border-color .25s ease,color .25s ease}
.rn:hover .rn-ic{transform:translateY(-3px) scale(1.06);border-color:var(--blue);color:#fff}

/* bintang di pita penutup berkedip pelan */
.outro-bg circle[opacity]{animation:kedip 4.5s ease-in-out infinite}
@keyframes kedip{0%,100%{opacity:.5}50%{opacity:.16}}

@media (prefers-reduced-motion:reduce){
  [data-anim],[data-anim].in{opacity:1;transform:none;transition:none}
  /* jangan sentuh transform di sini: itu yang menempatkan simpul pada lingkaran */
  .ring .rn,.ringwrap.in .rn{opacity:1;transition:none}
  .ring .rn .rn-ic,.ringwrap.in .rn .rn-ic{transform:none;transition:none}
  .ring-arc path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .hero-art img,.outro-bg circle[opacity],.ringwrap.in .ring-hub b,.ds.in b{animation:none}
  .ring-orbit{display:none}
  .rn b{color:#fff}
  .rn i{opacity:1}
  .rn.aktif .rn-ic{transform:none}
  .prim:hover,.ds:hover{transform:none}
}