/* ════════════════════════════════════════════════════════════════════
   WebGIS Kutai Barat — main.css
   Tema: GELAP ELEGAN · Modern Minimalis · 3 variasi (Tweaks)
   Default: data-theme="carbon" (Carbon Mint)
   Lain:    data-theme="cobalt" (Midnight Cobalt)
            data-theme="graphite" (Graphite Sage)
   Kelas semua persis sama dengan PANDUAN-DESAIN.md.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ────────────────────────────────────────────────────────────────────
   VARIABEL — Carbon Mint (default)
   ──────────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="carbon"]{
  --bg:#08090b;
  --s1:#0e1014;
  --s2:#14171c;
  --s3:#1b1f26;
  --b1:#23272f;
  --b2:#2f343e;
  --ink:#e9edf1;
  --ink2:#b4bcc7;
  --muted:#6c7682;
  --dim:#444b56;

  --accent:#d49a3b;
  --accent2:#f0b94c;
  --green:#4ade80;
  --green2:#86efac;
  --teal:#2dd4bf;
  --blue:#60a5fa;
  --red:#f87171;

  --green-bg-08:rgba(74,222,128,.08);
  --green-bg-12:rgba(74,222,128,.12);
  --green-bg-18:rgba(74,222,128,.18);
  --accent-bg-10:rgba(240,185,76,.10);
  --accent-bg-18:rgba(240,185,76,.18);
  --blue-bg-10:rgba(96,165,250,.10);
  --blue-bg-18:rgba(96,165,250,.18);

  --f:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-xs:6px;
  --r-sm:10px;
  --r:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-pill:999px;

  --sh-sm:0 1px 2px rgba(0,0,0,.45);
  --sh-md:0 6px 20px rgba(0,0,0,.42);
  --sh-lg:0 14px 44px rgba(0,0,0,.55);
  --sh-ring:inset 0 0 0 1px rgba(255,255,255,.03);

  --map-bg:#06070a;
}

/* Midnight Cobalt — slate kebiruan, cinematic */
:root[data-theme="cobalt"]{
  --bg:#070912;
  --s1:#0c1018;
  --s2:#121828;
  --s3:#1a2236;
  --b1:#222a3f;
  --b2:#2e3853;
  --ink:#e3eaf7;
  --ink2:#aebbd1;
  --muted:#6a7791;
  --dim:#3d4863;

  --accent:#fbbf24;
  --accent2:#fcd34d;
  --green:#34d399;
  --green2:#6ee7b7;
  --teal:#22d3ee;
  --blue:#38bdf8;
  --red:#fb7185;

  --green-bg-08:rgba(52,211,153,.08);
  --green-bg-12:rgba(52,211,153,.14);
  --green-bg-18:rgba(52,211,153,.20);
  --accent-bg-10:rgba(252,211,77,.10);
  --accent-bg-18:rgba(252,211,77,.18);
  --blue-bg-10:rgba(56,189,248,.10);
  --blue-bg-18:rgba(56,189,248,.20);

  --map-bg:#040611;
}

/* Graphite Sage — refined editorial */
:root[data-theme="graphite"]{
  --bg:#0a0b0a;
  --s1:#121413;
  --s2:#181b19;
  --s3:#1f2320;
  --b1:#2a2e2b;
  --b2:#363b37;
  --ink:#e7e9e2;
  --ink2:#b3b8af;
  --muted:#737972;
  --dim:#494f4a;

  --accent:#d9a55c;
  --accent2:#e6bf7c;
  --green:#7dd3a8;
  --green2:#a7e6c4;
  --teal:#5eb8a4;
  --blue:#7ba8d4;
  --red:#dc8b8b;

  --green-bg-08:rgba(125,211,168,.10);
  --green-bg-12:rgba(125,211,168,.14);
  --green-bg-18:rgba(125,211,168,.22);
  --accent-bg-10:rgba(217,165,92,.10);
  --accent-bg-18:rgba(217,165,92,.20);
  --blue-bg-10:rgba(123,168,212,.10);
  --blue-bg-18:rgba(123,168,212,.22);

  --map-bg:#070806;
}

/* ────────────────────────────────────────────────────────────────────
   BASE
   ──────────────────────────────────────────────────────────────────── */
