/* Font display self-host (NONAKTIF supaya tidak muncul galat 404 selama
   berkasnya belum ada; fallback Impact otomatis dipakai). Cara mengaktifkan:
   1. Taruh anton.woff2 di assets/fonts/ (baca BACA-FONT.md).
   2. Hapus tanda komentar pada blok @font-face di bawah ini.
@font-face{font-family:"Anton Lokal";src:url("../fonts/anton.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
*/

/* ================================================================
   base.css — token, reset, utilitas. Dimuat paling awal.
   Ganti tema warna: atribut data-theme pada <html>.
   ================================================================ */
:root {
  /* --- warna aksen (ditimpa oleh tema) --- */
  --accent: #2783de;
  --accent-strong: #1b5fa6;
  --accent-soft: #e8f2fc;
  --accent-line: #bbd9f5;
  --accent-bloom: rgba(39, 131, 222, 0.13);
  --accent-shadow: rgba(39, 131, 222, 0.28);
  --accent-mesh: rgba(47, 182, 168, 0.07);
  --grad-end: #eaf2fb;

  /* --- netral --- */
  --ink: #14243a;
  --ink2: #5a6b7f;
  --ink3: #8494a6;
  --canvas: #ffffff;
  --soft: #f7fafd;
  --line: #e3ebf3;
  --seam: #dce7f3;
  --slider-frame: #f2f5f8;

  /* --- gradasi panel: A · Kabut Biru + mesh tipis dari C --- */
  --panel-grad:
    radial-gradient(
      520px 480px at 90% 96%,
      var(--accent-mesh),
      transparent 64%
    ),
    radial-gradient(680px 420px at 8% 0%, var(--accent-bloom), transparent 70%),
    linear-gradient(158deg, #ffffff 0%, #f5f9fd 44%, var(--grad-end) 100%);

  --font-ui:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;
  --font-display:
    "Anton Lokal", Impact, "Arial Black", "Haettenschweiler", sans-serif;
  --shadow-1:
    0 1px 2px rgba(20, 36, 58, 0.08), 0 8px 24px rgba(20, 36, 58, 0.1);
  --shadow-2:
    0 2px 6px rgba(20, 36, 58, 0.1), 0 18px 48px rgba(20, 36, 58, 0.16);
  --font-mono: Menlo, Consolas, "Courier New", monospace;

  --radius: 26px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 32px);
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------- tema warna ---------------- */
[data-theme="teal"] {
  --accent: #12a594;
  --accent-strong: #0c7f72;
  --accent-soft: #e2f6f3;
  --accent-line: #a9e3db;
  --accent-bloom: rgba(18, 165, 148, 0.13);
  --accent-shadow: rgba(18, 165, 148, 0.28);
  --accent-mesh: rgba(39, 131, 222, 0.06);
  --grad-end: #e7f5f2;
}
[data-theme="hijau"] {
  --accent: #2e9e5b;
  --accent-strong: #227a45;
  --accent-soft: #e6f5ec;
  --accent-line: #aeddc1;
  --accent-bloom: rgba(46, 158, 91, 0.13);
  --accent-shadow: rgba(46, 158, 91, 0.28);
  --accent-mesh: rgba(233, 180, 76, 0.07);
  --grad-end: #eaf4ec;
}
[data-theme="indigo"] {
  --accent: #5b5bd6;
  --accent-strong: #4343ad;
  --accent-soft: #ededfb;
  --accent-line: #c3c3f0;
  --accent-bloom: rgba(91, 91, 214, 0.13);
  --accent-shadow: rgba(91, 91, 214, 0.28);
  --accent-mesh: rgba(39, 131, 222, 0.06);
  --grad-end: #ededf9;
}
[data-theme="oranye"] {
  --accent: #e1662a;
  --accent-strong: #b44e1c;
  --accent-soft: #fcede4;
  --accent-line: #f3c4a9;
  --accent-bloom: rgba(225, 102, 42, 0.13);
  --accent-shadow: rgba(225, 102, 42, 0.28);
  --accent-mesh: rgba(39, 131, 222, 0.06);
  --grad-end: #fbf0ea;
}

/* ---------------- reset ---------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------------- utilitas ---------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  box-shadow: 0 6px 18px rgba(20, 36, 58, 0.14);
}
.skip:focus {
  left: 0;
}
.emblem {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-strong));
  box-shadow: 0 6px 16px var(--accent-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ======================================================================
   WATERMARK IDENTITAS (Revisi 83)
   ----------------------------------------------------------------------
   CARA PAKAI
     Tambahkan .wm-daun / .wm-bambu / .wm-pendopo pada <section> halaman.
     Watermark otomatis muncul di blok judul halaman (.judul-halaman) milik
     bagian itu, bukan di dasar bagian. Beranda dikecualikan: kelasnya
     dipasang di <section class="hero"> dan targetnya .panel, bukan band
     judul (lihat blok BERANDA di bawah).

   PETA HALAMAN (aset terikat makna, bukan digilir supaya rata)
     pendopo : Sejarah, Gambaran Umum, Pemerintahan, Statistik  -> kelembagaan
     bambu   : Potensi Daerah, Infrastruktur                     -> sumber daya
     daun    : Beranda (hero), Investasi (+detail), B2B (+detail) -> pertumbuhan
     kosong  : Peta, Pengaduan, Perizinan, Berita, Galeri

   ATURAN YANG MENGIKAT SISTEM INI
     1. Satu halaman satu aset. Halaman induk dan halaman detailnya WAJIB
        memakai aset yang sama, kalau tidak pengunjung yang mengklik masuk
        akan merasa berpindah situs.
     2. Letak, ukuran, dan opasitas identik di semua halaman dalam: kanan
        bawah band judul. Yang berganti hanya bentuknya. Begitu posisinya
        ikut berubah-ubah, sistemnya bubar. Satu-satunya pengecualian yang
        disetujui adalah hero beranda (kiri bawah) karena sisi kanannya
        tertutup kartu slider.
      3. Tidak dipakai di bidang kerja (peta, formulir) dan di halaman yang
        sudah punya watermark logo SIPILAR (berita, galeri).

   KENAPA overflow:hidden DI .judul-halaman
     Watermark sengaja dipasang besar dengan sebagian badan keluar tepi
     (bleed). Tanpa pemotong, offset negatif akan memunculkan gulir
     horizontal di seluruh halaman. Pemotongan TIDAK boleh ditaruh di
     .prf karena di dalamnya ada .prf-nav position:sticky - ancestor yang
     memotong akan mematikan perilaku sticky itu. .judul-halaman aman
     karena isinya hanya chip, judul, dan paragraf pengantar.

   KENAPA z-index:-1 + isolation:isolate
     Kombinasi ini menaruh watermark di belakang seluruh isi tetapi tetap
     di depan latar bagian, jadi teks mustahil tertimpa. Tanpa isolation,
     watermark tenggelam sampai ke belakang latar dan hilang sama sekali.

   ATURAN UKURAN - jangan diubah tanpa render ulang
     Band judul hanya ~280 px tinggi. Dua putaran QA menunjukkan aset
     400-560 px membuat bambu dan daun terpotong sampai kehilangan
     bentuknya - yang tersisa terbaca sebagai serpihan, bukan tanaman.
     Jadi ukurannya dipatok pada tinggi tampil ~260 px untuk ketiga
     aset, dan pemotongan hanya di TEPI KANAN (18-22 persen).
     Kalau suatu saat width dinaikkan, watermark harus dipindah ke
     bidang yang lebih tinggi lebih dulu, bukan dipaksa di band ini.

   OPASITAS - hasil uji tangga opasitas, jangan diubah tanpa uji ulang
     latar terang : pendopo 10%  daun 10%  bambu 8%
     latar gelap  : daun putih 10% (hero beranda)
     Angka 5,5% pada revisi sebelumnya TERLALU SAMAR: selisihnya hanya 9-12
     dari 255 terhadap latar #F7FAFD, di bawah ambang penglihatan layar
     biasa, dan pengguna melaporkan tidak melihat watermark sama sekali.
     Bambu tetap paling rendah karena bidangnya paling rapat; pada angka
     yang sama dengan pendopo dia terbaca jauh lebih pekat.
   ====================================================================== */
/* WADAH - jangan pernah hapus blok deklarasi di bawah ini.
   position:relative = tambatan ::after. Tanpa ini gambarnya menambat ke
   leluhur berposisi terdekat dan nyasar keluar band judul, dan watermark
   terlihat hilang sama sekali. Pernah terjadi: daftar selektor ini tertinggal
   berakhir koma tanpa blok deklarasi saat pembersihan aturan lain. */
.wm-daun > .judul-halaman,
.wm-bambu > .judul-halaman,
.wm-pendopo > .judul-halaman {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.wm-daun > .judul-halaman::after,
.wm-bambu > .judul-halaman::after,
.wm-pendopo > .judul-halaman::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
}

/* pendopo - paling arsitektural, terbaca sebagai lambang tempat */
.wm-pendopo > .judul-halaman::after {
  right: -53px;
  bottom: 6px;
  width: 240px;
  aspect-ratio: 856/944;
  background-image: url("../ornament/wm-pendopo.svg");
  opacity: 0.1;
}

/* bambu - dipotong lebih banyak supaya yang terlihat hanya beberapa batang */
.wm-bambu > .judul-halaman::after {
  right: -29px;
  bottom: -44px;
  width: 140px;
  aspect-ratio: 876/1914;
  background-image: url("../ornament/wm-bambu.svg");
  opacity: 0.08;
}

/* daun teh - berkas SVG sudah dicerminkan, jadi pangkal tangkai berada di
   luar tepi kanan dan yang terlihat adalah lengkung daunnya */
.wm-daun > .judul-halaman::after {
  right: -50px;
  bottom: 4px;
  width: 250px;
  aspect-ratio: 1034/1106;
  background-image: url("../ornament/wm-daun.svg");
  opacity: 0.1;
}

/* ---------------------------------------------------------------------
   BERANDA: hero, daun putih di sudut KIRI bawah

   KENAPA DITAMBATKAN KE .panel, BUKAN .hero
     .hero hanya punya isolation:isolate, TIDAK punya overflow:hidden, jadi
     bleed negatif di .hero akan memunculkan gulir horizontal sehalaman.
     .panel (kolom kiri) sudah punya position:relative + z-index:1 +
     overflow:hidden, jadi dia memotong bleed dan sekaligus membentuk
     stacking context supaya z-index:-1 tetap di belakang isi panel namun
     di depan gradien hero.

   KENAPA KIRI, MELAWAN POLA "SELALU KANAN"
     Sisi kanan hero ditempati kartu foto slider dan kartu tanggal. Uji
     pratinjau membuktikan watermark di kanan tertutup total dan sia-sia.
     Jadi khusus hero, arahnya dibalik ke kiri. Ini satu-satunya
     pengecualian pola letak di seluruh sistem.

   KENAPA transform:scaleX(-1)
     wm-daun-putih.svg sudah dicerminkan saat trace supaya pangkal tangkai
     berada di luar tepi KANAN (untuk band judul halaman dalam). Di hero
     tangkainya harus keluar tepi KIRI dan tumbuh diagonal ke kanan atas,
     jadi berkasnya dibalik lagi lewat CSS, bukan lewat aset baru.
   --------------------------------------------------------------------- */
.hero.wm-daun > .panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -22px;
  bottom: -30px;
  width: 300px;
  aspect-ratio: 1034/1106;
  background-image: url("../ornament/wm-daun-putih.svg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  transform: scaleX(-1);
  opacity: 0.1;
}

/* Layar sempit: isi menumpuk satu kolom, ruang sudut habis. */
@media (max-width: 900px) {
  .wm-daun > .judul-halaman::after,
  .wm-bambu > .judul-halaman::after,
  .wm-pendopo > .judul-halaman::after,
  .hero.wm-daun > .panel::after {
    display: none;
  }
}

@media print {
  .wm-daun > .judul-halaman::after,
  .wm-bambu > .judul-halaman::after,
  .wm-pendopo > .judul-halaman::after,
  .hero.wm-daun > .panel::after {
    display: none;
  }
}