/* ==========================================================================
   STYLE.CSS — Stylesheet utama
   KKN Tematik Universitas Nurtanio Bandung 2026 · Kelompok 07 · Desa Cipada
   Tema: "Spirit of Mount Burangrang"
   --------------------------------------------------------------------------
   Urutan berkas CSS yang benar:
     1. variables.css   → token desain
     2. style.css       → base + komponen  (berkas ini)
     3. animation.css   → keyframes & kelas animasi
     4. responsive.css  → breakpoint
   --------------------------------------------------------------------------
   DAFTAR ISI
   01. Reset & Base
   02. Latar Kontur Topografi (SVG)
   03. Utilitas & Layout Shell
   04. Tombol
   05. Loader
   06. Navbar & Drawer
   07. Hero (3 lapis gunung + kabut + burung + sinar)
   08. Judul Section
   09. About & Filosofi Sunda
   10. Statistik / Counter
   11. Kartu Wisata + Slider
   12. Kartu UMKM + Badge Ketinggian
   13. Tabel Data IKM
   14. Timeline Program + Progress
   15. Peta Topografi (Leaflet)
   16. Grafik Elevasi (Chart.js)
   17. Widget Cuaca
   18. Timeline Sejarah "Jejak Burangrang"
   19. Kuis
   20. Galeri + Lightbox
   21. Tim
   22. Testimoni & Berita
   23. Kontak
   24. Footer (kontur pegunungan)
   25. Halaman 404
   26. Kursor Glow, Daun, Kabut Ambien
   ========================================================================== */

/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background var(--dur-mid) var(--ease-soft),
              color var(--dur-mid) var(--ease-soft);
}

/* Kunci scroll saat drawer / lightbox terbuka */
body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: var(--lh-snug);
  /* Judul memakai huruf kapital yang lebar (Bebas Neue/Oswald). Kata panjang
     seperti "DIGITALISASI" atau "PERKEMBANGAN" tidak dapat dipatahkan pada
     layar 280–320px, sehingga akan meluber keluar kartu. Aturan ini
     mengizinkan pemutusan HANYA bila kata memang tidak muat. */
  overflow-wrap: break-word;
}

/* Elemen teks lain yang berpotensi memuat kata/URL panjang */
p, li, dd, dt, figcaption, blockquote, .price, .spec .v, .contact-item .v {
  overflow-wrap: break-word;
}

::selection { background: var(--accent); color: var(--ash-900); }

/* Fokus keyboard yang selalu terlihat (aksesibilitas) */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Lompat ke konten — tautan pertama bagi pengguna keyboard & screen reader */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: var(--z-loader);
  padding: 12px 24px;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Hanya untuk screen reader */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbar bertema pegunungan */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--moss-600), var(--moss-900));
  border-radius: var(--r-pill);
  border: 2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ==========================================================================
   02. LATAR KONTUR TOPOGRAFI
   Setiap section memakai pola kontur berbeda. Pola dibuat sebagai SVG
   data-URI agar tidak menambah request HTTP (baik untuk skor performa).
   Tempelkan kelas .topo--* pada elemen <section>.
   ========================================================================== */
.topo {
  position: relative;
  isolation: isolate;
}
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-topo);
  pointer-events: none;
  opacity: 0.5;
  background-repeat: repeat;
  transition: opacity var(--dur-mid) var(--ease-soft);
}
[data-theme="dark"] .topo::before { opacity: 0.28; }
.topo > * { position: relative; z-index: var(--z-content); }

/* Pola A — kontur rapat (punggungan tajam) */
.topo--ridge::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%234A7C59' stroke-width='1' stroke-opacity='0.22'%3E%3Cpath d='M-20 60c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 100c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 140c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 180c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 220c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 260c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 300c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 340c60-40 140-40 200 0s140 40 240 0'/%3E%3Cpath d='M-20 380c60-40 140-40 200 0s140 40 240 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 400px;
}

/* Pola B — kontur konsentris (puncak) */
.topo--peak::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%236A9FC0' stroke-width='1' stroke-opacity='0.28'%3E%3Cellipse cx='160' cy='160' rx='24' ry='16'/%3E%3Cellipse cx='160' cy='160' rx='48' ry='32'/%3E%3Cellipse cx='160' cy='160' rx='74' ry='50'/%3E%3Cellipse cx='160' cy='160' rx='102' ry='70'/%3E%3Cellipse cx='160' cy='160' rx='132' ry='92'/%3E%3Cellipse cx='160' cy='160' rx='164' ry='116'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* Pola C — kontur lembah melebar */
.topo--valley::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='300' viewBox='0 0 480 300'%3E%3Cg fill='none' stroke='%232E7D32' stroke-width='1.1' stroke-opacity='0.18'%3E%3Cpath d='M-20 40q120 90 250 0t270 30'/%3E%3Cpath d='M-20 90q120 90 250 0t270 30'/%3E%3Cpath d='M-20 140q120 90 250 0t270 30'/%3E%3Cpath d='M-20 190q120 90 250 0t270 30'/%3E%3Cpath d='M-20 240q120 90 250 0t270 30'/%3E%3Cpath d='M-20 290q120 90 250 0t270 30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 300px;
}

/* Pola D — kontur halus + titik triangulasi (peta survei) */
.topo--survey::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23F4A261' stroke-width='1' stroke-opacity='0.3'%3E%3Cpath d='M0 30q60 30 120 0t120 0'/%3E%3Cpath d='M0 90q60 30 120 0t120 0'/%3E%3Cpath d='M0 150q60 30 120 0t120 0'/%3E%3Cpath d='M0 210q60 30 120 0t120 0'/%3E%3C/g%3E%3Cg fill='%234A7C59' fill-opacity='0.28'%3E%3Ccircle cx='60' cy='60' r='2'/%3E%3Ccircle cx='180' cy='120' r='2'/%3E%3Ccircle cx='60' cy='180' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* Pola E — kontur miring lereng */
.topo--slope::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%232B2D2E' stroke-width='1' stroke-opacity='0.13'%3E%3Cpath d='M-40 400L400-40'/%3E%3Cpath d='M-40 340L340-40'/%3E%3Cpath d='M-40 280L280-40'/%3E%3Cpath d='M-40 220L220-40'/%3E%3Cpath d='M-40 160L160-40'/%3E%3Cpath d='M20 400L400 20'/%3E%3Cpath d='M80 400L400 80'/%3E%3Cpath d='M140 400L400 140'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
}

/* Pola F — kontur kawah (untuk section gelap) */
.topo--crater::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-opacity='0.16'%3E%3Cpath d='M0 150q75-70 150 0t150 0'/%3E%3Cpath d='M0 120q75-70 150 0t150 0'/%3E%3Cpath d='M0 180q75-70 150 0t150 0'/%3E%3Cpath d='M0 210q75-70 150 0t150 0'/%3E%3Cpath d='M0 90q75-70 150 0t150 0'/%3E%3Cpath d='M0 60q75-70 150 0t150 0'/%3E%3Cpath d='M0 240q75-70 150 0t150 0'/%3E%3Cpath d='M0 270q75-70 150 0t150 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.6;
}

/* Section dengan latar bergantian */
.sec-alt { background: var(--bg-alt); }
.sec-deep {
  background: var(--bg-deep);
  color: rgba(255, 255, 255, 0.86);
}
.sec-deep .sec-title { color: var(--white); }
.sec-deep .sec-desc { color: rgba(255, 255, 255, 0.62); }

/* ==========================================================================
   03. UTILITAS & LAYOUT SHELL
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow {
  width: 100%;
  max-width: var(--maxw-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { padding-block: var(--section-y); }

.grid { display: grid; gap: var(--space-5); }

/* Dua kolom tak sama lebar: grafik elevasi (lebar) + widget cuaca (sempit).
   Dijadikan kelas—bukan inline style—agar responsive.css bisa menimpanya. */
.split-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Anak grid/flex secara bawaan tidak boleh menyusut di bawah lebar
   min-content-nya. Guard berikut membuat seluruh kartu dapat mengecil pada
   layar sangat sempit (foldable tertutup) tanpa memicu scroll horizontal. */
.grid > *,
.split-grid > *,
.philo-grid > *,
.trip-grid > *,
.umkm-grid > *,
.team-grid > *,
.quote-grid > *,
.news-grid > *,
.info-grid > *,
.prog-list > *,
.stat-strip > *,
.elev-pills > *,
.weather-grid > * { min-width: 0; }

.prog-card, .trip-body, .umkm-body, .info-card, .philo-card, .chart-card { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.gold { color: var(--accent); }
.moss { color: var(--brand); }

/* Kaca (glassmorphism) — dipakai navbar, badge hero, widget cuaca */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Garis pemisah bermotif kontur */
.hr-topo {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
  margin-block: var(--space-7);
}

/* ==========================================================================
   04. TOMBOL
   ========================================================================== */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              background var(--dur-fast) var(--ease-soft);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--primary { --btn-bg: var(--brand); box-shadow: var(--sh-glow-moss); }
.btn--primary:hover { box-shadow: 0 14px 34px -8px rgba(74, 124, 89, 0.5); }

.btn--gold {
  --btn-bg: var(--accent);
  --btn-fg: var(--ash-900);
  box-shadow: var(--sh-glow-gold);
}
.btn--gold:hover { box-shadow: 0 14px 34px -8px rgba(244, 162, 97, 0.6); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, 0.10);
  --btn-fg: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(10px);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.18); }

