/* ==========================================================================
   Website Desa Denok - app.css
   Redesign: formal · professional · minimalis · palet BIRU / PUTIH / HITAM
   + smooth transitions & interactive animations.
   ========================================================================== */
:root {
  --primary: #1e3a8a;        /* navy utama (lebih pekat & elegan) */
  --primary-dark: #172554;   /* navy tua (footer, sidebar, hero) */
  --primary-soft: #eef2fb;   /* navy sangat lembut (latar section) */
  --accent: #2563eb;         /* aksen biru terang (dipakai hemat) */
  --dark: #0b1220;           /* nyaris hitam (teks & panel) */
  --muted: #6b7488;          /* teks sekunder */
  --line: #e8eaf0;           /* garis/pemisah */
  --bg: #fbfbfc;             /* latar halaman (putih hangat) */
  --white: #ffffff;
  --radius: .65rem;
  --radius-lg: 1.1rem;
  --shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 24px -6px rgba(11, 18, 32, .07);
  --shadow-md: 0 10px 30px -8px rgba(11, 18, 32, .12);
  --shadow-hover: 0 28px 56px -16px rgba(23, 37, 84, .30), 0 12px 24px -10px rgba(11, 18, 32, .12);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* ---- Skala tipografi (satu-satunya sumber ukuran font) ----
     Dipakai lintas semua view: publik, admin, partial. Jangan menulis
     nilai font-size mentah di luar daftar ini. */
  --fs-3xs: .7rem;      /* 11.2px - badge, label mikro, header tabel */
  --fs-2xs: .75rem;     /* 12.0px - eyebrow, judul kolom footer, tombol kecil */
  --fs-xs:  .8rem;      /* 12.8px - meta, chip, tombol admin */
  --fs-sm:  .875rem;    /* 14.0px - teks sekunder, tabel, input */
  --fs-base:.95rem;     /* 15.2px - teks isi (body) */
  --fs-md:  1.05rem;    /* 16.8px - lead pendek, h5, ikon sedang */
  --fs-lg:  1.2rem;     /* 19.2px - h4, judul kartu */
  --fs-xl:  1.35rem;    /* 21.6px - h3, ikon besar */
  --fs-2xl: 1.55rem;    /* 24.8px - angka sorot, ikon lingkaran */
  --fs-3xl: 1.9rem;     /* 30.4px - angka statistik */
  --fs-4xl: 2.4rem;     /* 38.4px - ikon state kosong */
  /* Ukuran cair untuk judul besar */
  --fs-lead: clamp(1rem, 1.5vw, 1.15rem);
  --fs-h2:   clamp(1.4rem, 2.4vw, 1.8rem);
  --fs-h1:   clamp(1.7rem, 3vw, 2.2rem);
  --fs-hero: clamp(2.2rem, 5vw, 3.6rem);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

* { scroll-behavior: smooth; }
html { scroll-padding-top: 84px; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--dark);
  background: var(--bg);
  line-height: 1.7;
  font-size: var(--fs-base);
  animation: pageIn .5s var(--ease);
}
h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
/* Skala judul dasar lebih ringkas (kelas .hero-title/.section-title lebih spesifik → tetap menang) */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }
a { text-decoration: none; transition: color .2s var(--ease); }
.text-muted-2 { color: var(--muted) !important; }
.lead { font-size: var(--fs-md); font-weight: 400; font-family: 'Inter', sans-serif; }

/* Utilitas ukuran bawaan Bootstrap dipetakan ke skala di atas,
   supaya kelas seperti .fs-5 / .display-6 di Blade tidak memunculkan ukuran liar. */
