:root{
  /* Palet resmi DEMA UIN Bandung 2026-2027 ("Grainy Blue/Black and White
     Minimalist Design") — 4 warna resminya: #014C8D, #1E5689, #7F8082, #FFFFFF.
     --blue-bright & --pale/--cream/--paper diturunkan dari situ untuk
     kebutuhan aksen/hover & latar, supaya tetap 1 keluarga warna yang sama. */
  --navy:#014C8D;
  --blue-mid:#1E5689;
  --blue-bright:#3B7FB8;
  --gray:#7F8082;
  --pale:#E3EAF1;
  --cream:#EDEDEB;
  --paper:#F7F7F6;
  --ink:#17181A;
  --ink-soft:#58595B;
  --ink-on-dark:#eef1f7;
  --line:rgba(23,24,26,.13);
  --line-on-dark:rgba(238,241,247,.22);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}

/* ---------- GLOBAL GRAIN — one consistent texture over the whole site, not just a single section ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  background-image:url("../assets/grain.png");
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:.5;
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion: reduce){ body::after{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){ *{transition-duration:.001ms !important; animation-duration:.001ms !important;} }
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block; max-width:100%;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-.01em;}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,4vw,48px); position:relative;}
section, footer{scroll-margin-top:104px;}

/* ---------- reveal-on-scroll (fade + rise), applied via [data-reveal] ---------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}
[data-reveal-delay="1"]{transition-delay:.1s;}
[data-reveal-delay="2"]{transition-delay:.2s;}
[data-reveal-delay="3"]{transition-delay:.3s;}
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1; transform:none; transition:none;} }

/* ---------- reusable heading-highlight ---------- */
.htitle{display:inline-flex; align-items:center; gap:10px; margin-bottom:6px;}
.htitle .hbox{
  font-family:'Fraunces',serif; font-weight:500; font-size:1.5rem;
  padding:4px 14px 7px; color:#fff; background:var(--blue-bright);
}
.htitle .hplus{width:16px; height:16px; position:relative; flex-shrink:0;}
.htitle .hplus::before,.htitle .hplus::after{content:""; position:absolute; background:var(--blue-bright);}
.htitle .hplus::before{left:7px; top:0; width:2px; height:16px;}
.htitle .hplus::after{top:7px; left:0; width:16px; height:2px;}
.on-dark .htitle .hbox{background:var(--pale); color:var(--navy);}
.on-dark .htitle .hplus::before,.on-dark .htitle .hplus::after{background:var(--pale);}
.on-pale .htitle .hbox{background:var(--navy); color:var(--pale);}
.on-pale .htitle .hplus::before,.on-pale .htitle .hplus::after{background:var(--navy);}

/* ---------- pixel motif (reusable) ---------- */
.pixel{position:absolute; z-index:1; opacity:.9; pointer-events:none;}

/* ---------- section color blocks ---------- */
section{position:relative; padding:clamp(52px,8vw,92px) 0; overflow:hidden;}
.bg-navy{background:var(--navy); color:var(--ink-on-dark); position:relative; overflow:hidden;}
.bg-navy p, .bg-navy .lede{color:rgba(238,241,247,.75);}
.bg-blue{background:var(--blue-mid); color:var(--ink-on-dark); position:relative; overflow:hidden;}
.bg-blue p{color:rgba(238,241,247,.8);}
.bg-blue::after, .bg-navy::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode:overlay; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-blue > *, .bg-navy > *{position:relative; z-index:1;}
.bg-pale{background:var(--pale); color:var(--ink);}
.bg-cream{background:var(--cream); color:var(--ink);}
.bg-paper{background:var(--paper); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

section p{font-size:.98rem; max-width:600px;}
.lede{max-width:560px; margin-top:6px;}

/* ---------- page hero (small, for sub-pages) ---------- */
.page-hero{background:var(--navy); color:#fff; padding:clamp(64px,10vw,96px) 0 clamp(40px,6vw,56px); position:relative; overflow:hidden;}
.page-hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-hero > *{position:relative; z-index:1;}
.page-hero .eyebrow{font-family:'IBM Plex Sans',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(238,241,247,.55);}
.page-hero h1{font-size:clamp(2rem,4.4vw,2.9rem); margin-top:10px; color:#fff;}
.page-hero p{margin-top:12px; color:rgba(238,241,247,.75); max-width:560px;}
.breadcrumb{font-size:.82rem; color:rgba(238,241,247,.55); margin-bottom:6px;}
.breadcrumb a:hover{color:#fff;}

/* ---------- MARQUEE (hero ambient background text) ---------- */
/* ---------- FADE BAND (cream "kartu ucapan" style, fades in/out with scroll — NO scrolling marquee motion) ---------- */
.fade-band{
  position:relative; padding:clamp(48px,7vw,72px) 0; text-align:center; opacity:0; transition:opacity .8s ease;
  background-color:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.fade-band > *{position:relative; z-index:1;}
.fade-band.is-visible{opacity:1;}
.fade-band img{width:34px; height:34px; margin:0 auto 18px; opacity:.85;}
.fade-band .script{display:block; font-family:'Petit Formal Script',cursive; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--navy); line-height:1.3;}
.fade-band .sub{display:block; margin-top:12px; font-family:'Fraunces',serif; font-style:italic; font-size:.86rem; color:var(--ink-soft); max-width:440px; margin-left:auto; margin-right:auto; line-height:1.6;}

.hero{display:flex; align-items:flex-end; min-height:60vh; padding:clamp(60px,8vw,100px) 0 clamp(40px,6vw,60px); background:var(--navy); position:relative; overflow:hidden; --hero-photo:none;}
/* Slot foto kampus (opsional) — kosong secara default. Begitu ada foto asli,
   isi lewat inline style di HTML: style="--hero-photo:url('../assets/kampus-hero.jpg')"
   pada elemen .hero. Tint biru + grain di bawah ini akan tetap tampil DI ATAS
   foto apa pun (tidak pernah hilang), sesuai permintaan "gambar kampus di
   background tanpa menghilangkan efek biru grainy". */
.hero-photo-layer{position:absolute; inset:0; z-index:0; background-image:var(--hero-photo); background-size:cover; background-position:center 70%; opacity:1;}
.hero-tint{position:absolute; inset:0; z-index:1; background:linear-gradient(175deg, rgba(1,76,141,.5) 0%, rgba(1,76,141,.3) 45%, rgba(1,76,141,.58) 100%); pointer-events:none;}
.hero-grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero::before{content:""; position:absolute; inset:-25%; background:radial-gradient(ellipse 42% 38% at 32% 28%, rgba(59,127,184,.38), transparent 65%); pointer-events:none; animation:heroGlowA 17s ease-in-out infinite alternate; will-change:transform; z-index:1;}
.hero::after{content:""; position:absolute; inset:-25%; background:radial-gradient(ellipse 38% 34% at 72% 62%, rgba(238,241,247,.12), transparent 65%); pointer-events:none; animation:heroGlowB 13s ease-in-out infinite alternate; will-change:transform; z-index:1;}
@keyframes heroGlowA{0%{transform:translate(-3%,-2%) scale(1);} 100%{transform:translate(4%,3%) scale(1.15);}}
@keyframes heroGlowB{0%{transform:translate(3%,3%) scale(1.08);} 100%{transform:translate(-4%,-2%) scale(0.92);}}
.hero-content{position:relative; z-index:2; width:100%;}
.hero-eyebrow{font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,241,247,.5); margin-bottom:20px; line-height:1.8;}
.hero-title{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.8rem,6vw,4.2rem); line-height:1.1; color:#fff; letter-spacing:-.02em; background:linear-gradient(100deg, #fff 0%, #fff 40%, rgba(238,241,247,.65) 50%, #fff 60%, #fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:titleSheen 8s ease-in-out 1.4s infinite;}
.hero-period{font-family:'Fraunces',serif; font-size:clamp(1rem,1.5vw,1.3rem); color:rgba(238,241,247,.5); font-weight:400; margin-top:12px;}
@keyframes titleSheen{0%,35%{background-position:200% 0;} 65%,100%{background-position:-50% 0;}}
.hero-plus{position:absolute; z-index:2; opacity:.5; animation:float 6s ease-in-out infinite;}
.hero-plus::before,.hero-plus::after{content:""; position:absolute; background:rgba(238,241,247,.3);}
.hero-plus::before{left:9px; top:0; width:2px; height:20px;}
.hero-plus::after{top:9px; left:0; width:20px; height:2px;}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-10px) rotate(5deg);}}
@media (max-width:640px){ .hero-plus{display:none;}}
@media (prefers-reduced-motion: reduce){ .hero-title{animation:none; background:none; -webkit-text-fill-color:#fff; color:#fff;} }

/* ---------- NAV ---------- */
header.site{position:sticky; top:0; z-index:100; background:var(--cream); background:color-mix(in srgb, var(--cream) 82%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .25s ease, background .25s ease, border-color .25s ease;}
header.site.scrolled{background:color-mix(in srgb, var(--cream) 92%, transparent); box-shadow:0 6px 22px -14px rgba(19,24,31,.4); border-bottom-color:transparent;}
@supports not (backdrop-filter:blur(1px)){ header.site{background:var(--cream);} }
nav.wrap{max-width:1080px; display:flex; align-items:center; justify-content:space-between; height:92px;}
.brand{display:flex; align-items:center; gap:14px; min-width:0;}
.brand .emblem{width:42px; height:42px; flex-shrink:0; display:block; object-fit:contain;}
.brand .brand-text{display:flex; flex-direction:column; justify-content:center; line-height:1.25; min-width:0;}
.brand strong{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--navy); font-weight:500; letter-spacing:-.01em;}
.brand em{font-family:'IBM Plex Sans',sans-serif; font-style:normal; font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:3px;}
.brand .periode{font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; color:var(--ink-soft); font-weight:400; letter-spacing:.03em;}
@media (max-width:600px){
  .brand strong{font-size:.92rem; line-height:1.3;}
  .brand em{font-size:.6rem;}
  .brand .brand-text{max-width:170px;}
}
@media (max-width:360px){
  .brand .brand-text{max-width:145px;}
}
.navlinks{display:flex; align-items:center; gap:clamp(24px,3vw,44px); font-size:.98rem; font-family:'Fraunces',serif;}
.navgroup{position:relative;}
.navgroup > button{font:inherit; color:var(--ink); background:none; border:0; display:inline-flex; align-items:center; gap:5px; cursor:pointer; padding:6px 0; position:relative;}
.navgroup > button::before{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--blue-bright); transform:scaleX(0); transform-origin:center; transition:transform .25s ease;}
.navgroup > button:hover::before, .navgroup.open > button::before{transform:scaleX(1);}
.navgroup > button::after{content:"⌄"; font-size:.7rem; color:var(--ink-soft); transition:transform .2s ease;}
.navgroup.open > button::after{transform:rotate(180deg);}
.navgroup.open > button{color:var(--blue-bright);}
.navgroup .dropdown{position:absolute; top:100%; margin-top:10px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); min-width:230px; padding:6px 0; display:none; box-shadow:0 14px 28px rgba(19,24,31,.1); z-index:60;}
.navgroup.open .dropdown{display:block;}
.dropdown a{display:block; padding:10px 18px; font-size:.88rem; font-family:'IBM Plex Sans',sans-serif; color:var(--ink-soft); position:relative;}
.dropdown a::before{content:""; position:absolute; left:18px; bottom:7px; width:0; height:1px; background:var(--blue-bright); transition:width .2s ease;}
.dropdown a:hover{color:var(--blue-bright);}
.dropdown a:hover::before{width:calc(100% - 36px);}
/* Baris terakhir dropdown Layanan: jalan keluar ke halaman direktori penuh.
   Dropdown Layanan sudah 8 item — sudah di batas nyaman untuk dipindai
   sekilas, jadi menambah item baru sebaiknya lewat halaman itu, bukan sini. */
