* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #b9e3f4;
  color: #111827;
}

.bit-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: #e4f6ff;
}

@media (max-width: 1024px) {
  .bit-page {
    overflow-x: hidden;
  }
}

@media (min-width: 431px) and (max-width: 743px) {
  .bit-page {
    max-width: 100%;
    margin: 0;
  }
}

@media (min-width: 744px) and (max-width: 1024px) {
  .bit-page {
    max-width: 100%;
    margin: 0;
  }

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

  .bit-ulasan-title {
    font-size: 15px;
  }
}

.bit-main {
  padding: 12px 12px 24px;
}

.bit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  min-height: 56px;
  background: #8ad7f5;
}

.bit-header-left {
  display: flex;
  align-items: center;
}

.bit-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bit-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Ikon di dalam tombol ini digambar dengan `stroke="currentColor"`, sehingga
     warnanya mengikuti nilai `color` tombol. Elemen `button` tidak mewarisi
     `color` dari induknya; tanpa penetapan eksplisit, nilainya diambil dari
     bawaan peramban dan berbeda-beda antar mesin. Di peramban desktop hasilnya
     kebetulan hitam, sementara pada ponsel ikon tampil biru. Nilainya
     disamakan dengan `.bit-combo-close` dan `.bit-combo-search input` yang
     memang sudah menetapkan warna teks secara eksplisit. */
  color: #111827;
}

.bit-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.bit-header-left{
display: inline-flex;
  align-items: center;
  height: 100%;
}

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

.bit-header-right{ padding-right: 2px; }

.bit-hero {
  margin-top: 12px;
  margin-bottom: 12px;
}

@media (min-width: 431px) and (max-width: 1024px) {
  .bit-hero {
    padding: 0 12px;
  }
}

.bit-hero-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.bit-hero-img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  .bit-hero-img {
    /*
     * v1.4 — Perbaikan tinggi hero mobile yang berubah-ubah antar slide
     *
     * Sebelumnya `height: auto !important` berlaku untuk seluruh layar
     * ≤1024px, sehingga setiap gambar hero mengambil tinggi dari rasio
     * aslinya. Slide yang lebih jangkung membuat carousel meninggi — dot
     * indikator terdorong keluar gambar dan muncul ruang kosong sebelum
     * "Latest" — sementara slide yang lebih landai membuatnya memendek.
     *
     * Batasnya dipersempit menjadi di bawah 768px (khusus ponsel). Rentang
     * tablet 768–1023px sengaja memakai tinggi tetap 380px pada blok di
     * bawah, dan `!important` yang berlaku sampai 1024px sebelumnya akan
     * menimpa desain tablet itu tanpa disengaja.
     *
     * Di ponsel gambar dikunci rasio 16:9 dengan `object-fit: cover`,
     * senada dengan breakpoint 1024px yang juga memakai 16:9. Seluruh slide
     * kini setinggi sama; gambar berbeda rasio dipangkas di tepi alih-alih
     * meregangkan tinggi kontainer.
     */
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
}

.bit-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.15),
    transparent
  );
}

.bit-hero-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 34px;
  color: #ffffff;
}

.bit-hero-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);

  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

.bit-section{
  margin-top: 18px;
}

.bit-section--morereviews {
  margin-top: 0;
}

.bit-section-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

.bit-popular-list {
  margin-top: 4px;
  border-bottom: 1px solid #29a4c5;
  margin-bottom: 12px;
  padding-bottom: 6px;
}

.bit-popular-item {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 12px 0 14px;
  border-top: 1px solid #29a4c5;
}

.bit-popular-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Ditandai sebagai container agar baris meta di dalamnya dapat mengukur lebar
     kolom teks yang sebenarnya, bukan lebar layar. Lihat blok penjelasan di
     akhir berkas. Lebar elemen ini sudah ditentukan `flex: 1` bersama
     `min-width: 0`, jadi containment pada sumbu mendatar tidak mengubah
     perhitungan tata letak yang berjalan sekarang. */
  container-type: inline-size;
  container-name: bit-meta;
}

.bit-popular-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 2px;
  color: #111827;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bit-popular-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 10px;
  margin-top: 2px;
}

