/* =========================================================================
   Peta Lingkungan Indonesia — gaya antarmuka
   Palet gelap dengan aksen laut/pirus; data diberi warna cerah agar menonjol
   di atas peta dasar yang sengaja dibuat redup.
   ========================================================================= */

:root {
  --bg:            #0b1016;
  --panel:         rgba(16, 23, 32, 0.92);
  --panel-solid:   #101720;
  --panel-naik:    #18212c;
  --garis:         rgba(255, 255, 255, 0.09);
  --garis-kuat:    rgba(255, 255, 255, 0.16);
  --teks:          #e8eef5;
  --teks-lembut:   #9aa8b8;
  --teks-redup:    #6b7a8c;
  --aksen:         #2dd4bf;
  --aksen-gelap:   #14b8a6;
  --aksen-lembut:  rgba(45, 212, 191, 0.14);
  --bahaya:        #f4436c;
  --peringatan:    #f5a623;
  --radius:        12px;
  --radius-kecil:  8px;
  --bayang:        0 8px 28px rgba(0, 0, 0, 0.45);
  --mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--teks);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#map { position: absolute; inset: 0; background: var(--bg); z-index: 1; }

/* Peta dasar diredupkan agar lapisan data tetap yang paling menonjol. */
.leaflet-tile-pane { filter: saturate(0.72) brightness(0.94); }
body.peta-terang .leaflet-tile-pane { filter: saturate(0.85) brightness(1.02); }
.leaflet-container { background: var(--bg); font-family: inherit; outline: none; }
.leaflet-control-attribution {
  background: rgba(11, 16, 22, 0.82) !important;
  color: var(--teks-redup) !important;
  font-size: 10px !important;
  backdrop-filter: blur(6px);
}
.leaflet-control-attribution a { color: var(--teks-lembut) !important; }
.leaflet-control-zoom a {
  background: var(--panel-solid) !important;
  color: var(--teks) !important;
  border-color: var(--garis) !important;
}
.leaflet-control-zoom a:hover { background: var(--panel-naik) !important; }

/* ---------------------------------------------------------------- panel */

.panel {
  position: absolute; z-index: 600;
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
}

#sidebar {
  top: 14px; left: 14px; bottom: 14px; width: 306px;
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
#sidebar.tersembunyi { transform: translateX(calc(-100% - 20px)); opacity: 0; pointer-events: none; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--garis);
}
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; font-size: 19px;
  background: var(--aksen-lembut); border-radius: 9px;
  border: 1px solid rgba(45, 212, 191, 0.26);
}
.brand-text { flex: 1; min-width: 0; }
.brand h1 {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand h1 span { color: var(--aksen); }
.brand p { margin: 1px 0 0; font-size: 11px; color: var(--teks-redup); }

.icon-btn {
  width: 26px; height: 26px; flex: none;
  background: transparent; border: 1px solid var(--garis);
  border-radius: 7px; color: var(--teks-lembut);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
  transition: all .15s;
}
.icon-btn:hover { background: var(--panel-naik); color: var(--teks); border-color: var(--garis-kuat); }
.icon-btn.floating {
  position: absolute; z-index: 600; top: 20px; left: 14px;
  width: 34px; height: 34px; background: var(--panel);
  backdrop-filter: blur(14px); box-shadow: var(--bayang);
}
.hidden { display: none !important; }

.scroll-area { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; }
.scroll-area::-webkit-scrollbar { width: 7px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--garis-kuat); border-radius: 4px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

.block { padding: 12px 14px 4px; }
.block + .block { border-top: 1px solid var(--garis); margin-top: 4px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.block-head h2 {
  margin: 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.9px; text-transform: uppercase; color: var(--teks-redup);
}
.hint { font-size: 10px; color: var(--teks-redup); opacity: .7; }

/* --------------------------------------------------- daftar lapisan data */

.layer-list { display: flex; flex-direction: column; gap: 3px; }

.layer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: var(--radius-kecil);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; text-align: left; width: 100%;
  color: var(--teks); font: inherit;
  transition: background .14s, border-color .14s;
}
.layer-item:hover { background: rgba(255, 255, 255, 0.045); }
.layer-item.aktif { background: var(--aksen-lembut); border-color: rgba(45, 212, 191, 0.3); }
.layer-item .ikon { font-size: 16px; width: 20px; text-align: center; flex: none; }
.layer-item .teks { flex: 1; min-width: 0; }
.layer-item .judul { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.layer-item.aktif .judul { color: var(--aksen); }
.layer-item .ket {
  font-size: 10.5px; color: var(--teks-redup); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-item .status-titik {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--teks-redup); opacity: .35;
}
.layer-item .status-titik.siap { background: var(--aksen); opacity: 1; }
.layer-item .status-titik.gagal { background: var(--bahaya); opacity: 1; }
.layer-item .status-titik.muat { background: var(--peringatan); opacity: 1; animation: denyut 1s infinite; }

.tanda-proksi {
  font-size: 8.5px; font-weight: 700; letter-spacing: .4px;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(245, 166, 35, 0.16); color: var(--peringatan);
  border: 1px solid rgba(245, 166, 35, 0.3);
}

.layer-list.compact .layer-item { padding: 6px 9px; }

/* Sakelar untuk hamparan tambahan */
.sakelar {
  width: 30px; height: 17px; flex: none; border-radius: 9px;
  background: rgba(255, 255, 255, 0.11); position: relative; transition: background .18s;
}
.sakelar::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--teks-lembut); transition: transform .18s, background .18s;
}
.layer-item.aktif .sakelar { background: var(--aksen-gelap); }
.layer-item.aktif .sakelar::after { transform: translateX(13px); background: #fff; }

/* ------------------------------------------------------------- legenda */

.legend { display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--teks-lembut); }
.legend-swatch { width: 13px; height: 13px; border-radius: 3.5px; flex: none; border: 1px solid rgba(0,0,0,.35); }
.legend-note {
  font-size: 10.5px; color: var(--teks-redup); line-height: 1.45;
  padding: 7px 8px; background: rgba(255, 255, 255, 0.035);
  border-radius: 6px; border-left: 2px solid var(--peringatan); margin-top: 3px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 4px; }
