body{

background:

linear-gradient(
135deg,

#3fc6f5 0%,

#18aae5 50%,

#0d94d7 100%);

position:relative;

overflow:hidden;

}
body::before{

content:"";

position:fixed;

top:-250px;

left:-250px;

width:600px;

height:600px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,60,80,.15),

transparent 70%);

}

body::after{

content:"";

position:fixed;

bottom:-250px;

right:-250px;

width:600px;

height:600px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.10),

transparent 70%);

}

#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 #ef3340;

    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:rgba(239,51,64,.05);

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:#ef3340;      /* merah DCH */

    color:#fff;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

    transition:all .3s ease;

    box-shadow:0 10px 25px rgba(239,51,64,.30);

}

.btn-modern:hover{

    background:#d62839;

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(239,51,64,.45);

}

label{

font-weight:600;

}

.checkbox label{

font-size:14px;

}

#forgot{

font-weight:600;

transition:.3s;

}

#forgot:hover{

text-decoration:none;

color:#179fe5;

}