/* ================================================
   SIMBAH — Sistem Informasi Masyarakat
            Bale Harian Ngemplak
   ================================================
   File  : style.css
   Isi   : Semua gaya tampilan website SIMBAH
   Urutan:
     1. CSS Variables (warna & ukuran)
     2. Reset & Body
     3. Phone Shell
     4. Status Bar & Header
     5. Pages (sistem multi-halaman)
     6. Bottom Navigation
     7. Bottom Sheet Menu
     8. Komponen Umum
     9. Hero Beranda
    10. Ticker Pengumuman
    11. Grid Layanan
    12. Agenda
    13. UMKM — Kartu & Grid
    14. KAS — Ringkasan & Transaksi
    15. Inventaris
    16. Nyuwun Tulung
    17. UMKM Detail (Landing Page)
    18. Tentang Dusun
    19. Footer
   ================================================ */


/* ================================================
   1. CSS VARIABLES
   Ganti warna di sini — semua halaman ikut berubah
   ================================================ */
:root {
  /* Warna Background */
  --iv:  #F5F0E8;   /* background utama — krem logo */
  --iv2: #EDE8DC;   /* background kartu / section */
  --iv3: #E0D9CC;   /* border & elemen ringan */

  /* Warna Hijau — warna utama logo */
  --gr:  #2D5A3D;   /* hijau utama */
  --gr2: #3A7050;   /* hijau hover */
  --grl: #EAF2EC;   /* hijau lembut (background badge) */

  /* Warna Emas — aksen logo */
  --br:  #8B6914;   /* emas tua */
  --br2: #A07820;   /* emas terang */
  --brl: #F5EDD6;   /* emas lembut (background badge) */

  /* Warna Teks */
  --tx:  #1A2E23;   /* teks utama */
  --tx2: #4A5E52;   /* teks sekunder */
  --tx3: #5C6F64;   /* teks tersier / placeholder — #5C6F64 kontras ≥4.5 (A11Y-01) */
  --wh:  #fff;      /* putih */

  /* Warna Semantik (status pemasukan/pengeluaran, dll) */
  --ok:  #2E7D32;   /* hijau sukses / pemasukan */
  --okl: #E8F5E9;   /* hijau sukses lembut (background) */
  --bad: #C0392B;   /* merah bahaya / pengeluaran */
  --badl:#FDE8E8;   /* merah bahaya lembut (background) */

  /* Ukuran Border Radius */
  --r:  12px;       /* radius standar kartu */
  --rs: 8px;        /* radius kecil */
}


/* ================================================
   2. RESET & BODY
   ================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* hilangkan highlight tap di HP */
}

/* [A11Y-03] Fokus keyboard — visible, konsisten di semua browser */
:focus-visible {
  outline: 2px solid var(--gr);
  outline-offset: 2px;
}

body {
  background: var(--iv);
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', sans-serif;
}


/* ================================================
   3. KONTAINER UTAMA
   Dulu berbentuk "bingkai HP" untuk mockup,
   sekarang full-width seperti website biasa.
   ================================================ */
.phone {
  width: 100%;
  max-width: 480px;     /* lebar app-style di mobile/tablet kecil */
  margin: 0 auto;
  background: var(--iv);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}


/* ================================================
   4. STATUS BAR & HEADER
   ================================================ */

/* Status bar atas (jam & sinyal) */
.sb {
  background: var(--gr);
  padding: 10px 20px 6px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}
.sb span {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* Header utama (logo + nama + tombol) */
.hdr {
  background: var(--gr);
  padding: 8px 16px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav tengah | pill kanan */
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.hlogo {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border: none;
  background: none;
}
.hlogo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.hbrand {
  font-family: 'Lora', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-align: left;
}
.hsub {
  font-size: 9px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.3;
}

/* Tombol kanan header */
.hbtn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.hbtn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ================================================
   4B. SEARCH PILL — Morph Pattern
   ------------------------------------------------
   Button ikon kaca yang "morph" melebar ke kiri
   jadi input langsung di tempat — satu elemen,
   tanpa overlay, tanpa box baru. Menutup dengan
   klik × atau klik di luar header.
   ================================================ */

/* Wrapper pill — 1 elemen yang melebar */
.search-pill {
  display: flex;
  align-items: center;
  height: 32px;
  width: 32px;
  background: rgba(255, 255, 255, .15);
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  overflow: hidden;
  transition:
    width .45s cubic-bezier(.65, 0, .35, 1),
    background .35s ease,
    border-color .35s ease;
  cursor: pointer;
  /* Absolute di kanan header — tidak ikut flow,
     logo & nav tidak bergerak saat pill melebar */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.search-pill.open {
  width: 210px;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  cursor: default;
}

/* Tombol ikon di dalam pill */
.search-pill-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.sp-ico {
  position: absolute;
  width: 15px;
  height: 15px;
  transition: opacity .2s ease, transform .25s ease;
}
.sp-ico-search { opacity: 1; transform: scale(1); }
.sp-ico-x      { opacity: 0; transform: scale(.6); }
.search-pill.open .sp-ico-search { opacity: 0; transform: scale(.6); }
.search-pill.open .sp-ico-x      { opacity: 1; transform: scale(1); }

/* Input di dalam pill */
.search-pill-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent !important;
  -webkit-appearance: none;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: inherit;
  font-size: 11px;
  padding: 0 8px 0 2px;
  outline: none;
  opacity: 0;
  transition: opacity .25s ease .15s;
  caret-color: #fff;
  direction: ltr;        /* balik arah teks ke normal */
}
.search-pill.open .search-pill-input { opacity: 1; }
.search-pill-input::placeholder { color: rgba(255, 255, 255, .5); font-size: 11px; }
.search-pill-input:-webkit-autofill,
.search-pill-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px transparent inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* Dropdown hasil search — muncul di bawah header */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 16px;
  width: 260px;
  background: var(--wh);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
  overflow: hidden;
  z-index: 190;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.search-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Item hasil search */
.src-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-bottom: .5px solid var(--iv2);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.src-item:last-child { border-bottom: none; }
.src-item:hover, .src-item:active { background: var(--iv2); }

.src-ico {
  font-size: 15px;
  width: 28px;
  height: 28px;
  background: var(--grl);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.src-body { display: flex; flex-direction: column; min-width: 0; }
.src-ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.src-meta { font-size: 10px; color: var(--tx3); margin-top: 1px; }
.src-empty {
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: var(--tx3);
}


/* ================================================
   5. PAGES — Sistem Multi-halaman
   Setiap halaman posisinya absolute, yang aktif
   saja yang ditampilkan (display: flex)
   ================================================ */
.pages {
  flex: 1;
  overflow: visible;
  position: relative;
  padding-bottom: 76px;   /* ruang aman supaya konten tidak tertutup bottom nav fixed */
}

.page {
  position: static;          /* ikut alur normal halaman, bukan absolute lagi */
  overflow-y: visible;
  background: var(--iv);
  display: none;             /* sembunyikan semua halaman */
  flex-direction: column;
  min-height: 60vh;
}
.page.active {
  display: flex;             /* tampilkan halaman yang aktif */
}
.page::-webkit-scrollbar {
  display: none;             /* sembunyikan scrollbar */
}


/* ================================================
   6b. TOMBOL KEMBALI KE ATAS (floating)
   Muncul setelah scroll, ditaruh di atas bottom nav
   mobile supaya tidak tertutup/numpuk (lihat .bnav).
   ================================================ */
.btt {
  position: fixed;
  right: 14px;
  bottom: 88px;            /* di atas .bnav (76px) + jarak aman */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gr);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(26, 46, 35, .25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  z-index: 90;
}
.btt svg { width: 18px; height: 18px; }
.btt.show {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ================================================
   6. BOTTOM NAVIGATION
   Menu bawah layar — 5 item
   ================================================ */
.bnav {
  background: var(--wh);
  border-top: 1px solid var(--iv3);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 6px 0 10px;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 50;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}

/* Item nav biasa */
.ni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 8px;
  border: none;
  background: none;
  font-family: inherit;
  min-width: 56px;
}
.ni svg {
  width: 20px;
  height: 20px;
  stroke: var(--tx3);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .15s;
}
.ni span {
  font-size: 9px;
  font-weight: 600;
  color: var(--tx3);
  transition: color .15s;
}

/* Nav item aktif */
.ni.active svg  { stroke: var(--gr); }
.ni.active span { color: var(--gr); }

/* Tombol menu tengah (gelembung hijau) */
.ni-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  min-width: 56px;
}
.ni-menu .bubble {
  background: var(--gr);
  border-radius: 16px;
  padding: 10px 14px;
  margin-top: -8px;
  box-shadow: 0 4px 14px rgba(45, 90, 61, .35);
  transition: background .15s, transform .1s;
}
.ni-menu .bubble svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ni-menu span {
  font-size: 9px;
  font-weight: 600;
  color: var(--tx3);
  transition: color .15s;
}

/* Saat menu terbuka — emas & muter */
.ni-menu.open .bubble { background: var(--br); transform: rotate(90deg); }
.ni-menu.open span    { color: var(--br); }


/* ================================================
   7. BOTTOM SHEET MENU
   Menu laci dari bawah saat klik tombol tengah
   ================================================ */

/* Overlay gelap di belakang sheet */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background .25s;
  z-index: 200;
}
.sheet-overlay.show {
  background: rgba(0, 0, 0, .4);
  pointer-events: all;
}

/* Laci sheet */
.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--wh);
  border-radius: 20px 20px 0 0;
  padding: 0 0 16px;
  transform: translateY(100%);               /* tersembunyi di bawah */
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 201;
}
.sheet.show {
  transform: translateY(0);                  /* muncul ke atas */
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--iv3);
  border-radius: 2px;
  margin: 10px auto 14px;
}
.sheet-title {
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  padding: 0 18px 10px;
  border-bottom: 1px solid var(--iv2);
  margin-bottom: 8px;
}

