/*
==========================================================
KERAS.ID AI SEO CMS
File : assets/css/login.css
Version : 1.0.0
==========================================================
*/

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;

    --bg:#eef3fb;

    --card:#ffffff;

    --border:#e5e7eb;

    --text:#1f2937;

    --muted:#6b7280;

    --radius:18px;

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

}

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

html,
body{
    width:100%;
    height:100%;
}

body{

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

    background:linear-gradient(135deg,#eef4ff,#f8fbff);

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

    color:var(--text);

}

/*==================================================
Wrapper
==================================================*/

.login-wrapper{

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

    padding:20px;

}

/*==================================================
Card
==================================================*/

.login-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

}

/*==================================================
Header
==================================================*/

.login-header{

    padding:35px 30px;

    text-align:center;

    border-bottom:1px solid var(--border);

}

.login-header img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:15px;

}

.login-header h2{

    margin:0;

    font-size:30px;

    font-weight:700;

}

.login-header p{

    margin-top:8px;

    color:var(--muted);

}

/*==================================================
Body
==================================================*/

.login-body{

    padding:30px;

}

/*==================================================
Alert
==================================================*/

.alert{

    border-radius:12px;

    margin-bottom:20px;

}

/*==================================================
Form
==================================================*/

.form-label{

    font-weight:600;

    margin-bottom:8px;

}

.form-control{

    height:50px;

    border-radius:12px;

    border:1px solid var(--border);

    transition:.25s;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

/*==================================================
Button
==================================================*/

.btn-login{

    width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.25s;

}

.btn-login:hover{

    background:var(--primary-dark);

}

/*==================================================
Links
==================================================*/

.login-links{

    display:flex;

    justify-content:space-between;

    margin-top:18px;

}

.login-links a{

    color:var(--primary);

    text-decoration:none;

    font-size:14px;

}

.login-links a:hover{

    text-decoration:underline;

}

/*==================================================
Footer
==================================================*/

.login-footer{

    text-align:center;

    padding:20px;

    border-top:1px solid var(--border);

    color:#888;

    font-size:13px;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:576px){

    .login-wrapper{

        padding:15px;

    }

    .login-card{

        border-radius:14px;

    }

    .login-header{

        padding:25px;

    }

    .login-body{

        padding:20px;

    }

}