/* ================================================================
Peta Cuaca — layout ala BMKG Signature (fullscreen map +
panel mengambang), gaya visual Atmospheric Brutalism (neubrutalist):
border ink 3px, hard-shadow 6px tanpa blur, sudut siku 0px.
================================================================ */
:root {
--ink: #1c1b1b;
--paper: #fcf8f8;
--surface: #fcf8f8;
--surface-low: #f6f3f2;
--surface-high: #ebe7e7;
--surface-highest: #e5e2e1;
--white: #ffffff;
--primary: #0029d7;
--on-primary: #ffffff;
--lime: #d2ed26;
--on-lime: #5c6900;
--variant: #444656;
--bw: 3px;
--shadow: 6px 6px 0 0 var(--ink);
--shadow-sm: 4px 4px 0 0 var(--ink);
--font-display: "Archivo Black", sans-serif;
--font-ui: "Space Grotesk", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0; height: 100%;
font-family: var(--font-ui); font-weight: 500;
color: var(--ink); background: #0a1018; overflow: hidden;
}
.material-symbols-outlined {
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
line-height: 1; vertical-align: middle;
}
.mono { font-family: var(--font-mono); }
.label-caps {
font-family: var(--font-ui); font-weight: 700;
font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
color: var(--variant);
}
/* ===================== MAP STAGE ===================== */
#stage { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; background: #0a1018; }
.leaflet-container { background: #0a1018; font-family: var(--font-ui); }
.velocity-overlay { pointer-events: none; }
/* Overlay wrapper */
#ui {
position: absolute; inset: 0; padding: 20px;
display: flex; flex-direction: column; justify-content: space-between;
pointer-events: none; z-index: 500;
}
.ui-top { display: flex; justify-content: space-between; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 12px; }
/* ---- Buka-tutup panel kiri (Parameter + Kedalaman + Indeks Iklim) ---- */
/* Tab kecil di tepi KIRI kontainer Parameter, sejajar tengahnya, panah biru.
Lebarnya PAS sebesar tonjolannya dan berdiri sendiri, tidak mengandalkan panel
untuk menutupi sisanya. Itu penting: kalau tab dibuat lebar lalu separuhnya
disembunyikan di balik panel, begitu panel digeser keluar separuh yang tadinya
tersembunyi ikut nongol dan tabnya terlihat melar. */
.layer-bar { position: relative; }
.panel-toggle {
position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
width: 18px; height: 46px; padding: 0; cursor: pointer; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--surface); border: var(--bw) solid var(--ink);
color: var(--primary); pointer-events: auto;
}
.panel-toggle:hover { background: var(--primary); color: var(--on-primary); }
.panel-toggle .material-symbols-outlined { font-size: 17px; line-height: 1; margin-left: -3px; }
/* Menyembunyikan = MENGGESER keluar bingkai ke kiri, bukan display:none.
Alasannya penting: transform TIDAK mengubah tata letak, jadi tinggi .layer-bar
tetap dan tab di sebelahnya tak ikut bergeser sedikit pun. Kalau pakai
display:none, kontainernya mengempis dan tombolnya melompat naik ke bawah brand. */
.layers, .depth-bar, .index-bar { transition: transform .28s ease; }
.col.panels-hidden .layers,
.col.panels-hidden .depth-bar,
.col.panels-hidden .index-bar {
transform: translateX(calc(-100% - 40px)); /* 40px = lewat padding #ui + ruang bayangan */
pointer-events: none;
}
.col.items-end { align-items: flex-end; }
/* Panel dasar neubrutalist */
.panel {
background: var(--surface); border: var(--bw) solid var(--ink);
box-shadow: var(--shadow); pointer-events: auto;
}
/* ---- Blok merek ---- */
.brand { display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 11px; }
.brand-logo { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-display); font-size: 20px; letter-spacing: -.01em; }
.brand-text span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--variant); margin-top: 5px; }
/* ---- Kartu link ke Kertas Fenomena (ENSO & IOD) ---- */
.phenom-link { display: flex; align-items: center; gap: 11px; padding: 9px 13px; width: max-content; max-width: 264px;
text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .1s, box-shadow .1s, background .1s; }
.phenom-link:hover { background: var(--lime); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 var(--ink); }
.phenom-link .pl-ico { flex: none; color: var(--primary); font-size: 26px; }
.phenom-link:hover .pl-ico { color: var(--on-lime); }
.pl-txt { display: flex; flex-direction: column; line-height: 1.1; }
.pl-txt strong { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; }
.pl-txt span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; color: var(--variant); margin-top: 4px; }
.phenom-link:hover .pl-txt span { color: var(--on-lime); }
.pl-go { flex: none; font-size: 18px; color: var(--variant); }
.phenom-link:hover .pl-go { color: var(--on-lime); }
/* ---- Layer selector ---- */
.layers { display: flex; flex-direction: column; width: 224px; }
.layer-btn {
display: flex; align-items: center; gap: 12px;
padding: 8px 18px; background: var(--surface); color: var(--ink);
border: none; border-bottom: var(--bw) solid var(--ink);
font-family: var(--font-ui); font-weight: 700; font-size: 15px;
text-transform: uppercase; text-align: left; cursor: pointer; transition: background .12s;
}
.layer-btn:last-child { border-bottom: none; }
.layer-btn .material-symbols-outlined { color: var(--primary); font-size: 21px; }
.layer-btn:hover:not(.active):not(.disabled) { background: var(--surface-high); }
.layer-btn.active { background: var(--lime); color: var(--on-lime); }
.layer-btn.active .material-symbols-outlined { color: var(--on-lime); }
.layer-btn.disabled { opacity: .45; cursor: not-allowed; }
/* Panah geser variabel — hanya tampil di HP (lihat media query) */
.layer-nav { display: none; }
/* ---- Pemilih LEVEL versi HP (desktop pakai dropdown di .selects) ---- */
.level-bar { display: none; } /* desktop: sembunyi; HP: ditampilkan di media query */
.levels { display: none; flex-direction: column; width: max-content; min-width: 150px; }
.level-btn {
display: flex; align-items: center; justify-content: flex-start;
padding: 11px 16px; background: var(--surface); color: var(--ink);
border: none; border-bottom: var(--bw) solid var(--ink);
font-family: var(--font-ui); font-weight: 700; font-size: 13px;
text-transform: uppercase; letter-spacing: .02em; text-align: left;
white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background .12s;
}
.level-btn:last-child { border-bottom: none; }
.level-btn:hover:not(.active) { background: var(--surface-high); }
.level-btn.active { background: var(--lime); color: var(--on-lime); }
/* ---- Model / level / init ---- */
.selects { width: 224px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* Kontainer MODEL jadi toggle: panel muncul ke KIRI tombol saat dibuka */
.model-wrap { position: relative; }
.model-wrap .selects { display: none; position: absolute; top: 0; right: calc(100% + 10px); }
.model-wrap.open .selects { display: flex; }
.model-wrap.open #model-toggle { background: var(--lime); }
.model-wrap.open #model-toggle .material-symbols-outlined { color: var(--on-lime); }
.field .label-caps { margin-bottom: 4px; }
.select-wrap { position: relative; }
.select-wrap select {
width: 100%; appearance: none; -webkit-appearance: none;
background: var(--surface-low); color: var(--ink);
border: var(--bw) solid var(--ink); padding: 7px 26px 7px 9px;
font-family: var(--font-mono); font-size: 12px; cursor: pointer; outline: none;
}
.select-wrap select:focus { background: var(--lime); }
.select-wrap select:disabled { opacity: .6; cursor: not-allowed; }
.select-wrap .material-symbols-outlined {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
pointer-events: none; font-size: 18px;
}
/* ---- Lang toggle / zoom / search (kanan atas) ---- */
.lang { display: flex; border: var(--bw) solid var(--ink); box-shadow: var(--shadow); background: var(--surface); pointer-events: auto; }
.lang button {
padding: 8px 14px; border: none; background: var(--surface);
font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer;
}
.lang button:first-child { border-right: var(--bw) solid var(--ink); }
.lang button.active { background: var(--lime); color: var(--on-lime); }
.lang button:disabled { opacity: .5; cursor: not-allowed; }
.zoom { display: flex; flex-direction: column; border: var(--bw) solid var(--ink); box-shadow: var(--shadow); background: var(--surface); pointer-events: auto; }
.zoom button {
width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
border: none; background: var(--surface); cursor: pointer; transition: background .12s;
}
.zoom button:first-child { border-bottom: var(--bw) solid var(--ink); }
.zoom button:hover { background: var(--surface-high); }
.icon-btn {
width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
border: var(--bw) solid var(--ink); background: var(--surface);
box-shadow: var(--shadow); cursor: pointer; pointer-events: auto; transition: all .1s ease;
}
.icon-btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 var(--ink); }
.icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn.active { background: var(--lime); }
.icon-btn.active .material-symbols-outlined { color: var(--on-lime); }
/* ---- Kepala dropdown "Parameter" (kiri) & kontrol (kanan) — HP saja ---- */
.param-toggle, .ctrl-toggle { display: none; } /* desktop: disembunyikan */
/* Tooltip label 1-kata saat hover tombol kontrol kanan (desktop, ada mouse) */
@media (hover: hover) and (min-width: 641px) {
.col.items-end [data-tip] { position: relative; }
.col.items-end [data-tip]::after {
content: attr(data-tip);
position: absolute; right: calc(100% + 10px); top: 50%;
transform: translateY(-50%) translateX(6px);
background: var(--ink); color: var(--surface);
font-family: var(--font-ui); font-weight: 700; font-size: 11px;
letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
padding: 5px 9px; border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
z-index: 60;
}
.col.items-end [data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* ---- Ikon kondisi cuaca per kota (declutter zoom) ---- */
.city-cond { cursor: pointer; background: none; border: none; }
.cc-ico {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; box-sizing: border-box;
background: var(--surface); border: 2px solid var(--ink);
box-shadow: 2px 2px 0 0 var(--ink);
}
.cc-ico .material-symbols-outlined { font-size: 19px; line-height: 1; }
.cc-ico.cc-cap { width: 34px; height: 34px; border-width: 3px; box-shadow: 3px 3px 0 0 var(--ink); }
.cc-ico.cc-cap .material-symbols-outlined { font-size: 22px; }
.cc-sunny .material-symbols-outlined { color: #f5a91e; }
.cc-pcloud .material-symbols-outlined { color: #6b7686; }
.cc-cloud .material-symbols-outlined { color: #566072; }
.cc-rain .material-symbols-outlined { color: #2360c8; }
.cc-heavy .material-symbols-outlined { color: #e8590c; }
.cc-storm .material-symbols-outlined { color: #c81d5a; }
/* ===================== BOTTOM: slider (kiri) + legenda (kanan) ===================== */
.ui-bottom { display: flex; flex-direction: row; align-items: stretch; gap: 14px; }
/* kolom kanan: legenda ikon kondisi (atas, saat toggle) + legend bar (bawah) */
/* Legend bar tetap di tempat (align-self flex-end). Legenda KONDISI MENGAMBANG
di atasnya via position:absolute → TIDAK menambah tinggi alur, jadi bar warna
tak terdorong turun/keluar layar saat toggle aktif. */
.legend-col { position: relative; align-self: flex-end; }
/* Keterangan kondisi = popover yang muncul ke KIRI tombol Kondisi (pola sama
dengan kotak pencarian). Dibungkus .city-wrap (position relative). */
.city-wrap { position: relative; pointer-events: auto; }
.cond-legend { position: absolute; top: 0; right: 52px; display: none; z-index: 600;
border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
pointer-events: auto; white-space: nowrap; }
.cond-legend.show { display: block; }
.cl-head { background: var(--ink); color: var(--surface); font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 4px 8px; }
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 7px 9px; }
.cl-item { display: flex; align-items: center; gap: 6px; }
.cl-lbl { font-size: 11px; font-weight: 600; white-space: nowrap; }
.cc-ico.cc-mini { width: 20px; height: 20px; border-width: 1.5px; box-shadow: 1.5px 1.5px 0 0 var(--ink); }
.cc-ico.cc-mini .material-symbols-outlined { font-size: 13px; }
/* timeline / slider — bawah kiri; flex:1 → panjangnya otomatis dibatasi legenda di kanan */
.timeline { flex: 1; min-width: 0; padding: 8px 14px; display: flex; align-items: center; gap: 14px; position: relative; }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-cur { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 11px; }
.tl-cur .mono { font-weight: 700; }
/* label tanggal/jam di bawah slider */
.tl-ticks { position: relative; height: 18px; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tl-tick.edge-start { transform: translateX(0); align-items: flex-start; }
.tl-tick.edge-end { transform: translateX(-100%); align-items: flex-end; }
.tl-tick-mark { width: 2px; height: 6px; background: var(--variant); }
.tl-tick.day .tl-tick-mark { height: 10px; background: var(--ink); }
.tl-tick-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--variant); margin-top: 2px; white-space: nowrap; }
.tl-tick.day .tl-tick-lbl { color: var(--ink); font-weight: 700; }
.tl-btns { display: flex; gap: 10px; }
.tl-btn {
width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
border: var(--bw) solid var(--ink); background: var(--surface);
box-shadow: 3px 3px 0 0 var(--ink); cursor: pointer; transition: all .1s ease;
}
.tl-btn .material-symbols-outlined { font-size: 20px; }
.tl-btn:hover:not(:disabled) { background: var(--lime); }
.tl-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tl-track { flex: 1; }
/* Range input neubrutalist (kecil) */
#time-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: transparent; cursor: pointer; }
#time-slider::-webkit-slider-runnable-track { height: 6px; background: var(--surface-highest); border: 2px solid var(--ink); }
#time-slider::-moz-range-track { height: 6px; background: var(--surface-highest); border: 2px solid var(--ink); }
#time-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px;
background: var(--lime); border: 2px solid var(--ink); border-radius: 0;
}
#time-slider::-moz-range-thumb {
width: 16px; height: 16px; background: var(--lime); border: 2px solid var(--ink); border-radius: 0;
}
/* Legenda horizontal (bottom-right) */
.legend-panel { display: flex; align-items: stretch; border: var(--bw) solid var(--ink); box-shadow: var(--shadow); background: var(--surface); pointer-events: auto; }
.legend-head {
display: flex; align-items: center; padding: 0 14px;
background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 700;
letter-spacing: .06em; border-right: var(--bw) solid var(--ink);
}
.legend { display: flex; }
.legend-cell {
width: 42px; min-height: 36px; display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 13px; color: var(--ink);
border-right: 1px solid rgba(28,27,27,.2);
}
.legend-cell:last-child { border-right: none; }
.legend-cell.dark { color: var(--surface); }
/* Legenda berlabel KATA (mis. Potensi Badai): sel melebar ikut isi, tak terpotong.
Lebih spesifik dari override lebar-tetap di media query, jadi berlaku juga di HP. */
.legend-words .legend-cell { width: auto; min-width: 44px; padding: 0 11px; white-space: nowrap; }
/* Loading */
#loading {
display: none; /* default sembunyi — hanya tampil untuk pesan error */
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 2000; background: var(--surface); color: var(--ink);
border: var(--bw) solid var(--ink); box-shadow: var(--shadow);
padding: 20px 28px; font-family: var(--font-mono); font-size: 14px; max-width: 420px;
}
/* ===================== SKELETON LOADING (abu standar) ===================== */
#skeleton {
position: absolute; inset: 0; z-index: 1500; background: #eef1f4;
padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
transition: opacity .45s ease; pointer-events: all;
}
#skeleton.hide { opacity: 0; pointer-events: none; }
.sk-top, .sk-bottom { display: flex; justify-content: space-between; align-items: flex-start; }
.sk-bottom { align-items: flex-end; }
.sk-col { display: flex; flex-direction: column; gap: 12px; }
.sk-right { align-items: flex-end; }
/* kartu abu (wadah) — meniru panel neubrutalist tanpa isi */
.sk-panel {
display: flex; flex-direction: column; gap: 9px; width: 210px;
padding: 12px; border-radius: 10px; background: #e2e6ea;
}
.sk-brand { flex-direction: row; align-items: center; gap: 11px; }
.sk-lines { display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* bar shimmer — elemen "tulang" abu */
.sk-bar {
position: relative; overflow: hidden; border-radius: 6px; background: #d2d8de;
}
.sk-bar::after {
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
animation: sk-shimmer 1.3s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
.sk-logo { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.sk-line-lg { height: 12px; width: 72%; }
.sk-line-sm { height: 9px; width: 46%; }
.sk-layers .sk-bar { height: 26px; }
.sk-selects .sk-bar { height: 21px; }
.sk-mini { width: 46px; height: 46px; border-radius: 9px; }
.sk-slider { width: min(46vw, 520px); height: 70px; border-radius: 10px; }
.sk-legend { width: 210px; height: 74px; border-radius: 10px; }
.sk-center {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 14px; pointer-events: none;
}
.sk-mark { animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.09); opacity: 1; } }
.sk-load-text { color: #97a0aa; font-size: 12px; letter-spacing: .08em; font-family: var(--font-mono); }
/* ---- Loading peta (ganti parameter / scrub frame) ----
Skeleton menutup raster domain besar saat PNG baru diunduh, lalu lepas begitu siap.
z-index 490: di atas semua pane data (<=462) tapi di bawah #ui (500), jadi kontrol tetap bisa dipakai. */
#map-loading {
position: absolute; inset: 0; z-index: 490; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: #eef1f4; opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#map-loading.show { opacity: 1; }
.ml-fill { position: absolute; inset: 0; border-radius: 0; background: #e6eaee; }
.ml-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Bar tipis di atas peta saat scrub/putar frame (feedback halus, tak menutup peta) */
#raster-bar {
position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 495;
opacity: 0; pointer-events: none; transition: opacity .15s ease; overflow: hidden;
}
#raster-bar.show { opacity: 1; }
#raster-bar span {
position: absolute; top: 0; height: 100%; width: 38%; background: var(--lime);
animation: rb-slide 1s linear infinite;
}
@keyframes rb-slide { 0% { left: -38%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
.sk-bar::after, .sk-mark, #raster-bar span { animation: none; }
}
.leaflet-control-attribution { font-family: var(--font-mono); font-size: 9px; }
/* ===================== POINT DETAIL ===================== */
#point-panel {
position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
background: var(--surface); border-left: var(--bw) solid var(--ink);
display: flex; flex-direction: column; z-index: 1100;
transform: translateX(101%); transition: transform .25s ease; pointer-events: auto;
}
#point-panel.open { transform: translateX(0); }
.pt-head { padding: 16px 18px; border-bottom: var(--bw) solid var(--ink); }
.pt-head-top { display: flex; justify-content: space-between; align-items: center; }
.pt-close {
width: 34px; height: 34px; border: var(--bw) solid var(--ink); background: var(--surface);
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pt-close:hover { background: var(--surface-high); }
.pt-coords { font-size: 20px; font-weight: 700; margin-top: 12px; letter-spacing: -.01em; }
.pt-coords.pt-addr { font-size: 16px; letter-spacing: 0; line-height: 1.25; }
.pt-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
/* Scrollbar neubrutalist (panel titik, tabel, hasil cari): thumb blok kotak
hitam dengan celah, track terang, siku, hover biru. */
.pt-body, .pt-table-wrap, .search-results, .about-card {
scrollbar-width: auto; scrollbar-color: var(--ink) var(--surface-high);
}
.pt-body::-webkit-scrollbar,
.pt-table-wrap::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.about-card::-webkit-scrollbar { width: 14px; height: 14px; }
.pt-body::-webkit-scrollbar-track,
.pt-table-wrap::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.about-card::-webkit-scrollbar-track { background: var(--surface-high); border-left: 2px solid var(--ink); }
.pt-body::-webkit-scrollbar-thumb,
.pt-table-wrap::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.about-card::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--surface-high); }
.pt-body::-webkit-scrollbar-thumb:hover,
.pt-table-wrap::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover,
.about-card::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.pt-loading { font-family: var(--font-mono); font-size: 13px; color: var(--variant); padding: 20px 0; }
/* Skeleton per-kontainer panel titik (meniru layout renderPoint). */
.pt-skel { display: flex; flex-direction: column; gap: 16px; }
.pt-skel .sk-bar { background: #e3e7ec; }
.pt-skel-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pt-skel-lines .sk-bar { height: 11px; }
.pt-skel-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-skel-chips .sk-bar { height: 26px; width: 108px; border-radius: 999px; }
.pt-skel-sec { align-self: flex-start; width: 44%; height: 10px; }
.pt-skel-cards { display: flex; gap: 8px; }
.pt-skel-cards .sk-bar { flex: 1; height: 92px; border-radius: 10px; }
.pt-skel-chart { height: 152px; border-radius: 10px; }
.pt-skel-rows { display: flex; flex-direction: column; gap: 6px; }
.pt-skel-rows .sk-bar { height: 16px; }
.pt-sec {
font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .05em;
text-transform: uppercase; margin: 4px 0 10px; display: flex; justify-content: space-between;
}
.pt-sec span { color: var(--primary); font-family: var(--font-mono); }
/* ---- Kartu Skew-T (profil vertikal, lanjutan) ---- */
.pt-skewt-head {
display: flex; align-items: center; gap: 8px; width: 100%;
margin: 12px 0 0; padding: 10px 12px; cursor: pointer;
border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); background: var(--surface);
color: var(--ink); font-family: var(--font-ui); font-weight: 700; font-size: 12px;
letter-spacing: .04em; text-transform: uppercase; transition: background .12s;
}
.pt-skewt-head:hover:not(.open) { background: var(--surface-high); }
.pt-skewt-head .skt-lead { font-size: 19px; color: var(--primary); }
.pt-skewt-head .skt-label { flex: 1; text-align: left; }
/* Caret ikut arah aksi: tertutup = panah ATAS (klik → jump ke atas),
terbuka = panah BAWAH (klik → tutup/turun). */
.pt-skewt-head .skt-caret { font-size: 20px; color: var(--primary); transition: transform .15s ease; transform: rotate(180deg); }
.pt-skewt-head.open { background: var(--lime); color: var(--on-lime); box-shadow: none; transform: translate(2px, 2px); }
.pt-skewt-head.open .skt-lead, .pt-skewt-head.open .skt-caret { color: var(--on-lime); }
.pt-skewt-head.open .skt-caret { transform: rotate(0deg); }
.pt-skewt-wrap { display: none; }
.pt-skewt-wrap.open { display: block; margin-top: 8px; }
.skt-note, .skt-load {
font-size: 10px; color: var(--variant); font-family: var(--font-mono);
line-height: 1.4; margin: 0 0 6px;
}
/* Skeleton loading kartu Skew-T (meniru bentuk plot + indeks) */
.skt-skel { gap: 8px; }
.skt-sk-note { height: 12px; width: 82%; }
.skt-sk-plot { height: 360px; border-radius: 0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); }
.skt-sk-exp { height: 30px; width: 128px; }
.skt-sk-idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.skt-sk-idx .sk-bar { height: 40px; border-radius: 0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); }
.pt-skewt-wrap svg { border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); background: #fff; display: block; }
.skt-idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.skt-cell {
border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); background: var(--surface);
padding: 5px 7px; display: flex; flex-direction: column; gap: 1px;
}
.skt-k { font-size: 9px; letter-spacing: .04em; color: var(--variant); font-family: var(--font-mono); }
.skt-v { font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.skt-legend {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--ink);
}
.skt-lg { display: flex; align-items: center; gap: 6px; font-size: 10px; font-family: var(--font-mono); color: var(--ink); }
.skt-lg svg { flex: none; }
.skt-exp-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.skt-export {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
border: var(--bw) solid var(--ink); background: var(--primary); color: #fff;
font-family: var(--font-ui); font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.skt-export:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink); }
.skt-export .material-symbols-outlined { font-size: 17px; }
/* Ringkasan bahasa manusia + saran aktivitas + kartu 3 hari (awam) */
.pt-summary { font-size: 13.5px; line-height: 1.55; padding: 11px 13px; margin-bottom: 11px;
border: 2px solid var(--ink); background: var(--surface-low); }
.pt-summary b { font-weight: 700; }
.pt-summary .feels { color: #e8590c; font-weight: 700; white-space: nowrap; }
.pt-advice { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.adv-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
padding: 4px 8px; border: 2px solid var(--ink); background: var(--surface); box-shadow: 2px 2px 0 0 var(--ink); }
.adv-chip .material-symbols-outlined { font-size: 15px; }
.fc-cards { display: flex; gap: 8px; margin-bottom: 18px; }
.fc-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 9px 4px; border: 2px solid var(--ink); background: var(--surface); }
.fc-day { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.15; }
.fc-day span { display: block; font-size: 9px; font-weight: 500; color: var(--variant); }
.fc-temp { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.fc-temp .ft-ico { font-size: 15px; color: #e8590c; margin-right: -1px; }
.fc-temp .t-max { color: #e8590c; }
.fc-temp .t-min { color: #2360c8; }
.fc-temp .t-min::before { content: "/"; color: var(--variant); font-weight: 500; margin: 0 1px; }
.fc-rain { font-size: 10px; color: #2360c8; font-weight: 700; }
.pt-meteo { display: block; margin-bottom: 4px; }
.chart-legend { display: flex; gap: 18px; justify-content: center; margin: 0 0 18px;
font-size: 11px; font-weight: 600; color: var(--ink); }
.chl-key { display: inline-flex; align-items: center; gap: 5px; }
.chl-key i { font-style: italic; }
.pt-ax { font-family: var(--font-mono); font-size: 9px; fill: #444; }
.pt-table-wrap { max-height: 300px; overflow-y: auto; border: var(--bw) solid var(--ink); }
.pt-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.pt-table th {
position: sticky; top: 0; background: var(--ink); color: var(--surface);
padding: 6px 4px; text-align: left; font-weight: 500;
}
.pt-table td { padding: 4px; border-bottom: 1px solid rgba(28,27,27,.12); white-space: nowrap; }
.pt-table tbody tr:hover { background: var(--surface-high); }
.pt-foot { padding: 14px 18px; border-top: var(--bw) solid var(--ink); }
.pt-export {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px; border: var(--bw) solid var(--ink); background: var(--primary); color: #fff;
font-family: var(--font-ui); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm);
}
.pt-export:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink); }
/* Marker titik (belah ketupat) */
.pm-diamond {
display: block; width: 13px; height: 13px; background: var(--primary);
border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--ink);
}
/* Badge freshness di timeline + toast "Link disalin". */
/* Badge "Last update" — mengambang di atas kontainer slider, rata kanan.
Merah neubrutalist (border ink + hard-shadow), ikon tanda seru. Absolute →
tak menambah tinggi panel timeline. */
.fresh-badge {
position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 5;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
padding: 5px 10px 5px 8px; background: #e8342c; color: #fff;
border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .02em;
pointer-events: auto;
}
.fresh-ico { font-size: 15px; line-height: 1; }
.fresh-chev { display: none; font-size: 15px; line-height: 1; } /* kontrol tutup, HP saja */
.toast {
position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
background: var(--ink); color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
padding: 10px 16px; border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm);
opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2000;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Toast yang membawa tawaran bisa diketuk. Yang biasa tetap tembus klik,
supaya tidak menghalangi peta di bawahnya. Lihat toast() di app.js. */
.toast.tawar { pointer-events: auto; cursor: pointer; text-decoration: underline; }
/* Siklon: ikon berputar di pusat pusaran + banner catatan indikasi. */
.cyc-mark { display: grid; place-items: center; }
.cyc-spin { display: grid; place-items: center; animation: cyc-rot 3s linear infinite;
filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff); }
.cyc-spin .material-symbols-outlined { font-size: 32px; font-variation-settings: "FILL" 1, "wght" 600; }
@keyframes cyc-rot { to { transform: rotate(360deg); } }
/* Wadah dua banner (siklon + ITCZ): kolom flex mengambang tengah-atas. Karena
in-flow, saat satu banner memuai (dropdown), yang lain terdorong turun. Gap
cukup lebar agar tab dropdown (menjuntai ke bawah) tetap terlihat. */
.notes {
position: absolute; top: 20px; right: 132px; left: auto; transform: none;
display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
z-index: 1200; width: max-content; max-width: 460px; pointer-events: none;
}
.cyc-note {
position: relative;
display: none; flex-direction: column; max-width: 92vw; width: max-content;
border: 2px solid var(--ink); box-shadow: var(--shadow-sm); background: var(--surface);
pointer-events: auto;
}
.cyc-note.show { display: flex; }
.cyc-note-top {
display: flex; align-items: center; gap: 6px; padding: 7px 12px;
background: #e8342c; color: #fff;
font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1.2;
}
.cyc-note-top .material-symbols-outlined { font-size: 16px; flex: none; }
/* Tab putih menonjol di bawah-tengah kontainer. z-index -1 → muncul DARI DALAM
banner (bagian atasnya ketutup kontainer), jadi batas putihnya mulus/tak terlihat. */
.cyc-tab {
position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); z-index: -1;
width: 38px; height: 17px; display: flex; align-items: center; justify-content: center;
background: var(--surface); border: 2px solid var(--ink); border-top: none;
cursor: pointer; padding: 0;
}
.cyc-caret { position: relative; top: 2px; font-size: 18px; line-height: 1; color: #d61f1f; transition: transform .15s ease; }
.cyc-note.open .cyc-caret { transform: rotate(180deg); }
/* panel putih detail: swatch warna + nama + threshold tiap tingkat */
.cyc-detail { display: none; flex-direction: column; gap: 7px; padding: 9px 10px;
background: var(--surface); color: var(--ink); }
.cyc-note.open .cyc-detail { display: flex; }
.cyc-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 10px; white-space: nowrap; }
.cyc-ic { font-size: 18px; flex: none; line-height: 1; font-variation-settings: "FILL" 1, "wght" 600; }
.cyc-row b { font-weight: 700; }
.cyc-th { color: var(--variant); margin-left: auto; padding-left: 14px; }
@media (prefers-reduced-motion: reduce) { .cyc-spin { animation: none; } }
/* ITCZ: banner magenta (kontras, dibedakan dari siklon merah); posisi diatur .notes. */
.itcz-note .cyc-note-top { background: #c1116e; }
.itcz-note .cyc-caret { color: #c1116e; }
.itcz-lead { font-family: var(--font-ui); font-size: 10px; line-height: 1.4;
max-width: 240px; color: var(--ink); }
.itcz-sw { width: 18px; height: 12px; flex: none; border: 1px solid var(--ink); }
.itcz-sw-line { height: 0; border: none; border-top: 3px dashed #ff2ea6; }
.itcz-sw-band { background: rgba(255,46,166,.28); }
/* Panel FENOMENA: popover ke kiri tombol Fenomena; daftar fenomena + status dot
(hijau neon = sedang terjadi, merah = belum). Baris tak-aktif diredupkan.
Arus monsun digambar leaflet-velocity. */
.phenom-wrap { position: relative; pointer-events: auto; }
.phenom-panel {
position: absolute; top: 0; right: 52px; display: none; z-index: 600;
width: max-content; max-width: 300px;
border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
}
.phenom-panel.show { display: block; }
.ph-head { background: var(--ink); color: var(--surface); font-family: var(--font-mono);
font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 5px 10px; }
.ph-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px;
border-top: 1px solid rgba(28,27,27,.12); }
.ph-row:first-of-type { border-top: none; }
.ph-row.ph-off { opacity: .5; } /* belum terjadi → redup */
.ph-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; margin-top: 2px;
border: 1.5px solid var(--ink); }
.ph-dot.on { background: #39ff14; box-shadow: 0 0 6px 1px #39ff14; } /* hijau neon = aktif */
.ph-dot.off { background: #ff2d2d; box-shadow: 0 0 5px 1px #ff2d2d; } /* merah menyala = belum */
.ph-txt { display: flex; flex-direction: column; gap: 1px; }
.ph-txt b { font-family: var(--font-ui); font-size: 11px; font-weight: 700; }
.ph-txt span { font-family: var(--font-ui); font-size: 10px; color: var(--variant); max-width: 234px; }
/* Penanda pusat tekanan Tinggi (H, biru) / Rendah (L, merah) di layer Tekanan.
Halo putih agar terbaca di atas heatmap warna. Huruf serif gaya peta cuaca. */
.hl-wrap { background: none; border: none; }
.hl-mark {
display: flex; flex-direction: column; align-items: center; line-height: 1;
font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 24px;
text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff;
}
.hl-mark b { font-family: var(--font-mono); font-size: 10px; font-weight: 700; margin-top: 1px; }
.hl-h { color: #1f4fd6; }
.hl-l { color: #e03131; }
/* Baris potensi badai (CAPE) di panel titik: chip kategori + catatan angka. */
.pt-storm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pt-storm-note { font-family: var(--font-ui); font-size: 10px; color: var(--variant); }
/* Layar penuh / immersive: sisakan HANYA brand Kertas Cuaca + tombol fullscreen.
Class di #stage (induk #ui & overlay sibling spt #cyc-note/#toast). */
#stage.immersive #ui .col > *:not(.brand):not(.brand-row):not(#fs-btn),
#stage.immersive .ui-bottom,
#stage.immersive .notes,
#stage.immersive #toast,
#stage.immersive #point-panel,
#stage.immersive #pt-reopen { display: none !important; }
/* HP: tombol fullscreen normalnya tersembunyi dalam dropdown; di immersive
paksa tampil agar bisa keluar layar penuh. */
#stage.immersive #fs-btn { display: flex !important; }
/* Tombol info kecil di brand → buka kartu Tentang */
.brand-info { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
background: var(--surface); border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink);
cursor: pointer; pointer-events: auto; margin-left: 2px; }
.brand-info:hover { background: var(--lime); }
.brand-info .material-symbols-outlined { font-size: 17px; color: var(--primary); }
.brand-info:hover .material-symbols-outlined { color: var(--on-lime); }
/* ---- Pindah antar-app (Kertas Cuaca <-> Fenomena): panah di brand buka kontainer saudara ---- */
/* position:relative jadi jangkar kartu saudara yang MENGAMBANG di sebelahnya.
Kartu itu TIDAK boleh ikut mengalir, kalau ikut, membukanya menambah tinggi
brand-row dan panel Parameter di bawahnya terdorong turun. */
.brand-row { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.nav-arrow { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
background: var(--surface); border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink);
cursor: pointer; pointer-events: auto; margin-left: 2px; }
.nav-arrow:hover { background: var(--lime); }
.nav-arrow .material-symbols-outlined { font-size: 18px; color: var(--primary); transition: transform .25s ease; }
.nav-arrow:hover .material-symbols-outlined { color: var(--on-lime); }
.brand-row.nav-open .nav-arrow .material-symbols-outlined { transform: rotate(180deg); }
/* Kartu app saudara: tersembunyi -> geser muncul ke KANAN saat panah ditekan.
Saat tutup border transparan & lebar 0 supaya tak ada sisa.
max-height WAJIB ikut 0. Tanpa itu kartu yang tertutup tetap memakan tinggi
(54px per kartu), brand-row jadi 108px bukan 62px, dan panel Parameter di
bawahnya ikut terdorong turun 46px. */
/* Dua kartu saudara bertumpuk ke bawah, bukan berjajar, supaya tak
mendorong lebar brand-row di layar sempit. */
/* Jarak antar kartu baru muncul saat panelnya terbuka. Kalau gap dipasang
permanen, dua kartu selebar 0 tetap menyisakan celah di brand-row. */
.sibling-links { position: absolute; top: 0; left: 100%; margin-left: 10px;
display: flex; flex-direction: column; gap: 0; z-index: 700; }
.brand-row.nav-open .sibling-links { gap: 8px; }
.sibling-link { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink);
border: var(--bw) solid transparent; background: var(--surface); box-shadow: none;
max-width: 0; max-height: 0; padding: 0; opacity: 0; overflow: hidden; white-space: nowrap; pointer-events: none;
transition: max-width .3s ease, max-height .3s ease, opacity .25s ease, padding .3s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.brand-row.nav-open .sibling-link { max-width: 300px; max-height: 120px; opacity: 1; padding: 9px 13px; pointer-events: auto;
border-color: var(--ink); box-shadow: var(--shadow); }
.sibling-link:hover { background: var(--lime); transform: translate(2px, -2px); box-shadow: -6px 6px 0 0 var(--ink); }
.sibling-link .pl-ico { flex: none; color: var(--primary); font-size: 26px; }
.sibling-link:hover .pl-ico { color: var(--on-lime); }
.sibling-link .pl-txt { display: flex; flex-direction: column; line-height: 1.1; }
.sibling-link .pl-txt strong { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; }
.sibling-link .pl-txt span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; color: var(--variant); margin-top: 4px; }
.sibling-link:hover .pl-txt span { color: var(--on-lime); }
.sibling-link .pl-go { flex: none; font-size: 18px; color: var(--variant); }
.sibling-link:hover .pl-go { color: var(--on-lime); }
/* ---- Ringkasan awam otomatis (kondisi ENSO/IOD kini) ----
Duduk di dalam .legend-col, mengambang tepat di ATAS bar legenda dan rata
kanan dengannya. Sengaja position absolute, bukan in-flow, supaya kartu ini
tidak menambah tinggi baris bawah dan mendorong bar legenda keluar layar. */
.brief-card { position: absolute; bottom: calc(100% + 10px); right: 0;
width: max-content; max-width: 268px; padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
.brief-card[hidden] { display: none; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brief-close { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer; color: var(--variant); }
.brief-close:hover { color: var(--primary); }
.brief-close .material-symbols-outlined { font-size: 16px; }
.brief-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brief-text { font-family: var(--font-ui); font-size: 11.5px; line-height: 1.45; color: var(--ink); }
/* ---- Pemilih kedalaman (Suhu Laut & Arus) ----
Tombol bercaret seperti Indeks Iklim, isinya deret pilihan MENDATAR.
Lebar tombol disamakan dengan panel Parameter di atasnya (224px). */
.depth-bar { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.depth-bar[hidden] { display: none; }
.depth-toggle { display: flex; align-items: center; gap: 10px;
width: max-content; min-width: 224px; padding: 11px 16px;
background: var(--surface); color: var(--ink); cursor: pointer; text-align: left;
font-family: var(--font-ui); font-weight: 700; font-size: 15px; text-transform: uppercase; }
.depth-toggle .depth-ico { color: var(--primary); font-size: 21px; }
.depth-toggle .depth-lbl { flex: none; }
/* Nilai yang sedang dipakai, tetap terbaca walau menu tertutup */
.depth-cur { flex: none; margin-left: auto; text-align: right; font-size: 11px; font-weight: 500;
color: var(--variant); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.depth-caret { flex: none; font-size: 22px; color: var(--variant); transition: transform .15s ease; }
.depth-bar.open .depth-caret { transform: rotate(180deg); }
.depth-menu { display: none; flex-direction: row; width: max-content; max-width: 100%; }
.depth-bar.open .depth-menu { display: flex; }
.depth-opt { display: flex; align-items: center; justify-content: center; padding: 9px 14px;
background: var(--surface); color: var(--ink); border: none;
border-right: var(--bw) solid var(--ink); cursor: pointer; white-space: nowrap;
font-family: var(--font-mono); font-weight: 700; font-size: 12px; transition: background .12s; }
.depth-opt:last-child { border-right: none; }
.depth-opt:hover:not(.active) { background: var(--surface-high); }
.depth-opt.active { background: var(--lime); color: var(--on-lime); }
/* Kartu Tentang (modal) */
.about-overlay { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center;
padding: 20px; background: rgba(28, 27, 27, .5); pointer-events: auto; }
.about-overlay.show { display: flex; }
.about-card { position: relative; display: flex; width: 100%; max-width: 600px;
background: var(--surface); border: var(--bw) solid var(--ink); box-shadow: var(--shadow); }
.about-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center; background: var(--surface);
border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); cursor: pointer; }
.about-close .material-symbols-outlined { font-size: 18px; }
.about-photo { flex: 0 0 42%; background: var(--lime); border-right: var(--bw) solid var(--ink);
display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.about-photo img { width: 100%; height: auto; display: block; }
.about-body { flex: 1; min-width: 0; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.about-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: .08em; background: var(--lime); color: var(--on-lime); border: 2px solid var(--ink);
box-shadow: 2px 2px 0 0 var(--ink); padding: 3px 8px; }
.about-name { font-family: var(--font-display); font-size: 26px; letter-spacing: -.01em; line-height: 1; }
.about-intro { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--ink); }
.about-quote { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink);
background: var(--lime); border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); padding: 9px 11px; margin-top: 2px; }
@media (max-width: 560px) {
.about-card { flex-direction: column; max-width: 320px; max-height: 88vh; overflow-y: auto; }
.about-photo { flex: none; border-right: none; border-bottom: var(--bw) solid var(--ink); }
.about-body { padding: 16px; }
.about-name { font-size: 22px; }
}
/* Penanda "kamu di sini" (geolokasi) — badge bulat neubrutalist. */
.pm-me {
display: grid; place-items: center; width: 32px; height: 32px;
background: var(--primary); color: #fff;
border: 2.5px solid var(--ink); border-radius: 50%;
box-shadow: var(--shadow-sm);
}
.pm-me .material-symbols-outlined { font-size: 20px; line-height: 1; }
/* Point panel: hide/reopen */
.pt-head-btns { display: flex; gap: 8px; }
#point-panel.hidden { transform: translateX(101%); }
#pt-reopen {
position: absolute; top: 50%; right: 0; transform: translateY(-50%);
width: 30px; height: 56px; border: var(--bw) solid var(--ink); border-right: none;
background: var(--primary); color: #fff; cursor: pointer; z-index: 1100;
display: none; align-items: center; justify-content: center;
}
#pt-reopen.show { display: flex; }
/* ===================== SEARCH KOTA/KABUPATEN ===================== */
.search-wrap { position: relative; pointer-events: auto; }
.search-box {
position: absolute; top: 0; right: 52px; width: 262px;
border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
display: none;
}
.search-box.open { display: block; }
.search-box input {
width: 100%; border: none; border-bottom: var(--bw) solid var(--ink);
padding: 12px 14px; font-family: var(--font-ui); font-size: 14px; outline: none;
background: var(--surface); color: var(--ink);
}
.search-results { max-height: 320px; overflow-y: auto; }
.search-item {
padding: 9px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid rgba(28,27,27,.12);
}
.search-item:hover { background: var(--lime); }
.search-empty { padding: 12px 14px; font-size: 13px; color: var(--variant); }
/* =====================================================================
RESPONSIF — tablet & smartphone (overlay mengambang di atas peta)
===================================================================== */
/* ---- TABLET (≤1024px): kecilkan panel, legenda bisa di-scroll ---- */
@media (max-width: 1024px) {
#ui { padding: 14px; }
/* padding #ui menyusut jadi 14px, tab ikut dikecilkan biar tak terpotong tepi layar */
.panel-toggle { left: -13px; width: 13px; }
.panel-toggle .material-symbols-outlined { font-size: 15px; margin-left: -4px; }
.layers, .selects { width: 200px; }
.layer-btn { padding: 10px 14px; font-size: 14px; }
.brand-text strong { font-size: 18px; }
.legend-col { max-width: 58vw; }
.legend-panel { min-width: 0; }
.legend { overflow-x: auto; min-width: 0; }
.legend-cell { width: 36px; }
}
/* ---- SMARTPHONE (≤640px): layout vertikal ---- */
@media (max-width: 640px) {
/* Di HP tak cukup ruang di kanan brand. Kartu saudara pindah ke BAWAH,
tetap mengambang jadi panel Parameter tak ikut terdorong. */
.sibling-links { left: 0; top: 100%; margin-left: 0; margin-top: 8px; }
#ui { padding: 10px; }
.ui-top { gap: 8px; align-items: flex-start; }
/* kolom: anak-anaknya rapat ke kiri (jangan meregang mengikuti banner siklon) */
.col { align-items: flex-start; }
/* brand ringkas (tagline disembunyikan) */
.brand { padding: 7px 10px; gap: 8px; }
.brand-logo { width: 30px; height: 30px; }
.brand-text strong { font-size: 15px; }
.brand-text span { display: none; }
/* sembunyikan elemen dekoratif + zoom (pinch/dobel-tap jalan di peta) */
.selects, .lang, .zoom { display: none; }
/* ===== Kontrol kanan → dropdown VERTIKAL, awalnya ciut jadi 1 tombol ===== */
.col.items-end { flex-direction: column; gap: 8px; align-items: flex-end; }
#ctrl-toggle {
display: flex; align-items: center; justify-content: center; gap: 1px;
height: 40px; padding: 0 8px;
border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm);
cursor: pointer; pointer-events: auto;
}
#ctrl-toggle .material-symbols-outlined { font-size: 20px; }
.ctrl-caret { transition: transform .15s ease; }
.col.items-end.ctrl-open .ctrl-caret { transform: rotate(180deg); }
.icon-btn { width: 40px; height: 40px; box-shadow: var(--shadow-sm); }
/* ciut: sembunyikan tombol kontrol; tampil saat .ctrl-open */
.col.items-end > .icon-btn,
.col.items-end > .search-wrap,
.col.items-end > .city-wrap,
.col.items-end > .phenom-wrap { display: none; }
.col.items-end.ctrl-open > .icon-btn { display: flex; }
.col.items-end.ctrl-open > .search-wrap,
.col.items-end.ctrl-open > .city-wrap,
.col.items-end.ctrl-open > .phenom-wrap { display: block; }
.phenom-panel { right: 46px; }
/* ===== Notif siklon + ITCZ → mengalir tepat di bawah brand (bukan mengambang) ===== */
.notes {
position: static; top: auto; left: auto; transform: none;
align-items: flex-start; gap: 6px; max-width: calc(100vw - 96px);
margin: 2px 0 6px;
}
.cyc-note {
align-self: flex-start; width: max-content; max-width: calc(100vw - 96px);
}
.cyc-note-top { white-space: normal; } /* boleh membungkus kalau sempit */
/* ===== Variabel → dropdown "Parameter" VERTIKAL, ikon saja (kiri) ===== */
.panel-toggle { display: none; }
.layer-bar {
position: static; left: auto; right: auto; top: auto;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
border: none; box-shadow: none; background: none;
}
.param-toggle {
display: flex; align-items: center; gap: 6px;
height: 40px; padding: 0 12px 0 10px;
border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm);
font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .02em;
text-transform: uppercase; color: var(--ink); cursor: pointer; pointer-events: auto;
}
.param-ico { font-size: 19px; color: var(--primary); }
.param-caret { font-size: 20px; transition: transform .15s ease; }
.layer-bar.param-open .param-caret { transform: rotate(180deg); }
.layer-nav { display: none; } /* buang panah carousel lama */
/* Kedalaman di HP: tombol seukuran tombol Parameter, deret pilihan tetap
mendatar tapi boleh di-scroll kalau layarnya sempit. */
.depth-bar { gap: 6px; }
.depth-toggle { width: auto; min-width: 0; height: 40px; padding: 0 12px 0 10px; gap: 6px;
font-size: 13px; letter-spacing: .02em; box-shadow: var(--shadow-sm); }
.depth-toggle .depth-ico { font-size: 19px; }
.depth-cur { flex: none; }
.depth-menu { box-shadow: var(--shadow-sm); max-width: calc(100vw - 40px); overflow-x: auto; }
.depth-opt { padding: 8px 12px; font-size: 11px; }
.layers {
display: none; position: static; flex-direction: column; width: auto;
overflow: visible; box-shadow: var(--shadow-sm);
}
.layer-bar.param-open .layers { display: flex; }
.layer-btn {
flex: 0 0 auto; justify-content: center; width: 48px; gap: 0;
padding: 10px; border-right: none; border-bottom: var(--bw) solid var(--ink);
}
.layer-btn:last-child { border-bottom: none; }
.layer-btn .material-symbols-outlined { font-size: 22px; }
.lb-txt { display: none; } /* HP: ikon saja */
/* ===== Pemilih LEVEL: di bawah Parameter, buka-tutup sama (caret) ===== */
.level-bar {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
border: none; box-shadow: none; background: none;
}
.level-bar.level-open .param-caret { transform: rotate(180deg); }
.levels { box-shadow: var(--shadow-sm); }
.level-bar.level-open .levels { display: flex; }
/* bawah: legenda (atas, bisa scroll) + slider full-width (bawah) */
.ui-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
/* legend-col jadi kolom: [badge] [tabel kondisi] [legenda warna], rata kanan */
.legend-col {
order: 1; align-self: stretch; max-width: none;
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.timeline { order: 2; padding: 8px 10px; }
/* legenda warna: selebar isinya (rata kanan), tak melar penuh. Kalau isinya
panjang (mis. KNOTS) dibatasi 100% lalu bisa di-scroll. */
.legend-panel { min-width: 0; align-self: flex-end; max-width: 100%; }
.legend { overflow-x: auto; min-width: 0; }
.legend-cell { width: 34px; min-height: 30px; font-size: 12px; }
/* Tabel kondisi cuaca → 1 BARIS ringkas (ikon + label kecil), boleh scroll.
In-flow di legend-col, jadi badge di atasnya otomatis ikut naik. */
/* Keterangan kondisi = popover ke kiri tombol (dalam dropdown kontrol). */
.cond-legend { right: 46px; }
.cc-ico.cc-mini { width: 15px; height: 15px; border-width: 1px; box-shadow: 1px 1px 0 0 var(--ink); }
.cc-ico.cc-mini .material-symbols-outlined { font-size: 10px; }
/* Badge "Last update" di HP: DI ATAS legenda (in-flow di legend-col). Awalnya
cukup ikon "!" (hemat ruang). Tap → tampil teks + panah; tap lagi → ciut. */
.fresh-badge { position: static; align-self: flex-end; cursor: pointer; gap: 0; padding: 6px 7px; }
.fresh-badge #fresh-text { display: none; }
/* Badge parameter TIDAK ikut pindah bersama badge Last update. Di HP badge
itu menciut jadi lingkaran di pojok dan tinggal di legend-col yang duduk
di dasar layar, jadi apa pun yang menempel padanya terdorong keluar
layar. Dicoba sekali dan memang hilang. Badge parameter tinggal di blok
status di kiri atas, persis tempat chip parameter yang lama berdiri. */
.status .par-badge { align-self: flex-start; gap: 6px; padding: 5px 10px; cursor: default; }
.fresh-badge.open { gap: 6px; padding: 5px 6px 5px 8px; }
.fresh-badge.open #fresh-text { display: inline; }
.fresh-badge.open .fresh-chev { display: inline; }
/* panel detail titik = full-screen */
#point-panel { width: 100vw; max-width: 100vw; border-left: none; }
#pt-reopen { top: auto; bottom: 128px; transform: none; }
/* kotak pencarian = full-width di bawah bar atas */
.search-box { position: fixed; top: 112px; left: 10px; right: 10px; width: auto; }
}
/* ===================== KERTAS FENOMENA: tambahan iklim ===================== */
/* Panel Indeks memakai gaya #point-panel (parity). Ini isi kartunya. */
.terrain-overlay, .sst-overlay { image-rendering: auto; }
.box-lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em;
color: #fff; text-shadow: 0 0 3px #000, 1px 1px 0 #000; white-space: nowrap; pointer-events: none; }
.leaflet-marker-icon.box-lbl { background: transparent; border: 0; }
/* Zona indeks yang bisa diklik (toggle) */
.zone-rect { cursor: pointer; }
.leaflet-marker-icon.zone-lbl { background: transparent; border: 0; cursor: pointer; }
.zone-lbl > span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
font-family: var(--font-mono); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
padding: 3px 8px; background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink);
box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.zone-lbl:hover > span { background: var(--lime); color: var(--on-lime); }
.ip-note { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10px; color: var(--variant); }
.ip-card { padding: 14px 0; border-bottom: var(--bw) solid var(--ink); }
.ip-card:first-child { padding-top: 0; }
.ip-card:last-child { border-bottom: 0; padding-bottom: 0; }
.ip-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ip-big { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.ip-big .unit { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--variant); margin-left: 5px; }
.ip-cap { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--variant); }
.ip-fc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--ink); }
.ip-fc-val { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.spark { width: 100%; height: 30px; margin-top: 8px; overflow: visible; border: 2px solid var(--ink); background: var(--white); padding: 3px; }
.spark polyline { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border: 2px solid var(--ink); }
.chip::before { content: ""; width: 8px; height: 8px; }
.chip-neutral { background: var(--lime); color: var(--on-lime); } .chip-neutral::before { background: var(--on-lime); }
.chip-warm { background: #ffd9cf; color: #d61f1f; } .chip-warm::before { background: #d61f1f; }
.chip-cool { background: #cfe0ff; color: #0029d7; } .chip-cool::before { background: #0029d7; }
.nino-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nino-cell { border: 2px solid var(--ink); background: var(--white); padding: 7px 8px; display: flex; flex-direction: column; gap: 3px; }
.nino-cell.is-head { background: var(--surface-high); border-color: var(--primary); }
.nino-lbl { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--variant); }
.nino-dot { width: 9px; height: 9px; flex: none; border: 1.5px solid var(--ink); }
.nino-badge { font-size: 8px; background: var(--lime); color: var(--on-lime); padding: 1px 4px; }
.nino-val { font-family: var(--font-display); font-size: 20px; line-height: 1; }
.nino-val.v-warm { color: #d61f1f; } .nino-val.v-cool { color: #0029d7; } .nino-val.v-neutral { color: var(--ink); }
.spark-mini { height: 22px; margin-top: 2px; }
/* Panel Indeks (aside kanan 380px) buka -> kontrol & legenda diberi ruang di kirinya (desktop) */
@media (min-width: 721px) {
#ui.ip-open .col.items-end { margin-right: 400px; }
#ui.ip-open .ui-bottom { padding-right: 400px; }
}
/* Selector indeks (mode Indeks) */
.ix-group { padding: 12px 0; border-bottom: var(--bw) solid var(--ink); }
.ix-group:first-of-type { padding-top: 0; }
.ix-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ix-list { display: flex; flex-direction: column; gap: 6px; }
.ix-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 8px 10px; background: var(--white); border: 2px solid var(--ink);
font-family: var(--font-mono); font-weight: 700; font-size: 11px; text-transform: uppercase;
color: var(--ink); cursor: pointer; transition: background .12s; }
.ix-item:hover { background: var(--surface-high); }
.ix-item.active { background: var(--lime); color: var(--on-lime); border-color: var(--primary); }
.ix-v { margin-left: auto; font-family: var(--font-display); font-size: 14px; }
.ix-v.v-warm { color: #d61f1f; } .ix-v.v-cool { color: #0029d7; }
.ix-item.active .ix-v { color: var(--on-lime); }
.ip-detail { padding-top: 14px; }
.ip-big .v-warm { color: #d61f1f; } .ip-big .v-cool { color: #0029d7; }
/* Klik-titik: marker + kartu nilai */
.pt-marker { background: var(--lime); border: 2.5px solid var(--ink); transform: rotate(45deg); box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.pt-card { padding: 12px 0; border-bottom: var(--bw) solid var(--ink); }
.pt-card:first-child { padding-top: 0; }
.pt-card:last-child { border-bottom: 0; padding-bottom: 0; }
/* Kontainer "Indeks Iklim" di panel kiri: header + dropdown kolaps (gaya panel) */
.index-bar { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.index-toggle { display: flex; align-items: center; gap: 10px; width: 224px; padding: 11px 16px;
background: var(--surface); color: var(--ink); cursor: pointer; text-align: left;
font-family: var(--font-ui); font-weight: 700; font-size: 15px; text-transform: uppercase; }
.index-toggle .index-ico { color: var(--primary); font-size: 21px; }
.index-toggle .index-lbl { flex: 1; }
.index-caret { font-size: 22px; color: var(--variant); transition: transform .15s ease; }
.index-bar.open .index-caret { transform: rotate(180deg); }
.index-menu { display: none; flex-direction: column; width: 224px; }
.index-bar.open .index-menu { display: flex; }
.index-opt { display: flex; align-items: center; padding: 8px 18px; background: var(--surface); color: var(--ink);
border: none; border-bottom: var(--bw) solid var(--ink); text-align: left; cursor: pointer;
font-family: var(--font-ui); font-weight: 700; font-size: 15px; text-transform: uppercase; transition: background .12s; }
.index-opt:last-child { border-bottom: none; }
.index-opt:hover:not(.active) { background: var(--surface-high); }
.index-opt.active { background: var(--lime); color: var(--on-lime); }
/* Plot time-series indeks (paling atas sidebar) */
.ix-plot-wrap { padding-bottom: 14px; margin-bottom: 2px; border-bottom: var(--bw) solid var(--ink); }
.ix-plot-sec { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--ink); }
.ix-plot-ttl { font-family: var(--font-mono); font-weight: 700; font-size: 10px; text-transform: uppercase;
letter-spacing: .04em; color: var(--variant); margin-bottom: 6px; }
.ix-plot-svg { width: 100%; height: auto; display: block; border: 2px solid var(--ink); background: var(--white); }
.ix-axl { font-family: var(--font-mono); font-size: 8px; fill: var(--variant); }
.ix-plot-lg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ix-lg { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--variant); }
.ix-lg i { width: 15px; height: 3px; display: inline-block; }
.ix-lg i.dash { height: 0; border-top: 3px dashed; background: transparent !important; }
.ix-lg i.band { height: 9px; border-radius: 1px; opacity: .8; }
.ix-lg-note { flex-basis: 100%; font-family: var(--font-mono); font-size: 8px; font-weight: 600;
text-transform: none; letter-spacing: 0; color: var(--variant); opacity: .85; margin-top: -6px; }
.ix-plot-empty { font-family: var(--font-mono); font-size: 11px; color: var(--variant); padding: 22px 0; text-align: center; }
/* ---- Popup titik (neubrutalist), ganti sidebar ---- */
.leaflet-popup.kf-pop .leaflet-popup-content-wrapper {
background: var(--surface); color: var(--ink);
border: var(--bw) solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--ink);
}
.leaflet-popup.kf-pop .leaflet-popup-content { margin: 12px 14px; width: 258px !important; line-height: 1.25; }
.leaflet-popup.kf-pop .leaflet-popup-tip { background: var(--surface); border: var(--bw) solid var(--ink);
border-top: none; border-left: none; box-shadow: none; border-radius: 0; }
.leaflet-popup.kf-pop a.leaflet-popup-close-button {
width: 26px; height: 26px; top: 8px; right: 8px; padding: 0;
font: 700 18px/22px var(--font-mono); color: var(--ink);
background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 0;
}
.leaflet-popup.kf-pop a.leaflet-popup-close-button:hover { background: var(--lime); color: var(--on-lime); }
.kf-pop-ttl { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .01em; padding-right: 28px; }
.kf-pop-coord { font-family: var(--font-mono); font-size: 10px; color: var(--variant); margin-top: 3px; }
.kf-pop-big { margin-top: 7px; font-family: var(--font-display); font-size: 25px; line-height: 1; }
.kf-pop-big .kf-pop-unit { font-family: var(--font-mono); font-size: 12px; color: var(--variant); margin-left: 3px; }
.kf-pop-sub { font-family: var(--font-mono); font-size: 10px; color: var(--variant); margin-top: 5px; }
.kf-pop-plot { width: 100%; height: auto; display: block; margin-top: 9px; border: 2px solid var(--ink); background: var(--white); }
.kf-pop-empty { font-family: var(--font-mono); font-size: 11px; color: var(--variant); margin-top: 8px; }
.kf-axl { font-family: var(--font-mono); font-size: 8px; fill: var(--variant); }
.kf-axunit { font-weight: 700; fill: var(--ink); }
/* ==================================================================
TATA LETAK HP (<=640px)
Semua kontrol pindah ke satu bilah bawah yang tersembunyi di luar
bingkai. Peta jadi bersih: cuma chip nama parameter di atas, legenda
tegak di kiri, dan tumpukan keterangan di kiri bawah.
Di desktop SELURUH blok ini tidak berlaku.
================================================================== */
/* Default: semua elemen HP disembunyikan, supaya desktop tak tersentuh. */
.lowbar, .lowbar-handle, .par-chip, .ket-stack { display: none; }
@media (max-width: 640px) {
/* ---- gagang penarik, satu-satunya kontrol yang terlihat saat ciut ---- */
.lowbar-handle {
display: flex; align-items: center; justify-content: center;
position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
z-index: 1400; width: 76px; height: 30px; padding: 0;
background: var(--surface); color: var(--ink);
border: var(--bw) solid var(--ink); border-bottom: none;
box-shadow: 0 -3px 0 0 var(--ink); cursor: pointer;
}
.lowbar-handle .material-symbols-outlined { font-size: 22px; }
.lowbar-handle.open { opacity: 0; pointer-events: none; }
/* ---- bilah bawah ---- */
.lowbar {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1390;
max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
/* Saat terbuka, bilah MENGISI tepat ruang sisa di bawah peta 4:3. Kalau
cuma dipatok di bawah, isinya yang pendek menyisakan celah hitam. */
padding: 10px 12px 16px;
background: var(--surface); border-top: var(--bw) solid var(--ink);
/* Ciut = digeser penuh ke bawah luar bingkai. Muncul dengan naik + memudar. */
transform: translateY(100%); opacity: 0; pointer-events: none;
transition: transform .26s ease, opacity .2s ease;
}
.lowbar.open {
transform: translateY(0); opacity: 1; pointer-events: auto;
/* Tinggi DIPATOK, bukan diregangkan top+bottom, sama alasannya dengan
legenda: peregangan tak berlaku dan menyisakan celah hitam di atas. */
top: 75vw; bottom: auto; height: calc(100dvh - 75vw); max-height: none;
}
.lowbar-grip {
width: 44px; height: 4px; margin: 0 auto 10px;
background: var(--ink); opacity: .35;
}
.lb-sec + .lb-sec { margin-top: 14px; }
.lb-head {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: .12em; color: var(--variant); margin-bottom: 4px;
}
/* Garis pemisah tipis di bawah judul seksi, meniru contoh user. */
.lb-rule { height: 2px; background: var(--ink); opacity: .18; margin-bottom: 8px; }
/* TIGA per baris, sisanya turun ke bawah. Parameter ada 9 jadi pas 3 baris,
dan Penanda maupun Fenomena yang isinya 3 jadi satu baris penuh. */
/* minmax(0,1fr), BUKAN 1fr. Kolom 1fr punya min-width:auto sehingga tak mau
menyusut di bawah lebar teksnya, dan label panjang seperti "Daya tampung
PM2,5" membuat seluruh grid meluber keluar layar. */
.lb-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lb-btn {
display: flex; align-items: center; justify-content: flex-start; gap: 5px;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 7px 8px; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
color: var(--ink); background: var(--surface-high);
border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); cursor: pointer;
}
.lb-btn .material-symbols-outlined { font-size: 15px; flex: 0 0 auto; }
.lb-btn.active { background: var(--lime); color: var(--on-lime); }
.lb-btn.disabled { opacity: .38; pointer-events: none; box-shadow: none; }
.lb-btn:active { transform: translate(2px, 2px); box-shadow: none; }
/* ---- peta didorong & dijadikan 4:3 landscape saat bilah naik ---- */
#stage.lowbar-open #map {
height: 75vw; /* lebar : tinggi = 4 : 3 */
transition: height .26s ease;
}
/* Bilah terbuka: legenda mengecil dan tingginya menyesuaikan peta 4:3. */
#stage.lowbar-open .legend-panel {
top: 104px; bottom: auto; height: calc(75vw - 112px); max-height: none;
}
#stage.lowbar-open .acc-badge { bottom: auto; top: calc(75vw - 30px); }
/* Chip parameter & tumpukan keterangan juga menempel ke area peta. */
#stage.lowbar-open .ket-stack { bottom: auto; top: calc(75vw - 92px); }
/* Slider disembunyikan selama bilah terbuka. Tak ada ruang, dan kalau
dibiarkan ia tembus menimpa tombol. Muncul lagi begitu bilah ditutup.
Yang disembunyikan HANYA .timeline, bukan .ui-bottom, karena legenda
ternyata anak .ui-bottom juga dan ikut hilang kalau induknya dimatikan. */
#stage.lowbar-open .timeline { opacity: 0; pointer-events: none; }
.timeline { transition: opacity .2s ease; }
#stage #map { transition: height .26s ease; }
/* ---- kontrol lama disembunyikan, sudah diwakili bilah bawah ---- */
.layer-bar, .level-bar, .panel.selects,
#ctrl-toggle, .lang, .zoom, .city-wrap, #cyclone-toggle, #itcz-toggle,
.phenom-wrap, #share-btn, #fs-btn, .search-wrap,
/* Kontainer khas dua app lain: Daya Dukung (Emisi) dan Indeks Iklim
(Fenomena). Isinya sudah pindah jadi seksi di bilah bawah. */
.panel.daya-dukung, .index-bar, .index-menu, #zones-btn,
#model-toggle, #depth-toggle { display: none !important; }
/* Lokasi TETAP di panel kanan, permintaan user. */
#geo-btn { display: flex !important; }
/* ---- chip parameter: TEPAT DI ATAS legenda tegak, bukan tengah layar ---- */
.par-chip {
display: inline-flex; align-items: center; gap: 6px;
position: fixed; left: 8px; top: 68px; transform: none;
z-index: 1200; padding: 6px 10px; white-space: nowrap; max-width: 60vw;
overflow: hidden; text-overflow: ellipsis;
background: var(--surface); color: var(--ink);
border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
font-family: var(--font-display); font-size: 12px;
}
.par-chip[hidden] { display: none; }
.par-chip .material-symbols-outlined { font-size: 16px; }
/* ---- legenda TEGAK di kiri, TINGGI ----
Layar HP itu potret, jadi ruang tegaknya banyak. Legenda direntang dari
bawah chip parameter sampai tepat di atas badge akurasi, dan tiap selnya
MELAR mengisi sisa ruang, bukan dipatok tinggi tetap. Kalau dipatok, di
layar tinggi ia jadi bantat menggantung di tengah. */
.legend-panel {
/* Tinggi DIPATOK, bukan diregangkan lewat top + bottom. Peregangan itu
tak berlaku di sini karena panel ini flex-container yang tingginya
terlanjur ditentukan isinya, hasilnya jadi bantat menggantung.
dvh dipakai supaya ikut menyusut saat bilah alamat HP muncul. */
position: fixed; left: 8px; top: 108px; bottom: auto;
/* 108 di atas untuk chip, 156 di bawah untuk badge akurasi + slider. */
height: calc(100dvh - 264px);
z-index: 1150; width: auto; max-width: 72px;
display: flex; flex-direction: column-reverse; /* sel pertama = paling bawah */
overflow: hidden; padding: 0;
}
.legend-panel .legend {
display: flex; flex-direction: column-reverse;
flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.legend-panel .legend-cell {
width: 100%; min-width: 44px; min-height: 18px; height: auto;
flex: 1 1 0; /* melar rata mengisi tinggi yang tersedia */
border-right: none; border-bottom: 1px solid rgba(28,27,27,.2);
font-size: 11px;
/* Label kata seperti "Sangat Tidak Sehat" harus MEMBUNGKUS, bukan
terpotong. Dengan lebar sel yang sempit ia jatuh sendiri jadi tiga
baris, dan "Tidak Sehat" jadi dua baris. Rata tengah supaya rapi. */
white-space: normal; text-align: center; line-height: 1.15;
padding: 2px 3px; overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
/* Legenda berlabel KATA (ISPU) sedikit lebih lebar, supaya "Berbahaya"
muat utuh satu baris. Pemenggalan barisnya sendiri sudah diatur
di LEGENDS.ispu, bukan mengandalkan pembungkusan otomatis. */
.legend-panel .legend-words .legend-cell { font-size: 10px; letter-spacing: -.01em; }
.legend-panel .legend-cell:last-child { border-bottom: none; }
.legend-head {
order: 99; /* dengan column-reverse, ini jatuh ke BAWAH */
flex: 0 0 auto;
padding: 5px 6px; text-align: center; font-size: 9px;
border-right: none; border-top: var(--bw) solid var(--ink);
}
/* ---- badge akurasi: DI ATAS slider, bukan menempel di dalamnya ---- */
/* Slider setinggi ~70px, jadi 120 dari bawah menaruh badge tepat DI ATASNYA
dengan sedikit jarak, bukan menempel di dalamnya seperti di desktop. */
.acc-badge {
position: fixed; left: 8px; right: auto; bottom: 120px; top: auto;
z-index: 1160;
}
/* ---- tumpukan keterangan, kiri bawah, bisa diciutkan ke samping ---- */
.ket-stack {
display: flex; align-items: flex-end;
position: fixed; left: 0; bottom: 42px; z-index: 1250;
max-width: 78vw;
transition: transform .24s ease;
}
.ket-stack[hidden] { display: none; }
.ket-stack.ciut { transform: translateX(calc(-100% + 26px)); }
.ket-body {
max-height: 40vh; overflow-y: auto;
display: flex; flex-direction: column; gap: 6px;
padding: 8px; background: var(--surface);
border: var(--bw) solid var(--ink); border-left: none;
box-shadow: 3px 3px 0 0 var(--ink);
}
.ket-toggle {
flex: 0 0 auto; width: 26px; height: 46px; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: var(--lime); color: var(--on-lime);
border: var(--bw) solid var(--ink); border-left: none;
box-shadow: 3px 3px 0 0 var(--ink);
}
.ket-toggle .material-symbols-outlined { font-size: 20px; transition: transform .2s ease; }
.ket-stack.ciut .ket-toggle .material-symbols-outlined { transform: rotate(180deg); }
.ket-item { font-family: var(--font-ui); font-size: 11px; line-height: 1.35; }
.ket-item b { font-family: var(--font-display); font-size: 11px; }
.ket-judul {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
color: var(--variant); margin-bottom: 2px;
}
/* Slider tetap di bawah tapi diberi ruang untuk gagang bilah. */
.ui-bottom { padding-bottom: 34px; }
/* Legenda lama di baris bawah tak dipakai lagi, sudah pindah ke kiri tegak. */
.legend-col { display: block; }
}
@media (max-width: 640px) {
/* Elemen keterangan yang DIPINDAH ke tumpukan kiri bawah: posisi absolut
bawaannya dimatikan supaya ikut mengalir di dalam tumpukan. */
.di-ket {
position: static !important; inset: auto !important;
transform: none !important; margin: 0 !important;
max-width: 100% !important; width: auto !important;
box-shadow: none !important; border: none !important;
background: transparent !important; padding: 0 !important;
display: block !important; opacity: 1 !important;
}
.di-ket .cyc-tab, .di-ket .itcz-tab { display: none !important; }
}
/* =====================================================================
GAYA ENVIROCIRCLE, DITIMPA DI AKHIR BERKAS
Oceansight itu Kertas Fenomena yang pindah rumah. Berkas ini dipakai
APA ADANYA dari sana, dan yang mengubah wajahnya cuma blok ini.
NAMA TOKENNYA TIDAK DIGANTI, cuma NILAINYA. Kebetulan yang sangat
menolong, kertas-fenomena dan Atmosight memakai 18 nama token yang sama
persis. Jadi menimpa nilainya di sini mengubah seluruh perabot sekaligus,
tanpa menyentuh satu pun dari 78 KB aturan di atasnya.
Cara yang sama dipakai waktu rebranding Envirocircle 27 September.
Delapan token tambahan di bawah TIDAK ADA di kertas-fenomena. Mereka
dibawa dari Atmosight supaya aturan baru yang ditulis khusus Oceansight
bisa memakai tangga tinta dan aksen yang sama dengan dua app lain.
===================================================================== */
:root {
--ink: #074173;
--paper: #ffffff;
--surface: #ffffff;
--surface-low: #F6FBFB;
--surface-high: #E9F7F6;
--surface-highest: #C8ECE9;
--white: #ffffff;
--aksen: #1679AB;
--aksen-tua: #115F86;
--aksen-teks: #ffffff;
--primary: #1679AB;
--on-primary: #ffffff;
--lime: #C5FF95;
--on-lime: #074173;
--sorot: #5DEBD7;
--sorot-tipis: rgba(93, 235, 215, .22);
--variant: rgba(7, 65, 115, .5);
--ink-70: rgba(7, 65, 115, .7);
--ink-50: rgba(7, 65, 115, .5);
--ink-20: rgba(7, 65, 115, .2);
--ink-5: rgba(7, 65, 115, .05);
--bw: 0.7px;
--shadow: none;
--shadow-sm: none;
--font-display: "Geologica", ui-sans-serif, system-ui, sans-serif;
--font-ui: "Geologica", ui-sans-serif, system-ui, sans-serif;
--font-mono: "Geologica", ui-sans-serif, system-ui, sans-serif;
}
/* ---- Blok merek, pola Envirocircle ----
Blok ini dulu menulis sendiri warna dan ukurannya dengan selektor
.panel.brand, sebab merek di sini masih kartu putih. Sejak markup-nya
dibungkus .ident dan berdiri langsung di atas peta, lapis raja di kaki
berkas ini yang mengurusnya, dan selektor lama cuma menang diam diam
lalu mengembalikan huruf birunya. Yang tersisa di sini cuma tata letak
yang tidak dibawa lapis itu. */
.panel.brand { display: flex; align-items: center; gap: 10px; }
.ident .itera-logo { width: auto; display: block; flex: none; }
.ident .itera-pisah {
width: 1px; flex: none; display: block; background: rgba(255, 255, 255, .45);
}
.ident .brand-logo { flex: none; }
/* Navigasi antar app di kolom kanan.
Aturannya DIBIARKAN KOSONG di sini dan diurus lapis raja di kaki berkas,
bagian MENU HEADER, yang disalin apa adanya dari Atmosight. Dulu blok ini
menulis sendiri angka angkanya, 12px dan padding 9px lawan 13px dan 10px
di sana, dan selisih satu piksel itu cukup untuk membuat garis menunya
tidak sejajar dengan tepi ID/EN di sebelahnya. Tiga app memakai satu
sumber angka, bukan tiga tafsir. */
/* ---- Chip sumber data dan titik segar, disalin dari Atmosight ----
Hijau segar, merah basi, KUNING berarti sedang memakai cadangan.
Yang basi tetap merah walau dari cadangan. Kuning berarti "jaring
pengaman bekerja", bukan "semua beres". */
.fresh-src { display: flex; align-items: center; gap: 5px;
border-left: 0.7px solid var(--ink-20); padding-left: 8px; margin-left: 4px;
font-family: var(--font-ui); font-size: 10px; font-weight: 300;
letter-spacing: .04em; color: var(--ink-50); }
.fresh-dot { width: 7px; height: 7px; border-radius: 50%; border: 0;
background: var(--ink-20); flex: none; }
.fresh-badge[data-segar="ya"] .fresh-dot { background: #3ddc84; }
.fresh-badge[data-segar="tidak"] .fresh-dot { background: #ff4d43; }
.fresh-badge[data-sumber="cadangan"][data-segar="ya"] .fresh-dot { background: #ffc23d; }
/* =====================================================================
KARTU TEPI, disalin dari Atmosight
Pola "Stock Information" raja.co.id. Tulang punggung tipis menempel di
tepi layar, labelnya berdiri tegak, badannya melebar keluar waktu
ditekan. Peta tetap penuh waktu semuanya tertutup.
Dicuplik dengan menyaring SELURUH aturan ber-.sisi di Atmosight lalu
membuang yang menyebut kelas khas Atmosight saja, seperti mjo, skewt,
siklon, dan ITCZ. Dari 83 aturan, 73 dipakai.
===================================================================== */
.sisi { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; align-items: stretch; pointer-events: auto; }
.sisi--kiri { left: 0; flex-direction: row-reverse; }
.sisi--kanan { right: 0; flex-direction: row; }
.sisi-spine { flex: none; width: 40px; min-height: 190px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; background: var(--ink); color: var(--paper); border: 0; transition: background .2s ease; }
.sisi--kiri .sisi-spine { border-radius: 0 4px 4px 0; }
.sisi--kanan .sisi-spine { border-radius: 4px 0 0 4px; }
.sisi-spine:hover { background: var(--ink); }
.sisi-ico { font-size: 20px; }
.sisi-lbl { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 300; letter-spacing: .10em; text-transform: uppercase; white-space: nowrap; }
.sisi-body { display: none; width: 300px; max-height: 78vh; overflow-y: auto; background: var(--paper); border: var(--rambut, 0.7px) solid var(--ink-20); padding: 18px 16px; }
.sisi--kiri .sisi-body { border-left: 0; border-radius: 0 4px 4px 0; }
.sisi--kanan .sisi-body { border-right: 0; border-radius: 4px 0 0 4px; }
.sisi.terbuka .sisi-body { display: block; }
.sisi.terbuka .sisi-spine { background: var(--ink); }
.sisi-body .col { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.sisi-body .col.items-end { align-items: stretch; }
.sisi-body .panel { background: transparent; border: 0; padding: 0; box-shadow: none; }
.sisi-body .brand-row { width: 100%; }
.sisi-body .brand { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 0.7px solid var(--ink-20); }
.sisi-body .brand-info, .sisi-body .nav-arrow { color: var(--ink-50); background: transparent; border: 0; }
.sisi-body .brand-info:hover, .sisi-body .nav-arrow:hover { color: var(--ink); }
.sisi-body .layers { display: flex; flex-direction: column; gap: 0; width: 100%; }
.sisi-body .layer-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; text-align: left; background: transparent; color: var(--ink-70); border: 0; border-bottom: 0.7px solid var(--ink-20); font-size: 13px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase; transition: color .18s ease; }
.sisi-body .layer-btn:last-child { border-bottom: 0; }
.sisi-body .layer-btn .material-symbols-outlined { font-size: 19px; }
.sisi-body .layer-btn:hover { color: var(--ink); }
.sisi-body .layer-btn.active { background: transparent; color: var(--ink); font-weight: 300; border-bottom-color: var(--ink); }
.sisi-body .selects { display: flex; flex-direction: column; gap: 14px; }
.sisi-body .icon-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; background: transparent; color: var(--ink-70); border: 0; border-bottom: 0.7px solid var(--ink-20); font-size: 13px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase; border-radius: 0; }
.sisi-body .icon-btn::after { content: attr(data-tip); font: inherit; letter-spacing: inherit; }
.sisi-body .icon-btn .material-symbols-outlined { font-size: 19px; }
.sisi-body .icon-btn:hover { color: var(--ink); }
.sisi-body .icon-btn.active { color: var(--ink); font-weight: 300; border-bottom-color: var(--ink); }
.sisi-body .zoom, .sisi-body .lang { display: flex; border: 0.7px solid var(--ink-20); border-radius: 4px; overflow: hidden; }
.sisi-body .zoom button, .sisi-body .lang button { flex: 1; background: transparent; color: var(--ink-70); border: 0; padding: 8px 0; font-size: 12px; font-weight: 200; letter-spacing: .08em; }
.sisi-body .lang button.active { background: var(--ink); color: var(--paper); }
.sisi-body .zoom button + button, .sisi-body .lang button + button { border-left: 0.7px solid var(--ink-20); }
.sisi-body::-webkit-scrollbar { width: 10px; height: 10px; }
.sisi-body::-webkit-scrollbar-track { background: transparent; border: 0; }
.sisi-body::-webkit-scrollbar-thumb { background: var(--ink-20); border-radius: 999px; border: 3px solid var(--paper); }
.sisi-body .panel.layers .layer-btn.active .material-symbols-outlined { background: transparent; color: inherit; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.sisi-body .panel.layers .layer-btn:hover:not(.disabled) .lb-txt { background: transparent; color: inherit; border: 0; box-shadow: none; padding: 0; text-shadow: none; }
.sisi-body [data-tip]::after { position: static; opacity: 1; transform: none; background: transparent; color: inherit; border: 0; box-shadow: none; padding: 0; margin: 0; white-space: nowrap; font-size: 13px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase; }
.sisi-body .icon-btn { height: auto; min-height: 0; }
.sisi-body .zoom { flex-direction: row; }
.sisi-body .zoom button, .sisi-body .lang button { width: auto; height: auto; min-height: 0; }
.sisi-body .zoom button:first-child { border-bottom: 0; }
.sisi-body .col.items-end [data-tip]::after { position: static; opacity: 1; transform: none; background: transparent; color: inherit; border: 0; box-shadow: none; padding: 0; margin: 0; white-space: nowrap; font-size: 13px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase; }
.sisi-body .col.items-end .icon-btn { width: 100%; height: auto; min-height: 0; justify-content: flex-start; padding: 11px 4px; }
.sisi-body .col.items-end .lang { width: 100%; }
.sisi-body .col.items-end .search-wrap { width: 100%; }
.rel .sisi { position: static; transform: none; }
.sisi-spine { min-height: 132px; }
#sisi-model .sisi-body { width: 250px; padding: 16px; }
#sisi-param .sisi-body { width: 250px; }
.alat .sisi--kanan { position: static; transform: none; margin-top: 4px; }
.alat .sisi--kanan .sisi-body { max-height: calc(100vh - 260px); }
.alat .sisi--kanan .sisi-body { overflow-y: auto; overflow-x: hidden; max-height: min(560px, calc(100vh - 220px)); /* DILEBARKAN 300 -> 376 px, diminta user. Keterangan Siklon dan ITCZ isinya baris berlajur, nama di kiri dan ambangnya di kanan, dan di 300 px lajurnya patah jadi dua baris di hampir tiap butir. Yang dilebarkan kartunya, bukan keterangannya yang dipangkas. */ width: 376px; }
.rel .sisi { align-items: flex-start; }
#sisi-param .sisi-body { max-height: 344px; }
#sisi-param .sisi-body { max-height: 286px; }
.sisi.terbuka .sisi-spine .sisi-ico { color: var(--lime); }
.sisi-body .panel.layers .layer-btn--half.active { background: var(--lime); border-color: var(--lime); }
.sisi-body .panel.layers .layer-btn--half.active .material-symbols-outlined { color: var(--on-lime); }
.sisi-body .col.items-end .icon-btn { border-left: 3px solid transparent; /* 9 + 3 garis = 12, sejajar dengan baris yang terpilih. */ padding: 11px 10px 11px 9px; transition: background-color .22s ease, color .18s ease, border-left-color .18s ease; }
.sisi-body .col.items-end .icon-btn.active { background-color: var(--lime); color: var(--on-lime); }
.sisi-body .col.items-end .icon-btn.active:hover:not(:disabled) .material-symbols-outlined { color: var(--on-lime); }
.sisi-body .col.items-end .icon-btn.active { border-left-color: var(--aksen); }
.sisi-body .panel.layers .layer-btn.disabled:hover { background-color: transparent; color: var(--ink-70); }
.sisi-body .col.items-end .icon-btn:disabled:hover { background-color: transparent; color: var(--ink-70); }
.sisi-body .panel.layers .layer-btn--half { transition: background-color .22s ease, color .18s ease; }
.sisi-body .panel.layers .layer-btn--half:hover:not(.active) { background-color: var(--lime); color: var(--on-lime); }
.sisi-body .panel.layers .layer-btn--half:hover:not(.active) .material-symbols-outlined { color: var(--on-lime); }
/* ---- Rel kiri, menumpuk dua kartu tegak ----
Tanpa ini kedua aside duduk di top 50% dengan position absolute dan SALING
MENIMPA, yang terlihat cuma kartu terakhir. Sempat terjadi.
Ditulis ulang, bukan disalin. Di Atmosight nilai `top` rel ini berbeda di
tiga media query, dan menyalin aturannya mentah mentah membuat yang
terakhir selalu menang.
Waktu Parameter dibuka, tingginya bertambah dan kartu Indeks turun sendiri.
Tidak ada satu baris JS pun yang mengurus itu. */
.rel {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 40; display: flex; flex-direction: column;
align-items: flex-start; gap: 12px;
pointer-events: none;
}
.rel--kiri { left: 0; }
.rel .sisi { position: static; transform: none; align-items: flex-start; }
.rel .sisi-spine, .rel .sisi-body { pointer-events: auto; }
/* =====================================================================
LAPIS RAJA, 6 Oktober 2026
Disalin dari atmosight/style.css lalu aturan yang komponennya tidak ada
di sini dibuang otomatis. Resep yang sama dipakai waktu Smokewatch
direbranding, jadi tiga app memakai satu sumber gaya, bukan tiga tafsir.
Ditaruh DI PALING BAWAH dan sengaja. Berkas di atasnya warisan Kertas
Fenomena, 1400 baris neubrutalism yang sudah teruji berbulan bulan.
Menulis ulang dari nol berarti mempertaruhkan panel titik, kartu Tentang,
bilah bawah HP, dan kerangka pemuat sekaligus demi warna. Jadi nilainya
yang diganti, bukan berkasnya.
JANGAN tambah aturan neubrutalism baru di atas blok ini.
===================================================================== */
/* ---- Huruf. Geologica cuma punya satu keluarga, jadi yang membedakan
peran tinggal BERAT dan JARAK HURUF. Berat 700 di mana mana adalah sisa
gaya lama dan harus turun, kalau tidak halamannya terasa berat walau
warnanya sudah benar. ---- */
body, button, input, select, textarea { font-family: var(--font-ui); }
body { font-weight: 200; }
.mono { font-family: var(--font-ui); font-weight: 200; letter-spacing: .04em; }
/* Bayangan keras yang angkanya ditulis mati, bukan lewat token. Disapu
sekaligus. Yang masih boleh punya bayangan cuma kartu tepi dan panel
titik, dan itupun bayangan lembut, bukan blok hitam nol blur. */
.panel, .icon-btn, .zoom, .lang, .layer-btn, .tl-btn,
.param-toggle, .ctrl-toggle, .fresh-badge,
.legend-panel, .sk-panel, .chip, .about-card{
box-shadow: none !important;
}
/* Sudut. Gaya lama siku total, gaya ini membulat TIPIS. Bukan kapsul,
cuma cukup untuk menghilangkan kesan dipotong pisau. */
.panel, .icon-btn, .layer-btn, .tl-btn, .fresh-badge, .legend-panel, .about-card{ border-radius: 4px; }
.zoom, .lang { border-radius: 4px; overflow: hidden; }
/* ---- Kerangka. Peta PENUH, tidak ada panel yang menahan ruang. ---- */
#ui { pointer-events: none; }
.ui-top { align-items: flex-start; }
/* =====================================================================
BILAH BAWAH, slider dan legenda
Satu bidang putih menembus lebar layar dengan satu garis rambut di
atasnya. Bukan dua panel mengambang seperti dulu.
===================================================================== */
.ui-bottom {
left: 0; right: 0; bottom: 0;
display: flex; align-items: center; gap: 28px;
padding: 12px 20px;
background: var(--paper);
border-top: 0.7px solid var(--ink-20);
pointer-events: auto;
}
.ui-bottom .panel.timeline {
flex: 1; display: flex; align-items: center; gap: 18px;
background: transparent; border: 0; padding: 0; box-shadow: none;
min-width: 0;
}
.tl-btn {
width: 34px; height: 34px; flex: none;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--ink);
border: 0.7px solid var(--ink-20); border-radius: 999px;
}
.tl-btn:hover { border-color: var(--ink); }
.tl-btn .material-symbols-outlined { font-size: 18px; }
.tl-main { flex: 1; min-width: 0; }
.tl-cur {
font-size: 12px; font-weight: 200; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-50); margin-bottom: 6px;
}
/* Batang waktu. Alurnya garis rambut, gagangnya titik kecil berongga.
Tidak ada kotak, tidak ada warna. */
#time-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; }
#time-slider::-webkit-slider-runnable-track { height: 1px; background: var(--ink-20); }
#time-slider::-moz-range-track { height: 1px; background: var(--ink-20); }
#time-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 13px; height: 13px; margin-top: -6px; border-radius: 999px;
background: var(--paper); border: 1.4px solid var(--ink); cursor: pointer;
}
#time-slider::-moz-range-thumb {
width: 13px; height: 13px; border-radius: 999px;
background: var(--paper); border: 1.4px solid var(--ink); cursor: pointer;
}
/* Tanda hari. Dibuat seperti penanda langkah 01 02 03 di acuan, label kecil
di atas garis rambutnya sendiri. */
.tl-ticks {
display: flex; margin-top: 2px;
font-size: 10px; font-weight: 200; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-50);
}
.tl-ticks > * { border-top: 0.7px solid var(--ink-20); padding-top: 5px; }
/* Badge sumber data dan akurasi. Dari blok merah jadi label kecil bergaris. */
.fresh-badge{
background: transparent; color: var(--ink-50);
border: 0.7px solid var(--ink-20); border-radius: 999px;
padding: 5px 12px; font-size: 11px; font-weight: 200; letter-spacing: .06em;
box-shadow: none;
}
.fresh-badge .fresh-ico, .acc-badge .fresh-ico { font-size: 14px; }
.fresh-src { border-left: 0.7px solid var(--ink-20); padding-left: 8px; margin-left: 4px; }
/* Legenda. Bingkainya dibuang, kotak warnanya DIBIARKAN berwarna. Itu data,
bukan merek, dan memucatkannya berarti membuang arti petanya. */
.legend-col { pointer-events: auto; }
.legend-panel {
background: transparent; border: 0; padding: 0; box-shadow: none;
display: flex; align-items: center; gap: 12px;
}
.legend-head {
font-size: 10px; font-weight: 300; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-50);
border: 0; padding: 0;
}
.legend { display: flex; border: 0.7px solid var(--ink-20); border-radius: 3px; overflow: hidden; }
.legend-cell {
font-size: 10px; font-weight: 200; letter-spacing: .02em;
border: 0; border-right: 0.7px solid var(--ink-20);
}
.legend-cell:last-child { border-right: 0; }
/* ---- Banner siklon dan ITCZ ---- */
/* ---- Kartu tim dan kartu sandi ---- */
.about-card{
background: var(--paper); border: 0.7px solid var(--ink-20);
border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.14);
}
.about-tag {
font-size: 11px; font-weight: 300; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-50);
background: transparent; border: 0; padding: 0;
}
.about-name{
font-family: var(--font-ui); font-weight: 300;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.about-intro{ font-weight: 200; color: var(--ink-70); letter-spacing: .02em; }
/* ---- Batang gulir, sama resepnya dengan landing ---- */
.pt-body::-webkit-scrollbar, .about-card::-webkit-scrollbar,
.sisi-body::-webkit-scrollbar { width: 10px; height: 10px; }
.pt-body::-webkit-scrollbar-track, .about-card::-webkit-scrollbar-track,
.sisi-body::-webkit-scrollbar-track { background: transparent; border: 0; }
.pt-body::-webkit-scrollbar-thumb, .about-card::-webkit-scrollbar-thumb,
.sisi-body::-webkit-scrollbar-thumb {
background: var(--ink-20); border-radius: 999px; border: 3px solid var(--paper);
}
/* scrollbar-color WAJIB dicabut. Selama dia ada, Chrome mengabaikan seluruh
aturan ::-webkit-scrollbar di atas dan memakai batang gulir bawaannya. */
.pt-body, .about-card, .sisi-body {
scrollbar-width: auto; scrollbar-color: auto;
}
/* ---- Sisa gaya lama yang masih lolos, dibereskan di sini ----
Tiga hal yang angkanya ditulis mati jadi tidak ikut berubah waktu token
diganti. Badge merah yang mengambang di atas bilah, chip sumber data yang
masih berbidang tinta, dan kepala legenda yang masih blok hitam. */
/* Badge TIDAK mengambang lagi. Dulu absolut di atas bilah sebab bilahnya
memang panel kecil melayang, sekarang bilahnya menembus lebar layar jadi
tempatnya di dalam, rata kanan sebelum legenda. */
.fresh-badge{
position: static; order: 5; flex: none;
background: transparent; border: 0.7px solid var(--ink-20);
}
.fresh-src { background: transparent; color: var(--ink-50); }
.fresh-dot { width: 7px; height: 7px; border: 0; }
/* Kepala legenda, dari blok hitam jadi label kelabu tanpa bidang. */
.legend-head { background: transparent; border-right: 0; }
/* Bilah bawah MENEMBUS tepi layar. #ui punya padding 20px dan bilah ini anak
biasa di dalamnya, jadi tanpa margin negatif dia berhenti 20px dari tepi
dan terbaca sebagai panel melayang, bukan sebagai dasar halaman. */
.ui-bottom { margin: 0 -20px -20px; }
/* Alur batang waktu. Aturan lama memberinya border 2px tinta, dan border itu
bertahan walau tinggi dan isiannya sudah diganti, hasilnya garis tebal
hitam bukan garis rambut. */
#time-slider::-webkit-slider-runnable-track { border: 0; }
#time-slider::-moz-range-track { border: 0; }
/* Tanda waktu. Dari pasak tebal jadi goresan tipis. Yang jam dibuat samar,
yang pergantian hari yang boleh terbaca. */
.tl-tick-mark { width: 1px; height: 5px; background: var(--ink-20); }
.tl-tick.day .tl-tick-mark { height: 9px; background: var(--ink-50); }
.tl-tick-lbl {
font-family: var(--font-ui); font-size: 9px; font-weight: 200;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-20);
}
.tl-tick.day .tl-tick-lbl { color: var(--ink-50); font-weight: 300; }
/* Jam berlaku, rata kiri mengikuti irama tepi kiri yang sama di semua bagian. */
.tl-cur { justify-content: flex-start; }
/* Jam berlaku. Aturan lama mematoknya berat 700 lewat .tl-cur .mono, dan itu
menang atas .mono biasa. Di gaya ini tidak ada yang berat. */
.tl-cur .mono { font-weight: 300; letter-spacing: .1em; color: var(--ink); }
/* ---- Sisa gaya lama DI DALAM kartu tepi ----
Tiga aturan lama menang atas aturan baru sebab selektornya menyebut anak,
bukan tombolnya. Ditandingi dengan kedalaman yang sama, bukan dengan
!important. Semuanya peninggalan panel kiri versi diciutkan, di mana ikon
yang dipilih diberi kotak cyan dan namanya diberi kontainer tinta. Di kartu
tepi tidak ada yang perlu dinaungi dari peta, jadi dua duanya dilucuti. */
.sisi-body .panel.layers .layer-btn .material-symbols-outlined,
.sisi-body .panel.layers .layer-btn:hover:not(.disabled) .material-symbols-outlined,
.sisi-body .panel.layers .layer-btn.active .material-symbols-outlined {
background: transparent; color: inherit; border: 0;
box-shadow: none; padding: 0; border-radius: 0;
}
.sisi-body .panel.layers .lb-txt,
.sisi-body .panel.layers .layer-btn.active .lb-txt,
.sisi-body .panel.layers .layer-btn:hover:not(.disabled) .lb-txt {
background: transparent; color: inherit; border: 0;
box-shadow: none; padding: 0; text-shadow: none;
}
/* Nama fitur di kartu kanan. Aturan lama memakai ::after sebagai TOOLTIP
yang mengambang dan tersembunyi, di sini dia dijadikan label biasa yang
ikut aliran, sebab di dalam kartu ikon saja tidak menerangkan apa apa. */
.sisi-body [data-tip]::after {
position: static; opacity: 1; transform: none;
background: transparent; color: inherit; border: 0; box-shadow: none;
padding: 0; margin: 0; white-space: nowrap;
font-size: 13px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase;
}
.sisi-body .icon-btn { height: auto; min-height: 0; }
/* Zoom dan pemilih bahasa jadi sepasang tombol mendatar, dulu tumpukan tegak
yang tingginya 46px per tombol dan menganga di dalam kartu. */
.sisi-body .zoom { flex-direction: row; }
.sisi-body .zoom button, .sisi-body .lang button {
width: auto; height: auto; min-height: 0;
}
.sisi-body .zoom button:first-child { border-bottom: 0; }
/* Label fitur, KEDALAMAN DINAIKKAN. Aturan tooltip lama selektornya
`.col.items-end [data-tip]::after`, tiga kelas, dan itu menang atas
`.sisi-body [data-tip]::after` yang cuma dua. Ditandingi persis, bukan
dipaksa pakai !important. */
.sisi-body .col.items-end [data-tip]::after {
position: static; opacity: 1; transform: none;
background: transparent; color: inherit; border: 0; box-shadow: none;
padding: 0; margin: 0; white-space: nowrap;
font-size: 13px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase;
}
/* Tombol fitur, KEDALAMAN DINAIKKAN lagi dan `justify-content` DIPAKSA rata
kiri. Dua sebabnya. Lebarnya masih dipatok 34px oleh aturan lama yang
selektornya menyebut kolom, dan isinya masih ditengahkan. Gabungan keduanya
membuat label yang baru ditambahkan meluber ke DUA arah, jadi ikonnya
terdorong keluar kartu ke sebelah kiri. */
.sisi-body .col.items-end .icon-btn {
width: 100%; height: auto; min-height: 0;
justify-content: flex-start;
padding: 11px 4px;
}
.sisi-body .col.items-end .zoom,
.sisi-body .col.items-end .lang { width: 100%; }
.sisi-body .col.items-end .city-wrap,
.sisi-body .col.items-end .phenom-wrap,
.sisi-body .col.items-end .search-wrap { width: 100%; }
/* =====================================================================
REL KIRI, dua kartu bertumpuk tegak
Parameter di atas, Model tepat di bawahnya. Karena satu rel berkolom,
membuka Parameter menambah tinggi kartunya dan tombol Model turun sendiri.
Tidak ada satu baris JS pun yang mengatur ini.
===================================================================== */
.rel {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 40; display: flex; flex-direction: column;
align-items: flex-start; gap: 12px; /* jarak antar kartu */
pointer-events: none;
}
.rel--kiri { left: 0; }
.rel .sisi { position: static; transform: none; }
/* Tulang punggung dipendekkan sebab sekarang ada dua bertumpuk. */
.sisi-spine { min-height: 132px; }
/* Kartu Model isinya cuma dua dropdown, jadi badannya tidak perlu selebar
kartu Parameter. */
#sisi-model .sisi-body { width: 250px; padding: 16px; }
/* =====================================================================
ALAT PETA MENGAMBANG, kanan atas
Bahasa, pencarian, dan zoom. Dikeluarkan dari kartu Fitur sebab tiga ini
dipakai terus menerus, bukan sesekali.
===================================================================== */
.alat {
position: absolute; top: 0; right: 0; z-index: 45;
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
pointer-events: auto;
}
.alat-baris { display: flex; align-items: stretch; gap: 8px; }
/* Kotak cari LANGSUNG bisa diketik, tidak perlu ditekan dulu. Tombol lupanya
disembunyikan, bukan dibuang, sebab app.js masih memasang pendengar di sana. */
.alat .search-wrap #search-btn { display: none; }
.alat .search-box {
position: static; display: block; width: 250px;
background: var(--paper); border: 0.7px solid var(--ink-20);
border-radius: 4px; box-shadow: none; overflow: visible;
}
.alat .search-box input {
width: 100%; border: 0; background: transparent; outline: none;
padding: 9px 12px;
font-family: var(--font-ui); font-size: 13px; font-weight: 200;
letter-spacing: .04em; color: var(--ink);
}
.alat .search-box input::placeholder { color: var(--ink-50); }
.alat .search-results {
position: absolute; left: 0; right: 0; top: calc(100% + 4px);
background: var(--paper); border: 0.7px solid var(--ink-20); border-radius: 4px;
max-height: 300px; overflow-y: auto;
}
.alat .search-wrap { position: relative; }
.alat .search-item {
padding: 9px 12px; font-size: 13px; font-weight: 200; letter-spacing: .02em;
color: var(--ink-70); border-bottom: 0.7px solid var(--ink-20); cursor: pointer;
}
.alat .search-item:last-child { border-bottom: 0; }
.alat .search-item:hover { background: var(--ink-5); color: var(--ink); }
.alat .lang, .alat .zoom {
display: flex; flex-direction: row; align-items: stretch;
background: var(--paper); border: 0.7px solid var(--ink-20);
border-radius: 4px; overflow: hidden; box-shadow: none;
}
.alat .lang button, .alat .zoom button {
width: auto; height: auto; min-width: 38px; padding: 9px 12px;
background: transparent; color: var(--ink-70); border: 0; cursor: pointer;
font-family: var(--font-ui); font-size: 12px; font-weight: 200; letter-spacing: .08em;
}
.alat .lang button + button, .alat .zoom button + button {
border-left: 0.7px solid var(--ink-20); border-bottom: 0;
}
.alat .lang button.active { background: var(--ink); color: var(--paper); }
.alat .lang button:disabled { color: var(--ink-20); cursor: default; }
.alat .zoom button:hover { background: var(--ink-5); color: var(--ink); }
.alat .zoom .material-symbols-outlined { font-size: 18px; }
/* =====================================================================
IDENTITAS DI POJOK KIRI ATAS, DAN SCRIM-NYA
===================================================================== */
.ident {
position: absolute; top: 0; left: 0; z-index: 30;
padding: 16px 0 0 20px; pointer-events: auto;
}
/* Semua kotak dilucuti. Tidak ada panel, bingkai, isian, atau bayangan. */
.ident .brand-row, .ident .panel.brand {
background: transparent; border: 0; box-shadow: none; padding: 0;
border-radius: 0;
}
.ident .brand { display: flex; align-items: center; gap: 10px; }
.ident .brand-logo { color: #fff; width: 30px; height: 30px; }
.ident .brand-text strong {
display: block;
font-family: var(--font-ui); font-weight: 300; font-size: 15px;
letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.ident .brand-text span {
display: block; font-size: 11px; font-weight: 200;
letter-spacing: .04em; color: rgba(255, 255, 255, .72);
}
.ident .brand-info, .ident .nav-arrow {
background: transparent; border: 0; box-shadow: none;
color: rgba(255, 255, 255, .72);
}
.ident .brand-info:hover, .ident .nav-arrow:hover { color: #fff; }
.ident .sibling-link {
background: rgba(0, 0, 0, .55); color: #fff;
border: 0.7px solid rgba(255, 255, 255, .28); border-radius: 4px;
box-shadow: none;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ident .sibling-link strong { font-weight: 300; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.ident .sibling-link span { font-weight: 200; font-size: 11px; color: rgba(255, 255, 255, .7); }
/* SCRIM. Dia tidak memakai satu warna mati, dia MENGGELAPKAN apa pun yang ada
di belakangnya lewat backdrop-filter, lalu dipudarkan ke bawah pakai mask.
Itu sebabnya tulisan putih di atasnya tetap terbaca di atas laut biru tua
maupun di atas awan putih.
Gradasi hitam tipis ditumpuk sebagai cadangan untuk peramban yang tidak
mengenal backdrop-filter, hasilnya lebih lemah tapi tidak rusak. */
.scrim {
position: absolute; top: 0; left: 0; right: 0; height: 150px;
z-index: 12; pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
-webkit-backdrop-filter: brightness(.72) saturate(.92);
backdrop-filter: brightness(.72) saturate(.92);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%);
}
/* =====================================================================
REL KIRI PINDAH KE POJOK KIRI ATAS, tepat di bawah header identitas
===================================================================== */
.rel--kiri { top: 104px; transform: none; }
/* Kartu Parameter menyempit, sebab kartu identitas sudah keluar dari sana. */
#sisi-param .sisi-body { width: 250px; }
/* =====================================================================
REL KANAN. Kartu Fitur sekarang anak .alat, tepat di bawah zoom.
===================================================================== */
.alat { align-items: flex-end; }
.alat .sisi--kanan { position: static; transform: none; margin-top: 4px; }
.alat .sisi--kanan .sisi-body { max-height: calc(100vh - 260px); }
/* Legenda Kondisi dan panel Fenomena. BUG yang dilaporkan user, dua duanya
muncul menimpa daftar fitur di bawahnya. Sekarang mereka keluar dari kartu,
mengambang DI SEBELAH KIRI-nya, sejajar dengan tombol yang memanggilnya.
Jadi tetap dekat pemicunya, tapi tidak pernah menutupi fitur lain. */
/* ---- KETERANGAN MASUK KE DALAM KARTU, 4 Oktober 2026 ----
Diminta user. Keterangan Kondisi, Siklon, ITCZ, dan Fenomena sekarang
muncul PERSIS DI BAWAH tombolnya sendiri, seperti dropdown, dan mendorong
baris di bawahnya. Dimatikan tombolnya, keterangannya menutup lagi.
Ini membalik keputusan sebelumnya yang melemparkan mereka MENGAMBANG di
sebelah kiri kartu. Alasan lama, supaya tidak menutupi daftar fitur.
Alasan itu gugur sebab sekarang mereka tidak menimpa apa apa, mereka
MENDORONG. Siklon dan ITCZ ikut pindah ke sini dari pita tengah atas.
Semuanya memakai kelas .show yang sudah ada, tidak ada mekanisme baru. */
.sisi-body .fit-wrap, .sisi-body .city-wrap, .sisi-body .phenom-wrap {
position: static; width: 100%;
}
.sisi-body #cond-legend,
.sisi-body #phenom-panel,
.sisi-body .cyc-note {
position: static; display: none;
width: auto; max-width: none; transform: none;
margin: 0 0 4px; padding: 11px 12px 12px;
background: var(--surface-low); border: 0; border-left: 2px solid var(--ink-20);
border-radius: 0; box-shadow: none !important;
font-size: 11px;
}
.sisi-body #cond-legend.show,
.sisi-body #phenom-panel.show,
.sisi-body .cyc-note.show { display: block; }
/* Tombol panah pembuka rincian ikut masuk ke aliran, dia dulu menempel di
pojok pita yang mengambang. */
/* TOMBOL PANAHNYA DIBUANG dan rinciannya SELALU TERBUKA, 4 Oktober 2026,
diminta user. Di tempat lamanya, melayang di pita tengah atas, melipat
rinciannya masuk akal, pita itu menutupi peta. Di dalam kartu dia tidak
menutupi apa apa, dia mendorong, jadi satu klik tambahan cuma menghalangi.
Lebar kartunya yang ditambah supaya rinciannya muat, bukan rinciannya yang
disembunyikan. */
.sisi-body .cyc-note .cyc-tab { display: none; }
.sisi-body .cyc-note .cyc-detail { display: flex; padding: 0; margin-top: 8px; }
.sisi-body .cyc-note .cyc-note-top { padding: 0; }
/* =====================================================================
ALAT PETA JADI GARIS SAJA
Diminta user. Kotak putihnya dibuang supaya kanan atas terasa lega, dan
isian baru muncul waktu disorot.
Konsekuensinya semuanya jadi PUTIH, sebab mereka sekarang berdiri langsung
di atas peta. Itu artinya mereka WAJIB berada di dalam scrim, kalau tidak
garis putih di atas awan putih akan hilang. Jadi scrim-nya dipanjangkan
supaya bidang pekatnya menaungi sampai baris zoom, baru memudar.
===================================================================== */
.scrim {
height: 190px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
/* Kotak cari, kotaknya HILANG. Yang tersisa satu garis di bawah tulisan,
pola yang sama dengan dropdown Model di kartu Parameter. */
.alat .search-box {
background: transparent; border: 0;
border-bottom: 1px solid rgba(255, 255, 255, .45);
border-radius: 0; box-shadow: none;
transition: border-color .2s ease;
}
.alat .search-box:focus-within { border-bottom-color: #fff; }
.alat .search-box input { color: #fff; padding: 8px 2px; }
.alat .search-box input::placeholder { color: rgba(255, 255, 255, .62); }
/* Daftar hasil TETAP berbidang pekat. Dia berdiri di luar scrim, dan daftar
nama kota yang tembus pandang di atas peta tidak akan terbaca. */
.alat .search-results {
background: var(--paper); border: 0.7px solid var(--ink-20);
box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}
/* ID/EN dan zoom. Diam berarti garis saja, disorot baru muncul isiannya. */
.alat .lang, .alat .zoom {
background: transparent;
border: 1px solid rgba(255, 255, 255, .45);
box-shadow: none;
}
.alat .lang button, .alat .zoom button {
background: transparent; color: rgba(255, 255, 255, .82);
transition: background .2s ease, color .2s ease;
}
.alat .lang button + button, .alat .zoom button + button {
border-left: 1px solid rgba(255, 255, 255, .35);
}
.alat .lang button:hover:not(:disabled), .alat .zoom button:hover {
background: rgba(255, 255, 255, .2); color: #fff;
}
/* Bahasa yang SEDANG dipakai tetap berisian. Ini keadaan terpilih, bukan
keadaan disorot, dan tanpa isian tidak ada yang menandai mana yang aktif. */
.alat .lang button.active { background: rgba(255, 255, 255, .92); color: var(--ink); }
.alat .lang button:disabled { color: rgba(255, 255, 255, .34); }
.alat .zoom .material-symbols-outlined { color: inherit; }
/* Wadah hasil cari yang KOSONG tetap menggambar bingkainya, dan di bawah kotak
cari yang sekarang cuma segaris, itu terbaca sebagai garis kembar. */
.alat .search-results:empty { display: none; }
/* =====================================================================
BLOK STATUS, kiri atas di bawah identitas
Tanpa isian, cuma garis, sesuai permintaan user. Warnanya putih sebab dia
berdiri di atas scrim yang sama dengan identitas dan menu header.
===================================================================== */
.status {
position: absolute; top: 58px; left: 20px; z-index: 28;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
pointer-events: auto;
}
.status .fresh-badge, .status .acc-badge {
position: static; order: 0; margin: 0;
display: inline-flex; align-items: center; gap: 8px;
background: transparent;
border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
box-shadow: none; padding: 5px 13px;
font-family: var(--font-ui); font-size: 11px; font-weight: 200;
letter-spacing: .06em; color: rgba(255, 255, 255, .88);
}
.status .fresh-badge:hover, .status .acc-badge:hover { border-color: #fff; color: #fff; }
.status .fresh-ico { font-size: 14px; color: rgba(255, 255, 255, .7); }
.status .mono { font-family: var(--font-ui); font-weight: 200; letter-spacing: .06em; }
/* Chip sumber data, pemisahnya garis tegak bukan bidang. */
.status .fresh-src {
border-left: 1px solid rgba(255, 255, 255, .35);
padding-left: 9px; margin-left: 3px;
background: transparent; color: rgba(255, 255, 255, .7);
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.status .fresh-dot { width: 7px; height: 7px; border: 0; }
.status .fresh-chev { display: none; }
/* Rel kiri turun, memberi ruang untuk blok status di atasnya. */
.rel--kiri { top: 138px; }
/* Scrim dipanjangkan lagi supaya bidang pekatnya menaungi SAMPAI badge
Akurasi, bukan berhenti di baris zoom. Tanpa itu badge paling bawah
berdiri di daerah yang sudah memudar, dan garis putihnya akan hilang
begitu peta di belakangnya kebetulan terang. */
.scrim {
height: 230px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
/* =====================================================================
SAPUAN AKHIR
Bayangan keras nol blur DIBUANG SEKALIGUS di seluruh app, di mana pun dia
bersembunyi. Sebelumnya dibereskan satu satu per komponen, dan cara itu
TERBUKTI GAGAL, selalu ada yang lolos dan baru ketahuan waktu fiturnya
kebetulan dibuka. Tanda mata neubrutalism yang paling kentara memang itu,
jadi dia dimatikan di akar.
Sesudah baris ini, yang boleh punya bayangan cuma yang disebut di bawahnya,
dan semuanya bayangan LEMBUT untuk menandai lapisan yang mengambang,
bukan bayangan blok yang menandai benda fisik.
===================================================================== */
#stage *, .about-overlay *, #point-panel * { box-shadow: none !important; }
.about-card{ box-shadow: 0 18px 50px rgba(0, 0, 0, .14) !important; }
.alat .search-results { box-shadow: 0 14px 40px rgba(0, 0, 0, .18) !important; }
.sisi-body #cond-legend,
.sisi-body #phenom-panel { box-shadow: 0 14px 40px rgba(0, 0, 0, .12) !important; }
/* Bingkai tebal yang angkanya ditulis mati, 2px dan 3px, ikut ditipiskan.
Yang bergaris-nol tidak terpengaruh, sebab lebar border tidak digambar
kalau border-style-nya none. */
#stage *, .about-overlay * { border-width: 0.7px; }
/* Kecuali yang memang sengaja kupasang 1px di lapis rebrand ini. */
.alat .lang, .alat .zoom, .alat-nav a, .alat .search-box, .tl-btn, .status .fresh-badge, .status .acc-badge,
.ident .brand-info, .ident .nav-arrow { border-width: 1px; }
.alat .search-box { border-top-width: 0; border-left-width: 0; border-right-width: 0; }
.alat-nav a { border-left-width: 0; border-right-width: 0; border-bottom-width: 0; }
/* Kartu Tentang dan kartu sandi, sisa terakhir yang masih beralas cyan. */
.about-photo { background: var(--ink-5); border-right: 0.7px solid var(--ink-20); }
.about-quote {
background: transparent; color: var(--ink-70);
border: 0; border-left: 2px solid var(--ink-20);
padding: 4px 0 4px 12px; margin-top: 6px;
font-family: var(--font-ui); font-size: 12px; font-weight: 200; letter-spacing: .02em;
}
.about-close, .pt-close {
background: transparent; color: var(--ink-70);
border: 0.7px solid var(--ink-20); border-radius: 999px;
}
.about-close:hover, .pt-close:hover { border-color: var(--ink); color: var(--ink); background: var(--ink-5); }
/* Label kota di atas peta. Hurufnya masih Space Grotesk dan JetBrains Mono
yang ditulis mati, dua duanya sudah tidak dimuat halaman ini lagi jadi yang
terpakai huruf cadangan sistem. Diganti ke Geologica.
Halo hitamnya DIPERTAHANKAN, itu bukan gaya, itu satu satunya yang membuat
nama kota terbaca di atas peta yang warnanya bisa apa saja. */
/* Nama negara dan nama laut yang kita gambar sendiri. Sama masalahnya dengan
label kota di atas, hurufnya Space Grotesk yang ditulis mati dan sudah tidak
dimuat halaman ini, jadi yang terpakai huruf cadangan sistem. Halo hitamnya
DIPERTAHANKAN, alasannya sama, itu satu satunya yang membuat namanya terbaca
di atas peta yang warnanya bisa apa saja.
Aturan yang sama persis ada di smokewatch/style.css. Kalau salah satu
diubah, yang satunya ikut diperiksa. */
/* =====================================================================
BAGIAN BAWAH, DIPISAH
Bidang putih selebar layar DIBUANG. Diminta user. Yang tersisa dua
kelompok yang berdiri sendiri di atas peta, kotak waktu di kiri dan
legenda di kanan, dinaungi scrim yang sama polanya dengan header.
===================================================================== */
.scrim--bawah {
top: auto; bottom: 0; height: 210px;
background: linear-gradient(to top, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0));
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}
.ui-bottom {
background: transparent; border-top: 0;
align-items: flex-end; gap: 32px;
padding: 0 20px 18px; margin: 0 -20px;
}
/* ---- Kotak waktu ----
Persegi panjang bergaris, tanpa isian, sudutnya membulat tipis seperti
tulang punggung Parameter. Bukan pil, bukan siku. */
.ui-bottom .panel.timeline {
position: relative;
flex: 1; max-width: 760px;
display: flex; align-items: center; gap: 16px;
border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px;
background: transparent; box-shadow: none;
padding: 12px 16px;
}
/* Jam berlaku DI LUAR kotak, mengambang tepat di atasnya. Diminta user.
Ditempel absolut supaya tidak ikut menambah tinggi kotaknya. */
.tl-cur {
position: absolute; left: 0; bottom: calc(100% + 8px);
margin: 0; display: block; white-space: nowrap;
}
.tl-cur .mono {
font-family: var(--font-ui); font-size: 12px; font-weight: 300;
letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.tl-btn {
border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent;
}
.tl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); border-color: #fff; }
#time-slider::-webkit-slider-runnable-track { background: rgba(255, 255, 255, .38); }
#time-slider::-moz-range-track { background: rgba(255, 255, 255, .38); }
#time-slider::-webkit-slider-thumb { background: #fff; border-color: #fff; }
#time-slider::-moz-range-thumb { background: #fff; border-color: #fff; }
.tl-tick-mark { background: rgba(255, 255, 255, .32); }
.tl-tick.day .tl-tick-mark { background: rgba(255, 255, 255, .6); }
.tl-tick-lbl { color: rgba(255, 255, 255, .45); }
.tl-tick.day .tl-tick-lbl { color: rgba(255, 255, 255, .8); }
/* ---- Legenda ----
TANPA kontainer sama sekali. Yang punya kotak cuma simbol satuannya, dan
kotaknya sama bentuknya dengan kotak waktu di sebelah kiri. */
.legend-col { align-self: flex-end; }
.legend-panel {
background: transparent; border: 0; box-shadow: none;
display: flex; align-items: center; gap: 12px; padding: 0;
}
.legend-head {
border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px;
padding: 7px 12px; background: transparent;
color: #fff; font-size: 10px; font-weight: 300;
letter-spacing: .14em; text-transform: uppercase;
}
/* Pita warnanya berdiri sendiri, tanpa bingkai dan tanpa sudut. Warna
selnya DATA, jadi dibiarkan apa adanya. */
.legend { border: 0; border-radius: 0; overflow: visible; }
.legend-cell { border: 0; border-right: 0; }
/* Bagian bawah WAJIB diberi z-index. Dia elemen biasa tanpa posisi, sedangkan
scrim itu berposisi dengan z-index 12, dan elemen berposisi selalu digambar
di atas elemen biasa. Akibatnya scrim menutupi slider dan legenda, dan
semuanya terlihat pudar seperti tertutup kabut. */
.ui-bottom { position: relative; z-index: 20; }
/* Scrim bawah dipekatkan. Peta di bagian bawah sering kena daratan yang
warnanya terang, dan garis putih 45 persen di atasnya tidak cukup terbaca. */
.scrim--bawah {
background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
-webkit-backdrop-filter: brightness(.62) saturate(.9);
backdrop-filter: brightness(.62) saturate(.9);
}
.ui-bottom .panel.timeline, .legend-head { border-color: rgba(255, 255, 255, .55); }
/* Slider MENTOK KIRI, legenda MENTOK KANAN. Dulu dua duanya berdempetan di
kiri sebab kotak waktu memakan ruang lebihnya, dan legenda cuma menempel di
belakangnya. Sisa ruangnya sekarang dibuang ke tengah.
Tepinya jatuh di 20px, sama dengan identitas di kiri atas dan alat peta di
kanan atas, jadi keempat sudut halaman berdiri di satu garis yang sama. */
.ui-bottom { justify-content: space-between; }
.legend-col { margin-left: auto; }
/* Digeser 16px ke bawah, diminta user. Padding dasarnya 18px, jadi tinggal 2px.
Ini memang RAPAT sekali ke tepi layar. Kalau terasa sesak, naikkan angka ini
saja, tidak ada hal lain yang bergantung padanya. */
.ui-bottom { padding-bottom: 2px; }
/* Turun 16px LAGI. Tidak bisa lewat padding, angkanya sudah 2px dan padding
tidak boleh negatif. Yang menahan sisanya padding 20px milik #ui, jadi yang
dilawan itu, lewat margin negatif. Sisa jarak ke tepi layar jadi 6px. */
.ui-bottom { margin-bottom: -16px; }
/* 11 Sep, DINAIKKAN LAGI, diminta user. 6px terlalu mepet ke tepi bawah.
Jaraknya sekarang disamakan dengan jarak header ke tepi atas, yang diukur
18px, baik di laptop maupun tablet. Jarak bawah = padding #ui + margin ini
+ padding-bottom 2px. Padding #ui 20px di laptop dan 14px di tablet, jadi
marginnya beda. HP tidak disentuh, tata letaknya lain dan belum dirapikan. */
@media (min-width: 641px) {
.ui-bottom { margin-bottom: -4px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
.ui-bottom { margin-bottom: 2px; }
}
/* Kotak waktu MEMANJANG MENGIKUTI legenda. Batas 760px dibuang, dia tumbuh
mengisi sisa ruang sampai 4px sebelum kotak satuan, berapa pun panjang
legendanya. Legenda sendiri tidak boleh ikut memanjang atau menyusut.
margin-left auto DICABUT, dia menambah dorongan yang sekarang sudah
dikerjakan oleh kotak waktu yang tumbuh. */
.ui-bottom { gap: 4px; }
.ui-bottom .panel.timeline { max-width: none; flex: 1 1 auto; min-width: 0; }
.legend-col { margin-left: 0; flex: 0 0 auto; }
/* Kotak satuan KEMBALI KE SEBELAH KIRI pita warnanya, diminta pemilik 19 Okt
sore. Dia memang di situ sejak awal, lalu sempat dipindah ke atas supaya
kolom legenda tidak ikut melebar dan kotak waktu bisa lebih panjang.
Pemilik memilih di samping, dan konsekuensinya diterima, kotak waktu
berhenti sedikit lebih awal.
CARANYA DENGAN MENGHAPUS ATURAN, bukan menambah. Aturan dasar .legend-panel
memang sudah baris dengan kepala di kiri. Yang dulu ditambahkan cuma
flex-direction column di sini, dan dia ikut menimpa aturan HP yang memakai
column-reverse, sebab dia berdiri di luar media query dan letaknya lebih
belakang. Jadi menghapusnya sekaligus mengembalikan susunan HP ke bentuk
yang memang dirancang, satuannya di bawah batang tegak. */
/* Jaraknya naik dari 4 ke 8. */
.ui-bottom { gap: 8px; }
/* =====================================================================
SATUAN TIDAK BOLEH DIBESARKAN HURUFNYA
Dilaporkan user, legenda polutan menampilkan MG/M3 padahal backend
mengirim µg/m³. Ini SALAHKU, bukan salah backend maupun kode lama.
Lapis rebranding memasang text-transform uppercase di label label kecil
supaya seragam, dan aturan itu kena juga ke kotak satuan.
Yang terjadi, huruf µ (U+00B5 MICRO SIGN) kalau dibesarkan oleh CSS
dipetakan Unicode ke Μ (U+039C GREEK CAPITAL MU), dan bentuk Μ Yunani
sama persis dengan M Latin. Jadi µg/m³ terbaca Mg/m³.
Ini bukan soal enak dilihat. Satuan SI itu peka huruf besar kecil. µ
berarti mikro, sepersejuta. M berarti mega, sejuta. Mg/m³ salah dengan
selisih 10 pangkat 12 dari yang dimaksud. Hal yang sama merusak hPa jadi
HPA dan J/kg jadi J/KG di Atmosight.
Jadi tiap tempat yang memuat SATUAN dikecualikan. Yang isinya akronim
seperti ISPU dan AQI tetap terbaca huruf besar sebab memang ditulis huruf
besar di sumbernya, bukan dibesarkan CSS.
Pangkat tiga memakai ³ (U+00B3) dan mikro memakai µ (U+00B5), dua duanya
aksara sungguhan, bukan huruf u atau angka 3 biasa. Sudah begitu sejak
awal di app.js dan di keluaran backend, tinggal jangan dirusak di sini.
===================================================================== */
.legend-head { text-transform: none; }
/* .pt-sec dibesarkan hurufnya, dan satuan di dalamnya ikut terbawa lewat
pewarisan, jadi harus dimatikan tegas di anaknya. */
/* Nama parameter aktif di kepala legenda, 10 Sep 2026, lihat isiKepalaLegenda
di app.js. Namanya dibesarkan, satuannya TIDAK, sebab .legend-head sengaja
text-transform none supaya µ tidak berubah jadi huruf Yunani Μ.
Pemisahnya diberi jarak sendiri. Dengan spasi biasa terbaca menempel, sebab
letter-spacing .14em membuat spasi antarkata lebih lebar dari spasi di
sekitar titik.
Di HP nama DISEMBUNYIKAN. Legenda HP berupa kolom tegak yang sempit dan
kepalanya cuma muat satuan. Blok ini IDENTIK di dua app. */
.legend-head .lh-nama { text-transform: uppercase; font-weight: 400; }
.legend-head .lh-sep { opacity: .55; margin: 0 .6em; }
@media (max-width: 640px) {
.legend-head .lh-nama, .legend-head .lh-sep { display: none; }
}
/* =====================================================================
AKSEN, blok ini IDENTIK di Atmosight dan Smokewatch.
Lahir 11 Sep 2026 sebagai terakota. 27 Sep 2026 paletnya diganti ke
colorhunt 074173-1679AB-5DEBD7-C5FF95 dan blok ini ikut dibagi dua,
sebab palet barunya menyediakan dua warna penanda, bukan satu.
ATURAN PEMBAGIANNYA, dipakai konsisten di seluruh blok.
--aksen, biru #1679AB, untuk TINDAKAN dan TANDA. Tombol yang ditekan,
gagang slider, garis, titik, ikon, dan teks. Bentuknya tipis atau
kecil, jadi dia butuh warna yang tetap terbaca di atas putih (4,82).
--lime, aqua #5DEBD7, untuk KEADAAN. Apa yang sedang terpilih atau
sedang terbuka, dan bentuknya BIDANG. Hurufnya --on-lime yaitu
tinta, kontras 7,12, lebih lapang daripada blok biru berhuruf putih.
Kalau ragu, tanya satu hal, apakah ini bidang yang menyatakan keadaan.
Kalau iya --lime, kalau bukan --aksen.
Peta dan pita legenda TIDAK disentuh, warna di sana itu data.
Satu perbaikan ikut masuk di sini. Ikon di tulang punggung sisi yang
terbuka dulu diberi warna aksen di atas bidang tinta, dan rasionya cuma
2,16, praktis tidak kelihatan. Sekarang dia --lime, 7,12. Itu memang
salah satu dari sedikit tempat di app ini yang punya alas gelap, jadi
warna terang palet akhirnya punya tempat.
Penanda layer aktif pakai BORDER, bukan bayangan. #stage * mematikan
box-shadow dengan !important dan selektor ID, jadi bayangan inset tidak
pernah muncul.
===================================================================== */
#time-slider::-webkit-slider-thumb { background: var(--aksen); border-color: var(--aksen); }
#time-slider::-moz-range-thumb { background: var(--aksen); border-color: var(--aksen); }
.tl-btn { border-color: var(--aksen); color: var(--aksen); }
.legend-head .lh-nama { color: var(--aksen); }
.alat .lang button.active { background: var(--aksen); color: var(--aksen-teks); }
.sisi.terbuka .sisi-spine .sisi-ico { color: var(--lime); }
/* Garis kiri penanda terpilih DIPINDAH ke blok BIDANG PILIH di ekor berkas.
Harus di sana, bukan di sini. Aturan dasar di ekor itu memasang garis kiri
bening dengan kedalaman yang sama, dan yang menang cuma urutannya. */
/* Pasangan ISPU dan AQI di Smokewatch. Ini BIDANG yang menyatakan keadaan,
jadi dia --lime berhuruf tinta, bukan biru berhuruf putih. */
.sisi-body .panel.layers .layer-btn--half.active {
background: var(--lime); border-color: var(--lime);
}
.sisi-body .panel.layers .layer-btn--half.active .lb-txt,
.sisi-body .panel.layers .layer-btn--half.active .material-symbols-outlined {
color: var(--on-lime);
}
/* =====================================================================
AKSEN DI FITUR, 11 Sep 2026, diminta user sebab tadinya cuma
tampilan depan yang kena. Sama dengan Smokewatch KECUALI kepala Kondisi
dan Fenomena, yang di sini tetap teal.
Aturannya sama dengan tampilan depan. Aksen cuma untuk tiga hal.
1. Yang sedang aktif, fitur yang menyala dan tab yang terpilih.
2. Tindakan utama, Export CSV dan tombol Masuk.
3. Penanda posisi, titik di peta, garis jam sekarang di grafik, titik jam
yang tampil, dan gagang slider titik api.
Teks di atas putih pakai --aksen-tua (6,99), bukan --aksen (4,82).
Warna yang membawa arti, ikon kondisi, pita ISPU, tingkat siklon, titik
api, TIDAK disentuh.
===================================================================== */
/* Fitur yang menyala, garis kirinya juga DIPINDAH ke blok BIDANG PILIH di
ekor berkas, alasannya sama. */
/* Kepala legenda Kondisi dan panel Fenomena SENGAJA TETAP TEAL. Sempat
dijadikan bidang aksen, lalu user minta porsi aksen di fitur dikurangi
sedikit, dan dua bidang penuh inilah yang paling berat. Tombol yang
memanggilnya sudah bergaris dan berikon aksen, jadi sambungannya
tetap terbaca. */
/* Ikon di banner siklon, ITCZ, dan titik api. */
.cyc-note-top .material-symbols-outlined,
.itcz-note .cyc-note-top .material-symbols-outlined,
.api-note .cyc-note-top .material-symbols-outlined { color: var(--aksen); }
/* Panel titik. Label kecil di kepala, tab terpilih, Skew-T yang terbuka,
dan tombol ekspor. */
.pt-head .badge, .pt-head .pt-sec { color: var(--aksen-tua); }
.pt-head .pt-sec { border-bottom-color: var(--aksen); }
/* Tab dan tombol pilihan di panel titik, sama alasannya, bidang keadaan. */
.pt-btn.active, .pt-tab.active {
background: var(--lime); border-color: var(--lime); color: var(--on-lime);
}
.pt-skewt-head.open { border-bottom-color: var(--aksen); }
/* Penanda posisi. Belah ketupat titik terpilih, bulatan lokasi saya, garis
jam sekarang di grafik titik, dan titik jam yang tampil di grafik popup. */
/* Smokewatch, panel Kualitas Udara. Angka besarnya itu yang harus dibaca
pertama, jadi dia yang disorot. */
.info-sec-h .material-symbols-outlined { color: var(--aksen); }
/* Smokewatch, slider jendela titik api, sama dengan gagang slider waktu. */
/* Tombol Masuk di kartu sandi. */
/* =====================================================================
BIDANG PILIH DI KARTU PARAMETER DAN FITUR, 27 September 2026
Diminta user, "ketika di hover backgroundnya yang awalnya putih berubah
jadi C5FF95 dan ketika di pencet warna backgroundnya stay C5FF95".
Blok ini IDENTIK di Atmosight dan Smokewatch.
Sebelumnya dua daftar ini sengaja TANPA isian. Yang menandai baris cuma
ketebalan huruf dan garis bawah yang menghitam, dan alasannya ditulis di
komentar aturan lamanya, isian blok terbaca seperti sisa gaya lama. Yang
berubah sekarang isiannya TERANG, bukan gelap, jadi keberatan itu tidak
berlaku lagi. Tinta di atas lime 9,00, lebih lapang daripada tinta 70
persen di atas putih yang dipakai baris diam.
DISORUT dan TERPILIH memang SEWARNA, itu diminta. Yang membedakan garis
kiri 3 px --aksen yang cuma muncul pada yang terpilih. Supaya barisnya
tidak bergeser 3 px waktu dipilih, SEMUA baris sudah punya garis kiri
selebar itu dalam keadaan bening sejak awal.
Peralihannya di background-color, bukan di background. Properti ringkas
itu tidak beranimasi mulus di semua peramban kalau nilai awalnya
transparent.
===================================================================== */
.sisi-body .panel.layers .layer-btn:not(.layer-btn--half),
.sisi-body .col.items-end .icon-btn {
border-left: 3px solid transparent;
/* 9 + 3 garis = 12, sejajar dengan baris yang terpilih. */
padding: 11px 10px 11px 9px;
transition: background-color .22s ease, color .18s ease,
border-left-color .18s ease;
}
.sisi-body .panel.layers .layer-btn:hover:not(.disabled),
.sisi-body .panel.layers .layer-btn.active:not(.layer-btn--half),
.sisi-body .col.items-end .icon-btn:hover:not(:disabled),
.sisi-body .col.items-end .icon-btn.active {
background-color: var(--lime);
color: var(--on-lime);
}
.sisi-body .panel.layers .layer-btn:hover:not(.disabled) .material-symbols-outlined,
.sisi-body .panel.layers .layer-btn:hover:not(.disabled) .lb-txt,
.sisi-body .panel.layers .layer-btn.active:not(.layer-btn--half) .material-symbols-outlined,
.sisi-body .panel.layers .layer-btn.active:not(.layer-btn--half) .lb-txt,
.sisi-body .col.items-end .icon-btn:hover:not(:disabled) .material-symbols-outlined,
.sisi-body .col.items-end .icon-btn.active .material-symbols-outlined,
.sisi-body .col.items-end .icon-btn.active:hover:not(:disabled) .material-symbols-outlined {
color: var(--on-lime);
}
/* Garis kiri, cuma pada yang TERPILIH. Inilah satu satunya beda antara
baris yang disorot dan baris yang dipilih, sebab bidangnya sewarna. */
/* Pil ISPU dan AQI DIKECUALIKAN. Dia bulat, dan garis kiri 3 px di atas
sudut membulat terbaca sebagai busur nyasar, bukan sebagai penanda. */
.sisi-body .panel.layers .layer-btn.active:not(.layer-btn--half),
.sisi-body .col.items-end .icon-btn.active {
border-left-color: var(--aksen);
}
/* Baris yang dimatikan tidak boleh ikut menyala waktu dilewati kursor. */
.sisi-body .panel.layers .layer-btn.disabled,
.sisi-body .panel.layers .layer-btn.disabled:hover {
background-color: transparent; color: var(--ink-70);
}
.sisi-body .col.items-end .icon-btn:disabled,
.sisi-body .col.items-end .icon-btn:disabled:hover {
background-color: transparent; color: var(--ink-70);
}
/* Pasangan ISPU dan AQI berbentuk pil, bukan baris, jadi dia tidak ikut
aturan di atas. Yang perlu cuma bidang sorotnya. */
.sisi-body .panel.layers .layer-btn--half {
transition: background-color .22s ease, color .18s ease;
}
.sisi-body .panel.layers .layer-btn--half:hover:not(.active) {
background-color: var(--lime); color: var(--on-lime);
}
.sisi-body .panel.layers .layer-btn--half:hover:not(.active) .lb-txt,
.sisi-body .panel.layers .layer-btn--half:hover:not(.active) .material-symbols-outlined {
color: var(--on-lime);
}
/* =====================================================================
IDENTITAS DIBESARKAN, BADGE DIREDAM, 4 Oktober 2026
Diminta user, "harus lebih besar rasionya dibanding badge supaya lebih
menonjol". Blok ini IDENTIK di Atmosight dan Smokewatch.
DIKERJAKAN DARI DUA ARAH, bukan satu. Kalau identitasnya saja yang
dibesarkan, seluruh isi di bawahnya ikut terdorong turun dan di layar
pendek itu memakan peta. Jadi identitasnya naik sekitar sepertiga DAN
badgenya diturunkan sedikit. Jarak antar keduanya melebar dua kali lipat
tanpa blok atasnya tumbuh sebesar itu.
lambang ITERA 40 -> 52
lambang Envirocircle 36 -> 46
nama app 15 -> 19
penjelas 11 -> 12
huruf badge 11 -> 10, isiannya dan garisnya ikut diredupkan
Rasio nama app lawan huruf badge jadi 19 banding 10, dulu 15 banding 11.
Dari 1,36 jadi 1,90.
Dua angka di bawahnya WAJIB ikut turun, kalau tidak badge menabrak nama
app. .status dari 58 jadi 76, dan .rel--kiri dari 138 jadi 154.
===================================================================== */
.ident .itera-logo { height: 52px; }
.ident .itera-pisah { height: 40px; }
.ident .brand-logo { width: 46px; height: 46px; }
.ident .brand { gap: 13px; }
.ident .brand-text strong { font-size: 19px; letter-spacing: .17em; }
.ident .brand-text span { font-size: 12px; letter-spacing: .05em; }
.status { top: 76px; }
.status .fresh-badge {
font-size: 10px; padding: 4px 11px; gap: 7px;
border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .78);
}
.status .fresh-ico { font-size: 13px; }
.status .fresh-src { font-size: 9px; }
/* BADGE PARAMETER DIBESARKAN, 19 Oktober 2026 sore, diminta pemilik supaya
lebih kelihatan. Dia satu satunya badge di tumpukan ini yang menyebut APA
yang sedang dilihat, bukan kapan atau seberapa tepat, jadi dia memang
pantas lebih menonjol daripada dua tetangganya.
HATI HATI dengan rel kiri. Rel parameter mulai di y 154 piksel, dan
tumpukan status tumbuh ke bawah dari y 58. Kalau badge ini ditambah
terlalu tinggi, badge akurasi di bawahnya yang akan menabrak rel itu
duluan. Diukur sesudah disetel, dan jaraknya masih cukup. */
.status .par-badge {
/* SATU TINGKAT di atas badge Last update, yang 10px. Sempat 15px lalu
12,5px dan dua duanya kegedean menurut pemilik. Yang dicari memang
sekadar lebih menonjol daripada dua tetangganya, bukan mendominasi
pojok kiri atas. Yang membuatnya menonjol sebenarnya BIDANG BIRUNYA,
bukan ukuran hurufnya. */
font-size: 11px; padding: 5px 13px; gap: 8px; letter-spacing: .04em;
/* BERBIDANG, bukan bergaris saja. Warnanya var(--ink), sama persis dengan
tulang punggung panel Parameter di tepi kiri, jadi dua benda yang
bercerita tentang hal yang sama memakai warna yang sama. Diminta
pemilik 19 Okt sore, yang bergaris tipis kurang kelihatan. */
background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.status .par-badge .fresh-ico { font-size: 14px; color: var(--paper); }
/* Badge ini BUKAN tombol, jadi sorotan tetikus tidak boleh mengubahnya.
Tanpa aturan ini dia mewarisi sorotan badge Last update di atasnya. */
.status .par-badge:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Rel kiri turun dari 154 ke 190, 19 Okt sore. Badge Parameter dibesarkan
atas permintaan pemilik, tumpukan status jadi lebih tinggi, dan badge
Akurasi di bawahnya MENABRAK tulang rel ini. Terukur, akurasi berakhir di
y 175 sedangkan rel mulai di 154, jadi tumpang tindih 21 piksel.
Dipindah relnya, bukan badge-nya dikecilkan lagi. */
.rel--kiri { top: 190px; }
/* Di layar sempit ruangnya tidak ada, jadi pembesaran ini dibatalkan dan
angkanya dikembalikan ke ukuran lama. */
@media (max-width: 640px) {
.ident .itera-logo { height: 32px; }
.ident .itera-pisah { height: 24px; }
.ident .brand-logo { width: 30px; height: 30px; }
.ident .brand-text strong { font-size: 15px; letter-spacing: .16em; }
.ident .brand-text span { font-size: 11px; }
}
/* =====================================================================
KHUSUS OCEANSIGHT
Perabot yang tidak punya kembaran di Atmosight, jadi lapis di atas tidak
menjangkaunya. Ditulis sendiri, tapi nilainya dipinjam dari sana supaya
tiga app tetap terbaca sebagai satu keluarga.
===================================================================== */
/* Tab "sembunyikan panel" di tepi kiri layar, warisan Kertas Fenomena.
Sekarang mubazir, tulang punggung kartu tepi sudah mengerjakan hal yang
sama dan letaknya jelas. Dua pengendali untuk satu perkara cuma bikin
ragu, dan yang ini muncul sebagai tanda < menggantung di tepi layar
tanpa keterangan apa apa. Disembunyikan di layar lebar saja, di HP
kartu tepinya memang tidak dipakai. */
@media (min-width: 641px) { .panel-toggle { display: none; } }
/* Kartu Indeks Iklim. Tanpa lebar, badannya memuai mengikuti isinya dan
melintasi layar. Disamakan dengan kartu Parameter di atasnya. */
#sisi-indeks .sisi-body { width: 250px; }
/* Tombol Tentang di blok merek. DIPERTAHANKAN, beda dengan Atmosight yang
membuangnya, sebab isinya menjelaskan indeks laut dan cara membacanya.
Dia sekarang berdiri di atas peredam gelap, jadi warnanya ikut putih.
Ikonnya diwarnai aturan lama dengan kedalaman dua kelas, jadi di sini
harus disebut sama dalamnya, bukan lebih dangkal. */
.ident .brand-info {
width: auto; height: auto; margin-left: 4px; align-self: center;
color: rgba(255, 255, 255, .72);
}
.ident .brand-info .material-symbols-outlined { font-size: 18px; color: inherit; }
.ident .brand-info:hover .material-symbols-outlined { color: #fff; }
/* Chip status ENSO dan IOD di kartu Kondisi Iklim.
WARNANYA DIPERTAHANKAN, dia membawa arti, merah hangat biru dingin.
Yang dibuang cuma bentuknya, bingkai 2px dan berat 700. */
.brief-chips .chip {
border-width: 0.7px; border-color: currentColor; border-radius: 999px;
font-family: var(--font-ui); font-weight: 300; letter-spacing: .06em;
padding: 3px 10px;
}
.brief-chips .chip::before { border-radius: 50%; }
/* ---- Kartu Tim Envirocircle ----
Disalin dari atmosight/style.css, dua lapis sekaligus, susunannya lalu
pelucutannya. Disalin apa adanya dan bukan ditulis ulang supaya kartu
yang sama di tiga app tidak pelan pelan jadi tiga kartu berbeda. ---- */
/* ===== Kartu Tim Envirocircle ===== */
/* Satu-satunya kartu Tentang. Framing personal sudah dibuang, yang tampil tim. */
#about-card-team { display: flex; }
.about-card--team { flex-direction: column; max-width: 588px; padding: 22px 38px 26px; gap: 18px; }
.tm-head { display: flex; flex-direction: column; gap: 10px; }
/* Komposisi 'Pemateri' (referensipose): tengah besar & tegak menonjol, dua
samping lebih kecil & miring menyelip di belakang. Tiap foto punya backing
lime solid (bayangan keras khas neubrutalist). */
.tm-row { display: flex; align-items: flex-end; justify-content: center; gap: 0;
padding-top: 28px; }
.tm { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.tm-photo { border: var(--bw) solid var(--ink); background: var(--paper);
overflow: hidden; aspect-ratio: 4 / 5; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1) contrast(1.03); }
.tm-name { font-family: var(--font-mono); font-weight: 700; font-size: 10px;
letter-spacing: .01em; text-align: center; color: var(--ink); background: var(--lime);
border: var(--bw) solid var(--ink); border-top: none; padding: 6px 4px; line-height: 1.15;
min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
/* samping: kecil, miring, menyelip ke belakang tengah */
.tm--side { flex: 0.9 1 0; z-index: 1; }
.tm--side .tm-photo { box-shadow: 5px 5px 0 0 var(--lime); }
.tm--left { transform: rotate(-6deg); transform-origin: bottom center; margin-right: -14px; }
.tm--right { transform: rotate(6deg); transform-origin: bottom center; margin-left: -14px; }
/* tengah: paling besar, tegak, terangkat, di depan, backing lebih tebal */
.tm--lead { flex: 1.3 1 0; z-index: 3; transform: translateY(-16px); }
.tm--lead .tm-photo { box-shadow: 8px 8px 0 0 var(--lime); }
.tm--lead .tm-name { font-size: 11px; }
@media (max-width: 560px) {
.about-card--team { max-width: 360px; max-height: 90vh; overflow-y: auto; padding: 16px 26px 22px; gap: 14px; }
.tm-row { padding-top: 22px; }
.tm-name { font-size: 8.5px; padding: 5px 2px; min-height: 3em; }
.tm--lead .tm-name { font-size: 9.5px; }
.tm--left { transform: rotate(-5deg); margin-right: -10px; }
.tm--right { transform: rotate(5deg); margin-left: -10px; }
.tm--lead { transform: translateY(-11px); }
.tm--side .tm-photo { box-shadow: 4px 4px 0 0 var(--lime); }
.tm--lead .tm-photo { box-shadow: 6px 6px 0 0 var(--lime); }
}
/* ---- Kartu tim dan kartu sandi ---- */
.about-card, .pw-card {
background: var(--paper); border: 0.7px solid var(--ink-20);
border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.14);
}
.about-tag {
font-size: 11px; font-weight: 300; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-50);
background: transparent; border: 0; padding: 0;
}
.about-name, .pw-title {
font-family: var(--font-ui); font-weight: 300;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.about-intro, .pw-note { font-weight: 200; color: var(--ink-70); letter-spacing: .02em; }
.tm-photo { border: 0.7px solid var(--ink-20); border-radius: 4px; box-shadow: none; }
.tm-name {
background: transparent; border: 0; color: var(--ink-50);
font-size: 10px; font-weight: 200; letter-spacing: .06em; text-transform: uppercase;
}
/* Gelembung titik di atas peta. Leaflet yang menggambar kerangkanya, jadi
dia tidak kena sapuan .panel di atas dan harus disebut sendiri. */
.leaflet-popup.kf-pop .leaflet-popup-content-wrapper,
.leaflet-popup.kf-pop .leaflet-popup-tip {
border: 0.7px solid var(--ink-20); border-radius: 6px; box-shadow: none;
}
.leaflet-popup.kf-pop .leaflet-popup-content-wrapper { box-shadow: 0 10px 30px rgba(0, 0, 0, .10); }
.leaflet-popup.kf-pop a.leaflet-popup-close-button {
border: 0; background: transparent; color: var(--ink-50);
font-weight: 200; box-shadow: none;
}
.leaflet-popup.kf-pop a.leaflet-popup-close-button:hover { background: transparent; color: var(--ink); }
.kf-pop-ttl { font-family: var(--font-ui); font-weight: 300; letter-spacing: .12em; }
.kf-pop-big { font-family: var(--font-ui); font-weight: 200; }
/* Bingkai 2px di sekeliling grafik mini. Garis rambut sudah cukup untuk
menandai bidang plot, dan di gelembung sekecil ini bingkai tebal justru
menarik mata lebih dulu daripada garisnya sendiri. */
.kf-pop-plot { border: 0.7px solid var(--ink-20); border-radius: 4px; }
.kf-axunit { font-weight: 300; }
/* Tombol tutup panel titik, dari kotak bergaris jadi lingkaran garis rambut,
pola yang sama dengan tombol tutup kartu Tentang. */
.pt-close {
width: 30px; height: 30px; border: 0.7px solid var(--ink-20); border-radius: 50%;
background: transparent; color: var(--ink-50);
}
.pt-close:hover { background: transparent; color: var(--ink); border-color: var(--ink-50); }
.pt-head { border-bottom-color: var(--ink-20); }
.pt-coords { font-family: var(--font-ui); font-weight: 200; }
/* Kartu Indeks Iklim dan pemilih Kedalaman. Dua perabot ini cuma ada di sini,
jadi .layer-btn di atas tidak menjangkaunya dan mereka tertinggal dengan
berat 700 huruf biru tua warisan Kertas Fenomena. Nilainya disalin dari
.sisi-body .layer-btn supaya satu kartu tidak berbicara dua gaya. */
.sisi-body .index-bar { width: 100%; gap: 0; }
.sisi-body .index-toggle,
.sisi-body .depth-toggle {
width: 100%; padding: 11px 4px; gap: 12px;
background: transparent; color: var(--ink);
border: 0; border-bottom: 0.7px solid var(--ink-20); border-radius: 0;
font-family: var(--font-ui); font-size: 13px; font-weight: 300;
letter-spacing: .06em; text-transform: uppercase;
}
.sisi-body .index-toggle .index-ico,
.sisi-body .depth-toggle .depth-ico { color: inherit; font-size: 19px; }
.sisi-body .index-caret, .sisi-body .depth-caret { font-size: 18px; color: var(--ink-50); }
.sisi-body .index-menu { width: 100%; }
.sisi-body .index-opt {
width: 100%; padding: 10px 4px 10px 9px;
background: transparent; color: var(--ink-70);
border: 0; border-bottom: 0.7px solid var(--ink-20);
border-left: 3px solid transparent;
font-family: var(--font-ui); font-size: 13px; font-weight: 200;
letter-spacing: .06em; text-transform: uppercase;
transition: background-color .22s ease, color .18s ease, border-left-color .18s ease;
}
.sisi-body .index-opt:last-child { border-bottom: 0; }
.sisi-body .index-opt:hover:not(.active) { background-color: var(--lime); color: var(--on-lime); }
.sisi-body .index-opt.active {
background-color: var(--lime); color: var(--on-lime); border-left-color: var(--aksen);
}
/* Daftar kedalaman, menu yang sama bentuknya dengan daftar indeks. */
.sisi-body .depth-menu button {
background: transparent; color: var(--ink-70); border: 0;
border-bottom: 0.7px solid var(--ink-20);
font-family: var(--font-ui); font-size: 13px; font-weight: 200;
letter-spacing: .06em; text-transform: uppercase; padding: 9px 4px;
}
.sisi-body .depth-menu button:hover { background: var(--lime); color: var(--on-lime); }
.sisi-body .depth-cur { color: var(--ink-50); font-weight: 200; letter-spacing: .04em; }
/* =====================================================================
LAYAR HP
Seluruh ISI kartu tepi dan alat peta sudah diwakili bilah bawah, warisan
Kertas Fenomena yang mekanismenya memang sudah ada dan jalan. Yang tersisa
sesudah restyle ini CANGKANGNYA, yaitu tulang punggung kosong di dua tepi
layar dan menu header yang menimpa blok merek. Cangkangnya dibuang di sini.
Blok ini sengaja SAMA PERSIS dengan Smokewatch dan Atmosight.
CATATAN JUJUR, tata letak HP di tiga app belum dirapikan sampai tuntas.
Yang dikerjakan di blok ini cuma membuang cangkang yang jelas jelas kosong.
===================================================================== */
@media (max-width: 640px) {
.rel, .alat { display: none; }
/* Di bawah peredam tinggal identitas, jadi tidak perlu sepanjang desktop. */
.scrim {
height: 132px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
}
}
/* Satuan TIDAK BOLEH dibesarkan hurufnya. Lapis raja memasang
text-transform: uppercase di label label kecil, dan aturan itu kena juga ke
kotak satuan legenda. Huruf µ (U+00B5) kalau dibesarkan CSS dipetakan
Unicode ke Μ (U+039C), yang bentuknya sama persis dengan M Latin, sehingga
satuan mikro terbaca mega. Selisihnya 10 pangkat 12. Di sini satuannya °C,
m/s, dan PSU, jadi yang rusak bukan µ melainkan derajat dan huruf kecil
m/s, tapi aturannya sama, kotak satuan dikecualikan. */
.legend-head { text-transform: none; }
@media (max-width: 640px) {
/* Kartu Kondisi Iklim rata KANAN terhadap legenda. Di layar lebar legenda
ada di pojok kanan bawah jadi itu benar. Di HP legendanya sudah pindah
ke kiri dan berdiri tegak, sehingga patokan kanan itu melemparkan
kartunya keluar layar dan separuh tulisannya terpotong. Di sini dia
dilepas dari legenda dan dipatok ke jendela, di bawah blok merek. */
.brief-card {
position: fixed; top: 104px; left: 66px; right: 10px; bottom: auto;
width: auto; max-width: none;
}
}
/* =====================================================================
ALAT KANAN ATAS TURUN 18 PX
Aturan satu baris ini di Atmosight letaknya nyelip di EKOR bagian Skew-T,
bagian yang tidak ada di sini sehingga tidak ikut tersalin. Akibatnya
menu di sini menempel di tepi paling atas layar sedangkan di dua app lain
dia turun 18 px. Dilaporkan user.
===================================================================== */
.alat { top: 18px; }
/* =====================================================================
MENU HEADER, Home dan tautan app saudara
Pola diambil dari menu landing, tautan berlabel dengan GARIS RAMBUT DI
ATASNYA. Itu ciri yang bikin menunya terbaca sebagai kolom, bukan sebagai
deretan tautan biasa.
Barisnya dirata ATAS, jadi garis menu, tepi kotak cari, dan tepi ID/EN
semuanya berangkat dari satu ketinggian yang sama.
===================================================================== */
.alat-baris { align-items: flex-start; }
.alat-nav { display: flex; align-items: stretch; gap: 18px; margin-right: 10px; }
.alat-nav a {
display: block;
font-family: var(--font-ui); font-size: 13px; font-weight: 200;
letter-spacing: .06em; white-space: nowrap;
color: rgba(255, 255, 255, .82);
border-top: 1px solid rgba(255, 255, 255, .45);
padding-top: 10px;
background: transparent; box-shadow: none; border-radius: 0;
width: auto; height: auto;
transition: color .18s ease, border-color .18s ease;
}
.alat-nav a:hover { color: #fff; border-top-color: #fff; }
/* Aturan lama menggambar dua ikon ini sebagai kotak beralas. Dilucuti di sini,
dan kedalamannya disamakan supaya menang. */
.alat-nav .brand-info, .alat-nav .nav-arrow {
border-left: 0; border-right: 0; border-bottom: 0;
}
.alat-nav .brand-info:hover, .alat-nav .nav-arrow:hover { background: transparent; }
/* Identitas sekarang tinggal lambang dan namanya saja. */
.ident .brand { gap: 12px; }
/* Garis bawah bawaan . Berkas ini tidak punya reset global untuk itu,
aturan lama cuma mematikannya di .brand-info, jadi tautan Smokewatch yang
baru muncul dengan coretan di tengah tulisannya. */
.alat-nav a, .alat-nav a:hover { text-decoration: none; }
.alat-nav .nav-arrow { color: rgba(255, 255, 255, .82); }
.alat-nav .nav-arrow:hover { color: #fff; }