/* ============================================================
   INCEPTION AUTH UNIFIED V1
   LOGIN IS THE MASTER VISUAL
   ============================================================ */


/* ============================================================
   MASTER PALETTE
   Exact palette dari LOGIN production:
   BLUE : #2142ad -> #2e65bf
   RED  : #d94f50 -> #ef6b60
   ============================================================ */

:root{
    --inc-auth-blue-a:#2142ad;
    --inc-auth-blue-b:#2e65bf;

    --inc-auth-red-a:#d94f50;
    --inc-auth-red-b:#ef6b60;

    --inc-auth-title:#18213a;
    --inc-auth-label:#36405b;
    --inc-auth-muted:#747d94;
    --inc-auth-placeholder:#98a2b7;

    --inc-auth-border:#d9deea;
    --inc-auth-input:#fbfcff;

    --inc-auth-button-blue:#416fd8;
    --inc-auth-button-red:#f46b61;
}


/* ============================================================
   REGISTER DESKTOP
   COPY LOGIN'S 50 / 50 VISUAL LANGUAGE
   ============================================================ */

@media (min-width:761px){

    body.inception-register-v50-active{
        margin:0!important;

        background:
            linear-gradient(
                135deg,
                var(--inc-auth-red-a),
                var(--inc-auth-red-b)
            )!important;
    }


    .v50-auth-shell,
    .v50-auth{
        width:100%!important;
        min-width:100%!important;

        min-height:100vh!important;

        margin:0!important;
        padding:0!important;

        display:grid!important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr)!important;

        background:none!important;
    }


    /* ========================================================
       LEFT = LOGIN BLUE
       ======================================================== */

    .v50-auth-brand{
        position:relative!important;

        width:100%!important;
        min-width:0!important;

        min-height:100vh!important;

        display:grid!important;
        place-items:center!important;

        margin:0!important;
        padding:0!important;

        overflow:hidden!important;

        background:
            linear-gradient(
                135deg,
                var(--inc-auth-blue-a) 0%,
                var(--inc-auth-blue-b) 100%
            )!important;

        color:#ffffff!important;
    }


    /* subtle circle mengikuti Login */

    .v50-auth-brand::before{
        content:""!important;

        position:absolute!important;

        top:62px!important;
        left:42px!important;

        width:112px!important;
        height:112px!important;

        border-radius:999px!important;

        background:
            rgba(255,255,255,.13)!important;

        pointer-events:none!important;
    }


    .v50-auth-brand::after{
        content:""!important;

        position:absolute!important;

        right:-45px!important;
        bottom:-45px!important;

        width:125px!important;
        height:125px!important;

        border-radius:999px!important;

        background:
            rgba(255,255,255,.07)!important;

        pointer-events:none!important;
    }


    /* ========================================================
       REGISTER BRAND CONTENT =
       SAME VISUAL PROPORTION AS LOGIN
       ======================================================== */

    .v50-brand-inner{
        position:relative!important;

        z-index:2!important;

        width:min(
            430px,
            70%
        )!important;

        margin:0 auto!important;
        padding:0!important;

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

        text-align:center!important;

        color:#ffffff!important;

        transform:
            translateY(-3px)!important;
    }


    .v50-brand-logo{
        width:auto!important;
        height:auto!important;

        margin:
            0
            0
            58px!important;

        padding:0!important;

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


    .v50-big-logo{
        display:block!important;

        width:90px!important;
        height:90px!important;

        min-width:90px!important;
        min-height:90px!important;
        max-width:90px!important;
        max-height:90px!important;

        margin:0 auto!important;
        padding:0!important;

        object-fit:contain!important;

        background:none!important;
        border:0!important;

        filter:
            drop-shadow(
                0
                9px
                20px
                rgba(12,30,80,.10)
            )!important;
    }


    .v50-brand-inner > small{
        display:block!important;

        margin:
            0
            0
            20px!important;

        padding:0!important;

        color:
            rgba(255,255,255,.88)!important;

        font-family:
            "IBM Plex Mono",
            ui-monospace,
            monospace!important;

        font-size:11px!important;
        line-height:1!important;

        font-weight:800!important;

        letter-spacing:.18em!important;

        text-transform:uppercase!important;
    }


    .v50-brand-inner h2{
        width:100%!important;

        margin:
            0
            0
            23px!important;

        padding:0!important;

        color:#ffffff!important;

        font-family:
            Inter,
            Arial,
            sans-serif!important;

        font-size:
            clamp(
                48px,
                4vw,
                62px
            )!important;

        line-height:.99!important;

        font-weight:800!important;

        letter-spacing:-.045em!important;

        text-align:center!important;
    }


    .v50-brand-inner p{
        width:min(
            365px,
            100%
        )!important;

        margin:
            0
            auto!important;

        padding:0!important;

        color:
            rgba(255,255,255,.91)!important;

        font-family:
            Inter,
            Arial,
            sans-serif!important;

        font-size:15px!important;
        line-height:1.72!important;

        font-weight:500!important;

        text-align:center!important;
    }


    .v50-brand-line{
        width:76px!important;
        height:3px!important;

        min-height:3px!important;

        margin:
            28px
            auto
            0!important;

        border:0!important;
        border-radius:999px!important;

        background:
            linear-gradient(
                90deg,
                #91bcff 0 50%,
                #ff8b82 50% 100%
            )!important;

        overflow:hidden!important;
    }


    /* hilangkan dekorasi lama yang berbeda
       jika masih ada */

    .v50-brand-line::before,
    .v50-brand-line::after{
        display:none!important;
    }


    /* ========================================================
       RIGHT = LOGIN RED
       ======================================================== */

    .v50-auth-form{
        position:relative!important;

        width:100%!important;
        min-width:0!important;

        min-height:100vh!important;

        display:flex!important;

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

        margin:0!important;

        padding:
            38px
            46px!important;

        background:
            linear-gradient(
                135deg,
                var(--inc-auth-red-a) 0%,
                var(--inc-auth-red-b) 100%
            )!important;

        overflow-y:auto!important;
    }


    .v50-auth-form::after{
        content:""!important;

        position:fixed!important;

        right:55px!important;
        bottom:67px!important;

        width:90px!important;
        height:90px!important;

        border-radius:999px!important;

        background:
            rgba(255,255,255,.10)!important;

        pointer-events:none!important;
    }

}


