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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;

    background:linear-gradient(135deg,#d9c69c 0%,#ccb685 100%);
}

/* Soft texture */

body::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.28),transparent 40%),
        radial-gradient(circle at 80% 70%,rgba(255,255,255,.18),transparent 35%),
        radial-gradient(circle at 60% 10%,rgba(255,255,255,.18),transparent 25%);

    opacity:.7;
}

/* =========================
        FLOATING BALLS
========================= */

.ball{
    position:absolute;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #fff6b6 0%,
        #ffd766 35%,
        #efb13d 70%,
        #b8741d 100%
    );

    box-shadow:
        inset -20px -25px 40px rgba(0,0,0,.12),
        inset 15px 18px 30px rgba(255,255,255,.45),
        0 20px 45px rgba(0,0,0,.18);

    animation:float 8s ease-in-out infinite;
}

/* Large top left */

.ball-1{
    width:200px;
    height:200px;
    top:55px;
    left:180px;
}

/* Top center */

.ball-2{
    width:80px;
    height:80px;
    top:30px;
    left:52%;
    animation-delay:1s;
}

/* Small right */

.ball-3{
    width:65px;
    height:65px;
    top:165px;
    right:180px;
    animation-delay:2s;
}

/* Huge right */

.ball-4{
    width:320px;
    height:320px;
    right:10px;
    bottom:90px;
    animation-delay:1.5s;
}

/* Bottom left */

.ball-5{
    width:220px;
    height:220px;
    left:100px;
    bottom:50px;
}

/* Small left */

.ball-6{
    width:90px;
    height:90px;
    left:45px;
    top:390px;
    animation-delay:2.5s;
}

/* Tiny right */

.ball-7{
    width:38px;
    height:38px;
    right:55px;
    top:170px;
    animation-delay:3s;
}

/* Floating Animation */

@keyframes float{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-22px);
    }

}
/*=========================
      GLASS CIRCLE
=========================*/

.glass-circle{
    position:relative;
    width:520px;
    height:520px;
    border-radius:50%;

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

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

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

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

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -20px 40px rgba(255,255,255,.03),
        0 25px 60px rgba(0,0,0,.12);

    z-index:5;
}

/* shiny border */

.glass-circle::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:50%;

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

    pointer-events:none;
}

/* highlight */

.glass-circle::after{
    content:"";
    position:absolute;

    width:220px;
    height:220px;

    left:70px;
    top:55px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.22),
        transparent 70%
    );

    filter:blur(30px);

    pointer-events:none;
}


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

.login-form{
    width:260px;
}

.login-form h1{
    color:#fff;
    font-size:38px;
    font-weight:700;
    margin-bottom:30px;
}


/*=========================
      INPUT BOXES
=========================*/

.input-box{
    position:relative;
    margin-bottom:18px;
}

.input-box i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#c99d30;
    font-size:18px;
}

.input-box input{
    width:100%;
    height:46px;

    padding:0 18px 0 45px;

    border:none;
    outline:none;

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

    color:#555;

    font-size:15px;

    border-radius:4px;

    transition:.35s;
}

.input-box input::placeholder{
    color:#b79643;
}

.input-box input:focus{

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255,255,255,.28);

}


/*=========================
       FORGOT LINK
=========================*/

.forgot{
    text-align:right;
    margin-top:-3px;
    margin-bottom:30px;
}

.forgot a{

    color:#fff;

    font-size:13px;

    text-decoration:none;

    transition:.3s;
}

.forgot a:hover{
    opacity:.7;
}


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

.login-form button{

    width:255px;
    max-width:100%;
    height:46px;

    display:block;
    margin:auto;

    border:none;
    outline:none;

    border-radius:12px;

    cursor:pointer;

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

    color:#d4a129;

    background:#fff;

    transition:.35s;

    box-shadow:
        0 12px 25px rgba(255,255,255,.35);
}

.login-form button:hover{

    transform:translateY(-4px);
    background: #c99d30;
    color: #fff;

    box-shadow:
        0 18px 35px rgba(255,255,255,.45);
}

.login-form button:active{
    transform:scale(.97);
}


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

@media (max-width: 700px) {

    .glass-circle {
        width: 92vw;
        height: 92vw;
        max-width: 480px;
        max-height: 480px;
    }

    .login-form {
        width: 78%;
    }

    .ball-4 {
        width: 200px;
        height: 200px;
    }

    .ball-1 {
        width: 140px;
        height: 140px;
        left: 8%;
    }

    .ball-5 {
        width: 160px;
        height: 160px;
        left: 6%;
    }
}

@media (max-width: 480px) {

    .glass-circle {
        width: 94vw;
        height: 94vw;
        max-width: 360px;
        max-height: 360px;
        border-width: 1px;
    }

    .login-form {
        width: 82%;
    }

    .login-form h1 {
        margin-bottom: 20px;
    }

    .input-box {
        margin-bottom: 14px;
    }

    /* Sembunyikan sebagian bola dekoratif kecil supaya tidak terlalu ramai di layar sempit */
    .ball-2, .ball-3, .ball-6, .ball-7 {
        display: none;
    }

    .ball-1 {
        width: 100px;
        height: 100px;
        top: 20px;
        left: 4%;
    }

    .ball-4 {
        width: 150px;
        height: 150px;
        right: -20px;
        bottom: 40px;
    }

    .ball-5 {
        width: 110px;
        height: 110px;
        left: 0;
        bottom: 20px;
    }
}

@media (max-height: 620px) {
    .glass-circle {
        width: 82vh;
        height: 82vh;
    }
}