:root{--auth-ink:#f7fbfc;--auth-muted:#e8f4f7b8;--auth-cyan:#b0edf9;--auth-navy:#062f45;--auth-panel:#051c2ec2;--auth-field:#798fa047;--auth-radius:18px}html,body{min-width:320px;min-height:100%;margin:0;padding:0}body{overflow-x:hidden}.login{isolation:isolate;min-height:100dvh;color:var(--auth-ink);background:var(--auth-navy);font-family:var(--font-roboto,Inter, ui-sans-serif, system-ui, sans-serif);grid-template-columns:minmax(440px,48%) 1fr;align-items:center;display:grid;position:relative;overflow:hidden}.bg-login-icon{z-index:-2;object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.login:after{z-index:-1;content:"";pointer-events:none;background:linear-gradient(90deg,#0318279e 0%,#03182738 55%,#0318270a 100%);position:absolute;inset:0}.logo-icon{z-index:3;object-fit:contain;width:clamp(140px,11vw,180px);height:auto;position:absolute;top:30px;left:clamp(24px,5vw,64px)}.login-child{background:var(--auth-panel);-webkit-backdrop-filter:blur(10px);border:1px solid #b0edf933;border-radius:36px;grid-area:1/1;width:min(100% - 64px,500px);height:auto;min-height:fit-content;margin:clamp(84px,11vh,126px) 0 clamp(40px,7vh,74px) clamp(32px,5vw,64px);padding-bottom:40px;box-shadow:0 22px 70px #0000003d,inset 0 1px #ffffff1a;min-height:560px!important}.register-bottom-wrapper{color:var(--auth-ink);grid-column:1/-1;align-items:center;gap:8px;margin-top:18px;font-size:15px;display:flex}.daftar-sekarang-link{color:var(--auth-cyan);font-weight:700;text-decoration:none}.daftar-sekarang-link:hover{text-decoration:underline}body>.belum-punya-akun,body>.daftar-sekarang{display:none!important}.masuk-ke-skillmatch-container{z-index:2;text-align:center;grid-area:1/1;align-self:start;width:min(100% - 128px,405px);margin:clamp(145px,12vh,185px) 0 0 clamp(64px,8vw,104px);font-size:clamp(28px,2.5vw,38px);font-weight:600;line-height:1.2}.masuk-ke-skillmatch-container2{display:block}.span{color:var(--auth-ink)}.match{color:var(--auth-cyan)}.login form{z-index:2;grid-area:1/1;align-self:start;width:min(100% - 128px,405px);margin:92px 0 0 clamp(64px,8vw,104px);padding-top:clamp(100px,14vh,130px)}.form-group{margin-bottom:12px}.form-group label{color:var(--auth-ink);margin-bottom:7px;font-size:17px;line-height:1.25;display:block}.input-wrapper{position:relative}.field-icon{z-index:1;color:var(--auth-ink);position:absolute;top:50%;left:17px;transform:translateY(-50%)}.login input{border-radius:var(--auth-radius);background:var(--auth-field);width:100%;min-height:60px;color:var(--auth-ink);font:inherit;border:1px solid #fff3;outline:0;padding:0 18px 0 55px;font-size:16px;transition:border-color .2s,background .2s,box-shadow .2s;box-shadow:inset 0 1px 2px #ffffff14,0 5px 14px #0000001a}.login input:-webkit-autofill{-webkit-text-fill-color:var(--auth-ink);transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0b2d42}.login input:-webkit-autofill:hover{-webkit-text-fill-color:var(--auth-ink);transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0b2d42}.login input:-webkit-autofill:focus{-webkit-text-fill-color:var(--auth-ink);transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0b2d42}.login input:-webkit-autofill:active{-webkit-text-fill-color:var(--auth-ink);transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0b2d42}.login input::placeholder{color:var(--auth-muted)}.login input:focus{border-color:var(--auth-cyan);background:#798fa066;box-shadow:0 0 0 3px #b0edf92e}.toggle-password{color:var(--auth-ink);cursor:pointer;position:absolute;top:50%;right:17px;transform:translateY(-50%)}.lupa-kata-sandi{color:var(--auth-muted);margin-top:2px;font-size:16px;display:inline-block}.login form .login-child2,.login form .rectangle-div{border-radius:var(--auth-radius);width:100%;min-height:60px;font:inherit;cursor:pointer;border:0;place-items:center;font-size:17px;font-weight:700;text-decoration:none;transition:transform .2s,filter .2s;display:grid;position:static}.login form .login-child2{color:var(--auth-ink);background:#004b6b}.login form .rectangle-div{background:var(--auth-cyan);color:#10283a}.login form .login-child2:hover,.login form .rectangle-div:hover{filter:brightness(1.08);transform:translateY(-1px)}.login form .login-child2:active,.login form .rectangle-div:active{transform:translateY(1px)}.login form:has(.login-child2){grid-template-columns:1fr 1fr;gap:12px 10px;display:grid}:is(.login form:has(.login-child2)>.form-group,.login form:has(.login-child2)>.lupa-kata-sandi,.login form:has(.login-child2)>.form-errors){grid-column:1/-1}.login form:has(.login-child2)>.lupa-kata-sandi{margin-bottom:6px}.kembali,.masuk{display:block;position:static}.belum-punya-akun{z-index:2;grid-area:1/1;align-self:start;width:150px;margin-top:calc(100% + 180px);font-size:16px;line-height:1.25}.daftar-sekarang{z-index:2;color:var(--auth-cyan);white-space:nowrap;grid-area:1/1;align-self:start;margin-top:calc(100% + 180px);margin-left:calc(clamp(64px,8vw,104px) + 160px);font-size:16px;font-weight:700;text-decoration:none}.form-errors{color:#ffd4d4;margin-bottom:4px;font-size:13px}.form-errors p{margin:3px 0}.register-page .login-child{min-height:680px}.register-page .login form{padding-top:130px}.register-page .register-password-group,.register-page .register-confirm-group{display:block}.register-page .belum-punya-akun,.register-page .daftar-sekarang{display:none}@media (prefers-reduced-transparency:reduce){.login-child{-webkit-backdrop-filter:none;background:#092b42}}@media (width<=840px){.login{grid-template-columns:minmax(390px,58%) 1fr}.login-child{width:calc(100% - 40px);margin-left:24px}.masuk-ke-skillmatch-container,.login form{width:calc(100% - 80px);margin-left:40px}.logo-icon{width:150px;left:28px}}@media (width<=640px){.login{min-height:100dvh;padding:104px 16px 34px;display:block;overflow-y:auto}.bg-login-icon{object-position:63% center}.logo-icon{width:130px;top:20px;left:20px}.login-child{border-radius:28px;width:auto;min-height:0;margin:0;position:absolute;inset:96px 16px 24px}.masuk-ke-skillmatch-container,.login form{width:100%;margin:0;position:relative}.masuk-ke-skillmatch-container{z-index:2;font-size:30px}.login form{padding-top:30px}.login form:has(.login-child2){gap:12px 8px}.belum-punya-akun,.daftar-sekarang{display:none}.register-page .login-child{min-height:700px}}@media (prefers-reduced-motion:reduce){.login form .login-child2,.login form .rectangle-div,.login input{transition:none}}.password-wrapper input{padding-right:55px}.toggle-password{color:#ffffffbf;cursor:pointer;z-index:5;background:0 0;border:none;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:17px;transition:color .2s,transform .2s;display:flex;position:absolute;top:50%;right:17px;transform:translateY(-50%)}.toggle-password:hover{color:#b0edf9}.toggle-password:focus{outline:none}.toggle-password i{pointer-events:none}.forgot-password-page form{padding-top:120px}.reset-password-page .login-child{min-height:690px!important}.reset-password-page form{padding-top:112px}.password-reset-help{color:var(--auth-muted);grid-column:1/-1;margin:0 0 8px;font-size:14px;line-height:1.5}.password-reset-success{color:#dff9ff;background:#b0edf91f;border:1px solid #b0edf98c;border-radius:10px;grid-column:1/-1;margin-bottom:8px;padding:10px 12px;font-size:13px;line-height:1.45}.forgot-password-page .login-child{min-height:520px!important}.forgot-password-page .masuk-ke-skillmatch-container{margin-top:145px}.forgot-password-page form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px 14px!important;padding-top:118px!important;display:grid!important}.forgot-password-page form>.form-group{grid-column:1/-1!important;margin-bottom:0!important}.forgot-password-page form>.form-errors,.forgot-password-page form>.password-reset-success{grid-column:1/-1!important}.forgot-password-page form>.password-reset-help{color:#e8f4f7c7;text-align:left;font-size:14px;line-height:1.55;grid-column:1/-1!important;width:100%!important;margin:0!important}.forgot-password-page form>.login-child2{grid-column:1!important;width:100%!important;min-height:56px!important;margin:0!important}.forgot-password-page form>.rectangle-div{grid-column:2!important;width:100%!important;min-height:56px!important;margin:0!important}@media (width<=640px){.forgot-password-page form{grid-template-columns:1fr!important}.forgot-password-page form>.login-child2,.forgot-password-page form>.rectangle-div{grid-column:1!important}}
