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

.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-article-meta-sep{
  display: none;
}

/* ── Reactions bar (Like + Laporkan) ── */
.bit-article-reactions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
}

.bit-article-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: 1.5px solid rgba(41,164,197,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #6b7280;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.bit-article-like-btn:hover {
  background: rgba(255,255,255,.92);
}

.bit-article-like-btn:active {
  transform: scale(.96);
}

.bit-article-like-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: fill .2s ease, stroke .2s ease, transform .2s ease;
}

.bit-article-like-btn.is-liked {
  color: #ef4444;
  border-color: rgba(239,68,68,.35);
  background: rgba(255,241,241,.85);
}

.bit-article-like-btn.is-liked .bit-article-like-icon {
  fill: #ef4444;
  stroke: #ef4444;
  transform: scale(1.15);
}

.bit-article-like-count {
  font-size: 13px;
  font-weight: 800;
  min-width: 10px;
}

.bit-article-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1.5px solid rgba(41,164,197,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #6b7280;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.bit-article-report-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.bit-article-report-btn:hover {
  background: rgba(255,255,255,.92);
}

.bit-article-report-btn:active {
  transform: scale(.96);
}

/* ── Share Button ── */
.bit-article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1.5px solid rgba(41,164,197,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #6b7280;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.bit-article-share-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.bit-article-share-btn:hover {
  background: rgba(255,255,255,.92);
}

.bit-article-share-btn:active {
  transform: scale(.96);
}

/* ── Share Dropdown ── */
.bit-share-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(41,164,197,.22);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13), 0 1.5px 6px rgba(41,164,197,.08);
  z-index: 200;
  min-width: 190px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: bitShareDDIn .14s ease;
}

@keyframes bitShareDDIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.bit-share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 10px;
  color: #374151;
  transition: background .12s;
  text-decoration: none;
}

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

.bit-share-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 16px;
  flex-shrink: 0;
}

.bit-share-item-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.bit-share-item--copy .bit-share-item-icon  { background: rgba(107,114,128,.10); border: 1px solid rgba(107,114,128,.18); }
.bit-share-item--wa .bit-share-item-icon    { background: rgba(37,211,102,.10);  border: 1px solid rgba(37,211,102,.25); }
.bit-share-item--line .bit-share-item-icon  { background: rgba(0,195,0,.10);     border: 1px solid rgba(0,195,0,.25); }
.bit-share-item--email .bit-share-item-icon { background: rgba(107,114,128,.10); border: 1px solid rgba(107,114,128,.18); }
.bit-share-item--tg .bit-share-item-icon    { background: rgba(0,136,204,.10);   border: 1px solid rgba(0,136,204,.22); }

.bit-share-item-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* ── Comments Empty State ── */
.bit-comments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px 28px;
  gap: 12px;
  text-align: center;
}

.bit-comments-empty-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(41,164,197,.12), rgba(41,164,197,.06));
  border: 1.5px solid rgba(41,164,197,.22);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(41,164,197,.75);
  box-shadow: 0 6px 18px rgba(41,164,197,.10);
  animation: bitEmptyBounce 2.8s ease-in-out infinite;
}

@keyframes bitEmptyBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.bit-comments-empty-icon svg {
  width: 36px;
  height: 36px;
}

.bit-comments-empty-title {
  font-weight: 900;
  font-size: 15px;
  color: #1f2937;
  letter-spacing: -.01em;
}

.bit-comments-empty-sub {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.5;
}

.bit-comments-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(41,164,197,.14), rgba(41,164,197,.08));
  border: 1px solid rgba(41,164,197,.25);
  font-size: 13px;
  font-weight: 800;
  color: #1d9bd1;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, transform .12s;
}

.bit-comments-empty-cta:hover {
  background: linear-gradient(135deg, rgba(41,164,197,.22), rgba(41,164,197,.14));
  transform: translateY(-1px);
}

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

.bit-article-author /* ── Comments Empty State ── */
.bit-comments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px 28px;
  gap: 12px;
  text-align: center;
}

.bit-comments-empty-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(41,164,197,.12), rgba(41,164,197,.06));
  border: 1.5px solid rgba(41,164,197,.22);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(41,164,197,.75);
  box-shadow: 0 6px 18px rgba(41,164,197,.10);
  animation: bitEmptyBounce 2.8s ease-in-out infinite;
}

@keyframes bitEmptyBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.bit-comments-empty-icon svg {
  width: 36px;
  height: 36px;
}

