/* ============================================================================ C-05 — KAYNAK ŞERİDİ, süreğen MARQUEE varyantı (S-31). 🔴 BU DOSYA DURAĞAN IZGARAYI YAZMIYOR — O ZATEN KURULU. Ölçüldü (29 Eylül): durağan varyant `assets/anasayfa.css:156-176` + `:402`'de `.kaynak-izgara` · `.kaynak-h` · `.kaynak-ad` · `.kaynak-pil` adlarıyla duruyor ve `index.html` onu kullanıyor (10 hücre; `.kaynak-izgara` 1, `.kaynak-h` 10, `.kaynak-ad` 10, `.kaynak-pil` 10). Hover pill'i, soldan süzülen `translateX`i, dokunmatik kapatması — hepsi yazılı. İkinci bir yazım aynı kavramın iki kopyası olurdu: bugün aynı, yarın ayrışır; üstelik bu dosya SONRA yüklendiği için aynı özgüllükte kaskadı ezip çalışan şeridi sessizce bozardı. (`.kaynak-not` bir BAŞKA kavram — istatistik bandının kaynak notu — ve doğru yerde, `bilesen.css:88`de; onunla karıştırılmasın.) GERÇEK BOŞLUK YALNIZ MARQUEE: depoda `marquee|kayan` deseni 0 geçiş. Referansta iki varyant ölçüldü: · durağan IZGARA — ana sayfa, 5 kolon × 3 satır = 15 müşteri logosu, gap 48 satır / 32 sütun, hücre 214px; mobil 3 kolon / 106px / 16px. · süreğen MARQUEE — dikey sayfalar, tek satır, **n=20** üye, yatay oto-kaydırma (`logo-slider`), üye doğal genişliği 142,5px (logo görseli), `container-medium` İÇİNDE (tam kanama YOK). Bu dosya ikincisini kuruyor. 🔴 İÇERİK KARARI ZATEN VERİLMİŞ (envanter §7): **bizde müşteri logosu YOK.** Üyeler "Refik neyi okur" KAYNAKLARIDIR: Shopify, ürün kataloğu, varyant/stok, kargo ve iade politikası, SSS, blog, sipariş durumu. Her üye = ikon + tek etiket. Uydurma müşteri logosu, "trusted by / loved by" bandı ve rakip adı YASAK — üçü de `test/siteAnasayfa.test.ts`in dürüstlük kapılarında, ve rakip taraması bu CSS dosyasını DA tarıyor. Müşteri logosu geldiği gün bileşen DEĞİŞMEZ: aynı yol, aynı döngü; yalnız üyenin içine ikon yerine logo girer. ── TÜKETİCİ (ölçüldü) ───────────────────────────────────────────────────── Checklist'te marquee'yi isteyen TEK satır **S-10** — `site/sektor-.html` ×3 — ve o sayfalar BUGÜN YOK. Yani bu dosyanın bugün tüketicisi sıfır ve o sayfalar `anasayfa.css`i YÜKLEMEYECEK. Bu yüzden marquee kendi kendine yeterli olmak zorunda: aşağıdaki her kural `.kaynak-kayan` altında KAPSAMLI, yani hücrenin taban kuralı olmadan da çiziliyor. ── NEDEN `.kaynak-kayan` ALTINDA KAPSAMLI (kaskad güvenliği) ───────────── Hiçbir kural çıplak `.kaynak-h` / `.kaynak-ad` / `.kaynak-pil` seçicisine yazılmadı. Hepsi `.kaynak-kayan <...>` (0,2,0) — yani: · `index.html` bu dosyayı yüklese BİLE etkisi SIFIR (orada `.kaynak-kayan` yok), çalışan durağan ızgara dokunulmaz kalır; · aynı özgüllükte kaskad yarışı YOK, yükleme sırası önemsiz. Bedeli: üç bildirim (`display:flex` · `align-items` · `gap`) hücrenin taban kuralıyla ortak. Bilinçli takas — alternatifi hücreyi `anasayfa.css`ten `bilesen.css`e TAŞIMAK ve o HTML'e dokunan bir iş (bu turun kapsamı dışı). RANDEVU: hücre `bilesen.css`e yükseltildiği gün aşağıdaki üç ortak bildirim bu dosyadan DÜŞER; kalan kurallar (yön, `flex:none`, `nowrap`) marquee'ye özgü. ── MARKUP SÖZLEŞMESİ ──────────────────────────────────────────────────────
· İkinci yol ZORUNLU: kesintisiz döngünün matematiği ona dayanıyor. · İkinci yol `aria-hidden="true"` taşımak ZORUNDA — yoksa ekran okuyucu listeyi İKİ KEZ okur; az-hareket kuralı da o niteliğe bağlı. · Kapsayıcı `.kap` İÇİNDE kalır (referansın marquee'si de `container-medium` içinde): tam kanama yok, 390px'te yatay kaydırma riski sıfır. · `.ac` scroll-reveal `temel.css`ten gelir (JS yoksa hiçbir şey gizli kalmaz). ── HAREKET SÖZLEŞMESİ ───────────────────────────────────────────────────── Marquee SÜREĞEN döngüdür (`infinite`) — bileşenin "en az bir süreğen döngü" ayağı bu. `prefers-reduced-motion: reduce` kipinde DURUR ve içerik OKUNUR kalır: ilerleyen animasyon 0 · görünmez kritik eleman 0 · KIRPMA 0. ⚠️ `temel.css`in genel az-hareket bloğu bunu TEK BAŞINA yapamaz: o blok yalnız SÜRE / GECİKME / TEKRAR SAYISINI eziyor, `transform`u ezmiyor. Süre .001ms'ye inince animasyon SON karesine atlar ve son kare `translateX(-100%)` — yani şerit tamamen görüş DIŞINA kayar ve içerik kaybolur. Aşağıdaki kendi az-hareket bloğu tam bu yüzden var; genel bloğa güvenmek sessiz bir kayıptı. ── ÖLÇÜLMEDİĞİ İÇİN YAPILMAYANLAR (uydurma yok) ────────────────────────── · Kenar solma maskesi YOK: referansın maskesi olup olmadığı ÖLÇÜLMEDİ (CSS'i okunmadı, alınmadı) ve maske içeriği kısmen gizler. Ölçülmemiş bir süsü eklemek yerine yok sayıldı. · Üyeye SABİT genişlik verilmedi. Referansın üyesi 142,5px'lik bir logo GÖRSELİ; bizim üyemiz METİN ("Shipping policy") ve sabit genişlik onu kırpardı. Doğal genişlik + `nowrap`. · Üyeler arası boşluk ÖLÇÜLMEDİ (referans CSS'i okunmadı) — `--b5` bizim tokenlı seçimimiz, referans ölçümü DEĞİL. · `--kayan-sure` bir ÖLÇÜM DEĞİL, beyan edilmiş bir değer: CSS döngü süresini içerik genişliğinden türetemez. Üye sayısı büyürse aynı okuma hızını korumak için bu değer de büyütülmeli (üye ↑ → süre ↑), yoksa şerit hızlanır. ÖLÇÜLDÜ: 10 üye → çevrim 1543px; 40s ≈ **39 px/s**. Referansın n=20'sinde aynı hızı korumak ~80s ister — sayıyı değiştiren süreyi de değiştirir. ── ÖLÇÜLDÜ (başsız Chrome + CDP, sentetik 10 üyeli fikstür) ─────────────── İki yönlü kalibre: NORMAL kipte `ilerleyen animasyon = 2` (yani ölçüm kör değil), AZ HAREKET kipinde 0. kip │ anim │ ilerleyen │ görünmez üye │ kap DIŞI üye │ yatay kaydırma 1440 normal │ 2 │ 2 │ 0 │ 4 │ 0 1440 az-hareket│ 0 │ 0 │ 0 │ **0** │ 0 390 normal │ 2 │ 2 │ 0 │ 9 │ 0 390 az-hareket│ 0 │ 0 │ 0 │ **0** │ 0 · Normal kipte "kap dışı üye" BEKLENEN: şerit akıyor, üye sırayla giriyor. · Az-hareket kipinde 10 üyenin 10'u GÖRÜNÜR ve KAP İÇİNDE → kırpma 0 (kap 1440'ta 72px / 390'da 216px yüksekliğe sarmalıyor), iç kaydırma da 0. · Kesintisiz döngü matematiği ÖLÇÜLDÜ: 2. yolun sol kenarı 1. yolun sağ kenarıyla **tam 0px** farkla çakışıyor, yani çevrim birebir `y1` genişliği. ⚠️ BULGU / RANDEVU — `overflow:hidden` bir KAYDIRMA KABI kuruyor: ölçümde `kap.scrollWidth - clientWidth` normal kipte 2045px (1440) / 2735px (390). Bugün zararsız, çünkü üyenin İÇİNDE odaklanabilir hiçbir şey yok: dokunma ve tekerlek `hidden` ile engelli, sayfa yatay kaydırması 0. Üye TIKLANABİLİR olduğu gün (müşteri logosu + vaka linki) kırpılmış bir linke odaklanmak kabı kaydırır ve KALICI olarak kaydırmış bırakır. O gün gerekecek olan: `overflow-x:clip` (kaydırma kabı KURMAZ) — bugün seçilmedi çünkü Safari 16 altında `clip` yok sayılır ve içerik kırpılmadan taşardı, yani bugünkü tarayıcı tabanında `hidden` daha güvenli. Muafiyetin kanıtı: üyede odaklanabilir eleman yok. Link eklendiği gün bu muafiyet DÜŞER. ============================================================================ */ /* ---- Kapsayıcı: kırpar, ölçüleri buradan verilir -------------------------- */ .kaynak-kayan{ /* Üyeler arası boşluk. Yol İÇİNDE ve yolun KUYRUĞUNDA aynı değer kullanılıyor (aşağıda gerekçesi) — o yüzden tek knob. */ --kayan-bosluk:var(--b5); /* ~10 üyelik bir döngü için seçildi. Beyan, ölçüm değil. */ --kayan-sure:40s; display:flex; overflow:hidden; } /* ---- Yol: iki birebir kopya, ikisi de aynı döngüyü koşar ------------------ */ .kaynak-kayan .kaynak-yol{ display:flex;flex:none;align-items:center; gap:var(--kayan-bosluk); /* KUYRUK BOŞLUĞU döngüyü TAM yapıyor: yol genişliği = n üye + n boşluk, yani `translateX(-100%)` birebir BİR çevrim. Kuyruk boşluğu olmasa çevrim bir boşluk kadar kısa kalır ve her turda görünür bir zıplama olur. */ padding-inline-end:var(--kayan-bosluk); animation:kaynakAk var(--kayan-sure) linear infinite; } /* İki yol yan yana duruyor: 1. yol soldan çıkarken 2. yol onun yerini alıyor; animasyon başa döndüğünde 2. yol tam 1.'nin başlangıç konumunda — kesintisiz. */ @keyframes kaynakAk{from{transform:translateX(0)}to{transform:translateX(-100%)}} /* Hover VE odakta DURUR: okumak isteyen durdurabilir, klavye kullanıcısı da (`:focus-within`). Fare olmayan cihazda üye zaten tıklanabilir değil. */ .kaynak-kayan:hover .kaynak-yol, .kaynak-kayan:focus-within .kaynak-yol{animation-play-state:paused} /* ---- Üye: yatay dizilim (durağan ızgarada dikey) -------------------------- */ /* Taban hücre kuralı `anasayfa.css`te ve o dosya sektör sayfalarına YÜKLENMEZ; marquee'nin kendi kendine yetmesi için gereken bildirimler burada. Hepsi `.kaynak-kayan` altında kapsamlı, yani durağan ızgaraya dokunmuyor. */ .kaynak-kayan .kaynak-h{ display:flex;flex-direction:row;align-items:center;gap:var(--b2); flex:none;padding-block:0;white-space:nowrap; } .kaynak-kayan .kaynak-h .ikon{color:var(--murekkep)} .kaynak-kayan .kaynak-ad{font-size:var(--t9);line-height:var(--t9-s)} .koyu .kaynak-kayan .kaynak-h .ikon{color:var(--kagit)} /* Hover pill'i marquee'de HİÇ kurulmaz — tercih değil, ÖLÇÜLEBİLİR sebep: pill hücrenin ÜSTÜNDE mutlak konumlu ve kapsayıcı `overflow:hidden` ile kırpıyor, yani yarısı kesilirdi. Referansın marquee'si de pill taşımıyor (orada üye yalnız logo). Markup'a yanlışlıkla konursa yarım çalışmasın. */ .kaynak-kayan .kaynak-pil{display:none} /* ---- AZ HAREKET: döngü DURUR, içerik SARMALI ızgaraya düşer --------------- */ @media (prefers-reduced-motion:reduce){ /* Kırpmayı bırak: durmuş bir şeritte kırpılan üye bir daha geri gelmez. */ .kaynak-kayan{display:block;overflow:visible} .kaynak-kayan .kaynak-yol{ /* Animasyon ADIYLA kapatılıyor: genel bloğun `!important` SÜRESİ animasyonu son karesine atlatırdı, ad `none` olunca koşan animasyon kalmıyor ve eleman taban stilinde (`transform` yok) çiziliyor. */ animation:none;transform:none; flex-wrap:wrap;justify-content:center; padding-inline-end:0; row-gap:var(--b4); } /* Kopya yol YALNIZ döngü matematiği için var; durunca içeriği İKİ KEZ gösterirdi. `aria-hidden` onu ekran okuyucudan saklıyordu, burada gözden de. */ .kaynak-kayan .kaynak-yol[aria-hidden="true"]{display:none} /* Sarmalı hâlde uzun etiket kendi içinde de kırılabilsin. */ .kaynak-kayan .kaynak-h{white-space:normal} } /* EKRAN — ürünün KENDİ konsolundan basılmış kare (`scripts/konsol-kare.mjs`). * * Neden burada: `serit.css` tam bu 13 sayfaya (urun + 12 sektor) yükleniyor ve * `index.html` onu YÜKLEMİYOR — yani ilk boyama/gzip bütçesine hiç girmiyor * (ölçüldü). Kural aynı kalıyor: bu kare için bütçe kapısı YOK, ama ağırlık * yine de ödenmiş bir bedel; görsel 1280 px basılıp 640 px'te gösteriliyor * (2x) ve WebP q80 ile 58 KB. * * 🔴 Altyazı KALDIRILAMAZ: sayılar UYDURMA ve bunu söyleyen tek şey o satır. * `test/siteEkranKaresi.test.ts` her sayfada görsel ↔ etiket eşliğini ölçüyor. */ .ekran { margin: var(--b5) 0 0; display: grid; gap: var(--b3); justify-items: start; } .ekran img { inline-size: 100%; max-inline-size: 760px; block-size: auto; border: 1px solid var(--cizgi); border-radius: var(--y-kart); } .ekran figcaption { margin: 0; max-inline-size: 760px; font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); } /* MAKET — sektör sayfasının düz vektör görseli (`scripts/sektor-maket-yaz.py`). * Referansın sektör sayfalarındaki "ürün görselleri" de ekran görüntüsü değil * düz vektör maket; ölçümü docs/ altındaki görsel açığı envanterinin §2.2'si. * Farkımız: oradaki kartta UYDURMA bir marka var, bizimkinde sayfanın/paketin * KENDİ dizgileri — üreteç onları okuyor, elle yazılmıyor. */ .maket { margin: var(--b5) 0 0; display: grid; gap: var(--b3); } .maket img { inline-size: 100%; block-size: auto; border-radius: var(--y-kart); border: 1px solid var(--cizgi); } .maket figcaption { margin: 0; font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); }