/*
 * public_html/assets/css/berita.css
 * Halaman feed berita (berita.php). Dimuat SETELAH landing.css & hero-halaman.css.
 * Isi: 1. sorotan grid asimetris  2. tata letak + alat (tab kategori, Grid/List)  3. kartu .ya-bk (dipakai juga
 * "Artikel terkait" di detail)  4. sidebar (cari cepat, terpopuler, arsip, tag)  5. gerak & aksesibilitas.
 * Warna dari token theme.css (--ya-arena-*, --ya-neon-*, --ya-tinta-rgb, --ya-putih-rgb, --ya-lp-bayangan, --ya-berita-*)
 * + --ya-kat (inline, warna kategori dari master_kategori_berita.warna).
 * Mode List: html[data-ya-berita-tampilan="list"] (dipasang skrip kecil di berita.php & berita.js).
 */

/* =====================================================================
   1. SOROTAN
   ===================================================================== */
.ya-bt-sorotan,
.ya-bt { scroll-margin-top: 80px; }
.ya-bt-sorotan[hidden] { display: none; }
.ya-bt-sorotan:not([hidden]) + .ya-bt { padding-top: clamp(1rem, 3vw, 2rem); }

.ya-bt-sorot { display: grid; gap: 1rem; }
@media (max-width: 991.98px) {   /* HP & tablet: baris geser, kartu berikutnya mengintip */
    .ya-bt-sorot--2,
    .ya-bt-sorot--3 {
        grid-auto-flow: column; grid-auto-columns: min(86%, 520px); gap: .875rem;
        margin: 0 -1rem; padding: .25rem 1rem 1.25rem;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
        scrollbar-width: none;
    }
    .ya-bt-sorot::-webkit-scrollbar { display: none; }
}
@media (min-width: 992px) {
    .ya-bt-sorot--3 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(250px, 1fr)); gap: 1.25rem; }
    .ya-bt-sorot--3 .ya-bs--utama { grid-row: 1 / span 2; }
    .ya-bt-sorot--2 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); min-height: 460px; gap: 1.25rem; }
    .ya-bt-sorot--1 .ya-bs--utama { min-height: 480px; }
}

.ya-bs {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: flex-end; min-height: 300px;
    border-radius: 1.5rem; background: var(--ya-arena-2); color: var(--ya-berita-teks-foto);
    box-shadow: 0 30px 60px -36px var(--ya-lp-bayangan), 0 0 0 1px rgba(var(--ya-tinta-rgb), .08);
    scroll-snap-align: start;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
.ya-bs--utama { min-height: 380px; }
.ya-bs-gambar {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ya-bs::before {   /* lapisan gelap supaya teks putih selalu terbaca */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(var(--ya-berita-scrim-rgb), 0) 20%, rgba(var(--ya-berita-scrim-rgb), .55) 55%, rgba(var(--ya-berita-scrim-rgb), .94) 100%);
}
.ya-bs::after {   /* garis jersey: warna kategori + biru, melebar saat disentuh */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--ya-kat, var(--ya-neon-oranye)) 0 40%, transparent 40% 43%, var(--ya-neon-biru) 43%);
    transform: scaleX(.22); transform-origin: left center;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ya-bs-isi { display: flex; flex-direction: column; gap: .625rem; padding: clamp(1.125rem, 3vw, 2rem); }
.ya-bs-judul { margin: 0; font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.ya-bs--utama .ya-bs-judul { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-style: italic; letter-spacing: -.03em; line-height: 1.12; }
.ya-bs-judul a { color: inherit; text-decoration: none; }
.ya-bs-judul a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 1.5rem; }
.ya-bs-judul a:focus-visible { outline: none; }
.ya-bs-judul a:focus-visible::after { outline: 3px solid var(--ya-neon-biru); outline-offset: -3px; }
.ya-bs-ringkas {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 40rem; margin: 0; font-size: 1rem; line-height: 1.55; color: rgba(var(--ya-putih-rgb), .84);
}
.ya-bs-meta { margin: 0; font-size: .8125rem; font-weight: 500; color: rgba(var(--ya-putih-rgb), .74); }
@media (max-width: 575.98px) { .ya-bs-ringkas { -webkit-line-clamp: 2; font-size: .9375rem; } }

