/*
  Kelas TKJ Online - Professional Redesign
  Author: GitHub Copilot
  Date: 2025-09-01
  Description: A complete CSS overhaul for a professional, modern, and clean educational platform.
*/

/* ===== 1. ROOT & VARIABLES ===== */
:root {
    /* Color Palette: Professional & Trustworthy */
    --color-primary: #0284c7; /* Sky 600 */
    --color-primary-deep: #0369a1; /* Sky 700 */
    --color-primary-dark: #0c4a6e; /* Sky 900 */
    --color-accent: #3b82f6; /* Blue 500 */
    --color-background: #f8fafc; /* Slate 50 */
    --color-surface: #ffffff;
    --color-text-primary: #0f172a; /* Slate 900 */
    --color-text-secondary: #475569; /* Slate 600 */
    --color-text-muted: #94a3b8; /* Slate 400 */
    --color-border: #e2e8f0; /* Slate 200 */
    --color-white: #ffffff;
    --color-black: #000000;

        /* Extended Neutral Scale (for consistency in later sections) */
        --gray-50: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0; /* alias color-border */
        --gray-300: #cbd5e1;
        --gray-400: #94a3b8; /* alias color-text-muted */
        --gray-500: #64748b;
        --gray-600: #475569; /* alias color-text-secondary */
        --gray-700: #334155;
        --gray-800: #1e293b;
        --gray-900: #0f172a; /* alias color-text-primary */

        /* Semantic aliases to avoid undefined vars in legacy blocks */
        --primary-500: var(--color-primary);
        --accent-500: var(--color-accent);

        /* Spacing Scale (rem) */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Spacing & Sizing */
    --spacing-unit: 0.25rem; /* 4px */
    --nav-height: 72px;

    /* Border Radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --radius-xl: 1rem; /* 16px */

    /* Shadows - Subtle & Professional */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-color: 280ms cubic-bezier(0.4,0,0.2,1);
}

/* ===== 2. BASE & RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-text-secondary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

    /* Removed broad :focus-visible outline (was causing short blue strip at top when layout container got focus) */
    html:focus-visible, body:focus-visible, main:focus-visible, #main:focus-visible { outline:none !important; }

    /* Remove unwanted short blue line above navbar (outline from focused brand link) */
    .brand:focus-visible { outline: none !important; box-shadow: none !important; }
    /* Also neutralize focus outline on nav links to avoid top stray pixel; replace with underline only */
    .header .nav-link:focus-visible { outline:none !important; box-shadow:none !important; }
    .header .nav-link:focus-visible:after { content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:2px; }

body.nav-open {
    overflow: hidden;
}

/* Minimal skip link styling (avoid top border line) */
a[href^="#"].skip-link, .skip-link { outline:none !important; box-shadow:none !important; }

/* Enhanced footer */
.footer{background:#0f172a;color:#cbd5e1;padding:3.5rem 0 0;margin-top:4rem;position:relative;overflow:hidden;}
.footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(56,189,248,.12),transparent 60%),radial-gradient(circle at 85% 65%,rgba(2,132,199,.12),transparent 65%);opacity:.9;pointer-events:none;}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:flex-start;}
.footer .f-brand{max-width:300px;}
.footer .f-logo{font-weight:700;font-size:1.1rem;margin-bottom:.75rem;color:#fff;}
.footer h4{font-size:.85rem;letter-spacing:.5px;text-transform:uppercase;font-weight:600;margin-bottom:.9rem;color:#e2e8f0;}
.footer a{color:#94a3b8;text-decoration:none;font-size:.85rem;display:inline-block;padding:.25rem 0;transition:color .25s,transform .25s;}
.footer a:hover{color:#38bdf8;transform:translateX(3px);}
.footer .socials a{font-size:1.15rem;padding:.35rem .45rem;margin-right:.35rem;border-radius:8px;background:rgba(255,255,255,.05);} 
.footer .socials a:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);} 
.footer-bottom{margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.08);padding:1.1rem 0;text-align:center;font-size:.75rem;color:#64748b;}
.footer-bottom p{margin:0;}
.footer .f-contact a{color:#38bdf8;font-weight:600;}
.footer .f-contact a:hover{color:#0ea5e9;}
@media (max-width:600px){.footer{padding-top:3rem;}.footer-grid{gap:2rem;} .footer h4{margin-top:.5rem;}}

/* Contact form adjustments */
.contact-form button[type=submit]{width:100%;}
.contact-form .form-note{font-size:.65rem;opacity:.7;margin-top:.75rem;}

/* Terminal typing effect */
#terminalType{position:relative;display:block;min-height:180px;white-space:pre-wrap;font-family:var(--monospace, 'Courier New', monospace);}
#terminalType.typing:after{content:"";position:absolute;width:10px;height:1.1em;background:#38bdf8;right:-2px;top:0;animation:caretBlink 1s steps(1,end) infinite;border-radius:2px;}
@keyframes caretBlink{50%{opacity:0;}}

/* ===================== GLOBAL BACKGROUND ENHANCEMENT ===================== */
/* Layered dynamic background: radial accents + gradient + fine grid + noise */
body{
    --bg-accent-1: rgba(56,189,248,0.10); /* cyan */
    --bg-accent-2: rgba(139,92,246,0.10); /* violet */
    --bg-base-1: #0f172a;
    --bg-base-2: #0a1120;
    --bg-base-3: #0f172a;
    background:
        radial-gradient(circle at 72% 28%, var(--bg-accent-1), transparent 60%),
        radial-gradient(circle at 18% 74%, var(--bg-accent-2), transparent 65%),
        linear-gradient(160deg, var(--bg-base-1) 0%, var(--bg-base-2) 58%, var(--bg-base-3) 100%);
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}
body:before, body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;}
/* Fine grid overlay */
body:after{
    background:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:140px 140px,140px 140px;
    mix-blend-mode:overlay;
    opacity:.55;
    mask:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 15%,rgba(0,0,0,.5) 85%,rgba(0,0,0,0) 100%);
}
/* Subtle noise + parallax shift */
body:before{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAACq0K2PAAABn0lEQVR4Ae2WsWpUQRSGv7fYQJEGDgY2CkJBIJY2FgIBeQ2sLCIkYWNvY2Nh4CIIgI2gS1pELCQk2Fi4EIT4Z2AmZ3Z2bP/5szuzOzszkLK3NWnzpn3nDPPOed4nct8gURT8B54A6YBpzjL1gCbwA5YD2wCqz6Lk9YB5o3wDKy2R9mApsDfjvYBz4HdQm8A/YA9cC6oEVab0q8A94Czt1VX9gDfhxKj5yYwAL4Ap6XK1xGs4/MBP4B0YBr4VzZ8KUcF0wssT+4eAO8BvYB9YBux3HQS8B53BnobWOYTzalc0qkUqm8zqrp0Wg0TXquMhmHw1Gox+M4/HAVqtVWrVu2rTqdDptMBsMwqVTqeDz+Sy+X6+1Wq2KoiiCIAg6nQ7L5bLNZjNZLBbDYDDweD9vt9u12O12m81mEwmwzCMYRi6XK7FYrFarRaPR4PFYrFar1eLxeDw+Hw+1Wg2maZqmqbRarUaDofD6XT6YRiGq6rqer1er9fr9Qaj8TiO4zi/1uv1RCKRCCGEEEIIIYSQ0b4B3oD7gR1gFlgrzqxdwAX4B7wLvgHzgB/gI7ALHABbqlZTWwGpBCfQRMc0wk5yRqZq6pHkMj5AEyTsb+FK3PIAAAAASUVORK5CYII=) repeat;
    opacity:.25;
    transform:translate3d(var(--bg-shift,0), calc(var(--bg-shift,0) * 0.6),0);
    transition:transform .2s linear;
    image-rendering:pixelated;
}
/* Light theme adjustments */
body[data-theme="light"]{
    --bg-accent-1: rgba(14,165,233,0.18);
    --bg-accent-2: rgba(99,102,241,0.18);
    --bg-base-1:#f1f5f9;
    --bg-base-2:#e2e8f0;
    --bg-base-3:#f1f5f9;
    background:
        radial-gradient(circle at 72% 28%, var(--bg-accent-1), transparent 60%),
        radial-gradient(circle at 18% 74%, var(--bg-accent-2), transparent 65%),
        linear-gradient(160deg,var(--bg-base-1) 0%, var(--bg-base-2) 55%, var(--bg-base-3) 100%);
}
body[data-theme="light"]:after{background:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);} 
body[data-theme="light"]:before{opacity:.15;}

