/* ==========================================================================
   Koperasi Kelurahan Merah Putih Latsari
   Tema: hangat & membumi — merah-hijau alami, krem tanah, gotong royong
   ========================================================================== */

:root{
  --merah:#B3261E;
  --merah-terang:#D93A2B;
  --merah-tua:#8A1B15;
  --merah-lembut:#FBEDEA;

  --hijau:#4F7A34;
  --hijau-terang:#7FA84E;
  --hijau-lembut:#EDF3E3;

  --krem:#FBF6EC;
  --krem-2:#F5EADA;
  --garis:#E8DCC6;

  --ink:#2A241E;
  --ink-lembut:#6B6153;
  --emas:#C08A2E;

  --radius:18px;
  --radius-besar:26px;
  --bayang:0 12px 34px rgba(90,64,26,.10);
  --bayang-kecil:0 4px 14px rgba(90,64,26,.08);
  --wrap:1140px;
  --font-teks:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-judul:"Fraunces",Georgia,"Times New Roman",serif;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-teks);
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink);
  background-color:var(--krem);
  background-image:
    radial-gradient(760px 520px at 8% -6%, rgba(217,58,43,.13), transparent 62%),
    radial-gradient(680px 520px at 96% 4%, rgba(127,168,78,.18), transparent 60%),
    radial-gradient(900px 620px at 50% 118%, rgba(192,138,46,.12), transparent 64%),
    repeating-linear-gradient(135deg, rgba(90,64,26,.032) 0 1px, transparent 1px 13px);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--merah);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-judul);font-weight:700;line-height:1.22;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.15rem)}
h2{font-size:clamp(1.5rem,2.7vw,2.15rem)}
h3{font-size:1.22rem}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.4em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
/* Kepala halaman memakai wadah lebih lebar supaya nama koperasi & menu utama
   semuanya muat dalam satu baris di layar komputer. */
.wrap-lebar{max-width:1300px}

.lewati{
  position:absolute;left:-9999px;top:0;background:#fff;color:var(--merah);
  padding:10px 16px;z-index:99;border-radius:0 0 12px 0
}
.lewati:focus{left:0}

/* ---------- pita atas ---------- */
.pita-atas{
  background:linear-gradient(96deg,var(--merah-tua),var(--merah) 55%,#9E3323);
  color:#FDF3EF;font-size:.8rem;padding:8px 0
}
.pita-atas-isi{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.pita-kiri{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;min-width:0}
/* Jam: hari, tanggal, dan pukul di pojok kanan atas. */
.pita-jam{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:3px 14px;font-size:.78rem;font-variant-numeric:tabular-nums
}
.pita-jam-tanggal{opacity:.95}
.pita-jam-pukul{font-weight:700;letter-spacing:.02em}
@media (max-width:1080px){
  .pita-atas-isi{justify-content:center;text-align:center}
  .pita-jam{order:-1}
}
.pita-lencana{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:2px 12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem
}
.pita-teks{opacity:.94}

/* ---------- kepala ---------- */
.kepala{
  position:sticky;top:0;z-index:40;
  background:rgba(251,246,236,.9);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--garis)
}
.kepala-isi{
  display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding-top:11px;padding-bottom:11px;position:relative
}
.merek{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;flex:none}
.merek:hover{text-decoration:none}
.merek-logo{width:54px;height:54px;flex:none}
.merek-teks{display:flex;flex-direction:column;line-height:1.22;min-width:0}
.merek-teks strong,.merek-teks em{white-space:nowrap}
.merek-teks strong{font-family:var(--font-judul);font-size:1rem;color:var(--ink)}
.merek-teks em{font-style:normal;font-weight:700;color:var(--merah);font-size:1rem;font-family:var(--font-judul)}
.merek-teks small{color:var(--ink-lembut);font-size:.75rem;white-space:nowrap}

.togel-nav{display:none}
.tombol-togel{display:none}

.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  color:var(--ink);font-weight:600;font-size:.88rem;padding:8px 10px;border-radius:11px;
  transition:background .16s ease,color .16s ease;white-space:nowrap
}
.nav a:hover{background:var(--krem-2);color:var(--merah-tua);text-decoration:none}
.nav a.aktif{color:var(--merah);background:var(--merah-lembut)}

