:root{
    --forest-deep:   #1B3A2F;
    --forest-mid:    #2F5C46;
    --moss:          #4C7A57;
    --parchment:     #F6F3EC;
    --parchment-2:   #EDE8DA;
    --ink:           #20281F;
    --ember:         #C97D3E;
    --line:          #D9D2BF;
    --white:         #FFFFFF;
    --navy:          #12283F;
    --teal:          #2E9C8F;
    --brand-blue:    #033D5B;
  }

  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; height:100%; }
  body{
    font-family:'Roboto', sans-serif;
    color: var(--ink);
    background: var(--parchment);
  }

  #app{ display:flex; flex-direction:column; height:100vh; }

  /* ---------- TOPBAR ---------- */
  #topbar{
    height: 60px;
    flex-shrink:0;
    background: #054A76;
    color: var(--white);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    height:38px;
    display:flex; align-items:center; justify-content:center;
  }
  .brand-mark img{ height:100%; width:auto; object-fit:contain; }
  .brand-text h1{
    font-family:'Roboto', sans-serif;
    font-size:18px; font-weight:600; margin:0; line-height:1.1;
  }
  .topbar-right{ display:flex; align-items:center; gap:12px; }
  .data-status{
    font-size:11px; font-weight:600; letter-spacing:.03em;
    color:#9FB4C9;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
  }
  .data-status.is-live{ color:#8FE3C7; border-color: rgba(143,227,199,.5); }
  #info-toggle{
    width:28px; height:28px; border-radius:50%;
    border: 1px solid rgba(255,255,255,.5);
    background: transparent;
    color: var(--white);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 14px; font-weight:700;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  #info-toggle:hover{ background: rgba(255,255,255,.15); }

  /* Menu dropdown icon "i" — Info Proyek & Metodologi Deforestasi.
     Buka lewat hover (mouse) DAN lewat klik/tap (disentuh via JS toggle
     class .is-open) — hover saja tidak cukup di layar sentuh. */
  .info-menu-wrap{ position:relative; }
  .info-menu{
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:200px;
    background: rgba(3,61,91,.97);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    padding:6px;
    opacity:0; visibility:hidden; transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:700;
  }
  .info-menu-wrap:hover .info-menu,
  .info-menu-wrap.is-open .info-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .info-menu-item{
    display:block; width:100%; text-align:left;
    padding:8px 10px; border-radius:6px;
    border:none; background:none; color: var(--white);
    font-family:'Roboto', sans-serif; font-size:12.5px;
    cursor:pointer;
  }
  .info-menu-item:hover{ background: rgba(255,255,255,.14); }

  /* ---------- LAYOUT ---------- */
  #layout{ flex:1; display:flex; min-height:0; position:relative; }

  /* ---------- NAV RAIL ----------
     Ini "page switcher" — perannya sama seperti tab Widget di AGOL ExB
     atau toolbar icon di sisi kiri SIGAP. Tiap tombol = satu "halaman"
     (Koridor, Titik Api, dst). Klik icon = ganti konten sidebar + map,
     tanpa reload halaman (masih 1 file HTML yang sama). */
  #nav-rail{
    width: 7.25rem;
    flex-shrink:0;
    background: var(--brand-blue);
    box-shadow: 2px 0 8px rgba(0,0,0,.25);
    position: relative;
    z-index: 1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding: 0.75rem 0.625rem;
    gap: 0.375rem;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox: hilangkan scrollbar permanen */
  }
  #nav-rail::-webkit-scrollbar{ width:6px; }
  #nav-rail::-webkit-scrollbar-thumb{ background: transparent; border-radius:3px; }
  #nav-rail:hover::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); }
  .rail-logo-item{
    border: 1.5px dashed rgba(255,255,255,.45);
    border-radius: 10px;
    margin-bottom: 4px;
  }
  .rail-item{
    width: 100%;
    height: 7rem;
    padding: 0 0.375rem;
    border-bottom: none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    background: transparent;
    border-left: none; border-right:none; border-top:none;
    border-radius: 8px;
  }
  .rail-item .rail-icon{ font-size:3.25rem; }
  .rail-item .rail-icon-img{ width:6rem; height:6rem; object-fit:contain; }
  /* Corridor_new.png & Karhutla.png (line-art putih) — disamakan dengan
     ukuran .rail-partner-thumb (2.75rem) supaya seluruh rail punya bobot
     visual ikon yang seragam. */
  .rail-item .rail-icon-orig{ width:2.75rem; height:2.75rem; object-fit:contain; }
  .rail-label{
    font-family:'Roboto', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #CBDCEF;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
  }
  .rail-item.active .rail-label{ color: var(--white); }
  .rail-item:hover{ background: rgba(255,255,255,.08); }
  .rail-item.active{ background: rgba(255,255,255,.14); }
  .rail-item.active .rail-icon-img{ filter: drop-shadow(0 0 4px rgba(201,125,62,.6)); }

  /* Rail item dengan label teks di bawah icon (ditata vertikal) — dipakai
     Koridor, Monitoring Karhutla, dan semua item mitra, supaya seluruh
     rail konsisten (bukan cuma icon tanpa penjelasan). */
  .rail-item-labeled,
  .rail-item-partner{
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.375rem;
  }
  /* Badge ABBREV (assets/icons/ABBREV/*.png) sudah berupa lingkaran +
     inisial putih yang dirender di atas transparan — didesain untuk
     duduk langsung di atas latar gelap rail, BUKAN di atas isian putih
     (kalau diberi latar putih, teksnya jadi putih-di-atas-putih). Jadi
     wrapper ini sengaja dibiarkan transparan; ring aktif dipakai lewat
     box-shadow, bukan fill solid. */
  .rail-partner-thumb{
    width: 2.75rem; height: 2.75rem;
    flex-shrink:0;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .rail-partner-thumb img{ width:100%; height:100%; object-fit:contain; }
  .rail-item-partner:hover .rail-partner-thumb{ transform: translateY(-1px); }
  .rail-item-partner.active .rail-partner-thumb{
    box-shadow: 0 0 0 3px rgba(46,156,143,.32), 0 0 10px rgba(46,156,143,.55);
  }

  .rail-lang{
    margin-top: 4px;
    padding: 10px 4px 0;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .rail-lang-label{
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:#CBDCEF;
  }
  .rail-lang-switch{ display:flex; gap:6px; }
  .lang-btn{
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.3);
    background: transparent;
    color:#CBDCEF;
    font-family:'Roboto', sans-serif;
    font-size:11px; font-weight:700;
    cursor:pointer;
  }
  .lang-btn:hover{ border-color: rgba(255,255,255,.55); }
  .lang-btn.active{ background: var(--teal); border-color: var(--teal); color: var(--white); }

  /* ---------- SIDEBAR ---------- */
  #sidebar{
    width: 32%;
    flex-shrink:0;
    background: var(--brand-blue);
    border-right: 1px solid rgba(255,255,255,.12);
    display:flex;
    flex-direction:column;
    min-height:0;
    transition: width .2s ease;
  }

  /* Tombol pencetan extend/de-extend — sengaja jadi sibling #sidebar
     (bukan child), diposisikan lewat #layout. Kalau ditaruh di dalam
     #sidebar, overflow:hidden pas collapsed ikut memotong tombolnya
     juga sehingga tidak bisa diklik lagi untuk extend. */
  #sidebar-toggle{
    position:absolute;
    top: 50%;
    left: calc(7.25rem + 32% - 14px); /* nav-rail 7.25rem + sidebar 32% - separuh lebar tombol */
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--forest-deep);
    font-size: 14px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index: 600;
    box-shadow: 0 1px 4px rgba(27,58,47,.2);
    transition: left .2s ease;
  }
  #sidebar-toggle:hover{ background: var(--parchment-2); }

  #layout.sidebar-collapsed #sidebar{ width: 0; border-right: none; overflow: hidden; }
  #layout.sidebar-collapsed #sidebar-toggle{
    left: 6.375rem; /* nav-rail 7.25rem - separuh lebar tombol */
  }
  .sidebar-head{
    padding: 16px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .sidebar-head .eyebrow{
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color: var(--teal); font-weight:600; margin-bottom:2px;
  }
  .sidebar-head h2{
    font-family:'Roboto', sans-serif;
    font-size:19px; margin:0; color: var(--white);
  }
  .sidebar-head p{
    font-size:12px; color:#AFC4DA; margin:6px 0 0;
  }

  /* Sub-tab dua tombol di dalam page Koridor, gantian nampilin
     "Daftar Kawasan" (list) atau "Ikhtisar" (accordion). */
  .subtab{
    display:flex; gap:6px;
    padding: 12px 18px 4px;
  }
  .subtab-btn{
    flex:1;
    padding: 7px 4px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--moss);
    font-family:'Roboto', sans-serif;
    font-size: 11.5px; font-weight:600;
    cursor:pointer;
    text-align:center;
  }
  .subtab-btn:hover{ background: var(--parchment-2); }
  .subtab-btn.active{
    background: var(--forest-deep);
    border-color: var(--forest-deep);
    color: var(--white);
  }

  #corridor-list{
    flex:1; overflow-y:auto;
    padding: 10px 12px 16px;
  }

  .corridor-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-left: 4px solid var(--card-color, var(--teal));
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .corridor-card:hover{
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transform: translateY(-1px);
  }
  .corridor-card.active{
    background: rgba(46,156,143,.22);
    border-left-color: var(--ember);
  }
  .corridor-card.active .cname,
  .corridor-card.active .cstake{ color: var(--white); }
  .corridor-card.active .carea{ color: #BFD9C7; }

  .cname{
    font-weight:600; font-size:13.5px; color: var(--white);
    margin-bottom:3px;
  }
  .cstake{
    font-size:11.5px; color:#AFC4DA; margin-bottom:6px;
  }
  .carea{
    font-size:11px; color: var(--teal); font-weight:600;
  }

  .empty-state{
    display:none;
    flex:1;
    padding: 24px 20px;
    text-align:center;
  }
  .empty-state .es-icon{ font-size:30px; margin-bottom:10px; }
  .empty-state h3{
    font-family:'Roboto', sans-serif; font-size:16px; color: var(--forest-deep);
    margin: 0 0 8px;
  }
  .empty-state p{
    font-size:12px; color:#6B7364; line-height:1.6; margin:0;
  }
  .empty-state .es-tag{
    display:inline-block; margin-top:14px; padding:4px 10px;
    background: var(--ember); color:var(--white); border-radius:20px;
    font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  }

  .sidebar-foot{
    padding: 10px 18px 14px;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: 10.5px;
    color:#AFC4DA;
    line-height:1.5;
  }

  .scroll-page{
    flex:1;
    overflow-y:auto;
    padding: 6px 18px 20px;
  }

  /* ---------- HALAMAN "PARTNER" (per-stakeholder) ---------- */
  .partner-camtrap-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    margin-top:10px;
  }
  .partner-camtrap-status{
    display:inline-flex; align-items:center; gap:7px;
    padding: 4px 10px 4px 8px;
    background: rgba(46,156,143,.14);
    border: 1px solid rgba(46,156,143,.4);
    border-radius: 20px;
    font-size: 11px; font-weight:600; letter-spacing:.02em;
    color:#8FE3C7;
  }
  .partner-camtrap-status .dot{
    width:7px; height:7px; border-radius:50%; flex-shrink:0;
    background: var(--teal);
    animation: pulse-dot 1.8s infinite;
  }
  /* State "tidak tersedia" — dot statis (tidak pulse) dan warna diredam,
     supaya beda tegas dari "Available" tanpa perlu teks super panjang. */
  .partner-camtrap-status.is-unavailable{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
    color:#8FA6BC;
  }
  .partner-camtrap-status.is-unavailable .dot{
    background:#8FA6BC;
    animation: none;
  }
  .partner-camtrap-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding: 5px 12px 5px 10px;
    background: var(--teal);
    border: 1px solid var(--teal);
    border-radius: 20px;
    color: var(--white);
    font-family:'Roboto', sans-serif;
    font-size: 11.5px; font-weight:700;
    cursor:pointer;
    transition: background .15s ease, transform .15s ease;
  }
  .partner-camtrap-btn svg{ width:14px; height:14px; flex-shrink:0; }
  .partner-camtrap-btn:hover{ background:#268A7F; transform: translateY(-1px); }
  /* Belum ada aktivitas kamera jebak di wilayah ini — tombolnya tetap
     ditampilkan (bukan disembunyikan) tapi diredam warnanya, supaya
     "tidak ada data" itu sendiri kelihatan jelas, bukan cuma hilang. */
  .partner-camtrap-btn:disabled{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color:#7C93A8;
    cursor: not-allowed;
    transform:none;
  }
  .partner-camtrap-btn:disabled:hover{ background: rgba(255,255,255,.06); transform:none; }


  /* Chart Corridor Loss (deforestasi) — Chart.js dipasang via CDN
     (chart.umd.min.js), digambar ulang tiap ganti mitra (lihat
     renderCorridorLossChart di script.js). Kalau datanya belum ada
     buat mitra tsb., canvas disembunyikan & pesan fallback muncul —
     sama filosofinya dengan fallback "belum tersedia" yang lain. */
  .corridor-loss-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 12px 14px 10px;
    margin-bottom: 16px;
  }
  .corridor-loss-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    margin-bottom:8px;
  }
  .corridor-loss-title{
    font-size:12.5px; font-weight:600; color: var(--white);
  }
  .corridor-loss-unit{
    font-size:10px; color:#8FA6BC; text-transform:uppercase; letter-spacing:.04em;
  }
  .corridor-loss-head-right{
    display:flex; align-items:center; gap:8px; flex-shrink:0;
  }
  .corridor-loss-enlarge-btn{
    width:22px; height:22px; border-radius:6px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
    color: var(--teal);
    cursor:pointer;
  }
  .corridor-loss-enlarge-btn svg{ width:13px; height:13px; }
  .corridor-loss-enlarge-btn:hover{ background: rgba(255,255,255,.14); }
  .corridor-loss-enlarge-btn:disabled{
    color:#7C93A8; cursor:not-allowed;
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
  }
  .corridor-loss-canvas-wrap{
    position:relative;
    height: 150px;
  }
  .corridor-loss-empty{
    font-size:11.5px; color:#8FA6BC; text-align:center;
    padding: 24px 8px;
    margin:0;
  }
  .corridor-loss-overlay-canvas-wrap{
    position:relative;
    flex:1; min-height:0;
    height: min(60vh, 520px);
    padding: 8px 24px 24px;
  }

  /* Grid ringkas 3 kartu data: nama kawasan (lebar penuh), jenis
     pemangku kepentingan, dan luas — dibuat seperti panel telemetri
     supaya konsisten dengan nuansa "console" data GIS. */
  .stat-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    margin-bottom: 18px;
  }
  .stat-tile{
    display:flex; flex-direction:column; gap:5px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 10px 11px;
  }
  .stat-tile-accent{
    background: rgba(46,156,143,.14);
    border-color: rgba(46,156,143,.4);
  }
  .stat-icon{
    width:18px; height:18px;
    color: var(--teal);
  }
  .stat-icon svg{ width:100%; height:100%; }
  .stat-label{
    font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#8FA6BC;
  }
  .stat-value{
    font-size:14px; font-weight:600; color: var(--white);
    line-height:1.3;
    font-variant-numeric: tabular-nums;
  }
  .stat-tile-accent .stat-value{ color:#8FE3C7; }

  /* Ikon kecil di header tiap accordion, supaya tiap kategori info
     bisa dipindai lebih cepat tanpa harus baca teksnya dulu. */
  .accordion-title{
    display:flex; align-items:center; gap:9px;
    min-width:0;
  }
  .accordion-icon{
    flex-shrink:0;
    width:17px; height:17px;
    color: var(--teal);
  }
  .accordion-icon svg{ width:100%; height:100%; }

  /* ---------- HALAMAN "INFO" (accordion) ---------- */
  .accordion-item{ border-bottom: 1px solid rgba(255,255,255,.14); }
  .accordion-item:first-child{ border-top: 1px solid rgba(255,255,255,.14); }

  .accordion-toggle{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    background:none; border:none; cursor:pointer;
    padding: 13px 2px;
    font-family:'Roboto', sans-serif;
    font-size:13px; font-weight:600; color: var(--white);
    text-align:left;
  }
  .accordion-caret{
    flex-shrink:0;
    color: var(--teal);
    transition: transform .2s ease;
  }
  .accordion-item.open .accordion-caret{ transform: rotate(180deg); }

  .accordion-body{
    max-height:0;
    overflow:hidden;
    transition: max-height .25s ease;
  }
  .accordion-item.open .accordion-body{ max-height: 480px; }
  .accordion-body p{
    font-size:12px; color:#AFC4DA; line-height:1.6;
    margin:0; padding:0 2px 14px;
  }
  .accordion-body ul{
    margin:0; padding:0 2px 14px 18px;
  }
  .accordion-body li{
    font-size:12px; color:#AFC4DA; line-height:1.6;
    margin:4px 0;
  }

  /* ---------- HALAMAN KONSESI & TITIK API ----------
     Sama palet #033d5b dengan sisa sidebar; teks tetap terang
     karena background-nya gelap. ---------- */
  #page-konsesi{ color: var(--white); }

  .hotspot-badge{
    margin: 0 18px 10px;
    padding: 8px 12px;
    background: rgba(201,84,47,.18);
    border: 1px solid rgba(201,84,47,.4);
    border-radius: 8px;
    font-size: 11.5px;
    color:#FFCDB0;
    display:flex; align-items:center; gap:8px;
  }
  .hotspot-badge .dot{
    width:8px; height:8px; border-radius:50%;
    background:#E8623A; flex-shrink:0;
    box-shadow: 0 0 0 rgba(232,98,58,.6);
    animation: pulse-dot 1.6s infinite;
  }
  @keyframes pulse-dot{
    0%{ box-shadow: 0 0 0 0 rgba(232,98,58,.55); }
    70%{ box-shadow: 0 0 0 7px rgba(232,98,58,0); }
    100%{ box-shadow: 0 0 0 0 rgba(232,98,58,0); }
  }

  #hotspot-filter{
    margin: 0 18px 12px;
    display:flex; flex-direction:column; gap:5px;
  }
  #hotspot-filter label{
    font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    color:#9FB4C9;
  }
  #hotspot-filter select{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--white);
    font-family:'Roboto'; font-size:12.5px;
    cursor:pointer;
  }
  #hotspot-filter select option{ color: var(--ink); }

  #konsesi-search{
    margin: 0 18px 12px;
    display:flex; align-items:center; gap:8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    padding: 8px 10px;
  }
  #konsesi-search input{
    flex:1; background:none; border:none; outline:none;
    color: var(--white); font-family:'Roboto'; font-size:12.5px;
  }
  #konsesi-search input::placeholder{ color:#7C93A8; }

  #konsesi-list{ flex:1; overflow-y:auto; padding: 0 12px 16px; }

  /* Disamakan dengan .corridor-card di page Koridor — teks bertumpuk
     polos, tanpa blok ikon berwarna di kiri. Warna per-item dipertahankan
     lewat --card-color, tapi cuma jadi garis tipis kiri (bukan swatch
     solid), sama seperti daftar Koridor. */
  .konsesi-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-left: 4px solid var(--card-color, var(--teal));
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor:pointer;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .konsesi-card:hover{
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transform: translateY(-1px);
  }
  .konsesi-card.active{
    background: rgba(46,156,143,.22);
    border-left-color: var(--ember);
  }
  .konsesi-card.active .kc-name,
  .konsesi-card.active .kc-meta{ color: var(--white); }

  .kc-name{ font-weight:600; font-size:13.5px; color: var(--white); margin-bottom:3px; }
  .kc-meta{ font-size:11.5px; color:#AFC4DA; margin-bottom:6px; }
  .kc-desc{ font-size:11px; color:#B7C4CE; line-height:1.4; }

  /* ---------- MAP ---------- */
  #map{ flex:1; position:relative; background:#dfe6df; }

  /* Panel transparansi (meniru slider layer SIGAP) */
  .map-panel{
    position:absolute; z-index:500;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    font-size: 12px;
  }
  #opacity-panel{
    top: 14px; right: 14px;
    padding: 10px 14px;
    width: 200px;
  }
  #opacity-panel .lbl{
    font-weight:600; color:var(--forest-deep); margin-bottom:6px;
    display:flex; justify-content:space-between;
  }
  #opacity-panel input[type=range]{
    width:100%; accent-color: var(--moss);
  }

  #layers-panel{
    bottom: 24px; right: 14px;
    width: 210px;
  }
  /* Header dijadikan tombol (bukan cuma judul) supaya bisa expand/
     collapse seperti accordion — caret ikut berputar, isinya (.layers-body)
     dianimasikan lewat max-height, pola yang sama seperti accordion di
     sidebar Partner/Info, cuma warnanya disesuaikan buat panel terang ini. */
  .layers-head{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-family:'Roboto', sans-serif;
    font-weight:600; color:var(--forest-deep); font-size:12.5px;
    padding: 10px 14px 8px;
    border: none; border-bottom: 1px solid var(--line);
    background: none;
    cursor:pointer;
  }
  .layers-caret{
    flex-shrink:0;
    color: var(--moss);
    transition: transform .2s ease;
  }
  #layers-panel.is-collapsed .layers-head{ border-bottom-color: transparent; }
  #layers-panel.is-collapsed .layers-caret{ transform: rotate(-90deg); }

  .layers-body{
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    transition: max-height .25s ease;
  }
  #layers-panel.is-collapsed .layers-body{ max-height: 0; overflow:hidden; }

  /* Urutan .layer-section = urutan tumpuk TETAP di peta (lihat
     applyLayerOrder() di script.js) — tidak lagi bisa digeser user. */
  .layer-section-body{ padding: 8px 14px 10px; }
  .layer-toggle{
    display:flex; align-items:center; gap:8px;
    cursor:pointer; user-select:none;
    font-size:12px; font-weight:600; color:var(--ink);
  }
  .layer-toggle input[type=checkbox]{
    width:14px; height:14px; accent-color: var(--moss); cursor:pointer; flex-shrink:0;
  }
  .lt-swatch{
    width:12px; height:12px; border-radius:3px; flex-shrink:0; display:inline-block;
  }
  .legend-row{
    display:flex; align-items:center; gap:8px;
    font-size:11px; color:#6B7364; line-height:1.4;
    margin: 5px 0 0 22px;
  }
  .lt-dot{
    width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block;
    background:#E8623A; border:2px solid #FFD9C4; box-sizing:content-box;
  }
  .lt-dot-high{ width:12px; height:12px; }
  .lt-dot-nominal{ width:9px; height:9px; }
  .lt-dot-low{ width:6px; height:6px; background:#F0A868; border-color:#FFE6C9; }

  #basemap-panel{
    bottom: 24px; left: 14px;
    display:flex; overflow:hidden;
  }
  #basemap-panel button{
    border:none; background:var(--white); padding:8px 12px;
    font-family:'Roboto'; font-size:12px; cursor:pointer; color:var(--ink);
  }
  #basemap-panel button.active{ background: var(--forest-deep); color:var(--white); }

  /* Stack panel info — Info Proyek & Metodologi Deforestasi sama-sama
     muncul otomatis di kanan peta (lihat CSS masing-masing tidak ada
     display:none), ditumpuk vertikal via flex (bukan absolute-position
     manual per panel) supaya otomatis rapi tidak tabrakan biarpun tinggi
     kontennya beda. Tiap panel tetap bisa ditutup (X) sendiri-sendiri,
     dan dibuka lagi lewat menu hover tombol "i" di topbar. */
  .info-stack{
    position:absolute; z-index:500;
    top: 92px; right: 14px;
    width: 280px;
    max-height: calc(100% - 110px);
    overflow-y: auto;
    display:flex; flex-direction:column; gap:12px;
  }
  .info-card{
    position:relative;
    flex-shrink:0;
    background: rgba(3,61,91,.92);
    color: var(--white);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  .info-card h3{
    font-family:'Roboto', sans-serif;
    font-size:14.5px; margin:0 26px 8px 0;
  }
  .info-card p{
    font-size:12.5px; line-height:1.6; color:#CBDCEF; margin:0 0 10px;
  }
  .info-card p:last-child{ margin-bottom:0; }
  .info-card a{ color:#8FE3C7; word-break:break-all; }
  .info-card a:hover{ text-decoration:underline; }
  .info-close-btn{
    position:absolute; top:10px; right:10px;
    width:22px; height:22px; border-radius:50%;
    border:none; background:rgba(255,255,255,.12); color:var(--white);
    font-size:14px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .info-close-btn:hover{ background: rgba(255,255,255,.24); }

  /* Drop shadow layer koridor — supaya kelihatan "mengambang" di atas
     layer konsesi di bawahnya. Dipasang lewat CSS filter (bukan SVG
     <filter>) karena lebih ringan dan didukung langsung di path SVG. */
  .corridor-path{
    filter: drop-shadow(2px 3px 3px rgba(0,0,0,.45));
  }

  .leaflet-popup-content-wrapper{ border-radius:6px; }
  .popup-title{ font-family:'Roboto', sans-serif; font-weight:600; font-size:14px; color:var(--forest-deep); margin-bottom:4px; }
  .popup-row{ font-size:12px; color:#4A5045; margin:2px 0; }

  /* ---------- GALERI CAMERA TRAP ----------
     Overlay di TENGAH HALAMAN (fixed ke viewport, bukan ke sidebar),
     supaya tetap konsisten dipusatkan biarpun sidebar sedang
     lebar/collapsed atau nav-rail lagi mode mobile. Panelnya sengaja
     translucent (bukan kartu putih solid) + backdrop-filter blur,
     sesuai app pattern.md, jadi terasa "melayang" di atas peta. */
  .camtrap-overlay{
    position: fixed; inset: 0;
    z-index: 900;
    display:flex; align-items:center; justify-content:center;
    padding: 24px;
    background: rgba(3,15,23,.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .camtrap-overlay[hidden]{ display:none; }

  .camtrap-panel{
    width: min(78vw, 1200px);
    max-height: 80vh;
    display:flex; flex-direction:column; min-height:0;
    background: rgba(5,42,63,.62);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .camtrap-panel-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    flex-shrink:0;
  }
  .camtrap-eyebrow{
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color: var(--teal); font-weight:600; margin-bottom:2px;
  }
  .camtrap-panel-head h3{
    font-family:'Roboto', sans-serif;
    font-size:17px; margin:0; color: var(--white);
  }

  .camtrap-grid{
    flex:1; overflow-y:auto; min-height:0;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap:12px;
    padding: 18px 24px 24px;
    align-content: start;
  }
  /* height:0 + padding-top:75% ("classic spacer trick") dipakai
     alih-alih `aspect-ratio` murni — di grid ini, `aspect-ratio` pada
     grid item ternyata bikin browser salah hitung tinggi baris (row
     track auto disamaratakan ke tinggi kontainer, lalu tiap thumbnail
     yang di-render pada aspect-ratio-nya sendiri jadi lebih tinggi
     dari baris grid-nya dan saling tumpuk). Padding-percentage selalu
     dihitung dari LEBAR elemen sendiri, jadi kebal dari masalah itu. */
  .camtrap-thumb{
    position:relative;
    width:100%;
    height:0;
    padding-top: 75%;
    border-radius: 8px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    padding-left:0; padding-right:0;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .camtrap-thumb img,
  .camtrap-thumb video{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .camtrap-thumb:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
  .camtrap-thumb:hover .camtrap-thumb-zoom{ opacity:1; }
  .camtrap-thumb-zoom{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(3,15,23,.35);
    opacity:0;
    transition: opacity .15s ease;
  }
  .camtrap-thumb-zoom svg{ width:22px; height:22px; color: var(--white); }
  /* Badge play — beda dari .camtrap-thumb-zoom (yang cuma muncul pas
     hover): ini SELALU kelihatan supaya video kebeda dari foto biasa
     tanpa harus di-hover dulu. */
  .camtrap-thumb-playbadge{
    position:absolute; top:6px; right:6px;
    width:22px; height:22px; border-radius:50%;
    background: rgba(3,15,23,.6);
    display:flex; align-items:center; justify-content:center;
  }
  .camtrap-thumb-playbadge svg{ width:11px; height:11px; color: var(--white); margin-left:1px; }
  .camtrap-thumb-caption{
    position:absolute; left:0; right:0; bottom:0;
    padding: 4px 7px;
    font-size:9.5px; font-family: monospace;
    color: rgba(255,255,255,.85);
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  }

  .camtrap-close{
    flex-shrink:0;
    width:30px; height:30px; border-radius:50%;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    color: var(--white);
    font-size:17px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: background .15s ease;
  }
  .camtrap-close:hover{ background: rgba(255,255,255,.2); }

  /* Lightbox: layer terpisah DI ATAS galeri (bukan gantikan galeri),
     jadi klik X di lightbox otomatis balik nampilin galerinya lagi. */
  .camtrap-lightbox-overlay{
    position: fixed; inset:0;
    z-index: 950;
    display:flex; align-items:center; justify-content:center;
    padding: 32px;
    background: rgba(0,0,0,.86);
  }
  .camtrap-lightbox-overlay[hidden]{ display:none; }
  .camtrap-lightbox-close{
    position:absolute; top:20px; right:20px;
  }
  .camtrap-lightbox-figure{
    margin:0;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    max-width: 92vw; max-height: 88vh;
  }
  .camtrap-lightbox-figure img,
  .camtrap-lightbox-figure video{
    max-width: 92vw; max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }
  .camtrap-lightbox-figure figcaption{
    font-size:12px; font-family: monospace;
    color:#AFC4DA; text-align:center;
  }

  /* ---------- RESPONSIVE ----------
     #sidebar tadinya cuma lebar tetap 32% tanpa breakpoint sama sekali —
     di layar sempit itu bikin sidebar (termasuk halaman Partner) jadi
     terlalu sempit untuk dibaca. Dari sini sidebar berangsur jadi
     panel overlay (menumpuk di atas peta) begitu ruang makin sempit,
     bukan berbagi ruang secara proporsional lagi. */

  /* Laptop kecil / tablet lanskap: sidebar tetap mendorong peta,
     tapi diberi jatah lebar lebih besar supaya stat-grid & accordion
     partner tidak sesak. */
  @media (max-width: 1180px){
    #sidebar{ width: 40%; }
    #sidebar-toggle{ left: calc(7.25rem + 40% - 14px); }
  }

  /* Tablet potret ke bawah: nav-rail jadi ikon-saja (label disembunyikan,
     nama tetap ada lewat title="" untuk tooltip & pembaca layar), dan
     sidebar berubah jadi panel overlay lebar tetap yang menumpuk di atas
     peta — bukan berbagi lebar dengannya — supaya peta tetap dapat ruang
     kerja yang layak. */
  @media (max-width: 900px){
    #nav-rail{ width: 5.25rem; padding: 0.625rem 0.4rem; gap:0.3rem; }
    .rail-item{ height: 4.6rem; }
    .rail-label{ display:none; }
    .rail-item-partner{ padding: 0.4rem; }
    .rail-partner-thumb{ width: 2.375rem; height: 2.375rem; }
    .rail-lang-label{ font-size:9.5px; }

    #sidebar{
      position: fixed;
      top: 60px; bottom: 0;
      left: 5.25rem;
      width: min(420px, calc(100vw - 5.25rem));
      z-index: 550;
      box-shadow: 6px 0 28px rgba(0,0,0,.35);
      transition: width .2s ease, transform .2s ease;
    }
    #layout.sidebar-collapsed #sidebar{ width:0; }
    #sidebar-toggle{
      left: calc(5.25rem + min(420px, calc(100vw - 5.25rem)) - 14px);
    }
    #layout.sidebar-collapsed #sidebar-toggle{ left: calc(5.25rem - 14px); }
  }

  /* HP: sidebar overlay jadi hampir selebar layar (nyisakan nav-rail
     ikon di kiri), dan stat-grid partner ditumpuk 1 kolom supaya
     angka & label tetap mudah dibaca di layar kecil. */
  @media (max-width: 560px){
    #sidebar{ width: calc(100vw - 5.25rem); }
    #sidebar-toggle{ left: calc(100vw - 14px); }

    .sidebar-head h2{ font-size:17px; }
    .stat-grid{ grid-template-columns: 1fr; }

    #layers-panel{ width: 180px; }
    .info-stack{ width: calc(100vw - 28px); }

    .camtrap-overlay{ padding: 10px; }
    .camtrap-panel{ max-height: 86vh; }
    .camtrap-panel-head{ padding: 14px 14px 12px; }
    .camtrap-grid{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: 12px 14px 16px; }
    .camtrap-lightbox-overlay{ padding: 14px; }
    .camtrap-lightbox-close{ top:10px; right:10px; }
  }