.btn--sm { padding: 9px 18px; font-size: var(--fs-micro); }
.btn--block { width: 100%; }

/* Efek riak (ripple) — span dibuat oleh main.js */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  animation: ripple-out 620ms var(--ease-out) forwards;
}
.btn--gold .ripple,
.btn--ghost .ripple { background: rgba(43, 45, 46, 0.20); }

/* Tautan panah bergerak */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand);
}
.link-arrow i { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover i { transform: translateX(5px); }

/* ==========================================================================
   05. LOADER — kontur gunung menggambar sendiri
   ========================================================================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  gap: var(--space-5);
  background: var(--ash-900);
  transition: opacity 420ms var(--ease-soft), visibility 420ms;
}
#loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: grid; justify-items: center; gap: var(--space-4); }
.loader-mark { width: 130px; height: 78px; overflow: visible; }
.loader-mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-ridge 1.5s var(--ease-out) infinite;
}
.loader-mark path:nth-child(2) { stroke: var(--moss-400); animation-delay: 0.16s; }
.loader-mark path:nth-child(3) { stroke: var(--sky-300); animation-delay: 0.32s; }
.loader-label {
  font-family: var(--font-sub);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.loader-bar {
  width: 160px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 220ms linear;
}

/* --------------------------------------------------------------------------
   PESAWAT MENGORBIT PADA LOADER
   Punggungan Burangrang tetap menggambar sendiri di tengah, sementara sebuah
   pesawat menyusuri lintasan elips di sekelilingnya — mengacu pada identitas
   penerbangan Universitas Nurtanio. Lintasan memakai CSS motion path
   (offset-path) sehingga arah hidung pesawat otomatis mengikuti tikungan.
   -------------------------------------------------------------------------- */
.loader-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 140px;
}
.loader-orbit {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.loader-orbit ellipse {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  animation: loader-orbit-dash 11s linear infinite;
}
.loader-plane {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;                       /* dinyalakan hanya bila motion path didukung */
  color: var(--accent);
  filter: drop-shadow(0 0 7px rgba(244, 162, 97, 0.45));
}
.loader-plane path { fill: currentColor; }

@supports (offset-path: path("M 0 0 L 1 1")) {
  .loader-plane {
    opacity: 1;
    offset-path: path("M 20 70 A 100 46 0 0 1 220 70 A 100 46 0 0 1 20 70");
    offset-rotate: auto;            /* hidung pesawat mengikuti arah lintasan */
    animation: loader-fly 3.2s linear infinite;
  }
}

@keyframes loader-fly {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@keyframes loader-orbit-dash {
  to { stroke-dashoffset: -240; }
}

@media (max-width: 420px) {
  .loader-stage { transform: scale(0.8); }
}

/* ==========================================================================
   06. NAVBAR & DRAWER
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: min(96%, var(--maxw));
  min-height: var(--nav-h);
  padding: 10px 12px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-radius: var(--r-pill);
  background: rgba(22, 24, 26, 0.34);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: top var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-soft),
              padding var(--dur-mid) var(--ease-out);
}
.site-nav.is-scrolled {
  top: 8px;
  padding-block: 7px;
  background: rgba(22, 24, 26, 0.80);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.55);
}
/* Pada halaman dalam (bukan hero gelap), navbar tetap kontras */
.site-nav.is-solid {
  background: rgba(22, 24, 26, 0.88);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-brand img {
  height: 44px;
  width: auto;
  border-radius: var(--r-xs);
  transition: transform var(--dur-mid) var(--ease-back);
}
.nav-brand:hover img { transform: scale(1.07) rotate(-1.5deg); }
.nav-brand-txt {
  display: grid;
  line-height: 1.05;
}
.nav-brand-txt strong {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--white);
}
.nav-brand-txt small {
  font-family: var(--font-sub);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 22px);
}
.nav-menu a {
  position: relative;
  padding: 6px 2px;
  font-family: var(--font-ui);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav-menu a:hover { color: var(--white); }
.nav-menu a:hover::after,
.nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav-menu a[aria-current="page"] { color: var(--white); }

.nav-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Tombol ikon bulat (tema, audio) */
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-back);
}
.icon-btn:hover {
  background: var(--accent);
  color: var(--ash-900);
  transform: scale(1.08);
}
.icon-btn.is-active {
  background: var(--accent);
  color: var(--ash-900);
  border-color: transparent;
}
/* Indikator audio yang berdenyut saat aktif */
.icon-btn.is-active .bi-volume-up { animation: pulse-soft 1.8s ease-in-out infinite; }

.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-burger span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 2.6px 0;
  border-radius: 2px;
  background: var(--white);
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }

/* Drawer mobile */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 380px);
  z-index: var(--z-drawer);
  padding: calc(var(--nav-h) + 34px) var(--space-6) var(--space-6);
  background: var(--ash-900);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(100%);
  transition: transform 520ms var(--ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  padding: 14px 4px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.drawer a i { font-size: 15px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: var(--dur-fast); }
.drawer a:hover { color: var(--white); padding-left: 12px; }
.drawer a:hover i { opacity: 1; transform: translateX(0); }
.drawer-foot {
  margin-top: auto;
  padding-top: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.36);
  line-height: 1.7;
}
.drawer-social { display: flex; gap: 10px; margin-bottom: var(--space-4); }
.drawer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  font-size: 16px;
  padding: 0;
}
.scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(10, 12, 13, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid), visibility var(--dur-mid);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* Bilah progres baca di paling atas */
.read-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: calc(var(--z-nav) + 1);
  background: linear-gradient(90deg, var(--moss-600), var(--accent));
  transition: width 90ms linear;
}

/* ==========================================================================
   07. HERO — tiga lapis gunung, kabut, burung, awan, sinar matahari
   Struktur lapisan (belakang → depan):
     .hero-sky      langit gradasi fajar
     .hero-sun      bola matahari + sinar
     .hero-clouds   awan bergerak
     .hero-l1       kabut / pegunungan terjauh   (parallax paling lambat)
     .hero-l2       gunung hijau                 (parallax sedang)
     .hero-l3       siluet hitam                 (parallax paling cepat)
     .hero-mist     lapisan kabut bergulir
     .hero-birds    kawanan burung
     .hero-body     teks
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ash-900);
  isolation: isolate;
}
.hero-layer {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  will-change: transform;
}

/* Panggung latar: membungkus sky→veil agar bisa "zoom" perlahan (ken-burns)
   tanpa mengganggu transform parallax per-lapisan dari GSAP. */
.hero-scene {
  position: absolute;
  inset: 0;
  transform-origin: 50% 60%;
  animation: hero-kenburns 42s ease-in-out infinite alternate;
}

.hero-sky {
  inset: 0;
  background: linear-gradient(180deg, #16181A 0%, #2B2D2E 26%, #43708F 58%, #6A9FC0 76%, #F9C79A 96%);
}
[data-theme="dark"] .hero-sky {
  background: linear-gradient(180deg, #05070A 0%, #101820 30%, #1E3548 62%, #2F4E63 82%, #7A5638 98%);
}

/* Matahari terbit + sinar */
.hero-sun {
  top: 46%;
  left: 50%;
  width: clamp(180px, 30vw, 420px);
  height: clamp(180px, 30vw, 420px);
  right: auto;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 214, 0.95) 0%, rgba(244, 162, 97, 0.75) 32%, rgba(244, 162, 97, 0.16) 62%, transparent 72%);
  filter: blur(2px);
  animation: sun-breathe 9s ease-in-out infinite;
}
.hero-rays {
  top: 46%;
  left: 50%;
  width: 190vmax;
  height: 190vmax;
  right: auto;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
      rgba(255, 224, 178, 0.14) 0deg, transparent 9deg,
      rgba(255, 224, 178, 0.11) 22deg, transparent 32deg,
      rgba(255, 224, 178, 0.15) 48deg, transparent 60deg,
      rgba(255, 224, 178, 0.10) 78deg, transparent 92deg,
      rgba(255, 224, 178, 0.14) 112deg, transparent 126deg,
      rgba(255, 224, 178, 0.09) 150deg, transparent 168deg,
      rgba(255, 224, 178, 0.13) 196deg, transparent 212deg,
      rgba(255, 224, 178, 0.10) 238deg, transparent 256deg,
      rgba(255, 224, 178, 0.14) 288deg, transparent 306deg,
      rgba(255, 224, 178, 0.09) 332deg, transparent 352deg);
  mix-blend-mode: screen;
  animation: rays-turn 90s linear infinite;
  opacity: 0.95;
}

/* Berkas cahaya lebar yang menyapu perlahan dari balik puncak — dramatisasi
   tambahan di atas hero-rays, seolah matahari menembus kabut pegunungan. */
