/**
 * File: responsive.css
 * TOTAL OVERHAUL - FORCE BLOCK SYSTEM (CLEAN & OPTIMIZED VERSION)
 * Integrasi Penuh: Navigasi, Hero, Layanan, Beasiswa, Berita, & Statistik Footer
 * 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 & 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 LAYOUT MENU MOBILE --- */
    #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); } }
}

/* ================================================================
   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; 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 & CAROUSEL NAVIGATION ARROWS --- */
    .hero-content-right { text-align: center !important; margin-left: auto !important; margin-right: auto !important; background: none !important; backdrop-filter: none !important; padding-left: 45px !important; padding-right: 45px !important; }
    .hero-title { font-size: 2rem !important; 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; }
    .hero-actions { display: flex !important; justify-content: center !important; width: 100% !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 & PENGUMUMAN --- */
    .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; }

    /* --- RESPONSIVE SATU KOLOM (ANTI GAGAL ARCHIVE) --- */
    .archive-berita-page .beasiswa-modern-grid, .archive-beasiswa-page .beasiswa-modern-grid { display: block !important; width: 100% !important; padding: 0 !important; }
    .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; }
    .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; }
    .beasiswa-pro-card .pro-card-image { height: 200px !important; }

    /* --- STYLING RESPONSIVE STATISTIK FOOTER WIDGET --- */
    .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; }

/* ========================================================
       SOLUSI STANDAR UPA TIK: COUNTER CIVITAS 1 KOLOM FULL VERTIKAL
       (RATA TENGAH - FULL SYMMETRY & ULTRA COMFORT PADDING)
       ======================================================== */
    
    /* 1. Amankan container utama agar tidak lagi berjejer ke samping */
    .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;          /* Hancurkan flex/grid horizontal, wajib tumpuk vertikal */
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;      /* Jarak simetris kiri luar */
        padding-right: 20px !important;     /* Jarak simetris kanan luar */
        box-sizing: border-box !important;
    }

    /* 2. Paksa ke-4 kartu (Mahasiswa, Dosen, Alumni, Prestasi) turun ke bawah & melebar penuh */
    .stats-section [class*="col-"],
    .stats-grid > div,
    .stat-item,
    .elementor-column:has(.elementor-counter),
    div:has(> .elementor-counter) {
        display: block !important;          /* Paksa runtuh satu per satu ke bawah */
        width: 100% !important;             /* Mengambil lebar penuh layar HP, anti gepeng */
        max-width: 100% !important;
        flex: 0 0 100% !important;          /* Lumpuhkan fungsi pembagi grid */
        float: none !important;             /* Cegah kartu melayang ke samping */
        
        /* Pengatur Ukuran & Jarak Simetris Kartu */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 25px !important;     /* Jarak renggang antar kartu ke bawah */
        padding: 30px 20px !important;      /* Padding dalam: Atas-Bawah 30px, Kanan-Kiri 20px (Simetris) */
        border-radius: 15px !important;     /* Sudut kartu melengkung halus pro look */
        box-sizing: border-box !important;
    }

    /* 3. Buat semua konten di dalam kartu otomatis rata tengah (Center) */
    .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;
    }

    /* 4. Pastikan gambar ikon/emoji juga duduk manis tepat di tengah-tengah kartu */
    .elementor-counter img,
    div:has(> .elementor-counter) img,
    div:has(> .elementor-counter) svg {
        display: block !important;
        margin: 0 auto 15px auto !important; /* Margin bawah ikon memberi jarak ke angka */
        text-align: center !important;
    }

}



/* ================================================================
   5. BREAKPOINT MOBILE SMARTPHONE (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {
    /* --- MODUL: LAYANAN UTAMA HP --- */
    .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; }

    /* --- FIX LAYOUT PROFIL UTAMA (ANTI MEPET KANAN-KIRI) --- */
    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; }

    /* FIX TYPOGRAPHY KONTEN JUDUL HALAMAN */
    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; }

    /* KARTU BIRU PROFIL BIRO UTAMA */
    .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; }

    /* FIX SUB-BAB BAWAH (AKSEN KUNING UNTAD) */
    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; }

    /* --- GLOBAL KODE BEASISWA MOBILE --- */
    .beasiswa-grid { gap: 25px; }
    .beasiswa-card { flex: 0 1 100%; margin-bottom: 10px; }
    .beasiswa-thumb { height: 180px; }
    .beasiswa-title { font-size: 1.1rem; }

    /* --- FIX TOMBOL & PAGINATION MOBILE --- */
    .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 / LAYAR KECIL (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-content { padding: 20px; }
    .beasiswa-title { font-size: 1rem; margin-bottom: 10px; }
    .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) - UPA TIK UNTAD
   ========================================================================= */
@media (max-width: 991px) {
    /* Di layar Tablet, otomatis berubah menjadi 2 kolom rapi */
    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;
    }

    /* Di HP, otomatis melebar penuh 1 kolom tegak lurus yang rapi */
    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;
    }
}