body{
    margin:0;
    min-height:100vh;

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

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;
}

.login-page{

    width:100%;
    max-width:1200px;

    display:grid;
    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

}

.login-banner{

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:white;

    padding:60px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.banner-logo{
    width:110px;
    margin-bottom:25px;
}

.login-banner h1{
    font-size:3rem;
    margin-bottom:15px;
}

.login-banner p{
    font-size:1.1rem;
    opacity:.9;
}

.banner-info{

    margin-top:50px;

    display:flex;
    gap:40px;
}

.banner-info strong{

    display:block;
    font-size:1.8rem;
}

.banner-info span{

    opacity:.8;
}

.login-container{

    background:white;

    padding:60px;
}

.form-header h2{

    font-size:2rem;
    margin-bottom:10px;
}

.form-header p{

    color:#64748b;
    margin-bottom:30px;
}

.input-group{

    margin-bottom:20px;
}

.input-group label{

    display:block;
    margin-bottom:8px;

    font-weight:600;
}

.input-group input{

    width:100%;

    padding:15px;

    border-radius:12px;

    border:1px solid #dbeafe;

    font-size:15px;

    transition:.3s;
}

.input-group input:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.15);
}

.password-box{

    position:relative;
}

.password-box button{

    position:absolute;

    right:12px;
    top:50%;

    transform:translateY(-50%);

    background:none;
    border:none;

    cursor:pointer;
}

.login-options{

    display:flex;

    justify-content:space-between;

    margin-bottom:25px;

    font-size:14px;
}

.login-options a{

    color:#2563eb;
    text-decoration:none;
}

.btn-login{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.btn-login:hover{

    transform:translateY(-2px);

    background:#1d4ed8;
}

.register-link{

    margin-top:25px;
    text-align:center;
}

.register-link a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;
}

@media(max-width:900px){

    .login-page{

        grid-template-columns:1fr;
    }

    .login-banner{

        display:none;
    }

    .login-container{

        padding:35px;
    }

}