/* karsilastirma sayfasına ÖZGÜ yerleşim. Ortak bileşenler `bilesen.css`te kalır — buraya kopyalanan bir bileşen aynı kavramın ikinci yazımı olur. ============================================================================ C-15 — KARŞILAŞTIRMA IZGARASI (S-35) ============================================================================ REFERANSTAN ÖLÇÜLEN (ref-envanter/envanter.md §2 · D-comparison.md §2): · Şekil: 39 satır × 3 kolon (etiket · biz · öteki), hücre değeri İKİLİ. "Limited" / kısmi puan diye bir üçüncü hâl YOK — ölçüldü, o kelime yalnız anlatı metninde geçiyor, hiç tablo hücresi değeri olmuyor. · Kullanım: 16 karşılaştırma sayfasının **10'unda** ızgara var (envanter C-15 satırı da "10" diyor); o 10'un **2'sinde bölümün tamamı canlıda bastırılmış, yani ızgara fiilen **8** sayfada görünüyor. Kalan 6 sayfa yalnız düz metin SSS. · 6 örtük grup: yetenek 6 · entegrasyon 7 · sipariş eylemleri 8 · raporlama 8 · fiyat modeli 1 · self-servis 4. ⚠️ Bu kırılımın TOPLAMI **34**, ilan edilen satır sayısı **39** — yani envanterin kendi kovaları toplama karşı tutmuyor, 5 satırın grubu ölçülmemiş. O yüzden bu dosya satır sayısına ya da grup sayısına BAĞLI DEĞİL: kaç satır ve kaç grup basılacağı bir İÇERİK kararıdır (W-61), CSS her ikisinde de aynı çalışır. REFERANSTAN AYRILDIĞIMIZ ÜÇ YER (ikisi onun ölçülmüş kusuru): 1. Rakip adı SUNUCUDA/HTML'de basılır. Referans istemci taraflı bul-değiştir yapıyor (`data-competitor` niteliği çalışma anında sabit bir yer tutucu adı değiştiriyor); JS'siz tarayıcıda ve tarayıcı botunda sayfa YANLIŞ rakip adını gösteriyor (envanter §6 madde 2, D-comparison §2.1). Bu dosya hiçbir yerde çalışma zamanı metin değişimi VARSAYMAZ ve sayfaya ait tek bir satır JS gerektirmez. 2. Her satır ÖLÇÜM TARİHİ taşır. Referansta hiçbir tarih/kaynak dipnotu YOK (D-comparison §2.4) ve aynı sayfalar rakibin dolar fiyatını anlatıyor — damgasız bir rakip iddiası bayatlar ve sessizce yanlış beyana döner. Sayfanın kendi girişi de bunu vaat ediyor ("Every row carries the date it was measured"), yani `.kars-damga` süs değil o cümlenin MEKANİZMASI: vaat ile mekanizma aynı katmanda. 3. Kendi kolonumuzda da "yok" işareti basılabilir. Referansın ızgarasında kendi kolonunda **0 tire** var, yani kendi ürünü kurgu gereği 39/39 kazanıyor. Bu dosya iki kolonu ayırt ETMEZ: `.kars-im-yok` her iki kolonda da geçerlidir ve hiçbir kural "bizim" kolonu ayrıcalıklı kılmaz. MARKUP SÖZLEŞMESİ (W-61 bu şekli bekler; `` semantiği KORUNUR — mobilde `display:block` ile yeniden yığmak tabloyu ekran okuyucudan düşürürdü, o yüzden her genişlikte gerçek tablo kalıyor):
…
… … …
…
… … …

…

ZORUNLU İKİ MARKUP KURALI (ikisi de bu dosyanın kapsayamadığı ayak): a) Her işaret hücresi `.gizli-okur` METNİ taşır ("Yes"/"No" gibi). İşaret CSS'ten çiziliyor, yani anlamı taşıyan şey o metin. Metin yoksa hücre ekran okuyucuya BOŞ görünür. Yan kazanç: CSS hiç yüklenmezse `.gizli-okur` kırpması da düşer ve hücre düz metin olarak okunur. b) `.kars-kap` odaklanabilir (`tabindex="0"`) ve adlandırılmış bir bölge. Kaydırma kabı klavyeyle kaydırılamazsa dar ekranda içerik erişilemez. ÖLÇÜLMÜŞ İKİ TEKNİK KARAR: · İşaretler FONT GLİFİ DEĞİL, CSS'ten çizilir. Ölçüldü: `✓` (U+2713) `tokens.css`in latin ve latin-ext alt kümelerinin İKİSİNDE DE yok, yani yazılsa başka bir fonttan çizilirdi (bu deponun "Türkçe sayfada Google Fonts'a güvenme" dersinin işaret ayağı). Tire (U+2014) alt kümede VAR ama simetri için o da çizildi: böylece iki işaretin de font bağı sıfır. · Yapışkanlık İKİ EKSENDE ayrı ayrı çözülür ve ikisi aynı şey değil: – BAŞLIK SATIRI (dikey) sayfa kaydırmasına göre yapışır. Bu yüzden `overflow-x:auto` yalnız ≤767px'te açılır: `overflow-x:auto` bir elemanı İKİ eksende de kaydırma kabı yapar (`overflow-y:visible` hesaplanırken `auto`ya döner) ve o kap dikey kaymadığı için yapışkanlık sayfaya değil KABA göre çözülür. Bu depoda ölçülmüş hata: sıfırdan farklı bir `top` verilirse başlık ilk satırın ÜSTÜNE biner ve bir satır kaybolur. ÖNCÜL: `bilesen.css` `.nav{position:relative}` — nav YAPIŞKAN DEĞİL, o yüzden buradaki ofset `0` ve o hatanın koşulu hiç doğmuyor. Nav yapışkan yapılırsa bu satır yeniden ölçülür (sıfırdan farklı ofset gerekir ve kap içinde o ofset ilk satırı yer). – İLK KOLON (yatay) kabın kendi kaydırmasına göre yapışır; kap gerçekten yatay kaydığı için bu eksen ÇALIŞIR. Satırın neyi anlattığı böyle kaybolmuyor. Takas yazılı: ≤767px'te başlık satırı sayfa kaydırmasında yapışmaz. Kabul edilebilir, çünkü (a) her hücre kendi `.gizli-okur` metnini taşıyor, (b) kolon ölçüleri o genişlikte tablonun SIĞMASI için küçültülüyor, yani kap pratikte hiç kaymıyor. · `border-collapse:separate` — `collapse` ile kenarlık tabloya ait olur ve yapışkan hücreyle birlikte GEZMEZ (yapışkan başlığın altı sıyrılır). Kenarlıklar bu yüzden hücrenin kendi `box-shadow:inset`inde. HAREKET SÖZLEŞMESİ: bu dosyada **0 `@keyframes`, 0 `animation`, 0 `transition`** var ve hiçbir kural durağan hâlde `opacity:0` ya da `transform` ile eleman saklamıyor. Yani `prefers-reduced-motion:reduce` altında "ilerleyen animasyon 0" ve "görünmez kritik eleman 0" iddiaları bu dosya için YAPI GEREĞİ doğrudur — ölçülecek bir istisna yok. ============================================================================ */ /* ---- KAP ------------------------------------------------------------------ */ /* Üst boşluk BURADA yazılı, `bilesen.css`in `.bas + *` kuralına bırakılmıyor: ızgara `.bas`ın komşusu olmak zorunda değil (araya giriş metni girebilir) ve o kural ateşlemeyince tablo başlık bloğuna yapışıyor. `llm-info.css`teki `.tbl-kap` ile KARIŞTIRILMASIN: o dosya bu sayfada hiç yüklenmiyor (sayfa tokens + temel + bilesen + karsilastirma yüklüyor) ve oradaki tablo bilinçli olarak yapışkan başlıksız. Aynı kavramın ikinci yazımı değil; farklı bir karar. */ .kars-kap { margin-block-start: var(--b5); } /* Odak halkası: `temel.css`in genel `:focus-visible` kuralı `border-radius`ı `--y-hap` yapıyor — bir kaydırma kabı dikdörtgen olduğu için o halka hap biçiminde köşeleri kesiyor. Kart yarıçapına çekiliyor. */ .kars-kap:focus-visible { border-radius: var(--y-kart); } /* ---- IZGARA -------------------------------------------------------------- */ /* Kolon ölçüleri yerel değişkenlerde: tek yerde durur, kırılmada tek satırla küçülür ve tablo hiçbir yerde sayı taşımaz. */ .kars { --kars-etiket-en: calc(var(--b7) + var(--b6)); /* etiket kolonu tabanı */ --kars-mark-en: var(--b6); /* işaret kolonu */ --kars-zemin: var(--kagit); /* yapışkan hücrenin opak zemini */ inline-size: 100%; /* Tablo bu ölçünün altına düşmez; düşerse etiketler okunamayacak kadar sarar. Kap ondan darsa kaydırma KAPTA olur, sayfada değil. */ min-inline-size: calc(var(--kars-etiket-en) + var(--kars-mark-en) * 2); table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--t9); line-height: var(--t9-s); } /* Tint bölüme konursa yapışkan hücrenin zemini bölümle aynı olur; yoksa kayarken beyaz bir şerit görünür. */ .bolum-tint .kars { --kars-zemin: var(--kagit2); } .kars th, .kars td { text-align: start; vertical-align: top; padding-block: var(--b3); padding-inline: 0 var(--b4); /* Kenarlık hücrede (yukarıdaki `separate` gerekçesi). */ box-shadow: inset 0 -1px 0 var(--cizgi); } /* ---- BAŞLIK SATIRI ------------------------------------------------------- */ .kars thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--kars-zemin); font-weight: 500; font-size: var(--tm); line-height: var(--tm-s); text-transform: uppercase; letter-spacing: .09em; color: var(--soluk); box-shadow: inset 0 -1px 0 var(--murekkep); } /* ---- ETİKET KOLONU (ilk kolon, yatayda yapışkan) ------------------------ */ .kars .kars-etiket { position: sticky; inset-inline-start: 0; z-index: 1; inline-size: var(--kars-etiket-en); background: var(--kars-zemin); font-weight: 500; color: var(--murekkep); } /* Köşe hücresi iki eksende de yapışkan — ikisinin de üstünde durmalı. */ .kars thead .kars-etiket { z-index: 3; } /* ---- SATIR ÖLÇÜM DAMGASI ------------------------------------------------ */ /* Sayfanın girişinin vaat ettiği şey: her satır ölçüldüğü tarihi taşır. */ .kars-damga { display: block; margin-block-start: var(--b1); font-size: var(--tmicro); line-height: var(--tm-s); font-weight: 400; text-transform: uppercase; letter-spacing: .09em; color: var(--soluk); } /* ---- GRUP SATIRI -------------------------------------------------------- */ /* Referansta gruplar ÖRTÜK (D-comparison §2.2: "6 implicit categories"), yani 39 satır tek blok hâlinde akıyor. Burada başlık olarak basılıyorlar: uzun bir ikili ızgarada okuyucunun hangi yetenek ailesinde olduğunu bilmesi gerek. */ .kars-grup th { padding-block: var(--b4) var(--b2); background: var(--kagit2); font-weight: 500; font-size: var(--tm); line-height: var(--tm-s); text-transform: uppercase; letter-spacing: .09em; color: var(--soluk); box-shadow: inset 0 -1px 0 var(--cizgi); } /* Grup satırının etiket hücresi tek başına tüm satırı kaplıyor; yatay yapışkanlık orada anlamsız (kapsam zaten tablo genişliği) ve `z-index` verilmesi başlık satırının üstüne çıkmasına yol açar. */ .kars-grup .kars-etiket { position: static; inline-size: auto; } /* ---- İŞARET HÜCRESİ ----------------------------------------------------- */ .kars-h { text-align: center; inline-size: var(--kars-mark-en); } /* İşaretin kendisi. `.kars-h` içinde de, aşağıdaki anahtarda da AYNI sınıf kullanılır — anahtarın gösterdiği şeyin tablodaki işaretle birebir aynı olduğu böyle garanti: iki yazım olsaydı biri bayatlardı. */ .kars-im { position: relative; display: inline-block; vertical-align: middle; } /* VAR — dolu daire + beyaz onay çizgisi. Anlam RENKTEN DEĞİL ŞEKİLDEN geliyor (dolu yuvarlak ↔ düz çizgi): gri tonlamada ve renk körlüğünde de ayrılır, üstüne hücrenin `.gizli-okur` metni var. */ .kars-im-var { inline-size: var(--t5); block-size: var(--t5); border-radius: var(--y-hap); background: var(--murekkep); } .kars-im-var::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: calc(var(--t5) / 4); block-size: calc(var(--t5) / 2.2); border-inline-end: 1px solid var(--kagit); border-block-end: 1px solid var(--kagit); transform: translate(-50%, -55%) rotate(45deg); } /* YOK — çıplak yatay çizgi, daire YOK. Doygun bir renk kullanılmıyor: `tokens.css` `--vurgu`yu tek bir işe (nokta, nabız, odak halkası) ayırmış ve "yok" bir vurgu değil. `--soluk` beyazda 6,74:1 — grafik nesne için gereken 3:1'in üstünde. */ .kars-im-yok { inline-size: var(--b3); block-size: 0; border-block-start: 1px solid var(--soluk); } /* ---- İŞARET ANAHTARI ---------------------------------------------------- */ /* İki şekil ne demek: yazılı olmadan şekil bir konvansiyondur, yazılıysa bir sözleşme. */ .kars-anahtar { display: flex; flex-wrap: wrap; gap: var(--b3) var(--b5); margin-block-start: var(--b4); font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); } .kars-anahtar li { display: flex; align-items: center; gap: var(--b2); } /* ---- HÜKMÜN YANINA GEREKEN CÜMLE --------------------------------------- */ /* İkili bir ızgara iki şeyi anlatamaz: "kısmen var" ile "bilerek yok". İşaret ikili kalıyor (üçüncü bir şekil icat edilmiyor — referansın "Limited" hücresi ölçüldü ve hiç kullanılmıyor), cümle tabloya DEĞİL altına yazılıyor; hücrenin `.gizli-okur` metni de okuyucuyu oraya yolluyor. `.kars-anahtar` yerine ayrı bir sınıf, çünkü o yatay bir anahtar şeridi, bu dikey bir gerekçe listesi. */ .kars-sinir { display: flex; flex-direction: column; gap: var(--b3); margin-block-start: var(--b5); max-width: var(--olcu-bas); font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); } .kars-sinir strong { font-weight: 500; color: var(--murekkep); } /* ---- SAYFA DÜZEYİ ÖLÇÜM DAMGASI ---------------------------------------- */ /* Kutunun kendisi `bilesen.css`in `.kaynak-not`u — üst boşluk, ayraç çizgisi, `--t9`, `--soluk` ve ölçü kapağı hepsi orada ve İKİNCİ KEZ yazılmıyor. Burada yalnız o kutunun taşımadığı şey var: tarihin `--soluk` içinde kaybolmaması. Kaynağını gösteren bir iddia, tarihi okunmuyorsa damgasız bir iddiadır. */ .kars-kaynak time, .kars-kaynak strong { font-weight: 500; color: var(--murekkep); } /* ---- KIRILMA ------------------------------------------------------------ */ @media (max-width: 991px) { .kars th, .kars td { padding-inline-end: var(--b3); } } @media (max-width: 767px) { /* Kaydırma KAPTA açılıyor, sayfada değil: `temel.css` `body{overflow-x:hidden}` sayfa kaydırmasını kapatıyor, yani kap olmasa fazla genişlik KIRPILIRDI (kaydırılamaz, okunamaz). Yukarıdaki ölçülmüş gerekçe yüzünden bu bildirim ≥768px'te YOK: orada kap kurulmadığı için başlık satırı sayfaya göre gerçekten yapışıyor. */ .kars-kap { overflow-x: auto; } /* Kolonlar burada küçülüyor ki tablo tipik telefon genişliğinde SIĞSIN ve kap pratikte hiç kaymasın (kap yine de güvenlik ağı olarak duruyor). Taban: 168 + 2×64 = 296px; 390px'te gutter 20 → 350px içerik. */ .kars { --kars-etiket-en: calc(var(--b7) + var(--b5)); --kars-mark-en: calc(var(--b6) - var(--b3)); } .kars th, .kars td { padding-block: var(--b2); } .kars-im-var { inline-size: var(--t7); block-size: var(--t7); } .kars-im-var::after { inline-size: calc(var(--t7) / 4); block-size: calc(var(--t7) / 2.2); } .kars-anahtar { gap: var(--b2) var(--b4); } }