/* ====================================================================
   pages.css — kelas pengganti SEMUA inline style.
   Aturan: tidak ada atribut style="" di markup; semua di sini.
   ==================================================================== */

/* ── Utilitas teks & tautan ── */
.text-1 { color: var(--text-1); }
.text-2 { color: var(--text-2); }
.muted-note { font-size: .82rem; color: var(--text-3); margin: -.4rem 0 .5rem; }
.link-accent { color: var(--accent-text); }
.link-sm { font-size: .8rem; color: var(--accent-text); }
.is-hidden { display: none; }
.img-hidden { visibility: hidden; }

/* ── Toolbar / baris filter & pencarian ── */
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: 0 1rem .25rem; }
.search-row { display: flex; padding: 0 1rem 1.25rem; }
.toolbar-end { display: flex; justify-content: flex-end; padding: 0 1rem; }
.search-wrap.grow { max-width: none; flex: 1; min-width: 180px; }
.search-hint { padding: 0 1rem; font-size: .75rem; color: var(--text-3); min-height: 1rem; }
.btn-sm { font-size: .8rem; padding: .4rem 1rem; }

/* ── Section spacing (beranda & halaman daftar) ── */
.home-section { padding: 0 1rem 1.25rem; }
.games-section { padding: 0 0 1rem; }
.px { padding: 0 1rem; }
.px-pb { padding: 0 1rem 2rem; }
.pad-1 { padding: 1rem; }
.section-title.pad { padding: 0 1rem; }

/* ── Grid khusus provider ── */
.provider-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* ── Container sempit (detail game) ── */
.container--narrow { max-width: 900px; }

/* ── Panduan: prose & tabel data ── */
.prose.flush-top { padding-top: 0; }
.data-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .88rem; }
.data-table thead tr { text-align: left; color: var(--text-2); }
.data-table th, .data-table td { padding: .5rem; border-bottom: 1px solid var(--border); }
.data-table tbody { color: var(--text-3); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── layout.js: footer brand ── */
.footer-brand p { margin: 0; }

/* ── game.js: halaman detail ── */
.breadcrumb.pad-top { padding-top: 1.25rem; }
.game-titlebar { position: relative; text-align: center; margin-bottom: .25rem; }
.fav-btn.corner { position: absolute; right: 0; top: 0; }
.embed-mb { margin-bottom: 1rem; }
.embed-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.embed-cover-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
.spec-card.mb { margin-bottom: 1.25rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge-row--divided { padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--border); }
.faq-list { display: flex; flex-direction: column; gap: .6rem; }
.related-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }

/* ── components.js: state message ── */
.state-msg.full { grid-column: 1 / -1; }
.spinner-gap { margin-top: .6rem; }

/* ── favorites.js: kartu favorit ── */
.fav-card { position: relative; }
.fav-remove {
  position: absolute; top: .4rem; right: .4rem; z-index: 2;
  background: rgba(14, 11, 30, .85); border: 1px solid var(--border);
  color: var(--text-1); border-radius: 50%;
  width: 1.7rem; height: 1.7rem; cursor: pointer; line-height: 1;
}