.bit-comments-empty-title {
  font-weight: 900;
  font-size: 15px;
  color: #1f2937;
  letter-spacing: -.01em;
}

.bit-comments-empty-sub {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.5;
}

.bit-comments-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(41,164,197,.14), rgba(41,164,197,.08));
  border: 1px solid rgba(41,164,197,.25);
  font-size: 13px;
  font-weight: 800;
  color: #1d9bd1;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, transform .12s;
}

.bit-comments-empty-cta:hover {
  background: linear-gradient(135deg, rgba(41,164,197,.22), rgba(41,164,197,.14));
  transform: translateY(-1px);
}

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

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

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

.bit-ulasan-img{
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.bit-article-cover{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(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;
}

.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-article-content a{
  color: #1d9bd1 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.bit-article-content a:hover{
  color: #1580b0 !important;
}

.bit-article-content .bit-affiliate-card {
  color: inherit !important;
  text-decoration: none !important;
}

.bit-article-content .bit-affiliate-card:hover {
  color: inherit !important;
}

.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-yt-embed{
  margin: 16px 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(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: 16px 16px 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(41,164,197,.22);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.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(.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{
  flex: 1;
  min-width: 0;
  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;
  gap: 8px;
  flex-wrap: nowrap;
}

.bit-guest-hint{
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.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: #ffffff;
  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;
  word-break: break-word;
  overflow-wrap: break-word;
}

.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-icon-like,
.bit-icon-like path {
  stroke: #6b7280 !important;
  color: #6b7280;
}

.bit-action.is-liked .bit-icon-like,
.bit-action.is-liked .bit-icon-like path {
  stroke: #29a4c5 !important;
  color: #29a4c5;
}

.bit-reply-btn{
  display: none;
}

.bit-reply-open-btn {
  font-size: 12px;
  font-weight: 800;
  color: #29a4c5;
}

/* ── YouTube-style replies toggle ── */
.bit-replies-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #29a4c5;
  padding: 4px 0;
}

.bit-replies-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.bit-replies-toggle.is-open svg {
  transform: rotate(180deg);
}

.bit-replies-toggle:hover {
  opacity: .8;
}

.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: #ffffff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

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

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

.bit-section-title{
  margin: 0 0 12px;
}

.bit-article-summary{
  margin: 14px 0 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.50));
  border: 1px solid rgba(41,164,197,.16);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .bit-article-summary {
    padding: 10px 12px;
  }
  .bit-article-summaryHead {
    margin-bottom: 8px;
    padding-left: 12px;
  }
  .bit-article-summaryList {
    gap: 7px;
    padding-left: 12px;
  }
  .bit-article-summaryList li {
    font-size: 13px;
    line-height: 1.55;
    padding-left: 16px;
  }
  .bit-article-summaryList li::before {
    width: 7px;
    height: 7px;
    top: 0.65em;
  }
}

.bit-article-summary::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: rgba(41,164,197,.45);
  opacity: .75;
}

.bit-article-summaryHead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  padding-left: 14px;
}

.bit-article-summaryTitle{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.2;
}

.bit-article-summaryTitle::before{
  content: none !important;
}

.bit-article-summaryTag{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(41,164,197,.08);
  border: 1px solid rgba(41,164,197,.18);
  opacity: .90;
}

.bit-article-summaryList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
  padding-left: 14px;
}

.bit-article-summaryList li{
  position: relative;
  padding-left: 18px;
  font-weight: 650;
  line-height: 1.65;
  opacity: .92;
}

.bit-article-summaryList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(41,164,197,.46);
  box-shadow: 0 0 0 3px rgba(41,164,197,.10);
}

@media (min-width: 1025px){
  .bit-article-summary{
    margin: 16px 0 14px;
    padding: 16px 18px;
    border-radius: 20px;
    max-width: 760px;
  }

  .bit-article-summary::before{
    left: 12px;
    top: 16px;
    bottom: 16px;
  }

  .bit-article-summaryTitle{
    font-size: 15px;
  }

  .bit-article-summaryList{
    gap: 11px;
  }
}

/* WordPress block image caption */
figure.wp-block-image figcaption,
figure.wp-block-image .wp-element-caption{
  font-size: 12px;
  color: #5a6b75;
  margin-top: 6px;
  line-height: 1.4;
  text-align: left;
}

