/* Disdukcapil — Dinas Kependudukan dan Pencatatan Sipil
   Palet: navy #0f2a5e, merah #b91c1c, tema terang */
:root{
  --navy:#0f2a5e;
  --navy-2:#173a7a;
  --navy-soft:#e8edf7;
  --red:#b91c1c;
  --red-2:#dc2626;
  --ink:#1b2233;
  --muted:#5a6478;
  --bg:#f5f7fb;
  --card:#ffffff;
  --line:#e2e7f0;
  --gold:#c79a3a;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,42,94,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
}
a{color:var(--navy);text-decoration:none}
img{max-width:100%}
h1,h2,h3{line-height:1.25;color:var(--navy);margin:.2em 0 .4em}
h1{font-size:clamp(1.8rem,5vw,2.7rem)}
h2{font-size:clamp(1.4rem,3.5vw,2rem)}
p{margin:.5em 0}

/* ===== Demo bar ===== */
.demobar{
  background:#0a1d44;
  color:#fff;
  font-size:.86rem;
  text-align:center;
  padding:7px 12px;
}
.demobar a{color:#ffd9a0;font-weight:600}
.demobar b{color:#fff}

/* ===== Header ===== */
.topbar{
  background:var(--navy);
  color:#cdd8f0;
  font-size:.8rem;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:5px 18px}
.topbar a{color:#fff}

header.site{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:3px solid var(--navy);
  box-shadow:0 2px 12px rgba(15,42,94,.07);
}
.nav{
  max-width:1140px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{
  width:46px;height:46px;flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--navy-2),var(--navy));
  display:grid;place-items:center;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold);
}
.brand .logo svg{width:26px;height:26px}
.brand .txt b{display:block;color:var(--navy);font-size:1.02rem;line-height:1.15}
.brand .txt span{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.03em}

#nav{display:none}
.burger{display:none;cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}

.menu{
  list-style:none;display:flex;gap:4px;margin:0;padding:0;align-items:center;
}
.menu a{
  display:block;padding:9px 13px;border-radius:9px;
  color:var(--ink);font-weight:600;font-size:.94rem;
}
.menu a:hover{background:var(--navy-soft);color:var(--navy)}
.menu a.active{background:var(--navy);color:#fff}
.menu .cta a{background:var(--red);color:#fff}
.menu .cta a:hover{background:var(--red-2)}

/* ===== Layout helpers ===== */
.container{max-width:1140px;margin:0 auto;padding:0 18px}
.section{padding:54px 0}
.section.alt{background:#fff}
.center{text-align:center}
.lead{color:var(--muted);font-size:1.08rem;max-width:680px}
.eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;
  font-size:.74rem;font-weight:700;color:var(--red);
  background:#fdecec;padding:4px 11px;border-radius:30px;margin-bottom:8px;
}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.btn{
  display:inline-block;padding:12px 22px;border-radius:10px;
  font-weight:700;font-size:.95rem;cursor:pointer;border:0;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 400px at 90% -10%,rgba(185,28,28,.35),transparent),
    linear-gradient(135deg,var(--navy) 0%,#0a1d44 60%,#06122e 100%);
}
.hero .container{padding-top:64px;padding-bottom:64px;position:relative;z-index:2}
.hero .badge{
  display:inline-flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:6px 13px;border-radius:30px;font-size:.8rem;margin-bottom:14px;
}
.hero h1{color:#fff;max-width:18ch}
.hero p{color:#d4ddf2;max-width:55ch;font-size:1.1rem}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-deco{
  position:absolute;right:-120px;top:-60px;width:420px;height:420px;
  background:conic-gradient(from 0deg,rgba(199,154,58,.25),rgba(255,255,255,.04),rgba(199,154,58,.25));
  border-radius:50%;filter:blur(2px);z-index:1;
}

/* quick service strip */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;position:relative;z-index:2}
.quick a{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:16px;color:#fff;display:flex;flex-direction:column;gap:6px;
}
.quick a:hover{background:rgba(255,255,255,.18)}
.quick svg{width:28px;height:28px}
.quick b{font-size:.98rem}
.quick small{color:#c3cfe8}

/* ===== Cards ===== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.card .ic{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--navy-soft);margin-bottom:12px;
}
.card .ic svg{width:26px;height:26px;color:var(--navy)}
.card h3{margin-top:0}
.card.red .ic{background:#fdecec}
.card.red .ic svg{color:var(--red)}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:2rem;color:var(--red)}
.stat span{color:var(--muted);font-size:.9rem}

/* steps / alur */
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.step .num{
  counter-increment:s;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;
}
.step .num::before{content:counter(s)}

/* list with check */
.checklist{list-style:none;padding:0;margin:.5em 0}
.checklist li{position:relative;padding:6px 0 6px 30px}
.checklist li::before{
  content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;
  background:var(--navy);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.5-1.5z"/></svg>') center/14px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.5-1.5z"/></svg>') center/14px no-repeat;
}

/* table */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:.93rem}
.tbl th{background:var(--navy);color:#fff;font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:nth-child(even) td{background:#f8faff}

/* org chart */
.org{display:grid;gap:14px;justify-items:center}
.org .node{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:12px;padding:14px 18px;text-align:center;min-width:230px;box-shadow:var(--shadow)}
.org .node b{display:block;color:var(--navy)}
.org .node span{color:var(--muted);font-size:.85rem}
.org .node.head{border-top-color:var(--red)}
.org .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* official cards */
.official{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.official .ava{width:56px;height:56px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,var(--navy-2),var(--navy));display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.1rem}
.official b{color:var(--navy)}
.official span{color:var(--muted);font-size:.85rem}

/* news */
.news{display:flex;flex-direction:column;overflow:hidden}
.news .thumb{height:140px;background:linear-gradient(135deg,var(--navy),var(--navy-2));position:relative}
.news .thumb.r{background:linear-gradient(135deg,var(--red),#7f1212)}
.news .thumb.g{background:linear-gradient(135deg,#0b3d2e,#0f5c45)}
.news .thumb span{position:absolute;left:12px;bottom:10px;background:rgba(255,255,255,.92);color:var(--navy);font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px}
.news .body{padding:16px}
.news .date{color:var(--red);font-size:.78rem;font-weight:600}
.news h3{font-size:1.05rem;margin:.3em 0}
.news p{color:var(--muted);font-size:.9rem}

/* notice / antrean */
.notice{background:#fff8e9;border:1px solid #f0dca6;border-left:5px solid var(--gold);border-radius:10px;padding:16px 18px}
.notice b{color:#8a6a18}

/* forms */
form .field{margin-bottom:14px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:var(--navy)}
input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);border-color:var(--navy)}
.formnote{font-size:.82rem;color:var(--red);font-weight:600}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}

/* contact info */
.cinfo{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.cinfo .ic{width:42px;height:42px;border-radius:10px;background:var(--navy-soft);display:grid;place-items:center;flex:0 0 auto}
.cinfo .ic svg{width:22px;height:22px;color:var(--navy)}
.cinfo b{color:var(--navy);display:block}
.cinfo span{color:var(--muted);font-size:.92rem}

.mapbox{height:230px;border-radius:12px;border:1px solid var(--line);background:
  repeating-linear-gradient(45deg,#eef2fa,#eef2fa 14px,#e6ecf8 14px,#e6ecf8 28px);
  display:grid;place-items:center;color:var(--navy);font-weight:600;position:relative;overflow:hidden}
.mapbox .pin{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);box-shadow:0 4px 8px rgba(0,0,0,.2)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--red),#7f1212);color:#fff;text-align:center;border-radius:18px;padding:38px 22px}
.cta-band h2{color:#fff}
.cta-band p{color:#ffd9d9}

/* ===== Footer ===== */
footer.site{background:#0a1d44;color:#c3cfe8;margin-top:10px}
footer.site .container{padding:46px 18px 24px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
footer.site h4{color:#fff;margin:0 0 12px;font-size:1rem}
footer.site a{color:#c3cfe8}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:.92rem}
footer.site .fbrand{display:flex;gap:12px;align-items:center;margin-bottom:10px}
footer.site .fbrand .logo{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--navy-2),var(--navy));display:grid;place-items:center;box-shadow:0 0 0 2px var(--gold)}
footer.site .fbrand svg{width:24px;height:24px}
footer.site .fbrand b{color:#fff}
.fbar{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:16px;font-size:.82rem;color:#8ea0c4;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* page header */
.pagehead{background:linear-gradient(135deg,var(--navy),#0a1d44);color:#fff;padding:46px 0}
.pagehead .crumb{color:#aebcdc;font-size:.85rem}
.pagehead h1{color:#fff;margin:.2em 0 .1em}
.pagehead p{color:#cfd9ef;max-width:60ch}

/* ===== Responsive ===== */
@media(max-width:820px){
  .burger{display:block}
  .menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .menu li{border-bottom:1px solid var(--line)}
  .menu a{border-radius:0;padding:14px 18px}
  .nav{position:relative}
  #nav:checked ~ .menu{max-height:520px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:22px}
}
@media(max-width:480px){
  .quick{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center}
}