.chip {
  padding: 5px 10px; border-radius: 99px; font-size: 11px; font-weight: 500;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--garis);
  color: var(--teks-lembut); cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--garis-kuat); color: var(--teks); }
.chip.aktif { background: var(--aksen-lembut); border-color: rgba(45,212,191,.35); color: var(--aksen); }

/* ---------------------------------------------------------- kaki panel */

.panel-foot { padding: 11px 14px 12px; border-top: 1px solid var(--garis); }

.btn-primary {
  width: 100%; padding: 9px; border-radius: var(--radius-kecil);
  background: var(--aksen-gelap); border: none; color: #04231f;
  font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: filter .15s;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .55; cursor: wait; }

.spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(4, 35, 31, 0.3); border-top-color: #04231f;
  display: none;
}
.btn-primary.memuat .spin { display: block; animation: putar .7s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes denyut { 50% { opacity: .3; } }

.auto-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--teks-lembut); margin-top: 9px; cursor: pointer;
}
.auto-row input { accent-color: var(--aksen-gelap); cursor: pointer; }

.status {
  margin-top: 8px; font-size: 10.5px; color: var(--teks-redup);
  line-height: 1.5; min-height: 16px;
}
.status.galat { color: var(--bahaya); }

/* ------------------------------------------------------------- bilah atas */

#topbar {
  position: absolute; z-index: 600; top: 14px; left: 336px; right: 14px;
  display: flex; gap: 10px; align-items: flex-start; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
body.panel-tersembunyi #topbar { left: 60px; }

.search-wrap { position: relative; width: 268px; flex: none; }
.search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; fill: none; stroke: var(--teks-redup);
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
#search {
  width: 100%; padding: 9px 12px 9px 32px;
  background: var(--panel); backdrop-filter: blur(18px);
  border: 1px solid var(--garis); border-radius: var(--radius-kecil);
  color: var(--teks); font: inherit; font-size: 12.5px; outline: none;
  box-shadow: var(--bayang); transition: border-color .15s;
}
#search:focus { border-color: rgba(45, 212, 191, 0.45); }
#search::placeholder { color: var(--teks-redup); }
#search::-webkit-search-cancel-button { filter: invert(.6); }

