:root { --border:#e5e7eb; --muted:#6b7280; }

/* ===== Halaman & Map ===== */
html, body { height:100%; margin:0; }
body { overflow:auto; }                         /* cegah scrollbar global */
#map{ 
  position: relative;
  z-index: 100;
  height: calc(100vh - 56px);                 /* fallback */
  height: calc(100dvh - var(--nav-h, 56px));                     /* mobile browser modern */
}

/* Khusus halaman peta saja yang “mengunci” kontennya */
#map-page { 
  position: relative; 
  min-height: calc(100dvh - var(--nav-h, 56px)); 
  overflow:hidden; }

/* ====== Panel kanan versi rapi ====== */
#filterPanel { --accent: #22c55e; } /* default; nanti diubah via JS */

.panel{
  will-change: transform;
  position:absolute; top:16px; right:16px; bottom:16px;
  width:300px; max-width:92vw;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  display:flex; flex-direction:column; overflow: visible;
  /* <<< kuncinya: animasikan transform, bukan width/height */
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2,.6,.2,1), box-shadow .2s;
  isolation:isolate;            /* biar overlay map ga “nyusup” */
  z-index:1200;                 /* di atas overlay map */
}

/* samakan jarak tepi sebagai variabel (bedakan desktop vs mobile) */
.panel{ --edge-gap:16px; }

@media (max-width:640px){
  .panel{ --edge-gap:8px; }
}

/* HANDLE panel kanan — bulat sempurna */
.panel > .panel-toggle-btn{
  position:absolute; top:10px; left:-18px; right:auto;
  width:36px; aspect-ratio:1 / 1;      /* lebar = tinggi */
  display:grid; place-items:center;     /* center isi */
  line-height:1; font-size:18px; font-weight:800;
  border-radius:9999px; background:#fff;
  border:none;                          /* JANGAN pakai border */
  box-shadow:
    0 0 0 3px #fff,                     /* ring putih rapih */
    0 4px 12px rgba(0,0,0,.35);         /* drop shadow */
  transform: translateX(-100%);         /* nongol di luar panel */
  z-index:1400; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  outline:none;
}
.panel > .panel-toggle-btn:hover{ filter:brightness(.96); }

/* MOBILE: saat jadi FAB di luar panel */
@media (max-width:640px){
  /* saat panel TERBUKA, tombol tetap di dalam panel (pojok kanan-atas) */
  .panel > .panel-toggle-btn{ top:10px; right:10px; left:auto; transform:none; }

  /* mode FAB ketika panel TERTUTUP (class .as-fab kita tambah via JS) */
  .panel-toggle-btn.as-fab{
    position:absolute !important;
    top:calc(var(--nav-h,56px) + 10px);
    right:12px; left:auto; transform:none;
    width:44px; aspect-ratio:1/1;
    z-index:1700;  /* di atas overlay & map */
  }
}

/* jika GPU “ngeyel”, paksa masking lingkaran */
@supports (clip-path: circle(50% at 50% 50%)){
  .panel > .panel-toggle-btn{ clip-path: circle(50% at 50% 50%); }
}

/* saat ditutup: geser keluar + buang shadow */
.panel.is-closed{
  transform: translate3d(calc(100% + var(--edge-gap) + 24px), 0, 0);
  box-shadow:none;
  border-color: transparent;
}

