/* ============================================================================
   HALAMAN MUKA — malam, krem, satu tinta emas.

   Rombakan total. Yang menuntun bukan daftar komponen, melainkan satu
   keputusan: halaman ini harus terbaca seperti sesuatu yang dibuat orang yang
   tahu persis apa yang dijualnya, dan berani menyebut batasnya sendiri.

   Empat pegangan:

   1 · SATU METAFORA, DIBAWA HARFIAH. Apresia adalah rel. Maka ada garis yang
       benar-benar menurun sepanjang halaman, dan tiap bagian bergantung
       padanya. Bukan hiasan: itu yang dijual.

   2 · SUARA DI DALAM KALIMAT. Judul berganti rupa di tengahnya — sans tebal
       lalu serif miring. Pergantian itu yang memberinya nada bicara; judul
       yang sekadar besar tidak punya nada apa pun.

   3 · EMAS HANYA UNTUK UANG. Angka rupiah, tindakan utama, penanda bagian.
       Begitu emas muncul di mana-mana, ia berhenti berarti.

   4 · BATASAN DIBERI RUANG SETARA. Tujuh garis merah dan tujuh pertanyaan
       sebelum daftar mendapat bagian sebesar bagian fitur. Untuk perusahaan
       yang meminta orang menitipkan uangnya, daftar yang hanya memuat
       kelebihan justru membuat orang bertanya apa yang tidak disebut.
   ========================================================================= */

.lam{--tepi-h:max(22px,calc(50vw - 600px));position:relative}

/* Cahaya redup di puncak halaman — tanpa itu latar malamnya rata mati. */
.lam:before{
  content:"";position:absolute;inset:0 0 auto;height:820px;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 46% at 22% 0%, var(--lam-1), transparent 68%),
    radial-gradient(48% 40% at 88% 6%, var(--lam-2), transparent 66%);
}
.lam > *{position:relative;z-index:1}

/* ══════════════════════════════ NAVIGASI ══════════════════════════════ */
/* Pil mengambang, bukan bilah yang menempel di tepi. Di atasnya tiga tali
   pendek — motif rel yang sama, dipakai sekecil mungkin. */
.nav-apung{position:sticky;top:14px;z-index:70;padding:0 var(--tepi-h);margin-top:14px}
.nav-in{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px;
  padding:9px 9px 9px 18px;border-radius:99px;
  background:var(--kaca);backdrop-filter:blur(16px);
  border:1px solid var(--tepi);box-shadow:var(--sh-2),var(--kilau);
}
.nav-in .mark{
  display:flex;align-items:center;gap:9px;font-family:var(--tampil);
  font-weight:800;font-size:15.5px;letter-spacing:-.02em;color:var(--krem);margin-right:6px;
}
.nav-in .mark .ic{width:22px;height:22px}
.nav-in a.nl{
  position:relative;font-size:12.5px;font-weight:600;color:var(--krem-2);
  padding:8px 13px;border-radius:99px;white-space:nowrap;transition:.16s;
}
.nav-in a.nl:hover{color:var(--krem);background:var(--sorot);text-decoration:none}
/* tali pendek di atas tiap tautan */
.nav-in a.nl:before{
  content:"";position:absolute;left:50%;top:-10px;width:1px;height:8px;
  background:linear-gradient(var(--emas),transparent);opacity:.5;
}
.nav-in a.nl:after{
  content:"";position:absolute;left:calc(50% - 1.5px);top:-12px;
  width:3px;height:3px;border-radius:50%;background:var(--emas);opacity:.7;
}
.nav-in .kanan{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (max-width:900px){ .nav-in a.nl{display:none} }

/* ════════════════════════════════ HERO ════════════════════════════════ */
.hero{padding:0 var(--tepi-h)}
.hero-in{max-width:1200px;margin:0 auto;padding:78px 0 0}
.hero-atas{display:grid;gap:54px;align-items:center}
/* Panggungnya sudah pindah ke bagiannya sendiri, jadi hero tidak lagi dua
   kolom. Lebarnya tetap dibatasi: baris sepanjang layar penuh sulit dibaca
   karena mata kehilangan awal baris berikutnya. */
.hero-kata{max-width:44ch}

/* Garis kecil bergerak di atas kicker — isyarat bahwa relnya hidup. */
.kick{
  display:flex;align-items:center;gap:12px;margin:0 0 22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--emas);font-weight:600;
}
.kick:before{
  content:"";width:30px;height:1px;background:var(--emas);flex:none;
  transform-origin:left;animation:kickTumbuh 1.1s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes kickTumbuh{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Judul: sans tebal lalu serif miring. Pergantian rupa di tengah kalimat
   itulah yang memberi nada; tanpa itu ia cuma huruf besar. */
h1.jdl,h2.jdl{
  font-family:var(--tampil);font-weight:800;font-stretch:104%;
  letter-spacing:-.032em;line-height:1.04;margin:0;color:var(--krem);
  font-size:clamp(34px,5vw,62px);text-wrap:balance;
}
h2.jdl{font-size:clamp(27px,3.4vw,42px);line-height:1.08}
.jdl em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--emas);
}
.jdl .lirih{color:var(--krem-3)}

.lede{font-size:16.5px;line-height:1.72;color:var(--krem-2);max-width:54ch;margin:24px 0 0}
.lede b{color:var(--krem);font-weight:700}

