/* =====================================================================
   mobile.css — lapisan responsif tambahan untuk paket web Hostinger.
   Disuntikkan sebagai <link> TERAKHIR ke setiap HTML oleh _webhost/build.py.
   Semua aturan dibatasi @media (max-width:720px) supaya tampilan desktop
   tidak berubah sedikit pun. Sumber asli di _illum/ tidak disentuh.
   ===================================================================== */

@media (max-width: 720px) {

  /* ---- 1. Umum: target sentuh & area lebar bisa digeser ---------------- */
  .tab, .chip, .langbtn, .btn.sm { min-height: 34px; }
  #tabs, nav#tabs, .fade-r, .tbl, .fwlog, .wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* site_configs/site_zones/site_k1k4: deretan tab jangan terpotong. */
  #tabs, nav#tabs { overflow-x: auto; flex-wrap: nowrap; }
  #tabs > *, nav#tabs > * { flex: none; }
  /* tabel dan blok log yang lebih lebar dari layar digeser di dalamnya. */
  .tbl, .fwlog { max-width: 100%; overflow-x: auto; }

  /* ---- 2. Landing page ------------------------------------------------ */
  [data-site="landing"] .mobile-hint { display: block; }
  [data-site="landing"] .grid { grid-template-columns: minmax(0, 1fr); }
  [data-site="landing"] .stat { min-width: 0; width: 100%; }
  [data-site="landing"] .stat.wide { min-width: 0; }
  [data-site="landing"] .hero .wrap { padding: 34px 0 38px; }
  [data-site="landing"] .hero h1 { font-size: clamp(23px, 7.2vw, 32px); }
  [data-site="landing"] .hero p.lead { font-size: 14px; }
  [data-site="landing"] .panel { padding: 14px; }
  [data-site="landing"] .search { flex-basis: 100%; }
  [data-site="landing"] .count { width: 100%; }
  [data-site="landing"] .card { padding: 15px 15px 14px; }
  [data-site="landing"] .ghead { gap: 8px; }
  [data-site="landing"] .ghead h2 { font-size: 17px; }
  [data-site="landing"] .notes { padding: 17px 16px; }
  [data-site="landing"] footer a { display: inline-block; padding: 6px 0; }

  /* ---- 3. Platform bentang: header tidak boleh terpotong -------------- */
  [data-site="bentang"] #topbar {
    height: auto; min-height: 56px; flex-wrap: wrap;
    gap: 8px 10px; padding: 8px 14px;
  }
  [data-site="bentang"] #topbar .brand { gap: 8px; }
  [data-site="bentang"] #topbar .brand b { font-size: 13px; white-space: nowrap; }
  [data-site="bentang"] #topbar .topright { margin-left: auto; gap: 8px; }
  [data-site="bentang"] #topbar .langbtn { padding: 6px 9px; }
  [data-site="bentang"] #topbar .btn.sm {
    padding: 7px 10px; font-size: 11.5px; white-space: nowrap;
  }
  [data-site="bentang"] .wrap { padding: 0 14px; }
  [data-site="bentang"] .hero { padding-top: 42px; }
  [data-site="bentang"] .hero h1 { font-size: 29px; }
  [data-site="bentang"] .dcpage .dcwrap { padding: 0 14px; }

  /* ---- 4. Viewer konfigurasi & zona: header dua baris ----------------- */
  [data-site="site_configs"] #topbar,
  [data-site="site_zones"] #topbar {
    height: auto; min-height: 56px; flex-wrap: wrap;
    justify-content: flex-start; gap: 8px; padding: 8px 12px;
  }
  [data-site="site_configs"] #topbar h1,
  [data-site="site_zones"] #topbar h1 { font-size: 14px; }
  [data-site="site_configs"] #topbar p,
  [data-site="site_zones"] #topbar p { display: none; }
  [data-site="site_configs"] #tabs,
  [data-site="site_zones"] #tabs {
    max-width: 100%; margin-left: 0; overflow-x: auto;
  }
  [data-site="site_configs"] .tab,
  [data-site="site_zones"] .tab { padding: 7px 12px; font-size: 12px; }
  [data-site="site_configs"] .view.active,
  [data-site="site_zones"] .view.active { height: calc(100vh - 96px); }

  /* ---- 5. Galeri 3D: badge ringkas, nav bisa digeser ------------------ */
  [data-site="gallery3d"] .wrap { -webkit-overflow-scrolling: touch; }
  [data-site="gallery3d"] .badges { display: grid; grid-template-columns: 1fr 1fr; }
  [data-site="gallery3d"] .badge { min-width: 0; }
  [data-site="gallery3d"] .badge b { font-size: 14px; }

  /* ---- 6. Laporan: daftar isi lebih mudah disentuh -------------------- */
  [data-site="laporan"] nav a,
  [data-site="laporan"] .toc a { display: inline-block; padding: 3px 0; }

  /* ---- 7. Viewer peta: tombol +/− Leaflet menimpa panel kontrol -------
     Di layar sempit panel melayang hampir selebar layar, sementara kontrol
     Leaflet ber-z-index 1000 sehingga menutupi judul panel. Sembunyikan
     tombol +/− saja; peta tetap bisa diperbanyak dengan pinch / double-tap.
     Viewer 'site/' tidak punya panel melayang, jadi tombolnya dipertahankan. */
  [data-site="site_configs"] .leaflet-control-zoom,
  [data-site="site_zones"] .leaflet-control-zoom,
  [data-site="overlay"] .leaflet-control-zoom { display: none; }
}

/* Layar sangat sempit (320–360 px) ------------------------------------- */
@media (max-width: 380px) {
  [data-site="landing"] .hero h1 { font-size: 22px; }
  [data-site="landing"] .eyebrow { font-size: 10px; letter-spacing: .1em; }
  [data-site="landing"] .chip { padding: 6px 10px; font-size: 12px; }
  [data-site="bentang"] #topbar .brand b span { display: none; }
  [data-site="bentang"] #topbar .btn.sm { font-size: 11px; padding: 6px 8px; }
  [data-site="gallery3d"] .badges { display: grid; grid-template-columns: 1fr; }
}