/*
 * FPRB Jambidan — tema situs publik (gelap).
 *
 * Bahasa visual: ruang kendali malam hari. Dasar #171717, permukaan sedikit
 * lebih terang, dan satu warna menyala: hijau rambu evakuasi = arah aman &
 * aksi utama. Kuning = perhatian, merah HANYA untuk keadaan darurat.
 * Dipakai di atas Bootstrap 5.3 (data-bs-theme="dark"); file ini menimpa
 * token warnanya dan menambah komponen khas situs. Gerak ada di
 * fprb-animasi.css.
 */

@font-face {
    font-family: "Archivo";
    src: url("../vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../vendor/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../vendor/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../vendor/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    --dasar: #171717;
    --permukaan: #1e1e1e;
    --permukaan-2: #262626;
    --garis: #2f2f2f;
    --garis-kuat: #474747;
    --tinta: #f3f3f0;
    --tinta-2: #a5a5a0;

    --rambu: #35d68f;          /* hijau rambu, versi menyala untuk latar gelap */
    --rambu-tua: #8cecc0;      /* penekanan & hover (lebih terang, bukan lebih gelap) */
    --rambu-muda: #15251e;     /* latar bertinta hijau */
    --di-rambu: #06140d;       /* teks di atas hijau rambu */
    --rambu-rgb: 53, 214, 143;
    --waspada: #f5b700;
    --siaga: #f08a3c;
    --awas: #e5173a;           /* latar darurat (teks putih di atasnya) */
    --awas-teks: #ff7385;      /* merah sebagai teks di latar gelap */
    --sungai: #5b9cf0;

    /* Nama lama, tetap dipakai komponen & skrip */
    --kertas: var(--dasar);
    --putih: var(--permukaan);

    --huruf-judul: "Archivo", "Arial Narrow", Arial, sans-serif;
    --huruf-teks: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

    --radius: 12px;
    --radius-plat: 10px;
    --radius-kartu: 20px;
    --lebar: 1180px;
    --lentur: cubic-bezier(.2, .7, .2, 1);

    /* Token Bootstrap */
    --bs-body-font-family: var(--huruf-teks);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--tinta);
    --bs-body-color-rgb: 243, 243, 240;
    --bs-body-bg: var(--dasar);
    --bs-body-bg-rgb: 23, 23, 23;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--tinta-2);
    --bs-secondary-bg: var(--permukaan-2);
    --bs-tertiary-bg: var(--permukaan);
    --bs-border-color: var(--garis);
    --bs-primary: var(--rambu);
    --bs-primary-rgb: var(--rambu-rgb);
    --bs-link-color: var(--rambu);
    --bs-link-color-rgb: var(--rambu-rgb);
    --bs-link-hover-color: var(--rambu-tua);
    --bs-link-hover-color-rgb: 140, 236, 192;
    --bs-border-radius: var(--radius);
    --bs-focus-ring-color: rgba(var(--rambu-rgb), .4);
}

