:root {
    --sn-primary: #0d6efd;
    --sn-primary-dark: #0a58ca;
    --sn-bg: #f4f6fb;
}

* { box-sizing: border-box; }

body.auth-body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background: var(--sn-bg);
}

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sisi branding */
.auth-brand {
    flex: 1.1;
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.12), transparent 40%);
}
.auth-brand-content { position: relative; z-index: 1; max-width: 460px; }
.brand-logo {
    width: 64px; height: 64px;
    background: rgba(255,255,255,.18);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
}
.auth-brand-content h1 { font-size: 2.4rem; font-weight: 800; margin: 1.2rem 0 .5rem; }
.brand-tagline { font-size: 1.05rem; opacity: .9; margin-bottom: 2rem; }
.brand-features { list-style: none; padding: 0; margin: 0 0 3rem; }
.brand-features li { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; font-size: .98rem; opacity: .95; }
.brand-features i { color: #b9f6ca; }
.brand-footer { font-size: .82rem; opacity: .75; }

/* Sisi form */
.auth-form-side {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
}
.auth-form-container { width: 100%; max-width: 400px; }
.auth-form-container h2 { font-weight: 700; margin-bottom: .3rem; }
.auth-form-container .subtitle { color: #6c757d; margin-bottom: 1.8rem; }

.form-control-lg, .input-group-text {
    border-radius: .6rem;
}
.input-group .form-control { border-right: 0; }
.input-group .btn-toggle-pw {
    border: 1px solid #dee2e6;
    border-left: 0;
    background: #fff;
    color: #6c757d;
}
.input-group .btn-toggle-pw:hover { color: var(--sn-primary); }

.btn-primary {
    background: var(--sn-primary);
    border-color: var(--sn-primary);
    font-weight: 600;
    padding: .7rem;
    border-radius: .6rem;
}
.btn-primary:hover { background: var(--sn-primary-dark); border-color: var(--sn-primary-dark); }

.auth-footer-link { text-align: center; margin-top: 1.5rem; font-size: .9rem; color: #6c757d; }
.auth-footer-link a { color: var(--sn-primary); text-decoration: none; font-weight: 600; }

.alert { border-radius: .6rem; }
.form-label { font-weight: 600; font-size: .9rem; }

/* badge kecil untuk info */
.demo-info {
    background: #eef4ff;
    border: 1px solid #cfe0ff;
    border-radius: .6rem;
    padding: .75rem 1rem;
    font-size: .82rem;
    color: #0b57d0;
    margin-bottom: 1.2rem;
}