/* Badge kategori (di atas foto: sorotan & kartu) */
.ya-bt-kat {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem .3rem .55rem; border-radius: 999px;
    border: 1px solid rgba(var(--ya-putih-rgb), .18); background: rgba(var(--ya-berita-scrim-rgb), .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ya-berita-teks-foto);
}
.ya-bt-kat::before {
    content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--ya-kat, var(--ya-neon-oranye)); box-shadow: 0 0 10px var(--ya-kat, var(--ya-neon-oranye));
}

/* =====================================================================
   2. TATA LETAK + ALAT
   HP: cari → daftar → sidebar (.ya-bt-kanan display: contents). PC: daftar | kanan (cari + sidebar).
   ===================================================================== */
.ya-bt-tata { display: grid; gap: 1.5rem; grid-template-areas: "cari" "utama" "samping"; }
.ya-bt-kanan { display: contents; }
.ya-bt-cari { grid-area: cari; }
.ya-bt-utama { grid-area: utama; min-width: 0; }
.ya-bt-samping { grid-area: samping; display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 992px) {
    .ya-bt-tata { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "utama kanan"; gap: 2.5rem; align-items: start; }
    .ya-bt-kanan { grid-area: kanan; display: grid; gap: 1.25rem; }
    .ya-bt-cari, .ya-bt-samping { grid-area: auto; }
}

.ya-bt-alat { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.ya-bt-tab {
    flex: 1; min-width: 0; display: flex; gap: .5rem;
    margin: -.25rem; padding: .25rem; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
}
.ya-bt-tab::-webkit-scrollbar { display: none; }
.ya-bt-tab a {
    flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem;
    border: 1px solid rgba(var(--ya-tinta-rgb), .14); border-radius: 999px; background: var(--ya-arena-kaca);
    font-size: .875rem; font-weight: 600; color: var(--ya-arena-teks-2); text-decoration: none; white-space: nowrap;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.ya-bt-tab a::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ya-kat, var(--ya-neon-biru)); }
.ya-bt-tab a small { font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .7; }
.ya-bt-tab a:hover { color: var(--ya-arena-teks); border-color: rgba(var(--ya-tinta-rgb), .3); transform: translateY(-1px); }
.ya-bt-tab a.active { color: var(--ya-arena-1); background: var(--ya-arena-teks); border-color: var(--ya-arena-teks); }
.ya-bt-tab a:focus-visible { outline: 3px solid var(--ya-neon-biru); outline-offset: 2px; }

.ya-bt-tampilan {
    flex: none; display: inline-flex; padding: .25rem; border-radius: 999px;
    border: 1px solid rgba(var(--ya-tinta-rgb), .14); background: var(--ya-arena-kaca);
}
.ya-bt-tampilan button {
    display: grid; place-items: center; width: 44px; height: 36px; padding: 0;
    border: 0; border-radius: 999px; background: transparent; color: var(--ya-arena-teks-2);
    transition: background-color .25s ease, color .25s ease;
}
.ya-bt-tampilan button[aria-pressed="true"] { background: rgba(var(--ya-neon-biru-rgb), .16); color: var(--ya-neon-biru-kuat); }
.ya-bt-tampilan button:focus-visible { outline: 3px solid var(--ya-neon-biru); outline-offset: 1px; }

.ya-bt-kepala { margin-bottom: 1.25rem; }
.ya-bt-judul { margin: 0; font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; font-style: italic; letter-spacing: -.025em; color: var(--ya-arena-teks); }
.ya-bt-jumlah { margin: .25rem 0 0; font-size: .875rem; color: var(--ya-arena-teks-2); }
.ya-bt-jumlah a { font-weight: 600; color: var(--ya-neon-biru-kuat); }