/* Item di dalam sheet */
.sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .12s;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.sheet-item:active { background: var(--iv2); }

.si-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.si-g { background: var(--grl); }  /* ikon hijau */
.si-b { background: var(--brl); }  /* ikon emas */

.si-ttl   { font-size: 13px; font-weight: 700; color: var(--tx); }
.si-sub   { font-size: 10px; color: var(--tx3); }
.si-arrow { margin-left: auto; font-size: 16px; color: var(--tx3); }


/* ================================================
   8. KOMPONEN UMUM
   Dipakai di banyak halaman
   ================================================ */

/* Section wrapper */
.sec { padding: 16px; }

/* Header tiap section (judul + link "lihat semua") */
.sec-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.sec-ttl {
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
}
.sec-lnk {
  font-size: 11px;
  font-weight: 600;
  color: var(--br2);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* Garis dekorasi emas di bawah judul */
.bline {
  height: 2.5px;
  background: linear-gradient(90deg, var(--br), var(--br2) 50%, transparent);
  border-radius: 2px;
  margin-bottom: 12px;
}

/* Divider tebal antar section */
.div8 {
  height: 8px;
  background: var(--iv2);
  flex-shrink: 0;
}

/* ================================================
   WRAPPER LAYOUT 2-KOLOM DESKTOP (Beranda)
   ------------------------------------------------
   Default (MOBILE): display:contents membuat div ini
   "tidak terlihat" oleh browser secara struktural —
   5 section di dalamnya (Agenda, UMKM, Kas, Inventaris,
   Nyuwun Tulung) tetap dianggap anak langsung dari
   parent-nya, tampil stacked vertikal SAMA SEPERTI
   SEBELUM wrapper ini ada. Tidak ada perubahan visual
   apapun di mobile.

   Override-nya ada di @media (min-width:1024px) di
   bagian RESPONSIVE DESKTOP — di sana baru jadi grid
   2 kolom sungguhan.
   ================================================ */
.beranda-grid-desktop {
  display: contents;
}

/* Header halaman dalam (agenda, kas, dll) */
.phdr {
  background: var(--gr);
  padding: 10px 16px 14px;
  flex-shrink: 0;
}
.pback {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: none;
  color: #fff;
  font-family: inherit;
  margin-bottom: 4px;
}
.pback svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pback span { font-size: 12px; font-weight: 500; }
.pttl  { font-family: 'Lora', serif; font-size: 18px; font-weight: 700; color: #fff; }
.psub  { font-size: 11px; color: rgba(255, 255, 255, .65); margin-top: 2px; }


/* ================================================
   9. HERO BERANDA
   Banner utama halaman beranda
   ================================================ */
.hero {
  background:
    linear-gradient(
      100deg,
      rgba(20, 40, 25, 0.82) 0%,
      rgba(20, 40, 25, 0.60) 45%,
      rgba(20, 40, 25, 0.22) 100%
    ),
    url('../img/backgrounds/hero-bg.webp') center 20% / cover no-repeat;
  padding: 20px 16px 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 240px;
}

/* Dekoratif dihapus — foto sudah cukup sebagai background,
   lingkaran abstrak justru mengganggu foto nyata */
.hero::before { display: none; }
.hero::after  { display: none; }

.hero-ey {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 6px;
}
.hero-ttl {
  font-family: 'Lora', serif;
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}
.hero-ttl span { color: var(--br2); }  /* teks emas di judul */

.hero-tag {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 230px;
}

/* Statistik di hero (warga, UMKM, dll) */
.hero-stats { display: flex; gap: 9px; }

/* CTA buttons di hero — hanya muncul di desktop,
   di mobile sudah ada grid Layanan Warga di bawah hero */
.hero-cta {
  display: none;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  background: #fff;
  color: var(--gr);
}
.hero-cta-btn:active { transform: scale(.96); }
.hero-cta-sec {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
}
.hero-cta-sec:active { transform: scale(.96); }
.hstat {
  background: rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
}
.hstat .num {
  font-family: 'Lora', serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.hstat .lbl {
  font-size: 9px;
  color: rgba(255, 255, 255, .6);
  margin-top: 2px;
}


/* ================================================
   10. TICKER PENGUMUMAN
   Teks berjalan di bawah hero
   ================================================ */
.ticker {
  background: var(--brl);
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.tick-ico {
  width: 18px;
  height: 18px;
  background: var(--br);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
}
.tick-txt-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 14px;
}
.tick-txt {
  font-size: 10px;
  color: var(--br);
  font-weight: 600;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  animation: tick 28s linear infinite;
}
@keyframes tick {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}


/* ================================================
   10b. TRUST STRIP — social proof agregat beranda
   Strip 3 kolom antara ticker dan Layanan Warga.
   Angka rating & ulasan diisi dinamis oleh renderTrustStrip() di script.js.
   Desain: Bold Ivory — background krem, garis hijau atas, angka besar serif.
   ================================================ */
.trust-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #F8F4EC;
  border-top: 3px solid var(--gr);
  border-bottom: 1px solid #E5DFD0;
}
.ts-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13px 6px 11px;
  gap: 2px;
  position: relative;
}
.ts-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: #DDD7C8;
}
.ts-num {
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gr);
  line-height: 1;
  letter-spacing: -.02em;
}
.ts-star,
.ts-sup {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--br);
}