html,body{
  height:100%;overflow:hidden;
  font-family:var(--f);
  background:var(--bg);color:var(--ink);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b1);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--b2)}

button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
a{color:inherit;text-decoration:none}

::selection{background:var(--green-bg-18);color:var(--ink)}

/* ────────────────────────────────────────────────────────────────────
   LAYOUT
   ──────────────────────────────────────────────────────────────────── */
.app{
  display:grid;
  grid-template-rows:60px 1fr;
  grid-template-columns:1fr 420px;
  height:100vh;gap:1px;
  background:var(--b1);
}

/* ────────────────────────────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────────────────────────────── */
header{
  grid-column:1/-1;position:relative;
  background:var(--s1);
  border-bottom:1px solid var(--b1);
  padding:0 22px;
  display:flex;align-items:center;gap:14px;
  z-index:50;
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0,var(--green) 30%,var(--accent) 70%,transparent 100%);
  opacity:.5;pointer-events:none;
}
.logo{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--teal) 0%,var(--green) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#06120c;font-weight:700;flex-shrink:0;
  box-shadow:0 4px 16px -2px rgba(74,222,128,.25),inset 0 0 0 1px rgba(255,255,255,.12);
}
.title{
  font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
  line-height:1.2;
}
.title b{color:var(--green2);font-weight:700}
.title small{display:block;font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}

.h-search{flex:1;max-width:380px;position:relative;margin-left:12px}
.h-search input{
  width:100%;height:36px;
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:0 14px 0 36px;
  color:var(--ink);font-size:12.5px;font-family:var(--f);
  outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
}
.h-search input::placeholder{color:var(--muted)}
.h-search input:focus{
  border-color:var(--green);
  background:var(--s1);
  box-shadow:0 0 0 4px var(--green-bg-08);
}
.h-search .si,
.ps-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;pointer-events:none;
}

/* Header right */
.hright{margin-left:auto;display:flex;align-items:center;gap:10px}
.hbtn{
  padding:7px 13px;border-radius:var(--r-sm);
  font-size:12px;font-weight:600;letter-spacing:-.005em;
  background:var(--accent-bg-10);
  border:1px solid var(--accent-bg-18);
  color:var(--accent2);
  display:inline-flex;align-items:center;gap:6px;
}
.hbtn:hover{background:var(--accent-bg-18);transform:translateY(-1px)}
.hbtn:active{transform:translateY(0)}

.live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-family:var(--fm);text-transform:uppercase;letter-spacing:.06em}
.live-dot,.ldot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 var(--green);
  animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 var(--green-bg-18)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Search dropdown */