.hero-shafts {
  top: 40%;
  left: 50%;
  width: 130vmax;
  height: 130vmax;
  right: auto;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 200deg at 50% 50%,
      transparent 0deg,
      rgba(255, 236, 200, 0.22) 6deg,
      transparent 16deg,
      transparent 40deg,
      rgba(255, 236, 200, 0.16) 48deg,
      transparent 60deg,
      transparent 300deg,
      rgba(255, 236, 200, 0.20) 308deg,
      transparent 320deg);
  mix-blend-mode: screen;
  animation: shaft-sweep 16s ease-in-out infinite;
}
[data-theme="dark"] .hero-shafts { opacity: 0.5; }

/* Awan — dua pita bergerak dengan kecepatan berbeda */
.hero-clouds {
  top: 8%;
  height: 46%;
  background-repeat: repeat-x;
  background-size: 1400px 100%;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='300' viewBox='0 0 1400 300'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.30'%3E%3Cellipse cx='180' cy='120' rx='150' ry='34'/%3E%3Cellipse cx='300' cy='105' rx='110' ry='26'/%3E%3Cellipse cx='700' cy='170' rx='190' ry='30'/%3E%3Cellipse cx='830' cy='150' rx='120' ry='24'/%3E%3Cellipse cx='1180' cy='95' rx='165' ry='28'/%3E%3C/g%3E%3C/svg%3E");
  animation: cloud-drift-a 110s linear infinite;
}
.hero-clouds--far {
  top: 16%;
  height: 40%;
  opacity: 0.26;
  background-size: 1000px 100%;
  animation: cloud-drift-b 170s linear infinite;
}

/* Lapisan gunung: gambar SVG eksternal agar mudah diganti ilustrator */
.hero-l1, .hero-l2, .hero-l3 {
  bottom: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}
.hero-l1 { height: 62%; background-image: url("../assets/svg/mountain-back.svg");  opacity: 0.75; }
.hero-l2 { height: 50%; background-image: url("../assets/svg/mountain-mid.svg"); }
.hero-l3 { height: 34%; background-image: url("../assets/svg/mountain-front.svg"); }

/* Bayangan awan yang melintas di badan gunung — dua blob lonjong lembut
   yang bergerak dari kiri ke kanan dengan tempo berbeda. */
.hero-cloud-shadow {
  bottom: 0;
  height: 50%;
  background:
    radial-gradient(ellipse 26% 60% at 20% 55%, rgba(10, 18, 14, 0.4), transparent 70%),
    radial-gradient(ellipse 18% 45% at 55% 40%, rgba(10, 18, 14, 0.3), transparent 70%);
  mix-blend-mode: multiply;
  animation: cloud-shadow-drift 38s ease-in-out infinite;
}
[data-theme="dark"] .hero-cloud-shadow { mix-blend-mode: soft-light; opacity: 0.6; }

/* Kabut bergulir di antara lapisan gunung */
.hero-mist {
  bottom: 0;
  height: 58%;
  background-image: url("../assets/svg/mist.svg");
  background-repeat: repeat-x;
  background-size: 1600px 100%;
  opacity: 0.55;
  animation: mist-roll 68s linear infinite;
  mix-blend-mode: screen;
}
.hero-mist--low {
  height: 30%;
  opacity: 0.42;
  background-size: 1200px 100%;
  animation: mist-roll-rev 92s linear infinite;
}

/* Kawanan burung */
.hero-birds { top: 22%; height: 30%; }
.bird {
  position: absolute;
  width: 26px;
  height: 12px;
  opacity: 0.65;
}
.bird svg { width: 100%; height: 100%; }
.bird path { stroke: rgba(22, 24, 26, 0.75); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.bird--1 { top: 18%; animation: bird-fly-1 26s linear infinite; }
.bird--2 { top: 34%; transform: scale(0.72); animation: bird-fly-2 34s linear infinite 3s; }
.bird--3 { top: 8%;  transform: scale(0.55); animation: bird-fly-1 42s linear infinite 8s; }
.bird--4 { top: 46%; transform: scale(0.85); animation: bird-fly-2 30s linear infinite 14s; }
.bird svg path { animation: wing-flap 0.62s ease-in-out infinite; transform-origin: center; }

/* Bintang & bulan — hanya terlihat di mode gelap */
.hero-stars {
  top: 0;
  height: 55%;
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}
[data-theme="dark"] .hero-stars { opacity: 1; }
.star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 4px 1px rgba(255,255,255,.65);
  animation: star-twinkle var(--star-dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}
.star--big { width: 3px; height: 3px; box-shadow: 0 0 6px 2px rgba(255,255,255,.75); }

.hero-moon {
  top: 12%;
  right: 12%;
  left: auto;
  width: clamp(46px, 6vw, 84px);
  height: clamp(46px, 6vw, 84px);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 34% 32%, rgba(0,0,0,.16) 0 12%, transparent 13%),
    radial-gradient(circle at 60% 60%, rgba(0,0,0,.12) 0 9%, transparent 10%),
    radial-gradient(circle, #F4F1E8 0%, #DCD8C8 70%, #B9B69E 100%);
  box-shadow: 0 0 34px 10px rgba(244, 241, 232, 0.35);
  transition: opacity 1200ms var(--ease-soft);
}
[data-theme="dark"] .hero-moon { opacity: 1; }

/* Kunang-kunang — dibuat dinamis oleh js/animation.js (heroFireflies) */
.hero-fireflies { inset: 0; }
.firefly {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4C2 0%, rgba(255, 224, 130, 0.7) 45%, transparent 75%);
  box-shadow: 0 0 8px 2px rgba(255, 214, 110, 0.55);
  animation: firefly-glow 2.4s ease-in-out infinite;
}

/* Tirai kabut pembuka — dua panel yang tersibak saat halaman dimuat */
.hero-curtain-l, .hero-curtain-r {
  position: absolute;
  top: 0; bottom: 0;
  width: 52%;
  z-index: 3;
  background: linear-gradient(180deg, #E9EEF0 0%, #C9D4D6 45%, #A9B7B8 100%);
}
[data-theme="dark"] .hero-curtain-l, [data-theme="dark"] .hero-curtain-r {
  background: linear-gradient(180deg, #1E2428 0%, #12171A 60%, #0A0D0F 100%);
}
.hero-curtain-l { left: 0; transform: translateX(-102%); }
.hero-curtain-r { right: 0; transform: translateX(102%); }

/* Veil gelap agar teks tetap terbaca */
.hero-veil { inset: 0; background: var(--grad-hero-veil); }

/* Isi hero */
.hero-body {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 60px) var(--gutter) clamp(70px, 12vh, 130px);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  margin-bottom: var(--space-5);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-ui);
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  max-width: 100%;
  line-height: 1.6;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.hero-title .ln { display: block; overflow: hidden; }
/* Baris judul beraksen. Warna solid dipakai sebagai fallback lebih dulu,
   lalu ditimpa isian gradien hanya bila peramban mendukung
   background-clip: text. Elemen ini diberi kelas .no-split di HTML agar
   tidak dipecah per karakter oleh js/animation.js. */
.hero-title .kaki { color: var(--accent); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title .kaki {
    color: transparent;
    background: var(--grad-sunrise);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.hero-sub {
  margin-top: var(--space-4);
  font-family: var(--font-sub);
  font-size: clamp(0.95rem, 2vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.hero-sub span { color: var(--accent); }
.hero-lede {
  margin-top: var(--space-5);
  max-width: 54ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.74);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Panel data hero — koordinat & elevasi, gaya kartu survei */
.hero-facts {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(70px, 12vh, 130px);
  z-index: 4;
  display: grid;
  gap: 2px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  min-width: 220px;
}
.hero-facts .lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero-facts .val {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.hero-facts .sub {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Indikator gulir */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.scroll-cue .rail {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
}
.scroll-cue .rail::after {
  content: "";
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--accent);
  animation: cue-slide 2.1s var(--ease-soft) infinite;
}

/* Hero ringkas untuk halaman dalam */
.hero--page {
  min-height: 62svh;
  align-items: center;
}
.hero--page .hero-body { padding-block: calc(var(--nav-h) + 70px) 70px; }
.hero--page .hero-title { font-size: var(--fs-display-l); }
.breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb-nav a:hover { color: var(--accent); }
.breadcrumb-nav i { font-size: 9px; opacity: 0.5; }

/* ==========================================================================
   08. JUDUL SECTION
   ========================================================================== */
.sec-head {
  max-width: 780px;
  margin-bottom: var(--space-7);
}
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  font-family: var(--font-sub);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.sec-deep .eyebrow { color: var(--gold-300); }

.sec-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
  text-wrap: balance;
}
.sec-title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.86em;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.sec-desc {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 62ch;
}
.sec-head--center .sec-desc { margin-inline: auto; }

/* ==========================================================================
   09. ABOUT & FILOSOFI SUNDA
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
/* --------------------------------------------------------------------------
   FIGUR PROFIL DESA — "pigura lembar survei"
   Gambar dirender pada rasio aslinya (height:auto, tanpa aspect-ratio paksa)
   sehingga tidak pernah menyisakan bidang kosong di atas/bawah, berapa pun
   perbandingan sisi berkasnya. Kesan elegan dibangun oleh mat bergradasi,
   garis emas tipis, empat tanda sudut, dan kapsi bergaya keterangan peta.
   -------------------------------------------------------------------------- */
.about-figure {
  position: relative;
  padding: clamp(13px, 1.9vw, 20px);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--surface) 0%, var(--surface-2) 56%, var(--moss-050) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--sh-3);
  transition: transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out);
}
[data-theme="dark"] .about-figure {
  background: linear-gradient(158deg, #202526 0%, #1A1E1F 58%, #18211D 100%);
}
.about-figure:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -12px rgba(22, 24, 26, 0.18),
              0 40px 80px -30px rgba(36, 64, 46, 0.28);
}
[data-theme="dark"] .about-figure:hover {
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6),
              0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

/* Garis emas tipis — kesan pigura di dalam mat */
.about-figure::before {
  content: "";
  position: absolute;
  inset: clamp(6px, 0.9vw, 10px);
  border: 1px solid rgba(244, 162, 97, 0.40);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
  transition: border-color var(--dur-mid) var(--ease-out);
}
.about-figure:hover::before { border-color: rgba(244, 162, 97, 0.72); }

/* Empat tanda sudut bergaya lembar ukur */
.fig-tick {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--accent);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.about-figure:hover .fig-tick { opacity: 1; }
.fig-tick:nth-of-type(1) {
  top: clamp(6px, 0.9vw, 10px); left: clamp(6px, 0.9vw, 10px);
  border-top-width: 2px; border-left-width: 2px;
  border-top-left-radius: 7px;
}
.fig-tick:nth-of-type(2) {
  top: clamp(6px, 0.9vw, 10px); right: clamp(6px, 0.9vw, 10px);
  border-top-width: 2px; border-right-width: 2px;
  border-top-right-radius: 7px;
}
.fig-tick:nth-of-type(3) {
  bottom: clamp(6px, 0.9vw, 10px); left: clamp(6px, 0.9vw, 10px);
  border-bottom-width: 2px; border-left-width: 2px;
  border-bottom-left-radius: 7px;
}
.fig-tick:nth-of-type(4) {
  bottom: clamp(6px, 0.9vw, 10px); right: clamp(6px, 0.9vw, 10px);
  border-bottom-width: 2px; border-right-width: 2px;
  border-bottom-right-radius: 7px;
}

/* Bingkai dalam — satu-satunya lapisan yang memotong gambar */
.fig-frame {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 16px);
  background: var(--ash-100);
  /* Hanya bayangan dalam: elemen ini dianimasikan dengan clip-path,
     sehingga bayangan luar akan ikut terpotong. */
  box-shadow: inset 0 0 0 1px rgba(22, 24, 26, 0.07);
}
[data-theme="dark"] .fig-frame {
  background: #15191A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.about-figure img {
  display: block;
  width: 100%;
  height: auto;          /* rasio asli — tidak ada ruang kosong */
  /* Sengaja tanpa aspect-ratio: atribut width/height pada <img> hanya
     dipakai peramban untuk memesan ruang sebelum gambar termuat, lalu
     digantikan rasio asli berkas begitu gambar selesai diunduh. */
  transition: transform 1100ms var(--ease-out);
}
.about-figure:hover img { transform: scale(1.035); }

/* Sapuan cahaya halus saat kursor melintas */
.fig-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 1150ms var(--ease-out);
  pointer-events: none;
}
.about-figure:hover .fig-frame::after { transform: translateX(130%); }

