/* ============================================================================
   assets/css/neumorphism.css — Design system iOS + Neumorphism paperlesmodul.id
   ----------------------------------------------------------------------------
   Sumber kebenaran tunggal untuk warna, shadow, radius, dan komponen.
   Nilai di sini mengikuti .claude/skills/paperlesmodul-website/references/
   design-system.md — jangan menebak angka blur/offset sendiri di file lain.
   ========================================================================== */

:root {
    /* Background dasar neumorphism — abu-abu lembut gaya yashwebdesign */
    --np-bg: #F8F8F9;
    --np-bg-elevated: #ffffff;

    /* Shadow neumorphism — dua sisi */
    --np-shadow-light: #ffffff;
    --np-shadow-dark: #d1d5db;

    /* Warna aksen iOS — dipakai untuk latar tint, badge, ikon dekoratif besar,
       dan gradasi luas. TIDAK dipakai langsung sebagai warna teks (lihat
       pasangan -tegas di bawah) karena terlalu terang untuk kontras 4.5:1
       di atas --np-bg. */
    --ios-blue: #2B4DFF;
    --ios-purple: #6a5cc3;
    --ios-green: #34c759;
    --ios-red: #ff453a;
    --ios-orange: #ff9f0a;
    --ios-gray: #8e8e93;

    /*
     * Varian "tegas" — hue yang sama persis (diturunkan dari skill
     * figma-color-palette, skala OKLCH step 600, hue dipertahankan) tapi
     * cukup gelap untuk lolos WCAG AA (>=4.5:1) sebagai teks di atas
     * --np-bg maupun sebagai teks putih di atas latar terisi. Dipakai di
     * mana pun warna aksen menjadi TEKS/IKON yang harus terbaca: harga,
     * link aktif, badge, ikon status, isi gradien tombol utama.
     */
    --ios-blue-tegas: #1a3ad4;    /* vs np-bg 5.12:1 · putih-di-atas 6.20:1 */
    --ios-purple-tegas: #5548a0;  /* vs np-bg 5.13:1 · putih-di-atas 5.81:1 */
    --ios-green-tegas: #007f2d;   /* vs np-bg 4.55:1 · putih-di-atas 5.16:1 */
    --ios-red-tegas: #b92e26;     /* vs np-bg 5.33:1 · putih-di-atas 6.03:1 */
    --ios-orange-tegas: #9b5600;  /* vs np-bg 4.98:1 · putih-di-atas 5.64:1 */

    /* Warna sekunder — navy gelap gaya yashwebdesign */
    --secondary-color: #0A165E;

    /* Gradasi — hero putih bersih, primary biru solid gaya yashwebdesign */
    --gradient-hero: linear-gradient(135deg, #f0f4ff 0%, #e8ecfb 100%);
    --gradient-primary: linear-gradient(135deg, #2B4DFF 0%, #1a3ad4 100%);
    --gradient-accent: linear-gradient(135deg, #6a5cc3 0%, #544a99 100%);

    /* Gradien sukses & bahaya dijadikan token supaya tidak ditulis ulang
       sebagai hex mentah di berkas lain yang butuh latar hijau/merah dengan
       teks putih (mis. header kartu harga). Titik terangnya sudah diuji
       KontrasWarnaTest: putih di atas #00862f = 4.72:1, #c42f27 = 5.55:1. */
    --gradient-success: linear-gradient(135deg, #00862f 0%, #0d6a28 100%);
    --gradient-danger: linear-gradient(135deg, #c42f27 0%, #9a2a23 100%);

    /* Gradien gaya yashwebdesign — dark gray ke primary */
    --gradient-style: linear-gradient(250deg, #565454 19%, #2B4DFF 100%);

    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;

    /* Teks — mengikuti skema warna yashwebdesign */
    --teks-utama: #0A165E;   /* title/navy — judul dan teks utama */
    --teks-lembut: #585B6F;  /* body text — paragraf dan deskripsi */
    --teks-samar: #888b9c;   /* teks sekunder yang lebih ringan */

    /* Shadow siap pakai — lembut seperti yashwebdesign */
    --shadow-naik: 0px 14px 30px rgba(0, 0, 0, 0.07);
    --shadow-naik-kecil: 0px 6px 16px rgba(0, 0, 0, 0.06);
    --shadow-turun: inset 4px 4px 8px var(--np-shadow-dark), inset -4px -4px 8px var(--np-shadow-light);
    --shadow-turun-halus: inset 3px 3px 6px var(--np-shadow-dark), inset -3px -3px 6px var(--np-shadow-light);

    /* Pasangan "timbul" (cembung) dari --shadow-turun/-halus di atas — dua sisi
       terang+gelap tanpa inset, supaya tombol & navbar benar-benar neumorphic
       (bukan drop shadow satu sisi seperti --shadow-naik). Dipakai berpasangan
       dengan --shadow-turun(-halus) untuk efek "ditekan" saat :active/.aktif. */
    --shadow-neu-raised: 4px 4px 8px var(--np-shadow-dark), -4px -4px 8px var(--np-shadow-light);
    --shadow-neu-raised-sm: 3px 3px 6px var(--np-shadow-dark), -3px -3px 6px var(--np-shadow-light);
}

/* ---------------------------------------------------------------- Dasar --- */

body {
    background: var(--np-bg);
    color: var(--teks-utama);
    /* Nunito di-hosting sendiri lewat assets/css/nunito.css (@font-face),
       dimuat di layouts/app.blade.php & layouts/admin.blade.php sebelum
       berkas ini. Jangan ganti nama font di sini tanpa memastikan berkas
       .ttf yang sepadan ada di assets/fonts/. */
    font-family: 'Nunito', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: 0;
    color: var(--teks-utama);
}

a { text-decoration: none; }

.teks-lembut { color: var(--teks-lembut) !important; }
.teks-samar { color: var(--teks-samar) !important; }
.teks-gradien {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Ikon Ionicons — ukuran konsisten, sejajar teks */
ion-icon {
    vertical-align: -0.15em;
    font-size: 1.15em;
}
.ikon-lg { font-size: 1.6rem; }
.ikon-xl { font-size: 2.2rem; }

/* ---------------------------------------------------------------- Card ---- */

/*
 * List tipis bergradasi: dua lapis background-image — lapis pertama warna
 * solid biasa (isi kartu, dipotong di padding-box), lapis kedua gradien
 * biru->ungu tipis (cuma kelihatan di cincin border 1px, dipotong di
 * border-box). Opacity sengaja rendah (.3) supaya "sangat tipis", bukan
 * garis tebal mencolok — dekoratif, bukan pembawa informasi, jadi tidak
 * perlu lolos ambang kontras 4.5:1 seperti teks.
 */
.card-neuro {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-naik);
    padding: 24px;
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--np-bg-elevated), var(--np-bg-elevated)),
        linear-gradient(135deg, rgba(43,77,255,.15) 0%, rgba(10,92,255,.08) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform .3s ease, box-shadow .3s ease;
}

.card-neuro:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0px 20px 40px rgba(43,77,255,.12), 0px 8px 16px rgba(0,0,0,.06);
}

@keyframes card-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.008); }
}

.card-neuro {
    animation: card-breathe 10s ease-in-out infinite;
}

.card-neuro:hover {
    animation: none;
}

.card-neuro-flat {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-naik-kecil);
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--np-bg), var(--np-bg)),
        linear-gradient(135deg, rgba(43,77,255,.15) 0%, rgba(10,92,255,.08) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.card-neuro-inset {
    background: var(--np-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-turun);
    border: none;
}

/* Kartu yang bisa diklik (kartu aplikasi di Library) */
.card-klik {
    display: block;
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease;
}
.card-klik:hover {
    transform: translateY(-4px);
    box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.1);
    color: inherit;
}

