/* =======================================================
   1. RESET & WRAPPER
   ======================================================= */
.wargerce-ads-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 1200px !important;
    width: 100%;
    margin: 20px auto !important;
    gap: 20px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    overflow: hidden; /* Mencegah iklan tembus layar */
}

.wargerce-ads-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    max-width: 100%;
}

/* Sembunyikan SEMUA slot dulu */
.slot-728, .slot-468, .slot-320, .slot-300 {
    display: none !important;
}

/* =======================================================
   2. LOGIKA DESKTOP (> 1080px)
   ======================================================= */
@media (min-width: 1081px) {
    .slot-300, .slot-728 { 
        display: flex !important; 
    }
    .slot-300 { width: 300px; height: 250px; }
    .slot-728 { width: 728px; height: 90px; }
}

/* =======================================================
   3. TAMPILAN LAPTOP / TABLET LANDSCAPE (769px - 1080px)
   ======================================================= */
@media (max-width: 1080px) and (min-width: 769px) {
    .wargerce-ads-wrapper {
        flex-direction: column !important; /* Susun ke bawah */
    }
    .slot-300, .slot-728 { 
        display: flex !important; 
    }
}

/* =======================================================
   4. TAMPILAN TABLET PORTRAIT (481px - 768px)
   ======================================================= */
@media (max-width: 768px) and (min-width: 481px) {
    .wargerce-ads-wrapper {
        flex-direction: column !important;
    }
    /* Matikan 728, Hidupkan 468 */
    .slot-300, .slot-468 { 
        display: flex !important; 
    }
}

/* =======================================================
   5. TAMPILAN HP (Maks 480px)
   ======================================================= */
@media (max-width: 480px) {
    .wargerce-ads-wrapper {
        flex-direction: column !important;
        gap: 10px !important;
    }
    /* Matikan 728 & 468, Hidupkan 320 & 300 */
    .slot-300, .slot-320 { 
        display: flex !important; 
    }
    /* Pastikan lebar iklan di HP tidak jebol */
    .slot-300 { width: 300px; height: 250px; transform: scale(0.9); } /* Mengecilkan sedikit jika layar sangat sempit */
    .slot-320 { width: 320px; height: 50px; }
}

/* Memastikan Iframe Iklan Mengikuti Lebar Slot */
.wargerce-ads-wrapper iframe {
    max-width: 100% !important;
}