/* =========================================================
   UPA LOGIN PAGES
   Universitas Patria Artha - Sistem Informasi Akademik
   ========================================================= */
.upa_loginPages {
    --upa-primary:#075db9;
    --upa-primary-dark:#063b7c;
    --upa-primary-light:#078bfa;
    --upa-gold:#ffc928;
    --upa-text:#102b54;
    --upa-muted:#7487a5;
    --upa-border:#d8e4f3;
    --upa-panel:rgba(255,255,255,.96);
    --upa-shadow:0 24px 70px rgba(5,35,80,.24);
    min-height:100%;
    margin:0;
    color:var(--upa-text);
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.upa_loginPages *,
.upa_loginPages *::before,
.upa_loginPages *::after {
    box-sizing:border-box;
}
/* Body margin is intentionally not set here to avoid affecting unrelated pages. */
.upa_loginPages button,
.upa_loginPages input {
    font:inherit;
}
.upa_loginPages a {
    color:inherit;
    text-decoration:none;
}
.upa_loginPages img {
    max-width:100%;
}
.upa-login {
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);
    align-items:center;
    gap:clamp(28px,5vw,80px);
    width:100%;
    min-height:100vh;
    min-height:100svh;
    padding:clamp(28px,5vw,76px);
    overflow:hidden;
    background-color:#3b397c;
    background-image:linear-gradient(115deg,rgba(59,57,124,.83) 0%,rgba(59,57,124,.58) 48%,rgba(59,57,124,.22) 100%),var(--upa-campus-image);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
.upa-login::before {
    position:absolute;
    z-index:-1;
    inset:0;
    content:"";
    pointer-events:none;
    background:linear-gradient(90deg,rgba(0,39,91,.25),transparent 72%);
}
.upa-login::after {
    position:absolute;
    z-index:-1;
    top:-22%;
    left:48%;
    width:clamp(90px,12vw,180px);
    height:145%;
    content:"";
    pointer-events:none;
    border-right:12px solid rgba(255,201,40,.92);
    border-radius:50%;
    transform:rotate(18deg);
    opacity:.9;
}
.upa-login__intro {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    min-width:0;
    color:#fff;
}
.upa-login__brand {
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    min-width:0;
    margin-bottom:clamp(30px,4vw,54px);
}
.upa-login__brand > img {
    display:block;
    width:66px;
    height:66px;
    flex:0 0 66px;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));
}
.upa-login__brand-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}
.upa-login__eyebrow {
    margin:0 0 2px;
    color:rgba(255,255,255,.9);
    font-size:12px;
    font-weight:750;
    letter-spacing:.08em;
    line-height:1.5;
    text-transform:uppercase;
}
.upa-login__brand-name {
    margin:0;
    color:#fff;
    font-size:clamp(19px,2vw,27px);
    font-weight:750;
    line-height:1.25;
}
.upa-login__gold-line {
    display:block;
    width:68px;
    height:4px;
    margin-top:12px;
    border-radius:10px;
    background:var(--upa-gold);
}
.upa-login__welcome {
    margin:0;
    color:#fff;
    font-size:clamp(26px,3.1vw,43px);
    font-weight:400;
    line-height:1.2;
}
.upa-login__title {
    margin:-2px 0 0;
    color:#fff;
    font-size:clamp(60px,7vw,94px);
    font-weight:850;
    letter-spacing:-.055em;
    line-height:1.08;
}
.upa-login__university {
    margin:0;
    color:#fff;
    font-size:clamp(24px,3vw,37px);
    font-weight:750;
    line-height:1.3;
}
.upa-login__university span {
    color:var(--upa-gold);
}
.upa-login__description {
    max-width:520px;
    margin:18px 0 0;
    color:rgba(255,255,255,.94);
    font-size:clamp(14px,1.2vw,16px);
    line-height:1.8;
}
.upa-login__features {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:min(100%,650px);
    margin-top:clamp(30px,4vw,48px);
    padding:16px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    background:rgba(5,42,91,.68);
    box-shadow:0 12px 34px rgba(0,20,60,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.upa-login__feature {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:4px 10px;
}
.upa-login__feature + .upa-login__feature {
    border-left:1px solid rgba(255,255,255,.35);
}
.upa-login__feature-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    font-size:1.35rem;
    line-height:1;
}
.upa-login__feature-icon i {
    display:block;
    font-size:inherit;
    line-height:1;
}
.upa-login__feature:nth-child(2) .upa-login__feature-icon {
    background:#05b98a;
}
.upa-login__feature:nth-child(3) .upa-login__feature-icon {
    background:#ffad16;
}
.upa-login__feature-text {
    display:flex;
    flex-direction:column;
    min-width:0;
    color:rgba(255,255,255,.94);
    font-size:12px;
    line-height:1.55;
}
.upa-login__feature-text strong {
    color:#fff;
    font-size:13px;
    font-weight:750;
}
.upa-login__panel-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
}
.upa-login__panel {
    width:100%;
    max-width:520px;
    min-width:0;
    padding:clamp(28px,3.5vw,48px);
    border:1px solid rgba(255,255,255,.8);
    border-radius:30px;
    background:var(--upa-panel);
    box-shadow:var(--upa-shadow);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.upa-login__panel-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    text-align:center;
}
.upa-login__logo-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    margin:0 0 12px;
}
.upa-login__crest {
    display:block;
    width:100px;
    height:100px;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    flex-shrink:0;
}
.upa-login__panel-title {
    width:100%;
    margin:0;
    color:#092d69;
    font-size:clamp(21px,2vw,29px);
    font-weight:800;
    letter-spacing:-.035em;
    line-height:1.3;
    text-align:center;
    overflow-wrap:anywhere;
}
.upa-login__panel-subtitle {
    width:100%;
    margin:7px 0 0;
    color:#8293b2;
    font-size:10px;
    font-weight:750;
    letter-spacing:.28em;
    line-height:1.7;
    text-align:center;
}
.upa-login__panel-header .upa-login__gold-line {
    width:68px;
    height:4px;
    margin:16px auto 0;
}
.upa-login__form {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:17px;
    width:100%;
    min-width:0;
    margin-top:28px;
}
.upa-login__field {
    display:flex;
    flex-direction:column;
    gap:7px;
    width:100%;
    min-width:0;
}
.upa-login__field > label {
    color:#192f51;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
}
.upa-login__input-wrap {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-width:0;
    min-height:52px;
    padding:0 15px;
    border:1px solid var(--upa-border);
    border-radius:12px;
    background:rgba(255,255,255,.92);
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.upa-login__input-wrap:focus-within {
    border-color:#1684ff;
    background:#fff;
    box-shadow:0 0 0 3px rgba(22,132,255,.13);
}
.upa-login__input-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    flex:0 0 20px;
    color:#8295b5;
    font-size:19px;
    line-height:1;
}
.upa-login__input {
    display:block;
    width:100%;
    min-width:0;
    min-height:48px;
    padding:0;
    border:0;
    outline:0;
    color:#19365e;
    background:transparent;
    font-size:14px;
}
.upa-login__input::placeholder {
    color:#95a5bf;
    opacity:1;
}
.upa-login__input:focus-visible {
    outline:none;
}
.upa-login__password-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:36px;
    flex:0 0 30px;
    padding:0;
    border:0;
    border-radius:8px;
    color:#8193b0;
    background:transparent;
    cursor:pointer;
    font-size:18px;
    transition:color .2s ease,background-color .2s ease;
}
.upa-login__password-toggle:hover {
    color:var(--upa-primary);
    background:#edf5ff;
}
.upa-login__password-toggle:focus-visible {
    outline:2px solid #1684ff;
    outline-offset:2px;
}
/* Opsi login: Ingat saya dan Lupa password */
.upa-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 2px 0 10px;
    font-size: 13px;
}

