:root{
    --dk-blue:#103c9f;
    --dk-blue-dark:#092c79;
    --dk-blue-soft:#506a9d;
    --dk-gold:#f3bf42;
    --dk-line:#dce5f3;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body.premium-login-body{
    background:#f4f6fa !important;
    color:var(--dk-blue-dark);
    overflow-x:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.premium-login-shell{
    width:100%;
    min-height:100vh;
    display:block !important;
    background:transparent !important;
}

.dk-login-page{
    position:relative;
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    overflow:hidden;

    background-color:#fff;
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}

.dk-login-container{
    position:relative;
    z-index:2;
    width:100%;
    padding:18px 16px 85px;
}


/* =========================
   BRAND
========================= */

.dk-brand{
    min-height:66px;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.dk-logo{
    width:64px;
    height:64px;
    min-width:64px;

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

    overflow:hidden;
    border-radius:50%;

    background:#fff;
}

.dk-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.dk-brand-info{
    min-width:0;
    flex:1;
}

.dk-brand-info h1{
    margin:0;

    color:var(--dk-blue);
    font-size:23px;
    line-height:1.05;
    font-weight:800;

    letter-spacing:-.5px;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.dk-market{
    margin-top:6px;

    display:flex;
    align-items:center;
    gap:7px;
}

.dk-market>span{
    width:11px;
    height:11px;
    flex:0 0 11px;

    border-radius:50%;

    background:#19c96b;

    box-shadow:
        0 0 0 4px rgba(25,201,107,.12);
}

.dk-market p{
    margin:0;

    color:#58709d;

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


/* =========================
   BANNER
========================= */

.dk-banner{
    width:100%;
    height:122px;

    margin-bottom:12px;

    overflow:hidden;

    border-radius:22px;

    background:#eef3fa;
}

.dk-banner img{
    width:100%;
    height:100%;
    display:block;

    object-fit:cover;
}


/* =========================
   CARD
========================= */

.dk-login-card{
    position:relative;
    z-index:2;

    width:100%;

    padding:18px;

    background:rgba(255,255,255,.96);

    border:1px solid #e4eaf3;

    border-radius:24px;

    box-shadow:
        0 8px 28px rgba(27,60,118,.06);
}

.dk-heading{
    margin-bottom:15px;
}

.dk-heading h2{
    margin:0;

    color:#0b347e;

    font-size:24px;
    line-height:1.1;
    font-weight:800;

    letter-spacing:-.4px;
}

.dk-heading p{
    margin:6px 0 0;

    color:#5c719b;

    font-size:13.5px;
    line-height:1.4;
}


/* =========================
   INPUT
========================= */

.dk-input-box{
    width:100%;
    height:54px;

    margin-top:10px;

    padding:0 13px;

    display:flex;
    align-items:center;
    gap:9px;

    background:#fff;

    border:1px solid var(--dk-line);

    border-radius:16px;

    transition:border-color .18s ease,
               box-shadow .18s ease;
}

.dk-input-box:focus-within{
    border-color:#8eaee9;

    box-shadow:
        0 0 0 3px rgba(29,91,211,.06);
}

.dk-input-icon{
    width:27px;

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

    color:#173f8d;

    flex-shrink:0;
}

.dk-input-box input{
    min-width:0;
    flex:1;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#17366f !important;

    font-size:15px !important;
    font-weight:500;
    line-height:1 !important;

    padding:0 !important;

    box-shadow:none !important;
}

.dk-input-box input::placeholder{
    color:#96a5c1 !important;
    opacity:1;
}

.dk-eye{
    width:34px;
    height:34px;

    padding:0;

    border:0;
    outline:0;

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

    background:transparent;

    color:#133e8d;
}


/* =========================
   OPTIONS
========================= */

.dk-options{
    margin-top:12px;

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

    gap:10px;
}

.dk-remember{
    display:flex;
    align-items:center;
    gap:7px;

    color:#526993;

    font-size:12.5px;
    font-weight:500;

    cursor:pointer;
}

.dk-remember input{
    display:none;
}

.dk-checkbox{
    width:21px;
    height:21px;

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

    border-radius:6px;

    color:white;

    background:linear-gradient(
        135deg,
        #2369d9,
        #174ba8
    );
}

.dk-remember input:not(:checked) + .dk-checkbox{
    background:white;

    border:1px solid #cad6e8;

    color:transparent;
}

.dk-options>a{
    color:#1558ce;

    font-size:12.5px;
    font-weight:600;

    text-decoration:none;
}


/* =========================
   BUTTON
========================= */

.dk-login-button{
    position:relative;

    width:100%;
    height:56px;

    margin-top:14px;

    padding:0 7px 0 50px;

    border:1.5px solid #efc653;

    border-radius:18px;

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

    overflow:hidden;

    background:
        linear-gradient(
            120deg,
            #176fe0 0%,
            #0c46a9 35%,
            #082f81 100%
        );

    color:white;

    box-shadow:
        0 7px 18px rgba(18,67,151,.16);
}

.dk-login-button>span{
    font-size:19px;
    font-weight:800;
}

.dk-login-button>b{
    position:absolute;

    right:5px;

    width:44px;
    height:44px;

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

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            #ffe494,
            #eaae30
        );

    color:#0d357d;

    font-weight:400;
}


/* =========================
   REGISTER
========================= */

.dk-register{
    margin-top:14px;

    text-align:center;

    color:#5c719b;

    font-size:13px;
}

.dk-register>a{
    color:#1558ce;

    font-weight:700;

    text-decoration:none;
}


/* =========================
   BOTTOM IMAGE
========================= */

.dk-bottom-image{
    position:absolute;

    z-index:1;

    left:0;
    right:0;
    bottom:0;

    width:100%;

    pointer-events:none;
}

.dk-bottom-image img{
    width:100%;
    max-height:115px;

    display:block;

    object-fit:cover;
    object-position:center bottom;
}


/* =========================
   SMALL PHONE
========================= */

@media(max-width:380px){

    .dk-login-container{
        padding:
            14px
            13px
            75px;
    }

    .dk-brand{
        min-height:58px;
    }

    .dk-logo{
        width:56px;
        height:56px;
        min-width:56px;
    }

    .dk-brand-info h1{
        font-size:20px;
    }

    .dk-banner{
        height:108px;
        border-radius:18px;
    }

    .dk-login-card{
        padding:15px;
        border-radius:20px;
    }

    .dk-heading h2{
        font-size:22px;
    }

    .dk-heading p{
        font-size:12.5px;
    }

    .dk-input-box{
        height:50px;
    }

    .dk-login-button{
        height:52px;
    }

}


/* =========================
   HAPUS STYLE AUTH LAMA
========================= */

.wrapper.auth,
.wrapper.auth>div,
.wrapper.auth>div>.form,
.wrapper.auth>div>.form>.title,
.wrapper.auth>div>.form>.body,
.wrapper.auth>div>.form>.footer{
    all:unset;
}

/* ==================================================
   LOGIN CARD - CORNER IMAGE DESIGN
================================================== */

.dk-login-card{
    position:relative !important;
    overflow:hidden !important;
    padding:20px 18px 18px !important;
    background:#fff !important;
    border:1px solid #e5ebf4 !important;
    border-radius:24px !important;
    box-shadow:0 10px 30px rgba(20,50,110,.07) !important;
}

.dk-card-brand{
    position:relative;
    z-index:3;
    padding-right:118px;
    margin-bottom:15px;
}

.dk-card-kicker{
    margin:0 0 3px;
    color:#d5a438;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.dk-card-brand h2{
    margin:0;
    color:#0b347e;
    font-size:24px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.4px;
}

.dk-card-brand>span{
    display:block;
    width:40px;
    height:3px;
    margin:7px 0;
    border-radius:999px;
    background:linear-gradient(90deg,#0b4db4,#efbd49);
}

.dk-card-brand>p:last-child{
    margin:0;
    max-width:180px;
    color:#66799b;
    font-size:12.5px;
    line-height:1.4;
}

/* GAMBAR UPLOAD ADMIN DI SUDUT KANAN ATAS */
.dk-card-banner{
    position:absolute;
    top:-6px;
    right:-8px;
    width:135px;
    height:108px;
    z-index:1;
    pointer-events:none;
}

.dk-card-banner img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:right top;
}

/* FORM HARUS TETAP DI ATAS GAMBAR */
.dk-input-box,
.dk-options,
.dk-login-button,
.dk-register{
    position:relative;
    z-index:3;
}

/* SEMBUNYIKAN BANNER LAMA JIKA MASIH ADA DI LUAR CARD */
.dk-login-container > .dk-banner{
    display:none !important;
}

@media(max-width:380px){
    .dk-card-brand{
        padding-right:100px;
    }

    .dk-card-banner{
        width:115px;
        height:95px;
    }

    .dk-card-brand h2{
        font-size:22px;
    }
}

/* ===== PERBESAR GAMBAR SUDUT LOGIN ===== */

.dk-card-banner{
    top:-18px !important;
    right:-24px !important;

    width:205px !important;
    height:155px !important;

    overflow:visible !important;
    z-index:1 !important;
}

.dk-card-banner img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:right top !important;

    transform:scale(1.08);
    transform-origin:top right;

    display:block !important;
}

/* beri ruang agar tulisan tidak tertutup gambar */
.dk-card-brand{
    padding-right:145px !important;
}

/* layar kecil */
@media(max-width:380px){
    .dk-card-banner{
        width:175px !important;
        height:135px !important;
        right:-20px !important;
        top:-15px !important;
    }

    .dk-card-brand{
        padding-right:125px !important;
    }
}

/* =================================
   SOCIAL LOGIN DI BAWAH CARD
================================= */

.dk-social-login{
    position:relative;
    z-index:3;

    width:100%;

    margin-top:14px;

    padding:0 8px;
}

.dk-social-title{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    margin-bottom:12px;
}

.dk-social-title>span{
    height:1px;
    flex:1;

    background:#dfe6f1;
}

.dk-social-title>p{
    margin:0;

    color:#7585a4;

    font-size:12px;
    font-weight:500;

    white-space:nowrap;
}

.dk-social-icons{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;
}

.dk-social-btn{
    width:46px;
    height:46px;

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

    background:#fff;

    border:1px solid #e4e9f2;
    border-radius:14px;

    text-decoration:none;

    box-shadow:
        0 5px 14px rgba(25,54,110,.07);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.dk-social-btn:active{
    transform:scale(.95);
}

.dk-social-btn:hover{
    box-shadow:
        0 7px 18px rgba(25,54,110,.11);
}

/* supaya halaman tetap rapat */
.dk-login-container{
    padding-bottom:70px !important;
}

@media(max-width:380px){

    .dk-social-login{
        margin-top:11px;
    }

    .dk-social-icons{
        gap:10px;
    }

    .dk-social-btn{
        width:42px;
        height:42px;
        border-radius:13px;
    }
}

/* ==================================================
   REGISTER - SAME DESIGN AS LOGIN
================================================== */

.dk-register-page .dk-login-container{
    padding-top:14px !important;
    padding-bottom:62px !important;
}

.dk-register-page .dk-brand{
    margin-bottom:9px !important;
}

.dk-register-page .dk-login-card{
    padding:17px 16px 16px !important;
}

.dk-register-heading{
    margin-bottom:12px !important;
    padding-right:135px !important;
}

.dk-register-heading h2{
    font-size:23px !important;
}

.dk-register-heading>p:last-child{
    max-width:165px !important;
    font-size:12px !important;
    line-height:1.3 !important;
}


/* GAMBAR SUDUT REGISTER */
.dk-register-banner{
    width:185px !important;
    height:142px !important;

    top:-14px !important;
    right:-17px !important;
}

.dk-register-banner img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:right top !important;

    transform:scale(1.05);
    transform-origin:top right;
}


/* INPUT REGISTER LEBIH RAPAT */
.dk-register-card .dk-input-box{
    height:50px !important;
    min-height:50px !important;

    margin-top:8px !important;

    border-radius:15px !important;
}

.dk-register-card .dk-input-box input{
    font-size:14px !important;
}


/* COUNTRY */
.dk-phone-box select{
    width:58px;

    flex:0 0 58px;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#173f8d !important;

    font-size:13px !important;
    font-weight:700;

    padding:0 5px 0 0;

    border-right:1px solid #dce5f3 !important;
}


/* CAPTCHA */
.dk-captcha-box{
    padding-right:6px !important;
}

.dk-captcha-code{
    min-width:73px;
    height:38px;

    padding:0 10px;

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

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #eef4ff,
            #fff7df
        );

    color:#123b8e;

    font-size:17px;
    font-weight:800;

    letter-spacing:3px;

    user-select:none;
}


/* TOMBOL REGISTER */
.dk-register-card .dk-login-button{
    height:53px !important;

    margin-top:11px !important;

    border-radius:17px !important;
}

.dk-register-card .dk-login-button>span{
    font-size:18px !important;
}

.dk-register-card .dk-login-button>b{
    width:41px !important;
    height:41px !important;
}


/* LOGIN LINK */
.dk-register-card .dk-register{
    margin-top:11px !important;
}


/* SOCIAL */
.dk-register-page .dk-social-login{
    margin-top:10px !important;
}


/* MOBILE KECIL */
@media(max-width:380px){

    .dk-register-page .dk-logo{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
    }

    .dk-register-page .dk-brand-info h1{
        font-size:19px !important;
    }

    .dk-register-heading{
        padding-right:112px !important;
    }

    .dk-register-banner{
        width:155px !important;
        height:120px !important;
    }

    .dk-register-card{
        padding:
            14px
            13px
            14px !important;
    }

    .dk-register-card .dk-input-box{
        height:47px !important;
        min-height:47px !important;
    }
}

/* ==================================================
   REGISTER BODY = LOGIN BODY
================================================== */

.dk-register-page{
    width:100% !important;
    min-height:100svh !important;

    /* ikuti background/body login */
    background-size:cover !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
}

/* posisi utama sama seperti login */
.dk-register-page .dk-login-container{
    width:100% !important;
    max-width:430px !important;

    margin:0 auto !important;

    /* gunakan jarak login, bukan layout register lama */
    padding-top:inherit;
}

/* HEADER REGISTER PERSIS LOGIN */
.dk-register-page .dk-brand{
    width:100% !important;
}

/* LOGO REGISTER PERSIS LOGIN */
.dk-register-page .dk-logo{
    flex-shrink:0;
}

.dk-register-page .dk-logo img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
}

