/* ═══════════════════════════════════════════════════════════════
   SMP AMBS — Main Stylesheet  (v3 — polished layout)
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --green:        #0a7c44;
  --green-dark:   #075c32;
  --green-deep:   #053d21;
  --green-light:  #e8f5ee;
  --green-mid:    #c3e4cf;
  --yellow:       #f5c518;
  --yellow-light: #fef9e0;
  --yellow-dark:  #d4a90e;
  --ink:          #111c16;
  --ink-soft:     #2e3d35;
  --muted:        #617068;
  /* HANYA untuk glif hias besar yang isinya sudah dijelaskan tulisan di
     sebelahnya. JANGAN dipakai untuk tulisan atau ikon yang membawa makna:
     kontrasnya 2,98 di putih dan 2,71 di krem — di bawah ambang teks (4,5)
     maupun ambang grafis (3). Untuk itu pakai --muted (5,22 / 4,74).
     Menggelapkannya sampai lolos akan membuatnya nyaris sama dengan --muted
     sehingga hierarki dua nada ini hilang. */
  --muted-light:  #8a9990;
  --cream:        #f3f5ed;
  --cream-dark:   #e7ebe0;
  --white:        #ffffff;
  /* Nilainya disamakan dengan dashboard.css (dulu #dde5da di sini, #e2e8e0 di
     sana) supaya garis tepi di halaman depan dan di dasbor sama tegasnya. */
  --border:       #e2e8e0;
  --border-light: #edf1ea;
  /* Bayangan berlapis dua dengan rona hijau-kehitaman, bukan hitam netral:
     di atas latar krem, hitam murni terbaca sebagai kotor/keabuan. Alfa
     diturunkan dan sebarannya dilebarkan supaya kartu terangkat tanpa garis
     gelap yang keras di bawahnya. Nilainya sepadan dengan dashboard.css
     agar halaman depan dan dasbor terasa satu sistem. */
  --shadow-sm:    0 1px 2px rgba(11,38,24,.05), 0 1px 1px rgba(11,38,24,.04);
  --shadow-md:    0 2px 6px rgba(11,38,24,.05), 0 6px 18px rgba(11,38,24,.06);
  --shadow-lg:    0 4px 12px rgba(11,38,24,.05), 0 14px 38px rgba(11,38,24,.08);
  --shadow-xl:    0 8px 20px rgba(11,38,24,.06), 0 28px 64px rgba(11,38,24,.10);
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    24px;
  --radius-full:  9999px;
  /* Satu kurva untuk seluruh gerakan di halaman depan DAN dasbor (--tr di
     dashboard.css memakai nilai yang sama). Kurva ini melaju cepat lalu
     melandai panjang, sehingga perpindahan terasa mengalir, bukan menyentak
     seperti cubic-bezier(.4,0,.2,1) yang melandai terlalu dini. */
  --transition:   0.26s cubic-bezier(0.32,0.72,0,1);
  --font-sans:    'Plus Jakarta Sans', sans-serif;
  --font-serif:   'Libre Baskerville', serif;
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-sans); background:var(--cream); color:var(--ink); line-height:1.65; overflow-x:hidden; }
img  { display:block; max-width:100%; height:auto; }
a    { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul,ol { list-style:none; }
input,select,textarea { font-family:inherit; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--cream-dark); }
::-webkit-scrollbar-thumb { background:var(--green); border-radius:3px; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { width:min(1140px,calc(100% - 48px)); margin:0 auto; }
.section-pad { padding:88px 0; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-serif); letter-spacing:-.03em; line-height:1.1; }
h1 { font-size:clamp(36px,4.8vw,62px); }
h2 { font-size:clamp(28px,3.5vw,46px); }
h3 { font-size:clamp(18px,2.2vw,23px); }
h4 { font-size:13px; font-family:var(--font-sans); letter-spacing:.1em; text-transform:uppercase; }
em { font-style:normal; color:var(--yellow); }

.section-heading h2 { margin-top:10px; }
.section-heading.centered { text-align:center; }
.section-heading.centered .eyebrow { justify-content:center; }
.section-sub { color:var(--muted); font-size:15px; max-width:520px; margin:14px auto 0; line-height:1.7; }

/* ── EYEBROW ────────────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--green); margin-bottom:14px;
}
.eyebrow.light { color:var(--green-mid); }
.eyebrow-line  { display:block; width:24px; height:2px; background:var(--yellow); border-radius:2px; flex-shrink:0; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.button {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 20px;
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  border-radius:var(--radius-sm); transition:var(--transition);
  cursor:pointer; white-space:nowrap; border:2px solid transparent;
}
.button svg { width:15px; height:15px; flex-shrink:0; }

.button-primary { background:var(--yellow); color:var(--ink); }
.button-primary:hover { background:var(--yellow-dark); transform:translateY(-2px); box-shadow:0 6px 18px rgba(245,197,24,.35); }

.button-outline { background:transparent; border-color:rgba(255,255,255,.4); color:var(--white); }
.button-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.65); transform:translateY(-2px); }

.button-yellow  { background:var(--yellow); color:var(--ink); padding:13px 26px; font-size:13.5px; }
.button-yellow:hover  { background:var(--yellow-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,197,24,.38); }

.button-ghost   { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:var(--white); }
.button-ghost:hover   { background:rgba(255,255,255,.17); transform:translateY(-2px); }

.text-link { display:inline-flex; align-items:center; gap:6px; color:var(--green); font-weight:700; font-size:12px; transition:var(--transition); }
.text-link svg { width:13px; }
.text-link:hover { color:var(--green-dark); gap:9px; }

.inline-link { color:var(--green); font-weight:600; border-bottom:1px solid var(--green-mid); transition:var(--transition); }
.inline-link:hover { border-color:var(--green); }

/* ── SCROLL ANIMATIONS ──────────────────────────────────────── */
[data-animate] { opacity:0; transition:opacity .65s ease,transform .65s ease; }
[data-animate="fade-up"]    { transform:translateY(32px); }
[data-animate="fade-down"]  { transform:translateY(-32px); }
[data-animate="fade-left"]  { transform:translateX(32px); }
[data-animate="fade-right"] { transform:translateX(-32px); }
[data-animate].is-visible   { opacity:1; transform:none; }

/* Geseran mendatar 32px hanya muat kalau .container masih punya sisa ruang.
   .container lebarnya min(1140px, 100% - 48px), jadi sisanya cuma 24px per
   sisi (18px di <=768px) selama layar lebih sempit dari 1188px. Elemen yang
   belum ter-reveal karena masih di bawah layar akan menonjol keluar tepi
   kanan — halaman jadi bisa digeser ke samping 14px di ponsel padahal tidak
   ada isi di sana. Di layar sempit geseran mendatar juga hampir tidak
   terbaca, jadi arahnya dibuat vertikal saja: efeknya tetap ada, lubernya
   hilang sampai ke akarnya tanpa perlu menyembunyikan gejala pakai
   overflow-x. Di atas 1188px animasi mendatarnya tetap seperti semula. */
@media (max-width:1187px) {
  [data-animate="fade-left"],
  [data-animate="fade-right"] { transform:translateY(32px); }
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  background:var(--green-deep); color:#b8d8c4;
  font-size:11px; font-weight:500; letter-spacing:.01em;
}
.topbar-inner {
  height:36px; display:flex; align-items:center;
  justify-content:space-between;
}
.topbar-inner>span,
.topbar-links,
.topbar-links a { display:flex; align-items:center; gap:7px; }
.topbar-links { gap:18px; }
.topbar svg   { width:11px; height:11px; }
.topbar a     { transition:color var(--transition); }
.topbar a:hover { color:var(--white); }

.topbar-login {
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  padding:3px 11px; border-radius:var(--radius-full); font-weight:700;
  transition:var(--transition);
}
.topbar-login:hover { background:var(--yellow); color:var(--ink) !important; border-color:var(--yellow); }

/* ═══════════════════════════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  background:rgba(243,245,237,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  position:sticky; top:0; z-index:90;
  transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.site-header.scrolled {
  background:rgba(255,255,255,.97);
  border-color:var(--border-light);
  box-shadow:0 1px 12px rgba(0,0,0,.06);
}

.nav-wrap {
  height:66px; display:flex; align-items:center;
  justify-content:space-between; gap:20px;
}

/* Brand */
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img {
  width:38px; height:38px;
  border-radius:50%; object-fit:cover;
  border:2px solid var(--green-mid);
  transition:transform var(--transition);
}
.brand:hover img { transform:scale(1.06); }
.brand strong {
  display:block;
  /* Nama lebih panjang — font lebih kecil agar tidak wrap di header */
  font-size:11.5px; font-weight:800;
  font-family:var(--font-sans); color:var(--ink); letter-spacing:.01em;
  line-height:1.25;
  /* Batasi lebar agar tidak overflow, biarkan truncate dengan elipsis */
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand small  { display:block; font-size:9px; color:var(--muted); letter-spacing:.02em; margin-top:1px; }

/* Nav links */
.main-nav { display:flex; align-items:center; gap:2px; font-size:12.5px; font-weight:600; }
.main-nav a {
  padding:6px 10px; border-radius:var(--radius-sm);
  color:var(--muted); transition:color var(--transition),background var(--transition);
}
.main-nav a:hover,.main-nav a.active { color:var(--green); background:var(--green-light); }

.nav-login-link {
  display:flex !important; align-items:center; gap:5px;
  color:var(--green) !important; font-weight:700;
  border:1.5px solid var(--green-mid); border-radius:var(--radius-sm) !important;
  padding:5px 11px !important; transition:var(--transition) !important;
}
.nav-login-link:hover { background:var(--green) !important; color:var(--white) !important; border-color:var(--green) !important; }
.nav-login-link svg { width:13px; }

/* Tombol Login di dalam nav HANYA untuk drawer ponsel.
   Di layar lebar, tombol Login yang dipakai adalah .topbar-login di topbar —
   itu sebabnya .topbar-login disembunyikan di <=768px (lihat media query di
   bawah). Tanpa aturan ini keduanya tampil bersamaan di desktop: dua tombol
   Login bertumpuk di pojok kanan atas, hanya berjarak sekitar 46px, ditambah
   satu lagi di footer. !important diperlukan karena .nav-login-link di atas
   memakai display:flex !important. */
@media (min-width:769px) {
  .nav-login-link { display:none !important; }
}

.nav-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green); color:var(--white) !important;
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:12px; font-weight:700; margin-left:4px;
  transition:var(--transition); white-space:nowrap;
}
.nav-cta svg { width:12px; }
.nav-cta:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 4px 10px rgba(10,124,68,.28); }