/* Checkbox ingat perangkat */
.upa-login__remember {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}
/* Ukuran dan posisi checkbox */
.upa-login__remember input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #087ff5;
    cursor: pointer;
}
.upa-login__remember input {
    width:12px;
    height:12px;
    flex:0 0 12px;
    margin:0;
    accent-color:#087df3;
    cursor:pointer;
}
button.upa-login__link {
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    padding:0;
    border:0;
    color:#0076f5;
    background:transparent;
    font-family:inherit;
    font-size:11px;
    font-weight:750;
    line-height:1.4;
    text-align:right;
    white-space:nowrap;
    cursor:pointer;
}
button.upa-login__link:hover {
    color:#004ca8;
    text-decoration:underline;
    text-underline-offset:3px;
}
button.upa-login__link:focus-visible {
    outline:2px solid #1684ff;
    outline-offset:3px;
    border-radius:2px;
}
.upa-login__submit {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    min-height:56px;
    padding:13px 20px;
    border:0;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(105deg,#079df8 0%,#0870f5 100%);
    box-shadow:0 10px 22px rgba(0,112,245,.2);
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.upa-login__submit span {
    font-size:20px;
    line-height:1;
    transition:transform .2s ease;
}
.upa-login__submit:hover {
    filter:brightness(1.04);
    box-shadow:0 13px 28px rgba(0,112,245,.28);
    transform:translateY(-1px);
}
.upa-login__submit:hover span {
    transform:translateX(3px);
}
.upa-login__submit:active {
    transform:translateY(0);
}
.upa-login__submit:focus-visible {
    outline:3px solid rgba(0,112,245,.3);
    outline-offset:3px;
}
.upa-login__divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:100%;
    color:#8093b2;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}
.upa-login__divider::before,
.upa-login__divider::after {
    height:1px;
    flex:1 1 auto;
    content:"";
    background:#d8e4f3;
}
.upa-login__socials {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
    min-width:0;
}
.upa-login__social {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:0;
    min-height:48px;
    padding:10px 12px;
    border:1px solid #dce7f6;
    border-radius:999px;
    color:#203958;
    background:#fff;
    box-shadow:0 4px 12px rgba(20,60,110,.04);
    font-size:13px;
    font-weight:750;
    text-align:center;
    transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.upa-login__social:hover {
    border-color:#a9c9f5;
    background:#f5f9ff;
    transform:translateY(-1px);
}
.upa-login__social:focus-visible {
    outline:2px solid #1684ff;
    outline-offset:3px;
}
.upa-login__social span {
    font-size:17px;
    line-height:1;
}
.upa-login__security {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-width:0;
    margin-top:18px;
    padding:14px;
    border:1px solid rgba(205,227,252,.6);
    border-radius:14px;
    color:#385d8c;
    background:rgba(226,240,255,.78);
    font-size:11px;
    line-height:1.65;
}
.upa-login__security-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    line-height:1;
}
.upa-login__security-icon i {
    display:block;
    font-size:inherit;
    line-height:1;
}
.upa-login__footer {
    position:absolute;
    right:20px;
    bottom:10px;
    left:20px;
    margin:0;
    color:rgba(255,255,255,.9);
    font-size:10px;
    line-height:1.5;
    text-align:center;
}
@media (min-width:1600px) {
    .upa-login {
        grid-template-columns:minmax(0,1.2fr) minmax(440px,.8fr);
        gap:clamp(70px,7vw,130px);
        padding:clamp(70px,7vw,120px);
    }
    .upa-login__panel {
        max-width:560px;
        padding:52px;
    }
}
@media (max-width:1100px) {
    .upa-login {
        grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);
        gap:30px;
        padding:36px;
    }
    .upa-login__panel {
        padding:30px;
        border-radius:26px;
    }
    .upa-login__brand {
        margin-bottom:32px;
    }
    .upa-login__brand > img {
        width:54px;
        height:54px;
        flex-basis:54px;
    }
    .upa-login__features {
        padding:10px;
    }
    .upa-login__feature {
        gap:8px;
        padding:4px 6px;
    }
    .upa-login__feature-icon {
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:18px;
    }
}
@media (max-width:800px) {
    .upa-login {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:22px;
        min-height:100vh;
        min-height:100svh;
        padding:22px 18px 38px;
        background-position:center;
        background-size:cover;
    }
    .upa-login::after {
        top:-20%;
        left:65%;
        width:100px;
        border-right-width:7px;
        opacity:.65;
    }
    .upa-login__intro {
        display:none;
    }
    .upa-login__panel-wrap {
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        max-width:480px;
        margin:auto;
    }
    .upa-login__panel {
        width:100%;
        max-width:480px;
        padding:28px;
        border-radius:24px;
        box-shadow:0 18px 48px rgba(3,34,76,.25);
    }
    .upa-login__crest {
        width:82px;
        height:82px;
    }
    .upa-login__panel-title {
        font-size:23px;
    }
    .upa-login__panel-subtitle {
        font-size:9px;
        letter-spacing:.23em;
    }
    .upa-login__form {
        gap:15px;
        margin-top:23px;
    }
    .upa-login__input-wrap {
        min-height:48px;
    }
    .upa-login__input {
        min-height:44px;
    }
    .upa-login__submit {
        min-height:52px;
    }
    .upa-login__footer {
        bottom:8px;
        font-size:10px;
    }
}
@media (max-width:480px) {
    .upa-login {
        justify-content:center;
        gap:12px;
        min-height:100vh;
        min-height:100svh;
        padding:12px 10px 24px;
        background-position:center;
        background-size:cover;
    }
    .upa-login__panel-wrap {
        max-width:100%;
    }
    .upa-login__panel {
        max-width:100%;
        padding:20px 17px;
        border-radius:20px;
    }
    .upa-login__logo-wrap {
        margin-bottom:8px;
    }
    .upa-login__crest {
        width:68px;
        height:68px;
    }
    .upa-login__panel-title {
        font-size:20px;
        line-height:1.3;
    }
    .upa-login__panel-subtitle {
        margin-top:4px;
        font-size:8px;
        letter-spacing:.2em;
    }
    .upa-login__panel-header .upa-login__gold-line {
        width:54px;
        height:3px;
        margin-top:9px;
    }
    .upa-login__form {
        gap:13px;
        margin-top:19px;
    }
    .upa-login__field {
        gap:5px;
    }
    .upa-login__field > label {
        font-size:12px;
    }
    .upa-login__input-wrap {
        gap:9px;
        min-height:43px;
        padding:0 11px;
        border-radius:10px;
    }
    .upa-login__input {
        min-height:40px;
        font-size:13px;
    }
    .upa-login__input-icon {
        width:18px;
        flex-basis:18px;
        font-size:17px;
    }
    .upa-login__password-toggle {
        width:26px;
        height:32px;
        flex-basis:26px;
        font-size:16px;
    }
    .upa-login__options {
        gap:8px;
    }
    .upa-login__remember {
        gap:6px;
        font-size:10px;
    }
    .upa-login__remember input {
        width:14px;
        height:14px;
        flex-basis:14px;
    }
    .upa-login__link {
        font-size:10px;
    }
    .upa-login__submit {
        min-height:46px;
        padding:10px 15px;
        font-size:13px;
    }
    .upa-login__submit span {
        font-size:17px;
    }
    .upa-login__divider {
        gap:9px;
        font-size:10px;
    }
    .upa-login__socials {
        gap:8px;
    }
    .upa-login__social {
        gap:6px;
        min-height:40px;
        padding:8px 6px;
        font-size:11px;
    }
    .upa-login__social span {
        font-size:15px;
    }
    .upa-login__security {
        gap:8px;
        margin-top:13px;
        padding:10px;
        border-radius:11px;
        font-size:9px;
        line-height:1.5;
    }
    .upa-login__security-icon {
        width:25px;
        height:25px;
        flex-basis:25px;
        font-size:14px;
    }
    .upa-login__footer {
        bottom:5px;
        font-size:9px;
    }
}
@media (max-width:360px) {
    .upa-login {
        padding:8px 7px 22px;
    }
    .upa-login__panel {
        padding:17px 13px;
        border-radius:17px;
    }
    .upa-login__crest {
        width:60px;
        height:60px;
    }
    .upa-login__panel-title {
        font-size:18px;
    }
    .upa-login__panel-subtitle {
        font-size:7px;
        letter-spacing:.16em;
    }
    .upa-login__form {
        gap:11px;
        margin-top:16px;
    }
    .upa-login__options {
        align-items:flex-start;
    }
    .upa-login__remember {
        font-size:9px;
    }
    .upa-login__link {
        font-size:9px;
    }
    .upa-login__social {
        font-size:10px;
    }
    .upa-login__security {
        padding:8px;
        font-size:8px;
    }
}
@media (max-height:760px) and (min-width:801px) {
    .upa-login {
        min-height:760px;
        padding-top:30px;
        padding-bottom:36px;
    }
    .upa-login__brand {
        margin-bottom:22px;
    }
    .upa-login__features {
        margin-top:24px;
    }
    .upa-login__panel {
        padding-top:25px;
        padding-bottom:25px;
    }
    .upa-login__crest {
        width:72px;
        height:72px;
    }
    .upa-login__form {
        gap:12px;
        margin-top:18px;
    }
    .upa-login__input-wrap {
        min-height:44px;
    }
    .upa-login__input {
        min-height:40px;
    }
    .upa-login__submit {
        min-height:46px;
    }
    .upa-login__security {
        margin-top:12px;
        padding:10px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .upa_loginPages *,
    .upa_loginPages *::before,
    .upa_loginPages *::after {
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}
/* Typography is controlled by the base rules and responsive media queries below. */

/* OPTIMASI DESKTOP 1280 X 800 AGAR TIDAK PERLU SCROLL */
@media (min-width:1101px) and (max-width:1400px) and (min-height:761px) and (max-height:850px) {
    .upa-login {
        min-height:100vh;
        min-height:100svh;
        grid-template-columns:minmax(0,1.1fr) minmax(380px,.8fr);
        align-items:center;
        gap:clamp(24px,3vw,42px);
        padding:18px 5vw;
        overflow:hidden;
    }
    .upa-login__intro {
        min-width:0;
    }
    .upa-login__brand {
        margin-bottom:24px;
    }
    .upa-login__brand img {
        width:58px;
        height:66px;
    }
    .upa-login__welcome {
        font-size:clamp(26px,2.5vw,34px);
    }
    .upa-login__title {
        font-size:clamp(58px,5.5vw,76px);
        line-height:1;
    }
    .upa-login__university {
        font-size:clamp(23px,2.5vw,31px);
    }
    .upa-login__description {
        margin-top:12px;
        font-size:14px;
        line-height:1.55;
    }
    .upa-login__features {
        margin-top:24px;
        padding:12px 14px;
        border-radius:18px;
    }
    .upa-login__feature {
        gap:8px;
        padding:3px 6px;
    }
    .upa-login__feature-icon {
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:18px;
    }
    .upa-login__feature-text {
        font-size:11px;
    }
    .upa-login__feature-text strong {
        font-size:12px;
    }
    .upa-login__panel-wrap {
        min-width:0;
        align-items:center;
    }
    .upa-login__panel {
        width:100%;
        max-width:480px;
        padding:20px 30px;
        border-radius:24px;
    }
    .upa-login__logo-area,
    .upa-login__logo-wrap {
        margin-bottom:6px;
    }
    .upa-login__crest {
        width:62px;
        height:66px;
        margin-bottom:5px;
    }
    .upa-login__panel-header {
        margin-bottom:16px;
    }
    .upa-login__panel-title {
        font-size:23px;
        line-height:1.25;
    }
    .upa-login__panel-subtitle {
        margin-top:5px;
        font-size:10px;
        letter-spacing:.18em;
    }
    .upa-login__panel-header .upa-login__gold-line {
        width:60px;
        height:3px;
        margin-top:10px;
    }
    .upa-login__form {
        gap:12px;
        margin-top:0;
    }
    .upa-login__field {
        gap:0;
    }
    .upa-login__field label {
        margin-bottom:5px;
        font-size:13px;
    }
    .upa-login__input-wrap {
        min-height:42px;
    }
    .upa-login__input {
        min-height:40px;
        padding-top:8px;
        padding-bottom:8px;
        font-size:14px;
    }
    .upa-login__options {
        gap:8px;
        font-size:12px;
    }
    .upa-login__remember {
        gap:6px;
        font-size:12px;
    }
    .upa-login__remember input {
        width:15px;
        height:15px;
    }
    .upa-login__link {
        font-size:12px;
    }
    .upa-login__submit {
        min-height:46px;
        padding:10px 16px;
        font-size:15px;
    }
    .upa-login__divider {
        gap:10px;
        font-size:12px;
    }
    .upa-login__socials {
        gap:10px;
    }
    .upa-login__social {
        min-height:42px;
        padding:8px 10px;
        font-size:13px;
    }
    .upa-login__security {
        gap:9px;
        margin-top:12px;
        padding:10px;
        font-size:12px;
        line-height:1.45;
    }
    .upa-login__security-icon {
        font-size:20px;
    }
    .upa-login__footer {
        bottom:4px;
        font-size:10px;
    }
}
/* ==================================================
   OPTIMASI LAPTOP DENGAN TINGGI LAYAR RENDAH
   Fokus: resolusi 1024 × 600 px
   Tidak mengubah tampilan mobile dan desktop normal
================================================== */
@media (min-width:821px) and (max-width:1100px) and (max-height:650px) {
  .upa-login {
    min-height:100vh;
    min-height:100dvh;
    grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
    align-items:center;
    gap:18px;
    padding:10px 24px 20px;
  }
  .upa-login__intro {
    min-width:0;
  }
  .upa-login__brand {
    margin-bottom:12px;
  }
  .upa-login__brand img {
    width:42px;
    height:48px;
  }
  .upa-login__eyebrow {
    font-size:.68rem;
  }
  .upa-login__brand-name {
    font-size:1rem;
  }
  .upa-login__welcome {
    font-size:1.45rem;
    line-height:1.15;
  }
  .upa-login__title {
    font-size:clamp(2.8rem,5vw,3.6rem);
    line-height:.98;
  }
  .upa-login__university {
    margin-top:5px;
    font-size:1.4rem;
    line-height:1.15;
  }
  .upa-login__description {
    margin-top:8px;
    font-size:.78rem;
    line-height:1.4;
  }
  .upa-login__features {
    margin-top:14px;
    gap:5px;
    padding:8px;
  }
  .upa-login__feature {
    gap:6px;
    padding:0 3px;
  }
  .upa-login__feature-icon {
    flex-basis:30px;
    width:30px;
    height:30px;
    font-size:.9rem;
  }
  .upa-login__feature-text,
  .upa-login__feature-text strong {
    font-size:.7rem;
  }
  .upa-login__panel-wrap {
    width:100%;
    min-width:0;
    min-height:0;
    align-self:center;
  }
  .upa-login__panel {
    width:100%;
    max-width:420px;
    padding:12px 20px 10px;
    border-radius:18px;
  }
  .upa-login__logo-area {
    margin-bottom:3px;
  }
  .upa-login__panel-header {
    margin-bottom:8px;
  }
  .upa-login__crest {
    width:42px;
    height:46px;
    margin-bottom:2px;
  }
  .upa-login__panel-title {
    font-size:1.15rem;
    line-height:1.15;
  }
  .upa-login__panel-subtitle {
    margin-top:3px;
    font-size:.58rem;
    letter-spacing:.12em;
    line-height:1.2;
  }
  .upa-login__panel-header .upa-login__gold-line {
    width:48px;
    margin-top:5px;
  }
  .upa-login__form {
    gap:7px;
  }
  .upa-login__field {
    gap:0;
  }
  .upa-login__field label {
    margin-bottom:3px;
    font-size:.76rem;
    line-height:1.2;
  }
  .upa-login__input-wrap {
    min-height:33px;
  }
  .upa-login__input {
    min-height:33px;
    padding-top:5px;
    padding-bottom:5px;
    font-size:.8rem;
  }
  .upa-login__input-icon {
    font-size:.85rem;
  }
  .upa-login__password-toggle {
    padding:4px 7px;
  }
  .upa-login__options {
    gap:6px;
    font-size:.66rem;
    line-height:1.2;
  }
  .upa-login__remember {
    gap:4px;
    font-size:.66rem;
  }
  .upa-login__remember input {
    width:12px;
    height:12px;
  }
  .upa-login__link {
    font-size:.66rem;
  }
  .upa-login__submit {
    min-height:35px;
    padding:7px 12px;
    font-size:.82rem;
  }
  .upa-login__divider {
    margin-top:0;
    margin-bottom:0;
    font-size:.66rem;
    line-height:1.2;
  }
  .upa-login__socials {
    gap:8px;
  }
  .upa-login__social {
    min-height:31px;
    padding:5px 8px;
    font-size:.72rem;
  }
  .upa-login__security {
    gap:7px;
    margin-top:7px;
    padding:6px 8px;
    border-radius:9px;
    font-size:.64rem;
    line-height:1.3;
  }
  .upa-login__security-icon {
    font-size:1rem;
  }
  .upa-login__footer {
    bottom:2px;
    font-size:.6rem;
  }
}
button.upa-login__social {
    width:100%;
    font-family:inherit;
    cursor:pointer;
}
.upa-login__social span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.upa-login__social span i {
    font-size:inherit;
    line-height:1;
}

/* Ukuran checkbox dan tautan pada layar kecil */
@media (max-width:480px) {
    .upa-login__options {
        gap:8px;
    }
    .upa-login__remember {
        gap:5px;
        font-size:10px;
    }
    button.upa-login__link {
        font-size:10px;
    }
}
@media (max-width:360px) {
    .upa-login__options {
        gap:5px;
    }
    .upa-login__remember {
        font-size:9px;
    }
    button.upa-login__link {
        font-size:9px;
    }
}
/* Modal Login Page Default Start  */
.upa-modal {
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    font-family:inherit;
    font-size:14px;
}
.upa-modal.is-open {
    display:flex;
}
.upa-modal__backdrop {
    position:absolute;
    inset:0;
    background:rgba(7,25,55,.65);
    backdrop-filter:blur(3px);
}
.upa-modal__dialog {
    position:relative;
    z-index:1;
    width:100%;
    max-width:800px;
    max-height:90vh;
    overflow-y:auto;
    animation:upaModalShow .2s ease-out;
}
.upa-modal__content {
    overflow:hidden;
    border:1px solid rgba(255,255,255,.7);
    border-radius:12px;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.25);
    font-size:14px;
}
.upa-modal__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    border-bottom:1px solid #e5edf7;
    background:#192e68;
}
.upa-modal__title {
    margin:0;
    color:#fff;
    font-size:14px;
    font-weight:500;
}
.upa-modal__close {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:6px;
    background:#f1f5f9;
    color:#475569;
    font-size:23px;
    line-height:1;
    cursor:pointer;
}
.upa-modal__close:hover {
    background:#e2e8f0;
    color:#0f172a;
}
.upa-modal__body {
    padding:22px;
    font-size:14px;
}
.upa-modal__body label {
    display:block;
    margin-bottom:6px;
    color:#52647e;
    font-size:12px;
    font-weight:500;
}
.upa-modal__body input,
.upa-modal__body select,
.upa-modal__body textarea,
.upa-modal__body button {
    font-family:inherit;
    font-size:14px;
}
.upa-modal__loading {
    padding:20px 0;
    color:#64748b;
    font-size:14px;
    text-align:center;
}
body.upa-modal-open {
    overflow:hidden;
}
@keyframes upaModalShow {
    from {
        opacity:0;
        transform:translateY(12px) scale(.98);
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
@media (max-width:820px) {
    .upa-modal__dialog {
        max-width:100%;
    }
}
@media (max-width:480px) {
    .upa-modal {
        padding:14px;
    }
    .upa-modal__header {
        padding:16px;
    }
    .upa-modal__body {
        padding:16px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .upa-modal__dialog {
        animation:none;
    }
}

.upa-recovery {
    width:100%;
    color:#334155;
    font-family:inherit;
    font-size:14px;
}
.upa-recovery,
.upa-recovery * {
    box-sizing:border-box;
}
.upa-recovery__intro {
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px;
    padding:16px;
    border:1px solid #dbeafe;
    border-radius:10px;
    background:#f5f9ff;
}
.upa-recovery__icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:10px;
    background:#e0edff;
    color:#075db9;
    font-size:25px;
}
.upa-recovery__intro-text {
    min-width:0;
}
.upa-recovery__heading {
    margin:0 0 5px;
    color:#19336c;
    font-size:15px;
    font-weight:700;
}
.upa-recovery__description {
    margin:0;
    color:#64748b;
    font-size:13px;
    line-height:1.6;
}
.upa-recovery__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}
.upa-recovery__field {
    min-width:0;
}
.upa-recovery__field--full {
    grid-column:1 / -1;
}
.upa-recovery__field label {
    display:block;
    margin-bottom:7px;
    color:#475569;
    font-size:12px;
    font-weight:600;
}
.upa-recovery__input-wrap {
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
}
.upa-recovery__input-icon {
    position:absolute;
    left:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8193ad;
    font-size:18px;
    pointer-events:none;
}
.upa-recovery__input {
    display:block;
    width:100%;
    min-width:0;
    height:42px;
    padding:9px 12px 9px 40px;
    border:1px solid #d5deea;
    border-radius:7px;
    outline:none;
    background:#fff;
    color:#334155;
    font-family:inherit;
    font-size:14px;
    transition:border-color .2s,box-shadow .2s;
}
.upa-recovery__input::placeholder {
    color:#94a3b8;
    opacity:1;
}
.upa-recovery__input:hover {
    border-color:#a9bad1;
}
.upa-recovery__input:focus {
    border-color:#1677d2;
    box-shadow:0 0 0 3px rgba(22,119,210,.12);
}
.upa-recovery__hint {
    display:block;
    margin-top:6px;
    color:#8190a5;
    font-size:11px;
    line-height:1.5;
}
.upa-recovery__notice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:24px;
    padding:13px 15px;
    border:1px solid #f5dfaa;
    border-radius:8px;
    background:#fff8e8;
    color:#996b16;
}
.upa-recovery__notice > i {
    flex-shrink:0;
    margin-top:1px;
    font-size:19px;
}
.upa-recovery__notice p {
    margin:0;
    font-size:12px;
    line-height:1.7;
}
.upa-recovery__actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid #e8edf5;
}
.upa-recovery__button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:9px 16px;
    border:1px solid transparent;
    border-radius:7px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s,border-color .2s,box-shadow .2s;
}
.upa-recovery__button i {
    font-size:17px;
}
.upa-recovery__button--secondary {
    border-color:#d5deea;
    background:#fff;
    color:#52647e;
}
.upa-recovery__button--secondary:hover {
    border-color:#a9bad1;
    background:#f8fafc;
}
.upa-recovery__button--primary {
    background:#075db9;
    color:#fff;
    box-shadow:0 3px 8px rgba(7,93,185,.16);
}
.upa-recovery__button--primary:hover {
    background:#064c98;
    box-shadow:0 4px 12px rgba(7,93,185,.22);
}
.upa-recovery__button:focus-visible {
    outline:2px solid #1684ff;
    outline-offset:3px;
}
@media (max-width:600px) {
    .upa-recovery__intro {
        gap:11px;
        margin-bottom:20px;
        padding:13px;
    }
    .upa-recovery__icon {
        width:38px;
        height:38px;
        font-size:22px;
    }
    .upa-recovery__grid {
        grid-template-columns:minmax(0,1fr);
        gap:17px;
    }
    .upa-recovery__field--full {
        grid-column:auto;
    }
    .upa-recovery__notice {
        margin-top:20px;
        padding:12px;
    }
    .upa-recovery__actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:20px;
    }
    .upa-recovery__button {
        width:100%;
        padding:9px 10px;
        font-size:12px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .upa-recovery__input,
    .upa-recovery__button {
        transition:none;
    }
}
/* =========================================================
   RECOVERY ACCOUNT — BASE
   ========================================================= */

