body{
    overflow-x:hidden;
    background:
        #020b12
        url('/assets/images/login-cosmic-bg.png')
        center center / cover
        no-repeat
        fixed;
}

body:before{
    display:none;
}

.login-page{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px 18px;
}

.login-page:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at center,
            rgba(0,8,14,.02) 0%,
            rgba(0,8,14,.08) 45%,
            rgba(0,8,14,.18) 100%
        );
}

/* background sudah ada bulan */
.cosmic-moon{
    display:none;
}

.login-shell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:440px;
}

/* BRAND */

.login-brand{
    text-align:center;
    margin-bottom:18px;
}

.logo-mark{
    width:56px;
    height:56px;
    margin:0 auto 14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    color:#021017;
    font-size:14px;
    font-weight:950;

    background:
        linear-gradient(
            135deg,
            #44e9b7,
            #61caff
        );

    box-shadow:
        0 0 18px rgba(53,239,182,.28),
        0 0 34px rgba(73,194,255,.17);
}

.login-brand h1{
    margin:0;

    font-size:32px;
    font-weight:900;

    letter-spacing:1.7px;
}

.login-brand p{
    margin:7px 0 0;

    color:#a7bac6;

    font-size:9px;
    letter-spacing:3.3px;
}

/* OUTER BOX */

.login-card{
    position:relative;

    padding:28px 26px 25px;

    border:2px solid transparent;
    border-radius:20px;

    background:
        linear-gradient(
            rgba(3,17,25,.91),
            rgba(2,13,20,.94)
        ) padding-box,

        linear-gradient(
            105deg,
            #40efad 0%,
            #4fe4d5 48%,
            #5bc6ff 100%
        ) border-box;

    box-shadow:
        -6px 0 22px rgba(46,239,170,.14),
        6px 0 23px rgba(70,190,255,.15),
        0 14px 42px rgba(0,0,0,.38);
}

.login-card:before{
    display:none;
}

.login-card h2{
    margin:0 0 25px;

    text-align:center;

    color:#f8fbff;

    font-size:21px;
    font-weight:850;
    line-height:1.2;

    text-shadow:
        0 2px 12px rgba(255,255,255,.07);
}

/* INPUT */

.input-neon{
    position:relative;

    width:100%;
    height:53px;

    margin-bottom:17px;

    display:flex;
    align-items:center;

    border:2px solid transparent;
    border-radius:13px;

    background:
        linear-gradient(
            rgba(2,15,23,.97),
            rgba(2,15,23,.97)
        ) padding-box,

        linear-gradient(
            100deg,
            #46ffb5 0%,
            #50efdc 48%,
            #58c9ff 100%
        ) border-box;

    box-shadow:
        -7px 0 17px rgba(44,255,171,.28),
        7px 0 18px rgba(63,195,255,.31),
        0 0 14px rgba(57,235,207,.18);

    transition:.2s ease;
}

.input-neon:focus-within{
    transform:translateY(-1px);

    box-shadow:
        -8px 0 24px rgba(44,255,171,.39),
        8px 0 25px rgba(63,195,255,.42),
        0 0 20px rgba(57,235,207,.28);
}

.input-icon{
    width:55px;
    height:29px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-right:
        1px solid rgba(143,220,231,.42);
}

.input-icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:#45efbd;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
        drop-shadow(0 0 5px rgba(54,240,192,.27));
}

.input-neon input{
    width:100%;
    height:100%;

    padding:0 15px;

    border:0;
    outline:0;

    background:transparent;

    color:#f4fbff;

    font-size:14px;
    font-weight:500;
}

.input-neon input::placeholder{
    color:#a7bdcc;
    opacity:1;
}

/* TURNSTILE */