.search-results {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 290px; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid var(--garis);
  border-radius: var(--radius-kecil); box-shadow: var(--bayang); padding: 4px;
}
.search-item {
  padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 12px;
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.search-item:hover, .search-item.sorot { background: var(--aksen-lembut); }
.search-item .prov { font-size: 10.5px; color: var(--teks-redup); flex: none; }
.search-kosong { padding: 10px; font-size: 11.5px; color: var(--teks-redup); text-align: center; }

/* ------------------------------------------------------ kartu ringkasan */

.summary { display: flex; gap: 8px; flex-wrap: wrap; }
.sum-card {
  background: var(--panel); backdrop-filter: blur(18px);
  border: 1px solid var(--garis); border-radius: var(--radius-kecil);
  padding: 7px 12px; box-shadow: var(--bayang); min-width: 84px;
}
.sum-card .label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--teks-redup); font-weight: 600;
}
.sum-card .nilai {
  font-size: 17px; font-weight: 700; font-family: var(--mono);
  margin-top: 2px; line-height: 1.1;
}
.sum-card .sub { font-size: 10px; color: var(--teks-redup); margin-top: 1px; }

/* ----------------------------------------------------------- panel detail */

#detail {
  top: 14px; right: 14px; width: 330px; max-height: calc(100% - 28px);
  display: flex; flex-direction: column; overflow: hidden;
}
#detail.hidden { display: none; }
.icon-btn.close {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  font-size: 18px; border-color: transparent;
}
#detail-body { overflow-y: auto; padding: 15px 16px 16px; }
#detail-body::-webkit-scrollbar { width: 7px; }
#detail-body::-webkit-scrollbar-thumb { background: var(--garis-kuat); border-radius: 4px; }

.d-head { margin-bottom: 13px; padding-right: 30px; }
.d-nama { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.d-prov { font-size: 11.5px; color: var(--teks-lembut); margin-top: 2px; }
.d-koord { font-size: 10px; color: var(--teks-redup); font-family: var(--mono); margin-top: 3px; }

.d-hero {
  display: flex; align-items: center; gap: 13px;
  padding: 13px; border-radius: var(--radius-kecil);
  background: rgba(255, 255, 255, 0.04); margin-bottom: 13px;
  border: 1px solid var(--garis);
}
.d-hero .emo { font-size: 33px; line-height: 1; }
.d-hero .besar { font-size: 27px; font-weight: 700; font-family: var(--mono); line-height: 1; }
.d-hero .kecil { font-size: 11.5px; color: var(--teks-lembut); margin-top: 3px; }

.d-badge {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; color: #06131a;
}

.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 13px; }
.d-cell {
  padding: 8px 10px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--garis);
}
.d-cell .k {
  font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--teks-redup); font-weight: 600;
}
.d-cell .v { font-size: 14.5px; font-weight: 600; font-family: var(--mono); margin-top: 2px; }
.d-cell .u { font-size: 10px; color: var(--teks-redup); font-family: 'Inter', sans-serif; font-weight: 400; }
.d-cell.lebar { grid-column: 1 / -1; }

.d-sec { margin: 15px 0 9px; }
.d-sec h3 {
  margin: 0 0 7px; font-size: 10px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; color: var(--teks-redup);
}

.spark { width: 100%; height: 42px; display: block; }
.spark-kosong { font-size: 10.5px; color: var(--teks-redup); padding: 10px 0; text-align: center; }
.spark-kaki {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--teks-redup); margin-top: 2px; font-family: var(--mono);
}

.d-bar { display: flex; flex-direction: column; gap: 6px; }
.d-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.d-bar-row .nm { width: 62px; flex: none; color: var(--teks-lembut); }
.d-bar-row .tr { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.d-bar-row .is { height: 100%; border-radius: 3px; }
.d-bar-row .vl { width: 54px; flex: none; text-align: right; font-family: var(--mono); font-size: 10.5px; }

.d-ramal { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }
.d-ramal::-webkit-scrollbar { height: 5px; }
.d-ramal::-webkit-scrollbar-thumb { background: var(--garis-kuat); border-radius: 3px; }
.d-ramal-item {
  flex: none; width: 58px; text-align: center; padding: 8px 4px;
  background: rgba(255,255,255,.035); border: 1px solid var(--garis); border-radius: 7px;
}
.d-ramal-item .jm { font-size: 9.5px; color: var(--teks-redup); font-family: var(--mono); }
.d-ramal-item .em { font-size: 18px; margin: 3px 0; }
.d-ramal-item .sh { font-size: 12px; font-weight: 700; font-family: var(--mono); }

.d-catatan {
  font-size: 10.5px; color: var(--teks-redup); line-height: 1.5;
  padding: 9px 10px; border-radius: 7px; margin-top: 12px;
  background: rgba(245, 166, 35, 0.07); border-left: 2px solid var(--peringatan);
}
.d-sumber {
  font-size: 10px; color: var(--teks-redup); margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--garis);
}
.d-muat { text-align: center; padding: 14px; font-size: 11.5px; color: var(--teks-redup); }

