/* Gaya bersama semua halaman (bagian akhir: menu ponsel, aksesibilitas, transisi antarhalaman). Dimuat setelah CSS khusus halaman. */
html{overflow-x:hidden;overflow-x:clip}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.brand .bn{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
footer .brand .bn{color:#fff;font-size:17px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
h1,h2,h3{text-wrap:balance}
[id]{scroll-margin-top:96px}

nav#mainnav>ul{gap:22px}
@media(max-width:1300px){nav#mainnav>ul{gap:18px;font-size:14.5px}.brand .bn{font-size:16px}header.nav .btn{padding:12px 20px;font-size:14px}}
@media(min-width:1061px) and (max-width:1200px){nav#mainnav>ul{gap:14px;font-size:14px}.brand .bn{font-size:15px}.brand p{display:none}.brand{gap:10px}header.nav .btn{padding:11px 16px;font-size:13.5px}}
@media(max-width:1060px){
.menu-toggle{display:block}
nav#mainnav{position:fixed;inset:0 0 0 auto;width:min(82%,340px);background:var(--paper);box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);clip-path:inset(0 0 0 100%);transition:clip-path .3s ease,visibility 0s linear .3s;visibility:hidden;padding:88px 22px 30px;overflow-y:auto;z-index:70}
nav#mainnav.open{clip-path:inset(0 0 0 -80px);visibility:visible;transition:clip-path .3s ease,visibility 0s}
nav#mainnav ul{display:flex;flex-direction:column;gap:4px;align-items:stretch}
nav#mainnav>ul>li>a{display:block;padding:13px 12px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
nav .sub{position:static;display:flex;box-shadow:none;border:0;padding:4px 0 8px 12px;min-width:0}
nav .has-sub:hover .sub{display:flex}
.caret{display:none}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(13,39,31,.45);z-index:49}
.nav-overlay.open{display:block}
}
@media(max-width:520px){header.nav .wrap{gap:8px}.brand{gap:10px;min-width:0}.brand .bn{font-size:14.5px;line-height:1.15}.brand p{display:none}header.nav .btn{padding:10px 14px;font-size:13px;white-space:nowrap}.logo{flex:none}}
@media(max-width:360px){header.nav .wrap{padding:0 14px;gap:6px}.brand .bn{font-size:13px}header.nav .btn{padding:9px 11px;font-size:12px}.menu-toggle{font-size:24px;padding:0 2px}header.nav .logo{width:40px;height:40px}}
/* transisi morph antar halaman (peningkatan bertahap: Chrome/Edge 126+, Safari 18.2+; peramban lain tampil normal) */
/* Nama transisi harus unik per halaman: site-header, logo-situs, hero (maks. satu .hero/.page-hero), foto-berita-1/2 (maks. satu .nimg-b1/.nimg-b2). */
@view-transition{navigation:auto}
header.nav{view-transition-name:site-header}
header.nav .logo{view-transition-name:logo-situs}
.hero,.page-hero{view-transition-name:hero}
/* foto berita: kartu di beranda/daftar berita <-> foto utama artikel. Nama unik per berita (foto-<nama berita>) dibuat build dari data/berita/ (penanda [[berita:transisi]]). */
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
::view-transition-old(root){animation:vt-out .25s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .42s cubic-bezier(0,0,.2,1) both}
::view-transition-group(hero),::view-transition-group(site-header){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* logo tetap utuh: tidak memudar/berkedip, hanya ikut bergerak bersama header (mis. bila halaman asal sedang digulir) */
::view-transition-group(logo-situs){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-new(logo-situs){animation:none}
::view-transition-old(logo-situs){display:none}
/* foto berita berpindah & berubah ukuran; gambar dipotong rapi selama morph */
::view-transition-group(foto-berita-1),::view-transition-group(foto-berita-2){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1);border-radius:16px;overflow:hidden}
::view-transition-old(foto-berita-1),::view-transition-new(foto-berita-1),::view-transition-old(foto-berita-2),::view-transition-new(foto-berita-2){height:100%;object-fit:cover;animation-duration:.55s}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* cadangan untuk peramban tanpa transisi antarhalaman (Firefox, file://): <main> muncul halus. Kelas dipasang skrip kecil di <head>. */
@keyframes masuk{from{opacity:0;transform:translateY(10px)}}
.tanpa-vt main{animation:masuk .45s cubic-bezier(0,0,.2,1) backwards}
@media(prefers-reduced-motion:reduce){.tanpa-vt main{animation:none}}
/* ===== Ornamen Islami embos (assets/ornamen/emboss-*.svg: ubin seamless 100px, relief dari garis bayangan + cahaya; TANPA filter SVG) =====
   Kontras teks (WCAG AA) dijaga dua lapis: (1) ornamen dipudarkan gradien mask di belakang area teks sampai --orn-teks (0-1);
   (2) overlay gradien hijau-hutan --orn-tutup (0-1) di belakang teks beranda, menahan cahaya emas radial yang sudah ada.
   Footer: ornamen jelas di pita atas, --orn-footer di belakang kolom teks. Warna merek tidak diubah. Nilai diukur otomatis (CLAUDE.md §5). Tingkat terpilih: SEDANG (18 Okt 2026). */
:root{--orn-teks:.15;--orn-tutup:0;--orn-footer:0;--orn-banner:.15}
.hero::before{background:linear-gradient(90deg,rgba(18,53,42,var(--orn-tutup)) 0,rgba(18,53,42,var(--orn-tutup)) 50%,rgba(18,53,42,0) 68%),radial-gradient(120% 90% at 90% 10%,rgba(176,141,79,.18),transparent 50%),radial-gradient(90% 80% at 10% 100%,rgba(61,107,88,.35),transparent 55%)}
.hero::after,.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(../ornamen/emboss-sedang.svg) 0 0/100px 100px}
.hero::after{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--orn-teks)) 0,rgba(0,0,0,var(--orn-teks)) 52%,#000 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,var(--orn-teks)) 0,rgba(0,0,0,var(--orn-teks)) 52%,#000 70%)}
.page-hero::before{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--orn-teks)) 0,rgba(0,0,0,var(--orn-teks)) 62%,#000 88%);mask-image:linear-gradient(90deg,rgba(0,0,0,var(--orn-teks)) 0,rgba(0,0,0,var(--orn-teks)) 62%,#000 88%)}
.hero .wrap{z-index:1}
.page-hero>.wrap{position:relative}
/* hero berwarna lebih terang (Pondok, MTs, MA): margin kontras teks emasnya tipis, ornamen dipudarkan penuh di belakang teks */
.page-hero.pondok,.page-hero.mts,.page-hero.ma{--orn-teks:0}
/* hero MTs & Pondok: overlay gradien hijau-hutan di belakang teks agar teks emas/terang lolos WCAG AA.
   Gradien merek di CSS halaman tidak diubah; overlay memudar ke kanan (desktop) sehingga gradien asli tetap tampak penuh di sana.
   Kekuatan diukur otomatis: --tutup-mts / --tutup-pondok (lihat CLAUDE.md §5). */
:root{--tutup-mts:.7;--tutup-pondok:.25}
.page-hero.mts>.wrap,.page-hero.pondok>.wrap{z-index:1}
.page-hero.mts::after,.page-hero.pondok::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,53,42,var(--tutup)) 0,rgba(18,53,42,var(--tutup)) 58%,rgba(18,53,42,0) 86%)}
.page-hero.mts{--tutup:var(--tutup-mts)}
.page-hero.pondok{--tutup:var(--tutup-pondok)}
@media(max-width:900px){.page-hero.mts::after,.page-hero.pondok::after{background:linear-gradient(180deg,rgba(18,53,42,0) 0,rgba(18,53,42,var(--tutup)) 56px,rgba(18,53,42,var(--tutup)) 100%)}}
@media(max-width:900px){
  :root{--orn-teks:.08;--orn-tutup:.35}
  .hero::before{background:linear-gradient(180deg,rgba(18,53,42,var(--orn-tutup)) 0,rgba(18,53,42,var(--orn-tutup)) 50%,rgba(18,53,42,0) 72%),radial-gradient(120% 90% at 90% 10%,rgba(176,141,79,.18),transparent 50%),radial-gradient(90% 80% at 10% 100%,rgba(61,107,88,.35),transparent 55%)}
  .hero::after{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,var(--orn-teks)) 0,rgba(0,0,0,var(--orn-teks)) 52%,#000 78%);mask-image:linear-gradient(180deg,rgba(0,0,0,var(--orn-teks)) 0,rgba(0,0,0,var(--orn-teks)) 52%,#000 78%)}
  .page-hero::before{-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,var(--orn-teks)) 48px,rgba(0,0,0,var(--orn-teks)) 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,var(--orn-teks)) 48px,rgba(0,0,0,var(--orn-teks)) 100%)}
}
/* banner beasiswa (.beax): ornamen tampak di tepi/sudut, dipudarkan di tengah tempat teks */
.beax::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(../ornamen/emboss-sedang.svg) 0 0/100px 100px;
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 46%,rgba(0,0,0,var(--orn-banner)) 0,rgba(0,0,0,var(--orn-banner)) 72%,#000 100%);
  mask-image:radial-gradient(ellipse 60% 64% at 50% 46%,rgba(0,0,0,var(--orn-banner)) 0,rgba(0,0,0,var(--orn-banner)) 72%,#000 100%)}
@media(max-width:760px){.beax::before{-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,var(--orn-banner)) 40px,rgba(0,0,0,var(--orn-banner)) calc(100% - 140px),#000 calc(100% - 60px));mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,var(--orn-banner)) 40px,rgba(0,0,0,var(--orn-banner)) calc(100% - 140px),#000 calc(100% - 60px))}}/* footer: ornamen jelas di pita atas, dipudarkan di belakang kolom teks */
footer{background:linear-gradient(180deg,rgba(13,39,31,0) 0,rgba(13,39,31,0) 34px,rgba(13,39,31,calc(1 - var(--orn-footer))) 70px),url(../ornamen/emboss-sedang.svg) 0 0/100px 100px,#0d271f}
/* gambar latar tertunda (assets/js/gambar-tunda.js); hanya aktif bila <html> berkelas js */
.js .lazy-bg:not(.bg-siap){background-image:none!important}
/* <picture> (WebP + cadangan) dibuat skrip/build.py; tidak boleh ikut tata letak agar <img> tetap berperilaku seperti sebelumnya */
picture{display:contents}picture>source{display:none}
/* pita pengumuman beranda (data/pengumuman.json lewat /admin; hanya tampil bila ada pengumuman aktif). Warna merek; kontras teks lolos AA. */
.pita-pengumuman{background:var(--gold-lt);color:var(--forest);font-size:14.5px;font-weight:600;line-height:1.5}
.pita-pengumuman .wrap{padding-top:10px;padding-bottom:10px}
.pita-pengumuman p{margin:0}.pita-pengumuman p+p{margin-top:6px}
.pita-pengumuman .pita-label{display:inline-block;background:var(--forest);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-right:8px;vertical-align:1px}
.pita-pengumuman a{color:var(--forest);text-decoration:underline;font-weight:700}