/* ==========================================================
   KANGTOTO — Base / Desktop Stylesheet
   Arah desain: kepadatan pasar Indonesia, tapi sistematis.
   Semua ukuran & warna lewat token di :root — jangan hardcode.
   Aturan mobile ada di mobile.css (dimuat SESUDAH file ini).
   ========================================================== */

/* ----------------------------------------------------------
   1. TOKEN
   Nilai di bawah = DEFAULT. Nanti ditimpa inc/theme.php
   dari tabel `theme_settings`.
   Varian *-rgb dipakai untuk rgba() supaya ikut ganti tema.
   ---------------------------------------------------------- */
:root{
  /* dasar: grafit netral (R=G=B). Semburat warna sedikit pun bikin
     silver terbaca ikut berwarna, bukan logam. */
  --bg:#101113;            --bg-rgb:16,17,19;
  --bg-soft:#1a1c1f;       --bg-soft-rgb:26,28,31;
  --bg-elev:#24262a;
  --bg-sunken:#0a0b0c;

  /* Latar halaman. URL atau file lokal; "none" untuk latar polos.
     --bg-scrim: 0-1, peredup agar teks tetap terbaca di atas gambar terang. */
  --bg-image:none;
  --bg-scrim:.62;

  /* Logo dipakai di header, drawer, footer, DAN kartu sambutan halaman
     tentang — empat tempat, satu token.
     --logo-ratio WAJIB = dimensi asli file, kalau meleset logo tampil mengecil.

     BERKASNYA BERAT: logo.gif itu animasi 162 frame, 1.045 KB — lima kali
     lipat seluruh CSS + JS situs ini digabung (207 KB), dan dimuat di
     SETIAP halaman. Untuk situs yang patokannya jaringan seluler dan
     Android kelas menengah ke bawah, itu satu megabita sebelum sebaris
     pun isi halaman tampil, ditambah 162 frame yang terus didekode.

     Versi diam frame pertamanya ada di img/kangtoto-logo.png — 7,6 KB, atau
     0,7% dari ukuran aslinya. Tinggal tukar barisnya kalau mau dipakai. */
  /* logo-diam.png (8 KB), BUKAN logo.gif (1.045 KB).
     Versi animasinya 162 frame dan sendirian lebih berat daripada seluruh
     CSS + JS situs ini digabung — di 4G itu sekitar tiga detik hanya untuk
     logo, di header yang muncul di SETIAP halaman.
     Mau animasinya kembali: ganti baris ini ke url('img/logo.gif'). */
  --logo-image:url('img/kangtoto-logo.png');
  --logo-ratio:2172/724;    /* dimensi asli berkas, sudah diperiksa */
  --logo-h:44px;

  /* auto = kotak mengikuti gambar, tidak ada yang terpotong.
     Isi angka (mis. 3/1) kalau ukuran banner campur dan ingin tinggi seragam;
     yang tidak pas akan dipotong oleh --banner-fit (cover/contain). */
  --banner-ratio:auto;
  --banner-fit:cover;

  /* Cadangan kalau game belum punya gambar atau nama filenya salah. */
  --tile-img-default:url('img/game-default.svg');

  /* Teks ikut netral, kalau tidak jadi kebiruan di atas grafit.
     Nilai --muted dan --dim ditentukan dari kontras, bukan selera:
     keduanya harus lolos 4.5:1 di latar TERTERANG tempat mereka muncul,
     yaitu --bg-elev #24262a (panel drawer & popup). Menggelapkan
     salah satunya akan menjatuhkannya di bawah standar. */
  --text:#f2f3f4;
  --muted:#a5a8ae;
  --dim:#8b8f97;

  /* PRIMER = aksi, brand, status aktif.
     Silver rata terbaca seperti tombol disabled — kilaunya ada di --grad-pri. */
  --pri:#ffd600;           --pri-rgb:255,214,0;
  --pri-lt:#fff08a;        /* titik pantul cahaya */
  --pri-dk:#b88600;        /* sisi bayangan */
  --on-pri:#0d1017;        /* teks gelap di atas permukaan silver */

  /* AKSEN = nilai: jackpot, RTP, premium. Selalu rata (info),
     lawan dari primer yang selalu bergradasi (bisa diklik). */
  --acc:#e9eff8;           --acc-rgb:233,239,248;
  --acc-lt:#ffffff;
  --acc-dk:#b9c4d4;
  --on-acc:#0d1017;

  /* URGENSI = badge HOT & angka notifikasi. Sengaja tidak ikut ganti tema:
     merah di badge notifikasi itu konvensi universal, bukan identitas brand. */
  --hot:#f0353a;           --hot-rgb:240,53,58;
  --hot-lt:#ff6b63;        /* dipakai untuk TEKS galat. --hot sendiri jatuh di
                              4.2:1 atas --bg-soft, di bawah ambang 4.5:1;
                              yang ini 6.0:1. --hot tetap dipakai untuk garis
                              tepi dan bidang berisi, di situ ambangnya 3:1. */
  --hot-dk:#b81d29;
  --on-hot:#ffffff;

  /* VIP = tingkat keanggotaan. Bersama --hot, penahan agar palet tidak abu total. */
  --vip:#8b5cf6;           --vip-rgb:139,92,246;
  --vip-dk:#6431d4;

  /* -- status -- */
  --green:#22c55e;         --green-rgb:34,197,94;

  /* Warna meter RTP menurut nilainya. Token terpisah dari palet brand
     karena ini indikator baca-cepat, bukan identitas — warnanya harus
     tetap merah/kuning/hijau walau tema brand-nya diganti. */
  --rtp-1:#f0353a;   /* < 40  */
  --rtp-2:#ff8a3d;   /* 40-59 */
  --rtp-3:#ffc72c;   /* 60-79 */
  --rtp-4:#22c55e;   /* >= 80 */

  /* -- gradient (wajib dipakai di permukaan penting) -- */

  /* 4 titik henti: terang -> dasar -> gelap -> terang lagi.
     Pengulangan terang di ujung itu yang bikin permukaannya terbaca sebagai logam. */
  --grad-pri:linear-gradient(135deg,var(--pri-lt) 0%,var(--pri) 34%,var(--pri-dk) 64%,var(--pri-lt) 100%);
  --grad-acc:linear-gradient(135deg,var(--acc-lt) 0%,var(--acc) 45%,var(--acc-dk) 100%);
  --grad-hot:linear-gradient(135deg,var(--hot-lt) 0%,var(--hot) 55%,var(--hot-dk) 100%);
  --grad-vip:linear-gradient(135deg,#a78bfa 0%,var(--vip) 50%,var(--vip-dk) 100%);
  /* Permukaan kartu, WAJIB opak: kilau di atas, --bg-soft padat di bawah.
     Kalau tembus pandang, --bg-image bocor menembus kartu. */
  --grad-surface:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),
    linear-gradient(var(--bg-soft),var(--bg-soft));

  /* -- garis & permukaan netral -- */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.045);

  /* -- skala jarak (padat, kelipatan 4) -- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;

  /* -- radius -- */
  --r1:8px; --r2:12px; --r3:16px; --rp:999px;

  /* -- tipografi: kecil & rapat, bukan editorial -- */
  --f-xs:11px; --f-sm:12px; --f-md:13px; --f-base:14px;
  --f-lg:16px; --f-xl:19px; --f-2xl:24px; --f-3xl:30px;

  /* Emas khusus label syarat di kartu promo. Terpisah dari palet brand
     karena artinya soal uang yang harus disetor, bukan identitas. */
  --syarat:#ffc72c;        --syarat-rgb:255,199,44;

  /* jeda ganti kotak bonus di halaman daftar; batang indikatornya
     terisi tepat selama ini juga, karena keduanya pakai token yang sama */
  --bonus-laju:5s;

  /* Rasio area gambar di kartu promo. Dipakai DUA tempat: .promo__img
     (kartu di beranda dan /promosi) dan .modal__seni (kepala popup
     rinciannya), jadi keduanya tidak pernah bisa melenceng.

     3/2, BUKAN 21/9 seperti sebelumnya. Alasannya bukan selera:
     21/9 = 2,33 itu bentuk spanduk, sementara art promo yang dipakai
     situs ini bentuk poster — yang pertama diunggah 1200x780 (rasio
     1,54), dan latarnya `cover`, jadi CSS memotong sendiri 34% tinggi
     gambar dari tengah. Yang hilang persis dua bagian yang paling
     menentukan: logo situs di kanan atas, dan mobil/HP hadiah di
     bawah. Tidak ada galat, tidak ada tanda — gambarnya cuma
     kelihatan "kurang".

     Kotaknya yang mengalah, bukan gambarnya. Art promo datang dari
     desainer dalam bentuk poster dan akan terus begitu; memaksa tiap
     kiriman dipotong jadi spanduk berarti tiap promo baru kehilangan
     bagiannya lagi. Di 3/2 sisa potongannya 1,3% di kiri-kanan —
     margin kosong, bukan isi.

     Ongkosnya: kartu promo jadi ~55% lebih tinggi. Itu ditukar dengan
     gambar yang isinya benar-benar sampai. */
  --promo-ratio:3/2;

  /* Cincin petir di kartu profil. Dua angka ini yang disetel:
     tebal cincin, dan berapa lama sekali kilatnya berkeliling. */
  --petir-tebal:2px;
  --petir-laju:3s;

  --ease:cubic-bezier(.22,1,.36,1);
  --container:1240px;
  --header-h:66px;   /* dinaikkan mengikuti --logo-h:44px, sisa ruang 11px atas-bawah */
}

/* ----------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* Warna dasar di <html>, body transparan. Kalau body punya background sendiri,
   browser menaikkannya jadi warna kanvas dan menimbun lapisan ::before/::after. */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--f-base);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ::before = gambar (-2), ::after = peredup + kilau (-1).
   Peredup wajib: tiap gambar punya area terang tempat teks putih hilang.
   position:fixed, bukan background-attachment:fixed (yang itu berat di Android murah). */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(var(--bg-rgb),calc(var(--bg-scrim) - .12)) 0%,
      rgba(var(--bg-rgb),var(--bg-scrim)) 55%,
      rgba(var(--bg-rgb),calc(var(--bg-scrim) + .08)) 100%),
    radial-gradient(1100px 520px at 50% -8%,rgba(var(--pri-rgb),.10),transparent 68%),
    radial-gradient(820px 460px at 100% 102%,rgba(var(--vip-rgb),.08),transparent 62%);
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* ol ikut direset. Dulu cuma ul, dan begitu ada <ol> pertama (indikator
   langkah di daftar.php) dia langsung bawa indent 40px + nomor bawaan. */
ul,ol{list-style:none;padding:0;margin:0}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.01em}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s4)}

/* ----------------------------------------------------------
   3. RUNNING TEXT (marquee pengumuman)
   ---------------------------------------------------------- */
/* di bawah slider, ikut lebar container agar tepinya sejajar banner */
.ticker{
  display:flex;align-items:center;gap:var(--s3);
  margin-top:var(--s3);
  height:34px;overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r1);
}
.ticker__tag{
  flex:none;display:flex;align-items:center;gap:6px;
  height:100%;padding:0 var(--s3);
  background:var(--grad-pri);color:var(--on-pri);
  font-size:var(--f-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.ticker__tag svg{width:12px;height:12px}
.ticker__track{flex:1;overflow:hidden;position:relative}
.ticker__move{
  display:inline-flex;gap:var(--s8);white-space:nowrap;
  font-size:var(--f-sm);color:var(--muted);
  animation:slide 28s linear infinite;
  will-change:transform;
}
.ticker__move b{color:var(--acc);font-weight:700}
.ticker:hover .ticker__move{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;
  height:var(--header-h);
  background:rgba(var(--bg-rgb),.92);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:var(--s5);height:100%}

/* Logo = gambar penuh tanpa teks. Sengaja background-image, bukan <img>,
   supaya satu token mengganti logo di header + drawer + footer sekaligus.
   Tiap pemakaian wajib aria-label karena tidak ada teks di dalamnya. */
.logo{
  display:block;flex:none;
  height:var(--logo-h);
  aspect-ratio:var(--logo-ratio);
  background:var(--logo-image) left center/contain no-repeat;
}
.logo--lg{height:calc(var(--logo-h) * 1.3)}

/* Isinya 10 kategori, jadi harus muat di layar desktop yang sempit juga.
   min-width:0 + overflow-x wajib berpasangan: tanpa min-width:0 sebuah
   flex item menolak menyusut di bawah lebar isinya, dan navnya akan
   mendorong tombol Masuk/Daftar keluar layar alih-alih menggulir. */
.mainnav{
  display:flex;gap:2px;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:7px 9px;border-radius:var(--r1);
  font-size:var(--f-sm);font-weight:700;color:var(--muted);
  white-space:nowrap;
  transition:color .18s,background .18s;
}
/* ikon memakai path yang sama persis dengan strip .cats,
   fill:currentColor supaya ikut warna teks saat hover/aktif */
.mainnav svg{width:14px;height:14px;flex:none;fill:currentColor}
.mainnav a:hover,.mainnav a.on{color:var(--text);background:var(--glass)}
.mainnav a.on{color:var(--pri)}

/* Strip kategori di bawah marquee khusus layar kecil — di desktop
   isinya sudah pindah ke .mainnav, jadi tidak perlu tampil dua kali. */
@media (min-width:701px){ #kategori{display:none} }

.hdr__act{display:flex;align-items:center;gap:var(--s2);margin-left:auto}

/* Jam. Dihitung sebagai WIB (UTC+7), bukan jam perangkat — kalau
   labelnya WIB tapi angkanya ikut zona waktu pengunjung, itu salah
   buat siapa pun yang tidak sedang di WIB.
   tabular-nums supaya lebarnya tetap dan angkanya tidak bergoyang
   tiap detik berganti. */
/* JAM: HP SAJA. Berkas ini yang jadi dasar desktop, jadi disembunyikan
   di sini dan dihidupkan lagi mobile.css di <=700px.
   Gaya lainnya sengaja TETAP ditulis di sini walau di desktop tidak
   terpakai — di HP jamnya cuma dipindah posisi, bukan dibentuk ulang.
   Kalau seluruh gayanya ikut dipindah ke mobile.css, aturan yang sama
   jadi hidup di dua berkas. */
.jam{
  display:none;align-items:center;gap:6px;flex:none;
  padding:5px var(--s3);border-radius:var(--r1);
  background:var(--glass);border:1px solid var(--line);
  color:var(--muted);
}
.jam svg{width:14px;height:14px;flex:none}
.jam b{
  font-size:var(--f-md);font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.jam span{font-size:9px;font-weight:700;color:var(--dim);letter-spacing:.06em}

/* ----------------------------------------------------------
   4b. DRAWER (menu mobile)
   Panel geser khusus layar kecil, terpisah dari .mainnav (nav desktop) —
   digabung berarti ikon & tombol di sini ikut muncul di nav desktop.
   ---------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
@media (min-width:701px){.drawer{display:none}}

.drawer__veil{
  position:absolute;inset:0;
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s var(--ease);
}
.drawer.open .drawer__veil{opacity:1}

.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(86vw,330px);
  display:flex;flex-direction:column;
  background:var(--bg-elev);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.9);
  transform:translateX(100%);
  transition:transform .3s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.open .drawer__panel{transform:none}

.drawer__top{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--line);
}
.drawer__x{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--muted);
  transition:color .18s,border-color .18s;
}
.drawer__x:hover{color:var(--text);border-color:var(--line-2)}
.drawer__x svg{width:15px;height:15px}

.drawer__auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2);padding:var(--s4)}

.drawer__nav{padding:0 var(--s3) var(--s3);display:grid;gap:2px}
.drawer__label{
  font-size:var(--f-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);padding:var(--s4) var(--s2) 6px;
}
/* Tombol Keluar ikut dipilih di sini karena dia BUKAN <a> lagi — dia
   <button> di dalam <form method="post">. Tautan GET ke /keluar cuma
   merender halaman "kamu sudah keluar" tanpa menghancurkan sesinya;
   lihat catatannya di resources/views/bagian/akunbar.blade.php. Yang berubah cuma
   elemennya, jadi bentuknya disamakan di sini supaya tidak ada yang
   perlu melihat bedanya. */
.drawer__nav a,
.drawer__nav .drawer__keluar button{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px var(--s2);border-radius:var(--r1);
  font-size:var(--f-base);font-weight:600;
  transition:background .18s;
}
.drawer__nav .drawer__keluar{display:contents}
.drawer__nav .drawer__keluar button{
  width:100%;border:0;background:none;color:inherit;
  font-family:inherit;text-align:left;cursor:pointer;
}
.drawer__nav a:hover,.drawer__nav a.on,
.drawer__nav .drawer__keluar button:hover{background:var(--glass)}
.drawer__nav a.on{color:var(--pri)}
.drawer__nav em{font-style:normal;flex:1;min-width:0}

.drawer__ic{
  width:32px;height:32px;flex:none;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--pri);
}
.drawer__ic svg{width:16px;height:16px}

.drawer__cnt{
  flex:none;font-size:var(--f-xs);font-weight:800;
  padding:2px 7px;border-radius:var(--rp);
  background:var(--glass);color:var(--muted);
}
.drawer__cnt--hot{background:var(--grad-hot);color:var(--on-hot)}
.drawer__arw{flex:none;width:13px;height:13px;color:var(--dim)}

.drawer__foot{margin-top:auto;padding:var(--s4);border-top:1px solid var(--line)}
.drawer__wa{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s3);border-radius:var(--r1);
  background:linear-gradient(135deg,#3ee07a,#1faa53);color:#05270f;
}
.drawer__wa svg{width:19px;height:19px;flex:none}
.drawer__wa b{display:block;font-size:var(--f-md);font-weight:800;line-height:1.3}
.drawer__wa span{display:block;font-size:var(--f-xs);font-weight:600;opacity:.72}

/* ----------------------------------------------------------
   4c. STATE TAMU / SUDAH MASUK

   Seluruh perbedaannya dikendalikan SATU class di <body>:
     <body>               -> tamu
     <body class="masuk"> -> sudah masuk

   Kedua versi ditulis di HTML, CSS yang memilih mana yang tampil.
   Tidak perlu file kedua dan tidak perlu JavaScript. Nanti tinggal
   backend yang menuliskan class itu.
   ---------------------------------------------------------- */

/* -- bar akun: duduk tepat di bawah marquee, hanya di desktop.
      Di HP isinya sudah ada di dalam drawer, jadi disembunyikan
      lewat mobile.css supaya tidak tampil dua kali. -- */
/* Cincin petir yang berlari mengelilingi kartu.
   Caranya: satu lapisan conic-gradient PERSEGI diputar di belakang kartu,
   lalu ditutup panel isi yang lebih kecil 2px — sisa 2px di tepi itulah
   yang terlihat sebagai kilat berjalan.

   Yang dianimasikan cuma `rotate`, jadi dikomposit GPU. Menganimasikan
   border-color atau background-position akan memaksa repaint tiap frame
   dan berat di Android kelas bawah.

   Lapisannya persegi (aspect-ratio:1), bukan mengikuti bentuk kartu —
   kalau lonjong, kecepatan kilatnya berubah-ubah saat melewati sisi
   panjang dan sisi pendek. */
.akunbar{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:var(--s4);
  margin-top:var(--s3);
  padding:calc(var(--s3) + var(--petir-tebal)) calc(var(--s4) + var(--petir-tebal));
  border-radius:var(--r2);
  background:transparent;border:0;
}
/* Anak `.akunbar` HARUS naik di atas dua lapisan latarnya: ::before
   (petir berputar, z-index 0) dan ::after (panel opak, z-index 1).

   Anak FORM ikut disebut, dan itu bukan kerapian. Tombol Keluar dulu
   <a> — anak langsung, jadi dia kena aturan ini sendiri. Sekarang dia
   <button> di dalam <form class="akunbar__outform"> yang
   display:contents, dan display:contents MENGHAPUS KOTAK elemennya:
   `position` dan `z-index` pada form tidak berlaku sama sekali,
   sementara tombolnya bukan anak langsung jadi tidak pernah kena
   aturan ini.

   Akibatnya tombol Keluar tetap dirender tapi TERTIMBUN di bawah panel
   ::after — hilang dari layar tanpa satu pun galat, dan tanpa
   display:none yang bisa dicari orang. */
.akunbar > *,
.akunbar > form > *{position:relative;z-index:2}

.akunbar::before{
  content:'';position:absolute;z-index:0;
  top:50%;left:50%;width:190%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  rotate:0turn;
  background:conic-gradient(from 0deg,
    transparent 0 68%,
    rgba(var(--pri-rgb),.18) 78%,
    var(--pri) 87%,
    var(--pri-lt) 91%,
    #fff 93%,
    var(--pri-lt) 95%,
    transparent 99% 100%);
  animation:petir var(--petir-laju) linear infinite;
}

/* panel isi — menutup bagian tengah, menyisakan tepi setebal --petir-tebal */
.akunbar::after{
  content:'';position:absolute;z-index:1;inset:var(--petir-tebal);
  border-radius:calc(var(--r2) - var(--petir-tebal));
  background:var(--grad-surface);
}
@keyframes petir{to{rotate:1turn}}
/* Blok profil sekarang tautan ke akun.php. Diberi isyarat bisa diklik —
   tanpa itu dia terlihat sama persis dengan tulisan biasa di sebelahnya
   dan tidak ada yang tahu bisa ditekan. */
.akunbar__me{display:flex;align-items:center;gap:var(--s3);min-width:0;border-radius:var(--r1)}
.akunbar__me:hover .akunbar__id b{color:var(--acc)}
.akunbar__id{min-width:0}
.akunbar__id b{display:block;font-size:var(--f-base);font-weight:700;transition:color .18s}
.akunbar__id span{display:block;font-size:var(--f-xs);color:var(--dim)}

/* margin-left:auto yang mendorong saldo + tombol ke kanan,
   sekaligus membuat blok profil tetap menempel di kiri */
.akunbar__saldo{
  margin-left:auto;text-align:right;
  padding-right:var(--s4);border-right:1px solid var(--line);
}
.akunbar__saldo span{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700}
.akunbar__saldo b{display:block;font-size:var(--f-xl);font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;line-height:1.15}

.akunbar__act{display:flex;gap:var(--s2);flex:none}

/* Keluar sengaja ikon saja dan bentuknya beda dari tiga tombol di
   sebelahnya — Deposit/Withdraw/Riwayat itu aksi uang, ini aksi sesi.
   Kalau bentuknya sama, salah pencet cuma soal waktu. */
/* Pembungkusnya form sekarang — display:contents supaya form-nya tidak
   ikut jadi kotak tata letak dan tombolnya tetap duduk di flexbox
   induknya persis seperti waktu dia masih <a>. */
.akunbar__outform{display:contents}
.akunbar__out{
  flex:none;width:38px;height:38px;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--dim);
  cursor:pointer;padding:0;
  transition:color .18s,border-color .18s;
}
.akunbar__out:hover{color:var(--hot);border-color:var(--hot)}
.akunbar__out svg{width:17px;height:17px}

/* -- avatar (inisial, bukan foto — tidak butuh aset) -- */
.avatar{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:var(--rp);border:0;
  background:var(--grad-pri);color:var(--on-pri);
  font-size:var(--f-sm);font-weight:800;letter-spacing:-.02em;
}
.avatar--lg{width:46px;height:46px;font-size:var(--f-lg)}

/* -- kartu profil di drawer -- */
.drawer__user{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--line);
}
.drawer__user:hover .drawer__uid b{color:var(--acc)}
/* Panahnya didorong ke ujung kanan, sama seperti panah butir menu di
   bawahnya — supaya blok ini terbaca sebagai satu tujuan, bukan hiasan. */
.drawer__user .drawer__arw{margin-left:auto;flex:none}
.drawer__uid{flex:1;min-width:0}
.drawer__uid b{display:block;font-size:var(--f-base);font-weight:700;transition:color .18s}
.drawer__uid span{display:block;font-size:var(--f-xs);color:var(--dim)}

/* -- dompet di drawer -- */
.drawer__wallet{padding:var(--s4);border-bottom:1px solid var(--line)}
.drawer__saldo{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s3);border-radius:var(--r1);margin-bottom:var(--s3);
  background:var(--bg-sunken);border:1px solid var(--line);
}
.drawer__saldo span{font-size:var(--f-xs);color:var(--dim);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.drawer__saldo b{font-size:var(--f-xl);font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.drawer__wallet .drawer__auth{padding:0}

/* Aturan buka/tutupnya TIDAK di sini — ada di bagian 20, paling bawah file.
   Alasannya dijelaskan di sana. */

/* Tombol pratinjau "Tamu / Sudah masuk" dulu ada di sini, dan sudah
   dibuang. Dia alat bantu desain untuk membandingkan tampilan tamu dan
   tampilan sudah-masuk waktu belum ada backend.

   Sejak ada autentikasi sungguhan, class "masuk" di <body> datang dari
   sesi — lihat resources/views/bagian/header.blade.php. Aturan .masuk-only dan .tamu-only
   di bawah tidak berubah sama sekali; yang berubah cuma sumbernya. */

/* ----------------------------------------------------------
   4d. FORM
   Dipakai bersama oleh popup masuk dan halaman daftar.
   ---------------------------------------------------------- */
/* Judul kolomnya <label for>, dan .field cuma <div> pembungkus.
   DULU .field sendiri yang jadi <label> dan judulnya <span>, lalu
   digaya pakai `.field > span`. Itu (0,1,1) — mengalahkan .field__hint,
   .pwm, dan .field__galat yang cuma (0,1,0), jadi ketiganya diam-diam
   dipaksa jadi label tebal abu-abu. Pesan galat pun ikut kehilangan
   warna merahnya. Selektor di bawah sengaja mengunci ke <label>. */
.field{display:block;margin-bottom:var(--s4)}
.field > label{display:block;font-size:var(--f-sm);font-weight:700;color:var(--muted);margin-bottom:6px}
.field > label b{color:var(--hot);font-weight:800}

.field input,
.field select{
  width:100%;height:46px;padding:0 var(--s4);
  border-radius:var(--r1);
  background:var(--bg-sunken);border:1px solid var(--line);
  color:var(--text);font-size:var(--f-base);font-family:inherit;
  transition:border-color .18s,box-shadow .18s;
}
.field input::placeholder{color:var(--dim)}
.field input:focus,
.field select:focus{
  outline:0;border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16);
}
.field select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}

