/* [WEB-PUBLIK] Tema "Fajar Timbul" (desain 11): gradasi Fajar + permukaan timbul Neumorphism. */
:root{
  --bg:#e9f2f1; --gelap:#c5d6d3; --terang:#ffffff; --teks:#1e3a3a; --redup:#5b7471; --garis:#d5e3e0;
  --aksen:#0d9488; --biru:#0369a1; --fajar:linear-gradient(120deg,#047857 0%,#0d9488 45%,#0284c7 100%);
  --timbul:8px 8px 18px var(--gelap),-8px -8px 18px var(--terang);
  --timbul-k:5px 5px 10px var(--gelap),-5px -5px 10px var(--terang);
  --cekung:inset 5px 5px 10px var(--gelap),inset -5px -5px 10px var(--terang);
  --r:24px; --lebar:1180px;
}
:root[data-tema="gelap"]{--bg:#16211f;--gelap:#0d1513;--terang:#1f2d2a;--teks:#d8ebe7;--redup:#8fa9a4;--garis:#26363a;--aksen:#2dd4bf;--biru:#7dd3fc}
@media (prefers-color-scheme:dark){:root:not([data-tema="terang"]){--bg:#16211f;--gelap:#0d1513;--terang:#1f2d2a;--teks:#d8ebe7;--redup:#8fa9a4;--garis:#26363a;--aksen:#2dd4bf;--biru:#7dd3fc}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--teks);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.2;margin:0;letter-spacing:-.01em}
.lebar{max-width:var(--lebar);margin:0 auto;padding:0 20px}
.sembunyi{display:none!important}
.lewati{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:99}
.lewati:focus{left:8px}

/* Pita & kepala */
.pita{background:var(--fajar);color:#e0fbf4;font-size:13px;font-weight:600}
.pita .lebar{display:flex;gap:12px;justify-content:space-between;align-items:center;padding-top:7px;padding-bottom:7px}
.pita a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
header.kepala{position:sticky;top:0;z-index:30;background:var(--bg);box-shadow:0 10px 22px -18px var(--gelap)}
.kepala .lebar{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.merek{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0}
.logo{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:var(--fajar) center/cover no-repeat;color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:var(--timbul-k);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.merek>span:last-child{min-width:0}
.merek b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.merek small{display:block;font-size:12px;color:var(--redup);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.menu{display:flex;gap:10px;align-items:center}
nav.menu a{padding:9px 14px;border-radius:14px;background:var(--bg);box-shadow:var(--timbul-k);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
nav.menu a:hover{color:var(--aksen)}
nav.menu a[aria-current="page"]{background:var(--fajar);color:#fff;box-shadow:inset 3px 3px 7px rgba(0,0,0,.2),5px 5px 10px var(--gelap)}
nav.menu a.ke-spmb{background:var(--fajar);color:#fff}
.ikon-tbl{width:42px;height:42px;border-radius:14px;border:0;background:var(--bg);box-shadow:var(--timbul-k);color:var(--teks);font-size:18px;cursor:pointer;display:grid;place-items:center;flex:0 0 42px}
#tbl-menu{display:none}
nav.menu .tutup-menu{display:none;align-self:flex-end;align-items:center;gap:6px;border:0;font:inherit;font-weight:700;font-size:14px;color:var(--teks);background:var(--bg);box-shadow:var(--timbul-k);border-radius:14px;padding:10px 14px;margin-bottom:6px;cursor:pointer}
@media (max-width:1040px){
  nav.menu{position:fixed;inset:0 0 0 auto;width:min(84vw,320px);flex-direction:column;align-items:stretch;padding:18px 18px 24px;background:var(--bg);box-shadow:-20px 0 40px -20px rgba(0,0,0,.35);transform:translateX(105%);transition:transform .22s ease;z-index:40;overflow:auto}
  nav.menu.buka{transform:none}
  nav.menu a{padding:13px 16px;font-size:15px}
  #tbl-menu{display:grid}
  nav.menu .tutup-menu{display:flex}
  body.menu-buka header.kepala{z-index:50}
  .tirai{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
}

/* Tombol */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:16px;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;background:var(--fajar);color:#fff;box-shadow:var(--timbul-k);font-family:inherit}
.tbl.dua{background:var(--bg);color:var(--biru)}
.tbl.garis{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.tbl:active{box-shadow:var(--cekung)}

/* Hero */
.hero{background:var(--fajar);color:#fff;border-radius:0 0 48px 48px;padding:56px 0 110px}
.hero .lebar{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,56px);font-weight:800;margin:16px 0}
.hero p{font-size:17px;opacity:.92;max-width:560px;margin:0}
.hero .aksi{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero .foto{aspect-ratio:4/3;border-radius:28px;background:#9fd8cf center/cover no-repeat;border:10px solid rgba(255,255,255,.22);box-shadow:0 30px 60px -30px rgba(2,44,64,.8)}
.label{display:inline-block;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--bg);color:var(--aksen);box-shadow:inset 2px 2px 5px var(--gelap),inset -2px -2px 5px var(--terang)}
.hero .label{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 2px 2px 5px rgba(0,0,0,.15)}
@media (max-width:820px){.hero{padding:34px 0 90px;border-radius:0 0 32px 32px}.hero .lebar{grid-template-columns:1fr}.hero .foto{order:-1}}

/* Statistik */
.statistik{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-62px;position:relative;z-index:2}
.kartu{background:var(--bg);border-radius:var(--r);box-shadow:var(--timbul)}
.stat{padding:20px 22px}
.stat b{display:block;font-size:clamp(22px,3vw,32px);color:var(--biru);font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.stat span{font-size:13px;font-weight:600;color:var(--redup)}
@media (max-width:820px){.statistik{grid-template-columns:repeat(2,1fr);gap:12px}.stat{padding:16px}}

/* Bagian */
section.bagian{padding:64px 0 0}
.judul{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.judul small{display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--aksen);margin-bottom:6px}
.judul h2{font-size:clamp(24px,3.4vw,34px)}
.dua-kolom{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.foto-kotak{aspect-ratio:4/3;border-radius:var(--r);background:#bde8e1 center/cover no-repeat;box-shadow:var(--timbul)}
.isi-teks{font-size:16px}
.isi-teks p{margin:0 0 14px}
.isi-teks h2{font-size:22px;margin:26px 0 10px}
.isi-teks h3{font-size:18px;margin:22px 0 8px}
.isi-teks ul,.isi-teks ol{padding-left:22px;margin:0 0 14px}
.isi-teks li{margin-bottom:6px}
.isi-teks a{color:var(--biru);font-weight:600}
.isi-teks blockquote{margin:0 0 14px;padding:12px 16px;border-radius:16px;box-shadow:var(--cekung)}
.visi{display:grid;grid-template-columns:1fr 1.3fr;gap:22px}
.visi .kotak-visi{background:var(--fajar);color:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--timbul)}
.visi .kotak-visi small{color:#d1fae5}
.visi .kotak-visi p{font-size:20px;font-weight:700;line-height:1.45;margin:10px 0 0}
.visi .kotak-misi{padding:28px}
.visi ol{margin:10px 0 0;padding-left:20px}
.visi li{margin-bottom:10px}
@media (max-width:820px){.dua-kolom,.visi{grid-template-columns:1fr;gap:22px}}

/* Berita */
.grid-berita{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.berita{overflow:hidden;text-decoration:none;display:flex;flex-direction:column}
.berita .sampul{margin:12px 12px 0;border-radius:18px;aspect-ratio:16/9;background:#bde8e1 center/cover no-repeat}
.berita .isi{padding:16px 20px 22px}
.berita h3{font-size:18px;margin:10px 0 8px}
.berita p{margin:0;font-size:14px;color:var(--redup)}
.tgl{font-size:12.5px;color:var(--redup);font-weight:600}
.berita:hover h3{color:var(--aksen)}
@media (max-width:980px){.grid-berita{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-berita{grid-template-columns:1fr}}
.saring{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.saring input,.saring select{font:inherit;font-size:15px;padding:12px 16px;border-radius:16px;border:0;background:var(--bg);color:var(--teks);box-shadow:var(--cekung);min-width:0}
.saring input{flex:1 1 220px}
.artikel{max-width:820px;margin:0 auto}
.artikel .sampul-besar{aspect-ratio:16/9;border-radius:var(--r);background:#bde8e1 center/cover no-repeat;box-shadow:var(--timbul);margin:20px 0 26px}
.artikel h1{font-size:clamp(26px,4vw,40px);margin:12px 0}
.halaman-kepala{padding-top:40px;padding-bottom:10px}
.halaman-kepala h1{font-size:clamp(28px,4.4vw,44px)}
.halaman-kepala p{color:var(--redup);margin:8px 0 0;font-size:16px}

/* Video */
.grid-video{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video{overflow:hidden}
.video .layar{position:relative;aspect-ratio:16/9;margin:12px 12px 0;border-radius:18px;background:#0b1512 center/cover no-repeat;overflow:hidden;cursor:pointer;border:0;width:calc(100% - 24px);padding:0;display:block}
.video .layar iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .main{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:14px;background:#ef4444;display:grid;place-items:center}
.video .main::before{content:'';border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.video .isi{padding:14px 18px 18px}
.video h3{font-size:16px}
@media (max-width:980px){.grid-video{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-video{grid-template-columns:1fr}}

/* SPMB */
.spmb{border-radius:32px;padding:40px;box-shadow:var(--cekung);margin-top:64px}
.spmb h2{font-size:clamp(24px,3.6vw,36px);margin:12px 0 6px}
.spmb .atas{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.lk{padding:20px}
.lk em{font-style:normal;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fajar);color:#fff;font-weight:800;box-shadow:4px 4px 8px var(--gelap)}
.lk b{display:block;margin:10px 0 4px}
.lk span{font-size:14px;color:var(--redup)}
@media (max-width:820px){.spmb{padding:26px 20px;border-radius:26px}.langkah{grid-template-columns:1fr}}

/* Kontak */
.kontak{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.kontak .kartu{padding:24px}
.kontak dl{margin:0} .kontak dt{font-size:12.5px;font-weight:800;color:var(--aksen);letter-spacing:.08em;text-transform:uppercase;margin-top:14px}
.kontak dd{margin:4px 0 0;font-weight:600}
@media (max-width:820px){.kontak{grid-template-columns:1fr}}

/* Kaki */
footer.kaki{margin-top:80px;background:var(--fajar);color:#e6fffb;padding:40px 0 26px}
.kaki .lebar{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.kaki a{color:#fff;text-decoration:none}
.kaki p{margin:6px 0;font-size:14px;opacity:.88}
.kaki .hak{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:14px;font-size:13px;opacity:.8}
@media (max-width:820px){.kaki .lebar{grid-template-columns:1fr}}

/* Keadaan */
.kosong{padding:28px;text-align:center;color:var(--redup);font-weight:600}
.memuat{min-height:40vh;display:grid;place-items:center;color:var(--redup);font-weight:600}
.galat{padding:18px 20px;border-radius:18px;box-shadow:var(--cekung);color:#b91c1c;font-weight:600}
.lanjut{display:flex;justify-content:center;margin-top:24px}
@media (max-width:420px){.merek b{font-size:15px}.merek small{font-size:11px}.logo{width:42px;height:42px;flex-basis:42px}.kepala .lebar{gap:10px}}