.upa-recovery {
    width: 100%;
    color: #334155;
    font-family: inherit;
    font-size: 14px;
}

.upa-recovery,
.upa-recovery * {
    box-sizing: border-box;
}

.upa-recovery [hidden] {
    display: none !important;
}


/* =========================================================
   INTRO / INFORMASI PEMULIHAN
   ========================================================= */

.upa-recovery__intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 22px;
    padding: 14px;

    border: 1px solid #d8e7ff;
    border-radius: 10px;

    background: #f5f9ff;
}

.upa-recovery__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius: 9px;

    background: #e0edff;
    color: #075db9;

    font-size: 23px;
}

.upa-recovery__intro-text {
    min-width: 0;
    padding-top: 1px;
}

.upa-recovery__heading {
    margin: 0 0 5px;

    color: #19336c;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.upa-recovery__description {
    margin: 0;

    color: #64748b;

    font-size: 12px;
    line-height: 1.7;
}


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

.upa-recovery__form {
    width: 100%;
}

.upa-recovery__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;

    width: 100%;
}


/* =========================================================
   JUDUL LANGKAH
   ========================================================= */

.upa-recovery__section-title {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
    margin: 0;
}

.upa-recovery__section-title--next {
    margin-top: 5px;
}

.upa-recovery__step {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    background: #e8f1ff;
    color: #075db9;

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

.upa-recovery__section-title > div {
    min-width: 0;
}

.upa-recovery__section-title h6 {
    margin: 0 0 3px;

    color: #19336c;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.upa-recovery__section-title p {
    margin: 0;

    color: #8190a5;

    font-size: 11px;
    line-height: 1.6;
}


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

.upa-recovery__field {
    width: 100%;
    min-width: 0;
}

.upa-recovery__field > label {
    display: block;

    margin-bottom: 7px;

    color: #475569;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.upa-recovery__input-wrap {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
}

.upa-recovery__input-icon {
    position: absolute;
    left: 13px;
    z-index: 1;

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

    color: #8193ad;

    font-size: 18px;

    pointer-events: none;
}

.upa-recovery__input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 42px;

    margin: 0;
    padding: 9px 12px 9px 40px;

    border: 1px solid #d5deea;
    border-radius: 7px;

    outline: none;

    background: #ffffff;
    color: #334155;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.upa-recovery__input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.upa-recovery__input:hover:not(:disabled):not([readonly]) {
    border-color: #a9bad1;
}