/* tombol mata di dalam kolom password.
   display:block WAJIB ditulis sendiri. Sebelumnya dia numpang block dari
   selektor `.field > span` yang kelewat lebar. Kalau dibiarkan inline,
   kotak acuan .field__eye yang absolute ikut tinggi baris teks (~24px),
   bukan tinggi input 46px — tombol matanya melenceng ke atas. */
.field__wrap{display:block;position:relative}
.field__wrap input{padding-right:46px}
.field__eye{
  position:absolute;right:6px;top:5px;
  width:36px;height:36px;border-radius:var(--r1);
  display:grid;place-items:center;color:var(--dim);
}
.field__eye:hover{color:var(--text)}
.field__eye svg{width:17px;height:17px}
/* Ikonnya ikut berganti, jangan cuma nama tombolnya. Mata terbuka terus
   sementara passwordnya sudah kelihatan itu memberi kabar terbalik. */
.field__eye .ic-tutup{display:none}
.field__eye[aria-pressed="true"] .ic-lihat{display:none}
.field__eye[aria-pressed="true"] .ic-tutup{display:block}
.field__hint{display:block;font-size:var(--f-xs);color:var(--dim);margin-top:5px}

/* HASIL PEMERIKSAAN USERNAME — tiga keadaan.

   Warnanya BUKAN satu-satunya pembeda: tiap keadaan punya kalimatnya
   sendiri ("Memeriksa…", "Username tersedia.", "Sudah dipakai. Coba
   yang lain."). Yang tidak bisa membedakan hijau dari merah tetap
   membacanya. */
.field__hint.is-cek{color:var(--dim)}
.field__hint.is-bisa{color:var(--green);font-weight:600}
.field__hint.is-tidak{color:var(--hot);font-weight:600}

/* flex-start, bukan center: teks persetujuan membungkus 2-3 baris di HP,
   dan dengan center kotak centangnya melayang di tengah paragraf. */
.check{display:flex;align-items:flex-start;gap:7px;font-size:var(--f-sm);color:var(--muted);cursor:pointer;line-height:1.45}
.check input{width:15px;height:15px;flex:none;accent-color:var(--pri);margin-top:2px}

/* Tautan lewati. Disimpan di luar layar sampai DIFOKUS, lalu turun jadi
   tombol biasa. Jangan diganti display:none — elemen display:none tidak
   bisa difokus sama sekali, jadi tautannya mati total. */
.lewati{
  position:fixed;top:0;left:var(--s4);z-index:120;
  transform:translateY(-120%);
  padding:10px var(--s4);border-radius:0 0 var(--r1) var(--r1);
  background:var(--grad-pri);color:var(--on-pri);
  font-size:var(--f-sm);font-weight:800;
  transition:transform .2s var(--ease);
}
.lewati:focus{transform:none;outline:0}

/* Disembunyikan dari mata, tetap dibacakan pembaca layar. Dipakai untuk
   mengumumkan perubahan yang cuma tersampaikan lewat warna/bentuk. */
.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- galat kolom ----
   Ditandai lewat [aria-invalid], bukan class sendiri. Satu atribut itu
   sekaligus mengabari pembaca layar DAN jadi kait CSS — kalau pakai class,
   gampang salah satunya lupa diperbarui. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{
  border-color:var(--hot);
  background:linear-gradient(rgba(var(--hot-rgb),.06),rgba(var(--hot-rgb),.06)),var(--bg-sunken);
}
/* (0,2,2) — harus menang atas .field input:focus yang (0,1,2),
   kalau tidak cincin fokusnya balik jadi warna primer */
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus{
  border-color:var(--hot);
  box-shadow:0 0 0 3px rgba(var(--hot-rgb),.20);
}

.field__galat{
  display:flex;align-items:flex-start;gap:6px;
  margin-top:6px;
  font-size:var(--f-xs);font-weight:700;color:var(--hot-lt);line-height:1.4;
}
.field__galat[hidden]{display:none}
/* tanda seru dibuat dari CSS, bukan file ikon — sekali tulis, ikut tema */
.field__galat::before{
  content:'!';flex:none;
  width:14px;height:14px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--hot);color:var(--on-hot);
  font-size:9px;font-weight:800;line-height:1;
}
.field__galat em{font-style:normal}

/* Rangkuman di atas tombol kirim. Di formulir sepanjang ini, kolom yang
   salah bisa jauh di atas layar — tanpa ini tombolnya terasa rusak. */
.formgalat{
  display:flex;align-items:center;gap:var(--s2);
  margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border-radius:var(--r1);
  background:rgba(var(--hot-rgb),.10);
  border:1px solid rgba(var(--hot-rgb),.35);
  font-size:var(--f-sm);font-weight:700;color:var(--hot-lt);
}
.formgalat[hidden]{display:none}
.formgalat::before{
  content:'!';flex:none;
  width:18px;height:18px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--hot);color:var(--on-hot);
  font-size:11px;font-weight:800;line-height:1;
}
.formgalat em{font-style:normal}

/* ---- kotak yang sama, kabar BAIK ----
   Dipakai penarikan yang berhasil diajukan. Memakai kotak yang sama
   dengan galat, bukan kotak kedua di tempat lain: matanya sudah tahu
   harus mencari jawaban di situ sesudah menekan kirim, dan jawaban yang
   muncul di tempat berbeda tergantung berhasil-tidaknya adalah jawaban
   yang setengahnya terlewat.

   Yang berubah cuma warnanya dan lencana '!' jadi centang. */
   Variabelnya --green*, BUKAN --ok*. Yang kedua tidak pernah ada di
   tema ini — dan kelas yang memakai variabel tak terdefinisi tidak
   memberi galat apa pun, cuma warna yang jatuh ke bawaan peramban.
   Pasangannya .txstat--ok memakai --green-rgb yang sama. */
.formgalat--ok{
  background:rgba(var(--green-rgb),.12);
  border-color:rgba(var(--green-rgb),.35);
  color:var(--green);
}
.formgalat--ok::before{
  content:'✓';
  background:var(--green);color:#08130c;
}

/* ---- galat dari SERVER, isinya daftar ----
   .formgalat dasarnya `display:flex; align-items:center` — dirancang
   untuk satu kalimat pendek dari app.js. Isi bertingkat (<b> lalu <ul>)
   di dalam flex jadi DUA ITEM BERSEBELAHAN: judulnya di kiri, seluruh
   daftarnya berdesakan di kanan. Persis jebakan yang sudah menggigit
   .notis di proyek ini.

   Jadi di sini flexnya dimatikan, dan ::before yang tadinya lencana "!"
   sebaris diubah jadi penanda di depan judulnya sendiri. */
.formgalat--server{
  display:block;
  line-height:1.5;
}
.formgalat--server::before{display:none}
.formgalat--server b{
  display:block;margin-bottom:var(--s2);
}
.formgalat--server b::before{
  content:'!';
  display:inline-grid;place-items:center;vertical-align:-3px;
  width:18px;height:18px;margin-right:var(--s2);border-radius:var(--rp);
  background:var(--hot);color:var(--on-hot);
  font-size:11px;font-weight:800;line-height:1;
}
.formgalat--server ul{
  margin:0;padding-left:calc(18px + var(--s2));
  list-style:disc;
}
.formgalat--server li{margin-bottom:2px;font-weight:600}
/* Satu galat saja tidak perlu butir — butir tunggal terbaca seperti
   daftar yang isinya belum lengkap. */
.formgalat--server li:only-child{list-style:none;margin-left:calc(-1 * var(--s3))}

/* ---- umpan bot ----
   JANGAN diganti display:none atau visibility:hidden — bot yang agak
   pintar melewati keduanya, justru itu penandanya. Digeser ke luar layar
   supaya tetap "terlihat" bagi bot tapi tidak bagi manusia.
   body sudah overflow-x:hidden, jadi tidak memunculkan scroll samping. */
.jebak{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- slot verifikasi manusia (Turnstile) ----

   DULUNYA KOTAK PLACEHOLDER, dan itu yang bikin rusak. Aturan lama
   memasang kerangka putus-putus dengan `max-width:300px; padding:12px`
   — box-sizing:border-box, jadi ruang dalamnya tinggal

       300 − (12 × 2) − (1 × 2) = 274px

   sementara widget Turnstile ukuran normal lebarnya PERSIS 300px. Dia
   tidak pernah muat; yang terlihat kotaknya jebol keluar dari
   kerangkanya sendiri.

   Kerangkanya sekarang dibuang seluruhnya, bukan dilebarkan. Widget
   Turnstile sudah punya kotak, garis, dan latarnya sendiri —
   membingkainya lagi cuma menggandakan bingkai, dan bingkai putus-putus
   terbaca sebagai "belum jadi".

   min-height 65px TETAP: itu tinggi widgetnya, dan ruangnya dipesan
   sejak awal supaya isian di bawahnya tidak melompat waktu iframe-nya
   selesai dimuat — lompatan yang paling sering terjadi tepat saat
   jempol sudah bergerak menuju tombol. */
.capt{
  display:grid;place-items:center;align-content:center;
  width:100%;min-height:65px;margin-bottom:var(--s5);
}

/* LEBAR TURNSTILE TETAP 300px DAN TIDAK BISA DIMINTA LEBIH KECIL.
   Di HP itu bermasalah — ruang di dalam kartu daftar cuma

       lebar layar − 32 (padding .container) − 48 (padding .authcard) − 2 (garis)
       = lebar layar − 82

   jadi di layar 360px cuma tersisa 278px, dan mayoritas pengunjung
   situs ini justru di sana. Widgetnya dikecilkan proporsional, bukan
   dipotong: yang terpotong berarti kotak centangnya tidak bisa
   ditekan, dan orangnya tidak bisa mendaftar sama sekali.

   Angka tiap tingkat dihitung dari rumus di atas dengan sisa ~4px. */
.capt .cf-turnstile{transform:scale(var(--capt-skala,1));transform-origin:center center}
@media (max-width:383px){ .capt{--capt-skala:.88} }   /* 346-383px */
@media (max-width:345px){ .capt{--capt-skala:.78} }   /* 316-345px */
@media (max-width:315px){ .capt{--capt-skala:.70} }   /* di bawah itu */

/* ----------------------------------------------------------
   4e. POPUP MASUK
   Mesinnya sama persis dengan .drawer (selubung, class .open,
   tutup lewat Esc / klik luar). Bedanya cuma posisi kotaknya.
   ---------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:95;visibility:hidden;pointer-events:none}
.modal.open{visibility:visible;pointer-events:auto}

.modal__veil{
  position:absolute;inset:0;
  background:rgba(0,0,0,.68);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s var(--ease);
}
.modal.open .modal__veil{opacity:1}

.modal__box{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-46%) scale(.97);
  width:min(92vw,400px);max-height:90vh;overflow-y:auto;
  padding:var(--s6);
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r3);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  opacity:0;transition:transform .28s var(--ease),opacity .28s;
}
.modal.open .modal__box{transform:translate(-50%,-50%) scale(1);opacity:1}

.modal__x{
  position:absolute;top:var(--s4);right:var(--s4);
  width:32px;height:32px;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--muted);
}
.modal__x:hover{color:var(--text);border-color:var(--line-2)}
.modal__x svg{width:14px;height:14px}

/* Varian kabar hasil: rata tengah, tanpa form. Dipakai popup "deposit
   berhasil" di transaksi.php — mesin bukanya sama persis dengan popup
   masuk, cuma isinya yang beda. */
.modal__box--kabar{text-align:center}
.modal__box--kabar .txhasil__rinci{margin:var(--s5) 0}

/* Varian lebar: rincian promo. Isinya tabel + langkah + ketentuan, jauh
   lebih panjang dari form masuk, jadi kotaknya dilebarkan dan padding-nya
   dipindah ke dalam supaya gambarnya bisa menempel penuh ke tepi atas. */
/* Dua kelas, bukan satu. Sebagai '.modal__box--lebar' (0,1,0) dia seri
   dengan '.modal__box' di mobile.css yang dimuat belakangan, jadi padding:0
   ini mati total di semua ponsel dan gambar promo tidak lagi menempel ke
   tepi atas lembar. (0,2,0) menang di semua lebar. */
.modal__box.modal__box--lebar{width:min(94vw,560px);padding:0}
.modal__box--lebar .modal__x{z-index:3;background:rgba(0,0,0,.55);border-color:transparent;color:#fff}
.modal__seni{
  aspect-ratio:var(--promo-ratio);
  border-radius:var(--r3) var(--r3) 0 0;
}
.modal__isi{padding:var(--s6)}

.modal__box h2{font-size:var(--f-2xl);font-weight:800;margin-bottom:var(--s1)}
.modal__ask{font-size:var(--f-md);color:var(--muted);margin:0 0 var(--s6)}
.modal__ask a{color:var(--pri);font-weight:700}
.modal__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.modal__row a{font-size:var(--f-sm);color:var(--muted)}
.modal__row a:hover{color:var(--pri)}
.modal__foot{
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);text-align:center;
}
.modal__foot a{font-size:var(--f-sm);color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.modal__foot a:hover{color:var(--green)}
.modal__foot svg{width:15px;height:15px}

/* ----------------------------------------------------------
   4f. HALAMAN DAFTAR (daftar.html)
   Header & footernya sengaja versi ringkas, bukan salinan home.
   Halaman formulir tidak butuh menu lengkap — makin sedikit
   jalan keluar, makin banyak yang menyelesaikan pendaftaran.
   ---------------------------------------------------------- */
.authbar{
  position:sticky;top:0;z-index:60;height:var(--header-h);
  background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.authbar__in{display:flex;align-items:center;height:100%;gap:var(--s4)}
.authbar__ask{margin-left:auto;font-size:var(--f-md);color:var(--muted)}
.authbar__ask a{color:var(--pri);font-weight:700}

.authwrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s6);padding:var(--s7) 0 var(--s8)}
.authcard{
  background:var(--grad-surface);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--s6);
}
.authcard h1{font-size:var(--f-2xl);font-weight:800;margin-bottom:var(--s1)}
.authcard > p{color:var(--muted);font-size:var(--f-md);margin:0 0 var(--s6)}

.formgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s4)}
.formgrid .lebar{grid-column:1 / -1}

.authside{display:flex;flex-direction:column;gap:var(--s3)}
.authside__box{
  background:var(--grad-surface);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s5);
}
/* h2 dengan alasan yang sama seperti .promo__isi: kotak samping di halaman
   daftar dan lupa password ini isinya bagian tingkat pertama, dan halaman
   itu tidak punya <h2> lain sama sekali. */
.authside__box h2{font-size:var(--f-md);font-weight:800;margin-bottom:var(--s3)}
/* BUKAN flex, dan itu perbaikan bug bukan selera.
   Isinya kalimat utuh bercampur <b> di tengahnya. Sebagai flex container,
   tiap potongan teks dan tiap <b> jadi flex item terpisah — di 360px butir
   "Waspada" di lupa.php pecah jadi tiga kolom sejajar yang masing-masing
   membungkus sendiri, praktis tidak terbaca.
   Indentasi menggantung memberi hasil visual yang sama persis (23px = ikon
   15px + gap 8px) tapi teksnya kembali mengalir sebagai satu paragraf. */
