/* =====================================================================
   SI-BERSINAR — tata letak aplikasi
   ===================================================================== */

/* Kop membentang penuh di paling atas; sisi kiri dan isi duduk di
   bawahnya, bukan di sebelahnya. Karena itu kerangkanya kolom, bukan
   baris — barisnya pindah ke #badan. */
/* Cangkang aplikasi, bukan dokumen: yang menggulung adalah #isi dan
   daftar layer di sisi kiri, masing-masing di dalam kotaknya sendiri.
   Tanpa kunci ini, satu daftar yang kepanjangan menyeret SELURUH
   halaman ikut memanjang — kop, peta dan bilah status ikut tergulung
   ke atas dan muncul bilah gulung mendatar di kaki layar. */
html, body { overflow: hidden }

#kerangka { display: flex; flex-direction: column; height: 100%; }
#badan { flex: 1; min-height: 0; display: flex; }

/* ---------------- sisi ---------------- */
#sisi {
  width: var(--sisi); flex-shrink: 0; background: var(--permukaan);
  border-right: 1px solid var(--garis); display: flex; flex-direction: column;
  padding: 14px 12px; gap: 14px;
  /* Tingginya ditentukan #badan, dan daftar layer di dalamnya yang
     menggulung — jadi min-height:0 sudah cukup untuk mengurung isinya.
     Sengaja TIDAK overflow:hidden: tombol lipat menggantung separuh di
     luar tepi kanan, dan mengurung luapan di sini akan memotongnya
     tepat di tengah. */
  min-height: 0;
}
/* Blok merek di dalam kop: lambang di kiri, tiga baris teks di
   kanannya — nama sistem, kepanjangannya, lalu penyelenggaranya.
   Lambang disejajarkan ke TENGAH karena pitanya rendah dan ketiga
   barisnya sudah rapat. */
.merek {
  display: flex; align-items: center; gap: 12px;
  color: var(--teks); min-width: 0;
}
.merek img { flex: 0 0 auto }
.merek-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.merek-teks b { font-size: 17px; font-weight: 800; letter-spacing: .07em; line-height: 1.1 }
.merek-teks i {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--teks-2);
  letter-spacing: .01em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.merek-teks small {
  font-size: 10px; font-weight: 600; color: var(--teks-3);
  letter-spacing: .01em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Menu tinggal dua baris; yang bergulung sekarang daftar layer di
   bawahnya. Dengan flex:1 di sini, menu yang hampir kosong tetap
   mengambil seluruh tinggi dan daftar layer terdorong ke dasar. */
/* #menu sudah tidak dipakai: isinya pindah ke kop (Peta) dan ke
   menu Data di puncak sisi kiri. */

.menu-grup {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--teks-3);
  padding: 14px 10px 5px;
}
.menu-a {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px;
  border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--teks-2);
}
.menu-a:hover { background: var(--lembut); color: var(--teks) }
.menu-a.aktif { background: var(--utama-isi); color: var(--utama) }
.menu-a svg { flex-shrink: 0 }
.menu-a .hitung { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--teks-3) }

.sisi-kaki { border-top: 1px solid var(--garis); padding-top: 10px }
.akun { display: flex; align-items: center; gap: 10px; padding: 4px 6px }
.akun-bulat {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--utama-isi); color: var(--utama);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.akun-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 }
.akun-teks b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.akun-teks i { font-style: normal; font-size: 10.5px; color: var(--teks-3) }

/* ---------------- kop ---------------- */
#utama { flex: 1; min-width: 0; display: flex; flex-direction: column }
#kop {
  flex-shrink: 0; background: var(--permukaan); border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; gap: 14px; padding: 8px 18px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 40;
}
/* Merek mengambil ruang yang tersisa, kotak cari menempel di ujung
   kanan. Keduanya di pita yang sama, dari ujung ke ujung. */
#kop .merek { flex: 1; min-width: 0 }
#kop-aksi { display: flex; align-items: center; gap: 8px; flex: 0 0 auto }

/* ---------------------------------------------------------------------
   ALAT PETA DI TENGAH KOP

   Sembilan ikon, tanpa satu pun kata. Merek di satu ujung, alat di
   tengah, kotak cari dan pengaturan di ujung seberangnya. Merek diberi
   lebar maksimum supaya kalimat panjangnya tidak mendorong deretan alat
   keluar dari tengah — itulah gunanya flex:0 1 auto di sini, bukan
   flex:1 seperti sebelumnya.
   --------------------------------------------------------------------- */
