/* ===== Backlog Vertek RTLH — redesign premium : tema emas/gold, mobile-first ===== */
:root{
  --gold-700:#90662a;
  --gold-600:#a67833;
  --gold-800:#7a5522;
  --gold-900:#5f4218;
  --gold-300:#d9c091;
  --gold-200:#e9dcc4;
  --gold-100:#f5ebd9;
  --gold-050:#faf5ec;
  --bg:#f7f2e9;
  --ink:#2c2418;
  --ink-soft:#6d6048;
  --danger:#b3261e;
  --ok:#1e7d42;
  --radius:18px;
  --shadow:0 6px 22px rgba(122,85,34,.14);

  /* shared form-field tokens — dipakai SEMUA field (input/select/date/pencarian desa) */
  --field-bg:#fff;
  --field-border:#e9dcc4;
  --field-radius:12px;
  --field-focus:rgba(166,120,51,.18);
  --field-text:#2c2418;

  /* ---- skala TIPOGRAFI konsisten (mobile-first) ---- */
  --f-title:1.45rem;          /* judul halaman */
  --f-hero:1.9rem;            /* judul utama home */
  --f-section:1.05rem;        /* judul seksi card */
  --f-body:.9375rem;          /* ~15px isi */
  --f-sub:.72rem;             /* subjudul uppercase */
  --f-eyebrow:.68rem;         /* eyebrow provinsi uppercase */
  --f-label:.8125rem;         /* label field */
  --f-btn:.9375rem;           /* tombol */
  --f-input:1.0625rem;        /* isi input (mobile touch-friendly) */
  --f-muted:.85rem;           /* teks bantu/muted */
  --font-big:900;
  --font-b:700;

  /* ---- skala SPACING konsisten (mobile-first) ---- */
  --sp-section:20px;
  --sp-card:18px;
  --sp-gap:14px;
  --line-body:1.55;
  --maxw:720px;              /* FRAME desktop: kolom terpusat selebar frame (mobile penuh) */
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{overflow-x:hidden;}
html,body{margin:0;padding:0;}
body{
  font-family:'Lato',system-ui,-apple-system,sans-serif;
  /* app normal = cream penuh width. Ketika home di-frame (body.home), latar jadi netral
     abu-warm utk menonjolkan kartu rounded (.home-frame). */
  background:var(--bg);
  color:var(--ink);
  line-height:var(--line-body);
  min-height:100vh;
  font-size:15px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* LUAR FRAME (netral abu-warm) — HANYA saat halaman awal di-frame via body.home (JS) */
body.home{background:#e9e2d3;}
img,svg{max-width:100%;}
.hidden{display:none !important;}

/* big touch targets */
button{font-family:inherit;cursor:pointer;}
.btn-ghost{
  /* tombol di atas latar TERANG (krem): putih-samar tak terbaca -> tone gold tegas */
  background:var(--gold-050);
  color:var(--gold-800);border:1.5px solid var(--gold-300);
  padding:8px 13px;border-radius:12px;min-height:38px;
  display:inline-flex;align-items:center;gap:6px;
  font-weight:var(--font-b);font-size:.85rem;
  transition:background .15s, border-color .15s;
}
.btn-ghost svg{width:17px;height:17px;}
.btn-ghost:hover{background:var(--gold-100);border-color:var(--gold-600);}
.btn-ghost.sm{padding:7px 11px;font-size:.82rem;}

/* ===== Layout ===== */
/* `.wrap` = penampung full-width NORMAL (bukan frame). Tiap view atur padding sendiri.
   FRAME KOTAK ROUNDED HANYA utk HALAMAN AWAL (#view-home.home-frame); diaktifkan via
   `body.home` (JS toggle di showView) → latar luar netral utk home, view lain full-width cream. */
.wrap{min-height:100vh;position:relative;padding:0;}
/* View NON-home: full-width normal, padding kiri-kanan 16px (seperti app cream biasa) */
#view-form,#view-result,#view-status,#view-admin{padding:20px 16px 40px;}
/* HOME: kartu rounded terpusat selebar frame sebagai flex column; min-height setinggi
   viewport (minus margin atas/bawah) sehingga FOOTER di dalamnya menempel dasar frame;
   padding 0 agar banner hero flush penuh ke tepi (bukan inset oleh frame). overflow:hidden
   memotong sudut atas (banner) & bawah (footer) ikut radius. */
#view-home.home-frame{
  max-width:var(--maxw);margin:14px auto;
  background:var(--bg);
  border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 20px 60px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
  min-height:calc(100vh - 28px);
  padding:0;
}
/* MOBILE (< 720): home full-bleed (tanpa gap/radius), min-height penuh layar */
@media (max-width:720px){
  #view-home.home-frame{width:100%;margin:0;border-radius:0;min-height:100vh;}
  body.home{background:var(--bg);}
}
.view{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== Home / Hero ===== */
/* Banner hero = DIV full-width (bukan img) memakai background ilustrasi, flush ATAS-KIRI-KANAN
   frame TANPA margin kiri/kanan, tanpa negative margin / width:100vw / transform. Frame
   overflow:hidden memotong sudut-atas ikut radius. Tinggi via aspect-ratio = dimensi asli
   ilustrasi (2172x522). `.home-inner` membungkus isi home dgn padding samping lebih lega (22px). */
.hero{padding:0;}
.hero-banner{
  flex:none;width:100%;
  aspect-ratio:2172/522;
  background:url('ilustrasi-rtlh.png') center/cover no-repeat;
  overflow:hidden;
}
.home-inner{flex:1;padding:20px 22px;}
.hero-brand{display:flex;align-items:center;gap:14px;margin:0 0 16px;}
.hero-logo{height:58px;width:auto;flex:none;}
.hero-brand-txt{display:flex;flex-direction:column;line-height:1.2;}
.hero-brand-txt span{color:var(--gold-800);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:1.6px;}
.hero-brand-txt span+span{margin-top:2px;}
.hero h1{
  font-size:var(--f-hero);font-weight:var(--font-big);margin:0 0 4px;
  color:var(--gold-900);line-height:1.22;letter-spacing:-.2px;
}
.hero-sub{
  font-size:var(--f-sub);font-weight:var(--font-b);
  color:var(--gold-600);text-transform:uppercase;letter-spacing:1.2px;margin:0 0 14px;
}
.hero-intro{
  color:var(--ink-soft);margin:0 0 18px;font-size:var(--f-body);
  max-width:64ch;line-height:var(--line-body);
}
.hero-trust{color:var(--gold-600);font-size:.88rem;font-weight:var(--font-b);margin:0 0 22px;line-height:1.9;max-width:64ch;}
.hero-trust .ti{display:inline;white-space:nowrap;}
.hero-trust .sep{display:inline;margin:0 6px;color:var(--gold-300);}
/* HONEYPOT anti-bot: field tidak terlihat & tak fokus utk pengguna asli */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}
.menu-cards{display:flex;flex-direction:column;gap:var(--sp-gap);margin-top:2px;}
.menu-card{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--gold-200);
  border-radius:var(--radius);padding:var(--sp-card);
  box-shadow:var(--shadow);
  text-align:left;color:var(--ink);width:100%;
  min-height:86px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(122,85,34,.20);border-color:var(--gold-600);}
.menu-card:active{transform:scale(.985);}
.menu-card-ic{
  width:52px;height:52px;flex:none;border-radius:14px;
  background:var(--gold-100);color:var(--gold-800);
  display:flex;align-items:center;justify-content:center;
}
.menu-card-ic svg{width:26px;height:26px;}
.menu-card-txt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.menu-card-txt strong{font-size:1.05rem;font-weight:var(--font-b);line-height:1.3;color:var(--ink);}
.menu-card-txt span{color:var(--ink-soft);font-size:.87rem;line-height:1.4;}
.menu-card .chev{width:22px;height:22px;flex:none;color:var(--gold-300);}

/* ===== Form header ===== */
.form-head{margin:4px 0 18px;}
.btn-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--gold-700);
  font-weight:var(--font-b);font-size:var(--f-btn);padding:6px 0;margin-bottom:6px;
}
.btn-back svg{width:20px;height:20px;}
.page-title{font-size:var(--f-title);font-weight:var(--font-big);margin:0 0 8px;color:var(--gold-900);line-height:1.28;}
.page-sub{color:var(--ink-soft);margin:0;font-size:var(--f-body);line-height:var(--line-body);}
.page-sub b{color:var(--gold-700);}

