/* Vitrin kampanyaları (T-123/P1). Yalnız token; bileşenler mos-kit + mos-sf'te. */

/* Tür çipleri: bağlantı olarak çizilir; seçili durum aria-current ile */
.cmp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
.cmp-chips .mos-chip { min-height: 44px; text-decoration: none; }
.cmp-chips .mos-chip[aria-current="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.cmp-chips .mos-chip[aria-current="true"] .mos-chip__n { background: var(--color-on-primary); color: var(--color-primary); }

/* Öne çıkan bant */
.cmp-hero__icon { font-size: 5rem; opacity: .9; }
.cmp-hero .sf-ph-img { position: relative; overflow: hidden; }

/* Kart: görsel / ikon, kartın tamamı tek bağlantı */
.cmp-card { position: relative; }
.cmp-card .sf-ph-img { overflow: hidden; }
.cmp-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-card__icon { font-size: 2.75rem; }
.cmp-card__link { color: inherit; text-decoration: none; }
.cmp-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cmp-card__link:focus-visible { outline: none; }
.cmp-card__link:focus-visible::after { box-shadow: var(--focus-ring); }
.cmp-card .sf-tag { z-index: 2; pointer-events: none; }

/* T-052: kapak görseli (BannerImageUrl) — geniş 12:5 kapak, cover + odak orta (geniş-alçak kaynaklar bozulmaz) */
.cmp-card .cmp-card__media { aspect-ratio: 12 / 5; }
.cmp-card__media .cmp-card__img, .cmp-hero__media .cmp-card__img { object-position: center; }
.cmp-card__headline { margin: 0; font: 800 20px/1.2 var(--font-heading); color: var(--color-primary-text); letter-spacing: -.01em; }
/* Görselsiz kart: büyük ikon alanı yok; küçük rozet + etiket, metin öne çıkar */
.cmp-card--compact .sf-cc__b { padding-top: 18px; }
.cmp-card__top { display: flex; align-items: center; gap: var(--space-2); }
.cmp-card--compact .cmp-card__top .sf-tag { position: static; }
.cmp-card__badge { width: 36px; height: 36px; flex: none; border-radius: var(--radius-btn); display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary-text); font-size: 18px; }
/* Öne çıkan bant: görsel yoksa tek sütun, metin bandı */
.cmp-hero--compact { grid-template-columns: minmax(0, 1fr); }
.cmp-hero__headline { margin: 0; font: 800 26px/1.15 var(--font-heading); color: var(--color-on-primary); }   /* T-187: accent zemini (primary) üstünde koyu temada okunmuyordu; on-primary her temada kontrastlı */
.cmp-hero .sf-ph-img.cmp-hero__media { min-height: 0; aspect-ratio: 12 / 5; align-self: center; }

/* Detay */
.cmp-detail__media { position: relative; overflow: hidden; aspect-ratio: 12 / 5; max-height: 340px; width: 100%; border-radius: var(--radius-xl); margin-bottom: var(--space-6); }   /* masaüstünde başlık ve koşullar ilk ekranda görünsün */
.cmp-detail__media--ph { aspect-ratio: auto; min-height: 140px; }
.cmp-detail__ph { font-size: 3.5rem; opacity: .85; }
.cmp-detail__head { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.cmp-detail__title { margin: 0; font: 800 34px/1.15 var(--font-heading); letter-spacing: -.02em; }
.cmp-detail__lead { margin: 0; color: var(--color-muted); font-size: 16px; max-width: 60ch; }
.cmp-conds { padding: var(--space-5); display: grid; gap: var(--space-3); }
.cmp-conds__title { margin: 0; font: 700 17px var(--font-heading); }
.cmp-count { font: 500 15px var(--font-body); }
.cmp-pcell { min-width: 0; display: flex; flex-direction: column; }
.cmp-pcell > .pc { flex: 1; }
#urunler { scroll-margin-top: var(--space-6); }

/* Boş durum */
.cmp-empty { margin-top: var(--space-4); }
.cmp-empty h1, .cmp-empty h2 { margin: 0; font: 800 20px var(--font-heading); }
.cmp-empty__icon { font-size: 2rem; }

@media (max-width: 767.98px) {
  .cmp-detail__title { font-size: 26px; }
  .cmp-detail__media { border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
  .cmp-detail__media--ph { min-height: 100px; }
  .cmp-hero .sf-ph-img { min-height: 160px; }
}