/* =====================================================================
   BIRU PUBLIK (3.84.0) — situs publik modern & bersih, aksen biru lambang

   Dimuat SETELAH identitas.css. Bahasa visual: kartu putih dengan bayangan lembut
   dan garis tipis biru-abu (bukan garis hitam + bayangan keras), tombol biru solid,
   ruang napas lebih lega. Tipografi (Literata + Public Sans), hero gelap, token tinta/kertas
   dan semua JS tidak berubah.
   Untuk kembali: hapus <link> biru.css di tiap halaman.
   ===================================================================== */

:root {
  --biru: #1e4d7b;
  --biru-tua: #143554;
  --biru-muda: #3a7ab5;
  --biru-soft: #e8f1f8;
  --biru-pucat: #f4f8fc;

  --bu-garis: 1px solid rgba(20, 53, 84, 0.14);
  --bu-bayang: 0 1px 2px rgba(20, 53, 84, 0.06), 0 12px 28px -14px rgba(20, 53, 84, 0.28);
  --bu-bayang-naik: 0 2px 4px rgba(20, 53, 84, 0.08), 0 22px 40px -16px rgba(20, 53, 84, 0.36);

  /* identitas.css memakai variabel ini untuk garis & bayangan tegas: ganti jadi lembut */
  --lg-garis: 1px solid rgba(20, 53, 84, 0.16);
  --lg-bayang: var(--bu-bayang);
  --lg-bayang-kecil: 0 1px 2px rgba(20, 53, 84, 0.12), 0 6px 14px -6px rgba(20, 53, 84, 0.35);
  --clay-timbul: var(--bu-bayang);
  --clay-gelap: var(--bu-bayang);
  --clay-putih: var(--bu-bayang);
  --clay-lekuk: inset 0 0 0 1px rgba(20, 53, 84, 0.14);
  --clay-tekan: inset 0 0 0 1px rgba(20, 53, 84, 0.2);
  --r-clay: 16px;
}

body { background: var(--biru-pucat); }
.seksi.kertas { background: var(--biru-soft); border-block: 0; }

