/* ============================================================
   IKSI — mobile.css
   Seluruh keputusan khusus perangkat genggam ada di berkas ini.
   Dimuat paling akhir agar menang atas base/components.

   Prinsip:
   - Target sentuh minimal 44px (WCAG 2.5.5).
   - Input minimal 16px agar iOS tidak memperbesar layar saat fokus.
   - Navigasi inti berada di zona ibu jari (bilah bawah).
   - Detail muncul sebagai bottom sheet, bukan panel samping.
   - Hormati takik & indikator beranda lewat env(safe-area-inset-*).
   ============================================================ */

/* ---------- dasar sentuh (semua ukuran) ---------- */
a, button, input, select, textarea, .fpill, .chip, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------- bilah navigasi bawah ---------- */
.tabbar { display: none; }

@media (max-width: 860px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface); /* cadangan bila color-mix tak didukung */
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px -8px rgba(23,33,27,.22);
  }
  .tabbar a, .tabbar button {
    display: grid; justify-items: center; align-content: center; gap: .18rem;
    min-height: 56px; padding: .5rem .2rem .55rem;
    color: var(--ink-3); font-size: .64rem; font-weight: 600; letter-spacing: .01em;
  }
  .tabbar .ic { width: 21px; height: 21px; stroke-width: 1.75; }
  .tabbar a.on { color: var(--pine); }
  .tabbar a.on .ic { stroke-width: 2.1; }
  .tabbar a.on::before {
    content: ""; position: absolute; top: 0; width: 34px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--pine);
  }
  .tabbar a { position: relative; }

  /* ruang agar konten terakhir tidak tertutup bilah — hanya di halaman
     yang benar-benar memasang bilah (masuk & 404 tidak) */
  body.ada-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .nightword { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  /* bilah menyingkir saat lapisan lain aktif (drawer, palet, tur) */
  html.lapisan-aktif .tabbar,
  html.tur-aktif .tabbar { transform: translateY(110%); pointer-events: none; }
  .tabbar { transition: transform .22s ease; }

  /* toast & tur duduk di atas bilah */
  .toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .tabbar { transition: none; }
}

/* ---------- bilah atas lebih ramping ---------- */
@media (max-width: 860px) {
  .topbar .row { min-height: 58px; }
  .brand .seal { width: 30px; height: 30px; }
  .brand .word b { font-size: 1.06rem; }
  .brand .word span { font-size: .46rem; letter-spacing: .14em; }
  .navtoggle { min-width: 44px; min-height: 44px; justify-content: center; }
  /* menu tumpah: item nyaman disentuh */
  .nav a { min-height: 48px; display: flex; align-items: center; }
  .nav .btn, .nav .pbtn { min-height: 46px; }
}

/* ---------- target sentuh & tipografi kontrol ---------- */
@media (max-width: 860px) {
  .btn { min-height: 46px; padding: .8rem 1.2rem; }
  .btn.mini { min-height: 44px; }
  .fpill { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem 1rem; }
  .statchips .chip { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem .8rem; }
  .brand { min-height: 44px; }
  /* kotak pilih: seluruh tinggi kontrol dapat disentuh, bukan hanya teksnya */
  .selectbox { padding: 0 .85rem; display: flex; align-items: center; }
  .selectbox select { min-height: 46px; padding: 0; }
  /* min-width bawaan input menghalangi kotak cari mengecil — lepaskan
     agar tombol Saring tidak terdorong keluar layar */
  .searchbox input { min-height: 26px; min-width: 0; }
  .linkline { min-height: 44px; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
  .otable .trow, .hotrow { min-height: 52px; }

  /* iOS memperbesar layar bila teks kontrol < 16px — cegah di sumbernya */
  .field .in, .field select, .field textarea,
  .searchbox input, .selectbox select, #pinput {
    font-size: 16px;
  }
  .field .in, .field select, .field textarea { padding: .85rem .95rem; }
  .searchbox { padding: .78rem 1rem; }
  .selectbox { padding: .5rem .85rem; }
  .radiorow label { min-height: 46px; display: inline-flex; align-items: center; }
}

