/* SMK Darul Mukminin — tema publik "Navy Khas" (3.92.0)
   Dimuat PALING AKHIR di halaman publik (bukan portal, bukan dashboard admin).
   Prinsip:
   - Biru navy yang tenang sebagai warna utama (bukan biru terang yang menyilaukan) di atas kertas putih-kebiruan yang lembut.
   - Satu aksen hangat: emas tua. Dipakai hemat, hanya sebagai penanda (segilima lambang, garis, tepi kartu), tidak untuk teks kecil di latar terang.
   - Teks gelap kebiruan (bukan hitam pekat), jarak baris lega, bayangan lembut: nyaman dibaca lama, termasuk di HP.
   - Hampir semua warna lama berasal dari token di :root, jadi cukup token yang diganti; sisanya penajaman di bawah. */

:root {
  /* navy */
  --tinta: #0c2447;
  --tinta-dalam: #081a38;
  --laut: #1a3d6e;
  --emas: #1d4a86;
  --emas-terang: #4a7bbd;
  --emas-tua: #0f2d57;
  --kertas: #f5f7fb;
  --kertas-dalam: #e8edf6;
  --kartu: #fcfdff;
  --teks: #13233d;
  --teks-redup: #4a5b74;
  --garis: #d6deeb;
  --garis-kuat: #bccadd;

  --biru: #1d4a86;
  --biru-tua: #0f2d57;
  --biru-muda: #4a7bbd;
  --biru-soft: #e8eff9;
  --biru-pucat: #f5f8fd;
  --lg-biru: #1d4a86;
  --lg-biru-tua: #0f2d57;
  --cl-canvas: #f5f7fb;
  --cl-well: #e3e9f3;

  /* aksen khas: emas tua (penanda, bukan teks kecil di latar terang) */
  --khas: #c9a24d;
  --khas-terang: #e6c77d;
  --khas-tua: #8a6a1f;

  --bu-garis: 1px solid rgba(15, 45, 87, 0.13);
  --bu-bayang: 0 1px 2px rgba(15, 45, 87, 0.05), 0 14px 30px -18px rgba(15, 45, 87, 0.30);
  --bu-bayang-naik: 0 2px 4px rgba(15, 45, 87, 0.07), 0 24px 40px -20px rgba(15, 45, 87, 0.38);
  --k-bayang: var(--bu-bayang);
  --k-bayang-naik: var(--bu-bayang-naik);
  --r-clay: 18px;
}
.dark, .visi, .osis-lambang, dialog.lightbox, .toast {
  --emas: #9cc2f0;
  --emas-terang: #c3dbf7;
  --on-emas: #0c2447;
}