.dropdown a.dropdown-all{margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
  color:var(--navy); font-weight:600; font-size:.84rem;}
.dropdown a.dropdown-all::before{bottom:9px;}
.navlinks > a{color:var(--ink); position:relative; padding-bottom:4px;}
.navlinks > a::before{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--blue-bright); transform:scaleX(0); transform-origin:center; transition:transform .25s ease;}
.navlinks > a:hover{color:var(--blue-bright);}
.navlinks > a:hover::before{transform:scaleX(1);}
.burger{display:none; background:none; border:0; cursor:pointer;}
.burger span{display:block; width:20px; height:2px; background:var(--navy); margin:5px 0;}

/* ---------- INTRO / PORTAL BLOCK ---------- */
.intro-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; margin-top:26px;}
.intro-photo{aspect-ratio:4/3; background:transparent; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.intro-photo img{width:100%; height:100%; object-fit:contain; padding:32px;}
.intro-photo svg{width:64px; height:64px; opacity:.5;}
.intro-quote{font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--navy); background:var(--cream); padding:20px 26px; line-height:1.5;}

/* ---------- VISI MISI ---------- */
.vismis-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:34px;}
.quote-center{font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.55; max-width:460px;}
.plain-list{margin-top:6px; max-width:520px;}
.plain-list li{padding:5px 0 5px 18px; position:relative; font-size:.96rem;}
.plain-list li::before{content:"–"; position:absolute; left:0; color:var(--blue-bright);}
.on-dark .plain-list li::before{color:rgba(238,241,247,.8);}
.on-dark .plain-list li{color:rgba(238,241,247,.8);}
.note{margin-top:18px; font-size:.8rem; color:rgba(238,241,247,.55); font-style:italic;}
.note.on-light{color:var(--ink-soft);}

