:root{--navy:#0b2a5b;--navy2:#071c40;--mid:#1b4c9c;--soft:#f3f6fb;--line:#dbe3f0}
body{background:#fff;color:#1f2937;font-family:'Segoe UI',Roboto,sans-serif}
a{color:var(--navy)}a:hover{color:var(--mid)}
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.brand-1{font-weight:800;font-size:1.7rem;color:var(--navy);line-height:1}
.brand-2{font-weight:600;color:var(--navy);font-size:.95rem}.brand-3{color:#6b7280;font-size:.8rem}
.main-nav{background:var(--navy);padding:0;box-shadow:0 3px 10px rgba(11,42,91,.25)}
.main-nav .nav-link{color:#fff!important;padding:.95rem 1.1rem;font-weight:500}
.main-nav .nav-link:hover,.main-nav .nav-item.show>.nav-link{background:var(--navy2)}
.dropdown-menu{border:0;border-top:3px solid var(--mid);border-radius:0;margin-top:0;box-shadow:0 10px 24px rgba(11,42,91,.2)}
.dropdown-item{color:var(--navy);padding:.5rem 1.2rem}.dropdown-item:hover,.dropdown-item:focus{background:var(--soft);color:var(--navy)}
.dropdown-header{color:#6b7280}
.dropend>.dropdown-toggle::after{float:right;margin-top:.5em}
@media(min-width:992px){
 .main-nav .dropdown:hover>.dropdown-menu,.main-nav .dropend:hover>.dropdown-menu{display:block}
 .main-nav .dropend>.dropdown-menu{top:-3px;left:100%}}
@media(max-width:991px){.dropend>.dropdown-menu{margin-left:1rem;border:0;box-shadow:none}.brand-2{font-size:.8rem}}
.hero{background:linear-gradient(120deg,var(--navy2),var(--navy) 55%,var(--mid));color:#fff;padding:80px 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-110px;top:-130px;width:440px;height:440px;border-radius:50%;background:rgba(255,255,255,.06)}
.hero::before{content:"";position:absolute;right:140px;bottom:-160px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero .container{position:relative;z-index:1}.hero h1{font-weight:800}.hero .lead{opacity:.9}
.btn-bnj{background:var(--navy);color:#fff;border:0;border-radius:4px}.btn-bnj:hover{background:var(--mid);color:#fff}
.btn-light-bnj{background:#fff;color:var(--navy);font-weight:600;border:0}.btn-light-bnj:hover{background:var(--soft);color:var(--navy)}
.sec{padding:50px 0}.sec.alt{background:var(--soft)}
.sec-title{color:var(--navy);font-weight:700;border-left:5px solid var(--navy);padding-left:12px;margin-bottom:1.3rem}
.card-info{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:6px;box-shadow:0 2px 12px rgba(11,42,91,.08);height:100%}
.card-info h4{color:var(--navy);font-weight:700}
.ketua-box{background:var(--navy);color:#fff;border-radius:6px;text-align:center;padding:30px 20px;height:100%}
.ketua-box i{font-size:6rem;opacity:.9}
.list-post .item{padding:.85rem 0;border-bottom:1px solid var(--line)}.list-post .item:last-child{border:0}
.list-post a{text-decoration:none;font-weight:600}.list-post a:hover{text-decoration:underline}
.date{font-size:.8rem;color:#6b7280}
.badge-date{background:var(--navy);color:#fff;font-size:.75rem;padding:.3em .6em;border-radius:3px}
footer{background:var(--navy2);border-top:4px solid var(--mid)}
.content-box{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:6px;padding:30px;box-shadow:0 2px 12px rgba(11,42,91,.08)}
.content-box h2,.content-box h3,.content-box h4,.content-box h5{color:var(--navy)}
.text-danger{color:var(--navy)!important}
.thumb{width:110px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0}
.ketua-foto{width:100%;max-height:300px;object-fit:cover;border-radius:6px;border:3px solid rgba(255,255,255,.4)}
.post-foto{max-width:100%;max-height:420px;border-radius:6px;margin-bottom:1rem}
.table thead th{color:var(--navy)}

.survey-form .form-select,.survey-form .form-control{border-radius:10px;padding:.65rem .9rem}
.req{color:#c00}.rate{display:flex;gap:.4rem}
.rate label{width:40px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:.85rem;color:#6b7280;cursor:pointer;margin:0;background:#fff}
.rate label:hover{border-color:var(--navy)}
.rate input:checked+label{background:var(--navy);color:#fff;border-color:var(--navy)}
.rate-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;flex-wrap:wrap;gap:.4rem}
.aduan-item{border-bottom:1px solid var(--line);padding:.9rem 0}.aduan-item:last-child{border:0}

@media print{.topbar,.main-nav,footer,.no-print,.breadcrumb{display:none!important}.content-box{border:0;box-shadow:none;padding:0}}

/* ===== HERO DINAMIS (navy + slideshow foto kegiatan, Ken Burns) ===== */
.hero-dynamic{background:var(--navy2);min-height:clamp(480px,76vh,680px);display:flex;align-items:center;padding:70px 0;isolation:isolate}
.hero-dynamic::before,.hero-dynamic::after{display:none}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;will-change:transform,opacity;
 animation:heroSlide 28s linear infinite;transform-origin:var(--ox,50%) var(--oy,50%)}
.hero-slide.s1{background-image:url('hero/hero-1.jpg');animation-delay:0s;--ox:30%;--oy:45%;--tx:-1.5%;--ty:-1%}
.hero-slide.s2{background-image:url('hero/hero-2.jpg');animation-delay:7s;--ox:50%;--oy:35%;--tx:1.5%;--ty:-1%}
.hero-slide.s3{background-image:url('hero/hero-3.jpg');animation-delay:14s;--ox:70%;--oy:60%;--tx:-1%;--ty:1.2%}
.hero-slide.s4{background-image:url('hero/hero-4.jpg');animation-delay:21s;--ox:40%;--oy:55%;--tx:1.2%;--ty:1%}
@keyframes heroSlide{
 0%{opacity:0;transform:scale(1.02) translate3d(0,0,0)}
 4%{opacity:1}
 25%{opacity:1}
 30%{opacity:0;transform:scale(1.16) translate3d(var(--tx),var(--ty),0)}
 100%{opacity:0;transform:scale(1.16) translate3d(var(--tx),var(--ty),0)}}
.hero-overlay{position:absolute;inset:0;z-index:1;
 background:linear-gradient(110deg,rgba(5,20,48,.94) 0%,rgba(8,32,74,.84) 42%,rgba(11,42,91,.58) 75%,rgba(27,76,156,.40) 100%),
            radial-gradient(circle at 85% 15%,rgba(80,140,255,.22),transparent 55%);
 background-size:200% 200%,100% 100%;animation:navyShift 16s ease-in-out infinite alternate}
@keyframes navyShift{from{background-position:0% 50%,0 0}to{background-position:100% 50%,0 0}}
.orb{position:absolute;z-index:1;border-radius:50%;background:rgba(255,255,255,.06);filter:blur(1px);pointer-events:none}
.orb.o1{width:360px;height:360px;right:-90px;top:-110px;animation:floaty 14s ease-in-out infinite}
.orb.o2{width:220px;height:220px;right:18%;bottom:-90px;animation:floaty 18s ease-in-out -4s infinite}
.orb.o3{width:120px;height:120px;left:46%;top:14%;background:rgba(120,170,255,.10);animation:floaty 11s ease-in-out -2s infinite}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-24px,28px,0)}}
.hero-content{z-index:2}
.hero-content h1{font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.15;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.hero-content .lead{max-width:640px;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.hero-tag{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
 padding:.35rem .9rem;border-radius:50px;font-size:.85rem;margin-bottom:1rem}
.hero-content .col-lg-8>*{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both}
.hero-content .col-lg-8>*:nth-child(2){animation-delay:.12s}.hero-content .col-lg-8>*:nth-child(3){animation-delay:.24s}
.hero-content .col-lg-8>*:nth-child(4){animation-delay:.36s}.hero-content .col-lg-8>*:nth-child(5){animation-delay:.42s}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.hero-dots{display:flex;gap:8px;margin-top:2.2rem}
.hero-dots span{height:6px;width:10px;border-radius:6px;background:rgba(255,255,255,.35);animation:heroDot 28s linear infinite}
.hero-dots span:nth-child(2){animation-delay:7s}.hero-dots span:nth-child(3){animation-delay:14s}.hero-dots span:nth-child(4){animation-delay:21s}
@keyframes heroDot{0%{width:30px;background:#fff}25%{width:30px;background:#fff}29%{width:10px;background:rgba(255,255,255,.35)}100%{width:10px;background:rgba(255,255,255,.35)}}
.btn-light-bnj,.btn-outline-light{transition:transform .2s,box-shadow .2s}
.btn-light-bnj:hover,.btn-outline-light:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}

/* ===== PENGUMUMAN & BERITA: interaktif + modal zoom-out ===== */
.list-post .item.post-click{cursor:pointer;border-radius:6px;padding-left:.7rem;padding-right:.7rem;border-left:3px solid transparent;
 transition:background .25s,transform .25s,border-color .25s,box-shadow .25s}
.list-post .item.post-click:hover{background:var(--soft);border-left-color:var(--navy);transform:translateX(5px);box-shadow:0 6px 16px rgba(11,42,91,.10)}
.list-post .item.post-click .thumb{transition:transform .35s}
.list-post .item.post-click:hover .thumb{transform:scale(1.07)}
.reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.list-post .item.post-click.reveal.in:hover{transform:translateX(5px)}
body.pm-open .sec,body.pm-open .hero,body.pm-open footer{transform:scale(.96);filter:blur(3px);transition:transform .45s ease,filter .45s ease}
.sec,.hero,footer{transition:transform .45s ease,filter .45s ease}
body.pm-open{overflow:hidden}
.post-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem}
.post-modal[hidden]{display:none}
.post-modal-backdrop{position:absolute;inset:0;background:rgba(5,20,48,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.post-modal.open .post-modal-backdrop{opacity:1}.post-modal.closing .post-modal-backdrop{opacity:0}
.post-modal-card{position:relative;background:#fff;width:min(820px,100%);max-height:88vh;overflow:auto;border-radius:10px;border-top:5px solid var(--navy);
 box-shadow:0 30px 80px rgba(0,0,0,.45);outline:0;opacity:0}
.post-modal.open .post-modal-card{animation:zoomOut .45s cubic-bezier(.2,.8,.2,1) forwards}
.post-modal.closing .post-modal-card{animation:zoomAway .35s ease-in forwards}
@keyframes zoomOut{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
@keyframes zoomAway{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.88)}}
.pm-body{padding:1.8rem 2rem 1.6rem}.pm-body h3{color:var(--navy);font-weight:700;padding-right:2.2rem}
.pm-foto{max-width:100%;max-height:360px;border-radius:6px;margin-bottom:1rem;display:block}
.pm-text{line-height:1.7}
.post-modal-close{position:absolute;right:.8rem;top:.8rem;width:38px;height:38px;border:0;border-radius:50%;background:var(--soft);color:var(--navy);
 display:flex;align-items:center;justify-content:center;transition:transform .25s,background .2s;z-index:2}
.post-modal-close:hover{background:var(--navy);color:#fff;transform:rotate(90deg)}
@media(max-width:575px){.pm-body{padding:1.4rem 1.1rem}.hero-dynamic{min-height:460px}}
@media(prefers-reduced-motion:reduce){
 .hero-slide,.hero-overlay,.orb,.hero-dots span,.hero-content .col-lg-8>*{animation:none!important}
 .hero-slide.s1{opacity:1;transform:none}.hero-dots span:first-child{width:30px;background:#fff}
 .reveal{opacity:1;transform:none;transition:none}
 .post-modal.open .post-modal-card{animation:none;opacity:1}.post-modal.closing .post-modal-card{animation:none;opacity:0}}
.list-post .item.post-click.reveal{transition:opacity .7s ease,transform .45s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,box-shadow .25s}

/* ===== TOMBOL MASUK (ORANYE) ===== */
.nav-masuk{display:flex;align-items:center;padding:.4rem 0 .4rem .5rem}
.btn-masuk{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,#ffa31f,#ff6a00);color:#fff!important;font-weight:700;
 border:0;border-radius:50px;padding:.5rem 1.35rem;text-decoration:none;box-shadow:0 4px 14px rgba(255,122,0,.45);
 transition:transform .2s,filter .2s;animation:masukPulse 2.8s ease-in-out infinite}
.btn-masuk::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:masukShine 3.6s ease-in-out infinite}
.btn-masuk:hover{transform:translateY(-2px) scale(1.05);filter:brightness(1.07);animation-play-state:paused;box-shadow:0 8px 22px rgba(255,122,0,.65)}
.btn-masuk:active{transform:scale(.97)}
@keyframes masukPulse{0%,100%{box-shadow:0 4px 14px rgba(255,122,0,.45)}50%{box-shadow:0 4px 24px rgba(255,122,0,.85)}}
@keyframes masukShine{0%,55%{left:-70%}100%{left:140%}}

/* ===== MENU DINAMIS ===== */
.main-nav{transition:background .3s,box-shadow .3s}
.main-nav.scrolled{background:rgba(11,42,91,.95);backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(5,20,48,.4)}
.main-nav .nav-link{position:relative;transition:background .25s}
.main-nav .nav-link::before{content:"";position:absolute;left:50%;bottom:7px;width:0;height:3px;border-radius:3px;background:#ff8a00;transform:translateX(-50%);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.main-nav .nav-link:hover::before,.main-nav .nav-item.show>.nav-link::before,.main-nav .nav-link.active::before{width:58%}
.main-nav .nav-link.active{background:rgba(255,255,255,.09)}
.main-nav .menu-ico{display:inline-block;margin-right:.2rem;transition:transform .3s}
.main-nav .nav-link:hover .menu-ico{transform:translateY(-2px) scale(1.2) rotate(-8deg)}
.main-nav .dropdown-toggle::after{transition:transform .25s}
.main-nav .dropdown:hover>.dropdown-toggle::after,.main-nav .dropdown.show>.dropdown-toggle::after{transform:rotate(180deg)}
.main-nav .dropdown-menu{animation:ddIn .28s cubic-bezier(.2,.8,.2,1) both;transform-origin:top left}
@keyframes ddIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.main-nav .dropdown-item{position:relative;transition:padding-left .22s,background .22s}
.main-nav .dropdown-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#ff8a00;transform:scaleY(0);transition:transform .22s}
.main-nav .dropdown-item:hover{padding-left:1.6rem}.main-nav .dropdown-item:hover::before,.main-nav .dropdown-item.active::before{transform:scaleY(1)}
.main-nav .dropdown-item.active,.main-nav .dropdown-item:active{background:var(--soft);color:var(--navy);font-weight:600}
@media(max-width:991px){.main-nav .nav-link::before{display:none}.nav-masuk{padding:.6rem 0}.btn-masuk{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.btn-masuk,.btn-masuk::before,.main-nav .dropdown-menu{animation:none!important}}

/* ===== GAMBAR HALAMAN (sejarah, visi misi, struktur organisasi, kontak) ===== */
.page-foto{display:block;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#fff;box-shadow:0 6px 20px rgba(11,42,91,.12);margin-bottom:1rem}
.page-foto img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.page-foto:hover img{transform:scale(1.04)}
.page-foto.side{float:right;width:min(340px,100%);margin-left:1.5rem}
.page-foto.wide{width:100%;cursor:zoom-in}
@media(max-width:767px){.page-foto.side{float:none;margin-left:0;width:100%}}