/* =========================================================
   LOGIN ADMIN
   Perpustakaan Kejaksaan Tinggi Sumatera Utara
========================================================= */

:root{
    --hijau-gelap:#073824;
    --hijau:#0B5D3B;
    --emas:#C89B3C;
    --emas-terang:#E8CC85;
    --putih:#FFFFFF;
}

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

html,
body{
    height:100%;
}

body{

    min-height:100vh;

    overflow:hidden;

    background:#073824;

}

/* =========================================================
   SLIDESHOW
========================================================= */

.slideshow{

    position:fixed;

    inset:0;

    z-index:-2;

    overflow:hidden;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1.8s ease-in-out;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.slide.active{

    opacity:1;

}

.slide-1{

    background-image:url("../background/bg1.jpg");

}

.slide-2{

    background-image:url("../background/bg2.jpg");

}

.slide-3{

    background-image:url("../background/bg3.jpg");

}

.slide-4{

    background-image:url("../background/bg4.jpg");

}

.slide-5{

    background-image:url("../background/bg5.jpg");

}

.slideshow::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(4,26,17,.55),
        rgba(4,26,17,.45),
        rgba(4,26,17,.78)
    );

}

/* =========================================================
   LOGIN CARD
========================================================= */

.glass-card{

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.15);

    border-top:4px solid var(--emas);

    border-radius:20px;

    padding:40px;

    box-shadow:0 25px 50px rgba(0,0,0,.35);

}

/* =========================================================
   LOGO
========================================================= */

.logo{

    width:90px;

    margin-bottom:20px;

}

/* =========================================================
   JUDUL
========================================================= */

.glass-card h2{

    color:#fff;

    font-size:30px;

    font-weight:700;

    margin-bottom:8px;

}

.glass-card p{

    color:rgba(255,255,255,.85);

    font-size:15px;

    margin-bottom:25px;

}

/* =========================================================
   FORM
========================================================= */

.form-label{

    color:#fff;

    font-weight:500;

}

.form-control{

    height:52px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.95);

}

.form-control:focus{

    box-shadow:0 0 0 .2rem rgba(200,155,60,.25);

}

/* =========================================================
   BUTTON
========================================================= */

.btn-login{

    width:100%;

    height:54px;

    border:none;

    border-radius:12px;

    background:var(--hijau-gelap);

    color:#C89B3C;

    font-weight:700;

    transition:.3s;

}

.btn-login:hover{

    background:var(--emas-terang);

    transform:translateY(-2px);

}

/* =========================================================
   ALERT
========================================================= */

.alert{

    border-radius:12px;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .glass-card{

        padding:30px 25px;

    }

    .logo{

        width:75px;

    }

    .glass-card h2{

        font-size:24px;

    }

}

.input-group .btn{

    background:#fff;

    border:none;

    border-radius:0 12px 12px 0;

    font-size:20px;

    padding:0 18px;

}

.input-group .btn:hover{

    background:#f2f2f2;

}

.input-group .form-control{

    border-radius:12px 0 0 12px;

}