/* ============================================================================
 *  PETA MITIGASI BENCANA — KELURAHAN KAMPUNG BARU, BACUKIKI BARAT, PAREPARE
 *  Gaya khusus halaman peta. Melengkapi css/styles.css.
 * ========================================================================== */

:root {
  --zona-merah: #d32f2f;
  --zona-merah-tua: #8e1616;
  --zona-kuning: #f2b705;
  --zona-kuning-tua: #a37700;
  --zona-hijau: #43a047;
  --zona-hijau-tua: #1b5e20;
  --jalur: #1b5e20;
  --tk: #0d47a1;
}

/* Halaman ini butuh ruang lebih lebar daripada halaman lain */
.wadah-peta { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; }

/* Penanda halaman yang sedang dibuka pada menu */
.nav-menu li a.aktif { color: var(--kuning); font-weight: 700; }
.nav-menu li a.aktif::after { width: 100%; background: var(--kuning); }

/* ------------------------------- Ringkasan -------------------------------- */
.pm-ringkas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 22px;
}
.pm-ringkas-item {
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius-sm);
  padding: 14px 16px; box-shadow: var(--bayang-sm);
  border-left: 5px solid var(--hijau);
}
.pm-ringkas-item.is-merah  { border-left-color: var(--zona-merah); }
.pm-ringkas-item.is-kuning { border-left-color: var(--zona-kuning); }
.pm-ringkas-item.is-hijau  { border-left-color: var(--zona-hijau); }
.pm-ringkas-item.is-tk     { border-left-color: var(--tk); }
.pm-ringkas-label { font-size: .78rem; font-weight: 700; color: var(--tinta-lembut); text-transform: uppercase; letter-spacing: .4px; }
.pm-ringkas-angka { font-family: 'Poppins', sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--hijau-tua); line-height: 1.25; }
.pm-ringkas-item.is-merah  .pm-ringkas-angka { color: var(--zona-merah-tua); }
.pm-ringkas-item.is-kuning .pm-ringkas-angka { color: var(--zona-kuning-tua); }
.pm-ringkas-item.is-tk     .pm-ringkas-angka { color: var(--tk); }
.pm-ringkas-ket { font-size: .84rem; color: var(--tinta-lembut); }

/* -------------------------- Kerangka peta --------------------------------- */
.pm-peta-bingkai {
  position: relative; border-radius: var(--radius);
  /* `overflow: hidden` memang memotong isi yang meluber, tetapi kotaknya masih
     BISA digulir oleh peramban sendiri — misalnya ketika sesuatu di dalam peta
     mendapat fokus. Kalau itu terjadi, judul peta dan kotak peringatan di
     dalamnya ikut terseret ke atas lalu terpotong, tanpa ada batang gulir yang
     bisa dipakai warga untuk mengembalikannya. `overflow: clip` memotong tanpa
     pernah bisa digulir. Baris `hidden` di atasnya adalah cadangan untuk
     peramban lama yang belum mengenal `clip`. */
  overflow: hidden; overflow: clip;
  box-shadow: var(--bayang-lg); border: 3px solid var(--hijau-tua); background: #cfd8dc;
}
#petaMitigasi {
  width: 100%;
  height: clamp(460px, 78vh, 900px);
  background: #b0bec5;
  z-index: 1;
}
.pm-peta-bingkai.is-penuh { position: fixed; inset: 0; border-radius: 0; border-width: 0; z-index: 3000; }
/* Tinggi peta mengikuti bingkainya (yang sudah persis seukuran layar), bukan
   `100vh`. Di ponsel `100vh` menghitung layar seolah bilah alamat peramban
   tersembunyi, sehingga sisi bawah peta terpotong keluar layar. */
.pm-peta-bingkai.is-penuh #petaMitigasi { height: 100%; }

/* ------------------ Bilah keterangan melayang di atas peta ------------------ */
/* Judul peta, tombol keluar layar penuh, dan kotak peringatan dulu dipaku satu
   per satu ke sudut bingkai dengan `top`/`right` berangka tetap. Begitu salah
   satu teksnya bertambah baris (layar sempit, layar diputar, atau masuk mode
   layar penuh) kotak-kotak itu saling menimpa dan judulnya ikut terpotong.
   Sekarang ketiganya dikumpulkan di satu bilah: sisi kiri untuk judul, sisi
   kanan untuk tombol keluar dan peringatan yang ditumpuk ke bawah. Tata
   letaknya dihitung peramban, jadi tidak ada lagi angka yang bisa meleset. */
/* z-index 640 di sini menaruh SELURUH bilah di atas kotak peta (#petaMitigasi
   ber-z-index 1) berikut seluruh isinya — termasuk popup. Itulah yang membuat
   tombol "✕ Keluar" tetap bisa ditekan walau ada popup terbuka, tanpa perlu
   angka susun sendiri di tiap kotak. */
.pm-peta-atas {
  position: absolute; inset: 0 0 auto 0; z-index: 640;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px;
  /* Bilahnya sendiri tembus sentuhan supaya peta tetap bisa digeser di
     sela-sela kotak; hanya kotak di dalamnya yang menerima klik. */
  pointer-events: none;
}
.pm-peta-atas > * { pointer-events: auto; }
/* Kolom kanan: tombol keluar di atas, kotak peringatan di bawahnya.
   `margin-left: auto` menahannya tetap di sisi kanan walau kotak judul di
   sebelah kiri sedang disembunyikan — misalnya saat penunjuk arah menyala.
   Tanpa itu `justify-content: space-between` kehilangan lawan mainnya dan
   tombol "✕ Keluar" layar penuh melompat ke tepi kiri, tepat menimpa panel
   penunjuk arah. */
.pm-peta-atas-kanan {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  margin-left: auto; pointer-events: none;
}
.pm-peta-atas-kanan > * { pointer-events: auto; }
/* Di mode layar penuh bilah menempel ke tepi layar, jadi perlu menghindari
   poni/sudut membulat ponsel. */
.pm-peta-bingkai.is-penuh .pm-peta-atas {
  padding: calc(12px + env(safe-area-inset-top))
           calc(12px + env(safe-area-inset-right)) 0
           calc(12px + env(safe-area-inset-left));
}

