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

/* ===== BODY ===== */
body{
    margin: 0;
    font-family: Arial, sans-serif;
    background: url('../assets/bg.png') no-repeat center center fixed;
    background-size: cover;
}

/* ===== HEADER ===== */
.top-bar{
    width:100%;
    height:110px; 
    background:url('../assets/header.png') center no-repeat;
    background-size:cover;
}

/* ===== AREA LOGIN ===== */
.admin-container{
    width:100%;
    height:calc(100vh - 110px);
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ===== CARD LOGIN ===== */
.admin-card{
    width:360px;
    background:white;
    padding:35px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* ===== JUDUL ===== */
.admin-title{
    text-align:center;
    margin-bottom:25px;
    color:#1e3c72;
}

/* ===== LABEL ===== */
form label{
    display:block;
    margin-bottom:6px;
    font-size:14px;
}

/* ===== INPUT ===== */
form input{
    width:100%;
    height:42px;
    padding:10px;
    margin-bottom:18px;
    border-radius:6px;
    border:1px solid #ccc;
}

form input:focus{
    outline:none;
    border-color:#1e3c72;
}

/* ===== BUTTON GROUP ===== */
.btn-group{
    display:flex;
    gap:10px;
}

/* ===== BUTTON ===== */
.btn{
    flex:1;
    height:45px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

/* LOGIN BUTTON */
.btn-primary{
    background:#1e3c72;
    color:white;
}

.btn-primary:hover{
    background:#16325c;
}

/* KEMBALI BUTTON */
.btn-secondary{
    background:#777;
    color:white;
}

.btn-secondary:hover{
    background:#555;
}

/* ===== RESPONSIVE HP ===== */
@media(max-width:768px){

.top-bar{
    height:80px;
    background:url('../assets/headermb.png') center no-repeat;
    background-size:cover;
}

.admin-container{
    height:calc(100vh - 80px);
}

.admin-card{
    width:90%;
}

}