/* =====================================================================
   BX ARTIKEL (daftar) — pembuka, artikel utama terbaru, kategori, kisi kartu, halaman
   Data dari menu Pos. Kategori & halaman = link biasa (?kategori=...&hal=2), ramah SEO.
   Kartu & meta (.bx-pgrid, .bx-pcard, .bx-pmeta) juga dipakai di halaman isi artikel ("More stories").
   ===================================================================== */

.bx-v2.bx-posts{display:block;background:var(--bx-white);color:var(--bx-choc);padding-bottom:clamp(72px,9vw,144px)}

/* ---------- Bagian atas (judul + artikel utama) krem, daftar artikel di bawahnya putih (bisa dibalik) ---------- */
.bx-v2 .bx-posts__top{background:var(--bx-cream)}
.bx-v2 .bx-posts__top--feat{padding-bottom:clamp(56px,6vw,104px)}
/* Pilihan "Atas putih, daftar artikel krem" */
.bx-v2.bx-posts--top-white{background:var(--bx-cream)}
.bx-v2.bx-posts--top-white .bx-posts__top{background:var(--bx-white)}

/* ---------- Pembuka (pola sama dengan Karir; lebar sama dengan isi di bawahnya) ---------- */
.bx-v2 .bx-posts__intro{max-width:calc(1560px + var(--bx-gut) * 2);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,28px);align-items:end;padding:clamp(56px,8vw,128px) var(--bx-gut) clamp(28px,3.4vw,56px)}
.bx-v2 .bx-posts__kicker{grid-column:1/-1;color:var(--bx-bronze);margin-bottom:clamp(18px,2.4vw,32px)}
.bx-v2 .bx-posts__title{grid-column:1/9;font-family:var(--bx-font);font-size:1rem;font-weight:900;letter-spacing:-.06em;line-height:.82;text-transform:uppercase;color:var(--bx-choc)}
.bx-v2 .bx-posts__it{font-size:calc(clamp(2rem,6.2vw,6.6rem) * var(--bx-fit,1));font-weight:300;letter-spacing:-.035em;text-transform:none;padding-left:.06em;margin-bottom:.04em}
.bx-v2 .bx-posts__big{font-size:calc(clamp(3.6rem,14vw,14.5rem) * var(--bx-fit,1));white-space:nowrap}
.bx-v2 .bx-posts__lead{grid-column:9/13;padding-bottom:clamp(6px,1vw,18px);font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;max-width:26ch}

/* ---------- Daftar (tujuan link kategori & halaman: tidak tertutup header saat dibuka) ---------- */
/* .bx-posts__in.bx-posts__list: lebih kuat dari shorthand padding .bx-posts__in */
.bx-v2 .bx-posts__in.bx-posts__list{padding-top:clamp(48px,5.5vw,88px);scroll-margin-top:var(--bx-nav-h)}

/* ---------- Kategori (di bawah artikel utama, menyaring daftar di bawahnya) ---------- */
.bx-v2 .bx-posts__cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.4vw,52px)}
.bx-v2.bx-posts a.bx-chip{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;padding:12px 18px;border:1px solid var(--bx-line);border-radius:var(--bx-r-round);font-family:var(--bx-font);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--bx-choc);transition:background-color var(--bx-t) var(--bx-ease),color var(--bx-t) var(--bx-ease),border-color var(--bx-t) var(--bx-ease)}
.bx-v2.bx-posts a.bx-chip:is(:hover,:focus-visible){border-color:var(--bx-choc)}
.bx-v2.bx-posts a.bx-chip[aria-current="page"]{background-color:var(--bx-choc);border-color:var(--bx-choc);color:var(--bx-cream)}

/* ---------- Artikel utama ---------- */
.bx-v2 .bx-posts__in{max-width:calc(1560px + var(--bx-gut) * 2);margin:0 auto;padding:0 var(--bx-gut)}
.bx-v2 a.bx-pfeat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,28px);align-items:end}
.bx-v2 .bx-pfeat__img{grid-column:1/9;aspect-ratio:3/2}
.bx-v2 .bx-pfeat__txt{grid-column:9/13;padding-bottom:4px}
.bx-v2 .bx-pfeat__title{margin-top:14px;font-size:clamp(1.8rem,3.2vw,3.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.04;color:var(--bx-choc);transition:color var(--bx-t) var(--bx-ease)}
.bx-v2 .bx-pfeat__ex{margin-top:16px;max-width:36ch;color:var(--bx-ink-soft);font-size:1.05rem;line-height:1.5}
.bx-v2 .bx-pfeat__more{margin-top:clamp(18px,2vw,28px)}
.bx-v2 a.bx-pfeat:is(:hover,:focus-visible) .bx-pfeat__title{color:var(--bx-bronze)}
.bx-v2 a.bx-pfeat:is(:hover,:focus-visible) .bx-link .bx-arr{transform:translateX(.4em)}

/* ---------- Meta (kategori · tanggal · lama baca) ---------- */
.bx-v2 .bx-pmeta{display:flex;flex-wrap:wrap;gap:.4em 1.2em;color:var(--bx-ink-soft);font-size:.72rem;font-weight:700;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}
.bx-v2.bx-v2 .bx-pmeta a{color:var(--bx-bronze);transition:color var(--bx-t) var(--bx-ease)}
.bx-v2.bx-v2 .bx-pmeta a:is(:hover,:focus-visible){color:var(--bx-orange)}

/* ---------- Kisi kartu ---------- */
.bx-v2 .bx-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);row-gap:clamp(48px,5vw,80px)}
.bx-v2 a.bx-pcard{display:block}
.bx-v2 .bx-pcard__img{aspect-ratio:3/2}
.bx-v2 .bx-pcard .bx-pmeta{margin-top:18px}
.bx-v2 .bx-pcard__title{margin-top:10px;max-width:24ch;font-size:clamp(1.2rem,1.7vw,1.55rem);font-weight:500;letter-spacing:-.022em;line-height:1.18;color:var(--bx-choc);transition:color var(--bx-t) var(--bx-ease)}
.bx-v2 a.bx-pcard:is(:hover,:focus-visible) .bx-pcard__title{color:var(--bx-bronze)}