/* ============================================================
   REGISTER WHITE CARD
   ============================================================ */

.v50-card{
    position:relative!important;

    z-index:2!important;

    background:#ffffff!important;

    border:
        1px solid
        rgba(255,255,255,.75)!important;

    box-shadow:
        0
        24px
        58px
        rgba(92,50,61,.17)!important;
}


/* ============================================================
   REGISTER TYPOGRAPHY
   LOGIN = MASTER
   ============================================================ */

.v50-card h1,
.v50-card h2,
.v50-card h3{
    color:
        var(--inc-auth-title)!important;

    font-family:
        Inter,
        Arial,
        sans-serif!important;

    font-weight:800!important;
}


.v50-card p{
    color:
        var(--inc-auth-muted)!important;
}


.v50-card-head small,
.v50-kicker{
    color:#668ef0!important;
}


/* ============================================================
   SEMUA FIELD JADI SATU WARNA.
   Tidak ada lagi label biru-merah-ungu bergantian.
   ============================================================ */

.v50-card .v50-field > span,
.v50-card label > span,
.v50-card .v50-label{
    color:
        var(--inc-auth-label)!important;

    font-size:12px!important;

    font-weight:700!important;
}


/* override tone lama */

.v50-card
[class*="tone-blue"] > span,

.v50-card
[class*="tone-coral"] > span,

.v50-card
[class*="tone-purple"] > span,

.v50-card
[class*="tone-red"] > span,

.v50-card
[class*="tone"] .v50-label{
    color:
        var(--inc-auth-label)!important;
}


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

.v50-card input:not([type="checkbox"]):not([type="radio"]),
.v50-card textarea,
.v50-card select{
    border:
        1px solid
        var(--inc-auth-border)!important;

    background:
        var(--inc-auth-input)!important;

    color:
        var(--inc-auth-title)!important;

    box-shadow:none!important;

    font-family:
        Inter,
        Arial,
        sans-serif!important;

    font-size:13px!important;

    font-weight:600!important;
}