/* NAMA APLIKASI PERSIS LOGIN */
.dk-register-page .dk-brand-info{
    min-width:0;
}

/* CARD TETAP REGISTER,
   TAPI POSISI / LEBARNYA MENGIKUTI LOGIN */
.dk-register-page .dk-login-card{
    width:100% !important;
}

/* SOCIAL POSISI SAMA LOGIN */
.dk-register-page .dk-social-login{
    width:100% !important;
}

/* GAMBAR BAWAH POSISI SAMA LOGIN */
.dk-register-page .dk-bottom-image{
    pointer-events:none;
}

.dk-register-page .dk-bottom-image img{
    object-fit:contain;
}

/* ===============================================
   NOMOR INDONESIA +62
=============================================== */

.dk-id-prefix{
    flex:0 0 auto;

    padding-right:10px;
    margin-right:8px;

    border-right:1px solid #dce5f2;

    color:#123f91;

    font-size:14px;
    font-weight:800;
    line-height:20px;
}

.dk-phone-box select{
    color:#123f91 !important;
    font-weight:800 !important;
}


/* ==========================================================
   AUTH THEME TOGGLE
   MODE ASLI + MODE GELAP
========================================================== */

.dk-theme-toggle{
    position:fixed;

    top:18px;
    right:18px;

    width:45px;
    height:45px;

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

    padding:0;

    border:1px solid rgba(21,66,145,.10);
    border-radius:15px;

    background:rgba(255,255,255,.92);

    color:#123f91;

    box-shadow:
        0 7px 22px rgba(17,49,105,.10);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    cursor:pointer;

    z-index:999;
}

