/* ══════════════════════════════════════════════════════════════════════
   ANA SAYFA BÖLÜMLERİ — kalite · neden biz · destek & garanti

   KAYNAK: kullanıcının verdiği üç referans.
   UYARLANDI, KOPYALANMADI:

     · referanslar AÇIK temalı (pembe/mor/beyaz), burası sitenin KOYU teması
     · referanslardaki degrade başlıklar yerine sitenin başlık tipografisi
     · renkler `tokens.css` değişkenlerinden; ham renk kodu yok
     · maskot/stok görsel yok — anlatım metin ve gerçek veriyle kuruluyor

   Ölçüler `thz-sec` ritmini takip eder (bölüm arası 36px), yani bu üç
   bölüm diğerlerinin arasına doğal oturur.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 1. KALİTE — başlık + akordeon + görsel ══════════════════════════ */

@media (min-width: 900px) {
}

.b-kicker {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--brand-l);
  color: var(--brand);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  align-self: flex-start;
}


/* Akordeon — <details> üzerine kurulu: JavaScript gerekmez. */

/* Görsel sütun — referanstaki telefon kompozisyonunun karşılığı.
   Stok fotoğraf ya da maskot yok: çerçevenin içi çizilmiş arayüz.  */

/* Arkadaki yumuşak lekeler — referanstaki renkli dairelerin karşılığı,
   marka paletiyle. */

/* Telefon */



/* Uçuşan rozetler */

@media (max-width: 899px) {
}

/* ══ 2. NEDEN BİZ — ortalanmış başlık + dört kart ════════════════════ */

.b-neden { margin-top: var(--sp-16); text-align: center; }
.b-neden__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}
.b-neden__head h2 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
@media (min-width: 700px) { .b-neden__head h2 { font-size: var(--fs-4xl); } }
.b-neden__head p { margin: 0; color: var(--ink-2); max-width: 62ch; }

.b-neden__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  text-align: start;
}
.b-kart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.b-kart:hover { border-color: var(--brand); }
.b-kart__i {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-l);
  color: var(--brand);
}
.b-kart b { font-size: var(--fs-base); color: var(--ink); }
.b-kart span { font-size: var(--fs-md); color: var(--ink-2); line-height: var(--lh-body); }

/* ══ 3. DESTEK & GARANTİ — yan yana iki kart ═════════════════════════ */

.b-destek {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-16);
}
@media (min-width: 860px) { .b-destek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.b-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-10);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  min-width: 0;
}
.b-panel h3 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--ink);
}
.b-panel > p { margin: 0; font-size: var(--fs-md); }

/* Sol panel: marka yeşilinin koyu tonu. */
.b-panel--destek {
  background: linear-gradient(160deg, var(--green-deep), var(--card));
  border-color: var(--brand);
}
.b-panel--destek h3, .b-panel--destek .b-kicker { color: var(--brand); }
.b-panel--destek .b-kicker { background: rgba(34, 181, 115, .16); }
.b-panel--destek > p { color: var(--ink-2); }

/* DESTEK GÖREVLİSİ SATIRI (denetim, madde 10).
   Bu blok HİÇ biçimlendirilmemişti: içteki sarmalayıcı `<span>` satır içi
   kaldığı için "Takıldığın yerde yardımcı olalım" ile "Her gün 09:00–24:00"
   TEK SATIRDA birleşiyor, başlık/alt metin ayrımı kaybolmuş görünüyordu.
   Fotoğraf da 96 px'lik kare kutuda `object-fit` olmadan duruyordu. */
.b-destek__kisi {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--card-2) 70%, transparent);
  border: 1px solid var(--line);
}
.b-destek__kisi img {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
}
.b-destek__kisi > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.b-destek__kisi b { font-size: var(--fs-md); color: var(--ink); line-height: var(--lh-tight); }
.b-destek__kisi > span > span { font-size: var(--fs-xs); color: var(--mute); }

/* Sohbet kesiti — TEMSİLÎ, gerçek bir konuşma değil ve öyle sunulmuyor. */
.b-chat { display: flex; flex-direction: column; gap: var(--sp-4); }
.b-chat__q, .b-chat__a {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  max-width: 92%;
  line-height: var(--lh-body);
}
.b-chat__q { background: var(--card-2); color: var(--ink-2); align-self: flex-start; }
.b-chat__a { background: var(--brand); color: var(--on-brand); align-self: flex-end; }

/* Sağ panel: güvence listesi. */
.b-panel--garanti { background: var(--card); }
.b-panel--garanti .b-kicker { background: var(--yel); color: var(--org); }
.b-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.b-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: var(--lh-body);
}
.b-liste svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }

.b-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  font-weight: var(--fw-bold);
  color: var(--brand);
  font-size: var(--fs-md);
}
.b-panel__cta svg { width: 16px; height: 16px; }

/* ══ GÖRSEL ŞERİT ═════════════════════════════════════════════════════
   `.thz-promos` / `.thz-promo` onaylı temada tanımlıydı ama hiç
   kullanılmıyordu. Buradaki eklemeler yalnızca fotoğraf katmanı ve
   kart davranışı — temadaki ölçüler korunuyor.                       */