.cta-baris{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}
.cta-baris .btn{padding:13px 24px;font-size:14px}

/* Cetakan halus tepat di bawah tindakan, bukan disembunyikan di kaki halaman.
   Yang perlu diketahui sebelum menekan tombol, ditaruh di sebelah tombolnya. */
.halus{
  margin-top:16px;font-family:var(--mono);font-size:11px;line-height:1.75;
  color:var(--krem-3);max-width:58ch;
}
.halus b{color:var(--krem-2);font-weight:600}
.halus .pisah{color:var(--tepi-3);margin:0 7px}

/* ═════════════════════════════ BAGIAN ═════════════════════════════ */
.sec{padding:0 var(--tepi-h);position:relative}
.sec-in{max-width:1200px;margin:0 auto;padding:96px 0;border-top:1px solid var(--tepi)}
.sec:first-of-type .sec-in{border-top:0}

/* Bagian bertinta: satu blok yang memutus irama. Dipakai dua kali, tidak lebih. */
.sec.tinta{background:var(--lapis-tinta)}

/* ═══════════════════ ANGKA YANG NYATA, DIPERAGAKAN ═══════════════════
   Angkanya dipakai di dalam kalimat, dan di sebelahnya ada satu benda yang
   bisa dipegang. Sebuah klaim yang bisa dicoba sendiri lebih kuat daripada
   angka yang dicetak sebesar mungkin. */
.tunjuk{display:grid;grid-template-columns:1fr;gap:38px;align-items:center;padding:8px 0}
@media (min-width:1040px){
  .tunjuk{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px}
}
.tunjuk-kata .jdl [data-hitung]{color:var(--emas);font-variant-numeric:tabular-nums}
.tunjuk-kata .lede b{color:var(--emas);font-weight:600}

/* Ajakan mencoba ditulis sebagai kalimat, bukan tombol besar: yang diminta
   cuma satu klik kecil, dan bentuknya sebaiknya sejujur itu. */
.coba{margin-top:20px;font-size:15px;line-height:1.65;color:var(--krem-2)}
.coba-b{
  font:inherit;font-weight:700;color:var(--emas);background:none;border:0;
  padding:0;margin-right:5px;cursor:pointer;border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.coba-b:hover,.coba-b:focus-visible{border-bottom-color:var(--emas)}

/* ── jendela siaran ───────────────────────────────────────────────────── */
.sr{
  border-radius:var(--r-lg);overflow:hidden;background:var(--malam-2);
  border:1px solid var(--tepi);box-shadow:var(--sh-3);
}
.sr-bar{
  display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--malam-3);border-bottom:1px solid var(--tepi);
}
.sr-tt{width:9px;height:9px;border-radius:50%;flex:none}
.sr-tt.m{background:#F47C7C} .sr-tt.k{background:#E9BC55} .sr-tt.h{background:#4FD494}
.sr-judul{
  font-family:var(--mono);font-size:10.5px;color:var(--krem-3);margin-left:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sr-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--merah);
}
.sr-live i{width:6px;height:6px;border-radius:50%;background:var(--merah);animation:srDenyut 2s ease-in-out infinite}
@keyframes srDenyut{0%,100%{opacity:1}50%{opacity:.35}}

/* Layarnya: bidang gelap yang meniru gambar kamera, bukan gambar kamera. */
.sr-layar{
  position:relative;height:clamp(300px,38vw,368px);overflow:hidden;
  background:radial-gradient(120% 90% at 78% 12%,#241C42 0%,#150F28 52%,#0C0918 100%);
}

/* ── kartu QRIS yang menunggu dipindai ────────────────────────────────── */
.sr-qris{
  position:absolute;top:16px;right:16px;display:grid;gap:2px;justify-items:center;
  padding:11px 15px 9px;background:var(--malam-4);border:1px solid var(--emas);
  border-radius:12px;box-shadow:0 10px 26px -12px rgba(0,0,0,.9);
  transition:opacity .3s ease,transform .3s ease;
}
.sr-q{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--krem-3)}
.sr-n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--emas)}
.sr-q-st{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--krem-3);margin-top:3px}
.sr-qris:after{
  content:"";position:absolute;inset:0;border-radius:12px;border:1px solid var(--emas);
  opacity:0;
}
/* Dipindai: kartunya berkedip sekali lalu menyusut — uangnya sudah berangkat. */
.sr.pindai .sr-qris{animation:srPindai .52s cubic-bezier(.3,.9,.4,1) forwards}
@keyframes srPindai{
  0%  {transform:scale(1);opacity:1}
  35% {transform:scale(1.06);opacity:1}
  100%{transform:scale(.88);opacity:0}
}
.sr.pindai .sr-q-st{color:var(--emas)}

