/* EXSA e-Kursus Modern Theme 2.1
   Tema terpadu: putih, biru, hijau; responsif dan aksesibel. */
:root {
    --exsa-blue-950: #082f49;
    --exsa-blue-900: #0c4a6e;
    --exsa-blue-700: #0369a1;
    --exsa-blue-600: #0284c7;
    --exsa-blue-500: #0ea5e9;
    --exsa-green-700: #047857;
    --exsa-green-600: #059669;
    --exsa-green-500: #10b981;
    --exsa-cyan-400: #22d3ee;
    --exsa-white: #ffffff;
    --exsa-bg: #f4f9fc;
    --exsa-surface: rgba(255, 255, 255, .92);
    --exsa-text: #16324a;
    --exsa-muted: #64748b;
    --exsa-border: #dce9f1;
    --exsa-shadow-sm: 0 8px 24px rgba(8, 47, 73, .07);
    --exsa-shadow: 0 18px 50px rgba(8, 47, 73, .12);
    --exsa-radius-sm: 12px;
    --exsa-radius: 18px;
    --exsa-radius-lg: 26px;
    --primary: var(--exsa-blue-600);
    --secondary: var(--exsa-green-600);
    --success: var(--exsa-green-600);
    --info: var(--exsa-blue-500);
    --sidebar-width: 270px;
}

html { scroll-behavior: smooth; }

body {
    color: var(--exsa-text);
    background:
        radial-gradient(circle at 8% 4%, rgba(14,165,233,.10), transparent 28rem),
        radial-gradient(circle at 94% 90%, rgba(16,185,129,.10), transparent 30rem),
        var(--exsa-bg) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
    content: "";
    position: fixed;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .12;
    pointer-events: none;
    z-index: -1;
    animation: exsaFloat 12s ease-in-out infinite alternate;
}
body::before { background: var(--exsa-blue-500); top: 6%; right: 4%; }
body::after { background: var(--exsa-green-500); bottom: 5%; left: 3%; animation-delay: -5s; }

::selection { color: #fff; background: var(--exsa-blue-600); }
a { color: var(--exsa-blue-700); text-underline-offset: 3px; }
a:hover { color: var(--exsa-green-700); }
h1, h2, h3, h4, h5, h6 { color: var(--exsa-blue-950); letter-spacing: -.02em; }
.text-muted { color: var(--exsa-muted) !important; }

/* Navigasi dan sidebar */
.navbar.bg-dark,
.navbar-dark {
    background: linear-gradient(105deg, var(--exsa-blue-950), var(--exsa-blue-700) 58%, var(--exsa-green-600)) !important;
    box-shadow: 0 10px 35px rgba(8,47,73,.18);
}
.navbar-brand { font-weight: 800; letter-spacing: -.02em; }
.navbar .nav-link { border-radius: 10px; transition: background .2s ease, transform .2s ease; }
.navbar .nav-link:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }

.sidebar {
    background: linear-gradient(165deg, var(--exsa-blue-950) 0%, var(--exsa-blue-700) 52%, var(--exsa-green-700) 100%) !important;
    box-shadow: 12px 0 40px rgba(8,47,73,.14) !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.45) rgba(0,0,0,.12);
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,.12); }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.42);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.65); }
.sidebar > nav,
.sidebar > .sidebar-menu { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.sidebar .logo,
.sidebar-header,
.sidebar .user-info {
    position: sticky;
    top: 0;
    z-index: 5;
}
.sidebar .logo,
.sidebar-header,
.sidebar .user-info {
    background: rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
    backdrop-filter: blur(12px);
}
.sidebar h5, .sidebar h6, .sidebar small { color: #fff; }
.sidebar .nav-link,
.sidebar-menu li a {
    color: rgba(255,255,255,.84) !important;
    margin: 4px 10px;
    padding: 11px 14px !important;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.09)) !important;
    border-color: rgba(255,255,255,.16) !important;
    border-left-color: var(--exsa-cyan-400) !important;
    transform: translateX(3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.sidebar .nav-link i,
.sidebar-menu li a i { width: 24px; color: #a5f3fc; }
.sidebar .user-avatar,
.sidebar .avatar {
    border: 4px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 28px rgba(0,0,0,.15);
}

@media (max-width: 991.98px) {
    .sidebar {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* Area konten */
.main-content { position: relative; }
.top-bar,
.content-header {
    background: var(--exsa-surface) !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    border-radius: var(--exsa-radius) !important;
    box-shadow: var(--exsa-shadow-sm) !important;
    backdrop-filter: blur(16px);
}
.page-title { color: var(--exsa-blue-950); }
.page-content > .alert,
.page-content > .card,
.page-content > .row > [class*="col-"] > .card { animation: exsaRise .48s ease both; }

/* Kartu */
.card,
.feature-card,
.stats-card,
.login-card,
.register-card {
    background: var(--exsa-surface) !important;
    border: 1px solid rgba(220,233,241,.88) !important;
    border-radius: var(--exsa-radius) !important;
    box-shadow: var(--exsa-shadow-sm) !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.card:hover,
.feature-card:hover,
.stats-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14,165,233,.28) !important;
    box-shadow: var(--exsa-shadow) !important;
}
.card-header {
    padding: 1rem 1.2rem;
    color: var(--exsa-blue-950);
    background: linear-gradient(110deg, rgba(14,165,233,.09), rgba(16,185,129,.08)) !important;
    border-bottom: 1px solid var(--exsa-border) !important;
    font-weight: 700;
}
.card-footer { background: rgba(248,252,254,.82) !important; border-top-color: var(--exsa-border) !important; }
.stats-icon,
.feature-icon {
    background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(16,185,129,.18)) !important;
    color: var(--exsa-blue-700) !important;
    box-shadow: inset 0 0 0 1px rgba(14,165,233,.12);
}

/* Tombol */
.btn {
    border-radius: 11px !important;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(8,47,73,.14); }
.btn:active { transform: translateY(0); }
.btn-primary,
.bg-primary,
.bg-gradient-primary {
    background: linear-gradient(105deg, var(--exsa-blue-700), var(--exsa-blue-500)) !important;
    border-color: transparent !important;
}
.btn-success,
.bg-success,
.bg-gradient-success {
    background: linear-gradient(105deg, var(--exsa-green-700), var(--exsa-green-500)) !important;
    border-color: transparent !important;
}
.btn-info,
.bg-info,
.bg-gradient-info {
    color: #fff !important;
    background: linear-gradient(105deg, var(--exsa-blue-600), var(--exsa-green-500)) !important;
    border-color: transparent !important;
}
.btn-outline-primary { color: var(--exsa-blue-700); border-color: var(--exsa-blue-500); }
.btn-outline-primary:hover { color: #fff; background: var(--exsa-blue-600); }
.btn-outline-success { color: var(--exsa-green-700); border-color: var(--exsa-green-500); }
.btn-light { color: var(--exsa-blue-900); }
.btn-group { gap: 3px; }

/* Form */
.form-control,
.form-select,
.input-group-text {
    min-height: 44px;
    border-color: var(--exsa-border) !important;
    border-radius: 11px;
    background-color: rgba(255,255,255,.92);
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-control:focus,
.form-select:focus {
    border-color: var(--exsa-blue-500) !important;
    box-shadow: 0 0 0 .22rem rgba(14,165,233,.13) !important;
}
.form-label, label { color: var(--exsa-blue-950); font-weight: 650; }
.form-check-input:checked { background-color: var(--exsa-green-600); border-color: var(--exsa-green-600); }

/* Tabel */
.table-responsive {
    border: 1px solid var(--exsa-border);
    border-radius: var(--exsa-radius-sm);
    box-shadow: 0 6px 18px rgba(8,47,73,.04);
}
.table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--exsa-text); }
.table thead,
.table-light {
    --bs-table-bg: #edf8fc;
    --bs-table-color: var(--exsa-blue-950);
    background: linear-gradient(105deg, rgba(14,165,233,.10), rgba(16,185,129,.09)) !important;
}
.table th {
    padding: .9rem .8rem;
    border-bottom: 1px solid #cfe3ed !important;
    color: var(--exsa-blue-950) !important;
    font-size: .78rem;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table td { padding: .88rem .8rem; border-color: #e7f0f5; vertical-align: middle; }
.table tbody tr { transition: background .18s ease; }
.table tbody tr:hover { background: rgba(14,165,233,.045); }

/* Komponen Bootstrap */
.modal { z-index: 1220 !important; }
.modal-backdrop { z-index: 1210 !important; }
.modal.show,
.modal.show .modal-dialog,
.modal.show .modal-content { animation: none !important; }
.modal.show .modal-dialog { transform: none !important; }
body.modal-open .card,
body.modal-open .stats-card,
body.modal-open .feature-card {
    transform: none !important;
    transition: none !important;
}
.modal-content {
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: var(--exsa-radius-lg) !important;
    box-shadow: 0 28px 80px rgba(8,47,73,.24) !important;
}
.modal-header { border-bottom-color: var(--exsa-border); }
.modal-footer { border-top-color: var(--exsa-border); }
.dropdown-menu {
    padding: .5rem;
    border: 1px solid var(--exsa-border);
    border-radius: 13px;
    box-shadow: var(--exsa-shadow);
}
.dropdown-item { border-radius: 9px; }
.dropdown-item:hover { color: var(--exsa-blue-900); background: #eaf8fc; }
.nav-tabs { gap: 6px; border-bottom-color: var(--exsa-border); }
.nav-tabs .nav-link { color: var(--exsa-muted); border-radius: 11px 11px 0 0; font-weight: 700; }
.nav-tabs .nav-link.active { color: var(--exsa-blue-700); border-color: var(--exsa-border) var(--exsa-border) #fff; }
.nav-pills .nav-link { border-radius: 11px; color: var(--exsa-blue-700); font-weight: 700; }
.nav-pills .nav-link.active { background: linear-gradient(105deg, var(--exsa-blue-600), var(--exsa-green-600)); }
.badge { border-radius: 999px !important; padding: .48em .75em; letter-spacing: .01em; }
.alert { border: 0 !important; border-left: 4px solid currentColor !important; border-radius: var(--exsa-radius-sm) !important; box-shadow: var(--exsa-shadow-sm); }
.pagination { gap: 4px; }
.page-link { color: var(--exsa-blue-700); border-color: var(--exsa-border); border-radius: 9px !important; }
.active > .page-link { background: var(--exsa-blue-600); border-color: var(--exsa-blue-600); }
.progress { height: 10px; border-radius: 999px; background: #e5eff4; }
.progress-bar { background: linear-gradient(90deg, var(--exsa-blue-500), var(--exsa-green-500)); }

/* Landing dan autentikasi */
.hero,
.login-header,
.register-header {
    background: linear-gradient(125deg, var(--exsa-blue-950) 0%, var(--exsa-blue-600) 52%, var(--exsa-green-600) 100%) !important;
    position: relative;
    overflow: hidden;
}
.hero::before,
.login-header::before,
.register-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 25%),
                radial-gradient(circle at 85% 75%, rgba(34,211,238,.20), transparent 30%);
    animation: exsaGlow 8s ease-in-out infinite alternate;
}
.hero > *, .login-header > *, .register-header > * { position: relative; }
.hero h1, .hero h2, .hero p { color: #fff; }
.stats { background: linear-gradient(180deg, #fff, #f1fafb) !important; }
.stat-number {
    color: var(--exsa-blue-700) !important;
    background: linear-gradient(90deg, var(--exsa-blue-600), var(--exsa-green-600));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #7dd3fc #eaf3f7; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #eaf3f7; }
*::-webkit-scrollbar-thumb { background: linear-gradient(var(--exsa-blue-500), var(--exsa-green-500)); border-radius: 999px; }

@keyframes exsaPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes exsaRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes exsaFloat {
    from { transform: translate3d(-8px,-5px,0) scale(.96); }
    to { transform: translate3d(12px,10px,0) scale(1.08); }
}
@keyframes exsaGlow {
    from { transform: scale(1); opacity: .72; }
    to { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 991.98px) {
    .main-content { padding: 14px !important; }
    .content-header, .top-bar { border-radius: 14px !important; }
    .card-body { padding: 1rem; }
    .table-responsive { border-radius: 12px; }
}

@media (max-width: 575.98px) {
    body { font-size: .94rem; }
    h1 { font-size: calc(1.45rem + 1vw); }
    h2 { font-size: calc(1.3rem + .8vw); }
    .hero { padding: 72px 0 !important; }
    .hero h1 { font-size: 2rem !important; }
    .btn-login { width: min(100%, 280px); margin: 6px !important; }
    .modal-dialog { margin: .65rem; }
    .modal-content { border-radius: 18px !important; }
    .content-header { align-items: flex-start !important; gap: 10px; }
    .table th, .table td { padding: .72rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}