/* ===== Form cards (seksi) ===== */
.form-card{
  background:#fff;border:1px solid var(--gold-200);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:var(--sp-gap);overflow:hidden;
}
.form-card-head{
  display:flex;align-items:center;gap:11px;
  padding:14px var(--sp-card);border-bottom:1px solid var(--gold-100);
  background:linear-gradient(180deg,#fffdf8, #fbf6ea);
}
.form-card-ic{
  width:38px;height:38px;flex:none;border-radius:11px;
  background:var(--gold-100);color:var(--gold-800);
  display:flex;align-items:center;justify-content:center;
}
.form-card-ic svg{width:21px;height:21px;}
.form-card-title{
  margin:0;font-size:var(--f-section);font-weight:var(--font-big);
  color:var(--gold-900);line-height:1.3;letter-spacing:.2px;
}
.form-card-body{padding:var(--sp-card);}
.form-card-note{color:var(--ink-soft);font-size:var(--f-body);line-height:var(--line-body);margin:0 0 14px;}

/* grid field 1 kolom mobile → 2 kolom layar besar */
.form-card-body{display:grid;grid-template-columns:1fr;gap:0 14px;align-items:start;}
.row2{display:grid;grid-template-columns:1fr;gap:14px;}
.field{margin-bottom:16px;min-width:0;}
.field.full,.form-card-body > .row2,.form-card-body > .loc-section{grid-column:1/-1;}
@media (min-width:640px){
  .form-card-body{grid-template-columns:1fr 1fr;}
  .row2{grid-template-columns:1fr 1fr;}
  .row2 .field{margin-bottom:16px;}
}
.row2 .field{margin-bottom:16px;}
.row2 .field:last-child{margin-bottom:16px;}

.field label{display:block;font-weight:var(--font-b);margin-bottom:7px;font-size:var(--f-label);color:var(--ink);}
.field .req{color:var(--danger);}
.field .opt{font-weight:400;color:var(--ink-soft);}
.field input[type=text],
.field input[type=password],
.field input[type=tel],
.field input[type=number],
.field input[type=date],
.field select,
.field textarea{
  width:100%;padding:14px 13px;font-size:var(--f-input);
  border:1.5px solid var(--field-border);border-radius:var(--field-radius);
  background:var(--field-bg);color:var(--field-text);font-family:inherit;
  min-height:50px;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.field select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2380602a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:40px;cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-600);
  box-shadow:0 0 0 3px var(--field-focus), 0 4px 12px rgba(122,85,34,.10);
}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--gold-050);opacity:.7;cursor:not-allowed;}
.field textarea{resize:vertical;min-height:70px;}
.field .hint{margin:6px 0 0;font-size:var(--f-muted);color:var(--ink-soft);}
.field .hint.err{color:var(--danger);font-weight:var(--font-b);}
.field .hint.ok{color:var(--ok);}

