@media (min-width: 744px) {
  .bit-page {
    max-width: none !important;
    width: 100%;
  }
}

@media (min-width: 1025px) {

  .bit-page {
    max-width: none !important;
    width: 100%;
  }

  .bit-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
  }

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

  .bit-header {
    padding: 10px 18px;
    position: relative;
  }
  .bit-header-shell {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .bit-header-right {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
  }

  .bit-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: auto;
  }
  .bit-nav.is-hidden { display: none !important; }

  .bit-nav-link {
    text-decoration: none;
    color: inherit;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .bit-nav-link:hover { background: rgba(255,255,255,.45); }
  .bit-nav-link.is-active { background: rgba(255,255,255,.60); box-shadow: 0 2px 10px rgba(0,0,0,.06); }

  .bit-nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 10px;
    margin-right: 4px;
  }
  .bit-nav-logo:hover { background: rgba(255,255,255,.45); }
  .bit-nav-logo.is-active { background: rgba(255,255,255,.60); box-shadow: 0 2px 10px rgba(0,0,0,.06); }

  .bit-header-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-right: 14px;
  }
  .bit-header-social img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }
  .bit-header-social a {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    line-height: 0;
  }

  .bit-topsearch {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    padding: 5px 5px 5px 14px;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: searchSlideIn 0.18s ease;
  }
  @keyframes searchSlideIn {
    from { opacity: 0; transform: translateY(-50%) translateX(10px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
  }
  .bit-topsearch[hidden]{ display: none; }

  .bit-header-right:has(.bit-topsearch:not([hidden])) #bitSearchBtn {
    visibility: hidden;
    pointer-events: none;
  }
  .bit-topsearch-label {
    position: absolute;
    width: 1px;height: 1px;
    padding: 0;margin: -1px;
    overflow: hidden;clip: rect(0,0,0,0);
    white-space: nowrap;border: 0;
  }
  .bit-topsearch-input {
    flex: 1;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: transparent;
    padding: 0 4px;
    font-weight: 600;
    font-size: 13px;
    outline: none;
    color: #111827;
  }
  .bit-topsearch-input::placeholder {
    color: rgba(17,24,39,0.55);
  }
  .bit-topsearch-close {
    height: 32px;
    width: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.6);
    color: #1e6fa8;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: background 0.15s;
  }
  .bit-topsearch-close:hover {
    background: rgba(255,255,255,0.9);
  }

  .bit-main { padding: 14px 0 34px; }

  .bit-hero-desktop { margin-top: 10px; }
  .bit-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: stretch;
  }
  .bit-hero-main { display: block; text-decoration: none; color: inherit; }
  .bit-hero-media { border-radius: 18px; overflow: hidden; }
  .bit-hero-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
  }

  .bit-hero-desktop .bit-hero-caption {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
  .bit-hero-desktop .bit-hero-title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    max-width: 82%;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .bit-hero-side {

    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 14px;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .bit-hero-mini {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 14px;
    padding: 10px;
    padding-bottom: 14px;
  }
  .bit-hero-mini:hover {
    background: rgba(255,255,255,.55);
  }
  .bit-hero-mini:not(:last-child) {
    border-bottom: 1px solid rgba(41,164,197,.18);
    border-radius: 0;
  }
  .bit-hero-mini:last-child {
    padding-bottom: 10px;
  }
  .bit-hero-mini-thumb {
    width: 92px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
  }
  .bit-hero-mini-kicker{ font-size: 12px; font-weight: 900; opacity: .75; }
  .bit-hero-mini-title {
    font-weight: 900;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bit-hero-mini-meta{ font-size: 12px; opacity: .75; margin-top: 4px; font-weight: 700; }

  .bit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
    margin-top: 18px;
  }
  .bit-content { min-width: 0; }
  .bit-sidebar {
    display: block;
    position: sticky;
    top: 46px;
    align-self: start;
    border-left: 1px solid rgba(41,164,197,.18);
    padding-left: 24px;
  }

  .bit-sidecard {
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(41,164,197,.22);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    margin-bottom: 14px;
  }
  .bit-side-title { margin: 0 0 10px; font-size: 14px; font-weight: 900; }

  .bit-video-list { display: flex; flex-direction: column; gap: 12px; }
  .bit-video-item {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(219,234,254,.9);
  }

  /* Video Terbaru: kotak jadi garis (v1.2 poin 4) */
  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] .bit-video-list {
    gap: 0;
  }
  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] .bit-video-item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0;
  }
  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] .bit-video-item:not(:last-child) {
    border-bottom: 1px solid rgba(41,164,197,.18);
  }
  .bit-video-thumb {
    width: 88px;
    height: 66px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
  }
  .bit-video-title {
    font-weight: 900;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bit-video-meta { font-size: 12px; opacity: .75; margin-top: 4px; font-weight: 700; }

  .bit-mini-list { display: flex; flex-direction: column; gap: 10px; }
  .bit-mini-item {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dbeafe;
  }

  /* Editor's Pick: kotak jadi garis (v1.2 poin 4) */
  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-list {
    gap: 0;
  }
  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0;
  }
  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-item:not(:last-child) {
    border-bottom: 1px solid rgba(41,164,197,.18);
  }

  /* Trending Topics: hapus box container, chip tetap (v1.2 poin 4) */
  .bit-sidebar .bit-sidecard[aria-label="Trending Topics"] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  /* Pemisah antar-section sidebar (v1.2 poin 4) — ditaruh di akhir biar menang cascade */
  .bit-sidebar .bit-sidecard + .bit-sidecard {
    border-top: 1px solid rgba(41,164,197,.18);
    margin-top: 18px;
    padding-top: 18px;
  }
  .bit-mini-title {
    min-width: 0;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bit-mini-meta { flex-shrink: 0; font-size: 12px; opacity: .8; font-weight: 800; white-space: nowrap; }

  .bit-side-social {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .bit-side-social a {
    height: 56px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .bit-side-social img{ width: 26px; height: 26px; object-fit: contain; display: block; }

  .bit-sorotan-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 18px;
  }

  .bit-ulasan-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .bit-popular-item,
  .bit-terbaru-item {
    align-items: flex-start;
  }

  .bit-popular-text,
  .bit-terbaru-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 85px;
    gap: 10px;
  }

  .bit-popular-title,
  .bit-terbaru-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.45;
  }

  .bit-popular-meta,
  .bit-terbaru-meta {
    margin-top: auto;
  }

  .bit-popular-thumb,
  .bit-terbaru-thumb{ width: 84px; height: 84px; }
  .bit-popular-title,
  .bit-terbaru-title{ font-size: 18px; }

  .bit-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .bit-topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    text-decoration: none;
    color: inherit;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }
  .bit-topic-chip:hover {
    background: rgba(255,255,255,.70);
  }

}