.search-dropdown,.sdrop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--s2);
  border:1px solid var(--b2);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  z-index:2000;display:none;max-height:320px;overflow-y:auto;
}
.search-dropdown.show,.sdrop.show{display:block}
.sd-item,.sdi{
  padding:10px 14px;cursor:pointer;
  display:flex;align-items:center;gap:11px;
  border-bottom:1px solid var(--b1);
  transition:background .12s;font-size:12.5px;
}
.sd-item:last-child,.sdi:last-child{border:none}
.sd-item:hover,.sdi:hover{background:var(--s3)}
.si-icon,.sdi-ico{
  width:28px;height:28px;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.si-icon.kec,.sdi-ico.kec{background:var(--green-bg-12);color:var(--green2)}
.si-icon.kamp,.sdi-ico.kamp{background:var(--accent-bg-10);color:var(--accent2)}
.si-name,.sdi-name{font-weight:600;color:var(--ink)}
.si-sub,.sdi-sub{font-size:11px;color:var(--muted);margin-top:1px}

/* ────────────────────────────────────────────────────────────────────
   PETA
   ──────────────────────────────────────────────────────────────────── */
.map-wrap{position:relative;overflow:hidden;background:var(--map-bg)}
#map{width:100%;height:100%}

/* Filter buttons di atas peta */
.filter-bar{
  position:absolute;top:14px;left:14px;z-index:1000;
  display:flex;gap:6px;flex-wrap:wrap;
}
.filter-btn{
  padding:7px 14px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;letter-spacing:-.005em;
  font-family:var(--f);cursor:pointer;
  border:1px solid var(--b2);
  background:rgba(14,16,20,.85);color:var(--ink2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:all .18s ease;white-space:nowrap;
  box-shadow:var(--sh-sm);
}
.filter-btn:hover:not(.active){
  border-color:var(--green);color:var(--green2);
  transform:translateY(-1px);
}
.filter-btn.active{
  background:var(--green);border-color:var(--green);color:#06120c;
  box-shadow:0 6px 16px -4px var(--green-bg-18);
}

/* Layer toggle */
.layer-toggle{
  position:absolute;top:14px;right:14px;z-index:1000;
  background:rgba(14,16,20,.85);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:12px 14px;min-width:170px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-md);
  animation:slideInRight .35s ease both .1s;
}
.lt-title{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-weight:700;
  font-family:var(--fm);
}
.lt-row{
  display:flex;align-items:center;gap:9px;
  padding:5px 0;
  cursor:pointer;font-size:12px;color:var(--ink2);
  transition:color .15s;
}
.lt-row:hover{color:var(--ink)}
.lt-row input{accent-color:var(--green);cursor:pointer;width:14px;height:14px}

/* Map toast */
.map-toast{
  position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:1000;
  background:rgba(14,16,20,.92);
  border:1px solid var(--b2);
  border-radius:var(--r-pill);
  padding:8px 18px;
  font-size:12px;color:var(--ink2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;white-space:nowrap;
  box-shadow:var(--sh-md);
}
.map-toast.show{display:block;animation:toastIn .3s ease both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Legend */
.map-legend{
  position:absolute;bottom:14px;left:14px;z-index:1000;
  background:rgba(14,16,20,.85);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:11px 13px;min-width:160px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:11px;
  box-shadow:var(--sh-md);
  animation:slideInLeft .35s ease both .15s;
}
.leg-title{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-weight:700;
  font-family:var(--fm);
}
.leg-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--ink2)}
.leg-sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* Fasilitas filter */
.fas-filter{
  position:absolute;top:150px;right:14px;z-index:1000;
  background:rgba(14,16,20,.85);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:12px 14px;min-width:185px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-md);
  animation:slideInRight .35s ease both .2s;
}
.fas-filter .lt-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink2);padding:4px 0;cursor:pointer;
}
.fdot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 8px currentColor}
.fcount{
  margin-left:auto;font-size:10.5px;font-weight:600;
  font-family:var(--fm);
  background:var(--green-bg-12);color:var(--green2);
  padding:2px 7px;border-radius:var(--r-pill);
  letter-spacing:.02em;
}

@keyframes slideInRight{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}

/* Leaflet overrides */
.leaflet-container{background:var(--map-bg)!important;font-family:var(--f)!important}
.leaflet-control-zoom{border:none!important;box-shadow:var(--sh-md)!important;border-radius:var(--r-sm)!important;overflow:hidden}
.leaflet-control-zoom a{
  background:rgba(14,16,20,.92)!important;
  color:var(--ink)!important;
  border:1px solid var(--b1)!important;
  font-weight:400!important;
  backdrop-filter:blur(10px)!important;
  transition:background .15s!important;
}
.leaflet-control-zoom a:hover{background:var(--s2)!important;color:var(--green2)!important}
.leaflet-control-attribution{
  background:rgba(14,16,20,.85)!important;
  color:var(--muted)!important;
  border-radius:var(--r-xs) 0 0 0!important;
  font-size:10px!important;
  padding:3px 8px!important;
  backdrop-filter:blur(8px)!important;
}
.leaflet-control-attribution a{color:var(--ink2)!important}

.leaflet-popup-content-wrapper{
  background:var(--s2)!important;
  border:1px solid var(--b2)!important;
  border-radius:var(--r)!important;
  color:var(--ink)!important;
  box-shadow:var(--sh-lg)!important;
  padding:2px!important;
}
.leaflet-popup-tip{background:var(--s2)!important;border:1px solid var(--b2)!important}
.leaflet-popup-content{margin:12px 14px!important;font-family:var(--f)!important;font-size:12.5px!important;line-height:1.5}
.leaflet-popup-close-button{color:var(--muted)!important;font-size:18px!important;padding:6px 8px!important}
.leaflet-popup-close-button:hover{color:var(--ink)!important}

