/**
 * File: responsive.css
 * FIXED PRECISION MOBILE HEADER - NO OVERLAP SYSTEM (FINAL)
 * Integrasi Penuh: Navigasi, Hero, Layanan, Beasiswa, Berita, & Statistik Footer
 * FIX HEADER MOBILE: Teks Rapat Kiri, Otomatis Sebaris Tanpa Tabrakan Tombol Kanan
 * DIVISI WEBSITE & DESAIN - UPA TIK UNIVERSITAS TADULAKO
 */
 
/* ================================================================
   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 BREAKPOINT SMARTPHONE & TABLET (max-width: 1023px)
   ================================================================ */
@media screen and (max-width: 1023px) {

    /* --- TOP BAR (KASIH JARAK MASUK KANAN KIRI) --- */
    .top-bar { 
        background: #001a35 !important; 
        padding: 8px 15px !important; 
        border-bottom: 2px solid #ffcc00 !important; 
        box-sizing: border-box !important;
    }
    
    .top-bar .container { 
        display: flex !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        padding: 0 !important; 
        width: 100% !important;
        max-width: 100% !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;
        margin-left: 5px !important; 
    }
    
    .btn-portal,
    .top-bar a[href*="siga"],
    .top-bar .btn { 
        background: #ffcc00 !important; 
        color: #001a35 !important; 
        padding: 6px 15px !important; 
        border-radius: 6px !important; 
        font-weight: 800 !important; 
        font-size: 10px !important;
        margin-right: 5px !important; 
        display: inline-block !important;
    }

    /* --- HEADER UTAMA: RAPAT KIRI DAN MATIKAN SUNTIKAN TEXT --- */
    .site-header .container { 
        display: flex !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        padding: 12px 15px !important; 
        gap: 10px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Hapus bersih sisa-sisa pseudo content yang bikin berantakan sebelumnya */
    .site-header .container::after,
    .site-header .container::before,
    .site-branding::after,
    .site-branding::before {
        display: none !important;
        content: "" !important;
    }
    
    /* Area Branding Pas Mengikuti Ruang Kosong Sisa */
    .site-branding { 
        display: flex !important; 
        align-items: center !important; 
        justify-content: flex-start !important;
        flex: 1 !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Wadah Pembungkus Teks Judul & Tagline */
    .site-branding-text,
    .site-branding > a:not(.custom-logo-link),
    div[class*="branding-text"] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }
    
    /* Jaga ukuran logo kiri tetap presisi */
    .logo-img-main, 
    .site-branding img, 
    .custom-logo-link img { 
        max-height: 35px !important; 
        width: auto !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    /* FIX JUDUL UTAMA: Perkecil, Rapat Kiri, Paksa Selalu Sebaris */
    .site-title,
    .site-title a,
    h1.site-title { 
        display: block !important;
        visibility: visible !important;
        color: #ffffff !important;
        font-size: 13.5px !important; /* Ukuran pas proporsional di HP */
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.3px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: nowrap !important; /* Mencegah teks turun ke bawah */
    }

    /* FIX TAGLINE KUNING: Sembunyikan atau Perkecil Rapat Kiri */
    .site-description,
    .site-branding .site-description,
    span.site-description,
    p.site-description { 
        display: block !important; 
        visibility: visible !important;
        color: #ffcc00 !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: nowrap !important; /* Mencegah teks patah baris */
    }

    /* Pembungkus Kanan Rapat */
    .nav-action-wrapper,
    .header-action-container { 
        display: flex !important; 
        align-items: center !important; 
        justify-content: flex-end !important;
        gap: 6px !important; 
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    
    /* Tombol Search & Hamburger Kanan */
    .menu-toggle, .search-trigger { 
        background: #f39c12 !important; 
        color: #ffffff !important; 
        width: 36px !important; 
        height: 36px !important; 
        border-radius: 6px !important; 
        border: none !important; 
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important; 
        flex-shrink: 0 !important;
        margin: 0 !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; }

    #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; }

    #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 --- */
    #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; }

    #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;
    }

    #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;
    }

    /* 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; }

    #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;
    }

    .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); } }
}

/* ================================================================
   3. BREAKPOINT MEDIUM / TABLET (max-width: 1100px & 1024px)
   ================================================================ */
@media (max-width: 1100px) {
    .layanan-section .row { flex-wrap: wrap; justify-content: center; gap: 20px; }
    .layanan-section .col { flex: 0 0 calc(33.33% - 20px); max-width: calc(33.33% - 20px); }
}

@media (max-width: 1024px) {
    .beasiswa-grid { gap: 20px; }
    .beasiswa-card { flex: 0 1 calc(50% - 20px); }
    .beasiswa-section { padding: 60px 0; }
    .profile-banner-card { padding: 35px 25px !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .stat-number { font-size: 2.8rem; }
}

/* ================================================================
   4. BREAKPOINT UTAMA RESPONSIVE GABUNGAN (max-width: 991px)
   ================================================================ */
@media (max-width: 991px) {
    
    /* --- FIX SIMETRIS HERO MOBILE --- */
    .hero-section .row { display: block !important; text-align: center !important; min-height: auto; padding: 80px 0; }
    .leader-wrapper-left, .col-lg-5.d-none.d-lg-block { display: none !important; }
    .col-lg-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 20px; margin: 0 !important; }
    
    /* --- HERO CONTENT SLIDER CENTER --- */
    .hero-section .hero-content-right,
    .hero-section .elementor-slide-content,
    .hero-section .swiper-slide-contents,
    .hero-section .slider-content,
    .hero-section .carousel-caption,
    .hero-section .hero-slider-text-wrapper,
    .hero-section .elementor-slide-inner { 
        text-align: center !important; 
        margin: 0 auto !important; 
        left: 0 !important; right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important; 
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        width: 100% !important; max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero-section .hero-title, .hero-section h1, .hero-section h2, .hero-section .elementor-slide-heading, .hero-section .slider-title { 
        font-size: 1.8rem !important; width: 100% !important; max-width: 100% !important; text-align: center !important;
        margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 15px !important; display: block !important;
    }
    
    .hero-section .hero-subtitle, .hero-section p, .hero-section .elementor-slide-description, .hero-section .slider-desc { 
        font-size: 1.05rem !important; width: 90% !important; max-width: 90% !important; text-align: center !important;
        margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 25px !important; display: inline-block !important; line-height: 1.5 !important;
    }
    
    .hero-section .hero-actions, .hero-section .elementor-slide-button, .hero-section .elementor-button-wrapper, .hero-section a.btn { 
        display: inline-flex !important; justify-content: center !important; align-items: center !important; text-align: center !important;
        width: auto !important; min-width: 180px !important; margin-left: auto !important; margin-right: auto !important; float: none !important;
    }

    .carousel-control-prev { left: -10px !important; justify-content: flex-start; padding-left: 20px; z-index: 20; }
    .carousel-control-next { right: -10px !important; justify-content: flex-end; padding-right: 20px; z-index: 20; }
    .carousel-control-prev-icon, .carousel-control-next-icon { width: 30px !important; height: 30px !important; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; background-size: 60%; }

    /* --- RESPONSIVE BERITA --- */
    .news-magazine-grid { grid-template-columns: 1fr; gap: 30px; }
    .news-thumb-big { height: 280px; }
    .news-title-big { font-size: 1.5rem; }
    .news-content-big { padding: 20px; }
    .news-side-item { padding: 10px; }
    .side-thumb { width: 90px; height: 70px; }

    /* ================================================================
       RESTRUKTURISASI 3 KOTAK BERTINGKAT (MODERN, LUAS, SIMETRIS)
       ================================================================ */

    /* KOTAK TINGKAT 1: Jebol pembungkus terluar agar mepet ke dinding HP (Sisa 5px) */
    .archive-beasiswa-page .elementor-section .elementor-container,
    .single-beasiswa .elementor-section .elementor-container,
    .archive-beasiswa-page .elementor-column,
    .single-beasiswa .elementor-column,
    .archive-beasiswa-page .elementor-widget-wrap,
    .single-beasiswa .elementor-widget-wrap,
    .beasiswa-grid,
    div:has(> .beasiswa-card) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;  /* Jarak tipis 5px ke tepi kaca HP */
        padding-right: 5px !important; /* Jarak tipis 5px ke tepi kaca HP */
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* KOTAK TINGKAT 2: Lebarkan Card Putih Utama & Rapikan Layout-nya */
    .beasiswa-card,
    .beasiswa-pro-card,
    [class*="beasiswa-card"],
    .archive-beasiswa-page article,
    div:has(> .pro-card-image),
    div:has(> div > .wp-block-table) {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 15px 12px !important; /* Beri ruang bernapas di dalam card */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 25px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* KOTAK TINGKAT 3: Optimasi Tabel & Kolom PDF biar Pro & Anti-Terpotong */
    .wp-block-table, 
    table, 
    .elementor-widget-table {
        width: 100% !important;
        max-width: 100% !important;
        display: table !important; /* Kembalikan fungsi tabel murni */
        margin: 15px 0 0 0 !important;
        box-sizing: border-box !important;
    }

    /* Atur rasio lebar kolom tabel secara cerdas di HP */
    table th, table td {
        padding: 10px 8px !important;
        font-size: 13px !important; /* Sedikit dikecilkan agar teks pas di layar HP */
        word-break: break-word !important; /* Paksa potong teks per kata jika terlalu panjang */
    }

    /* Kolom 1 (Tahun) - Beri ruang minimal */
    table tr th:first-child, table tr td:first-child {
        width: 20% !important;
        text-align: center !important;
    }

    /* Kolom 2 (Nama / Keterangan Dokumen) - Diberi porsi paling luas */
    table tr th:nth-child(2), table tr td:nth-child(2) {
        width: 60% !important;
        text-align: left !important;
    }

    /* Kolom 3 (Tombol Download/Aksi) - Amankan di sisi kanan */
    table tr th:nth-child(3), table tr td:nth-child(3) {
        width: 20% !important;
        text-align: center !important;
    }

    /* Pastikan badge tahun di dalam tabel tidak merusak baris */
    table td .badge, table td [class*="year"] {
        display: inline-block !important;
        padding: 3px 6px !important;
        font-size: 11px !important;
    }

    /* --- OPTIMASI GAMBAR DAN TEKS PADA AREA UTAMA --- */
    .beasiswa-card .beasiswa-thumb,
    .beasiswa-pro-card .pro-card-image {
        height: 230px !important;
        width: 100% !important;
        overflow: hidden !important;
        display: block !important;
    }

    .beasiswa-card img, .beasiswa-pro-card .pro-card-image img {
        width: 100% !important;
        height: 230px !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }

    .beasiswa-card h3, [class*="beasiswa-title"], .single-beasiswa h1 {
        font-size: 1.4rem !important;
        line-height: 1.35 !important;
        padding: 5px 0 !important;
        text-align: left !important;
        font-weight: 700 !important;
    }

    /* --- ARCHIVE RESPONSIVE --- */
    .archive-berita-page .beasiswa-modern-grid, .archive-beasiswa-page .beasiswa-modern-grid { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 0 !important; }
    .archive-berita-page .container-mewah, .archive-beasiswa-page .container-mewah { width: 100% !important; max-width: 100% !important; padding-left: 5px !important; padding-right: 5px !important; margin: 0 auto !important; box-sizing: border-box !important; }

    /* --- STATISTIK FOOTER --- */
    .bak-footer-strict-col .widget_text, .bak-footer-strict-col .textwidget { width: 100% !important; box-sizing: border-box !important; text-align: left !important; padding: 0 !important; }
    .bak-footer-strict-col .textwidget p, .bak-footer-strict-col .textwidget div { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; text-align: left !important; width: 100% !important; }
    .bak-footer-strict-col .textwidget, .bak-footer-strict-col .textwidget span, .bak-footer-strict-col .textwidget label { font-size: 13.5px !important; color: #cbd5e1 !important; line-height: 1.4 !important; }
    .bak-footer-strict-col .textwidget img { width: 20px !important; height: auto !important; margin: 0 !important; display: inline-block !important; }
    .bak-footer-strict-col .textwidget strong, .bak-footer-strict-col .textwidget .counter-number { font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important; display: inline !important; }

    /* --- COUNTER 1 KOLOM --- */
    .stats-section .container, .stats-section .row, .stats-grid, .elementor-container:has(.elementor-counter), .elementor-row:has(.elementor-counter), div:has(> div > .elementor-counter) {
        display: block !important; width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important;
    }

    .stats-section [class*="col-"], .stats-grid > div, .stat-item, .elementor-column:has(.elementor-counter), div:has(> .elementor-counter) {
        display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; margin-bottom: 25px !important; padding: 30px 20px !important; border-radius: 15px !important; box-sizing: border-box !important;
    }

    .elementor-counter, .elementor-counter-number-wrapper, .elementor-counter-title, .stat-item h2, .stat-item p, div:has(> .elementor-counter) h2, div:has(> .elementor-counter) p, div:has(> .elementor-counter) span {
        text-align: center !important; justify-content: center !important; align-items: center !important; display: block !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important;
    }

    .elementor-counter img, div:has(> .elementor-counter) img, div:has(> .elementor-counter) svg { display: block !important; margin: 0 auto 15px auto !important; text-align: center !important; }
}

/* ================================================================
   5. BREAKPOINT MOBILE SMARTPHONE (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {
    .layanan-section { padding: 40px 0; }
    .layanan-section .col { flex: 0 0 calc(50% - 10px); 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; }

    body, html { overflow-x: hidden !important; }
    .site-main, .main-content, .page-section, .profile-section, .entry-content { padding-right: 20px !important; padding-left: 20px !important; box-sizing: border-box !important; }
    .site-main .row, .entry-content .row { margin-right: 0 !important; margin-left: 0 !important; gap: 20px !important; }
    .site-main .col, .site-main .col-md-*, .site-main .col-sm-* { padding-right: 0 !important; padding-left: 0 !important; width: 100% !important; max-width: 100% !important; }

    h1.entry-title, .page-title-section h1, h1 { font-size: 2.2rem !important; line-height: 1.2 !important; letter-spacing: 0.5px !important; margin-top: 15px !important; margin-bottom: 25px !important; word-wrap: break-word !important; text-align: left !important; }

    .profile-banner-card, [class*="banner-card"], .entry-content .wp-block-cover, .entry-content .wp-block-group { padding: 30px 20px !important; margin-right: 0 !important; margin-left: 0 !important; border-radius: 20px !important; box-sizing: border-box !important; }
    .profile-banner-card h2, .profile-banner-card .main-title, .entry-content h2 { font-size: 1.45rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; font-weight: 700 !important; }
    .profile-banner-card p, .profile-banner-card .description { font-size: 13.5px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.9) !important; }

    h3, .profile-sub-title, .sub-bab-title { font-size: 1.4rem !important; line-height: 1.4 !important; padding-left: 15px !important; border-left: 5px solid #ffc107 !important; margin-top: 35px !important; margin-bottom: 20px !important; }

    .beasiswa-thumb { height: 220px !important; width: 100% !important; }
    .beasiswa-title { font-size: 1.25rem !important; line-height: 1.4 !important; font-weight: 700 !important; text-align: center !important; }
    .beasiswa-content { padding: 25px !important; text-align: center !important; }
    .beasiswa-meta { justify-content: center !important; margin-bottom: 12px !important; }

    .back-action-area { display: block !important; text-align: center !important; width: 100% !important; padding: 0 !important; margin: 30px 0 50px 0 !important; clear: both !important; }
    .btn-pro-home { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; padding: 16px 0 !important; margin: 0 auto !important; border-radius: 12px !important; box-sizing: border-box !important; font-size: 16px !important; text-decoration: none !important; }
    .pagination-wrapper { display: flex !important; justify-content: center !important; gap: 8px !important; margin-bottom: 25px !important; }
    .archive-btn-wrapper-pro { margin-top: 30px; padding: 0 15px; }
    .btn-lihat-semua-pro { width: 100%; justify-content: center; padding: 12px 20px; font-size: 14px; }
}

/* ================================================================
   6. BREAKPOINT MOBILE MINI (max-width: 576px, 450px & 480px)
   ================================================================ */
@media (max-width: 576px) {
    .stats-section { padding: 60px 0; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-item { padding: 20px; }
    .stat-number { font-size: 2.5rem; }
    .stat-label { font-size: 0.9rem; }
    .layanan-card-pro { padding: 20px 10px !important; }
    .layanan-name { font-size: 13px !important; }
}

@media (max-width: 480px) {
    .beasiswa-section { padding: 40px 0; }
    .beasiswa-thumb { height: 190px !important; }
    .beasiswa-title { font-size: 1.15rem !important; }
    .beasiswa-excerpt { font-size: 0.85rem; -webkit-line-clamp: 2; }
    .btn-beasiswa { padding: 10px 15px; font-size: 0.8rem; }
}

@media (max-width: 450px) {
    .layanan-section .col { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
    .layanan-icon { width: 55px; height: 55px; }
}

/* =========================================================================
   RESPONSIVE MODUL PENCARIAN (MOBILE OPTIMIZED)
   ========================================================================= */
@media (max-width: 991px) {
    body.search-results article.post, body.search-results article { flex: 0 1 calc(50% - 15px) !important; max-width: 100% !important; }
}

@media (max-width: 767px) {
    body.search-results #content, body.search-results .site-content, body.search-results main, body.search-results #main { padding-top: 25px !important; padding-bottom: 40px !important; }
    body.search-results #main, body.search-results .site-main { gap: 20px !important; padding: 0 15px !important; }
    body.search-results article.post, body.search-results article { flex: 0 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; }
}

/* =========================================================================
   FIX OTOMATIS TABEL BEASISWA RESPONSIVE (BISA DIGESER DI HP)
   ========================================================================= */
@media screen and (max-width: 1023px) {
    /* 1. Paksa kontainer artikel agar mengizinkan scroll internal khusus tabel */
    .entry-content, 
    .page-section, 
    .single-beasiswa-content, 
    .entry-content-single {
        overflow-x: visible !important;
    }

    /* 2. Targetkan tabel bawaan agar pas dengan lebar layar HP */
    .entry-content table,
    .wp-block-table table,
    table.table-beasiswa {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important; /* Memunculkan scrollbar horizontal jika tabel kepanjangan */
        display: block !important;
        white-space: nowrap !important; /* Menjaga isi data tabel tidak menumpuk ke bawah */
        -webkit-overflow-scrolling: touch !important; /* Efek geser smooth di iPhone/Android */
        border-collapse: collapse !important;
        margin-bottom: 20px !important;
    }

    /* 3. Rapikan ukuran font dalam tabel di HP agar tidak terlalu raksasa */
    .entry-content table th,
    .entry-content table td {
        padding: 8px 12px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}