/* Kapsi bergaya keterangan peta */
.fig-caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: 0 4px;
}
.fig-caption .ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--moss-050);
  color: var(--brand);
  font-size: 15px;
}
[data-theme="dark"] .fig-caption .ic { background: rgba(111, 163, 125, 0.14); }
.fig-caption .txt { display: grid; min-width: 0; }
.fig-caption .txt strong {
  font-family: var(--font-sub);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.fig-caption .txt span {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.fig-caption .rule {
  flex: 1 1 auto;
  min-width: 10px;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.fig-caption .meta {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce) {
  .about-figure,
  .about-figure img,
  .fig-frame::after { transition: none; }
  .about-figure:hover { transform: none; }
  .about-figure:hover img { transform: none; }
  .about-figure:hover .fig-frame::after { transform: translateX(-130%); }
}
html.reduce-motion .about-figure:hover { transform: none; }
html.reduce-motion .about-figure:hover img { transform: none; }
html.reduce-motion .about-figure:hover .fig-frame::after { transform: translateX(-130%); }
.about-copy h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.about-copy p + p { margin-top: var(--space-4); }
.about-copy p { color: var(--text-muted); }

/* Kutipan naratif bergaya majalah */
.pull-quote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.6;
  color: var(--text-strong);
}
.pull-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Kartu filosofi Sunda — empat pilar */
.philo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.philo-card {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-fast);
}
.philo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(150deg, rgba(74, 124, 89, 0.10), transparent 60%);
  transition: opacity var(--dur-mid) var(--ease-soft);
}
.philo-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: var(--moss-200);
}
.philo-card:hover::before { opacity: 1; }
.philo-card > * { position: relative; }
.philo-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: var(--space-4);
  border-radius: 14px;
  background: var(--moss-050);
  color: var(--brand);
  font-size: 21px;
}
[data-theme="dark"] .philo-ico { background: rgba(111, 163, 125, 0.14); }
.philo-card h4 {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.philo-card .sunda {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--accent);
  margin-bottom: 8px;
}
.philo-card p { font-size: var(--fs-small); color: var(--text-muted); }

/* ==========================================================================
   10. STATISTIK / COUNTER
   ========================================================================== */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5) / -2);
  top: 10%;
  height: 80%;
  width: 1px;
  background: var(--border);
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--brand);
}
.stat .num .unit { font-size: 0.5em; color: var(--accent); }
.stat .lbl {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sec-deep .stat-strip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255,255,255,0.10); }
.sec-deep .stat .num { color: var(--white); }
.sec-deep .stat .lbl { color: rgba(255, 255, 255, 0.55); }
.sec-deep .stat + .stat::before { background: rgba(255,255,255,0.12); }

/* ==========================================================================
   11. KARTU WISATA + SLIDER GALERI
   ========================================================================== */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: var(--space-5);
}
.trip-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.trip-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); }

/* Slider di kepala kartu */
.trip-slider {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--ash-100);
}
.trip-slides {
  display: flex;
  height: 100%;
  transition: transform 620ms var(--ease-out);
}
.trip-slides img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
.trip-card:hover .trip-slides img { transform: none; }
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(22, 24, 26, 0.5);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 13px;
  opacity: 0;
  transition: opacity var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.trip-slider:hover .slider-btn,
.slider-btn:focus-visible { opacity: 1; }
.slider-btn:hover { background: var(--accent); color: var(--ash-900); }
.slider-btn--prev { left: 10px; }
.slider-btn--next { right: 10px; }
.slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.slider-dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background var(--dur-fast), width var(--dur-fast);
}
.slider-dots button.is-active { background: var(--accent); width: 20px; border-radius: var(--r-pill); }

/* Badge kesulitan & label */
.trip-badges {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--glass-bg-dark);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
}
.chip--gold { background: var(--accent); color: var(--ash-900); border-color: transparent; }
.chip--moss { background: var(--brand); color: var(--white); border-color: transparent; }
.chip--easy { background: rgba(76, 175, 80, 0.92); color: #0B2410; border-color: transparent; }
.chip--medium { background: rgba(244, 162, 97, 0.94); color: #3A2208; border-color: transparent; }
.chip--hard { background: rgba(200, 120, 59, 0.95); color: #FFF; border-color: transparent; }

.trip-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}
.trip-body h3 {
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.trip-addr {
  display: flex;
  gap: 8px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  line-height: 1.55;
}
.trip-addr i { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.stars {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.stars .s { color: var(--accent); letter-spacing: 1px; font-size: 13px; }
.trip-desc { font-size: var(--fs-small); color: var(--text-muted); }

/* Baris data trekking — kisi 2×2 bergaya lembar survei */
.trip-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: auto;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.spec {
  padding: 10px 12px;
  background: var(--surface-2);
}
.spec .k {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.spec .v {
  font-family: var(--font-sub);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.35;
}

/* ==========================================================================
   12. KARTU UMKM + BADGE KETINGGIAN
   ========================================================================== */
.umkm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: var(--space-5);
}
.umkm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.umkm-card:hover { transform: translateY(-7px); box-shadow: var(--sh-3); }
.umkm-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ash-100);
}
.umkm-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 760ms var(--ease-out), filter var(--dur-mid);
}
.umkm-card:hover .umkm-thumb img { transform: scale(1.07); }

/* Badge ketinggian mdpl — penanda asal komoditas */
.mdpl {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-dark);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.mdpl b {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.03em;
}
.mdpl span {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.umkm-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-5);
  flex: 1;
}
.umkm-body h3 {
  font-family: var(--font-sub);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.3;
}
.price {
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 0.02em;
  color: var(--brand);
}
/* Data agronomi: jenis tanah & potensi hasil bumi */
.agro { display: grid; gap: 6px; }
.agro-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.agro-row i { color: var(--brand); margin-top: 2px; flex-shrink: 0; font-size: 12px; }
.agro-row b { color: var(--text-strong); font-weight: 600; }

.btn-wa {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: var(--moss-050);
  color: var(--moss-700);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
[data-theme="dark"] .btn-wa { background: rgba(111, 163, 125, 0.14); color: var(--moss-400); }
.btn-wa:hover { background: var(--brand); color: var(--white); transform: translateY(-2px); }

/* Direktori usaha lokal — data nyata dari Google Maps */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
}
.biz-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
  overflow: hidden;
}
.biz-thumb {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 4px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ash-100);
}
.biz-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 760ms var(--ease-out);
}
.biz-card:hover .biz-thumb img { transform: scale(1.06); }
.biz-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.biz-card h3 {
  font-family: var(--font-sub);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-strong);
}
.biz-kat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.biz-kat i { color: var(--brand); }
.biz-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.biz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.biz-btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.biz-btn--wa {
  background: var(--moss-050);
  border-color: transparent;
  color: var(--moss-700);
}
[data-theme="dark"] .biz-btn--wa { background: rgba(111, 163, 125, 0.14); color: var(--moss-400); }
.biz-btn--wa:hover { background: var(--brand); color: var(--white); }

