*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            /* background: #0a1628; */
            background: #02806f;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }

        /* ── Background Decorations ── */
        body::before {
            content: '';
            position: fixed;
            width: 600px; height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(20,184,166,.12) 0%, transparent 70%);
            top: -200px; left: -150px;
            pointer-events: none;
        }
        body::after {
            content: '';
            position: fixed;
            width: 500px; height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(20,184,166,.08) 0%, transparent 70%);
            bottom: -150px; right: -100px;
            pointer-events: none;
        }

        /* ── Grid dots ── */
        .bg-grid {
            position: fixed; inset: 0;
            background-image:
                radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none;
        }

        /* ── Wrapper ── */
        .login-wrap {
            width: 100%;
            max-width: 880px;
            background: transparent;
            border-radius: 24px;
            display: flex;
            overflow: hidden;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255,255,255,.07);
        }

        /* ── LEFT PANEL ── */
        .login-left {
            flex: 1;
            background: linear-gradient(160deg, #0f2547 0%, #0a1628 55%, #061020 100%);
            padding: 52px 44px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255,255,255,.06);
        }

        .login-left::before {
            content: '';
            position: absolute;
            width: 400px; height: 400px;
            border-radius: 50%;
            border: 1px solid rgba(20,184,166,.1);
            top: -100px; left: -100px;
            pointer-events: none;
        }
        .login-left::after {
            content: '';
            position: absolute;
            width: 260px; height: 260px;
            border-radius: 50%;
            border: 1px solid rgba(20,184,166,.07);
            bottom: 20px; right: -60px;
            pointer-events: none;
        }

        /* Brand */
        .brand { display: flex; align-items: center; gap: 12px; z-index: 1; position: relative; padding: 5px; }
        .brand-icon {
              width: 45px; height: 45px;
    background: transparent;  /* ← hapus gradient */
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
        }
        .brand-icon i { font-size: 18px; color: #fff; }
        .brand-name {
            font-family: 'Sora', sans-serif;
            font-size: 20px; font-weight: 700;
            color: #fff; letter-spacing: -.4px;
        }
        .brand-name span { color: #14b8a6; }

        /* Hero */
        .hero-text { z-index: 1; position: relative; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.25);
            border-radius: 20px; padding: 5px 12px;
            font-size: 11px; font-weight: 700; color: #14b8a6;
            letter-spacing: .4px; text-transform: uppercase;
            margin-bottom: 16px;
        }
        .hero-badge i { font-size: 10px; }
        .hero-text h2 {
            font-family: 'Sora', sans-serif;
            font-size: 28px; font-weight: 700;
            color: #fff; line-height: 1.3;
            margin-bottom: 14px;
            letter-spacing: -.4px;
        }
        .hero-text h2 span { color: #14b8a6; }
        .hero-text p {
            font-size: 13.5px;
            color: rgba(255,255,255,.4);
            line-height: 1.7;
        }

        /* Features */
        .feature-list { z-index: 1; position: relative; display: flex; flex-direction: column; gap: 10px; }
        .feature-item {
            display: flex; align-items: center; gap: 10px;
            font-size: 12.5px; color: rgba(255,255,255,.5);
        }
        .feature-item i {
            width: 22px; height: 22px;
            background: rgba(20,184,166,.15); border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; color: #14b8a6; flex-shrink: 0;
        }

        /* Stats */
        .stats-row { display: flex; gap: 28px; z-index: 1; position: relative; }
        .stat { }
        .stat-num {
            font-family: 'Sora', sans-serif;
            font-size: 22px; font-weight: 700; color: #14b8a6;
            letter-spacing: -.5px;
        }
        .stat-label { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 3px; }

        /* ── RIGHT PANEL ── */
        .login-right {
            width: 380px;
            background: #fff;
            padding: 48px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .form-header { margin-bottom: 30px; }
        .form-header h3 {
            font-family: 'Sora', sans-serif;
            font-size: 24px; font-weight: 700;
            color: #0a1628; margin-bottom: 6px;
            letter-spacing: -.5px;
        }
        .form-header p { font-size: 13px; color: #94a3b8; }

        /* Alerts */
        .alert {
            border-radius: 10px; padding: 11px 14px;
            font-size: 12.5px; font-weight: 600;
            margin-bottom: 20px;
            display: flex; align-items: flex-start; gap: 8px;
        }
        .alert i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
        .alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
        .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

        /* Form fields */
        .field { margin-bottom: 16px; }
        .field label {
            display: block; font-size: 11px; font-weight: 700;
            color: #475569; margin-bottom: 7px;
            letter-spacing: .5px; text-transform: uppercase;
        }
        .input-wrap { position: relative; display: flex; align-items: center; }
        .input-icon {
            position: absolute; left: 13px;
            font-size: 15px; color: #cbd5e1;
            pointer-events: none; z-index: 1;
        }
        .field input {
            width: 100%; height: 46px;
            border: 1.5px solid #e2e8f0;
            border-radius: 12px;
            font-size: 14px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #0f172a;
            background: #f8fafc;
            padding: 0 44px 0 42px;
            outline: none;
            transition: border-color .15s, background .15s, box-shadow .15s;
            -webkit-appearance: none;
        }
        .field input:focus {
            border-color: #14b8a6;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(20,184,166,.14);
        }
        .field input.is-invalid { border-color: #fca5a5; background: #fff; }
        .field input::placeholder { color: #cbd5e1; }

        .toggle-pw {
            position: absolute; right: 13px;
            background: none; border: none; cursor: pointer;
            padding: 0; color: #cbd5e1; font-size: 15px;
            display: flex; align-items: center;
            transition: color .15s;
        }
        .toggle-pw:hover { color: #64748b; }

        /* Row options */
        .row-options {
            display: flex; justify-content: space-between; align-items: center;
            margin: -2px 0 22px;
        }
        .remember {
            display: flex; align-items: center; gap: 7px;
            font-size: 12.5px; color: #64748b; cursor: pointer;
        }
        .remember input[type=checkbox] {
            accent-color: #14b8a6;
            width: 15px; height: 15px; cursor: pointer; border-radius: 4px;
        }
        .forgot {
            font-size: 12.5px; color: #14b8a6;
            text-decoration: none; font-weight: 700;
        }
        .forgot:hover { color: #0f9688; }

        /* Submit btn */
        .btn-login {
            width: 100%; height: 48px;
            background: #0a1628;
            color: #fff; border: none;
            border-radius: 12px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 14px; font-weight: 700;
            cursor: pointer; letter-spacing: .2px;
            transition: background .15s, transform .1s, box-shadow .15s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        /* .btn-login:hover {
            background: #14b8a6;
            box-shadow: 0 4px 20px rgba(20,184,166,.3);
        } */
        .btn-login:active { transform: scale(.98); }
        .btn-login i { font-size: 15px; }

        /* Loading state */
        .btn-login.loading { pointer-events: none; opacity: .8; }
        .btn-login .spinner {
            width: 16px; height: 16px;
            border: 2px solid rgba(255,255,255,.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .7s linear infinite;
            display: none;
        }
        .btn-login.loading .spinner { display: block; }
        .btn-login.loading .btn-label { display: none; }

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

        /* Divider */
        .divider {
            display: flex; align-items: center; gap: 12px;
            margin: 20px 0;
        }
        .divider-line { flex: 1; height: 1px; background: #f1f5f9; }
        .divider span { font-size: 11px; color: #cbd5e1; }

        /* Register link */
        .register-link {
            text-align: center; margin-top: 22px;
            font-size: 12.5px; color: #94a3b8;
        }
        .register-link a {
            color: #14b8a6; font-weight: 700; text-decoration: none;
        }
        .register-link a:hover { color: #0f9688; }

        /* Security badge */
        .security-badge {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            margin-top: 20px; font-size: 11px; color: #cbd5e1;
        }
        .security-badge i { font-size: 11px; color: #14b8a6; }

        /* ── RESPONSIVE ── */
        @media (max-width: 700px) {
            body { padding: 16px; align-items: flex-start; padding-top: 40px; }
            .login-left { display: none; }
            .login-right { width: 100%; padding: 36px 28px; }
            .login-wrap { border-radius: 20px; max-width: 100%; border: none; }
        }

        @media (max-width: 400px) {
            .login-right { padding: 32px 20px; }
        }