.leaflet-tooltip{
  background:rgba(14,16,20,.92)!important;
  border:1px solid var(--b2)!important;
  color:var(--ink)!important;
  font-family:var(--f)!important;font-size:11.5px!important;
  padding:5px 10px!important;
  border-radius:var(--r-xs)!important;
  box-shadow:var(--sh-sm)!important;
  backdrop-filter:blur(10px)!important;
}
.leaflet-tooltip::before{display:none!important}

/* ────────────────────────────────────────────────────────────────────
   PANEL KANAN
   ──────────────────────────────────────────────────────────────────── */
.panel{
  background:var(--s1);
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
}
.panel-head,.panel-top{padding:16px 18px 0;flex-shrink:0}
.panel-search,.psearch{position:relative;margin-bottom:12px}
.panel-search input,.psearch input{
  width:100%;height:38px;
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:0 14px 0 38px;
  color:var(--ink);font-size:12.5px;font-family:var(--f);
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.panel-search input::placeholder,.psearch input::placeholder{color:var(--muted)}
.panel-search input:focus,.psearch input:focus{
  border-color:var(--green);
  background:var(--s1);
  box-shadow:0 0 0 4px var(--green-bg-08);
}
.panel-search .psi,.psearch .psi{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;pointer-events:none;
}

/* Filter chips */
.filter-chips,.chips{display:flex;gap:6px;padding-bottom:14px;overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.filter-chips::-webkit-scrollbar,.chips::-webkit-scrollbar{height:0;display:none}
.chip{
  padding:5px 13px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;letter-spacing:-.005em;
  border:1px solid var(--b2);color:var(--muted);
  cursor:pointer;background:transparent;white-space:nowrap;
  transition:all .15s;font-family:var(--f);
}
.chip:hover:not(.active){color:var(--ink);border-color:var(--b2)}
.chip.active{
  background:var(--green-bg-12);
  border-color:var(--green);
  color:var(--green2);
}
.panel-border{height:1px;background:var(--b1);flex-shrink:0}

/* List */
.panel-list{flex:1;overflow-y:auto;padding:6px 0}

/* List section (renderPanel API) */
.list-section,.ls-section{padding:0}
.list-sec-title,.ls-title{
  padding:14px 18px 8px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
  font-family:var(--fm);
  background:var(--s1);
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:8px;
}
.list-sec-title::after,.ls-title::after{
  content:'';flex:1;height:1px;background:var(--b1);
}

/* List item */
.list-item,.li{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;cursor:pointer;
  border-bottom:1px solid rgba(35,39,47,.55);
  position:relative;
  transition:background .15s,transform .15s,padding-left .15s;
}
.list-item::before,.li::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:0;
  background:linear-gradient(180deg,var(--green) 0%,var(--green2) 100%);
  border-radius:0 3px 3px 0;
  transition:width .18s ease;
}
.list-item:hover,.li:hover{background:var(--s2);padding-left:21px}
.list-item:hover::before,.li:hover::before{width:3px}
.list-item.active,.li.active{background:var(--green-bg-08);padding-left:21px}
.list-item.active::before,.li.active::before{width:3px}
.list-item:last-child,.li:last-child{border-bottom:none}

.li-icon,.li-ic{
  width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  transition:transform .2s;
}
.list-item:hover .li-icon,.li:hover .li-ic{transform:scale(1.05)}
.li-icon.kec,.li-ic.kec{
  background:var(--green-bg-12);
  border:1px solid var(--green-bg-18);
  color:var(--green2);
}
.li-icon.kamp,.li-ic.kamp{
  background:var(--accent-bg-10);
  border:1px solid var(--accent-bg-18);
  color:var(--accent2);
}
.li-info,.li-in{flex:1;min-width:0}
.li-name{
  font-size:13.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.005em;
}
.li-meta{
  font-size:11px;color:var(--muted);margin-top:2px;
  font-family:var(--fm);
  font-feature-settings:"tnum";
}
.li-badge{
  font-size:9.5px;padding:3px 8px;border-radius:var(--r-pill);
  font-weight:700;flex-shrink:0;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--fm);
}
.li-badge.kec,.lb-kec{background:var(--green-bg-12);color:var(--green2);border:1px solid var(--green-bg-18)}
.li-badge.kamp,.lb-kamp{background:var(--accent-bg-10);color:var(--accent2);border:1px solid var(--accent-bg-18)}
.li-badge.kel,.lb-kel{background:var(--blue-bg-10);color:var(--blue);border:1px solid var(--blue-bg-18)}
.li-badge.desa,.lb-desa{background:var(--green-bg-08);color:var(--green2);border:1px solid var(--green-bg-18);opacity:.85}