/* Hero Trust — row statistik inside hero, khusus desktop */
.hero-trust { display: none; } /* hidden di mobile */
.ht-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ht-num {
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.ht-star {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--br);
}
.ht-sup {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
}
.ht-lbl {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
}
.ht-sep {
  width: 1px;
  background: rgba(255,255,255,.2);
  align-self: stretch;
  margin: 2px 0;
}
.ts-lbl {
  font-size: 8.5px;
  color: var(--tx2);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}


/* ================================================
   11. GRID LAYANAN — Opsi B
   2 card hero (UMKM + Agenda) + 4 card mini (layanan sekunder)
   ================================================ */

/* Baris 1 — 2 card hero sejajar */
.g-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

/* Card hero: lebih besar, border hijau sebagai aksen */
.srv-hero {
  background: var(--wh);
  border-radius: var(--r);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 2px solid var(--gr);
  transition: transform .12s, background .12s;
  font-family: inherit; /* reset button */
  width: 100%;          /* button default tidak full-width */
}
.srv-hero:active { transform: scale(.95); }
.srv-hero span {
  font-size: 12px;
  font-weight: 700;
  color: var(--gr);
  text-align: center;
  line-height: 1.3;
}

/* Baris 2 — 4 card mini sejajar */
.g-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

/* Card mini: lebih kecil & redup, kesan "sekunder" */
.srv-mini {
  background: var(--wh);
  border-radius: var(--rs);
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: 1px solid #DDD7C8;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .12s;
  font-family: inherit; /* reset button */
  width: 100%;          /* button default tidak full-width */
}
.srv-mini:active { transform: scale(.95); }
.srv-mini span {
  font-size: 9px;
  font-weight: 600;
  color: var(--tx3);
  text-align: center;
  line-height: 1.3;
}

/* Ikon hero: lebih besar */
.sico {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* Ikon mini: lebih kecil */
.sico-mini {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.ig { background: var(--grl); }  /* ikon background hijau */
.ib { background: var(--brl); }  /* ikon background emas */


/* ================================================
   12. AGENDA
   Kartu jadwal kegiatan dusun
   ================================================ */
.ag {
  background: var(--wh);
  border-radius: var(--r);
  padding: 11px 13px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 7px;
  border: 1px solid rgba(0, 0, 0, .05);
}

/* Kotak tanggal di kiri */
.ag-dt {
  background: var(--gr);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  min-width: 38px;
  flex-shrink: 0;
}
.ag-d {
  font-family: 'Lora', serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.ag-m {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
}

/* Info agenda (judul, lokasi, waktu) */
.ag-info  { flex: 1; }
.ag-ttl   { font-size: 12px; font-weight: 600; color: var(--tx); margin-bottom: 2px; }
.ag-meta  { font-size: 10px; color: var(--tx3); }

/* Badge kategori agenda */
.ag-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.tg { background: var(--grl); color: var(--gr); }  /* badge hijau */
.tb { background: var(--brl); color: var(--br); }  /* badge emas */

/* Label bulan pemisah */
.ag-month-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tx3);
  padding: 12px 16px 4px;
}


/* ================================================
   13. UMKM — Kartu & Grid
   ================================================ */

/* Baris kartu horizontal (scroll) di beranda */
.urow {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.urow::-webkit-scrollbar { display: none; }

/* Kartu UMKM kecil (di beranda) */
.ucard {
  background: var(--wh);
  border-radius: var(--r);
  overflow: hidden;
  min-width: 145px;
  border: 1px solid rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: transform .12s;
  flex-shrink: 0;
}
.ucard:active { transform: scale(.97); }

.uimg {
  height: 88px;
  background: var(--iv3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: relative;
}
.uwa {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #25D366;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.uinfo   { padding: 9px 10px; }
.uname   { font-size: 12px; font-weight: 700; color: var(--tx); margin-bottom: 1px; }
.ucat    { font-size: 10px; color: var(--br2); font-weight: 600; }

/* Filter chip kategori UMKM */
.filter-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 16px 8px;
  scrollbar-width: none;
  background: var(--wh);
  flex-shrink: 0;
}
.filter-row::-webkit-scrollbar { display: none; }

.fchip {
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--iv3);
  background: var(--wh);
  color: var(--tx2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
}
.fchip.active {
  background: var(--gr);
  color: #fff;
  border-color: var(--gr);
}

/* Grid UMKM 2 kolom (halaman UMKM) */
.ugrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px;
}

/* CTA pendaftaran UMKM baru */
.umkm-daftar-cta {
  margin: 4px 16px 64px;   /* bottom 64px = ruang aman dari BTT (40px) + jarak */
  padding: 10px 13px;
  background: var(--grl);
  border: 1px solid rgba(45, 90, 61, .15);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: 10px;
}
.umkm-daftar-body { flex: 1; min-width: 0; }
.umkm-daftar-title {
  font-family: 'Lora', serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.3;
  margin-bottom: 3px;
}
.umkm-daftar-desc {
  font-size: 10px;
  color: var(--tx3);
  line-height: 1.5;
}
.umkm-daftar-btn {
  display: inline-flex;
  align-items: center;
  background: var(--gr);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.umkm-daftar-btn:hover { background: var(--gr2, #3A7050); }

/* Disclaimer inventaris */
.inv-disclaimer {
  margin: 0 16px 12px;
  padding: 11px 14px;
  background: var(--brl);
  border-left: 3px solid var(--br2);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  color: var(--tx2);
  line-height: 1.6;
}
.ugcard {
  background: var(--wh);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: transform .12s;
}
.ugcard:active { transform: scale(.97); }

.ug-img {
  height: 100px;
  background: var(--iv3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}
.ug-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: var(--br);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
}
.ug-info { padding: 10px; }
.ug-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 2px;
}
.ug-cat {
  font-size: 10px;
  color: var(--br2);
  font-weight: 600;
  margin-bottom: 2px;
}
.ug-rating {
  font-size: 10px;
  color: var(--tx2);
  font-weight: 600;
  margin-bottom: 6px;
}
.ug-wa {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #25D366;
  color: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  width: fit-content;
  text-decoration: none;
}

/* Badge "Baru" di grid UMKM — untuk UMKM yang belum punya rating Google */
.ug-new {
  font-size: 9px;
  font-weight: 700;
  background: var(--brl);
  color: var(--br);
  padding: 2px 7px;
  border-radius: 20px;
}

/* Tombol alternatif "Lihat Maps" di grid — untuk UMKM tanpa nomor WA */
.ug-wa-empty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--iv2);
  color: var(--tx2);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
}

/* Jumlah ulasan Google di rating pill detail UMKM */
.rn-ulasan {
  font-size: 10px;
  color: var(--br);
  font-weight: 500;
  margin-left: 1px;
}

/* Badge "Baru" di rating pill detail UMKM */
.rn-new {
  font-size: 11px;
  font-weight: 700;
  color: var(--br);
  background: var(--brl);
  padding: 2px 8px;
  border-radius: 20px;
}


/* ================================================
   14. KAS — Ringkasan & Transaksi
   ================================================ */

/* Kartu ringkasan saldo */
.kas {
  background: var(--wh);
  border-radius: var(--r);
  padding: 16px;
  border-left: 4px solid var(--gr);
  border-top: 1px solid var(--iv3);
  border-right: 1px solid var(--iv3);
  border-bottom: 1px solid var(--iv3);
}
.kas-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 3px;
}
.kas-sal {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--gr);
  margin-bottom: 12px;
}
.kas-row { display: flex; gap: 9px; margin-bottom: 10px; }
.kas-box {
  flex: 1;
  background: var(--grl);
  border-radius: 8px;
  padding: 9px;
  border: 1px solid var(--iv3);
}
.kb-lbl {
  font-size: 9px;
  color: var(--tx3);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.kb-val  { font-size: 13px; font-weight: 700; color: var(--gr); }
.kas-upd { font-size: 9px; color: var(--br); font-weight: 500; }

/* Tombol lihat detail kas */
.kas-detail {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--br);
  text-decoration: none;
  background: var(--brl);
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--iv3);
}

