/*
 * ==========================================================
 * AFISGO SISFO - MOBILE PREMIUM LOGIN V1
 * ==========================================================
 *
 * HANYA <= 1100px
 * Desktop tidak terkena aturan ini.
 */

@media screen and (max-width: 1100px) {

    /*
     * ------------------------------------------------------
     * 1. FULL SCREEN MOBILE
     * ------------------------------------------------------
     */

    html,
    body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        background: #edf6e8;
    }

    body {
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .af-page {
        position: relative;
        width: 100%;
        min-height: 100dvh;

        background:
            linear-gradient(
                180deg,
                rgba(243, 250, 247, .20) 0%,
                rgba(242, 249, 245, .08) 25%,
                rgba(246, 250, 244, .18) 60%,
                rgba(245, 249, 241, .38) 100%
            ),
            url("/images/sisfo/al-fityan-gowa-dashboard.jpg")
            center center / cover no-repeat !important;
    }


    /*
     * Foto lebih sinematik dan lembut.
     */
    .af-page::before {
        content: "";
        position: absolute;
        inset: 0;

        width: auto !important;
        height: auto !important;

        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        border-radius: 0 !important;
        animation: none !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.08) 0%,
                rgba(255,255,255,.03) 35%,
                rgba(247,250,241,.23) 100%
            ) !important;

        pointer-events: none;
        z-index: 0;
    }

    .af-page::after {
        display: none !important;
    }


    /*
     * ------------------------------------------------------
     * 2. HEADER MOBILE
     * ------------------------------------------------------
     */

    .af-top-strip {
        height: 5px !important;
    }

    .af-header {
        position: relative;
        z-index: 10;

        min-height: 72px !important;
        padding: 9px 14px !important;

        background: rgba(255,255,255,.72) !important;

        border-bottom: 1px solid rgba(255,255,255,.62) !important;

        box-shadow:
            0 10px 30px rgba(15,23,42,.055) !important;

        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    .af-brand-left {
        gap: 9px !important;
    }

    .af-brand-logo {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;

        border-radius: 15px !important;
    }

    .af-brand-logo img {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .af-brand-word strong {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .af-brand-word span {
        margin-top: 4px !important;
        font-size: 10px !important;
        letter-spacing: .08em;
    }


    /*
     * ------------------------------------------------------
     * 3. HILANGKAN LANDING PAGE PANJANG
     * ------------------------------------------------------
     *
     * HP hanya menampilkan area login.
     */

    .af-hero {
        display: none !important;
    }

    /*
     * Hanya login yang dipertahankan di dalam shell.
     */
    .af-shell {
        position: relative;
        z-index: 3;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            clamp(18px, 4vh, 34px)
            14px
            22px !important;

        min-height: calc(100dvh - 77px);

        box-sizing: border-box;
    }


    /*
     * ------------------------------------------------------
     * 4. LOGIN WRAPPER
     * ------------------------------------------------------
     */

    .af-login-wrap {
        width: 100% !important;
        max-width: 430px !important;

        margin:
            0 auto !important;

        transform: none !important;

        align-self: auto !important;
        justify-self: auto !important;
    }


    /*
     * ------------------------------------------------------
     * 5. PREMIUM GLASS CARD
     * ------------------------------------------------------
     */

    .af-login-card {
        position: relative;

        width: 100% !important;
        max-width: 430px !important;

        margin: 0 auto !important;

        border-radius: 30px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.91),
                rgba(249,253,244,.83)
            ) !important;

        border:
            1px solid rgba(255,255,255,.76) !important;

        box-shadow:
            0 28px 70px rgba(15,23,42,.15),
            0 10px 30px rgba(20,97,82,.08),
            inset 0 1px 0 rgba(255,255,255,.94) !important;

        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);

        overflow: hidden;
    }

    .af-login-card::before {
        opacity: .66 !important;
    }

    .af-login-card::after {
        opacity: .50 !important;
    }


    /*
     * ------------------------------------------------------
     * 6. ISI CARD
     * ------------------------------------------------------
     */

    .af-login-inner {
        padding:
            clamp(20px, 3.2vh, 30px)
            20px
            22px !important;
    }


    /*
     * Logo dalam card.
     *
     * Jika source sudah punya logo login,
     * proporsinya dibuat lebih compact.
     */
    .af-login-inner img {
        max-width: 76px;
        max-height: 76px;
    }


    /*
     * Judul.
     */
    .af-login-title {
        margin-top: 12px !important;
        margin-bottom: 8px !important;

        text-align: center;

        font-size: 0 !important;
        line-height: 1 !important;
    }

    .af-login-title::before {
        content: "Masuk ke SISFO";

        display: block;

        font-size: clamp(26px, 7vw, 32px);
        line-height: 1.08;

        font-weight: 900;

        letter-spacing: -.045em;

        color: #0f172a;
    }


    /*
     * Deskripsi mobile.
     */
    .af-login-desc {
        max-width: 340px !important;

        margin:
            0 auto 18px !important;

        text-align: center;

        font-size: 0 !important;
        line-height: 1 !important;
    }

    .af-login-desc > * {
        display: none !important;
    }

    .af-login-desc::before {
        content:
            "Gunakan akun SISFO yang telah terdaftar untuk mengakses layanan sesuai tugas dan kewenangan.";

        display: block;

        font-size: 13px;
        line-height: 1.55;

        font-weight: 650;

        color: #56657a;
    }


    /*
     * ------------------------------------------------------
     * 7. FORM
     * ------------------------------------------------------
     */

    .af-field {
        margin-bottom: 13px !important;
    }

    .af-field label {
        display: block;

        margin-bottom: 7px !important;

        font-size: 13px !important;
        font-weight: 800 !important;

        color: #0f172a !important;
    }

    .af-input-wrap {
        border-radius: 15px !important;
    }

    .af-input {
        width: 100%;

        min-height: 50px !important;

        border-radius: 15px !important;

        background:
            rgba(255,255,255,.84) !important;

        box-shadow:
            inset 0 0 0 1px rgba(148,163,184,.24) !important;

        font-size: 14px !important;
    }


    /*
     * Remember + forgot.
     */
    .af-login-options {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 12px !important;

        margin:
            3px 0 16px !important;
    }

    .af-check,
    .af-forgot {
        font-size: 12.5px !important;
    }


    /*
     * ------------------------------------------------------
     * 8. BUTTON
     * ------------------------------------------------------
     */

    .af-submit {
        width: 100% !important;

        min-height: 54px !important;

        border-radius: 17px !important;

        background:
            linear-gradient(
                135deg,
                #08765f,
                #146152
            ) !important;

        color: #fff !important;

        font-size: 15px !important;
        font-weight: 900 !important;

        letter-spacing: .18em !important;

        box-shadow:
            0 18px 36px rgba(20,97,82,.22) !important;
    }


    /*
     * ------------------------------------------------------
     * 9. TOMBOL PRESENSI
     * ------------------------------------------------------
     *
     * Untuk desain satu halaman yang bersih,
     * tombol sekunder disembunyikan di HP.
     *
     * HTML tidak dihapus.
     */
    .afisgo-presensi-login-btn {
        display: none !important;
    }

    .mt-5:has(> .afisgo-presensi-login-btn) {
        display: none !important;
        margin: 0 !important;
    }


    /*
     * ------------------------------------------------------
     * 10. SEMBUNYIKAN BAGIAN PANJANG SETELAH HERO LOGIN
     * ------------------------------------------------------
     *
     * Semua direct-child .af-page selain:
     * - top strip
     * - header
     * - shell/login
     *
     * disembunyikan pada HP.
     *
     * Ini yang membuat mobile menjadi single-screen,
     * bukan landing page panjang.
     */
    .af-page > *:not(.af-top-strip):not(.af-header):not(.af-shell) {
        display: none !important;
    }


    /*
     * ------------------------------------------------------
     * 11. SMALL PHONE TUNING
     * ------------------------------------------------------
     */

    @media screen and (max-width: 390px) {

        .af-header {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .af-brand-logo {
            width: 43px !important;
            height: 43px !important;
            min-width: 43px !important;
        }

        .af-brand-logo img {
            width: 38px !important;
            height: 38px !important;
        }

        .af-brand-word strong {
            font-size: 16px !important;
        }

        .af-brand-word span {
            font-size: 9px !important;
        }

        .af-shell {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .af-login-card {
            border-radius: 26px !important;
        }

        .af-login-inner {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

        .af-login-title::before {
            font-size: 25px;
        }

        .af-login-desc::before {
            font-size: 12.5px;
        }

    }


    /*
     * ------------------------------------------------------
     * 12. SHORT PHONE
     * ------------------------------------------------------
     *
     * Untuk HP yang layarnya pendek, card dipadatkan
     * agar tombol MASUK tetap terlihat.
     */
    @media screen and (max-height: 720px) {

        .af-shell {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        .af-login-inner {
            padding-top: 16px !important;
            padding-bottom: 16px !important;
        }

        .af-login-title {
            margin-top: 7px !important;
        }

        .af-login-desc {
            margin-bottom: 12px !important;
        }

        .af-field {
            margin-bottom: 9px !important;
        }

        .af-input {
            min-height: 46px !important;
        }

        .af-login-options {
            margin-bottom: 11px !important;
        }

        .af-submit {
            min-height: 49px !important;
        }

    }

}


/*
 * ==========================================================
 * AFISGO_MOBILE_PREMIUM_V11
 * ==========================================================
 *
 * KHUSUS MOBILE <= 1100px
 *
 * Fokus:
 * - compact header
 * - language tidak tabrakan
 * - true single screen
 * - login card lebih proporsional
 * - background lebih elegan
 *
 * Desktop tidak terkena aturan ini.
 */

@media screen and (max-width: 1100px) {

    /*
     * ======================================================
     * 1. TRUE MOBILE VIEWPORT
     * ======================================================
     */

    html,
    body {
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;

        margin: 0 !important;

        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body {
        position: relative;
    }

    .af-page {
        width: 100% !important;

        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;

        overflow: hidden !important;

        /*
         * Background lebih hidup.
         * Overlay sekarang lebih tipis daripada V1.
         */
        background:
            linear-gradient(
                180deg,
                rgba(245,250,247,.12) 0%,
                rgba(245,250,247,.04) 32%,
                rgba(247,251,245,.15) 65%,
                rgba(240,247,239,.24) 100%
            ),
            url("/images/sisfo/al-fityan-gowa-dashboard.jpg")
            center 38% / cover no-repeat !important;
    }


    /*
     * ======================================================
     * 2. HEADER SUPER COMPACT
     * ======================================================
     *
     * Pada mobile, brand desktop terlalu panjang.
     *
     * Semua child header kecuali language switch disembunyikan.
     * Brand mobile cukup "SISFO".
     *
     * Logo sudah tampil jelas di login card.
     */

    .af-top-strip {
        height: 4px !important;
        min-height: 4px !important;
    }

    .af-header {
        position: relative !important;
        z-index: 20 !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 56px !important;
        height: 56px !important;

        padding:
            6px
            14px !important;

        gap: 10px !important;

        background:
            rgba(255,255,255,.82) !important;

        border-bottom:
            1px solid rgba(255,255,255,.68) !important;

        box-shadow:
            0 8px 26px rgba(15,23,42,.045) !important;

        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);

        overflow: hidden !important;
    }


    /*
     * Hilangkan identitas desktop panjang.
     *
     * Child terakhir dipertahankan karena merupakan
     * area kontrol bahasa di sisi kanan.
     */
    .af-header > *:not(:last-child) {
        display: none !important;
    }


    /*
     * Brand mobile sederhana.
     */
    .af-header::before {
        content: "SISFO";

        display: block;

        min-width: 0;

        color: #146152;

        font-size: 22px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.035em;

        white-space: nowrap;
    }


    /*
     * Language control.
     */
    .af-header > :last-child {
        display: flex !important;

        position: static !important;

        justify-self: end !important;
        align-self: center !important;

        margin: 0 !important;

        max-width: 160px !important;

        transform: none !important;
    }


    /*
     * ======================================================
     * 3. LOGIN AREA = SISA VIEWPORT
     * ======================================================
     *
     * 4px top strip + 56px header = 60px.
     */

    .af-shell {
        position: relative !important;
        z-index: 5 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        height: calc(100svh - 60px) !important;
        min-height: 0 !important;
        max-height: calc(100svh - 60px) !important;

        margin: 0 !important;

        padding:
            10px
            12px
            calc(10px + env(safe-area-inset-bottom))
            !important;

        overflow: hidden !important;
    }


    /*
     * Landing tetap hilang.
     */
    .af-hero {
        display: none !important;
    }


    /*
     * ======================================================
     * 4. LOGIN WRAPPER
     * ======================================================
     */

    .af-login-wrap {
        display: block !important;

        width: min(100%, 410px) !important;
        max-width: 410px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        align-self: flex-start !important;
        justify-self: center !important;

        transform: none !important;
    }


    /*
     * ======================================================
     * 5. GLASS CARD V1.1
     * ======================================================
     *
     * Sedikit lebih solid daripada V1 supaya foto gedung
     * tidak mengganggu form.
     */

    .af-login-card {
        width: 100% !important;
        max-width: 410px !important;

        margin: 0 !important;

        border-radius: 28px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.955),
                rgba(249,253,245,.91)
            ) !important;

        border:
            1px solid rgba(255,255,255,.88) !important;

        box-shadow:
            0 26px 64px rgba(15,23,42,.16),
            0 8px 28px rgba(20,97,82,.08),
            inset 0 1px 0 rgba(255,255,255,.96)
            !important;

        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);

        overflow: hidden !important;
    }


    /*
     * Ornament card lebih lembut.
     */
    .af-login-card::before {
        opacity: .44 !important;
    }

    .af-login-card::after {
        opacity: .34 !important;
    }


    /*
     * ======================================================
     * 6. CARD CONTENT DIPADATKAN
     * ======================================================
     */

    .af-login-inner {
        padding:
            18px
            20px
            20px !important;
    }


    /*
     * Logo login sedikit lebih kecil.
     */
    .af-login-inner img {
        max-width: 66px !important;
        max-height: 66px !important;
    }


    /*
     * Judul.
     */
    .af-login-title {
        margin:
            9px
            0
            7px !important;
    }

    .af-login-title::before {
        font-size: 27px !important;
        line-height: 1.06 !important;
    }


    /*
     * Subtitle.
     */
    .af-login-desc {
        max-width: 310px !important;

        margin:
            0 auto
            15px !important;
    }

    .af-login-desc::before {
        font-size: 12.5px !important;
        line-height: 1.48 !important;

        font-weight: 620 !important;

        color: #5b687a !important;
    }


    /*
     * ======================================================
     * 7. FORM COMPACT PREMIUM
     * ======================================================
     */

    .af-field {
        margin-bottom: 11px !important;
    }

    .af-field label {
        margin-bottom: 5px !important;

        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }

    .af-input-wrap {
        border-radius: 14px !important;
    }

    .af-input {
        min-height: 47px !important;
        height: 47px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        border-radius: 14px !important;

        font-size: 13.5px !important;

        background:
            rgba(255,255,255,.91) !important;

        box-shadow:
            inset 0 0 0 1px rgba(148,163,184,.23),
            0 6px 18px rgba(15,23,42,.025)
            !important;
    }


    /*
     * Remember / forgot.
     */
    .af-login-options {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 10px !important;

        margin:
            1px
            0
            13px !important;
    }

    .af-check,
    .af-forgot {
        font-size: 11.5px !important;
    }


    /*
     * ======================================================
     * 8. MASUK BUTTON
     * ======================================================
     */

    .af-submit {
        min-height: 50px !important;
        height: 50px !important;

        border-radius: 16px !important;

        background:
            linear-gradient(
                135deg,
                #078267 0%,
                #146152 100%
            ) !important;

        box-shadow:
            0 15px 32px rgba(20,97,82,.21)
            !important;

        font-size: 14px !important;

        letter-spacing: .19em !important;
    }


    /*
     * ======================================================
     * 9. SECONDARY PRESENSI LOGIN
     * ======================================================
     */

    .afisgo-presensi-login-btn {
        display: none !important;
    }

    .mt-5:has(> .afisgo-presensi-login-btn) {
        display: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /*
     * ======================================================
     * 10. NO LONG LANDING CONTENT
     * ======================================================
     */

    .af-page > *:not(.af-top-strip):not(.af-header):not(.af-shell) {
        display: none !important;
    }


    /*
     * ======================================================
     * 11. VERY SMALL WIDTH
     * ======================================================
     */

    @media screen and (max-width: 390px) {

        .af-header {
            padding-left: 11px !important;
            padding-right: 11px !important;
        }

        .af-header::before {
            font-size: 20px;
        }

        .af-shell {
            padding-left: 9px !important;
            padding-right: 9px !important;
        }

        .af-login-card {
            border-radius: 25px !important;
        }

        .af-login-inner {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

        .af-login-title::before {
            font-size: 25px !important;
        }

        .af-login-desc {
            max-width: 290px !important;
        }

    }


    /*
     * ======================================================
     * 12. SHORT PHONE
     * ======================================================
     *
     * Misalnya HP landscape-ish / viewport pendek.
     * Tetap berusaha satu layar.
     */

    @media screen and (max-height: 760px) {

        .af-header {
            min-height: 52px !important;
            height: 52px !important;
        }

        .af-shell {
            height: calc(100svh - 56px) !important;
            max-height: calc(100svh - 56px) !important;

            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }

        .af-login-inner {
            padding-top: 13px !important;
            padding-bottom: 14px !important;
        }

        .af-login-inner img {
            max-width: 54px !important;
            max-height: 54px !important;
        }

        .af-login-title {
            margin-top: 5px !important;
            margin-bottom: 5px !important;
        }

        .af-login-title::before {
            font-size: 23px !important;
        }

        .af-login-desc {
            margin-bottom: 10px !important;
        }

        .af-login-desc::before {
            font-size: 11.5px !important;
            line-height: 1.4 !important;
        }

        .af-field {
            margin-bottom: 7px !important;
        }

        .af-input {
            min-height: 43px !important;
            height: 43px !important;
        }

        .af-login-options {
            margin-bottom: 8px !important;
        }

        .af-submit {
            min-height: 46px !important;
            height: 46px !important;
        }

    }

}


/*
 * ==========================================================
 * AFISGO_MOBILE_PREMIUM_V13_HEADER_FIX
 * ==========================================================
 *
 * Berdasarkan DOM aktual:
 *
 * .af-lang-switcher = DI LUAR .af-page/.af-header
 *
 * .af-header berisi:
 * - .af-brand-left
 * - .af-brand-center
 * - .af-header-badge
 *
 * MOBILE <=1100px ONLY
 */

@media screen and (max-width: 1100px) {

    /*
     * ======================================================
     * A. ZERO SCROLL
     * ======================================================
     */

    html,
    body {
        width: 100% !important;

        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;

        overscroll-behavior: none !important;
    }

    .af-page {
        width: 100% !important;

        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        overflow: hidden !important;
    }


    /*
     * ======================================================
     * B. HEADER
     * ======================================================
     */

    .af-top-strip {
        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
    }

    .af-header {
        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;

        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;

        padding:
            7px
            150px
            7px
            12px !important;

        box-sizing: border-box !important;

        background:
            rgba(255,255,255,.90) !important;

        border-bottom:
            1px solid rgba(255,255,255,.72) !important;

        box-shadow:
            0 8px 24px rgba(15,23,42,.045) !important;

        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);

        overflow: hidden !important;
    }


    /*
     * Hapus pseudo SISFO dari V1.1.
     */
    .af-header::before {
        content: none !important;
        display: none !important;
    }


    /*
     * BRAND KIRI:
     * hanya ini yang tampil dari tiga elemen header.
     */
    .af-brand-left {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        min-width: 0 !important;

        position: static !important;

        margin: 0 !important;

        transform: none !important;
    }


    /*
     * Bagian tengah desktop disembunyikan.
     */
    .af-brand-center {
        display: none !important;
    }


    /*
     * Badge Digital Al-Fityan School Gowa disembunyikan.
     */
    .af-header-badge {
        display: none !important;
    }


    /*
     * Logo kecil.
     */
    .af-brand-logo {
        display: grid !important;
        place-items: center !important;

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;

        flex:
            0
            0
            40px !important;

        border-radius: 12px !important;
    }

    .af-brand-logo img {
        width: 34px !important;
        height: 34px !important;

        max-width: 34px !important;
        max-height: 34px !important;
    }


    /*
     * Teks AL-FITYAN diganti visual menjadi SISFO.
     *
     * Source HTML tidak diubah.
     */
    .af-brand-word {
        display: block !important;

        min-width: 0 !important;
    }

    .af-brand-word strong {
        display: block !important;

        font-size: 0 !important;

        margin: 0 !important;

        line-height: 1 !important;
    }

    .af-brand-word strong::before {
        content: "SISFO";

        display: block;

        color: #146152;

        font-size: 20px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.035em;

        white-space: nowrap;
    }

    .af-brand-word span {
        display: none !important;
    }


    /*
     * ======================================================
     * C. LANGUAGE SWITCHER
     * ======================================================
     *
     * INI BUKAN CHILD HEADER.
     *
     * Jadi kita posisikan sendiri.
     */

    .af-lang-switcher {
        display: flex !important;

        position: fixed !important;

        top: 12px !important;
        right: 10px !important;
        left: auto !important;

        z-index: 100 !important;

        align-items: center !important;

        margin: 0 !important;

        padding: 4px !important;

        max-width: none !important;

        transform: none !important;

        border-radius: 999px !important;

        background:
            rgba(255,255,255,.94) !important;

        box-shadow:
            0 8px 22px rgba(15,23,42,.10) !important;

        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    html[dir="rtl"] .af-lang-switcher {
        right: auto !important;
        left: 10px !important;
    }

    .af-lang-switcher a {
        min-width: auto !important;

        padding:
            8px
            12px !important;

        border-radius: 999px !important;

        font-size: 11px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    .af-lang-switcher a.active {
        box-shadow:
            0 6px 14px rgba(20,97,82,.15) !important;
    }


    /*
     * ======================================================
     * D. LOGIN VIEWPORT
     * ======================================================
     *
     * 4px strip + 58px header = 62px
     */

    .af-shell {
        position: relative !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: center !important;

        width: 100% !important;

        height: calc(100dvh - 62px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 62px) !important;

        margin: 0 !important;

        padding:
            14px
            12px
            calc(8px + env(safe-area-inset-bottom))
            !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /*
     * Landing tetap hilang.
     */
    .af-hero {
        display: none !important;
    }


    /*
     * ======================================================
     * E. LOGIN CARD
     * ======================================================
     */

    .af-login-wrap {
        width: min(100%, 404px) !important;
        max-width: 404px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        transform: none !important;
    }

    .af-login-card {
        width: 100% !important;
        max-width: 404px !important;

        margin: 0 !important;

        border-radius: 27px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.97),
                rgba(250,253,247,.93)
            ) !important;

        border:
            1px solid rgba(255,255,255,.90) !important;

        box-shadow:
            0 25px 62px rgba(15,23,42,.15),
            0 8px 26px rgba(20,97,82,.075),
            inset 0 1px 0 rgba(255,255,255,.97)
            !important;

        -webkit-backdrop-filter: blur(23px);
        backdrop-filter: blur(23px);
    }


    /*
     * ======================================================
     * F. BACKGROUND
     * ======================================================
     */

    .af-page {
        background:
            linear-gradient(
                180deg,
                rgba(245,250,247,.09) 0%,
                rgba(245,250,247,.025) 35%,
                rgba(247,251,245,.12) 70%,
                rgba(240,247,239,.20) 100%
            ),
            url("/images/sisfo/al-fityan-gowa-dashboard.jpg")
            center 30% / cover no-repeat !important;
    }


    /*
     * ======================================================
     * G. SMALL PHONE
     * ======================================================
     */

    @media screen and (max-width: 390px) {

        .af-header {
            padding-left: 9px !important;
            padding-right: 135px !important;
        }

        .af-brand-logo {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;

            flex-basis: 36px !important;
        }

        .af-brand-logo img {
            width: 31px !important;
            height: 31px !important;
        }

        .af-brand-word strong::before {
            font-size: 18px !important;
        }

        .af-lang-switcher {
            top: 13px !important;
            right: 7px !important;
        }

        .af-lang-switcher a {
            padding:
                7px
                9px !important;

            font-size: 10px !important;
        }

        .af-shell {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

    }


    /*
     * ======================================================
     * H. SHORT SCREEN
     * ======================================================
     */

    @media screen and (max-height: 760px) {

        .af-header {
            height: 54px !important;
            min-height: 54px !important;
            max-height: 54px !important;
        }

        .af-lang-switcher {
            top: 10px !important;
        }

        .af-shell {
            height: calc(100dvh - 58px) !important;
            max-height: calc(100dvh - 58px) !important;

            padding-top: 7px !important;
            padding-bottom: 5px !important;
        }

        .af-login-inner {
            padding-top: 12px !important;
            padding-bottom: 13px !important;
        }

        .af-login-inner img {
            max-width: 55px !important;
            max-height: 55px !important;
        }

        .af-login-title {
            margin-top: 4px !important;
        }

        .af-login-title::before {
            font-size: 23px !important;
        }

        .af-login-desc {
            margin-bottom: 9px !important;
        }

        .af-field {
            margin-bottom: 7px !important;
        }

        .af-input {
            height: 42px !important;
            min-height: 42px !important;
        }

        .af-login-options {
            margin-bottom: 7px !important;
        }

        .af-submit {
            height: 45px !important;
            min-height: 45px !important;
        }

    }

}


/*
 * ==========================================================
 * AFISGO_MOBILE_HEADER_REMOVE_V14
 * ==========================================================
 *
 * MOBILE <=1100px ONLY
 *
 * Header institusi dihilangkan sepenuhnya.
 * Tinggal:
 * - language switch
 * - background gedung
 * - login card
 */

@media screen and (max-width: 1100px) {

    /*
     * HEADER MOBILE:
     * HAPUS TOTAL.
     */
    .af-header,
    .af-brand-left,
    .af-brand-center,
    .af-header-badge {
        display: none !important;
    }

    .af-header::before,
    .af-header::after {
        content: none !important;
        display: none !important;
    }


    /*
     * Strip warna tipis tetap dipertahankan
     * sebagai aksen brand.
     */
    .af-top-strip {
        display: block !important;

        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
    }


    /*
     * Language switch berdiri sendiri.
     */
    .af-lang-switcher {
        display: flex !important;

        position: fixed !important;

        top: 14px !important;
        right: 12px !important;
        left: auto !important;

        z-index: 1000 !important;

        margin: 0 !important;

        padding: 4px !important;

        transform: none !important;

        border-radius: 999px !important;

        background: rgba(255,255,255,.94) !important;

        box-shadow:
            0 8px 24px rgba(15,23,42,.11) !important;

        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    html[dir="rtl"] .af-lang-switcher {
        right: auto !important;
        left: 12px !important;
    }


    /*
     * Karena header sudah hilang,
     * shell sekarang hampir seluruh viewport.
     */
    .af-shell {
        width: 100% !important;

        height: calc(100dvh - 4px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 4px) !important;

        margin: 0 !important;

        /*
         * Sisakan ruang untuk language switch.
         * Card sekaligus naik dibanding sebelumnya.
         */
        padding:
            62px
            12px
            calc(8px + env(safe-area-inset-bottom))
            !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: center !important;

        overflow: hidden !important;
    }


    /*
     * Card dipertahankan bersih dan centered.
     */
    .af-login-wrap {
        width: min(100%, 404px) !important;
        max-width: 404px !important;

        margin: 0 auto !important;

        transform: none !important;
    }


    /*
     * Hilangkan semua konten landing lainnya.
     */
    .af-hero {
        display: none !important;
    }


    /*
     * Pastikan tidak ada scrolling.
     */
    html,
    body,
    .af-page,
    .af-shell {
        overflow: hidden !important;
        overflow-y: hidden !important;
    }


    /*
     * Small phone.
     */
    @media screen and (max-width: 390px) {

        .af-lang-switcher {
            top: 12px !important;
            right: 8px !important;
        }

        .af-lang-switcher a {
            padding: 7px 9px !important;
            font-size: 10px !important;
        }

        .af-shell {
            padding:
                56px
                8px
                6px
                !important;
        }

    }


    /*
     * HP dengan tinggi pendek.
     */
    @media screen and (max-height: 760px) {

        .af-lang-switcher {
            top: 8px !important;
        }

        .af-shell {
            padding-top: 48px !important;
            padding-bottom: 4px !important;
        }

    }

}


/*
 * AFISGO_MOBILE_LOGIN_RAISE_V15
 *
 * Kurangi jarak kosong antara language switch dan login card.
 * Mobile only.
 */

@media screen and (max-width: 1100px) {

    .af-shell {
        padding-top: 36px !important;
    }

    @media screen and (max-width: 390px) {
        .af-shell {
            padding-top: 34px !important;
        }
    }

    @media screen and (max-height: 760px) {
        .af-shell {
            padding-top: 30px !important;
        }
    }

}


/*
 * AFISGO_MOBILE_LOGIN_RAISE_V16
 * Mobile only.
 * Login card dinaikkan lebih dekat ke language switch.
 */

@media screen and (max-width: 1100px) {

    .af-shell {
        padding-top: 76px !important;
    }

    @media screen and (max-width: 390px) {
        .af-shell {
            padding-top: 68px !important;
        }
    }

    @media screen and (max-height: 760px) {
        .af-shell {
            padding-top: 58px !important;
        }
    }

}


/*
 * AFISGO_MOBILE_LOGO_ENLARGE_V18
 *
 * Logo login mobile diperbesar.
 * Desktop tidak disentuh.
 */

@media screen and (max-width: 1100px) {

    .af-login-inner img {
        max-width: 112px !important;
        max-height: 112px !important;
    }

    @media screen and (max-width: 390px) {
        .af-login-inner img {
            max-width: 96px !important;
            max-height: 96px !important;
        }
    }

    @media screen and (max-height: 760px) {
        .af-login-inner img {
            max-width: 84px !important;
            max-height: 84px !important;
        }
    }

}