body{
    background: radial-gradient(
        circle at top center,
        #42c8f3 0%,
        #20b2e8 35%,
        #0d96d3 70%,
        #087bb8 100%
    );

    position: relative;
    overflow: hidden;
}

body:before{
    content:"";
    position:fixed;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    left:-120px;
    top:-120px;
    filter:blur(10px);
}

body:after{
    content:"";
    position:fixed;
    width:520px;
    height:520px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    right:-180px;
    bottom:-180px;
    filter:blur(15px);
}

#login{
border-top:5px solid #ef3340;
border-radius:20px;

padding:40px;

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

}

.logo-login{

max-width:220px;

}

.login-modern h3{

    font-size:24px;

    font-weight:700;

    margin-top:15px;

    margin-bottom:5px;

    color:#233143;

}

.login-modern p{

font-size:15px;

color:#7a7a7a;

margin-bottom:20px;

}

.modern-input{

height:48px;

border-radius:12px;

}

.btn-modern{

height:50px;

border-radius:12px;

font-weight:600;

font-size:15px;

}

body{

    background:linear-gradient(135deg,#1db5ec 0%,#0c8fd0 100%);

    overflow:hidden;

}

body:before{

content:"";

position:fixed;

width:420px;

height:420px;

border-radius:50%;

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

left:-120px;

top:-120px;

filter:blur(10px);

}

body:after{

content:"";

position:fixed;

width:520px;

height:520px;

border-radius:50%;

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

right:-180px;

bottom:-180px;

filter:blur(15px);

}

#login{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfcfc 45%,
        #f5f8fb 100%
    );

    border-radius:24px;

    border-top:4px solid #012359;

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);

}

#login{

    position:relative;

    overflow:hidden;

}

#login:before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgb(117 170 255 / 10%);

top:-100px;

right:-90px;

}

#login:after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:rgba(30,136,229,.05);

left:-70px;

bottom:-70px;

}

#login{

animation:loginFade .7s ease;
}

@keyframes loginFade{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

#login:hover{

transform:translateY(-5px);

box-shadow:

0 35px 70px rgba(0,0,0,.25);

}



.logo-login{

max-width:240px;

transition:.3s;

}

.logo-login:hover{

transform:scale(1.05);

}

.login-modern h3{

    font-size:22px;

    font-weight:700;

    margin-top:10px;

color:#233143;

}

.login-modern p{

font-size:15px;

color:#7a7a7a;

margin-bottom:10px;

}

.modern-input{

height:54px;

border-radius:14px;

border:2px solid #e8edf4;

padding-left:18px;

transition:.25s;

font-size:15px;

}

.modern-input::placeholder{

    color:#a8b2bd;

}

.modern-input:focus{

border-color:#179fe5;

box-shadow:0 0 0 5px rgba(23,159,229,.15);

}

.password-wrapper{

    position:relative;

}

.password-wrapper .toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#888;

    font-size:17px;

}

.toggle-password:hover{

color:#179fe5;

}

.btn-modern{

    height:56px;

    border:none;

    border-radius:14px;

    background:#012359;      /* merah DCH */

    color:#fff;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

    transition:all .3s ease;

    box-shadow:0 10px 25px rgb(81 111 234 / 30%)

}

.btn-modern:hover{

    background:#d62839;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgb(81 111 234 / 30%)

}

label{

font-weight:600;

}

.checkbox label{

font-size:14px;

}

#forgot{

font-weight:600;

transition:.3s;

}

#forgot:hover{

text-decoration:none;

color:#179fe5;

}
#hero,
#hero.login {
    background: radial-gradient(
        circle at top center,
        #55cdf3 0%,
        #27b5e8 30%,
        #0b9bd5 65%,
        #087db8 100%
    ) !important;

    background-size: cover !important;
}

#hero {
    position: relative;
    overflow: hidden;
}

#hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    left: -180px;
    top: -180px;
    filter: blur(15px);
    pointer-events: none;
}

#hero::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    right: -220px;
    bottom: -250px;
    filter: blur(20px);
    pointer-events: none;
}

#hero {
    position: relative;
    overflow: hidden;
}

#hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    left: -180px;
    top: -180px;
    filter: blur(15px);
    pointer-events: none;
}

#hero::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    right: -220px;
    bottom: -250px;
    filter: blur(20px);
    pointer-events: none;
}

/* Hilangkan background bawaan elemen di dalam hero */
#hero > *,
#hero .container,
#hero .container-fluid {
    background: transparent !important;
}


/* Efek cahaya lembut dari atas */
#hero::before {
    content: "";
    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: -500px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255,255,255,.12) 0%,
        rgba(255,255,255,.04) 40%,
        transparent 70%
    );

    pointer-events: none;
}


/* Sedikit aksen gold mengikuti logo DCH */
#hero::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -300px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(232,185,65,.10) 0%,
        rgba(232,185,65,.03) 40%,
        transparent 70%
    );

    pointer-events: none;
}

/* Remove theme background */
#hero,
#hero.login {
    background: transparent !important;
    background-color: transparent !important;

    min-height: 100vh !important;
    height: auto !important;
}


/* Remove blue background from wrappers */
#hero > div,
#hero .container,
#hero .container-fluid {
    background: transparent !important;
}


/* Remove unwanted footer / bottom strip */
footer,
#footer,
.footer,
.site-footer,
#copyright,
.copyright {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}


/* Make elements after hero transparent */
#hero ~ * {
    background: transparent !important;
    background-color: transparent !important;
}


/* Keep login card clean */
#login {
    position: relative;
    z-index: 10;
}


/* DCH logo stays above background effects */
.logo-login {
    position: relative;
    z-index: 11;
}