.thz-promo {
  background: linear-gradient(120deg, var(--pg), color-mix(in oklab, var(--pg) 55%, #000));
  text-decoration: none;
  isolation: isolate;
}
/* Portre sağ kenarda, metnin ALTINA girmez: yazı `--pg` degradesinin
   üstünde kalır, fotoğraf kenardan yumuşayarak çıkar. */
.thz-promo__foto {
  position: absolute; right: 0; bottom: 0; z-index: -1;
  width: 46%; height: 100%; object-fit: cover; object-position: center 20%;
  opacity: .5;
  /* Maske GEÇ açılıyor: yazı kutunun %70'ine kadar uzanabiliyor ve
     fotoğrafla 37 px örtüşüyor. Maske %75'e kadar saydam kaldığı için
     örtüşen bölgede fotoğraf görünmüyor, yazı degradenin üstünde
     kalıyor. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 75%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 75%);
}
/* Metin sütunu: temadaki %70 dar kutularda fotoğrafa giriyordu. */
.thz-promo .t { max-width: 64%; }
.thz-promo .cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--pg); text-decoration: none;
}
.thz-promo .cta svg { width: 14px; height: 14px; }
.thz-promo:hover { filter: brightness(1.06); }
.thz-promo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 560px) {
  .thz-promo__foto { width: 38%; opacity: .4; }
}

/* ══ ANA SAYFA MAKALESİ ═══════════════════════════════════════════════
   Blogdan sonra gelen uzun içerik. KENDİ İÇİNDE kayan bir okuma
   penceresi: 17 bin karakteri sayfaya dökmek de, her seferinde "devamını
   oku"ya bastırmak da okumayı zorlaştırıyordu.                        */

/* Kartın kendisi okunur genişlikte ve ortalı. Önce `.s-hmakale__ic`
   ortalanmıştı; o zaman kart geniş kalıp iki yanında 317'şer px ölü
   alan bırakıyor ve kaydırma çubuğu kartın KENARINDA değil ORTASINDA
   duruyordu. Ölçü: metin genişliği + iki yanda iç boşluk. */
/* Kart 1240 px'lik bölümde ~610 px kalıyor, iki yanında ölü alan
   bırakıyordu; bölüm başlığı tam genişlikken içerik dar sütundu
   (denetim, madde 09). Okunabilirlik metnin kendi `--w-prose`
   sınırında korunuyor, kart genişliyor. */
/* ÖLÇÜ BU BLOĞA ÖZEL GENİŞLETİLDİ. `--w-prose` (541 px) tek sütunlu
   makale sayfası için doğru; 1240 px'lik ana sayfa bölümünde ise
   başlık tam genişlikken metin dar bir şerit kalıyordu. 760 px
   satır başına ~85 karakter — üst sınırda ama okunur, ve bölümle
   dengeli. Token'a dokunulmuyor: makale sayfaları 541'de kalıyor. */
.s-hmakale__kart {
  padding: var(--sp-9);
  max-width: 760px;
  margin-inline: auto;
}
.s-hmakale__ic { max-width: none; }
/* Paragraf ölçüsü kartın içinde kalsın; 541 px'lik dar sütun
   iki yanında ölü alan bırakıyordu. */
.s-hmakale__ic > p { max-width: none; }

/* ── İÇ KAYDIRMA ────────────────────────────────────────────────────
   Gövdenin TAMAMI basılıyor (SEO başlıkları kaynakta dursun diye) ama
   kutu kendi içinde kayıyor: 11.383 px sayfanın ortasına dökülmüyor.

   Yükseklik `clamp` ile: alt sınır 380 px — kısa ekranda bile üç
   paragraf görünür; üst sınır 760 px — dev monitörde kutu sayfayı
   yutmaz; arası `62vh`, yani her zaman ekranın bir parçası boş kalır
   ve altındaki bölüm görünür durur (kutunun bittiği anlaşılsın).

   `padding-bottom`, altındaki solma şeridinin son satırı yemesi için.
   `overscroll-behavior` VARSAYILANDA bırakıldı: `contain` deseydik
   kutunun sonuna gelince sayfa kaymaya devam etmez, dokunmatikte
   kullanıcı kutuya kilitlenirdi. */
.s-hmakale__kutu { position: relative; }
.s-hmakale__kaydir {
  max-height: clamp(380px, 62vh, 760px);
  overflow-y: auto;
  padding-inline-end: var(--sp-6);
  padding-bottom: var(--sp-8);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--brand) 55%, transparent) transparent;
}
.s-hmakale__kaydir:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-sm); }
.s-hmakale__kaydir::-webkit-scrollbar { width: 10px; }
.s-hmakale__kaydir::-webkit-scrollbar-track { background: transparent; }
.s-hmakale__kaydir::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--brand) 45%, transparent);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.s-hmakale__kaydir::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: content-box; }

