/* ==========================================================================
   Biro Kemahasiswaan Universitas Bina Bangsa — Tema situs publik
   Palet dari logo UNIBA: maroon, emas, navy. Font: Plus Jakarta Sans.
   ========================================================================== */
:root{
  --maroon:#780D12; --maroon-deep:#4A070B; --maroon-soft:#9B1B22;
  --gold:#F6AB00; --gold-deep:#8F6100; --gold-soft:#FFF4D6;
  --navy:#0E2A54; --navy-deep:#071A3A; --navy-soft:#1D4380;
  --ink:#1B2333; --ink-soft:#586173; --line:#E4E7EE;
  --bg:#F5F6F9; --white:#fff; --ok:#1F7A55; --danger:#B42318;

  /* alias untuk kompatibilitas dengan markup lama */
  --amber:var(--gold); --amber-deep:var(--gold-deep);
  --sage:var(--ok); --sage-deep:var(--ok); --green:var(--ok);
  --cream:var(--bg); --paper:var(--bg); --gray-100:var(--bg); --gray-600:var(--ink-soft);

  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(14,42,84,.06),0 4px 12px -4px rgba(14,42,84,.08);
  --shadow-md:0 2px 4px rgba(14,42,84,.05),0 18px 40px -16px rgba(14,42,84,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font);line-height:1.25;color:var(--navy-deep);margin:0 0 .5em;letter-spacing:-.015em}
p{margin:0 0 1em}
.container{max-width:1200px;margin-inline:auto;padding-inline:24px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--maroon-deep);padding:10px 16px;border-radius:var(--r-sm);font-weight:700;z-index:999}
.skip-link:focus{left:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy-deep);color:rgba(255,255,255,.78);font-size:13px}
.topbar-inner{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-block:9px}
.topbar-left,.topbar-right{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar a{text-decoration:none;transition:color .15s}
.topbar a:hover{color:var(--gold)}
.topbar i{color:var(--gold);margin-right:7px}

/* ---------- Navbar ---------- */
.navbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.navbar.scrolled{box-shadow:0 8px 28px -14px rgba(14,42,84,.3)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.brand-logo{width:48px;height:48px;object-fit:contain}
.brand-text strong{display:block;font-size:19px;font-weight:800;color:var(--maroon);line-height:1.1;letter-spacing:-.02em}
.brand-text small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-top:2px;line-height:1.2}
.nav-menu{display:flex;align-items:center;gap:2px}
.nav-menu>a,.nav-dropdown>a{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:var(--r-sm);position:relative;transition:color .15s,background-color .15s}
.nav-menu>a:hover,.nav-dropdown:hover>a{color:var(--maroon);background:rgba(120,13,18,.05)}
.nav-menu>a.active,.nav-dropdown>a.active{color:var(--maroon)}
.nav-menu>a.active::after,.nav-dropdown>a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--gold);border-radius:2px}
.nav-dropdown{position:relative}
.nav-dropdown>a i{font-size:10px;opacity:.6;transition:transform .2s}
.nav-dropdown:hover>a i,.nav-dropdown.open>a i{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:236px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:none}
.dropdown-menu a{display:block;padding:10px 14px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:var(--r-sm)}
.dropdown-menu a:hover{background:var(--gold-soft);color:var(--maroon)}
.btn-nav-cta{margin-left:10px;background:var(--maroon);color:var(--white)!important;padding:11px 20px!important;border-radius:999px!important;font-weight:700!important;box-shadow:0 6px 16px -6px rgba(120,13,18,.55);transition:background-color .15s,transform .15s!important}
.btn-nav-cta:hover{background:var(--maroon-deep)!important;transform:translateY(-1px)}
.btn-nav-cta::after{display:none!important}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--white);border-radius:var(--r-sm);font-size:18px;color:var(--maroon);cursor:pointer}

