:root{
  --ink:#1B2A3A;
  --header:#2E86C1;
  --header-dark:#1F6FA8;
  --paper:#F7FBFE;
  --paper-dark:#EAF4FB;
  --seal-red:#E0592F;
  --brass:#ffe6c0;
  --muted:#5C7186;
  --line:#D6E6F2;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  color-scheme:light;
}

/* ===== MODE GELAP ===== */
:root[data-theme="dark"]{
  --ink:#E8F1FA;
  --header:#173A54;
  --header-dark:#0F2A3E;
  --paper:#0E161F;
  --paper-dark:#141F2B;
  --seal-red:#FF7A4D;
  --brass:#F4CE8E;
  --muted:#9FB4C7;
  --line:#26384A;
  --white:#FFFFFF;
  --surface:#182430;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', 'Segoe UI', Arial, sans-serif;
  line-height:1.55;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  margin:0 0 .4em 0;
  font-weight:600;
  letter-spacing:.2px;
}
.mono{
  font-family:'IBM Plex Mono','Courier New',monospace;
  letter-spacing:.06em;
}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ===== HEADER / NAV ===== */
header.site{
  background:var(--header);
  color:var(--white);
  position:sticky; top:0; z-index:50;
  border-bottom:3px solid var(--brass);
}
.nav-wrap{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  gap:16px; flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;}
.seal{
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:14px;
  color:var(--white); flex-shrink:0;
}
.brand-text .kicker{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  font-family:'IBM Plex Mono',monospace;
}
.brand-text .title{font-size:19px;font-family:'Fraunces',serif;font-weight:600;color:var(--white);}
nav.menu{display:flex;gap:2px;flex-wrap:wrap;}
nav.menu a{
  display:block;padding:10px 14px;text-decoration:none;
  font-size:14px; border-radius:3px; color:var(--white);
  transition:background .15s;
}
nav.menu a:hover, nav.menu a:focus-visible{background:rgba(255,255,255,.2); outline:none;}
nav.menu a.active{background:rgba(255,255,255,.22); box-shadow:inset 0 -2px 0 var(--brass);}

/* ===== TOMBOL DARK / LIGHT ===== */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-left:8px;
  border:1px solid rgba(255,255,255,.4); border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--white);
  font-size:16px; cursor:pointer; line-height:1;
  transition:background .15s, transform .15s;
  flex-shrink:0;
}
.theme-toggle:hover{background:rgba(255,255,255,.25);}
.theme-toggle:active{transform:scale(.92);}

/* ===== PAGE HERO (halaman terpisah selain beranda) ===== */
.page-hero{
  background:linear-gradient(160deg, var(--header) 0%, var(--header-dark) 100%);
  color:var(--white);
  padding:56px 24px 46px;
}
.page-hero .idx{
  font-family:'IBM Plex Mono',monospace;color:var(--brass);
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
}
.page-hero h1{color:var(--white);margin-top:10px;font-size:clamp(26px,4vw,40px);}
.page-hero .sub-left{color:#DCEEFA;font-size:15px;max-width:560px;margin:10px 0 0;}

/* ===== HERO ===== */
.hero{
  position:relative;
  background:
    linear-gradient(160deg, rgba(158, 216, 255, 0.75) 0%, rgba(28, 122, 189, 0.82) 100%),
    url("bgkantorkelurahanpb.jfif");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--white);
  padding:96px 24px 110px;
  text-align:center;
  overflow:hidden;
}
.hero .eyebrow{
  font-family:'IBM Plex Mono',monospace;
  color:var(--brass); font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(30px,5vw,54px);
  color:var(--white); max-width:820px;margin:0 auto 14px;
}
.hero p.sub{
  max-width:560px;margin:0 auto; color:#DCEEFA; font-size:16px;
}
.hero-seal{
  width:96px;height:96px;border-radius:50%;
  border:2px solid var(--brass);
  margin:0 auto 26px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;color:var(--brass);font-size:12px;
  letter-spacing:.1em;text-align:center;line-height:1.3;
  background:rgba(255,255,255,.08);
}
.hero-plank{
  margin-top:44px; display:inline-flex; gap:0;
  border:1px solid rgba(255,255,255,.3);
  border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.hero-plank div{
  padding:14px 24px; font-family:'IBM Plex Mono',monospace; font-size:13px;
  border-right:1px solid rgba(255,255,255,.3);
}
.hero-plank div:last-child{border-right:none;}
.hero-plank .num{display:block;color:var(--brass);font-size:18px;font-weight:700;}

/* ===== SECTION SHELL ===== */
section{padding:78px 24px;}
.wrap{max-width:1180px;margin:0 auto;}
.section-head{
  display:flex; align-items:baseline; gap:16px; margin-bottom:36px;
  border-bottom:1px solid var(--line); padding-bottom:16px;
}
.section-head .idx{
  font-family:'IBM Plex Mono',monospace; color:var(--header); font-size:13px;
}
.section-head h2{font-size:clamp(22px,3vw,30px);}
section.alt{background:var(--paper-dark);}

/* ===== SECTION DENGAN BACKGROUND FOTO + WARNA ===== */
/* Cara pakai: tambahkan class "section-photo" pada <section>,
   lalu set gambar lewat inline style, contoh:
   <section id="profil" class="section-photo" style="--bg-img:url('foto-warga.jpg');">
   Warna overlay bisa diatur lewat --bg-overlay-1 / --bg-overlay-2 kalau perlu warna lain. */
section.section-photo{
  position:relative;
  background:
    linear-gradient(160deg, var(--bg-overlay-1, rgba(46,134,193,.82)) 0%, var(--bg-overlay-2, rgba(27,42,58,.86)) 100%),
    var(--bg-img, none) center/cover no-repeat;
  color:var(--white);
}
section.section-photo .card{
  background:rgba(255,255,255,.96);
}
section.section-photo .section-head{
  border-bottom-color:rgba(255,255,255,.25);
}
section.section-photo .section-head h2,
section.section-photo .idx{
  color:var(--white);
}

/* ===== CARD GRID (Profil / Infrastruktur / Statistik / Dokumentasi) ===== */
.card-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:26px 24px;
  position:relative;
  box-shadow:0 2px 10px rgba(46,134,193,.06);
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--brass); border-radius:8px 8px 0 0;
}
.card .tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--header);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;display:block;
}
.card h3{font-size:18px;margin-bottom:8px;}
.card p{margin:0;color:var(--muted);font-size:14.5px;}
.card a.link{
  display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;
  color:var(--seal-red); text-decoration:none; border-bottom:1px solid var(--seal-red);
}