.bit-popular-author {
  color: #0084b5;
  font-weight: 600;
  white-space: nowrap;
}

.bit-popular-date,
.bit-popular-views {
  color: #4b5563;
  white-space: nowrap;
  margin-left: auto;
}

.bit-popular-views {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bit-icon-eye {
  width: 14px;
  height: 14px;
  display: block;
  color: #4b5563;
  /* `.bit-popular-views` dan `.bit-terbaru-views` berupa inline-flex, sehingga
     ikon di dalamnya ikut menyusut ketika baris meta kekurangan ruang dan
     bentuknya menjadi gepeng. `.bit-icon-clock` sudah memiliki penguncian yang
     sama; di sini sebelumnya terlewat. */
  flex-shrink: 0;
}

.bit-popular-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.bit-popular-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.bit-popular-link:visited {
  color: inherit;
}

.bit-popular-link:hover .bit-popular-item {
  filter: brightness(0.98);
}

.bit-section-sorotan {
  margin-top: 18px;
  padding-bottom:0;
  margin-bottom: 0px;
}

.bit-sorotan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 28px;
}

.bit-sorotan-item img {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.bit-sorotan-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 4px;
  color: #111827;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bit-section-ulasan{
  margin-top: 20px;
  padding-top: 0;
  border-top: none;
  position: static;
}

.bit-ulasan-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bit-ulasan-item {
  min-width: 0;
}

.bit-ulasan-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.bit-ulasan-title {
  margin: 8px 0 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bit-ulasan-date {
  margin: 0;
  font-size: 12px;
  color: #4b5563;
}

.bit-section-terbaru {
  margin-top: 18px;
  border-top: none;
  padding-top: 1px;
}

.bit-terbaru-list {
  margin-top: 1px;
  border-bottom: none;
  padding-bottom: 6px;
}

.bit-terbaru-item {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 12px 0 14px;
  border-top: 1px solid #29a4c5;
}

.bit-terbaru-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.bit-terbaru-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Ditandai sebagai container agar baris meta di dalamnya dapat mengukur lebar
     kolom teks yang sebenarnya, bukan lebar layar. Lihat blok penjelasan di
     akhir berkas. Lebar elemen ini sudah ditentukan `flex: 1` bersama
     `min-width: 0`, jadi containment pada sumbu mendatar tidak mengubah
     perhitungan tata letak yang berjalan sekarang. */
  container-type: inline-size;
  container-name: bit-meta;
}

.bit-terbaru-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 2px;
  color: #111827;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bit-popular-excerpt {
  display: none;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.45;
  overflow: hidden;
}

.bit-terbaru-excerpt {
  display: none;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.45;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bit-terbaru-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 10px;
  margin-top: 2px;
}

.bit-terbaru-author {
  color: #0084b5;
  font-weight: 600;
  white-space: nowrap;
}

.bit-terbaru-date,
.bit-terbaru-views {
  color: #4b5563;
  white-space: nowrap;
  margin-left: auto;
}

.bit-terbaru-views {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-top: 12px;
  padding: 12px 0 0;

  border-top: 1px solid #29a4c5;
}

.bit-page-item,
.bit-page-next {
  text-decoration: none;
  color: #111827;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.bit-page-item {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bit-page-item.is-active {
  background: #29a4c5;
  color: #ffffff;
}

.bit-page-ellipsis {
  color: #111827;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.bit-page-next {
  font-size: 22px;
  transform: translateY(-1px);
}

.bit-footer {
  padding: 18px 16px 18px;
  text-align: center;
  background: #8ad7f5;
}

.bit-footer-logo img {
  height: 58px;
  width: auto;
  display: inline-block;
}

.bit-footer-social {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.bit-footer-social a {
  width: 34px;
  height: 34px;
  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);
  text-decoration: none;
}

.bit-footer-social img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.bit-footer-line {
  height: 1px;
  background: #29a4c5;
  margin: 14px 0;
}

.bit-footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bit-footer-links a {
  text-decoration: none;
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
}

.bit-footer-copy {
  margin-top: 4px;
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
}

.bit-article-header {
  margin-top: 0px;
}