/* ── kamera kreator di pojok ──────────────────────────────────────────── */
.sr-cam{
  position:absolute;right:16px;bottom:38px;width:132px;height:84px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;border:1px solid var(--tepi-2);
  background:linear-gradient(135deg,#241C42,#150F28);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--krem-3);
}
.sr-cam svg{width:19px;height:19px}

/* ── alert yang muncul di layar ───────────────────────────────────────── */
.sr-alert{
  position:absolute;left:16px;top:18px;right:auto;max-width:min(300px,72%);
  display:flex;gap:11px;padding:12px 14px;border-radius:13px;
  background:rgba(36,28,66,.94);border:1px solid var(--tepi-2);
  backdrop-filter:blur(5px);box-shadow:0 14px 34px -18px rgba(0,0,0,.95);
  opacity:0;transform:translateX(-18px) scale(.97);pointer-events:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1.1,.4,1);
}
.sr.tiba .sr-alert{opacity:1;transform:none}
.sr-lonceng{width:20px;height:20px;flex:none;color:var(--emas);margin-top:1px}
.sr.tiba .sr-lonceng{animation:srGoyang .7s ease-out .1s}
@keyframes srGoyang{
  0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg)}
  45%{transform:rotate(11deg)} 70%{transform:rotate(-6deg)}
}
.sr-a-j{font-size:13px;color:var(--krem);line-height:1.45}
.sr-a-j b{font-weight:700}
.sr-a-p{font-size:12px;color:var(--krem-2);margin-top:3px;line-height:1.5}

/* ── milestone di kaki layar ──────────────────────────────────────────── */
.sr-ms{position:absolute;left:16px;right:164px;bottom:38px}
.sr-ms-j{font-size:11.5px;color:var(--krem-2);margin-bottom:7px}
.sr-ms-r{height:6px;border-radius:99px;background:var(--tepi);overflow:hidden}
.sr-ms-r i{
  display:block;height:100%;width:8%;border-radius:99px;background:var(--emas-isi);
  transition:width 1.1s cubic-bezier(.2,.9,.3,1);
}
.sr.tiba .sr-ms-r i{width:13%}

.sr-jam{
  position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--krem-3);
}

/* ── saldo kreator: sisi yang tidak dilihat penonton ──────────────────── */
/* Bagian kedua panel sengaja dipisah dari jendela siaran. Yang di atas
   dilihat penonton, yang di bawah hanya dilihat kreator — dan jarak satu
   detik di antara keduanya adalah seluruh isi janji halaman ini. */
.sl{
  display:flex;align-items:center;gap:16px;margin-top:12px;padding:15px 18px;
  border-radius:var(--r-lg);background:var(--malam-3);border:1px solid var(--tepi);
  transition:border-color .45s ease,background .45s ease;
}
.sl.isi{border-color:var(--emas-2);background:var(--malam-4)}
.sl-kiri{display:grid;gap:3px;min-width:0}
.sl-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--krem-3)}
.sl-n{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--krem-3);
  font-variant-numeric:tabular-nums;transition:color .45s ease}
.sl.isi .sl-n{color:var(--emas)}
.sl-ket{font-size:11px;color:var(--krem-3)}
.sl.isi .sl-ket{color:var(--krem-2)}

.sl-b{
  margin-left:auto;flex:none;font-family:var(--sans);font-size:13.5px;font-weight:700;
  padding:11px 20px;border-radius:10px;cursor:not-allowed;
  background:var(--tepi);color:var(--krem-3);border:1px solid var(--tepi-2);
  transition:background .45s ease,color .45s ease,border-color .45s ease,transform .18s ease;
}
.sl.isi .sl-b{background:var(--emas-isi);color:var(--emas-atas);border-color:var(--emas-isi);cursor:pointer}
.sl.isi .sl-b:hover{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .sr-live i{animation:none}
  .sr.pindai .sr-qris{animation:none;opacity:0}
  .sr-alert{transition:opacity .01s}
  .sr.tiba .sr-lonceng{animation:none}
  .sr-ms-r i,.sl,.sl-n,.sl-b{transition:none}
}

/* ═════════════════════════ EMPAT MESIN ═════════════════════════ */
.mesin{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;margin-top:40px}
.mesin > article{
  position:relative;padding:26px 24px 24px;border-radius:var(--r-lg);
  background:var(--malam-3);border:1px solid var(--tepi);
  box-shadow:var(--sh-1),var(--kilau);
  transition:transform .22s cubic-bezier(.2,.9,.3,1),border-color .22s;
}
.mesin > article:hover{transform:translateY(-4px);border-color:var(--tepi-3)}
/* tali pendek di atas tiap kartu — sama seperti di navigasi */
.mesin > article:before{
  content:"";position:absolute;left:28px;top:-13px;width:1px;height:13px;
  background:linear-gradient(var(--tepi-3),var(--emas));
}
.mesin svg.gbr{width:100%;height:112px;display:block;margin-bottom:20px}
.mesin .nm{
  font-family:var(--tampil);font-weight:800;font-stretch:104%;font-size:19px;
  letter-spacing:-.02em;margin:0 0 9px;color:var(--krem);
}
.mesin p{font-size:13px;line-height:1.68;color:var(--krem-2);margin:0 0 16px}
.mesin .tarif{
  font-family:var(--mono);font-size:11px;color:var(--emas);
  padding-top:13px;border-top:1px dashed var(--tepi-2);display:block;
}
.mesin .ambil{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--krem-2);display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  transition:color .18s,gap .18s;
}
.mesin > article:hover .ambil{color:var(--emas);gap:11px}

/* ═══════════════════════ TUJUH GARIS MERAH ═══════════════════════ */
/* Bagian ini sengaja tampil sebelum bagian kepatuhan. Untuk perusahaan yang
   meminta orang menitipkan uangnya, menyebut batas sendiri lebih meyakinkan
   daripada menambah satu janji lagi. */
.merah{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:0;
  margin-top:38px;border:1px solid var(--tepi);border-radius:var(--r-lg);overflow:hidden}
