/* ============ SISTEM INFORMASI DESA — Public Styles v2 (3D Premium) ============ */
:root{
  --bg:#f5f8f6; --surface:#ffffff; --surface-2:#ecf3ef;
  --text:#132019; --text-muted:#5b6f65; --border:rgba(19,32,25,.09);
  --glass:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.85);
  --shadow-1:0 6px 24px -8px rgba(11,61,46,.14);
  --shadow-2:0 12px 32px -12px rgba(11,61,46,.2), 0 2px 6px -2px rgba(11,61,46,.08);
  --shadow-3d:0 24px 55px -20px rgba(11,61,46,.32), 0 8px 18px -8px rgba(11,61,46,.12), inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-glow:0 10px 34px -8px color-mix(in srgb, var(--c-primary) 45%, transparent);
  --ease-premium:cubic-bezier(.25,.8,.25,1);
}
[data-theme="dark"]{
  --bg:#0b1411; --surface:#111f19; --surface-2:#0e1a15;
  --text:#e6efe9; --text-muted:#93a89d; --border:rgba(230,239,233,.1);
  --glass:rgba(15,26,21,.72); --glass-border:rgba(255,255,255,.09);
  --glass-strong:rgba(15,26,21,.88);
  --shadow-1:0 6px 24px -8px rgba(0,0,0,.5);
  --shadow-2:0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-3d:0 24px 55px -20px rgba(0,0,0,.7), 0 8px 18px -8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
*{-webkit-tap-highlight-color:transparent}
::selection{background:var(--c-accent);color:#1b1b1b}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden}
h1,h2,h3,h4,h5,.font-heading{font-family:var(--font-heading);font-weight:700;color:var(--text)}
p{color:var(--text)}
a{color:var(--c-primary)}
img{max-width:100%}

/* scrollbar halus */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--c-primary) 45%, var(--bg));border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--c-primary)}

/* ===== Buttons ===== */
.btn{transition:transform .22s var(--ease-premium), box-shadow .22s var(--ease-premium), background-color .22s, filter .22s;position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn-style-pill .btn{border-radius:999px}
.btn-style-sharp .btn{border-radius:6px}
.btn-primary{
  --bs-btn-bg:var(--c-primary);--bs-btn-border-color:transparent;
  --bs-btn-hover-bg:var(--c-primary);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:var(--c-secondary);--bs-btn-active-border-color:transparent;
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 88%, #fff) 0%, var(--c-primary) 45%, var(--c-secondary) 130%);
  box-shadow:0 8px 22px -8px color-mix(in srgb, var(--c-primary) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px color-mix(in srgb, var(--c-primary) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.3);filter:brightness(1.05)}
.btn-outline-primary{--bs-btn-color:var(--c-primary);--bs-btn-border-color:var(--c-primary);--bs-btn-hover-bg:var(--c-primary);--bs-btn-hover-border-color:var(--c-primary);--bs-btn-active-bg:var(--c-primary)}
.btn-outline-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}
.btn-accent{background:linear-gradient(135deg,#f4c869 0%, var(--c-accent) 60%, color-mix(in srgb, var(--c-accent) 75%, #8a5a00) 140%);border:none;color:#231a05;font-weight:700;box-shadow:0 8px 22px -8px rgba(232,180,76,.65), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-accent:hover{transform:translateY(-1px);color:#231a05;box-shadow:0 14px 32px -8px rgba(232,180,76,.75), inset 0 1px 0 rgba(255,255,255,.45);filter:brightness(1.04)}
/* shine sweep */
.btn-primary::after,.btn-accent::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-22deg);transition:left .55s var(--ease-premium);pointer-events:none}
.btn-primary:hover::after,.btn-accent:hover::after{left:130%}
.btn-icon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:transform .2s,box-shadow .2s}
.btn-icon:hover{transform:scale(1.08) rotate(8deg);box-shadow:var(--shadow-1)}
.text-primary-c{color:var(--c-primary)!important}
.bg-primary-c{background:var(--c-primary)!important}