.dk-theme-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.dk-theme-moon{
    display:none;
}


/* ==========================================================
   DARK MODE
========================================================== */

html.dk-dark-mode,
html.dk-dark-mode body{
    background:#050b16 !important;
}


/* BODY */
html.dk-dark-mode .dk-login-page{
    background-color:#07101f !important;
}


/* BACKGROUND IMAGE AGAR TIDAK TERLALU TERANG */
html.dk-dark-mode .dk-login-page::after{
    content:"";

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(3,9,20,.50),
            rgba(4,11,25,.78)
        );

    pointer-events:none;

    z-index:0;
}

html.dk-dark-mode .dk-login-container{
    position:relative;
    z-index:2;
}


/* TOGGLE */
html.dk-dark-mode .dk-theme-toggle{
    background:rgba(11,24,45,.94);

    border-color:rgba(85,135,230,.20);

    color:#f0bd4e;

    box-shadow:
        0 7px 24px rgba(0,0,0,.30);
}

html.dk-dark-mode .dk-theme-sun{
    display:none;
}

html.dk-dark-mode .dk-theme-moon{
    display:flex;
}


/* BRAND */
html.dk-dark-mode .dk-brand-info h1{
    color:#f4f7ff !important;
}

html.dk-dark-mode .dk-market p{
    color:#aebbd2 !important;
}


