/**
 * File: responsive.css
 * TOTAL OVERHAUL - FORCE BLOCK SYSTEM (FINAL VERSION)
 */
 
/* ================================================================
   1. BLOCK CLOSE MENU DI DESKTOP (PROTEKSI FULL)
   ================================================================ */
@media screen and (min-width: 1024px) {
    .close-menu, 
    button.close-menu,
    [style*="text-align: right"],
    [style*="color: rgb(243, 156, 18)"] { 
        display: none !important; 
        visibility: hidden !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ================================================================
   2. STRUKTUR MOBILE (MODERN PRO LOOK & FULL SYMMETRY)
   ================================================================ */
@media screen and (max-width: 1023px) {

    /* --- TOP BAR & HEADER --- */
    .top-bar { background: #001a35 !important; padding: 8px 0 !important; border-bottom: 2px solid #ffcc00 !important; }
    .top-bar .container { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0 15px !important; }
    .top-info span:nth-child(1), .top-info span:nth-child(2) { display: none !important; }
    .top-info span:last-child { display: flex !important; align-items: center !important; background: rgba(255, 255, 255, 0.1) !important; padding: 5px 12px !important; border-radius: 50px !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; gap: 6px !important; }
    .btn-portal { background: #ffcc00 !important; color: #001a35 !important; padding: 6px 15px !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 10px !important; }

    .site-header .container { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 15px !important; }
    .site-branding { display: flex !important; align-items: center !important; gap: 12px !important; }
    .logo-img-main { max-height: 55px !important; }
    .initial-title { color: #ffffff !important; font-size: 20px !important; font-weight: 800 !important; margin: 0 !important; }
    .site-description { display: none !important; }

    .nav-action-wrapper { display: flex !important; align-items: center !important; gap: 8px !important; position: static !important; }
    .menu-toggle, .search-trigger { background: #f39c12 !important; color: #ffffff !important; width: 42px !important; height: 42px !important; border-radius: 8px !important; border: none !important; display: flex !important; justify-content: center !important; align-items: center !important; }

    /* --- OVERLAY MENU (MODERN PRO GRADIENT) --- */
    #site-navigation.main-navigation {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100vh !important;
        background: linear-gradient(160deg, #001a35 0%, #002d5a 100%) !important; 
        z-index: 999999 !important; 
        display: none !important;
        overflow-y: auto !important;
        scroll-behavior: smooth !important;
    }
    #site-navigation.main-navigation.toggled-on { display: block !important; }

    /* LABEL MENU NAVIGASI */
    #primary-menu.nav-menu::before {
        content: "MENU NAVIGASI" !important;
        display: block !important;
        padding: 35px 25px 15px 25px !important;
        color: #ffcc00 !important; 
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        opacity: 0.8 !important;
    }

    #primary-menu.nav-menu { 
        display: flex !important; 
        flex-direction: column !important; 
        width: 100% !important; 
        padding-bottom: 60px !important;
    }

    #primary-menu.nav-menu li { width: 100% !important; display: block !important; position: relative !important; clear: both !important; }

    /* Menu Utama Link */
    #primary-menu.nav-menu > li > a { 
        color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; 
        padding: 22px 25px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; 
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        text-transform: uppercase !important; letter-spacing: 1px !important;
    }

    /* --- SUB-MENU LEVEL 2 & 3 (SIMETRIS) --- */
    #primary-menu.nav-menu ul.sub-menu {
        display: none !important; position: static !important; width: 100% !important;
        background: rgba(0, 0, 0, 0.2) !important; margin: 0 !important; padding: 5px 0 !important;
        border: none !important; transform: none !important;
    }

    #primary-menu.nav-menu li.toggled-on > ul.sub-menu { display: block !important; animation: fadeInDown 0.4s ease forwards !important; }

    /* Link Sub-menu (Umum) */
    #primary-menu.nav-menu ul.sub-menu li a {
        color: rgba(255, 255, 255, 0.85) !important; padding: 16px 25px 16px 55px !important;
        font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important;
        position: relative !important; letter-spacing: 0.8px !important; border: none !important;
    }

    /* GARIS INDIKATOR LEVEL 2 */
    #primary-menu.nav-menu ul.sub-menu li a::before {
        content: "" !important; position: absolute !important; left: 25px !important;
        top: 20%; height: 60%; width: 3px !important; background: #f39c12 !important; border-radius: 2px !important;
    }

    /* KHUSUS LEVEL 3 */
    #primary-menu.nav-menu ul.sub-menu ul.sub-menu li a { padding-left: 85px !important; background: rgba(0, 0, 0, 0.1) !important; }
    #primary-menu.nav-menu ul.sub-menu ul.sub-menu li a::before { left: 55px !important; background: rgba(255, 255, 255, 0.3) !important; width: 2px !important; }

    /* --- FOOTER BRANDING --- */
    #primary-menu.nav-menu::after {
        content: "BAK UNIVERSITAS TADULAKO \000A © 2026 - Transformasi Layanan Terpadu" !important;
        white-space: pre-wrap !important; display: block !important;
        padding: 80px 40px !important; color: rgba(255, 255, 255, 0.35) !important;
        font-size: 11px !important; text-align: center !important; text-transform: uppercase !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important; margin-top: 20px !important;
    }

    /* IKON PANAH */
    .menu-item-has-children > a::after { content: '\f140' !important; font-family: dashicons !important; color: #f39c12 !important; font-size: 18px !important; }
    li.toggled-on > a::after { content: '\f142' !important; }

    @keyframes fadeInDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
   FIX SIMETRIS HERO MOBILE (OPTIMIZED)
   ================================================================ */

@media (max-width: 991px) {
    /* 1. Paksa Row agar tidak memakai gaya flex-side-by-side */
    .hero-section .row {
        display: block !important; /* Ubah ke block agar kolom bertumpuk sempurna */
        text-align: center;
        min-height: auto;
        padding: 80px 0; /* Memberi ruang atas bawah agar lega */
    }

    /* 2. Sembunyikan container foto sepenuhnya */
    .leader-wrapper-left, 
    .col-lg-5.d-none.d-lg-block {
        display: none !important;
    }

    /* 3. Buat kolom teks (col-lg-7) mengambil 100% lebar layar */
    .col-lg-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 20px;
        margin: 0 !important;
    }

    /* 4. Reset margin content agar tidak terdorong ke salah satu sisi */
    .hero-content-right {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        background: none !important; /* Hapus background/blur jika ada di mobile */
        backdrop-filter: none !important;
    }

    .hero-title {
        font-size: 2.2rem !important; /* Sesuaikan ukuran judul di HP */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 25px auto !important;
    }

    /* 5. Simetriskan tombol */
    .hero-actions {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* ================================================================
   FIX NAVIGATION ARROWS (AGAR TIDAK MENUTUPI TEKS DI HP)
   ================================================================ */

@media (max-width: 991px) {
    /* 1. Atur Jarak Tombol Navigasi ke Pinggir Layar */
    .carousel-control-prev {
        left: -10px !important; /* Geser lebih mepet ke kiri luar */
        justify-content: flex-start;
        padding-left: 20px;
        z-index: 20;
    }

    .carousel-control-next {
        right: -10px !important; /* Geser lebih mepet ke kanan luar */
        justify-content: flex-end;
        padding-right: 20px;
        z-index: 20;
    }

    /* 2. Perkecil Ukuran Tombol Navigasi agar Tidak Mengganggu */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px !important; /* Ukuran lebih kecil dari standar desktop */
        height: 30px !important;
        background-color: rgba(0, 0, 0, 0.3); /* Beri background tipis agar tetap terlihat */
        border-radius: 50%;
        background-size: 60%; /* Sesuaikan ukuran icon segitiganya */
    }

    /* 3. Beri Padding Tambahan pada Teks Konten */
    .hero-content-right {
        padding-left: 45px !important; /* Beri jarak aman agar teks tidak kena icon */
        padding-right: 45px !important;
    }

    .hero-title {
        font-size: 2rem !important; /* Sedikit dikecilkan agar tidak terlalu lebar ke samping */
    }
}

/**
 * File: responsive.css
 * MODUL: LAYANAN UTAMA (MEDIA QUERIES)
 */

/* 1. Tablet & Layar Menengah (< 1100px) */
@media (max-width: 1100px) {
    .layanan-section .row {
        flex-wrap: wrap; /* Izinkan turun baris agar tidak gepeng */
        justify-content: center;
        gap: 20px;
    }
    .layanan-section .col {
        flex: 0 0 calc(33.33% - 20px); /* 3 kolom di tablet */
        max-width: calc(33.33% - 20px);
    }
}

/* 2. Mobile Smartphone (< 768px) */
@media (max-width: 768px) {
    .layanan-section {
        padding: 40px 0;
    }
    .layanan-section .col {
        flex: 0 0 calc(50% - 10px); /* 2 kolom presisi sesuai referensi */
        max-width: calc(50% - 10px);
    }
    .layanan-card {
        padding: 15px;
        border-radius: 15px;
    }
    .layanan-icon {
        width: 65px;
        height: 65px;
    }
    .layanan-icon i {
        font-size: 28px !important;
    }
    .layanan-name {
        font-size: 0.8rem;
    }
}

/* 3. Mobile Kecil (< 450px) */
@media (max-width: 450px) {
    .layanan-section .col {
        flex: 0 0 calc(50% - 8px); /* Tetap 2 kolom tapi gap lebih rapat */
        max-width: calc(50% - 8px);
    }
    .layanan-icon {
        width: 55px;
        height: 55px;
    }
}

/**
 * FILE: responsive.css
 * DESKRIPSI: Aturan layout khusus Tablet dan HP untuk BAK Untad
 */

/* --- 1. Tampilan Tablet & iPad (Lebar di bawah 1024px) --- */
@media (max-width: 1024px) {
    .beasiswa-grid {
        gap: 20px;
    }

    .beasiswa-card {
        /* Berubah jadi 2 kolom di tablet */
        flex: 0 1 calc(50% - 20px); 
    }

    .beasiswa-section {
        padding: 60px 0;
    }
}

/* --- 2. Tampilan HP Layar Besar / Landscape (Di bawah 768px) --- */
@media (max-width: 768px) {
    .beasiswa-grid {
        gap: 25px;
    }

    .beasiswa-card {
        /* Berubah jadi 1 kolom full di HP */
        flex: 0 1 100%; 
        margin-bottom: 10px;
    }
    
    .beasiswa-thumb {
        /* Gambar sedikit lebih pendek di HP supaya tidak memakan layar */
        height: 180px; 
    }

    .beasiswa-title {
        font-size: 1.1rem;
    }
}

/* --- 3. Tampilan HP Layar Kecil (Di bawah 480px) --- */
@media (max-width: 480px) {
    .beasiswa-section {
        padding: 40px 0;
    }

    .beasiswa-content {
        padding: 20px; /* Padding lebih sempit agar konten luas */
    }

    .beasiswa-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .beasiswa-excerpt {
        font-size: 0.85rem;
        -webkit-line-clamp: 2; /* Ringkasan lebih pendek di HP kecil */
    }

    .btn-beasiswa {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
}

/* --- Responsive Berita & Pengumuman --- */
@media (max-width: 991px) {
    .news-magazine-grid { 
        grid-template-columns: 1fr; /* Jadi satu kolom memanjang */
        gap: 30px;
    }
    
    .news-thumb-big { 
        height: 280px; /* Di HP jangan terlalu tinggi biar gak menuhin layar */
    }
    
    .news-title-big { 
        font-size: 1.5rem; /* Judul ngecil dikit biar gak berantakan */
    }

    .news-content-big {
        padding: 20px; /* Ruang lebih lega buat jempol scroll */
    }

    .news-side-item {
        padding: 10px;
    }

    .side-thumb {
        width: 90px; /* Gambar samping ngecil dikit di HP */
        height: 70px;
    }
}

/* --- Responsive Statistik --- */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet jadi 2 kolom */
        gap: 20px;
    }
    .stat-number {
        font-size: 2.8rem;
    }
}

