/* ==========================================================
   KARŞILAŞTIRMA — vitrin stilleri
   ----------------------------------------------------------
   İKİ YÜZEY:
     1) /karsilastir            → ürün karşılaştırma tablosu
     2) /karsilastirma[/{slug}] → karşılaştırma içerik sayfaları

   TASARIM KARARLARI (denetimlerle uyumlu):
   · TABLO SEMANTİĞİ BOZULMAZ. Dar ekran için `display:block` YASAK —
     satır/sütun ilişkisi erişilebilirlik ağacından düşerdi. Kaydırma
     SARMALAYICIDA yapılır (.table-scroll, shop.css) ve o kap klavyeyle
     odaklanabilir.
   · Kolon genişliği `width` ile DEĞİL `min-width` ile verilir: `width`
     daralmayı engeller, `min-width` kabında kaymaya izin verir.
   · Çok kolonlu her ızgara izinde `minmax(0, Nfr)` yazılır; çıplak `1fr`
     örtük `auto` (min-content) tabanı yüzünden geniş bir içerikle bütün
     sayfayı yatay kaydırır.
   · Kırılma noktaları depo genelindeki onaylı listeden seçildi (640, 900).
   ========================================================== */

/* ==========================================================
   1) KARŞILAŞTIRMA ŞERİDİ (her sayfada, liste doluyken)
   ----------------------------------------------------------
   BİLEREK YAPIŞKAN DEĞİL: ekranın altına kilitlenen ikinci bir çubuk,
   dijital ürün sayfasındaki `.dij-cubuk` ile üst üste binerdi. Şerit
   akışın içinde durur, hiçbir şeyi örtmez.
   ========================================================== */
.krs-serit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--primary-soft);
}

.krs-serit__baslik {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--title);
  margin-right: auto;
}

.krs-serit__sayi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
}

.krs-serit__urunler {
  display: flex;
  flex-wrap: wrap;
  /* 8px: iki komşu 44px'lik dokunma hedefi arasında WCAG'ın istediği
     ayrım kalsın (6px'te dar ekranda sarmalanan satırlar birbirine
     yapışık ölçülmüştü). */
  gap: 8px;
}

/* ==========================================================
   ŞERİT ÜRÜN BAĞLANTISI — DOKUNMA HEDEFİ 44px
   ----------------------------------------------------------
   ÖLÇÜM (chrome-headless-shell, elementFromPoint VURUŞ TESTİ,
   4 ürünlü liste): min-height'sız hâlinde bu bağlantılar 320,
   360, 390, 414 ve 768px'te 37–43px yükseklikteydi (ör.
   123x42, 183x37, 117x37) — WCAG 2.5.5 eşiğinin altında.

   NİÇİN ::before DEĞİL, min-height: şerit sarmalı bir flex ve
   satırlar arası boşluk yalnızca 8px. Negatif inset'li bir
   hedef büyütücü, ALT SATIRDAKİ komşu bağlantının hedefiyle
   çakışır ve yanlış dokunma üretirdi. min-height çakışma
   üretmez; şerit 7px büyür, düzen bozulmaz.
   ========================================================== */
.krs-serit__urun {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 220px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.krs-serit__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================
   2) "KARŞILAŞTIR" DÜĞMESİ (ürün kartı ve ürün sayfası)
   ----------------------------------------------------------
   Dokunma hedefi 44×44'ün ALTINA DÜŞMEZ. Seçili durum `aria-pressed`
   ile duyurulur; renk TEK BAŞINA anlam taşımaz (ikon ve metin de değişir).
   ========================================================== */
.krs-ekle {
  margin: 0;
}

.krs-ekle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--btn-radius);
  background: var(--card-bg);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.krs-ekle__btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.krs-ekle__btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.krs-ekle--sayfa .krs-ekle__btn {
  width: auto;
  padding: 0 20px;
}

/* ==========================================================
   3) KARŞILAŞTIRMA TABLOSU
   ========================================================== */
.krs-arac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.krs-arac__bilgi {
  color: var(--muted);
  font-size: 14px;
  margin-right: auto;
}

/* Süzgeç anahtarı: JavaScript'siz çalışsın diye gerçek bir gönder düğmesi.
   `aria-pressed` durumu duyurur, `::before` süs noktası durumu gösterir. */