#kop .merek { flex: 0 1 auto; max-width: 46% }
#kop-alat {
  flex: 1 1 auto; display: flex; justify-content: center;
  align-items: center; gap: 2px; min-width: 0;
}
.kop-alat-tbl {
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 0; border-radius: 9px; background: none;
  color: var(--teks-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kop-alat-tbl svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.kop-alat-tbl:hover { background: var(--lembut); color: var(--teks) }
.kop-alat-tbl.aktif { background: var(--utama-isi); color: var(--utama) }

/* Pengaturan duduk sendirian di kanan kotak cari: ia bukan alat kerja,
   melainkan tempat menyetel. Dipisah supaya tidak terbaca sebagai alat
   kesepuluh. */
#kop-atur {
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--garis); border-radius: 10px;
  background: var(--permukaan); color: var(--teks-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#kop-atur:hover { background: var(--lembut); color: var(--teks) }
#kop-atur.aktif { background: var(--utama-isi); color: var(--utama); border-color: var(--utama-garis) }

/* ---------------------------------------------------------------------
   MENU DATA DI KOP
   Satu tombol yang membuka daftar halaman data. Dulu keempatnya
   sederet di sisi kiri; sisi kiri sekarang sepenuhnya milik layer.
   --------------------------------------------------------------------- */
#kop-data { position: relative; flex: 0 0 auto }
#kop-data-tbl {
  display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 10px;
  border: 1px solid var(--garis); border-radius: 10px;
  background: var(--permukaan); color: var(--teks-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
#kop-data-tbl svg { flex: 0 0 auto }
#kop-data-tbl:hover { background: var(--lembut); color: var(--teks) }
#kop-data-tbl.aktif { background: var(--utama-isi); color: var(--utama); border-color: var(--utama-garis) }
#kop-data-tbl[aria-expanded="true"] svg:last-child { transform: rotate(180deg) }
#kop-data-tbl svg:last-child { transition: transform .16s ease }

#kop-data-daftar {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; padding: 5px;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-md); box-shadow: var(--bayang-md);
  display: flex; flex-direction: column; gap: 1px;
}
#kop-data-daftar[hidden] { display: none }
#kop-data-daftar a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--teks-2);
}
#kop-data-daftar a:hover { background: var(--lembut); color: var(--teks) }
#kop-data-daftar a.aktif { background: var(--utama-isi); color: var(--utama) }

/* Tautan Peta di puncak sisi kiri, sebaris dengan menu Data di
   bawahnya. Ia tautan halaman seperti Dasbor dan Jalan — bukan alat
   peta — jadi tempatnya memang di sini, bukan di deretan ikon kop. */
#menu-peta { flex: 0 0 auto; margin-bottom: 10px }
.menu-peta-baris { font-size: 14px }

/* ---------------------------------------------------------------------
   MENU DATA DI PUNCAK SISI KIRI

   Bentuknya sengaja sama dengan daftar layer di bawahnya: baris judul
   beriikon dengan panah lipat, lalu isinya sebagai baris-baris. Di
   dalam sisi kiri yang memang sudah berupa daftar, menu menggantung
   justru menambah satu langkah untuk hal yang muat ditampilkan apa
   adanya.
   --------------------------------------------------------------------- */
#menu-data { flex: 0 0 auto; margin-bottom: 14px }
.data-kepala {
  display: flex; align-items: center; gap: 6px;
  padding: 0 0 10px; border-bottom: 1px solid var(--garis);
  margin-bottom: 8px; cursor: pointer; user-select: none;
}
.data-kepala-panah { flex: 0 0 auto; display: flex; color: var(--teks-3) }
.data-kepala-panah svg { transition: transform .16s ease }
.data-kepala.tertutup .data-kepala-panah svg { transform: rotate(-90deg) }
.data-kepala-ikon { flex: 0 0 auto; display: flex; color: var(--utama) }
.data-kepala-teks {
  flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; color: var(--teks-3);
}
.data-isi { display: flex; flex-direction: column; gap: 1px }
.data-isi[hidden] { display: none }
.data-baris {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--teks-2);
}
.data-baris svg { flex-shrink: 0 }
.data-baris:hover { background: var(--lembut); color: var(--teks) }
.data-baris.aktif { background: var(--utama-isi); color: var(--utama) }

