/*
 * Etiket rozetleri — tema CSS'inden bağımsız, Tailwind derlemesine girmez.
 * Vitrin (layout.php) ve panel önizlemesi (admin-theme) AYNI dosyayı yükler;
 * önizlemede görülen sitede görülenle aynı olsun diye.
 *
 * Bütün ölçüler rozetin satır içi CSS değişkenlerinden gelir
 * (api/lib/tags.php → tag_style_vars). --tb-k mobil ölçeğidir:
 * dar ekranda --tb-mscale (Etiket Ayarları → Mobil) uygulanır.
 */
.tag-badge {
  --tb-k: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--tb-gap, 4px) * var(--tb-k));
  box-sizing: border-box;
  max-width: 100%;
  min-height: calc(var(--tb-mh, 0px) * var(--tb-k));
  padding: calc(var(--tb-py, 3px) * var(--tb-k)) calc(var(--tb-px, 8px) * var(--tb-k));
  background: var(--tb-bg, #f3f4f6);
  color: var(--tb-color, #374151);
  border: var(--tb-bw, 1px) var(--tb-bs, solid) var(--tb-bc, #d1d5db);
  border-radius: var(--tb-r, 6px);
  box-shadow: var(--tb-sh, none);
  font-size: calc(var(--tb-fs, 12px) * var(--tb-k));
  font-weight: var(--tb-fw, 600);
  line-height: 1.2;
  letter-spacing: var(--tb-ls, 0px);
  text-transform: var(--tb-tt, none);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  transition: background-color .15s, color .15s, border-color .15s;
}
.tag-badge__text { overflow: hidden; text-overflow: ellipsis; }
.tag-badge__icon {
  flex: none;
  width: calc(var(--tb-is, 14px) * var(--tb-k));
  height: calc(var(--tb-is, 14px) * var(--tb-k));
  color: var(--tb-icon, currentColor);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--tb-isw, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Özel SVG kendi dolgu/çizgi özniteliklerini taşır; Lucide varsayılanları ona uygulanmaz. */
.tag-badge__icon--custom { fill: currentColor; stroke: none; }
.tag-badge__icon--custom[data-orig] { color: inherit; }

.tag-badge--icon-right { flex-direction: row-reverse; }
.tag-badge--icon-top { flex-direction: column; }
.tag-badge--icon-only { padding: calc(var(--tb-py, 3px) * var(--tb-k)); }
.tag-badge__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hover yalnız link olan public etiketlerde (sınıfı tags.php yalnız <a>'ya verir). */
a.tag-badge--hover:hover {
  background: var(--tb-hbg, var(--tb-bg));
  color: var(--tb-hcolor, var(--tb-color));
  border-color: var(--tb-hbc, var(--tb-bc));
}
a.tag-badge:focus-visible {
  outline: 2px solid var(--tb-bc, currentColor);
  outline-offset: 2px;
}

/* Animasyonlar */
.tag-badge--pulse { animation: tb-pulse 1.8s ease-in-out infinite; }
@keyframes tb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.tag-badge--shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: tb-shine 2.6s ease-in-out infinite;
}
@keyframes tb-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .tag-badge--pulse, .tag-badge--shine::after { animation: none; }
  .tag-badge--shine::after { display: none; }
}

/* Kart konumlandırma — ayarlar Etiket Ayarları → Ürün kartında gösterim */
.tag-stack { display: flex; gap: var(--tbs-gap, 4px); pointer-events: none; }
.tag-stack--vertical { flex-direction: column; align-items: flex-start; }
.tag-stack--horizontal { flex-direction: row; flex-wrap: wrap; }
.tag-stack--abs { position: absolute; z-index: 5; max-width: calc(100% - 2 * var(--tbs-off, 8px)); }
.tag-stack--top-left { top: var(--tbs-off, 8px); left: var(--tbs-off, 8px); }
.tag-stack--top-right { top: var(--tbs-off, 8px); right: var(--tbs-off, 8px); }
.tag-stack--top-right.tag-stack--vertical { align-items: flex-end; }
.tag-stack--top-right.tag-stack--horizontal { justify-content: flex-end; }
.tag-stack--bottom-left { bottom: var(--tbs-off, 8px); left: var(--tbs-off, 8px); }
.tag-stack--bottom-right { bottom: var(--tbs-off, 8px); right: var(--tbs-off, 8px); }
.tag-stack--bottom-right.tag-stack--vertical { align-items: flex-end; }
.tag-stack--bottom-right.tag-stack--horizontal { justify-content: flex-end; }
.tag-stack--flow { margin-top: 6px; }
.tag-badge--dhide { display: none; }

@media (max-width: 767px) {
  .tag-badge { --tb-k: var(--tb-mscale, .85); }
  .tag-badge--mhide { display: none !important; }
  .tag-badge--dhide:not(.tag-badge--mhide) { display: inline-flex; }
}

/* Ürün detayı */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-list__heading { font-size: 13px; font-weight: 600; opacity: .75; margin-right: 2px; }
/* Sağ üst yığın, kartın favori düğmesinin altına iner. */
.tag-stack--under-fav { top: calc(var(--tbs-off, 8px) + 44px); }
.tag-stack--below-title { margin-top: 4px; }
/* Panel önizlemesinin "Mobil" düğmesi: ekran genişliğinden bağımsız mobil ölçek. */
.tb-sim-mobile .tag-badge { --tb-k: var(--tb-mscale, .85); }
.tb-sim-mobile .tag-badge--mhide { display: none !important; }
/* Detaydaki yerleşim boşlukları burada: Tailwind derlemesine bağlı kalmasın. */
.tag-list--badges { margin: 8px 0; }
.tag-list--links { margin-top: 16px; }