.v50-card
input:not([type="checkbox"]):not([type="radio"]):focus,

.v50-card textarea:focus,
.v50-card select:focus{
    border-color:
        #668ef0!important;

    background:
        #ffffff!important;

    outline:none!important;

    box-shadow:
        0
        0
        0
        3px
        rgba(102,142,240,.10)!important;
}


.v50-card input::placeholder,
.v50-card textarea::placeholder{
    color:
        var(--inc-auth-placeholder)!important;

    opacity:1!important;

    font-weight:500!important;
}


/* ============================================================
   SEARCH / DROPDOWN
   ============================================================ */

.v50-searchable,
.v50-select-shell{
    color:
        var(--inc-auth-title)!important;
}


.v50-search-menu{
    border:
        1px solid
        var(--inc-auth-border)!important;

    background:#ffffff!important;

    box-shadow:
        0
        16px
        36px
        rgba(42,53,84,.13)!important;
}


.v50-menu-item{
    color:
        var(--inc-auth-label)!important;

    background:#ffffff!important;
}


.v50-menu-item:hover,
.v50-menu-item.active{
    color:#3869d2!important;

    background:#f3f6ff!important;
}


/* ============================================================
   3 STEP TABS
   ============================================================ */

.v50-steps button,
.v50-step{
    border-color:
        var(--inc-auth-border)!important;

    background:#ffffff!important;

    color:
        #747d94!important;

    font-weight:700!important;
}


.v50-steps button.active,
.v50-step.active{
    border-color:transparent!important;

    color:#ffffff!important;

    background:
        linear-gradient(
            90deg,
            var(--inc-auth-button-blue),
            var(--inc-auth-button-red)
        )!important;
}


/* ============================================================
   PRIMARY BUTTON = LOGIN BUTTON
   ============================================================ */

.v50-btn.primary,
.v50-card button.primary,
#v50-next1,
#v50-next-member{
    border:0!important;

    color:#ffffff!important;

    background:
        linear-gradient(
            90deg,
            var(--inc-auth-button-blue),
            var(--inc-auth-button-red)
        )!important;

    box-shadow:none!important;

    font-weight:700!important;
}


.v50-btn.primary:hover,
.v50-card button.primary:hover,
#v50-next1:hover,
#v50-next-member:hover{
    filter:
        brightness(1.025)!important;

    transform:
        translateY(-1px);
}


/* secondary */

.v50-btn.secondary{
    border:
        1px solid
        var(--inc-auth-border)!important;

    background:#ffffff!important;

    color:#3869d2!important;

    font-weight:700!important;
}


/* ============================================================
   TOP "Kembali ke Login"
   ============================================================ */

.v50-back-login,
.v50-auth-form a[href="/login"]{
    color:#3869d2!important;

    font-weight:700!important;
}


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

@media (max-width:760px){

    body.inception-register-v50-active{
        background:#ffffff!important;
    }


    .v50-auth-shell,
    .v50-auth{
        display:block!important;

        min-height:100vh!important;
    }


    .v50-auth-brand{
        display:none!important;
    }


    .v50-auth-form{
        width:100%!important;

        min-height:100vh!important;

        padding:
            18px
            14px
            30px!important;

        background:#ffffff!important;
    }


    .v50-auth-form::after{
        display:none!important;
    }

}


