:root{
  --blue:#1f6fe0;
  --blue-d:#123f9c;
  --gold:#ffd21e;
  --green:#57c81a;
  --text:#ffffff;
  --muted:#bcd4f5;
  --card:#2a6fe0;
  --wrap:1180px;
  --game-ar:392/499;   /* rasio 1 thumbnail game (portrait), dipakai semua kartu game */
  /* skala radius ala iOS (harmonis): xs kontrol mini, sm tombol/input, md kartu, lg sheet/panel */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px;
}
/* Tekstur latar bawaan = assets/tex1.png (preset "pistolo" di script.js).
   Disamakan dengan settings.js (heroTex/heroTexSize/heroWave) supaya tekstur
   sudah benar sejak cat pertama — tanpa kedip pola wave lalu berganti. */
:root{--wave-op:1;
  --tex-mask:none;
  --tex-bg:url("assets/tex1.png");
  --tex-fill:transparent;
  --tex-size:199px 108px}

/* ===== Kilau kaca (gloss) — MURNI CSS, pengganti assets/glass.png =====
   PNG-nya dulu diregangkan dengan background-size:100% 100%, jadi di layar
   lebar (desktop) sudut diagonalnya ikut gepeng dan buram. Gradien menjaga
   sudut tetap sama di lebar berapa pun, dan tidak ada file yang perlu diunduh.
   Dipakai .head-inner::before, .reg-head::after, .pg-hero::after — semuanya
   memang cuma butuh kilau PUTIH (dulu warnanya dibuang pakai grayscale()). */
:root{
  /* Garis kilau tepi atas. DIPISAH karena di header ia membentang selebar layar
     dan terbaca sebagai "bayangan putih" mengganggu — apalagi setelan tersimpan
     memakai opacity .84 + blend `lighten` yang melipatgandakannya (piksel baris
     teratas 128,130,135 vs 78 di bawahnya). Hanya dipakai di kartu kecil
     (.reg-head/.pg-hero) yang memang meniru tepi kaca. */
  --gloss-topline: linear-gradient(180deg, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 3px);
  /* pita-pita diagonal dengan lebar tak seragam supaya tidak terlihat mekanis */
  --gloss-diagonal:
    linear-gradient(115deg,
      rgba(255,255,255,.00) 0%,
      rgba(255,255,255,.18) 6%,
      rgba(255,255,255,.05) 17%,
      rgba(255,255,255,0)   27%,
      rgba(255,255,255,0)   52%,
      rgba(255,255,255,.15) 59%,
      rgba(255,255,255,.02) 66%,
      rgba(255,255,255,0)   72%,
      rgba(255,255,255,0)   80%,
      rgba(255,255,255,.20) 88%,
      rgba(255,255,255,.04) 96%,
      rgba(255,255,255,0)   100%);
  /* dipakai kartu kecil: pita diagonal + garis tepi atas */
  --gloss-streaks: var(--gloss-topline), var(--gloss-diagonal);
  /* memudar ke bawah, meniru gradasi vertikal pada PNG lama */
  --gloss-fade:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 28%,rgba(0,0,0,.35) 62%,transparent 92%);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  font-family:"Montserrat","Segoe UI",system-ui,Roboto,Arial,sans-serif;color:var(--text);
  background:var(--qr-bg,linear-gradient(180deg,#2a7de9 0%,#1f5fcf 45%,#123f9c 100%));
  background-attachment:fixed;font-size:15px;-webkit-font-smoothing:antialiased;
}
body{background:transparent}
/* texture wave sebagai body background (di belakang konten) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--tex-fill,#ffffff);
  background-image:var(--tex-bg,none);background-repeat:repeat;background-position:center;
  background-size:var(--tex-size,48px 24px);
  -webkit-mask-image:var(--tex-mask);mask-image:var(--tex-mask);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:var(--tex-size,48px 24px);mask-size:var(--tex-size,48px 24px);
  opacity:var(--wave-op,.15)}
/* mode putih: wave jadi biru estetik */
body.theme-light::before{background-color:var(--tex-fill,#2f7de0);opacity:calc(var(--wave-op,.15) + .12)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
/* Scrollbar halaman disamakan dengan tema gelap — bawaan sistem berwarna terang
   dan mencolok di situs gelap. `scrollbar-color` untuk Firefox, ::-webkit-* untuk
   Chrome/Edge/Safari. */
::-webkit-scrollbar{height:8px;width:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:8px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-color:rgba(255,255,255,.24) rgba(0,0,0,.28);scrollbar-width:thin}
body.theme-light ::-webkit-scrollbar-track{background:rgba(0,0,0,.06)}
body.theme-light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.26);background-clip:padding-box}
body.theme-light{scrollbar-color:rgba(0,0,0,.3) rgba(0,0,0,.06)}
/* Pita latar full-bleed memakai width:100vw, dan 100vw IKUT menghitung lebar
   scrollbar vertikal sedangkan area terlihat tidak — sisanya bocor jadi
   geser-samping ~4px di seluruh halaman. `clip` memotong kelebihan itu tanpa
   membuat html jadi kontainer gulir baru (beda dengan `hidden`), sehingga
   position:sticky di dalamnya tetap bekerja. */
html{overflow-x:clip}
.muted{color:var(--muted)}.center{text-align:center}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px}

/* ================= APP BANNER ================= */
.app-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#1a56b8,#2b74e0);
  padding:10px 14px;position:relative}