/* Solma şeridi: metnin devam ettiği görünsün. Kaydırıcının KABUĞUNA
   takılı — kaydırma kabının içinde `position:absolute` içerikle birlikte
   kayar ve şerit ilk kaydırmada ekrandan çıkardı. Karta takılıydı, o da
   düğme yüksekliğini elle hesaplamayı gerektiriyordu; kabuk ölçüyü
   kendiliğinden tutturur.

   `right: 10px`: kaydırma çubuğunun üstünü örtmesin.
   `pointer-events: none` olmadan şeridin altındaki bağlantılar
   tıklanamaz olurdu. */
.s-hmakale__kutu::after {
  content: '';
  position: absolute;
  left: 0; right: 10px; bottom: 0;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--card));
}

/* Kutunun ne olduğu görünsün: kaydırma çubuğu her zaman yerinde durur
   ama dokunmatik cihazda hiç çizilmez. Küçük bir ipucu şeridi. */
.s-hmakale__ipucu {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6); padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  color: var(--mute); font-size: var(--fs-xs); font-weight: var(--fw-med);
}
.s-hmakale__ipucu svg { width: 14px; height: 14px; flex: none; }

/* Devamı bağlantısı: kırpıldığı belli olsun, kullanıcı aramasın. */
.s-hmakale__devam {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-7); min-height: 40px;
  padding: var(--sp-4) var(--sp-7);
  border: 1px solid var(--brand); border-radius: var(--r-md);
  color: var(--brand); font-weight: var(--fw-bold); text-decoration: none;
}
.s-hmakale__devam:hover { background: color-mix(in oklab, var(--brand) 12%, transparent); }
.s-hmakale__devam:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.s-hmakale__devam svg { width: 16px; height: 16px; }
.s-hmakale__ic > :first-child { margin-top: 0; }

/* Kaydırma çubuğu: koyu temada varsayılanı çok baskın. */

/* ══ KİMLER KULLANIYOR ════════════════════════════════════════════════
   Dört portre kartı. Görseller TEMSİLÎ; kartta hesap adı, yorum ya da
   istatistik yok — bölümün altındaki not bunu açıkça söylüyor.       */

/* Kart yükseklikleri EŞİT: metin uzunluğu farklı olduğu için etiket
   satırları farklı hizada duruyordu (denetim, madde 08). */
.thz-kimler {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-auto-rows: 1fr;
}

.thz-kisi {
  display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.thz-kisi:hover { border-color: var(--brand); }

.thz-kisi__f { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.thz-kisi__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Alt kenarda karta geçişi yumuşatan perde.
   Perde GÜÇLENDİRİLDİ (denetim, madde 08): dört fotoğrafın üçü koyu,
   biri parlak stüdyo zemini; eski %45'lik yumuşak geçişte parlak kart
   diğerlerinden kopuyordu. Artık her fotoğrafın altı kartın kendi
   zeminine iniyor, başlık dört kartta da aynı zeminde oturuyor. */
.thz-kisi__f::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 58%;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in oklab, var(--card) 65%, transparent) 55%,
    var(--card));
}
.thz-kisi__rozet { position: absolute; inset-block-start: var(--sp-5); inset-inline-start: var(--sp-5); z-index: 1; }

.thz-kisi__g { display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-4); padding: 0 var(--sp-6) var(--sp-6); margin-top: -14px; position: relative; }
.thz-kisi__g b { color: var(--ink); font-family: var(--font-head); font-size: var(--fs-base); }
.thz-kisi__g p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }

.thz-kisi__et { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; }
.thz-kisi__et span {
  padding: 3px var(--sp-5); border-radius: var(--r-pill);
  background: var(--card-2); border: 1px solid var(--line);
  font-size: var(--fs-2xs); color: var(--ink-2);
}
.thz-kimler__not { margin: var(--sp-6) 0 0; font-size: var(--fs-xs); color: var(--mute); }

/* Mobilde 4:5 fotoğraf kartı ~900 px yapıyordu; dört kart 3.600 px
   kaydırma demekti (denetim, madde 08). */
@media (max-width: 768px) {
  .thz-kisi__f { aspect-ratio: 3 / 2; }
}

/* ══ FOTOĞRAFLI DESTEK BANDI ══════════════════════════════════════════ */

.thz-bant--foto {
  display: grid; gap: var(--sp-8); align-items: center;
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: linear-gradient(120deg, var(--green-deep), var(--brand) 260%);
  border: 1px solid var(--brand);
}
@media (min-width: 900px) { .thz-bant--foto { grid-template-columns: 230px minmax(0, 1fr) auto; } }