/* ===== Navbar ===== */
.site-navbar{padding:.65rem 0;transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease}
.navbar-glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--glass-border)}
.navbar-solid{background:var(--surface);border-bottom:1px solid var(--border)}
.navbar-gradient{background:linear-gradient(120deg,var(--c-secondary),var(--c-primary))}
.navbar-gradient .nav-link,.navbar-gradient .brand-text strong{color:#fff!important}
.site-navbar.scrolled{box-shadow:var(--shadow-2);padding:.45rem 0}
.nav-logo{height:46px;width:46px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.14));transition:transform .3s var(--ease-premium)}
.navbar-brand:hover .nav-logo{transform:scale(1.06) rotate(-3deg)}
.nav-logo-fallback{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 6px 14px -4px color-mix(in srgb,var(--c-primary) 55%,transparent)}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{font-family:var(--font-heading);font-size:1.05rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text small{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-navbar .nav-link{color:var(--text);font-weight:500;padding:.5rem .85rem;border-radius:10px;transition:background-color .18s,color .18s;position:relative}
.site-navbar .nav-link::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-premium)}
.site-navbar .nav-link:hover::after,.site-navbar .nav-link.active::after{transform:scaleX(1)}
.site-navbar .nav-link:hover,.site-navbar .nav-link.active{color:var(--c-primary)}
.navbar-toggler{border:none;color:var(--text)}
.navbar-toggler:focus{box-shadow:none}
.dropdown-menu-modern{border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow-3d);background:var(--glass-strong);backdrop-filter:blur(20px);padding:.5rem;min-width:230px;animation:dropIn .22s var(--ease-premium)}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.dropdown-menu-modern .dropdown-item{border-radius:10px;padding:.55rem .8rem;color:var(--text);transition:background-color .16s,color .16s,padding-left .16s}
.dropdown-menu-modern .dropdown-item:hover{background:color-mix(in srgb, var(--c-primary) 10%, transparent);color:var(--c-primary);padding-left:1rem}

/* ===== HERO (banner sinematik "Fajar di Desa" — palet TETAP, tidak ikut warna tema admin) ===== */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#060d1f 0%,#0a2138 32%,#0f3352 60%,#164a6b 85%,#1c5a7c 100%);
  background-size:100% 135%;
  animation:skyBreath 22s ease-in-out infinite;
}
@keyframes skyBreath{0%,100%{background-position:50% 0%}50%{background-position:50% 45%}}
@keyframes heroGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;will-change:transform;animation:kenburns 26s ease-in-out infinite alternate;z-index:0;mix-blend-mode:luminosity}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,1.5%)}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:56px 56px,56px 56px}}
/* bintang berkelip (2 lapis, kecepatan beda) */
.hero-stars{position:absolute;inset:0 0 34% 0;z-index:0;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px,#fff,transparent),
    radial-gradient(1.1px 1.1px at 120px 86px,rgba(255,255,255,.9),transparent),
    radial-gradient(1.9px 1.9px at 210px 42px,#ffe9c4,transparent),
    radial-gradient(1px 1px at 305px 128px,#fff,transparent),
    radial-gradient(1.4px 1.4px at 382px 64px,rgba(255,255,255,.85),transparent),
    radial-gradient(1.2px 1.2px at 66px 150px,rgba(255,244,214,.8),transparent);
  background-size:430px 190px;background-repeat:repeat;animation:twinkle 5.5s ease-in-out infinite}
.hero-stars.s2{background-size:590px 260px;animation-duration:8.5s;animation-delay:-3s;opacity:.5}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.3}}
/* cahaya fajar di ufuk */
.hero-glow{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:76vw;height:44vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center bottom, rgba(255,193,110,.55) 0%, rgba(255,158,74,.22) 42%, transparent 72%);
  filter:blur(28px);animation:glowPulse 8s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
/* kabut / awan tipis bergerak */
.hero-clouds{position:absolute;height:20%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.13), transparent 70%);
  filter:blur(24px);animation:cloudDrift linear infinite;will-change:transform}