.authside__box li{
  padding-left:23px;text-indent:-23px;
  font-size:var(--f-sm);color:var(--muted);margin-bottom:var(--s2);
}
/* display:inline-block WAJIB, dan ketiadaannya mematahkan seluruh
   teknik di atas.

   Reset di dekat baris 218 berbunyi `img,svg{max-width:100%;display:block}`.
   Sebagai BLOK, tiap centang memaksa barisnya sendiri — dan indentasi
   menggantung di atas jadi tidak punya apa pun untuk digantung: yang
   tampil ikon di satu baris, kalimatnya di baris berikutnya. Terlihat
   di kotak "Setelah daftar" halaman daftar dan "Waspada" di lupa.

   Gejalanya tidak terbaca sebagai bug CSS. Dia terbaca seperti daftar
   yang memang dirancang bertumpuk, dan bertahan sampai ada yang
   membandingkannya dengan maksud aslinya.

   Kelas ini akan terulang tiap kali ada ikon inline di dalam teks:
   resetnya berlaku untuk SEMUA svg, jadi yang butuh inline harus
   menyatakannya sendiri. */
.authside__box li svg{
  display:inline-block;
  width:15px;height:15px;color:var(--green);
  margin-right:var(--s2);vertical-align:-2px;
}

/* Kotak bonus dibedakan lewat cincin primer, bukan warna latar sendiri —
   supaya tetap satu keluarga dengan kotak lain di kolom ini. */
.authside__box--hi{
  border-color:rgba(var(--pri-rgb),.34);
  box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.10), 0 10px 30px -18px rgba(0,0,0,.9);
}
.authside__p{margin:0 0 var(--s3);font-size:var(--f-sm);color:var(--muted);line-height:1.5}

/* ---- kotak bonus bergantian ----
   Semua promo ditumpuk di SEL GRID YANG SAMA. Dengan begitu tinggi
   kotaknya otomatis mengikuti isi yang paling tinggi, dan kotaknya tidak
   melonjak-lonjak tiap kali berganti. Kalau pakai position:absolute,
   tingginya harus dipatok manual dan pasti meleset waktu teksnya diganti. */
.bonus{display:grid}
.bonus__i{
  grid-area:1/1;
  opacity:0;transform:translateY(8px);visibility:hidden;
  /* visibility ditunda sampai pudarnya selesai; kalau langsung, isi lama
     hilang mendadak di tengah transisi */
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s;
}
.bonus__i.on{
  opacity:1;transform:none;visibility:visible;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s;
}

.bonus__nav{display:flex;gap:5px;margin-top:var(--s4)}
.bonus__nav button{
  flex:1;height:4px;border-radius:2px;
  background:var(--line-2);
  transition:background-color .25s;
}
.bonus__nav button:hover{background:var(--pri-dk)}
/* yang sedang tampil: terisi penuh */
.bonus__nav button.on{background:linear-gradient(var(--pri),var(--pri)) left/100% 100% no-repeat,var(--line-2)}
/* .jalan cuma dipasang selama pergantian masih otomatis — batangnya
   terisi dari nol sepanjang jeda, jadi sekaligus jadi hitung mundur */
.bonus__nav button.on.jalan{background-size:0% 100%;animation:bonusIsi var(--bonus-laju) linear forwards}
@keyframes bonusIsi{to{background-size:100% 100%}}
/* Dijeda saat kursor mampir atau saat fokus keyboard ada di dalamnya —
   isi yang berganti sendiri sementara sedang dibaca itu menyebalkan.
   Pergantiannya digerakkan oleh selesainya animasi ini, jadi menjeda
   animasinya otomatis ikut menjeda pergantian isinya. */
.authside__box--hi:hover .bonus__nav button.jalan,
.authside__box--hi:focus-within .bonus__nav button.jalan{animation-play-state:paused}

/* Satu-satunya jalan bantuan di halaman ini — header ringkas tidak punya
   menu dan tombol WhatsApp mengambang sengaja tidak dipasang. */
.authside__chat{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
  transition:border-color .18s,transform .18s var(--ease);
}
.authside__chat:hover{border-color:rgba(var(--green-rgb),.45);transform:translateY(-2px)}
/* :first-child WAJIB. Panah chevron di ujung kanan juga <svg> anak langsung
   .authside__chat, dan sebagai '.authside__chat > svg' (0,1,1) aturan ini
   mengalahkan '.authside__arw' (0,1,0) di bawah — panahnya ikut jadi 22px
   hijau, kembar dengan ikon chat di ujung kiri. */
.authside__chat > svg:first-child{width:22px;height:22px;flex:none;color:var(--green)}
.authside__chat span{flex:1}
.authside__chat b{display:block;font-size:var(--f-md);font-weight:700}
.authside__chat em{display:block;font-style:normal;font-size:var(--f-xs);color:var(--dim)}
.authside__arw{width:14px;height:14px;flex:none;color:var(--dim)}

/* Delapan kolom berderet tanpa jeda terbaca seperti satu tembok.
   fieldset direset total: border & padding bawaannya tidak ikut desain,
   dan min-inline-size bawaannya bikin grid di dalamnya menolak menyempit. */
.fset{border:0;padding:0;margin:0 0 var(--s5);min-width:0}
.fset__hd{
  padding:0;margin-bottom:var(--s4);
  font-size:var(--f-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);
}
/* inline-grid, bukan flex di <legend> — legend elemen khusus dan
   perlakuan display-nya beda-beda antar browser. */
.fset__hd i{
  display:inline-grid;place-items:center;vertical-align:-5px;
  width:20px;height:20px;border-radius:var(--rp);margin-right:var(--s2);
  background:var(--grad-pri);color:var(--on-pri);
  font-style:normal;font-size:var(--f-xs);letter-spacing:0;
}
.fset__hd em{font-style:normal;font-weight:700;text-transform:none;letter-spacing:.02em;opacity:.65}

/* Meter kekuatan password. Warnanya memakai token RTP — skala merah ke
   hijau yang sama, jadi artinya sudah dikenal dari kartu game. */
.pwm{display:flex;align-items:center;gap:var(--s2);margin-top:7px}
.pwm[hidden]{display:none}
.pwm__bar{display:flex;gap:3px;flex:1}
.pwm__bar i{flex:1;height:4px;border-radius:2px;background:var(--line-2);transition:background .2s}
.pwm__lbl{flex:none;min-width:5.5em;text-align:right;font-size:var(--f-xs);font-weight:800;color:var(--dim)}

.pwm[data-kuat="1"]{--pwm-c:var(--rtp-1)}
.pwm[data-kuat="2"]{--pwm-c:var(--rtp-2)}
.pwm[data-kuat="3"]{--pwm-c:var(--rtp-3)}
.pwm[data-kuat="4"]{--pwm-c:var(--rtp-4)}
.pwm[data-kuat="1"] i:nth-child(-n+1),
.pwm[data-kuat="2"] i:nth-child(-n+2),
.pwm[data-kuat="3"] i:nth-child(-n+3),
.pwm[data-kuat="4"] i:nth-child(-n+4){background:var(--pwm-c)}
.pwm[data-kuat="1"] .pwm__lbl,
.pwm[data-kuat="2"] .pwm__lbl,
.pwm[data-kuat="3"] .pwm__lbl,
.pwm[data-kuat="4"] .pwm__lbl{color:var(--pwm-c)}

/* ---- formulir dua langkah ----
   Di DESKTOP mode ini mati total: .step cuma pembungkus tanpa efek,
   semua bagian tampil sekaligus, dan indikator serta tombol Lanjut /
   Kembali disembunyikan. Yang menyalakannya ada di mobile.css — di
   layar 360px lima belas kolom sekaligus terbaca seperti formulir pajak,
   sementara di desktop ruangnya memang cukup untuk menampilkan semuanya.

   Pakai selector bertag (0,1,1) supaya menang atas .btn (0,1,0) tanpa
   bergantung urutan file — .btn ditulis di bagian 5, jauh di bawah sini. */
.langkah{display:none}
button[data-lanjut],
button[data-kembali]{display:none}
.step:focus{outline:0}   /* difokus JS cuma untuk memindah posisi baca */

/* Dipakai HANYA oleh mobile.css, tapi ditulis di sini karena mobile.css
   isinya wajib @media semua. Tidak perlu penjaga prefers-reduced-motion —
   bagian 19 sudah mematikan seluruh animasi lewat satu aturan. */
@keyframes langkahMasuk{
  from{opacity:0;transform:translateX(var(--geser))}
  to  {opacity:1;transform:none}
}

.authcard__setuju{margin-bottom:var(--s5)}
.authcard__setuju a{color:var(--pri);font-weight:700}
/* disejajarkan dengan teks di sebelah kotak centang: lebar kotak 15px + gap 7px */
.authcard__setuju .field__galat{padding-left:22px}
/* Diulang di bawah tombol, bukan cuma di bar atas: yang sadar sudah
   punya akun biasanya baru sadar setelah sampai ujung formulir. */
.authcard__ask{margin:var(--s4) 0 0;text-align:center;font-size:var(--f-sm);color:var(--muted)}
.authcard__ask a{color:var(--pri);font-weight:700}

/* ----------------------------------------------------------
   5. TOMBOL
   ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 var(--s4);border-radius:var(--r1);
  font-size:var(--f-md);font-weight:700;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s,filter .18s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px}

.btn--pri{background:var(--grad-pri);color:var(--on-pri);box-shadow:0 4px 16px -6px rgba(var(--pri-rgb),.75)}
.btn--line{border-color:var(--line-2);color:var(--text);background:var(--glass)}
.btn--pri:hover{filter:brightness(1.06)}
.btn--line:hover{border-color:rgba(255,255,255,.3)}
.btn--lg{height:44px;padding:0 var(--s6);font-size:var(--f-base);border-radius:var(--r2)}
.btn--block{width:100%}

/* ---- tombol yang sedang bekerja ----
   Menekan "Kirim Deposit" memanggil server yang lalu memanggil payment
   gateway. Diukur di mesin ini: 2,0–2,5 detik. Selama itu dulu layar
   TIDAK BERUBAH SAMA SEKALI, lalu kartunya tiba-tiba berganti — dan dua
   detik diam di bawah jari orang terbaca sebagai tombol rusak, jadi dia
   menekannya lagi.

   :disabled sebelumnya tidak ada aturannya sama sekali. JS sudah menyetel
   tombol.disabled = true sejak awal, tapi tanpa aturan ini penyetelan itu
   tidak mengubah satu piksel pun. */
.btn:disabled{
  opacity:.62;cursor:default;
  /* filter dan transform hover/aktif dimatikan — tombol yang masih
     memantul saat ditekan berarti mengundang tekanan kedua, dan tekanan
     kedua di sini menerbitkan transaksi kedua. */
  pointer-events:none;transform:none;filter:none;
}

/* SEDANG BEKERJA BUKAN SAMA DENGAN MATI.
   Tombol mati boleh pudar — dia memang tidak menawarkan apa pun. Tombol
   yang sedang mengerjakan permintaan orang justru sebaliknya: tulisannya
   satu-satunya kabar yang dia punya selama dua setengah detik itu, dan
   memudarkannya ke .62 membuat kabar itu jadi yang paling sulit dibaca
   tepat ketika paling dibutuhkan. */
.btn[data-muat]:disabled{opacity:.88}

/* Cincin berputar menggantikan ikon tombol. Ditaruh di ::before, bukan
   elemen baru, supaya tidak ada markup yang harus ditambahkan di tiap
   tombol yang memakainya nanti.

   Ukurannya SAMA PERSIS dengan .btn svg (14px) dan ikon aslinya
   disembunyikan, bukan digeser — kalau ukurannya berbeda, lebar isi
   tombol berubah dan tulisannya bergeser tepat di bawah jari orang. */
.btn[data-muat] svg{display:none}
.btn[data-muat]::before{
  content:'';width:14px;height:14px;flex:none;
  border-radius:50%;
  border:2px solid rgba(var(--pri-rgb),.35);
  border-top-color:currentColor;
  /* MEMAKAI ULANG @keyframes petir (to{rotate:1turn}) dari bagian akunbar.
     Gerakannya sama persis; menulis keyframes kedua dengan nama berbeda
     untuk putaran yang identik cuma menambah satu hal lagi yang bisa
     berbeda sendiri nanti. */
  animation:petir .7s linear infinite;
}

/* Di prefers-reduced-motion, bagian 18 mematikan SELURUH animasi lewat
   `*{animation:none!important}` — termasuk cincin ini, yang lalu berhenti
   sebagai lingkaran diam. Itu sebabnya TULISAN tombolnya juga berubah
   ("Membuat kode QR…"), bukan cuma ikonnya: buat yang gerakannya
   dimatikan, tulisan itulah satu-satunya tanda ada yang sedang berjalan. */

.burger{display:none;width:36px;height:36px;border-radius:var(--r1);background:var(--glass);border:1px solid var(--line);align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:16px;height:1.7px;background:var(--text);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:16px;height:1.7px;background:var(--text);transition:.25s}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger.on span{background:transparent}
.burger.on span::before{transform:translateY(5px) rotate(45deg)}
.burger.on span::after{transform:translateY(-5px) rotate(-45deg)}

/* ----------------------------------------------------------
   6. SLIDER PROMO — MURNI GAMBAR
   Tidak ada teks/tombol di dalam slide. Semua pesan promo
   sudah menyatu di file gambarnya.

   Ukuran banner: 1200 x 400 px (rasio 3:1).
   SEMUA banner wajib rasio sama — kalau beda, tinggi slider
   akan lompat-lompat waktu ganti slide.

   aspect-ratio dipasang supaya browser memesan ruangnya
   sebelum gambar selesai diunduh (tidak ada layout shift
   di koneksi seluler yang lambat).
   ---------------------------------------------------------- */
.slider{position:relative;margin-top:var(--s4);border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)}
.slider__track{display:flex;transition:transform .5s var(--ease);will-change:transform}
.slide{flex:0 0 100%;display:block;line-height:0}
.slide img{width:100%;height:auto;aspect-ratio:var(--banner-ratio);object-fit:var(--banner-fit);display:block}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--rp);
  font-size:var(--f-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.pill--pri{background:var(--grad-pri);color:var(--on-pri)}
.pill--acc{background:var(--grad-acc);color:var(--on-acc)}
.pill--vip{background:var(--grad-vip);color:#fff}

/* titik indikator: ditaruh di tengah dengan alas gelap,
   supaya tetap terbaca di atas gambar terang maupun gelap */
.slider__dots{
  position:absolute;bottom:var(--s3);left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:2;
  padding:5px 9px;border-radius:var(--rp);
  background:rgba(var(--bg-rgb),.5);backdrop-filter:blur(6px);
}
.slider__dots button{width:7px;height:7px;border-radius:var(--rp);background:rgba(255,255,255,.28);transition:.25s}
.slider__dots button.on{width:22px;background:var(--pri)}

.slider__arw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:var(--rp);display:grid;place-items:center;
  background:rgba(var(--bg-rgb),.7);border:1px solid var(--line-2);
  backdrop-filter:blur(6px);transition:.2s;
}
.slider__arw:hover{background:rgba(var(--bg-rgb),.95)}
.slider__arw svg{width:15px;height:15px}
.slider__arw--l{left:var(--s3)}
.slider__arw--r{right:var(--s3)}

/* ----------------------------------------------------------
   7. SECTION
   ---------------------------------------------------------- */
.sec{padding:var(--s7) 0}
.sec--tight{padding:var(--s5) 0}
.sechd{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.sechd h2{font-size:var(--f-xl);font-weight:800;display:flex;align-items:center;gap:var(--s2)}
.sechd h2::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--grad-pri);flex:none}
.sechd .more{margin-left:auto;font-size:var(--f-sm);font-weight:700;color:var(--acc);display:flex;align-items:center;gap:4px}
.sechd .more svg{width:12px;height:12px}

/* ----------------------------------------------------------
   8. STRIP KATEGORI
   Satu bilah rata. Pemisah = grid gap 1px + latar induk berwarna garis,
   jadi garisnya terbentuk sendiri di berapa pun jumlah kolomnya.
   ---------------------------------------------------------- */
.cats{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;
}
.cat{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;
  padding:15px 4px 12px;
  background:var(--bg-soft);
  color:var(--acc);
  transition:background .18s;
}
.cat::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-pri);transform:scaleX(0);transition:transform .2s var(--ease);
}
.cat:hover{background:rgba(var(--pri-rgb),.08)}
.cat:hover::after,.cat.on::after{transform:scaleX(1)}
.cat.on{background:rgba(var(--pri-rgb),.12)}

.cat__ic{width:30px;height:30px;flex:none}
.cat__ic svg{width:100%;height:100%;fill:currentColor}

.cat b{
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  text-align:center;line-height:1.25;color:var(--acc);
}
.cat__dot{
  position:absolute;top:6px;right:8px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--rp);background:var(--grad-hot);color:var(--on-hot);
  font-size:9px;font-weight:800;display:grid;place-items:center;
  font-style:normal;
}

/* ----------------------------------------------------------
   9. TILE GAME (navigasi utama)
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   9b. HALAMAN KATALOG (slot.php)
   Perannya beda dengan beranda. Beranda = etalase: sedikit game, banyak
   jenis blok. Katalog = satu jenis isi tapi banyak sekali, jadi yang
   harus paling kuat alat menemukannya, bukan hiasannya.
   ---------------------------------------------------------- */
/* --muted, bukan --dim. Teks ini duduk LANGSUNG di atas latar halaman —
   dan latar halaman itu gambar, bukan warna rata. --dim aman di atas
   panel gelap, tapi di sini yang di belakangnya bisa saja bingkai terang
   dari gambar latar yang menembus peredam .62. --muted memberi jarak
   aman: 7,0:1 di atas warna dasar, jadi masih lolos walau latarnya
   sedang di bagian paling terang. */
.crumb{display:flex;align-items:center;gap:6px;padding-top:var(--s4);font-size:var(--f-sm);color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--pri)}
.crumb svg{width:11px;height:11px;opacity:.6}
.crumb [aria-current]{color:var(--text);font-weight:700}

/* Kepala halaman memakai .sechd yang sama dengan blok di beranda, cuma
   judulnya <h1>. Panel besar berisi angka pernah dicoba di sini dan
   dibuang: dia makan satu layar penuh di HP untuk keterangan yang sudah
   jelas dari isi halamannya sendiri. */
.sechd--hal{margin-top:var(--s3);margin-bottom:var(--s3)}
/* Blok di atasnya (judul halaman / strip kategori) sudah membawa jaraknya
   sendiri; padding penuh .sec--tight di sini cuma menumpuk. */
.sec--katalog{padding-top:var(--s3)}
.sechd h1{font-size:var(--f-2xl);font-weight:800;display:flex;align-items:center;gap:var(--s2)}
.sechd h1::before{content:'';width:3px;height:18px;border-radius:2px;background:var(--grad-pri);flex:none}
.sechd__ket{font-size:var(--f-sm);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- profil ringkas di baris judul ----
   Menggantikan .akunbar di halaman katalog. Isinya cuma nama + saldo:
   di sini orang sedang mencari game, bukan mengurus uang, dan tombol
   setor di baris judul cuma menarik perhatian dari daftar gamenya. */
.miniakun{
  display:flex;align-items:center;gap:var(--s4);
  margin-left:auto;flex:none;
  padding:8px var(--s5) 8px 8px;
  border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
  transition:border-color .18s,transform .18s var(--ease),box-shadow .18s;
}
.miniakun:hover{
  border-color:rgba(var(--pri-rgb),.45);transform:translateY(-2px);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.9);
}
/* Nama di atas, saldo di bawah. Ditumpuk begini kartunya jauh lebih
   sempit daripada sebaris, jadi di HP pun dia tetap muat di samping
   judul tanpa ada yang perlu disembunyikan. */
.miniakun__isi{display:flex;flex-direction:column;gap:1px;line-height:1.25;min-width:0}
.miniakun__isi b{font-size:var(--f-base);font-weight:700;color:var(--text);white-space:nowrap}
/* Angka uang pakai --acc, warna NILAI di seluruh situs — sama dengan
   jackpot dan RTP, jadi selalu terbaca sejenis. Sengaja lebih besar
   dari namanya: yang dicari orang di sini angkanya. */