.app-banner .x{background:none;border:0;color:var(--txt-soft,#cfe0ff);font-size:15px;cursor:pointer}
.app-ic{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#ffd21e,#ff7a00);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#12459c;font-size:15px}
.app-txt{flex:1;line-height:1.25}
.app-txt strong{font-size:14px}.app-txt small{display:block;color:var(--txt-soft,#cfe0ff);font-size:12px}
.open-btn{background:transparent;border:1.5px solid #6fa8ff;color:#fff;font-weight:800;
  padding:8px 16px;border-radius:12px;cursor:pointer;font-size:13px}

/* ================= HEADER ================= */
.head{position:sticky;top:0;z-index:40;overflow:hidden;
  background:linear-gradient(345deg,#005eff,#006eff);
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* tekstur pedang di seluruh header */
.head::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/tex-swords.png") repeat;background-size:150px auto;opacity:.9}
/* Peredup tepi bawah header. Tanpa ini header berakhir dengan strip abu terang
   (terukur 62/64/68 rata selebar layar) lalu MELOMPAT ke konten yang nyaris hitam
   (5/7/14) — beda 57 tingkat dalam satu piksel, terbaca seperti bocoran abu.
   z-index 1: di atas tekstur (z0), di bawah isi header (.head-inner z2). */
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:var(--hdr-fade-h,26px);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,var(--hdr-fade,.8)))}
.head-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;
  gap:8px;padding:10px 14px}
/* overlay gloss di head-inner (murni CSS, lihat --gloss-streaks di atas).
   --glass-size/--glass-pos sengaja TIDAK dipakai lagi: keduanya cuma knob untuk
   menggeser/meregangkan bitmap, dan justru itu penyebab tampilan desktop rusak. */
.head-inner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  display:var(--glass-on,block);
  /* --gloss-diagonal, BUKAN --gloss-streaks: garis tepi atas sengaja tidak dipakai
     di sini (lihat catatan --gloss-topline). */
  background-image:var(--gloss-diagonal);
  -webkit-mask-image:var(--gloss-fade);mask-image:var(--gloss-fade);
  opacity:var(--glass-op,.5);mix-blend-mode:var(--glass-blend,screen)}
.head-inner>*{position:relative;z-index:2}
.head-top{display:flex;align-items:center;gap:12px;width:100%}
.head-top .head-btns{margin-left:auto}
.burger{display:none!important}
/* toggle switch dark/light (pill + knob geser) */
.mode-switch{flex:0 0 auto;position:relative;width:56px;height:28px;border:0;border-radius:999px;cursor:pointer;padding:0;
  background:var(--ms-track,#1c1f26);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);transition:background .2s}
.mode-switch .ms-ic{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;
  fill:none;stroke:var(--ms-icon,#ffd21e);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-switch .ms-moon{right:8px}
.mode-switch .ms-sun{left:8px;display:none}
.mode-switch .ms-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--ms-knob,#fff);box-shadow:0 1px 3px rgba(0,0,0,.45);transition:left .22s ease}
.mode-switch:hover{filter:brightness(1.06)}
body.theme-light .mode-switch .ms-moon{display:none}
body.theme-light .mode-switch .ms-sun{display:block}
body.theme-light .mode-switch .ms-knob{left:calc(100% - 25px)}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px}
.logo{display:flex;align-items:center}
.logo img{height:clamp(44px,13vw,66px);width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}

.tabs3-wrap{position:relative;order:3;width:100%;margin-top:4px}
.tabs3{display:flex;width:100%;background:rgba(0,0,0,.18);border-radius:12px;overflow:hidden}
/* tombol "next" mengambang: indikator nav bisa digeser */
.tabs3-next{position:absolute;right:3px;top:50%;transform:translateY(-50%);z-index:6;display:none;
  width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;
  background:#ffd21e;color:#111;box-shadow:0 2px 7px rgba(0,0,0,.45)}
.tabs3-next:hover{filter:brightness(1.05)}
.tabs3-next svg{width:15px;height:15px}
.tabs3-wrap.can-next .tabs3-next{display:flex}
.t3{flex:1;background:transparent;border:0;color:var(--txt-soft,#cfe0ff);font-weight:800;font-size:14px;
  padding:14px 6px;cursor:pointer;position:relative;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  -webkit-text-stroke:var(--tab-tsw,2px) var(--tab-tsc,#0a2550);paint-order:stroke fill}
.t3-ic{width:var(--tab-ic,22px);height:auto;display:inline-block;flex:0 0 auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.t3-ic,.t3-svg{display:inline-block!important}   /* ikon nav tab selalu tampil */
.t3:hover{color:#fff}
.t3.active{color:var(--tab-ac,#ffd21e);background:var(--tab-ah,rgba(255,255,255,.14));border-radius:12px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:var(--tab-glow,none)}
.t3.active::after{content:"";position:absolute;bottom:0;left:22%;right:22%;height:3px;
  background:var(--tab-ac,#ffd21e);border-radius:3px}
.t3{white-space:nowrap;min-width:0}
.t3-svg{width:var(--tab-ic,22px);height:var(--tab-ic,22px);color:inherit;flex:0 0 auto}
/* pemisah garis halus antar tab */
.t3:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:44%;width:1px;background:rgba(255,255,255,.18);pointer-events:none}
.t3.active::before,.t3.active + .t3::before{opacity:0}   /* rapikan di sisi tab aktif */
body.theme-light .t3:not(:first-child)::before{background:rgba(0,0,0,.16)}

/* ===== Kotak cari di header (khusus desktop) =====
   Disembunyikan di mobile; di sana pencarian tetap lewat ikon kaca pembesar di
   quick-row. Hasilnya memakai overlay pencarian yang SUDAH ADA, bukan daftar baru. */
.hsearch{display:none;position:relative;align-items:center;gap:9px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--btn-radius,12px);padding:0 10px;height:40px;transition:.15s}
.hsearch:focus-within{border-color:var(--tab-ac,#ffd21e);background:rgba(0,0,0,.38)}
.hs-ic{flex:0 0 auto;display:flex;align-items:center;color:var(--txt-soft,#cfe0ff)}
.hs-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hsearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-size:14px;font-weight:600}
.hsearch input::placeholder{color:var(--txt-soft,#cfe0ff);opacity:.75;font-weight:500}
.hs-x{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--txt-soft,#cfe0ff);
  font-size:13px;padding:4px 2px;line-height:1}
.hs-x:hover{color:#fff}
.hs-x[hidden]{display:none}
body.theme-light .hsearch{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.16)}
body.theme-light .hsearch input{color:var(--txt-strong,#123a8f)}
/* saat dibuka dari header, kotak cari overlay-nya tidak perlu (input ada di header) */
.search-overlay.from-head .search-bar{display:none}
/* Overlay pencarian aslinya menutup SELURUH layar (dirancang untuk mobile). Dipakai
   dari kotak cari header itu berlebihan — mengetik satu huruf langsung menggelapkan
   seluruh halaman. Di desktop diubah jadi dropdown yang menempel di bawah kotak
   carinya. --hs-left/--hs-w diisi script.js dari posisi kotak cari yang sebenarnya. */
@media(min-width:860px){
  .search-overlay.from-head{background:transparent;pointer-events:none;bottom:auto;
    max-height:min(60vh,520px)}
  .search-overlay.from-head .search-results{pointer-events:auto;
    margin:6px 0 0 var(--hs-left,0px);width:var(--hs-w,560px);max-width:none;
    max-height:min(56vh,480px);padding:8px;border-radius:14px;
    background:var(--sr-bg,rgba(16,20,32,.97));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 44px rgba(0,0,0,.55)}
  .search-overlay.from-head .sr-item{background:rgba(255,255,255,.06)}
  .search-overlay.from-head .sr-item:hover{background:rgba(255,255,255,.16)}
  body.theme-light .search-overlay.from-head .search-results{background:rgba(255,255,255,.98);
    border-color:rgba(0,0,0,.12);box-shadow:0 18px 44px rgba(0,0,0,.22)}
}

.head-btns{margin-left:auto;display:flex;gap:8px;align-items:center}
/* animasi klik (dipakai nav tab & baris provider) */
.anim-pop{animation:t3pop .3s ease}
@keyframes t3pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.anim-pulse{animation:t3pulse .45s ease}
@keyframes t3pulse{0%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(.95)}75%{transform:scale(1.04)}100%{transform:scale(1)}}
.anim-bounce{animation:t3bounce .45s ease}
@keyframes t3bounce{0%{transform:translateY(0)}30%{transform:translateY(-7px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
.anim-glow{animation:t3glow .5s ease}
@keyframes t3glow{0%{box-shadow:0 0 0 rgba(255,210,30,0)}50%{box-shadow:0 0 14px rgba(255,210,30,.85)}100%{box-shadow:0 0 0 rgba(255,210,30,0)}}
.anim-flash{animation:t3flash .4s ease}
@keyframes t3flash{0%{filter:brightness(1)}50%{filter:brightness(1.5)}100%{filter:brightness(1)}}
.pill{border-radius:12px;font-weight:800;cursor:pointer;font-size:13px;padding:9px 16px;border:0;transition:.15s;white-space:nowrap}
.pill-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.pill-outline:hover{background:rgba(255,255,255,.14)}
body.theme-light .pill-outline{color:var(--txt-strong,#123a8f);border-color:rgba(0,0,0,.32)}
body.theme-light .pill-outline:hover{background:rgba(0,0,0,.06)}
/* LOG IN (header + prof): teks tetap putih di light mode agar kontras di atas bg tombol */
body.theme-light #btnLogin,
body.theme-light #profGuestLogin{color:#fff}

/* ===== MODE TERANG: kembalikan bagian yang HEADER-nya tetap gelap =====
   Aturan mode terang di atas (garis tepi .pill-outline, kotak cari, pemisah
   antar tab) semuanya memakai hitam transparan — masuk akal HANYA kalau header
   ikut memutih. Header tidak pernah memutih: warnanya datang dari tema
   back-office dan di tema mana pun sejauh ini tetap gelap. Akibatnya garis
   hitam di atas latar gelap = hilang, dan tombol LOG IN melebur dengan header.
   Diukur: garis tepi LOG IN berubah dari rgb(58,65,80) di mode gelap menjadi
   rgba(0,0,0,.32) di mode terang, sementara latar headernya sama persis.
   Di bawah ini nilai-nilai itu dikembalikan ke warna TEMA, bukan ke tebakan
   baru, supaya kedua mode terlihat sama di area yang latarnya memang sama. */
body.theme-light .head-btns .pill-outline{border-color:var(--btn-bc,#5a9bf5)}
body.theme-light .head-btns .pill-outline:hover{background:rgba(255,255,255,.14)}
/* Kotak cari dikembalikan PERSIS ke nilai mode gelap (bukan nilai baru): latar
   yang dipijaknya sama gelapnya, jadi setiap penyesuaian "terang" di sini hanya
   mengurangi kontras. Latar lebih gelap dari header + teks putih = terbaca. */
body.theme-light .hsearch{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.16)}
body.theme-light .hsearch input{color:#fff}
body.theme-light .t3:not(:first-child)::before{background:rgba(255,255,255,.18)}
.pill-green{background:linear-gradient(180deg,#6ee02a,#3ea60c);color:#fff;text-shadow:0 1px 1px #2c7a08;box-shadow:0 3px 9px rgba(60,160,10,.35)}
.pill-green:hover{filter:brightness(1.06)}
.pill.full{width:100%;padding:14px}

/* ================= RALLY STRIP ================= */
/* Strip bank kini di BAWAH blok Providers (dulu di atas hero). Diletakkan di luar
   main.wrap agar latarnya selebar layar; margin atas memberi jeda dari blok
   Providers yang tepat di atasnya. */
.rally-strip{background:rgb(28,51,126);margin-top:18px}
.rally-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:stretch;gap:10px;padding:4px 10px;font-size:12px;
  position:relative;min-height:var(--rally-h,36px)}
.rally-label{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;
  color:#fff;font-weight:600;font-size:12px;padding:5px 10px 5px 4px;letter-spacing:.3px;white-space:nowrap;
  background:transparent;border:0;
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.rally-ic{height:18px;width:auto;display:block;-webkit-text-stroke:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.rally-marquee{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center}
.flag{font-size:14px}
.rally-txt{flex:1}.rally-txt b{color:var(--gold)}
.optin{background:transparent;border:1px solid #6fa8ff;color:#fff;font-weight:800;font-size:12px;
  padding:5px 12px;border-radius:8px;cursor:pointer}
.x2{background:none;border:0;color:var(--txt-soft,#9fbdf0);cursor:pointer;font-size:13px}

/* ================= HERO (stack + fade + blur blend) ================= */
.hero{position:relative;margin:0 -14px 18px;--hero-h:clamp(200px,56vw,320px)}
.hslides{position:relative;height:var(--hero-h);border-radius:0;overflow:hidden}
.slide-bg{width:100%}
.hslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease;z-index:0}
.hslide.active{opacity:1;visibility:visible;z-index:1}
.hs-photo{padding:0}
/* gambar: bagian bawah di-feather jadi transparan -> menyatu ke background (gradasi warna) */
.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;z-index:0;
  -webkit-mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%);
          mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%)}

.hdots{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5}
.hdot{width:8px;height:8px;border-radius:50%;background:#ffffff99;cursor:pointer;transition:.2s}
.hdot.active{background:#fff;width:20px;border-radius:8px}

/* Gaya .hero-ribbon DIHAPUS 7 Agustus 2026 bersama pitanya (Hero.tsx).
   Aset assets/ribbon.webp jadi tak terpakai, begitu pula --ribbon-color dan
   --ribbon-tint yang ditulis mesin preset tema.

   PENGGANTI RUANG ALIRNYA ADA DI BAWAH INI. Pita bukan sekadar hiasan: margin
   atasnya bernilai NEGATIF, jadi ia menarik naik seluruh grup CTA (caption +
   tombol Daftar!) ke tepi banner. Dibuang begitu saja, grup itu turun dan
   menyisakan pita gelap kosong di bawah banner.

   Ruang yang dipikulnya DIUKUR di halaman hidup, bukan dihitung dari angka di
   berkas ini: pita dibangun ulang saat jalan, letak caption dicatat, pita
   dibuang, lalu dicatat lagi. Hasilnya -74px dan sama persis di 390px maupun
   1440px. Rinciannya: angkatan -120px + tinggi 46px, sementara margin-bawahnya
   8px TERMAKAN margin collapsing oleh margin-atas caption yang lebih besar.

   Ditaruh di .hslides, BUKAN di .hero-caption: modul posisi caption di
   legacyBoot.js menulis marginTop sebagai style INLINE, dan inline selalu
   menang atas aturan berkas ini — nilai apa pun yang ditulis di sana tidak
   pernah terpakai. Lewat .hslides angkanya bekerja dengan margin-atas caption
   BERAPA PUN, karena keduanya bertetangga dan saling collapse.

   HANYA saat BELUM login, dan itu wajib. Setelah login, .hero-caption dan
   #btnJoin disembunyikan (lihat blok "HEADER STATE LOGIN"), jadi tidak ada
   margin-atas positif yang menelan angka negatif ini — tarikan 74px langsung
   menyeret naik apa pun yang ada di bawah hero. Terukur: baris tab jatuh 64px
   DI ATAS dasar gambar banner, menimpanya. Pita hero yang dulu memikul angka
   ini juga disembunyikan saat login, jadi keadaan sesudah-login memang tidak
   pernah punya tarikan apa pun. */
body:not(.logged-in) .hslides{margin-bottom:-74px}

/* teks caption di bawah gambar (di area blend) */
.hero-caption{position:relative;z-index:5;text-align:center;color:#fff;font-weight:800;font-size:21px;letter-spacing:.5px;
  text-transform:none;margin:-6px 8px 14px;text-shadow:0 2px 8px rgba(0,0,0,.5)}

.join-now{display:block;width:calc(100% - 28px);margin:0 auto;position:relative;overflow:hidden;z-index:5;
  background:linear-gradient(180deg,#6fc72e 0%,#54ad26 50%,#43901c 100%);
  color:#fff;font-weight:900;font-size:22px;letter-spacing:1px;padding:17px 24px;
  border:3px solid #2f7d12;border-radius:16px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 0 #2c7a08, 0 11px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6), 0 0 13px -2px var(--tab-ac,#ffd21e);
  text-shadow:0 2px 2px rgba(0,0,0,.32);transition:transform .08s, box-shadow .08s}
/* kilap glossy di separuh atas (diperlembut agar tak silau) */
.join-now::before{content:"";position:absolute;left:5px;right:5px;top:4px;height:44%;z-index:1;pointer-events:none;
  border-radius:12px 12px 45% 45% / 12px 12px 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.05) 70%,rgba(255,255,255,0))}
/* titik kilau kecil di pojok kiri-atas tombol */
.join-now::after{content:"";position:absolute;top:6px;left:14px;width:16px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.55);filter:blur(1px);z-index:2;pointer-events:none}
.jn-label{position:relative;z-index:2;-webkit-text-stroke:2px #256210;paint-order:stroke fill}
.join-now:active{transform:translateY(4px);box-shadow:0 2px 0 #2c7a08, 0 5px 9px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6)}

/* shine sweep kiri -> kanan */
.jn-shine{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:3;pointer-events:none;display:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-180%) skewX(-18deg)}
.join-now.shine-on .jn-shine{display:block;animation:jnShine var(--jn-shine-dur,2.4s) linear infinite}
@keyframes jnShine{0%{transform:translateX(-180%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
/* zoom in-out (pulse) */
.join-now.zoom-on{animation:jnZoom var(--jn-zoom-dur,1.5s) ease-in-out infinite}
@keyframes jnZoom{0%,100%{transform:scale(1)}50%{transform:scale(var(--jn-zoom-scale,1.05))}}
.hdot{width:8px;height:8px;border-radius:50%;background:#ffffff66;cursor:pointer;transition:.2s}
.hdot.active{background:#fff;width:20px;border-radius:8px}

/* ================= QUICK ROW ================= */
.quick-row{display:flex;gap:10px;margin:0 -14px 26px;padding:10px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;
  background:var(--qr-bg,linear-gradient(180deg,#2a7de9 0%,#1f5fcf 45%,#123f9c 100%));background-attachment:fixed}
.qbtn{background:linear-gradient(180deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));border:1px solid var(--btn-bc,#5a9bf5);color:#fff;
  font-weight:800;font-size:13px;border-radius:16px;padding:13px;cursor:pointer;display:flex;position:relative;
  align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 8px rgba(0,0,0,.25);flex:1;
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.qbtn.qsearch{flex:0 0 54px}
.qi{font-size:17px}
.qi-img{height:24px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.qbtn:hover{filter:brightness(1.09);transform:translateY(-1px)}
/* efek klik quick-row seperti nav tabs (teks kuning) */
.qbtn.active{color:var(--tab-ac,#ffd21e);text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* quick-row: search = label tetap di kiri, sisanya di wadah .qr-scroll */
.qr-scroll{display:flex;gap:10px;flex:1;min-width:0}
.qbtn.qsearch{flex:0 0 54px}

/* mobile: wadah .qr-scroll & toolbar togel/lc bisa di-swipe */
@media(max-width:859px){
  .qr-scroll,.tg-toolbar,.lc-quick{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
  .qr-scroll::-webkit-scrollbar,.tg-toolbar::-webkit-scrollbar,.lc-quick::-webkit-scrollbar{display:none}
  .qr-scroll .qbtn{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;padding-left:18px;padding-right:18px}
  .tg-toolbar .qbtn{flex:0 0 auto;scroll-snap-align:start}
  .lc-quick .qbtn{flex:1 0 auto;scroll-snap-align:start}
}

/* style tombol biru (quick-row + login/register) — diatur via variabel */
.qbtn, .head-btns .pill, .pg-cards .pill, .pf, .prov-row{
  border-radius:var(--btn-radius,12px);
  border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  border-bottom:var(--btn-bb,6px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1) 50.18%,var(--btn-c2,#71B9FF) 99.46%);
  color:#fff;
  -webkit-text-stroke:var(--btn-tsw,2px) var(--btn-tsc,#0a2550);
  paint-order:stroke fill;
}
.qbtn{padding:9px 10px}
/* quick-row dikecilkan seukuran nav tab lama */
.quick-row .qbtn{padding:6px 8px;font-size:12px}
.quick-row .qi-img{height:18px}
.head-btns .pill{padding:9px 18px;font-size:13px}

/* Tombol DAFTAR: box sama dgn LOG IN (variabel outline), warna+efek JOIN NOW */
#btnRegister, #profGuestReg{
  position:relative;overflow:hidden;color:#fff;
  border-radius:var(--btn-radius,12px);
  border-top:var(--btn-bt,1px) solid #2f7d12;
  border-right:var(--btn-bs,1px) solid #2f7d12;
  border-bottom:var(--btn-bb,6px) solid #2f7d12;
  border-left:var(--btn-bs,1px) solid #2f7d12;
  background:linear-gradient(180deg,#75da2f 0%,#56b224 48%,#459518 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.3);-webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill;transition:transform .08s,box-shadow .08s}
#btnRegister::before, #profGuestReg::before{content:"";position:absolute;left:3px;right:3px;top:2px;height:46%;z-index:1;pointer-events:none;
  border-radius:12px 8px 45% 45%/8px 8px 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.05) 70%,transparent)}
#btnRegister::after, #profGuestReg::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6) 50%,rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg);animation:jnShine 2.6s linear infinite}
#btnRegister .reg-label, #profGuestReg .reg-label{position:relative;z-index:3}
#btnRegister:active, #profGuestReg:active{transform:translateY(2px);
  box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55)}

/* ===== LOG IN / DAFTAR: buang KEDALAMAN saja =====
   Tampilan lama dipertahankan sepenuhnya — warna, gradien, ukuran, sudut, garis
   tepi teks, sapuan kilau: semuanya TIDAK disentuh. Yang dimatikan hanya empat
   hal yang membuatnya terlihat timbul:
     1. bibir bawah (border-bottom 6px vs 1px di sisi lain)
     2. bayangan jatuh + kilau dalam di tepi atas (box-shadow)
     3. kubah kilau ::before pada DAFTAR
     4. gerak turun 2px saat ditekan
   Ditaruh SESUDAH aturan aslinya, bukan mengubahnya, supaya tampilan timbul bisa
   dikembalikan dengan menghapus blok ini saja. */
.head-btns .pill,
#btnLogin, #profGuestLogin,
#btnRegister, #profGuestReg{
  /* pakai --btn-bt, bukan angka mati: kalau tebal garis diubah dari setelan,
     sisi bawah tetap ikut sama dan bibirnya tidak muncul lagi */
  border-bottom-width:var(--btn-bt,1px);
  box-shadow:none;
}
#btnRegister::before, #profGuestReg::before{content:none}
/* ditekan: cukup meredup, tanpa gerak turun yang meniru tombol fisik */
#btnLogin:active, #profGuestLogin:active,
#btnRegister:active, #profGuestReg:active{transform:none;box-shadow:none;filter:brightness(.9)}

/* ================= SLIDER PROMO =================
   Menggantikan panel DAILY JACKPOT. Mobile 1 banner per layar, desktop 2.
   CSS jackpot di bawah sengaja DIPERTAHANKAN supaya panel lama bisa dipasang
   lagi hanya dengan mengembalikan markup .jp-panel di index.html. */
.pslider{position:relative}
.ptrack{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--pgap,12px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ptrack::-webkit-scrollbar{display:none}
.pslide{position:relative;scroll-snap-align:start;border-radius:16px;overflow:hidden;cursor:pointer;
  aspect-ratio:var(--pslide-ar,16/7);transition:.15s;
  background:linear-gradient(135deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.pslide:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.pslide img{width:100%;height:100%;object-fit:cover;display:block}
.pslide-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;
  font-weight:800;font-size:14px;line-height:1.25;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.pslide-cap small{display:block;font-weight:600;font-size:11px;opacity:.8;margin-top:3px}
.pdots{display:flex;justify-content:center;gap:6px;margin-top:10px;height:7px}
.pdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:.2s}
.pdot.active{width:18px;border-radius:4px;background:var(--tab-ac,#ffd21e)}
.pnav{display:none}
@media(min-width:860px){
  .ptrack{grid-auto-columns:calc((100% - var(--pgap,12px)) / var(--pslide-per-d,2))}
  /* Titik-titik memakan 17px di bawah trek (margin 10 + tinggi 7), jadi pusat trek
     bukan 50% dari .pslider — kalau pakai 50% tombolnya turun ~8px. */
  .pnav{position:absolute;top:calc(50% - 8.5px);transform:translateY(-50%);z-index:3;
    display:flex;align-items:center;justify-content:center;width:38px;height:38px;
    border:0;border-radius:50%;cursor:pointer;background:rgba(0,0,0,.55);color:#fff;
    font-size:26px;line-height:0;padding-bottom:4px;transition:.15s}
  .pnav:hover{background:rgba(0,0,0,.82)}
  .pnav.prev{left:-8px}
  .pnav.next{right:-8px}
}

/* ================= JACKPOT / WONDERPOT ================= */
.jp-panel{position:relative;border-radius:20px;padding:44px 14px 12px;overflow:hidden;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#274a9e 0%,#152a63 42%,#0b1740 100%);
  border:1px solid var(--jp-border,#3a5db0);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.jp-panel::before{content:"✦ ✦ ✦ ✦ ✦ ✦";position:absolute;top:8px;left:0;right:0;text-align:center;
  color:#ffd21e;opacity:.5;letter-spacing:16px;font-size:12px;pointer-events:none}
.jp-banner{position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#7a1020,#3a0810);border:2px solid #ffb703;border-top:0;
  border-radius:0 0 16px 16px;padding:6px 26px;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.jp-banner span{font-weight:900;font-size:12px;letter-spacing:2px;
  color:transparent;background:linear-gradient(180deg,#ffe98a,#ffb703);-webkit-background-clip:text;background-clip:text}
.jp-amount{font-weight:900;font-size:38px;line-height:1;margin:6px 0 14px;
  color:var(--jp-main-color,#ffffff);font-variant-numeric:tabular-nums}
.jp-tiers{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.jp-tier{flex:1;max-width:150px;background:linear-gradient(180deg,var(--jp-tier1,#16265e),var(--jp-tier2,#0d1a44));
  border:1px solid var(--jp-border,#33509c);
  border-radius:12px;padding:8px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:5px}
.jp-tag{font-weight:900;font-size:10px;letter-spacing:.5px;color:#fff;padding:3px 12px;border-radius:20px}
.jp-tag.ultra{background:linear-gradient(180deg,#a25bff,#6a2bd6)}
.jp-tag.boost{background:linear-gradient(180deg,#3d86ec,#2764c9)}
.jp-tag.flash{background:linear-gradient(180deg,#6ee02a,#3ea60c)}
.jp-tier b{font-size:14px;color:#ffe08a;font-variant-numeric:tabular-nums}
.jp-games{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.jp-game{aspect-ratio:var(--game-ar);border-radius:12px;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:30px}
.jp-play{display:block;width:calc(100% - 8px);margin:0 auto 12px;border:0;cursor:pointer;border-radius:16px;
  padding:15px;font-weight:900;font-size:19px;letter-spacing:1px;color:var(--jp-btntext,#5a3a00);
  background:linear-gradient(180deg,var(--jp-btn1,#ffe486),var(--jp-btn2,#ffc21e) 55%,var(--jp-btn3,#f5a300));
  box-shadow:0 5px 0 var(--jp-btnsh,#b9760a),0 10px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.4);transition:.1s}
.jp-play:active{transform:translateY(3px);box-shadow:0 2px 0 var(--jp-btnsh,#b9760a),0 5px 9px rgba(0,0,0,.4)}
.jp-shine{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:4;pointer-events:none;display:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4) 50%,rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg)}
.jp-panel.shine-on .jp-shine{display:block;animation:jnShine var(--jp-shine-dur,2.4s) linear infinite}
.jp-ticker{overflow:hidden;border-top:1px solid #ffffff1f;padding-top:8px}
.jp-track{display:inline-flex;white-space:nowrap;gap:28px;font-size:12px;color:#bcd0f5;
  animation:jpScroll 22s linear infinite;will-change:transform}
.jp-track b{color:#ffd21e}
.jp-track span{opacity:.55;font-size:12px}
@keyframes jpScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Desktop: panel tetap selebar layar (background jadi panggung), tapi isinya
   dibatasi seperti .quick-row. Tanpa ini kartu game ikut melar jadi ~274px/kartu
   (di HP hanya ~87px) sehingga panel terasa raksasa.
   Kolom dibedakan: desktop 8 sebaris, HP tetap 4 sebaris (2 baris) supaya ukuran
   kartu di HP tidak berubah sedikit pun — di sana sudah pas. */
@media(min-width:860px){
  .jp-panel{padding:50px 20px 14px}
  .jp-tiers,.jp-games{max-width:var(--jp-inner,800px);margin-left:auto;margin-right:auto}
  .jp-games{grid-template-columns:repeat(var(--jp-cols-d,8),1fr);gap:10px;margin-bottom:16px}
  .jp-play{max-width:var(--jp-inner,800px);width:100%}
}

/* ===== mode body terang (kontras) ===== */
body.theme-light .block-head h2{color:var(--txt-strong,#123a8f);-webkit-text-stroke:0}
body.theme-light .see{color:#2764c9}
body.theme-light .see:hover{color:#0e2a6b}
body.theme-light .sub{color:#3a5aa8}
body.theme-light .foot p{color:#3a5aa8}
body.theme-light .foot{border-top-color:#00000018}
/* Caption di bawah banner SENGAJA tidak diatur di sini. Warnanya ditulis INLINE
   dari setelan (emas #ffdd3d), jadi aturan tanpa !important tidak akan pernah
   menang — dan memaksanya dengan !important berarti diam-diam merebut warna
   yang memang dipilih operator. Kontrasnya terhadap latar terang memang cuma
   1,11, tetapi hurufnya bergaris tepi navy 3,5px sehingga tetap terbaca. */
/* Hijau muda penanda ("every 20 minutes") turun ke 1,79 di atas putih. */
body.theme-light .hl{color:#2f7d12}

/* ================= HALAMAN PROVIDERS (di area konten) ================= */
.page-overlay{display:none;margin:8px 0 10px}
/* togel & live casino: toolbar rapat ke header (tanpa gap) */
.page-overlay.tg-page,.page-overlay.lc-page{margin-top:0}
.page-overlay.show{display:block}
/* saat halaman provider aktif: sembunyikan konten lain, header+tabs+quick tetap */
body.pp-open .hero,
body.pp-open .rally-strip,
body.pp-open .block{display:none}
/* Halaman-halaman BAR TAB (Slot/Livecasino/Sportsbook/Togel/Live):
   BANNER SENGAJA DIBIARKAN TAMPIL. Yang berganti hanya isi di BAWAH banner,
   jadi kepala halaman (teks berjalan + banner + bar tab) tidak pernah
   terbanting saat berpindah tab. Karena itu `.hero` TIDAK boleh dimasukkan
   lagi ke daftar di bawah — menambahkannya kembali akan mengembalikan
   perilaku lama tanpa error apa pun, hanya bannernya lenyap.
   Halaman non-tab (provider & promo) tetap menyembunyikan banner. */
/* saat halaman togel aktif */
body.tg-open .rally-strip,
body.tg-open .quick-row,
body.tg-open .block{display:none}
/* saat halaman live casino aktif */
body.lc-open .rally-strip,
body.lc-open .quick-row,
body.lc-open .block{display:none}
body.sb-open .rally-strip, body.sb-open .quick-row, body.sb-open .block,
body.lv-open .rally-strip, body.lv-open .quick-row, body.lv-open .block{display:none}
body.promo-open .hero, body.promo-open .rally-strip, body.promo-open .quick-row, body.promo-open .block{display:none}
.page-head{display:flex;align-items:center;gap:12px;padding:6px 2px 12px}
.page-back{background:rgba(255,255,255,.15);border:0;color:#fff;font-size:24px;line-height:1;
  width:36px;height:36px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.page-back:hover{background:rgba(255,255,255,.28)}
.page-title{font-weight:900;font-size:20px;color:#fff}
body.theme-light .page-title{color:var(--txt-strong,#123a8f)}
body.theme-light .page-back{background:rgba(0,0,0,.12);color:var(--txt-strong,#123a8f)}
.page-filters{display:flex;gap:8px;padding:0 0 14px}
.pf{flex:1;font-weight:800;font-size:12px;padding:8px 6px;cursor:pointer;transition:.15s}
.pf:hover{filter:brightness(1.08)}
.pf.active{filter:brightness(1.22);color:var(--tab-ac,#ffd21e);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.prov-list{display:flex;flex-direction:column;gap:10px;padding:0}
.prov-row{display:flex;align-items:center;gap:14px;cursor:pointer;transition:.15s;position:relative;overflow:visible;
  background:linear-gradient(90deg,var(--pr-g1,#eef4ff) 0%,var(--pr-g1,#eef4ff) var(--pr-split,9%),var(--pr-g2,#2f6fe0) 100%);
  border:0 !important;border-radius:var(--pr-radius,16px);padding:12px 16px;box-shadow:0 4px 10px rgba(0,0,0,.32);
  -webkit-text-stroke:0}
.prov-row:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* texture pedang di atas gradient (fade masuk di sisi biru) */
.prov-row::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:url("assets/tex-swords.png") repeat;background-size:var(--pr-tex-size,215px) auto;
  opacity:var(--pr-tex-op,.58);
  -webkit-mask:linear-gradient(90deg,transparent 22%,#000 62%);mask:linear-gradient(90deg,transparent 22%,#000 62%)}
.pr-logo{flex:0 0 auto;width:var(--pr-logo-w,120px);height:52px;object-fit:contain;object-position:left center;
  background:none;box-shadow:none;padding:0;position:relative;z-index:2}
.pr-name{flex:1;text-align:left;font-weight:800;font-size:16px;letter-spacing:.2px;text-transform:none;
  color:var(--pr-name-c,#ffffff);position:relative;z-index:2;
  -webkit-text-stroke:var(--pr-name-sw,1px) var(--pr-name-sc,#0e2a63);paint-order:stroke fill}
.pr-count{font-weight:800;font-size:16px;color:var(--pr-count-c,#ffffff);position:relative;z-index:2;
  display:var(--pr-count-disp,none);text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* baris ber-hadiah: beri ruang utk kotak hadiah + tampilkan hadiah */
.prov-row.pr-gift .pr-count{margin-right:calc(var(--pr-gift-w,96px) - 12px)}
.prov-row.pr-gift::after{content:"";position:absolute;right:var(--pr-gift-x,8px);top:50%;transform:translateY(-50%);
  display:var(--pr-gift-disp,block);width:var(--pr-gift-w,96px);height:calc(var(--pr-gift-w,96px) * .94);
  background:url("assets/gift.png") center/contain no-repeat;z-index:1;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}

/* ================= PETAK BANK (di bawah Providers) =================
   Dulu pita berjalan (trek digandakan 2x lalu digeser -50%). Sejak 7 Agustus
   2026 jadi kisi DIAM atas permintaan, dan logo tampil dengan WARNA ASLINYA —
   sebelumnya diputihkan `filter:brightness(0) invert(1)`.

   Karena itu pilnya TERANG, bukan gelap seperti contoh yang diberikan: berkas
   logo bank dirancang untuk latar putih dan wordmark-nya hitam pekat (GOPAY,
   Maybank), jadi di atas pil gelap separuh nama banknya lenyap. Warnanya ada di
   --bank-pill supaya bisa dibalik tanpa membongkar aturan lain. */
.bank-grid{display:grid;gap:8px;width:100%;
  grid-template-columns:repeat(auto-fill,minmax(var(--bank-min,106px),1fr))}
/* 128px DIPERTAHANKAN di desktop: pada lebar isi 1160px ia menghasilkan 8 kolom,
   jadi 15 bank jatuh 8+7 — dua baris rata. Menaikkannya ke 142px memberi 7 kolom
   dan menyisakan satu pil sendirian di baris ketiga. */
@media (min-width:520px){ .bank-grid{--bank-min:128px} }
@media (min-width:1024px){ .bank-grid{gap:10px} }
/* Pil boleh melipat supaya label status bank bermasalah turun ke baris kedua;
   lihat .bank-on di bawah. */
.bank-item{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;
  padding:7px 10px;border-radius:10px;
  background:var(--bank-pill,#ffffff);border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.28)}
/* flex-basis 0 (BUKAN auto) wajib: pil ini flex-wrap, dan dengan basis `auto`
   logo lebar seperti GOPAY memakai lebar ALAMINYA sebagai dasar — melebihi
   ruang tersisa, ia terlipat ke baris kedua dan pilnya jadi lebih tinggi dari
   tetangganya sementara titik statusnya naik ke pojok. Basis 0 membuat kotak
   logo selalu sekadar sisa ruang, jadi tinggi semua pil sama.
   Logonya ditengahkan: lebar logo bank berbeda jauh (GOPAY lebar, OVO sempit),
   rata kiri menyisakan lubang kosong besar di kanan pil-pil berlogo sempit. */
.bank-ic{height:18px;max-width:100%;min-width:0;flex:1 1 0;
  object-fit:contain;object-position:center;display:block}
.bank-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#1fbf47;
  box-shadow:0 0 0 3px rgba(31,191,71,.18)}
/* Bank yang sedang bermasalah TETAP tampil, hanya labelnya yang berubah —
   disembunyikan, pemain mengira metode itu sudah tidak didukung dan bertanya
   ke layanan pelanggan. Nilainya diatur di back-office (Bank & Payment Logos);
   untuk menyembunyikan sama sekali dipakai Active = No.
   Kelas statusnya kini di .bank-item, bukan .bank-on — labelnya hanya ada saat
   status BUKAN online, jadi ia tak bisa lagi jadi penyangga kelas. */
.bank-item.is-off .bank-dot{background:#ff4d4d;box-shadow:0 0 0 3px rgba(255,77,77,.18)}
.bank-item.is-maint .bank-dot{background:#ffb020;box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.bank-item.is-off,.bank-item.is-maint{opacity:.72}
/* flex-basis 100% memaksa label turun ke baris sendiri: di pil selebar 106px,
   menaruhnya sebaris dengan logo menyisakan belasan piksel untuk logonya. */
.bank-on{flex:1 0 100%;text-align:center;font-size:9px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;line-height:1}
.bank-item.is-off .bank-on{color:#c62828}
.bank-item.is-maint .bank-on{color:#a86100}

/* Bilah "Deposit :" jadi blok bertumpuk: label di atas, petak di bawah. */
.rally-inner-blok{flex-direction:column;align-items:stretch;gap:9px;padding:10px 10px 13px}
.rally-inner-blok .rally-label{justify-content:flex-start;padding:0 0 0 2px}

/* ================= HALAMAN LIVE CASINO ================= */
.lc-page{color:#fff}
/* quick row provider/top/new — menempel di header seperti page lain */
.lc-quick{display:flex;gap:10px;margin:0 -14px 16px;padding:8px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;background:var(--surf-bar,rgb(28,51,126))}
.lc-quick .qbtn{flex:1;padding:10px 12px}
/* grid tombol provider */
.lc-provs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lc-prov{min-width:0;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));color:#fff;
  font-weight:800;font-size:14px;padding:14px 16px;transition:.15s;
  border-radius:var(--btn-radius,12px);border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);border-bottom:var(--btn-bb,6px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.lc-prov:hover{filter:brightness(1.08);transform:translateY(-1px)}
.lc-prov.active{outline:3px solid var(--tab-ac,#ffd21e);outline-offset:-1px;color:var(--tab-ac,#ffd21e)}
.lc-prov .lc-ic{font-size:20px;-webkit-text-stroke:0;flex:0 0 auto}
.lc-prov .lc-logo{flex:0 0 auto;width:34px;height:34px;object-fit:contain;
  -webkit-text-stroke:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.lc-prov .lc-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* logo provider di sebelah judul saat game provider dibuka */
.lc-gtitle-logo{flex:0 0 auto;height:30px;max-width:96px;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* judul provider terpilih */
.lc-heading{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.lc-heading .lc-big{font-weight:900;font-size:20px;color:var(--tab-ac,#ffd21e)}
.lc-heading small{color:var(--txt-soft,#bcd2ff);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* grid thumbnail game */
.lc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lc-card{cursor:pointer}
.lc-thumb{aspect-ratio:var(--game-ar);border-radius:16px;overflow:hidden;position:relative;
  border:2px solid rgba(255,255,255,.18);box-shadow:0 4px 12px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;transition:.15s}
.lc-card:hover .lc-thumb{transform:translateY(-3px);border-color:var(--tab-ac,#ffd21e)}
.lc-emoji{font-size:44px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.lc-play{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.45);border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;color:#fff;letter-spacing:.3px}
.lc-play::before{content:"▶";font-size:12px;margin-left:1px}
.lc-cap{position:absolute;left:6px;right:6px;bottom:6px;text-align:center;font-weight:900;font-size:12px;
  color:#fff;text-shadow:0 1px 3px #000;text-transform:uppercase}
.lc-gname{text-align:center;font-weight:700;font-size:12px;margin-top:6px;color:#eaf2ff}

@media(min-width:860px){
  .lc-provs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lc-grid{grid-template-columns:repeat(4,1fr)}
  /* background quick row full lebar layar di desktop */
  .lc-quick{background:transparent}
  .lc-quick::after{content:"";position:absolute;top:0;bottom:0;left:50%;
    margin-left:calc(var(--vw,100vw) / -2);width:var(--vw,100vw);
    z-index:-1;pointer-events:none;background:var(--surf-bar,rgb(28,51,126))}
}

/* ================= HALAMAN TOGEL ================= */
.tg-page{color:#fff}
/* toolbar atas — gaya identik quick-row slot (pakai .qbtn), menempel di header */
.tg-toolbar{display:flex;gap:10px;margin:0 -14px 16px;padding:8px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;
  background:var(--surf-bar,rgb(28,51,126))}
.tg-toolbar .qbtn{flex:1;padding:10px 12px}

/* grid pasaran */
.tg-markets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.tg-market{position:relative;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));color:#fff;
  font-weight:800;font-size:13px;padding:13px 14px;transition:.15s;
  border-radius:var(--btn-radius,12px);border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);border-bottom:var(--btn-bb,6px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.tg-market:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tg-market.active{outline:3px solid var(--tab-ac,#ffd21e);outline-offset:-1px;color:var(--tab-ac,#ffd21e)}
.tg-dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;-webkit-text-stroke:0}
.tg-dot.on{background:#2ecc4b;color:#0a3d12}
.tg-dot.off{background:#e74c3c;color:#5a0f0a}
.tg-mname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-time{font-size:12px;font-weight:800;color:#ffe08a;-webkit-text-stroke:0;letter-spacing:.5px}

/* body: sidebar + tabel */
.tg-play{display:flex;gap:12px;align-items:flex-start}
.tg-side{flex:0 0 150px;display:flex;flex-direction:column;gap:10px}
.tg-discount{background:linear-gradient(180deg,#ffe38a,#f4c743);color:#5a3d00;font-weight:900;font-size:14px;
  padding:12px;border-radius:12px;border:0;border-bottom:4px solid #c89a17;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center}
.tg-mcard{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 10px;text-align:center}
.tg-mc-name{color:var(--tab-ac,#ffd21e);font-weight:900;font-size:15px;line-height:1.2}
.tg-mc-period{color:#fff;font-weight:800;font-size:14px;margin-top:2px}
.tg-mc-prev{color:#4dff8a;font-weight:800;font-size:12px;margin-top:10px}
.tg-mc-prev b{color:#fff;font-size:14px}
.tg-modes{display:flex;flex-direction:column;gap:6px}
.tg-mode{position:relative;background:linear-gradient(180deg,var(--surf-card1,#2b4d8c),var(--surf-card2,#1c3564));
  color:#dbe7ff;font-weight:800;font-size:13px;padding:12px 10px;border:0;border-radius:12px;cursor:pointer;text-align:center;transition:.15s}
.tg-mode:hover{filter:brightness(1.12)}
.tg-mode.active{background:linear-gradient(181deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));color:var(--tab-ac,#ffd21e)}
.tg-badge{position:absolute;top:-4px;right:-4px;background:#e63b2e;color:#fff;font-size:10px;font-weight:900;
  padding:2px 5px;border-radius:8px;transform:rotate(8deg)}

/* tabel bet */
.tg-main{flex:1;min-width:0}
.tg-main-head{background:linear-gradient(90deg,#e0463c,#c9342b);color:#fff;font-weight:900;font-size:14px;
  padding:12px 16px;border-radius:12px 12px 0 0;-webkit-text-stroke:0}
.tg-main-head b{color:#ffe08a}
.tg-scroll{overflow-x:auto;background:rgba(0,0,0,.22);border-radius:0 0 12px 12px}
.tg-table{min-width:640px}
.tg-trow{display:grid;grid-template-columns:40px 190px 1fr 1fr 1fr 1fr;align-items:center;gap:10px;
  padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.tg-thead{font-weight:800;font-size:12px;color:var(--txt-soft,#bcd2ff);background:rgba(255,255,255,.05);-webkit-text-stroke:0}
.tg-c-no{text-align:center;color:var(--txt-soft,#bcd2ff);font-weight:800}
.tg-c-num{display:flex;gap:6px}
.tg-copy{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;margin-left:8px;color:var(--txt-soft,#bcd2ff)}
.tg-dig{width:36px;height:34px;text-align:center;font-weight:800;font-size:15px;border:1px solid var(--btn-bc,#9fbdf0);
  border-radius:8px;background:#fff;color:var(--txt-strong,#0a2550)}
.tg-inp{width:100%;height:34px;border-radius:8px;border:1px solid var(--btn-bc,#9fbdf0);padding:0 8px;font-weight:700;font-size:13px;color:var(--txt-strong,#0a2550)}
.tg-inp.cream{background:#fff6da;border-color:#e6cf8f}
.tg-inp.white{background:#fff}
.tg-inp[readonly]{background:#fff6da;color:#5a3d00;cursor:default}
.tg-dig:focus,.tg-inp:focus{outline:2px solid var(--tab-ac,#ffd21e);border-color:var(--tab-ac,#ffd21e)}
.tg-cell{min-width:0}
.tg-mini{display:none}

.tg-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.tg-total{font-weight:800;font-size:15px}
.tg-total b{color:var(--tab-ac,#ffd21e);font-size:18px}
.tg-submit{background:linear-gradient(180deg,#8ee85a,#59b32a);color:#fff;font-weight:900;font-size:15px;
  padding:13px 30px;border:0;border-bottom:5px solid #2f7d12;border-radius:12px;cursor:pointer;
  -webkit-text-stroke:2px #256210;paint-order:stroke fill}
.tg-submit:active{transform:translateY(2px)}

@media(max-width:760px){
  .tg-play{flex-direction:column}
  .tg-side{flex:none;width:100%}
  .tg-modes{flex-direction:row;flex-wrap:wrap}
  .tg-mode{flex:1 1 30%}

  /* tabel bet: fit portrait tanpa scroll — tiap baris jadi 2 baris */
  .tg-scroll{overflow-x:visible}
  .tg-table{min-width:0}
  .tg-thead{display:none}
  .tg-mini{display:block;font-size:10px;font-weight:800;color:var(--txt-soft,#bcd2ff);-webkit-text-stroke:0;
    text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;white-space:nowrap}
  .tg-trow{grid-template-columns:22px 1fr 1fr 1fr;
    grid-template-areas:"no num num game" "no bet pot pay";
    column-gap:6px;row-gap:8px;padding:10px 10px}
  .tg-c-no{grid-area:no;align-self:center;font-size:12px}
  .tg-c-num{grid-area:num;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
  .tg-c-game{grid-area:game;align-self:end}
  .tg-c-bet{grid-area:bet}
  .tg-c-pot{grid-area:pot}
  .tg-c-pay{grid-area:pay}
  .tg-dig{width:100%;min-width:0;height:36px;font-size:15px;padding:0}
  .tg-inp{height:32px;font-size:12px;padding:0 5px}
}
@media(min-width:860px){
  .tg-markets{grid-template-columns:repeat(4,1fr)}
  /* background toolbar full lebar layar di desktop */
  .tg-toolbar{background:transparent}
  .tg-toolbar::after{content:"";position:absolute;top:0;bottom:0;left:50%;
    margin-left:calc(var(--vw,100vw) / -2);width:var(--vw,100vw);
    z-index:-1;pointer-events:none;
    background:var(--surf-bar,rgb(28,51,126))}
}

/* grid game per provider */
.pp-games{display:none}
.pg-grid{display:grid;grid-template-columns:repeat(var(--pg-cols,4),1fr);gap:var(--pg-gap,8px)}
.pg-card{aspect-ratio:var(--game-ar);border-radius:12px;overflow:hidden;position:relative;cursor:pointer;
  border:2px solid rgba(255,255,255,.2);box-shadow:0 3px 8px rgba(0,0,0,.35);transition:.15s;
  display:flex;align-items:flex-end;justify-content:center;padding:5px}
.pg-card:hover{transform:translateY(-3px)}
.pg-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px}
.pg-name{position:relative;z-index:1;font-size:12px;font-weight:800;text-align:center;line-height:1.1;
  text-shadow:0 1px 2px #000}
/* Drawer setelan lama: dihapus dari antarmuka (tak ada tombol pembuka), tapi
   markup-nya masih dimuat inert sebagai pembawa nilai settings.js. Pastikan
   tidak pernah tampil / memakan ruang / bisa difokus. */
#legacySettingsCarrier{display:none !important}

/* Gaya langkah verifikasi OTP WhatsApp DIHAPUS 7 Agustus 2026 bersama
   langkahnya (.otp-info, #otpCode, .otp-actions, .otp-note): pendaftaran kini
   satu langkah dan tidak ada lagi elemen ber-awalan .otp- di halaman.

   Aturan [hidden] di bawah DIPERTAHANKAN meski tidak ada lagi yang bertukar
   langkah: .reg-body/.reg-submit punya display eksplisit yang MENGALAHKAN
   atribut [hidden] bawaan peramban, jadi ia tetap jadi jaring pengaman untuk
   elemen mana pun di modal ini yang disembunyikan lewat [hidden]. */
.reg-body[hidden], .reg-submit[hidden], .reg-close[hidden]{display:none !important}

/* status katalog (memuat / kosong / gagal) — melebar penuh di grid */
.pg-note{grid-column:1/-1;text-align:center;padding:26px 12px;font-size:13px;font-weight:600;
  line-height:1.5;opacity:.75}

/* ================= BLOCKS ================= */
.block{margin-bottom:var(--block-gap,16px)}
.block-head{display:flex;align-items:center;margin-bottom:14px}
.block-head h2{font-size:20px;font-weight:700;
  -webkit-text-stroke:var(--title-tsw,0px) var(--title-tsc,#0a2550);paint-order:stroke fill}
.see{margin-left:auto;color:#a9c6f5;font-size:12px;font-weight:700}
.see:hover{color:#fff}
.sub{font-size:13px;color:var(--txt-soft,#cfe0ff);margin:-8px 0 12px}
.hl{color:var(--green)}

/* Scrollbar 8px di bawah tiap baris game disembunyikan — tampil sebagai garis abu
   memanjang yang mengganggu. Baris tetap bisa digeser (jari/roda), sama seperti
   .tabs3 dan .ptrack yang sudah menyembunyikannya. */
.rank-slider{display:flex;gap:var(--rt-gap,16px);overflow-x:auto;overflow-y:hidden;padding:6px 2px 26px var(--rt-pl,20px);scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.rank-slider::-webkit-scrollbar{display:none}
.rank-slider.rs-alt{padding-left:var(--rt-pl2,20px)}
.rank-card{position:relative;flex:0 0 auto;width:var(--rt-w,120px);scroll-snap-align:start;padding-bottom:28px}
.rank-card:first-child{margin-left:14px}
/* kartu pertama: jangan geser nomor ke kiri (clamp x>=0) supaya angka 1 tak kepotong di tepi slider */
.rank-card:first-child .big-num{transform:translate(max(0px,var(--bn-x,0px)),var(--bn-y,0px))}
.rank-thumb{width:var(--rt-w,120px);height:auto;aspect-ratio:var(--game-ar);border-radius:16px;overflow:hidden;position:relative;
  cursor:pointer;transition:.15s;border:0;
  box-shadow:0 8px 18px rgba(0,0,0,.45)}
/* stroke gradient linear (Inside) — weight mixed: tipis atas/samping, tebal bawah */
.rank-thumb::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  padding:var(--card-t,3px) var(--card-r,3px) var(--card-b,6px) var(--card-l,3px);
  background:linear-gradient(180deg,var(--btn-c1,#a8ccff) 0%,var(--btn-c2,#3f86ff) 45%,var(--btn-bc,#0a46cf) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.rank-thumb .emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:50px}
.rank-thumb .top-tag{position:absolute;top:6px;left:6px;background:#000000aa;color:var(--gold);
  font-size:10px;font-weight:900;padding:2px 6px;border-radius:8px}
.rank-thumb .gname{display:none}
.big-num{position:absolute;bottom:6px;left:2px;font-size:var(--bn-size,58px);font-weight:900;line-height:1;z-index:5;
  color:var(--bn-sc,#0a2550);
  -webkit-text-stroke:calc(var(--bn-sw,5px) * 2) var(--bn-sc,#0a2550);
  transform:translate(var(--bn-x,0px),var(--bn-y,0px));
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.5))}
.big-num::after{content:attr(data-num);position:absolute;left:0;top:0;
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,var(--bn-c1,#ffe98a) 0%,var(--bn-c2,#ff9e00) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Nomor 2 digit (kartu ke-10 dst) TIDAK dikecilkan.
   Sebelumnya dikecilkan ke 68% agar tidak menelan judul game — tapi itu ikut
   memotong TINGGI huruf dari 35px jadi 24px, dan tinggi itulah yang dibaca mata
   sebagai "ukurannya beda sendiri". Terukur: kartu 1-9 tinggi 35px, kartu 10-12
   cuma 24px.
   Pengecilan itu juga berlebihan. Pada 68%, "10" jadi selebar 26px — praktis
   sama dengan angka SATU digit (15-25px). Jadi lebar bukan lagi masalahnya.
   Yang dirapatkan sekarang hanya jarak antar-angkanya, dalam em supaya tetap
   sebanding kalau --bn-size diubah dari setelan. */
.rank-card:nth-child(n+10) .big-num{letter-spacing:-.06em}
.rank-thumb:hover{transform:translateY(-4px)}
.rank-thumb:hover::before{background:linear-gradient(180deg,rgba(255,255,255,.9),var(--btn-c1,#6aa4ff) 45%,var(--btn-c2,#1257e0) 100%)}

/* Mobile: 3 kartu per layar, bukan 4 — gambar game jadi jauh lebih besar & jelas.
   Lebarnya DIHITUNG dari lebar layar, bukan angka tetap, supaya pas di HP kecil
   maupun besar. Yang dikurangi: jarak masuk kiri (--rt-pl / --rt-pl2 + margin-left
   kartu pertama 14px), 2 celah antar-kartu, dan sisa "intipan" kartu ke-4 supaya
   masih terlihat bahwa baris ini bisa digeser.
   Patokannya 100% = lebar TAMPAK slider, jadi ikut lebar layar apa pun.
   Padding kiri (--rt-pl / --rt-pl2) dan margin kartu pertama dinolkan di mobile:
   scroll-snap sudah menyeret baris ke kartu pertama begitu halaman dimuat, jadi
   jarak masuk itu tak pernah kelihatan — ia cuma memotong jatah lebar kartu, dan
   karena nilainya beda per baris (0 vs 25) bikin PG-Soft lebih kecil dari Top Games.
   --rt-peek:0 = tanpa intipan kartu ke-4; 3 kartu mengisi lebar layar sampai habis.
   Wajib menimpa lewat .rank-card (bukan mengubah --rt-w), karena --rt-w ditulis
   inline ke <html> oleh panel setelan dan selalu menang atas nilai fallback di sini.
   Dibatasi max-width:859px agar grid 10 kolom di desktop tak ikut berubah. */
@media(max-width:859px){
  .rank-slider,
  .rank-slider.rs-alt{--rt-peek:0px;padding-left:0}
  .rank-card:first-child{margin-left:0}
  .rank-card{width:calc((100% - 2 * var(--rt-gap,16px) - var(--rt-peek,26px)) / 3)}
  .rank-card .rank-thumb{width:100%}
}

/* Desktop: Top Games berhenti jadi slider lebar-tetap dan berubah jadi grid 10 kolom
   selebar .wrap, sehingga tepi kiri/kanannya SEJAJAR dengan panel jackpot di bawahnya.
   Dua sumber ketidaksejajaran yang harus dinolkan: .rank-slider punya
   padding-left var(--rt-pl,20px) dan .rank-card:first-child punya margin-left 14px —
   totalnya menggeser baris ~34px ke dalam. overflow juga dibuat visible karena angka
   besar (.big-num) menjorok keluar kotak kartu dan akan terpotong oleh overflow-x:auto.
   Aturan body.logged-in di bawah lebih spesifik, jadi tampilan setelah login tak berubah. */
@media(min-width:860px){
  #topGames{display:grid;grid-template-columns:repeat(var(--top-cols-d,10),1fr);
    gap:var(--rt-gap,16px);overflow:visible;padding:6px 0 26px;scroll-snap-type:none}
  #topGames .rank-card,
  #topGames .rank-card:first-child{width:auto;margin-left:0}
  #topGames .rank-thumb{width:100%}
  /* Daftarnya kini 12 game (2 ditambah untuk mengisi petak setelah login), tapi
     grid desktop sebelum login tetap 10 kolom — tanpa aturan ini kartu ke-11 & 12
     turun sendirian ke baris kedua. Di mobile tetap tampil semua (bisa digeser). */
  body:not(.logged-in) #topGames .rank-card:nth-child(n+11){display:none}
}

/* PROVIDERS */
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Blok Providers di home cuma CUPLIKAN 1 baris; daftar lengkapnya lewat "SEE ALL"
   (halaman terpisah #provPageList, bukan grid ini — jadi menyembunyikan sisanya
   tidak menghilangkan akses ke provider lain).
   Mobile 3 chip, desktop 6 chip — samakan dengan jumlah kolom grid-nya, kalau tidak
   chip ke-7 turun sendirian ke baris kedua. */
@media(max-width:859px){
  .prov-grid > .prov-chip:nth-child(n+4){display:none}
}
@media(min-width:860px){
  .prov-grid > .prov-chip:nth-child(n+7){display:none}
}
.prov-chip{background:linear-gradient(181deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;
  padding:8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;cursor:pointer;transition:.15s;box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* Logo provider tampil warna asli. Sebelumnya dipaksa putih polos dengan
   filter:brightness(0) invert(1) — itu membuang seluruh warna gambar sumbernya. */
.prov-logo{max-width:100%;max-height:var(--prov-size,18px);width:auto;object-fit:contain;display:block}
.prov-chip small{display:block;color:#dbe9ff;font-weight:700;font-size:10px}
.prov-chip:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.32)}

/* ================= FOOTER ================= */
.foot{border-top:1px solid #ffffff22;margin-top:14px}
.foot-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:12px;padding:22px 14px}
.badge18{background:#ff4d5e;color:#fff;font-weight:900;border-radius:50%;width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;font-size:12px}
.foot p{font-size:12px;color:var(--txt-soft,#cfe0ff)}

/* Gaya .chat-fab DIHAPUS 7 Agustus 2026 bersama tombolnya: chat mengambang
   pindah jadi menu "Live Chat" di bar bawah. Semua aturan `.chat-fab{bottom:...}`
   yang tersebar di berkas ini ikut dibuang — dulu tiap kali tinggi bar bawah
   berubah, angka itu harus ikut digeser supaya tombolnya tidak menabrak bar. */

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:#000000cc;display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:linear-gradient(180deg,var(--surf-p1,#2a6fe0),var(--surf-p2,#123f9c));border:1px solid var(--btn-bc,#5a9bf5);border-radius:20px;
  padding:26px;width:100%;max-width:360px;position:relative;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h3{font-size:20px}
.modal input{background:var(--ub-bg1,#0e3c8f);border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;padding:12px;color:#fff;outline:none}
.modal input::placeholder{color:var(--txt-soft,#9fbdf0)}
.modal input:focus{border-color:var(--gold)}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--txt-soft,#cfe0ff);font-size:18px;cursor:pointer}

/* ---- dialog pesan (pengganti alert bawaan) ----
   Menumpang .modal supaya permukaan, bingkai, dan radiusnya ikut Website Theme
   tanpa disalin ulang. Yang ditambahkan di sini hanya isi kotaknya.

   z-index DI ATAS SEMUANYA (.modal-overlay 100, .prof-overlay 110). alert()
   bawaan digambar sistem di atas apa pun, jadi tidak ada yang pernah menyadari
   urutan lapisan ini; begitu diganti dialog HTML biasa, pesan yang dipicu dari
   dalam panel akun — misalnya menu "Rebate Turnover" — terbuka TEPAT DI BELAKANG
   panelnya dan pemain tidak melihat apa-apa. Terbukti di potret uji pertama. */
#pesanModal{z-index:200}
.msg-box{max-width:330px;gap:10px;text-align:center}
.msg-title{font-size:17px;font-weight:800;color:#fff}
body.theme-light .msg-title{color:var(--txt-strong,#123a8f)}
/* pre-line WAJIB: sebagian pesan memakai \n untuk memisahkan baris, persis
   seperti saat masih memakai alert(). Tanpa ini semuanya menyambung jadi satu
   paragraf dan nominal saldo menempel ke kalimat berikutnya. */
.msg-text{white-space:pre-line;font-size:13.5px;line-height:1.55;
  color:var(--txt-soft,#cfe0ff);margin:0}
body.theme-light .msg-text{color:#43608f}
.msg-ok{margin-top:4px;width:100%;cursor:pointer;padding:11px 16px;
  font-weight:800;font-size:14px;color:#fff;letter-spacing:.3px;
  background:linear-gradient(180deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));
  border:1px solid var(--btn-bc,#5a9bf5);border-radius:var(--btn-radius,12px);
  transition:filter .14s}
.msg-ok:hover{filter:brightness(1.08)}
.msg-ok:active{filter:brightness(.92)}

/* ================= MODAL DAFTAR ================= */
.reg-box{
  background:linear-gradient(180deg, var(--rf-bg1,#244a9e) 0%, var(--rf-bg2,#14306e) 100%);
  border:1px solid var(--rf-frame,#4d7ee0);border-radius:20px;
  width:100%;max-width:360px;position:relative;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  max-height:90vh;display:flex;flex-direction:column}
.reg-head{background:linear-gradient(345deg,var(--rf-head1,#005eff),var(--rf-head2,#006eff));position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:14px 12px}
/* tekstur pedang */
.reg-head::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/tex-swords.png") repeat;background-size:150px auto;opacity:.9}
/* overlay gloss — ikut gaya head (murni CSS) */
.reg-head::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--gloss-streaks);
  -webkit-mask-image:var(--gloss-fade);mask-image:var(--gloss-fade);
  opacity:.6;mix-blend-mode:screen}
.reg-logo{position:relative;z-index:2;height:44px;width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.reg-tabs{display:flex;gap:8px;padding:12px 14px 2px}
.reg-tab{flex:1;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);color:var(--txt-soft,#cfe0ff);
  font-weight:800;font-size:14px;padding:11px;border-radius:12px;cursor:pointer;transition:.15s}
.reg-tab:hover{filter:brightness(1.12)}
.reg-tab.active{background:linear-gradient(180deg,var(--rf-tabact1,#3d86ec),var(--rf-tabact2,#2764c9));color:#fff;
  border-color:var(--rf-frame,#6fa8ff);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.reg-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;min-height:0}
.reg-section{color:var(--rf-icon,#a9c8ff);font-weight:600;font-size:13px;letter-spacing:.5px;
  text-transform:uppercase;margin:4px 2px -2px;display:flex;align-items:center;gap:8px}
.reg-section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rf-fborder,#3d78d6),transparent)}
.reg-field{display:flex;align-items:stretch;border-radius:var(--rf-radius,999px);overflow:hidden;
  background:var(--rf-fbg,#14306e);
  border:2px solid var(--rf-fborder,#3d78d6)}
.reg-ic{flex:0 0 auto;width:46px;display:flex;align-items:center;justify-content:center;
  background:transparent;border-right:1px solid var(--rf-fborder,#3d78d6)}
.reg-svg{width:18px;height:18px;fill:none;stroke:var(--rf-icon,#a9c8ff);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reg-field input,.reg-sel{flex:1;min-width:0;border:0;outline:none;padding:12px 14px;font-size:13px;
  color:var(--rf-text,#e6eeff);font-weight:600;background:transparent;font-family:inherit}
.reg-field input::placeholder{color:var(--rf-ph,#9fb3e0);font-weight:600}
.reg-sel option{color:#0d1b3e}
/* tombol mata (lihat password) */
.reg-eye{flex:0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;color:var(--rf-icon,#a9c8ff);padding:0}
.reg-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reg-eye .eye-closed{display:none}
.reg-eye.on .eye-open{display:none}
.reg-eye.on .eye-closed{display:block}
.reg-eye:hover{color:#38a8ff}
.reg-field.sel{padding:0}
/* saat fokus: glow mengikuti radius kolom, warna biru terang */
.reg-field:focus-within{border-color:var(--rf-focus,#38a8ff);
  box-shadow:0 0 0 2px var(--rf-focus,#38a8ff), 0 0 12px var(--rf-focus,#38a8ff)}
.reg-field:focus-within .reg-ic{border-right-color:var(--rf-focus,#38a8ff)}
/* field belum diisi saat submit: ring merah */
.reg-field.reg-invalid{border-color:#ff5c5c !important;
  box-shadow:0 0 0 1px rgba(255,92,92,.6), 0 0 5px rgba(255,92,92,.3) !important}
.reg-field.reg-invalid .reg-ic{border-right-color:#ff4d4d}
/* toast pop up */
.reg-toast{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-14px);z-index:200;
  background:linear-gradient(180deg,#f0534b,#d63a31);color:#fff;font-weight:800;font-size:13px;
  padding:12px 20px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:90vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s}
.reg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* captcha */
.reg-cap{display:flex;align-items:center;gap:8px}
.reg-cap-img{flex:1;height:46px;border-radius:12px;overflow:hidden;position:relative;
  background:#111;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(60deg,rgba(255,255,255,.12) 0 1px,transparent 1px 9px);
  display:flex;align-items:center;justify-content:center;gap:2px}
.reg-cap-ch{display:inline-block;color:#f2f2f2;font-weight:900;font-size:26px;font-family:"Courier New",monospace;
  text-shadow:0 1px 2px #000}
.reg-cap-refresh{flex:0 0 auto;width:44px;height:46px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#3d86ec,#2764c9);color:#fff;display:flex;align-items:center;justify-content:center}
.reg-cap-refresh svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reg-cap-refresh:hover{filter:brightness(1.1)}
.reg-submit{margin:14px 14px 8px;position:relative;z-index:6;
  background:linear-gradient(180deg,var(--rf-btn1,#86ea41) 0%,var(--rf-btn2,#4bad14) 100%);color:#fff;font-weight:900;
  font-size:16px;border:0;border-bottom:4px solid #2f7d12;border-radius:12px;padding:14px;cursor:pointer;letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.3);-webkit-text-stroke:2px #256210;paint-order:stroke fill;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.reg-submit:active{transform:translateY(2px)}
.reg-altline{text-align:center;color:var(--txt-soft,#cfe0ff);font-size:13px;font-weight:600;margin:4px 14px 10px}
.reg-altline a{color:var(--gold,#ffd21e);font-weight:800;text-decoration:underline;cursor:pointer}
.reg-altline a:hover{filter:brightness(1.1)}
/* Close: sekunder, ikut preset (border palet tombol), transisi halus (tak "meloncat") */
.reg-close{margin:0 14px 14px;cursor:pointer;font-weight:800;font-size:14px;color:#fff;padding:12px;
  background:rgba(255,255,255,.12);border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;
  transition:background .16s ease, transform .1s ease}
.reg-close:hover{background:rgba(255,255,255,.2)}
.reg-close:active{transform:translateY(1px)}
body.theme-light .reg-close{background:rgba(0,0,0,.06);color:var(--txt-strong,#123a8f)}
body.theme-light .reg-close:hover{background:rgba(0,0,0,.1)}

/* ================= HEADER STATE LOGIN (user box) ================= */
/* setelah login: sembunyikan tombol JOIN NOW & caption hero
   (.hero-ribbon dicoret bersama pitanya, 7 Agustus 2026) */
body.logged-in #btnJoin,
body.logged-in .hero-caption{display:none}
/* setelah login: hapus rally, quick-row langsung di bawah head, hero di bawah quick-row */
body.logged-in .rally-strip{display:none}
body.logged-in main.wrap{display:flex;flex-direction:column}
body.logged-in .quick-row{order:-1;margin-top:0;margin-bottom:0}
body.logged-in .hero{order:0;margin-top:0;margin-bottom:18px}
/* setelah login: banner slider jadi satu gambar tunggal.
   Gambarnya diambil dari --hero-login-bg yang diisi cms-loader dengan banner
   PERTAMA dari back-office, supaya banner sebelum dan sesudah login sama.
   Nilai cadangan dipertahankan persis seperti semula: kalau back-office kosong
   atau tak terjangkau, tampilannya tidak berubah sedikit pun. */
body.logged-in .hslides > .hslide{opacity:0 !important;visibility:hidden}
body.logged-in .hdots{display:none}
body.logged-in .hslides::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--hero-login-bg, url("assets/slide-main.webp?v=9")) center top/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%);
          mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%)}
/* baris provider di slot (hanya login) */
.lg-provrows{display:none}
/* setelah login: Top Games jadi grid (tanpa angka & label TOP) */
body.logged-in #topGames{display:grid;grid-template-columns:repeat(var(--lg-cols,3),1fr);gap:var(--lg-gap,8px);overflow:visible;padding:0}
body.logged-in #topGames .rank-card{width:auto;padding-bottom:0;margin-left:0}
body.logged-in #topGames .rank-thumb{width:100%;height:auto;aspect-ratio:var(--game-ar);border-radius:var(--lg-radius,16px)}
body.logged-in #topGames .big-num,
body.logged-in #topGames .top-tag,
body.logged-in #topGames .rank-thumb .gname{display:none}
body.logged-in #topGames .rank-thumb::after{content:"🤍";position:absolute;top:5px;right:5px;z-index:4;
  display:var(--lg-heart-disp,flex);width:var(--lg-heart,26px);height:var(--lg-heart,26px);
  border-radius:50%;background:rgba(0,0,0,.45);align-items:center;justify-content:center;
  font-size:calc(var(--lg-heart,26px) * .48);-webkit-mask:none;mask:none}
@media(min-width:860px){ body.logged-in #topGames{grid-template-columns:repeat(var(--lg-cols-d,6),1fr)} }
/* Gaya .hero-depo / .hd-in DIHAPUS 7 Agustus 2026 bersama tombolnya (Hero.tsx):
   tombol DEPOSIT hijau di kiri-bawah hero yang muncul setelah login. Hero kini
   memang kosong bagi pemain yang sudah login — #btnJoin tetap disembunyikan oleh
   aturan body.logged-in di atas. */
/* tombol quick-row khusus login (Deposit/Withdraw) */
.quick-row .lg-only{display:none}
body.logged-in .quick-row .lg-only{display:flex}
/* setelah login (bukan saat halaman overlay): sisakan Top Games + Provider rows */
body.logged-in .block{display:none}
body.logged-in:not(.pp-open):not(.tg-open):not(.lc-open):not(.sb-open):not(.lv-open):not(.promo-open) #topGamesBlock,
body.logged-in:not(.pp-open):not(.tg-open):not(.lc-open):not(.sb-open):not(.lv-open):not(.promo-open) #slotProvBlock{display:block}
.user-box{display:flex;align-items:center;gap:8px}
.ub-bal{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--ub-bg1,#0e3c8f),var(--ub-bg2,#0a2f70));
  border:1px solid var(--ub-border,#4d7ee0);border-radius:12px;padding:6px 6px 6px 12px;cursor:pointer;color:#fff}
.ub-bal:hover{filter:brightness(1.1)}
.ub-amt{font-weight:800;font-size:14px;white-space:nowrap}
.ub-plus{width:24px;height:24px;border-radius:8px;background:linear-gradient(180deg,#6ee02a,#3ea60c);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#fff;line-height:1}
.ub-meta{display:flex;flex-direction:column;line-height:1;max-width:96px}
.ub-id{font-weight:800;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-avatar{width:38px;height:38px;border-radius:12px;cursor:pointer;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));
  border:1px solid var(--btn-bc,#005eff);display:flex;align-items:center;justify-content:center;padding:0}
.ub-avatar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ub-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ub-avatar:hover{filter:brightness(1.1)}

/* ================= MODAL DEPOSIT ================= */
.depo-box{background:var(--surf-bg,#1d3788);border-radius:16px;
  width:100%;max-width:380px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.55);
  max-height:92vh;overflow-y:auto;padding:16px}
.depo-box *{font-weight:600}
.depo-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.depo-tabs{display:flex;gap:8px;flex:1}
.depo-tab{background:rgba(255,255,255,.12);border:0;color:var(--txt-soft,#cfe0ff);font-size:14px;
  padding:9px 18px;border-radius:12px;cursor:pointer}
.depo-tab.active{background:var(--surf-tabact,#3469de);color:var(--tab-ac,#ffd21e);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.depo-x{width:40px;height:40px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;font-size:16px;
  background:rgba(255,255,255,.14);color:#fff}
.depo-x:hover{background:rgba(255,255,255,.26)}
.depo-bal-label{color:var(--txt-soft,#cfe0ff);font-size:13px;display:flex;align-items:center;gap:6px}
.depo-eye{cursor:pointer;opacity:.85}
.depo-bal{color:#fff;font-size:30px;margin:2px 0 16px}
.depo-pm-label{color:var(--txt-soft,#cfe0ff);font-size:13px;margin-bottom:8px}
.depo-methods{display:flex;flex-direction:column;gap:10px}
.depo-method{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px}
.depo-logo{flex:0 0 auto;width:48px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.depo-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.depo-info{flex:1;min-width:0}
.depo-name{font-size:14px;color:#fff}
.depo-sub{font-size:12px;color:var(--txt-soft,#bcd2ff);margin-top:2px}
.depo-add{width:34px;height:34px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;font-size:18px;color:#fff;
  background:linear-gradient(180deg,#6ee02a,#3ea60c);display:flex;align-items:center;justify-content:center}
.depo-add:hover{filter:brightness(1.08)}
.depo-showall,.depo-history{width:100%;margin-top:10px;border:0;border-radius:12px;cursor:pointer;
  font-size:14px;padding:13px;color:#fff;background:rgba(255,255,255,.14)}
.depo-showall{background:linear-gradient(181deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9))}
.depo-showall:hover,.depo-history:hover{filter:brightness(1.1)}
.depo-hidden{display:none}
/* form bank transfer di dalam modal deposit */
.depo-back{background:rgba(255,255,255,.14);border:0;color:#fff;font-weight:800;font-size:13px;
  padding:8px 14px;border-radius:12px;cursor:pointer;margin-bottom:12px}
.depo-back:hover{background:rgba(255,255,255,.26)}
.depo-flabel{display:block;color:#fff;font-weight:800;font-size:13px;margin:12px 0 6px}
/* field deposit/withdraw: samakan dgn kolom "Rp" (.wd-amtrow) — dark, themed */
.depo-select,.depo-input{width:100%;background:var(--ub-bg1,#0e3c8f);border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;
  padding:13px 14px;font-size:14px;color:#fff;font-weight:600;outline:none;font-family:inherit}
.depo-select{-webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fbdf0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.depo-select:focus,.depo-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,30,.30)}
.depo-select:focus-visible,.depo-input:focus-visible{outline:none}   /* hindari cincin ganda dgn :focus-visible global */
.depo-input::placeholder{color:var(--txt-soft,#9fbdf0);font-weight:600}
.depo-note{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:12px 14px;color:#fff;font-weight:700;font-size:12px;line-height:1.5;margin-top:14px}
.depo-confirm{width:100%;margin-top:16px;background:linear-gradient(180deg,#6fc72e 0%,#54ad26 50%,#43901c 100%);color:#fff;
  font-weight:800;font-size:15px;border:0;border-bottom:4px solid #2f7d12;border-radius:12px;padding:13px;cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.28);-webkit-text-stroke:.5px #256210;paint-order:stroke fill}
.depo-confirm:active{transform:translateY(2px)}
.depo-confirm:hover{filter:brightness(1.06)}
/* pilihan cepat jumlah deposit */
.depo-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 4px}
.depo-amt{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);color:var(--txt-soft,#dfe9ff);
  font-weight:800;font-size:13px;padding:12px 6px;border-radius:12px;cursor:pointer;transition:.12s}
.depo-amt:hover{background:rgba(255,255,255,.14)}
.depo-amt.active{background:linear-gradient(180deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));color:#fff;border-color:var(--btn-bc,#6fa8ff)}
/* qris hasil */
.qris-wrap{text-align:center;margin-top:8px}
.qris-img{width:220px;max-width:80%;aspect-ratio:1/1;margin:6px auto 14px;background:#fff;border-radius:12px;
  padding:10px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.qris-img svg{display:block;width:100%;height:100%}
.qris-timer{color:#fff;font-weight:700;font-size:14px}
.qris-timer b{color:var(--gold);font-size:18px;font-variant-numeric:tabular-nums}
.qris-amt{color:#fff;font-weight:700;font-size:14px;margin-top:6px}
.qris-amt b{color:#7dffa6;font-size:16px}
.qris-hint{color:var(--txt-soft,#bcd2ff);font-size:12px;margin-top:12px;line-height:1.5}

/* ================= OVERLAY PENCARIAN ================= */
.search-overlay{position:fixed;left:0;right:0;bottom:0;top:120px;z-index:29;display:none;flex-direction:column;
  background:linear-gradient(180deg,var(--surf-p1,#123f9c),var(--surf-p2,#0a2354));padding:14px;overflow:hidden}
.search-overlay.show{display:flex;animation:searchFade .2s ease}
@keyframes searchFade{from{opacity:0}to{opacity:1}}
.search-overlay.show .search-bar{animation:searchDrop .28s ease}
@keyframes searchDrop{from{transform:translateY(-18px);opacity:0}to{transform:translateY(0);opacity:1}}
.search-bar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:0 6px 0 14px;
  max-width:640px;width:100%;margin:0 auto}
.search-ic{flex:0 0 auto;display:flex;align-items:center;color:#2764c9}
.search-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search-bar input{flex:1;min-width:0;border:0;outline:none;padding:14px 8px;font-size:15px;color:#0d1b3e;font-weight:600;background:transparent;font-family:inherit}
.search-bar input::placeholder{color:#8aa0c0}
.search-close{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;font-size:16px;
  background:#eef2fa;color:#2764c9}
.search-close:hover{background:#dde6f6}
.search-results{max-width:640px;width:100%;margin:12px auto 0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.sr-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:11px 14px;cursor:pointer;transition:.12s}
.sr-item:hover{background:rgba(255,255,255,.18)}
.sr-emoji{font-size:22px;flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);border-radius:12px}
.sr-logo{flex:0 0 46px;width:46px;height:24px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.sr-name{flex:1;color:#fff;font-weight:700;font-size:14px}
.sr-type{color:var(--txt-soft,#bcd2ff);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.sr-empty{color:var(--txt-soft,#bcd2ff);text-align:center;padding:30px 10px;font-size:14px}

/* ================= PANEL PROFIL (drawer avatar) ================= */
.prof-overlay{position:fixed;inset:0;background:#000000aa;display:none;z-index:110;justify-content:flex-end}
.prof-overlay.show{display:flex}
/* tombol akses panel akun mengambang di tepi kanan (bisa juga swipe kiri) */
.side-access{position:fixed;right:0;top:42%;transform:translateY(-50%);z-index:112;
  width:42px;height:122px;padding:0;border:0;background:transparent;cursor:grab;
  display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(-2px 4px 7px rgba(0,0,0,.42))}
.side-access:active{cursor:grabbing}
/* Warnanya IKUT TEMA. Kuning #ffd21e dulu ditulis mati, jadi tab ini tetap
   kuning di tema apa pun — satu-satunya benda kuning di situs bertema ungu.
   Panahnya memakai --tab-ac-ink, bukan #171717 tetap: nilainya sudah dihitung
   navTabs.ts jadi gelap di atas aksen terang dan putih di atas aksen gelap.
   Dipatok gelap, panahnya lenyap begitu operator memilih aksen tua. */
.side-access .sa-shape{position:absolute;inset:0;width:100%;height:100%;fill:var(--tab-ac,#ffd21e)}
.side-access .sa-chev2{position:relative;width:24px;height:24px;margin-left:7px;stroke:var(--tab-ac-ink,#171717)}
.side-access:hover .sa-shape{fill:var(--tab-ac-hi,#ffdb3d)}
/* prof panel saat BELUM login: sembunyikan avatar/saldo/aksi/logout, ganti login+daftar */
.prof-guest{display:none}
body:not(.logged-in) .prof-guest{display:block;margin:6px 0 4px}
body:not(.logged-in) .prof-top,
body:not(.logged-in) .prof-bal2,
body:not(.logged-in) .prof-actions,
body:not(.logged-in) #profLogout{display:none}
/* banner hero (posisi "MONSTER HUNT") — ikut warna preset */
.pg-hero{position:relative;overflow:visible;isolation:isolate;border-radius:16px;padding:15px 14px;margin:8px 0 12px;min-height:96px;
  display:flex;align-items:center;
  background:linear-gradient(155deg,var(--btn-c1,#3a8bff),var(--btn-c2,#1650b8));
  border:1px solid var(--btn-bc,#1650b8);box-shadow:0 4px 12px rgba(0,0,0,.32)}
/* tekstur pedang (seperti prov-row) */
.pg-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:url("assets/tex-swords.png") repeat;background-size:160px auto;opacity:.5;
  -webkit-mask:linear-gradient(90deg,transparent 16%,#000 58%);mask:linear-gradient(90deg,transparent 16%,#000 58%)}
/* efek shine gloss (seperti head, murni CSS) */
.pg-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:var(--gloss-streaks);
  -webkit-mask-image:var(--gloss-fade);mask-image:var(--gloss-fade);
  opacity:.5;mix-blend-mode:screen}
.pg-hero-txt{position:relative;z-index:2;max-width:54%;font-weight:600;font-size:16px;line-height:1.2;
  color:var(--tab-ac,#ffd21e);
  text-shadow:0 2px 3px rgba(0,0,0,.35)}
/* Logo ini position:absolute, jadi ukuran teks TIDAK memengaruhi letaknya sama
   sekali. Yang bikin terlihat "terlalu ke kanan" adalah right:-8px — logonya
   menonjol 7px keluar tepi panel. Sekarang ditarik masuk (right:4px) dan lebarnya
   ikut mengecil di layar sempit supaya tidak menyenggol teks di HP kecil. */
.pg-hero-img{position:absolute;right:4px;top:50%;transform:translateY(-54%);
  width:clamp(112px,34vw,138px);height:auto;z-index:3;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));pointer-events:none}
/* dua tombol slim (gaya pill login/daftar header) */
.pg-cards{display:flex;gap:10px}
.pg-cards .pill{flex:1;padding:12px;font-size:14px;border-radius:var(--btn-radius,12px)}
/* list 5 nav (logo nav tab) + pembatas */
/* Jarak dirapatkan sedikit (bukan diperkecil hurufnya) supaya isi panel muat
   lebih tinggi di layar pendek dan LOGOUT tidak terdorong keluar. Tinggi tiap
   baris menu tetap >=40px agar masih nyaman disentuh. */
.pg-nav{margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16)}
.pgn-item{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;
  padding:9px 4px;color:#fff;font-weight:700;font-size:14px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.09)}
.pgn-item:last-child{border-bottom:0}
.pgn-item:hover{color:var(--tab-ac,#ffd21e)}
.pgn-item span{flex:1}
.pgn-item::after{content:"›";color:rgba(255,255,255,.45);font-size:19px;font-weight:800}
.pgn-ic{width:24px;height:24px;object-fit:contain;flex:0 0 auto;display:block}
.pgn-svg{color:currentColor;stroke:currentColor}
body.theme-light .pg-nav{border-top-color:rgba(0,0,0,.14)}
body.theme-light .pgn-item{color:var(--txt-strong,#123a8f);border-bottom-color:rgba(0,0,0,.08)}
body.theme-light .pgn-item::after{color:rgba(0,0,0,.35)}
/* baris toggle mode terang/gelap */
.pgn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 4px;color:#fff;font-weight:700;font-size:14px}
body.theme-light .pgn-row{color:var(--txt-strong,#123a8f)}
.prof-panel{width:min(340px,86vw);height:100%;overflow-y:auto;position:relative;
  background:url("assets/tex1.png") repeat,
    linear-gradient(180deg,var(--prof-bg1,var(--surf-p1,#2f6fe0)) 0%,var(--prof-bg2,var(--surf-p2,#14357f)) 100%);
  background-size:200px auto, auto;
  /* Padding atas dulu 50px untuk memberi ruang tombol ✕ di pojok kanan atas.
     Tombol itu sudah dihapus, jadi sisanya cuma pita kosong yang mendorong
     seluruh isi panel turun sampai LOGOUT terpotong di bawah. */
  padding:14px 14px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:-12px 0 40px rgba(0,0,0,.5);animation:profIn .25s ease}
/* light mode: tekstur titik (dots) halus + bg terang */
body.theme-light .prof-panel{
  background:radial-gradient(circle,rgba(18,48,120,.14) 1.5px,transparent 1.7px) 0 0/20px 20px,
    linear-gradient(180deg,var(--prof-bg1,#eef4ff) 0%,var(--prof-bg2,#dce8ff) 100%)}
/* teks panel di light mode */
body.theme-light .prof-name,body.theme-light .prof-bal2,body.theme-light .prof-idrow b{color:#12275e}
body.theme-light .prof-idrow{color:#43608f}
body.theme-light .prof-copy{color:#43608f}
@keyframes profIn{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
/* Kembaran profIn untuk panel yang menempel di KIRI (desktop) — lihat blok
   @media(min-width:860px) di bagian bawah berkas ini. */
@keyframes profInKiri{from{transform:translateX(-30px);opacity:.4}to{transform:translateX(0);opacity:1}}
/* .prof-x dihapus bersama tombol ✕ di panel profil. */
/* header: avatar + nama + ID */
.prof-top{display:flex;align-items:center;gap:12px;padding:2px 2px 14px}
.prof-ava{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2)}
.prof-ava img{width:100%;height:100%;object-fit:cover;display:block}
.prof-name{font-weight:900;font-size:20px;color:#fff;line-height:1.1;word-break:break-all}
.prof-idrow{display:flex;align-items:center;gap:6px;color:var(--txt-soft,#bcd2ff);font-size:13px;font-weight:700;margin-top:3px}
.prof-idrow b{color:#fff;font-weight:800}
.prof-copy{background:none;border:0;cursor:pointer;padding:2px;display:flex;color:var(--txt-soft,#bcd2ff)}
.prof-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prof-copy:hover{color:#fff}
/* saldo besar */
.prof-bal2{font-weight:900;font-size:26px;color:#fff;margin:2px 2px 10px}
/* tombol penarikan / deposit */
.prof-actions{display:flex;gap:12px;margin-bottom:12px}
/* Penarikan/Deposit: pakai style .qbtn (sama dgn qWithdraw/qDeposit) */
.prof-actions .qbtn{flex:1;padding:12px 8px;font-size:14px}
/* grid menu */
.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* kotak menu: pakai style tombol tema + tekstur pedang */
.pg-item{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 5px 8px;cursor:pointer;transition:.12s;
  border-radius:var(--btn-radius,12px);
  border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  border-bottom:var(--btn-bb,5px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1) 45%,var(--btn-c2,#71B9FF) 100%)}
.pg-item::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:url("assets/tex-swords.png") repeat;background-size:120px auto;opacity:.16;
  -webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask:linear-gradient(180deg,#000,rgba(0,0,0,.35))}
.pg-item:hover{filter:brightness(1.07);transform:translateY(-2px)}
.pg-ic{position:relative;z-index:1;font-size:28px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
img.pg-ic{width:40px;height:40px;object-fit:contain;-webkit-text-stroke:0}
.pg-lbl{position:relative;z-index:1;font-size:11px;font-weight:600;color:#fff;text-align:center;line-height:1.15;
  -webkit-text-stroke:0;text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* logout */
/* logout: sekunder yg ikut preset (border palet tombol), merah hanya saat hover */
/* Di layar pendek isi panel lebih tinggi dari layarnya, jadi LOGOUT ikut terdorong
   keluar. position:sticky menempelkannya di dasar panel HANYA saat isinya meluap —
   kalau muat, ia tetap mengalir normal seperti biasa. Latarnya dibuat pekat (bukan
   rgba .22) supaya menu yang tergulir di belakangnya tidak menembus. */
.prof-logout{position:sticky;bottom:0;z-index:2;
  margin-top:12px;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  background:#1a1f2b;color:#fff;font-weight:800;font-size:14px;transition:.14s;
  border-radius:var(--btn-radius,12px);
  border-top:var(--btn-bt,1px) solid var(--btn-bc,#5a9bf5);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#5a9bf5);
  border-bottom:var(--btn-bb,4px) solid var(--btn-bc,#5a9bf5);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#5a9bf5);
  padding:12px}
.prof-logout:hover{background:linear-gradient(180deg,#e35b53,#c0392b);border-color:#a5271d;color:#fff}
body.theme-light .prof-logout{background:#e6eeff;color:var(--txt-strong,#123a8f)}
body.theme-light .prof-logout:hover{color:#fff}
/* Bibir timbul 3D di bawah LOGOUT dimatikan (7 Agustus 2026), sama seperti yang
   sudah dilakukan pada LOG IN & DAFTAR — lihat blok "tampilan timbul" di sekitar
   baris 427. Dipakai --btn-bt, bukan angka mati: kalau tebal garis diubah dari
   setelan back-office, sisi bawah ikut sama dan bibirnya tidak muncul lagi.
   HARUS di sini, bukan disisipkan ke blok baris 427 itu: kekhususan .prof-logout
   di sana sama persis dengan aturan aslinya di atas, dan aturan atas letaknya
   lebih akhir sehingga border-bottom-nya tetap menang. */
.prof-logout{border-bottom-width:var(--btn-bt,1px);box-shadow:none}
.pbtn-ic{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
/* .prof-settings dihapus bersama tombol "Pengaturan Tampilan". */

/* ================= SIDEBAR DRAWER ================= */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;
  transition:.25s;z-index:70}
.drawer-overlay.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;height:100%;width:280px;max-width:82vw;z-index:80;
  background:linear-gradient(180deg,#173f8f,#0e2c66);
  box-shadow:6px 0 26px rgba(0,0,0,.5);transform:translateX(-100%);transition:transform .28s ease;
  display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid #ffffff22;font-weight:900;font-size:16px}
.drawer-close{background:none;border:0;color:var(--txt-soft,#cfe0ff);font-size:18px;cursor:pointer}
.drawer-body{padding:12px}
/* folder pengelompokan menu */
.folder{margin-bottom:10px;border:1px solid #ffffff1f;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03)}
.folder-head{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:0;color:#fff;font-weight:900;font-size:14px;padding:14px;cursor:pointer}
.folder-head .fchev{transition:.25s;color:var(--txt-soft,#9fbdf0)}
.folder.open .folder-head .fchev{transform:rotate(90deg)}
.folder-body{display:none;padding:8px}
.folder.open .folder-body{display:block}
.folder-body .drawer-item{margin-top:8px}
.folder-body .drawer-item:first-child{margin-top:0}
.drawer-item{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.06);border:1px solid #ffffff1f;color:#fff;font-weight:700;font-size:14px;
  padding:14px;border-radius:12px;cursor:pointer;transition:.15s}
.drawer-item:hover{background:rgba(255,255,255,.12)}
.drawer-item .chev{transition:.25s;color:var(--txt-soft,#9fbdf0)}
.drawer-item.active .chev{transform:rotate(90deg)}
.theme-panel{max-height:0;overflow:hidden;transition:max-height .35s ease;margin-top:6px}
.theme-panel.open{max-height:calc(100vh - 150px);overflow-y:auto}
.theme-panel::-webkit-scrollbar{width:6px}
.theme-panel::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:8px}
.color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid #ffffff14;border-radius:12px;
  padding:11px 14px;margin-top:10px;font-size:13px;font-weight:600;cursor:pointer}
.color-row input[type=color]{-webkit-appearance:none;appearance:none;width:44px;height:30px;border:0;
  border-radius:12px;background:none;cursor:pointer;padding:0}
.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-row input[type=color]::-webkit-color-swatch{border:2px solid #ffffff55;border-radius:12px}
/* ===== preset swatches ===== */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.preset{border:2px solid #ffffff1f;border-radius:12px;overflow:hidden;cursor:pointer;padding:0;
  background:rgba(255,255,255,.05);transition:.15s;text-align:center}
.preset:hover{border-color:#ffffff55;transform:translateY(-2px)}
.preset.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,30,.35)}
.preset .sw{height:40px;display:block}
.preset .dots{display:flex;gap:5px;justify-content:center;padding:6px 0 4px}
.preset .dots i{width:11px;height:11px;border-radius:50%;display:block;border:1px solid #ffffff66}
.preset .pname{display:block;font-size:12px;font-weight:700;color:#fff;padding:2px 4px 8px}

.group-label{margin:16px 4px 2px;font-size:12px;font-weight:800;color:var(--txt-soft,#9fbdf0);text-transform:uppercase;letter-spacing:.5px}

/* ===== upload gambar game ===== */
.rank-thumb.has-img .emoji{display:none}
.prov-chip.has-img .prov-name{opacity:0}
/* fade halus saat gambar kustom masuk (tak "meloncat") */
.has-img{animation:imgFade .35s ease}
@keyframes imgFade{from{opacity:.5}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.has-img{animation:none}}
.prov-chip .prov-name{position:relative;z-index:1}
.img-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #ffffff14;
  border-radius:12px;margin-top:8px;background:rgba(255,255,255,.05)}
.img-thumb{width:36px;height:36px;flex:0 0 36px;border-radius:8px;border:1px solid #ffffff33;
  background:#ffffff1a center/cover no-repeat}
.img-name{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-up{background:rgba(87,200,26,.3);border:1px solid #57c81a;color:#fff;font-size:12px;font-weight:700;
  padding:6px 10px;border-radius:12px;cursor:pointer}
.img-up:hover{background:rgba(87,200,26,.5)}
.img-clear{background:rgba(255,80,90,.22);border:1px solid #ff505a;color:#fff;font-size:12px;
  padding:6px 9px;border-radius:12px;cursor:pointer}
.img-clear:hover{background:rgba(255,80,90,.4)}
.slide-cap{flex:1;min-width:0;background:#0e3c8f;border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;
  color:#fff;font-size:12px;padding:6px 8px;outline:none}
.slide-cap:focus{border-color:var(--gold)}
/* kontrol WONDERPOT */
.wp-modes{display:flex;gap:6px;margin-top:8px}
.wp-modes button{flex:1;background:rgba(255,255,255,.06);border:1px solid #ffffff22;color:#fff;
  font-size:12px;font-weight:700;padding:8px;border-radius:12px;cursor:pointer}
.wp-modes button.active{background:#0e3c8f;border-color:var(--gold);color:var(--gold)}
.wp-in{background:#0e3c8f;border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;color:#fff;font-size:12px;
  padding:6px 8px;outline:none;max-width:150px}
.wp-in:focus{border-color:var(--gold)}
.wp-textarea{width:100%;background:#0e3c8f;border:1px solid var(--btn-bc,#5a9bf5);border-radius:12px;color:#fff;
  font-size:12px;padding:8px;outline:none;resize:vertical;margin-top:8px;font-family:inherit}
.wp-textarea:focus{border-color:var(--gold)}
.range-row{background:rgba(255,255,255,.05);border:1px solid #ffffff14;border-radius:12px;
  padding:11px 14px;margin-top:14px}
.range-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px}
.range-top b{color:var(--gold)}
.range-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:8px;
  background:rgba(255,255,255,.2);outline:none;cursor:pointer}
.range-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--green);cursor:pointer}
.range-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--green);cursor:pointer}
.reset-btn{width:100%;margin-top:12px;background:rgba(255,255,255,.08);border:1px solid #ffffff22;
  color:#fff;font-weight:700;font-size:13px;padding:11px;border-radius:12px;cursor:pointer}
.reset-btn:hover{background:rgba(255,255,255,.16)}

/* =================================================== */
/* ===============  DESKTOP MODE  ===================== */
/* =================================================== */
@media(min-width:860px){
  .app-banner{display:none}                 /* app banner hanya untuk mobile */
  .logo img{height:clamp(34px,3.4vw,44px)}   /* header ~50% lebih pendek */

  /* header jadi satu baris: logo | kotak cari | tombol */
  .head-inner{flex-direction:row;flex-wrap:nowrap;align-items:center;padding:5px 20px;gap:20px}
  .head-top{display:contents}
  .burger{order:0}
  .logo{order:1}
  /* Bar tab nav DISEMBUNYIKAN di desktop — menu yang sama sudah ada di panel kanan.
     WAJIB display:none, JANGAN dihapus dari DOM: menu panel kanan bekerja dengan
     memanggil #tabs3 .t3[data-page].click(), jadi elemennya harus tetap ada. */
  .tabs3-wrap{display:none}
  .tabs3-next{display:none!important}
  /* Kotak cari didorong ke KANAN, menempel di kiri tombol LOG IN — bukan lagi
     melebar dari sebelah logo. Dua hal harus berubah bersama:
       - .hsearch berhenti melar (flex:0 0 auto) dan yang mengambil margin-left:
         auto sekarang DIA, sehingga sisa ruang jatuh SEBELUM kotak cari;
       - .head-btns melepas margin-left:auto miliknya. Kalau tidak, ada dua
         margin auto dan sisa ruang dibagi dua — kotak cari berhenti di tengah,
         tidak menempel ke tombol. Ditulis .head-top .head-btns karena aturan
         aslinya sekhusus itu juga, dan kekhususan mengalahkan urutan.
     Lebarnya dipatok var(--hs-max): dulu melar sampai 560px, sekarang 300px
     dan dibatasi 34vw di layar sempit. Tingginya SENGAJA tetap 40px supaya
     tetap sejajar dengan tombol LOG IN di sebelahnya.
     Dropdown hasil cari ikut pindah sendiri: headSearch.ts menulis --hs-left /
     --hs-w dari getBoundingClientRect() kotak ini, bukan dari nilai tetap. */
  .hsearch{order:2;display:flex;flex:0 0 auto;min-width:0;
    width:var(--hs-max,300px);max-width:34vw;margin-left:auto}
  .head-top .head-btns{order:3;margin-left:0}
  /* flex:1 (basis 0) memaksa SEMUA tab selebar sama persis, padahal isinya beda:
     "Sportsbook" butuh 113px tapi hanya dapat 111 -> teksnya meluber menabrak ikon
     tab sebelahnya, sementara "Live"/"Togel" yang pendek jadi kebanyakan ruang.
     flex:1 0 auto = lebar mulai dari ISI (tak pernah sempit), sisa ruang dibagi
     RATA ke tiap tab, jadi jarak antar label seragam. Shrink 0 supaya tak
     terjepit lagi saat header sempit. */
  .t3{flex:1 0 auto;padding:8px 13px;font-size:14px}
  .pill{padding:11px 22px;font-size:14px}

  /* hero besar */
  .hero{margin:10px 0 26px;--hero-h:clamp(320px,40vw,400px)}
  .hslides{border-radius:20px}
  .hdots{bottom:70px}
  .hero-caption{font-size:28px;margin:-4px 0 18px}
  .join-now{width:auto;min-width:340px;font-size:26px;padding:20px 70px}

  /* quick row: tombol terpusat 640px, background tetap full lebar layar */
  .quick-row{gap:14px;max-width:640px;margin-left:auto;margin-right:auto;background:transparent;padding:5px 14px}
  .quick-row::after{content:"";position:absolute;top:0;bottom:0;left:50%;
    margin-left:calc(var(--vw,100vw) / -2);width:var(--vw,100vw);
    z-index:-1;pointer-events:none;
    background:var(--qr-bg,linear-gradient(180deg,#2a7de9 0%,#1f5fcf 45%,#123f9c 100%))}
  .qbtn{padding:9px 12px;font-size:14px}

  /* grid provider 6 kolom */
  .rank-thumb .emoji{font-size:64px}
  .rank-thumb .gname{font-size:12px}
  .block-head h2{font-size:22px}
  .prov-grid{grid-template-columns:repeat(6,1fr)}
}

@media(min-width:1240px){
  .hero{--hero-h:420px}
  .chars{font-size:180px}
}

/* ===== nav tabs di SEMUA HP/tablet (<860px): tampil ~3, sisanya digeser ===== */
@media(max-width:859px){
  .tabs3{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .tabs3::-webkit-scrollbar{display:none}
  .tabs3 .t3{flex:0 0 auto;scroll-snap-align:start;font-size:13px;padding:13px 14px;gap:7px;-webkit-text-stroke-width:1px}
  .tabs3 .t3-ic{width:21px}
  .tabs3 .t3-svg{width:21px;height:21px}
  .tabs3.hint-scroll{-webkit-mask-image:linear-gradient(90deg,#000 87%,rgba(0,0,0,.2));
    mask-image:linear-gradient(90deg,#000 87%,rgba(0,0,0,.2))}
}

/* ===== layar sempit (≤400px) ===== */
@media(max-width:400px){
  .head-inner{padding:10px 10px}
  .head-top{gap:8px}
  .logo img{height:clamp(36px,11vw,48px)}
  .head-btns{gap:6px}
  .head-btns .pill{padding:8px 14px;font-size:12px}
  .tabs3 .t3{font-size:13px;padding:13px 11px;gap:6px}   /* layar sangat kecil */
  .quick-row{gap:8px}
  .qbtn{font-size:12px}
  .qbtn .qi-img{height:20px}
}

/* ================= HALAMAN SPORTSBOOK & LIVE ================= */
.page-overlay.sb-page,.page-overlay.lv-page,.page-overlay.promo-page{margin-top:0}

/* ================= HALAMAN PROMO (kartu + thumbnail) ================= */
.promo-page-list{display:flex;flex-direction:column;gap:14px}
.promo-card2{border-radius:16px;overflow:hidden;border:1px solid var(--btn-bc,#5a9bf5);
  background:linear-gradient(180deg,var(--surf-p1,#2a6fe0),var(--surf-p2,#123f9c));box-shadow:0 6px 16px rgba(0,0,0,.35)}
/* area thumbnail (isi <img>, atau placeholder gradient bila belum ada) */
.promo-thumb{width:100%;aspect-ratio:16/6.4;overflow:hidden;background:var(--surf-p2,#0a1730);position:relative}
/* skeleton shimmer: tampil selama gambar (lazy) belum termuat, lalu tertutup gambar */
.promo-thumb::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.04) 75%);
  background-size:220% 100%;animation:skelShimmer 1.4s linear infinite}
.promo-thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.promo-thumb-ph{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
  background:linear-gradient(120deg,var(--btn-c1,#4E93F1),var(--btn-c2,#2764c9))}
@keyframes skelShimmer{0%{background-position:220% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion: reduce){.promo-thumb::after,.skeleton::after{animation:none}}
/* util skeleton reusable */
.skeleton{position:relative;overflow:hidden;background:var(--surf-p2,#12233f)}
.skeleton::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.04) 75%);
  background-size:220% 100%;animation:skelShimmer 1.4s linear infinite}
.promo-thumb-ph::before{content:"";position:absolute;inset:0;background:url("assets/tex-swords.png") repeat;background-size:120px auto;opacity:.12}
.promo-thumb-ph span{position:relative;z-index:1;font-weight:900;font-size:17px;color:#fff;line-height:1.25;
  text-shadow:0 2px 6px rgba(0,0,0,.5);-webkit-text-stroke:.5px rgba(0,0,0,.35);paint-order:stroke fill}
/* footer: ikon + judul + tombol status */
.promo-foot{display:flex;align-items:center;gap:10px;padding:11px 12px}
.promo-foot-ic{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:rgba(255,255,255,.12)}
.promo-foot-img{width:30px;height:30px;object-fit:contain}
.promo-foot-title{flex:1;min-width:0;font-weight:800;font-size:14px;color:#fff;line-height:1.2}
.promo-foot-btn{flex:0 0 auto;cursor:pointer;font-weight:800;font-size:13px;color:#173a05;
  background:linear-gradient(180deg,#a7e256,#7cc23a);border:0;border-bottom:3px solid #5a9c22;border-radius:12px;padding:9px 16px}
.promo-foot-btn:active{transform:translateY(1px)}
.promo-foot-btn:hover{filter:brightness(1.05)}
.sb-bar,.lv-bar{display:flex;gap:10px;margin:0 -14px 16px;padding:8px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;background:var(--surf-bar,rgb(28,51,126));
  overflow-x:auto;scrollbar-width:none}
.sb-bar::-webkit-scrollbar,.lv-bar::-webkit-scrollbar{display:none}
/* tombol kategori sb/lv memakai style .qbtn (sama dgn tg/lc) */
.sb-bar .qbtn,.lv-bar .qbtn{flex:1;padding:10px 12px;white-space:nowrap}

/* Sportsbook - kartu pertandingan */
.sb-list{display:flex;flex-direction:column;gap:10px}
.sb-match{background:linear-gradient(180deg,var(--surf-card1,#1a3f8a),var(--surf-card2,#12275e));
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px}
.sb-league{font-size:12px;color:#a9c0ea;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.sb-livedot{width:7px;height:7px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 6px #ff4d4f;animation:sbBlink 1s infinite}
@keyframes sbBlink{50%{opacity:.35}}
.sb-teams{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.sb-team{display:flex;justify-content:space-between;font-weight:800;font-size:14px;color:#fff}
.sb-team .sb-sc{color:var(--tab-ac,#ffd21e)}
.sb-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sb-odd{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 4px;cursor:pointer;color:var(--txt-soft,#cfe0ff);font-weight:700;transition:.15s}
.sb-odd span{font-size:12px;opacity:.7}
.sb-odd b{font-size:15px;color:#fff}
.sb-odd:hover{background:var(--tab-ah,rgba(255,255,255,.14));border-color:var(--tab-ac,#ffd21e)}
.sb-odd:hover b{color:var(--tab-ac,#ffd21e)}
body.theme-light .sb-team,body.theme-light .sb-odd b{color:#12275e}
body.theme-light .sb-league{color:#5a74a8}
body.theme-light .sb-odd{color:#3a4d7a;background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}

/* Live - grid kartu streaming */
.lv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lv-card{background:linear-gradient(180deg,var(--surf-card1,#1a3f8a),var(--surf-card2,#12275e));
  border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s}
.lv-card:hover{transform:translateY(-2px);filter:brightness(1.05)}
.lv-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--btn-c1,#4a90ff),var(--btn-c2,#2064d8))}
.lv-badge{position:absolute;top:7px;left:7px;background:#ff2f3a;color:#fff;font-size:10px;font-weight:800;
  padding:3px 8px 3px 6px;border-radius:8px;display:flex;align-items:center;gap:5px}
.lv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:sbBlink 1s infinite}
.lv-views{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:700;
  padding:3px 7px;border-radius:8px}
.lv-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px}
.lv-title{font-weight:800;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-host{font-size:12px;color:#a9c0ea}
body.theme-light .lv-title{color:#12275e}
body.theme-light .lv-host{color:#5a74a8}
@media(max-width:639px){.sb-bar .qbtn,.lv-bar .qbtn{flex:0 0 auto}}   /* HP: tombol kategori bisa digeser */
@media(min-width:640px){.lv-grid{grid-template-columns:repeat(4,1fr)}}

/* ===== cegah auto-zoom iOS saat fokus field: font input >=16px di mobile ===== */
@media(max-width:859px){
  input, select, textarea,
  .reg-field input, .reg-sel, .modal input, .search-bar input, .tg-inp, .tg-dig, .depo-amt input{
    font-size:16px !important;
  }
}

/* ================= NAVIGASI BAWAH (bottom nav) =================
   Bar MENGAMBANG bersudut penuh dengan tombol bundar MENONJOL di tengah, mengikuti
   contoh yang diberikan. Tombol tengah dipotongkan "takik" pada bar lewat mask
   radial supaya lingkarannya benar-benar keluar dari bar, bukan sekadar menumpuk. */
.botnav{position:fixed;z-index:90;display:flex;align-items:flex-end;
  left:0;right:0;bottom:0;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
  border-radius:0;
  --bn-notch:38px;
  background:transparent;border:0}
/* Latar bar dipisah ke ::before KHUSUS supaya masknya tidak ikut memotong anak-anak.
   `mask` pada .botnav akan menghapus tombol tengah juga — persis di area takik,
   sehingga lingkarannya hilang sama sekali. */
.botnav::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  /* Sedikit lebih terang dari latar halaman. Nilai lama #12151d = 18/21/29,
     sementara halaman di atasnya terukur 11..19 — beda tipis sekali sehingga
     barnya menyatu dengan latar. #242b3a memberi jarak ~20 tingkat, cukup
     terpisah tanpa jadi kotak terang yang mencolok. */
  background:var(--bn-bg,#242b3a);
  /* bar menempel: bayangan hanya ke ATAS, garis tipis hanya di tepi atas */
  box-shadow:0 -6px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  /* TIDAK ADA takik-mask lagi — tepi atas bar dibiarkan LURUS.
     Dua percobaan sebelumnya memotong bar dengan lingkaran. Masalahnya lingkaran
     takik selalu bertemu tepi atas pada sudut 90 derajat, dan lingkaran fillet yang
     dipakai untuk menumpulkannya tidak pernah bersinggungan mulus dengan takik —
     selalu tersisa gerigi tipis di antara keduanya, yang terbaca sebagai dua
     "kuping" aneh di kiri-kanan tombol.
     Kesan "berlubang" sekarang dibuat oleh cincin sewarna bar di sekeliling tombol
     (lihat .bn-fab). Karena tak ada lagi perpotongan bentuk, tak ada sudut yang
     bisa terlihat lancip atau bergerigi. */}
.botnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:8px 2px 4px;color:var(--txt-soft,#8b93a7);
  font-size:11px;font-weight:800;letter-spacing:.2px;transition:color .18s, transform .18s;
  position:relative;z-index:1;min-width:0}
.botnav-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.botnav-item span{line-height:1;white-space:nowrap}
.botnav-item:active{transform:scale(.93)}
.botnav-item.active{color:var(--tab-ac,#ffd21e)}
/* garis penanda tipis DI ATAS ikon (seperti contoh) */
.botnav-item::before{content:"";position:absolute;top:0;left:50%;
  width:22px;height:3px;border-radius:3px;background:var(--tab-ac,#ffd21e);
  transform:translateX(-50%) scaleX(0);opacity:0;transition:transform .22s, opacity .22s}
.botnav-item.active::before{transform:translateX(-50%) scaleX(1);opacity:1}

/* ---- tombol tengah menonjol ---- */
.botnav-mid{justify-content:flex-end}
.botnav-mid::before{display:none}          /* tombol tengah tak perlu garis penanda */
.botnav-mid{perspective:420px}                 /* beri kedalaman agar flip terlihat 3D */
.bn-fab{display:flex;align-items:center;justify-content:center;
  width:var(--bn-fab,62px);height:var(--bn-fab,62px);border-radius:50%;
  /* Naiknya dibagi dua cara dengan sengaja:
     - margin-top negatif setengah lingkaran = tumpang tindih dasar dengan bar
     - top (position:relative) = tambahan naik yang TIDAK mengubah tata letak
     Kalau semuanya lewat margin, bar ikut memendek sebesar itu dan kenaikannya
     termakan sendiri (naik 8px hanya jadi 3px). */
  position:relative;top:calc(var(--bn-lift,16px) * -1);
  margin-top:calc(var(--bn-fab,62px) / -2);
  /* hijau mengkilap: gradasi terang->gelap + sorotan lengkung di sisi atas */
  background:
    radial-gradient(120% 80% at 32% 12%, rgba(255,255,255,.62), rgba(255,255,255,0) 58%),
    linear-gradient(180deg,var(--bn-fab1,#a4f45f),var(--bn-fab2,#5fc72b) 52%,var(--bn-fab3,#3d9a15));
  /* Cincin sewarna bar = pengganti takik. Lingkaran jadi seolah duduk di dalam
     lubang, tanpa perlu memotong bentuk bar sama sekali. */
  box-shadow:0 0 0 var(--bn-ring,6px) var(--bn-bg,#242b3a),
             0 6px 18px rgba(80,200,40,.5), 0 2px 6px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(0,0,0,.22);
  color:var(--bn-fab-ink,#12380a);
  transform-style:preserve-3d;will-change:transform;
  animation:bnFlip var(--bn-flip-dur,3.4s) ease-in-out infinite}
.bn-fab svg{width:30px;height:30px;stroke-width:2.2;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
/* Flip menyamping, berulang: diam sebentar lalu berputar penuh 1x. Jeda itu
   disengaja — berputar terus-menerus melelahkan mata dan menarik perhatian
   melebihi isi halaman. */
@keyframes bnFlip{
  0%, 62%   { transform:rotateY(0deg) }
  100%      { transform:rotateY(360deg) }
}
/* Tekan: umpan baliknya dipindah ke tombolnya (bukan .bn-fab), karena transform
   di .bn-fab sudah dipakai animasi flip dan akan saling menimpa. */
.botnav-mid:active{transform:scale(.93)}
.bn-mid-lbl{margin-top:5px}
/* ikon ditukar sesuai status login */
.bn-ic-depo{display:none}
body.logged-in .bn-ic-depo{display:block}
body.logged-in .bn-ic-masuk{display:none}

body.theme-light .botnav::before{background:#ffffff;
  box-shadow:0 -6px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(0,0,0,.08)}
body.theme-light .botnav-item{color:#7b849b}
/* ruang agar konten & footer tak tertutup bar (bar menempel, tanpa jarak tepi) */
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media(max-width:360px){
  .botnav-item{font-size:10px;padding:7px 1px 4px}
  .botnav-item svg{width:21px;height:21px}
  .botnav{--bn-fab:56px}
  .bn-fab svg{width:27px;height:27px}
}
/* Desktop: bar bawah khusus mobile, sembunyikan. Tidak cukup hanya display:none —
   penahan isi halaman ikut dibatalkan, kalau tidak akan tersisa pita kosong
   ~64px di bawah footer. */
@media(min-width:860px){
  .botnav{display:none}
  body{padding-bottom:0}
}

/* isi modal promo */
.promo-list{display:flex;flex-direction:column;gap:10px}
.promo-card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid var(--btn-bc,#5a9bf5)}
.promo-card b{font-size:14px;color:var(--tab-ac,#ffd21e)}
.promo-card span{font-size:12px;color:var(--txt-soft,#dbe6ff);line-height:1.3}
body.theme-light .promo-card{background:rgba(0,0,0,.04)}
body.theme-light .promo-card span{color:var(--txt-strong,#33456b)}
/* isi modal layanan */
.lyn-sub{font-size:13px;color:var(--txt-soft,#dbe6ff);margin:-2px 0 4px}
body.theme-light .lyn-sub{color:var(--txt-strong,#33456b)}
.lyn-list{display:flex;flex-direction:column;gap:9px}
.lyn-btn{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:12px;cursor:pointer;
  font-size:14px;font-weight:800;color:#fff;text-align:left;
  background:linear-gradient(180deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));
  border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  border-bottom:var(--btn-bb,5px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff)}
.lyn-btn span{font-size:18px}
.lyn-btn-ic{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.lyn-head{display:flex;align-items:center;gap:8px}
.lyn-head-ic{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.lyn-btn:hover{filter:brightness(1.07)}
.lyn-btn:active{transform:translateY(1px)}

/* ===== hormati preferensi "kurangi gerak" (aksesibilitas) ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Pengecualian strip bank DIHAPUS bersama animasinya: sejak 7 Agustus 2026
     petak bank diam, jadi tidak ada lagi .bank-track yang perlu dikecualikan. */
  /* Pengecualian flip tombol tengah DIHAPUS bersama flipnya (lihat blok
     "NAVIGASI BAWAH: gaya lencana lingkaran" di akhir berkas). Menyisakannya
     tidak berbahaya tapi menyesatkan: pembaca berikutnya akan mencari animasi
     yang sudah tidak dipakai. */
  /* PENGECUALIAN: pita teks berjalan, juga diminta eksplisit.
     Durasinya dihitung runningText.ts dari panjang teks ÷ kecepatan, lalu
     ditaruh di --rt-dur — nilai inline biasa akan kalah oleh `*` !important
     di atas, jadi harus lewat variabel yang dibaca aturan ber-!important ini. */
  .runtext-track{
    animation-duration:var(--rt-dur,24s) !important;
    animation-iteration-count:infinite !important;
  }
  /* PENGECUALIAN: layar pembuka. Tanpa ini animasinya BEKU dan layar pembuka
     terlihat seperti halaman yang menggantung — justru kebalikan dari maksudnya.
     KELIMA pemilih disebut karena gaya yang dipilih di back-office menentukan
     elemen mana yang beranimasi: logo (SPIN/FLIP/PULSE/BLINK), cincin (RING),
     titik mengorbit (ORBIT), batang (BAR), atau tiga titik (DOTS). Melewatkan
     satu saja berarti gaya itu diam di mesin yang menyalakan "kurangi gerak".
     Durasinya lewat var(--pl-dur) — nilai dari back-office ditulis ke variabel
     itu, dan angka mati di sini akan mengabaikannya. */
  #preloader .pl-mark,
  #preloader .pl-ring,
  #preloader .pl-orbit,
  #preloader .pl-bar i,
  #preloader .pl-dots i{
    animation-duration:var(--pl-dur,1.6s) !important;
    animation-iteration-count:infinite !important;
  }
}
/* fokus keyboard yang jelas (tidak mengganggu klik mouse) */
:focus-visible{outline:3px solid var(--tab-ac,#ffd21e);outline-offset:2px;border-radius:4px}
/* wadah dialog di-fokus programatik utk screen reader -> jangan tampilkan cincin fokus */
[role="dialog"]:focus,[role="dialog"]:focus-visible,.prof-panel:focus,.prof-panel:focus-visible{outline:none}

/* ===== PENARIKAN (model grid metode + K + tambah data) ===== */
.wd-head{font-weight:900;font-size:16px;margin:6px 0 8px}
.wd-secure{font-size:13px;color:#bfe3c9;background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.35);border-radius:12px;padding:10px 12px;margin-bottom:10px;line-height:1.4}
/* kartu saldo */
.wd-balcard{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(110deg,var(--surf-p1,#2a6fe0),var(--surf-p2,#123f9c));border:1px solid var(--btn-bc,#5a9bf5)}
.wd-balcard-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:rgba(255,255,255,.14);flex:0 0 auto}
.wd-bal-img{width:30px;height:30px;object-fit:contain}
.wd-balcard-label{font-size:13px;color:var(--txt-soft,#dbe6ff)}
.wd-balcard-amt{font-size:22px;font-weight:900;color:var(--tab-ac,#ffd21e);display:flex;align-items:center;gap:8px;line-height:1.1}
.wd-balcard-sub{font-size:11px;color:var(--txt-soft,#cfe0ff);opacity:.85}
.wd-refresh{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;opacity:.85}
/* grid metode e-wallet / bank */
.wd-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.wd-m{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;cursor:pointer;
  border-radius:12px;background:rgba(255,255,255,.06);border:2px solid transparent;transition:.12s}
.wd-m .wd-m-ic{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.wd-m-logo{width:38px;height:38px;object-fit:contain;filter:brightness(0) invert(1);transition:filter .15s}   /* default: tint putih */
.wd-m.registered .wd-m-logo{filter:none}                                               /* data tersimpan (✓): warna asli */
.wd-m[data-m="bank"] .wd-m-logo{width:46px;height:46px}                                 /* logo bank lebih besar */
.wd-m .wd-m-name{font-size:12px;font-weight:800;color:#fff}
.wd-m.active{background:rgba(255,255,255,.09);border-color:var(--tab-ac,#ffd21e);box-shadow:0 0 0 1px var(--tab-ac,#ffd21e) inset}
.wd-m.active .wd-m-name{color:var(--tab-ac,#ffd21e)}
.wd-m.locked{opacity:.42}
.wd-m-tick{position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;background:#2ecc71;color:#fff;
  font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center}
/* input jumlah + suffix K */
.wd-amtrow{display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px;margin-bottom:14px;
  background:var(--ub-bg1,#0e3c8f);border:1px solid var(--btn-bc,#5a9bf5)}
.wd-amt-ic{color:var(--txt-soft,#9fc0ff);font-size:15px;font-weight:800;flex:0 0 auto}
.wd-amt-input{flex:1;background:none;border:0;outline:none;color:#fff;font-size:16px;font-weight:700;padding:13px 0}
.wd-amt-input::placeholder{color:var(--txt-soft,#9fbdf0);font-weight:600}
/* pembatas + info + tambah data */
.wd-divider{font-size:13px;color:var(--txt-soft,#cfe0ff);margin:6px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.wd-note2{font-size:13px;color:var(--txt-soft,#cfe0ff);line-height:1.45;text-align:center;margin-bottom:12px}
.wd-adddata{display:block;width:100%;padding:13px;border-radius:12px;cursor:pointer;
  background:none;border:1.5px dashed var(--tab-ac,#ffd21e);color:var(--tab-ac,#ffd21e);font-weight:800;font-size:14px}
.wd-adddata span{font-weight:900}
.wd-adddata:hover{background:rgba(255,210,30,.08)}
/* kartu rekening tersimpan */
.wd-acct{border-radius:12px;padding:12px 14px;margin-bottom:10px;background:rgba(255,255,255,.08);border:1px solid var(--btn-bc,#5a9bf5)}
.wd-acct-bank{font-weight:900;font-size:15px;color:var(--tab-ac,#ffd21e)}
.wd-acct-no{font-size:15px;letter-spacing:1px;margin:2px 0}
.wd-acct-name{font-size:13px;color:var(--txt-soft,#dbe6ff);text-transform:uppercase}
body.theme-light .wd-secure{color:#1c7a3f}
body.theme-light .wd-acct-name{color:var(--txt-strong,#33456b)}
body.theme-light .wd-balcard-label,body.theme-light .wd-balcard-sub,
body.theme-light .wd-note2,body.theme-light .wd-divider{color:var(--txt-strong,#33456b)}
body.theme-light .wd-m .wd-m-name{color:var(--txt-strong,#123a8f)}

/* ================= MODAL GANTI BAHASA =================
   Memakai rangka .reg-box (sama dgn popup Login) supaya seragam; yang khas di
   sini cuma daftar bahasanya. */
/* Panel profil ber-z-index 110, sedangkan .modal-overlay hanya 100 — tanpa ini
   popup bahasa muncul DI BELAKANG panel yang membukanya. Panel sengaja dibiarkan
   terbuka di belakang supaya setelah memilih, pengguna kembali ke tempat semula. */
#langModal{z-index:120}
.lang-box{max-width:340px}
/* Judul & subjudul dibuat rata tengah dua-duanya. Sebelumnya judul memakai
   .reg-section (rata kiri + garis pemisah) sementara subjudulnya rata tengah,
   jadi terlihat miring sebelah. */
.lang-title{text-align:center;font-weight:900;font-size:16px;color:#fff;
  letter-spacing:.2px;margin:14px 16px 2px}
.lang-sub{text-align:center;font-size:12.5px;font-weight:600;
  color:var(--txt-soft,#cfe0ff);margin:0 16px 12px}
body.theme-light .lang-title{color:var(--txt-strong,#123a8f)}
body.theme-light .lang-sub{color:var(--txt-strong,#43608f)}

/* Daftar digulir sendiri supaya popup tak pernah lebih tinggi dari layar.
   Tepi bawahnya diberi lembut (mask) agar baris yang terpotong terbaca sebagai
   "masih ada lanjutannya", bukan seperti tampilan yang rusak terpangkas. */
.lang-list{display:flex;flex-direction:column;gap:6px;
  max-height:min(46vh,330px);overflow-y:auto;overscroll-behavior:contain;
  padding:2px 16px;margin-bottom:14px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%)}
.lang-list::-webkit-scrollbar{width:4px}
.lang-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.lang-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}

.lang-item{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;text-align:left;
  padding:9px 12px;transition:background .14s ease, border-color .14s ease;color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px}
.lang-item:hover{background:rgba(255,255,255,.11)}
.lang-item:active{transform:translateY(1px)}
.lang-item.active{background:linear-gradient(180deg,var(--btn-c1,#3d86ec),var(--btn-c2,#2764c9));
  border-color:var(--btn-bc,#5a9bf5)}
body.theme-light .lang-item{color:var(--txt-strong,#123a8f);background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10)}

/* Bendera: SVG sederhana, bukan emoji — emoji bendera tidak tergambar di Windows
   (hanya muncul dua huruf kode negara, mis. "ID"), jadi akan terlihat rusak. */
.lang-flag{flex:0 0 auto;width:30px;height:20px;border-radius:3px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.35)}
.lang-txt{flex:1;min-width:0}
/* display:block wajib — keduanya <span>; kalau dibiarkan inline nama negara dan
   nama bahasa menempel jadi satu baris ("IndonesiaBahasa Indonesia"). */
.lang-negara{display:block;font-weight:800;font-size:13.5px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-nama{display:block;font-size:11.5px;font-weight:600;line-height:1.3;
  color:var(--txt-soft,#bcd2ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-item.active .lang-nama{color:rgba(255,255,255,.82)}
body.theme-light .lang-nama{color:var(--txt-strong,#43608f)}
.lang-check{flex:0 0 auto;width:18px;height:18px;opacity:0;color:#fff}
.lang-item.active .lang-check{opacity:1}
.lang-check svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== KARTU GAME & TOMBOL: buang KEDALAMAN saja =====
   Kelanjutan dari blok "LOG IN / DAFTAR" di atas, dengan aturan main yang sama:
   warna, gradien, ukuran, sudut, dan garis tepi teks TIDAK disentuh. Yang
   dimatikan hanya dua hal yang membuat elemen terlihat timbul:
     1. bibir bawah — tepi 3D di sisi bawah, tiga mekanisme berbeda:
        a. .rank-thumb::before  : pita bertopeng setinggi var(--card-b)
        b. .qbtn/.pf/.pill      : border-bottom var(--btn-bb,6px)
        c. .join-now            : lapis pertama box-shadow "0 6px 0"
     2. bayangan jatuh tipis di bawah elemen (box-shadow)

   Ditaruh DI AKHIR BERKAS, bukan dengan menyunting aturan aslinya, karena:
   - kekhususan pemilihnya sama persis dengan aslinya, jadi yang menang adalah
     yang belakangan — tampilan timbul bisa dikembalikan hanya dengan menghapus
     blok ini, tanpa perlu mengingat nilai lamanya;
   - keadaan :hover dan :active WAJIB ikut dimatikan. Aturan seperti
     .pslide:hover berkekhususan lebih tinggi dan akan memasang kembali
     bayangannya begitu kursor lewat kalau dilewat di sini.

   Tidak ikut dimatikan: header, bar bawah, dan tombol panah bar tab. Bayangan
   di sana memisahkan LAPISAN (elemen yang mengambang di atas halaman), bukan
   meniru tombol fisik. */

/* --- kartu game (baris Top Games, PG Soft, dll) --- */
.rank-thumb{box-shadow:none}
/* content:none = pseudo-elemennya tidak dibuat sama sekali, jadi nilai
   --card-t/b/l/r yang ditulis inline ke <html> oleh panel setelan (dan yang
   tersimpan di localStorage pengunjung lama) tidak bisa memunculkannya lagi. */
.rank-thumb::before{content:none}

/* --- tombol biru bergaris tepi (quick-row, saringan halaman, kartu profil) --- */
.qbtn, .pg-cards .pill, .pf{
  border-bottom-width:var(--btn-bt,1px);
  box-shadow:none;
}

/* --- baris provider (daftar dengan logo) --- */
.prov-row{box-shadow:none}

/* --- kartu provider --- */
.prov-chip,
.prov-chip:hover{box-shadow:none}

/* --- banner promo (konten gambar) --- */
.pslide,
.pslide:hover{box-shadow:none}

/* --- tombol besar "Daftar!" di bawah banner ---
   Bayangannya berlapis empat: bibir 3D, bayangan jatuh, kilau dalam di tepi
   atas, dan pendar kuning di sekelilingnya. Yang dibuang HANYA dua yang
   pertama; kilau dan pendar bukan efek timbul dan ikut menentukan wajah tombol
   ini, jadi keduanya ditulis ulang apa adanya. */
.join-now{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 13px -2px var(--tab-ac,#ffd21e)}
/* ditekan: cukup meredup, tanpa gerak turun yang meniru tombol fisik */
.join-now:active{transform:none;filter:brightness(.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 13px -2px var(--tab-ac,#ffd21e)}

/* ===== MODE TERANG: teks jadi HITAM, bukan biru tua =====
   Sebelumnya seluruh teks mode terang memakai keluarga biru tua (#123a8f,
   #3a5aa8, #12275e, #43608f, #5a74a8, #33456b). Terbaca secara angka, tetapi
   biru di atas latar terang tetap terasa menyilaukan dan kurang tegas.

   Satu baris pertama mengerjakan sebagian besar pekerjaan. --txt-strong dipakai
   puluhan aturan di berkas ini DAN di berkas komponen (artikel SEO, teks
   berjalan, panel profil, pemilih bahasa), dan nilainya DIHITUNG legacyBoot.js:
   `darken(tema.c1, 0.15)` — jadi warnanya ikut tema. Dengan tema gelap sekarang
   hasilnya kebetulan sudah nyaris hitam (#1b1f26), tetapi dengan tema biru ia
   kembali jadi biru tua. Mematoknya di sini membuat teks mode terang tetap
   hitam apa pun temanya. Hanya di dalam .theme-light — mode gelap tetap memakai
   nilai dari tema. Hapus satu baris itu kalau suatu saat warnanya ingin ikut
   tema lagi.

   Sisanya dua kelompok:
   1. nilai biru yang ditulis mati (tidak lewat variabel) -> dihitamkan di sini;
   2. tempat yang SENGAJA memakai nada lebih lembut sebagai hierarki
      (`var(--txt-strong,#43608f)` dan `#33456b`). Kalau dibiarkan, keduanya
      ikut jadi hitam pekat dan sub-judul jadi setegas judulnya. Karena itu
      kelompok ini diberi abu gelap, bukan hitam.
   Latar mode terang ±#e9e9ea, jadi #111 ≈ 16:1, #333 ≈ 11:1, #4a4a4a ≈ 8:1,
   #555 ≈ 7:1 — semuanya jauh di atas ambang 4,5. */
body.theme-light{--txt-strong:#111}

/* --- teks utama yang warnanya ditulis mati --- */
body.theme-light .see{color:#111}
body.theme-light .see:hover{color:#000}
body.theme-light .sub{color:#333}
body.theme-light .foot p{color:#333}
body.theme-light .prof-name,
body.theme-light .prof-bal2,
body.theme-light .prof-idrow b{color:#111}
body.theme-light .sb-team,
body.theme-light .sb-odd b{color:#111}
body.theme-light .sb-odd{color:#333}
body.theme-light .lv-title{color:#111}

/* --- nada sekunder: abu gelap supaya hierarki judul/sub tidak hilang --- */
body.theme-light .prof-idrow,
body.theme-light .prof-copy,
body.theme-light .sb-league,
body.theme-light .lv-host,
body.theme-light .lang-sub,
body.theme-light .lang-nama{color:#4a4a4a}
body.theme-light .promo-card span,
body.theme-light .lyn-sub,
body.theme-light .wd-acct-name,
body.theme-light .wd-balcard-label,
body.theme-light .wd-balcard-sub,
body.theme-light .wd-note2,
body.theme-light .wd-divider{color:#333}
/* Label bar bawah: 3,08 sebelumnya — paling redup di seluruh mode terang.
   :not(.active) wajib — aturan ini sekhusus .botnav-item.active (0,2,0) dan
   terletak lebih akhir, jadi tanpa penjaga itu halaman yang sedang dibuka
   kehilangan warna aksennya dan cuma garis penanda di atas ikonnya yang tersisa. */
body.theme-light .botnav-item:not(.active){color:#555}

/* --- dua wadah yang latarnya TIDAK ikut memutih ---
   --txt-soft dihitung legacyBoot.js dan berubah jadi slate #54617d saat mode
   terang (masuk akal untuk latar terang). Tetapi bar tab dan kotak cari header
   duduk di atas latar GELAP di kedua mode, jadi di sana slate justru meredup:
   label tab terukur hanya 2,15 terhadap bar tabnya. Dikembalikan ke nada
   terang, hanya untuk dua wadah itu.
   :not(.active) wajib — tanpa itu pemilih ini (0,2,1) mengalahkan
   .t3.active (0,2,0) dan warna kuning tab aktif ikut hilang. */
body.theme-light .t3:not(.active){color:rgba(255,255,255,.74)}
body.theme-light .hsearch input::placeholder{color:rgba(255,255,255,.6);opacity:1}
body.theme-light .hs-x{color:rgba(255,255,255,.7)}

/* ===== SUDUT MEMBULAT: dikurangi, jangan terlalu bulat =====
   Tombol sebenarnya SUDAH tidak bulat: --btn-radius bernilai 9px dari panel
   setelan, dan LOG IN / DAFTAR / quick-row semuanya mengikuti itu. Yang membuat
   tampilan terasa terlalu bulat adalah GAMBAR dan kartu besar, yang radiusnya
   ditulis mati 16px di aturannya masing-masing.

   Skala barunya dua tingkat, mengikuti ukuran elemennya:
     10px -> gambar game & tombol (kartu 127x161, chip provider, "Daftar!")
     12px -> kartu/banner lebar (promo 402x176, baris provider)
   Perbandingannya: 16px pada kartu selebar 127px = 12,6% dari lebarnya;
   10px = 7,9%, sesuai contoh yang diberikan.

   Ditulis di akhir berkas dengan kekhususan yang sama seperti aslinya, jadi
   yang menang adalah yang belakangan — menghapus blok ini mengembalikan bentuk
   lama tanpa perlu mengingat nilai sebelumnya. Satu perkecualian yang WAJIB
   ikut ditulis: kartu Top Games saat sudah login dipilih lewat
   `body.logged-in #topGames .rank-thumb` yang mengandung id, jadi kekhususannya
   jauh lebih tinggi dan tidak bisa dikalahkan hanya dengan urutan. */

/* --- gambar game & tombol --- */
.rank-thumb,
body.logged-in #topGames .rank-thumb,
.lc-thumb{border-radius:10px}
.prov-chip{border-radius:10px}
.join-now{border-radius:10px}
/* Tab disamakan dengan tombol lain (--btn-radius = 9px). .t3.active WAJIB ikut
   disebut: aturan aslinya memasang border-radius:12px dengan kekhususan (0,2,0)
   yang tidak bisa dikalahkan .t3 saja, seakhir apa pun letaknya — gejalanya
   cuma SATU tab (yang sedang aktif) tetap lebih bulat dari empat lainnya. */
.t3,
.t3.active{border-radius:var(--btn-radius,9px)}

/* --- kartu & banner lebar --- */
.pslide,
.promo-card2{border-radius:12px}
.prov-row{border-radius:12px}

/* ===== NAVIGASI BAWAH: gaya lencana lingkaran =====
   Mengikuti contoh yang diberikan. Yang berubah HANYA tombol tengahnya; ikon,
   label, dan garis penanda halaman aktif dibiarkan apa adanya.

   Perbedaan pokok dari versi sebelumnya:
     - bola hijau mengkilap 62px yang setengah keluar dari bar
       -> lingkaran 46px SEWARNA BAR dengan cincin tipis warna aksen + pendar,
          hanya sedikit terangkat. Lingkaran gelap itu yang membuat bar terbaca
          rata; bola hijau besar selalu jadi benda paling mencolok di layar.
     - label tengah kini ikut warna aksen, sama seperti pada contoh — dulu ia
       abu-abu seperti label lainnya sehingga tombol utamanya tidak terbaca
       sebagai "yang sedang dituju".

   YANG SELAMA INI TERLEWAT: pada contoh, tepi atas bar TIDAK lurus — ia
   melengkung NAIK mengelilingi lencana, jadi lencananya duduk di dalam punuk.
   Dua percobaan saya sebelumnya membuat lencana yang menempel di atas bar yang
   lurus; strukturnya benar tapi siluetnya beda, dan siluet itu yang paling
   dulu dilihat mata.

   Punuknya BUKAN mask/potongan bentuk. Komentar di blok .botnav::before di atas
   mencatat dua percobaan lama memotong bar dengan lingkaran, dan keduanya selalu
   menyisakan gerigi di titik temu takik dengan tepi atas. Di sini punuknya
   dibuat sebagai CINCIN SEWARNA BAR di sekeliling lencana: karena warnanya sama
   persis, separuh bawahnya melebur ke dalam bar tanpa garis batas, dan separuh
   atasnya terbaca sebagai lengkungan bar yang naik. Tidak ada dua bentuk yang
   berpotongan, jadi tidak ada sudut yang bisa bergerigi.

   Itu juga sebabnya soket gelap percobaan kemarin salah arah: begitu warnanya
   BEDA dari bar, ia berhenti melebur dan kembali terbaca sebagai cincin yang
   ditempel, bukan sebagai bar yang melengkung.

   URUTAN box-shadow penting dan mudah salah: lapisan PERTAMA digambar PALING
   DEPAN. Cincin aksen di depan, lalu punuk sewarna bar, baru pendarnya — pendar
   yang ditaruh sebelum punuk akan tertutup rapat dan hilang sama sekali.

   margin-top DIPATOK -1/2 diameter: yang masuk hitungan tata letak jadi tepat
   separuh lingkaran, sehingga membesarkan lencana tidak ikut menaikkan tinggi
   bar. Tinggi angkat lewat `top` yang tidak dihitung tata letak, jadi bebas
   diatur tanpa menggeser apa pun.

   ANGKA-ANGKA DI BAWAH DIUKUR LANGSUNG dari situs acuan (play.co.za) pada lebar
   412px, bukan ditakar dari tangkapan layar. Tiga percobaan pertama meleset
   karena menakar; hasil ukurannya:
     - permukaan bar          : 60px (miliknya digambar di <canvas>, bukan CSS —
                                itu sebabnya lengkungannya tak pernah cocok
                                ditiru dengan lingkaran box-shadow)
     - lencana                : 46x46, 25px di atas permukaan bar (54% menonjol)
     - isi lencana            : rgba(0,0,0,.9) — nyaris hitam, BUKAN sewarna bar
     - "cincin"-nya           : ternyata BUKAN garis solid, melainkan PENDAR:
                                inset 0 0 5px <aksen> + 0 0 5px <aksen>.
                                Itu sebabnya versi cincin 2-3px saya selalu
                                terlihat lebih keras dan tebal dari contoh.
     - label                  : 13px bobot 400 (punya kita 11px bobot 800) */
.botnav{--bn-fab:46px;--bn-lift:16px;--bn-arc:9px;
  --bn-hump-w:150px;     /* lebar lingkaran punuk */
  --bn-hump-rise:14px;   /* tinggi puncaknya di atas tepi bar */
  --bn-fab-in:rgba(0,0,0,.9)}   /* isi lencana, mengikuti acuan */

/* BUSUR TEPI BAR — cincin sewarna bar yang MEMELUK lencana.
   Contoh terakhir memperlihatkannya dengan jelas: tepi bar naik membentuk busur
   RAPAT di sekeliling lencana, bukan lengkungan lebar dan bukan lembah.

   Dibuat sebagai lapisan box-shadow pada lencana itu sendiri, bukan sebagai
   elemen atau mask terpisah. Karena warnanya sama persis dengan bar, separuh
   bawah cincin melebur tanpa garis batas dan separuh atasnya terbaca sebagai
   tepi bar yang naik. Tidak ada dua bentuk yang berpotongan, jadi tidak ada
   sudut yang bisa bergerigi — masalah yang selalu muncul pada percobaan
   memotong bar dengan mask.

   URUTAN lapisannya menentukan: pendar harus DI DEPAN cincin bar. Kalau cincin
   bar ditaruh lebih dulu, ia menutup pendarnya rapat-rapat dan lencana kembali
   terlihat polos.

   Sisa nilainya (tinggi bar, ukuran lencana, tinggi menonjol, warna isi, pendar,
   label) hasil ukur dari play.co.za dan tidak diubah. */

.bn-fab{
  top:calc(var(--bn-lift,10px) * -1);
  margin-top:calc(var(--bn-fab,46px) / -2);
  background:var(--bn-fab-in,rgba(0,0,0,.9));
  /* PENDAR, bukan cincin solid — ini temuan pokoknya. Acuan memakai dua lapis
     pendar 5px (satu ke dalam, satu ke luar) tanpa spread sama sekali, sehingga
     tepinya lembut dan menyatu. Garis solid 2-3px yang saya pakai sebelumnya
     selalu terbaca lebih keras dan tebal daripada contoh, berapa pun tebalnya
     disetel. Lapisan ketiga (pendar luar yang lebih lebar) ditambahkan karena
     latar kita tidak sehitam acuan; tanpa itu pendarnya nyaris tak terlihat. */
  box-shadow:
    inset 0 0 5px 0 var(--tab-ac,#ffd21e),
    0 0 6px 0 var(--tab-ac,#ffd21e),
    0 0 0 var(--bn-arc,9px) var(--bn-bg,#242b3a);
  color:#fff;
}
/* Flip 3D DIMATIKAN. Pada contoh lencananya lingkaran penuh; rotateY membuatnya
   terbaca sebagai ELIPS di sebagian besar siklusnya — terukur pada potret uji,
   bukan dugaan. Animasinya sendiri tidak dihapus dari berkas ini, cuma tidak
   dipakai, jadi mengembalikannya cukup menghapus baris di bawah. */
.bn-fab{animation:none}
.bn-fab svg{width:22px;height:22px;stroke-width:2.1;filter:none}
/* Label tombol tengah = penanda utamanya, sesuai contoh. */
.bn-mid-lbl{color:var(--tab-ac,#ffd21e);margin-top:6px}

/* MODE TERANG: label TIDAK memakai warna aksen.
   Aksen situs ini kuning-hijau (#d7e82a); di atas bar putih kontrasnya hanya
   1,6 — terbaca jelas di bar gelap, nyaris hilang di bar terang. Penanda
   aksennya dipindah ke BENTUK (cincin lencana + garis di atas ikon), yang tidak
   punya syarat kontras teks, sementara labelnya dibuat paling tegas. */
body.theme-light .botnav-item.active,
body.theme-light .bn-mid-lbl{color:#111}

/* Mode terang: susunannya sama persis, punuknya tetap SEWARNA BAR (putih) —
   itu syarat leburnya. Yang dibalik hanya isi lencana dan warna ikonnya. */
body.theme-light .botnav{--bn-fab-in:#ffffff}
body.theme-light .botnav::after{ background:#ffffff }
/* Mode terang: pendar saja tidak cukup — di atas lencana putih ia hampir tak
   terlihat. Karena itu di sini dipakai garis tepi tipis SEBAGAI pengganti
   pendar, bukan sebagai tambahan; hasilnya tetap terbaca tanpa jadi tebal. */
body.theme-light .bn-fab{
  background:var(--bn-fab-in,#fff);
  box-shadow:
    0 0 0 1.5px var(--tab-ac,#ffd21e),
    0 0 10px -1px var(--tab-ac,#ffd21e),
    0 4px 12px rgba(0,0,0,.18);
  color:#111;
}

@media(max-width:360px){
  .botnav{--bn-fab:42px}
  .bn-fab svg{width:20px;height:20px}
}

/* ===== BAR BAWAH: tinggi & label disamakan dengan acuan =====
   Diukur langsung dari play.co.za pada lebar 412px:
     permukaan bar 60px  (punya kita 77px)
     label 13px bobot 400 (punya kita 11px bobot 800)
   Dua hal itu yang membuat bar acuan terasa RINGAN; lencananya sendiri sudah
   sama sejak blok sebelumnya.

   Dua angka lain WAJIB ikut berubah, dan ini yang mudah terlupa:
     - body padding-bottom: penahan supaya isi halaman & footer tak tertutup bar.
       Kalau ketinggalan, akan tersisa pita kosong 17px di bawah footer.
     - font-size di layar <=360px: aturan lama di sana memakai 10px, dan aturan
       di blok ini letaknya lebih akhir sehingga akan menang. Jadi ukuran kecilnya
       harus ditulis ulang di sini, bukan diandalkan dari aturan lama. */
.botnav{padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.botnav-item{font-size:13px;font-weight:400;padding:4px 2px 2px;gap:3px}
.botnav-item svg{width:24px;height:24px;stroke-width:1.8}
.bn-mid-lbl{font-weight:400;margin-top:4px}
/* Item aktif tetap dibedakan lewat WARNA + garis penanda, bukan lewat ketebalan
   huruf — acuan pun memakai bobot yang sama untuk semua labelnya. */
body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
@media(max-width:360px){
  .botnav-item{font-size:12px}
  .botnav-item svg{width:22px;height:22px}
}
@media(min-width:860px){
  body{padding-bottom:0}
}

/* ===== Tombol status di kartu promo ikut warna CTA tema =====
   Hijaunya dulu ditulis mati, jadi tertinggal saat tema diganti — sama seperti
   tombol DAFTAR di header.

   Memakai VARIABEL, bukan style inline dari applyBtnGroup, dan itu bukan pilihan
   gaya: kartu promo digambar promoPage.ts SETELAH tema diterapkan, sehingga
   querySelectorAll milik applyBtnGroup tidak akan pernah mengenainya. Lewat
   var(--cta), tombol yang lahir belakangan pun otomatis ikut.

   Nilai cadangan #7cc23a dipertahankan supaya warnanya tetap benar bila
   back-office tak terjangkau dan tema tidak pernah diterapkan.

   Bibir bawah 3px ikut dinolkan agar sejalan dengan tombol lain yang sudah
   diratakan sebelumnya. */
.promo-foot-btn{
  background:var(--cta,#7cc23a);
  color:var(--cta-ink,#173a05);
  border-bottom-width:0;
}


/* ===== BAR BAWAH: TAKIK CEKUNG mengikuti menu aktif =====
   Sesuai contoh: tepi bar DIPOTONG CEKUNG tepat di bawah lingkaran, dan
   lingkarannya TERISI PENUH warna aksen dengan ikon gelap di dalamnya.
   Lingkarannya melayang di dalam potongan itu — bukan menempel, bukan melebur.

   Posisi takik mengikuti menu aktif TANPA JavaScript. Kelima menu memakai
   flex:1, jadi lebarnya persis sama dan titik tengahnya pasti di 10/30/50/70/90%
   — angka itu bukan taksiran. :has() memilih baris mana yang aktif, lalu
   mengisi --bn-notch-x. Menghitungnya lewat JS akan meleset tiap lebar layar
   berubah atau label diterjemahkan jadi lebih panjang.

   Takiknya dipotong dengan MASK pada latar bar (::before), bukan dengan
   menumpuk lingkaran sewarna bar. Percobaan menumpuk sudah dua kali gagal:
   begitu warnanya sama, lingkaran dan bar melebur jadi satu gumpalan — persis
   keluhan "menyatu". Dipotong benar-benar, isi halaman terlihat di celahnya dan
   lingkarannya terbaca melayang. */
.botnav:has(.botnav-item:nth-child(1).active){--bn-notch-x:10%}
.botnav:has(.botnav-item:nth-child(2).active){--bn-notch-x:30%}
.botnav:has(.botnav-item:nth-child(3).active){--bn-notch-x:50%}
.botnav:has(.botnav-item:nth-child(4).active){--bn-notch-x:70%}
.botnav:has(.botnav-item:nth-child(5).active){--bn-notch-x:90%}

.botnav{--bn-notch:34px;--bn-rise:26px}
.botnav::before{
  /* Lingkaran transparan berpusat di TEPI ATAS bar (y=0), jadi yang terpotong
     tepat separuh bawahnya = cekungan. 0.5px setelah radius memberi tepi halus;
     tanpa itu potongannya bergerigi. */
  -webkit-mask:radial-gradient(circle var(--bn-notch,34px) at var(--bn-notch-x,50%) 0,
              transparent 0 var(--bn-notch,34px), #000 calc(var(--bn-notch,34px) + .5px));
          mask:radial-gradient(circle var(--bn-notch,34px) at var(--bn-notch-x,50%) 0,
              transparent 0 var(--bn-notch,34px), #000 calc(var(--bn-notch,34px) + .5px));
}

/* Tombol tengah tidak lagi menonjol permanen — jadi menu biasa seperti lainnya. */
.bn-fab{display:contents}
.botnav-mid{justify-content:flex-start}
.bn-mid-lbl{margin-top:0;color:inherit;font-weight:inherit}

.botnav-item{position:relative;z-index:1}
/* Garis penanda tipis lama tidak dipakai lagi: penandanya kini lingkaran. */
.botnav-item.active::before{content:none}
.botnav-item.active svg{
  box-sizing:content-box;
  padding:12px;border-radius:50%;
  background:var(--tab-ac,#ffd21e);
  color:var(--tab-ac-ink,#111);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  transform:translateY(calc(var(--bn-rise,26px) * -1));
}
.botnav-item.active{font-weight:700}

/* Tepi atas bar diturunkan sedikit: padding atas bar & item dirapatkan.
   Kedua angka ini SELALU harus bergerak bersama — tinggi bar menentukan penahan
   isi halaman (body padding-bottom). Mengubah salah satu saja menyisakan pita
   kosong di bawah footer. */
.botnav{padding-top:0}
.botnav-item{padding-top:2px}
body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
@media(min-width:860px){
  body{padding-bottom:0}
}


/* ===== BAR BAWAH: SATU PATH SVG DENGAN CEKUNGAN MENYATU =====
   Semua percobaan takik sebelum ini memotong latar bar dengan mask lingkaran,
   dan itu batasnya keras: tepi bar selalu bertemu takik pada sudut 90 derajat,
   jadi tidak pernah ada bahu melengkung sebelum turun. Sekarang badan barnya
   satu <path> yang sudah membawa cekungannya sendiri (lihat botnavShape.ts) —
   bahu dan cekungan adalah bagian dari garis yang sama.

   Berkas ini hanya mengurus KOTAK dan WARNA; bentuk & posisi cekungan milik
   botnavShape.ts, yang MENGUKUR kotak itu. Jadi tetap satu pemilik untuk tiap
   nilai: CSS menentukan besar bar, JS menggambar isinya.

   Warnanya sengaja TIDAK memakai angka dari contoh (#262626/#8CE21B/#9A9A9A).
   Bar ini ikut tema back-office; angka pada var() hanya cadangan bila tema tak
   pernah sampai. */
.botnav{
  --bn-side:16px;     /* jarak bar ke tepi layar */
  /* Jarak menu terluar ke tepi bar. BUKAN sekadar selera: cekungan selebar ~83px
     mengelilingi menu aktif, jadi menu paling kiri/kanan harus cukup masuk ke
     dalam agar pangkal cekungannya tidak jatuh di sudut bar. Dengan 28px, sudut
     yang tersisa di sisi itu ~20px dari 32px — masih terbaca membulat. */
  --bn-inset:28px;
  --bn-bottom:16px;   /* jarak bar ke dasar layar */
  --bn-h:72px;
  --bn-slide:400ms;
  align-items:stretch;
  height:calc(var(--bn-h) + var(--bn-bottom) + env(safe-area-inset-bottom,0px));
  padding:0 calc(var(--bn-side) + var(--bn-inset)) calc(var(--bn-bottom) + env(safe-area-inset-bottom,0px));
  background:transparent;border:0;border-radius:0;
}
/* Latar lama (kotak penuh + mask takik) dimatikan: badan bar kini path SVG.
   content:none, bukan background:transparent — supaya pseudo-elemennya tidak
   dibuat sama sekali dan aturan-aturan lamanya ikut mati tanpa perlu dihapus. */
.botnav::before,.botnav::after{content:none}
/* Lebar dipatok calc, BUKAN left+right: <svg> itu elemen tergantikan, dan pada
   posisi absolut dengan width:auto ia memakai ukuran bawaannya (300x150) lalu
   mengabaikan `right`. Gejalanya bar jadi 300px di tengah layar. */
.bn-shape{position:absolute;left:var(--bn-side);top:0;z-index:0;
  width:calc(100% - var(--bn-side) * 2);height:var(--bn-h);
  overflow:visible;pointer-events:none}
.bn-path{fill:var(--bn-bg,#242b3a);filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
/* Lingkaran penanda: gradasi + pendar, bukan satu warna rata.
   Ketiga turunan aksennya (--tab-ac-hi/-lo/-glow) dihitung navTabs.ts dari warna
   tema yang sedang dipakai, jadi ini tetap ikut tema — yang berubah cuma cara
   warnanya dipakai. Nilai cadangan di var() = warna bawaan situs, dipakai kalau
   modul itu belum sempat jalan. */
.bn-st1{stop-color:var(--tab-ac-hi,#ffe98a)}
.bn-st2{stop-color:var(--tab-ac,#ffd21e)}
.bn-st3{stop-color:var(--tab-ac-lo,#cca818)}
.bn-dot{fill:url(#bnDotFill);
  /* Tepi tipis warna terang = pantulan cahaya di pinggir bola. Tanpa ini
     lingkaran terlihat "menempel", terutama di atas bar kaca yang buram. */
  stroke:var(--tab-ac-hi,#ffe98a);stroke-width:1;stroke-opacity:.5;
  /* Pendar: dua lapis sewarna aksen (rapat + lebar) supaya jatuhnya lembut,
     lalu satu bayangan gelap sebagai jarak ke bar. Urutannya berarti — yang
     gelap harus TERAKHIR, kalau di depan ia menelan pendarnya. */
  filter:drop-shadow(0 0 6px var(--tab-ac-glow,rgba(255,210,30,.6)))
         drop-shadow(0 0 16px var(--tab-ac-glow,rgba(255,210,30,.6)))
         drop-shadow(0 5px 10px rgba(0,0,0,.38))}

/* ---- KACA (glassmorphism) ----
   backdrop-filter tidak berlaku pada <path> SVG, jadi buramnya dipasang pada
   satu elemen HTML berukuran sama yang DIPOTONG memakai jalur yang sama persis.
   Tanpa potongan itu, buramnya akan berupa PERSEGI — cekungannya tetap terlihat
   di badan bar, tapi latar di dalam takik ikut buram, dan justru itu yang paling
   cepat terlihat salah.

   Jangan pernah membungkus .bn-glass dengan elemen ber-`filter`: `filter`
   membuat backdrop root baru, dan backdrop-filter di dalamnya tidak lagi
   melihat isi halaman — kacanya jadi bening total tanpa error apa pun.
   Itu sebabnya bayangan tetap dipasang pada <path>, bukan pada pembungkus.

   Dipisah ke @supports supaya peramban tanpa clip-path:path() tidak kebagian
   persegi buram; di sana bar tetap berwarna padat seperti sebelumnya. */
.bn-glass{position:absolute;left:var(--bn-side);top:0;z-index:0;
  width:calc(100% - var(--bn-side) * 2);height:var(--bn-h);
  pointer-events:none;display:none}
@supports (clip-path: path("M0 0")) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .bn-glass{display:block;
    -webkit-backdrop-filter:blur(var(--bn-blur,18px)) saturate(150%);
            backdrop-filter:blur(var(--bn-blur,18px)) saturate(150%)}
  /* Isi bar jadi TEMBUS supaya buramnya terlihat. Alfa .52 dipilih sebagai
     batas bawah: di bawah itu label putih mulai bertabrakan dengan banner
     terang yang lewat di belakang bar. */
  .bn-path{fill:var(--bn-glass,rgba(30,37,52,.52));
    stroke:var(--bn-rim,rgba(255,255,255,.16));stroke-width:1;
    filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
  /* Mode terang butuh alfa lebih tinggi daripada mode gelap. Kacanya putih,
     sementara isi halaman di belakangnya tetap gelap dan berwarna terang
     (kartu game); pada .6 warna kartu menembus sampai ke baris label dan
     "Akun"/"Back" terbaca di atas merah muda. */
  body.theme-light .bn-path{fill:var(--bn-glass,rgba(255,255,255,.72));
    filter:drop-shadow(0 8px 22px rgba(0,0,0,.18))}
  body.theme-light .botnav{--bn-glass:rgba(255,255,255,.72);--bn-rim:rgba(255,255,255,.75)}
}

.botnav-item{flex:1;min-width:0;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:0 2px;
  font-size:12px;font-weight:500;letter-spacing:.1px}
.botnav-item::before{content:none}        /* garis penanda lama: tak dipakai lagi */
.botnav-item svg{width:24px;height:24px;stroke-width:1.5;
  transition:transform var(--bn-slide,400ms) cubic-bezier(.4,0,.2,1), color .28s}
/* Sisa gaya "ikon menjadi lingkaran" dari versi mask DINOLKAN di sini.
   Lingkarannya sekarang digambar di dalam SVG; kalau tidak dinolkan, ikon aktif
   membawa lingkaran keduanya sendiri dan terlihat sebagai cincin ganda. */
.botnav-item.active svg{padding:0;border-radius:0;background:none;box-shadow:none;
  box-sizing:border-box;
  color:var(--tab-ac-ink,#111);
  /* Sejak lingkarannya bergradasi, bagian atasnya jauh lebih terang daripada
     warna aksen yang dipakai memutuskan ikon gelap-atau-putih. Bayangan tipis
     ini menahan ikon putih supaya tidak larut di sisi terang itu; pada ikon
     gelap ia cuma menebalkan sedikit, jadi aman untuk kedua pilihan. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
  /* --bn-lift, BUKAN --bn-rise langsung. --bn-rise ditulis JS (hasil ukur) dan
     selalu ada; --bn-lift yang memutuskan apakah varian ini memang mengangkat
     ikonnya. Varian tanpa lingkaran menyetelnya 0. */
  transform:translateY(calc(var(--bn-lift,0px) * -1))}
.botnav{--bn-lift:var(--bn-rise,31px)}
.botnav-item.active{color:var(--tab-ac,#ffd21e);font-weight:700}

/* Mode terang: badan bar putih. Bayangannya ikut dilembutkan — bayangan gelap
   yang sama di atas latar terang terbaca sebagai kotor, bukan sebagai jarak. */
body.theme-light .botnav{--bn-bg:#ffffff}
body.theme-light .bn-path{filter:drop-shadow(0 8px 20px rgba(0,0,0,.16))}

/* Kedua angka ini SELALU bergerak bersama: tinggi bar + jaraknya ke dasar layar
   menentukan penahan isi halaman. */
body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
@media(min-width:860px){
  body{padding-bottom:0}
}
@media(max-width:360px){
  .botnav{--bn-side:10px;--bn-inset:12px}
  .botnav-item{font-size:11px}
}

/* PENGECUALIAN gerak-minimal: perpindahan lingkaran adalah penanda menu aktif,
   bukan hiasan. Cekungannya digerakkan JS (atribut `d` tidak bisa ditransisi
   CSS), jadi tanpa pengecualian ini ikonnya melompat sementara lingkarannya
   meluncur — dua benda yang seharusnya tiba bersamaan jadi berpisah. */
@media (prefers-reduced-motion: reduce){
  .botnav-item svg{transition-duration:var(--bn-slide,400ms) !important}
}


/* ================= VARIAN BAR BAWAH =================
   Dipilih operator di back-office: Loading Style -> Bottom Navigation.
   Kelas bn-v0..bn-v8 dipasang legacyCms.js; bn-v0 = gaya sekarang (bawaan) dan
   ikut ditulis di markup, jadi bar tetap benar walau back-office tak terjangkau.

   ATURAN YANG BERLAKU UNTUK SEMUA VARIAN:
   - Tidak ada warna yang ditulis mati. Contoh yang diberikan memakai #2C2C2E,
     #3A3A3C, #6C4DF6, #7CE23B; semuanya dipetakan ke warna tema (--tab-ac untuk
     penanda, --tab-ac-ink untuk isi di atasnya, --bn-chip untuk permukaan
     netral). Mengganti tema tidak boleh menyisakan bar berwarna lama.
   - Semua tetap 5 menu dan tetap berlabel — struktur situs, bukan struktur
     contoh (yang 4 menu tanpa label).
   - Tiga variabel bentuk dibaca botnavShape.ts: --bn-cekung (1/0),
     --bn-dot-r, --bn-dot-cy. JS memegang angka varian bawaan; varian lain
     menimpanya di sini. Jangan menaruh angka varian di JS.

   PENANDA YANG MELUNCUR: varian yang penandanya garis (V1, V4) memakai
   ::after milik BAR + --bn-cx (ditulis JS tiap frame), bukan ::after milik tiap
   menu. Ditempel ke menu, penandanya berkedip pindah alih-alih bergeser. */
.botnav{--bn-chip:rgba(255,255,255,.1);--bn-ring-col:rgba(10,14,24,.92)}
body.theme-light .botnav{--bn-chip:rgba(0,0,0,.07);--bn-ring-col:rgba(255,255,255,.92)}

/* Semua varian selain bawaan meratakan tepi atas bar dan mematikan lingkaran
   SVG-nya. Yang butuh lingkaran menyalakannya lagi di bloknya sendiri. */
.bn-v1,.bn-v2,.bn-v3,.bn-v4,.bn-v6,.bn-v8{--bn-cekung:0;--bn-dot-r:0px;--bn-lift:0px}

/* Batang penanda meluncur milik bar. Lebar & posisi tegaknya diatur per varian;
   yang disamakan di sini hanya cara geraknya. */
.bn-v1::after,.bn-v4::after{content:"";position:absolute;z-index:1;
  left:var(--bn-side);width:40px;height:3px;background:var(--tab-ac,#ffd21e);
  transform:translateX(calc(var(--bn-cx,0px) - 20px));
  opacity:0;transition:opacity .2s}
.bn-v1.bn-on::after,.bn-v4.bn-on::after{opacity:1}

/* ---- V1: label hanya saat aktif + garis bawah ----
   Label yang tidak aktif disembunyikan dengan opacity, BUKAN display:none —
   ruangnya harus tetap dipesan, kalau tidak ikon menu aktif turun sendiri
   sementara yang lain tidak, dan sederet ikon jadi tidak sebaris. */
.bn-v1 .botnav-item span{opacity:0;transform:translateY(6px);
  transition:opacity .24s, transform .24s cubic-bezier(.4,0,.2,1)}
.bn-v1 .botnav-item.active span{opacity:1;transform:none}
.bn-v1 .botnav-item.active svg{color:var(--tab-ac,#ffd21e)}
.bn-v1::after{bottom:calc(var(--bn-bottom) + env(safe-area-inset-bottom,0px) + 8px);border-radius:3px}

/* ---- V2: pil melebar berisi ikon + teks ----
   flex:1 dilepas: dengan lebar sama rata, pil tidak punya ruang untuk melebar.
   Lebar labelnya yang dianimasikan (max-width), bukan opacity saja, supaya
   pilnya benar-benar tumbuh. */
.bn-v2{justify-content:space-between;align-items:center}
/* Tinggi DIPATOK 44px, tidak dibiarkan meregang. Tanpa itu pil ikut tinggi bar
   (72px) dan hasilnya lonjong setinggi bar — bukan pil. */
.bn-v2 .botnav-item{flex:0 0 auto;flex-direction:row;gap:0;height:44px;padding:0 10px;
  border-radius:999px;transition:background .28s, padding .28s}
.bn-v2 .botnav-item span{max-width:0;margin-left:0;opacity:0;overflow:hidden;
  transition:max-width .34s cubic-bezier(.4,0,.2,1), margin-left .34s cubic-bezier(.4,0,.2,1), opacity .2s}
.bn-v2 .botnav-item.active{background:var(--tab-ac,#ffd21e);color:var(--tab-ac-ink,#111);padding:0 16px}
.bn-v2 .botnav-item.active svg{color:var(--tab-ac-ink,#111)}
.bn-v2 .botnav-item.active span{max-width:96px;margin-left:8px;opacity:1}

/* ---- V3: lingkaran di belakang ikon aktif ----
   Contoh menyebut "ikon berubah jadi filled putih". Ikon situs ini bergaris
   (path terbuka), mengisinya akan jadi gumpalan — jadi kesan "tebal & putih"
   dibuat lewat garis lebih tebal + putih penuh. */
.bn-v3 .botnav-item.active svg{box-sizing:content-box;padding:8px;border-radius:50%;
  background:var(--bn-chip);color:#fff;stroke-width:2.2}
body.theme-light .bn-v3 .botnav-item.active svg{color:#111}
.bn-v3 .botnav-item.active{color:var(--tab-ac,#ffd21e)}

/* ---- V4: garis penanda di tepi ATAS bar ---- */
.bn-v4::after{top:0;border-radius:0 0 3px 3px}
.bn-v4 .botnav-item.active svg{color:var(--tab-ac,#ffd21e)}

/* ---- V5: lingkaran aksen menembus ke atas bar ----
   Tanpa takik. Pemisahnya cincin sewarna latar halaman, seperti contoh —
   itu sebabnya --bn-ring-col bukan warna bar: cincin sewarna bar akan melebur
   dan lingkarannya kembali terlihat menempel. */
.bn-v5{--bn-cekung:0;--bn-dot-r:26px;--bn-dot-cy:-5.2px}
.bn-v5 .bn-dot{stroke:var(--bn-ring-col);stroke-width:6;stroke-opacity:1}

/* ---- V6: kotak membulat + semua berlabel ----
   Isi menu digeser naik (padding-bawah) supaya garis penanda punya tempat
   sendiri. Tanpa itu garisnya jatuh MENYENTUH ekor huruf label — terlihat
   seperti teks bergaris bawah, bukan seperti penanda. */
.bn-v6 .botnav-item{gap:4px;padding-bottom:6px}
.bn-v6 .botnav-item.active svg{box-sizing:content-box;padding:5px 12px;border-radius:14px;
  background:var(--tab-ac,#ffd21e);color:var(--tab-ac-ink,#111)}
.bn-v6 .botnav-item.active{color:var(--tab-ac,#ffd21e)}
.bn-v6 .botnav-item.active::after{content:"";position:absolute;
  bottom:4px;left:50%;transform:translateX(-50%);
  width:40px;height:3px;border-radius:3px;background:var(--tab-ac,#ffd21e)}

/* ---- V7: lingkaran melayang di atas bar ----
   Ikon menu aktif ikut naik ke dalam lingkaran (--bn-lift tetap dipakai), jadi
   slot ikonnya di bar kosong dan labelnya tetap di tempat — persis contoh. */
.bn-v7{--bn-cekung:0;--bn-dot-r:22px;--bn-dot-cy:-38px}

/* ---- V8: kelompok pil terpisah ----
   Tiap menu jadi tombol sendiri, jadi ia harus dipusatkan tegak di dalam bar
   (bar tetap 72px) dan tidak lagi berbagi tinggi penuh. */
.bn-v8{justify-content:center;align-items:center}
.bn-v8 .botnav-item{flex:0 0 auto;flex-direction:row;gap:0;height:44px;min-width:44px;
  padding:0 10px;margin:0 4px;border-radius:14px;background:var(--bn-chip);
  transition:background .28s, padding .28s}
.bn-v8 .botnav-item span{max-width:0;margin-left:0;opacity:0;overflow:hidden;
  transition:max-width .34s cubic-bezier(.4,0,.2,1), margin-left .34s cubic-bezier(.4,0,.2,1), opacity .2s}
.bn-v8 .botnav-item.active{background:var(--tab-ac,#ffd21e);color:var(--tab-ac-ink,#111);padding:0 14px}
.bn-v8 .botnav-item.active svg{color:var(--tab-ac-ink,#111)}
.bn-v8 .botnav-item.active span{max-width:96px;margin-left:8px;opacity:1}

/* Layar sempit: pil berlabel butuh ruang lebih. Ikon dikecilkan sedikit dan
   jarak antar tombol dirapatkan supaya lima menu tetap muat tanpa terpotong. */
@media(max-width:380px){
  .bn-v2 .botnav-item{padding:0 6px}
  .bn-v2 .botnav-item.active{padding:0 12px}
  .bn-v2 .botnav-item.active span,.bn-v8 .botnav-item.active span{max-width:74px}
  .bn-v8 .botnav-item{margin:0 2px;padding:0 7px;min-width:40px}
}

/* ===== Pembuka panel akun: tab tepi kanan (mobile) vs garis-tiga (desktop) =====
   Tab `«` di tepi kanan dirancang untuk jempol — di desktop ia melayang di
   tengah tepi layar tanpa alasan dan tidak pernah tersentuh tetikus. Di sana
   tugasnya diambil tombol garis-tiga di header, sebelah kiri logo.

   Keduanya memanggil openProf() yang SAMA (lihat account.ts); tidak ada dua
   logika buka yang bisa berselisih.

   display:flex!important wajib: aturan `.burger{display:none!important}` di
   bagian atas berkas ini juga memakai !important, jadi tanpa itu tombolnya
   tidak akan pernah muncul. Aturan lama itu dibiarkan — ia yang menyembunyikan
   tombol ini di mobile. */
@media(min-width:860px){
  .side-access{display:none}
  /* Panel akun muncul dari KIRI di desktop, mengikuti letak tombol garis-tiga
     di pojok kiri header — panel yang terbuka jauh dari tombol yang membukanya
     membuat mata harus menyeberangi layar.
     Aturannya SUDAH TIDAK DI SINI (7 Agustus 2026): sisi panel kini dapat
     dipilih operator di back-office, jadi ketiga hal yang harus berbalik
     bersama (sisi menempel, arah animasi, arah bayangan) pindah ke blok
     "SISI PANEL AKUN" di akhir berkas, di bawah kelas body.panel-kiri.
     Perilaku desktop-dari-kiri tetap jadi BAWAAN lewat pilihan "Otomatis". */
  /* Tanpa kotak: latar & garis tepi sengaja dikosongkan, mengikuti contoh —
     yang terlihat hanya dua garis berpendar. Ukuran 40x40 tetap dipertahankan
     sebagai AREA SENTUH; tombol setinggi garisnya saja (7px) hampir mustahil
     dikenai dengan rapi. */
  .burger{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:40px;height:40px;flex:0 0 40px;padding:0;cursor:pointer;
    background:none;border:0;border-radius:10px;
    /* Pendar dipasang di TOMBOLNYA, bukan di tiap garis: satu lapis filter untuk
       ketiga garis, dan halonya menyatu alih-alih terbaca sebagai tiga halo
       bertumpuk di celahnya. Dua lapis tipis (3px rapat + 7px lebar) memberi
       kesan neon; satu lapis tebal hanya terlihat seperti gambar buram. */
    filter:drop-shadow(0 0 3px var(--tab-ac-glow,rgba(90,155,245,.6)))
           drop-shadow(0 0 7px var(--tab-ac-glow,rgba(90,155,245,.6)));
    transition:filter .18s, transform .18s}
  .burger:hover{filter:drop-shadow(0 0 4px var(--tab-ac,#5a9bf5))
                       drop-shadow(0 0 11px var(--tab-ac,#5a9bf5))}
  .burger:active{transform:scale(.94)}
  /* Ujungnya BULAT PENUH (999px), bukan radius 3px: pada garis setinggi 3px,
     radius 3px sudah membulat tapi masih menyisakan sisi lurus yang terlihat
     sebagai kapsul terpotong saat diperbesar.
     Warnanya nyaris putih tapi TETAP turunan tema (aksen + 46% putih), jadi ikut
     berganti tanpa pernah jadi gelap di atas header gelap. */
  .burger span{width:22px;height:3px;border-radius:999px;background:var(--tab-ac-hi,#eef2ff)}
  /* Garis TENGAH sedikit lebih panjang. align-items:center pada tombolnya yang
     membuat kelebihannya terbagi rata ke dua sisi — tanpa itu ia hanya melebar
     ke kanan dan terlihat seperti salah rata, bukan seperti bentuk. */
  .burger span:nth-child(2){width:26px}
}

/* ================= BLOK PROVIDER =================
   Mengikuti contoh dari operator: judul berikon, dua panah + "View All" di
   kanan, lalu satu BARIS kartu yang bisa digeser.

   Dulu ini grid 3 kolom yang menyembunyikan provider ke-4 dan seterusnya lewat
   `nth-child(n+4){display:none}`. Aturan itu dimatikan di bawah — pada baris
   geser, menyembunyikan kartu berarti kartu yang sudah muat pun ikut hilang.

   PERMUKAAN KARTU SENGAJA NETRAL, tidak ikut warna tema. Logo provider datang
   dengan warnanya masing-masing (merah, kuning, hijau); di atas kartu biru
   pekat seperti sebelumnya, logo merah nyaris tak terbaca. Warna tema tetap
   masuk lewat --prov-ac (garis tepi & sorotan), yang ditulis applyBtnGroup. */
/* --prov-ink SENGAJA tidak memakai --txt-strong. Variabel itu DITURUNKAN dari
   warna tema (darken(c1)) dan pada tema gelap nilainya ikut gelap — ikon, panah,
   dan "View All" jadi nyaris tak terlihat di atas latar gelap. Terbukti di
   potret uji: ketiganya hilang jadi bayangan merah tua. */
.block{--rail-ink:#e9eefb}
body.theme-light .block{--rail-ink:#1b2230}

.rail-head{gap:10px}
.rail-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px}
.rail-mark svg{width:19px;height:19px;fill:var(--rail-ink);opacity:.9}
.rail-head h2{margin-right:auto}

.rail-nav{display:flex;align-items:center;gap:8px}
.rail-arrow{width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--rail-bg,rgba(255,255,255,.06));
  border:1px solid var(--rail-line,rgba(255,255,255,.14));
  color:var(--rail-ink);transition:border-color .18s, background .18s, opacity .18s}
.rail-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rail-arrow:hover:not(:disabled){border-color:var(--rail-ac,var(--tab-ac,#5a9bf5))}
/* Mentok di ujung: diredupkan, BUKAN disembunyikan. Tombol yang hilang-timbul
   membuat isi header bergeser tiap kali baris digulir. */
.rail-arrow:disabled{opacity:.34;cursor:default}
.rail-all{display:flex;align-items:center;height:34px;padding:0 14px;
  border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--rail-bg,rgba(255,255,255,.06));
  border:1px solid var(--rail-line,rgba(255,255,255,.14));
  color:var(--rail-ink);transition:border-color .18s}
.rail-all:hover{border-color:var(--rail-ac,var(--tab-ac,#5a9bf5))}

/* Baris geser. `display:grid` dari .prov-grid ditimpa flex supaya kartunya
   berbaris satu jalur; grid-auto-flow:column juga bisa, tapi flex lebih mudah
   dibaca dan tidak butuh menghapus grid-template-columns lamanya. */
.prov-grid.prov-rail{display:flex;grid-template-columns:none;gap:10px;
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Kartu terakhir tidak menempel tepi layar saat digeser mentok. */
  padding-bottom:2px}
.prov-grid.prov-rail::-webkit-scrollbar{display:none}
/* Aturan lama menyembunyikan kartu ke-4 dst di layar sempit DAN kartu ke-7 dst
   di desktop — dua aturan terpisah, dan yang desktop hampir terlewat: di 1280px
   kartu ke-7 hilang tanpa gejala apa pun selain "kok providernya cuma enam".
   Pada baris geser keduanya salah: yang tak muat memang sudah bisa dijangkau
   dengan menggeser. */
@media(max-width:859px){
  .prov-grid.prov-rail > .prov-chip:nth-child(n+4){display:flex}
}
@media(min-width:860px){
  .prov-grid.prov-rail > .prov-chip:nth-child(n+7){display:flex}
}

.prov-grid.prov-rail > .prov-chip{
  flex:0 0 auto;width:var(--prov-w,132px);min-height:54px;
  background:var(--prov-bg,rgba(255,255,255,.05));
  border:1px solid var(--prov-line,rgba(255,255,255,.12));
  border-radius:10px;box-shadow:none;padding:10px 12px;
  transition:border-color .18s, background .18s, transform .18s}
.prov-grid.prov-rail > .prov-chip:hover{
  transform:none;filter:none;
  background:var(--prov-bg-h,rgba(255,255,255,.09));
  border-color:var(--prov-ac,#5a9bf5)}
.prov-grid.prov-rail .prov-logo{max-height:var(--prov-size,26px)}

body.theme-light .prov-block{
  --prov-bg:rgba(0,0,0,.04);
  --prov-bg-h:rgba(0,0,0,.07);
  --prov-line:rgba(0,0,0,.12)}

@media(max-width:520px){
  .prov-grid.prov-rail{--prov-w:114px}
  .rail-all{padding:0 11px}
}

/* ===== Sisa HIJAU pada tombol DAFTAR dibuang =====
   Latar tombol ini sudah lama mengikuti warna CTA tema (applyBtnGroup menulis
   `background` inline), tapi tiga hal hijau ikut tertinggal sebagai angka mati
   dan baru terlihat setelah temanya diganti jadi merah muda:
     1. garis tepi #2f7d12 di keempat sisi (#btnRegister/#profGuestReg)
     2. bayangan TEKS hijau #2c7a08 (.pill-green)
     3. bibir bawah + garis tepi hijau pada tombol "Daftar!" besar (.join-now)
   Bibir 3D-nya sendiri sudah dimatikan blok sebelumnya; yang tersisa justru
   warnanya, yang jauh lebih mencolok karena tidak lagi terbaca sebagai bayangan.

   border-color:transparent, BUKAN border:0 — tebalnya dipertahankan supaya
   ukuran tombol tidak berubah sedikit pun saat garisnya dihilangkan.

   Tombol LOG IN tidak ikut disebut di sini karena memang tidak pernah punya
   hijau: ia .pill-outline (latar tembus, garis tepi putih). */
#btnRegister, #profGuestReg{
  border-color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.pill-green{text-shadow:0 1px 2px rgba(0,0,0,.3)}

.join-now{
  border-color:transparent;
  /* Bibir hijau `0 6px 0 #2c7a08` dibuang; bayangan jatuh, kilau dalam, dan
     pendar aksen dipertahankan supaya tombolnya tidak jadi datar sama sekali. */
  box-shadow:0 8px 16px rgba(0,0,0,.38),
             inset 0 1px 0 rgba(255,255,255,.6),
             0 0 13px -2px var(--tab-ac,#ffd21e);
}
.join-now:active{
  transform:translateY(2px);
  box-shadow:0 4px 9px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ===== Sisa HIJAU pada tombol AKSI DI DALAM DIALOG dibuang =====
   Blok di atas hanya menyentuh tombol di HEADER, PANEL, dan HERO. Empat kelas
   lain memakai perlakuan yang sama persis dan terlewat, karena hijaunya baru
   terlihat setelah dialognya dibuka:

     .reg-submit    Log In, Daftar, Verifikasi      bibir 4px #2f7d12
     .depo-confirm  Konfirmasi Deposit, Simpan Data, Konfirmasi Penarikan,
                    Lanjutkan Pembayaran QRIS, Saya Sudah Bayar   bibir 4px
     .tg-submit     KIRIM BET                       bibir 5px
     .jn-label      teks "Daftar!" di hero          garis teks #256210

   Latar keempatnya sudah lama mengikuti warna tema; yang tertinggal sebagai
   angka mati adalah bibir bawah dan GARIS TEPI HURUFNYA. Garis teks itu yang
   paling mudah luput: ia bukan bayangan tombol, tapi hijau setebal 2px yang
   melingkari setiap huruf, dan di atas tombol merah ia terbaca sebagai kotor.

   border-bottom-width:0, bukan border-color:transparent seperti blok di atas —
   ketiganya memakai `border:0` lalu menambahkan SATU sisi bawah, jadi tidak ada
   sisi lain yang perlu dijaga tebalnya.

   TIDAK diikutkan: .bank-dot. Hijaunya di sana bukan hiasan 3D melainkan
   penanda status ONLINE, dan merah/kuningnya punya arti yang berbeda. */
.reg-submit, .depo-confirm, .tg-submit{
  border-bottom-width:0;
  -webkit-text-stroke-width:0;
}
/* .tg-submit satu-satunya yang tidak punya text-shadow sendiri; tanpa pengganti
   ini hurufnya kehilangan seluruh pemisah dari latar terang tombolnya. */
.tg-submit{text-shadow:0 1px 2px rgba(0,0,0,.3)}
.jn-label{-webkit-text-stroke-width:0;text-shadow:0 2px 3px rgba(0,0,0,.45)}

/* ===== Kode negara +62 pada kolom Nomor Telepon (form Daftar) =====
   Label MATI, bukan isi awal kolom. Kalau kode negaranya ikut bisa diketik,
   tiap pendaftar menuliskannya dengan cara berbeda (+62 / 62 / 0 / spasi) dan
   nomornya jadi tak seragam di data — persoalan yang baru ketahuan belakangan,
   saat OTP mulai gagal terkirim.

   flex:0 0 auto wajib: aturan `.reg-field input,.reg-sel` memakai flex:1, dan
   tanpa penahan ini label ikut melar dan mendorong kolom isiannya menyempit. */
.reg-cc{flex:0 0 auto;display:flex;align-items:center;
  padding:0 2px 0 12px;cursor:text;user-select:none;
  font-size:13px;font-weight:700;letter-spacing:.3px;
  color:var(--rf-text,#e6eeff);opacity:.8}
.reg-cc + input{padding-left:6px}

/* Kaca dimatikan operator: badan bar kembali berwarna padat. Cukup mengembalikan
   isi <path> dan menyembunyikan lapisan buramnya — bentuk & penandanya tidak
   ikut berubah. !important dipakai karena aturan @supports kaca di atas juga
   menang atas urutan biasa. */
.bn-kaca-off .bn-glass{display:none !important}
.bn-kaca-off .bn-path{fill:var(--bn-bg,#242b3a) !important}
body.theme-light .bn-kaca-off .bn-path{fill:#ffffff !important}

/* ================= SISI PANEL AKUN (kiri / kanan) =================
   Dipilih operator di back-office: Loading Style -> Panel Akun.

   Situs hanya mengenal DUA keadaan: ada kelas `panel-kiri` atau tidak. Pilihan
   "Otomatis" diselesaikan panelSide.ts menjadi salah satu dari keduanya, dengan
   membaca --panel-bp di bawah — supaya titik-putus 860px hidup di SATU tempat
   saja, bukan disalin ke JavaScript. Itu juga sebabnya blok
   `@media(min-width:860px)` yang dulu memaksa panel ke kiri di desktop sudah
   dicabut: sekarang JS yang memasang kelasnya, dan aturan CSS tetap satu jalur.

   DELAPAN hal harus berbalik bersama. Melewatkan satu saja menghasilkan cacat
   yang halus: panel di kiri tapi tab tarik masih di kanan, atau bayangan jatuh
   ke dalam layar dan terlihat seperti garis kotor di tepi panel. */
:root{--panel-bp:860px}

/* 1. sisi tempat panel menempel */
body.panel-kiri .prof-overlay{justify-content:flex-start}
/* 2. bayangan dibuang ke LUAR layar, bukan menimpa isi halaman
   3. animasi masuk datang dari -30px, bukan +30px */
body.panel-kiri .prof-panel{box-shadow:12px 0 40px rgba(0,0,0,.5);animation:profInKiri .25s ease}
/* 4. tab tarik pindah ke tepi kiri
   5. bayangan tab ikut berbalik supaya tetap jatuh ke luar layar */
body.panel-kiri .side-access{right:auto;left:0;filter:drop-shadow(2px 4px 7px rgba(0,0,0,.42))}
/* 6. daun tab dicerminkan — bentuknya digambar menempel di tepi KANAN (path
   dimulai di x=44), jadi tanpa ini ia menghadap ke arah yang salah.
   Dicerminkan di ANAKNYA, bukan di tombolnya: transform tombol dipakai JS untuk
   animasi tarik-geser, dan menumpuk scaleX di sana membuat keduanya bertengkar.
   Daunnya TIDAK ikut berbalik saat panel terbuka: ia selalu menggembung menjauh
   dari panel, baik panel tertutup (menempel tepi layar) maupun terbuka
   (menempel tepi panel). */
body.panel-kiri .side-access .sa-shape{transform:scaleX(-1)}
/* 7. jarak panah mengikuti sisi yang baru */
body.panel-kiri .side-access .sa-chev2{margin-left:0;margin-right:7px}

/* 8. ARAH PANAH — dua hal menentukannya sekaligus, jadi dipakai satu variabel
   supaya keempat gabungannya bisa ditulis eksplisit dan tidak saling menimpa
   secara kebetulan:

     panel di KANAN, tertutup  «  tarik ke kiri untuk MEMBUKA
     panel di KANAN, terbuka   »  dorong ke kanan untuk MENUTUP
     panel di KIRI,  tertutup  »  tarik ke kanan untuk MEMBUKA
     panel di KIRI,  terbuka   «  dorong ke kiri untuk MENUTUP

   Panah yang tidak ikut berbalik saat panel terbuka menunjuk ke arah "buka
   lebih jauh" — arah yang tidak ada, dan pemain membacanya sebagai tombol yang
   macet. Baris keempat WAJIB ada: dua pembalikan saling meniadakan, dan tanpa
   menuliskannya panel-kiri-terbuka akan menunjuk ke arah yang salah. */
.side-access .sa-chev2{transform:scaleX(var(--sa-chev-x,1));transition:transform .22s ease}
body.prof-open .side-access .sa-chev2{--sa-chev-x:-1}
body.panel-kiri .side-access .sa-chev2{--sa-chev-x:-1}
body.panel-kiri.prof-open .side-access .sa-chev2{--sa-chev-x:1}