/* ══════════════════════════════════════════════════════════════════════
   HİZMET SAYFASI — PAKET SEÇİM IZGARASI

   KAYNAK: kullanıcının verdiği paket seçim referansı (3 sütunlu kutu
   ızgarası, seçili kutu vurgulu, kutuda adet + indirim).

   UYARLANDI, KOPYALANMADI: referans açık temalı ve mor-turuncu degrade
   kullanıyor. Buradaki uygulama sitenin KOYU temasında ve marka
   yeşiliyle çalışıyor; ölçüler `tokens.css` değişkenlerinden geliyor.
   Tek bir ham renk kodu yok.

   ── Neden liste değil ızgara ────────────────────────────────────────

   Instagram Türk Takipçi'de 16 paket var. Dikey radio listesi ekranın
   iki katı yer kaplıyor ve kullanıcı fiyat karşılaştırmak için
   kaydırmak zorunda kalıyordu. Üç sütunlu ızgarada 16 paketin tamamı
   tek ekranda görünüyor.

   ── Erişilebilirlik ─────────────────────────────────────────────────

   Kutuların altında GERÇEK radio girdileri duruyor (`sr-only`).
   Klavyeyle ok tuşları çalışır, ekran okuyucu grubu okur, JavaScript
   kapalıyken de seçim gönderilir.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Üst bilgi: seçili adet ve fiyat ───────────────────────────────── */

.s-pkg__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.s-pkg__amount {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.s-pkg__amount b {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: var(--brand);
}
.s-pkg__amount .u {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
.s-pkg__amount .m {
  font-size: var(--fs-sm);
  color: var(--mute);
  margin-top: var(--sp-3);
}

.s-pkg__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}
.s-pkg__price .now {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.s-pkg__price .was {
  font-size: var(--fs-md);
  color: var(--mute);
  text-decoration: line-through;
}

/* ── Izgara ────────────────────────────────────────────────────────── */
.s-pkg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Vurgulu kutu kendi satırını tek başına uzatmasın. */
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
  border: 0;
  padding: 0;
  margin: var(--sp-7) 0 0;
}
@media (min-width: 560px) {
  .s-pkg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══ ÜÇ KADEME ═════════════════════════════════════════════════════════
   16 kutunun albenisiz durmasının sebebi kutuların kendisi değildi:
   hepsi aynı zemin, aynı kenar, aynı yazı boyuydu ve "En uygun" ile
   "Popüler" eşit ağırlıkta olduğu için hiçbiri ÖNERİ gibi okunmuyordu.
   Üstelik `is_popular` birden çok pakette işaretli olabildiği için
   rozet çoğaldıkça anlamı sıfırlanıyordu.

     0 — nötr kutu     : --card-2 zemin, --line kenar
     1 — önerilen kutu : marka üst şeridi + halka + %10 marka zemin
     2 — seçili kutu   : dolu marka zemini + boşluklu çift halka

   Üç durum gri tonda da ayrışıyor (düz / çerçeve / dolu blok), yani
   vurgu yalnızca renge yaslanmıyor.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Kademe 0: nötr ── */
.s-pkg__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;   /* birim fiyat satırıyla birlikte tüm kutular eşit */
  padding: var(--sp-5) var(--sp-3);
  /* Üst şeride yer HER kutuda ayrılıyor: vurgulu kutu 2px büyüyüp
     ızgarayı kaydırmasın. */
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.s-pkg__tile:hover {
  border-color: var(--mute);
  border-top-color: var(--brand);   /* hover da vurgu diliyle konuşur */
  transform: translateY(-2px);
}

/* ── Kademe 1: önerilen — sayfadaki TEK baskın kutu ──
   İki `box-shadow` satırı bilerek: `color-mix` desteklemeyen tarayıcı
   ikinciyi düşürür, halka yine de kalır. Tek satır olsaydı halka da
   giderdi. Aynısı zemin için de geçerli.

   ZEMİN %10 DEĞİL %6. Ölçüldü, tahmin değil: %10'da açık temada zemin
   #e2ebe7'ye çıkıyor ve üstündeki küçük birim fiyat satırı `--mute` ile
   4,48:1, `--brand` (en iyi birim işareti) ile 4,40:1 kontrast veriyor —
   WCAG AA eşiği 4,5. %6'da ikisi de 4,72 ve 4,63. Koyu temada zaten
   sorun yoktu (5,36 / 5,24), eşiği açık tema belirledi.

   Kutunun baskınlığı zaten zeminden değil; halka, marka üst şeridi ve
   bir kademe büyük fiyattan geliyor. Zemin yalnızca onları bağlıyor. */
.s-pkg__tile[data-vurgu='onerilen'] {
  border-color: var(--brand);
  border-top-color: var(--brand);
  background: var(--card-2);
  background: color-mix(in oklab, var(--brand) 6%, var(--card-2));
  box-shadow: 0 0 0 1px var(--brand);
  box-shadow: 0 0 0 1px var(--brand),
              0 10px 24px color-mix(in oklab, var(--brand) 18%, transparent);
}
.s-pkg__tile[data-vurgu='onerilen'] .s-pkg__fiyat { font-size: var(--fs-2xl); }
.s-pkg__tile[data-vurgu='onerilen'] .s-pkg__q { color: var(--ink-2); }

/* ── Kademe 2: seçili — dolu marka zemini ──
   Referanstaki degrade yerine düz marka rengi; sitenin geri kalanında
   degrade düğme yok. */
.s-pkg__tile[data-selected='true'] {
  background: var(--brand);
  border-color: var(--brand);
  border-top-color: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 0 2px var(--brand);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 35%, transparent);
  transform: translateY(-1px);
}
.s-pkg__tile[data-selected='true'] .s-pkg__fiyat { color: var(--on-brand); }
.s-pkg__tile[data-selected='true'] .s-pkg__q,
.s-pkg__tile[data-selected='true'] .s-pkg__birim { color: var(--on-brand); opacity: .85; }

/* Seçili + önerilen aynı kutuysa ikisi de okunsun: dolgu + boşluk + halka. */
.s-pkg__tile[data-vurgu='onerilen'][data-selected='true'] {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand);
}

