*{box-sizing:border-box;margin:0;padding:0}
html,body{
width:100%;
min-height:100%;
font-family:Arial,Helvetica,sans-serif;
color:#fff;
overflow:hidden;
background:#050008;
}

/* PAGE */
.login-bg{
position:relative;
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 10%,rgba(255,122,0,.40),transparent 24%),
radial-gradient(circle at 15% 45%,rgba(255,47,146,.42),transparent 32%),
radial-gradient(circle at 85% 55%,rgba(138,43,226,.48),transparent 36%),
linear-gradient(135deg,#210033,#050008 70%);
}

.login-bg:before{
content:"";
position:absolute;
inset:-30px;
background:linear-gradient(135deg,rgba(255,47,146,.20),rgba(138,43,226,.18),rgba(0,0,0,.62));
animation:bgMove 14s ease-in-out infinite alternate;
z-index:0;
}

/* GLOW */
.glow{
position:absolute;
border-radius:50%;
filter:blur(55px);
opacity:.55;
animation:floatGlow 9s ease-in-out infinite;
z-index:1;
}
.glow1{width:230px;height:230px;background:#ff2f92;left:-70px;top:80px}
.glow2{width:270px;height:270px;background:#8a2be2;right:-90px;bottom:80px;animation-delay:2s}
.glow3{width:190px;height:190px;background:#ff7b00;right:30%;top:-70px;animation-delay:4s}

/* HOST WALL */
.host-wall{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
opacity:.68;
}

.host-photo{
position:absolute;
width:92px;
height:128px;
border-radius:18px;
background-size:cover!important;
background-position:center!important;
box-shadow:0 0 18px rgba(255,47,146,.18);
opacity:.58;
overflow:hidden;
animation:photoFloat 9s ease-in-out infinite;
}

.host-photo:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(255,47,146,.10),rgba(0,0,0,.30));
}

/* 8 FOTO RAPI */
.p1{left:5%;top:7%;background-image:url('../img/login/host1.jpg')}
.p2{right:5%;top:7%;background-image:url('../img/login/host2.jpg')}

.p3{left:4%;top:36%;background-image:url('../img/login/host3.jpg')}
.p4{right:4%;top:36%;background-image:url('../img/login/host4.jpg')}

.p5{left:5%;bottom:8%;background-image:url('../img/login/host5.jpg')}
.p6{right:5%;bottom:8%;background-image:url('../img/login/host6.jpg')}

.p7{left:29%;bottom:5%;background-image:url('../img/login/host7.jpg')}
.p8{right:29%;bottom:5%;background-image:url('../img/login/host8.jpg')}

/* CARD */
.login-card{
position:relative;
z-index:5;
width:88%;
max-width:315px;
padding:18px 16px;
border-radius:24px;
background:rgba(8,0,22,.34);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 16px 45px rgba(0,0,0,.35),
0 0 22px rgba(255,47,146,.12);
}

/* BRAND */
.brand{
text-align:center;
margin-bottom:10px;
}
.brand img{
max-width:68px;
max-height:48px;
margin-bottom:5px;
}
.brand-title{
font-size:26px;
font-weight:900;
letter-spacing:.7px;
line-height:1;
background:linear-gradient(90deg,#fff,#ff2f92);
-webkit-background-clip:text;
color:transparent;
text-shadow:0 0 18px rgba(255,47,146,.15);
}
.brand-sub{
font-size:10px;
color:rgba(255,255,255,.68);
margin-top:6px;
}
h2{
text-align:center;
font-size:17px;
margin:10px 0 14px;
}

/* MESSAGE */
.msg{
padding:8px;
border-radius:11px;
margin-bottom:9px;
text-align:center;
font-size:11px;
}
.err{background:rgba(180,0,35,.55)}
.ok{background:rgba(0,125,70,.52)}

/* INPUT */
.input-wrap{
height:39px;
margin:8px 0;
padding:0 12px;
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
display:flex;
align-items:center;
gap:9px;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
transition:.22s;
}

.input-wrap:focus-within{
background:rgba(255,255,255,.065);
border-color:rgba(255,80,180,.40);
box-shadow:0 0 16px rgba(255,40,150,.18);
}

.input-wrap span{
width:16px;
font-size:14px;
opacity:.65;
}

.input-wrap input{
flex:1;
height:100%;
border:0;
outline:0;
background:transparent!important;
color:#fff!important;
font-size:13px;
min-width:0;
}

.input-wrap input::placeholder{
color:rgba(255,255,255,.42);
}

.eye{
border:0;
background:transparent;
color:rgba(255,255,255,.55);
font-size:13px;
}

/* BUTTON */
form .login-btn,
.login-btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:41px!important;
margin-top:10px!important;
border:0!important;
border-radius:14px!important;
background:linear-gradient(90deg,#ff2f92,#ff5c7a)!important;
color:#fff!important;
font-size:14px!important;
font-weight:900!important;
letter-spacing:.5px!important;
box-shadow:0 8px 20px rgba(255,47,146,.22)!important;
}

/* DIVIDER */
.divider{
display:flex;
align-items:center;
gap:10px;
margin:15px 0 12px;
color:rgba(255,255,255,.60);
font-size:10px;
text-transform:uppercase;
}
.divider:before,
.divider:after{
content:"";
height:1px;
background:rgba(255,255,255,.13);
flex:1;
}

/* SOCIAL */
.socials{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:7px;
}
.socials button{
height:31px;
border-radius:12px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.82);
font-size:10.5px;
font-weight:800;
}

/* FOOTER */
.small{
text-align:center;
margin-top:13px;
font-size:12px;
color:rgba(255,255,255,.72);
}
.small a{
color:#ff4fa3;
font-weight:900;
text-decoration:none;
}

/* ANIMATION */
@keyframes bgMove{
from{transform:scale(1)}
to{transform:scale(1.08) translateY(-10px)}
}
@keyframes floatGlow{
0%,100%{transform:translateY(0)}
50%{transform:translateY(26px)}
}
@keyframes photoFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}

/* HP KECIL */
@media(max-width:520px){
.login-card{
width:86%;
max-width:305px;
padding:16px 15px;
background:rgba(8,0,22,.30);
border-radius:23px;
}

.brand-title{font-size:24px}
.brand-sub{font-size:9.5px}
h2{font-size:16px;margin:9px 0 13px}

.input-wrap{
height:37px;
margin:7px 0;
border-radius:13px;
}

form .login-btn,
.login-btn{
height:39px!important;
font-size:13.5px!important;
}

.socials button{
height:29px;
font-size:10px;
}

.small{font-size:11.5px}

/* foto lebih kecil & tidak nutup form */
.host-photo{
width:78px;
height:108px;
border-radius:15px;
opacity:.52;
}

.p1{left:4%;top:6%}
.p2{right:4%;top:6%}

.p3{left:3%;top:36%}
.p4{right:3%;top:36%}

.p5{left:4%;bottom:7%}
.p6{right:4%;bottom:7%}

.p7{left:28%;bottom:4%}
.p8{right:28%;bottom:4%}
}

/* HP SANGAT KECIL */
@media(max-width:380px){
.login-card{
max-width:292px;
padding:15px 14px;
}

.host-photo{
width:70px;
height:98px;
opacity:.48;
}

.brand-title{font-size:22px}
}