/* ================================================================
   mobile-saja.css — TAMPILAN HP UNTUK SEMUA UKURAN LAYAR
   Tujuan: tidak ada lagi "mode desktop". Di layar lebar, seluruh
   halaman ditampilkan dalam kolom selebar ponsel (430px) di tengah
   layar, jadi tampilannya SAMA seperti di HP.
   Dimuat paling akhir di semua halaman (landing, aplikasi, privasi,
   syarat) supaya menimpa gaya lain.
   ================================================================ */
/* ================================================================
   ANTI SCROLL HORIZONTAL — berlaku di SEMUA halaman (file ini
   dimuat paling akhir di landing, aplikasi, privasi, syarat).
   Tidak ada halaman yang boleh melebar keluar viewport.
   ================================================================ */
html{overflow-x:hidden;overflow-x:clip;max-width:100%}
body{overflow-x:hidden;overflow-x:clip;max-width:100%}
img,video,canvas,svg,iframe,pre{max-width:100%}
.kartu,.panel,.card,.mz-kartu,.v3-kartu,main,section,article,aside{min-width:0;max-width:100%}
/* nomor VA / ID transaksi panjang jangan menembus layar */
.va,.kode,.idtxn,.mono,[class*="va-"],[data-va]{overflow-wrap:anywhere;word-break:break-word}
/* yang boleh geser ke samping HANYA di dalam kotaknya sendiri */
.tabel-wrap,[data-gulir],.chips.gulir,.tabs-pil{max-width:100%}
@media (max-width:430px){
  .toasts{max-width:calc(100% - 20px)}
}

@media (min-width:431px){
  /* kanvas layar lebar: kolom ponsel di tengah */
  html{background:#d6e2f1; background-image:linear-gradient(160deg,#e6edf6,#c4d5eb)}
  body{
    width:430px; min-width:0;
    margin-left:auto; margin-right:auto;
    background:var(--bg,#f7fafe);
    box-shadow:0 0 0 1px rgba(35,70,116,.10), 0 24px 60px rgba(14,45,86,.18);
  }

  /* Tombol panah slide (penambah khas tampilan layar lebar) disembunyikan
     supaya persis seperti di HP: geser dengan jari/scroll saja. */
  .mob-panah{display:none !important}

  /* --- elemen yang "menempel" pada jendela (bukan di dalam kolom) ---
     dipersempit & dipusatkan ke kolom ponsel, supaya tidak melebar
     sepanjang layar desktop. --- */
  .bar-bawah,
  .mob-nav,
  .bnav,
  .adm-bnav,
  .adm-ovl,
  .modal-wrap,
  .tirai,
  .drawer,
  .kb-tirai,
  .gal-tirai,
  .poster-ziarah,
  .poster-ziarah-putar{
    left:calc(50% - 215px);   /* 215px = setengah lebar kolom (430/2) */
    right:auto;
    width:430px;
  }

  /* menu samping admin: laci selebar 270px, buka dari tepi kiri kolom */
  .adm-side{
    left:calc(50% - 215px);
    right:auto;
  }
  .adm-main{margin-left:0}

  /* sembunyikan sisa bagian yang hanya dipakai tampilan layar lebar lama */
  .hanya-desk{display:none !important}

  /* --- PANEL ADMIN: pakai lebar layar sungguhan di desktop & tablet --- */
  body:has(.adm){width:auto;max-width:none;margin:0;box-shadow:none}
  .adm{width:100%;max-width:100%;margin-left:0}
  .adm-side{left:0;right:auto;width:264px}
  .adm-ovl,.adm-bnav{left:0;right:0;width:auto}
  body:has(.adm) .modal-wrap,body:has(.adm) .tirai{left:0;right:0;width:auto}
}