@font-face {
    font-family: Unicons;
    src: url('../fonts/unicons/Unicons.eot');
    src: url('../fonts/unicons/Unicons.eot#iefix') format('embedded-opentype'), url('../fonts/unicons/Unicons.ttf') format('truetype'), url('../fonts/unicons/Unicons.woff') format('woff'), url('../fonts/unicons/Unicons.svg#Unicons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block
}

[class^="unicon-"],
[class*=" unicon-"] {
    font-family: 'Unicons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}




.unicon-react-like:before  { content: "\ebe7"; } /* thumbs-up */
.unicon-react-love:before  { content: "\ea4a"; } /* heart */
.unicon-react-haha:before  { content: "\ea41"; } /* grin */
.unicon-react-wow:before   { content: "\ebc1"; } /* surprise */
.unicon-react-sad:before   { content: "\eb54"; } /* sad-crying */
.unicon-react-angry:before { content: "\e832"; } /* angry */

/* =========================================================
   ARTICLE CONTENT (tokens + typography)
========================================================= */

/* ---- Base tokens (LIGHT) ---- */
:root{
  --ac-text: #0a0e17;                 /* gray-900 */
  --ac-muted: #6b7280;                /* gray-500 */
  --ac-link: var(--color-primary, #2563eb);
  --ac-border: rgb(254, 186, 0);
  --ac-quote-bg: rgba(17,24,39,.04);
  --ac-code-bg: rgba(17,24,39,.06);
}

/* ---- Dark mode tokens (theme uses .uc-dark) ---- */
:where(.uc-dark){
  --ac-text: rgba(255, 255, 255, 0.975);
  --ac-muted: rgba(255,255,255,.70);
  --ac-link: #60a5fa;
  --ac-border: rgba(255,255,255,.14);
  --ac-quote-bg: rgba(255,255,255,.06);
  --ac-code-bg: rgba(238, 183, 2, 0.488);
}

/* ---- Container base ---- */
.article-content{
  color: var(--ac-text) !important;
  line-height: 1.25;
  font-size: 1.0rem;
  font-weight: 500;
  word-break: break-word;
}

/* ---- Critical: defeat theme muted/opacity on descendants ---- */
.article-content,
.article-content *{
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ---- Paragraph spacing ---- */
.article-content p{
  margin: 0 0 1rem 0;
  /* text-align: justify; */
}

.article-content p{ text-align: left; }

@media (min-width: 768px){
  .article-content p{
    text-align: justify;
    text-justify: inter-word;
  }
}

/* ---- Kill dropcap / first-letter effects ---- */
.article-content p::first-letter{
  float: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- Headings ---- */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6{
  color: var(--ac-text) !important;
  line-height: 1.25;
  margin: 1.5rem 0 .75rem;
  font-weight: 700;
}

.article-content h1{ font-size: 2rem; }
.article-content h2{ font-size: 1.6rem; }
.article-content h3{ font-size: 1.35rem; }
.article-content h4{ font-size: 1.15rem; }
.article-content h5{ font-size: 1.05rem; }
.article-content h6{ font-size: .95rem; opacity: .95; }

/* ---- Strong / emphasis ---- */
.article-content strong,
.article-content b{ font-weight: 800; }

.article-content em,
.article-content i{ font-style: italic; }

/* ---- Links ---- */
.article-content a{
  color: var(--ac-link) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content a:hover{ opacity: .9 !important; }

/* ---- Images ---- */
.article-content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: .75rem;
}

/* Optional: captions */
.article-content figure{ margin: 1rem 0; }
.article-content figcaption{
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--ac-muted) !important;
  text-align: center;
}

/* ---- Blockquote (lebih kecil & rapi) ---- */
.article-content blockquote{
  margin: .75rem 0;
  padding: .65rem .85rem;
  border-left: 4px solid var(--ac-border) !important;
  background: var(--ac-quote-bg) !important;
  border-radius: .75rem;
  font-size: .95rem;
  line-height: 1.6;
  font-style: normal;
}

.article-content blockquote,
.article-content blockquote *{
  color: var(--ac-muted) !important;
}

.article-content blockquote p{ margin: .25rem 0; }

.article-content blockquote cite,
.article-content blockquote footer{
  display: block;
  margin-top: .35rem;
  font-size: .85em;
  opacity: .9;
}

/* ---- Lists ---- */
.article-content ul,
.article-content ol{
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}
.article-content ul{ list-style: disc; }
.article-content ol{ list-style: decimal; }
.article-content li{ margin: .35rem 0; }

.article-content li > ul,
.article-content li > ol{
  margin-top: .5rem;
  margin-bottom: 0;
}

/* ---- Horizontal rule ---- */
.article-content hr{
  border: 0;
  border-top: 1px solid var(--ac-border) !important;
  margin: 1.5rem 0;
}

/* ---- Tables ---- */
.article-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  overflow: hidden;
  border-radius: .75rem;
}

.article-content th,
.article-content td{
  border: 1px solid var(--ac-border) !important;
  padding: .6rem .7rem;
  vertical-align: top;
}

.article-content thead th{
  font-weight: 800;
  background: var(--ac-quote-bg) !important;
}

.article-content tbody tr:hover td{
  background: var(--ac-quote-bg) !important;
}

/* ---- Code / Pre ---- */
.article-content :not(pre) > code,
.article-content kbd,
.article-content samp{
  background: var(--ac-code-bg) !important;
  border: 1px solid var(--ac-border) !important;
  border-radius: .45rem;
  padding: .15rem .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono","Courier New", monospace;
  font-size: .95em;
}

.article-content pre{
  background: var(--ac-code-bg) !important;
  border: 1px solid var(--ac-border) !important;
  border-radius: .75rem;
  padding: .9rem 1rem;
  overflow: auto;
  margin: 1.25rem 0;
}

.article-content pre code{
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ---- Embeds ---- */
.article-content iframe,
.article-content video{
  max-width: 100%;
  display: block;
  margin: 1rem auto;
  border-radius: .75rem;
}

/* ==== Title clamp helpers ==== */
.text-truncate-2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.text-truncate-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.text-truncate-5{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* Inline Suggest (blockquote style) */
.article-inline-suggest{
  border-left: 4px solid var(--color-primary, #2563eb);
  padding-left: 12px;
}

.article-inline-suggest__head{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.article-inline-suggest__kicker{
  font-weight:700;
  font-size: 0.95rem;
}

.article-inline-suggest__note{
  font-size: .75rem;
  opacity: .65;
}

.article-inline-suggest__item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.02);
}

.dark .article-inline-suggest__item{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.article-inline-suggest__link{
  display:flex;
  gap:12px;
  padding:10px;
  text-decoration: none !important;
  
  color: inherit;
}

.article-inline-suggest__thumb{
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.06);
}

.dark .article-inline-suggest__thumb{
  background: rgba(255,255,255,.08);
}

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

.article-inline-suggest__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.article-inline-suggest__topline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.75rem;
  opacity:.75;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.article-inline-suggest__cat{
  font-weight:700;
  /* text-transform:uppercase; */
  letter-spacing:.04em;
}

.article-inline-suggest__dot{
  opacity:.6;
}

.article-inline-suggest__title{
  font-weight:700;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color: var(--ac-muted);
  /* text-decoration: none !important; */
}

.article-inline-suggest__item:hover{
  transform: translateY(-1px);
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
  border-color: rgba(235, 219, 37, 0.35);
}

.article-inline-suggest__item:hover .article-inline-suggest__title{
  color: var(--color-primary, #ebac25) !important;
}

/* paksa warna link sugget ikut warna teks, bukan warna link artikel */
.article-inline-suggest a,
.article-inline-suggest a:visited{
  color: inherit !important;
  text-decoration: none !important;
}

.article-inline-suggest__title{
  color: inherit;
}


/* === Article pagination === */
.article-page { display: none; }
.article-page.is-active { display: block; }

.article-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .75rem;
  margin: 1rem 0;
}

.article-pagination__info {
  font-size: .875rem;
  opacity: .8;
}

.article-pagination__dots {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.apage-dot {
  min-width: 28px;
  height: 28px;
  padding: 0 .45rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: transparent;
  font-size: .8rem;
}
.apage-dot.is-active {
  border-color: currentColor;
  font-weight: 600;
}


/* =========================================================
   FIXED BACKGROUND AD STAGE
   - iklan jadi background
   - spacer = "window" setinggi iklan (NO blank space)
   - konten (sheet) nutupin iklan
========================================================= */

.article-fixed-ad{
  position: relative;
  isolation: isolate;
  --fixed-top: 90px;      /* akan dioverride JS sesuai tinggi header */
  --ad-h: 320px;          /* default, akan dioverride JS sesuai tinggi iklan */
}

/* iklan di belakang */
.article-fixed-ad__sticky{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.article-fixed-ad.is-fixed .article-fixed-ad__sticky{
  position: fixed;
  top: var(--fixed-top);
}

.article-fixed-ad.is-bottom .article-fixed-ad__sticky{
  position: absolute;
  top: auto;
  bottom: 0;
}

/* spacer = window setinggi box iklan (anti blank) */
.article-fixed-ad__spacer{
  height: var(--ad-h);
  background: transparent !important;
}

/* cover transparan (biar window keliatan) */
.article-fixed-ad__cover{
  position: relative;
  z-index: 2;
  background: transparent !important;
}

/* sheet = konten yang nutupin iklan */
.article-fixed-ad__sheet{
  position: relative;
  z-index: 2;
  background: #fff;
  padding-top: 12px;
}
:where(.uc-dark, .dark) .article-fixed-ad__sheet{
  background: #000;
}

/* bar */
.article-fixed-ad__bar{
  background: #000d11;
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
  padding: 12px 14px;
  border-radius: 12px 12px 0 0;
}

/* frame */
.article-fixed-ad__frame{
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
}
:where(.uc-dark, .dark) .article-fixed-ad__frame{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* media */
.article-fixed-ad__frame a{ display:block; }
.article-fixed-ad__frame img,
.article-fixed-ad__frame video,
.article-fixed-ad__frame iframe{
  width: 100%;
  display: block;
  border: 0;
  height: min(370vh, 470px);   /* desktop */
  object-fit: cover;
}

@media (max-width: 640px){
  .article-fixed-ad__frame img,
  .article-fixed-ad__frame video,
  .article-fixed-ad__frame iframe{
    height: min(200vh, 470px); /* mobile (lebih pendek biar enak) */
  }
}


/* ===============================
   SIDE RAIL AD (2 kolom, desktop only)
=============================== */

.article-rail-ad{
  position: sticky;
  top: 120px; /* sesuaikan dengan header */
}

.article-rail-ad__frame{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
}
:where(.uc-dark) .article-rail-ad__frame{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.article-rail-ad__frame a{ display:block; }

/* ✅ TINGGI GAMBAR IKLAN SAMPING: ubah di sini */
.article-rail-ad__frame img,
.article-rail-ad__frame video{
  width: 100%;
  display: block;
  height: min(78vh, 640px); /* <-- ATUR TINGGI DI SINI */
  max-height: calc(100vh - 170px);
  object-fit: cover;
}



.fb-react{
  --fb-text: rgba(0,0,0,.85);
  --fb-muted: rgba(0,0,0,.65);
  --fb-border: rgba(0,0,0,.12);
  --fb-surface: rgba(0,0,0,.03);
  --fb-surface-2: rgba(0,0,0,.05);
  --fb-menu: rgba(255,255,255,.92);
  --fb-shadow: 0 14px 40px rgba(0,0,0,.18);
}


.uc-dark .fb-react,
.dark .fb-react{
  --fb-text: rgba(255,255,255,.92);
  --fb-muted: rgba(255,255,255,.70);
  --fb-border: rgba(255,255,255,.16);
  --fb-surface: rgba(255,255,255,.06);
  --fb-surface-2: rgba(255,255,255,.10);
  --fb-menu: rgba(20,20,20,.88);
  --fb-shadow: 0 18px 46px rgba(0,0,0,.55);
}

/* MAIN BUTTON */
.fb-react__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.02);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.fb-react__btn:hover{
  background: rgba(0,0,0,.04);
}

.fb-react__btn:active{
  transform: translateY(1px);
}

.dark .fb-react__btn{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.dark .fb-react__btn:hover{
  background: rgba(255,255,255,.09);
}

.fb-react__icon{ font-size: 18px; line-height: 1; }
.fb-react__text{ font-weight: 700; font-size: 13px; letter-spacing: .2px; }

/* SELECTED STATE */
.fb-react__btn.is-selected{
  border-color: rgba(13,110,253,.45);
  background: rgba(13,110,253,.10);
  box-shadow: 0 6px 18px rgba(13,110,253,.18);
}
.dark .fb-react__btn.is-selected{
  border-color: rgba(13,110,253,.55);
  background: rgba(13,110,253,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* MENU */
.fb-react__menu{
  position: absolute;
  left: 0;
  bottom: 100%;
  transform: translateY(-12px) scale(.96);
  opacity: 0;
  pointer-events: none;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 50;
}

.dark .fb-react__menu{
  background: rgba(20,20,20,.88);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}

.fb-react.is-open .fb-react__menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-12px) scale(1);
}

/* MENU ITEM */
.fb-react__item{
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  transition: transform .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.fb-react__emoji{ font-size: 22px; line-height: 1; transform: translateY(1px); }

.fb-react__item:hover{
  transform: translateY(-6px) scale(1.18);
  background: rgba(0,0,0,.04);
}
.dark .fb-react__item:hover{ background: rgba(255,255,255,.08); }

.fb-react__item:active{
  transform: translateY(-2px) scale(1.08);
}

/* META */
.fb-react__meta{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.fb-react__total{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  opacity: .75;
}

.fb-react__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(13,110,253,.65);
}

/* COUNTS AS CHIPS */
.fb-react__counts{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fb-react__chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: 12px;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}

.fb-react__chip:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.14);
}

.dark .fb-react__chip{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.dark .fb-react__chip:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}

.fb-react__chip-emoji{ font-size: 14px; line-height: 1; }
.fb-react__chip-count{ font-weight: 700; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .fb-react__menu, .fb-react__btn, .fb-react__item, .fb-react__chip{
    transition: none !important;
  }
}



/* ===========================
   IG-LIKE MAIN BUTTON FEEL
   =========================== */
.fb-react{
  --fb-accent: rgba(13,110,253,.95);
  --fb-accent-soft: rgba(13,110,253,.12);
}

.fb-react__btn{
  position: relative;
  border-radius: 999px;
  border: 1px solid var(--fb-border);
  background: color-mix(in srgb, var(--fb-surface) 70%, transparent);
}

.fb-react__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 35%, transparent);
}

.fb-react__btn.is-selected{
  border-color: color-mix(in srgb, var(--fb-accent) 55%, var(--fb-border));
  background: var(--fb-accent-soft);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--fb-accent) 22%, transparent);
}

/* Optional: “ring” halus ala IG */
.fb-react__btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,0,128,.35), transparent 55%),
              radial-gradient(circle at 80% 30%, rgba(255,180,0,.28), transparent 60%),
              radial-gradient(circle at 20% 90%, rgba(0,180,255,.22), transparent 55%);
  transition: opacity .15s ease;
}
.fb-react__btn:hover::before{ opacity:.55; }

/* ===========================
   META SUMMARY (EMOJI STACK + TOTAL)
   =========================== */
.fb-react__meta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: unset;
}