@media (max-width:1080px){
  .topbar-left{display:none}
  .topbar-inner{justify-content:flex-end}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(14,42,84,.35);flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 22px;max-height:calc(100vh - 76px);overflow-y:auto;display:none}
  .nav-menu.open{display:flex}
  .nav-menu>a,.nav-dropdown>a{padding:14px 8px;font-size:15.5px;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between;width:100%}
  .nav-menu>a.active::after,.nav-dropdown>a.active::after{display:none}
  .nav-dropdown .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px;display:none;background:transparent}
  .nav-dropdown.open .dropdown-menu{display:block}
  .nav-dropdown:hover .dropdown-menu{display:none}
  .nav-dropdown.open:hover .dropdown-menu{display:block}
  .btn-nav-cta{margin:16px 0 0;text-align:center;justify-content:center!important}
}
@media (max-width:520px){.brand-text small{display:none}.brand-text strong{font-size:18px}.topbar{display:none}}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);font-weight:700;font-size:14.5px;line-height:1.2;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:var(--maroon-deep);box-shadow:0 8px 20px -8px rgba(246,171,0,.7)}
.btn-primary:hover{background:#FFBC1F}
.btn-outline{border-color:rgba(255,255,255,.45);color:var(--white)}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn-navy{background:var(--maroon);color:var(--white)}
.btn-navy:hover{background:var(--maroon-deep);box-shadow:0 8px 18px -8px rgba(120,13,18,.6)}
.btn-sm{padding:10px 20px;font-size:13.5px}
.btn-outline-sm{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;font-size:13px;font-weight:700;border:1.5px solid rgba(255,255,255,.4);color:var(--white);border-radius:999px;text-decoration:none;transition:.15s}
.btn-outline-sm:hover{background:var(--gold);border-color:var(--gold);color:var(--maroon-deep)}

/* ---------- Seksi ---------- */
.section{padding:88px 0}
.section-head{margin-bottom:48px}
.section-tag{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--maroon);margin-bottom:12px}
.section-tag::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--gold)}
.section-title{font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.15;max-width:22ch;color:var(--navy-deep)}
.section-desc{font-size:16.5px;line-height:1.75;color:var(--ink-soft);max-width:64ch;margin-top:14px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--white);padding:84px 0 128px;background:radial-gradient(90% 120% at 90% 10%,var(--maroon-soft) 0%,var(--maroon) 40%,var(--maroon-deep) 100%)}
.hero::before{content:"";position:absolute;right:-180px;top:-140px;width:760px;height:760px;border-radius:50%;border:1px solid rgba(246,171,0,.22);box-shadow:0 0 0 70px rgba(246,171,0,.04),0 0 0 140px rgba(255,255,255,.025);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--gold),var(--navy-soft) 60%,var(--navy))}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.hero-slide{display:none}
.hero-slide.active{display:block;animation:slideIn .5s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--gold);background:rgba(246,171,0,.12);border:1px solid rgba(246,171,0,.35);padding:8px 16px;border-radius:999px;margin-bottom:24px}
.hero h1{font-size:clamp(34px,4.8vw,58px);font-weight:800;line-height:1.08;color:var(--white);letter-spacing:-.03em;margin:0 0 22px}
.hero p{font-size:17.5px;line-height:1.75;color:rgba(255,255,255,.8);max-width:52ch;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-nav{display:flex;align-items:center;gap:18px;margin-top:44px}
.hero-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.hero-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--maroon-deep)}
.hero-dots{display:flex;gap:9px}
.hero-dot{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:width .25s var(--ease),background-color .2s}
.hero-dot.active{background:var(--gold);width:28px}
.hero-seal{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:1;display:grid;place-items:center;animation:sealIn .9s var(--ease) both}
@keyframes sealIn{from{opacity:0;transform:scale(.9) rotate(-6deg)}to{opacity:1;transform:none}}
.hero-seal::before,.hero-seal::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero-seal::before{inset:-6%;border:1.5px dashed rgba(246,171,0,.5);animation:spin 60s linear infinite}
.hero-seal::after{inset:-16%;border:1px solid rgba(255,255,255,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-seal img{width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));background:var(--white);padding:0}
@media (max-width:900px){
  .hero{padding:56px 0 112px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-seal{order:-1;width:170px}
}
@media (prefers-reduced-motion:reduce){.hero-seal::before{animation:none}}

/* ---------- Akses cepat (menumpuk di hero) ---------- */
.access-strip{position:relative;z-index:5;margin-top:-64px}
.access-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-md);border:1px solid var(--line);overflow:hidden}
.access-item{display:flex;align-items:center;gap:16px;padding:26px 24px;text-decoration:none;border-right:1px solid var(--line);transition:background-color .18s}
.access-item:last-child{border-right:0}
.access-item:hover{background:var(--gold-soft)}
.access-icon{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(120,13,18,.08);color:var(--maroon);font-size:19px;transition:background-color .18s,color .18s}
.access-item:hover .access-icon{background:var(--maroon);color:var(--gold)}
.access-copy h4{font-size:15px;font-weight:700;margin:0 0 3px;color:var(--navy-deep)}
.access-copy p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.45}
@media (max-width:960px){.access-grid{grid-template-columns:repeat(2,1fr)}.access-item{border-bottom:1px solid var(--line)}.access-item:nth-child(2n){border-right:0}.access-item:nth-last-child(-n+2){border-bottom:0}}
@media (max-width:540px){.access-grid{grid-template-columns:1fr}.access-item{border-right:0!important}.access-item:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* ---------- Tentang ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.about-visual{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--white);padding:40px 36px;border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden}
.about-visual::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:2px solid rgba(246,171,0,.35)}
.about-visual p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.92)}
.about-visual i.fa-quote-left{color:var(--gold)!important;opacity:1!important}
.about-visual p[style*="font-weight:700"]{color:var(--gold)!important;margin-bottom:2px}
.about-visual p[style*="ink-soft"]{color:rgba(255,255,255,.65)!important}
.value-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.value-item{padding-top:18px;border-top:3px solid var(--gold)}
.value-item i{color:var(--maroon);font-size:20px;margin-bottom:12px;display:block}
.value-item h4{font-size:17px;margin:0 0 6px}
.value-item p{margin:0}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px}.value-list{grid-template-columns:1fr}}