/* FİYAT: kutucuktaki en baskın öğe. Önceden adet 16 px/700 beyaz,
   fiyat 11 px/400 griydi — fiyat duyarlı bir pazarda tersi. */
.s-pkg__fiyat {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ADET: paketi TANIMLAR, kararı vermez. */
.s-pkg__q {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

/* BİN BAŞINA: 16 paketi karşılaştırmanın tek yolu. Artık HER kutuda
   basılıyor — 1000'likte atlanınca sütunun tam ortasında delik
   açılıyordu ve göz karşılaştırmayı orada bırakıyordu. */
.s-pkg__birim {
  font-size: var(--fs-2xs);
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.s-pkg__birim span { opacity: .75; }

/* En düşük birim fiyat: karşılaştırmanın CEVABI. Yeni bir sayı değil,
   zaten basılan sayılardan hangisinin en küçük olduğu. */
.s-pkg__birim[data-iyi='true'] {
  color: var(--brand);
  font-weight: var(--fw-bold);
}
.s-pkg__tile[data-selected='true'] .s-pkg__birim[data-iyi='true'] {
  color: var(--on-brand);
  opacity: 1;
}

/* Rozetli kutuda içerik rozetin altından başlar. */
.s-pkg__tile:has(.s-pkg__flag) { padding-top: calc(var(--sp-5) + 16px); }

/* Bütün paketlerde aynı olan özellik ızgaranın üstünde bir kez yazılır. */
.s-pkg__ortak {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--mute);
}

/* ── Rozet — artık en fazla İKİ kutuda ──
   Rengi kutunun `data-vurgu`'sundan alıyor; eskiden rozetin kendi
   `data-tip`'i vardı ve iki yerde iki ayrı doğru tutuluyordu.
     En uygun → yeşil (en ucuz paket, her zaman)
     Popüler  → altın (tek önerilen paket) */
.s-pkg__flag {
  position: absolute;
  /* Kutunun ÜSTÜNDE değil İÇİNDE: -9px'te ızgara boşluğuna taşıyordu,
     ilk satırda da kart kenarından kesiliyordu. */
  top: 6px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  height: 18px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--green-deep);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  white-space: nowrap;
}
.s-pkg__tile[data-vurgu='uygun'] .s-pkg__flag {
  background: var(--brand);
  color: var(--on-brand);
}
/* Dolu marka zemininde ne yeşil ne altın pill okunur; ters çevrilir. */
.s-pkg__tile[data-selected='true'] .s-pkg__flag {
  background: var(--on-brand);
  color: var(--brand);
}

.s-pkg__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--mute);
}