/* ------------------- Tombol keluar dari mode layar penuh ------------------- */
/* Tombol "⛶ Layar Penuh" berada di bilah alat di bawah peta, jadi saat bingkai
   peta menutupi seluruh layar tombol itu ikut tertutup — di ponsel warga tidak
   punya cara keluar selain menutup halaman. Tombol ini duduk di dalam bingkai
   dan hanya muncul selama mode layar penuh aktif.

   Penyembunyiannya berlapis tiga supaya tombol ini tidak pernah lagi nongol di
   luar mode layar penuh:
     1. atribut `hidden` di HTML, dipasang/dilepas js/peta-mitigasi.js — tetap
        dipatuhi peramban walau berkas gaya ini gagal dimuat atau versinya
        masih yang lama dari cache;
     2. aturan `[hidden]` di bawah, agar gaya tombol tidak menimpa poin 1;
     3. aturan `:not(.is-penuh)`, jaring pengaman bila skrip tidak berjalan. */
.pm-keluar-penuh {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 0 16px;   /* 44px = ambang nyaman untuk jempol */
  background: rgba(17, 27, 22, .82); color: #fff;
  border: 2px solid rgba(255, 255, 255, .92); border-radius: 999px;
  backdrop-filter: blur(4px);
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .84rem; line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  transition: background var(--trans), transform var(--trans);
}
.pm-keluar-penuh[hidden] { display: none; }
.pm-peta-bingkai:not(.is-penuh) .pm-keluar-penuh { display: none; }
.pm-keluar-penuh:hover { background: var(--zona-merah); transform: translateY(-1px); }
.pm-keluar-penuh:focus-visible {
  background: var(--zona-merah); outline: 3px solid #fff; outline-offset: 2px;
}
.pm-keluar-tanda { font-size: 1.05rem; }

/* Kontrol Leaflet di kanan atas (zoom & arah utara) digeser turun sejauh tinggi
   kolom kanan bilah di atasnya. Tingginya diukur js/peta-mitigasi.js lalu
   ditaruh di --pm-atas-kanan, jadi jaraknya ikut menyesuaikan saat teks
   peringatan berpindah baris atau tombol keluar muncul/hilang. Angka cadangan
   dipakai selama skrip belum sempat mengukur. */
.leaflet-top.leaflet-right { padding-top: calc(var(--pm-atas-kanan, 92px) + 22px); }

/* Pita judul di atas peta (meniru kepala peta cetak) */
.pm-peta-kepala {
  flex: 0 1 auto; min-width: 0;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(4px);
  border-radius: 12px; padding: 10px 14px; box-shadow: var(--bayang);
  border-left: 5px solid var(--hijau); max-width: min(60%, 420px);
}
.pm-peta-kepala h3 {
  font-size: clamp(.92rem, 2vw, 1.12rem); color: var(--hijau-tua); line-height: 1.22; margin-bottom: 2px;
}
.pm-peta-kepala p { font-size: .76rem; color: var(--tinta-lembut); line-height: 1.35; }

/* Peringatan zona merah */
.pm-peringatan {
  background: linear-gradient(135deg, #e53935, #b71c1c); color: #fff;
  border-radius: 12px; padding: 9px 14px; box-shadow: var(--bayang);
  max-width: 210px; font-size: .78rem; line-height: 1.35; font-weight: 600;
}
.pm-peringatan b { display: block; font-family: 'Poppins', sans-serif; font-size: .9rem; margin-bottom: 2px; }

/* Popup yang terbuka kadang berhenti tepat di atas judul peta atau kotak
   peringatan — geseran otomatis Leaflet bisa mentok di batas wilayah peta atau
   di tepi layar ponsel. Kalau itu terjadi, dua teks bertumpuk dan sama-sama
   tidak terbaca. js/peta-mitigasi.js mengukur tumpang tindihnya lalu memasang
   kelas di bawah pada kotak yang benar-benar tertimpa saja; begitu popup
   ditutup atau peta digeser menjauh, kotaknya muncul kembali. Tempatnya tidak
   ikut bergeser (hanya disamarkan) supaya tombol "✕ Keluar" di sebelahnya
   tetap diam di tempat. */
.pm-peta-kepala, .pm-peringatan, .pm-kontrol, .leaflet-control-scale { transition: opacity var(--trans); }
.pm-peta-bingkai.tumpang-judul .pm-peta-kepala,
.pm-peta-bingkai.tumpang-peringatan .pm-peringatan,
.pm-peta-bingkai.tumpang-legenda .pm-kontrol { opacity: 0; pointer-events: none; }

/* =============== Pemberitahuan melayang di dalam peta ======================
   Tombol "🧭 Di Zona Mana Saya?" bisa ditekan warga yang sedang jauh dari
   Parepare. Untuk posisi seperti itu peta ini tidak punya data apa pun, jadi
   warga perlu diberi tahu langsung di dalam bingkai peta — bukan lewat popup
   Leaflet yang diletakkan pada koordinat warga (di luar batas geser peta,
   sehingga tidak akan pernah terlihat) dan bukan lewat `alert()` yang
   memblokir peta tanpa memberi keterangan apa pun.

   Kotak ini duduk di tengah bawah bingkai: di situ ia tidak bertabrakan
   dengan bilah judul di atas, kotak peringatan zona merah di kanan atas,
   maupun legenda di kanan bawah. z-index 700 menaruhnya di atas seluruh isi
   peta (kotak peta sendiri ber-z-index 1) sekaligus di atas tombol "✕ Keluar"
   layar penuh, sehingga pesannya tidak pernah tertutup. */
.pm-notif {
  position: absolute; z-index: 700; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: 8px;
  width: max-content; max-width: min(92%, 460px);
  background: rgba(255, 255, 255, .98); backdrop-filter: blur(4px);
  border-radius: var(--radius-sm); border-left: 5px solid var(--kuning);
  box-shadow: var(--bayang-lg);
  padding: 11px 12px 11px 14px;
  animation: pmNotifMasuk .22s ease-out;
}
/* `display: flex` di atas mengalahkan `display: none` bawaan peramban untuk
   atribut `hidden`, jadi penyembunyiannya ditegaskan lagi di sini — dengan
   penyaring atribut yang lebih khusus daripada aturan di atasnya. */
.pm-notif[hidden] { display: none; }
.pm-notif-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-notif-judul {
  font-family: 'Poppins', sans-serif; font-size: .86rem; line-height: 1.3;
  color: var(--zona-kuning-tua);
}
.pm-notif-pesan { font-size: .79rem; line-height: 1.45; color: var(--tinta); }
.pm-notif-koordinat {
  font-family: 'Courier New', monospace; font-size: .74rem;
  color: var(--tinta-lembut); word-break: break-word;
}
.pm-notif-koordinat[hidden] { display: none; }
.pm-notif-tutup {
  flex: 0 0 auto; width: 26px; height: 26px; margin: -2px -2px 0 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--tinta-lembut); font-size: .85rem; line-height: 1;
  transition: background var(--trans), color var(--trans);
}
.pm-notif-tutup:hover, .pm-notif-tutup:focus-visible {
  background: rgba(14, 60, 36, .1); color: var(--tinta);
}
@keyframes pmNotifMasuk {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===================== Penunjuk arah "1 alur" (mode navigasi) ===============
   Saat warga menekan "🧭 Tunjukkan Arah Jalan" di kotak info, peta masuk mode
   terfokus: hanya SATU alur menuju titik kumpul yang tergambar, dan panel di
   bawah ini menampilkan langkah demi langkahnya.

   Kotak-kotak yang tidak dipakai dalam mode itu disembunyikan supaya tidak ada
   dua penjelasan yang bersaing di layar sempit — judul peta, kotak peringatan
   zona merah, dan legenda lapisan. Semuanya muncul kembali begitu penunjuk arah
   ditutup, jadi tidak ada keadaan yang hilang. */
.pm-peta-bingkai.is-navigasi .pm-peta-kepala,
.pm-peta-bingkai.is-navigasi .pm-peringatan,
.pm-peta-bingkai.is-navigasi .pm-kontrol { display: none; }

/* Zona warna diredupkan agar garis alur yang terang tetap paling menonjol,
   tetapi konteks merah/kuning/hijaunya tidak sampai hilang. */
.pm-peta-bingkai.is-navigasi .leaflet-pmZona-pane { opacity: .5; }
.leaflet-pmZona-pane { transition: opacity var(--trans); }

/* Garis putih berjalan di atas alur — memberi rasa "arah jalannya ke sana". */
.pm-rute-aliran { animation: pmAlirRute 1.1s linear infinite; }
@keyframes pmAlirRute { to { stroke-dashoffset: -18; } }

.pm-panah-rute svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }

/* Penanda titik awal alur */
.pm-rute-mulai { position: relative; width: 20px; height: 20px; }
.pm-rute-mulai i {
  position: absolute; inset: 0; border-radius: 50%;
  background: #00e676; border: 3px solid #04340f;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 8px rgba(0, 0, 0, .45);
}
.pm-rute-mulai b {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  background: #04340f; color: #fff; font-family: 'Poppins', sans-serif;
  font-size: .62rem; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* ------------------------------ Panel arah -------------------------------- */
/* z-index 660 menaruh panel di atas bilah keterangan (640) DAN di atas seluruh
   isi peta termasuk popup — sebab #petaMitigasi ber-z-index 1 di dalam bingkai
   ini. Dengan begitu tombol "✕" pada panel tidak pernah bisa tertutup popup
   yang kebetulan terbuka di tempat yang sama. */
.pm-arah {
  position: absolute; z-index: 660; top: 12px; left: 12px;
  width: min(340px, 42%);
  /* Sisi bawah peta sudah dipakai batang skala Leaflet. Panel dibatasi agar
     berhenti di atasnya — di layar pendek (ponsel mendatar) daftar langkah yang
     panjang akan memenuhi seluruh tinggi peta dan menimpa skala itu. Sisa isinya
     digulir di dalam panel. */
  max-height: calc(100% - 64px);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(5px);
  border-radius: 14px; border-left: 5px solid var(--hijau);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .34);
  overflow: hidden; font-size: .82rem; color: var(--tinta);
}
/* Sama seperti tombol keluar layar penuh: `hidden` harus tetap menang walau
   berkas gaya ini dimuat belakangan atau `display:flex` di atas lebih spesifik. */
.pm-arah[hidden] { display: none; }
.pm-peta-bingkai.is-penuh .pm-arah {
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
}

/* Semua bagian panel bertinggi tetap KECUALI daftar langkah; daftar itulah yang
   boleh menyusut dan digulir. `min-height: 0` wajib ada — tanpa itu anak sebuah
   kolom flex menolak menyusut di bawah tinggi isinya, daftar langkah yang
   panjang akan mendorong tombol "✕ Keluar Penunjuk Arah" keluar dari panel, dan
   warga kehilangan jalan keluarnya. */
.pm-arah-kepala, .pm-arah-ringkas, .pm-arah-catatan,
.pm-arah-saklar, .pm-arah-kaki { flex: none; }
.pm-arah-gulir { flex: 1 1 auto; min-height: 0; }