/* ------------------------------------------------------------- penanda */

.mk-nilai {
  display: grid; place-items: center;
  border-radius: 50%; font-weight: 700; color: #06131a;
  font-family: var(--mono); box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
  border: 1.5px solid rgba(255, 255, 255, .8);
  transition: transform .12s;
}
.mk-nilai:hover { transform: scale(1.18); z-index: 1000 !important; }
.mk-cuaca {
  display: grid; place-items: center; font-size: 17px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75));
}
.mk-angin { transition: transform .12s; }
.mk-angin:hover { filter: brightness(1.3); }
.mk-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 100%; margin-top: 1px; white-space: nowrap;
  font-size: 9.5px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none;
}
.mk-gempa { position: relative; display: grid; place-items: center; }
.mk-gempa .inti {
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}
.mk-gempa .gelombang {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; animation: getar 2.1s ease-out infinite;
}
@keyframes getar {
  0%   { transform: scale(.55); opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}
.mk-api { border-radius: 50%; }

/* -------------------------------------------------------- popup Leaflet */

.leaflet-popup-content-wrapper {
  background: var(--panel-solid); color: var(--teks);
  border: 1px solid var(--garis-kuat); border-radius: var(--radius-kecil);
  box-shadow: var(--bayang);
}
.leaflet-popup-content { margin: 11px 13px; font-size: 12px; line-height: 1.5; }
.leaflet-popup-tip { background: var(--panel-solid); border: 1px solid var(--garis-kuat); }
.leaflet-popup-close-button { color: var(--teks-redup) !important; }
.pop-judul { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.pop-baris { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; }
.pop-baris .k { color: var(--teks-lembut); }
.pop-baris .v { font-family: var(--mono); font-weight: 600; }
.pop-aksi {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--garis);
  font-size: 10.5px; color: var(--aksen); cursor: pointer;
}

/* --------------------------------------------------------- sumber data */

.sources { position: absolute; z-index: 600; left: 336px; bottom: 14px; max-width: 520px; }
body.panel-tersembunyi .sources { left: 60px; }
.link-btn {
  background: var(--panel); backdrop-filter: blur(18px);
  border: 1px solid var(--garis); border-radius: var(--radius-kecil);
  color: var(--teks-lembut); padding: 6px 11px; font: inherit; font-size: 11px;
  cursor: pointer; box-shadow: var(--bayang);
}
.link-btn:hover { color: var(--teks); border-color: var(--garis-kuat); }
.sources-panel {
  margin-top: 7px; padding: 14px 16px; max-height: 58vh; overflow-y: auto;
  background: var(--panel); backdrop-filter: blur(18px);
  border: 1px solid var(--garis); border-radius: var(--radius);
  box-shadow: var(--bayang); font-size: 11.5px; line-height: 1.6; color: var(--teks-lembut);
}
.sources-panel h3 {
  margin: 13px 0 6px; font-size: 10px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--aksen); font-weight: 700;
}
.sources-panel h3:first-child { margin-top: 0; }
.sources-panel ul { margin: 0; padding-left: 17px; }
.sources-panel li { margin-bottom: 5px; }
.sources-panel b { color: var(--teks); font-weight: 600; }
.sources-panel p { margin: 0 0 6px; }
.sources-panel code {
  font-family: var(--mono); font-size: 10.5px;
  background: rgba(255,255,255,.07); padding: 1px 4px; border-radius: 3px;
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: absolute; z-index: 900; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel-solid); border: 1px solid var(--garis-kuat);
  border-radius: var(--radius-kecil); padding: 10px 16px;
  font-size: 12px; box-shadow: var(--bayang); max-width: 78vw;
}
.toast.galat { border-color: rgba(244, 67, 108, .5); color: #ffc0cf; }

/* ------------------------------------------------------------- responsif */

@media (max-width: 880px) {
  #sidebar { top: 0; left: 0; bottom: 0; width: 100%; max-width: 320px; border-radius: 0; }
  #topbar { left: 12px; right: 12px; top: 12px; flex-direction: column; }
  body:not(.panel-tersembunyi) #topbar { display: none; }
  .search-wrap { width: 100%; }
  #detail { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; max-height: 62%; }
  .sources { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  body:not(.panel-tersembunyi) .sources { display: none; }
  body.detail-terbuka .sources { display: none; }   /* jangan bertumpuk panel detail */
  .summary { max-width: 100%; }
}

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

/* =========================================================================
   Lapisan SiTMAT — muka air tanah gambut resmi KemenLH
   ========================================================================= */

.tanda-resmi {
  font-size: 8.5px; font-weight: 700; letter-spacing: .4px;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(45, 212, 191, 0.16); color: var(--aksen);
  border: 1px solid rgba(45, 212, 191, 0.32);
}

/* Penanda stasiun berangka dibedakan dengan cincin ganda agar mudah dibeda-
   kan dari titik konsesi yang hanya berkelas status. */
.mk-nilai.mk-tmat {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(11, 16, 22, .75), 0 2px 8px rgba(0, 0, 0, .55);
}

.tanggal-baris { display: flex; align-items: center; gap: 6px; }
.tanggal-baris .icon-btn { width: 28px; height: 30px; flex: none; }
#tgl-tmat {
  flex: 1; min-width: 0; padding: 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--garis); border-radius: var(--radius-kecil);
  color: var(--teks); font: inherit; font-size: 12px;
  font-family: var(--mono); outline: none;
}
#tgl-tmat:focus { border-color: rgba(45, 212, 191, 0.45); }
#tgl-tmat::-webkit-calendar-picker-indicator { filter: invert(.65); cursor: pointer; }