html { scroll-behavior: smooth; color-scheme: dark; scrollbar-color: #3a3a3a var(--dasar); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--rambu); color: var(--di-rambu); }

h1, h2, h3, .judul {
    font-family: var(--huruf-judul);
    font-stretch: 92%;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--tinta);
    text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
h3, .h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h4, .h4 { font-family: var(--huruf-teks); font-size: 1.0625rem; font-weight: 700; }

p, li { max-width: 68ch; }
.teks-muda { color: var(--tinta-2); }
.angka { font-family: var(--huruf-judul); font-stretch: 88%; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

a { text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--rambu); outline-offset: 2px; border-radius: 4px; }

.wadah { width: min(100% - 2rem, var(--lebar)); margin-inline: auto; }
.bagian { padding-block: clamp(3rem, 7vw, 5.5rem); }
.bagian--putih { background: #1b1b1b; border-block: 1px solid var(--garis); }
.kepala-bagian { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 2rem; }
.kepala-bagian p { margin: .6rem 0 0; color: var(--tinta-2); font-size: 1.125rem; }

.lewati { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--tinta); color: var(--dasar); padding: .6rem 1rem; border-radius: 999px; font-weight: 700; }
.lewati:focus { left: .5rem; top: .5rem; }

/* ---------- Tombol: pil ---------- */
.btn { font-weight: 700; border-radius: 999px; padding: .6rem 1.25rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; padding: .35rem .9rem; }
.btn-lg { min-height: 54px; padding: .8rem 1.6rem; font-size: 1.125rem; }
.btn-primary {
    --bs-btn-color: var(--di-rambu); --bs-btn-bg: var(--rambu); --bs-btn-border-color: var(--rambu);
    --bs-btn-hover-color: var(--di-rambu); --bs-btn-hover-bg: var(--rambu-tua); --bs-btn-hover-border-color: var(--rambu-tua);
    --bs-btn-active-color: var(--di-rambu); --bs-btn-active-bg: var(--rambu-tua); --bs-btn-active-border-color: var(--rambu-tua);
    --bs-btn-disabled-color: var(--di-rambu); --bs-btn-disabled-bg: var(--rambu); --bs-btn-disabled-border-color: var(--rambu);
}
.btn-outline-primary {
    --bs-btn-color: var(--tinta); --bs-btn-border-color: var(--garis-kuat); --bs-btn-bg: rgba(255, 255, 255, .04);
    --bs-btn-hover-color: var(--di-rambu); --bs-btn-hover-bg: var(--rambu); --bs-btn-hover-border-color: var(--rambu);
    --bs-btn-active-color: var(--di-rambu); --bs-btn-active-bg: var(--rambu-tua); --bs-btn-active-border-color: var(--rambu-tua);
}
.btn-kuning { background: var(--waspada); border-color: var(--waspada); color: #1a1400; }
.btn-kuning:hover, .btn-kuning:focus-visible { background: #ffcf3d; border-color: #ffcf3d; color: #1a1400; }
.btn-terang { background: var(--tinta); border-color: var(--tinta); color: var(--dasar); }
.btn-terang:hover, .btn-terang:focus-visible { background: #fff; border-color: #fff; color: var(--dasar); }
.btn-link { color: var(--rambu); }

/* ---------- Plat rambu (logo & penanda kategori) ---------- */
.plat {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--rambu); color: var(--di-rambu); border-radius: 999px;
    font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; line-height: 1;
    padding: .35rem .7rem; font-size: .8125rem;
}
.plat--kuning { background: var(--waspada); color: #1a1400; }
.plat--garis { background: rgba(var(--rambu-rgb), .1); color: var(--rambu-tua); box-shadow: inset 0 0 0 1px rgba(var(--rambu-rgb), .45); }
.plat--abu { background: var(--permukaan-2); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--garis-kuat); }

/* Pita bahaya: garis diagonal kuning-hitam khas area berbahaya */
.pita-bahaya {
    height: 10px;
    background: repeating-linear-gradient(-45deg, var(--waspada) 0 14px, #0d0d0d 14px 28px);
}

/* ---------- Navigasi: pil melayang ---------- */
.kepala-situs { position: sticky; top: 0; z-index: 1030; padding-block: .6rem; pointer-events: none; }
.kepala-situs .navbar {
    pointer-events: auto; padding: .4rem .5rem .4rem .55rem; border-radius: 30px;
    background: rgba(28, 28, 28, .78); border: 1px solid var(--garis);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
.merek { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--tinta); }
.merek-tanda {
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    background: var(--rambu); color: var(--di-rambu); display: grid; place-items: center; font-size: 1.3rem;
}
.merek-tanda--logo { width: auto; max-width: 104px; border-radius: 0; background: none; }
.merek-tanda--logo .tanda-logo { display: block; height: 42px; width: auto; max-width: 104px; object-fit: contain; }
/* Logo SEMESTA dan FPRB Jambidan berdampingan sejajar di kiri nama situs.
   Logo FPRB bulat penuh, jadi dibuat sedikit lebih kecil agar bobotnya setara. */
.merek-logo { display: flex; align-items: center; gap: .4rem; flex: none; }
.merek-mitra { flex: none; width: 38px; height: 38px; object-fit: contain; }
.merek > span:not(.merek-tanda):not(.merek-logo) { min-width: 0; }
@media (max-width: 991.98px) {
    .merek-tanda--logo .tanda-logo { height: 36px; }
    .merek-mitra { width: 32px; height: 32px; }
}
.merek-nama { font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; letter-spacing: -.03em; font-size: 1.15rem; line-height: 1; display: block; }
.merek-ket { font-size: .8125rem; color: var(--tinta-2); line-height: 1.2; display: block; margin-top: .15rem; }
/* HP: nama + kepanjangannya menyusut/membungkus di kiri, tombol menu tetap sebaris di kanan */
@media (max-width: 991.98px) { .merek { max-width: calc(100% - 58px); min-width: 0; } .merek-ket { font-size: .75rem; text-wrap: balance; } }
.kepala-situs .nav-link { color: var(--tinta-2); font-weight: 700; padding: .5rem .85rem !important; border-radius: 999px; }
.kepala-situs .nav-link:hover, .kepala-situs .nav-link:focus-visible { background: rgba(255, 255, 255, .07); color: var(--tinta); }
.kepala-situs .nav-link[aria-current="page"] { color: var(--di-rambu); background: var(--rambu); }
/* Laptop kecil / tablet mendatar: menu tetap satu baris dengan memadatkan isinya */
@media (min-width: 992px) and (max-width: 1299.98px) { .merek-ket { display: none; } }
@media (min-width: 992px) and (max-width: 1139.98px) {
    .kepala-situs .nav-link { padding-inline: .6rem !important; font-size: 1rem; }
    .kepala-situs .navbar-nav .btn { padding-inline: .7rem; }
}
.kepala-situs .navbar-toggler { border: 1px solid var(--garis-kuat); border-radius: 50%; width: 46px; height: 46px; padding: 0; color: var(--tinta); }
@media (max-width: 991.98px) {
    .kepala-situs .navbar-toggler { display: grid; place-items: center; }
    .kepala-situs .navbar-collapse { padding: .25rem .35rem .35rem; }
    .kepala-situs .nav-link { padding: .7rem .9rem !important; }
}

/* ---------- Hero beranda ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; margin-top: calc(-1 * var(--tinggi-kepala, 76px)); padding-top: var(--tinggi-kepala, 76px); }
/* Latar bila shader tidak jalan (WebGL mati / JS mati): pendar hijau diam */
.hero::before, .kepala-halaman::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(60% 55% at 50% 38%, rgba(var(--rambu-rgb), .13), transparent 70%);
}
.shader { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-out; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.shader.siap { opacity: 1; }
.hero-isi { position: relative; padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem); display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hero-teks { text-align: center; display: grid; justify-items: center; }
.hero-lencana { display: inline-flex; align-items: center; margin: 0 0 1.25rem; padding: .4rem .95rem .4rem .8rem; border-radius: 999px; font-size: .9375rem; color: var(--tinta); background: rgba(255, 255, 255, .05); border: 1px solid var(--garis-kuat); text-decoration: none; }
.hero-lencana:hover { border-color: var(--rambu); color: var(--tinta); }
.hero-slogan { margin: 0 0 .7rem; font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; letter-spacing: -.01em; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); color: var(--rambu); max-width: none; }
.hero h1 { margin: 0 0 1.1rem; max-width: 19ch; font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4rem); }
.hero-pengantar { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--tinta-2); max-width: 50ch; margin: 0 0 1.75rem; }
.hero-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Panggung: kipas kartu. Kartu peta di tengah SENGAJA datar — transform 3D pada
   wadah Leaflet mengacaukan hitungan posisi kursornya; yang miring hanya kartu foto. */
.hero-panggung { position: relative; height: clamp(320px, 42vw, 470px); perspective: 1500px; --px: 0; --py: 0; }
.hero-kartu {
    position: absolute; top: 50%; left: calc(50% + var(--x, 0%)); margin: 0;
    width: var(--l, 240px); aspect-ratio: 3 / 4; border-radius: var(--radius-kartu); overflow: hidden;
    background: var(--permukaan-2); border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
    transform: translate(-50%, -50%) translate3d(calc(var(--px) * var(--d, 0) * 1px), calc(var(--py) * var(--d, 0) * 1px), 0) rotateY(var(--ry, 0deg)) rotate(var(--rz, 0deg));
    z-index: var(--z, 1);
}
.hero-kartu img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.hero-kartu figcaption { position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .8rem; font-size: .8125rem; font-weight: 700; line-height: 1.25; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); }
.hero-kartu--1 { --x: -44%; --l: clamp(150px, 17vw, 210px); --ry: 34deg; --rz: -7deg; --d: 26; --z: 1; }
.hero-kartu--2 { --x: -28%; --l: clamp(170px, 20vw, 250px); --ry: 22deg; --rz: -4deg; --d: 16; --z: 2; }
.hero-kartu--4 { --x: 28%; --l: clamp(170px, 20vw, 250px); --ry: -22deg; --rz: 4deg; --d: 16; --z: 2; }
.hero-kartu--5 { --x: 44%; --l: clamp(150px, 17vw, 210px); --ry: -34deg; --rz: 7deg; --d: 26; --z: 1; }
.hero-peta {
    position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; z-index: 3;
    width: min(100%, 540px); display: flex; flex-direction: column;
    border-radius: var(--radius-kartu); overflow: hidden; background: var(--permukaan);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 40px 80px -24px #000, 0 0 90px -30px rgba(var(--rambu-rgb), .55);
}
.hero-peta .peta { flex: 1; height: auto; min-height: 0; }
.hero-peta-kaki { background: var(--permukaan); color: var(--tinta); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .7rem 1rem; font-size: .875rem; border-top: 1px solid var(--garis); }
@media (max-width: 991.98px) {
    .hero-kartu--1, .hero-kartu--5 { display: none; }
    .hero-kartu--2 { --x: -36%; }
    .hero-kartu--4 { --x: 36%; }
    .hero-peta { width: min(100%, 460px); }
}
@media (max-width: 575.98px) {
    .hero-kartu { display: none; }
    .hero-panggung { height: 380px; }
}
.hero-darurat { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; font-size: .9375rem; color: var(--tinta-2); }
.hero-darurat span { padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--garis); background: rgba(23, 23, 23, .6); }
.hero-darurat a { color: var(--tinta); font-weight: 700; text-decoration: none; }
.hero-darurat a:hover { color: var(--rambu); }

