/* ==========================================
   RESET
========================================== */

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

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(
        135deg,
        #0F172A,
        #312E81,
        #6366F1
    );

    min-height:100vh;

    overflow:hidden;

}


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

.login-page{

    width:100%;

    min-height:100vh;

    display:grid;

    grid-template-columns:55% 45%;

}

/* ==========================================
   BRAND PANEL
========================================== */

.brand-panel{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px;

    color:#ffffff;

}

.brand-content{

    max-width:520px;

}

.brand-logo{

    width:90px;

    height:90px;

    border-radius:22px;

    background:#ffffff;

    color:#4F46E5;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.brand-content h1{

    font-size:52px;

    font-weight:700;

    margin-bottom:5px;

}

.brand-content h3{

    color:#CBD5E1;

    font-weight:400;

    margin-bottom:20px;

}

.brand-content h5{

    font-size:24px;

    margin-bottom:20px;

    color:#ffffff;

}

.brand-content p{

    color:#E2E8F0;

    font-size:17px;

    line-height:1.8;

    margin-bottom:35px;

}

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

.feature-list{

    list-style:none;

    padding:0;

    margin:0;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:17px;

    color:#F8FAFC;

}

.feature-list i{

    color:#22C55E;

    font-size:20px;

}


/* ==========================================
   LOGIN PANEL
========================================== */

.login-panel{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

}

.login-card{

    width:100%;

    max-width:460px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:24px;

    padding:45px;

    box-shadow:0 20px 60px rgba(0,0,0,.30);

}


/* ==========================================
   LOGIN TITLE
========================================== */

.login-card h2{

    text-align:center;

    color:#FFFFFF;

    font-size:34px;

    font-weight:700;

    margin-bottom:8px;

}

.subtitle{

    text-align:center;

    color:#CBD5E1;

    font-size:16px;

    margin-bottom:35px;

}

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

.form-label{

    color:#FFFFFF;

    font-weight:500;

    margin-bottom:8px;

}

.form-control{

    height:54px;

    border:none;

    border-radius:14px;

    padding:0 16px;

    font-size:15px;

}

.form-control:focus{

    box-shadow:0 0 0 .25rem rgba(99,102,241,.35);

}

.input-group .btn{

    border:none;

    border-radius:0 14px 14px 0;

}

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

.btn-primary{

    height:54px;

    border:none;

    border-radius:14px;

    background:#4F46E5;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#4338CA;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(79,70,229,.35);

}


/* ==========================================
   LINKS
========================================== */

.form-check-label{

    color:#FFFFFF;

}

a{

    color:#E2E8F0;

    text-decoration:none;

}

a:hover{

    color:#FFFFFF;

}

/* ==========================================
   BACKGROUND DECORATION
========================================== */

.login-page{

    position:relative;

    overflow:hidden;

}

.login-page::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-120px;

    left:-120px;

    filter:blur(40px);

}

.login-page::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-100px;

    right:-100px;

    filter:blur(35px);

}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.login-card{

    animation:fadeUp .8s ease;

}

.brand-content{

    animation:fadeUp 1s ease;

}


/* ==========================================
   HOVER EFFECTS
========================================== */

.brand-logo{

    transition:.3s;

}

.brand-logo:hover{

    transform:rotate(-5deg) scale(1.05);

}

.feature-list li{

    transition:.3s;

}

.feature-list li:hover{

    transform:translateX(10px);

}

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

@media(max-width:992px){

    body{

        overflow:auto;

    }

    .login-page{

        grid-template-columns:1fr;

    }

    .brand-panel{

        display:none;

    }

    .login-panel{

        padding:30px;

    }

    .login-card{

        max-width:520px;

        margin:auto;

    }

}

@media(max-width:576px){

    .login-card{

        padding:30px 25px;

    }

    .login-card h2{

        font-size:28px;

    }

}