.list-empty,.lempty{
  padding:48px 20px;text-align:center;color:var(--muted);font-size:12.5px;
}
.list-empty .ei,.lempty .ei{font-size:36px;margin-bottom:12px;opacity:.35;display:block}

/* List item stagger animation */
.list-item{animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.list-item:nth-child(1){animation-delay:.02s}
.list-item:nth-child(2){animation-delay:.05s}
.list-item:nth-child(3){animation-delay:.08s}
.list-item:nth-child(4){animation-delay:.11s}
.list-item:nth-child(5){animation-delay:.14s}
.list-item:nth-child(6){animation-delay:.17s}
.list-item:nth-child(7){animation-delay:.20s}
.list-item:nth-child(8){animation-delay:.23s}
.list-item:nth-child(n+9){animation-delay:.25s}

/* ────────────────────────────────────────────────────────────────────
   DETAIL PANEL
   ──────────────────────────────────────────────────────────────────── */
.detail-panel{
  position:absolute;inset:0;
  background:var(--s1);
  overflow-y:auto;z-index:10;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.detail-panel.open{transform:translateX(0)}

/* Back bar */
.dp-back{
  position:sticky;top:0;z-index:5;
  background:rgba(14,16,20,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--b1);
  padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;
  transition:background .15s;
}
.dp-back:hover{background:rgba(20,23,28,.92)}
.dp-back *{pointer-events:none}
.back-ico{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--s2);
  border:1px solid var(--b1);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink2);
  transition:background .15s,transform .15s;
}
.dp-back:hover .back-ico{background:var(--s3);transform:translateX(-2px)}
.back-label{
  font-size:12px;color:var(--green2);font-weight:600;
  background:var(--green-bg-08);
  border:1px solid var(--green-bg-18);
  border-radius:var(--r-pill);padding:4px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:220px;letter-spacing:-.005em;
}
.back-title{
  font-size:11px;font-weight:600;margin-left:auto;
  color:var(--muted);max-width:130px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--fm);text-transform:uppercase;letter-spacing:.06em;
}

/* Hero banner */
.dp-hero-banner{
  position:relative;
  height:140px;overflow:hidden;flex-shrink:0;
}
.dp-hero-banner.has-foto{height:200px}
.dp-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,var(--green-bg-18) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 70%,var(--accent-bg-18) 0%,transparent 50%),
    linear-gradient(135deg,var(--s2) 0%,var(--s1) 100%);
}
.dp-hero-glow{
  position:absolute;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,var(--green-bg-18),transparent 70%);
  top:-60px;left:-30px;
  filter:blur(20px);
}
.dp-hero-glow2{
  position:absolute;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-bg-18),transparent 70%);
  bottom:-40px;right:10px;
  filter:blur(20px);
}
.dp-hero-icon{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:76px;opacity:.08;color:var(--green2);
  filter:drop-shadow(0 0 30px var(--green-bg-18));
}
.dp-hero-foto-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:blur(22px) brightness(.45) saturate(1.2);transform:scale(1.18);
}
.dp-hero-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.dp-hero-banner.has-foto::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--s1) 0%,rgba(14,16,20,.4) 45%,rgba(14,16,20,0) 85%);
}
.dp-hero-banner.has-foto .dp-hero-content{z-index:2}
.dp-hero-content{
  position:relative;z-index:1;
  padding:22px;
  animation:heroIn .5s ease both .1s;
}
@keyframes heroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.dp-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--green-bg-12);
  border:1px solid var(--green-bg-18);
  border-radius:var(--r-pill);padding:4px 12px;
  font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--green2);margin-bottom:10px;
  font-family:var(--fm);
}
.dp-name{
  font-size:26px;font-weight:700;
  letter-spacing:-.025em;line-height:1.1;
  color:var(--ink);
}
.dp-sub{font-size:12px;color:var(--ink2);margin-top:6px;letter-spacing:-.005em}
.dp-sub span{color:var(--green2);font-weight:600}