/* ---------- Statistik ---------- */
.stats-band{background:linear-gradient(120deg,var(--navy-deep),var(--navy));padding:60px 0;position:relative}
.stats-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.stats-grid{display:flex;position:relative}
.stats-grid>div{flex:1;text-align:center;padding:0 12px;border-right:1px solid rgba(255,255,255,.14)}
.stats-grid>div:last-child{border-right:0}
.stat-num{font-size:clamp(28px,3.4vw,42px);font-weight:800;color:var(--gold);letter-spacing:-.02em;line-height:1.1}
.stat-label{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.75);margin-top:8px}
@media (max-width:760px){.stats-grid{flex-wrap:wrap;row-gap:26px}.stats-grid>div{flex:0 0 50%;border-right:0}}

/* ---------- Grid & kartu ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr;gap:36px}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr}}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s,border-color .2s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
.card-thumb{aspect-ratio:16/9;display:grid;place-items:center;font-size:34px;color:rgba(246,171,0,.9);background:linear-gradient(135deg,var(--maroon),var(--maroon-deep));position:relative;overflow:hidden}
.card-thumb::after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;border:1.5px solid rgba(246,171,0,.35)}
.card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:17px;font-weight:700;margin-bottom:10px}
.card-body h3 a{text-decoration:none;color:inherit}
.card-body h3 a:hover{color:var(--maroon)}
.card-body>p{font-size:14.5px;color:var(--ink-soft);line-height:1.65}
.card-cat{font-size:12.5px;font-weight:700;color:var(--maroon);margin-bottom:8px}
.card-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}
.card-meta a{font-weight:700;color:var(--maroon);text-decoration:none}
.card-meta a:hover{color:var(--maroon-deep);text-decoration:underline;text-underline-offset:3px}
.card-meta i{margin-right:6px;color:var(--gold-deep)}

.group-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.group-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,var(--maroon))}
.group-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.group-card>i{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;font-size:19px;margin-bottom:18px;color:var(--accent,var(--maroon));background:color-mix(in srgb,var(--accent,var(--maroon)) 10%,white)}
.group-card h3{font-size:18px;margin:0 0 10px}
.group-card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 18px}
.group-card .card-meta{padding-top:14px;justify-content:flex-start}
.group-card .card-meta i{display:inline;width:auto;height:auto;background:none;font-size:inherit;margin:0 6px 0 0;color:var(--gold-deep)}

/* ---------- Berita & agenda ---------- */
.panel-heading{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;margin-bottom:22px;padding-bottom:14px;border-bottom:3px solid var(--navy-deep)}
.panel-heading i{color:var(--maroon)}
.news-row,.agenda-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.news-row:first-of-type,.agenda-row:first-of-type{padding-top:0}
.news-cat{font-size:12px;font-weight:700;color:var(--maroon);margin-bottom:6px}
.news-row h3,.agenda-row h3{font-size:16px;font-weight:700;margin:0 0 6px;line-height:1.4}
.news-row h3 a{text-decoration:none;color:var(--ink)}
.news-row h3 a:hover{color:var(--maroon)}
.news-date,.agenda-loc{font-size:13px;color:var(--ink-soft)}
.agenda-row{align-items:center;gap:18px}
.agenda-date{flex:none;width:62px;height:66px;border-radius:14px;background:var(--maroon);color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:4px solid var(--gold)}
.agenda-date .d{font-weight:800;font-size:22px;line-height:1}
.agenda-date .m{font-size:11px;font-weight:600;text-transform:uppercase;margin-top:4px;color:rgba(255,255,255,.85)}

