/* ============================================================
   Aplikasi Web RT — Desain modern
   Palet: hijau daun (RT) + netral hangat
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Warna utama */
  --brand-50:  #eefbf3;
  --brand-100: #d5f5e3;
  --brand-300: #86e0ab;
  --brand-500: #16a34a;
  --brand-600: #128a3e;
  --brand-700: #0f6b31;
  --brand-900: #0a3d1e;

  /* Netral */
  --bg:        #f6f8f6;
  --surface:   #ffffff;
  --surface-2: #f1f5f2;
  --line:      #e3e9e4;
  --line-soft: #eef2ef;
  --ink:       #14201a;
  --ink-2:     #3d4d43;
  --muted:     #6b7d71;

  /* Aksen */
  --warn:      #d97706;
  --warn-bg:   #fef3c7;
  --danger:    #dc2626;
  --danger-bg: #fee2e2;
  --info:      #2563eb;
  --info-bg:   #dbeafe;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16,32,24,.05);
  --shadow:    0 4px 16px rgba(16,32,24,.07);
  --shadow-lg: 0 12px 32px rgba(16,32,24,.12);
  --maxw:      1160px;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; font-weight: 750; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 650; }
img { max-width: 100%; }

/* ---------- Navbar publik ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.06rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font-size: 1.15rem; box-shadow: var(--shadow-sm);
}
.brand small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
/* Email sekretariat di footer publik */
.foot-mail { font-size: .88rem; word-break: break-all; }
/* Logo RT di navbar publik */
.brand-logo {
  width: 40px; height: 40px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.14));
}
/* Logo RT di sidebar admin.
   Logo berformat PNG transparan, jadi tidak perlu latar putih —
   cukup drop-shadow agar tetap kontras di atas sidebar gelap. */
.side-logo {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
/* Logo RT di kartu login */
.auth-logo {
  display: block; width: 108px; height: auto; margin: 0 auto 14px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.16));
}
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav-links a {
  padding: 8px 13px; border-radius: 9px; color: var(--ink-2); font-size: .92rem; font-weight: 550;
}
.nav-links a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav-links a.active { background: var(--brand-50); color: var(--brand-700); }

/* ---------- Navigasi: dropdown "Layanan" ---------- */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: 9px; color: var(--ink-2);
  font-size: .92rem; font-weight: 550; user-select: none;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover { background: var(--surface-2); color: var(--ink); }
.nav-drop > summary.active { background: var(--brand-50); color: var(--brand-700); }
.nav-drop .chev { transition: transform .18s ease; flex: 0 0 auto; }
.nav-drop[open] .chev { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px; z-index: 70;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  animation: dropIn .16s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.nav-drop-menu a {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px;
  border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .9rem;
  line-height: 1.25;
}
.nav-drop-menu a:hover { background: var(--surface-2); text-decoration: none; }
.nav-drop-menu a.active { background: var(--brand-50); color: var(--brand-700); }
.nav-drop-menu a .ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; background: var(--brand-50); font-size: 1rem;
}
.nav-drop-menu a small {
  display: block; font-weight: 500; font-size: .76rem; color: var(--muted); margin-top: 1px;
}

/* ---------- Tombol menu mobile (hamburger) ---------- */
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: 10px; flex-direction: column; gap: 4px;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle span {
  display: block; width: 21px; height: 2.5px; border-radius: 2px;
  background: var(--ink-2); transition: .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 72px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1000px 400px at 12% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--brand-700), var(--brand-500) 60%, #22c55e);
  color: #fff; border-radius: 22px; padding: 46px 40px; margin-bottom: 26px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); color: #fff; margin-bottom: 10px; }
