/**
 * Theme Name: UPA TIK UNTAD
 * File: responsive.css
 */

/* ======================================================
    01. GLOBAL & HEADER (TABLET & MOBILE)
   ====================================================== */
@media screen and (max-width: 1024px) {
    .site-header, .container-header, #masthead {
        overflow: visible !important;
        contain: none !important;
        border-radius: 0 !important; 
    }

    .container-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
        width: 100% !important;
        height: 70px !important;
        background: rgba(0, 31, 63, 0.95) !important; 
        backdrop-filter: blur(10px);
        position: relative;
        z-index: 99998;
    }

    .branding-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        max-width: 75% !important;
    }

    .custom-logo-wrapper img {
        max-height: 45px !important;
        width: auto !important;
    }

    .site-title {
        font-size: clamp(13px, 3vw, 16px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        color: #ffffff !important; 
        padding-left: 4px;
        font-weight: 800 !important;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5) !important; 
        -webkit-text-fill-color: #ffffff !important; 
    }

    .site-description {
        font-size: 8px !important;
        display: block !important;
        padding-left: 4px;
        color: #cbd5e0 !important;
        letter-spacing: 0.5px;
    }

    /* --- FIX AREA MENU RESPONSIVE (WAJIB KE BAWAH) --- */
    
    .nav-toggle { 
        display: flex !important;
        width: 38px !important;
        height: 38px !important;
        background: rgba(46, 204, 113, 0.1) !important;
        border: 1px solid rgba(46, 204, 113, 0.3) !important;
        border-radius: 8px !important;
        z-index: 10000 !important; 
        position: relative;
        cursor: pointer;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-toggle span {
        width: 18px !important;
        height: 2px !important;
        background-color: #2ecc71 !important; 
        border-radius: 3px;
        position: relative;
        display: block !important;
        box-shadow: 0 6px 0 #2ecc71, 0 -6px 0 #2ecc71; 
    }

    #site-navigation.main-navigation {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important; 
        width: 280px !important;
        height: 100vh !important;
        background: #001529 !important; 
        z-index: 9999999 !important; 
        display: block !important; 
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
        padding: 100px 0 40px 0 !important;
        overflow-y: auto !important; 
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #site-navigation .nav-menu, 
    #site-navigation ul {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* FIX DISINI: Height auto supaya tidak kaku saat sub-menu buka */
    #site-navigation ul li {
        width: 100% !important;
        display: block !important;
        height: auto !important; 
        position: relative !important;
        overflow: visible !important;
    }

    body.menu-open #site-navigation.main-navigation { 
        right: 0 !important; 
    }

    .nav-menu li {
        position: relative;
        z-index: 10;
    }

    .nav-menu li a, #site-navigation ul li a {
        padding: 15px 25px !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-menu li a:hover {
        background: rgba(46, 204, 113, 0.1) !important;
        color: #2ecc71 !important;
    }

    /* FIX DISINI: Position relative agar sub-menu mendorong menu di bawahnya */
    .nav-menu li ul, #site-navigation ul ul {
        background: rgba(0,0,0,0.3) !important;
        display: none !important; 
        padding: 0 0 0 15px !important; 
        list-style: none !important;
        flex-direction: column !important;
        position: relative !important; 
        top: 0 !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .nav-menu li.open > ul, #site-navigation ul li.open > ul {
        display: flex !important;
    }

    .menu-item-has-children > a::after { 
        content: '+'; 
        font-family: monospace; 
        font-size: 18px; 
        color: #2ecc71 !important; 
        margin-left: 10px;
    }
    
    .menu-item-has-children.open > a::after { 
        content: '-'; 
    }

    #menuOverlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 10, 20, 0.8) !important;
        backdrop-filter: blur(8px);
        z-index: 9999998 !important;
        display: none;
    }

    body.menu-open #menuOverlay { 
        display: block !important; 
    }
}

/* ======================================================
    02. PEMBERSIHAN ICON SEARCH & HAMBURGER
   ====================================================== */
