/* ===== Tema Portal Desa ===== */
:root{
  --brand:#134217; --brand-dark:#123f16; --brand-light:#e8f3e9;
  --accent:#C8A415; --ink:#1f2937; --muted:#6b7280;
  --radius:14px; --shadow:0 6px 24px rgba(16,32,20,.08);
}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:var(--ink);background:#f7f9f7;overflow-x:hidden}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em}
a{text-decoration:none}
img{max-width:100%;height:auto}
.skip-link{position:absolute;top:.5rem;left:.5rem;background:#fff;padding:.5rem 1rem;z-index:2000;border-radius:8px}
.bg-brand{background:var(--brand)!important}
.text-brand{color:var(--brand)!important}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-outline-brand{color:var(--brand);border-color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}
.navbar .nav-link{font-weight:500}
.navbar .nav-link.active{color:#fff!important;position:relative}
.navbar .nav-link.active::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.2rem;height:2px;background:var(--accent);border-radius:2px}

/* Hero */
.hero{position:relative;min-height:74vh;display:flex;align-items:center;color:#fff;background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(9,32,14,.85),rgba(9,32,14,.45))}
.hero>.container{position:relative;z-index:2}
.hero h1{font-size:clamp(2rem,5vw,3.4rem)}

/* Kartu & seksi */
.section{padding:3.5rem 0}
.section-title{position:relative;display:inline-block;margin-bottom:.25rem}
.section-title::after{content:"";display:block;width:56px;height:4px;background:var(--accent);border-radius:4px;margin-top:.5rem}
.card-soft{border:0;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden;height:100%;background:#fff}
.card-soft:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(16,32,20,.14)}
.card-img-cover{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--brand-light)}
.stat-card{background:#fff;border-radius:var(--radius);padding:1.25rem;text-align:center;box-shadow:var(--shadow);height:100%}
.stat-card i{font-size:1.6rem;color:var(--brand)}
.stat-card .num{font-size:1.6rem;font-weight:800;color:var(--brand-dark);line-height:1.1}
.stat-card small{color:var(--muted)}
.badge-brand{background:var(--brand-light);color:var(--brand-dark);font-weight:600}
.page-header{background:linear-gradient(120deg,var(--brand),#2e7d32);color:#fff;padding:2.6rem 0 2.2rem}
.page-header .breadcrumb{--bs-breadcrumb-divider-color:rgba(255,255,255,.6)}
.page-header .breadcrumb a{color:#fff;opacity:.85}
.page-header .breadcrumb-item.active{color:rgba(255,255,255,.75)}

/* Peta & galeri */
#peta,.peta-box{height:440px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:1}
.gallery-item img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:12px;cursor:pointer;transition:.2s}
.gallery-item img:hover{transform:scale(1.02)}

/* Timeline sejarah */
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:3px;background:var(--brand-light)}
.timeline-item{position:relative;margin-bottom:1.75rem}
.timeline-item::before{content:"";position:absolute;left:-1.72rem;top:.35rem;width:14px;height:14px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 3px var(--brand-light)}

/* Struktur organisasi */
.org-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;text-align:center;height:100%}
.org-card img{width:92px;height:92px;border-radius:50%;object-fit:cover;margin-bottom:.6rem;background:var(--brand-light)}

/* Footer */
.footer-desa{background:var(--brand-dark);color:#fff}
.footer-links a{color:rgba(255,255,255,.78)}
.footer-links a:hover{color:#fff}

/* Tombol install PWA */
.btn-install{position:fixed;right:1rem;bottom:1rem;z-index:1050;border-radius:999px;padding:.6rem 1.1rem}

/* Admin */
.admin-body{background:#f1f4f6}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:250px;background:var(--brand-dark);color:#fff;overflow-y:auto;z-index:1040;transition:transform .25s ease}
.sidebar a{color:rgba(255,255,255,.8);display:flex;align-items:center;gap:.65rem;padding:.6rem 1.1rem;font-size:.92rem;border-left:3px solid transparent}
.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar a.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--accent)}
.sidebar .nav-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.55;padding:1rem 1.1rem .35rem}
.admin-content{margin-left:250px;min-height:100vh}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035;display:none}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open .sidebar-backdrop{display:block}
  .admin-content{margin-left:0}
}
.table-responsive{-webkit-overflow-scrolling:touch}
.btn,.form-control,.form-select{border-radius:10px}
.btn{min-height:40px}

/* Tombol Masuk Admin di navbar */
.btn-login-admin{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:600;font-size:.85rem;padding:.4rem .9rem;border-radius:999px;white-space:nowrap;transition:.2s}
.btn-login-admin:hover{background:var(--accent);border-color:var(--accent);color:var(--brand-dark)}

/* ===== Halaman Peta ===== */
.map-toolbar{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.25rem}
.map-toolbar h2{font-size:1rem;margin-bottom:.15rem}
.map-toolbar .map-hint{color:var(--muted);font-size:.82rem}
#filterPeta{gap:.5rem}
.map-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-light);color:var(--brand-dark);border:1px solid transparent;border-radius:999px;padding:.35rem .8rem .35rem .6rem;font-size:.82rem;font-weight:600;cursor:pointer;user-select:none;transition:.15s}
.map-chip i{font-size:.95rem}
.map-chip input{display:none}
.map-chip.chip-off{background:#f1f2f0;color:var(--muted);opacity:.6}
.map-chip:hover{border-color:var(--brand)}
.map-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
.map-frame #peta{height:560px;border-radius:0;box-shadow:none}
.map-side-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;position:sticky;top:88px}
.map-side-card .info-row{display:flex;gap:.75rem;margin-bottom:1rem}
.map-side-card .info-row:last-of-type{margin-bottom:1.25rem}
.map-side-card .info-icon{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1rem}
.map-side-card .info-text{font-size:.87rem;color:var(--ink);line-height:1.4}
.map-side-card .info-text small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;margin-bottom:.1rem}
.map-legend-note{background:var(--brand-light);border-radius:10px;padding:.85rem 1rem;font-size:.8rem;color:var(--brand-dark)}

/* ===== Halaman Kontak ===== */
.contact-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;height:100%}
.contact-card h2{font-size:1.05rem}
.contact-item{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.15rem}
.contact-item .icon-circle{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.contact-item .contact-text{font-size:.88rem;line-height:1.5}
.contact-item .contact-text small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;margin-bottom:.15rem}
.contact-item a{color:var(--ink);font-weight:600}
.contact-item a:hover{color:var(--brand)}
.social-row{display:flex;gap:.6rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid #eef0ee}
.social-row a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-light);color:var(--brand);transition:.2s}
.social-row a:hover{background:var(--brand);color:#fff}
.form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem}
.form-card .form-label{font-weight:600;font-size:.85rem}
.form-card .form-control{border:1px solid #e2e5e2;padding:.65rem .9rem}
.form-card .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(27,94,32,.12)}
.contact-map-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:1.5rem}
.contact-map-card .map-caption{padding:.85rem 1.1rem;font-size:.82rem;color:var(--muted);border-top:1px solid #eef0ee}
.contact-map-card #petaKontak{height:320px}
@media (max-width:991.98px){
  .map-side-card{position:static}
}