/* roadmap */
.roadmap{margin-top:30px; display:flex; flex-wrap:wrap; gap:26px 40px;}
.roadmap .phase{flex:1; min-width:180px;}
.roadmap .phase h4{font-size:.96rem; font-family:'Fraunces',serif; font-weight:500; color:#fff;}
.roadmap .phase.active h4{color:var(--pale); text-decoration:underline; text-underline-offset:4px;}
.roadmap .phase p{font-size:.85rem; color:rgba(238,241,247,.7); margin-top:4px;}

/* ---------- CARD GRID (modules / organisasi) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:34px;}
.card{display:block; transition:transform .3s cubic-bezier(.16,.8,.24,1), box-shadow .3s ease;}
.card:hover{transform:translateY(-6px); box-shadow:0 16px 32px -12px rgba(19,24,31,.18);}
.card-img{aspect-ratio:4/3; background:#c7cedb; display:flex; align-items:center; justify-content:center; position:relative;}
.card-img svg{width:36px; height:36px; opacity:.55;}
.card-label{margin-top:-16px; margin-left:14px; display:inline-block; background:var(--cream); padding:8px 14px; font-size:.86rem; font-family:'IBM Plex Sans',sans-serif; color:var(--ink); position:relative; box-shadow:0 4px 10px rgba(19,24,31,.08);}

/* ---------- SIMPLE LINKLIST (used inside light neutral sections) ---------- */
.linklist{margin-top:8px; max-width:640px;}
.linkrow{display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-family:'Fraunces',serif; font-size:1.08rem; color:var(--navy); transition:padding-left .3s cubic-bezier(.16,.8,.24,1), color .2s ease; cursor:pointer;}
.linkrow:hover{color:var(--blue-bright); padding-left:10px;}
.linkrow:active{padding-left:14px;}
.linkrow .arrow{font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; color:var(--ink-soft); transition:color .2s ease, transform .3s cubic-bezier(.16,.8,.24,1);}
.linkrow:hover .arrow{color:var(--blue-bright); transform:translateX(3px);}
.linklist a:first-child{border-top:1px solid var(--line);}
.bg-navy .linklist a:first-child{border-color:var(--line-on-dark);}
.bg-navy .linkrow{color:var(--ink-on-dark); border-color:var(--line-on-dark);}
.bg-navy .linkrow .arrow{color:rgba(238,241,247,.5);}
.bg-navy .linkrow:hover{color:var(--cream);}
.bg-navy .linkrow:hover .arrow{color:var(--cream);}

/* ---------- DIRECTORY (real UKM/UKK/HMJ data) ---------- */
.dir-toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:22px 0 26px;}
.dir-chip{font-family:'IBM Plex Sans',sans-serif; font-size:.82rem; padding:8px 15px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; border-radius:20px;}
.dir-chip:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
.dir-chip.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.dir-search{flex:1; min-width:180px; padding:9px 14px; border:1px solid var(--line); background:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.86rem; color:var(--ink); border-radius:20px;}
.dir-search:focus{outline:2px solid var(--blue-bright); outline-offset:1px;}
.dir-count{font-family:'IBM Plex Sans',sans-serif; font-size:.78rem; color:var(--ink-soft); margin-bottom:14px;}
.dir-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.dir-card{display:block; border:1px solid var(--line); background:#fff; padding:20px; border-radius:4px; text-decoration:none; color:inherit; opacity:0; transform:translateY(10px); animation:dirCardIn .4s ease forwards; transition:transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s ease, border-color .25s ease; position:relative;}
.dir-card::before{content:""; position:absolute; top:7px; left:7px; width:9px; height:9px; border-top:1.5px solid var(--blue-bright); border-left:1.5px solid var(--blue-bright); opacity:0; transition:opacity .2s ease;}
.dir-card::after{content:""; position:absolute; bottom:7px; right:7px; width:9px; height:9px; border-bottom:1.5px solid var(--blue-bright); border-right:1.5px solid var(--blue-bright); opacity:0; transition:opacity .2s ease;}
.dir-card:hover::before, .dir-card:hover::after{opacity:.8;}
.dir-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px -10px rgba(19,24,31,.15); border-color:var(--blue-bright);}
@keyframes dirCardIn{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .dir-card{animation:none; opacity:1; transform:none;} }
.dir-card-top{display:flex; gap:14px; align-items:flex-start;}
.dir-card-logo{flex-shrink:0; width:52px; height:52px; border-radius:50%; background:var(--pale); color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem;}
.dir-card .k{font-family:'IBM Plex Sans',sans-serif; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-bright); font-weight:600;}
.dir-card h5{font-family:'Fraunces',serif; font-weight:500; font-size:1.02rem; margin:4px 0 4px; color:var(--navy); line-height:1.3;}
.dir-card .d{font-size:.8rem; color:var(--ink-soft); line-height:1.45;}
.dir-card-ig{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:'IBM Plex Sans',sans-serif; font-size:.78rem; font-weight:600; color:var(--blue-bright);}
.dir-card-ig svg{width:15px; height:15px; flex-shrink:0;}
.dir-card-ig.pending{color:var(--ink-soft); font-weight:400; font-style:italic;}
.dir-empty{font-size:.86rem; color:var(--ink-soft); font-style:italic; padding:20px 0;}
@media (max-width:880px){.dir-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr;}}

/* ---------- Pager (dipakai di grid Berita/Artikel) ---------- */
.pager{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:32px; flex-wrap:wrap;}
.pager button{font-family:'IBM Plex Sans',sans-serif; font-size:.84rem; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; border-radius:20px; transition:border-color .2s ease, color .2s ease, background .2s ease;}
.pager button:hover:not(:disabled){border-color:var(--blue-bright); color:var(--blue-bright);}
.pager button.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.pager button:disabled{opacity:.4; cursor:not-allowed;}
.pager .pager-ellipsis{color:var(--ink-soft); font-size:.84rem; padding:0 2px;}