/* CARD LOGIN / REGISTER */
html.dk-dark-mode .dk-login-card{
    background:
        linear-gradient(
            145deg,
            rgba(13,27,52,.96),
            rgba(7,18,37,.97)
        ) !important;

    border-color:rgba(87,126,194,.17) !important;

    box-shadow:
        0 16px 42px rgba(0,0,0,.30) !important;
}


/* JUDUL */
html.dk-dark-mode .dk-heading h2,
html.dk-dark-mode .dk-card-brand h2{
    color:#f5f7ff !important;
}

html.dk-dark-mode .dk-heading p,
html.dk-dark-mode .dk-card-brand>p:last-child{
    color:#9caac2 !important;
}

html.dk-dark-mode .dk-card-kicker{
    color:#e7b94e !important;
}


/* INPUT */
html.dk-dark-mode .dk-input-box{
    background:#0b1830 !important;

    border-color:rgba(101,139,203,.18) !important;

    box-shadow:none !important;
}

html.dk-dark-mode .dk-input-box input{
    color:#f5f7ff !important;
    background:transparent !important;
}

html.dk-dark-mode .dk-input-box input::placeholder{
    color:#72819e !important;
}

html.dk-dark-mode .dk-input-icon,
html.dk-dark-mode .dk-eye{
    color:#78a6ff !important;
}