.hero-clouds.c1{top:15%;left:-34%;width:56%;animation-duration:64s}
.hero-clouds.c2{top:33%;left:-28%;width:42%;height:14%;opacity:.7;animation-duration:88s;animation-delay:-38s}
@keyframes cloudDrift{from{transform:translateX(-8vw)}to{transform:translateX(175vw)}}
/* burung terbang melintas */
.hero-birds{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-birds span{position:absolute;left:-6vw;width:26px;height:9px;opacity:0;animation:birdFly linear infinite}
.hero-birds span::before,.hero-birds span::after{content:"";position:absolute;top:0;width:13px;height:9px;
  border-top:2.5px solid rgba(228,240,235,.75);border-radius:100% 100% 0 0/100% 100% 0 0;transform-origin:100% 0;animation:flapL .5s ease-in-out infinite alternate}
.hero-birds span::after{left:12px;transform-origin:0 0;animation-name:flapR}
@keyframes flapL{from{transform:rotate(-14deg)}to{transform:rotate(22deg)}}
@keyframes flapR{from{transform:rotate(14deg)}to{transform:rotate(-22deg)}}
.hero-birds span:nth-child(1){top:24%;animation-duration:24s;animation-delay:2s}
.hero-birds span:nth-child(2){top:30%;transform:scale(.7);animation-duration:30s;animation-delay:9s}
.hero-birds span:nth-child(3){top:19%;transform:scale(.55);animation-duration:27s;animation-delay:16s}
@keyframes birdFly{0%{transform:translate(0,0);opacity:0}4%{opacity:.9}25%{transform:translate(28vw,-16px)}50%{transform:translate(56vw,10px)}75%{transform:translate(84vw,-12px)}96%{opacity:.9}100%{transform:translate(112vw,4px);opacity:0}}
/* siluet perbukitan berlapis (parallax lembut) */
.hero-hills{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none}
.hero-hills svg{position:absolute;bottom:0;left:-2%;width:104%;display:block}
.hero-hills .h-far{height:220px;fill:#0e2f4a;opacity:.85;animation:hillSway 38s ease-in-out infinite alternate}
.hero-hills .h-mid{height:170px;fill:#092239;opacity:.95;animation:hillSway 30s ease-in-out infinite alternate-reverse}
.hero-hills .h-near{height:120px;fill:#04121f;animation:hillSway 46s ease-in-out infinite alternate}
@keyframes hillSway{from{transform:translateX(0)}to{transform:translateX(-1.6%)}}
/* kunang-kunang */
.hero-fireflies{position:absolute;inset:40% 0 0 0;z-index:1;pointer-events:none}
.hero-fireflies i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd98a;box-shadow:0 0 12px 3px rgba(255,205,110,.7);opacity:0;animation:firefly ease-in-out infinite}
.hero-fireflies i:nth-child(1){left:12%;top:55%;animation-duration:9s}
.hero-fireflies i:nth-child(2){left:26%;top:70%;animation-duration:12s;animation-delay:-4s}
.hero-fireflies i:nth-child(3){left:44%;top:62%;animation-duration:10s;animation-delay:-7s;transform:scale(.7)}
.hero-fireflies i:nth-child(4){left:60%;top:74%;animation-duration:13s;animation-delay:-2s}
.hero-fireflies i:nth-child(5){left:74%;top:58%;animation-duration:11s;animation-delay:-6s;transform:scale(.8)}
.hero-fireflies i:nth-child(6){left:86%;top:68%;animation-duration:14s;animation-delay:-9s}
.hero-fireflies i:nth-child(7){left:34%;top:80%;animation-duration:12s;animation-delay:-10s;transform:scale(.6)}
.hero-fireflies i:nth-child(8){left:52%;top:52%;animation-duration:15s;animation-delay:-5s}
@keyframes firefly{0%,100%{opacity:0;transform:translate(0,0)}12%{opacity:.95}45%{opacity:.5;transform:translate(30px,-38px)}70%{opacity:.9;transform:translate(-14px,-64px)}90%{opacity:0;transform:translate(10px,-84px)}}
/* vignette halus agar teks makin terbaca */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(4,10,8,.38) 100%)}
.hero-content{position:relative;z-index:2;color:#fff;padding-block:6.5rem 6rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);padding:.45rem 1.1rem;border-radius:999px;font-size:.85rem;letter-spacing:.4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -8px rgba(0,0,0,.4)}
.hero-badge i{color:var(--c-accent)}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.4rem);color:#fff;font-weight:800;letter-spacing:-1px;text-shadow:0 6px 30px rgba(0,0,0,.28)}
.hero .tagline{font-size:clamp(1rem,2vw,1.25rem);color:rgba(255,255,255,.88);max-width:640px}
.hero-quick{display:flex;flex-wrap:wrap;gap:.7rem}
.hero-quick .btn{padding:.72rem 1.45rem;font-weight:600}
.hero-quick .btn-glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.hero-quick .btn-glass:hover{background:rgba(255,255,255,.24);transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25)}
.hero-scroll{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);color:#fff;opacity:.75;animation:bounce 2s infinite;z-index:2}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
/* gelombang pembatas hero */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
.hero-wave svg{display:block;width:100%;height:70px}
.hero-wave path{fill:var(--bg)}