/* ---------- Mitra ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.partner-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;transition:box-shadow .2s,border-color .2s}
.partner-card:hover{box-shadow:var(--shadow-md);border-color:transparent}
.partner-logo{width:52px;height:52px;border-radius:50%;background:var(--gold-soft);color:var(--maroon);display:grid;place-items:center;font-size:20px;flex:none}
.partner-card h4{font-size:13.5px;line-height:1.35;margin:0 0 8px}
@media (max-width:1000px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.partner-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Lencana ---------- */
.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--bg);color:var(--ink-soft);line-height:1.4}
.badge-penelitian,.badge-kegiatan,.badge-diajukan{background:rgba(14,42,84,.09);color:var(--navy)}
.badge-pengabdian,.badge-beasiswa,.badge-diterima{background:var(--gold-soft);color:var(--gold-deep)}
.badge-diverifikasi,.badge-selesai,.badge-terdaftar,.badge-granted{background:rgba(31,122,85,.12);color:var(--ok)}
.badge-ditolak{background:rgba(180,35,24,.1);color:var(--danger)}

/* ---------- CTA ---------- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--maroon-deep),var(--maroon));padding:84px 0;text-align:center}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(246,171,0,.25);box-shadow:0 0 0 60px rgba(246,171,0,.04);pointer-events:none}
.cta-band .container{position:relative}
.cta-band h2{color:var(--white);font-size:clamp(24px,3.2vw,36px);font-weight:800;margin:0 auto 14px;max-width:24ch}
.cta-band p{color:rgba(255,255,255,.8);font-size:17px;margin:0 auto 32px;max-width:56ch}

/* ---------- Header halaman dalam ---------- */
.page-hero{position:relative;overflow:hidden;background:radial-gradient(90% 200% at 95% 0%,var(--maroon-soft),var(--maroon) 45%,var(--maroon-deep));padding:60px 0 56px;color:var(--white)}
.page-hero::before{content:"";position:absolute;right:-90px;top:-130px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(246,171,0,.28);box-shadow:0 0 0 46px rgba(246,171,0,.04)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--gold),transparent 70%)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:var(--white);font-size:clamp(28px,3.8vw,42px);font-weight:800;margin:0 0 12px}
.breadcrumb{font-size:14px;color:rgba(255,255,255,.72)}
.breadcrumb a{color:var(--gold);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}

