/* =========================================================================
   PUBLIC.CSS — Website Desa (Frontend Masyarakat)
   -------------------------------------------------------------------------
   Konsep   : Putih mendominasi setiap halaman; hijau (forest) & emas (gold)
              dipakai sebagai aksen — pada tombol, ikon, garis, dan SATU
              elemen "signature" per halaman (hero foto beranda, kartu
              berita utama) — bukan sebagai warna latar penuh di mana-mana.
   Font     : Poppins — dipakai di seluruh UI (judul, body, tombol, label)
   Struktur : token → reset → utilitas → navbar → tombol → hero (halaman
              dalam) → search box → kartu (umum, berita, umkm) → pagination
              → detail berita → profil desa → kontak → dashboard/pengajuan
              (halaman masyarakat) → footer → beranda (hero foto + section)
              → responsive
   Letakkan file ini di: public/css/public.css
   ========================================================================= */

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root{
  /* --- Netral / permukaan (dominan) --- */
  --white:#ffffff;
  --bg-soft:#f7f8f6;
  --bg-tint:#f4f7f5;
  --line:#edf0ee;
  --line-strong:#e1e6e2;

  /* --- Aksen hijau (forest) --- */
  --forest-900:#0e3f2c;
  --forest-700:#145c3f;
  --forest-600:#1a7a52;
  --forest-100:#e6f2ec;

  /* --- Aksen emas (gold) --- */
  --gold-600:#c68f3a;
  --gold-500:#d4a24c;
  --gold-100:#f7ecd6;

  /* --- Teks --- */
  --ink-900:#1c2126;
  --ink-600:#5b6470;
  --ink-400:#8b9299;

  /* --- Status --- */
  --ok-600:#1a7a52;
  --ok-100:#e6f2ec;
  --warn-600:#c68f3a;
  --warn-100:#f7ecd6;
  --danger-600:#c94b4b;
  --danger-100:#fdecec;
  --info-600:#2879c6;
  --info-100:#e8f2fd;

  /* --- Radius & bayangan --- */
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:12px;
  --radius-pill:100px;

  --shadow-soft:0 10px 30px rgba(20,30,25,.08);
  --shadow-hover:0 18px 40px rgba(20,30,25,.14);
  --shadow-card:0 4px 18px rgba(20,30,25,.05);

  /* --- Skala jarak (8px base) — dipakai agar jarak antar elemen konsisten --- */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:80px;
  --sp-8:96px;

  /* --- Bootstrap override --- */
  --bs-primary:#145c3f;
  --bs-primary-rgb:20,92,63;
  --bs-link-color:#145c3f;
  --bs-link-hover-color:#0e3f2c;

  --font-main:'Poppins','Segoe UI',Arial,sans-serif;
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-main);
  font-weight:400;
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-main);
  font-weight:700;
  color:var(--ink-900);
  letter-spacing:-.01em;
}

p{ color:var(--ink-600); }

a{ color:var(--forest-700); }
a:hover{ color:var(--forest-900); }

img{ max-width:100%; }

::selection{ background:var(--forest-100); color:var(--forest-900); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#d7ddd9;
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:#c3cbc5; background-clip:content-box; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--forest-600);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================================
   3. UTILITAS UMUM
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-main);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--forest-700);
  margin-bottom:.6rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--gold-500);
  display:inline-block;
}

.section-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:3rem 0;
}

/* =========================================================================
   4. NAVBAR — sticky, transparan di atas hero foto, putih saat scroll
   ========================================================================= */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1050;
  padding:18px 0;
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.navbar.is-scrolled,
.navbar.navbar-solid{
  background:var(--white);
  box-shadow:0 8px 24px rgba(20,30,25,.06);
  padding:10px 0;
}
.navbar.on-dark:not(.is-scrolled) .navbar-brand,
.navbar.on-dark:not(.is-scrolled) .nav-link{ color:#fff; }
.navbar.on-dark:not(.is-scrolled) .nav-link.active{ color:var(--gold-500); }
.navbar.on-dark:not(.is-scrolled) .navbar-toggler-icon{ filter:invert(1); }

.navbar-brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-main);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink-900);
}
.navbar-brand img{
  height:40px; width:40px; object-fit:cover; border-radius:50%;
  border:2px solid var(--gold-500);
}