.d-tag {
  display: inline-block; margin-left: 5px; padding: 3px 8px;
  border-radius: 99px; font-size: 10px; font-weight: 600;
  background: rgba(255, 255, 255, 0.07); color: var(--teks-lembut);
  border: 1px solid var(--garis);
}
.d-tag.aktif { color: var(--aksen); border-color: rgba(45, 212, 191, .3); }
.d-tag.mati  { color: var(--bahaya); border-color: rgba(244, 67, 108, .3); }

/* Kelas yang sedang berlaku disorot pada tabel klasifikasi resmi. */
.d-bar-row.aktif {
  background: rgba(255, 255, 255, 0.055);
  border-radius: 5px; padding: 3px 5px; margin: -3px -5px;
  font-weight: 600; color: var(--teks);
}

/* --- Penampang kedalaman muka air --------------------------------------- */

.tmat-skala {
  position: relative; height: 132px; margin: 6px 0 4px;
  border-radius: 7px; border: 1px solid var(--garis);
  /* Rentang +20 cm (atas) sampai -250 cm (bawah) — harus cocok dengan
     konstanta `atas`/`bawah` di detailTmat() pada js/app.js. */
  background: linear-gradient(to bottom,
    rgba(0, 143, 251, 0.16) 0%,
    rgba(0, 143, 251, 0.16) 7.41%,
    rgba(18, 183, 106, 0.14) 7.41%,
    rgba(18, 183, 106, 0.14) 22.22%,
    rgba(255, 193, 7, 0.14) 22.22%,
    rgba(255, 193, 7, 0.14) 37.04%,
    rgba(239, 76, 73, 0.14) 37.04%,
    rgba(239, 76, 73, 0.14) 100%);
  overflow: hidden;
}
.tmat-permukaan, .tmat-batas {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
}
.tmat-batas { border-top-style: dotted; border-top-color: rgba(255, 193, 7, 0.65); }
.tmat-permukaan span, .tmat-batas span {
  position: absolute; right: 6px; top: 2px;
  font-size: 9px; color: var(--teks-redup); white-space: nowrap;
}
.tmat-jarum {
  position: absolute; left: 0; right: 0; height: 2.5px;
  box-shadow: 0 0 9px currentColor;
}
.tmat-jarum span {
  position: absolute; left: 7px; top: -8px;
  font-size: 11.5px; font-weight: 700; font-family: var(--mono);
  text-shadow: 0 1px 4px #000, 0 0 8px #000; white-space: nowrap;
}
/* Untuk nilai yang hampir menyentuh dasar, label dipindah ke atas garis. */
.tmat-jarum span.atas { top: -15px; }