/* Baris menu yang membuka panel, bukan halaman. Bentuknya sama persis
   dengan tautan menu di sebelahnya — dari sudut pandang pengguna
   keduanya memang menu. */
.menu-a.menu-aksi {
  width: 100%; border: 0; background: none; font: inherit;
  text-align: left; cursor: pointer;
}

/* Kaki sisi kiri disembunyikan selama tombol Masuk tidak dipajang:
   garis pemisah yang menaungi ruang kosong terbaca sebagai sesuatu
   yang gagal dimuat. */
#sisi.tanpa-akun .sisi-kaki { display: none }

/* Pita judul halaman, di dalam #utama dan di bawah kop. */
#kop-halaman {
  flex-shrink: 0; padding: 14px 20px 0;
}
#kop-halaman h1 { font-size: 18px; font-weight: 800; letter-spacing: -.01em }
#kop-halaman p { font-size: 12.5px; color: var(--teks-3); margin-top: 1px }
#utama.peta #kop-halaman { display: none }
.ikon-tbl {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--garis);
  background: var(--permukaan); display: none; align-items: center; justify-content: center; color: var(--teks);
}

#isi { flex: 1; min-height: 0; overflow: auto; position: relative }
#isi.penuh { overflow: hidden }
.halaman { padding: 20px; display: flex; flex-direction: column; gap: 18px }
.memuat { padding: 40px; text-align: center; color: var(--teks-3) }

/* ---------------- peta ---------------- */
#peta-bungkus { position: absolute; inset: 0; display: flex }
/* #panel-lapisan dihapus — isinya pindah ke submenu Peta di sisi kiri. */
.panel-bagian { padding: 14px 16px; border-bottom: 1px solid var(--garis) }
.panel-judul { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--teks-3); margin-bottom: 9px }
#peta { flex: 1; position: relative; background: #E9EFE9 }

/* Kotak cari duduk di pojok kanan atas kop. Posisinya relative supaya
   daftar hasilnya bisa menggantung tepat di bawahnya tanpa mendorong
   apa pun. */
#cari-bungkus { position: relative; width: min(320px, 38vw) }
#cari-bungkus #cari-hasil { position: absolute; top: calc(100% + 6px); right: 0; left: 0;
  margin-top: 0; background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-md); box-shadow: var(--bayang-md); padding: 4px; z-index: 40 }

.cari-kotak { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px;
  border: 1px solid var(--garis); border-radius: 10px; background: var(--lembut) }
.cari-kotak input { border: 0; background: transparent; flex: 1; min-width: 0; outline: none; font-size: 13px }
#cari-hasil { max-height: 240px; overflow-y: auto; margin-top: 8px; display: none }
#cari-hasil.tampil { display: block }
.cari-baris { padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px }
.cari-baris:hover { background: var(--utama-isi) }
.cari-baris i { font-style: normal; color: var(--teks-3); font-size: 11.5px }

/* ---------------------------------------------------------------
   PEMILIH PETA DASAR — di sisi kiri, bukan di panel tengah.

   Tiga belas kartu bergambar memakan hampir separuh tinggi panel
   tengah, padahal panel itu tempat pencarian dan daftar lapisan —
   dua hal yang justru dipakai terus-menerus. Di sisi kiri ruangnya
   memang menganggur. Bentuknya diubah jadi daftar satu kolom:
   satu baris per peta dasar, contoh warna kecil di kiri, nama di
   kanan. Tinggi tiap baris seragam dan namanya tidak pernah pecah.
   --------------------------------------------------------------- */
.sisi-judul { padding: 14px 18px 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; color: var(--teks-3) }

/* Judul yang sekaligus tombol buka-tutup. Nama peta dasar yang sedang
   aktif ikut tercetak di sini, supaya keadaan tetap terbaca walau
   daftarnya tertutup — tanpa itu, pengguna harus membuka blok hanya
   untuk tahu peta dasar apa yang sedang dipakai. */

#daftar-lapisan { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px }
.lap-grup-judul { font-size: 10px; font-weight: 800; letter-spacing: .09em; color: var(--teks-3);
  margin: 10px 0 3px 7px }