.fs-1 { font-size: var(--fs-hero) !important; }
.fs-2 { font-size: var(--fs-h1) !important; }
.fs-3 { font-size: var(--fs-h2) !important; }
.fs-4 { font-size: var(--fs-xl) !important; }
.fs-5 { font-size: var(--fs-lg) !important; }
.fs-6 { font-size: var(--fs-md) !important; }
.display-1, .display-2 { font-size: var(--fs-hero); }
.display-3, .display-4, .display-5 { font-size: var(--fs-4xl); }
.display-6 { font-size: var(--fs-3xl); }
/* Teks mikro di navbar (dulu inline style di Blade) */
.brand-sub { font-size: var(--fs-3xs); }
::selection { background: var(--primary); color: #fff; }

/* Utilitas warna (dipakai lintas halaman) */
.text-primary-2 { color: var(--primary) !important; }
.bg-primary-2 { background: var(--primary) !important; }
.bg-soft { background: var(--primary-soft) !important; }

/* Tombol */
.btn { transition: all .25s var(--ease); border-radius: .55rem; font-weight: 600; }
.btn:active { transform: scale(.97); }
.btn-primary-2 { background: var(--primary); border: 1px solid var(--primary); color: #fff; }
.btn-primary-2:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(29, 78, 216, .28); }
.btn-outline-primary-2 { border: 1px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary-2:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-light:hover { transform: translateY(-2px); }

:focus-visible { outline: 3px solid rgba(59, 130, 246, .45); outline-offset: 2px; }

/* ===================== KEYFRAMES ===================== */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes floatBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-24px) scale(1.08); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes pulseSoft { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ===================== SCROLL REVEAL ===================== */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal].in-view { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  body, .hero-blob { animation: none !important; }
}

/* ===================== NAVBAR ===================== */
.navbar { transition: padding .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); padding-top: .85rem; padding-bottom: .85rem; background: rgba(255, 255, 255, .9) !important; backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; }
.navbar.scrolled { padding-top: .5rem; padding-bottom: .5rem; box-shadow: 0 6px 24px rgba(15, 23, 42, .07); border-bottom-color: var(--line); }
.brand-badge { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: var(--fs-lg); box-shadow: 0 6px 16px rgba(29, 78, 216, .3); transition: transform .3s var(--ease); }
.navbar-brand:hover .brand-badge { transform: rotate(-6deg) scale(1.05); }
.navbar-brand strong { color: var(--dark); letter-spacing: -.02em; font-size: var(--fs-md); }
.navbar .nav-link { font-weight: 500; color: var(--dark); position: relative; margin: 0 .15rem; padding: .5rem .85rem; border-radius: .5rem; transition: color .25s var(--ease), background .25s var(--ease); }
.navbar .nav-link::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px;
  background: var(--primary); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link:hover { color: var(--primary); background: var(--primary-soft); }
.navbar .nav-link.active { color: var(--primary); }
.dropdown-menu { border: 1px solid var(--line); box-shadow: var(--shadow-hover); border-radius: var(--radius); animation: fadeDown .25s var(--ease); }
.dropdown-item { transition: background .2s, padding-left .2s var(--ease); }
.dropdown-item:hover { background: var(--primary-soft); color: var(--primary); padding-left: 1.5rem; }