.miniakun__isi em{
  font-style:normal;font-size:var(--f-lg);font-weight:800;color:var(--acc);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---- penyaring provider ----
   Kartu bergambar, bukan pil berteks: logo provider itu yang dikenali
   orang lebih dulu daripada namanya, dan deret logo jauh lebih cepat
   dipindai mata daripada deret teks yang bentuknya seragam.
   Digeser menyamping di semua ukuran layar — 16 kartu tidak akan pernah
   muat sebaris, dan dibungkus ke bawah malah makan tiga baris penuh. */
/* overflow-x:auto MEMAKSA overflow-y ikut jadi auto — tidak bisa satu
   sumbu digulir sementara sumbu lain dibiarkan meluber. Akibatnya apa pun
   yang keluar kotak ini DIPOTONG: bayangan kartu aktif di bawah, dan
   kartu yang terangkat 3px saat disentuh di atas.
   Karena itu diberi bantalan atas-bawah, lalu ditarik balik dengan margin
   negatif sebesar itu juga supaya jarak ke blok tetangganya tidak berubah
   sedikit pun. Kalau bantalannya dihapus, garis tepinya kepotong lagi. */
.provbar{
  display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  padding:5px 0 13px;
  margin:-5px 0 -9px;
}
.provbar::-webkit-scrollbar{display:none}
/* Sekarang <a>, bukan <button> — tiap provider punya URL-nya sendiri
   yang bisa dibagikan, diindeks, dan dituju tombol kembali. Karena itu
   `color` dan `text-decoration` ikut disetel: tombol mewarisi warna
   teksnya dari tema, tautan mewarisi warna tautan, dan tanpa dua baris
   ini seluruh deret provider mendadak biru bergaris bawah. */
.provp{
  /* 112px, bukan 106. Tandanya sekarang hampir persegi dan mengisi
     penuh, jadi tingginya ikut naik — lebar yang sama membuat art
     providernya terlalu sempit untuk dikenali sekilas, dan sekilas itu
     satu-satunya cara deret ini dibaca. */
  flex:0 0 112px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 6px 9px;
  border-radius:var(--r2);
  border:1px solid var(--line);background:var(--grad-surface);
  color:var(--text);text-decoration:none;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.provp:hover{transform:translateY(-3px);border-color:var(--line-2)}

/* Provider yang sedang disaring. Penandanya perlu terlihat dari jauh:
   deret ini digulir ke samping, dan yang aktif sering berada di luar
   layar waktu orang menggulir balik ke atas. */
.provp.on{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri) inset}

/* Chip juga jadi <a>, alasan yang sama. */
.chip{color:var(--text);text-decoration:none}

/* Grid sedang menunggu balasan server. Bukan spinner — kartunya masih
   terbaca, cuma diredupkan, jadi tidak ada lompatan tata letak waktu
   yang baru datang. */
.tiles--sibuk{opacity:.55;pointer-events:none;transition:opacity .15s}

/* Kotak tanda. Isinya <img> kalau logonya ada, kalau belum monogram
   dua huruf.

   RASIONYA 163/177 — hampir persegi, sedikit lebih tinggi dari lebar.
   Itu ukuran asli aset providernya, diukur bukan ditebak. Sebelumnya
   3/2 (melintang), dan logo yang hampir persegi dipaksa masuk ke sana
   menyusut jadi tempelan kecil di tengah kotak gelap yang lapang —
   persis yang terjadi waktu logo aslinya dipasang pertama kali.

   Kalau nanti asetnya diganti dengan yang bentuknya lain, ANGKA DI SINI
   yang diubah, bukan ukuran gambarnya. */
.provp__mark{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:163/177;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--bg-sunken);
  border:1px solid var(--line);
}

/* Warna merek dipakai TIPIS — cahaya samar dari bawah dan garis 2px.
   Pernah dipakai sebagai latar penuh dan hasilnya berantakan: 15 warna
   jenuh berjejer melawan palet grafit-silver, tidak ada satu pun yang
   jadi bisa dikenali. */
.provp__mark::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 88% at 50% 122%,var(--prov-warna,transparent),transparent 64%);
  opacity:.20;
}
/* garis merek: cukup untuk membedakan sekilas, terlalu tipis untuk ribut */
.provp__mark::after{
  content:'';position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:20px;height:2px;border-radius:2px;
  background:var(--prov-warna,transparent);
}

/* GAMBARNYA MENGISI PENUH, bukan diselipkan di tengah.
   Aset providernya bukan logo datar di atas latar bening — dia art tile
   utuh dengan latarnya sendiri, nama providernya sudah tercetak di
   dalamnya. Menyusutkannya jadi 76% lalu menaruhnya di atas plat gelap
   berbingkai membuat dua latar bertumpuk dan tidak ada yang terbaca. */
.provp__mark img{
  position:relative;
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Waktu isinya gambar, seluruh hiasan platnya dimatikan: latar, cahaya
   merek, dan garisnya. Semuanya dirancang untuk MELATARI logo datar,
   dan di atas art tile mereka cuma jadi bingkai yang bertengkar dengan
   gambarnya.

   Monogram TIDAK ikut — di sana platnya justru satu-satunya yang bikin
   kartunya tidak kosong. */
.provp__mark:has(img){background:none;border-color:transparent}
.provp__mark:has(img)::before,
.provp__mark:has(img)::after{display:none}

/* Monogram memakai gradasi silver yang sama dengan tombol utama, jadi
   terbaca sebagai bagian dari situs — bukan tempelan. */
.provp__mark em{
  position:relative;font-style:normal;
  font-size:23px;font-weight:800;letter-spacing:-.03em;
  background:var(--grad-pri);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.provp b{
  font-size:var(--f-xs);font-weight:700;color:var(--muted);
  line-height:1.2;text-align:center;
  /* dua baris disediakan sejak awal supaya kartu bernama panjang dan
     pendek tetap sama tingginya — kalau tidak, deretnya bergerigi */
  min-height:2.4em;display:flex;align-items:center;
}

.provp.on{
  border-color:var(--pri);
  box-shadow:inset 0 0 0 1px var(--pri), 0 10px 26px -16px rgba(var(--pri-rgb),.9);
}
.provp.on b{color:var(--text)}
.provp.on .provp__mark{border-color:rgba(var(--pri-rgb),.45)}
.provp.on .provp__mark::before{opacity:.34}

/* Provider yang datanya belum masuk tetap ditampilkan supaya bentuk
   antarmukanya utuh. Pembedanya garis putus-putus + tanda diredupkan,
   BUKAN opacity pada seluruh kartu: opacity:.42 pernah dipakai di sini
   dan menjatuhkan nama providernya ke 2,19:1, jauh di bawah ambang,
   padahal tombolnya sengaja tetap bisa diklik. */
/* ---- tombol geser deret provider ----
   Pembungkusnya dibuat app.js, bukan ditulis di HTML — lihat catatan di
   sana. Sengaja TIDAK diberi overflow apa pun: .provbar di dalamnya
   memakai margin negatif supaya kartu yang terangkat saat hover tidak
   terpotong, dan overflow di pembungkus akan membatalkan seluruh akal
   itu. */
.provwrap{position:relative}
.provnav{
  /* -2px, bukan 50% bulat. .provbar punya padding 5px atas / 13px bawah
     dengan margin -5px / -9px, jadi kotak pembungkusnya 4px lebih tinggi
     dari kartunya dan titik tengahnya jatuh 2px di bawah tengah kartu. */
  position:absolute;top:calc(50% - 2px);transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--bg-elev);border:1px solid var(--line-2);
  color:var(--text);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.9);
  transition:border-color .18s,color .18s,background .18s;
}
/* Ditulis sendiri: .provnav display:grid (0,1,0) mengalahkan [hidden]
   bawaan peramban, jadi tombol ujung tetap tampil tanpa aturan ini. */
.provnav[hidden]{display:none}
.provnav svg{width:15px;height:15px}
.provnav:hover{border-color:var(--acc);color:var(--acc)}
.provnav:focus-visible{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3)}
/* -16px = tepat selebar padding .container di desktop (--s4). Separuh
   tombol duduk di talang, separuhnya di atas tepi deret, dan sisi luarnya
   pas rata dengan tepi container — tidak terpotong tepi layar. Angka ini
   TERIKAT pada padding .container: kalau paddingnya diubah, yang ini ikut.
   Di bawah 900px paddingnya jadi --s3 dan tombolnya memang disembunyikan
   mobile.css, jadi tidak ada keadaan di mana angkanya meleset. */
.provnav--kiri{left:-16px}
.provnav--kanan{right:-16px}

/* ====== SATU KARTU, DUA BENTUK ===============================
   Kartu hasil deposit memuat bentuk QRIS DAN bentuk transfer bank
   sekaligus; `data-metode` di elemen kartunya yang memilih.

   KENAPA BEGINI, bukan if/else di PHP: kartu itu dirender sekali waktu
   halaman dimuat lalu diisi app.js tanpa muat ulang. Bentuk yang dipilih
   PHP adalah bentuk saat halaman dimuat — biasanya QRIS, karena belum
   ada deposit berjalan — dan dia tidak pernah berubah walau membernya
   memilih transfer. Hasilnya kartu QRIS bergambar rusak, dengan hitung
   mundur "719:55", untuk orang yang jelas-jelas memilih bank.

   Dengan cara ini app.js cukup mengganti satu atribut, dan yang tanpa JS
   tetap benar karena PHP menyetel atributnya waktu render. */
.txhasil[data-metode="qris"]     [data-mode="transfer"]{display:none}
.txhasil[data-metode="transfer"] [data-mode="qris"]{display:none}

/* ====== NOMOR REKENING TUJUAN (deposit transfer) =============
   Menggantikan kotak kode QR waktu metodenya transfer bank. Ukurannya
   sengaja sebesar itu: ini satu-satunya angka yang harus dipindahkan
   orang ke aplikasi banknya, dan salah satu digit berarti uang masuk ke
   rekening orang lain — kesalahan yang tidak bisa ditarik balik.

   tabular-nums supaya digitnya berjajar rata dan mudah dibaca
   berkelompok; letter-spacing supaya angka kembar tidak menyatu. */
.tx__reknomor{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s5) var(--s4);
  border:1px dashed var(--line-2);border-radius:var(--r2);
  background:var(--bg-sunken);
}
.tx__reknomor code{
  font-size:clamp(20px,5.4vw,30px);font-weight:800;
  letter-spacing:.10em;line-height:1.2;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  word-break:break-all;text-align:center;
}
.btn--kecil{padding:7px 14px;font-size:var(--f-xs)}

/* Nama bank + atas nama, di atas kotak nomornya. */
.tx__rek{text-align:center;font-size:var(--f-md);margin-bottom:var(--s2)}

/* Blok pilihan rekening di formulir deposit. Disembunyikan selama
   metodenya bukan transfer — lihat aturan :has() di bawah. */
.tx__rekpilih{display:grid;gap:var(--s2)}
.tx__ket{font-size:var(--f-xs);color:var(--muted);line-height:1.5}

/* PENYEMBUNYIAN LEWAT CSS, BUKAN JAVASCRIPT.
   Blok pilihan rekening cuma relevan waktu radio `transfer` terpilih.
   Dikerjakan :has() supaya tanpa JS blok itu tetap tampil dan tetap bisa
   dipilih — yang hilang cuma kerapiannya, bukan fungsinya. */
[data-txform]:has(input[name="metode"][value="qris"]:checked) [data-rekpilih]{display:none}
[data-txform]:has(input[name="metode"][value="transfer"]:checked) [data-rekpilih]{display:grid}

.provp--kosong{border-style:dashed}
.provp--kosong .provp__mark{opacity:.5}
.provp--kosong:hover .provp__mark{opacity:.85}

/* PROVIDER YANG SELURUH GAMENYA DI KATEGORI INI SEDANG PERBAIKAN.
   Bukan sebagian — sebagian tetap chip normal, karena menekannya masih
   memberi game yang bisa dimainkan.

   TETAP BISA DITEKAN, dan itu beda dari .pintu__k.is-off yang tautannya
   dicabut. Chip ini PENYARING, bukan tombol main: menekannya menampilkan
   daftar gamenya lengkap dengan lencana perbaikan masing-masing. Itu
   jawaban yang benar, bukan tombol yang gagal.

   Yang diredupkan CUMA GAMBARNYA. Pelajaran yang sudah dicatat di
   .provp--kosong di atas: opacity pada seluruh kartu pernah menjatuhkan
   nama providernya ke 2,19:1, dan nama itu justru yang paling perlu
   terbaca waktu orang mencari providernya. */
.provp--perbaikan{border-style:dashed}
.provp--perbaikan .provp__mark img{filter:grayscale(.85);opacity:.55}
.provp--perbaikan .provp__mark em{opacity:.55}

/* Lencananya menyamai .tile__flag--maint dan .pintu__tag--off —
   keadaan yang sama harus terlihat sama di tiga tempat. SENGAJA BUKAN
   MERAH: merah di sini terbaca sebagai peringatan soal uang, sementara
   yang dimaksud cuma "coba lagi nanti". */
.provp__off{
  position:absolute;left:4px;top:4px;z-index:1;
  padding:1px 6px;border-radius:999px;
  font-style:normal;font-size:9px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--bg-elev);color:var(--muted);
  box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.18);
}

/* ====== PINTU PROVIDER (halaman casino) ======================
   Deret provider di atas grid adalah PENYARING; yang ini ISINYA.
   Bentuknya sengaja beda dari .provp supaya tidak terbaca sebagai
   penyaring yang lebih besar: kartunya di grid, bukan deret yang
   digulir ke samping, dan tiap kartu menyebut apa yang dibukanya.

   Ukuran minimumnya 132px, bukan 112px seperti .provp. Ini satu-
   satunya isi halaman — tidak ada grid game di bawahnya yang harus
   dimenangkan, jadi tidak ada alasan menahannya sekecil chip. */
.pintu{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:var(--s3);
}

.pintu__k{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 8px 12px;
  border:1px solid var(--line);border-radius:var(--r2);
  background:var(--grad-surface);
  color:var(--text);text-decoration:none;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.pintu__k:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--pri-rgb),.5);
  box-shadow:0 12px 28px -18px rgba(var(--pri-rgb),.9);
}
.pintu__k:focus-visible{
  outline:none;
  border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(var(--pri-rgb),.32);
}

/* Rasio 163/177 = ukuran ASLI aset providernya. Dikunci di sini supaya
   ruangnya sudah dipesan sebelum gambarnya turun — tanpa itu seluruh
   grid melompat waktu 12 logo selesai dimuat bergantian. */
.pintu__gbr{
  width:100%;aspect-ratio:163/177;
  border-radius:var(--r1);overflow:hidden;
  display:block;
}
.pintu__gbr img{width:100%;height:100%;object-fit:cover;display:block}

/* MUKA KARTU YANG BERUPA IKON, BUKAN SENI.
   Dipakai /esport: yang tersedia dari CDN sportsbook cuma ikon menu
   30x30 bergaris — aset ikon, bukan gambar kartu. `cover` membesarkannya
   dari 30px jadi 163px lalu memotongnya; hasilnya garis buram yang
   terpenggal. `contain` di dalam kotak yang rasionya tetap sama membuat
   dia terbaca sebagai ikon yang memang disengaja.

   Latarnya sedikit diangkat supaya kotaknya tetap terbaca sebagai muka
   kartu, bukan lubang kosong di tengah kartu. */
.pintu__gbr--ikon{
  background:var(--bg-elev);
  display:grid;place-items:center;
}
.pintu__gbr--ikon img{
  width:auto;height:auto;
  max-width:46%;max-height:46%;
  object-fit:contain;
}

/* Dua baris dipesan sejak awal. "Allbet" satu baris sementara "World
   Entertainment" dan "Awc Sexy Baccarat Qf" dua — tanpa tinggi tetap,
   baris nama game di bawahnya duduk di ketinggian berbeda-beda dalam
   satu baris grid, dan deretnya jadi bergerigi. */
.pintu__nm{
  font-size:var(--f-sm);font-weight:700;line-height:1.25;
  text-align:center;
  min-height:2.5em;display:flex;align-items:center;
}

/* Nama game yang dibuka kartu ini. Bukan hiasan: "Live Casino Lobby"
   dan "Baccarat" adalah dua janji yang berbeda, dan menyembunyikan
   bedanya berarti setengah kartu di sini mengingkari janjinya. */
.pintu__tag{
  font-size:var(--f-xs);font-weight:600;color:var(--muted);
  line-height:1.2;text-align:center;
  /* dua baris dipesan sejak awal supaya kartu bernama panjang dan
     pendek tetap sama tingginya — kalau tidak, barisnya bergerigi */
  min-height:2.4em;display:flex;align-items:center;
}

/* Sedang perbaikan: <div>, bukan <a>. Pembedanya garis putus-putus +
   gambar diredupkan, BUKAN opacity pada seluruh kartu — meredupkan
   semuanya menjatuhkan nama providernya jauh di bawah ambang kontras,
   dan nama itu justru yang masih perlu terbaca. */
.pintu__k.is-off{border-style:dashed;cursor:default}
.pintu__k.is-off:hover{transform:none;border-color:var(--line);box-shadow:none}
.pintu__k.is-off .pintu__gbr{opacity:.42}
/* Lencananya menyamai .tile__flag--maint di kartu game — keadaan yang
   sama harus terlihat sama di dua halaman.

   Dipasang di <b> DI DALAM .pintu__tag, bukan pada .pintu__tag sendiri.
   Kotak luarnya harus tetap setinggi 2,4em seperti kartu lain supaya
   barisnya rata; kalau pilnya sendiri yang jadi kotak itu, dia jadi pil
   setinggi dua baris. */
.pintu__tag--off{justify-content:center}
.pintu__tag--off b{
  padding:2px 9px;border-radius:999px;
  font-size:inherit;font-weight:700;color:var(--muted);
  background:var(--bg-elev);
  box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.18);
}

.pintu__ket{
  margin-top:var(--s4);
  font-size:var(--f-sm);color:var(--muted);line-height:1.6;
  max-width:62ch;
}

/* Pembungkus chip + kolom cari. Sengaja TANPA latar sendiri.

   Dulu blok ini menempel di bawah header waktu digulir, dan untuk itu dia
   butuh latar supaya kartu yang lewat di belakangnya tertutup. Latarnya
   rgba(--bg,.97) + blur — dan di situ masalahnya: latar halaman ini
   GAMBAR, bukan warna rata. Panel berwarna rata di atas latar bergambar
   selalu terbaca sebagai tambalan yang batasnya kelihatan, apalagi
   dengan gradasi yang memudar ke transparan di ujung bawahnya.

   Jadi penempelannya dibuang, dan latarnya ikut. Ongkosnya kecil:
   halaman ini memuat 36 kartu sekali jalan, jadi tidak pernah panjang
   sampai saringannya hilang jauh di atas.

   Satu-satunya sumber jarak antara deret provider dan kolom cari.
   Dulu deret provider punya <section> sendiri, dan dua batas section
   yang bertemu menyisakan ~40px ruang menganggur — sekarang keduanya
   di dalam satu section, jadi tinggal padding ini saja. */
.alat{padding-top:var(--s3)}
/* Chip di KIRI, kolom cari di KANAN, sebaris — di semua ukuran layar,
   termasuk HP. flex-wrap sengaja TIDAK dipakai: begitu dibolehkan
   membungkus, di layar sempit dia langsung menumpuk jadi dua baris dan
   itu bukan yang diminta. */
.toolbar{display:flex;align-items:center;gap:var(--s3)}

/* Chip mengisi sisa ruang dan digeser sendiri kalau kepanjangan.
   min-width:0 WAJIB: tanpa itu, isi yang meluber memaksa lebar minimum
   flex item ikut selebar isinya, kolom cari terdorong keluar layar,
   dan overflow-x pada .chips tidak pernah aktif. */
.toolbar .chips{flex:1 1 auto;min-width:0;margin-bottom:0}

/* Boleh menyusut sampai 150px supaya di layar sempit tetap muat sebaris
   dengan chip, tapi tidak melar lewat 270px di layar lebar. */
.cari{position:relative;flex:0 1 270px;min-width:150px}
.cari__ic{
  position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--dim);pointer-events:none;
}
.cari input{
  width:100%;height:42px;padding:0 40px;
  border-radius:var(--rp);
  background:var(--bg-sunken);border:1px solid var(--line);
  color:var(--text);font-size:var(--f-base);font-family:inherit;
  transition:border-color .18s,box-shadow .18s;
}
.cari input::placeholder{color:var(--dim)}
.cari input:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16)}
/* tombol bawaan Safari/Chrome dibuang, dipakai tombol sendiri supaya
   bisa disamakan gayanya dan tetap ada di semua browser */