/* ---------- panel saring yang dilipat (HP) ---------- */
.fbtn { display: none; }

@media (max-width: 640px) {
  .fbtn {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 50px; padding: .6rem .9rem; flex: none;
    font-size: .88rem; font-weight: 600; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-s);
  }
  .fbtn.aktif { color: var(--pine); border-color: var(--pine); background: var(--pine-soft); }
  .fbtn .kv { width: 15px; height: 15px; transition: transform .2s ease; }
  .fbtn[aria-expanded="true"] .kv { transform: rotate(180deg); }
  .fbadge {
    font-family: var(--mono); font-size: .62rem; font-weight: 700; line-height: 1;
    min-width: 18px; height: 18px; display: grid; place-items: center;
    border-radius: 999px; background: var(--pine); color: var(--on-pine);
  }
  #filterpanel { display: none; }
  #filterpanel.buka { display: grid; gap: .7rem; }
  /* butir grid bawaan tak boleh menyusut di bawah min-content-nya;
     lepaskan agar baris kontrol tidak melebar keluar kolom */
  .toolbar > *, #filterpanel > * { min-width: 0; }
  .toolbar .rowa:first-child { flex-wrap: nowrap; }
}

/* ---------- umpan balik sentuh: setiap yang bisa ditekan terasa ditekan ---------- */
@media (hover: none) {
  .kcard:active, a.card:active, button.card:active, a.issue:active,
  .hotrow:active, .pilar:active, .palette .pitem:active {
    background: var(--surface-2); transform: scale(.995);
  }
  .btn:active, .fpill:active, .fbtn:active, .statchips .chip:active { transform: scale(.97); }
  .tabbar a:active, .tabbar button:active { background: var(--surface-2); }
  /* kartu tak lagi "melayang" saat disentuh — efek angkat milik tetikus */
  a.card:hover, button.card:hover, a.issue:hover, .reg:hover { transform: none; box-shadow: none; }
}

/* ---------- tombol kembali ke atas ---------- */
.keatas {
  position: fixed; right: 14px; z-index: 78;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--night); color: var(--cream);
  border: 1px solid var(--night-rule); box-shadow: var(--e2);
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease;
}
@media (max-width: 860px) {
  .keatas { display: grid; }
  .keatas.tampil { opacity: 1; transform: none; }
  html.lapisan-aktif .keatas, html.tur-aktif .keatas { opacity: 0; pointer-events: none; }
}
@media print { .keatas { display: none !important; } }

/* ---------- strip gulir horizontal untuk deretan pil ---------- */
@media (max-width: 640px) {
  .statchips, #fpilar {
    flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; padding-bottom: .3rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .statchips::-webkit-scrollbar, #fpilar::-webkit-scrollbar { display: none; }
  .statchips > *, #fpilar > * { flex: none; scroll-snap-align: start; }
  .toolbar { gap: .7rem; margin: 1.4rem 0 1.1rem; }
  .toolbar .rowa { gap: .55rem; }
  .searchbox { flex: 1 1 auto; min-width: 0; }
  #csvbtn { flex: none; }
  .count-note { font-size: .68rem; }
}

/* ---------- baris registri: status & progres tetap terlihat ---------- */
@media (max-width: 640px) {
  .reg {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .55rem; padding: 1.05rem 1.1rem;
  }
  .reg .code    { grid-column: 1; grid-row: 1; }
  .reg .cell-status { display: block !important; grid-column: 2; grid-row: 1; justify-self: end; }
  .reg .t       { grid-column: 1 / -1; grid-row: 2; }
  .reg .t small { display: none; }
  .reg .cell-progres { display: block !important; grid-column: 1 / -1; grid-row: 3; }
  .reg .cell-prio, .reg .arrow { display: none !important; }
  .reg:active { background: var(--surface-2); }
}

/* ---------- kepala panel dasbor: judul utuh, keterangan di bawahnya ----------
   (kelas digandakan agar menang atas <style> sebaris di halaman) */
