/* ============================================================
   BANNER AFFILIATE — banner Accesstrade di slot iklan
   assets/css/style.ads-affiliate.css

   File baru, berdiri sendiri. Tidak ada CSS lama yang diubah.
   Hanya berlaku bila slot berisi banner affiliate (.bit-affbn);
   slot kosong tetap memakai tampilan lamanya.

   Gaya mengikuti iklan media pada umumnya: kotak slot tetap ada
   sebagai area iklan berlabel "Iklan", banner tampil di ukuran
   aslinya di tengah kotak. Lebar & proporsi tiap banner diisi PHP
   (style="width:…;aspect-ratio:…"); di layar sempit banner mengecil
   proporsional. Gambar tidak pernah dipotong atau diubah.
   ============================================================ */

.bit-affbn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.bit-affbn-tag {
  display: block;
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: #9ca3af;
  user-select: none;
}

.bit-affbn-tag-sep {
  margin: 0 6px;
}

/* Sidebar 160 px: label "Iklan" tetap di atas banner, tautan
   "Pasang iklan" dipindah ke bawah banner, tanpa titik pemisah.
   display: contents membuat isi label menjadi anak langsung kolom
   .bit-affbn, sehingga tautannya bisa diurutkan setelah banner. */
.bit-affbn--list_sidebar_left .bit-affbn-tag,
.bit-affbn--list_sidebar_right .bit-affbn-tag {
  display: contents;
}

.bit-affbn--list_sidebar_left .bit-affbn-tag-sep,
.bit-affbn--list_sidebar_right .bit-affbn-tag-sep {
  display: none;
}

.bit-affbn--list_sidebar_left .bit-affbn-tag-link,
.bit-affbn--list_sidebar_right .bit-affbn-tag-link {
  order: 1;
  margin-top: 2px;
}

/* Tautan "Pasang iklan di sini". Selektor dibuat lebih spesifik dan
   memakai !important karena link di dalam artikel diberi warna biru
   dan garis bawah !important oleh style.article.css. */
.bit-affbn-tag a.bit-affbn-tag-link,
.bit-article-content .bit-affbn-tag a.bit-affbn-tag-link {
  color: #9ca3af !important;
  text-decoration: none !important;
  font-weight: 700;
  transition: color .15s ease;
}

.bit-affbn-tag a.bit-affbn-tag-link:hover,
.bit-article-content .bit-affbn-tag a.bit-affbn-tag-link:hover {
  color: #29a4c5 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Semua banner dalam satu slot ditumpuk di sel grid yang sama, lalu
   bergantian lewat opacity (lihat script.ads-rotator.js). Tinggi slot
   mengikuti banner tertinggi, jadi halaman tidak bergeser saat berganti. */
.bit-affbn-stage {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
}

.bit-affbn-item {
  grid-area: 1 / 1;
  display: block;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
  text-decoration: none !important;
}

.bit-affbn-item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}

.bit-affbn-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  margin: 0;
  max-width: none;
  border-radius: 0;
}

/* Link di dalam artikel bergaris bawah !important (style.article.css);
   banner tidak boleh ikut. */
.bit-article-content a.bit-affbn-item,
.bit-article-content a.bit-affbn-item:hover {
  text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .bit-affbn-item,
  .bit-affbn-item.is-active {
    transition: none;
  }
}

/* ── Kotak slot saat terisi banner ───────────
   Kotak tetap ada sebagai area iklan; garis putus-putus placeholder
   diganti garis tipis biasa, dan tinggi minimum placeholder dilepas
   supaya kotak mengikuti ukuran banner. */
.bit-ads-leaderboard:has(.bit-affbn),
.bit-ads-home:has(.bit-affbn),
.bit-ads-mobile-home:has(.bit-affbn),
.bit-ads-pos2:has(.bit-affbn),
.bit-ads-pos3:has(.bit-affbn),
.bit-ads-mobile:has(.bit-affbn),
.bit-archive-top-ads:has(.bit-affbn),
.bit-list-ads-box:has(.bit-affbn) {
  min-height: 0;
  height: auto;
  padding: 10px 12px 14px;
  background: rgba(255,255,255,.55);
  border-style: solid;
  border-color: rgba(41,164,197,.14);
  box-sizing: border-box;
}

.bit-archive-top-ads:has(.bit-affbn) {
  border-left: none;
  border-right: none;
}