/* ===== ALAMAT / MAP ===== */
.addr-grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:32px;
}
@media (max-width:820px){ .addr-grid{grid-template-columns:1fr;} }
.addr-box{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:30px;
  box-shadow:0 2px 10px rgba(46,134,193,.06);
}
.addr-box .kicker{font-family:'IBM Plex Mono',monospace;color:var(--header);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.addr-box h3{margin-top:6px;}
.batas-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px;}
.batas-table td{padding:7px 0;border-bottom:1px dashed var(--line);}
.batas-table td:first-child{color:var(--muted);width:40%;}
.map-box{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  height:420px; background:
    repeating-linear-gradient(45deg, #EAF4FB 0 10px, #DCEEFA 10px 20px);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:center;
}
.map-box:not(:has(iframe)){padding:20px;}
.map-box iframe{display:block;width:100%;height:100%;border:0;}
@media (max-width:820px){
  .map-box{height:320px;}
}

/* ===== STRUKTUR PEMERINTAHAN ===== */
.org-lead{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:34px;
}
.org-photo{
  width:96px;height:96px;border-radius:50%;background:var(--paper-dark);
  border:2px solid var(--brass); margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted); font-size:11px; font-family:'IBM Plex Mono',monospace;
}
.org-lead .role{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--seal-red);
  letter-spacing:.12em;text-transform:uppercase;
}
.org-row{
  display:grid; gap:18px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.org-card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:20px; text-align:center;
  box-shadow:0 2px 10px rgba(46,134,193,.06);
}
.org-card .org-photo{width:66px;height:66px;margin:0 auto 10px;font-size:10px;}
.org-card .role{display:block;margin-bottom:4px;color:var(--seal-red);}
.org-card .name{font-weight:600;font-size:14.5px;}
.org-subheading{
  margin-top:34px;font-size:15px;font-family:'IBM Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ===== FOOTER ===== */
footer{
  background:var(--header-dark); color:var(--white); padding:50px 24px 30px;
}
.footer-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.2);
}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr;}}
footer h4{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass);margin-bottom:14px;font-weight:600;
}
footer p, footer a{color:#DCEEFA;font-size:14px;text-decoration:none;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.copyline{
  max-width:1180px;margin:20px auto 0; font-size:12.5px; color:#A9CFE6;
  font-family:'IBM Plex Mono',monospace;
}

::selection{background:var(--brass);color:var(--ink);}
a:focus-visible, button:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

/* ===== PENYESUAIAN TAMBAHAN MODE GELAP ===== */
[data-theme="dark"] section.section-photo .card{
  background:rgba(24,36,48,.96);
}
[data-theme="dark"] .card h2[style],
[data-theme="dark"] .card h3[style],
[data-theme="dark"] .chart-card h3 a[style]{
  color:var(--ink) !important;
}
[data-theme="dark"] .card p,
[data-theme="dark"] .addr-box p{
  color:var(--muted);
}
[data-theme="dark"] .map-box{
  background:repeating-linear-gradient(45deg, #14212d 0 10px, #182430 10px 20px);
  color:var(--muted);
}
[data-theme="dark"] img{filter:brightness(.92);}