/* ===================== HERO ===================== */
.hero { position: relative; overflow: hidden; color: #fff; }
.hero-content { position: relative; z-index: 2; }
.hero-photo { background-size: cover; background-position: center right; min-height: 88vh; display: flex; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; font-family: 'Inter', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #cdd8f0; padding: .5rem .95rem; border: 1px solid rgba(255,255,255,.25); border-radius: 2rem; margin-bottom: 1.75rem; backdrop-filter: blur(4px); }
.hero-title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-hero); line-height: 1.05; margin-bottom: 1.25rem; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-sub { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: #e8edf7; max-width: 540px; margin-bottom: 2.25rem; }
.btn-hero-ghost { border: 1px solid rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-hero-ghost:hover { background: #fff; color: var(--primary-dark); border-color: #fff; }
/* stagger elemen hero saat load */
.hero-content [data-hero] { opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.hero-content [data-hero="1"] { animation-delay: .1s; }
.hero-content [data-hero="2"] { animation-delay: .25s; }
.hero-content [data-hero="3"] { animation-delay: .4s; }
.hero-content [data-hero="4"] { animation-delay: .55s; }
.hero-content [data-hero="5"] { animation-delay: .7s; }

/* Baris meta di bawah tombol hero */
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 2rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 500; color: #dbe4f7; padding: .4rem .85rem; border-radius: 2rem; background: rgba(11,18,32,.58); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.hero-meta i { color: #93b4ff; font-size: var(--fs-base); }

/* Panel kaca di sisi kanan hero: ringkasan monografi desa */
.hero-panel { padding: 1.5rem; border-radius: calc(var(--radius-lg) + .35rem); background: rgba(11,18,32,.82); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(5, 10, 24, .85); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.hero-panel-head { display: flex; align-items: center; gap: .85rem; padding-bottom: 1.1rem; margin-bottom: 1.15rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.hero-panel-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); color: #cddbff; font-size: var(--fs-xl); }
.hero-panel-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9bce0; }
.hero-panel-title { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600; color: #fff; margin: .1rem 0 0; }

.hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.hero-fact { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: background .3s var(--ease), transform .35s var(--ease); }
.hero-fact:hover { background: rgba(255,255,255,.13); transform: translateY(-3px); }
.hero-fact > i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: #93b4ff; font-size: var(--fs-md); }
.hero-fact > div { min-width: 0; }
.hero-fact-num { display: block; font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600; line-height: 1.15; color: #fff; }
.hero-fact-num small { font-size: .8em; font-weight: 400; color: #9fb3d8; }
.hero-fact-lbl { display: block; font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #b9c8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-panel-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.15rem; font-family: 'Inter', sans-serif; font-size: var(--fs-sm); font-weight: 600; color: #cddbff; transition: color .25s var(--ease), gap .25s var(--ease); }
.hero-panel-link:hover { color: #fff; gap: .7rem; }

@media (max-width: 991.98px) {
  .hero-photo { min-height: auto; padding: 6rem 0 5rem; }
  .hero-panel { margin-top: .5rem; padding: 1.15rem; }
}
@media (max-width: 400px) {
  .hero-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fact, .hero-panel-link { transition: none; }
  .hero-fact:hover { transform: none; }
}

.opacity-85 { opacity: .85; }

/* Kartu akses cepat (mewarisi sistem .card-desa) */
.quick-card .quick-ico { display: inline-flex; width: 54px; height: 54px; border-radius: 16px; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-xl); transition: transform .4s var(--ease-spring), background .35s var(--ease), color .35s var(--ease); }
.quick-card:hover .quick-ico { background: var(--primary); color: #fff; transform: rotate(-6deg) scale(1.08) translateY(-2px); }
.quick-card h6 { font-family: 'Inter', sans-serif; font-weight: 700; }
.quick-card .quick-arrow { position: absolute; right: 1.5rem; bottom: 1.5rem; color: var(--primary); opacity: 0; transform: translateX(-6px); transition: all .3s var(--ease); }
.quick-card:hover .quick-arrow { opacity: 1; transform: translateX(0); }

/* Label kecil di atas judul (eyebrow) */
.eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* Foto sambutan dengan aksen + animasi hover */
.sambutan-photo { position: relative; }
.sambutan-img { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hover); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.sambutan-img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .9s var(--ease); }
.sambutan-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(30, 58, 138, 0) 40%, rgba(30, 58, 138, .22)); opacity: 0; transition: opacity .55s var(--ease); }
.sambutan-photo:hover .sambutan-img { transform: translateY(-6px); box-shadow: 0 34px 64px -20px rgba(23, 37, 84, .4); }
.sambutan-photo:hover .sambutan-img img { transform: scale(1.08); }
.sambutan-photo:hover .sambutan-img::after { opacity: 1; }
.sambutan-photo::before { content: ''; position: absolute; inset: -14px -14px auto auto; width: 120px; height: 120px; border: 3px solid var(--primary); border-radius: var(--radius-lg); z-index: -1; transition: transform .55s var(--ease); }
.sambutan-photo:hover::before { transform: translate(6px, -6px); }
.sambutan-badge { position: absolute; left: -16px; bottom: -16px; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); box-shadow: var(--shadow-hover); z-index: 2; transition: transform .55s var(--ease-spring); }
.sambutan-photo:hover .sambutan-badge { transform: scale(1.1) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) {
  .sambutan-img, .sambutan-img img, .sambutan-photo::before, .sambutan-badge { transition: none; }
  .sambutan-photo:hover .sambutan-img, .sambutan-photo:hover .sambutan-img img,
  .sambutan-photo:hover::before, .sambutan-photo:hover .sambutan-badge { transform: none; }
}

/* ===================== SECTION VIDEO PROFIL ===================== */
.video-section { position: relative; overflow: hidden; padding: 5rem 0; color: #fff; background: linear-gradient(120deg, var(--primary-dark) 0%, #1b2f6b 55%, var(--primary) 100%); }
.video-section::before { content: ''; position: absolute; right: -80px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.06); }
.video-section::after { content: ''; position: absolute; left: -60px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.05); }
.video-section > .container { position: relative; z-index: 1; }
.video-eyebrow { color: #93b4ff; }
.video-title { color: #fff; }
.video-title::after { background: #fff; }
.video-lead { color: rgba(255,255,255,.72); margin-bottom: 1.5rem; }
.video-points { list-style: none; padding: 0; margin: 0 0 2rem; }
.video-points li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; color: rgba(255,255,255,.88); font-size: var(--fs-base); }
.video-points i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #cddbff; }

.video-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 38px 80px -30px rgba(5, 10, 24, .8); background: #0b1220; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.video-frame:hover { transform: translateY(-4px); box-shadow: 0 46px 92px -30px rgba(5, 10, 24, .9); }
.video-player { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #0b1220; object-fit: cover; }
@media (max-width: 991.98px) { .video-section { padding: 3.5rem 0; } }
@media (prefers-reduced-motion: reduce) { .video-frame, .video-frame:hover { transition: none; transform: none; } }

/* CTA band */
.cta-band { position: relative; overflow: hidden; padding: 4.5rem 0; background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 100%); }
.cta-band::before { content: ''; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.06); }
.cta-band::after { content: ''; position: absolute; left: -40px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.05); }
.cta-band h2 { font-size: var(--fs-h1); }

/* ===================== SECTION ===================== */
.section { padding: 5rem 0; position: relative; }
.section > .container { position: relative; z-index: 1; }

/* Shape dekoratif latar (blob lingkaran halus) - mengisi background agar tidak polos.
   Dilukis via radial-gradient sehingga membaur lembut & tak meng-clip bayangan kartu. */
.section {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 300px at 92% -6%, rgba(37, 99, 235, .06) 0 62%, transparent 66%),
    radial-gradient(circle 220px at 6% 108%, rgba(30, 58, 138, .05) 0 60%, transparent 64%);
}
/* Variasi posisi shape antar-section agar tidak monoton */
.section:nth-of-type(even) {
  background-image:
    radial-gradient(circle 260px at 4% -8%, rgba(37, 99, 235, .05) 0 60%, transparent 64%),
    radial-gradient(circle 320px at 96% 106%, rgba(30, 58, 138, .055) 0 62%, transparent 66%);
}

/* Section selang-seling ".bg-soft": panel biru lembut + shape lingkaran lebih terasa */
.section.bg-soft {
  background-color: #eef3fd !important;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 340px at 88% -10%, rgba(37, 99, 235, .10) 0 60%, transparent 64%),
    radial-gradient(circle 260px at 10% 112%, rgba(30, 58, 138, .08) 0 58%, transparent 62%),
    radial-gradient(circle 160px at 70% 120%, rgba(37, 99, 235, .07) 0 60%, transparent 64%);
  border-top: 1px solid rgba(30, 58, 138, .06);
  border-bottom: 1px solid rgba(30, 58, 138, .06);
}
.section-title { position: relative; margin-bottom: 2rem; font-size: var(--fs-h2); }
.section-title.text-center::after { margin-left: auto; margin-right: auto; }
.section-title::after { content: ''; display: block; width: 52px; height: 3px; background: var(--accent); border-radius: 2px; margin-top: .85rem; transition: width .4s var(--ease); }
.section-title:hover::after { width: 84px; }
/* Angka & metrik tetap sans (legibilitas) */
.stat-num, .admin-stat .num, .hero-eyebrow, .eyebrow, .badge, .btn, .navbar, .news-meta, .news-cat, .news-more { font-family: 'Inter', sans-serif; }

/* Header bar halaman dalam (profil/potensi/berita/kontak) */
.page-head { position: relative; overflow: hidden; background: linear-gradient(135deg, #1e3a8a, #1d4ed8); color: #fff; padding: 3.5rem 0; }
.page-head .container { position: relative; z-index: 1; }
.page-head::after { content: ''; position: absolute; right: -60px; top: -70px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); }
.page-head::before { content: ''; position: absolute; left: 12%; bottom: -130px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.06); }

/* ===================== KARTU (sistem konsisten) ===================== */
.card-desa {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  height: 100%; overflow: hidden;
}
.card-desa:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(30, 58, 138, .16); }
/* Kilau menyapu (sheen) saat hover */
.card-desa::after {
  content: ''; position: absolute; top: 0; left: -125%; width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
  transform: skewX(-18deg); transition: left .85s var(--ease); pointer-events: none; z-index: 4;
}
.card-desa:hover::after { left: 150%; }
/* Garis aksen tumbuh dari kiri (di dasar kartu) */
.card-desa::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.card-desa:hover::before { transform: scaleX(1); }

.card-thumb { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; transition: transform .7s var(--ease); }
.card-desa:hover .card-thumb { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .card-desa, .card-desa::after, .card-desa::before, .card-thumb { transition: none; }
  .card-desa:hover { transform: none; }
  .card-desa:hover::after { left: -125%; }
}
.badge-cat { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }

/* Kartu berita elegan */
.news-card { overflow: hidden; }
.news-thumb { position: relative; overflow: hidden; }
.news-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.35), transparent 45%); opacity: 0; transition: opacity .35s var(--ease); }
.news-card:hover .news-thumb::after { opacity: 1; }
.news-cat { position: absolute; top: .85rem; left: .85rem; z-index: 2; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); color: var(--primary-dark); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .02em; padding: .3rem .7rem; border-radius: 2rem; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.news-meta { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.news-meta .bi { color: var(--primary); }
.news-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); display: inline-block; margin: 0 .25rem; }
.news-title { font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s var(--ease); }
.news-card:hover .news-title { color: var(--primary); }
.news-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .85rem; }
.news-more { font-size: var(--fs-xs); font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: .35rem; }
.news-more .bi { transition: transform .3s var(--ease); }
.news-card:hover .news-more .bi { transform: translateX(5px); }

