/* ==========================================================
   KANGTOTO — Mobile / Responsive Stylesheet
   HARUS dimuat SESUDAH style.css
   Patokan: 98,3% pengguna internet Indonesia akses lewat ponsel,
   mayoritas Android kelas menengah-bawah. Layout ponsel = prioritas,
   desktop cuma pelebaran.
   Breakpoint: 1100 · 900 · 700 · 460
   ========================================================== */

/* ---------- Laptop kecil ---------- */
@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* Grid -> slider. Lebar 78% disengaja: sisa 22% memperlihatkan potongan
     kartu berikutnya sebagai petunjuk bahwa ini bisa digeser. */
  .promos{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:var(--s3);
  }
  .promos::-webkit-scrollbar{display:none}
  .promo{flex:0 0 78%;scroll-snap-align:start;min-height:250px}

  /* Halaman promosi: SATU kolom bertumpuk. Dua alasan.

     Pertama, tetap grid dan bukan slider seperti di beranda — di sana
     blok promo cuma pratinjau di tengah halaman panjang, sedangkan di
     halaman promosi daftarnya ISI halaman, dan menyembunyikan tujuh dari
     delapan promo di balik geseran mendatar berarti hampir semuanya
     tidak pernah dilihat.

     Kedua, satu kolom bukan dua. Gambar promo rasionya 3:2; dibagi dua
     kolom di layar 380px, tiap gambar tinggal ~120px tinggi dan tulisan
     di dalam art-nya tidak lagi terbaca. Halaman jadi lebih panjang, dan
     itu ditukar dengan gambar yang benar-benar kelihatan.

     Ditulis ulang lengkap karena aturan slider di atas mengubah display,
     overflow, DAN flex-basis kartunya sekaligus. */
  .promos--grid{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}
  .promos--grid .promo{flex:none;min-height:0}

  /* Blok .pasar--geser (slider daftar pasaran di beranda) dihapus
     29 Agt bersama produk togel. */

  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ---- halaman akun ----
     Menu samping jadi rel mendatar di atas isi. Dua kolom di lebar ini
     menyisakan ~250px untuk tabel lima kolom — dan tabel yang harus
     digeser di dalam kolom yang juga sempit praktis tidak terbaca. */
  .akun{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .akun__sisi{position:static}
  .akunnav{
    flex-direction:row;
    overflow-x:auto;scrollbar-width:none;
    padding:5px;
  }
  .akunnav::-webkit-scrollbar{display:none}
  /* min-height 44px: begitu rel ini jadi mendatar, sepuluh butirnya adalah
     satu-satunya navigasi halaman akun di layar sentuh. Tanpa ini tingginya
     33,4px (padding 8+8 + baris 17,4). */
  .akunnav__b{flex:none;white-space:nowrap;padding:9px var(--s3);min-height:44px}
  /* Tombol Keluar dipindah ke bawah isi. Di rel mendatar dia jadi
     tetangga menu biasa, dan "Keluar" yang duduk di sebelah "Batas &
     Jeda" terlalu gampang tertekan waktu rel-nya digeser. */
  .akun__keluar{order:99;margin-top:var(--s4)}
  /* Empat petak angka jadi dua kolom. minmax(140px,1fr) bawaan desktop
     memaksa satu kolom di bawah ~300px, dan angka sependek "3 orang"
     tidak butuh selebar itu. */
  .stat{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---- halaman tentang ----
     Empat petak angka jadi 2x2, visi/misi dan kartu "kenapa pilih"
     bertumpuk. Dua kolom di lebar ini menyisakan ~300px per kartu, dan
     paragraf tiga baris di situ pecah jadi enam. */
  .angka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vm{grid-template-columns:minmax(0,1fr)}

  .why{grid-template-columns:minmax(0,1fr)}
  /* Kartu saluran kontak satu kolom — dua kolom di lebar ini menyisakan
     ~300px, dan keterangan waktu balas ikut pecah tiga baris. */
  .kanal{grid-template-columns:minmax(0,1fr)}
  /* Daftar isi dokumen hukum jadi satu lajur — dua kolom di lebar ini
     memaksa judul pasal panjang pecah tiga baris dan nomornya jadi
     terpisah jauh dari tulisannya. */
  .daftarisi{grid-template-columns:minmax(0,1fr)}

  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
}

/* ---------- Ponsel ---------- */
@media (max-width:700px){
  :root{
    --header-h:58px;
    --logo-h:34px;   /* logo ikut mengecil mengikuti tinggi header */
  }

  .container{padding-inline:var(--s3)}

  /* Nav desktop diganti .drawer (markup terpisah, lihat style.css bagian 4b) */
  .mainnav{display:none}
  .burger{display:flex;width:44px;height:44px}

  /* ---------- SASARAN SENTUH ----------
     Semua yang di bawah ini dipatok ke 44px, ambang yang dipakai Apple dan
     Google. Angkanya sengaja TIDAK diubah di style.css: di desktop dengan
     tetikus, 32-36px justru lebih rapi dan tidak pernah salah klik. Yang
     bermasalah cuma jari, jadi yang diperbaiki cuma layar sentuh.

     Beberapa dilebarkan lewat padding, bukan lewat height — mengubah
     tingginya akan mengubah tampilan, sementara padding memperbesar kotak
     ketuk tanpa menggeser satu piksel pun yang terlihat. */
  .btn{height:44px}
  .modal__x{width:44px;height:44px}


  /* Header di HP cuma muat dua benda: logo di tengah + burger. */
  .hdr__act .btn{display:none}

  /* Bar akun dipecah dua baris: profil + saldo di atas, tombol di bawah.
     Sebaris seperti desktop tidak muat di 360px — avatar, nama, saldo,
     dan tiga tombol butuh sekitar 560px.
     flex-basis:100% pada .akunbar__act yang memaksa tombol turun,
     bukan <br> atau elemen tambahan. */
  .akunbar{
    flex-wrap:wrap;
    gap:var(--s3);
    /* padding tetap ditambah --petir-tebal, kalau tidak cincinnya
       akan menindih isi kartu */
    padding:calc(var(--s3) + var(--petir-tebal));
    margin-top:var(--s3);
  }
  .akunbar .avatar--lg{width:40px;height:40px;font-size:var(--f-base)}
  .akunbar__id{flex:1}

  /* garis pemisah dibuang: di susunan dua baris dia jatuh di tengah
     dan malah terbaca seperti kolom yang terpotong */
  .akunbar__saldo{padding-right:0;border-right:0}
  .akunbar__saldo b{font-size:var(--f-lg)}

  .akunbar__act{flex-basis:100%;gap:var(--s2)}
  .akunbar__act .btn{flex:1}

  /* Keluar tidak diulang di sini — sudah ada di dalam drawer. */
  .akunbar__out{display:none}

  /* Alasan yang sama untuk tombol Keluar di halaman akun: mulai lebar ini
     burger muncul dan drawer punya butir Keluar sendiri. Dua tombol keluar
     di satu layar bukan cuma mubazir — yang satu di dalam menu, yang satu
     lagi menggantung di bawah isi halaman, dan orang jadi ragu apakah
     keduanya melakukan hal yang sama.
     TIDAK ditaruh di blok 900px: di 701–900px burger belum muncul, jadi
     di sana tombol ini satu-satunya jalan keluar. */
  .akun__keluar{display:none}


  /* Logo absolute agar titik tengahnya mengacu ke lebar HEADER, bukan ke sisa
     ruang setelah burger. WAJIB diawali .hdr__in — .logo dipakai di tiga tempat,
     kalau selectornya polos, logo footer ikut jadi absolute dan nyasar. */
  .hdr__in{position:relative;justify-content:flex-end}
  /* max-width WAJIB. Logo dipusatkan ke lebar HEADER, sementara lajur kiri
     (jam: 12px + ~88px = ~100px) jauh lebih lebar dari lajur kanan
     (burger: 44px + 12px = 56px). Lebar logo tetap 157,6px (34px x rasio
     255/55), jadi di bawah ~362px tepi kirinya menyeberang tepi kanan jam
     dan huruf awal nama merek tertimbun kotak jam — diukur 20,7px
     tertutup di 320px. Membatasi lebarnya ke ruang yang benar-benar bebas
     membuat logonya mengecil alih-alih bertabrakan. */
  /* WIDTH DITULIS, BUKAN max-width — dan itu yang membuat logonya ada.

     Sebelumnya barisnya `max-width:calc(...)` + `height:auto`, dan
     pasangan itu MELENYAPKAN logonya sama sekali di semua HP.

     Sebabnya: .logo sebuah <a> KOSONG — gambarnya background, bukan isi.
     Di desktop dia punya bentuk karena `height:44px` menyalakan
     aspect-ratio, dan lebarnya diturunkan dari sana. Begitu tingginya
     diubah jadi auto, tidak ada satu pun sisi yang punya angka: tingginya
     auto, lebarnya shrink-to-fit dari isi yang kosong, dan aspect-ratio
     tidak punya apa-apa untuk dikalikan. Hasilnya kotak 0x0.
     max-width tidak pernah sempat berlaku — tidak ada lebar untuk
     dibatasi.

     Sekarang lebarnya yang ditulis, tingginya yang diturunkan. Nilai
     dasarnya dihitung dari token yang sama dengan desktop
     (44px x 255/55 = 204px), jadi mengubah --logo-h atau --logo-ratio
     tetap membawa serta ukuran di HP.

     min() yang menjaga maksud aturan lamanya: lajur kiri (jam ~100px)
     jauh lebih lebar dari lajur kanan (burger ~56px), sementara logonya
     dipusatkan ke lebar HEADER. Tanpa batas itu, di layar sempit huruf
     awal nama merek tertimbun kotak jam. */
  .hdr__in .logo{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    /* DUA BARIS width, dan yang pertama bukan sisa suntingan.
       Yang kedua menyubstitusi --logo-ratio (255/55) ke dalam calc,
       menghasilkan `calc(44px * 255/55)`. Itu sah menurut spesifikasi,
       tapi kalau ada satu mesin yang menolaknya, deklarasinya dibuang dan
       lebarnya kembali tak tentu — yaitu logo yang lenyap lagi, diam-diam,
       persis bug yang baru saja diperbaiki. Baris pertama menahan
       kejatuhan itu dengan angka yang sudah dihitung. */
    width:min(204px, calc(100% - 220px));
    width:min(calc(var(--logo-h) * var(--logo-ratio)), calc(100% - 220px));
    height:auto;
  }

  /* Jam DIHIDUPKAN di sini — style.css menyembunyikannya karena di
     desktop dia cuma mendempet tombol Masuk/Daftar tanpa memberi apa pun
     yang tidak sudah ada di taskbar dan pojok layar.

     Di HP beda urusannya: tidak ada jam sistem yang terlihat sambil
     menggulir di dalam peramban, dan jam WIB di sini yang jadi acuan
     batas waktu promo harian dan jadwal cair rebate.

     display:flex WAJIB ditulis ulang — aturan di style.css sekarang
     display:none, dan blok ini cuma memindah posisi. Tanpa baris ini,
     jamnya ikut hilang di HP juga.

     Ditaruh di sisi kiri header karena di HP sisi itu memang kosong
     (logo di tengah, burger di kanan). Header sticky, jadi jamnya tetap
     terlihat sambil menggulir. */
  .jam{
    display:flex;
    position:absolute;left:var(--s3);top:50%;
    transform:translateY(-50%);
    padding:4px var(--s2);gap:5px;
  }
  .jam svg{width:12px;height:12px}
  .jam b{font-size:var(--f-sm)}
  .jam span{display:none}   /* label WIB dibuang, ruangnya sempit */

  /* Popup masuk jadi lembar bawah. Kotak melayang di tengah memaksa
     jempol naik ke separuh atas layar; nempel di bawah lebih gampang
     dijangkau dan sudah jadi kebiasaan di aplikasi HP. */
  .modal__box{
    left:0;right:0;bottom:0;top:auto;
    width:auto;max-height:88vh;
    transform:translateY(100%);
    border-radius:var(--r3) var(--r3) 0 0;
    padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  }

  /* WAJIB (0,2,0), dan ini menambal akibat dari perbaikan lama yang
     kelewat lebar.

     style.css punya `.modal__box.modal__box--lebar{width:min(94vw,560px)}`
     yang sengaja dibuat dua kelas supaya `padding:0`-nya menang atas
     aturan `.modal__box` di berkas ini. Niatnya benar — gambar promo
     memang harus menempel ke tepi atas lembar. Tapi yang ikut menang
     bukan cuma padding: `width` juga.

     Akibatnya di HP, popup rincian promo mendapat `left:0` dan `right:0`
     dari aturan di atas SEKALIGUS lebar 94vw dari style.css. Waktu lebar
     eksplisit dipasang bersama left dan right, yang dipakai peramban
     `left` — kotaknya menempel ke kiri dan menyisakan 6vw gelap di
     kanan. Terlihat seperti popup yang lupa dipusatkan, padahal dia
     memang tidak pernah diminta memusat: dia lembar bawah.

     Dikembalikan ke `width:auto` khusus di lebar ini. paddingnya TIDAK
     ikut dikembalikan — yang itu memang disengaja, dan .modal__isi yang
     mengurus jarak dalamnya. */
  .modal__box.modal__box--lebar{width:auto}

  .modal.open .modal__box{transform:none}

  /* 16px, bukan var(--f-base) yang 14px. Safari iOS otomatis men-zoom
     halaman tiap kali kolom berukuran di bawah 16px difokus, lalu tidak
     mengembalikan zoom-nya — di formulir 9 kolom itu terjadi 9 kali.
     Satu-satunya cara mematikannya tanpa mengunci cubit-zoom pengguna
     (yang melanggar aksesibilitas) memang menaikkan ukuran hurufnya. */
  .field input,
  .field select,
  .cari input{font-size:16px}

  /* halaman daftar: satu kolom, panel samping turun ke bawah */
  .authwrap{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s5) 0 var(--s7)}
  .authcard{padding:var(--s4)}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .authbar__ask{font-size:var(--f-sm)}

  /* ---------- formulir daftar jadi DUA LANGKAH ----------
     Langkah 1 data masuk, langkah 2 rekening + referral. Lima belas kolom
     sekaligus di layar 360px terbaca seperti formulir pajak; dipecah dua,
     tiap layar cuma minta satu jenis data.
     Desktop TIDAK ikut berubah — semua aturan di sini ada di dalam @media. */
  form[data-langkah="1"] .step[data-step="2"],
  form[data-langkah="2"] .step[data-step="1"]{display:none}

  button[data-lanjut],
  button[data-kembali]{display:inline-flex}
  button[data-kembali]{margin-top:var(--s2)}

  /* Langkah yang baru tampil digeser masuk. display tidak bisa ditransisi,
     jadi dipakai @keyframes — animasi memang jalan sendiri begitu
     elemennya berubah dari display:none. Arah gesernya ikut --geser,
     yang dibalik JS lewat data-arah saat menekan Kembali. */
  .step{--geser:20px}
  form[data-arah="mundur"] .step{--geser:-20px}
  form[data-langkah="1"] .step[data-step="1"],
  form[data-langkah="2"] .step[data-step="2"]{animation:langkahMasuk .3s var(--ease) both}

  /* ---- indikator langkah ---- */
  .langkah{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
  .langkah li{display:flex;align-items:center;gap:var(--s3);flex:1}
  .langkah li:last-child{flex:none}
  .langkah b{
    flex:none;width:28px;height:28px;border-radius:var(--rp);
    display:grid;place-items:center;
    background:var(--glass);border:1px solid var(--line-2);color:var(--dim);
    font-size:var(--f-md);font-weight:800;
    transition:background .3s var(--ease),color .3s,border-color .3s;
  }
  /* Garis penghubung terisi dari kiri ke kanan, bukan sekadar ganti warna —
     dua lapis latar, yang atas dilebarkan dari 0% ke 100%. */
  .langkah li::after{
    content:'';flex:1;height:3px;border-radius:2px;
    background:linear-gradient(var(--pri),var(--pri)) left/0% 100% no-repeat,var(--line-2);
    transition:background-size .45s var(--ease);
  }
  .langkah li:last-child::after{display:none}
  .langkah li.on b{background:var(--grad-pri);color:var(--on-pri);border-color:transparent}
  .langkah li.on::after{background-size:100% 100%}
  /* langkah yang sudah dilewati berganti centang — kabar "ini beres",
     bukan sekadar "ini bukan yang sekarang" */
  .langkah li.lewat b{background:var(--green);border-color:transparent;color:#fff;font-size:0}
  .langkah li.lewat b::after{content:'✓';font-size:15px;line-height:1}

  /* Nomornya sudah dipegang indikator di atas; kalau legend ikut bernomor,
     langkah 2 memuat fieldset "2" dan "3" sekaligus dan angkanya bentrok. */
  .fset__hd i{display:none}

  /* Kotak bonus dinaikkan ke ATAS formulir. Ditumpuk apa adanya, alasan
     orang mau repot mengisi delapan kolom malah jatuh paling bawah.
     display:contents menjadikan isi .authside item grid langsung, jadi
     satu kotak saja yang bisa naik tanpa menggandakan markup. */
  .authside{display:contents}
  .authside__box--hi{order:-1}

  .authside__chat{padding:var(--s3) var(--s4)}
  .fset{margin-bottom:var(--s4)}
  .fset__hd{margin-bottom:var(--s3)}

  /* panah disembunyikan, geser pakai jari */
  .slider__arw{display:none}
  /* Titik indikator banner. Yang TERLIHAT tetap 6px — itu bagian desain.
     Yang diperbesar cuma area ketuknya, lewat ::after tak terlihat setinggi
     44px. Tanpa ini tiga sasaran 6px berjarak 6px praktis tidak bisa
     dipilih dengan sengaja: satu jari menutupi ketiganya sekaligus.

     Lebar ::after DIBATASI ke jarak antar titik (6px titik + 12px gap),
     bukan 44px penuh. Area ketuk yang saling tumpang tindih justru bikin
     titik yang salah kepencet — yang paling atas di DOM yang menang, bukan
     yang paling dekat jari. */
  .slider__dots{bottom:var(--s2);padding:4px 8px;gap:var(--s3)}
  .slider__dots button{width:6px;height:6px;position:relative}
  .slider__dots button.on{width:18px}
  .slider__dots button::after{
    content:'';position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:18px;height:44px;
  }
  .slider__dots button.on::after{width:30px}

  /* Grid -> rail geser: 10 item dibagi 4 kolom menyisakan sel kosong
     dan makan 3 baris. Lebar auto + nowrap agar label panjang tidak patah. */
  .cats{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cats::-webkit-scrollbar{display:none}

  /* Lebar dipatok, bukan auto. Kalau auto, lebarnya ikut panjang label
     dan "Tembak Ikan" jadi dua kali lebar "Slot". */
  .cat{
    flex:0 0 76px;
    scroll-snap-align:start;
    padding:12px 4px 10px;
    gap:7px;
  }
  .cat__ic{width:26px;height:26px}
  /* label boleh patah dua baris; min-height menyamakan ruangnya
     supaya label satu baris dan dua baris tetap sejajar */
  .cat b{font-size:9px;letter-spacing:.04em;white-space:normal;min-height:2.4em}
  .cat__dot{top:4px;right:6px;min-width:14px;height:14px;font-size:8px}

  /* ---------- halaman katalog ---------- */

  .sechd h1{font-size:var(--f-lg)}
  .sechd h1::before{height:15px}
  /* Keterangan turun ke bawah judul; sebaris di 360px bikin judulnya patah.
     order dipakai supaya profil ringkas tetap naik ke baris judul, bukan
     ikut terdorong ke baris ketiga — di DOM dia memang ditulis paling
     akhir, karena di desktop urutan itu yang benar. */
  .sechd--hal .sechd__ket{flex-basis:100%;order:3}

  /* Dikecilkan tapi TETAP sebaris dengan judul. Karena isinya ditumpuk,
     kartunya cuma ~145px — muat di samping judul bahkan di layar 360px,
     jadi tidak ada yang perlu disembunyikan. */
  .miniakun{order:2;gap:var(--s2);padding:5px var(--s3) 5px 5px}
  .miniakun .avatar--lg{width:34px;height:34px;font-size:var(--f-sm)}
  .miniakun__isi b{font-size:var(--f-sm)}
  .miniakun__isi em{font-size:var(--f-md)}

  /* Dikecilkan supaya sekali sapuan jari kelihatan ~3,5 kartu — potongan
     kartu keempat itu yang memberi tahu bahwa deretnya masih bisa digeser. */
  /* Tombol geser deret provider: DESKTOP SAJA. Di lebar ini deretnya
     digeser dengan jari, dan tombolnya cuma menutupi kartu. Padding
     .container di sini juga --s3, bukan --s4, jadi posisi -16px milik
     tombolnya memang tidak berlaku lagi. */
  .provnav{display:none}
  .provbar{gap:6px}
  .provp{flex-basis:88px;padding:6px 5px 8px;gap:5px}
  .provp b{font-size:10px;min-height:2.3em}
  .provp__mark em{font-size:18px}
  .provp__mark::after{width:15px;bottom:5px}

  /* Jarak vertikal dirapatkan. Di layar 360px, tiap 20px yang menganggur
     itu ~3% tinggi layar — dan sebelum game pertama kelihatan ada empat
     blok yang harus dilewati.
     Strip kategori dirapatkan LEWAT .katalog saja, bukan langsung di
     #kategori: markupnya dipakai bersama beranda, dan jarak di beranda
     memang sudah pas — di sana dia duduk di antara blok besar. */
  .crumb{padding-top:var(--s3)}
  .sechd--hal{margin-top:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap;gap:2px var(--s2)}
  .katalog #kategori{padding:var(--s2) 0}
  .sec--katalog{padding-top:var(--s2)}
  .alat{padding-top:var(--s2)}

  /* Chip dan cari TETAP sebaris di sini — jangan dibalikkan jadi
     bertumpuk. Yang disetel cuma ukurannya: jarak dirapatkan, kotak cari
     boleh menyusut lebih jauh, dan bantalan dalamnya dikurangi supaya
     teks isiannya masih dapat ruang di lebar sesempit itu. */
  .toolbar{gap:var(--s2)}
  /* DIIKAT KE .toolbar, dan itu wajib. Sebagai `.cari` polos, aturan ini
     spesifisitasnya (0,1,0) — sama dengan penawar `.faqbar__cari{flex:none}`
     di style.css — sementara mobile.css dimuat BELAKANGAN, jadi longhand
     flex-basis:150px menang lagi. Di faq.php kotak cari itu anak langsung
     .container.tumpuk yang flex-direction:column, jadi 150px dibaca sebagai
     TINGGI: kotaknya jadi 150px dan ikon di top:50% terlempar 30px ke bawah
     input. Diukur di Chrome pada 320/360/460/700px, normal cuma di desktop.
     Dengan `.toolbar .cari` (0,2,0) niat aslinya di slot.php dan
     inc/katalog.php tetap jalan, dan kotak cari FAQ tidak lagi tersentuh. */
  .toolbar .cari{flex-basis:150px;min-width:118px}
  .cari input{padding:0 34px 0 32px}
  .cari__ic{left:11px;width:14px;height:14px}
  .hasil{margin:var(--s2) 0 var(--s3)}

  .kosong{padding:var(--s7) var(--s4)}
  .muat .btn{width:100%}

  /* tile game: 3 kolom, ini navigasi utamanya */
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}

  /* ---- Deposit transfer bank ----
     Nomor rekening dirapatkan bantalannya, tapi UKURAN HURUFNYA TIDAK
     dikecilkan lebih jauh: clamp() di style.css sudah menskalanya ke
     lebar layar, dan ini justru angka yang paling perlu terbaca di HP —
     orangnya sedang menyalinnya ke aplikasi bank di layar yang sama.

     word-break:break-all dari style.css tetap berlaku supaya nomor
     panjang tidak melebarkan halaman. */
  .tx__reknomor{padding:var(--s4) var(--s3);gap:var(--s2)}

  /* Tombol salin melebar penuh. Di layar sentuh, tombol selebar 100px
     di tengah kartu adalah sasaran yang meleset; yang penuh tidak. */
  .tx__reknomor .btn--kecil{width:100%;padding:10px 14px}

  /* Pilihan rekening: tetap satu kolom bertumpuk, jaraknya dirapatkan.
     TIDAK dijadikan dua kolom — nama bank dan atas nama berdampingan di
     lebar 360px membuat "PT Kangtoto Digital" terpotong, dan atas nama itu
     yang dicocokkan orang sebelum menekan kirim. */
  .tx__rekpilih{gap:6px}
  .metode--rek .metode__kotak{padding:10px 12px}
  .metode--rek .metode__nama b{font-size:var(--f-sm)}
  .metode--rek .metode__nama em{font-size:11px}
  .tx__rek{font-size:var(--f-sm)}

  /* Pintu provider casino: 3 kolom, SAMA dengan .tiles.

     minmax(132px,1fr) di style.css kalau dibiarkan cuma memuat DUA
     kolom di layar 360px — ruang isinya 336px, dan 132*3 + gap sudah
     lewat. Dua kolom berarti kartu selebar 162px, dan 12 provider jadi
     enam baris yang harus digulir. Yang lebih penting: halaman ini
     duduk di antara /slot dan /crash yang keduanya tiga kolom, jadi
     dua kolom terbaca sebagai halaman yang tata letaknya beda sendiri,
     bukan sebagai kartu yang lebih besar. */
  .pintu{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .pintu__k{padding:6px 5px 9px;gap:6px}
  /* Tiga baris di sini, bukan dua: di ~106px per kartu "World
     Entertainment" dan "Awc Sexy Baccarat Qf" sudah pecah jadi tiga. */
  .pintu__nm{font-size:11px;min-height:3.6em}
  .pintu__tag{font-size:9px;min-height:2.3em}
  .pintu__tag--off b{padding:2px 6px}
  .pintu__ket{margin-top:var(--s3);font-size:var(--f-xs)}

  /* Judul kolom BOLEH turun baris di layar sentuh. Di style.css dia
     white-space:nowrap + uppercase + letter-spacing, jadi lebar minimum
     tabel ditentukan JUDULNYA, bukan isinya: tabel tingkat VIP butuh
     ~495px sementara ruang yang ada cuma ~302px di 360px, sehingga kolom
     "Batas per minggu" — angka yang jadi alasan orang membuka halaman VIP
     — terpotong di luar layar. Membolehkan judul membungkus memangkasnya
     ke ~300px dan seluruh tabel muat. */
  .tabel th{white-space:normal;letter-spacing:.02em;line-height:1.25}

  /* Nama game boleh dua baris. Di 3 kolom kartunya cuma ~107px, dan
     elipsis satu baris justru memotong bagian PEMBEDA judul slot — dua
     game berbeda sama-sama tampil "Gates of Olym…". */
  .tile__body b{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    white-space:normal;overflow:hidden;
  }

  /* Tombol pengganti kotak promo di halaman daftar tingginya cuma 4px.
     Batangnya dibiarkan 4px — itu memang indikator, bukan tombol yang
     harus terlihat besar — tapi area ketuknya dinaikkan ke 44px lewat
     ::after yang tak terlihat. */
  .bonus__nav{position:relative}
  .bonus__nav button{position:relative}
  .bonus__nav button::after{
    content:'';position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);
    height:44px;
  }
  .tile__art{font-size:30px}
  .tile__body{padding:6px var(--s2) var(--s2)}
  .tile__go{display:none}

  /* Bar RTP justru DILEBIHKAN dari desktop (10px vs 9px). Kartunya cuma
     ~107px, jadi bar setinggi desktop terbaca lebih kurus di sini.
     Periode belang dirapatkan supaya di bar ~93px tetap muat 5-6 garis. */
  .tile__bar{height:10px;border-radius:5px;margin-top:6px}
  .tile__bar i{border-radius:5px}
  .tile__bar i::before{--belang:17px}

  .sec{padding:var(--s5) 0}
  .sechd{margin-bottom:var(--s3)}
  .sechd h2{font-size:var(--f-lg)}


  /* .sechd--sela DIPERTAHANKAN walau lahir bersama halaman togel:
     tentang.php memakainya, jadi dia sudah bukan milik togel lagi.
     Aturan .taruhan*, .pasar*, dan .undian* di blok ini dihapus
     29 Agt bersama produknya. */
  .sechd--sela{margin-top:var(--s5)}

  .trust{grid-template-columns:minmax(0,1fr);gap:var(--s2)}

  .ftr{padding-bottom:var(--s5)}

  /* Kolom link dibuat dua lajur — ditumpuk satu lajur menyisakan
     separuh layar kanan kosong.
     Ada 3 kolom link tapi cuma 2 lajur, jadi kolom terakhir akan
     menyisakan sel kosong di kanan bawah. Dibereskan dengan membuat
     kolom terakhir melebar penuh lalu daftarnya sendiri dipecah 2 lajur,
     sehingga tidak ada ruang yang menganggur. */
  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s4)}
  .ftr__brand{grid-column:1 / -1}
  /* Kolom tautannya GENAP (empat), jadi jatuh rapi jadi 2x2 dan tidak
     ada lagi kolom terakhir yang tersisa sendirian — aturan
     `:last-child{grid-column:1/-1}` yang dulu ada di sini dibuat waktu
     kolomnya masih tiga, dan sekarang justru menyisakan lubang di
     sebelah kolom ketiga.

     Pemecahan dua lajur kolom game TIDAK ditulis lagi di sini: sekarang
     sudah jadi aturan dasar di style.css dan berlaku di semua lebar. */
  .ftr__end{flex-direction:column;align-items:center;text-align:center;gap:var(--s2)}

  /* Beri ruang bawah supaya konten tidak tertutup bottom nav.

     `:not(.ringkas)` DICABUT. Dulu halaman formulir tidak merender
     .btmnav sama sekali, jadi penyaring itu membuang 64px ruang mati di
     bawah tombol daftar. Sekarang bottom nav ikut tampil di sana — dan
     tanpa ruang ini dia MENUTUPI tombol Daftar, yaitu satu-satunya
     tombol yang gunanya seluruh halaman itu. */
  .btmnav{display:block}
  body{padding-bottom:64px}
}