.panel-header{
  position:sticky; top:0; z-index:1; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  transition: opacity .18s ease; border-radius:12px;
}
.hdr-left{ display:flex; align-items:center; gap:8px; }
.hdr-icon{ color:var(--accent); }
.hdr-title{ font-weight:700; letter-spacing:.2px; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  background: color-mix(in srgb, var(--accent) 15%, #fff);
  color:#0f172a; border:1px solid color-mix(in srgb, var(--accent) 35%, #d1d5db);
  padding:4px 8px; font-size:12px; border-radius:999px;
}

.panel-content{ padding:12px 14px; overflow:auto; background:#fff; transition: opacity .18s ease; }
.field{ margin-bottom:12px; }
.field.is-inline{ display:flex; gap:10px; align-items:flex-end; }
.help{ display:block; margin-top:4px; font-size:12px; color:var(--muted); }

.form-select.form-select-sm{ border-radius:10px; }
.panel .form-label{ font-size:12px; margin-bottom:6px; color:#111827; }

/* tombol apply mengikuti aksen */
.btn-apply{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; font-weight:600; border-radius:10px; padding:.6rem .9rem;
  background: var(--accent); border:1px solid color-mix(in srgb, var(--accent) 50%, #000);
}
.btn-apply:hover{ filter:brightness(.95); }

/* legend sticky di bawah */
.panel-legend{
  position:sticky; bottom:0; background:#fff; padding:10px 14px; transition: opacity .18s ease;
  border-top:1px solid var(--border); box-shadow:0 -6px 12px rgba(0,0,0,.04);
}
.panel-legend .legend-title{ font-size:12px; color:var(--muted); margin-bottom:6px; }

/* saat panel ditutup */
.panel.is-closed .panel-content,
.panel.is-closed .panel-legend,
.panel.is-closed .panel-header .chip{ opacity:0;
  pointer-events:none; }

/* (opsional) untuk user prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .panel{ transition:none; }
  .panel-header, .panel-content, .panel-legend{ transition:none; }
}

/* responsive kecil (opsional) */
@media (max-width: 768px){
  .panel{ right:8px; left:8px; width:auto; }
}

/* ===== Panel kiri (info) ===== */
.panel-info-left{
  position:absolute; top:16px; left:16px; bottom:16px;
  width:340px; max-width:92vw; background:#fff;
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  display:flex; flex-direction:column; overflow:visible;
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.2,.6,.2,1), box-shadow .2s;
  z-index:1300; padding:8px;
}

/* Header panel kiri */
.panel-info-header{
  position: sticky; top: 0; z-index: 1; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  border-radius:12px;
}

/* konten di dalam panel kiri */
.panel-info-content{
  flex:1 1 auto;   /* ⬅ ambil sisa tinggi panel */
  min-height:0;    /* ⬅ PENTING: biar boleh menyusut dan bisa scroll */
  overflow:auto;
  border-radius:12px;
  padding:16px; background:#fff;
  transition:opacity .18s ease;
  scrollbar-gutter: stable;
}

.panel-info-content{ scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.panel-info-content::-webkit-scrollbar{ width:8px; }
.panel-info-content::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
.panel-info-content::-webkit-scrollbar-track{ background:transparent; }

.panel-info-left .info-group{ margin-bottom:14px; }
.panel-info-left .info-group small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1;
  letter-spacing:.02em;
  margin-bottom:6px;
  text-transform:none;                             /* biar bukan all-caps */
}
.panel-info-left .info-group h4,
.panel-info-left .info-group h5{
  margin:0;
  color:#1f2937;
  line-height:1.25;
}
.panel-info-left .info-group h4{ font-size:20px; font-weight:700; }
.panel-info-left .info-group h5{ font-size:16px; font-weight:600; }

.info-description-text{
  font-size:14.5px;
  color:#374151;
  line-height:1.65;
  margin:0;
}

/* Gambar indikator */
#info-image{
  display:none;                                    /* ditampilkan via JS saat ada src */
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
  background:#f3f4f6;
  border:1px solid var(--border);
}

/* Tombol toggle panel kiri di kiri-atas */
/* BULAT SEMPURNA untuk tombol toggle kiri */
#panelInfoToggleBtn{
   top:10px; left:auto;
  width:36px; aspect-ratio:1 / 1;   /* lebar = tinggi */
  height:auto;
  display:grid; place-items:center; /* center icon */
  line-height:1; font-size:18px; font-weight:800;
  border-radius:9999px;             /* circle */
  background:#fff;                  /* isi putih */
  border:none;                      /* hindari border bikin ilusi kotak */
  box-shadow:
    0 0 0 3px #fff,                /* ring putih RAPI di luar */
    0 4px 12px rgba(0,0,0,.35);    /* drop shadow */
  overflow:hidden;                  /* jaga clip */
  cursor:pointer; z-index:1400;
}
#panelInfoToggleBtn:hover{ filter:brightness(.96); }

/* (opsional) samakan gaya handle panel kanan juga */
.panel-toggle-btn{
  position:absolute; top:10px; left:-18px; right:auto;
  width:36px; aspect-ratio:1 / 1;
  display:grid; place-items:center;
  line-height:1; font-size:18px; font-weight:800;
  border-radius:9999px; background:#fff; border:none;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.35);
  transform: translateX(-100%);
  z-index:1300;
}
.panel-toggle-btn:hover{ filter:brightness(.96); }

/* kalau masih terasa 'squircle' di device tertentu, pakai mask tambahan: */
@supports (clip-path: circle(50% at 50% 50%)){
  #panelInfoToggleBtn, .panel-toggle-btn { clip-path: circle(50% at 50% 50%); }
}

/* saat ditutup: geser ke kiri + matikan interaksi */
.panel-info-left.is-closed{
  transform: translateX(calc(-100% - 16px));  /* keluar + jarak 16px */
  box-shadow:none;
}
.panel-info-left.is-closed .panel-info-content{
  opacity:0; pointer-events:none;
}

/* (opsional) mobile */
@media (max-width:768px){
  .panel-info-left{ left:8px; right:8px; width:auto; }
}

/* Tombol toggle di dalam header kiri */
.panel-info-header #panelInfoToggleBtn,
.panel-info-toggle{
  position: static;
  width:36px; aspect-ratio:1/1;
  display:grid; place-items:center;
  line-height:1; font-size:18px; font-weight:800;
  border-radius:9999px; background:#fff; border:none;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.35);
  cursor:pointer;
}


/* Tombol toggle saat berada di header kiri */
.panel-info-header .panel-info-toggle{
  position: static !important;   /* kembalikan ke layout normal */
  transform: none !important;
  right: auto !important;
  left: auto !important;
  margin-right: 8px;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.35);              /* jarak kecil dari teks “Info” */
}