/* +62 */
html.dk-dark-mode .dk-id-prefix{
    color:#83adff !important;
    border-right-color:rgba(111,145,202,.25) !important;
}

html.dk-dark-mode .dk-phone-box select{
    color:#83adff !important;
    border-right-color:rgba(111,145,202,.25) !important;
}


/* OPTIONS */
html.dk-dark-mode .dk-options,
html.dk-dark-mode .dk-remember{
    color:#a7b4ca !important;
}

html.dk-dark-mode .dk-options a{
    color:#76a5ff !important;
}


/* CAPTCHA */
html.dk-dark-mode .dk-captcha-code{
    background:
        linear-gradient(
            135deg,
            rgba(37,78,151,.32),
            rgba(176,128,32,.18)
        ) !important;

    color:#f0c45e !important;

    border:1px solid rgba(238,190,76,.14);
}


/* REGISTER / LOGIN LINK */
html.dk-dark-mode .dk-register{
    color:#9eabc1 !important;
}

html.dk-dark-mode .dk-register a{
    color:#78a7ff !important;
}


/* SOCIAL TITLE */
html.dk-dark-mode .dk-social-title p{
    color:#8f9db5 !important;
}

html.dk-dark-mode .dk-social-title span{
    background:rgba(135,157,196,.20) !important;
}


/* SOCIAL BUTTON */
html.dk-dark-mode .dk-social-btn{
    background:#0c1930 !important;

    border-color:rgba(101,139,203,.18) !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.18) !important;
}


/* GAMBAR SUDUT TETAP TERANG */
html.dk-dark-mode .dk-card-banner{
    opacity:.92;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:480px){

    .dk-theme-toggle{
        position:absolute;

        top:13px;
        right:13px;

        width:41px;
        height:41px;

        border-radius:13px;
    }

}


/* =========================================================
   FULL AUTH THEME
   NORMAL / DARK
========================================================= */


/* -----------------------------------------
   SWITCHER
----------------------------------------- */