.menu-toggle {
  display:none; padding:7px; border-radius:var(--radius-sm);
  color:var(--ink); transition:var(--transition);
}
.menu-toggle:hover { background:var(--green-light); color:var(--green); }
.menu-toggle svg { width:20px; height:20px; display:block; }

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green) 52%,#1da05e 100%);
  color:var(--white); min-height:88vh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}

/* Foto gedung sekolah di lapisan paling bawah. Gradasi hijau hero yang lama
   kini dipasang tembus pandang di .hero-bg-shapes, di atas foto ini, jadi
   warnanya tetap sama. Foto dipudarkan agar langit biru tidak mengalahkan
   hijau sekolah; sisi kiri tempat judul dibuat lebih pekat supaya teks
   tetap terbaca. Yang dimuat salinan kecilnya — gedung.jpg aslinya 12 MB.
   Selama foto belum termuat, gradasi di .hero tetap tampil seperti dulu. */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('gedung-latar.jpg') center 42% / cover no-repeat;
  filter:saturate(.3);
}
@media (max-width:768px) {
  .hero::before { background-image:url('gedung-latar-kecil.jpg'); }
}

/* Decorative shapes */
.hero-bg-shapes {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg,rgba(5,61,33,.5) 0%,rgba(5,61,33,0) 28%),
    linear-gradient(90deg,rgba(5,61,33,.5) 0%,rgba(5,61,33,.2) 45%,rgba(5,61,33,0) 70%),
    linear-gradient(135deg,rgba(5,61,33,.92) 0%,rgba(10,124,68,.76) 52%,rgba(29,160,94,.66) 100%);
}
/* Eyebrow hijau tua nyaris hilang di atas hero hijau; pakai warna
   .eyebrow.light seperti bagian gelap lainnya */
.hero .eyebrow { color:var(--green-mid); }
.shape { position:absolute; border-radius:50%; opacity:.1; }
.shape-1 {
  width:580px; height:580px;
  background:radial-gradient(circle,var(--yellow) 0%,transparent 70%);
  top:-160px; right:-100px;
  animation:floatShape 10s ease-in-out infinite;
}
.shape-2 {
  width:320px; height:320px;
  background:radial-gradient(circle,#fff 0%,transparent 70%);
  bottom:-80px; left:-50px; opacity:.06;
  animation:floatShape 14s ease-in-out infinite reverse;
}
.shape-3 {
  width:180px; height:180px; background:var(--yellow);
  top:38%; left:40%; opacity:.07;
  animation:floatShape 9s ease-in-out infinite 2s;
}
@keyframes floatShape {
  0%,100% { transform:translate(0,0) scale(1); }
  50%      { transform:translate(18px,-22px) scale(1.04); }
}

/* Hero grid */
.hero-grid {
  display:grid; grid-template-columns:55fr 45fr;
  align-items:center; gap:48px;
  min-height:80vh; padding:56px 0 72px; position:relative;
}

/* Hero copy */
.hero h1     { max-width:560px; margin:0 0 18px; color:var(--white); }
.hero h1 em  { color:var(--yellow); }
.hero-text   { font-size:15.5px; line-height:1.72; color:rgba(255,255,255,.76); max-width:420px; margin-bottom:28px; }
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.play-icon {
  display:grid; place-items:center;
  width:26px; height:26px;
  border:1px solid rgba(255,255,255,.48); border-radius:50%; flex-shrink:0;
}
.play-icon svg { width:12px; }

.hero-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px); padding:6px 12px;
  border-radius:var(--radius-full); font-size:11px; font-weight:600;
  color:rgba(255,255,255,.88);
}
.badge svg { width:12px; color:var(--yellow); }

/* ── Hero visual ──────────────────────────────────────────── */
.hero-visual {
  position:relative; display:flex;
  align-items:center; justify-content:center;
  height:420px;
}

/* Spinning decorative rings */
.visual-ring {
  position:absolute; border-radius:50%;
  animation:spinRing 25s linear infinite;
}
.visual-ring.ring-outer {
  width:320px; height:320px;
  border:1px dashed rgba(255,255,255,.12);
  animation-duration:34s;
}
.visual-ring.ring-inner {
  width:240px; height:240px;
  border:1px solid rgba(245,197,24,.22);
  animation-direction:reverse; animation-duration:20s;
}
@keyframes spinRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Logo circle — SMALLER, cleaner */
.visual-logo-wrap {
  width:150px; height:150px;
  border-radius:50%; background:var(--white);
  padding:10px;
  box-shadow:0 0 0 6px rgba(255,255,255,.10), var(--shadow-xl);
  z-index:2;
  animation:logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}
.visual-logo {
  width:100%; height:100%;
  border-radius:50%; object-fit:contain;
}

/* Floating stat cards */
.visual-card {
  position:absolute;
  background:rgba(255,255,255,.11);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-md);
  padding:12px 16px; display:flex; align-items:center; gap:10px;
  z-index:3; box-shadow:var(--shadow-md);
  animation:cardFloat 6s ease-in-out infinite;
}
.visual-card svg    { width:22px; height:22px; color:var(--yellow); flex-shrink:0; }
.visual-card strong { display:block; font-size:20px; font-family:var(--font-serif); color:var(--white); line-height:1; }
.visual-card span   { font-size:10px; color:rgba(255,255,255,.68); display:block; margin-top:2px; }
.card-top    { top:40px;  right:-4px;  animation-delay:0s; }
.card-bottom { bottom:56px; left:-4px; animation-delay:1.5s; }
@keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Decorative dots */
.visual-dot { position:absolute; border-radius:50%; background:var(--yellow); opacity:.55; }
.dot-1 { width:9px;  height:9px;  top:100px; left:22px;   animation:dotPulse 3s ease-in-out infinite; }
.dot-2 { width:5px;  height:5px;  top:180px; right:30px;  animation:dotPulse 3s ease-in-out infinite .5s; }
.dot-3 { width:12px; height:12px; bottom:100px; right:64px; animation:dotPulse 3s ease-in-out infinite 1s; }
@keyframes dotPulse { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.9;transform:scale(1.3)} }

/* Scroll hint */
.hero-scroll-hint {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:rgba(255,255,255,.38); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
  animation:scrollHint 2.5s ease-in-out infinite;
}
.hero-scroll-hint svg { width:16px; }
@keyframes scrollHint {
  0%,100% { opacity:.38; transform:translateX(-50%) translateY(0); }
  50%      { opacity:.72; transform:translateX(-50%) translateY(5px); }
}

/* ═══════════════════════════════════════════════════════════════
   QUICK INFO BAR
   ═══════════════════════════════════════════════════════════════ */
.quick-info { background:var(--yellow); }
.info-grid  { display:grid; grid-template-columns:repeat(4,1fr); }
.info-item  {
  display:flex; align-items:center; gap:13px;
  padding:24px 22px; border-right:1px solid rgba(24,37,30,.11);
  transition:background var(--transition);
}
.info-item:last-child { border-right:none; }
.info-item:hover { background:rgba(0,0,0,.04); }
.info-icon { width:40px; height:40px; background:rgba(10,124,68,.11); border-radius:var(--radius-sm); display:grid; place-items:center; flex-shrink:0; }
.info-icon svg  { width:18px; height:18px; color:var(--green-dark); }
.info-item strong { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.info-item span   { display:block; font-size:10.5px; color:var(--ink-soft); opacity:.72; line-height:1.4; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about { background:var(--white); }

.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center; margin-bottom:64px;
}

/* Left — decorative visual card */
.about-img-wrap { position:relative; height:380px; }
.about-img-bg   { position:absolute; inset:18px 0 0 18px; background:var(--green-light); border-radius:var(--radius-xl); }
.about-img-card {
  position:absolute; inset:0 18px 18px 0;
  background:linear-gradient(145deg,var(--green) 0%,var(--green-dark) 100%);
  border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); display:flex; align-items:flex-end;
}
.about-img-card::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:200px; height:200px; background:rgba(255,255,255,.055); border-radius:50%;
}
.about-img-inner { padding:28px; color:var(--white); position:relative; z-index:1; }

/* Logo inside about card — compact */
.about-logo {
  width:60px; height:60px; border-radius:50%;
  object-fit:contain; background:rgba(255,255,255,.14);
  padding:7px; margin-bottom:14px;
  border:2px solid rgba(255,255,255,.22);
}
.about-img-inner strong { display:block; font-family:var(--font-serif); font-size:19px; margin-bottom:3px; }
.about-img-inner span   { font-size:11.5px; opacity:.68; }