.turnstile-wrap{
    min-height:65px;

    margin:20px 0 17px;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* BUTTON */

.login-button{
    position:relative;

    width:100%;
    height:51px;

    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:12px;

    cursor:pointer;

    background:
        linear-gradient(
            100deg,
            #48ebb0 0%,
            #52ded7 48%,
            #59c5ff 100%
        );

    color:#021119;

    font-size:14px;
    font-weight:950;
    letter-spacing:.9px;

    box-shadow:
        -7px 0 18px rgba(55,241,174,.18),
        7px 0 19px rgba(66,190,255,.19);

    transition:.2s ease;
}

.login-button:hover{
    transform:translateY(-2px);

    box-shadow:
        -8px 0 24px rgba(55,241,174,.28),
        8px 0 25px rgba(66,190,255,.29);
}

.login-arrow{
    position:absolute;
    right:24%;
    font-size:21px;
    font-weight:500;
}

/* ERROR */

.alert{
    margin:0 0 18px;

    padding:11px 13px;

    border-radius:10px;

    border:
        1px solid rgba(228,63,82,.42);

    background:
        rgba(228,63,82,.11);

    color:#ffc4cb;

    text-align:center;

    font-size:12px;
}

/* FOOTER */

.login-footer{
    margin-top:17px;

    text-align:center;

    color:#647b88;

    font-size:9px;
    letter-spacing:1.8px;
}

/* MOBILE */

@media(max-width:520px){

    .login-page{
        padding:20px 14px;
    }

    .login-shell{
        max-width:390px;
    }

    .logo-mark{
        width:50px;
        height:50px;
    }

    .login-brand h1{
        font-size:28px;
    }

    .login-card{
        padding:24px 19px 22px;
    }

    .login-card h2{
        font-size:19px;
        margin-bottom:22px;
    }

    .input-neon{
        height:51px;
    }

    .input-icon{
        width:50px;
    }

    .input-neon input{
        font-size:13px;
        padding:0 12px;
    }

    .login-button{
        height:49px;
    }

    .login-arrow{
        right:16%;
    }
}

/* =========================
   PREMIUM TUNING - FINAL
   ========================= */

/* background sedikit lebih kalem */
.login-page:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(2,10,16,.10) 0%,
            rgba(2,10,16,.18) 45%,
            rgba(2,10,16,.28) 100%
        ),
        radial-gradient(
            circle at center,
            rgba(0,0,0,.03) 0%,
            rgba(0,0,0,.12) 48%,
            rgba(0,0,0,.22) 100%
        );
    z-index:0;
}

/* biar isi tetap di atas overlay */
.login-shell,
.login-brand,
.login-card,
.login-footer{
    position:relative;
    z-index:2;
}

/* panel login dibuat lebih mahal dan lebih jelas */
.login-card{
    background:rgba(5,15,24,.62) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(115,241,231,.52) !important;

    box-shadow:
        0 0 18px rgba(64,235,197,.14),
        0 0 28px rgba(102,197,255,.10),
        inset 0 0 18px rgba(255,255,255,.015) !important;
}

/* judul dalam panel lebih presisi */
.login-card h2,
.login-card .login-title{
    text-align:center !important;
    letter-spacing:.3px;
    text-shadow:0 0 10px rgba(255,255,255,.10);
}

/* glow input dibuat lebih kalem tapi tetap mewah */
.login-card input,
.login-card .field,
.login-card .input-wrap,
.login-card .input-box{
    border-color:rgba(83,235,206,.78) !important;
    box-shadow:
        0 0 10px rgba(53,233,190,.16),
        0 0 14px rgba(101,197,255,.12) !important;
}

/* focus tetap hidup tapi gak norak */
.login-card input:focus{
    border-color:rgba(112,243,255,.90) !important;
    box-shadow:
        0 0 12px rgba(70,239,210,.22),
        0 0 18px rgba(102,197,255,.16) !important;
}

/* placeholder sedikit lebih lembut */
.login-card input::placeholder{
    color:rgba(216,238,245,.72) !important;
}

/* tombol tetap menonjol tapi lebih rapi */
.login-card button,
.login-card .login-btn,
.login-card .submit-btn{
    box-shadow:
        0 0 16px rgba(75,235,196,.18),
        0 0 24px rgba(104,198,255,.14) !important;
}

/* footer bawah jangan terlalu terang */
.login-footer{
    opacity:.78;
}

/* turnstile agak nyatu */
.cf-turnstile{
    filter:brightness(.93) saturate(.93);
}

/* ==========================================
   FINAL LOGIN BUTTON + TURNSTILE TUNING
   ========================================== */

.login-button{
    font-size:17px !important;
    font-weight:950 !important;
    letter-spacing:2px !important;
}

.login-button span{
    display:block;
    width:100%;
    text-align:center;
}

.login-arrow{
    display:none !important;
}

/* Jangan tambah box kedua di luar Turnstile */
.turnstile-wrap{
    width:100%;
    margin:19px 0 19px !important;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Sedikit gelapkan widget Cloudflare agar lebih menyatu */
.turnstile-wrap .cf-turnstile{
    display:flex;
    justify-content:center;

    filter:
        brightness(.84)
        saturate(.88);

    border-radius:12px;
    overflow:hidden;
}

/* ==========================================
   TURNSTILE CLEAN PREMIUM
   ========================================== */

.turnstile-wrap{
    width:100%;
    min-height:0 !important;
    height:auto !important;

    margin:14px 0 18px !important;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.turnstile-wrap .cf-turnstile{
    filter:none !important;
    border-radius:12px;
    overflow:hidden;
}

/* ==========================================
   TURNSTILE POSITION FINAL
   ========================================== */

.turnstile-wrap{
    width:100% !important;
    min-height:65px !important;

    margin:18px 0 19px !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.turnstile-wrap .cf-turnstile{
    margin:0 auto !important;
    padding:0 !important;

    display:block !important;
    width:max-content !important;
    max-width:100% !important;

    border:0 !important;
    box-shadow:none !important;
}

.turnstile-wrap iframe{
    display:block !important;
    margin:0 auto !important;
}