.upa-recovery__input:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 3px rgba(22, 119, 210, 0.12);
}

.upa-recovery__input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.upa-recovery__input[readonly] {
    background: #f8fafc;
    color: #475569;
    cursor: default;
}

.upa-recovery__hint {
    display: block;

    margin-top: 6px;

    color: #8190a5;

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   HASIL PENCARIAN MAHASISWA
   ========================================================= */

.upa-recovery__search-results {
    width: 100%;
    max-height: 220px;

    margin-top: 8px;

    overflow-y: auto;

    border: 1px solid #dbe4f0;
    border-radius: 8px;

    background: #ffffff;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.upa-recovery__result {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 11px 12px;

    border: 0;
    border-bottom: 1px solid #edf1f7;

    background: #ffffff;
    color: #334155;

    text-align: left;
    font-family: inherit;

    cursor: pointer;

    transition: background-color 0.15s ease;
}

.upa-recovery__result:last-child {
    border-bottom: 0;
}

.upa-recovery__result:hover,
.upa-recovery__result:focus-visible {
    outline: none;
    background: #f3f7ff;
}

.upa-recovery__result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 35px;
    height: 35px;

    border-radius: 8px;

    background: #e8f1ff;
    color: #075db9;

    font-size: 19px;
}

.upa-recovery__result-info {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.upa-recovery__result-nim {
    color: #19336c;

    font-size: 12px;
    font-weight: 700;
}

.upa-recovery__result-name {
    color: #64748b;

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

    overflow-wrap: anywhere;
}


/* =========================================================
   STATUS PENCARIAN
   ========================================================= */

.upa-recovery__status {
    display: block;

    margin-top: 7px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.6;
}

.upa-recovery__status--success {
    color: #15803d;
}

.upa-recovery__status--error {
    color: #dc2626;
}

.upa-recovery__status--loading {
    color: #075db9;
}


/* =========================================================
   KARTU IDENTITAS MAHASISWA
   NIM DI ATAS, NAMA DI BAWAH
   ========================================================= */

.upa-recovery__student {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-width: 0;

    margin-top: 12px;
    padding: 13px;

    border: 1px solid #bfdbfe;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #f0f7ff 0%,
        #ffffff 100%
    );

    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.04);

    animation: upaRecoveryReveal 0.2s ease-out;
}