.about-accent-card {
  position:absolute; top:22px; right:-16px;
  background:var(--yellow); border-radius:var(--radius-md);
  padding:14px 18px; box-shadow:var(--shadow-md); max-width:180px;
}
.about-accent-card svg { width:18px; color:var(--green-dark); margin-bottom:5px; }
.about-accent-card p   { font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3; }

/* Right — copy */
.about-copy h2  { margin-bottom:18px; }
.about-copy > p { color:var(--muted); font-size:14.5px; line-height:1.76; margin-bottom:12px; }
.about-features { display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.about-feature  { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft); }
.about-feature svg { width:16px; color:var(--green); flex-shrink:0; }

/* Visi-Misi grid */
.visi-misi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vm-card {
  background:var(--cream); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); padding:28px;
  transition:transform var(--transition),box-shadow var(--transition);
}
.vm-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.vm-card.accent { background:var(--green); color:var(--white); border-color:var(--green); }
.vm-icon { width:44px; height:44px; background:var(--green-light); border-radius:var(--radius-md); display:grid; place-items:center; margin-bottom:18px; }
.vm-card.accent .vm-icon { background:rgba(255,255,255,.14); }
.vm-icon svg { width:20px; color:var(--green); }
.vm-card.accent .vm-icon svg { color:var(--yellow); }
.vm-card h3 { font-size:19px; margin-bottom:10px; }
.vm-card.accent h3 { color:var(--white); }
.vm-card p  { font-size:13.5px; line-height:1.7; color:var(--muted); }
.vm-card.accent p { color:rgba(255,255,255,.78); }
.vm-card ul { display:flex; flex-direction:column; gap:9px; }
.vm-card ul li { font-size:13px; color:rgba(255,255,255,.84); padding-left:15px; position:relative; line-height:1.5; }
.vm-card ul li::before { content:'→'; position:absolute; left:0; color:var(--yellow); font-size:11.5px; }
.motto-tag { display:inline-block; margin-top:18px; background:var(--yellow-light); color:var(--green-dark); font-size:12.5px; font-weight:800; padding:6px 13px; border-radius:var(--radius-full); letter-spacing:.04em; }
.motto-tag b { color:var(--green); margin:0 4px; }

/* ═══════════════════════════════════════════════════════════════
   PROGRAM
   ═══════════════════════════════════════════════════════════════ */
/* Bagian terang di halaman depan berganti-ganti putih <-> krem saja.
   Sebelumnya ada TIGA permukaan terang yang dipakai bergantian — putih,
   --cream (#f3f5ed) di Testimoni, dan --cream-dark (#e7ebe0) di Program &
   Berita. Dua abu yang hampir sama tetapi tidak sama membuat ritme halaman
   terasa tersentak; langkah putih -> krem-tua pun hampir dua kali lebih
   besar daripada putih -> krem. --cream-dark tetap dipakai untuk garis tepi
   dan komponen lain, hanya tidak lagi sebagai latar bagian. */
.program { background:var(--cream); }
.program-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }

.program-card {
  background:var(--white); border:1px solid var(--border-light);
  border-radius:var(--radius-xl); padding:28px;
  position:relative; overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition);
}
.program-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.program-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--border-light); transition:background var(--transition);
}
.program-card:hover::before { background:var(--yellow); }
.program-card.featured {
  background:linear-gradient(145deg,var(--green) 0%,var(--green-dark) 100%);
  color:var(--white); border-color:transparent;
}
.program-card.featured::before  { background:var(--yellow); }
.program-card.featured:hover    { box-shadow:0 14px 44px rgba(10,124,68,.33); }

.card-badge { position:absolute; top:20px; right:20px; background:var(--yellow); color:var(--ink); font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:var(--radius-full); letter-spacing:.08em; text-transform:uppercase; }
.card-icon  { width:48px; height:48px; background:var(--green-light); border-radius:var(--radius-md); display:grid; place-items:center; margin-bottom:18px; }
.card-icon svg { width:22px; color:var(--green); }
.program-card.featured .card-icon     { background:rgba(255,255,255,.14); }
.program-card.featured .card-icon svg { color:var(--yellow); }
.card-index { font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--muted); margin-bottom:5px; display:block; }
.program-card.featured .card-index { color:rgba(255,255,255,.42); }
.program-card h3  { font-size:20px; margin-bottom:10px; line-height:1.22; }
.program-card.featured h3 { color:var(--white); }
.program-card > p { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:18px; }
.program-card.featured > p { color:rgba(255,255,255,.72); }
.card-list { display:flex; flex-direction:column; gap:7px; margin-bottom:22px; }
.card-list li { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); }
.card-list svg { width:13px; color:var(--green); flex-shrink:0; }
.program-card.featured .card-list li  { color:rgba(255,255,255,.78); }
.program-card.featured .card-list svg { color:var(--yellow); }
.card-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--green); transition:gap var(--transition),color var(--transition); }
.card-link svg { width:13px; }
.card-link:hover { gap:10px; }
.program-card.featured .card-link { color:var(--yellow); }

/* ═══════════════════════════════════════════════════════════════
   STATISTICS
   ═══════════════════════════════════════════════════════════════ */
.stats {
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-dark) 100%);
  color:var(--white); position:relative; overflow:hidden;
}
.stats-bg {
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 18% 50%,rgba(245,197,24,.07) 0%,transparent 52%),
    radial-gradient(circle at 82% 22%,rgba(255,255,255,.04) 0%,transparent 40%);
}
.stats .section-heading h2 { color:var(--white); }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:48px; position:relative; }

.stat-item {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:24px 16px; text-align:center;
  backdrop-filter:blur(6px);
  transition:background var(--transition),transform var(--transition);
}
.stat-item:hover { background:rgba(255,255,255,.11); transform:translateY(-4px); }
.stat-icon { width:40px; height:40px; background:rgba(245,197,24,.14); border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; }
.stat-icon svg { width:18px; color:var(--yellow); }
.stat-num  { display:block; font-family:var(--font-serif); font-size:40px; font-weight:700; color:var(--white); line-height:1; }
.stat-unit { display:block; font-size:13px; font-weight:700; color:var(--yellow); margin-top:4px; margin-bottom:9px; }
.stat-item p { font-size:11.5px; color:rgba(255,255,255,.56); line-height:1.5; }

