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

.login-page{

    min-height:100vh;

    background:linear-gradient(135deg,#198754,#0f5132);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.login-card{

    width:100%;

    max-width:950px;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:0 20px 50px rgba(0,0,0,.2);

}

.login-left{

    background:#198754;

    color:#fff;

    padding:60px 40px;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.login-left img{

    width:120px;

    margin:0 auto 25px;

}

.login-left h2{

    font-size:34px;

    margin-bottom:15px;

}

.login-left p{

    line-height:1.8;

    opacity:.95;

}

.login-right{

    padding:60px;

}

.login-right h1{

    color:#17365D;

    margin-bottom:10px;

}

.login-right p{

    color:#666;

    margin-bottom:35px;

}

.input-group{

    display:flex;

    align-items:center;

    gap:12px;

    border:1px solid #ddd;

    border-radius:12px;

    padding:14px 16px;

    margin-bottom:20px;

}

.input-group i{

    color:#198754;

}

.input-group input{

    flex:1;

    border:none;

    outline:none;

    font-size:15px;

}

.btn-login-admin{

    width:100%;

    border:none;

    background:#198754;

    color:#fff;

    padding:15px;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.btn-login-admin:hover{

    background:#157347;

}

.login-error{

    background:#fdeaea;

    color:#dc3545;

    padding:12px;

    border-radius:10px;

    margin-bottom:20px;

}

@media(max-width:768px){

    .login-card{

        grid-template-columns:1fr;

    }

    .login-left{

        padding:40px 30px;

    }

    .login-right{

        padding:40px 30px;

    }

}


/*=========================================
TOMBOL WEBSITE PUBLIK
=========================================*/

.btn-public{

    display:block;

    width:100%;

    margin-top:15px;

    padding:15px;

    text-align:center;

    text-decoration:none;

    border:2px solid #198754;

    color:#198754;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.btn-public:hover{

    background:#198754;

    color:#fff;

}