/* Jaga layout baris judul + tombol */
.panel-info-header .hdr-left{
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-toggle-btn.as-fab{
  position:absolute !important;
  top:calc(var(--nav-h,56px) + 10px);
  right:12px; left:auto; transform:none;
  width:40px; aspect-ratio:1/1;
  z-index:1700;
}

/* Scrollbar panel kiri (halus & tipis) */
.panel-info-left{ scrollbar-width:thin; scrollbar-color:#d1d5db transparent; }
.panel-info-left::-webkit-scrollbar{ width:8px; }
.panel-info-left::-webkit-scrollbar-track{ background:transparent; }
.panel-info-left::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:8px; }

/* ===== Legend & efek peta ===== */
.legend{ margin-top:10px; font-size:12px }
.legend .item{ display:flex; align-items:center; gap:8px; margin:4px 0 }
.legend i{ display:inline-block; width:14px; height:14px; border-radius:3px }

.leaflet-control-reset{
  background:#fff;
  border:2px solid rgba(0,0,0,.2);
  border-radius:4px;
  box-shadow:0 1px 5px rgba(0,0,0,.4);
  cursor:pointer;
  width:34px; height:34px;
  text-indent:-9999px; overflow:hidden;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z" fill="%23333333"/></svg>');
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.leaflet-control-reset:hover{ background-color:#f4f4f4; }

.leaflet-container .leaflet-interactive:focus { outline:none; }
.active-poly{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* Label kecamatan (opsional) */
.kec-label{
  background:transparent; border:0; box-shadow:none;
  color:#fff; font-size:11px; font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  pointer-events:none;
}

/* Pindahkan kontrol Leaflet ke tengah-kiri (opsional) */
.leaflet-top.leaflet-left{ top:50%; transform:translateY(-50%); padding-top:0; }

/* Nonaktifkan fade tooltip bawaan */
/* .leaflet-fade-anim .leaflet-tooltip { 
  transition: none !important; 
} */

/* indicator-map.css */
#map { position: relative; }

/* overlay yang meredupkan map */
.map-dim{
  position:absolute; inset:0;       /* hanya menutup area #map */
  background:rgba(0,0,0,.45);              /* tingkat redup */
  opacity:0; transition:opacity .18s ease;
  pointer-events:none;                     /* tidak blok interaksi */
  z-index:900;                             /* ⬅ naikkan di atas popup Overlay gelap harus >700 supaya di atas popup-panes Leaflet*/
}
/* saat aktif (ditampilkan via JS) */
.map-dim.show{ opacity:1; }

/* hint di TENGAH map */
.map-zoom-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:12px 16px; border-radius:10px;
  background:rgba(0,0,0,.7); color:#fff;
  font-size:16px; line-height:1.3; letter-spacing:.2px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease; 
  z-index:1300; white-space:nowrap;
}
.map-zoom-hint.show{ opacity:1; }


/* Header panel kiri */
.panel-info-header{
  position: sticky; top: 0; z-index: 1; background:#fff;
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--border);
  border-radius:12px;
}
.panel-info-header .hdr-title{ font-weight:700; letter-spacing:.2px; }

/* Style dasar tombol (saat di header / mobile-open) */
.panel-info-toggle{
  position: static;
  width:36px; aspect-ratio:1/1;
  display:grid; place-items:center;
  line-height:1; font-size:18px; font-weight:800;
  border-radius:9999px; background:#fff; border:none;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.35);
  cursor:pointer;
}

/* Handle di LUAR panel (desktop-open) */
.panel-info-toggle.as-handle-left{
  position:absolute;
  top: 12px; right: -54px; left:auto;
  width:36px; aspect-ratio:1/1;
  display:grid; place-items:center;
  line-height:1; font-size:18px; font-weight:800;
  border-radius:9999px; background:#fff; border:none;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.35);
  z-index:1400;
}

/* FAB saat panel tertutup (desktop & mobile) */
#panelInfoToggleBtn.as-fab-left{
  position:absolute !important;
  top:calc(var(--nav-h,56px) + 10px);
  left:12px; right:auto; transform:none;
  width:44px; aspect-ratio:1/1;
  z-index:1700;
}

/* Sedikit tweak ukuran di layar kecil */
@media (max-width:640px){
  #panelInfoToggleBtn.as-fab-left{ width:44px; }
}

/* Panel kiri animasi & tutup tanpa peek */
.panel-info-left{
  position:absolute; top:16px; left:16px; bottom:16px;
  width:340px; max-width:92vw; background:#fff;
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  display:flex; flex-direction:column; overflow:visible;
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.2,.6,.2,1), box-shadow .2s;
  z-index:1300; padding:8px;
}
.panel-info-left.is-closed{
  transform: translateX(calc(-100% - 16px));
  box-shadow:none;
}
.panel-info-left.is-closed .panel-info-content{ opacity:0; pointer-events:none; }

/* Konten scrollable */
.panel-info-content{
  flex:1 1 auto; min-height:0; overflow:auto;
  border-radius:12px; padding:16px; background:#fff;
  transition:opacity .18s ease; scrollbar-gutter: stable;
}

/* (opsional) klip lingkaran ekstra */
@supports (clip-path: circle(50% at 50% 50%)){
  .panel-info-toggle,
  .panel-info-toggle.as-handle-left,
  #panelInfoToggleBtn.as-fab-left{ clip-path: circle(50% at 50% 50%); }
}