/* ═══════════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════════ */
.gallery { background:var(--white); }
.gallery-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,190px); gap:12px; margin-top:44px;
}
.gallery-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; }
.gallery-item.large { grid-column:span 2; grid-row:span 2; }
.gallery-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; transition:transform var(--transition); }
.gallery-item:hover .gallery-placeholder { transform:scale(1.04); }
.gallery-placeholder svg  { width:32px; height:32px; opacity:.58; }
.gallery-placeholder span { font-size:11.5px; font-weight:600; opacity:.68; letter-spacing:.05em; }
.gp-green  { background:linear-gradient(145deg,var(--green),var(--green-dark)); color:var(--white); }
.gp-yellow { background:linear-gradient(145deg,var(--yellow),var(--yellow-dark)); color:var(--ink); }
.gp-dark   { background:linear-gradient(145deg,var(--green-deep),#0a3d22); color:var(--white); }
.gp-cream  { background:linear-gradient(145deg,var(--cream-dark),#d5dfc8); color:var(--ink-soft); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,61,33,.82) 0%,transparent 52%); display:flex; align-items:flex-end; padding:14px; opacity:0; transition:opacity var(--transition); }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay span { color:var(--white); font-size:12.5px; font-weight:600; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.testimonials { background:var(--cream); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }

.testi-card {
  background:var(--white); border:1px solid var(--border-light);
  border-radius:var(--radius-xl); padding:28px;
  transition:transform var(--transition),box-shadow var(--transition);
}
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.testi-stars { display:flex; gap:3px; margin-bottom:16px; }
.testi-stars svg { width:14px; height:14px; fill:var(--yellow); color:var(--yellow); }
/* Bintang yang tidak diberikan digambar kosong. Tanpa ini, penilaian
   3 bintang akan terlihat sama dengan 5 dan angkanya jadi tak berarti. */
.testi-stars svg.kosong { fill:none; color:#d6ddd8; }
.testi-card blockquote { font-size:13.5px; line-height:1.76; color:var(--ink-soft); margin-bottom:22px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:11px; }
.testi-avatar {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:var(--white); border-radius:50%;
  display:grid; place-items:center; font-size:11.5px; font-weight:700; flex-shrink:0;
}
.testi-author strong { display:block; font-size:12.5px; font-weight:700; font-family:var(--font-sans); }
.testi-author span   { font-size:10.5px; color:var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   NEWS
   ═══════════════════════════════════════════════════════════════ */
.news { background:var(--cream); }   /* satu ritme dengan .program — lihat catatan di sana */
.section-row { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.news-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px; margin-top:44px; }

.news-card {
  background:var(--white); border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-light);
  transition:transform var(--transition),box-shadow var(--transition);
}
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.news-image { height:190px; position:relative; overflow:hidden; }
.news-card.large .news-image { height:220px; }
.news-img-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:18px; }
.news-img-content svg { position:absolute; top:18px; right:18px; width:56px; height:56px; opacity:.22; stroke-width:1; }
.news-tag { display:inline-block; background:rgba(255,255,255,.13); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22); color:var(--white); font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.1em; }
.ni-green  { background:linear-gradient(145deg,var(--green),var(--green-dark)); }
.ni-yellow { background:linear-gradient(145deg,#c8a600,#e0bc00); }
.ni-cream  { background:linear-gradient(145deg,#8ab07a,#5e8a4e); }

.news-body { padding:18px; }
.news-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tag-label { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--green); }
/* --muted, bukan --muted-light: pada 9,5px tanggal ini tulisan kecil, dan
   --muted-light hanya mencapai 2,98 di atas putih. */
.news-meta time { font-size:9.5px; color:var(--muted); }
.news-card h3 { font-size:15px; line-height:1.4; margin-bottom:9px; color:var(--ink); }
.news-card.large h3 { font-size:18px; }
.news-card > .news-body > p { font-size:12.5px; color:var(--muted); line-height:1.6; margin-bottom:12px; }
.news-read-more { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--green); transition:gap var(--transition); }
.news-read-more svg { width:12px; }
.news-read-more:hover { gap:9px; }

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq { background:var(--white); }
.faq-container { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; align-items:start; }
.faq-container .section-heading { position:sticky; top:90px; }
.faq-container .section-heading p { margin-top:12px; font-size:13.5px; color:var(--muted); }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--border-light); }
.faq-item:first-child { border-top:1px solid var(--border-light); }
.faq-question {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; text-align:left; font-size:14px; font-weight:600; color:var(--ink);
  padding:18px 0; transition:color var(--transition); background:none; border:none; cursor:pointer;
}
.faq-question:hover,.faq-question[aria-expanded="true"] { color:var(--green); }
.faq-icon { width:17px; height:17px; flex-shrink:0; color:var(--muted); transition:transform var(--transition),color var(--transition); }
.faq-question[aria-expanded="true"] .faq-icon { transform:rotate(180deg); color:var(--green); }
.faq-answer { overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .3s ease; }
.faq-answer.open { max-height:280px; padding-bottom:18px; }
.faq-answer p { font-size:13.5px; color:var(--muted); line-height:1.76; }

/* ═══════════════════════════════════════════════════════════════
   ADMISSION CTA
   ═══════════════════════════════════════════════════════════════ */
.admission {
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-dark) 60%,var(--green) 100%);
  color:var(--white); position:relative; overflow:hidden;
}
.admission-bg-pattern {
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.055) 1px,transparent 0);
  background-size:26px 26px;
}
.admission-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; padding:72px 0; position:relative; flex-wrap:wrap;
}
.admission-text h2 { color:var(--white); margin:10px 0 12px; font-size:clamp(28px,3.2vw,42px); }
.admission-text p  { color:rgba(255,255,255,.7); font-size:14.5px; max-width:400px; }
.admission-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer { background:var(--green-deep); color:#c5dccb; padding:72px 0 0; }
.footer-grid {
  display:grid; grid-template-columns:1.7fr 1fr 1.3fr 1fr; gap:44px;
  padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand .brand img    { width:40px; height:40px; border-color:rgba(255,255,255,.18); }
.footer-brand .brand strong { color:var(--white); font-size:11.5px; max-width:200px; }
.footer-brand .brand small  { color:rgba(255,255,255,.48); }
.footer-brand p { font-size:12.5px; color:rgba(255,255,255,.48); line-height:1.7; margin:18px 0 22px; }

.socials { display:flex; gap:7px; }
.socials a {
  width:33px; height:33px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11); border-radius:var(--radius-sm);
  display:grid; place-items:center;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.socials a:hover { background:var(--green); border-color:var(--green); transform:translateY(-2px); }
.socials svg { width:14px; color:rgba(255,255,255,.65); }
.socials a:hover svg { color:var(--white); }

footer h4 { color:var(--yellow); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; margin-bottom:18px; }
footer > .container > div > a { display:block; font-size:12.5px; color:rgba(255,255,255,.52); margin-bottom:9px; transition:color var(--transition),padding-left var(--transition); }
footer > .container > div > a:hover { color:var(--white); padding-left:4px; }

.footer-contact-item { display:flex; align-items:flex-start; gap:9px; margin-bottom:11px; }
.footer-contact-item svg  { width:13px; margin-top:2px; color:var(--yellow); flex-shrink:0; }
.footer-contact-item span,
.footer-contact-item a    { font-size:12.5px; color:rgba(255,255,255,.52); line-height:1.55; }
.footer-contact-item a:hover { color:var(--white); }

.footer-ppdb-text { font-size:12.5px; color:rgba(255,255,255,.52); line-height:1.6; margin-bottom:11px; }
.footer-login-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78); font-size:12px; font-weight:700;
  padding:9px 15px; border-radius:var(--radius-sm); transition:var(--transition); cursor:pointer; margin-bottom:4px;
}
.footer-login-btn svg  { width:13px; }
.footer-login-btn:hover { background:var(--yellow); color:var(--ink); border-color:var(--yellow); }

.footer-ppdb-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--yellow); color:var(--ink); font-size:12px; font-weight:700;
  padding:9px 17px; border-radius:var(--radius-sm); transition:var(--transition); cursor:pointer; border:none;
}
.footer-ppdb-btn svg  { width:13px; }
.footer-ppdb-btn:hover { background:var(--yellow-dark); transform:translateY(-2px); }

.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 0; font-size:11px; color:rgba(255,255,255,.28);
}
.footer-bottom b { color:var(--yellow); margin:0 4px; }

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(5,30,14,.62);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  z-index:1000; display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal-box {
  background:var(--white); border-radius:var(--radius-xl); padding:36px;
  width:100%; max-width:620px; max-height:90vh; overflow-y:auto;
  position:relative;
  transform:translateY(28px) scale(.97);
  transition:transform .34s cubic-bezier(.34,1.2,.64,1),opacity .28s ease;
  opacity:0; box-shadow:var(--shadow-xl);
}
.modal-overlay.open .modal-box { transform:none; opacity:1; }

.modal-close {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; background:var(--cream);
  border-radius:50%; display:grid; place-items:center;
  transition:background var(--transition),transform var(--transition);
  border:none; cursor:pointer; z-index:1;
}
.modal-close:hover { background:#dde5da; transform:rotate(90deg); }
.modal-close svg   { width:15px; }

.modal-header { text-align:center; margin-bottom:28px; }
.modal-logo {
  width:56px; height:56px; border-radius:50%;
  border:2.5px solid var(--green-light); overflow:hidden;
  margin:0 auto 14px;
}
.modal-logo img { width:100%; height:100%; object-fit:contain; }
.modal-header h2 { font-size:22px; color:var(--ink); margin-bottom:5px; }
.modal-header p  { font-size:12.5px; color:var(--muted); }

/* Form */
.ppdb-form   { display:flex; flex-direction:column; gap:16px; }
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group  { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:12px; font-weight:600; color:var(--ink-soft); }
.required    { color:#e05252; }
.form-group input,
.form-group select,
.form-group textarea {
  padding:10px 13px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink);
  background:var(--white); outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--green); box-shadow:0 0 0 3px rgba(10,124,68,.1);
}
.form-group input.invalid,.form-group select.invalid,.form-group textarea.invalid {
  border-color:#e05252; box-shadow:0 0 0 3px rgba(224,82,82,.1);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-check  { display:flex; flex-direction:column; gap:6px; }
.form-check > div { display:flex; gap:9px; align-items:flex-start; }
.form-check input[type="checkbox"] {
  /* appearance dipaksa ke bawaan browser supaya kotak dan centangnya
     benar-benar tergambar, tahan terhadap aturan menyeluruh seperti
     `.ppdb-form input { -webkit-appearance:none }` */
  -webkit-appearance:checkbox; appearance:auto;
  width:16px; height:16px; accent-color:var(--green);
  flex-shrink:0; margin-top:1px; cursor:pointer;
}
/* Sasaran sentuh diperbesar tanpa mengubah ukuran kotaknya */
.form-check > div { padding:2px 0; }
.form-check input[type="checkbox"]:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.form-check label   { font-size:12px; color:var(--muted); line-height:1.5; cursor:pointer; }
.field-error { font-size:11px; color:#e05252; display:none; }
.field-error.show { display:block; }
.form-submit { width:100%; padding:13px; font-size:14px; margin-top:4px; }
.form-success { text-align:center; padding:16px 0; }
.success-icon { width:66px; height:66px; background:var(--green-light); border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; }
.success-icon svg { width:32px; color:var(--green); }
.form-success h3 { font-size:22px; margin-bottom:10px; }
.form-success p  { font-size:13.5px; color:var(--muted); max-width:340px; margin:0 auto 22px; line-height:1.7; }

/* ── Back to top ────────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:24px; right:24px;
  width:42px; height:42px; background:var(--green); color:var(--white);
  border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow-md); z-index:80;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity var(--transition),transform var(--transition),background var(--transition);
  border:none; cursor:pointer;
}
.back-to-top.visible { opacity:1; pointer-events:all; transform:none; }
.back-to-top:hover   { background:var(--green-dark); transform:translateY(-3px); }
.back-to-top svg     { width:17px; }

/* ── Nav overlay ────────────────────────────────────────────── */
.nav-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.32);
  z-index:199;          /* tepat di bawah .main-nav (200) */
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
  /* Gunakan opacity transition, bukan display toggle */
}
.nav-overlay.show {
  opacity:1;
  pointer-events:all;
  touch-action:manipulation;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ── ≤1024px ─────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .stats-grid   { grid-template-columns:repeat(3,1fr); }
  .stat-item:nth-child(4),
  .stat-item:nth-child(5) { grid-column:auto; }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:span 2; }
}

