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

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

html{
    scroll-behavior:smooth;
}

body{

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

    min-height:100vh;

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

    overflow-x:hidden;

    padding:40px 20px;

    background:
        linear-gradient(
            rgba(15,23,42,0.82),
            rgba(15,23,42,0.82)
        ),
        url('/images/MaiEKS.png')
        center center/cover no-repeat;

    position:relative;
}
.password-group{
    position:relative;
}

.left-icon{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#64748b;
    z-index:2;
}

.password-group input{
    padding-left:50px;
    padding-right:52px;
}

.toggle-password{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    color:#64748b;
    font-size:18px;
    cursor:pointer;
    z-index:2;
    transition:0.2s;
}

.toggle-password:hover{
    color:#2563eb;
}

/* ======================================================
   SIMPLE GLOW
====================================================== */

body::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:#4f46e5;

    border-radius:50%;

    top:-80px;
    left:-80px;

    opacity:0.18;

    filter:blur(70px);

    z-index:0;
}

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

.back-home{

    position:fixed;

    top:20px;
    left:20px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    text-decoration:none;

    color:white;

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.10);

    transition:.25s ease;

    z-index:999;

    font-size:14px;
}

.back-home:hover{

    background:rgba(255,255,255,0.14);

    color:white;
}

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

.glass-card{

    position:relative;

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

    padding:32px 28px !important;

    border-radius:28px;

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.10);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.22);

    z-index:2;
}

/* ======================================================
   LOGO
====================================================== */

.login-logo{

    display:flex;
    justify-content:center;

    margin-bottom:18px;
}

.login-logo img{

    width:82px;
    height:82px;

    object-fit:contain;

    border-radius:22px;

    padding:8px;

    background:rgba(255,255,255,0.10);

    border:1px solid rgba(255,255,255,0.12);
}

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

.login-title{

    color:white;

    font-size:32px;

    font-weight:700;

    text-align:center;

    margin-bottom:8px;
}

.login-subtitle{

    text-align:center;

    color:rgba(255,255,255,0.70);

    line-height:1.6;

    font-size:14px;

    margin-bottom:28px;
}

/* ======================================================
   LABEL
====================================================== */

.form-label{

    display:block;

    color:rgba(255,255,255,0.88);

    margin-bottom:10px;

    font-size:14px;

    font-weight:500;
}

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

.input-group-modern{

    display:flex;
    align-items:center;
    gap:12px;

    padding:0 16px;

    border-radius:18px;

    background:rgba(255,255,255,0.07);

    border:1px solid rgba(255,255,255,0.10);

    transition:.2s ease;

    overflow:hidden;
}

.input-group-modern:focus-within{

    border-color:rgba(255,255,255,0.22);

    background:rgba(255,255,255,0.10);
}

.input-group-modern i{

    color:rgba(255,255,255,0.65);

    font-size:17px;
}

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

.form-control-modern{

    width:100%;

    border:none !important;
    outline:none !important;

    background:transparent !important;

    box-shadow:none !important;

    appearance:none;

    -webkit-appearance:none;

    padding:15px 0;

    color:white !important;

    font-size:15px;

    caret-color:white;
}

/* PLACEHOLDER */

.form-control-modern::placeholder{

    color:rgba(255,255,255,0.42);
}

/* FOCUS */

.form-control-modern:focus{

    background:transparent !important;

    box-shadow:none !important;

    color:white !important;
}

/* AUTOFILL FIX */

.form-control-modern:-webkit-autofill,
.form-control-modern:-webkit-autofill:hover,
.form-control-modern:-webkit-autofill:focus,
.form-control-modern:-webkit-autofill:active{

    -webkit-text-fill-color:white !important;

    transition:
        background-color 9999s ease-in-out 0s;

    -webkit-box-shadow:
        0 0 0px 1000px transparent inset !important;

    background:transparent !important;

    caret-color:white;
}

/* PASSWORD */

input[type="password"]{

    color:white !important;
}

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

.btn-modern{

    width:100%;

    border:none;

    border-radius:18px;

    padding:15px;

    margin-top:10px;

    background:#5b4dff;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;
}

.btn-modern:hover{

    background:#4f46e5;

    transform:translateY(-2px);
}

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

.modern-alert{

    display:flex;
    align-items:center;
    gap:12px;

    padding:14px;

    margin-bottom:22px;

    border-radius:18px;

    background:rgba(239,68,68,0.12);

    border:1px solid rgba(239,68,68,0.18);
}

.alert-icon{

    width:42px;
    height:42px;

    border-radius:12px;

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

    background:rgba(239,68,68,0.16);

    color:#f87171;

    font-size:16px;
}

.alert-content h6{

    color:white;

    font-size:14px;

    margin-bottom:3px;
}

.alert-content p{

    color:rgba(255,255,255,0.72);

    font-size:12px;

    margin:0;
}

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

@media(max-width:768px){

    body{

        padding:90px 16px 24px;
    }

    .glass-card{

        max-width:100%;

        padding:28px 22px !important;

        border-radius:24px;
    }

    .login-title{

        font-size:28px;
    }

    .login-logo img{

        width:74px;
        height:74px;
    }

}

@media(max-width:500px){

    .back-home{

        top:14px;
        left:14px;

        padding:9px 13px;

        font-size:12px;
    }

    .login-title{

        font-size:26px;
    }

    .btn-modern{

        padding:14px;
    }

}