.thz-bant__f { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; }
.thz-bant__f img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.thz-bant__f figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(8, 10, 13, .9));
  color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
}
.thz-bant__t { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.thz-bant__t b { color: #fff; font-family: var(--font-head); font-size: var(--fs-xl); line-height: var(--lh-tight); }
.thz-bant__t span { color: rgba(255, 255, 255, .84); font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 62ch; }
.thz-bant__b { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.thz-bant__b .thz-btn { white-space: nowrap; }

/* ── Platform kapağı ──────────────────────────────────────────────────
   `templates/pages/platform.php` içindeki `.p-kapak` bloğunun HİÇ CSS'i
   yoktu: görsel kendi doğal ölçüsünde (1200×675) basılıyor, künye de
   afişin altına biçimsiz düz metin olarak düşüyordu. Aşağısı yeni bir
   tasarım getirmez — onaylı şablondaki afiş davranışını uygular:
   sabit yükseklikli şerit, üstünde soldan sağa kararan perde ve
   perdenin üstünde marka karesi + ad + adet.                            */

.p-kapak {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

/* Yükseklik viewport'a göre esner ama tavanı var: afiş sayfanın önüne
   geçmemeli. Şablon `width="1200" height="400"` yazıyor, dosyalar ise
   1200×675; ikisi de `cover` ile kırpıldığı için ölçü buradan gelir. */
.p-kapak img {
  display: block;
  width: 100%;
  height: clamp(140px, 20vw, 240px);
  object-fit: cover;
  object-position: center 40%;
}

/* Perde: metin görselin neresine denk gelirse gelsin okunur kalsın. */
.p-kapak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .52) 40%, rgba(0, 0, 0, .06) 78%);
}

.p-kapak__ic {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--sp-7);
  inset-block-end: var(--sp-7);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}
.p-kapak__ic .c-tile {
  flex: none;
  /* `data-size="24"` display.css'te tanımlı değil (yalnızca 20/22/30/38
     var), o yüzden 36 px'e düşüyordu. Afiş için ölçü burada veriliyor. */
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
}
.p-kapak__ic b {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}
.p-kapak__ic span {
  display: block;
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-sm);
}

@media (max-width: 600px) {
  .p-kapak__ic { inset-inline-start: var(--sp-6); inset-block-end: var(--sp-6); }
  .p-kapak__ic b { font-size: var(--fs-lg); }
}

/* ── Açık temada destek paneli ────────────────────────────────────────
   `.b-panel--destek` degradesi `--green-deep` ile BAŞLIYOR; bu renk her
   iki temada da koyu. Koyu temada sorun yok çünkü metin de açık. Açık
   temaya geçince metin koyu mürekkebe ve marka yeşiline dönüyor, ama
   zemin koyu yeşil kaldığı için başlık okunmaz oluyordu.
   Açık temada degrade marka yeşilinin AÇIK tonundan başlar; panelin
   yeşil kimliği korunur, kontrast geri gelir.                          */
:root[data-theme='light'] .b-panel--destek {
  background: linear-gradient(160deg, var(--brand-l), var(--card));
}

/* ══════════════════════════════════════════════════════════════════════
   ANA SAYFA SSS  (`templates/home/sss.php`)
   Düz akordeon değil: numaralı kart ızgarası, açılırken yükseklik
   geçişi, sol kenarda büyüyen marka çizgisi, girişte kademeli belirme.
   Tamamı CSS — bölüm hiçbir JavaScript'e bağlı değil.
   ══════════════════════════════════════════════════════════════════════ */

.s-sss__head { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: var(--sp-9); }
.s-sss__head h2 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  margin: var(--sp-5) 0 var(--sp-4);
}
.s-sss__head p { margin: 0; color: var(--mute); font-size: var(--fs-md); }

/* `align-items: start` olmadan bir soru açılınca yanındaki kart da
   aynı boya uzayıp altında boşluk bırakıyordu. */
.s-sss__grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .s-sss__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Kart ──────────────────────────────────────────────────────────── */
.s-sss__q {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  /* Girişte kademeli belirme; --g şablondan gelen sıra numarası. */
  animation: s-sss-gir .5s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--g, 0) * 55ms);
}
@keyframes s-sss-gir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Sol kenar çizgisi: kapalıyken yok, açılırken yukarıdan aşağı büyür. */
.s-sss__q::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 3px;
  height: 0;
  background: var(--brand);
  transition: height .3s ease;
}
.s-sss__q[open] { border-color: var(--brand); background: var(--card-2); }
.s-sss__q[open]::before { height: 100%; }
.s-sss__q:hover { border-color: var(--brand); transform: translateY(-1px); }

/* ── Soru satırı ───────────────────────────────────────────────────── */
.s-sss__q > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-7);
  cursor: pointer;
  list-style: none;
  user-select: none;
  min-height: var(--tap);
}
.s-sss__q > summary::-webkit-details-marker { display: none; }
.s-sss__q > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-card); }

.s-sss__no {
  flex: none;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  opacity: .7;
  transition: opacity .18s ease;
}
.s-sss__q[open] .s-sss__no { opacity: 1; }