/* Stats */
.dp-stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--b1);
  border-bottom:1px solid var(--b1);
}
.dp-stat{
  background:var(--s1);
  padding:16px 18px;
  position:relative;overflow:hidden;
  animation:fadeUp .4s ease both;
  transition:background .15s;
}
.dp-stat:hover{background:var(--s2)}
.dp-stat:nth-child(1){animation-delay:.12s}
.dp-stat:nth-child(2){animation-delay:.18s}
.dp-stat:nth-child(3){animation-delay:.24s}
.dp-stat:nth-child(4){animation-delay:.30s}
.dp-stat-glow{
  position:absolute;top:-20px;right:-20px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,var(--green-bg-12),transparent);
  pointer-events:none;
}
.dp-ico{
  font-size:18px;margin-bottom:8px;display:block;
  color:var(--green2);opacity:.85;
}
.dp-num{
  font-size:22px;font-weight:700;
  color:var(--ink);
  letter-spacing:-.025em;line-height:1;
  font-family:var(--f);
  font-feature-settings:"tnum";
}
.dp-lbl{
  font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:6px;
  font-family:var(--fm);font-weight:600;
}

/* Tabs */
.dp-tabs{
  display:flex;background:var(--s1);
  border-bottom:1px solid var(--b1);
  position:sticky;top:54px;z-index:4;
  padding:0 8px;
  backdrop-filter:blur(12px);
}
.dp-tab{
  flex:1;padding:14px 8px;text-align:center;
  font-size:12px;font-weight:600;letter-spacing:-.005em;
  color:var(--muted);cursor:pointer;
  position:relative;
  transition:color .18s;
}
.dp-tab::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--green),var(--green2));
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
  border-radius:2px 2px 0 0;
}
.dp-tab:hover:not(.active){color:var(--ink)}
.dp-tab:hover::after{transform:scaleX(.4)}
.dp-tab.active{color:var(--green2)}
.dp-tab.active::after{transform:scaleX(1)}
.dp-tc{display:none}
.dp-tc.active{display:block;animation:tcIn .3s ease}
@keyframes tcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Sections */
.dp-section{padding:18px 20px;border-bottom:1px solid var(--b1)}
.dp-section:last-child{border-bottom:none}
.dp-sec-title{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;font-weight:700;
  font-family:var(--fm);
}
.dp-sec-title::after{content:'';flex:1;height:1px;background:var(--b1)}
.dp-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(35,39,47,.45);
  font-size:12.5px;
}
.dp-row:last-child{border:none}
.dp-row .k{color:var(--muted);letter-spacing:-.005em}
.dp-row .v{
  font-weight:600;color:var(--ink);text-align:right;
  font-family:var(--fm);font-feature-settings:"tnum";
  letter-spacing:-.005em;
}

/* Lahan bars */
.lahan-bars{margin-top:6px}
.lb-item{margin-bottom:14px}
.lb-item:last-child{margin-bottom:0}
.lb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:12.5px}
.lb-name{font-weight:500;color:var(--ink2);letter-spacing:-.005em}
.lb-pct{
  font-weight:700;font-size:11.5px;color:var(--ink);
  font-family:var(--fm);font-feature-settings:"tnum";
}
.lb-track{
  height:6px;background:var(--b1);border-radius:var(--r-pill);
  overflow:hidden;position:relative;
}
.lb-fill{
  height:100%;border-radius:var(--r-pill);width:0%;
  background:linear-gradient(90deg,var(--green),var(--green2));
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 12px var(--green-bg-18);
}

/* Donut */
.donut-wrap{display:flex;align-items:center;gap:20px;padding:6px 0}
.donut-svg{flex-shrink:0;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.donut-legend{flex:1}
.dl-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12px}
.dl-row:last-child{margin-bottom:0}
.dl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.dl-name{flex:1;color:var(--ink2);letter-spacing:-.005em}
.dl-pct{
  font-weight:700;color:var(--ink);
  font-family:var(--fm);font-feature-settings:"tnum";
}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  background:var(--green-bg-08);
  border:1px solid var(--green-bg-18);
  color:var(--green2);
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:500;letter-spacing:-.005em;
  transition:background .15s;
}
.tag:hover{background:var(--green-bg-12)}

