.ad-slot {
    clear: both;
    margin: 8px auto 14px;
    text-align: center;
}

.ad-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
}

.ad-slot-banner {
    max-width: 728px;
    min-height: 90px;
}

.ad-slot-atf {
    margin: 8px auto 12px;
}

.ad-slot-rectangle {
    max-width: 300px;
    min-height: 250px;
}

.ad-slot-native {
    padding: 8px 0;
}

.ad-slot-native .js-ad-slot {
    min-height: 250px;
}

.js-ad-slot:empty {
    display: block;
}

/* Header banner responsif TOS-safe: placeholder untuk SATU iframe terpilih.
   Tidak pernah display:none — hanya batasi overflow bila viewport menyempit
   setelah load (lock-once). min-height mencadangkan ruang anti-CLS.
   Desktop = 728x90 → 90px. Mobile kini 300x250 (bukan 320x50 lagi), jadi
   min-height mobile dinaikkan ke 250px di media query agar tidak ada layout
   shift saat iframe disisipkan. */
.js-ad-header {
    display: block;
    max-width: 100%;
    min-height: 90px;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 480px) {
    .js-ad-header {
        min-height: 250px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Tablet = 468x60 */
    .js-ad-header {
        min-height: 60px;
    }
}

.js-ad-header iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.list-blog .ad-slot {
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .ad-slot {
        width: 100%;
    }

    .ad-slot-banner,
    .ad-slot-rectangle {
        max-width: 100%;
        overflow: hidden;
    }

    .ad-slot-banner {
        max-width: 468px;
        min-height: 60px;
    }

    /* On mobile we surface the 300x250 as an in-content unit instead of the
       sidebar (sidebar stacks under content on mobile, so a true sidebar
       rectangle is wasted space). Sidebar slot is hidden; mid-article slot
       takes its place. */
    .ad-slot-rectangle.sidebar-only {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .ad-slot-banner {
        max-width: 320px;
        min-height: 50px;
    }

    /* Header ATF mobile kini 300x250 (rectangle), jadi kontainernya tidak boleh
       dibatasi tinggi 50px seperti banner 320x50. Aturan ini HARUS setelah
       .ad-slot-banner di atas agar menang pada spesifisitas yang sama. */
    .ad-slot-atf {
        max-width: 300px;
        min-height: 250px;
    }
}