/* ==========================================================================
   MARKETPLACE UMKM — toolbar pencarian/filter + kartu usaha premium
   ========================================================================== */
.mkt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.mkt-search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.mkt-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(74,124,89,.15); }
.mkt-search i { color: var(--text-faint); font-size: 15px; flex-shrink: 0; }
.mkt-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-strong);
  outline: none;
}
.mkt-search input::placeholder { color: var(--text-faint); }

.mkt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.mkt-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ash-100);
  font-size: 10px;
  color: var(--text-faint);
}
.mkt-chip:hover { border-color: var(--brand); color: var(--brand); }
.mkt-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}
.mkt-chip.is-active span { background: rgba(255,255,255,.25); color: var(--white); }

.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-5);
}
.mkt-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.mkt-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }
.mkt-card[hidden] { display: none; }

.mkt-thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ash-100); }
.mkt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 760ms var(--ease-out), opacity 260ms var(--ease-out); }
.mkt-thumb img.is-fading { opacity: 0; }
.mkt-card:hover .mkt-thumb img { transform: scale(1.08); }
.mkt-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
}
.mkt-badge i { color: var(--accent); }

.mkt-thumb-extra {
  position: absolute;
  right: 10px; bottom: 10px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.mkt-thumb-extra a {
  display: block;
  width: 38px; height: 38px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: var(--sh-2);
  transition: transform var(--dur-mid) var(--ease-out);
}
.mkt-thumb-extra a:hover, .mkt-thumb-extra a:focus-visible { transform: translateY(-3px) scale(1.06); }
.mkt-thumb-extra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-thumb-extra .mkt-thumb-more {
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
}

.mkt-body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-5); flex: 1; }
.mkt-body h3 {
  font-family: var(--font-sub);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-strong);
}
.mkt-desc { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.mkt-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-faint);
}
.mkt-loc i { color: var(--brand); }

.mkt-menu-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 10px);
  background: var(--ash-100);
  border: 1px dashed var(--border-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
[data-theme="dark"] .mkt-menu-note { background: rgba(255,255,255,.04); }
.mkt-menu-note i { color: var(--accent); margin-top: 1px; flex-shrink: 0; }

.mkt-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.mkt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.mkt-btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.mkt-btn--wa { background: var(--moss-050); border-color: transparent; color: var(--moss-700); }
[data-theme="dark"] .mkt-btn--wa { background: rgba(111,163,125,.14); color: var(--moss-400); }
.mkt-btn--wa:hover { background: var(--brand); color: var(--white); }

.mkt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--text-faint);
}
.mkt-empty i { font-size: 30px; }
.mkt-empty p { font-family: var(--font-body); font-size: var(--fs-small); max-width: 320px; }

/* Legenda ketinggian di atas kisi UMKM */
.mdpl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.mdpl-legend .item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.mdpl-legend .swatch {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sw-1300 { background: var(--light-green); }
.sw-1400 { background: var(--moss-600); }
.sw-1600 { background: var(--sky-500); }

/* ==========================================================================
   13. TABEL DATA IKM
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}
.data-table th,
.data-table td {
  padding: 13px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.data-table th:last-child,
.data-table td:last-child { border-right: 0; }
.data-table thead th {
  background: var(--moss-900);
  color: var(--white);
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table thead tr:nth-child(2) th { background: var(--moss-700); top: 44px; }
.data-table tbody td:first-child,
.data-table tfoot td:first-child { text-align: left; font-weight: 600; color: var(--text-strong); }
.data-table tbody tr:hover td { background: var(--moss-050); }
[data-theme="dark"] .data-table tbody tr:hover td { background: rgba(111, 163, 125, 0.09); }
.data-table tfoot td {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-strong);
}
.data-table .num-cell {
  font-family: var(--font-sub);
  font-size: 16px;
  font-weight: 500;
  color: var(--brand);
}
.table-note {
  margin-top: var(--space-4);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.table-note i { color: var(--accent); margin-top: 2px; }

/* ==========================================================================
   14. TIMELINE PROGRAM + PROGRESS INDICATOR
   ========================================================================== */
.prog-wrap { position: relative; }

/* Rel vertikal dengan indikator progres yang terisi saat digulir */
.prog-rail {
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}
.prog-rail span {
  display: block;
  width: 100%;
  height: 0%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--moss-600), var(--accent));
  transition: height 140ms linear;
}
.prog-list { display: grid; gap: var(--space-6); }
.prog-item {
  position: relative;
  padding-left: 64px;
}
.prog-node {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-faint);
  transition: background var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid),
              color var(--dur-mid),
              transform var(--dur-mid) var(--ease-back);
  z-index: 1;
}
.prog-item.is-active .prog-node {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
  transform: scale(1.07);
  box-shadow: var(--sh-glow-moss);
}
.prog-card {
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-fast);
}
.prog-item.is-active .prog-card { border-color: var(--moss-200); box-shadow: var(--sh-2); }
.prog-card:hover { transform: translateX(5px); box-shadow: var(--sh-2); }
.prog-step {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--gold-100);
  color: var(--gold-700);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="dark"] .prog-step { background: rgba(244, 162, 97, 0.16); color: var(--gold-300); }
.prog-card h3 {
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.prog-card p { font-size: var(--fs-small); color: var(--text-muted); }
.prog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-strong);
}
.prog-meta .m {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.prog-meta i { color: var(--brand); }

/* Bilah persentase capaian */
.bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
  margin-top: var(--space-4);
}
.bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--moss-600), var(--light-green));
  transition: width 1.1s var(--ease-out);
}
.bar-label {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

/* ==========================================================================
   15. PETA TOPOGRAFI (LEAFLET)
   ========================================================================== */
.map-shell {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-2);
  background: var(--surface-2);
}
#topoMap {
  width: 100%;
  height: clamp(380px, 58vh, 620px);
  z-index: 1;
  background: var(--sky-100);
}
/* Marker kustom berbentuk pin kontur */
.pin {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2px solid var(--white);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.45);
}
.pin i { transform: rotate(45deg); color: var(--white); font-size: 16px; }
.pin--desa { background: var(--moss-600); }
.pin--base { background: var(--sunrise-gold); }
.pin--base i { color: var(--ash-900); }
.pin--bukit { background: var(--sky-500); }
.pin--danau { background: var(--forest); }
.pin--puncak { background: var(--volcanic-ash); }
.pin-pulse {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid currentColor;
  animation: pin-ring 2.4s var(--ease-soft) infinite;
  opacity: 0;
}