@media (max-width: 640px) {
  .panel .ph.ph { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .panel .ph.ph .s { white-space: normal; }
  .panel { padding: 1.3rem 1.2rem 1.4rem; }
  .donutwrap { gap: 1.1rem; }
}

/* ---------- daftar isu terbuka sebagai kartu ---------- */
@media (max-width: 640px) {
  .otable { border: 0; background: none; border-radius: 0; }
  .otable .trow {
    display: grid; grid-template-columns: 1fr auto; gap: .45rem .8rem;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r-m); padding: .95rem 1.05rem; margin-bottom: .7rem;
  }
  .otable .trow .id      { grid-column: 1; grid-row: 1; }
  .otable .trow .age     { grid-column: 2; grid-row: 1; justify-self: end; }
  .otable .trow .cell-t  { grid-column: 1 / -1; grid-row: 2; font-size: .92rem; }
  .otable .trow .src     { grid-column: 1 / -1; grid-row: 3; font-size: .78rem; }
  .otable .trow .pic     { grid-column: 1; grid-row: 4; font-size: .78rem; align-self: center; }
  .otable .trow span:last-child { grid-column: 2; grid-row: 4; justify-self: end; }
}

/* ---------- drawer sebagai bottom sheet ---------- */
@media (max-width: 640px) {
  .drawer {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; height: 92dvh; max-height: 92dvh;
    border-left: 0; border-top: 1px solid var(--rule-strong);
    border-radius: var(--r-l) var(--r-l) 0 0;
    transform: translateY(102%);
    transition: transform .3s cubic-bezier(.32,.72,.29,.99);
  }
  .drawer.show { transform: none; }
  .drawer.geser { transition: none; }        /* mengikuti jari saat ditarik */

  .drawer .dhead {
    padding: 1.35rem 1.15rem .9rem;
    border-radius: var(--r-l) var(--r-l) 0 0;
    position: relative; touch-action: none;   /* gerakan tarik-tutup */
  }
  .drawer .dhead::before {                    /* pegangan tarik */
    content: ""; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 999px; background: var(--rule-strong);
  }
  .drawer .dclose { width: 44px; height: 44px; }
  .drawer .dbody {
    padding: 1.4rem 1.15rem calc(2.4rem + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  .drawer .dbody .btn { width: 100%; justify-content: center; }
  .dmeta { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* ---------- palet pencarian di HP ---------- */
@media (max-width: 640px) {
  .palette { padding: 0; align-items: end; }
  .palette .pbox {
    width: 100%; border-radius: var(--r-l) var(--r-l) 0 0;
    max-height: 88dvh; display: flex; flex-direction: column;
  }
  .palette .pin { padding: 1.05rem 1.15rem; }
  .palette .plist { max-height: none; flex: 1; overscroll-behavior: contain; }
  .palette .pitem { padding: .8rem .7rem; }
  .palette .pfoot { padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- hero & kartu ---------- */
@media (max-width: 640px) {
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn { justify-content: center; }
  .hero .cta .linkline { justify-content: center; }
  /* penghubung antar tahap kehilangan makna saat pil membungkus baris */
  .flowline .fstep .lk { display: none; }
  .flowline { gap: .45rem; }
  .issue .top { flex-wrap: wrap; row-gap: .45rem; }
  .issue .upd { white-space: nowrap; }
  .issue .foot { flex-wrap: wrap; gap: .7rem; }
  .issue .foot .btn { min-height: 44px; }
  .ctaband .inner .btn { width: 100%; justify-content: center; }
  .featpub .body .btn, .featured .body .btn { width: 100%; justify-content: center; }
  .laporform .btn[type="submit"] { width: 100%; justify-content: center; }
  .laporform > div:last-child { flex-direction: column; align-items: stretch; gap: .7rem; }
}

/* ---------- takik & indikator beranda ---------- */
@media (max-width: 860px) {
  .wrap { padding-left: max(1.1rem, env(safe-area-inset-left));
          padding-right: max(1.1rem, env(safe-area-inset-right)); }
  .footer .base { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- cetak: bilah bawah tidak ikut ---------- */
@media print { .tabbar { display: none !important; } body { padding-bottom: 0 !important; } }