.navbar-nav{ gap:6px; }
.navbar-nav .nav-link{
  position:relative;
  font-weight:500;
  font-size:.94rem;
  color:var(--ink-900);
  padding:8px 14px !important;
  transition:color .2s ease;
}
.navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:2px;
  height:2px;
  background:var(--gold-500);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ transform:scaleX(1); }
.navbar-nav .nav-link.active{ color:var(--forest-700); font-weight:600; }

.dropdown-menu{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover);
  padding:.5rem;
  font-family:var(--font-main);
}
.dropdown-item{
  border-radius:10px;
  font-size:.87rem;
  font-weight:500;
  padding:.55rem .8rem;
  color:var(--ink-900);
  transition:background .15s ease, color .15s ease;
}
.dropdown-item:hover{ background:var(--forest-100); color:var(--forest-900); }
.dropdown-divider{ border-color:var(--line); }

.btn-admin-login{
  font-family:var(--font-main);
  font-weight:600;
  font-size:.85rem;
  padding:9px 22px;
  border-radius:var(--radius-pill);
  background:var(--forest-700);
  color:#fff !important;
  border:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-admin-login:hover{
  background:var(--forest-900);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(20,92,63,.28);
}

@media (max-width:991.98px){
  .navbar:not(.is-scrolled){ background:var(--white); box-shadow:0 8px 24px rgba(20,30,25,.06); }
  .navbar.on-dark .navbar-brand,
  .navbar.on-dark .nav-link{ color:var(--ink-900) !important; }
  .navbar-collapse{
    background:var(--white);
    margin-top:14px;
    padding:14px 18px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    border:1px solid var(--line);
  }
}

/* =========================================================================
   5. TOMBOL (pill buttons)
   ========================================================================= */
.btn{
  font-family:var(--font-main);
  border-radius:var(--radius-pill);
  font-weight:600;
  padding:10px 24px;
  transition:transform .25s ease, box-shadow .25s ease, background .3s ease, color .2s ease;
}
.btn-primary{
  background:var(--forest-700);
  border-color:var(--forest-700);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--forest-600),var(--forest-900));
  border-color:var(--forest-900);
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(20,92,63,.25);
}
.btn-light{
  background:#fff; color:var(--forest-700);
  border:1px solid var(--line);
}
.btn-light:hover{
  background:var(--gold-100);
  border-color:var(--gold-100);
  transform:translateY(-2px);
  color:var(--forest-900);
}
.btn-outline-light{
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
}
.btn-outline-light:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12); color:#fff; }
.btn-secondary{ background:var(--ink-400); border-color:var(--ink-400); }
.btn-secondary:hover{ background:var(--ink-600); border-color:var(--ink-600); transform:translateY(-2px); }
.btn-success{ background:var(--ok-600); border-color:var(--ok-600); }
.btn-success:hover{ background:var(--forest-900); border-color:var(--forest-900); transform:translateY(-2px); }
.btn-danger{ background:var(--danger-600); border-color:var(--danger-600); }
.btn-danger:hover{ background:#a83a3a; border-color:#a83a3a; transform:translateY(-2px); }

.btn-outline-primary{ color:var(--forest-700); border-color:var(--forest-700); background:transparent; }
.btn-outline-primary:hover{ background:var(--forest-700); color:#fff; transform:translateY(-2px); }
.btn-outline-success{ color:var(--ok-600); border-color:var(--ok-600); background:transparent; }
.btn-outline-success:hover{ background:var(--ok-600); color:#fff; transform:translateY(-2px); }
.btn-outline-secondary{ color:var(--ink-600); border-color:var(--line-strong); background:transparent; }
.btn-outline-secondary:hover{ background:var(--bg-soft); color:var(--ink-900); }

.btn-sm{ padding:6px 16px; font-size:.8rem; }
.btn-lg{ padding:13px 30px; font-size:1rem; }
.btn-md{ padding:10px 22px; }

/* =========================================================================
   6. HERO HALAMAN DALAM (berita, umkm, kontak, pengajuan) — terang, putih
   ========================================================================= */
.page-hero{
  background:linear-gradient(125deg, var(--forest-900) 0%, var(--forest-700) 65%, var(--forest-600) 100%);
  padding:148px 0 var(--sp-7);
  color:#fff;
  position:relative;
  overflow:hidden;
  margin-bottom:calc(var(--sp-5) * -1);
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 88% 15%, rgba(212,162,76,.28), transparent 55%),
             radial-gradient(circle at 5% 90%, rgba(255,255,255,.06), transparent 50%);
  pointer-events:none;
}
.page-hero .eyebrow{ color:var(--gold-500); margin-bottom:var(--sp-1); }
.page-hero .eyebrow::before{ background:var(--gold-500); }
.page-hero h1{ color:#fff; font-size:2.5rem; margin-bottom:var(--sp-2); }
.page-hero p{ color:rgba(255,255,255,.8); max-width:560px; margin-bottom:0; }
.page-hero .breadcrumb-item a{ color:rgba(255,255,255,.75); }
.page-hero .breadcrumb-item a:hover{ color:#fff; }
.page-hero .breadcrumb-item.active{ color:#fff; }
.page-hero .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.45); }

.kontak-hero{ padding:148px 0 var(--sp-6); margin-bottom:0; }
.kontak-hero h1{ font-size:2.4rem; }

.pengajuan-hero{ padding-bottom:var(--sp-7); }

/* =========================================================================
   7. SEARCH BOX (berita / umkm)
   ========================================================================= */
.search-box{
  position:relative;
  z-index:2;
  margin-top:var(--sp-3);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:6px 6px 6px 22px;
  box-shadow:var(--shadow-soft);
  max-width:640px;
}
.search-box .input-group{ background:transparent; }
.search-box .input-group-text{ background:transparent; border:none; color:var(--ink-400); padding-left:0; }
.search-box .form-control{ border:none; background:transparent; box-shadow:none; font-size:.95rem; }
.search-box .form-control:focus{ box-shadow:none; }
.search-box .btn{ padding:10px 26px; }

.filter-pills{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.filter-pills .form-control, .filter-pills select{
  border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink-900);
  padding:8px 18px;
  font-size:.85rem;
}

/* =========================================================================
   8. KARTU — sistem umum
   ========================================================================= */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:transform .32s ease, box-shadow .32s ease;
  overflow:hidden;
  background:var(--white);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.card-img-top{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.card-body{ padding:1.4rem; }
.card.shadow-sm{ box-shadow:var(--shadow-card) !important; }
.card.border-0{ border:1px solid var(--line) !important; }

.card-header{
  font-family:var(--font-main);
  font-weight:600;
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:1rem 1.3rem;
}
.card-header.bg-primary{
  background:var(--forest-700) !important;
  border:none;
  color:#fff;
}
.card-footer{ background:var(--white); border-top:1px solid var(--line); padding:1rem 1.3rem; }

/* ---- Kartu berita ---- */
.berita-card{ position:relative; }
.berita-card .card-img-wrap{ position:relative; overflow:hidden; }
.berita-card .card-img-wrap img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.berita-card:hover .card-img-wrap img{ transform:scale(1.07); }
.berita-card .date-badge{
  position:absolute; top:14px; left:14px;
  background:#fff;
  color:var(--forest-700);
  font-size:.72rem; font-weight:700;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.berita-card .card-title{ font-size:1.05rem; line-height:1.35; }
.berita-card .card-title a{ color:var(--ink-900); text-decoration:none; }
.berita-card .card-title a:hover{ color:var(--forest-700); }

.read-more{
  font-family:var(--font-main);
  font-weight:600;
  font-size:.85rem;
  color:var(--forest-700);
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
}
.read-more i{ transition:transform .25s ease; }
.read-more:hover i{ transform:translateX(4px); }

/* Berita utama (satu-satunya elemen gelap yang disengaja per halaman) */
.featured-news{
  background:linear-gradient(120deg,var(--forest-900),var(--forest-700));
  border-radius:var(--radius-lg);
  color:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-hover);
  border:none;
}
.featured-news .row{ min-height:340px; }
.featured-news img{ height:100%; width:100%; object-fit:cover; min-height:240px; }
.featured-news .badge-cat{
  display:inline-block;
  background:var(--gold-500);
  color:#1c2126;
  font-size:.72rem; font-weight:700;
  padding:6px 14px; border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.featured-news h3{ color:#fff; font-size:1.6rem; }
.featured-news p{ color:rgba(255,255,255,.8); }

/* ---- Kartu UMKM ---- */
.umkm-card .card-img-top{ aspect-ratio:1/1; }
.umkm-card .cat-badge{
  display:inline-block;
  background:var(--forest-100);
  color:var(--forest-700);
  font-size:.72rem; font-weight:700;
  padding:5px 12px; border-radius:var(--radius-pill);
  margin-bottom:10px;
}
.umkm-card .card-title{ font-size:1.1rem; }
.umkm-card .meta-line{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-600); margin-bottom:4px; }
.umkm-card .meta-line i{ color:var(--gold-600); width:16px; }

.btn-whatsapp{ background:#25D366; color:#fff; border:none; font-size:.85rem; }
.btn-whatsapp:hover{ background:#1ebd59; color:#fff; transform:translateY(-2px); }

/* Empty state */
.empty-state{ text-align:center; padding:70px 20px; background:var(--bg-soft); border-radius:var(--radius-lg); border:1px solid var(--line); }
.empty-state svg{ width:140px; margin-bottom:20px; opacity:.85; }
.empty-state p{ color:var(--ink-600); margin-bottom:0; }

/* =========================================================================
   9. PAGINATION
   ========================================================================= */
.pagination{ gap:6px; }
.page-link{
  font-family:var(--font-main);
  border:1px solid var(--line);
  border-radius:var(--radius-pill) !important;
  margin:0 2px;
  color:var(--forest-700);
  font-weight:600;
  padding:.5rem .9rem;
}
.page-item.active .page-link{ background:var(--forest-700); border-color:var(--forest-700); color:#fff; }
.page-link:hover{ background:var(--forest-100); }
.page-item.disabled .page-link{ color:var(--ink-400); }

/* =========================================================================
   10. DETAIL BERITA
   ========================================================================= */
.breadcrumb{ background:transparent; padding:0; margin-bottom:20px; font-size:.85rem; }
.breadcrumb-item a{ color:var(--ink-600); text-decoration:none; font-weight:500; }
.breadcrumb-item a:hover{ color:var(--forest-700); }
.breadcrumb-item.active{ color:var(--forest-700); font-weight:600; }

.article-hero-img{
  width:100%;
  max-height:480px;
  object-fit:cover;
  border-radius:var(--radius-lg);
  margin-bottom:28px;
  border:1px solid var(--line);
}
.article-meta{ display:flex; gap:18px; flex-wrap:wrap; color:var(--ink-600); font-size:.9rem; margin-bottom:22px; }
.article-meta i{ color:var(--gold-600); margin-right:6px; }
.article-body{ font-size:1.05rem; line-height:1.85; color:var(--ink-900); }
.article-body p{ margin-bottom:1.2em; }

.share-floating{ position:sticky; top:120px; display:flex; flex-direction:column; gap:10px; }
.share-floating a{
  width:46px; height:46px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  color:var(--forest-700);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.share-floating a:hover{ background:var(--forest-700); color:#fff; transform:translateY(-3px); border-color:var(--forest-700); }

.related-news{ border-top:1px solid var(--line); margin-top:50px; padding-top:40px; }

/* =========================================================================
   11. PROFIL DESA
   ========================================================================= */
.profile-hero{
  background:linear-gradient(125deg, var(--forest-900) 0%, var(--forest-700) 65%, var(--forest-600) 100%);
  color:#fff;
  padding:148px 0 var(--sp-8);
  position:relative;
  overflow:hidden;
}
.profile-hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 10% 90%, rgba(212,162,76,.25), transparent 55%),
             radial-gradient(circle at 90% 10%, rgba(255,255,255,.08), transparent 50%);
  pointer-events:none;
}
.profile-hero h1{ color:#fff; font-size:2.6rem; }
.profile-hero p{ color:rgba(255,255,255,.8); max-width:600px; }
.profile-hero .eyebrow{ color:var(--gold-500); }

.info-card{ border-radius:var(--radius-lg); box-shadow:var(--shadow-card); border:1px solid var(--line); }
.info-card .list-group-item{ border:none; border-bottom:1px solid var(--line); padding:var(--sp-2); background:transparent; }
.info-card .list-group-item:last-child{ border-bottom:none; }
.info-card .card-header{
  background:var(--forest-700) !important;
  border:none;
  font-family:var(--font-main);
  font-weight:600;
  padding:var(--sp-2);
  color:#fff;
}

/* Timeline sejarah */
.timeline{ position:relative; padding-left:34px; margin-top:20px; }
.timeline::before{
  content:"";
  position:absolute; left:8px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(var(--forest-600),var(--gold-500));
}
.timeline-item{ position:relative; padding-bottom:26px; }
.timeline-item::before{
  content:"";
  position:absolute; left:-34px; top:2px;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--forest-700);
}
.timeline-item p{ color:var(--ink-600); line-height:1.8; margin-bottom:0; }

/* Visi & Misi */
.vm-card{
  border-radius:var(--radius-lg);
  padding:var(--sp-4);
  height:100%;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
.vm-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.vm-card .vm-icon{
  width:52px; height:52px;
  border-radius:16px;
  background:var(--forest-100);
  color:var(--forest-700);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  margin-bottom:var(--sp-2);
}
.vm-card.gold .vm-icon{ background:var(--gold-100); color:var(--gold-600); }
.vm-card p{ color:var(--ink-600); line-height:1.75; margin-bottom:0; }

/* Kartu struktur organisasi */
.org-card{
  text-align:center;
  border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-2);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
.org-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.org-photo{
  width:104px; height:104px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto var(--sp-2);
  border:4px solid var(--forest-100);
  padding:2px;
}
.org-photo-placeholder{
  width:104px; height:104px;
  border-radius:50%;
  margin:0 auto var(--sp-2);
  display:flex; align-items:center; justify-content:center;
  background:var(--forest-100);
  color:var(--forest-700);
  font-size:2.4rem;
}
.org-card h5{ font-size:1rem; margin-bottom:2px; }
.org-card .jabatan{ color:var(--gold-600); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--sp-1); }
.org-card .kontak{ color:var(--ink-600); font-size:.85rem; }

/* =========================================================================
   12. KONTAK & PENGADUAN
   ========================================================================= */
.map-frame{ position:relative; overflow:hidden; border-radius:0 0 var(--radius-lg) var(--radius-lg); padding-top:56.25%; }
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-frame.map-frame--fallback{
  padding-top:0; min-height:220px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:var(--bg-soft); padding:34px 24px;
}
.map-frame--fallback p{ color:var(--ink-600); font-size:.88rem; max-width:320px; margin-bottom:16px; }

.form-floating > .form-control,
.form-floating > textarea,
.form-floating > .form-select{
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--bg-soft);
  font-family:var(--font-main);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-floating > .form-control:focus,
.form-floating > textarea:focus,
.form-floating > .form-select:focus{
  border-color:var(--forest-600);
  box-shadow:0 0 0 4px rgba(20,92,63,.1);
  background:#fff;
}
.form-floating > label{ color:var(--ink-400); }

.form-control, .form-select{
  font-family:var(--font-main);
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  padding:.6rem .95rem;
  font-size:.9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--forest-600);
  box-shadow:0 0 0 .18rem rgba(20,92,63,.12);
}
.form-label{ font-weight:600; color:var(--ink-900); font-size:.87rem; }
.invalid-feedback{ font-size:.8rem; }
.is-invalid{ border-color:var(--danger-600) !important; }

.success-pop{ animation:popIn .45s ease; }
@keyframes popIn{
  0%{ transform:scale(.9); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

/* Alerts */
.alert{ border:none; border-radius:var(--radius-md); font-size:.88rem; padding:1rem 1.2rem; }
.alert-success{ background:var(--ok-100); color:#146c48; }
.alert-danger{ background:var(--danger-100); color:#9c2c2c; }
.alert-warning{ background:var(--warn-100); color:#8a5f10; }
.alert-info{ background:var(--info-100); color:#1c5a94; }

/* =========================================================================
   13. DASHBOARD & PENGAJUAN SURAT (halaman masyarakat setelah login)
   ========================================================================= */

/* Kartu statistik dashboard: kartu putih + ikon berwarna, bukan blok warna */
.card.text-white{
  background:var(--white) !important;
  color:var(--ink-900) !important;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card.text-white:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.card.text-white .card-title{
  color:var(--ink-600);
  font-family:var(--font-main);
  font-weight:600;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.6rem;
}
.card.text-white h2{ font-family:var(--font-main); font-weight:700; color:var(--ink-900); font-size:2rem; margin:0; }
.card.text-white i.opacity-50{
  opacity:1 !important;
  width:46px; height:46px;
  border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.1rem !important;
  background:var(--forest-700);
}
.card.text-white.bg-primary i.opacity-50{ background:var(--forest-700); }
.card.text-white.bg-warning i.opacity-50{ background:var(--warn-600); }
.card.text-white.bg-success i.opacity-50{ background:var(--ok-600); }
.card.text-white.bg-danger  i.opacity-50{ background:var(--danger-600); }

/* Tabel */
.table{ font-family:var(--font-main); background:var(--white); margin-bottom:0; }
.table thead th{
  background:var(--bg-tint);
  color:var(--ink-600);
  font-weight:700;
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.06em;
  border-bottom:1px solid var(--line);
  padding:.9rem 1rem;
  white-space:nowrap;
}
.table thead.table-light th{ background:var(--bg-tint); }
.table td, .table th{ vertical-align:middle; border-color:var(--line); padding:.85rem 1rem; font-size:.87rem; }
.table-hover tbody tr:hover{ background:var(--forest-100); }
.table-responsive{ border-radius:0 0 var(--radius-lg) var(--radius-lg); }

/* Badge status pengajuan */
.badge{ font-family:var(--font-main); border-radius:var(--radius-pill); font-weight:600; font-size:.7rem; padding:.4em .85em; letter-spacing:.02em; }
.badge.bg-success{ background:var(--ok-100) !important; color:#136b47 !important; }
.badge.bg-danger{ background:var(--danger-100) !important; color:var(--danger-600) !important; }
.badge.bg-warning{ background:var(--warn-100) !important; color:var(--warn-600) !important; }
.badge.bg-info{ background:var(--info-100) !important; color:var(--info-600) !important; }
.badge.bg-primary{ background:var(--forest-100) !important; color:var(--forest-700) !important; }
.badge.bg-secondary{ background:var(--bg-tint) !important; color:var(--ink-600) !important; }

/* Definition list (detail pengajuan) */
dl.row dt{ color:var(--ink-600); font-weight:600; font-size:.85rem; padding-top:.35rem; }
dl.row dd{ color:var(--ink-900); font-size:.9rem; margin-bottom:1rem; }
dl.row dd ul{ padding-left:1.1rem; margin-bottom:0; }

/* =========================================================================
   14. FOOTER
   ========================================================================= */
.site-footer{ background:var(--bg-soft); padding:var(--sp-7) 0 0; margin-top:var(--sp-6); border-top:1px solid var(--line); }
.site-footer .footer-brand{
  display:flex; align-items:center; gap:var(--sp-1);
  font-family:var(--font-main);
  font-weight:700; font-size:1.15rem;
  margin-bottom:var(--sp-2);
}
.site-footer .footer-brand img{ height:44px; width:44px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-500); }
.site-footer p{ color:var(--ink-600); font-size:.92rem; line-height:1.75; }
.site-footer h6{ font-family:var(--font-main); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--ink-400); margin-bottom:var(--sp-2); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:var(--sp-1); }
.site-footer ul li a{ color:var(--ink-900); text-decoration:none; font-size:.92rem; transition:color .2s ease, padding-left .2s ease; }
.site-footer ul li a:hover{ color:var(--forest-700); padding-left:4px; }
.footer-contact-item{ display:flex; gap:10px; margin-bottom:12px; color:var(--ink-600); font-size:.92rem; }
.footer-contact-item i{ color:var(--forest-700); margin-top:3px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  color:var(--forest-700);
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.footer-social a:hover{ background:var(--forest-700); color:#fff; transform:translateY(-3px); border-color:var(--forest-700); }

.footer-divider{ border-top:1px solid var(--line); margin-top:var(--sp-6); }
.footer-bottom{ padding:var(--sp-3) 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-1); color:var(--ink-400); font-size:.85rem; }

/* =========================================================================
   15. BERANDA — hero foto (satu-satunya bagian gelap penuh di seluruh situs)
   ========================================================================= */
.home-hero{
  position:relative;
  min-height:82vh;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.home-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(14,63,44,.90) 0%,rgba(14,63,44,.58) 45%,rgba(14,63,44,.22) 100%);
}
.home-hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(212,162,76,.28), transparent 55%);
}
.home-hero__content{ position:relative; z-index:2; color:#fff; max-width:680px; padding:148px 0 var(--sp-8); }
.home-hero__title{ color:#fff; font-size:3.1rem; line-height:1.1; margin:var(--sp-1) 0 var(--sp-3); }
.home-hero__title small{ display:block; font-size:1rem; font-weight:600; letter-spacing:.28em; color:var(--gold-500); margin-bottom:var(--sp-1); }
.home-hero__lead{ color:rgba(255,255,255,.85); font-size:1.1rem; line-height:1.7; margin-bottom:var(--sp-4); }

.scroll-cue{
  position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  animation:bounceDown 2.2s ease-in-out infinite;
}
@keyframes bounceDown{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,8px); }
}

/* Kartu statistik mengambang — surface putih pertama yang terlihat */
.stats-float{
  position:relative;
  z-index:3;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hover);
  margin-top:-64px;
  padding:34px 20px;
}
.stats-float .stat-item{ text-align:center; min-width:auto; border-right:1px solid var(--line); }
.stats-float .stat-item:last-child{ border-right:none; }
.stats-float .stat-item__icon{ margin:0 auto 10px; }
.stats-float .stat-item__num{ font-size:1.8rem; }

@media (max-width:767.98px){
  .home-hero__title{ font-size:2.2rem; }
  .stats-float .stat-item{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:16px; }
  .stats-float .stat-item:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
}

/* Section "Kenapa Desa Kami" */
.why-section{ padding:var(--sp-8) 0; }
.why-section__lead{ color:var(--ink-600); line-height:1.8; margin-top:var(--sp-2); }
.why-social{ display:flex; gap:var(--sp-1); margin:var(--sp-2) 0 var(--sp-4); }
.why-social a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--forest-100); color:var(--forest-700);
}
.why-social a:hover{ background:var(--forest-700); color:#fff; }

.stat-row{ display:flex; gap:28px; flex-wrap:wrap; margin-top:20px; }
.stat-item{ min-width:120px; }
.stat-item__icon{
  width:44px; height:44px; border-radius:12px;
  background:var(--forest-100); color:var(--forest-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.stat-item__num{ display:block; font-family:var(--font-main); font-weight:700; font-size:1.5rem; }
.stat-item__label{ font-size:.78rem; color:var(--ink-600); }

.feature-card{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--sp-2); box-shadow:var(--shadow-card); margin-bottom:var(--sp-2);
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.feature-card__icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--gold-100); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center;
}
.feature-card__title{ font-weight:600; margin-bottom:4px; }
.feature-card__text{ color:var(--ink-600); font-size:.9rem; margin-bottom:0; }

/* Section berita terbaru */
.destination-section{ padding:var(--sp-6) 0; }
.destination-section__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.destination-section__note{ color:var(--ink-600); max-width:340px; margin-bottom:0; }
.destination-section__footer{ display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4); }

.destination-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease; height:100%;
}
.destination-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.destination-card__img-wrap{ position:relative; }
.destination-card__img-wrap img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.destination-card__badge{
  position:absolute; top:12px; left:12px; background:#fff;
  font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill); color:var(--forest-700);
}
.destination-card__body{ padding:16px; }
.destination-card__title{ font-weight:600; margin-bottom:6px; }
.destination-card__meta{ font-size:.8rem; color:var(--ink-600); }

.arrow-nav{ margin-left:auto; display:flex; gap:8px; }
.arrow-nav a{
  width:40px; height:40px; border-radius:50%; background:var(--forest-100);
  color:var(--forest-700); display:flex; align-items:center; justify-content:center;
}
.arrow-nav a:hover{ background:var(--forest-700); color:#fff; }

/* Program & layanan unggulan — satu blok gelap "signature" per halaman beranda */
.package-section{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.package-main{
  background:var(--forest-900); color:#fff; border-radius:var(--radius-lg);
  padding:var(--sp-4); display:flex; flex-direction:column; justify-content:space-between;
}
.package-card{
  border-radius:var(--radius-lg); background-size:cover; background-position:center;
  min-height:260px; position:relative; padding:var(--sp-3); display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
}
.package-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.65)); border-radius:var(--radius-lg); }
.package-card > *{ position:relative; z-index:1; }
.package-card__icon{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }

/* Langkah pengaduan */
.steps-section{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-6); margin:var(--sp-6) auto; max-width:1200px; }
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-3); }
.step-item{ display:flex; gap:var(--sp-2); }
.step-item__num{
  width:40px; height:40px; border-radius:50%; background:var(--forest-700); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.step-item__title{ font-weight:600; margin-bottom:4px; }
.step-item__text{ color:var(--ink-600); font-size:.9rem; margin-bottom:0; }

@media (max-width:991.98px){
  .package-section{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:1fr; }
  .steps-section{ padding:40px 24px; }
}

/* =========================================================================
   16. UTILITAS TATA LETAK
   ========================================================================= */
main{ padding-top:0; }
/* --nav-h diisi via JS (lihat public.blade.php) dengan tinggi navbar yang
   SEBENARNYA dirender (bukan angka tebakan), sehingga tetap akurat walau
   menu wrap ke 2 baris di lebar layar tertentu atau padding navbar berubah
   saat status is-scrolled. 92px tetap dipakai sebagai fallback jika JS
   nonaktif. */
body:not(.has-page-hero) main{ padding-top:var(--nav-h, 92px); }

/* =========================================================================
   17. RESPONSIVE
   ========================================================================= */
@media (max-width:1199.98px){
  .home-hero__title{ font-size:2.7rem; }
}
@media (max-width:767.98px){
  .page-hero{ padding:120px 0 70px; }
  .page-hero h1{ font-size:1.9rem; }
  .kontak-hero{ padding:120px 0 50px; }
  .profile-hero{ padding:120px 0 70px; }
  .profile-hero h1{ font-size:1.9rem; }
  .card-body{ padding:1.1rem; }
  .featured-news .row{ min-height:auto; }
  .featured-news .col-md-6.p-5{ padding:2rem !important; }
}
@media (max-width:575.98px){
  .page-hero, .profile-hero{ padding:120px 0 70px; }
  .page-hero h1, .profile-hero h1{ font-size:1.9rem; }
  .home-hero__title{ font-size:2rem; }
  .btn{ padding:9px 18px; font-size:.85rem; }
}

/* =========================================================================
   18. KOMPONEN TAMBAHAN (tooltip, spinner, divider, back-to-top)
   ========================================================================= */
.tooltip .tooltip-inner{
  font-family:var(--font-main);
  background:var(--ink-900);
  border-radius:8px;
  font-size:.75rem;
  padding:.45rem .7rem;
}
.tooltip .tooltip-arrow::before{ border-top-color:var(--ink-900); }

@keyframes a-spin{ to{ transform:rotate(360deg); } }
.a-spinner{
  width:18px; height:18px;
  border:2.5px solid var(--forest-100);
  border-top-color:var(--forest-700);
  border-radius:50%;
  display:inline-block;
  animation:a-spin .6s linear infinite;
}

.a-divider{
  display:flex; align-items:center; gap:.8rem;
  margin:1.6rem 0 1.2rem;
  color:var(--ink-400);
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.a-divider::before, .a-divider::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); }

.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:1040;
  width:44px; height:44px; border-radius:50%;
  background:var(--forest-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-hover);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .25s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--forest-900); color:#fff; }

/* =========================================================================
   19. FORM PENGAJUAN — kartu berkas & persyaratan dinamis
   ========================================================================= */
#dataTambahan .form-label{ font-size:.85rem; }
#persyaratanContainer h6{
  font-family:var(--font-main);
  font-weight:600;
  font-size:.88rem;
  color:var(--ink-900);
  margin-bottom:.9rem;
}
#persyaratanContainer small.text-muted{ color:var(--ink-400) !important; font-size:.76rem; }

/* =========================================================================
   20. PRINT
   ========================================================================= */
@media print{
  .navbar, .site-footer, .btn, .search-box, .share-floating{ display:none !important; }
  .page-hero{ background:none !important; padding:20px 0 !important; }
  main{ padding-top:0 !important; }
}