:root {
        --kr-primary: #4f46e5;
        --kr-primary-dark: #4338ca;
        --kr-primary-light: #eef2ff;
        --kr-violet: #7c3aed;
        --kr-accent: #f59e0b;
        --kr-success: #16a34a;
        --kr-success-light: #ecfdf5;
        --kr-danger: #dc2626;
        --kr-ink: #0f172a;
        --kr-muted: #64748b;
        --kr-border: rgba(15,23,42,.08);
        --kr-radius: 1.25rem;
        --kr-shadow-sm: 0 2px 10px rgba(15,23,42,.06);
        --kr-shadow-md: 0 12px 32px rgba(15,23,42,.10);
        --kr-shadow-lg: 0 24px 60px rgba(15,23,42,.16);
    }

    .kursus-page-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #f8fafc; z-index: -999; pointer-events: none; }

    .kursus-hero-section {
        position: relative; overflow: hidden; z-index: 2; color: #fff;
        background: linear-gradient(120deg, #3730a3 0%, var(--kr-primary) 45%, var(--kr-violet) 100%);
        border-radius: 0 0 2.5rem 2.5rem; box-shadow: var(--kr-shadow-lg);
    }
    .kursus-hero-section::before, .kursus-hero-section::after {
        content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
    }
    .kursus-hero-section::before { width: 340px; height: 340px; background: rgba(245,158,11,.35); top: -140px; right: -80px; }
    .kursus-hero-section::after { width: 280px; height: 280px; background: rgba(255,255,255,.14); bottom: -160px; left: -60px; }
    .kursus-hero-inner { position: relative; z-index: 1; }
    .kursus-logo-shadow { filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); background: #fff; border-radius: 20px; padding: 10px; }
    .kursus-text-shadow { text-shadow: 0 2px 12px rgba(0,0,0,.18); }
    .kursus-tracking-wide { letter-spacing: .3px; }
    .kursus-badge-pmb { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.28); box-shadow: var(--kr-shadow-sm); }

    /* ===== Filter bar ===== */
    .kursus-kr-filter-card { background: #fff; border: 1px solid var(--kr-border); border-radius: var(--kr-radius); box-shadow: var(--kr-shadow-sm); padding: 1.1rem 1.25rem; margin-bottom: 1.75rem; }
    .kursus-kr-filter-card .form-control, .kursus-kr-filter-card .form-select, .kursus-kr-filter-card .input-group-text {
        border-color: var(--kr-border); border-radius: .85rem; background: #f8fafc;
    }
    .kursus-kr-filter-card .form-control:focus, .kursus-kr-filter-card .form-select:focus { border-color: var(--kr-primary); box-shadow: 0 0 0 .2rem rgba(79,70,229,.12); background: #fff; }

    /* ===== Tabs (segmented pill switcher) ===== */
    .kursus-nav-tabs-custom { border-bottom: 0; margin: 2rem 0 1.75rem; gap: .4rem; background: #eef1f8; border-radius: 999px; padding: .35rem; display: inline-flex; }
    .kursus-nav-tabs-custom .nav-item { flex: 0 0 auto; }
    .kursus-nav-tabs-custom .nav-link { border: none; color: var(--kr-muted); font-weight: 700; padding: .65rem 1.4rem; border-radius: 999px; transition: all .2s ease; }
    .kursus-nav-tabs-custom .nav-link.active { color: #fff; background: linear-gradient(120deg, var(--kr-primary), var(--kr-violet)); box-shadow: 0 8px 18px rgba(79,70,229,.28); }
    .kursus-nav-tabs-custom .nav-link:hover:not(.active) { color: var(--kr-primary); }

    /* ===== Course cards ===== */
    .kursus-course-card { border: 1px solid var(--kr-border); border-radius: var(--kr-radius); transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; background: #fff; box-shadow: var(--kr-shadow-sm); height: 100%; display: flex; flex-direction: column; }
    .kursus-course-card:hover { transform: translateY(-6px); box-shadow: var(--kr-shadow-md); }
    .kursus-course-icon-wrapper { height: 152px; background: linear-gradient(135deg, var(--kr-primary-light) 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; font-size: 3.25rem; color: var(--kr-primary); overflow: hidden; position: relative; }
    .kursus-course-icon-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    .kursus-course-body { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
    .kursus-course-title { font-size: 1.04rem; font-weight: 700; color: var(--kr-ink); margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
    .kursus-course-category { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .6rem; background: var(--kr-primary-light); color: var(--kr-primary); padding: .22rem .6rem; border-radius: 999px; }
    .kursus-course-price { font-size: 1.15rem; font-weight: 800; color: var(--kr-success); margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--kr-border); }
    .kursus-course-rating { color: var(--kr-accent); font-size: .82rem; }

    .kursus-btn-kr-primary { background: linear-gradient(120deg, var(--kr-primary), var(--kr-violet)); border: 0; color: #fff; box-shadow: 0 8px 18px rgba(79,70,229,.25); }
    .kursus-btn-kr-primary:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); }
    .kursus-btn-kr-outline { border: 1.5px solid var(--kr-primary); color: var(--kr-primary); background: #fff; }
    .kursus-btn-kr-outline:hover { background: var(--kr-primary-light); color: var(--kr-primary-dark); }

    /* ===== Soft cards / stats / player / kurikulum ===== */
    .kursus-kr-stat-card { border: 1px solid var(--kr-border); border-radius: 1rem; background: #fff; box-shadow: var(--kr-shadow-sm); border-left: 4px solid var(--kr-primary); padding: 1.1rem 1.25rem; height: 100%; transition: box-shadow .2s ease; }
    .kursus-kr-stat-card:hover { box-shadow: var(--kr-shadow-md); }
    .kursus-kr-soft-card { border: 1px solid var(--kr-border); border-radius: var(--kr-radius); background: #fff; box-shadow: var(--kr-shadow-sm); }
    .kursus-kr-section-item { border: 1px solid var(--kr-border); border-radius: 1rem; margin-bottom: .7rem; overflow: hidden; }
    .kursus-kr-materi-row { border-top: 1px solid #f1f3f5; padding: .6rem .9rem; display:flex; align-items:center; gap:.6rem; }
    .kursus-kr-player-sidebar { max-height: 70vh; overflow-y: auto; }
    .kursus-kr-materi-link { cursor: pointer; padding: .6rem .8rem; border-radius: .7rem; display:flex; align-items:center; gap:.6rem; transition: background .15s ease; }
    .kursus-kr-materi-link:hover { background: var(--kr-primary-light); }
    .kursus-kr-materi-link.active { background: var(--kr-primary-light); color: var(--kr-primary-dark); font-weight: 700; }
    .kursus-kr-lock { color:#adb5bd; }

    .kursus-kr-modul-card { cursor: pointer; background: #fff; border: 1px solid var(--kr-border); border-radius: 1rem; padding: 1rem 1.1rem; height: 100%; transition: box-shadow .2s ease, transform .2s ease; box-shadow: var(--kr-shadow-sm); }
    .kursus-kr-modul-card:hover { box-shadow: var(--kr-shadow-md); transform: translateY(-3px); }
    .kursus-kr-modul-badge { font-weight: 800; font-size: .78rem; background: var(--kr-primary-light); color: var(--kr-primary); padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; }
    .kursus-kr-modul-badge.done { background: var(--kr-success-light); color: var(--kr-success); }
    .kursus-kr-modul-item { cursor: pointer; display:flex; align-items:center; gap:.75rem; padding: .75rem .5rem; border-bottom: 1px solid #f1f3f5; transition: background .15s ease; }
    .kursus-kr-modul-item:last-child { border-bottom: 0; }
    .kursus-kr-modul-item:hover { background: var(--kr-primary-light); border-radius: .6rem; }

    .kursus-empty-state { text-align: center; padding: 3.5rem 1.5rem; background: #fff; border: 1px dashed var(--kr-border); border-radius: var(--kr-radius); color: var(--kr-muted); }
    .kursus-empty-state i { font-size: 2.75rem; color: #c7cbe0; margin-bottom: 1rem; display: block; }

    .kursus-kr-modal-header { background: linear-gradient(120deg, var(--kr-primary-light), #f5f3ff); border-bottom: 1px solid var(--kr-border); }
    .kursus-modal-root .modal-content { border-radius: 1.25rem; overflow: hidden; }

    .kursus-kr-auth-widget { position: absolute; top: 1.1rem; right: 1.5rem; z-index: 4; }
    .kursus-kr-btn-login { background: rgba(255,255,255,.16); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.32); color: #fff; font-weight: 700; padding: .5rem 1.15rem; border-radius: 999px; transition: .2s; }
    .kursus-kr-btn-login:hover { background: #fff; color: var(--kr-primary); }

    .kursus-footer-pmb { background: linear-gradient(135deg, #0b1220 0%, #1e1b4b 100%); color: #fff; position: relative; z-index: 10; margin-top: 5rem; }
    .kursus-footer-pmb h5 { letter-spacing: .3px; }
    .kursus-footer-pmb .social-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; transition: .2s; margin-right: 0.5rem; text-decoration: none; }
    .kursus-footer-pmb .social-icon:hover { background: var(--kr-primary); transform: translateY(-3px); }