/* ===== Card kas per-komunitas (versi ringkas, ditumpuk) ===== */
.kastot {
  background: var(--wh);
  border-radius: var(--r);
  padding: 16px 17px;
  margin-bottom: 14px;
  border-left: 4px solid var(--gr);
  border-top: 1px solid var(--iv3);
  border-right: 1px solid var(--iv3);
  border-bottom: 1px solid var(--iv3);
}
.kastot-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 3px;
}
.kastot-val {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--gr);
}
.kastot-sub {
  font-size: 10px;
  color: var(--br);
  margin-top: 3px;
  font-weight: 500;
}

.kaskom {
  background: var(--wh);
  border-radius: var(--rs);
  padding: 12px 13px;
  margin-bottom: 9px;
  border: 1px solid var(--iv3);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color .15s ease;
}
.kaskom:hover { border-color: var(--br2); }
.kaskom-ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--grl);
}
.kaskom-body { flex: 1; min-width: 0; }
.kaskom-nm {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 1px;
}
.kaskom-bend {
  font-size: 10px;
  color: var(--tx3);
}
.kaskom-bar-wrap {
  margin-top: 6px;
  height: 4px;
  background: var(--iv3);
  border-radius: 2px;
  overflow: hidden;
}
.kaskom-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gr), var(--gr2));
  border-radius: 2px;
  min-width: 4px; /* supaya bar Karang Taruna (5%) tetap keliatan */
  transition: width .4s ease;
}
.kaskom-right { text-align: right; flex-shrink: 0; }
.kaskom-saldo {
  font-size: 13px;
  font-weight: 700;
  color: var(--gr);
  margin-bottom: 4px;
}
.kaskom-btn {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--gr);
  text-decoration: none;
  background: var(--grl);
  padding: 4px 9px;
  min-height: 44px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Item transaksi */
.trx {
  background: var(--wh);
  border-radius: var(--rs);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 0, 0, .05);
}
.trx-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.trx-in  { background: var(--okl); }  /* ikon pemasukan */
.trx-out { background: var(--badl); }  /* ikon pengeluaran */

.trx-desc { flex: 1; }
.trx-nm   { font-size: 12px; font-weight: 600; color: var(--tx); }
.trx-dt   { font-size: 10px; color: var(--tx3); }
.trx-val  { font-size: 12px; font-weight: 700; }
.tv-in    { color: var(--ok); }    /* nilai pemasukan */
.tv-out   { color: var(--bad); }    /* nilai pengeluaran */


/* ================================================
   15. INVENTARIS
   Daftar barang milik dusun
   ================================================ */
.inv {
  background: var(--wh);
  border-radius: var(--rs);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  border: 1px solid rgba(0, 0, 0, .05);
}
.iico {
  width: 34px;
  height: 34px;
  background: var(--iv2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.inm  { font-size: 12px; font-weight: 600; color: var(--tx); }
.idet { font-size: 10px; color: var(--tx3); }

/* Badge kondisi barang */
.ibadge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.ibg { background: var(--grl); color: var(--gr); }        /* Baik */
.ibb { background: var(--brl); color: var(--br); }        /* Butuh Perhatian */
.ibr { background: var(--badl); color: var(--bad); }          /* Rusak */

/* Tombol WA pengelola inventaris */
.pj-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #25D366;
  color: #fff;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  margin: 4px 0 10px 43px;
}


/* ================================================
   16. NYUWUN TULUNG
   Direktori kontak penting dusun
   ================================================ */
.nt-card {
  background: var(--wh);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, .05);
}
.nt-card > div:not(.nt-av):not(.nt-btns) {
  flex: 1;
  min-width: 0; /* supaya teks di dalamnya bisa truncate, bukan dorong layout jadi wrap berantakan di kolom sempit */
}
.nt-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.av-g { background: var(--grl); }
.av-b { background: var(--brl); }

.nt-role {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--br2);
  margin-bottom: 1px;
}
.nt-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* nama panjang dipotong "..." daripada wrap 3 baris di kolom sempit */
}
.nt-num  { font-size: 11px; color: var(--tx3); white-space: nowrap; }

/* Tombol WA di kanan kartu */
/* Wrapper 2 tombol (WA + Telp) — muncul di kanan card */
.nt-btns {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: fit-content;
}

.nt-disabled {
  margin-left: auto;
  background: var(--iv3) !important;
  color: var(--tx3) !important;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* PENGADUAN-BTN — tombol pengaduan warga ke Kepala Dusun.
   Status: NONAKTIF (abu-abu) sampai nomor WA Kadus tersedia.
   Cara aktifkan: di index.html cari tombol .pengaduan-btn,
   isi href dengan nomor asli, hapus data-kontak-publik & class nt-disabled. */
.pengaduan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 11px 14px;
  background: var(--brl);
  border: 1.5px solid var(--br2);
  border-radius: var(--rs);
  color: var(--br);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background .15s, color .15s;
}
.pengaduan-btn:hover {
  background: var(--br);
  color: #fff;
}
.nt-wa {
  background: #25D366;
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Kalau .nt-wa ada di dalam .nt-btns, margin-left tidak perlu */
.nt-btns .nt-wa {
  margin-left: 0;
}

.nt-telp {
  background: #2563eb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}


/* ================================================
   17. UMKM DETAIL — Landing Page per UMKM
   ================================================ */

/* Foto cover besar */
.ud-cover {
  height: 160px;
  background: var(--iv3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  position: relative;
  flex-shrink: 0;
}

/* Tombol kembali di atas foto */
.ud-back {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, .35);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.ud-back svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tombol share di atas foto */
.ud-share {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, .35);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.ud-share svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Strip logo + nama UMKM */
.ud-logo-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--iv2);
  background: var(--wh);
  flex-shrink: 0;
}
.ud-name-group {
  flex: 1;
  min-width: 0;
}
.ud-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.ud-logo-box {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--iv2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .06);
}
.ud-bname {
  font-family: 'Lora', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.2;
  margin: 0;
}
.ud-bcat {
  font-size: 11px;
  color: var(--br2);
  font-weight: 600;
  margin-top: 2px;
}
.ud-tagline {
  font-size: 11px;
  color: var(--tx3);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

/* Pill rating bintang */
.rating-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--brl);
  border-radius: 8px;
  padding: 4px 8px;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}
.rn { font-size: 13px; font-weight: 700; color: var(--br); }

/* Body konten detail UMKM */
.ud-body { padding: 0 16px 20px; }
.ud-desc {
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.65;
  padding: 12px 0;
  border-bottom: 1px solid var(--iv2);
}