.cari input::-webkit-search-cancel-button{display:none}
.cari__x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:var(--rp);
  display:grid;place-items:center;color:var(--dim);
}
.cari__x:hover{color:var(--text);background:var(--glass)}
.cari__x[hidden]{display:none}
.cari__x svg{width:13px;height:13px}

/* Penghitung hasil. Duduk sebaris dengan kolom cari, rata kanan, kecil.
   --muted (bukan --dim) karena duduk langsung di atas gambar latar. */
/* Rata kiri, sejajar dengan tepi kiri chip di atasnya dan kartu game di
   bawahnya — jadi dia ikut garis yang sama dengan seluruh isi halaman,
   bukan mengambang sendiri di kanan. */
.hasil{
  margin:var(--s2) 0 var(--s3);
  font-size:var(--f-sm);color:var(--muted);
}
.hasil b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.hasil[hidden]{display:none}
.hasil b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}

/* Kartu yang belum gilirannya BENAR-BENAR display:none, bukan sekadar
   transparan — browser tidak mengunduh background-image milik elemen
   display:none, jadi gambar sisanya baru diambil waktu tombol Muat
   ditekan. Menggantinya dengan opacity/visibility akan diam-diam
   mengunduh seluruh gambar sekaligus di jaringan seluler. */
.tile[hidden]{display:none}

.kosong{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s8) var(--s5);text-align:center;
  border-radius:var(--r3);
  background:var(--grad-surface);border:1px dashed var(--line-2);
}
.kosong[hidden]{display:none}
.kosong svg{width:40px;height:40px;color:var(--dim);opacity:.7}
.kosong b{font-size:var(--f-lg);font-weight:800}
.kosong span{font-size:var(--f-sm);color:var(--muted);max-width:36ch}

.muat{display:flex;justify-content:center;margin-top:var(--s6)}
.muat[hidden]{display:none}
.muat .btn{min-width:220px}
.muat svg{width:14px;height:14px}

.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:var(--s2);margin-bottom:var(--s3);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:6px 13px;border-radius:var(--rp);
  border:1px solid var(--line);background:var(--grad-surface);
  font-size:var(--f-sm);font-weight:700;color:var(--muted);transition:.2s;
}
.chip:hover{color:var(--text)}
.chip.on{background:var(--grad-pri);color:var(--on-pri);border-color:transparent}
/* kode pasaran di dalam chip riwayat; sekunder, jangan menyaingi namanya */
.chip__kode{opacity:.55;font-weight:800;font-size:var(--f-xs);margin-left:2px}

.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.tile{
  position:relative;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-soft);
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;

  /* ==========================================================
     KARTU DI LUAR LAYAR TIDAK DIRENDER — DAN GAMBARNYA TIDAK
     DIUNDUH
     ==========================================================

     Gambarnya BACKGROUND CSS, bukan <img>, jadi loading="lazy"
     tidak berlaku di sini: peramban mengambil background untuk
     setiap elemen yang dirender, sejauh apa pun dia dari layar.
     Diukur: satu halaman katalog memuat 60 kartu dan
     SELURUHNYA punya gambar — 60 permintaan sekaligus, sebagian
     besar untuk kartu yang harus digulir belasan layar dulu.

     content-visibility:auto membuat peramban melewati render
     kartu yang jauh dari layar, dan background-nya ikut tidak
     diambil sampai kartunya mendekat.

     contain-intrinsic-size WAJIB menyertainya. Tanpa itu kartu
     yang belum dirender tingginya nol, seluruh halaman menciut,
     dan bilah gulir melompat-lompat sambil digulir. Angkanya
     mendekati tinggi kartu sungguhan: seni 3/4 di atas dua baris
     teks.

     Peramban yang belum mendukungnya mengabaikan dua baris ini
     dan berperilaku seperti sebelumnya — arah gagal yang benar. */
  content-visibility:auto;
  contain-intrinsic-size:auto 260px;
}
.tile:hover{transform:translateY(-4px);border-color:rgba(var(--pri-rgb),.45);box-shadow:0 16px 28px -18px rgba(0,0,0,.9)}
/* 3 lapisan: --tile-img -> --tile-img-default -> --tile-tint.
   Ditumpuk, bukan var() fallback: var() hanya jatuh ke cadangan kalau variabel
   TIDAK diisi. Kalau diisi tapi filenya 404, kartunya bolong. */
/* 3/4 = mengikuti ukuran thumbnail penyedia (165x220 px).
   Kalau sumber gambarmu rasionya lain, ubah di sini saja. */
.tile__art{
  aspect-ratio:3/4;position:relative;overflow:hidden;
  background-image:var(--tile-img,none),var(--tile-img-default),var(--tile-tint,linear-gradient(150deg,#2a2f36,#15181c));
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
}
.tile__art::after{content:'';position:absolute;inset:0;background:linear-gradient(175deg,transparent 55%,rgba(var(--bg-rgb),.9))}
.tile__flag{
  position:absolute;top:6px;left:6px;z-index:2;
  padding:3px 7px;border-radius:5px;
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.tile__flag--hot{background:var(--grad-hot);color:var(--on-hot)}
.tile__flag--new{background:var(--grad-vip);color:#fff}

/* Game yang sedang diperbaiki di sisi provider. SENGAJA abu-abu, bukan
   merah: merah di kartu game terbaca sebagai peringatan tentang uang,
   sementara ini cuma "coba lagi nanti". Kartunya tetap ditampilkan —
   orang yang mencari game itu perlu tahu dia ada dan sedang tidak bisa
   dibuka, bukan mengira situs ini tidak punya. */
.tile__flag--maint{background:var(--bg-elev);color:var(--muted);box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.18)}
.tile[data-perbaikan] .tile__art{filter:grayscale(.85);opacity:.55}
.tile[data-perbaikan] .tile__go{display:none}


/* Satu variabel --rtp-c dipakai bersama oleh badge dan bar.
   Jadi menambah tingkat baru cukup satu baris, tidak perlu
   menulis ulang aturan untuk badge dan bar terpisah. */
.tile{--rtp-c:var(--rtp-3)}
.tile[data-rtp-tier="1"]{--rtp-c:var(--rtp-1)}
.tile[data-rtp-tier="2"]{--rtp-c:var(--rtp-2)}
.tile[data-rtp-tier="3"]{--rtp-c:var(--rtp-3)}
.tile[data-rtp-tier="4"]{--rtp-c:var(--rtp-4)}

.tile__rtp{
  position:absolute;top:6px;right:6px;z-index:2;
  padding:3px 7px;border-radius:5px;
  background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(4px);
  border:1px solid var(--rtp-c);
  font-size:10px;font-weight:800;color:var(--rtp-c);
  font-variant-numeric:tabular-nums;
}
.tile__body{padding:var(--s2) var(--s3) var(--s3)}
.tile__body b{display:block;font-size:var(--f-md);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__body span{font-size:var(--f-xs);color:var(--dim)}

.tile__bar{
  height:9px;border-radius:5px;margin-top:8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.tile__bar i{
  display:block;height:100%;border-radius:5px;position:relative;overflow:hidden;
  box-shadow:0 0 10px -2px var(--rtp-c);
  transition:width .8s var(--ease);
}

/* Isi bar melewati SEMUA tingkat di bawahnya, bukan satu warna rata.
   Jadi bar 92% terbaca merah -> oranye -> kuning -> hijau, bukan hijau polos. */
.tile[data-rtp-tier="1"] .tile__bar i{background:linear-gradient(90deg,#7d1a15,var(--rtp-1))}
.tile[data-rtp-tier="2"] .tile__bar i{background:linear-gradient(90deg,var(--rtp-1),var(--rtp-2))}
.tile[data-rtp-tier="3"] .tile__bar i{background:linear-gradient(90deg,var(--rtp-1),var(--rtp-2) 55%,var(--rtp-3))}
.tile[data-rtp-tier="4"] .tile__bar i{background:linear-gradient(90deg,var(--rtp-1),var(--rtp-2) 35%,var(--rtp-3) 65%,var(--rtp-4))}

/* Belang miring berjalan.
   Lebar 200% + geser tepat satu periode pola (26px) supaya sambungannya
   tidak kelihatan. Animasinya transform — dikomposit GPU, jadi 12 bar
   jalan bersamaan tetap ringan di Android kelas bawah.
   prefers-reduced-motion di bagian bawah file otomatis mematikannya. */
.tile__bar i::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:200%;
  --belang:26px;                  /* satu periode pola; mobile.css merapatkannya */
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.24) 0 calc(var(--belang) * .32),
    rgba(255,255,255,0)   calc(var(--belang) * .32) var(--belang));
  animation:belang 1.1s linear infinite;
}
@keyframes belang{to{transform:translateX(calc(var(--belang) * -1))}}

.tile__go{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .22s;
}
.tile:hover .tile__go{opacity:1}
.tile__go span{
  display:flex;align-items:center;gap:5px;
  padding:7px 15px;border-radius:var(--rp);
  background:var(--grad-pri);color:var(--on-pri);
  font-size:var(--f-sm);font-weight:800;
}
.tile__go svg{width:12px;height:12px}

/* ----------------------------------------------------------
   10. PANEL PROMO + HITUNG MUNDUR
   ---------------------------------------------------------- */
.promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}

/* Kartu promo: gambar sebagai AREA TERSENDIRI di atas, bukan latar di
   belakang teks. Bedanya penting — kalau gambar jadi latar, gambarnya
   harus diredam sampai gelap supaya teks terbaca, dan gambar promo yang
   biasanya ramai jadi hilang isinya. Dipisah, gambarnya tampil utuh. */
.promo{
  display:flex;flex-direction:column;
  border-radius:var(--r2);overflow:hidden;
  background:var(--grad-surface);border:1px solid var(--line);
  transition:border-color .2s;
}
.promo:hover{border-color:var(--line-2)}

.promo__img{
  position:relative;
  aspect-ratio:var(--promo-ratio);
  /* --promo-img di-set inline per kartu dari $PROMO. Cadangannya bukan
     hiasan: kalau nama berkasnya salah ketik, tanpa ini kotaknya jadi
     lubang tembus pandang yang meneruskan --bg-image halaman. */
  background:var(--promo-img,linear-gradient(150deg,#2a2f36,#15181c)) center/cover no-repeat;
}
.promo__img .pill{position:absolute;top:var(--s2);left:var(--s2);z-index:2}

.promo__isi{display:flex;flex-direction:column;flex:1;gap:var(--s2);padding:var(--s3)}
/* h2, bukan h3. Judul kartu promo adalah judul bagian tingkat pertama di
   halamannya — di atasnya cuma ada <h1> halaman itu sendiri. Sebagai h3
   dia melompati satu tingkat, dan ukurannya yang kecil bukan alasan:
   ukuran urusan font-size, tingkat urusan struktur. */
.promo__isi h2{font-size:var(--f-base);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.3}

/* ----------------------------------------------------------
   9d. HALAMAN PROMOSI (promosi.php)
   Kartunya .promo yang SAMA dengan beranda — yang ditambah di sini cuma
   yang memang cuma ada di halaman ini: nilai besar di gambar, ringkasan,
   dan seluruh isi popup rinciannya.
   ---------------------------------------------------------- */

/* Tetap grid di HP. Beranda mengubah .promos jadi slider karena di sana
   blok promo cuma pratinjau di tengah halaman panjang; di sini daftarnya
   ISI halaman, dan menyembunyikan tujuh dari delapan promo di balik
   geseran mendatar berarti hampir semuanya tidak pernah dilihat. */
.promos--grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Nilai bonus dicetak besar di atas gambar. Itu satu-satunya angka yang
   dibandingkan orang waktu menyapu daftar; ditaruh di badan kartu, dia
   tenggelam di antara judul dan chip syarat. */

/* PITA GELAP DI BAWAH GAMBAR, dan dia menggantikan text-shadow sebagai
   penjamin keterbacaan.

   Sebelum ini yang menjaga angka cuma `text-shadow` — cukup selama art
   promo masih SVG bawaan yang gelap dan kosong di bagian bawahnya.
   Begitu art sungguhan dipasang, dasarnya berisi: mobil putih, HP, dan
   emas terang persis di jalur angkanya, dan bayangan lembut kalah.

   Yang diredam CUMA seperempat bawah, bukan seluruh gambar. Meredam
   semuanya membuat art yang sengaja dibuat mencolok jadi kusam — padahal
   yang perlu dijamin cuma jalur setinggi satu baris teks. Gradiennya
   berhenti di `transparent` supaya batasnya tidak terlihat sebagai garis.

   Ditulis di bawah .promos--grid, jadi TIDAK kena .modal__seni yang juga
   memakai .promo__img: di popup rincian tidak ada angka di atas gambar,
   jadi tidak ada yang perlu dijamin dan gambarnya tampil apa adanya. */
.promos--grid .promo__img::after{
  content:'';position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 45%,transparent);
  pointer-events:none;
}

.promo__nilai{
  position:absolute;left:var(--s3);bottom:var(--s2);z-index:2;
  font-size:var(--f-2xl);font-weight:800;letter-spacing:-.02em;
  color:var(--acc);text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.promo__ringkas{margin:0;font-size:var(--f-sm);color:var(--muted);line-height:1.5}
/* margin-top:auto dari .promo__foot yang harus menang, supaya baris penutup
   terdorong ke dasar dan tinggi ketiga kartu rata. Aturan lama di sini
   (0,2,0) mengalahkannya dan membuat tombol Klaim menempel di chip terakhir
   — tingginya jadi tidak rata karena panjang ringkasan tiap promo beda. */
.promos--grid .promo__foot{margin-top:auto}

/* Isi popup. display:none selama di kartu — DAN ITU DISENGAJA: peramban
   tidak mengunduh background-image milik elemen display:none, jadi
   delapan gambar rincian tidak ikut terunduh sampai popup-nya dibuka. */
.promo__detil[hidden]{display:none}
.promo__detil h2{font-size:var(--f-xl);font-weight:800;line-height:1.25;margin-bottom:var(--s2)}
.promo__sub{
  margin:var(--s5) 0 var(--s3);
  font-size:var(--f-xs);font-weight:800;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;
}
.promo__detil .txhasil__rinci{margin:var(--s4) 0 0;text-align:left}

.promo__langkah{margin:0;padding-left:0;list-style:none;counter-reset:lang}
.promo__langkah li{
  position:relative;counter-increment:lang;
  padding-left:30px;margin-bottom:var(--s3);
  font-size:var(--f-sm);color:var(--muted);line-height:1.55;
}
.promo__langkah li::before{
  content:counter(lang);
  position:absolute;left:0;top:0;
  width:21px;height:21px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  font-size:10px;font-weight:800;
}

.promo__syarat{margin:0;padding:0;list-style:none}
.promo__syarat li{
  position:relative;padding-left:18px;margin-bottom:var(--s2);
  font-size:var(--f-sm);color:var(--muted);line-height:1.55;
}
.promo__syarat li::before{
  content:"";position:absolute;left:4px;top:8px;
  width:5px;height:5px;border-radius:var(--rp);background:var(--dim);
}

.promo__aksi{margin-top:var(--s6)}
/* Promo yang jalan sendiri tidak diberi tombol klaim — keterangan ini
   yang menggantikannya, supaya tidak ada yang menunggu tombol yang
   memang tidak ada. */
.promo__otomatis{
  display:flex;align-items:center;gap:9px;
  margin:0 0 var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r1);
  background:rgba(var(--green-rgb),.1);border:1px solid rgba(var(--green-rgb),.28);
  font-size:var(--f-sm);color:var(--text);line-height:1.5;
}
.promo__otomatis svg{flex:none;width:16px;height:16px;color:var(--green)}

/* Ditulis .tx__info.promo-awas, BUKAN .promo-awas saja. Dua sebabnya
   bertumpuk:

   1. .tx__info memakai margin SINGKAT (`margin:var(--s4) 0 0`), jadi dia
      menyetel ulang margin-bottom jadi 0 — bukan cuma menimpa yang atas.
   2. .tx__info ditulis SESUDAH blok ini di berkas, dan specificity-nya
      sama-sama (0,1,0). Yang belakangan menang.
   Gabungan keduanya bikin `.promo-awas{margin-bottom}` tidak pernah
   berlaku sama sekali: kotaknya dapat 16px di atas dan NOL di bawah,
   menempel ke deretan chip. Ditulis sebagai gabungan dua kelas (0,2,0),
   urutan berkas tidak lagi jadi soal.

   Nilainya: nol di atas karena kotak ini bagian dari kepala halaman —
   jarak dari judul sudah disediakan .sechd--hal dan .sec--katalog. Yang
   perlu dipisah justru deretan chip di bawahnya. */
.tx__info.promo-awas{margin:0 0 var(--s5)}
.promo-awas b{color:var(--text);font-weight:800}

/* ----------------------------------------------------------
   9f. HALAMAN TENTANG (tentang.php)
   Kartunya .kartu-tx yang SAMA dengan halaman akun dan transaksi.
   Yang ditambah di sini cuma yang belum pernah ada.
   ---------------------------------------------------------- */
/* ---- kartu sambutan ----
   Kartu paling atas halaman, jadi dia yang menentukan kesan pertama.
   Dibedakan dari kartu lain lewat DUA hal saja: pendar di belakang dan
   ukuran huruf judulnya. Pola pendarnya menyalin blok hero di beranda
   (radial-gradient rgba(--pri-rgb) tipis), jadi bukan gaya baru — dan
   tidak ada satu pun warna yang ditambahkan. */
/* TANPA padding sendiri. Markupnya `class="kartu-tx sambut"` — dua kelas di
   satu elemen, spesifisitas seri (0,1,0), dan .kartu-tx ditulis jauh lebih
   belakang di berkas ini sehingga paddingnya yang menang. Deklarasi padding
   di sini tidak pernah berlaku di lebar mana pun; dibiarkan, dia cuma
   kebohongan di kode yang bikin orang berikutnya salah menduga. */
.sambut{
  position:relative;isolation:isolate;overflow:hidden;
  text-align:center;
}
.sambut::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 300px at 50% -10%,rgba(var(--pri-rgb),.13),transparent 70%),
    radial-gradient(520px 260px at 50% 118%,rgba(var(--acc-rgb),.07),transparent 72%);
}
/* Garis rambut di tepi atas — penanda halus bahwa ini kartu pembuka.
   Melebar ke tengah lalu memudar di kedua ujungnya. */
.sambut::after{
  content:'';position:absolute;top:0;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--pri-rgb),.75),transparent);
}
/* Memakai komponen .logo — tinggal tingginya yang diatur, rasio aslinya
   sudah dibawa --logo-ratio. */
.sambut__logo{height:calc(var(--logo-h) * 1.7);margin:0 auto var(--s5)}
.sambut h2{
  font-size:var(--f-3xl);font-weight:800;
  letter-spacing:-.03em;line-height:1.15;margin-bottom:var(--s4);
}
.sambut h2 em{
  font-style:normal;
  background:var(--grad-pri);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sambut p{
  max-width:62ch;margin:0 auto var(--s3);
  font-size:var(--f-base);color:var(--muted);line-height:1.75;
}
.sambut p:last-child{margin-bottom:0}
.sambut p b{color:var(--text);font-weight:800}

/* ---- petak angka ---- */
.angka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.angka__i{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:var(--s6) var(--s3) var(--s5);border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
  text-align:center;
  transition:border-color .2s,transform .2s var(--ease);
}
/* Pendar kecil dari sudut atas — bikin petaknya punya arah cahaya yang
   sama dengan kartu lain di situs, bukan kotak rata. */
.angka__i::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(190px 110px at 50% -14%,rgba(var(--pri-rgb),.12),transparent 70%);
  pointer-events:none;
}
.angka__i:hover{border-color:var(--line-2);transform:translateY(-2px)}
.angka__ik{
  position:relative;
  width:44px;height:44px;border-radius:var(--r2);margin-bottom:6px;
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  box-shadow:0 6px 18px -8px rgba(var(--pri-rgb),.85);
}
.angka__ik svg{width:22px;height:22px}
/* Angkanya diberi gradasi silver yang sama dengan tombol utama — ini
   satu-satunya angka besar di halaman, dan dia yang paling dilihat. */