.dk-theme-switcher{
    position:relative;
    z-index:50;

    width:max-content;
    max-width:calc(100% - 28px);

    margin:13px auto 2px;

    padding:4px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;

    background:rgba(255,255,255,.92);

    border:1px solid rgba(26,67,137,.10);
    border-radius:15px;

    box-shadow:
        0 6px 20px rgba(25,54,105,.08);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.dk-theme-option{
    height:34px;

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

    gap:5px;

    padding:0 11px;

    border:0;
    border-radius:11px;

    background:transparent;

    color:#72809a;

    font-size:11px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.dk-theme-option.active{
    background:#123f91;
    color:#fff;

    box-shadow:
        0 4px 10px rgba(18,63,145,.20);
}


/* =========================================================
   MODE NORMAL
========================================================= */

html[data-auth-theme="light"] body{
    background:#fff !important;
}

html[data-auth-theme="light"] .dk-login-page{
    color:#1b2d50;
}

html[data-auth-theme="light"] .dk-theme-switcher{
    background:rgba(255,255,255,.94);
}

html[data-auth-theme="light"] .dk-theme-option.active{
    background:
        linear-gradient(
            135deg,
            #0d47a1,
            #164fb1
        );

    color:#fff;
}


/* =========================================================
   MODE GELAP - SELURUH HALAMAN
========================================================= */

html[data-auth-theme="dark"],
html[data-auth-theme="dark"] body{
    background:#040913 !important;
    color:#eef4ff !important;
}


/* BACKGROUND UTAMA */
html[data-auth-theme="dark"] .premium-login-body,
html[data-auth-theme="dark"] .premium-login-shell,
html[data-auth-theme="dark"] .wrapper,
html[data-auth-theme="dark"] .wrapper.auth{
    background:#040913 !important;
}


/* BODY LOGIN / REGISTER */
html[data-auth-theme="dark"] .dk-login-page{
    background-color:#050d1b !important;

    background-blend-mode:
        multiply !important;

    color:#eef4ff !important;
}


/* LAPISAN GELAP UNTUK BACKGROUND IMAGE */
html[data-auth-theme="dark"] .dk-login-page::after{
    content:"";

    position:fixed;
    inset:0;

    z-index:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(3,8,18,.58),
            rgba(2,7,16,.84)
        );
}


/* KONTEN TETAP DI ATAS OVERLAY */
html[data-auth-theme="dark"] .dk-login-container{
    position:relative;
    z-index:3;
}


/* SWITCHER */
html[data-auth-theme="dark"] .dk-theme-switcher{
    background:rgba(8,20,39,.94);

    border-color:rgba(102,141,207,.18);

    box-shadow:
        0 8px 24px rgba(0,0,0,.28);
}

html[data-auth-theme="dark"] .dk-theme-option{
    color:#8999b5;
}

html[data-auth-theme="dark"] .dk-theme-option.active{
    background:
        linear-gradient(
            135deg,
            #c99831,
            #efc05b
        );

    color:#091327;

    box-shadow:
        0 4px 13px rgba(225,176,65,.17);
}


/* HEADER */
html[data-auth-theme="dark"] .dk-brand{
    color:#fff !important;
}

html[data-auth-theme="dark"] .dk-brand-info h1{
    color:#f7f9ff !important;
}

html[data-auth-theme="dark"] .dk-market p{
    color:#a5b2c8 !important;
}

html[data-auth-theme="dark"] .dk-market span{
    box-shadow:
        0 0 0 4px rgba(38,194,129,.12);
}


/* LOGO CONTAINER JIKA ADA BACKGROUND PUTIH */
html[data-auth-theme="dark"] .dk-logo{
    background:rgba(255,255,255,.05) !important;

    border-color:rgba(255,255,255,.08) !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.20) !important;
}


/* CARD LOGIN + REGISTER */
html[data-auth-theme="dark"] .dk-login-card{
    background:
        linear-gradient(
            145deg,
            rgba(12,27,52,.97),
            rgba(6,17,35,.98)
        ) !important;

    border-color:
        rgba(102,143,214,.17) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.32) !important;
}


/* JUDUL LOGIN */
html[data-auth-theme="dark"] .dk-heading h2,
html[data-auth-theme="dark"] .dk-card-brand h2{
    color:#f5f8ff !important;
}