/* Sepete ekle düğmesi tutarı da taşır: "Sepete Ekle · 55,00 ₺" */
.s-pkg__cta .tutar {
  font-variant-numeric: tabular-nums;
  opacity: .92;
}

/* Klavye odağı görünür kalmalı: radio `sr-only` olduğu için halkayı
   kutu taşıyor. `outline`, `box-shadow` değil — vurgu katmanlarıyla
   özgüllük yarışına girmesin ve dolu marka zemininde de görünsün. */
.s-pkg__tile:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Hareket kapalıysa tamamen dursun: küresel blok geçişi kesiyor ama
   `:hover { transform }` kuralını kesmiyor. */
@media (prefers-reduced-motion: reduce) {
  .s-pkg__tile { transition: none; }
  .s-pkg__tile:hover,
  .s-pkg__tile[data-selected='true'] { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÜRÜN KARTI İKONU

   Kart görselinde hizmet tipi ikonu (bkz. src/Design/ServiceIcon.php).
   Yarı saydam beyaz kutu, marka renginin üstünde okunur kalıyor.
   ══════════════════════════════════════════════════════════════════════ */

.thz-prod__ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .17);
  color: #fff;
  backdrop-filter: blur(2px);
}
.thz-prod__pkg { margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   HİZMET SAYFASI EKLERİ — kardeş şerit · nasıl satın alınır · fiyat
   tablosu · alt bant.

   Referans görsellerden UYARLANDI: referans açık temalı ve pembe;
   burası sitenin koyu teması ve marka yeşili. Ölçüler `tokens.css`ten.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Kardeş hizmet şeridi ─────────────────────────────────────────
   Aynı ailedeki hizmetler arası geçiş. Çıplak bağlantı satırı değil,
   KENDİ YÜZEYİ olan bir segment kontrolü: kart zemini, iç boşluk,
   yuvarlatılmış hap biçimli öğeler. Bulunulan hizmet dolgulu ve marka
   renginde; diğerleri sessiz, üzerine gelince yükseliyor.            */

.s-kardes {
  display: flex; gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-7);
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow-x: auto;
  scrollbar-width: none;
}
.s-kardes::-webkit-scrollbar { display: none; }

.s-kardes > * {
  flex: none;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 var(--sp-7);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-2); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.s-kardes a:hover { background: var(--card-2); color: var(--ink); text-decoration: none; }

/* Bulunulan hizmet: bağlantı değil, dolgulu işaretli öğe. */
.s-kardes__aktif {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: var(--fw-bold);
}

/* ── Nasıl satın alınır ───────────────────────────────────────────── */

.s-nasil { display: grid; gap: var(--sp-8); }
/* Sekme paneli dar bir sütunda duruyor; 820px'te iki sütuna geçmek
   metni okunamayacak kadar sıkıştırıyordu. Eşik yükseltildi ve görsel
   sütunu daraltıldı. */
@media (min-width: 1040px) { .s-nasil { grid-template-columns: 210px minmax(0, 1fr); } }
.s-nasil--gorselsiz { grid-template-columns: 1fr !important; }