.lap-baris { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 7px; border-radius: 7px; cursor: pointer }
.lap-baris:hover { background: var(--lembut) }
.lap-baris.nyala { background: var(--lembut) }
.lap-cek { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--garis-kuat);
  background: var(--permukaan); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.lap-baris.nyala .lap-cek { background: var(--utama); border-color: var(--utama) }
.lap-cek svg { display: none }
.lap-baris.nyala .lap-cek svg { display: block }
.lap-contoh { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center }
.lap-nama { flex: 1; font-size: 13px; font-weight: 500; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lap-jumlah { font-size: 11px; color: var(--teks-3); font-variant-numeric: tabular-nums }

.peta-kontrol { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column;
  background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; overflow: hidden;
  box-shadow: var(--bayang-sm); z-index: 5 }
/* Tombol kontrol yang bisa hidup-mati (mis. proyeksi bola) ditandai
   dengan warna utama, bukan sekadar berubah saat ditekan. */
.peta-kontrol button.aktif { background: var(--utama-isi); color: var(--utama) }
.peta-kontrol button { width: 38px; height: 38px; border: 0; background: var(--permukaan);
  display: flex; align-items: center; justify-content: center; color: var(--teks);
  border-bottom: 1px solid var(--garis) }
.peta-kontrol button:last-child { border-bottom: 0 }
.peta-kontrol button:hover { background: var(--lembut) }

#legenda { position: absolute; left: 14px; bottom: 52px; width: 210px; background: var(--permukaan);
  border: 1px solid var(--garis); border-radius: 12px; box-shadow: var(--bayang-sm);
  padding: 12px 14px; z-index: 5; max-height: 40%; overflow-y: auto }
#legenda .panel-judul { margin-bottom: 8px }
.leg-baris { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px }

#bilah-bawah { position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: rgba(255,255,255,.93); border-top: 1px solid var(--garis);
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  font-size: 11.5px; color: var(--teks-2); z-index: 4 }
#bilah-bawah span { font-variant-numeric: tabular-nums }

.maplibregl-popup-content { border-radius: 12px; padding: 0; overflow: hidden; box-shadow: var(--bayang-md); border: 1px solid var(--garis) }
.pop { min-width: 250px; max-width: 320px }
.pop-kop { padding: 12px 15px 10px; border-bottom: 1px solid var(--garis) }
.pop-kop .ket { font-size: 10px; font-weight: 700; letter-spacing: .09em; color: var(--utama) }
.pop-kop .jdl { font-size: 14.5px; font-weight: 700; line-height: 1.3; margin-top: 4px }
.pop-isi { padding: 11px 15px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 12px }
.pop-isi div { display: flex; flex-direction: column; gap: 1px }
.pop-isi span { font-size: 10.5px; color: var(--teks-3) }
.pop-isi b { font-size: 12.5px; font-weight: 600 }
.pop-kunci { margin: 0 15px 12px; padding: 7px 10px; border-radius: 8px; background: var(--lembut);
  font-size: 11px; color: var(--teks-3); display: flex; align-items: center; gap: 7px }

/* ---------------- dasbor ---------------- */
.angka-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px }
.angka-kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-md); padding: 16px 18px }
.angka-kartu .n { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums }
.angka-kartu .l { font-size: 12.5px; color: var(--teks-3); margin-top: 3px }
.angka-kartu .s { font-size: 11.5px; color: var(--teks-3); margin-top: 6px }

.bagian-judul { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px }
.bagian-judul h2 { font-size: 17px }
.bagian-judul p { font-size: 12.5px; color: var(--teks-3); margin-top: 2px }

/* ---------------- pesan ---------------- */
#pesan { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px);
  background: var(--utama-gelap); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 13.5px; box-shadow: var(--bayang-lg); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 99; max-width: calc(100vw - 32px) }
#pesan.tampil { opacity: 1; transform: translateX(-50%) translateY(0) }
#pesan.buruk { background: var(--bahaya) }

/* ---------------- masuk ---------------- */
.masuk-bungkus { display: flex; align-items: center; justify-content: center; padding: 40px 20px; min-height: 100% }
.masuk-kartu { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px }