/* Tombol CTA (WA & Maps) */
.cta-grp {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--iv2);
}
.cta-wa {
  flex: 1;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.cta-map {
  flex: 1;
  background: var(--grl);
  color: var(--gr);
  border: 1.5px solid var(--gr);
  border-radius: 10px;
  padding: 11px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.cta-web {
  display: flex;
  margin-top: 8px;
  background: var(--brl);
  color: var(--br);
  border: 1.5px solid var(--br);
  border-radius: 10px;
  padding: 11px;
  font-size: 12px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

/* Galeri foto produk */
.galeri {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  /* default: 3 kolom (untuk 3 foto) */
  grid-template-columns: repeat(3, 1fr);
}

/* 4 foto atau lebih: 2 kolom, baris otomatis */
.galeri-banyak {
  grid-template-columns: repeat(2, 1fr);
}

.gfoto {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--iv3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .05);
}

/* Grid produk/jasa — 2 kolom, otomatis turun 1 kolom di layar sangat sempit.
   Diganti dari scroll horizontal card supaya semua produk langsung kelihatan
   tanpa perlu geser — lebih mirip daftar menu toko fisik, sesuai karakter
   SIMBAH yang sederhana dan bukan gaya app/e-commerce. */
.prow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcard {
  background: var(--wh);
  border-radius: var(--rs);
  padding: 10px 11px;
  border: 1px solid rgba(0, 0, 0, .07);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0; /* penting untuk grid -- supaya teks panjang bisa wrap, bukan dorong kolom melebar */
}
.pimg {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--grl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.pinfo        { min-width: 0; } /* supaya child-nya (nama/keterangan) bisa wrap di dalam grid item sempit */
.pname        { font-size: 11.5px; font-weight: 700; color: var(--tx); margin-bottom: 2px; line-height: 1.3; }
.pketerangan  { font-size: 10px; color: var(--tx2); line-height: 1.4; }

/* Baris info (jam, lokasi, dll) */
.irow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--iv2);
}
.irico {
  width: 30px;
  height: 30px;
  background: var(--iv2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.irlbl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); margin-bottom: 1px; }
.irval { font-size: 12px; font-weight: 500; color: var(--tx); }

/* Grid tombol sosmed & marketplace */
.sosmed-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 8px 0;
}
.sb-btn {
  background: var(--wh);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 10px;
  padding: 9px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s;
}
.sb-btn:active { transform: scale(.93); }
.sb-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grl);
  color: var(--gr);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-ico svg { width: 17px; height: 17px; }
.sb-lbl { font-size: 9px; font-weight: 600; color: var(--tx2); }

/* Kartu review */

/* Preview peta lokasi */
.mapsbox {
  background: var(--iv2);
  border-radius: 10px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--iv3);
}
.mico { font-size: 28px; }
.mlbl { font-size: 11px; font-weight: 600; color: var(--tx2); }
.maddr { font-size: 10px; color: var(--tx3); text-align: center; padding: 0 16px; }

/* Sub-judul section di detail UMKM */
.ud-sec      { margin-top: 12px; margin-bottom: 6px; }
.ud-sec-ttl  { font-family: 'Lora', serif; font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 8px; }

/* Usaha Terkait — list vertikal compact */
.terkait-list  { display: flex; flex-direction: column; gap: 2px; }
.terkait-item  {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  cursor: pointer; transition: background .12s;
}
.terkait-item:active  { background: var(--grl); }
.terkait-ico   { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.terkait-info  { flex: 1; min-width: 0; }
.terkait-name  { font-size: 13px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terkait-cat   { font-size: 11px; color: var(--tx3); margin-top: 1px; }

/* Revisi Data — sengaja kalem, BUKAN tombol solid seperti .cta-wa.
   Ini ditujukan ke pemilik usaha (kasus jarang), bukan pengunjung
   biasa — kalau desainnya semenonjol CTA WhatsApp utama, malah
   bikin bingung mana yang harus diklik orang kebanyakan. */
.ud-revisi {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--iv3);
  border-radius: var(--r);
  background: var(--iv2);
  text-align: center;
}
.ud-revisi-ttl {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: 3px;
}
.ud-revisi-desc {
  font-size: 12px;
  color: var(--tx3);
  line-height: 1.5;
  margin-bottom: 8px;
}
.ud-revisi-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  text-decoration: none;
}
.ud-revisi-link:active { color: var(--gr); }
.terkait-arr   { font-size: 18px; color: var(--tx3); flex-shrink: 0; line-height: 1; }


/* ================================================
   18. TENTANG DUSUN
   ================================================ */
.tentang-hero {
  background: linear-gradient(155deg, #1E4230, var(--gr));
  padding: 20px 16px 24px;
  flex-shrink: 0;
  text-align: left;
}
.tentang-logo { width: 52px; height: 52px; object-fit: contain; margin-bottom: 10px; }
.tentang-name { font-family: 'Lora', serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.tentang-loc  { font-size: 11px; color: rgba(255, 255, 255, .65); }

/* Kartu struktur pengurus */
.org-card {
  background: var(--wh);
  border-radius: var(--r);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, .05);
}
.org-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.org-role { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--br2); margin-bottom: 1px; }
.org-name { font-size: 13px; font-weight: 700; color: var(--tx); }

/* Motto Dusun — kotak kutipan kecil di bawah paragraf Profil */
.motto-box {
  margin-top: 14px;
  background: var(--brl);
  border-left: 3px solid var(--br);
  border-radius: var(--rs);
  padding: 10px 13px;
}
.motto-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--br);
  margin-bottom: 3px;
}
.motto-text {
  font-family: 'Lora', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  font-style: italic;
}

/* Visi & Misi */
.visi-box {
  background: var(--grl);
  border-left: 3px solid var(--gr);
  border-radius: var(--rs);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.visi-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gr);
  margin-bottom: 4px;
}
.visi-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.6;
  font-style: italic;
}
.misi-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 8px;
}
.misi-list {
  margin: 0;
  padding-left: 18px;
}
.misi-list li {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.6;
  margin-bottom: 7px;
}

/* Data Wilayah — grid placeholder, menunggu data resmi */
.datawilayah-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dw-item {
  background: var(--iv2);
  border-radius: var(--rs);
  padding: 10px 12px;
}
.dw-lbl {
  font-size: 10px;
  color: var(--tx3);
  font-weight: 600;
  margin-bottom: 3px;
}
.dw-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
}
.dw-pending {
  color: var(--br2);
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
}

/* Sub-tab halaman Tentang Dusun — pola CSS IDENTIK dengan
   .filter-row/.fchip (filter kategori UMKM) yang sudah terbukti
   jalan di situs ini, supaya minim risiko gagal render. */
.tentang-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: none;
  background: var(--wh);
  border-bottom: 1px solid var(--iv2);
  flex-shrink: 0;
}
.tentang-tabs::-webkit-scrollbar { display: none; }

.ttab {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--iv3);
  background: var(--wh);
  color: var(--tx2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
}
.ttab.active {
  background: var(--gr);
  color: #fff;
  border-color: var(--gr);
}

.sejarah-h {
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--gr);
  margin-top: 16px;
  margin-bottom: 6px;
}
.sejarah-p {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.7;
  margin-bottom: 10px;
}
.sejarah-list {
  margin: 0 0 10px;
  padding-left: 18px;
}
.sejarah-list li {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.7;
  margin-bottom: 3px;
}
.sejarah-disclaimer {
  background: #FFFBEB;           /* kuning amber sangat muda — lebih mencolok dari --brl biasa */
  border: 2px solid #D97706;     /* amber-600, lebih gelap dan tebal supaya jelas */
  border-left: 5px solid #D97706; /* aksen kiri ekstra tebal, pola visual "peringatan" */
  border-radius: var(--rs);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sd-label {
  font-size: 13px;
  font-weight: 800;              /* extra bold supaya label peringatan lebih terlihat */
  color: #92400E;                /* amber-800, kontras kuat di atas kuning muda */
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.sd-text {
  font-size: 12px;
  color: #451A03;                /* amber-950, hampir coklat gelap — mudah dibaca */
  line-height: 1.7;
}
.sd-text strong {
  color: #92400E;                /* amber-800, sama dengan label */
  font-weight: 700;
}
.sejarah-catatan {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--iv2);
}
.sc-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 6px;
}
.sc-text {
  font-size: 11.5px;
  color: var(--tx3);
  line-height: 1.7;
  margin-bottom: 10px;
}
.sc-question {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 6px;
}
.sejarah-link-wa {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: #25D366;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
}