/* =========================================================================
   Daftar gempa M 5,0+ — meniru tabel di halaman resmi BMKG
   ========================================================================= */

.gempa-daftar { display: flex; flex-direction: column; gap: 4px; }

.gempa-baris {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border-radius: 7px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--garis); color: var(--teks); font: inherit;
  transition: background .14s, border-color .14s;
}
.gempa-baris:hover { background: rgba(255, 255, 255, 0.075); border-color: var(--garis-kuat); }

.gempa-baris .gm {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  border: 1.5px solid rgba(255, 255, 255, .22);
}
.gempa-baris .gi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gempa-baris .gw {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gempa-baris .gt { font-size: 10px; color: var(--teks-redup); font-family: var(--mono); }
.gempa-baris .gd {
  flex: none; font-size: 8.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 5px; border-radius: 3px; text-transform: uppercase;
  background: rgba(245, 166, 35, 0.16); color: var(--peringatan);
  border: 1px solid rgba(245, 166, 35, 0.3);
}

/* Angka magnitudo di dalam penanda peta */
.mk-gempa .inti {
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
}

.shakemap {
  width: 100%; border-radius: 7px; border: 1px solid var(--garis);
  background: rgba(255, 255, 255, 0.04);
}

/* =========================================================================
   Gunung api — MAGMA Indonesia (PVMBG)
   ========================================================================= */

.mk-gunung { position: relative; display: grid; place-items: center; }
.mk-gunung svg { display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); }
.mk-gunung:hover svg { filter: drop-shadow(0 2px 9px rgba(0, 0, 0, .8)) brightness(1.15); }

/* Denyut untuk Siaga/Awas dan gunung yang sedang erupsi */
.mk-gunung .denyut {
  position: absolute; bottom: 0; left: 50%;
  width: 34px; height: 34px; margin-left: -17px; margin-bottom: -17px;
  border-radius: 50%; border: 2px solid currentColor;
  animation: getar 2.4s ease-out infinite; pointer-events: none;
}
.mk-gunung .vona {
  position: absolute; top: -5px; right: -8px;
  font-size: 9px; line-height: 1; color: #e8eef5;
  background: rgba(11, 16, 22, .85); border: 1px solid var(--garis-kuat);
  border-radius: 3px; padding: 1px 2px;
}

.gunung-daftar { display: flex; flex-direction: column; gap: 3px; }

.gunung-baris {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--garis); color: var(--teks); font: inherit;
  transition: background .14s, border-color .14s;
}
.gunung-baris:hover { background: rgba(255, 255, 255, 0.075); border-color: var(--garis-kuat); }
.gunung-baris .gs { flex: none; width: 7px; height: 26px; border-radius: 3px; }
.gunung-baris .gi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gunung-baris .gw {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gunung-baris .gt { font-size: 10px; color: var(--teks-redup); }
.gunung-baris .gv { flex: none; font-size: 11px; color: var(--teks-lembut); }

.tanda-erupsi {
  font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 1px 4px; border-radius: 3px; vertical-align: 1px;
  background: rgba(239, 76, 73, 0.18); color: #ff8b89;
  border: 1px solid rgba(239, 76, 73, 0.35);
}

.gunung-kosong {
  font-size: 11px; color: var(--teks-redup); font-style: italic;
  padding: 7px 9px; background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--garis); border-radius: 7px;
}

/* Tautan bergaya chip di panel detail */
a.chip { display: inline-block; text-decoration: none; }

/* =========================================================================
   Cuaca penerbangan, SIGMET, dan citra abu vulkanik
   ========================================================================= */

.mk-aviasi {
  position: relative; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--mono); font-weight: 700; font-size: 9px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
  transition: transform .12s;
}
.mk-aviasi:hover { transform: scale(1.2); z-index: 1000 !important; }
.mk-aviasi.tutup { opacity: .85; border-style: dashed; }
.mk-aviasi .silang {
  position: absolute; top: -5px; right: -5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bahaya); color: #fff;
  font-size: 8px; line-height: 13px; text-align: center; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .7);
}

.icao {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  background: var(--aksen-lembut); color: var(--aksen);
  border: 1px solid rgba(45, 212, 191, .3);
  padding: 3px 9px; border-radius: 7px; font-size: 16px; letter-spacing: .5px;
}