/* ── ≤900px ──────────────────────────────────────────────────── */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:36px; min-height:auto; padding:52px 0; }
  .hero-visual { height:340px; }
  .visual-ring.ring-outer { width:280px; height:280px; }
  .visual-ring.ring-inner { width:210px; height:210px; }
  .visual-logo-wrap { width:128px; height:128px; }
  .card-top    { top:18px;  right:0; }
  .card-bottom { bottom:28px; left:0; }
  .about-grid  { grid-template-columns:1fr; gap:44px; }
  .about-img-wrap { height:300px; }
  .visi-misi-grid { grid-template-columns:1fr; }
  .program-grid { grid-template-columns:1fr; }
  .program-card.featured { order:-1; }
  .stats-grid  { grid-template-columns:repeat(2,1fr); }
  .stat-item:last-child { grid-column:span 2; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gallery-item.large { grid-column:span 2; grid-row:span 1; height:210px; }
  .gallery-item { height:150px; }
  .testi-grid  { grid-template-columns:1fr; }
  .news-grid   { grid-template-columns:1fr; }
  .faq-container { grid-template-columns:1fr; gap:36px; }
  .faq-container .section-heading { position:static; }
}

/* ── ≤768px ──────────────────────────────────────────────────── */
@media (max-width:768px) {
  .container   { width:calc(100% - 36px); }
  .section-pad { padding:64px 0; }

  /* Topbar — hide login on very small */
  .topbar-links .topbar-login { display:none; }

  /* Header */
  /* ── Perbaikan drawer mobile ────────────────────────────────
     .site-header punya backdrop-filter DAN position:sticky+z-index:90.
     Keduanya membuat stacking context, dan backdrop-filter juga membuat
     containing block untuk keturunan position:fixed. Akibatnya:
       1. .main-nav (fixed) menempel ke header, bukan ke viewport
          (mulai di bawah topbar, lalu meluber 36px di bawah layar)
       2. z-index:200 pada .main-nav terkurung di dalam stacking context
          header (90), sehingga .nav-overlay (199, anak <body>) menutupi
          SELURUH drawer beserta tombol toggle — menu terbuka tapi
          tidak terlihat dan tidak bisa disentuh.
     Blur dimatikan di mobile (juga lebih ringan untuk GPU ponsel) dan
     header dinaikkan di atas overlay. */
  .site-header {
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(243,245,237,.98);   /* kompensasi hilangnya blur */
    z-index:201;                         /* di atas .nav-overlay (199) */
  }
  .menu-toggle { display:block; }
  .main-nav {
    /* Selalu flex tapi tersembunyi via transform — lebih reliable di iOS Safari */
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:0;
    right:0;
    width:min(300px, 82vw);
    height:100vh;
    background:var(--white);
    padding:72px 20px 28px;
    box-shadow:-6px 0 36px rgba(0,0,0,.13);
    z-index:200;
    overflow-y:auto;
    /* Sembunyikan ke kanan via transform — iOS Safari lebih konsisten */
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    /* Blokir interaksi saat tersembunyi */
    visibility:hidden;
    pointer-events:none;
  }
  .main-nav.open {
    transform:translateX(0);
    visibility:visible;
    pointer-events:all;
  }
  .main-nav a {
    padding:13px 14px;
    border-radius:var(--radius-md);
    font-size:14.5px;
    border-bottom:1px solid var(--border-light);
    /* Pastikan touch area cukup besar */
    min-height:48px;
    display:flex;
    align-items:center;
    /* Aktifkan touch event eksplisit */
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(10,124,68,.1);
    touch-action:manipulation;
  }
  .main-nav a:last-of-type { border-bottom:none; }
  .nav-login-link { margin-top:8px; justify-content:center; }
  .nav-cta {
    margin:12px 0 0;
    justify-content:center;
    padding:13px;
    font-size:13.5px;
    min-height:48px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(10,124,68,.1);
  }
  /* Pastikan menu-toggle juga punya area tap yang cukup */
  .menu-toggle {
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    /* Naikkan di atas drawer (200) supaya tombol tutup (X) tetap
       bisa ditekan saat menu terbuka — z-index butuh position */
    position:relative;
    z-index:202;
  }

  /* Hero */
  .hero { min-height:auto; }
  .hero-grid { padding:44px 0 56px; }
  .hero-visual { height:290px; }
  .visual-logo-wrap { width:110px; height:110px; }
  .visual-ring.ring-outer { width:240px; height:240px; }
  .visual-ring.ring-inner { width:180px; height:180px; }

  /* Info grid */
  .info-grid { grid-template-columns:1fr 1fr; }
  .info-item { border-right:1px solid rgba(24,37,30,.11); border-bottom:1px solid rgba(24,37,30,.11); padding:18px 14px; }
  .info-item:nth-child(even)  { border-right:none; }
  .info-item:nth-child(3),.info-item:nth-child(4) { border-bottom:none; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-item:last-child { grid-column:span 2; }

  /* Gallery */
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .gallery-item.large { grid-column:span 1; height:190px; }
  .gallery-item { height:140px; }

  .section-row { flex-direction:column; align-items:flex-start; }
  .admission-inner { flex-direction:column; align-items:flex-start; padding:60px 0; gap:28px; }

  /* Footer */
  .footer-grid  { grid-template-columns:1fr; gap:32px; }
  .footer-brand { grid-column:span 1; }

  /* Modal */
  .modal-box  { padding:24px 18px; }
  .form-row   { grid-template-columns:1fr; }
  .back-to-top { bottom:18px; right:18px; }
}

/* ── ≤480px ──────────────────────────────────────────────────── */
@media (max-width:480px) {
  .hero-badges { gap:6px; }
  .badge { font-size:10px; padding:5px 9px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-actions .button { width:100%; justify-content:center; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-item:last-child { grid-column:span 1; }
  .section-heading h2 { font-size:clamp(26px,7vw,38px); }
  .visi-misi-grid { gap:14px; }
  .vm-card { padding:22px; }
  .hero-visual { height:260px; }
  .visual-logo-wrap { width:96px; height:96px; }
  .visual-ring.ring-outer { width:210px; height:210px; }
  .visual-ring.ring-inner { width:158px; height:158px; }
  /* Hide hero floating cards on very small screens */
  .card-top, .card-bottom { display: none; }

  /* Info cepat jadi satu kolom.
     Dua kolom masih dipaksa oleh lebar isinya sendiri: .info-item adalah
     flex dengan ikon 40px tak menyusut + blok tulisan ber-min-width auto,
     sehingga di layar 320px dua kolomnya butuh ~323px di dalam 279px dan
     meluber 12px keluar halaman. */
  .info-grid { grid-template-columns:1fr; }
  .info-item { border-right:none; padding:16px 14px; }
  .info-item:nth-child(3) { border-bottom:1px solid rgba(24,37,30,.11); }
  .info-item:last-child   { border-bottom:none; }

  /* Merek boleh menyusut di layar sempit.
     .brand ber-flex-shrink:0, jadi di 320px lebar merek + tombol menu 44px
     melebihi wadah 279px sebanyak 2px. Nama sekolahnya sudah ber-ellipsis,
     hanya perlu diizinkan menyempit. */
  .brand { flex-shrink:1; min-width:0; }
  .brand span { min-width:0; }
  .brand strong { max-width:100%; }
}

/* min-width:0 pada blok tulisan di dalam .info-item berlaku di SEMUA lebar:
   tanpa itu kata panjang (alamat surel, "Terakreditasi") menahan kolomnya
   supaya tidak menyusut, dan luberannya muncul lagi di lebar lain. */
.info-item > div { min-width: 0; }
.info-item strong,
.info-item span { overflow-wrap: anywhere; }

/* ── GENERAL TOUCH & ACCESSIBILITY IMPROVEMENTS ─────────────── */

/* Touch: tap highlight & minimum sizes */
.menu-toggle  { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nav-cta      { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.main-nav a   { touch-action: manipulation; -webkit-tap-highlight-color: rgba(10,124,68,.1); }
.button       { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.back-to-top  { touch-action: manipulation; }

/* Prevent iOS font zoom on input focus.
 *
 * Kotak ceklis dan radio DIKECUALIKAN. Aturan ini dulu mengenai semua
 * input, sehingga -webkit-appearance:none melucuti gambar bawaan kotak
 * ceklis persetujuan: elemennya tetap ada dan nilainya tetap berubah
 * saat diklik, tetapi tidak menggambar apa pun sehingga terlihat seperti
 * tidak bisa diceklis. Keduanya juga tidak perlu font-size 16px karena
 * tidak memunculkan papan tik di iOS. */
.ppdb-form input:not([type="checkbox"]):not([type="radio"]),
.ppdb-form select,
.ppdb-form textarea { font-size: 16px; -webkit-appearance: none; }

/* Prevent text size adjust on rotation */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Bilah atas di layar sempit.
 *
 * Dulu di sini ada `.topbar-contact { display:none }` dengan maksud mencegah
 * luberan — tetapi kelas itu TIDAK ADA di satu pun halaman (tujuh halaman
 * publik memakai topbar yang sama, semuanya memakai <a> tanpa kelas itu).
 * Jadi aturannya tidak pernah berlaku dan di layar 320px deretan tautan
 * meluber 50px keluar halaman: .topbar-links adalah flex item ber-min-width
 * auto, sehingga tidak boleh menyusut di bawah lebar isinya.
 *
 * Diperbaiki dengan MEMBIARKANNYA MELIPAT, bukan menyembunyikan isinya —
 * alamat surel dan nomor telepon tetap bisa dibaca dan ditekan di ponsel. */
@media (max-width: 640px) {
  .topbar-inner {
    height: auto;
    min-height: 36px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    padding-block: 5px;
  }
  .topbar-inner > span,
  .topbar-links,
  .topbar-links a { min-width: 0; }
  .topbar-links { flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
}

/* PPDB modal: bottom sheet on mobile */
@media (max-width: 480px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: auto;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOTO KONTEN DINAMIS (galeri & berita dari database)
   Ditambahkan terakhir; placeholder gradien lama tetap berlaku
   untuk item yang belum punya foto.
   ═══════════════════════════════════════════════════════════════ */
.gallery-photo {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--transition);
}
.gallery-item:hover .gallery-photo { transform:scale(1.04); }

.news-photo {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Tag kategori harus tetap terbaca di atas foto */
.news-image .news-photo + .news-img-content {
  position:relative; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,.42), transparent 62%);
}

/* ═══════════════════════════════════════════════════════════════
   HALAMAN ISI PUBLIK — berita.html, berita-detail.html, galeri.html
   Semua kelas berawalan kp- (konten publik) supaya tidak pernah
   bertabrakan dengan gaya halaman depan yang sudah berjalan.
   Kartu & item galeri tetap memakai .news-card / .gallery-item,
   tetapi wadahnya sengaja BUKAN .news-grid / .gallery-grid — dua
   selektor itu dipakai script.js untuk mengisi halaman depan.
   ═══════════════════════════════════════════════════════════════ */

/* Di index.html tombol PPDB berupa <button> sehingga aturan `.main-nav a`
   tidak mengenainya. Di halaman ini ia harus berupa tautan antar-halaman,
   dan `.main-nav a` (padding) serta `.main-nav a:hover` (latar hijau muda)
   akan menimpanya. Dua baris berikut mengembalikan tampilan aslinya.
   index.html tidak terpengaruh karena di sana elemennya bukan <a>. */
.main-nav a.nav-cta { padding:8px 14px; }
.main-nav a.nav-cta:hover { background:var(--green-dark); color:var(--white) !important; }

/* ── Kepala halaman ─────────────────────────────────────────── */
.kp-hero {
  background:linear-gradient(150deg,var(--green-deep) 0%,var(--green-dark) 58%,var(--green) 100%);
  color:var(--white); padding:54px 0 46px; position:relative; overflow:hidden;
}
.kp-hero::after {            /* lingkaran lembut, mengikuti bahasa visual hero depan */
  content:''; position:absolute; top:-90px; right:-70px; width:280px; height:280px;
  border-radius:50%; background:rgba(245,197,24,.09); pointer-events:none;
}
.kp-hero .container { position:relative; z-index:1; }
.kp-hero h1 { font-size:clamp(26px,4.2vw,40px); line-height:1.18; text-wrap:balance; margin-bottom:12px; }
.kp-hero p  { color:var(--green-mid); font-size:14.5px; max-width:56ch; line-height:1.7; }

.kp-breadcrumb { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--green-mid); margin-bottom:16px; flex-wrap:wrap; }
.kp-breadcrumb a { color:var(--green-mid); transition:color var(--transition); }
.kp-breadcrumb a:hover { color:var(--yellow); }
.kp-breadcrumb svg { width:12px; height:12px; opacity:.6; }
.kp-breadcrumb span[aria-current] { color:var(--white); font-weight:600; }

/* ── Batang alat: pencarian + saringan kategori ─────────────── */
.kp-bar {
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  background:var(--white); border:1px solid var(--cream-dark); border-radius:var(--radius-lg);
  padding:14px 16px; box-shadow:var(--shadow-sm); margin-bottom:26px;
}
.kp-cari { position:relative; flex:1 1 240px; min-width:0; }
.kp-cari svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); }
.kp-cari input {
  width:100%; font:inherit; font-size:13px; color:var(--ink);
  padding:10px 12px 10px 34px; border:1px solid var(--cream-dark);
  border-radius:var(--radius-sm); background:var(--cream); transition:var(--transition);
}
.kp-cari input:focus { outline:none; border-color:var(--green); background:var(--white); box-shadow:0 0 0 3px rgba(10,124,68,.1); }

/* min-width:0 wajib: sebagai item flex, .kp-chips punya min-width:auto
   yang menahannya tetap selebar seluruh chip dalam satu baris (±519px),
   sehingga batang alat terdorong melebihi layar ponsel. Dengan ini chip
   membungkus ke baris berikutnya dan tidak ada lagi luapan ke samping. */
.kp-chips { display:flex; gap:7px; flex-wrap:wrap; min-width:0; }
.kp-chip {
  font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.02em; cursor:pointer;
  padding:8px 14px; border-radius:var(--radius-full); border:1px solid var(--cream-dark);
  background:var(--cream); color:var(--muted); transition:var(--transition);
}
.kp-chip:hover { border-color:var(--green); color:var(--green); }
.kp-chip.active { background:var(--green); border-color:var(--green); color:var(--white); }
.kp-chip:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }

.kp-jumlah { font-size:12px; color:var(--muted); margin-bottom:18px; }
.kp-jumlah b { color:var(--ink); }

/* ── Petak kartu berita ─────────────────────────────────────── */
.kp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px; }
.kp-grid .news-card { display:flex; flex-direction:column; }
.kp-grid .news-body { display:flex; flex-direction:column; flex:1; }
.kp-grid .news-read-more { margin-top:auto; }

/* ── Keadaan kosong, memuat, dan gagal ──────────────────────── */
.kp-status { text-align:center; padding:56px 20px; color:var(--muted); }
.kp-status svg { width:34px; height:34px; stroke-width:1.4; color:var(--muted-light); margin-bottom:12px; }
.kp-status strong { display:block; color:var(--ink); font-size:15px; margin-bottom:6px; }
.kp-status p { font-size:13px; max-width:44ch; margin:0 auto; line-height:1.7; }
.kp-status.gagal svg { color:#c0392b; }

/* ── Artikel (berita-detail.html) ───────────────────────────── */
.kp-artikel { max-width:none; }
.kp-artikel-wrap { width:min(720px,calc(100% - 48px)); margin:0 auto; }

.kp-sampul { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; box-shadow:var(--shadow-md); }
.kp-sampul img { width:100%; height:auto; display:block; }
.kp-sampul-kosong {
  height:220px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-lg); margin-bottom:28px;
}
.kp-sampul-kosong svg { width:64px; height:64px; opacity:.3; stroke-width:1; }

.kp-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-size:11.5px; color:var(--muted); }
.kp-meta .tag-label { font-size:10px; }
.kp-meta-item { display:inline-flex; align-items:center; gap:5px; }
.kp-meta-item svg { width:13px; height:13px; }