/* Kampung cards */
.kc-list{padding:0}
.kc-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 20px;
  border-bottom:1px solid rgba(35,39,47,.45);
  cursor:pointer;transition:background .15s,transform .15s,padding-left .15s;
}
.kc-card:hover{background:var(--s2);padding-left:23px}
.kc-card:last-child{border-bottom:none}
.kc-ico{
  width:38px;height:38px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:var(--accent-bg-10);
  border:1px solid var(--accent-bg-18);
  color:var(--accent2);
  transition:transform .18s;
}
.kc-card:hover .kc-ico{transform:scale(1.06) rotate(-3deg)}
.kc-info{flex:1;min-width:0}
.kc-name{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-meta{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--fm)}
.kc-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.kc-badge{
  font-size:9.5px;padding:3px 8px;border-radius:var(--r-pill);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--fm);
}
.kc-badge.kb-k,.kb-k{background:var(--green-bg-12);color:var(--green2);border:1px solid var(--green-bg-18)}
.kc-badge.kb-d,.kb-d{background:var(--blue-bg-10);color:var(--blue);border:1px solid var(--blue-bg-18)}
.kc-badge.kb-l,.kb-l{background:var(--accent-bg-10);color:var(--accent2);border:1px solid var(--accent-bg-18)}
.kc-arr{color:var(--dim);font-size:18px;transition:transform .18s,color .18s}
.kc-card:hover .kc-arr{color:var(--green2);transform:translateX(3px)}

/* Description text */
.desc-text{font-size:13px;line-height:1.75;color:var(--ink2);letter-spacing:-.005em}

/* Empty / loading */
.dp-empty{padding:40px 20px;text-align:center;color:var(--muted)}
.dp-empty .ei{font-size:40px;margin-bottom:12px;opacity:.3;display:block}
.dp-empty p{font-size:13px;line-height:1.7;letter-spacing:-.005em}

.dp-loading{padding:40px;text-align:center;color:var(--muted)}
.spin{
  width:32px;height:32px;
  border:2.5px solid var(--b1);border-top-color:var(--green);
  border-radius:50%;animation:spin .8s linear infinite;
  margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ────────────────────────────────────────────────────────────────────
   MARKER & POPUP FASILITAS
   ──────────────────────────────────────────────────────────────────── */
.fas-marker{background:transparent;border:none}
.fas-pin{
  width:34px;height:34px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:rgba(14,16,20,.94);
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 0 4px rgba(14,16,20,.4),inset 0 0 0 1px var(--green-bg-18);
  transition:transform .18s,box-shadow .18s;
  animation:pinDrop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.fas-pin>*{transform:rotate(45deg);font-size:15px;line-height:1;color:var(--green2)}
.fas-marker:hover .fas-pin{
  transform:rotate(-45deg) scale(1.16);
  box-shadow:0 6px 22px rgba(0,0,0,.65),0 0 0 4px var(--green-bg-12);
}
@keyframes pinDrop{
  from{opacity:0;transform:rotate(-45deg) translateY(-14px) scale(.6)}
  to{opacity:1;transform:rotate(-45deg) translateY(0) scale(1)}
}

.fas-popup{font-family:var(--f);min-width:200px}
.fas-popup-img{
  width:100%;height:120px;object-fit:cover;
  border-radius:var(--r-sm);margin-bottom:10px;
}
.fas-popup-kat{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:5px;color:var(--green2);font-family:var(--fm);
}
.fas-popup-nama{
  font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:8px;letter-spacing:-.015em;line-height:1.25;
}
.fas-popup-row{font-size:12px;color:var(--ink2);margin:3px 0;letter-spacing:-.005em}
.fas-popup-desk{
  font-size:11.5px;color:var(--muted);
  margin-top:9px;padding-top:9px;border-top:1px solid var(--b1);
  line-height:1.6;
}

/* ────────────────────────────────────────────────────────────────────
   LABEL DI PETA (kecamatan & hexagon)
   ──────────────────────────────────────────────────────────────────── */
.kec-label-marker{background:transparent!important;border:none!important}
.kec-lbl-inner{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,16,20,.78);
  border:1px solid var(--b2);
  border-radius:var(--r-pill);
  padding:6px 14px;
  font-family:var(--f);
  font-size:13px;font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  letter-spacing:-.005em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 3px 12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03);
  transform:translate(-50%,-50%);
  pointer-events:none;user-select:none;
  transition:opacity .25s,font-size .25s,padding .25s;
}
.kec-label-marker.dimmed .kec-lbl-inner{
  opacity:.42;font-size:11.5px;padding:4px 10px;
}
.kec-lbl-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green2);flex-shrink:0;
  box-shadow:0 0 6px var(--green),0 0 12px var(--green-bg-18);
}

