/* =========================================================
   Fakultas Kedokteran — Universitas Muhammadiyah Tangerang
   Design system  •  assets/css/style.css
   Palet diambil dari materi cetak resmi FK UMT (poster & signage)
   ========================================================= */

:root{
  /* Brand */
  --biru-tua:#0B2E7A;
  --biru:#1449C6;
  --biru-terang:#2E86F0;
  --biru-langit:#5FBDF7;
  --navy:#0A1B3D;
  --emas:#FFC220;
  --hijau-fk:#8CC63F;
  --merah:#E23B3B;

  /* Netral */
  --putih:#ffffff;
  --abu-50:#F6F8FC;
  --abu-100:#EEF2F9;
  --abu-200:#DFE6F1;
  --abu-400:#9AA7BD;
  --abu-600:#5B6981;
  --tinta:#16243D;

  /* Semantik */
  --bg:var(--putih);
  --surface:var(--abu-50);
  --teks:var(--tinta);
  --teks-lembut:var(--abu-600);
  --garis:var(--abu-200);

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(10,27,61,.06), 0 2px 8px rgba(10,27,61,.05);
  --shadow:0 6px 18px rgba(10,27,61,.09), 0 2px 6px rgba(10,27,61,.05);
  --shadow-lg:0 24px 60px rgba(10,27,61,.16), 0 6px 18px rgba(10,27,61,.08);

  --maks:1180px;
  --nav-h:76px;

  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; font-family:var(--font); color:var(--teks); background:var(--bg);
  font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--biru); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.18; font-weight:800; letter-spacing:-.02em; color:var(--biru-tua)}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.35rem)}