@media (min-width: 1025px) {
  .bit-hero-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 28px !important;
  }
}

/* ── Ads Leaderboard (bawah header) ── */
@media (min-width: 1025px) {
  .bit-ads-leaderboard-wrap {
    width: 100%;
  }

  .bit-ads-leaderboard {
    width: 100%;
    min-height: 130px;
    max-width: 1144px;
    margin: 0 auto;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255,255,255,.50);
    border: 1px dashed rgba(41,164,197,.30);
    border-radius: 12px;
  }

  /* Halaman list (archive, tag, search) — sesuaikan lebar ads dengan konten */
  .blog .bit-ads-leaderboard,
  .page-latest-list .bit-ads-leaderboard,
  .tag .bit-ads-leaderboard,
  .category .bit-ads-leaderboard,
  .search .bit-ads-leaderboard,
  .author .bit-ads-leaderboard {
    max-width: 1040px;
  }

  /* Sembunyikan leaderboard di halaman about, feedback, editorial, privacy */
  .bit-page--about .bit-ads-leaderboard-wrap {
    display: none !important;
  }
}

/* ── Ads Home (pos1, pos2, pos3) ── */
@media (min-width: 1025px) {
  .bit-ads-home {
    width: 100%;
    min-height: 90px;
    margin: 16px 0;
    border-radius: 12px;
    background: rgba(255,255,255,.50);
    border: 1px dashed rgba(41,164,197,.30);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .bit-ads-home .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%);
  }

  /* Pos1 dan Pos3: Billboard 970x250 */
  .bit-ads-home-pos1,
  .bit-ads-home-pos3 {
    width: 970px;
    min-height: 250px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Sticky Bottom Ads ── */
@media (min-width: 1025px) {
  @keyframes bitStickySlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .bit-sticky-ads {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    pointer-events: none;
    animation: bitStickySlideUp 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
  }

  .bit-sticky-ads-inner {
    pointer-events: auto;
    max-width: 1144px;
    margin: 0 auto;
    min-height: 76px;
    background: rgba(255,255,255,.92);
    border-top: 1px solid rgba(41,164,197,.22);
    box-shadow: 0 -4px 18px rgba(0,0,0,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 16px;
  }

  .bit-sticky-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;
  }

  .bit-sticky-ads-close {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    height: 28px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: none;
    background: #374151;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0,0,0,.20);
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
  }

  .bit-sticky-ads-close::before {
    content: '✕';
    font-size: 10px;
    font-weight: 900;
    opacity: .85;
  }

  .bit-sticky-ads-close:hover {
    background: #111827;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
  }
}

/* ══════════════════════════════════════════════════════════
   v1.2 Poin 4 — Opsi A: Kanvas menyatu + garis (sidebar home)
   Ditaruh di paling akhir file agar menang cascade.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* 1. Kanvas terang menyatu untuk area konten homepage (kolom kiri + sidebar)
        supaya konten tidak "ngambang" di atas background biru */
  .bit-layout[aria-label="Konten utama"] {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(41,164,197,.16);
    border-radius: 20px;
    padding: 24px 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Garis kolom pemisah kiri-kanan: naikkan kontras sedikit */
  .bit-layout[aria-label="Konten utama"] .bit-sidebar {
    border-left: 1px solid rgba(41,164,197,.30);
  }

  /* 2. Garis pemisah antar item: naikkan kontras agar struktur terbaca */
  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] .bit-video-item:not(:last-child),
  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-item:not(:last-child) {
    border-bottom: 1px solid rgba(41,164,197,.32);
  }

  /* Jarak antar section: lega, tanpa garis (jangkar visual pindah ke judul) */
  .bit-sidebar .bit-sidecard + .bit-sidecard {
    border-top: none;
    margin-top: 40px;
    padding-top: 0;
  }

  /* 3. Judul section sidebar: jangkar visual gaya editorial */
  .bit-sidebar .bit-side-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #111827;
    padding-bottom: 10px;
    border-bottom: 2px solid #29a4c5;
    margin-bottom: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Poin 3 — Rekomendasi Produk (Affiliate) di kanan hero — DESKTOP
   Menggantikan highlight artikel. Kartu: gambar + nama + sumber + tombol Beli.
   Diadaptasi dari kerangka .bit-hero-mini agar konsisten dengan desain hero.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .bit-hero-side--aff {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }

  .bit-hero-aff-head {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #111827;
    padding-bottom: 10px;
    border-bottom: 2px solid #29a4c5;
    margin-bottom: 4px;
  }

  .bit-hero-aff {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border-radius: 14px;
    padding: 10px;
    transition: background .12s ease;
  }

  .bit-hero-aff:hover {
    background: rgba(255,255,255,.55);
  }

  .bit-hero-aff:not(:last-child) {
    border-bottom: 1px solid rgba(41,164,197,.18);
    border-radius: 0;
  }

  .bit-hero-aff-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(41,164,197,.14);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bit-hero-aff-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .bit-hero-aff-thumb-ph {
    font-size: 26px;
    opacity: .6;
  }

  .bit-hero-aff-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bit-hero-aff-name {
    font-weight: 900;
    line-height: 1.25;
    font-size: 14px;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .bit-hero-aff-source {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: capitalize;
  }

  .bit-hero-aff-btn {
    align-self: flex-start;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background: #29a4c5;
  }

  .bit-hero-aff:hover .bit-hero-aff-btn {
    background: #1d8bab;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Poin 3 — Perapihan Hero + Rekomendasi Produk (finishing)
   Tiga perbaikan:
   1. Dot carousel jatuh ke bawah gambar, karena .bit-hero-carousel ikut
      melar mengikuti tinggi grid. Tinggi carousel dikunci setinggi gambar.
   2. Panel rekomendasi terasa mengambang — tidak punya background sama
      sekali. Dikembalikan "badan"-nya, tapi lebih halus dari kartu lama.
   3. Panel melebihi batas bawah hero. Tinggi dikunci 480px dan isinya
      disebar merata agar ujung bawahnya rata dengan hero.
   Ditaruh di akhir file agar menang cascade atas rule di atasnya.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── 1. Kunci tinggi carousel = tinggi gambar (480px) ──
     Tanpa ini, carousel ikut stretch mengikuti kolom kanan yang lebih
     tinggi, sehingga dot (bottom: 12px) menempel di dasar carousel
     yang melar, bukan di dasar gambar. */
  .bit-hero-desktop .bit-hero-carousel {
    height: 480px;
    align-self: start;
  }

  .bit-hero-desktop .bit-hero-carousel .bit-hero-slide,
  .bit-hero-desktop .bit-hero-carousel .bit-hero-main,
  .bit-hero-desktop .bit-hero-carousel .bit-hero-media {
    height: 100%;
  }

  /* ── 2. Panel rekomendasi: beri badan yang halus ── */
  .bit-hero-side--aff {
    height: 480px;
    box-sizing: border-box;
    justify-content: space-between;
    gap: 0;
    padding: 14px 14px 10px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(41, 164, 197, .14);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* ── 3. Rapatkan isi agar 4 produk pas dalam 480px ── */
  .bit-hero-side--aff .bit-hero-aff-head {
    flex-shrink: 0;
    padding-bottom: 8px;
    margin-bottom: 0;
  }

  .bit-hero-side--aff .bit-hero-aff {
    flex: 1;
    min-height: 0;
    padding: 8px 6px;
    gap: 11px;
    border-radius: 12px;
  }

  .bit-hero-side--aff .bit-hero-aff:not(:last-child) {
    border-radius: 12px;
  }

  .bit-hero-side--aff .bit-hero-aff-thumb {
    width: 64px;
    height: 64px;
  }

  /* Gambar produk umumnya screenshot listing (rasio kotak, ada
     margin putih). object-fit: contain menjaga isinya tidak terpotong. */
  .bit-hero-side--aff .bit-hero-aff-thumb img {
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
  }

  .bit-hero-side--aff .bit-hero-aff-text {
    gap: 3px;
  }

  .bit-hero-side--aff .bit-hero-aff-name {
    font-size: 13.5px;
    line-height: 1.3;
  }

  .bit-hero-side--aff .bit-hero-aff-source {
    font-size: 11px;
    font-weight: 600;
    opacity: .8;
  }

  .bit-hero-side--aff .bit-hero-aff-btn {
    height: 24px;
    padding: 0 11px;
    font-size: 11.5px;
    margin-top: 1px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Perapihan Sidebar Kanan (finishing)
   Empat perbaikan, tanpa menambah tinggi sidebar:
   1. Garis judul section terlalu tebal/pekat (2px solid #29a4c5) sehingga
      "memotong" alur visual. Dilembutkan — posisi tetap di atas judul,
      karena garis ini juga berfungsi sebagai pemisah antar-section
      (hasil poin 4). Memindahkannya ke bawah judul akan menghilangkan
      penanda batas blok.
   2. Editor's Pick: tanggal ditarik ke ujung kanan (space-between),
      menyisakan ruang kosong canggung di tengah. Tanggal dipindah ke
      bawah judul.
   3. Latest Videos: judul (font-weight 900) mendominasi thumbnail.
      Bobotnya diturunkan, bukan thumbnail-nya yang dibesarkan — agar
      sidebar tidak bertambah tinggi.
   4. Trending Topics: pill dengan outline terasa usang. Diganti
      background solid abu muda tanpa border.
   Ditaruh di akhir file agar menang cascade.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── 1. Lembutkan garis judul section ── */
  .bit-sidebar .bit-side-title {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(41, 164, 197, .35);
  }

  /* ── 2. Editor's Pick: tanggal turun ke bawah judul ── */
  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
  }

  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-title {
    width: 100%;
    -webkit-line-clamp: 2;
  }

  .bit-sidebar .bit-sidecard[aria-label="Editor's Pick"] .bit-mini-meta {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    opacity: .65;
    letter-spacing: .01em;
  }

  /* ── 3. Latest Videos: turunkan bobot judul ── */
  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] .bit-video-title {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.35;
  }

  .bit-sidebar .bit-sidecard[aria-label="Video terbaru"] .bit-video-item {
    gap: 14px;
  }

  /* ── 4. Trending Topics: pill teal lembut + tanda hashtag ── */
  .bit-sidebar .bit-topic-chip {
    padding: 7px 13px;
    background: rgba(41,164,197,.10);
    border: none;
    color: #1580b0;
    font-weight: 700;
    transition: background .12s ease, color .12s ease;
  }

  /* Tanda # sebagai penanda topik (murni CSS, HTML tidak diubah) */
  .bit-sidebar .bit-topic-chip::before {
    content: "#";
    margin-right: 2px;
    opacity: .55;
  }

  .bit-sidebar .bit-topic-chip:hover {
    background: rgba(41,164,197,.18);
    color: #106090;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Hero Home (finishing) — pemisah tegas & radius lebih tajam
   Tanpa kotak/shadow: hero yang radius-nya besar terasa seperti "card
   aplikasi" dan bagian bawahnya menyatu dengan section berikutnya. Dua
   penyesuaian:
   1. Radius gambar hero ditajamkan (18px → 8px) agar berkesan poster,
      bukan card. Diterapkan ke .bit-hero-media dan varian carousel-nya.
   2. Container hero diberi garis batas bawah halus + jarak, sebagai
      pemisah tegas dengan section di bawahnya (Popular).
   Ditaruh di akhir file agar menang cascade. Additive, tidak mengubah
   rule lain.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── 1. Radius hero lebih tajam ── */
  .bit-hero-desktop .bit-hero-media {
    border-radius: 8px;
  }

  /* ── 2. Garis pemisah bawah pada container hero ── */
  .bit-hero-desktop {
    border-bottom: 1px solid rgba(41, 164, 197, .18);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Home Desktop — Kanvas putih menyatu (Hero + Konten)
   Sebelumnya hero+rekomendasi duduk di background biru, sedangkan Latest+
   sidebar dibungkus kanvas putih (.bit-layout). Hasilnya dua "zona" yang
   terasa terpisah. Di sini kanvas putih ditarik naik menutupi hero juga,
   sehingga seluruh area home tampak satu kanvas menerus.

   Cara: .bit-hero-desktop diberi badan putih yang sama dengan .bit-layout,
   dengan radius hanya di atas; .bit-layout radius-nya dipindah ke bawah saja
   dan border-top-nya dilepas, lalu jarak antar keduanya dinolkan supaya
   tersambung mulus. Panel Rekomendasi Produk yang tadinya frosted-glass
   (mengandalkan biru di belakang) dibuat transparan agar membaur dengan
   kanvas putih.

   Ditaruh di akhir file agar menang cascade. Additive.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── 1. Hero: badan kanvas putih, radius atas saja, sambung ke bawah ── */
  .bit-hero-desktop {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(41,164,197,.16);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 24px 28px 0;
    margin-bottom: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* ── 2. Layout bawah: radius bawah saja, lepas border-top, sambung ke hero ── */
  .bit-layout[aria-label="Konten utama"] {
    border-top: none;
    border-radius: 0 0 20px 20px;
    margin-top: 0;
  }

  /* ── 3. Panel Rekomendasi Produk: lepas frosted-glass, buat membaur ──
     Di atas kanvas putih, background & shadow panel jadi tidak perlu.
     Border kiri tipis dipertahankan sebagai pemisah halus dari gambar hero. */
  .bit-hero-side--aff {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0 0 0 24px;
    border-left: 1px solid rgba(41,164,197,.16);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Recommended Products — gaya "daftar berperingkat" (DESKTOP)
   Agar panel punya identitas berbeda dari sidebar bawah (Latest Videos /
   Editor's Pick) yang bergaya flat editorial, tiap produk diberi nomor
   peringkat besar-tipis di kiri sebagai jangkar visual. Nomor dibuat murni
   via CSS counter — TIDAK mengubah HTML sama sekali. Item tetap flat dengan
   garis pemisah tipis (bukan kotak).
   Ditaruh di akhir file agar menang cascade. Additive.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* Mulai penghitung di kontainer panel */
  .bit-hero-side--aff {
    counter-reset: bit-aff-rank;
  }

  /* Tiap item: siapkan ruang untuk nomor di kiri */
  .bit-hero-side--aff .bit-hero-aff {
    position: relative;
    counter-increment: bit-aff-rank;
    padding-left: 34px;
  }

  /* Nomor peringkat besar-tipis sebagai jangkar visual */
  .bit-hero-side--aff .bit-hero-aff::before {
    content: counter(bit-aff-rank);
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    color: rgba(41,164,197,.30);
    width: 22px;
    text-align: center;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Recommended Products — sumber tampil sebagai URL huruf kecil (DESKTOP)
   Tombol "Beli" dilepas dari markup (seluruh kartu sudah menjadi link).
   Sisa penyesuaian: sumber dibuat lowercase agar tampil natural seperti
   URL ("shopee.co.id"), bukan "Shopee.Co.Id".
   Ditaruh di akhir file agar menang cascade. Additive.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .bit-hero-side--aff .bit-hero-aff-source {
    text-transform: lowercase;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 — Konten melebar di layar besar (≥1441px)

   Kondisi sebelumnya: tidak ada breakpoint apa pun di atas 1025px. Lebar
   konten identik dari 1025px sampai 3440px, sehingga di monitor besar
   halaman terasa sempit dengan ruang kosong yang sangat lebar di kedua sisi.

   Perubahan ini murni additive di breakpoint baru — di bawah 1441px tidak
   ada satu pun nilai yang berubah.

   Cara kerja: `min(max(76vw, nilai lama), cap)`
     · 76vw   — konten tumbuh mengikuti lebar layar
     · max()  — tidak pernah lebih sempit dari nilai lama, sehingga tidak
                ada penyusutan saat viewport melewati 1441px
     · min()  — dibatasi cap agar baris teks tidak menjadi terlalu panjang

   REVISI (23 Juli 2026): cap diturunkan dari rencana awal.

   Nilai pertama (83vw / cap 1900px) terbukti terlalu lebar saat dipakai di
   monitor 1920px. Perbandingan langsung dengan Kompas, CNN, dan IDN Times
   pada viewport yang sama menunjukkan konten mereka berhenti di 1000–1280px
   sementara Bestindotech mencapai 1541px. Efek sampingnya terlihat pada
   estetika: excerpt yang dirancang dua baris menjadi satu baris karena
   barisnya terlalu lebar, menyisakan ruang kosong di bawahnya.

   Nilai sekarang (76vw / cap 1550px) menempatkan Bestindotech sedikit di
   atas situs-situs tersebut — masih lebih lapang dari sebelum Poin 6, tanpa
   melebar berlebihan.

   Proporsi antar container dipertahankan persis seperti sebelumnya:

     .bit-shell             1200px  →  cap 1550px   (acuan, rasio 1.000)
     .bit-ads-leaderboard   1144px  →  cap 1477px   (rasio 0.953)
     .bit-sticky-ads-inner  1144px  →  cap 1477px   (rasio 0.953)
     leaderboard (list)     1040px  →  cap 1344px   (rasio 0.867)

   Lebar hasil per viewport:
     1440px → 1200px (tidak berubah)   1920px → 1459px
     1579px → 1200px (mulai tumbuh)    2040px ke atas → 1550px (cap)
     1713px → 1302px

   Titik `max()` tetap di nilai lama, sehingga di 1441px hasilnya masih
   1200px — tidak ada lompatan saat viewport melewati breakpoint.

   `.bit-article-content` diturunkan ke 920px lewat blok terpisah di
   `style.desktop.article.css`, agar baris teks tidak terlalu panjang.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  .bit-shell {
    max-width: min(max(76vw, 1200px), 1550px);
  }

  .bit-ads-leaderboard {
    max-width: min(max(72.4vw, 1144px), 1477px);
  }

  .bit-sticky-ads-inner {
    max-width: min(max(72.4vw, 1144px), 1477px);
  }

  /* Halaman list tetap lebih ramping dari halaman lain, sesuai desain
     sekarang — leaderboard-nya mengikuti lebar konten di bawahnya. */
  .blog .bit-ads-leaderboard,
  .page-latest-list .bit-ads-leaderboard,
  .tag .bit-ads-leaderboard,
  .category .bit-ads-leaderboard,
  .search .bit-ads-leaderboard,
  .author .bit-ads-leaderboard {
    max-width: min(max(65.9vw, 1040px), 1344px);
  }

  /* ── Proporsi kolom: sidebar ikut melebar ──
     Grid `1fr 360px` membuat seluruh pertambahan lebar diserap kolom kiri.
     Di 1900px kolom kiri menjadi ~1400px sementara sidebar tetap 360px —
     perbandingannya bergeser dari 66:34 menjadi 80:20, dan sidebar
     kehilangan bobotnya sebagai kolom pendamping.

     Angka 33.1% diturunkan dari kondisi sekarang, bukan dikira-kira:
     pada viewport 1440px lebar dalam layout adalah 1088px
     (1200 − padding shell 56 − padding layout 56), dan 360 ÷ 1088 = 33.1%.
     Dengan begitu di 1441px hasilnya persis sama seperti 1440px — tidak ada
     penyusutan saat viewport melewati breakpoint — dan perbandingan 66:34
     yang sudah disetujui tetap terjaga sampai cap 1900px.

     `.bit-hero-grid` wajib diubah bersamaan: panel Recommended Products di
     hero berdiri tepat di atas sidebar, sehingga keduanya harus sejajar.
     Rule aslinya memakai !important, jadi di sini pun perlu. */
  .bit-layout,
  .bit-layout[aria-label="Konten utama"] {
    grid-template-columns: minmax(0, 1fr) 33.1%;
  }

  .bit-hero-grid {
    grid-template-columns: minmax(0, 1fr) 33.1% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 (lanjutan) — Gambar tidak lagi gepeng di layar besar

   Setelah konten melebar, gambar yang tingginya dipatok angka tetap ikut
   melebar tanpa bertambah tinggi — rasionya makin memanjang dan tampilannya
   terasa gepeng. Karena `object-fit: cover`, bagian gambar yang terpotong di
   atas dan bawah juga bertambah banyak.

   Pada hero: lebar 700px di 1440px menjadi 1168px di layar besar, sementara
   tingginya tetap 480px. Rasio berubah dari 1.46:1 menjadi 2.43:1.

   Perbaikannya memakai `aspect-ratio` dipadu `min-height`:
     · aspect-ratio 16/9 — dipilih karena sumber gambarnya thumbnail YouTube
     · min-height nilai lama — menjaga tinggi tidak pernah lebih pendek dari
       sekarang, sehingga di 1440px dan 1441px tampilannya sama persis
     · height: auto — wajib, agar aspect-ratio tidak dikalahkan tinggi tetap

   Dipilih `aspect-ratio` alih-alih perhitungan berbasis vw karena lebar
   kolom tidak proporsional lurus terhadap viewport: `.bit-shell` memiliki
   cap 1900px, sehingga faktor vw-nya berubah-ubah. Dengan aspect-ratio,
   browser menghitung langsung dari lebar elemen yang sebenarnya.

   Titik mulai tumbuh berbeda-beda, tergantung kapan rasio melewati 16:9:
     hero ~1690px, featured ~1990px, ulasan ~2180px
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  /* ── Hero carousel ──
     Gambar hero yang menentukan tinggi baris. Carousel dan panel di
     sebelahnya cukup dilepas dari angka tetap, lalu grid menyamakannya. */
  .bit-hero-img {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 480px;
  }

  /* Carousel mengikuti tinggi gambar di dalamnya, bukan angka tetap.
     `align-self: start` pada rule aslinya tetap berlaku dan memang perlu —
     tanpa itu carousel akan melar mengikuti kolom kanan dan dot navigasi
     tidak lagi menempel di dasar gambar. */
  .bit-hero-desktop .bit-hero-carousel {
    height: auto;
    min-height: 480px;
  }

  /* Panel Recommended Products dibiarkan mengikuti tinggi baris grid.
     Tidak bisa memakai aspect-ratio karena lebarnya berbeda dari gambar,
     sehingga rasio yang dibutuhkan berubah-ubah mengikuti viewport.
     Dengan height auto, grid menyamakannya secara otomatis — `align-items`
     bawaan grid adalah stretch, dan carousel di sebelahnya sudah dikunci
     setinggi gambar. */
  .bit-hero-side--aff {
    height: auto;
    min-height: 480px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 (lanjutan) — Halaman statis dikecualikan dari pelebaran

   Empat halaman berikut memakai `.bit-shell` sehingga ikut melebar mengikuti
   blok Poin 6, padahal CSS masing-masing tidak memiliki breakpoint apa pun
   di atas 768px:

     About Us, Feedback, Privacy Policy, Pedoman Editorial

   Akibatnya seluruh grid di dalamnya melebar tanpa penyesuaian. Contoh di
   About Us: gambar hero tingginya terkunci 260px sementara lebarnya tumbuh
   dari 563px menjadi 913px — rasio berubah dari 2.17:1 menjadi 3.51:1. Grid
   Brand Partner (6 kolom), Timeline (3 kolom), dan Stats (4 kolom) ikut
   melebar tanpa batas.

   Keempatnya dikembalikan ke lebar semula, 1200px, sesuai desain yang sudah
   disetujui. Halaman lain tetap melebar seperti rencana Poin 6.

   Semua halaman ini ditandai `body.bit-page--about`, dan class tersebut
   tidak dipakai template lain — sudah diperiksa. Leaderboard di halaman ini
   memang sudah disembunyikan (baris 526), jadi tidak perlu dikecualikan.

   Specificity `body.bit-page--about .bit-shell` = 0,2,1, lebih tinggi dari
   `.bit-shell` = 0,1,0 pada blok Poin 6, dan posisinya lebih bawah. Menang
   tanpa perlu !important.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  body.bit-page--about .bit-shell {
    max-width: 1200px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 2 — Enam produk pada panel BIT Recommended Product

   Blok aditif di akhir berkas. Nilai lama tidak diubah; aturan di baris 844
   dan 858 tetap seperti yang sudah disetujui, dan blok ini hanya menimpa
   ukuran yang perlu menyesuaikan diri terhadap jumlah baru.

   Tinggi panel dipertahankan pada 480px. Angka itu bukan pilihan sembarang:
   480px adalah tinggi gambar carousel hero di sebelahnya, dan keduanya duduk
   berdampingan dalam satu grid. Membiarkan panel memanjang mengikuti enam
   produk akan membuatnya menjulur 52px di bawah carousel — garis bawah hero
   menjadi tidak rata, yang terbaca sebagai kekeliruan tata letak alih-alih
   pilihan rancangan.

   Perhitungan ruang:

     panel                                    480px
     padding atas 14 + bawah 10              − 24px
     judul + jarak bawahnya                  − 28px
                                             ───────
     tersisa untuk enam produk                428px
     tiap produk                              71px  (sebelumnya 107px)
     gambar produk                            55px  (sebelumnya 64px)

   Gambar mengecil 14 persen. Isinya tidak terpotong karena `object-fit`
   sudah bernilai `contain` — gambar hanya mengecil, bukan terpangkas.

   Ukuran nomor peringkat sengaja TIDAK diubah pada tahap ini. Dengan tinggi
   kartu yang menyusut, angka 22px memang menjadi lebih dominan secara
   proporsi; keputusannya ditunda sampai hasilnya terlihat langsung.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* Jarak dalam kartu dirapatkan. Nilai lama 8px atas-bawah menyisakan ruang
     yang tidak lagi tersedia setelah tiap kartu menyusut 36px. */
  .bit-hero-side--aff .bit-hero-aff {
    padding: 6px 6px;
    gap: 10px;
  }

  .bit-hero-side--aff .bit-hero-aff-thumb {
    width: 55px;
    height: 55px;
  }

  /* Nama produk tetap terbaca dua baris. Ukuran diturunkan setengah piksel
     dan jarak antarbaris dirapatkan agar dua baris muat pada kartu 71px
     tanpa menyentuh sumbernya di bawah. */
  .bit-hero-side--aff .bit-hero-aff-name {
    font-size: 13px;
    line-height: 1.25;
  }

  .bit-hero-side--aff .bit-hero-aff-text {
    gap: 2px;
  }

  /* Ruang untuk nomor peringkat dipersempit mengikuti gambar yang mengecil,
     agar lebar teks di sebelahnya tidak ikut berkurang. */
  .bit-hero-side--aff .bit-hero-aff {
    padding-left: 30px;
  }

  .bit-hero-side--aff .bit-hero-aff::before {
    left: 4px;
    width: 20px;
  }
}