.kec-label{
  background:transparent!important;border:none!important;box-shadow:none!important;
  font-family:var(--f)!important;
  font-size:11.5px!important;font-weight:700!important;
  color:var(--ink)!important;text-align:center!important;
  white-space:nowrap!important;letter-spacing:.01em!important;
  text-shadow:
    0 0 8px rgba(0,0,0,.95),
    0 0 14px rgba(0,0,0,.7),
    1px 1px 3px rgba(0,0,0,1),
    -1px -1px 3px rgba(0,0,0,1)!important;
  pointer-events:none!important;
}
.kec-label::before{display:none!important}
.leaflet-tooltip.kec-label{padding:0!important;background:transparent!important;border:none!important}

.leaflet-tooltip.hex-label{
  background:rgba(14,16,20,.86)!important;
  border:1px solid var(--green-bg-18)!important;
  color:var(--green2)!important;
  font-size:11px!important;font-weight:600!important;
  padding:3px 9px!important;border-radius:var(--r-xs)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.5)!important;
  white-space:nowrap!important;letter-spacing:-.005em!important;
}
.leaflet-tooltip.hex-label::before{display:none!important}

.leaflet-interactive{transition:fill .25s,stroke .25s}

/* ────────────────────────────────────────────────────────────────────
   POLISH GLOBAL & MOTION
   ──────────────────────────────────────────────────────────────────── */
.list-item,.kamp-card,.kc-card,.dp-back,.lt-row,.fas-filter .lt-row,
.leg-row,button,.tag,.chip,.dp-tab{
  transition:background .18s ease,border-color .18s ease,
             color .18s ease,transform .14s ease,
             box-shadow .18s ease,opacity .18s ease,padding-left .15s ease;
}

input[type=checkbox]{accent-color:var(--green)}

input[type=text]:focus,input[type=search]:focus{
  box-shadow:0 0 0 4px var(--green-bg-08);
}

.leaflet-tooltip{animation:tipIn .2s ease both}
@keyframes tipIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

.leaflet-popup-content-wrapper{animation:popIn .25s cubic-bezier(.34,1.3,.64,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

#pLoad{padding:32px;text-align:center;color:var(--muted);display:none;font-size:12.5px}

/* kamp-card legacy class (digunakan di renderPanel utk daftar kampung) */
.kamp-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--b1);
  cursor:pointer;transition:background .15s,padding-left .15s;
}
.kamp-card:hover{background:var(--s2);padding-left:21px}
.kamp-card:last-child{border-bottom:none}
.kc-icon{
  width:34px;height:34px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:var(--accent-bg-10);border:1px solid var(--accent-bg-18);color:var(--accent2);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ── Header (index.php classes) ──────────────────────── */
header {
  grid-column: 1/-1;
  background: var(--s1, #161b22);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 20px;
  display: flex; align-items: center; gap: 14px;
  height: 52px; flex-shrink: 0; z-index: 50;
}
.logo {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, #4d8eff, #4edea3);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.title { font-size: 15px; font-weight: 700; color: #e1e2ec; letter-spacing: -.2px; white-space: nowrap; }
.title b { color: #4edea3; }
.h-search { flex: 1; max-width: 380px; position: relative; margin-left: 8px; }
.h-search input {
  width: 100%; height: 32px;
  background: #1d2027; border: 1px solid #424754;
  border-radius: 8px; padding: 0 12px 0 32px;
  color: #e1e2ec; font-size: 13px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color .2s;
}
.h-search input:focus { border-color: #4edea3; }
.h-search input::placeholder { color: #8c909f; }
.h-search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #8c909f; font-size: 13px; pointer-events: none; }
.hright { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.live { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #8c909f; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4edea3; animation: blink 2s infinite; }
.hbtn {
  padding: 5px 14px; border-radius: 6px;
  background: #4d8eff; color: #fff;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: opacity .2s;
}
.hbtn:hover { opacity: .88; }

/* Search dropdown */
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #1d2027; border: 1px solid #424754;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 2000; display: none; max-height: 280px; overflow-y: auto;
}
.search-dropdown.show { display: block; }