/* siperditan_v2 theme, layered on Bootstrap 5.3. No inline styles anywhere (strict CSP). */

:root {
    --sp-green-950: #0b2e1a;
    --sp-green-900: #0f3d22;
    --sp-green-700: #17693a;
    --sp-green-600: #1d7f46;
    --sp-green-100: #dcefe3;
    --sp-green-50: #eef7f1;
    --sp-page: #f5f7f6;

    --bs-body-bg: var(--sp-page);
    --bs-body-color: #1c2420;
    --bs-link-color: var(--sp-green-700);
    --bs-link-color-rgb: 23, 105, 58;
    --bs-link-hover-color: var(--sp-green-900);
    --bs-success: var(--sp-green-600);
    --bs-success-rgb: 29, 127, 70;
    --bs-border-radius: .6rem;
}

.btn-success {
    --bs-btn-bg: var(--sp-green-600);
    --bs-btn-border-color: var(--sp-green-600);
    --bs-btn-hover-bg: var(--sp-green-700);
    --bs-btn-hover-border-color: var(--sp-green-700);
    --bs-btn-active-bg: var(--sp-green-900);
    --bs-btn-active-border-color: var(--sp-green-900);
}
.btn-outline-success {
    --bs-btn-color: var(--sp-green-700);
    --bs-btn-border-color: var(--sp-green-600);
    --bs-btn-hover-bg: var(--sp-green-600);
    --bs-btn-hover-border-color: var(--sp-green-600);
}

.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 1100; background: #fff; padding: .5rem 1rem; border-radius: .4rem; }