/* Popup Leaflet bergaya situs */
.leaflet-popup-content-wrapper {
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--sh-3) !important;
  border: 1px solid var(--border);
}
.leaflet-popup-tip { background: var(--surface) !important; }
.leaflet-popup-content { margin: 14px 16px !important; font-family: var(--font-body); }
.map-pop h4 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.map-pop .elev {
  font-family: var(--font-sub);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.map-pop p { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 6px; }
.map-pop a { display: inline-block; margin-top: 8px; font-size: var(--fs-micro); font-weight: 600; color: var(--brand); }

/* Legenda peta */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.map-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.map-legend .bullet {
  width: 13px; height: 13px;
  border-radius: 50% 50% 50% 3px;
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.map-hint {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 400;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  pointer-events: none;
}

/* ==========================================================================
   16. GRAFIK ELEVASI (CHART.JS)
   ========================================================================== */
.chart-card {
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.chart-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.chart-head p { font-size: var(--fs-micro); color: var(--text-muted); }
.chart-box { position: relative; height: clamp(260px, 42vh, 420px); }

/* Tooltip modern Chart.js (dirender oleh js/chart.js) */
.ct-tip {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  min-width: 148px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--ash-900);
  color: var(--white);
  box-shadow: var(--sh-4);
  opacity: 0;
  transform: translate(-50%, -114%) scale(0.96);
  transition: opacity 160ms var(--ease-soft), transform 220ms var(--ease-out);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.ct-tip.is-on { opacity: 1; transform: translate(-50%, -120%) scale(1); }
.ct-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ash-900);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ct-tip .t-name {
  font-family: var(--font-sub);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.ct-tip .t-val {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.ct-tip .t-val small { font-size: 11px; opacity: 0.65; margin-left: 3px; }
.ct-tip .t-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.5;
}

/* Kartu ringkas titik elevasi */
.elev-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.elev-pill {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.elev-pill:nth-child(2) { border-left-color: var(--light-green); }
.elev-pill:nth-child(3) { border-left-color: var(--accent-cool); }
.elev-pill:nth-child(4) { border-left-color: var(--accent); }
.elev-pill .v {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}
.elev-pill .v small { font-size: 11px; color: var(--text-faint); margin-left: 3px; }
.elev-pill .k {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   17. WIDGET CUACA
   Data langsung dari Open-Meteo (tanpa kunci API), diambil oleh js/weather.js.
   Titik ukur: -6.7824, 107.5209 (Desa Cipada), zona waktu Asia/Jakarta.
   ========================================================================== */
.weather-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #43708F 0%, #6A9FC0 52%, #A3C5DA 100%);
  color: var(--white);
  box-shadow: var(--sh-3);
  isolation: isolate;
}
[data-theme="dark"] .weather-card {
  background: linear-gradient(150deg, #1B2E3C 0%, #2F4E63 55%, #43708F 100%);
}
/* Awan hias di dalam kartu */
.weather-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.22'%3E%3Cellipse cx='120' cy='70' rx='110' ry='26'/%3E%3Cellipse cx='430' cy='140' rx='140' ry='30'/%3E%3Cellipse cx='260' cy='230' rx='120' ry='24'/%3E%3C/g%3E%3C/svg%3E") repeat-x;
  animation: cloud-drift-a 90s linear infinite;
}
.weather-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.weather-place {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.78;
}
.weather-temp {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.weather-temp sup { font-size: 0.28em; margin-top: 0.4em; }
.weather-cond {
  font-family: var(--font-sub);
  font-size: var(--fs-small);
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Ikon cuaca animasi (SVG inline, digerakkan CSS) */
.wx-ico { width: 84px; height: 84px; flex-shrink: 0; }
.wx-sun-core { animation: spin-slow 26s linear infinite; transform-origin: 32px 32px; }
.wx-cloud-a { animation: float-x 7s ease-in-out infinite; }
.wx-cloud-b { animation: float-x 9s ease-in-out infinite reverse; }
.wx-drop { animation: drop-fall 1.5s linear infinite; }
.wx-drop:nth-of-type(2) { animation-delay: 0.5s; }
.wx-drop:nth-of-type(3) { animation-delay: 1s; }

.weather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 45%), 1fr));
  gap: 1px;
  margin-top: var(--space-6);
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  overflow: hidden;
}
.wx-cell {
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  transition: background var(--dur-fast);
}
.wx-cell:hover { background: rgba(255, 255, 255, 0.22); }
.wx-cell .k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.76;
}
.wx-cell .v {
  margin-top: 5px;
  font-family: var(--font-sub);
  font-size: 19px;
  font-weight: 500;
}
.wx-cell .v small { font-size: 11px; opacity: 0.7; }
.weather-foot {
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: 10px;
  opacity: 0.62;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Matahari terbit → terbenam sebagai busur */
.sun-arc { margin-top: var(--space-5); }
.sun-arc svg { width: 100%; height: 74px; overflow: visible; }
.sun-arc .track { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 2; stroke-dasharray: 4 5; }
.sun-arc .done { fill: none; stroke: var(--gold-300); stroke-width: 2.6; stroke-linecap: round; }
.sun-arc .dot { fill: #FFF3DE; filter: drop-shadow(0 0 7px rgba(255, 224, 178, 0.95)); }
.sun-arc-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  opacity: 0.78;
}

/* ==========================================================================
   18. TIMELINE SEJARAH "JEJAK BURANGRANG"
   Desktop  : horizontal, digulir ke samping
   Mobile   : vertikal (lihat responsive.css)
   ========================================================================== */
.tl {
  position: relative;
  margin-top: var(--space-6);
}
.tl-track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 4px var(--space-6);
  scrollbar-width: thin;
}
.tl-track::-webkit-scrollbar { height: 6px; }
.tl-track::-webkit-scrollbar-thumb { background: var(--moss-400); border-radius: var(--r-pill); border: 0; }

.tl-item {
  position: relative;
  flex: 0 0 clamp(250px, 30vw, 330px);
  scroll-snap-align: center;
  padding-top: 54px;
}
/* Garis waktu horizontal */
.tl-item::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0; right: 0;
  height: 2px;
  background: var(--border-strong);
}
.tl-item:first-child::before { left: 50%; }
.tl-item:last-child::before { right: 50%; }
.tl-dot {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--moss-400);
  z-index: 1;
  transition: background var(--dur-mid), border-color var(--dur-mid), transform var(--dur-mid) var(--ease-back);
}
.tl-item:hover .tl-dot,
.tl-item.is-on .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(-50%) scale(1.3);
}
.tl-era {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.tl-card {
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  height: 100%;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.tl-item:hover .tl-card { transform: translateY(-6px); box-shadow: var(--sh-2); }
.tl-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: var(--space-3);
  background: var(--moss-050);
  color: var(--brand);
  font-size: 18px;
}
[data-theme="dark"] .tl-ico { background: rgba(111, 163, 125, 0.14); }
.tl-card h4 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.tl-card p { font-size: var(--fs-small); color: var(--text-muted); }
.tl-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.tl-nav { display: flex; gap: 8px; }
.tl-nav button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  background: var(--surface);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.tl-nav button:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.tl-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ==========================================================================
   19. KUIS
   ========================================================================== */
.quiz {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-2);
}
.quiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.quiz-count {
  font-family: var(--font-sub);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.quiz-count b { color: var(--brand); font-size: 15px; }
.quiz-bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.quiz-bar span {
  display: block;
  height: 100%;
  width: 10%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--moss-600), var(--accent));
  transition: width 420ms var(--ease-out);
}
.quiz-q {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.4vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.quiz-opts { display: grid; gap: 10px; }
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  text-align: left;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.opt:hover:not(:disabled) { border-color: var(--moss-400); transform: translateX(4px); }
.opt .key {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.opt.is-right {
  border-color: var(--light-green);
  background: rgba(76, 175, 80, 0.10);
}
.opt.is-right .key { background: var(--light-green); color: var(--white); border-color: transparent; }
.opt.is-wrong {
  border-color: #C8783B;
  background: rgba(200, 120, 59, 0.10);
}
.opt.is-wrong .key { background: #C8783B; color: var(--white); border-color: transparent; }
.opt:disabled { cursor: default; }

.quiz-feedback {
  margin-top: var(--space-4);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--moss-050);
  border-left: 3px solid var(--brand);
  font-size: var(--fs-small);
  color: var(--text-muted);
  display: none;
}
[data-theme="dark"] .quiz-feedback { background: rgba(111, 163, 125, 0.10); }
.quiz-feedback.is-on { display: block; animation: fade-up 380ms var(--ease-out) both; }
.quiz-feedback b { color: var(--text-strong); }
.quiz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* Hasil kuis + lencana */
.quiz-result { text-align: center; display: none; }
.quiz-result.is-on { display: block; animation: zoom-in 520ms var(--ease-out) both; }
.badge-award {
  width: 130px; height: 130px;
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-sunrise);
  color: var(--ash-900);
  box-shadow: var(--sh-glow-gold);
  position: relative;
}
.badge-award::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px dashed rgba(244, 162, 97, 0.55);
  animation: spin-slow 22s linear infinite;
}
.badge-award i { font-size: 52px; }
.badge-award.is-moss { background: var(--grad-moss); color: var(--white); box-shadow: var(--sh-glow-moss); }
.badge-award.is-sky { background: linear-gradient(150deg, var(--sky-300), var(--sky-700)); color: var(--white); }
.quiz-score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand);
}
.quiz-score small { font-size: 0.32em; color: var(--text-faint); }
.quiz-rank {
  font-family: var(--font-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}
.quiz-msg { margin-top: var(--space-4); color: var(--text-muted); max-width: 46ch; margin-inline: auto; }
.share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-6);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-strong);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn--wa:hover { background: #25D366; border-color: #25D366; color: #063; }
.share-btn--tw:hover { background: var(--ash-900); border-color: var(--ash-900); color: var(--white); }
.share-btn--copy:hover { background: var(--accent); border-color: var(--accent); color: var(--ash-900); }

/* Toast kecil untuk konfirmasi (salin tautan, kirim form) */
.kkn-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 140%);
  z-index: var(--z-modal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: var(--ash-900);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  box-shadow: var(--sh-4);
  transition: transform 480ms var(--ease-back);
  max-width: calc(100% - 32px);
}
.kkn-toast.is-on { transform: translate(-50%, 0); }
.kkn-toast i { color: var(--light-green); font-size: 17px; }

/* ==========================================================================
   20. GALERI + LIGHTBOX
   ========================================================================== */
