*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
color:white;
}

/* BACKGROUND */
.bg{
position:fixed;
width:100%;
height:100%;
background:url("/assets/img/gedungRSUPjayapura.webp") center/cover no-repeat;
filter:blur(2px) brightness(0.7);
transform:scale(1.1);
animation:bgZoom 30s infinite alternate;
}

@keyframes bgZoom{
from{transform:scale(1.1);}
to{transform:scale(1.25);}
}

/* PARTICLES */
.particles{
position:fixed;
width:100%;
height:100%;
background-image:
radial-gradient(circle, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
background-size:60px 60px;
animation:particleMove 40s linear infinite;
opacity:0.3;
}

@keyframes particleMove{
from{transform:translateY(0)}
to{transform:translateY(-200px)}
}

/* LOGIN WRAPPER */
.login-wrapper{
position:relative;
z-index:2;
}

/* LOGIN CARD */
.login-card{
width:390px;
padding:45px;
border-radius:25px;
background: #0B2D72;
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.2);
text-align:center;
box-shadow:
0 30px 100px rgba(68, 171, 255, 0.676);
animation:cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat{
0%{transform:translateY(0)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}

.login-card:hover{
  box-shadow:0 30px 100px rgb(68, 172, 255);
}

/* LOGO */
.logo img{
width:250px;
margin-bottom:12px;
}

/* TEXT */
h2{
font-size:18px;
margin-bottom:5px;
}

h3{
font-size:23px;
margin-bottom:6px;
}

.subtitle{
font-size:13px;
margin-bottom:30px;
opacity:0.9;
}

/* INPUT */
.input-group{
position:relative;
margin-bottom:22px;
}

.input-group i{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:#555;
}

.input-group input{
width:100%;
padding:15px 45px;
border:none;
border-radius:12px;
background:rgba(255,255,255,0.9);
outline:none;
font-size:14px;
}

.input-group label{
position:absolute;
left:45px;
top:50%;
transform:translateY(-50%);
color:#666;
font-size:13px;
pointer-events:none;
transition:0.3s;
}

.input-group input:focus + label,
.input-group input:valid + label{
top:-9px;
left:40px;
background:white;
padding:2px 6px;
font-size:11px;
border-radius:5px;
}

/* PASSWORD TOGGLE */
.toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(4px);
  transition:all 0.3s ease;
}

/* icon */
.toggle i{
  color: #1b7b43;
  font-size:18px;
  transition:all 0.3s ease;
}

/* hover effect */
.toggle:hover{
  background:rgba(255,255,255,0.12);
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* icon hover */
.toggle:hover i{
  color:#1d419e;
  transform:scale(1.1);
}

/* efek klik */
.toggle:active{
  transform:translateY(-50%) scale(0.9);
}

/* saat aktif */
.toggle.active i{
  transform:rotate(180deg);
}


/* BUTTON */
.login-btn{
width:100%;
padding:15px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#00c9ff,#2ecc71);
color:white;
font-weight:600;
cursor:pointer;
transition:0.3s;
position:relative;
overflow:hidden;
}

.login-btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 30px rgba(0,0,0,0.4);
}

/* SPINNER */
.spinner{
width:20px;
height:20px;
border:3px solid rgba(255,255,255,0.4);
border-top:3px solid white;
border-radius:50%;
animation:spin 1s linear infinite;
display:none;
margin:auto;
}

@keyframes spin{
to{transform:rotate(360deg)}
}

/* WARNING */
.warning{
margin-top:18px;
font-size:12px;
color:#ffd166;
}

/* FOOTER */
.footer{
margin-top:16px;
font-size:12px;
opacity:0.8;
}

/* SHAKE */
.shake{
animation:shake 0.5s;
}

@keyframes shake{
0%{transform:translateX(0)}
25%{transform:translateX(-5px)}
50%{transform:translateX(5px)}
75%{transform:translateX(-5px)}
100%{transform:translateX(0)}
}

/* MOBILE */
@media(max-width:480px){
.login-card{
width:92%;
padding:30px;
}
}










/* ================= BACKGROUND OVERLAY ================= */
.bg::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
rgba(0,0,0,0.35),
rgba(0,60,120,0.25),
rgba(0,0,0,0.35)
);
mix-blend-mode:multiply;
}


/* ================= LOGIN CARD PREMIUM ================= */
.login-card{
transition:all .35s ease;
position:relative;
}

/* animated glass border */
.login-card::before{
content:"";
position:absolute;
inset:-1px;
border-radius:25px;
background:linear-gradient(
120deg,
rgba(255,255,255,0.2),
rgba(255,255,255,0.05),
rgba(255,255,255,0.2)
);
z-index:-1;
opacity:.4;
animation:borderMove 6s linear infinite;
}

@keyframes borderMove{
0%{background-position:0%}
100%{background-position:300%}
}

/* hover lift */
.login-card:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:
0 30px 120px rgba(0,0,0,0.7),
0 0 40px rgba(0,160,255,0.15);
}

/* ================= INPUT UPGRADE ================= */
.input-group input{
transition:all .25s ease;
}

.input-group input:focus{
background:white;
box-shadow:
0 0 0 2px rgba(0,160,255,0.35),
0 6px 20px rgba(0,0,0,0.1);
}

/* input icon glow */
.input-group:focus-within i{
color:#1d419e;
transform:translateY(-50%) scale(1.1);
}

/* ================= BUTTON SUPER ================= */
.login-btn{
background:linear-gradient(
135deg,
#0099ff,
#00c9ff,
#2ecc71
);
background-size:200% 200%;
animation:buttonGradient 6s ease infinite;
font-size:15px;
letter-spacing:.3px;
}

@keyframes buttonGradient{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* hover glow */
.login-btn:hover{
transform:translateY(-3px);
box-shadow:
0 15px 40px rgba(0,150,255,0.35),
0 5px 20px rgba(0,0,0,0.3);
}

/* click ripple */
.login-btn:active{
transform:scale(.97);
}

/* ================= FOOTER STYLE ================= */
.footer{
opacity:.75;
letter-spacing:.3px;
}

/* ================= WARNING STYLE ================= */
.warning{
background:rgba(255,200,0,0.08);
padding:6px 10px;
border-radius:8px;
display:inline-block;
}

/* ================= LOGO ANIMATION ================= */
.logo img{
transition:transform .35s ease;
}

.logo img:hover{
transform:scale(1.08) rotate(-2deg);
}

/* ================= RESPONSIVE IMPROVEMENT ================= */
@media (max-width:768px){
.login-card{
width:94%;
padding:32px;
}
}
@media (max-width:420px){
.logo img{
width:110px;
}
.login-card{
padding:26px;
}
.subtitle{
font-size:12px;
}
}