/* Hizmete özel görsel — dosya değil, ÇİZİM. Platformun marka rengi +
   hizmet tipi ikonu + hizmet adı. Arşivdeki afiş kolajları yabancı
   logolu ve dağınıktı; bu 115 hizmette de aynı dilde. */
.s-nasil__gorsel {
  position: relative; margin: 0; align-self: start;
  aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-6); padding: var(--sp-8);
  background:
    radial-gradient(120% 90% at 25% 10%, color-mix(in srgb, var(--c) 55%, transparent), transparent 62%),
    linear-gradient(150deg, var(--c), color-mix(in oklab, var(--c) 45%, #000));
}
/* Yumuşak halka dokusu — düz renk zemin çıplak duruyordu. */
.s-nasil__gorsel::after {
  content: ''; position: absolute; inset: -30% -30% auto auto;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.s-nasil__ico {
  position: relative; z-index: 1;
  width: 84px; height: 84px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .17); color: #fff;
  backdrop-filter: blur(2px);
}
.s-nasil__ico svg { width: 44px; height: 44px; }
.s-nasil__gorsel figcaption {
  position: relative; z-index: 1; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.s-nasil__ic h2 { font-family: var(--font-head); font-size: var(--fs-xl); color: var(--ink); margin: 0; }
.s-nasil__ozet { margin: var(--sp-3) 0 var(--sp-6); color: var(--mute); font-size: var(--fs-sm); }

.s-nasil__adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
/* Adım kartları ancak gerçekten yer varken ikiye ayrılır. */
@media (min-width: 760px) { .s-nasil__adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-nasil__adimlar li {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--sp-6) + 34px);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  display: flex; flex-direction: column; gap: 2px;
}
.s-nasil__no {
  position: absolute; inset-inline-start: var(--sp-5); inset-block-start: var(--sp-6);
  width: 24px; height: 24px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-l); color: var(--brand);
  font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-xs);
}
.s-nasil__adimlar b { color: var(--ink); font-size: var(--fs-md); }
.s-nasil__adimlar li > span:last-child { color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }

.s-nasil__uyari {
  margin: var(--sp-6) 0 0; padding: var(--sp-5) var(--sp-6);
  border-inline-start: 3px solid var(--org); border-radius: var(--r-sm);
  background: var(--card-2); color: var(--ink-2); font-size: var(--fs-sm);
}

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

.s-fiyat { overflow-x: auto; }
.s-fiyat__tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.s-fiyat__tablo th, .s-fiyat__tablo td { padding: var(--sp-5) var(--sp-6); text-align: start; }
.s-fiyat__tablo th {
  font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--mute); border-bottom: 1px solid var(--line);
}
.s-fiyat__tablo tbody tr + tr td { border-top: 1px solid var(--line); }
.s-fiyat__tablo tbody tr:hover { background: var(--card-2); }
.s-fiyat__tablo .u-num { text-align: end; font-variant-numeric: tabular-nums; }
/* Seçili paket satırı tabloda da işaretli. */
.s-fiyat__tablo tr[data-secili='true'] { background: var(--brand-l); }
.s-fiyat__tablo tr[data-secili='true'] b { color: var(--brand); }
.s-fiyat__sec {
  display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill); border: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer;
}
.s-fiyat__sec:hover { border-color: var(--brand); color: var(--brand); }
.s-fiyat__not { margin: var(--sp-5) 0 0; font-size: var(--fs-xs); color: var(--mute); }

/* ── Alt bant ─────────────────────────────────────────────────────── */