/* ------------------------------------------------------------- Tombol ----- */

.btn-ios-primary,
.btn-ios-ghost,
.btn-ios-danger,
.btn-ios-success {
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 22px;
    font-weight: 700;
    font-size: .95rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/*
 * Semua tombol isi (primary/success/danger) memakai shadow neumorphic NETRAL
 * dua-sisi (--shadow-neu-raised-*), bukan glow tercelup warna tombolnya —
 * bayangan jatuh ke permukaan --np-bg di sekitarnya, jadi warnanya netral
 * apa pun warna isi tombol (persis pola --neu-out di skill neu-skills).
 * :active pindah ke --shadow-turun(-halus) yang SUDAH dua-sisi inset di
 * :root — itulah efek "ditekan" (push) khas neumorphism.
 */
/*
 * Bertona biru sendiri, BUKAN --shadow-neu-raised(-sm) — token itu sisi
 * terangnya putih (#ffffff), yang di atas --np-bg nyaris putih terbaca
 * sebagai kabut putih menyebar, bukan bayangan. Pola sama seperti
 * .ikon-kotak & .stepper-neuro .titik di atas.
 */
.btn-ios-primary { background: var(--gradient-primary); color: #fff; box-shadow: 3px 3px 10px rgba(43,77,255,.3); }
.btn-ios-primary:hover { transform: translateY(-1px); box-shadow: 5px 5px 16px rgba(43,77,255,.4); color: #fff; }
.btn-ios-primary:active { box-shadow: 1px 1px 4px rgba(43,77,255,.35); transform: none; }

/* Gradien tombol success/danger memakai dua titik OKLCH berdekatan
   (L 0.540 -> 0.460, sama seperti primary/accent) — warna dasarnya sendiri
   gagal kontras untuk teks putih (lihat komentar di :root). */
.btn-ios-success { background: var(--gradient-success); color: #fff; box-shadow: var(--shadow-neu-raised-sm); }
.btn-ios-success:hover { transform: translateY(-1px); box-shadow: var(--shadow-neu-raised); color: #fff; }
.btn-ios-success:active { box-shadow: var(--shadow-turun-halus); transform: none; }

.btn-ios-danger { background: var(--gradient-danger); color: #fff; box-shadow: var(--shadow-neu-raised-sm); }
.btn-ios-danger:hover { transform: translateY(-1px); box-shadow: var(--shadow-neu-raised); color: #fff; }
.btn-ios-danger:active { box-shadow: var(--shadow-turun-halus); transform: none; }

.btn-ios-ghost { background: var(--np-bg); color: var(--teks-utama); box-shadow: var(--shadow-neu-raised-sm); }
.btn-ios-ghost:hover { transform: translateY(-1px); color: var(--ios-blue-tegas); box-shadow: var(--shadow-neu-raised); }
.btn-ios-ghost:active,
.btn-ios-ghost.aktif { box-shadow: var(--shadow-turun-halus); transform: none; }

/*
 * Varian untuk .btn-ios-ghost yang duduk di atas latar BERWARNA (gradien
 * biru/ungu, bukan --np-bg netral) — mis. sisi belakang kartu-putar.
 * Shadow neumorphism dua-sisi (--shadow-neu-raised-sm) butuh latar netral
 * supaya highlight putihnya membaur; di atas latar berwarna, highlight
 * putih itu malah terlihat seperti glow menyebar yang salah tempat.
 * Di sini dipakai SATU bayangan gelap saja (warna diturunkan dari
 * --teks-utama) supaya efek timbulnya tetap terasa tanpa glow putih.
 */
.btn-ios-ghost-gelap { box-shadow: 0 6px 16px rgba(44, 52, 68, .35); }
.btn-ios-ghost-gelap:hover { box-shadow: 0 8px 20px rgba(44, 52, 68, .42); }
.btn-ios-ghost-gelap:active,
.btn-ios-ghost-gelap.aktif { box-shadow: 0 2px 6px rgba(44, 52, 68, .3); }

.btn-ios-primary:disabled,
.btn-ios-success:disabled,
.btn-ios-danger:disabled,
.btn-ios-ghost:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-sm-neuro { padding: 6px 14px; font-size: .85rem; border-radius: 10px; }

/* Tombol masuk/daftar dengan Google. Latar putih polos mengikuti pedoman merek
   Google (logo warna asli, tidak boleh diwarnai ulang); kedalamannya tetap
   memakai token neumorphism situs supaya sekeluarga dengan tombol lain. */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--np-bg-elevated);
    color: var(--teks-utama);
    font-weight: 700;
    font-size: .95rem;
    box-shadow: var(--shadow-neu-raised-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-google:hover { transform: translateY(-1px); box-shadow: var(--shadow-neu-raised); color: var(--teks-utama); }
.btn-google:active { transform: none; box-shadow: var(--shadow-turun-halus); }
.ikon-google { width: 20px; height: 20px; display: block; }

/* Garis "atau" antara form dan tombol Google */
.pemisah-atau {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--teks-samar);
    font-size: .78rem;
    font-weight: 700;
}
.pemisah-atau::before,
.pemisah-atau::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--np-shadow-dark);
    opacity: .7;
}

/* Tombol bulat ikon saja */
.btn-bulat {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--np-bg);
    box-shadow: var(--shadow-neu-raised-sm);
    border: none;
    color: var(--teks-lembut);
    transition: box-shadow .2s ease, color .2s ease;
}
.btn-bulat:hover { color: var(--ios-blue-tegas); box-shadow: var(--shadow-neu-raised); }
.btn-bulat:active { box-shadow: var(--shadow-turun-halus); }

/* ------------------------------------------------------------- Navbar ----- */

.navbar-neuro {
    background: var(--np-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-neuro .navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.03em;
    color: var(--teks-utama);
}

.navbar-neuro .nav-link {
    color: var(--teks-lembut);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* Menu navbar cekung ke dalam (inset) saat hover/aktif — konsisten dengan
   .sidebar-neuro .menu-item.aktif yang sudah lebih dulu pakai --shadow-turun. */
.navbar-neuro .nav-link:hover {
    color: var(--ios-blue-tegas);
    background: var(--np-bg);
    box-shadow: var(--shadow-turun-halus);
}
.navbar-neuro .nav-link.aktif {
    color: var(--ios-blue-tegas);
    background: var(--np-bg);
    box-shadow: var(--shadow-turun-halus);
}

.navbar-toggler-neuro {
    border: none;
    background: var(--np-bg);
    box-shadow: var(--shadow-neu-raised-sm);
    border-radius: var(--radius-sm);
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--teks-utama);
}
.navbar-toggler-neuro:focus { outline: none; box-shadow: var(--shadow-turun-halus); }

/* ------------------------------------------------------------ Sidebar ----- */

.sidebar-neuro {
    background: var(--np-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-naik);
    padding: 20px 14px;
    position: sticky;
    top: 88px;
}

.sidebar-neuro .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    color: var(--teks-lembut);
    font-weight: 600;
    margin-bottom: 6px;
    transition: color .2s ease, box-shadow .2s ease;
}
.sidebar-neuro .menu-item ion-icon { font-size: 21px; flex-shrink: 0; }
.sidebar-neuro .menu-item:hover { color: var(--ios-blue-tegas); }
.sidebar-neuro .menu-item.aktif {
    color: var(--ios-blue-tegas);
    box-shadow: var(--shadow-turun);
    background: var(--np-bg);
}
.sidebar-neuro .menu-judul {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--teks-samar);
    font-weight: 800;
    padding: 14px 14px 6px;
}

/* --------------------------------------------------------------- Form ----- */

.form-neuro,
.form-control.form-neuro,
.form-select.form-neuro {
    background: var(--np-bg);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-turun-halus);
    padding: 11px 16px;
    color: var(--teks-utama);
    font-size: .95rem;
    width: 100%;
    transition: box-shadow .2s ease;
}
.form-neuro:focus,
.form-control.form-neuro:focus,
.form-select.form-neuro:focus {
    outline: none;
    background: var(--np-bg);
    color: var(--teks-utama);
    box-shadow: inset 3px 3px 6px var(--np-shadow-dark),
                inset -3px -3px 6px var(--np-shadow-light),
                0 0 0 3px rgba(74, 141, 255, .18);
}
.form-neuro::placeholder { color: var(--teks-samar); }
textarea.form-neuro { min-height: 120px; resize: vertical; line-height: 1.65; }

.label-neuro {
    font-weight: 700;
    font-size: .88rem;
    color: var(--teks-utama);
    margin-bottom: 7px;
    display: block;
}

.bantuan-form { font-size: .8rem; color: var(--teks-samar); margin-top: 5px; }

.invalid-neuro { box-shadow: var(--shadow-turun-halus), 0 0 0 3px rgba(255, 69, 58, .18) !important; }
.pesan-galat { color: var(--ios-red-tegas); font-size: .82rem; margin-top: 5px; font-weight: 600; }

/* Pilihan kartu (radio bergaya kartu) */
.pilihan-kartu {
    cursor: pointer;
    display: block;
    background: var(--np-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-naik-kecil);
    padding: 18px;
    transition: box-shadow .2s ease, color .2s ease;
    height: 100%;
}
.pilihan-kartu input { position: absolute; opacity: 0; pointer-events: none; }
.pilihan-kartu:has(input:checked) {
    box-shadow: var(--shadow-turun);
    color: var(--ios-blue-tegas);
}
.pilihan-kartu:has(input:checked) .pilihan-judul { color: var(--ios-blue-tegas); }

/* Toggle switch iOS */
.switch-ios { position: relative; display: inline-block; width: 50px; height: 29px; }
.switch-ios input { opacity: 0; width: 0; height: 0; }
.switch-ios .slider-ios {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--np-bg);
    box-shadow: var(--shadow-turun-halus);
    border-radius: 34px;
    transition: background .25s ease;
}
.switch-ios .slider-ios::before {
    content: "";
    position: absolute;
    height: 23px; width: 23px; left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0,0,0,.18);
    transition: transform .25s ease;
}
.switch-ios input:checked + .slider-ios { background: var(--gradient-primary); box-shadow: none; }
.switch-ios input:checked + .slider-ios::before { transform: translateX(21px); }