/* ---------- Ponsel kecil ---------- */
@media (max-width:460px){
  /* Tetap 3 kolom; di lebar ~107px per kartu isinya harus ikut mengecil
     supaya badge tidak bertabrakan di pojok atas. */
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .tile__art{font-size:26px}
  .tile__body{padding:5px 7px 7px}
  .tile__body b{font-size:11px}
  .tile__body span{font-size:9px}
  .tile__flag{top:4px;left:4px;padding:2px 5px;font-size:8px}
  .tile__rtp{top:4px;right:4px;padding:2px 6px;font-size:9px}

  /* Ikut .tiles ke gap 7px. Di ~107px per kartu, nama provider dua kata
     seperti "World Entertainment" butuh tiga baris — min-height dinaikkan
     supaya barisnya tetap rata, bukan bergerigi mengikuti panjang nama. */
  .pintu{gap:7px}
  .pintu__k{padding:5px 4px 8px}
  .pintu__nm{font-size:10px}
  .pintu__tag{font-size:8px}
  .pintu__tag--off b{padding:2px 5px}
  /* .tile__bar sengaja TIDAK ditulis ulang di sini — ukurannya diwarisi
     dari blok 700px. Aturan lama yang mengecilkannya jadi 2,5px sudah
     dihapus karena diam-diam membatalkan tinggi bar yang baru. */

  /* .cats sudah jadi rail sejak 700px, di sini cuma dirapatkan */
  .cat{flex-basis:70px;padding:11px 3px 9px}
  .cat__ic{width:24px;height:24px}

  /* Kartu dilebarkan. Baris penutup jadi dua tingkat: keterangan masa
     berlaku di atas, tombol penuh di bawah — "Login & Klaim" plus teks
     masa berlaku tidak muat sebaris di layar sempit. */
  .promo{flex-basis:86%}
  .promo__isi{padding:var(--s3);gap:var(--s2)}
  .promo__foot{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .promo__foot .btn{width:100%}
  /* .promos--grid sudah satu kolom sejak 900px — TIDAK ditulis ulang di
     sini. flex-basis:86% di atas cuma berlaku untuk .promo di slider
     beranda, tapi kartu di grid ikut kena karena selektornya .promo
     polos, jadi yang ini perlu dibatalkan. */
  .promos--grid .promo{flex-basis:auto}
  .modal__isi{padding:var(--s5)}
  .faq summary{padding:var(--s3) var(--s4)}
  .ticker__tag{padding:0 var(--s2)}

  /* ---- transaksi ----
     Kartunya dirapatkan, bukan dikecilkan isinya: yang makan tempat di
     sini bingkai bertumpuk (kartu di dalam bagian di dalam wadah), bukan
     teksnya. */
  .kartu-tx{padding:var(--s4)}
  /* Margin negatif .tabelbox HARUS sama dengan padding kartunya. Di
     lebar ini paddingnya turun ke --s4, jadi -s5 yang dipakai di desktop
     akan menonjol 4px keluar dari tepi kartu — dan karena kotaknya
     menggulir mendatar, tonjolan itu terlihat sebagai garis yang bocor. */
  .tabelbox{margin:0 calc(var(--s4) * -1);padding:0 var(--s4)}

  /* ---- daftar rincian: label di atas nilainya ----
     Di desktop tiap baris .txhasil__rinci itu label kiri, nilai kanan.
     Susunan itu benar selama nilainya PENDEK — "Rp 200.000", "Berhasil".
     Di halaman panduan, syarat, privasi, dan kontak nilainya KALIMAT
     ("Berurutan sesuai antrean, 24 jam" — 46 karakter bersama labelnya).
     Dipaksa sebaris di layar ~300px, dua kolomnya masing-masing tinggal
     ~140px, keduanya pecah dua sampai tiga baris, dan tidak ada lagi
     yang sejajar dengan apa pun.

     Ditumpuk, tiap baris jadi dua baris pendek yang jelas mana label
     mana nilai. Yang nilainya memang pendek ikut bertumpuk juga, dan
     itu ditukar dengan satu susunan yang berlaku di semua halaman —
     lebih baik daripada dua susunan yang harus ditandai satu per satu
     dan pasti ada yang terlewat. */
  .txhasil__rinci > div{
    flex-direction:column;align-items:flex-start;gap:3px;
    padding:11px var(--s3);
  }
  .txhasil__rinci dd{text-align:left}

  /* KECUALI di kartu hasil transaksi.
     Penumpukan di atas benar untuk halaman panduan, syarat, privasi, dan
     kontak — di sana nilainya kalimat, dan dipaksa sebaris keduanya pecah
     jadi tiga baris masing-masing.

     Di kartu QRIS keadaannya kebalikannya: nilainya "Rp 20.000",
     "Tanpa bonus", satu kode. Semuanya pendek. Ditumpuk, tiga baris
     berubah jadi enam dan separuh layar HP habis untuk keterangan yang
     muat sebaris — sementara kode QR yang jadi alasan halaman ini ada
     terdorong ke atas layar.

     Dibatasi ke [data-hasil] supaya alasan di atas tetap berlaku di
     semua tempat lain yang memakai .txhasil__rinci. */
  .txhasil[data-hasil] .txhasil__rinci > div{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:var(--s3);padding:9px var(--s3);
  }
  .txhasil[data-hasil] .txhasil__rinci dd{text-align:right}
  /* Kode transaksi 17 karakter — dibiarkan mengecil sedikit daripada
     memaksa barisnya pecah, karena dia satu-satunya nilai panjang di
     sini dan dia dibaca huruf per huruf ke CS, bukan sekilas. */
  .txhasil[data-hasil] .txhasil__rinci code{font-size:var(--f-xs);word-break:break-all}
  /* Popup hasil transaksi rata tengah, jadi barisnya ikut rata tengah —
     kalau tidak, isinya menempel ke kiri sementara judulnya di tengah. */
  .modal__box--kabar .txhasil__rinci > div{align-items:center}

  /* Tombol aksi: satu per baris. min-width 170px bawaan membuat dua
     tombol berebut ruang yang cuma cukup untuk satu. */
  .tentang__kontak{flex-direction:column}
  .tentang__kontak .btn{min-width:0;width:100%}

  /* ---- langkah panduan ---- */
  .panduan li{gap:var(--s3);padding:var(--s3) 0}
  .panduan__no{width:26px;height:26px;font-size:var(--f-sm)}
  .panduan li > div > b{font-size:var(--f-md)}
  /* Chip nominal contoh: empat kolom terlalu sempit di sini, tiga cukup
     karena labelnya pendek ("100rb", "1 Jt"). */
  .panduan .nominal__cepat{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* ---- halaman akun di layar sempit ---- */
  /* Dua kolom tombol Deposit/Withdraw jadi terlalu sempit untuk kata
     "Withdraw" — ditumpuk saja, tingginya cuma bertambah 40px. */
  /* Selektor yang SAMA dengan di style.css: gap di wadahnya, bukan
     margin antar kartu. Di lebar ini ruang layarnya yang mahal, bukan
     kejelasan batas — kartunya sudah selebar layar. */
  .tumpuk,.panel{gap:var(--s4)}
  .panel > .stat{margin-bottom:var(--s4)}
  .akun__aksi{grid-template-columns:minmax(0,1fr)}
  .stat__i{padding:var(--s3)}
  .stat__i b{font-size:var(--f-md)}

  /* Keterangan batang kemajuan pecah dua baris: "Rp 890.000 dari
     Rp 1.440.000" plus "sisa Rp 550.000" tidak muat sebaris di 360px,
     dan justify-content:space-between membuat keduanya saling menempel
     di tengah sebelum akhirnya terpotong. */
  .prog__ket{flex-direction:column;gap:2px}

  /* Tabel dirapatkan, bukan dikecilkan hurufnya — di bawah 12px angka
     rupiah jadi susah dibaca sekilas, dan itu justru isinya. */
  .tabel td{padding:9px var(--s2)}
  .tabel th{padding:0 var(--s2) var(--s2)}

  /* Kode referral dan tautan undangan: tombol Salin turun ke bawah.
     Sebaris, kotak kodenya tinggal ~180px dan tautan undangan yang
     panjang jadi elipsis sejak karakter ke-20. */
  .salin{flex-direction:column}
  .salin .btn{width:100%}

  /* Empat tombol jeda jadi 2x2. Sebaris di 360px tiap tombol ~80px,
     dan "Permanen" tidak muat. */
  .jeda{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Rekap transaksi: nominal dan lencana status didorong ke bawah nama
     supaya tidak berdesakan dengan tanggal di sebelah kirinya. */
  .rekap__t b{font-size:var(--f-sm)}
  .rekap__n b{font-size:var(--f-sm)}
  .rekap__ar{width:28px;height:28px}

  .akunnav__b{font-size:var(--f-sm);padding:8px var(--s3);min-height:44px}

  /* Chip penyaring dipakai di 14 halaman dan di sini tingginya cuma 31,4px.
     Yang dinaikkan bantalannya, bukan font-size — mengecilkan huruf sudah
     dilakukan di tempat lain dan di bawah 12px angka jadi susah dibaca. */
  .chip{padding-top:12px;padding-bottom:12px}
  .akunnav__b svg{width:15px;height:15px}
  .dompet{padding:var(--s3) var(--s4);gap:var(--s3)}
  .dompet__ik{width:36px;height:36px}
  .dompet__utama b{font-size:var(--f-lg)}
  .metode__kotak{gap:var(--s3);padding:var(--s3)}
  .metode__ik{width:38px;height:38px}
  .metode__ik svg{width:20px;height:20px}
  /* Enam tombol nominal: dua baris tiga, bukan gulir mendatar. Rak
     mendatar untuk enam benda pendek berarti dua yang terakhir tidak
     kelihatan sama sekali. */
  .nominal__cepat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .nominal__cepat .chip{justify-content:center}
  .qris{min-height:0;padding:var(--s4)}
  /* WAJIB ditulis ulang di sini. `.qris--nyata` di style.css bernilai
     (0,1,0) — sama persis dengan `.qris` sebaris di atas — dan berkas ini
     dimuat BELAKANGAN, jadi padding-nya menang dan bingkai yang sudah
     dibuang di desktop diam-diam kembali di HP. Persis pola yang sudah
     beberapa kali menggigit di proyek ini. */
  .qris--nyata{padding:0;border:0;background:none}
  .qris__palsu{width:140px;height:140px}
  /* Kode sungguhannya TIDAK ikut mengecil sampai 140px seperti pola
     contoh di atasnya. Yang ini benar-benar dipindai kamera, dan kode
     versi tinggi (73x73 modul) pada 140px cuma menyisakan kurang dari
     2 piksel per modul — di bawah itu pemindai mulai gagal mengunci.
     Yang dikecilkan paddingnya saja. */
  /* Lebih besar dari sebelumnya, bukan lebih kecil. Bingkai luarnya sudah
     dibuang, jadi ruang yang tadinya jadi padding wadah sekarang jatuh ke
     kodenya sendiri — dan kode QR versi tinggi butuh tiap piksel yang
     bisa didapat supaya modulnya tetap terbaca kamera. min() menjaga dia
     tidak menyentuh tepi layar di HP paling sempit. */
  .qris__img{max-width:min(248px,72vw);padding:14px}
  .txhasil{padding:var(--s4)}
}

/* ---------- Layar sentuh: hover tidak relevan ---------- */
@media (hover:none){
  .tile:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .tile__go{display:none}
  .cat:hover{transform:none}
  .btn--pri:hover{filter:none}
  /* Di layar sentuh, :hover NEMPEL setelah disentuh. Tanpa aturan ini
     kartu provider tetap terangkat 3px sesudah jarinya diangkat, dan
     tepinya jadi menabrak batas atas deret yang memang memotong. */
  .provp:hover{transform:none}
  /* Alasan yang sama untuk kartu pintu casino: :hover nempel sesudah
     disentuh, jadi kartunya tetap terangkat dan bercahaya setelah jari
     diangkat — di grid, itu terbaca sebagai kartu yang "terpilih". */
  .pintu__k:hover{transform:none;box-shadow:none;border-color:var(--line)}
  /* Layar sentuh LEBAR (tablet mendatar, laptop layar sentuh) tidak kena
     blok 900px di atas, padahal di sini deretnya sudah bisa digeser jari.
     Tanpa aturan ini, tombolnya tetap muncul dan menutupi kartu. */
  .provnav{display:none}
  .authside__chat:hover{transform:none}
  .prov:hover{transform:none;box-shadow:none}
}