/* ============================================================ INCEPTION AUTH FINAL V1 LOGIN LEFT = REGISTER LEFT SATU BODY-LEVEL COMPONENT ============================================================ */ /* ============================================================ DESKTOP ============================================================ */ @media (min-width:761px){ /* ======================================================== ONE SHARED LEFT PANEL ======================================================== */ body > .inc-auth-shared-left{ position:fixed!important; top:0!important; left:0!important; right:auto!important; bottom:0!important; z-index:100000!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; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; overflow:hidden!important; pointer-events:none!important; opacity:1!important; visibility:visible!important; transform:none!important; color:#ffffff!important; background: linear-gradient( 135deg, #2142ad 0%, #2e65bf 100% )!important; } /* grid */ body > .inc-auth-shared-left .inc-login-grid{ position:absolute!important; inset:0!important; z-index:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; display:block!important; opacity:.34!important; background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px )!important; background-size: 64px 64px!important; pointer-events:none!important; } /* circle kiri atas */ body > .inc-auth-shared-left::before{ content:""!important; position:absolute!important; top:61px!important; left:42px!important; z-index:1!important; width:112px!important; height:112px!important; border-radius:50%!important; background: rgba( 255, 255, 255, .13 )!important; pointer-events:none!important; } body > .inc-auth-shared-left::after{ content:none!important; display:none!important; } /* ======================================================== ONE SHARED CONTENT GROUP ======================================================== */ body > .inc-auth-shared-left .inc-login-brand-content{ position:relative!important; top:auto!important; left:auto!important; z-index:2!important; width: min( 470px, 82% )!important; max-width: min( 470px, 82% )!important; height:auto!important; margin:0!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; } /* logo */ body > .inc-auth-shared-left .inc-login-logo{ position:static!important; display:block!important; width:180px!important; height:180px!important; min-width:180px!important; min-height:180px!important; max-width:180px!important; max-height:180px!important; margin: 0 auto 27px!important; padding:0!important; object-fit:contain!important; border:0!important; background:none!important; transform:none!important; filter: drop-shadow( 0 16px 30px rgba(5,15,70,.14) )!important; } /* eyebrow */ body > .inc-auth-shared-left .inc-login-eyebrow{ position:static!important; margin: 0 0 12px!important; padding:0!important; color:#bed7ff!important; font-family: "IBM Plex Mono", ui-monospace, monospace!important; font-size:11px!important; line-height:1!important; font-weight:700!important; letter-spacing:.18em!important; text-transform:uppercase!important; text-align:center!important; transform:none!important; } /* Welcome */ body > .inc-auth-shared-left h1{ position:static!important; width:auto!important; max-width:100%!important; margin:0!important; padding:0!important; color:#ffffff!important; font-family: Inter, ui-sans-serif, system-ui, sans-serif!important; font-size: clamp( 37px, 4vw, 58px )!important; font-weight:750!important; line-height:1.02!important; letter-spacing: -.035em!important; text-align:center!important; transform:none!important; } /* paragraph */ body > .inc-auth-shared-left p{ position:static!important; width:auto!important; max-width:38ch!important; margin: 18px 0 0!important; padding:0!important; color: rgba( 255, 255, 255, .80 )!important; font-family: Inter, ui-sans-serif, system-ui, sans-serif!important; font-size:15px!important; font-weight:400!important; line-height:1.7!important; text-align:center!important; transform:none!important; } /* line */ body > .inc-auth-shared-left .inc-login-brand-line{ position:static!important; display:block!important; width:72px!important; height:3px!important; min-width:72px!important; min-height:3px!important; margin: 25px auto 0!important; padding:0!important; border:0!important; border-radius: 999px!important; background: linear-gradient( 90deg, #91bcff 0 50%, #ff8b82 50% 100% )!important; transform:none!important; } /* ======================================================== REGISTER: KIRI INTERNAL JANGAN PERNAH TAMPIL LAGI ======================================================== */ #inception-register-v50-host .inc-login-showcase, #inception-register-v50-host .v50-auth-brand, #inception-register-v50-host .v50-brand-content, #inception-register-v50-host .v50-brand-inner, #inception-register-v50-host .inc-register-brand-master{ display:none!important; } /* ======================================================== REGISTER TITLE = DAFTAR TIM ======================================================== */ #inception-register-v50-host .inc-register-final-title{ display:block!important; width:100%!important; margin: 14px 0 17px!important; padding:0!important; color:#202a43!important; font-family: Inter, ui-sans-serif, system-ui, sans-serif!important; font-size:30px!important; line-height:1.12!important; font-weight:800!important; letter-spacing: -.025em!important; text-align:center!important; } #inception-register-v50-host .inc-register-final-title + .inc-final-stepper, #inception-register-v50-host .inc-register-final-title + .v50-progress, #inception-register-v50-host .inc-register-final-title + .v50-steps{ margin-top:0!important; } #inception-register-v50-host .inc-auth-final-hide{ display:none!important; } /* ======================================================== PASSWORD EYE REGISTER ======================================================== */ #inception-register-v50-host .inc-auth-final-password-wrap{ position:relative!important; width:100%!important; display:block!important; } #inception-register-v50-host .inc-auth-final-password-wrap > input{ width:100%!important; padding-right: 48px!important; } #inception-register-v50-host .inc-auth-final-eye{ position:absolute!important; top:50%!important; right:12px!important; z-index:10!important; width:32px!important; height:32px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; transform: translateY(-50%)!important; border:0!important; border-radius:8px!important; background: transparent!important; color:#8290a8!important; cursor:pointer!important; box-shadow:none!important; } #inception-register-v50-host .inc-auth-final-eye:hover{ background: #f1f4fa!important; color:#5570bd!important; } #inception-register-v50-host .inc-auth-final-eye svg{ width:18px!important; height:18px!important; fill:none!important; stroke: currentColor!important; stroke-width:1.8!important; stroke-linecap: round!important; stroke-linejoin: round!important; pointer-events:none!important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width:760px){ body > .inc-auth-shared-left{ display:none!important; } #inception-register-v50-host .inc-register-final-title{ margin: 16px 0 16px!important; font-size:26px!important; text-align:center!important; } } /* ============================================================ INCEPTION REGISTER RIGHT POLISH V2 LEFT AUTH BRAND TIDAK DISENTUH. ============================================================ */ @media (min-width:761px){ /* ======================================================== WHITE CARD ======================================================== */ #inception-register-v50-host .inc-final-shell{ position:relative!important; padding: 22px 28px 22px!important; overflow:visible!important; } /* ======================================================== TOP AREA Back button dan Daftar Tim berada pada level visual yang sama. Ini membuat title lebih naik tanpa terasa mepet. ======================================================== */ #inception-register-v50-host .inc-final-back{ position:absolute!important; top:21px!important; left:28px!important; z-index:20!important; height:36px!important; min-height:36px!important; padding: 0 13px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border: 1px solid #dde4ef!important; border-radius: 10px!important; background: #ffffff!important; color: #4668c8!important; font-size: 10px!important; font-weight: 700!important; text-decoration: none!important; box-shadow: none!important; transition: background .16s ease, border-color .16s ease, transform .16s ease!important; } #inception-register-v50-host .inc-final-back:hover{ background: #f7f9ff!important; border-color: #cbd6ed!important; transform: translateY(-1px)!important; } /* ======================================================== DAFTAR TIM Lebih naik. Tidak menempel lagi ke stepper. ======================================================== */ #inception-register-v50-host .inc-register-final-title{ width:100%!important; min-height:36px!important; margin: 0 0 19px!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; color: #202940!important; font-family: Inter, ui-sans-serif, system-ui, sans-serif!important; font-size: 31px!important; line-height: 1!important; font-weight: 800!important; letter-spacing: -.032em!important; text-align:center!important; transform: translateY(-1px)!important; } /* ======================================================== STEPPER ======================================================== */ #inception-register-v50-host .inc-register-final-title + .inc-final-stepper, #inception-register-v50-host .inc-register-final-title + .v50-progress, #inception-register-v50-host .inc-register-final-title + .v50-steps{ margin-top: 0!important; } #inception-register-v50-host .inc-final-stepper{ gap: 9px!important; margin-bottom: 19px!important; } #inception-register-v50-host .inc-final-stepper > *{ height: 46px!important; min-height: 46px!important; border-radius: 11px!important; border: 1px solid #dce3ee!important; font-size: 10px!important; font-weight: 700!important; } /* ======================================================== FIELDS ======================================================== */ #inception-register-v50-host .inc-final-step1 .inc-final-grid{ gap: 14px 16px!important; } #inception-register-v50-host .inc-final-step1-field{ position:relative!important; min-width:0!important; } #inception-register-v50-host .inc-final-step1-field > span, #inception-register-v50-host .inc-final-step1-field .v50-label{ margin-bottom: 7px!important; color: #3d465b!important; font-size: 10.5px!important; font-weight: 700!important; } #inception-register-v50-host .inc-final-step1-field input:not([type="checkbox"]), #inception-register-v50-host .inc-final-step1-field select{ height: 49px!important; min-height: 49px!important; padding: 0 14px!important; border: 1px solid #dce3ed!important; border-radius: 11px!important; background: #fbfcff!important; color: #263149!important; font-size: 12px!important; font-weight: 550!important; box-shadow: 0 1px 2px rgba(23,35,65,.015)!important; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease!important; } #inception-register-v50-host .inc-final-step1-field input:not([type="checkbox"]):focus, #inception-register-v50-host .inc-final-step1-field select:focus{ border-color: #7791dc!important; background: #ffffff!important; box-shadow: 0 0 0 3px rgba(89,117,203,.09)!important; } /* ======================================================== DROPDOWN STACK ORDER Province harus berada di atas City & School. City harus berada di atas School. ======================================================== */ #inception-register-v50-host .inc-field-province{ z-index: 300!important; } #inception-register-v50-host .inc-field-city{ z-index: 200!important; } #inception-register-v50-host .inc-field-school{ z-index: 100!important; } /* ======================================================== SEARCHABLE WRAPPER ======================================================== */ #inception-register-v50-host .v50-searchable{ position:relative!important; width:100%!important; min-width:0!important; } /* ======================================================== CUSTOM DROPDOWN Floating card, bukan list mentah. ======================================================== */ #inception-register-v50-host .v50-search-menu{ position:absolute!important; top: calc(100% + 7px)!important; left:0!important; right:0!important; z-index: 99999!important; width:100%!important; max-height: 215px!important; margin:0!important; padding: 6px!important; overflow-x: hidden!important; overflow-y: auto!important; overscroll-behavior: contain!important; box-sizing: border-box!important; border: 1px solid #dbe2ed!important; border-radius: 12px!important; background: rgba(255,255,255,.99)!important; box-shadow: 0 16px 38px rgba(37,48,76,.15), 0 3px 9px rgba(37,48,76,.06)!important; backdrop-filter: blur(10px)!important; scrollbar-width: thin!important; scrollbar-color: #cbd3e2 transparent!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar{ width: 6px!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar-track{ background: transparent!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar-thumb{ border-radius: 999px!important; background: #cbd3e2!important; } /* ======================================================== DROPDOWN ITEMS ======================================================== */ #inception-register-v50-host .v50-menu-item{ width:100%!important; min-height: 38px!important; display:flex!important; align-items:center!important; margin: 0 0 2px!important; padding: 9px 11px!important; box-sizing: border-box!important; border: 0!important; border-radius: 8px!important; background: transparent!important; color: #344057!important; font-family: Inter, ui-sans-serif, system-ui, sans-serif!important; font-size: 12px!important; line-height: 1.3!important; font-weight: 550!important; cursor:pointer!important; transition: background .12s ease, color .12s ease, transform .12s ease!important; } #inception-register-v50-host .v50-menu-item:last-child{ margin-bottom: 0!important; } #inception-register-v50-host .v50-menu-item:hover, #inception-register-v50-host .v50-menu-item.active, #inception-register-v50-host .v50-menu-item[aria-selected="true"]{ background: #f1f5ff!important; color: #3e63c7!important; } /* ======================================================== DISABLED CITY / SCHOOL ======================================================== */ #inception-register-v50-host .inc-field-city input:disabled, #inception-register-v50-host .inc-field-school input:disabled{ background: #f7f8fb!important; color: #a0a8b8!important; cursor: not-allowed!important; } /* ======================================================== BUTTON DROPDOWN / CHEVRON ======================================================== */ #inception-register-v50-host .inc-final-step1-field .v50-searchable button{ border: 0!important; background: transparent!important; color: #7890cb!important; border-radius: 8px!important; } #inception-register-v50-host .inc-final-step1-field .v50-searchable button:hover{ background: #f1f4fb!important; } /* ======================================================== BOTTOM ACTION ======================================================== */ #inception-register-v50-host .inc-final-actions{ margin-top: 18px!important; padding-top: 18px!important; } #inception-register-v50-host .inc-final-next{ min-width: 210px!important; height: 47px!important; min-height: 47px!important; border-radius: 10px!important; font-weight: 700!important; box-shadow: 0 9px 22px rgba(68,102,192,.13)!important; } } /* ============================================================ VIEWPORT PENDEK Card tetap aman. ============================================================ */ @media (min-width:761px) and (max-height:820px){ #inception-register-v50-host .inc-final-shell{ overflow-y: auto!important; overflow-x: visible!important; scrollbar-width: none!important; } #inception-register-v50-host .inc-final-shell::-webkit-scrollbar{ display:none!important; } #inception-register-v50-host .inc-register-final-title{ margin-bottom: 14px!important; font-size: 28px!important; } #inception-register-v50-host .inc-final-stepper{ margin-bottom: 14px!important; } }