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

body{
min-height:100vh;
background:#F4F9FF;
}

.login-page{
min-height:100vh;
display:flex;
flex-direction:column;
}

.login-main{
display:flex;
flex:1;
flex-wrap:wrap;
}

/* ===========================
   LOGIN PENGGUNA - GAMBAR PENUH + OVERLAY FORM ASLI
=========================== */

.login-image-page{
position:relative;
width:100%;
max-width:1391px;
margin:0 auto;
container-type:inline-size;
background:#EAF4FE;
}

.login-bg-img{
width:100%;
display:block;
pointer-events:none;
user-select:none;
}

.ov{
position:absolute;
box-sizing:border-box;
}

.ov-form-cover{
left:61.48%;
top:34.87%;
width:37.15%;
height:39.85%;
background:#fdfeff;
padding:1.2cqw 3.2cqw;
display:flex;
align-items:center;
}

.real-form{
width:100%;
}

.real-error{
background:#FFEBEE;
color:#C62828;
padding:.8cqw;
margin-bottom:1cqw;
border-radius:.7cqw;
text-align:center;
font-size:1.1cqw;
}

.real-input-group{
display:flex;
align-items:center;
background:#F5F7FA;
padding:.85cqw 1cqw;
margin-bottom:.85cqw;
border-radius:.9cqw;
text-align:left;
}

.real-input-group i{
margin-right:.8cqw;
color:#1565C0;
font-size:1.2cqw;
}

.real-input-group input{
border:none;
outline:none;
background:none;
width:100%;
font-size:1.15cqw;
font-family:Poppins,sans-serif;
color:#1a2438;
}

.real-toggle-password{
background:none;
border:none;
color:#90A4AE;
cursor:pointer;
font-size:1.2cqw;
padding:0 0 0 .6cqw;
}

.real-options{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:1cqw;
font-size:.95cqw;
}

.real-remember{
display:flex;
align-items:center;
gap:.4cqw;
color:#546E7A;
cursor:pointer;
}

.real-remember input{
accent-color:#1565C0;
}

.real-forgot{
color:#1565C0;
font-weight:600;
text-decoration:none;
font-size:.95cqw;
}

.real-forgot:hover{
text-decoration:underline;
}

