.bit-only-desktop  { display: none !important; }
.bit-only-mobile   { display: inline-flex !important; }

/* Ads top mobile di halaman list */
.bit-archive-top-ads {
  display: flex;
  width: auto;
  min-height: 250px;
  margin: -12px -12px 16px;
  background: rgba(255,255,255,.50);
  border: 1px dashed rgba(41,164,197,.30);
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.bit-archive-top-ads .bit-bn {
  border-radius: 0;
}

.bit-archive-top-ads .bit-ads-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.25);
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 1025px) {
  .bit-archive-top-ads { display: none; }
}

.bit-nav,
.bit-sidebar,
.bit-article-side {
  display: none !important;
}

.bit-logo-img {
  height: 26px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (min-width: 1025px) {
  .bit-only-desktop { display: block !important; }
  .bit-only-mobile  { display: none !important; }

  .bit-only-desktop .bit-icon-btn { display: inline-flex; }

  .bit-nav          { display: flex !important; }
  .bit-sidebar      { display: block !important; }
  .bit-article-side { display: block !important; }

  .bit-header-right .bit-menu-btn,
  .bit-header-right .bit-icon-btn[aria-label="Buka menu"] {
    display: none !important;
  }

  .bit-logo-img,
  .bit-header .bit-logo-img,
  .bit-page--about .bit-logo-img,
  body .bit-logo-img {
    height: 40px !important;
    max-height: none !important;
  }

  .bit-nav-logo .bit-logo-img {
    height: 28px !important;
  }

  .bit-header-left {
    min-height: 52px;
    align-items: center;
  }

  .bit-header {
    min-height: 64px;
    padding: 10px 18px;
  }

  .bit-topsearch {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 10px;
  }
}

html,
body {
  height: 100%;
}

.bit-page,
body.bit-page--about {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bit-header,
.bit-footer {
  flex-shrink: 0;
}

main.bit-main {
  flex: 1;
}

@media (min-width: 744px) and (max-width: 1024px) {

  .bit-tablet-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    /* v1.4 · Poin 5 — posisi akhir ditentukan blok di akhir file, yang
       menaikkan notice hanya bila sticky ads memang hadir di halaman ini. */
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 9999;
    max-width: calc(100% - 32px);
    padding: 10px 12px 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(41, 164, 197, 0.30);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    animation: bitNoticeSlideUp 0.4s ease 1.2s forwards;
  }

  .bit-tablet-notice-text {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #374151;
    white-space: nowrap;
  }

  .bit-tablet-notice-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    color: #374151;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
  }

  .bit-tablet-notice-close:hover {
    background: rgba(0, 0, 0, 0.14);
  }

  .bit-tablet-notice--hiding {
    animation: bitNoticeSlideDown 0.4s ease forwards !important;
  }

  @keyframes bitNoticeSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes bitNoticeSlideDown {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 5 (lanjutan) — Posisi notice mengikuti keberadaan sticky ads

   Notice perlu berada di atas sticky ads (~64px) agar tidak tertutup. Namun
   sticky ads hanya ada di single, front-page, home, archive, dan search —
   sementara tablet notice muncul di SEMUA halaman. Di About Us, Feedback,
   Pedoman Editorial, dan Privacy Policy tidak ada banner sama sekali, sehingga
   menaikkan posisinya secara buta akan membuat notice menggantung dengan ruang
   kosong di bawahnya.

   Karena itu posisi dasarnya tetap 16px, dan notice hanya naik ke 80px bila
   sticky ads benar-benar hadir dan belum ditutup. script.js memasang class
   penanda pada <body>:

     bit-has-sticky-ads  — banner ada di halaman ini
     bit-ads-dismissed   — banner sudah ditutup pengguna

   Transisi hanya dipasang pada `bottom`. Properti `transform` dan `opacity`
   sengaja tidak disentuh karena keduanya sudah dikunci oleh animasi
   `bitNoticeSlideUp ... forwards` — memberi transisi di sana akan membuat
   animasi masuk terlihat patah.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 744px) and (max-width: 1024px) {

  .bit-tablet-notice {
    /* Posisi dasar, dipakai bila tidak ada sticky ads di halaman ini */
    bottom: 16px;
    transition: bottom .30s cubic-bezier(.22, 1, .36, 1);
  }

  /* Naik hanya bila banner hadir dan belum ditutup pengguna */
  body.bit-has-sticky-ads:not(.bit-ads-dismissed) .bit-tablet-notice {
    bottom: 80px;
  }
}