/* IKON MAHASISWA */

.upa-recovery__student-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 43px;
    height: 43px;

    border: 1px solid #d5e6ff;
    border-radius: 10px;

    background: #e0edff;
    color: #075db9;

    font-size: 23px;
}


/* AREA INFORMASI */

.upa-recovery__student-info {
    display: flex;
    flex-direction: column;
    gap: 8px;

    flex: 1;
    min-width: 0;
}


/* BARIS NIM DAN NAMA */

.upa-recovery__student-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    min-width: 0;
}


/* LABEL NIM / NAMA */

.upa-recovery__student-label {
    color: #8190a5;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}


/* NILAI NIM */

.upa-recovery__student-nim {
    color: #19336c;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* NAMA MAHASISWA */

.upa-recovery__student-name {
    color: #334155;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* TOMBOL GANTI */

.upa-recovery__student-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    flex-shrink: 0;

    min-height: 32px;
    padding: 6px 9px;

    border: 1px solid #cfe0f8;
    border-radius: 7px;

    background: #ffffff;
    color: #075db9;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.upa-recovery__student-change i {
    font-size: 15px;
}

.upa-recovery__student-change:hover {
    border-color: #075db9;
    background: #eaf3ff;
}

.upa-recovery__student-change:focus-visible {
    outline: 2px solid #1684ff;
    outline-offset: 2px;
}


/* =========================================================
   METODE PEMULIHAN
   ========================================================= */

.upa-recovery__method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    min-width: 0;

    padding: 12px 13px;

    border: 1px solid #e1e8f2;
    border-radius: 9px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.upa-recovery__method:has(
    .upa-recovery__switch input:checked
) {
    border-color: #b6d4fe;
    background: #f7faff;
}

.upa-recovery__method-info {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}

.upa-recovery__method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    font-size: 21px;
}

.upa-recovery__method-icon--email {
    background: #e8f1ff;
    color: #075db9;
}

.upa-recovery__method-icon--whatsapp {
    background: #e8f8ef;
    color: #16834a;
}

.upa-recovery__method-info > div {
    min-width: 0;
}

.upa-recovery__method-info h6 {
    margin: 0 0 4px;

    color: #334155;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.upa-recovery__method-info p {
    margin: 0;

    color: #8190a5;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   SWITCH / TOGGLE
   ========================================================= */

.upa-recovery__switch {
    position: relative;

    display: inline-flex;
    flex-shrink: 0;

    width: 42px;
    height: 24px;

    margin: 0;

    cursor: pointer;
}

.upa-recovery__switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
}

.upa-recovery__switch-slider {
    position: absolute;
    inset: 0;

    border-radius: 30px;

    background: #cbd5e1;

    transition: background-color 0.2s ease;
}

.upa-recovery__switch-slider::before {
    position: absolute;
    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);

    content: "";

    transition: transform 0.2s ease;
}

.upa-recovery__switch input:checked
+ .upa-recovery__switch-slider {
    background: #075db9;
}

.upa-recovery__switch input:checked
+ .upa-recovery__switch-slider::before {
    transform: translateX(18px);
}

