/* ==========================================================================
   WEBSITE SEKOLAH/MADRASAH — tema hijau tua & emas (formal, mengikuti referensi)
   Dipakai halaman publik dan (sebagian) panel admin.
   ========================================================================== */

:root{
  --hijau-tua:#0b4a33;
  --hijau-tua2:#0d5c3f;
  --hijau:#15795a;
  --hijau-muda:#e8f5ee;
  --emas:#c9a227;
  --emas-terang:#f2c94c;
  --emas-muda:#fdf6e3;
  --ink:#12261e;
  --teks:#33463d;
  --mut:#6b7d75;
  --garis:#e3ebe6;
  --bg:#f6f9f7;
  --putih:#fff;
  --merah:#b3261e;
  --radius:14px;
  --radius-sm:10px;
  --bayang:0 10px 30px rgba(11,74,51,.10);
  --bayang-kecil:0 3px 12px rgba(11,74,51,.08);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--teks);background:var(--bg);
  font-size:15.5px;line-height:1.65;-webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hijau-tua2);text-decoration:none}
a:hover{color:var(--emas)}
h1,h2,h3,h4{color:var(--ink);font-family:var(--serif);line-height:1.25;margin:0 0 .5em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
.wadah{max-width:1180px;margin:0 auto;padding:0 20px}
.rasta{display:flex;align-items:center;gap:10px}
.mut{color:var(--mut)}
.kecil{font-size:.85rem}
.tengah{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:1.6fr minmax(0,1fr)}
/* Kolom beranda (Program | Berita | PPDB) — pakai kelas agar bisa ditumpuk di layar kecil */
.grid-beranda{grid-template-columns:1.15fr 1.05fr .95fr;gap:26px}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1080px){.grid-beranda{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid-beranda{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.g2,.g3,.g21{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.g4{grid-template-columns:minmax(0,1fr)}}

/* ---------- tombol ---------- */
.tombol{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--hijau-tua),var(--hijau));color:#fff;
  padding:11px 20px;border-radius:999px;font-weight:600;font-size:.95rem;
  box-shadow:var(--bayang-kecil);transition:transform .15s,box-shadow .15s,background .15s;
}
.tombol:hover{color:#fff;transform:translateY(-1px);box-shadow:var(--bayang)}
.tombol-emas{background:linear-gradient(135deg,var(--emas),var(--emas-terang));color:#3a2c00}
.tombol-emas:hover{color:#3a2c00}
.tombol-garis{background:#fff;color:var(--hijau-tua);border:1.5px solid var(--garis);box-shadow:none}
.tombol-garis:hover{color:var(--hijau-tua);border-color:var(--emas)}
.tombol-kecil{padding:8px 14px;font-size:.86rem}
.tombol-bahaya{background:linear-gradient(135deg,#9b1c14,var(--merah));color:#fff}
.tombol-bahaya:hover{color:#fff}
.tombol-putih{background:#fff;color:var(--hijau-tua)}
.tombol-putih:hover{color:var(--hijau-tua)}
.tombol:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---------- kartu, alert, pil ---------- */
.kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:22px;box-shadow:var(--bayang-kecil)}
.kartu-kepala{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kartu-kepala h2,.kartu-kepala h3{margin:0;font-size:1.15rem}
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin:14px 0;border:1px solid;font-size:.94rem}
.alert-ok{background:#e8f7ef;border-color:#bfe3d0;color:#0d5c3f}
.alert-err{background:#fdecea;border-color:#f5c6c2;color:#96271f}
.alert-info{background:var(--emas-muda);border-color:#f0e0ab;color:#7a6212}
/* Pesan singkat (mis. “Terima kasih, pendapat Anda sudah dicatat”) pada halaman publik */
.flash-kerangka{margin-top:18px}
.flash-kerangka .alert:last-child{margin-bottom:0}
.pil{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em}
.pil-baru{background:#eef2f7;color:#3d556e}
.pil-proses{background:var(--emas-muda);color:#8a6d10}
.pil-terima{background:#e4f6ec;color:#0d6b45}
.pil-cadangan{background:#eef5ff;color:#2b5590}
.pil-tolak{background:#fdecea;color:#96271f}
.pil-batal{background:#f1f1f1;color:#666}
.pil-emas{background:var(--emas-muda);color:#8a6d10}
.pil-hijau{background:var(--hijau-muda);color:var(--hijau-tua)}

/* ---------- notifikasi mengapung ---------- */
.notif-kerangka{position:fixed;top:14px;right:14px;z-index:80;pointer-events:none}
.notif-isi{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.notif{background:#fff;border:1px solid var(--garis);border-left:4px solid var(--hijau);border-radius:10px;
  padding:11px 16px;box-shadow:var(--bayang);font-size:.9rem;max-width:340px;animation:notifMasuk .25s ease}
.notif.merah{border-left-color:var(--merah)}
@keyframes notifMasuk{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- topbar ---------- */
.situs-head{position:relative;z-index:30}
.topbar{background:linear-gradient(120deg,#083a28,#0b4a33);color:#d8ece2;font-size:.82rem}
.topbar-dalam{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;flex-wrap:wrap}
.topbar-kiri{display:flex;gap:18px;flex-wrap:wrap}
.topbar-item{display:inline-flex;align-items:center;gap:7px;color:#cfe6da}
.topbar-item a{color:#cfe6da}
.topbar-item svg{color:var(--emas-terang)}
.topbar-kanan{display:flex;align-items:center;gap:14px}
.topbar-sosial{display:flex;gap:6px}
.topbar-sosial a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.10);color:#e8f5ee}
.topbar-sosial a:hover{background:var(--emas);color:#3a2c00}
/* Ikon media sosial pada bilah atas memakai warna khasnya masing-masing */
.topbar-sosial a.sos-facebook{color:#4b9bff}
.topbar-sosial a.sos-instagram{color:#ee6fae}
.topbar-sosial a.sos-youtube{color:#ff5b4a}
.topbar-sosial a.sos-whatsapp{color:#48e08a}
.topbar-sosial a.sos-tiktok{color:#dfe6ee}
.topbar-sosial a.sos-facebook:hover,.topbar-sosial a.sos-instagram:hover,.topbar-sosial a.sos-youtube:hover,
.topbar-sosial a.sos-whatsapp:hover,.topbar-sosial a.sos-tiktok:hover{background:var(--emas);color:#3a2c00}
.cari-top{display:flex;align-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(242,201,76,.35);border-radius:999px;padding:2px}
.cari-top input{background:transparent;border:0;outline:none;color:#fff;padding:6px 12px;width:170px;font-size:.82rem;min-width:0}
.cari-top input::placeholder{color:#a9c7b8}
.cari-top button{background:transparent;border:0;color:var(--emas-terang);cursor:pointer;padding:6px 10px;display:flex}

/* ---------- header utama & navigasi ---------- */
.head-utama{background:#fff;box-shadow:0 2px 14px rgba(11,74,51,.07);position:sticky;top:0;z-index:40}
.head-dalam{display:flex;align-items:center;gap:18px;min-height:86px}
.brand{display:flex;align-items:center;gap:13px;min-width:0;flex:0 1 auto;max-width:272px}
.brand-logo{width:56px;height:56px;object-fit:contain}
.brand-lambang{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--hijau-muda);color:var(--hijau-tua);border:2px solid var(--emas)}
.brand-lambang.besar{width:56px;height:56px}
.brand-teks strong{display:block;font-family:var(--serif);font-size:1.16rem;color:var(--hijau-tua);line-height:1.2}
.brand-teks small{display:block;color:var(--mut);font-size:.78rem}
.tombol-nav{display:none;background:#fff;border:1.5px solid var(--garis);border-radius:10px;padding:8px;color:var(--hijau-tua)}
.nav-utama{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-left:auto}
.nav-item{position:relative}
/* Tombol ajakan (PPDB Online) di ujung kanan header, sejajar dengan deretan menu */
.head-aksi{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-item>a{display:inline-flex;align-items:center;gap:5px;padding:12px 10px;color:#1d3a2e;font-weight:600;font-size:.92rem;border-radius:8px;white-space:nowrap}
.nav-item>a:hover{color:var(--hijau-tua);background:var(--hijau-muda)}
.nav-item.aktif>a{color:var(--hijau-tua)}
.nav-item.aktif>a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:3px;border-radius:3px;background:var(--emas)}
.nav-tombol{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--hijau-tua),var(--hijau-tua2));
  color:#fff !important;padding:12px 18px;border-radius:999px;border:1.5px solid rgba(242,201,76,.5);font-weight:700;
  font-size:.9rem;line-height:1.15;white-space:nowrap}
.nav-tombol:hover{background:linear-gradient(135deg,var(--emas),var(--emas-terang));color:#3a2c00 !important;
  box-shadow:0 6px 16px rgba(11,74,51,.22)}
.nav-tombol svg{width:16px;height:16px}
.nav-anak{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--garis);
  border-radius:12px;box-shadow:var(--bayang);padding:8px;display:none;z-index:50}
.nav-anak a{display:block;padding:9px 12px;border-radius:8px;color:#1d3a2e;font-size:.92rem}
.nav-anak a:hover{background:var(--hijau-muda);color:var(--hijau-tua)}
.nav-item:hover .nav-anak,.nav-item:focus-within .nav-anak{display:block}
/* Di layar sempit, kotak pencarian dipindah ke BARIS SENDIRI selebar wadah — tanpa ini
   kotak pencarian + ikon media sosial meluber ~10px mendatar di HP 390px. */
@media (max-width:640px){
  .topbar-dalam{gap:10px;padding-top:8px;padding-bottom:8px}
  .topbar-kiri{gap:10px}
  .topbar-kanan{width:100%;flex-wrap:wrap;gap:10px}
  .cari-top{flex:1 1 100%;order:2}
  .cari-top input{width:100%;flex:1}
  .topbar-sosial{order:1}
}
@media (max-width:1340px){
  /* Ruang mulai sempit: huruf menu & tombol dirapatkan sedikit supaya tetap satu baris. */
  .brand{max-width:238px}
  .brand-teks strong{font-size:1.06rem}
  .nav-item>a{padding:11px 8px;font-size:.88rem}
  .nav-tombol{padding:11px 14px;font-size:.85rem}
}
@media (max-width:1080px){
  .head-dalam{min-height:74px;flex-wrap:wrap;gap:14px;padding-top:6px;padding-bottom:6px}
  .brand{flex:1 1 auto}
  .tombol-nav{display:inline-flex;order:3;flex:0 0 auto}
  /* Tombol PPDB tetap tampil di baris atas (di sebelah tombol menu) supaya mudah ditemukan. */
  .head-aksi{order:2;margin-left:auto}
  .nav-utama{display:none;width:100%;order:4;flex-direction:column;align-items:stretch;padding:10px 0 16px;gap:2px;margin-left:0}
  .nav-utama.buka{display:flex}
  .nav-item>a{width:100%}
  .nav-item.aktif>a::after{display:none}
  .nav-anak{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 14px;background:transparent}
}
@media (max-width:560px){
  .brand-logo{width:44px;height:44px}
  .brand-teks strong{font-size:1rem}
  .brand-teks small{display:none}
  .nav-tombol{padding:10px 13px;font-size:.8rem;gap:6px}
  .nav-tombol svg{width:14px;height:14px}
}

/* ---------- slider besar beranda ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#083a28,#0d5c3f 55%,#15795a)}
.hero-lacak{position:relative;min-height:430px}
/* Hiasan latar dipakai saat slide BELUM berisi gambar (latar gradasi). Intensitasnya dibuat
   ringan supaya TIDAK menutupi/menghijaukan foto yang sudah diunggah. */
.hero-lacak::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 300px at 85% 15%,rgba(242,201,76,.10),transparent 70%),
  radial-gradient(500px 260px at 10% 90%,rgba(21,121,90,.28),transparent 70%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px);}
/* Foto slide tampil JELAS (permintaan pemilik). Sebelumnya opacity .55 membuat foto pudar &
   tertutup warna tema; sekarang hampir apa adanya dan hanya digelapkan oleh .hero-lapisan. */
.hero-slide-gambar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.96}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex;align-items:center}
/* .wadah WAJIB selebar penuh: sebagai anak flex, tanpa ini blok teks menyusut ke lebar isinya
   dan ikut TERPUSAT sehingga teks beranda tidak rata dengan tepi konten halaman. */
.hero-slide .wadah{width:100%}
.hero-slide.aktif{opacity:1;position:relative}
/* Lapisan gelap dibuat BERGANTUNG SISI: gelap di kiri (tempat teks) dan hampir transparan di
   kanan (tempat foto terlihat) — sehingga foto jelas tanpa mengorbankan keterbacaan tulisan. */
.hero-lapisan{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,44,31,.95) 0%,rgba(6,44,31,.80) 34%,rgba(6,44,31,.45) 48%,rgba(6,44,31,.04) 60%,rgba(6,44,31,.02) 100%)}
/* Tulisan diberi bayangan halus agar tetap terbaca bila bagian atas foto kebetulan terang. */
/* Bayangan tulisan dibuat dua lapis: tipis (menegaskan huruf) + lebar (menggelapkan latar di
   sekitar huruf) sehingga tulisan tetap terbaca walau foto di belakangnya sangat terang. */
.hero-teks h1,.hero-teks p{text-shadow:0 1px 3px rgba(4,26,18,.85),0 3px 16px rgba(4,26,18,.65)}
.hero-badge{box-shadow:0 2px 10px rgba(4,26,18,.35)}
.hero-teks{position:relative;padding:70px 0 90px;max-width:720px;color:#fff}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(242,201,76,.45);
  color:#fdf6e3;border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:600;margin-bottom:18px}
.hero-badge svg{color:var(--emas-terang)}
.hero-teks h1{margin:0;color:#fff;font-size:2.6rem;line-height:1.15}
.hero-teks h1 .emas{display:block;color:var(--emas-terang)}
.hero-teks p{color:#dcefe4;font-size:1.06rem;margin:14px 0 26px;max-width:600px}
.hero-aksi{display:flex;gap:12px;flex-wrap:wrap}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%;padding:0 16px;pointer-events:none}
.hero-tombol{pointer-events:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hero-tombol:hover{background:var(--emas);color:#3a2c00}
.hero-titik{position:absolute;left:50%;transform:translateX(-50%);bottom:80px;display:flex;gap:8px;z-index:5}
.hero-titik button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.hero-titik button.aktif{background:var(--emas-terang);width:30px;border-radius:99px}
@media (max-width:760px){
  /* Di layar sempit teks memakai lebar penuh, jadi lapisan gelap dibuat MERATA (vertikal)
     supaya tulisan tetap terbaca di atas foto. */
  .hero-lapisan{background:linear-gradient(180deg,rgba(6,44,31,.86) 0%,rgba(6,44,31,.64) 45%,rgba(6,44,31,.88) 100%)}
  .hero-slide-gambar{opacity:.95}
  .hero-lacak{min-height:520px}
  .hero-teks{padding:44px 0 110px}
  .hero-teks h1{font-size:1.85rem}
  .hero-teks p{font-size:.98rem}
  .hero-nav{display:none}
  .hero-titik{bottom:12px}
}

/* strip keunggulan yang menumpuk di bawah slider */
.strip-keunggulan{margin-top:-46px;position:relative;z-index:10}
.strip-keunggulan .kartu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:26px 24px;box-shadow:var(--bayang)}
.strip-item{display:flex;gap:14px;align-items:flex-start;padding-right:6px}
.strip-item+.strip-item{border-left:1px solid var(--garis);padding-left:22px}
.strip-ikon{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--hijau-muda);color:var(--hijau-tua);
  display:flex;align-items:center;justify-content:center;border:1px solid #cfe6da}
.strip-item strong{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--hijau-tua);margin-bottom:3px}
.strip-item p{margin:0;font-size:.86rem;color:var(--mut);line-height:1.5}
/* Baris ke-2 dan seterusnya (bila jumlah keunggulan lebih dari 4) tidak memakai pemisah. */
@media (min-width:901px){
  .strip-item:nth-child(4n+1){border-left:0;padding-left:0}
}
@media (max-width:900px){
  .strip-keunggulan{margin-top:0}
  .strip-keunggulan .kartu{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .strip-item+.strip-item{border-left:0;padding-left:0}
}
@media (max-width:560px){.strip-keunggulan .kartu{grid-template-columns:minmax(0,1fr)}}

/* ---------- seksi dengan latar HIJAU (mis. bagian Guru & Tendik) ---------- */
.seksi.hijau{background:linear-gradient(120deg,#083a28,#0b4a33 60%,#0d5c3f);color:#d8ece2}
.seksi.hijau .seksi-kepala h2{color:#fff}
.seksi.hijau .seksi-kepala p{color:#bfe0d0}
.seksi.hijau .gulir-nav button{background:rgba(255,255,255,.12);border-color:rgba(242,201,76,.45);color:#fff}
.seksi.hijau .gulir-nav button:hover{background:var(--emas);color:#3a2c00;border-color:var(--emas)}
.seksi.hijau .gulir-lacak::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}
.seksi.hijau .guru-mini{border-color:rgba(242,201,76,.35)}
.seksi.hijau .guru-mini strong{color:var(--ink)}
.seksi.hijau .guru-mini small{color:var(--mut)}

/* ---------- seksi umum ---------- */
.seksi{padding:56px 0}
.seksi.alt{background:#fff}
.seksi.emas{background:linear-gradient(180deg,#fdf8ea,#fff)}
.seksi-kepala{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.seksi-kepala h2{margin:0 0 6px;font-size:1.65rem;color:var(--hijau-tua);position:relative;padding-bottom:12px}
.seksi-kepala h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--emas),var(--emas-terang))}
.seksi-kepala p{margin:0;color:var(--mut);font-size:.95rem}
.seksi-kanan{display:flex;gap:10px;align-items:center}

/* kartu program */
.kartu-program{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--garis);
  border-radius:var(--radius);padding:20px;box-shadow:var(--bayang-kecil);transition:transform .16s,box-shadow .16s,border-color .16s}
.kartu-program:hover{transform:translateY(-4px);box-shadow:var(--bayang);border-color:#d9cfa4}
.kartu-program .ikon-bulat{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--hijau-muda);
  color:var(--hijau-tua);display:flex;align-items:center;justify-content:center}
.kartu-program h3{margin:0 0 4px;font-size:1.02rem;color:var(--ink)}
.kartu-program p{margin:0;font-size:.88rem;color:var(--mut)}
.kartu-program .panah{margin-left:auto;color:var(--emas);display:flex;align-items:center}

/* berita */
.daftar-berita{display:flex;flex-direction:column;gap:16px}
.berita-baris{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--garis);
  border-radius:var(--radius);padding:12px;box-shadow:var(--bayang-kecil);transition:transform .15s,box-shadow .15s}
.berita-baris:hover{transform:translateY(-3px);box-shadow:var(--bayang)}
.berita-thumb{flex:0 0 132px;height:92px;border-radius:10px;overflow:hidden;background:var(--hijau-muda)}
.berita-thumb img{width:100%;height:100%;object-fit:cover}
.berita-baris .isi{min-width:0;padding:4px 4px 4px 0}
.berita-tanggal{font-size:.78rem;color:var(--mut);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.berita-baris h3{margin:0 0 4px;font-size:1rem;line-height:1.35}
.berita-baris h3 a{color:var(--ink)}
.berita-baris h3 a:hover{color:var(--hijau)}
.berita-baris p{margin:0;font-size:.84rem;color:var(--mut)}

/* kartu PPDB */
.kartu-ppdb{background:linear-gradient(140deg,#0a4530,#0d5c3f 60%,#14795a);border-radius:var(--radius);
  padding:26px;color:#fff;box-shadow:var(--bayang);position:relative;overflow:hidden}
.kartu-ppdb::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,201,76,.28),transparent 70%)}
.kartu-ppdb .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(242,201,76,.5);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;color:#fdf6e3}
.kartu-ppdb h3{margin:16px 0 8px;color:#fff;font-size:1.7rem;line-height:1.2}
.kartu-ppdb h3 span{display:block;font-size:1rem;font-weight:600;color:var(--emas-terang);font-family:var(--font)}
.kartu-ppdb p{color:#d9ece2;font-size:.92rem}
.kartu-ppdb .judul-kecil{font-weight:700;font-size:1.05rem;font-family:var(--serif)}

/* agenda */
.agenda-baris{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--garis)}
.agenda-baris:last-child{border-bottom:0}
.agenda-tgl{flex:0 0 62px;text-align:center;border-radius:10px;background:var(--hijau-muda);border:1px solid #cfe6da;padding:8px 4px}
.agenda-tgl.lampau{background:#f1f3f2;border-color:#dde3e0}
.agenda-tgl.lampau .hari{color:#5d6a64}
.agenda-tgl.lampau .bln{color:#8a9791}
.agenda-tgl .hari{display:block;font-size:1.35rem;font-weight:800;color:var(--hijau-tua);line-height:1}
.agenda-tgl .bln{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hijau)}
.agenda-baris h3{margin:0 0 3px;font-size:1rem}
.agenda-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--mut)}
.agenda-meta span{display:inline-flex;align-items:center;gap:5px}

/* statistik */
.band-stat{background:linear-gradient(120deg,#083a28,#0b4a33 60%,#0d5c3f);color:#fff;padding:46px 0}
.band-stat h2{color:#fff;text-align:center;margin:0 0 28px;font-size:1.5rem}
.band-stat h2::after{content:"";display:block;width:64px;height:4px;margin:12px auto 0;border-radius:4px;
  background:linear-gradient(90deg,var(--emas),var(--emas-terang))}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat-kotak{background:rgba(255,255,255,.07);border:1px solid rgba(242,201,76,.28);border-radius:var(--radius);
  padding:22px 18px;text-align:center;transition:transform .16s,background .16s}
.stat-kotak:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.stat-kotak .stat-ikon-situs{margin:0 auto 10px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(242,201,76,.16);color:var(--emas-terang);border:1px solid rgba(242,201,76,.4)}
.stat-angka-besar{font-size:2.1rem;font-weight:800;color:#fff;font-family:var(--serif);line-height:1}
.stat-label{font-size:.85rem;color:#cfe6da;margin-top:6px}
@media (max-width:860px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stat-grid{grid-template-columns:minmax(0,1fr)}}

/* testimoni */
.testi-lacak{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.testi-kartu{flex:0 0 calc(50% - 10px);scroll-snap-align:start;background:#fff;border:1px solid var(--garis);
  border-radius:var(--radius);padding:22px;box-shadow:var(--bayang-kecil)}
.testi-kartu .quote{color:var(--emas);margin-bottom:10px}
.testi-kartu p{font-size:.95rem;color:var(--teks);font-style:italic}
.testi-orang{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--garis)}
.testi-foto{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--hijau-muda);
  display:flex;align-items:center;justify-content:center;color:var(--hijau-tua);font-weight:800}
.testi-orang strong{display:block;font-size:.92rem;color:var(--ink)}
.testi-orang small{color:var(--mut);font-size:.78rem}
.testi-nav{display:flex;gap:8px}
.testi-nav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--garis);background:#fff;color:var(--hijau-tua);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.testi-nav button:hover{border-color:var(--emas);background:var(--emas-muda)}
@media (max-width:760px){.testi-kartu{flex:0 0 88%}}

/* slider kecil + medsos */
/* Tombol media sosial: memakai grid agar tepi kiri/kanannya SEJAJAR dengan galeri di atasnya,
   dan ikonnya diperbesar supaya seimbang dengan tinggi foto galeri. */
.medsos-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:20px}
.medsos-baris a{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;
  border:1px solid var(--garis);border-radius:999px;padding:14px 20px;font-weight:600;font-size:.95rem;
  color:var(--hijau-tua);box-shadow:var(--bayang-kecil);transition:transform .15s,border-color .15s,background .15s}
.medsos-baris a svg{width:24px;height:24px;flex:0 0 auto}

/* Setiap tombol memakai WARNA KHAS media sosialnya (facebook biru, instagram gradasi,
   youtube merah, whatsapp hijau, tiktok hitam). Kelas ditentukan dari nama ikon pada
   tabel `sosial` — lihat sosial_kelas(). Warna ditulis lebih gelap sedikit supaya tulisan
   putih tetap terbaca. */
.medsos-baris a.sos-facebook{background:linear-gradient(135deg,#2d88ff,#1462c9);border-color:#1462c9;color:#fff}
.medsos-baris a.sos-instagram{background:linear-gradient(135deg,#f58529,#dd2a7b 52%,#8134af);border-color:#c13584;color:#fff}
.medsos-baris a.sos-youtube{background:linear-gradient(135deg,#ff2b16,#c31407);border-color:#c31407;color:#fff}
.medsos-baris a.sos-whatsapp{background:linear-gradient(135deg,#25d366,#0f7a52);border-color:#128c7e;color:#fff}
.medsos-baris a.sos-tiktok{background:linear-gradient(135deg,#333941,#0b0e12);border-color:#0b0e12;color:#fff}
.medsos-baris a.sos-globe{background:linear-gradient(135deg,var(--hijau),var(--hijau-tua));border-color:var(--hijau-tua);color:#fff}
.medsos-baris a[class^="sos-"]:hover{transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 10px 22px rgba(11,74,51,.22)}
.medsos-baris a[class^="sos-"] svg{color:#fff}

@media (max-width:560px){
  .medsos-baris{grid-template-columns:repeat(2,minmax(0,1fr))}
  .medsos-baris a{padding:12px 14px;font-size:.88rem}
  .medsos-baris a svg{width:20px;height:20px}
}

/* ---------- footer ---------- */
.situs-kaki{background:linear-gradient(150deg,#082f21,#0b4a33);color:#cfe6da;margin-top:40px}
.kaki-dalam{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1fr;gap:30px;padding:46px 20px 34px}
.kaki-kolom h4{color:#fff;font-size:1rem;margin:0 0 14px;font-family:var(--font)}
.kaki-brand{display:flex;gap:14px;align-items:flex-start}
.kaki-logo{width:54px;height:54px;object-fit:contain;background:rgba(255,255,255,.06);border-radius:10px;padding:4px}
.kaki-kolom strong{color:#fff;display:block;font-family:var(--serif);font-size:1.1rem;line-height:1.25}
.kaki-slogan{color:var(--emas-terang);font-size:.85rem;margin:2px 0 8px}
.kaki-about{font-size:.84rem;color:#a9c7b8;margin:0}
.kaki-menu,.kaki-kontak{list-style:none;padding:0;margin:0;font-size:.88rem}
.kaki-menu li{margin-bottom:8px}
.kaki-menu a{color:#cfe6da}
.kaki-menu a:hover{color:var(--emas-terang)}
.kaki-kontak li{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px}
.kaki-kontak svg{color:var(--emas-terang);flex:0 0 auto;margin-top:3px}
.kaki-sosial{display:flex;gap:10px;flex-wrap:wrap}
.kaki-sosial a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#e8f5ee;border:1px solid rgba(242,201,76,.3)}
.kaki-sosial a:hover{background:var(--emas);color:#3a2c00}
/* Ikon media sosial pada kaki halaman memakai warna khasnya (versi terang untuk latar gelap) */
.kaki-sosial a.sos-facebook{color:#6bb0ff}
.kaki-sosial a.sos-instagram{color:#f388bd}
.kaki-sosial a.sos-youtube{color:#ff7461}
.kaki-sosial a.sos-whatsapp{color:#5ce59b}
.kaki-sosial a.sos-tiktok{color:#e8eef5}
.kaki-sosial a.sos-facebook:hover,.kaki-sosial a.sos-instagram:hover,.kaki-sosial a.sos-youtube:hover,
.kaki-sosial a.sos-whatsapp:hover,.kaki-sosial a.sos-tiktok:hover{background:var(--emas);color:#3a2c00}
.kaki-bawah{border-top:1px solid rgba(255,255,255,.10);font-size:.82rem;padding:14px 0;color:#a9c7b8}
.kaki-bawah .wadah{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kaki-versi{color:#7fa694}
@media (max-width:980px){.kaki-dalam{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (max-width:560px){.kaki-dalam{grid-template-columns:minmax(0,1fr)}}

/* tombol WhatsApp mengapung */
.tombol-wa{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.tombol-wa:hover{color:#fff;transform:translateY(-2px)}

/* ---------- halaman dalam ---------- */
.hero-halaman{background:linear-gradient(120deg,#083a28,#0d5c3f 70%,#14795a);color:#fff;padding:44px 0 38px;position:relative;overflow:hidden}
.hero-halaman::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,201,76,.22),transparent 70%)}
.hero-halaman h1{margin:0 0 6px;color:#fff;font-size:1.9rem}
.hero-halaman p{margin:0 0 12px;color:#d3e9dd;font-size:.98rem}
.remah{display:flex;gap:8px;align-items:center;font-size:.83rem;color:#a9c7b8;flex-wrap:wrap}
.remah a{color:#e8f5ee}
.remah a:hover{color:var(--emas-terang)}
.remah .aktif{color:var(--emas-terang)}
.isi-halaman{padding:44px 0}
.artikel{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:30px;box-shadow:var(--bayang-kecil)}
.artikel h2{font-size:1.3rem;color:var(--hijau-tua)}
.artikel h3{font-size:1.1rem;color:var(--hijau-tua2);margin-top:1.4em}
.artikel ul,.artikel ol{padding-left:1.4em}
.artikel ul li{margin-bottom:6px}
.sisi-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px;box-shadow:var(--bayang-kecil)}
.sisi-kartu h3{margin-top:0;font-size:1.02rem;color:var(--hijau-tua)}
.sisi-menu{list-style:none;padding:0;margin:0}
.sisi-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;color:#26443a;border-left:3px solid transparent}
.sisi-menu a:hover{background:var(--hijau-muda);border-left-color:var(--emas);color:var(--hijau-tua)}
.sisi-menu a.aktif{background:var(--hijau-muda);border-left-color:var(--emas);font-weight:700;color:var(--hijau-tua)}

/* daftar berita penuh */
.berita-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.berita-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--bayang-kecil);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.berita-kartu:hover{transform:translateY(-4px);box-shadow:var(--bayang)}
.berita-kartu .gbr{height:180px;background:linear-gradient(135deg,#0d5c3f,#15795a);overflow:hidden}
.berita-kartu .gbr img{width:100%;height:100%;object-fit:cover}
.berita-kartu .isi{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.berita-kartu h3{margin:0;font-size:1.02rem;line-height:1.35}
.berita-kartu p{margin:0;font-size:.86rem;color:var(--mut)}
.berita-kartu .kaki{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--mut)}
@media (max-width:900px){.berita-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.berita-grid{grid-template-columns:minmax(0,1fr)}}

.artikel-detail .sampul{border-radius:var(--radius);overflow:hidden;margin-bottom:22px;max-height:420px}
.meta-artikel{display:flex;gap:16px;flex-wrap:wrap;font-size:.83rem;color:var(--mut);margin-bottom:18px}
.meta-artikel span{display:inline-flex;align-items:center;gap:6px}

/* galeri */
.album-chip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.album-chip a{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--garis);font-size:.86rem;color:#26443a}
.album-chip a.aktif,.album-chip a:hover{background:var(--hijau-tua);border-color:var(--hijau-tua);color:#fff}
.galeri-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.galeri-item{position:relative;border-radius:12px;overflow:hidden;background:var(--hijau-muda);aspect-ratio:4/3;box-shadow:var(--bayang-kecil)}
.galeri-item img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.galeri-item:hover img{transform:scale(1.06)}
.galeri-item .ket{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font-size:.8rem;
  background:linear-gradient(transparent,rgba(6,44,31,.85))}
@media (max-width:1000px){.galeri-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.galeri-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Video YouTube: 4 kotak sebaris agar ringkas & rapi (permintaan pemilik) */
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.video-kotak{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;box-shadow:var(--bayang-kecil)}
.video-bingkai{position:relative;padding-top:56.25%;background:#0b1f16}
.video-bingkai iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-kotak .isi{padding:10px 12px}
.video-kotak h3{margin:0 0 3px;font-size:.86rem;line-height:1.25}
.video-kotak .isi p{font-size:.76rem;line-height:1.35}
@media (max-width:1000px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.video-grid{grid-template-columns:minmax(0,1fr)}}

/* fasilitas */
.fasilitas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fasilitas-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;box-shadow:var(--bayang-kecil)}
.fasilitas-kartu .gbr{height:170px;background:linear-gradient(135deg,#0d5c3f,#15795a)}
.fasilitas-kartu .gbr img{width:100%;height:100%;object-fit:cover}
.fasilitas-kartu .isi{padding:18px}
.fasilitas-kartu h3{margin:0 0 6px;font-size:1.02rem;color:var(--hijau-tua)}
@media (max-width:900px){.fasilitas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fasilitas-grid{grid-template-columns:minmax(0,1fr)}}

/* guru */
.guru-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.guru-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--bayang-kecil)}
.guru-foto{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:0 auto 12px;background:var(--hijau-muda);
  display:flex;align-items:center;justify-content:center;color:var(--hijau-tua);font-size:1.6rem;font-weight:800;border:2px solid var(--emas)}
.guru-kartu h3{margin:0 0 2px;font-size:.98rem}
.guru-kartu small{color:var(--mut);font-size:.82rem}
@media (max-width:1000px){.guru-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.guru-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.guru-grid{grid-template-columns:minmax(0,1fr)}}

/* kontak */
.kontak-info{list-style:none;padding:0;margin:0}
.kontak-info li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--garis)}
.kontak-info li:last-child{border-bottom:0}
.kontak-info .ikon{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--hijau-muda);color:var(--hijau-tua);
  display:flex;align-items:center;justify-content:center}
.kontak-info strong{display:block;font-size:.86rem;color:var(--ink)}
.kontak-info span{font-size:.9rem;color:var(--teks)}
.peta{border:0;width:100%;height:290px;border-radius:var(--radius);margin-top:18px}

/* formulir */
.form-baris{margin-bottom:14px}
.form-baris label{display:block;font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:6px}
.form-baris .wajib{color:var(--merah)}
.form-baris input[type=text],.form-baris input[type=email],.form-baris input[type=tel],.form-baris input[type=date],
.form-baris input[type=time],.form-baris input[type=number],.form-baris input[type=password],.form-baris input[type=url],
.form-baris input[type=search],.form-baris select,.form-baris textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--garis);border-radius:10px;font:inherit;font-size:.94rem;
  background:#fff;color:var(--teks);outline:none;transition:border-color .15s,box-shadow .15s}
.form-baris input:focus,.form-baris select:focus,.form-baris textarea:focus{border-color:var(--hijau);box-shadow:0 0 0 3px rgba(21,121,90,.12)}
.form-baris textarea{min-height:110px;resize:vertical}
.form-baris .bantuan{font-size:.78rem;color:var(--mut);margin-top:4px}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:700px){.form-2,.form-3{grid-template-columns:minmax(0,1fr)}}
.aksi-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.gambar-pratinjau{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.pratinjau-gambar{display:flex;align-items:center;justify-content:center;width:120px;height:80px;border-radius:10px;
  overflow:hidden;background:#fff;border:1px solid var(--garis);flex:0 0 auto}
.pratinjau-gambar img{width:100%;height:100%;object-fit:cover}
.pratinjau-gambar .kosong-kecil{font-size:.72rem;color:var(--mut);text-align:center;padding:6px}
.pratinjau-medan{min-width:0;flex:1 1 220px}
.gambar-pratinjau.besar .pratinjau-gambar{width:220px;height:130px}
.gambar-pratinjau img{max-width:100%}

/* PPDB */
.langkah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:10px}
.langkah{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px;box-shadow:var(--bayang-kecil)}
.langkah .no{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--emas),var(--emas-terang));
  color:#3a2c00;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.langkah h3{margin:0 0 6px;font-size:1rem}
.langkah p{margin:0;font-size:.86rem;color:var(--mut)}
@media (max-width:860px){.langkah-grid{grid-template-columns:minmax(0,1fr)}}
.daftar-syarat{list-style:none;padding:0;margin:0}
.daftar-syarat li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:.92rem}
.daftar-syarat li svg{color:var(--hijau);flex:0 0 auto;margin-top:4px}
.tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.tabel th,.tabel td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:top}
.tabel th{background:var(--hijau-muda);color:var(--hijau-tua);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.tabel tbody tr:hover{background:#fbfdfc}
.tabel-wrap{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--radius);background:#fff}
.kartu-hasil{border-radius:var(--radius);padding:24px;border:1px solid var(--garis);background:#fff;box-shadow:var(--bayang-kecil)}
.kartu-hasil.tengah{text-align:center}
.kartu-hasil .nomor{font-size:1.6rem;font-weight:800;color:var(--hijau-tua);font-family:var(--serif);letter-spacing:.04em}

/* paginasi & kosong */
.paginasi{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:26px;justify-content:center}
.paginasi .hal{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;
  border-radius:10px;background:#fff;border:1px solid var(--garis);color:var(--hijau-tua);font-weight:600}
.paginasi .hal.aktif{background:var(--hijau-tua);border-color:var(--hijau-tua);color:#fff}
.kotak-kosong{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:90px;
  background:linear-gradient(135deg,#e8f5ee,#d7ece1);color:#5f8b78;font-size:.78rem;text-align:center;padding:8px}


/* ==========================================================================
   BERANDA v1.2.0 — berita 2x2, slider program, slider guru,
   foto kepala pada sambutan, dan slider foto galeri
   ========================================================================== */

/* ---------- Berita terbaru: 4 kartu dalam susunan 2 kiri & 2 kanan ---------- */
.berita-ppdb{grid-template-columns:1.9fr minmax(0,1fr);gap:26px;align-items:start}
.berita-beranda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.berita-mini{display:flex;flex-direction:column;background:#fff;border:1px solid var(--garis);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--bayang-kecil);
  transition:transform .16s,box-shadow .16s}
.berita-mini:hover{transform:translateY(-4px);box-shadow:var(--bayang)}
.berita-mini .gbr{display:block;height:150px;overflow:hidden;background:linear-gradient(135deg,#0d5c3f,#15795a)}
.berita-mini .gbr img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.berita-mini:hover .gbr img{transform:scale(1.05)}
.berita-mini .isi{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.berita-mini h3{margin:0;font-size:.98rem;line-height:1.4}
.berita-mini h3 a{color:var(--ink)}
.berita-mini h3 a:hover{color:var(--hijau)}
.berita-mini p{margin:0;font-size:.83rem;color:var(--mut)}
.berita-mini .berita-tanggal{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.76rem;color:var(--mut)}
@media (max-width:1000px){
  .berita-ppdb{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .berita-beranda{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Wadah slider mendatar umum (program, guru, foto) ---------- */
.gulir-lacak{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;
  scroll-behavior:smooth}
.gulir-lacak::-webkit-scrollbar{height:8px}
.gulir-lacak::-webkit-scrollbar-thumb{background:#cfe0d7;border-radius:99px}
.gulir-item{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start}
.gulir-nav{display:flex;gap:8px}
.gulir-nav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--garis);background:#fff;
  color:var(--hijau-tua);cursor:pointer;display:flex;align-items:center;justify-content:center}
.gulir-nav button:hover{border-color:var(--emas);background:var(--emas-muda)}
.gulir-titik-nav{display:flex;gap:8px;justify-content:center;margin-top:10px}
.gulir-panah{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--garis);background:#fff;
  color:var(--hijau-tua);cursor:pointer;display:flex;align-items:center;justify-content:center}
.gulir-panah:hover{border-color:var(--emas);background:var(--emas-muda)}

/* Program unggulan sebagai kartu di dalam slider (lebar tetap per kartu) */
.gulir-program .kartu-program{background:#fff}
/* Setiap kartu program memakai WARNA BERBEDA (9 warna berputar). Warna dipilih dari keluarga
   hijau/emas supaya tetap selaras dengan tema, dengan kontras teks yang memadai. */
.gulir-program .gulir-item:nth-child(9n+1){background:#eaf6f0;border-color:#c9e5d7}
.gulir-program .gulir-item:nth-child(9n+1) .ikon-bulat{background:#15795a;color:#fff}
.gulir-program .gulir-item:nth-child(9n+1) .panah{color:#15795a}
.gulir-program .gulir-item:nth-child(9n+2){background:#fdf6e3;border-color:#efe0b0}
.gulir-program .gulir-item:nth-child(9n+2) .ikon-bulat{background:#c9a227;color:#3a2c00}
.gulir-program .gulir-item:nth-child(9n+2) .panah{color:#a8871a}
.gulir-program .gulir-item:nth-child(9n+3){background:#eaf1fb;border-color:#cdddf3}
.gulir-program .gulir-item:nth-child(9n+3) .ikon-bulat{background:#2563a8;color:#fff}
.gulir-program .gulir-item:nth-child(9n+3) .panah{color:#2563a8}
.gulir-program .gulir-item:nth-child(9n+4){background:#f2ecfb;border-color:#dcd0f2}
.gulir-program .gulir-item:nth-child(9n+4) .ikon-bulat{background:#6d4bb5;color:#fff}
.gulir-program .gulir-item:nth-child(9n+4) .panah{color:#6d4bb5}
.gulir-program .gulir-item:nth-child(9n+5){background:#fdecea;border-color:#f3cfcb}
.gulir-program .gulir-item:nth-child(9n+5) .ikon-bulat{background:#b3261e;color:#fff}
.gulir-program .gulir-item:nth-child(9n+5) .panah{color:#b3261e}
.gulir-program .gulir-item:nth-child(9n+6){background:#e7f5f6;border-color:#c5e6e9}
.gulir-program .gulir-item:nth-child(9n+6) .ikon-bulat{background:#0f7d86;color:#fff}
.gulir-program .gulir-item:nth-child(9n+6) .panah{color:#0f7d86}
.gulir-program .gulir-item:nth-child(9n+7){background:#fff3e6;border-color:#f6ddbd}
.gulir-program .gulir-item:nth-child(9n+7) .ikon-bulat{background:#c2600a;color:#fff}
.gulir-program .gulir-item:nth-child(9n+7) .panah{color:#c2600a}
.gulir-program .gulir-item:nth-child(9n+8){background:#f2f8e6;border-color:#dbecc0}
.gulir-program .gulir-item:nth-child(9n+8) .ikon-bulat{background:#5c8a12;color:#fff}
.gulir-program .gulir-item:nth-child(9n+8) .panah{color:#5c8a12}
.gulir-program .gulir-item:nth-child(9n+9){background:#fdeef5;border-color:#f6cfe2}
.gulir-program .gulir-item:nth-child(9n+9) .ikon-bulat{background:#a82171;color:#fff}
.gulir-program .gulir-item:nth-child(9n+9) .panah{color:#a82171}
/* Judul & keterangan kartu berwarna tetap gelap agar mudah dibaca */
.gulir-program .kartu-program h3{color:#12261e}
.gulir-program .kartu-program p{color:#4a5c54}
@media (max-width:980px){ .gulir-item{flex:0 0 calc((100% - 20px) / 2)} }
@media (max-width:620px){ .gulir-item{flex:0 0 85%} }

/* ---------- Slider guru (foto + nama, ukuran sedang) ---------- */
.gulir-guru .gulir-item{flex:0 0 190px}
.guru-mini{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:16px 14px;
  text-align:center;box-shadow:var(--bayang-kecil);display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .16s,box-shadow .16s,border-color .16s}
.guru-mini:hover{transform:translateY(-4px);box-shadow:var(--bayang);border-color:#d9cfa4}
.guru-mini-foto{width:118px;height:118px;border-radius:50%;object-fit:cover;background:var(--hijau-muda);
  border:3px solid var(--emas-muda);display:flex;align-items:center;justify-content:center;
  color:var(--hijau-tua);font-weight:800;font-size:2rem;margin-bottom:8px}
.guru-mini strong{font-size:.92rem;color:var(--ink);line-height:1.35}
.guru-mini small{font-size:.78rem;color:var(--mut);line-height:1.4}
@media (max-width:620px){ .gulir-guru .gulir-item{flex:0 0 165px} .guru-mini-foto{width:96px;height:96px} }

/* ---------- Foto kepala pada kartu Sambutan ---------- */
.kartu-sambutan{text-align:left}
.kepala-foto-bingkai{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.kepala-foto{width:100%;max-width:230px;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:12px;border:3px solid var(--emas-muda);background:var(--hijau-muda);
  display:flex;align-items:center;justify-content:center;color:var(--hijau-tua);font:800 2.6rem/1 var(--serif)}
.kepala-foto-bingkai.kosong .kepala-foto{border-style:dashed;border-color:#cfe0d7}
.kepala-foto-ket{font-size:.74rem;color:var(--mut);text-align:center;max-width:250px}
.kartu-sambutan h3{text-align:center}

/* ---------- Slider foto galeri & media sosial ---------- */
.gulir-foto .gulir-item{flex:0 0 calc((100% - 40px) / 3)}
.foto-slide{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(135deg,#0d5c3f,#15795a);box-shadow:var(--bayang-kecil)}
.foto-slide img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.foto-slide:hover img{transform:scale(1.06)}
.foto-slide .ket{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:.84rem;
  font-weight:600;background:linear-gradient(transparent,rgba(6,44,31,.88))}
@media (max-width:980px){ .gulir-foto .gulir-item{flex:0 0 calc((100% - 20px) / 2)} }
@media (max-width:620px){ .gulir-foto .gulir-item{flex:0 0 88%} }

/* panel admin dasar (aturan rinci ada di admin/admin.css) */
body.admin{background:#f2f6f4}
.admin-isi .kartu+.kartu{margin-top:22px}


/* ==========================================================================
   PRESTASI & PELATIHAN — tab admin + tombol “Lihat” sertifikat
   ========================================================================== */
.tab-prestasi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--garis);padding-bottom:12px}
.tab-item{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--garis);
  background:#fff;color:var(--hijau-tua);font-weight:600;font-size:.88rem}
.tab-item:hover{border-color:var(--emas);background:var(--emas-muda)}
.tab-item.aktif{background:linear-gradient(135deg,var(--hijau-tua),var(--hijau));border-color:var(--hijau-tua);color:#fff}
.tab-jumlah{background:rgba(0,0,0,.08);border-radius:999px;padding:1px 8px;font-size:.75rem}
.tab-item.aktif .tab-jumlah{background:rgba(255,255,255,.22)}
.pratinjau-berkas{display:flex;align-items:center;justify-content:center;width:120px;height:80px;border-radius:10px;
  overflow:hidden;background:#fff;border:1px solid var(--garis);flex:0 0 auto}
.pratinjau-berkas .berkas-ikon{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--hijau-tua);font-size:.7rem}
a.btn-lihat{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
@media (max-width:560px){
  .tab-prestasi{gap:6px}
  .tab-item{padding:9px 12px;font-size:.82rem}
}

/* ==========================================================================
   DATA SISWA & DATA ALUMNI (halaman publik Kesiswaan)
   ========================================================================== */
.filter-publik{background:#fff;border:1px solid var(--garis);border-radius:14px;padding:14px 18px;
  margin:0 0 18px;box-shadow:var(--bayang-kecil)}
.filter-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-baris label{font-weight:700;font-size:.88rem;color:var(--hijau-tua);white-space:nowrap}
.filter-baris select{padding:10px 12px;border:1.5px solid var(--garis);border-radius:10px;font:inherit;
  font-size:.92rem;background:#fff;color:var(--teks);min-width:190px;cursor:pointer}
.filter-baris select:focus{border-color:var(--hijau);box-shadow:0 0 0 3px rgba(21,121,90,.12);outline:none}
.filter-jumlah{margin-left:auto;font-size:.83rem;color:var(--mut);font-weight:600}
.judul-kelompok{margin:22px 0 10px;font-size:1.02rem;color:var(--hijau-tua);
  border-left:4px solid var(--emas);padding-left:10px}
.judul-kelompok .mut{font-weight:500;font-size:.82rem}
table.tabel-publik td{vertical-align:middle}
.foto-siswa{width:44px;height:56px;object-fit:cover;border-radius:8px;background:var(--hijau-muda);
  border:1px solid var(--garis);display:inline-flex;align-items:center;justify-content:center;
  color:var(--hijau-tua);font-weight:800;font-size:1rem}
.foto-siswa.inisial{aspect-ratio:3/4}
@media (max-width:640px){
  .filter-baris{flex-direction:column;align-items:stretch;gap:8px}
  .filter-jumlah{margin-left:0}
  .filter-baris select{min-width:0;width:100%}
  table.tabel-publik{font-size:.84rem}
  table.tabel-publik th,table.tabel-publik td{padding:8px 9px}
  .foto-siswa{width:36px;height:46px}
}

/* ==========================================================================
   KARTU POLLING PENDAPAT (beranda)
   ========================================================================== */
.kartu-poll{margin-top:16px}
.poll-kepala{display:flex;gap:11px;align-items:flex-start;margin-bottom:8px}
.poll-ikon{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--hijau-muda);
  color:var(--hijau-tua);display:flex;align-items:center;justify-content:center}
.poll-kepala h3{margin:0;font-size:1rem;line-height:1.35;color:var(--hijau-tua);font-family:var(--font);font-weight:700}
.poll-ket{font-size:.83rem;color:var(--mut);margin:0 0 12px}
.poll-pilihan{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.poll-opsi{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1.5px solid var(--garis);
  border-radius:10px;background:#fff;cursor:pointer;font-size:.9rem;transition:border-color .15s,background .15s}
.poll-opsi:hover{border-color:var(--emas);background:var(--emas-muda)}
.poll-opsi input{accent-color:var(--hijau-tua);width:17px;height:17px;flex:0 0 auto}
.poll-opsi:has(input:checked){border-color:var(--hijau);background:var(--hijau-muda);font-weight:600}
.poll-aksi{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.poll-lihat{font-size:.83rem;color:var(--mut);text-decoration:underline}
.poll-lihat:hover{color:var(--hijau-tua)}
.poll-hasil{display:flex;flex-direction:column;gap:11px}
.poll-baris-kepala{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:.86rem;margin-bottom:4px}
.poll-baris-kepala strong{font-size:.8rem;color:var(--mut);white-space:nowrap}
.poll-baris.teratas .poll-baris-kepala span{font-weight:700;color:var(--hijau-tua)}
.poll-track{height:9px;border-radius:99px;background:#eef2f0;overflow:hidden}
.poll-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#15795a,#0d5c3f);min-width:2px}
.poll-baris.teratas .poll-track span{background:linear-gradient(90deg,var(--emas),var(--emas-terang))}
.poll-total{font-size:.78rem;color:var(--mut);margin:4px 0 0}

/* ==========================================================================
   PENYUNTING ISI (gaya Word) — dipakai halaman admin Berita & Halaman
   ========================================================================== */
.editor{border:1.5px solid var(--garis);border-radius:12px;background:#fff;overflow:hidden}
.editor-bilah{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:8px 10px;
  background:linear-gradient(180deg,#f7faf8,#eef4f1);border-bottom:1px solid var(--garis)}
.editor-tombol{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:34px;
  padding:0 8px;border:1px solid var(--garis);border-radius:8px;background:#fff;color:var(--hijau-tua);
  cursor:pointer;font-size:.92rem;line-height:1;font-family:var(--font)}
.editor-tombol:hover{border-color:var(--emas);background:var(--emas-muda)}
.editor-tombol.aktif{background:var(--hijau-tua);border-color:var(--hijau-tua);color:#fff}
.editor-tombol-lebar{padding:0 12px;font-size:.82rem;font-weight:600}
.editor-teks-kecil{font-size:.78rem;font-weight:700;letter-spacing:.02em}
.editor-pemisah{width:1px;height:22px;background:var(--garis);margin:0 4px}
.editor-sumber{width:100%;padding:14px 16px;border:0;border-radius:0;font:inherit;font-size:.92rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#33463d;resize:vertical}
.editor-sumber-tersembunyi{display:none}
.editor-isi{padding:14px 16px;outline:none;font-size:.98rem;line-height:1.7;overflow-wrap:break-word}
.editor-isi:focus{background:#fdfefd}
.editor-isi p{margin:0 0 .8em}
.editor-isi h2,.editor-isi h3,.editor-isi h4{margin:.6em 0 .4em}
.editor-isi img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
.editor-isi ul,.editor-isi ol{margin:0 0 .9em;padding-left:1.4em}
.editor-isi blockquote{margin:0 0 .9em;padding-left:14px;border-left:3px solid var(--emas);color:var(--mut)}
.editor-kaki{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;align-items:center;
  padding:8px 14px;border-top:1px solid var(--garis);background:#f7faf8;font-size:.78rem;color:var(--mut)}
.editor-status{color:var(--hijau)}

/* Isi halaman/berita pada situs publik: gambar selalu menyesuaikan lebar */
.artikel img,.berita-baris img,.berita-kartu .isi img{max-width:100%;height:auto;border-radius:8px}
.artikel table{border-collapse:collapse;width:100%;margin:0 0 1em}
.artikel table th,.artikel table td{border:1px solid var(--garis);padding:8px 10px;text-align:left}

/* Kartu "tindakan berbahaya" pada panel admin */
.kotak-bahaya{border:1px solid #f0c9c5;background:#fdf3f2;border-radius:12px;padding:16px 18px;margin-top:18px}
.kotak-bahaya h3{margin:0 0 6px;color:#96271f;font-size:1rem}
.kotak-bahaya input[type=text]{padding:9px 11px;border:1.5px solid #e8c4c0;border-radius:9px;font:inherit;font-size:.9rem;background:#fff}