.bit-guest-post,
.bit-load-more{
  color: #ffffff;
}

.bit-article-layout { display: block; }
.bit-article-side { display: none; }

@media (min-width: 1025px) {

  .bit-article-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
    margin-top: 10px;
  }

  .bit-article-col{ min-width: 0; }

  .bit-article-side{
    display: block;
    position: sticky;
    top: 46px;
    align-self: start;
  }

  .bit-article-title{
    font-size: 46px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    max-width: 980px;
  }

  .bit-article-content{
    margin-top: 16px;
    padding: 0;
    max-width: 980px;
  }

  .bit-article-content > p,
  .bit-article-content > h2,
  .bit-article-content > h3,
  .bit-article-content > h4,
  .bit-article-content > ul,
  .bit-article-content > ol,
  .bit-article-content > blockquote {
    max-width: 760px;
  }

  .bit-article-summary{
    max-width: 980px;
    width: 100%;
    padding-top: 10px;
  }

  .bit-article-content p{
    font-size: 16.5px;
    line-height: 1.85;
    margin: 0 0 16px;
  }

  .bit-yt-embed{
    max-width: 980px;
    border-radius: 18px;
    margin: 22px 0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  }

  .bit-comments{
    max-width: 980px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(41,164,197,.22);
    border-radius: 18px;
    padding: 16px 16px 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    border-top: none;
    border-bottom: none;
  }

  .bit-guest-hint{ text-align: right; }

  .bit-guest-actions{
    justify-content: flex-start;
    gap: 8px;
  }

  .bit-guest-input{
    width: 280px;
    flex: none;
  }

  .bit-guest-post{
    margin-left: auto;
  }

  .bit-recommended{
    max-width: 980px;
    margin-top: 18px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(41,164,197,.22);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }

  .bit-recommended .bit-ulasan-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .bit-recommended .bit-ulasan-item{
    display: block;
  }

  .bit-recommended .bit-ulasan-img,
  .bit-recommended .bit-ulasan-item .wp-post-image{
    width: 100% !important;
    height: 200px !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    display: block;
    border-radius: 12px;
  }

  .bit-sidecard{
    padding: 14px;
  }

  .bit-side-title{
    margin-bottom: 10px;
  }

  .bit-side-title-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }

  .bit-mini-item{
    border-radius: 14px;
  }

  .bit-mini-body{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bit-mini-list--numbered .bit-mini-item{
    display: flex;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(41,164,197,.18);
    background: rgba(255,255,255,.55);
  }

  .bit-mini-rank{
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    background: rgba(41,164,197,.14);
    border: 1px solid rgba(41,164,197,.25);
    flex-shrink: 0;
  }

  .bit-mini-list--numbered .bit-mini-title{
    font-size: 13.5px;
    line-height: 1.25;
  }

  .bit-mini-list--numbered .bit-mini-meta{
    font-size: 12px;
    opacity: .85;
    font-weight: 800;
  }

  .bit-mini-bullet{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(41,164,197,.55);
    margin-top: 6px;
    flex-shrink: 0;
  }

  .bit-mini-thumb{
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }
}