/* ---------- Arak-arakan foto dokumentasi ---------- */
.arak { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.arak-jalur { display: flex; gap: 1rem; width: max-content; padding-block: .5rem; }
.arak-butir { position: relative; flex: none; width: clamp(220px, 26vw, 320px); aspect-ratio: 4 / 3; border-radius: var(--radius-kartu); overflow: hidden; background: var(--permukaan-2); border: 1px solid var(--garis); display: block; color: #fff; text-decoration: none; }
.arak-butir img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.arak-butir span { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem .9rem; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.arak-butir small { display: block; font-weight: 400; color: #cfcfca; margin-top: .15rem; }
.arak-butir:hover, .arak-butir:focus-visible { border-color: var(--rambu); color: #fff; }

/* ---------- Sematan dasbor luar (Power BI) ---------- */
.sematan { background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: var(--radius-kartu); overflow: hidden; box-shadow: 0 40px 80px -30px #000, 0 0 90px -40px rgba(var(--rambu-rgb), .5); display: flex; flex-direction: column; }
.sematan-bilah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .7rem .8rem .7rem 1.1rem; border-bottom: 1px solid var(--garis); }
.sematan-judul { font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; letter-spacing: -.02em; }
/* Kanvas laporan 16:9 ditambah bilah navigasi halaman Power BI (±36 px) di bawahnya */
.sematan-bingkai { position: relative; background: #fff; aspect-ratio: 16 / 9.55; min-height: 300px; }
.sematan-bingkai iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sematan-muat { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; background: var(--permukaan); color: var(--tinta-2); z-index: 1; transition: opacity .5s, visibility .5s; }
.sematan.siap .sematan-muat { opacity: 0; visibility: hidden; }
.sematan-putar { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--garis-kuat); border-top-color: var(--rambu); }
.sematan:fullscreen { border-radius: 0; border: 0; }
.sematan:fullscreen .sematan-bingkai { aspect-ratio: auto; flex: 1; }

/* ---------- Kepala halaman dalam ---------- */
.kepala-halaman { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--garis); margin-top: calc(-1 * var(--tinggi-kepala, 76px)); padding-block: calc(var(--tinggi-kepala, 76px) + clamp(1.75rem, 4vw, 3rem)) clamp(1.75rem, 4vw, 3rem); }
.kepala-halaman::before { background: radial-gradient(70% 90% at 20% 0%, rgba(var(--rambu-rgb), .12), transparent 70%); }
.kepala-halaman h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); margin: 0; }
.kepala-halaman p { margin: .7rem 0 0; color: var(--tinta-2); font-size: 1.125rem; }
.remah { font-size: .875rem; margin-bottom: .7rem; color: var(--tinta-2); }
.remah a { color: var(--tinta-2); }
.remah a:hover { color: var(--rambu); }

/* ---------- Sorotan kursor (posisi diisi fprb-animasi.js) ---------- */
.kartu, .kartu-tulisan, .kpi-butir, .program > div, .ajakan, .langkah-butir, .objek {
    background-image: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--rambu-rgb), .1), transparent 65%);
    background-repeat: no-repeat;
}