.s-sss__t {
  flex: 1;
  min-width: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* Artı işareti: iki çubuk. Açılınca çarpıya döner. */
.s-sss__x {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card-2);
  transition: background .18s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.s-sss__x::before,
.s-sss__x::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.s-sss__x::after { transform: translate(-50%, -50%) rotate(90deg); }
.s-sss__q[open] .s-sss__x { background: var(--brand); transform: rotate(135deg); }
.s-sss__q[open] .s-sss__x::before,
.s-sss__q[open] .s-sss__x::after { background: var(--on-brand); }

/* ── Cevap ─────────────────────────────────────────────────────────────
   Sabit yükseklik tahmini yok: 0fr → 1fr geçişi cevabın gerçek
   yüksekliğine kadar açılır, metin ne kadar uzun olursa olsun.        */
.s-sss__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.2, .7, .3, 1);
}
.s-sss__a > div { overflow: hidden; }
.s-sss__q[open] .s-sss__a { grid-template-rows: 1fr; }
.s-sss__a p {
  margin: 0;
  padding: 0 var(--sp-7) var(--sp-7) calc(var(--sp-7) + 28px);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* Hareketi azaltılmış tercihine saygı: her şey anında, animasyon yok. */
@media (prefers-reduced-motion: reduce) {
  .s-sss__q,
  .s-sss__q::before,
  .s-sss__x,
  .s-sss__x::before,
  .s-sss__x::after,
  .s-sss__a { animation: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   EKSİK VARLIK PAKETİ — boş durum çizimleri, "neden" kartları,
   kalite çizimi, araç şeması.
   Tamamı mevcut token'larla: --brand --brand-d --bg --card --card-2
   --line --ink --ink-2 --mute --font-head. Yeni renk tanımlanmadı.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- 1) Boş durum çizimleri (.c-empty bileşenine) ---- */
.c-empty { text-align: center; }
.c-empty__ik { display: block; width: 190px; height: auto; margin: 4px auto 14px; opacity: .95; }
@media (max-width: 480px) { .c-empty__ik { width: 150px; } }

/* ---- 2) "Neden biz" kartları — düz kart yerine dolu görünüm ---- */
.b-neden__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: bneden; }
@media (max-width: 960px) { .b-neden__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .b-neden__grid { grid-template-columns: 1fr; } }
.b-neden .b-kart {
  counter-increment: bneden; position: relative; overflow: hidden;
  padding: 22px 20px 20px; border-radius: 16px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease;
}
.b-neden .b-kart::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--brand), transparent 85%); opacity: .9;
}
.b-neden .b-kart::after {
  content: "0" counter(bneden); position: absolute; top: 12px; right: 16px;
  font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--brand); opacity: .12; letter-spacing: -.02em;
}
.b-neden .b-kart:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.b-neden .b-kart__i {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(140deg, var(--brand), var(--brand-d));
  color: #fff; box-shadow: 0 8px 20px rgba(34,181,115,.28);
}
.b-neden .b-kart__i svg { width: 24px; height: 24px; }
.b-neden .b-kart b { font-size: 16px; margin-top: 2px; }
.b-neden .b-kart > span:last-child { color: var(--mute); font-size: 13.5px; line-height: 1.55; }

/* ---- 3) Kalite bölümü görsel sütunu — "Aynı sayı, farklı değer" çizimi ---- */
/* `Icon::svg()` glifleri yalnızca viewBox taşır; ölçü kuralı olmayan
   her yerde konteyner boyutuna şişiyor. Bu kutuda 300 px'e çıkıyordu. */

/* ---- 4) Araç sayfası şeması ---- */
.t-arac-gorsel { display: block; width: 100%; height: auto; margin: 22px 0; border-radius: 16px; }

/* 404 sayfası: çizim eklenince blok ortalanıyor. */
.s-404 { text-align: center; }
.s-404 .s-links__row { justify-content: center; }

/* Açık temada boş-durum çizimleri koyu zemin için çizilmiş; hafif
   kısılıyor ki beyaz kart üstünde patlamasın. */
:root[data-theme='light'] .c-empty__ik { opacity: .88; }

/* ── Dokunma hedefi ───────────────────────────────────────────────────
   WCAG 2.5.8 (AA) bağımsız denetimler için 24×24 istiyor. Metin
   içindeki satır içi bağlantılar muaf; bunlar ise kendi başına duran
   bölüm bağlantıları ve 20px yüksekliğindeydiler.                     */

.thz-sec__more,
.b-panel__cta {
  min-height: 24px;
  align-items: center;
}

/* ══ 1. KALİTE — DÖNEN KART ══════════════════════════════════════════
   Eski `.b-kalite` / `.b-acc` / `.b-cizim` / `.b-blob` bloklarının
   yerine geçer. Sol sütun tek bir fotoğraf kartı; sağ sütun o kişinin
   hikâyesi. Kart 5 saniyede bir dönüyor.

   Fotoğraflar ÜST ÜSTE duruyor ve yalnızca `opacity` değişiyor:
   düzen hiç yeniden hesaplanmadığı için geçiş takılmıyor ve dönerken
   sayfa zıplamıyor.                                                  */

.b-donen {
  display: grid;
  gap: var(--sp-9);
  align-items: start;
  margin-top: var(--sp-16);
}
@media (min-width: 900px) {
  .b-donen { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--sp-14); }
}

.b-donen__gorsel { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }

.b-donen__kart {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--card);
}

.b-donen__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.b-donen__foto[data-secili='true'] { opacity: 1; }

/* Perde: adın ve rolün fotoğrafın üstünde her koşulda okunmasını
   sağlar. Yoksa açık renkli bir portrede beyaz yazı kayboluyor. */
.b-donen__perde {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, .82));
  pointer-events: none;
}

