/* ============================================================
   SPMB Al-Azhar Syifa Budi Jatibening — Design System v3 (Clean)
   Putih dominan · Navy dongker #212265 · Aksen hijau #6cbd44
   ============================================================ */

:root {
    --spmb-navy: #212265;
    --spmb-navy-soft: #34368a;
    --spmb-green: #6cbd44;
    --spmb-green-dark: #4e9a2e;
    --spmb-ink: #23244a;
    --spmb-muted: #6b6e85;
    --spmb-paper: #ffffff;
    --spmb-surface: #f7f8fb;
    --spmb-line: #e6e8f0;
    --spmb-shadow: 0 1px 2px rgba(33, 34, 101, 0.05), 0 8px 24px rgba(33, 34, 101, 0.06);
    --spmb-radius: 1rem;

    /* Latar bertona navy sangat lembut — dipakai untuk merenggangkan ritme
       antar-bagian tanpa keluar dari kombinasi warna khas (navy/hijau). */
    --spmb-tint: #f2f3fa;
    --spmb-shadow-lg: 0 24px 48px -18px rgba(33, 34, 101, 0.22);

    /* Alias kompatibilitas (dipakai blade lama) */
    --spmb-blue: var(--spmb-navy);
    --spmb-blue-2: var(--spmb-navy-soft);
    --spmb-green-2: var(--spmb-green);
    --spmb-accent: var(--spmb-green);
    --spmb-gradient: var(--spmb-navy);
}

[data-bs-theme="dark"] {
    --spmb-ink: #e9eaf5;
    --spmb-muted: #9ea1bd;
    --spmb-paper: #101126;
    --spmb-surface: #181a33;
    --spmb-tint: #171938;
    --spmb-line: #2a2c4d;
    --spmb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --spmb-shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, 0.55);
}

body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    background: var(--spmb-paper);
    color: var(--spmb-ink);
}

.font-display { font-weight: 800; letter-spacing: -0.02em; color: var(--spmb-navy); }
[data-bs-theme="dark"] .font-display { color: #fff; }
.text-muted { color: var(--spmb-muted) !important; }
.text-accent { color: var(--spmb-green); }

/* ---------- Hierarki judul bagian: konsisten di seluruh landing page ---------- */
.section-pad { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; }
.section-band { background: var(--spmb-tint); }
.section-lead { color: var(--spmb-muted); max-width: 46rem; }

/* ---------- Navbar: identitas rapi, sedikit lebih lega ---------- */
.navbar.spmb-navbar {
    backdrop-filter: saturate(1.1) blur(6px);
    transition: box-shadow .2s ease;
}
.spmb-navbar .navbar-brand span.fw-bold {
    font-size: .92rem;
    letter-spacing: .02em;
}
.spmb-navbar .nav-link {
    color: var(--spmb-ink);
    font-weight: 600;
    font-size: .92rem;
    padding: .5rem .9rem !important;
    position: relative;
}
.spmb-navbar .nav-link::after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: .9rem; right: .9rem; bottom: .2rem;
    height: 2px;
    background: var(--spmb-green);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}
.spmb-navbar .nav-link:hover::after,
.spmb-navbar .nav-link.active::after { transform: scaleX(1); }
.spmb-navbar .nav-link:hover { color: var(--spmb-navy); }
[data-bs-theme="dark"] .spmb-navbar .nav-link { color: var(--spmb-ink); }
.spmb-navbar .vr-soft { width: 1px; height: 24px; background: var(--spmb-line); }

/* ---------- Kartu (clean: putih, border tipis, bayangan lembut) ---------- */
.glass {
    background: var(--spmb-paper);
    border: 1px solid var(--spmb-line);
    border-radius: var(--spmb-radius);
    box-shadow: var(--spmb-shadow);
}
[data-bs-theme="dark"] .glass { background: var(--spmb-surface); }

.rounded-spmb { border-radius: var(--spmb-radius); }