.angka__i > b{
  position:relative;
  font-size:var(--f-2xl);font-weight:800;letter-spacing:-.03em;line-height:1.1;
  background:var(--grad-pri);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* :not([class]) WAJIB — kambuh ketiga dari jebakan yang sama. Ikon petaknya
   <span class="angka__ik">, juga anak langsung .angka__i, jadi selektor
   elemen (0,1,1) ini mengalahkan .angka__ik (0,1,0) dan memaksa warnanya
   jadi --dim di atas lencana bergradasi terang. Kontras jatuh ke 2,1:1. */
.angka__i > span:not([class]){
  position:relative;
  font-size:var(--f-xs);color:var(--dim);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.35;
}

/* ---- visi & misi ---- */
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
/* Ikon judul di dua kartu ini diberi bidang seperti .angka__ik dan
   .why__ik supaya ketiganya terbaca satu keluarga. Hanya di .vm —
   .kartu-tx__hd dipakai belasan tempat lain yang tidak ikut berubah. */
.vm .kartu-tx__hd svg{
  flex:none;box-sizing:content-box;
  width:18px;height:18px;padding:9px;border-radius:var(--r2);
  background:var(--grad-pri);color:var(--on-pri);
  box-shadow:0 6px 16px -8px rgba(var(--pri-rgb),.8);
}

.misi-l{margin:0;padding:0;list-style:none}
.misi-l li{
  position:relative;padding-left:26px;margin-bottom:var(--s3);
  font-size:var(--f-md);color:var(--muted);line-height:1.55;
}
.misi-l li:last-child{margin-bottom:0}
.misi-l li::before{
  content:"";position:absolute;left:0;top:2px;
  width:17px;height:17px;border-radius:var(--rp);
  background:rgba(var(--green-rgb),.16);
  border:1px solid rgba(var(--green-rgb),.4);
}
.misi-l li::after{
  content:"";position:absolute;left:5px;top:7px;
  width:6px;height:3px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

/* ---- kenapa pilih ---- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.why__i{
  position:relative;overflow:hidden;
  display:flex;gap:var(--s4);
  padding:var(--s5);border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
  transition:border-color .2s;
}
/* Batang tipis di tepi kiri, senada dengan garis di kartu sambutan.
   Tumbuh dari atas ke bawah saat disorot — penanda arah baca, bukan
   sekadar hiasan. */
.why__i::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad-pri);
  transform:scaleY(.28);transform-origin:top;
  transition:transform .28s var(--ease);
}
.why__i:hover{border-color:var(--line-2)}
.why__i:hover::before{transform:scaleY(1)}
.why__i--lebar{grid-column:1 / -1}
.why__ik{
  flex:none;width:40px;height:40px;border-radius:var(--r2);
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  box-shadow:0 6px 16px -8px rgba(var(--pri-rgb),.8);
}
.why__ik svg{width:20px;height:20px}
.why__i > div{min-width:0}
.why__i b{display:block;font-size:var(--f-base);font-weight:800;margin-bottom:5px}
.why__i p{margin:0;font-size:var(--f-sm);color:var(--muted);line-height:1.6}
.why__i p b{display:inline;font-size:inherit;color:var(--text);margin:0}

.tentang__p{margin:0 0 var(--s4);font-size:var(--f-base);color:var(--muted);line-height:1.7}
.tentang__p:last-of-type{margin-bottom:0}
.tentang__p b{color:var(--text);font-weight:800}
.kartu-tx .tentang__p + .stat{margin-top:var(--s5)}

/* Petak kategori. auto-fit + minmax supaya jumlah kolomnya menyesuaikan
   sendiri tanpa satu pun breakpoint — daftarnya berasal dari data dan
   bisa bertambah kapan saja. */
.tentang__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s2)}
.tentang__kat{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:var(--s4) var(--s2);border-radius:var(--r2);
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:var(--f-sm);font-weight:700;color:var(--muted);
  text-align:center;transition:border-color .18s,color .18s;
}
.tentang__kat:hover{border-color:var(--line-2);color:var(--text)}
.tentang__ik{
  width:34px;height:34px;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--glass);color:var(--dim);
  transition:color .18s;
}
.tentang__kat:hover .tentang__ik{color:var(--acc)}
.tentang__ik svg{width:19px;height:19px}

/* Logo penyedia. Latar terang dipertahankan karena logonya memang dibuat
   untuk latar terang — dipaksa ke latar gelap, sebagian jadi hilang
   garisnya. */
.tentang__logo{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s2)}
.tentang__logo-i{
  display:grid;place-items:center;
  aspect-ratio:3/2;border-radius:var(--r1);
  background:var(--bg-sunken);border:1px solid var(--line);
}
.tentang__logo-i img{max-width:74%;max-height:62%;object-fit:contain}


.tentang__kontak{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
.tentang__kontak .btn{flex:1;min-width:170px}

/* ----------------------------------------------------------
   9g. DOKUMEN HUKUM (privasi.php, syarat.php)
   ---------------------------------------------------------- */

/* Daftar isi. Dua kolom di desktop: sebelas pasal dalam satu lajur
   memaksa menggulir sebelum sampai ke pasal pertama — padahal justru
   daftar ini yang dipakai untuk melompat. */
.daftarisi{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px var(--s4);margin:0;padding:0;list-style:none;counter-reset:none;
}
.daftarisi a{
  display:flex;align-items:center;gap:10px;
  padding:9px var(--s3);border-radius:var(--r1);
  font-size:var(--f-md);color:var(--muted);
  transition:background .16s,color .16s;
}
.daftarisi a:hover{background:var(--glass);color:var(--text)}
.daftarisi a span{
  flex:none;width:22px;height:22px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--bg-sunken);border:1px solid var(--line-2);
  font-size:10px;font-weight:800;color:var(--dim);
}
.daftarisi a:hover span{border-color:var(--pri);color:var(--text)}

/* Nomor pasal di judul kartu. Bentuknya sama dengan nomor di daftar isi
   supaya keduanya jelas menunjuk hal yang sama. */
.pasal__no{
  flex:none;width:26px;height:26px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  font-size:var(--f-sm);font-weight:800;
}
/* Kartu pasal jadi sasaran lompatan #id. Tanpa scroll-margin, judulnya
   berhenti tepat di balik header yang sticky. */
[id] .pasal__no,.kartu-tx[id]{scroll-margin-top:calc(var(--header-h) + var(--s4))}
/* Paragraf terakhir di dalam pasal tidak perlu jarak bawah — padding
   kartunya sudah mengurus itu. */
.kartu-tx > .tentang__p:last-child,
.kartu-tx > .promo__syarat:last-child li:last-child{margin-bottom:0}
.kartu-tx > .txhasil__rinci:last-child{margin-bottom:0}

/* ---- tanya jawab ----
   <details> bawaan peramban, bukan buka-tutup buatan sendiri: dia sudah
   bisa dicari lewat Ctrl+F walau sedang tertutup, dan tetap terbuka
   kalau JS mati. Buatan sendiri kehilangan dua-duanya. */
/* margin-top dipakai waktu blok ini menempel di bawah isi lain
   (promosi.php). Di faq.php dia anak .tumpuk yang sudah punya gap —
   di sana margin-nya dibatalkan supaya jaraknya tidak dobel. */
.faq{margin-top:var(--s8)}
.tumpuk > .faq{margin-top:0}
.faq h2{font-size:var(--f-xl);font-weight:800;margin-bottom:var(--s4)}

/* ---- halaman keluar (keluar.php) ----
   Kolom sempit yang di tengah. Halaman ini cuma punya satu maksud, dan
   lebar penuh membuat tiga kalimatnya berserak di layar 1240px. */
.keluar{
  max-width:560px;margin-inline:auto;
  padding:var(--s7) 0 var(--s8);
  display:flex;flex-direction:column;gap:var(--s5);
}
.keluar__kartu{text-align:center}
.keluar__kartu h1{font-size:var(--f-2xl);font-weight:800;margin:var(--s2) 0 var(--s3)}
.keluar__kartu .tentang__p{margin-bottom:0}
.keluar__catat{text-align:center}

/* ---- saluran kontak (kontak.php) ----
   Kartu tautan penuh, bukan tombol di dalam kartu: seluruh bidangnya
   jadi sasaran sentuh. Di HP ini yang paling sering ditekan sambil
   panik, dan sasaran kecil di keadaan itu paling sering meleset. */
.kanal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.kanal__i{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5);border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
  transition:border-color .2s,transform .2s var(--ease);
}
.kanal__i:hover{border-color:var(--line-2);transform:translateY(-2px)}
/* Jalur yang disarankan diberi bingkai lebih terang — pembedanya
   bingkai, bukan warna baru. */
.kanal__i--utama{border-color:rgba(var(--pri-rgb),.45)}
.kanal__i--utama:hover{border-color:var(--pri)}
.kanal__ik{
  flex:none;width:44px;height:44px;border-radius:var(--r2);
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  box-shadow:0 6px 16px -8px rgba(var(--pri-rgb),.8);
}
.kanal__ik svg{width:22px;height:22px}
.kanal__t{flex:1;min-width:0}
.kanal__t b{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--f-base);font-weight:800;margin-bottom:3px;
}
.kanal__t > span{display:block;font-size:var(--f-sm);color:var(--muted);line-height:1.5}
.kanal__t em{
  display:block;margin-top:5px;font-style:normal;
  font-size:var(--f-xs);color:var(--dim);
}
.kanal__arw{flex:none;width:15px;height:15px;color:var(--dim)}
.kanal__i:hover .kanal__arw{color:var(--acc)}

/* Kode transaksi di dalam kalimat. <code> tanpa aturan akan memakai
   font monospace bawaan peramban yang tidak ada hubungannya dengan
   huruf situs ini. */
.promo__syarat code,.tentang__p code{
  padding:2px 6px;border-radius:5px;
  background:var(--bg-sunken);border:1px solid var(--line-2);
  font-family:inherit;font-size:var(--f-xs);font-weight:800;
  letter-spacing:.02em;color:var(--text);
}

/* ---- langkah panduan ----
   Dipakai cara-deposit.php dan cara-withdraw.php. Berbeda dari
   .promo__langkah yang ringkas: di sini tiap langkah punya JUDUL dan
   penjelasan, karena halaman panduan memang dibaca sambil dikerjakan —
   judulnya yang dicari mata waktu balik lagi ke layar. */
.panduan{display:block;margin:0;padding:0;list-style:none}
.panduan li{display:flex;gap:var(--s4);padding:var(--s4) 0}
.panduan li + li{border-top:1px solid var(--line)}
.panduan li:first-child{padding-top:0}
.panduan li:last-child{padding-bottom:0}
.panduan__no{
  flex:none;width:30px;height:30px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  font-size:var(--f-md);font-weight:800;
  box-shadow:0 6px 16px -8px rgba(var(--pri-rgb),.8);
}
.panduan li > div{flex:1;min-width:0}
.panduan li > div > b{display:block;font-size:var(--f-base);font-weight:800;margin-bottom:5px}
.panduan li > div > p{margin:0 0 var(--s3);font-size:var(--f-sm);color:var(--muted);line-height:1.65}
.panduan li > div > p:last-child{margin-bottom:0}
.panduan li > div > p b{color:var(--text);font-weight:800}
.panduan .nominal__cepat{margin-top:var(--s3)}
/* Chip di sini CONTOH tampilan, bukan tombol — dimatikan supaya tidak
   ada yang menekannya lalu bingung kenapa tidak terjadi apa-apa. */
.panduan .chip{pointer-events:none}

/* Kelompok pertanyaan. Judul kelompok kedua dan seterusnya diberi jarak
   atas — tanpa itu judul berikutnya menempel ke jawaban terakhir
   kelompok sebelumnya. */
.faq__grup + .faq__grup{margin-top:var(--s7)}
.faq__grup[hidden]{display:none}
.faq details[hidden]{display:none}

/* Bilah pencarian. Memakai .cari yang sama dengan katalog game, jadi
   bentuk dan perilaku kotak carinya identik di seluruh situs.

   `flex:none` WAJIB, dan ini bukan kehati-hatian berlebihan.

   .cari lahir di bilah alat katalog game, yang wadahnya flex MENDATAR.
   Di sana `flex:0 1 270px` berarti "lebar dasar 270px, boleh menyusut".
   Di faq.php dia jadi anak .tumpuk — dan .tumpuk itu flex TEGAK
   (flex-direction:column, aturan 2395). Pada sumbu tegak, flex-basis
   mengatur TINGGI, bukan lebar. Jadi kotak carinya diam-diam jadi
   setinggi 270px, dan ikon .cari__ic yang duduk di top:50% mendarat
   135px ke bawah — di luar kotaknya, mengambang sendirian di bawah
   kolom input. Tidak ada satu pun galat yang muncul; kotaknya tetap
   terlihat benar, cuma ikonnya yang terlempar.

   Ini jebakan yang berlaku untuk KOMPONEN APA PUN yang punya flex-basis
   lalu dipakai ulang di dalam .tumpuk atau .panel. Kalau nanti ada
   komponen bilah-alat lain dipindahkan ke sini, periksa flex-nya dulu. */
.faqbar__cari{max-width:none;width:100%;flex:none}
.faq details{
  border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
  margin-bottom:var(--s2);
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);cursor:pointer;list-style:none;
  font-size:var(--f-md);font-weight:700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq summary:hover{color:var(--acc)}
/* Diikat ke dalam <details>. Sebagai '.faq p' (0,1,1) aturan ini juga
   menyapu <p class="tx__catat"> yang jadi anak langsung .faq di
   cara-deposit.php dan cara-withdraw.php — paragraf catatan itu ikut
   menjorok 16px kiri-kanan dan tampil sebesar jawaban FAQ, padahal
   .tx__catat (0,1,0) yang seharusnya berlaku. */
.faq details p{
  margin:0;padding:0 var(--s4) var(--s4);
  font-size:var(--f-sm);color:var(--muted);line-height:1.6;
}
.faq details p b{color:var(--text);font-weight:800}

/* Tautan di dalam jawaban FAQ dan catatan kecil. Tanpa ini, <a> tanpa
   class="tautan" dirender identik dengan teks sekitarnya — reset
   'a{color:inherit;text-decoration:none}' membuatnya tak terlihat sebagai
   tautan sama sekali. Terjadi di cara-withdraw.php. */
.faq p a,.tx__catat a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Chip syarat. Warnanya membedakan APA YANG DIDAPAT (hijau) dari
   APA YANG HARUS DISETOR (emas) — sekali lihat sudah kebaca. */
.promo__tag{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ptag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:var(--r1);
  font-size:var(--f-xs);font-weight:700;
  border:1px solid;
}
.ptag svg{width:12px;height:12px;flex:none}
.ptag--untung{color:var(--green);border-color:rgba(var(--green-rgb),.38);background:rgba(var(--green-rgb),.1)}
.ptag--syarat{color:var(--syarat);border-color:rgba(var(--syarat-rgb),.38);background:rgba(var(--syarat-rgb),.1)}

/* margin-top:auto mendorong baris penutup ke dasar, jadi tinggi
   ketiga kartu tetap rata walau jumlah chip-nya beda */
.promo__foot{
  margin-top:auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);
}
.promo__masa{display:flex;align-items:center;gap:5px;font-size:var(--f-xs);color:var(--dim)}
.promo__masa svg{width:13px;height:13px;flex:none}
.promo__foot .btn{flex:none}

/* ----------------------------------------------------------
   11. RESULT TOGEL
   Satu kartu per pasaran. Angka ditampilkan sebagai kotak digit terpisah
   supaya terbaca sebagai hasil undian, bukan sekadar angka biasa.
   ---------------------------------------------------------- */
/* Spanduk peringatan; dipakai halaman togel DAN blok Result di beranda.
   Muncul-tidaknya diatur saklar TOGEL_CONTOH di inc/data.php, bukan CSS. */
/* BLOK, bukan flex. Sama seperti .authside__box li: isinya paragraf dengan
   <b>, <a>, dan <button class="tautan"> di TENGAH kalimat. Sebagai flex
   container, tiap elemen inline dan tiap potongan teks di antaranya jadi
   flex item sendiri yang dipisah gap 8px — akibatnya tanda baca lepas dari
   katanya ("...menghidupkannya kembali . Yang hangus...") dan titik penutup
   bisa jatuh sendirian di baris baru. Terlihat di 11 tempat: akun.php (4),
   transaksi.php (3), vip.php (3), cara-deposit.php (2), dan lainnya. */
.notis{
  display:block;
  margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border-radius:var(--r1);
  background:rgba(var(--hot-rgb),.08);
  border:1px dashed rgba(var(--hot-rgb),.4);
  font-size:var(--f-sm);color:var(--muted);line-height:1.5;
}
.notis b{color:var(--hot-lt);font-weight:800}
.notis a{color:var(--pri);font-weight:700}

/* jarak antar blok di halaman togel; .sechd bawaan terlalu rapat kalau
   dipakai memisahkan tiga bagian besar dalam satu section */
.sechd--sela{margin-top:var(--s7)}

/* ----------------------------------------------------------
   9c. HALAMAN TRANSAKSI (transaksi.php)
   ---------------------------------------------------------- */

/* Tab, BUKAN chip. Di situs ini chip artinya menyaring daftar; tab
   berganti panel isi. Dua hal berbeda, jadi bentuknya dibedakan —
   kalau sama, orang mengira menekan tab akan menyaring sesuatu. */
.tabs{
  display:flex;gap:4px;
  padding:4px;margin-bottom:var(--s5);
  border-radius:var(--r2);
  background:var(--bg-sunken);border:1px solid var(--line);
}
.tabs__b{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  height:42px;border-radius:var(--r1);
  color:var(--muted);font-size:var(--f-md);font-weight:700;
  transition:background .2s,color .2s;
}
.tabs__b svg{width:15px;height:15px}
.tabs__b:hover{color:var(--text)}
.tabs__b.on{background:var(--grad-pri);color:var(--on-pri)}
.panel[hidden]{display:none}

/* ---- kartu saldo ----
   Saldo utama dan saldo bonus dipisah karena memang beda barang: yang
   bonus terikat syarat turnover dan belum bisa ditarik. Dijumlahkan jadi
   satu angka, orang mengira uangnya lebih banyak dari yang bisa diambil. */
.dompet{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
  border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
}
.dompet__ik{
  flex:none;width:42px;height:42px;border-radius:var(--r2);
  display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
}
.dompet__ik svg{width:21px;height:21px}
.dompet__utama{flex:1;min-width:0}
.dompet__bonus{flex:none;text-align:right}
.dompet__utama span,.dompet__bonus span{
  display:block;font-size:var(--f-xs);color:var(--dim);
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;
}
.dompet__utama b{font-size:var(--f-xl);font-weight:800;font-variant-numeric:tabular-nums}
.dompet__bonus b{font-size:var(--f-md);font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}

/* ---- kartu pembungkus form ---- */
/* --s6 (24px), bukan --s5. Kartu ini yang paling lebar di situs — di
   halaman akun lebarnya sampai ~900px — dan padding 20px di bidang
   selebar itu membuat isinya terlihat menempel ke tepi.
   ANGKA INI TERIKAT ke margin negatif .tabelbox: tabel di dalam kartu
   melebar sampai tepi kartu dengan margin minus sebesar padding ini.
   Diubah salah satunya saja, tabelnya menonjol keluar atau kurang. */
.kartu-tx{
  padding:var(--s7);border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
}
/* Ditulis sendiri, tidak menumpang [hidden] bawaan browser: kalau nanti
   .kartu-tx diberi display apa pun, gaya penulis mengalahkan gaya bawaan
   dan kartunya tetap tampil walau sudah disembunyikan. */
.kartu-tx[hidden]{display:none}
.kartu-tx__hd{
  display:flex;align-items:center;gap:8px;
  padding-bottom:var(--s4);margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);
  text-align:left;
}
.kartu-tx__hd svg{flex:none;width:19px;height:19px;color:var(--muted)}
.kartu-tx__hd b{font-size:var(--f-lg);font-weight:800}
/* Status didorong ke ujung kanan judul kartu, bukan diselipkan sebagai
   satu baris lagi di daftar rincian: ini keterangan yang paling sering
   dicari orang di layar ini, jadi tempatnya paling atas. */
.kartu-tx__hd .txstat{margin-left:auto}

/* Judul tiap bagian form. Huruf kecil-kapital supaya jelas ini penanda
   kelompok, bukan label kolom yang menempel ke satu isian.
   SATU aturan untuk semua judul bagian di halaman ini, termasuk yang
   pakai ikon — bukan kelas sendiri per bagian. Judul yang diwarnai
   berbeda hanya karena isinya dianggap lebih menarik itu awal palet
   berantakan. */
.tx__label{
  display:flex;align-items:center;gap:7px;margin-bottom:var(--s3);
  font-size:var(--f-xs);font-weight:800;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;
}
.tx__label svg{flex:none;width:14px;height:14px}
.tx__label em{font-style:normal;font-weight:700;letter-spacing:0;text-transform:none}
.field + .tx__label,.metode + .tx__label,.kotak-bonus + .tx__label,
.rek__tetap + .tx__label,.tx__catat + .tx__label{margin-top:var(--s5)}
.tx__saldo{color:var(--acc);font-weight:800}
.tx__catat{margin:var(--s2) 0 0;font-size:var(--f-xs);color:var(--dim);line-height:1.5}