.s-altbar { margin-top: var(--sp-16); background: var(--card); border-block: 1px solid var(--line); }
.s-altbar__ic {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--sp-9) 0;
}
@media (min-width: 760px) { .s-altbar__ic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-altbar__it { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.s-altbar__i {
  width: 38px; height: 38px; border-radius: var(--r-md); margin-bottom: var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-l); color: var(--brand);
}
.s-altbar__i svg { width: 19px; height: 19px; }
.s-altbar__it b {
  font-family: var(--font-head); font-size: var(--fs-2xl); color: var(--ink);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.s-altbar__it span { font-size: var(--fs-xs); color: var(--mute); }

/* Sekmeler artık ürün alanının altında, tam genişlikte. Orta sütunun
   içindeyken 411px kalıyor ve içerik okunmaz hâle geliyordu. */
.s-svc__alt { margin-top: var(--sp-9); }

/* ── Sekme paneli içeriği ─────────────────────────────────────────────
   `.thz-icerik` okunabilirlik için `--w-prose` ile daraltılmış. Sekmeler
   tam genişliğe taşınınca içerik solda dar bir sütun hâlinde kalıp sağda
   ölü alan bırakıyordu. Panelde sınır kaldırılıyor ve alan gerçekten
   kullanılıyor: çağrı kutusu tam genişlikte, madde listesi iki sütunda.

   Uzun paragraflar yine dar kalıyor — 1150px genişliğinde düz metin
   okunmuyor; sınır yalnızca YAPISAL bloklardan kalkıyor.            */

.s-svc__tabs .thz-icerik { max-width: none; }
.s-svc__tabs .thz-icerik > p { max-width: var(--w-prose); }

.s-svc__tabs .thz-icerik .lead { max-width: none; }
.s-svc__tabs .thz-icerik .lead p { max-width: none; }

/* Künye maddeleri iki sütunda — dört kısa satır alt alta dizilince
   panelin sağı tamamen boş kalıyordu. */
.s-svc__tabs .thz-icerik .check { display: grid; gap: var(--sp-4); }
@media (min-width: 820px) {
  .s-svc__tabs .thz-icerik .check { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-9); }
}

/* ── Değerlendirmeler ─────────────────────────────────────────────────
   Eski hâli: düz kartlar, metin karakteri yıldız (★), avatar yok,
   kartlar farklı yükseklikte ve tarih yoktu.                          */

/* Yıldız: iki katman: boş sıra + üstünde genişliği yüzdeyle kırpılmış
   dolu sıra. Yarım puanlar da doğru görünür. */
.c-yildiz { position: relative; display: inline-flex; line-height: 0; flex: none; }
.c-yildiz__bos { display: flex; color: var(--line); }
.c-yildiz__dolu {
  display: flex; position: absolute; inset-block: 0; inset-inline-start: 0;
  overflow: hidden; color: var(--gold, #E9B949); white-space: nowrap;
}

/* Puan özeti */
.s-rev__ozet {
  display: flex; align-items: center; gap: var(--sp-7);
  padding: var(--sp-7); margin-bottom: var(--sp-7);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2);
}
.s-rev__puan { display: flex; align-items: baseline; gap: var(--sp-2); }
.s-rev__puan b {
  font-family: var(--font-head); font-size: var(--fs-4xl); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.s-rev__puan span { color: var(--mute); font-size: var(--fs-md); }
.s-rev__ozetMetin { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-rev__ozetMetin > span { font-size: var(--fs-sm); color: var(--mute); }

/* Kartlar — eşit yükseklikli ızgara */
.s-rev__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.s-rev__kart {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-7);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.s-rev__kart:hover { border-color: var(--brand); }

.s-rev__ust { display: flex; align-items: center; gap: var(--sp-5); }
.s-rev__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-l); color: var(--brand);
  font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-lg);
}
.s-rev__kim { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.s-rev__kim b { color: var(--ink); font-size: var(--fs-md); }
.s-rev__kim > span { color: var(--mute); font-size: var(--fs-xs); }
.s-rev__yildiz { margin-inline-start: auto; }

.s-rev__kart p {
  margin: 0; color: var(--ink-2); font-size: var(--fs-md); line-height: var(--lh-body);
  flex: 1;                              /* Tarih hep en altta hizalı */
}
.s-rev__kart time { font-size: var(--fs-2xs); color: var(--mute); font-variant-numeric: tabular-nums; }