.font-regular {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-medium {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.font-semibold {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.font-bold {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* ARIFIN login */
.arifin-login-body { min-height: 100vh; background: #0f1f36; }
.arifin-login-body #bgVideo { filter: saturate(.9) contrast(1.04); }
.arifin-login-body .video-overlay { background: linear-gradient(112deg, rgba(8, 27, 52, .38), rgba(8, 20, 37, .68)); }
.arifin-login-body .page-layer { padding: 28px 0; }
.arifin-login-shell { border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 24px 70px rgba(3, 13, 27, .36) !important; }
.arifin-login-left { isolation: isolate; min-height: 520px; padding: 32px !important; background-image: linear-gradient(180deg, rgba(6, 31, 60, .05) 35%, rgba(5, 20, 38, .84) 100%), url('../img/login-bg/login-bg-airnav.jpg') !important; }
.arifin-login-left::before { position: absolute; z-index: -1; inset: 0; content: ''; border-radius: 21px 0 0 21px; background: linear-gradient(105deg, rgba(32, 110, 190, .12), transparent 48%); }
.arifin-login-left .logo-airnav { top: 28px; left: 30px; max-width: 166px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .22)); }
.arifin-login-location { max-width: 355px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 11px; background: rgba(6, 24, 46, .3); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); backdrop-filter: blur(5px); line-height: 1.55; }
.arifin-login-panel { display: flex; min-height: 520px; align-items: center; padding: 42px 40px; }
.arifin-login-panel__content { width: 100%; max-width: 365px; margin: 0 auto; }
.arifin-login-eyebrow { margin-bottom: 9px; color: #4b6c9d; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.arifin-login-title { margin: 0; color: #273342; font-size: clamp(38px, 4vw, 48px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.arifin-login-subtitle { max-width: 310px; margin: 12px 0 31px; color: #667585; font-size: 13px; line-height: 1.6; }
.arifin-login-form .form-control { height: 54px; border: 1px solid #d8e0e8; border-radius: 10px; color: #263544; box-shadow: none; }
.arifin-login-form .form-floating > label { padding: 1rem 14px; color: #738190; }
.arifin-login-form .form-control:focus { border-color: #4b77af; box-shadow: 0 0 0 4px rgba(61, 110, 166, .12); }
.arifin-login-form .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 53, 69, .1); }
.arifin-login-remember { color: #647281; font-size: 12px; }
.arifin-login-remember .form-check-input { margin-top: .18em; border-color: #bdc8d2; }
.arifin-login-remember .form-check-input:checked { border-color: #365f97; background-color: #365f97; }
.arifin-login-submit { display: flex; min-height: 51px; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(105deg, #293b4f, #1c2734); box-shadow: 0 9px 18px rgba(28, 39, 52, .22); font-weight: 700; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.arifin-login-submit:hover, .arifin-login-submit:focus { color: #fff; background: linear-gradient(105deg, #315277, #203447); box-shadow: 0 12px 23px rgba(28, 54, 78, .28); transform: translateY(-1px); }
.arifin-login-help { margin-top: 20px; color: #8a96a2; font-size: 11px; text-align: center; }
.arifin-login-access-choice { max-width: 360px; }
.arifin-login-enik { padding: 0 18px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(105deg, #293b4f, #1c2734); box-shadow: 0 9px 18px rgba(28, 39, 52, .22); font-weight: 700; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.arifin-login-enik:hover, .arifin-login-enik:focus { color: #fff; background: linear-gradient(105deg, #315277, #203447); box-shadow: 0 12px 23px rgba(28, 54, 78, .28); transform: translateY(-1px); }
.arifin-login-access-choice__help { margin: 10px 2px 18px; color: #71808e; font-size: 11px; line-height: 1.45; }
.arifin-login-sso-pending { display: flex; min-height: 58px; flex-direction: column; justify-content: center; padding: 10px 13px; border: 1px dashed #cdd7e1; border-radius: 9px; color: #697a89; background: #f7f9fb; }
.arifin-login-sso-pending span { color: #526575; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.arifin-login-sso-pending small { margin-top: 3px; color: #82909c; font-size: 10px; line-height: 1.35; }
.arifin-mobile-brand { display: none; }

@media (max-width: 991.98px) {
    .arifin-login-left { min-height: 255px; }
    .arifin-login-left::before { border-radius: 21px 21px 0 0; }
    .arifin-login-panel { min-height: auto; padding: 36px 30px; }
}

@media (max-width: 767.98px) {
    .arifin-login-body .page-layer { padding: 12px 0; }
    .arifin-login-shell { border-radius: 16px; }
    .arifin-mobile-brand { display: flex; justify-content: center; margin: 0 auto 12px; }
    .arifin-mobile-brand img { width: min(142px, 42vw); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .32)); }
    /* Mobile hanya menampilkan header visual + logo agar form langsung terlihat. */
    .arifin-login-left { min-height: 136px; padding: 18px !important; }
    .arifin-login-left .logo-airnav, .arifin-home-left .logo-airnav { display: none; }
    .arifin-login-location { display: none; }
    .arifin-login-panel { padding: 27px 24px 29px; }
    .arifin-login-subtitle { margin: 9px 0 20px; }
    .arifin-login-remember { margin-bottom: 20px !important; }

    /* Halaman pemilihan akses: sisakan logo dan aksi masuk pada layar ponsel. */
    .arifin-home-left { min-height: 136px; padding: 18px !important; }
    .arifin-home-left .logo-airnav { top: 21px; left: 21px; max-width: 142px; }
    .arifin-home-location { display: none; }
    .arifin-home-panel { height: auto !important; min-height: 0 !important; padding: 27px 24px 29px !important; }
    .arifin-home-panel > h2 { font-size: 38px !important; }
    .arifin-home-panel > p { margin-bottom: 22px !important; }
}