/* ===== HERO — MODE TERANG: "Langit Cerah" (tanpa matahari, tanpa warna primary/secondary) ===== */
[data-theme="light"] .hero{background:linear-gradient(180deg,#3f9be0 0%,#7cc4f0 34%,#c9e8fb 64%,#ecf5fd 100%);background-size:100% 135%}
[data-theme="light"] .hero-stars{display:none}
[data-theme="light"] .hero-glow{display:none}
[data-theme="light"] .hero-clouds{background:radial-gradient(ellipse at center, rgba(255,255,255,.92), rgba(255,255,255,0) 70%);filter:blur(14px);opacity:.95}
[data-theme="light"] .hero-clouds.c2{opacity:.75}
[data-theme="light"] .hero-birds span::before,[data-theme="light"] .hero-birds span::after{border-top-color:rgba(26,46,66,.6)}
[data-theme="light"] .hero-hills .h-far{fill:#b9d7ee;opacity:.9}
[data-theme="light"] .hero-hills .h-mid{fill:#8ab4d9;opacity:.97}
[data-theme="light"] .hero-hills .h-near{fill:#5b87ad}
[data-theme="light"] .hero-fireflies i{background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.85)}
[data-theme="light"] .hero::after{background:radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(20,45,70,.14) 100%)}
[data-theme="light"] .hero-content{color:#0d2438}
[data-theme="light"] .hero h1{color:#0d2438;text-shadow:0 3px 18px rgba(255,255,255,.55)}
[data-theme="light"] .hero .tagline{color:rgba(13,36,56,.82)}
[data-theme="light"] .hero-badge{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85);color:#0d2438;box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px -8px rgba(30,60,90,.25)}
[data-theme="light"] .hero-badge i{color:#d99a1f}
[data-theme="light"] .hero-quick .btn-glass{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85);color:#123c5a;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
[data-theme="light"] .hero-quick .btn-glass:hover{background:rgba(255,255,255,.88);color:#0d2438}
[data-theme="light"] .hero-scroll{color:#23506e}
[data-theme="light"] .hero .hero-bg-img{opacity:.15;mix-blend-mode:normal}

/* ===== Stat cards ===== */
.stat-strip{margin-top:-76px;position:relative;z-index:3}
.stat-card{background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-border);border-radius:var(--radius);padding:1.4rem 1rem;text-align:center;box-shadow:var(--shadow-3d);transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);height:100%;position:relative;overflow:hidden}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent));opacity:0;transition:opacity .3s}
.stat-card:hover{transform:scale(1.03);box-shadow:0 28px 60px -20px color-mix(in srgb,var(--c-primary) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.6)}
.stat-card:hover::before{opacity:1}
.stat-card .icon{width:52px;height:52px;margin:0 auto .6rem;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));box-shadow:0 10px 22px -8px color-mix(in srgb,var(--c-primary) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .3s var(--ease-premium)}
.stat-card:hover .icon{transform:scale(1.1) rotate(-6deg)}
.stat-card .num{font-family:var(--font-heading);font-size:1.7rem;font-weight:800;color:var(--text)}
.stat-card .label{font-size:.76rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px}

/* ===== Sections ===== */
.section{padding:5rem 0}
.section-alt{background:var(--surface-2);position:relative}
.section-head{margin-bottom:2.8rem}
.section-head .eyebrow{color:var(--c-primary);font-weight:700;text-transform:uppercase;letter-spacing:2.4px;font-size:.78rem;display:inline-flex;align-items:center;gap:.6rem}
.section-head .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent))}
.section-head.text-center .eyebrow::after{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c-accent),var(--c-primary))}
.section-head h2{font-size:clamp(1.65rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.5px}
.section-head p{color:var(--text-muted);max-width:640px}

/* ===== 3D Cards ===== */
.card-3d{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.5);transition:transform .32s var(--ease-premium), box-shadow .32s var(--ease-premium), border-color .32s;overflow:hidden;height:100%;position:relative}
[data-theme="dark"] .card-3d{box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.04)}
.card-3d::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-22deg);transition:left .6s var(--ease-premium);pointer-events:none;z-index:1}
.card-3d:hover::after{left:135%}
.card-3d:hover{transform:scale(1.02);box-shadow:var(--shadow-3d);border-color:color-mix(in srgb,var(--c-primary) 28%,var(--border))}
.card-3d .card-body{padding:1.5rem}
.card-3d.card-body{padding:1.5rem}
.icon-tile{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s var(--ease-premium), background-color .3s, color .3s, box-shadow .3s}
.card-3d:hover .icon-tile{transform:scale(1.1) rotate(-5deg);background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));color:#fff;box-shadow:0 10px 22px -8px color-mix(in srgb,var(--c-primary) 60%,transparent)}
.glass-panel{background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow-3d)}

