/* Self-hosted DM Sans — the bmkg.go.id parent brand font (no third-party CDN: privacy/CSP/perf) */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/DM-Sans-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/DM-Sans-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/DM-Sans-Bold.woff2') format('woff2');
}

/* ==========================================================================
   Stasiun Meteorologi Maritim Merak — BMKG identity stylesheet
   Theme aligned with the parent brand (bmkg.go.id / maritim.bmkg.go.id):
   royal blue #0133cc primary, slate neutrals, light chrome (white/blur header
   + gray top bar), DM Sans. Severity scale follows the parent's warning tags.
   ========================================================================== */

:root {
    --navy: #0f172a;       /* parent black-primary — heading text, footer, dark surfaces */
    --heading: var(--navy); /* heading & emphasis TEXT color — remapped light in dark theme */
    --navy-700: #0b1220;   /* deeper footer band */
    --blue: #0133cc;       /* parent blue-primary — primary action/links */
    --blue-600: #1e40af;   /* parent blue-800 — hover */
    --blue-050: #e8edfb;   /* solid approx. of parent blue-tint (#0133cc26) on white */
    --blue-tint: rgba(1, 51, 204, .15); /* parent blue-tint — hover/active backplate */
    --sky: #dbeafe;
    --teal: #2563eb;       /* maritim.bmkg.go.id blue-600 — bright accent */
    --ink: #334155;        /* parent black-light — body text */
    --muted: #56657b;      /* parent gray-primary — secondary text */
    --line: #e5e7eb;       /* parent gray-200 — card/row borders */
    --line-soft: #eef2f7;  /* hairline for airy dividers */
    --line-strong: #cbd5e1;/* parent gray-stroke — input/search borders */
    --bg: #f8fafc;         /* parent gray-light */
    --bg-tint: #f1f5f9;    /* parent gray-subtle — top bar / alt sections */
    --white: #ffffff;

    /* legacy accent tokens — remapped to the parent blue scale (no gold/orange in parent brand) */
    --gold: #0133cc;
    --gold-soft: #4d6bff;
    --cta-from: #0133cc;
    --cta-to: #1e40af;

    /* severity — parent warning-tag scale (bmkg.go.id @theme) */
    --ok: #007b00;
    --waspada: #f0b100;
    --siaga: #ed7b03;
    --awas: #cf0c00;

    /* severity tints (surfaces + hairlines) — solid approximations of the parent's
       alpha tints on white; -700 = the parent's dark foreground variants */
    --ok-050: #dff0df;      --ok-100: #b3d9b3;      --ok-700: #007b00;
    --waspada-050: #fcf3cc; --waspada-100: #f3dc8a; --waspada-700: #854d0e;  /* yellow-dark */
    --siaga-050: #fce7d2;   --siaga-100: #f6c69a;   --siaga-700: #c2410c;    /* orange-dark */
    --awas-050: #f8dbd9;    --awas-100: #f0b3b0;    --awas-700: #cf0c00;
    /* tabular-lining numerals make readouts feel like an instrument */
    --num: "tnum" 1, "lnum" 1;

    --radius: 16px;   /* parent card/panel radius */
    --radius-sm: 8px; /* parent button/badge radius */
    --radius-lg: 16px;
    --radius-xl: 24px;
    /* parent elevation family: very soft slate shadows */
    --shadow-sm: 0 1px 2px rgba(100, 116, 139, .08), 0 4px 16px rgba(100, 116, 139, .06);
    --shadow: 0 4px 20px rgba(100, 116, 139, .20);
    --shadow-card: 0 8px 32px rgba(100, 116, 139, .06);
    --shadow-float: 0 8px 32px rgba(100, 116, 139, .10);
    --shadow-lift: 0 8px 32px rgba(100, 116, 139, .14);
    --container: 1200px; /* parent max-w-6xl content width */
    --font: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* --- Admin accent system — composes with the slate chrome ------------------
   Re-hued from mint to the parent royal-blue family so the admin console reads
   as the same BMKG brand as the public site. Token names kept (--mint/--admin-*)
   so admin.css needs no structural change. */
:root {
    --mint: #4d6bff;          /* bright blue accent (on dark chrome) */
    --mint-600: #1e40af;      /* pressed/hover for solid surfaces (blue-800) */
    --mint-700: #0133cc;      /* TEXT/action on white (blue-primary, AA 8.6:1) */
    --mint-050: #e8edfb;      /* faintest blue tint (chips, active backplate) */
    --mint-100: #c4d3f8;      /* blue hairline / soft surfaces */
    --admin-canvas: #eef3f8;  /* app content background behind panels */
    --admin-chrome: var(--navy);
    --admin-chrome-2: var(--navy-700);
    --admin-nav-fg: #c2d2e8;
    --admin-nav-muted: #8aa1c2;
    --admin-accent: var(--mint-700);
    --admin-accent-strong: var(--mint-600);
    --admin-ring: rgba(1, 51, 204, .30);
    --admin-rail: linear-gradient(180deg, var(--mint), var(--mint-600));
    --admin-surface: var(--white);
}
[data-theme="dark"] {
    --admin-canvas: #0a1320;
    --admin-chrome: #101c2e;
    --admin-chrome-2: #0b1524;
    --admin-nav-fg: #c8d6ea;
    --admin-nav-muted: #7e96b6;
    --mint-050: #16233f;
    --mint-100: #22365c;
    --admin-ring: rgba(77, 107, 255, .32);
    /* blue-primary text fails contrast on the dark admin canvas — lift the accents */
    --admin-accent: var(--mint);
    --admin-accent-strong: var(--mint-600);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 126px; }
@media (min-width: 861px) { html { scroll-padding-top: 172px; } }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Sticky footer: keep the footer pinned to the viewport bottom on short pages. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#konten { flex: 1 0 auto; }

img { max-width: 100%; display: block; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
/* WCAG 1.4.1 (Use of Color): in-text links must be distinguishable without
   relying on colour → underline BARE prose links. Component links (.btn,
   .card__more, nav, *__link — all class-named) keep the hover-only underline. */
:is(p, li, dd, dt, td, th, blockquote, figcaption, label, .form-intro, .prose, .rich-text) a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Visible keyboard focus across all interactive elements (a11y / indicator 23). */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .card--link:focus-visible {
    outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}
/* On the dark footer, a light ring reads better than blue. */
.site-footer a:focus-visible { outline-color: #cfe3ff; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--heading); margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus-visible { left: 0; }
/* In-flow variant (e.g. "skip the map iframe") — hidden until focused, then
   revealed where it sits rather than pinned to the page corner. */
.skip-link--inline { position: absolute; }
.skip-link--inline:focus-visible { position: static; left: auto; display: inline-block; margin-bottom: 10px; border-radius: 8px; }
/* Skip-link targets receive focus programmatically (tabindex="-1"); suppress the
   focus ring on the container itself — focus is moved there only to reposition. */
#konten:focus, #peta-setelah:focus { outline: none; }

/* --- Top bar (parent pattern: gray-subtle utility strip) ------------------ */
.topbar { background: var(--bg-tint); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.topbar__org { font-weight: 500; letter-spacing: .2px; }
.topbar__links { display: flex; gap: 18px; }
.topbar__links a { color: var(--muted); font-weight: 500; }
.topbar__links a:hover { color: var(--blue); }

/* --- Header / brand (parent pattern: white glassy bar, light text) -------- */
.site-header { background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand:hover { text-decoration: none; }
.brand__logo { width: 48px; height: 48px; background: #fff; border: 1px solid var(--line-soft); border-radius: 11px; padding: 4px; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.brand__title { display: block; font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.15; letter-spacing: -.01em; }
.brand__sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }

.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-toggle span { width: 26px; height: 3px; background: var(--navy); border-radius: 3px; transition: .2s; }

/* --- Main navigation (light; blue-tint hover like the parent) ------------- */
.mainnav { background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 81px; z-index: 39; }
.mainnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; }
.mainnav__list a {
    position: relative; display: block; color: var(--muted); padding: 13px 10px; font-weight: 500; font-size: 14px;
    white-space: nowrap; border-bottom: 3px solid transparent; transition: color .15s, background .15s;
}
.mainnav__list a:hover { color: var(--blue); background: var(--blue-tint); text-decoration: none; }
.mainnav__list a.is-active { color: var(--blue); border-bottom-color: var(--blue); background: var(--blue-tint); }
.mainnav__cta { margin-left: auto; display: flex; align-items: center; flex: none; padding-left: 8px; }
.mainnav__cta a { color: #fff; font-weight: 500; font-size: 14px; white-space: nowrap; background: var(--blue); padding: 10px 24px; border-radius: 8px; margin: 6px 0; box-shadow: 0 8px 18px rgba(1, 51, 204, .22); transition: background .15s, box-shadow .15s, transform .15s; }
.mainnav__cta a:hover { color: #fff; background: var(--blue-600); text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 22px rgba(1, 51, 204, .30); }

/* Nav dropdowns */
.mainnav__item { position: relative; }
.mainnav__top { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--muted); padding: 13px 10px; font: inherit; font-weight: 500; font-size: 14px; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, background .15s; }
.has-children:hover .mainnav__top, .has-children:focus-within .mainnav__top, .has-children.is-open .mainnav__top, .mainnav__top:hover { color: var(--blue); background: var(--blue-tint); }
.mainnav__top.is-active { color: var(--blue); }
.mainnav__caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.has-children:hover .mainnav__caret, .has-children.is-open .mainnav__caret { transform: translateY(1px) rotate(-135deg); }
.mainnav__sub { position: absolute; top: 100%; left: 0; min-width: 244px; z-index: 45; list-style: none; margin: 0; padding: 6px; background: var(--white); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.has-children:hover .mainnav__sub, .has-children.is-open .mainnav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.mainnav__sub a { display: block; padding: 9px 14px; border-radius: 8px; border-bottom: 0; color: var(--muted); font-weight: 500; font-size: 13.5px; }
.mainnav__sub a:hover { background: var(--blue-tint); color: var(--blue); text-decoration: none; }
.mainnav__sub a.is-active { color: var(--blue); background: var(--blue-tint); border-bottom: 0; }

/* --- Alert ribbon (full-width, above hero) -------------------------------- */
.alert-ribbon { background: var(--awas); color: #fff; }
.alert-ribbon__inner { display: flex; align-items: center; gap: 13px; padding: 11px 22px; font-size: 14px; }
.alert-ribbon__inner p { margin: 0; flex: 1; min-width: 0; }
.alert-ribbon__inner .ic { color: #fff; flex: none; }
.alert-ribbon__pulse { position: relative; display: inline-flex; }
.alert-ribbon a { color: #fff; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.alert-ribbon a:hover { text-decoration: underline; }

/* ==========================================================================
   HERO — compact, airy, institutional (copy + framed station illustration)
   Elevated: layered ocean depth + slow-drifting wave + crisp white transition.
   ========================================================================== */
.hero {
    position: relative; color: var(--ink); overflow: hidden; isolation: isolate;
    padding: 64px 0 176px;
    background:
        radial-gradient(120% 140% at 88% -10%, rgba(37,99,235,.14) 0%, rgba(37,99,235,0) 46%),
        radial-gradient(90% 120% at 6% 8%, rgba(1,51,204,.08) 0%, rgba(1,51,204,0) 42%),
        linear-gradient(122deg, #f4f9fd 0%, #e9f1fb 55%, #dceafa 100%);
}
/* faint engineering grid + soft glow for credible "instrument" texture */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(115% 90% at 30% 0%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(115% 90% at 30% 0%, #000 0%, transparent 72%);
}
.hero__grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 52px; align-items: center; }
.hero__copy { position: relative; z-index: 2; max-width: 37rem; }

.hero__kicker {
    display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .9rem .42rem .55rem;
    border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--line);
    color: var(--muted); font-weight: 500; font-size: .8rem; letter-spacing: .01em;
    margin-bottom: 1.15rem; backdrop-filter: blur(6px);
}
.hero__kicker-badge {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px;
    background: var(--blue-tint); color: var(--blue); font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.hero__kicker-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue);
    box-shadow: 0 0 0 .26rem rgba(1,51,204,.18); animation: pulse-dot 2.4s ease-in-out infinite; }

.hero__title {
    color: var(--heading); font-weight: 700; letter-spacing: -.025em; line-height: 1.04;
    font-size: clamp(2.05rem, 4.2vw, 3.1rem); margin: 0;
}
.hero__title .accent {
    display: block; color: var(--blue);
    background: linear-gradient(96deg, #4d6bff 0%, #0133cc 60%, #1e40af 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__lead {
    font-size: clamp(1rem, 1.1vw, 1.12rem); color: var(--muted);
    margin: 1.15rem 0 0; max-width: 33rem; line-height: 1.6;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }

/* trust meta row under CTA — small institutional credibility cues */
.hero__meta {
    display: flex; flex-wrap: wrap; gap: 1.4rem 1.6rem; margin-top: 2rem;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.hero__meta-item { display: flex; align-items: center; gap: .6rem; }
.hero__meta-item .ic { color: var(--blue); flex: none; }
.hero__meta-text { line-height: 1.2; }
.hero__meta-text b { display: block; color: var(--heading); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.hero__meta-text span { display: block; color: var(--muted); font-size: .76rem; }

/* Framed illustration card — white panel on the pale-blue hero */
.hero__art { position: relative; z-index: 2; }
.hero__art-frame {
    position: relative; border-radius: 22px; padding: 10px; isolation: isolate;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-float);
}
/* soft outer halo that bleeds the frame into the surrounding pale blue */
.hero__art-frame::after {
    content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 34px; pointer-events: none;
    background: radial-gradient(70% 60% at 70% 30%, rgba(37,99,235,.16), rgba(37,99,235,0) 70%);
    filter: blur(4px);
}
.hero__art-media {
    position: relative; border-radius: 15px; overflow: hidden;
    box-shadow: 0 12px 30px -10px rgba(15,23,42,.18);
}
.hero__art-media img { width: 100%; height: auto; display: block; }
/* light scrim + bottom vignette: ties the photo into the pale hero */
.hero__art-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,0) 26%, rgba(15,23,42,0) 60%, rgba(15,23,42,.30) 100%),
        radial-gradient(130% 90% at 50% 0%, rgba(37,99,235,.10), rgba(37,99,235,0) 55%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    mix-blend-mode: normal;
}
.hero__art-tag {
    position: absolute; left: 24px; bottom: 24px; z-index: 2; display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem .9rem; border-radius: 13px; background: rgba(9, 24, 51, .82);
    border: 1px solid rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,.5);
}
.hero__art-tag .ic { color: var(--gold); flex: none; }
.hero__art-tag b { display: block; font-size: .82rem; font-weight: 700; line-height: 1.2; }
.hero__art-tag span { display: block; font-size: .7rem; color: rgba(190,212,236,.85); }

/* --- Hero wave divider (crisp navy -> white transition) ------------------- */
.hero__waves {
    position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
    width: 100%; height: 138px; pointer-events: none; line-height: 0;
}
.hero__waves svg { display: block; width: 100%; height: 100%; }
/* slow lateral drift on the mid ocean layer — subtle, ambient */
.hero__wave-drift { transform-box: view-box; transform-origin: center;
    animation: wave-drift 16s linear infinite; }
.hero__wave-drift--slow { animation-duration: 24s; animation-direction: reverse; }

/* keep the live-strip above the wave art */
.live-strip { position: relative; z-index: 6; }

@keyframes wave-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-90px); }
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 .26rem rgba(1,51,204,.18); }
    50% { box-shadow: 0 0 0 .42rem rgba(1,51,204,.05); }
}
/* sonar ring for the live pulse — gentle expanding ripple */
@keyframes sonar {
    0%   { transform: scale(1); opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
/* expanding ring for the ferry-panel status pulse */
@keyframes ribbon-ring { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
    .hero__kicker-dot, .live-pulse__dot, .alert-ribbon__dot, .live-panel__pulse::after,
    .hero__wave-drift, .hero__wave-drift--slow { animation: none !important; }
    .live-pulse__dot::after { animation: none !important; opacity: 0 !important; }
    .btn:hover, .card--link:hover, .navlink:hover, .post-card:hover, .album-card:hover,
    .metric-card:hover, .live-panel:hover { transform: none !important; }
    /* Blanket fallback for any animation/transition/smooth-scroll we don't enumerate. */
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}

/* --- Buttons (parent style: 8px radius, solid royal blue primary) --------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: 10px 24px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; border: 2px solid transparent; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .ic { vertical-align: 0; transition: transform .15s var(--ease-out); }
.btn--primary { background: var(--blue); color: #fff; border: none; box-shadow: 0 8px 18px rgba(1, 51, 204, .22); letter-spacing: .005em; }
.btn--primary:hover { background: var(--blue-600); color: #fff; box-shadow: 0 12px 24px rgba(1, 51, 204, .30); }
.btn--primary:hover .ic { transform: translateX(3px); }
.btn--ghost { background: var(--white); color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); }
.btn--solid { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--solid:hover { background: var(--blue-600); border-color: var(--blue-600); }

/* ==========================================================================
   LIVE DASHBOARD — floating "instrument readout": a featured ferry-status
   panel beside two stacked metric cards. Floats up over the hero wave divider.
   ========================================================================== */
.live-strip { margin-top: -118px; }
.live-strip__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.live-pulse { display: inline-flex; align-items: center; gap: .6rem; color: var(--heading); font-weight: 700; font-size: .92rem; letter-spacing: .01em; }
.live-pulse__dot { position: relative; width: .56rem; height: .56rem; border-radius: 50%; background: #007b00; box-shadow: 0 0 0 .26rem rgba(0,123,0,.22); animation: pulse-dot 2.2s ease-in-out infinite; flex: none; }
/* expanding sonar ripple around the live dot (2b maritime micro-motion) */
.live-pulse__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,123,0,.5); animation: sonar 2.8s ease-out infinite;
}
.live-strip__updated { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .82rem; font-weight: 500; }
.live-strip__updated .ic { color: var(--blue); flex: none; }

.live-strip__placeholder {
    background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-lg);
    padding: 20px 24px; color: var(--muted); box-shadow: var(--shadow-float); display: flex; align-items: center; gap: 12px;
}
.live-strip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(10, 155, 176, .2); flex: none; margin-top: 6px; }
.live-strip__placeholder-body p { margin: 0 0 8px; }
.live-strip__placeholder-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.live-strip__placeholder-links .card__more .ic { vertical-align: -.2em; }

/* dashboard layout: prominent status panel (left) + stacked metric cards (right) */
.live-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 18px; align-items: stretch; }
.live-metrics { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; min-width: 0; }

/* --- Featured ferry-status panel (hero-companion, most prominent) ---------- */
.live-panel {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line-soft);
    border-left: 5px solid var(--sev-dot, var(--line-soft)); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float); padding: 26px 28px 24px; min-width: 0;
    transition: transform .2s var(--ease-out), box-shadow .2s;
}
.live-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* severity accent rail down the left edge */
.live-panel::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--sev, linear-gradient(180deg, var(--cta-from), var(--cta-to)));
}
.live-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.live-panel__eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; }
.live-panel__eyebrow .ic { color: var(--blue); flex: none; }
.live-panel__pulse { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; }
.live-panel__pulse i { width: 8px; height: 8px; border-radius: 50%; background: var(--sev-dot, var(--ok)); display: block; }
.live-panel__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sev-dot, var(--ok)); opacity: .5; animation: ribbon-ring 2.4s ease-out infinite; }