.pm-arah-kepala {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 10px 14px;
  background: linear-gradient(135deg, #1b7a43, #0b3d16); color: #fff;
}
.pm-arah-judul { min-width: 0; flex: 1; }
.pm-arah-judul b {
  display: block; font-family: 'Poppins', sans-serif; font-size: .92rem;
  font-weight: 700; line-height: 1.25;
}
.pm-arah-judul small {
  display: block; font-size: .72rem; opacity: .92; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-arah-tutup {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .22);
  color: #fff; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans), transform var(--trans);
}
.pm-arah-tutup:hover { background: var(--zona-merah); transform: scale(1.06); }
.pm-arah-tutup:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.pm-arah-ringkas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--garis); border-bottom: 1px solid var(--garis);
}
.pm-arah-ringkas > div { background: #f7fbf8; padding: 8px 6px; text-align: center; }
.pm-arah-nilai {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: .95rem; color: var(--hijau-tua); line-height: 1.2;
}
.pm-arah-nilai.is-merah  { color: var(--zona-merah-tua); }
.pm-arah-nilai.is-kuning { color: var(--zona-kuning-tua); }
.pm-arah-nilai.is-hijau  { color: var(--zona-hijau-tua); }
.pm-arah-ringkas > div > span {
  display: block; font-size: .66rem; color: var(--tinta-lembut);
  text-transform: uppercase; letter-spacing: .3px; margin-top: 1px;
}

.pm-arah-catatan {
  margin: 10px 12px 0; padding: 8px 10px; border-radius: 9px;
  background: var(--hijau-muda); color: var(--hijau-tua);
  border-left: 4px solid var(--hijau); font-size: .75rem; line-height: 1.45;
}
.pm-arah-catatan.is-bahaya { background: #ffebee; color: #8e1616; border-left-color: var(--zona-merah); }
.pm-arah-catatan[hidden] { display: none; }

.pm-arah-saklar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: none; background: none; padding: 10px 12px 6px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .72rem;
  color: var(--hijau-tua); text-transform: uppercase; letter-spacing: .5px;
}
.pm-arah-saklar small { text-transform: none; letter-spacing: 0; color: var(--tinta-lembut); font-weight: 600; }
.pm-arah-tanda { transition: transform var(--trans); font-size: .9rem; }
.pm-arah.is-lipat .pm-arah-tanda { transform: rotate(-90deg); }
.pm-arah.is-lipat .pm-arah-gulir { display: none; }

.pm-arah-gulir { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px; }
.pm-arah-langkah { list-style: none; margin: 0; padding: 0; }
.pm-arah-item {
  display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left;
  border: none; background: none; padding: 7px 6px; border-radius: 9px;
  border-bottom: 1px dashed var(--garis); color: inherit; font: inherit;
  transition: background var(--trans);
}
.pm-arah-langkah li:last-child .pm-arah-item { border-bottom: none; }
.pm-arah-item:hover { background: var(--hijau-muda); }
.pm-arah-item.is-terpilih { background: var(--hijau-muda); box-shadow: inset 0 0 0 2px var(--hijau-terang); }
.pm-arah-item:focus-visible { outline: 3px solid var(--hijau); outline-offset: -1px; }
.pm-arah-ikon {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hijau-muda); color: var(--hijau-tua);
  font-size: .92rem; font-weight: 800; line-height: 1;
}
.pm-arah-item.is-mulai  .pm-arah-ikon { background: #e3f2fd; }
.pm-arah-item.is-tujuan .pm-arah-ikon { background: var(--tk); color: #fff; }
.pm-arah-teks { min-width: 0; }
.pm-arah-teks b { display: block; font-size: .78rem; font-weight: 700; line-height: 1.35; }
.pm-arah-teks span { display: block; font-size: .72rem; color: var(--tinta-lembut); }

.pm-arah-kaki {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--garis); background: #f7fbf8;
}
.pm-arah-tombol {
  flex: 1; border: 1px solid var(--garis); background: var(--putih); color: var(--hijau-tua);
  border-radius: 999px; padding: 9px 10px; font-size: .76rem; font-weight: 700;
  min-height: 40px; transition: background var(--trans), border-color var(--trans);
}
.pm-arah-tombol:hover { background: var(--hijau-muda); border-color: var(--hijau-terang); }
.pm-arah-tombol.is-keluar { background: var(--hijau); border-color: var(--hijau); color: #fff; flex: 1.35; }
.pm-arah-tombol.is-keluar:hover { background: var(--hijau-tua); border-color: var(--hijau-tua); }
.pm-arah-tombol:focus-visible { outline: 3px solid var(--hijau-tua); outline-offset: 2px; }

/* Alat bantu di bawah peta */
.pm-alat {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 14px; background: var(--putih);
  border: 1px solid var(--garis); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--bayang-sm);
}
.pm-tombol-alat {
  border: 1px solid var(--garis); background: #f7fbf8; color: var(--hijau-tua);
  border-radius: 999px; padding: 8px 15px; font-size: .85rem; font-weight: 700;
  transition: background var(--trans), transform var(--trans), border-color var(--trans);
}
.pm-tombol-alat:hover { background: var(--hijau-muda); border-color: var(--hijau-terang); transform: translateY(-2px); }
.pm-tombol-alat.is-aktif { background: var(--hijau); color: #fff; border-color: var(--hijau); }
.pm-alat-petunjuk { margin-left: auto; font-size: .8rem; color: var(--tinta-lembut); }

/* ------------------------ Kontrol di dalam peta ---------------------------- */
/* Leaflet hanya menetralkan `max-width` pada `.leaflet-overlay-pane` bawaannya,
   sedangkan css/styles.css memasang `svg { max-width: 100% }` untuk seluruh situs.
   Peta ini memakai pane buatan sendiri (agar urutan lapisan tetap), jadi aturan
   itu perlu diperluas — tanpa ini SVG di pane tersebut menciut ke lebar 0 dan
   zona, jalan, serta jalur evakuasi tidak tergambar sama sekali. */
.leaflet-container svg { max-width: none !important; max-height: none !important; }

/* Saat sebuah jalan / zona / jalur diklik, peramban menaruh fokus pada elemen
   SVG-nya dan menggambar kotak garis hitam sebesar kotak pembatas elemen itu —
   di peta hasilnya terlihat seperti kotak nyasar. Outline-nya dimatikan untuk
   klik tetikus, tetapi tetap ditampilkan bagi pengguna papan ketik
   (`:focus-visible`) supaya navigasi keyboard tidak kehilangan penanda fokus. */
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container .leaflet-marker-icon:focus,
.leaflet-container .leaflet-popup-content-wrapper:focus { outline: none; }
.leaflet-container path.leaflet-interactive:focus-visible {
  outline: 3px solid var(--hijau-tua);
  outline-offset: 2px;
}

.pm-kontrol {
  background: rgba(255, 255, 255, .96); border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .28); padding: 8px 12px 10px;
  font-size: .8rem; line-height: 1.45; color: var(--tinta);
  max-width: 260px;
}
.pm-kontrol-saklar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: none; background: none; padding: 2px 0 6px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem;
  color: var(--hijau-tua); text-transform: uppercase; letter-spacing: .5px;
}
.pm-kontrol-tanda { transition: transform var(--trans); font-size: .9rem; }
/* Daftar legenda dibatasi dua-duanya: sekian persen tinggi jendela (supaya
   tidak mendominasi layar) DAN sisa ruang nyata di bawah tombol zoom / penunjuk
   utara, yang diukur js/peta-mitigasi.js ke --pm-legenda-isi. Tanpa batas kedua
   itu legenda menutupi tombol zoom di peta yang pendek. */