@media (min-width: 1025px){

  .bit-sidecard--popular .bit-mini-rank{
    display: none !important;
  }

  .bit-sidecard--popular .bit-mini-item{
    align-items: flex-start;
  }

  .bit-sidecard--popular .bit-mini-body{
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .bit-sidecard--popular .bit-mini-title{
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .bit-sidecard--popular .bit-mini-meta{
    flex-shrink: 0;
    margin-left: auto !important;
    white-space: nowrap !important;
    font-weight: 900;
    opacity: .85;
  }

  .bit-sidecard--popular .bit-mini-list--numbered .bit-mini-item{
    padding: 10px 12px;
  }
}

@media (min-width: 1025px){

  .bit-sidecard--related{
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(41,164,197,.18);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
  }

  .bit-mini-list--related{
    gap: 10px;
  }

  .bit-mini-list--related .bit-mini-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(41,164,197,.12);
    background: rgba(255,255,255,.78);
    transition: transform .12s ease, filter .12s ease, background .12s ease;
  }

  .bit-mini-list--related .bit-mini-item:hover{
    background: rgba(255,255,255,.92);
    filter: brightness(0.995);
  }

  .bit-mini-list--related .bit-mini-thumb{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }

  .bit-mini-list--related .bit-mini-title{
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 900;
    margin: 0;
  }

  .bit-mini-list--related .bit-mini-meta--pill{
    display: inline-flex;
    margin-top: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    opacity: .72;
  }

  .bit-mini-list--related .bit-mini-body{
    gap: 0;
  }
}

.bit-side-more{
  color: #29a4c5;
  font-weight: 700;
  text-decoration: none;
}

.bit-side-more:hover{
  text-decoration: underline;
}

.bit-side-more:focus-visible{
  outline: 2px solid rgba(41,164,197,.55);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (min-width: 1025px){
  .bit-side-title-row .bit-side-more{
    color: #29a4c5 !important;
    opacity: 1 !important;
    font-weight: 800;
    text-decoration: none;
  }

  .bit-side-title-row .bit-side-more:hover{
    text-decoration: underline;
  }

  .bit-side-title-row .bit-side-more:focus-visible{
    outline: 2px solid rgba(41,164,197,.55);
    outline-offset: 2px;
    border-radius: 8px;
  }
}

@media (min-width: 1025px){
  .bit-article-page .bit-nav-link.is-active{
    background: transparent;
    box-shadow: none;
  }

  .bit-article-page .bit-nav-link.is-active:hover{
    background: rgba(255,255,255,.45);
  }
}


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

.bit-article-page main.bit-main {
  flex: 1;
}

/* ── Gambar artikel: konsisten 16:9 (desktop) ── */
@media (min-width: 1025px) {
  .bit-article-content figure.wp-block-image,
  .bit-article-content .wp-block-image {
    margin: 20px 0;
    border-radius: 0;
    overflow: visible;
    width: 100%;
    max-width: 760px;
    aspect-ratio: unset;
    box-shadow: none;
  }

  .bit-article-content figure.wp-block-image img,
  .bit-article-content .wp-block-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
  }

  .bit-article-content figure.wp-block-image figcaption,
  .bit-article-content figure.wp-block-image .wp-element-caption,
  .bit-article-content .wp-block-image figcaption,
  .bit-article-content .wp-block-image .wp-element-caption {
    display: block !important;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    text-align: left;
    font-style: normal;
    padding: 6px 0 0;
    background: transparent;
    border-top: none;
    border-radius: 0;
  }
}

/* ── Pagination artikel desktop ── */
@media (min-width: 1025px) {
  .bit-article-pagination {
    max-width: 980px;
    margin-top: 18px;
  }
}

/* ── Auto Caption Gambar (desktop) ── */
@media (min-width: 1025px) {
  .bit-img-figure {
    margin: 20px 0;
    border-radius: 16px;
    max-width: 760px;
    box-shadow: 0 8px 22px rgba(0,0,0,.13);
  }

  .bit-img-figure img {
    aspect-ratio: 16 / 9;
  }

  .bit-img-caption {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* ── Ads Placeholder ── */
@media (min-width: 1025px) {
  .bit-ads-pos1,
  .bit-ads-pos2,
  .bit-ads-pos3 {
    max-width: 980px;
    width: 100%;
    min-height: 280px;
    margin: 28px 0;
    border-radius: 8px;
    background: rgba(255,255,255,.50);
    border: 1px dashed rgba(41,164,197,.30);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

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

/* ── v1.3 · Poin 2 — Hear this Article (desktop) ── */
@media (min-width: 1025px) {
  .bit-audio-player {
    max-width: 760px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 — Proporsi kolom artikel di layar besar (≥1441px)

   Pendamping blok Poin 6 di `style.desktop.core.css`. Karena `.bit-shell`
   melebar, kolom kiri artikel ikut tumbuh sementara sidebar terkunci 360px —
   perbandingannya menjadi timpang persis seperti di beranda.

   Angka 31.5% dipakai lebih dulu, diturunkan dari kondisi lama: pada
   viewport 1440px lebar dalam shell adalah 1144px (1200 − padding 56), dan
   360 ÷ 1144 = 31.5%.

   REVISI (23 Juli 2026) — sidebar dirapatkan ke konten artikel

   Setelah isi artikel dikunci 920px (lihat blok di akhir file), persentase
   tetap menyisakan celah yang makin lebar seiring viewport bertambah. Pada
   1920px kolom kiri menjadi 933px sementara isinya berhenti di 920px, lalu
   ditambah gap grid 28px — jarak yang terlihat antara artikel dan kartu
   Popular mencapai ±41px, dan pada 2040px ke atas ±103px.

   Penyebabnya: dengan lebar isi yang tetap, setiap pertambahan lebar kolom
   kiri langsung berubah menjadi ruang kosong. Persentase membuat kolom kiri
   ikut tumbuh, sehingga celahnya justru melebar.

   PENTING — arah penyesuaian yang benar
   Menyempitkan sidebar TIDAK merapatkannya, melainkan sebaliknya: kolom
   kiri akan melebar dan celahnya bertambah. Yang merapatkan justru
   MELEBARKAN sidebar, karena kolom kiri menyusut mendekati 920px.

   Rumus sekarang: `min(max(360px, 25vw), 546px)`
     · 360px  — nilai lama; pada 1441px hasil 25vw tepat 360px, sehingga
                tidak ada lompatan saat viewport melewati breakpoint
     · 25vw   — sidebar tumbuh mengikuti layar, lebih cepat dari kolom kiri
     · 546px  — cap; diturunkan dari kondisi shell mentok (inner 1494px):
                1494 − 920 − 28 = 546, tepat membuat kolom kiri 920px

   Hasilnya jarak artikel ke sidebar tetap 28px dari 1441px sampai 1920px,
   sama seperti yang terlihat pada 1440px.

   Lebar kartu Popular & Related Stories ikut bertambah:
     1441px → 360px (tidak berubah)   1920px → 480px
     1713px → 428px                   2560px ke atas → 546px
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  .bit-article-layout {
    grid-template-columns: minmax(0, 1fr) min(max(360px, 25vw), 546px);
  }
}

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

   Pendamping blok Poin 6 di `style.desktop.core.css`. Grid Recommended di
   bawah artikel tetap 3 kolom sementara `.bit-recommended` melebar mengikuti
   kolom artikel, sehingga tiap kartu ikut melebar tanpa bertambah tinggi.

   Perlakuannya sama seperti Featured dan Ulasan di beranda: `aspect-ratio`
   16/9 dengan `min-height` nilai lama, sehingga di 1440px dan 1441px
   tampilannya sama persis.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  .bit-recommended .bit-ulasan-img,
  .bit-recommended .bit-ulasan-item .wp-post-image {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 200px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 (lanjutan) — Selaraskan lebar elemen di kolom artikel

   Setelah kolom artikel melebar, muncul ketidakselarasan: sebagian elemen
   berhenti di 980px sementara sebagian lain melar penuh mengikuti kolom.

   Hasil audit anak langsung `.bit-article-col`:

     .bit-article-header       —     ikut melar (membungkus judul & cover)
     .bit-article-content    980px   sudah dibatasi
     .bit-article-reactions    —     ikut melar (baris Like & Share)
     .bit-comments           980px   sudah dibatasi

   Selain itu `.bit-affiliate` (panel Beli Produk) yang disisipkan ke dalam
   isi artikel juga belum memiliki batas, sehingga ikut melar sementara
   paragraf di sekitarnya berhenti di 760px.

   Ketiganya disamakan menjadi 980px agar seluruh kolom rata di sisi kanan.
   Sebelum Poin 6 hal ini tidak terlihat karena kolom artikel memang hanya
   sekitar 756px — lebih sempit dari batas 980px itu sendiri, sehingga tidak
   ada elemen yang sempat melewatinya.

   Diletakkan di breakpoint 1441px agar tampilan di bawahnya tidak berubah
   sama sekali.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  .bit-article-header,
  .bit-article-reactions,
  .bit-affiliate {
    max-width: 980px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 (lanjutan) — Samakan lebar seluruh elemen visual artikel

   Temuan: di dalam satu artikel terdapat dua kelompok lebar yang tidak
   konsisten satu sama lain.

     980px — cover, Highlight, Beli Produk, slot iklan, embed YouTube,
             komentar, Recommended
     760px — paragraf, heading, DAN gambar subbab

   Gambar subbab ikut dibatasi 760px karena dulu dikelompokkan bersama teks.
   Akibatnya dalam satu alur baca, gambar cover tampil 980px sementara gambar
   di bawah subbab hanya 760px — padahal keduanya sama-sama gambar dan
   sama-sama bagian dari artikel yang sama. Slot iklan 980px yang berdiri di
   antara dua gambar 760px membuat perbedaannya makin terasa melompat.

   Sebelum Poin 6 hal ini tidak terlihat: kolom artikel hanya ~756px, lebih
   sempit dari batas 760px itu sendiri, sehingga semua elemen praktis sama
   lebar. Setelah konten melebar, kedua kelompok itu terpisah 220px.

   Di sini seluruh elemen VISUAL disamakan menjadi 980px agar rata dengan
   cover dan panel lain. Paragraf dan heading tetap 760px — lebar itu memang
   disetel untuk kenyamanan membaca, dan menaikkannya justru menurunkan
   keterbacaan.

   Pemutar audio (.bit-audio-player) sengaja TIDAK diubah. Ia bukan bagian
   dari alur baca melainkan kontrol, dan bentuknya memang ramping.

   Berlaku mulai 1441px agar tampilan di bawahnya tidak berubah sama sekali.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  /* Gambar subbab dari editor blok */
  .bit-article-content figure.wp-block-image,
  .bit-article-content .wp-block-image {
    max-width: 980px;
  }

  /* Gambar dengan caption otomatis */
  .bit-img-figure {
    max-width: 980px;
  }

  /* Carousel foto — CSS dasarnya berada di functions.php (blok
     bestindotech/photo-gallery), jadi perlu di-override dari sini. */
  .bit-article-content .bit-photo-gallery {
    max-width: 980px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 (lanjutan) — Paragraf disamakan dengan elemen visual

   Setelah gambar subbab dinaikkan ke 980px, paragraf dan heading menjadi
   satu-satunya elemen yang masih berhenti di 760px. Dalam alur baca, teks
   terlihat menggantung 220px lebih pendek dari cover, gambar, Highlight,
   Beli Produk, dan slot iklan di sekitarnya.

   Di sini seluruh isi artikel disamakan menjadi 980px sehingga rata dengan
   elemen lain di kolom yang sama.

   CATATAN KETERBACAAN — keputusan sadar, bukan kelalaian:
   pada font 16.5px, lebar 980px memuat sekitar 120 karakter per baris,
   sementara rentang yang umum disarankan adalah 50–75 karakter dengan batas
   atas 90. Konsistensi visual dipilih di atas pertimbangan tersebut.

   Bila suatu saat terasa terlalu panjang saat dibaca, ada dua penyesuaian
   yang bisa diambil tanpa mengubah struktur:
     · naikkan `font-size` paragraf ke 18px  → ±109 karakter per baris
     · turunkan nilai 980px di blok ini      → kembali lebih sempit

   `.bit-audio-player` sengaja tetap 760px. Ia bukan bagian dari alur baca
   melainkan kontrol pemutar, dan bentuk ramping memang sesuai fungsinya.

   Berlaku mulai 1441px agar tampilan di bawahnya tidak berubah sama sekali.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  .bit-article-content > p,
  .bit-article-content > h2,
  .bit-article-content > h3,
  .bit-article-content > h4,
  .bit-article-content > ul,
  .bit-article-content > ol,
  .bit-article-content > blockquote {
    max-width: 980px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 6 (revisi) — Kolom artikel disempitkan ke 920px (≥1441px)

   Menyertai penyempitan `.bit-shell` di `style.desktop.core.css` (cap
   1900px → 1550px). Blok ini menurunkan seluruh isi kolom artikel dari
   980px menjadi 920px.

   ALASAN
   Pada font 16.5px, lebar 980px memuat sekitar 120 karakter per baris,
   sementara rentang yang umum disarankan adalah 50–75 karakter dengan
   batas atas 90. Perbandingan pada viewport 1920px: kolom baca CNN ±660px,
   Kompas ±740px, IDN Times ±820px — ketiganya jauh di bawah 980px.

   Nilai 920px memuat ±112 karakter per baris.

   RIWAYAT PENYETELAN (23 Juli 2026)
   Nilai 860px dicoba lebih dulu (±105 karakter). Hasilnya terlalu sempit
   relatif terhadap kolomnya: pada 1920px kolom artikel selebar ±933px,
   sehingga tersisa ±73px kosong yang, ditambah gap grid 28px, membuat
   jarak ke sidebar terlihat ±101px — jauh lebih lebar dari jarak normal
   28px yang terlihat pada 1440px.

   Nilai 920px dipilih sebagai titik tengah antara 860px dan 980px. Sisa
   ruang menyusut menjadi ±13px dan jarak ke sidebar kembali ke ±41px.

   Catatan: memepetkan sidebar TIDAK menyelesaikan masalah ini, justru
   memperburuknya. Menyempitkan sidebar akan melebarkan kolom kiri,
   sehingga sisa ruang di kanan teks bertambah, bukan berkurang. Satu-
   satunya pengungkit yang benar adalah lebar isi artikel itu sendiri.

   MENGAPA ADDITIVE, BUKAN DIUBAH DI TEMPAT
   Delapan dari empat belas selector di bawah ini nilai 980px-nya berada di
   `@media (min-width: 1025px)` — sudah berlaku sejak 1025px, jauh sebelum
   Poin 6 ada. Mengubahnya langsung di tempat akan ikut mengubah tampilan
   pada 1440px, padahal breakpoint itu harus tetap seperti sekarang.

   Karena itu seluruh rule lama dibiarkan utuh dan blok ini hanya menimpa
   di ≥1441px. Specificity tiap selector identik dengan aslinya, dan blok
   ini berada di akhir file sehingga menang cascade tanpa perlu !important
   — kecuali pada dua selector gambar Recommended yang rule aslinya memang
   sudah memakai !important.

   PENYETELAN LEBIH LANJUT
   Bila jarak ke sidebar masih terasa lebar, naikkan nilai 920px di blok
   ini. Pada 940px sisa ruang menjadi negatif dan celah tertutup penuh;
   pada 980px isi artikel akan sedikit melebihi kolomnya.

   `.bit-audio-player` sengaja tidak disentuh. Ia bukan bagian dari alur
   baca melainkan kontrol pemutar, dan bentuk ramping sesuai fungsinya.

   Di bawah 1441px tidak ada satu pun nilai yang berubah.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {

  /* ── Kerangka kolom ── */
  .bit-article-title,
  .bit-article-content,
  .bit-article-summary,
  .bit-article-header,
  .bit-article-reactions {
    max-width: 920px;
  }

  /* ── Isi artikel: teks ── */
  .bit-article-content > p,
  .bit-article-content > h2,
  .bit-article-content > h3,
  .bit-article-content > h4,
  .bit-article-content > ul,
  .bit-article-content > ol,
  .bit-article-content > blockquote {
    max-width: 920px;
  }

  /* ── Isi artikel: elemen visual ── */
  .bit-article-content figure.wp-block-image,
  .bit-article-content .wp-block-image,
  .bit-img-figure,
  .bit-article-content .bit-photo-gallery,
  .bit-yt-embed {
    max-width: 920px;
  }

  /* ── Panel & blok pendamping ── */
  .bit-affiliate,
  .bit-comments,
  .bit-recommended,
  .bit-article-pagination {
    max-width: 920px;
  }

  /* ── Slot iklan dalam artikel ── */
  .bit-ads-pos1,
  .bit-ads-pos2,
  .bit-ads-pos3 {
    max-width: 920px;
  }

  /* Gambar Recommended — rule aslinya memakai !important, jadi di sini pun
     perlu agar tingginya tetap terkunci aspect-ratio setelah lebar berubah. */
  .bit-recommended .bit-ulasan-img,
  .bit-recommended .bit-ulasan-item .wp-post-image {
    min-height: 176px;
  }
}