.upa-recovery__switch input:focus-visible
+ .upa-recovery__switch-slider {
    outline: 2px solid #1684ff;
    outline-offset: 3px;
}


/* SWITCH DISABLED */

.upa-recovery__switch input:disabled
+ .upa-recovery__switch-slider {
    background: #e2e8f0;
    cursor: not-allowed;
}

.upa-recovery__switch:has(input:disabled) {
    cursor: not-allowed;
}

.upa-recovery__method:has(
    .upa-recovery__switch input:disabled
) {
    background: #fafbfd;
}


/* =========================================================
   DETAIL EMAIL / WHATSAPP
   ========================================================= */

.upa-recovery__conditional {
    width: 100%;
    min-width: 0;

    padding: 13px;

    border: 1px solid #dbeafe;
    border-radius: 9px;

    background: #f8fbff;

    animation: upaRecoveryReveal 0.2s ease-out;
}


/* =========================================================
   NOTIFIKASI / INFORMASI KEAMANAN
   ========================================================= */

.upa-recovery__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 20px;
    padding: 12px 13px;

    border: 1px solid #f5dfaa;
    border-radius: 8px;

    background: #fff8e8;
    color: #996b16;
}

.upa-recovery__notice > i {
    display: block;
    flex-shrink: 0;

    margin-top: 1px;

    font-size: 17px;
    line-height: 1.5;
}

.upa-recovery__notice p {
    min-width: 0;

    margin: 0;

    font-size: 11px;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


/* STATUS SUKSES */

.upa-recovery__notice--success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}


/* STATUS ERROR */

.upa-recovery__notice--error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}


/* =========================================================
   TOMBOL AKSI
   ========================================================= */

.upa-recovery__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid #e8edf5;
}

.upa-recovery__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 9px 14px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.upa-recovery__button i {
    font-size: 16px;
}


/* TOMBOL RESET */

.upa-recovery__button--secondary {
    border-color: #d5deea;

    background: #ffffff;
    color: #52647e;
}

.upa-recovery__button--secondary:hover {
    border-color: #a9bad1;
    background: #f8fafc;
}


/* TOMBOL AJUKAN */

.upa-recovery__button--primary {
    border-color: #075db9;

    background: #075db9;
    color: #ffffff;

    box-shadow: 0 3px 8px rgba(7, 93, 185, 0.16);
}

.upa-recovery__button--primary:hover:not(:disabled) {
    border-color: #064c98;

    background: #064c98;

    box-shadow: 0 4px 12px rgba(7, 93, 185, 0.22);
}


/* TOMBOL DISABLED */

.upa-recovery__button:disabled {
    border-color: #cbd5e1;

    background: #e2e8f0;
    color: #94a3b8;

    box-shadow: none;

    cursor: not-allowed;
}


/* FOCUS KEYBOARD */

.upa-recovery__button:focus-visible {
    outline: 2px solid #1684ff;
    outline-offset: 3px;
}


/* =========================================================
   ANIMASI
   ========================================================= */

@keyframes upaRecoveryReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 768px) {

    .upa-recovery__intro {
        margin-bottom: 18px;
    }

    .upa-recovery__grid {
        gap: 13px;
    }

    .upa-recovery__notice {
        margin-top: 18px;
    }

}


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

@media (max-width: 480px) {

    .upa-recovery {
        font-size: 13px;
    }

    .upa-recovery__intro {
        gap: 10px;

        margin-bottom: 18px;
        padding: 12px;
    }

    .upa-recovery__icon {
        width: 36px;
        height: 36px;

        font-size: 21px;
    }

    .upa-recovery__heading {
        font-size: 13px;
    }

    .upa-recovery__description {
        font-size: 11px;
    }

    .upa-recovery__grid {
        gap: 12px;
    }

    .upa-recovery__section-title {
        gap: 9px;
    }

    .upa-recovery__step {
        width: 27px;
        height: 27px;
    }

    .upa-recovery__section-title h6 {
        font-size: 12px;
    }

    .upa-recovery__section-title p {
        font-size: 10px;
    }

    .upa-recovery__input {
        height: 41px;
        font-size: 13px;
    }

    .upa-recovery__method {
        gap: 8px;
        padding: 10px;
    }

    .upa-recovery__method-info {
        gap: 9px;
    }

    .upa-recovery__method-icon {
        width: 34px;
        height: 34px;

        font-size: 19px;
    }

    .upa-recovery__method-info h6 {
        font-size: 11px;
    }

    .upa-recovery__method-info p {
        font-size: 10px;
    }

    .upa-recovery__switch {
        width: 40px;
        height: 23px;
    }

    .upa-recovery__switch-slider::before {
        width: 17px;
        height: 17px;
    }

    .upa-recovery__switch input:checked
    + .upa-recovery__switch-slider::before {
        transform: translateX(17px);
    }

    /* Kartu identitas mahasiswa */

    .upa-recovery__student {
        gap: 9px;
        padding: 10px;
    }

    .upa-recovery__student-avatar {
        width: 37px;
        height: 37px;

        font-size: 20px;
    }

    .upa-recovery__student-info {
        gap: 7px;
    }

    .upa-recovery__student-label {
        font-size: 9px;
    }

    .upa-recovery__student-nim,
    .upa-recovery__student-name {
        font-size: 12px;
    }

    .upa-recovery__student-change {
        min-height: 30px;
        padding: 5px 7px;

        font-size: 10px;
    }

    .upa-recovery__student-change i {
        font-size: 14px;
    }

    .upa-recovery__conditional {
        padding: 11px;
    }

    .upa-recovery__notice {
        gap: 8px;

        margin-top: 16px;
        padding: 10px;
    }

    .upa-recovery__notice p {
        font-size: 10px;
    }

    .upa-recovery__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;

        margin-top: 16px;
        padding-top: 14px;
    }

    .upa-recovery__button {
        width: 100%;
        min-width: 0;

        padding: 9px 6px;

        font-size: 11px;
    }

}


/* =========================================================
   MOBILE SANGAT KECIL
   ========================================================= */

@media (max-width: 360px) {

    .upa-recovery__student {
        flex-wrap: wrap;
    }

    .upa-recovery__student-info {
        flex-basis: calc(100% - 55px);
    }

    .upa-recovery__student-change {
        margin-left: auto;
    }

    .upa-recovery__method {
        padding: 9px;
    }

    .upa-recovery__method-info {
        gap: 7px;
    }

    .upa-recovery__method-icon {
        width: 31px;
        height: 31px;
    }

    .upa-recovery__actions {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   AKSESIBILITAS: KURANGI ANIMASI
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .upa-recovery__input,
    .upa-recovery__button,
    .upa-recovery__method,
    .upa-recovery__switch-slider,
    .upa-recovery__switch-slider::before,
    .upa-recovery__student-change {
        transition: none;
    }

    .upa-recovery__conditional,
    .upa-recovery__student {
        animation: none;
    }

}
/* =====================================================
   REVISI OPSI LOGIN
   Ingat Saya & Lupa Password
   Font bertambah 1px dari ukuran sebelumnya
   ===================================================== */

.upa_loginPages .upa-login__options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Checkbox dan teks Ingat Saya */
.upa_loginPages .upa-login__remember {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

/* Ukuran checkbox */
.upa_loginPages .upa-login__remember input[type="checkbox"] {
    display: inline-block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #087df3;
    cursor: pointer;
}

/* Tombol Lupa Password */
.upa_loginPages button.upa-login__link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    color: #0076f5;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.5;
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
}

.upa_loginPages button.upa-login__link:hover {
    color: #004ca8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.upa_loginPages button.upa-login__link:focus-visible {
    outline: 2px solid #1684ff;
    outline-offset: 3px;
    border-radius: 2px;
}

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

@media (max-width: 480px) {
    .upa_loginPages .upa-login__options {
        gap: 8px;
    }

    .upa_loginPages .upa-login__remember {
        gap: 5px;
        font-size: 11px;
    }

    .upa_loginPages button.upa-login__link {
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .upa_loginPages .upa-login__options {
        gap: 6px;
    }

    .upa_loginPages .upa-login__remember {
        gap: 4px;
        font-size: 10px;
    }

    .upa_loginPages button.upa-login__link {
        font-size: 10px;
    }
}
/* =========================================
   PERBAIKAN JARAK VERTIKAL AREA LOGIN
   ========================================= */

/* Area opsi login */
.upa_loginPages .upa-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 24px;
    margin: 5px 0 12px;
    padding: 0;
    box-sizing: border-box;
}

/* Checkbox Ingat Saya */
.upa_loginPages .upa-login__remember {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

/* Ukuran checkbox */
.upa_loginPages .upa-login__remember input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    flex-shrink: 0;
}

/* Tombol Lupa Password */
.upa_loginPages button.upa-login__link {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}

/* Tombol Masuk */
.upa_loginPages .upa-login__submit {
    margin-top: 0;
}

/* Jarak sebelum pemisah "atau masuk dengan" */
.upa_loginPages .upa-login__divider {
    margin-top: 12px;
}
.upa-validasi__panel-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.upa-validasi__form {
    width: 100%;
    margin: 0;
}

.upa-validasi__panel {
    width: 100%;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

.upa-validasi__panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 28px;
}

.upa-validasi__logo-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
}