/* Foto kartu: zoom pelan saat disorot */
.bx-v2 .bx-pfeat__img>img,.bx-v2 .bx-pcard__img>img{transition:transform 1s var(--bx-ease-out)}
.bx-v2 a.bx-pfeat:is(:hover,:focus-visible) .bx-pfeat__img>img,.bx-v2 a.bx-pcard:is(:hover,:focus-visible) .bx-pcard__img>img{transform:scale(1.035)}

.bx-v2 .bx-posts__empty{padding:clamp(40px,5vw,80px) 0;color:var(--bx-ink-soft);font-size:1.1rem;border-top:1px solid var(--bx-line)}
.bx-v2.bx-posts .bx-posts__empty a{color:var(--bx-choc);text-decoration:underline;text-decoration-color:var(--bx-orange);text-underline-offset:.2em}

/* ---------- Halaman ---------- */
.bx-v2 .bx-pager{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px);margin-top:clamp(56px,7vw,112px)}
.bx-v2 .bx-pager__n{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border-radius:var(--bx-r-round);font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--bx-choc);transition:background-color var(--bx-t) var(--bx-ease),color var(--bx-t) var(--bx-ease)}
.bx-v2.bx-posts a.bx-pager__n:is(:hover,:focus-visible){color:var(--bx-orange)}
.bx-v2.bx-posts .bx-pager__n[aria-current="page"]{background:var(--bx-choc);color:var(--bx-cream)}
.bx-v2 .bx-pager__gap{color:var(--bx-ink-soft)}
.bx-v2 .bx-pager__of{display:none;min-width:5.5em;text-align:center;font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--bx-choc)}
.bx-v2 .bx-round{display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border:1px solid currentColor;border-radius:var(--bx-r-round);font-size:1.25rem;line-height:1;color:var(--bx-choc);transition:background-color var(--bx-t) var(--bx-ease),color var(--bx-t) var(--bx-ease),border-color var(--bx-t) var(--bx-ease)}
.bx-v2.bx-v2 a.bx-round:is(:hover,:focus-visible){background-color:var(--bx-choc);border-color:var(--bx-choc);color:var(--bx-cream)}
.bx-v2 .bx-round[aria-disabled="true"]{opacity:.28;pointer-events:none}

/* ---------- Tablet & HP ---------- */
@media (max-width:1023px){
  .bx-v2 .bx-posts__title{grid-column:1/-1}
  .bx-v2 .bx-posts__lead{grid-column:1/9;margin-top:clamp(24px,4vw,40px)}
  .bx-v2 .bx-pfeat__img{grid-column:1/-1}
  .bx-v2 .bx-pfeat__txt{grid-column:1/10;margin-top:clamp(20px,3vw,32px)}
  .bx-v2 .bx-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .bx-v2 .bx-posts__lead{grid-column:1/-1}
  .bx-v2 .bx-posts__big{font-size:calc(clamp(3.4rem,19vw,8rem) * var(--bx-fit,1))}
  .bx-v2 .bx-posts__it{font-size:calc(clamp(1.9rem,9.6vw,4rem) * var(--bx-fit,1))}
  .bx-v2 .bx-posts__cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--bx-gut) * -1);padding-right:var(--bx-gut)}
  .bx-v2 .bx-posts__cats::-webkit-scrollbar{display:none}
  .bx-v2.bx-posts a.bx-chip{flex:0 0 auto}
  .bx-v2 .bx-pfeat__txt{grid-column:1/-1}
  .bx-v2 .bx-pgrid{grid-template-columns:minmax(0,1fr)}
  .bx-v2 .bx-pager{gap:16px}
  .bx-v2 .bx-pager__n,.bx-v2 .bx-pager__gap{display:none}
  .bx-v2 .bx-pager__of{display:block}
}