/* ===== News ===== */
.news-card img,.news-thumb{width:100%;height:200px;object-fit:cover;transition:transform .5s var(--ease-premium)}
.news-card:hover img{transform:scale(1.07)}
.news-thumb-fallback{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 25%,var(--surface-2)),var(--surface-2));color:var(--c-primary);font-size:2.4rem}
.news-meta{font-size:.78rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:.9rem}
.badge-cat{background:color-mix(in srgb,var(--c-primary) 14%, transparent);color:var(--c-primary);font-weight:600;border-radius:999px;padding:.35em .9em;font-size:.72rem}
.news-title a{color:var(--text);text-decoration:none;transition:color .18s;background-image:linear-gradient(90deg,var(--c-primary),var(--c-primary));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;transition:color .2s,background-size .3s var(--ease-premium)}
.news-title a:hover{color:var(--c-primary);background-size:100% 2px}
.content-html{line-height:1.85;font-size:1.02rem}
.content-html img{border-radius:var(--radius);margin:1rem 0}
.content-html h2,.content-html h3{margin-top:1.6rem}
.content-html table{display:block;max-width:100%;overflow-x:auto}

/* ===== Officials ===== */
.official-card{text-align:center}
.official-photo{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--radius) - 4px);background:var(--surface-2)}
.official-photo .photo-bg{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .5s var(--ease-premium)}
.official-card:hover .photo-bg{transform:scale(1.06)}
.official-photo .photo-shield{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.55))}
.official-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.protected-img,.official-photo{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.official-name{font-weight:700;margin:.9rem 0 0;font-size:1rem}
.official-role{color:var(--c-primary);font-size:.85rem;font-weight:600}
.official-extra{font-size:.78rem;color:var(--text-muted)}

/* ===== Gallery ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.gallery-item{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;display:block;box-shadow:var(--shadow-1);transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium)}
.gallery-item:hover{transform:scale(1.02);box-shadow:var(--shadow-3d)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-premium)}
.gallery-item:hover img{transform:scale(1.09)}
.gallery-item .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.68));display:flex;align-items:flex-end;padding:.9rem;color:#fff;font-size:.85rem;font-weight:600;opacity:0;transition:opacity .28s}
.gallery-item:hover .overlay{opacity:1}
.video-thumb{position:relative}
.video-thumb .play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff;background:rgba(0,0,0,.3);z-index:2}

/* ===== Timeline ===== */
.timeline{position:relative;padding-left:1.8rem}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(var(--c-primary),var(--c-accent))}
.timeline-item{position:relative;padding-bottom:1.8rem}
.timeline-item::before{content:"";position:absolute;left:-1.53rem;top:6px;width:15px;height:15px;border-radius:50%;background:var(--c-accent);border:3px solid var(--surface);box-shadow:0 0 0 3px var(--c-primary)}

