/* =====================================================================
   IDENTITAS LAMBANG — situs publik (3.82.3)

   Bahasa visual diambil dari lambang sekolah: biru #1e4d7b yang datar,
   putih, garis luar hitam yang tegas, bentuk segi lima, dan pita.
   Menggantikan nuansa clay (bayangan lembut/3D) dan gradien hero.
   Dimuat PALING AKHIR. Untuk kembali: hapus <link> identitas.css di tiap halaman.
   ===================================================================== */

:root {
  --lg-biru: #1e4d7b;        /* biru lambang, diukur dari logo-crest.webp */
  --lg-biru-tua: #143554;
  --lg-tinta: #0b1d2e;       /* "hitam" lambang */
  --lg-garis: 2px solid var(--lg-tinta);
  --lg-bayang: 4px 4px 0 var(--lg-tinta);
  --lg-bayang-kecil: 3px 3px 0 var(--lg-tinta);
  --lg-segilima: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);

  --cl-canvas: #f4f7fa;
  --cl-well: #e4ecf3;
  --r-clay: 14px;
  --r-s: 10px;
  --r-m: 14px;

  /* semua permukaan clay otomatis jadi garis tegas + bayangan keras */
  --clay-timbul: 0 0 0 2px var(--lg-tinta), var(--lg-bayang);
  --clay-lekuk: inset 0 0 0 2px rgba(11, 29, 46, 0.35);
  --clay-tekan: 0 0 0 2px var(--lg-tinta), 0 0 0 0 var(--lg-tinta);
  --clay-gelap: 0 0 0 2px var(--lg-tinta), var(--lg-bayang);
  --clay-putih: 0 0 0 2px var(--lg-tinta), var(--lg-bayang);
}

/* ---------- Header ---------- */
.site-header::before { background: #fff; box-shadow: none; }
.site-header.is-stuck::before { background: rgba(255, 255, 255, 0.97); }
.site-header { border-bottom: 3px solid var(--lg-biru); }
.site-header.is-stuck { box-shadow: none; }
.brand img { filter: none; }
.menu-toggle { border-radius: 10px; }

@media (min-width: 820px) {
  .nav-desktop a { border-radius: 8px; }
  .nav-desktop a:hover { background: var(--cl-well); box-shadow: none; }
  .nav-desktop a[aria-current="page"] { background: transparent; box-shadow: none; color: var(--lg-biru); font-weight: 700; }
  /* perbaikan: tombol Daftar dulu putih di atas putih (tak terbaca) */
  .nav-desktop a.nav-kontak,
  .nav-desktop a.nav-daftar {
    background: var(--lg-biru); color: #fff; border: var(--lg-garis);
    box-shadow: var(--lg-bayang-kecil); border-radius: 10px; font-weight: 700;
  }
  .nav-desktop a.nav-kontak:hover,
  .nav-desktop a.nav-daftar:hover { background: var(--lg-biru-tua); color: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--lg-tinta); }
  .nav-desktop a.nav-kontak[aria-current="page"] { background: var(--lg-tinta); color: #fff; }
}
.nav-sub { border-radius: 12px; border: var(--lg-garis); box-shadow: var(--lg-bayang); }
.nav-sheet .link { border-radius: 12px; border: var(--lg-garis); box-shadow: var(--lg-bayang-kecil); margin-bottom: 10px; }
.nav-sheet .link[aria-current="page"] { background: var(--lg-biru); color: #fff; box-shadow: var(--lg-bayang-kecil); }
.nav-sheet .link-daftar { background: var(--lg-biru); color: #fff; }

/* ---------- Hero: gelap + sorot kursor (3.82.6: dikembalikan) ----------
   3.82.3 sempat membuat hero biru datar dan mematikan aurora/glow/sheen; sorotan hilang.
   Sekarang latar gelap, sorot cahaya yang mengikuti kursor (PC) / berkeliling (HP), kilau lambang,
   dan pola Monas kembali dari styles.css. Di sini hanya teks, lencana, dan tombol yang disesuaikan. */
.hero {
  background: radial-gradient(ellipse 60% 70% at 78% 42%, #18394f 0%, #0a1a29 50%, #040a11 100%);
  color: #fff;
}
.hero-crest { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55)); }
.hero h1 { color: #fff; }
.hero-lede, .hero-lokasi { color: rgba(255, 255, 255, 0.8); }
.hero-lokasi { display: block; width: fit-content; justify-self: center; margin-inline: auto; padding: 6px 12px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 6px; }
.hero-kicker { border: var(--lg-garis); border-radius: 8px; background: #fff; color: var(--lg-tinta); box-shadow: var(--lg-bayang-kecil); }
/* sorot sedikit lebih terang supaya efeknya jelas terlihat di latar gelap */
.glow-bulat { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.26), transparent); }
.glow-bulat::after { opacity: 0.9; }

/* pita tipis di dasar hero, meniru pita di atas lambang */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(135deg, var(--lg-tinta) 0 14px, #fff 14px 28px);
  opacity: 0.9; pointer-events: none;
}
.hero { position: relative; }

/* ---------- Tombol: datar, garis tegas, bayangan keras ---------- */
.btn {
  border: var(--lg-garis) !important; border-radius: 10px; font-weight: 700;
  box-shadow: var(--lg-bayang-kecil); transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--lg-tinta); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--lg-tinta); }
