/* =========================================================
   JAZMI — Halaman Artikel Index
   artikel.css
   Hanya menambah komponen baru (filter, status, load-more).
   Menggunakan token warna/tipografi yang sama dari css/style.css
   (variabel :root), tidak menduplikasi atau mengubahnya.
   ========================================================= */

/* ---------------------------------------------------------
   Filter kategori
   --------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--emerald);
  color: var(--emerald-deep);
  background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-chip:hover {
  background: var(--bg-alt);
}
.filter-chip.is-active {
  background: var(--emerald-deep);
  border-color: var(--emerald-deep);
  color: #fff;
}

/* ---------------------------------------------------------
   Status hasil saring (aksesibilitas + kejelasan jumlah)
   --------------------------------------------------------- */
.filter-status {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------
   Keadaan kosong (kategori tanpa artikel)
   --------------------------------------------------------- */
.data-empty-note {
  padding: 1.25rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------
   Muat Lebih Banyak — memakai .btn.btn-outline milik HOME apa
   adanya, tidak perlu override apa pun di sini.
   --------------------------------------------------------- */


/* C19 — Selected Option C mobile navigation, propagated to main menu pages */
@media (max-width: 860px) {
  .primary-nav {
    min-height: calc(100vh - 4.1rem);
    padding: 1.5rem var(--gutter) 3rem;
    background: var(--surface);
    border-top: 2px solid var(--brass-line);
    box-shadow: var(--shadow-soft);
  }

  .primary-nav ul {
    gap: 0.35rem;
  }

  .primary-nav a {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 1rem 0.9rem;
    font-size: 1.38rem;
  }

  .primary-nav a.is-active {
    background: var(--bg-alt);
    border-left: 3px solid var(--brass);
    padding-left: calc(0.9rem - 3px);
  }
}