/* --------------------------------------------------------------- Badge ---- */

.badge-neuro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .01em;
}
/*
 * Badge duduk di atas latar tint berwarna (bukan --np-bg polos), jadi
 * kontrasnya dihitung terhadap tint itu sendiri — lihat komentar tiap
 * baris. Info & success perlu satu step lebih gelap (700) dari token
 * -tegas biasa (600) karena tint birunya sendiri sudah agak menggelapkan
 * latar; warning & danger sudah cukup dengan token -tegas standar.
 */
.badge-info { background: rgba(43,77,255,.12); color: #1a3ad4; }    /* vs tint 6.90:1 */
.badge-success { background: rgba(52,199,89,.16); color: #125d25; }  /* vs tint 6.54:1 */
.badge-warning { background: rgba(255,159,10,.16); color: var(--ios-orange-tegas); } /* vs tint 4.67:1 */
.badge-danger { background: rgba(255,69,58,.14); color: var(--ios-red-tegas); }      /* vs tint 4.69:1 */
.badge-netral { background: rgba(142,142,147,.16); color: var(--teks-lembut); }      /* vs tint 6.73:1 */

/* --------------------------------------------------------------- Tabel ---- */

.tabel-neuro { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.tabel-neuro thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--teks-samar);
    font-weight: 800;
    padding: 4px 16px;
    border: none;
    white-space: nowrap;
}
.tabel-neuro tbody tr {
    background: var(--np-bg-elevated);
    box-shadow: var(--shadow-naik-kecil);
}
.tabel-neuro tbody td {
    padding: 15px 16px;
    border: none;
    vertical-align: middle;
    color: var(--teks-utama);
}
.tabel-neuro tbody tr td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.tabel-neuro tbody tr td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.pembungkus-tabel { overflow-x: auto; }

/* --------------------------------------------------------------- Modal ---- */

/*
 * Bayangan JATUH, bukan neumorphic dua sisi. Modal selalu berdiri di atas
 * backdrop gelap, sementara sisi terang (-12px -12px putih) butuh permukaan
 * netral untuk membaur — di atas backdrop gelap ia terbaca sebagai pendar
 * putih menyebar di sekeliling kotaknya. Nilainya disamakan dengan
 * .iam-modal .modal-content di ios-alert-modal.css supaya kedua gaya dialog
 * di proyek ini terlihat sama.
 */
.modal-content {
    background: var(--np-bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}
.modal-header { border-bottom: none; padding: 24px 28px 8px; }
.modal-body { padding: 8px 28px; }
.modal-footer { border-top: none; padding: 16px 28px 24px; gap: 10px; }
.modal-title { font-weight: 800; font-size: 1.1rem; }

/* Ikon besar di dialog konfirmasi bergaya iOS */
.ikon-dialog {
    width: 66px; height: 66px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    font-size: 34px;
    box-shadow: var(--shadow-naik-kecil);
}
.ikon-dialog.warning { color: var(--ios-orange-tegas); background: rgba(255,159,10,.12); }
.ikon-dialog.danger { color: var(--ios-red-tegas); background: rgba(255,69,58,.12); }
.ikon-dialog.success { color: var(--ios-green-tegas); background: rgba(52,199,89,.12); }
.ikon-dialog.info { color: var(--ios-blue-tegas); background: rgba(43,77,255,.10); }

/* --------------------------------------------------------------- Toast ---- */

#wadah-toast {
    position: fixed;
    top: 84px; right: 20px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
}
.toast-ios {
    background: var(--np-bg-elevated);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-naik);
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 4px solid var(--ios-blue);
    animation: toast-masuk .3s cubic-bezier(.22,1,.36,1);
    font-weight: 600;
    font-size: .9rem;
}
.toast-ios.keluar { animation: toast-keluar .25s ease forwards; }
.toast-ios ion-icon { font-size: 21px; flex-shrink: 0; margin-top: 1px; }
.toast-ios.success { border-left-color: var(--ios-green); }
.toast-ios.success ion-icon { color: var(--ios-green-tegas); }
.toast-ios.error { border-left-color: var(--ios-red); }
.toast-ios.error ion-icon { color: var(--ios-red-tegas); }
.toast-ios.warning { border-left-color: var(--ios-orange); }
.toast-ios.warning ion-icon { color: var(--ios-orange-tegas); }
.toast-ios.info ion-icon { color: var(--ios-blue-tegas); }