/* Section subtle backdrop (optional) */
main, header, footer, section{position:relative;z-index:1;}
section:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;}
section:hover:before{opacity:.04;background:linear-gradient(135deg,rgba(255,255,255,0.07),transparent 70%);} 

@media (max-width:768px){body:after{background-size:120px 120px,120px 120px;}}

/* ===== THEME / COLOR TRANSITION (Accessible) ===== */
/* Only active briefly when body gets .theming class (set by JS) */
body.theming, body.theming * {
        transition-property: background-color, color, border-color, box-shadow, fill, stroke;
        transition-duration: var(--transition-color);
        transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}
/* Avoid animating large media & layout heavy elements */
body.theming img, body.theming video, body.theming svg path[stroke-width] { transition: none !important; }
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    body.theming, body.theming * { transition: none !important; }
}

/* ===== SCROLL PROGRESS BAR ===== */
#scrollProgress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));z-index:9999;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 6px -1px rgba(0,0,0,.25);transition:width .15s linear,opacity .4s ease;opacity:.9;}
body.dark #scrollProgress{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2px 8px -2px rgba(0,0,0,.6);} 
@media (prefers-reduced-motion: reduce){#scrollProgress{transition:none;}}

/* ===== BACK TO TOP BUTTON (minimal) ===== */
.back-to-top{position:fixed;right:.85rem;bottom:.85rem;width:38px;height:38px;border-radius:10px;border:1px solid rgba(2,132,199,.35);background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.25));-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);color:var(--color-primary-dark);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;opacity:0;pointer-events:none;transform:translateY(10px) scale(.9);transition:opacity .35s var(--transition-color),transform .45s var(--transition-color),background .35s,border-color .35s,color .35s,box-shadow .35s;box-shadow:0 4px 14px -6px rgba(0,0,0,.35),0 2px 4px -2px rgba(0,0,0,.22);} 
.back-to-top .bt-icon{display:block;stroke-width:2.2;} 
.back-to-top.show{opacity:.85;pointer-events:auto;transform:translateY(0) scale(1);} 
.back-to-top:hover{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.4));} 
.back-to-top:active{transform:translateY(2px) scale(.92);} 
.back-to-top:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;} 
body.dark .back-to-top{background:linear-gradient(145deg,rgba(30,41,59,.75),rgba(15,23,42,.55));color:#e2e8f0;border-color:rgba(56,189,248,.4);box-shadow:0 4px 16px -6px rgba(0,0,0,.6),0 2px 4px -2px rgba(0,0,0,.5);} 
body.dark .back-to-top.show{opacity:.75;} 
body.dark .back-to-top:hover{background:linear-gradient(145deg,rgba(51,65,85,.85),rgba(15,23,42,.65));} 
@media (max-width:640px){.back-to-top{right:.65rem;bottom:.65rem;width:34px;height:34px;border-radius:8px;} .back-to-top.show{opacity:.75;} }

/* ===== COURSE STATE (EMPTY / ERROR) ===== */
.course-state{display:flex;gap:1.75rem;padding:2.25rem 2rem;border:1px solid var(--gray-200);border-radius:1rem;background:linear-gradient(135deg,#ffffff 0%,#f1f5f9 90%);position:relative;overflow:hidden;box-shadow:var(--shadow-md);}
body.dark .course-state{background:linear-gradient(135deg,#1e293b 0%,#0f172a 85%);border-color:#1e293b;}
.course-state:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(2,132,199,.12),transparent 60%);pointer-events:none;}
.course-state--error{border-color:rgba(220,38,38,.3);}
body.dark .course-state--error{border-color:rgba(248,113,113,.35);}
.course-state .cs-icon{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;color:var(--color-primary);}
body.dark .course-state .cs-icon{color:#38bdf8;}
.course-state .cs-body{min-width:0;}
.course-state .cs-title{margin:0 0 .75rem;font-size:1.15rem;font-weight:600;letter-spacing:.3px;color:var(--color-text-primary);} 
body.dark .course-state .cs-title{color:#f1f5f9;}
.course-state .cs-text{margin:0 0 1rem;font-size:.9rem;color:var(--color-text-secondary);max-width:60ch;}
body.dark .course-state .cs-text{color:#cbd5e1;}
.course-state .cs-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem;}
.course-state .cs-actions .btn{--btn-pad-x:1rem;}
.course-state .cs-hint{margin:0;font-size:.65rem;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted);} 
body.dark .course-state .cs-hint{color:#64748b;}
@media (max-width:640px){
    .course-state{flex-direction:column;padding:1.5rem 1.25rem;gap:1.15rem;}
    .course-state .cs-icon svg{width:34px;height:34px;}
    .course-state .cs-title{font-size:1rem;}
    .course-state .cs-text{font-size:.85rem;}
}
@media (prefers-reduced-motion: reduce){.back-to-top{transition:none;}}

/* ===== POLICY / STATIC PAGES ===== */
.static-page .page-hero{position:relative;}
.static-page .policy-content{font-size:0.975rem;line-height:1.65;}
.static-page .policy-content h2{margin-top:2.75rem;margin-bottom:.85rem;font-size:1.15rem;line-height:1.25;color:var(--color-text-primary);font-weight:600;position:relative;padding-top:.25rem;}
body.dark .static-page .policy-content h2, body[data-theme="dark"] .static-page .policy-content h2{color:#f1f5f9;}
.static-page .policy-content h2:before{content:"";position:absolute;left:-.75rem;top:.35rem;width:4px;height:1.15rem;border-radius:3px;background:linear-gradient(var(--color-primary),var(--color-accent));opacity:.8;}
.static-page .policy-content p{margin:0 0 1.15rem;max-width:70ch;color:var(--color-text-secondary);}
body.dark .static-page .policy-content p, body[data-theme="dark"] .static-page .policy-content p{color:#cbd5e1;}
.static-page .policy-content ul{margin:0 0 1.4rem 1.1rem;list-style:none;padding:0;}
.static-page .policy-content ul li{position:relative;padding-left:1.15rem;margin:0 0 .55rem;}
.static-page .policy-content ul li:before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;border:2px solid var(--color-primary);border-radius:4px;box-shadow:0 0 0 2px rgba(2,132,199,.12);background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(255,255,255,0));}
body.dark .static-page .policy-content ul li:before, body[data-theme="dark"] .static-page .policy-content ul li:before{background:linear-gradient(135deg,rgba(255,255,255,0.25),rgba(255,255,255,0));border-color:#38bdf8;box-shadow:0 0 0 2px rgba(56,189,248,.18);}
.static-page .policy-content code{background:rgba(2,132,199,0.08);padding:2px 6px;border-radius:6px;font-size:.75rem;font-family:var(--monospace,'Courier New',monospace);color:var(--color-primary-dark);}
body.dark .static-page .policy-content code, body[data-theme="dark"] .static-page .policy-content code{background:rgba(56,189,248,0.15);color:#e0f2fe;}
.static-page .policy-content hr{border:0;height:1px;background:linear-gradient(90deg,rgba(148,163,184,0),rgba(148,163,184,.4),rgba(148,163,184,0));margin:3rem 0 2.5rem;}
.static-page .policy-content a{color:var(--color-primary);text-decoration:none;border-bottom:1px dashed rgba(2,132,199,.4);transition:color .25s,border-color .25s;}
.static-page .policy-content a:hover{color:var(--color-primary-deep);border-color:var(--color-primary-deep);}
body.dark .static-page .policy-content a, body[data-theme="dark"] .static-page .policy-content a{color:#38bdf8;border-color:rgba(56,189,248,.5);} 
body.dark .static-page .policy-content a:hover, body[data-theme="dark"] .static-page .policy-content a:hover{color:#7dd3fc;border-color:#7dd3fc;}
.static-page .policy-content strong{color:var(--color-text-primary);} body.dark .static-page .policy-content strong, body[data-theme="dark"] .static-page .policy-content strong{color:#f8fafc;}
.static-page .policy-content .summary-box{background:linear-gradient(135deg,rgba(2,132,199,.08),rgba(2,132,199,.02));padding:1rem 1.1rem;border:1px solid rgba(2,132,199,.25);border-radius:.85rem;margin-top:2rem;font-size:.85rem;color:var(--color-text-secondary);}
body.dark .static-page .policy-content .summary-box, body[data-theme="dark"] .static-page .policy-content .summary-box{background:linear-gradient(135deg,rgba(30,58,138,.6),rgba(2,132,199,.15));border-color:rgba(56,189,248,.35);color:#cbd5e1;}
.policy-meta{font-size:.8rem;color:var(--color-text-muted);margin-top:.65rem;}
body.dark .policy-meta, body[data-theme="dark"] .policy-meta{color:#94a3b8;}
@media (max-width:760px){
    .static-page .policy-content h2{margin-top:2.25rem;font-size:1.05rem;}
    .static-page .policy-content{font-size:.93rem;}
    .static-page .policy-content ul{margin-left:.75rem;}
}

/* Fix overlap: ensure static pages start below fixed header */
.static-page .page-hero{padding-top:calc(var(--nav-height) + 2.5rem)!important;}
@media (max-width:780px){
    .static-page .page-hero{padding-top:calc(var(--nav-height) + 1.75rem)!important;}
}

/* Light theme readability adjustments for policy buttons & muted text */
body[data-theme="light"] .static-page .policy-content a.btn, body:not(.dark) .static-page .policy-content a.btn{
    color:#fff !important;
}
body[data-theme="light"] .static-page .policy-content .summary-box strong{color:var(--color-text-primary);}
/* Ensure summary box contrast in light */
body[data-theme="light"] .static-page .policy-content .summary-box{background:linear-gradient(135deg,rgba(2,132,199,.12),rgba(2,132,199,.03));}

/* Improve hero title color in light if background gradient bright */
body[data-theme="light"] .static-page .hero-title{color:#0f172a; text-shadow:0 1px 0 rgba(255,255,255,0.35);}
body.dark .static-page .hero-title{color:#f8fafc;}

/* Utility: disable enhanced background */
.bg-minimal body:before,.bg-minimal body:after{display:none!important;}

/* Accessible focus ring (only for interactive elements) */
button:focus-visible, a:focus-visible, .nav-link:focus-visible, .course-card:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(2,132,199,.45), 0 0 0 1px rgba(255,255,255,.6);
    border-radius: 6px;
    transition: box-shadow .2s ease;
}
.show-focus button:focus-visible, .show-focus a:focus-visible, .show-focus .nav-link:focus-visible, .show-focus .course-card:focus-visible, .show-focus input:focus-visible, .show-focus textarea:focus-visible { box-shadow: 0 0 0 3px rgba(2,132,199,.55), 0 0 0 1px rgba(255,255,255,.9); }
/* Hide focus ring when using mouse/touch (body without .show-focus) */
body:not(.show-focus) button:focus-visible,
body:not(.show-focus) a:focus-visible,
body:not(.show-focus) .nav-link:focus-visible,
body:not(.show-focus) .course-card:focus-visible,
body:not(.show-focus) input:focus-visible,
body:not(.show-focus) textarea:focus-visible { box-shadow: none !important; }
/* Force remove blue box (outline/box-shadow) also for :focus (mobile browsers may not use :focus-visible) */
button:focus, a:focus, .nav-link:focus, .course-card:focus, input:focus, textarea:focus { outline:none !important; box-shadow:none !important; }
body:not(.show-focus) button:focus, body:not(.show-focus) a:focus, body:not(.show-focus) .nav-link:focus, body:not(.show-focus) .course-card:focus, body:not(.show-focus) input:focus, body:not(.show-focus) textarea:focus { outline:none !important; box-shadow:none !important; }
/* Remove focus styles on nav toggle specifically */
.nav-toggle:focus, .nav-toggle:focus-visible { outline:none !important; box-shadow:none !important; }

/* Remove focus ring inside dark header contrast issues */
.dark .header .nav-link:focus-visible { box-shadow: 0 0 0 3px rgba(56,189,248,.55); }

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== 3. UTILITY CLASSES ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--spacing-unit) * 6);
    padding-right: calc(var(--spacing-unit) * 6);
}

.highlight {
    background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== 4. BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background-color: var(--color-primary-deep);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-white {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.btn-white:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-deep);
    box-shadow: var(--shadow-md);
}

.btn-large {
    font-size: 1rem;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 8);
}

.btn-sm {
    font-size: 0.8rem;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
}

.btn-block {
    width: 100%;
}

.btn-arrow {
    transition: transform var(--transition-fast);
}

.btn:hover .btn-arrow {
    transform: translateX(3px);
}

/* ===== 5. NAVIGATION ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: background-color var(--transition-medium), box-shadow var(--transition-medium);
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    text-decoration: none;
}

.brand-text {
    line-height: 1.2;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.brand-tagline {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 500;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 8);
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 2) 0;
    position: relative;
    transition: color var(--transition-fast);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-cta .nav-text {
    display: inline;
}

.nav-cta .nav-icon {
    display: none;
}

.nav-toggle {
    display: none;
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 2);
    background: none;
    border: none;
    z-index: 1001;
}

/* Theme toggle positioning adjustments */
/* Theme toggle (desktop + mobile versions) */
.theme-toggle-btn{background:none;border:none;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;cursor:pointer;transition:transform .25s;color:var(--gray-700);} 
.dark .theme-toggle-btn{color:var(--gray-200);} 
.theme-toggle-btn:hover{transform:scale(1.05);} 
.theme-toggle-btn:active{transform:scale(.9);} 
.dark .theme-toggle-btn{background:none;border:none;}
@media (max-width: 768px){
    .nav .theme-toggle-desktop{display:inline-flex;margin:0.75rem 0 0.25rem 0;padding:.25rem .35rem;font-size:1.3rem;}
    .nav-toggle{position:absolute;top:.55rem;right:.75rem;}
    .header .header-inner, .header .container{position:relative;}
}

/* Tablet breakpoint alignment for burger toggle */
@media (max-width: 960px){
    .nav-toggle{position:absolute;top:.55rem;right:.75rem;}
    .header .header-inner, .header .container{position:relative;}
}

/* Reset nav-close position after removal of inmenu toggle overlap */
@media (max-width: 768px){
    .nav-close{position:absolute;top:.4rem;right:.9rem;}
}

/* Footer theme toggle */
.footer-bottom{gap:.5rem;flex-wrap:wrap;justify-content:center;}
/* Plain icon toggle in footer */
/* Theme switch */
.theme-switch{--ts-w:54px;--ts-h:28px;--ts-pad:3px;position:relative;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;margin:0 .25rem;cursor:pointer;font:inherit;}
.theme-switch .ts-track{width:var(--ts-w);height:var(--ts-h);position:relative;border-radius:var(--ts-h);background:linear-gradient(145deg,#f1f5f9,#e2e8f0);border:1px solid #cbd5e1;display:block;transition:background .4s,border-color .4s,box-shadow .4s;}
.dark .theme-switch .ts-track{background:linear-gradient(145deg,#1e293b,#0f172a);border-color:#334155;}
.theme-switch .ts-knob{position:absolute;top:50%;left:var(--ts-pad);width:calc(var(--ts-h) - var(--ts-pad)*2);height:calc(var(--ts-h) - var(--ts-pad)*2);border-radius:50%;background:#ffffff;color:#f59e0b;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.18),0 4px 8px -2px rgba(0,0,0,.15);transform:translate(0,-50%);transition:transform .45s cubic-bezier(.6,.05,.2,.9),background .45s,color .45s,box-shadow .45s;overflow:hidden;}
.theme-switch .knob-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .4s,transform .4s;color:inherit;}
.theme-switch .knob-icon-dark{opacity:0;transform:scale(.6);}
body.dark .theme-switch .knob-icon-dark{opacity:1;transform:scale(1);} 
body.dark .theme-switch .knob-icon-light{opacity:0;transform:scale(1.4);} 
.dark .theme-switch .ts-knob{background:#334155;color:#fbbf24;}
body.dark .theme-switch .ts-knob{transform:translate(calc(var(--ts-w) - var(--ts-h)),-50%);} /* correct slide distance */
/* Mobile fine-tune: track override membuat jarak sedikit lebih panjang, kurangi 2px */
@media (max-width:600px){
    body.dark .theme-switch .ts-knob{transform:translate(calc(var(--ts-w) - var(--ts-h) - 2px),-50%);} 
}
/* Extra fine-tune for very small widths + clip shadow */
@media (max-width:600px){
    .theme-switch .ts-track{overflow:hidden;}
    /* Use formula minus 3px to avoid subpixel overflow if device pixel ratio causes bleed */
    body.dark .theme-switch.theme-switch--compact .ts-knob{transform:translate(calc(var(--ts-w) - var(--ts-h) - 3px),-50%);} 
}
.theme-switch:focus-visible .ts-track{outline:2px solid #0ea5e9;outline-offset:3px;}
.theme-switch:hover .ts-track{box-shadow:0 2px 4px rgba(0,0,0,.08),0 6px 14px -4px rgba(0,0,0,.12);} 
.dark .theme-switch:hover .ts-track{box-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 14px -6px rgba(0,0,0,.55);} 
.theme-switch--compact .ts-track{--ts-w:52px;--ts-h:26px;}
.theme-switch--compact .ts-knob{font-size:13px;}
@media (max-width:600px){
    .theme-switch{--ts-w:50px;--ts-h:26px;}
    .theme-switch--compact .ts-track{--ts-w:48px;--ts-h:24px;}
    .theme-switch .ts-knob{font-size:12px;}
}
.theme-switch:focus-visible .ts-track{outline:2px solid #0ea5e9;outline-offset:2px;} /* keyboard accessibility */
.theme-switch:hover .ts-track{filter:brightness(1.05);} 
@media (max-width:600px){
    .theme-switch{margin-top:.25rem;}
    .theme-switch .ts-track{padding:4px 8px;gap:5px;}
    .theme-switch .ts-knob{left:6px;}
    body.dark .theme-switch .ts-knob{transform:translate(28px,-50%);} 
}

/* Visually hidden utility (for accessibility screen readers while keeping visual minimal) */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Footer copyright alignment */
.footer-bottom{display:flex;align-items:center;justify-content:center;padding:1.25rem 0;margin-top:1.5rem;font-size:.75rem;text-align:center;}

.nav-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 1px;
    transition: transform var(--transition-medium), opacity var(--transition-medium);
}

.nav-toggle .bar + .bar {
    margin-top: 5px;
}

.nav-toggle.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== 6. HERO SECTION ===== */
.hero {
    padding-top: var(--nav-height);
    background-color: var(--color-surface);
    padding-bottom: calc(var(--spacing-unit) * 16);
}

.hero-container {
    padding-top: calc(var(--spacing-unit) * 16);
    padding-bottom: calc(var(--spacing-unit) * 16);
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    background-color: var(--color-background);
    color: var(--color-primary);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 6);
    border: 1px solid var(--color-border);
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text-primary);
    max-width: 800px;
    margin: 0 auto calc(var(--spacing-unit) * 6);
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto calc(var(--spacing-unit) * 8);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 12);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 12);
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ===== 7. COURSES SECTION ===== */
.courses {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

/* Trust / Credibility */
.touch-device a, .touch-device button, .touch-device .btn, .touch-device .nav-link, .touch-device .course-card {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.touch-device .btn:active, .touch-device .nav-link:active, .touch-device .course-card:active {
    filter: none !important;
    transform: none !important;
    box-shadow: inherit !important;
}
.touch-device .btn:focus-visible, .touch-device .nav-link:focus-visible {outline:2px solid var(--color-primary);outline-offset:3px;}
.trust{padding:3rem 0;background:linear-gradient(90deg,rgba(2,132,199,.08),rgba(14,165,233,.08));}
.dark .trust{background:linear-gradient(90deg,rgba(2,132,199,.18),rgba(14,165,233,.12));}
.trust-inner{text-align:center;display:flex;flex-direction:column;gap:1.25rem;}
.trust-tag{font-size:.85rem;font-weight:600;letter-spacing:.5px;color:var(--color-primary);text-transform:uppercase;}
.trust-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin:0;padding:0;font-size:.85rem;font-weight:500;color:var(--color-text-secondary);}
.dark .trust-logos{color:var(--color-text-muted);}

/* Instructors */
.instructors{padding:4.5rem 0;}
.dark .instructors{background:linear-gradient(180deg,var(--gray-900),var(--gray-800));}
.dark .instructors h2,.dark .instructors h3{color:var(--color-white);} 
.dark .instructors p{color:var(--gray-300);} 
.dark .instructor-card{background:linear-gradient(180deg,var(--gray-800),var(--gray-850,#1f2937));border-color:var(--gray-700);}
.dark .instructor-card:hover{box-shadow:0 6px 22px -6px rgba(0,0,0,.55);} 
.instructor-card h3{margin:0;font-size:1rem;color:var(--color-text-primary);} 
.dark .instructor-card h3{color:#f1f5f9;} 
.instructor-card p{font-size:.75rem;line-height:1.5;margin:0;color:var(--color-text-secondary);} 
.dark .instructor-card p{color:var(--gray-300);} 
.instructor-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.instructor-card{background:var(--color-surface);border:1px solid var(--color-border);padding:1.5rem;border-radius:1.25rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.75rem;transition:box-shadow .3s,transform .3s;}
.dark .instructor-card{background:var(--gray-800);border-color:var(--gray-700);}
.instructor-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.instructor-card .avatar{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;}
.skill-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.skill-list li{background:var(--gray-100);color:var(--color-text-secondary);padding:.35rem .6rem;font-size:.65rem;font-weight:600;border-radius:.6rem;letter-spacing:.5px;}
.dark .skill-list li{background:var(--gray-700);}


/* FAQ */
.faq{padding:4.5rem 0;background:linear-gradient(180deg,var(--color-surface),var(--color-background));}
.dark .faq{background:linear-gradient(180deg,var(--gray-900),var(--gray-800));}
.dark .faq h2{color:#f8fafc;}
.dark .faq p{color:var(--gray-300);} 
.faq-item{position:relative;}
.faq-item:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(2,132,199,.15),transparent 70%);opacity:0;transition:opacity .4s;}
.faq-item.open:before{opacity:.4;}
.faq-q{background:transparent;}
.dark .faq-q{color:var(--gray-200);} 
.dark .faq-item.open .faq-q{color:var(--color-primary);} 
.dark .faq-a{color:var(--gray-300);} 
.faq-accordion{display:flex;flex-direction:column;gap:.75rem;}
.faq-item{border:1px solid var(--color-border);border-radius:.9rem;background:var(--color-surface);overflow:hidden;box-shadow:var(--shadow-sm);}
.faq-q{all:unset;display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;padding:.9rem 1.1rem;font-weight:600;font-size:.85rem;}
.faq-q:after{content:'+';font-weight:600;transition:transform .35s;}
.faq-q[aria-expanded="true"]:after{content:'−';}
.faq-a{padding:0 1.1rem 1rem;font-size:.75rem;line-height:1.55;color:var(--color-text-secondary);animation:fadeIn .35s ease;}
.faq-item.open{border-color:var(--color-primary);}
.faq-item.open .faq-q{color:var(--color-primary);} .faq-item.open .faq-q:after{color:var(--color-primary);}
.dark .faq-item{background:var(--gray-800);border-color:var(--gray-700);} .dark .faq-item.open{border-color:var(--color-primary);}

.section-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 12);
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.section-subtitle {
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: calc(var(--spacing-unit) * 8);
}

.course-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.course-image {
    height: 200px;
    position: relative;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.course-card:hover .course-overlay {
    opacity: 1;
}

.course-content {
    padding: calc(var(--spacing-unit) * 6);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: auto; /* Pushes footer down */
    padding-bottom: calc(var(--spacing-unit) * 4);
}

.course-footer {
    padding-top: calc(var(--spacing-unit) * 4);
    margin-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--color-border);
}

/* ===== 8. FOOTER ===== */
.footer {
    background-color: var(--color-text-primary);
    color: var(--color-text-muted);
    padding-top: calc(var(--spacing-unit) * 16);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing-unit) * 12);
    padding-bottom: calc(var(--spacing-unit) * 12);
}

.footer-brand p {
    margin-top: calc(var(--spacing-unit) * 4);
    max-width: 300px;
}

.footer-links h4 {
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.footer-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-bottom {
    border-top: 1px solid var(--color-text-secondary);
    padding: calc(var(--spacing-unit) * 6) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 4);
}

.footer-bottom p {
    font-size: 0.875rem;
}

.social-links {
    display: flex;
    gap: calc(var(--spacing-unit) * 4);
}

.social-links a {
    color: var(--color-text-muted);
    font-size: 1.25rem;
    transition: color var(--transition-fast);
}

.social-links a:hover {
    color: var(--color-white);
}

/* ===== 9. RESPONSIVE DESIGN (Mobile-First) ===== */
@media (max-width: 768px) {
    .container {
        padding-left: calc(var(--spacing-unit) * 4);
        padding-right: calc(var(--spacing-unit) * 4);
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 320px;
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: calc(var(--spacing-unit) * 16) calc(var(--spacing-unit) * 8);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-medium);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        width: 100%;
        padding: calc(var(--spacing-unit) * 4) 0;
        font-size: 1rem;
    }

    .nav-link::after {
        display: none;
    }

    .nav-cta {
        margin-top: calc(var(--spacing-unit) * 4);
        width: 100%;
    }

    .nav-cta .nav-text {
        display: none;
    }

    .nav-cta .nav-icon {
        display: inline;
    }

    .nav-toggle {
        display: block;
    }

    .hero-container {
        padding-top: calc(var(--spacing-unit) * 8);
        padding-bottom: calc(var(--spacing-unit) * 8);
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats {
        gap: calc(var(--spacing-unit) * 8);
    }

    .courses {
        padding-top: calc(var(--spacing-unit) * 12);
        padding-bottom: calc(var(--spacing-unit) * 12);
    }

    .section-header {
        margin-bottom: calc(var(--spacing-unit) * 8);
    }

    .courses-grid {
        gap: calc(var(--spacing-unit) * 6);
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-links ul {
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== 10. HELPERS & STATES ===== */
.loading-spinner {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner.active {
    display: flex;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.error-message,
.empty-state {
    grid-column: 1 / -1; /* Span full grid width */
    text-align: center;
    padding: calc(var(--spacing-unit) * 16) 0;
}

.error-message .error-icon,
.empty-state .empty-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.error-message h3,
.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

/* ===== NEW SECTIONS (Advantages, Testimonials, Contact) ===== */
.advantages, .testimonials, .contact { padding: var(--space-16) 0; }
.advantages { background: var(--color-surface); }
.testimonials { background: linear-gradient(180deg, var(--color-background), var(--color-surface)); }
.contact { background: var(--color-background); }

.advantages-grid, .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.adv-card, .testimonial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.adv-card:hover, .testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.adv-icon { font-size: 1.75rem; margin-bottom: var(--space-4); }
.adv-card h3 { font-size: 1.125rem; margin-bottom: var(--space-2); color: var(--color-text-primary); }
.adv-card p { font-size: 0.95rem; line-height: 1.5; }

.testimonial-card blockquote { font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-4); font-style: italic; color: var(--color-text-secondary); }
.testimonial-card figcaption { font-size: 0.85rem; color: var(--color-text-muted); }

/* Contact */
.contact-layout { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.contact-info { max-width: 520px; }
.contact-list { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); padding: 0; }
.contact-list li { display: flex; gap: var(--space-3); align-items: center; font-size: 0.95rem; }

.contact-form { background: var(--color-surface); border:1px solid var(--color-border); padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.contact-form .form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.contact-form label { font-size: 0.85rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--color-text-secondary); }
.contact-form input, .contact-form textarea { padding: var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); font-family: inherit; font-size: 0.95rem; color: var(--color-text-primary); transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color: var(--color-primary); background: var(--color-white); }
.contact-form textarea { resize: vertical; }
.form-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--space-3); }

/* Theme Toggle */
.theme-toggle { cursor:pointer; border:none; background:none; font-size:1rem; display:flex; align-items:center; }
body.dark { background: var(--gray-900); color: var(--color-text-secondary); }
body.dark .course-card, body.dark .adv-card, body.dark .testimonial-card, body.dark .contact-form { background: var(--gray-800); border-color: var(--gray-700); }
body.dark .footer { background: var(--gray-900); }
body.dark .contact-form input, body.dark .contact-form textarea { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-100); }
body.dark .contact-form input:focus, body.dark .contact-form textarea:focus { background: var(--gray-800); }

/* === Contrast adjustments (added) === */
/* Light theme defaults */
body:not(.dark) .hero-title, body:not(.dark) .stat-num, body:not(.dark) .course-title { color:#0f172a; }
body:not(.dark) .hero-desc, body:not(.dark) .adv-item p, body:not(.dark) .contact-grid p { color:#475569; }
body:not(.dark) .stat-label { color:#64748b; }

/* Dark theme explicit overrides for clarity */
body.dark .hero-title, body.dark .course-title, body.dark .adv-item h3, body.dark .contact-grid h2 { color:#f8fafc; }
body.dark .hero-desc, body.dark .adv-item p, body.dark .contact-grid p, body.dark .stat-label { color:#cbd5e1; }
body.dark .stat-num { color:#ffffff; }
body.dark .nav.open .nav-link { color:#f1f5f9; }
body:not(.dark) .nav.open .nav-link { color:#0f172a; }

/* ==== NEW LAYOUT 2025 REWORK (Dicoding-inspired yet original) ==== */
.header {position:fixed;top:0;left:0;width:100%;z-index:1100;background:linear-gradient(180deg,#ffffff 0%,#f1f5f9 92%);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--color-border);}
.dark .header{background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);border-bottom:1px solid #1e293b;}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px;transition:min-height .3s,padding .3s;}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--color-text-primary);}
.brand-mark{font-size:1.9rem;line-height:1;}
.brand-text small{display:block;font-size:.65rem;font-weight:600;color:#0369a1;letter-spacing:.5px;margin-top:2px;}
.brand-text strong{color:#0f172a;}
.dark .brand-text strong{color:#f8fafc;}
.dark .brand-text small{color:#38bdf8;}
.nav{display:flex;align-items:center;gap:2rem;}
.nav-link{font-size:.875rem;font-weight:500;position:relative;color:var(--color-text-secondary);text-decoration:none;transition:color var(--transition-fast);} 
.nav-link:hover,.nav-link.active{color:var(--color-text-primary);} 
.nav-link.active:after,.nav-link:hover:after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:2px;}
.nav-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:.75rem;margin-left:.5rem;}
.nav-toggle{color:#0f172a;}
.dark .nav-toggle{color:#f1f5f9;}
.nav-toggle span{width:26px;height:2px;background:currentColor;transition:transform .4s,opacity .4s;} 
.nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg);} 
.nav-toggle.active span:nth-child(2){opacity:0;} 
.nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} 
@media (max-width:1024px){
    /* Mobile/Tablet: common off-canvas menu from the right */
    .nav{position:fixed;top:0;right:0;bottom:0;left:auto;background:linear-gradient(180deg,#ffffff 0%,#f1f5f9 65%);flex-direction:column;align-items:flex-start;padding:5.5rem 1.25rem 2.5rem;gap:.35rem;width:min(86vw,420px);height:100vh;transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);box-shadow:-18px 0 40px -18px rgba(0,0,0,.25);overflow-y:auto;z-index:1200;display:none;} 
    .dark .nav{background:linear-gradient(180deg,#0f172a,#1e293b);} 
    .nav.open{transform:translateX(0);display:flex;} 
    .nav-link{width:100%;padding:.9rem 0;font-size:1.05rem;letter-spacing:.25px;} 
    .nav-login{width:100%;justify-content:center;} 
    .nav-toggle{display:flex;} 
    body.menu-open{overflow:hidden;} 
    /* When overlay menu is open, hide burger to avoid double controls */
    .nav.open + .nav-toggle{display:none;}
    /* Remove blue underline hover/focus line inside overlay menu */
    .nav.open .nav-link::after,
    .nav.open .nav-link:hover::after,
    .nav.open .nav-link.active::after,
    .nav.open .nav-link:focus-visible::after{content:none !important;display:none !important;}
}

/* Mobile overlay for nav */
.nav-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s;z-index:1080;}
.nav-overlay.show{opacity:1;pointer-events:auto;}
.dark .nav-overlay{background:rgba(0,0,0,.5);}

/* Improve nav link contrast when open */
.nav.open .nav-link{color:var(--color-text-primary);} 
.nav.open .nav-link:hover{color:var(--color-primary);} 
.dark .nav.open .nav-link{color:#f1f5f9;} 
.dark .nav.open .nav-link:hover{color:var(--color-accent);} 
/* Provide subtle separators */
.nav.open .nav-link + .nav-link{border-top:1px solid rgba(0,0,0,.04);} 
.dark .nav.open .nav-link + .nav-link{border-top:1px solid rgba(255,255,255,.07);} 
/* Close button & hint */
.nav-close{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.07);color:var(--color-text-primary);width:40px;height:40px;border-radius:12px;font-size:1.15rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;}
.nav-close:hover{background:rgba(0,0,0,.08);} 
.dark .nav-close{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff;} 
.dark .nav-close:hover{background:rgba(255,255,255,.15);} 
.nav-hint{margin-top:1.75rem;font-size:.65rem;letter-spacing:.5px;text-transform:uppercase;opacity:.5;align-self:center;text-align:center;} 
.dark .nav-hint{opacity:.6;} 
@media (min-width:1025px){.nav-close,.nav-hint{display:none;}}
/* Improve base mobile link contrast */
@media (max-width:1024px){
    .nav.open .nav-link{color:#0f172a;font-weight:600;}
    .dark .nav.open .nav-link{color:#f1f5f9;}
}

/* Smaller header on very small screens */
@media (max-width:640px){
    .header-inner{min-height:60px;}
    .brand-mark{font-size:1.55rem;}
    .brand-text strong{font-size:.95rem;}
}

/* HERO */
.hero-alt{padding-top:140px;padding-bottom:4rem;background:linear-gradient(180deg,var(--gray-50),#fff);} 
.dark .hero-alt{background:linear-gradient(180deg,var(--gray-900),var(--gray-800));}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:4rem;align-items:center;}
.hero-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:1.25rem;}
.gradient-text{background:linear-gradient(90deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-desc{font-size:1.125rem;max-width:580px;margin-bottom:1.75rem;}
.dark .hero-desc{color:var(--gray-300);}
.badge-line{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.badge{background:var(--gray-100);color:var(--color-primary);padding:.4rem .9rem;font-size:.675rem;font-weight:600;letter-spacing:.5px;border-radius:999px;text-transform:uppercase;border:1px solid var(--gray-200);} 
.badge-outline{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);} 
.dark .badge{background:var(--gray-800);border-color:var(--gray-700);} 
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;}
.stats-line{display:flex;gap:2.5rem;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;gap:.25rem;}
.stat-num{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);} .stat-label{font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-secondary);}
.dark .stat-num{color:#fff;} .dark .stat-label{color:var(--gray-400);} 

/* SHOWCASE */
.hero-showcase{position:relative;}
.showcase-shell{position:relative;padding:1.25rem 1.25rem 2rem;border:1px solid var(--color-border);border-radius:1.25rem;background:linear-gradient(145deg,var(--gray-50),#fff);box-shadow:var(--shadow-lg);overflow:hidden;}
.dark .showcase-shell{background:linear-gradient(145deg,var(--gray-800),var(--gray-900));border-color:var(--gray-700);} 
.glow{position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%,rgba(2,132,199,.35),transparent 60%);pointer-events:none;animation:glowMove 8s linear infinite;} 
@keyframes glowMove{0%{transform:translate3d(0,0,0);}50%{transform:translate3d(10%,5%,0);}100%{transform:translate3d(0,0,0);}}
.terminal{background:var(--gray-900);color:#e2e8f0;font-family:ui-monospace,Consolas,monospace;font-size:.75rem;line-height:1.4;border-radius:.75rem;overflow:hidden;position:relative;box-shadow:0 10px 25px -8px rgba(0,0,0,.4);} 
.terminal-bar{display:flex;gap:.4rem;padding:.4rem .75rem;background:var(--gray-800);align-items:center;} 
.terminal-bar .dot{width:.65rem;height:.65rem;border-radius:50%;display:inline-block;} 
.terminal-bar .red{background:#ef4444;} .terminal-bar .yellow{background:#f59e0b;} .terminal-bar .green{background:#10b981;} 
.terminal pre{margin:0;padding:.85rem 1rem 1.25rem;overflow:auto;}
.badges-mini{position:absolute;bottom:10px;right:10px;display:flex;flex-wrap:wrap;gap:.4rem;}
.mini-chip{background:var(--color-primary);color:#fff;font-size:.55rem;font-weight:600;padding:.35rem .55rem;border-radius:.5rem;letter-spacing:.5px;box-shadow:var(--shadow-md);} 

/* Category bar removed */

/* COURSES (overrides) */
.courses{background:#fff;padding:5rem 0 4rem;} .dark .courses{background:var(--gray-900);} 
.courses-grid{margin-top:1.3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;} 
.course-card{display:flex;flex-direction:column;--card-pad:.85rem;border:1px solid rgba(148,163,184,.25);background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(241,245,249,.7));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:1rem;overflow:hidden;position:relative;transition:box-shadow .45s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);transform:translateY(0);min-height:0;} 
.course-card:before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(120deg,rgba(2,132,199,.55),rgba(59,130,246,.35),rgba(2,132,199,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;opacity:.25;transition:opacity .5s;} 
.course-card:hover:before{opacity:1;} 
.dark .course-card{background:linear-gradient(150deg,rgba(30,41,59,.88),rgba(15,23,42,.78));border:1px solid rgba(71,85,105,.45);} 
.dark .course-card:before{background:linear-gradient(140deg,rgba(56,189,248,.5),rgba(14,165,233,.35),rgba(56,189,248,.5));} 
.course-card:hover{box-shadow:0 10px 28px -10px rgba(0,0,0,.18),0 2px 6px -1px rgba(0,0,0,.08);transform:translateY(-6px);} 
.course-media{position:relative;aspect-ratio:4/3;overflow:hidden;max-height:150px;} 
.course-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s ease;} 
.course-card:hover .course-media img{transform:scale(1.08);} 
.course-badge{position:absolute;top:.6rem;left:.6rem;background:rgba(15,23,42,.85);color:#fff;font-size:.55rem;padding:.35rem .6rem;border-radius:.5rem;letter-spacing:.5px;font-weight:600;} 
.dark .course-badge{background:rgba(255,255,255,.15);} 
/* Course card content area refined: unify body + actions so no extra dark stripe */
.course-body{padding:var(--card-pad) var(--card-pad) .85rem;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.9));}
.dark .course-body{background:linear-gradient(180deg,rgba(30,41,59,.78),rgba(15,23,42,.9));}
.course-title{font-size:.9rem;font-weight:600;margin:0 0 .55rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#0f172a;} 
.dark .course-title{color:#f1f5f9;}
.course-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);} 
.meta-item strong{color:var(--color-text-primary);font-weight:600;} 
/* Actions now visually part of body – remove separate background band */
.course-actions{padding:0 var(--card-pad) var(--card-pad);background:transparent;margin-top:.25rem;}
.dark .course-actions{background:transparent;}
.course-actions .btn{--btn-h:42px;font-size:.7rem;font-weight:600;letter-spacing:.4px;border-radius:.75rem;padding:0 .9rem;width:100%;}
.course-actions .btn-primary{--btn-bg:linear-gradient(90deg,#0284c7,#0369a1);--btn-bd:#0284c7;background:var(--btn-bg);} 
.course-actions .btn-primary:hover{--btn-bg:linear-gradient(90deg,#0ea5e9,#0284c7);} 
.dark .course-actions .btn-primary{--btn-bg:linear-gradient(90deg,#0ea5e9,#0369a1);} 

/* Hover interactive tilt disabled on touch */
@media (pointer:coarse){
    .course-card{transform:translateY(0)!important;}
}
.course-actions .btn{font-size:.75rem;font-weight:600;padding:.65rem 1rem;border-radius:.75rem;} 

/* Section head */
.section-head{text-align:center;margin-bottom:1.25rem;} 
.section-head h2{font-size:clamp(1.9rem,4vw,2.4rem);font-weight:700;margin:0 0 .75rem;} 
.section-head p{max-width:640px;margin:0 auto;font-size:.95rem;color:var(--color-text-secondary);} 

/* Learning paths removed */

/* Advantages */
.advantages{padding:4.5rem 0;background:linear-gradient(180deg,var(--gray-50),#fff);} .dark .advantages{background:linear-gradient(180deg,var(--gray-900),var(--gray-800));}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1.75rem;}
.adv-item{background:var(--color-surface);border:1px solid var(--color-border);padding:1.25rem 1.25rem 1.5rem;border-radius:1rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .5s,box-shadow .5s;} 
.dark .adv-item{background:var(--gray-800);border-color:var(--gray-700);} 
.adv-item:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(2,132,199,.15),transparent 60%);opacity:0;transition:opacity .6s;} 
.adv-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} 
.adv-item:hover:after{opacity:1;} 
.adv-icon{font-size:1.75rem;margin-bottom:.75rem;display:block;} 
.adv-item h3{font-size:.95rem;margin:0 0 .4rem;font-weight:600;} 
.adv-item p{font-size:.8rem;line-height:1.45;color:var(--color-text-secondary);} 
.dark .adv-item h3{color:#f1f5f9;} 
.dark .adv-item p{color:var(--gray-400);} 

/* Testimonials */
.testimonials{padding:4.5rem 0;background:linear-gradient(180deg,#fff,var(--gray-50));} .dark .testimonials{background:linear-gradient(180deg,var(--gray-800),var(--gray-900));}
.testi-wrap{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:1.25rem;overflow-x:auto;padding:.5rem .25rem 1rem;scroll-snap-type:x mandatory;}
.testi-wrap::-webkit-scrollbar{height:6px;} .testi-wrap::-webkit-scrollbar-track{background:transparent;} .testi-wrap::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px;} 
.dark .testi-wrap::-webkit-scrollbar-thumb{background:var(--gray-700);} 
.testi-card{scroll-snap-align:start;background:var(--color-surface);border:1px solid var(--color-border);padding:1.25rem;border-radius:1rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.75rem;min-height:170px;position:relative;} 
.dark .testi-card{background:var(--gray-800);border-color:var(--gray-700);} 
.testi-card blockquote{margin:0;font-size:.85rem;line-height:1.45;font-style:italic;color:var(--color-text-secondary);} 
.testi-card figcaption{font-size:.7rem;font-weight:600;color:var(--color-text-primary);} 
.dark .testi-card blockquote{color:var(--gray-300);} 
.dark .testi-card figcaption{color:var(--gray-100);} 

/* CTA */
.cta{padding:4.5rem 0;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);color:#fff;position:relative;overflow:hidden;}
.cta:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.25),transparent 70%);} 
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;position:relative;}
.cta-text h2{margin:0 0 .75rem;font-size:clamp(1.9rem,4vw,2.4rem);} 
.cta-text p{margin:0;font-size:.95rem;max-width:520px;} 
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap;} 
.cta-actions .btn-white{background:#fff;color:var(--color-primary);} 
.cta-actions .btn-white:hover{color:var(--color-primary-deep);} 

/* Contact */
.contact{padding:4.5rem 0;background:linear-gradient(180deg,var(--gray-50),#fff);} .dark .contact{background:linear-gradient(180deg,var(--gray-900),var(--gray-800));}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem;align-items:start;}
.contact-grid h2{font-size:1.9rem;margin:0 0 .75rem;font-weight:700;} 
.dark .contact-grid h2{color:#f1f5f9;} 
.contact-grid p{font-size:.95rem;margin:0 0 1rem;} 
.contact-list{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.55rem;font-size:.85rem;font-weight:500;} 
.contact-form{background:var(--color-surface);border:1px solid var(--color-border);padding:1.5rem 1.5rem 1.75rem;border-radius:1rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-sm);} 
.dark .contact-form{background:var(--gray-800);border-color:var(--gray-700);} 
.contact-form .form-group{display:flex;flex-direction:column;gap:.4rem;} 
.contact-form label{font-size:.6rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--color-text-secondary);} 
.contact-form input,.contact-form textarea{border:1px solid var(--color-border);background:var(--gray-50);padding:.7rem .85rem;font-size:.8rem;border-radius:.6rem;font-family:inherit;transition:border-color var(--transition-fast),background-color var(--transition-fast);} 
.dark .contact-form input,.dark .contact-form textarea{background:var(--gray-900);border-color:var(--gray-700);color:var(--gray-100);} 
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--color-primary);background:#fff;} 
.contact-form textarea{resize:vertical;min-height:130px;} 
.form-note{font-size:.6rem;opacity:.75;margin:0;}

/* Footer */
.footer{background:var(--color-text-primary);color:var(--color-text-muted);padding:4rem 0 2rem;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;margin-bottom:2rem;}
.f-brand .f-logo{font-weight:700;margin-bottom:.75rem;color:#fff;}
.footer a{text-decoration:none;color:var(--color-text-muted);font-size:.75rem;}
.footer a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.footer a:hover{color:#fff;}
.f-col h4{margin:0 0 .75rem;font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.5px;text-transform:uppercase;}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;}
.socials{display:flex;gap:.6rem;}
.socials a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;font-size:.9rem;transition:background .3s,transform .3s;} 
.socials a:hover{background:rgba(255,255,255,.2);transform:translateY(-3px);} 
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:1rem;text-align:center;} 
.footer-bottom p{margin:0;font-size:.65rem;color:var(--color-text-muted);} 

/* Alerts */
.alert{padding:.85rem 1rem;border-radius:.75rem;font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1.25rem;} 
.alert.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;} 
.dark .alert.error{background:#7f1d1d;color:#fecaca;border-color:#dc2626;} 

/* UTIL */
@media (max-width:640px){
    .hero-actions .btn{flex:1 0 auto;}
    .stats-line{gap:1.5rem;}
    .hero-grid{gap:2.5rem;}
    .cta-inner{flex-direction:column;align-items:flex-start;}
}

/* Simple fade-in animation for intersection observer reuse */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px);}100%{opacity:1;transform:translateY(0);}}

@media (max-width: 768px) {
    .advantages, .testimonials, .contact { padding: var(--space-12) 0; }
    .contact-form { padding: var(--space-6) var(--space-4); }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating-card {
        animation: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .navbar,
    .hero-buttons,
    .floating-elements,
    .nav-toggle,
    .loading-spinner {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .course-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }
}

/* ===== THEME / ACCESSIBILITY AUDIT OVERRIDES (2025-09) ===== */
/* Goal: konsisten kontras, hilangkan nuansa bootstrap lama pada tombol */

/* Modern button system */
.btn { 
    --btn-radius: .8rem; --btn-h: 48px; --btn-pad-x:1.2rem; --btn-fg: var(--color-text-primary); --btn-bg: #ffffff; --btn-bd: var(--color-border); 
    appearance:none; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); font-weight:600; font-size:.9rem; line-height:1; 
    padding:0 var(--btn-pad-x); height:var(--btn-h); border-radius:var(--btn-radius); display:inline-flex; align-items:center; gap:.55rem; 
    box-shadow:none; position:relative; overflow:hidden; transition:background .35s, color .35s, border-color .35s, transform .25s; 
}
.btn:before {content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.15)); opacity:0; transition:opacity .5s;}
.btn:hover:before {opacity:1;} 
.btn:hover {transform:translateY(-2px);} 
.btn:active {transform:translateY(0);} 
.btn:focus-visible {outline:3px solid var(--color-accent); outline-offset:3px;}

.btn-primary { --btn-bg: var(--color-primary); --btn-fg: #fff; --btn-bd: var(--color-primary); }
.btn-primary:hover { --btn-bg: var(--color-primary-deep); }
.dark .btn-primary { --btn-bg:#0ea5e9; --btn-bd:#0ea5e9; }
.dark .btn-primary:hover { --btn-bg:#0284c7; }

.btn-outline { --btn-bg:transparent; --btn-fg: var(--color-primary-dark); --btn-bd: var(--color-border); }
.btn-outline:hover { --btn-bg:#e0f2fe; }
.dark .btn-outline { --btn-fg:#bae6fd; --btn-bd:#334155; }
.dark .btn-outline:hover { --btn-bg:#0c4a6e; }

.btn-ghost { --btn-bg:transparent; --btn-fg: var(--color-text-secondary); --btn-bd: transparent; }
.btn-ghost:hover { --btn-bg:rgba(0,0,0,.05); }
.dark .btn-ghost:hover { --btn-bg:rgba(255,255,255,.1); }

.btn-white { --btn-bg:#f1f5f9; --btn-fg:#0f172a; --btn-bd:#e2e8f0; }
.btn-white:hover { --btn-bg:#e2e8f0; }
.dark .btn-white { --btn-bg:#1e293b; --btn-fg:#f1f5f9; --btn-bd:#334155; }
.dark .btn-white:hover { --btn-bg:#334155; }

.btn-large { --btn-h:56px; font-size:1rem; padding:0 1.6rem; }
.btn-sm { --btn-h:38px; font-size:.75rem; padding:0 .95rem; }
.btn-block { width:100%; justify-content:center; }

/* Remove older gradient / shadow specifics from earlier definitions */
.btn-primary, .btn-white { box-shadow:none; background:var(--btn-bg); color:var(--btn-fg); }
.btn-primary:hover,.btn-white:hover { box-shadow:none; }

/* Course card readability adjustments */
.course-card { backdrop-filter: none; }
.course-body { -webkit-backdrop-filter:none; backdrop-filter:none; }
.course-title { font-weight:650; }
.course-actions .btn { font-size:.8rem; }

/* Stats improved contrast */
.stat-num { letter-spacing:.5px; }
.dark .stat-label { color:#94a3b8; }

/* Section headers */
body.dark .section-head p { color:#cbd5e1; }
body:not(.dark) .section-head p { color:#475569; }

/* Advantages */
body.dark .adv-item p { color:#cbd5e1; }
body.dark .adv-item h3 { color:#f1f5f9; }

/* Testimonials */
.testimonial-card blockquote { color:#334155; }
.dark .testimonial-card blockquote { color:#e2e8f0; }
.testimonial-card figcaption { color:#64748b; }
.dark .testimonial-card figcaption { color:#94a3b8; }

/* Contact form labels */
.contact-form label { color:#475569; }
.dark .contact-form label { color:#94a3b8; }
.dark .contact-form input,.dark .contact-form textarea { color:#f1f5f9; }

/* Footer */
.footer a { color:var(--color-text-muted); }
.footer a:hover { color:#fff; }
.dark .footer a { color:#94a3b8; }
.dark .footer a:hover { color:#fff; }

/* Nav links ensure contrast */
.nav-link { text-shadow:none; }
.dark .nav-link { color:#cbd5e1; }
.dark .nav-link:hover, .dark .nav-link.active { color:#ffffff; }
body:not(.dark) .nav-link { color:#475569; }
body:not(.dark) .nav-link:hover, body:not(.dark) .nav-link.active { color:#0f172a; }

/* Badge contrast */
.badge { color:#0c4a6e; }
.dark .badge { color:#38bdf8; }

/* Alert refinement */
.alert { border:1px solid transparent; }
.alert.error { background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }
.dark .alert.error { background:#7f1d1d; border-color:#dc2626; color:#fecaca; }

/* Focus ring unify */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .course-card:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }

/* High contrast for mini chips */
.mini-chip { background:var(--color-primary); color:#fff; }
.dark .mini-chip { background:#0ea5e9; }

/* Ensure hero gradient text is legible on dark via fallback */
.dark .gradient-text { color:#38bdf8; background:linear-gradient(90deg,#38bdf8,#0ea5e9); -webkit-background-clip:text; background-clip:text; }

/* Remove legacy shadows on buttons inside cta */
.cta .btn { box-shadow:none; }

/* End overrides */
/* === Explicit Light Theme Overrides (manual toggle wins over prefers-color-scheme) === */
body[data-theme="light"] {
    --color-background:#f8fafc;
    --color-surface:#ffffff;
    --color-text-primary:#0f172a;
    --color-text-secondary:#475569;
    --color-text-muted:#94a3b8;
    --color-border:#e2e8f0;
    background:var(--color-background) !important;
    color:var(--color-text-secondary) !important;
}
body[data-theme="light"] .hero-alt{background:linear-gradient(180deg,#f8fafc,#ffffff);} 
body[data-theme="light"] .courses{background:#ffffff;} 
body[data-theme="light"] .advantages{background:linear-gradient(180deg,#f8fafc,#ffffff);} 
body[data-theme="light"] .testimonials{background:linear-gradient(180deg,#ffffff,#f1f5f9);} 
body[data-theme="light"] .contact{background:linear-gradient(180deg,#f8fafc,#ffffff);} 
body[data-theme="light"] .course-card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,252,.75));border-color:rgba(148,163,184,.25);} 
body[data-theme="light"] .course-body{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.9));}
body[data-theme="light"] .course-actions{background:transparent;}
body[data-theme="light"] .adv-item{background:#ffffff;border-color:#e2e8f0;} 
body[data-theme="light"] .testi-card, body[data-theme="light"] .testimonial-card{background:#ffffff;border-color:#e2e8f0;} 
body[data-theme="light"] .contact-form{background:#ffffff;border-color:#e2e8f0;} 
body[data-theme="light"] .footer{background:#0f172a;} 
body[data-theme="light"] .nav{background:linear-gradient(180deg,#ffffff 0%,#f1f5f9 65%);} 
@media (max-width:1280px){
    body[data-theme="light"] .nav.open .nav-link{color:#0f172a;}
}
/* Force light theme chips */
body[data-theme="light"] .badge{background:#f1f5f9;color:#0369a1;border-color:#e2e8f0;}
/* End explicit light overrides */

/* Enhanced Icon and Badge Styling */
.badge-icon, .feature-icon, .nav-icon, .brand-icon, .contact-icon, .social-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
}

.badge-text, .feature-text, .nav-text, .brand-name, .contact-text {
    display: inline-block;
    margin-left: 0.5rem;
}

.hero-badge, .section-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.tech-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 1.5rem;
}

.course-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-category, .course-format {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.category-icon, .format-icon {
    font-size: 1rem;
}

.category-text, .format-text {
    color: var(--gray-600);
}

.btn-arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

.empty-icon, .error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Course Card Improvements */
.course-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.course-content {
    padding: 1rem;
}

.course-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: var(--gray-900);
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-footer .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.course-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--gray-200);
}

.course-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--primary-500);
}

/* Section Spacing Optimization */
.courses {
    padding: var(--space-8) 0;
    background: white;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Mobile Typography Improvements */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    
    .title-main {
        font-size: 2.5rem !important;
    }
    
    .title-highlight {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.6 !important;
    }
    
    .feature-text {
        font-size: 1rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .section-subtitle {
        font-size: 1.125rem !important;
    }
    
    .course-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.25rem !important;
    }
    
    .nav-link {
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .btn {
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    .btn-large {
        font-size: 1.125rem !important;
        padding: 1rem 2rem !important;
    }
    
    .stat-number {
        font-size: 1.875rem !important;
    }
    
    .stat-label {
        font-size: 1rem !important;
    }
}

/* === Touch Device Enhancements === */
.touch-device .btn,
.touch-device .nav-link,
.touch-device .course-card {
    transition: all 0.2s ease;
}

.touch-device .touch-active {
    transform: scale(0.98);
    opacity: 0.8;
}

.touch-device .btn {
    min-height: 44px;
    min-width: 44px;
}

.touch-device .nav-toggle { min-height: 44px; min-width: 44px; }

/* === Mobile Device Optimizations === */
.mobile-device .floating-elements {
    display: none;
}

.mobile-device.scrolling * {
    pointer-events: none;
}

.mobile-device.scrolling {
    overflow-x: hidden;
}

/* === Reduced Motion Support === */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* === Enhanced Mobile Touch Targets === */
@media (max-width: 768px) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus,
    [tabindex]:focus {
        outline: 3px solid #0284c7 !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
    }
    
    .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn {
        min-height: 48px;
        padding: 1rem 1.5rem;
    }
    
    .course-card {
        margin-bottom: 1rem;
    }
    
    .hero-features .feature-item {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .container {
        padding: 0 1.5rem;
    }
    
    .nav-container {
        padding: 0 1.5rem;
        min-height: 70px;
        align-items: center;
    }
    
    .hero {
        padding: 4.5rem 0 3rem;
    }

/* ===== DARK MODE (prefers-color-scheme) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #0f172a;
        --color-surface: #1e293b;
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #64748b;
        --color-border: #334155;
    }
    body { background-color: var(--color-background); color: var(--color-text-secondary); }
    .navbar { background-color: rgba(30, 41, 59, 0.85); border-color: var(--color-border); }
    .navbar.scrolled { background-color: rgba(30, 41, 59, 0.95); }
    .course-card { background-color: var(--color-surface); border-color: var(--color-border); }
    .footer { background-color: var(--gray-900); }
    .footer-links a:hover { color: var(--color-white); }
}

/* Explicit .dark class hook */
.dark body { background-color: var(--color-background); }
.dark .course-card { background-color: var(--color-surface); }
    
    .hero-container {
        padding: 0 1.5rem;
    }
}