.btn-emas { background: var(--lg-biru); color: #fff; }
.btn-emas:hover { background: var(--lg-biru-tua); color: #fff; }
.btn-tinta, .btn-solid { background: var(--lg-tinta); color: #fff; }
.btn-garis { background: #fff; color: var(--lg-tinta); }

/* tombol di atas latar gelap: garis putih, bayangan hitam */
.hero .btn, .cta .btn, .angka-band .btn, .video-band .btn, .site-footer .btn, .nav-sheet-foot .btn {
  border-color: #fff !important; box-shadow: 3px 3px 0 #000;
}
.hero .btn:hover, .cta .btn:hover, .angka-band .btn:hover, .video-band .btn:hover { box-shadow: 4px 4px 0 #000; }
.hero .btn-emas, .cta .btn-emas, .angka-band .btn-emas, .video-band .btn-emas { background: #fff; color: var(--lg-tinta); }
.hero .btn-emas:hover, .cta .btn-emas:hover { background: #e8eef4; color: var(--lg-tinta); }
.hero .btn-garis, .cta .btn-garis { background: transparent; color: #fff; }

/* ---------- Kartu: bingkai tegas ala bingkai segi lima lambang ---------- */
.fakta, .pimpinan, .baris, .post, .faq details, .jalan-langkah, .apl-kartu, .testi-kartu,
.eks-kartu, .guru-kartu, .ag-item, .ed-info, .ed-lain, .bd-lain, .bd-bagikan, .acara-kartu,
.struktur li, .data-pokok, .tabel-bungkus, .kartu-form, .daftar-status, .df-intro, .df-form,
.ed-sampul, .kontak-info li {
  background: #fff; border: var(--lg-garis); border-radius: 14px; box-shadow: var(--lg-bayang);
}
.fakta { box-shadow: var(--lg-bayang); }
.fakta .item, .data-pokok dl > div { border-color: rgba(11, 29, 46, 0.18); }
.eks-kartu:hover, .guru-kartu:hover, .bd-lain:hover, .ed-lain:hover, .apl-kartu:hover {
  border-color: var(--lg-tinta); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--lg-biru);
}
.foto, .post-foto img, .bd-sampul img, .ed-sampul img { border-radius: 12px; }
.foto { box-shadow: var(--lg-bayang); border: var(--lg-garis); }
.guru-foto { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lg-biru); }
.baris .icon, .ed-baris .icon { background: var(--lg-biru); color: #fff; border: var(--lg-garis); box-shadow: none; }

/* ---------- Pita penuh jadi blok biru datar ---------- */
.cta, .angka-band, .video-band {
  margin-inline: 0; border-radius: 0; box-shadow: none; background: var(--lg-biru);
  border-top: 3px solid var(--lg-tinta); border-bottom: 3px solid var(--lg-tinta);
}
.site-footer { border-radius: 0; box-shadow: none; border-top: 3px solid var(--lg-tinta); background: var(--lg-biru-tua); }
.osis-lambang { border-radius: 14px; box-shadow: var(--lg-bayang); }

/* ---------- Judul seksi: penanda segi lima ---------- */
.seksi h2, .seksi-kepala h2 { letter-spacing: -0.01em; color: var(--lg-tinta); }
.seksi-kepala h2::before, .seksi .wrap > div > h2:first-child::before {
  content: ""; display: block; width: 28px; height: 26px; margin-bottom: 12px;
  background: var(--lg-biru); clip-path: var(--lg-segilima);
}
.dark h2, .angka-band h2, .cta h2, .video-band h2 { color: #fff; }
.dark h2::before, .angka-band h2::before, .cta h2::before, .video-band h2::before { background: #fff; }
.seksi.kertas { background: #e8eef4; box-shadow: none; border-block: 2px solid rgba(11, 29, 46, 0.12); }

/* ---------- Isian, chip, dialog ---------- */
.field input, .field textarea, .field select, .cari input,
.fl input, .fl textarea, .fl select, .login-panel .input {
  background-color: #fff; border: 2px solid rgba(11, 29, 46, 0.45); border-radius: 10px; box-shadow: none;
}
.field input:focus, .field textarea:focus, .field select:focus, .cari input:focus,
.fl input:focus, .fl textarea:focus, .fl select:focus, .login-panel .input:focus {
  border-color: var(--lg-biru); box-shadow: 0 0 0 3px rgba(40, 77, 103, 0.25);
}
.chip, .salin { border-radius: 8px; border: var(--lg-garis); box-shadow: var(--lg-bayang-kecil); }
.chip[aria-pressed="true"], .subnav a[aria-current="true"] { background: var(--lg-biru); color: #fff; }
.login-dlg, dialog.artikel { border-radius: 16px; border: var(--lg-garis); box-shadow: 8px 8px 0 var(--lg-tinta); }
.df-dot { border: var(--lg-garis); box-shadow: none; }
.df-steps li.is-current .df-dot { background: var(--lg-biru); }
.melayang-daftar { background: var(--lg-biru); border: 2px solid #fff; box-shadow: 3px 3px 0 #000; }

@media (prefers-reduced-motion: reduce) {
  .btn, .eks-kartu, .guru-kartu, .bd-lain, .ed-lain, .apl-kartu { transition: none; transform: none !important; }
}

/* =====================================================================
   3.82.6 — perbaikan hasil audit HP/PC
   ===================================================================== */
/* header selalu solid: teks hero tidak boleh tembus ke bawah header saat digulir */
.site-header.is-stuck::before, .lite .site-header.is-stuck::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header { isolation: isolate; }

/* kartu fakta di HP: kolom tidak boleh melebar melewati kartu (isi lama terpotong di kanan) */
.fakta dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fakta { overflow: hidden; }
@media (max-width: 899px) {
  .fakta .item { min-width: 0; padding: 16px 10px 16px 14px; }
  .fakta .item:first-child { padding: 20px 18px 18px; }
  .fakta .item:nth-child(n+2) dt { font-size: clamp(0.5rem, 2.55vw, 0.6875rem); letter-spacing: 0.04em; overflow-wrap: normal; word-break: normal; }
  .fakta .item:nth-child(n+2) { padding-inline: 12px 6px; }
  .fakta .item:nth-child(n+2) dd { font-size: clamp(1.45rem, 6.6vw, 2rem); overflow-wrap: anywhere; }
}
@media (min-width: 900px) { .fakta dl { grid-template-columns: 1.55fr 1fr 1fr 1fr; } }

/* HP: titik slider tidak boleh menimpa tombol; tombol garis terbaca di atas foto */
@media (max-width: 899px) {
  .hero-foto-teks { padding-bottom: 46px; }
  .hero-foto-titik { bottom: 76px; }
  .hero-foto::after { background: linear-gradient(to top, rgba(4, 10, 18, 0.78), rgba(4, 10, 18, 0.38) 46%, transparent 76%); }
}
.hero .btn-garis { background: rgba(4, 10, 18, 0.55); border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.hero .btn-garis:hover { background: rgba(4, 10, 18, 0.72); }

/* ---------- Token biru tambahan (3.83.0) ---------- */
:root {
  --biru: #1e4d7b;
  --biru-tua: #143554;
  --biru-muda: #3a7ab5;
  --biru-soft: #e8f1f8;
  --biru-pucat: #f4f8fc;
}

/* ---------- Jurusan (3.83.0) ----------
   Kartu jurusan di Beranda; isinya dari dashboard admin (Isi beranda > Jurusan). */
.jur-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .jur-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .jur-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.jur-kartu {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; color: var(--teks, var(--lg-tinta)); border: var(--lg-garis); border-radius: 16px;
  box-shadow: var(--lg-bayang); transition: transform 0.15s, box-shadow 0.15s;
}
.jur-kartu:hover { transform: translateY(-3px); }
.jur-media {
  position: relative; display: grid; place-items: center; min-height: 128px; overflow: hidden;
  background: var(--biru-soft); color: var(--biru);
}
.jur-kartu.ada-foto .jur-media { min-height: 0; aspect-ratio: 16 / 9; }
.jur-media img { width: 100%; height: 100%; object-fit: cover; }
.jur-ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--biru); color: var(--biru); }
.jur-ikon .icon { width: 28px; height: 28px; }
.jur-singkat {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--biru); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
}
.jur-isi { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
.jur-isi h3 { font-size: 1.125rem; line-height: 1.3; color: var(--biru-tua); overflow-wrap: anywhere; }
.jur-desk { font-size: 0.9375rem; line-height: 1.55; color: var(--teks, var(--lg-tinta)); }
.jur-komp { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.jur-komp li { position: relative; padding-left: 20px; font-size: 0.875rem; line-height: 1.45; }
.jur-komp li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--biru-muda); }
.jur-prospek { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(20, 53, 84, 0.14); font-size: 0.8125rem; line-height: 1.5; color: var(--teks-redup, #4a657a); }
.jur-prospek strong { color: var(--biru-tua); }
@media (prefers-reduced-motion: reduce) { .jur-kartu { transition: none; } .jur-kartu:hover { transform: none; } }