/* Statistik */
.stat-card { text-align: center; padding: 2rem 1rem; }
.stat-card .stat-num { font-size: var(--fs-3xl); font-weight: 800; color: var(--primary); letter-spacing: -.03em; }
.stat-card i { font-size: var(--fs-3xl); color: var(--primary); display: inline-block; transition: transform .5s var(--ease-spring), color .3s var(--ease); }
.stat-card:hover i { transform: translateY(-6px) scale(1.15); color: var(--accent); }

/* Galeri */
.gallery-item img { aspect-ratio: 1/1; object-fit: cover; width: 100%; border-radius: var(--radius); cursor: pointer; transition: transform .4s var(--ease), box-shadow .3s; }
.gallery-item img:hover { transform: scale(1.04); box-shadow: var(--shadow-hover); }

/* List group & tabel */
.list-group-item { transition: background .2s, transform .2s var(--ease); }
.list-group-item:hover { background: var(--primary-soft); transform: translateX(4px); }
.table-hover tbody tr { transition: background .2s; }
.nav-pills .nav-link { color: var(--muted); font-weight: 600; transition: all .25s var(--ease); }
.nav-pills .nav-link.active { background: var(--primary); }

/* Footer */
.site-footer { background: var(--dark); color: #93a0ba; position: relative; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary)); background-size: 200% 100%; animation: footerGlow 8s linear infinite; }
@keyframes footerGlow { to { background-position: 200% 0; } }
.footer-top { padding: 5rem 0 3rem; position: relative; overflow: hidden; }
.footer-top::after { content: ''; position: absolute; right: -100px; bottom: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .14), transparent 68%); pointer-events: none; }
.footer-top .container { position: relative; z-index: 1; }
.footer-brand .brand-badge { width: 42px; height: 42px; font-size: var(--fs-lg); }
.footer-desc { color: #838fa8; font-size: var(--fs-base); max-width: 340px; line-height: 1.85; }
.site-footer h6 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .15em; text-transform: uppercase; color: #e4e8f2; margin-bottom: 1.25rem; }
.footer-links li, .footer-contact li { margin-bottom: .75rem; }
.footer-links a { color: #93a0ba; display: inline-flex; align-items: center; transition: color .25s var(--ease); }
.footer-links a::before { content: ''; width: 0; height: 1px; background: var(--accent); transition: width .3s var(--ease), margin-right .3s var(--ease); }
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { width: 16px; margin-right: 9px; }
.footer-contact li { display: flex; gap: .7rem; color: #93a0ba; line-height: 1.65; }
.footer-contact .bi { color: var(--accent); margin-top: .15rem; flex-shrink: 0; }
.footer-contact a { color: #93a0ba; transition: color .25s var(--ease); }
.footer-contact a:hover { color: #fff; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; color: #c3ccdf; font-size: var(--fs-md); transition: transform .3s var(--ease-spring), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.footer-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-4px); box-shadow: 0 10px 22px rgba(30, 58, 138, .45); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 1.4rem 0; }
.footer-bottom, .footer-bottom a { color: #7b879f; }
.footer-bottom a { transition: color .25s var(--ease); }
.footer-bottom a:hover { color: #fff; }
.footer-top-btn { display: inline-flex; align-items: center; gap: .1rem; }
.footer-top-btn .bi { transition: transform .25s var(--ease); }
.footer-top-btn:hover .bi { transform: translateY(-3px); }

/* Empty & error state */
.state-box { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.state-box i { font-size: var(--fs-4xl); display: block; margin-bottom: .5rem; opacity: .45; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, #eef2f7 25%, #f6f9fc 37%, #eef2f7 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius); }

/* Animasi masuk untuk konten yang di-render AJAX (berita, galeri) */
#beritaList > [class*="col"], #homeBerita > [class*="col"], #galeriList > [class*="col"],
#homeGaleri > [class*="col"], #galleryGrid > [class*="col"] { animation: fadeUp .5s var(--ease) both; }
#beritaList > [class*="col"]:nth-child(n+4) { animation-delay: .06s; }
#beritaList > [class*="col"]:nth-child(n+7) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  #beritaList > [class*="col"], #homeBerita > [class*="col"], #galeriList > [class*="col"],
  #homeGaleri > [class*="col"], #galleryGrid > [class*="col"] { animation: none; }
}

/* ===================== ADMIN ===================== */
.admin-wrap { display: flex; min-height: 100vh; }
.admin-sidebar { width: 250px; background: var(--primary-dark); color: #c7d7f5; flex-shrink: 0; transition: margin-left .3s var(--ease); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-sidebar .brand { padding: 1.15rem 1.25rem; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.admin-sidebar a { display: flex; align-items: center; gap: .65rem; padding: .75rem 1.25rem; color: #c7d7f5; font-weight: 500; position: relative; transition: background .2s, padding-left .2s var(--ease), color .2s; }
.admin-sidebar a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #fff; transform: scaleY(0); transition: transform .25s var(--ease); }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255, 255, 255, .12); color: #fff; padding-left: 1.6rem; }
.admin-sidebar a.active::before { transform: scaleY(1); }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--line); padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; }
.admin-content { padding: 1.75rem; animation: fadeUp .4s var(--ease); }
.admin-collapsed .admin-sidebar { margin-left: -250px; }

@media (max-width: 991.98px) {
  .admin-sidebar { position: fixed; z-index: 1040; margin-left: -250px; height: 100vh; }
  .admin-open .admin-sidebar { margin-left: 0; }
  .admin-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1039; animation: pageIn .25s; }
}

.admin-stat { border-left: 4px solid var(--primary); }
.admin-stat .num { font-size: var(--fs-3xl); font-weight: 800; color: var(--primary); }
/* Panel tabel admin tenang (tanpa lift/sheen); kartu metrik & galeri tetap animatif */
.admin-content .card-desa::after, .admin-content .card-desa::before { content: none; }
.admin-content .card-desa:hover { transform: none; box-shadow: var(--shadow-md); border-color: var(--line); }
.admin-content .admin-stat:hover,
.admin-content #galleryGrid .card-desa:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

/* ===================== ADMIN — PENYEMPURNAAN ELEGAN =====================
   Tujuan: tampilan modern & ringkas, tipografi sans yang lebih kecil.
   (blok ini sengaja di akhir agar meng-override aturan admin di atas) */

/* Tipografi dasar admin: sans, lebih kecil & rapat */
.admin-wrap { font-size: var(--fs-sm); }
.admin-wrap h1, .admin-wrap h2, .admin-wrap h3,
.admin-wrap h4, .admin-wrap h5, .admin-wrap h6 {
  font-family: 'Inter', sans-serif; letter-spacing: -.015em; line-height: 1.3;
}
/* Judul halaman (mis. "Dashboard") — tak lagi serif besar */
.admin-content > h4 { font-size: var(--fs-md); font-weight: 700; color: var(--dark); margin-bottom: 1.25rem; }
/* Judul kartu menjadi label kecil kapital yang elegan */
.admin-content .card-desa h6 {
  font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 1rem;
}

/* Sidebar: item aktif berupa "pill" membulat, tanpa lompatan padding */
.admin-sidebar { width: 240px; background: linear-gradient(180deg, #172554 0%, #101838 100%); color: #9fb0d4; }
.admin-collapsed .admin-sidebar { margin-left: -240px; }
.admin-sidebar .brand { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em; padding: 1.1rem 1.2rem; }
.admin-sidebar nav { padding: .55rem .6rem; }
.admin-sidebar a { margin-bottom: .15rem; padding: .55rem .75rem; border-radius: .6rem; font-size: var(--fs-sm); font-weight: 500; gap: .7rem; color: #9fb0d4; }
.admin-sidebar a i { font-size: var(--fs-md); width: 1.15rem; text-align: center; opacity: .85; }
.admin-sidebar a::before { display: none; }
.admin-sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; padding-left: .75rem; }
.admin-sidebar a.active { background: rgba(59, 130, 246, .22); color: #fff; padding-left: .75rem; box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .18); }
.admin-sidebar a.active i { color: #93c5fd; opacity: 1; }
@media (max-width: 991.98px) { .admin-sidebar { margin-left: -240px; } }

/* Topbar: kaca (glass) tipis, kontrol lebih kecil */
.admin-topbar { padding: .55rem 1.25rem; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(160%) blur(8px); }
.admin-topbar .btn { font-size: var(--fs-xs); }

/* Kartu & metrik: sudut lebih halus, aksen kiri tebal diganti tampilan bersih */
.admin-content .card-desa { border-radius: .8rem; }
.admin-content .admin-stat { border-left: 0; padding: 1.05rem 1.15rem; }
.admin-content .admin-stat small { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.admin-content .admin-stat .num { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; color: var(--primary); }

/* Tabel: header kapital tipis, baris lega-ringkas, hover lembut */
.admin-content .table { font-size: var(--fs-sm); margin-bottom: .5rem; }
.admin-content .table > thead th {
  background: transparent; color: var(--muted); font-weight: 700;
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line); padding: .55rem .75rem;
}
.admin-content .table > tbody > tr > td { padding: .7rem .75rem; vertical-align: middle; border-color: var(--line); }
.admin-content .table.table-hover > tbody > tr:hover > * { background: var(--primary-soft); }

/* Form & tombol area konten: ukuran proporsional */
.admin-content .form-control, .admin-content .form-select { font-size: var(--fs-sm); }
.admin-content .btn { font-size: var(--fs-xs); }
.admin-content .btn-sm { font-size: var(--fs-2xs); }
.admin-content .badge { font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .02em; padding: .34em .6em; }

/* Modal: judul sans yang ringkas */
.modal-title { font-family: 'Inter', sans-serif; font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; }

/* Toast & loading */
.toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.toast { animation: fadeDown .3s var(--ease); }
.loading-row td { text-align: center; padding: 2rem; color: var(--muted); }
.btn .spinner-border { width: 1rem; height: 1rem; }

/* Modal & post body */
.modal-content { border: none; border-radius: var(--radius-lg); }
.post-body { line-height: 1.9; }

/* Kartu "Berita Lainnya" (sidebar, horizontal & ringkas) */
.related-card { height: auto !important; }
.related-thumb { width: 76px; height: 76px; border-radius: .65rem; overflow: hidden; flex-shrink: 0; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.related-card:hover .related-thumb img { transform: scale(1.08); }
.related-body { min-width: 0; }
.related-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--fs-base); line-height: 1.35; color: var(--dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s var(--ease); }
.related-card:hover .related-title { color: var(--primary); }
.related-date { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .3rem; }

/* ===================== FOKUS FORM (tanpa garis biru) ===================== */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.input-group:focus-within .form-control,
input:focus, textarea:focus, select:focus {
  border-color: #b4bac6;              /* netral, bukan biru */
  box-shadow: none !important;         /* hapus cincin biru bootstrap */
  outline: none;
}
/* Checkbox/radio: fokus & centang memakai navy tema, bukan biru terang bawaan */
.form-check-input:focus { border-color: #b4bac6; box-shadow: none !important; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
/* Fokus keyboard tetap terlihat namun netral (aksesibilitas) */
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(11, 18, 32, .22);
  outline-offset: 1px;
}