/* ── Gambar artikel: konsisten 16:9 (mobile) ── */
.bit-article-content figure.wp-block-image,
.bit-article-content .wp-block-image {
  position: relative;
  margin: 16px 0;
  border-radius: 14px;
  overflow: visible;
  width: 100%;
  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: 14px;
  box-shadow: 0 6px 18px 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: 12px;
  color: #6b7280;
  line-height: 1.4;
  text-align: left;
  font-style: normal;
  padding: 5px 0 0;
  background: transparent;
  border-top: none;
  border-radius: 0;
}

/* ── Pagination artikel (ke latest list) ── */
.bit-article-pagination {
  margin-top: 16px;
}

/* ── Auto Caption Gambar ── */
.bit-img-figure {
  position: relative;
  margin: 16px 0;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.bit-img-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.bit-img-caption {
  display: block;
  font-size: 12px;
  color: #5a6b75;
  background: rgba(255,255,255,.82);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
  padding: 7px 12px;
  border-top: 1px solid rgba(41,164,197,.10);
}

/* ── Reply nested ── */
.bit-replies-list {
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid rgba(41,164,197,.20);
  padding-left: 12px;
}

/* Mobile: max 3 level indent (YouTube-style) */
@media (max-width: 1024px) {
  /* Level 2: kurangi indent */
  .bit-replies-list .bit-replies-list {
    margin-left: 14px;
    padding-left: 10px;
  }
  /* Level 3+: flat, tidak ada indent tambahan */
  .bit-replies-list .bit-replies-list .bit-replies-list,
  .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list,
  .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 0;
  }
  /* Sembunyikan replies toggle di depth 3+ (sudah flat) */
  [data-depth="3"] .bit-replies-toggle,
  [data-depth="4"] .bit-replies-toggle,
  [data-depth="5"] .bit-replies-toggle,
  [data-depth="6"] .bit-replies-toggle {
    display: none !important;
  }

  /* Reply composer di depth 2+ full width keluar dari indent */
  [data-depth="2"] > .bit-comment-body > .bit-reply-composer {
    margin-left: -40px;
    margin-right: -12px;
  }
  [data-depth="3"] > .bit-comment-body > .bit-reply-composer,
  [data-depth="4"] > .bit-comment-body > .bit-reply-composer,
  [data-depth="5"] > .bit-comment-body > .bit-reply-composer {
    margin-left: -80px;
    margin-right: -12px;
  }
}

/* Desktop: max 5 level indent */
@media (min-width: 1025px) {
  /* Level 6+: flat, tidak ada indent tambahan */
  .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list,
  .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list .bit-replies-list {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 0;
  }
  /* Sembunyikan replies toggle di depth 5+ (sudah flat) */
  [data-depth="5"] .bit-replies-toggle,
  [data-depth="6"] .bit-replies-toggle,
  [data-depth="7"] .bit-replies-toggle {
    display: none !important;
  }
}

.bit-comment--reply {
  padding: 8px 0;
}

.bit-comment--reply .bit-avatar {
  width: 28px;
  height: 28px;
}

.bit-comment--reply .bit-comment-name {
  font-size: 13px;
}

.bit-comment--reply .bit-comment-time {
  font-size: 11px;
}

.bit-comment--reply .bit-comment-text {
  font-size: 13px;
}

/* ── Reply composer ── */
.bit-reply-composer {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(41,164,197,.05);
  border: 1px solid rgba(41,164,197,.16);
  border-radius: 12px;
}

.bit-reply-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #dbeafe;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  min-height: 60px;
  resize: vertical;
  outline: none;
  background: #ffffff;
  color: #111827;
}

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

.bit-reply-footer {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bit-reply-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #dbeafe;
  border-radius: 10px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  outline: none;
  background: #ffffff;
  color: #111827;
}

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

.bit-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bit-reply-cancel {
  border: none;
  background: #f3f4f6;
  color: #374151;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.bit-reply-post {
  border: none;
  background: #29a4c5;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}

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

/* ── Character counter inside textarea ── */
.bit-textarea-wrap {
  position: relative;
  display: block;
}

.bit-textarea-wrap .bit-guest-textarea {
  padding-bottom: 28px;
}

.bit-char-counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  pointer-events: none;
  line-height: 1;
  transition: color 0.2s ease;
  font-family: inherit;
}


/* ── Report Modal ── */
.bit-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: bitReportFadeIn .18s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
  isolation: isolate;
}

@media (min-width: 600px) {
  .bit-report-overlay {
    align-items: center;
  }
}