/* ===== Tables ===== */
.table-modern{--bs-table-bg:transparent;color:var(--text)}
.table-modern th{font-size:.75rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);border-color:var(--border)}
.table-modern td{border-color:var(--border);vertical-align:middle;color:var(--text)}
.progress{background:var(--surface-2)}
.progress-bar{background:linear-gradient(90deg,var(--c-primary),var(--c-accent))}

/* ===== Forms ===== */
.form-control,.form-select{background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:12px;padding:.65rem .9rem;transition:border-color .2s, box-shadow .2s}
.form-control:focus,.form-select:focus{border-color:var(--c-primary);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--c-primary) 18%, transparent);background:var(--surface);color:var(--text)}
.form-label{font-weight:600;font-size:.88rem}
.form-text{color:var(--text-muted)}

/* ===== Footer ===== */
.site-footer{margin-top:4rem}
.footer-dark{background:linear-gradient(160deg,var(--c-secondary) 0%, color-mix(in srgb,var(--c-secondary) 80%, #000) 100%);color:#e8f2ec;position:relative;overflow:hidden}
.footer-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 280px at 90% 0%, color-mix(in srgb,var(--c-accent) 14%, transparent), transparent 65%);pointer-events:none}
.footer-dark .footer-title,.footer-dark h6{color:#fff}
.footer-light{background:var(--surface);border-top:1px solid var(--border)}
.footer-gradient{background:linear-gradient(135deg,var(--c-secondary),var(--c-primary));color:#eaf5ef}
.footer-heading{font-size:.8rem;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:1rem;opacity:.9}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer-links a{color:inherit;opacity:.75;text-decoration:none;transition:opacity .18s, padding-left .18s}
.footer-links a:hover{opacity:1;padding-left:4px}
.footer-contact li{display:flex;gap:.6rem;font-size:.88rem;opacity:.85}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);position:relative}
.social-links a{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;transition:transform .22s var(--ease-premium), background-color .22s}
.social-links a:hover{transform:scale(1.14) rotate(6deg);background:var(--c-accent);color:#231a05}

/* ===== Floating ===== */
.float-wa{position:fixed;right:20px;bottom:20px;z-index:1040;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 10px 26px -8px rgba(37,211,102,.6);transition:transform .2s}
.float-wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waPulse 2.2s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.float-wa:hover{transform:scale(1.1);color:#fff}
.back-to-top{position:fixed;right:24px;bottom:90px;z-index:1040;width:44px;height:44px;border-radius:50%;border:none;background:var(--c-primary);color:#fff;box-shadow:var(--shadow-1);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,visibility .25s,transform .25s}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* ===== Music player ===== */
.music-player{position:fixed;z-index:1045;bottom:20px;display:flex;align-items:center;gap:.55rem;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-border);border-radius:999px;padding:.45rem .8rem;box-shadow:var(--shadow-3d);max-width:calc(100vw - 100px)}
.music-player.pos-kanan-bawah{right:88px}
.music-player.pos-kiri-bawah{left:20px}
.music-player.pos-footer{left:50%;transform:translateX(-50%)}
.music-player button{border:none;background:transparent;color:var(--c-primary);font-size:1.15rem;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .18s}
.music-player button:hover{background:color-mix(in srgb,var(--c-primary) 12%, transparent)}
.music-player .title{font-size:.78rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.music-player input[type=range]{width:70px;accent-color:var(--c-primary)}
.music-eq{display:flex;align-items:flex-end;gap:2px;height:16px}
.music-eq span{width:3px;background:var(--c-primary);border-radius:2px;animation:eq 1s ease-in-out infinite;height:6px}
.music-eq span:nth-child(2){animation-delay:.2s}.music-eq span:nth-child(3){animation-delay:.4s}
.music-eq.paused span{animation-play-state:paused;height:4px}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}

/* ===== Event banner & effect ===== */
#event-banner .banner-inner{background:linear-gradient(90deg,var(--c-secondary),var(--c-primary),var(--c-secondary));background-size:220% 100%;animation:bannerFlow 8s linear infinite;color:#fff;text-align:center;padding:.55rem 2.6rem .55rem 1rem;font-size:.88rem;font-weight:600;position:relative}
@keyframes bannerFlow{from{background-position:0% 0}to{background-position:220% 0}}
#event-banner .banner-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:50%;width:26px;height:26px;line-height:1}
#effect-canvas{position:fixed;inset:0;pointer-events:none;z-index:1050}
.effect-close{position:fixed;top:76px;right:16px;z-index:1051;border:none;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--text);border-radius:999px;padding:.35rem .9rem;font-size:.78rem;box-shadow:var(--shadow-1)}
.event-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:1049;background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--glass-border);padding:1.3rem 2.4rem;border-radius:var(--radius);font-family:var(--font-heading);font-size:clamp(1.1rem,3vw,1.7rem);font-weight:800;color:var(--text);text-align:center;box-shadow:var(--shadow-3d);opacity:0;animation:msgIn .6s .3s forwards;pointer-events:none;max-width:90vw}
@keyframes msgIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.event-message.fade-out{animation:msgOut .5s forwards}
@keyframes msgOut{to{opacity:0;transform:translate(-50%,-60%) scale(.85)}}