@keyframes toast-masuk { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes toast-keluar { to { opacity: 0; transform: translateX(28px); } }

/*
 * Toast sambutan — dua baris (judul + teks) plus logo, dipakai sekali per
 * pengunjung baru di beranda (lihat assets/js/toast-sambutan.js). Wadah,
 * warna dasar, dan animasi masuk/keluar SAMA PERSIS dengan .toast-ios biasa
 * di atas — cuma tata letak dalamnya beda (dua baris teks + logo bulat,
 * bukan satu baris + ikon status), jadi bukan komponen gaya baru.
 */
.toast-sambutan {
    align-items: flex-start;
    border-left-color: var(--ios-blue);
    padding-right: 38px; /* ruang untuk tombol tutup */
    position: relative;
}
.toast-sambutan-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: var(--shadow-neu-raised-sm);
}
.toast-sambutan-judul {
    font-weight: 700;
    font-size: .9rem;
    color: var(--teks-utama);
    margin-bottom: 2px;
}
.toast-sambutan-teks {
    font-weight: 400;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--teks-lembut);
}
.toast-sambutan-tutup {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--teks-samar);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.toast-sambutan-tutup:hover { background: var(--np-bg); color: var(--teks-utama); }

/* ----------------------------------------------------------- Accordion ---- */

.accordion-neuro .accordion-item {
    background: transparent;
    border: none;
    margin-bottom: 12px;
}
.accordion-neuro .accordion-button {
    background: var(--np-bg-elevated);
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-naik-kecil);
    font-weight: 700;
    color: var(--teks-utama);
    padding: 16px 20px;
}
.accordion-neuro .accordion-button:not(.collapsed) {
    background: var(--np-bg);
    box-shadow: var(--shadow-turun-halus);
    color: var(--ios-blue-tegas);
}
.accordion-neuro .accordion-button:focus { box-shadow: var(--shadow-turun-halus); }
.accordion-neuro .accordion-button::after { display: none; }
.accordion-neuro .chevron-neuro { margin-left: auto; transition: transform .25s ease; font-size: 20px; }
.accordion-neuro .accordion-button:not(.collapsed) .chevron-neuro { transform: rotate(180deg); }
.accordion-neuro .accordion-body { padding: 18px 20px 6px; color: var(--teks-lembut); }

/* ------------------------------------------------------------- Stepper ---- */