@keyframes bitReportFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bit-report-modal {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  padding: 20px 20px 28px;
  animation: bitReportSlideUp .22s ease;
  position: relative;
  z-index: 1;
  isolation: isolate;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@media (min-width: 600px) {
  .bit-report-modal {
    border-radius: 24px;
    padding: 24px;
  }
}

@keyframes bitReportSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bit-report-handle {
  width: 36px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  margin: 0 auto 18px;
}

@media (min-width: 600px) {
  .bit-report-handle { display: none; }
}

.bit-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bit-report-title {
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin: 0;
}

.bit-report-close {
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex-shrink: 0;
}

.bit-report-close:hover {
  background: #e5e7eb;
}

.bit-report-subtitle {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  margin: 0 0 16px;
}

.bit-report-options {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.bit-report-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
  width: 100%;
}

.bit-report-option:hover {
  border-color: #29a4c5;
  background: rgba(41,164,197,.04);
}

.bit-report-option.is-selected {
  border-color: #29a4c5;
  background: rgba(41,164,197,.07);
}

.bit-report-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.bit-report-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bit-report-option-label {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.bit-report-option-desc {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.3;
}

.bit-report-note-wrap {
  margin-bottom: 14px;
  display: none;
}

.bit-report-note-wrap.is-visible {
  display: block;
}

.bit-report-note {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #dbeafe;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  min-height: 72px;
  resize: none;
  outline: none;
  background: #ffffff;
  color: #111827;
}

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

.bit-report-submit {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: #2f8fb0;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .12s ease, transform .1s ease;
}

.bit-report-submit:hover {
  filter: brightness(1.05);
}

.bit-report-submit:active {
  transform: translateY(1px);
}

.bit-report-submit:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
}

/* ── Write a reply button ── */
.bit-write-reply-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #29a4c5;
  padding: 6px 0 2px;
  text-align: left;
}

.bit-write-reply-btn:hover {
  opacity: .75;
}

/* ── Dislike button ── */
.bit-icon-dislike,
.bit-icon-dislike path {
  stroke: #6b7280 !important;
  color: #6b7280;
}

.bit-action-dislike.is-disliked .bit-icon-dislike,
.bit-action-dislike.is-disliked .bit-icon-dislike path {
  stroke: #29a4c5 !important;
  color: #29a4c5;
}

/* ── Load more replies button ── */
.bit-load-more-replies {
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #29a4c5;
  padding: 6px 0 2px;
  text-align: left;
  width: auto;
}

.bit-load-more-replies:hover {
  opacity: .75;
}

.bit-load-more-replies:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Ads Mobile Artikel ── */
@media (max-width: 1024px) {
  .bit-ads-mobile {
    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 .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%);
  }

  .bit-ads-mobile-incontent {
    margin: 20px 0;
  }

  /* Pos 2 (bawah comment) tampil di mobile juga */
  .bit-ads-pos2 {
    max-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;
  }
}

/* ── Affiliate Links Section ── */
.bit-affiliate {
  margin-top: 18px;
  margin-bottom: 24px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(41,164,197,.18);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

.bit-affiliate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bit-affiliate-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(41,164,197,.14);
  border-radius: 14px;
  overflow: hidden;
  padding: 8px;
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.bit-affiliate-card:hover {
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Mobile: hide card ke-3 dst */
.bit-affiliate-card--hidden-mobile {
  display: none;
}

/* Desktop: hide card ke-4 dst (override di media query) */
.bit-affiliate-card--hidden-desktop {
  display: none;
}

.bit-affiliate-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(219,234,254,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.bit-affiliate-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #93c5fd;
}

.bit-affiliate-info {
  flex: 1;
  min-width: 0;
}

.bit-affiliate-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bit-affiliate-source {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  margin-top: 3px;
}

.bit-affiliate-action {
  flex-shrink: 0;
}

.bit-affiliate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #29a4c5;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.bit-affiliate-card:hover .bit-affiliate-btn {
  background: #1d8fad;
}

.bit-affiliate-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(41,164,197,.22);
  background: rgba(255,255,255,.60);
  font-size: 13px;
  font-weight: 700;
  color: #1d9bd1;
  cursor: pointer;
  transition: background .14s ease;
}

.bit-affiliate-more:hover {
  background: rgba(255,255,255,.90);
}

