/* update.css — gabungan seluruh CSS tambahan (responsive, update-v68…v84, splash, transisi) + pembaruan v86.
   style.css tetap menjadi CSS dasar. Urutan di sini = urutan cascade aslinya. */

/* ===================== [responsive.css] ===================== */
/* =====================================================================
   LAPISAN RESPONSIF — menyesuaikan lebar, tinggi, dan ukuran teks
   dengan layar HP maupun PC.

   Catatan teknis: piksel CSS sudah otomatis mengikuti kepadatan layar
   (DPI/devicePixelRatio) di browser. Yang perlu diatur adalah LEBAR
   viewport, orientasi, dan jenis input (sentuh atau mouse). Karena itu
   semua ukuran di sini memakai satuan fluid (clamp, min, vw) dan
   breakpoint, bukan angka tetap.

   Beranda (data-page="beranda") SENGAJA tidak disentuh. Semua aturan
   di bawah dibatasi ke halaman lain.
   ===================================================================== */

/* ---------- 0. Aman untuk semua ukuran layar ---------- */
main section.page:not([data-page="beranda"]) img,
main section.page:not([data-page="beranda"]) video,
main section.page:not([data-page="beranda"]) iframe {
  max-width: 100%;
}
main section.page:not([data-page="beranda"]) h1,
main section.page:not([data-page="beranda"]) h2,
main section.page:not([data-page="beranda"]) h3,
main section.page:not([data-page="beranda"]) p,
main section.page:not([data-page="beranda"]) li,
main section.page:not([data-page="beranda"]) a {
  overflow-wrap: anywhere;
}

/* ---------- 1. Kontainer: ruang samping mengikuti lebar layar ---------- */
main section.page:not([data-page="beranda"]) .container {
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}
@media (min-width: 1600px) {
  main section.page:not([data-page="beranda"]) .container {
    max-width: 1360px;
  }
}

/* ---------- 2. Judul & teks: ukuran fluid ---------- */
main section.page:not([data-page="beranda"]) .page-banner {
  padding: clamp(40px, 7vw, 84px) 0 clamp(34px, 5vw, 62px);
}
main section.page:not([data-page="beranda"]) .page-banner .container {
  max-width: min(760px, 100%);
}
main section.page:not([data-page="beranda"]) .page-banner h1 {
  font-size: clamp(24px, 5vw, 46px);
  line-height: 1.15;
}
main section.page:not([data-page="beranda"]) .page-banner p {
  font-size: clamp(14px, 1.5vw, 17.5px);
}
main section.page:not([data-page="beranda"]) h2 {
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.25;
}