.bit-article-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 6px;
  color: #111827;
}

.bit-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
}

.bit-article-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #29a4c5;
  font-weight: 600;
}

.bit-article-date {
  color: #9ca3af;
  font-weight: 600;
}

.bit-icon-user {
  width: 14px;
  height: 14px;
  display: block;
}

.bit-article-author .bit-icon-user {
  color: #111827;
}

.bit-recommended{
  margin-top: 12px;
  padding-top: 0;
}

.bit-recommended .bit-section-title{
  margin-top: 0;
}

.bit-article-cover {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

.bit-article-content {
  margin-top: 12px;
  padding: 0;
  color: #111827;
}

/* Reset WordPress block default padding */
.bit-article-content .wp-block-group,
.bit-article-content .wp-block-group__inner-container,
.bit-article-content [class*="wp-block-"],
.bit-article-content .alignwide,
.bit-article-content .alignfull {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bit-article-content p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #111827;
}

.bit-article-content h3 {
  margin: 14px 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

.bit-yt-embed {
  margin: 16px 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  background: #000;
  aspect-ratio: 16 / 9;
}

.bit-yt-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.bit-comments {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #29a4c5;
  padding-bottom: 18px;
  border-bottom: 1px solid #29a4c5;
}

.bit-comments-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #111827;
}

.bit-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.bit-avatar--default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #111827;
}

.bit-avatar-icon {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(0.95);
}

.bit-guest-composer{
  margin: 10px 0 14px;
}

.bit-guest-note{
  font-size: 11px;
  color: #6b7280;
  margin: 0 0 6px;
  font-weight: 600;
}

.bit-guest-textarea{
  width: 100%;
  box-sizing: border-box;

  border: 2px solid #dbeafe;
  border-radius: 12px;
  padding: 10px 12px;

  font: inherit;
  min-height: 72px;
  resize: vertical;
  outline: none;

  background: #ffffff;
  color: #111827;
}

.bit-guest-textarea:focus{
  border-color: #29a4c5;
  box-shadow: 0 0 0 3px rgba(41,164,197,.18);
}

.bit-guest-footer{
  margin-top: 8px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bit-guest-input{
  width: 100%;
  box-sizing: border-box;

  border: 1.5px solid #dbeafe;
  border-radius: 11px;
  padding: 7px 11px;

  font: inherit;
  outline: none;

  background: #ffffff;
  color: #111827;
}

.bit-guest-input:focus{
  border-color: #29a4c5;
  box-shadow: 0 0 0 3px rgba(41,164,197,.12);
}

.bit-guest-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  flex-wrap: nowrap;
}

.bit-guest-hint{
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;

  white-space: nowrap;
}

.bit-guest-post{
  appearance: none;
  -webkit-appearance: none;

  border: none;
  border-radius: 999px;
  padding: 7px 12px;

  font-weight: 700;
  font-size: 13px;

  background: #2f8fb0;
  color: #111827;

  cursor: pointer;

  flex-shrink: 0;
}

.bit-guest-post:active{
  transform: translateY(1px);
}