/* ================================================
   SEJARAH ACCORDION — native <details>/<summary>
   ------------------------------------------------
   Tanpa JS, tanpa library, 0 dependency.
   Tiap <details class="sej-acc"> adalah 1 topik
   yang bisa dibuka/tutup sendiri-sendiri.
   ================================================ */
.sej-acc {
  border: 1px solid var(--iv3);
  border-radius: var(--rs);
  margin-bottom: 8px;
  background: var(--wh);
  overflow: hidden;
}
.sej-acc[open] {
  border-color: var(--gr);
  box-shadow: 0 0 0 1px var(--grl);
}

/* Summary = judul accordion — klik untuk buka/tutup */
.sej-acc-sum {
  font-family: 'Lora', serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gr);
  padding: 13px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  user-select: none;
  transition: background .12s;
}
/* Hapus marker default di semua browser */
.sej-acc-sum::-webkit-details-marker { display: none; }
.sej-acc-sum::marker               { display: none; content: ''; }

.sej-acc-sum:hover   { background: var(--grl); }
.sej-acc[open] .sej-acc-sum { background: var(--grl); }

/* Chevron custom di kanan judul */
.sej-acc-sum::after {
  content: '\203A';             /* › karakter unicode */
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--br);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
  display: inline-block;
}
.sej-acc[open] > .sej-acc-sum::after {
  transform: rotate(90deg);
}

/* Body konten dalam accordion */
.sej-acc-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--iv2);
}

/* ===== Item tradisi (Resik Kubur, Selikuran, Gotong Royong) ===== */
.sej-tradisi-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--iv3);
}
.sej-tradisi-ico {
  width: 36px;
  height: 36px;
  background: var(--grl);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sej-tradisi-nm {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 4px;
}

/* ===== Grid Warisan Nilai ===== */
.sej-nilai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.sej-nilai-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--iv2);
  border-radius: var(--rs);
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2);
}
.sej-nilai-item span { line-height: 1.3; }

/* ===== Card Dokumentasi — polished versi baru ===== */
.sej-catatan-card {
  margin-top: 14px;
  background: var(--iv2);
  border-radius: var(--r);
  border: 1px solid var(--iv3);
  overflow: hidden;
}
.sej-catatan-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--iv3);
}
.sej-catatan-ico {
  width: 36px;
  height: 36px;
  background: var(--wh);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  border: 1px solid var(--iv3);
}
.sej-catatan-ttl {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.2;
}
.sej-catatan-sub {
  font-size: 10px;
  color: var(--tx3);
  margin-top: 1px;
}
.sej-catatan-txt {
  font-size: 11.5px;
  color: var(--tx3);
  line-height: 1.7;
  padding: 11px 14px;
  border-bottom: 1px solid var(--iv3);
  margin: 0;
}
.sej-catatan-cta {
  padding: 12px 14px;
  background: var(--wh);
}
.sej-catatan-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 9px;
  line-height: 1.4;
}
.sej-catatan-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25D366;
  color: #fff;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s;
}
.sej-catatan-wa:hover { opacity: .88; }

/* ===== Sub-judul di dalam accordion body ===== */
.sej-sub-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx);
  background: var(--iv2);
  border-left: 3px solid var(--br);
  padding: 7px 10px;
  border-radius: 0 var(--rs) var(--rs) 0;
  margin: 12px 0 8px;
}

/* ===== Blok sumber rujukan di catatan card ===== */
.sej-sumber {
  padding: 12px 14px;
  border-bottom: 1px solid var(--iv3);
  background: var(--iv2);
}
.sej-sumber-ttl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tx3);
  margin-bottom: 10px;
}
.sej-sumber-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--iv3);
}
.sej-sumber-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.sej-sumber-ico {
  font-size: 16px;
  width: 28px;
  height: 28px;
  background: var(--wh);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--iv3);
}
.sej-sumber-nm {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 3px;
}
.sej-sumber-det {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.6;
}


/* ================================================
   19. FOOTER
   ------------------------------------------------
   Struktur baru (versi "low-profile"): grid 2 kolom
   di desktop (kiri: brand+sosmed, kanan: alamat+kontak),
   otomatis jadi 1 kolom stack di mobile lewat CSS Grid
   (tidak perlu HTML terpisah untuk mobile/desktop).
   ================================================ */
.footer {
  background: var(--gr);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .07) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(0, 0, 0, .12) 0%, transparent 45%);
  padding: 24px 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--br);
}

/* Watermark kiri atas — pasangan diagonal dari watermark kanan bawah.
   Lebih kecil dan lebih transparan supaya hierarki visual tetap ke kanan bawah. */
.footer::before {
  content: '';
  position: absolute;
  left: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  background-image: url('/img/branding/watermark-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .07;
  transform: rotate(165deg);
  pointer-events: none;
}

/* Watermark logo SIMBAH — vektor bersih, miring, pojok kanan bawah.
   Pakai SVG putih murni (bukan PNG + filter) supaya tajam di semua layar.
   Off-center supaya tidak terasa seperti template. */
.footer::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -48px;
  width: 300px;
  height: 300px;
  background-image: url('/img/branding/watermark-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .13;
  transform: rotate(-15deg);
  pointer-events: none;
}

.ft-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: 1 kolom */
  gap: 22px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.ft-col { min-width: 0; }

.ft-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ft-logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.ft-name { font-family: 'Lora', serif; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.ft-sub  { font-size: 10px; color: rgba(255, 255, 255, .5); margin-top: 2px; }

.ft-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
  margin-bottom: 12px;
}

.ft-tagline {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  font-style: italic;
  padding-top: 11px;
  margin-bottom: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.ft-addr {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.7;
  margin-bottom: 14px;
}

.ft-contact    { display: flex; flex-direction: column; gap: 9px; }
.ft-citem {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.ft-cico {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, .4);
}
.ft-cico svg { width: 15px; height: 15px; }
.ft-cval { font-size: 11.5px; color: rgba(255, 255, 255, .7); font-weight: 500; }

.ft-socials    { display: flex; gap: 8px; }
.ft-soc {
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border: 1.4px solid rgba(255, 255, 255, .35);
  transition: background .15s ease, border-color .15s ease;
}
.ft-soc:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .65); }
.ft-soc svg { width: 14px; height: 14px; display: block; }

.ft-copy {
  font-size: 10px;
  color: rgba(255, 255, 255, .3);
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  position: relative;
  z-index: 1;
}

.ft-credit {
  font-size: 9px;
  color: rgba(255, 255, 255, .22);
  text-align: center;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.ft-credit a {
  color: rgba(255, 255, 255, .32);
  font-size: 9px;
  text-decoration: none;
  transition: color .15s ease;
}
.ft-credit a:hover { color: var(--br2); }


/* ================================================
   19B. SECTION POTENSI / KENALI NGEMPLAK
   Hook untuk orang luar — ringkasan apa yang
   dusun ini tawarkan, sebelum mereka baca profil
   ================================================ */
.potensi-hook {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.7;
  margin-bottom: 16px;
  font-style: italic;
  border-left: 3px solid var(--gr);
  padding-left: 12px;
}

.potensi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.pot-item {
  background: var(--wh);
  border-radius: var(--rs);
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--iv3);
}
.pot-ico { font-size: 22px; margin-bottom: 4px; }
.pot-num {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gr);
  line-height: 1;
  margin-bottom: 2px;
}
.pot-lbl { font-size: 9px; color: var(--tx3); font-weight: 600; }