/* ---------------- ponsel ---------------- */
@media (max-width: 860px) {
  /* Aturan laci yang dulu ada di sini dipindahkan ke bagian PONSEL di
     kaki berkas — di sini ia kalah oleh aturan #sisi yang datang
     belakangan, dan lacinya tidak pernah jadi laci. */
  #panel-lapisan-bekas { position: absolute; inset: auto 0 0 0; width: auto; height: 46%;
    border-right: 0; border-top: 1px solid var(--garis); border-radius: 16px 16px 0 0; z-index: 6 }
  #peta-bungkus { flex-direction: column }
  #legenda { display: none }
  .halaman { padding: 16px }
  .pop-isi { grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 860px) {
  .menu-a, .lap-baris { height: 44px }      /* sasaran sentuh lapangan */
  .tbl { min-height: 44px }
}

/* beri ruang di atas bilah bawah untuk kontrol bawaan MapLibre */
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: 26px }

/* catatan jujur ketika sebuah angka disembunyikan oleh kewenangan, bukan
   karena datanya nol */
.catatan-akses {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--lembut); border: 1px solid var(--garis);
  font-size: 12.5px; color: var(--teks-2); line-height: 1.5;
}
.catatan-akses svg { flex-shrink: 0; margin-top: 1px; color: var(--teks-3) }

/* Keterangan bila registri lapisan gagal diambil. */
.lap-galat { padding: 10px 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--teks-3) }

/* Di layar sempit kop halaman berjudul sudah padat; kotak carinya
   melebar penuh di bawah judul. Halaman Peta tidak terkena: kotak
   carinya mengambang di atas peta, bukan di dalam kop. */
/* Di layar sempit kop tidak muat sebaris: kotak cari turun ke baris
   kedua selebar pita, dan baris keterangan merek yang paling panjang
   disembunyikan supaya namanya tetap terbaca utuh. */
/* (dipindahkan ke bagian PONSEL di kaki berkas) */


/* =====================================================================
   SISI KIRI YANG BISA DILIPAT KE SAMPING

   Terlipat, sisi kiri menyusut dari 268 piksel menjadi 66 dan menyisakan
   deretan ikon — bukan menghilang sama sekali. Menu yang lenyap memaksa
   orang menebak ke mana perginya; deretan ikon tetap menunjukkan apa
   yang ada dan berapa banyak, dan judulnya muncul sebagai tooltip.

   Semua aturan penciutan DIBATASI ke #sisi. Merek pernah tinggal di
   sini dan ikut disembunyikan saat menu diciutkan; setelah ia pindah ke
   kop, aturan yang sama masih mengenainya — menciutkan menu ikut
   melenyapkan nama sistem di pita atas.
   ===================================================================== */
/* TANPA peralihan lebar. Peta mengukur kanvasnya lewat ResizeObserver,
   jadi lebar yang beranimasi 0,18 detik berarti belasan pengukuran
   ulang berturut-turut: kanvas diregangkan, digambar ulang, diregangkan
   lagi — dan yang terlihat pengguna adalah peta yang bergetar. Lebarnya
   berubah sekali, petanya menggambar ulang sekali. */
#sisi { position: relative; z-index: 20 }
#sisi-tutup { display: none }

/* Tombolnya duduk di POJOK ATAS pemisah, di atas baris "Peta" — bukan
   di tengah tinggi layar. Di tengah ia menggantung di sisi peta tanpa
   sandaran apa pun dan terbaca sebagai milik peta; di atas ia jelas
   milik menu, dan tangan tidak perlu turun jauh untuk mencarinya.
   z-index-nya dinaikkan di atas kanvas peta supaya tidak pernah
   tertutup ubin maupun kendali peta. */
#tbl-lipat {
  position: absolute; top: 12px; right: -11px; z-index: 60;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--garis-kuat); background: var(--permukaan);
  color: var(--teks-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--bayang-sm);
  transition: color .15s, border-color .15s;
  padding: 0;
}
#tbl-lipat svg { transition: transform .18s ease }
#tbl-lipat:hover { color: var(--utama); border-color: var(--utama) }
#kerangka.sisi-ciut #tbl-lipat svg { transform: rotate(180deg) }

/* --- keadaan terlipat ------------------------------------------------
   Aturan lama di sini menyasar kelas yang sudah tidak ada lagi
   (.menu-a, .menu-grup) — peninggalan dari masa sisi kiri hanya berisi
   tautan halaman. Sejak daftar layer pindah ke sini, menciutkan menu
   berarti memeras panel layer utuh ke lebar 60 piksel: tombol ⋮, kotak
   centang, contoh warna dan nama layer melipat jadi tiga baris, tak
   satu pun terbaca, dan tingginya menyeret seluruh halaman melewati
   tepi bawah layar.

   Yang benar: daftar layernya DITUTUP, bukan dikecilkan. Sisanya
   deretan ikon rata tengah — Peta, DATA, empat halaman data, lalu ikon
   LAYER PETA sebagai penanda bahwa daftarnya masih di situ. Nama tiap
   ikon tetap terbaca sebagai tooltip, dan mengklik ikon LAYER PETA
   atau DATA melebarkan sisi kiri kembali (lihat pasangLipatSisi).
   --------------------------------------------------------------------- */