.merah > div{
  padding:22px;border-right:1px solid var(--tepi);border-bottom:1px solid var(--tepi);
  display:flex;gap:14px;align-items:flex-start;background:var(--malam-2);
}
.merah .no{
  font-family:var(--mono);font-size:11px;color:var(--rd);flex:none;padding-top:2px;
  width:22px;
}
.merah p{margin:0;font-size:13.5px;line-height:1.62;color:var(--krem-2)}
.merah p b{color:var(--krem);font-weight:700}

/* ═══════════════════════════ TANYA JAWAB ═══════════════════════════ */
.tanya{display:grid;grid-template-columns:1fr 1fr;gap:34px 44px;margin-top:40px}
.tanya > div{border-top:1px solid var(--tepi);padding-top:18px}
.tanya h3{
  font-size:15px;font-weight:700;color:var(--krem);margin:0 0 9px;line-height:1.4;
  display:flex;gap:10px;align-items:flex-start;
}
.tanya h3:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--emas);flex:none;margin-top:7px}
.tanya p{margin:0;font-size:13.5px;line-height:1.72;color:var(--krem-2)}
.tanya p + p{margin-top:9px}
.tanya a{color:var(--emas)}

/* ══════════════════════════ BIDANG KREATOR ══════════════════════════ */
.bidang{display:grid;grid-template-columns:238px 1fr;gap:0;margin-top:40px;
  border:1px solid var(--tepi);border-radius:var(--r-lg);overflow:hidden;background:var(--malam-2)}
