/**
 * Gösterim bileşenleri — onaylı `_base.css` ölçüleriyle.
 *
 *   .card  → card dolgu, line kenarlık, radius 14
 *   .badge → height 22, padding 0 8, radius 4, 12px/700
 *   .tile  → 36×36, radius 8 (nav'da 22×22, ticker'da 20×20)
 */

/* ── Kart ─────────────────────────────────────────────────────────────── */

.c-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.c-card__body { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; }
.c-card__footer { padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--line); background: var(--card-2); }
.c-card--elevated { box-shadow: var(--sh-md); }

/* Tıklanabilir kart: kaplama bağlantısı kartın tamamını hedef yapar. */
.c-card--interactive { position: relative; transition: border-color var(--dur-base) var(--ease-out); }
.c-card--interactive:hover { border-color: var(--brand); }
.c-card--interactive:has(a:focus-visible) { border-color: var(--brand); box-shadow: var(--focus-ring); }
.c-card__overlay { position: absolute; inset: 0; z-index: 1; }
.c-card__overlay:focus-visible { outline: none; }
/* Kartta ikinci bir bağlantı varsa kaplamanın ÜSTÜNE çıkmalı. */
.c-card__above { position: relative; z-index: 2; }

/* ── Rozet ────────────────────────────────────────────────────────────── */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.c-badge--neutral { background: var(--badge-gry-bg); color: var(--badge-gry-ink); }
.c-badge--brand { background: var(--brand-l); color: var(--brand); }
.c-badge--success { background: var(--brand-l); color: var(--brand); }
.c-badge--warning { background: var(--badge-org-bg); color: var(--org); }
.c-badge--danger { background: var(--badge-red-bg); color: var(--red); }
.c-badge--info { background: var(--badge-gry-bg); color: var(--badge-gry-ink); }
.c-badge--gold { background: var(--yel); color: var(--gold); }

/* ── Marka karosu ─────────────────────────────────────────────────────── */

.c-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ölçü `BrandIcon::tile()` tarafından `--tile-size` ile veriliyor.
     Önceden yalnızca 20/22/30/38 için kural vardı ve listede olmayan
     her boyut 36 px'e düşüyordu; 10 px istenen rozet 36 px basılıp
     üstüne oturduğu avatarı örtüyordu. Yedek 36 px, değişken hiç
     gelmezse (elle yazılmış `.c-tile`) eski davranış korunsun diye. */
  width: var(--tile-size, 36px);
  height: var(--tile-size, 36px);
  border-radius: var(--r-md);
  flex: none;
  background: var(--tile-bg, var(--card-2));
}
/* Siyaha yakın markalar (TikTok #111, Twitter #000) koyu zeminde
   kayboluyordu: ölçülen kontrast 1,03 ve 1,15. İnce iç hat karonun
   kenarını görünür kılıyor; renkli markalarda hat hiç basılmıyor. */
.c-tile[data-koyu='true'] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); }
/* Açık temada karo zaten beyaz zeminde duruyor; beyaz hat orada işe
   yaramaz, ince koyu hat gerekir. */
:root[data-theme='light'] .c-tile[data-koyu='true'] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }

/* Köşe yuvarlaklığı ölçüye göre değişiyor; genişlik/yükseklik artık
   burada tekrarlanmıyor. */
.c-tile[data-size='20'], .c-tile[data-size='22'] { border-radius: var(--r-sm); }
.c-tile[data-size='38'] { border-radius: var(--r-lg); }
.c-tile svg { width: 60%; height: 60%; }
.c-tile[data-size='20'] svg,
.c-tile[data-size='22'] svg { width: 70%; height: 70%; }

/* ── Uyarı ────────────────────────────────────────────────────────────── */

.c-alert {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
}
.c-alert__icon { flex: 0 0 auto; margin-top: 1px; }
.c-alert__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.c-alert__title { font-weight: var(--fw-bold); font-size: var(--fs-md); color: inherit; }
.c-alert--success { background: var(--brand-l); border-color: rgba(34, 181, 115, 0.32); color: var(--brand); }
.c-alert--warning { background: var(--yel); border-color: var(--yel-b); color: var(--org); }
.c-alert--danger { background: var(--badge-red-bg); border-color: rgba(255, 90, 95, 0.3); color: var(--red); }
.c-alert--info { background: var(--card-2); border-color: var(--line); color: var(--ink-2); }

/* ── Fiyat ────────────────────────────────────────────────────────────── */

.c-price {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
/* Onaylı tasarımda kuruş kısmı aynı puntoda — küçültülmez. */
.c-price__minor { font-size: 1em; }
.c-price__unit { font-size: 0.66em; font-weight: var(--fw-semibold); color: var(--mute); margin-inline-start: 0.2em; }
.c-price--sm { font-size: var(--fs-lg); }
.c-price--md { font-size: var(--fs-2xl); }
.c-price--lg { font-size: var(--fs-3xl); }
.c-price--struck {
  font-size: var(--fs-sm);
  color: var(--mute);
  text-decoration: line-through;
  font-weight: var(--fw-semibold);
  font-family: var(--font-head);
}

/* ── İskelet ──────────────────────────────────────────────────────────── */

.c-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 37%, var(--card-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-xs);
  animation: thz-shimmer 1.4s ease-in-out infinite;
}
@keyframes thz-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .c-skeleton { animation: none; background: var(--card-2); } }

/* ── Boş durum ────────────────────────────────────────────────────────── */

.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-14) var(--sp-8);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  text-align: center;
  color: var(--mute);
}
.c-empty__title { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--ink); }
.c-empty__text { max-width: 48ch; font-size: var(--fs-md); }

/* ── Kırıntı ──────────────────────────────────────────────────────────── */

.c-breadcrumb { font-size: var(--fs-sm); color: var(--mute); }
.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-breadcrumb li { display: flex; align-items: center; gap: var(--sp-3); }
.c-breadcrumb li + li::before { content: '/'; color: var(--line); }
.c-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--mute); }
.c-breadcrumb a:hover { color: var(--brand); }
.c-breadcrumb [aria-current='page'] { color: var(--ink); font-weight: var(--fw-semibold); }

/* ── Sayfalama ────────────────────────────────────────────────────────── */

.c-pagination ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-pagination a,
.c-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.c-pagination a:hover { border-color: var(--brand); color: var(--brand); }
.c-pagination [aria-current='page'] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: var(--fw-bold); }
.c-pagination__gap { border-color: transparent; color: var(--mute); min-width: var(--sp-10); }

/* ── Ödeme rozeti ─────────────────────────────────────────────────────────
   Ölçüler onaylı hizmet sayfasından: yükseklik 20, yatay boşluk 10,
   yarıçap 4, Outfit 800, 8px, harf aralığı .02em. Marka rengi bileşenden
   `--pay-bg` / `--pay-fg` olarak gelir; dış marka sabitidir. */
.c-pay {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-xs);
  background: var(--pay-bg);
  color: var(--pay-fg);
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}