@media (min-width: 1025px) {
  .bit-affiliate {
    max-width: 980px;
  }

  /* Di desktop, card yang hidden-mobile tetap tampil */
  .bit-affiliate-card--hidden-mobile {
    display: flex;
  }

  /* Di desktop, card ke-4 dst tetap hidden sampai load more */
  .bit-affiliate-card--hidden-desktop {
    display: none;
  }

  .bit-affiliate-thumb {
    width: 72px;
    height: 72px;
  }

  .bit-affiliate-name {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 · Poin 7 — Watermark Gambar (CSS overlay, Cara A)
   Logo BIT ditempel di pojok kanan bawah gambar artikel via pseudo-element.
   Tidak mengubah file gambar asli. Opacity 45%.

   Catatan posisi:
   - .bit-img-figure: caption menempel dalam figure (overflow hidden), tinggi
     figure mengikuti gambar, jadi watermark via ::after bottom sudah stabil.
   - figure.wp-block-image: figcaption berada di bawah gambar sebagai teks yang
     tingginya bisa 1 atau 2 baris. Agar watermark tidak ikut bergeser mengikuti
     tinggi caption, ::after dibuat setinggi gambar saja (aspect-ratio 16/9 dari
     lebar figure) lalu logo ditempel via background-position. Dengan begitu
     posisi watermark selalu konsisten di pojok kanan bawah gambar.
   ══════════════════════════════════════════════════════════════════════════ */
.bit-article-content figure.wp-block-image,
.bit-article-content .wp-block-image {
  --bit-wm-size: 22px;
  --bit-wm-right: 12px;
  --bit-wm-bottom: 12px;
}

.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 {
  position: relative;
}

.bit-article-content figure.wp-block-image::after,
.bit-article-content .wp-block-image::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-image: url("../icons/LOGO-BIT.png");
  background-size: auto var(--bit-wm-size);
  background-repeat: no-repeat;
  background-position: right var(--bit-wm-right) bottom var(--bit-wm-bottom);
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

.bit-img-figure::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  background-image: url("../icons/LOGO-BIT.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.3 · Poin 1 — Read Time (artikel)
   .bit-article-meta memakai justify-content:space-between. Author + read time
   dibungkus dalam .bit-article-meta-left agar tetap terhitung 1 anak,
   sehingga date tetap berada di kanan seperti desain semula.
   ══════════════════════════════════════════════════════════════════════════ */
.bit-article-meta-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bit-article-readtime {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
}

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

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

/* ══════════════════════════════════════════════════════════════════════════
   v1.3 · Poin 2 — Hear this Article
   Player berupa popover kecil yang melayang di bawah tombol Listen.
   Tidak mendorong layout (position: absolute di dalam .bit-listen-wrap).
   Desktop: buka via hover, tutup saat kursor keluar.
   Mobile : buka via tap, tutup saat tap di luar.
   Popover tertutup TIDAK menghentikan audio.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper: jangkar posisi popover ── */
.bit-listen-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* ── Tombol Listen ── */
.bit-article-listen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid rgba(41, 164, 197, .30);
  background: rgba(41, 164, 197, .10);
  color: #1580b0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.bit-article-listen:hover {
  background: rgba(41, 164, 197, .18);
  border-color: rgba(41, 164, 197, .45);
}

.bit-article-listen:focus-visible {
  outline: 2px solid rgba(41, 164, 197, .55);
  outline-offset: 2px;
}

/* Audio sedang berjalan: tombol berubah warna (solid) */
.bit-article-listen.is-playing {
  background: #29a4c5;
  border-color: #29a4c5;
  color: #ffffff;
}

.bit-article-listen.is-playing:hover {
  background: #1e8fae;
  border-color: #1e8fae;
}

.bit-article-listen .bit-icon-listen {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
}

/* ── Popover player ── */
.bit-audio-player {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 244px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(41, 164, 197, .22);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: bitAudioPop .16s ease;
}

.bit-audio-player[hidden] {
  display: none;
}

@keyframes bitAudioPop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Jembatan hover: area tak terlihat antara tombol dan popover,
   supaya kursor tidak "jatuh" saat bergerak turun ke popover. */
.bit-audio-player::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.bit-audio-el {
  display: none;
}

/* ── Tombol play/pause ── */
.bit-audio-play {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: #29a4c5;
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease;
}

.bit-audio-play:hover {
  background: #1e8fae;
}

.bit-audio-play:focus-visible {
  outline: 2px solid rgba(41, 164, 197, .55);
  outline-offset: 2px;
}

.bit-audio-play svg {
  width: 14px;
  height: 14px;
  display: block;
}

.bit-audio-play svg[hidden] {
  display: none;
}

/* ── Body: seek bar + waktu ── */
.bit-audio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bit-audio-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(41, 164, 197, .22);
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.bit-audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #29a4c5;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.bit-audio-seek::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #29a4c5;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.bit-audio-seek:focus-visible {
  outline: 2px solid rgba(41, 164, 197, .55);
  outline-offset: 3px;
}

.bit-audio-times {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ── Mobile (perangkat sentuh): perbesar area sentuh player ──
   Kursor tidak ada di mobile, jadi tombol jeda dan seek bar dibesarkan
   agar nyaman dijangkau jempol. Popover juga sedikit dilebarkan. */
@media (hover: none) {
  .bit-audio-player {
    width: 262px;
    gap: 10px;
    padding: 10px 12px;
  }

  .bit-audio-play {
    width: 38px;
    height: 38px;
  }

  .bit-audio-play svg {
    width: 17px;
    height: 17px;
  }

  .bit-audio-body {
    gap: 5px;
  }

  /* Track dipertebal + padding vertikal lewat border transparan,
     supaya area sentuh seek bar jauh lebih tinggi dari track-nya. */
  .bit-audio-seek {
    height: 5px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    background-clip: padding-box;
  }

  .bit-audio-seek::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
  }

  .bit-audio-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
  }

  .bit-audio-times {
    font-size: 11px;
    margin-top: -4px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 8 — Listen di baris Like/Share + player jadi bar sticky (mobile)

   Masalah asal: tombol Listen berada di meta bar setelah author + read time.
   Pada layar sempit tombol menimpa tanggal, dan popover-nya menembus batas
   layar karena titik anchor sudah jauh dari tepi kiri konten.

   Dua perubahan, keduanya khusus perangkat sentuh:

   1. Tombol Listen dipindahkan ke baris Like/Share (.bit-article-reactions--top)
      yang selama ini menyisakan ruang kosong. Pemindahan dikerjakan script.js
      tanpa duplikasi markup — tidak ada ID ganda, tidak ada <audio> kedua.

   2. Player tidak lagi berbentuk popover yang menempel di tombol, melainkan
      bar full-width di dasar layar. Tidak mungkin terpotong berapa pun lebar
      layar, dan tetap terjangkau saat pengguna menggulir artikel.

   Desktop tidak berubah sama sekali — seluruh blok ini di dalam (hover: none).
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {

  /* ── 1. Tombol Listen di baris Like/Share ── */

  .bit-listen-wrap--inline {
    position: static;
    flex-shrink: 0;
  }

  /* Ukuran disamakan dengan tombol Like dan Share di baris yang sama */
  .bit-listen-wrap--inline .bit-article-listen {
    height: auto;
    margin-left: 0;
    padding: 9px 18px;
    gap: 7px;
    font-size: 13px;
    border-width: 1.5px;
    border-color: rgba(41, 164, 197, .34);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  }

  .bit-listen-wrap--inline .bit-article-listen .bit-icon-listen {
    width: 15px;
    height: 15px;
  }

  /* Pengaman: dengan tiga tombol, layar 360px hanya menyisakan ~8px.
     Bila sampai tidak muat, tombol turun ke baris berikutnya alih-alih
     meluber keluar layar. Tidak berpengaruh selama masih muat. */
  .bit-article-reactions--top {
    flex-wrap: wrap;
    row-gap: 8px;
  }


  /* ── 2. Player: dari popover menjadi bar sticky ── */

  .bit-audio-player {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    width: auto;
    max-width: none;
    box-sizing: border-box;

    gap: 11px;
    padding: 9px 12px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));

    border: 0;
    border-top: 1px solid rgba(41, 164, 197, .24);
    border-radius: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .13);

    /* Muncul dengan meluncur dari bawah, bukan memudar dari atas */
    animation: bitAudioBarUp .26s cubic-bezier(.22, 1, .36, 1);
  }

  /* Jembatan hover tidak diperlukan pada bar sticky */
  .bit-audio-player::before {
    content: none;
  }

  @keyframes bitAudioBarUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Label waktu diberi ruang lebih lega di dalam bar */
  .bit-audio-body {
    gap: 5px;
  }

  /* Tombol tutup — hanya relevan pada bentuk bar */
  .bit-audio-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    color: #374151;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s ease;
  }

  .bit-audio-close:hover {
    background: rgba(0, 0, 0, .12);
  }

  .bit-audio-close:focus-visible {
    outline: 2px solid rgba(41, 164, 197, .55);
    outline-offset: 2px;
  }

  .bit-audio-close svg {
    width: 14px;
    height: 14px;
    display: block;
  }
}