/* ============================================================
   INCEPTION AUTH LAYOUT LOCK V2
   FIX REGISTER STACKING BUG
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:761px){


    /*
     * Browser page sendiri TIDAK BOLEH scroll.
     */

    body.inception-register-v50-active{
        margin:0!important;
        padding:0!important;

        width:100vw!important;
        height:100vh!important;

        min-width:100vw!important;
        min-height:100vh!important;

        overflow:hidden!important;

        background:#d94f50!important;
    }


    /*
     * Host register selalu satu viewport.
     */

    #inception-register-v50-host{
        position:fixed!important;

        inset:0!important;

        z-index:999!important;

        display:block!important;

        width:100vw!important;
        height:100vh!important;

        min-width:100vw!important;
        min-height:100vh!important;
        max-width:100vw!important;
        max-height:100vh!important;

        margin:0!important;
        padding:0!important;

        overflow:hidden!important;

        background:transparent!important;
    }


    /*
     * Wrapper apa pun di dalam host tidak boleh
     * membuat layout vertikal lagi.
     */

    #inception-register-v50-host
    .v50-auth-shell,

    #inception-register-v50-host
    .v50-auth{
        position:static!important;

        display:block!important;

        width:100%!important;
        height:100%!important;

        min-width:0!important;
        min-height:0!important;

        margin:0!important;
        padding:0!important;

        overflow:visible!important;

        background:none!important;
    }


    /* ========================================================
       LEFT PANEL
       SELALU 50% VIEWPORT
       ======================================================== */

    #inception-register-v50-host
    .v50-auth-brand{

        position:fixed!important;

        top:0!important;
        left:0!important;
        right:auto!important;
        bottom:0!important;

        z-index:1!important;

        display:flex!important;

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

        width:50vw!important;
        height:100vh!important;

        min-width:50vw!important;
        max-width:50vw!important;

        min-height:100vh!important;
        max-height:100vh!important;

        margin:0!important;
        padding:0!important;

        overflow:hidden!important;

        background:
            linear-gradient(
                135deg,
                #2142ad 0%,
                #2e65bf 100%
            )!important;

        transform:none!important;
    }


    /* circle kiri */

    #inception-register-v50-host
    .v50-auth-brand::before{
        content:""!important;

        position:absolute!important;

        top:61px!important;
        left:42px!important;

        width:112px!important;
        height:112px!important;

        border-radius:50%!important;

        background:
            rgba(255,255,255,.13)!important;
    }


    /* ========================================================
       LEFT CONTENT
       MATCH LOGIN COMPOSITION
       ======================================================== */

    #inception-register-v50-host
    .v50-brand-inner{

        position:relative!important;

        top:auto!important;
        left:auto!important;

        z-index:2!important;

        width:430px!important;
        max-width:68%!important;

        height:auto!important;

        margin:0 auto!important;
        padding:0!important;

        display:flex!important;

        flex-direction:column!important;

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

        text-align:center!important;

        transform:none!important;
    }


    #inception-register-v50-host
    .v50-brand-logo{
        display:block!important;

        width:auto!important;
        height:auto!important;

        margin:
            0
            0
            58px!important;

        padding:0!important;

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


    #inception-register-v50-host
    .v50-big-logo{
        display:block!important;

        width:90px!important;
        height:90px!important;

        min-width:90px!important;
        min-height:90px!important;
        max-width:90px!important;
        max-height:90px!important;

        margin:0 auto!important;
        padding:0!important;

        object-fit:contain!important;

        border:0!important;
        background:none!important;

        transform:none!important;
    }


    #inception-register-v50-host
    .v50-brand-inner > small{

        margin:
            0
            0
            20px!important;

        padding:0!important;

        color:
            rgba(255,255,255,.88)!important;

        font-size:11px!important;
        line-height:1!important;

        font-weight:800!important;

        letter-spacing:.18em!important;
    }


    #inception-register-v50-host
    .v50-brand-inner h2{

        width:100%!important;

        margin:
            0
            0
            23px!important;

        padding:0!important;

        color:#fff!important;

        font-size:
            clamp(
                48px,
                4vw,
                62px
            )!important;

        line-height:.99!important;

        letter-spacing:-.045em!important;

        font-weight:800!important;

        text-align:center!important;
    }


    #inception-register-v50-host
    .v50-brand-inner p{

        width:365px!important;
        max-width:100%!important;

        margin:0 auto!important;

        padding:0!important;

        color:
            rgba(255,255,255,.91)!important;

        font-size:15px!important;

        line-height:1.72!important;

        font-weight:500!important;

        text-align:center!important;
    }


    #inception-register-v50-host
    .v50-brand-line{

        width:76px!important;
        height:3px!important;

        min-height:3px!important;

        margin:
            28px
            auto
            0!important;

        border-radius:999px!important;

        background:
            linear-gradient(
                90deg,
                #91bcff 0 50%,
                #ff8b82 50% 100%
            )!important;
    }


    /* ========================================================
       RIGHT PANEL
       SELALU 50% VIEWPORT
       ======================================================== */

    #inception-register-v50-host
    .v50-auth-form{

        position:fixed!important;

        top:0!important;
        left:50vw!important;
        right:0!important;
        bottom:0!important;

        z-index:2!important;

        width:50vw!important;
        height:100vh!important;

        min-width:50vw!important;
        max-width:50vw!important;

        min-height:100vh!important;
        max-height:100vh!important;

        margin:0!important;

        padding:
            28px
            42px!important;

        display:flex!important;

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

        box-sizing:border-box!important;

        overflow-x:hidden!important;
        overflow-y:auto!important;

        overscroll-behavior:contain!important;

        background:
            linear-gradient(
                135deg,
                #d94f50 0%,
                #ef6b60 100%
            )!important;

        transform:none!important;
    }


    /*
     * Right decorative circle
     */

    #inception-register-v50-host
    .v50-auth-form::after{

        content:""!important;

        position:fixed!important;

        right:54px!important;
        bottom:67px!important;

        width:90px!important;
        height:90px!important;

        border-radius:50%!important;

        background:
            rgba(255,255,255,.10)!important;

        pointer-events:none!important;
    }


    /* ========================================================
       CARD
       Tidak memenuhi seluruh panel merah.
       ======================================================== */

    #inception-register-v50-host
    .v50-card{

        position:relative!important;

        z-index:4!important;

        width:
            min(
                690px,
                calc(50vw - 70px)
            )!important;

        max-width:
            calc(50vw - 70px)!important;

        min-width:0!important;

        height:auto!important;

        max-height:
            calc(100vh - 46px)!important;

        margin:auto!important;

        padding:
            25px
            28px!important;

        box-sizing:border-box!important;

        overflow-x:visible!important;
        overflow-y:auto!important;

        border-radius:21px!important;

        background:#fff!important;

        box-shadow:
            0
            24px
            58px
            rgba(92,50,61,.17)!important;
    }


    /*
     * Scrollbar card disembunyikan,
     * tetapi tetap bisa scroll pada monitor pendek.
     */

    #inception-register-v50-host
    .v50-card{
        scrollbar-width:none!important;
    }


    #inception-register-v50-host
    .v50-card::-webkit-scrollbar{
        display:none!important;
    }


    /*
     * Panel merah tidak memperlihatkan scrollbar.
     */

    #inception-register-v50-host
    .v50-auth-form{
        scrollbar-width:none!important;
    }


    #inception-register-v50-host
    .v50-auth-form::-webkit-scrollbar{
        display:none!important;
    }

}


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

