.presensi-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 40px 24px 28px;
    color: #243e38;
    background: radial-gradient(ellipse at 8% 12%, #dceee4 0, transparent 48%), radial-gradient(ellipse at 95% 90%, #e0eee8 0, transparent 40%), #f4f7f5;
}
.presensi-login .login-shell { width: 100%; max-width: 1040px; margin: auto; }
.presensi-login .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.presensi-login .brand-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: white; background: #247158; font-size: 23px; }
.presensi-login .login-brand strong { display: block; font-size: 17px; }
.presensi-login .login-brand small { display: block; font-size: 12px; color: #647a72; margin-top: 2px; }
.presensi-login .login-card { overflow: hidden; border-radius: 24px; box-shadow: 0 20px 65px rgba(31, 73, 56, .09); }
.presensi-login .login-intro { padding: 45px 42px 30px; background: linear-gradient(145deg, #205c49, #2d7c60); color: white; overflow: hidden; }
.presensi-login .login-eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 800; color: #d0eadb; }
.presensi-login .login-intro h2 { font-size: 31px; line-height: 1.3; font-weight: 800; margin: 19px 0 13px; letter-spacing: -.6px; }
.presensi-login .login-intro > p { color: #d9eae2; max-width: 320px; font-size: 14px; line-height: 1.8; }
.presensi-login .login-illustration { height: 260px; position: relative; display: flex; align-items: center; justify-content: center; margin: 10px 0 17px; }
.presensi-login .illustration-orbit { position: absolute; width: 245px; height: 245px; border: 1px solid #ffffff26; border-radius: 50%; box-shadow: 0 0 0 25px #ffffff04, 0 0 0 50px #ffffff03; }
.presensi-login .attendance-card { position: relative; width: 180px; padding: 15px 18px 19px; background: white; border-radius: 18px; transform: rotate(-7deg); box-shadow: 12px 18px 30px #123e4338; text-align: center; }
.presensi-login .attendance-top { display: flex; align-items: center; justify-content: space-between; color: #a3b9ac; }
.presensi-login .attendance-top > span { width: 35px; height: 5px; border-radius: 4px; background: #dae6df; }
.presensi-login .attendance-avatar { width: 66px; height: 66px; display: grid; place-items: center; background: #eaf4ed; color: #397d61; border-radius: 50%; margin: 10px auto 14px; font-size: 36px; }
.presensi-login .attendance-line { height: 6px; width: 80px; margin: 7px auto; border-radius: 4px; background: #c9dcd1; }
.presensi-login .attendance-line.short { width: 51px; height: 4px; background: #e4ece7; }
.presensi-login .attendance-check { margin-top: 17px; padding: 8px 3px; border-radius: 7px; background: #eaf5ef; color: #287251; font-size: 10px; font-weight: 800; }
.presensi-login .attendance-check i { margin-right: 3px; }
.presensi-login .attendance-bars { display: flex; justify-content: center; gap: 4px; margin-top: 13px; }
.presensi-login .attendance-bars span { width: 3px; height: 13px; background: #cfddd5; }
.presensi-login .attendance-bars span:nth-child(2n) { width: 7px; }
.presensi-login .illustration-clock, .presensi-login .illustration-calendar { position: absolute; display: grid; place-items: center; border-radius: 16px; box-shadow: 0 8px 22px #163f4930; }
.presensi-login .illustration-clock { width: 65px; height: 65px; top: 28px; right: calc(50% - 137px); background: #f3ddac; color: #826830; font-size: 34px; transform: rotate(10deg); }
.presensi-login .illustration-calendar { width: 55px; height: 55px; bottom: 28px; left: calc(50% - 136px); background: #d6ebdf; color: #327451; font-size: 27px; transform: rotate(-10deg); }
.presensi-login .login-note { font-size: 12px; color: #d9eae2; display: flex; align-items: center; gap: 8px; }
.presensi-login .login-note > span { width: 6px; height: 6px; background: #c8dfad; border-radius: 50%; }
.presensi-login .login-form-panel { padding: 49px 46px 36px; background: white; }
.presensi-login .welcome-icon { display: grid; place-items: center; width: 45px; height: 45px; background: #edf5ef; color: #337b59; border-radius: 13px; font-size: 19px; margin-bottom: 23px; }
.presensi-login h1 { font-size: 25px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 10px; }
.presensi-login .login-description { color: #6d7e77; font-size: 14px; line-height: 1.7; margin-bottom: 29px; }
.presensi-login .form-group { margin-bottom: 21px; }
.presensi-login label { color: #354d43; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.presensi-login .login-input-wrap { position: relative; }
.presensi-login .input-icon { position: absolute; top: 19px; left: 16px; color: #889d92; font-size: 14px; pointer-events: none; }
.presensi-login .login-form .form-control-user { height: 52px; border: 1px solid #dce5df; border-radius: 10px; background: #fcfdfc; padding: 12px 45px 12px 43px; font-size: 13px; color: #243e38; }
.presensi-login .form-control-user::placeholder { color: #85938d; }
.presensi-login .form-control-user:focus { border-color: #4c916d; box-shadow: 0 0 0 3px #35795018; background: white; }
.presensi-login .password-toggle { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; border-radius: 7px; background: transparent; color: #72867a; }
.presensi-login .password-toggle:hover { color: #205c49; background: #edf5ef; }
.presensi-login button:focus-visible { outline: 3px solid #b99b45; outline-offset: 3px; }
.presensi-login .login-form .login-submit { margin-top: 28px; padding: 15px 20px; border-radius: 10px; background: #287454; border-color: #287454; font-size: 14px; font-weight: 800; box-shadow: 0 6px 14px #2874541c; }
.presensi-login .login-submit i { margin-left: 10px; font-size: 12px; }
.presensi-login .login-form .login-submit:hover { background: #205e44; border-color: #205e44; }
.presensi-login .login-help { display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid #edf0ed; padding-top: 22px; margin-top: 29px; font-size: 12px; line-height: 1.7; color: #728077; }
.presensi-login .login-help i { margin-top: 4px; }
.presensi-login .alert { font-size: 13px; border-radius: 10px; }
.presensi-login .login-footer { text-align: center; color: #728078; font-size: 11px; padding-top: 25px; line-height: 1.8; }
@media (max-width: 991.98px) {
    .presensi-login .login-shell { max-width: 580px; }
    .presensi-login .login-intro { padding: 28px 34px; }
    .presensi-login .login-intro h2 { font-size: 26px; margin: 12px 0 8px; }
    .presensi-login .login-intro h2 br { display: none; }
    .presensi-login .login-intro > p { margin-bottom: 0; max-width: none; }
    .presensi-login .login-illustration, .presensi-login .login-note { display: none; }
    .presensi-login .login-form-panel { padding: 32px 34px; }
}
@media (max-width: 575.98px) {
    .presensi-login { padding: 23px 16px; }
    .presensi-login .login-brand { margin-bottom: 20px; }
    .presensi-login .login-card { border-radius: 18px; }
    .presensi-login .login-intro { padding: 25px; }
    .presensi-login .login-intro h2 { font-size: 23px; }
    .presensi-login .login-form-panel { padding: 27px 25px; }
    .presensi-login h1 { font-size: 23px; }
    .presensi-login .login-footer > span:last-child { display: block; }
}