.bit-comment {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.bit-comment-body {
  flex: 1;
  min-width: 0;
}

.bit-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.bit-comment-name {
  font-weight: 800;
  color: #111827;
  font-size: 15px;
  line-height: 1.1;
}

.bit-comment-time {
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

.bit-more-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  color: #111827;
  letter-spacing: 2px;
  padding: 4px 6px;
  border-radius: 10px;
}

.bit-comment-text {
  margin: 10px 0 6px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

.bit-readmore {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  color: #29a4c5;
  text-decoration: none;
  margin-bottom: 8px;
}

.bit-comment-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bit-action {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #6b7280;
  font-weight: 700;
  font-size: 13px;
}

.bit-action .bit-icon {
  width: 16px;
  height: 16px;
  display: block;
  color: #6b7280;
}

.bit-reply-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;

  font-weight: 800;
  font-size: 13px;
  color: #111827;
}

.bit-comment-divider {
  height: 1px;
  background: #dbeafe;
  margin: 8px 0;
}

.bit-load-more {
  width: 100%;
  margin: 14px 0 4px;
  padding: 14px 16px;

  border: none;
  border-radius: 12px;

  background: #2f8fb0;
  color: #111827;

  font-weight: 800;
  font-size: 14px;

  cursor: pointer;
}

.bit-load-more:hover {
  filter: brightness(0.98);
}

.bit-load-more:active {
  transform: translateY(1px);
}

.bit-article-figure{
  margin: 16px 0;
}

.bit-article-figure img{
  width: 100%;
  border-radius: 12px;
  display: block;
}

.bit-article-figure figcaption{
  font-size: 12px;
  color: #5a6b75;
  margin-top: 6px;
  line-height: 1.4;
}

.bit-popular-item,
.bit-ulasan-item,
.bit-terbaru-item,
.bit-sorotan-item{
  position: relative;
}

.bit-cardlink{
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
}

.bit-popular-item > *:not(.bit-cardlink),
.bit-ulasan-item > *:not(.bit-cardlink),
.bit-terbaru-item > *:not(.bit-cardlink),
.bit-sorotan-item > *:not(.bit-cardlink){
  position: relative;
  z-index: 1;
}

.bit-click{
  cursor: pointer;
}

a,
a:visited{
  color: inherit !important;
  text-decoration: none !important;
}

a:hover{
  text-decoration: none !important;
}

.page-latest-list .bit-terbaru-item{
  position: relative;
}

.page-latest-list .bit-terbaru-item .bit-cardlink{
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
}

.page-latest-list .bit-terbaru-item > *:not(.bit-cardlink){
  position: relative;
  z-index: 1;
}

.bit-section-title.bit-click{
  cursor: pointer;
}

.bit-combo{ position: fixed; inset: 0; z-index: 9999; }
.bit-combo[hidden]{ display: none !important; }

.bit-combo-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.22);
}

.bit-combo-panel{
  position: absolute;
  left: 0; right: 0; top: 0;
  background: #e4f6ff;
  padding: 12px 12px 14px;
  border-bottom: 1px solid #29a4c5;
}

.bit-combo-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bit-combo-title{
  font-weight: 800;
  font-size: 14px;
  color: #111827;
}

.bit-combo-close{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  color: #111827;
}

.bit-combo-search{
  display: flex;
  gap: 8px;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #dbeafe;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.bit-combo-search input{
  border: none;
  outline: none;
  width: 100%;
  font: inherit;
  background: transparent;
  color: #111827;
}

.bit-combo-search button{
  border: none;
  background: transparent;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bit-combo-links{
  display: grid;
  gap: 10px;
}

.bit-combo-link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(41,164,197,.18);
  font-weight: 700;
  font-size: 14px;
  color: #111827 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  -webkit-tap-highlight-color: transparent;
}

.bit-combo-link:active{
  background: rgba(255,255,255,.92);
  transform: scale(.985);
}

.bit-combo-link-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(41,164,197,.12);
  border: 1px solid rgba(41,164,197,.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1d9bd1;
}

.bit-combo-link-icon svg{
  width: 16px;
  height: 16px;
  display: block;
}

.bit-noscroll{ overflow: hidden; position: fixed; width: 100%; }

@media (max-width: 1024px){
  .bit-popular-kicker,
  .bit-terbaru-kicker{
    display: none !important;
  }
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Montserrat', 'IBM Plex Sans', sans-serif;
}