/* ===== Lokasi section ===== */
.loc-section{padding:14px;background:var(--gold-050);border:1.5px dashed var(--gold-300);border-radius:14px;margin-bottom:16px;}
.loc-section > label{font-weight:var(--font-b);font-size:var(--f-label);margin-bottom:7px;display:block;}
.loc-lead{margin:0 0 12px;color:var(--ink-soft);font-size:.88rem;line-height:1.5;}
.loc-options{display:flex;flex-direction:column;gap:10px;}
.loc-opt{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1.5px solid var(--gold-200);border-radius:12px;
  padding:14px;text-align:left;color:var(--ink);min-height:52px;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.loc-opt svg{width:24px;height:24px;flex:none;color:var(--gold-700);}
.loc-opt-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.loc-opt-txt strong{font-weight:var(--font-b);font-size:.98rem;}
.loc-opt-txt em{font-style:normal;color:var(--ink-soft);font-size:.82rem;}
.loc-opt:hover{border-color:var(--gold-600);transform:translateY(-1px);box-shadow:0 4px 12px rgba(122,85,34,.10);}
.loc-opt.sel{background:var(--gold-100);border-color:var(--gold-700);box-shadow:0 0 0 3px rgba(166,120,51,.18);}
.loc-opt.sel svg{color:var(--gold-800);}
@media (min-width:520px){
  .loc-options{flex-direction:row;}
  .loc-opt{flex:1;}
}

/* modal pilih lokasi dari peta */
.modal-mask{
  position:fixed;inset:0;z-index:1500;
  background:rgba(44,36,24,.72);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:.2s;
}
.modal-mask.show{opacity:1;pointer-events:auto;}
.modal{
  background:#fff;border:1px solid var(--gold-200);border-radius:16px 16px 0 0;
  width:100%;max-width:620px;max-height:88vh;overflow-y:auto;
  padding:18px 16px 22px;transform:translateY(16px);transition:.2s;
}
.modal-mask.show .modal{transform:translateY(0);}
@media(min-width:620px){
  .modal-mask{align-items:center;}
  .modal{border-radius:16px;transform:translateY(10px);}
  .modal-mask.show .modal{transform:translateY(0);}
}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.modal-head h3{margin:0;font-size:1.05rem;flex:1;color:var(--gold-900);}
.modal-close{
  background:var(--gold-050);color:var(--ink-soft);border:1px solid var(--gold-200);
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:15px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.modal-close svg{width:16px;height:16px;}
.modal-close:hover{color:var(--gold-800);border-color:var(--gold-600);}
#pickMapWrap{height:360px;border:1px solid var(--gold-200);border-radius:12px;overflow:hidden;background:var(--gold-050);margin-bottom:10px;}
#pickMap{height:100%;width:100%;}
#pickMap:focus{outline:none;}
.leaflet-container{touch-action:none;-ms-touch-action:none;overscroll-behavior:contain;}
/* Peta (dash & pilih-lokasi): 1 jari WAJIB murni menggeser peta — jangan biarkan
   browser scroll halaman ikut jalan (di iOS Safari/WebView halaman bisa ter-scroll/
   rubber-band sampai peta keluar viewport lalu "muncul lagi" saat jari dilepas).
   touch-action:none pada SHELL (bukan cuma .leaflet-container) + overscroll-behavior
   memblok scroll chaining dari dalam peta; guard JS pointer/touch di app.js yang
   memastikan. #map sendiri punya touch-action:none dgn spesifisitas id (lebih kuat). */
.map-shell,#map,.map-shell #map,#pickMapWrap,#pickMap{
  touch-action:none;-ms-touch-action:none;overscroll-behavior:contain;
}
/* scroll chaining saat gesture dimulai di peta: cegah halaman ikut ter-scroll di iOS */
.map-shell{overscroll-behavior:contain;}
#pickMapWrap{overscroll-behavior:contain;}
/* leaflet-drag-target: Leaflet menandai elemen YANG DIGESER saat drag (bisa marker,
   bisa CONTAINER peta itu sendiri bila drag mulai di area tile belum termuat).
   Rule LAMA display:none!important + pointer-events:none menyembunyikan peta utuh
   selama drag (peta "hide", dashboard muncul; balik saat lepas) — bug David.
   leaflet.css resmi TIDAK menyembunyikan apa pun; cukup cegah .leaflet-dragging
   menyeleksi teks saat mouse-drag. */
body.leaflet-dragging, body.leaflet-dragging .leaflet-drag-target{
  -webkit-user-select:none;user-select:none;
}
.pick-hint{color:var(--ink-soft);font-size:var(--f-muted);line-height:var(--line-body);margin-bottom:12px;}
.modal-actions{display:flex;gap:10px;}
.modal-actions button{
  flex:1;padding:14px;border-radius:12px;font-weight:var(--font-b);font-size:var(--f-btn);min-height:48px;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.modal-actions svg{width:16px;height:16px;}
.btn-batal{background:var(--gold-050);color:var(--ink-soft);border:1.5px solid var(--gold-200);}
.btn-batal:hover{border-color:var(--gold-600);color:var(--ink);}
.btn-pilih{background:var(--gold-700);color:#fff;border:none;box-shadow:0 5px 14px rgba(144,102,42,.3);}
.btn-pilih:hover{background:var(--gold-800);}

/* ===== Buttons ===== */
.btn-primary-full{
  width:100%;margin-top:2px;
  background:linear-gradient(135deg,var(--gold-700), var(--gold-800));color:#fff;border:none;
  padding:16px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:var(--font-big);font-size:1rem;letter-spacing:.4px;
  box-shadow:0 6px 18px rgba(144,102,42,.35);
  transition:background .15s, transform .1s, box-shadow .15s;
}
.btn-primary-full svg{width:20px;height:20px;}
.btn-primary-full:hover{box-shadow:0 8px 22px rgba(144,102,42,.42);}
.btn-primary-full:active{transform:scale(.985);}
.btn-primary-full:disabled{background:var(--gold-200);box-shadow:none;cursor:default;}
.btn-ghost-wide{
  width:100%;background:var(--gold-100);color:var(--gold-800);
  border:1.5px solid var(--gold-200);padding:14px;border-radius:14px;
  font-weight:var(--font-b);font-size:var(--f-btn);min-height:48px;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.btn-ghost-wide:hover{background:var(--gold-100);border-color:var(--gold-600);box-shadow:0 4px 12px rgba(122,85,34,.14);}
.btn-ghost-wide:active{transform:scale(.99);}
.btn-ghost-wide.ghost-second{border-color:var(--gold-600);background:#fff;margin-top:10px;}

/* ===== Result / success ===== */
.result-card{
  background:#fff;border:1px solid var(--gold-200);
  border-radius:var(--radius);padding:26px 18px;text-align:center;
  box-shadow:var(--shadow);margin:8px 0 20px;
}
.icon-result{width:60px;height:60px;color:var(--gold-700);margin-bottom:10px;}
.result-head{font-size:1.3rem;font-weight:var(--font-big);color:var(--gold-900);margin-bottom:6px;line-height:1.3;}
.result-sub{color:var(--ink-soft);margin-bottom:16px;font-size:var(--f-body);}
.no-reg{
  display:inline-block;background:var(--gold-100);
  border:1.5px solid var(--gold-600);color:var(--gold-800);
  font-size:1.3rem;font-weight:var(--font-big);letter-spacing:1px;
  padding:12px 20px;border-radius:12px;margin:10px 0;
}
.result-body .r-line{margin-top:6px;color:var(--ink-soft);font-size:var(--f-body);}
.result-body .r-line.bad {color:var(--danger);font-weight:var(--font-b);}
.result-icon{width:56px;height:56px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;}
.result-icon svg{width:56px;height:56px;}
.result-icon.ok{color:var(--ok);}
.result-icon.warn{color:var(--danger);}
.result-icon.info{color:var(--gold-700);}

/* ===== Status check ===== */
.status-form{background:#fff;border:1px solid var(--gold-200);border-radius:var(--radius);padding:var(--sp-card);box-shadow:var(--shadow);}
.status-result{margin-top:var(--sp-section);}
.s-card{background:#fff;border:1px solid var(--gold-200);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.s-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--gold-100);}
.s-row:last-child{border-bottom:none;}
.s-row span{color:var(--ink-soft);font-size:var(--f-body);}
.s-row strong{color:var(--ink);font-size:var(--f-body);}
.s-badge{
  margin:14px 16px 4px;padding:9px 12px;border-radius:10px;
  background:var(--gold-100);color:var(--gold-800);font-weight:800;font-size:var(--f-muted);
}
.s-badge[hidden]{display:none;}
.s-elig{font-weight:800;color:var(--gold-800);}
.box-empty{
  margin-top:var(--sp-section);background:var(--gold-050);
  border:1.5px dashed var(--gold-300);border-radius:var(--radius);
  padding:22px;text-align:center;color:var(--ink-soft);font-size:var(--f-body);line-height:var(--line-body);
}

/* ===== Status badges ===== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-weight:var(--font-b);font-size:.85rem;white-space:nowrap;
}
.badge svg{width:14px;height:14px;}
.badge.pending{background:#eee2c8;color:#7a5b18;}
.badge.diproses{background:#d6e4f5;color:#1b4d8f;}
.badge.divertek{background:#e6d9f0;color:#6a31a0;}
.badge.selesai{background:#d4eedd;color:#1e6a38;}
.badge.ditolak{background:#f5d8d6;color:#9c241c;}

/* ===== Admin ===== */
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.admin-head .page-title{margin:0;}
#loginStatus{margin-top:12px;}

.summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:2px 0 var(--sp-section);}
.sum-stat{background:#fff;border:1px solid var(--gold-200);border-radius:12px;padding:12px;text-align:center;box-shadow:var(--shadow);transition:transform .1s, box-shadow .15s;}
.sum-stat .n{font-size:1.4rem;font-weight:var(--font-big);color:var(--gold-800);line-height:1.1;}
.sum-stat .l{font-size:.8rem;color:var(--ink-soft);}
.sum-stat.total{grid-column:1/-1;background:linear-gradient(135deg,var(--gold-700),var(--gold-800));border-color:var(--gold-700);}
.sum-stat.total .n,.sum-stat.total .l{color:#fff;}
.sum-stat:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(122,85,34,.14);}

.filters{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp-section);}
.filters select,.filters input{
  padding:12px 13px;font-size:var(--f-btn);border:1.5px solid var(--field-border);
  border-radius:var(--field-radius);background:var(--field-bg);font-family:inherit;color:var(--field-text);
  min-height:46px;
}
.filters select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2380602a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:36px;cursor:pointer;
}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--gold-600);box-shadow:0 0 0 3px var(--field-focus);}

.backlog-list{display:flex;flex-direction:column;gap:var(--sp-gap);}
.b-card{background:#fff;border:1px solid var(--gold-200);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-card);overflow:hidden;transition:box-shadow .15s, border-color .15s;}
.b-card:hover{box-shadow:0 8px 22px rgba(122,85,34,.16);border-color:var(--gold-600);}
.b-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.b-no{font-weight:var(--font-big);color:var(--gold-800);font-size:1rem;}
.b-name{font-weight:var(--font-b);margin-top:2px;font-size:var(--f-body);}
/* Kartu admin: thumbnail foto kondisi rumah kotak 1:1 di KIRI + info di kanan (v=33) */
.b-main{display:flex;gap:12px;align-items:stretch;margin-top:10px;min-width:0;}
.b-main .b-thumb{
  flex:none;width:92px;height:92px;aspect-ratio:1/1;object-fit:cover;
  border-radius:10px;border:1.5px solid var(--gold-200);background:var(--gold-050);
  cursor:zoom-in;align-self:flex-start;
}
.b-main .b-thumb-empty{
  display:flex;align-items:center;justify-content:center;color:var(--gold-300);
}
.b-main .b-thumb-empty svg{width:30px;height:30px;}
.b-main .b-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center;}
.b-body{display:flex;flex-direction:column;gap:6px;}
.b-line{display:flex;gap:8px;align-items:baseline;font-size:var(--f-body);color:var(--ink-soft);}
.b-line svg{width:15px;height:15px;flex:none;color:var(--gold-700);align-self:flex-start;margin-top:2px;}
.b-line b{color:var(--ink);font-weight:var(--font-b);word-break:break-word;}
.b-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--gold-100);flex-wrap:wrap;}
.b-status-label{font-size:.78rem;color:var(--ink-soft);}
.b-foot select{
  padding:10px 12px;font-size:.95rem;border:1.5px solid var(--field-border);
  border-radius:10px;background:var(--gold-050);font-family:inherit;color:var(--ink);font-weight:var(--font-b);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2380602a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  padding-right:32px;cursor:pointer;min-height:40px;
}
.b-date{font-size:.8rem;color:var(--ink-soft);}
.empty-list{text-align:center;color:var(--ink-soft);padding:30px 10px;background:var(--gold-050);border:1.5px dashed var(--gold-300);border-radius:var(--radius);}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;
  font-weight:var(--font-b);font-size:var(--f-btn);box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:200;
  max-width:90vw;text-align:center;
}
.toast.err{background:var(--danger);}
.toast.ok{background:var(--ok);}

