/* =========================================================
   GAYA HEADER MOBILE (Dropdown Effect)
   ========================================================= */
.header-mobile-only { display: block; }
@media screen and (min-width: 1024px) {
    .header-mobile-only { display: none !important; }
}

@media screen and (max-width: 1023px) {
    /* 1. Pengaturan Induk (Sesuai kodemu) */
    .site-header {
        background: #ffffff;
        border-bottom: 1px solid #f2f2f2;
        padding: 12px 0;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* 2. Pengaturan Wadah Mobile */
    .header-mobile {
        /* Wajib relative agar menu dropdown tahu dari mana dia harus turun */
        position: relative; 
    }

    /* 3. KUNCI PERBAIKAN: Padding atas-bawah diubah jadi 0 */
    .container-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px; /* Sebelumnya mungkin ada 12px atau 15px di sini, kita jadikan 0 */
    }

    /* --- Logo --- */
    .logo-enews-mobile {
        font-size: 24px;
        font-weight: 900;
        color: #111;
        text-decoration: none;
    }

    /* --- Ikon & Hamburger di Kanan --- */
    .mobile-icons-group {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .icon-search-svg, .icon-bell-svg {
        width: 22px;
        height: 22px;
        stroke: #333;
        display: block;
    }

    /* Hamburger Ikon Sebenarnya */
    .hamburger-menu {
        width: 24px;
        height: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }

    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 2px;
        background: #111;
        transition: all 0.3s ease;
    }

    /* Animasi Hamburger berubah jadi tanda X saat menu terbuka */
    .hamburger-menu.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger-menu.is-active span:nth-child(2) { opacity: 0; }
    .hamburger-menu.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
       GAYA DROPDOWN MENU (Membuka ke Bawah & Full Width)
       ========================================================= */
    .mobile-menu-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }

    .mobile-menu-dropdown.is-active {
        max-height: 400px;
    }

    /* 1. Wadah List Dibuat Full Tanpa Jarak */
    .mobile-menu-dropdown ul,
    .nav-menu-mobile {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important; /* Padding di-nol-kan agar garis bisa mentok layar */
        width: 100% !important;
    }

    .mobile-menu-dropdown li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Area Link Diberi Jarak Dalam & Box-Sizing */
    .mobile-menu-dropdown li a {
        text-decoration: none !important;
        color: #111 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        display: block !important;
        
        /* 15px atas-bawah, 20px kiri-kanan (Teks bergeser, tapi garis tetap full) */
        padding: 15px 20px !important; 
        
        border-bottom: 1px solid #f0f0f0 !important;
        box-sizing: border-box !important; /* Wajib agar padding tidak merusak lebar 100% */
    }

    .mobile-menu-dropdown li:last-child a {
        border-bottom: none !important;
    }
	
/* =========================================================
       GAYA SEARCH OVERLAY MOBILE (Menutupi Header)
       ========================================================= */
    .mobile-search-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
        background: #ffffff;
        z-index: 1005; 
        display: flex;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        
        opacity: 0;
        visibility: hidden;
        transform: translateY(-5px);
        transition: all 0.3s ease;
    }

    .mobile-search-overlay.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .search-overlay-container {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 15px;
    }

    /* 1. PERBAIKAN: Menghilangkan kotak bulat, jadi lebih bersih */
    .search-form-mobile {
        flex: 1;
        display: flex;
        align-items: center;
        background: transparent; /* Latar belakang tembus pandang */
        border-radius: 0; /* Hilangkan efek bulat */
        border-bottom: 1px solid #ddd; /* Kasih garis bawah tipis biar elegan */
    }

    .search-field-mobile {
        width: 100%;
        border: none;
        background: transparent;
        padding: 10px 5px;
        font-size: 16px;
        color: #111;
        outline: none;
    }

    /* Ikon Kaca Pembesar di dalam form */
    .search-submit-mobile {
        background: none;
        border: none;
        padding: 0 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    
    .search-submit-mobile .icon-search-svg {
        width: 20px;
        height: 20px;
        stroke: #555;
    }

    /* 2. PERBAIKAN: Memunculkan Tombol X (Tutup) */
    .close-search-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

    /* Memaksa ikon X agar punya ukuran dan warna yang jelas */
    .close-search-btn .icon-close-svg {
        width: 26px;
        height: 26px;
        stroke: #111;
        display: block;
    }
	
/* =========================================================
   STYLE NAVIGASI MOBILE: LINK VS TOGGLE
   ========================================================= */

@media screen and (max-width: 767px) {
    .nav-menu-mobile li.menu-item-has-children {
        position: relative;
        display: block; /* Pastikan dia membungkus konten dengan benar */
    }

    /* Area Teks Link Utama (Sport, dll) */
    .nav-menu-mobile li.menu-item-has-children > a {
        display: inline-block; /* Biar lebarnya cuma seukuran teks */
        padding-right: 15px;   /* Jarak aman ke panah */
        width: calc(100% - 60px); /* Berikan ruang kosong di kanan untuk tombol panah */
    }

    /* Tombol Panah (Toggle) */
    .mobile-arrow-toggle {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;           /* Area klik jempol yang lega */
        height: 48px;          /* Sesuaikan dengan tinggi baris menu kamu */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f9f9f9;   /* Background beda dikit biar user tahu ini tombol */
        border-left: 1px solid #eee;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* Animasi Panah saat Dropdown Aktif */
    .menu-item-has-children.active > .mobile-arrow-toggle {
        transform: rotate(180deg);
        color: #cc0000;
        background: #fff;
    }

    /* Sembunyikan Sub-menu kecuali menu aktif */
    .nav-menu-mobile .sub-menu {
        display: none !important;
        width: 100%;
    }

    .nav-menu-mobile li.active > .sub-menu {
        display: block !important;
    }
	
/* =========================================================
   FIXED: MOBILE MENU DROPDOWN (NEMPEL & SMOOTH)
   ========================================================= */

#mobile-menu-dropdown {
    /* 1. KUNCI NEMPEL: Gunakan Absolute + Top 100% */
    position: absolute;
    top: calc(100% + 12px) !important; /* Tambahkan 5px jarak dari header. Silakan ganti sesuai selera (misal 8px, 10px, dst) */
    left: 0;
    width: 100%;
    
    /* 2. Fleksibilitas Tinggi */
    height: auto !important;
    max-height: calc(100vh - 100%); /* Sisanya menutup layar HP */
    background: #ffffff;
    z-index: 999999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* 3. Reset Jarak Pengganggu */
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #f2f2f2; /* Garis tipis biar estetik pas nempel */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

    /* 4. Animasi Halus (Slide Down + Fade) */
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px); /* Muncul dikit dari balik header */
    transition: 
        opacity 0.4s ease, 
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
        visibility 0.4s;
    pointer-events: none;
}

/* 5. Saat Menu Aktif */
#mobile-menu-dropdown.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 6. PEMBERSIH CELAH: Pastikan Container Header Tidak Punya Jarak Bawah */
.header-mobile, 
.container-mobile {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
	
}