.kp-artikel h1 { font-size:clamp(22px,3.4vw,31px); line-height:1.3; text-wrap:balance; color:var(--ink); margin-bottom:14px; }
.kp-ringkasan {
  font-family:var(--font-serif); font-size:16px; line-height:1.75;
  color:var(--ink-soft); padding-left:16px; border-left:3px solid var(--yellow); margin-bottom:26px;
}
.kp-isi p { font-size:15px; line-height:1.85; color:var(--ink-soft); margin-bottom:18px; }
.kp-isi p:last-child { margin-bottom:0; }

.kp-bagikan { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid var(--cream-dark); }
.kp-bagikan span { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.kp-bagikan-btn {
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:8px 13px; border-radius:var(--radius-full); border:1px solid var(--cream-dark);
  background:var(--white); color:var(--ink-soft); transition:var(--transition);
}
.kp-bagikan-btn svg { width:14px; height:14px; }
.kp-bagikan-btn:hover { border-color:var(--green); color:var(--green); transform:translateY(-1px); }
.kp-bagikan-btn:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }

.kp-lainnya { background:var(--cream-dark); margin-top:56px; padding:52px 0; }
.kp-lainnya h2 { font-size:21px; margin-bottom:24px; }

/* ── Galeri penuh + lightbox ────────────────────────────────── */
.kp-galeri-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:14px; grid-auto-rows:196px;
}

/* ═══════════════════════════════════════════════════════════════
   FORMULIR PENILAIAN PUBLIK (penilaian.html)
   ═══════════════════════════════════════════════════════════════ */