@media (min-width:520px){
  .summary-row{grid-template-columns:repeat(6,1fr);}
  .sum-stat.total{grid-column:auto;}
  .filters{flex-direction:row;}
  .filters select{min-width:180px;}
  .filters input{flex:1;}
}

/* ===== Radio pills ===== */
.radio-row{display:flex;gap:var(--sp-gap);}
.radio-pill{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--gold-200);border-radius:12px;padding:13px;min-height:50px;
  background:#fff;cursor:pointer;font-weight:var(--font-b);color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.radio-pill input{width:18px;height:18px;accent-color:var(--gold-700);}
.radio-pill:has(input:checked){background:var(--gold-100);border-color:var(--gold-700);box-shadow:0 0 0 3px var(--field-focus);}

/* ===== Autocomplete desa ===== */
.autocomplete{position:relative;}
.ac-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:900;
  background:#fff;border:1.5px solid var(--gold-200);border-radius:12px;
  max-height:280px;overflow-y:auto;box-shadow:var(--shadow);
}
.ac-item{
  padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--gold-100);
  font-size:.95rem;
}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.active{background:var(--gold-100);}
.ac-item b{color:var(--gold-800);}
.ac-item small{color:var(--ink-soft);display:block;font-size:.82rem;}
.ac-empty{padding:14px;color:var(--ink-soft);text-align:center;}

