/* =====================================================================
   FERRINI — karsilastirma.css: kategori içi ürün karşılaştırma tablosu
   Solda sabit özellik sütunu, sağda ürünler. Dar ekranda tablo yatay kaydırılır,
   ilk sütun yerinde kalır. Aynı olan satırlar soluk, farklı olanlar koyu;
   ★ yerine .iyi sınıfı o satırda öne çıkan hücreyi işaretler.

   table-layout:fixed şart: serbest düzende uzun bir hücre ("Motor; kumanda,
   buton, akıllı ev, rüzgâr ve güneş sensörü") kendi sütununu genişletiyor,
   üstteki ürün başlıkları da buna uyup düzensiz aralıklarla dağılıyordu.
   Sabit düzende bütün ürün sütunları eşit; uzun metin sarar.
   ===================================================================== */
.kars{--ilk:clamp(140px,16vw,205px);--sut:180px;margin:clamp(28px,4vw,48px) 0 0}
.kars .kaydir{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50% )}
.kars .ktablo{table-layout:fixed;width:100%;min-width:calc(var(--ilk) + var(--n) * var(--sut));
  border-collapse:separate;border-spacing:0;text-align:left}
.kars .bos,.kars tbody th[scope="row"]{width:var(--ilk)}
.kars th,.kars td{overflow-wrap:break-word}

/* ---- ürün başlıkları: tek parça şerit ----
   Ürünler ayrı ayrı kart değil; hepsi arkaplanlı tek bir şeridin sütunları.
   Kart sayısı arttığında aradaki boşluklar sıkışıp düzeni bozuyordu.
   Dikey sticky kullanılmaz: .kaydir yatay kaydırma kutusu olduğu için sticky'nin
   dayanağı pencere değil bu kutu olur; başlık satırı yapışmaz, sadece 60 px aşağı
   kayıp ilk grup başlığının üstüne biner.  height:1px sütunların satır
   yüksekliğince uzamasını sağlayan tablo numarası. */
.kars thead th{height:1px;background:var(--color-card);padding:14px 14px 16px;
  vertical-align:top;font-weight:400}
.kars thead th.bos{background:transparent;padding:0}
.kars thead th.ilk{border-radius:14px 0 0 14px}
.kars thead th:last-child{border-radius:0 14px 14px 0}
.kars thead th.ilk ~ th{box-shadow:inset 1px 0 0 rgba(0,0,0,.055)}   /* ürünler arası ince ayraç */
.kars .ukart{display:flex;flex-direction:column;height:100%;color:var(--color-ink)}
.kars .ukart .vis{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:#fff;margin-bottom:10px}
.kars .ukart .vis img{position:absolute;left:5%;top:5%;width:90%;height:90%;object-fit:contain;
  transition:transform .3s var(--ease)}
/* çizim değil fotoğrafsa (gorsel_foto ya da kapak fotoğrafına düşülmüşse) kutuyu doldurur */
.kars .ukart .vis.foto img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.kars .ukart:hover .vis img{transform:scale(1.03)}
.kars .ukart .ad{display:block;font-size:14.5px;font-weight:500;line-height:1.25;letter-spacing:-.008em}
/* kart altındaki özet: ürünün neyi öncelediğini bir cümlede söyler */
.kars .ukart .ozet{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--color-ink-soft)}
/* margin-top:auto — ad/özet kaç satır sürerse sürsün bağlantı sütunun dibinde hizalanır */
.kars .ukart .link{display:block;margin-top:auto;padding-top:10px;font-family:var(--font-label);
  font-weight:var(--weight-label);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-ink-soft);transition:color .2s var(--ease)}
.kars .ukart:hover .link{color:var(--color-accent)}

/* ---- grup başlığı ---- */
/* Başlık hücresi tüm tabloyu kapladığı için kendisi değil İÇERİĞİ yapışır:
   .gb sticky left:0 ile yatay kaydırmada da solda kalır. */
.kars tr.grup th{padding:34px 16px 12px 0;background:var(--color-paper)}
.kars tr.grup .gb{position:sticky;left:0;display:inline-block;white-space:nowrap;
  padding-right:14px;background:var(--color-paper)}
.kars tr.grup .gt{display:inline-block;vertical-align:middle;font-family:var(--font-display);
  font-weight:var(--weight-display);font-size:clamp(17px,1.5vw,21px);letter-spacing:-.012em;
  line-height:1.2;color:var(--color-ink)}
.kars tr.grup .gi{display:inline-block;vertical-align:middle;width:20px;height:20px;margin:-3px 10px 0 0;
  fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kars tr.grup+tr th[scope="row"],.kars tr.grup+tr td{border-top:2px solid var(--color-ink)}

/* ---- satırlar ---- */
.kars tbody th[scope="row"]{position:sticky;left:0;z-index:2;background:var(--color-paper);
  padding:13px 18px 13px 0;font-size:14px;font-weight:500;
  line-height:1.35;color:var(--color-ink);border-top:1px solid var(--color-line);vertical-align:top}
/* .kaydir tam genişlikte kaydığı için yapışkan sütun sayfa payının sağında durur;
   payın altından kayan hücreler görünmesin diye sola doğru uzayan bir maske konur.
   background:inherit satır vurgusunu da izler. */
.kars tbody th[scope="row"]::before{content:"";position:absolute;top:0;bottom:0;right:100%;
  width:50vw;background:inherit}
.kars tbody td{padding:13px 14px;font-size:14px;line-height:1.45;color:var(--color-ink);
  border-top:1px solid var(--color-line);vertical-align:top}
.kars tbody tr.ayni th[scope="row"],.kars tbody tr.ayni td{color:var(--color-ink-soft)}
.kars tbody td.yok{color:var(--color-ink-faint,#b9b6ae)}
.kars tbody td.iyi{font-weight:500;position:relative;padding-left:28px}
.kars tbody td.iyi::before{content:"";position:absolute;left:11px;top:17px;width:9px;height:9px;border-radius:50%;
  background:var(--color-accent)}
.kars tbody tr:hover th[scope="row"],.kars tbody tr:hover td{background:#faf9f7}
.kars .teyit{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;border-radius:50%;
  background:var(--color-line);font-size:10px;font-style:normal;color:var(--color-ink-soft);vertical-align:1px;cursor:help}

.kars .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){
  .kars{--ilk:124px;--sut:168px}
  .kars thead th{padding:12px 11px 13px}
  .kars .ukart .ozet{font-size:12px}
  .kars tbody th[scope="row"]{font-size:13px;padding-right:12px}
  .kars tbody td{font-size:13px;padding:11px 11px}
  .kars tbody td.iyi{padding-left:25px}
  .kars tbody td.iyi::before{left:9px;top:15px}
  .kars tr.grup th{padding:26px 12px 9px 0}
  .kars tr.grup .gt{font-size:16px}
  .kars tr.grup .gi{width:17px;height:17px;margin-right:8px}
}