.pn-wrap { max-width:620px; margin:0 auto; }
.pn-form { display:flex; flex-direction:column; gap:22px; }
.pn-baris { display:flex; flex-direction:column; gap:7px; }
.pn-baris label, .pn-label {
  font-size:13.5px; font-weight:700; color:var(--ink);
}
.pn-wajib { color:var(--red, #e05252); }
.pn-baris input[type="text"], .pn-baris textarea {
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:11px 14px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.pn-baris textarea { resize:vertical; min-height:120px; line-height:1.6; }
.pn-baris input[type="text"]:focus, .pn-baris textarea:focus {
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(10,124,68,.13);
}
.pn-baris .pn-salah { border-color:#e05252; }
.pn-bantu { font-size:12px; color:var(--muted); }
.pn-galat { font-size:12.5px; font-weight:600; color:#c0392b; }
.pn-galat[hidden] { display:none; }

/* Bintang: tombol sungguhan agar bisa dipilih dengan papan tik */
.pn-bintang { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pn-bintang button {
  background:none; border:0; padding:3px; cursor:pointer; line-height:0;
  color:#d6ddd8; transition:transform .12s ease, color .12s ease;
}
.pn-bintang button svg { width:30px; height:30px; }
.pn-bintang button.terisi { color:var(--yellow, #f2b705); }
.pn-bintang button.terisi svg { fill:currentColor; }
.pn-bintang button:hover { transform:scale(1.12); }
.pn-bintang button:focus-visible {
  outline:2px solid var(--green); outline-offset:2px; border-radius:6px;
}
.pn-bintang-teks {
  margin-left:10px; font-size:13px; font-weight:600; color:var(--ink-soft);
}

/* Jebakan lebah — disembunyikan dari orang, bukan dari robot.
   TIDAK memakai display:none: sebagian robot justru melewatkan kolom
   yang display-nya none, sehingga jebakannya tidak pernah termakan. */
.pn-lebah {
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0;
}

.pn-catatan {
  display:flex; align-items:flex-start; gap:9px;
  background:var(--cream); border-radius:var(--radius-md); padding:11px 14px;
  font-size:12.5px; line-height:1.55; color:var(--ink-soft);
}
.pn-catatan svg { width:16px; height:16px; flex:none; margin-top:1px; color:var(--green); }

.pn-aksi { display:flex; }
.btn-kirim {
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  background:var(--green); color:var(--white); text-decoration:none;
  border:0; border-radius:var(--radius-md); padding:13px 26px;
  transition:background var(--transition), transform .12s ease;
}
.btn-kirim:hover { background:var(--green-dark); }
.btn-kirim:disabled { opacity:.55; cursor:default; transform:none; }
.btn-kirim svg { width:17px; height:17px; }

.pn-pesan {
  border-radius:var(--radius-md); padding:11px 14px;
  font-size:13.5px; font-weight:600; background:var(--cream); color:var(--ink-soft);
}
.pn-pesan-galat { background:#fdecea; color:#c0392b; }
.pn-pesan[hidden] { display:none; }

.pn-selesai { text-align:center; padding:26px 0; }
.pn-selesai[hidden] { display:none; }
.pn-selesai-ikon { color:var(--green); }
.pn-selesai-ikon svg { width:56px; height:56px; }
.pn-selesai h2 { margin:14px 0 8px; font-size:24px; color:var(--green-dark); }
.pn-selesai p { color:var(--ink-soft); line-height:1.65; }
.pn-selesai-aksi {
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:22px;
  align-items:center;
}
.pn-selesai-aksi .text-link { background:none; border:0; cursor:pointer; font:inherit; }

/* ── Halaman dokumentasi program (program.html) ─────────────────
   Memakai kembali .kp-galeri-grid, .gallery-item, dan lightbox milik
   halaman galeri; yang di bawah hanya tambahan khas halaman ini. */

/* Kata kunci penyaring, ditampilkan apa adanya kepada pembaca */
.program-kunci {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:0 0 18px; font-size:12.5px; color:var(--ink-soft);
}
.program-kunci span {
  background:var(--cream); border:1px solid var(--border-light);
  border-radius:99px; padding:3px 11px; font-weight:600; color:var(--green-dark);
}

/* Penanda asal tiap petak: dari Galeri atau dari Berita. Tanpa ini
   keduanya tampak sama padahal yang satu membuka gambar besar dan
   yang lain pindah ke halaman berita. */
.program-asal {
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(255,255,255,.92); color:var(--green-dark);
  border-radius:99px; padding:3px 10px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em;
}
.program-berita { display:block; text-decoration:none; }

.program-lainnya {
  display:flex; flex-wrap:wrap; gap:22px;
  margin-top:28px; justify-content:center;
}
.kp-galeri-grid .gallery-item.large { grid-column:span 2; grid-row:span 2; }
/* Keterangan di halaman galeri selalu terlihat, bukan hanya saat hover:
   di layar sentuh tidak ada hover sama sekali. */
.kp-galeri-grid .gallery-overlay { opacity:1; background:linear-gradient(to top,rgba(5,61,33,.86) 0%,transparent 58%); }
.kp-galeri-grid .gallery-item:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }

.kp-lightbox {
  position:fixed; inset:0; z-index:1200; display:none;
  background:rgba(5,20,12,.93); padding:24px;
  align-items:center; justify-content:center;
}
.kp-lightbox.open { display:flex; }
.kp-lightbox-isi { max-width:min(1000px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; }
.kp-lightbox-gambar {
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); overflow:hidden;
}
.kp-lightbox-gambar img { max-width:100%; max-height:72vh; object-fit:contain; display:block; border-radius:var(--radius-md); }
.kp-lightbox-kosong { width:min(560px,80vw); height:min(380px,56vh); display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); }
.kp-lightbox-kosong svg { width:92px; height:92px; opacity:.35; stroke-width:.8; }
.kp-lightbox-teks { text-align:center; color:var(--white); }
.kp-lightbox-teks strong { display:block; font-size:16px; margin-bottom:4px; }
.kp-lightbox-teks p { font-size:13px; color:var(--green-mid); }
.kp-lightbox-teks small { display:block; font-size:11px; color:rgba(255,255,255,.45); margin-top:8px; letter-spacing:.06em; }

.kp-lb-btn {
  position:absolute; width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  color:var(--white); transition:var(--transition);
}
.kp-lb-btn:hover { background:rgba(255,255,255,.24); }
.kp-lb-btn:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }
.kp-lb-btn svg { width:20px; height:20px; }
.kp-lb-tutup { top:20px; right:20px; }
.kp-lb-prev  { left:20px;  top:50%; transform:translateY(-50%); }
.kp-lb-next  { right:20px; top:50%; transform:translateY(-50%); }

@media (max-width:600px) {
  .kp-hero { padding:40px 0 34px; }
  .kp-bar { flex-direction:column; align-items:stretch; }
  /* Chip dibiarkan membungkus, bukan digulir ke samping: daftar kategori
     pendek, dan menggulir menyembunyikan pilihan yang tidak terlihat. */
  .kp-chip { flex:0 0 auto; }
  .kp-artikel-wrap { width:calc(100% - 36px); }
  .kp-galeri-grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); grid-auto-rows:150px; gap:10px; }
  .kp-lightbox { padding:12px; }
  .kp-lb-prev { left:8px; }
  .kp-lb-next { right:8px; }
  .kp-lb-tutup { top:10px; right:10px; }
}

@media (prefers-reduced-motion:reduce) {
  .kp-chip,.kp-bagikan-btn,.kp-lb-btn,.kp-cari input { transition:none; }
}

/* ═══════════════════════════════════════════════════════════════
   SPMB — kode pendaftaran pada layar sukses formulir
   ═══════════════════════════════════════════════════════════════ */
.spmb-kode-box {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--green-light); border:1px dashed var(--green);
  border-radius:var(--radius-md); padding:16px 18px; margin:18px 0 4px;
}
.spmb-kode-label {
  font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-dark);
}
.spmb-kode {
  font-family:var(--font-sans); font-size:22px; font-weight:800;
  letter-spacing:.06em; color:var(--green-dark);
  /* Angka sejajar supaya kode mudah disalin dan dibandingkan */
  font-variant-numeric:tabular-nums;
}
.spmb-kode-ta { font-size:11.5px; color:var(--muted); }
.spmb-kode-catatan { font-size:11.5px; color:var(--muted); margin-top:6px; text-align:center; max-width:34ch; }

/* Pesan gagal kirim diberi jarak dari tombol */
#err-kirim.show { display:block; margin:4px 0 10px; }

/* ── Unggah foto calon murid ────────────────────────────────── */
.spmb-foto-baris { display:flex; gap:14px; align-items:flex-start; }

/* Perbandingan 3:4, ukuran pasfoto yang lazim dipakai sekolah */
.spmb-foto-pratinjau {
  width:78px; height:104px; flex-shrink:0;
  border:2px dashed var(--cream-dark); border-radius:var(--radius-sm);
  background:var(--cream); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--transition);
}
.spmb-foto-pratinjau.ada-foto { border-style:solid; border-color:var(--green); }
.spmb-foto-pratinjau svg { width:28px; height:28px; color:var(--muted-light); stroke-width:1.4; }
.spmb-foto-pratinjau img { width:100%; height:100%; object-fit:cover; display:block; }
/* Atribut hidden harus menang atas display di atas — tanpa ini teks alt
   gambar kosong muncul menutupi ikon pratinjau. */
.spmb-foto-pratinjau img[hidden] { display:none; }
/* Ikon hanya tampil selama belum ada foto */
.spmb-foto-pratinjau.ada-foto svg { display:none; }

.spmb-foto-aksi { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
.spmb-foto-pilih { padding:9px 16px; font-size:12.5px; }
.spmb-foto-hapus {
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  background:none; border:none; padding:0;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--muted);
  transition:color var(--transition);
}
.spmb-foto-hapus:hover { color:#c0392b; }
.spmb-foto-hapus svg { width:12px; height:12px; }
/* Sama seperti pratinjau: hidden harus mengalahkan display di atas */
.spmb-foto-hapus[hidden] { display:none; }
.spmb-foto-info {
  font-size:11.5px; color:var(--muted); line-height:1.5;
  overflow-wrap:anywhere;   /* nama berkas panjang jangan melebarkan modal */
}

/* ── Bukti bayar administrasi pendaftaran ───────────────────── */
.spmb-bayar {
  margin:0; padding:14px 16px 16px; min-width:0;
  border:1.5px solid var(--cream-dark); border-radius:var(--radius-md);
  display:flex; flex-direction:column; gap:14px;
}
.spmb-bayar legend {
  padding:0 6px; font-size:12.5px; font-weight:700; color:var(--green-dark);
}
.spmb-bayar-petunjuk {
  margin:0; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--cream); font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  display:flex; flex-direction:column; gap:3px; overflow-wrap:anywhere;
}
.spmb-bayar-petunjuk strong { color:var(--ink); }
.spmb-bayar-petunjuk span[hidden] { display:none; }
/* Petunjuk dari admin boleh berisi baris baru (bank, rekening, atas nama) */
#bayar-petunjuk-info { white-space:pre-line; }
.spmb-rupiah { position:relative; }
.spmb-rupiah span {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:700; color:var(--muted); pointer-events:none;
}
.spmb-rupiah input { width:100%; padding-left:38px !important; font-variant-numeric:tabular-nums; }
.spmb-bukti { display:flex; gap:14px; align-items:flex-start; }
.spmb-bukti-pratinjau {
  width:78px; height:78px; flex-shrink:0;
  border:2px dashed var(--cream-dark); border-radius:var(--radius-sm);
  background:var(--cream); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--transition);
}
.spmb-bukti-pratinjau.ada-berkas { border-style:solid; border-color:var(--green); }
.spmb-bukti-pratinjau svg { width:26px; height:26px; color:var(--muted-light); stroke-width:1.4; }
.spmb-bukti-pratinjau img { width:100%; height:100%; object-fit:cover; display:block; }
.spmb-bukti-pratinjau img[hidden] { display:none; }
.spmb-bukti-pratinjau.ada-gambar svg { display:none; }
.spmb-bukti-pratinjau.ada-berkas:not(.ada-gambar) svg { color:var(--green); }