/* ---------- Header: solid, garis biru tipis ---------- */
.site-header { border-bottom: 1px solid rgba(20, 53, 84, 0.12); box-shadow: 0 1px 0 #fff, 0 8px 24px -18px rgba(20, 53, 84, 0.4); }
.site-header::before, .site-header.is-stuck::before { background: #fff; }
.nav-sub { border: var(--bu-garis); box-shadow: var(--bu-bayang-naik); }
.nav-sheet .link { border: var(--bu-garis); box-shadow: none; }
.nav-sheet .link[aria-current="page"], .nav-sheet .link-daftar { background: var(--biru); color: #fff; box-shadow: none; }

/* ---------- Tombol: biru solid + putih; sekunder outline biru ---------- */
.btn { border: 1px solid transparent !important; border-radius: 999px; box-shadow: 0 6px 14px -8px rgba(20, 53, 84, 0.6); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(20, 53, 84, 0.65); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-emas, .btn-tinta, .btn-solid { background: var(--biru); 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: #fff; color: var(--biru); border-color: var(--biru) !important; box-shadow: none; }
.btn-garis:hover { background: var(--biru-soft); box-shadow: none; }
.hero .btn, .cta .btn, .angka-band .btn, .video-band .btn, .site-footer .btn, .nav-sheet-foot .btn { box-shadow: 0 8px 18px -10px #000; }
.hero .btn-emas, .cta .btn-emas, .angka-band .btn-emas, .video-band .btn-emas { background: #fff; color: var(--biru-tua); border-color: #fff !important; }
.hero .btn-emas:hover, .cta .btn-emas:hover { background: var(--biru-soft); color: var(--biru-tua); }
.hero .btn-garis, .cta .btn-garis { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7) !important; }
.hero .btn-garis:hover, .cta .btn-garis:hover { background: rgba(255, 255, 255, 0.12); }
.nav-desktop a.nav-daftar, .nav-desktop a.nav-kontak { border-radius: 999px; box-shadow: none; border: 0; }
.nav-desktop a.nav-daftar:hover, .nav-desktop a.nav-kontak:hover { transform: none; box-shadow: none; }

/* ---------- Hero: tanpa pita zebra; ruang bawah lega untuk kartu statistik ---------- */
.hero::after { height: 0; background: none; }
.hero-lokasi { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 6px 16px; }
.hero-kicker { border: 0; border-radius: 999px; box-shadow: 0 8px 18px -10px #000; }

/* ---------- Kartu statistik (NPSN / Akreditasi / Status / Izin) ---------- */
.fakta-wrap { margin-top: -64px; padding-bottom: 8px; }
@media (min-width: 900px) { .fakta-wrap { margin-top: -84px; } }
.fakta { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; border-radius: 0; }
.fakta dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .fakta dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.fakta .item, .fakta .item:first-child, .fakta .item:nth-child(n+2) {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  min-width: 0; padding: 20px 12px 18px; background: #fff; border: var(--bu-garis); border-radius: 18px;
  box-shadow: var(--bu-bayang); transition: transform 0.2s, box-shadow 0.2s;
}
.fakta .item + .item { border-left: var(--bu-garis); }
.fakta .item:hover { transform: translateY(-3px); box-shadow: var(--bu-bayang-naik); }
.stat-ikon {
  width: 44px; height: 44px; padding: 11px; margin-bottom: 8px; border-radius: 14px;
  background: var(--biru-soft); color: var(--biru); stroke-width: 1.8;
}
.fakta dd { order: 1; margin: 0; font: 700 clamp(1.5rem, 6vw, 2rem)/1.1 var(--font-judul); color: var(--biru-tua); overflow-wrap: anywhere; }
.fakta dt, .fakta .item:nth-child(n+2) dt {
  order: 2; font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; font-weight: 600; color: var(--teks-redup); overflow-wrap: normal; word-break: normal;
}
.stat-ikon { order: 0; }
.fakta dl .item, .fakta dl .item:first-child, .fakta dl .item:nth-child(n+2) { grid-column: auto !important; justify-content: flex-start; }
.fakta dl .item dd, .fakta dl .item:first-child dd, .fakta dl .item:nth-child(n+2) dd { font-size: clamp(1.35rem, 5.6vw, 1.9rem); line-height: 1.15; }
.fakta dl .item dt, .fakta dl .item:first-child dt { font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; }

/* ---------- Kartu umum: lembut ---------- */
.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 {
  border: var(--bu-garis); border-radius: 18px; box-shadow: var(--bu-bayang);
}
.eks-kartu:hover, .guru-kartu:hover, .bd-lain:hover, .ed-lain:hover, .apl-kartu:hover, .post:hover {
  border-color: rgba(30, 77, 123, 0.4); transform: translateY(-3px); box-shadow: var(--bu-bayang-naik);
}
.foto { border: 0; box-shadow: var(--bu-bayang); border-radius: 16px; }
.guru-foto { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--biru-muda); }

/* ---------- "Yang kami tekankan": kontras naik, kartu sendiri ---------- */
.baris-daftar { gap: 16px; }
.baris-daftar.dua { column-gap: 20px; }
.baris, .baris:last-child { background: #fff; padding: 22px 22px; border-top: var(--bu-garis); border-bottom: var(--bu-garis); }
.baris-daftar.dua .baris:nth-last-child(2) { border-bottom: var(--bu-garis); }
.baris h3 { color: var(--biru-tua); }
.baris p { color: #2b4257; }
.baris .icon { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border: 0; border-radius: 12px; background: var(--biru); color: #fff; }
.baris-utama { background: var(--biru-soft); border-color: rgba(30, 77, 123, 0.3); }

/* ---------- Judul seksi ---------- */
.seksi h2, .seksi-kepala h2 { color: var(--biru-tua); }
.seksi-kepala h2::before, .seksi .wrap > div > h2:first-child::before { width: 24px; height: 22px; margin-bottom: 10px; background: var(--biru-muda); }
.seksi-kepala .lede { color: #2b4257; }
.tautan { color: var(--biru); font-weight: 600; }

/* ---------- Pita penuh: biru tua rata, tanpa garis hitam tebal ---------- */
.cta, .angka-band, .video-band { background: linear-gradient(180deg, var(--biru) 0%, var(--biru-tua) 100%); border-block: 0; }
.site-footer { border-top: 0; }

/* ---------- Tab profil ---------- */
.tab-bar { display: inline-flex; gap: 4px; padding: 5px; margin: 8px 0 24px; background: var(--biru-soft); border-radius: 999px; }
.tab-bar[hidden] { display: none; }
.tab-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: 600 0.9375rem/1 var(--font-isi); color: var(--biru-tua);
  padding: 12px 22px; min-height: 44px; border-radius: 999px; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.tab-btn:hover { background: rgba(30, 77, 123, 0.1); }
.tab-btn.is-aktif { background: var(--biru); color: #fff; box-shadow: 0 6px 14px -8px rgba(20, 53, 84, 0.7); }
.tab-btn:focus-visible { outline: 3px solid var(--biru-muda); outline-offset: 2px; }
.tab-panel:not(.is-aktif) { display: none !important; }
.tentang-isi { max-width: 62rem; display: grid; gap: 22px; justify-items: start; padding: clamp(22px, 4vw, 36px); background: #fff; border: var(--bu-garis); border-radius: 20px; box-shadow: var(--bu-bayang); }
.tentang-isi .prose { max-width: none; }
.vm-tautan { margin-top: 20px; }

/* ---------- Empty state yang membantu ---------- */
.kosong, .kosong-info {
  text-align: center; padding: 36px 20px; background: #fff; border: 1.5px dashed rgba(30, 77, 123, 0.35); border-radius: 18px; color: #2b4257; box-shadow: none;
}

/* ---------- Formulir (PPDB / daftar) ---------- */
.df-form, .kartu-form { padding: clamp(20px, 4vw, 36px); }
.input, .textarea, .select, .df-form input:not([type=checkbox]):not([type=radio]), .df-form select, .df-form textarea {
  border-radius: 12px; border: 1.5px solid rgba(20, 53, 84, 0.28); background: #fff; box-shadow: none;
}
.input:focus, .textarea:focus, .select:focus, .df-form input:focus, .df-form select:focus, .df-form textarea:focus {
  border-color: var(--biru); outline: 3px solid rgba(58, 122, 181, 0.35); outline-offset: 0;
}
@media (min-width: 720px) { .df-form .df-grid, .df-form .df-baris { gap: 18px 24px; } }

@media (prefers-reduced-motion: reduce) {
  .fakta .item, .btn, .tab-btn { transition: none; }
  .fakta .item:hover, .btn:hover { transform: none; }
}

/* ---------- Spesifisitas: kartu "Yang kami tekankan" & judul di atas latar gelap ---------- */
.seksi .baris-daftar .baris { background: #fff; color: var(--teks); border: var(--bu-garis); box-shadow: var(--bu-bayang); }
.seksi .baris-daftar .baris h3 { color: var(--biru-tua); }
.seksi .baris-daftar .baris p { color: #2b4257; }
.seksi .baris-daftar .baris .icon { background: var(--biru); color: #fff; }
.seksi .baris-daftar .baris-utama { background: var(--biru-soft); border-color: rgba(30, 77, 123, 0.35); }
.seksi .dark h2, .seksi .dark .lede, .seksi .dark p, .dark .seksi-kepala h2 { color: #fff; }
.seksi .dark .lede, .seksi .dark p { color: rgba(255, 255, 255, 0.88); }
.seksi .dark h2::before { background: #fff; }
.seksi .tur-ajakan { background: linear-gradient(180deg, var(--biru) 0%, var(--biru-tua) 100%); border: 0; border-radius: 22px; }
.seksi .baris-daftar li.baris.baris-utama { background: var(--biru-soft) !important; color: var(--teks) !important; border-color: rgba(30, 77, 123, 0.35) !important; }
.seksi .baris-daftar li.baris.baris-utama h3 { color: var(--biru-tua) !important; }
.seksi .baris-daftar li.baris.baris-utama p { color: #2b4257 !important; }
.seksi .baris-daftar li.baris.baris-utama .icon { background: var(--biru) !important; color: #fff !important; border: 0 !important; }

/* ---------- Formulir PPDB: dua kolom bersih (≥720px), satu kolom di HP ---------- */
.df-steps li.is-current .df-dot { background: var(--biru); border-color: var(--biru); color: #fff; }
.df-steps li.is-done .df-dot { background: var(--biru-muda); border-color: var(--biru-muda); color: #fff; }
.df-steps::before { background: #d3e0ec; }
.df-steps::after { background: var(--biru-muda); }
.df-steps li.is-current .df-slabel, .df-steps li.is-done .df-slabel { color: var(--biru-tua); }
@media (min-width: 720px) {
  .df-step.is-active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
  .df-step.is-active > h2, .df-step.is-active > .df-sub, .df-step.is-active > .df-review,
  .df-step.is-active > .df-ortu, .df-step.is-active > .df-agree, .df-step.is-active > .df-group,
  .df-step.is-active > [data-field="alamat"], .df-step.is-active > [data-field="catatan"] { grid-column: 1 / -1; }
  .df-step.is-active > .fl, .df-step.is-active > .df-group { margin: 0; }
}
.df-opt .df-card { border-radius: 14px; }
.df-ortu { background: var(--biru-pucat); border: var(--bu-garis); border-radius: 16px; padding: 18px; }