#kerangka.sisi-ciut #sisi {
  width: 60px; padding-left: 8px; padding-right: 8px; gap: 10px;
}

#kerangka.sisi-ciut #sisi .data-kepala-teks,
#kerangka.sisi-ciut #sisi .data-kepala-panah,
#kerangka.sisi-ciut #sisi .data-baris > span,
#kerangka.sisi-ciut #sisi .lyr-kepala-teks,
#kerangka.sisi-ciut #sisi .lyr-kepala-tbls,
#kerangka.sisi-ciut #sisi .akun-teks { display: none }

/* Semua yang duduk di bawah baris judul daftar layer ikut ditutup. */
#kerangka.sisi-ciut #sisi .sisi-layer-isi { overflow: hidden }
#kerangka.sisi-ciut #sisi .sisi-layer-isi > div > *:not(.lyr-kepala) { display: none }

#kerangka.sisi-ciut #sisi .data-kepala,
#kerangka.sisi-ciut #sisi .lyr-kepala,
#kerangka.sisi-ciut #sisi .data-baris {
  justify-content: center; gap: 0; padding-left: 0; padding-right: 0;
}
#kerangka.sisi-ciut #sisi .data-baris { width: 40px; margin-left: auto; margin-right: auto }
#kerangka.sisi-ciut #sisi .lyr-kepala { cursor: pointer }
#kerangka.sisi-ciut #sisi .lyr-kepala:hover .lyr-kepala-ikon,
#kerangka.sisi-ciut #sisi .data-kepala:hover .data-kepala-ikon { color: var(--utama-sentuh) }
#kerangka.sisi-ciut #menu-peta,
#kerangka.sisi-ciut #menu-data { margin-bottom: 0 }
#kerangka.sisi-ciut #sisi .akun { justify-content: center }
#kerangka.sisi-ciut #sisi .akun .ikon-tbl { display: none }

/* Di layar sempit sisi kiri sudah berupa laci yang menutup sendiri.
   Melipat laci yang sudah tertutup tidak berarti apa-apa, jadi
   tombolnya disembunyikan dan lebarnya dikembalikan penuh. */
/* (dipindahkan ke bagian PONSEL di kaki berkas) */

/* =====================================================================
   PONSEL & LAYAR LIPAT
   ---------------------------------------------------------------------
   Bagian ini SENGAJA ditaruh di paling bawah berkas. Aturan laci di
   @media (max-width:860px) yang lama memang menyuruh #sisi menjadi
   `position: fixed`, tetapi jauh di bawahnya ada `#sisi { position:
   relative }` milik tombol lipat — dan aturan belakangan menang. Jadi
   sisi kiri TIDAK pernah benar-benar jadi laci: ia tetap memakan 268
   piksel lebar tata letak dan hanya digeser keluar layar, menyisakan
   144 piksel untuk peta di layar 412 piksel. Itulah kolom putih kosong
   yang terlihat di ponsel dan di Fold yang terbuka.

   Semua aturan layar sempit dikumpulkan di sini supaya tidak ada lagi
   aturan lebar-layar-besar yang datang belakangan dan membatalkannya.
   ===================================================================== */
