#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Loader styles */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,black 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 10px 10px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear;
}
@keyframes l12 { 
  100%{transform: rotate(.5turn)}
}
/* Form styles */
.login-container{
    position:relative;
    width:90%;
    max-width:420px;
    margin:calc(70px + 2vh) auto;
    padding:40px 24px 32px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    text-align:center;
    overflow:hidden;
}
.login-container h2{
    margin-bottom:24px;
    font-weight:600;
    color:orange;
    
}
.form-group{margin-bottom:20px;text-align:left;}
.form-group label{display:block;margin-bottom:5px;font-weight:600;}
.form-group input{
    box-sizing: border-box;
    width:100%;
    padding:14px 16px 14px 42px;
    border:1px solid #169ddb;
    border-radius:8px;
    background:#f9fffd;
    color:black;
    
}
/* style placeholder */
.form-group input::placeholder{
    color:black;
}
.form-group input:focus{
    border-color:#169ddb;
    box-shadow:0 0 0 2px rgba(29,139,121,0.25);
    outline:none;
        height: 10px;
}
button[type="submit"]{
    width:100%;
    padding:12px;
    background:#169ddb;
    color:black;
    border:none;
    border-radius:7px;
    font-weight:600;
    font-size: 15px;
    cursor:pointer;
}
button[type="submit"]:hover{background:#169ddb;}

/* icon wrapper */
.input-icon{position:relative;}
.input-icon i{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:black;
    font-size:16px;
}
    /* Layout padding to avoid overlap */
body{
    padding-top:70px; /* navbar height */
    padding-bottom:70px; /* footer height */
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
}
main.login-container{
    flex:1;
    overflow-y:auto;
}


/* Carousel */
.carousel{
    width:100%;
    position:relative;
    padding-top:56.25%; /* 16:9 ratio */
    overflow:hidden;
    margin-bottom:8px;
}
.carousel img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80%;
    object-fit:cover;
    opacity:0;
    transition:opacity .5s ease;
}
.carousel img.active{opacity:1;}

/* Improved Card Styles */
.login-container{
    position:relative;
    width:90%;
    max-width:420px;
    margin:calc(70px + 2vh) auto;
    padding:40px 24px 32px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    text-align:center;
    overflow:hidden;
}
.login-container h2{
    margin-bottom:20px;
    font-weight:600;
    color:black;
}
.form-group input{border-radius:8px;}

/* decorative top gradient bar */
.login-container::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:7px;
    background:linear-gradient(90deg,blue 0%,black 100%);
} 

@media (max-width:600px){
    .login-container{margin:12px 12px;max-height:calc(100vh - 120px);overflow-y:auto;}
}

/* Extra-small devices */
@media (max-width:480px){
    .login-container{
        max-width:300px;
        padding:28px 18px 24px;
    }
    .login-container h2{
        font-size:1.1rem;
    }
    .carousel{
        padding-top:66.66%; /* 3:2 ratio, lebih pendek */
        margin-bottom:0px;
    }
}

@media (min-width:600px){
    .login-container{max-width:500px;}
}