.b-donen__rozet {
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-start: var(--sp-6);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .74);
  color: #6fe0ab;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.b-donen__kim {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.b-donen__kim b {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: #fff;
}
.b-donen__kim > span { font-size: var(--fs-md); color: #e4e9ee; }

/* İlerleme çizgisi — bir sonraki karta ne kaldığını gösterir.
   JavaScript kapalıyken genişliği 0 kalır; boş bir çizgi görünür. */
.b-donen__cizgi {
  position: relative;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
/* ÇUBUK TEK BİR ANİMASYON. Önce `transition: width 400ms` vardı ve
   betik her 200 ms'de yeni bir genişlik yazıyordu: her geçiş bitmeden
   bir sonraki emir geliyor, çubuk hedefi hiç yakalayamıyordu — ölçümde
   bir turun sonunda %24'te kalmıştı. Sıfırlamada da 400 ms boyunca
   geri sarıyordu. Süre betikten (`animationDuration`) veriliyor,
   yönetimdeki `sure` ayarıyla aynı. */
.b-donen__cizgi > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--brand);
  border-radius: 2px;
  animation: b-donen-bar 5s linear forwards;
}
@keyframes b-donen-bar { from { width: 0; } to { width: 100%; } }

.b-donen__sec { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.b-donen__yuz {
  appearance: none;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  overflow: hidden;
  flex: none;
  opacity: .55;
  transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.b-donen__yuz:hover { opacity: .85; }
.b-donen__yuz[data-secili='true'] { border-color: var(--brand); opacity: 1; }
.b-donen__yuz img { width: 100%; height: 100%; object-fit: cover; display: block; }

.b-donen__not { font-size: 10px; color: var(--mute); line-height: var(--lh-body); }

.b-donen__metin { display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }
.b-donen__metin h2 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
@media (min-width: 700px) { .b-donen__metin h2 { font-size: var(--fs-4xl); } }
.b-donen__metin > p { margin: 0; color: var(--ink-2); max-width: 58ch; }

/* Adımlar: kart dönerken metin uzunluğu değişiyor. `min-height` ile
   liste sabit yükseklikte kalıyor, böylece altındaki düğme her
   dönüşte yer değiştirmiyor. */
.b-donen__adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--line);
}
.b-donen__adimlar li {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-7) 0;
  border-block-start: 1px solid var(--line);
}
.b-donen__no {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-l);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.b-donen__ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.b-donen__ad b {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.b-donen__ad > span { color: var(--mute); font-size: var(--fs-md); line-height: var(--lh-body); }

.b-donen__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-11);
}
.b-donen__altnot { font-size: var(--fs-sm); color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
  .b-donen__foto, .b-donen__yuz { transition: none; }
  /* Hareket kısıtlıysa çubuk hiç oynamaz; betik de kartı kendiliğinden
     döndürmez, yüz düğmeleri çalışmaya devam eder. */
  .b-donen__cizgi > i { animation: none; }
}

/* ══ 4. SORULAN SORU — sohbet kesiti + karşılaştırma ═════════════════ */

.b-soru {
  display: grid;
  gap: var(--sp-9);
  align-items: start;
  margin-top: var(--sp-16);
}
@media (min-width: 900px) {
  .b-soru { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--sp-14); }
}

.b-soru__txt { display: flex; flex-direction: column; gap: var(--sp-9); min-width: 0; }
.b-soru__txt h2 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
@media (min-width: 700px) { .b-soru__txt h2 { font-size: var(--fs-4xl); } }
.b-soru__txt > p { margin: 0; color: var(--ink-2); max-width: 52ch; }

.b-soru__mad { display: flex; flex-direction: column; border-block-end: 1px solid var(--line); }
.b-soru__m {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-7) 0;
  border-block-start: 1px solid var(--line);
}
.b-soru__m b {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.b-soru__m span { color: var(--mute); font-size: var(--fs-md); line-height: var(--lh-body); }

.b-soru__sag { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.b-soru__panel { padding: var(--sp-9); gap: var(--sp-7); }

.b-soru__kim { display: flex; align-items: center; gap: var(--sp-5); }
.b-soru__kim > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--brand);
  flex: none;
}
.b-soru__kim > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.b-soru__kim b {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.b-soru__saat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.b-soru__saat i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
  flex: none;
}

.b-soru__not { font-size: 10px; color: var(--ink-2); line-height: var(--lh-body); }

.b-soru__tablo {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  padding: 0 var(--sp-8);
}
.b-soru__tablo table { width: 100%; border-collapse: collapse; }
.b-soru__tablo th, .b-soru__tablo td {
  padding: var(--sp-5) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  text-align: end;
  color: var(--mute);
}
.b-soru__tablo th { text-align: start; }
.b-soru__tablo tr + tr th, .b-soru__tablo tr + tr td { border-block-start: 1px solid var(--line); }
.b-soru__kotu { padding-inline-end: var(--sp-3) !important; }
.b-soru__iyi { color: var(--brand) !important; font-weight: var(--fw-semibold); }