.bit-to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  background: #29a4c5;
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 900;

  cursor: pointer;
  z-index: 50;

  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.bit-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 1025px){
  .bit-to-top{
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

@media (hover: hover) and (pointer: fine){
  .bit-to-top:hover{
    filter: brightness(1.05);
  }
}

.bit-header-left{
  display: inline-flex;
  align-items: center;
}

.bit-header-left{
  text-decoration: none;
  color: #0c445a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bit-footer-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.bit-header-left .bit-logo-img,
.bit-footer-logo img{
  display: block;
}

.bit-footer-logo {
  background: #c9efff !important;
}

@media (min-width: 1025px){
  .bit-header-left{
    font-size: 19px;
  }
}

@media (max-width: 600px){
  .bit-article-content p{
    margin-bottom: 16px;
    line-height: 1.75;
  }

  .bit-article-content h3{
    margin: 18px 0 10px;
    line-height: 1.35;
  }
}

@media (max-width: 1024px){
  header .bit-header-actions #bitComboBtn{
    color: #111827;
  }
}

@media (max-width: 1024px){
  .bit-feedback select{
    color: #111827;
  }

  .bit-feedback select:focus{
    color: #111827;
  }
}

@media (max-width: 1024px){

  .bit-feedback select,
  .bit-feedback .bit-select{
    color: #111827;
    -webkit-text-fill-color: #111827;
  }

  .bit-feedback select:invalid,
  .bit-feedback .bit-select:invalid{
    color: #111827;
    -webkit-text-fill-color: #111827;
  }

  .bit-feedback select option,
  .bit-feedback .bit-select option{
    color: #111827;
  }

  .bit-feedback select option[disabled],
  .bit-feedback .bit-select option[disabled]{
    color: #111827;
  }
}

@media (max-width: 1024px){

  .bit-hero-carousel{
    position: relative;
    overflow: hidden;
  }

  .bit-hero-carousel .bit-hero-track{
    display: flex;
    width: 100%;
    transform: translateX(0);
    transition: transform 320ms ease;
    will-change: transform;
  }

  .bit-hero-carousel .bit-hero-slide{
    flex: 0 0 100%;
    min-width: 100%;
  }

  .bit-hero-carousel .bit-hero-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.35);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
    font-size: 24px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .bit-hero-carousel .bit-hero-prev{ left: 10px; }
  .bit-hero-carousel .bit-hero-next{ right: 10px; }

  .bit-hero-carousel .bit-hero-dots{
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 6;
  }

  .bit-hero-carousel .bit-hero-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.25);
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bit-hero-carousel .bit-hero-dot.is-active{
    background: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.95);
  }

}