.krs-anahtar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.krs-anahtar::before {
  content: "";
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: var(--pill);
  background: var(--border-strong);
  box-shadow: inset 12px 0 0 0 var(--card-bg);
  transition: background-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.krs-anahtar[aria-pressed="true"] {
  border-color: var(--primary);
}

.krs-anahtar[aria-pressed="true"]::before {
  background: var(--primary);
  box-shadow: inset -12px 0 0 0 var(--card-bg);
}

/*
   `position: relative` SÜS DEĞİL, HATA DÜZELTMESİ — TARAYICIDA ÖLÇÜLDÜ.

   Tablo hücrelerinde ekran okuyucu için `.visually-hidden` metinler var
   ("Listeden çıkar: <ürün adı>"). shop.css o sınıfı `position: absolute`
   yapıyor. Konumlanmış bir ata YOKSA bu ögelerin KAPSAYAN BLOĞU ilk kapsayan
   bloktur (viewport), yani `.table-scroll` üzerindeki `overflow-x: auto`
   ONLARI KIRPMAZ — mutlak konumlu bir öge, kapsayan bloğu olmayan bir atanın
   overflow kuralına uymaz.

   ÖLÇÜM (Chromium, 320px): kaydırma kabı tabloyu düzgün kırpıyordu
   (clientWidth 263, scrollWidth 802) ama gizli metinler tablonun kaydırılmış
   koordinatlarında (left 742px) duruyordu ve KÖK ÖGENİN kaydırma alanını
   733px'e çıkarıyordu: `documentElement.scrollWidth 733`, `window.scrollX 428`
   — yani BÜTÜN SAYFA yatay kayıyordu. `overflow: hidden` eklemek İŞE YARAMADI
   (aynı sebep); `position: relative` eklemek 305/0'a düşürdü.

   Yani: kaydırma kabı, içindeki mutlak konumlu ögelerin kapsayan bloğu OLMAK
   ZORUNDA. Aynı desen `.table-scroll` kullanan her yerde geçerlidir.
*/
.krs-tablo-kap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.krs-tablo {
  /*
     `width` DEĞİL `min-width`: 4 kolonlu tablo 320px'lik ekranda okunamaz
     hâle gelmesin diye taban genişlik verilir, ama tablo kendi kabında
     (.table-scroll) kayar; SAYFA yatay kaymaz.
  */
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.krs-tablo th,
.krs-tablo td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.krs-tablo tbody tr:last-child th,
.krs-tablo tbody tr:last-child td {
  border-bottom: 0;
}

/* Kriter sütunu: satır başlığı okunur kalmalı */
.krs-tablo th[scope="row"] {
  min-width: 150px;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}

.krs-tablo th[scope="col"] {
  min-width: 180px;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  vertical-align: top;
}

.krs-tablo tbody tr:nth-child(odd) {
  background: var(--surface);
}

.krs-satir--fark th[scope="row"] {
  border-left: 3px solid var(--accent);
}

.krs-fark-etiket {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent-strong);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.krs-not {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
}

.krs-bos {
  color: var(--muted);
}

.krs-deger--success { color: var(--success); font-weight: 600; }
.krs-deger--danger { color: var(--danger); font-weight: 600; }
.krs-deger--warning { color: var(--accent-strong); font-weight: 600; }

/* Kolon başlığı: görsel + ad + fiyat + çıkar düğmesi */
.krs-kolon {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.krs-kolon__gorsel {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.krs-kolon__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   KOLON BAŞLIĞINDAKİ ÜRÜN ADI — DOKUNMA HEDEFİ 44px
   ----------------------------------------------------------
   ÖLÇÜM (vuruş testi, 4 ürünlü tablo): 1024px ve üzerinde
   163x35, 204x35, 250x35 — yani 44px'in 9px altında. Dar
   ekranda ise ada hiç vurulamıyordu.

   `.krs-kolon` bir flex sütun (gap: 8px) olduğu için
   min-height burada YALNIZCA kısa adlarda devreye girer:
   iki satıra taşan ad zaten 44px'i geçer, düzen değişmez.
   align-items:center metni dikeyde ortalar, aksi hâlde ad
   kutunun tepesine yapışırdı.
   ========================================================== */
.krs-kolon__ad {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--title);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.krs-kolon__ad:hover { text-decoration: underline; }

.krs-kolon__fiyat {
  color: var(--title);
  font-size: 17px;
  font-weight: 700;
}

.krs-kolon__cikar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--btn-radius);
  background: var(--card-bg);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.krs-kolon__cikar:hover {
  border-color: var(--danger);
  background: var(--surface);
}

.krs-sepet-hucre {
  padding-top: 14px;
}

/* ==========================================================
   4) İÇERİK SAYFALARI (/karsilastirma)
   ========================================================== */
.krs-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.krs-kart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.krs-kart:hover {
  border-color: var(--border-strong);
  box-shadow: var(--card-hover-shadow);
}

/* Kart başlığı tek satıra sığan KISA bir başlıkta 19px x 1.3 = 25px'e
   düşer (uzun başlık iki satıra taşıp eşiği kendiliğinden geçtiği için
   demo veride görünmüyordu — gizli bir kırık). min-height dokunma
   hedefini garanti eder, uzun başlıkta hiçbir şeyi değiştirmez.
   `.krs-kart` bir flex sütun olduğu için display:flex düzeni bozmaz. */
.krs-kart__baslik {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.krs-kart__baslik:hover { text-decoration: underline; }

.krs-kart__ozet {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.krs-kart__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

/* --- Sayfa başlığı ve taraf kartları --- */
.krs-hero {
  padding: 28px 0 8px;
}

.krs-hero h1 {
  font-size: 32px;
  line-height: 1.2;
}

.krs-hero__ozet {
  max-width: 68ch;
  margin-top: 12px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

.krs-taraflar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}

.krs-taraf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.krs-taraf--kazanan {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.krs-taraf__rozet {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.krs-taraf__gorsel {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.krs-taraf__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.krs-taraf__ad {
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
}

.krs-taraf__alt {
  color: var(--muted);
  font-size: 14px;
}

.krs-taraf__fiyat {
  color: var(--title);
  font-size: 18px;
  font-weight: 700;
}

/* --- Sonuç / öneri kutusu --- */
.krs-sonuc {
  margin: 28px 0;
  padding: 22px;
  border: 1px solid var(--accent);
  border-radius: var(--card-radius);
  background: var(--accent-soft);
}

.krs-sonuc h2 {
  font-size: 21px;
  margin-bottom: 10px;
}

.krs-sonuc__metin {
  color: var(--title);
  font-size: 16px;
  line-height: 1.7;
}

/* --- Kazanan hücresi --- */
.krs-kazanan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/*
   Kazanan işareti RENGE BAĞLI DEĞİLDİR: renk körü bir okuyucu için yeşil bir
   nokta hiçbir şey söylemez. İşaret shop.css'teki `.badge--success` rozetidir
   (metin taşır) ve hücrede ayrıca `aria-label` ile duyurulur. Burada yalnızca
   yerleşim verilir — renk beş temada da denetlenmiş rozetten gelir.
*/
.krs-kazanan__isaret {
  flex: 0 0 auto;
}

/* --- SSS --- */
.krs-sss {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 28px 0;
}

.krs-sss__oge {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.krs-sss__soru {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 16px;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.krs-sss__soru::-webkit-details-marker { display: none; }

/*
   Açılır/kapanır olduğunu GÖSTEREN işaret. Yerel üçgen işaretçi kaldırıldığı
   için yerine bir tane konmak zorunda: işaretsiz bir <summary> tıklanabilir
   göründüğünü hiç söylemez.

   `content` değeri ASCII KAÇIŞIYLA yazılır ("\203A" = tek yönlü tırnak "›").
   Kaynak dosyaya doğrudan ASCII dışı karakter yazmak Türkçe kodlama kapısını
   riske atar; kaçış her kodlamada aynı baytları üretir.
*/
.krs-sss__soru::after {
  content: "\203A";
  margin-left: auto;
  padding-left: 10px;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.18s var(--ease);
}

.krs-sss__oge[open] .krs-sss__soru::after {
  transform: rotate(-90deg);
}

.krs-sss__cevap {
  padding: 0 16px 16px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

/* --- İlgili içerik --- */
.krs-ilgili {
  margin: 28px 0;
}

.krs-ilgili__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-top: 14px;
}

.krs-ilgili__oge {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--title);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.krs-ilgili__oge:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}

.krs-ilgili__gorsel {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.krs-ilgili__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   5) DAR EKRAN
   ----------------------------------------------------------
   Onaylı kırılma noktaları: 640 ve 900 (bkz. DuyarlilikTest).
   ========================================================== */
@media (max-width: 900px) {
  .krs-hero h1 { font-size: 27px; }
  .krs-hero__ozet { font-size: 16px; }
}

@media (max-width: 640px) {
  .krs-serit {
    align-items: stretch;
    flex-direction: column;
  }

  .krs-serit__baslik { margin-right: 0; }

  .krs-serit__eylem > * { flex: 1 1 auto; }

  .krs-arac__bilgi { margin-right: 0; width: 100%; }

  .krs-hero { padding-top: 18px; }
  .krs-hero h1 { font-size: 24px; }

  .krs-tablo { font-size: 14px; }
  .krs-tablo th,
  .krs-tablo td { padding: 10px 12px; }
  .krs-tablo th[scope="col"] { min-width: 160px; }
  .krs-tablo th[scope="row"] { min-width: 130px; }

  .krs-sonuc { padding: 18px; }
}

/* ==========================================================
   6) HAREKETİ AZALT
   ----------------------------------------------------------
   Bu dosya shop.css'in yanında yüklenir ve oradaki genel blok geçiş
   sürelerini zaten sıfırlar; yine de kendi geçişlerini AÇIKÇA kapatır ki
   dosya tek başına (tema shop.css'i ezse bile) doğru davransın.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .krs-ekle__btn,
  .krs-anahtar,
  .krs-anahtar::before,
  .krs-kart,
  .krs-kolon__cikar,
  .krs-ilgili__oge,
  .krs-sss__soru::after {
    transition-duration: 0.01ms;
  }
}