/* ===== Custom dropdown (Pekerjaan/Tanah/Bukti) ===== */
.dd{position:relative;}
.dd-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 13px;font-size:var(--f-input);text-align:left;font-family:inherit;
  border:1.5px solid var(--field-border);border-radius:var(--field-radius);
  background:var(--field-bg);color:var(--field-text);min-height:50px;cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.dd-btn:hover{border-color:var(--gold-600);}
.dd-btn:focus{outline:none;}
.dd-btn.open{border-color:var(--gold-600);box-shadow:0 0 0 3px var(--field-focus);}
.dd-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--field-text);}
.dd-val.ph{color:#a79c88;}
.dd-chev{width:18px;height:18px;flex:none;color:var(--gold-700);transition:transform .15s;}
.dd-btn.open .dd-chev{transform:rotate(180deg);}
.dd-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:900;margin:0;padding:0;list-style:none;
  background:#fff;border:1.5px solid var(--gold-200);border-radius:12px;
  max-height:280px;overflow-y:auto;box-shadow:var(--shadow);
}
.dd-item{
  padding:13px 14px;cursor:pointer;border-bottom:1px solid var(--gold-100);
  font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:10px;
  color:var(--ink);user-select:none;
}
.dd-item:last-child{border-bottom:none;}
.dd-item:hover,.dd-item.active{background:var(--gold-100);}
.dd-item.sel{font-weight:var(--font-b);color:var(--gold-800);}
.dd-item.sel::after{content:'✓';color:var(--gold-700);font-weight:var(--font-big);}

/* ===== Upload foto ===== */
.upload-group{
  background:var(--gold-050);border:1.5px dashed var(--gold-300);
  border-radius:14px;padding:14px;margin-bottom:14px;
  transition:border-color .15s, background .15s;
}
.upload-group:last-child{margin-bottom:0;}
.ug-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px;}
.ug-head span{font-weight:var(--font-b);font-size:var(--f-label);color:var(--ink);}
.ug-head em{font-style:normal;color:var(--ink-soft);font-size:.78rem;}
.ug-head .req{color:var(--danger);}
.upload-group.photo-missing{border-color:var(--danger);background:rgba(156,36,28,.04);}
.upload-group.photo-missing .ug-head em{color:var(--danger);font-weight:var(--font-b);}
/* Lokasi wajib: seksi "Pilih Lokasi Rumah" ditandai merah saat dicoba kirim tanpa koordinat */
.loc-section.loc-missing{border-color:var(--danger);background:rgba(156,36,28,.05);}
.loc-section.loc-missing > label{color:var(--danger);}
.loc-section.loc-missing .loc-lead{color:var(--danger);}
.ug-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.thumb{
  position:relative;width:72px;height:72px;border-radius:10px;
  overflow:hidden;border:1.5px solid var(--gold-200);background:#fff;
  box-shadow:0 2px 6px rgba(122,85,34,.12);
}
.thumb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block;}
.thumb .thumb-rm{
  position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(44,36,24,.78);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.thumb .thumb-rm svg{width:12px;height:12px;}
.btn-pick{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;border-radius:12px;border:1.5px solid var(--gold-300);
  background:#fff;color:var(--gold-800);font-weight:var(--font-b);font-size:var(--f-btn);cursor:pointer;min-height:47px;
  transition:border-color .15s, background .15s;
}
.btn-pick svg{width:17px;height:17px;color:var(--gold-700);}
.btn-pick:hover{border-color:var(--gold-600);background:var(--gold-100);}

/* Baris aksi "Pilih Foto" + "Kamera" berdampingan (mobile-friendly, lebar sama) */
.ug-actions{display:flex;gap:10px;flex-wrap:wrap;}
.ug-actions .btn-pick{flex:1;width:auto;min-width:0;padding:12px 10px;}
.ug-actions .btn-cam{
  flex:1;width:auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 10px;border-radius:12px;border:1.5px solid var(--gold-600);
  background:var(--gold-100);color:var(--gold-800);font-weight:var(--font-b);font-size:var(--f-btn);cursor:pointer;min-height:47px;
  transition:border-color .15s, background .15s;
}
.ug-actions .btn-cam svg{width:17px;height:17px;color:var(--gold-700);}
.ug-actions .btn-cam:hover{border-color:var(--gold-700);background:var(--gold-200);}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;flex-direction:column;padding:14px;
  touch-action:pan-y;
}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:8px;}
.lb-close{
  position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lb-cap{color:#fff;margin-top:10px;font-size:.95rem;text-align:center;}
/* Tombol navigasi prev/next lightbox (galeri): gold tone, sisi kiri/kanan, mudah disentuh */
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s;
}
.lb-nav:hover{background:var(--gold-600);}
.lb-nav.lb-prev{left:12px;}
.lb-nav.lb-next{right:12px;}
.lb-nav svg{width:26px;height:26px;}
@media (max-width:600px){
  .lb-nav{top:auto;bottom:calc(14px + 44px);transform:none;background:rgba(255,255,255,.18);}
  .lb-nav.lb-prev{left:calc(50% - 66px);}
  .lb-nav.lb-next{right:auto;left:calc(50% + 18px);}
}

/* ===== Admin card media ===== */
.b-media{margin-top:12px;padding-top:12px;border-top:1px solid var(--gold-100);}
.b-media-label{font-size:.78rem;color:var(--ink-soft);margin-bottom:8px;font-weight:var(--font-b);}
.b-media-group{margin-bottom:10px;}
.b-media-group .lbl{font-size:.8rem;font-weight:var(--font-b);color:var(--gold-800);margin-bottom:6px;}
.b-media-thumbs{display:flex;flex-wrap:wrap;gap:8px;}
.b-media-thumbs img{
  width:60px;height:60px;object-fit:cover;border-radius:8px;
  border:1.5px solid var(--gold-200);cursor:zoom-in;background:var(--gold-050);
}
.b-media-none{color:var(--ink-soft);font-size:.82rem;}
/* thumb foto admin (kartu & modal detail) bisa difokus (tabindex=0) -> lightbox via klik/Enter */
.b-media-thumbs img[data-lb="1"]:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px;}