.live-panel__route { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.live-panel__route strong { color: var(--heading); font-weight: 800; }

/* big status readout */
.live-panel__readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 14px; }
.live-panel__status {
    font-size: clamp(30px, 4.6vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.025em;
    color: var(--sev-fg, var(--navy)); font-feature-settings: var(--num);
}
.live-panel__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: var(--sev-soft, var(--ok-050)); color: var(--sev-fg, var(--ok-700));
    border: 1px solid var(--sev-line, var(--ok-100));
}
.live-panel__chip .ic { flex: none; }
.live-panel__reason {
    margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.5;
    padding: 12px 0 0; border-top: 1px solid var(--line-soft);
}
.live-panel__wave { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--sev-fg, var(--navy)); }
.live-panel__wave .ic { color: currentColor; }
.live-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.live-panel__hint { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.45; max-width: 30rem; }
.live-panel__hint .ic { color: var(--muted); flex: none; margin-top: 1px; }
.live-panel__link { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.live-panel__link:hover { gap: 8px; text-decoration: none; }
.live-panel__link .ic { transition: transform .15s; }
.live-panel__link:hover .ic { transform: translateX(2px); }

/* severity skins (driven by ferry level / wave_level) ---------------------- */
.sev-ok      { --sev: linear-gradient(180deg, #34d399, var(--ok)); --sev-dot: var(--ok); --sev-fg: var(--ok-700); --sev-soft: var(--ok-050); --sev-line: var(--ok-100); }
.sev-waspada { --sev: linear-gradient(180deg, #fbbf4d, var(--waspada)); --sev-dot: var(--waspada); --sev-fg: var(--waspada-700); --sev-soft: var(--waspada-050); --sev-line: var(--waspada-100); }
.sev-siaga   { --sev: linear-gradient(180deg, #fb923c, var(--siaga)); --sev-dot: var(--siaga); --sev-fg: var(--siaga-700); --sev-soft: var(--siaga-050); --sev-line: var(--siaga-100); }
.sev-awas    { --sev: linear-gradient(180deg, #f4564b, var(--awas)); --sev-dot: var(--awas); --sev-fg: var(--awas-700); --sev-soft: var(--awas-050); --sev-line: var(--awas-100); }
.sev-muted   { --sev: linear-gradient(180deg, #cbd5e1, #94a3b8); --sev-dot: #94a3b8; --sev-fg: var(--muted); --sev-soft: #f1f5f9; --sev-line: #e2e8f0; }
/* tint the whole panel surface very subtly toward its severity (var(--white) = theme surface) */
.live-panel.sev-ok      { background: linear-gradient(168deg, var(--ok-050) 0%, var(--white) 46%); }
.live-panel.sev-waspada { background: linear-gradient(168deg, var(--waspada-050) 0%, var(--white) 46%); }
.live-panel.sev-siaga   { background: linear-gradient(168deg, var(--siaga-050) 0%, var(--white) 46%); }
.live-panel.sev-awas    { background: linear-gradient(168deg, var(--awas-050) 0%, var(--white) 46%); }

/* --- Metric cards (big value + tidy icon-labelled rows) -------------------- */
.metric-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line-soft);
    border-left: 5px solid var(--sev-dot, var(--line-soft)); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float); padding: 18px 22px; min-width: 0;
    transition: transform .2s var(--ease-out), box-shadow .2s;
}
.metric-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.metric-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.metric-card__ico {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 11px; flex: none; color: var(--blue);
    background: linear-gradient(180deg, #effaff, #d7f1fb); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.metric-card__label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; line-height: 1.3; }
.metric-card__place { display: block; font-size: 13.5px; color: var(--heading); font-weight: 700; letter-spacing: -.01em; margin-top: 1px; }
.metric-card__value {
    font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; color: var(--heading); letter-spacing: -.015em;
    margin: 2px 0 12px; line-height: 1.15;
}
.metric-card__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.metric-card__rows li {
    display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink);
    padding: 7px 0; border-top: 1px solid var(--line-soft);
}
.metric-card__rows li:first-child { border-top: 0; padding-top: 0; }
.metric-card__rows .ic { color: var(--teal); flex: none; }
.metric-card__rows .lbl { color: var(--muted); }
.metric-card__rows strong { color: var(--heading); font-weight: 700; margin-left: auto; text-align: right; font-feature-settings: var(--num); }
/* a wave-severity dot beside the metric wave row */
.metric-card__sev { display: inline-flex; align-items: center; gap: 6px; }
.metric-card__sev .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sev-dot, var(--teal)); flex: none; box-shadow: 0 0 0 3px var(--sev-soft, rgba(37,99,235,.16)); }
.metric-card__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--blue); font-weight: 700; font-size: 13px; }
.metric-card__link:hover { gap: 8px; text-decoration: none; }
.metric-card__link .ic { transition: transform .15s; }
.metric-card__link:hover .ic { transform: translateX(2px); }

/* --- Live summary cards (legacy — kept for any other consumer of the class) - */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.summary-card {
    position: relative; background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: 24px 24px 22px; box-shadow: var(--shadow-float);
    overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .2s;
}
.summary-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
}
.summary-card--status::before { background: linear-gradient(90deg, var(--cta-from), var(--cta-to)); }
.summary-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.summary-card--status { background: linear-gradient(168deg, #f7fbff, #fff 60%); }
.summary-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.summary-card__ico {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 11px; flex: none; color: var(--blue);
    background: linear-gradient(180deg, #effaff, #d7f1fb); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.summary-card--status .summary-card__ico { color: var(--siaga-700); background: linear-gradient(180deg, #fff5ec, #ffe3cb); }
.summary-card__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .55px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.summary-card__badge { font-size: 17px; padding: 7px 16px; margin: 2px 0 4px; }
.summary-card__weather { font-size: 21px; font-weight: 700; color: var(--heading); margin: 4px 0 12px; letter-spacing: -.01em; }
.summary-card__note { font-size: 14px; color: var(--ink); margin: 12px 0 6px; }
.summary-card__hint { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.4; }
.summary-card__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.summary-card__meta li { font-size: 14px; padding: 6px 0; color: var(--ink); display: flex; align-items: center; gap: 9px; border-bottom: 1px dashed var(--line-soft); }
.summary-card__meta li:last-child { border-bottom: 0; }
.summary-card__meta strong { color: var(--heading); }
.summary-card__meta .ic { color: var(--teal); flex: none; }
.summary-card__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--blue); font-weight: 700; font-size: 14px; }
.summary-card__link:hover { gap: 8px; text-decoration: none; }
.summary-card__link .ic { transition: transform .15s; }
.summary-card__link:hover .ic { transform: translateX(2px); }

/* attribution sits BELOW the live-strip cards on the white page body — use
   dark, token-based colours so it reads on white (light) and dark themes alike.
   (The light "over dark hero" treatment was wrong here: the strip floats up only
   at its top; the attribution line lands on the white background underneath.) */
.live-strip .attribution { color: var(--muted); margin-top: 16px; }
.live-strip .attribution__source { color: var(--heading); }
.live-strip .attribution__stale { color: var(--siaga-700); }

/* --- Sections ------------------------------------------------------------- */
.section { padding: 76px 22px; }
.section__head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section__title { font-size: clamp(23px, 3vw, 31px); letter-spacing: -.02em; }
.section__sub { color: var(--muted); margin: 0; font-size: 15.5px; }

/* small eyebrow above section titles for institutional hierarchy */
.section__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .85rem;
    color: var(--blue); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
}
.section__eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--teal); }
.section__head--left .section__eyebrow::before { display: none; }

/* --- Cards (refined) ------------------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.card--link { display: block; }
.card--link:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(8, 145, 178, .28); }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--blue);
    border-radius: 15px; margin-bottom: 18px; background: linear-gradient(180deg, #effaff 0%, #d4eefb 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); transition: transform .2s var(--ease-out); }
.card--link:hover .card__icon { transform: translateY(-2px) scale(1.04); }
.card__icon .ic { display: block; }
.ic { vertical-align: -0.2em; flex: none; }
.card__more { display: inline-flex; align-items: center; gap: 5px; }
.card__more .ic { vertical-align: 0; transition: transform .15s; }
.card--link:hover .card__more .ic { transform: translateX(3px); }
.card__title { font-size: 18px; margin-bottom: 8px; color: var(--heading); letter-spacing: -.01em; }
.card__desc { color: var(--ink); font-size: 14.5px; margin: 0 0 16px; line-height: 1.55; }
.card__more { color: var(--blue-600); font-weight: 700; font-size: 14px; } /* --blue-600 meets 4.5:1 on tinted cards (WCAG 1.4.3) */
/* Tonal service-card icons (Datin Merak pelayanan) */
.card--service { display: flex; flex-direction: column; }
.card--service .card__desc { flex: 1; }
.card--service .card__more { color: var(--blue-600); } /* parent-brand blue CTA; meets 4.5:1 (WCAG 1.4.3) */
.tone-data .card__icon { color: #11567d; background: linear-gradient(180deg, #effaff, #cfefff); }
.tone-academic .card__icon { color: #0f6b7e; background: linear-gradient(180deg, #effaf3, #d7f7e1); }
.tone-visit .card__icon { color: #3869a6; background: linear-gradient(180deg, #f1f7ff, #dceaff); }
.tone-internship .card__icon { color: #1d4ed8; background: linear-gradient(180deg, #eef2ff, #dbe4fe); }

/* --- Nav list (Informasi & Layanan) — distinct from card grids ------------ */
.navlink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.navlink {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-card); transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s;
    overflow: hidden;
}
/* hairline accent bar that grows in on hover for a precise micro-state */
.navlink::before {
    content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--teal), var(--blue)); transform: scaleY(0); transform-origin: center;
    transition: transform .2s var(--ease-out);
}
.navlink:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(1,51,204,.3); }
.navlink:hover::before { transform: scaleY(1); }
.navlink__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex: none;
    border-radius: 14px; color: var(--blue);
    background: linear-gradient(180deg, #effaff 0%, #d4eefb 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.navlink__body { flex: 1; min-width: 0; }
.navlink__title { display: block; font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; }
.navlink__desc { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.navlink__arrow { flex: none; color: var(--blue); opacity: .55; transition: transform .18s, opacity .18s; }
.navlink:hover .navlink__arrow { opacity: 1; transform: translateX(3px); }

/* --- Warning badges ------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.badge--ok { background: var(--ok-700); }
.badge--waspada { background: var(--waspada); color: #2d2000; }
.badge--siaga { background: var(--siaga-700); }
.badge--awas { background: var(--awas); }
.badge--muted { background: #e8edf5; color: #4a5568; }
/* Official BMKG wave classification colours (Tenang→Ekstrem) */
.badge--wave-tenang { background: #2563eb; }                  /* Biru  · 0.1–0.5 m */
.badge--wave-rendah { background: var(--ok-700); }            /* Hijau · 0.5–1.25 m — -700 tint for AA white-on-green */
.badge--wave-sedang { background: #f4c20d; color: #4a3800; }  /* Kuning · 1.25–2.5 m */
.badge--wave-tinggi { background: var(--siaga-700); }         /* Oranye · 2.5–4.0 m — -700 tint for AA white-on-orange */
.badge--wave-sangat-tinggi { background: var(--awas); }       /* Merah · 4.0–6.0 m */
.badge--wave-ekstrem { background: #7c3aed; }                 /* Ungu  · > 6.0 m */
.badge--wave-unknown { background: #e8edf5; color: #4a5568; } /* Abu · kategori tak dikenal / tanpa data */
/* (dark lift for Tenang lives with the other dark overrides — #2563eb + light outline) */

/* Wave-classification legend (key for the BMKG colour scale) */
.wave-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; padding: 12px 16px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wave-legend__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--heading); }
.wave-legend__label .ic { color: var(--blue); }
.wave-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.wave-legend__item .badge { font-size: 12px; }

/* --- Alerts (flash) ------------------------------------------------------- */
.flash-wrap { padding-top: 18px; }
.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 15px; border: 1px solid transparent; }
.alert--success { background: #e7f7ee; border-color: #b6e6c9; color: #126b3a; }
.alert--error { background: #fdeceb; border-color: #f6c6c2; color: #9a271d; }
.alert--info { background: var(--blue-050); border-color: #c5dbf6; color: var(--blue-600); }

/* --- Attribution ---------------------------------------------------------- */
.attribution { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.attribution__source { font-weight: 600; }
.attribution__stale { color: var(--siaga-700); font-weight: 600; }

/* --- Tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
table.data th, table.data td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14.5px; }
table.data thead th { background: var(--blue-050); color: var(--heading); font-weight: 700; }
table.data tbody tr:last-child td { border-bottom: 0; }

/* Per-perairan 3-day forecast table (maritim.bmkg.go.id API) */
.forecast-table td { vertical-align: top; }
.forecast-table th.fc-area { vertical-align: top; white-space: normal; min-width: 168px; background: var(--blue-050); }
.forecast-table thead th:first-child { min-width: 168px; }
.forecast-table th.fc-area strong { display: block; color: var(--heading); font-size: 14px; line-height: 1.3; }
.forecast-table th.fc-area .small { display: block; margin-top: 2px; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.fc-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fc-wave { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--heading); font-size: 13.5px; }
.fc-wave .ic { color: var(--blue); flex: none; }
.fc-wind { display: inline-flex; align-items: center; gap: 5px; }
.fc-wind .ic { color: var(--muted); flex: none; }
.fc-wx { font-size: 12.5px; }
.forecast-table td.is-danger { background: rgba(237, 123, 3, .08); box-shadow: inset 3px 0 0 var(--siaga); }
[data-theme="dark"] .forecast-table th.fc-area { background: rgba(255,255,255,.03); }
[data-theme="dark"] .forecast-table td.is-danger { background: rgba(237, 123, 3, .14); }

/* ==========================================================================
   FOOTER — wave-topped, layered ocean depth, refined hierarchy
   ========================================================================== */
.site-footer { position: relative; background: var(--navy); color: #c7d6ea; margin-top: 0; flex-shrink: 0; }
/* crisp wave crest that rises from the footer into the section above it
   (CSS-only via masked navy band — no extra markup needed) */
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 46px; transform: translateY(-100%);
    pointer-events: none; background: var(--navy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,18 C220,40 420,4 720,18 C1000,31 1180,46 1440,22 L1440,46 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,18 C220,40 420,4 720,18 C1000,31 1180,46 1440,22 L1440,46 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.site-footer__grid { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding: 60px 22px 48px; }
/* thin blue hairline tops the footer content for a restrained premium cue */
.site-footer__grid::before {
    content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(77,107,255,0), rgba(77,107,255,.55) 22%, rgba(77,107,255,.55) 78%, rgba(77,107,255,0));
    opacity: .65;
}
.site-footer__logo { margin-bottom: 12px; }
.site-footer__name { color: #fff; font-size: 17px; margin: 0 0 8px; }
.site-footer__addr { color: #9fb6d4; font-size: 14px; }
.site-footer h3 { color: #fff; font-size: 15px; margin: 0 0 14px; position: relative; padding-bottom: 9px; }
.site-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: var(--gold-soft); opacity: .8; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 9px; }
.site-footer__col a { color: #c7d6ea; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; transition: color .15s, gap .15s; }
.site-footer__col a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(77,107,255,.55); flex: none; transition: background .15s, transform .15s; }
.site-footer__col a:hover { color: #fff; text-decoration: none; gap: 9px; }
.site-footer__col a:hover::before { background: var(--gold-soft); transform: scale(1.25); }
.site-footer__source { font-weight: 600; color: #e3edf9; font-size: 14px; }
.site-footer__note { font-size: 13px; color: #9fb6d4; }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 8px; padding: 16px 22px 20px; font-size: 13px; color: #9fb6d4; }

/* --- Warning banner ------------------------------------------------------- */
.warning-banner {
    display: flex; align-items: center; gap: 16px; margin-top: 18px;
    background: linear-gradient(90deg, #fdeceb, #fff6ed); border: 1px solid #f3b6ad;
    border-left: 6px solid var(--awas); border-radius: var(--radius); padding: 16px 20px;
}
.warning-banner__icon { font-size: 26px; flex: none; }
.warning-banner__body { flex: 1; }
.warning-banner__body strong { color: var(--awas); display: block; }
.warning-banner__body p { margin: 2px 0 0; font-size: 14.5px; color: #7a2b22; }
.warning-banner__link { flex: none; font-weight: 600; color: var(--awas); white-space: nowrap; }

/* --- Utilities ------------------------------------------------------------ */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Page hero / breadcrumb ----------------------------------------------- */
.page-hero { background: rgba(237, 246, 251, .75); color: var(--ink); border-bottom: 1px solid var(--line); padding: 48px 0 40px; }
.page-hero__title { color: var(--heading); font-size: clamp(24px, 3.4vw, 34px); margin: 12px 0 6px; }
.page-hero__sub { color: var(--muted); margin: 0; max-width: 720px; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb__sep { margin: 0 8px; color: var(--muted); }

/* --- Section helpers ------------------------------------------------------- */
.section--alt { background: var(--bg-tint); border-block: 1px solid var(--line-soft); }
.section__lead { font-size: 20px; color: var(--heading); border-left: 4px solid var(--teal); padding-left: 12px; margin: 0 0 18px; }
.section__lead + .section__lead { margin-top: 2rem; }
.section__head--left { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; margin-bottom: 30px; gap: 18px; }
.section__head--left .section__head-text { max-width: 660px; }
.section__head--left .section__sub { text-align: left; margin: 0; }
.section__link { font-weight: 700; color: var(--blue); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.section__link .ic { vertical-align: 0; transition: transform .15s; }
.section__link:hover .ic { transform: translateX(3px); }
.lead { font-size: 18px; color: var(--heading); font-weight: 500; }
.empty-state { background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }
.empty-state .ic { display: block; margin: 0 auto 8px; opacity: .45; }
.empty-state--ok { border-color: #b6e6c9; background: #f1faf4; color: #1c7a45; }
.notice { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px; font-size: 14.5px; }
.notice--info { background: var(--blue-050); border: 1px solid #c5dbf6; color: var(--heading); }
.small { font-size: 12.5px; }

/* --- Content layout (sidebar + main) -------------------------------------- */
.content-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.content-sidebar { position: sticky; top: 100px; }
.content-sidebar__title { font-size: 15px; color: var(--heading); margin: 0 0 12px; }
.content-sidebar__nav { list-style: none; margin: 0 0 24px; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.content-sidebar__nav a { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.content-sidebar__nav a:hover { background: var(--blue-050); text-decoration: none; }
.content-sidebar__nav a.is-active { background: var(--blue-050); color: var(--blue-600); font-weight: 600; border-left: 3px solid var(--teal); }
.content-sidebar__nav li:last-child a { border-bottom: 0; }
.sidebar-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 16px; }
.content-main { min-width: 0; }
.profil-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.profil-subnav a { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; color: var(--ink); white-space: nowrap; }
.profil-subnav a:hover { background: var(--blue-050); color: var(--blue-600); text-decoration: none; }
.profil-subnav a.is-active { background: var(--navy); color: #fff; border-color: var(--heading); font-weight: 600; }

/* --- Prose (CMS content) -------------------------------------------------- */
.prose { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; box-shadow: var(--shadow-sm); max-width: 780px; }
.prose h2 { font-size: 20px; margin-top: 0; }
.prose h3 { font-size: 19px; margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink); }
.prose img { border-radius: var(--radius-sm); margin: 1em 0; }
.prose__cover { width: 100%; aspect-ratio: 16 / 9; max-height: 380px; object-fit: cover; border-radius: var(--radius-sm); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose a { color: var(--blue-600); text-decoration: underline; }
.post-meta { color: var(--muted); font-size: 14px; }

/* --- Struktur Organisasi (org chart) ------------------------------------- */
.orgchart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 8px 0 2px; }
.orgchart { --org-line: #b9cbe0; max-width: 860px; margin-inline: auto; }
.orgchart .org-node { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 12px 16px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.orgchart .org-kicker { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.orgchart .org-role { font-size: .72rem; color: var(--muted); }
.orgchart .org-name { font-size: .95rem; font-weight: 800; color: var(--heading); line-height: 1.2; margin: 1px 0; }
.orgchart .org-head { display: flex; justify-content: center; }
.orgchart .org-node--head { background: linear-gradient(135deg, #1e40af, #0f172a); border: 0; border-radius: 16px; padding: 16px 38px; box-shadow: var(--shadow-float); }
.orgchart .org-node--head .org-kicker { color: var(--gold); }
.orgchart .org-node--head .org-name { color: #fff; font-size: 1.28rem; }
.orgchart .org-connector { width: 2px; height: 22px; background: var(--org-line); margin: 0 auto; }
/* Direct positions (Tata Usaha, PPK) — centered row */
.orgchart .org-branches { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 16px; }
.orgchart .org-branch { width: 248px; max-width: 100%; }
.orgchart .org-branch--admin > .org-node { border-top: 3px solid var(--gold); }
/* Kelompok Jabatan Fungsional — its own full-width band below */
.orgchart .org-group { margin: 24px auto 0; background: linear-gradient(180deg, #f4f8fc, var(--bg-tint)); border: 1px solid var(--line-soft); border-radius: 18px; padding: 16px 18px 20px; position: relative; }
.orgchart .org-group::before { content: ""; position: absolute; top: -24px; left: calc(50% - 1px); width: 2px; height: 24px; background: var(--org-line); }
.orgchart .org-group__label { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); text-align: center; margin-bottom: 16px; }
.orgchart .org-pokja-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.orgchart .org-pokja > .org-node { border-top: 3px solid var(--teal); }
/* Count pill + member cards (avatar + name) — the maximal roster */
.orgchart .org-count { display: block; width: max-content; margin: 12px auto 10px; font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-600); background: var(--blue-050); border: 1px solid #d4e6f5; border-radius: 999px; padding: 3px 11px; }
.orgchart .org-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.orgchart .org-member { display: flex; align-items: center; gap: 9px; background: var(--white); border: 1px solid var(--line-soft); border-radius: 10px; padding: 5px 9px; text-align: left; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.orgchart .org-member__av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; color: var(--blue-600); background: var(--blue-050); border: 1px solid #d4e6f5; }
.orgchart .org-member__name { font-size: .76rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.orgchart .org-branch--admin .org-member__av { color: var(--siaga-700); background: #fff5e8; border-color: #ffe0b8; }
.orgchart .org-subtrunk, .orgchart .org-stem, .orgchart .org-team { display: none; }
@media (max-width: 620px) {
  .orgchart .org-branches { flex-direction: column; align-items: center; }
  .orgchart .org-branch { width: 100%; max-width: 340px; }
  .orgchart .org-pokja-row { grid-template-columns: 1fr; }
}

/* --- Forecast grid / cards ------------------------------------------------ */
.forecast-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.forecast-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.forecast-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.forecast-card__title { font-size: 17px; margin: 0 0 14px; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.forecast-card__title .ic { color: var(--blue); }
.forecast-card--port { background: linear-gradient(160deg, #f3f8ff, #fff); }
.port-now__weather { font-size: 22px; font-weight: 700; color: var(--heading); margin-bottom: 10px; }
.port-now__list { list-style: none; margin: 0; padding: 0; }
.port-now__list li { padding: 4px 0; font-size: 14.5px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.port-now__list .ic { color: var(--teal); }
.port-now__warn { color: var(--awas); font-weight: 600; margin: 10px 0 0; display: flex; align-items: center; gap: 7px; }

/* --- CUAP embed placeholder ----------------------------------------------- */
/* --- AWS realtime station cards (/data) ---------------------------------- */
.aws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 6px; }
.aws-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-card); }
.aws-card.is-stale { opacity: .82; }
.aws-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.aws-card__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--heading); font-size: 16px; letter-spacing: -.01em; }
.aws-card__name .ic { color: var(--teal); }
.aws-card__time { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.aws-metrics { list-style: none; margin: 0; padding: 0; }
.aws-metrics li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.aws-metrics li:last-child { border-bottom: 0; }
.aws-metrics__k { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; }
.aws-metrics__k .ic { color: var(--teal); flex: none; }
.aws-metrics strong { color: var(--heading); font-feature-settings: var(--num); text-align: right; }
.aws-note { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
@media (max-width: 720px) { .aws-grid { grid-template-columns: 1fr; } }

.cuap-embed { margin-top: 28px; background: linear-gradient(135deg, #0a2e5c, #1559a8); border-radius: var(--radius); color: #fff; }
.cuap-embed__inner { display: flex; align-items: center; gap: 18px; padding: 28px; }
.cuap-embed__icon { font-size: 40px; }
.cuap-embed h3 { color: #fff; margin: 0 0 4px; }
.cuap-embed p { color: #cfe0f5; margin: 0; }
.cuap-embed--link { display: block; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.cuap-embed--link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7, 42, 95, .35); }
.cuap-embed--link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cuap-embed--link h3 .ic { vertical-align: -3px; transition: transform .15s; }
.cuap-embed--link:hover h3 .ic { transform: translateX(3px); }
/* --- /peta real-time map (CUAP iframe) ----------------------------------- */
.section--flush { padding-top: 16px; }
.peta-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.peta-toolbar p { margin: 0; }
.peta-frame { position: relative; width: 100%; height: min(82vh, 1040px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-tint); }
.peta-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Loading skeleton / failure message overlay (driven by app.js). */
.peta-frame__status {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; padding: 24px;
    text-align: center; color: var(--muted); background: var(--bg-tint); font-size: 15px;
}
.peta-frame.is-loaded .peta-frame__status { display: none; }
.peta-frame.is-error .peta-frame__status { color: var(--heading); }
.peta-frame.is-error .peta-frame__spinner { display: none; }
.peta-frame__status a { color: var(--blue-600); font-weight: 600; }
.peta-frame__spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--blue);
    animation: peta-spin .8s linear infinite;
}
@keyframes peta-spin { to { transform: rotate(360deg); } }
.peta-fallback { margin-top: 10px; text-align: center; }
@media (max-width: 640px) { .peta-frame { height: 78vh; min-height: 460px; } }

/* --- Warnings list -------------------------------------------------------- */
.warning-list { display: grid; gap: 14px; }
.warning-item { display: flex; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.warning-item__bar { width: 6px; flex: none; }
.warning-item--awas .warning-item__bar { background: var(--awas); }
.warning-item--siaga .warning-item__bar { background: var(--siaga); }
.warning-item--waspada .warning-item__bar { background: var(--waspada); }
.warning-item--info .warning-item__bar { background: var(--blue); }
.warning-item__body { padding: 16px 20px; }
.warning-item__body h3 { font-size: 17px; margin: 8px 0 6px; }

/* --- Blog ----------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; }
.post-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .18s var(--ease-out), box-shadow .18s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.post-card__media { display: block; aspect-ratio: 16/9; background: linear-gradient(150deg, #e6f5fb, #cfeaf6); overflow: hidden; position: relative; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, .9); background: linear-gradient(140deg, var(--navy) 0%, var(--blue) 100%); }
.post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__date { font-size: 12px; color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.post-card__date .ic { vertical-align: 0; }
.post-card__title { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.post-card__title a { color: var(--heading); }
.post-card__title a:hover { color: var(--blue-600); }
.post-card__excerpt { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.55; }
.post-card__more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 13.5px; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; }
.post-card__more .ic { vertical-align: 0; transition: transform .15s; }
.post-card:hover .post-card__more .ic { transform: translateX(3px); }
.tag-list { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--blue-050); color: var(--blue-600); padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.related-list { list-style: none; margin: 0; padding: 0; }
.related-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.pagination a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font-weight: 600; }
.pagination a.is-active, .pagination a:hover { background: var(--blue); color: #fff; border-color: var(--blue); text-decoration: none; }

/* --- Download / lists ----------------------------------------------------- */
.download-list { list-style: none; margin: 0; padding: 0; }
.download-list li { margin-bottom: 8px; }
.download-list a { display: block; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.download-list a:hover { background: var(--blue-050); text-decoration: none; }
.btn--sm { padding: 8px 16px; font-size: 14px; }

/* --- Gallery -------------------------------------------------------------- */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.album-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .18s var(--ease-out), box-shadow .18s; }
.album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.album-card__media { position: relative; display: block; aspect-ratio: 4/3; background: var(--blue-050); overflow: hidden; }
.album-card__media img { width: 100%; height: 100%; object-fit: cover; }
.album-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; }
.album-card__count { position: absolute; bottom: 8px; right: 8px; background: rgba(10, 46, 92, .85); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.album-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.album-card__title { color: var(--heading); font-size: 15.5px; }

/* gallery mosaic strip — first tile spans wider for a curated, non-uniform feel */
.gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.gallery-strip__item { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--blue-050); box-shadow: var(--shadow-card); }
.gallery-strip__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9,24,51,.32)); opacity: 0; transition: opacity .2s; }
.gallery-strip__item:hover::after { opacity: 1; }
.gallery-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gallery-strip__item:hover img { transform: scale(1.07); }
@media (min-width: 760px) {
    .gallery-strip { grid-template-columns: repeat(4, 1fr); }
    .gallery-strip__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.photo { margin: 0; }
.photo__link { display: block; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--blue-050); }
.photo__link img { width: 100%; height: 100%; object-fit: cover; transition: .2s; }
.photo__link:hover img { transform: scale(1.05); }
.photo__caption { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* --- Layanan: online-request CTA banner ----------------------------------- */
.layanan-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--navy) 0%, #1e3a8a 55%, var(--blue) 130%);
    color: #fff; border-radius: var(--radius-lg); padding: 26px 30px; margin-bottom: 36px;
    box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.layanan-cta::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(77,107,255,.25), transparent 70%); pointer-events: none; }
.layanan-cta__body { flex: 1 1 360px; min-width: 0; position: relative; }
.layanan-cta__eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-soft);
    font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.layanan-cta__eyebrow .ic { vertical-align: 0; }
.layanan-cta__title { color: #fff; font-size: clamp(20px, 2.4vw, 25px); margin: 0 0 8px; letter-spacing: -.01em; }
.layanan-cta__desc { color: #d6e4f7; margin: 0; font-size: 15px; line-height: 1.6; max-width: 62ch; }
.layanan-cta__action { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; }
.layanan-cta__note { font-size: 12.5px; color: #9db8d6; }
@media (max-width: 620px) {
    .layanan-cta__action { width: 100%; }
    .layanan-cta__action .btn { width: 100%; justify-content: center; }
}

/* --- Prakiraan infografis (FTP-synced daily products) --------------------- */
.infografis-callout { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 28px;
    background: var(--blue-050); border: 1px solid var(--mint-100, #c4d3f8); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s; }
.infografis-callout:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: rgba(1,51,204,.35); }
.infografis-callout__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    flex: none; border-radius: 13px; color: var(--blue); background: #fff; box-shadow: var(--shadow-sm); }
.infografis-callout__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.infografis-callout__body strong { color: var(--heading); font-size: 16px; }
.infografis-callout__body span { color: var(--muted); font-size: 13.5px; }
.infografis-callout__arrow { flex: none; color: var(--blue); transition: transform .18s; }
.infografis-callout:hover .infografis-callout__arrow { transform: translateX(3px); }
.prakiraan-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.prakiraan-callouts .infografis-callout { margin-bottom: 0; }
@media (max-width: 680px) { .prakiraan-callouts { grid-template-columns: 1fr; } }

/* Latest-edition-only layout: issued strip + featured hero + accordion of
   SQUARE contain-on-mat tiles (the source PNGs are 1080x1080 — never crop). */

/* (1) Issued strip — one trustworthy line, no archive UI */
.infografis-issued { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    padding: 12px 16px; margin-bottom: 26px; background: var(--blue-050);
    border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; color: var(--ink); }
.infografis-issued__edition { display: inline-flex; align-items: center; gap: 7px; color: var(--heading); font-size: 15px; }
.infografis-issued__edition .ic { color: var(--blue); }
.infografis-issued__sep { color: var(--muted); }
.infografis-issued__note { color: var(--muted); }
.infografis-issued__source { display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
    font-weight: 700; color: var(--blue-600); }
.infografis-issued__source .ic { color: var(--teal); }

/* (2) Featured hero — one large readable product */
.infografis-hero { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 28px;
    align-items: center; padding: 22px; margin-bottom: 34px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); }
.infografis-hero__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
    border-radius: var(--radius); background: var(--blue-050); border: 1px solid var(--line); }
.infografis-hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.infografis-hero__body { min-width: 0; }
.infografis-hero__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    color: var(--blue-600); background: var(--blue-050); border: 1px solid var(--line); }
.infografis-hero__badge .ic { color: var(--teal); }
.infografis-hero__title { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.01em;
    color: var(--heading); margin: 12px 0 8px; }
.infografis-hero__desc { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; max-width: 46ch; }
.infografis-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* (3) Accordion sections (native <details>) — folds the 18-wall away */
.infografis-acc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
    box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; }
.infografis-acc__summary { display: flex; align-items: center; gap: 12px; cursor: pointer;
    list-style: none; padding: 16px 20px; user-select: none; min-height: 56px; }
.infografis-acc__summary::-webkit-details-marker { display: none; }
.infografis-acc__summary:hover { background: var(--blue-050); }
.infografis-acc__summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.infografis-acc__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--heading); }
.infografis-acc__count { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-050);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.infografis-acc__chev { margin-left: auto; color: var(--muted); transform: rotate(90deg);
    transition: transform .2s var(--ease-out); flex: none; }
.infografis-acc[open] .infografis-acc__chev { transform: rotate(270deg); }
.infografis-acc__body { padding: 4px 20px 22px; border-top: 1px solid var(--line-soft); }

/* (4) Product grid + SQUARE contain-on-mat tile (THE crop fix) */
.infografis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.infografis-card { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
    transition: transform .18s var(--ease-out), box-shadow .18s; }
.infografis-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.infografis-card__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
    background: var(--blue-050); border-bottom: 1px solid var(--line-soft); }
.infografis-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: center;
    transition: transform .35s var(--ease-out); }
.infografis-card:hover .infografis-card__media img { transform: scale(1.02); }
.infografis-card__media--doc { display: flex; align-items: center; justify-content: center; color: var(--blue);
    background: linear-gradient(160deg, var(--blue-050), var(--sky)); }
.infografis-card__zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff;
    background: rgba(15, 23, 42, .72); backdrop-filter: blur(3px); }
.infografis-card__zoom .ic { width: 14px; height: 14px; }
.infografis-card__cap { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.infografis-card__title { font-size: 14px; font-weight: 700; color: var(--heading); line-height: 1.35; }
.infografis-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.infografis-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
    border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--blue-600);
    background: var(--blue-050); border: 1px solid var(--line); }
.infografis-action:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.infografis-action .ic { width: 14px; height: 14px; }
.infografis-action--pdf { color: var(--siaga-700); }
.infografis-action--pdf:hover { border-color: var(--siaga); color: var(--siaga-700); }

.infografis-foot { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; }
.infografis-foot .ic { color: var(--blue); flex: none; }

/* Homepage teaser — same square contain look, fixed 3-up */
.infografis-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.infografis-teaser--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .infografis-teaser--4 { grid-template-columns: repeat(2, 1fr); } }
.infografis-card--teaser .infografis-card__media { aspect-ratio: 1/1; }

[data-theme="dark"] .infografis-card__media--doc { background: linear-gradient(160deg, var(--blue-050), var(--sky)); }

@media (max-width: 760px) {
    .infografis-hero { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
    .infografis-hero__media { max-width: 360px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
    .infografis-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .infografis-teaser { grid-template-columns: 1fr; }
    .infografis-teaser--4 { grid-template-columns: 1fr; }
    .infografis-acc__summary { padding: 14px 16px; }
    .infografis-acc__body { padding: 4px 14px 18px; }
    .infografis-issued__source { margin-left: 0; }
}

/* --- Buletin Maritim (monthly bulletin) ----------------------------------- */
.buletin-intro { max-width: 760px; margin: 0 0 36px; font-size: 16px; color: var(--ink); border-left: 4px solid var(--teal); padding-left: 12px; }
.buletin-year { display: flex; align-items: center; gap: 16px; margin: 8px 0 20px; }
.buletin-year:not(:first-of-type) { margin-top: 44px; }
.buletin-year__label { font-size: 20px; letter-spacing: -.01em; color: var(--heading); margin: 0; }
.buletin-year__rule { flex: 1; height: 1px; background: var(--line); }
.buletin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.buletin-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.buletin-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(1,51,204,.28); }
.buletin-card__cover { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden;
    background: linear-gradient(155deg, #0f172a 0%, #1e3a8a 60%, #2563eb 130%); }
.buletin-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.buletin-card:hover .buletin-card__cover img { transform: scale(1.04); }
.buletin-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; color: #cfe6f4; text-align: center; }
.buletin-card__placeholder .ic { opacity: .9; margin-bottom: 6px; }
.buletin-card__ph-month { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.buletin-card__ph-year { font-size: 13px; color: #9db8d6; font-weight: 600; }
.buletin-card__badge { position: absolute; top: 10px; left: 10px; background: rgba(15,23,42,.78); color: #fff;
    font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); letter-spacing: .01em; }
.buletin-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.buletin-card__title { font-size: 15.5px; margin: 0; line-height: 1.35; letter-spacing: -.01em; }
.buletin-card__title a { color: var(--heading); }
.buletin-card__title a:hover { color: var(--blue-600); }
.buletin-card__summary { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.buletin-card__actions { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.buletin-card__actions .card__more .ic { vertical-align: 0; transition: transform .15s; }
.buletin-card:hover .buletin-card__actions .card__more .ic { transform: translateX(3px); }

/* detail page: info bar + in-page PDF reader */
.buletin-show__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
    flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.buletin-show__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.buletin-show__period { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--heading); }
.buletin-show__period .ic { color: var(--blue); vertical-align: 0; }
.buletin-show__summary { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 4px 0 0; max-width: 72ch; }
.buletin-reader { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-card); background: var(--blue-050); }
.buletin-reader__frame { width: 100%; height: 84vh; min-height: 540px; border: 0; display: block; }
.buletin-reader__hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.buletin-reader__hint .ic { color: var(--blue); flex: none; }
.buletin-related { margin-top: 40px; }
@media (max-width: 600px) { .buletin-reader__frame { height: 60vh; min-height: 320px; } }

/* --- Peringatan Dini Resmi (official early-warning) ----------------------- */
.official-warning { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 32px; align-items: start;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); padding: 24px 24px 24px 28px; margin-bottom: 28px; position: relative; overflow: hidden; }
.official-warning::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--siaga), var(--waspada)); }
.official-warning__media { position: relative; display: block; border-radius: var(--radius); overflow: hidden;
    background: var(--blue-050); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.official-warning__media img { width: 100%; display: block; }
.official-warning__title { font-size: clamp(20px, 2.5vw, 26px); color: var(--heading); margin: 8px 0 10px; letter-spacing: -.01em; }
.official-warning__level { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.official-warning__level:first-of-type { border-top: 1px solid var(--line-soft); margin-top: 6px; }
.official-warning__areas { color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.5; flex: 1; min-width: 150px; }
.official-warning__synoptic { color: var(--ink); font-size: 14.5px; line-height: 1.65; margin: 16px 0 18px;
    background: var(--bg-tint); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px; }
.official-warning__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .official-warning { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
    .official-warning__media { max-width: 380px; margin: 0 auto; } }

/* --- Rute Pelayaran (Merak–Bakauheni crossing) ---------------------------- */
.rute-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 18px; }
.rute-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.rute-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.rute-card__time { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -.01em; }
.rute-card__time .ic { color: var(--blue); }
.rute-card__meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.rute-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rute-stats li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rute-stats__k { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rute-stats strong { font-size: 15px; color: var(--heading); }
.rute-ports { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rute-port { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rute-port__name { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--heading); }
.rute-port__name .ic { color: var(--blue); }
.rute-port__cond { font-size: 12px; color: var(--muted); line-height: 1.4; }
.rute-ports__arrow { color: var(--muted); flex: none; }

/* --- Lightbox ------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; background: rgba(7, 20, 38, .94); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 200; padding: 30px; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: 8px; cursor: zoom-in; }
/* zoomed: the overlay itself scrolls so a phone user can pan to read the dense tables */
.lightbox.is-zoomed { overflow: auto; align-items: safe center; justify-content: safe center; padding: 0; -webkit-overflow-scrolling: touch; }
.lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; width: min(1080px, 230vw); height: auto; border-radius: 0; cursor: zoom-out; }
.lightbox__caption { position: fixed; left: 0; right: 0; bottom: 62px; text-align: center; color: #e6eefb; font-size: 13.5px;
    padding: 0 16px; z-index: 2; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.lightbox__close { position: fixed; top: 12px; right: 16px; background: rgba(7, 20, 38, .5); border: 0; color: #fff;
    font-size: 30px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; line-height: 1; z-index: 2; }
.lightbox__close:hover { background: rgba(7, 20, 38, .85); }
.lightbox__tools { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.lightbox__tool { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px;
    font-size: 14px; font-weight: 700; cursor: pointer; color: #fff; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px); }
.lightbox__tool:hover { background: rgba(255, 255, 255, .22); text-decoration: none; color: #fff; }
.lightbox__tool--pdf { background: var(--cta-to); border-color: var(--cta-to); }
.lightbox__tool--pdf:hover { background: var(--cta-from); }

/* --- Kontak --------------------------------------------------------------- */
.kontak-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.kontak-info { display: grid; gap: 16px; }
.info-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.info-card h3 { font-size: 15px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.info-card h3 .ic { color: var(--teal); flex: none; }
.info-card p { margin: 0; color: var(--ink); }
.info-card--office { border-left: 4px solid var(--teal); }
.office-fungsi { font-size: 12.5px; color: var(--blue); font-weight: 600; margin-top: 5px !important; }
.social-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.kontak-map { height: 280px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--blue-050); z-index: 0; }
/* Full-width map row under both columns (balances the contact form's whitespace). */
.kontak-map--full { grid-column: 1 / -1; height: 320px; margin-top: 4px; }
/* FAQ visible result count */
.faq-search__status { margin: -14px 4px 20px; font-size: 13px; font-weight: 600; color: var(--muted); min-height: 1.1em; }
/* Layanan card category tag */
.card__tag { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue-600); background: var(--blue-050); padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }
/* PNBP simulator persistent total bar */
.pnbp-sim__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px 18px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; color: var(--heading); }
.pnbp-sim__bar strong { font-size: 20px; color: var(--blue-600); font-feature-settings: var(--num); }
.kontak-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { margin-bottom: 16px; }
.form-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--heading); }
.req { color: var(--awas); }
.form-input { width: 100%; padding: 11px 13px; border: 1px solid #cdd8e8; border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; color: var(--ink); background: #fcfdff; }
.form-input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 102, 201, .15); }
.form-input.is-invalid { border-color: var(--awas); }
textarea.form-input { resize: vertical; }
.field-error { display: block; color: var(--awas); font-size: 13px; margin-top: 4px; }
.radio-group { display: flex; gap: 20px; }
.radio-group label { font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-group label:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Error page ----------------------------------------------------------- */
.error-page { text-align: center; padding: 30px 0; }
.error-page__code { font-size: 72px; font-weight: 800; color: var(--blue); line-height: 1; }
.error-page__msg { color: var(--muted); font-size: 17px; margin: 10px 0 24px; }
.error-page__links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Responsive ----------------------------------------------------------- */
/* Primary nav collapses to the hamburger below 1200px — the 8-item bar + the
   "Ajukan Permohonan" CTA only fit on one line at ≥1200px (verified), so narrower
   widths use the scrollable tap-to-expand panel instead of wrapping the CTA. */
@media (max-width: 1199px) {
    .nav-toggle { display: flex; }
    .mainnav { display: none; }
    .mainnav.is-open {
        display: block;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .mainnav__list { flex-direction: column; }
    .mainnav__item { position: static; }
    .mainnav__top { width: 100%; justify-content: space-between; }
    /* Submenus = tap-to-expand accordion: collapsed until the parent gets .is-open. */
    .mainnav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background: var(--bg-tint); padding: 0; min-width: 0; display: none; }
    .has-children.is-open > .mainnav__sub { display: block; padding: 2px 0; }
    .mainnav__sub a { padding-left: 34px; }
    .mainnav__caret { transform: rotate(45deg); }
    .has-children.is-open .mainnav__caret { transform: rotate(-135deg); }
    .mainnav__list a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
    .mainnav__list a.is-active { border-bottom-color: var(--line); border-left: 3px solid var(--blue); padding-left: 12px; }
    /* CTA = full-width centred pill at the foot of the open menu. */
    .mainnav__cta { margin: 0; padding: 12px; border-top: 1px solid var(--line); }
    .mainnav__cta a { display: block; text-align: center; justify-content: center; margin: 0; padding: 13px 18px; border-bottom: 0; }
}
@media (max-width: 980px) {
    .hero__grid { gap: 38px; }
    /* dashboard stacks: status panel over a 2-up row of metric cards */
    .live-grid { grid-template-columns: 1fr; }
    .live-metrics { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .topbar__org { display: none; }
    .topbar__links { display: none; }
    .content-layout { grid-template-columns: 1fr; }
    /* Content before the section nav on mobile so the first screen shows the article. */
    .content-sidebar { position: static; order: 2; }
    .content-main { order: 1; }
    .section__head--left { flex-direction: column; align-items: flex-start; gap: 10px; }
    .kontak-layout { grid-template-columns: 1fr; }
    .kontak-map { height: 200px; }
    .form-grid { grid-template-columns: 1fr; }
    .hero { padding: 50px 0 132px; }
    .hero__grid { grid-template-columns: 1fr; gap: 30px; }
    .hero__copy { max-width: none; }
    .hero__art { max-width: 520px; margin-inline: auto; width: 100%; }
    .hero__meta { gap: 1rem 1.4rem; }
    .hero__waves { height: 90px; }
    .live-strip { margin-top: -100px; }
    .section { padding: 56px 22px; }
    .navlink-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .live-metrics { grid-template-columns: 1fr; }
    .live-panel__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
    /* narrow viewports wrap this line down onto the light wave divider —
       give it its own pale backdrop so the wrapped half stays readable */
    .live-strip__updated { background: rgba(255, 255, 255, .85); padding: 4px 12px; border-radius: 999px; }
}
@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .brand__title { font-size: 16px; }
    .brand__logo { width: 46px; height: 46px; }
    .hero__title { font-size: clamp(1.75rem, 8vw, 2.3rem); }
    .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
    .live-strip { margin-top: -84px; }
    .summary-card__weather { font-size: 19px; }
    .live-panel { padding: 22px 22px 20px; }
    .live-panel__status { font-size: clamp(26px, 9vw, 34px); }
    .hero__waves { height: 64px; }
    /* Collapse dense data tables to a labelled stacked-card layout (no side-scroll) */
    table.data { min-width: 0; box-shadow: none; background: transparent; }
    table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    table.data tbody tr { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); margin-bottom: 12px; padding: 6px 14px; }
    table.data tbody tr:last-child { margin-bottom: 0; }
    table.data td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border: 0; border-bottom: 1px solid var(--line-soft); padding: 9px 0; text-align: right; }
    table.data tbody tr td:last-child { border-bottom: 0; }
    table.data td::before { content: attr(data-label); font-weight: 700; color: var(--muted); text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto; }
    table.data td:first-child { font-weight: 700; color: var(--heading); }
    table.data td:first-child::before { content: ""; }
    /* The PNBP simulator table is interactive (tfoot total + delete column) —
       keep it as a real table so colspan/aria rows stay intact. */
    table.data.pnbp-sim__table { display: table; min-width: 520px; }
    table.data.pnbp-sim__table thead { display: table-header-group; }
    table.data.pnbp-sim__table tr { display: table-row; }
    table.data.pnbp-sim__table td, table.data.pnbp-sim__table th { display: table-cell; border-bottom: 1px solid var(--line); padding: 12px 14px; }
    /* Forecast table: row-header becomes the stacked card's title; cells right-align */
    .forecast-table th.fc-area { display: block; min-width: 0; background: transparent; padding: 4px 0 8px; border-bottom: 1px solid var(--line); text-align: left; }
    .forecast-table td.is-danger { box-shadow: none; border-left: 3px solid var(--siaga); padding-left: 8px; }
    .forecast-table .fc-cell { align-items: flex-end; text-align: right; }
    /* Center the hero art tag rather than hugging the corner */
    .hero__art-tag { left: 50%; transform: translateX(-50%); bottom: 10px; white-space: nowrap; }
    /* Avoid double horizontal padding: let .container supply the single 22px gutter */
    .section { padding-top: 40px; padding-bottom: 40px; padding-left: 0; padding-right: 0; }
    .page-hero { padding: 32px 0 28px; }
}

/* ==========================================================================
   SIPP / accessibility additions — font scaling, dark theme, a11y widget,
   and the FAQ / SKM / PNBP / Pemutakhiran pages.
   ========================================================================== */

/* --- Text-size accessibility (root scaling; body uses 1rem) --------------- */
html[data-fontscale="2"] { font-size: 112.5%; }
html[data-fontscale="3"] { font-size: 125%; }

/* --- Small shared helpers ------------------------------------------------- */
.num { text-align: right; font-feature-settings: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn--lg { padding: 14px 32px; font-size: 16px; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--blue); text-decoration: underline; }
.btn-link.btn-danger { color: var(--awas); }

/* SP4N-LAPOR card on the contact page */
.sp4n-card { border-left: 4px solid var(--blue); }
.sp4n-card h3 { display: flex; align-items: center; gap: 8px; color: var(--blue); }
.sp4n-card p { margin: 0 0 12px; }
.sp4n-card .ic { color: var(--blue); }
.sp4n-card__alt { font-size: 13px; color: var(--muted); margin: 12px 0 0 !important; }

/* Footer accreditation badges (SIPPN / SP4N-LAPOR) */
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #dbe7f6 !important; font-size: 12.5px; }
.footer-badge .ic { color: var(--gold-soft); }
.footer-badge:hover { background: rgba(255,255,255,.13); text-decoration: none; color: #fff !important; }
.footer-badge strong { color: #fff; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.footer-social__link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #dbe7f6; transition: background .15s, color .15s, transform .15s, border-color .15s; }
.footer-social__link:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px); text-decoration: none; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) { .form-grid--3 { grid-template-columns: 1fr; } }

/* --- Dark theme: remap the content tokens; chrome stays dark -------------- */
[data-theme="dark"] {
    --bg: #0a1320;
    --bg-tint: #0d1a2c;
    --white: #16273f;       /* card surface — clearly lifted above --bg */
    --ink: #e3ebf6;
    --muted: #a6b9d2;
    --line: #2c4059;        /* visible borders on dark surfaces */
    --line-soft: #21324c;
    --sky: #18283f;
    --blue-050: #15273e;
    --heading: #f1f6fd;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.42);
    --shadow-card: 0 1px 1px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.62);
    --shadow-float: 0 2px 4px rgba(0,0,0,.4), 0 28px 54px -24px rgba(0,0,0,.68);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--heading); }
[data-theme="dark"] main a { color: #6cccea; }
[data-theme="dark"] .form-input { background: #0f2138; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .form-input::placeholder { color: #7890ad; }
[data-theme="dark"] .section--alt { background: var(--bg-tint); }
[data-theme="dark"] .info-card,
[data-theme="dark"] .prose { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .data th { color: #c8d6ea; }
[data-theme="dark"] .data td { border-color: var(--line-soft); }
[data-theme="dark"] .skm-bar { background: #233a55; }
[data-theme="dark"] img.invert-dark { filter: brightness(.9) contrast(1.05); }
/* Lift the chrome above the content canvas so the bars read distinctly */
[data-theme="dark"] .topbar { background: #09131f; color: #a6b9d2; }
[data-theme="dark"] .topbar__links a { color: #a6b9d2; }
[data-theme="dark"] .topbar__links a:hover { color: #6cccea; }
[data-theme="dark"] .site-header { background: rgba(16, 35, 56, .85); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 2px 18px rgba(0,0,0,.55); }
[data-theme="dark"] .brand__title { color: #f1f6fd; }
[data-theme="dark"] .brand__sub { color: #9fb6d4; }
[data-theme="dark"] .brand__logo { border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .nav-toggle span { background: #e3ebf6; }
[data-theme="dark"] .mainnav { background: rgba(16, 35, 56, .85); border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .mainnav__list a, [data-theme="dark"] .mainnav__top { color: #c8d6ea; }
[data-theme="dark"] .mainnav__list a:hover, [data-theme="dark"] .mainnav__top:hover,
[data-theme="dark"] .has-children:hover .mainnav__top, [data-theme="dark"] .has-children.is-open .mainnav__top { color: #8db4ff; background: rgba(1,51,204,.28); }
[data-theme="dark"] .mainnav__list a.is-active, [data-theme="dark"] .mainnav__top.is-active { color: #8db4ff; border-bottom-color: #8db4ff; }
[data-theme="dark"] .mainnav__sub { background: #16273f; border-color: var(--line); }
[data-theme="dark"] .mainnav__sub a { color: #c8d6ea; }
[data-theme="dark"] .mainnav__sub a:hover, [data-theme="dark"] .mainnav__sub a.is-active { color: #8db4ff; background: rgba(1,51,204,.28); }
/* Hero follows the dark canvas in dark mode */
[data-theme="dark"] .hero { background: linear-gradient(122deg, #0b1626 0%, #102338 55%, #123152 100%); }
[data-theme="dark"] .hero::before { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); }
[data-theme="dark"] .hero__kicker { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e3ebf6; }
[data-theme="dark"] .hero__lead { color: #a6b9d2; }
[data-theme="dark"] .hero__meta { border-top-color: rgba(255,255,255,.12); }
[data-theme="dark"] .hero__art-frame { background: #16273f; border-color: var(--line); }
[data-theme="dark"] .btn--ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.32); }
[data-theme="dark"] .btn--ghost:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }
[data-theme="dark"] .page-hero { background: #0d1a2c; border-bottom-color: var(--line); }

/* --blue #0133cc / --blue-600 #1e40af are light-theme text colours (1.7:1 on dark
   cards, WCAG fail) — remap TEXT/icon usages to a dark-safe light blue. Solid
   button BACKGROUNDS stay #0133cc (white-on-blue passes). */
[data-theme="dark"] .hero__kicker-badge,
[data-theme="dark"] .section__eyebrow,
[data-theme="dark"] .section__link,
[data-theme="dark"] .card__more,
[data-theme="dark"] .card--service .card__more,
[data-theme="dark"] .metric-card__link,
[data-theme="dark"] .summary-card__link,
[data-theme="dark"] .infografis-action,
[data-theme="dark"] .infografis-acc__count,
[data-theme="dark"] .btn-link,
[data-theme="dark"] .error-page__code,
[data-theme="dark"] .skm-result__detail summary,
[data-theme="dark"] .a11y__reset,
[data-theme="dark"] .cakupan-stat__num,
[data-theme="dark"] .scope-h,
[data-theme="dark"] .sp4n-card h3 { color: #8db4ff; }
[data-theme="dark"] .hero__meta-item .ic,
[data-theme="dark"] .fc-wave .ic,
[data-theme="dark"] .wave-legend__label .ic,
[data-theme="dark"] .navlink__arrow,
[data-theme="dark"] .infografis-foot .ic,
[data-theme="dark"] .infografis-hero__badge .ic,
[data-theme="dark"] .sp4n-card .ic { color: #8db4ff; }
[data-theme="dark"] .hero__title .accent {
    background: linear-gradient(96deg, #8db4ff 0%, #c7d9ff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .faq-item__chev { border-right-color: #8db4ff; border-bottom-color: #8db4ff; }
[data-theme="dark"] .section__eyebrow::before { background: #8db4ff; }

/* hardcoded light surfaces that survived the token remap */
[data-theme="dark"] .badge--muted, [data-theme="dark"] .badge--wave-unknown { background: #22365c; color: #c8d6ea; }
[data-theme="dark"] .badge--wave-tenang { background: #2563eb; box-shadow: 0 0 0 1px rgba(141,180,255,.45); }
[data-theme="dark"] .empty-state--ok { background: rgba(0,123,0,.14); border-color: rgba(0,180,0,.35); color: #9fe3a0; }
[data-theme="dark"] .warning-banner { background: rgba(207,12,0,.12); border-color: rgba(240,120,110,.35); }
[data-theme="dark"] .warning-banner__body strong { color: #ff8a7a; }
[data-theme="dark"] .warning-banner__body p { color: #f0b3b0; }
[data-theme="dark"] .infografis-callout__icon { background: #22365c; color: #8db4ff; }
/* mobile live-strip pill: white bg + muted text = 1.8:1 in dark mode */
@media (max-width: 600px) {
    [data-theme="dark"] .live-strip__updated { background: rgba(15, 33, 56, .92); color: #c8d6ea; }
}
/* Home live panels hardcode light gradients — give them a dark surface */
[data-theme="dark"] .live-panel,
[data-theme="dark"] .summary-card--status,
[data-theme="dark"] .forecast-card--port { background: var(--white); }

/* --- Accessibility floating widget ---------------------------------------- */
.a11y { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(max(18px, env(safe-area-inset-bottom, 18px)) + 8px); z-index: 60; }
.mt-2 { margin-top: 2rem; }
@media (max-width: 560px) { .skm-form > .btn--lg { margin-bottom: 58px; } }
.a11y__fab {
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(180deg, var(--blue), var(--blue-600));
    box-shadow: 0 8px 22px rgba(7, 89, 133, .42); transition: transform .15s, box-shadow .15s;
}
.a11y__fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7, 89, 133, .5); }
.a11y__fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.a11y__panel {
    position: absolute; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: 268px;
    background: var(--white); color: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 16px;
}
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.a11y__head strong { font-size: 15px; color: var(--heading); }
[data-theme="dark"] .a11y__head strong { color: #eaf1fb; }
.a11y__close { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.a11y__group { margin-bottom: 12px; }
.a11y__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.a11y__btns { display: flex; gap: 6px; }
.a11y__btn {
    flex: 1; padding: 9px 8px; border: 1px solid var(--line); background: var(--bg-tint);
    color: var(--ink); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.a11y__btn:hover { border-color: var(--blue); }
.a11y__btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.a11y__btn:disabled { opacity: .45; cursor: not-allowed; }
.a11y__statement { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 600; }
/* --- Accessibility: extended (UserWay-class) controls --------------------- */
.a11y { z-index: 2147483647; }
.a11y__panel { width: 300px; max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.a11y__reset { margin-left: auto; margin-right: 8px; background: none; border: 0; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.a11y__btns--wrap { flex-wrap: wrap; }
.a11y__btns--wrap .a11y__btn { flex: 1 1 auto; min-width: 84px; font-size: 12.5px; padding: 8px 6px; }
.a11y__btn--tgl { text-align: left; }
.a11y__btn--tgl::before { content: "\25CB\00a0"; opacity: .55; }
.a11y__btn--tgl.is-active::before { content: "\2713\00a0"; opacity: 1; }
.a11y__panel:focus { outline: none; }
/* Content states (attributes on <html>; the contrast/saturation filter is set on
   <html> by a11y.js — a root-element filter keeps sticky/fixed intact and inverts
   the canvas — and the widget/overlays cancel it back via a counter-filter). */
html[data-a11y-spacing="1"] body { letter-spacing: .045em; word-spacing: .12em; }
html[data-a11y-spacing="2"] body { letter-spacing: .09em; word-spacing: .24em; }
html[data-a11y-lh="1"] #konten :is(p, li, dd, dt, blockquote, td, th, a, label) { line-height: 1.85 !important; }
html[data-a11y-lh="2"] #konten :is(p, li, dd, dt, blockquote, td, th, a, label) { line-height: 2.2 !important; }
html[data-a11y-font="dyslexic"] body { font-family: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important; letter-spacing: .02em; }
html[data-a11y-align="left"] #konten :is(p, li, dd, blockquote, h1, h2, h3, h4) { text-align: left !important; }
html[data-a11y-links="1"] a { text-decoration: underline !important; text-underline-offset: 2px; outline: 2px solid #f59e0b; outline-offset: 1px; background: rgba(245, 158, 11, .14); }
html[data-a11y-headings="1"] :is(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #2563eb; outline-offset: 3px; }
html[data-a11y-cursor="1"] body, html[data-a11y-cursor="1"] body * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%202v17l4.5-4.3L12%2021l2.4-1-2.5-6h6z'%20fill='%23111'%20stroke='%23fff'%20stroke-width='1.3'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto !important; }
html[data-a11y-motion="1"] *, html[data-a11y-motion="1"] *::before, html[data-a11y-motion="1"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Reading guide + mask (appended to <html>, above everything, click-through). */
.a11y-guide { position: fixed; left: 0; top: 0; width: 100%; height: 3px; background: #2563eb; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 8px rgba(37, 99, 235, .6); pointer-events: none; z-index: 2147483646; }
.a11y-mask { position: fixed; left: 0; width: 100%; background: rgba(8, 15, 30, .66); pointer-events: none; z-index: 2147483645; }
.a11y-mask--top { top: 0; height: 0; }
.a11y-mask--bot { bottom: 0; top: 50%; }
@media (max-width: 520px) { .a11y__panel { width: calc(100vw - 36px); } }

/* --- FAQ page ------------------------------------------------------------- */
.faq-wrap { max-width: 860px; }
.faq-search { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px 18px; box-shadow: var(--shadow-sm); margin-bottom: 26px; color: var(--muted); }
.faq-search:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.faq-search__input { flex: 1; border: 0; background: none; padding: 12px 0; font: inherit; font-size: 15px; color: var(--ink); }
.faq-group { margin-bottom: 28px; }
.faq-group__title { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #1555aa; border-bottom: 2px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--heading); list-style: none; }
.faq-item__q::-webkit-details-marker { display: none; }
[data-theme="dark"] .faq-item__q { color: #eaf1fb; }
.faq-item__chev { flex: none; width: 11px; height: 11px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform .2s; }
.faq-item[open] .faq-item__chev { transform: rotate(-135deg); }
.faq-item__a { padding: 0 20px 18px; color: var(--ink); }
.faq-item__a :first-child { margin-top: 0; }
.faq-item__a :last-child { margin-bottom: 0; }
.faq-noresult, .faq-empty { color: var(--muted); text-align: center; padding: 24px; }
.faq-cta { margin-top: 36px; text-align: center; color: #eaf3ff; background: linear-gradient(150deg, var(--navy), var(--blue-600)); border-radius: var(--radius); padding: 32px 28px; }
.faq-cta h3 { color: #fff; margin: 0 0 6px; }
.faq-cta p { margin: 0 auto 18px; max-width: 520px; color: rgba(231,242,255,.86); }
.faq-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- e-SKM survey --------------------------------------------------------- */
.skm-wrap { max-width: 820px; }
.skm-intro { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.skm-intro p { margin: 0 0 14px; }
.skm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13.5px; color: var(--muted); }
.skm-legend li { display: flex; align-items: center; gap: 7px; }
.skm-legend__n { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; }
.skm-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px 8px; margin: 0 0 22px; background: var(--white); }
.skm-fieldset > legend { font-weight: 800; color: var(--heading); padding: 0 8px; font-size: 16px; }
[data-theme="dark"] .skm-fieldset > legend { color: #eaf1fb; }
.skm-optional { font-weight: 500; color: var(--muted); font-size: 13px; }
.skm-unsur { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.skm-unsur:last-child { border-bottom: 0; }
.skm-unsur.is-invalid { background: #fff5f5; border-radius: 8px; padding-left: 10px; padding-right: 10px; }
[data-theme="dark"] .skm-unsur.is-invalid { background: rgba(220,38,38,.12); }
.skm-unsur__label { font-weight: 600; margin-bottom: 10px; display: flex; gap: 9px; align-items: baseline; }
.skm-unsur__no { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-050); color: var(--blue); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.skm-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.skm-scale__opt { cursor: pointer; }
.skm-scale__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.skm-scale__box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); text-align: center; transition: border-color .12s, background .12s, color .12s; }
.skm-scale__box strong { font-size: 16px; }
.skm-scale__box small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.skm-scale__opt:hover .skm-scale__box { border-color: var(--blue); }
.skm-scale__opt input:focus-visible + .skm-scale__box { outline: 2px solid var(--gold); outline-offset: 1px; }
.skm-scale__opt input:checked + .skm-scale__box { color: #fff; border-color: transparent; }
.skm-scale__opt input:checked + .skm-scale__box small { color: rgba(255,255,255,.85); }
.skm-n-1 input:checked + .skm-scale__box, .skm-pill.skm-n-1 { background: var(--awas); }
/* white on --siaga/--waspada fails AA (2.8:1 / 1.9:1) — darken bg or flip to dark text */
.skm-n-2 input:checked + .skm-scale__box, .skm-pill.skm-n-2 { background: var(--siaga-700); }
.skm-n-3 input:checked + .skm-scale__box, .skm-pill.skm-n-3 { background: var(--waspada); color: #2d2000; }
.skm-n-3 input:checked + .skm-scale__box small { color: rgba(45, 32, 0, .75); }
.skm-n-4 input:checked + .skm-scale__box, .skm-pill.skm-n-4 { background: var(--ok); }
.skm-legend__n.skm-n-1 { background: var(--awas); }
.skm-legend__n.skm-n-2 { background: var(--siaga-700); }
.skm-legend__n.skm-n-3 { background: var(--waspada); color: #2d2000; }
.skm-legend__n.skm-n-4 { background: var(--ok); }
@media (max-width: 680px) { .skm-scale { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .skm-stat-grid { grid-template-columns: 1fr; } .skm-stat__value { font-size: 28px; } }

/* SKM admin summary */
.skm-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.skm-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.skm-stat--ikm { background: linear-gradient(150deg, var(--navy), var(--blue-600)); color: #fff; border: 0; }
.skm-stat__label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.skm-stat--ikm .skm-stat__label { color: rgba(231,242,255,.8); }
.skm-stat__value { font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--heading); font-feature-settings: var(--num); }
.skm-stat--ikm .skm-stat__value { color: #fff; }
.skm-stat__sub { font-size: 13px; color: var(--muted); }
.skm-stat--ikm .skm-stat__sub { color: rgba(231,242,255,.72); }
.skm-mutu { width: 46px; height: 46px; border-radius: 12px; display: inline-grid; place-items: center; color: #fff; }
.skm-mutu--A { background: var(--ok); } .skm-mutu--B { background: var(--blue); }
.skm-mutu--C { background: var(--siaga-700); } .skm-mutu--D { background: var(--awas); }
.skm-bar { height: 9px; border-radius: 999px; background: #e6eef7; overflow: hidden; }
.skm-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.skm-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 12.5px; }
.skm-result { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.skm-result__title { font-size: 18px; margin: 0 0 16px; }
.skm-result__detail { margin-top: 14px; }
.skm-result__detail summary { cursor: pointer; font-weight: 600; color: var(--blue-600); font-size: 14px; }
.skm-result__pending { margin: 0; color: var(--muted); }
.skm-cta { text-align: center; margin: 6px 0 24px; }
.skm-cta__note { font-size: 13px; margin-top: 10px; }
.skm-unsur-head { font-size: 16px; margin: 0 0 12px; }
.skm-unsur-list { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.skm-unsur-list li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 560px) { .skm-unsur-list { columns: 1; } }
.last-updated { font-size: 13px; color: var(--muted); margin: 0 0 20px; display: inline-flex; align-items: center; gap: 6px; }
.last-updated .ic { color: var(--blue); }

/* Form validation feedback + submit state */
.form-errors { background: #fff1f0; border: 1px solid #f3b6ad; border-left: 4px solid var(--awas); color: #8a1c12; border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.form-errors:focus { outline: 3px solid var(--awas); outline-offset: 2px; }
.form-errors__title { font-size: 15.5px; font-weight: 800; margin: 0 0 8px; color: #8a1c12; }
.form-errors__list { margin: 0; padding-left: 20px; }
.form-errors__list li { margin-bottom: 4px; }
.form-errors__list a { color: #8a1c12; font-weight: 700; text-decoration: underline; }
[data-theme="dark"] .form-errors { background: rgba(220,38,38,.15); color: #ffb4ab; border-color: rgba(220,38,38,.4); }
[data-theme="dark"] .form-errors__title, [data-theme="dark"] .form-errors__list a { color: #ffc4bc; }
.form-intro { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.form-consent { margin: 4px 0 18px; }
.consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; line-height: 1.45; }
.consent-label input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer__legal a { color: #9fb6d4; }
.site-footer__legal a:hover { color: #fff; }
.petasitus { max-width: 860px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.petasitus__group { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.petasitus__group h2 { font-size: 16px; margin: 0 0 10px; }
.petasitus__group ul { margin: 0; padding-left: 18px; }
.petasitus__group li { margin-bottom: 6px; }
@media (max-width: 700px) { .petasitus { grid-template-columns: 1fr; } }

/* ==========================================================================
   Standards conformance — WCAG 2.2 / ISO 9241 / GOV.UK / print
   ========================================================================== */
/* Reading measure (WCAG 1.4.8 / USWDS typography) */
.prose p, .prose li, .ppid-section p, .faq-item__a, .page-hero__sub { max-width: 72ch; }
/* Minimum tap/click target size (WCAG 2.2 SC 2.5.8 — 24px) */
.mainnav__sub a, .topbar__links a, .social-list a, .breadcrumb a { min-height: 24px; display: inline-flex; align-items: center; }
.a11y__btn, .a11y__close { min-height: 36px; }
.radio-group label, .consent-label { min-height: 24px; }
/* Two-tone focus ring on colored CTAs (WCAG 1.4.11 / 2.4.13) — gold ring is low-contrast on gold/orange */
.btn--solid:focus-visible, .mainnav__cta a:focus-visible,
.faq-cta .btn--solid:focus-visible, .ppid-final .btn--solid:focus-visible {
    outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--navy);
}
/* Focus not obscured by the sticky header stack (WCAG 2.2 SC 2.4.11) */
:where(input, select, textarea, a, button, summary, [tabindex], h2[id], h3[id], [id]:target) { scroll-margin-top: 160px; }
/* Error-page help/contact */
.error-page__help { text-align: left; max-width: 520px; margin: 8px auto 16px; }
.error-page__help li { margin-bottom: 6px; }
.error-page__contact { color: var(--muted); font-size: 14px; }
/* BMKG data freshness chip (ISO 9241-110 system status; Nielsen #1) */
.data-fresh { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.data-fresh__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.data-fresh.is-fresh .data-fresh__dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.data-fresh.is-stale { color: var(--siaga-700); }
.data-fresh.is-stale .data-fresh__dot { background: var(--siaga); box-shadow: 0 0 0 3px rgba(237, 123, 3, .22); }
.attribution__meta.is-stale { color: var(--siaga-700); font-weight: 600; }
/* Standar Pelayanan (14 komponen) */
.standar-list { counter-reset: std; list-style: none; margin: 0; padding: 0; }
.standar-item { position: relative; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-sm); padding: 16px 18px 16px 56px; margin-bottom: 12px; box-shadow: var(--shadow-sm); counter-increment: std; }
.standar-item::before { content: counter(std); position: absolute; left: 14px; top: 16px; width: 30px; height: 30px; background: var(--blue-050); color: var(--blue); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.standar-item__title { font-size: 15px; margin: 0 0 4px; }
.standar-item__body { font-size: 14px; }

@media print {
    .topbar, .site-header, .mainnav, .site-footer, .a11y, .nav-toggle, .alert-ribbon, .warning-banner, .kontak-map, .skip-link { display: none !important; }
    body { background: #fff; color: #000; }
    .page-hero { background: #fff !important; color: #000 !important; padding: 0 0 8pt; }
    .page-hero__title, .page-hero__sub, h1, h2, h3, h4 { color: #000 !important; }
    .section { padding: 8pt 0; }
    main a[target="_blank"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; word-break: break-all; }
    .card, .info-card, .prose, .pnbp-table, .data, .skm-result, .ppid-section { box-shadow: none !important; border-color: #999 !important; }
    table, .data tr, .pnbp-cat, .ppid-section, .pemu-item { page-break-inside: avoid; }
    .container { max-width: none; padding: 0 12pt; }
}
.form-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.form-fieldset > legend { padding: 0; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; transform: none !important; }
.skm-progress { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
.skm-progress.is-complete { color: var(--ok-700); background: var(--ok-050); border-color: var(--ok-100); }

/* --- PNBP ----------------------------------------------------------------- */
.pnbp-wrap { max-width: 940px; }
.pnbp-note { display: flex; gap: 14px; background: var(--blue-050); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; color: var(--ink); }
.pnbp-note .ic { color: var(--blue); flex: none; }
.pnbp-note p { margin: 0; }
.pnbp-sim { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 30px; }
.pnbp-sim__title { display: flex; align-items: center; gap: 9px; font-size: 19px; margin: 0 0 16px; }
.pnbp-sim__title .ic { color: var(--blue); }
.pnbp-sim__row { display: grid; grid-template-columns: 1fr 130px auto; gap: 14px; align-items: end; }
.pnbp-sim__row .btn { height: 44px; }
.pnbp-sim__table { margin-top: 18px; }
.pnbp-sim__table tfoot th { font-size: 16px; color: var(--heading); border-top: 2px solid var(--line); }
.pnbp-sim__hint { font-size: 13px; margin: 12px 0 0; }
.pnbp-cat { margin-bottom: 26px; }
.pnbp-cat__title { font-size: 17px; color: var(--heading); border-left: 4px solid var(--teal); padding-left: 12px; margin-bottom: 12px; }
[data-theme="dark"] .pnbp-cat__title { color: #eaf1fb; }
.pnbp-table td { vertical-align: top; }
.pnbp-legal { font-size: 12.5px; margin-top: 18px; font-style: italic; }
@media (max-width: 640px) {
    /* Select spans full width; keep Jumlah + Tambah inline on one row */
    .pnbp-sim__row { grid-template-columns: 1fr auto; }
    .pnbp-sim__row > .form-row:first-child { grid-column: 1 / -1; }
    .pnbp-sim__row .btn { align-self: end; }
}

/* --- Pemutakhiran (data update log) --------------------------------------- */
.pemu-wrap { max-width: 880px; }
.pemu-intro { color: var(--muted); margin-bottom: 26px; }
.pemu-group { margin-bottom: 30px; }
.pemu-group__title { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 14px; }
.pemu-group__title .ic { color: var(--blue); }
.pemu-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.pemu-item { position: relative; padding: 0 0 18px 18px; }
.pemu-item::before { content: ""; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--bg); }
.pemu-item__time { font-size: 12.5px; font-weight: 700; color: var(--blue); font-feature-settings: var(--num); }
.pemu-item__title { font-weight: 600; color: var(--ink); }
.pemu-item__meta { font-size: 13px; color: var(--muted); }
.pemu-empty { color: var(--muted); }
.pemu-cat { margin-bottom: 20px; }
.pemu-cat__title { font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); margin: 0 0 8px; }

/* --- Scope / Wilayah Layanan (profil page body) --------------------------- */
.scope-h { font-size: 15px; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 12px; padding-bottom: 7px; border-bottom: 2px solid var(--line); }
.scope-list { columns: 2; column-gap: 24px; margin: 0; padding-left: 18px; }
.scope-list li { margin-bottom: 6px; break-inside: avoid; }
.scope-sub { color: var(--muted); margin: 0 0 12px; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-chips span { display: inline-block; padding: 6px 13px; background: var(--blue-050); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--blue-600); }
.scope-route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.scope-route__pin { display: inline-flex; align-items: center; padding: 7px 16px; background: linear-gradient(180deg, var(--blue), var(--blue-600)); color: #fff; border-radius: 999px; font-weight: 700; }
.scope-route__note { color: var(--muted); font-size: 13.5px; }
.scope-partners { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scope-partner { background: var(--bg-tint); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); padding: 14px 16px; }
.scope-partner__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.scope-partner__val { font-weight: 700; color: var(--heading); }
[data-theme="dark"] .scope-partner__val { color: #eaf1fb; }
[data-theme="dark"] .scope-chips span { color: #9ed8ec; }
@media (max-width: 560px) { .scope-list { columns: 1; } .scope-partners { grid-template-columns: 1fr; } }

/* --- Homepage "Cakupan Layanan" highlight --------------------------------- */
.cakupan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cakupan-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-card); }
.cakupan-stat__num { display: block; font-size: 38px; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -.02em; font-feature-settings: var(--num); }
.cakupan-stat__num--sm { font-size: 19px; }
.cakupan-stat__label { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.cakupan-more { text-align: center; margin-top: 22px; }
@media (max-width: 760px) { .cakupan-grid { grid-template-columns: 1fr 1fr; } .cakupan-stat__num { font-size: 30px; } }
@media (max-width: 420px) { .cakupan-grid { grid-template-columns: 1fr; } }

/* --- PPID page ------------------------------------------------------------ */
.ppid-wrap { max-width: 940px; }
.ppid-quicknav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 14px 16px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ppid-quicknav a { font-size: 13.5px; font-weight: 600; color: var(--blue-600); padding: 5px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }
.ppid-quicknav a:hover { background: var(--blue); color: #fff; border-color: var(--blue); text-decoration: none; }
.ppid-quicknav a:focus-visible { background: var(--blue); color: #fff; border-color: var(--blue); outline: 3px solid var(--navy); outline-offset: 1px; text-decoration: none; }
.ppid-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.btn--ghost-blue { background: var(--blue-050); color: var(--blue-600); border-color: var(--line); }
.btn--ghost-blue:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.ppid-section { padding-top: 26px; border-top: 1px solid var(--line-soft); margin-top: 26px; scroll-margin-top: 160px; }
.ppid-section__title { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.ppid-section__title .ic { color: var(--blue); flex: none; }
.ppid-sub { font-size: 15px; color: var(--heading); margin: 22px 0 10px; }
[data-theme="dark"] .ppid-sub { color: #eaf1fb; }

.ppid-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ppid-legal__item { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.ppid-legal__no { flex: none; min-width: 46px; height: 30px; padding: 0 8px; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 8px; font-weight: 800; font-size: 12px; }
.ppid-legal__item strong { display: block; color: var(--heading); }
[data-theme="dark"] .ppid-legal__item strong { color: #eaf1fb; }
.ppid-legal__item div span { font-size: 13.5px; color: var(--muted); } /* scope to description spans — not the white-on-navy .ppid-legal__no badge (WCAG 1.4.3) */

.ppid-vm { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 14px; }
.ppid-vm__visi, .ppid-vm__misi { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); background: var(--white); }
.ppid-vm__visi { background: linear-gradient(150deg, var(--navy), var(--blue-600)); color: #fff; border: 0; }
.ppid-vm__label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; color: var(--blue); }
.ppid-vm__visi .ppid-vm__label { color: var(--gold); }
.ppid-vm__visi p { margin: 0; font-size: 17px; font-weight: 600; }
.ppid-vm__misi ol { margin: 0; padding-left: 20px; } .ppid-vm__misi li { margin-bottom: 6px; }

.ppid-tugas { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: tugas; }
.ppid-tugas li { position: relative; padding: 10px 0 10px 44px; border-bottom: 1px dashed var(--line); counter-increment: tugas; }
.ppid-tugas li:last-child { border-bottom: 0; }
.ppid-tugas li::before { content: counter(tugas); position: absolute; left: 0; top: 8px; width: 30px; height: 30px; background: var(--blue-050); color: var(--blue); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }

.ppid-struktur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.ppid-node { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: var(--radius-sm); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.ppid-node--head { border-top-color: var(--gold); background: linear-gradient(160deg, var(--blue-050), var(--white)); }
.ppid-node__role { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.ppid-node__name { display: block; font-size: 16px; font-weight: 800; color: var(--heading); margin: 4px 0 2px; }
[data-theme="dark"] .ppid-node__name { color: #eaf1fb; }
.ppid-node__sub { display: block; font-size: 12.5px; color: var(--muted); }

.ppid-steps { margin: 6px 0 0; padding-left: 0; list-style: none; counter-reset: step; }
.ppid-steps li { position: relative; padding: 0 0 16px 40px; counter-increment: step; border-left: 2px solid var(--line); margin-left: 14px; }
.ppid-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ppid-steps li::before { content: counter(step); position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; background: var(--blue); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 4px var(--bg); }

.ppid-maklumat { margin: 22px 0; background: linear-gradient(150deg, var(--navy), var(--blue-600)); color: #fff; border-radius: var(--radius); padding: 22px 26px; }
.ppid-maklumat__label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.ppid-maklumat__label .ic { color: var(--gold); }
.ppid-maklumat p { margin: 10px 0; font-size: 16px; font-style: italic; line-height: 1.7; }
.ppid-maklumat__sign { font-size: 13.5px; color: rgba(231,242,255,.86); font-weight: 600; }

.ppid-dip__cat { margin-top: 18px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.ppid-dip__title { font-size: 16px; margin: 0 0 2px; }
.ppid-dip__desc { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
.ppid-dip__list { margin: 0; padding: 0; list-style: none; }
.ppid-dip__list li { padding: 8px 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ppid-dip__list li:first-child { border-top: 0; }
.ppid-dip__year { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-050); border-radius: 6px; padding: 1px 8px; }
.ppid-dip__note { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.ppid-dip__empty { font-size: 13.5px; color: var(--muted); margin: 0; }

.ppid-final { margin-top: 36px; text-align: center; color: #eaf3ff; background: linear-gradient(150deg, var(--navy), var(--blue-600)); border-radius: var(--radius); padding: 32px 28px; }
.ppid-final h2 { color: #fff; }
.ppid-final p { max-width: 620px; margin: 0 auto 18px; color: rgba(231,242,255,.86); }
.ppid-final__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.ppid-final__contact { font-size: 14px; } .ppid-final__contact a { color: #fff; text-decoration: underline; } .ppid-final__contact .ic { vertical-align: -2px; }
@media (max-width: 700px) { .ppid-legal, .ppid-vm, .ppid-struktur { grid-template-columns: 1fr; } }