@media (max-width: 576px) {
    .stats-section {
        padding: 60px 0;
    }
    .stats-grid {
        grid-template-columns: 1fr; /* HP jadi 1 kolom memanjang */
    }
    .stat-item {
        padding: 20px;
    }
    .stat-number {
        font-size: 2.5rem;
    }
    .stat-label {
        font-size: 0.9rem;
    }
}

/* ========================================================
   RESPONSIVE SATU KOLOM (ANTI GAGAL)
   ======================================================== */

@media (max-width: 991px) {
    /* Paksa GRID jadi BLOCK agar kartu turun ke bawah */
    .archive-berita-page .beasiswa-modern-grid,
    .archive-beasiswa-page .beasiswa-modern-grid {
        display: block !important; 
        width: 100% !important;
        padding: 0 !important;
    }

    /* Paksa KARTU jadi LEBAR PENUH */
    .archive-berita-page .beasiswa-pro-card,
    .archive-beasiswa-page .beasiswa-pro-card {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-bottom: 25px !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Paksa CONTAINER simetris tengah */
    .archive-berita-page .container-mewah,
    .archive-beasiswa-page .container-mewah {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Fix Gambar agar proporsional */
    .beasiswa-pro-card .pro-card-image {
        height: 200px !important;
    }
}
    /* ========================================================
   FIX TOMBOL: SIMETRIS TENGAH (MOBILE)
   ======================================================== */

@media (max-width: 768px) {
    /* 1. Pastikan area pembungkus tombol lebar penuh & rata tengah */
    .back-action-area {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 30px 0 50px 0 !important; /* Jarak atas & bawah */
        clear: both !important;
    }

    /* 2. Buat Tombol jadi kotak simetris mengikuti lebar container */
    .btn-pro-home {
        display: flex !important; /* Flex supaya icon & teks di tengah */
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important; /* Lebar penuh */
        max-width: 100% !important;
        padding: 16px 0 !important; /* Tinggi tombol */
        margin: 0 auto !important; /* Kunci di tengah */
        border-radius: 12px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        text-decoration: none !important;
    }

    /* 3. Rapikan Pagination juga biar tidak menempel */
    .pagination-wrapper {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 25px !important;
    }
}

/* ========================================================
   RESPONSIVE: TOMBOL LIHAT SEMUA (FRONT-PAGE)
   ======================================================== */

/* Untuk Tablet dan Smartphone */
@media (max-width: 768px) {
    .archive-btn-wrapper-pro {
        margin-top: 30px;
        padding: 0 15px; /* Memberi jarak agar tombol tidak mepet pinggir layar */
    }

    .btn-lihat-semua-pro {
        width: 100%; /* Tombol jadi lebar penuh di HP agar mudah ditekan jari */
        justify-content: center; /* Teks tetap di tengah */
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* Penyesuaian Khusus HP agar Tidak Sempit */
@media (max-width: 576px) {
    .layanan-card-pro {
        padding: 20px 10px !important;
    }
    .layanan-name {
        font-size: 13px !important;
    }
}