/* ---------- Filter, paginasi ---------- */
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:32px;box-shadow:var(--shadow-sm)}
.filter-bar input[type=text]{flex:1 1 240px}
.filter-bar select{flex:0 1 220px}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.pagination a{min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);background:var(--white);transition:.15s}
.pagination a:hover{border-color:var(--maroon);color:var(--maroon)}
.pagination a.active{background:var(--maroon);border-color:var(--maroon);color:var(--white)}

/* ---------- Form ---------- */
input[type=text],input[type=email],input[type=number],input[type=search],input[type=password],select,textarea{width:100%;font-family:var(--font);font-size:15px;color:var(--ink);background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#C9CEDA}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--maroon);box-shadow:0 0 0 4px rgba(120,13,18,.12)}
textarea{resize:vertical;min-height:120px}
input[type=file]{width:100%;font-family:var(--font);font-size:14px;padding:14px;border:2px dashed #CBD1DE;border-radius:12px;background:var(--bg);cursor:pointer}
input[type=file]::file-selector-button{margin-right:14px;padding:9px 16px;border:0;border-radius:999px;background:var(--maroon);color:var(--white);font-weight:700;font-family:var(--font);cursor:pointer}
.form-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow-sm)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:700;color:var(--navy-deep);margin-bottom:8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-hint{font-size:13px;color:var(--ink-soft)}
@media (max-width:640px){.form-row{grid-template-columns:1fr}.form-box{padding:24px 20px}}

.alert{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:12px;font-size:14.5px;margin-bottom:22px;border:1px solid transparent}
.alert>i{margin-top:3px}
.alert-success{background:#E7F5EE;border-color:#B5E0CB;color:#12553A}
.alert-danger{background:#FDECEA;border-color:#F5C2BD;color:#8A1C13}
.alert a{font-weight:700;color:inherit}

/* ---------- Langkah / status ---------- */
.steps{display:flex;margin-bottom:32px;counter-reset:st}
.step{flex:1;text-align:center;position:relative;font-size:13px;font-weight:600;color:var(--ink-soft)}
.step::before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.step:first-child::before{display:none}
.step-num{position:relative;z-index:1;width:40px;height:40px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--line);font-weight:800;font-size:15px;color:var(--ink-soft)}
.step.active{color:var(--maroon)}
.step.active::before{background:var(--gold)}
.step.active .step-num{background:var(--maroon);border-color:var(--maroon);color:var(--white);box-shadow:0 0 0 5px rgba(120,13,18,.12)}

/* ---------- Tabel ---------- */
.table-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow-x:auto;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{background:var(--navy-deep);color:var(--white);text-align:left;font-weight:700;font-size:13.5px;padding:15px 18px;white-space:nowrap}
tbody td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#FAFBFD}
tbody tr:hover{background:var(--gold-soft)}

/* ---------- FAQ ---------- */
.accordion-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.accordion-item.open{border-color:var(--maroon);box-shadow:var(--shadow-sm)}
.accordion-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 22px;font-weight:700;font-size:16px;color:var(--navy-deep);cursor:pointer;user-select:none}
.accordion-head i{color:var(--maroon);font-size:13px;transition:transform .25s var(--ease)}
.accordion-item.open .accordion-head i{transform:rotate(180deg)}
.accordion-body{display:none;padding:0 22px 8px;color:var(--ink-soft)}
.accordion-item.open .accordion-body{display:block}

/* ---------- Lain-lain ---------- */
.leader-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--maroon);background:var(--gold-soft);border:3px solid var(--gold)}
.detail-hero-img{aspect-ratio:16/8;border-radius:var(--r-lg);display:grid;place-items:center;font-size:54px;color:rgba(246,171,0,.9);background:linear-gradient(135deg,var(--maroon),var(--maroon-deep));margin-bottom:28px}
.share-buttons{display:flex;gap:10px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.share-buttons a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--maroon);text-decoration:none;transition:.15s}
.share-buttons a:hover{background:var(--maroon);color:var(--white);transform:translateY(-2px)}
.section p a,.card-body p a{color:var(--maroon);font-weight:600}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.72);font-size:14.5px;border-top:5px solid var(--gold)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-block:68px 48px}
.footer-logo{width:72px;height:72px;margin-bottom:16px;display:block}
.footer-brand p strong{color:var(--white);font-size:15.5px}
.footer-address i{color:var(--gold);margin-right:8px}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--white);text-decoration:none;transition:.15s}
.footer-social a:hover{background:var(--gold);color:var(--maroon-deep);transform:translateY(-2px)}
.footer-col h4{color:var(--white);font-size:16px;font-weight:700;margin:0 0 20px;padding-bottom:12px;position:relative}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;border-radius:2px;background:var(--gold)}
.footer-col>a{display:block;padding:5px 0;color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s,padding-left .15s}
.footer-col>a:hover{color:var(--gold);padding-left:5px}
.footer-col p i{color:var(--gold);width:22px}
.footer-col .btn-outline-sm{margin-top:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:13.5px;text-align:center;color:rgba(255,255,255,.6)}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;padding-block:52px 36px}}