/* ---------- Tombol ---------- */
.btn-spmb {
    background: var(--spmb-navy);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 1.6rem;
    font-weight: 600;
    transition: background 0.15s ease;
}
.btn-spmb:hover { color: #fff; background: var(--spmb-navy-soft); }

.btn-outline-spmb {
    border: 1.5px solid var(--spmb-navy);
    color: var(--spmb-navy);
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    background: transparent;
}
.btn-outline-spmb:hover { background: var(--spmb-navy); color: #fff; }
[data-bs-theme="dark"] .btn-outline-spmb { border-color: #8b8ee0; color: #b9bbf3; }
[data-bs-theme="dark"] .btn-outline-spmb:hover { background: var(--spmb-navy-soft); color: #fff; }

.btn-green {
    background: var(--spmb-green);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 1.6rem;
    font-weight: 600;
}
.btn-green:hover { background: var(--spmb-green-dark); color: #fff; }

/* ---------- Hero: navy solid, pola bintang-8 sangat halus ---------- */
.hero {
    position: relative;
    background: linear-gradient(160deg, var(--spmb-navy) 0%, #2a2b78 55%, var(--spmb-navy) 100%);
    color: #fff;
    overflow: hidden;
    border-radius: 0 0 2rem 2rem;
    padding-bottom: 3.5rem;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Lapisan hias tidak boleh menghalangi klik pada tombol di dalam hero. */
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M36 6l8.8 12.4L60 14.4 57.6 30 70 36l-12.4 6L60 57.6 44.8 55.2 36 66l-8.8-10.8L12 57.6 14.4 42 2 36l12.4-6L12 14.4l15.2 4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 72px 72px;
}
/* Seluruh isi hero harus berada di atas lapisan hias — bukan hanya .container,
   karena sebagian blok (mis. ajakan mendaftar) tidak memakainya. */
.hero > * { position: relative; z-index: 1; }
.hero .text-accent { color: var(--spmb-green); }
.hero-badge {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
}

/* ---------- Seksi selang-seling putih / abu sangat muda ---------- */
.section-alt { background: var(--spmb-surface); }

/* ---------- Eyebrow ---------- */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--spmb-green-dark);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.section-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--spmb-green);
    border-radius: 2px;
}
[data-bs-theme="dark"] .section-eyebrow { color: var(--spmb-green); }

/* ---------- Journey timeline ---------- */
.journey { position: relative; padding-left: 2.2rem; }
.journey::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    border-radius: 2px;
    background: var(--spmb-line);
    pointer-events: none;
}
.journey-step { position: relative; padding-bottom: 1.6rem; }
.journey-step:last-child { padding-bottom: 0; }
.journey-dot {
    position: absolute;
    left: -2.2rem;
    top: 0.15rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--spmb-paper);
    border: 2.5px solid var(--spmb-navy);
}
.journey-step.done .journey-dot { background: var(--spmb-green); border-color: var(--spmb-green); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Sidebar dashboard ---------- */
.spmb-sidebar {
    width: 264px;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    padding: 1rem;
    transition: transform 0.25s ease;
}
.spmb-sidebar::-webkit-scrollbar { width: 8px; }
.spmb-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }
.spmb-sidebar .nav-link {
    color: var(--spmb-ink);
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.spmb-sidebar .nav-link i { width: 1.25rem; text-align: center; color: var(--spmb-muted); }
.spmb-sidebar .nav-link:hover { background: var(--spmb-surface); }
.spmb-sidebar .nav-link.active { background: var(--spmb-navy); color: #fff; }
.spmb-sidebar .nav-link.active i { color: var(--spmb-green); }
.spmb-main { margin-left: 264px; padding: 1.5rem; min-height: 100vh; background: var(--spmb-surface); }

/* Latar gelap di belakang menu samping saat terbuka (drawer) */
.spmb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(15, 16, 40, 0.5);
    backdrop-filter: blur(1px);
}
[hidden].spmb-backdrop { display: none; }
/* Kunci gulir latar saat menu terbuka */
body.spmb-nav-open { overflow: hidden; }

@media (max-width: 991.98px) {
    .spmb-sidebar { transform: translateX(-110%); box-shadow: none; }
    .spmb-sidebar.show { transform: none; box-shadow: var(--spmb-shadow-lg); }
    .spmb-main { margin-left: 0; padding: 1rem; }

    /* Topbar menempel di atas agar tombol menu selalu terjangkau */
    .spmb-topbar {
        position: sticky;
        top: 0.5rem;
        z-index: 1030;
    }
}

/* Layar ponsel: perbesar target sentuh & cegah zoom otomatis iOS */
@media (max-width: 575.98px) {
    .spmb-main { padding: 0.75rem; }

    /* Target sentuh nyaman (≥ 44px) */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn.btn-sm { min-height: 38px; }
    .spmb-sidebar .nav-link { padding: 0.75rem 0.9rem; }

    /* 16px mencegah Safari iOS memperbesar tampilan saat fokus input */
    .form-control, .form-select { font-size: 16px; min-height: 44px; }

    /* Kartu & tabel lebih rapat, tabel tetap bisa digulir */
    .glass { border-radius: 0.85rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table td, .table th { white-space: nowrap; }

    /* Grup tombol & toolbar membungkus rapi alih-alih meluber */
    .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }

    /* Judul header sedikit lebih kecil agar muat bersama tombol */
    .spmb-topbar h1 { font-size: 0.95rem; }
}

/* ---------- Ikon statistik: tint hijau/navy lembut ---------- */
.stat-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    font-size: 1.3rem;
    color: var(--spmb-navy);
    background: rgba(108, 189, 68, 0.14);
    flex-shrink: 0;
}
[data-bs-theme="dark"] .stat-icon { color: var(--spmb-green); background: rgba(108, 189, 68, 0.12); }

/* ---------- Progress ---------- */
.progress-spmb { height: 0.7rem; border-radius: 999px; background: var(--spmb-line); }
.progress-spmb .progress-bar { background: var(--spmb-green); border-radius: 999px; }

/* ---------- Status kuota gelombang ---------- */
.badge-full {
    background: rgba(108, 189, 68, 0.14);
    color: var(--spmb-green-dark);
    border: 0;
    border-radius: 999px;
    font-weight: 700;
}
.wave-full { position: relative; overflow: hidden; }
.wave-full::after {
    content: "KUOTA PENUH";
    position: absolute;
    top: 1.1rem;
    right: -2.6rem;
    transform: rotate(38deg);
    background: var(--spmb-navy);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.3rem 3rem;
    pointer-events: none;
}

/* ---------- Aksesibilitas ---------- */
:focus-visible { outline: 3px solid var(--spmb-green); outline-offset: 2px; }

/* =========================================================================
   PERBAIKAN KONTRAS TEMA (terang & gelap)
   Membuat variabel warna kustom ikut berganti pada scope lokal
   (mis. kartu ber-data-bs-theme="light" di dalam halaman mode gelap).
   ========================================================================= */

/* Scope terang lokal: kembalikan variabel ke nilai terang */
[data-bs-theme="light"] {
    --spmb-ink: #23244a;
    --spmb-muted: #6b6e85;
    --spmb-paper: #ffffff;
    --spmb-surface: #f7f8fb;
    --spmb-line: #e6e8f0;
    --spmb-shadow: 0 1px 2px rgba(33, 34, 101, 0.05), 0 8px 24px rgba(33, 34, 101, 0.06);
    color: var(--spmb-ink);
}

/* Kartu pada scope terang: latar putih + teks gelap, walau halaman mode gelap */
[data-bs-theme="light"].glass,
[data-bs-theme="light"] .glass {
    background: var(--spmb-paper);
    border-color: var(--spmb-line);
    color: var(--spmb-ink);
}

/* Judul & teks tebal di scope terang tetap navy, bukan putih */
[data-bs-theme="light"] .font-display,
[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6,
[data-bs-theme="light"] strong,
[data-bs-theme="light"] .h6 {
    color: var(--spmb-navy);
}

[data-bs-theme="light"] .text-muted { color: var(--spmb-muted) !important; }
[data-bs-theme="light"] .section-eyebrow { color: var(--spmb-navy); }

/* Tombol garis pada scope terang */
[data-bs-theme="light"] .btn-outline-spmb {
    border-color: var(--spmb-navy);
    color: var(--spmb-navy);
}
[data-bs-theme="light"] .btn-outline-spmb:hover {
    background: var(--spmb-navy);
    color: #fff;
}

/* Titik alur langkah: lingkaran putih bercincin navy pada kartu terang */
[data-bs-theme="light"] .journey-dot {
    background: #fff;
    border-color: var(--spmb-navy);
}
[data-bs-theme="light"] .journey::before { background: var(--spmb-line); }

/* --------- Penyesuaian kontras MODE GELAP (halaman) --------- */

/* Judul di kartu gelap: putih terang, bukan navy */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h6 {
    color: #eceefb;
}
[data-bs-theme="dark"] strong { color: #f2f3fc; }

/* Teks sekunder: naikkan kontras agar tetap nyaman dibaca */
[data-bs-theme="dark"] { --spmb-muted: #b0b3cd; }

/* Tautan agar tidak terlalu gelap di latar gelap */
[data-bs-theme="dark"] a { color: #a9b7ff; }
[data-bs-theme="dark"] a:hover { color: #c9d2ff; }
[data-bs-theme="dark"] a.btn { color: inherit; }

/* Tombol berlatar solid (navy/hijau) HARUS tetap putih di mode gelap.
   Aturan "a.btn { color: inherit }" di atas ditujukan untuk tautan yang
   ditata sebagai tombol garis (outline), namun secara tak sengaja juga
   menimpa tombol berlatar solid seperti .btn-spmb dan .btn-green — membuat
   tulisannya nyaris tak terlihat karena mewarisi warna teks gelap dari induk.
   Aturan berikut mengembalikannya menjadi putih, dengan spesifisitas yang
   lebih tinggi agar selalu menang. */
[data-bs-theme="dark"] a.btn.btn-spmb,
[data-bs-theme="dark"] a.btn.btn-green,
[data-bs-theme="dark"] button.btn-spmb,
[data-bs-theme="dark"] button.btn-green {
    color: #fff;
}
[data-bs-theme="dark"] a.btn.btn-spmb:hover,
[data-bs-theme="dark"] a.btn.btn-green:hover {
    color: #fff;
}
[data-bs-theme="dark"] .navbar a { color: inherit; }

/* ===== Tombol status "Pendaftaran Ditutup / Belum / Segera Dibuka" =====
   Gaya pill solid navy dongker + teks putih + ikon hijau, SAMA di mode terang
   maupun gelap (kontras tinggi, terbaca di semua permukaan). Tidak memakai
   kelas .disabled Bootstrap yang menghapus latar & warna. */
.btn-tutup,
.btn-tutup:disabled,
.btn-tutup.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--spmb-navy) !important;
    color: #ffffff !important;
    border: 1px solid var(--spmb-navy) !important;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: 0 1px 2px rgba(33, 34, 101, 0.18);
    opacity: 1 !important;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-tutup i { color: var(--spmb-green); }

/* Samakan tinggi tombol status di navbar dengan tombol "Masuk"
   (.btn-outline-spmb): padding & border identik agar keduanya sejajar. */
.spmb-navbar .btn-tutup {
    padding: 0.6rem 1.5rem !important;
    border-width: 1.5px !important;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Di mode gelap tetap navy dongker + teks putih, dengan tepi tipis terang
   agar batas pill terlihat di atas permukaan gelap. */
[data-bs-theme="dark"] .btn-tutup,
[data-bs-theme="dark"] .btn-tutup:disabled,
[data-bs-theme="dark"] .btn-tutup.disabled {
    background: var(--spmb-navy) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none;
}
[data-bs-theme="dark"] .btn-tutup i { color: var(--spmb-green); }

/* Varian untuk permukaan yang SELALU gelap (blok hero navy & footer):
   pakai navy lebih terang (navy-soft) + tepi tipis agar menonjol di atas navy. */
.btn-tutup--terang,
.btn-tutup--terang:disabled,
.btn-tutup--terang.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--spmb-navy-soft) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    opacity: 1 !important;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-tutup--terang i { color: var(--spmb-green); }

/* Teks "Pendaftaran Ditutup" pada footer (footer selalu gelap). */
.site-footer span.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

/* Ikon aksen tetap hijau di kedua mode */
[data-bs-theme="dark"] .text-primary { color: var(--spmb-green) !important; }

/* Hero selalu berlatar navy: pastikan teksnya putih di kedua mode */
.hero, .hero h1, .hero h2, .hero h3, .hero p, .hero strong { color: #fff; }
.hero .text-muted { color: rgba(255, 255, 255, 0.75) !important; }
/* kecuali kartu bertema terang di dalam hero */
.hero [data-bs-theme="light"],
.hero [data-bs-theme="light"] h1,
.hero [data-bs-theme="light"] h2,
.hero [data-bs-theme="light"] h3,
.hero [data-bs-theme="light"] strong { color: var(--spmb-navy); }
.hero [data-bs-theme="light"] .text-muted { color: var(--spmb-muted) !important; }
.hero [data-bs-theme="light"] p,
.hero [data-bs-theme="light"] span { color: var(--spmb-ink); }

/* =========================================================================
   PERBAIKAN HERO: latar selalu navy, maka teks WAJIB putih di kedua mode.
   Spesifisitas dinaikkan agar mengalahkan aturan tema (.font-display navy).
   ========================================================================= */
[data-bs-theme="light"] .hero .font-display,
[data-bs-theme="dark"] .hero .font-display,
.hero .font-display,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero p, .hero strong, .hero .lead, .hero li, .hero span {
    color: #fff !important;
}

/* Aksen hijau pada hero tetap hijau */
.hero .text-accent,
[data-bs-theme="light"] .hero .text-accent,
[data-bs-theme="dark"] .hero .text-accent {
    color: var(--spmb-green) !important;
}

/* Teks sekunder pada hero: putih transparan agar tetap terbaca */
.hero .text-muted,
[data-bs-theme="light"] .hero .text-muted,
[data-bs-theme="dark"] .hero .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* PENGECUALIAN — kartu bertema terang DI DALAM hero (mis. "5 Langkah").
   Spesifisitas (0,3,0) mengalahkan aturan hero di atas (0,2,1). */
.hero [data-bs-theme="light"] .font-display,
.hero [data-bs-theme="light"] h1,
.hero [data-bs-theme="light"] h2,
.hero [data-bs-theme="light"] h3,
.hero [data-bs-theme="light"] h4,
.hero [data-bs-theme="light"] h5,
.hero [data-bs-theme="light"] h6,
.hero [data-bs-theme="light"] .h6,
.hero [data-bs-theme="light"] strong {
    color: var(--spmb-navy) !important;
}
.hero [data-bs-theme="light"] p,
.hero [data-bs-theme="light"] span,
.hero [data-bs-theme="light"] li {
    color: var(--spmb-ink) !important;
}
.hero [data-bs-theme="light"] .text-muted {
    color: var(--spmb-muted) !important;
}
.hero [data-bs-theme="light"] .text-accent,
.hero [data-bs-theme="light"] .text-primary {
    color: var(--spmb-green) !important;
}

/* Badge hero tetap kontras di kedua mode */
.hero .hero-badge, .hero .hero-badge span { color: #fff !important; }
.hero .hero-badge .text-accent { color: var(--spmb-green) !important; }

/* =========================================================================
   PENGAMAN PAGINASI
   Bila suatu saat komponen paginasi bawaan (bergaya Tailwind) ikut terpakai,
   ikon SVG-nya tidak akan membesar tak terkendali.
   ========================================================================= */
.pagination svg,
nav[role="navigation"] svg {
    width: 1rem !important;
    height: 1rem !important;
    display: inline-block;
    vertical-align: middle;
}
.pagination { flex-wrap: wrap; gap: 2px; }
.pagination .page-link {
    border-radius: 8px;
    border-color: var(--spmb-line);
    color: var(--spmb-navy);
    font-weight: 600;
}
.pagination .page-item.active .page-link {
    background: var(--spmb-navy);
    border-color: var(--spmb-navy);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--spmb-muted); }
[data-bs-theme="dark"] .pagination .page-link { color: #b9bbf3; background: transparent; }
[data-bs-theme="dark"] .pagination .page-item.active .page-link { background: var(--spmb-navy-soft); color: #fff; }

/* =========================================================================
   GRAFIK — warna & tipografi yang menyesuaikan tema
   ========================================================================= */
:root {
    --spmb-chart-1: #2b2d7d;   /* utama  */
    --spmb-chart-2: #6cbd44;   /* aksen  */
    --spmb-chart-grid: rgba(33, 34, 101, 0.12);
    --spmb-chart-label: #6b6e85;
    --spmb-chart-value: #23244a;
}
[data-bs-theme="dark"] {
    /* navy pekat tidak terbaca di latar gelap — dinaikkan kecerahannya */
    --spmb-chart-1: #8c90ee;
    --spmb-chart-2: #86d95f;
    --spmb-chart-grid: rgba(255, 255, 255, 0.10);
    --spmb-chart-label: #b0b3cd;
    --spmb-chart-value: #e9eaf5;
}

/* ---------- Grafik batang tegak ---------- */
.spmb-bars { display: flex; align-items: flex-end; gap: .5rem; width: 100%; }
.spmb-bars__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.spmb-bars__value {
    font-size: .75rem; font-weight: 700; line-height: 1.2;
    color: var(--spmb-chart-value); margin-bottom: .25rem;
}
.spmb-bars__track { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.spmb-bars__bar {
    width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px;
    background: var(--spmb-chart-1); transition: opacity .15s;
}
.spmb-bars__bar:hover { opacity: .82; }
.spmb-bars__label {
    font-size: .7rem; line-height: 1.25; color: var(--spmb-chart-label);
    text-align: center; margin-top: .4rem; word-break: break-word; hyphens: auto;
}
.spmb-bars__axis { border-top: 1px solid var(--spmb-chart-grid); margin-top: 0; }

/* ---------- Grafik batang mendatar ---------- */
.spmb-hbar__row { margin-bottom: .55rem; }
.spmb-hbar__head { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; }
.spmb-hbar__name { color: var(--spmb-chart-label); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spmb-hbar__val { font-weight: 700; color: var(--spmb-chart-value); flex: none; }
.spmb-hbar__track { height: 7px; border-radius: 4px; background: var(--spmb-chart-grid); overflow: hidden; margin-top: .2rem; }
.spmb-hbar__fill { height: 100%; border-radius: 4px; background: var(--spmb-chart-1); }

/* ---------- Grafik garis ---------- */
.spmb-line__labels { display: flex; margin-top: .35rem; }
.spmb-line__label {
    flex: 1 1 0; min-width: 0; text-align: center;
    font-size: .7rem; color: var(--spmb-chart-label);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Legenda donat ---------- */
.spmb-legend { font-size: .78rem; }
.spmb-legend__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.spmb-legend__name { color: var(--spmb-chart-value); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spmb-legend__val { font-weight: 700; color: var(--spmb-chart-value); }
.spmb-legend__pct { color: var(--spmb-chart-label); }

/* Grafik tetap terbaca saat dicetak */
@media print {
    .spmb-bars__bar, .spmb-hbar__fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =========================================================================
   KARTU JENJANG — header bermotif senada hero, ikon per jenjang
   ========================================================================= */
.level-card {
    border: 1px solid var(--spmb-line);
    border-radius: var(--spmb-radius);
    background: var(--spmb-paper);
    box-shadow: var(--spmb-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}
.level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -14px rgba(33, 34, 101, 0.28);
    border-color: var(--spmb-navy);
}

.level-card__head {
    position: relative;
    height: 128px;
    background: linear-gradient(155deg, var(--spmb-navy) 0%, #2e2f7e 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1.1rem;
}
/* Motif bintang-8 yang sama dengan hero, disamakan agar identitas konsisten */
.level-card__head::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.10;
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M36 6l8.8 12.4L60 14.4 57.6 30 70 36l-12.4 6L60 57.6 44.8 55.2 36 66l-8.8-10.8L12 57.6 14.4 42 2 36l12.4-6L12 14.4l15.2 4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 56px 56px;
}
.level-card__code {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    font: 800 .68rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    color: rgba(255,255,255,.72);
}
.level-card__icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.15rem;
    backdrop-filter: blur(2px);
}
.level-card__head img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.level-card__head img + .level-card__code,
.level-card__head img + .level-card__icon { display: none; }

.level-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; height: calc(100% - 128px); }
.level-card__age {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--spmb-green-dark, var(--spmb-green));
    margin-bottom: .35rem;
}
.level-card__desc { font-size: .82rem; color: var(--spmb-muted); line-height: 1.5; flex: 1; }

.level-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .7rem;
    margin-top: .7rem;
    border-top: 1px dashed var(--spmb-line);
    font-size: .76rem;
}
.level-card__price { font-weight: 800; color: var(--spmb-ink); }
.level-card__price span { display: block; font-weight: 500; color: var(--spmb-muted); font-size: .68rem; }

.level-card__seats {
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    white-space: nowrap;
}
.level-card__seats--open { background: rgba(108, 189, 68, .14); color: var(--spmb-green-dark, #3f8f2a); }
.level-card__seats--full { background: rgba(220, 53, 69, .12); color: #b3212f; }
[data-bs-theme="dark"] .level-card__seats--open { background: rgba(134, 217, 95, .16); color: #9be080; }
[data-bs-theme="dark"] .level-card__seats--full { background: rgba(255, 99, 112, .16); color: #ff98a2; }

.level-card__cta {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
}

/* =========================================================================
   PROFIL — placeholder video & kartu statistik yang lebih bercirikan
   ========================================================================= */
.video-frame {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--spmb-radius);
    overflow: hidden;
    background: linear-gradient(160deg, var(--spmb-navy) 0%, #2a2b78 100%);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--spmb-shadow);
}
.video-frame::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .10;
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M36 6l8.8 12.4L60 14.4 57.6 30 70 36l-12.4 6L60 57.6 44.8 55.2 36 66l-8.8-10.8L12 57.6 14.4 42 2 36l12.4-6L12 14.4l15.2 4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
}
.video-frame__play {
    position: relative; z-index: 1;
    width: 74px; height: 74px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.35);
    display: grid; place-items: center;
    font-size: 1.7rem;
    margin-bottom: .9rem;
}
.video-frame__text { position: relative; z-index: 1; font-size: .82rem; opacity: .85; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.stat-pill {
    background: var(--spmb-paper);
    border: 1px solid var(--spmb-line);
    border-radius: var(--spmb-radius);
    box-shadow: var(--spmb-shadow);
    padding: 1.1rem .75rem;
    text-align: center;
    border-bottom: 3px solid var(--spmb-green);
}
.stat-pill .num { font-weight: 800; color: var(--spmb-navy); font-size: 1.5rem; letter-spacing: -0.02em; }
[data-bs-theme="dark"] .stat-pill .num { color: #fff; }
.stat-pill small { color: var(--spmb-muted); font-size: .74rem; }

/* =========================================================================
   PROGRAM UNGGULAN / PRESTASI — daftar bergaya kartu dengan aksen tepi
   ========================================================================= */
.info-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--spmb-paper);
    border: 1px solid var(--spmb-line);
    border-left: 3px solid var(--spmb-green);
    border-radius: .8rem;
    box-shadow: var(--spmb-shadow);
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.info-row:hover { transform: translateX(3px); box-shadow: var(--spmb-shadow-lg); }
.info-row__icon {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: .7rem;
    background: rgba(108, 189, 68, .14);
    color: var(--spmb-navy);
    font-size: 1.05rem;
}
[data-bs-theme="dark"] .info-row__icon { color: var(--spmb-green); }
.info-row--achievement { border-left-color: var(--spmb-navy); }
.info-row--achievement .info-row__icon { background: rgba(33, 34, 101, .10); color: var(--spmb-green-dark); }
[data-bs-theme="dark"] .info-row--achievement .info-row__icon { color: #86d95f; background: rgba(134,217,95,.12); }

/* =========================================================================
   KONTAK — ikon bulat beraksen hijau khas
   ========================================================================= */
.contact-row { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.contact-row:last-of-type { margin-bottom: 1.4rem; }
.contact-row__icon {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(108, 189, 68, .14);
    color: var(--spmb-green-dark);
    font-size: .95rem;
}
[data-bs-theme="dark"] .contact-row__icon { color: var(--spmb-green); background: rgba(134,217,95,.12); }

/* =========================================================================
   FAQ — status aktif akordeon disesuaikan warna khas (bukan biru bawaan)
   ========================================================================= */
.accordion-item.glass { border-radius: .9rem !important; }
.accordion-button { box-shadow: none !important; }
.accordion-button:not(.collapsed) {
    background: rgba(108, 189, 68, .08) !important;
    color: var(--spmb-navy) !important;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { color: #fff !important; background: rgba(134,217,95,.08) !important; }
.accordion-button:focus { box-shadow: none !important; border-color: var(--spmb-line) !important; }
.accordion-button::after { filter: none; }

/* =========================================================================
   FOOTER — navy, konsisten dengan hero, multi-kolom
   ========================================================================= */
.site-footer {
    background: var(--spmb-navy);
    color: rgba(255,255,255,.72);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute; inset: 0;
    opacity: .05; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M36 6l8.8 12.4L60 14.4 57.6 30 70 36l-12.4 6L60 57.6 44.8 55.2 36 66l-8.8-10.8L12 57.6 14.4 42 2 36l12.4-6L12 14.4l15.2 4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 72px 72px;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer h6 { color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a.footer-link { color: rgba(255,255,255,.72); text-decoration: none; display: block; font-size: .87rem; margin-bottom: .55rem; transition: color .15s ease; }
.site-footer a.footer-link:hover { color: var(--spmb-green); }
.site-footer p { font-size: .87rem; }
.footer-divider { border-color: rgba(255,255,255,.14); }
.footer-social {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    transition: background .15s ease, transform .15s ease;
}
.footer-social:hover { background: var(--spmb-green); transform: translateY(-2px); color: #fff; }

/* ===== Judul brand di navbar landing responsif (tampil juga di HP) ===== */
.spmb-navbar .brand-title { font-size: 1rem; line-height: 1.1; }
@media (max-width: 575.98px) {
    .spmb-navbar .navbar-brand { gap: .4rem !important; }
    .spmb-navbar .brand-text { max-width: 60vw; }
    .spmb-navbar .brand-title { font-size: .74rem; }
}

/* ===== Tombol Hapus bertema (danger) ===== */
.btn-danger-spmb, .btn-outline-danger-spmb { border-radius: 999px; font-weight: 600; }
.btn-danger-spmb { background: #c94b4b; color: #fff; border: 0; }
.btn-danger-spmb:hover, .btn-danger-spmb:focus { background: #a83a3a; color: #fff; }
.btn-outline-danger-spmb { border: 1.5px solid #c94b4b; color: #c94b4b; background: transparent; padding: 0.6rem 1.5rem; }
.btn-outline-danger-spmb:hover, .btn-outline-danger-spmb:focus { background: #c94b4b; color: #fff; }
.btn-outline-danger-spmb:disabled { opacity: .5; }
[data-bs-theme="dark"] .btn-outline-danger-spmb { border-color: #e08a8a; color: #e9a3a3; }
[data-bs-theme="dark"] .btn-outline-danger-spmb:hover { background: #c94b4b; color: #fff; }

/* ===== Cetak laporan: sembunyikan navigasi, hanya konten ===== */
@media print {
    .spmb-sidebar, .spmb-topbar, .spmb-backdrop, .no-print,
    [data-sidebar], [data-sidebar-toggle], [data-theme-toggle],
    .dropdown, .btn, .pagination, footer { display: none !important; }
    .spmb-main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
    body, [data-bs-theme] { background: #fff !important; color: #000 !important; }
    .glass { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; }
    a[href]::after { content: "" !important; }
}

/* Judul kelompok pada sidebar (gabungan menu Admin & Panitia) */
.spmb-sidebar .nav-heading {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b8ba3;
    padding: .85rem .85rem .2rem;
    margin-top: .15rem;
    user-select: none;
}

/* Grup sidebar yang bisa dibuka-tutup (accordion) */
.spmb-sidebar .nav-heading-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.spmb-sidebar .nav-heading-btn .nav-heading-chevron {
    font-size: .62rem;
    color: #8b8ba3;
    transition: transform .2s ease;
}
.spmb-sidebar .nav-heading-btn[aria-expanded="false"] .nav-heading-chevron { transform: rotate(-90deg); }
.spmb-sidebar .nav-group { display: flex; flex-direction: column; gap: .25rem; }
.spmb-sidebar .nav-group.collapsed { display: none; }

/* Tombol ikon seragam pada kolom Aksi tabel */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    line-height: 1;
}
.btn-icon i { font-size: .85rem; }
/* Tombol OTP (kirim ulang) — kuning/amber serasi */
.btn-outline-warning {
    color: #b8860b;
    border-color: #e8c14a;
    background: transparent;
}
.btn-outline-warning:hover { background: #f6c945; border-color: #f6c945; color: #1f1400; }