/* ---------- tombol ---------- */
.tombol{
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(120deg,var(--merah),#C33427 60%,#A82A18);
  color:#fff;font-weight:700;font-size:.96rem;
  padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:var(--shadow-tombol);
  transition:transform .16s ease, box-shadow .16s ease
}
.tombol:hover{transform:translateY(-2px);box-shadow:var(--shadow-tombol-hover);text-decoration:none;color:#fff}
.tombol-hijau{background:linear-gradient(120deg,var(--hijau),#5E8B3D);box-shadow:var(--shadow-tombol-hijau)}
.tombol-hijau:hover{box-shadow:var(--shadow-tombol-hijau-hover)}
.tombol-garis{
  background:rgba(255,255,255,.72);color:var(--merah-tua);border:1.6px solid var(--merah);
  box-shadow:var(--bayang-kecil)
}
.tombol-garis:hover{background:#fff;color:var(--merah-tua)}
.tombol-kecil{padding:10px 18px;font-size:.88rem}
/* Tombol ajakan di kepala halaman: dijaga sebaris dengan item menu. */
.nav .tombol-kecil{padding:9px 16px;font-size:.86rem;margin-left:6px}
/* Tombol "Daftar Anggota": kotak merah dengan tulisan putih (bukan gradien). */
.tombol-kotak{
  background:var(--merah);color:#FFFFFF;border-radius:var(--radius-md);box-shadow:none;
  padding:11px 20px;font-weight:700
}
.tombol-kotak:hover{background:var(--merah-tua);color:#FFFFFF;transform:none;box-shadow:var(--shadow-tombol)}
.tombol-lebar{width:100%;justify-content:center}

/* ---------- bagian & judul ---------- */
.bagian{padding:62px 0}
.bagian-rapat{padding:34px 0 62px}
.bagian-krem{background:linear-gradient(180deg,rgba(245,234,218,.72),rgba(251,246,236,.2));border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.bagian-hijau{background:linear-gradient(160deg,#3F6529,#4F7A34 55%,#456E2D);color:#F3F7EC}
.bagian-hijau h2,.bagian-hijau h3{color:#fff}
.bagian-hijau a{color:#DCEBC8}

.judul-bagian{max-width:760px;margin-bottom:34px}
.judul-bagian.tengah{margin-left:auto;margin-right:auto;text-align:center}
.lencana{
  display:inline-block;background:var(--hijau-lembut);color:var(--hijau);
  border:1px solid rgba(79,122,52,.22);border-radius:999px;
  padding:5px 15px;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px
}
.lencana-merah{background:var(--merah-lembut);color:var(--merah);border-color:rgba(179,38,30,.2)}
.judul-bagian p{color:var(--ink-lembut);font-size:1.03rem;margin-bottom:0}
.bagian-hijau .judul-bagian p{color:rgba(255,255,255,.86)}

/* ==========================================================================
   BERANDA ATAS bergaya Kemenkop
   Susunan: slider berita (foto kiri + panel teks kanan) 15 detik,
            News Flash, lalu slider poster + panel Instagram.
   ========================================================================== */
.beranda-atas{padding:26px 0 6px;position:relative}

/* ---------- slider berita: foto + panel teks ---------- */
.bk-berita{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:0;
  border-radius:var(--radius-besar);overflow:hidden;
  background:#2F4B22;box-shadow:var(--bayang);border:1px solid var(--garis)
}
.bk-slider{position:relative;min-height:400px;background:#241E16;overflow:hidden}
.bk-slide{
  position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .7s ease
}
.bk-slide.aktif{opacity:1;visibility:visible}
.bk-slide img{width:100%;height:100%;object-fit:cover;display:block}
.bk-slide-judul{
  position:absolute;left:0;right:0;bottom:0;padding:44px 26px 22px;
  background:linear-gradient(to top,rgba(20,15,9,.9),rgba(20,15,9,.45) 60%,transparent);
  color:#FFFDF8;font-family:var(--font-judul);font-size:clamp(1.15rem,2.1vw,1.6rem);
  font-weight:700;line-height:1.3
}
.bk-slide-judul em{
  display:block;font-style:normal;font-family:var(--font-teks);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#F5C36B;margin-bottom:6px
}
.bk-titik{position:absolute;left:22px;bottom:16px;display:flex;gap:8px;z-index:3}
.bk-titik-item{
  width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65)
}
.bk-titik-item.aktif{background:#F5C36B;border-color:#F5C36B;transform:scale(1.2)}
.bk-panah{
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.95rem;line-height:1;
  background:rgba(255,255,255,.9);border:1px solid var(--garis);color:var(--ink)
}
.bk-panah:hover{background:#fff}

.bk-panel{
  padding:28px 26px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg,#43682C,#5C8A38 55%,#3F6529);color:#F3F7EC
}
.bk-panel-label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#F5C36B;margin-bottom:12px
}
.bk-panel-item{display:none}
.bk-panel-item.aktif{display:block;animation:bkMuncul .5s ease}
@keyframes bkMuncul{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bk-panel-item h2{
  font-size:clamp(1.1rem,1.7vw,1.45rem);color:#fff;margin-bottom:.5em;line-height:1.3
}
.bk-panel-item p{color:rgba(243,247,236,.92);font-size:.95rem;margin-bottom:.9em;max-width:62ch}
.bk-panel-item h2{max-width:34ch}
.bk-panel-meta{font-size:.78rem;color:rgba(243,247,236,.7);margin-bottom:1.1em}
.bk-panel .tombol{background:#fff;color:#3F6529;box-shadow:none;align-self:flex-start}
.bk-panel .tombol:hover{background:#F5C36B;color:#2F4B22}

/* ---------- blok sambutan (teks yang diatur pengurus) ---------- */
.bk-sambutan{
  display:grid;grid-template-columns:minmax(0,1.6fr) auto;gap:26px;align-items:center;
  margin-top:22px;padding:26px 28px;
  background:rgba(255,255,255,.72);border:1px solid var(--garis);border-radius:var(--radius-besar);
  box-shadow:var(--bayang-kecil)
}
.bk-sambutan h1{font-size:clamp(1.4rem,2.4vw,1.95rem);margin-bottom:.35em}
.bk-sambutan h1 span{color:var(--merah)}
.bk-sambutan-teks p{color:var(--ink-lembut);margin-bottom:.9em;max-width:70ch}
.bk-sambutan-tombol{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:.6em}
.bk-sambutan-catatan{font-size:.86rem;color:var(--ink-lembut);margin:0}
.bk-sambutan-lambang{
  position:relative;width:150px;height:150px;flex:none;
  background:linear-gradient(160deg,#EDF3E3,#F5EADA);border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--garis);padding:14px
}
.bk-sambutan-lambang img{width:100%;height:100%;object-fit:contain}
.bk-sambutan-lambang .hero-cip{position:static;margin-top:6px;font-size:.72rem;white-space:nowrap}
.bk-sambutan-lambang .hero-cip.cip-atas{position:absolute;top:-10px;left:50%;transform:translateX(-50%)}
.bk-sambutan-lambang .hero-cip.cip-bawah{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%)}

/* ---------- News Flash ---------- */
.nf{
  display:flex;align-items:center;gap:18px;margin-top:20px;
  background:rgba(255,255,255,.9);border:1px solid var(--garis);border-radius:var(--radius);
  padding:12px 16px;box-shadow:var(--bayang-kecil)
}
.nf-lencana{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(120deg,var(--merah),#C33427);color:#fff;
  font-weight:700;font-size:.86rem;letter-spacing:.02em;
  padding:9px 18px;border-radius:999px;box-shadow:var(--shadow-tombol)
}
.nf-isi{position:relative;flex:1;min-width:0;min-height:34px;display:flex;align-items:center}
.nf-item{
  position:absolute;inset:0;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(8px);visibility:hidden;
  transition:opacity .45s ease,transform .45s ease;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;overflow:hidden
}
.nf-item.aktif{opacity:1;transform:none;visibility:visible;position:relative}
.nf-item em{font-style:normal;font-size:.76rem;color:var(--ink-lembut);flex:none}
.nf-item span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.nf-item b{flex:none;font-size:.84rem;color:var(--merah);font-weight:700}
.nf-item:hover span{text-decoration:underline}
.nf-panah{flex:none;display:flex;gap:6px}
.nf-kosong .nf-item{position:relative;color:var(--ink-lembut);font-weight:500}

/* ---------- poster + instagram ---------- */
/* Panel poster (kiri, bingkai 9:16 tegak) & panel Instagram (kanan) disejajarkan
   SETARA: rata atas dan rata bawah, dan tinggi panel Instagram MENGIKUTI tinggi
   panel poster (tidak dipatok angka tetap) sehingga keduanya selalu berbagi
   ukuran yang sama.

   MENGAPA KOLOM POSTER KINI SEMPIT (dulu 1.95fr, sekarang 340px) —
   poster berbentuk TEGAK (9:16). Bila kolomnya tetap lebar (709px pada 1440px),
   bingkai 9:16 akan setinggi 1.260px sehingga satu bagian beranda menutupi
   seluruh layar. Dengan kolom dibatasi 340px, tinggi panel tetap wajar
   (≈660px) DAN poster terisi penuh oleh gambar tegak — tidak lagi tampak kecil
   di tengah bingkai mendatar dengan kabur di kiri-kanan.
   Sisa lebar diberikan ke panel Instagram. */
.poster-ig{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;
  align-items:stretch
}
.poster-ig.tanpa-ig{grid-template-columns:1fr}
.poster-kolom{min-width:0;display:flex;flex-direction:column;gap:16px;min-height:0}

/* Bingkai poster 9:16 (TEGAK) — satu bentuk untuk SEMUA tempat (beranda,
   halaman Poster, dan kisi poster). Lebar mengikuti wadah, tinggi = 16/9
   lebarnya (jadi tinggi = lebar × 1,778).
   Poster ditampilkan UTUH (`object-fit:contain`) supaya tulisan pada poster
   tidak terpotong; karena bingkainya sudah 9:16 (sama dengan bentuk poster),
   gambar mengisi bingkai hampir penuh.

   LATAR: sama dengan permukaan panel Instagram di sebelahnya
   (`rgba(255,255,255,.94)`) — bulat/bersih, BUKAN kabur gelap dari gambar.
   Permintaan pemilik situs 2026-09-26: sisi bingkai tidak boleh tampak hitam/
   kabur; kedua panel harus terlihat satu keluarga. */
.poster-foto{
  position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
  background:rgba(255,255,255,.94)
}
.poster-foto__gambar{
  position:relative;z-index:1;display:block;width:100%;height:100%;
  /* Padding kecil saja: bingkai sudah 9:16 sehingga poster tegak mengisi
     hampir penuh. Padding besar (dulu clamp 10–20px) membuat poster tampak
     mengecil di dalam bingkainya sendiri. */
  object-fit:contain;padding:6px;
  /* Bayangan lembut: latar bingkai terang, jadi bayangannya ringan saja
     (versi gelap .45 dulu dipakai saat latarnya gelap). */
  filter:drop-shadow(0 8px 18px rgba(90,64,26,.22))
}

/* Kepala bagian poster kegiatan */
.bk-poster{margin-top:30px}
.bk-poster-kepala{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;justify-content:space-between;
  margin-bottom:18px
}
.bk-poster-kepala h2{font-size:clamp(1.25rem,2.1vw,1.7rem);margin:.25em 0 .2em}
.bk-poster-kepala p{margin:0;color:var(--ink-lembut);max-width:64ch}

/* Panel Instagram di kanan memakai tinggi panel poster (align-items:stretch) —
   tidak ada lagi tinggi tetap yang dipatok di sini. */

/* Wadah bingkai poster. TIDAK memakai `height:100%` lagi: sejak 2026-09-26
   keterangan poster berada di wadah TERPISAH di bawahnya (bersaudara), jadi
   tingginya mengikuti isinya sendiri; panel Instagram di sebelahnya yang
   meregang mengikuti tinggi kolom ini.

   Batas lebar 340px diberlakukan pada DUA hal sekaligus (bingkai dan baris
   keterangan) supaya keduanya selalu sama lebar dan tetap terpusat pada mode
   SATU kolom (≤1080px) maupun saat panel Instagram dimatikan — poster 9:16
   pada lebar penuh akan setinggi ±1.300–1.950px.

   PENTING: lebar ditulis `width:100%` DULU, baru dibatasi `max-width`, supaya
   lebar yang dipakai pasti (bukan hitungan "selebar isinya"). Tanpa itu,
   `margin-inline:auto` membuat bingkai diukur dari isi baris tombol gesernya
   saja dan bingkainya menyusut menjadi ±162px (pernah terjadi). */
.ps{
  position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;
  width:100%;max-width:340px;margin-inline:auto
}
.ps-gulir{
  position:relative;flex:none;min-height:0;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius-besar);border:1px solid var(--garis);background:var(--krem-2);
  box-shadow:var(--bayang)
}
.ps-slide{
  display:block;position:absolute;inset:0;opacity:0;visibility:hidden;overflow:hidden;
  color:inherit;text-decoration:none;transition:opacity .8s ease
}
.ps-slide.aktif{opacity:1;visibility:visible}
/* Keterangan poster: DI BAWAH bingkai (bukan ditumpuk di atas gambar) dan ikut
   berganti bersama fotonya karena memakai grup putar yang sama.
   Semua keterangan ditumpuk pada SATU sel kisi yang sama, sehingga tinggi baris
   keterangan = keterangan TERPANJANG — tidak berubah-ubah (dan tidak membuat
   panel Instagram ikut berubah tinggi) saat poster berganti. */
/* Baris keterangan poster (bersaudara dengan bingkai di atasnya). Wadah ini
   juga menjadi salah satu wadah putar grup "poster-beranda" supaya teksnya
   berganti serentak dengan foto — dan supaya kursor yang berhenti di atas teks
   ikut menghentikan guliran. */
.ps-bawah{
  display:grid;gap:10px;min-width:0;
  width:100%;max-width:340px;margin-inline:auto
}
.ps-teks-gulir{display:grid;align-content:start;min-width:0}
.ps-teks{
  grid-area:1/1;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .5s ease
}
.ps-teks.aktif{opacity:1;visibility:visible}
.ps-teks-judul{
  font-family:var(--font-judul);font-size:1.1rem;line-height:1.35;color:var(--ink);
  max-width:var(--lebar-kartu,620px)
}
.ps-teks-ket{font-size:.93rem;line-height:1.6;color:var(--ink-lembut);max-width:var(--lebar-kartu,620px)}
.ps-teks-tombol{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;min-height:var(--sentuh-min,44px);
  font-size:.86rem;font-weight:700;color:var(--merah)
}
.ps-teks-tombol:hover{color:#8E1D17;text-decoration:none}
.ps-slide.ps-tulisan{
  padding:34px 30px;display:flex;flex-direction:column;gap:10px;justify-content:center;
  background:linear-gradient(158deg,#3F6529,#4F7A34 52%,#6E8F2E);color:#F3F7EC
}
.ps-lencana{
  align-self:flex-start;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);
  color:#fff;border-radius:999px;padding:4px 14px;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase
}
.ps-ikon{display:block}
.ps-judul{font-family:var(--font-judul);font-size:1.5rem;color:#fff;line-height:1.25}
.ps-ket{color:rgba(243,247,236,.9);font-size:.97rem}
.ps-tombol{font-style:normal;font-weight:700;font-size:.9rem;color:#EAF6D8;margin-top:6px}
.ps-aksi{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ps-aksi .bk-titik{position:static;left:auto;bottom:auto}

/* Titik navigasi POSTER: sasaran sentuh benar-benar 44px (`--sentuh-min`),
   sedangkan tampilannya tetap titik kecil yang elegan. Catatan proyek: perluasan
   area tekan lewat pseudo-element TERBUKTI tidak bekerja (dulu `inset:-16px` di
   dasar.css), jadi tombolnya sendiri yang harus berukuran 44px dan titik
   visualnya digambar di dalamnya.
   Aturan ini hanya untuk titik navigasi poster — titik pada slider berita
   mengapung di atas foto, jadi membesarkannya akan menutupi foto dan
   menghalangi klik pada slide (di sana ukurannya sengaja dibiarkan kecil,
   keputusan tampilan pemilik situs yang sudah didokumentasikan). */
.ps-aksi .bk-titik-item{
  width:var(--sentuh-min,44px);height:var(--sentuh-min,44px);
  display:grid;place-items:center;padding:0;background:transparent;border:0
}
.ps-aksi .bk-titik-item::after{
  content:"";position:static;inset:auto;width:11px;height:11px;border-radius:50%;
  background:rgba(90,64,26,.25);border:1px solid rgba(90,64,26,.4);
  transition:background .2s ease, border-color .2s ease, width .2s ease, height .2s ease
}
.ps-aksi .bk-titik-item.aktif{background:transparent;border:0;transform:none}
.ps-aksi .bk-titik-item.aktif::after{background:var(--merah);border-color:var(--merah);width:14px;height:14px}
.ps-aksi .bk-titik-item:hover::after{background:rgba(90,64,26,.45)}
.ps-panah{display:flex;gap:8px}

/* ---------- panel instagram ---------- */
.ig-panel{
  background:rgba(255,255,255,.94);border:1px solid var(--garis);border-radius:var(--radius-besar);
  box-shadow:var(--bayang-kecil);overflow:hidden;
  height:100%;display:flex;flex-direction:column;min-height:0
}
.ig-kepala{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--garis);
  background:linear-gradient(120deg,#F7E9D6,#FBF6EC 60%,#EFF5E4)
}
.ig-lambang{
  width:44px;height:44px;flex:none;border-radius:var(--radius-mdl);display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#F5A65B,#DE7327 45%,#A94BA8 100%);
  box-shadow:var(--shadow-instagram)
}
.ig-identitas{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ig-identitas strong{font-size:.95rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-identitas small{font-size:.76rem;color:var(--ink-lembut)}
/* PROMPT #11 §26 — sasaran sentuh: tombol ini sempat hanya 38px tingginya
   (terukur pada uji aksesibilitas). Tinggi minimumnya kini mengikuti token
   --sentuh-min sehingga dapat disentuh dengan percaya diri di ponsel. */
.ig-tombol{flex:none;padding:10px 16px;font-size:.84rem;min-height:var(--sentuh-min,44px);display:inline-flex;align-items:center;gap:6px}
.ig-label{
  margin:0;padding:12px 18px 0;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-lembut)
}
.ig-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 18px 18px}
.ig-item{
  position:relative;margin:0;display:block;border-radius:12px;overflow:hidden;
  background:var(--krem-2);text-decoration:none
}
.ig-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .4s ease}
.ig-item:hover img{transform:scale(1.06)}
.ig-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
  background:linear-gradient(to top,rgba(20,15,9,.85),transparent);
  color:#fff;font-size:.74rem;line-height:1.3
}
.ig-otomatis{padding:0;flex:1;min-height:0;display:flex}
.ig-otomatis iframe{
  display:block;width:100%;height:100%;border:0;background:#fff;
  /* Tinggi mengikuti tinggi panel (diatur pengurus) supaya rata dengan panel poster. */
}
.ig-widget{padding:14px 18px 18px;overflow:hidden}
.ig-widget iframe,.ig-widget img{max-width:100%}
.ig-embed{padding:14px 18px 6px}
.ig-embed iframe{max-width:100%!important;min-width:0!important}
.ig-kosong{padding:22px 18px;color:var(--ink-lembut)}
.ig-kosong strong{display:block;color:var(--ink);margin-bottom:4px;font-size:.95rem}
.ig-kosong p{margin:0;font-size:.88rem;line-height:1.6;max-width:420px}
.ig-bawah{
  display:block;padding:14px 18px;border-top:1px solid var(--garis);
  font-size:.86rem;font-weight:700;color:var(--merah);text-align:center;
  background:rgba(251,246,236,.7)
}
.ig-bawah:hover{background:var(--krem-2);text-decoration:none}

/* ---------- tanggap layar ---------- */
@media (max-width:1080px){
  .bk-berita{grid-template-columns:1fr}
  /* Saat panel bertumpuk, panel Instagram memakai tinggi yang diatur pengurus
     (di layar lebar tingginya otomatis mengikuti panel poster). */
  .ig-otomatis iframe{height:var(--tinggi-panel,640px)}
  /* Bingkai poster 9:16: tingginya sudah ditentukan rasionya (lebar × 16/9),
     jadi tidak perlu batas tinggi minimum lagi. */
  .bk-sambutan{grid-template-columns:1fr;justify-items:start}
  .bk-sambutan-lambang{width:120px;height:120px}
  .bk-slider{min-height:320px}
  .bk-panel{padding:22px}
  .poster-ig{grid-template-columns:1fr;height:auto}
}
@media (max-width:760px){
  .bk-slider{min-height:250px}
  .bk-slide-judul{padding:34px 18px 18px;font-size:1.05rem}
  .bk-titik{left:16px;bottom:12px}
  .nf{flex-wrap:wrap;gap:12px}
  .nf-lencana{padding:8px 14px;font-size:.8rem}
  .nf-isi{order:3;flex-basis:100%;min-height:52px;align-items:flex-start}
  .nf-item{align-items:flex-start;flex-direction:column;gap:2px}
  .nf-item span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .nf-panah{margin-left:auto}
  .ps-slide.ps-tulisan{padding:24px 20px;min-height:auto}
  .ps-judul{font-size:1.2rem}
  .ig-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- hero dengan slider foto kegiatan ---------- */
.hero-berfoto{position:relative;overflow:hidden;background:#2A241E}
.hero-slider{position:absolute;inset:0;z-index:0}
.hero-slide{
    position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transform:scale(1.06);
    transition:opacity 1.1s ease, transform 7s linear
}
.hero-slide.aktif{opacity:1;transform:scale(1)}
.hero-tirai{
    position:absolute;inset:0;z-index:1;
    background:
        linear-gradient(100deg,rgba(26,20,12,.94) 0%,rgba(26,20,12,.86) 34%,rgba(26,20,12,.52) 62%,rgba(26,20,12,.34) 100%),
        linear-gradient(to top,rgba(26,20,12,.72),transparent 55%)
}
.hero-berfoto.overlay-ringan .hero-tirai{
    background:
        linear-gradient(100deg,rgba(26,20,12,.88) 0%,rgba(26,20,12,.72) 38%,rgba(26,20,12,.32) 66%,rgba(26,20,12,.18) 100%),
        linear-gradient(to top,rgba(26,20,12,.55),transparent 55%)
}
.hero-berfoto.overlay-pekat .hero-tirai{
    background:
        linear-gradient(100deg,rgba(20,15,9,.97) 0%,rgba(20,15,9,.92) 38%,rgba(20,15,9,.68) 66%,rgba(20,15,9,.5) 100%),
        linear-gradient(to top,rgba(20,15,9,.85),transparent 60%)
}
.hero-berfoto .hero-isi{position:relative;z-index:2}
.hero-berfoto h1,.hero-berfoto .hero-teks{color:#FFFDF8}
.hero-berfoto h1 span{color:#F5C36B}
.hero-berfoto .hero-teks{color:rgba(255,253,248,.9)}
.hero-berfoto .hero-catatan{color:rgba(255,253,248,.72)}
.hero-berfoto .hero-lambang-bulat{
    background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.7);
    box-shadow:var(--shadow-di-atas-gambar)
}
.hero-berfoto .hero-cip{background:rgba(255,255,255,.96)}
.hero-berfoto .tombol-garis{
    background:rgba(255,255,255,.14);color:#FFFDF8;border-color:rgba(255,255,255,.62);
    box-shadow:var(--shadow-di-atas-gambar-halus)
}
.hero-berfoto .tombol-garis:hover{background:rgba(255,255,255,.24);color:#fff}

.hero-gulir{
    position:relative;z-index:2;
    display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end;justify-content:space-between;
    padding-bottom:22px;margin-top:6px;border-top:1px solid rgba(255,255,255,.16);padding-top:16px
}
.hero-keterangan{min-width:0;max-width:60ch}
.hero-keterangan-label{
    display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:#F5C36B;margin-bottom:5px
}
.hero-keterangan-daftar{list-style:none;margin:0;padding:0;position:relative}
.hero-keterangan-daftar > li{display:none}
.hero-keterangan-daftar > li.aktif{display:block}
.hero-keterangan-daftar a{color:#FFFDF8;font-family:var(--font-judul);font-size:1.08rem;font-weight:600;text-decoration:none}
.hero-keterangan-daftar a:hover{text-decoration:underline}
.hero-keterangan-daftar span{color:#FFFDF8;font-family:var(--font-judul);font-size:1.08rem;font-weight:600}
.hero-keterangan-daftar small{display:block;color:rgba(255,253,248,.7);font-size:.78rem;margin-top:2px}
.hero-gulir-aksi{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-tombol-terang{background:rgba(255,255,255,.14);color:#FFFDF8;border-color:rgba(255,255,255,.6)}
.hero-tombol-terang:hover{background:rgba(255,255,255,.26);color:#fff}
.hero-titik{display:flex;gap:8px;align-items:center}
.hero-titik-item{
    width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6)
}
.hero-titik-item.aktif{background:#F5C36B;border-color:#F5C36B;transform:scale(1.15)}
.hero-gulir-panah{display:flex;gap:8px}
.hero-panah{
    width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);color:#FFFDF8
}
.hero-panah:hover{background:rgba(255,255,255,.28)}

@media (max-width:900px){
  .hero-gulir{align-items:flex-start}
  .hero-keterangan{max-width:none}
}
@media (max-width:520px){
  .kepala-isi{gap:12px}
  .merek{gap:10px}
  .merek-logo{width:44px;height:44px}
  .merek-teks strong,.merek-teks em{font-size:.9rem}
  .merek-teks small{font-size:.7rem}
}
@media (max-width:760px){
  .hero-berfoto .hero-lambang-bulat{background:rgba(255,255,255,.94)}
  .hero-gulir{padding-bottom:18px}
  .hero-keterangan-daftar a,.hero-keterangan-daftar span{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .2s ease;transform:none}
}

/* ---------- hero ---------- */
.hero{padding:66px 0 58px;position:relative;overflow:hidden}
.hero-isi{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 span{color:var(--merah)}
.hero-teks{font-size:1.09rem;color:var(--ink-lembut);max-width:56ch}
.hero-aksi{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-catatan{margin-top:20px;font-size:.86rem;color:var(--ink-lembut)}

.hero-lambang{position:relative;display:flex;justify-content:center}
.hero-lambang-bulat{
  position:relative;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;box-shadow:var(--bayang);
  padding:26px;backdrop-filter:blur(6px)
}
.hero-lambang img{width:min(320px,58vw);height:auto}
.hero-cip{
  position:absolute;background:rgba(255,255,255,.92);border:1px solid var(--garis);
  border-radius:var(--radius-mdl);padding:8px 13px;font-size:.79rem;font-weight:600;color:var(--ink);
  box-shadow:var(--bayang-kecil);white-space:nowrap
}
.cip-atas{top:6%;left:-6%}
.cip-bawah{bottom:4%;right:-4%}

/* ---------- grid kartu ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.kartu{
  background:rgba(255,255,255,.86);
  border:1px solid var(--garis);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--bayang-kecil);
  transition:transform .18s ease, box-shadow .18s ease
}
.kartu:hover{transform:translateY(-3px);box-shadow:var(--bayang)}
.kartu h3{margin-bottom:.4em}
.kartu p:last-child{margin-bottom:0}
/* ---------- ikon 3D ---------- */
/* Ikon tampil sebagai gambar 3D berukuran tetap; ukuran diatur lewat CSS ini
   supaya konsisten di seluruh halaman (di layar HP pun tetap rapi). */
.ikon-3d{
  display:block;width:56px;height:56px;object-fit:contain;
  /* max-width:none menahan aturan umum img{max-width:100%} supaya ikon tidak
     menyusut saat wadahnya sempit (mis. di halaman Kontak pada layar kecil). */
  max-width:none;flex:none;
  filter:drop-shadow(0 6px 12px rgba(90,64,26,.22));
  transition:transform .22s ease
}
.kartu:hover .ikon-3d{transform:translateY(-2px) scale(1.04)}
.ikon-emotikon{display:grid;place-items:center;font-size:1.5rem;width:56px;height:56px}

.kartu-ikon{
  display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:16px;flex:none
}
/* Bila isinya emotikon lama (tanpa gambar), tetap beri latar seperti sebelumnya. */
.kartu-ikon:has(.ikon-emotikon){
  width:52px;height:52px;border-radius:var(--radius-lg);background:var(--hijau-lembut);place-items:center
}
.kartu-ikon:has(.ikon-3d){width:auto;height:auto;background:none;border-radius:0}
.kartu-ikon-merah{background:var(--merah-lembut)}
.kartu-lembut{background:rgba(255,255,255,.6)}

.kartu-unit{display:flex;flex-direction:column}
.kartu-unit .unit-isi{flex:1}
.kartu-unit .tautan-panah{font-weight:700;font-size:.9rem;color:var(--merah);display:inline-flex;gap:8px;align-items:center}
.kartu-unit .tautan-panah:hover{gap:12px;text-decoration:none}

/* daftar centang */
.cek{list-style:none;padding:0;margin:0}
.cek li{position:relative;padding-left:34px;margin-bottom:12px}
.cek li::before{
  content:"✓";position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  background:var(--hijau-lembut);color:var(--hijau);
  font-size:.78rem;font-weight:700;display:grid;place-items:center
}
.cek-merah li::before{background:var(--merah-lembut);color:var(--merah)}
.bagian-hijau .cek li::before{background:rgba(255,255,255,.2);color:#fff}

/* angka / pilar */
.pilar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pilar .kartu{display:flex;flex-direction:column}
.pilar-nomor{
  font-family:var(--font-judul);font-size:1.5rem;color:var(--merah);
  margin-bottom:10px
}

/* langkah */
.langkah{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:langkah}
.langkah-item{background:rgba(255,255,255,.9);border:1px solid var(--garis);border-radius:var(--radius);padding:26px;position:relative}
.langkah-no{
  width:44px;height:44px;border-radius:var(--radius-mdl);display:grid;place-items:center;
  background:linear-gradient(130deg,var(--merah),#C63A24);color:#fff;
  font-family:var(--font-judul);font-size:1.2rem;font-weight:700;margin-bottom:16px
}

/* kutipan / highlight */
.sorot{
  background:linear-gradient(120deg,rgba(217,58,43,.09),rgba(127,168,78,.14));
  border:1px solid var(--garis);border-left:5px solid var(--merah);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--bayang-kecil)
}
.sorot p:last-child{margin-bottom:0}

/* FAQ */
.faq{display:grid;gap:14px;max-width:880px;margin:0 auto}
.faq details{
  background:rgba(255,255,255,.86);border:1px solid var(--garis);border-radius:var(--radius-lg);
  padding:6px 20px;box-shadow:var(--bayang-kecil)
}
.faq summary{
  cursor:pointer;font-weight:700;padding:14px 0;list-style:none;position:relative;padding-right:30px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:11px;font-size:1.4rem;color:var(--merah);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-lembut);margin:0 0 16px}

/* ---------- formulir ---------- */
.formulir-panel{
  background:rgba(255,255,255,.9);border:1px solid var(--garis);border-radius:var(--radius-besar);
  padding:34px;box-shadow:var(--bayang)
}
.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.medan{display:flex;flex-direction:column;gap:7px}
.medan-penuh{grid-column:1 / -1}
.medan label{font-weight:600;font-size:.9rem}
.medan .bantuan{font-size:.79rem;color:var(--ink-lembut);font-weight:400}
.medan input[type=text],.medan input[type=email],.medan input[type=tel],.medan input[type=date],.medan select,.medan textarea{
  font:inherit;font-size:.96rem;color:var(--ink);
  background:#fffdf8;border:1.5px solid var(--garis);border-radius:12px;
  padding:12px 14px;width:100%;transition:border-color .16s ease, box-shadow .16s ease
}
.medan textarea{min-height:120px;resize:vertical}
.medan input:focus,.medan select:focus,.medan textarea:focus{
  outline:0;border-color:var(--hijau-terang);box-shadow:0 0 0 4px rgba(127,168,78,.16)
}
.medan input.salah,.medan select.salah,.medan textarea.salah{border-color:var(--merah);background:#fff6f5}
.pesan-salah{color:var(--merah);font-size:.79rem}

.pilihan-unit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pilihan-unit label{
  display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:.9rem;
  background:#fffdf8;border:1.5px solid var(--garis);border-radius:12px;padding:11px 13px;cursor:pointer
}
.pilihan-unit input{margin-top:3px;accent-color:var(--hijau)}
.pilihan-unit label:has(input:checked){border-color:var(--hijau-terang);background:var(--hijau-lembut)}

.medan-setuju{display:flex;gap:12px;align-items:flex-start;background:var(--krem-2);border:1px solid var(--garis);border-radius:var(--radius-mdl);padding:16px}
.medan-setuju input{margin-top:4px;accent-color:var(--merah);transform:scale(1.15)}
.medan-setuju label{font-weight:500;font-size:.9rem}

.isian-perangkap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pemberitahuan{
  border-radius:16px;padding:18px 22px;margin-bottom:24px;border:1px solid;display:flex;gap:14px;align-items:flex-start
}
.pemberitahuan-sukses{background:var(--hijau-lembut);border-color:rgba(79,122,52,.3);color:#33531F}
.pemberitahuan-gagal{background:var(--merah-lembut);border-color:rgba(179,38,30,.3);color:#7C1A14}
/* Pesan informasi (netral/menjelaskan) — memakai token --color-info yang sudah
   ada di design system supaya warnanya seragam dengan .notis--info. */
.pemberitahuan-info{background:var(--color-info-soft, #E8F1F6);border-color:rgba(47,100,128,.3);color:#244F65}
.pemberitahuan strong{display:block}
.pemberitahuan-ikon{font-size:1.4rem;line-height:1.2}

.ringkas-anggota{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;
  background:var(--krem-2);border:1px dashed var(--garis);border-radius:var(--radius-mdl);padding:18px 20px;margin-top:6px
}
.ringkas-anggota div{font-size:.9rem}
.ringkas-anggota span{display:block;font-size:.76rem;color:var(--ink-lembut);text-transform:uppercase;letter-spacing:.05em}

/* ---------- kontak ---------- */
.kontak-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:start}
.info-kontak{display:grid;gap:16px}
.info-item{display:flex;gap:15px;background:rgba(255,255,255,.86);border:1px solid var(--garis);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--bayang-kecil)}
.info-item .kartu-ikon{margin:0;width:52px;height:52px;flex:none;font-size:1.25rem;border-radius:12px}
.info-item h4{margin:0 0 3px;font-size:1rem}
.info-item p{margin:0;font-size:.92rem;color:var(--ink-lembut)}
.tabel-jam{width:100%;border-collapse:collapse;font-size:.92rem}
.tabel-jam td{padding:7px 0;border-bottom:1px dashed var(--garis)}
.tabel-jam tr:last-child td{border-bottom:0}
.tabel-jam td:last-child{text-align:right;color:var(--ink-lembut)}

/* ---------- kaki ---------- */
.kaki{background:linear-gradient(165deg,#2E2A22,#3B3225 60%,#33291C);color:#EFE7D9;margin-top:20px}
.kaki-isi{display:grid;grid-template-columns:1.4fr 1fr 1.15fr 1.3fr;gap:34px;padding-top:52px;padding-bottom:38px}
.kaki h3,.kaki h4{color:#fff;margin-bottom:.6em}
.kaki h3{font-size:1.2rem}
.kaki h4{font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.kaki p{color:rgba(239,231,217,.82);font-size:.92rem}
.kaki ul{list-style:none;padding:0;margin:0}
.kaki li{font-size:.92rem;margin-bottom:9px;color:rgba(239,231,217,.82)}
.kaki a{color:#F3DFD2}
.kaki a:hover{color:#fff}
/* Logo di kaki halaman diberi landasan putih bulat — berkas logo pengurus berlatar
   transparan, sehingga tanpa landasan tampak tenggelam & kusam di latar gelap. */
.kaki-logo{
    width:74px;height:74px;padding:6px;margin-bottom:16px;
    background:#FFFDF8;border-radius:50%;
    box-shadow:var(--shadow-landasan);
    object-fit:contain
}
.kaki-bawah{
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px;padding-bottom:26px;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.82rem;color:rgba(239,231,217,.72)
}
.kaki-alamat{margin-bottom:14px}

/* ---------- admin ---------- */
.admin-masuk{max-width:430px;margin:0 auto}
.tabel-data{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-mdl);overflow:hidden;box-shadow:var(--bayang-kecil);font-size:.88rem}
.tabel-data th,.tabel-data td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:top}
.tabel-data th{background:var(--krem-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-lembut)}
.tabel-data tr:last-child td{border-bottom:0}
.tabel-bungkus{overflow-x:auto;border:1px solid var(--garis);border-radius:16px}
.statistik{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:30px}
.statistik .kartu{padding:20px 22px}
.statistik .angka{font-family:var(--font-judul);font-size:2rem;color:var(--merah);line-height:1.1}
.statistik small{color:var(--ink-lembut);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}

/* ---------- susunan pengawas & pengurus ---------- */
.bagian-pengurus{margin-top:34px}
.bagian-pengurus:first-of-type{margin-top:0}
.pengurus-judul{
    font-family:var(--font-judul);font-size:1.2rem;margin:0 0 18px;
    padding-bottom:10px;border-bottom:2px solid var(--garis);display:flex;align-items:center;gap:10px
}
.pengurus-judul::before{content:"";width:10px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--merah),#C63A24)}
.personel-grid{align-items:stretch}
.kartu-personel{display:flex;flex-direction:column;padding:0;overflow:hidden}
.personel-foto{
    background:linear-gradient(160deg,#EDF3E3,#F5EADA);display:grid;place-items:center;
    aspect-ratio:3/4;overflow:hidden;border-bottom:1px solid var(--garis)
}
.personel-foto img{width:100%;height:100%;object-fit:cover;display:block}
.personel-inisial{
    font-family:var(--font-judul);font-size:3.4rem;color:rgba(79,122,52,.34);
    width:110px;height:110px;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.65);border:1px dashed rgba(79,122,52,.3)
}
.personel-isi{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.personel-isi h4{margin:0 0 2px;font-family:var(--font-judul);font-size:1.14rem}
.personel-jabatan{
    margin:0 0 14px;font-size:.86rem;font-weight:700;color:var(--merah);
    letter-spacing:.02em;text-transform:uppercase
}
.personel-data{margin:0;display:grid;grid-template-columns:auto;gap:2px 0;font-size:.87rem}
.personel-data dt{
    color:var(--ink-lembut);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin-top:9px
}
.personel-data dd{margin:0;color:var(--ink)}
.personel-data dt:first-child{margin-top:0}

/* Grafik batang 7 hari (halaman pengurus) */
.stat-harian{display:flex;gap:14px;align-items:flex-end;height:200px;margin-top:12px}
.stat-harian-batang{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.stat-harian-angka{font-size:.78rem;font-weight:700;color:var(--merah)}
.stat-harian-tiang{
  display:block;width:100%;max-width:56px;border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:linear-gradient(180deg,#7FA84E,#4F7A34);min-height:4px
}
.stat-harian-tanggal{font-size:.76rem;color:var(--ink-lembut);text-align:center;line-height:1.2}
.stat-harian-tanggal small{display:block;font-size:.7rem}
.survey-admin{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.6fr);gap:24px;align-items:start}
.komentar-daftar{display:grid;gap:12px}
.komentar-item{background:var(--krem-2);border:1px solid var(--garis);border-radius:var(--radius-mdl);padding:14px 16px}
.komentar-item p{margin:6px 0 4px;font-size:.93rem}
.komentar-item small{color:var(--ink-lembut);font-size:.78rem}
.komentar-nilai{
  font-size:.74rem;font-weight:700;background:var(--merah-lembut);color:var(--merah);
  border:1px solid rgba(179,38,30,.2);border-radius:999px;padding:2px 10px
}
@media (max-width:900px){
  .survey-admin{grid-template-columns:1fr}
  .stat-harian{gap:8px;height:170px}
}

/* ---------- statistik pengunjung & survey kepuasan ---------- */
.bagian-statistik{
  background:
    radial-gradient(560px 360px at 8% 0%, rgba(79,122,52,.12), transparent 60%),
    radial-gradient(600px 380px at 94% 8%, rgba(179,38,30,.10), transparent 62%),
    rgba(255,255,255,.55);
  border-top:1px solid var(--garis)
}
.stat-kotak{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat-kotak-item{display:flex;flex-direction:column;gap:2px;text-align:center;align-items:center}
.stat-kotak-item small{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-lembut)}
.stat-kotak-item strong{font-family:var(--font-judul);font-size:2.1rem;line-height:1.1;color:var(--hijau)}
.stat-kotak-item span{font-size:.82rem;color:var(--ink-lembut)}
.stat-kotak-total{background:linear-gradient(140deg,rgba(179,38,30,.10),rgba(255,255,255,.9))}
.stat-kotak-total strong{color:var(--merah)}
.stat-catatan{margin:16px auto 0;text-align:center;font-size:.83rem;color:var(--ink-lembut);max-width:620px}

.survey{
  margin-top:30px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;
  background:rgba(255,255,255,.94);border:1px solid var(--garis);border-radius:var(--radius-besar);
  padding:26px 28px;box-shadow:var(--bayang-kecil);align-items:start
}
.survey-kiri h3{font-size:1.2rem;margin:.3em 0 .4em}
.survey-kiri > p{color:var(--ink-lembut);font-size:.95rem;max-width:620px}
.survey-sudah{font-size:.88rem;color:var(--hijau);font-weight:600}
.survey-nilai{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:6px 0 16px}
.survey-pilihan{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;text-align:center;
  background:#fffdf8;border:1.5px solid var(--garis);border-radius:var(--radius-mdl);padding:12px 8px;
  transition:border-color .16s ease, background .16s ease
}
.survey-pilihan input{position:absolute;opacity:0;pointer-events:none}
.survey-pilihan strong{font-family:var(--font-judul);font-size:1.3rem;color:var(--merah)}
.survey-pilihan span{font-size:.74rem;color:var(--ink-lembut);line-height:1.3}
.survey-pilihan:hover{border-color:var(--hijau-terang)}
.survey-pilihan:has(input:checked){border-color:var(--merah);background:var(--merah-lembut)}
.survey-pilihan:has(input:focus-visible){outline:3px solid var(--hijau-terang);outline-offset:2px}
.survey-form .medan{margin-bottom:14px}
.survey-form textarea{font:inherit;font-size:.94rem;background:#fffdf8;border:1.5px solid var(--garis);border-radius:12px;padding:11px 13px;width:100%;resize:vertical}
.survey-kanan{border-left:1px dashed var(--garis);padding-left:24px}
.survey-rata{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.survey-rata strong{font-family:var(--font-judul);font-size:2.4rem;color:var(--merah);line-height:1}
.survey-rata span{font-size:1rem;color:var(--ink-lembut)}
.survey-rata small{display:block;flex-basis:100%;font-size:.8rem;color:var(--ink-lembut)}
.survey-sebaran{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.survey-sebaran-baris{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(60px,1.4fr) auto;gap:10px;align-items:center}
.survey-sebaran-label{font-size:.82rem;color:var(--ink)}
.survey-sebaran-batang{display:block;height:12px;border-radius:999px;background:var(--krem-2);overflow:hidden}
.survey-sebaran-batang i{display:block;height:100%;background:linear-gradient(90deg,#E0715F,#B3261E)}
.survey-sebaran-angka{font-size:.84rem;font-weight:700;text-align:right;min-width:34px}
.survey-kosong{margin:0;font-size:.92rem;color:var(--ink-lembut)}

@media (max-width:1080px){
  .stat-kotak{grid-template-columns:repeat(2,minmax(0,1fr))}
  .survey{grid-template-columns:1fr}
  .survey-kanan{border-left:0;padding-left:0;border-top:1px dashed var(--garis);padding-top:20px}
  .survey-nilai{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---------- potensi kelurahan ---------- */
.pot-ringkas{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:26px
}
.pot-angka-kartu{display:flex;flex-direction:column;gap:2px;text-align:left}
.pot-angka-kartu small{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-lembut)}
.pot-angka-kartu strong{font-family:var(--font-judul);font-size:2.1rem;line-height:1.1;color:var(--merah)}
.pot-angka-kartu span{font-size:.85rem;color:var(--ink-lembut)}

.pot-kelurahan{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(237,243,227,.95),rgba(251,246,236,.9));
  border:1px solid var(--garis);border-left:6px solid var(--hijau);border-radius:var(--radius-besar);
  padding:22px 26px;box-shadow:var(--bayang-kecil)
}
.pot-kelurahan-ikon{font-size:2rem;line-height:1}
.pot-kelurahan-isi{flex:1;min-width:240px}
.pot-kelurahan-isi h2{font-size:1.2rem;margin:0 0 .25em}
.pot-kelurahan-isi p{margin:0 0 .9em;color:var(--ink-lembut);max-width:620px}

.pot-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.pot-kisi .kartu{display:flex;flex-direction:column}

/* --- diagram batang berpasangan: hijau = laki-laki, merah = perempuan ---
   Tidak memakai alas (track) batang, sehingga tidak ada bagian berwarna kosong.
   Panjang batang tegas (tanpa gradien) supaya angka terbaca presisi. */
.pot-legenda{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0 0 22px;
  padding:14px 18px;background:rgba(255,255,255,.72);border:1px solid var(--garis);
  border-radius:var(--radius);box-shadow:var(--bayang-kecil)
}
.pot-legenda-item{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;color:var(--ink)}
.pot-warna{display:inline-block;flex:none;width:18px;height:10px;border-radius:var(--radius-xs)}
.pot-warna-l{background:var(--hijau)}
.pot-warna-p{background:var(--merah)}
.pot-legenda-catatan{font-size:.86rem;line-height:1.5;color:var(--ink-lembut);max-width:620px;flex:1 1 260px}

.pot-kartu-kepala{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--garis)
}
.pot-kartu-kepala h3{margin:0;font-size:1.14rem}
.pot-kartu-jumlah{font-family:var(--font-judul);font-size:1.08rem;color:var(--merah);white-space:nowrap}
.pot-kartu-jumlah small{font-family:var(--font-teks);font-size:.74rem;font-weight:600;color:var(--ink-lembut)}

.pot-grafik{display:flex;flex-direction:column;gap:11px}
.pot-baris{display:grid;grid-template-columns:minmax(130px,1.05fr) minmax(110px,1.7fr) auto;gap:12px;align-items:center}
.pot-label{font-size:.87rem;line-height:1.35;color:var(--ink)}
.pot-dua{display:flex;flex-direction:column;gap:3px;min-width:0}
.pot-mini{display:block;height:9px}
.pot-mini i{display:block;height:100%;border-radius:999px;min-width:3px}
.pot-mini-l i{background:var(--hijau)}
.pot-mini-p i{background:var(--merah)}
.pot-angka{display:grid;grid-template-columns:52px 52px 56px;gap:8px;align-items:baseline;text-align:right}
.pot-angka b{font-family:var(--font-teks);font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums}
.pot-angka .nilai-l{color:var(--hijau)}
.pot-angka .nilai-p{color:var(--merah)}
.pot-angka small{font-size:.78rem;color:var(--ink-lembut);font-variant-numeric:tabular-nums}
.pot-baris-kepala .pot-angka b,.pot-baris-kepala .pot-angka small{
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase
}
.pot-baris-kepala .pot-angka small{color:var(--ink-lembut)}

.pot-kosong{margin:16px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-lembut);max-width:620px}
.pot-kosong b{color:var(--merah)}

.pot-grafik-padat{gap:8px}
.pot-grafik-padat .pot-mini{height:7px}
.pot-grafik-padat .pot-label{font-size:.82rem}
.pot-grafik-padat .pot-baris{grid-template-columns:minmax(110px,1fr) minmax(90px,1.4fr) auto;gap:10px}
.pot-grafik-padat .pot-angka{grid-template-columns:46px 46px 50px}
.pot-tabel-padat{margin-top:12px;max-height:360px;overflow-y:auto;padding-right:6px}
/* Batas lebar dalam piksel (bukan ch) supaya baris tidak melebihi 92 huruf. */
.pot-catatan{margin:14px 0 0;font-size:.82rem;color:var(--ink-lembut);font-style:italic;max-width:620px}
.pot-selengkapnya{margin-top:16px;border-top:1px dashed var(--garis);padding-top:12px}
.pot-selengkapnya summary{cursor:pointer;font-weight:700;font-size:.88rem;color:var(--merah)}
.pot-sumber{
  margin-top:26px;background:rgba(255,255,255,.75);border:1px solid var(--garis);
  border-radius:var(--radius);padding:20px 24px
}
.pot-sumber h3{font-size:1.02rem;margin-bottom:.4em}
.pot-sumber p{margin:0 0 .8em;font-size:.9rem;color:var(--ink-lembut);max-width:620px}
.pot-sumber p:last-child{margin-bottom:0}

/* Daftar regulasi di halaman pengurus */
.reg-daftar{display:grid;gap:12px}
.reg-baris{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  background:var(--krem-2);border:1px solid var(--garis);border-radius:var(--radius-mdl);padding:14px 16px
}
.reg-baris-isi{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px}
.reg-baris-isi strong{font-size:.95rem;line-height:1.4}
.reg-baris-isi small{color:var(--ink-lembut);font-size:.82rem}
.reg-baris-isi .reg-kategori{align-self:flex-start}

/* ---------- regulasi ---------- */
.reg-kepala{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:end;
  margin-bottom:26px
}
.reg-kepala-judul h1{margin:.2em 0 0;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.reg-kepala-teks{margin:0;color:var(--ink-lembut);font-size:.98rem;max-width:620px}

.reg-penyaring{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.reg-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.9);border:1.5px solid var(--garis);border-radius:999px;
  padding:9px 18px;font-size:.87rem;font-weight:600;color:var(--ink);text-decoration:none
}
.reg-chip small{color:var(--ink-lembut);font-weight:600;font-size:.78rem}
.reg-chip:hover{border-color:var(--hijau-terang);text-decoration:none}
.reg-chip.aktif{background:var(--merah);border-color:var(--merah);color:#fff}
.reg-chip.aktif small{color:rgba(255,255,255,.85)}

.reg-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.reg-kartu{
  background:rgba(255,255,255,.94);border:1px solid var(--garis);border-radius:var(--radius);
  padding:22px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--bayang-kecil);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.reg-kartu:hover{transform:translateY(-3px);box-shadow:var(--bayang);border-color:var(--hijau-terang)}
.reg-kartu h3{font-size:1.04rem;margin:0;line-height:1.4}
.reg-tentang{margin:0;font-size:.9rem;color:var(--ink-lembut)}
.reg-tentang span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--merah);font-weight:700;margin-bottom:3px}
.reg-kartu-bawah{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px dashed var(--garis);padding-top:12px
}
.reg-kategori{
  font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--hijau-lembut);color:var(--hijau);border:1px solid rgba(79,122,52,.22);
  border-radius:999px;padding:3px 12px
}
.reg-tautan{font-size:.88rem;font-weight:700;color:var(--merah);text-decoration:none}
.reg-tautan:hover{text-decoration:underline}
.reg-tanpa-tautan{color:var(--ink-lembut);font-weight:500}

@media (max-width:1280px){
  .pot-ringkas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .pot-ringkas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pot-kisi,.reg-kisi{grid-template-columns:1fr}
  .reg-kepala{grid-template-columns:1fr;align-items:start}
}
@media (max-width:760px){
  .pot-ringkas{grid-template-columns:1fr}
  /* Label dan angka berdampingan, batang pindah ke barisnya sendiri. */
  .pot-baris{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .pot-dua{grid-column:1 / -1;order:3}
  .pot-angka{grid-template-columns:46px 46px 50px;gap:6px}
  .pot-legenda{padding:12px 14px;gap:10px 16px}
}

/* ---------- tim penyelenggara (satgas) ---------- */
/* Daftar lembaga di halaman pengurus */
.satgas-daftar{display:grid;gap:12px}
.satgas-baris{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--krem-2);border:1px solid var(--garis);border-radius:var(--radius-mdl);padding:12px 14px
}
.satgas-baris-logo{
  width:66px;height:66px;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--garis);border-radius:12px;overflow:hidden;padding:4px
}
.satgas-baris-logo img{width:100%;height:100%;object-fit:contain}
.satgas-baris-isi{flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px}
.satgas-baris-isi small{color:var(--ink-lembut);font-size:.82rem}
.satgas-baris-aksi{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.bagian-satgas{
  background:
    radial-gradient(620px 380px at 10% 0%, rgba(217,58,43,.10), transparent 60%),
    radial-gradient(680px 420px at 92% 6%, rgba(127,168,78,.16), transparent 62%),
    rgba(255,255,255,.55);
  border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)
}
.satgas-kisi{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 16px;
  margin-top:8px
}
.satgas-kartu{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:rgba(255,255,255,.92);border:1px solid var(--garis);border-radius:16px;
  padding:16px 12px 14px;text-decoration:none;color:var(--ink);
  box-shadow:var(--bayang-kecil);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.satgas-kartu:hover{transform:translateY(-3px);box-shadow:var(--bayang);border-color:var(--hijau-terang);text-decoration:none;color:var(--ink)}
.satgas-tanpa-tautan{cursor:default}
.satgas-tanpa-tautan:hover{transform:none;box-shadow:var(--bayang-kecil);border-color:var(--garis)}
.satgas-logo{
  width:100%;aspect-ratio:1/1;display:grid;place-items:center;
  background:#fff;border-radius:12px;padding:6px;overflow:hidden
}
.satgas-logo img{width:100%;height:100%;object-fit:contain;display:block}
.satgas-inisial{
  font-family:var(--font-judul);font-size:1.5rem;color:rgba(79,122,52,.5);
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--hijau-lembut)
}
.satgas-nama{
  font-size:.78rem;font-weight:600;line-height:1.35;color:var(--ink-lembut);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.satgas-catatan{
  margin:22px auto 0;text-align:center;font-size:.85rem;color:var(--ink-lembut);max-width:62ch
}

@media (max-width:1080px){
  .satgas-kisi{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .satgas-kisi{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
  .satgas-kartu{padding:12px 9px 11px}
  .satgas-nama{font-size:.72rem}
}
@media (max-width:420px){
  .satgas-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- galeri foto kegiatan ---------- */
.galeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.galeri-item{
    position:relative;display:block;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--bayang-kecil);background:var(--krem-2);text-decoration:none;
    border:1px solid var(--garis)
}
.galeri-item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease}
.galeri-item:hover img{transform:scale(1.05)}
figure.galeri-item{margin:0}
.galeri-tanpa-tautan{cursor:default}
.galeri-item:hover{text-decoration:none}
.galeri-tutup{
    position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;
    background:linear-gradient(to top,rgba(28,20,12,.88),rgba(28,20,12,.55) 55%,transparent);
    color:#fff;display:flex;flex-direction:column;gap:3px
}
.galeri-tutup strong{font-family:var(--font-judul);font-size:1.02rem;line-height:1.3}
.galeri-tutup small{font-size:.78rem;opacity:.9}

/* ---------- poster & iklan program ---------- */
.bagian-poster{
    background:
        radial-gradient(620px 400px at 12% 0%, rgba(217,58,43,.13), transparent 60%),
        radial-gradient(620px 430px at 92% 8%, rgba(127,168,78,.20), transparent 62%),
        linear-gradient(180deg,rgba(245,234,218,.85),rgba(251,246,236,.35));
    border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)
}
/* Kisi poster: jumlah kolom mengikuti lebar yang tersedia supaya kartu 9:16
   tidak menjadi terlalu tinggi. Kartu minimum 240px — batas yang sama dengan
   aturan komposisi visual proyek untuk kisi kartu (`uji_komposisi.js`
   menolak kolom kartu < 240px; nilai 220px dulu terbaca 229px pada 1024px). */
.poster-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap:22px;align-items:stretch
}
.poster{
    display:flex;flex-direction:column;border-radius:var(--radius-besar);overflow:hidden;
    background:rgba(255,255,255,.93);border:1px solid var(--garis);box-shadow:var(--bayang-kecil);
    text-decoration:none;color:var(--ink);transition:transform .18s ease, box-shadow .18s ease
}
.poster:hover{transform:translateY(-4px);box-shadow:var(--bayang);text-decoration:none;color:var(--ink)}
.poster-lencana{
    align-self:flex-start;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);
    color:#fff;border-radius:999px;padding:3px 12px;font-size:.72rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase
}
.poster-unit{
    background:linear-gradient(158deg,#3F6529 0%,#4F7A34 52%,#6E8F2E 100%);
    color:#F3F7EC;padding:26px 24px;gap:12px;justify-content:flex-start;
    position:relative;overflow:hidden
}
.poster-unit::after{
    content:"";position:absolute;right:-52px;bottom:-58px;width:180px;height:180px;border-radius:50%;
    background:rgba(255,255,255,.10)
}
.poster-unit .poster-ikon{
    width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:1.9rem;
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)
}
.poster-unit .poster-judul{font-family:var(--font-judul);font-size:1.24rem;color:#fff;line-height:1.25}
.poster-unit .poster-ket{color:rgba(243,247,236,.9);font-size:.95rem}
.poster-unit .poster-tombol{margin-top:auto;font-weight:700;font-size:.9rem;color:#EAF6D8}
/* Bingkai gambar poster diatur di bagian "poster + instagram" di atas
   (.poster-foto 9:16 + .poster-foto__gambar). */
.poster-isi{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.poster-gambar .poster-judul{font-family:var(--font-judul);font-size:1.12rem}
.poster-gambar .poster-ket{color:var(--ink-lembut);font-size:.93rem}
.poster-gambar .poster-tombol{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--merah)}

/* ---------- berita ---------- */
.daftar-berita{align-items:stretch}
.kartu-berita{padding:0;overflow:hidden;display:flex;flex-direction:column}
.kartu-berita .berita-isi{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.kartu-berita h3{margin:.15em 0 .45em;font-size:1.14rem}
.kartu-berita h3 a{color:var(--ink)}
.kartu-berita h3 a:hover{color:var(--merah);text-decoration:none}
.kartu-berita p{color:var(--ink-lembut);font-size:.95rem}
.kartu-berita .tautan-panah{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--merah);display:inline-flex;gap:8px}
.kartu-berita .tautan-panah:hover{gap:12px;text-decoration:none}
.berita-gambar{display:block;background:var(--krem-2)}
.berita-gambar img{width:100%;height:190px;object-fit:cover;display:block}

.berita-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.8rem;color:var(--ink-lembut)}
.berita-meta time{font-weight:600}
.berita-kategori{
    background:var(--hijau-lembut);color:var(--hijau);border:1px solid rgba(79,122,52,.22);
    border-radius:999px;padding:2px 11px;font-size:.74rem;font-weight:700;letter-spacing:.03em;
    text-decoration:none
}
a.berita-kategori:hover{background:var(--hijau);color:#fff;text-decoration:none}

.penyaring{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.penyaring-item{
    background:rgba(255,255,255,.86);border:1.5px solid var(--garis);border-radius:999px;
    padding:8px 16px;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none
}
.penyaring-item small{color:var(--ink-lembut);font-weight:500}
.penyaring-item:hover{border-color:var(--hijau-terang);text-decoration:none}
.penyaring-item.aktif{background:var(--merah);border-color:var(--merah);color:#fff}
.penyaring-item.aktif small{color:rgba(255,255,255,.85)}

.halaman{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:34px}
.halaman-info{font-size:.9rem;color:var(--ink-lembut)}

.baca-berita{max-width:780px;margin:0 auto}
.jejak{font-size:.85rem;color:var(--ink-lembut);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.jejak a{color:var(--merah)}
.baca-kepala h1{margin:.25em 0 .5em}
.baca-ringkasan{font-size:1.06rem;color:var(--ink-lembut);font-weight:500}
.baca-gambar{margin:26px 0 0;border-radius:var(--radius-besar);overflow:hidden;box-shadow:var(--bayang)}
.baca-gambar img{width:100%;max-height:460px;object-fit:cover}
.baca-isi{margin-top:26px;font-size:1.04rem}
.baca-isi p{margin-bottom:1.15em}
.baca-sumber{
    margin-top:26px;padding:18px 22px;border-radius:16px;
    background:var(--krem-2);border:1px dashed var(--garis);font-size:.92rem;
    display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center
}
.baca-sumber a{font-weight:600}

.pratinjau-gambar{margin-bottom:12px}
.pratinjau-gambar img{
    width:100%;max-width:340px;height:190px;object-fit:cover;border-radius:var(--radius-mdl);
    border:1px solid var(--garis);background:var(--krem-2)
}
.pratinjau-hapus{
    display:inline-flex;gap:9px;align-items:center;margin-top:10px;
    font-size:.88rem;background:var(--merah-lembut);border:1px solid rgba(179,38,30,.25);
    border-radius:12px;padding:9px 14px
}
.pratinjau-hapus input{accent-color:var(--merah)}
.aksi-baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- dokumentasi foto berita ---------- */
.baca-dokumentasi{margin-top:34px}
.baca-dokumentasi-judul{
  font-family:var(--font-judul);font-size:1.15rem;margin-bottom:16px;
  padding-bottom:9px;border-bottom:2px solid var(--garis)
}
.galeri-dokumentasi{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.galeri-dokumentasi .galeri-item img{aspect-ratio:4/3}
.dok-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:12px}
.dok-item{background:var(--krem-2);border:1px dashed var(--garis);border-radius:var(--radius-mdl);padding:12px}
.dok-item img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--garis);margin-bottom:10px}
.dok-item-isian{display:flex;flex-direction:column;gap:8px}
.dok-item-isian input[type=text]{
  font:inherit;font-size:.88rem;background:#fffdf8;border:1.5px solid var(--garis);
  border-radius:var(--radius-md);padding:8px 10px;width:100%
}

/* ---------- pemilih ikon 3D ---------- */
.pilih-ikon{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pilih-ikon-pratinjau{
  width:96px;height:96px;flex:none;display:grid;place-items:center;
  background:var(--krem-2);border:1px solid var(--garis);border-radius:18px
}
.pilih-ikon-pratinjau img{width:72px;height:72px;object-fit:contain}
.pilih-ikon-kosong{font-size:.78rem;color:var(--ink-lembut)}
.pilih-ikon-isian{flex:1;min-width:260px;display:flex;flex-direction:column;gap:4px}
.pilih-ikon-isian label.bantuan{margin:0}
.pilih-ikon-isian select,.pilih-ikon-isian input[type=file]{
  font:inherit;font-size:.94rem;background:#fffdf8;border:1.5px solid var(--garis);
  border-radius:12px;padding:10px 12px;width:100%
}
.pilih-ikon-hapus{
  display:flex;gap:8px;align-items:center;margin-top:6px;font-size:.86rem;
  background:var(--merah-lembut);border:1px solid rgba(179,38,30,.22);border-radius:12px;padding:8px 12px
}

/* ---------- editor konten (halaman pengurus) ---------- */
.editor-kepala{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.editor-formulir .grid-form{gap:20px 22px}
.editor-aksi{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.pilih-grup{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:26px}
.pilih-grup-item{
    display:flex;flex-direction:column;gap:2px;
    background:rgba(255,255,255,.82);border:1.5px solid var(--garis);border-radius:var(--radius-mdl);
    padding:13px 16px;color:var(--ink);text-decoration:none;box-shadow:var(--bayang-kecil)
}
.pilih-grup-item:hover{text-decoration:none;border-color:var(--hijau-terang);transform:translateY(-2px)}
.pilih-grup-item strong{font-size:.95rem}
.pilih-grup-item small{color:var(--ink-lembut);font-size:.78rem}
.pilih-grup-item.aktif{background:var(--merah-lembut);border-color:var(--merah)}
.pilih-grup-item.aktif small{color:var(--merah)}

.kartu-ulang{display:grid;gap:16px}
.kartu-ulang-baris{
    background:var(--krem-2);border:1px dashed var(--garis);border-radius:16px;padding:18px 20px;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px
}
.kartu-ulang-baris .medan-penuh{grid-column:1 / -1}
.kartu-ulang-aksi{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--garis);padding-top:12px}
.kartu-ulang-aksi button{font-size:.82rem;padding:8px 14px}
.kartu-ulang[data-kosong="1"]::before{
    content:"Belum ada kartu. Tekan tombol di bawah untuk menambah.";
    color:var(--ink-lembut);font-size:.9rem
}
.editor-formulir textarea{min-height:90px}

/* ==========================================================================
   TIPOGRAFI & KETERBACAAN
   Prinsip yang dipakai:
   - Teks narasi (prosa) diratakan KIRI-KANAN (justify) hanya bila lebar barisnya
     cukup panjang (>= ~50 huruf). Pada kolom sempit, justify membuat celah
     antarkata melebar ("sungai putih") sehingga justru menyulitkan membaca.
   - Panjang baris dibatasi ~80 huruf agar mata tidak lelah menyeberang.
   - Tinggi baris 1,75-1,8 untuk teks bacaan; UI (tombol/label) tetap rapat.
   ========================================================================== */

/* Narasi panjang: rata kiri-kanan.
   Catatan: browser TIDAK menyediakan kamus pemenggalan kata Bahasa Indonesia
   (hyphens: auto tidak berefek untuk lang="id"), sehingga perataan kiri-kanan
   menambah celah antarkata. Karena itu perataan hanya dipakai pada blok yang
   lebar barisnya sudah cukup panjang; blok sempit dibiarkan rata kiri. */
.sorot-narasi > p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* Berita: isi bacaan paling panjang — paling layak rata kiri-kanan */
.baca-isi p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* Kotak sorotan berisi narasi dibuat lebih ramping & di tengah, sehingga
   panjang barisnya sekitar 90 huruf — batas nyaman untuk teks berparagraf. */
.sorot-narasi {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Pengantar bagian dibiarkan RATA KIRI dan lebarnya dibatasi ~89 huruf.
   Alasan terukur: kalimat pengantar hanya 1-3 baris, dan karena browser tidak
   memenggal kata Bahasa Indonesia, perataan kiri-kanan membuat celah antarkata
   melar hingga 6 kali celah normal (4px menjadi 24px) — teks jadi berlubang.
   Perataan kiri-kanan hanya dipakai pada blok bacaan panjang di bawah ini. */
.judul-bagian > p {
    max-width: 600px;
}
.judul-bagian.tengah > p {
    margin-left: auto;
    margin-right: auto;
}

/* Teks bacaan berita dibatasi ~89 huruf per baris. */
.baca-berita {
    max-width: 740px;
}
.baca-isi p {
    /* 680px dipilih dari hasil pengukuran: menghasilkan 66 huruf/baris
       (paling nyaman dibaca) dengan celah antarkata maksimal 2,6x celah normal. */
    max-width: 680px;
}

/* Blok lebar yang bukan narasi (mis. pesan kosong & ajakan) juga dibatasi,
   supaya barisnya tidak melebar sampai >100 huruf. */
.sorot:not(.sorot-narasi) > p,
.kartu p,
.info-item p,
.cek li,
.kaki p,
.kaki li {
    max-width: 620px;
}
/* Pengantar bagian yang ditengahkan: batas sama dengan pengantar biasa (600px),
   dan di tengah. Sebelumnya ada aturan "72ch" yang menimpanya sehingga baris melebar. */
.judul-bagian.tengah > p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
/* Kotak yang isinya ditengahkan: batas lebar harus ikut ditengahkan. */
.sorot[style*="text-align:center"] > p {
    margin-left: auto;
    margin-right: auto;
}
.sorot[style*="text-align:center"] > h2,
.sorot[style*="text-align:center"] > h3 {
    margin-left: auto;
    margin-right: auto;
    max-width: 30ch;
}

/* Paragraf bacaan diberi jarak antarbaris & antarparagraf yang lega */
.sorot-narasi > p,
.baca-isi p {
    line-height: 1.8;
}
.baca-isi p + p,
.sorot-narasi > p + p {
    margin-top: 1.25em;
}

/* Judul: hindari satu kata menggantung di baris terakhir */
h1, h2, h3, h4 {
    text-wrap: balance;
}

/* Paragraf: hindari kata terakhir berdiri sendiri di baris baru */
p {
    text-wrap: pretty;
}

/* Tautan lebih nyaman dilihat & diklik */
a {
    text-underline-offset: 3px;
    text-decoration-thickness: from-font;
}

/* Penanda fokus untuk pengguna papan tik (aksesibilitas) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.tombol:focus-visible {
    outline: 3px solid var(--hijau-terang);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Warna penanda teks yang dipilih menyesuaikan tema */
::selection {
    background: rgba(217, 58, 43, .18);
    color: var(--ink);
}

/* Di layar sempit (satu kolom) panjang baris menjadi pendek,
   sehingga rata kiri-kanan dimatikan agar tetap enak dibaca. */
@media (max-width: 700px) {
    .sorot-narasi > p,
    .narasi > p,
    .baca-isi p {
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* Kolom narasi dua-baris (Profil & Program) diratakan KIRI pada semua lebar:
   pada lebar kolom 528px, perataan kiri-kanan membuat celah antarkata 3-5x celah
   normal (terukur), sehingga lebih nyaman dibaca rata kiri. */
.narasi > p {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Kolom narasi dua baris (berdampingan) baru cukup lebar mulai 900px */
@media (max-width: 900px) {
    .narasi > p {
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* ---------- tanggap layar ---------- */
@media (max-width:1000px){
  .kaki-isi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-isi{grid-template-columns:1fr;gap:34px}
  .hero-lambang{order:-1}
  .cip-atas{left:0}
  .cip-bawah{right:0}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilar,.langkah,.grid-3{grid-template-columns:1fr 1fr}
  .galeri,.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .personel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kontak-grid{grid-template-columns:1fr}
}
/* Menu berubah menjadi tombol tiga garis mulai dari lebar tablet,
   supaya nama koperasi & menu tidak berdesakan. */
/* Desktop (>=1181px): menu dirapatkan supaya KESEBELAS item (10 menu + tombol
   Daftar Anggota) tetap satu baris setelah bertambahnya menu Potensi Kelurahan,
   Peta Potensi, dan Regulasi. Diukur: kebutuhan 769px, tersedia 806px pada
   lebar layar 1181px. */
@media (min-width:1181px){
  .kepala-isi{gap:14px}
  .nav{gap:0}
  .nav a{font-size:.78rem;padding:8px 5px}
  .nav .tombol-kecil{padding:8px 11px;font-size:.78rem;margin-left:4px}
  .merek-teks strong,.merek-teks em{font-size:.94rem}
}

/* Pita tersempit pada menu desktop (1181–1279px).
   Sejak tombol "Masuk Anggota" ikut tampil di kepala halaman, kebutuhan ruang
   menu (tautan + dua tombol aksi) melebihi ruang yang tersedia hanya sekitar
   2px pada 1181px — akibatnya menu membungkus dua baris dan tinggi kepala
   menjadi 119px. Dirapatkan sedikit (hanya pada pita ini) supaya tetap
   satu baris; di atas 1280px pengaturannya tidak diubah. */
@media (min-width:1181px) and (max-width:1279px){
  .nav a{font-size:.735rem;padding:8px 4px}
  .nav .tombol-kecil{padding:8px 8px;font-size:.735rem;margin-left:2px}
  .kepala-isi{gap:10px}
}

@media (max-width:1180px){
  .tombol-togel{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:44px;padding:0 11px;border:1.5px solid var(--garis);
    border-radius:12px;background:#fff;cursor:pointer
  }
  .tombol-togel span{display:block;height:2px;background:var(--merah);border-radius:2px}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    background:#FFFDF8;border-bottom:1px solid var(--garis);
    flex-direction:column;align-items:stretch;gap:2px;padding:14px 18px 20px;
    box-shadow:var(--bayang);display:none;justify-content:flex-start
  }
  .nav a{padding:12px 13px;font-size:.93rem}
  .nav .tombol-kecil{margin-left:0;margin-top:6px;justify-content:center}
  .togel-nav:checked ~ .nav{display:flex}
}

@media (max-width:760px){
  body{font-size:16px}
  .kartu-ulang-baris{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4,.pilar,.langkah,.grid-form,.pilihan-unit,.ringkas-anggota,.galeri,.poster-grid,.personel-grid,.galeri-dokumentasi{grid-template-columns:1fr}
  .bagian{padding:46px 0}
  .formulir-panel{padding:22px}
  .kaki-isi{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .kartu{padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   PETA POTENSI KELURAHAN (halaman Peta Potensi & peta kecil di halaman Potensi)
   ========================================================================== */

.peta-alat{
  display:grid;grid-template-columns:1fr auto auto;gap:18px 22px;align-items:start;
  background:rgba(255,255,255,.72);border:1px solid var(--garis);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--bayang-kecil);margin-bottom:22px
}
.peta-alat-blok{display:flex;flex-direction:column;gap:9px;min-width:0}
.peta-alat-judul{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--ink-lembut)}
.peta-penyaring{margin-bottom:0}
.peta-titik-warna{
  width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:7px;
  vertical-align:middle;box-shadow:var(--shadow-cincin)
}
.peta-layer{display:flex;gap:8px;flex-wrap:wrap}
.peta-layer-pil{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--garis);
  border-radius:999px;background:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;cursor:pointer
}
.peta-layer-pil input{accent-color:var(--merah);margin:0}
.peta-layer-pil:has(input:checked){border-color:var(--merah);color:var(--merah);background:var(--merah-lembut)}
.peta-total{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.peta-total strong{font-family:var(--font-judul);font-size:2rem;color:var(--merah)}
.peta-total small{font-size:.78rem;color:var(--ink-lembut);max-width:150px}

.peta-bingkai{padding:14px;margin-bottom:26px}
.peta-kanvas{
  width:100%;height:var(--peta-tinggi,560px);border-radius:var(--radius-mdl);background:var(--krem-2);
  border:1px solid var(--garis);z-index:1
}
.peta-kanvas-galat{display:grid;place-items:center;padding:22px;text-align:center;color:var(--ink-lembut)}
.peta-pin{background:none;border:0}
.peta-bantuan{margin:12px 2px 0;font-size:.86rem;color:var(--ink-lembut);max-width:680px}
.peta-bantuan-galat{color:var(--merah)}
.peta-catatan{margin:14px 0 0;font-size:.86rem;color:var(--ink-lembut);font-style:italic;max-width:680px}
.peta-kecil{margin:22px 0}
.peta-kecil .peta-kanvas{--peta-tinggi:420px}

.peta-daftar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.peta-titik{display:flex;flex-direction:column;padding:0;overflow:hidden}
.peta-titik-foto{aspect-ratio:16/9;overflow:hidden;background:var(--krem-2)}
.peta-titik-foto img{width:100%;height:100%;object-fit:cover}
.peta-titik-isi{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.peta-titik-isi h3{margin:0;font-size:1.1rem}
.peta-titik-isi p{margin:0;color:var(--ink-lembut);font-size:.93rem;max-width:620px}
.peta-kategori-tanda{--warna-titik:var(--ink-lembut)}
.reg-kategori.peta-kategori-tanda::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--warna-titik);
  display:inline-block;margin-right:6px
}
.peta-titik-koordinat{font-size:.84rem}
.peta-titik-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:12px}

.peta-modal{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;padding:18px}
.peta-modal[hidden]{display:none}
.peta-modal-tirai{position:absolute;inset:0;background:rgba(42,36,30,.55)}
.peta-modal-kotak{
  position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;background:#FFFDF8;
  border:1px solid var(--garis);border-radius:var(--radius-besar);box-shadow:var(--bayang);z-index:1
}
.peta-modal-tutup{
  position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--garis);
  background:rgba(255,255,255,.94);font-size:20px;line-height:1;cursor:pointer;color:var(--ink-lembut);z-index:2
}
.peta-modal-tutup:hover{background:#fff;color:var(--merah)}
.peta-modal-foto{aspect-ratio:16/9;overflow:hidden;background:var(--krem-2)}
.peta-modal-foto img{width:100%;height:100%;object-fit:cover}
.peta-modal-kepala{padding:20px 22px 0}
.peta-modal-judul{margin:10px 22px 0;font-size:1.25rem}
.peta-modal-baris{margin:10px 22px 0;color:var(--ink-lembut);font-size:.95rem;max-width:620px}
.peta-modal-aksi{display:flex;flex-wrap:wrap;gap:10px;padding:18px 22px 22px}
html.peta-modal-aktif{overflow:hidden}

@media (max-width:1080px){
  .peta-alat{grid-template-columns:1fr 1fr}
  .peta-alat-blok:first-child{grid-column:1 / -1}
  .peta-daftar{grid-template-columns:1fr}
}

@media (max-width:760px){
  .peta-alat{grid-template-columns:1fr;padding:16px}
  .peta-kanvas{height:min(var(--peta-tinggi,560px),62vh);min-height:320px}
  .peta-titik-isi{padding:18px}
  .peta-modal{padding:10px}
  .peta-modal-kepala{padding:18px 18px 0}
  .peta-modal-judul,.peta-modal-baris{margin-left:18px;margin-right:18px}
  .peta-modal-aksi{padding:16px 18px 20px}
}

/* ==========================================================================
   TABEL KETUA RT & RW + KOTAK SITUS RESMI (halaman Potensi Kelurahan & beranda)
   ========================================================================== */

.rt-rw{margin-top:34px}
.judul-bagian-rapat{margin-bottom:18px}

.tabel-gulir{
  overflow-x:auto;background:rgba(255,255,255,.76);border:1px solid var(--garis);
  border-radius:var(--radius);box-shadow:var(--bayang-kecil)
}
/* ---------- ringkasan di atas tabel ---------- */
.rt-rw-ringkas{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.rt-rw-pil{
  display:inline-flex;align-items:baseline;gap:8px;padding:8px 16px;font-size:.88rem;
  color:var(--ink-lembut);background:rgba(255,255,255,.82);border:1px solid var(--garis);
  border-radius:999px;box-shadow:var(--bayang-kecil)
}
.rt-rw-pil b{font-family:var(--font-judul);font-size:1.12rem;color:var(--merah)}
.rt-rw-pil small{font-size:.78rem;color:var(--ink-lembut)}

/* ---------- tabel utama ---------- */
.tabel-rt-rw{width:100%;min-width:840px;border-collapse:collapse;font-size:.92rem}
.tabel-rt-rw th,.tabel-rt-rw td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--garis)}
.tabel-rt-rw thead th{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-lembut);
  background:var(--krem-2);border-bottom:2px solid var(--garis);white-space:nowrap
}
.tabel-rt-rw thead th.kol-angka{text-align:right}
.tabel-rt-rw .baris-wilayah{display:none}
.tabel-rt-rw tbody tr:last-child td{border-bottom:0}
.tabel-rt-rw tbody tr:not(.baris-wilayah):hover td{background:rgba(251,246,236,.65)}
.tabel-rt-rw .sel-rw{
  font-weight:700;font-family:var(--font-judul);font-size:1.02rem;color:var(--merah-tua);
  background:rgba(237,243,227,.7);white-space:nowrap;border-right:1px solid var(--garis)
}
.tabel-rt-rw .sel-rw-tanda{
  display:block;font-family:var(--font-teks);font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-lembut)
}
.tabel-rt-rw .sel-rw-angka{
  display:block;margin-top:4px;font-family:var(--font-teks);font-size:.72rem;font-weight:600;
  color:var(--ink-lembut);line-height:1.4
}
.tabel-rt-rw .sel-jabatan{white-space:nowrap;font-variant-numeric:tabular-nums}
.tabel-rt-rw .jabatan-prefix{display:none} /* di tabel, judul kolom sudah "RT" */
.tabel-rt-rw .sel-nama{min-width:185px;font-weight:600}
.tabel-rt-rw .sel-hp{white-space:nowrap;font-variant-numeric:tabular-nums}
.tabel-rt-rw .sel-l,.tabel-rt-rw .sel-p,.tabel-rt-rw .sel-kk{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums
}
.tabel-rt-rw .sel-l{color:var(--hijau);font-weight:700}
.tabel-rt-rw .sel-p{color:var(--merah);font-weight:700}
.tabel-rt-rw .sel-keterangan{min-width:150px;color:var(--ink-lembut)}
.tabel-rt-rw .angka-kosong{color:var(--ink-lembut);font-weight:400}
.tabel-rt-rw .tanda-ketua-rw{
  display:inline-block;background:var(--merah);color:#fff;font-size:.72rem;font-weight:700;
  padding:2px 10px;border-radius:999px
}
.tabel-rt-rw tbody tr.baris-ketua-rw td{background:var(--merah-lembut);border-bottom:1px solid rgba(179,38,30,.18)}
.tabel-rt-rw tbody tr.baris-ketua-rw .sel-rw{background:rgba(251,237,234,.95);color:var(--merah-tua)}
.tabel-rt-rw tbody tr.baris-ketua-rw .sel-nama{font-weight:700}

/* Layar sedang: padding dirapatkan supaya tabel selebar mungkin tetap muat
   tanpa gulir mendatar (terukur: 840px cukup di lebar layar 901px). */
@media (max-width:1200px){
  .tabel-rt-rw{min-width:800px}
  .tabel-rt-rw th,.tabel-rt-rw td{padding:10px 11px}
  .tabel-rt-rw .sel-nama{min-width:165px}
  .tabel-rt-rw .sel-keterangan{min-width:130px}
}

/* ---------- layar kecil: tabel menjadi kartu per orang (tetap satu markup) ---------- */
@media (max-width:900px){
  .tabel-gulir{overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
  .tabel-rt-rw{min-width:0;font-size:.9rem}
  .tabel-rt-rw,.tabel-rt-rw tbody{display:block}
  .tabel-rt-rw thead,.tabel-rt-rw .sel-rw{display:none}
  .tabel-rt-rw tbody tr{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;
    padding:13px 15px;margin-bottom:12px;background:rgba(255,255,255,.82);
    border:1px solid var(--garis);border-radius:16px;box-shadow:var(--bayang-kecil)
  }
  .tabel-rt-rw tbody tr.baris-ketua-rw{background:var(--merah-lembut);border-color:rgba(179,38,30,.25)}
  .tabel-rt-rw tbody tr.baris-ketua-rw td{background:none}
  .tabel-rt-rw tbody tr.baris-wilayah{
    display:block;padding:20px 2px 8px;margin:0;background:none;border:0;box-shadow:none
  }
  .tabel-rt-rw tbody tr.baris-wilayah th{
    display:block;padding:0;border:0;font-family:var(--font-judul);font-size:1.08rem;
    color:var(--merah-tua);text-transform:none;letter-spacing:0
  }
  .tabel-rt-rw tbody tr.baris-wilayah:first-child{padding-top:0}
  .tabel-rt-rw .baris-wilayah-ket{
    margin-left:8px;font-family:var(--font-teks);font-size:.78rem;font-weight:600;
    letter-spacing:0;text-transform:none;color:var(--ink-lembut)
  }
  .tabel-rt-rw td{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline;
    padding:0;border:0;min-width:0;text-align:left
  }
  .tabel-rt-rw td::before{
    content:attr(data-kolom);font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;color:var(--ink-lembut);white-space:nowrap
  }
  .tabel-rt-rw td>span.angka-kosong,.tabel-rt-rw td.sel-jabatan>span,
  .tabel-rt-rw td.sel-l,.tabel-rt-rw td.sel-p,.tabel-rt-rw td.sel-kk{font-variant-numeric:tabular-nums}
  .tabel-rt-rw .sel-jabatan{grid-column:1 / -1;font-size:.95rem;font-weight:700;color:var(--merah)}
  .tabel-rt-rw .sel-jabatan::before{content:none}
  .tabel-rt-rw .sel-jabatan .jabatan-prefix{display:inline}
  .tabel-rt-rw .sel-nama{grid-column:1 / -1;font-size:1.04rem;font-weight:700;color:var(--ink)}
  .tabel-rt-rw .sel-nama::before{content:none}
  .tabel-rt-rw .sel-l,.tabel-rt-rw .sel-p,.tabel-rt-rw .sel-kk{text-align:left}
  .tabel-rt-rw .sel-keterangan{grid-column:2 / -1}
}

.pot-situs{margin-top:34px}
.pot-situs-judul{font-size:1.5rem;margin:0 0 .3em}
.pot-situs-teks{margin:0 0 20px;color:var(--ink-lembut);font-size:.98rem;max-width:600px}
.pot-situs-kisi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pot-situs-kisi .pot-kelurahan{align-items:flex-start}
.pot-situs-kisi .pot-kelurahan-isi{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pot-situs-kisi .pot-kelurahan-isi h3{font-size:1.06rem;margin:0}
.pot-situs-kisi .pot-kelurahan-isi p{margin:0 0 4px;max-width:520px}
.pot-situs-kisi .pot-kelurahan-isi .tombol{margin-top:auto}

.pot-rt-baris,.pot-situs-baris{
  margin:16px 0 0;font-size:.92rem;color:var(--ink-lembut);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px
}
.pot-rt-baris{margin-top:14px}
.pot-rt-angka{font-weight:700;color:var(--ink)}
.pot-situs-label{font-weight:700;color:var(--ink)}
.pot-situs-pemisah{color:var(--garis);font-weight:700}
.pot-rt-baris a,.pot-situs-baris a{font-weight:600}

@media (max-width:1080px){
  .pot-situs-kisi{grid-template-columns:1fr}
}

/* Catatan: tata letak tabel pada layar kecil diatur di blok @media (max-width:900px)
   di atas (tabel berubah menjadi kartu per orang); aturan lama berbasis
   penyembunyian kolom sudah tidak dipakai lagi. */
@media (max-width:700px){
  .pot-situs-judul{font-size:1.3rem}
}