/* ============================================================
   Portal BUMDes Jombang — Layout PUBLIK (senada beranda)
   Background foto Jombang + overlay gelap + navbar/footer glass.
   ============================================================ */
:root{
  --primary:#0d3b8a; --primary-d:#0a2d6b; --accent:#5ba7e5; --mid:#1e5fc4;
  --ink:#1b2740; --muted:#64727f; --line:#e3e9f4; --info-bg:#eaf1fc;
  --teal:var(--primary); --teal-d:var(--primary-d); --gold:var(--accent);
}
*{ box-sizing:border-box; }
html,body{ background:transparent; }
body{ margin:0; font-family:'Roboto',system-ui,-apple-system,Segoe UI,sans-serif; color:#eaf1fb; min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 20px; }

/* ---- Background slideshow (identik beranda) ---- */
.jbg-pagebg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:#0a1f4a; }
.jbg-pagebg .s{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation:jbgPageFade 49s infinite; will-change:opacity; }
@keyframes jbgPageFade{ 0%{opacity:0} 2%{opacity:1} 14%{opacity:1} 16%{opacity:0} 100%{opacity:0} }
.jbg-pageoverlay{ position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.8)); }
@media (prefers-reduced-motion: reduce){ .jbg-pagebg .s{ animation:none; } .jbg-pagebg .s:first-child{ opacity:1; } }

/* ---- Navbar glass ---- */
header.nav{ position:sticky; top:0; z-index:20; background:rgba(10,31,74,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.12); }
header.nav .bar{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:14px; }
.logo{ display:flex; align-items:center; gap:11px; }
.logo .mark{ width:40px; height:40px; border-radius:11px; background:var(--accent); color:var(--primary-d); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; flex:none; }
.logo b{ color:#fff; font-weight:900; font-size:15px; display:block; line-height:1.05; }
.logo small{ display:block; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.6px; }
nav.menu{ display:flex; gap:3px; align-items:center; font-size:13.5px; }
nav.menu a{ padding:9px 13px; border-radius:9px; font-weight:600; color:#dfeaf8; transition:background .15s,color .15s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
nav.menu a:hover{ background:rgba(255,255,255,.12); color:#fff; }
nav.menu a.active{ background:rgba(255,255,255,.16); color:#fff; }
nav.menu a.cta{ background:var(--accent); color:var(--primary-d); font-weight:800; }
nav.menu a.cta:hover{ background:#7bb8ea; color:var(--primary-d); }
nav.menu .beta{ font-size:8.5px; font-weight:800; background:var(--accent); color:var(--primary-d); padding:1px 5px; border-radius:6px; text-transform:uppercase; letter-spacing:.4px; }
@media(max-width:820px){ nav.menu a.lnk{ display:none; } }

/* ---- Ruang untuk navbar pill mengambang (position:fixed) ---- */
.portal-content{ padding-top:104px; }

/* ---- Page head (judul putih di atas foto) ---- */
.page-head{ padding:30px 0 24px; }
.page-head h1{ margin:0; font-size:32px; font-weight:900; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.page-head p{ margin:9px 0 0; color:#d7e4f7; font-size:15px; max-width:780px; }

/* ---- Konten ---- */
main{ padding:6px 0 64px; min-height:46vh; }
main .lead,.text-on-bg{ color:#dbe6f7; }
.card{ background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.55); border-radius:16px; color:var(--ink); box-shadow:0 12px 34px rgba(0,0,0,.22); }
.badge{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.badge.teal{ background:rgba(13,59,138,.1); color:var(--primary); }
.badge.gold{ background:rgba(91,167,229,.28); color:#1e5fc4; }

/* Pagination links agar terbaca di atas foto */
main .pagination a,main nav[role="navigation"] a,main .pagination span{ color:#eaf1fb; }

/* ---- Footer (senada beranda) ---- */
footer.ft{ background:linear-gradient(135deg,var(--primary-d),var(--primary)); color:#cfe0f7; padding:30px 0; font-size:13.5px; border-top:1px solid rgba(255,255,255,.1); }
footer.ft a{ color:var(--accent); }
footer.ft b{ color:#fff; }

/* ---- Hamburger mobile (CSS-only) ---- */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.nav-hamb{ display:none; }
.nav-hamb svg{ width:24px; height:24px; }
@media(max-width:880px){
  .style-2{ width:94% !important; margin:14px auto !important; }
  .portal-content{ padding-top:84px; }
  .nav-hamb{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:#fff; cursor:pointer; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); box-shadow:0 2px 8px rgba(0,0,0,.25); }
  .nav-hamb:hover{ background:rgba(255,255,255,.12); }
  .style-8{ display:none !important; }
  .nav-toggle:checked ~ .style-8{
    display:flex !important; flex-direction:column; align-items:stretch;
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    background:rgba(20,22,28,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:10px; gap:2px; z-index:1200;
    box-shadow:0 20px 50px rgba(0,0,0,.4);
  }
  .nav-toggle:checked ~ .style-8 a{ display:block; padding:12px 16px; border-radius:10px; }
  .nav-toggle:checked ~ .style-8 a:hover{ background:rgba(255,255,255,.1); }
}