.potensi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ptag {
  font-size: 11px;
  font-weight: 600;
  background: var(--grl);
  color: var(--gr);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(45, 90, 61, .15);
}

.potensi-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 1.5px solid var(--gr);
  border-radius: var(--rs);
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gr);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.potensi-cta:hover { background: var(--gr); color: #fff; }


/* ================================================
   20. MENU NAVIGASI DESKTOP
   ------------------------------------------------
   Menu mendatar di header — defaultnya TERSEMBUNYI.
   Baru muncul kalau layar lebar (lihat blok
   RESPONSIVE DESKTOP di bawah).
   ================================================ */
.dnav {
  display: none; /* sembunyi di mobile — diaktifkan lewat @media */
  align-items: center;
  justify-content: center; /* nav selalu di tengah kolom tengah */
  gap: 4px;
}
.dn-item {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.dn-item:hover  { background: rgba(255, 255, 255, .1); color: #fff; }
.dn-item.active { background: rgba(255, 255, 255, .16); color: #fff; }

/* Dropdown "Lainnya" — wadah Kas & Inventaris yang turun prioritas */
.dn-dropdown-wrap {
  position: relative;
}
.dn-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dn-chevron {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
.dn-dropdown-btn.open .dn-chevron {
  transform: rotate(180deg);
}
.dn-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--wh);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 150;
}
.dn-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dn-dropdown-item {
  background: none;
  border: none;
  color: var(--tx);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.dn-dropdown-item:hover  { background: var(--iv2); }
.dn-dropdown-item.active { background: var(--grl); color: var(--gr); }


/* ================================================
   21. RESPONSIVE DESKTOP — Layout Penuh
   ------------------------------------------------
   Di atas 1024px (laptop/PC), SIMBAH berubah dari
   "phone shell" jadi tampilan WEBSITE PENUH:
   - Status bar palsu (jam HP) disembunyikan
   - Bottom nav & menu sheet disembunyikan
   - Menu mendatar di header dimunculkan
   - Bingkai HP dilepas, konten melebar
   - Grid menyesuaikan jadi lebih banyak kolom

   PENTING — tidak ada satupun aturan di ATAS bagian
   ini yang diubah. Semua di bawah ini sifatnya
   "override" tambahan, supaya mobile tetap aman.
   ================================================ */
@media (min-width: 1024px) {

  /* ---- Container utama lepas dari batas app-style 480px ---- */
  .phone {
    max-width: none;
  }

  /* ---- Sembunyikan elemen khusus mobile ---- */
  .bnav,                /* bottom nav */
  .sheet,               /* menu laci bawah */
  .sheet-overlay {      /* overlay gelap menu laci */
    display: none !important;
  }

  /* ---- Hapus padding-bottom mobile (ruang bnav fixed) ----
     Di desktop bnav hidden → padding 76px jadi space putih kosong. */
  .pages {
    padding-bottom: 0;
  }

  /* ---- Tombol kembali ke atas: turun ke pojok asli karena
     .bnav sudah disembunyikan, tidak perlu jarak aman lagi ---- */
  .btt {
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
  }

  /* ---- Tampilkan menu navigasi desktop ---- */
  .dnav { display: flex; }

  /* ---- Header jadi navbar lebar, menempel di atas ---- */
  .hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 14px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    display: flex;
  }
  /* Nav absolute center — tidak ikut flow flex sama sekali,
     logo di kiri & pill di kanan tidak terpengaruh */
  .dnav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    margin-top: -16px; /* setengah tinggi nav (32px) */
  }
  /* Pill absolute di kanan, dropdown ikut */
  .search-pill   { right: 32px; }
  .search-dropdown { right: 32px; }
  .hlogo img  { width: 40px; height: 40px; }
  .hbrand     { font-size: 17px; }
  .hsub       { font-size: 10px; }

  /* ---- Section: BACKGROUND full-width, KONTEN dibatasi & center ----
     Dulu pakai max-width:1100px + margin:auto LANGSUNG di section ini
     — itu bikin BACKGROUND-nya juga ikut kebatasi, jadi di monitor lebar
     (1440px+) keliatan seperti "kotak warna di tengah" dengan gap kosong
     krem di kanan-kiri (paling jelas terlihat di .footer yang warnanya
     solid hijau).

     SEKARANG: section ini full-width (background otomatis mengisi
     seluruh viewport), padding horizontal-nya pakai variable --side
     yang dihitung otomatis via calc() supaya KONTEN tetap rapi di
     tengah dengan lebar maksimal ~1100px — efek visual identik dengan
     "max-width:1100px + margin:auto", tapi background full.

     PENTING: --side dipakai di "padding-left/right" pada section yang
     JUGA punya padding-top/bottom sendiri (override di bawah) — supaya
     tidak konflik, padding atas/bawah tiap section TETAP ditulis
     terpisah pakai shorthand "padding: atas SISI-VAR bawah" (lihat
     .hero, .sec, dst di bawah), BUKAN shorthand "padding: X Y" polos. */
  :root {
    --side: max(40px, calc((100vw - 1100px) / 2));
  }
  .hero, .sec, .ticker, .filter-row, .ugrid,
  .phdr, .tentang-hero, .tentang-tabs, .footer {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .ugrid { display: grid; } /* pastikan grid tetap grid setelah max-width */

  /* ---- HERO — lebih besar & lega di desktop, foto keliatan lebih luas ---- */
  .hero {
    padding: 28px var(--side) 24px;
    border-radius: 0;
    min-height: 420px;
    background-position: center 25%;
  }
  .hero-ttl  { font-size: 38px; }
  .hero-tag  { font-size: 14px; max-width: 420px; }
  .hero-stats { gap: 14px; }
  .hero-cta  { display: flex; } /* tampilkan di desktop */
  .hstat { padding: 12px 18px; }
  .hstat .num { font-size: 22px; }

  /* ---- Trust strip — sedikit lebih besar di desktop ---- */
  .trust-strip { display: none; } /* digantikan hero-trust di dalam hero */
  .hero-trust {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.18);
    max-width: 400px;
  }
  .ht-num { font-size: 24px; }
  .ht-lbl { font-size: 9.5px; }

  /* ---- Section judul lebih besar ---- */
  .sec { padding: 28px var(--side); }
  .sec-ttl { font-size: 19px; }

  /* ---- Section lain yang juga butuh padding var(--side) di desktop ----
     (sebelumnya cuma warisan padding mobile setelah max-width dihapus) */
  .ticker     { padding: 7px var(--side); }
  .filter-row { padding: 10px var(--side) 8px; }
  .phdr       { padding: 10px var(--side) 14px; }
  .tentang-hero { padding: 20px var(--side) 24px; }
  .tentang-tabs { padding: 12px var(--side); }

  /* ---- Grid Layanan desktop — hero lebih besar, mini tetap 4 kolom ---- */
  .g-hero {
    gap: 12px;
    margin-bottom: 12px;
  }
  .srv-hero {
    padding: 22px 14px;
    gap: 9px;
  }
  .srv-hero span { font-size: 14px; }
  .sico      { width: 54px; height: 54px; font-size: 26px; }
  .g-mini    { gap: 10px; }
  .sico-mini { width: 36px; height: 36px; font-size: 17px; }
  .srv-mini span { font-size: 10px; }

  /* ---- Grid UMKM — 4 kolom ---- */
  .ugrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .ug-img  { height: 130px; font-size: 44px; }

  /* ---- Kartu UMKM horizontal (beranda) — lebih lebar ----
     CATATAN: padding & max-width di sini cocok untuk konteks
     LAMA (1 kolom lebar penuh). Sekarang .urow ada di dalam
     kolom kiri grid 2-kolom (lihat .beranda-grid-desktop di
     bawah) yang sudah punya padding sendiri dari wrapper —
     override-nya ada di bagian LAYOUT 2-KOLOM BERANDA di bawah. */
  .urow { padding: 4px 0; }
  .ucard { min-width: 200px; }
  .uimg  { height: 120px; font-size: 42px; }

  /* ---- Kartu agenda, kas, dll — sedikit lebih lega ---- */
  .ag, .trx, .inv, .nt-card, .org-card {
    padding: 14px 18px;
  }

  /* ---- Halaman Agenda penuh — dibatasi lebar juga ----
     #agenda-page-list tidak punya background sendiri (transparan),
     jadi cukup max-width+margin:auto biasa, tidak perlu var(--side). */
  #agenda-page-list {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Halaman detail UMKM — dibatasi lebar juga ---- */
  .ud-logo-strip, .ud-body {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .ud-cover { height: 360px; font-size: 90px; }
  .ud-cover img { object-position: center 20%; }

  /* ====================================================
     LAYOUT 2-KOLOM BERANDA (DESKTOP SAJA)
     ----------------------------------------------------
     Kolom kiri (lebar, ~2/3)  : UMKM Unggulan + Inventaris
     Kolom kanan (sidebar,1/3) : Nyuwun Tulung → Agenda → Kas
     (sidebar disusun dari yang paling mendesak/sering
     dicek dulu — kontak darurat di atas, kas paling bawah)

     Section di dalam wrapper ini di-reset max-width-nya
     (jadi 100% mengisi kolom grid masing-masing) — TANPA
     mengubah aturan .sec global yang masih dipakai
     halaman lain (Agenda, Kas, dll yang tetap 1 kolom).
     ==================================================== */
  .beranda-grid-desktop {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "umkm       nyuwun"
      "potensi    agenda"
      "inventaris kas";
    column-gap: 24px;
    align-items: start;
    /* Rata dengan hero/ticker/layanan-warga di atasnya.
       Pakai padding var(--side) — identik dengan .sec global.
       Tidak pakai max-width+margin:auto sekaligus karena dobel-indent. */
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--side);
  }

  .bg-area-umkm       { grid-area: umkm; }
  .bg-area-potensi    { grid-area: potensi; }
  .bg-area-inventaris { grid-area: inventaris; }
  .bg-area-nyuwun     { grid-area: nyuwun; }
  .bg-area-agenda     { grid-area: agenda; }
  .bg-area-kas        { grid-area: kas; }

  /* Desktop: urow berubah dari scroll horizontal jadi grid 4 kolom 2 baris.
     8 card langsung kelihatan semua, tidak perlu digeser. */
  #umkm-beranda-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow-x: visible;
    padding-bottom: 0;
  }
  #umkm-beranda-list .ucard {
    min-width: 0;
  }

  /* Section di dalam grid 2-kolom: lebar penuh kolom,
     tanpa max-width/margin sendiri (beda dari .sec biasa
     yang di luar wrapper ini, itu tetap max-width 1100px).
     Selector ditarget hanya ke .sec yang LANGSUNG anak
     wrapper (Agenda, Kas, Inventaris, Nyuwun) — TIDAK
     menimpa .sec di dalam .bg-area-umkm yang sudah punya
     padding-bottom:0 inline secara sengaja. */
  .beranda-grid-desktop > .sec {
    max-width: none;
    margin: 0;
    padding: 24px 0;
  }
  .bg-area-umkm {
    max-width: none;
    margin: 0;
  }
  .bg-area-umkm .sec {
    padding: 24px 0 0; /* header tetap rapat ke urow di bawahnya */
  }

  /* Divider abu-abu (.div8) antar section TIDAK relevan lagi
     di layout grid 2-kolom (soalnya posisinya udah diatur grid,
     bukan stacking vertikal) — sembunyikan supaya tidak muncul
     sebagai garis aneh memotong tengah grid. */
  .bg-divider {
    display: none;
  }

  /* Card di sidebar kanan (Nyuwun Tulung, Agenda, Kas) sedikit
     dirapatkan paddingnya — supaya 3 section ini tidak terlalu
     "renggang" dibanding 1 card besar UMKM di kolom kiri */
  .bg-area-nyuwun, .bg-area-agenda, .bg-area-kas {
    padding-top: 0;
  }
  .bg-area-nyuwun { padding-top: 24px; }

  /* ---- Footer — sedikit lebih lega, grid 2 kolom, BACKGROUND full-width ---- */
  .footer { padding: 32px var(--side); }
  .ft-grid {
    grid-template-columns: 3fr 2fr;
    gap: 48px;
    max-width: 1100px; /* konten footer tetap dibatasi & center, background-nya full */
  }

  /* Watermark logo perlu lebih besar di desktop — footer jauh lebih
     lebar, ukuran mobile (220px) jadi terlalu kecil secara proporsi */
  .footer::after {
    width: 340px;
    height: 340px;
    right: -70px;
    bottom: -80px;
  }
}