/* ---- metode pembayaran ----
   Cuma satu pilihan, dan kartunya tetap ditampilkan: kalau disembunyikan,
   orang tidak tahu dia sedang membayar lewat apa sampai kodenya keluar. */
.metode{display:flex;gap:var(--s3);flex-wrap:wrap}
/* Kartunya selebar form. Isinya MENDATAR, bukan ditumpuk: kotak selebar
   ini dengan ikon dan label ditaruh di tengah cuma jadi ruang kosong
   memanjang. Kalau nanti metodenya lebih dari satu, tinggal ganti
   flex-basis-nya jadi 50% supaya berdua sebaris. */
.metode__i{flex:1 1 100%}
/* radio disembunyikan tapi TIDAK display:none — elemen display:none
   tidak bisa difokus, jadi pemakai keyboard kehilangan pilihannya */
.metode__i input{position:absolute;opacity:0;width:0;height:0}
.metode__kotak{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s4);
  border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
  cursor:pointer;transition:border-color .18s;
}
.metode__ik{
  flex:none;width:44px;height:44px;border-radius:var(--r1);
  display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);
  color:var(--muted);transition:color .18s,background .18s,border-color .18s;
}
.metode__ik svg{width:23px;height:23px}
.metode__nama{flex:1;min-width:0}
.metode__nama b{display:block;font-size:var(--f-md);font-weight:800;letter-spacing:.04em}
.metode__nama em{
  display:block;margin-top:2px;
  font-style:normal;font-size:var(--f-xs);color:var(--dim);line-height:1.45;
}
.metode__i:hover .metode__kotak{border-color:var(--line-2)}
.metode__i input:checked + .metode__kotak{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.metode__i input:checked + .metode__kotak .metode__ik{
  color:var(--acc);
  background:rgba(var(--acc-rgb),.12);border-color:rgba(var(--acc-rgb),.35);
}
.metode__i input:focus-visible + .metode__kotak{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3)}
/* Centangnya ikut arus, bukan ditempel absolut di pojok — di kartu
   selebar ini pojok kanan atas jauh dari tulisan yang ditandainya. */
.metode__cek{
  flex:none;width:20px;height:20px;border-radius:var(--rp);
  display:grid;place-items:center;
  background:var(--acc);color:var(--bg);
  opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s;
}
.metode__cek svg{width:11px;height:11px;color:inherit}
.metode__i input:checked + .metode__kotak .metode__cek{opacity:1;transform:scale(1)}

/* ---- kotak klaim bonus ----
   Dikurung kotak sendiri karena ini SATU-SATUNYA bagian form yang boleh
   dilewati. Tanpa pembatas, "opsional" cuma jadi kata yang terlewat. */
/* Latarnya OPAK dan NETRAL — sama persis dengan panel lain di template.
   Opak karena halaman ini punya --bg-image: panel tembus pandang berarti
   gambar latarnya ikut kelihatan menembus kotak. Netral karena aturan
   palet di :root, dasarnya grafit R=G=B, dan semburat warna sedikit pun
   di bidang selebar ini bikin seluruh silver di sekitarnya ikut terbaca
   berwarna. Yang membedakan kotak ini dari sekelilingnya PERMUKAAN dan
   bingkainya, bukan warnanya. */
.kotak-bonus{
  padding:var(--s4);margin-top:var(--s5);
  border-radius:var(--r2);
  background:var(--bg-soft);border:1px solid var(--line);
}
.kotak-bonus__syarat{
  margin:var(--s3) 0 0;padding-left:var(--s3);
  border-left:2px solid var(--line-2);
  font-size:var(--f-xs);color:var(--muted);line-height:1.55;
}
.kotak-bonus__syarat[hidden]{display:none}

/* ---- daftar pilihan sendiri ----
   Bukan <select>: daftar pilihan <select> digambar sistem operasi, latar
   putihnya tidak bisa disentuh CSS dan selalu terlihat asing di halaman
   segelap ini. Peran ARIA-nya ditulis manual supaya pembaca layar tetap
   membacanya sebagai daftar pilihan. */
.pilih{position:relative}
.pilih__btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  width:100%;height:46px;padding:0 var(--s4);
  border-radius:var(--r1);
  background:var(--bg-sunken);border:1px solid var(--line-2);
  color:var(--text);font-size:var(--f-md);font-weight:700;text-align:left;
  transition:border-color .18s;
}
.pilih__btn:hover{border-color:var(--acc)}
.pilih__btn:focus-visible{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.28)}
.pilih__nilai{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pilih__arw{flex:none;width:15px;height:15px;color:var(--dim);transition:transform .2s}
.pilih__btn[aria-expanded="true"] .pilih__arw{transform:rotate(180deg)}
/* Daftar pilihannya MENGAMBANG di atas isi lain, jadi latarnya wajib
   opak — --bg-elev, permukaan yang sama dengan panel drawer dan popup.
   Latar tembus pandang di sini bikin tulisan di baliknya ikut terbaca
   dan keduanya jadi tabrakan. */
.pilih__menu{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;
  max-height:250px;overflow-y:auto;
  padding:5px;border-radius:var(--r2);
  background:var(--bg-elev);border:1px solid var(--line-2);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.85);
}
.pilih__menu[hidden]{display:none}
.pilih__menu li{
  padding:10px var(--s3);border-radius:var(--r1);
  font-size:var(--f-sm);font-weight:700;color:var(--muted);
  cursor:pointer;transition:background .15s,color .15s;
}
.pilih__menu li:hover,.pilih__menu li:focus-visible{background:var(--glass);color:var(--text);outline:none}
.pilih__menu li[aria-selected="true"]{background:rgba(var(--acc-rgb),.14);color:var(--acc)}

/* ---- catatan bawah form ---- */
.tx__info{
  display:flex;gap:9px;
  margin:var(--s4) 0 0;padding:var(--s3) var(--s4);
  border-radius:var(--r1);
  background:var(--glass);border:1px solid var(--line);
  font-size:var(--f-xs);color:var(--muted);line-height:1.55;
}
.tx__info svg{flex:none;width:15px;height:15px;margin-top:1px;color:var(--acc)}
/* Di dalam kartu, jaraknya disamakan dengan margin bawah judul kartu
   (--s5). 16px bawaan terlihat menempel ke blok di atasnya sekarang
   paddingnya sudah 24px. */
.kartu-tx .tx__info,.txhasil .tx__info{margin-top:var(--s5)}

/* ---- rekening penarikan ----
   Tampil saja, tidak bisa dipilih — mengganti
   rekening tujuan langsung di halaman tarik itu jalan paling gampang
   buat menguras akun yang diambil alih orang */
.rek__bank{display:flex;align-items:center;gap:6px;font-size:var(--f-sm);font-weight:700;color:var(--muted)}
.rek__bank i{width:8px;height:8px;border-radius:2px;flex:none}
.rek__tetap{
  padding:var(--s4);border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
}
.rek__tetap b{
  display:block;margin:6px 0 2px;
  font-size:var(--f-lg);font-weight:800;font-variant-numeric:tabular-nums;
}
.rek__tetap em{font-style:normal;font-size:var(--f-xs);color:var(--dim)}

/* ---- kolom nominal ---- */
.nominal{position:relative}
.nominal__rp{
  position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);
  font-size:var(--f-base);font-weight:700;color:var(--dim);pointer-events:none;
}
.nominal input{padding-left:44px;font-weight:800;font-variant-numeric:tabular-nums}
.nominal__cepat{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s2)}

/* ---- kotak QRIS ---- */
.qris{
  display:grid;place-items:center;align-content:center;gap:5px;
  min-height:220px;margin-bottom:var(--s4);padding:var(--s5);
  border-radius:var(--r2);
  border:1px solid var(--line);background:var(--grad-surface);
  text-align:center;
}

/* ---- wadah kode QR SUNGGUHAN ----
   BINGKAINYA DIBUANG, dan itu inti perbaikannya.

   Wadah di atas dirancang untuk pola kotak-kotak contoh: kotak gelap
   berbingkai yang menampung penanda kecil. Begitu isinya kode QR
   sungguhan — yang latarnya WAJIB putih supaya bisa dipindai — hasilnya
   dua bingkai untuk satu benda: kotak gelap berbingkai berisi kotak
   putih, dengan sisa ruang mati di antaranya. Tidak ada yang dikerjakan
   bingkai luar itu selain memperkecil yang seharusnya jadi benda
   utamanya.

   Kelasnya dipasang PHP waktu member sudah masuk, bukan lewat :has().
   Cabangnya memang sudah ada di sisi server, dan menambah
   ketergantungan pada :has() untuk keputusan yang sudah diketahui
   sebelum halaman dikirim cuma memindahkan kerja ke peramban. */
.qris--nyata{
  min-height:0;padding:0;
  border:0;background:none;
}

/* Pola kotak-kotak yang MIRIP kode QR tapi bukan kode apa pun. Dibuat
   dari gradient berulang, jadi nol berkas gambar. Dikasih cap "kode
   contoh" supaya tidak ada yang mencoba memindainya. */
.qris__palsu{
  width:168px;height:168px;border-radius:var(--r1);
  /* Hitam-putih murni, bukan token palet: kode QR memang harus kontras
     penuh supaya kamera bisa mengunci, dan putih bersemburat biru di
     bidang seluas ini menarik seluruh grafit di sekitarnya ikut kebiruan. */
  background:
    repeating-conic-gradient(#0d0f11 0% 25%, #fff 0% 50%) 0 0/21px 21px,
    #fff;
  box-shadow:0 0 0 10px #fff;
}

/* Kode QR SUNGGUHAN dari payment gateway.

   Tanpa aturan ini gambarnya memenuhi seluruh kartu: SVG tidak punya
   ukuran alami dalam piksel, jadi dia melar seluas wadahnya.

   `background:#fff` BUKAN hiasan. Modul terang QR-nya sengaja tidak
   ikut digambar — menggambarnya membengkakkan berkas dari 28 KB jadi
   66 KB untuk hasil yang identik di mata — jadi bagian terangnya TEMBUS
   PANDANG. Di atas halaman segelap ini hasilnya kode hitam di atas
   hitam: samar di mata dan nyaris tidak bisa dikunci kamera. Putih di
   sini yang mengembalikan kontrasnya.

   Padding-nya jadi quiet zone. Pemindai butuh margin kosong di
   sekeliling kode, dan kode yang mepet ke tepi gelap sering gagal
   terbaca walau kontras modulnya sendiri sudah benar. */
.qris__img{
  width:100%;max-width:268px;height:auto;aspect-ratio:1;
  /* Padding = quiet zone. Pemindai butuh margin kosong di sekeliling
     kode; yang mepet ke tepi sering gagal dikunci walau kontras modulnya
     sudah benar. 18px cukup pada ukuran ini dan sekaligus membuat
     panelnya terbaca sebagai kartu, bukan gambar yang dipotong. */
  padding:18px;border-radius:var(--r2);
  background:#fff;

  /* Cincin tipis + bayangan supaya panel putih ini DUDUK di atas halaman
     gelap, bukan seperti lubang yang tertinggal di dalamnya. Bayangannya
     hitam pekat, mengikuti pola .modal__box — permukaan terang di tema
     segelap ini butuh kedalaman, kalau tidak dia terlihat seperti gambar
     yang gagal dimuat. */
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 18px 40px -16px rgba(0,0,0,.9);
}
/* Hitung mundur, menempel langsung di bawah kodenya.
   Angkanya tabular-nums supaya digitnya tidak bergeser tiap detik —
   angka proporsional membuat "04:38" dan "04:39" punya lebar berbeda,
   dan yang terlihat adalah baris yang bergetar terus-menerus di sebelah
   kode yang sedang dipindai orang. */
.qris__sisa{
  margin:var(--s3) 0 var(--s5);
  font-size:var(--f-sm);color:var(--dim);text-align:center;
}
.qris__sisa b{
  font-size:var(--f-lg);font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
/* Menit terakhir. Warna urgensi dipasang JS lewat kelas ini, bukan
   dihitung CSS — CSS tidak bisa membaca isi teks. */
.qris__sisa--tipis b{color:var(--hot-lt)}

.qris__cap{
  margin-top:var(--s4);
  padding:3px 10px;border-radius:var(--rp);
  background:rgba(var(--hot-rgb),.16);border:1px solid rgba(var(--hot-rgb),.3);
  font-size:var(--f-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hot-lt);
}

/* ---- panel hasil simulasi ---- */
/* Kartu SEJAJAR dengan .kartu-tx, bukan kotak di dalamnya — dua-duanya
   kartu penuh di dalam panel yang sama, cuma bergantian tampil. Jadi
   permukaan, bingkai, radius, dan paddingnya harus sama persis; kalau
   beda, pergantiannya terlihat seperti pindah halaman. */
.txhasil{
  padding:var(--s7);border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
  text-align:center;
}
.txhasil[hidden]{display:none}
/* Difokus JS cuma untuk memindahkan posisi baca sesudah kartunya
   berganti, bukan karena kartunya sendiri bisa dioperasikan. Cincin fokus
   yang mengelilingi kartu seluas ini justru membingungkan pemakai
   tetikus — yang butuh tandanya pembaca layar, dan dia tidak membaca
   garis. */
.txhasil:focus{outline:0}
/* :not([hidden]) supaya tombol yang disembunyikan tidak mewariskan jarak
   ke tombol di bawahnya — kalau tidak, tombol pertama yang terlihat
   dapat margin atas yang tidak ada asalnya. */
.txhasil .btn:not([hidden]) + .btn{margin-top:var(--s2)}
.txhasil .btn[hidden]{display:none}
.txhasil__ik{
  width:52px;height:52px;border-radius:var(--rp);margin:0 auto var(--s3);
  display:grid;place-items:center;
  background:rgba(var(--green-rgb),.16);border:1px solid rgba(var(--green-rgb),.35);
  color:var(--green);
}
.txhasil__ik svg{width:24px;height:24px}
/* Penukar ikon popup: semua disembunyikan, satu dihidupkan sesuai
   data-ikon di wadahnya. Dicocokkan begini, BUKAN atribut hidden per
   <svg>: <svg> itu elemen namespace SVG dan tidak punya properti
   `hidden` milik HTMLElement, jadi menyembunyikannya dari JS diam-diam
   tidak berefek dan ketiganya tampil bertumpuk.

   [data-ikon] WAJIB ada di selektornya. Ditulis `.txhasil__ik svg` polos,
   aturan ini ikut mengenai SEMUA .txhasil__ik — termasuk yang isinya cuma
   satu ikon tetap dan tidak pernah ditukar. Itu sempat terjadi: ikon di
   keluar.php, lupa.php, dan kartu antrean penarikan hilang seluruhnya
   karena aturan yang sebenarnya cuma ditujukan untuk satu popup. */
.txhasil__ik[data-ikon] svg{display:none}
.txhasil__ik[data-ikon="ok"]    svg[data-ik="ok"],
.txhasil__ik[data-ikon="habis"] svg[data-ik="habis"],
.txhasil__ik[data-ikon="tolak"] svg[data-ik="tolak"]{display:block}
/* Merah dan netral memakai token yang SAMA dengan pesan galat dan teks
   redup di tempat lain — bukan warna baru, cuma dipasang di lingkaran. */
.txhasil__ik--galat{
  background:rgba(var(--hot-rgb),.16);border-color:rgba(var(--hot-rgb),.35);
  color:var(--hot-lt);
}
.txhasil__ik--tunggu{
  background:var(--glass);border-color:var(--line-2);
  color:var(--muted);
}
.txhasil > b{display:block;font-size:var(--f-xl);font-weight:800}
/* :not([class]) = HANYA paragraf polos keterangan kartu. Tanpa ini
   `.txhasil > p` (0,1,1) mengalahkan `.tx__info` (0,1,0) dan kotak
   catatan di dalam kartu hasil kehilangan seluruh gayanya — persis
   jebakan yang sudah beberapa kali kejadian di berkas ini. */
.txhasil > p:not([class]){margin:var(--s2) 0 var(--s5);font-size:var(--f-sm);color:var(--muted);line-height:1.5}
.txhasil .tx__info{text-align:left;margin-bottom:var(--s4)}

.txhasil__rinci{
  margin:0 0 var(--s5);text-align:left;
  border-radius:var(--r2);border:1px solid var(--line);overflow:hidden;
}
.txhasil__rinci > div{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);
}
/* WAJIB ditulis: `display:flex` di atas (0,1,1) mengalahkan [hidden]
   bawaan browser, jadi baris yang disembunyikan JS tetap tampil kalau
   aturan ini tidak ada. */
.txhasil__rinci > div[hidden]{display:none}
.txhasil__rinci > div + div{border-top:1px solid var(--line)}
/* Garis pemisah ikut hilang bersama baris yang disembunyikan, kalau
   tidak barisnya lenyap tapi garisnya tertinggal jadi dua garis dempet. */
.txhasil__rinci > div[hidden] + div{border-top:0}
.txhasil__rinci dt{font-size:var(--f-sm);color:var(--dim)}
.txhasil__rinci dd{margin:0;font-size:var(--f-sm);font-weight:700;color:var(--text);text-align:right}

.txstat{
  padding:3px 10px;border-radius:var(--rp);
  background:var(--glass);border:1px solid var(--line-2);
  font-size:var(--f-xs);font-weight:800;color:var(--muted);
}
.txstat--ok{background:rgba(var(--green-rgb),.16);border-color:rgba(var(--green-rgb),.35);color:var(--green)}
.txstat--galat{background:rgba(var(--hot-rgb),.16);border-color:rgba(var(--hot-rgb),.35);color:var(--hot-lt)}

/* ----------------------------------------------------------
   9e. HALAMAN AKUN (akun.php)
   Sepuluh panel ditukar tanpa muat ulang. Kartunya .kartu-tx yang SAMA
   dengan halaman transaksi — yang baru di sini cuma yang memang belum
   pernah ada: menu samping, batang kemajuan, tabel, dan baris misi.
   ---------------------------------------------------------- */

/* minmax(0,1fr), BUKAN 1fr.
   `1fr` sebenarnya singkatan dari `minmax(auto, 1fr)`, dan `auto` di situ
   berarti MIN-CONTENT: kolomnya tidak boleh lebih sempit dari isi
   tersempit yang masih muat. Begitu ada satu saja isi yang tidak bisa
   menyusut — tabel, deretan tombol, angka ber-nowrap — kolomnya melar
   melewati lebar layar, dan seluruh halaman ikut bisa digeser mendatar.
   minmax(0,...) mencabut batas bawah itu.
   Aturan yang sama dipakai di semua grid halaman ini; `min-width:0` di
   tiap anaknya adalah pengaman kedua untuk hal yang persis sama. */
.akun{display:grid;grid-template-columns:264px minmax(0,1fr);gap:var(--s5);align-items:start}
.akun > *{min-width:0}
/* Menu ikut menggulir sampai batas atas lalu berhenti — panel isinya jauh
   lebih panjang dari menunya, dan menu yang hilang di atas berarti pindah
   bagian selalu harus menggulir balik ke puncak. */
.akun__sisi{position:sticky;top:calc(var(--header-h) + var(--s3));display:flex;flex-direction:column;gap:var(--s3)}
.akun__isi{min-width:0;display:flex;flex-direction:column}

/* JARAK VERTIKAL ANTAR BLOK ISI HALAMAN.

   Ditaruh di WADAHNYA sebagai `gap`, bukan sebagai margin antar kartu.
   Aturan ini sudah salah tempat TIGA kali, dan ketiganya kesalahan yang
   sama: memberi jarak pada satu bentuk tertentu, bukan pada susunannya.

     1. `gap` di .akun__isi        -> anaknya .panel, bukan kartu. Nol efek.
     2. `.akun__isi .kartu-tx + .kartu-tx` -> benar di halaman akun saja;
        tentang.php pakai kartu yang sama tanpa .akun__isi.
     3. `.kartu-tx + .kartu-tx`    -> cuma kena kalau DUA KARTU
        bersebelahan. Di tentang.php urutannya sambut -> angka -> vm ->
        sechd -> why, hampir tidak ada dua kartu yang berdampingan, jadi
        nyaris tidak kena apa-apa.

   Yang benar: yang butuh jarak itu SEMUA anak langsung wadah isi, apa
   pun kelasnya — kartu, petak angka, grid visi-misi, judul bagian.
   `gap` pada wadahnya mengurus semuanya sekaligus dan tidak bisa
   meleset lagi kalau nanti ada bentuk blok baru.

   .panel[hidden]{display:none} punya kekhususan (0,1,1), menang atas
   aturan ini (0,1,0), jadi panel tersembunyi tetap tersembunyi.

   Nilainya --s5 (20px), LEBIH KECIL dari padding kartunya (--s7, 32px).
   Aturan umum "jarak antar benda harus melebihi jarak di dalam benda"
   berlaku kalau batas bendanya cuma ruang kosong. Kartu ini punya garis
   tepi DAN permukaan yang lebih terang dari latar — batasnya sudah
   ditandai dua kali. 40px lalu 24px sempat dicoba, dua-duanya renggang. */
.tumpuk,.panel{display:flex;flex-direction:column;gap:var(--s5)}
/* .stat masih dipakai DI DALAM kartu (Riwayat Main, Referral, Tentang) —
   di situ margin bawahnya tetap perlu. Yang dibatalkan cuma waktu dia
   jadi anak langsung wadah, karena di sana gap sudah mengurusnya. */
.tumpuk > .stat,.panel > .stat{margin-bottom:0}

.akun__kartu{padding:var(--s4)}
.akun__id{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
/* Diikat ke .akun__nm, BUKAN ditulis `.akun__id span`. Di baris ini ada
   tiga anak dan dua di antaranya juga <span>: .avatar dan .pill. Selektor
   yang mengenai <span> apa pun (0,1,1) mengalahkan .avatar dan .pill yang
   cuma (0,1,0), jadi display:grid avatar dibatalkan jadi block — inisial
   pemakainya menempel ke pojok kiri atas lingkaran — dan pill-nya
   melebar jadi blok. Sudah pernah kejadian di berkas ini dengan
   `.field > span`; ini kambuh yang kedua. */
.akun__nm{flex:1;min-width:0}
.akun__nm b{display:block;font-size:var(--f-base);font-weight:800}
.akun__nm span{display:block;font-size:var(--f-xs);color:var(--dim)}
.akun__saldo{margin:0 0 var(--s3)}
/* Label "terkunci" di sebelah saldo bonus. Kecil, tapi dia yang
   membedakan angka yang bisa diambil dari angka yang belum. */
.akun__kunci{
  font-style:normal;margin-left:6px;padding:1px 6px;border-radius:var(--rp);
  background:var(--glass);border:1px solid var(--line-2);
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
}
.akun__aksi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}
/* Tombolnya sekarang <button> di dalam <form method="post"> — tautan
   GET ke /keluar cuma merender halaman "kamu sudah keluar" tanpa
   menutup sesinya.

   display:contents WAJIB. Tanpa dia, yang jadi anak flex dari .akun__sd
   adalah FORM-nya, dan dua aturan di mobile.css yang menata tombol ini
   (`order:99` supaya dia turun paling bawah, dan `display:none` di
   layar tersempit) mendadak menata elemen yang salah — tombolnya
   nongol di tengah menu samping, dan yang disembunyikan bukan dia. */
.akun__keluarform{display:contents}
.akun__keluar{color:var(--muted)}
.akun__keluar svg{width:15px;height:15px}

/* ---- menu samping ---- */
.akunnav{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s2);border-radius:var(--r3);
  background:var(--grad-surface);border:1px solid var(--line);
}
.akunnav__b{
  display:flex;align-items:center;gap:10px;
  padding:10px var(--s3);border-radius:var(--r1);
  font-size:var(--f-md);font-weight:700;color:var(--muted);
  text-align:left;transition:background .16s,color .16s;
}
.akunnav__b svg{flex:none;width:17px;height:17px}
.akunnav__b:hover{background:var(--glass);color:var(--text)}
.akunnav__b.on{background:var(--grad-pri);color:var(--on-pri)}