.aviasi-baris {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--garis); color: var(--teks); font: inherit;
  transition: background .14s, border-color .14s;
}
.aviasi-baris:hover { background: rgba(255, 255, 255, 0.075); border-color: var(--garis-kuat); }
.aviasi-baris .ak {
  flex: none; min-width: 42px; padding: 3px 6px; border-radius: 5px;
  font-family: var(--mono); font-weight: 700; font-size: 9.5px; text-align: center;
}

.raw-metar {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.55;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--garis);
  border-radius: 7px; padding: 8px 10px; color: #a8d8ea;
  white-space: pre-wrap; word-break: break-word;
}
.raw-metar.dim { color: var(--teks-lembut); }

.awan-baris { display: flex; flex-wrap: wrap; gap: 4px; }
.awan-baris code {
  font-family: var(--mono); font-size: 10.5px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--garis);
  border-radius: 4px; padding: 2px 6px; color: var(--teks-lembut);
}

/* --- citra sebaran abu vulkanik --- */

.citra-abu-bingkai {
  display: block; position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--garis); background: rgba(255, 255, 255, 0.04);
  text-decoration: none; transition: border-color .15s;
}
.citra-abu-bingkai:hover { border-color: rgba(45, 212, 191, .4); }
.citra-abu-bingkai img { display: block; width: 100%; height: auto; }
.citra-gagal {
  display: none; padding: 22px 12px; text-align: center;
  font-size: 11px; color: var(--teks-redup);
}
.citra-abu-bingkai.gagal img { display: none; }
.citra-abu-bingkai.gagal .citra-gagal { display: block; }
.citra-ket { font-size: 10px; color: var(--teks-redup); line-height: 1.5; margin-top: 5px; }

.tanda-abu {
  font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 1px 4px; border-radius: 3px; vertical-align: 1px;
  background: rgba(156, 39, 176, 0.18); color: #d8a5e6;
  border: 1px solid rgba(156, 39, 176, 0.35);
}

/* =========================================================================
   Radar hujan, peta isoseismal
   ========================================================================= */

.radar-baris { display: flex; align-items: center; gap: 8px; }
.radar-baris .icon-btn { width: 30px; height: 30px; flex: none; font-size: 13px; }

#radar-geser {
  flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255, 255, 255, 0.12); border-radius: 3px; outline: none; cursor: pointer;
}
#radar-geser::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--aksen); border: 2px solid var(--panel-solid); cursor: pointer;
}
#radar-geser::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--aksen); border: 2px solid var(--panel-solid); cursor: pointer;
}

.radar-waktu {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--teks-lembut);
}
#radar-jam { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--teks); }
#radar-jenis { font-size: 10px; color: var(--teks-redup); }
#radar-jenis.nowcast { color: var(--peringatan); }

/* Penanda isoseismal: cincin konsentris, meniru garis isoseismal itu sendiri */
.mk-iso {
  position: relative; display: grid; place-items: center;
  border: 2px solid currentColor; border-radius: 50%;
  background: rgba(11, 16, 22, .55);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  transition: transform .12s;
}
.mk-iso:hover { transform: scale(1.15); }
.mk-iso b { color: #fff; text-shadow: 0 1px 3px #000; }
.mk-iso .cincin {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .5; pointer-events: none;
}
.mk-iso .cincin.dua { inset: -10px; opacity: .25; }

/* =========================================================================
   Cuaca maritim
   ========================================================================= */

/* Daftar citra bisa memuat lima tombol; beri jarak baris yang lega. */
#citra-list { gap: 5px; }
#citra-list .chip { font-size: 10.5px; padding: 5px 9px; }

/* =========================================================================
   Peringatan kekeringan meteorologis
   ========================================================================= */

.mk-kering {
  display: grid; place-items: center; line-height: 1;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: 0 2px 9px rgba(0, 0, 0, .55);
  font-family: var(--mono); transition: transform .12s;
}
.mk-kering:hover { transform: scale(1.12); z-index: 1000 !important; }
.mk-kering b { font-size: 12px; font-weight: 700; }
.mk-kering span { font-size: 8px; opacity: .75; letter-spacing: .5px; }

.kering-daftar { display: flex; flex-wrap: wrap; gap: 4px; }
.kering-item {
  font-size: 10.5px; padding: 3px 7px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--garis); color: var(--teks-lembut);
}

/* Raster grid prakiraan: jaga agar selnya tetap tajam, bukan diperhalus. */
.raster-tajam {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}