/* =========================================
   LUPA PASSWORD RPL — FINAL PRODUCTION CSS
   IDENTIK LOGIN CALON
========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'League Spartan','Segoe UI',sans-serif;
}

/* ===== BACKGROUND KAMPUS BLUR ===== */
body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
color:#fff;
overflow-y:auto;
}

/* Background image */
body::before{
content:"";
position:fixed;
inset:0;
background:url('../../kampus.jpg') no-repeat center center fixed;
background-size:cover;
z-index:-2;
}

/* Overlay blur */
body::after{
content:"";
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
backdrop-filter:blur(6px);
z-index:-1;
}

/* ===== CARD ===== */
.overlay{
width:100%;
max-width:420px;
border-radius:20px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 0 25px rgba(0,0,0,0.4);
overflow:hidden;
animation:fadeIn 0.6s ease;
}

/* HEADER */
.form-header{
padding:22px;
text-align:center;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.form-header h2{
color:#FFD700;
font-size:1.8rem;
font-weight:800;
}

.form-header p{
margin-top:6px;
color:#eee;
}

/* BODY */
.form-body{
padding:28px;
}

/* LABEL */
label{
display:block;
margin-top:15px;
font-weight:600;
}

/* INPUT */
input{
width:100%;
padding:12px;
margin-top:6px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.08);
color:#fff;
font-size:0.95rem;
}

input:focus{
outline:none;
border-color:#FFD700;
box-shadow:0 0 8px rgba(255,215,0,0.4);
}

/* BUTTON GROUP */
.button-group{
margin-top:22px;
display:flex;
flex-direction:column;
gap:12px;
}

.btn{
padding:12px;
border-radius:12px;
font-weight:700;
background:#ffc107;
border:none;
cursor:pointer;
transition:0.3s;
color:#000;
text-align:center;
text-decoration:none;
}

.btn:hover{
background:#FFD700;
transform:scale(1.02);
}

/* NOTIF */
.notif{
margin-bottom:15px;
background:rgba(255,0,0,0.15);
padding:10px;
border-radius:10px;
}

/* ANIMATION */
@keyframes fadeIn{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}