.pm-kontrol-isi { max-height: min(58vh, var(--pm-legenda-isi, 58vh)); overflow-y: auto; }
.pm-kontrol.is-lipat .pm-kontrol-isi { display: none; }
.pm-kontrol.is-lipat { padding-bottom: 8px; }
.pm-kontrol.is-lipat .pm-kontrol-tanda { transform: rotate(-90deg); }
.pm-kontrol h4 {
  font-size: .8rem; color: var(--hijau-tua); margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: .5px;
}
.pm-kontrol h4:not(:first-child) { margin-top: 11px; }
.pm-legenda-baris { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.pm-swatch { width: 20px; height: 13px; border-radius: 3px; flex: none; margin-top: 3px; border: 1px solid rgba(0, 0, 0, .28); }
.pm-swatch-merah  { background: rgba(211, 47, 47, .72); }
.pm-swatch-kuning { background: rgba(242, 183, 5, .72); }
.pm-swatch-hijau  { background: rgba(67, 160, 71, .62); }
.pm-swatch-batas  { background: transparent; border: 2px dashed var(--zona-merah); }
.pm-swatch-jalan  { background: #fff; border: 1px solid #90a4ae; height: 6px; margin-top: 7px; }
.pm-legenda-teks b { display: block; font-size: .78rem; }
.pm-legenda-teks span { font-size: .72rem; color: var(--tinta-lembut); }
.pm-panah-contoh { color: var(--jalur); font-size: 1rem; line-height: 1; margin-top: 1px; }

.pm-lapis-baris { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; cursor: pointer; }
.pm-lapis-baris input { accent-color: var(--hijau); width: 15px; height: 15px; cursor: pointer; }

/* Skala & arah utara */
.pm-utara {
  background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 6px 9px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .25); text-align: center;
  font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--hijau-tua); line-height: 1;
}
.pm-utara span { display: block; font-size: 1.35rem; }
.pm-utara small { font-size: .62rem; letter-spacing: 1px; color: var(--tinta-lembut); font-weight: 700; }

/* ------------------------------- Penanda ---------------------------------- */
.pm-penanda-tk { background: none; border: none; }
.pm-tk-titik {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #1e88e5, #0d47a1);
  border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; position: relative;
}
.pm-tk-titik::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 3px solid rgba(13, 71, 161, .65); animation: pmDenyut 2s ease-out infinite;
}
@keyframes pmDenyut {
  0%   { transform: scale(.75); opacity: .95; }
  100% { transform: scale(1.65); opacity: 0; }
}
.pm-tk-label {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  background: var(--tk); color: #fff; font-size: .66rem; font-weight: 800;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); font-family: 'Poppins', sans-serif;
}

.pm-panah { background: none; border: none; }
.pm-panah svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }

.pm-fasilitas-ikon {
  background: rgba(255, 255, 255, .96); border: 2px solid var(--hijau);
  border-radius: 50%; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.pm-label-jalan {
  background: none; border: none; white-space: nowrap;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .68rem;
  color: #14261c; text-shadow:
    -1.4px -1.4px 0 #fff, 1.4px -1.4px 0 #fff, -1.4px 1.4px 0 #fff, 1.4px 1.4px 0 #fff,
     0 1.6px 0 #fff, 0 -1.6px 0 #fff, 1.6px 0 0 #fff, -1.6px 0 0 #fff;
  pointer-events: none;
}
/* Nama jalan utama saat peta di-zoom jauh — sedikit lebih besar agar terbaca */
.pm-label-utama { font-size: .74rem; letter-spacing: .2px; }

.pm-label-kel {
  background: none; border: none; white-space: nowrap; text-align: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .72rem;
  color: #37474f; text-transform: uppercase; letter-spacing: .6px; opacity: .9;
  text-shadow: -1.4px -1.4px 0 #fff, 1.4px -1.4px 0 #fff, -1.4px 1.4px 0 #fff, 1.4px 1.4px 0 #fff;
  pointer-events: none;
}

.pm-posisi-saya {
  width: 18px; height: 18px; border-radius: 50%; background: #1e88e5;
  border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(30, 136, 229, .4), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ------------------------------- Popup ------------------------------------ */
/* Kotak info dijaga sependek mungkin. Saat popup dibuka Leaflet menggeser peta
   agar kotaknya muat seluruhnya — makin tinggi kotaknya, makin jauh peta
   tersentak ke atas dan makin hilang titik yang baru saja diketuk warga dari
   pandangan. Isi yang panjang sudah dipindah ke panel penunjuk arah, dan jarak
   antarbarisnya dirapatkan di sini. */
.leaflet-popup-content-wrapper {
  border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
  /* memotong isi yang digulir mengikuti sudut membulat kartu, sehingga
     bagian yang bisa digulir tidak tampak seperti kotak kedua yang ditempel */
  overflow: hidden;
}
.leaflet-popup-content { margin: 0; width: 252px !important; font-family: 'Nunito', sans-serif; }

/* Isi yang melebihi tinggi peta digulir DI DALAM kartu. Batang gulir bawaan
   peramban tebal, bersudut siku, dan berdiri persis di bawah tombol "✕"
   sehingga tombol itu tampak tertimpa. Di sini batangnya dibuat tipis,
   membulat, senada warna kartu, dan diberi jarak dari tepi. */
.leaflet-popup-scrolled {
  border: none; scrollbar-width: thin; overscroll-behavior: contain;
  scrollbar-color: rgba(14, 94, 51, .3) transparent;
}
.leaflet-popup-scrolled::-webkit-scrollbar { width: 6px; }
.leaflet-popup-scrolled::-webkit-scrollbar-track { background: transparent; }
.leaflet-popup-scrolled::-webkit-scrollbar-thumb {
  background: rgba(14, 94, 51, .3); border-radius: 999px;
}
.leaflet-popup-scrolled::-webkit-scrollbar-thumb:hover { background: rgba(14, 94, 51, .5); }
/* Tombol tutup digeser 8 px ke dalam — persis di luar jangkauan batang gulir
   selebar 6 px di atas — sehingga keduanya tidak pernah bertumpuk. Kepala
   popup selalu menyisakan ruang selebar tombol itu di sisi kanannya. */
.leaflet-container a.leaflet-popup-close-button { top: 4px; right: 8px; }

.pm-popup-kepala {
  padding: 9px 36px 9px 13px; border-radius: 14px 14px 0 0; color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .9rem; line-height: 1.22;
}
.pm-popup-kepala small { display: block; font-weight: 600; font-size: .7rem; opacity: .92; margin-top: 1px; }
.pm-kepala-merah  { background: linear-gradient(135deg, #e53935, #8e1616); }
.pm-kepala-kuning { background: linear-gradient(135deg, #f2b705, #a37700); }
.pm-kepala-hijau  { background: linear-gradient(135deg, #4caf50, #1b5e20); }
.pm-kepala-biru   { background: linear-gradient(135deg, #1e88e5, #0d47a1); }
.pm-popup-isi { padding: 8px 13px 11px; font-size: .8rem; color: var(--tinta); line-height: 1.42; }
.pm-popup-baris { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--garis); }
.pm-popup-baris:last-of-type { border-bottom: none; }
/* Lebar kolom label dipilih agar label terpanjang muat dalam satu baris —
   label yang patah dua ikut menaikkan tinggi barisnya, dan tinggi kotak
   inilah yang menentukan seberapa jauh peta tersentak saat popup dibuka. */
.pm-popup-baris b { flex: none; width: 72px; color: var(--tinta-lembut); font-weight: 700; font-size: .72rem; }
.pm-popup-baris span { flex: 1; min-width: 0; }
.pm-popup-baris small { color: var(--tinta-lembut); font-size: .72rem; }
.pm-popup-aksi {
  margin-top: 7px; padding: 7px 10px; border-radius: 9px;
  background: var(--hijau-muda); color: var(--hijau-tua);
  font-size: .76rem; line-height: 1.4; border-left: 4px solid var(--hijau);
}
.pm-popup-aksi.is-bahaya { background: #ffebee; color: #8e1616; border-left-color: var(--zona-merah); }
.pm-popup-aksi.is-siaga  { background: #fff8e1; color: #7a5900; border-left-color: var(--zona-kuning); }
.pm-popup-aksi b { display: block; margin-bottom: 2px; font-family: 'Poppins', sans-serif; }
/* `.leaflet-container a` mewarnai semua tautan biru, jadi tombol ini harus
   ditulis lebih spesifik agar tetap putih di atas latar hijau. */
.leaflet-container a.pm-popup-tombol {
  display: block; margin-top: 7px; text-align: center; background: var(--hijau);
  color: #fff; font-weight: 700; font-size: .78rem; padding: 7px 10px; border-radius: 999px;
  text-decoration: none; transition: filter var(--trans);
}
.leaflet-container a.pm-popup-tombol:hover,
.leaflet-container a.pm-popup-tombol:focus { filter: brightness(1.1); color: #fff; }
/* Aksi kedua di dalam popup ("Tunjukkan titik kumpul") dibuat lebih kalem
   supaya tombol utama — "🧭 Tunjukkan Arah Jalan" — jelas mana yang dimaksud
   saat warga sedang buru-buru. */
.leaflet-container a.pm-popup-tombol.is-kedua {
  margin-top: 5px; padding: 5px 10px; font-size: .74rem;
  background: var(--hijau-muda); color: var(--hijau-tua);
  border: 1px solid var(--hijau-terang);
}
.leaflet-container a.pm-popup-tombol.is-kedua:hover,
.leaflet-container a.pm-popup-tombol.is-kedua:focus { color: var(--hijau-tua); filter: brightness(.98); }
/* Kaki kotak info. Di layar lebar kedua tombol ditumpuk ke bawah seperti biasa;
   aturan berdampingan untuk ponsel ada di media query di bawah berkas ini. */
.pm-popup-kaki { display: flex; flex-direction: column; }
/* Huruf monospace lebih lebar daripada huruf biasa. Ukurannya dipilih agar
   koordinat lengkap muat dalam SATU baris — kalau patah dua, kotak info
   bertambah tinggi dan peta ikut tersentak lebih jauh saat popup dibuka. */
.pm-koordinat { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .66rem; }

/* --------------------------- Instruksi evakuasi ---------------------------- */
.pm-instruksi { display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: pmlangkah; }
.pm-instruksi-item {
  display: flex; gap: 14px; align-items: flex-start; background: var(--putih);
  border: 1px solid var(--garis); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--bayang-sm);
  transition: transform var(--trans), box-shadow var(--trans);
}
.pm-instruksi-item:hover { transform: translateY(-4px); box-shadow: var(--bayang); }
.pm-instruksi-nomor {
  counter-increment: pmlangkah; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hijau-terang), var(--hijau-tua)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem;
}
.pm-instruksi-nomor::before { content: counter(pmlangkah); }
.pm-instruksi-teks h3 { font-size: 1.02rem; color: var(--hijau-tua); margin-bottom: 4px; }
.pm-instruksi-teks p { font-size: .93rem; color: var(--tinta-lembut); }
.pm-instruksi-teks strong { color: var(--tinta); }

/* Ikon batas kelurahan: kotak bergaris putus-putus, meniru simbol di peta */
.pm-ikon-batas {
  display: block; width: 26px; height: 20px; border-radius: 4px;
  border: 2.5px dashed var(--zona-merah);
}

/* ------------------------------ Kartu zona --------------------------------- */
.pm-zona-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pm-zona-kartu {
  background: var(--putih); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--bayang-sm); border: 1px solid var(--garis);
  transition: transform var(--trans), box-shadow var(--trans);
}
.pm-zona-kartu:hover { transform: translateY(-5px); box-shadow: var(--bayang); }
.pm-zona-kepala { padding: 14px 18px; color: #fff; }
.pm-zona-kepala h3 { font-size: 1.06rem; margin-bottom: 2px; }
.pm-zona-kepala p { font-size: .8rem; opacity: .95; }
.pm-zona-isi { padding: 15px 18px 18px; }
.pm-zona-isi dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: .88rem; }
.pm-zona-isi dt { color: var(--tinta-lembut); font-weight: 700; font-size: .8rem; }
.pm-zona-isi dd { color: var(--tinta); }
.pm-zona-aksi { margin-top: 12px; font-size: .88rem; color: var(--tinta-lembut); line-height: 1.55; }
.pm-zona-aksi b { color: var(--tinta); }

/* ----------------------------- Nomor darurat ------------------------------- */
.pm-darurat-grid {
  display: grid; gap: 12px;
  /* auto-fit supaya tiap kartu tetap cukup lebar dan teksnya tidak menumpuk */
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.pm-darurat {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius-sm);
  padding: 14px 15px; box-shadow: var(--bayang-sm); color: var(--tinta);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.pm-darurat:hover { transform: translateY(-4px); box-shadow: var(--bayang); border-color: var(--hijau-terang); color: var(--tinta); }
.pm-darurat-ikon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--hijau-muda);
}
.pm-darurat-nomor { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.32rem; color: var(--hijau-tua); line-height: 1.15; }
.pm-darurat-nama { font-size: .8rem; color: var(--tinta-lembut); line-height: 1.35; }
.pm-darurat.is-utama { background: linear-gradient(135deg, #e53935, #b71c1c); border-color: transparent; color: #fff; }
.pm-darurat.is-utama:hover { color: #fff; }
.pm-darurat.is-utama .pm-darurat-ikon { background: rgba(255, 255, 255, .2); }
.pm-darurat.is-utama .pm-darurat-nomor { color: #fff; font-size: 1.7rem; }
.pm-darurat.is-utama .pm-darurat-nama { color: #ffdad6; }

/* ------------------------------- Sumber data ------------------------------- */
.pm-sumber {
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--bayang-sm);
}
.pm-sumber h3 { font-size: 1rem; color: var(--hijau-tua); margin-bottom: 10px; }
.pm-sumber ul { margin: 0 0 4px; padding-left: 20px; }
.pm-sumber li { font-size: .9rem; color: var(--tinta-lembut); margin-bottom: 6px; line-height: 1.55; }
.pm-sumber li strong { color: var(--tinta); }
.pm-catatan {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: #fff8e1; border-left: 4px solid var(--oranye);
  font-size: .87rem; color: #6b4e00; line-height: 1.6;
}

/* --------------------------------- Tabel ----------------------------------- */
.pm-tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); border: 1px solid var(--garis); }
.pm-tabel { width: 100%; border-collapse: collapse; background: var(--putih); font-size: .88rem; min-width: 520px; }
.pm-tabel th, .pm-tabel td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--garis); }
.pm-tabel thead th { background: var(--hijau-tua); color: #fff; font-family: 'Poppins', sans-serif; font-size: .82rem; font-weight: 700; }
.pm-tabel tbody tr:last-child td { border-bottom: none; }
.pm-tabel tbody tr:nth-child(even) { background: #f7fbf8; }
.pm-tabel td:last-child, .pm-tabel th:last-child { text-align: center; }
.pm-lencana-kelas {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; font-family: 'Poppins', sans-serif;
}
.pm-kelas-tinggi { background: #ffebee; color: #b71c1c; }
.pm-kelas-sedang { background: #fff8e1; color: #8a6100; }
.pm-kelas-rendah { background: #e8f5e9; color: #1b5e20; }

/* ------------------------------ Responsif ---------------------------------- */
@media (min-width: 620px) {
  .pm-ringkas { grid-template-columns: repeat(4, 1fr); }
  .pm-instruksi { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .pm-zona-grid { grid-template-columns: repeat(3, 1fr); }
  .pm-instruksi { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  /* Di layar kecil peta perlu ruang sebesar mungkin */
  #petaMitigasi { height: clamp(430px, 68vh, 620px); }
  .pm-peta-atas { padding: 8px; gap: 8px; }
  .pm-peta-atas-kanan { gap: 8px; }
  .pm-peta-bingkai.is-penuh .pm-peta-atas {
    padding: calc(8px + env(safe-area-inset-top))
             calc(8px + env(safe-area-inset-right)) 0
             calc(8px + env(safe-area-inset-left));
  }
  .pm-peta-kepala { max-width: 52%; padding: 7px 10px; }
  .pm-peta-kepala p { display: none; }
  .pm-peringatan { max-width: 132px; font-size: .68rem; padding: 7px 9px; line-height: 1.3; }
  /* Pemberitahuan posisi di luar area dipadatkan: di layar sempit ia harus
     tetap terbaca utuh tanpa menutupi hampir seluruh peta. */
  .pm-notif { bottom: 10px; max-width: calc(100% - 16px); padding: 9px 10px 9px 12px; }
  .pm-notif-judul { font-size: .8rem; }
  .pm-notif-pesan { font-size: .75rem; }
  /* Petanya pendek, jadi kotak pemberitahuan selebar ini pasti bersinggungan
     dengan legenda lapisan (kanan bawah) dan bar skala (kiri bawah). Keduanya
     disamarkan hanya selama pesannya tampil — cara yang sama dipakai untuk
     kotak judul yang tertimpa popup — lalu muncul kembali sendiri begitu
     pesannya hilang. Di layar lebar keduanya tidak bertabrakan, jadi tidak ada
     yang disembunyikan. */
  .pm-peta-bingkai.tumpang-notif .pm-kontrol,
  .pm-peta-bingkai.tumpang-notif .leaflet-control-scale { opacity: 0; pointer-events: none; }
  .pm-keluar-penuh { padding: 0 13px; font-size: .8rem; }
  .pm-alat-petunjuk { display: none; }
  .pm-kontrol { font-size: .74rem; max-width: 200px; }
  .pm-kontrol-isi { max-height: min(40vh, var(--pm-legenda-isi, 40vh)); }
  .pm-kontrol-saklar { font-size: .72rem; }
  .pm-swatch { width: 16px; height: 11px; }
  .pm-alat { gap: 6px; padding: 10px; }
  .pm-tombol-alat { font-size: .78rem; padding: 7px 12px; }
  /* Kotak peringatan lebih sempit di sini sehingga teksnya memakai lebih banyak
     baris — angka cadangannya ikut dinaikkan. Selebihnya diukur oleh skrip. */
  .leaflet-top.leaflet-right { padding-top: calc(var(--pm-atas-kanan, 96px) + 16px); }
}

/* --------- Panel arah dipadatkan di layar pendek tapi masih lebar ---------- */
/* Ponsel yang dipegang mendatar: tingginya sedikit, lebarnya cukup. Panel tetap
   di sisi kiri (menjadikannya lembar bawah di sini akan menyisakan peta setipis
   pita), hanya dirampingkan dan dipadatkan. */
@media (min-width: 701px) and (max-height: 560px) {
  .pm-arah { width: min(300px, 38%); font-size: .78rem; }
  .pm-arah-kepala { padding: 8px 10px 8px 12px; }
  .pm-arah-judul b { font-size: .84rem; }
  .pm-arah-judul small { font-size: .68rem; }
  .pm-arah-ringkas > div { padding: 6px 4px; }
  .pm-arah-nilai { font-size: .85rem; }
  .pm-arah-catatan { margin: 8px 10px 0; padding: 7px 9px; font-size: .72rem; }
  .pm-arah-saklar { padding: 8px 10px 4px; }
  .pm-arah-gulir { padding: 0 10px; }
  .pm-arah-kaki { padding: 8px 10px; }
  .pm-arah-tombol { font-size: .72rem; padding: 8px; min-height: 36px; }
}

/* ------------- Panel arah sebagai lembar bawah di layar sempit ------------- */
/* Di ponsel tegak, panel melayang di sudut kiri atas akan menutupi justru
   bagian peta yang sedang dijelaskannya — lebar layarnya tidak cukup untuk
   keduanya. Di sini panel dipindah menjadi lembar yang menempel di sisi bawah,
   dan daftar langkahnya dimulai dalam keadaan terlipat (diatur
   js/peta-mitigasi.js) supaya lembarannya tetap pendek. */
@media (max-width: 700px) {
  .pm-arah {
    top: auto; right: 0; bottom: 0; left: 0;
    width: auto; max-height: 62%;
    border-radius: 16px 16px 0 0;
    border-left: none; border-top: 4px solid var(--hijau);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pm-peta-bingkai.is-penuh .pm-arah {
    top: auto; left: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
  }
  .pm-arah-kepala { padding: 9px 10px 9px 12px; }
  .pm-arah-judul b { font-size: .86rem; }
  .pm-arah-judul small { font-size: .68rem; }
  .pm-arah-ringkas > div { padding: 6px 4px; }
  .pm-arah-nilai { font-size: .86rem; }
  .pm-arah-gulir { padding: 0 10px; max-height: 32vh; }
  .pm-arah-kaki { padding: 8px 10px; }
  .pm-arah-tombol { font-size: .72rem; padding: 8px; }

  /* Skala peta dan atribusi ada di sisi bawah juga — dinaikkan setinggi
     lembar arah agar tidak tertimbun. Tingginya diukur js/peta-mitigasi.js
     ke --pm-arah-tinggi. */
  .pm-peta-bingkai.is-navigasi .leaflet-bottom {
    transform: translateY(calc(-1 * var(--pm-arah-tinggi, 0px)));
    transition: transform var(--trans);
  }
}

/* --------------------- Popup ringkas untuk layar kecil --------------------- */
/* Berlaku di ponsel tegak (layar sempit) maupun mendatar (layar pendek): lebar,
   huruf, dan jarak antarbaris dikecilkan supaya kotak info tidak menutupi
   hampir seluruh peta. Kalimat panjang di dalamnya ikut diringkas dari
   js/peta-mitigasi.js. */
@media (max-width: 700px), (max-height: 500px) {
  /* Sedikit lebih lebar daripada sebelumnya justru membuat kotaknya PENDEK:
     teks yang tadinya patah jadi tiga baris kini cukup satu-dua baris, dan
     tinggi kotak itulah yang menentukan seberapa jauh peta tersentak. */
  .leaflet-popup-content { width: min(248px, 74vw) !important; }
  .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
  .pm-popup-kepala {
    /* sisi kanan diberi ruang supaya judul tidak tertimpa tombol tutup */
    padding: 7px 36px 7px 10px; border-radius: 12px 12px 0 0;
    font-size: .8rem; line-height: 1.18;
  }
  .pm-popup-kepala small { font-size: .65rem; margin-top: 1px; }
  .pm-popup-isi { padding: 6px 10px 8px; font-size: .74rem; line-height: 1.38; }
  .pm-popup-baris { padding: 3px 0; gap: 6px; }
  .pm-popup-baris b { width: 66px; font-size: .64rem; }
  .pm-popup-baris small { font-size: .66rem; }
  .pm-koordinat { font-size: .63rem; }
  .pm-popup-aksi {
    margin-top: 6px; padding: 6px 8px; border-radius: 8px;
    font-size: .7rem; line-height: 1.36; border-left-width: 3px;
  }
  /* Kedua tombol berdampingan dan kata "Tunjukkan" disembunyikan: satu baris
     tombol, bukan dua. Di peta ponsel yang pendek, dua baris tombol saja sudah
     cukup membuat kotak info menyentak peta beberapa puluh piksel. */
  .pm-popup-kaki { flex-direction: row; gap: 6px; }
  .pm-popup-kaki > a { flex: 1; min-width: 0; }
  .pm-tombol-panjang { display: none; }
  .leaflet-container a.pm-popup-tombol { margin-top: 7px; padding: 7px 6px; font-size: .71rem; }
  .leaflet-container a.pm-popup-tombol.is-kedua { margin-top: 7px; padding: 7px 6px; font-size: .71rem; }
  /* Tombol tutup dibuat lebih besar dan putih agar gampang ditekan di atas
     kepala popup yang berwarna — peta cepat terlihat lagi. */
  .leaflet-container a.leaflet-popup-close-button {
    width: 26px; height: 26px; font-size: 18px; line-height: 25px;
    color: rgba(255, 255, 255, .92);
  }
  .leaflet-container a.leaflet-popup-close-button:hover,
  .leaflet-container a.leaflet-popup-close-button:focus { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-tk-titik::after { animation: none; }
  .pm-rute-aliran { animation: none; }
  .pm-notif { animation: none; }
  .pm-instruksi-item:hover, .pm-zona-kartu:hover, .pm-darurat:hover { transform: none; }
  .pm-arah-tutup:hover { transform: none; }
}

@media print {
  .nav, .pm-alat, .footer, .pm-peringatan, .pm-keluar-penuh, .pm-notif { display: none !important; }
  .pm-peta-bingkai { box-shadow: none; }
  #petaMitigasi { height: 520px; }
}