/* Sama persis dengan login, tambah style khusus register */
        :root {
            --emerald-500: #10b981;
            --emerald-600: #059669;
            --emerald-700: #047857;
            --emerald-800: #065f46;
            --emerald-900: #064e3b;
            --gold-400: #fbbf24;
            --gold-500: #f59e0b;
            --font: 'Plus Jakarta Sans', sans-serif;
        }

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

        body {
            font-family: var(--font);
            min-height: 100svh;
            display: flex;
            background: #0a1628;
        }

        .left-panel {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(160deg, #064e3b 0%, #065f46 40%, #0a1628 100%);
        }
        .left-panel::before {
            content: '';
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M40 0l8 8-8 8-8-8 8-8zm0 16l8 8-8 8-8-8 8-8zm16-16l8 8-8 8-8-8 8-8zm0 32l8 8-8 8-8-8 8-8zM8 16l8 8-8 8-8-8 8-8zm0 32l8 8-8 8-8-8 8-8zm32 0l8 8-8 8-8-8 8-8zm16-16l8 8-8 8-8-8 8-8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .arc {
            position: absolute; border-radius: 50%;
            border: 1px solid rgba(251,191,36,.15); pointer-events: none;
        }
        .arc-1 { width: 500px; height: 500px; top: -180px; right: -180px; }
        .arc-2 { width: 320px; height: 320px; top: -60px; right: -60px; border-color:rgba(251,191,36,.1); }
        .arc-3 { width: 300px; height: 300px; bottom: -100px; left: -100px; border-color:rgba(16,185,129,.15); }

        .left-content { position: relative; z-index: 10; padding: 3rem; max-width: 480px; }
        .left-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:2.5rem; }
        .left-logo-icon {
            width:48px; height:48px;
            background:linear-gradient(135deg,var(--emerald-600),var(--emerald-700));
            border-radius:12px; display:flex; align-items:center; justify-content:center;
            color:white; font-size:1.3rem;
            box-shadow:0 8px 24px rgba(5,150,105,.4);
        }
        .left-logo-text .name { font-size:1.2rem; font-weight:800; color:white; display:block; }
        .left-logo-text .sub  { font-size:.75rem; color:rgba(255,255,255,.4); }

        .left-headline {
            font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:white;
            line-height:1.2; margin-bottom:1rem; letter-spacing:-.02em;
        }
        .left-headline span {
            background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            background-clip:text;
        }
        .left-desc { font-size:.9rem; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:2rem; }

        .steps { display:flex; flex-direction:column; gap:.6rem; }
        .step {
            display:flex; align-items:center; gap:.75rem;
            padding:.7rem 1rem;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            border-radius:10px;
        }
        .step-num {
            width:28px; height:28px; flex-shrink:0;
            background:var(--emerald-600); border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            font-size:.78rem; font-weight:800; color:white;
        }
        .step-text { font-size:.835rem; color:rgba(255,255,255,.7); }

        .left-quote {
            position:absolute; bottom:2rem; left:3rem; right:3rem;
            text-align:center; border-top:1px solid rgba(255,255,255,.08);
            padding-top:1.25rem;
        }
        .left-quote .arabic { font-family:'Amiri',serif; font-size:1.3rem; color:var(--gold-400); display:block; margin-bottom:.25rem; }
        .left-quote .latin  { font-size:.75rem; color:rgba(255,255,255,.35); }

        /* Right panel */
        .right-panel {
            width: 520px; flex-shrink:0;
            background:#ffffff;
            display:flex; flex-direction:column;
            overflow-y:auto;
        }
        [data-theme="dark"] .right-panel { background:#0d1117; }

        .right-inner { flex:1; padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }

        .mobile-header { display:none; padding:1.5rem 2.5rem 0; align-items:center; gap:.6rem; }
        .mobile-logo-icon {
            width:36px; height:36px;
            background:linear-gradient(135deg,var(--emerald-600),var(--emerald-700));
            border-radius:8px; display:flex; align-items:center; justify-content:center;
            color:white; font-size:1rem;
        }
        .mobile-logo-name { font-size:1rem; font-weight:800; color:#1f2937; }
        [data-theme="dark"] .mobile-logo-name { color:#f1f5f9; }

        .form-header { margin-bottom:1.5rem; }
        .form-title { font-size:1.5rem; font-weight:800; color:#111827; margin-bottom:.3rem; }
        [data-theme="dark"] .form-title { color:#f1f5f9; }
        .form-subtitle { font-size:.85rem; color:#6b7280; }

        .input-group-custom { position:relative; margin-bottom:.9rem; }
        .input-label { display:block; font-size:.82rem; font-weight:600; color:#374151; margin-bottom:.35rem; }
        [data-theme="dark"] .input-label { color:#d1d5db; }
        .input-wrap { position:relative; }
        .input-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:.9rem; z-index:2; pointer-events:none; }
        .input-field {
            width:100%; padding:.7rem .9rem .7rem 2.5rem;
            border:1.5px solid #e5e7eb; border-radius:10px;
            font-size:.875rem; font-family:var(--font);
            color:#111827; background:#f9fafb; outline:none; transition:all .2s;
        }
        [data-theme="dark"] .input-field { background:#161b22; border-color:#30363d; color:#e6edf3; }
        .input-field:focus {
            border-color:var(--emerald-500); background:white;
            box-shadow:0 0 0 3px rgba(16,185,129,.12);
        }
        [data-theme="dark"] .input-field:focus { background:#0d1117; }
        .input-field.is-invalid { border-color:#ef4444; background:#fef2f2; }
        [data-theme="dark"] .input-field.is-invalid { background:rgba(239,68,68,.08); }
        .input-toggle {
            position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
            background:none; border:none; cursor:pointer; color:#9ca3af; font-size:.9rem; z-index:2;
        }
        .input-toggle:hover { color:var(--emerald-600); }
        .error-msg { font-size:.775rem; color:#dc2626; margin-top:.3rem; display:flex; align-items:center; gap:.3rem; }

        /* Row */
        .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

        /* Password strength */
        .pwd-strength { margin-top:.4rem; }
        .pwd-strength-bar {
            height:3px; background:#e5e7eb; border-radius:99px; overflow:hidden; margin-bottom:.2rem;
        }
        .pwd-strength-fill { height:100%; border-radius:99px; transition:all .3s; width:0; }
        .pwd-strength-text { font-size:.72rem; color:#6b7280; }

        .btn-register {
            width:100%; padding:.8rem;
            background:linear-gradient(135deg,var(--emerald-600),var(--emerald-700));
            color:white; border:none; border-radius:10px;
            font-size:.9rem; font-weight:700; font-family:var(--font);
            cursor:pointer; transition:all .25s; margin-top:.5rem;
            display:flex; align-items:center; justify-content:center; gap:.5rem;
        }
        .btn-register:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(5,150,105,.4); }
        .btn-register:disabled { opacity:.7; cursor:not-allowed; transform:none; }

        .login-link { text-align:center; font-size:.875rem; color:#6b7280; margin-top:1rem; }
        .login-link a { color:var(--emerald-600); font-weight:700; text-decoration:none; }
        .login-link a:hover { text-decoration:underline; }

        .alert-form { padding:.7rem 1rem; border-radius:8px; font-size:.85rem; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
        .alert-error-form { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

        .theme-btn {
            position:absolute; top:1.25rem; right:1.25rem;
            width:36px; height:36px; border-radius:8px;
            border:1px solid #e5e7eb; background:#f9fafb;
            color:#6b7280; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            font-size:.9rem; transition:all .2s;
        }
        [data-theme="dark"] .theme-btn { border-color:#30363d; background:#161b22; color:#8b949e; }
        .theme-btn:hover { border-color:var(--emerald-500); color:var(--emerald-600); }

        .back-home {
            display:inline-flex; align-items:center; gap:.4rem;
            font-size:.82rem; color:#6b7280; text-decoration:none;
            margin-bottom:1.5rem; transition:color .2s;
        }
        .back-home:hover { color:var(--emerald-600); }

        .spinner {
            width:16px; height:16px;
            border:2px solid rgba(255,255,255,.3);
            border-top-color:white; border-radius:50%;
            animation:spin .7s linear infinite; display:none;
        }
        @keyframes spin { to { transform:rotate(360deg); } }

        @media (max-width:768px) {
            .left-panel { display:none; }
            .right-panel { width:100%; }
            .mobile-header { display:flex; }
            .right-inner { padding:1.5rem 1.75rem 2rem; }
            .row-2 { grid-template-columns:1fr; }
        }