@media (max-width: 1024px){
  .bit-hero-carousel[data-hero-carousel="mobile"]{
    position: relative;
    overflow: hidden;
    max-width: 100%;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-track{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-slide{
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-main{
    display: block;
    width: 100%;
  }
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-media{
    width: 100%;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-img{
    width: 100%;
    /* v1.4 — Penguncian rasio 16:9 untuk ponsel ditangani oleh blok
       `@media (max-width: 767px)` di bagian atas berkas, yang memakai
       `!important`. Di sini sengaja tidak dipasang tinggi maupun rasio agar
       tidak bocor ke rentang tablet 768–1023px, yang punya desain tinggi
       tetap 380px tersendiri di bawah. */
    object-fit: cover;
    display: block;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-arrow{
    width: 36px;
    height: 36px;
    font-size: 24px;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-dots{
    bottom: 14px;
    gap: 6px;
  }
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-dot{
    width: 8px;
    height: 8px;
  }
}

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

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-img {
    height: 380px;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-dots {
    bottom: 14px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-dot {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {

  .bit-hero-carousel[data-hero-carousel="mobile"] {
    height: 380px;
    overflow: hidden;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-track,
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-slide,
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-main,
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-media {
    height: 100%;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

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

  .bit-hero-carousel[data-hero-carousel="mobile"] {
    height: auto;
    overflow: hidden;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-track,
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-slide,
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-main,
  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-media {
    height: auto;
  }

  .bit-hero-carousel[data-hero-carousel="mobile"] .bit-hero-img {
    height: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (min-width: 744px) and (max-width: 1024px) {
  .bit-ulasan-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .bit-ulasan-title {
    font-size: 15px;
  }
}

/* ── WordPress paginate_links() styling ── */
.bit-pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bit-pagination .page-numbers li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bit-pagination .page-numbers li a,
.bit-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: #111827;
}

.bit-pagination .page-numbers li span.current {
  background: #29a4c5;
  color: #ffffff;
}

.bit-pagination .page-numbers li a:hover {
  background: rgba(41,164,197,.15);
}

.bit-pagination .page-numbers li .dots {
  background: transparent;
  color: #6b7280;
}

/* ── Filter Bar ── */
.bit-filter-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 12px 0 16px;
  padding: 8px 12px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(41,164,197,.25);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  overflow: visible;
}

.bit-filter-label {
  font-size: 12px;
  font-weight: 700;
  opacity: .6;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
}

.bit-filter-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.70);
  border: 0.5px solid rgba(41,164,197,.18);
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}

.bit-filter-chip:hover {
  background: rgba(255,255,255,.90);
  border-color: rgba(41,164,197,.35);
}

.bit-filter-chip.is-active {
  background: rgba(29,155,209,.12);
  border-color: rgba(29,155,209,.45);
  color: #1d9bd1;
}

.bit-filter-sep {
  width: 1px;
  height: 18px;
  background: rgba(41,164,197,.25);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Dropdown kategori */
.bit-filter-dropdown-wrap {
  position: relative;
}

.bit-filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: inherit;
  background: rgba(255,255,255,.70);
  border: 0.5px solid rgba(41,164,197,.18);
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}

.bit-filter-dropdown-btn:hover {
  background: rgba(255,255,255,.90);
  border-color: rgba(41,164,197,.35);
}

.bit-filter-dropdown-btn.is-active {
  background: #1d9bd1;
  border-color: #1d9bd1;
  color: #fff;
}

.bit-filter-dropdown-btn.is-active svg {
  stroke: #fff;
}

.bit-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(41,164,197,.18);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 100;
  overflow: hidden;
}

.bit-filter-dropdown.is-open {
  display: block;
}

.bit-filter-dropdown-item {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: background .1s ease;
}

.bit-filter-dropdown-item:hover {
  background: rgba(41,164,197,.08);
}

.bit-filter-dropdown-item.is-active {
  color: #1d9bd1;
  font-weight: 800;
  background: rgba(41,164,197,.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   Filter bar — perbaikan urutan cascade

   Blok ringkas untuk layar sempit sebelumnya diletakkan di atas rule dasar
   `.bit-filter-chip`, `.bit-filter-label`, `.bit-filter-sep`, dan
   `.bit-filter-dropdown-btn`. Media query tidak menambah specificity, jadi
   rule dasar yang berada lebih bawah selalu menang dan ukuran ringkas tidak
   pernah benar-benar dipakai. Akibatnya ponsel tetap memuat filter bar
   berukuran desktop, dan pada nama kategori panjang seperti "Gadget of the
   Month" isinya melebihi lebar bar lalu tumpah keluar.

   Blok yang sama kini dipindah ke bawah rule dasar tanpa mengubah satu pun
   nilainya. Blok `max-width: 389px` di bawah tetap berada paling akhir agar
   layar terkecil tetap menang atas blok ini.
   ══════════════════════════════════════════════════════════════════════════ */

/* Bar tetap satu baris untuk seluruh rentang mobile dan tablet.
   Dipisahkan dari ukuran anak-anaknya karena rentangnya memang berbeda. */
@media (max-width: 1024px) {
  .bit-filter-bar {
    flex-wrap: nowrap;
    overflow: visible;
    gap: 4px;
  }
}

/* Ukuran ringkas khusus ponsel.
   Batasnya sengaja 767px, bukan 1024px seperti versi lama. Rentang tablet
   768–1024px punya ruang lebih dari cukup dan tampilannya sudah disetujui,
   jadi dibiarkan memakai ukuran dasar persis seperti sebelumnya. */
@media (max-width: 767px) {
  .bit-filter-label {
    font-size: 11px;
    margin-right: 2px;
    flex-shrink: 0;
  }
  .bit-filter-chip {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .bit-filter-sep {
    height: 14px;
    margin: 0 1px;
    flex-shrink: 0;
  }
  .bit-filter-dropdown-btn {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .bit-filter-dropdown-wrap {
    flex-shrink: 0;
  }
}

/* ── Filter bar: layar kecil (iPhone SE 320px, iPhone X 375px, iPhone XR 414px) ──
   Batas dinaikkan dari 389px menjadi 430px. Ponsel 390–430px (iPhone XR, 11,
   12, 13, 14) sebelumnya tidak tercakup dan tetap menampilkan label "Sort"
   beserta pemisahnya, sehingga sisa ruang untuk tombol kategori tinggal
   sedikit. Dengan batas baru, ponsel-ponsel tersebut ikut memakai mode ringkas
   yang sama seperti layar yang lebih kecil. */
@media (max-width: 430px) {
  .bit-filter-label {
    display: none;
  }
  .bit-filter-sep:first-of-type {
    display: none;
  }
  .bit-filter-bar {
    padding: 6px 8px;
    gap: 3px;
  }
  .bit-filter-chip {
    padding: 0 7px;
    font-size: 10.5px;
  }
  .bit-filter-dropdown-btn {
    padding: 0 7px;
    font-size: 10.5px;
  }
}

/* ── Dropdown Kategori: align kanan di mobile supaya tidak overflow ── */
@media (max-width: 1024px) {
  .bit-filter-dropdown {
    left: auto;
    right: 0;
  }
}

/* ── Ads Mobile Home ── */
.bit-ads-mobile-home {
  width: 100%;
  min-height: 250px;
  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-mobile-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%);
}

/* ── Sticky Bottom Ads Mobile ── */
@keyframes bitStickyMobileSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

.bit-sticky-ads-mobile-inner {
  pointer-events: auto;
  width: 100%;
  min-height: 64px;
  background: rgba(255,255,255,.95);
  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-mobile-close {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  height: 26px;
  padding: 0 10px 0 8px;
  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: 4px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,.20);
  transition: background 0.15s;
  white-space: nowrap;
}

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

.bit-sticky-ads-mobile-close:hover {
  background: #111827;
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Poin 2 — Tukar Visual Section (Popular ↔ More Reviews)
   Cara B: tiap section tetap bawa datanya sendiri, hanya ukuran/format ditukar.
   Popular  → BESAR (grid gambar besar, data lengkap tetap tampil)
   More Reviews → KECIL (list horizontal thumb kecil)
   Override diletakkan di akhir file agar menang cascade atas rule dasar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── POPULAR jadi BESAR (mobile-first) ── */
.bit-section--big-swap .bit-popular-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.bit-section--big-swap .bit-popular-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* Padding bawah dihilangkan. Nilai 16px sebelumnya dimaksudkan sebagai ruang
     di atas garis pemisah, padahal `border-bottom` pada aturan yang sama sudah
     dimatikan, sehingga padding itu memberi jarak dari sesuatu yang tidak ada.
     Nilai itu menumpuk dengan `gap: 18px` milik `.bit-popular-list` di atas dan
     membuat jarak antar artikel menjadi 34px. Versi desktop pada
     `style.desktop.home.css` memang sudah memakai `0`. */
  padding: 0;
  border-top: none;
  border-bottom: none;
}

.bit-section--big-swap .bit-popular-list .bit-popular-link:last-child .bit-popular-item {
  border-bottom: none;
  padding-bottom: 0;
}

.bit-section--big-swap .bit-popular-thumb {
  order: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}

.bit-section--big-swap .bit-popular-thumb img {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-radius: 14px;
}

.bit-section--big-swap .bit-popular-title {
  font-size: 18px;
}

.bit-section--big-swap .bit-popular-date {
  margin-left: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.3 · Poin 1 — Read Time (homepage)
   Disisipkan setelah author. Karena .bit-popular-date / .bit-terbaru-date
   sudah punya margin-left:auto, read time otomatis menempel di kiri
   bersama author, sementara date & views tetap terdorong ke kanan.
   ══════════════════════════════════════════════════════════════════════════ */
.bit-popular-readtime,
.bit-terbaru-readtime {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
}

.bit-popular-readtime::before,
.bit-terbaru-readtime::before {
  content: "·";
  margin-right: 5px;
  margin-left: -1px;
  color: #9ca3af;
  font-weight: 700;
}

.bit-icon-clock {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Homepage ponsel — jarak hero ke judul section pertama

   Susunannya: .bit-hero → .bit-layout → .bit-content → .bit-section. Pada
   ponsel .bit-layout belum menjadi grid (aturan grid hanya ada di berkas
   desktop), sehingga margin atas .bit-section runtuh menembus .bit-content
   dan .bit-layout lalu bertemu margin bawah .bit-hero. Yang berlaku adalah
   nilai terbesar di antara keduanya, bukan penjumlahannya, jadi jaraknya
   selama ini 18px dan mengecilkan margin bawah hero saja tidak berpengaruh.

   Karena itu keduanya disamakan menjadi 8px agar hasil akhirnya benar-benar
   8px. Batasnya 767px supaya rentang tablet tidak ikut berubah.

   .bit-section juga dipakai section lain di homepage, maka penargetannya
   dibatasi pada anak pertama .bit-content. Halaman daftar artikel memakai
   .bit-section-terbaru sehingga tidak tersentuh sama sekali.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .bit-hero {
    margin-bottom: 8px;
  }
  .bit-content > .bit-section:first-child {
    margin-top: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Baris meta artikel — read time menyesuaikan ruang yang tersedia

   Baris meta memuat empat keterangan: penulis, read time, tanggal, dan jumlah
   view. Seluruhnya memakai `white-space: nowrap` tanpa `flex-shrink: 0`,
   sehingga ketika ruang kurang, flex memaksa masing-masing menyusut di bawah
   lebar teksnya sendiri. Teks yang tidak dapat dipatahkan lalu keluar dari
   kotaknya dan bertabrakan dengan thumbnail di sebelah kanan.

   Ruang yang menentukan bukan lebar layar, melainkan lebar kolom teks, yaitu
   lebar layar dikurangi padding halaman, thumbnail, dan jaraknya. Karena itu
   pengukurannya diserahkan pada `.bit-popular-text` dan `.bit-terbaru-text`
   yang sudah ditandai sebagai container di bagian atas berkas. Pendekatan ini
   menyesuaikan diri pada ponsel dengan lebar berapa pun, dan tetap benar
   seandainya ukuran thumbnail atau padding halaman diubah di kemudian hari.

   Ambang 310px diambil dari kombinasi terlebar yang mungkin muncul sekarang:
   penulis dengan nama terpanjang sekitar 107px, read time 86px, tanggal 40px,
   jumlah view dalam format ribuan 43px, ditambah jarak antar keterangan 26px,
   seluruhnya sekitar 302px. Sisanya menjadi kelonggaran.

   Read time yang dipilih untuk disembunyikan karena paling tidak diperlukan
   pada halaman daftar, dan keterangan yang sama tetap tampil di halaman
   artikel. Penulis, tanggal, dan jumlah view dibiarkan utuh.

   Peramban yang belum mendukung container query akan mengabaikan blok ini dan
   menampilkan baris meta seperti sebelumnya.
   ══════════════════════════════════════════════════════════════════════════ */
@container bit-meta (max-width: 310px) {
  .bit-popular-readtime,
  .bit-terbaru-readtime {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Slot iklan mobile — kembalikan ke elemen blok

   `.bit-only-mobile` pada `style.layout.css` menetapkan
   `display: inline-flex !important`. Kelas itu memang dibutuhkan tombol combo
   dan panel menu, tetapi ikut terpasang pada pembungkus slot iklan yang
   lebarnya penuh, dan karena bertanda penting ia mengalahkan `display: flex`
   milik slot itu sendiri.

   Slot iklan lalu diperlakukan sebagai elemen sebaris, dengan dua akibat.
   Pertama, margin tidak lagi runtuh terhadap section di atas dan di bawahnya,
   sehingga kedua margin dijumlahkan alih-alih diambil yang terbesar. Kedua,
   kotaknya duduk di atas garis baseline sehingga selalu tersisa ruang untuk
   ekor huruf di bawahnya, sekitar empat sampai enam piksel yang tidak berasal
   dari margin mana pun dan tidak dapat dihapus dengan mengatur margin.

   Selektor di bawah menggabungkan kedua kelas agar lebih spesifik, sehingga
   menang tanpa perlu mengubah `.bit-only-mobile` yang dipakai bersama elemen
   lain. Nilai margin tidak diubah sama sekali; jarak mengecil semata karena
   perilaku runtuh margin kembali berjalan seperti seharusnya.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bit-ads-mobile-home.bit-only-mobile {
    display: flex !important;
  }
}