/* ============================================================
   Component: badges (durum etiketleri)
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  background: var(--bg); color: var(--text-muted);
}
.badge--green { background: var(--green-soft); color: var(--green); }
.badge--red   { background: var(--red-soft);   color: var(--red); }
.badge--yellow{ background: var(--yellow-soft); color: var(--yellow); }
.badge--blue  { background: var(--blue-soft);   color: var(--blue); }
.badge--muted { background: var(--bg);          color: var(--text-muted); }
/* Websitesinden üye olan cari (kaynak:'web') — mor, diğer durum renkleriyle çakışmaz */
.badge--purple{ background: var(--purple-soft, #EEEDF6); color: var(--purple, #463E7C); }

/* — Stok rozeti — satış/alış ürün arama sonucu + sepet satırı.
   Renk: yeşil=stokta, sarı=kritik eşiğin altında, kırmızı=tükendi. */
.stk-badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.stk-badge.stk-ok   { background: var(--green-soft);  color: var(--green); }
.stk-badge.stk-warn { background: var(--yellow-soft); color: var(--yellow); }
.stk-badge.stk-out  { background: var(--red-soft);    color: var(--red); }

/* Sepette istenen miktar stoğu aşınca çıkan uyarı satırı (engel değil, ikaz). */
.stk-over { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--red); }
.stk-over svg { width: 13px; height: 13px; flex-shrink: 0; }