html[data-auth-theme="dark"] .dk-heading p,
html[data-auth-theme="dark"] .dk-card-brand>p:last-child{
    color:#9baac2 !important;
}

html[data-auth-theme="dark"] .dk-card-kicker{
    color:#e8b84d !important;
}


/* GARIS EMAS BIRU */
html[data-auth-theme="dark"] .dk-card-brand>span{
    background:
        linear-gradient(
            90deg,
            #4f85e8,
            #edbd53
        ) !important;
}


/* INPUT */
html[data-auth-theme="dark"] .dk-input-box{
    background:#0a1830 !important;

    border-color:
        rgba(102,143,214,.18) !important;

    box-shadow:none !important;
}

html[data-auth-theme="dark"] .dk-input-box:focus-within{
    border-color:#557fca !important;

    box-shadow:
        0 0 0 3px
        rgba(64,110,196,.10) !important;
}

html[data-auth-theme="dark"] .dk-input-box input{
    background:transparent !important;

    color:#f1f5ff !important;
}

html[data-auth-theme="dark"] .dk-input-box input::placeholder{
    color:#6f7f9d !important;
}


/* ICON INPUT */
html[data-auth-theme="dark"] .dk-input-icon,
html[data-auth-theme="dark"] .dk-eye{
    color:#78a5f7 !important;
}


/* NOMOR +62 */
html[data-auth-theme="dark"] .dk-id-prefix{
    color:#81aafd !important;

    border-right-color:
        rgba(112,147,207,.24) !important;
}

html[data-auth-theme="dark"] .dk-phone-box select{
    color:#81aafd !important;

    background:#0a1830 !important;

    border-right-color:
        rgba(112,147,207,.24) !important;
}


/* OPTIONS */
html[data-auth-theme="dark"] .dk-options,
html[data-auth-theme="dark"] .dk-remember{
    color:#a1aec3 !important;
}

html[data-auth-theme="dark"] .dk-options a{
    color:#78a8ff !important;
}


/* CHECKBOX */
html[data-auth-theme="dark"] .dk-checkbox{
    border-color:
        rgba(120,163,239,.45) !important;

    background:#0a1830 !important;
}


/* BUTTON UTAMA */
html[data-auth-theme="dark"] .dk-login-button{
    background:
        linear-gradient(
            100deg,
            #174a9e,
            #1b5cc4
        ) !important;

    box-shadow:
        0 9px 22px
        rgba(21,73,162,.24) !important;
}

html[data-auth-theme="dark"] .dk-login-button b{
    background:#dfad43 !important;

    color:#0a1a37 !important;
}


/* REGISTER LINK */
html[data-auth-theme="dark"] .dk-register{
    color:#9ba8bd !important;
}

html[data-auth-theme="dark"] .dk-register a{
    color:#80abff !important;
}


/* CAPTCHA */
html[data-auth-theme="dark"] .dk-captcha-code{
    background:
        linear-gradient(
            135deg,
            rgba(47,84,150,.30),
            rgba(190,139,40,.18)
        ) !important;

    color:#f0c45c !important;

    border:
        1px solid rgba(233,185,75,.13);
}


/* SOCIAL */
html[data-auth-theme="dark"] .dk-social-title p{
    color:#8290a8 !important;
}

html[data-auth-theme="dark"] .dk-social-title span{
    background:
        rgba(125,150,192,.19) !important;
}

html[data-auth-theme="dark"] .dk-social-btn{
    background:#0a1830 !important;

    border-color:
        rgba(101,139,203,.18) !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.20) !important;
}


/* GAMBAR SUDUT */
html[data-auth-theme="dark"] .dk-card-banner{
    opacity:.90;
}


/* GAMBAR BAWAH */
html[data-auth-theme="dark"] .dk-bottom-image{
    opacity:.70;
}


/* MODAL / ALERT JIKA MUNCUL */
html[data-auth-theme="dark"] .modal-content{
    background:#0b1930 !important;
    color:#eef3ff !important;
}


/* MOBILE */
@media(max-width:480px){

    .dk-theme-switcher{
        margin-top:10px;
    }

    .dk-theme-option{
        height:32px;

        padding:0 9px;

        font-size:10.5px;
    }

}