/* =========================================================
   WMiNET Cyber Login - Centered & Softer
========================================================= */

:root{
    --wmi-red:#ef3b35;
    --wmi-red-dark:#b30000;
    --wmi-blue:#1f7ad1;
    --wmi-dark:#0b1220;
    --text-light:#f8fafc;
    --text-soft:#cbd5e1;
    --glass-bg:rgba(15,23,42,.62);
    --glass-border:rgba(255,255,255,.16);
}

html, body{
    width:100%;
    min-height:100%;
}

body{
    margin:0 !important;
    min-height:100vh !important;
    padding:20px !important;
    display:grid !important;
    place-items:center !important;
    font-family:"Poppins","Segoe UI",sans-serif;
    background:
        linear-gradient(rgba(6,11,24,.58), rgba(6,11,24,.58)),
        url("/static/img/bg-cyber2.png") center center / cover no-repeat fixed !important;
    position:relative;
    overflow:hidden;
}

/* glow overlay */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 18%, rgba(239,59,53,.20), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(31,122,209,.18), transparent 28%),
        radial-gradient(circle at 55% 90%, rgba(0,191,232,.10), transparent 30%);
    z-index:0;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.03) 52%, transparent 80%);
    z-index:0;
}

/* wrapper utama */
.login-shell{
    width:min(100%, 460px) !important;
    max-width:460px !important;
    min-height:auto !important;
    margin:0 auto !important;
    border-radius:30px !important;
    overflow:hidden;
    display:block !important;
    background:var(--glass-bg) !important;
    border:1px solid var(--glass-border) !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter:blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(145%) !important;
    position:relative;
    z-index:2;
}

/* sembunyikan sisi kiri lama */
.brand-side{
    display:none !important;
}

/* panel form */
.form-side{
    width:100% !important;
    padding:42px 34px 32px !important;
    background:transparent !important;
    color:#fff !important;
    position:relative;
}

.form-card{
    width:100%;
    max-width:none !important;
    padding:0 !important;
}

.form-card::before,
.form-card::after{
    display:none !important;
    content:none !important;
}

.form-card h2{
    text-align:center;
    font-size:34px !important;
    line-height:1.15;
    font-weight:800 !important;
    color:#ffffff !important;
    letter-spacing:-1px;
    margin:0 0 8px !important;
}

.subtitle{
    text-align:center;
    color:var(--text-soft) !important;
    font-size:15px;
    margin:0 0 28px !important;
}

/* form */
.form-group{
    margin-bottom:18px !important;
}

.form-group label{
    display:block;
    color:#ffffff !important;
    font-size:14px;
    font-weight:700 !important;
    margin-bottom:9px;
}

.form-group input{
    width:100%;
    height:56px !important;
    padding:0 18px !important;
    border-radius:18px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:rgba(255,255,255,.12) !important;
    color:#ffffff !important;
    font-size:16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 22px rgba(0,0,0,.10);
    outline:none;
}

.form-group input::placeholder{
    color:rgba(255,255,255,.62) !important;
}

.form-group input:focus{
    border-color:rgba(255,255,255,.34) !important;
    background:rgba(255,255,255,.16) !important;
    box-shadow:
        0 0 0 4px rgba(255,255,255,.08),
        0 14px 30px rgba(0,0,0,.16) !important;
}

.password-wrap{
    position:relative;
}

.toggle-password{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none !important;
    background:transparent !important;
    color:#ffffff !important;
    box-shadow:none !important;
}

/* lupa password */
.forgot{
    text-align:center;
    margin:6px 0 22px;
}

.forgot a{
    color:#ffffff !important;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}

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

/* button */
.login-btn{
    width:100%;
    height:56px !important;
    border:none !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#ffffff,#eef2f7) !important;
    color:#111827 !important;
    font-size:18px !important;
    font-weight:800 !important;
    box-shadow:
        0 14px 34px rgba(255,255,255,.14) !important;
    transition:.25s ease;
    cursor:pointer;
}

.login-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 20px 40px rgba(255,255,255,.18) !important;
}

.login-btn:active{
    transform:translateY(1px) scale(.99);
}

.footer-note{
    text-align:center;
    color:rgba(255,255,255,.72) !important;
    font-size:13px;
    margin-top:18px !important;
}

/* flash */
.alert,
.flash,
.flash-message{
    border-radius:14px !important;
    background:rgba(239,68,68,.18) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    backdrop-filter:blur(10px);
}

/* animasi */
.login-shell{
    animation:loginRise .65s cubic-bezier(.16,1,.3,1) both;
}

@keyframes loginRise{
    from{
        opacity:0;
        transform:translateY(14px) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* mobile */
@media(max-width:480px){
    body{
        padding:14px !important;
    }

    .login-shell{
        width:100% !important;
        border-radius:24px !important;
    }

    .form-side{
        padding:34px 22px 26px !important;
    }

    .form-card h2{
        font-size:30px !important;
    }

    .subtitle{
        font-size:14px;
    }

    .form-group input,
    .login-btn{
        height:52px !important;
    }
}