/* ====== BASE ====== */
.sticky-ads {
  /* Variabel ukuran yang akan dioverride oleh breakpoint */
  --side-w: 160px;   
  --side-h: 500px;
  --bottom-w: 300px;
  --handle-w: 28px;
  --handle-h: 28px;

  position: fixed;
  z-index: 9999;
  background: transparent;   /* transparan */
  border: 0px solid #ddd;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  overflow: visible;
  transition: transform .28s ease-in-out;
  will-change: transform;
  font-family: sans-serif;
}

/* Posisi */
.sticky-ads-left  { top:170px; left:10px;  width: var(--side-w); }
.sticky-ads-right { top:170px; right:10px; width: var(--side-w); }
.sticky-ads-bottom{
  left:50%; bottom:10px; transform:translateX(-50%);
  width: auto !important;
  height: auto !important;
  text-align:center;
}

/* Toolbar & tombol Hide */
.sticky-ads .sticky-ads-toolbar{
  display:flex; justify-content:flex-end; align-items:center; gap:.5rem;
  padding:.25rem .5rem;
  background:#f6f7f9;   
  border-bottom: none;       /* opsional: hilangkan garis bawah */
  position:relative; z-index:2;
}

.sticky-ads .sticky-ads-toggle{
  cursor:pointer;
  border: 1px solid #ddd;
  background:#fff;   
  font-size:12px;
  padding:.2rem .6rem;
  border-radius:6px;
  line-height:1.2;
}
.sticky-ads .sticky-ads-toggle:hover{
  background: rgba(255,255,255,.2);  /* efek hover transparan */
}


/* Konten iklan */
.sticky-ads .sticky-ads-link, .sticky-ads .ads-content{
  position:relative; z-index:1; display:block; text-align:center; width:100%;
}
.sticky-ads img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-width: 100%;
}


/* Handle Unhide (hanya muncul saat hidden) */
.sticky-ads .sticky-ads-handle{ display:none; }
.sticky-ads.is-hidden .sticky-ads-toolbar{ display:none; }
.sticky-ads.is-hidden .sticky-ads-handle{
  display:flex; align-items:center; justify-content:center;
  position:absolute; background:#fff; border:1px solid #ddd;
  box-shadow:0 2px 10px rgba(0,0,0,.15); cursor:pointer; opacity:.95; z-index:2;
}

/* Posisi handle */
.sticky-ads-left.is-hidden  .sticky-ads-handle { top:8px;  right:-1px; width:var(--handle-w); height:28px; border-left:none;  border-radius:0 6px 6px 0; }
.sticky-ads-right.is-hidden .sticky-ads-handle { top:8px;  left:-1px;  width:var(--handle-w); height:28px; border-right:none; border-radius:6px 0 0 6px; }
.sticky-ads-bottom.is-hidden .sticky-ads-handle { left:50%; transform:translateX(-50%); top:-1px; width:64px; height:var(--handle-h); border-bottom:none; border-radius:6px 6px 0 0; }

/* Hidden: geser CONTAINER, sisakan handle terlihat */
.sticky-ads-left.is-hidden  { transform: translateX(calc(-100% + var(--handle-w))); }
.sticky-ads-right.is-hidden { transform: translateX(calc( 100% - var(--handle-w))); }
.sticky-ads-bottom.is-hidden{ transform: translate(-50%, calc(100% - var(--handle-h))); }

/* ====== BREAKPOINTS ====== */

/* ≥ 1400px: side 160x?, bottom 970x250 */
@media (min-width: 1400px){
  .sticky-ads{ --side-w: 160px; --bottom-w: 970px; }
}

/* 1200–1399px: side 160, bottom 728 */
@media (min-width: 1200px) and (max-width: 1399.98px){
  .sticky-ads{ --side-w: 160px; --bottom-w: 728px; }
}

/* 992–1199px: side 120, bottom 728 */
@media (min-width: 992px) and (max-width: 1199.98px){
  .sticky-ads{ --side-w: 120px; --bottom-w: 728px; }
}

/* 768–991px: side 120, bottom 468 */
@media (min-width: 768px) and (max-width: 991.98px){
  .sticky-ads{ --side-w: 120px; --bottom-w: 468px; }
}

/* < 768px (mobile): sembunyikan side; bottom jadi 320 (bisa diaktifkan) */
@media (max-width: 767.98px){
    .sticky-ads-left.is-hidden  {
    transform: translateX(-100%) !important;
  }
  .sticky-ads-right.is-hidden {
    transform: translateX(100%) !important;
  }
  /*.sticky-ads-left, .sticky-ads-right { display:none !important; }*/
  /* Jika ingin bottom TETAP tampil di mobile kecil, aktifkan baris di bawah */
  .sticky-ads { --bottom-w: 320px; }
}

/* Opsional: batas minimal agar konten tidak pecah (hindari < 100px) */
@media (max-width: 360px){
  .sticky-ads { --bottom-w: min(300px, 100vw - 16px); }
}