/* ============================================================
   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;

    /* 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-line: #2a2c4d;
    --spmb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

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); }

/* ---------- 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: var(--spmb-navy);
    color: #fff;
    overflow: hidden;
    border-radius: 0 0 2rem 2rem;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.07;
    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;
}
.hero > .container { 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);
}
.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;
    min-height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    padding: 1rem;
    transition: transform 0.25s ease;
}
.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); }
@media (max-width: 991.98px) {
    .spmb-sidebar { transform: translateX(-110%); }
    .spmb-sidebar.show { transform: none; }
    .spmb-main { margin-left: 0; }
}

/* ---------- 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;
}

/* ---------- 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; }
[data-bs-theme="dark"] .navbar a { color: inherit; }

/* 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; }