/* ================================================
   CATATAN UNTUK PENGEMBANGAN LANJUTAN
   ------------------------------------------------
   Breakpoint dipakai 1024px (bukan 768px) supaya
   tablet ukuran sedang masih dapat tampilan mobile
   yang sudah teruji, dan hanya layar laptop/PC ke atas
   yang dapat layout desktop penuh ini.

   Kalau nanti mau menambah breakpoint KHUSUS TABLET
   (768px–1023px) sebagai versi tengah-tengah, itu bisa
   ditambahkan sebagai blok @media baru terpisah —
   tidak akan mengganggu blok mobile maupun desktop
   yang sudah ada di atas.
   ================================================ */


/* ================================================
   FAQ — Halaman Detail UMKM
   Native <details>/<summary>, tanpa JS, tanpa library.
   Pola sama seperti accordion Sejarah Dusun.
   ================================================ */
.faq-item {
  border: 1px solid var(--iv3);
  border-radius: var(--rs);
  margin-bottom: 7px;
  background: var(--wh);
  overflow: hidden;
}
.faq-item[open] {
  border-color: var(--gr);
}
.faq-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  padding: 12px 36px 12px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  transition: background .12s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { display: none; content: ''; }
.faq-q::after {
  content: '+';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 400;
  color: var(--gr);
  line-height: 1;
  transition: transform .2s ease;
}
.faq-item[open] > .faq-q::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-item[open] > .faq-q {
  background: var(--grl);
  color: var(--gr);
}
.faq-a {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.7;
  padding: 10px 13px 13px;
  border-top: 1px solid var(--iv2);
}


/* ================================================
   FOTO UMKM — Cover & Galeri (gambar asli)
   ------------------------------------------------
   Dulu semua card UMKM pakai emoji sebagai ikon.
   Sekarang ada foto asli — CSS di sini supaya foto
   tampil proporsional di semua kontainer kartu.
   ================================================ */

/* Cover foto besar di halaman detail UMKM */
.ud-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback cover kalau tidak ada foto — gradien + emoji + nama */
.ud-cover-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.ud-cover-emoji {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.ud-cover-name {
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  text-align: center;
  padding: 0 24px;
  line-height: 1.3;
}

/* Thumbnail di grid UMKM (halaman Lapak Warga) */
.ug-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnail di kartu horizontal (Beranda) */
.uimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Foto di galeri detail UMKM */
.gfoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}