h3{font-size:clamp(1.12rem,1.7vw,1.35rem)}
p{margin:0 0 1rem}
ul{margin:0 0 1rem; padding-left:1.15rem}
li{margin-bottom:.4rem}
:focus-visible{outline:3px solid var(--biru-terang); outline-offset:3px; border-radius:6px}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maks); margin-inline:auto; padding-inline:22px}
.section{padding:clamp(56px,7vw,96px) 0}
.section--surface{background:var(--surface)}
.section--tint{background:linear-gradient(180deg,#F3F8FF 0%, #ffffff 100%)}
.grid{display:grid; gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- Skip link ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--biru-tua); color:#fff; padding:12px 18px; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- Header ---------- */
.topbar{background:var(--navy); color:#C9D8F5; font-size:.82rem}
.topbar .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; min-height:38px; flex-wrap:wrap}
.topbar a{color:#DCE8FF}
.topbar__left{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.topbar__left span{display:inline-flex; gap:7px; align-items:center}
.topbar__soc{display:flex; gap:14px; align-items:center}

.nav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--garis);
}
.nav__inner{display:flex; align-items:center; gap:20px; min-height:var(--nav-h)}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand img{height:46px; width:auto}
.brand:hover{text-decoration:none}
.nav__menu{margin-left:auto; display:flex; align-items:center; gap:4px; list-style:none; padding:0}
.nav__menu a{
  display:block; padding:10px 13px; border-radius:10px; color:var(--tinta);
  font-weight:600; font-size:.94rem; letter-spacing:-.01em;
}
.nav__menu a:hover{background:var(--abu-100); text-decoration:none; color:var(--biru-tua)}
.nav__menu a[aria-current="page"]{color:var(--biru); background:#EAF1FF}
.nav__cta{
  background:linear-gradient(135deg,var(--biru) 0%,var(--biru-terang) 100%); color:#fff!important;
  padding:11px 20px!important; border-radius:999px!important; box-shadow:0 6px 16px rgba(20,73,198,.28);
}
.nav__cta:hover{filter:brightness(1.07)}
.burger{
  margin-left:auto; display:none; width:46px; height:42px; border:1px solid var(--garis);
  background:#fff; border-radius:12px; cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.burger span{display:block; width:20px; height:2px; background:var(--tinta); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--tinta)}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media(max-width:1040px){
  .burger{display:flex}
  .nav__menu{
    position:absolute; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--garis); padding:12px 22px 20px; gap:2px;
    box-shadow:var(--shadow); display:none;
  }
  .nav__menu.open{display:flex}
  .nav__menu a{padding:13px 12px}
  .nav__cta{text-align:center; margin-top:8px}
}

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.96rem;
  padding:13px 24px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn--utama{background:linear-gradient(135deg,var(--emas) 0%,#FFA800 100%); color:#3A2600; box-shadow:0 8px 22px rgba(255,168,0,.35)}
.btn--biru{background:linear-gradient(135deg,var(--biru) 0%,var(--biru-terang) 100%); color:#fff; box-shadow:0 8px 22px rgba(20,73,198,.3)}
.btn--garis{border-color:rgba(255,255,255,.55); color:#fff}
.btn--garis:hover{background:rgba(255,255,255,.12)}
.btn--garis-biru{border-color:var(--biru); color:var(--biru)}
.btn--garis-biru:hover{background:#EAF1FF}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(95,189,247,.55) 0%, rgba(95,189,247,0) 62%),
    linear-gradient(135deg,#0B2E7A 0%,#1449C6 46%,#2E86F0 100%);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:90px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
  pointer-events:none;
}
.hero__rings{position:absolute; top:-140px; left:-160px; width:620px; opacity:.4; pointer-events:none}
.hero__rings--kanan{top:auto; left:auto; right:-200px; bottom:-260px; width:680px; opacity:.22}
.hero__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; padding:clamp(56px,7vw,92px) 0 clamp(76px,8vw,110px)}
.hero h1{color:#fff; text-shadow:0 2px 24px rgba(4,20,60,.28)}
.hero h1 em{font-style:normal; color:var(--emas)}
.hero__lead{font-size:clamp(1rem,1.35vw,1.16rem); color:#DCE9FF; max-width:56ch}
.hero__aksi{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--emas);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  padding:7px 15px; border-radius:999px; margin-bottom:20px;
}
.eyebrow--gelap{color:var(--biru); background:#EAF1FF; border-color:#CFE0FF}
.hero__kartu{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius-lg); padding:26px; backdrop-filter:blur(8px);
}
.hero__kartu h3{color:#fff; font-size:1.05rem; margin-bottom:14px}
.hero__kartu ul{list-style:none; padding:0; margin:0}
.hero__kartu li{display:flex; gap:12px; align-items:flex-start; color:#E4EEFF; font-size:.95rem; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.hero__kartu li:last-child{border-bottom:0; padding-bottom:0}
.hero__kartu .tik{flex:0 0 22px; height:22px; border-radius:50%; background:var(--emas); color:#3A2600; display:grid; place-items:center; font-size:.72rem; font-weight:900; margin-top:2px}
.hero__lencana{display:flex; gap:14px; align-items:center; margin-top:26px; flex-wrap:wrap}
.hero__lencana img{height:44px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
@media(max-width:900px){.hero__inner{grid-template-columns:1fr; gap:34px}}

/* Halaman dalam: hero ringkas */
.hero--halaman .hero__inner{grid-template-columns:1fr; padding:clamp(44px,6vw,72px) 0 clamp(52px,6vw,78px); text-align:left}
.hero--halaman h1{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.breadcrumb{font-size:.86rem; color:#BFD4F7; margin-top:14px}
.breadcrumb a{color:#DCE9FF}

/* ---------- Statistik ---------- */
.stat-strip{position:relative; z-index:3; margin-top:-58px}
.stat-strip__inner{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
}
.stat{padding:28px 24px; text-align:center; border-right:1px solid var(--garis)}
.stat:last-child{border-right:0}
.stat b{display:block; font-size:clamp(1.7rem,2.6vw,2.2rem); color:var(--biru); font-weight:800; letter-spacing:-.03em; line-height:1.1}
.stat span{font-size:.85rem; color:var(--teks-lembut); font-weight:600}
@media(max-width:760px){
  .stat-strip__inner{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--garis)}
}

/* ---------- Judul bagian ---------- */
.kepala{max-width:70ch; margin-bottom:38px}
.kepala--tengah{margin-inline:auto; text-align:center}
.kepala p{color:var(--teks-lembut); font-size:1.03rem; margin-bottom:0}

/* ---------- Kartu ---------- */
.kartu{
  background:#fff; border:1px solid var(--garis); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%;
}
.kartu:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#C7D8F5}
.kartu h3{margin-bottom:.4em}
.kartu p{color:var(--teks-lembut); font-size:.95rem; margin-bottom:0}
.kartu__ikon{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg,#EAF1FF,#D6E6FF); color:var(--biru);
}
.kartu__ikon svg{width:26px; height:26px}
.kartu--emas .kartu__ikon{background:linear-gradient(135deg,#FFF4D6,#FFE49E); color:#B27C00}
.kartu--hijau .kartu__ikon{background:linear-gradient(135deg,#EBF7DC,#D8EFBB); color:#4E7C13}
.kartu--nomor{position:relative; padding-top:34px}
.kartu__nomor{
  position:absolute; top:-16px; left:28px; width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg,var(--biru),var(--biru-terang)); color:#fff;
  display:grid; place-items:center; font-weight:800; box-shadow:0 8px 18px rgba(20,73,198,.3);
}

/* Kartu link */
a.kartu{color:inherit}
a.kartu:hover{text-decoration:none}
.kartu__lanjut{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:700; color:var(--biru); font-size:.9rem}

/* ---------- Visi Misi ---------- */
.visi{
  background:linear-gradient(135deg,var(--biru-tua),var(--biru)); color:#fff;
  border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px); position:relative; overflow:hidden;
}
.visi::before{
  content:""; position:absolute; right:-90px; top:-90px; width:280px; height:280px; border-radius:50%;
  border:34px solid rgba(255,255,255,.07);
}
.visi h3{color:var(--emas); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px}
.visi p{font-size:clamp(1.05rem,1.8vw,1.32rem); font-weight:600; line-height:1.5; color:#fff; margin:0; position:relative}
.misi{counter-reset:m; list-style:none; padding:0; margin:0; display:grid; gap:14px}
.misi li{
  counter-increment:m; position:relative; padding:18px 22px 18px 66px; background:#fff;
  border:1px solid var(--garis); border-radius:var(--radius); font-size:.96rem; box-shadow:var(--shadow-sm);
}
.misi li::before{
  content:counter(m); position:absolute; left:20px; top:16px; width:32px; height:32px; border-radius:10px;
  background:linear-gradient(135deg,var(--biru),var(--biru-terang)); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.9rem;
}

/* ---------- Dekan ---------- */
.dekan{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center}
.dekan__foto{position:relative}
.dekan__foto img{
  position:relative; z-index:2; display:block; width:auto; height:auto;
  max-width:100%; max-height:460px; margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(10,27,61,.22));
}
.dekan__foto::before{
  content:""; position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:min(86%,340px); aspect-ratio:1; border-radius:50%;
  background:linear-gradient(135deg,#DCEBFF,#B9D6FF); z-index:1;
}
.kutip{
  font-size:clamp(1.05rem,1.7vw,1.3rem); font-weight:600; color:var(--biru-tua);
  border-left:5px solid var(--emas); padding-left:22px; margin-bottom:22px; line-height:1.55;
}
.tanda-tangan{margin-top:26px; padding-top:22px; border-top:1px solid var(--garis)}
.tanda-tangan b{display:block; color:var(--biru-tua); font-size:1.05rem}
.tanda-tangan span{color:var(--teks-lembut); font-size:.9rem}
@media(max-width:860px){.dekan{grid-template-columns:1fr; gap:28px}}

/* ---------- Galeri poster ---------- */
.filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px}
.filter button{
  border:1.5px solid var(--garis); background:#fff; color:var(--teks-lembut); font-weight:600;
  padding:9px 18px; border-radius:999px; cursor:pointer; font-size:.9rem; font-family:inherit;
  transition:all .16s ease;
}
.filter button:hover{border-color:var(--biru-terang); color:var(--biru)}
.filter button[aria-pressed="true"]{background:var(--biru); border-color:var(--biru); color:#fff}

.galeri{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px}
.poster{
  border:1px solid var(--garis); border-radius:var(--radius); overflow:hidden; background:#fff;
  box-shadow:var(--shadow-sm); cursor:zoom-in; text-align:left; padding:0; font-family:inherit;
  transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;
}
.poster:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.poster img{width:100%; height:auto; aspect-ratio:1/1.414; object-fit:contain; background:var(--abu-100)}
.poster__isi{padding:14px 16px 16px}
.poster__isi b{display:block; font-size:.94rem; color:var(--biru-tua); line-height:1.35; margin-bottom:4px}
.poster__isi span{font-size:.78rem; color:var(--teks-lembut); font-weight:600}
.poster[hidden]{display:none}

/* Varian sampul: potongan bagian atas poster sebagai gambar kepala kartu */
.poster--sampul{border:0; box-shadow:none; border-radius:0; width:100%; cursor:zoom-in}
.poster--sampul img{aspect-ratio:16/10; object-fit:cover; object-position:center top}
.gambar-sampul{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center top; border-radius:12px}

/* Kartu foto ruangan: lanskap, tanpa kotak kosong */
.galeri--foto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.poster--foto img{aspect-ratio:16/9; object-fit:cover; background:var(--abu-100)}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(6,16,38,.92); display:none;
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,760px); max-height:88vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox__tutup,.lightbox__nav{
  position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.4rem;
  display:grid; place-items:center; font-family:inherit;
}
.lightbox__tutup{top:22px; right:22px}
.lightbox__nav{top:50%; transform:translateY(-50%)}
.lightbox__nav--prev{left:20px} .lightbox__nav--next{right:20px}
.lightbox__judul{position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#DCE9FF; font-size:.92rem; padding-inline:80px}
@media(max-width:640px){.lightbox__nav{width:40px;height:40px} .lightbox__judul{padding-inline:20px}}

/* ---------- Laboratorium ---------- */
.lab{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--garis);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); height:100%}
.lab__ikon{flex:0 0 46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#EAF1FF,#D6E6FF);
  display:grid; place-items:center; color:var(--biru); font-weight:800}
.lab h3{font-size:1.05rem; margin-bottom:.25em}
.lab p{font-size:.92rem; color:var(--teks-lembut); margin:0}

/* ---------- Tokoh ---------- */
.tokoh{display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; background:#fff;
  border:1px solid var(--garis); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.tokoh img{width:100%; height:100%; object-fit:cover; aspect-ratio:1/1.3}
.tokoh__isi{padding:24px 26px 24px 0}
.tokoh__isi h3{margin-bottom:.15em}
.tokoh__isi .peran{color:var(--emas); font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:10px}
.tokoh__isi p{font-size:.93rem; color:var(--teks-lembut); margin:0}
@media(max-width:560px){.tokoh{grid-template-columns:1fr} .tokoh__isi{padding:0 22px 24px}}

/* ---------- Timeline / kurikulum ---------- */
.tahap{position:relative; padding-left:38px}
.tahap::before{content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--biru-terang),var(--abu-200))}
.tahap__item{position:relative; margin-bottom:26px}
.tahap__item::before{content:""; position:absolute; left:-31px; top:6px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--biru)}
.tahap__item h3{margin-bottom:.2em; font-size:1.08rem}
.tahap__item p{color:var(--teks-lembut); font-size:.94rem; margin-bottom:0}
.tahap__label{font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--biru-terang)}

/* ---------- Tabel ---------- */
.tabel-bungkus{overflow-x:auto; border:1px solid var(--garis); border-radius:var(--radius); background:#fff}
table{width:100%; border-collapse:collapse; min-width:520px; font-size:.94rem}
th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--garis)}
th{background:var(--abu-50); color:var(--biru-tua); font-weight:700; font-size:.85rem; letter-spacing:.02em}
tr:last-child td{border-bottom:0}

/* ---------- Akordeon ---------- */
details{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:0 22px; margin-bottom:12px; box-shadow:var(--shadow-sm)}
summary{cursor:pointer; padding:18px 0; font-weight:700; color:var(--biru-tua); list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:1.5rem; font-weight:400; color:var(--biru-terang); line-height:1}
details[open] summary::after{content:"–"}
details > *:last-child{margin-bottom:20px}
details p,details ul{color:var(--teks-lembut); font-size:.95rem}

/* ---------- CTA ---------- */
.cta{
  border-radius:var(--radius-lg); padding:clamp(34px,5vw,60px); text-align:center; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(700px 340px at 20% 0%, rgba(95,189,247,.5), transparent 60%),
             linear-gradient(135deg,var(--biru-tua),var(--biru));
}
.cta h2{color:#fff; margin-bottom:.35em}
.cta p{color:#D9E8FF; max-width:60ch; margin-inline:auto}
.cta__aksi{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* ---------- Kontak ---------- */
.kontak-item{display:flex; gap:16px; align-items:flex-start; margin-bottom:24px}
.kontak-item .kartu__ikon{margin-bottom:0; flex-shrink:0; width:46px; height:46px; border-radius:13px}
.kontak-item b{display:block; color:var(--biru-tua)}
.kontak-item span,.kontak-item a{color:var(--teks-lembut); font-size:.95rem}
form label{display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--biru-tua)}
form input,form select,form textarea{
  width:100%; padding:12px 15px; border:1.5px solid var(--garis); border-radius:12px;
  font-family:inherit; font-size:.95rem; margin-bottom:16px; background:#fff; color:var(--teks);
}
form input:focus,form select:focus,form textarea:focus{outline:none; border-color:var(--biru-terang); box-shadow:0 0 0 4px rgba(46,134,240,.14)}
form textarea{min-height:130px; resize:vertical}

/* Penanda data yang masih perlu dilengkapi redaksi */
.tbd{border-bottom:1.5px dotted var(--abu-400); color:var(--teks-lembut)}

/* ---------- Footer ---------- */
.footer{background:var(--navy); color:#A9BDDF; padding:64px 0 0; font-size:.93rem}
.footer h4{color:#fff; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px}
.footer a{color:#C6D6F2}
.footer a:hover{color:#fff}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px}
.footer__brand{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.footer__brand img{height:56px; width:auto; background:#fff; border-radius:50%; padding:5px}
.footer__brand b{color:#fff; font-size:1.05rem; display:block; line-height:1.3}
.footer__brand span{font-size:.82rem}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:10px}
.footer__bawah{border-top:1px solid rgba(255,255,255,.12); padding:22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem}
.footer__soc{display:flex; gap:12px}
.footer__soc a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center}
.footer__soc a:hover{background:var(--biru)}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ---------- Animasi masuk ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.tampil{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* =========================================================
   Komponen isi dinamis (berita, agenda, galeri kegiatan)
   ========================================================= */

.wrap--sempit{max-width:820px}

/* Kartu berita */
a.kartu--berita{display:flex; flex-direction:column; padding:0; overflow:hidden}
.kartu__gambar{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--abu-100); display:block}
.kartu__gambar--kosong{display:grid; place-items:center;
  background:linear-gradient(135deg,#EAF1FF,#D3E4FF)}
.kartu__gambar--kosong img{width:56px; height:auto; opacity:.5; aspect-ratio:auto}
.kartu__badan{display:block; padding:22px 24px 26px}
.kartu__label{display:block; font-size:.76rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--biru-terang); margin-bottom:8px}
.kartu--berita h3{font-size:1.1rem; margin-bottom:.4em}
.kartu--berita p{font-size:.93rem}

/* Tautan filter (berbasis tautan, bukan tombol JavaScript) */
.filter__tautan{
  border:1.5px solid var(--garis); background:#fff; color:var(--teks-lembut); font-weight:600;
  padding:9px 18px; border-radius:999px; font-size:.9rem; display:inline-block;
}
.filter__tautan:hover{border-color:var(--biru-terang); color:var(--biru); text-decoration:none}
.filter__tautan.aktif{background:var(--biru); border-color:var(--biru); color:#fff}

/* Navigasi halaman */
.halaman{display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap}
.halaman a{
  min-width:42px; height:42px; display:grid; place-items:center; padding:0 12px;
  border:1.5px solid var(--garis); border-radius:11px; font-weight:700; color:var(--teks-lembut); background:#fff;
}
.halaman a:hover{border-color:var(--biru-terang); color:var(--biru); text-decoration:none}
.halaman a[aria-current="page"]{background:var(--biru); border-color:var(--biru); color:#fff}

/* Artikel berita */
.artikel__meta{color:var(--teks-lembut); font-size:.9rem; font-weight:600; margin-bottom:22px}
.artikel__sampul{width:100%; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:30px}
.artikel__ringkas{
  font-size:1.1rem; font-weight:600; color:var(--biru-tua); line-height:1.6;
  border-left:5px solid var(--emas); padding-left:20px; margin-bottom:28px;
}
.artikel__isi{font-size:1.03rem}
.artikel__isi p{margin-bottom:1.15rem}

/* Agenda */
.agenda-daftar{display:grid; gap:16px}
.agenda{display:grid; grid-template-columns:88px 1fr; gap:20px; background:#fff;
  border:1px solid var(--garis); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm)}
.agenda--lewat{opacity:.72}
.agenda__tgl{
  text-align:center; border-radius:14px; padding:12px 6px; align-self:start;
  background:linear-gradient(135deg,var(--biru-tua),var(--biru)); color:#fff;
}
.agenda__tgl b{display:block; font-size:1.75rem; line-height:1; font-weight:800; letter-spacing:-.03em}
.agenda__tgl span{display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:3px}
.agenda__tgl small{display:block; font-size:.7rem; opacity:.75; margin-top:2px}
.agenda--lewat .agenda__tgl{background:linear-gradient(135deg,#7C8BA6,#9AA7BD)}
.agenda__jenis{font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--biru-terang)}
.agenda__isi h3{font-size:1.12rem; margin:5px 0 .35em}
.agenda__isi p{font-size:.94rem; color:var(--teks-lembut); margin-bottom:.5rem}
.agenda__meta{font-size:.85rem; color:var(--teks-lembut); font-weight:600; margin-bottom:0}
@media(max-width:560px){
  .agenda{grid-template-columns:64px 1fr; gap:14px; padding:18px}
  .agenda__tgl b{font-size:1.35rem}
}

/* ---------- Bagian video profil ---------- */
.section--gelap{
  background:radial-gradient(900px 500px at 15% 0%, rgba(95,189,247,.35), transparent 60%),
             linear-gradient(135deg,var(--navy) 0%,var(--biru-tua) 70%);
  color:#fff;
}
.section--gelap .eyebrow{color:var(--emas); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22)}
.video-bingkai{
  position:relative; max-width:940px; margin-inline:auto; border-radius:var(--radius-lg);
  overflow:hidden; background:#000; box-shadow:0 30px 70px rgba(4,16,45,.5);
  border:1px solid rgba(255,255,255,.14); line-height:0;
}
.video-bingkai iframe,
.video-bingkai video{width:100%; aspect-ratio:16/9; height:auto; display:block; border:0; background:#000}

/* ---------- Narahubung PMB ---------- */
.narahubung{text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px}
.narahubung__ikon{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px;
  background:linear-gradient(135deg,#DCF7E9,#B8EDD4); color:#0A8A52;
}
.narahubung__ikon svg{width:24px; height:24px}
.narahubung h3{font-size:1.02rem; line-height:1.35; margin:0 0 .2em}
.narahubung__jabatan{font-size:.85rem; color:var(--teks-lembut); margin:0 0 16px; font-weight:600}
.btn--hijau{
  background:linear-gradient(135deg,#1FAF63 0%,#118B4C 100%); color:#fff;
  box-shadow:0 8px 20px rgba(17,139,76,.28); margin-top:auto;
}
.btn--hijau:hover{filter:brightness(1.07)}
.btn--hijau svg{width:17px; height:17px}