body{
font-family:Inter;
margin:0;
min-height:100vh;

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

color:white;
position:relative;
overflow:hidden;
}

/* BACKGROUND BLUR */

body::before{
content:"";
position:fixed;
inset:0;

background:
linear-gradient(rgba(15,23,42,.85),rgba(15,23,42,.9)),
url("/sarpras/assets/bg.png");

background-size:cover;
background-position:center;

filter:blur(6px);
transform:scale(1.05);

z-index:-1;
}

.login-box{
width:420px;
text-align:center;
}

.brand img{
width:270px;
margin-bottom:18px;

background:rgba(255, 255, 255, 0.836);
padding:12px 18px;
border-radius:10px;

backdrop-filter:blur(6px);
}

.brand h1{
font-size:28px;
margin:10px 0;
}

.brand p{
color:#cbd5f5;
font-size:14px;
margin-bottom:30px;
}

.login-card{
background:rgba(15,23,42,.9);
padding:30px;
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,.4);
margin-bottom:25px;
}

.login-card h2{
margin-bottom:20px;
}

.form-group{
margin-bottom:15px;
}

.form-group input{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid #334155;
background:#020617;
color:white;
}

.password-group{
position:relative;
}

.password-toggle{
position:absolute;
right:12px;
top:12px;
cursor:pointer;
}

.captcha{
display:flex;
align-items:center;
justify-content:space-between;

background:#f1f5f9;
color:#020617;

padding:10px 14px;

border-radius:8px;

font-weight:600;

margin-bottom:12px;
}
input[name="captcha"]{
width:100%;
padding:12px;

border-radius:8px;
border:1px solid #334155;

background:#020617;
color:white;

margin-bottom:12px;
}
.captcha i{
color:#2563eb;
cursor:pointer;
transition:.2s;
}

.captcha i:hover{
transform:rotate(90deg);
}

.btn-login{
width:100%;
padding:12px;
border:none;
border-radius:8px;
background:#2563eb;
color:white;
margin-top:10px;
cursor:pointer;
}

.btn-login:hover{
background:#1d4ed8;
}