/**
 * components.css — potongan UI kecil yang dipakai berulang di banyak
 * halaman (bukan cuma 1 komponen besar seperti header/sidebar):
 * badge kategori, tag pill, dan tombol pill "Lihat semua". Diberi
 * "rumah" sendiri supaya kalau salah satu dipakai ulang di tempat
 * baru, orang tahu harus cari style-nya di sini, bukan menebak-nebak
 * ada di file mana.
 */

/* --- Badge kategori otomatis (warna per kategori, di-set inline
   lewat --ja-badge-color dari blothink_category_color()) --- */
.ja-badge {
  display: inline-block;
  background: var(--ja-badge-color, var(--ja-accent));
  color: #fff;
  font-family: var(--ja-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}

/* --- Tag pill: dipakai di tag artikel, "Indeks Kategori", dan
   "Tag Terpopuler" di sidebar --- */
.ja-tag-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--ja-text-muted);
  background: var(--ja-surface);
  border: 1px solid var(--ja-border);
  border-radius: 999px;
  padding: 6px 12px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ja-tag-pill:hover {
  color: var(--ja-accent);
  border-color: var(--ja-accent);
  transform: translateY(-1px);
}

.ja-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Pill CTA: pengganti text-link polos "Lihat semua" --- */
.ja-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ja-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ja-accent);
  background: #fff;
  border: 1px solid var(--ja-accent);
  border-radius: 999px;
  padding: 7px 16px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ja-pill-cta:hover {
  background: var(--ja-accent);
  color: #fff;
  transform: translateY(-1px);
}

.ja-pill-cta--sm {
  font-size: 11.5px;
  padding: 5px 12px;
}

/* .ja-see-all masih dipakai di beberapa tempat lama — dijaga sebagai
   alias visual dari .ja-pill-cta supaya tetap konsisten */
.ja-see-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ja-font-sans);
  font-weight: 600;
  color: var(--ja-accent);
  background: #fff;
  border: 1px solid var(--ja-accent);
  border-radius: 999px;
  padding: 5px 12px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ja-see-all:hover {
  background: var(--ja-accent);
  color: #fff;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ja-tag-pill,
  .ja-pill-cta,
  .ja-see-all {
    transition: none;
  }
}