/* ---------- Dasar: nyaman dibaca ---------- */
html { scroll-padding-top: 88px; }
body { background: var(--kertas); color: var(--teks); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .page-hero h1 { letter-spacing: -0.012em; text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: rgba(201, 162, 77, 0.38); color: #0c2447; }
:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: 2px; }
.dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible { outline-color: var(--khas-terang); }

/* ---------- Header: kertas lembut + garis navy berujung emas ---------- */
.site-header { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--biru-tua) 0, var(--biru-tua) 70%, var(--khas) 70%, var(--khas) 100%) 1; box-shadow: 0 10px 26px -20px rgba(15, 45, 87, 0.5); }
.site-header::before, .site-header.is-stuck::before { background: #fbfcfe; }
.nav-desktop a { color: #1a3358; }
.nav-desktop a[aria-current="page"], .nav-desktop a.is-aktif { color: var(--biru-tua); }
.nav-sub { border-radius: 16px; }

/* ---------- Tombol ---------- */
.btn-emas, .btn-tinta, .btn-solid { background: linear-gradient(180deg, #235aa3 0%, var(--biru) 100%); color: #fff; border-color: var(--biru) !important; }
.btn-emas:hover, .btn-tinta:hover, .btn-solid:hover { background: var(--biru-tua); color: #fff; }
.btn-garis { background: transparent; color: var(--biru-tua); border-color: rgba(15, 45, 87, 0.55) !important; }
.btn-garis:hover { background: var(--biru-soft); }
.hero .btn-emas, .cta .btn-emas, .angka-band .btn-emas, .video-band .btn-emas { background: #fbfcfe; color: var(--biru-tua); border-color: #fbfcfe !important; }
.hero .btn-emas:hover, .cta .btn-emas:hover { background: var(--khas-terang); color: #0c2447; border-color: var(--khas-terang) !important; }
.hero .btn-garis, .cta .btn-garis, .page-hero .btn-garis { color: #fff; border-color: rgba(255, 255, 255, 0.6) !important; }

/* ---------- Hero: navy dalam, pola Monas samar, garis emas tipis di dasar ---------- */
.hero, .page-hero { background-color: var(--tinta); background-image: radial-gradient(120% 90% at 50% 0%, rgba(74, 123, 189, 0.22) 0%, rgba(12, 36, 71, 0) 60%), linear-gradient(180deg, #0f2b55 0%, var(--tinta) 55%, var(--tinta-dalam) 100%); }
.hero::after { height: 3px; background: linear-gradient(90deg, transparent 0, rgba(201, 162, 77, 0.0) 8%, var(--khas) 50%, rgba(201, 162, 77, 0.0) 92%, transparent 100%); opacity: 0.85; }
.page-hero { position: relative; border-bottom: 0; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent 0, var(--khas) 50%, transparent 100%); opacity: 0.7; pointer-events: none; }
.hero h1, .page-hero h1 { color: #fbfcfe; }
.hero-lede, .page-hero .lede { color: rgba(236, 242, 252, 0.86); }
.hero-lokasi { border-color: rgba(230, 199, 125, 0.55); color: #f4e8c8; }
.hero-kicker { background: rgba(230, 199, 125, 0.16); color: #f4e8c8; border: 1px solid rgba(230, 199, 125, 0.4); box-shadow: none; }
.crumb a { color: rgba(236, 242, 252, 0.86); }

/* ---------- Penanda khas: segilima lambang berwarna emas di judul seksi ---------- */
.seksi-kepala h2::before, .seksi .wrap > div > h2:first-child::before { background: var(--khas); }
.seksi .dark h2::before, .dark .seksi-kepala h2::before { background: var(--khas-terang); }
.seksi h2, .seksi-kepala h2, .seksi h3 { color: var(--biru-tua); }
.seksi-kepala .lede, .baris p { color: #34475f; }
.tautan { color: var(--biru); }
.tautan:hover { color: var(--biru-tua); text-decoration-color: var(--khas); }

/* ---------- Kartu: kertas lembut (bukan putih menyilaukan), tepi navy tipis, sorot emas saat disentuh ---------- */
.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, .tentang-isi, .kosong, .kosong-info,
.bkk-lulusan-atas, .bkk-ringkas-kartu, .bkk-alumni, .bkk-lowongan, .bkk-blok, .bkk-jurusan-kartu, .bkk-tabel-bungkus, details.bkk-jurusan-blok,
.seksi .baris-daftar .baris, .fakta .item { background: var(--kartu); border-radius: 18px; }
.eks-kartu:hover, .guru-kartu:hover, .bd-lain:hover, .ed-lain:hover, .apl-kartu:hover, .post:hover { border-color: rgba(201, 162, 77, 0.7); }
.fakta .item { border-top: 3px solid var(--khas); }
.stat-ikon { background: var(--biru-soft); color: var(--biru); }
.baris .icon, .seksi .baris-daftar .baris .icon { background: linear-gradient(180deg, #235aa3, var(--biru)); }
.seksi.kertas { background: var(--kertas-dalam); }
.input, .textarea, .select, .df-form input:not([type=checkbox]):not([type=radio]), .df-form select, .df-form textarea { background: #fdfdff; border-color: rgba(15, 45, 87, 0.3); }
.input:focus, .textarea:focus, .select:focus, .df-form input:focus, .df-form select:focus, .df-form textarea:focus { border-color: var(--biru); outline-color: rgba(74, 123, 189, 0.4); }

/* ---------- Pita penuh dan footer: navy dalam, tepi emas ---------- */
.cta, .angka-band, .video-band { background: linear-gradient(180deg, #1a4a8a 0%, var(--tinta) 100%); }
.site-footer { background: var(--tinta-dalam); border-top: 3px solid var(--khas); color: rgba(230, 238, 250, 0.78); }
.footer-links a, .site-footer .kontak-baris a { color: rgba(230, 238, 250, 0.78); }
.footer-links a:hover, .site-footer .kontak-baris a:hover { color: var(--khas-terang); }
.site-footer h4 { color: #fbfcfe; }

/* ---------- BKK dan lulusan: mengikuti tema ---------- */
.bkk-besar-angka, .bkk-jurusan-angka strong { color: var(--biru-tua); }
.bkk-bilah { background: var(--biru-soft); }
.bkk-bagian + .bkk-bagian { border-left-color: var(--kartu); }
.bkk-sg-bekerja { --sg: #1d4a86; }
.bkk-sg-wirausaha { --sg: #1f7a74; }
.bkk-sg-kuliah { --sg: #a9791a; }
.bkk-sg-mencari { --sg: #8a4545; }
.bkk-sg-belum { --sg: #8a9ab0; }
.bkk-tabel thead th { background: var(--biru-soft); }
.bkk-lamar { white-space: normal; }

/* ---------- HP: ruang napas dan sentuhan nyaman ---------- */
@media (max-width: 640px) {
  body { line-height: 1.68; }
  .seksi-kepala h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .btn { min-height: 48px; }
}

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

/* ---------- Tombol melayang: bayangan lembut, bukan blok hitam ---------- */
.melayang-daftar { background: linear-gradient(180deg, #235aa3, var(--biru)); border: 2px solid #fbfcfe; box-shadow: 0 12px 26px -10px rgba(12, 36, 71, 0.65); }
.melayang-daftar:hover { background: var(--biru-tua); }