/* ============================================================
   Gold block: gaya "aktif/unggulan" bersama (chip aktif, tag Paling ramai, tab aktif).
   Satu sumber untuk semua halaman. Dimuat PALING AKHIR supaya mengalahkan modern.css / tx2.css / team.css.
   Bahasa visual: blok emas Minecraft (bevel terang di atas-kiri, gelap di bawah-kanan, tepi bawah tebal).
   ============================================================ */
:root{--gold-hi:#FFE9A0;--gold:#FFC933;--gold-lo:#E8A410;--gold-edge:#6b4300;--gold-ink:#2a1a00}

.tx-chipbar .chip.active,.tx-chips .chip.active,.tx-subnav .chip.active,.tx-teampage .tx-chips .chip.active,
.chip.active,.tx-tp.hot{
  position:relative;
  background:linear-gradient(180deg,var(--gold-hi) 0,var(--gold) 38%,var(--gold) 62%,var(--gold-lo) 100%)!important;
  border:2px solid var(--gold-edge)!important;
  border-radius:3px!important;
  color:var(--gold-ink)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.65),
    inset -2px -3px 0 rgba(140,84,0,.45),
    0 3px 0 var(--gold-edge),
    0 8px 18px -6px rgba(255,201,51,.35)!important;
  transform:translateY(-1px);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
/* kilau piksel di pojok kiri-atas */
.tx-chipbar .chip.active::after,.tx-chips .chip.active::after,.tx-subnav .chip.active::after,.tx-tp.hot::after{
  content:"";position:absolute;top:3px;left:3px;width:4px;height:4px;background:rgba(255,255,255,.85);
  box-shadow:4px 0 0 rgba(255,255,255,.35),0 4px 0 rgba(255,255,255,.35);pointer-events:none}

.tx-chipbar .chip.active:hover,.tx-chips .chip.active:hover,.tx-subnav .chip.active:hover,.tx-tp.hot:hover{
  filter:brightness(1.06);color:var(--gold-ink)!important;border-color:var(--gold-edge)!important}
.tx-chipbar .chip.active:active,.tx-chips .chip.active:active,.tx-subnav .chip.active:active,.tx-tp.hot:active{
  transform:translateY(2px);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.25),0 1px 0 var(--gold-edge)!important}

/* Tag "Paling ramai": ikon api piksel + lencana jumlah */
.tx-tp.hot{padding:8px 12px 8px 36px;font-size:13px;margin-bottom:3px}
.tx-tp.hot::before{
  content:"";position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23b3260e' d='M4 0h1v2h1v1h1v3H6v1H2V6H1V4h1V3h1V1h1z'/%3E%3Cpath fill='%23ff6a1a' d='M4 1h1v2h1v3H5v1H3V6H2V4h1V3h1z'/%3E%3Cpath fill='%23ffd23f' d='M4 4h1v2H3V5h1z'/%3E%3C/svg%3E") center/contain no-repeat;
  image-rendering:pixelated}
.tx-tp.hot b{
  background:var(--gold-ink);color:var(--gold)!important;padding:2px 7px;border-radius:2px;font-size:11px;line-height:1.4;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
.tx-tp.hot:hover b{color:var(--gold-hi)!important}

/* fokus tetap terlihat (aksesibilitas) */
.tx-chips .chip.active:focus-visible,.tx-tp.hot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* chip tidak aktif: tetap sama seperti sebelumnya, hanya diberi tepi bawah agar serasi dengan blok emas */
.tx-chipbar .chip:not(.active),.tx-chips .chip:not(.active){box-shadow:0 2px 0 #0a0a0a}

@media (prefers-reduced-motion:reduce){.chip.active,.tx-tp.hot{transition:none}}
@media (forced-colors:active){.chip.active,.tx-tp.hot{border-color:Highlight!important;background:Highlight!important;color:HighlightText!important;box-shadow:none!important}}