/* ══ POPÜLER PAKETLER — kademeli kartlar ═══════════════════════════════
   Referans tasarımdan: ortalanmış başlık + kısa çizgi, platform
   çipleri, dört kademe kartı. Kart içeriğinin TAMAMI veritabanından;
   burada yalnızca ölçü ve renk var.

   Sekmeler radio ile: `.s-kd__r` panellerden ve çiplerden ÖNCE
   basılıyor, çünkü `~` yalnızca sonraki kardeşleri görür. JavaScript
   kapalıyken de sekme değişir.                                       */
.s-kd__head { text-align: center; margin-bottom: var(--sp-8); }
.s-kd__head h2 { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 38px); margin: 0; }
.s-kd__alt { margin: var(--sp-4) 0 0; color: var(--mute); font-size: var(--fs-md); }
.s-kd__cizgi {
  display: block; width: 54px; height: 3px; margin: var(--sp-6) auto 0;
  border-radius: 99px; background: var(--brand);
}

/* Radio'lar erişilebilir kalmalı: `display:none` olsaydı klavye grubu
   hiç bulamazdı. Ekrandan çıkarılıyor, odak halkası çipe taşınıyor. */
.s-kd__r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.s-kd__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.s-kd__chip {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  min-height: 44px; padding: 0 var(--sp-7);
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--card); color: var(--ink);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.s-kd__chip:hover { border-color: var(--c, var(--brand)); }
.s-kd__chip i { flex: none; }

/* Panel görünürlüğü ve seçili çip — dört platforma kadar. */
.s-kd__panel { display: none; }
.s-kd__r:nth-of-type(1):checked ~ .s-kd__panels > .s-kd__panel:nth-of-type(1),
.s-kd__r:nth-of-type(2):checked ~ .s-kd__panels > .s-kd__panel:nth-of-type(2),
.s-kd__r:nth-of-type(3):checked ~ .s-kd__panels > .s-kd__panel:nth-of-type(3),
.s-kd__r:nth-of-type(4):checked ~ .s-kd__panels > .s-kd__panel:nth-of-type(4) { display: block; }

.s-kd__r:nth-of-type(1):checked ~ .s-kd__chips > .s-kd__chip:nth-of-type(1),
.s-kd__r:nth-of-type(2):checked ~ .s-kd__chips > .s-kd__chip:nth-of-type(2),
.s-kd__r:nth-of-type(3):checked ~ .s-kd__chips > .s-kd__chip:nth-of-type(3),
.s-kd__r:nth-of-type(4):checked ~ .s-kd__chips > .s-kd__chip:nth-of-type(4) {
  border-color: var(--c, var(--brand));
  background: color-mix(in oklab, var(--c, var(--brand)) 14%, var(--card));
  box-shadow: 0 0 0 1px var(--c, var(--brand)) inset;
}
/* Klavye odağı radio'da; halka görünür çipte çizilmeli. */
.s-kd__r:nth-of-type(1):focus-visible ~ .s-kd__chips > .s-kd__chip:nth-of-type(1),
.s-kd__r:nth-of-type(2):focus-visible ~ .s-kd__chips > .s-kd__chip:nth-of-type(2),
.s-kd__r:nth-of-type(3):focus-visible ~ .s-kd__chips > .s-kd__chip:nth-of-type(3),
.s-kd__r:nth-of-type(4):focus-visible ~ .s-kd__chips > .s-kd__chip:nth-of-type(4) {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

.s-kd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 1100px) { .s-kd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .s-kd__grid { grid-template-columns: minmax(0, 1fr); } }

.s-kd__kart {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.s-kd__kart:hover { border-color: color-mix(in oklab, var(--c, var(--brand)) 55%, var(--line)); transform: translateY(-2px); }

/* Başlığın solundaki renk çubuğu referans tasarımdan; platformun
   GERÇEK marka rengiyle çiziliyor. */
.s-kd__kbas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.s-kd__kbas::before {
  content: ''; position: absolute; left: 0; top: var(--sp-5); bottom: var(--sp-5);
  width: 3px; border-radius: 99px; background: var(--c, var(--brand));
}
.s-kd__kbas h3 { margin: 0; font-family: var(--font-head); font-size: var(--fs-lg); line-height: 1.2; }
.s-kd__marka { flex: none; opacity: .9; }

.s-kd__ozl { list-style: none; margin: 0; padding: 0; flex: 1; }
.s-kd__ozl li {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
  font-size: var(--fs-sm); line-height: 1.35;
}
.s-kd__tik {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: color-mix(in oklab, var(--c, var(--brand)) 22%, transparent);
  color: var(--c, var(--brand));
}
.s-kd__tik svg { width: 11px; height: 11px; }
/* Son satır kademenin ayırt edici sözü; referansta da vurgulu. */
.s-kd__ozl--vurgu {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand); font-weight: var(--fw-med);
}
.s-kd__ozl--vurgu .s-kd__tik { background: color-mix(in oklab, var(--brand) 26%, transparent); color: var(--brand); }