.upa-validasi__crest {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.upa-validasi__panel-title {
    margin: 0;
    color: #172554;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.upa-validasi__panel-subtitle {
    margin: 6px 0 14px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.upa-validasi__gold-line {
    display: block;
    width: 58px;
    height: 4px;
    background: #c9a227;
    border-radius: 10px;
}

.upa-validasi__intro {
    margin-bottom: 26px;
    text-align: center;
}

.upa-validasi__icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: #b38b19;
    background: #fff8df;
    border: 1px solid #f3e6b3;
    border-radius: 50%;
    font-size: 25px;
}

.upa-validasi__title {
    margin: 0 0 10px;
    color: #172554;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.upa-validasi__description {
    max-width: 340px;
    margin: 0 auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.upa-validasi__field {
    margin-bottom: 22px;
}

.upa-validasi__label {
    display: block;
    margin-bottom: 9px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.upa-validasi__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.upa-validasi__input-icon {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 16px;
    pointer-events: none;
}

.upa-validasi__input {
    display: block;
    width: 100%;
    height: 54px;
    padding: 12px 16px 12px 46px;
    color: #172554;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.upa-validasi__input::placeholder {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}

.upa-validasi__input:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.12);
}

.upa-validasi__field-hint {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.upa-validasi__submit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 13px 18px;
    color: #ffffff;
    background: #172554;
    border: 1px solid #172554;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.upa-validasi__submit:hover {
    background: #243b78;
    border-color: #243b78;
}

.upa-validasi__submit:active {
    transform: translateY(1px);
}

.upa-validasi__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.upa-validasi__resend {
    margin-top: 22px;
    text-align: center;
}

.upa-validasi__resend-text {
    display: inline;
    margin: 0 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.upa-validasi__link {
    padding: 0;
    color: #a17c12;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.upa-validasi__link:hover {
    color: #795d0b;
    text-decoration: underline;
}

.upa-validasi__back {
    margin-top: 18px;
    text-align: center;
}

.upa-validasi__back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.upa-validasi__back-button:hover {
    color: #172554;
    background: #f8fafc;
}

.upa-validasi__security {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    color: #64748b;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    line-height: 1.7;
}

.upa-validasi__security-icon {
    flex-shrink: 0;
    color: #a17c12;
    font-size: 14px;
}

@media (max-width: 480px) {
    .upa-validasi__panel-wrap {
        max-width: 100%;
    }

    .upa-validasi__panel {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .upa-validasi__crest {
        width: 66px;
        height: 66px;
    }

    .upa-validasi__panel-title {
        font-size: 19px;
    }

    .upa-validasi__title {
        font-size: 20px;
    }

    .upa-validasi__description {
        font-size: 13px;
    }
}

.upa-validasi__timer-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 22px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.upa-validasi__timer-icon {
    color: #a17c12;
    font-size: 15px;
}

.upa-validasi__timer-label {
    color: #64748b;
    font-size: 13px;
}

.upa-validasi__timer {
    color: #172554;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.upa-validasi__timer.is-expired {
    color: #dc2626;
}

.upa-validasi__submit:disabled {
    color: #94a3b8;
    background: #e2e8f0;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 1;
}

.upa-validasi__submit:disabled:hover {
    color: #94a3b8;
    background: #e2e8f0;
    border-color: #e2e8f0;
}
/* =========================================================
   RECHANGE PASSWORD - PANEL WRAPPER
========================================================= */

.upa-rechangePass__panel-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
    font-family: inherit;
    color: #1f2937;
}

.upa-rechangePass__form {
    width: 100%;
    margin: 0;
    padding: 0;
}

.upa-rechangePass__panel {
    width: 100%;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.upa-rechangePass__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
    text-align: center;
}

.upa-rechangePass__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    font-size: 27px;
}

.upa-rechangePass__title {
    margin: 0 0 10px;
    color: #111827;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.upa-rechangePass__description {
    max-width: 320px;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================================
   FORM FIELD
========================================================= */

.upa-rechangePass__field {
    width: 100%;
    margin-bottom: 22px;
}

.upa-rechangePass__label {
    display: block;
    margin-bottom: 9px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.upa-rechangePass__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.upa-rechangePass__input-wrap:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.upa-rechangePass__input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    color: #9ca3af;
    font-size: 15px;
}

.upa-rechangePass__input-wrap:focus-within .upa-rechangePass__input-icon {
    color: #2563eb;
}

.upa-rechangePass__input {
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0 8px 0 0;
    color: #111827;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    line-height: normal;
}

.upa-rechangePass__input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.upa-rechangePass__input:disabled {
    cursor: not-allowed;
    color: #9ca3af;
    background: #f9fafb;
}

.upa-rechangePass__field-hint {
    display: block;
    margin-top: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   TOGGLE PASSWORD VISIBILITY
========================================================= */

.upa-rechangePass__toggle-password {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 50px;
    margin: 0;
    padding: 0;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 0 10px 10px 0;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    transition: color 0.2s ease;
}

.upa-rechangePass__toggle-password:hover {
    color: #2563eb;
}

.upa-rechangePass__toggle-password:focus-visible {
    color: #2563eb;
    outline: 2px solid #2563eb;
    outline-offset: -4px;
}


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

.upa-rechangePass__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 6px 0 0;
    padding: 14px 20px;
    color: #ffffff;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 10px;
    outline: none;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.upa-rechangePass__submit:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.22);
    transform: translateY(-1px);
}

.upa-rechangePass__submit:active {
    transform: translateY(0);
}

.upa-rechangePass__submit:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 3px;
}

.upa-rechangePass__submit:disabled {
    color: #9ca3af;
    background: #e5e7eb;
    border-color: #e5e7eb;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.upa-rechangePass__submit i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.upa-rechangePass__submit:hover i {
    transform: translateX(3px);
}


/* =========================================================
   BACK TO LOGIN
========================================================= */

.upa-rechangePass__back {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
}

.upa-rechangePass__back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 8px 12px;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 6px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.2s ease, background 0.2s ease;
}

.upa-rechangePass__back-button:hover {
    color: #2563eb;
    background: #eff6ff;
}

.upa-rechangePass__back-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.upa-rechangePass__back-button i {
    font-size: 12px;
}


/* =========================================================
   SECURITY INFORMATION
========================================================= */