.gal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-6);
}
.gal-filter button {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease-soft);
}
.gal-filter button:hover { border-color: var(--moss-400); color: var(--text-strong); }
.gal-filter button.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* Kisi mozaik — beberapa sel melebar untuk ritme visual */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(130px, 17vw, 210px);
  gap: var(--space-3);
}
.gal-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ash-100);
  cursor: zoom-in;
  border: 0;
  padding: 0;
}
.gal-cell.w2 { grid-column: span 2; }
.gal-cell.h2 { grid-row: span 2; }
.gal-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 820ms var(--ease-out), filter var(--dur-mid);
}
.gal-cell:hover img { transform: scale(1.09); }
.gal-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 24, 26, 0.72), transparent 58%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-soft);
}
.gal-cell:hover::after,
.gal-cell:focus-visible::after { opacity: 1; }
.gal-cap {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 2;
  text-align: left;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-mid) var(--ease-soft), transform var(--dur-mid) var(--ease-out);
}
.gal-cell:hover .gal-cap,
.gal-cell:focus-visible .gal-cap { opacity: 1; transform: translateY(0); }
.gal-cap strong {
  display: block;
  font-family: var(--font-sub);
  font-size: 14px;
  font-weight: 500;
}
.gal-cap span {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
}
.gal-cell.is-hidden { display: none; }

/* Lightbox */
.lbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 12, 13, 0.94);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid), visibility var(--dur-mid);
}
.lbox.is-on { opacity: 1; visibility: visible; }
.lbox img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  transform: scale(0.94);
  transition: transform 480ms var(--ease-out);
}
.lbox.is-on img { transform: scale(1); }
.lbox-cap {
  margin-top: var(--space-4);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}
.lbox-cap span { display: block; font-size: var(--fs-micro); color: rgba(255,255,255,0.5); margin-top: 4px; }
.lbox-close,
.lbox-prev,
.lbox-next {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--white);
  font-size: 18px;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.lbox-close:hover,
.lbox-prev:hover,
.lbox-next:hover { background: var(--accent); color: var(--ash-900); }
.lbox-close { top: 20px; right: 20px; }
.lbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   21. TIM
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--space-5);
}
.team-card {
  position: relative;
  padding: var(--space-6) var(--space-4) var(--space-5);
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); }
/* Kontur samar di belakang avatar */
.team-card::before {
  content: "";
  position: absolute;
  top: -30px; left: 50%;
  width: 200px; height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--moss-050) 0%, transparent 70%);
  opacity: 0.9;
}
[data-theme="dark"] .team-card::before { background: radial-gradient(circle, rgba(111,163,125,0.12) 0%, transparent 70%); }
.team-card > * { position: relative; }
.team-ava {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 8px 24px -8px rgba(22, 24, 26, 0.3);
  transition: transform var(--dur-mid) var(--ease-back);
}
.team-card:hover .team-ava { transform: scale(1.07); }
.team-card h3 {
  font-family: var(--font-sub);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-strong);
}
.team-role {
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-bio {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* ==========================================================================
   22. TESTIMONI & BERITA
   ========================================================================== */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
}
.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 8px; right: 22px;
  font-family: var(--font-accent);
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
}
.quote-card p {
  font-family: var(--font-accent);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.65;
  color: var(--text-strong);
  position: relative;
}
.quote-by {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.quote-by img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.quote-by .n { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); }
.quote-by .r { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--text-faint); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--space-5);
}
.news-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid), border-color var(--dur-mid);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.news-card:hover { transform: translateY(-7px); box-shadow: var(--sh-3); }
.news-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ash-100); position: relative; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 780ms var(--ease-out); }
.news-card:hover .news-thumb img { transform: scale(1.07); }
.news-body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }

/* Instagram feed variant (Kabar Terkini) */
.ig-card .news-thumb { aspect-ratio: 1 / 1; }
.ig-card:hover { border-color: #dd2a7b; box-shadow: var(--sh-3); }
.ig-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.ig-card .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .04em;
  color: #dd2a7b;
}
.ig-card .link-arrow i { transition: transform var(--dur-mid) var(--ease-out); }
.ig-card:hover .link-arrow i { transform: translate(2px, -2px); }

.ig-follow-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ig-follow-btn:hover { border-color: #dd2a7b; color: #dd2a7b; }

.ig-embed-wrap { width: 100%; }
.ig-embed-wrap iframe { width: 100%; border: 0; border-radius: var(--r-lg); display: block; }
.ig-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: var(--space-8) var(--space-6);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.ig-badge--lg {
  position: static;
  width: 56px;
  height: 56px;
  font-size: 26px;
}
.ig-placeholder-title {
  font-family: var(--font-sub);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-strong);
}
.ig-placeholder-desc {
  max-width: 480px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.news-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.news-body h3 {
  font-family: var(--font-sub);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-strong);
}
.news-body p { font-size: var(--fs-small); color: var(--text-muted); }
.news-body .link-arrow { margin-top: auto; }

/* ==========================================================================
   23. KONTAK
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.form-card {
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.12);
}
.field-msg {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: #C8783B;
  display: none;
}
.field.has-error input,
.field.has-error textarea { border-color: #C8783B; }
.field.has-error .field-msg { display: block; }

.contact-side { display: grid; gap: var(--space-4); }
.contact-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.contact-item:hover { border-color: var(--moss-400); transform: translateX(4px); }
.contact-item .ic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--moss-050);
  color: var(--brand);
  font-size: 19px;
}
[data-theme="dark"] .contact-item .ic { background: rgba(111,163,125,0.14); }
.contact-item .k {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-item .v { font-size: var(--fs-small); color: var(--text-strong); font-weight: 500; word-break: break-word; }

.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  background: var(--surface-2);
}
.map-embed iframe {
  width: 100%;
  height: clamp(280px, 42vh, 420px);
  border: 0;
  display: block;
  filter: saturate(0.9);
}
[data-theme="dark"] .map-embed iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.7); }

/* Baris tautan sosial */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  justify-content: center;
}
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-strong);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.social-pill:hover { transform: translateY(-3px); border-color: var(--moss-400); box-shadow: var(--sh-2); }
.social-pill i { font-size: 16px; }
.social-pill img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
.social-pill .bi-instagram { color: #E1306C; }
.social-pill .bi-tiktok { color: var(--text-strong); }
.social-pill .bi-whatsapp { color: #25D366; }
.social-pill .bi-envelope-fill { color: var(--accent-cool); }
.social-pill .bi-youtube { color: #FF0000; }

/* ==========================================================================
   24. FOOTER — kontur pegunungan
   ========================================================================== */
.footer {
  position: relative;
  padding-top: clamp(90px, 14vw, 170px);
  background: var(--ash-900);
  color: rgba(255, 255, 255, 0.66);
  overflow: hidden;
  isolation: isolate;
}
/* Siluet pegunungan di bibir atas footer */
.footer-ridge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(80px, 12vw, 160px);
  background: url("../assets/svg/footer-ridge.svg") repeat-x bottom center;
  background-size: 1600px 100%;
  z-index: -1;
}
/* Kontur halus pada badan footer */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.32;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-opacity='0.12'%3E%3Cpath d='M-20 80q110 70 220 0t240 30'/%3E%3Cpath d='M-20 140q110 70 220 0t240 30'/%3E%3Cpath d='M-20 200q110 70 220 0t240 30'/%3E%3Cpath d='M-20 260q110 70 220 0t240 30'/%3E%3Cpath d='M-20 320q110 70 220 0t240 30'/%3E%3Cpath d='M-20 380q110 70 220 0t240 30'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: var(--space-8);
}
.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.03em;
  color: var(--white);
  line-height: 1;
}
.footer-brand h3 span { color: var(--accent); }
.footer-brand .tag {
  font-family: var(--font-sub);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--space-4);
}
.footer-brand p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.5); max-width: 46ch; }
.footer-hash {
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.34);
}
.footer-hash span { color: var(--accent); }

/* Logo institusi */
.footer-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.logo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.logo-item:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-3px); }
.logo-item img {
  height: 34px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  padding: 2px;
}
.logo-item .lt {
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.logo-item .lt strong { display: block; color: var(--white); font-size: 11.5px; }

.footer h4 {
  font-family: var(--font-sub);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-4);
}
.footer-links { display: grid; gap: 11px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.52);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--accent); transform: translateX(4px); }
.footer-links i { font-size: 13px; opacity: 0.75; }

.footer-bottom {
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.38);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.6); }
.footer-bottom a:hover { color: var(--accent); }

/* Tombol kembali ke atas */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-sticky);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur-mid), visibility var(--dur-mid), transform var(--dur-mid) var(--ease-back), background var(--dur-fast);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); color: var(--ash-900); }

/* ==========================================================================
   25. HALAMAN 404
   ========================================================================== */
.err {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) var(--gutter) var(--space-8);
  background: var(--ash-900);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}
.err-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 26vw, 18rem);
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: transparent;
  background: var(--grad-sunrise);
  -webkit-background-clip: text;
  background-clip: text;
}
.err h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: var(--space-4);
}
.err p { margin: var(--space-4) auto 0; max-width: 48ch; color: rgba(255, 255, 255, 0.55); }
.err-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.err-ridge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34vh;
  background: url("../assets/svg/mountain-front.svg") no-repeat bottom center;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   26. KURSOR GLOW, DAUN MELAYANG, KABUT AMBIEN
   Semua elemen ini dekoratif → aria-hidden & pointer-events: none.
   ========================================================================== */