@media (max-width: 900px) {

  /* --- sisi kiri jadi laci yang benar-benar melayang --------------- */
  #sisi {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(300px, 84vw);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: var(--bayang-lg);
    border-right: 1px solid var(--garis);
  }
  #sisi.buka { transform: translateX(0) }
  /* Lebar terlipat tidak berlaku di laci: laci yang menyempit jadi 60
     piksel sama saja dengan laci yang tidak berguna. */
  #kerangka.sisi-ciut #sisi { width: min(300px, 84vw); padding: 12px }
  #kerangka.sisi-ciut #sisi .data-kepala-teks,
  #kerangka.sisi-ciut #sisi .data-kepala-panah,
  #kerangka.sisi-ciut #sisi .data-baris > span,
  #kerangka.sisi-ciut #sisi .lyr-kepala-teks,
  #kerangka.sisi-ciut #sisi .lyr-kepala-tbls,
  #kerangka.sisi-ciut #sisi .akun-teks { display: revert }
  #kerangka.sisi-ciut #sisi .sisi-layer-isi > div > * { display: revert }
  #kerangka.sisi-ciut #sisi .data-kepala,
  #kerangka.sisi-ciut #sisi .lyr-kepala,
  #kerangka.sisi-ciut #sisi .data-baris {
    justify-content: flex-start; gap: 6px;
  }
  #kerangka.sisi-ciut #sisi .data-baris { width: auto; margin-left: 0; margin-right: 0; padding: 0 10px; gap: 10px }
  #tbl-lipat { display: none }

  /* Tirai gelap di belakang laci. Tanpa ini laci yang terbuka menutupi
     peta tanpa memberi tahu cara menutupnya kembali. */
  #tirai {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(0,0,0,.42);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  #sisi.buka ~ #tirai { opacity: 1; pointer-events: auto }

  /* --- kop dua baris ------------------------------------------------
     Baris 1: tombol menu, merek, kotak cari (menyusut jadi ikon),
     pengaturan. Baris 2: deretan alat yang bisa digeser mendatar.
     Sebelumnya ketiganya mengambil satu baris masing-masing dan kop
     memakan 221 dari 915 piksel tinggi layar — seperempat layar habis
     sebelum peta sempat tampil. */
  #kop {
    flex-wrap: wrap; row-gap: 4px; column-gap: 8px;
    padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top, 0px));
    position: relative;
  }
  .ikon-tbl { display: flex; order: 0; flex: 0 0 auto; width: 40px; height: 40px }
  #kop .merek { order: 1; flex: 1 1 0; max-width: none; min-width: 0; gap: 8px }
  #kop-aksi { order: 2; flex: 0 0 auto; gap: 6px }
  #kop-alat {
    order: 3; flex: 1 1 100%; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #kop-alat::-webkit-scrollbar { display: none }
  .kop-alat-tbl { width: 44px; height: 40px }
  /* Ikon terakhir sengaja dibiarkan terpotong separuh oleh peredupan di
     tepi kanan: deretan yang berhenti rapi di tepi layar terbaca sebagai
     deretan yang sudah habis, dan alat-alat sesudahnya tidak akan pernah
     dicari orang. */
  #kop-alat {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }

  /* Tombol tutup di dalam laci. Laci menutupi tombol menu yang
     membukanya, jadi harus ada jalan pulang yang terlihat — menyentuh
     tirai memang bisa, tetapi itu hanya diketahui orang yang sudah
     terbiasa. */
  #sisi-tutup {
    position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--garis); border-radius: 50%;
    background: var(--permukaan); color: var(--teks-2); cursor: pointer; z-index: 2;
  }
  #sisi { padding-top: calc(50px + env(safe-area-inset-top, 0px)) }

  .merek img { width: 34px; height: 39px }
  .merek-teks b { font-size: 15px; letter-spacing: .05em }
  .merek-teks i {
    font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .merek-teks small { display: none }

  /* --- kotak cari: ikon yang melebar saat disentuh ------------------
     Melebar menutupi baris pertama, bukan menambah baris ketiga. */
  #kop-aksi .kop-cari { flex: 0 0 auto }
  #kop-aksi .kop-cari #searchbox {
    width: 40px; overflow: hidden; cursor: pointer;
    transition: width .18s ease;
  }
  #kop-aksi:focus-within .kop-cari {
    position: absolute; left: 10px; right: 10px; top: 6px; z-index: 70;
  }
  #kop-aksi:focus-within .kop-cari #searchbox { width: 100% }
  #kop-aksi:focus-within #kop-atur { visibility: hidden }

  /* --- sisanya ------------------------------------------------------ */
  #kop-halaman { padding: 12px 14px 0 }
  #judul-halaman { font-size: 16px }
  .halaman { padding: 14px }
  .data-baris, .lyr-row { min-height: 44px }   /* sasaran sentuh di lapangan */
}

/* Layar paling sempit: kalimat panjang merek dibuang seluruhnya, yang
   tersisa hanya namanya. */
@media (max-width: 560px) {
  .merek-teks i { display: none }
}