/* ==========================================================
   SIMONSUHU VIX LOGIN
========================================================== */

:root{

    --primary:#0d6efd;
    --secondary:#25f1e0;
    --secondary-dark:#3cf7e7;

    --background:#f4f7fc;

    --white:#ffffff;

    --text:#2d3748;
    --muted:#6c757d;

    --border:#d9e2ef;

}

/* ==========================================================
   BASE
========================================================== */

body{

    background:var(--background);

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

}

/* ==========================================================
   LAYOUT
========================================================== */

.login-left{

    min-height:100vh;

    padding:60px;

    background:linear-gradient(135deg,#ffffff,#eef6ff);

}

.login-right{

    min-height:100vh;

    padding:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--secondary),
        var(--secondary-dark)
    );

}

/* ==========================================================
   HERO
========================================================== */

.hero-illustration{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:40px;

}

.hero-circle{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #eef7ff,
        #dff2ff
    );

    z-index:0;

}

.hero-image{

    position:relative;

    z-index:2;

    width:100%;

    max-width:700px;

    filter:drop-shadow(0 20px 45px rgba(0,0,0,.15));

}

.hero-title{

    text-align:center;

    margin-bottom:40px;

}

.hero-title h1{

    color:var(--primary);

    font-size:54px;

    font-weight:700;

    margin-bottom:10px;

}

.hero-title p{

    font-size:24px;

    color:#555;

}

/* ==========================================================
   FEATURE
========================================================== */

.hero-feature{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.feature-box{

    display:flex;

    gap:15px;

    padding:18px;

    border-radius:18px;

    background:var(--white);

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    transition:.25s;

}

.feature-box:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.feature-box i{

    color:var(--primary);

    font-size:34px;

}

.feature-box strong{

    display:block;

}

.feature-box small{

    color:var(--muted);

}

/* ==========================================================
   LOGIN CARD
========================================================== */

.login-card{

    width:100%;

    max-width:460px;

    padding:45px;

    border-radius:24px;

    background:var(--white);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    animation:fadeIn .8s ease;

}

.login-logo{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eef6ff;

    color:var(--primary);

    font-size:40px;

}

/* ==========================================================
   FORM
========================================================== */

.form-label{

    font-weight:600;

}

.form-control{

    height:52px;

    border:1px solid var(--border);

    border-radius:12px;

    box-shadow:none;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .15rem rgba(13,110,253,.15);

}

.input-group-text{

    background:#fff;

    border:1px solid var(--border);

    border-radius:12px 0 0 12px;

}

.input-group .btn{

    border-radius:0 12px 12px 0;

}

/* ==========================================================
   BUTTON
========================================================== */

.btn-primary{

    height:52px;

    font-weight:600;

    letter-spacing:.5px;

    border-radius:12px;

    transition:.3s;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(13,110,253,.25);

}

/* ==========================================================
   FOOTER
========================================================== */

.login-footer{

    margin-top:25px;

    text-align:center;

    color:#999;

    font-size:14px;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:991px){

    .login-left{

        display:none !important;

    }

    .login-right{

        padding:20px;

    }

    .login-card{

        max-width:100%;

        padding:30px;

    }

}