.bd-tab{border-right:1px solid var(--tepi);display:flex;flex-direction:column}
.bd-tab button{
  background:none;border:0;border-bottom:1px solid var(--tepi);padding:16px 19px;
  text-align:left;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--krem-2);display:flex;align-items:center;gap:11px;transition:.16s;position:relative;
}
.bd-tab button:last-child{border-bottom:0}
.bd-tab button .ic{width:16px;height:16px;color:var(--krem-3)}
.bd-tab button:hover{background:var(--malam-3);color:var(--krem)}
.bd-tab button[aria-selected="true"]{
  background:var(--malam-3);color:var(--emas);font-weight:700;box-shadow:inset 3px 0 0 var(--emas);
}
.bd-tab button[aria-selected="true"] .ic{color:var(--emas)}
.bd-tab button[aria-selected="true"]:after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--emas);opacity:.5;transform-origin:left;transform:scaleX(0);
  animation:bdMaju 5.2s linear forwards;
}
@keyframes bdMaju{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bidang.bd-diam .bd-tab button[aria-selected="true"]:after{display:none}
.bd-isi{padding:32px 34px;min-height:262px}
.bd-p{display:none}
.bd-p.on{display:block;animation:masuk .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes masuk{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.bd-p h3{font-family:var(--tampil);font-weight:800;font-stretch:104%;font-size:22px;
  letter-spacing:-.022em;margin:0 0 11px;color:var(--krem)}
.bd-p > p{font-size:14px;line-height:1.72;color:var(--krem-2);margin:0 0 18px;max-width:54ch}
.bd-p ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.bd-p li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.62;color:var(--krem-2)}
.bd-p li .ic{color:var(--emas);flex:none;margin-top:2px}
.bd-p .brs{display:flex;gap:28px;flex-wrap:wrap;padding-top:17px;margin-top:20px;border-top:1px dashed var(--tepi-2)}
.bd-p .brs b{font-family:var(--mono);font-size:19px;font-weight:600;display:block;
  letter-spacing:-.02em;color:var(--emas);font-variant-numeric:tabular-nums}
.bd-p .brs span{font-size:11px;color:var(--krem-3)}

/* ═════════════════════════ SATU MALAM ═════════════════════════ */
/* Kolom jam. Garis di kiri terisi mengikuti sejauh mana bagian ini dilewati,
   jadi pembaca tahu berapa langkah lagi sampai saldo cair. */
.malam{position:relative;margin-top:40px;border-left:1px solid var(--tepi);padding-left:0}
.ml-maju{
  position:absolute;left:-1px;top:0;width:1px;height:100%;background:var(--emas);
  transform:scaleY(0);transform-origin:top;opacity:0;transition:opacity .4s;
}
.malam.ml-aktif .ml-maju{opacity:.8}
.ml-b{display:grid;grid-template-columns:96px 1fr;padding:20px 0 20px 26px;position:relative;transition:.25s}
.ml-b:before{
  content:"";position:absolute;left:-4px;top:29px;width:7px;height:7px;border-radius:50%;
  background:var(--malam);border:1px solid var(--tepi-3);transition:.25s;
}
.ml-b.kini:before{background:var(--emas);border-color:var(--emas);box-shadow:0 0 0 4px var(--emas-mud)}
.ml-j{font-family:var(--mono);font-size:13px;color:var(--krem-3);letter-spacing:-.02em;transition:color .25s}
.ml-b.kini .ml-j{color:var(--emas)}
.ml-i b{display:block;font-size:14.5px;margin-bottom:5px;color:var(--krem)}
.ml-i p{margin:0;font-size:13px;line-height:1.66;color:var(--krem-2);max-width:60ch}

/* ═══════════════════════════ KREATOR ═══════════════════════════ */
.kreator{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.kreator a.krt{
  flex:0 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px;
  padding:18px 20px;background:var(--malam-3);border:1px solid var(--tepi);
  border-radius:var(--r);box-shadow:var(--sh-1),var(--kilau);color:var(--krem);
  transition:transform .2s cubic-bezier(.2,.9,.3,1),border-color .2s;
}
.kreator a.krt:hover{transform:translateY(-3px);border-color:var(--emas);text-decoration:none}
.krt-h{display:flex;align-items:center;gap:11px;min-width:0}
.krt-a{width:40px;height:40px;border-radius:50%;background:var(--grad);color:var(--malam);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.krt-t{min-width:0;flex:1}
.krt-t b{display:block;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krt-u{display:block;font-family:var(--mono);font-size:10.5px;color:var(--krem-3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krt-live{
  display:inline-flex;align-items:center;gap:5px;flex:none;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;font-weight:700;color:var(--rd);
  background:var(--merah-mud);border:1px solid var(--rd);padding:3px 7px;border-radius:99px;
}
.krt-live i{width:5px;height:5px;border-radius:50%;background:var(--rd);animation:kvDenyut 1.6s ease-in-out infinite}
@keyframes kvDenyut{0%,100%{opacity:1}50%{opacity:.25}}
.krt-b{font-size:12.5px;line-height:1.55;color:var(--krem-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.krt-f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--tepi)}
.krt-n{font-family:var(--mono);font-size:11px;color:var(--krem-3)}
.krt-p{color:var(--krem-3);transition:transform .2s cubic-bezier(.2,.9,.3,1.3),color .2s}
.kreator a.krt:hover .krt-p{color:var(--emas);transform:translateX(4px)}
.kreator a.krt:hover .krt-n{color:var(--emas)}

/* ══════════════════════════ ATURAN ══════════════════════════ */
.aturan{margin-top:38px;border-top:1px solid var(--tepi)}
.aturan > div{
  display:grid;grid-template-columns:156px 1fr;gap:22px;padding:17px 0;
  border-bottom:1px solid var(--tepi);align-items:start;
}
.aturan .kd{font-family:var(--mono);font-size:11px;color:var(--emas);letter-spacing:.03em;padding-top:2px}
.aturan .is b{display:block;font-size:14px;color:var(--krem);margin-bottom:4px;font-weight:700}
.aturan .is span{font-size:13px;line-height:1.66;color:var(--krem-2)}

/* ═══════════════════════════ TAUTAN AKSI ═══════════════════════════ */
a.tuju{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;
  color:var(--emas);border-bottom:1px solid var(--emas-mud);padding-bottom:3px;
  transition:border-color .18s,gap .18s;
}
a.tuju:hover{border-bottom-color:var(--emas);text-decoration:none;gap:12px}

/* ════════════════════════════ TUTUP & KAKI ════════════════════════════ */
.tutup{text-align:center;padding:112px 0}
.tutup .kick{justify-content:center}
.tutup .lede{margin:24px auto 0;text-align:center}
.tutup .cta-baris{justify-content:center;margin-top:34px}
.tutup .halus{margin-left:auto;margin-right:auto;text-align:center}

.kaki{border-top:1px solid var(--tepi);background:var(--malam-2);padding:30px var(--tepi-h)}
.kaki-in{max-width:1200px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--krem-3);letter-spacing:.03em}
.kaki-in a{color:var(--krem-2)}
.kaki-in a:hover{color:var(--emas);text-decoration:none}

/* ═════════════════════════════ GERAKAN ═════════════════════════════ */
.naik{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
.naik.tampak{opacity:1;transform:none}
.urut{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease var(--tunda,0ms),transform .45s cubic-bezier(.2,.9,.3,1) var(--tunda,0ms)}
.urut.tampak{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .naik,.urut{opacity:1;transform:none;transition:none}
  .kick:before{animation:none;transform:none}
  .bd-tab button[aria-selected="true"]:after{display:none}
  .krt-live i{animation:none}
  .ml-maju{display:none}
  .bd-p.on{animation:none}
}

/* ═════════════════════════════ SEMPIT ═════════════════════════════ */
@media (max-width:1040px){
  .hero-atas{grid-template-columns:1fr;gap:38px}
  .tanya{grid-template-columns:1fr;gap:26px}
  .bidang{grid-template-columns:1fr}
  .bd-tab{border-right:0;border-bottom:1px solid var(--tepi);flex-direction:row;overflow-x:auto}
  .bd-tab button{border-bottom:0;border-right:1px solid var(--tepi);white-space:nowrap}
  .bd-tab button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--emas)}
}
@media (max-width:620px){
  .sec-in{padding:66px 0}
  .merah > div{border-right:0}
  .aturan > div{grid-template-columns:1fr;gap:6px}
  .kreator a.krt{flex:1 1 100%}
  .ml-b{grid-template-columns:74px 1fr;padding-left:20px}
  .tutup{padding:78px 0}
}

/* ════════════════════════ PANGGUNG ADEGAN 3D ════════════════════════ */
#rel{
  border:1px solid var(--tepi);border-radius:var(--r-lg);overflow:hidden;
  background:var(--malam-2);box-shadow:var(--sh-2),var(--kilau);
}
.rel-panggung{position:relative;min-height:clamp(420px,50vh,540px);overflow:hidden}
.rel-kanvas{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.rel-kanvas canvas{display:block;width:100%;height:100%}
#rel.rel-hidup .rel-kanvas{opacity:1}
#rel.rel-hidup .rel-svg{opacity:0;pointer-events:none}
.rel-svg{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;
  justify-content:center;padding:26px;transition:opacity .5s ease;
}
.rel-svg .gbr{width:100%;max-width:400px;height:auto;max-height:100%;margin:0 auto;display:block}
.rel-svg > div{width:100%;animation:relTukar .34s ease both}
@keyframes relTukar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .rel-svg > div{animation:none} }
@media (max-width:1040px){ .rel-panggung{min-height:380px} }

/* ============================================================
   GERAK ILUSTRASI
   Tiap mesin punya satu gerakan saja, dan gerakan itu adalah hal
   yang sebenarnya dikerjakan mesinnya: alert yang meloncat, koin yang
   naik, cap yang jatuh, batang yang tumbuh, engkol yang diputar.
   Menggerakkan semuanya sekaligus akan membuatnya jadi hiasan.
   ============================================================ */
/* Titik putarnya ditulis dalam koordinat viewBox gambar (0 0 220 120),
   jadi kotak acuannya harus view-box — bukan kotak masing-masing bentuk. */
.gbr [class^="p-"]{transform-box:view-box}

/* donasi — kartu alert meloncat keluar layar, koin menyusul naik */
.p-alert{transform-origin:176px 44px;
  animation:lompat 3.4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes lompat{
  0%,62%,100%{transform:rotate(-6deg) translate(0,0) scale(1)}
  70%{transform:rotate(-6deg) translate(0,-7px) scale(1.045)}
  82%{transform:rotate(-6deg) translate(0,1.5px) scale(.99)}
}
.p-koin{transform-origin:center;animation:naikKoin 3.4s ease-in-out infinite}
.p-koin.k1{animation-delay:0s}
.p-koin.k2{animation-delay:.34s}
.p-koin.k3{animation-delay:.68s}
@keyframes naikKoin{
  0%{transform:translateY(10px);opacity:0}
  18%{opacity:1}
  70%{transform:translateY(-8px);opacity:1}
  100%{transform:translateY(-15px);opacity:0}
}

/* survey — cap turun sekali, lalu diam: keputusan tidak diulang-ulang */
.p-cap{transform-origin:178px 84px;
  animation:ngecap 4.2s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes ngecap{
  0%,74%{transform:rotate(-11deg) scale(1);opacity:1}
  80%{transform:rotate(-11deg) scale(1.5);opacity:0}
  88%{transform:rotate(-11deg) scale(.93);opacity:1}
  94%{transform:rotate(-11deg) scale(1.03)}
  100%{transform:rotate(-11deg) scale(1)}
}

/* voting — hanya batang pemimpin yang bergerak, dari alasnya */
.p-bar{transform-origin:100px 105px;
  animation:tumbuh 3.8s ease-in-out infinite}
@keyframes tumbuh{
  0%,100%{transform:scaleY(.82)}
  46%{transform:scaleY(1)}
  58%{transform:scaleY(.985)}
}

/* undian — engkol diputar, tabung ikut berputar seirama */
.p-engkol{transform-origin:120px 52px;
  animation:putarEngkol 4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes putarEngkol{
  0%,12%{transform:rotate(0)}
  88%,100%{transform:rotate(360deg)}
}
.p-drum{transform-origin:82px 52px;
  animation:putarDrum 4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes putarDrum{
  0%,12%{transform:rotate(0)}
  88%,100%{transform:rotate(-360deg)}
}

@media (prefers-reduced-motion:reduce){
  .p-alert,.p-koin,.p-cap,.p-bar,.p-engkol,.p-drum{animation:none}
  .p-koin{opacity:1}
}

/* ═══════════════════ SENTUHAN DI DALAM PANGGUNG ═══════════════════
   Benda di dalam scene tiga dimensi tidak punya kursor dan tidak punya
   judul — peramban tidak tahu apa pun tentang isinya. Jadi keduanya
   dipasang dari luar: bentuk kursor di kanvasnya, dan satu label kecil
   yang mengikuti penunjuk. Tanpa keduanya, benda yang bisa diketuk
   tidak akan pernah diketuk siapa pun, karena tidak ada yang tahu. */
#rel.rel-tunjuk .rel-kanvas{cursor:pointer}
.rel-label{
  position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  padding:6px 11px;border-radius:9px;white-space:nowrap;
  background:var(--kaca);border:1px solid var(--tepi-2);
  backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--txt);
  opacity:0;transform-origin:left top;transition:opacity .16s ease;
}
.rel-label.tampak{opacity:1}
@media (prefers-reduced-motion:reduce){ .rel-label{transition:none} }

/* Kendali adegan: empat keadaan yang bisa dimasuki, bukan empat fitur yang
   dibaca. Ditaruh menempel di bawah panggungnya supaya jelas yang diubah
   adalah isi panggung itu, bukan isi halaman. */
.rel-tab{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.rel-tab button{
  flex:1 1 0;min-width:74px;padding:9px 12px;border-radius:10px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--tepi);color:var(--krem-3);
  transition:color .2s,background .2s,border-color .2s;
}
.rel-tab button:hover{color:var(--krem);background:var(--sorot);border-color:var(--tepi-2)}
.rel-tab button[aria-pressed="true"]{
  color:var(--emas);border-color:var(--emas-2);background:var(--emas-mud);
}

/* ═══════════════════ ALUR: PANGGUNG YANG MENEMPEL ═══════════════════
   Kolom kiri panjang, kolom kanan menempel. Selama daftar langkah lewat,
   gambarnya tinggal di tempat dan uangnya berjalan — jadi yang menggerakkan
   animasinya gulungan orangnya sendiri, bukan jam yang berputar sendiri.

   Menempelnya hanya di layar lebar. Di layar sempit kedua kolom bertumpuk,
   dan panggung yang menempel di atas isinya sendiri justru menutupi yang
   sedang dibaca. */
/* ═══════════════ ALUR: SATU LAYAR PENUH ═══════════════
   Bagiannya setinggi beberapa layar; yang tampak selalu satu layar penuh.
   Tingginya diukur per langkah, bukan angka tetap — menambah langkah nanti
   tidak perlu menyentuh angka ini lagi. */
.alur-sec{position:relative;height:calc(5 * 110vh)}
.alur-tempel{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
}

.alur-panggung{position:absolute;inset:0}
.alur-svg{display:block;width:100%;height:100%}

/* ── lima adegan yang berganti ──
   Hanya satu gambar yang tampak. Perpindahannya lebur-silang dengan sedikit
   pembesaran: potongan keras terbaca sebagai halaman yang berganti, sedangkan
   lebur terbaca sebagai satu malam yang sama dilihat lebih dekat. */
.adg{opacity:0;transform-box:view-box;transform-origin:center;transform:scale(1.04);
  transition:opacity .62s ease,transform .9s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.alur-panggung[data-langkah="0"] .adg[data-adg="0"],
.alur-panggung[data-langkah="1"] .adg[data-adg="1"],
.alur-panggung[data-langkah="2"] .adg[data-adg="2"],
.alur-panggung[data-langkah="3"] .adg[data-adg="3"],
.alur-panggung[data-langkah="4"] .adg[data-adg="4"]{opacity:1;transform:none}

/* Gerak kecil yang hanya berjalan saat adegannya sedang dibicarakan — kalau
   kelimanya bergerak terus, tidak ada satu pun yang terbaca sedang bergerak. */
.alur-panggung[data-langkah="0"] .adg-bulan{animation:adgNyala 4s ease-in-out infinite}
@keyframes adgNyala{0%,100%{opacity:1}50%{opacity:.55}}
.alur-panggung[data-langkah="0"] .adg-sinar{animation:adgKelip 3.1s ease-in-out infinite}
@keyframes adgKelip{0%,100%{opacity:.1}45%{opacity:.19}}

.adg-sapu{opacity:0}
.alur-panggung[data-langkah="1"] .adg-sapu{animation:adgSapu 2.2s ease-in-out infinite}
@keyframes adgSapu{
  0%,100%{opacity:0;transform:translateY(-150px)}
  12%,88%{opacity:.95}
  50%{transform:translateY(150px)}
}

.alur-panggung[data-langkah="2"] .adg-alert{animation:adgJatuh .8s cubic-bezier(.3,1.5,.5,1) both}
@keyframes adgJatuh{
  0%{transform:rotate(-3deg) translateY(-320px);opacity:0}
  60%{opacity:1}
  100%{transform:rotate(-3deg) translateY(0);opacity:1}
}
.adg-kejut{opacity:0}
.alur-panggung[data-langkah="2"] .adg-kejut{animation:adgKejut .5s ease-out .62s both}
@keyframes adgKejut{0%{opacity:0}40%{opacity:1}100%{opacity:.35}}
.adg-koin > g{opacity:0}
.alur-panggung[data-langkah="2"] .adg-koin > g{animation:adgNaik 1.5s ease-out var(--tunda,0s) infinite}
@keyframes adgNaik{
  0%{opacity:0;transform:translateY(60px)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(-120px)}
}

.adg-baris{opacity:0}
.alur-panggung[data-langkah="3"] .adg-baris{animation:adgMasuk .55s ease var(--tunda,0s) both}
@keyframes adgMasuk{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.adg-segel{opacity:0;transform-box:view-box;transform-origin:800px 640px}
.alur-panggung[data-langkah="3"] .adg-segel{animation:adgCap .55s cubic-bezier(.3,1.4,.5,1) .8s both}
@keyframes adgCap{
  0%{opacity:0;transform:rotate(-7deg) scale(1.7)}
  60%{opacity:1;transform:rotate(-7deg) scale(.93)}
  100%{opacity:1;transform:rotate(-7deg) scale(1)}
}

.adg-tombol{transform-box:fill-box;transform-origin:center}
.alur-panggung[data-langkah="4"] .adg-tombol{animation:adgTekan 2.6s ease-in-out infinite}
@keyframes adgTekan{0%,70%,100%{transform:none}80%{transform:translateY(12px) scale(.985)}}
.adg-jari{opacity:0}
.alur-panggung[data-langkah="4"] .adg-jari{animation:adgJari 2.6s ease-in-out infinite}
@keyframes adgJari{
  0%,100%{opacity:1;transform:translate(60px,60px)}
  74%,86%{opacity:1;transform:translate(0,0)}
}
.adg-berangkat > g{opacity:0}
.alur-panggung[data-langkah="4"] .adg-berangkat > g{animation:adgBerangkat 2.6s ease-out var(--tunda,0s) infinite}
@keyframes adgBerangkat{
  0%,30%{opacity:0;transform:translate(0,0)}
  40%{opacity:1}
  100%{opacity:0;transform:translate(-240px,120px)}
}

/* Butiran kertas. Garis yang benar-benar bersih terbaca sebagai keluaran
   mesin; sedikit kotor membuatnya terbaca sebagai sesuatu yang dicetak. */
.alur-butir{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── kalimat langkah, ditumpuk di atas gambar ──
   Hanya satu yang tampak pada satu saat, dan yang lain benar-benar
   disingkirkan dari alur baca — bukan sekadar dibuat bening. Empat paragraf
   bertumpuk di tempat yang sama akan terbaca sebagai satu paragraf kacau
   oleh pembaca layar. */
.alur-kata{
  position:relative;z-index:2;justify-self:start;align-self:end;
  width:min(46ch,88vw);margin:0 0 clamp(28px,7vh,72px) var(--tepi-h);
  padding:22px 26px;border-radius:var(--r-lg);
  background:var(--kaca);border:1px solid var(--tepi);backdrop-filter:blur(14px);
  box-shadow:var(--sh-2);
}
.alur-langkah{list-style:none;margin:0;padding:0;display:grid}
.alur-langkah li{
  grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.9,.3,1),visibility 0s .42s;
}
.alur-langkah li.kini{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.al-no{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;color:var(--emas);margin-bottom:10px;
}
.al-no i{flex:1;height:1px;background:var(--tepi-2);max-width:56px}
.alur-langkah h3 em{font-style:normal;color:var(--emas)}
.alur-langkah h3{
  font-family:var(--tampil);font-weight:800;font-size:clamp(22px,3vw,34px);
  line-height:1.14;letter-spacing:-.02em;color:var(--krem);margin:0 0 10px;
}
.alur-langkah p{font-size:15px;line-height:1.7;color:var(--krem-2);margin:0}

/* ── penanda kemajuan di tepi kanan ── */
.alur-nadi{
  position:absolute;right:calc(var(--tepi-h) / 2 + 10px);top:50%;transform:translateY(-50%);
  z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:12px;
}
.alur-nadi li{
  width:8px;height:8px;border-radius:99px;background:var(--tepi-3);
  transition:background .35s ease,transform .35s ease;
}
.alur-sec[data-langkah="0"] .alur-nadi li:nth-child(1),
.alur-sec[data-langkah="1"] .alur-nadi li:nth-child(2),
.alur-sec[data-langkah="2"] .alur-nadi li:nth-child(3),
.alur-sec[data-langkah="3"] .alur-nadi li:nth-child(4),
.alur-sec[data-langkah="4"] .alur-nadi li:nth-child(5){
  background:var(--emas);transform:scale(1.5);
}

@media (max-width:760px){
  .alur-kata{width:auto;margin-left:var(--tepi-h);margin-right:var(--tepi-h);justify-self:stretch}
  .alur-nadi{display:none}
}

@media (prefers-reduced-motion:reduce){
  .alur-sapu,.alur-alert,.alur-baris,.alur-segel,.alur-panah,.alur-jam{animation:none}
  .alur-baris,.alur-segel{opacity:1}
  .alur-panah{opacity:.6}
}

/* ═══════════════════ LATAR HERO: KOTA PUKUL DUA ═══════════════════
   Hero dibuat setinggi layar supaya terbaca sebagai bingkai pembuka, bukan
   sebagai blok teks yang kebetulan ada di atas. Kotanya ditaruh di dasar
   bingkai dan dibuat tenang: latar yang sibuk berlomba dengan judulnya, dan
   yang kalah selalu judulnya. */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-in{position:relative;z-index:1;width:100%;padding:0}

.malam-svg{
  position:absolute;left:0;right:0;bottom:0;top:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.85;
  /* Sisi kiri diredupkan: di situ judulnya berdiri, dan judul yang berdiri
     di atas gambar ramai selalu kalah. */
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 46%,#000 100%);
          mask-image:linear-gradient(100deg,transparent 4%,#000 46%,#000 100%);
}
.malam-jendela{opacity:.5}
.malam-jendela.hidup{opacity:1;animation:mlmJaga 7s ease-in-out var(--tunda,0s) infinite}
@keyframes mlmJaga{0%,44%,100%{opacity:1}52%,60%{opacity:.25}}
.malam-bintang{opacity:.5;animation:mlmKerlip 5.5s ease-in-out var(--tunda,0s) infinite}
@keyframes mlmKerlip{0%,100%{opacity:.5}50%{opacity:.16}}
.malam-bulan{animation:mlmBulan 9s ease-in-out infinite}
@keyframes mlmBulan{0%,100%{opacity:.5}50%{opacity:.32}}

/* Isyarat gulir. Layar pembuka setinggi layar penuh tanpa isyarat apa pun
   cukup sering dikira halaman yang berhenti memuat. */
.hero-gulir{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(34px,7vh,72px);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--krem-3);text-decoration:none;transition:color .2s;
}
.hero-gulir:hover{color:var(--emas);text-decoration:none}
.hero-gulir svg{width:16px;height:16px;animation:mlmTurun 2.4s ease-in-out infinite}
@keyframes mlmTurun{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}

@media (max-width:760px){
  .malam-svg{opacity:.6;-webkit-mask-image:linear-gradient(180deg,transparent 12%,#000 52%);
                        mask-image:linear-gradient(180deg,transparent 12%,#000 52%)}
}
@media (prefers-reduced-motion:reduce){
  .malam-jendela.hidup,.malam-bintang,.malam-bulan,.hero-gulir svg{animation:none}
}