/* ===== Form dikunci saat NIK duplikat ===== */
#reportForm.blocked{opacity:.82;}

/* ===== Panel blokir NIK duplikat ===== */
.nik-block{margin:26px 0 6px;}
.nik-block-card{
  background:#fff;border:1.5px solid var(--danger);border-radius:var(--radius);
  padding:24px var(--sp-card);text-align:center;box-shadow:0 10px 30px rgba(179,38,30,.18);
}
.nik-block-icon{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  background:var(--gold-100);color:var(--danger);
  display:flex;align-items:center;justify-content:center;
}
.nik-block-icon svg{width:30px;height:30px;}
.nik-block-title{font-size:1.3rem;font-weight:var(--font-big);color:var(--gold-900);margin:0 0 10px;line-height:1.3;}
.nik-block-msg{color:var(--ink-soft);font-size:var(--f-body);line-height:var(--line-body);margin:0 0 20px;}
.nik-block-msg b{color:var(--ink);}
.nik-block-actions{display:flex;flex-direction:column;gap:10px;}
.nik-block-actions button{
  width:100%;padding:14px;border-radius:14px;font-weight:var(--font-b);font-size:var(--f-btn);min-height:50px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.nik-block-actions svg{width:18px;height:18px;}
.btn-nik-lepas{background:var(--gold-100);color:var(--gold-800);border:1.5px solid var(--gold-200);}
.btn-nik-lepas:hover{border-color:var(--gold-600);box-shadow:0 4px 12px rgba(122,85,34,.14);}
.btn-nik-home{background:linear-gradient(135deg,var(--gold-700),var(--gold-800));color:#fff;border:none;box-shadow:0 6px 18px rgba(144,102,42,.35);}
.btn-nik-home:hover{box-shadow:0 8px 22px rgba(144,102,42,.42);}
.nik-block-actions button:active{transform:scale(.985);}
@media (min-width:520px){
  .nik-block-actions{flex-direction:row;}
}

/* ===== Footer ===== */
/* Footer normal = full-width (view non-home). */
.site-footer{
  background:linear-gradient(180deg,var(--gold-800), var(--gold-900));
  color:#fbf3e3;margin:0 auto;padding:16px 16px 20px;
}
/* HOME: footer DI DALAM frame di dasar (flex mt-auto) — full-width selebar frame, sudut
   bawah ikut dipotong radius frame via overflow:hidden. Footer global (non-home) disembunyikan
   saat home karena home kini punya footer sendiri di dalam frame. */
body.home .site-footer{
  width:100%;margin:auto 0 0;border-radius:0;box-shadow:none;
}
body.home .site-footer:not(.home-footer){display:none;}
.footer-inner{max-width:var(--maxw);margin:0 auto;}
.footer-line{margin:0 0 5px;font-size:.82rem;color:#f3e9d3;}
.footer-line strong{font-weight:var(--font-big);color:#fbf3e3;}
.footer-note{
  margin:0;font-size:.76rem;color:rgba(251,243,227,.78);line-height:1.5;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.16);
  font-style:italic;
}

/* ===== Admin v2 (?v=26): ringkasan berprogres, waktu, kabupaten, chips, detail modal ===== */
.summary-row{margin:2px 0 10px;}
.sum-stat.stat-click{cursor:pointer;}
.sum-stat.stat-click:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px;}
.sum-stat.stat-active{border-color:var(--gold-700);box-shadow:0 0 0 2px rgba(166,120,51,.28);}
.sum-stat .sum-bar{
  height:5px;border-radius:99px;background:var(--gold-100);
  overflow:hidden;margin-top:8px;
}
.sum-stat .sum-bar-fill{height:100%;border-radius:99px;background:var(--gold-600);min-width:2px;transition:width .3s ease;}
.sum-bar-fill.pending{background:#b98a1e;}
.sum-bar-fill.diproses{background:#3d6fb2;}
.sum-bar-fill.divertek{background:#8a4fb0;}
.sum-bar-fill.selesai{background:#2e9153;}
.sum-bar-fill.ditolak{background:#c0443b;}
.sum-stat .sum-pct{font-size:.72rem;color:var(--ink-soft);margin-top:3px;font-weight:var(--font-b);}

/* chips waktu (Hari ini / 3 hari / 7 hari) */
.time-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.time-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--gold-200);border-radius:999px;
  padding:8px 14px;min-height:38px;
  font-family:inherit;font-size:.85rem;color:var(--ink-soft);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.time-chip b{color:var(--gold-800);font-weight:var(--font-big);font-size:.95rem;}
.time-chip:hover{border-color:var(--gold-600);background:var(--gold-050);}
.time-chip.active{
  background:var(--gold-100);border-color:var(--gold-700);color:var(--gold-800);
  box-shadow:0 0 0 2px rgba(166,120,51,.22);
}

/* breakdown per kabupaten */
.kab-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.kab-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--gold-200);border-radius:999px;
  padding:8px 10px 8px 14px;min-height:38px;
  font-family:inherit;font-size:.85rem;color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.kab-chip .kab-nm{white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.kab-chip .kab-badge{
  background:var(--gold-100);color:var(--gold-800);
  font-weight:var(--font-big);font-size:.78rem;
  border-radius:999px;padding:2px 9px;min-width:24px;text-align:center;
}
.kab-chip:hover{border-color:var(--gold-600);background:var(--gold-050);}
.kab-chip.active{
  background:var(--gold-100);border-color:var(--gold-700);
  box-shadow:0 0 0 2px rgba(166,120,51,.22);
}
.kab-chip.active .kab-badge{background:var(--gold-700);color:#fff;}

/* chips filter aktif + jumlah hasil */
.filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 var(--sp-section);}
.chip-count{font-size:.8rem;color:var(--ink-soft);font-weight:var(--font-b);}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-100);border:1.5px solid var(--gold-300);border-radius:999px;
  padding:5px 11px;font-family:inherit;font-size:.8rem;font-weight:var(--font-b);color:var(--gold-800);
  transition:background .15s, border-color .15s;
}
.chip:hover{border-color:var(--gold-700);background:var(--gold-200);}
.chip svg{color:var(--gold-800);}

/* baris tombol unduh data (CSV / media) di dashboard admin */
.export-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 var(--sp-section);}
.export-row .btn-ghost.sm{flex:1 1 auto;justify-content:center;}
.export-row .btn-ghost.sm:disabled{opacity:.6;cursor:default;}
.export-note{font-size:.74rem;color:var(--ink-soft);width:100%;text-align:center;}
@media (min-width:480px){
  .export-row .btn-ghost.sm{flex:0 0 auto;}
  .export-note{width:auto;text-align:left;margin-left:2px;}
}

/* ===== Peta sebaran usulan (dashboard admin) — gaya airbersih ===== */
.map-card{
  background:#fff;border:1px solid var(--gold-200);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;margin:-4px 0 var(--sp-section);
}
.map-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,#fffdf8,#fbf6ea);
  border-bottom:1px solid var(--gold-100);
}
.map-head .mh-title{
  display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;
  font-weight:var(--font-big);color:var(--gold-900);font-size:.95rem;letter-spacing:.2px;
}
.map-head .mh-title svg{width:17px;height:17px;flex:none;color:var(--gold-700);}
.map-head .mh-count{
  font-size:.78rem;font-weight:var(--font-b);color:var(--gold-800);
  background:var(--gold-100);border-radius:999px;padding:2px 10px;white-space:nowrap;
}
.map-head .mh-chev{width:18px;height:18px;flex:none;color:var(--gold-700);transition:transform .2s;}
.map-head:focus-visible{outline:2px solid var(--gold-600);outline-offset:-2px;}
.map-card.collapsed .map-head .mh-chev{transform:rotate(180deg);}
.map-shell{position:relative;border-bottom:1px solid var(--gold-100);}
.map-card.collapsed .map-shell,.map-card.collapsed .map-legend{display:none;}
#map{height:340px;background:#dfe4de;width:100%;}
.map-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  padding:10px 12px 12px;font-size:11px;
}
.map-legend .lg-item{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-050);border:1px solid var(--gold-200);
  border-radius:9px;padding:5px 9px;color:var(--ink-soft);
}
.map-legend .lg-item b{color:var(--ink);}
.map-legend .lg-dot{width:10px;height:10px;border-radius:50%;flex:none;}