.upa-rechangePass__security {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

.upa-rechangePass__security-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: #2563eb;
    font-size: 14px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 768px) {
    .upa-rechangePass__panel-wrap {
        max-width: 440px;
        padding: 20px;
    }

    .upa-rechangePass__panel {
        padding: 28px;
        border-radius: 18px;
    }

    .upa-rechangePass__title {
        font-size: 22px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 480px) {
    .upa-rechangePass__panel-wrap {
        max-width: 100%;
        padding: 14px;
    }

    .upa-rechangePass__panel {
        padding: 24px 20px;
        border-radius: 16px;
        box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
    }

    .upa-rechangePass__intro {
        margin-bottom: 24px;
    }

    .upa-rechangePass__icon-wrap {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
        border-radius: 17px;
        font-size: 24px;
    }

    .upa-rechangePass__title {
        font-size: 21px;
    }

    .upa-rechangePass__description {
        font-size: 13px;
    }

    .upa-rechangePass__field {
        margin-bottom: 20px;
    }

    .upa-rechangePass__label {
        font-size: 12px;
    }

    .upa-rechangePass__input-wrap {
        min-height: 49px;
    }

    .upa-rechangePass__input {
        height: 47px;
        font-size: 13px;
    }

    .upa-rechangePass__input-icon {
        width: 40px;
        font-size: 14px;
    }

    .upa-rechangePass__toggle-password {
        width: 42px;
        height: 47px;
        font-size: 14px;
    }

    .upa-rechangePass__submit {
        min-height: 49px;
        padding: 13px 16px;
        font-size: 13px;
    }

    .upa-rechangePass__security {
        gap: 8px;
        margin-top: 20px;
        padding: 12px;
        font-size: 11px;
    }
}


/* =========================================================
   ACCESSIBILITY - REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .upa-rechangePass__input-wrap,
    .upa-rechangePass__toggle-password,
    .upa-rechangePass__submit,
    .upa-rechangePass__submit i,
    .upa-rechangePass__back-button {
        transition: none;
    }

    .upa-rechangePass__submit:hover,
    .upa-rechangePass__submit:active {
        transform: none;
    }
}

/* =========================================
   SWEETALERT2 - OVERLAY
========================================= */

.swal2-container.swal2-backdrop-show {
    background: rgba(8, 25, 48, 0.65);
}

/* =========================================
   SWEETALERT2 - POPUP
========================================= */

.swal2-popup.upa-alert {
    display: flex;
    flex-direction: column;
    width: 28rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
    background: #ffffff;
    font-family: inherit;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
}

/* =========================================
   HEADER - UNIVERSITAS PATRIA ARTHA
========================================= */

.swal2-popup.upa-alert .upa-alert__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #082b59 0%, #164477 100%);
    border-bottom: 3px solid #c9a227;
    text-align: left;
}

/* Logo kampus */

.swal2-popup.upa-alert .upa-alert__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
}

.swal2-popup.upa-alert .upa-alert__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Identitas kampus */

.swal2-popup.upa-alert .upa-alert__branding {
    flex: 1;
    min-width: 0;
}

.swal2-popup.upa-alert .upa-alert__university {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.swal2-popup.upa-alert .upa-alert__subtitle {
    margin-top: 0.2rem;
    color: #d8e4f5;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    line-height: 1.5;
}

/* =========================================
   AREA KONTEN ALERT
========================================= */

.swal2-popup.upa-alert .swal2-icon {
    flex-shrink: 0;
    margin: 1.5rem auto 0.75rem;
}

.swal2-popup.upa-alert .swal2-title {
    margin: 0;
    padding: 0 1.25rem;
    color: #183153;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
}

.swal2-popup.upa-alert .swal2-html-container {
    margin: 0.75rem 0 0;
    padding: 0 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* =========================================
   IKON INFORMASI
========================================= */

.swal2-popup.upa-alert .swal2-icon.swal2-info {
    border-color: #60a5fa;
    color: #2563eb;
}

/* =========================================
   TOMBOL AKSI
========================================= */

.swal2-popup.upa-alert .swal2-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1.5rem 0 1.25rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
}

.swal2-popup.upa-alert .swal2-confirm {
    min-width: 110px;
    margin: 0;
    padding: 0.7rem 1.5rem;
    border: 1px solid #1d4ed8;
    border-radius: 0.5rem;
    background: #1d4ed8;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 3px 8px rgba(29, 78, 216, 0.18);
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.swal2-popup.upa-alert .swal2-confirm:hover {
    background: #1e40af;
    border-color: #1e40af;
    box-shadow: 0 5px 12px rgba(29, 78, 216, 0.25);
}

.swal2-popup.upa-alert .swal2-confirm:active {
    transform: translateY(1px);
}

/* Hilangkan outline default yang mengganggu */

.swal2-popup.upa-alert .swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 480px) {
    .swal2-popup.upa-alert {
        width: calc(100vw - 2rem);
        max-width: 24rem;
        border-radius: 0.875rem;
    }

    .swal2-popup.upa-alert .upa-alert__header {
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .swal2-popup.upa-alert .upa-alert__logo {
        flex-basis: 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .swal2-popup.upa-alert .upa-alert__university {
        font-size: 0.85rem;
    }

    .swal2-popup.upa-alert .upa-alert__subtitle {
        font-size: 0.52rem;
        letter-spacing: 0.04em;
    }

    .swal2-popup.upa-alert .swal2-icon {
        margin-top: 1.25rem;
        margin-bottom: 0.65rem;
    }

    .swal2-popup.upa-alert .swal2-title {
        font-size: 1.25rem;
    }

    .swal2-popup.upa-alert .swal2-html-container {
        padding: 0 1rem;
        font-size: 0.8125rem;
    }

    .swal2-popup.upa-alert .swal2-actions {
        margin-top: 1.25rem;
        margin-bottom: 1rem;
    }
}
/* Popup utama */
.swal2-popup.upa-alert {
    display: flex;
    flex-direction: column;
    width: 28rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    font-family: inherit;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
}

/* Header kampus */
.swal2-popup.upa-alert .upa-alert__header {
    order: -1;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #082b59, #164477);
    border-bottom: 3px solid #c9a227;
    text-align: left;
}

/* Logo */
.swal2-popup.upa-alert .upa-alert__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
}

.swal2-popup.upa-alert .upa-alert__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nama universitas */
.swal2-popup.upa-alert .upa-alert__branding {
    flex: 1;
    min-width: 0;
}

.swal2-popup.upa-alert .upa-alert__university {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
}

.swal2-popup.upa-alert .upa-alert__subtitle {
    margin-top: 0.2rem;
    color: #d8e4f5;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

/* Ikon */
.swal2-popup.upa-alert .swal2-icon {
    margin: 1.5rem auto 0.75rem;
}

/* Judul */
.swal2-popup.upa-alert .swal2-title {
    margin: 0;
    padding: 0 1.25rem;
    color: #183153;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Pesan */
.swal2-popup.upa-alert .swal2-html-container {
    margin: 0.75rem 0 0;
    padding: 0 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* Tombol */
.swal2-popup.upa-alert .swal2-actions {
    margin: 1.5rem 0 1.25rem;
}

.swal2-popup.upa-alert .swal2-confirm {
    min-width: 110px;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: none;
}

.swal2-popup.upa-alert .swal2-confirm:hover {
    background: #1e40af;
}

/* Responsive */
@media (max-width: 480px) {
    .swal2-popup.upa-alert {
        width: calc(100vw - 2rem);
    }

    .swal2-popup.upa-alert .upa-alert__header {
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .swal2-popup.upa-alert .upa-alert__logo {
        flex-basis: 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .swal2-popup.upa-alert .upa-alert__university {
        font-size: 0.85rem;
    }

    .swal2-popup.upa-alert .upa-alert__subtitle {
        font-size: 0.52rem;
    }
}
/* =========================================
   SWEETALERT2 - PRESISI JUDUL
========================================= */

.swal2-popup.upa-alert .swal2-title {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1rem;
    color: #183153;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0;
    transform: none;
}

/* Jarak ikon ke judul */
.swal2-popup.upa-alert .swal2-icon {
    margin-bottom: 0.5rem;
}

/* Jarak judul ke pesan */
.swal2-popup.upa-alert .swal2-html-container {
    margin-top: 0.5rem;
    text-align: center;
}