:root{
    --primary:#1e3a8a;
    --primary-hover:#172554;
    --primary-deep:#312e81;
    --primary-deep-hover:#1e1b4b;
    --sidebar-bg-1:#0f172a;
    --sidebar-bg-2:#1e293b;
    --body-bg:#f1f5f9;
}

body{
    background:var(--body-bg);
    color:#0f172a;
}

.login-left{
    background:
        radial-gradient(circle at 18% 20%, rgba(30,58,138,.22), transparent 28%),
        linear-gradient(180deg,var(--sidebar-bg-1),var(--sidebar-bg-2));
}

.brand-mark{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-deep)
    );

    box-shadow:0 18px 40px rgba(30,58,138,.28);

}

/* ===========================
   LOGO KIRI (Hero Section)
=========================== */

.brand-left{

    width:230px;

    height:230px;

    border-radius:28px;

}

.brand-left img{

    width:210px;

    height:210px;

    object-fit:contain;

    background:#fff;

    border-radius:22px;


}

/* ===========================
   LOGO KANAN (Login Card)
=========================== */

.brand-right{

    width:74px;

    height:74px;

    border-radius:18px;

}

.brand-right img{

    width:60px;

    height:60px;

    object-fit:contain;

    background:#fff;

    border-radius:14px;

    padding:5px;

}

.overview-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.12);
}

.overview-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
}

.login-card{
    width:min(440px, calc(100vw - 32px));
    background:#fff;
    border-radius:22px;
    padding:42px;
    box-shadow:0 24px 70px rgba(15,23,42,.14);
}

.login-card .form-control,
.login-card .input-group-text{
    border-color:#e2e8f0;
    padding:.78rem .9rem;
}

.login-card .btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-deep));
    border:0;
    border-radius:12px;
    box-shadow:0 14px 28px rgba(30,58,138,.24);
}

.login-card .btn-primary:hover{
    background:linear-gradient(135deg,var(--primary-hover),var(--primary-deep-hover));
}

.app-credit{
    font-size:.9rem;
}

.app-credit a{
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
}

.app-credit a:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}

.password-checklist{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    margin-top:10px;
    color:#64748b;
    font-size:13px;
    text-align:left;
}

.password-check-item{
    display:flex;
    align-items:center;
    gap:7px;
}

.password-check-item i{
    color:#94a3b8;
}

.password-check-item.valid{
    color:#166534;
    font-weight:600;
}

.password-check-item.valid i{
    color:#16a34a;
}