/* Tombol tutup tidak dipakai di desktop — player tetap berbentuk popover */
@media (hover: hover) {
  .bit-audio-close {
    display: none;
  }
}

/* Layar sangat sempit: rapatkan ketiga tombol agar tetap satu baris */
@media (hover: none) and (max-width: 374px) {

  .bit-article-reactions--top .bit-article-like-btn,
  .bit-article-reactions--top .bit-article-share-btn,
  .bit-article-reactions--top .bit-listen-wrap--inline .bit-article-listen {
    padding-left: 13px;
    padding-right: 13px;
  }

  .bit-article-reactions--top {
    gap: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 8 (lanjutan) — Perbaikan track seek bar di mobile

   Temuan: track progress audio tidak terlihat di perangkat sentuh.

   Penyebabnya rule mobile yang sudah ada sebelumnya — area sentuh diperluas
   dengan `border-top/bottom: 7px solid transparent` dipadu
   `background-clip: padding-box`. Karena `height: 5px` pada input range sudah
   menghitung border di banyak browser mobile, tinggi konten yang tersisa
   nyaris nol sehingga latar track praktis tidak tergambar.

   Perbaikan: area sentuh dan tampilan track dipisahkan. Elemen dibuat tinggi
   (36px) demi kenyamanan jempol, latarnya dibuat transparan, lalu track
   digambar sebagai gradient setinggi 5px yang dikunci di tengah. Thumb
   diposisikan ulang agar tetap sejajar dengan track.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {

  .bit-audio-seek {
    /* Batalkan teknik border transparan yang menyembunyikan track */
    height: 36px;
    border: 0;
    background-clip: border-box;

    /* Track digambar sebagai garis 5px yang terkunci di tengah elemen */
    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      rgba(41, 164, 197, .22),
      rgba(41, 164, 197, .22)
    );
    background-size: 100% 5px;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Chrome / Safari — track bawaan dinonaktifkan, tampilan diambil alih
     oleh background di atas. */
  .bit-audio-seek::-webkit-slider-runnable-track {
    height: 5px;
    background: transparent;
    border: 0;
    border-radius: 999px;
  }

  .bit-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #29a4c5;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    /* Setengah tinggi thumb dikurangi setengah tinggi track,
       agar titiknya duduk tepat di garis. */
    margin-top: -5.5px;
  }

  /* Firefox */
  .bit-audio-seek::-moz-range-track {
    height: 5px;
    background: transparent;
    border: 0;
    border-radius: 999px;
  }

  .bit-audio-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #29a4c5;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  }

  /* Tinggi elemen bertambah, jadi jarak antar isi bar dirapatkan kembali
     supaya tinggi bar keseluruhan tidak ikut membengkak. */
  .bit-audio-body {
    gap: 0;
  }

  .bit-audio-times {
    margin-top: -6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 9 — State tombol "Tutup" pada daftar affiliate

   Blok aditif, diletakkan di akhir file agar menang cascade atas
   `.bit-affiliate-more` di baris 1660 tanpa mengubah satu pun nilai di sana.

   Tombol memakai satu elemen untuk dua peran: membuka bertahap, lalu menutup
   setelah semua produk tampil. Tanpa pembeda visual, pengguna yang sudah
   membuka daftar panjang mudah menekannya lagi karena mengira masih ada
   produk lain, lalu daftarnya justru terlipat.

   Warnanya dinetralkan dari biru aksen (#1d9bd1) menjadi abu-abu: aksi
   menutup bukan aksi utama di section ini, jadi tidak perlu bersaing
   perhatian dengan tombol "Beli Sekarang" pada tiap kartu.

   Transisi warna sengaja tidak ditambahkan di sini. `.bit-affiliate-more`
   sudah punya `transition: background .14s ease`, dan menambah transisi pada
   `color` membuat perpindahan label terlihat seperti berkedip karena teksnya
   berganti pada frame yang sama.
   ══════════════════════════════════════════════════════════════════════════ */
.bit-affiliate-more--collapse {
  color: #6b7280;
  border-color: rgba(0, 0, 0, .12);
}

.bit-affiliate-more--collapse:hover {
  background: rgba(255, 255, 255, .90);
  color: #374151;
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.4 · Poin 9 (lanjutan) — Header bar & disclosure section afiliasi

   Blok aditif di akhir file. Tidak satu pun nilai lama diubah; `.bit-affiliate`
   di baris 1544 tetap dengan `padding: 12px` dan `border-radius: 18px` seperti
   yang sudah disetujui.

   Header bar harus menyentuh tepi kiri-kanan container agar garis bawahnya
   memanjang penuh dan mengikat judul ke lebar section. Karena padding
   container tidak boleh diubah, bar menariknya kembali lewat margin negatif
   sebesar nilai yang sama (-12px), lalu memasang paddingnya sendiri.

   Sudut atas bar dibulatkan 17px, bukan 18px seperti container. Border
   container setebal 1px berada di luar radius, sehingga radius dalamnya
   memang 1px lebih kecil — memakai 18px membuat sudut bar sedikit menyembul
   melewati lengkung container dan menyisakan celah tipis berwarna latar.

   `.bit-section-title` bawaan punya `margin: 0 0 12px`. Di dalam bar, margin
   bawah itu justru mendorong garis pemisah menjauh dari teks, jadi dinolkan
   khusus untuk judul di sini.
   ══════════════════════════════════════════════════════════════════════════ */
.bit-affiliate-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -12px -12px 12px;
  padding: 11px 14px;
  background: rgba(41, 164, 197, .10);
  border-bottom: 1px solid rgba(41, 164, 197, .16);
  border-radius: 17px 17px 0 0;
}

.bit-affiliate-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #1d8fad;
}

.bit-affiliate-head-title {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: #0c4a5e;
}

.bit-affiliate-head-count {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: #3b7f96;
  white-space: nowrap;
}

/* Disclosure — catatan kaki di dasar section, setelah tombol.

   Garis pemisah di atasnya memisahkan keterangan ini dari daftar tanpa perlu
   memindahkannya keluar dari container. Secara visual ia terbaca sebagai
   catatan tersendiri, sementara secara struktur tetap satu blok dengan
   tautan yang diterangkannya.

   PENTING — soal spesifisitas. Section afiliasi disisipkan ke dalam
   `.bit-article-content`, sehingga paragraf di dalamnya ikut terkena aturan
   paragraf artikel yang tersebar di tiga berkas:

     style.base.css:668              .bit-article-content p   14px   #111827
     style.article.css:435           .bit-article-content p   14px   #111827
     style.desktop.article.css:59    .bit-article-content p   16.5px

   Ketiganya berbobot (0,1,1), sementara `.bit-affiliate-disclosure` sendirian
   hanya (0,1,0) — kalah, sehingga disclosure sempat tampil 16.5px hitam pekat
   di desktop alih-alih catatan kaki kecil.

   Selector di bawah memakai `.bit-affiliate p.bit-affiliate-disclosure`,
   berbobot (0,2,1), sehingga menang tanpa perlu `!important`. Cara ini lebih
   disukai karena `!important` akan menyulitkan penyesuaian berikutnya: sekali
   dipakai, satu-satunya cara menimpanya adalah `!important` lagi.

   Ukurannya 10px, di bawah ukuran teks pendukung lain di tema ini. Karena itu
   warnanya justru dinaikkan kontrasnya menjadi #5b6470 — teks yang lebih
   kecil menuntut kontras lebih tinggi, bukan lebih rendah, dan keterangan
   komisi termasuk hal yang memang harus terbaca. */
.bit-affiliate p.bit-affiliate-disclosure {
  margin: 12px 2px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(41, 164, 197, .12);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  color: #6b7280;
}

@media (min-width: 1025px) {
  .bit-affiliate-head-title {
    font-size: 17px;
  }

  /* Bobot selector disamakan dengan blok di atas agar tetap menang atas
     `.bit-article-content p` versi desktop yang menetapkan 16.5px. */
  .bit-affiliate p.bit-affiliate-disclosure {
    font-size: 10.5px;
    line-height: 1.5;
  }
}

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

   Sejalan dengan penanganan `.bit-ads-mobile-home` pada `style.base.css`.
   `.bit-only-mobile` menetapkan `display: inline-flex !important`, sehingga
   pembungkus slot iklan yang lebarnya penuh diperlakukan sebagai elemen
   sebaris. Margin lalu berhenti runtuh terhadap paragraf di sekitarnya dan
   muncul ruang baseline tambahan di bawah kotaknya.

   Selektor digabungkan dengan `.bit-only-mobile` agar cukup spesifik untuk
   menang. Nilai margin tidak diubah.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bit-ads-mobile.bit-only-mobile {
    display: flex !important;
  }
}