.stepper-neuro { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.stepper-neuro .langkah {
    flex: 1 1 0;
    min-width: 88px;
    text-align: center;
}
.stepper-neuro .titik {
    width: 34px; height: 34px;
    margin: 0 auto 7px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--np-bg);
    box-shadow: var(--shadow-turun-halus);
    color: var(--teks-samar);
    font-weight: 800;
    font-size: .82rem;
}
.stepper-neuro .langkah.lewat .titik { background: var(--gradient-primary); color: #fff; box-shadow: 3px 3px 8px rgba(43,77,255,.3); }
.stepper-neuro .langkah.kini .titik { background: var(--gradient-accent); color: #fff; box-shadow: 3px 3px 10px rgba(106,92,195,.35); }
.stepper-neuro .nama-langkah { font-size: .72rem; font-weight: 700; color: var(--teks-samar); line-height: 1.3; }
.stepper-neuro .langkah.lewat .nama-langkah,
.stepper-neuro .langkah.kini .nama-langkah { color: var(--teks-utama); }

/* ---------------------------------------------------------------- Chat ---- */

.wadah-chat {
    max-height: 460px;
    overflow-y: auto;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.baris-chat { display: flex; gap: 10px; align-items: flex-end; }
.baris-chat.milikku { flex-direction: row-reverse; }

/*
 * Pembungkus bubble+waktu (dibuat sebagai <div> polos di thread-pesan.blade.php
 * & thread-pesan.js — class ini yang mengaktifkannya). WAJIB flex column +
 * align-items, BUKAN mengandalkan block-flow rata-kiri default: nama pengirim
 * yang panjang (mis. "Administrator Paperlesmodul") membuat waktu-chat lebih
 * lebar dari bubble-nya sendiri, sehingga pembungkus ini ikut melebar
 * mengikuti teks waktu. Tanpa align-items, bubble singkat tetap nempel KIRI
 * di dalam pembungkus yang sudah melebar itu — pada pesan .milikku (avatar di
 * KANAN) bubble jadi terlihat "mengambang" menjauh dari avatar. align-items
 * memastikan bubble & waktu-chat masing-masing nempel ke tepi yang benar,
 * berapa pun lebar pembungkusnya.
 */
.kolom-chat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0; /* izinkan menyusut & waktu-chat membungkus — jangan meluber di layar sempit */
}
.baris-chat.milikku .kolom-chat { align-items: flex-end; }

.avatar-chat {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--np-bg);
    box-shadow: var(--shadow-naik-kecil);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: var(--teks-lembut);
}
.bubble-chat {
    max-width: 74%;
    background: var(--np-bg-elevated);
    box-shadow: var(--shadow-naik-kecil);
    border-radius: 18px 18px 18px 6px;
    padding: 11px 15px;
    font-size: .92rem;
    white-space: pre-line;
    word-break: break-word;
}
.baris-chat.milikku .bubble-chat {
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 18px 18px 6px 18px;
    box-shadow: 4px 4px 10px rgba(43,77,255,.22);
}
.bubble-chat.sistem {
    background: rgba(106,92,195,.12);
    box-shadow: none;
    color: var(--ios-purple-tegas); /* was #6b5fd0 (3.97:1, gagal) */
    font-size: .85rem;
    font-weight: 600;
    border-radius: 14px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}
.waktu-chat { font-size: .7rem; color: var(--teks-samar); margin-top: 4px; }

/* ----------------------------------------------------------- Statistik ---- */

.kartu-statistik {
    background: var(--np-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-naik);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}
.kartu-statistik .ikon-statistik {
    width: 50px; height: 50px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 25px;
    flex-shrink: 0;
    /* Timbul (cembung) dua-sisi — supaya kotak ikon warna ikut neumorphic,
       bukan sekadar latar tint datar. */
    box-shadow: var(--shadow-neu-raised-sm);
}
/* Kotak ikon 48px — versi ringkas dari .ikon-statistik untuk hero & kartu nilai */
.ikon-kotak {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.ikon-statistik.biru   { background: rgba(43,77,255,.12); color: var(--ios-blue-tegas); }
.ikon-statistik.ungu   { background: rgba(106,92,195,.12); color: var(--ios-purple-tegas); }
.ikon-statistik.hijau  { background: rgba(52,199,89,.15); color: var(--ios-green-tegas); }
.ikon-statistik.oranye { background: rgba(255,159,10,.15); color: var(--ios-orange-tegas); }

/*
 * .ikon-kotak dipisah dari .ikon-statistik: keduanya dulu berbagi shadow
 * neumorphic --shadow-neu-raised-sm, yang sisi terangnya PUTIH (#ffffff).
 * Di atas latar --np-bg yang sudah nyaris putih, sisi terang itu tidak
 * terbaca sebagai highlight tipis — melebar jadi kabut putih di sekitar
 * kotak ikon ("spread"). Diganti box-shadow satu sisi bertona warna sendiri
 * (pola yang sama dipakai .stepper-neuro .titik), tanpa komponen putih sama
 * sekali — .ikon-statistik sengaja TIDAK ikut diubah.
 */
.ikon-kotak.biru   { background: rgba(43,77,255,.12);  color: var(--ios-blue-tegas);   box-shadow: 3px 3px 10px rgba(43,77,255,.22); }
.ikon-kotak.ungu   { background: rgba(106,92,195,.12); color: var(--ios-purple-tegas); box-shadow: 3px 3px 10px rgba(106,92,195,.22); }
.ikon-kotak.hijau  { background: rgba(52,199,89,.15);  color: var(--ios-green-tegas);  box-shadow: 3px 3px 10px rgba(52,199,89,.22); }
.ikon-kotak.oranye { background: rgba(255,159,10,.15); color: var(--ios-orange-tegas); box-shadow: 3px 3px 10px rgba(255,159,10,.25); }
.ikon-statistik.merah,  .ikon-kotak.merah  { background: rgba(255,69,58,.14); color: var(--ios-red-tegas); }
.kartu-statistik .angka { font-size: 1.55rem; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; }
.kartu-statistik .keterangan { font-size: .78rem; color: var(--teks-samar); font-weight: 700; }

/* ----------------------------------------------------------------- Hero --- */

.hero-neuro {
    background: linear-gradient(135deg, #0A165E 0%, #12206e 50%, #1a3ad4 100%);
    border-radius: 0 0 40px 40px;
    padding: 72px 0 84px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}
.hero-neuro::before,
.hero-neuro::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .15;
}
.hero-neuro::before {
    width: 400px; height: 400px;
    right: -100px; top: -120px;
    background: radial-gradient(circle, #2B4DFF 0%, transparent 70%);
}
.hero-neuro::after {
    width: 350px; height: 350px;
    left: -100px; bottom: -140px;
    background: radial-gradient(circle, #6a5cc3 0%, transparent 70%);
}
.hero-neuro .isi-hero { position: relative; z-index: 1; }
.hero-neuro .judul-hero { color: #ffffff; }
.hero-neuro .teks-lembut { color: #ffffff !important; }
.hero-neuro strong { color: #ffffff; }
.hero-neuro .badge-neuro { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); }
/*
 * Kedua tombol di .hero-neuro duduk di atas latar gelap (gradien navy),
 * bukan --np-bg netral — sisi terang dari --shadow-neu-raised-* akan
 * terlihat seperti pendar putih menyebar, bukan membaur. Sama seperti
 * .btn-ios-ghost-gelap: pakai SATU bayangan gelap saja, lebih tipis untuk
 * ghost (latarnya sendiri sudah transparan+border, jangan sampai lebih
 * berat dari .btn-ios-primary di sebelahnya).
 */
.hero-neuro .btn-ios-ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); border: 1.5px solid rgba(255,255,255,.25); }
.hero-neuro .btn-ios-ghost:hover { background: rgba(255,255,255,.18); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.hero-neuro .btn-ios-ghost:active { box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.hero-neuro .btn-ios-primary { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.hero-neuro .btn-ios-primary:hover { box-shadow: 0 8px 20px rgba(0,0,0,.42); }
.hero-neuro .btn-ios-primary:active { box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.hero-neuro .teks-gradien { background: linear-gradient(80deg, #6ec6ff 0%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-neuro .warna-hijau { color: #6ee7a0 !important; }
.hero-neuro .warna-biru { color: #93b4ff !important; }
.hero-neuro .warna-ungu { color: #b4a8ff !important; }
.hero-neuro .teks-samar { color: rgba(255,255,255,.75) !important; }
.hero-neuro .card-neuro { color: var(--teks-utama); }
.hero-neuro .card-neuro .teks-samar { color: var(--teks-samar) !important; }
.hero-neuro .card-neuro strong { color: var(--teks-utama); }
.hero-neuro .card-neuro .warna-hijau { color: var(--ios-green-tegas) !important; }
.hero-neuro .card-neuro .warna-biru { color: var(--ios-blue-tegas) !important; }
.hero-neuro .card-neuro .warna-ungu { color: var(--ios-purple-tegas) !important; }
/* Bobot reguler (400): judul hero sengaja dibuat ringan, bukan Black —
   tetap memakai Nunito yang diwarisi dari body. */
.judul-hero { font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.16; }

/* Gambar produk di kartu Library */
.gambar-produk {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-turun-halus);
    background: var(--np-bg);
}
.gambar-kosong {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    background: var(--np-bg);
    box-shadow: var(--shadow-turun-halus);
    display: flex; align-items: center; justify-content: center;
    color: var(--teks-samar);
    font-size: 40px;
}

/* Daftar fitur bercentang */
.daftar-fitur { list-style: none; padding: 0; margin: 0; }
.daftar-fitur li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    color: var(--teks-lembut);
}
.daftar-fitur li ion-icon { color: var(--ios-green-tegas); font-size: 19px; flex-shrink: 0; margin-top: 2px; }

/* ------------------------------------------------------------ Paginasi ---- */

.pagination { gap: 6px; }
.pagination .page-link {
    border: none;
    background: var(--np-bg);
    box-shadow: var(--shadow-neu-raised-sm);
    border-radius: var(--radius-sm);
    color: var(--teks-lembut);
    font-weight: 700;
    padding: 8px 14px;
}
.pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 3px 3px 9px rgba(43,77,255,.3);
}
.pagination .page-item.disabled .page-link { opacity: .45; box-shadow: none; }

/* ------------------------------------------------------------- Kondisi ---- */

.kondisi-kosong {
    text-align: center;
    padding: 52px 20px;
    color: var(--teks-samar);
}
.kondisi-kosong ion-icon { font-size: 56px; opacity: .45; margin-bottom: 12px; }

.pemisah-neuro { height: 1px; background: linear-gradient(90deg, transparent, var(--np-shadow-dark), transparent); border: 0; margin: 24px 0; opacity: .7; }
.footer-neuro .pemisah-neuro { background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); opacity: 1; }

/* =========================================================================
   UTILITAS
   -------------------------------------------------------------------------
   Kelas siap pakai supaya Blade tidak perlu menulis atribut style= sama
   sekali. Setiap nilai baru WAJIB didaftarkan di sini, bukan di halaman.
   ========================================================================= */

/* Skala tipografi — delapan tingkat, jangan tambah ukuran di luar daftar ini */
.t-3xs { font-size: .66rem; }
.t-2xs { font-size: .72rem; }
.t-xs  { font-size: .78rem; }
.t-sm  { font-size: .84rem; }
.t-md  { font-size: .9rem; }
.t-lg  { font-size: .95rem; }
.t-xl  { font-size: 1.05rem; }
.t-2xl { font-size: 1.15rem; }

/* Warna teks aksen */
.warna-biru   { color: var(--ios-blue-tegas) !important; }
.warna-hijau  { color: var(--ios-green-tegas) !important; }
.warna-oranye { color: var(--ios-orange-tegas) !important; }
.warna-merah  { color: var(--ios-red-tegas) !important; }
.warna-ungu   { color: var(--ios-purple-tegas) !important; }

/* Teks yang harus tetap pekat — nomor kontak, nomor rekening, nominal */
.teks-tegas { color: var(--teks-utama) !important; }

/*
 * Wadah nomor kontak tersamar (x-kontak-nomor). Selama data-kw masih ada,
 * berarti JS belum sempat mengisi teksnya — titik placeholder diberi jarak
 * huruf supaya terlihat sengaja, bukan seperti berkas rusak.
 */
.kontak-tersamar[data-kw] { letter-spacing: .18em; opacity: .55; }

.pre-line { white-space: pre-line; }

/* Badan isi kontrak — pre-line dengan jarak baris lebih lega agar enak dibaca */
.isi-kontrak { white-space: pre-line; font-size: .9rem; line-height: 1.75; }
.teks-mono {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
    font-size: .85rem;
    line-height: 1.7;
}

/* URL panjang tidak punya spasi, jadi tanpa ini ia menembus keluar kotaknya
   (dan menyeret lebar halaman). anywhere = boleh patah di karakter mana pun. */
.putus-tautan {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Ukuran ikon tambahan */
.ikon-md   { font-size: 20px; }
.ikon-hero { font-size: 56px; }

/* Tata letak */
.lengket-atas     { position: sticky; top: 88px; }
.lebar-min-0      { min-width: 0; }
.batas-teks       { max-width: 380px; }
.batas-teks-lebar { max-width: 600px; margin-left: auto; margin-right: auto; }
.batas-hero       { max-width: 560px; }
.kolom-sempit     { max-width: 230px; }
.kotak-gulir      { max-height: 520px; overflow-y: auto; }
/*
 * Pembungkus kanvas Chart.js. position:relative + tinggi pasti adalah syarat
 * dari Chart.js sendiri saat maintainAspectRatio:false. Tanpa ini kanvas
 * mengukur diri dari induk yang tingginya justru ditentukan si kanvas —
 * saling mengejar, kartunya memanjang terus ke bawah.
 */
.kotak-grafik     { position: relative; height: 260px; }
.rasio-16-9       { aspect-ratio: 16 / 9; }
.dropdown-neuro   { min-width: 200px; }
.tinggi-46        { height: 46px; }
.min-tinggi-46    { min-height: 46px; }

/* Nomor langkah bulat pada daftar cara kerja */
.titik-nomor {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: .8rem;
    flex-shrink: 0;
}

/* Varian ukuran avatar */
.avatar-sm { width: 42px; height: 42px; font-size: .85rem; }
.avatar-md { width: 46px; height: 46px; font-size: .9rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1rem; }

/* Kartu Pengembang di /kontak: logo bulat situs, bukan inisial huruf.
   .avatar-chat lain (chat, daftar pengguna) tidak disentuh, cuma <img>
   di dalam instance ini yang diisi penuh & dipotong bulat. */
.avatar-foto-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* QR verifikasi kontrak */
.qr-kontrak {
    width: 180px; height: 180px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-naik-kecil);
    background: #fff;
    padding: 8px;
}

/* Pratinjau bukti transfer */
.bukti-gambar {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-turun-halus);
}

/* Bar progres sebaran status — lebar diisi JS dari data-persen */
.bar-progres { height: 8px; border-radius: 99px; overflow: hidden; }
.bar-progres-isi {
    height: 100%;
    width: 0;
    background: var(--gradient-primary);
    border-radius: 99px;
    transition: width .4s ease;
}

/*
 * Pasangan tombol aksi di hero. Di desktop mengalir berdampingan sesuai
 * lebar teksnya; di ponsel dipaksa satu kolom penuh dengan tinggi identik
 * (lihat blok responsif) supaya keduanya benar-benar sama ukuran.
 */
.aksi-hero { display: flex; flex-wrap: wrap; gap: 10px; }
.aksi-hero > * { min-height: 46px; }

/* Logo — dipakai di navbar, footer, dan halaman masuk */
.logo-merek  { height: 32px; width: auto; display: block; }
.logo-footer { height: 38px; width: auto; display: block; }

/* Badge mitra/asosiasi di footer (kolom terakhir, lihat layouts/app.blade.php).
   Kaca tembus pandang, resepnya disalin persis dari .footer-neuro
   .btn-ios-ghost (tombol WhatsApp di footer ini) supaya kedua elemen kaca
   di footer terasa satu bahasa visual, bukan dua gaya transparansi
   berbeda. Tingginya dibuat kira-kira setinggi blok "Mulai" di sebelahnya
   (judul + 2 tautan, ±96px) supaya kedua kolom terasa sepadan. */
.lencana-mitra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-sm);
    padding: 18px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    max-width: 100%;
}
.logo-mitra { height: 60px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* Logo merek di kolom kanan kartu (mis. kartu "Alur kerja transparan" di
   hero, sejajar daftar fitur) — mengisi ruang kosong kolom kedua, bukan
   ikon dekoratif kecil. Diperkecil di mobile mengikuti skill responsive-style. */
.logo-kartu {
    width: 88px; height: 88px; object-fit: contain;
    animation: logo-kartu-putar 12s linear infinite;
}
@keyframes logo-kartu-putar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (max-width: 575.98px) {
    .logo-kartu { width: 60px; height: 60px; }
}
.logo-auth {
    width: 84px; height: 84px;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px;
    padding: 10px;
    border-radius: 50%;
    background: var(--np-bg);
    box-shadow: var(--shadow-naik-kecil);
}

/* Logo resmi metode pembayaran (BSI/GoPay/DANA) — object-fit:contain karena
   ini logo bermacam rasio, bukan foto, jangan sampai terpotong. */
.logo-metode-bayar {
    width: 44px; height: 44px;
    object-fit: contain;
    display: inline-block;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-naik-kecil);
    padding: 4px;
}

/* Versi mini — dipakai di dalam badge (mis. daftar "metode yang didukung") */
.logo-metode-mini {
    width: 16px; height: 16px;
    object-fit: contain;
    border-radius: 3px;
    vertical-align: -3px;
}

/* Blok besar */
/*
 * Wash gradien lembut yang sama dengan hero (--gradient-hero) — footer jadi
 * terasa satu keluarga warna dengan hero, membingkai halaman dari atas dan
 * bawah, tetap terang & lembut (bukan gelap kontras seperti footer agensi
 * kebanyakan).
 */
.footer-neuro   {
    background: linear-gradient(135deg, #0A165E 0%, #12206e 100%);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    color: #ffffff;
    /* Lengkungan cermin dari .hero-neuro: hero melengkung di sisi BAWAH
       (0 0 40px 40px) karena ia duduk di puncak halaman; footer duduk di
       dasar halaman, jadi yang melengkung sisi ATAS-nya. */
    border-radius: 40px 40px 0 0;
    position: relative;
    overflow: hidden;
}
/* Dua bola cahaya blur, resep & posisi persis sama dengan .hero-neuro di
   atas — supaya kedua panel gelap ini benar-benar terasa satu gaya yang
   membingkai halaman, bukan cuma warnanya yang kebetulan mirip. */
.footer-neuro::before,
.footer-neuro::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .15;
}
.footer-neuro::before {
    width: 400px; height: 400px;
    right: -100px; top: -120px;
    background: radial-gradient(circle, #2B4DFF 0%, transparent 70%);
}
.footer-neuro::after {
    width: 350px; height: 350px;
    left: -100px; bottom: -140px;
    background: radial-gradient(circle, #6a5cc3 0%, transparent 70%);
}
.footer-neuro .container { position: relative; z-index: 1; }
.footer-neuro .fw-bold { color: #ffffff; }
.footer-neuro .teks-lembut { color: rgba(255,255,255,.85) !important; }
.footer-neuro .teks-samar { color: rgba(255,255,255,.6) !important; }
.footer-neuro a { color: rgba(255,255,255,.85); transition: color .2s ease; }
.footer-neuro a:hover { color: #ffffff; }
.footer-neuro .teks-gradien { background: linear-gradient(80deg, #6ec6ff 0%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/*
 * Ikon WhatsApp: --ios-green-tegas (dipakai luas di situs) turun ke 4.46:1
 * di titik gradien-hero paling terang — sedikit di bawah ambang 4.5 milik
 * proyek ini. Dipakai step lebih gelap KHUSUS di footer (bukan mengubah
 * token global) supaya tetap lolos di kedua titik gradien tanpa
 * memengaruhi pemakaian --ios-green-tegas di tempat lain.
 */
.footer-neuro .warna-hijau { color: #ffffff !important; }
.footer-neuro .teks-tegas { color: #ffffff !important; }

/*
 * Tombol di footer — perlakuan yang sama seperti .hero-neuro dan .seksi-cta,
 * karena latarnya sama-sama navy gelap:
 *
 * 1. Warna teks bawaan .btn-ios-ghost adalah --teks-utama (navy). Di atas
 *    footer navy, tulisan dan ikonnya jadi tidak terbaca sama sekali.
 * 2. --shadow-neu-raised-sm punya sisi terang putih yang hanya membaur di
 *    atas permukaan netral; di atas navy ia terbaca sebagai pendar putih
 *    menyebar mengelilingi tombol.
 */
.footer-neuro .btn-ios-ghost {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, .25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.footer-neuro .btn-ios-ghost:hover {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.footer-neuro .btn-ios-ghost:active { box-shadow: 0 2px 6px rgba(0, 0, 0, .16); }

/* Ikon WhatsApp-nya ikut putih — .footer-neuro a mewarnai tautan biasa
   dengan putih transparan, dan itu membuat glyph-nya tampak pudar. */
.footer-neuro .btn-ios-ghost ion-icon { color: #ffffff; }
.offcanvas-neuro { background: var(--np-bg); width: 268px; }
.merek-footer   { font-size: 1.15rem; font-weight: 900; color: #ffffff; }
.seksi-cta      { background: linear-gradient(135deg, #0A165E 0%, #1a3ad4 100%); color: #ffffff; }
.seksi-cta h2, .seksi-cta h3, .seksi-cta h4 { color: #ffffff; }
.seksi-cta .teks-lembut { color: rgba(255,255,255,.8) !important; }
.seksi-cta strong { color: #ffffff; }
/* Sama seperti .hero-neuro di atas — latar gelap, jadi satu bayangan gelap saja. */
.seksi-cta .btn-ios-ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); border: 1.5px solid rgba(255,255,255,.25); }
.seksi-cta .btn-ios-ghost:hover { background: rgba(255,255,255,.18); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.seksi-cta .btn-ios-ghost:active { box-shadow: 0 2px 6px rgba(0,0,0,.16); }

/* ------------------------------------------------------- Dashboard mobile --- */

/*
 * Kartu gelap dibatasi (BUKAN lengkungan penuh-lebar seperti .hero-neuro/
 * .footer-neuro — ini kartu di TENGAH alur halaman, dibulatkan di keempat
 * sudut seperti .card-neuro biasa). Resep gradien + bola cahaya blur sengaja
 * disalin persis dari .hero-neuro (bukan --gradient-primary polos): tombol
 * .btn-ios-primary di dalamnya JUGA memakai --gradient-primary, dan kalau
 * latar kartu sewarna dengan tombolnya, tombolnya jadi hilang tak terlihat.
 * Navy gelap punya jarak tona yang cukup dari biru terang tombol.
 */
.panel-pwa {
    background: linear-gradient(135deg, #0A165E 0%, #12206e 50%, #1a3ad4 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-naik);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.panel-pwa::before,
.panel-pwa::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .15;
}
.panel-pwa::before {
    width: 320px; height: 320px;
    right: -80px; top: -100px;
    background: radial-gradient(circle, #2B4DFF 0%, transparent 70%);
}
.panel-pwa::after {
    width: 280px; height: 280px;
    left: -80px; bottom: -100px;
    background: radial-gradient(circle, #6a5cc3 0%, transparent 70%);
}
.panel-pwa .isi-panel-pwa { position: relative; z-index: 1; }
.panel-pwa h2, .panel-pwa h3 { color: #ffffff; }
.panel-pwa .teks-lembut { color: rgba(255,255,255,.82) !important; }
.panel-pwa .teks-samar { color: rgba(255,255,255,.6) !important; }
.panel-pwa .badge-neuro { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.panel-pwa .btn-ios-ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); border: 1.5px solid rgba(255,255,255,.25); }
.panel-pwa .btn-ios-ghost:hover { background: rgba(255,255,255,.18); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.panel-pwa .btn-ios-ghost:active { box-shadow: 0 2px 6px rgba(0,0,0,.16); }

/* Chip ikon fitur: SEMUA warna disamakan putih tipis di atas latar gelap ini,
   biar ikonnya kebaca — versi berwarna (.ikon-kotak.biru dkk) dirancang untuk
   latar terang di card-neuro biasa, bukan untuk latar navy. */
.panel-pwa .ikon-kotak.biru,
.panel-pwa .ikon-kotak.ungu,
.panel-pwa .ikon-kotak.hijau,
.panel-pwa .ikon-kotak.oranye {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.pwa-fitur-item { display: flex; align-items: flex-start; gap: 14px; }

/* Bingkai telepon — murni CSS, tidak bergantung gambar apa pun supaya tetap
   rapi sebelum admin sempat mengunggah screenshot. */
.pwa-telepon {
    width: 240px;
    max-width: 78%;
    aspect-ratio: 9 / 19.5;
    margin: 0 auto;
    padding: 14px 10px;
    background: var(--secondary-color);
    border-radius: 34px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);
    position: relative;
}
.pwa-telepon::before {
    /* Notch/poni kamera */
    content: "";
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 64px; height: 18px;
    background: var(--secondary-color);
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.pwa-layar {
    width: 100%; height: 100%;
    background: var(--np-bg);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
}
.pwa-layar-gambar { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pwa-layar-kosong {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 24px;
    text-align: center;
    color: var(--teks-samar);
}
.pwa-layar-kosong ion-icon { font-size: 40px; }

/*
 * Untuk gambar mockup UTUH yang diunggah admin (sudah ada bezel/notch/tombol
 * sendiri di gambarnya) — dirender polos, TANPA .pwa-telepon. drop-shadow
 * (bukan box-shadow) dipakai karena mengikuti bentuk asli PNG-nya (termasuk
 * kalau latarnya transparan), bukan kotak persegi bounding box gambar.
 * max-width disamakan dengan .pwa-telepon supaya tata letak tidak melompat
 * begitu admin mengganti dari placeholder ke gambar sungguhan.
 */
.pwa-mockup-gambar {
    width: 240px;
    max-width: 78%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}

@media (max-width: 575.98px) {
    .pwa-mockup-gambar { width: 190px; }
}

@media (max-width: 991.98px) {
    .pwa-telepon { margin-bottom: 8px; }
}

@media (max-width: 575.98px) {
    .panel-pwa { padding: 24px 18px !important; border-radius: var(--radius-md); }
    .panel-pwa::before, .panel-pwa::after { display: none; } /* blur besar berat di HP kecil, dan tempatnya sudah sempit */
    .pwa-telepon { width: 190px; padding: 10px 8px; border-radius: 26px; }
    .pwa-layar { border-radius: 16px; }
    .pwa-fitur-item { gap: 10px; }
    .pwa-fitur-item h3 { font-size: .92rem; }
    .pwa-fitur-item p { font-size: .78rem; }
}
.seksi-cta .btn-ios-primary { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.seksi-cta .btn-ios-primary:hover { box-shadow: 0 8px 20px rgba(0,0,0,.42); }
.seksi-cta .btn-ios-primary:active { box-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* --------------------------------------------------------- Scroll atas ---- */

/*
 * Tombol bulat mengambang pojok kanan-bawah. Cincin SVG di sekelilingnya
 * menunjukkan persentase halaman yang sudah tergulir (diisi oleh
 * assets/js/scroll-atas.js lewat stroke-dashoffset — satu-satunya kasus di
 * situs ini yang mendengarkan event scroll langsung, karena progres numerik
 * begini tidak bisa didapat dari IntersectionObserver).
 */
.tombol-scroll-atas {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--np-bg-elevated);
    box-shadow: var(--shadow-naik-kecil);
    color: var(--ios-blue-tegas);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.tombol-scroll-atas.tampil {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Berdenyut sekali saat pertama muncul supaya menarik perhatian tanpa
       mengganggu terus-menerus. box-shadow saja — bukan properti tata
       letak, jadi tidak memicu reflow. */
    animation: denyut-scroll-atas 1.8s ease-out 1;
}
.tombol-scroll-atas:active { transform: scale(.92); }

@keyframes denyut-scroll-atas {
    0%   { box-shadow: var(--shadow-naik-kecil), 0 0 0 0 rgba(43,77,255,.38); }
    70%  { box-shadow: var(--shadow-naik-kecil), 0 0 0 16px rgba(43,77,255,0); }
    100% { box-shadow: var(--shadow-naik-kecil), 0 0 0 0 rgba(43,77,255,0); }
}

.cincin-scroll {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
    pointer-events: none;
}
.cincin-scroll-latar { fill: none; stroke: var(--np-shadow-dark); stroke-width: 3; opacity: .6; }
.cincin-scroll-isi {
    fill: none;
    stroke: var(--ios-blue-tegas);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
}

@media (prefers-reduced-motion: reduce) {
    .tombol-scroll-atas.tampil { animation: none; }
    .card-neuro { animation: none; }
}

/* ----------------------------------------------------------- Kartu putar --- */

/*
 * Flip-card 3D — mekanisme persis mengikuti demo Creative Tim
 * "rotating-css-card": perspective pada wadah, rotateY(180deg) pada
 * .kartu-putar saat wadah di-hover (desktop) atau diberi kelas .dibalik
 * (tap, lihat assets/js/kartu-putar.js), backface-visibility:hidden pada
 * kedua sisi supaya sisi belakang tidak "menembus" terlihat terbalik.
 */
.kartu-putar-wadah {
    perspective: 1000px;
    max-width: 360px;
    margin: 0 auto;
}

.kartu-putar {
    position: relative;
    width: 100%;
    min-height: 400px;
    transition: transform .6s cubic-bezier(.4, .2, .2, 1);
    transform-style: preserve-3d;
}

.kartu-putar-wadah:hover .kartu-putar,
.kartu-putar-wadah.dibalik .kartu-putar {
    transform: rotateY(180deg);
}

.kartu-putar-depan,
.kartu-putar-belakang {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-naik);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kartu-putar-depan {
    background: var(--np-bg-elevated);
    z-index: 2;
    justify-content: center;
}

.kartu-putar-belakang {
    background: var(--gradient-primary);
    color: #fff;
    transform: rotateY(180deg);
    z-index: 3;
    justify-content: space-between;
}

.foto-manajer {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-naik-kecil);
    border: 3px solid var(--np-bg-elevated);
    margin: 0 auto 16px;
    flex-shrink: 0;
}

.petunjuk-putar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--teks-samar);
    font-size: .78rem;
    font-weight: 700;
}
.petunjuk-putar ion-icon { font-size: 16px; }

.kartu-putar-statistik {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .28);
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.kartu-putar-statistik .angka { font-size: 1.25rem; font-weight: 800; display: block; line-height: 1.2; }
.kartu-putar-statistik .label { font-size: .68rem; opacity: .85; }
.kartu-putar-kutipan { opacity: .92; font-style: italic; }

/* Efek hover hanya untuk perangkat berkursor — di ponsel dipicu tap lewat .dibalik */
@media (hover: none) {
    .kartu-putar-wadah:hover .kartu-putar { transform: none; }
}

/* ----------------------------------------------------------- Responsif ---- */

@media (max-width: 767.98px) {
    body { font-size: 14px; }

    .card-neuro { padding: 18px; border-radius: var(--radius-md); }

    /* Shadow tidak diperbesar di layar kecil — cukup dikecilkan radiusnya. */
    .kartu-statistik { padding: 14px; gap: 11px; border-radius: var(--radius-md); }
    .kartu-statistik .ikon-statistik { width: 40px; height: 40px; font-size: 20px; border-radius: var(--radius-sm); }
    .kartu-statistik .angka { font-size: 1.2rem; }
    .kartu-statistik .keterangan { font-size: .7rem; }

    .hero-neuro { padding: 46px 0 56px; border-radius: 0 0 28px 28px; }
    .footer-neuro { border-radius: 28px 28px 0 0; }

    #wadah-toast { top: auto; bottom: 16px; right: 16px; left: 16px; max-width: none; }

    .sidebar-neuro { position: static; padding: 14px 10px; }

    .kotak-grafik { height: 200px; }

    /*
     * Chat lebih padat di ponsel: avatar & bubble mengecil, jarak antar baris
     * dirapatkan, tinggi panel dikurangi — lebih banyak pesan terlihat tanpa
     * scroll ganda (scroll panel chat di dalam scroll halaman).
     */
    .wadah-chat { max-height: 360px; padding: 4px; gap: 8px; }
    .baris-chat { gap: 8px; }
    .avatar-chat { width: 28px; height: 28px; font-size: .64rem; }
    .bubble-chat { max-width: 84%; padding: 9px 12px; font-size: .85rem; }
    .waktu-chat { font-size: .64rem; }

    .tabel-neuro tbody td { padding: 12px; }

    /*
     * Tombol hero di ponsel: satu kolom penuh, lebar dan tinggi persis sama
     * untuk kedua tombol. Grid dipakai (bukan flex-wrap) supaya tingginya
     * seragam tanpa bergantung panjang teks masing-masing tombol.
     */
    .aksi-hero { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .aksi-hero > * { width: 100%; min-height: 50px; padding-block: 0; }
}

@media (max-width: 575.98px) {
    /* Kartu ringkas (kartu nilai/keunggulan) tetap dua kolom supaya padat. */
    .grid-kartu > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
    .grid-kartu .card-neuro { padding: 12px; }
    .grid-kartu h3, .grid-kartu h5 { font-size: .95rem; }
    .grid-kartu .teks-lembut { font-size: .78rem; }

    /*
     * Kartu produk (Library & showcase) justru dibuat satu kolom penuh di
     * ponsel: di dalamnya ada gambar 16:10, judul, ringkasan, dan harga —
     * dipaksa setengah layar membuat gambar mengecil dan teks terpotong.
     * Sesuai design-system.md: "Card grid Library: 1 kolom di mobile".
     */
    .grid-produk > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .grid-produk .card-neuro { padding: 18px; }
    .grid-produk .gambar-produk,
    .grid-produk .gambar-kosong { aspect-ratio: 16 / 9; }
    .grid-produk h3 { font-size: 1.05rem; }
    .grid-produk .teks-lembut { font-size: .86rem; }
}