/* ---------- FAQ accordion (native <details>, no JS needed) ---------- */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
.faq-item summary{cursor:pointer; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.98rem; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.4rem; line-height:1; color:var(--blue-bright); flex-shrink:0; transition:transform .2s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{margin-top:12px; font-size:.92rem; line-height:1.75; color:var(--ink-soft); max-width:640px;}
.faq-group-title{margin:44px 0 18px;}
.faq-group-title:first-child{margin-top:0;}

/* ---------- Kontak page ---------- */
.kontak-maps{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:28px;}
.kontak-map-card{background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden;}
.kontak-map-card iframe{width:100%; height:260px; border:0; display:block;}
.kontak-map-card .body{padding:20px 22px;}
.kontak-map-card h5{font-family:'Fraunces',serif; font-weight:500; font-size:1.05rem; color:var(--navy);}
.kontak-map-card address{font-style:normal; font-size:.86rem; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
.kontak-map-card .maplink{font-size:.84rem; color:var(--blue-mid); display:inline-block; margin-top:12px;}

/* ---------- Peta Kampus besar, ala km.itb.ac.id/peta ---------- */
.peta-tabs{display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 0;}
.peta-tab{font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; font-weight:600; padding:11px 22px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; border-radius:30px; transition:all .2s ease;}
.peta-tab:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
.peta-tab.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.peta-frame-wrap{margin-top:20px; border:1px solid var(--line); background:#fff; overflow:hidden;}
.peta-frame-wrap iframe{width:100%; height:clamp(360px,55vh,560px); border:0; display:block;}
.peta-info{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 24px; border-top:1px solid var(--line); background:var(--pale);}
.peta-info h5{font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; color:var(--navy); display:flex; align-items:center; gap:8px;}
.peta-info h5::before{content:"📍";}
.peta-info address{font-style:normal; font-size:.86rem; color:var(--ink-soft); margin-top:4px;}
.peta-info .maplink{font-size:.84rem; color:#fff; background:var(--navy); padding:9px 18px; border-radius:20px; white-space:nowrap; transition:background .2s ease;}
.peta-info .maplink:hover{background:var(--blue-bright);}
.kontak-info{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:28px;}
.kontak-info-card{background:#fff; border:1px solid var(--line); border-radius:2px; padding:22px 24px;}
.kontak-info-card h5{font-family:'Fraunces',serif; font-weight:500; font-size:1rem; color:var(--navy); margin-bottom:10px;}
.kontak-info-card p{font-size:.86rem; color:var(--ink-soft); line-height:1.55;}
.kontak-info-card p + p{margin-top:8px;}
.kontak-info-card a{color:var(--blue-mid);}

/* ---------- LIGHT FORM FIELDS (student care, on cream/pale bg) ---------- */
.fld-light{width:100%; padding:11px 12px; font-family:'IBM Plex Sans',sans-serif; font-size:.92rem; border:1px solid var(--line); background:#fff; color:var(--ink);}
.fld-light:focus{outline:2px solid var(--blue-bright); outline-offset:1px;}
.lbl-light{display:block; font-size:.85rem; margin-bottom:6px; color:var(--ink-soft);}
.care-cat-btn{font-family:'IBM Plex Sans',sans-serif; font-size:.84rem; padding:9px 16px; background:#fff; border:1px solid var(--line); color:var(--ink); cursor:pointer;}
.care-cat-btn:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
.care-cat-btn.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.care-cat-btn.sensitive{border-color:#8a4a3a;}
.sensitive-box{background:#fff; border:1px solid #d8c2b8; padding:20px 22px; max-width:600px; font-size:.92rem; color:var(--ink-soft); line-height:1.6;}
.sensitive-box b{color:var(--ink);}
.sensitive-box .hotline{margin-top:14px; padding:12px 14px; background:var(--cream); border-left:3px solid var(--blue-bright); font-size:.86rem; color:var(--ink);}

.empty-state{margin-top:22px; font-size:.98rem; font-style:italic; text-align:center; color:rgba(238,241,247,.7);}
.empty-state.on-light{color:var(--ink-soft);}

.btn{display:inline-block; margin-top:20px; padding:12px 24px; font-family:'IBM Plex Sans',sans-serif; font-size:.88rem; border:1px solid var(--navy); color:var(--navy); transition:background .25s cubic-bezier(.16,.8,.24,1), color .25s ease, transform .18s ease, box-shadow .25s ease; cursor:pointer; background:none;}
.btn:hover{background:var(--navy); color:#fff; transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(1,76,141,.6);}
.btn:active{transform:translateY(0) scale(.98);}

.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.tags span{font-family:'IBM Plex Sans',sans-serif; font-size:.84rem; padding:9px 16px; background:rgba(255,255,255,.5); border:1px solid rgba(19,24,31,.15); color:var(--ink);}
.tags span.sensitive{background:var(--navy); color:#fff; border-color:var(--navy);}
.care-line{margin-top:16px; font-size:.94rem; max-width:600px;}
.care-line b{font-weight:600;}
.todo-chip{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Sans',sans-serif; font-size:.78rem; padding:5px 11px; border:1px dashed rgba(238,241,247,.4); color:rgba(238,241,247,.65);}

/* ---------- Partner/media logo strip (homepage) ---------- */
.partner-logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px; margin-top:30px;}
.partner-logo-slot{width:132px; height:64px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); border-radius:4px; padding:8px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; text-align:center; color:var(--ink-soft); background:rgba(255,255,255,.5);}
.partner-logo-slot img{max-width:100%; max-height:100%; object-fit:contain;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--ink-on-dark); padding:clamp(52px,7vw,80px) 0 26px; position:relative; overflow:hidden; border-top:1px solid rgba(238,241,247,.08);}
footer::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--blue-bright) 50%, transparent); opacity:.7; pointer-events:none;}
.footer-grid{display:grid; grid-template-columns:1.3fr .8fr .9fr .9fr; gap:36px; padding-bottom:32px; border-bottom:1px solid var(--line-on-dark); position:relative; z-index:2;}
.footer-grid h3{font-size:1.3rem; color:#fff;}
.footer-grid .brand-line{font-size:.84rem; color:rgba(238,241,247,.65); margin-top:10px; max-width:250px;}
.footer-grid .colhead{font-family:'Fraunces',serif; font-size:.92rem; color:var(--pale); margin-bottom:12px;}
.footer-grid ul li{margin-bottom:10px; font-size:.86rem; color:rgba(238,241,247,.8); display:flex; align-items:center; gap:8px;}
.footer-grid ul li a:hover{color:#fff;}
.footer-grid svg{width:15px; height:15px; flex-shrink:0; opacity:.85;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:20px; flex-wrap:wrap; gap:8px; font-size:.76rem; color:rgba(238,241,247,.5); position:relative; z-index:2;}

@media (max-width: 980px){
  .navlinks{position:fixed; inset:92px 0 0 0; background:var(--cream); flex-direction:column; align-items:flex-start; padding:26px clamp(20px,4vw,48px); gap:22px; transform:translateX(100%); transition:transform .3s ease; z-index:99; overflow-y:auto;}
  .navlinks.open{transform:translateX(0);}
  .navgroup{width:100%;}
  .navgroup .dropdown{position:static; transform:none; margin-top:8px; width:100%; border:none; box-shadow:none; padding:0 0 0 14px; display:none;}
  .navgroup.open .dropdown{display:block;}
  .burger{display:block;}
  .intro-grid{grid-template-columns:1fr;}
  .vismis-grid{grid-template-columns:1fr;}
  .visi-grid{grid-template-columns:1fr !important;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:28px;}
}

/* ---------- HERO SCROLL CUE ---------- */
.scroll-cue{display:flex; flex-direction:column; align-items:center; gap:10px; position:absolute; bottom:clamp(20px,4vh,40px); left:50%; transform:translateX(-50%); z-index:3;}
.scroll-cue span{font-family:'IBM Plex Sans',sans-serif; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(238,241,247,.5);}
.scroll-cue .dot{width:1px; height:26px; background:linear-gradient(#fff, transparent); animation:scrollDot 1.8s ease-in-out infinite;}
@keyframes scrollDot{0%{opacity:0; transform:translateY(-6px);} 50%{opacity:1;} 100%{opacity:0; transform:translateY(6px);}}
@media (prefers-reduced-motion: reduce){.scroll-cue .dot{animation:none; opacity:.6;}}

/* ---------- ROADMAP TABS + INDICATOR DASHBOARD ---------- */
.rm-tabs{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:30px; flex-wrap:wrap;}
.rm-tab{flex:1; min-width:160px; background:var(--paper); border:none; padding:18px 20px; text-align:left; cursor:pointer; font-family:inherit;}
.rm-tab .tt{font-family:'Fraunces',serif; font-size:1rem; color:var(--navy); display:flex; align-items:center; gap:8px;}
.rm-tab .tt .dot{width:7px; height:7px; border-radius:50%; background:var(--line); flex-shrink:0;}
.rm-tab.active{background:var(--navy);}
.rm-tab.active .tt{color:#fff;}
.rm-tab.active .tt .dot{background:#5fce8f;}
.rm-tab.is-plan.active .tt .dot{background:#e0b04a;}
.rm-tab .dd{font-size:.78rem; color:var(--ink-soft); margin-top:4px;}
.rm-tab.active .dd{color:rgba(238,241,247,.7);}
.rm-panels{border:1px solid var(--line); border-top:none; background:#fff; padding:clamp(24px,4vw,40px);}
.rm-panel{display:none;}
.rm-panel.active{display:block; animation:rmFade .35s ease;}
@keyframes rmFade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.rm-status{display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:12px; margin-bottom:16px;}
.rm-status.live{background:#e7f6ec; color:#1e7a44;}
.rm-status.plan{background:#faf1de; color:#8a6113;}
.rm-status .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.indicator-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:22px;}
.indicator-card{border:1px solid var(--line); padding:18px 20px;}
.indicator-card .lab{font-family:'IBM Plex Sans',sans-serif; font-size:.76rem; color:var(--ink-soft);}
.indicator-card .val{font-family:'Fraunces',serif; font-size:1.9rem; color:var(--navy); margin-top:6px; display:flex; align-items:baseline; gap:6px;}
.indicator-card .val .unit{font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; color:var(--ink-soft);}
.indicator-card .bar{margin-top:12px; height:6px; background:var(--pale); position:relative; overflow:hidden;}
.indicator-card .bar i{display:block; height:100%; background:var(--blue-bright); width:0%; transition:width 1s cubic-bezier(.16,.8,.24,1);}
.rm-panel.active .indicator-card .bar i{width:var(--pct);}
.indicator-card.is-plan .val{color:var(--ink-soft); opacity:.6;}
.indicator-card.is-plan .bar i{background:var(--ink-soft); opacity:.35;}
.rm-checklist{margin-top:22px; display:grid; gap:10px;}
.rm-checklist li{display:flex; align-items:center; gap:10px; font-size:.92rem;}
.rm-checklist li a{color:var(--navy); font-weight:600;}
.rm-checklist li a:hover{color:var(--blue-bright);}
.rm-checklist .chk{width:18px; height:18px; border-radius:50%; background:#1e7a44; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0;}
.rm-checklist .chk.pending{background:none; border:1.5px dashed var(--ink-soft); opacity:.5;}
.rm-note{margin-top:20px; font-size:.78rem; color:var(--ink-soft); font-style:italic; display:flex; gap:8px; align-items:flex-start;}

/* ---------- ARTICLES ---------- */
.article-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:30px;}
.article-card{display:block; background:#fff; border:1px solid var(--line); transition:transform .3s cubic-bezier(.16,.8,.24,1), box-shadow .3s ease;}
.article-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px -14px rgba(19,24,31,.2);}
.article-card .thumb{aspect-ratio:16/10; background:linear-gradient(135deg,var(--blue-mid),var(--navy)); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.article-card .thumb svg{width:34px; height:34px; opacity:.7;}
.article-card .thumb .tag{position:absolute; top:12px; left:12px; font-family:'IBM Plex Sans',sans-serif; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.92); color:var(--navy); padding:4px 10px;}
.article-card .body{padding:18px 20px;}
.article-card .meta{font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; color:var(--ink-soft); letter-spacing:.03em;}
.article-card h4{font-family:'Fraunces',serif; font-weight:500; font-size:1.12rem; color:var(--navy); margin-top:8px; line-height:1.35;}
.article-card p{font-size:.85rem; color:var(--ink-soft); margin-top:8px;}
.article-card .readmore{margin-top:12px; font-family:'IBM Plex Sans',sans-serif; font-size:.8rem; color:var(--blue-bright); display:flex; align-items:center; gap:5px;}
.article-card:hover .readmore{gap:9px;}

/* ---------- ARTICLE DETAIL PAGE ---------- */
.article-body{max-width:680px; margin:0 auto;}
.article-body .meta{font-family:'IBM Plex Sans',sans-serif; font-size:.8rem; color:var(--ink-soft); letter-spacing:.03em;}
.article-body h1{font-size:clamp(1.8rem,3.6vw,2.5rem); margin-top:10px;}
.article-body .lead{font-family:'Fraunces',serif; font-style:italic; font-size:1.1rem; color:var(--ink-soft); margin-top:16px; line-height:1.6;}
.article-body .content{margin-top:28px; font-size:1rem; line-height:1.85; color:var(--ink);}
.article-body .content p{max-width:none; margin-bottom:20px;}
.article-body .content h3{font-size:1.25rem; margin:32px 0 12px; color:var(--navy);}
.article-body .content h4{font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.95rem; margin:24px 0 8px; color:var(--navy);}
.article-body .content ul, .article-body .content ol{margin:0 0 20px; padding-left:22px; line-height:1.8;}
.article-body .content li{margin-bottom:6px;}
.article-body .content blockquote{border-left:3px solid var(--blue-bright); padding-left:18px; margin:24px 0; font-family:'Fraunces',serif; font-style:italic; color:var(--navy);}
.article-back{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Sans',sans-serif; font-size:.86rem; color:var(--ink-soft); margin-top:40px;}
.article-back:hover{color:var(--blue-bright);}

/* ---------- Aksesibilitas (9) ---------- */
/* Skip to content — tersembunyi visual sampai di-fokus pakai keyboard (Tab),
   supaya pengguna keyboard/screen reader bisa lompat langsung ke konten
   tanpa harus melewati seluruh menu navigasi di tiap halaman. */
.skip-link{
  position:absolute; left:8px; top:-60px; z-index:2000;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:4px;
  font-family:'IBM Plex Sans',sans-serif; font-size:.86rem; font-weight:600;
  text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{top:8px;}

/* Outline fokus yang konsisten & cukup kontras untuk semua elemen interaktif
   (link, tombol, field) — sebelumnya cuma sebagian elemen yang punya ini. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--blue-bright); outline-offset:2px;
}

/* ---------- Cetak (12) — dipakai halaman SOP/dokumen resmi ---------- */
@media print{
  header.site, footer, .burger, .btn, .admin-btn, .pixel, .page-hero .breadcrumb,
  script, .dir-toolbar, .pager, form, #navlinks{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  main{ margin:0 !important; }
  a{ color:#000 !important; text-decoration:underline; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
  .article-body, .dir-card, .content{ max-width:100% !important; }
  h1,h2,h3,h4{ page-break-after:avoid; }
  table{ page-break-inside:avoid; }
}

.eyebrow-tag{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;}
.eyebrow-tag::before{content:""; width:18px; height:1px; background:currentColor; opacity:.6;}

/* ---------- STAT BAND (angka hidup di homepage, count-up saat discroll) ---------- */
.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px); margin-top:6px;}
.stat-item{text-align:center; position:relative;}
.stat-item:not(:last-child)::after{content:""; position:absolute; right:calc(clamp(16px,3vw,40px) / -2); top:12%; height:76%; width:1px; background:var(--line-on-dark);}
.stat-item .stat-num{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.2rem,5vw,3.3rem); line-height:1; color:#fff; letter-spacing:-.02em;}
.stat-item .stat-num .stat-suffix{color:var(--blue-bright); margin-left:1px;}
.stat-item .stat-label{font-family:'IBM Plex Sans',sans-serif; font-size:.8rem; letter-spacing:.03em; color:rgba(238,241,247,.62); margin-top:10px; line-height:1.4;}
@media (max-width:680px){
  .stat-band{grid-template-columns:1fr 1fr; gap:28px 16px;}
  .stat-item:nth-child(2)::after{display:none;}
}

/* ---------- AGENDA MENDATANG (strip acara terdekat, tarik dari /api/events) ---------- */
.agenda-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:28px;}
.agenda-card{display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; transition:transform .3s cubic-bezier(.16,.8,.24,1), box-shadow .3s ease; align-items:flex-start;}
.agenda-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px -16px rgba(19,24,31,.22);}
.agenda-date{flex-shrink:0; width:54px; text-align:center; background:var(--navy); color:#fff; border-radius:8px; padding:8px 0; line-height:1;}
.agenda-date .d{font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem;}
.agenda-date .m{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; margin-top:3px; color:rgba(238,241,247,.85);}
.agenda-body .cat{font-family:'IBM Plex Sans',sans-serif; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-bright);}
.agenda-body h4{font-family:'Fraunces',serif; font-weight:500; font-size:1rem; color:var(--navy); margin:3px 0 5px; line-height:1.3;}
.agenda-body .meta{font-size:.78rem; color:var(--ink-soft); line-height:1.5;}

/* Aksen sudut kecil di pojok card — jejak "corner mark" khas identitas Zeitgeist */
.corner-mark{position:relative;}
.corner-mark::before{content:""; position:absolute; top:8px; left:8px; width:10px; height:10px; border-top:1.5px solid var(--blue-bright); border-left:1.5px solid var(--blue-bright); opacity:.5; pointer-events:none;}
.corner-mark::after{content:""; position:absolute; bottom:8px; right:8px; width:10px; height:10px; border-bottom:1.5px solid var(--blue-bright); border-right:1.5px solid var(--blue-bright); opacity:.5; pointer-events:none;}
.on-dark.corner-mark::before, .on-dark.corner-mark::after, .on-dark .corner-mark::before, .on-dark .corner-mark::after{border-color:#fff; opacity:.4;}

/* ---------- Kartu peta (Kontak) — versi lebih hidup ---------- */
.peta-frame-wrap{position:relative;}
.peta-frame-wrap::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:4px; background:linear-gradient(90deg, var(--navy), var(--blue-bright), var(--navy)); z-index:2;}

/* ==========================================================================
   FASE 11 — Homepage padat & data-forward.
   Palet resmi, Fraunces/IBM Plex, dan sudut tajam TETAP dipertahankan;
   yang berubah adalah kepadatan informasi: satu layar memuat lebih banyak
   konten nyata, bukan satu gagasan per section dengan ruang kosong lebar.
   ========================================================================== */

/* Kepala section yang seragam menggantikan .htitle kotak+plus */
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.sec-kicker{font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright);}
.sec-title{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; color:var(--navy); margin-top:6px; letter-spacing:-.01em;}
.sec-sub{font-size:.9rem; color:var(--ink-soft); margin-top:8px; max-width:520px; line-height:1.6;}
.sec-more{font-family:'IBM Plex Sans',sans-serif; font-size:.85rem; font-weight:600; color:var(--navy); white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.sec-more span{transition:transform .2s ease;}
.sec-more:hover span{transform:translateX(4px);}
.on-dark .sec-title{color:#fff;}
.on-dark .sec-kicker{color:var(--pale);}
.on-dark .sec-sub{color:rgba(238,241,247,.75);}
.on-dark .sec-more{color:#fff;}

/* Dua kolom: berita (lebar) + agenda (sempit) */
.home-split{display:grid; grid-template-columns:minmax(0,2.05fr) minmax(0,1fr); gap:30px; align-items:start;}
@media (max-width:900px){ .home-split{grid-template-columns:1fr;} }

/* Kartu berita */
.berita-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px;}
.berita-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .28s cubic-bezier(.16,.8,.24,1), box-shadow .28s ease;}
.berita-card:hover{transform:translateY(-5px); box-shadow:0 20px 40px -22px rgba(19,24,31,.4);}
.berita-thumb{position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,var(--blue-mid),var(--navy)); display:grid; place-items:center; overflow:hidden;}
.berita-thumb img{width:100%; height:100%; object-fit:cover;}
.berita-thumb-mark{font-family:'Fraunces',serif; font-size:2.6rem; color:rgba(255,255,255,.22); line-height:1;}
.berita-tag{position:absolute; left:10px; bottom:10px; background:rgba(255,255,255,.94); color:var(--navy); font-family:'IBM Plex Sans',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px;}
.berita-body{padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.berita-meta{font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em;}
.berita-body h3{font-family:'Fraunces',serif; font-size:1.02rem; line-height:1.3; color:var(--navy);}
.berita-body p{font-size:.84rem; line-height:1.55; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

/* Panel agenda */
.agenda-panel{background:#fff; border:1px solid var(--line); padding:20px 20px 16px;}
.agenda-panel-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line);}
.agenda-panel-head h3{font-family:'Fraunces',serif; font-size:1.08rem; color:var(--navy);}
.agenda-panel-head a{font-size:.78rem; font-weight:600; color:var(--blue-mid); white-space:nowrap;}
.agenda-list{list-style:none; margin:0; padding:0;}
.agenda-list li + li{border-top:1px solid var(--line);}
.agenda-list a{display:flex; gap:13px; padding:12px 0; align-items:flex-start;}
.agenda-list a:hover .ag-txt strong{color:var(--blue-bright);}
.ag-date{flex-shrink:0; width:44px; text-align:center; background:var(--navy); color:#fff; padding:6px 0 5px; line-height:1;}
.ag-date b{display:block; font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600;}
.ag-date i{display:block; font-style:normal; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; margin-top:3px; color:rgba(238,241,247,.85);}
.ag-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.ag-txt strong{font-size:.88rem; font-weight:600; color:var(--ink); line-height:1.35; transition:color .18s ease;}
.ag-txt span{font-size:.74rem; color:var(--ink-soft);}

/* Grid 15 kementerian dengan lambang asli */
.kem-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:12px;}
.kem-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; background:#fff; border:1px solid var(--line); padding:18px 12px 15px; transition:transform .24s cubic-bezier(.16,.8,.24,1), box-shadow .24s ease, border-color .24s ease;}
.kem-card:hover{transform:translateY(-4px); border-color:var(--blue-bright); box-shadow:0 16px 32px -20px rgba(1,76,141,.5);}
.kem-card img{width:46px; height:46px; object-fit:contain;}
.kem-card strong{font-size:.8rem; font-weight:600; color:var(--navy); line-height:1.3;}
.kem-card em{font-style:normal; font-size:.68rem; color:var(--ink-soft); letter-spacing:.03em;}

/* Grid layanan (dulu 7 baris teks polos) */
.layanan-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px;}
.lay-card{display:flex; flex-direction:column; gap:5px; background:rgba(255,255,255,.07); border:1px solid rgba(238,241,247,.16); padding:18px 18px 16px; transition:background .22s ease, transform .22s cubic-bezier(.16,.8,.24,1), border-color .22s ease;}
.lay-card:hover{background:rgba(255,255,255,.13); border-color:rgba(238,241,247,.4); transform:translateY(-3px);}
.lay-ico{font-size:1.15rem; color:var(--pale); line-height:1; margin-bottom:5px;}
.lay-card strong{font-family:'Fraunces',serif; font-size:1rem; font-weight:500; color:#fff;}
.lay-card span:not(.lay-ico){font-size:.8rem; line-height:1.5; color:rgba(238,241,247,.72);}

/* Skeleton & empty state */
.skel-card{aspect-ratio:16/10; background:linear-gradient(100deg,var(--pale) 30%,rgba(255,255,255,.65) 50%,var(--pale) 70%); background-size:220% 100%; animation:skelShine 1.5s ease-in-out infinite;}
@keyframes skelShine{0%{background-position:120% 0;} 100%{background-position:-20% 0;}}
.empty-inline{font-size:.86rem; color:var(--ink-soft); padding:26px 0; text-align:center;}
@media (prefers-reduced-motion: reduce){
  .skel-card{animation:none;}
  .berita-card, .kem-card, .lay-card{transition:none;}
}

/* ==========================================================================
   FASE 12 — REDESIGN: buang kesan "kotak-kotak", masuk ke bahasa visual
   Y2K/grainy yang lebih tegas. Palet resmi 4 warna, Fraunces/IBM Plex, dan
   sudut tajam TETAP; yang dibongkar adalah komponen yang bikin situs terasa
   template: heading kotak biru, tombol pill kebulatan, dan kartu seragam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADING — dulu kotak biru penuh + tanda plus (dipakai 32x di 12 halaman).
   Itu biang "kotak-kotak"-nya. Sekarang jadi judul editorial besar dengan
   aksen garis tebal + titik, tanpa mengubah satu baris HTML pun.
   -------------------------------------------------------------------------- */
.htitle{display:block; margin-bottom:10px; position:relative;}
.htitle .hbox{
  display:block; background:none !important; color:var(--navy) !important;
  padding:0; font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.08; letter-spacing:-.025em;
}
.htitle .hbox::after{
  content:""; display:block; width:52px; height:5px; margin-top:12px;
  background:linear-gradient(90deg,var(--navy),var(--blue-bright));
}
/* Tanda plus lama jadi aksen kecil di kanan atas, bukan kotak tambahan */
.htitle .hplus{position:absolute; top:2px; right:0; width:12px; height:12px; opacity:.5;}
.htitle .hplus::before{left:5px; top:0; width:2px; height:12px;}
.htitle .hplus::after{top:5px; left:0; width:12px; height:2px;}
.on-dark .htitle .hbox{color:#fff !important;}
.on-dark .htitle .hbox::after{background:linear-gradient(90deg,var(--pale),rgba(238,241,247,.25));}
.on-pale .htitle .hbox{color:var(--navy) !important;}

/* --------------------------------------------------------------------------
   2. TOMBOL PILL — "rounded banget". Dulu border-radius 20-30px (kapsul penuh),
   bentrok dengan estetika minimalis bersudut tajam. Dibuat tegas & grafis.
   -------------------------------------------------------------------------- */
.dir-chip, .dir-search, .pager button, .peta-tab, .peta-info .maplink{border-radius:2px !important;}
.dir-chip, .peta-tab{
  font-weight:600; letter-spacing:.01em; text-transform:uppercase; font-size:.74rem;
  border:1.5px solid var(--line); transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.dir-chip.active, .peta-tab.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.dir-chip:hover, .peta-tab:hover{border-color:var(--navy); color:var(--navy);}
.dir-chip.active:hover, .peta-tab.active:hover{color:#fff;}

/* --------------------------------------------------------------------------
   3. KARTU LEMBAGA (UKM/UKK/HMJ) — dulu 84 kotak putih nyaris identik, 69 di
   antaranya bertuliskan "Instagram belum terverifikasi" dengan huruf miring
   abu-abu. Itu yang bikin terlihat murah & belum jadi.
   Sekarang: pita warna per rumpun, inisial besar bergaya, tipografi tegas,
   dan status IG jadi chip kecil — bukan kalimat permintaan maaf.
   -------------------------------------------------------------------------- */
.dir-grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr)) !important; gap:12px !important;}
.dir-card{
  border-radius:0 !important; padding:0 !important; overflow:hidden;
  background:#fff;
  display:flex !important; flex-direction:column;
}
.dir-card::before{display:none !important;}
.dir-card:hover{transform:translateY(-4px);}
/* Pita atas — warna diambil dari rumpun lewat nth-child supaya tetap dalam
   keluarga palet resmi (turunan navy/blue), tidak memakai warna asing. */
.dir-card-top{
  padding:16px 16px 13px !important; gap:12px !important; align-items:center !important;
  background:linear-gradient(135deg,var(--pale),rgba(227,234,241,.35)); position:relative;
}
.dir-card-top::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--navy),var(--blue-bright));}
.dir-card-logo{
  width:46px !important; height:46px !important; border-radius:0 !important;
  background:var(--navy) !important; color:#fff !important; font-size:1.05rem !important;
  letter-spacing:-.02em; box-shadow:3px 3px 0 rgba(1,76,141,.22);
}
.dir-card .k{font-size:.62rem !important; letter-spacing:.1em !important; color:var(--blue-mid) !important;}
.dir-card h5{font-size:.98rem !important; letter-spacing:-.015em; margin:3px 0 0 !important;}
.dir-card .d{padding:12px 16px 0; margin-top:0 !important; font-size:.79rem !important; flex:1;}
.dir-card-ig{
  margin:12px 16px 14px !important; padding:4px 9px; border-radius:2px;
  background:var(--navy); color:#fff !important; font-size:.7rem !important;
  letter-spacing:.02em; align-self:flex-start;
}
.dir-card-ig svg{width:12px !important; height:12px !important;}
/* Yang belum punya IG: cukup garis tipis, bukan kalimat minta maaf bercetak miring */
.dir-card-ig.pending{
  background:none; color:var(--ink-soft) !important; font-style:normal !important;
  border:1px dashed var(--line); font-size:.66rem !important; opacity:.75;
}

/* --------------------------------------------------------------------------
   4. AKSEN Y2K — elemen grafis tegas: stiker miring, angka besar bergradasi
   krom, dan garis pindai halus. Dipakai lewat kelas, jadi bisa ditempel di
   mana perlu tanpa mengganggu komponen lain.
   -------------------------------------------------------------------------- */
.y2k-sticker{
  display:inline-block; transform:rotate(-2.5deg); background:var(--navy); color:#fff;
  font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 13px;
  box-shadow:4px 4px 0 var(--blue-bright);
}
.y2k-chrome{
  background:linear-gradient(180deg,#fff 0%,var(--pale) 42%,var(--blue-bright) 55%,var(--navy) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:-.03em;
}
.y2k-scan{position:relative;}
.y2k-scan::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:repeating-linear-gradient(0deg, rgba(1,76,141,.6) 0 1px, transparent 1px 4px);
}

/* Angka statistik jadi lebih besar & bergaya krom (kesan Y2K) */
.stat-num{letter-spacing:-.035em;}

/* --------------------------------------------------------------------------
   5. KARTU KEMENTERIAN di homepage — dulu terlalu polos & seragam.
   Diberi bobot: lambang lebih besar, garis aksen, dan efek tekan.
   -------------------------------------------------------------------------- */
.kem-card{border-radius:0 !important; padding:20px 12px 16px !important;}
.kem-card:hover{}
.kem-card img{width:54px !important; height:54px !important;}
.kem-card strong{font-size:.82rem !important; letter-spacing:-.01em;}

/* Kartu berita & layanan ikut ditegaskan supaya satu bahasa */
.berita-card{border-radius:0 !important;}
.berita-card:hover{}
.berita-tag{border-radius:0 !important; letter-spacing:.08em !important;}
.lay-card{border-radius:0 !important;}
.lay-card:hover{}
.agenda-panel{border-radius:0 !important;}
.ag-date{border-radius:0 !important;}
.sec-title{letter-spacing:-.025em;}

@media (prefers-reduced-motion: reduce){
  .dir-card, .kem-card, .berita-card, .lay-card{transition:none !important;}
}


/* Inline style lama pada .hplus (mis. background:#fff) bisa memunculkan kotak putih kecil — dinetralkan. */
.htitle .hplus{background:none !important;}

/* ==========================================================================
   FASE 13 — Navbar SENGAJA dikembalikan ke desain sebelumnya.
   Percobaan merombaknya (bilah 74px, menu IBM Plex kapital, dropdown
   bersudut tajam, Kontak jadi tombol padat) DITOLAK pengguna: versi lama
   dinilai lebih bagus. Jangan diulang tanpa diminta.
   Yang di bawah ini hanya komponen NON-navbar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sisa komponen lama yang masih memakai bahasa visual lama.
   -------------------------------------------------------------------------- */

/* Kutipan intro & visi — dulu kotak krem polos */
.intro-quote{border-left:5px solid var(--blue-bright); background:var(--paper); padding:18px 22px;}

/* Daftar misi: penanda strip diganti penanda blok bernomor */
.plain-list li{padding-left:26px;}
.plain-list li::before{content:""; top:14px; left:0; width:14px; height:2.5px; background:var(--blue-bright);}
.on-dark .plain-list li::before{background:var(--pale);}

/* Baris link lama (.linkrow) — dibuat lebih grafis */
.linkrow{border-radius:0 !important;}

/* Tombol utama: sudut tajam, bayangan padat saat hover */
.btn{border-radius:0; border-width:1.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.8rem;}
.btn:hover{box-shadow:5px 5px 0 -1px var(--blue-bright);}

/* Kartu artikel lama */
.article-card, .card{border-radius:0 !important;}

/* Slot logo mitra */
.partner-logo-slot{border-radius:0 !important; border:1.5px solid var(--line);}

/* Judul halaman dalam (page-hero) dibuat lebih besar & rapat */
.page-hero h1{font-size:clamp(2.1rem,5vw,3.2rem); letter-spacing:-.03em;}
.page-hero .eyebrow{color:var(--pale); font-weight:600;}

/* ==========================================================================
   FASE 14 — KACA & GERAK.
   Permintaan: "dinamis, jangan statis, lebih modern, banyak transparannya".

   Kuncinya bukan menempel blur ke mana-mana. Kaca hanya terlihat kalau ada
   SESUATU DI BELAKANGNYA yang bergerak — makanya tiap permukaan kaca di sini
   selalu berpasangan dengan lapisan cahaya yang bergerak pelan di bawahnya.
   Palet resmi, Fraunces/IBM Plex, sudut tajam, dan navbar TETAP.
   ========================================================================== */

:root{
  /* Token kaca — dipakai ulang, bukan nilai acak di tiap komponen */
  --kaca-terang:rgba(255,255,255,.62);
  --kaca-terang-hover:rgba(255,255,255,.78);
  --kaca-gelap:rgba(255,255,255,.08);
  --kaca-gelap-hover:rgba(255,255,255,.14);
  --kaca-garis:rgba(255,255,255,.22);
  --kaca-garis-terang:rgba(1,76,141,.14);
  --kaca-blur:blur(16px) saturate(1.5);
  --pegas:cubic-bezier(.16,.84,.28,1);
}

/* --------------------------------------------------------------------------
   1. CAHAYA BERGERAK — "isi" di balik kaca.
   Dua bola cahaya besar melayang pelan di section gelap. Tanpa ini, kaca
   cuma terlihat seperti kotak abu-abu.
   -------------------------------------------------------------------------- */
.bg-navy, .bg-blue{position:relative; isolation:isolate;}
.bg-navy::before, .bg-blue::before{
  content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 44% at 22% 30%, rgba(59,127,184,.55), transparent 62%),
    radial-gradient(32% 38% at 78% 68%, rgba(227,234,241,.20), transparent 64%);
  animation:kabut 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kabut{
  0%  {transform:translate3d(-4%,-3%,0) scale(1);}
  50% {transform:translate3d(3%,2%,0) scale(1.08);}
  100%{transform:translate3d(5%,-2%,0) scale(1.03);}
}
.bg-navy > *, .bg-blue > *{position:relative; z-index:2;}

/* Section terang dapat cahaya lembut juga, supaya kaca putih punya isi */
.bg-paper, .bg-cream{position:relative; isolation:isolate;}
.bg-paper::before, .bg-cream::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 40% at 12% 0%, rgba(59,127,184,.13), transparent 60%),
    radial-gradient(45% 45% at 92% 100%, rgba(1,76,141,.10), transparent 62%);
}
.bg-paper > *, .bg-cream > *{position:relative; z-index:2;}

/* --------------------------------------------------------------------------
   2. PERMUKAAN KACA
   -------------------------------------------------------------------------- */
.berita-card,
.kem-card,
.agenda-panel,
.peluang-card,
.info-card,
.dir-card,
.seskab-card{
  background:var(--kaca-terang);
  -webkit-backdrop-filter:var(--kaca-blur);
  backdrop-filter:var(--kaca-blur);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 18px 40px -28px rgba(1,76,141,.45);
  transition:
    transform .45s var(--pegas),
    background .3s ease,
    border-color .3s ease,
    box-shadow .45s var(--pegas);
}
.berita-card:hover,
.kem-card:hover,
.peluang-card:hover,
.dir-card:hover{
  transform:translateY(-6px);
  background:var(--kaca-terang-hover);
  border-color:rgba(255,255,255,.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 28px 55px -26px rgba(1,76,141,.55);
}

/* Kaca di atas latar gelap */
.lay-card{
  background:var(--kaca-gelap);
  -webkit-backdrop-filter:var(--kaca-blur);
  backdrop-filter:var(--kaca-blur);
  border:1px solid var(--kaca-garis);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset;
  transition:transform .45s var(--pegas), background .3s ease, border-color .3s ease;
}
.lay-card:hover{
  transform:translateY(-5px);
  background:var(--kaca-gelap-hover);
  border-color:rgba(255,255,255,.45);
}

/* Kartu tetap bersudut tajam — estetika situs dipertahankan */
.berita-card, .kem-card, .lay-card, .agenda-panel, .peluang-card, .dir-card{border-radius:0;}

/* --------------------------------------------------------------------------
   3. SOROTAN MENGIKUTI KURSOR
   Tiap kartu punya lapisan sorot yang posisinya diatur --mx/--my dari JS.
   Inilah yang membuat grid terasa hidup saat kursor lewat, bukan diam.
   -------------------------------------------------------------------------- */
.berita-card, .kem-card, .lay-card, .peluang-card, .dir-card{position:relative; overflow:hidden;}
.berita-card::after,
.kem-card::after,
.lay-card::after,
.peluang-card::after,
.dir-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(59,127,184,.22), transparent 70%);
}
.lay-card::after{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.20), transparent 70%);}
.berita-card:hover::after,
.kem-card:hover::after,
.lay-card:hover::after,
.peluang-card:hover::after,
.dir-card:hover::after{opacity:1;}
.berita-card > *, .kem-card > *, .lay-card > *, .peluang-card > *, .dir-card > *{position:relative; z-index:1;}

/* --------------------------------------------------------------------------
   4. STAT BAND JADI PANEL KACA
   -------------------------------------------------------------------------- */
.stat-band{
  gap:1px; background:var(--kaca-garis);
  border:1px solid var(--kaca-garis);
  -webkit-backdrop-filter:var(--kaca-blur);
  backdrop-filter:var(--kaca-blur);
}
.stat-item{
  background:rgba(255,255,255,.07);
  padding:24px 16px; text-align:center;
  transition:background .3s ease;
}
.stat-item:hover{background:rgba(255,255,255,.15);}

/* --------------------------------------------------------------------------
   5. MUNCUL BERURUTAN SAAT DIGULIR
   Kartu dalam satu grid tidak muncul serempak, tapi menyusul satu per satu.
   Ini yang paling terasa "tidak statis".
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .7s var(--pegas), transform .7s var(--pegas);
}
[data-reveal].is-visible{opacity:1; transform:none;}
.berita-grid > *, .kem-grid > *, .layanan-grid > *, .peluang-grid > *, .dir-grid > *{
  opacity:0; transform:translateY(22px);
  animation:masuk .6s var(--pegas) forwards;
  animation-delay:calc(var(--i, 0) * 55ms);
}
@keyframes masuk{to{opacity:1; transform:none;}}

/* --------------------------------------------------------------------------
   6. (dikosongkan) Bilah kemajuan gulir DIHAPUS atas permintaan pengguna —
   garis bergerak di puncak halaman saat menggulir dinilai mengganggu.
   Jangan ditambahkan lagi.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. JUDUL SECTION — garis aksen ikut memanjang saat masuk layar
   -------------------------------------------------------------------------- */
.htitle .hbox::after{
  width:0; transition:width .8s var(--pegas) .15s;
}
[data-reveal].is-visible .hbox::after,
.is-visible .htitle .hbox::after{width:52px;}
.sec-title{letter-spacing:-.025em;}

/* --------------------------------------------------------------------------
   8. HERO — panel kaca supaya teks berdiri di atas foto, bukan menempel
   -------------------------------------------------------------------------- */
.hero-content{
  background:rgba(1,76,141,.16);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  border-left:3px solid rgba(255,255,255,.55);
  padding:26px 30px;
  max-width:min(760px,100%);
}

/* --------------------------------------------------------------------------
   9. TOMBOL — isian menyapu, bukan ganti warna mendadak
   -------------------------------------------------------------------------- */
.btn{position:relative; overflow:hidden; z-index:0; transition:color .3s ease, transform .3s var(--pegas);}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--navy);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--pegas);
}
.btn:hover{transform:translateY(-2px); box-shadow:none;}
.btn:hover::before{transform:scaleX(1);}

/* --------------------------------------------------------------------------
   Hormati pengguna yang mematikan animasi.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .bg-navy::before, .bg-blue::before{animation:none;}
  .berita-grid > *, .kem-grid > *, .layanan-grid > *, .peluang-grid > *, .dir-grid > *{
    animation:none; opacity:1; transform:none;
  }
  .berita-card, .kem-card, .lay-card, .peluang-card, .dir-card{transition:none;}
}

/* Peramban tanpa backdrop-filter tetap dapat permukaan solid yang layak */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .berita-card, .kem-card, .agenda-panel, .peluang-card, .info-card, .dir-card{background:#fff;}
  .lay-card{background:rgba(255,255,255,.14);}
  .stat-band{background:rgba(255,255,255,.10);}
}