@media (max-width:760px){

    body.inception-register-v50-active{
        overflow-x:hidden!important;
        overflow-y:auto!important;
    }


    #inception-register-v50-host{
        position:relative!important;

        width:100%!important;
        height:auto!important;

        min-height:100vh!important;

        overflow:visible!important;
    }


    #inception-register-v50-host
    .v50-auth-brand{
        display:none!important;
    }


    #inception-register-v50-host
    .v50-auth-form{
        position:relative!important;

        inset:auto!important;

        width:100%!important;
        height:auto!important;

        min-width:100%!important;
        max-width:100%!important;

        min-height:100vh!important;
        max-height:none!important;

        padding:
            18px
            14px
            28px!important;

        overflow:visible!important;

        background:#fff!important;
    }


    #inception-register-v50-host
    .v50-card{
        width:100%!important;
        max-width:100%!important;
        max-height:none!important;

        margin:0!important;

        padding:
            20px
            16px!important;

        border-radius:18px!important;

        overflow:visible!important;
    }

}


/* ============================================================
   INCEPTION AUTH UX V3
   LOGIN = MASTER COMPOSITION
   REGISTER UI/UX ONLY
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:761px){


    /* --------------------------------------------------------
       LEFT BRAND
       dibuat mengikuti posisi visual LOGIN
       -------------------------------------------------------- */

    #inception-register-v50-host
    .v50-auth-brand{
        position:fixed!important;

        inset:
            0
            auto
            0
            0!important;

        width:50vw!important;
        height:100vh!important;

        display:block!important;

        overflow:hidden!important;
    }


    /*
     * Jangan lagi mengandalkan flex spacing lama.
     * Setiap bagian brand punya posisi yang stabil.
     */

    #inception-register-v50-host
    .v50-brand-inner{
        position:static!important;

        display:block!important;

        width:auto!important;
        max-width:none!important;

        height:auto!important;

        margin:0!important;
        padding:0!important;

        transform:none!important;

        text-align:center!important;
    }


    /* LOGO:
       posisi dibuat sama seperti halaman login */

    #inception-register-v50-host
    .v50-brand-logo{
        position:absolute!important;

        top:32.5%!important;
        left:50%!important;

        width:90px!important;
        height:90px!important;

        margin:0!important;
        padding:0!important;

        transform:
            translate(
                -50%,
                -50%
            )!important;

        border:0!important;
        background:none!important;

        box-shadow:none!important;
    }


    #inception-register-v50-host
    .v50-big-logo{
        width:90px!important;
        height:90px!important;

        min-width:90px!important;
        min-height:90px!important;

        max-width:90px!important;
        max-height:90px!important;

        display:block!important;

        margin:0!important;
        padding:0!important;

        object-fit:contain!important;

        transform:none!important;
    }


    /* INCEPTION VOL. 2 · 2026 */

    #inception-register-v50-host
    .v50-brand-inner > small{
        position:absolute!important;

        top:45.8%!important;
        left:0!important;

        width:100%!important;

        margin:0!important;

        color:
            rgba(
                255,
                255,
                255,
                .88
            )!important;

        font-size:11px!important;

        line-height:1!important;

        font-weight:800!important;

        letter-spacing:.18em!important;

        text-align:center!important;
    }


    /* Welcome to INCEPTION */

    #inception-register-v50-host
    .v50-brand-inner h2{
        position:absolute!important;

        top:49.7%!important;
        left:50%!important;

        width:470px!important;
        max-width:70%!important;

        margin:0!important;
        padding:0!important;

        transform:
            translateX(
                -50%
            )!important;

        color:#fff!important;

        font-size:60px!important;
        line-height:1.02!important;

        font-weight:800!important;

        letter-spacing:
            -.045em!important;

        text-align:center!important;
    }


    /* Deskripsi dibuat selebar LOGIN,
       jadi kembali rapi menjadi ±3 baris */

    #inception-register-v50-host
    .v50-brand-inner p{
        position:absolute!important;

        top:65.6%!important;
        left:50%!important;

        width:335px!important;
        max-width:68%!important;

        margin:0!important;
        padding:0!important;

        transform:
            translateX(
                -50%
            )!important;

        color:
            rgba(
                255,
                255,
                255,
                .91
            )!important;

        font-size:15px!important;

        line-height:1.72!important;

        font-weight:500!important;

        text-align:center!important;
    }


    /* garis kecil */

    #inception-register-v50-host
    .v50-brand-line{
        position:absolute!important;

        top:76.6%!important;
        left:50%!important;

        width:76px!important;
        height:3px!important;

        margin:0!important;

        transform:
            translateX(
                -50%
            )!important;

        border-radius:999px!important;

        background:
            linear-gradient(
                90deg,
                #91bcff 0 50%,
                #ff8b82 50% 100%
            )!important;
    }



    /* ========================================================
       RIGHT PANEL
       ======================================================== */

    #inception-register-v50-host
    .v50-auth-form{
        position:fixed!important;

        top:0!important;
        right:0!important;
        bottom:0!important;
        left:50vw!important;

        width:50vw!important;
        height:100vh!important;

        padding:
            32px
            48px!important;

        display:flex!important;

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

        overflow:hidden!important;

        box-sizing:border-box!important;
    }



    /* ========================================================
       OUTER REGISTER CARD
       Lebih kecil, centered, seimbang dengan login.
       ======================================================== */


    /*
     * Kalau shell memiliki wrapper di luar .v50-card
     */

    #inception-register-v50-host
    .v50-auth-form
    > :has(.v50-card){

        width:
            min(
                720px,
                calc(50vw - 112px)
            )!important;

        max-width:
            min(
                720px,
                calc(50vw - 112px)
            )!important;

        max-height:
            calc(
                100vh - 64px
            )!important;

        margin:auto!important;

        padding:
            24px
            28px
            22px!important;

        box-sizing:border-box!important;

        overflow-y:auto!important;
        overflow-x:visible!important;

        scrollbar-width:none!important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .78
            )!important;

        border-radius:24px!important;

        background:#fff!important;

        box-shadow:
            0
            24px
            58px
            rgba(
                83,
                45,
                55,
                .16
            )!important;
    }


    #inception-register-v50-host
    .v50-auth-form
    > :has(.v50-card)
    ::-webkit-scrollbar{
        display:none!important;
    }



    /*
     * Hilangkan visual CARD DI DALAM CARD.
     *
     * Inner .v50-card sekarang hanya menjadi
     * content container.
     */

    #inception-register-v50-host
    .v50-auth-form
    > :has(.v50-card)
    .v50-card{

        width:100%!important;
        max-width:none!important;

        height:auto!important;
        max-height:none!important;

        margin:
            18px
            0
            0!important;

        padding:0!important;

        overflow:visible!important;

        border:0!important;
        border-radius:0!important;

        background:transparent!important;

        box-shadow:none!important;
    }



    /*
     * Fallback bila .v50-card ternyata
     * langsung anak panel kanan.
     */

    #inception-register-v50-host
    .v50-auth-form
    > .v50-card{

        width:
            min(
                720px,
                calc(50vw - 112px)
            )!important;

        max-width:
            min(
                720px,
                calc(50vw - 112px)
            )!important;

        max-height:
            calc(
                100vh - 64px
            )!important;

        margin:auto!important;

        padding:
            24px
            28px
            22px!important;

        overflow-y:auto!important;

        border-radius:24px!important;

        background:#fff!important;

        box-shadow:
            0
            24px
            58px
            rgba(
                83,
                45,
                55,
                .16
            )!important;
    }



    /* ========================================================
       HEADER
       ======================================================== */

    #inception-register-v50-host
    .v50-auth-form h1{

        margin:
            7px
            0
            5px!important;

        color:#202a43!important;

        font-size:38px!important;
        line-height:1.05!important;

        font-weight:800!important;

        letter-spacing:
            -.035em!important;

        text-align:center!important;
    }


    #inception-register-v50-host
    .v50-auth-form
    h1 + p{

        margin:
            0
            0
            18px!important;

        color:#747d92!important;

        font-size:12px!important;
        line-height:1.5!important;

        font-weight:600!important;

        text-align:center!important;
    }



    /* badge PENDAFTARAN PESERTA */

    #inception-register-v50-host
    .v50-kicker,

    #inception-register-v50-host
    [class*="kicker"]{

        margin-bottom:
            10px!important;

        font-size:
            9px!important;

        letter-spacing:
            .15em!important;
    }



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

    #inception-register-v50-host
    a[href="/login"]{

        min-height:34px!important;

        padding:
            0
            12px!important;

        border-radius:10px!important;

        font-size:
            10px!important;

        font-weight:
            750!important;

        box-shadow:none!important;
    }



    /* ========================================================
       STEPPER
       ======================================================== */

    #inception-register-v50-host
    .v50-steps{

        display:grid!important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            )!important;

        gap:8px!important;

        margin:
            17px
            0
            18px!important;
    }


    #inception-register-v50-host
    .v50-steps
    > *{

        min-height:46px!important;

        padding:
            0
            11px!important;

        border-radius:11px!important;

        font-size:10px!important;

        font-weight:750!important;
    }



    /* ========================================================
       FORM GRID
       ======================================================== */

    #inception-register-v50-host
    .v50-grid{

        gap:
            12px
            16px!important;
    }


    #inception-register-v50-host
    .v50-field{

        gap:6px!important;
    }


    #inception-register-v50-host
    .v50-field > span{

        color:#384258!important;

        font-size:11px!important;
        line-height:1.25!important;

        font-weight:750!important;
    }



    /* input/select */

    #inception-register-v50-host
    .v50-field
    input:not(
        [type="checkbox"]
    ),

    #inception-register-v50-host
    .v50-field select,

    #inception-register-v50-host
    .v50-field textarea{

        min-height:49px!important;
        height:49px!important;

        padding:
            0
            13px!important;

        border-radius:11px!important;

        font-size:12px!important;

        font-weight:600!important;
    }



    /* school full width tidak terlalu tinggi */

    #inception-register-v50-host
    .v50-field.full{

        margin-top:0!important;
    }



    /* ========================================================
       SEARCHABLE
       ======================================================== */

    #inception-register-v50-host
    .v50-searchable{

        min-height:49px!important;
    }


    #inception-register-v50-host
    .v50-searchable
    input{

        height:49px!important;
    }



    /* ========================================================
       ACTION AREA
       ======================================================== */

    #inception-register-v50-host
    .v50-actions{

        margin-top:
            17px!important;

        padding-top:
            0!important;

        gap:10px!important;
    }


    #inception-register-v50-host
    .v50-btn{

        min-height:46px!important;

        padding:
            0
            18px!important;

        border-radius:11px!important;

        font-size:11px!important;

        font-weight:750!important;
    }



    /* ========================================================
       CARD HEAD STEP 2/3
       juga memakai hierarchy yang sama nanti
       ======================================================== */

    #inception-register-v50-host
    .v50-card-head{

        margin-bottom:
            15px!important;

        align-items:center!important;
    }


    #inception-register-v50-host
    .v50-card-head small{

        font-size:
            9px!important;

        letter-spacing:
            .13em!important;
    }


    #inception-register-v50-host
    .v50-card-head h2{

        margin:
            4px
            0!important;

        font-size:
            25px!important;

        line-height:
            1.08!important;

        font-weight:
            800!important;
    }


    #inception-register-v50-host
    .v50-card-head p{

        margin:0!important;

        font-size:
            10px!important;

        line-height:
            1.5!important;
    }



    /* progress peserta */

    #inception-register-v50-host
    .v50-counter{

        min-width:
            55px!important;

        padding:
            7px
            9px!important;

        border-radius:
            9px!important;

        font-size:
            10px!important;
    }


}