.wa-float{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:var(--white);font-size:28px;text-decoration:none;box-shadow:0 10px 24px -8px rgba(37,211,102,.7);z-index:90;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.back-to-top{position:fixed;right:28px;bottom:90px;width:44px;height:44px;border-radius:50%;border:0;background:var(--maroon);color:var(--gold);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:90}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--maroon-deep)}
@media print{.topbar,.navbar,.wa-float,.back-to-top,.site-footer{display:none}}

.badge-active{background:rgba(31,122,85,.12);color:var(--ok)}

/* ===== Berita: foto sampul & isi berita dari editor ===== */
.card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-cover{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:var(--r-lg);margin-bottom:28px}
.news-content{font-size:15.5px;line-height:1.85;overflow-wrap:anywhere}
.news-content::after{content:"";display:block;clear:both}
.news-content p{margin:0 0 16px}
.news-content h2,.news-content h3,.news-content h4{margin:28px 0 12px;line-height:1.3}
.news-content ul,.news-content ol{margin:0 0 16px;padding-left:28px}
.news-content li{margin-bottom:4px}
.news-content a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.news-content blockquote{margin:18px 0;padding:10px 18px;border-left:4px solid var(--gold);background:var(--bg);color:var(--gray-600,#5A6472)}
.news-content hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.news-content img{max-width:100%;height:auto;border-radius:10px}
.news-content img.img-left{float:left;margin:4px 22px 14px 0;max-width:50%}
.news-content img.img-right{float:right;margin:4px 0 14px 22px;max-width:50%}
.news-content img.img-center{display:block;margin:18px auto}
.news-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;clear:both;display:block;overflow-x:auto}
.news-content th,.news-content td{border:1px solid var(--line);padding:9px 12px;vertical-align:top}
.news-content th{background:var(--bg);font-weight:700;text-align:left}
@media (max-width:600px){
  .news-content img.img-left,.news-content img.img-right{float:none;display:block;margin:16px auto;max-width:100%}
}
.alert-warning{background:#FFF6DD;border-color:#F0DFA8;color:#6B4E00}
.alert-info{background:#E8F1FF;border-color:#BCD5F8;color:#0B4A9C}