/* ──────────────────────────────────────────────────────────────────────────
 * Tutku standart etiket (pill rozet) — SİTE GENELİ, yeniden kullanılabilir.
 *
 * Kullanım:
 *   <span class="tutku-badge tutku-badge--green">
 *     <span class="tutku-badge__dot"></span>Yayında
 *   </span>
 *
 * Renk varyantları : --green  --brown  --red  --gray
 * Boyut modifier   : --sm  (11px, daha dar — dar kolon/satır içi için)
 * Nokta (opsiyonel): .tutku-badge__dot  (renk varyantına göre otomatik)
 *
 * Renkler durum rozetiyle ([[ilanlarim-yonetim-paneli]]) ve toast'larla uyumlu.
 * ────────────────────────────────────────────────────────────────────────── */
.tutku-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    box-sizing: border-box;
}

.tutku-badge--sm {
    font-size: 11px;
    padding: 3px 10px;
}

.tutku-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
}

/* Yeşil — olumlu / aktif / bol süre */
.tutku-badge--green { background: #e6f6ee; color: #15803d; }
.tutku-badge--green .tutku-badge__dot { background: #1a9d55; }

/* Açık kahve — uyarı / orta seviye */
.tutku-badge--brown { background: #f6e9d4; color: #8a5316; }
.tutku-badge--brown .tutku-badge__dot { background: #b8782e; }

/* Kırmızı — kritik / az süre / dolmuş */
.tutku-badge--red { background: #fdeceb; color: #c01d12; }
.tutku-badge--red .tutku-badge__dot { background: #e2241a; }

/* Gri — nötr / veri yok / taslak */
.tutku-badge--gray { background: #eef1f4; color: #57606a; }
.tutku-badge--gray .tutku-badge__dot { background: #8c959f; }