/* ==========================================
   FONT
========================================== */

@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;
}

body{

    margin:0;
    padding:0;

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

    background:url("../img/login.png") center center no-repeat;
    background-size:cover;

    width:100%;
    min-height:100vh;

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

    overflow:hidden;

    position:relative;

}

/* ==========================================
   BACKGROUND OVERLAY
========================================== */

body::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

    z-index:1;

}

/* ==========================================
   LOGIN WRAPPER
========================================== */

.login-wrapper{

    position:relative;

    z-index:2;

    width:100%;

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

    padding:30px;

}

body::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

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

    z-index:1;

}

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

.login-card{

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

    background:#ffffff;

    border-radius:18px;

    padding:45px 38px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.08),
        0 8px 18px rgba(0,0,0,.04);

    position:relative;

    overflow:hidden;

}


/* Garis bawah hijau */

.login-card::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:10px;

    background:linear-gradient(
        90deg,
        #060378 0%,
        #0b026a 34%,
        #d8ff4d 34%,
        #d8ff4d 100%
    );

}


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


.logo-box{

    width:100%;

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

}

.logo-box img{

    width:200px;
    max-width:80%;
    height:auto;


    user-select:none;
    pointer-events:none;

}


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

.login-card h1{

    margin-top:5px;

    text-align:center;

    font-size:42px;

    font-weight:700;

    color:#1d1d1d;

}

.subtitle{

    text-align:center;

    color:#777;

    font-size:18px;

    margin-top:10px;
    margin-bottom:40px;

}


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

label{

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:#404021;

    margin-bottom:10px;

    display:block;

}


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

.input-group{

    margin-top:8px;

}

.input-group-text{

    background:#fff;

    border:1px solid #D5D6B4;

    border-right:none;

    color:#55593c;

    height:56px;

    width:52px;

    justify-content:center;

    font-size:21px;

}

.form-control{

    border:1px solid #D5D6B4;

    border-left:none;

    height:56px;

    font-size:18px;

    color:#444;

    box-shadow:none;

}

.form-control::placeholder{

    color:#9b9b9b;

}

.form-control:focus{

    box-shadow:none;

    border-color:#C6FF00;

}

.input-group:focus-within .input-group-text{

    border-color:#C6FF00;

}


/* ==========================================
   PASSWORD ICON
========================================== */

.password-toggle{

    cursor:pointer;

    background:#fff;

    border:1px solid #D5D6B4;
    border-left:1px solid #D5D6B4;

    width:50px;

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

}

.password-toggle i{

    font-size:18px;

    color:#666;

    transition:.2s;

}

.password-toggle:hover i{

    color:#000;

}


/* ==========================================
   FORGOT PASSWORD
========================================== */

.d-flex a{

    text-decoration:none;

    color:#6B7A00;

    font-size:14px;

    font-weight:500;

}

.d-flex a:hover{

    text-decoration:underline;

}


/* ==========================================
   REMEMBER
========================================== */

.remember-box{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:22px;

    margin-bottom:30px;

}

.remember-box span{

    font-size:15px;

    color:#555;

}

.form-check-input{

    width:20px;
    height:20px;

}


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

.btn-login{

    width:100%;

    height:60px;

    border:none;

    border-radius:5px;

    background:#2158fcf3;

    color:#d6d5d5;

    font-size:22px;

    font-weight:700;

    letter-spacing:1px;

    transition:.3s;

}

.btn-login i{

    margin-left:10px;

}

.btn-login:hover{

    background:#0903ce;

    transform:translateY(-2px);

}


/* ==========================================
   DIVIDER
========================================== */

.divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin:40px 0;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#D7D7C6;

}

.divider span{

    font-size:15px;

    color:#4d4d4d;

}


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

.bottom-button{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.bottom-button button{

    height:55px;

    background:#fff;

    border:1px solid #D4D4BC;

    border-radius:4px;

    font-size:22px;

    transition:.3s;

}

.bottom-button button:hover{

    background:#F6F6F6;

}


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

@media(max-width:768px){

.login-card{

    width:100%;

    padding:35px 25px;

}

.login-card h1{

    font-size:34px;

}

.subtitle{

    font-size:18px;

}

.btn-login{

    font-size:18px;

}

.bottom-button{

    grid-template-columns:1fr;

}

}