/* Cahaya mengikuti kursor (hanya perangkat berpenunjuk halus) */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(244, 162, 97, 0.13) 0%, rgba(244, 162, 97, 0.05) 38%, transparent 66%);
  opacity: 0;
  transition: opacity 500ms var(--ease-soft);
  mix-blend-mode: plus-lighter;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* Daun melayang di seluruh halaman */
.leaves {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.leaf {
  position: absolute;
  top: -6vh;
  width: 15px;
  height: 15px;
  opacity: 0;
  color: var(--moss-400);
}
.leaf svg { width: 100%; height: 100%; }
.leaf--gold { color: var(--gold-500); }
.leaf--dark { color: var(--moss-700); }

/* Lapisan kabut ambien di section tertentu */
.mist-band {
  position: absolute;
  left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;
  background: url("../assets/svg/mist.svg") repeat-x;
  background-size: 1400px 100%;
  opacity: 0.4;
}
.mist-band--top { top: -80px; animation: mist-roll 90s linear infinite; }
.mist-band--bottom { bottom: -60px; animation: mist-roll-rev 120s linear infinite; }
[data-theme="dark"] .mist-band { opacity: 0.16; }

/* Panel audio ambien (tombol kecil, keterangan trek) */
.audio-dock {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-2);
  max-width: calc(100vw - 40px);
  transition: transform var(--dur-mid) var(--ease-out);
}
.audio-dock .meta { display: grid; line-height: 1.25; }
.audio-dock .meta .k {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.audio-dock .meta .n {
  font-family: var(--font-sub);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-strong);
  white-space: nowrap;
}
.audio-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font-size: 15px;
  flex-shrink: 0;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-back);
}
.audio-btn:hover { transform: scale(1.08); }
.audio-btn.is-playing { background: var(--accent); color: var(--ash-900); }
/* Bar visualiser kecil */
.audio-eq { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.audio-eq i {
  width: 2.5px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand);
  display: block;
}
.audio-dock.is-playing .audio-eq i { animation: eq-bounce 1.05s ease-in-out infinite; background: var(--accent); }
.audio-dock.is-playing .audio-eq i:nth-child(2) { animation-delay: 0.16s; }
.audio-dock.is-playing .audio-eq i:nth-child(3) { animation-delay: 0.32s; }
.audio-dock.is-playing .audio-eq i:nth-child(4) { animation-delay: 0.48s; }

/* Pemilih trek suara alam */
.audio-tracks { display: flex; gap: 4px; }
.audio-tracks button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  transition: all var(--dur-fast);
}
.audio-tracks button.is-on { background: var(--brand); color: var(--white); border-color: transparent; }

/* Sisipan naratif ala National Geographic — teks besar di atas foto lebar */
.story {
  position: relative;
  min-height: 76svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.story-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0B1015;
  overflow: hidden;
}
.story-bg img { width: 100%; height: 100%; object-fit: cover; }

/* Adegan gunung berapi purba: lapisan gunung yang sama dengan header,
   digelapkan untuk suasana malam sebelum letusan */
.story-mtn {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}
.story-mtn--back {
  height: 72%;
  background-image: url("../assets/svg/mountain-back.svg");
  opacity: .5;
  filter: brightness(.5) saturate(.7);
}
.story-mtn--mid {
  height: 58%;
  background-image: url("../assets/svg/mountain-mid.svg");
  filter: brightness(.4) saturate(.75);
}
.story-mtn--front {
  height: 40%;
  background-image: url("../assets/svg/mountain-front.svg");
  z-index: 2;
}

/* Pijar bara di kaldera puncak — jantung narasi "sebelum ada nama, ada api" */
.story-ember {
  position: absolute;
  left: 49%;
  bottom: 37%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, 45%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 158, 87, .9) 0%, rgba(233, 96, 44, .5) 35%, rgba(233, 96, 44, 0) 70%);
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: ember-glow 5s ease-in-out infinite;
  z-index: 1;
}
@keyframes ember-glow {
  0%, 100% { opacity: .7;  transform: translate(-50%, 45%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, 45%) scale(1.15); }
}

/* Percikan bara yang naik perlahan dari kaldera */
.story-embers { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.ember {
  position: absolute;
  bottom: 36%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFB067;
  box-shadow: 0 0 7px 2px rgba(255, 140, 66, .8);
  opacity: 0;
  animation: ember-rise 7s ease-in infinite;
}
@keyframes ember-rise {
  0%   { transform: translateY(0) scale(1);    opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: .35; }
  100% { transform: translateY(-200px) scale(.35); opacity: 0; }
}

.story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(22, 24, 26, 0.86) 0%, rgba(22, 24, 26, 0.52) 55%, rgba(22, 24, 26, 0.2) 100%);
}
.story-inner { max-width: 680px; padding-block: var(--space-9); }
.story-kicker {
  font-family: var(--font-sub);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--space-4);
}
.story-inner h2 {
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--white);
  text-wrap: balance;
}
.story-inner p {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.74);
}
.story-inner .btn { margin-top: var(--space-6); }

/* Kartu CTA besar dengan gradien lumut */
.cta-band {
  position: relative;
  padding: clamp(38px, 6vw, 78px);
  border-radius: var(--r-xl);
  background: var(--grad-moss);
  color: var(--white);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-opacity='0.18'%3E%3Cellipse cx='150' cy='150' rx='30' ry='20'/%3E%3Cellipse cx='150' cy='150' rx='62' ry='42'/%3E%3Cellipse cx='150' cy='150' rx='96' ry='66'/%3E%3Cellipse cx='150' cy='150' rx='132' ry='92'/%3E%3C/g%3E%3C/svg%3E") center/300px repeat;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.cta-band p {
  margin: var(--space-4) auto 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.8);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }

/* Kartu info ringkas (dipakai halaman about) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--space-4);
}
.info-card {
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.info-card:nth-child(2) { border-top-color: var(--accent); }
.info-card:nth-child(3) { border-top-color: var(--accent-cool); }
.info-card:nth-child(4) { border-top-color: var(--light-green); }
.info-card:nth-child(5) { border-top-color: var(--moss-700); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.info-card h3 {
  font-family: var(--font-sub);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.info-card h3 i { color: var(--brand); }
.info-card p { font-size: var(--fs-small); color: var(--text-muted); }
/* Penekanan di dalam kartu info (jam, nama lokasi) tetap terbaca */
.info-card p strong { font-weight: 600; color: var(--text-strong); }
.sec-deep .info-card p strong { color: var(--accent); }
.info-card dl { display: grid; gap: 8px; margin-top: var(--space-3); }
.info-card .info-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--border);
  font-size: var(--fs-micro);
}
.info-card .info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.info-card .info-row dt { color: var(--text-faint); }
.info-card .info-row dd { color: var(--text-strong); font-weight: 600; text-align: right; }

/* ==========================================================================
   PROGRAM PENGABDIAN — label lunak, daftar periksa, kartu tujuan, keluaran
   Dipakai oleh /program/index.html.
   ========================================================================== */

/* Dua kolom sama lebar (runtuh menjadi satu kolom lewat responsive.css) */
.split-grid--even { grid-template-columns: 1fr 1fr; }

/* Label ringan untuk kartu berlatar terang */
.chip--soft {
  background: var(--moss-050);
  color: var(--brand);
  border-color: transparent;
  backdrop-filter: none;
}
[data-theme="dark"] .chip--soft { background: rgba(111, 163, 125, 0.16); color: var(--moss-400); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }

/* Daftar periksa rincian kegiatan */
.check-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--text-muted);
}
.check-list li::before {
  content: "\f26a";                 /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-size: 0.95em;
}

/* Kartu tujuan — dipakai di seksi berlatar gelap (.sec-deep) */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--space-4);
}
.goal-grid > * { min-width: 0; }
.goal-card {
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.goal-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(244, 162, 97, 0.45);
}
.goal-card .no {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.goal-card h3 {
  margin: 10px 0 8px;
  font-family: var(--font-sub);
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
}
.goal-card p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.68); }

/* Daftar keluaran yang diharapkan */
.output-card {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-2);
}
.output-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--border-strong);
}
.output-item:first-child { padding-top: 0; }
.output-item:last-child { border-bottom: 0; padding-bottom: 0; }
.output-item i { flex: none; margin-top: 2px; font-size: 18px; color: var(--brand); }
.output-item strong {
  display: block;
  font-family: var(--font-sub);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
}
.output-item p { margin-top: 3px; font-size: var(--fs-small); color: var(--text-muted); }

/* Pintasan bagian pada hero halaman Program */
.hero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }

/* ==========================================================================
   ISI ARTIKEL (halaman /artikel/)
   Tipografi bacaan panjang yang nyaman, memakai token warna situs.
   ========================================================================== */
.artikel-isi { font-size: 1.02rem; line-height: 1.85; color: var(--text); }
.artikel-isi > * + * { margin-top: var(--space-4); }
.artikel-isi h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: 0.01em;
  color: var(--text-strong);
  margin-top: var(--space-7);
}
.artikel-isi h3 {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-strong);
  margin-top: var(--space-6);
}
.artikel-isi p { color: var(--text-muted); }
.artikel-isi strong { color: var(--text-strong); font-weight: 600; }
.artikel-isi a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.artikel-isi ul { margin-left: 1.1rem; display: grid; gap: 8px; }
.artikel-isi li { color: var(--text-muted); }