.ya-bt-daftar { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); transition: opacity .3s ease; }
@media (min-width: 576px) { .ya-bt-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ya-bt-daftar.is-memuat { opacity: .35; pointer-events: none; }
.ya-bt-kosong {
    grid-column: 1 / -1; margin: 0; padding: 2.5rem 1.5rem; text-align: center;
    border: 1px dashed rgba(var(--ya-tinta-rgb), .18); border-radius: 1.25rem; color: var(--ya-arena-teks-2);
}
.ya-bt-kosong a { font-weight: 600; color: var(--ya-neon-biru-kuat); }
.ya-bt-muat { display: flex; justify-content: center; margin-top: 2rem; }
.ya-bt-muat:empty { display: none; }

/* =====================================================================
   3. KARTU BERITA
   ===================================================================== */
.ya-bk {
    position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid rgba(var(--ya-tinta-rgb), .08); border-radius: 1.25rem; background: var(--ya-arena-kartu);
    box-shadow: 0 18px 40px -30px var(--ya-lp-bayangan);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, border-color .3s ease;
    animation: ya-bk-masuk .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 50ms) backwards;
}
@keyframes ya-bk-masuk { from { opacity: 0; transform: translateY(16px); } }
.ya-bk-gambar { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ya-kat, var(--ya-neon-biru)); }
.ya-bk-gambar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.ya-bk-gambar .ya-bt-kat { position: absolute; left: .75rem; top: .75rem; }
.ya-bk-motif {   /* tanpa sampul: warna kategori + garis laju + huruf kontur */
    position: absolute; inset: 0; display: grid; place-items: center;
    background: repeating-linear-gradient(115deg, rgba(var(--ya-putih-rgb), .14) 0 2px, transparent 2px 18px),
                linear-gradient(160deg, rgba(var(--ya-putih-rgb), .2), rgba(var(--ya-berita-scrim-rgb), .5));
}
.ya-bk-motif b { font-size: 5rem; font-weight: 800; font-style: italic; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(var(--ya-putih-rgb), .75); }
.ya-bk-isi { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; }
.ya-bk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem; margin: 0; font-size: .75rem; font-weight: 500; color: var(--ya-arena-teks-2); }
.ya-bk-meta-kat { display: none; align-items: center; gap: .35rem; margin-right: .2rem; font-weight: 700; color: var(--ya-arena-teks); }
.ya-bk-meta-kat::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ya-kat, var(--ya-neon-biru)); }
.ya-bk-judul { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.ya-bk-judul a {
    color: var(--ya-arena-teks); text-decoration: none;
    background: linear-gradient(var(--ya-neon-oranye), var(--ya-neon-oranye)) 0 100% / 0 2px no-repeat;
    transition: background-size .45s cubic-bezier(.2, .7, .2, 1);
}
.ya-bk-judul a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 1.25rem; }
.ya-bk-judul a:focus-visible { outline: none; }
.ya-bk-judul a:focus-visible::after { outline: 3px solid var(--ya-neon-biru); outline-offset: -3px; }
.ya-bk-ringkas {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ya-arena-teks-2);
}
.ya-bk-baca { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: .25rem; font-size: .8125rem; font-weight: 700; color: var(--ya-neon-biru-kuat); }
.ya-bk-baca i { transition: transform .3s ease; }

@media (hover: hover) and (pointer: fine) {
    .ya-bs:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -34px var(--ya-lp-bayangan), 0 0 0 1px rgba(var(--ya-tinta-rgb), .12); }
    .ya-bs:hover .ya-bs-gambar { transform: scale(1.06); }
    .ya-bs:hover::after { transform: scaleX(1); }
    .ya-bk:hover { transform: translateY(-6px); border-color: rgba(var(--ya-tinta-rgb), .16); box-shadow: 0 32px 60px -30px var(--ya-lp-bayangan); }
    .ya-bk:hover .ya-bk-gambar img { transform: scale(1.06); }
    .ya-bk:hover .ya-bk-judul a { background-size: 100% 2px; }
    .ya-bk:hover .ya-bk-baca i { transform: translateX(4px); }
}

/* Mode List */
[data-ya-berita-tampilan="list"] .ya-bt-daftar { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
[data-ya-berita-tampilan="list"] .ya-bk { flex-direction: row; border-radius: 1rem; }
[data-ya-berita-tampilan="list"] .ya-bk-gambar { width: clamp(112px, 30%, 240px); aspect-ratio: auto; min-height: 96px; }
[data-ya-berita-tampilan="list"] .ya-bk-gambar .ya-bt-kat { display: none; }
[data-ya-berita-tampilan="list"] .ya-bk-motif b { font-size: 2.5rem; }
[data-ya-berita-tampilan="list"] .ya-bk-meta-kat { display: inline-flex; }
[data-ya-berita-tampilan="list"] .ya-bk-isi { justify-content: center; gap: .375rem; padding: .875rem 1.125rem; }
[data-ya-berita-tampilan="list"] .ya-bk-judul { font-size: 1.0625rem; }
[data-ya-berita-tampilan="list"] .ya-bk-ringkas { -webkit-line-clamp: 2; }
[data-ya-berita-tampilan="list"] .ya-bk-baca { display: none; }
[data-ya-berita-tampilan="list"] .ya-bk-judul a::after { border-radius: 1rem; }
@media (max-width: 575.98px) {
    [data-ya-berita-tampilan="list"] .ya-bk-ringkas { display: none; }
    [data-ya-berita-tampilan="list"] .ya-bk-judul { font-size: .9375rem; }
    [data-ya-berita-tampilan="list"] .ya-bk-isi { padding: .75rem .875rem; }
}

/* =====================================================================
   4. SIDEBAR
   ===================================================================== */
.ya-bt-widget {
    padding: 1.25rem; border: 1px solid rgba(var(--ya-tinta-rgb), .08); border-radius: 1.25rem;
    background: var(--ya-arena-kartu); box-shadow: 0 18px 40px -32px var(--ya-lp-bayangan);
}
.ya-bt-widget-judul {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
    font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ya-arena-teks);
}
.ya-bt-widget-judul i { color: var(--ya-neon-oranye); }
.ya-bt-widget-judul small { margin-left: auto; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ya-arena-teks-2); }

