@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');
        
        :root { scroll-behavior: smooth; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            user-select: none;
            -webkit-user-select: none;
            transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* --- TEMA GELAP (DEFAULT) --- */
        body.dark { background-color: #020617; color: #f1f5f9; }
        body.dark .nav-glass { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); }
        body.dark .glass-card { background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); }
        body.dark .text-main { color: #ffffff; }
        body.dark .text-sub { color: #94a3b8; }

        /* --- TEMA TERANG (PREMIUM) --- */
        body.light { background-color: #fcfcfd; color: #0f172a; }
        body.light .nav-glass { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 30px rgba(0,0,0,0.03); }
        body.light .glass-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.05); }
        body.light .text-main { color: #0f172a; }
        body.light .text-sub { color: #475569; }

        .glass-card { backdrop-filter: blur(16px); transition: all 0.4s ease; }
        .nav-glass { backdrop-filter: blur(20px); transition: all 0.4s ease; }

        /* Theme Toggle Switcher */
        .toggle-container {
            position: relative;
            width: 52px;
            height: 28px;
            background: #1e293b;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
        }
        body.light .toggle-container { background: #e2e8f0; border: 1px solid rgba(0,0,0,0.05); }
        
        .toggle-circle {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 22px;
            height: 22px;
            background: #3b82f6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            color: white;
            font-size: 10px;
        }
        body.light .toggle-circle { transform: translateX(24px); background: #f59e0b; }

        #mobile-menu {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(-10px);
            opacity: 0;
            pointer-events: none;
        }
        #mobile-menu.active { transform: translateY(0); opacity: 1; pointer-events: auto; }