/* ============================================================
   LAPTOP / VIEWPORT PENDEK
   ============================================================ */

@media
(min-width:761px)
and
(max-height:820px){

    #inception-register-v50-host
    .v50-brand-logo{
        top:29%!important;
    }


    #inception-register-v50-host
    .v50-brand-inner > small{
        top:43%!important;
    }


    #inception-register-v50-host
    .v50-brand-inner h2{
        top:47%!important;

        font-size:52px!important;
    }


    #inception-register-v50-host
    .v50-brand-inner p{
        top:64%!important;

        font-size:13px!important;
    }


    #inception-register-v50-host
    .v50-brand-line{
        top:77%!important;
    }


    #inception-register-v50-host
    .v50-auth-form
    > :has(.v50-card),

    #inception-register-v50-host
    .v50-auth-form
    > .v50-card{

        max-height:
            calc(
                100vh - 36px
            )!important;

        padding:
            18px
            23px!important;
    }


    #inception-register-v50-host
    .v50-field
    input:not(
        [type="checkbox"]
    ),

    #inception-register-v50-host
    .v50-field select,

    #inception-register-v50-host
    .v50-field textarea{

        min-height:44px!important;
        height:44px!important;
    }

}



/* ============================================================
   MOBILE
   Jangan pakai positioning desktop.
   ============================================================ */

@media (max-width:760px){

    #inception-register-v50-host
    .v50-auth-form{

        overflow:visible!important;
    }


    #inception-register-v50-host
    .v50-auth-form
    > :has(.v50-card),

    #inception-register-v50-host
    .v50-auth-form
    > .v50-card{

        width:100%!important;
        max-width:100%!important;

        max-height:none!important;

        padding:
            20px
            16px!important;

        border-radius:
            18px!important;
    }


    #inception-register-v50-host
    .v50-auth-form
    > :has(.v50-card)
    .v50-card{

        margin-top:
            15px!important;

        padding:0!important;

        border:0!important;

        background:
            transparent!important;

        box-shadow:none!important;
    }

}