.s-kd__ayak {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap; padding: var(--sp-6);
}
.s-kd__fiyat { display: flex; align-items: baseline; gap: var(--sp-4); min-width: 0; }
.s-kd__fiyat s { color: var(--mute); font-size: var(--fs-xs); }
.s-kd__fiyat b { font-family: var(--font-head); font-size: var(--fs-xl); color: var(--ink); white-space: nowrap; }
.s-kd__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--sp-7); border-radius: var(--r-md);
  background: var(--brand); color: #06120D;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
}
.s-kd__btn:hover { background: color-mix(in oklab, var(--brand) 85%, #fff); color: #06120D; }
.s-kd__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.s-kd__tum {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-7); color: var(--mute); font-size: var(--fs-sm); text-decoration: none;
}
.s-kd__tum:hover { color: var(--brand); }
.s-kd__tum svg { width: 14px; height: 14px; }

/* ══ MÜŞTERİ YORUMLARI — iki sıra kayan şerit ══════════════════════════
   Şerit iki kopya taşır ve `-50%` kadar ötelenir: ilk kopyanın sonu
   ikinci kopyanın başıyla çakışınca döngü dikişsiz kapanır. Süre kart
   SAYISINA bağlı (`--n`), böylece hız kart sayısından bağımsız kalır —
   sabit süre olsaydı 4 kartlık sıra fırlar, 16 kartlık sıra sürünürdü. */
.s-yr { padding-block: var(--sp-10); overflow: hidden; }
.s-yr__head { text-align: center; margin-bottom: var(--sp-9); }
.s-yr__rozet {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6); border-radius: 99px;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--line));
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .04em; text-transform: uppercase;
}
.s-yr__hbas {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-9); flex-wrap: wrap; margin-top: var(--sp-6); text-align: left;
}
.s-yr__hbas h2 { font-family: var(--font-head); font-size: clamp(24px, 3.2vw, 34px); margin: 0; }
.s-yr__hbas p { margin: var(--sp-3) 0 0; color: var(--mute); font-size: var(--fs-sm); max-width: 46ch; }
.s-yr__puan { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.s-yr__puan > b { font-family: var(--font-head); font-size: clamp(36px, 5vw, 54px); line-height: 1; }
.s-yr__bes { color: var(--mute); font-size: var(--fs-lg); }
.s-yr__pyld { color: #F5B301; align-self: center; }
.s-yr__n { display: block; width: 100%; color: var(--mute); font-size: var(--fs-xs); }
.s-yr__n b { color: var(--ink); }

.s-yr__ray { overflow: hidden; padding-block: var(--sp-4); }
.s-yr__ray + .s-yr__ray { margin-top: var(--sp-2); }
.s-yr__serit {
  display: flex; gap: var(--sp-6); width: max-content;
  /* Süre kart SAYISINA bağlı (`--n`): hız kart sayısından bağımsız
     kalsın. 6s ölçümde ~59 px/sn veriyordu — göz satırı bitirmeden
     kart geçiyordu. 14s ~25 px/sn: okunacak kadar yavaş, durmuş
     görünmeyecek kadar canlı. */
  animation: s-yr-kay calc(var(--n, 8) * 14s) linear infinite;
}
.s-yr__kopya { display: flex; gap: var(--sp-6); }
.s-yr__ray[data-yon='sag'] .s-yr__serit { animation-direction: reverse; animation-duration: calc(var(--n, 8) * 16.5s); }
/* Okumak isteyen dursun: fare üstünde ve kart içinde odak varken. */
.s-yr__ray:hover .s-yr__serit,
.s-yr__ray:focus-within .s-yr__serit { animation-play-state: paused; }
@keyframes s-yr-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hareket kısıtlıysa animasyon YOK; şerit elle kaydırılabilir kalır,
   yani hiçbir yorum erişilemez olmaz. */
@media (prefers-reduced-motion: reduce) {
  .s-yr__serit { animation: none; }
  .s-yr__ray { overflow-x: auto; }
}

.s-yr__kart {
  flex: 0 0 340px; max-width: 340px;
  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);
}
@media (max-width: 520px) { .s-yr__kart { flex-basis: 280px; max-width: 280px; } }
.s-yr__ust { display: flex; align-items: center; gap: var(--sp-4); }
.s-yr__av {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c, var(--brand)); color: #fff;
  font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: .02em;
}
.s-yr__avp {
  position: absolute; right: -3px; bottom: -3px;
  display: inline-flex; padding: 2px; border-radius: 8px;
  background: var(--card); line-height: 0;
}
.s-yr__kim { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.s-yr__kim b { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.s-yr__kim > span { color: var(--mute); font-size: var(--fs-xs); }
.s-yr__tik { display: inline-flex; color: var(--brand); }
.s-yr__tik svg { width: 13px; height: 13px; }
.s-yr__yld { flex: none; color: #F5B301; }
/* Site markası karosu: `mark.svg` kendi yuvarlak zeminini taşıyor,
   `c-tile` sarmalayıcısına gerek yok — ölçü doğrudan veriliyor. */
.s-yr__marka { display: block; border-radius: 5px; flex: none; }
.s-yr__metin {
  margin: 0; color: var(--ink2, var(--ink)); font-size: var(--fs-sm); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.s-yr__alt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.s-yr__plat {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--mute); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-yr__onay { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--brand); font-weight: var(--fw-med); flex: none; }
.s-yr__onay svg { width: 12px; height: 12px; }