.real-btn-masuk{
width:100%;
padding:1cqw;
border:none;
border-radius:.9cqw;
background:linear-gradient(90deg,#1565C0,#6A2FC7);
color:#fff;
font-size:1.25cqw;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:.6cqw;
}

.real-btn-masuk:hover{
background:linear-gradient(90deg,#0D47A1,#5A1FB0);
}

.real-or{
display:flex;
align-items:center;
gap:.7cqw;
margin:1cqw 0;
color:#90A4AE;
font-size:.9cqw;
}

.real-or::before,
.real-or::after{
content:"";
flex:1;
height:1px;
background:#E0E7EE;
}

.real-btn-daftar{
display:flex;
align-items:center;
justify-content:center;
gap:.6cqw;
width:100%;
padding:.9cqw;
border:2px solid #D5C4F5;
border-radius:.9cqw;
color:#6A2FC7;
font-weight:600;
font-size:1.1cqw;
text-decoration:none;
}

.real-btn-daftar:hover{
background:#F3E8FF;
}

@media (max-width:640px){
    .real-input-group input,
    .real-input-group i,
    .real-toggle-password{
        font-size:2.2cqw;
    }
    .real-options,
    .real-forgot{
        font-size:1.8cqw;
    }
    .real-btn-masuk{
        font-size:2.3cqw;
    }
    .real-btn-daftar{
        font-size:2cqw;
    }
    .real-error{
        font-size:2cqw;
    }
}

/* ===========================
   HERO KIRI
=========================== */

.login-hero{
position:relative;
flex:1;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:#EAF4FE;
overflow:hidden;
}

.hero-panel-img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:top;
}

/* ===========================
   PANEL KANAN (FORM LOGIN)
=========================== */

.login-panel{
position:relative;
flex:0 0 500px;
width:500px;
max-width:500px;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding:36px 48px 28px 0;
background:linear-gradient(90deg,#EAF4FE 0%,#1565C0 15%,#3949AB 55%,#6A2FC7 100%);
overflow:hidden;
}

.login-main-swap .login-hero{
order:2;
}

.login-main-swap .login-panel{
order:1;
align-items:flex-end;
padding-right:48px;
background:linear-gradient(90deg,#6A2FC7 0%,#3949AB 45%,#1565C0 85%,#EAF4FE 100%);
}

.login-panel::before{
content:"";
position:absolute;
top:0;
right:0;
width:220px;
height:220px;
background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
background-size:16px 16px;
-webkit-mask-image:radial-gradient(circle at top right, #000 0%, transparent 70%);
mask-image:radial-gradient(circle at top right, #000 0%, transparent 70%);
pointer-events:none;
}

.login-panel::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-2px;
height:140px;
background:rgba(255,255,255,.12);
border-radius:50% 50% 0 0 / 100% 100% 0 0;
transform:scale(1.6);
pointer-events:none;
}

.panel-deco{
position:absolute;
color:rgba(255,255,255,.55);
z-index:0;
pointer-events:none;
}

.panel-deco-sparkle-1{
top:60px;
right:70px;
font-size:14px;
}

.panel-deco-sparkle-2{
bottom:90px;
left:36px;
font-size:11px;
color:rgba(255,255,255,.4);
}

.panel-deco-leaf{
bottom:26px;
left:22px;
font-size:22px;
color:rgba(255,255,255,.5);
transform:rotate(-15deg);
}

.panel-deco-arrow{
bottom:30px;
right:34px;
font-size:16px;
color:rgba(255,255,255,.5);
}

.panel-deco-trend{
position:absolute;
top:26px;
right:20px;
width:120px;
height:auto;
z-index:0;
pointer-events:none;
}

.login-card{
position:relative;
width:100%;
max-width:440px;
background:#fff;
padding:26px 30px 22px;
border-radius:22px;
box-shadow:0 25px 50px rgba(20,20,60,.28);
text-align:center;
z-index:1;
}

.login-card-icon-wrap{
position:relative;
width:60px;
margin:0 auto 12px;
}

.login-card-icon-ring{
width:60px;
height:60px;
padding:3px;
box-sizing:border-box;
border-radius:50%;
background:conic-gradient(from 180deg,#FFA726,#1565C0,#6A2FC7,#FFA726);
box-shadow:0 8px 18px rgba(41,53,153,.3);
}

.login-card-icon{
position:relative;
width:52px;
height:52px;
margin:0 auto;
border-radius:50%;
background:#fff;
color:#1565C0;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
overflow:hidden;
box-shadow:0 0 0 3px #fff;
}

.icon-leaf,
.icon-sparkle{
position:absolute;
font-size:12px;
z-index:1;
}

.icon-leaf{
bottom:-2px;
left:-14px;
color:#66BB6A;
transform:rotate(-20deg);
}

.icon-sparkle{
top:-4px;
right:-12px;
color:#FFA726;
}

.login-card-icon img{
width:100%;
height:100%;
object-fit:cover;
}

.login-card h2{
color:#0D2E5C;
font-size:20px;
margin-bottom:6px;
}

.login-card > p{
color:#78909C;
font-size:13px;
line-height:1.4;
margin-bottom:14px;
}

.login-card > p.register-card-subtitle{
color:#1565C0;
font-weight:700;
font-size:14px;
}

.login-link-text{
margin-top:18px;
text-align:center;
font-size:13.5px;
color:#607D8B;
}

.login-link-text a{
color:#1565C0;
font-weight:700;
text-decoration:none;
}

.login-link-text a:hover{
text-decoration:underline;
}

.password-requirements{
background:#EAF4FE;
border:1px solid #BBDEFB;
border-radius:12px;
padding:14px 16px;
margin-bottom:18px;
text-align:left;
}

.password-requirements-title{
display:flex;
align-items:center;
gap:8px;
color:#1565C0;
font-weight:700;
font-size:12.5px;
margin-bottom:8px;
}

.password-requirements ul{
list-style:none;
display:flex;
flex-direction:column;
gap:5px;
}

.password-requirements li{
display:flex;
align-items:center;
gap:8px;
color:#455A64;
font-size:12.5px;
}

.password-requirements li i{
color:#43A047;
font-size:13px;
transition:color .2s ease;
}

.password-requirements li.req-unmet{
color:#C62828;
}

.password-requirements li.req-unmet i{
color:#E53935;
}

.field-hint{
display:none;
color:#E53935;
font-size:11.5px;
margin:-9px 0 12px;
padding-left:4px;
text-align:left;
}

.field-hint.show{
display:block;
}

.input-group.has-error{
border-color:#E53935 !important;
background:#FFF3F2 !important;
}

.input-group.has-error i{
color:#E53935 !important;
}

.login-divider{
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
color:#90A4AE;
}

.login-divider::before,
.login-divider::after{
content:"";
flex:1;
height:1px;
background:#E0E7EE;
}

.login-divider i{
font-size:11px;
color:#FFB000;
}

.input-group{
display:flex;
align-items:center;
height:54px;
background:#F5F7FA;
padding:0 16px;
margin-bottom:14px;
border-radius:14px;
border:1.5px solid transparent;
text-align:left;
transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.input-group:focus-within{
border-color:#005BAC;
background:#fff;
box-shadow:0 0 0 4px rgba(0,91,172,.12);
}

.input-group i{
margin-right:12px;
color:#005BAC;
flex:none;
}

.input-group input{
border:none;
outline:none;
background:none;
width:100%;
height:100%;
font-size:14.5px;
}

.toggle-password{
background:none;
border:none;
color:#90A4AE;
cursor:pointer;
font-size:15px;
padding:0 0 0 8px;
flex:none;
transition:color .2s ease;
}

.toggle-password:hover{
color:#005BAC;
}

.login-options{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
font-size:13px;
}

.remember-me{
display:flex;
align-items:center;
gap:6px;
color:#546E7A;
cursor:pointer;
}

.remember-me input{
accent-color:#005BAC;
}

.forgot-link{
color:#005BAC;
font-weight:600;
text-decoration:none;
}

.forgot-link:hover{
text-decoration:underline;
}

.btn-masuk{
width:100%;
height:54px;
padding:0;
border:none;
border-radius:14px;
background:linear-gradient(90deg,#1565C0,#6A2FC7);
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:transform .18s ease,box-shadow .25s ease,background .25s ease;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.btn-masuk:hover{
background:linear-gradient(90deg,#0D47A1,#5A1FB0);
transform:translateY(-2px);
}

.login-or{
display:flex;
align-items:center;
gap:10px;
margin:14px 0;
color:#90A4AE;
font-size:12.5px;
}

.login-or::before,
.login-or::after{
content:"";
flex:1;
height:1px;
background:#E0E7EE;
}

.btn-daftar{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
padding:14px;
border:2px solid #D5C4F5;
border-radius:12px;
color:#6A2FC7;
font-weight:600;
font-size:15px;
text-decoration:none;
transition:.2s;
}

.btn-daftar:hover{
background:#F3E8FF;
}

.error{
background:#FFEBEE;
color:#C62828;
padding:12px;
margin-bottom:18px;
border-radius:10px;
text-align:center;
font-size:13.5px;
}

.success{
background:#E8F5E9;
color:#2E7D32;
padding:12px;
margin-bottom:18px;
border-radius:10px;
text-align:center;
font-size:13.5px;
}

.login-features-img{
width:100%;
height:auto;
display:block;
margin:0;
}

/* ===========================
   BARIS FITUR PANEL
=========================== */

.panel-feature-row{
position:relative;
z-index:1;
width:100%;
display:flex;
justify-content:space-between;
gap:10px;
margin-top:22px;
padding-top:20px;
border-top:1px solid #EEF2FA;
}

.panel-feature-item{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
color:#0D2E5C;
}

.panel-feature-item b{
font-size:13px;
margin-top:8px;
}

.panel-feature-item span{
font-size:10.5px;
color:#78909C;
margin-top:2px;
line-height:1.3;
}

.panel-feature-icon{
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:19px;
box-shadow:0 0 0 4px #F4F9FF,0 8px 16px rgba(20,20,60,.22);
}

.panel-feature-icon svg{
width:22px;
height:22px;
display:block;
}

.feature-icon-blue{
background:linear-gradient(135deg,#5EB6FF,#1565C0);
}

.feature-icon-orange{
background:linear-gradient(135deg,#FFCA6B,#FB8C00);
}

.feature-icon-green{
background:linear-gradient(135deg,#81D186,#2E7D32);
}


/* ===========================
   FOOTER PANEL (PENGISI RUANG BAWAH)
=========================== */

.login-panel-footer{
position:relative;
z-index:1;
width:100%;
text-align:center;
}

.login-panel-footer-logo{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:6px;
}

.login-panel-footer-logo svg{
width:22px;
height:22px;
}

.login-panel-footer-logo span{
color:#fff;
font-weight:700;
font-size:15px;
letter-spacing:.5px;
}

.login-panel-footer p{
color:rgba(255,255,255,.65);
font-size:11.5px;
}

/* ===========================
   STRIP BAWAH LOGIN
=========================== */

.login-bottom-strip{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
flex-wrap:nowrap;
padding:20px 24px;
background:linear-gradient(90deg,#0A2647,#123C7A 55%,#1B4FA0);
overflow-x:auto;
}

.strip-features{
display:flex;
align-items:center;
gap:22px;
flex-wrap:nowrap;
flex-shrink:0;
}

.strip-feature-item{
display:flex;
align-items:center;
gap:9px;
flex-shrink:0;
max-width:150px;
}

.strip-feature-icon{
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:14px;
flex-shrink:0;
box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.strip-icon-cyan{background:linear-gradient(135deg,#4FC3F7,#0288D1);}
.strip-icon-green{background:linear-gradient(135deg,#81D186,#2E7D32);}
.strip-icon-orange{background:linear-gradient(135deg,#FFCA6B,#FB8C00);}
.strip-icon-purple{background:linear-gradient(135deg,#B085F5,#6A2FC7);}

.strip-feature-text{
display:flex;
flex-direction:column;
white-space:normal;
}

.strip-feature-text b{
color:#fff;
font-size:12.5px;
line-height:1.25;
}

.strip-feature-text span{
color:rgba(255,255,255,.65);
font-size:10px;
margin-top:2px;
line-height:1.3;
display:block;
}

.strip-cta{
position:relative;
display:flex;
align-items:center;
gap:12px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
border-radius:16px;
padding:10px 18px;
flex-shrink:0;
margin-left:24px;
}

.strip-cta-icon{
width:44px;
height:44px;
border-radius:50%;
background:linear-gradient(135deg,#FFD54F,#FB8C00);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
box-shadow:0 6px 14px rgba(0,0,0,.3);
flex-shrink:0;
}

.strip-cta-text{
display:flex;
flex-direction:column;
max-width:190px;
}

.strip-cta-text b{
color:#FFB74D;
font-size:13.5px;
}

.strip-cta-text span{
color:rgba(255,255,255,.75);
font-size:11px;
margin-top:2px;
line-height:1.3;
}

.strip-cta-leaf{
position:absolute;
left:-4px;
bottom:-8px;
color:#66BB6A;
font-size:16px;
transform:rotate(-15deg);
opacity:.8;
}

.strip-cta-sparkle{
position:absolute;
top:-6px;
right:6px;
color:#FFD54F;
font-size:12px;
}

@media (max-width:900px){
    .login-bottom-strip{
        flex-direction:column;
        align-items:stretch;
        justify-content:center;
        padding:20px;
    }
    .strip-features{
        flex-wrap:wrap;
        justify-content:center;
    }
    .strip-feature-text{
        white-space:normal;
    }
    .strip-cta{
        justify-content:center;
        white-space:normal;
    }
    .strip-cta-text b,
    .strip-cta-text span{
        white-space:normal;
    }
}

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

@media (max-width:1440px){

    .login-panel{
        flex-basis:460px;
        width:460px;
        max-width:460px;
        padding:32px 40px 28px 0;
    }

    .login-card{
        max-width:400px;
    }

}

@media (max-width:1366px){

    .login-panel{
        flex-basis:420px;
        width:420px;
        max-width:420px;
        padding:28px 35px 24px 0;
    }

    .login-card{
        padding:24px 26px 20px;
        max-width:380px;
    }

    .login-card-icon-wrap,
    .login-card-icon-ring{
        width:52px;
        height:52px;
    }

    .login-card-icon{
        width:44px;
        height:44px;
        font-size:19px;
    }

    .login-card h2{
        font-size:18px;
    }

    .login-card > p{
        font-size:12px;
    }

}

/* Tablet: gambar tetap tampil di atas (diperkecil), form di bawah */
@media (max-width:992px){

    .login-main{
        flex-direction:column;
    }

    .login-hero{
        flex:none;
        width:100%;
        height:320px;
    }

    .login-panel{
        flex:none;
        width:100%;
        max-width:500px;
        margin:0 auto;
        align-items:center;
        padding:32px 24px;
    }

    .login-card{
        max-width:460px;
    }

}

/* HP: gambar jadi banner kecil di atas, form tampil penuh tanpa jarak */
@media (max-width:768px){

    .login-hero{
        height:180px;
    }

    .login-panel{
        max-width:100%;
        padding:20px 16px;
    }

    .login-card{
        width:100%;
        max-width:100%;
        padding:24px 20px;
        border-radius:0;
        box-shadow:none;
    }

    .login-page-quest .login-hero{
        height:auto;
        padding:20px 18px 0;
    }

    .quest-hero-stage{
        min-height:160px;
    }

    .quest-mascot{
        max-height:200px;
    }

    .quest-float{
        width:40px;
    }

    .quest-hero-desc{
        font-size:12px;
    }

}

/* ===========================
   LOGIN PENGGUNA - STATQUEST REDESIGN
=========================== */

.login-page-quest{
--bps-primary:#005BAC;
--bps-primary-light:#1D7CFF;
--bps-secondary:#FFB000;
--bps-text-dark:#0D2E5C;
--bps-text-muted:#4C6079;
--bps-card-bg:rgba(255,255,255,.88);
--bps-card-radius:26px;
--bps-card-shadow:0 20px 60px rgba(0,0,0,.10);
--bps-input-bg:#EEF5FF;
background:linear-gradient(135deg,#EAF4FF 0%,#D8EBFF 30%,#B8D9FF 65%,#7FB5FF 100%);
}

.login-page-quest .login-main{
max-width:1640px;
margin:0 auto;
width:100%;
padding:22px 22px 6px;
gap:0;
align-items:stretch;
box-shadow:none;
border-radius:0;
}

.login-page-quest .login-hero{
position:relative;
z-index:0;
flex:1 1 65%;
border-radius:24px;
background:transparent;
min-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
padding:48px 40px 14px 56px;
animation:questFadeInUp .7s ease both;
}

@keyframes questFadeInUp{
from{opacity:0;transform:translateY(18px);}
to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion:reduce){
.login-page-quest .login-hero,
.login-page-quest .login-card,
.quest-hero-badge,
.quest-float{
animation:none !important;
}
}

.hero-bg-deco{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:-1;
border-radius:inherit;
}

.hero-bg-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
}

.hero-clouds{ fill:#005BAC; opacity:.06; }
.hero-building{ fill:#005BAC; opacity:.07; }
.hero-bars{ fill:#005BAC; opacity:.08; }
.hero-pie{ fill:#FFB000; opacity:.10; }
.hero-line{ stroke:#005BAC; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; opacity:.12; }
.hero-line-dot{ fill:#FFB000; opacity:.18; }

.hero-dots{
position:absolute;
top:8%;
left:0;
width:52%;
height:46%;
background-image:radial-gradient(#005BAC 1.5px, transparent 1.6px);
background-size:18px 18px;
opacity:.10;
}

.hero-blob{
position:absolute;
border-radius:50%;
filter:blur(40px);
opacity:.35;
}

.hero-blob-1{
width:280px;
height:280px;
right:-90px;
top:-60px;
background:radial-gradient(circle,#BFDBFF 0%,rgba(191,219,255,0) 70%);
}

.hero-blob-2{
width:240px;
height:240px;
left:-70px;
bottom:-50px;
background:radial-gradient(circle,#FFE3AD 0%,rgba(255,227,173,0) 70%);
}

.hero-circles{ fill:none; stroke:#005BAC; stroke-width:2.5; opacity:.14; }
.hero-shape-triangle{ fill:none; stroke:#FFB000; stroke-width:2.5; opacity:.16; }
.hero-shape-square{ fill:none; stroke:#005BAC; stroke-width:2.5; opacity:.14; }

.hero-float-circle{
position:absolute;
border-radius:50%;
border:2px solid rgba(0,91,172,.15);
pointer-events:none;
animation:questFloat 5s ease-in-out infinite;
}

.hfc-1{
width:22px;
height:22px;
top:18%;
left:8%;
animation-delay:.3s;
}

.hfc-2{
width:14px;
height:14px;
bottom:22%;
right:10%;
border-color:rgba(255,176,0,.3);
animation-delay:1.4s;
}

.quest-hero-topbar{
position:relative;
z-index:1;
align-self:flex-start;
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}

.quest-hero-topbar img{
width:80px;
height:80px;
object-fit:contain;
flex:none;
}

.quest-hero-topbar b{
display:block;
color:#0D2E5C;
font-size:18px;
letter-spacing:.3px;
}

.quest-hero-topbar span{
display:block;
color:#4C6079;
font-size:13.5px;
font-weight:600;
}

.quest-hero-badge{
position:relative;
z-index:1;
width:248px;
height:auto;
display:block;
margin-bottom:28px;
filter:drop-shadow(0 14px 22px rgba(10,30,80,.24));
animation:questBadgeFloat 4.5s ease-in-out infinite;
}

@keyframes questBadgeFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

.quest-hero-title{
position:relative;
z-index:1;
font-size:clamp(30px,3.2vw,44px);
font-weight:800;
color:#0D2E5C;
line-height:1.1;
letter-spacing:-.3px;
margin-bottom:8px;
}

.quest-hero-title span{
color:#005BAC;
}

.quest-hero-tagline{
position:relative;
z-index:1;
color:#005BAC;
font-weight:700;
font-size:17px;
letter-spacing:.2px;
margin-bottom:18px;
}

.quest-hero-desc{
position:relative;
z-index:1;
color:#33465E;
font-size:15px;
line-height:1.75;
max-width:540px;
margin-bottom:24px;
}

.quest-hero-bullets{
position:relative;
z-index:1;
list-style:none;
display:flex;
flex-wrap:wrap;
gap:12px 14px;
margin-bottom:38px;
}

.quest-hero-bullets li{
display:flex;
align-items:center;
gap:9px;
background:rgba(255,255,255,.62);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.75);
padding:9px 18px 9px 11px;
border-radius:999px;
box-shadow:0 8px 18px rgba(10,40,100,.08);
color:#0D2E5C;
font-weight:700;
font-size:13px;
transition:transform .22s ease,box-shadow .22s ease;
}

.quest-hero-bullets li:hover{
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(10,40,100,.14);
}

.quest-hero-bullets i{
width:26px;
height:26px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(160deg,#42A5F5,#1565C0);
color:#fff;
font-size:11.5px;
flex:none;
}

.quest-hero-stage{
position:relative;
z-index:1;
flex:1;
min-height:200px;
display:flex;
align-items:flex-end;
justify-content:center;
gap:8px;
padding-bottom:6px;
}

.quest-hero-stage::before{
content:"";
position:absolute;
left:50%;
bottom:4px;
transform:translateX(-50%);
width:62%;
max-width:340px;
height:28px;
background:radial-gradient(ellipse at center,rgba(20,50,120,.16) 0%,rgba(20,50,120,0) 72%);
z-index:0;
}

.quest-mascot{
position:relative;
z-index:1;
display:block;
width:auto;
height:auto;
max-height:min(468px,48vh);
max-width:50%;
object-fit:contain;
filter:drop-shadow(0 10px 10px rgba(10,30,80,.18)) drop-shadow(0 24px 22px rgba(10,30,80,.16));
}

.quest-mascot-solo{
max-width:62%;
}

.quest-float{
position:absolute;
width:56px;
height:auto;
filter:drop-shadow(0 8px 10px rgba(10,30,80,.18));
animation:questFloat 3.6s ease-in-out infinite;
}

.qf-chart{
top:-22px;
left:2%;
width:52px;
animation-delay:0s;
}

.qf-pie{
top:-34px;
left:44%;
width:50px;
animation-delay:.6s;
}

.qf-compass{
top:-22px;
right:2%;
width:54px;
animation-delay:1.2s;
}

@keyframes questFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}
}

.login-page-quest .login-panel{
flex:1 1 35%;
background:transparent;
border-radius:0;
overflow:visible;
padding:36px 56px 36px 24px;
align-items:center;
justify-content:center;
box-shadow:none;
}

.login-page-quest .login-panel::before,
.login-page-quest .login-panel::after{
display:none;
}

.login-page-quest .login-card{
max-width:480px;
width:100%;
padding:40px;
background:var(--bps-card-bg);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
box-shadow:var(--bps-card-shadow),0 0 0 1px rgba(255,255,255,.7) inset;
border-radius:var(--bps-card-radius);
animation:questFadeInUp .7s ease .15s both;
}

.quest-card-badge{
display:block;
width:104px;
height:auto;
margin:0 auto 18px;
filter:drop-shadow(0 10px 18px rgba(0,91,172,.24));
}

.quest-title-row{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
margin-bottom:14px;
}

.quest-title-row h2{
color:#0D2E5C;
font-size:19px;
margin-bottom:4px;
}

.quest-title-row p{
color:#78909C;
font-size:12px;
}

.login-page-quest .input-group{
height:56px;
border-radius:16px;
background:var(--bps-input-bg);
}

.login-page-quest .input-group:focus-within{
border-color:var(--bps-primary);
background:#fff;
box-shadow:0 0 0 4px rgba(0,91,172,.14);
}

.login-page-quest .input-group i{
color:var(--bps-primary);
}

.quest-btn-masuk{
height:56px;
border-radius:16px;
background:linear-gradient(90deg,var(--bps-primary),var(--bps-primary-light));
box-shadow:0 10px 24px rgba(0,91,172,.3);
}

.quest-btn-masuk:hover{
background:linear-gradient(90deg,#00468A,var(--bps-primary));
box-shadow:0 16px 30px rgba(0,91,172,.4);
}

.quest-google-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
height:52px;
padding:0 13px;
border:1.5px solid #E0E7EE;
border-radius:16px;
background:#fff;
color:#37474F;
font-weight:600;
font-size:14px;
cursor:pointer;
font-family:inherit;
text-decoration:none;
box-sizing:border-box;
transition:transform .18s ease,box-shadow .25s ease,border-color .2s ease,background .2s ease;
}

.quest-google-btn:hover{
background:#F7F9FC;
border-color:var(--bps-primary);
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,91,172,.14);
}

.quest-google-btn svg{
width:18px;
height:18px;
flex:none;
}

.quest-register-cta{
position:relative;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
background:linear-gradient(135deg,#EAF3FF,#F7FBFF);
border:1px solid #DCEAFB;
border-radius:18px;
padding:18px 20px;
margin-top:22px;
text-align:left;
box-shadow:0 8px 20px rgba(0,91,172,.08);
}

.quest-register-cta img{
width:66px;
height:auto;
flex:none;
filter:drop-shadow(0 6px 10px rgba(10,30,80,.15));
}

.quest-register-cta .quest-register-cta-img{
width:64px;
height:64px;
border-radius:18px;
object-fit:cover;
object-position:top center;
background:linear-gradient(160deg,#EAF3FF,#D8EAFE);
}

.quest-register-text{
flex:1;
min-width:140px;
}

.quest-register-text b{
display:block;
color:#0D2E5C;
font-size:14px;
margin-bottom:3px;
}

.quest-register-text span{
color:#5C7288;
font-size:12px;
line-height:1.45;
}

.quest-register-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:linear-gradient(90deg,#0072CE,#005BAC);
color:#fff;
font-weight:600;
font-size:12.5px;
padding:11px 16px;
border-radius:10px;
text-decoration:none;
white-space:nowrap;
flex:none;
box-shadow:0 8px 18px rgba(0,91,172,.28);
transition:transform .18s ease,box-shadow .25s ease;
}

.quest-register-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 22px rgba(0,91,172,.35);
}

.quest-bottom-strip{
background:linear-gradient(90deg,#0A1638,#132C68);
justify-content:center;
border-radius:28px 28px 0 0;
padding-top:22px;
padding-bottom:22px;
margin-top:0;
}

.quest-strip-copyright{
color:rgba(255,255,255,.65);
font-size:12.5px;
text-align:center;
flex:none;
}

.quest-strip-brand{
display:flex;
align-items:center;
gap:10px;
flex:none;
}

.quest-strip-brand img{
width:32px;
height:32px;
object-fit:contain;
}

.quest-strip-brand b{
display:block;
color:#fff;
font-size:12.5px;
letter-spacing:.5px;
}

.quest-strip-brand span{
color:rgba(255,255,255,.6);
font-size:10px;
}

/* ===========================
   FITUR STATQUEST (login pengguna)
=========================== */

.quest-features-section{
position:relative;
z-index:1;
max-width:1640px;
margin:0 auto;
padding:6px 22px 46px;
}

.quest-features-badge{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
max-width:820px;
margin:0 auto 30px;
}

.quest-features-badge::before,
.quest-features-badge::after{
content:"";
flex:1 1 40px;
height:0;
border-top:2px dashed rgba(0,91,172,.3);
}

.quest-features-badge span{
flex:none;
background:#fff;
color:var(--bps-primary,#005BAC);
font-weight:800;
font-size:12.5px;
letter-spacing:.4px;
text-transform:uppercase;
text-align:center;
padding:10px 22px;
border-radius:999px;
box-shadow:0 8px 20px rgba(0,91,172,.14);
}

.quest-features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.quest-feature-card{
background:rgba(255,255,255,.78);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border-radius:20px;
padding:26px 20px;
text-align:center;
box-shadow:0 10px 28px rgba(10,40,100,.08);
transition:transform .25s ease,box-shadow .25s ease;
}

.quest-feature-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 38px rgba(10,40,100,.14);
}

.quest-feature-icon{
width:56px;
height:56px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#fff;
margin:0 auto 16px;
}

.qfi-blue{background:linear-gradient(160deg,#42A5F5,#1565C0);}
.qfi-orange{background:linear-gradient(160deg,#FFA751,#F76B1C);}
.qfi-cyan{background:linear-gradient(160deg,#29B6F6,#0288D1);}
.qfi-gold{background:linear-gradient(160deg,#FFD54F,#F59E0B);}
.qfi-purple{background:linear-gradient(160deg,#B388FF,#7C4DFF);}
.qfi-green{background:linear-gradient(160deg,#66BB6A,#2E7D32);}
.qfi-teal{background:linear-gradient(160deg,#4DD0C4,#00897B);}

.quest-feature-card h4{
color:#0D2E5C;
font-size:15px;
margin-bottom:8px;
}

.quest-feature-card p{
color:#5C7290;
font-size:12.5px;
line-height:1.6;
}

@media (max-width:992px){
.quest-features-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:560px){
.quest-features-badge span{
font-size:11px;
padding:9px 16px;
}
.quest-features-grid{
grid-template-columns:1fr;
}
}

@media (max-width:992px){

    .login-page-quest .login-main{
        flex-direction:column;
        padding:16px;
    }

    .login-page-quest .login-hero{
        flex:none;
        height:auto;
        border-radius:24px 24px 0 0;
        padding:24px 24px 0;
    }

    .login-page-quest .login-panel{
        flex:none;
        border-radius:0 0 24px 24px;
        padding:32px 24px 28px;
        max-width:100%;
        margin:0;
    }

    .quest-hero-stage{
        min-height:220px;
    }

    .quest-mascot{
        max-height:240px;
    }

    .quest-hero-badge{
        width:172px;
        margin-bottom:14px;
    }

    .quest-hero-topbar img{
        width:56px;
        height:56px;
    }

    .login-page-quest .login-card{
        padding:32px 26px 28px;
    }

    .quest-bottom-strip{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .quest-strip-brand{
        justify-content:center;
    }

}

@media (max-width:600px){

    .quest-title-row{
        text-align:center;
        flex-direction:column;
    }

    .quest-register-cta{
        flex-direction:column;
        text-align:center;
    }

    .quest-register-text{
        text-align:center;
    }

}

/* ===========================
   DAFTAR AKUN (register.php - StatQuest redesign)
=========================== */

.register-page-quest .login-hero{
justify-content:flex-start;
}

.reg-hero-tagline{
position:relative;
z-index:1;
display:inline-block;
background:linear-gradient(135deg,#FFA751,#F76B1C);
color:#fff;
font-weight:700;
font-size:14px;
padding:8px 20px;
border-radius:999px;
margin-bottom:16px;
box-shadow:0 8px 18px rgba(247,107,28,.28);
}

.reg-hero-invite{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:9px;
max-width:540px;
color:#005BAC;
font-weight:700;
font-size:14px;
line-height:1.5;
margin-bottom:22px;
}

.reg-hero-invite i{
flex:none;
color:#FFB000;
font-size:15px;
}

.register-page-quest .quest-hero-desc{
margin-bottom:20px;
}

.register-page-quest .quest-hero-stage{
flex:none;
min-height:0;
padding-bottom:0;
margin-bottom:22px;
}

.register-page-quest .quest-mascot{
max-height:min(300px,30vh);
}

.reg-feature-card{
position:relative;
z-index:1;
width:100%;
align-self:stretch;
background:rgba(255,255,255,.85);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border-radius:22px;
padding:22px 20px;
box-shadow:0 14px 34px rgba(10,40,100,.1);
margin-bottom:18px;
}

.reg-feature-card-title{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
color:#0D2E5C;
font-weight:800;
font-size:14px;
text-align:center;
margin-bottom:16px;
}

.reg-feature-card-title::before,
.reg-feature-card-title::after{
content:"";
flex:1 1 24px;
height:0;
border-top:2px dashed rgba(0,91,172,.25);
}

.reg-feature-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
}

.reg-feature-item{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
text-align:center;
padding:10px 4px;
border-radius:14px;
transition:transform .22s ease,background .22s ease;
}

.reg-feature-item:hover{
transform:translateY(-4px);
background:#F3F8FF;
}

.reg-feature-item .quest-feature-icon{
width:44px;
height:44px;
border-radius:14px;
font-size:17px;
margin:0;
}

.reg-feature-item span:last-child{
font-size:11px;
font-weight:700;
color:#33465E;
line-height:1.3;
}

.reg-banner{
position:relative;
z-index:1;
width:100%;
align-self:stretch;
display:flex;
align-items:center;
gap:16px;
background:linear-gradient(90deg,#1565C0,#3949AB);
border-radius:20px;
padding:16px 22px;
box-shadow:0 12px 28px rgba(21,101,192,.28);
}

.reg-banner-icon{
width:46px;
height:46px;
border-radius:50%;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.3);
display:flex;
align-items:center;
justify-content:center;
color:#FFD54F;
font-size:19px;
flex:none;
}

.reg-banner-text b{
display:block;
color:#fff;
font-size:14px;
margin-bottom:2px;
}

.reg-banner-text span{
color:rgba(255,255,255,.85);
font-size:12.5px;
}

.register-page-quest .quest-card-badge{
width:132px;
}

.register-page-quest .quest-btn-masuk{
background:linear-gradient(90deg,#1565C0,#7C4DFF);
box-shadow:0 10px 24px rgba(101,60,220,.3);
}

.register-page-quest .quest-btn-masuk:hover{
background:linear-gradient(90deg,#0D4A9E,#6A3FD1);
box-shadow:0 16px 30px rgba(101,60,220,.4);
}

@media (max-width:1200px){
.reg-feature-grid{
grid-template-columns:repeat(3,1fr);
}
}

@media (max-width:600px){
.reg-feature-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* ===========================
   LUPA PASSWORD / VERIFIKASI OTP / RESET
=========================== */

.otp-info-box{
display:flex;
align-items:flex-start;
gap:12px;
background:#EAF4FE;
border:1px solid #BBDEFB;
border-radius:14px;
padding:14px 16px;
margin-bottom:18px;
text-align:left;
}

.otp-info-box i{
color:#1565C0;
font-size:16px;
margin-top:2px;
flex:none;
}

.otp-info-box b{
display:block;
color:#0D2E5C;
font-size:13px;
margin-bottom:2px;
}

.otp-info-box span{
color:#5C7288;
font-size:12px;
line-height:1.4;
}

.otp-boxes{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:18px;
}

.otp-box{
width:100%;
max-width:52px;
height:60px;
text-align:center;
font-size:24px;
font-weight:800;
color:#0D2E5C;
background:#F5F7FA;
border:1.5px solid transparent;
border-radius:14px;
transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.otp-box:focus{
outline:none;
border-color:#005BAC;
background:#fff;
box-shadow:0 0 0 4px rgba(0,91,172,.12);
}

.otp-timer{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
color:#455A64;
font-weight:600;
font-size:13px;
margin-bottom:18px;
}

.otp-timer i{
color:#1565C0;
}

.otp-timer #otpCountdown{
color:#005BAC;
font-weight:800;
}

.otp-timer #otpCountdown.otp-expired{
color:#E53935;
}

.otp-resend-row{
margin-top:14px;
}

.otp-resend-btn{
background:none;
border:none;
color:#1565C0;
font-weight:700;
font-size:13.5px;
cursor:pointer;
font-family:inherit;
padding:0;
}

.otp-resend-btn:hover:not(:disabled){
text-decoration:underline;
}

.otp-resend-btn:disabled{
color:#B0BEC5;
cursor:not-allowed;
}

.reset-success-card{
text-align:center;
}

.reset-success-icon{
display:flex;
align-items:center;
justify-content:center;
width:88px;
height:88px;
margin:0 auto 20px;
border-radius:50%;
background:linear-gradient(135deg,#81D186,#2E7D32);
color:#fff;
font-size:44px;
box-shadow:0 14px 28px rgba(46,125,50,.28);
}

.reset-success-card h2{
color:#0D2E5C;
margin-bottom:10px;
}

.reset-success-desc{
color:#5C7288;
font-size:13.5px;
line-height:1.6;
margin-bottom:24px;
}

.reset-success-card a.btn-masuk{
text-decoration:none;
}

.quest-title-with-mascot{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:52px;
}

.quest-title-with-mascot .quest-hero-title,
.quest-title-with-mascot .quest-hero-tagline{
margin-bottom:0;
}

.quest-hero-title-mascot{
position:relative;
left:170px;
width:168px;
height:auto;
flex:none;
object-fit:contain;
filter:drop-shadow(0 12px 18px rgba(10,30,80,.24));
animation:questBadgeFloat 4.5s ease-in-out infinite;
}

.quest-title-with-mascot + .quest-hero-desc{
margin-top:-64px;
}

@media (max-width:600px){
.quest-title-with-mascot{
gap:16px;
}
.quest-hero-title-mascot{
width:100px;
left:14px;
}
.quest-title-with-mascot + .quest-hero-desc{
margin-top:0;
}
}

@media (max-width:600px){
.otp-box{
max-width:44px;
height:52px;
font-size:20px;
}
.otp-boxes{
gap:7px;
}
}