/* ============================================================
   RESPONSIVE SWEEP v1 — additive, layers on top of everything.
   Goal: clean layout di 3 ukuran — HP, tablet, browser desktop.
   Tidak menghapus aturan lama; hanya menutup celah tablet +
   pengaman anti-overflow yang berlaku lintas-perangkat.
   ============================================================ */

/* ---- 0. Pengaman universal anti-overflow (semua perangkat) ---- */
/* CATATAN: sengaja TANPA overflow-x:hidden di body — topbar pakai
   position:sticky;top:0, dan overflow di body akan mematikan sticky-nya.
   Anti-overflow dijaga per-elemen (media + tabel scroll + grid min-width). */
html,body{max-width:100%}
img,video,canvas,svg{max-width:100%;height:auto}
.tw{max-width:100%}
.cd,.kc,.wc{min-width:0}            /* cegah child memaksa grid melebar */
.tbl td,.tbl th{word-break:normal}

/* ---- 1. TABLET (portrait + landscape kecil, 641–1024px) ---- */
@media(min-width:641px) and (max-width:1024px){
  .sc{padding:18px}
  /* manfaatkan lebar tablet: grid 3/4 kolom turun jadi 2 kolom (bukan 1) */
  .g3{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  /* KPI lebih lega di tablet */
  .kg{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  /* hero & filter tetap rapi */
  .wc{padding:20px}
  /* form/panel lebar jangan melewati layar */
  .mdl-bx{max-width:92vw}
}

/* ---- 2. Navigasi tab: HP + tablet portrait pakai dropdown ---- */
/* 13 tab berdesakan di bar ≤820px → ganti ke dropdown yang sudah dibangun JS */
@media(max-width:820px){
  .mn{display:none}
  .mn-mob{display:block;width:calc(100% - 32px);margin:10px 16px 4px;font-size:14px;padding:12px 14px}
}

/* ---- 3. HP kecil (≤600px): rapikan form & aksi cepat ---- */
@media(max-width:600px){
  .sc{padding:14px}
  .fb{flex-direction:column;align-items:stretch}
  .fb .sel,.fb .go{width:100%}
  .wc{flex-direction:column;align-items:flex-start;text-align:left}
  /* tombol & input lebih mudah disentuh */
  .go,.btp,.sbt,.sel,input,select,textarea{font-size:15px}  /* ≥16px-ish: cegah auto-zoom iOS */
  /* dialog/modal mepet ke tepi layar */
  .mdl{padding:10px}
  .mdl-bx{max-width:96vw;padding:18px}
}

/* ---- 4. Browser besar (≥1700px): konten tidak melar terlalu lebar ---- */
@media(min-width:1700px){
  .sc{max-width:1720px}
}