/* assets/css/auth.css */
*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:#f5f6fa;
}

/* LOGO */

.top-logo{
position:absolute;
top:20px;
left:25%;
transform:translateX(-50%);
z-index:1000;
}

.top-logo img{
height:60px;
}

.logo-mobile{
display:none;
}

/* LAYOUT */

.login-page{
display:flex;
height:100vh;
}

/* HERO */

.hero{

flex:1;

position:relative;

background:
linear-gradient(
120deg,
rgba(116,0,0,0.85),
rgba(204,0,0,0.75),
rgba(116,0,0,0.85)
),
url('../gambar/bg1.png');

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

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

color:white;
padding:40px;

overflow:hidden;
}

.hero-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:40px;
max-width:720px;
width:100%;
}

.hero-content{
text-align:center;
}

.hero-content h1{
font-size:46px;
font-weight:700;
margin:0;
}

.hero-content p{
font-size:16px;
opacity:.9;
margin-top:10px;
}

/* SLIDER */

.announcement-slider{

position:relative;

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

aspect-ratio:16/9;

border-radius:14px;
overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,0.35);

background:black;
}

.slide{

position:absolute;

width:100%;
height:100%;

opacity:0;

transition:opacity .6s;

}

.slide.active{
opacity:1;
}

.slide img{

width:100%;
height:100%;

object-fit:cover;
}

.slide-caption{

position:absolute;

bottom:0;

background:linear-gradient(
transparent,
rgba(0,0,0,0.8)
);

color:white;

width:100%;

padding:16px;

font-size:15px;
}

/* SLIDER BUTTON */

.slide-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,0.5);

border:none;

color:white;

font-size:20px;

padding:8px 12px;

cursor:pointer;

border-radius:6px;
}

.prev{left:10px;}
.next{right:10px;}

/* DOT */

.slider-dots{

position:absolute;

bottom:10px;

width:100%;

display:flex;

justify-content:center;

gap:6px;

}

.slider-dots span{

width:10px;
height:10px;

background:rgba(255,255,255,0.5);

border-radius:50%;

cursor:pointer;
}

.slider-dots span.active{
background:white;
}

/* LOGIN AREA */

.login-area{

flex:1;

background:white;

display:flex;

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

padding:40px;
}

/* BOX */

.login-box{

width:100%;
max-width:360px;
}

/* TITLE */

.login-title{

font-size:26px;
font-weight:600;

margin-bottom:10px;

text-align:center;
}

.login-sub{

color:#666;

font-size:14px;

margin-bottom:30px;

text-align:center;
}

/* INPUT */

.input-group{
position:relative;
margin-bottom:20px;
}

.input-group input{

width:100%;
padding:14px;

border-radius:8px;

border:1px solid #ccc;

font-size:14px;

outline:none;
}

.input-group label{

position:absolute;

left:12px;
top:14px;

color:#888;

background:white;

padding:0 5px;

transition:0.2s;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{

top:-8px;
font-size:11px;
color:#CC0000;
}

/* PASSWORD */

.password-wrapper{
position:relative;
}

.password-toggle{

position:absolute;

right:12px;

top:50%;

transform:translateY(-50%);

cursor:pointer;
}

/* BUTTON */

.btn{

width:100%;
padding:14px;

background:#CC0000;

border:none;

color:white;

border-radius:8px;

font-weight:600;

cursor:pointer;
}

.btn:hover{
background:#740000;
}

/* LINK */

.register{
margin-top:18px;
text-align:center;
font-size:14px;
}

.register a{
color:#CC0000;
font-weight:600;
text-decoration:none;
}

/* FOOTER */

.login-footer{

margin-top:30px;

font-size:12px;

color:#888;

text-align:center;
}

/* NIDN VALIDATION */

#nidn-info{

font-size:12px;
margin-top:4px;
display:block;

}

.nidn-valid{color:green;}
.nidn-error{color:red;}
.nidn-warning{color:rgb(199, 124, 26);}

/* PARTICLES */

.particles{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

pointer-events:none;
}

.particle{

position:absolute;

opacity:0.3;

animation:floatUp linear infinite;
}

.square{background:white;}
.round{background:white;border-radius:50%;}
.rounded{background:white;border-radius:6px;}

.triangle{

width:0;
height:0;

border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:48px solid white;
}

@keyframes floatUp{

0%{
transform:translateY(100vh) rotate(0deg);
}

100%{
transform:translateY(-120vh) rotate(360deg);
}

}

/* MOBILE */

@media(max-width:900px){
    .login-page{
    flex-direction:column;
    }
    .hero{
    padding:40px 20px;
    }
    .hero-content h1{
    font-size:32px;
    }
    .logo-desktop{
    display:none;
    }
    .logo-mobile{
    display:block;
    }
}

@media(max-width:700px){
    .hero{
    display:none;
    }
    .logo-desktop{
    display:none;
    }
    .logo-mobile{
    display:block;
    }
}