.bit-list-ads-box:has(.bit-affbn) {
  padding: 10px 0 14px;
}

/* Samping Highlight: label "Iklan" sudah dibuat ::before slot ini
   (posisi top 12px), jadi banner diberi ruang di atasnya. */
.bit-affbn--article_side {
  padding: 32px 12px 14px;
}

/* Iklan tambahan di dalam artikel (desktop), seukuran iklan tengah
   artikel. Kotak ini hanya dirender bila slotnya berisi banner, jadi
   langsung bergaya "terisi". */
.bit-ads-bar {
  width: 100%;
  margin: 28px 0;
  padding: 10px 12px 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(41,164,197,.14);
  border-radius: 8px;
  box-sizing: border-box;
}

/* Sticky bawah layar: tanpa label, kotak sticky sudah punya latar
   dan tombol Close sendiri. */
.bit-sticky-ads-inner:has(.bit-affbn),
.bit-sticky-ads-mobile-inner:has(.bit-affbn) {
  min-height: 0;
}

/* ============================================================
   KHUSUS iPAD TEGAK — pengisi ruang kosong sidebar
   Class `bit-ipad` dipasang di <html> oleh skrip viewport di
   header.php, hanya saat iPad tegak dirender selebar 1100px.
   Tanpa class itu (desktop, HP, iPad landscape) semua elemen di
   bawah tersembunyi, jadi tampilan lama tidak berubah.
   Elemen yang tersembunyi juga tidak ikut dihitung skrip sticky
   sidebar artikel (contentHeight() melewati display:none).
   ============================================================ */

.bit-side-ipad-ad,
.bit-side-ipad-only {
  display: none !important;
}

html.bit-ipad .bit-side-ipad-only {
  display: block !important;
}

/* Kotak iklan di bawah sidebar, gaya mengikuti kotak iklan lain */
html.bit-ipad .bit-side-ipad-ad {
  display: block !important;
  margin-top: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(41,164,197,.14);
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Terisi banner affiliate: beri ruang untuk label "Iklan" */
html.bit-ipad .bit-side-ipad-ad:has(.bit-affbn) {
  padding: 12px 12px 14px;
}

/* Masih kosong: kotak "Pasang Iklan Brand Anda".
   .bit-bn memakai position:absolute + inset:0 (style.ads-banners.css),
   jadi pembungkusnya wajib position:relative dan punya tinggi sendiri.
   Tanpa ini kotak placeholder melebar menutupi seluruh sidebar. */
html.bit-ipad .bit-side-ipad-ad {
  position: relative;
}

html.bit-ipad .bit-side-ipad-ad:not(:has(.bit-affbn)) {
  height: 260px;
}

/* Sidebar artikel terlalu tinggi untuk layar (misalnya Where to Buy berisi
   3 produk atau lebih): skrip di single.php memasang class --unstuck dan
   sidebar ikut tergulir. Dalam kondisi itu Popular + Related Stories +
   kotak iklan (pembungkus .bit-side-tail) dibuat menempel sendiri supaya ruang di
   samping artikel tetap terisi. Sidebar sudah dipanjangkan setinggi kolom
   artikel oleh style.desktop.article.css, jadi sticky di sini bisa berjalan
   sampai artikel habis. Jarak atasnya sama dengan sticky Popular di desktop. */
html.bit-ipad .bit-article-side--unstuck .bit-side-tail {
  position: sticky;
  top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
}

/* Desktop: menjaga perilaku lama kartu Popular.
   style.desktop.article.css membuat Popular menempel saat sidebar
   --unstuck hanya bila Popular adalah kartu terakhir (:last-child).
   Popular kini berada di dalam pembungkus .bit-side-tail bersama Related
   Stories dan kotak iklan iPad, jadi syarat itu tidak lagi terpenuhi.
   Untuk kasus yang sama persis seperti dulu (artikel punya produk Where to
   Buy, sehingga Related Stories hanya untuk iPad dan tersembunyi di
   desktop), pembungkusnya yang menempel. Isinya yang terlihat di desktop
   hanya Popular, jadi hasilnya sama dengan sebelumnya. */
html:not(.bit-ipad) .bit-article-side--unstuck .bit-side-tail:has(> .bit-side-ipad-only) {
  position: sticky;
  top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
}