/* marker status (divIcon) — ala airbersih: alive = pejal+pulse, dead = redup */
.sig-marker{background:transparent;border:none;}
.sig-core{
  position:relative;width:22px;height:22px;border-radius:50%;
  background:var(--sc,#64748b);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.sig-marker.alive .sig-core::before,
.sig-marker.alive .sig-core::after{content:"";position:absolute;border-radius:50%;z-index:-1;}
.sig-marker.alive .sig-core::before{inset:-6px;background:var(--sc,#64748b);opacity:.5;animation:sigPing 1.5s ease-out infinite;}
.sig-marker.alive .sig-core::after{inset:-10px;border:2.5px solid var(--sc,#64748b);opacity:0;animation:sigRing 1.5s ease-out infinite;}
@keyframes sigPing{0%{transform:scale(.7);opacity:.6}70%,100%{transform:scale(2);opacity:0}}
@keyframes sigRing{0%{transform:scale(.8);opacity:.8}70%,100%{transform:scale(2.3);opacity:0}}
.sig-marker.dead .sig-core{opacity:.5;box-shadow:none;}

/* cluster override: tone gold (bukan default hijau/oranye markercluster) */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background-color:rgba(166,120,51,.55);}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
  background-color:rgba(122,85,34,.92);color:#fff;font-weight:var(--font-b);
  text-shadow:0 1px 2px rgba(0,0,0,.5);font-family:'Lato',sans-serif;
}
.marker-cluster{font-family:'Lato',sans-serif;}

/* popup peta */
.pop-title{font-weight:var(--font-big);font-size:13px;margin-bottom:6px;letter-spacing:.2px;color:var(--gold-900);}
.pop-row{display:flex;gap:7px;align-items:flex-start;margin:3px 0;font-size:12.5px;color:var(--ink);}
.pop-row svg{width:13px;height:13px;flex:none;color:var(--gold-700);margin-top:2px;}
.pop-row b{color:var(--ink);}
/* tombol "Detail lengkap" di popup -> buka modal detail usulan */
.pop-detail{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin-top:8px;padding:9px 10px;border-radius:9px;border:1.5px solid var(--gold-300);
  background:var(--gold-100);color:var(--gold-800);font-weight:var(--font-b);font-size:.85rem;
  cursor:pointer;transition:background .15s, border-color .15s;font-family:inherit;
}
.pop-detail:hover{background:var(--gold-200);border-color:var(--gold-600);}
.pop-detail:active{transform:scale(.98);}
.pop-detail svg{flex:none;}

/* Modal detail HARUS di atas SEMUA layer peta: Leaflet pane tertinggi = .leaflet-popup z-700,
   fullscreen peta .map-shell.fs z-3000 -> modal z-4000, lightbox (foto) z-5000 di atasnya
   (z-index .lightbox sendiri sudah dinaikkan di seksi Lightbox). */
#modalDetail{z-index:4000;}

/* tombol fullscreen peta */
.map-fs-btn{
  position:absolute;top:12px;right:12px;z-index:1200;
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.92);border:1px solid var(--gold-200);color:var(--gold-800);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;
}
.map-fs-btn:hover{border-color:var(--gold-600);}
.map-fs-btn svg{width:17px;height:17px;}
.map-fs-btn .ic-min{display:none;}
.map-fs-btn.fs .ic-max{display:none;}
.map-fs-btn.fs .ic-min{display:block;}
.map-shell.fs{
  position:fixed;inset:0;z-index:3000;width:100vw;height:100vh;
  border-radius:0;border:0;margin:0;overflow:hidden;
}
.map-shell.fs #map{width:100vw;height:100vh;}
@media (max-width:640px){ #map{height:280px;} }

/* kartu ringkas: hint "ketuk untuk detail" */
.b-more{font-size:.8rem;color:var(--gold-700);font-weight:var(--font-b);margin-top:2px;}
.b-card.b-click{cursor:pointer;}
#filterKab{min-width:170px;}

/* ===== Modal detail usulan (admin) ===== */
.modal-detail{max-width:640px;}
#detailBody{padding:2px 2px 4px;}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 0 12px;border-bottom:1px solid var(--gold-100);margin-bottom:10px;}
.d-head > div:first-child{flex:1;min-width:0;}
.d-no{font-weight:var(--font-big);color:var(--gold-800);font-size:1.02rem;}
.d-name{font-weight:var(--font-b);font-size:var(--f-body);margin-top:2px;}
.d-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
.d-act{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border-radius:999px;padding:9px 15px;min-height:38px;
  font-weight:var(--font-b);font-size:.86rem;
  transition:background .15s, box-shadow .15s, transform .1s;
}
.d-act:active{transform:scale(.97);}
.d-act.d-wa{background:#1fa855;color:#fff;box-shadow:0 4px 12px rgba(31,168,85,.3);}
.d-act.d-wa:hover{background:#188a45;}
.d-act.d-tel{background:var(--gold-100);color:var(--gold-800);border:1.5px solid var(--gold-300);}
.d-act.d-tel:hover{border-color:var(--gold-600);}
.d-act.d-map{background:var(--gold-700);color:#fff;box-shadow:0 4px 12px rgba(144,102,42,.28);}
.d-act.d-map:hover{background:var(--gold-800);}
.d-rows{display:flex;flex-direction:column;}
.d-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--gold-100);font-size:var(--f-body);}
.d-row:last-child{border-bottom:none;}
.d-lbl{flex:none;width:44%;color:var(--ink-soft);font-size:.84rem;padding-top:1px;}
.d-val{flex:1;min-width:0;color:var(--ink);font-weight:var(--font-b);word-break:break-word;line-height:1.45;}
.d-val a{color:var(--gold-700);text-decoration:underline;}
.d-sub{margin:14px 0 6px;font-size:.8rem;font-weight:var(--font-big);color:var(--gold-800);text-transform:uppercase;letter-spacing:.6px;}
.d-alasan{
  background:var(--gold-050);border:1.5px dashed var(--gold-300);border-radius:12px;
  padding:12px 14px;font-size:var(--f-body);color:var(--ink);line-height:var(--line-body);
  white-space:pre-wrap;word-break:break-word;
}
.d-media{margin-top:14px;padding-top:12px;border-top:1px solid var(--gold-100);}
.d-media .b-media-label{font-size:.78rem;color:var(--ink-soft);margin-bottom:8px;font-weight:var(--font-b);}
.d-media .b-media-group{margin-bottom:10px;}
.d-media .b-media-group .lbl{font-size:.8rem;font-weight:var(--font-b);color:var(--gold-800);margin-bottom:6px;}
/* FOTO kolase 2 kolom: rule ini TIDAK menyetel width/height (ikut override grid di bawah file). */

/* desktop: modal detail terpusat (sudah lewat @media(min-width:620px) umum), rapikan jarak */
@media (min-width:620px){
  #detailBody{padding:2px 6px 4px;}
}
@media (max-width:520px){
  .d-lbl{width:46%;}
  .d-row{flex-direction:column;gap:2px;padding:10px 0;}
  .d-lbl{width:auto;}
}

/* ===== Modal detail (?v=29): header PIN + tombol X MENGAMBANG pojok kanan atas =====
   .modal-detail jadi flex column: head tidak ikut scroll (selalu terlihat), body scroll sendiri.
   Tombol X absolute di head -> mengambang di pojok kanan atas, di atas konten, 40px mudah disentuh. */
.modal-detail{padding:0;display:flex;flex-direction:column;overflow:hidden;}
.modal-detail .modal-head{
  position:relative;flex:none;
  margin:0;padding:14px 16px 12px;
  border-bottom:1px solid var(--gold-100);
  background:linear-gradient(180deg,#fffdf8,#fbf6ea);
}
.modal-detail .modal-head h3{padding-right:48px;}
.modal-detail .modal-close{
  position:absolute;top:8px;right:10px;z-index:5;
  width:40px;height:40px;border-radius:50%;
  background:#fff;color:var(--ink-soft);
  border:1.5px solid var(--gold-200);
  box-shadow:0 3px 10px rgba(44,36,24,.22);
  transition:background .15s, border-color .15s, transform .1s;
}
.modal-detail .modal-close svg{width:18px;height:18px;}
.modal-detail .modal-close:hover{color:var(--gold-800);border-color:var(--gold-600);background:var(--gold-050);}
.modal-detail .modal-close:active{transform:scale(.94);}
#detailBody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 16px;}
@media (min-width:620px){
  #detailBody{padding:14px 18px 18px;}
}

/* ===== FOTO KOLASE (?v=29, dirapikan v=32) =====
   - Kartu admin (.b-media-thumbs): grid 2 kolom rapat (tinggi 150px).
   - Modal detail (.d-media .b-media-thumbs): grup 1 foto = FULL-WIDTH besar (:only-child);
     grup multi-foto = 2 kolom sebelahan. Tinggi proporsional 4:3 (aspect-ratio +
     object-fit cover) supaya dokumen KK/KTP/sertifikat tidak gepeng/kusut.
   Tetap klik->lightbox (delegasi img[data-lb=1] tak berubah). */
.b-media-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.b-media-thumbs img{
  width:100%;height:150px;min-width:0;object-fit:cover;
  border-radius:10px;box-shadow:0 2px 6px rgba(122,85,34,.12);
  border:1.5px solid var(--gold-200);cursor:zoom-in;background:var(--gold-050);
}
.d-media .b-media-thumbs{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.d-media .b-media-thumbs img{
  width:100%;min-width:0;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;box-shadow:0 2px 6px rgba(122,85,34,.12);
  border:1.5px solid var(--gold-200);cursor:zoom-in;background:var(--gold-050);
}
/* grup berisi SATU foto (kondisi/kk/ktp/sertifikat/calon umumnya 1): span 2 kolom = full-width besar */
.d-media .b-media-thumbs img:only-child{grid-column:1 / -1;}