@media screen and (max-width: 1024px) {
    .nav-toggle, .search-btn {
        width: 32px !important;   
        height: 32px !important;
        background: transparent !important; 
        border: 1px solid rgba(255, 255, 255, 0.2) !important; 
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-toggle span {
        width: 15px !important;   
        height: 1.5px !important; 
        background-color: #ffffff !important;
        box-shadow: 0 5px 0 #ffffff, 0 -5px 0 #ffffff !important;
    }

    .search-btn i { font-size: 13px !important; color: #ffffff !important; }
    .header-actions { display: flex !important; gap: 8px !important; align-items: center !important; }
}

/* ======================================================
    03. TABLET VIEW (992px)
   ====================================================== */
@media screen and (max-width: 992px) {
    .berita-grid, .agenda-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ======================================================
    04. MOBILE VIEW (768px) - FINAL ROW FIX & MAPS
   ====================================================== */
@media screen and (max-width: 768px) {
    .top-header { 
        height: 35px !important; 
        position: fixed !important; 
        background: linear-gradient(180deg, #001f3f 0%, #001529 100%) !important;
        display: flex !important;
        z-index: 999999;
    }
    
    .top-header-inner { 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 15px !important; 
    }

    .top-header-left, .top-header-right { display: flex !important; flex-direction: row !important; align-items: center !important; }
    .hide-small, .top-social-links, .top-info-item:nth-child(2) { display: none !important; }

    .btn-siga-8 { 
        background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
        font-size: 9px !important; 
        padding: 2px 8px !important; 
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.4); /* Glow hijau di HP */
    }

    .top-txt-info { font-size: 10px !important; color: #2ecc71 !important; font-weight: bold; }

    .site-header { top: 35px !important; }
    body.scrolled .site-header { top: 0 !important; }
    
    /* MODIFIKASI BRANDING: Perkecil Logo & Teks agar Elegant */
    .custom-logo-wrapper img { max-height: 38px !important; }
    
    .site-title { 
        font-size: 14px !important;  /* Ukuran judul diperkecil */
        letter-spacing: 0.5px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }
    
    .site-description { 
        font-size: 8px !important;   /* Tagline diperkecil agar tidak balapan */
        letter-spacing: 0.3px !important;
        margin-top: 2px !important;
        opacity: 0.9;
    }

    .branding-link { gap: 10px !important; } /* Dekatkan jarak logo ke teks */
    
    /* FIX GOOGLE MAPS RESPONSIVE - ANTI LUBER */
    .google-maps-container, 
    .wp-block-embed-google-maps,
    .map-wrapper {
        width: 100% !important;
        padding: 0 !important;
        margin: 20px 0 !important;
        overflow: hidden !important;
        border-radius: 12px;
    }

    /* Paksa Iframe Map mengikuti lebar layar HP di semua browser */
    .google-maps-container iframe, 
    .wp-block-embed-google-maps iframe,
    iframe[src*="maps.google.com"] {
        width: 100% !important;
        height: 250px !important; /* Tinggi ideal di HP */
        border: 0 !important;
    }

    .hero-slider-wrapper { height: 350px !important; } /* Sedikit lebih pendek agar pas */
    .stats-grid, .layanan-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    
    /* Mencegah scroll horizontal akibat elemen liar */
    body, html { overflow-x: hidden !important; position: relative; }
}

/* ======================================================
    05. KARTU BERITA & SEARCH ITEM
   ====================================================== */
@media screen and (max-width: 768px) {
    .news-card { display: flex !important; flex-direction: column !important; background: #ffffff !important; border-radius: 12px !important; margin-bottom: 25px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important; border: 1px solid #eee !important; }
    .news-thumb img { width: 100% !important; height: 200px !important; object-fit: cover !important; }
    .news-content { padding: 15px !important; }
}

/* ======================================================
    06. SINGLE POST & PAGE LAYOUT
   ====================================================== */
@media screen and (max-width: 1024px) {
    .site-content > .container, .main-content-area, .content-sidebar-wrapper { display: block !important; width: 100% !important; }
    #primary, #secondary { width: 100% !important; float: none !important; padding: 0 15px !important; }
}

/* ======================================================
    07. SINGLE POST READABILITY & DYNAMIC TITLE
    Fungsi: Memoles artikel agar nyaman dibaca & judul pas
   ====================================================== */
   
/* Tampilan Desktop & Global */
.upa-single-hero {
    background: #003366 !important;
    color: #ffffff !important;
    /* Jarak aman dari header desktop */
    padding: 140px 0 60px 0 !important; 
    position: relative;
    z-index: 1;
}

.upa-single-hero .page-title {
    /* Judul otomatis mengecil di HP, membesar di Desktop */
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 20px 0 !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3) !important;
}

/* Tipografi Isi Artikel agar "Enak Dibaca" */
.entry-content {
    font-size: 1.12rem !important; /* Ukuran teks standar portal berita */
    line-height: 1.85 !important;  /* Jarak antar baris yang lega */
    color: #2d3748 !important;    /* Warna abu tua (tidak bikin mata cepat lelah) */
}

.entry-content p {
    margin-bottom: 1.6rem !important;
}

/* Layout Desktop: Sidebar Tetap di Samping */
.post-container-body .entry-wrapper {
    display: flex !important;
    gap: 40px !important;
}

.content-column {
    flex: 1 !important;
    min-width: 0 !important;
}

.sidebar-column {
    width: 320px !important;
    flex-shrink: 0 !important;
}

/* --- RESPONSIVE ADJUSTMENT (HP & TABLET) --- */
@media screen and (max-width: 992px) {
    .upa-single-hero {
        /* Sesuaikan dengan tinggi header mobile Bosku (70px + 35px) */
        padding: 120px 20px 40px 20px !important; 
    }

    .post-container-body .entry-wrapper {
        flex-direction: column !important; /* Sidebar pindah ke bawah */
        gap: 30px !important;
    }

    .sidebar-column {
        width: 100% !important;
    }

    .entry-content {
        font-size: 1.05rem !important; /* Sedikit lebih kecil di HP agar pas */
        line-height: 1.75 !important;
        text-align: left !important; /* Menghindari "lubang putih" justify di HP */
    }
}

@media screen and (max-width: 480px) {
    .upa-single-hero .page-title {
        font-size: 1.5rem !important; /* Paksa lebih kecil di HP jadul/kecil */
    }
    
    .upa-single-hero .post-data {
        flex-direction: column !important;
        gap: 8px !important;
    }
}


/* ======================================================
    08-17. NUCLEAR STICKY & JS OVERRIDE LOGIC
    Fungsi: Memaksa Layout Vertikal & Anti-Bocor di HP
   ====================================================== */
@media screen and (max-width: 1024px) {
   /* 08 Reset Induk - PENYELAMAT KONTEN TERTUTUP */ 
    #content, .site-content { 
    display: block !important; 
    width: 100% !important; 
    max-width: 100vw !important; 
    overflow: hidden !important; 
    /* Jarak ini wajib ada untuk mengimbangi tinggi header mobile */
    padding-top: 160px !important; 
    }
    
    /* 09 Konten Utama */ 
    #primary { margin: 0 0 40px 0 !important; float: none !important; width: 100% !important; }
    
    /* 10 Paksa Baris ke Bawah */ 
    .site-content { display: flex !important; flex-direction: column !important; }
    
    /* 11 Reset Inner */ 
    .main-content-inner { flex-wrap: wrap !important; flex-direction: column !important; width: 100% !important; }
    
    /* 12 Matikan Koordinat JS Sidebar */ 
    #secondary { position: relative !important; left: 0 !important; top: 0 !important; transform: none !important; width: 100% !important; clear: both !important; }
    
    /* 13 Reset Grid ke 1 Kolom */ 
    .container { grid-template-columns: 1fr !important; display: block !important; width: 100% !important; }
    
    /* 14 Paksa Sidebar Lebar Penuh */ 
    aside.sidebar-column { display: block !important; width: 100% !important; min-width: 100% !important; }
    
    /* 15 Bunuh Plugin Sticky Sidebar (Theia/Lainnya) */ 
    .theiaStickySidebar, .sticky-sidebar, .stiky-sidebar { position: relative !important; top: 0 !important; transform: none !important; width: 100% !important; height: auto !important; }
    
    /* 16 Hapus Spacer Sampah dari JS */ 
    #secondary-spacer, .sticky-sidebar-spacer { display: none !important; height: 0 !important; visibility: hidden !important; }
    
    /* 17 Overrule Inline Style dari Script */ 
    aside.sidebar-column [style], #secondary [style] { position: relative !important; top: 0 !important; width: 100% !important; left: 0 !important; transform: none !important; }
}

/* ======================================================
    18. RESPONSIVE TOP HEADER & GLOBAL LOCK (FIX FINAL)
    Fungsi: Mengunci Jarak Header & Mencegah Layar Goyang
   ====================================================== */
@media screen and (max-width: 768px) {
    /* Pastikan Top Header stabil di paling atas */
    .top-header { 
        height: 38px !important; 
        z-index: 100001 !important; 
        display: flex !important;
        align-items: center !important;
        position: fixed !important;
        top: 0;
        width: 100%;
        transition: transform 0.3s ease-in-out !important; /* Biar smooth pas hilang */
    }

    /* Teks Email/Info agar tidak memotong tombol SIGA */
    .top-txt-info { 
        max-width: 150px !important; 
        display: inline-block !important;
        overflow: hidden !important; 
        text-overflow: ellipsis !important; 
        white-space: nowrap !important;
        vertical-align: middle;
    }

    /* Penyesuaian Header Utama agar pas di bawah Top Header */
    .site-header { 
        position: fixed !important;
        top: 38px !important; 
        width: 100%;
        transition: all 0.3s ease-in-out !important;
        z-index: 100000 !important;
    }

    /* LOGIKA SAKTI: Sinkron dengan navigation.js Poin 8 */
    body.header-hide .top-header {
        transform: translateY(-100%); /* Top header terlempar ke atas */
    }

    body.header-hide .site-header {
        top: 0 !important; /* Header utama naik menempel plafon layar */
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    /* LOCK: Rahasia agar web tidak bisa digeser kanan-kiri di HP */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix tambahan untuk elemen liar yang mungkin luber */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* ======================================================
    19. FOOTER RESPONSIVE (AUTO VERTICAL STACK)
    Fungsi: Memaksa Footer berbaris ke bawah di HP
   ====================================================== */
@media screen and (max-width: 768px) {
    .site-footer {
        padding: 30px 0 !important;
    }

    /* Paksa kolom footer jadi satu kolom */
    .footer-widgets-container, 
    .footer-main-inner, 
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        padding: 0 15px !important;
        text-align: center !important; /* Rata tengah biar manis di HP */
    }

    .footer-column, .widget-column, .footer-widget {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Logo di Footer agar tidak miring */
    .footer-logo img, .footer-widget img {
        margin: 0 auto !important;
        max-height: 60px !important;
        width: auto !important;
    }

    /* Copyright area */
    .footer-bottom-inner {
        flex-direction: column-reverse !important;
        gap: 15px !important;
        padding: 20px 0 !important;
    }

    .footer-social-links {
        justify-content: center !important;
    }
}

/* ======================================================
    20. HERO SECTION RESPONSIVE (CLEAN & MODERN NO BOX)
   ====================================================== */
@media screen and (max-width: 768px) {
    /* 1. Kontainer Utama: Dorong ke bawah, hilangkan sekat */
    .hero-section, 
    #content .entry-content-hero,
    .main-slider,
    .hero-container {
        margin-top: 20% !important; 
        min-height: auto !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        text-align: center !important;
        padding: 40px 20px !important; 
        position: relative !important;
        background: none !important; /* Pastikan tidak ada background luar */
    }

    /* 2. HERO SUBTITLE: Dibuat minimalis tanpa kotak solid */
    .hero-subtitle {
        display: inline-block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #2ecc71 !important; 
        background: transparent !important; /* Hapus kotak */
        padding: 0 !important;
        margin-bottom: 12px !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
        z-index: 5 !important;
    }

    /* 3. Judul: Putih Bersih dengan Shadow Halus (Efek List Halus) */
    .hero-title, 
    .entry-title-hero, 
    .slider-title {
        font-size: 20px !important; /* Ukuran proporsional modern */
        line-height: 1.3 !important;
        padding-top: 20px;
        font-weight: 800 !important;
        color: #ffffff !important;
        background: transparent !important; /* Hapus kotak jika ada */
        /* Teknik shadow kompas agar teks putih tajam tanpa kotak */
        text-shadow: 
            1px 1px 0px #000, 
            -1px -1px 0px #000, 
            1px -1px 0px #000, 
            -1px 1px 0px #000,
            0px 4px 10px rgba(0,0,0,0.5) !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        z-index: 5 !important;
    }

    /* 4. Keterangan: Tanpa Kotak (Full Transparan) */
    .hero-description, 
    .entry-content-hero p, 
    .slider-caption {
        font-size: 11px !important;
        line-height: 1.6 !important;
        color: #ffffff !important;
        background: transparent !important; /* HILANGKAN KOTAK GLOSSY */
        backdrop-filter: none !important;    /* Hapus blur */
        -webkit-backdrop-filter: none !important;
        border: none !important;             /* Hapus garis tepi */
        box-shadow: none !important;         /* Hapus bayangan kotak */
        
        padding: 0 !important;
        width: 90% !important;
        margin: 0 auto !important;
        /* Tambahkan shadow teks agar tetap terbaca */
        text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
        z-index: 5 !important;
    }

    /* 5. Background Gambar: Dibuat Full & Sedikit Lebih Gelap */
    .hero-image-wrapper img,
    .hero-background img,
    .slider-item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: brightness(0.45) contrast(1.1) !important; /* Gelapkan sedikit lagi karena kotak dihapus */
        border-radius: 15px !important;
        z-index: 1 !important;
    }

    /* 6. Hilangkan Tombol */
    .hero-buttons, .hero-action-btn, .btn-siga { 
        display: none !important; 
    }

    /* 7. Navigasi Slider: Kecil, Transparan, & Turun ke Bawah (Modifikasi) */
    .slider-prev, 
    .slider-next {
        top: auto !important;
        bottom: 15px !important;     /* Posisi di dasar area hero */
        transform: none !important;
        width: 30px !important;      /* Ukuran lingkaran kecil */
        height: 30px !important;
        background: rgba(255, 255, 255, 0.1) !important; /* Sangat transparan */
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(3px) !important;
        z-index: 10 !important;
    }

    .slider-prev { left: 35% !important; }
    .slider-next { right: 35% !important; }

    /* Perkecil icon di dalam tombol panah */
    .slider-prev::after, .slider-next::after,
    .slider-prev span, .slider-next span {
        font-size: 12px !important;
        line-height: 30px !important;
    }
}

/* ======================================================
    21. PENYESUAIAN JUDUL KONTEN & SIDEBAR (MOBILE FIX)
    Fungsi: Mengecilkan judul berita di list agar tidak luber
   ====================================================== */
@media screen and (max-width: 768px) {
    
    /* Mengecilkan Judul di Daftar Artikel / News Card */
    .news-card h3, 
    .entry-title, 
    .recent-post-item h4,
    .berita-grid h3 {
        font-size: 15px !important; /* Ukuran mungil & elegant */
        line-height: 1.4 !important;
        font-weight: 700 !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Maksimal 2 baris agar rapi */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Mengecilkan Judul di Sidebar (Recent Posts, dll) */
    .widget-title, 
    .sidebar-column h2, 
    .sidebar-column h4 {
        font-size: 14px !important; 
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border-left: 3px solid #2ecc71 !important; /* Aksen hijau khas UPA TIK */
        padding-left: 10px !important;
        margin-bottom: 15px !important;
    }

    /* List link di sidebar */
    .sidebar-column ul li a {
        font-size: 13px !important;
        line-height: 1.3 !important;
        padding: 8px 0 !important;
        border-bottom: 1px dotted #eee;
    }

    /* Padding kontainer body artikel di HP */
    .post-container-body {
        padding: 0 15px !important;
    }
}

/* ======================================================
    22. FIX JUDUL TERPOTONG & GAMBAR RESPONSIVE
   ====================================================== */
@media screen and (max-width: 768px) {

    /* 1. Fix Judul Berita yang Terpotong */
    .upa-single-hero .page-title,
    .hero-title,
    .entry-title {
        height: auto !important;
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }

    /* 2. Fix Teks Meta (Views tidak bertumpuk) */
    .upa-single-hero .post-data, 
    .entry-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        font-size: 11px !important;
    }

    /* 3. Fix Gambar Responsive */
    .entry-content img, 
    .post-thumbnail img, 
    .wp-block-image img, 
    article img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 10px auto !important;
        border-radius: 8px !important;
    }

    /* 4. KOREKSI DISINI: Sesuaikan padding agar tidak double dengan Poin 08 */
    .upa-single-hero {
        /* Kita gunakan padding-top yang lebih kecil (misal 20px-40px) 
           karena induknya (#content) sudah didorong 180px di Poin 08 */
        padding: 20px 15px 30px 15px !important;
        margin-top: 0 !important;
    }
}

/* ======================================================
    23. FINAL MAPS RESPONSIVE (ANTI-BOCOR)
   ====================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Paksa Container Maps tidak boleh lebih lebar dari layar */
    .google-maps-container, 
    .wp-block-embed-google-maps,
    .map-wrapper,
    .location-section .container {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;  /* Kasih jarak dikit biar gak nempel layar */
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Paksa IFRAME Maps Mengikuti Lebar Container */
    .google-maps-container iframe, 
    .wp-block-embed-google-maps iframe,
    iframe[src*="google.com/maps"] {
        width: 100% !important;        /* Wajib 100% */
        height: 250px !important;      /* Tinggi ideal di HP */
        border-radius: 12px !important;
        border: 2px solid rgba(255,255,255,0.1) !important;
    }

    /* 3. Fix Teks "LOKASI KAMI" agar tidak mepet */
    .location-section h2, 
    .widget-title-map {
        text-align: center !important;
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }
}

/* ======================================================
    25. HAPUS TOTAL DEKORASI PUTIH & AKTIFKAN LEVEL 3
   ====================================================== */
@media screen and (max-width: 1024px) {
    /* 1. MATIKAN SEMUA SEGITIGA/DIAMOND (Sapu Bersih Semua Level) */
    #site-navigation ul li::before, 
    #site-navigation ul li::after,
    #site-navigation ul ul::before, 
    #site-navigation ul ul::after,
    #site-navigation ul ul ul::before, 
    #site-navigation ul ul ul::after,
    .sub-menu::before, 
    .sub-menu::after {
        display: none !important;
        content: none !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        visibility: hidden !important;
    }

    /* 2. FIX BACKGROUND & MUNCULKAN LEVEL 3 KE BAWAH */
    /* Pastikan level 2 dan 3 pakai warna gelap dan mendorong menu dibawahnya */
    #site-navigation ul ul, 
    #site-navigation ul ul ul {
        background-color: #001529 !important; 
        border: none !important;
        box-shadow: none !important;
        padding-left: 15px !important; /* Agar terlihat bertingkat */
        width: 100% !important;
        position: relative !important; /* WAJIB: Agar mendorong menu di bawahnya */
        top: 0 !important;
        left: 0 !important;
    }

    /* 3. KUNCI LEVEL 3: Tampilkan saat induknya (Level 2) terbuka */
    #site-navigation ul ul li.open > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* 4. RESET SEMUA TRANSFORMASI (Penghancur Diamond Putih) */
    #site-navigation *::before, 
    #site-navigation *::after {
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* 5. STYLING LINK SUBMENU (Level 2 & 3) */
    #site-navigation ul ul li a {
        color: #ffffff !important;
        background: transparent !important;
        display: flex !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    /* Hilangkan garis border putih di kontainer utama */
    .sub-menu, .children {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ======================================================
    26. AGENDA SPECIFIC FIX (PENYELAMAT AGENDA)
   ====================================================== */
@media screen and (max-width: 992px) {
    /* Pastikan wrapper agenda tetap fleksibel */
    .entry-wrapper.agenda-responsive-grid, 
    .agenda-grid {
        display: flex !important;
        flex-direction: column !important; /* Stack ke bawah di tablet/HP */
        gap: 25px !important;
    }

    /* Paksa kolom sidebar agenda lebar penuh */
    .sidebar-column {
        width: 100% !important;
        order: 2; /* Taruh di bawah konten */
        position: relative !important;
        top: 0 !important;
    }

    /* Paksa kolom konten agenda lebar penuh */
    .content-column {
        width: 100% !important;
        order: 1;
    }
    
    /* Meta list agenda (lokasi/jam) agar rapi di HP */
    .agenda-meta-list li {
        background: #ffffff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
}

@media screen and (max-width: 480px) {
    .page-title {
        font-size: 1.6rem !important; /* Perkecil judul agenda di HP */
    }
}

/* [BAGIAN 01 - 26 TETAP SAMA SEPERTI KODE BOSKU] */

/* ======================================================
    27. TIK-WRAPPER & DIVISI LAYANAN (UPA TIK)
   ====================================================== */
@media screen and (max-width: 992px) {
    .tik-wrapper {
        padding: 0 15px !important;
        margin-top: 20px !important;
    }

    .tik-header-card {
        padding: 30px 20px !important;
        border-radius: 12px !important;
        text-align: center;
    }

    .tik-header-card h1 {
        font-size: 1.8rem !important;
    }

    /* Grid Layanan: Pastikan 1 Kolom di HP */
    .layanan-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .layanan-card {
        padding: 25px !important;
    }
}

/* ======================================================
    28. FOOTER FINAL OPTIMIZATION (NAVY THEME)
   ====================================================== */
@media screen and (max-width: 768px) {
    .site-footer {
        text-align: center !important;
    }

    /* Memastikan widget footer berjejer vertikal sempurna */
    .footer-widgets-area {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }

    .footer-widget-column {
        width: 100% !important;
    }

    .footer-widget-title {
        font-size: 16px !important;
        margin-bottom: 20px !important;
        justify-content: center !important; /* Rata tengah icon judul */
    }

    .footer-widget-title::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Info Kontak di Footer */
    .footer-contact-info li {
        justify-content: center !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .footer-contact-info li i {
        margin-right: 0 !important;
        font-size: 20px !important;
    }
}

/* ======================================================
    29. FORM TICKET & NEWSLETTER (ANTI-LUBER)
   ====================================================== */
@media screen and (max-width: 768px) {
    /* Form Tiket / Kontak */
    .upa-ticket-form-wrapper {
        padding: 20px !important;
        margin: 10px !important;
    }

    .upa-form-group {
        margin-bottom: 15px !important;
    }

    .upa-form-control {
        font-size: 14px !important;
        padding: 12px !important;
    }

    /* Newsletter Form di Footer */
    .newsletter-form-inner {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .newsletter-form-inner input[type="email"] {
        width: 100% !important;
        border-radius: 8px !important;
        text-align: center !important;
    }

    .newsletter-form-inner button {
        width: 100% !important;
        border-radius: 8px !important;
        padding: 12px !important;
    }

    /* Alert Message (Sukses/Gagal) */
    .upa-alert {
        font-size: 13px !important;
        padding: 12px !important;
        margin: 10px 0 !important;
    }
}

/* ======================================================
    30. CLEANUP & FIX LAYAR GOYANG (STABILIZER)
   ====================================================== */
@media screen and (max-width: 480px) {
    /* Mencegah padding kontainer terlalu lebar di layar super kecil */
    .container, .site-content .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Ukuran font global sedikit diperkecil agar tidak berantakan */
    body {
        font-size: 14px !important;
    }

    /* Fix tombol "Back to Top" agar tidak menutupi konten penting */
    .back-to-top {
        width: 35px !important;
        height: 35px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* ======================================================
    31. BEAUTIFICATION & SPACING FIX (ANTI-MEPET)
    Fungsi: Memberikan ruang napas di sisi kanan-kiri
   ====================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Memberikan Gutter Global agar konten tidak menyentuh pinggir layar */
    .container, 
    .entry-content, 
    .upa-entry-wrapper, 
    main.container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Mempercantik Card Agenda agar tidak terpotong (Image 3) */
    .agenda-card, [class*="card-agenda"] {
        margin: 10px 0 20px 0 !important;
        border-radius: 15px !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important; /* Stack vertikal agar lega */
    }

    /* 3. Mempercantik Tampilan Layanan (Image 4) */
    .layanan-item, .tik-card {
        padding: 25px !important;
        margin-bottom: 20px !important;
        border: 1px solid #edf2f7 !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    }

    /* 4. Fix untuk Visi Misi & Sejarah agar teks tidak 'balapan' */
    .entry-content p, 
    .entry-content ul, 
    .entry-content li {
        text-align: justify !important; /* Biar rapi kanan-kiri */
        line-height: 1.7 !important;
        margin-bottom: 15px !important;
    }

    /* 5. Header Section (Visi Misi / Struktur) */
    h2, h3, .section-title {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        padding: 0 5px !important;
    }
}

/* ======================================================
    32. KHUSUS DETAIL AGENDA (RESPONSIVE BUTTON)
   ====================================================== */
@media screen and (max-width: 480px) {
    /* Membuat tombol Detail tidak terhimpit */
    .btn-detail-agenda, .detail-button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 15px !important;
        padding: 12px !important;
    }
    
    /* Meta data agenda (Hari/Tgl/Waktu) */
    .agenda-info-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* ======================================================
    33. FIX AGENDA BERANDA TERPOTONG (RESPONSIVE)
   ====================================================== */
@media screen and (max-width: 991px) {
    /* Memastikan kontainer utama agenda punya ruang */
    .section-agenda, .home-agenda-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: hidden !important;
    }

    /* Mengubah Grid Agenda menjadi satu kolom agar lega */
    .agenda-grid, .home-agenda-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Fix Kotak Detail Agenda yang terpotong */
    .agenda-item, .card-agenda-home {
        height: auto !important; /* Biar tinggi kotak ngikutin isi */
        min-height: 200px !important;
        display: block !important; /* Ganti dari flex ke block agar tidak maksa ke samping */
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    }

    /* Menata ulang posisi Tanggal & Judul agar tidak balapan */
    .agenda-date-box {
        margin-bottom: 15px !important;
        display: inline-block !important;
        width: auto !important;
    }

    .agenda-content-detail {
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Tombol Detail di Beranda agar tidak keluar kotak */
    .btn-agenda-link, .read-more-agenda {
        display: block !important;
        margin-top: 15px !important;
        text-align: center !important;
        width: 100% !important;
        padding: 10px !important;
        background: #ffc107 !important; /* Aksen Gold UNTAD */
        color: #001f3f !important;
        font-weight: bold !important;
        border-radius: 6px !important;
    }
}

/* Khusus layar HP Kecil (dibawah 480px) */
@media screen and (max-width: 480px) {
    .agenda-title-home {
        font-size: 16px !important;
        line-height: 1.4 !important;
        white-space: normal !important; /* Memaksa teks turun ke bawah jika panjang */
    }
    
    .agenda-meta-info {
        font-size: 12px !important;
        flex-wrap: wrap !important; /* Info waktu/tempat biar turun kalau gak muat */
    }
}

/* ======================================================
    34. CONTACT PAGE SPECIFIC (UPA TIK) - FIXED RESPONSIVE
   ====================================================== */

/* Pengaturan Grid Utama */
.contact-grid-top {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    margin-bottom: 50px !important;
}

.contact-main-wrapper {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* Kartu Kontak Atas */
.contact-card {
    background: #fff !important;
    padding: 30px !important;
    border-radius: 15px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.contact-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* Styling Form & Box */
.contact-form-box {
    background: #fff !important;
    padding: 40px !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05) !important;
    width: 100% !important; /* Mencegah meluber */
}

/* RESPONSIVE BREAKPOINT KHUSUS KONTAK */
@media screen and (max-width: 992px) {
    .contact-main-wrapper {
        grid-template-columns: 1fr !important; /* Form & Map menumpuk vertikal */
        display: flex !important;
        flex-direction: column !important;
    }
    
    .contact-grid-top {
        grid-template-columns: repeat(2, 1fr) !important; /* Kartu atas jadi 2 kolom */
    }
}

@media screen and (max-width: 768px) {
    .contact-grid-top {
        grid-template-columns: 1fr !important; /* Kartu atas jadi 1 kolom */
    }

    .contact-form-box {
        padding: 20px !important;
    }
    
    /* Memastikan Row Form (Nama & Email) tidak pecah */
    .contact-form-box .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Memastikan Maps menyesuaikan lebar layar HP */
    .info-block iframe {
        width: 100% !important;
        height: 250px !important;
    }

    .btn-submit-contact {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ======================================================
    35. TABEL UNDUHAN RESPONSIVE (archive-unduhan.php)
   ====================================================== */
.unduhan-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #fff;
}

.unduhan-table th {
    background-color: #f8fafc;
    color: #1e293b;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 700;
}

.unduhan-table td {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.btn-download {
    background: #0056b3 !important;
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: 0.3s;
}

.btn-download:hover {
    background: #003d80 !important;
    transform: translateY(-2px);
}

/* Penyesuaian Tabel di Layar Kecil (HP) */
@media screen and (max-width: 768px) {
    .unduhan-table th, .unduhan-table td {
        padding: 12px 10px;
        font-size: 14px;
    }
    
    .btn-download {
        padding: 6px 10px;
        font-size: 11px !important;
    }
}

/* ======================================================
    36. FIX STRUKTUR ORGANISASI (DESKTOP & TABLET)
    Fungsi: Mengunci ukuran foto agar tidak membesar/meluber
   ====================================================== */
@media screen and (min-width: 992px) {
    /* Batasi lebar kartu pengurus agar tidak memenuhi layar */
    .member-card, .upa-card-member {
        max-width: 250px !important; 
        margin: 0 auto !important;
    }

    /* Kunci tinggi foto agar seragam dan tidak pecah/membesar */
    .member-photo img, .member-card img {
        width: 100% !important;
        height: 320px !important; 
        object-fit: cover !important; /* Kepala tidak akan gepeng */
        border-radius: 15px !important;
    }
}

/* ======================================================
    37. FIX PUSAT DOKUMEN & JUDUL PHP (MOBILE)
    Fungsi: Mendorong judul agar tidak tertutup header biru
   ====================================================== */
@media screen and (max-width: 1024px) {
    /* Targetkan area konten utama pada halaman arsip/PHP */
    .page-template-archive-unduhan #content, 
    .archive-unduhan-wrapper,
    .org-container-final {
        padding-top: 180px !important; /* Jarak aman dari header mobile */
    }

    /* Pastikan judul di dalam banner biru juga turun */
    .hero-title, .upa-section-title {
        margin-top: 20px !important;
        font-size: 22px !important;
        display: block !important;
    }
}

/* ======================================================
   38. THE FINAL FIX: PURE FLEX CENTER (ANTI-MELENCENG)
   ====================================================== */
@media screen and (max-width: 1024px) {
    /* 1. Paksa Container Utama Jadi Flex Column & Center */
    .org-container-final {
    /* 1. Menengahkan container itu sendiri */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 2. Mengunci lebar agar tidak meluas liar */
    width: 100% !important;
    max-width: 1200px; /* Sesuaikan dengan lebar maksimal desktop Anda */
    
    /* 3. Memastikan semua konten di dalamnya ikut ke tengah */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 4. Menghilangkan gangguan layout */
    float: none !important;
    clear: both !important;
    position: relative !important;
}

    /* 2. Setiap Baris Juga Harus Menjadi Flex Center */
    .row-pimpinan, .row-pokja, .row-divisi {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; /* Paksa kartu ke tengah */
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto 40px auto !important;
        padding: 0 !important;
        gap: 40px !important;
    }

    /* 3. KARTU: Kunci Mati Lebar Agar Tidak Gepeng */
    .member-card-final {
        width: 260px !important;       /* Ramping agar tidak gepeng */
        min-width: 260px !important;
        max-width: 260px !important;
        min-height: 480px !important;  /* Tinggi aman agar PhD tidak terpotong */
        
        /* Reset posisi paksa */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;     /* Center horizontal */
        transform: none !important;
        
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    /* 4. Fix Foto agar tidak melar */
    .photo-frame {
        width: 100% !important;
        height: 280px !important;
        flex: 0 0 280px !important;
        overflow: hidden !important;
    }

    /* 5. Teks: Beri Ruang untuk Nama Pak Andi Hendra */
    .info-details {
        width: 100% !important;
        padding: 20px 10px !important;
        min-height: 160px !important; /* Ruang lega untuk gelar PhD */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        background: #ffffff !important;
    }

    .info-details strong {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        color: #1e293b !important;
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* 6. Matikan Sisa Garis Koordinasi */
    .row-pimpinan::after, .row-pokja::after, .row-divisi::before, .row-divisi .member-card-final::before {
        display: none !important;
        content: none !important;
    }
}

/* ======================================================
   39. THE ULTIMATE FORCE CENTER (ANTI-GEPENG) 
   ====================================================== */
@media screen and (max-width: 1024px) {
    /* 1. Reset paksa semua pembungkus agar tidak ada padding samping */
    .org-container-final, 
    .row-pimpinan, 
    .row-pokja, 
    .row-divisi {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important; /* Menghilangkan padding yang bikin miring ke kanan */
        text-align: center !important; /* Menengahkan kartu di dalamnya */
        float: none !important;
        overflow: visible !important;
    }

    /* 2. Kunci mati dimensi kartu agar tegak (Ramping) */
    .member-card-final {
        display: inline-block !important; /* Wajib agar text-align: center bekerja */
        width: 250px !important;    /* Kunci lebar agar TIDAK GEPENG */
        min-width: 250px !important;
        max-width: 250px !important;
        min-height: 450px !important; /* Ruang agar nama PhD tidak terpotong */
        
        /* Margin auto untuk memastikan posisi tengah sempurna */
        margin: 20px auto !important; 
        
        position: relative !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        border-bottom: 4px solid #0056b3 !important;
        vertical-align: top !important;
    }

    /* 3. Pastikan foto tidak melar */
    .photo-frame {
        width: 100% !important;
        height: 280px !important;
        display: block !important;
        overflow: hidden !important;
    }

    /* 4. Area detail teks (Nama & Jabatan) */
    .info-details {
        width: 100% !important;
        padding: 15px 10px !important;
        min-height: 150px !important; 
        display: block !important;
        text-align: center !important;
    }

    .info-details strong {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        display: block !important;
        margin-bottom: 5px !important;
        color: #1e293b !important;
    }

    /* 5. Matikan semua garis koordinasi agar tidak "menarik" posisi kartu */
    .row-pimpinan::after, 
    .row-pokja::after, 
    .row-divisi::before, 
    .row-divisi .member-card-final::before {
        display: none !important;
        content: none !important;
    }
}

/* ======================================================
    40. RESPONSIVE LAYANAN DIGITAL (7 ITEMS FIX)
   ====================================================== */
@media screen and (max-width: 1100px) {
    .digital-grid {
        /* Tablet: Menampilkan 2 kolom agar kartu tetap lebar dan terbaca */
        grid-template-columns: repeat(2, 1fr) !important; 
        padding: 0 20px;
        gap: 15px;
    }
}

@media screen and (max-width: 768px) {
    .section-layanan-digital {
        padding: 60px 0;
    }
    
    .digital-grid {
        /* Layar sedang: Tetap 2 kolom namun padding lebih rapat */
        gap: 12px;
    }
    
    .digi-icon {
        font-size: 1.8rem; /* Ikon sedikit mengecil di layar sedang */
    }
}

@media screen and (max-width: 600px) {
    .digital-grid {
        /* HP: 1 kolom tumpuk agar teks tidak terpotong */
        grid-template-columns: 1fr !important; 
        width: 90%;
        margin: 30px auto 0;
        gap: 10px;
    }
    
    .digital-card {
        padding: 15px 20px;
        border-radius: 12px; /* Sudut lebih halus untuk layar kecil */
    }

    .section-layanan-digital {
        padding: 50px 0;
    }
    
    .section-layanan-digital h2 {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    
    .digi-info h3 {
        font-size: 1rem;
    }
    
    .digi-info p {
        font-size: 0.75rem;
    }
}