/* ---------- Angka ringkas (KPI): ubin ---------- */
.kpi { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi-butir { padding: 1.4rem 1.35rem 1.25rem; background-color: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius-kartu); }
.kpi-nilai { font-family: var(--huruf-judul); font-stretch: 88%; font-weight: 700; letter-spacing: -.045em; font-size: clamp(2.4rem, 1.5rem + 3vw, 3.9rem); line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.kpi-butir:first-child .kpi-nilai { color: var(--rambu); }
.kpi-label { font-weight: 700; margin-top: .7rem; }
.kpi-ket { font-size: .875rem; color: var(--tinta-2); }

/* ---------- Kartu & panel ---------- */
.kartu { background-color: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius-kartu); overflow: hidden; }
.kartu-isi { padding: 1.35rem; }
.kartu-kepala { padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--garis); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kartu-kepala h3 { margin: 0; font-size: 1.15rem; }
.kartu-kepala small { color: var(--tinta-2); }

/* Grafik */
.grafik { min-height: 260px; }
.grafik-data { margin-top: .5rem; font-size: .875rem; }
.grafik-data summary { cursor: pointer; color: var(--tinta-2); width: fit-content; padding: .25rem 0; }
.grafik-data table { margin-top: .5rem; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grafik-data th, .grafik-data td { padding: .3rem .5rem; border-bottom: 1px solid var(--garis); text-align: left; }
.grafik-data td:last-child, .grafik-data th:last-child { text-align: right; }
.grafik-kosong { display: grid; place-items: center; min-height: 200px; color: var(--tinta-2); text-align: center; padding: 1rem; }

/* Tabel Bootstrap di atas kartu */
.table { --bs-table-bg: transparent; --bs-table-color: var(--tinta); --bs-table-border-color: var(--garis); }

/* ---------- Daftar laporan / agenda ---------- */
.daftar { list-style: none; margin: 0; padding: 0; }
.daftar > li { max-width: none; display: flex; gap: .9rem; padding: 1rem 1.35rem; border-bottom: 1px solid var(--garis); }
.daftar > li:last-child { border-bottom: 0; }
.daftar-tanda { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.1rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.daftar-judul { font-weight: 700; line-height: 1.3; }
a.daftar-judul { color: var(--tinta); text-decoration: none; }
a.daftar-judul:hover { color: var(--rambu); }
.daftar-ket { font-size: .875rem; color: var(--tinta-2); }
.daftar--rapat > li { padding: .65rem 1.35rem; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.daftar-jumlah { color: var(--tinta-2); font-size: .9375rem; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.tanggal-kotak { width: 56px; flex: none; text-align: center; border: 1px solid rgba(var(--rambu-rgb), .5); border-radius: var(--radius); overflow: hidden; line-height: 1; align-self: flex-start; background: var(--rambu-muda); }
.tanggal-kotak b { display: block; font-family: var(--huruf-judul); font-stretch: 88%; font-size: 1.5rem; padding: .4rem 0 .25rem; }
.tanggal-kotak span { display: block; background: var(--rambu); color: var(--di-rambu); font-size: .75rem; font-weight: 700; padding: .22rem 0; }

/* ---------- Kartu artikel & kegiatan ---------- */
.kisi-kartu { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kartu-tulisan { display: flex; flex-direction: column; background-color: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius-kartu); overflow: hidden; position: relative; transition: border-color .15s, translate .15s; }
.kartu-tulisan:hover, .kartu-tulisan:focus-within { border-color: rgba(var(--rambu-rgb), .7); }
.kartu-tulisan img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; background: var(--permukaan-2); }
.kartu-tulisan-badan { padding: 1.2rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.kartu-tulisan h3 { margin: 0; font-size: 1.25rem; }
.kartu-tulisan h3 a { color: inherit; text-decoration: none; }
.kartu-tulisan h3 a::after { content: ""; position: absolute; inset: 0; }
.kartu-tulisan p { margin: 0; color: var(--tinta-2); font-size: .9688rem; }
.kartu-tulisan-meta { margin-top: auto; padding-top: .5rem; font-size: .875rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.pil { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--garis-kuat); background: rgba(255, 255, 255, .04); color: var(--tinta); font-weight: 700; font-size: .9375rem; text-decoration: none; min-height: 40px; }
.pil:hover { border-color: var(--rambu); color: var(--rambu-tua); }
.pil[aria-current="true"] { background: var(--rambu); border-color: var(--rambu); color: var(--di-rambu); }

/* Isi artikel */
.tulisan { font-size: 1.125rem; line-height: 1.7; }
.tulisan > * { max-width: 66ch; }
.tulisan h2 { font-size: 1.6rem; margin: 2.2rem 0 .7rem; }
.tulisan ul { padding-left: 1.2rem; }
.tulisan li { margin-bottom: .35rem; }
.tulisan li::marker { color: var(--rambu); }
.tulisan-sampul { width: 100%; max-width: none; border-radius: var(--radius-kartu); border: 1px solid var(--garis); aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 30%; margin-bottom: 1.5rem; }

/* ---------- Program forum: ubin ---------- */
.program { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.program > div { padding: 1.5rem 1.35rem; background-color: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius-kartu); }
.program i { font-size: 1.35rem; color: var(--rambu); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--rambu-muda); box-shadow: inset 0 0 0 1px rgba(var(--rambu-rgb), .35); }
.program h3 { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.program p { margin: 0; color: var(--tinta-2); font-size: .9688rem; }

/* ---------- Ajakan lapor ---------- */
.ajakan { background-color: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius-kartu); overflow: hidden; }
.ajakan-isi { padding: clamp(1.5rem, 4vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.ajakan h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.ajakan p { margin: 0; color: var(--tinta-2); }

/* ---------- Formulir ---------- */
.form-control, .form-select { font-size: 1rem; min-height: 48px; border-color: var(--garis-kuat); border-radius: var(--radius); background-color: #141414; color: var(--tinta); }
.form-control::placeholder { color: #7d7d78; }
textarea.form-control { min-height: 6.5rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--rambu); background-color: #141414; color: var(--tinta); box-shadow: 0 0 0 .2rem rgba(var(--rambu-rgb), .25); }
.form-check-input { background-color: #141414; border-color: var(--garis-kuat); }
.form-check-input:checked { background-color: var(--rambu); border-color: var(--rambu); }
.form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306140d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2306140d'/%3e%3c/svg%3e"); }
.form-label { font-weight: 700; margin-bottom: .35rem; }
.form-text { color: var(--tinta-2); font-size: .875rem; }
.wajib { color: var(--awas-teks); }
.form-control:user-invalid, .form-select:user-invalid { border-color: var(--awas-teks); }
.invalid-feedback { color: var(--awas-teks); }
.langkah { counter-reset: langkah; }
.langkah-butir { background-color: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius-kartu); margin-bottom: 1.25rem; overflow: hidden; }
.langkah-kepala { display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--garis); }
.langkah-kepala::before { counter-increment: langkah; content: counter(langkah); width: 36px; height: 36px; border-radius: 50%; background: var(--rambu); color: var(--di-rambu); display: grid; place-items: center; font-family: var(--huruf-judul); font-weight: 700; flex: none; }
.langkah-kepala h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.langkah-badan { padding: 1.35rem; }
.jebakan { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.tab-pilih { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.tab-pilih button { border: 1px solid var(--garis-kuat); background: rgba(255, 255, 255, .04); color: var(--tinta); font-weight: 700; padding: .5rem 1rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; }
.tab-pilih button:hover { border-color: var(--rambu); }
.tab-pilih button[aria-selected="true"] { background: var(--rambu); border-color: var(--rambu); color: var(--di-rambu); }

.jatuhkan { border: 2px dashed var(--garis-kuat); border-radius: var(--radius-kartu); padding: 1.5rem 1rem; text-align: center; background: #141414; }
.jatuhkan.aktif { border-color: var(--rambu); background: var(--rambu-muda); }

/* ---------- Peta ---------- */
.peta { width: 100%; height: 420px; background: #202020; z-index: 0; }
.peta--pilih { height: 320px; border: 1px solid var(--garis); border-radius: var(--radius); }
.leaflet-container { font-family: var(--huruf-teks); font-size: .9375rem; background: #202020; }
.leaflet-container a { color: var(--rambu); }
.leaflet-popup-content { margin: .85rem 1rem; line-height: 1.45; min-width: 180px; }
.leaflet-popup-content b, .leaflet-popup-content strong { font-weight: 700; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--permukaan); color: var(--tinta); box-shadow: 0 12px 34px rgba(0, 0, 0, .6); }
.leaflet-popup-content-wrapper { border-radius: 16px; border: 1px solid var(--garis-kuat); }
.leaflet-container a.leaflet-popup-close-button { color: var(--tinta-2); width: 32px; height: 32px; font-size: 20px; line-height: 30px; }
.leaflet-bar { border: 1px solid var(--garis-kuat) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .5) !important; }
.leaflet-bar a, .leaflet-bar a:hover { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 1.25rem; background-color: var(--permukaan); color: var(--tinta); border-bottom-color: var(--garis); }
.leaflet-bar a:hover { background-color: var(--permukaan-2); }
.leaflet-bar a.leaflet-disabled { background-color: var(--permukaan); color: #5c5c58; }
.leaflet-control-layers { background: var(--permukaan); color: var(--tinta); border: 1px solid var(--garis-kuat) !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .5) !important; }
.leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); }
.leaflet-control-layers-separator { border-top-color: var(--garis); }
.leaflet-control-attribution { font-size: .6875rem; background: rgba(23, 23, 23, .78) !important; color: var(--tinta-2); }
.leaflet-control-scale-line { background: rgba(23, 23, 23, .78); color: var(--tinta); border-color: var(--tinta-2); text-shadow: none; }
.popup-foto { width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; margin: .4rem 0; }

.penanda { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; rotate: -45deg; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); color: #fff; }
.penanda > i { rotate: 45deg; font-size: .85rem; line-height: 1; }
.penanda--bulat { border-radius: 50%; rotate: none; }
.penanda--bulat > i { rotate: none; }
.penanda--kotak { border-radius: 7px; rotate: none; background: #0b7a4b; }
.penanda--kotak > i { rotate: none; }

/* Halaman peta penuh */
/* --tinggi-kepala diisi fprb-animasi.js dari tinggi header yang sebenarnya */
.peta-penuh { position: relative; height: calc(100vh - var(--tinggi-kepala, 76px)); height: calc(100dvh - var(--tinggi-kepala, 76px)); min-height: 460px; overflow: hidden; border-top: 1px solid var(--garis); }
.peta-penuh .peta { height: 100%; }
.panel-layer, .legenda { background: rgba(28, 28, 28, .9); border: 1px solid var(--garis-kuat); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--tinta); }
.panel-layer { position: absolute; z-index: 800; top: .75rem; left: .75rem; width: min(340px, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); display: flex; flex-direction: column; border-radius: var(--radius-kartu); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
.panel-layer > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; letter-spacing: -.02em; font-size: 1.1rem; min-height: 50px; }
.panel-layer > summary::-webkit-details-marker { display: none; }
.panel-layer > summary .bi-chevron-down { transition: rotate .2s; }
.panel-layer[open] > summary .bi-chevron-down { rotate: 180deg; }
.panel-layer[open] > summary { border-bottom: 1px solid var(--garis); }
/* <details> tidak bisa menjadi wadah flex, jadi batas tinggi dipasang langsung di badan panel:
   daftar layer menggulir DI DALAM panel dan tidak meluber ke bawah peta. */
.panel-layer { overflow: hidden; }
.panel-badan {
    padding: .35rem 1rem 1rem;
    max-height: max(160px, calc(100vh - var(--tinggi-kepala, 76px) - 1.5rem - 54px));
    max-height: max(160px, calc(100dvh - var(--tinggi-kepala, 76px) - 1.5rem - 54px));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.leaflet-control-layers-expanded { padding: .6rem .8rem; font-size: .9375rem; }
.leaflet-control-layers-base label { padding: .2rem 0; cursor: pointer; }
.leaflet-control-layers-toggle { width: 44px !important; height: 44px !important; }
.panel-judul { font-size: .8125rem; font-weight: 700; color: var(--tinta-2); margin: .9rem 0 .35rem; }
.layer-butir { padding: .65rem 0; border-bottom: 1px solid var(--garis); }
.layer-butir:last-child { border-bottom: 0; }
.layer-baris { display: flex; align-items: center; gap: .6rem; }
.layer-baris label { flex: 1; font-weight: 700; line-height: 1.25; cursor: pointer; font-size: .9688rem; }
.layer-baris .form-check-input { width: 1.35em; height: 1.35em; margin: 0; flex: none; cursor: pointer; }
.layer-warna { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid rgba(255, 255, 255, .35); }
.layer-tombol { border: 0; background: none; color: var(--tinta-2); width: 36px; height: 36px; border-radius: 50%; flex: none; }
.layer-tombol:hover { background: rgba(255, 255, 255, .08); color: var(--tinta); }
.layer-geser { display: flex; align-items: center; gap: .6rem; margin: .45rem 0 0 2.05rem; font-size: .8125rem; color: var(--tinta-2); }
.layer-geser input[type="range"] { flex: 1; accent-color: var(--rambu); height: 28px; min-width: 0; }
.layer-geser output { width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.layer-ket { margin: .3rem 0 0 2.05rem; font-size: .8125rem; color: var(--tinta-2); }
.layer-butir.mati .layer-geser { opacity: .45; }

.legenda { border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); font-size: .8125rem; max-width: 250px; }
.legenda-tombol { border: 0; background: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .85rem; font-weight: 700; font-size: .875rem; color: var(--tinta); min-height: 40px; }
.legenda-isi { padding: 0 .85rem .75rem; max-height: 40vh; overflow-y: auto; scrollbar-width: thin; }
.legenda[data-tutup="1"] .legenda-isi { display: none; }
.legenda-grup { margin-top: .55rem; }
.legenda-grup b { display: block; margin-bottom: .2rem; line-height: 1.25; }
.legenda-baris { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; }
.legenda-kotak { width: 20px; height: 13px; border-radius: 3px; flex: none; border: 1.5px solid; }
.legenda-kosong { color: var(--tinta-2); padding-top: .4rem; }

.peta-info { position: absolute; z-index: 700; left: 50%; translate: -50% 0; bottom: 1.6rem; background: var(--tinta); color: var(--dasar); font-weight: 700; padding: .5rem 1rem; border-radius: 999px; font-size: .875rem; pointer-events: none; max-width: calc(100% - 2rem); text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* ---------- Hasil analisis ---------- */
.hasil-spanduk { border-radius: var(--radius-kartu); padding: 1.25rem 1.35rem; display: flex; gap: 1rem; align-items: flex-start; border: 1px solid; background: var(--permukaan); }
.hasil-spanduk i { font-size: 2rem; line-height: 1; }
.hasil-spanduk h2 { font-size: 1.4rem; margin: 0 0 .25rem; letter-spacing: -.02em; }
.hasil-spanduk p { margin: 0; }
.hasil-spanduk--aman { border-color: rgba(var(--rambu-rgb), .7); background: var(--rambu-muda); }
.hasil-spanduk--aman i { color: var(--rambu); }
.hasil-spanduk--rawan { border-color: var(--awas); background: #2a1217; }
.hasil-spanduk--rawan i { color: var(--awas-teks); }
.hasil-spanduk--netral { border-color: var(--garis-kuat); }
.objek { border: 1px solid var(--garis); border-radius: var(--radius-kartu); background-color: var(--permukaan); margin-top: 1rem; overflow: hidden; }
.objek-kepala { padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; border-bottom: 1px solid var(--garis); }
.objek-kepala b { font-size: 1.05rem; }
.objek-badan { padding: 1rem 1.1rem; }
.objek dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0 0 .75rem; font-size: .9375rem; }
.objek dt { color: var(--tinta-2); font-weight: 400; }
.objek dd { margin: 0; font-variant-numeric: tabular-nums; }
.temuan { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--garis); }
.temuan-warna { width: 14px; height: 14px; border-radius: 4px; margin-top: .3rem; flex: none; border: 1px solid rgba(255, 255, 255, .3); }
.tingkat { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.tingkat--tinggi { background: #4a121c; color: #ffb3bd; }
.tingkat--sedang { background: #47250a; color: #ffc999; }
.tingkat--rendah { background: #3f3200; color: #ffe08a; }
.tingkat--aman { background: var(--rambu-muda); color: var(--rambu-tua); }

/* Status laporan */
.status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .875rem; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-2); }
.status--baru::before { background: var(--waspada); }
.status--terverifikasi::before { background: var(--sungai); }
.status--ditangani::before { background: var(--siaga); }
.status--selesai::before { background: var(--rambu); }
.status--ditolak::before { background: var(--tinta-2); }

.kode-tiket { font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); letter-spacing: .02em; color: var(--rambu-tua); background: var(--rambu-muda); border: 2px dashed var(--rambu); border-radius: var(--radius-kartu); padding: .75rem 1.25rem; display: inline-block; user-select: all; }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-bg: var(--permukaan); --bs-pagination-border-color: var(--garis); --bs-pagination-color: var(--tinta); --bs-pagination-hover-color: var(--rambu-tua); --bs-pagination-hover-bg: var(--permukaan-2); --bs-pagination-hover-border-color: var(--garis-kuat); --bs-pagination-active-color: var(--di-rambu); --bs-pagination-active-bg: var(--rambu); --bs-pagination-active-border-color: var(--rambu); --bs-pagination-disabled-bg: var(--permukaan); --bs-pagination-disabled-color: #6b6b66; --bs-pagination-disabled-border-color: var(--garis); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--rambu-rgb), .3); --bs-pagination-border-radius: 999px; }

/* ---------- Kaki situs ---------- */
.kaki { position: relative; overflow: hidden; background: #111; border-top: 1px solid var(--garis); color: var(--tinta-2); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.kaki-isi { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-block: 3.25rem 2rem; }
.kaki h2 { font-size: 1.05rem; color: var(--tinta); margin-bottom: .85rem; font-weight: 700; letter-spacing: -.02em; }
.kaki a { color: var(--tinta); text-decoration: none; }
.kaki a:hover { color: var(--rambu); }
.kaki ul { list-style: none; padding: 0; margin: 0; }
.kaki li { margin-bottom: .45rem; }
/* Kolom Layanan: tautan berikon dalam 2 kolom sejajar, bukan satu daftar panjang.
   HP: blok kaki ditumpuk, menu tetap 2 kolom; tablet: Layanan di kanan setinggi identitas + nomor darurat;
   desktop: tiga kolom dengan Layanan sedikit lebih lebar. */
.kaki-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.25rem; }
.kaki .kaki-menu li { margin-bottom: 0; }
.kaki-menu a { display: flex; align-items: center; gap: .6rem; padding: .1rem 0; line-height: 1.3; }
.kaki-menu i { flex: none; width: 1.9rem; height: 1.9rem; display: inline-grid; place-items: center; border-radius: .6rem; background: rgba(255, 255, 255, .05); border: 1px solid var(--garis); color: var(--rambu); font-size: .9rem; transition: background-color .2s, border-color .2s, transform .2s; }
.kaki-menu a:hover i, .kaki-menu a:focus-visible i { background: rgba(var(--rambu-rgb), .14); border-color: rgba(var(--rambu-rgb), .45); transform: translateY(-1px); }
@media (min-width: 768px) and (max-width: 991.98px) {
    .kaki-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kaki-layanan { grid-column: 2; grid-row: span 2; }
}
@media (min-width: 992px) {
    .kaki-isi { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.45fr) minmax(0, 1fr); gap: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .kaki-menu i { transition: none; } }
.kaki-slogan { color: var(--rambu); font-weight: 700; margin: -.45rem 0 .9rem; }
.kaki-bawah { border-top: 1px solid var(--garis); padding-block: 1.1rem; font-size: .875rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; position: relative; }
.kaki-raksasa { font-family: var(--huruf-judul); font-stretch: 100%; font-weight: 800; letter-spacing: -.055em; line-height: .78; font-size: clamp(2.2rem, 10vw, 9.5rem); white-space: nowrap; text-align: center; margin: 0 0 -.12em; max-width: none; user-select: none; color: transparent; -webkit-text-stroke: 1px #2e2e2e; background: linear-gradient(180deg, rgba(var(--rambu-rgb), .22), transparent 80%); -webkit-background-clip: text; background-clip: text; }

.kosong { text-align: center; padding: 3rem 1rem; color: var(--tinta-2); }
.kosong i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: #6e6e69; }

/* Butiran halus di atas seluruh halaman (tekstur, bukan gambar) */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 1035; pointer-events: none; opacity: .055;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3e%3cfilter id='n'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3e%3cfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23n)'/%3e%3c/svg%3e");
}
body:has(.peta-penuh)::after { display: none; }

/* Atribut hidden harus menang atas utilitas display (.d-flex dsb.) */
[hidden] { display: none !important; }

/* Kontrol Leaflet tidak boleh tertutup panel layer:
   HP  -> panel membentang di atas, kontrol digeser ke bawahnya
   ≥md -> panel di kiri, kontrol kiri digeser ke kanannya */
.peta-penuh .leaflet-top { top: 68px; }
@media (min-width: 768px) {
    .peta-penuh .leaflet-top { top: 0; }
    .peta-penuh .leaflet-top.leaflet-left { left: calc(340px + .75rem); }
}

/* ---------- Penyesuaian layar HP ---------- */
@media (max-width: 767.98px) {
    /* Navigasi melayang lebih pekat supaya teks yang lewat di belakangnya tidak mengganggu */
    .kepala-situs .navbar { background: rgba(26, 26, 26, .94); }
    /* Gutter Bootstrap g-5 (3rem) lebih lebar dari tepi halaman 1rem dan membuat baris meluber */
    .row.g-5, .row.g-4 { --bs-gutter-x: 2rem; }
    /* Sasaran sentuh minimal 40 px */
    .btn-sm { min-height: 40px; padding-inline: 1rem; }
    .bagian { padding-block: 2.75rem; }
    .kepala-bagian { margin-bottom: 1.4rem; }
    .kepala-bagian p { font-size: 1.0625rem; }
    .hero-aksi { width: 100%; }
    .hero-aksi .btn { flex: 1 1 100%; }
    .hero-darurat span { flex: 1 1 100%; text-align: center; }
    .kpi-butir { padding: 1.1rem 1rem 1rem; }
    .kartu-isi, .langkah-badan { padding: 1.1rem; }
    .kartu-kepala, .langkah-kepala { padding: 1rem 1.1rem; }
    .daftar > li { padding-inline: 1.1rem; }
    .ajakan-isi .btn { flex: 1 1 100%; }
    .sematan-bilah .btn { flex: 1 1 auto; }
    /* Dasbor Power BI: di layar tegak diberi ruang lebih tinggi agar kontrol halamannya tidak terpotong */
    .sematan-bingkai { aspect-ratio: auto; height: min(70vh, 460px); }
    .kaki-isi { padding-block: 2.25rem 1.5rem; gap: 1.5rem; }
    .ke-atas { width: 44px; height: 44px; right: .75rem; bottom: .75rem; }
}

/* Tombol telepon darurat di peringatan halaman Lapor (satu tombol per nomor, mudah diketuk di HP). */
.telepon-darurat { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.telepon-darurat a { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 44px; padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--bs-danger-border-subtle); background: rgba(255, 255, 255, .06); color: inherit; text-decoration: none; line-height: 1.3; }
.telepon-darurat a:hover, .telepon-darurat a:focus-visible { background: rgba(255, 255, 255, .14); color: inherit; }
.telepon-darurat span { font-size: .875rem; opacity: .85; }

/* ------------------------------------------------------------------
   Target sentuh di HP & tablet (±44px). Hanya untuk layar sentuh,
   tampilan desktop dengan tetikus tidak berubah.
   ------------------------------------------------------------------ */
@media (pointer: coarse) {
    /* Kaki situs: tiap tautan menu & nomor darurat jadi baris setinggi 44px */
    .kaki li { margin-bottom: 0; }
    .kaki ul a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .15rem; }

    /* Pil nomor darurat di beranda: seluruh pil bisa diketuk, bukan hanya angkanya */
    .hero-darurat span { position: relative; padding: .6rem 1rem; }
    .hero-darurat a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

    /* Tautan "Lihat di peta", "Semua kegiatan", dsb. di beranda */
    main a.fw-bold { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }

    /* Paginasi & tombol "Lihat angka" */
    .pagination .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .grafik-data summary { padding-block: .65rem; }

    /* Kotak centang (persetujuan lapor, "ingat saya", daftar layer) sedikit lebih besar */
    .form-check:not(.form-switch) .form-check-input { width: 1.35em; height: 1.35em; margin-top: .05em; }
}