/* ---- Navbar & footer ---------------------------------------------------- */
.site-navbar { background: var(--sp-green-900); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.site-navbar .navbar-brand { font-weight: 700; letter-spacing: .01em; }
.site-navbar .nav-link { color: rgba(255, 255, 255, .85); }
.site-navbar .nav-link:hover, .site-navbar .nav-link:focus { color: #fff; }
.site-navbar--admin { background: #1f2a24; }

.site-footer { background: var(--sp-green-950); color: rgba(255, 255, 255, .8); }
.site-footer h2 { color: #fff; letter-spacing: .06em; }
.site-footer a { color: #b8e0c6; }
.site-footer a:hover { color: #fff; }
.site-footer__bottom { background: rgba(0, 0, 0, .25); color: rgba(255, 255, 255, .65); }
/* Homepage footer: last sync per external service, deliberately quiet. */
.integration-strip { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .72rem; opacity: .6; }
.integration-strip:hover { opacity: 1; }
.integration-strip .sync-state { width: .5rem; height: .5rem; margin-right: .3rem; }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--sp-green-950); overflow-x: clip; } /* the 200%-wide animated wave must not widen the page */
.hero__image { display: block; width: 100%; object-fit: cover; }
/* z-index 2: Bootstrap's fade carousel puts the active slide at z-index 1. */
.hero__overlay {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 36, 20, .82) 0%, rgba(8, 36, 20, .45) 55%, rgba(8, 36, 20, 0) 100%);
}
.hero__overlay a, .hero__overlay button { pointer-events: auto; }
.hero__title { color: #fff; font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 800; margin: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.hero__lead { color: rgba(255, 255, 255, .92); font-size: clamp(1rem, 2vw, 1.25rem); max-width: 40rem; margin: .5rem 0 1.25rem; }
.hero__partners { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.hero__partners img { height: 44px; width: auto; background: rgba(255, 255, 255, .92); border-radius: .5rem; padding: .3rem; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 6%; z-index: 3; }
@media (max-width: 575.98px) {
    /* Not enough height on phones: keep the title and button, drop the logo row. */
    .hero__partners { display: none; }
    .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
}

/* ---- Homepage tabs ------------------------------------------------------ */
.home-top { margin-top: -3rem; position: relative; z-index: 3; }
.info-tabs { margin-top: 1.5rem; position: relative; scroll-margin-top: 72px; }
.info-tabs__main {
    background: #fff; border-radius: var(--bs-border-radius); padding: .5rem; gap: .25rem;
    box-shadow: 0 6px 24px rgba(15, 61, 34, .12); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
}
.info-tabs__main .nav-link { white-space: nowrap; color: var(--sp-green-900); font-weight: 600; }
.info-tabs__main .nav-link.active { background: var(--sp-green-600); color: #fff; }
.info-tabs__content { background: #fff; border-radius: var(--bs-border-radius); padding: 1.5rem; margin-top: 1rem; box-shadow: 0 2px 10px rgba(15, 61, 34, .06); }
.info-tabs__sub { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: 1.5rem; scrollbar-width: thin; }
.info-tabs__sub .nav-link { white-space: nowrap; color: #4d5a53; }
/* Scrolling tab bars contain their absolutely positioned children (e.g. .visually-hidden),
   which otherwise escape the scroller and widen the page on phones. */
.info-tabs__main, .info-tabs__sub, .enso-tabs .nav-tabs { position: relative; }
.info-tabs__sub .nav-link.active { color: var(--sp-green-900); font-weight: 600; }
/* Fade the edge of a tab bar that has more tabs to scroll to (toggled by app.js). */
.info-tabs__main.has-more-right, .info-tabs__sub.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.info-tabs__main.has-more-left, .info-tabs__sub.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.info-tabs__main.has-more-left.has-more-right, .info-tabs__sub.has-more-left.has-more-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---- Homepage: current conditions & quick links -------------------------- */
.status-strip { background: #fff; border-radius: var(--bs-border-radius); padding: 1rem; box-shadow: 0 6px 24px rgba(15, 61, 34, .12); }
.status-strip__title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-green-700); margin: 0 0 .6rem; }
.status-card {
    display: flex; flex-direction: column; height: 100%; padding: .75rem .9rem; border-radius: .5rem; text-decoration: none;
    color: var(--bs-body-color); background: var(--sp-page); border-left: 4px solid #9aa5a0; transition: background-color .15s;
}
.status-card:hover, .status-card:focus-visible { background: var(--sp-green-50); color: var(--bs-body-color); }
.status-card__label { font-size: .75rem; color: #56645c; }
.status-card__value { font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin: .15rem 0; }
.status-card__meta { font-size: .78rem; color: #56645c; }
.status-card--elnino { border-left-color: #c0392b; }
.status-card--lanina { border-left-color: #1f6fb2; }
.status-card--normal { border-left-color: var(--sp-green-600); }
.status-card--hotspot { border-left-color: #e8590c; }
.status-card--watch { border-left-color: #d4a106; }
@media (max-width: 575.98px) {
    .status-strip { padding: .75rem; }
    .status-card { padding: .6rem .7rem; }
    .status-card__value { font-size: 1rem; }
}

.quick-links { margin-top: 2.5rem; }
.quick-card {
    display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.25rem; background: #fff; border: 1px solid #dde4e0;
    border-radius: var(--bs-border-radius); text-decoration: none; color: var(--bs-body-color); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.quick-card:hover, .quick-card:focus-visible { border-color: var(--sp-green-600); box-shadow: 0 6px 18px rgba(15, 61, 34, .1); transform: translateY(-2px); color: var(--bs-body-color); }
.quick-card__icon { width: 36px; height: 36px; fill: none; stroke: var(--sp-green-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-card__title { font-weight: 700; color: var(--sp-green-900); font-size: 1.05rem; }
.quick-card__text { font-size: .9rem; color: #56645c; }

.panel__title { color: var(--sp-green-900); }
.panel__text { text-align: justify; hyphens: auto; }
.panel__text ul { padding-left: 1.2rem; }
.panel__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.panel__image { width: 100%; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.panel__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--bs-border-radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.panel__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rekomendasi { border-color: var(--sp-green-100); background: var(--sp-green-50); }
.rekomendasi__label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-green-700); margin-bottom: .5rem; }
.rekomendasi__text { white-space: pre-line; }
.rekomendasi__thumb { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--sp-green-100); }

/* ---- Inner pages -------------------------------------------------------- */
.page { padding-top: 2.5rem; }
.page__title { color: var(--sp-green-900); font-weight: 700; margin-bottom: 1.5rem; }
.page__prose { max-width: 52rem; text-align: justify; }

.definitions dt { color: var(--sp-green-900); font-size: 1.1rem; margin-top: 1.5rem; }
.definitions dd { margin: .35rem 0 0; }

.doc-list .list-group-item { padding: .9rem 1.1rem; }
.doc-list__badge {
    flex-shrink: 0; font-size: .7rem; font-weight: 700; color: #b42318; background: #fef3f2;
    border: 1px solid #fecdca; border-radius: .35rem; padding: .15rem .4rem;
}
.kamus-search { max-width: 40rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 2rem; background: #fff; border: 1px solid #cfdad3;
    color: var(--sp-green-900); text-decoration: none; font-size: .9rem; }
.chip:hover, .chip:focus-visible { border-color: var(--sp-green-600); background: var(--sp-green-50); }
.chip__count { font-size: .75rem; color: #56645c; }

.embed-page { display: flex; flex-direction: column; height: calc(100vh - 56px); }
.embed-page__bar { background: #fff; border-bottom: 1px solid #dbe3de; padding: .6rem 0; }
.embed-page__body { position: relative; flex: 1; display: flex; }
/* Shown behind the iframe until the map paints over it. */
.embed-page__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; color: #56645c; background: #eef2f0; }
.embed-page__loading::before { content: ""; width: 1.25rem; height: 1.25rem; border: 3px solid #b9cbbf; border-top-color: var(--sp-green-600); border-radius: 50%; animation: sp-spin .9s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.embed-page__frame { position: relative; flex: 1; width: 100%; border: 0; min-height: 420px; background: transparent; }
/* The map page fills the viewport; the footer would only push it down. */
body:has(.embed-page) .site-footer { display: none; }

.enso-chart { width: 100%; height: clamp(380px, 60vh, 620px); }

/* Hotspot map. Confidence colours: maximum-contrast yellow / orange / red, always with a near-black outline. */
:root {
    --hs-low: #ffe500;
    --hs-medium: #ff7300;
    --hs-high: #e3000f;
    --hs-ink: #111;
}
.hotspot-page { display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); height: calc(100vh - 56px); min-height: 520px; }
.hotspot-panel {
    display: flex; flex-direction: column; gap: 1.1rem; overflow-y: auto; padding: 1.4rem 1.25rem 1rem;
    background: #fff; border-right: 1px solid #dbe3de; box-shadow: 4px 0 18px rgba(15, 61, 34, .06); z-index: 1;
}
.hotspot-eyebrow { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-green-600); }
.hotspot-title { margin: .2rem 0 .35rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: var(--sp-green-950); }
.hotspot-lead { margin: 0; font-size: .82rem; line-height: 1.5; color: #56645c; }

.hotspot-summary {
    padding: 1rem 1.1rem; border-radius: 1rem; color: #fff;
    background: linear-gradient(135deg, var(--sp-green-950) 0%, var(--sp-green-700) 100%);
    box-shadow: 0 10px 24px rgba(15, 61, 34, .22);
}
.hotspot-summary__total { display: flex; align-items: baseline; gap: .5rem; }
.hotspot-summary__number { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hotspot-summary__label { font-size: .85rem; opacity: .85; }
.hotspot-summary__status { margin: .35rem 0 .8rem; font-size: .75rem; opacity: .8; min-height: 1.1em; }
.hotspot-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hotspot-breakdown__item {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .4rem;
    padding: .45rem .55rem; border-radius: .6rem; background: rgba(255, 255, 255, .1);
}
.hotspot-breakdown__label { font-size: .72rem; opacity: .9; }
.hotspot-breakdown__count { grid-column: 1 / -1; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Flame icons, the same shapes the map draws (hotspot.js); fills repeat --hs-low/medium/high. */
:root {
    --hs-flame-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.6 3.2-1 5-2.6 6.9C7.8 10.3 6 12.4 6 15.5 6 19.1 8.7 22 12 22s6-2.9 6-6.5c0-2.6-1.2-4.6-2.6-6.1.1 1.7-.6 3-1.8 3.6.4-3.8-.6-8.4-1.6-11.5z' fill='%23ffe500' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 13c-1.6 1.4-2.6 2.8-2.6 4.4 0 1.6 1.2 2.9 2.6 2.9s2.6-1.3 2.6-2.9c0-1.6-1-3-2.6-4.4z' fill='%23fff'/%3E%3C/svg%3E");
    --hs-flame-medium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.6 3.2-1 5-2.6 6.9C7.8 10.3 6 12.4 6 15.5 6 19.1 8.7 22 12 22s6-2.9 6-6.5c0-2.6-1.2-4.6-2.6-6.1.1 1.7-.6 3-1.8 3.6.4-3.8-.6-8.4-1.6-11.5z' fill='%23ff7300' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 13c-1.6 1.4-2.6 2.8-2.6 4.4 0 1.6 1.2 2.9 2.6 2.9s2.6-1.3 2.6-2.9c0-1.6-1-3-2.6-4.4z' fill='%23ffe500'/%3E%3C/svg%3E");
    --hs-flame-high: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.6 3.2-1 5-2.6 6.9C7.8 10.3 6 12.4 6 15.5 6 19.1 8.7 22 12 22s6-2.9 6-6.5c0-2.6-1.2-4.6-2.6-6.1.1 1.7-.6 3-1.8 3.6.4-3.8-.6-8.4-1.6-11.5z' fill='%23e3000f' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 13c-1.6 1.4-2.6 2.8-2.6 4.4 0 1.6 1.2 2.9 2.6 2.9s2.6-1.3 2.6-2.9c0-1.6-1-3-2.6-4.4z' fill='%23ffe500'/%3E%3C/svg%3E");
}
.hs-dot { display: inline-block; flex: none; width: 1.05rem; height: 1.05rem; background: var(--flame) center / contain no-repeat; }
.hs-dot--low, .hs-chip--low { --flame: var(--hs-flame-low); }
.hs-dot--medium, .hs-chip--medium { --flame: var(--hs-flame-medium); }
.hs-dot--high, .hs-chip--high { --flame: var(--hs-flame-high); }

.hotspot-filters { display: flex; flex-direction: column; gap: 1rem; }
.hotspot-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.hotspot-field__label { display: block; float: none; width: auto; margin-bottom: .4rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3b4a42; }
.hotspot-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; margin-top: .5rem; }
.hotspot-dates__sep { color: #8a978f; }
.hs-segment { display: flex; gap: 2px; padding: 3px; border-radius: .65rem; background: #eef2ef; }
.hs-segment button {
    flex: 1; padding: .35rem .2rem; border: 0; border-radius: .5rem; background: transparent;
    font-size: .78rem; font-weight: 600; color: #3b4a42; transition: background-color .15s, color .15s, box-shadow .15s;
}
.hs-segment button:hover { color: var(--sp-green-700); }
.hs-segment button.is-active { background: #fff; color: var(--sp-green-700); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.hs-segment button:focus-visible { outline: 3px solid rgba(29, 127, 70, .4); outline-offset: 1px; }

.hs-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hs-chip { position: relative; display: inline-flex; margin: 0; }
.hs-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.hs-chip span {
    display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem; border: 1.5px solid #cfd8d3; border-radius: 999px;
    background: #fff; font-size: .78rem; font-weight: 600; color: #56645c; transition: background-color .15s, border-color .15s, color .15s;
}
.hs-chip span small { font-weight: 500; opacity: .8; }
.hs-chip:hover span { border-color: var(--sp-green-600); }
.hs-chip input:checked + span { background: var(--sp-green-700); border-color: var(--sp-green-700); color: #fff; }
.hs-chip input:focus-visible + span { outline: 3px solid rgba(29, 127, 70, .45); outline-offset: 2px; }
.hs-chip--conf span::before { content: ""; width: 1rem; height: 1rem; background: var(--flame) center / contain no-repeat; }
.hs-chip--low { --c: var(--hs-low); }
.hs-chip--medium { --c: var(--hs-medium); }
.hs-chip--high { --c: var(--hs-high); }
.hs-chip--conf input:checked + span { background: var(--c); border-color: var(--hs-ink); color: var(--hs-ink); }
.hs-chip--high input:checked + span { color: #fff; }
.hs-chip--conf input:checked + span::before { content: "\2713"; width: auto; height: auto; border: 0; background: none; font-weight: 800; line-height: 1; }
.hs-chip--conf input:not(:checked) + span { text-decoration: line-through; }
.hotspot-reset { align-self: flex-start; padding: 0; font-size: .8rem; }

.hotspot-panel__foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid #e6ece8; font-size: .75rem; color: #6b7a72; }

.hotspot-map-wrap { position: relative; min-width: 0; }
.hotspot-map { height: 100%; background: #e9eeeb; }
.hotspot-loading {
    position: absolute; top: 1rem; left: 50%; z-index: 1000; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px;
    background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); font-size: .8rem; font-weight: 600; color: var(--sp-green-700);
}
.hotspot-loading[hidden] { display: none; }
.hotspot-legend { padding: .6rem .75rem; border-radius: .75rem; background: rgba(255, 255, 255, .96); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); font-size: .78rem; color: #1c2420; }
.hotspot-legend__title { margin-bottom: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #3b4a42; }
.hotspot-legend__row { display: flex; align-items: center; gap: .45rem; line-height: 1.7; }
.hotspot-page .leaflet-control-layers, .hotspot-page .leaflet-bar { border: 0; border-radius: .6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.hotspot-page .leaflet-bar a:first-child { border-radius: .6rem .6rem 0 0; }
.hotspot-page .leaflet-bar a:last-child { border-radius: 0 0 .6rem .6rem; }
.hotspot-page .leaflet-popup-content-wrapper { border-radius: .75rem; }
.hotspot-popup { min-width: 13rem; font-size: .8rem; }
.hotspot-popup__badge { display: inline-block; margin-bottom: .5rem; padding: .15rem .55rem; border: 1.5px solid var(--hs-ink); border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--hs-ink); }
.hs-badge--low { background: var(--hs-low); }
.hs-badge--medium { background: var(--hs-medium); }
.hs-badge--high { background: var(--hs-high); color: #fff; }
.hotspot-popup__row { display: grid; grid-template-columns: 4.2rem 1fr; gap: .5rem; padding: .15rem 0; }
.hotspot-popup__row span { color: #6b7a72; }

@media (max-width: 991.98px) {
    .hotspot-page { grid-template-columns: minmax(0, 1fr); height: auto; }
    .hotspot-panel { border-right: 0; border-bottom: 1px solid #dbe3de; box-shadow: none; overflow: visible; }
    .hotspot-map-wrap { height: 70vh; }
}
body:has(.hotspot-page) .site-footer { display: none; }

.reservoir-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.reservoir-scroll { border: 1px solid #dbe3de; border-radius: var(--bs-border-radius); background: #fff; }
.reservoir-table { --bs-table-bg: #fff; font-size: .85rem; margin: 0; }
.reservoir-table thead th { background: var(--sp-green-700); color: #fff; vertical-align: bottom; white-space: nowrap; font-weight: 600; }
.reservoir-table thead .unit { font-weight: 400; opacity: .8; font-size: .75rem; }
.reservoir-table tbody th { font-weight: 600; white-space: nowrap; }
.reservoir-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reservoir-table .sticky-col { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 #dbe3de; }
.reservoir-table tbody .sticky-col { background: var(--bs-table-bg); }
.reservoir-province { display: block; font-weight: 400; font-size: .75rem; color: #56645c; }
.reservoir-volume { min-width: 11rem; white-space: nowrap; }
.reservoir-bar { width: 7rem; height: .6rem; vertical-align: middle; appearance: none; border: 0; border-radius: 1rem; background: #e6ebe8; overflow: hidden; }
.reservoir-bar::-webkit-progress-bar { background: #e6ebe8; border-radius: 1rem; }
.reservoir-bar::-webkit-progress-value { border-radius: 1rem; background: var(--bar, #1d7f46); }
.reservoir-bar::-moz-progress-bar { border-radius: 1rem; background: var(--bar, #1d7f46); }
.reservoir-bar--watch { --bar: #d4a106; }
.reservoir-bar--alert { --bar: #e8590c; }
.reservoir-bar--critical { --bar: #c0392b; }
.reservoir-bar--unknown { --bar: #8a9690; }
.reservoir-pct { display: inline-block; min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.reservoir-badge { display: inline-block; padding: .15rem .55rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; white-space: nowrap;
    background: #eef1ef; color: #3d4a43; border: 1px solid #d5ddd8; }
.reservoir-badge--normal { background: #e5f4ea; color: #155d33; border-color: #b9e0c7; }
.reservoir-badge--watch { background: #fff6d6; color: #7a5a00; border-color: #f0dc8f; }
.reservoir-badge--alert { background: #ffe9d9; color: #8a3a06; border-color: #f7c59f; }
.reservoir-badge--critical { background: #fde8e6; color: #8f1f15; border-color: #f2b8b1; }
.enso-notes > div + div { margin-top: .25rem; }

/* ---- Auth, admin, errors ------------------------------------------------ */
.auth-card { max-width: 420px; margin: 3rem auto; }
.error-page { text-align: center; padding: 10vh 1rem; }
.error-page__code { font-size: 4rem; font-weight: 800; color: var(--sp-green-600); line-height: 1; margin: 0; }

/* ---- Admin panel -------------------------------------------------------- */
.admin { background: #f3f5f4; }
.admin-sidebar { background: #fff; border-right: 1px solid #dde4e0; }
@media (min-width: 992px) { .admin-sidebar { min-height: calc(100vh - 56px); } }
@media (max-width: 991.98px) { .admin-sidebar { border-right: 0; border-bottom: 1px solid #dde4e0; } }
.admin-nav__heading { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7a72; margin: 1rem .75rem .35rem; }
.admin-nav__link { display: block; padding: .4rem .75rem; border-radius: .45rem; color: #24302a; text-decoration: none; }
.admin-nav__link:hover { background: var(--sp-green-50); color: var(--sp-green-900); }
.admin-nav__link.active { background: var(--sp-green-600); color: #fff; font-weight: 600; }
.admin-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.admin-page-head h1 { margin: 0; color: var(--sp-green-900); }
.admin-card { background: #fff; border: 1px solid #dde4e0; border-radius: var(--bs-border-radius); padding: 1.25rem; }
.admin-table { background: #fff; margin: 0; }
.admin-table th { white-space: nowrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #56645c; }
.admin-table td { vertical-align: middle; }
.admin-table .actions { white-space: nowrap; text-align: right; }
.admin-table .actions form { display: inline; }
.admin-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: .35rem; border: 1px solid #dde4e0; }
.stat-card { display: block; text-decoration: none; color: inherit; }
.stat-card:hover { border-color: var(--sp-green-600); }
.stat-card__value { font-size: 2rem; font-weight: 800; color: var(--sp-green-700); line-height: 1.1; }
.sync-state { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem; vertical-align: baseline; }
.sync-state--ok { background: #1d7f46; }
.sync-state--stale { background: #d4a106; }
.sync-state--failed { background: #c0392b; }
.sync-state--never { background: #9aa5a0; }
.enso-grid input { max-width: 8rem; }
.enso-grid tr.is-prediction > * { --bs-table-bg: #fff8e6; }
.embed-preview { position: relative; aspect-ratio: 16 / 9; border: 1px solid #dde4e0; border-radius: var(--bs-border-radius); overflow: hidden; background: #eef1ef; }
.embed-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.url-cell { max-width: 28rem; word-break: break-all; font-size: .8rem; }
.enso-figure img { max-height: 640px; object-fit: contain; background: #fff; }
/* Chart / BMKG prediction switch: one scrollable row on narrow screens. */
.enso-tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.enso-tabs .nav-link { white-space: nowrap; }

/* ---- Accessibility & motion --------------------------------------------- */
:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.site-navbar .nav-link.active { color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 #8fd3a8; }
/* ---- Homepage motion ------------------------------------------------------
   Only transform/opacity are animated (GPU-composited, no layout work). Everything is
   switched off by the prefers-reduced-motion rule below, and .reveal content is only
   hidden once app.js has added .motion to <html>, so nothing is lost without JS. */
.hero__image { height: clamp(380px, 46vw, 560px); }
.hero .carousel-item.active .hero__image { animation: hero-zoom 14s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero .carousel-inner { overflow: hidden; }

.hero__overlay {
    background:
        linear-gradient(90deg, rgba(8, 36, 20, .88) 0%, rgba(8, 36, 20, .55) 50%, rgba(8, 36, 20, .1) 100%),
        linear-gradient(0deg, rgba(8, 36, 20, .55) 0%, rgba(8, 36, 20, 0) 40%);
}
.hero__eyebrow {
    display: inline-block; color: #d7f5e2; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .9rem;
}
.hero__shine {
    background: linear-gradient(100deg, #fff 30%, #b9f3cf 45%, #fff 60%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* text-shadow would show through the transparent text; drop-shadow sits behind it. */
    text-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
    animation: hero-shine 6s ease-in-out 1.2s infinite;
}
@keyframes hero-shine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__actions .btn { transition: transform .2s ease, box-shadow .2s ease; }
.hero__actions .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.hero__partners li { transition: transform .25s ease; }
.hero__partners li:hover { transform: translateY(-3px) scale(1.05); }

/* Staggered entrance of the hero text. */
.anim-rise { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.anim-d1 { animation-delay: .12s; }
.anim-d2 { animation-delay: .24s; }
.anim-d3 { animation-delay: .36s; }
.anim-d4 { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Soft drifting lights over the photo (radial gradients, no blur filter). */
.hero__glow { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero__glow span {
    position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 220, 160, .28) 0%, rgba(120, 220, 160, 0) 65%);
    animation: drift 18s ease-in-out infinite alternate;
}
.hero__glow span:nth-child(1) { left: -12%; top: -30%; }
.hero__glow span:nth-child(2) { right: -10%; top: 10%; animation-duration: 22s; animation-delay: -6s;
    background: radial-gradient(circle, rgba(250, 214, 120, .2) 0%, rgba(250, 214, 120, 0) 65%); }
.hero__glow span:nth-child(3) { left: 35%; bottom: -45%; animation-duration: 26s; animation-delay: -12s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.15); } }

/* Wave at the bottom of the hero, in the page colour; the back layer moves slowly. */
.hero__wave { position: absolute; left: 0; bottom: -1px; z-index: 2; width: 200%; height: 70px; pointer-events: none; }
.hero__wave path { fill: var(--sp-page); }
.hero__wave path:first-child { opacity: .45; animation: wave 16s linear infinite; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-25%); } }

.hero__scroll {
    position: absolute; left: 50%; bottom: 4.4rem; z-index: 3; width: 30px; height: 48px; margin-left: -15px;
    border: 2px solid rgba(255, 255, 255, .7); border-radius: 16px;
}
.hero__scroll span {
    position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff;
    animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@media (max-width: 767.98px) { .hero__scroll { display: none; } }

/* "Live" pulse next to "Kondisi terkini". */
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; margin-right: .45rem; border-radius: 50%; background: #22a55a; vertical-align: 1px; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22a55a; animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

/* Cards: lift on hover. */
.status-card { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.status-card:hover, .status-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 61, 34, .12); }
.quick-card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.quick-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--sp-green-600), #8fd6a8);
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.quick-card:hover::before, .quick-card:focus-visible::before { transform: scaleX(1); }
.quick-card:hover, .quick-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 61, 34, .14); }
.quick-card__icon { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.quick-card:hover .quick-card__icon { transform: scale(1.15) rotate(-6deg); }

/* Homepage tab panels slide in a little. */
.info-tabs .tab-pane.fade { transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.info-tabs .tab-pane.fade.show { transform: none; }

/* Lenis does the smooth scrolling on the homepage; Bootstrap's CSS smooth scroll would fight it. */
html.lenis { scroll-behavior: auto; }

/* Scroll reveal; children of grids appear one after another. */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.motion .reveal.is-visible { opacity: 1; transform: none; }
.motion .reveal .row > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.motion .reveal.is-visible .row > * { opacity: 1; transform: none; }
.motion .reveal.is-visible .row > :nth-child(2) { transition-delay: .08s; }
.motion .reveal.is-visible .row > :nth-child(3) { transition-delay: .16s; }
.motion .reveal.is-visible .row > :nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .hero__glow, .hero__scroll { display: none; }
    .hero .carousel-item.active .hero__image { animation: none; }
}

/* ---- Print -------------------------------------------------------------- */
@media print {
    .site-navbar, .site-footer, .skip-link, .hero, form, .btn, .info-tabs__main, .info-tabs__sub, .quick-links, .carousel-control-prev, .carousel-control-next { display: none !important; }
    body { background: #fff; }
    .page { padding-top: 0; }
    .home-top { margin-top: 0; }
    .motion .reveal, .motion .reveal .row > * { opacity: 1 !important; transform: none !important; }
    .status-strip, .info-tabs__content { box-shadow: none; border: 1px solid #ccc; }
    .table-responsive { overflow: visible !important; }
    .reservoir-table { font-size: 9pt; }
    .reservoir-table .sticky-col { position: static; box-shadow: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
    .status-card::after, .quick-card::after, .doc-list a::after { content: none !important; }
}
@media (max-width: 575.98px) {
    .quick-card { padding: .9rem; }
    .quick-card__text { display: none; }
}

/* Admin: manual hotspot pull log (newest first). */
.hotspot-log { max-height: 22rem; overflow-y: auto; padding-left: 2.5rem; font-family: var(--bs-font-monospace); }
.hotspot-log .is-failed { color: var(--bs-danger); }
.hotspot-log .is-retry { color: var(--bs-warning-text-emphasis); }