/* ---- petak angka ---- */
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s2);margin-bottom:var(--s4)}
.stat__i{
  padding:var(--s3) var(--s4);border-radius:var(--r2);
  background:var(--bg-soft);border:1px solid var(--line);
}
.stat__i span{display:block;font-size:var(--f-xs);color:var(--dim);margin-bottom:3px}
.stat__i b{font-size:var(--f-lg);font-weight:800;font-variant-numeric:tabular-nums}
.nilai--naik{color:var(--green)}
.nilai--turun{color:var(--hot-lt)}

/* ---- batang kemajuan ----
   Lebarnya disetel PHP dari (jalan / target), bukan angka yang diketik.
   Batang yang panjangnya tidak cocok dengan angka di bawahnya lebih buruk
   daripada tidak ada batang sama sekali. */
.prog + .prog{margin-top:var(--s6)}
.prog__hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:10px}
.prog__hd b{font-size:var(--f-md);font-weight:800}
.prog__hd span{font-size:var(--f-md);font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.prog__bar{height:8px;border-radius:var(--rp);background:var(--bg-sunken);overflow:hidden}
.prog__bar i{display:block;height:100%;border-radius:var(--rp);background:var(--grad-pri)}
.prog__ket{
  display:flex;justify-content:space-between;gap:var(--s3);margin-top:9px;
  font-size:var(--f-xs);color:var(--dim);font-variant-numeric:tabular-nums;
}
.prog--besar{margin-bottom:var(--s5)}

/* ---- rekap transaksi terakhir ---- */
.rekap{display:flex;flex-direction:column}
.rekap li{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0}
.rekap li + li{border-top:1px solid var(--line)}
.rekap__ar{
  flex:none;width:32px;height:32px;border-radius:var(--rp);
  display:grid;place-items:center;
}
.rekap__ar svg{width:14px;height:14px}
.rekap__ar--deposit{background:rgba(var(--green-rgb),.14);color:var(--green)}
.rekap__ar--withdraw{background:var(--glass);color:var(--muted)}
.rekap__t{flex:1;min-width:0}
.rekap__t b{display:block;font-size:var(--f-md);font-weight:700}
.rekap__t span{font-size:var(--f-xs);color:var(--dim)}
.rekap__n{text-align:right;flex:none}
.rekap__n b{display:block;font-size:var(--f-md);font-weight:800;font-variant-numeric:tabular-nums}
.rekap__n .txstat{margin-top:3px;display:inline-block}

/* ---- tabel ----
   Pembungkusnya yang menggulir, BUKAN halamannya. Tanpa .tabelbox, tabel
   lima kolom di layar 380px mendorong seluruh badan halaman jadi bisa
   digeser mendatar — dan itu merusak tiap bagian lain sekaligus. */
/* --s6 mengikuti padding .kartu-tx di atas — lihat catatan di sana. */
.tabelbox{overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s7) * -1);padding:0 var(--s7)}
.tabelbox::-webkit-scrollbar{display:none}
.tabel{width:100%;border-collapse:collapse;font-size:var(--f-sm)}
.tabel th{
  padding:0 var(--s3) var(--s2);text-align:left;white-space:nowrap;
  font-size:var(--f-xs);font-weight:800;color:var(--dim);
  letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.tabel td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel td b{display:block;font-weight:700;color:var(--text)}
.tabel td em{display:block;font-style:normal;font-size:var(--f-xs);color:var(--dim);margin-top:2px}
.tabel__n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.tabel__w{white-space:nowrap;color:var(--muted)}
.tabel__kini{background:var(--glass)}
.tabel tr[hidden]{display:none}

/* ---- kotak salin ---- */
.salin{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
.salin code{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;height:42px;padding:0 var(--s4);
  border-radius:var(--r1);
  background:var(--bg-sunken);border:1px solid var(--line-2);
  font-family:inherit;font-size:var(--f-md);font-weight:800;letter-spacing:.02em;
}
.salin .btn{flex:none;height:42px}

/* ---- saklar baris & tombol jeda ---- */
.bonus-baris{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;cursor:pointer;
}
.bonus-baris + .bonus-baris{border-top:1px solid var(--line)}
.bonus-baris b{display:block;font-size:var(--f-md);font-weight:700}
.bonus-baris em{display:block;font-style:normal;font-size:var(--f-xs);color:var(--dim);margin-top:2px;line-height:1.45}
.bonus-baris input{flex:none;width:18px;height:18px;accent-color:var(--pri)}
.jeda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s4)}
.jeda .btn{padding:0 var(--s2)}

/* Tautan yang sebenarnya TOMBOL: dia pindah panel, bukan pindah alamat.
   Ditulis <a href="#"> akan menambah entri riwayat peramban yang tidak
   menuju ke mana-mana, dan tombol Kembali jadi tidak berfungsi. */
.tautan{
  color:var(--acc);font-weight:700;font-size:inherit;
  text-decoration:underline;text-underline-offset:2px;
}
.tautan:hover{color:var(--acc-lt)}
.kartu-tx__hd .tautan{margin-left:auto;font-size:var(--f-sm)}

/* BLOK TOGEL DIHAPUS 29 Agt — sekitar 120 baris.

   Yang berdiri di sini: .pasar* (daftar pasaran beserta kotak digit
   result, tombol pasang, dan pita "contoh"), .undian* (tabel riwayat
   sepekan), dan .taruhan* (kartu jenis taruhan 4D/3D/2D/colok).

   Tidak ada satu pun kelas ini yang masih dipakai view mana pun —
   diperiksa sebelum dipotong. Aturan yang lahir bersama blok ini tapi
   TERLANJUR DIPAKAI DI TEMPAT LAIN sengaja ditinggal hidup: .notis
   (17 pemakaian) di bagian 11, dan .sechd--sela yang dipakai
   tentang.php. Keduanya sudah bukan milik togel lagi. */

/* ----------------------------------------------------------
   12. PROVIDER GAME
   Tampilannya sengaja disatukan dengan Metode Deposit di bagian 13 —
   aturannya ditulis sekali untuk .pay DAN .prov, jadi keduanya tidak
   mungkin melenceng satu sama lain kalau salah satu diubah nanti.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   13. METODE PEMBAYARAN
   Urutan sesuai data pemakaian: e-wallet > QRIS > bank
   ---------------------------------------------------------- */
/* Satu aturan untuk dua deret chip: provider (bagian 12) dan
   metode pembayaran. Disatukan supaya keduanya selalu seirama. */
.pays,
.provs{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.pay,
.prov{
  display:flex;align-items:center;gap:6px;
  height:34px;padding:0 var(--s3);border-radius:var(--r1);
  background:#fff;color:#0d1220;
  font-size:var(--f-sm);font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;
}
.pay i,
.prov i{width:8px;height:8px;border-radius:2px;font-style:normal;flex:none}
.pay--muted{background:var(--grad-surface);color:var(--muted);border:1px solid var(--line);font-weight:700}

/* cuma .prov yang bisa diklik, jadi hover-nya khusus di situ */
.prov{transition:transform .18s var(--ease),box-shadow .18s}
.prov:hover{transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}

/* ----------------------------------------------------------
   14. TRUST STRIP
   ---------------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.trust__i{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
}
.trust__ic{
  width:34px;height:34px;border-radius:var(--r1);flex:none;
  display:grid;place-items:center;color:var(--acc);
  background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.22);
}
.trust__ic svg{width:16px;height:16px}
.trust__i b{display:block;font-size:var(--f-md);font-weight:700}
/* Diikat ke <div> pembungkus teks, karena kotak ikonnya juga <span>
   (.trust__ic) di dalam .trust__i — '.trust__i span' (0,1,1) mengalahkan
   .trust__ic (0,1,0) DAN ditulis belakangan, jadi ikonnya kalah dua kali
   dan tampil --dim di dalam kotak beraksen. */
.trust__i > div span{font-size:var(--f-xs);color:var(--dim)}

/* ----------------------------------------------------------
   15. CATATAN 18+
   ---------------------------------------------------------- */
.warn{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4);border-radius:var(--r2);
  background:var(--grad-surface);border:1px solid var(--line);
  margin-top:var(--s5);
}
.warn__age{
  flex:none;width:36px;height:36px;border-radius:var(--rp);display:grid;place-items:center;
  border:1.5px solid var(--pri);color:var(--pri);font-weight:800;font-size:var(--f-sm);
}
.warn p{margin:0;font-size:var(--f-sm);color:var(--muted);line-height:1.5}

/* ----------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);background:var(--bg-sunken);padding:var(--s7) 0 var(--s5);margin-top:var(--s7)}
/* 1.4fr, bukan 1.7fr: kolom tautannya sekarang empat, bukan tiga.
   Kolom merek dipersempit karena isinya paragraf yang sudah dibatasi
   34ch — melebarkannya tidak menambah apa pun, sementara kolom tautan
   yang sempit membuat "Main Bertanggung Jawab" pecah jadi tiga baris. */
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);margin-bottom:var(--s6)}
.ftr__brand p{color:var(--muted);font-size:var(--f-sm);margin:var(--s3) 0 var(--s4);max-width:34ch;line-height:1.55}
/* h2, bukan h4. Judul kolom peta situs ini muncul di SETIAP halaman, jadi
   tingkatnya harus cocok dengan halaman TERDANGKAL, bukan yang terdalam.
   Dengan h4, seluruh 24 halaman melompat h1->h4; dengan h3, lima belas
   halaman yang isinya tidak punya <h2> tetap melompat h1->h3. h2 adalah
   satu-satunya tingkat yang tidak pernah melompat di mana pun.
   Ukurannya tetap kecil — ukuran urusan CSS, tingkat urusan struktur. */
.ftr__col h2{font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s3);font-weight:800}
.ftr__col li{margin-bottom:var(--s2)}

/* Kolom game dipecah dua. Isinya sembilan kategori sementara kolom lain
   lima sampai enam — dibiarkan satu lajur, kolom ini menjulur jauh ke
   bawah dan seluruh baris footer jadi bergerigi. Dipecah dua, tingginya
   jadi lima baris dan sejajar dengan tetangganya.
   Nama kategorinya paling panjang delapan huruf ("E-Sports"), jadi muat
   di lajur ~96px tanpa perlu kolomnya dilebarkan di grid.
   Ditulis di sini, BUKAN cuma di mobile.css — aturan yang sama tadinya
   hidup di blok 700px saja, dan sekarang berlaku di semua lebar. */
.ftr__col--panjang ul{columns:2;column-gap:var(--s4)}
.ftr__col--panjang li{break-inside:avoid}
.ftr__col a{font-size:var(--f-md);color:var(--muted);transition:color .18s}
.ftr__col a:hover{color:var(--pri)}

.soc{display:flex;gap:6px}
.soc a{
  width:32px;height:32px;border-radius:var(--r1);display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--muted);transition:.2s;
}
.soc a:hover{color:var(--pri);border-color:rgba(var(--pri-rgb),.45)}
.soc svg{width:15px;height:15px}

.ftr__end{
  border-top:1px solid var(--line);padding-top:var(--s4);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--f-sm);color:var(--dim);
}


/* ----------------------------------------------------------
   17. BOTTOM NAV (mobile — ditampilkan di mobile.css)
   ---------------------------------------------------------- */
.btmnav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:rgba(var(--bg-soft-rgb),.97);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.btmnav ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
/* button ikut disebut karena tombol tengah versi tamu adalah <button>,
   bukan <a> — dia memicu popup, bukan pindah halaman */
.btmnav a,
.btmnav button{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
  padding:8px 2px 9px;font-size:10px;font-weight:700;color:var(--dim);
  white-space:nowrap;letter-spacing:-.01em;
}
.btmnav a.on{color:var(--pri)}
.btmnav svg{width:19px;height:19px}
/* ---- MENGANGKAT LINGKARAN TANPA MENINGGIKAN BAR ----

   Dulu `.mid{transform:translateY(-10px)}`. transform memang tidak
   memindahkan kotak tata letak — tapi UKURAN lingkarannya tetap ikut
   dihitung. Lingkaran 42px di antara ikon 19px membuat sel .mid 23px
   lebih tinggi, dan karena ul-nya grid, SELURUH baris ikut meninggi.

   Akibatnya empat item lain isinya cuma 51px tapi selnya jadi 74px:
   isinya menempel ke atas, labelnya tidak sebaris dengan "Masuk", dan
   tersisa ruang mati di bawahnya.

   Yang dipakai sekarang MARGIN NEGATIF sebesar selisih ukurannya:

       42 (lingkaran) − 19 (ikon biasa) = 23px

   Dengan -23px, sisi BAWAH lingkaran mendarat persis di tempat sisi
   bawah ikon biasa. Semua label karena itu jatuh ke satu garis, tinggi
   barisnya kembali 51px, dan ruang matinya hilang — sementara
   lingkarannya justru menjulur LEBIH tinggi daripada sebelumnya,
   menembus tepi atas bar. */
.btmnav .mid i{
  width:42px;height:42px;margin-top:-23px;
  border-radius:var(--rp);display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  box-shadow:0 6px 18px -6px rgba(var(--pri-rgb),.8);
  border:3px solid var(--bg-soft);
}
.btmnav .mid svg{width:20px;height:20px}

/* ---- DAFTAR (tamu) ----

   Berima dengan tombol tengah — ikon di dalam lingkaran terisi, ikut
   diangkat — supaya terbaca sebagai ajakan, bukan menu biasa. Yang
   membedakan tingkatannya: lebih kecil (30px vs 48px), angkatnya lebih
   pendek (-8 vs -10), dan memakai --grad-hot bukan --grad-pri. Masuk
   tetap yang utama, Daftar jelas kedua, sisanya menu biasa.

   DIANGKAT DENGAN CARA YANG SAMA seperti .mid — margin negatif
   sebesar selisih ukurannya, bukan transform:

       34 (lingkaran) − 19 (ikon biasa) = 15px

   Sisi bawahnya karena itu mendarat sebaris dengan ikon lain, labelnya
   ikut satu garis, dan bar-nya tidak bertambah tinggi sedikit pun.

   Dua versi sebelumnya salah, dan salahnya ke arah berlawanan:

     1. padding dipangkas jadi 4+5 — lingkarannya mulai LEBIH TINGGI
        dari ikon tetangga tapi berakhir LEBIH RENDAH, jadi terbaca
        menonjol ke bawah.
     2. transform:translateY(-8px) — terangkat, tapi ukurannya tetap
        ikut menghitung tinggi baris, jadi ruang mati di bawah label
        tetap ada. */
.btmnav__daftar{
  color:var(--pri);font-weight:800;
}
.btmnav__daftar i{
  width:34px;height:34px;margin-top:-15px;
  border-radius:var(--rp);display:grid;place-items:center;
  background:var(--grad-pri);color:var(--on-pri);
  box-shadow:0 5px 16px -5px rgba(var(--pri-rgb),.9);

  /* Cincin sewarna bar, sama seperti .mid — membuat lingkarannya
     terbaca DUDUK DI ATAS bar, bukan tenggelam di dalamnya. */
  border:3px solid var(--bg-soft);
}
.btmnav__daftar svg{width:17px;height:17px}

/* ----------------------------------------------------------
   18. AKSESIBILITAS & HEMAT DAYA
   Perangkat Android kelas bawah: matikan animasi ornamen.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}

  /* Cincin yang berhenti berputar terbaca seperti ikon RUSAK: satu sisi
     pekat, tiga sisi pudar, dan diam. Bentuk itu lahir dari gerakannya —
     begitu gerakannya dimatikan, yang tersisa cuma lingkaran timpang yang
     terlihat seperti gambar gagal dimuat.

     Di sini kabar "sedang jalan" sudah dibawa TULISAN tombolnya, jadi
     penandanya cukup diratakan: lingkaran diam yang memang bermaksud
     diam, bukan lingkaran diam yang kelihatan patah. */
  .btn[data-muat]::before{border-color:currentColor;opacity:.55}
}

/* ----------------------------------------------------------
   19. BUKA/TUTUP TAMU vs SUDAH MASUK

   Dua baris, dan sengaja cuma dua.

   Percobaan pertama pakai `.masuk-only{display:none}` lalu mengembalikan
   display satu per satu. Itu gagal dua kali:
     - .btn (0,1,0) seri lalu menang karena ditulis belakangan
     - .btmnav a (0,2,0) menang telak atas .masuk-only (0,1,0)
   Menaruh blok ini paling bawah cuma menyelesaikan kasus pertama.

   Bentuk sekarang memakai `body:not(.masuk)` sehingga spesifisitasnya
   0,2,1 — di atas pola `.induk .anak` yang dipakai hampir semua komponen.

   Yang lebih penting: aturannya cuma MENYEMBUNYIKAN, tidak pernah
   menampilkan. Saat sebuah elemen memang harus tampil, tidak ada aturan
   apa pun yang menimpanya, jadi display bawaan komponennya langsung
   berlaku. Tidak perlu lagi mendaftar ulang inline-flex / grid / flex
   untuk tiap komponen, dan komponen baru otomatis ikut bekerja.

   Syaratnya satu: komponen ber-.masuk-only / .tamu-only harus punya
   display sendiri. Lihat .akunbar dan .drawer__user.
   ---------------------------------------------------------- */
body:not(.masuk) .masuk-only{display:none}
body.masuk       .tamu-only {display:none}