/*
 * AFISGO_SISFO_LOGIN_DESKTOP_CSS_V1
 *
 * KHUSUS DESKTOP >= 1101px
 *
 * Tidak berlaku pada:
 * - HP
 * - mobile
 * - tablet / layar <= 1100px
 */

@media screen and (min-width: 1101px) {

    /*
     * Background gedung Al-Fityan Gowa.
     *
     * Overlay dibuat cukup terang agar hero text
     * tetap terbaca dengan jelas.
     */
    .af-page {
        background:
            linear-gradient(
                90deg,
                rgba(250, 252, 245, .91) 0%,
                rgba(250, 252, 245, .84) 32%,
                rgba(248, 251, 247, .72) 58%,
                rgba(244, 249, 245, .64) 100%
            ),
            url("/images/sisfo/al-fityan-gowa-dashboard.jpg")
            center center / cover no-repeat !important;
    }

    /*
     * Pertahankan header bersih.
     */
    .af-header {
        background: rgba(255, 255, 255, .92) !important;

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

    /*
     * Login card tetap sangat terbaca,
     * tapi sedikit menyatu dengan foto.
     */
    .af-login-card {
        background: rgba(255, 255, 255, .93) !important;

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

        box-shadow:
            0 30px 75px rgba(15, 23, 42, .13) !important;
    }

    /*
     * Feature card hero diperjelas di atas foto.
     */
    .af-feature {
        background: rgba(255, 255, 255, .90) !important;

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

    /*
     * Tombol login melalui Presensi:
     * HANYA DISEMBUNYIKAN PADA DESKTOP.
     *
     * HTML aslinya tetap ada.
     */
    .afisgo-presensi-login-btn {
        display: none !important;
    }

    /*
     * Hilangkan wrapper kosong setelah tombol disembunyikan.
     * Berlaku desktop saja.
     */
    .mt-5:has(> .afisgo-presensi-login-btn) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/*
 * ==========================================================
 * AFISGO_SISFO_DESKTOP_TEXT_CLEANUP_V1
 *
 * KHUSUS DESKTOP >= 1101px.
 * Tidak mengubah HTML.
 * Tidak berlaku pada mobile / HP.
 * ==========================================================
 */

@media screen and (min-width: 1101px) {

    /*
     * Kicker:
     * hapus pengulangan nama Al-Fityan.
     */
    .af-kicker {
        font-size: 0 !important;
    }

    .af-kicker::after {
        content: "Pusat Layanan Digital Terpadu";
        font-size: 13.5px;
        line-height: 1.2;
        font-weight: 900;
        color: var(--af-dark);
    }


    /*
     * HERO TITLE
     *
     * Text node "SISFO AL-FITYAN GOWA" disembunyikan
     * hanya secara visual pada desktop.
     *
     * Span .green tetap dipakai sehingga judul menjadi:
     * Portal Layanan Digital Terpadu
     */
    .af-title {
        font-size: 0 !important;
        margin-top: 16px !important;
        line-height: 1 !important;
    }

    .af-title .green {
        display: block !important;

        font-size: clamp(54px, 4.15vw, 72px) !important;
        line-height: .94 !important;
        letter-spacing: -.055em !important;

        color: var(--af-dark) !important;
    }


    /*
     * Paragraf hero.
     */
    .af-lead {
        font-size: 0 !important;
        max-width: 770px !important;
        margin-top: 20px !important;
    }

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

    .af-lead::before {
        content:
            "SISFO menghubungkan layanan administrasi, pembelajaran, presensi, data sekolah, eRapor, notifikasi, dan layanan unit dalam satu pintu akses yang rapi, aman, dan mudah digunakan.";

        display: block;

        font-size: 16px;
        line-height: 1.65;
        font-weight: 650;

        color: #35465e;
    }


    /*
     * LOGIN TITLE
     */
    .af-login-title {
        font-size: 0 !important;
        line-height: 1 !important;
    }

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

        display: block;

        font-size: 28px;
        line-height: 1.15;
        font-weight: 900;
        letter-spacing: -.035em;

        color: var(--af-text);
    }


    /*
     * Login description.
     */
    .af-login-desc {
        font-size: 0 !important;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

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

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

        display: block;

        font-size: 14px;
        line-height: 1.55;
        font-weight: 650;

        color: #52627a;
    }


    /*
     * Sedikit rapikan proporsi hero.
     */
    .af-shell {
        gap: 64px !important;
    }

    .af-actions {
        margin-top: 10px !important;
    }

    .af-feature-grid {
        margin-top: 24px !important;
    }


    /*
     * Kartu fitur dibuat sedikit lebih tenang.
     */
    .af-feature {
        min-height: 108px !important;
        padding: 14px 16px 13px !important;
    }
}


/*
 * AFISGO_DESKTOP_LOGIN_CARD_DOWN_V1
 * Desktop only.
 */
@media screen and (min-width: 1101px) {

    .af-login-wrap {
        transform: translateY(40px) !important;
    }

}


/*
 * ==========================================================
 * AFISGO_DESKTOP_HERO_VERTICAL_RHYTHM_V1
 *
 * Koreksi komposisi menyeluruh hero desktop.
 *
 * Desktop >= 1101px ONLY.
 * Mobile / HP tidak terkena aturan ini.
 * ==========================================================
 */

@media screen and (min-width: 1101px) {

    /*
     * Seluruh kolom hero dimulai dari garis atas yang sama.
     *
     * Sebelumnya align-items:center membuat keseimbangan vertikal
     * terlalu tergantung tinggi masing-masing kolom.
     */
    .af-shell {
        align-items: start !important;

        /*
         * Beri ruang nyata setelah HERO.
         *
         * Karena menggunakan padding/layout normal, section modul
         * yang berada setelah hero ikut turun secara natural.
         *
         * BUKAN transform dan BUKAN absolute positioning.
         */
        padding-bottom: 64px !important;
    }


    /*
     * Panel login sedikit lebih rendah daripada kicker kiri.
     *
     * Target visual:
     * bagian atas card lebih dekat dengan area awal headline,
     * bukan menempel pada bagian paling atas hero.
     *
     * Margin adalah bagian dari layout normal sehingga tidak
     * menyebabkan tabrakan dengan section berikutnya.
     */
    .af-login-wrap {
        margin-top: 10px !important;
        align-self: start !important;
    }


    /*
     * Pastikan login card tidak membawa margin bawah aneh.
     */
    .af-login-card {
        margin-bottom: 0 !important;
    }


    /*
     * Sedikit ruang setelah tiga feature-card kiri.
     * Ini membantu komposisi kiri dan kanan berhenti dengan
     * ritme visual yang lebih seimbang.
     */
    .af-feature-grid {
        margin-bottom: 0 !important;
    }
}


/*
 * ==========================================================
 * AFISGO_DESKTOP_COMPOSITION_FINAL_V1
 *
 * DESKTOP >= 1101px ONLY
 *
 * Tujuan:
 * - hilangkan action button hero
 * - naikkan feature cards
 * - sejajarkan card login dengan bagian atas hero
 * - rampingkan lebar card login
 * - jaga ruang sebelum modul
 *
 * Mobile / HP TIDAK TERKENA.
 * ==========================================================
 */

@media screen and (min-width: 1101px) {

    /*
     * 1. KOMPOSISI HERO
     *
     * Jangan center vertikal.
     * Kiri dan kanan dimulai dari garis atas yang sama.
     */
    .af-shell {
        align-items: start !important;

        /*
         * Ruang sebelum deretan modul.
         */
        padding-bottom: 58px !important;
    }


    /*
     * 2. HAPUS DUA TOMBOL HERO DESKTOP
     *
     * HTML tetap ada.
     * Mobile tetap menampilkannya seperti semula.
     */
    .af-actions {
        display: none !important;
    }


    /*
     * 3. FEATURE CARD KIRI
     *
     * Setelah tombol hilang, kartu naik dan mendapatkan
     * jarak yang proporsional dari paragraf.
     */
    .af-feature-grid {
        margin-top: 24px !important;
        margin-bottom: 0 !important;
    }


    /*
     * 4. LOGIN COLUMN
     *
     * Lebar dibuat lebih ramping.
     *
     * justify-self:start penting:
     * sisi KIRI card tetap mengikuti posisi kolom sekarang,
     * lalu sisi kanan yang dipangkas.
     *
     * Jadi card tidak sekadar bergeser ke kanan.
     */
    .af-login-wrap {
        width: 520px !important;
        max-width: 520px !important;

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

        /*
         * Hilangkan dorongan turun sebelumnya.
         * Card mengikuti garis atas grid secara natural.
         */
        margin-top: 0 !important;

        transform: none !important;
    }


    /*
     * 5. LOGIN CARD
     */
    .af-login-card {
        width: 100% !important;
        max-width: 520px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /*
     * Input jangan keluar dari card yang sekarang lebih ramping.
     */
    .af-login-card input,
    .af-login-card button {
        max-width: 100%;
    }


    /*
     * Deskripsi login sedikit dibatasi agar lebih enak dibaca
     * dalam card yang ramping.
     */
    .af-login-desc {
        max-width: 430px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/*
 * ==========================================================
 * AFISGO_DESKTOP_PREMIUM_POLISH_V1
 *
 * DESKTOP >= 1101px ONLY.
 *
 * Fokus:
 * - login card lebih ringkas
 * - modul lebih dekat ke hero
 * - background lebih hidup
 * - glass / shadow lebih premium
 *
 * Mobile / HP tidak berubah.
 * ==========================================================
 */

@media screen and (min-width: 1101px) {

    /*
     * ------------------------------------------------------
     * 1. BACKGROUND
     * ------------------------------------------------------
     *
     * Kurangi "kabut putih" tetapi sisi kiri tetap cukup
     * terang agar headline terbaca.
     */
    .af-page {
        background:
            linear-gradient(
                90deg,
                rgba(250, 252, 245, .84) 0%,
                rgba(250, 252, 245, .75) 30%,
                rgba(248, 251, 247, .61) 58%,
                rgba(245, 249, 246, .48) 100%
            ),
            url("/images/sisfo/al-fityan-gowa-dashboard.jpg")
            center center / cover no-repeat !important;
    }


    /*
     * ------------------------------------------------------
     * 2. HERO VERTICAL RHYTHM
     * ------------------------------------------------------
     *
     * Sebelumnya ruang bawah cukup besar.
     * Dipadatkan agar modul naik secara natural.
     */
    .af-shell {
        padding-bottom: 34px !important;
    }


    /*
     * ------------------------------------------------------
     * 3. LOGIN CARD
     * ------------------------------------------------------
     *
     * Lebar tetap 520px dari komposisi sebelumnya.
     * Yang diringkas adalah tinggi/padding-nya.
     */
    .af-login-wrap {
        margin-top: 0 !important;
        transform: none !important;
        align-self: start !important;
    }

    .af-login-card {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .94),
                rgba(251, 255, 247, .88)
            ) !important;

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

        box-shadow:
            0 28px 70px rgba(15, 23, 42, .13),
            0 8px 24px rgba(20, 97, 82, .065),
            inset 0 1px 0 rgba(255, 255, 255, .92) !important;

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

    /*
     * Inilah bagian utama yang memendekkan card.
     * Tidak menyentuh form atau HTML.
     */
    .af-login-inner {
        padding-top: 22px !important;
        padding-bottom: 24px !important;
    }


    /*
     * Judul dan deskripsi dibuat sedikit lebih rapat.
     */
    .af-login-title {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }

    .af-login-desc {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        line-height: 1.5 !important;
    }


    /*
     * Field dibuat sedikit lebih kompak,
     * tetapi tetap nyaman untuk desktop.
     */
    .af-field {
        margin-bottom: 14px !important;
    }

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

    .af-login-options {
        margin-top: 2px !important;
        margin-bottom: 16px !important;
    }

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


    /*
     * ------------------------------------------------------
     * 4. FEATURE CARDS KIRI
     * ------------------------------------------------------
     *
     * Glass effect tipis agar menyatu dengan login card.
     */
    .af-feature {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .91),
                rgba(251, 255, 248, .84)
            ) !important;

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

        box-shadow:
            0 18px 46px rgba(15, 23, 42, .075),
            inset 0 1px 0 rgba(255, 255, 255, .9) !important;

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


    /*
     * ------------------------------------------------------
     * 5. HEADER
     * ------------------------------------------------------
     *
     * Sedikit lebih ringan supaya tidak bersaing dengan hero.
     */
    .af-header {
        background: rgba(255, 255, 255, .93) !important;

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

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

}