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

body{

    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#0d6efd;

}

/* Background */

.background{

    position:fixed;
    inset:0;

    background:
    linear-gradient(135deg,#0d47a1,#1976d2,#42a5f5);

}

/* Efek Lingkaran */

.background::before{

    content:'';

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

    top:-100px;
    left:-80px;

}

.background::after{

    content:'';

    position:absolute;

    width:420px;
    height:420px;

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

    border-radius:50%;

    bottom:-150px;
    right:-100px;

}

/* Container */

.login-container{

    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;

}

/* Card */

.login-card{

    width:420px;

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

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    padding:40px;

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

    animation:fadeUp .8s ease;

}

/* Logo */

.logo{

    width:100px;
    height:100px;

    object-fit:contain;

    margin-bottom:15px;

}

/* Judul */

.login-card h2{

    font-weight:700;
    color:#fff;

}

.subtitle{

    color:#eef5ff;
    margin-bottom:5px;
    font-size:14px;

}

.login-card small{

    color:#f8f9fa;

}

/* Label */

label{

    color:white;
    font-weight:500;
    margin-bottom:8px;

}

/* Input */

.input-group-text{

    background:white;
    border:none;

}

.form-control{

    border:none;
    height:50px;

}

.form-control:focus{

    box-shadow:none;

}

/* Button */

.btn-login{

    height:50px;
    border-radius:12px;
    font-weight:600;
    transition:.3s;

}

.btn-login:hover{

    transform:translateY(-2px);

}

/* Footer */

.footer{

    margin-top:25px;
    text-align:center;
    color:white;
    font-size:13px;

}

/* Animasi */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* Responsive */

@media(max-width:576px){

.login-card{

    width:100%;
    padding:30px 25px;

}

.logo{

    width:80px;

}

}