@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    background:
    linear-gradient(rgba(7,24,52,.82),rgba(7,24,52,.88)),
    url('../images/loginbg.png') center/cover no-repeat fixed;
}

/* ======================================================
   PAGE
====================================================== */

.login-page{

    width:100%;
    min-height:calc(100vh - 80px);

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

    padding:90px 20px 35px;

}

/* ======================================================
   CONTAINER
====================================================== */

.login-container{

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

    display:grid;
    grid-template-columns:43% 57%;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 18px 45px rgba(0,0,0,.28);

}

/* ======================================================
   LEFT BANNER
====================================================== */

.login-banner{

    position:relative;
    overflow:hidden;

    background:#143b67;

}

.login-banner img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;

}

.login-banner:hover img{

    transform:scale(1.04);

}

.banner-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:28px;

    background:
    linear-gradient(
        to top,
        rgba(8,22,45,.95),
        rgba(8,22,45,.18)
    );

}

.badge-app{

    width:max-content;

    padding:6px 14px;

    border-radius:30px;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:14px;

}

.banner-overlay h2{

    color:#fff;

    font-size:26px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:10px;

}

.banner-overlay p{

    color:#dbeafe;

    font-size:13px;

    line-height:1.7;

}

/* ======================================================
   RIGHT
====================================================== */

.login-content{

    padding:32px;

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

}

/* ======================================================
   HEADER
====================================================== */

.login-header{

    text-align:center;

    margin-bottom:22px;

}

.login-header img{

    width:58px;

    margin-bottom:10px;

}

.login-header h1{

    color:#0f172a;

    font-size:28px;

    font-weight:700;

    margin-bottom:6px;

}

.login-header p{

    color:#64748b;

    font-size:13px;

    line-height:1.6;

}

.login-header strong{

    color:#2563eb;

}

/* ======================================================
   ALERT
====================================================== */

.alert{

    display:flex;
    align-items:flex-start;
    gap:10px;

    padding:12px 15px;

    border-radius:12px;

    margin-bottom:16px;

    font-size:13px;

    line-height:1.6;

}

.alert.success{

    background:#dcfce7;
    color:#166534;

}

.alert.error{

    background:#fee2e2;
    color:#b91c1c;

}

.alert i{

    margin-top:2px;

    font-size:16px;

}

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

.login-form{

    display:flex;
    flex-direction:column;

    gap:16px;

}

.form-group label{

    display:block;

    margin-bottom:7px;

    font-size:13px;

    font-weight:600;

    color:#334155;

}

/* ======================================================
   INPUT
====================================================== */

.input-group{

    display:flex;
    align-items:center;

    height:48px;

    background:#f8fafc;

    border:1.5px solid #dbe3ef;

    border-radius:12px;

    transition:.25s;

}

.input-group:focus-within{

    background:#fff;

    border-color:#2563eb;

    box-shadow:
    0 0 0 3px rgba(37,99,235,.12);

}

.input-group>i{

    width:48px;

    text-align:center;

    color:#64748b;

    font-size:15px;

}

.input-group input{

    flex:1;

    border:none;
    outline:none;

    background:none;

    color:#1e293b;

    font-size:14px;

    padding-right:10px;

}

.input-group input::placeholder{

    color:#94a3b8;

}

.toggle-password{

    width:48px;
    height:100%;

    border:none;
    background:none;

    cursor:pointer;

    color:#64748b;

    transition:.25s;

}

.toggle-password:hover{

    color:#2563eb;

}

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

.btn-login{

    margin-top:6px;

    height:48px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    transition:.3s;

}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 24px rgba(37,99,235,.30);

}

/* ======================================================
   ERROR
====================================================== */

.text-error{

    display:block;

    margin-top:6px;

    color:#dc2626;

    font-size:12px;

}

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

.login-footer{

    margin-top:22px;

    text-align:center;

    color:#94a3b8;

    font-size:12px;

    line-height:1.7;

}

.login-footer strong{

    color:#2563eb;

}

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

@media(max-width:900px){

.login-container{

    width:100%;

    grid-template-columns:1fr;

}

.login-banner{

    height:270px;

}

.login-content{

    padding:28px;

}

}

@media(max-width:768px){

.login-page{

    padding:85px 15px 25px;

}

.login-banner{

    display:none;

}

.login-content{

    padding:24px 20px;

}

.login-header img{

    width:50px;

}

.login-header h1{

    font-size:24px;

}

.login-header p{

    font-size:12px;

}

}

@media(max-width:480px){

.login-content{

    padding:20px 16px;

}

.login-header h1{

    font-size:22px;

}

.login-header p{

    font-size:12px;

}

.input-group{

    height:45px;

}

.btn-login{

    height:45px;

    font-size:13px;

}

.alert{

    font-size:12px;

}

}