/* ---------- 3. Grid kartu: jumlah kolom mengikuti lebar layar ---------- */
main section.page:not([data-page="beranda"]) .news-grid,
main section.page:not([data-page="beranda"]) .prestasi-grid,
main section.page:not([data-page="beranda"]) .osis-grid,
main section.page:not([data-page="beranda"]) .kompetensi-grid,
main section.page:not([data-page="beranda"]) .guru-grid,
main section.page:not([data-page="beranda"]) .alumni-grid,
main section.page:not([data-page="beranda"]) .gallery-grid,
main section.page:not([data-page="beranda"]) .ekskul-grid,
main section.page:not([data-page="beranda"]) .sosmed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(14px, 2vw, 26px);
}
@media (min-width: 1200px) {
  main section.page:not([data-page="beranda"]) .news-grid,
  main section.page:not([data-page="beranda"]) .prestasi-grid,
  main section.page:not([data-page="beranda"]) .guru-grid,
  main section.page:not([data-page="beranda"]) .alumni-grid,
  main section.page:not([data-page="beranda"]) .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* ---------- 4. Tinggi elemen: fluid, tidak memotong teks ---------- */
main section.page:not([data-page="beranda"]) .news-card .thumb {
  height: clamp(150px, 26vw, 240px);
}
main section.page:not([data-page="beranda"]) .news-grid-scroll {
  max-height: min(1180px, 80vh);
  max-height: min(1180px, 80dvh);
}
main section.page:not([data-page="beranda"]) .map-embed iframe {
  min-height: clamp(240px, 42vw, 440px);
  width: 100%;
}

/* ---------- 5. Target sentuh: tombol cukup besar di HP ---------- */
@media (pointer: coarse) {
  main section.page:not([data-page="beranda"]) button,
  main section.page:not([data-page="beranda"]) .btn,
  main section.page:not([data-page="beranda"]) a.btn {
    min-height: 44px;
  }
}

/* ---------- 6. HP kecil (lebar < 360px) ---------- */
@media (max-width: 360px) {
  main section.page:not([data-page="beranda"]) .page-banner h1 {
    font-size: 22px;
  }
  main section.page:not([data-page="beranda"]) .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 7. Tablet & PC: lebih lega, tidak mengambang sempit ---------- */
@media (min-width: 900px) {
  main section.page:not([data-page="beranda"]) .page-banner .container {
    max-width: min(900px, 100%);
  }
}

/* ===================== [update-v68.css] ===================== */
/* =====================================================================
   UPDATE v68
   - Pencarian header: ikon dulu, bar muncul saat diklik
   - Menu "Lainnya" -> Game
   - Sambutan Kepala Sekolah (beranda)
   - Halaman Kompetensi & kartu Ekstrakurikuler memakai kartu "program"
   - Lokasi digabung ke footer
   Dimuat paling akhir; semua warna memakai variabel tema (terang/gelap).
   ===================================================================== */

/* ---------- 1. PENCARIAN HEADER ---------- */
.main-nav .nav-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--surface-alt);
  overflow: hidden;
  flex-shrink: 0;
  transition: width .45s var(--ease), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.main-nav .nav-search:hover { border-color: var(--gold); }
.main-nav .nav-search.is-open {
  width: min(300px, 42vw);
  background: var(--surface);
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .14);
}
.main-nav .nav-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 4px 0 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.main-nav .nav-search input:focus { border: 0; box-shadow: none; }
.main-nav .nav-search input::placeholder { color: var(--text-muted); }
.main-nav .nav-search.is-open input { opacity: 1; pointer-events: auto; transition-delay: .15s; }
.main-nav .nav-search .nav-search-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  transition: color .25s ease, transform .25s ease;
}
.main-nav .nav-search .nav-search-btn:hover { background: transparent; color: var(--orange, #ff6b00); }
.main-nav .nav-search.is-open .nav-search-btn { color: var(--orange, #ff6b00); }
.main-nav .nav-search .nav-search-btn:focus-visible { outline: 2px solid var(--orange, #ff6b00); outline-offset: -3px; }

/* HP & tablet kecil: ikon tetap tampil, bar melebar menutupi header saat dibuka */
@media (max-width: 768px) {
  .main-nav .nav-search { display: flex; margin-left: auto; }
  .main-nav .container.flex { position: relative; }
  .main-nav .nav-search.is-open {
    position: absolute;
    left: 14px; right: 14px; top: 50%;
    width: auto;
    transform: translateY(-50%);
    z-index: 8;
    animation: navSearchOpen .38s var(--ease);
  }
}
@keyframes navSearchOpen {
  from { clip-path: inset(0 0 0 calc(100% - 42px) round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-search, .main-nav .nav-search input { transition: none; }
  .main-nav .nav-search.is-open { animation: none; }
}

/* ---------- 2. MENU: opsi Game ---------- */
.nav-game-link i { margin-right: 8px; color: var(--orange, #ff6b00); width: 1.1em; text-align: center; }

/* ---------- 3. SAMBUTAN KEPALA SEKOLAH ---------- */
.sambutan-section { position: relative; padding: clamp(44px, 7vw, 80px) 0; }
.sambutan-wrap {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
}
.sambutan-figure { margin: 0; text-align: center; }
.sambutan-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--navy-steel-fixed) 0%, var(--navy) 100%);
  box-shadow: var(--shadow-lg);
}
.sambutan-photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  border: 2px solid rgba(255, 209, 102, .55);
  pointer-events: none;
}
.sambutan-photo img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.sambutan-photo-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: clamp(4rem, 12vw, 6.5rem);
  color: rgba(255, 255, 255, .85);
}
.sambutan-figure figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.sambutan-figure figcaption strong {
  font-family: var(--font-display);
  font-size: 1.05rem; line-height: 1.35;
  color: var(--navy);
}
.sambutan-figure figcaption span { font-size: .9rem; color: var(--text-muted); }
.sambutan-body .tag { display: inline-block; color: var(--orange, #ff6b00); }
.sambutan-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.25;
  color: var(--navy);
  margin: 8px 0 18px;
}
.sambutan-text p { margin: 0 0 14px; color: var(--ink); line-height: 1.8; max-width: 70ch; }
.sambutan-sign {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--orange, #ff6b00);
  font-style: italic;
  color: var(--text-muted);
}
:root[data-theme="dark"] .sambutan-figure figcaption strong,
:root[data-theme="dark"] .sambutan-body h2 { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sambutan-figure figcaption strong,
  :root:not([data-theme="light"]) .sambutan-body h2 { color: var(--ink); }
}
@media (max-width: 820px) {
  .sambutan-wrap { grid-template-columns: 1fr; }
  .sambutan-figure { max-width: 240px; margin: 0 auto; }
}

/* ---------- 4. HALAMAN KOMPETENSI ---------- */
.page-body.program-section { padding-top: clamp(36px, 6vw, 64px); padding-bottom: clamp(44px, 7vw, 80px); }
main section.page[data-page="kompetensi"] .prog-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) { main section.page[data-page="kompetensi"] .prog-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 820px)  { main section.page[data-page="kompetensi"] .prog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 520px)  { main section.page[data-page="kompetensi"] .prog-grid { grid-template-columns: 1fr; } }
.prog-grid > .loading-msg { grid-column: 1 / -1; }

/* ---------- 5. EKSTRAKURIKULER (tampilan = kartu program) ---------- */
.ekskul-prog-grid { margin-top: 24px; }
.prog-card--ekskul { --prog-img: none; min-height: 280px; cursor: pointer; padding: 26px 18px 22px; }
.prog-card--ekskul h3 { font-size: 1.15rem; }
.prog-card--ekskul .badge-baru { font-size: 9px; margin-left: 4px; }
.prog-card .prog-pembina { margin: -2px 0 2px; font-size: .9rem; line-height: 1.4; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.prog-card--ekskul:focus-visible { outline: 3px solid var(--orange, #ff6b00); outline-offset: 3px; }
@media (max-width: 820px) { .prog-card--ekskul { min-height: 240px; padding: 20px 12px; } }
@media (max-width: 520px) { .prog-card--ekskul { min-height: 220px; } }

/* ---------- 6. FOOTER + LOKASI ---------- */
footer .location-section.footer-location {
  padding: 0 0 44px;
  margin-bottom: 44px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
footer .footer-location .section-heading { margin-bottom: 26px; }
footer .footer-location .map-embed.home-map iframe { display: block; min-height: 320px; width: 100%; }
footer .footer-location .loc-item a { color: inherit; text-decoration: none; }
footer .footer-location .loc-item a:hover { color: var(--orange, #ff6b00); }
footer .footer-location .location-info { gap: 12px; }
footer .footer-location .loc-item h4::after { display: none; }
footer .footer-location .loc-item h4 { margin-bottom: 4px; }
footer .footer-location .loc-item { padding: 16px 18px; }
.footer-loc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.footer-loc-actions .footer-loc-btn { flex: 1 1 180px; padding: 12px 16px; font-size: .95rem; text-align: center; }
footer .prog-btn-ghost {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}
footer .prog-btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* kolom Kontak sudah menyatu di blok lokasi -> grid footer jadi 3 kolom */
footer .grid { grid-template-columns: 1.6fr 1fr 1.5fr; }
@media (max-width: 900px) {
  footer .grid { grid-template-columns: repeat(2, 1fr); }
  footer .grid > .about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  footer .grid { grid-template-columns: 1fr; }
  footer .footer-location .map-embed.home-map iframe { min-height: 260px; }
  footer .location-section.footer-location { padding-bottom: 32px; margin-bottom: 32px; }
}

/* ---------- 7. Pengaman responsif umum ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* ---------- 8. Header di HP kecil: muat ikon cari + tema + menu ---------- */
@media (max-width: 480px) {
  .main-nav .container.flex { gap: 6px; }
  .main-nav .nav-search { width: 38px; height: 38px; }
  .main-nav .nav-search .nav-search-btn { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
  .main-nav .theme-toggle, .main-nav .menu-toggle { width: 38px; height: 38px; margin-left: 0; }
  .main-nav .logo-wrap { min-width: 0; flex: 1 1 auto; }
  .main-nav .logo-text { min-width: 0; }
  .logo-text .school-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-text small { font-size: 10px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}
@media (max-width: 360px) {
  .logo-text .school-name { font-size: 12.5px; }
  .logo-wrap .logo-media { width: 36px; height: 36px; }
}

/* ===================== [update-v69.css] ===================== */
/* =====================================================================
   UPDATE v69
   - Ikon pencarian di kiri (tidak terpotong) + animasi sama di menu HP
   - Header HP: hanya satu pencarian (di dalam menu hamburger)
   - Footer: form "Ada Pertanyaan?", Informasi Sekolah, Menu, copyright
   - Tim Pengembang Website di bawah Berita Terbaru
   - Statistik beranda 1 kolom di HP; footer HP garis tegas tanpa blend
   ===================================================================== */

/* ---------- 1. PENCARIAN: ikon di kiri ---------- */
.main-nav .nav-search .nav-search-btn { order: -1; margin: 0; flex: 0 0 40px; }
.main-nav .nav-search input { padding: 0; width: 0; flex: 1 1 0; }
.main-nav .nav-search.is-open input { padding: 0 14px 0 2px; }
@keyframes navSearchOpenLeft {
  from { clip-path: inset(0 calc(100% - 42px) 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}

/* HP: sembunyikan pencarian header, pakai yang ada di menu hamburger */
@media (max-width: 768px) {
  .main-nav .nav-search { display: none !important; }
  .main-nav .theme-toggle { margin-left: auto; }
}

/* Pencarian animasi di menu HP (tampilan & animasi = desktop) */
.menu-panel-search.anim-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 18px 20px 6px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--surface-alt);
  overflow: hidden;
  flex-shrink: 0;
  transition: width .45s var(--ease), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.menu-panel-search.anim-search.is-open {
  width: calc(100% - 40px);
  background: var(--surface);
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .14);
}
.menu-panel-search.anim-search .anim-search-btn {
  order: -1;
  flex: 0 0 42px;
  width: 42px; height: 42px;
  padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--primary);
  display: grid; place-items: center;
  cursor: pointer; font-size: 16px;
  transition: color .25s ease;
}
.menu-panel-search.anim-search.is-open .anim-search-btn,
.menu-panel-search.anim-search .anim-search-btn:hover { color: var(--orange, #ff6b00); background: transparent; }
.menu-panel-search.anim-search input {
  flex: 1 1 0; width: 0; min-width: 0; height: 100%;
  padding: 0; margin: 0;
  border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent; color: var(--ink); font-size: 15px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.menu-panel-search.anim-search.is-open input { opacity: 1; pointer-events: auto; padding: 0 14px 0 2px; transition-delay: .15s; }
.menu-panel-search.anim-search input::placeholder { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
  .menu-panel-search.anim-search, .menu-panel-search.anim-search input { transition: none; }
}

/* ---------- 2. STATISTIK BERANDA: 1 kolom di HP ---------- */
@media (max-width: 600px) {
  .stats-glass .sg-grid { grid-template-columns: 1fr !important; }
}
/* kartu keunggulan di bawah sambutan: beri jarak */
.sambutan-section + .features { padding-top: 0; }
@media (max-width: 768px) {
  .features .grid { grid-template-columns: 1fr !important; }
}

/* ---------- 3. TIM PENGEMBANG WEBSITE ---------- */
.dev-team-section { padding: clamp(36px, 6vw, 64px) 0 clamp(44px, 7vw, 80px); }
.dev-team-heading { text-align: center; margin-left: auto; margin-right: auto; }
.dev-team-heading h2 { margin: 0; }
.dev-team-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: 22px;
}
.dev-team-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(0,0,0,.06));
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.dev-team-card i { color: #0a66c2; font-size: 1.25rem; }
.dev-team-card:hover { transform: translateY(-3px); border-color: var(--orange, #ff6b00); color: var(--orange, #ff6b00); }
.dev-team-thanks {
  max-width: 620px; margin: 22px auto 0;
  text-align: center; font-size: .92rem; line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .dev-team-list { flex-direction: column; align-items: stretch; }
  .dev-team-card { justify-content: center; }
}

/* ---------- 4. FOOTER: form pertanyaan ---------- */
footer .footer-tanya {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  padding-bottom: 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
footer .footer-tanya-intro .tag { color: var(--orange, #ff6b00); }
footer .footer-tanya-intro h2 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 8px 0 12px;
}
footer .footer-tanya-intro p { color: rgba(255, 255, 255, .7); line-height: 1.7; margin: 0; }
.tanya-box {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}
.tanya-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tanya-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tanya-field > span { font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.tanya-field em { color: var(--orange, #ff6b00); font-style: normal; }
.tanya-field input,
.tanya-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .18);
  color: #fff;
  font: inherit; font-size: .95rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tanya-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.tanya-field input::placeholder, .tanya-field textarea::placeholder { color: rgba(255, 255, 255, .4); }
.tanya-field input:focus, .tanya-field textarea:focus {
  border-color: var(--orange, #ff6b00);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, .18);
}
.tanya-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tanya-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tanya-status { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .7); min-height: 1.2em; flex: 1 1 200px; }
.tanya-status.is-ok { color: #6ee7a8; }
.tanya-status.is-error { color: #ffb4a0; }
.tanya-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border: 0; border-radius: 999px;
  background: var(--orange, #ff6b00);
  color: #fff; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.tanya-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tanya-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* ---------- 5. FOOTER: Informasi Sekolah & Menu ---------- */
footer .footer-main-grid { grid-template-columns: 1.4fr 1.3fr 1fr; }
footer .footer-info-list li {
  display: flex; gap: 12px; align-items: flex-start;
  color: rgba(255, 255, 255, .68); line-height: 1.55;
}
footer .footer-info-list li i { flex: 0 0 18px; margin-top: 4px; text-align: center; }
footer .footer-info-list a { padding-left: 0 !important; }
footer .footer-menu-list { columns: 2; column-gap: 20px; }
footer .footer-menu-list li { break-inside: avoid; }
footer .footer-bottom { text-align: center; }
footer .footer-copyright { margin: 0; color: rgba(255, 255, 255, .6); font-size: .9rem; }

@media (max-width: 900px) {
  footer .footer-tanya { grid-template-columns: 1fr; }
  footer .footer-main-grid { grid-template-columns: repeat(2, 1fr); }
  footer .footer-main-grid > .about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tanya-row { grid-template-columns: 1fr; }
  footer .footer-main-grid { grid-template-columns: 1fr; }
  .tanya-btn { width: 100%; justify-content: center; }
}

/* ---------- 6. FOOTER HP & TABLET: garis tegas, tanpa blend ---------- */
@media (max-width: 768px) {
  footer::before,
  body[data-route="beranda"] footer::before { background: none !important; }
  footer,
  body[data-route="beranda"] footer {
    margin-top: 0;
    padding-top: 44px;
    border-top: 3px solid var(--navy-steel, #1e5fcc);
    background: var(--footer-bg);
  }
  footer .footer-tanya,
  footer .grid { border-bottom: 1px solid rgba(255, 255, 255, .16); }
}

/* judul tim pengembang: garis aksen ikut rata tengah */
.dev-team-heading h2::after { margin-left: auto !important; margin-right: auto !important; }
/* footer: cukup satu garis di atas copyright */
footer .footer-main-grid { margin-bottom: 0; }
footer .footer-bottom { border-top: 0 !important; padding-top: 22px; margin-top: 0; }

/* v70: credit glass yang menggunakan warna tema aktif. */
:root {
  --credit-glass-bg: color-mix(in srgb, var(--surface) 64%, transparent);
  --credit-glass-border: color-mix(in srgb, var(--primary-light) 24%, var(--card-border));
  --credit-glass-highlight: color-mix(in srgb, var(--surface) 80%, transparent);
  --footer-map-border: color-mix(in srgb, var(--on-dark) 18%, transparent);
}
.dev-team-glass {
  max-width: 850px;
  margin: 0 auto;
  padding: 36px 32px;
  border: 1px solid var(--credit-glass-border);
  border-radius: var(--radius);
  background: var(--credit-glass-bg);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--credit-glass-highlight);
}
.dev-team-glass .dev-team-card { background: transparent; border: 0; box-shadow: none; border-radius: 8px; }
.dev-team-glass .dev-team-card i { color: var(--primary); }
.journalist-credit {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  max-width: 390px;
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--credit-glass-border);
  color: var(--ink);
  text-decoration: none;
}
.journalist-credit img { width: 72px; height: 72px; object-fit: contain; }
.journalist-credit > span { min-width: 0; }
.journalist-credit small, .journalist-credit strong, .journalist-handle { display: block; }
.journalist-credit small { color: var(--text-muted); font-size: .8rem; }
.journalist-credit strong { font-family: var(--font-display); font-size: 1rem; margin: 4px 0 6px; }
.journalist-handle { color: var(--primary); font-size: .82rem; overflow-wrap: anywhere; }
.journalist-credit:hover .journalist-handle { color: var(--orange); }
.journalist-credit:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; }
footer .footer-tanya { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.footer-map-column, .footer-contact-column { min-width: 0; }
.footer-contact-column .tanya-box { margin-top: 24px; }
.footer-school-map { height: 320px; margin-top: 24px; border-radius: 8px; overflow: hidden; border: 1px solid var(--footer-map-border); background: var(--surface); }
.footer-school-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.footer-map-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--on-dark); font-size: .9rem; text-decoration: none; }
.footer-map-link:hover { color: var(--orange); }
footer .footer-contact-column .footer-tanya-intro h2, footer .footer-map-column .footer-tanya-intro h2 { font-size: 1.8rem; }
@media (max-width: 900px) {
  footer .footer-tanya { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dev-team-glass { padding: 28px 18px; }
  .dev-team-glass h2 { font-size: 1.35rem; overflow-wrap: anywhere; }
  .footer-school-map { height: 280px; }
  .journalist-credit { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-team-card { transition: none; }
  .dev-team-card:hover { transform: none; }
}

/* E-Learning desktop tampil sebagai item menu yang sama dengan tautan lain. */
nav.primary-menu .dropdown-content .elearning-link-btn {
  display: block; width: 100%; padding: 12px 18px; border: 0;
  border-radius: var(--radius-sm); background: transparent;
  color: var(--text-dark); font: inherit; font-size: 14.5px;
  text-align: left; cursor: pointer;
}
nav.primary-menu .dropdown-content .elearning-link-btn:hover,
nav.primary-menu .dropdown-content .elearning-link-btn:focus-visible {
  background: var(--surface-alt); color: var(--primary);
}

/* ===================== [splash.css] ===================== */
/* ============ TOKENS ============ */
.amga-opening {
  /* palette: navy + royal blue + gold (matches the school logo) */
  --background: oklch(0.17 0.06 258);
  --foreground: oklch(0.985 0.005 250);
  --primary: oklch(0.83 0.16 86);
  --primary-foreground: oklch(0.2 0.06 258);
  --secondary: oklch(0.3 0.09 258);
  --secondary-foreground: oklch(0.985 0.005 250);
  --muted-foreground: oklch(0.86 0.02 250);
  --accent: oklch(0.87 0.14 90);
  --accent-foreground: oklch(0.17 0.06 258);
  --border: oklch(1 0 0 / 0.18);
  --ring: oklch(0.83 0.16 86);
  --amga-blue: oklch(0.6 0.2 258);
  --amga-success: oklch(0.79 0.14 160);
  --amga-danger: oklch(0.78 0.14 25);
  --amga-photo-overlay: linear-gradient(180deg, oklch(0.17 0.06 258 / 0.55), oklch(0.17 0.06 258 / 0.72) 70%, var(--background));
  --amga-shadow: 0 12px 28px oklch(0.08 0.03 255 / 0.25);
  --amga-font: 'Poppins', 'Segoe UI', Arial, sans-serif;

  /* glass tokens */
  --amga-glass: oklch(0.98 0.01 250 / 0.08);
  --amga-glass-strong: oklch(0.22 0.06 258 / 0.78);
  --amga-glass-border: oklch(1 0 0 / 0.24);
  --amga-glass-highlight: oklch(1 0 0 / 0.14);
  --amga-blur: 24px;

  /* fluid sizing */
  --slot-w: clamp(38px, 11.5vw, 48px);
  --slot-h: clamp(44px, 12.5vw, 52px);
  --space-x: clamp(16px, 4vw, 40px);
}

/* ============ BASE LAYOUT ============ */
.amga-opening,
.amga-opening *,
.amga-opening *::before,
.amga-opening *::after { box-sizing: border-box; }

.amga-opening {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-bottom: calc(clamp(14px, 3vw, 32px) + env(safe-area-inset-bottom, 0px));
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0;
  background: var(--background);
  color: var(--foreground);
  -webkit-text-size-adjust: 100%;
}

.amga-backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* overlay + ambient colour blobs (gives the glass something to blur) */
.amga-shade {
  position: absolute; inset: 0;
  background: var(--amga-photo-overlay);
  overflow: hidden;
}
.amga-shade::before,
.amga-shade::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55; pointer-events: none;
}
.amga-shade::before {
  width: min(420px, 70vw); aspect-ratio: 1;
  top: 18%; left: 4%;
  background: var(--amga-blue); opacity: .6;
}
.amga-shade::after {
  width: min(380px, 65vw); aspect-ratio: 1;
  bottom: 10%; right: 6%;
  background: var(--primary); opacity: .22;
}

/* ============ HEADER ============ */
.amga-header {
  position: relative; z-index: 2;
  width: 100%; max-width: none; margin: 0;
  padding: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-top, 0px)) calc(var(--space-x) + env(safe-area-inset-right, 0px)) clamp(12px, 2vw, 20px) calc(var(--space-x) + env(safe-area-inset-left, 0px));
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  animation: amga-enter .7s both;
}
.amga-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.amga-brand img { width: 38px; height: 44px; object-fit: contain; flex-shrink: 0; }
.amga-brand strong { display: block; font-family: var(--amga-font); font-size: 13px; }
.amga-brand small { display: block; color: var(--muted-foreground); font-size: 11px; margin-top: 4px; }
.amga-location { display: flex; gap: 8px; align-items: center; color: var(--foreground); font-size: 13px; font-weight: 500; text-align: right; }
.amga-location i { color: var(--accent); font-size: 15px; }

/* ============ WELCOME = GLASS CARD ============ */
.amga-welcome {
  position: relative; z-index: 1;
  width: min(690px, calc(100% - 2 * var(--space-x)));
  margin: auto;                       /* centres vertically + horizontally in the flex column */
  padding: clamp(24px, 5vw, 44px) clamp(18px, 5vw, 44px) clamp(26px, 4.5vw, 40px);
  text-align: center;

  background:
    linear-gradient(135deg, var(--amga-glass-highlight), transparent 45%),
    var(--amga-glass);
  border: 1px solid var(--amga-glass-border);
  border-radius: clamp(20px, 4vw, 28px);
  box-shadow:
    0 24px 60px oklch(0.05 0.04 258 / 0.4),
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    inset 0 -1px 0 oklch(1 0 0 / 0.05);
  -webkit-backdrop-filter: blur(var(--amga-blur)) saturate(150%);
          backdrop-filter: blur(var(--amga-blur)) saturate(150%);
  animation: amga-enter .8s .05s both;
}
/* soft light edge */
.amga-welcome::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, oklch(1 0 0 / 0.45), transparent 35%, transparent 65%, oklch(1 0 0 / 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .amga-welcome { background: var(--amga-glass-strong); }
}

.welcome-logo {
  display: block;
  width: clamp(56px, 14vw, 74px); height: auto; aspect-ratio: 74 / 82;
  margin: 0 auto clamp(14px, 3vw, 20px); object-fit: contain;
  filter: drop-shadow(0 8px 18px oklch(0.05 0.03 255 / 0.4));
  animation: amga-enter .7s .1s both, logo-breathe 4s 1s ease-in-out infinite;
}
.amga-eyebrow { font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 14px; letter-spacing: .08em; }
.amga-welcome h1 {
  font-family: var(--amga-font);
  font-size: clamp(24px, 6.2vw, 36px); line-height: 1.3;
  margin: 0 auto 16px; font-weight: 700; text-wrap: balance;
  overflow-wrap: anywhere;
}
.amga-greeting {
  max-width: 490px; margin: 0 auto;
  font-size: clamp(12.5px, 3.2vw, 14px); line-height: 1.8;
  color: var(--muted-foreground);
}

.amga-reveal { animation: amga-enter .75s both; }
.amga-reveal:nth-child(3) { animation-delay: .2s; }
.amga-reveal:nth-child(4) { animation-delay: .3s; }
.amga-reveal:nth-child(5) { animation-delay: .4s; }

/* ============ WEATHER ============ */
.amga-weather {
  margin: clamp(18px, 3vw, 24px) auto 14px; padding: 16px 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 8px 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: left;
}
.amga-weather-icon { font-size: 32px; line-height: 1; flex-shrink: 0; animation: logo-breathe 5s infinite; }
.weather-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.weather-location { display: block; margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.weather-detail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.weather-description { margin: 0; font-size: 12px; color: var(--muted-foreground); text-align: left; }
.weather-temp { font-family: var(--amga-font); font-size: clamp(22px, 5vw, 26px); margin-left: 0; }
.amga-datetime { color: var(--muted-foreground); font-size: 11px; margin: 12px 0 clamp(20px, 4vw, 28px); }

/* ============ PUZZLE ============ */
.amga-puzzle { animation: amga-enter .8s .5s both; }
.puzzle-heading {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 7px; margin: 0 0 14px; color: var(--foreground); font-size: 13px; font-weight: 500;
}
.puzzle-heading svg { width: 14px; color: var(--accent); }
.puzzle-heading strong { color: var(--accent); }

.letter-slots, .letter-bank { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(6px, 1.8vw, 8px); }
.letter-slot {
  width: var(--slot-w); height: var(--slot-h);
  position: relative; display: grid; place-items: center;
  border: 1px dashed var(--amga-glass-border); border-radius: 8px;
  font-family: var(--amga-font); font-size: clamp(17px, 4.6vw, 21px);
  color: var(--foreground);
  background: oklch(0.15 0.04 255 / 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.letter-slot .letter-button { width: 100%; height: 100%; border: 1px solid var(--accent); }
.letter-slot.empty::after { content: ''; width: 12px; height: 2px; background: var(--border); }

.letter-bank { margin: 15px 0 12px; }
.letter-button {
  width: var(--slot-w); height: calc(var(--slot-h) - 4px); min-height: 44px; padding: 0;
  border: 1px solid var(--amga-glass-border); border-radius: 8px;
  background: oklch(0.35 0.09 258 / 0.55); color: var(--foreground);
  font: 600 clamp(16px, 4.4vw, 19px) var(--amga-font);
  box-shadow: var(--amga-shadow);
  transition: transform .2s, background .2s, border-color .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.letter-button:active { transform: scale(.94); }
.letter-button:disabled { opacity: .22; }
.puzzle-tool {
  background: transparent; color: var(--muted-foreground); border: 0;
  width: 44px; height: 44px; min-height: 44px; padding: 10px; box-shadow: none;
}
.puzzle-feedback {
  min-height: 24px; margin: 0; display: flex; justify-content: center; align-items: center;
  gap: 6px; color: var(--muted-foreground); font-size: 11px; text-wrap: balance;
}
.puzzle-feedback.success { color: var(--amga-success); }
.puzzle-feedback.error { color: var(--amga-danger); }
.puzzle-controls { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; }

/* ============ BUTTON ============ */
.amga-button {
  background: var(--primary); color: var(--primary-foreground);
  border: 1px solid var(--primary); border-radius: 10px;
  font-weight: 600; min-height: 48px; padding: 0 25px;
  box-shadow: var(--amga-shadow), 0 0 0 0 transparent;
  transition: transform .2s, background .2s, box-shadow .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.amga-button:active { transform: scale(.98); }
.amga-button:disabled { opacity: .3; }
.entry-button { margin-top: 15px; min-width: min(225px, 100%); }

/* hover only on devices that really hover (avoids sticky hover on touch) */
@media (hover: hover) {
  .letter-button:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--accent); background: var(--amga-blue); }
  .puzzle-tool:hover { color: var(--accent); background: oklch(1 0 0 / 0.08); }
  .amga-button:hover:not(:disabled) { transform: translateY(-2px); background: oklch(0.89 0.15 90); border-color: oklch(0.89 0.15 90); box-shadow: var(--amga-shadow), 0 8px 24px oklch(0.83 0.16 86 / 0.35); }
}

/* ============ FOOTER ============ */
.amga-footer {
  position: relative; z-index: 1;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 20px var(--space-x) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  color: var(--muted-foreground); font-size: 10px; text-align: center;
  animation: amga-enter .9s .7s both;
}
.amga-footer span { display: flex; align-items: center; gap: 5px; }
.amga-footer svg { width: 12px; height: 12px; color: var(--accent); }

/* ============ LOADING VIEW ============ */
.loading-view {
  position: fixed; z-index: 30; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--background); text-align: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; color: var(--foreground);
  overflow-y: auto;
}
.loading-view .amga-eyebrow { margin-top: 36px; }
.loading-view h2 { font-family: var(--amga-font); font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; margin: 0 0 12px; text-wrap: balance; }
.loading-status { font-size: 12px; color: var(--muted-foreground); }

.orbit-scene { width: min(320px, 80vw); aspect-ratio: 1; height: auto; position: relative; display: grid; place-items: center; animation: amga-enter .7s both; }
.orbit-logo { width: 26%; height: auto; aspect-ratio: 83 / 94; object-fit: contain; animation: logo-breathe 2.5s ease-in-out infinite; }
.orbit-ring { position: absolute; border: 1px solid var(--border); border-radius: 50%; }
.orbit-ring.inner  { width: 44%; height: 44%; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); animation: orbit-spin 5s linear infinite; }
.orbit-ring.middle { width: 58%; height: 58%; border-right: 2px solid var(--amga-blue); border-left: 2px solid var(--primary); animation: orbit-spin 9s linear infinite reverse; }
.orbit-ring.outer  { width: 86%; height: 86%; border-style: dashed; opacity: .6; }

.department-orbit { position: absolute; inset: 0; animation: orbit-spin 32s linear infinite; }
.department-position { position: absolute; inset: 0; transform: rotate(var(--orbit-angle)); }
.department-icon {
  position: absolute; left: calc(50% - 22px); top: 2px; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--amga-glass-border); background: oklch(0.28 0.055 252 / 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--accent); transform: rotate(calc(-1 * var(--orbit-angle)));
}
.department-icon svg { width: 21px; height: 21px; animation: orbit-spin 32s linear infinite reverse; }
.department-position:nth-child(3n+2) .department-icon { color: var(--amga-blue); }
.department-position:nth-child(3n) .department-icon { color: var(--primary); }
.department-position:nth-child(1) { --orbit-angle: 0deg; }
.department-position:nth-child(2) { --orbit-angle: 40deg; }
.department-position:nth-child(3) { --orbit-angle: 80deg; }
.department-position:nth-child(4) { --orbit-angle: 120deg; }
.department-position:nth-child(5) { --orbit-angle: 160deg; }
.department-position:nth-child(6) { --orbit-angle: 200deg; }
.department-position:nth-child(7) { --orbit-angle: 240deg; }
.department-position:nth-child(8) { --orbit-angle: 280deg; }
.department-position:nth-child(9) { --orbit-angle: 320deg; }

.loading-track { width: 160px; height: 2px; overflow: hidden; background: var(--border); margin: 24px auto; }
.loading-track::after { content: ''; display: block; width: 50%; height: 100%; background: var(--accent); animation: loading-slide 1.5s ease-in-out infinite; }

/* compact orbit used inside the loading view */
.loading-view .orbit-scene { width: 160px; }
.loading-view .orbit-logo { width: 42px; }
.loading-view .department-icon { width: 24px; height: 24px; left: calc(50% - 12px); }
.loading-view .department-icon svg { width: 12px; height: 12px; }
.loading-view .loading-status { margin-top: 22px; }

.legacy-site { display: block; width: 100%; height: 100vh; height: 100svh; border: 0; background: var(--background); }

/* ============ KEYFRAMES ============ */
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes logo-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes amga-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loading-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ============ BREAKPOINTS ============ */
/* large / tall screens */

/* tablets & phones */
@media (max-width: 600px) {
  .amga-location { font-size: 11px; max-width: 118px; line-height: 1.3; gap: 6px; }
  .amga-location i { font-size: 13px; }
  .amga-brand strong { font-size: 12px; }
  .amga-weather { gap: 8px 12px; }
  .weather-temp { margin-left: 0; }
  .weather-location { font-size: 9px; }
  .amga-datetime { font-size: 10px; }
  .amga-footer { font-size: 9px; gap: 6px 13px; }
  .entry-button { width: 100%; }
  :where(.amga-opening) { --amga-blur: 16px; }   /* lighter blur = smoother on mobile GPUs */
}

/* very small phones (≤ 360px) */
@media (max-width: 360px) {
  .amga-welcome { width: calc(100% - 24px); padding-inline: 14px; }
  .amga-header { padding-inline: 14px; }
  .amga-weather { flex-direction: row; text-align: left; }
}

/* landscape phones / short viewports */
@media (max-height: 600px) {
  .amga-header { padding-block: 12px 8px; }
  .amga-welcome { margin-block: 8px 16px; padding-block: 18px; }
  .welcome-logo { width: 44px; margin-bottom: 8px; }
  .amga-greeting { display: none; }
  .amga-weather { margin-block: 12px 8px; padding-block: 10px; }
  .amga-datetime { margin-bottom: 14px; }
  .amga-footer { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .amga-opening *, .loading-view * { animation: none !important; transition: none !important; }
  .loading-track::after { width: 100%; }
}

/* ============ PORTABLE OVERLAY ============ */
.amga-opening.portable-opening {
  position: fixed; inset: 0; z-index: 10001;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity .3s ease;
}
.portable-opening.splash-hidden { opacity: 0; pointer-events: none; }
.amga-opening button { cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.amga-opening button:disabled { cursor: default; }
.amga-opening button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.amga-opening .letter-slot button { font: 600 clamp(16px, 4.4vw, 19px) var(--amga-font); }
.amga-opening .welcome-logo { display: block; }

/* isolate welcome bands from legacy header/footer selectors */
.amga-opening .amga-header { position: relative; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--foreground); }
.amga-opening .amga-header::before, .amga-opening .amga-header::after { content: none; }
.amga-opening .amga-footer { background: transparent; border: 0; border-top: 1px solid var(--border); box-shadow: none; margin: 0; }
.amga-opening .amga-footer::before, .amga-opening .amga-footer::after { content: none; }
.amga-opening .puzzle-heading i, .amga-opening .puzzle-tool i { color: var(--accent); }

/* ===== Countdown sambutan (pengganti pemilih bulan) ===== */
.splash-countdown { --dial: min(240px, 62vw); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vw, 18px); width: 100%; }
.splash-countdown .puzzle-heading { margin: 0; text-align: center; }
.cd-dial { position: relative; width: var(--dial); aspect-ratio: 1; margin: clamp(10px, 2.4vw, 16px) 0; }
.cd-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cd-track, .cd-bar { fill: none; stroke-width: 5; }
.cd-track { stroke: var(--border); }
.cd-bar { stroke: url(#cdGrad); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; filter: drop-shadow(0 0 8px oklch(0.87 0.14 90 / .55)); }
.splash-countdown.run .cd-bar { animation: cd-fill var(--cd-dur, 5s) linear forwards; }
.splash-countdown.is-done .cd-bar { animation: none; stroke-dashoffset: 0; }
.cd-dash { position: absolute; inset: -9%; border: 1px dashed var(--amga-glass-border); border-radius: 50%; animation: cd-spin 24s linear infinite; }
.cd-dash::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cd-center { position: absolute; inset: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; background: radial-gradient(circle, oklch(1 0 0 / .12), oklch(1 0 0 / .02) 72%); }
.cd-num { font: 700 calc(var(--dial) * .34) var(--amga-font); line-height: 1; color: var(--foreground); }
.cd-num.pop { animation: cd-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
.cd-unit { font-size: clamp(10px, calc(var(--dial) * .055), 13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.splash-countdown.is-done .cd-num { color: var(--amga-success); }
.cd-message { width: 100%; min-height: 5.2em; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(12.5px, 3.3vw, 14px); line-height: 1.7; color: var(--foreground); }
.cd-message p { margin: 0; max-width: 42ch; text-wrap: balance; animation: amga-enter .7s both; }
.cd-message small { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.splash-countdown .entry-button { width: min(260px, 100%); }
.entry-button.is-ready { animation: cd-pulse 1.6s ease-in-out 2; }
@keyframes cd-fill { from { stroke-dashoffset: 326.7; } to { stroke-dashoffset: 0; } }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@keyframes cd-pop { from { transform: scale(.6); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes cd-pulse { 50% { box-shadow: var(--amga-shadow), 0 0 0 9px oklch(0.83 0.16 86 / .25); } }
@media (max-height: 560px) and (max-width: 899px) { .splash-countdown { --dial: min(190px, 52vw); } .cd-message { min-height: 4.4em; } }

/* ===== v75: layout satu kolom di tengah (semua ukuran layar), tema kaca tetap ===== */
.amga-opening .amga-header { display: none; }
.amga-welcome {
  margin-block: clamp(16px, 4vh, 40px);
  padding: clamp(22px, 4vh, 38px) clamp(18px, 5vw, 44px) clamp(22px, 3.6vh, 34px);
}
.welcome-logo { width: clamp(52px, 9vh, 72px); margin-bottom: clamp(10px, 2vh, 16px); }
.amga-eyebrow { margin-bottom: 8px; }
.amga-welcome h1 { font-size: clamp(24px, 4.4vw, 34px); margin-bottom: 12px; }
.amga-greeting { max-width: 520px; }
.amga-weather { margin: clamp(14px, 2.4vh, 20px) auto 10px; padding: 12px 0; justify-content: center; }
.amga-datetime { margin: 8px 0 clamp(12px, 2.4vh, 20px); }
.splash-countdown { --dial: clamp(116px, 22vh, 168px); gap: clamp(8px, 1.6vh, 14px); }
.cd-dial { margin: clamp(6px, 1.4vh, 12px) 0; }
.cd-message { min-height: 4.6em; }
.splash-countdown .entry-button { width: min(320px, 100%); margin-top: 4px; }
@media (max-width: 600px) {
  /* ringan di HP: tanpa blob blur besar, blur kaca lebih kecil */
  .amga-shade::before, .amga-shade::after { filter: none; opacity: .35; }
  .amga-shade::before { background: radial-gradient(circle, var(--amga-blue), transparent 68%); }
  .amga-shade::after { background: radial-gradient(circle, var(--primary), transparent 68%); opacity: .16; }
  .cd-dash { animation: none; }
  :where(.amga-opening) { --amga-blur: 12px; }
}
@media (max-height: 640px) {
  .amga-greeting { display: none; }
  .cd-message { min-height: 3.6em; }
}

/* v75b: muat satu layar di laptop (tinggi ~650px) */
@media (min-width: 601px) { .amga-welcome h1 br { display: none; } }
.amga-welcome { margin-block: clamp(8px, 2vh, 24px); padding-block: clamp(16px, 3vh, 34px); }
.welcome-logo { width: clamp(44px, 7.5vh, 68px); margin-bottom: clamp(6px, 1.4vh, 14px); }
.amga-weather { padding: clamp(6px, 1.2vh, 12px) 0; margin-block: clamp(10px, 1.8vh, 18px) 6px; }
.amga-datetime { margin-bottom: clamp(8px, 1.6vh, 16px); }
.splash-countdown { --dial: clamp(84px, 13vh, 118px); gap: clamp(6px, 1.2vh, 12px); }
.cd-message { min-height: 4.2em; }

.amga-button:disabled{opacity:1}

/* ===== v77: ikon cuaca dikembalikan ke emoji dari API (plek ketiplek v65),
   menggantikan SVG custom yang bentuknya kurang cocok — markup & CSS lain
   di sekitarnya (kartu kaca, layout) tetap seperti v76/v77. */

/* ===== v77: sedikit pattern pembeda dari v76, sangat halus (tidak mengubah
   nuansa kaca navy-gold v76) — titik-titik tipis menyapu lembut di overlay
   kartu, supaya splash v77 tetap terasa beda walau sekilas sama dengan v76. */
.amga-welcome {
  background-color: var(--amga-glass);
  background-image:
    radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1.6px),
    linear-gradient(135deg, var(--amga-glass-highlight), transparent 45%);
  background-size: 15px 15px, auto;
  background-position: 0 0, 0 0;
  animation: amga-enter .8s .05s both, amga-pattern-drift 26s linear infinite;
}
@keyframes amga-pattern-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 90px 90px, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .amga-welcome { animation: amga-enter .8s .05s both; }
}

/* ===================== [amga-transition.css] ===================== */
/* Compact loader: logo → rotating rings → nine department icons. */
:root { --orbit-surface:var(--surface); --orbit-ink:var(--ink); --orbit-gold:var(--gold-deep); --orbit-blue:var(--navy-steel); --orbit-border:var(--hairline); }
.section-transition,.section-transition.is-active { background:var(--orbit-surface); backdrop-filter:none; -webkit-backdrop-filter:none; transition:opacity .18s ease,visibility .18s ease; }
.amga-mini-orbit { width:160px; height:160px; position:relative; display:grid; place-items:center; }
.amga-mini-logo { width:42px; height:48px; object-fit:contain; animation:amgaMiniPulse 2s ease-in-out infinite; }
.amga-mini-ring { position:absolute; border:1px solid var(--orbit-border); border-radius:50%; }
.amga-mini-ring.inner { width:72px; height:72px; border-top:2px solid var(--orbit-gold); border-bottom:2px solid var(--orbit-gold); animation:amgaMiniSpin 4s linear infinite; }
.amga-mini-ring.middle { width:94px; height:94px; border-left:2px solid var(--orbit-blue); border-right:2px solid var(--orbit-gold); animation:amgaMiniSpin 7s linear infinite reverse; }
.amga-mini-ring.outer { width:138px; height:138px; border-style:dashed; }
.amga-mini-departments { position:absolute; inset:0; animation:amgaMiniSpin 18s linear infinite; }
.amga-mini-position { position:absolute; inset:0; transform:rotate(var(--angle)); }
.amga-mini-icon { position:absolute; top:0; left:calc(50% - 12px); width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--orbit-border); border-radius:50%; background:var(--surface-alt); color:var(--orbit-gold); transform:rotate(calc(-1 * var(--angle))); }
.amga-mini-icon i { font-size:11px; animation:amgaMiniSpin 18s linear infinite reverse; }
.amga-mini-position:nth-child(3n+2) .amga-mini-icon { color:var(--orbit-blue); }
.amga-mini-position:nth-child(1) { --angle:0deg; }
.amga-mini-position:nth-child(2) { --angle:40deg; }
.amga-mini-position:nth-child(3) { --angle:80deg; }
.amga-mini-position:nth-child(4) { --angle:120deg; }
.amga-mini-position:nth-child(5) { --angle:160deg; }
.amga-mini-position:nth-child(6) { --angle:200deg; }
.amga-mini-position:nth-child(7) { --angle:240deg; }
.amga-mini-position:nth-child(8) { --angle:280deg; }
.amga-mini-position:nth-child(9) { --angle:320deg; }
@keyframes amgaMiniSpin { to { transform:rotate(360deg); } }
@keyframes amgaMiniPulse { 50% { transform:scale(1.06); } }
@media(prefers-reduced-motion:reduce) { .amga-mini-orbit * { animation:none; } }
html[data-motion="reduced"] .amga-mini-orbit * { animation:none; }

/* ===================== [update-v73.css] ===================== */
/* =====================================================================
   v73 — header sejajar menu, font menu lebih besar, dropdown, hero lebih halus,
   kartu tujuan & statistik satu tema. Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) Logo/judul kiri atas sejajar dengan menu ---------- */
@media (min-width: 769px) {
  .main-nav > .container.flex { max-width: none !important; padding: 0 20px !important; }
  .main-nav .logo-wrap { margin-left: 0; padding-left: 0; }
}
@media (min-width: 1440px) {
  .main-nav > .container.flex { padding: 0 32px !important; }
}

/* ---------- 2) Font menu sedikit lebih besar ---------- */
@media (min-width: 769px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger {
    font-size: clamp(13px, 1.12vw, 16px);
  }
  nav.primary-menu .dropdown-content a,
  nav.primary-menu .dropdown-content .elearning-link-btn {
    font-size: 16px;
    padding: 12px 18px;
  }
  nav.primary-menu .dropdown-content { min-width: 290px; }
  nav.primary-menu .dropdown-content--right { min-width: 230px; }
}
/* tanda panah pada menu yang punya submenu */
.nav-caret, nav.primary-menu .nav-links-trigger i {
  font-size: .62em; opacity: .85; transition: transform .2s ease;
}
nav.primary-menu .dropdown.dropdown-open > a .nav-caret,
nav.primary-menu .dropdown.dropdown-open > .nav-links-trigger i { transform: rotate(180deg); }

/* ---------- 3) Garis di bawah statistik hero: putih ---------- */
.hero-stats > div::before {
  background: #fff;
  opacity: .92;
}

/* ---------- 4) Perpaduan warna hero ke section di bawahnya: lebih halus ---------- */
:root .hero .hero-grid-blur,
:root:not([data-theme="light"]) .hero .hero-grid-blur,
:root[data-theme="dark"] .hero .hero-grid-blur,
:root .page-banner .page-banner-grid-blur,
:root:not([data-theme="light"]) .page-banner .page-banner-grid-blur,
:root[data-theme="dark"] .page-banner .page-banner-grid-blur,
:root .spmb-grid-blur,
:root:not([data-theme="light"]) .spmb-grid-blur,
:root[data-theme="dark"] .spmb-grid-blur {
  /* tanpa lapisan navy abu-abu: hanya blur lembut yang memudar bertahap */
  background: none !important;
  -webkit-backdrop-filter: blur(9px) saturate(110%) !important;
          backdrop-filter: blur(9px) saturate(110%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.86) 84%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.86) 84%, #000 100%);
}
.hero::after {
  background: linear-gradient(
    180deg,
    rgba(var(--section-bg-rgb), 0)    calc(100% - var(--hero-fade)),
    rgba(var(--section-bg-rgb), .02)  calc(100% - var(--hero-fade) * .90),
    rgba(var(--section-bg-rgb), .07)  calc(100% - var(--hero-fade) * .78),
    rgba(var(--section-bg-rgb), .16)  calc(100% - var(--hero-fade) * .66),
    rgba(var(--section-bg-rgb), .30)  calc(100% - var(--hero-fade) * .54),
    rgba(var(--section-bg-rgb), .48)  calc(100% - var(--hero-fade) * .42),
    rgba(var(--section-bg-rgb), .66)  calc(100% - var(--hero-fade) * .30),
    rgba(var(--section-bg-rgb), .84)  calc(100% - var(--hero-fade) * .18),
    rgba(var(--section-bg-rgb), .95)  calc(100% - var(--hero-fade) * .08),
    rgba(var(--section-bg-rgb), 1)    100%
  );
}

/* ---------- 5) Kartu tujuan (.feature-card) & statistik (.sg-card): satu tema ---------- */
.features,
.stats-glass {
  background: rgba(var(--section-bg-rgb), 1);
  padding: var(--section-pad, 64px) 0;
  color: inherit;
}
.sambutan-section + .features { padding-top: 24px; }
.stats-glass { isolation: auto; }
.stats-glass .sg-orb { display: none; }

.features .section-heading,
.stats-glass .section-heading { margin-bottom: 28px; }

.sg-card {
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px -12px rgba(11, 37, 69, 0.18);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--text-dark);
}
.sg-card:hover {
  transform: translateY(-5px);
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.sg-icon {
  width: 52px; height: 52px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--sky);
  color: var(--navy-steel);
  font-size: 21px;
}
.sg-card:hover .sg-icon { background: var(--orange); color: #fff; transform: rotate(-6deg) scale(1.06); }
.sg-num { color: var(--navy); font-size: 2rem; }
.sg-label { color: var(--text-muted); font-size: .98rem; font-weight: 600; }
.sg-hint { color: var(--navy-steel); }

/* ===================== [update-v75.css] ===================== */
/* =====================================================================
   v75 — kartu glassmorphism (tanpa animasi), hero lebih lembut, footer,
   teks mode malam, dan optimasi responsif/ringan untuk HP.
   Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) "Komitmen Kami" & "Sekolah dalam Angka": satu tema (band navy + kartu kaca) ---------- */
.features, .stats-glass {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 64px 0;
  background: linear-gradient(160deg, var(--navy-steel-fixed, #1e4d8f) 0%, var(--navy) 100%);
  color: #fff;
}
.sambutan-section + .features { padding-top: 64px; }
.features .sg-orb, .stats-glass .sg-orb { display: block; }
.features .section-heading h2, .stats-glass .section-heading h2 { color: #fff; }
.features .section-heading p, .stats-glass .section-heading p { color: rgba(255,255,255,.82); }
.features .section-heading .tag, .stats-glass .section-heading .tag { color: var(--gold-soft, #ffd466); }
.features .section-heading, .stats-glass .section-heading { margin-bottom: 32px; }

.features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-top: 0; }
.sg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }

.feature-card, .sg-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px; height: 100%;
  padding: 30px 20px;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px -18px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  color: #fff; text-decoration: none; overflow: hidden;
}
.feature-card::before, .sg-card::before { display: none; }
.feature-card:hover, .sg-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
.feature-card .icon, .sg-icon {
  width: 44px; height: 44px; margin: 0 0 4px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--orange, #ff6b00); color: #fff; font-size: 18px;
  animation: none;
}
.feature-card:hover .icon, .sg-card:hover .sg-icon { background: var(--orange, #ff6b00); color: #fff; transform: none; }
.feature-card p { margin: 0; color: rgba(255,255,255,.92); font-size: 14.5px; font-weight: 500; line-height: 1.7; }
.sg-num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2rem; color: #fff; }
.sg-label { font-family: 'Poppins', sans-serif; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.9); }
.sg-hint { font-family: 'Poppins', sans-serif; font-size: .82rem; font-weight: 600; color: #fff; opacity: 1; transform: none; }

/* ---------- 2) Menu dropdown: panel & panah ---------- */
nav.primary-menu .dropdown > a,
nav.primary-menu .dropdown > .nav-links-trigger { cursor: pointer; }
nav.primary-menu .dropdown-content {
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
nav.primary-menu .dropdown.dropdown-open > a,
nav.primary-menu .dropdown.dropdown-open > .nav-links-trigger { background: rgba(255,255,255,.14); }

/* ---------- 3) Hero: tampilan awal dipertahankan; garis statistik diberi jarak ---------- */
.hero-stats > div::before { width: calc(100% - 22px); }
.hero.hero-static::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/hero-video-poster.jpg") center / cover;
  opacity: .16; mix-blend-mode: luminosity;
}

/* ---------- 3b) Menu lebih kecil ---------- */
@media (min-width: 769px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger { font-size: clamp(12px, .9vw, 14px); }
  nav.primary-menu .dropdown-content a,
  nav.primary-menu .dropdown-content .elearning-link-btn { font-size: 14px; padding: 10px 16px; }
}
/* Header tetap solid (tidak transparan/blur) baik diam maupun saat discroll,
   supaya logo & teks "SMK N 1 AMPELGADING" selalu terbaca jelas. */
header { transition: box-shadow .3s ease; }

/* ---------- 4) Footer: tanpa tombol cari melayang, hak cipta rata tengah ---------- */
.search-fab { display: none !important; }
.footer-bottom { display: flex; justify-content: center; text-align: center; }
.footer-bottom .footer-copyright { width: 100%; margin: 0 auto; text-align: center; }

/* ---------- 5) Mode malam: judul "Berita Terkini" & "Tim Pengembang" otomatis putih ---------- */
:root[data-theme="dark"] .news-section .section-heading .tag,
:root[data-theme="dark"] .news-section .section-heading h2,
:root[data-theme="dark"] .news-section .section-heading p,
:root[data-theme="dark"] [data-page="berita"] .eyebrow,
:root[data-theme="dark"] .dev-team-section h2,
:root[data-theme="dark"] .dev-team-heading h2,
:root[data-theme="dark"] .dev-team-thanks,
:root[data-theme="dark"] .dev-team-thanks strong { color: #fff !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .news-section .section-heading .tag,
  :root:not([data-theme="light"]) .news-section .section-heading h2,
  :root:not([data-theme="light"]) .news-section .section-heading p,
  :root:not([data-theme="light"]) [data-page="berita"] .eyebrow,
  :root:not([data-theme="light"]) .dev-team-section h2,
  :root:not([data-theme="light"]) .dev-team-heading h2,
  :root:not([data-theme="light"]) .dev-team-thanks,
  :root:not([data-theme="light"]) .dev-team-thanks strong { color: #fff !important; }
}

/* ---------- 6) Responsif & ringan ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }

@media (max-width: 900px) {
  .features .grid { grid-template-columns: 1fr; gap: 14px; }
  .sg-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
  .sg-card { padding: 20px 16px; }
  .sg-num { font-size: 1.6rem; }
  .feature-card { padding: 22px 18px; }
  .features, .stats-glass { padding: 48px 0; }
  .feature-card, .sg-card { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  /* matikan efek berat yang tidak perlu di HP */
  .live-bg *, .hero-glow { animation: none !important; }
  .hero-glow { display: none; }
  .hero-grid { animation: none !important; will-change: auto; }
  .hero { min-height: 0; }
  header, .main-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* bagian bawah layar dirender saat mendekati viewport saja */
  .profile-section, .news-section, .dev-team-section, .location-section {
    content-visibility: auto; contain-intrinsic-size: auto 560px;
  }
}
@media (max-width: 360px) {
  .sg-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  .hero-grid, .hero-glow { animation: none !important; }
}

/* ===================== [update-v76.css] ===================== */
/* =====================================================================
   v76 — (1) kotak biru HANYA membungkus kartu kaca; judul di luar kotak
         (2) splash: kartu turun ke tengah layar
         (3) responsif + ringan di HP
   Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) Section polos; panel biru pindah ke grid kartu ---------- */
.features, .stats-glass {
  background: transparent;
  color: inherit;
  overflow: visible;
  padding: 64px 0;
}
.features .sg-orb, .stats-glass .sg-orb { display: none; }

/* judul kembali ke warna normal (ikut mode terang/gelap) */
.features .section-heading h2, .stats-glass .section-heading h2 { color: var(--navy); }
.features .section-heading p,  .stats-glass .section-heading p  { color: var(--text-muted); }
.features .section-heading .tag, .stats-glass .section-heading .tag { color: var(--orange, #ff6b00); }
:root[data-theme="dark"] .features .section-heading h2,
:root[data-theme="dark"] .stats-glass .section-heading h2 { color: #fff; }
:root[data-theme="dark"] .features .section-heading p,
:root[data-theme="dark"] .stats-glass .section-heading p { color: var(--ink-muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .features .section-heading h2,
  :root:not([data-theme="light"]) .stats-glass .section-heading h2 { color: #fff; }
  :root:not([data-theme="light"]) .features .section-heading p,
  :root:not([data-theme="light"]) .stats-glass .section-heading p { color: var(--ink-muted); }
}

/* panel biru = pembungkus kartu saja */
.features .grid, .stats-glass .sg-grid {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(420px 260px at 8% 0%, rgba(255,107,0,.30), transparent 70%),
    radial-gradient(380px 240px at 100% 100%, rgba(255,212,102,.22), transparent 70%),
    linear-gradient(160deg, var(--navy-steel-fixed, #1e5fcc) 0%, var(--navy) 100%);
  box-shadow: 0 22px 44px -26px rgba(11,37,69,.55);
}

@media (max-width: 900px) {
  .features .grid, .stats-glass .sg-grid { padding: 18px; border-radius: 22px; }
}
@media (max-width: 768px) {
  .features, .stats-glass { padding: 40px 0; }
  .features .grid, .stats-glass .sg-grid {
    padding: 14px; border-radius: 20px; gap: 12px;
    /* ringan: gradasi statis tanpa radial berlapis */
    background: linear-gradient(160deg, var(--navy-steel-fixed, #1e5fcc) 0%, var(--navy) 100%);
  }
  /* blur kaca dimatikan di HP (paling berat di GPU); tampilan kaca dipertahankan lewat warna */
  .feature-card, .sg-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255,255,255,.12);
  }
  .features .section-heading, .stats-glass .section-heading { margin-bottom: 20px; }
}

/* ---------- 2) Splash: turunkan sedikit & benar-benar di tengah ---------- */
.amga-opening.portable-opening {
  padding-top: clamp(24px, 7vh, 72px);
  padding-bottom: clamp(16px, 3vh, 32px);
}
/* margin-block sebelumnya menimpa "auto" sehingga kartu menempel di atas */
.amga-welcome { margin-block: auto; }
@media (max-height: 640px) {
  .amga-opening.portable-opening { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 600px) {
  .amga-opening.portable-opening { padding-top: clamp(16px, 5vh, 40px); }
  .amga-welcome { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--amga-glass-strong, rgba(20,40,80,.55)); }
}

/* ---- Proteksi gambar (mempersulit simpan/drag/seleksi; bukan perlindungan mutlak) ---- */
img, canvas, .gallery-item {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.galeri-modal-img-wrap { position: relative; }
.galeri-modal-img-wrap img { pointer-events: none; }
/* lapisan transparan di atas foto modal agar klik kanan tidak mengenai <img> langsung */
.galeri-modal-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ===================== [update-v77.css] ===================== */
/* =====================================================================
   v77 — (1) Kotak menu tetap ada setelah diklik (termasuk menu berpanah)
         (2) UI Aiga disederhanakan: tanpa pelangi/animasi/blur -> ringan
   Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) Menu desktop: kotak aktif untuk SEMUA item ---------- */
@media (min-width: 769px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger {
    border-radius: var(--radius-sm, 10px);
  }
  /* aktif (halaman sedang dibuka) / dropdown terbuka / fokus setelah klik */
  nav.primary-menu ul > li.active > a,
  nav.primary-menu ul > li.active > .nav-links-trigger,
  nav.primary-menu ul > li.active > a:hover,
  nav.primary-menu ul > li.active > .nav-links-trigger:hover,
  nav.primary-menu ul > li.dropdown-open > a,
  nav.primary-menu ul > li.dropdown-open > .nav-links-trigger,
  nav.primary-menu ul > li > a:focus-visible,
  nav.primary-menu ul > li > .nav-links-trigger:focus-visible {
    background: var(--accent-desktop, var(--navy-steel, #1e5fcc));
    color: #fff;
    box-shadow: 0 6px 14px -8px var(--blue-glow-desktop, rgba(30, 95, 204, .55));
    outline: none;
  }
  /* hover biasa (belum aktif) tetap kotak biru lembut, termasuk tombol Lainnya */
  nav.primary-menu ul > li:not(.active):not(.dropdown-open) > a:hover,
  nav.primary-menu ul > li:not(.active):not(.dropdown-open) > .nav-links-trigger:hover {
    background: var(--blue-soft-desktop, rgba(74, 144, 226, .22));
    color: #fff;
  }
  /* garis bawah animasi putih juga muncul di item dropdown yang aktif */
  nav.primary-menu ul > li.active > a::after,
  nav.primary-menu ul > li.active > .nav-links-trigger::after { width: 60%; }
  nav.primary-menu ul > li > .nav-links-trigger { position: relative; }
  nav.primary-menu ul > li > .nav-links-trigger::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; height: 2px; width: 0;
    background: #fff; border-radius: 2px; transform: translateX(-50%);
    transition: width .3s ease;
  }
  nav.primary-menu ul > li > .nav-links-trigger:hover::after { width: 60%; }
  /* backdrop blur dropdown dimatikan (ringan) */
  nav.primary-menu .dropdown-content { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 1b) Menu HP: kotak untuk item aktif & submenu yang terbuka ---------- */
.menu-panel-list > li > a.active,
.menu-panel-list > li.has-sub.active > .sub-toggle,
.menu-panel-list > li.has-sub.open > .sub-toggle {
  background: rgba(255, 255, 255, .12);
  color: var(--accent);
  font-weight: 700;
  border-radius: 10px;
}
.menu-panel-list .sub-list a.active { background: rgba(255, 255, 255, .10); border-radius: 8px; }

/* ---------- 2) Aiga: polos & ringan ---------- */
/* buang semua lapisan efek */
.aiga-fx, .aiga-aurora, .aiga-grid, .aiga-scan { display: none !important; animation: none !important; }
/* buang kartu bayangan di belakang kotak chat */
section.page[data-page="aiga"] .page-body .container.narrow::before { content: none !important; display: none !important; }

.aiga-shell {
  animation: none !important;
  isolation: auto;
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 18px -10px rgba(11, 37, 69, .25);
}
.aiga-shell .aiga-chat { background: var(--surface-alt, transparent); }
.aiga-msg--bot .bubble { box-shadow: none; }
.aiga-msg--in { animation: none !important; }

/* ikon sparkles di menu: statis */
nav.primary-menu ul > li[data-route="aiga"] > a i.fa-sparkles,
#menuPanel a[data-route-link="aiga"] i.fa-sparkles { animation: none !important; text-shadow: none; }

/* tidak ada blur/transisi berat di area Aiga */
.aiga-shell *, .aiga-stage * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

@media (max-width: 768px) {
  section.page[data-page="aiga"] .page-body .container.narrow.aiga-stage { padding: 16px 10px !important; }
  .aiga-shell { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aiga-typing-dot, .aiga-voice-bars span { animation: none !important; }
}

/* ===================== [update-v78.css] ===================== */
/* =====================================================================
   v78 — (1) Tombol Masuk/Daftar di navbar desktop (gantikan tombol translate)
         (2) Tanpa blur di semua animasi awal -> pembukaan ringan
   Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) Tombol akun di navbar ---------- */
nav.primary-menu ul > li.nav-akun-item {
  display: flex; align-items: center; gap: 6px;
  padding-left: 8px; margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.nav-akun-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: clamp(12px, .9vw, 14px); font-weight: 600;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.nav-akun-btn:hover, .nav-akun-btn:focus-visible {
  background: var(--accent-desktop, #1e5fcc); outline: none;
}
.nav-akun-btn--daftar { background: var(--gold, #e0bd6c); color: var(--navy-deep, #0b2545); }
.nav-akun-btn--daftar:hover, .nav-akun-btn--daftar:focus-visible { background: var(--gold, #e0bd6c); filter: brightness(1.08); }
.nav-akun-btn--user { padding: 4px 12px 4px 4px; }
.nav-akun-btn--user img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold, #e0bd6c); background: #fff;
}
.nav-akun-btn--user span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
/* layar PC sempit: sisakan tombol Masuk saja (Daftar tetap ada di tab halaman login) */
@media (min-width: 769px) and (max-width: 1280px) {
  .nav-akun-btn--daftar { display: none; }
}
/* HP: menu desktop tidak tampil, akun ada di panel hamburger */
@media (max-width: 768px) { nav.primary-menu li.nav-akun-item { display: none; } }

/* ---------- 2) Tanpa blur ---------- */
/* blur kaca (backdrop-filter) dimatikan di seluruh situs */
*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* keadaan awal & animasi masuk: tidak ada filter blur */
.reveal-scale-fade, .reveal-scale-fade.reveal-visible,
.pc-motion, .pc-motion.is-in, .pc-motion.is-out { filter: none !important; }
.reveal-scale-fade, .pc-motion { transition-property: opacity, transform !important; }
/* bola cahaya dekoratif yang di-blur (berat saat pembukaan) */
.amga-shade::before, .amga-shade::after,
.hero-glow, .stats::after, .sg-orb { filter: none !important; }
.amga-shade::before, .amga-shade::after, .hero-glow { display: none !important; }
/* animasi tombol "ke atas" tanpa motion-blur */
@keyframes totopBoost {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(6px) scale(.94); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes scrollTopMotionBlur { 0%, 100% { filter: none; } }
/* panel kaca splash: tanpa blur, latar tetap memakai warna kaca bawaannya */
.amga-welcome { background: linear-gradient(135deg, var(--amga-glass-highlight), transparent 45%), var(--amga-glass-strong, var(--amga-glass)); }

/* ===================== [update-v79.css] ===================== */
/* =====================================================================
   v79 — (1) menu: BKK, tombol Masuk berikon orang
         (2) logo: nama sekolah lebih besar + "Sekolah Berintegritas"
         (3) Statistik Sekolah: kartu lebih ringkas
         (4) kotak putih halaman Berita melebar
   Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) Ikon akun ---------- */
.nav-akun-btn .nav-akun-icon { font-size: 1.25em; line-height: 1; }

/* ---------- 2) Logo header: nama sekolah sedikit lebih besar ---------- */
.logo-text .school-name { font-size: 20px !important; line-height: 1.15; }
.logo-text small { font-size: 12px !important; margin-top: 3px !important; }
.logo-wrap .logo-media { width: 54px !important; height: 54px !important; }
@media (max-width: 768px) {
  .logo-wrap .logo-media { width: 44px !important; height: 44px !important; }
  .logo-text .school-name { font-size: 15px !important; }
  .logo-text small { font-size: 11px !important; }
}
@media (max-width: 380px) {
  .logo-text .school-name { font-size: 13px !important; }
}

/* "Sekolah Berintegritas" di hero, tepat di atas kalimat "Mewujudkan sumber daya..." */
.hero-tagline {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--gold-soft, #ffd466);
  margin: 0 0 10px;
}

/* ---------- 2b) Garis oranye di bawah judul: selebar teks + sedikit lebih ---------- */
.section-heading h2,
.page-body h2 { width: fit-content; max-width: 100%; }
.section-heading h2::after,
.page-body h2::after { width: calc(100% + 20px) !important; max-width: none; }

/* ---------- 2c) Profil: sub-menu ada di dropdown navbar, kotak tab disembunyikan ---------- */
.profil-subnav { display: none !important; }

/* ---------- 3) Statistik Sekolah: kotak lebih kecil ---------- */
.stats-glass .sg-grid { padding: 18px; gap: 14px; border-radius: 22px; }
.sg-card { padding: 16px 14px !important; gap: 4px !important; border-radius: 16px; }
.sg-icon { width: 40px !important; height: 40px !important; margin-bottom: 4px !important; font-size: 17px !important; border-radius: 12px !important; }
.sg-num { font-size: 1.6rem !important; }
.sg-label { font-size: .88rem !important; }
.sg-hint { font-size: .76rem !important; }
@media (max-width: 768px) {
  .stats-glass .sg-grid { padding: 12px; gap: 10px; }
  .sg-card { padding: 14px 10px !important; }
}

/* ---------- 4) Berita: kotak putih hampir selebar situs, tetap ada ruang tepi ---------- */
.page-body > .container.konten-card {
  max-width: 1240px;
  width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
  padding: 32px 36px !important;
}
@media (min-width: 993px) {
  .page-body > .container.konten-card { padding: 36px 44px !important; }
}
@media (min-width: 1440px) {
  .page-body > .container.konten-card { max-width: 1240px; }
}
@media (max-width: 640px) {
  .page-body > .container.konten-card { width: 100%; padding: 22px 16px !important; }
}

/* ---------- 5) Menu desktop: muat satu baris walau label "Kompetensi Keahlian" lebih panjang ---------- */
@media (min-width: 769px) and (max-width: 1360px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger { padding-left: 11px !important; padding-right: 11px !important; font-size: 13.5px; }
}

/* ===================== [update-v80.css] ===================== */
/* =====================================================================
   v80 — Dimuat paling akhir.
   (1) Font menu navbar dikecilkan
   (2) Tombol Daftar dihapus dari navbar (tinggal Masuk)
   (3) Latar halaman Masuk = foto sekolah AMGA
   (4) Teks hero dinaikkan sedikit
   (5) Data Guru = tema kartu Kompetensi Keahlian (tanpa logo)
   (6) Palet warna font: biru-navy / oranye (mengikuti referensi)
   (7) Warna search bar & tombol bulan/matahari tidak monoton
   (8) Semua variabel mengikuti mode terang & gelap; responsif HP
   ===================================================================== */

/* ---------- Token warna teks (terang & gelap) ---------- */
:root {
  --txt-heading: #0b2a5b;      /* judul: navy tegas */
  --txt-accent: #ff6b00;       /* judul aksen: oranye */
  --txt-eyebrow: #1e5fcc;      /* label kecil: biru */
  --txt-body: #4a5b75;         /* paragraf: abu kebiruan */
  --txt-role: #ff8a2b;         /* jabatan di atas foto/gradasi gelap */
}
:root[data-theme="dark"] {
  --txt-heading: #eaf2ff;
  --txt-accent: #ff9a45;
  --txt-eyebrow: #7db4ff;
  --txt-body: #b4c3dc;
  --txt-role: #ffb066;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --txt-heading: #eaf2ff;
    --txt-accent: #ff9a45;
    --txt-eyebrow: #7db4ff;
    --txt-body: #b4c3dc;
    --txt-role: #ffb066;
  }
}

/* ---------- (6) Terapkan palet ke teks konten ---------- */
.page-body h2,
.page-body h3,
.sambutan-section h2,
.profile-section h2,
.profile-section h3 { color: var(--txt-heading); }
.section-heading .tag,
.section-tag,
.profile-section .tag,
.sambutan-section .tag { color: var(--txt-eyebrow) !important; letter-spacing: .1em; font-weight: 700; }
.profile-section h3,
#sejarahSingkatTeks ~ h3 { color: var(--txt-accent); }
.section-heading p,
.page-body p,
.profile-section p,
.sambutan-section p { color: var(--txt-body); }
/* Judul "Sejarah Singkat ..." di beranda = oranye seperti referensi */
.profile-section .profile-text h3,
.profile-section h3 { color: var(--txt-accent); }

/* ---------- (1)(2) Menu navbar: font lebih kecil, Daftar hilang ---------- */
@media (min-width: 769px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger {
    font-size: clamp(11.5px, .84vw, 13.2px) !important;
    padding: 7px clamp(5px, .6vw, 10px) !important;
    font-weight: 600;
    letter-spacing: 0;
  }
  nav.primary-menu .nav-caret,
  nav.primary-menu .nav-links-trigger i { font-size: .7em; }
  .nav-akun-btn {
    font-size: clamp(11.5px, .84vw, 13.2px) !important;
    padding: 6px 12px !important;
  }
  .nav-akun-btn .nav-akun-icon { font-size: 1.15em; }
  nav.primary-menu .dropdown-content a,
  nav.primary-menu .dropdown-content button { font-size: 12.5px; }
}
.nav-akun-btn--daftar { display: none !important; }

/* ---------- (7) Search bar & tombol tema: warna berbeda, bukan monoton ---------- */
/* TERANG: search = oranye lembut, tema = navy dengan bulan emas */
.main-nav .nav-search {
  background: rgba(255, 107, 0, .10);
  border: 1px solid rgba(255, 107, 0, .35);
}
.main-nav .nav-search .nav-search-btn { color: #e85d00; }
.main-nav .nav-search:hover {
  border-color: #ff6b00;
  background: rgba(255, 107, 0, .16);
}
.main-nav .nav-search.is-open {
  background: var(--surface);
  border-color: #ff6b00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, .18);
}
.main-nav .nav-search input { color: var(--txt-heading); }
.main-nav .nav-search input::placeholder { color: var(--txt-body); opacity: .8; }

.main-nav .theme-toggle {
  background: linear-gradient(145deg, #12366f, #0b2545);
  border: 1px solid rgba(255, 209, 102, .55);
  color: #ffd166;
  box-shadow: 0 4px 12px -6px rgba(11, 37, 69, .6);
}
.main-nav .theme-toggle:hover {
  border-color: #ffd166;
  box-shadow: 0 8px 18px -8px rgba(11, 37, 69, .75);
}
.main-nav .theme-toggle .icon-moon { color: #ffd166; }

/* GELAP: search = biru terang, tema = emas dengan matahari navy */
:root[data-theme="dark"] .main-nav .nav-search {
  background: rgba(74, 144, 226, .16);
  border-color: rgba(125, 180, 255, .45);
}
:root[data-theme="dark"] .main-nav .nav-search .nav-search-btn { color: #9cc7ff; }
:root[data-theme="dark"] .main-nav .nav-search:hover { border-color: #7db4ff; background: rgba(74, 144, 226, .26); }
:root[data-theme="dark"] .main-nav .nav-search.is-open {
  background: var(--surface);
  border-color: #7db4ff;
  box-shadow: 0 0 0 3px rgba(125, 180, 255, .22);
}
:root[data-theme="dark"] .main-nav .theme-toggle {
  background: linear-gradient(145deg, #ffd166, #f0a93a);
  border-color: rgba(255, 224, 150, .8);
  color: #0b2545;
  box-shadow: 0 4px 14px -6px rgba(240, 169, 58, .7);
}
:root[data-theme="dark"] .main-nav .theme-toggle .icon-sun { color: #0b2545; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .main-nav .nav-search {
    background: rgba(74, 144, 226, .16);
    border-color: rgba(125, 180, 255, .45);
  }
  :root:not([data-theme="light"]) .main-nav .nav-search .nav-search-btn { color: #9cc7ff; }
  :root:not([data-theme="light"]) .main-nav .theme-toggle {
    background: linear-gradient(145deg, #ffd166, #f0a93a);
    border-color: rgba(255, 224, 150, .8);
    color: #0b2545;
  }
  :root:not([data-theme="light"]) .main-nav .theme-toggle .icon-sun { color: #0b2545; }
}

/* ---------- (4) Hero: rata kiri seperti awal, teks naik sedikit, eyebrow tetap tampil ---------- */
.hero { padding-top: 64px !important; }
.hero .hero-content {
  position: relative;
  top: -22px;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left;
}
.hero-content .eyebrow { display: inline-flex !important; margin-bottom: 14px; }
@media (min-width: 901px) {
  .hero .hero-content {
    max-width: none !important;
    width: 100%;
    padding-left: clamp(24px, 7.5vw, 170px) !important;
    padding-right: 24px !important;
  }
  .hero-content h1 { max-width: none !important; font-size: clamp(30px, 3.7vw, 50px); white-space: nowrap; margin-bottom: 14px; }
  .hero-content p { max-width: 52ch !important; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .hero .hero-content { max-width: 100% !important; padding-left: 32px !important; padding-right: 24px !important; }
  .hero-content h1 { font-size: clamp(28px, 4.4vw, 38px); white-space: nowrap; max-width: none !important; }
}
@media (max-width: 768px) {
  .hero { padding-top: 36px !important; }
  .hero .hero-content { top: -6px; max-width: 100% !important; padding-left: 22px !important; padding-right: 22px !important; }
  .hero-content h1 { font-size: clamp(24px, 7.4vw, 32px); overflow-wrap: anywhere; max-width: 100% !important; }
}

/* ---------- (5) Data Guru: tema kartu Kompetensi Keahlian tanpa logo ---------- */
.prog-card--guru {
  min-height: 250px;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px 16px 20px;
  cursor: default;
}
.prog-card--guru h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.prog-card--guru .guru-jabatan {
  margin: 2px 0 0;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--txt-role) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.prog-card--guru .guru-mapel {
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
/* gradasi sedikit lebih pekat agar teks terbaca di foto terang, kedua mode */
.prog-card--guru {
  background:
    linear-gradient(180deg, rgba(7, 28, 58, .15) 0%, rgba(7, 28, 58, .62) 50%, rgba(7, 28, 58, .94) 100%),
    var(--prog-img) center / cover no-repeat,
    linear-gradient(160deg, var(--navy-steel-fixed) 0%, var(--navy) 100%);
}
@media (max-width: 820px) {
  .prog-card--guru { min-height: 210px; padding: 18px 12px 16px; }
  .prog-card--guru h3 { font-size: 1rem; }
}
@media (max-width: 520px) {
  .prog-card--guru { min-height: 190px; }
}

/* ---------- (3) Halaman Masuk: latar foto sekolah AMGA ---------- */
.akun-gerbang {
  position: relative;
  min-height: min(82vh, 760px);
  margin: 0;
  padding: 56px 16px;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 28, 58, .55) 0%, rgba(7, 28, 58, .72) 100%),
    url("../assets/profil-sekolah.jpg") center / cover no-repeat;
}
:root[data-theme="dark"] .akun-gerbang {
  background:
    linear-gradient(180deg, rgba(5, 15, 34, .72) 0%, rgba(5, 15, 34, .88) 100%),
    url("../assets/profil-sekolah.jpg") center / cover no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akun-gerbang {
    background:
      linear-gradient(180deg, rgba(5, 15, 34, .72) 0%, rgba(5, 15, 34, .88) 100%),
      url("../assets/profil-sekolah.jpg") center / cover no-repeat;
  }
}
.akun-gerbang-kartu {
  background: var(--surface);
  color: var(--txt-heading);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.akun-gerbang-kartu h2 { color: var(--txt-heading); }
.akun-gerbang-kartu > p.sub { color: var(--txt-body); }
.akun-gerbang-kartu .akun-field input {
  background: var(--surface-alt);
  color: var(--txt-heading);
  border-color: var(--card-border);
}
/* modal akun (dibuka dari komentar dsb.) juga berlatar foto sekolah */
.akun-modal-backdrop {
  background:
    linear-gradient(180deg, rgba(7, 28, 58, .70), rgba(7, 28, 58, .85)),
    url("../assets/profil-sekolah.jpg") center / cover no-repeat;
}
@media (max-width: 520px) {
  .akun-gerbang { padding: 28px 12px; min-height: 78vh; }
  .akun-gerbang-kartu { padding: 28px 18px; border-radius: 18px; }
}

/* ---------- (8) HP: header & menu panel sama rapi seperti PC ---------- */
@media (max-width: 768px) {
  .main-nav .nav-search,
  .main-nav .theme-toggle { width: 38px; height: 38px; }
  .menu-panel a,
  .menu-panel button { font-size: 14.5px; }
}

/* =====================================================================
   v80b — judul oranye, garis oranye hanya 2 tempat, pengembang rata tengah,
   BKK rapi, admin
   ===================================================================== */

/* Judul headline oranye: Sambutan & Berita/Pamflet saja.
   "Tiga Hal", "Statistik Sekolah", "Tim Pengembang" kembali ke warna awal (biru tua). */
.sambutan-section h2,
.sambutan-body h2,
.news-section .section-heading h2 { color: var(--txt-accent) !important; }

/* Garis oranye di bawah judul: HANYA "Tiga Hal yang Kami Wujudkan" & "Statistik Sekolah" */
.section-heading h2::after,
.page-body h2::after,
.dev-team-heading h2::after,
.page-banner h1::after,
footer h4::after { display: none !important; content: none !important; }
.heading-garis h2::after {
  display: block !important;
  content: "" !important;
  width: 56px !important;
  max-width: 56px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--orange, #ff6b00);
}

/* Tim Pengembang Website: semua rata tengah */
.dev-team-glass,
.dev-team-heading,
.dev-team-thanks { text-align: center; }
.dev-team-heading { max-width: none; margin-left: auto; margin-right: auto; }
.dev-team-heading h2 { margin-left: auto; margin-right: auto; }
.dev-team-list { justify-content: center; }
.dev-team-thanks { margin-left: auto; margin-right: auto; max-width: 62ch; }
.journalist-credit { margin-left: auto !important; margin-right: auto !important; justify-content: center; text-align: left; }

/* Mobile: semua headline diperkecil agar tidak terpotong (PC tetap) */
@media (max-width: 768px) {
  .section-heading h2,
  .sambutan-body h2,
  .dev-team-heading h2,
  .stats-glass .section-heading h2 {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .heading-garis h2::after { width: 48px !important; max-width: 48px; }
  .page-banner h1 { font-size: clamp(21px, 6.6vw, 28px) !important; overflow-wrap: anywhere; line-height: 1.2; }
  .section-heading .tag { font-size: 11.5px; letter-spacing: .08em; }
  .section-heading p { font-size: 13.5px !important; }
  .dev-team-glass h2 { font-size: clamp(17px, 5.2vw, 22px) !important; }
}

/* ---------- BKK: kartu rapi di PC & HP ---------- */
.bkk-body { padding: clamp(28px, 5vw, 56px) 0; }
.bkk-body > .container { max-width: 1100px; width: calc(100% - 32px); }
.bkk-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}
.bkk-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
  border-top: 4px solid var(--orange, #ff6b00);
  min-width: 0;
}
.bkk-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--orange-soft, rgba(255,107,0,.16));
  color: var(--orange, #ff6b00);
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.bkk-card h2 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--txt-accent) !important;
  width: auto;
}
.bkk-card p { margin: 0; color: var(--txt-body); line-height: 1.75; font-size: 15.5px; overflow-wrap: break-word; }
.bkk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bkk-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--txt-body); line-height: 1.55; font-size: 15.5px;
}
.bkk-list li i { color: var(--orange, #ff6b00); margin-top: 4px; flex: 0 0 auto; }
.bkk-list li span { min-width: 0; overflow-wrap: break-word; }
.bkk-cta { display: flex; justify-content: center; margin-top: clamp(20px, 3vw, 32px); }
@media (max-width: 820px) {
  .bkk-grid { grid-template-columns: 1fr; }
  .bkk-card { padding: 20px 18px; border-radius: 18px; }
  .bkk-card h2 { font-size: 18px; }
  .bkk-card p, .bkk-list li { font-size: 14.5px; }
  .bkk-cta .btn-primary { width: 100%; justify-content: center; }
}

/* ---------- BKK: daftar lowongan kerja dinamis ---------- */
.bkk-lowongan-section { margin-top: clamp(32px, 4vw, 48px); }
.bkk-lowongan-section > .eyebrow { display: block; margin-bottom: 6px; }
.bkk-lowongan-section > h2 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 28px); color: var(--txt-accent); }
.bkk-lowongan-intro { margin: 0 0 22px; color: var(--txt-body); line-height: 1.7; font-size: 15px; max-width: 760px; }

.bkk-lowongan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.bkk-lowongan-grid .loading-msg { grid-column: 1 / -1; }

.bkk-lowongan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bkk-lowongan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(11,37,69,0.28); }
.bkk-lowongan-card.unggulan { border-top: 3px solid var(--orange, #ff6b00); }

.bkk-lowongan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--orange, #ff6b00);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bkk-lowongan-head { display: flex; align-items: center; gap: 12px; padding-right: 70px; }
.bkk-lowongan-logo {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: var(--orange-soft, rgba(255,107,0,.16));
  border: 1px solid var(--card-border);
}
.bkk-lowongan-card h5 { margin: 0; font-size: 16.5px; color: var(--txt-accent); line-height: 1.3; }
.bkk-lowongan-perusahaan { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-muted, var(--txt-body)); font-weight: 600; }

.bkk-lowongan-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.bkk-lowongan-meta span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--txt-body);
}
.bkk-lowongan-meta span i { color: var(--orange, #ff6b00); }

.bkk-lowongan-gaji { margin: 0; font-size: 14px; font-weight: 700; color: var(--txt-accent); display: flex; align-items: center; gap: 7px; }
.bkk-lowongan-gaji i { color: #16803c; }
.bkk-lowongan-tutup { margin: 0; font-size: 12.5px; color: var(--ink-muted, var(--txt-body)); }

.bkk-lowongan-detail {
  margin-top: auto;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--orange, #ff6b00);
  background: transparent;
  color: var(--orange, #ff6b00);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.bkk-lowongan-detail:hover { background: var(--orange, #ff6b00); color: #fff; }

.bkk-detail-wrap {
  margin-top: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 32px);
  position: relative;
}
.bkk-detail-wrap[hidden] { display: none !important; }
.bkk-detail-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--orange-soft, rgba(255,107,0,.16));
  color: var(--orange, #ff6b00);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
#bkkDetailBody h3 { margin: 0 24px 4px 0; font-size: clamp(19px, 2.2vw, 24px); color: var(--txt-accent); }
#bkkDetailBody h4 { margin: 18px 0 6px; font-size: 14.5px; color: var(--txt-accent); }
#bkkDetailBody p { margin: 0; color: var(--txt-body); line-height: 1.7; font-size: 14.5px; }
#bkkDetailBody .bkk-lowongan-perusahaan { font-size: 14px; }
#bkkDetailBody .bkk-lowongan-meta { margin: 12px 0; }
#bkkDetailBody .bkk-lowongan-gaji { margin: 8px 0; }
#bkkDetailBody .btn-primary { margin-top: 18px; display: inline-flex; }
#bkkDetailBody a { color: var(--orange, #ff6b00); text-decoration: none; font-weight: 600; }
#bkkDetailBody a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .bkk-lowongan-grid { grid-template-columns: 1fr; }
  .bkk-lowongan-head { padding-right: 0; flex-wrap: wrap; }
  .bkk-lowongan-badge { position: static; align-self: flex-start; margin-bottom: -4px; }
}

/* ===================== [update-v81.css] ===================== */
/* =====================================================================
   v81 — Dimuat paling akhir.
   (1) Teks hero beranda rata kiri, sejajar dengan logo & menu "Beranda"
   (2) Menu desktop muat satu baris (ada menu baru "Sarana Pengaduan")
   (3) Halaman Sarana Pengaduan + formulir (terang & gelap, responsif, cetak)
   (4) Halaman Kelulusan Siswa
   (5) Footer: "Ada Pengaduan?" dengan pilihan Ya / Tidak
   ===================================================================== */

/* ---------- (1) Hero: garis kiri sama dengan logo & tombol "Beranda" ---------- */
@media (min-width: 769px) {
  .hero .container.hero-content {
    padding-left: 20px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 1440px) {
  .hero .container.hero-content { padding-left: 32px !important; }
}

/* ---------- (2) Menu desktop: kompak di layar menengah ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger {
    font-size: 12px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    gap: 4px;
  }
}
@media (min-width: 1181px) and (max-width: 1360px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger {
    font-size: 13px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* ---------- Token warna halaman pengaduan / kelulusan ---------- */
:root {
  --pg-card: #ffffff;
  --pg-card-soft: #f3f7fd;
  --pg-border: rgba(11, 42, 91, .14);
  --pg-shadow: 0 10px 30px rgba(11, 42, 91, .08);
  --pg-head: #0b2a5b;
  --pg-text: #34455f;
  --pg-muted: #62748f;
  --pg-input: #ffffff;
  --pg-input-border: rgba(11, 42, 91, .22);
  --pg-accent: #ff6b00;
  --pg-blue: #1e5fcc;
  --pg-ok: #137a4a;
  --pg-err: #c0392b;
}
:root[data-theme="dark"] {
  --pg-card: rgba(15, 27, 52, .92);
  --pg-card-soft: rgba(255, 255, 255, .05);
  --pg-border: rgba(255, 255, 255, .14);
  --pg-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --pg-head: #eaf2ff;
  --pg-text: #c3d0e6;
  --pg-muted: #9db0cf;
  --pg-input: rgba(255, 255, 255, .06);
  --pg-input-border: rgba(255, 255, 255, .22);
  --pg-accent: #ff9a45;
  --pg-blue: #7db4ff;
  --pg-ok: #6ee7a8;
  --pg-err: #ffb4a0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-card: rgba(15, 27, 52, .92);
    --pg-card-soft: rgba(255, 255, 255, .05);
    --pg-border: rgba(255, 255, 255, .14);
    --pg-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --pg-head: #eaf2ff;
    --pg-text: #c3d0e6;
    --pg-muted: #9db0cf;
    --pg-input: rgba(255, 255, 255, .06);
    --pg-input-border: rgba(255, 255, 255, .22);
    --pg-accent: #ff9a45;
    --pg-blue: #7db4ff;
    --pg-ok: #6ee7a8;
    --pg-err: #ffb4a0;
  }
}

/* ---------- (3)(4) Struktur halaman ---------- */
/* Sarana Pengaduan: kotak memenuhi lebar layar, tetapi tepi kiri/kanan tetap
   diberi ruang yang SAMA dengan bar menu (nav.primary-menu > .container),
   sehingga sejajar lurus dengan menu "Beranda". Selektor sengaja panjang
   agar menang atas aturan umum di responsive.css. */
main section.page[data-page="pengaduan"] .container {
  max-width: none !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
main section.page[data-page="pengaduan"] .pg-body { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 1440px) {
  main section.page[data-page="pengaduan"] .container { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 720px) {
  main section.page[data-page="pengaduan"] .container { padding-left: 16px !important; padding-right: 16px !important; }
}
.pg-body .container > * + * { margin-top: 28px; }

.pg-block,
.pg-form,
.pg-sukses {
  background: var(--pg-card);
  border: 1px solid var(--pg-border);
  border-radius: 20px;
  box-shadow: var(--pg-shadow);
  padding: 28px 30px;
}
.pg-form[hidden], .pg-sukses[hidden] { display: none !important; }

.pg-kicker {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg-blue);
}
.pg-body .pg-title,
.pg-body .pg-form-title {
  margin: 6px 0 16px;
  color: var(--pg-head);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.25;
}
.pg-body .pg-block p,
.pg-body .pg-form p { color: var(--pg-text); line-height: 1.7; }

/* Kartu saluran */
.pg-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.pg-channel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--pg-card-soft);
  border: 1px solid var(--pg-border);
  border-radius: 16px;
  color: var(--pg-head);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.pg-channel:hover { transform: translateY(-3px); border-color: var(--pg-accent); box-shadow: var(--pg-shadow); }
.pg-channel--aktif { border-color: var(--pg-accent); }
.pg-channel-ico {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff8a2b, #ff6b00);
  color: #fff;
  font-size: 18px;
}
.pg-channel strong { font-size: 1rem; }
.pg-channel small { color: var(--pg-muted); font-size: .84rem; line-height: 1.5; }

/* Langkah-langkah */
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pg-steps li { display: flex; gap: 14px; align-items: flex-start; }
.pg-step-no {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pg-blue);
  color: #fff;
  font-weight: 700;
}
:root[data-theme="dark"] .pg-step-no { color: #0b2a5b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pg-step-no { color: #0b2a5b; } }
.pg-steps strong { display: block; color: var(--pg-head); margin-bottom: 2px; }
.pg-steps p { margin: 0 !important; }
.pg-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Formulir ---------- */
.pg-form-head { text-align: center; margin-bottom: 18px; }
.pg-body .pg-form-title { text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.pg-body .pg-form-sub { margin: 0; font-weight: 700; color: var(--pg-accent) !important; text-transform: uppercase; font-size: .9rem; letter-spacing: .03em; }
.pg-body .pg-form-school { margin: 2px 0 0; font-weight: 600; color: var(--pg-head) !important; }

.pg-petunjuk {
  background: var(--pg-card-soft);
  border: 1px dashed var(--pg-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 22px;
  color: var(--pg-text);
}
.pg-petunjuk strong { color: var(--pg-head); }
.pg-petunjuk ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }

.pg-fs {
  border: 0;
  border-top: 1px solid var(--pg-border);
  margin: 0;
  padding: 20px 0 8px;
  min-width: 0;
}
.pg-fs legend {
  padding: 0 10px 0 0;
  font-weight: 800;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--pg-head);
}
.pg-rom { color: var(--pg-accent); margin-right: 4px; }
.pg-note { margin: 0 0 12px !important; font-size: .9rem; font-style: italic; color: var(--pg-muted) !important; }

.pg-group { margin: 14px 0; }
.pg-label { display: block; font-size: .86rem; font-weight: 700; color: var(--pg-head); margin-bottom: 6px; }
.pg-label small { font-weight: 500; color: var(--pg-muted); }
.pg-label em, .pg-check em { color: var(--pg-accent); font-style: normal; }
.pg-hint { display: block; color: var(--pg-muted); font-size: .82rem; margin: -2px 0 8px; }

.pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 14px 0; }
.pg-field { display: block; min-width: 0; }
.pg-field--full { margin: 14px 0; }

.pg-form input[type="text"],
.pg-form input[type="tel"],
.pg-form input[type="email"],
.pg-form input[type="date"],
.pg-form input[type="time"],
.pg-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--pg-head);
  background: var(--pg-input);
  border: 1px solid var(--pg-input-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pg-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.pg-form input::placeholder, .pg-form textarea::placeholder { color: var(--pg-muted); opacity: .8; }
.pg-form input:focus, .pg-form textarea:focus {
  border-color: var(--pg-accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, .18);
}
.pg-form input:disabled { opacity: .5; cursor: not-allowed; }
.pg-form.is-anonim .pg-grid--identitas { opacity: .55; }

/* Centang & radio */
.pg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.pg-options--col { grid-template-columns: 1fr; }
.pg-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--pg-text);
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pg-check:hover { background: var(--pg-card-soft); border-color: var(--pg-border); }
.pg-check input[type="checkbox"],
.pg-check input[type="radio"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--pg-accent);
}
.pg-check strong { color: var(--pg-head); }
.pg-check small { color: var(--pg-muted); font-size: .84rem; }
.pg-check--anonim { margin-bottom: 4px; background: var(--pg-card-soft); border-color: var(--pg-border); }
.pg-check--lain { align-items: center; flex-wrap: wrap; }
.pg-check--lain input[type="text"] { flex: 1 1 220px; width: auto; padding: 9px 12px; }
.pg-check--pernyataan { background: var(--pg-card-soft); border-color: var(--pg-border); }

.pg-grid--saksi { margin-top: 6px; }
.pg-form:not(.saksi-on) .pg-grid--saksi { display: none; }

.pg-ttd { margin-top: 16px; display: grid; justify-items: end; text-align: center; gap: 2px; }
.pg-ttd p { margin: 0 !important; }
.pg-ttd-nama { margin-top: 38px !important; font-weight: 700; color: var(--pg-head) !important; min-width: 200px; }
.pg-ttd small { color: var(--pg-muted); font-style: italic; }

.pg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Tombol */
.pg-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--pg-border);
}
.pg-actions-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pg-status { margin: 0 !important; flex: 1 1 220px; min-height: 1.3em; font-size: .92rem; color: var(--pg-muted) !important; }
.pg-status.is-error { color: var(--pg-err) !important; font-weight: 600; }
.pg-status.is-ok { color: var(--pg-ok) !important; font-weight: 600; }

.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font: inherit; font-weight: 700; font-size: .95rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.pg-btn:hover { transform: translateY(-2px); }
.pg-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.pg-btn--utama { background: linear-gradient(145deg, #ff8a2b, #ff6b00); color: #fff; box-shadow: 0 8px 20px rgba(255, 107, 0, .3); }
.pg-btn--utama:hover { filter: brightness(1.07); color: #fff; }
.pg-btn--ghost { background: transparent; color: var(--pg-head); border-color: var(--pg-input-border); }
.pg-btn--ghost:hover { border-color: var(--pg-accent); color: var(--pg-accent); }

.pg-saluran {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--pg-card-soft);
  border: 1px solid var(--pg-border);
  border-radius: 14px;
  color: var(--pg-text);
  font-size: .92rem;
}
.pg-saluran strong { color: var(--pg-head); }
.pg-saluran ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.8; }
.pg-saluran li span { font-weight: 700; color: var(--pg-head); }
.pg-saluran a { color: var(--pg-blue); }

/* Sukses */
.pg-sukses { text-align: center; }
.pg-sukses-ico { font-size: 54px; color: var(--pg-ok); line-height: 1; }
.pg-body .pg-sukses h3 { margin: 12px 0 8px; color: var(--pg-head); }
.pg-sukses-kode { margin-top: 14px !important; }
.pg-sukses-kode strong { color: var(--pg-accent); letter-spacing: .04em; }
.pg-sukses .pg-btn { margin-top: 12px; }

/* ---------- (5) Footer: Ada Pengaduan? Ya / Tidak ---------- */
.pengaduan-ask {
  margin-top: 24px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
}
.pengaduan-ask-q { margin: 0 0 16px; font-size: 1.08rem; font-weight: 700; color: #fff; }
.pengaduan-ask-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.pengaduan-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 150px;
  padding: 13px 26px;
  font: inherit; font-weight: 700; font-size: .98rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.pengaduan-btn:hover { transform: translateY(-2px); }
.pengaduan-btn--ya { background: linear-gradient(145deg, #ff8a2b, #ff6b00); color: #fff; box-shadow: 0 8px 20px rgba(255, 107, 0, .35); }
.pengaduan-btn--ya:hover { filter: brightness(1.08); color: #fff; }
.pengaduan-btn--tidak { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.pengaduan-btn--tidak:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.pengaduan-ask-note { margin: 16px 0 0; min-height: 1.2em; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.pengaduan-ask-note:empty { display: none; }
.pengaduan-ask-note a { color: #ffb066; }

/* ---------- Responsif ---------- */
@media (max-width: 720px) {
  .pg-block, .pg-form, .pg-sukses { padding: 20px 16px; border-radius: 16px; }
  .pg-grid, .pg-options { grid-template-columns: 1fr; }
  .pg-actions-btns { width: 100%; }
  .pg-actions-btns .pg-btn { flex: 1 1 100%; }
  .pg-ttd { justify-items: center; }
  .pengaduan-ask { padding: 18px; }
  .pengaduan-btn { flex: 1 1 100%; }
}

/* ---------- Cetak: hanya formulir yang tercetak ---------- */
@media print {
  body * { visibility: hidden !important; }
  #pengaduanForm, #pengaduanForm * { visibility: visible !important; }
  #pengaduanForm {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none !important; border: 0 !important; background: #fff !important;
    padding: 0 !important;
  }
  #pengaduanForm, #pengaduanForm * { color: #000 !important; background: transparent !important; }
  .pg-actions, .pg-hp, .pg-check--anonim { display: none !important; }
  .pg-form input[type="text"], .pg-form input[type="tel"], .pg-form input[type="email"],
  .pg-form input[type="date"], .pg-form input[type="time"], .pg-form textarea {
    border: 0 !important; border-bottom: 1px dotted #000 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  .pg-form:not(.saksi-on) .pg-grid--saksi { display: grid !important; }
}

/* ===================== [update-v84.css] ===================== */
/* =========================================================
   v84 - Halaman Kelulusan Siswa (satu tema dengan PPDB/SPMB)
   Memakai ulang .spmb-hero / .spmb-home / .sh-* dari style.css.
   ========================================================= */
.kl-hero { min-height: 0; padding: 88px 0 80px; }
.kl-hero .spmb-state h1 { margin-bottom: 18px; }
.kl-hero .spmb-text { margin-left: auto; margin-right: auto; margin-bottom: 26px; }
.kl-home .sh-syarat-head { margin-bottom: 40px; }
.kl-home .sh-help { margin-top: 56px; }
.kl-help-ico {
  display: grid; place-items: center;
  width: 150px; height: 150px; border-radius: 50%;
  font-size: 4rem; color: var(--orange, #ff6b00);
  background: rgba(255, 107, 0, .12);
}
.kl-home .sh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
@media (max-width: 900px) {
  .kl-hero { padding: 64px 0 56px; }
  .kl-home .sh-help-media { order: -1; }
}
@media (max-width: 560px) {
  .kl-hero { padding: 48px 0 44px; }
  .kl-help-ico { width: 110px; height: 110px; font-size: 3rem; }
  .kl-home .sh-help { padding: 24px 20px; margin-top: 40px; }
  .kl-home .sh-actions .prog-btn { flex: 1 1 100%; }
}
.kl-home .sh-syarat-head h3 .sh-accent { display: inline; }

/* ===================== [update baru: sinkron permintaan v86] ===================== */

/* --- Header: "AMPELGADING" di bawah "SMK NEGERI 1" --- */
.logo-text .school-name,
.menu-panel-logo .school-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.12 !important;
}
.logo-text .school-name { font-size: clamp(15px, 1.9vw, 20px) !important; }
@media (max-width: 480px) { .logo-text .school-name { font-size: 14px !important; } }

/* --- Beranda: "SMK Pusat Keunggulan" & "Sekolah Berintegritas" bergantian di posisi yang sama,
       masing-masing tampil 5 detik dengan efek fade in / fade out --- */
.hero-content .eyebrow.eyebrow-rotator {
  display: inline-grid !important;
  grid-template-areas: "slot";
  align-items: center;
  justify-items: start;
}
.eyebrow-rotator .eyebrow-item {
  grid-area: slot;
  opacity: 0;
  animation: eyebrowFade 10s linear infinite;
  white-space: nowrap;
}
.eyebrow-rotator .eyebrow-item:nth-child(2) { animation-delay: 5s; }
@keyframes eyebrowFade {
  0%   { opacity: 0; transform: translateY(6px); }
  8%   { opacity: 1; transform: translateY(0); }
  42%  { opacity: 1; transform: translateY(0); }
  50%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-rotator .eyebrow-item { animation: none; }
  .eyebrow-rotator .eyebrow-item:first-child { opacity: 1; }
}

/* --- Splash: hanya satu kotak (kartu). Cincin/lingkaran yang mengecil dihapus --- */
.cd-dial {
  width: auto !important;
  aspect-ratio: auto !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: clamp(6px, 1.6vw, 12px) 0 !important;
}
.cd-center {
  position: static !important;
  inset: auto !important;
  background: none !important;
  border-radius: 0 !important;
}
.cd-num { font-size: clamp(44px, 9vw, 64px) !important; }
.cd-ring, .cd-dash { display: none !important; }

/* --- Data Guru v98: bingkai SAMA dengan kartu Kompetensi Keahlian (.prog-card), bentuk lonjong
       (potret tinggi), foto penuh, pelat kaca nama + jabatan, bingkai dalam emas, kilau saat hover. --- */
.prog-card.guru-card {
  --guru-emas: var(--gold-soft, #ffd166);
  min-height: 0;
  aspect-ratio: 3 / 4.5;
  padding: 0;
  gap: 0;
  justify-content: flex-end;
  align-items: stretch;
  cursor: default;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(30, 95, 204, .55), transparent 70%),
    linear-gradient(160deg, var(--navy-steel-fixed, #1b3a73) 0%, var(--navy, #0b2447) 100%);
}
/* foto penuh */
.guru-card .guru-foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.guru-card .guru-foto img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 12%;
  transition: transform .8s var(--ease, ease), filter .5s ease;
}
.guru-card:hover .guru-foto img { transform: scale(1.07); }
/* teduhan bawah supaya teks selalu terbaca */
.guru-card .guru-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 28, 58, .38) 0%, rgba(7, 28, 58, 0) 24%),
    linear-gradient(180deg, rgba(7, 28, 58, 0) 42%, rgba(7, 28, 58, .62) 70%, rgba(7, 28, 58, .94) 100%);
}
/* kilau yang menyapu saat disentuh */
.guru-card .guru-foto::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); transition: left .9s var(--ease, ease);
}
.guru-card:hover .guru-foto::after { left: 130%; }
/* tanpa foto: logo sekolah di tengah, latar bermotif */
.guru-card.guru-nofoto .guru-foto {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .16), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px);
}
.guru-card.guru-nofoto .guru-foto img {
  object-fit: contain; object-position: center 36%; padding: 22% 22% 40%; opacity: .92;
}
/* bingkai dalam emas (memakai ::before milik .prog-card, lapisan zoom dimatikan) */
.prog-card.guru-card::before {
  inset: 8px; z-index: 2; background: none;
  border: 1px solid rgba(255, 209, 102, .38);
  border-radius: calc(var(--radius, 16px) - 6px);
  transition: inset .35s var(--ease, ease), border-color .35s ease, box-shadow .35s ease;
}
.prog-card.guru-card:hover::before {
  transform: none; inset: 6px; border-color: rgba(255, 209, 102, .95);
  box-shadow: 0 0 22px rgba(255, 176, 30, .28) inset;
}
/* lencana kecil di pojok */
.guru-card .guru-chip {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--navy-steel-fixed, #1b3a73);
  font-size: .95rem; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease, ease), background .35s ease, color .35s ease;
}
.guru-card:hover .guru-chip { transform: rotate(-10deg) scale(1.08); background: var(--orange, #ff6b00); color: #fff; }
/* pelat kaca nama + jabatan */
.guru-card .guru-info {
  position: relative; z-index: 4;
  margin: 0 14px 14px; padding: 18px 12px 14px;
  border-radius: calc(var(--radius, 16px) - 4px);
  background: rgba(7, 28, 58, .52);
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.guru-card .guru-info::before {            /* garis emas kecil di atas nama */
  content: ""; position: absolute; top: 7px; left: 50%; width: 34px; height: 3px; margin-left: -17px;
  border-radius: 3px; background: linear-gradient(90deg, var(--orange, #ff6b00), var(--guru-emas));
  transition: width .35s var(--ease, ease), margin-left .35s var(--ease, ease);
}
.guru-card:hover .guru-info::before { width: 64px; margin-left: -32px; }
.guru-card h3 {
  margin: 0; font-size: 1.04rem; line-height: 1.3; font-weight: 700;
  color: #fff !important; overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.guru-card .guru-jabatan {
  margin: 0; padding: 3px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.35; letter-spacing: .02em;
  color: #fff !important; text-shadow: none;
  background: linear-gradient(135deg, #ff8a2b, #ff6b00);
  box-shadow: 0 4px 10px -3px rgba(255, 107, 0, .6);
}
.guru-card .guru-mapel {
  margin: 0; font-size: .8rem; line-height: 1.4;
  color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.guru-card .guru-mapel i { color: var(--guru-emas); margin-right: 5px; font-size: .72rem; }
/* tablet & ponsel: dua kolom supaya kartu lonjong tidak raksasa */
@media (max-width: 820px) {
  .guru-card .guru-info { margin: 0 10px 10px; padding: 16px 8px 11px; }
  .guru-card h3 { font-size: .95rem; }
  .guru-card .guru-chip { top: 12px; right: 12px; width: 32px; height: 32px; font-size: .85rem; }
}
@media (max-width: 520px) {
  main section.page:not([data-page="beranda"]) .guru-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prog-card.guru-card { aspect-ratio: 3 / 4.7; }
  .prog-card.guru-card::before { inset: 6px; }
  .guru-card .guru-info { margin: 0 8px 8px; padding: 15px 6px 9px; }
  .guru-card h3 { font-size: .84rem; }
  .guru-card .guru-jabatan { font-size: .68rem; padding: 2px 8px; }
  .guru-card .guru-mapel { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .guru-card .guru-foto img, .guru-card .guru-foto::after, .guru-card .guru-chip { transition: none; }
}

/* --- Kompetensi Keahlian: semua teks kartu putih --- */
.prog-card, .prog-card h3, .prog-card p, .prog-card .prog-more, .prog-card .prog-pembina {
  color: #fff !important;
}

/* --- Sarana Pengaduan: bagian atas (banner) seragam dengan halaman lain --- */
main section.page[data-page="pengaduan"] .page-banner .container {
  max-width: min(760px, 100%) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* --- Like Sosial Media (pengganti komentar) --- */
.sosmed-like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, .35);
  background: transparent; color: #dc2626;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s;
}
.sosmed-like-btn:hover { background: rgba(220, 38, 38, .08); }
.sosmed-like-btn:active { transform: scale(.94); }
.sosmed-like-btn.liked { background: #dc2626; color: #fff; border-color: #dc2626; }
.sosmed-like-btn:disabled { opacity: .6; cursor: wait; }
.sosmed-like-wrap { margin-top: 14px; }
.sosmed-like-btn--modal { padding: 8px 18px; font-size: 1rem; }
.sosmed-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* --- Notifikasi web di halaman Berita --- */
.push-berita { flex-wrap: wrap; }
@media (max-width: 520px) {
  .push-berita { flex-direction: column; align-items: stretch; text-align: center; }
  .push-berita-btn { width: 100%; }
}

/* --- Menu: 11 item muat rapi di desktop --- */
@media (min-width: 901px) and (max-width: 1280px) {
  nav.primary-menu ul > li > a { padding-left: 9px !important; padding-right: 9px !important; font-size: 13px; }
}

/* --- Penyesuaian v86b --- */
.hero-content h1 .hero-line { display: block; }
.hero-content .eyebrow.eyebrow-rotator { font-size: clamp(15px, 1.6vw, 20px) !important; letter-spacing: .12em; }
.logo-text .school-name { white-space: nowrap !important; }
nav.primary-menu ul > li > a { font-size: 13.5px !important; padding-left: 10px !important; padding-right: 10px !important; }
@media (min-width: 1440px) { nav.primary-menu ul > li > a { font-size: 14px !important; } }


/* --- v88: teks bergantian dipindah ke header (SMK Pusat Keunggulan <-> Sekolah Berintegritas).
       Teks di hero beranda dibuat statis. --- */
.logo-text small.header-rotator {
  display: inline-grid !important;
  grid-template-areas: "slot";
  align-items: center;
  justify-items: start;
  white-space: nowrap !important;
}
.header-rotator .hr-item {
  grid-area: slot;
  opacity: 0;
  white-space: nowrap;
  animation: eyebrowFade 10s linear infinite;
}
.header-rotator .hr-item:nth-child(2) { animation-delay: 5s; }
@media (prefers-reduced-motion: reduce) {
  .header-rotator .hr-item { animation: none; }
  .header-rotator .hr-item:first-child { opacity: 1; }
}

/* --- v88: jarak atas-bawah tiap section di versi mobile --- */
@media (max-width: 768px) {
  .sambutan-section,
  .features,
  .profile-section,
  .stats-glass,
  .news-section,
  .dev-team-section,
  .gempa-strip-wrap {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .sambutan-section + .features { padding-top: 44px !important; }
  .page-body { padding-top: 44px !important; padding-bottom: 56px !important; }
  .page-banner { padding-bottom: 40px !important; }
  .page-body .section-heading,
  .news-section .section-heading,
  .stats-glass .section-heading { margin-bottom: 24px; }
}
@media (max-width: 768px) {
  .gempa-strip-wrap { padding-top: 12px !important; padding-bottom: 32px !important; }
}

/* --- v90: menu hamburger — teks bergantian seperti header, lingkaran biru di logo dihapus --- */
.menu-panel-logo small.header-rotator {
  display: inline-grid !important;
  grid-template-areas: "slot";
  align-items: center;
  justify-items: start;
  white-space: nowrap !important;
}
.menu-panel-logo img {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* --- v91: sambutan — hilangkan kotak kosong yang meluncur dari kiri ke kanan --- */
/* Animasi masuk geser kiri/kanan diganti fade halus (tanpa bergerak) */
.sambutan-section .reveal-left,
.sambutan-section .reveal-right {
  transform: none !important;
  transition: opacity .6s ease !important;
}
/* Bila foto tidak ada / gagal dimuat, kotak foto disembunyikan dan teks tampil penuh */
.sambutan-wrap:has(.sambutan-photo:not(:has(img))) { grid-template-columns: 1fr; }
.sambutan-wrap:has(.sambutan-photo:not(:has(img))) .sambutan-figure { display: none; }
.sambutan-wrap:has(.sambutan-photo:not(:has(img))) .sambutan-body { max-width: 780px; margin: 0 auto; }

/* --- v92: tampilan halaman 404 (rute tidak dikenal di dalam situs) --- */
.notfound { padding: clamp(56px, 10vw, 110px) 0; text-align: center; }
.notfound-card {
  max-width: 640px; margin: 0 auto;
  padding: 36px 22px 30px;
  border-radius: 28px;
  background: var(--card-bg, rgba(255,255,255,.85));
  border: 1px solid rgba(30,95,204,.18);
  box-shadow: 0 20px 60px rgba(11,37,69,.14);
}
.notfound-code {
  font-family: var(--font-display, inherit);
  font-size: clamp(84px, 24vw, 150px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, #1e5fcc, #0b2545 55%, #ff6b00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nfFloat 5s ease-in-out infinite;
}
.notfound h1 { font-size: clamp(1.4rem, 4.5vw, 2rem); margin: 8px 0 10px; color: var(--navy); }
.notfound p { max-width: 46ch; margin: 0 auto 22px; color: var(--text-muted, #5a6b85); line-height: 1.7; }
.notfound-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.notfound-actions .btn-primary { margin: 0 !important; }
.notfound-ghost { background: transparent !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; box-shadow: none !important; }
.notfound-links {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(30,95,204,.16);
}
.notfound-links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink);
  background: rgba(30,95,204,.08); border: 1px solid rgba(30,95,204,.16);
  transition: background .15s, transform .15s;
}
.notfound-links a:hover { background: rgba(30,95,204,.18); transform: translateY(-2px); }
.notfound-links a i { color: var(--orange, #ff6b00); font-size: 12px; }
:root[data-theme="dark"] .notfound-card { background: rgba(15,39,72,.85); border-color: rgba(120,160,230,.25); }
:root[data-theme="dark"] .notfound h1 { color: var(--ink); }
:root[data-theme="dark"] .notfound-code { background: linear-gradient(135deg, #6aa2ff, #fff 55%, #ff6b00); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="dark"] .notfound-ghost { color: #9cc2ff !important; border-color: #9cc2ff !important; }
@keyframes nfFloat { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .notfound-code { animation: none; } }
@media (max-width: 768px) { .notfound { padding: 44px 0; } }

/* --- v94: navbar mobile — tanpa celah/garis putih di bawah header, logo sedikit lebih kecil --- */
@media (max-width: 768px) {
  header {
    border-bottom: 0 !important;
    box-shadow: none !important;
    margin-bottom: -1px;          /* tutup celah sub-piksel antara header dan hero */
  }
  header.scrolled { box-shadow: 0 6px 16px -12px rgba(11, 37, 69, .35) !important; }
  .main-nav { padding: 8px 0 !important; }
  .main-nav .flex { min-height: 0 !important; }
  .logo-wrap .logo-media { width: 40px !important; height: 40px !important; }
  .logo-wrap { gap: 10px; }
}

/* =====================================================================
   v95 — Profil: semua "shape" diberi animasi looping seperti kartu Berita
         (garis emas mengorbit di tepi + denyut cahaya lembut)
   ===================================================================== */
.profil-bagian.detail-content:not([hidden]),
.struktur-item,
.profil-subnav a.active {
  position: relative;
  isolation: isolate;
}
.profil-bagian.detail-content:not([hidden])::before,
.struktur-item::before,
.profil-subnav a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--orbit-angle, 0deg),
    transparent 0%, transparent 78%,
    var(--gold-soft) 88%, var(--gold) 92%, var(--gold-soft) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: orbitLine 5.5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.struktur-item:nth-child(even)::before { animation-duration: 6.5s; animation-delay: -2s; }
.struktur-item:nth-child(3n)::before   { animation-duration: 7.5s; animation-delay: -4s; }
.profil-subnav a.active::before { animation-duration: 4s; }
.profil-bagian.detail-content:not([hidden]):hover::before,
.struktur-item:hover::before { animation-duration: 2.6s; }

/* Denyut cahaya lembut pada ikon tab & kartu struktur */
.profil-subnav a i { animation: cardGlowPulse 2.8s ease-in-out infinite; border-radius: 50%; }
.profil-subnav a:nth-child(2) i { animation-delay: .35s; }
.profil-subnav a:nth-child(3) i { animation-delay: .7s; }
.profil-subnav a:nth-child(4) i { animation-delay: 1.05s; }
.struktur-item { animation: cardGlowPulse 4s ease-in-out infinite; }

:root[data-perf="low"] .profil-bagian::before,
:root[data-perf="low"] .struktur-item::before,
:root[data-perf="low"] .profil-subnav a::before,
html[data-motion="reduced"] .profil-bagian::before,
html[data-motion="reduced"] .struktur-item::before,
html[data-motion="reduced"] .profil-subnav a::before { animation: none !important; display: none; }
:root[data-perf="low"] .profil-subnav a i,
:root[data-perf="low"] .struktur-item,
html[data-motion="reduced"] .profil-subnav a i,
html[data-motion="reduced"] .struktur-item { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .profil-bagian::before, .struktur-item::before, .profil-subnav a::before { animation: none !important; display: none; }
  .profil-subnav a i, .struktur-item { animation: none !important; }
}

/* =====================================================================
   v95 — Variasi warna teks
   Jingga = penanda/label & teks bergerak, biru langit = keterangan di atas
   latar biru, emas = judul kecil di footer/gelap, biru baja = judul isi.
   ===================================================================== */
:root {
  --txt-jingga: #ff7a1a;        /* jingga terang (di atas latar biru/gelap) */
  --txt-jingga-tua: #e25a00;    /* jingga tua (di atas latar putih) */
  --txt-langit: #bfe0ff;        /* biru langit */
  --txt-emas: #f2c75c;
}
:root[data-theme="dark"] { --txt-jingga-tua: #ffa45c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --txt-jingga-tua: #ffa45c; } }

/* Teks bergantian di hero (SMK PUSAT KEUNGGULAN) -> jingga */
.hero-content .eyebrow,
.hero-content .eyebrow.eyebrow-rotator,
.hero-content .eyebrow .eyebrow-item {
  color: var(--txt-jingga) !important;
  text-shadow: 0 1px 12px rgba(5, 20, 50, .55);
}
/* Teks bergantian di header & menu hamburger (SMK PUSAT KEUNGGULAN / SEKOLAH BERINTEGRITAS) -> abu-abu */
:root { --txt-header-abu: #6b7280; }
:root[data-theme="dark"] { --txt-header-abu: #9ca3af; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --txt-header-abu: #9ca3af; } }
.logo-text small.header-rotator,
.header-rotator .hr-item,
.menu-panel-logo small.header-rotator { color: var(--txt-header-abu) !important; font-weight: 600; }
/* Label kecil di banner halaman (Tentang Kami, Peserta Didik, dst.) -> jingga */
.page-banner .eyebrow { color: var(--txt-jingga) !important; }
/* Keterangan angka di hero -> biru langit */
.hero-stats div > span { color: var(--txt-langit) !important; }
/* Profil: judul bagian biru baja bergaris jingga, kata tebal jingga tua, bullet jingga */
.profil-bagian h2 { color: var(--primary); }
.profil-bagian strong { color: var(--txt-jingga-tua); }
.profil-bagian .bullet-list li::marker { color: var(--txt-jingga-tua); }
.struktur-item h5 { color: var(--primary); }
:root[data-theme="dark"] .profil-bagian h2,
:root[data-theme="dark"] .struktur-item h5 { color: #9cc2ff; }
/* Judul kolom footer -> emas */
footer h4 { color: var(--txt-emas) !important; }


/* ---- Sarana Pengaduan: Hotline dibagi 2 pilihan telepon ---- */
.pg-channel--hotline { cursor: default; }
.pg-hotline-opsi { display: grid; gap: 8px; margin-top: 8px; width: 100%; }
.pg-hotline-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--pg-accent, #ff6b00);
  background: transparent; color: inherit; text-decoration: none;
  font-size: .88rem; line-height: 1.3;
  transition: background .2s, color .2s, transform .2s;
}
.pg-hotline-btn i { color: var(--pg-accent, #ff6b00); transition: color .2s; }
.pg-hotline-btn b { display: block; font-weight: 700; }
.pg-hotline-btn span { display: block; color: var(--pg-muted, #6b7280); font-size: .8rem; }
.pg-hotline-btn:hover, .pg-hotline-btn:focus-visible { background: var(--pg-accent, #ff6b00); color: #fff; transform: translateY(-2px); }
.pg-hotline-btn:hover i, .pg-hotline-btn:focus-visible i,
.pg-hotline-btn:hover span, .pg-hotline-btn:focus-visible span { color: #fff; }
.pg-saluran-tel { display: inline-flex; flex-direction: column; gap: 4px; vertical-align: top; }