/* ── Tombol pada layar sukses ───────────────────────────────── */
/* Pemberitahuan hitung mundur sebelum dialihkan ke halaman kartu */
.spmb-alih {
  font-size:12px; color:var(--green); font-weight:600;
  margin-top:14px; min-height:1.4em;   /* ruang tetap agar tombol tidak melompat */
}
.spmb-sukses-aksi {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;
}
.spmb-sukses-aksi .button-outline.spmb-tutup {
  border-color:var(--cream-dark); color:var(--muted);
}
.spmb-sukses-aksi .button-outline.spmb-tutup:hover {
  background:var(--cream); border-color:var(--muted-light); color:var(--ink);
}

@media (max-width:520px) {
  .spmb-foto-baris { gap:12px; }
  .spmb-sukses-aksi { flex-direction:column; }
  .spmb-sukses-aksi .button { justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACER STUDY ALUMNI (tracer.html)
   Memakai kembali .pn-baris, .pn-label, .pn-galat, .btn-kirim, .pn-pesan,
   .pn-selesai dan .pn-lebah milik formulir penilaian; yang di bawah hanya
   yang khas formulir panjang ini.
   ═══════════════════════════════════════════════════════════════ */
.tr-wrap { max-width:760px; margin:0 auto; }
.tr-form { display:flex; flex-direction:column; gap:26px; }
.tr-muat { text-align:center; color:var(--muted); padding:60px 12px; font-size:14px; }
.tr-muat-galat { color:#c0392b; font-weight:600; }

.tr-bagian {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 22px 24px; margin:0; display:flex; flex-direction:column; gap:22px;
  background:var(--white);
}
.tr-bagian legend { padding:0 10px; display:flex; flex-direction:column; gap:2px; }
.tr-bagian-no {
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green);
}
.tr-bagian-judul { font-size:17px; font-weight:800; color:var(--ink); }
.tr-bagian-ket { font-size:13px; color:var(--muted); margin:-12px 0 0; }

.tr-no { color:var(--green); font-weight:800; margin-right:3px; }
.tr-medan .pn-label { line-height:1.5; }
/* Medan yang bermasalah ditandai di TEPI KIRI, bukan hanya warna tulisan:
   penanda yang semata-mata warna hilang bagi pembaca yang buta warna. */
.tr-salah {
  border-left:3px solid #c0392b; padding-left:12px; margin-left:-15px;
}
.tr-salah .pn-label { color:#c0392b; }

/* Pilihan tunggal & ganda */
.tr-pilih { display:flex; flex-direction:column; gap:7px; }
.tr-opsi {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:14.5px; font-weight:500; color:var(--ink-soft); line-height:1.5;
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:9px 13px; transition:border-color var(--transition), background var(--transition);
}
.tr-opsi:hover { border-color:var(--green-mid); background:var(--cream); }
.tr-opsi input { margin:2px 0 0; accent-color:var(--green); width:17px; height:17px; flex:none; }
.tr-opsi:has(input:checked) {
  border-color:var(--green); background:var(--green-light); color:var(--ink); font-weight:600;
}
.tr-opsi:focus-within { outline:2px solid var(--green); outline-offset:2px; }

.tr-lain {
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:10px 13px; margin-top:2px;
}
.tr-lain:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(10,124,68,.13); }
.tr-lain[hidden] { display:none; }

/* Skala 1–5 satu pertanyaan */
.tr-skala { display:flex; flex-wrap:wrap; gap:8px; }
.tr-skala-butir {
  flex:1 1 128px; display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; text-align:center;
  border:1.5px solid var(--border); border-radius:var(--radius-md); padding:10px 8px;
  transition:border-color var(--transition), background var(--transition);
}
.tr-skala-butir input { position:absolute; opacity:0; width:0; height:0; }
.tr-skala-angka { font-size:18px; font-weight:800; color:var(--ink); line-height:1.1; }
.tr-skala-ket { font-size:11.5px; color:var(--muted); line-height:1.3; }
.tr-skala-butir:hover { border-color:var(--green-mid); background:var(--cream); }
.tr-skala-butir:has(input:checked) { border-color:var(--green); background:var(--green-light); }
.tr-skala-butir:has(input:checked) .tr-skala-angka,
.tr-skala-butir:has(input:checked) .tr-skala-ket { color:var(--green-dark); }
.tr-skala-butir:focus-within { outline:2px solid var(--green); outline-offset:2px; }

/* Kisi banyak baris — daftar, bukan tabel lebar: delapan belas baris kali
   lima kolom tidak muat di layar ponsel, dan alumni mengisinya dari ponsel. */
.tr-kisi { border:1px solid var(--border-light); border-radius:var(--radius-md); overflow:hidden; }
.tr-kisi-kepala {
  display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;
  background:var(--cream); padding:9px 12px; border-bottom:1px solid var(--border-light);
}
.tr-kisi-kepala span {
  font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:4px;
}
.tr-kisi-kepala b { color:var(--ink); font-size:12px; }
.tr-kisi-baris {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border-bottom:1px solid var(--border-light); flex-wrap:wrap;
}
.tr-kisi-baris:last-child { border-bottom:0; }
.tr-kisi-baris:nth-child(even) { background:#fafcfa; }
.tr-kisi-nama { font-size:14px; color:var(--ink-soft); font-weight:600; flex:1 1 150px; }
.tr-kisi-nilai { display:flex; gap:6px; flex:none; }
.tr-bulat { cursor:pointer; }
.tr-bulat input { position:absolute; opacity:0; width:0; height:0; }
.tr-bulat span {
  display:grid; place-items:center; width:34px; height:34px;
  border:1.5px solid var(--border); border-radius:50%;
  font-size:13.5px; font-weight:700; color:var(--muted);
  background:var(--white);
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.tr-bulat:hover span { border-color:var(--green-mid); }
.tr-bulat:has(input:checked) span {
  border-color:var(--green); background:var(--green); color:var(--white);
}
.tr-bulat:focus-within span { outline:2px solid var(--green); outline-offset:2px; }

.tr-penutup { white-space:pre-line; max-width:56ch; margin:0 auto; }

@media (max-width:560px) {
  .tr-bagian { padding:18px 15px 20px; }
  .tr-kisi-baris { flex-direction:column; align-items:flex-start; gap:8px; }
  .tr-kisi-nilai { align-self:stretch; justify-content:space-between; }
  .tr-bulat span { width:44px; height:40px; border-radius:var(--radius-md); }
  .tr-kisi-kepala { justify-content:flex-start; }
  .tr-skala-butir { flex:1 1 100%; flex-direction:row; justify-content:flex-start; gap:10px; }
}

/* Penanda "terpilih" yang TIDAK bergantung pada :has().
   Pada .tr-bulat dan .tr-skala-butir, kotak pilihannya sendiri disembunyikan,
   jadi bila :has() tidak didukung peramban, tidak ada satu pun tanda bahwa
   sebuah nilai sudah dipilih — formulirnya jadi mustahil diisi. Pemilih
   saudara-berdampingan di bawah ini bekerja di semua peramban dan menjadi
   dasarnya; aturan :has() di atas hanya mempercantik. */
.tr-bulat input:checked + span {
  border-color:var(--green); background:var(--green); color:var(--white);
}
.tr-skala-butir input:checked + .tr-skala-angka { color:var(--green-dark); }
.tr-skala-butir input:checked + .tr-skala-angka::after {
  content:''; display:block; height:3px; margin-top:4px; border-radius:2px;
  background:var(--green);
}

/* Daftar turun (tahun) — pilihan panjang & seragam tidak perlu deretan tombol */
.tr-turun {
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:11px 14px; cursor:pointer;
}
.tr-turun:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(10,124,68,.13); }