/* Suprayitno — Theme Pemerintahan Modern (Navy + Gold accent) */
:root{
  --accent:#1e3a8a;     /* biru tua elegan */
  --accent-light:#2563eb; /* biru medium utk hover/button */
  --gold:#facc15;        /* aksen emas */
  --dark:#0f172a;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#ffffff;
  --container:1100px;
  --gap:16px;
  --shadow: rgba(30,58,138,0.08);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

html,body{
  height:100%;
  margin:0;
  background:#f4f5f7;
  color:var(--dark);
  font-size:16px;
}

.topbar{
  background:#fff;
  border-bottom:4px solid var(--accent);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 6px 18px var(--shadow);
}

.brand-title{font-weight:800;font-size:20px;color:var(--accent);}
.section-title{color:var(--accent);}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-radius:6px;
  padding:8px 12px;
  transition:background .2s;
}
.btn-primary:hover{background:var(--accent-light);}
.btn-outline{
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:6px;
  padding:8px 12px;
  transition:all .2s;
}
.btn-outline:hover{
  background:var(--accent);
  color:#fff;
}
.footer-row{
  border-top:2px solid var(--gold);
  color:var(--muted);
}

/* Optional: badge "Resmi" atau garis emas di header */
.brand-sub::after{
  content:'• Resmi';
  color:var(--gold);
  font-weight:700;
  margin-left:6px;
}