/* Cari cepat */
.ya-bt-cari { position: relative; z-index: 5; }
.ya-bt-cari-form { position: relative; }
.ya-bt-cari .ya-bt-widget-judul { margin-bottom: .75rem; }
.ya-bt-cari-kotak { position: relative; display: flex; align-items: center; }
.ya-bt-cari-kotak > i { position: absolute; left: 1rem; color: var(--ya-arena-teks-2); pointer-events: none; }
.ya-bt-cari-kotak input {
    width: 100%; min-height: 48px; padding: .625rem 2.75rem;
    border: 1px solid rgba(var(--ya-tinta-rgb), .16); border-radius: 999px; background: var(--ya-arena-1);
    font-size: 1rem; color: var(--ya-arena-teks); transition: border-color .2s ease, box-shadow .2s ease;
}
.ya-bt-cari-kotak input::placeholder { color: var(--ya-arena-teks-2); opacity: .8; }
.ya-bt-cari-kotak input:focus { outline: none; border-color: var(--ya-neon-biru); box-shadow: 0 0 0 4px rgba(var(--ya-neon-biru-rgb), .18); }
.ya-bt-kbd {
    position: absolute; right: .875rem; padding: .05rem .45rem; border: 1px solid rgba(var(--ya-tinta-rgb), .2); border-radius: .375rem;
    background: transparent; font-family: inherit; font-size: .75rem; color: var(--ya-arena-teks-2);
}
@media (hover: none), (max-width: 991.98px) { .ya-bt-kbd { display: none; } }
.ya-bt-saran {
    position: absolute; left: 0; right: 0; top: calc(100% + .375rem); z-index: 20;
    max-height: min(60vh, 460px); overflow-y: auto; margin: 0; padding: .375rem; list-style: none;
    border: 1px solid rgba(var(--ya-tinta-rgb), .12); border-radius: 1rem; background: var(--ya-arena-kartu);
    box-shadow: 0 30px 60px -24px var(--ya-lp-bayangan);
    animation: ya-bt-saran .2s ease;
}
.ya-bt-saran[hidden] { display: none; }
@keyframes ya-bt-saran { from { opacity: 0; transform: translateY(-6px); } }
.ya-bt-saran-item,
.ya-bt-saran-semua { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: .75rem; color: var(--ya-arena-teks); text-decoration: none; }
.ya-bt-saran-item:hover, .ya-bt-saran-item.is-pilih,
.ya-bt-saran-semua:hover, .ya-bt-saran-semua.is-pilih { background: rgba(var(--ya-neon-biru-rgb), .12); color: var(--ya-arena-teks); }
.ya-bt-saran-gambar { position: relative; flex: none; width: 64px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5rem; background: rgba(var(--ya-tinta-rgb), .08); }
.ya-bt-saran-gambar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ya-bt-saran-teks { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.ya-bt-saran-teks b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.ya-bt-saran-teks mark { padding: 0 .05em; border-radius: .2em; background: rgba(var(--ya-neon-oranye-rgb), .28); color: inherit; }
.ya-bt-saran-teks small { font-size: .75rem; color: var(--ya-arena-teks-2); }
.ya-bt-saran-semua { justify-content: center; margin-top: .25rem; border-top: 1px solid rgba(var(--ya-tinta-rgb), .08); font-size: .8125rem; font-weight: 600; color: var(--ya-neon-biru-kuat); }
.ya-bt-saran-kosong { padding: .75rem; font-size: .875rem; text-align: center; color: var(--ya-arena-teks-2); }

/* Terpopuler: nomor ranking besar berkontur */
.ya-bt-populer { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ya-bt-populer a {
    display: flex; align-items: flex-start; gap: .875rem; padding: .625rem .5rem; border-radius: .875rem;
    color: var(--ya-arena-teks); text-decoration: none; transition: background-color .2s ease;
}
.ya-bt-populer a:hover,
.ya-bt-populer a:focus-visible { background: rgba(var(--ya-tinta-rgb), .05); color: var(--ya-arena-teks); }
.ya-bt-populer-no {
    flex: none; min-width: 2.75rem; padding: .05em .2em .1em 0;
    font-size: 2.25rem; font-weight: 800; font-style: italic; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
    color: transparent; -webkit-text-stroke: 1.5px rgba(var(--ya-tinta-rgb), .35);
    transition: -webkit-text-stroke-color .25s ease;
}
.ya-bt-populer li:nth-child(2) .ya-bt-populer-no,
.ya-bt-populer li:nth-child(3) .ya-bt-populer-no { -webkit-text-stroke-color: var(--ya-neon-biru); }
.ya-bt-populer li:first-child .ya-bt-populer-no {
    -webkit-text-stroke: 0;
    background: linear-gradient(180deg, var(--ya-neon-oranye-terang), var(--ya-neon-oranye-gelap));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ya-bt-populer a:hover .ya-bt-populer-no { -webkit-text-stroke-color: var(--ya-neon-oranye); }
.ya-bt-populer-teks { min-width: 0; display: flex; flex-direction: column; gap: .25rem; padding-top: .125rem; }
.ya-bt-populer-teks b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.ya-bt-populer-teks small { font-size: .75rem; color: var(--ya-arena-teks-2); }

/* Arsip */
.ya-bt-arsip { list-style: none; margin: 0; padding: 0; display: grid; }
.ya-bt-arsip a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .25rem .625rem;
    border-radius: .625rem; font-size: .9375rem; color: var(--ya-arena-teks); text-decoration: none; transition: background-color .2s ease;
}
.ya-bt-arsip a span {
    min-width: 1.75rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(var(--ya-tinta-rgb), .06);
    font-size: .75rem; font-weight: 600; text-align: center; color: var(--ya-arena-teks-2);
}
.ya-bt-arsip a:hover,
.ya-bt-arsip a.active { background: rgba(var(--ya-neon-biru-rgb), .1); color: var(--ya-arena-teks); }
.ya-bt-arsip-lagi summary {
    display: flex; align-items: center; min-height: 44px; padding: 0 .625rem; cursor: pointer;
    font-size: .8125rem; font-weight: 600; color: var(--ya-neon-biru-kuat);
}

/* Tag populer */
.ya-bt-tag { display: flex; flex-wrap: wrap; gap: .5rem; }
.ya-bt-tag a {
    display: inline-flex; align-items: center; min-height: 40px; padding: .25rem .875rem;
    border: 1px solid rgba(var(--ya-tinta-rgb), .14); border-radius: 999px;
    font-size: .8125rem; font-weight: 600; color: var(--ya-arena-teks-2); text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.ya-bt-tag a.ya-bt-tag--2 { font-size: .875rem; color: var(--ya-arena-teks); }
.ya-bt-tag a.ya-bt-tag--3 { font-size: .9375rem; color: var(--ya-arena-teks); border-color: rgba(var(--ya-neon-oranye-rgb), .45); }
.ya-bt-tag a:hover,
.ya-bt-tag a.active { border-color: var(--ya-neon-biru); color: var(--ya-neon-biru-kuat); transform: translateY(-1px); }

/* =====================================================================
   5. GERAK & AKSESIBILITAS
   ===================================================================== */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
    .ya-bk, .ya-bt-saran { animation: none; }
    .ya-bs, .ya-bs-gambar, .ya-bs::after, .ya-bk, .ya-bk-gambar img, .ya-bk-judul a, .ya-bt-daftar { transition: none; }
}
@media (forced-colors: active) {
    .ya-bs::before { background: none; }
    .ya-bt-populer li:first-child .ya-bt-populer-no { background: none; -webkit-text-fill-color: currentColor; }
}
@media print {
    .ya-bt-alat, .ya-bt-kanan, .ya-bt-muat, .ya-bt-sorotan { display: none !important; }
}