.fb-react__summary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--fb-muted);
  -webkit-tap-highlight-color: transparent;
}
.fb-react__summary:hover{
  background: color-mix(in srgb, var(--fb-surface-2) 75%, transparent);
  color: var(--fb-text);
}
.fb-react__summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 25%, transparent);
}

.fb-react__stack{
  display:flex;
  align-items:center;
}
.fb-react__stack-emoji{
  width: 20px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fb-menu) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--fb-border) 85%, transparent);
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.fb-react__stack-emoji + .fb-react__stack-emoji{
  margin-left: -7px; /* overlap ala IG */
}

.fb-react__summary-text{
  display:flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.fb-react__summary-text [data-react-total]{
  font-weight: 800;
  color: var(--fb-text);
}
.fb-react__summary-label{
  opacity: .8;
}

/* ===========================
   POPOVER BREAKDOWN (RAPI, RESPONSIVE)
   =========================== */
.fb-react__popover{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  z-index: 60;
}

.fb-react.is-open .fb-react__popover{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .14s ease, transform .14s ease;
}

.fb-react__popover-inner{
  min-width: 220px;
  max-width: min(320px, 80vw);
  background: var(--fb-menu);
  border: 1px solid var(--fb-border);
  border-radius: 14px;
  box-shadow: var(--fb-shadow);
  padding: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fb-react__row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.fb-react__row:hover{
  background: color-mix(in srgb, var(--fb-surface-2) 80%, transparent);
}

.fb-react__row-emoji{ font-size: 16px; line-height: 1; }
.fb-react__row-label{
  flex: 1;
  font-size: 13px;
  color: var(--fb-text);
  opacity: .88;
}
.fb-react__row-count{
  font-weight: 800;
  font-size: 13px;
  color: var(--fb-text);
}


/* COMMENT */
/* list */
.comment-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.comment-item{
  padding: .75rem 0;
}

/* main row */
.comment-row{ display:flex; gap:.6rem; align-items:flex-start; }
.comment-avatar{
  width:34px; height:34px; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.8);
  font-weight:700;
  font-size:.85rem;
}
.dark .comment-avatar{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}

/* bubble */
.comment-body{ flex:1; min-width:0; }
.comment-bubble{
  border-radius:14px;
  padding:.55rem .7rem;
  background: rgba(0,0,0,.04);
}
.dark .comment-bubble{ background: rgba(255,255,255,.07); }

.comment-head{ display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.comment-author{ font-weight:700; font-size:.95rem; max-width:65%; }
.comment-time{ font-size:.75rem; opacity:.65; }
.comment-text{ margin-top:.25rem; font-size:.95rem; line-height:1.35; opacity:.92; }

/* actions */
.comment-actions{ margin-top:.25rem; padding-left:.25rem; display:flex; gap:.75rem; }
.comment-action-link{
  display:inline-flex;
  align-items:center;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.8rem;
  text-decoration:none;
  opacity:.85;
  background: rgba(0,0,0,.04);
}

.comment-action-link:hover{
  opacity:1;
}

.dark .comment-action-link{
  background: rgba(255,255,255,.08);
}

/* reply box */
.comment-reply-box{ margin-top:.5rem; }
.comment-reply-box.is-hidden{ display:none; }

/* form */
.comment-form{ display:flex; flex-direction:column; gap:.4rem; }
.comment-input{
  width:100%;
  border-radius:12px;
  padding:.55rem .7rem;
  border:1px solid rgba(0,0,0,.12);
  background: transparent;
  outline:none;
}
.dark .comment-input{ border-color: rgba(255,255,255,.20); color: rgba(255,255,255,.92); }
.comment-input:focus{ border-color: rgba(13,110,253,.55); box-shadow: 0 0 0 3px rgba(13,110,253,.12); }
.comment-form-actions{ display:flex; gap:.5rem; align-items:center; }

/* children (replies) */
.comment-children{
  list-style:none;
  margin:.55rem 0 0 1.2rem;
  padding:0 0 0 .8rem;
  border-left: 1px solid rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:.6rem;
}
.dark .comment-children{ border-left-color: rgba(255,255,255,.12); }



/* =========================================================
   DARK/LIGHT CONSISTENCY PATCH (paste at END of show.css)
   - support .uc-dark AND .dark
   - rapihin token dark
========================================================= */

:where(.uc-dark, .dark){
  /* kalau kamu mau browser menyesuaikan form control */
  color-scheme: dark;
}

/* ---- Fix token dark biar konsisten dgn light ---- */
:where(.uc-dark, .dark){
  /* border jangan jadi putih polos (biar “nyambung” dengan style light) */
  --ac-border: rgba(254, 186, 0, .42);     /* kuning tapi lebih soft */
  --ac-code-bg: rgba(255,255,255,.08);     /* jangan kuning pekat */
}

/* content penutup iklan: pakai token (biar pas dark/light) */
.article-fixed-ad__content{
  background: #fff !important;
}
:where(.uc-dark, .dark) .article-fixed-ad__content{
  background: #000000 !important;
}

/* =========================================================
   INLINE SUGGEST: ganti .dark -> .uc-dark juga
========================================================= */
:where(.uc-dark, .dark) .article-inline-suggest__item{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
:where(.uc-dark, .dark) .article-inline-suggest__thumb{
  background: rgba(255,255,255,.08);
}

/* title jangan “nyasar” jadi muted / beda di dark */
.article-inline-suggest__title{
  color: inherit !important;
}
.article-inline-suggest__item:hover .article-inline-suggest__title{
  /* pakai primary theme biar konsisten */
  color: var(--color-primary, #2563eb) !important;
}

/* =========================================================
   FB REACT: selector dark kamu campur (.dark) -> bikin setara
========================================================= */

/* pastikan menu absolute nempel ke komponen, bukan ke body */
.fb-react{
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* tombol */
:where(.uc-dark, .dark) .fb-react__btn{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
:where(.uc-dark, .dark) .fb-react__btn:hover{
  background: rgba(255,255,255,.09);
}

/* selected */
:where(.uc-dark, .dark) .fb-react__btn.is-selected{
  border-color: rgba(13,110,253,.55);
  background: rgba(13,110,253,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* menu item hover */
:where(.uc-dark, .dark) .fb-react__item:hover{
  background: rgba(255,255,255,.08);
}

/* chips */
:where(.uc-dark, .dark) .fb-react__chip{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
:where(.uc-dark, .dark) .fb-react__chip:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}


.fb-react__icon,
.fb-react__emoji,
.fb-react__stack-emoji,
.fb-react__row-emoji{
  font-family: 'Unicons' !important;
}
/* =========================================================
   COMMENTS: kamu pakai .dark doang -> tambahin .uc-dark
========================================================= */
:where(.uc-dark, .dark) .comment-avatar{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}
:where(.uc-dark, .dark) .comment-bubble{
  background: rgba(255,255,255,.07);
}
:where(.uc-dark, .dark) .comment-action-link{
  background: rgba(255,255,255,.08);
}
:where(.uc-dark, .dark) .comment-input{
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}
:where(.uc-dark, .dark) .comment-children{
  border-left-color: rgba(255,255,255,.12);
}



.post-meta__sep { opacity: .75; }

.post-chip{
  border: 1px solid rgba(var(--bs-primary-rgb), .22);
  background: rgba(var(--bs-primary-rgb), .06);
  color: var(--bs-primary);
}

.post-badge{
  border-radius: 999px;
  padding: .18rem .45rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.post-badge--danger{
  background: rgba(var(--bs-danger-rgb), .12);
  color: var(--bs-danger);
  border-color: rgba(var(--bs-danger-rgb), .18);
}

.post-badge--primary{
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .18);
}

/* Source biar bisa mengecil + truncate */
.post-source { min-width: 0; }



.oc-divider{
  height: 1px;
  background: var(--oc-border);
  opacity: .9;          /* biar kebaca */
  margin: 8px 0;        /* jarak atas-bawah */
}