.hero p { color: rgba(255,255,255,.92); max-width: 620px; margin: 0 0 18px; font-size: 1.03rem; }
.hero .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.hero .btn:hover { background: rgba(255,255,255,.26); }
.hero .btn.solid { background: #fff; color: var(--brand-700); border-color: #fff; font-weight: 650; }
.hero .btn.solid:hover { background: #f0fff6; }

/* ---------- Kartu ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.card.tight { padding: 16px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin: 0; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Statistik ---------- */
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; gap: 14px; align-items: center;
}
.stat .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.35rem; background: var(--brand-50); flex: 0 0 auto;
}
.stat .num { font-size: 1.6rem; font-weight: 780; letter-spacing: -.02em; line-height: 1.15; }
.stat .lbl { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* ---------- Kartu Total Seluruh Kas (ditonjolkan) ---------- */
.stat-total {
  background: linear-gradient(135deg, #0f6b31 0%, #0a4d24 100%) !important;
  border: 1px solid #0a4d24 !important;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 107, 49, .28);
}
.stat-total .ico {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff;
}
.stat-total .num {
  color: #fff;
  font-size: 1.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.stat-total .lbl {
  color: #d7f0e0 !important;
  font-weight: 700;
  letter-spacing: .07em;
}
.stat-total .total-rinci {
  margin-top: 5px; font-size: .74rem; color: #bfe6cd; line-height: 1.45;
}
.stat-total .total-rinci span { display: block; white-space: nowrap; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 15px; font-size: .92rem; font-weight: 580; cursor: pointer;
  transition: .14s ease; text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: #d3dbd5; }
.btn.primary { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.btn.primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { color: var(--danger); border-color: #f3c9c9; background: #fff; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: 6px 11px; font-size: .84rem; border-radius: 8px; }
.btn.lg { padding: 12px 22px; font-size: 1rem; }

/* ---------- Tabel ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tbl th, table.tbl td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); }
table.tbl th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 700; background: var(--surface-2); position: sticky; top: 0;
}
table.tbl tbody tr:hover { background: #fafcfb; }
/* Header kolom yang bisa diurutkan */
table.tbl th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
table.tbl th a:hover { color: var(--brand, #0f6b31); text-decoration: underline; }
table.tbl th a span { font-size: .9em; }
table.tbl tr.warn { background: #fffdf3; }
table.detail th { width: 220px; color: var(--muted); font-weight: 550; background: transparent; text-transform: none; letter-spacing: 0; font-size: .88rem; }
table.detail td { font-weight: 500; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; }

/* ---------- Badge / Tag ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.tag.ok    { background: var(--brand-50); color: var(--brand-700); }
.tag.warn  { background: var(--warn-bg); color: #92400e; }
.tag.info  { background: var(--info-bg); color: #1e40af; }
.tag.danger{ background: var(--danger-bg); color: #991b1b; }

/* ---------- Form ---------- */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=date], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .93rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
  transition: .14s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50);
}
textarea { min-height: 130px; resize: vertical; }
label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field { margin-bottom: 16px; }
.filters label { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
.filters input[type=search] { flex: 1; min-width: 220px; width: auto; }
.filters select { width: auto; min-width: 150px; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; font-size: .9rem; cursor: pointer; }
.chk input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.form-actions { grid-column: 1/-1; display: flex; gap: 10px; padding-top: 6px; }

/* ---------- Alert ---------- */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 18px;
  font-size: .92rem; border: 1px solid;
}
.alert.info  { background: var(--info-bg); border-color: #bfdbfe; color: #1e3a8a; }
.alert.warn  { background: var(--warn-bg); border-color: #fcd34d; color: #78350f; }
.alert.ok    { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-900); }

/* ---------- Berita ---------- */
.news-card { display: flex; flex-direction: column; height: 100%; }
.news-card .thumb {
  height: 150px; border-radius: var(--radius-sm); margin-bottom: 14px;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-300));
  display: grid; place-items: center; font-size: 2.2rem; color: var(--brand-700);
}
.news-meta { font-size: .8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.news-card h3 { margin-bottom: 8px; }
.news-card p { color: var(--ink-2); font-size: .92rem; margin: 0 0 12px; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article { max-width: 760px; }
.article-body { font-size: 1.03rem; color: var(--ink-2); }
.article-body p { margin: 0 0 1em; }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 30px 20px; margin-top: 40px;
}
.foot-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .87rem; color: var(--muted); }
.foot a { color: var(--muted); }

/* ---------- Login ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(700px 380px at 20% 0%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(700px 380px at 100% 100%, rgba(22,163,74,.14), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 32px 30px;
  box-shadow: var(--shadow-lg);
}
.auth-card .brand-mark { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 15px; margin: 0 auto 16px; }
.auth-card h1 { text-align: center; font-size: 1.35rem; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 24px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth-foot { text-align: center; margin-top: 20px; font-size: .88rem; color: var(--muted); }

/* ============================================================
   ADMIN — sidebar layout
   ============================================================ */
.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side {
  background: linear-gradient(180deg, var(--brand-900), #0c2c17);
  color: #cfe8da; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .brand { color: #fff; margin-bottom: 22px; padding: 0 6px; }
.side .brand small { color: #8fbfa4; }
.side-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: #6fa287; padding: 16px 12px 6px; font-weight: 700; }
.side a.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: #cfe8da; font-size: .92rem; font-weight: 550; margin-bottom: 2px;
}
.side a.nav-item:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.side a.nav-item.active { background: var(--brand-500); color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,.35); }
.side a.nav-item .ic { width: 20px; text-align: center; font-size: 1.02rem; }
.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 26px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 30;
}
.admin-top .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-700); font-weight: 700; font-size: .9rem;
}
/* Lebar isi panel admin.
   Sebelumnya max-width 1180px TANPA margin auto, sehingga di monitor lebar
   (1920px) konten mentok di kiri dan menyisakan ~490px kosong di kanan;
   di 2560px malah 1130px. Sekarang: batas dinaikkan dan konten DIPUSATKAN
   agar sisa ruang terbagi rata kiri-kanan. */
.admin-body {
  padding: 26px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}
.side-toggle { display: none; background: none; border: 0; font-size: 1.3rem; cursor: pointer; }

/* ---------- Denah & peta ---------- */
.denah-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.denah-svg { display: block; width: 100%; height: auto; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.legend-row { display: flex; gap: 18px; margin-top: 12px; font-size: .88rem; flex-wrap: wrap; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: .88rem; color: var(--muted); flex-wrap: wrap; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .big { font-size: 2.6rem; margin-bottom: 10px; }

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
  .admin { grid-template-columns: 1fr; }
  .side {
    position: fixed; z-index: 60; width: 250px; transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .side.open { transform: none; box-shadow: var(--shadow-lg); }
  .side-toggle { display: block; }
  .admin-body { padding: 18px; }
  .hero { padding: 32px 24px; }
}
@media (max-width: 560px) {
  .nav-inner { padding: 10px 14px; gap: 12px; }
  .wrap { padding: 20px 14px 60px; }
  h1 { font-size: 1.45rem; }
  .stat .num { font-size: 1.35rem; }
}

/* ---------- Toggle mode tampilan ---------- */
.mode-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}
.mode-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 9px; font-size: .9rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; transition: .14s;
}
.mode-btn:hover { background: rgba(255,255,255,.7); text-decoration: none; }
.mode-btn.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }
.mode-btn .ic { font-size: 1rem; }

/* ---------- Kartu KK (tampilan per keluarga) ---------- */
.kk-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.kk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; cursor: pointer; transition: background .14s;
}
.kk-head:hover { background: var(--surface-2); }
.kk-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kk-toggle {
  color: var(--muted); font-size: .9rem; transition: transform .18s;
  display: inline-block; flex: 0 0 auto;
}
.kk-card.open .kk-toggle { transform: rotate(90deg); }
.kk-title { font-weight: 700; font-size: 1rem; }
.kk-sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.kk-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.kk-body { display: none; border-top: 1px solid var(--line); padding: 0 6px 6px; }
.kk-card.open .kk-body { display: block; }

@media (max-width: 700px) {
  .kk-head { flex-direction: column; align-items: flex-start; }
  .kk-badges { width: 100%; }
}

/* ---------- Statistik ---------- */
.stat-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.stat-tbl tr:last-child td { border-bottom: 0; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bar-track {
  position: relative; height: 20px; background: var(--surface-2);
  border-radius: 6px; overflow: hidden; min-width: 80px;
}
.bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  transition: width .4s ease;
}
.bar-txt {
  position: absolute; right: 7px; top: 0; line-height: 20px;
  font-size: .74rem; font-weight: 700; color: var(--ink-2);
}

/* ---------- Grid halaman Statistik ----------
   Sebelumnya memakai .cols-2 dengan minmax(300px,1fr): di layar 1920px
   itu menghasilkan 5 kolom sempit (311px) padahal tabel butuh 321px,
   sehingga isi meluber dan bar hanya 80px — persentase bertumpuk.
   Di sini kolom dibatasi maksimal 2 supaya tabel + bar punya ruang. */
.grid-stat {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
@media (min-width: 1400px) {
  /* Di layar lebar: tepat 2 kolom, bukan 3-5 kolom sempit. */
  .grid-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-stat { grid-template-columns: 1fr; }
}

/* Kartu ringkasan kecil di atas (jumlah per kategori). */
.grid-stat-kecil {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* ---------- Tabel statistik: kolom terkendali ---------- */
.stat-tbl { table-layout: fixed; width: 100%; }
.stat-tbl .lbl-col { width: auto; overflow-wrap: anywhere; }
.stat-tbl .num-col { width: 62px; }
.stat-tbl .bar-cell { width: 38%; min-width: 90px; padding-right: 4px; }
/* Bar dengan persentase menyatu di dalamnya. */
.stat-tbl .bar-track { height: 20px; min-width: 80px; position: relative; }
.stat-tbl .bar-fill { border-radius: 4px; }
.stat-tbl .bar-txt {
  position: absolute; right: 7px; top: 0; line-height: 20px;
  font-size: .74rem; font-weight: 700; color: var(--ink-2);
  pointer-events: none;
}

/* ---------- Tabel statistik di layar sempit ----------
   Di HP, 6 kolom (label, L, P, Jumlah, bar, persen) tidak mungkin
   muat dalam 316px. table-layout:fixed membuat SEMUA kolom jadi 38px
   sehingga label "0-4 tahun" terpotong jadi beberapa baris.
   Solusi: lepas table-layout di mobile, beri lebar minimum pada label,
   dan sembunyikan kolom bar (persentase sudah mewakili proporsi). */
@media (max-width: 560px) {
  .stat-tbl { table-layout: auto; }
  .stat-tbl .lbl-col {
    width: auto; min-width: 104px; white-space: normal;
    overflow-wrap: break-word; font-size: .82rem; line-height: 1.25;
  }
  /* Kolom angka: cukup untuk 3 digit, tidak lebih. */
  .stat-tbl .num-col { width: 40px; min-width: 40px; }
  /* Bar TETAP tampil di HP — persentase menyatu di dalamnya.
     Lebar dibuat cukup agar angka + bar terbaca. */
  .stat-tbl .bar-cell { display: table-cell; width: 30%; min-width: 76px; }
  .stat-tbl .bar-track { height: 18px; }
  .stat-tbl .bar-txt { font-size: .68rem; right: 5px; line-height: 18px; }
}

/* Kolom L/P pada tabel Kelompok Umur (angka kecil, bukan .num-col). */
@media (max-width: 560px) {
  /* Kolom L / P / Jumlah pada tabel Kelompok Umur.
     table-layout:auto memberi mereka hanya 22px (angka 3 digit bisa
     terpotong). Lebar minimum eksplisit + padding tipis. */
  .stat-tbl td:nth-child(2),
  .stat-tbl td:nth-child(3) {
    width: 26px; min-width: 26px;
    text-align: center; padding: 7px 0;
    font-size: .8rem; white-space: nowrap;
  }
  .stat-tbl td:nth-child(4) {
    width: 40px; min-width: 40px;
    text-align: center; padding: 7px 2px;
    font-size: .82rem; white-space: nowrap; font-weight: 600;
  }
  .stat-tbl th:nth-child(2),
  .stat-tbl th:nth-child(3),
  .stat-tbl th:nth-child(4) {
    text-align: center; padding: 7px 1px; font-size: .72rem;
  }
}

/* Split jenis kelamin */
.jk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.jk-box { border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.jk-box.jk-l { background: #dbeafe; color: #1e40af; }
.jk-box.jk-p { background: #fce7f3; color: #9d174d; }
.jk-num { font-size: 1.9rem; font-weight: 780; line-height: 1.1; }
.jk-lbl { font-size: .85rem; font-weight: 600; }
.jk-pct { font-size: .78rem; opacity: .85; margin-top: 2px; }
.jk-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.jk-bar-l { background: #3b82f6; }
.jk-bar-p { background: #ec4899; }

@media (max-width: 620px) {
  .jk-split { grid-template-columns: 1fr; }
}
@media print {
  .side, .admin-top, .foot, .page-head .btn { display: none !important; }
  .admin { grid-template-columns: 1fr; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ---------- Bar sorting (chip) ---------- */
.sort-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sort-opts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sort-chip {
  font-size: .78rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line, #e3e8e4); background: var(--surface, #fff);
  color: var(--muted, #5b6b60); text-decoration: none; white-space: nowrap;
}
.sort-chip:hover { border-color: var(--brand, #0f6b31); color: var(--brand, #0f6b31); }
.sort-chip.active { background: var(--brand, #0f6b31); border-color: var(--brand, #0f6b31); color: #fff; }

/* ---------- Statistik: baris drill-down ---------- */
table.stat-tbl td a { color: inherit; text-decoration: none; }
table.stat-tbl td a:hover { color: var(--brand, #0f6b31); text-decoration: underline; }
table.stat-tbl tbody tr:hover { background: var(--hover, #f6faf7); }
table.stat-tbl tbody tr:hover td a { color: var(--brand, #0f6b31); }

/* Kotak jenis kelamin bisa diklik */
a.jk-box { text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
a.jk-box:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
a.jk-box::after { content: " →"; opacity: 0; font-size: .9em; }
a.jk-box:hover::after { opacity: .7; }

/* ---------- Tab halaman (mis. Data Rumah: Semua | Kosong | Masalah) ---------- */
.tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
  border-bottom: 1px solid var(--line, #e3e8e4); padding-bottom: 0;
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px 10px 0 0; text-decoration: none;
  color: var(--muted, #5b6b60); font-weight: 600; font-size: .88rem;
  border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
.tab:hover { color: var(--brand, #0f6b31); background: var(--hover, #f6faf7); }
.tab.active {
  color: var(--brand, #0f6b31); background: var(--surface, #fff);
  border-color: var(--line, #e3e8e4); border-bottom: 1px solid var(--surface, #fff);
}
.tab .cnt {
  font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--line, #e3e8e4); color: var(--muted, #5b6b60);
}
.tab.active .cnt { background: var(--brand, #0f6b31); color: #fff; }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }

/* ============================================================
   MODE LIHAT-SAJA (peran Ketua RT)
   ------------------------------------------------------------
   Server SUDAH memblokir semua POST/PUT/DELETE untuk peran ini
   (403). Aturan di bawah hanya menyembunyikan tombol AKSI TULIS
   agar tampilan tidak membingungkan.

   Jangan pakai selektor luas seperti `.btn.primary` — tombol
   Cetak/Unduh/PDF juga memakai class itu dan HARUS tetap tampil.
   Pengaman sebenarnya ada di middleware requireIzin (server).
   ============================================================ */

/* Form yang mengubah data: sembunyikan seluruh form-nya. */
.peran-rt form[action*="/hapus"],
.peran-rt form[action*="/simpan"],
.peran-rt form[action*="/upload"],
.peran-rt form[action*="/unggah"],
.peran-rt form[action*="/reset"],
.peran-rt form[action*="/aktifkan"],
.peran-rt form[action*="/nonaktif"],
.peran-rt form[action*="/tolak"],
.peran-rt form[action*="/proses"],
.peran-rt form[action*="/terapkan"],
.peran-rt form[action*="/batal"],
.peran-rt form[action*="/kosongkan"],
.peran-rt form[action*="/sinkron"] {
  display: none !important;
}

/* Tombol tautan yang menuju form tambah/ubah: sembunyikan. */
.peran-rt a[href$="/baru"],
.peran-rt a[href*="/baru/"],
.peran-rt a[href*="/edit/"],
.peran-rt a[href*="/ubah/"] {
  display: none !important;
}

/* Tombol hapus / ubah di dalam tabel. */
.peran-rt .btn.danger {
  display: none !important;
}

/* Penanda mode lihat-saja di atas halaman */
.peran-rt .admin-body::before {
  content: "👁 Mode lihat saja — peran Ketua RT tidak dapat menambah, mengubah, atau menghapus data.";
  display: block;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 9px;
  background: #fdf6e3;
  border: 1px solid #ecd9a0;
  color: #7a5c12;
  font-size: .85rem;
  font-weight: 600;
}

/* ---------- Beranda: badge hero ---------- */
.hero-badge {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px;
  border-radius: 999px; background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; backdrop-filter: blur(4px);
}

/* ---------- Beranda: judul bagian ---------- */
.sec-title {
  font-size: 1.22rem; font-weight: 750; margin: 0 0 14px;
  letter-spacing: -.01em;
}

/* ---------- Beranda: kartu layanan warga ---------- */
.layanan-grid { margin-bottom: 6px; }
.layanan-card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 20px;
  color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative; overflow: hidden;
}
.layanan-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  opacity: 0; transition: opacity .16s ease;
}
.layanan-card:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-lg); border-color: var(--brand-300);
}
.layanan-card:hover::after { opacity: 1; }
.layanan-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-50); font-size: 1.35rem; margin-bottom: 4px;
}
.layanan-card strong { font-size: 1.05rem; font-weight: 700; }
.layanan-desc { font-size: .88rem; color: var(--muted); line-height: 1.55; flex: 1; }
.layanan-go {
  margin-top: 8px; font-size: .88rem; font-weight: 650; color: var(--brand-600);
  display: inline-flex; align-items: center; gap: 5px;
}
.layanan-card:hover .layanan-go { color: var(--brand-700); }

/* Baris statistik di beranda */
.stats-row { margin-bottom: 26px; }

/* ============================================================
   ADMIN: header & baris aksi di layar kecil
   ------------------------------------------------------------
   Di 390px, header admin (avatar + nama + peran + 2 tombol) dan
   baris tombol aksi (Laporan Lengkap / PDF / Pejabat) melebihi
   lebar layar sehingga SELURUH halaman bisa digeser ke samping.
   ============================================================ */
@media (max-width: 700px) {
  /* Header admin di HP: SATU baris ringkas, bukan tiga tumpuk.
     Sebelumnya tinggi 144px karena judul, nama, dan 2 tombol teks
     masing-masing mengambil satu baris penuh. */
  .admin-top {
    flex-wrap: nowrap; gap: 8px; padding: 8px 12px;
    min-height: 56px;
  }
  /* Judul halaman: satu baris, dipotong dengan elipsis bila panjang. */
  .admin-top > strong {
    font-size: .9rem; flex: 1 1 auto; min-width: 0;
    order: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .admin-top .who {
    margin-left: 0; width: auto; flex-wrap: nowrap; gap: 6px;
    font-size: .82rem; order: 0; flex: 0 0 auto;
  }
  /* Nama & peran disembunyikan di HP — inisial avatar sudah mewakili.
     Nama lengkap tetap ada di title= avatar. */
  .admin-top .who-name { display: none; }
  /* Tombol jadi ikon saja: target sentuh tetap 40px. */
  /* Target sentuh 44px sesuai pedoman aksesibilitas mobile. */
  .admin-top .who .btn-aksi {
    min-height: 44px; min-width: 44px; padding: 0 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .admin-top .who .aksi-lbl { display: none; }
  .admin-top .who .aksi-ico { font-size: 1.05rem; line-height: 1; }
  .avatar { width: 34px; height: 34px; font-size: .84rem; flex: 0 0 auto; }

  /* Baris tombol aksi (page-head & grup tombol) harus membungkus */
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head > div { flex-wrap: wrap; }
  .page-head .btn { flex: 1 1 auto; justify-content: center; }

  /* Semua grup tombol di dalam konten membungkus, tidak memaksa lebar */
  .admin-body div[style*="display:flex"] { flex-wrap: wrap !important; }
  .admin-body .btn { max-width: 100%; }
}

/* ============================================================
   SIDEBAR ADMIN MOBILE — perbaikan "tidak bisa ditutup"
   ------------------------------------------------------------
   Sidebar fixed z-index 60 selebar 250px menutupi tombol ☰ yang
   ada di header (z-index 30). Akibatnya setelah panel dibuka,
   pengguna tidak punya cara menutupnya selain memuat ulang.

   Perbaikan:
     - .side-backdrop: lapisan gelap, klik untuk menutup.
     - .side-close: tombol ✕ di dalam panel.
     - body.side-terbuka .admin-top: header dinaikkan di ATAS panel
       sehingga tombol ☰ tetap terjangkau.
   ============================================================ */
.side-backdrop,
.side-close { display: none; }

@media (max-width: 900px) {
  /* Lapisan gelap di belakang panel */
  .side-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10, 22, 15, .48);
    z-index: 55;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    backdrop-filter: blur(1.5px);
  }
  body.side-terbuka .side-backdrop {
    opacity: 1; pointer-events: auto;
  }

  /* Kunci gulir latar saat panel terbuka */
  body.side-terbuka { overflow: hidden; }

  /* Bar atas panel: tombol ✕ menempel di dalam panel (bukan fixed),
     jadi tidak mungkin tertutup header atau elemen lain. */
  .side-topbar {
    display: flex; justify-content: flex-end; align-items: center;
    margin: -6px 0 6px;
  }
  .side-close {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, .16); border: 0;
    color: #fff; font-size: 1.5rem; line-height: 1;
    cursor: pointer; flex: 0 0 auto;
    transition: background .15s ease;
  }
  .side-close:hover { background: rgba(255, 255, 255, .26); }

  /* Panel perlu position relative agar tombol ✕ menempel di dalamnya */
  .side { position: fixed; top: 0; height: 100vh; }

  /* Header TIDAK dinaikkan: tombol ☰ di header memang tertutup panel,
     dan itu wajar — panel punya tombol ✕ sendiri. */
  .side { padding-top: 20px; }
}

/* ============================================================
   FORM PENDAFTARAN WARGA (publik)
   ------------------------------------------------------------
   Form panjang (19 isian) dipecah jadi 4 kartu bernomor + penunjuk
   langkah, agar tidak terasa seperti satu halaman tak berujung
   (sebelumnya 3,2 layar di HP). Target sentuh radio dinaikkan ke
   44px sesuai pedoman aksesibilitas.
   ============================================================ */
.reg-wrap { max-width: 720px; margin: 0 auto; }

/* Kepala halaman */
.reg-hero {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff; border-radius: 18px; padding: 24px 24px 22px;
  margin-bottom: 18px; box-shadow: var(--shadow);
}
.reg-hero-ico {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
}
.reg-hero h1 { font-size: clamp(1.25rem, 3vw, 1.6rem); color: #fff; margin: 0 0 6px; }
.reg-hero p { margin: 0; color: rgba(255,255,255,.92); font-size: .9rem; line-height: 1.55; }

/* Penunjuk langkah */
.reg-steps {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px;
  margin-bottom: 4px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reg-steps::-webkit-scrollbar { display: none; }
.reg-step {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 13px; border-radius: 999px; font-size: .82rem; font-weight: 650;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none; min-height: 40px;
}
.reg-step:hover { background: var(--brand-50); border-color: var(--brand-300); text-decoration: none; }
.reg-step.aktif {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}
.reg-step.aktif span { background: rgba(255,255,255,.25); }
.reg-step span {
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-600); color: #fff; font-size: .72rem; font-weight: 700;
}

/* Kartu seksi */
.reg-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px 6px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
  scroll-margin-top: 80px;
}
.reg-card-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.reg-num {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; font-weight: 750; font-size: .9rem;
  background: var(--brand-50); color: var(--brand-700);
}
.reg-card-head h2 { font-size: 1.05rem; margin: 2px 0 3px; }
.reg-card-head p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* Isian */
.reg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.reg-field { display: flex; flex-direction: column; margin-bottom: 16px; min-width: 0; }
.reg-full { grid-column: 1 / -1; }
.reg-lbl {
  font-size: .86rem; font-weight: 650; color: var(--ink-2);
  margin-bottom: 6px; display: block;
}
.reg-lbl em { color: var(--danger); font-style: normal; font-weight: 700; }
.reg-hint { font-size: .76rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.reg-field input,
.reg-field textarea,
.reg-field select { width: 100%; }

/* Wilayah tetap */
.reg-fixed {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; font-size: .82rem; color: var(--ink-2);
}
.reg-fixed span { white-space: nowrap; }
.reg-fixed b { color: var(--muted); font-weight: 600; margin-right: 3px; }

/* Pilihan radio — target sentuh 44px */
.reg-choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.reg-options { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-options-col { flex-direction: column; }
.reg-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); font-size: .89rem; font-weight: 550;
  min-height: 44px; transition: .14s ease; margin: 0;
}
.reg-opt:hover { border-color: var(--brand-300); background: var(--brand-50); }
.reg-opt input[type=radio] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0;
  accent-color: var(--brand-600); cursor: pointer;
}
.reg-opt:has(input:checked) {
  border-color: var(--brand-600); background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand-600) inset;
}
.reg-opt-card { align-items: flex-start; padding: 13px 15px; }
.reg-opt-card input { margin-top: 3px; }
.reg-opt-card b { display: block; font-size: .9rem; }
.reg-opt-card small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; line-height: 1.45; }

/* Kotak unggah berkas */
.reg-drop {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 16px; border: 2px dashed var(--line); border-radius: 12px;
  background: var(--surface-2); transition: .14s ease; margin: 0;
}
.reg-drop:hover { border-color: var(--brand-500); background: var(--brand-50); }
.reg-drop-ico { font-size: 1.3rem; flex: 0 0 auto; }
.reg-drop-txt { min-width: 0; }
.reg-drop-txt b { display: block; font-size: .88rem; }
.reg-drop-txt small { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.reg-drop input[type=file] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}

/* Tombol kirim */
.reg-submit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.reg-btn { flex: 1 1 auto; justify-content: center; min-height: 50px; font-size: .95rem; }
.reg-note {
  flex: 1 1 100%; margin: 4px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.reg-note em { color: var(--danger); font-style: normal; font-weight: 700; }

@media (max-width: 640px) {
  .reg-hero { padding: 20px 18px; gap: 13px; }
  .reg-hero-ico { width: 42px; height: 42px; font-size: 1.2rem; }
  .reg-card { padding: 17px 16px 4px; }
  .reg-fields { grid-template-columns: 1fr; }
  .reg-options { flex-direction: column; }
  .reg-opt { width: 100%; }
  .reg-btn { flex: 1 1 100%; }
}

/* ---------- Progress bar wizard pendaftaran ---------- */
.reg-progress { margin: 0 0 10px; }
.reg-progress-bar {
  height: 6px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.reg-progress-fill {
  height: 100%; width: 25%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  transition: width .25s ease;
}
.reg-progress-txt {
  display: block; margin-top: 7px; font-size: .78rem;
  font-weight: 650; color: var(--muted); letter-spacing: .02em;
}

/* Langkah yang sudah dilalui */
.reg-step.selesai { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
.reg-step.selesai span { background: var(--brand-500); }

/* Tombol navigasi wizard */
/* Tombol navigasi wizard.
   PENTING: default-nya TAMPIL, bukan disembunyikan. Tanpa JavaScript
   (atau bila JS gagal), semua seksi tampil sekaligus dan tombol Kirim
   harus tetap bisa ditekan. JS-lah yang menyembunyikannya saat bukan
   langkah terakhir. */
.reg-prev, .reg-next { flex: 1 1 45%; }
.js-wizard .reg-prev,
.js-wizard .reg-next { display: inline-flex; }
.js-wizard .reg-btn-kirim { display: none; }
.js-wizard .reg-btn-kirim.tampil { display: inline-flex; }
/* Tanpa .js-wizard: sembunyikan tombol navigasi, tampilkan Kirim */
html:not(.js-wizard) .reg-prev,
html:not(.js-wizard) .reg-next { display: none; }

/* ============================================================
   FOTO BERITA (cover, galeri, isi)
   ============================================================ */
.thumb-foto {
  padding: 0 !important; overflow: hidden; background: var(--surface-2);
}
.thumb-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.news-card:hover .thumb-foto img { transform: scale(1.04); }
.thumb-foto.sm { height: 120px; }

/* Cover di halaman detail */
.artikel-cover {
  margin: 18px 0 22px; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2);
}
.artikel-cover img {
  width: 100%; height: auto; display: block; max-height: 460px; object-fit: cover;
}
.artikel-cover figcaption,
.galeri-berita figcaption,
.foto-isi figcaption {
  font-size: .82rem; color: var(--muted); padding: 8px 12px;
  background: var(--surface-2); line-height: 1.45;
}

/* Foto sisipan */
.foto-isi figure {
  margin: 22px 0; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2);
}
.foto-isi img { width: 100%; height: auto; display: block; }

/* Galeri */
.galeri-berita { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.galeri-berita h2 { font-size: 1.15rem; margin-bottom: 14px; }
.galeri-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.galeri-grid figure {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.galeri-grid img {
  width: 100%; height: 165px; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.galeri-grid figure:hover img { transform: scale(1.05); }

/* Panel foto di admin */
.foto-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.foto-item {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
}
.foto-item img {
  width: 100%; height: 130px; object-fit: cover; display: block; background: var(--surface-2);
}
.foto-item figcaption {
  padding: 8px 10px; font-size: .78rem; display: flex; gap: 6px;
  align-items: center; flex-wrap: wrap; flex: 1;
}
.foto-item .foto-ket {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.foto-item form { padding: 0 10px 10px; }

@media (max-width: 560px) {
  .galeri-grid { grid-template-columns: repeat(2, 1fr); }
  .galeri-grid img { height: 110px; }
  .foto-grid { grid-template-columns: repeat(2, 1fr); }
  .foto-item img { height: 100px; }
  .artikel-cover img { max-height: 280px; }
}

/* ============================================================
   NAVIGASI MOBILE
   ------------------------------------------------------------
   Di layar kecil, tautan nav jadi panel yang bisa dibuka-tutup.
   Target sentuh 44px (pedoman aksesibilitas), dropdown "Layanan"
   berubah jadi daftar bertumpuk (bukan mengambang) agar tidak
   terpotong di layar sempit.
   ============================================================ */
@media (max-width: 900px) {
  .nav-inner { flex-wrap: nowrap; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg); padding: 10px 14px 16px;
    flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100vh - 66px); overflow-y: auto;
    display: none;
  }
  .nav-links.open { display: flex; }

  .nav-links > a,
  .nav-drop > summary {
    display: flex; align-items: center; min-height: 46px;
    padding: 11px 12px; font-size: .97rem; border-radius: 10px;
  }

  /* Dropdown jadi daftar biasa di dalam panel */
  .nav-drop { width: 100%; }
  .nav-drop-menu {
    position: static; box-shadow: none; border: 0; padding: 2px 0 6px 8px;
    min-width: 0; animation: none;
  }
  .nav-drop-menu a { min-height: 46px; padding: 9px 10px; }
  .nav-drop-menu a .ic { width: 30px; height: 30px; font-size: .92rem; }

  .nav-cta { margin-top: 8px; justify-content: center; min-height: 46px; }
}

/* Layar sangat kecil: sembunyikan subjudul brand agar tidak berdesakan */
@media (max-width: 420px) {
  .brand small { display: none; }
  .brand { font-size: .98rem; }
  .brand-logo { width: 34px; height: 34px; }
}

/* ============================================================
   PENYEMPURNAAN MOBILE (hasil reviu)
   ------------------------------------------------------------
   1. iOS Safari memperbesar halaman otomatis bila font input < 16px.
      Ini membuat form sulit dipakai di HP. Naikkan ke 16px khusus
      layar kecil.
   2. Tombol kecil (btn sm) jadi terlalu mungil untuk jari. Beri
      tinggi minimum area sentuh 40px.
   3. Tabel lebar harus bisa digulir horizontal, bukan memaksa
      seluruh halaman melebar.
   ============================================================ */
@media (max-width: 700px) {
  /* Cegah zoom otomatis iOS */
  input[type=text], input[type=search], input[type=email],
  input[type=password], input[type=date], input[type=number],
  input[type=tel], input[type=url], select, textarea {
    font-size: 16px !important;
  }

  /* Area sentuh tombol lebih nyaman */
  .btn.sm { padding: 9px 13px; font-size: .86rem; min-height: 40px; }
  .btn { min-height: 42px; }
  .side-toggle { padding: 6px 10px; font-size: 1.5rem; }

  /* Tabel: gulir horizontal, jangan melebarkan halaman.
     JANGAN pakai min-width pada table.tbl secara umum — itu memaksa tabel
     detail (2 kolom, di /profil & /daftar-warga) melebihi lebar layar dan
     membuat SELURUH halaman bisa digeser ke samping.
     min-width hanya untuk tabel berkolom banyak (data), bukan detail. */
  .card, .admin-body { min-width: 0; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; }

  /* Form jadi satu kolom */
  .form-grid { grid-template-columns: 1fr !important; }

  /* Tombol aksi di dalam tabel: susun rapi, jangan berdesakan */
  table.tbl td .btn { margin: 2px 0; }

  /* Kartu statistik (grid.cols-4): dua kolom agar tidak terlalu panjang */
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 420px) {
  /* Layar sangat kecil: satu kolom */
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr !important; }
  .admin-body { padding: 14px; }
  h1 { font-size: 1.3rem; }
}

/* Tabel lebar: beri gulir horizontal SENDIRI di layar kecil.
   Hanya berlaku di mobile agar tampilan desktop tidak berubah.

   Penting: berlaku untuk SEMUA table.tbl — bukan hanya yang langsung di
   dalam .card. Tabel "tbl detail" di halaman /profil dan /daftar-warga
   dulu melebarkan seluruh halaman (610px di layar 390px) karena tidak
   tertangkap aturan yang terlalu sempit. */
@media (max-width: 900px) {
  /* Tabel lebar: gulir HORIZONTAL di dalam wadahnya sendiri, tanpa
     melebarkan halaman. .tbl-wrap sudah menangani tabel yang memakainya;
     aturan ini menangkap tabel yang lupa dibungkus.
     Ambang 900px (bukan 700px): tablet 768px juga butuh ini — tabel kas
     selebar 858px di layar 768px sebelumnya melebarkan seluruh halaman. */
  table.tbl:not(.detail):not(.stat-tbl) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Tabel detail & statistik sempit: tetap tabel biasa, teks membungkus */
  table.tbl.detail, table.tbl.stat-tbl {
    display: table !important;
    width: 100% !important;
    white-space: normal !important;
  }
  table.tbl.detail td, table.tbl.detail th,
  table.tbl.stat-tbl td, table.tbl.stat-tbl th {
    white-space: normal !important;
    word-break: break-word;
  }
  /* Jangan biarkan elemen apa pun memaksa halaman melebar */
  .admin-body, .wrap, .card { max-width: 100%; min-width: 0; overflow-wrap: break-word; }
  pre, code { overflow-x: auto; max-width: 100%; }
}