/* ===== Announcement ===== */
.announce-item{border-left:4px solid var(--c-accent);background:var(--surface);border-radius:12px;padding:1rem 1.2rem;box-shadow:var(--shadow-1);transition:transform .25s var(--ease-premium), box-shadow .25s}
.announce-item:hover{transform:scale(1.012);box-shadow:var(--shadow-2)}
.announce-item.important{border-left-color:#dc3545}
.badge-important{background:#dc3545;color:#fff;border-radius:999px;font-size:.68rem;padding:.3em .8em}

/* ===== Agenda ===== */
.agenda-date{width:64px;min-width:64px;text-align:center;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));color:#fff;border-radius:14px;padding:.5rem .2rem;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--c-primary) 60%,transparent)}
.agenda-date .d{font-family:var(--font-heading);font-size:1.4rem;font-weight:800;line-height:1}
.agenda-date .m{font-size:.68rem;text-transform:uppercase;letter-spacing:1px}

/* ===== Page header ===== */
.page-header{background:linear-gradient(130deg,var(--c-secondary) 0%,var(--c-primary) 55%,color-mix(in srgb,var(--c-primary) 70%,#052017) 100%);background-size:250% 250%;animation:heroGradient 20s ease-in-out infinite;padding:5.4rem 0 3.2rem;color:#fff;position:relative;overflow:hidden}
.page-header::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;animation:gridDrift 26s linear infinite}
.page-header::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 300px at 85% 0%, rgba(255,255,255,.16), transparent 60%);pointer-events:none}
.page-header h1{color:#fff;font-size:clamp(1.7rem,4vw,2.7rem);font-weight:800;position:relative;z-index:1}
.page-header .breadcrumb{position:relative;z-index:1;--bs-breadcrumb-divider-color:rgba(255,255,255,.5)}
.page-header .breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none}
.page-header .breadcrumb-item.active{color:#fff}
.page-header p{position:relative;z-index:1}

/* ===== Misc ===== */
.avatar-fallback{background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700}
.list-check{list-style:none;padding:0}
.list-check li{padding:.4rem 0 .4rem 1.9rem;position:relative}
.list-check li::before{content:"\F26B";font-family:"bootstrap-icons";position:absolute;left:0;color:var(--c-primary)}
.sticky-sidebar{position:sticky;top:96px}
.share-btns a{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;transition:transform .18s}
.share-btns a:hover{transform:translateY(-3px);color:#fff}
.pagination{--bs-pagination-color:var(--text);--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--border);--bs-pagination-active-bg:var(--c-primary);--bs-pagination-active-border-color:var(--c-primary);--bs-pagination-hover-bg:var(--surface-2);--bs-pagination-hover-color:var(--c-primary);--bs-pagination-disabled-bg:var(--surface-2);--bs-pagination-disabled-color:var(--text-muted)}
.card{background:var(--surface);border-color:var(--border);color:var(--text)}
.text-muted{color:var(--text-muted)!important}
.accordion{--bs-accordion-bg:var(--surface);--bs-accordion-color:var(--text);--bs-accordion-border-color:var(--border);--bs-accordion-btn-color:var(--text);--bs-accordion-active-bg:color-mix(in srgb,var(--c-primary) 10%,transparent);--bs-accordion-active-color:var(--c-primary)}
.doc-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.leaflet-container{border-radius:var(--radius);z-index:1}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:skel 1.4s infinite}
@keyframes skel{to{background-position:-200% 0}}

/* =================== RESPONSIVE =================== */
@media (max-width: 991.98px){
  .site-navbar .navbar-collapse{background:var(--glass-strong);backdrop-filter:blur(20px);border-radius:18px;padding:.8rem;margin-top:.6rem;box-shadow:var(--shadow-3d);border:1px solid var(--glass-border)}
  .site-navbar .nav-link::after{display:none}
  .stat-strip{margin-top:-52px}
  .hero{min-height:82vh}
  .hero-content{padding-block:5.5rem 5rem}
  .section{padding:4rem 0}
  .sticky-sidebar{position:static;top:auto}
}
@media (max-width: 767.98px){
  .hero{min-height:74vh}
  .hero-wave svg{height:44px}
  .hero-scroll{bottom:48px}
  .hero-hills .h-far{height:130px}
  .hero-hills .h-mid{height:100px}
  .hero-hills .h-near{height:72px}
  .stat-card{padding:1rem .7rem}
  .stat-card .icon{width:44px;height:44px;font-size:1.15rem;border-radius:13px}
  .stat-card .num{font-size:1.3rem}
  .stat-card .label{font-size:.66rem}
  .news-card img,.news-thumb,.news-thumb-fallback{height:170px}
  .card-3d .card-body,.card-3d.card-body{padding:1.15rem}
  .section-head{margin-bottom:2rem}
  .footer-heading{margin-bottom:.7rem}
  .page-header{padding:4.4rem 0 2.4rem}
}
@media (max-width: 575.98px){
  .section{padding:3rem 0}
  .brand-text strong{font-size:.92rem;max-width:170px}
  .brand-text small{max-width:170px}
  .nav-logo,.nav-logo-fallback{height:40px;width:40px}
  .hero-content{padding-block:4.5rem 4.5rem}
  .hero-quick{gap:.5rem}
  .hero-quick .btn{padding:.55rem 1rem;font-size:.85rem;flex:1 1 calc(50% - .5rem);text-align:center;white-space:nowrap}
  .hero-quick .btn:first-child{flex:1 1 100%}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .news-card img,.news-thumb,.news-thumb-fallback{height:150px}
  .agenda-date{width:54px;min-width:54px}
  .agenda-date .d{font-size:1.15rem}
  .music-player .title{max-width:76px}
  .music-player input[type=range]{display:none}
  .float-wa{width:50px;height:50px;font-size:1.5rem;right:14px;bottom:14px}
  .back-to-top{right:17px;bottom:76px;width:40px;height:40px}
  .music-player.pos-kanan-bawah{right:74px}
  .effect-close{top:66px;right:10px}
  .footer-bottom{text-align:center;justify-content:center!important}
  .official-name{font-size:.88rem}
  .official-role{font-size:.76rem}
  .hero-clouds,.hero-birds{display:none}
  .hero-fireflies i:nth-child(n+5){display:none}
  .hero-glow{width:120vw;filter:blur(20px)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero,.page-header{animation:none}
}