/* ==========================================================================
   AcehToday — Ads Manager (front-end)
   Semua warna memakai custom property tema (var(--at-*)) yang
   sudah di-repoint otomatis oleh 10-dark-mode.css, sehingga slot iklan
   ikut berubah saat mode gelap diaktifkan tanpa override tambahan.
   ========================================================================== */

/* ── Slot generik ── */
.at-ad-slot{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 100%;
}

.at-ad-unit{ width: 100%; display: flex; align-items: center; justify-content: center; }
.at-ad-unit--image{ line-height: 0; }
.at-ad-img{ max-width: 100%; height: auto; border-radius: 4px; }

/* ── Placeholder (saat belum ada iklan aktif) ── */
.at-ad-placeholder{
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--at-bg-alt);
  border: 1px dashed var(--at-line);
  border-radius: 8px;
  color: var(--at-muted);
}
.at-ad-placeholder__label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Leaderboard full-width (header-top, footer, dll — dibungkus wrap=true) ── */
.at-ad-strip{
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--at-line);
}
.at-ad-strip .at-ad-slot{ min-height: 70px; }
.at-ad-strip .at-ad-placeholder{ min-height: 70px; }

/* ── Slot dalam alur homepage / artikel (tidak dibungkus strip) ── */
.at-ad-slot--homepage-after-hero,
.at-ad-slot--homepage-section-1,
.at-ad-slot--homepage-section-2,
.at-ad-slot--homepage-section-3,
.at-ad-slot--homepage-section-4,
.at-ad-slot--homepage-section-5,
.at-ad-slot--homepage-before-recommendation,
.at-ad-slot--article-before,
.at-ad-slot--article-mid,
.at-ad-slot--article-after,
.at-ad-slot--archive-top{
  margin: 20px 0;
}

/* ── Slot sidebar (300×250) ── */
.at-ad-slot--sidebar-top,
.at-ad-slot--sidebar-mid,
.at-ad-slot--sidebar-bottom{
  min-height: 250px;
  display:flex;
  flex-direction: column;
  gap:18px;
}
.at-ad-slot--sidebar-top .at-ad-placeholder,
.at-ad-slot--sidebar-mid .at-ad-placeholder,
.at-ad-slot--sidebar-bottom .at-ad-placeholder,
.at-ad-slot--archive-mid .at-ad-placeholder{
  min-height: 250px;
}

/* Sembunyikan iklan sidebar di mobile jika diaktifkan lewat Pengaturan Iklan. */
@media (max-width: 782px){
  .at-ad-slot--hide-mobile{ display: none; }
}

/* ── archive-mid: kartu iklan yang duduk di antara grid artikel ── */
.at-ad-slot--archive-mid{
  grid-column: 1 / -1;
}
@media (min-width: 640px){
  .at-archive-grid .at-ad-slot--archive-mid{
    grid-column: span 1;
    min-height: 250px;
  }
}

/* ── Popup / overlay ── */
.at-popup-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.at-popup-box{
  position: relative;
  background: var(--at-bg);
  border-radius: 12px;
  padding: 20px;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.at-popup-close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--at-ink);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-popup-content{ display: flex; align-items: center; justify-content: center; }

/* ── Wrapper untuk slot "header-logo" (samping logo, sejajar baris atas
   header) — disembunyikan di layar sempit supaya tidak menghimpit logo. ── */
.at-header-top-ad{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.at-header-top-ad .at-ad-slot,
.at-header-top-ad .at-ad-placeholder{
  width: 100%;
  max-width: 100%;
  min-height: 50px;
}
.at-header-top-ad:empty{ display: none; }
@media (max-width: 1024px){
  .at-header-top-ad{ display: none; }
}