/* =========================================================
   DESA NITNEO — TEMA SERAGAM
   Terinspirasi dari desain halaman Pemerintahan pada referensi:
   navbar putih + hero foto + kartu pastel + footer biru.
   File ini sengaja menjadi override terakhir agar halaman lama
   tetap memakai struktur/PHP/database yang sama.
   ========================================================= */
:root{
  --nt-blue:#087fd1;
  --nt-blue-dark:#0d3158;
  --nt-blue-deep:#102d4f;
  --nt-blue-soft:#eaf5ff;
  --nt-surface:#fff;
  --nt-bg:#f7f9fc;
  --nt-text:#1e2d3d;
  --nt-muted:#6b7887;
  --nt-line:#e4eaf0;
  --nt-radius:12px;
  --nt-shadow:0 8px 24px rgba(21,55,86,.10);
}
html{scroll-behavior:smooth}
body{background:var(--nt-bg)!important;color:var(--nt-text)!important;font-family:'Inter',Arial,sans-serif!important}
h1,h2,h3,h4{font-family:'Inter',Arial,sans-serif!important}

/* NAVBAR -------------------------------------------------- */
.navbar{
  min-height:78px!important;
  padding:8px 4.2vw!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid var(--nt-line)!important;
  position:sticky!important;top:0!important;z-index:100!important;
  box-shadow:0 2px 12px rgba(20,52,84,.04)!important;
}
.navbar-inner{width:100%}
.brand{gap:10px!important;flex-shrink:0}
.brand-mark{width:48px!important;height:48px!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.brand-name{font-family:'Inter',Arial,sans-serif!important;font-size:17px!important;font-weight:800!important;color:#173553!important;line-height:1.1}
.brand-sub{font-family:'Inter',Arial,sans-serif!important;font-size:10px!important;letter-spacing:.02em!important;text-transform:none!important;color:#7a8794!important;margin-top:3px}
.nav-links{display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:2px!important;margin-left:auto}
.nav-links a{
  position:relative!important;display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-width:62px!important;min-height:62px!important;padding:7px 6px!important;border:0!important;border-radius:8px!important;
  color:#25374a!important;font-size:10px!important;font-weight:600!important;line-height:1.2!important;text-align:center!important;
  transition:.2s ease!important;
}
.nav-links a:hover{color:var(--nt-blue)!important;background:#f3f8fd!important;border:0!important}
.nav-links a.active{color:var(--nt-blue)!important;background:var(--nt-blue-soft)!important;border:0!important}
.nav-links a.active:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--nt-blue);border-radius:3px 3px 0 0}
.nav-ico{width:17px!important;height:17px!important;margin-bottom:5px!important;opacity:1!important}
.nav-toggle{border:1px solid var(--nt-line)!important;background:#fff!important;border-radius:9px!important}
.nav-drawer{background:#fff!important}

/* GENERIC PAGE HERO -------------------------------------- */
.page-hero{
  position:relative!important;max-width:none!important;min-height:330px!important;
  padding:72px 6vw 68px!important;margin:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
  color:#fff!important;overflow:hidden!important;
  background-image:linear-gradient(90deg,rgba(5,48,87,.92) 0%,rgba(7,91,151,.74) 48%,rgba(5,65,110,.28) 100%),url('../img/hero-pemerintahan.jpg')!important;
  background-size:cover!important;background-position:center!important;
}
.page-hero h1{font-size:clamp(34px,4vw,54px)!important;line-height:1.08!important;color:#fff!important;max-width:700px!important;margin:8px 0 12px!important;font-weight:800!important}
.page-hero p{max-width:650px!important;color:rgba(255,255,255,.9)!important;font-size:15px!important}
.page-hero .eyebrow{color:#d9f0ff!important}
.page-hero .status-dot{background:#fff!important;box-shadow:0 0 0 4px rgba(255,255,255,.18)!important}

/* INDEX HERO --------------------------------------------- */
body:has(.hero-panel) .hero{
  display:block!important;min-height:430px!important;
  background-image:linear-gradient(90deg,rgba(5,48,87,.94) 0%,rgba(6,91,151,.80) 48%,rgba(6,91,151,.25) 100%),url('../img/hero-pemerintahan.jpg')!important;
  background-size:cover!important;background-position:center!important;
}
body:has(.hero-panel) .hero-copy{width:min(680px,62%);padding:78px 6vw!important;color:#fff!important}
body:has(.hero-panel) .hero h1,body:has(.hero-panel) .hero h1 em{color:#fff!important;font-weight:800!important}
body:has(.hero-panel) .hero p{color:rgba(255,255,255,.9)!important}
body:has(.hero-panel) .hero .eyebrow{color:#d9f0ff!important}
body:has(.hero-panel) .hero .status-dot{background:#fff!important}
body:has(.hero-panel) .hero-panel{display:none!important}
body:has(.hero-panel) .btn-primary{background:var(--nt-blue)!important;border-color:var(--nt-blue)!important;color:#fff!important}
body:has(.hero-panel) .btn-ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.5)!important}

/* PEMERINTAHAN SPECIAL HERO ------------------------------ */
body:has(.leader) .hero{
  min-height:355px!important;display:block!important;
  background-image:linear-gradient(90deg,rgba(5,48,87,.93),rgba(8,91,151,.72),rgba(8,91,151,.18)),url('../img/hero-pemerintahan.jpg')!important;
  background-size:cover!important;background-position:center!important;
}
body:has(.leader) .hero-inner{padding:70px 6vw!important;max-width:760px!important;color:#fff!important}
body:has(.leader) .hero h1,body:has(.leader) .hero p,body:has(.leader) .hero-label{color:#fff!important}
body:has(.leader) .hero-label{font-weight:700!important;letter-spacing:.12em!important}
body:has(.leader) .hero-button{background:var(--nt-blue)!important;border:0!important;color:#fff!important;border-radius:24px!important;padding:13px 22px!important}

/* CONTENT SHELL ------------------------------------------ */
.section{padding:66px 6vw!important;background:var(--nt-bg)!important}
.section:nth-of-type(even){background:#fff!important}
.section-head{margin-bottom:30px!important}
.section-head h2{font-size:clamp(25px,3vw,36px)!important;color:var(--nt-blue-dark)!important;font-weight:800!important}
.section-head p{color:var(--nt-muted)!important}

/* CARDS --------------------------------------------------- */
.card,.info-block,.fact-list,.compass-card,.dusun-card,.layanan-card,.proyek-card,.ringkas-card,.kategori-card,.doc-item,.bar-card,.stat-card,.article,.kontak-info,.kontak-form{
  background:#fff!important;border:1px solid var(--nt-line)!important;border-radius:var(--nt-radius)!important;box-shadow:var(--nt-shadow)!important;
}
.card:hover,.dusun-card:hover,.layanan-card:hover,.proyek-card:hover,.doc-item:hover{transform:translateY(-2px);transition:.2s ease}

/* PASTEL CARD STRIPS ------------------------------------- */
.stat-card:nth-child(1),.ringkas-card:nth-child(1),.kategori-card:nth-child(1){background:#eaf5ff!important}
.stat-card:nth-child(2),.ringkas-card:nth-child(2),.kategori-card:nth-child(2){background:#edf9f3!important}
.stat-card:nth-child(3),.ringkas-card:nth-child(3),.kategori-card:nth-child(3){background:#f3efff!important}
.stat-card:nth-child(4),.ringkas-card:nth-child(4),.kategori-card:nth-child(4){background:#fff5e9!important}
.stat-card:nth-child(5),.ringkas-card:nth-child(5),.kategori-card:nth-child(5){background:#e9f8fa!important}

/* TABLES / DATA ------------------------------------------ */
.table-wrap{background:#fff!important;border:1px solid var(--nt-line)!important;border-radius:12px!important;box-shadow:var(--nt-shadow)!important;overflow:auto}
table{background:#fff!important;border-collapse:collapse!important;width:100%}
th{background:#eef6fd!important;color:#23435e!important;font-weight:700!important}
th,td{border-bottom:1px solid var(--nt-line)!important;padding:12px 14px!important}

/* BUTTONS ------------------------------------------------- */
.btn,.btn-cta,.btn-kirim,.btn-unduh{border-radius:8px!important;font-weight:700!important;transition:.2s ease!important}
.btn-primary,.btn-cta,.btn-kirim{background:var(--nt-blue)!important;color:#fff!important;border-color:var(--nt-blue)!important}
.btn-primary:hover,.btn-cta:hover,.btn-kirim:hover{background:#066fb9!important}

/* STATS --------------------------------------------------- */
.stats,.stat-strip,.stat-grid{background:#fff!important}
.stat{background:#fff!important}
.stat-num,.stat-value{color:var(--nt-blue-dark)!important;font-weight:800!important}
.stat-label,.stat-sub,.updated-note{color:var(--nt-muted)!important}

/* FOOTER -------------------------------------------------- */
footer{
  background:var(--nt-blue-deep)!important;color:#fff!important;margin-top:0!important;
  padding:0 0 24px!important;
}
.footer-grid,.footer-main{padding:42px 6vw 18px!important}
.footer-title{color:#fff!important}.footer-small,.footer-tagline{color:#cbd9e6!important}
.footer-grid h4,.footer h4{color:#7bc5f7!important}
.footer-grid p,.footer-grid a,.footer a,.footer p{color:#cbd9e6!important}
.footer-grid a:hover,.footer a:hover{color:#fff!important}
.footer-bottom{margin:18px 6vw 0!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.13)!important;color:#aebfd0!important}

/* LEADER / GOVERNMENT ------------------------------------ */
.leader{background:#fff!important;border:0!important;box-shadow:none!important;padding:42px 6vw 28px!important}
.leader-role,.section-kicker{color:var(--nt-blue)!important;font-weight:800!important;letter-spacing:.08em!important}
.leader h2{color:var(--nt-blue-dark)!important;font-weight:800!important}
.leader-photo{border:5px solid #fff!important;box-shadow:0 6px 18px rgba(0,0,0,.12)!important}

/* IMAGE GALLERIES ---------------------------------------- */
.gallery-grid{gap:14px!important;background:transparent!important;border:0!important}
.gallery-item{border-radius:10px!important;box-shadow:var(--nt-shadow)!important;overflow:hidden!important;background:#dcebf6!important}

/* FORMS --------------------------------------------------- */
input,select,textarea{border:1px solid #d6e0e9!important;border-radius:8px!important;background:#fff!important;color:var(--nt-text)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--nt-blue)!important;box-shadow:0 0 0 3px rgba(8,127,209,.12)!important}

/* MOBILE -------------------------------------------------- */
@media(max-width:1200px){
  .nav-links a{min-width:54px!important;font-size:9px!important;padding:6px 3px!important}
  .nav-links{gap:0!important}
  .brand-name{font-size:15px!important}
}
@media(max-width:900px){
  .navbar{padding:10px 5vw!important}
  .nav-links{display:none!important}
  .nav-toggle{display:block!important;margin-left:auto}
  .page-hero{min-height:300px!important;padding:55px 5vw!important}
  body:has(.hero-panel) .hero-copy{width:100%;padding:60px 5vw!important}
  .section{padding:52px 5vw!important}
  .footer-grid,.footer-main{padding-left:5vw!important;padding-right:5vw!important}
  .footer-bottom{margin-left:5vw!important;margin-right:5vw!important}
}
@media(max-width:600px){
  .brand-mark{width:42px!important;height:42px!important}
  .brand-name{font-size:14px!important}.brand-sub{font-size:9px!important}
  .page-hero h1{font-size:34px!important}
  .page-hero p{font-size:14px!important}
  .gallery-grid{grid-template-columns:repeat(2,1fr)!important}
}