/* ══════════════════════════════════════════════════════════════════════════ lenovo — ortak tasarım sistemi Claude Kullanım panelinin dilini beş bölüme genişletir. Renk değerleri ve kontrast oranları oradan birebir devralındı; yeni eklenen her renk için oran ölçülüp yanına yazıldı. ÖLÇÜ NOTU: Bölüm belgeleri 1280x744 alır — 800 eksi üst ray, ray da --ray-h (56 px). İçerik alanı 1248x672 (16 px yatay iç boşluk, 24+48 px dikey). Poster ızgarası ve radar listesi bu üç sayıya bağlıdır. ⚠ BU SAYILAR YALNIZ YORUMDA YAŞAR, düzende DEĞİL. Ölçüldü (grep -rn "100vh\|100dvh" public/ --include=*.css): bu dosyadaki `.sheet--genis` dışında hiçbir bölüm CSS'i görüntü alanı yüksekliğini px ya da vh ile yazmıyor; hepsi `height: 100%` ile kabuğun esnek sahnesinden devralıyor. Yani --ray-h değişince düzen KENDİLİĞİNDEN doğru kalır, yanlışlaşan tek şey yorumlardaki dondurulmuş rakamlardır. Değiştirirsen bölüm CSS'lerinin ölçü yorumlarını da tara. ⚠ 800 − 56 = 744 ARTIK KOŞULLU: kabuk.css kısa görünümde (--bp-kisa, yükseklik ≤ 500 px) --ray-h'i 48 px'e indiriyor. Kiosk 800 px yüksek, yani eşiğe HİÇ girmiyor ve yukarıdaki üç sayı kioskta BİREBİR geçerli kalıyor. Yatay telefonda aritmetik 412 − 48 = 364 px'e dönüyor; bölüm CSS'leri zaten `height: 100%` ile devraldığı için bu kendiliğinden doğru (aynı gerekçe bir alttaki paragrafta). Dondurulmuş sayı yazan yorumlar bu yüzden "kioskta" diye okunmalı. TELEFON: yukarıdaki ölçü notu KİOSK'a (1280x800) aittir. Telefon tarafının ortak dili (eşikler, dokunma hedefi, güvenli alan) :root içindeki "MOBİL SÖZLEŞMESİ" bloğunda; bölüm CSS'leri yeni mobil kural yazarken oradaki iki eşiği kullanır. ⚠ Yukarıdaki "yalnız .sheet--genis vh yazıyor" ölçümü hâlâ doğru ama ARTIK TAM DEĞİL: o kuralın 100vh'i 100dvh ile ikiye katlandı (gerekçe kuralın yanında), ayrıca bölüm CSS'leri arasında vh ile YAZI/KUTU ölçen yerler var (pano.css'in clamp'leri, kasa/studyo'nun max-height'leri) — onlar düzen yüksekliği değil, kapsam dışı sayılmıştı. ══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* ── Yüzeyler: sıcak gri-kahve nötrler ── */ --bg: #141210; --bg-elev: #1d1a16; --bg-sunken: #100e0c; --border: #2f2c26; --border-strong: #423e36; /* ── Metin (kontrast --bg-elev #1d1a16 zeminine karşı) ── Bu blok yeniden ölçüldü (sRGB → WCAG göreli parlaklık) ve TUTUYOR: --text 14,07:1 gövde --text-dim 6,77:1 ikincil --text-faint 4,68:1 üçüncül — 13px ALTINDA KULLANMA ⚠ --text-faint 4,68 ile 4,5 eşiğinin hemen üstünde; koyulaştırma. */ --text: #ece7dd; --text-dim: #a8a196; --text-faint: #8b8478; /* ── Vurgu: tüm etkileşim öğelerinin TEK rengi ── */ --accent: #d97757; /* 5,55:1 */ --accent-soft: #9c5139; /* 3,01:1 — grafik çubukları, METİN DEĞİL */ --accent-glow: rgba(217,119,87,.20); --on-accent: #14120f; /* accent üstünde metin, 5,99:1 */ /* ── Durum ── ⚠ ÖLÇÜM DÜZELTMESİ: --ok/--warn/--crit satırlarında yazan 5,4 / 8,1 / 5,1 oranları YANLIŞTI (Claude Kullanım'dan devralınırken oradaki farklı zemine göre kopyalanmışlar). --bg-elev #1d1a16 zeminine karşı yeniden ölçülen değerler aşağıda; üçü de 4,5:1'in üstünde, karar değişmiyor. */ --track: #322e28; --ok: #7fae76; /* 6,78:1 */ --warn: #d9a441; /* 7,71:1 */ --crit: #e06c5c; /* 5,34:1 */ /* ── Bölüm kimlik renkleri ── SADECE üç yerde: ray göstergesi, bölüm başlık noktası, sağlık noktası. Etkileşim öğelerinde ASLA kullanılma — onlar hep --accent. ⚠ Radar ile Torrent arasında 36° ton farkı var; bu iki renk etiketsiz (yalnız renk) ayırt edici olarak KULLANILMAZ. */ --sec-claude: #d97757; /* 5,55:1 */ --sec-radar: #5da4b6; /* 6,15:1 */ --sec-torrent: #7f92ce; /* 5,70:1 */ --sec-medya: #b58bc4; /* 6,15:1 */ --sec-sistem: #8fae86; /* 7,07:1 */ /* ── Pano ve Notlar kimlikleri (yedi sekmelik ray) ── Renk uzayı DOLU: yukarıdaki beşli ve --ok/--warn/--crit aynı parlaklık bandını zaten paylaşıyor. Bu yüzden seçim gözle değil ölçüyle yapıldı. YÖNTEM: sRGB → WCAG göreli parlaklık (kontrast) ve sRGB → CIELab → CIEDE2000 (renk yakınlığı, ΔE00). Betik geçiciydi; sayılar burada. KONTRAST — zemin --bg-elev #1d1a16: --sec-pano 5,00:1 --sec-notlar 5,03:1 (ikisi de ≥ 4,5:1) --bg #141210 zemininde: 5,40:1 ve 5,42:1 AYIRT EDİLEBİLİRLİK — yedi kimliğin birbirine en yakın çiftleri (ΔE00): torrent/medya 16,5 · pano/radar 17,2 · pano/sistem 17,4 · medya/notlar 18,0 · radar/torrent 18,4 Yeni ikili, paletin ZATEN kabul ettiği aralığın içinde kalıyor; en yakın çift zaten vardı (torrent/medya). ⚠ HSL ton farkı burada YANILTIYOR: torrent/medya 59° ton farkına rağmen ΔE00'da listenin en yakın çifti. Yukarıdaki "36°" notu aynı hükmü ton diliyle veriyor (aynı çifti ben 33,4° ölçtüm). SONUÇ — eski notun kapsamı genişleyerek: pano/radar, pano/sistem, medya/notlar, radar/torrent ve torrent/medya çiftleri ETİKETSİZ (yalnız renk) ayırt edici olarak KULLANILMAZ. Rayda her noktanın yanında adı yazılı; kimlik rengi o etiketi PEKİŞTİRİR, taşımaz. DURUM renklerine uzaklık (aynı sekmede --warn/--crit çubuğu var): pano→ok 17,1 · pano→warn 39,6 · notlar→crit 18,4 · notlar→warn 47,3 En yakın ikisi bile radar/torrent (18,4) düzeyinde. RAY KOMŞULUĞU (pano claude radar torrent medya sistem notlar): yeni renklerin en yakın akrabaları YAN YANA DEĞİL — pano–claude 50,4 ve sistem–notlar 53,7 ΔE00. NOT (ÇÖZÜLDÜ): önceki dalga beşlinin oranlarını yeniden ölçüp "satır içi 5,9/5,8/6,1 notlarından farklı" dedi ama eski satırları DÜZELTMEDEN bıraktı — dosyada bile bile yanlış üç sayı duruyordu. Bağımsız olarak yeniden ölçtüm, aynı değerler çıktı (radar 6,15 · medya 6,15 · sistem 7,07 · claude 5,55 · torrent 5,70) ve artık satırların KENDİSİNE yazıldı. Aynısı --ok/--warn/--crit için de yapıldı; bkz. yukarıdaki "ÖLÇÜM DÜZELTMESİ". */ --sec-pano: #0e9b88; /* 5,00:1 */ --sec-notlar: #e05c8e; /* 5,03:1 */ /* ── Kasa kimliği (sekizinci sekme) ── AYNI YÖNTEM: sRGB → WCAG kontrast, sRGB → CIELab → CIEDE2000 (ΔE00). Arama, paletin kendi ailesine kısıtlandı (HSL S %24-60, L %38-60, kontrast 5,0-6,0) — kısıtsız arama daha uzak ama neon bir mor/olive buluyordu ve bu palet mat ve sıcak. KONTRAST — zemin --bg-elev #1d1a16: 5,11:1 (--bg #141210: 5,51:1) Her ikisi de istenen 4,5:1 eşiğinin üstünde. AYIRT EDİLEBİLİRLİK — yedi kimliğe ΔE00 uzaklığı: sistem 18,1 · pano 28,7 · claude 34,1 · radar 37,4 · torrent 49,7 · medya 53,5 · notlar 55,2 En yakın komşusu 18,1 ile sistem; bu, paletin ZATEN taşıdığı en yakın çiftlerden (torrent/medya 16,5 · pano/radar 17,2 · pano/sistem 17,4 · medya/notlar 18,0) daha UZAK. Yani kasa paleti kötüleştirmiyor. DURUM renklerine: ok 17,6 · warn 17,6 · crit 39,9 — pano→ok 17,1 ile aynı düzeyde, o da kabul edilmişti. RAY KOMŞULUĞU: kasa raydaki son sekme, komşusu notlar → 55,2 ΔE00, yani listenin en uzak çifti. SONUÇ (yukarıdaki listeyi GENİŞLETİR): kasa/sistem çifti de ETİKETSİZ ayırt edici olarak KULLANILMAZ. Rayda ad yazılı; renk pekiştirir. */ --sec-kasa: #928f2f; /* 5,11:1 */ /* ── Stüdyo ve Yayın kimlikleri (dokuz ve onuncu sekme) ── AYNI YÖNTEM: sRGB → WCAG kontrast, sRGB → CIELab → CIEDE2000 (ΔE00). Arama kasa'daki gibi paletin kendi ailesine kısıtlandı (mat/sıcak; HSL S %24-60, L %38-62) — kısıtsız arama yine neon buluyordu. KONTRAST — zemin --bg-elev #1d1a16: --sec-studyo 6,66:1 --sec-yayin 4,69:1 (ikisi de ≥ 4,5:1) --bg #141210 zemininde: 7,18:1 ve 5,05:1 AYIRT EDİLEBİLİRLİK — on bir mevcut renge ΔE00, en yakın dördü: studyo: warn 17,1 · claude 17,1 · crit 20,3 · kasa 20,6 yayin : medya 15,3 · notlar 16,1 · torrent 27,0 · crit 32,4 studyo'nun en yakını (17,1) paletin kabul ettiği tabanın (torrent/ medya 16,5) ÜSTÜNDE. yayin/medya 15,3 ise o tabanın 1,2 ALTINDA — bu, aile kısıtı içinde bulunabilen en uzak ikinci renkti (denenen daha uzak adayların hepsi ya kontrast ya aile sınırında elendi) ve bedeli bilerek ödendi: rayda her noktanın yanında adı yazılı, renk etiketi taşımıyor, pekiştiriyor (aşağıdaki kural listesi). İkisi birbirine 38,9; ray komşuluğu: kasa–studyo 20,6, studyo–yayin yan yana ama listenin en uzak çiftlerinden. SONUÇ (listeyi GENİŞLETİR): studyo/warn, studyo/claude ve yayin/medya çiftleri de ETİKETSİZ (yalnız renk) ayırt edici olarak KULLANILMAZ. */ --sec-studyo: #b59c87; /* 6,66:1 */ --sec-yayin: #d24bd2; /* 4,69:1 */ /* ── Projeler kimliği (on birinci sekme) ── AYNI YÖNTEM: sRGB → WCAG kontrast, sRGB → CIELab → CIEDE2000 (ΔE00). Arama yine aile kısıtına bağlı kaldı (HSL S %24-60, L %38-62) ve ayrıca kontrastı mevcut on kimliğin bandında (4,69-7,07:1) tuttu — aksi hâlde nokta kardeşlerinden gözle fark edilir parlaklıkta çıkıyordu (kısıtsız aramanın en iyi sonucu #d8d864, 11,49:1 — reddedildi). KONTRAST — zemin --bg-elev #1d1a16: 4,76:1 (--bg #141210: 5,14:1) İkisi de 4,5:1 eşiğinin üstünde ama alttaki en düşük ikisiyle (yayin 4,69 · claude 5,55) aynı bandın alt ucunda — koyulaştırmaya GEREK YOK, pay yeterli (bkz. --text-faint notundaki 4,68 uyarısıyla karıştırma). AYIRT EDİLEBİLİRLİK — on bir kimliğe ΔE00, en yakın dördü: claude 14,7 · warn 14,7 · crit 20,2 · studyo 16,6 ⚠ DÜRÜST NOT: bu iki en yakın çift (claude, warn) paletin önceki tabanının (yayin/medya 15,3) biraz ALTINDA — aile kısıtı + kontrast bandı birlikte arandığında bu ikisinden daha uzağa çıkan hiçbir aday yoktu (arandı: kontrast [4,5-7,2] penceresinde en iyi ortak sonuç buydu). Payı azaltan bedel bilerek ödendi: ray'de her noktanın yanında adı yazılı, renk kimliği PEKİŞTİRİR, TAŞIMAZ (aynı gerekçe yukarıdaki "SONUÇ" notlarında tekrar tekrar geçiyor). Hue (31°) hem claude (15°) hem warn (43°) arasında kalan turuncu-amber bandında; ray'de projeler'in komşusu yayin (300°) olduğu için bu iki yakın renkle YAN YANA değil. ⚠ BU BLOK KAPANMIYORDU — sözdizimi hatası, KISA GÖRÜNÜM turunda bulundu ve düzeltildi. Yorumun kapanış işareti hiç yazılmamıştı, bu yüzden `--sec-projeler` bildirimi YORUMUN İÇİNDE kalıyordu: değişken TANIMSIZDI ve blok ancak bir alttaki satırın kendi oran yorumunun kapanış işaretiyle kapanıyordu. Ölçüldü (getComputedStyle, canlı panel, kabuk belgesi): düzeltmeden önce `--sec-projeler` BOŞ dönüyordu ve Projeler sekmesinin kimlik noktası kabuk.css'teki yedeğe (`var(--sec-projeler, var(--text-faint))`) düşüp gri çiziliyordu — o yedek tam bu yüzden oraya konmuş ve tam bu yüzden hatayı da GİZLEMİŞ. CSS'te iç içe yorum YOKTUR: bir sonraki kapanış işareti hangi seviyede olursa olsun bloğu kapatır. (Bu paragraf o işareti BİLEREK yazıyla anlatıyor — yazsaydım bu yorum tam orada kapanır ve altındaki satırlar geçersiz CSS olurdu, yani aynı hatayı tekrar ederdim.) Aynı tuzak bu dosyanın MOBİL SÖZLEŞMESİ bloğunda ayrıca yazılı — orada "buraya yorum işareti yazamıyorum" diye. Düzeltme YALNIZ kapanış işaretini ekliyor; renk değeri, gerekçe ve yukarıdaki bütün ölçümler olduğu gibi duruyor. */ --sec-projeler: #b87832; /* 4,76:1 */ /* ── Model renkleri (Claude Kullanım ile ortak) ── */ --m-opus: #d97757; --m-sonnet: #7fae96; --m-haiku: #d9a441; --m-fable: #a98cc4; --m-other: #9a9288; /* ── Yükseklik: koyu temada gölge iş görmez, üst kenar ışığı kullanılır ── */ --edge-light: inset 0 1px 0 rgba(255,255,255,.05); --shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.70); --shadow-sheet: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -12px rgba(0,0,0,.75); --overlay: rgba(10,9,7,.66); /* ── Ölçek ── */ --r-card: 14px; --r-ctl: 8px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; /* 48 -> 56 (önceki dalgada RAPOR EDİLMEDEN değişti, gerekçesi şimdi yazıldı). DOĞRULANDI: kabuk.css'te .ray-hap yüksekliği 44 px ve .ray yalnız yatay iç boşluk veriyor (padding: 0 var(--sp-3)), align-items:center. 44 px hap 56 px'lik rayda üstte ve altta 6'şar px pay bırakıyor; 48 px'te bu pay 2 px'e düşüyordu ve hap rayın kenarlığına değiyordu. .ray'in 1 px alt kenarlığı 56'nın İÇİNDE (global `* { box-sizing: border-box }`), yani sahne tam 800 − 56 = 744 px. ⚠ Bu sayı bölüm belgelerinin dikey aritmetiğini belirler; değiştirirsen yukarıdaki ÖLÇÜ NOTU'nu ve bölüm CSS'lerindeki ölçü yorumlarını da güncelle. ⚠ 56 ARTIK TEK DEĞER DEĞİL. kabuk.css kısa görünümde (--bp-kisa, yükseklik ≤ 500 px) bu değişkeni 48 px'e EZİYOR — burada değil orada, çünkü ray bir KABUK öğesi ve bu dosyayı iframe'deki bölüm belgeleri de yüklüyor (onların görüntü alanı da 500'ün altında ama orada ray diye bir şey yok). 48'in gerekçesi ve ölçümü kabuk.css'in sonundaki KISA GÖRÜNÜM bloğunda; 44 px'lik hap oraya sığıyor, dokunma hedefi kısılmıyor. */ --ray-h: 56px; /* üst ray yüksekliği — kısa görünümde 48, bkz. kabuk.css */ --pad-x: 16px; /* bölüm yatay iç boşluğu — ızgara aritmetiği buna bağlı */ --ease: cubic-bezier(.22,.8,.3,1); /* ── Dokunma hedefi: 10.1" / 149 ppi'de parmak ucu ~9 mm ≈ 53 px ── */ --tap: 44px; /* ══════════════ MOBİL SÖZLEŞMESİ ══════════════ Panel Funnel üzerinden TELEFONDAN da açılıyor. Bugüne kadar her bölüm kendi eşiğini ölçüp kendi sayısını yazdı; ölçüldü (grep -rn "@media" ile public/ altı) ve DAĞINIK çıktı: 419 · 640 · 720 · 747 · 759 · 828 · 1043 · 1100 px. Sekizinin de gerekçesi ayrı ayrı doğru, ama bir bölümü okuyan "telefon hangi genişlikte başlıyor" sorusuna bakacak tek yer bulamıyordu. Bu blok o tek yeri kuruyor. ⚠ KAPSAM: buradaki iki eşik YENİ kural yazarken kullanılacak ORTAK dildir; mevcut sekiz eşiği zorla buraya çekmek ölçülmüş davranışı bozardı (her biri kendi öğesinin min-içerik tabanından türetilmiş). Yakınlaştırma ölçüyle yapılır, toptan değil — bu dalgada yalnız kabuk.css'in 640'ı (zaten sözleşmeye eşit) ve sistem.css'in 1100'ü (altına --bp-dar eklendi) elden geçti. --bp-dar 480px Tek sütun. Telefon dikey (360-430 px) ve daha darı. Çok sütunlu ızgara TEK sütuna iner, yan yana duran denetimler alt alta geçer. --bp-orta 640px Kabuk rayının ALTA indiği eşik (kabuk.css'te ölçüldü, DEĞİŞMEDİ — sözleşme o ölçüme uyduruldu, tersi değil). Bunun altı "telefon", üstü "tablet/kiosk". ── ÜÇÜNCÜ EŞİK: YÜKSEKLİK ── Yukarıdaki iki eşik GENİŞLİĞE bakar ve bu sözleşmenin KÖR NOKTASIYDI: yatay tutulan telefon GENİŞ AMA KISA. 915x412'de genişlik 915 olduğu için hiçbir mobil kural eşleşmiyor, MASAÜSTÜ düzeni 412 px'lik bir ekrana yükleniyor. Kaan'ın "yatayda görünüm bozuluyor, dikeyde düzeliyor" şikâyetinin tamamı bu tek satırda. --bp-kisa 500px "Kısa görünüm". Bunun altında DİKEY ritim sıkışır: boş durumların dev iç boşluğu, örtü dolgusu, ray yüksekliği ve bölümlerin dikey aralıkları kısılır. ÖLÇÜLDÜ (headless Chromium 152, canlı panel 127.0.0.1:8787, kural KONMADAN ÖNCE): 915x412 → ray 915x56 · sahne 915x356 · iframe 915x356 · belge yatay taşması 0. GEOMETRİ DOĞRU, kırık DEĞİL. 740x360 → ray 740x56 · sahne 740x304 · aynı şekilde temiz. Yani sorun kırık kutu değil, DİKEY SIKIŞIKLIK. Aynı koşumda bölümlerin içinde tam görünen kart sayısı: Pano (8 kart): 915x412 → 8/8 tam · 740x360 → 8/8 tam (rahat) Sistem (23 kart): 915x412 → 0 tam, 4 kısmi, dikey taşma 268 px 740x360 → 0 tam, 4 kısmi, dikey taşma 366 px Sistem'de TEK BİR kart bile tam görünmüyordu — ölçülen kırılma bu. EŞİK NEREDEN (ölçü, yuvarlak sayı değil): yatay tutulan telefonun kısa kenarı 360-430 px bandında (740x360 · 844x390 · 915x412 · 932x430); yatay tutulan en kısa tablet 800 px (kiosk 1280x800). 500 px bu iki kümenin ortası DEĞİL, telefon kümesinin HEMEN ÜSTÜ: 430'a 70 px pay bırakıyor, 800'e 300 px uzak duruyor. Tabletin görüntü alanını adres çubuğu ve gezinme çubuğu birlikte kırpsa bile (800 − ~120 = 680) eşiğin altına DÜŞMEZ; yani kiosk ve tablet kısa görünüme asla girmez. ⚠ BAĞIMSIZ EŞİK — genişlikle VE'lenmez. Kural yazarken `@media (max-height: 500px)` tek başına yazılır; yatay telefon (kısa + geniş, 915x412) ile kısa ve dar bir pencere (ör. 412x412) AYNI kuralı alır, çünkü dikey sıkışıklığın genişlikle ilgisi yok. Genişlik eşiğiyle birleştirmek gerekiyorsa bu BİLEREK yapılır ve gerekçesi yazılır. ⚠ İKİ EŞİK AYNI ANDA eşleşebilir: 412x412'de hem --bp-dar hem --bp-kisa tutar. Kurallar ÇAKIŞMAYACAK biçimde yazılmalı (biri yatay ölçüleri, öbürü dikey ölçüleri kıssın) — aynı bildirimi iki blokta farklı değerlerle yazarsan kaynak sırası kazanır ve sonuç ekrana göre değişir. ⚠ DOKUNMA HEDEFİ KISA GÖRÜNÜMDE DE KISILMAZ: --tap (44 px) tabandır, dikey yer kazanmak için 40'a indirmek PAZARLIK KONUSU DEĞİL. Kısa görünümde kesilecek şey hedefin KENDİSİ değil, hedefin ETRAFINDAKİ boşluktur (ray dolgusu, kart aralığı, boş durum iç boşluğu). ⚠ CSS GERÇEĞİ: özel değişkenler @media SORGUSUNDA KULLANILAMAZ (`@media (max-width: var(--bp-dar))` hiç eşleşmez, sessizce düşer). @custom-media da hiçbir tarayıcıda yok. Bu yüzden sorguda SAYI yazılır ve yanına hangi eşik olduğu yorumla konur (aşağıdaki kurallarda örneği var; buraya yorum işareti yazamıyorum çünkü iç içe yorum CSS'te YOK — içerideki kapanış dışarıdaki bloğu erkenden kapatır). Değişkenler yine de TANIMLI duruyor: calc() içinde ve JS'ten (getComputedStyle) okunabiliyorlar, ve "tek doğru sayı burada" demenin tek yolu bu. ── DOKUNMA HEDEFİ ── --tap (44 px) TELEFONDA DA TABANDIR, tablet ölçüsünden devralınmadı: WCAG 2.2 "Target Size (Minimum)" 24×24 CSS px ister, Android'in kendi Material kılavuzu 48 dp; 44 px ikisinin arasında ve panelin her yerinde zaten kullanılıyor. Telefonda 44 px ≈ 7 mm — başparmak ucunun altında, yani hedefler ARASINDAKİ boşluk da sayıyor: --tap-bosluk (8 px) iki dokunma hedefi arasındaki EN AZ açıklık. Yan yana iki 44 px'lik hedef bitişikse parmak ikisinin sınırına basıyor; 8 px, --sp-2 ile aynı değerde bilerek (ızgara aralıkları zaten oradan). ── GÜVENLİ ALAN (centik / home bar) ── kabuk.html `viewport-fit=cover` kullanıyor — yani belge centiğin ve alt home bar'ın ALTINA kadar uzanıyor. Ölçüldü (grep -rn "env(" public/): env(safe-area-inset-*) HİÇBİR yerde kullanılmıyordu, yani alta inen ray centikli telefonda home bar'ın altında kalıyordu. Dört kenarı da değişkene alıyoruz ki calc() içinde sadeleşsin: padding-bottom: calc(var(--sp-3) + var(--guvenli-alt)); ⚠ YEDEK DEĞER ŞART: env()'in ikinci argümanı olmadan, desteklemeyen tarayıcıda bildirim GEÇERSİZ olur ve onu saran calc() de düşer. 0px yedeğiyle centiksiz her cihazda (kiosk tableti dahil) bu değerler TAM SIFIR — yani bugünkü düzen BİREBİR korunuyor, tek satır kaymıyor. ⚠ env() yalnız EN ÜST belgede gerçek değer döndürür; iframe'in içinde her zaman 0'dır. Bölüm belgeleri iframe'de yaşadığı için güvenli alanı KABUK ayırır (kabuk.css), bölümler bu değişkenleri yazsa da 0 alır. */ --bp-dar: 480px; --bp-orta: 640px; --bp-kisa: 500px; /* YÜKSEKLİK eşiği — bkz. "ÜÇÜNCÜ EŞİK" */ --tap-bosluk: 8px; --guvenli-ust: env(safe-area-inset-top, 0px); --guvenli-alt: env(safe-area-inset-bottom, 0px); --guvenli-sol: env(safe-area-inset-left, 0px); --guvenli-sag: env(safe-area-inset-right, 0px); --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif; } /* Android Roboto'da 600 ağırlık YOKTUR; yazılırsa WebView sahte-kalın üretir. Yalnız 400 / 500 / 700 kullanılır. */ * { box-sizing: border-box; margin: 0; padding: 0; font-synthesis-weight: none; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; /* Dikey kaydırma serbest, yatay swipe kabuğa ait */ touch-action: pan-y; } /* Kioskta metin seçimi kazara olur ve hiçbir işe yaramaz */ body { -webkit-user-select: none; user-select: none; } input, textarea { -webkit-user-select: text; user-select: text; } /* ─────────────── Erişilebilirlik ─────────────── Dokunuşla basılan düğme odakta kalıyor ve halka ekranda asılı duruyordu; :focus-visible ile halka yalnız klavye/kumanda odağında çıkıyor. Odağı büsbütün silmek değil — panele bir klavye bağlanırsa tek yol gösterge o. .field:focus halkasını bilerek koruyoruz: yazarken imlecin hangi kutuda olduğu dokunmatikte de görünmeli — `.field:focus` (0,2,0) aşağıdaki `:focus` (0,1,0) kuralını özgüllükle yener, sıra değil ağırlık kazandırıyor. ⚠ ÖLÇÜLMEDİ — :focus-visible desteği: Chrome 86'da geldi, tabletteki WebView sürümü doğrulanmadı. Desteklenmiyorsa bu seçici geçersiz sayılıp KURAL TAMAMEN DÜŞER, `:focus{outline:none}` ise ayakta kalır; sonuç, klavye odak halkasının hiç çıkmaması olur. Klavyesiz kioskta etkisi yok, telefonda da yok; bir klavye bağlanırsa görülecek tek yer budur. `.field:focus` ayrı kural olduğu için o senaryoda bile yazı alanları halkalı kalır. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Yalnız ekran okuyucuya giden metin (durum, sayaç, canlı bildirim). Ölü kural değil — ölçüldü (grep -rn "sr-only" public/): giris.html'deki #durum düğümü bunu kullanıyor ve orada niçin gerektiği de yazılı. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ─────────────── Kart ─────────────── */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--edge-light); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .card-title { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; /* 11px'te --text-faint okunmaz; --text-dim (6,8:1) kullanılır */ color: var(--text-dim); } .hint { font-size: 12px; color: var(--text-dim); } /* ─────────────── Kontroller ─────────────── */ .btn { min-height: var(--tap); padding: 0 var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--bg-sunken); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; transition: background .16s var(--ease), border-color .16s var(--ease); } .btn:active { background: var(--border); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--primary:active { background: var(--accent-soft); border-color: var(--accent-soft); } .btn--danger { border-color: var(--crit); color: var(--crit); } .btn[disabled] { opacity: .45; pointer-events: none; } .field { min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--bg-sunken); color: var(--text); font: inherit; /* 16 px ALTINA İNMEZ. Gerekçe düzeltildi: odaklanınca sayfayı kendiliğinden yakınlaştırma iOS Safari davranışıdır, tabletteki Android WebView'ın değil. Kural yine de doğru yerde — panel Tailscale Funnel ile telefondan da açılıyor ve orada 14 px'lik bir alana dokunmak düzeni zumluyor. Tablette ise sadece 14 → 16 px'lik bir okunurluk kazancı; --tap (44 px) zaten kutunun yüksekliğini belirlediği için düzen kaymıyor. ⚠ ÖLÇÜLMEDİ: zum davranışı gerçek telefonda doğrulanmadı, iOS'un belgelenmiş kuralına dayanıyor. */ font-size: 16px; width: 100%; } .field:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .field::placeholder { color: var(--text-faint); } /* ─────────────── Küçük sekmeler ─────────────── Kaynak: docs/tasarim-sistemi.css. Dört bölüm kendi kopyasını çıkarmasın diye buraya taşındı. AD ALANI DENETLENDİ (grep, public/ altı): `.mini-tabs` başka hiçbir dosyada yok; bölümlerin `.sayfa` / `.izgara` / `.satirlar` / `.sekmeler` sınıflarıyla çakışmıyor. Kaynaktaki 34 px dokunma hedefi --tap (44 px) yapıldı: 10.1"/149 ppi'de parmak ucu ~53 px, 34 px'lik sekmede komşuya basılıyor. Kaynaktaki `display:flex` yerine inline-flex: blok bir kapta flex, sekme şeridini satır boyu geriyor ve sağda boş bir çukur bırakıyordu. ÖLÇÜLER TÜRETİLİR, elle yazılmaz: dış yarıçap = iç yarıçap + iç boşluk. --mt-pad değişince iki yarıçap birlikte kayar. ⚠ `.mini-tabs button` (0,1,1) seçicisi `.btn` (0,1,0) kuralını yener; şeridin içine `.btn` koyarsan çerçevesini kaybeder — kasıtlı. */ .mini-tabs { --mt-pad: 3px; display: inline-flex; gap: 2px; padding: var(--mt-pad); background: var(--bg-sunken); border-radius: calc(var(--r-ctl) + var(--mt-pad)); flex: 0 0 auto; } .mini-tabs button { min-height: var(--tap); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--text-dim); font: 500 13px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease); } .mini-tabs button:active { background: var(--border); color: var(--text); } /* Seçili sekme: bölüm sınıf da kullansa ARIA da kullansa yansın. */ .mini-tabs button.on, .mini-tabs button[aria-pressed="true"], .mini-tabs button[aria-selected="true"] { background: var(--bg-elev); color: var(--text); box-shadow: var(--edge-light); } /* ─────────────── Hap / rozet ─────────────── */ .pill { display: inline-flex; align-items: center; gap: var(--sp-2); height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-sunken); font-size: 12px; color: var(--text-dim); white-space: nowrap; } .pill--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } .pill--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } .pill--crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; } .dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--crit { background: var(--crit); } /* ─────────────── Liste / tablo ─────────────── */ /* overscroll-behavior: liste sonuna gelince kaydırma kabuğa TAŞMASIN. Fully'nin pull-to-refresh'i açık kaldığında taşan kaydırma bütün kabuğu yeniden yüklüyor ve açık bölüm sıfırlanıyor. */ .rows { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; overscroll-behavior: contain; } /* ─────────────── Yatay şerit ─────────────── body{touch-action:pan-y} yatay panlamayı bütün alt ağaçta kapatıyor; yatay kaydırılan bir şerit (radar durum şeridi gibi) parmakla hareket etmiyor. Bu sınıf izni tek bir kaydırıcı için geri veriyor. Not: pan-x, şeridin İÇİNDEN başlayan dikey kaydırmayı da kapatır — şerit kısa olduğu için kabul edilebilir bir takas. Şeridi kabuğun swipe'ından ayırmak ayrı iş: [data-lenovo-noswipe]. Ad alanı ve kullanım ölçüldü (grep -rn "yatay" public/): dört bölüm (kasa, medya, notlar, radar) bu sınıfı kullanıyor ve dördü de yanına data-lenovo-noswipe yazmış. radar.css'teki `.suzgec--yatay` AYRI bir sınıftır, çakışmıyor. */ .yatay { touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } .row { display: grid; align-items: center; gap: var(--sp-3); min-height: 72px; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); /* Uzun listelerde kaydırma maliyetini düşürür. Panel geçişinde KULLANILMIYOR (orada iframe var), sadece satırlarda. */ content-visibility: auto; contain-intrinsic-size: auto 72px; } .row:last-child { border-bottom: 0; } .row--tap { cursor: pointer; } .row--tap:active { background: var(--bg-sunken); } .row--on { background: color-mix(in srgb, var(--accent) 10%, transparent); } .row-main { min-width: 0; } .row-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─────────────── İlerleme ─────────────── */ .bar { height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent-soft); border-radius: inherit; /* scaleX ile animasyon: her karede layout tetiklemez */ transform-origin: left center; transition: transform .3s var(--ease); } .bar--ok > i { background: var(--ok); } .bar--warn > i { background: var(--warn); } .bar--crit > i { background: var(--crit); } /* ─────────────── Halka göstergesi ─────────────── */ .gauge { position: relative; width: 132px; height: 132px; flex: 0 0 auto; } .gauge svg { width: 100%; height: 100%; transform: rotate(-135deg); } .gauge circle { fill: none; stroke-linecap: round; } .gauge .g-track { stroke: var(--track); } .gauge .g-fill { stroke: var(--accent); transition: stroke-dashoffset .5s var(--ease); } .gauge .g-fill--ok { stroke: var(--ok); } .gauge .g-fill--warn { stroke: var(--warn); } .gauge .g-fill--crit { stroke: var(--crit); } .gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .gauge-value { font-size: 30px; font-weight: 500; letter-spacing: -.02em; } .gauge-sub { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; } /* ─────────────── Boş / hata durumu ─────────────── */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: 48px var(--sp-5); text-align: center; color: var(--text-dim); min-height: 200px; } .empty-title { font-size: 16px; color: var(--text); font-weight: 500; } .empty-note { font-size: 13px; max-width: 42ch; } .banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ctl); border: 1px solid var(--border-strong); background: var(--bg-sunken); font-size: 13px; } /* Düz hex önce, color-mix sonra: WebView color-mix'i desteklemezse banner yine de okunur kalır. */ .banner--crit { border-color: #6b332c; background: #241614; color: var(--crit); } .banner--crit { border-color: color-mix(in srgb, var(--crit) 45%, var(--border)); } .banner--warn { border-color: #5c4a22; background: #221c11; color: var(--warn); } .banner--warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); } /* ─────────────── Sayfa üstü sayfa (örtü + kutu) ─────────────── Torrent ve sistem bu kuralları AYRI AYRI taşıyordu; davranış tarafı artık ortak/kati.js. İki kopya arasındaki tek gerçek fark kutu genişliğiydi: torrent 480 px, sistem 460 px. Ortak değer 480 px — sistem'in onay kutusu 20 px genişliyor (ölçülmüş tek fark bu). .ortu[hidden] AÇIKÇA geri alınıyor: sınıf seçicisi UA'nın [hidden]{display:none} kuralını yener; yoksa hidden atanmış boş bir örtü ekranda asılı kalır ve altındaki bölümü tıklanamaz yapar. Aynı tuzak .sheet-dugmeler için de geçerli (bkz. torrent.css'teki not). */ .ortu { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; /* MOBİL: iç boşluğa güvenli alan ekleniyor. Örtü position:fixed ve inset:0, yani belge en üstteyse centiğin ve home bar'ın altına uzanıyor; uzun bir kutu (bkz. .sheet--genis) alt kenarıyla home bar'a girerdi. ⚠ BUGÜN ÇOĞUNLUKLA ETKİSİZ, bilerek: bölüm belgeleri iframe'de yaşıyor ve iframe'de env() her zaman 0; doğrudan açıldıklarında da viewport-fit=cover yazmıyorlar (o satır yalnız kabuk ve giriş belgelerinde — gerekçesi kabuk.html'deki GÖRÜNTÜ ALANI SÖZLEŞMESİ yorumunda). Kural, sözleşmenin parçası olarak duruyor: bir bölüm belgesi en üste çıktığı gün kutu kendiliğinden doğru yere oturur, o gün ayrıca aranması gerekmez. Centiksiz cihazda dört env() de 0px, yani kiosk tabletinde ölçü DEĞİŞMİYOR — sadece var(--sp-5) kalıyor. */ padding: calc(var(--sp-5) + var(--guvenli-ust)) calc(var(--sp-5) + var(--guvenli-sag)) calc(var(--sp-5) + var(--guvenli-alt)) calc(var(--sp-5) + var(--guvenli-sol)); /* Bölüm belgesinin İÇİNDE en üst katman. Kabuğun gece perdesiyle karşılaştırılamaz — o ayrı belgede ve iframe'in tamamının üstünde. */ z-index: 50; } .ortu[hidden] { display: none; } .sheet { width: 100%; max-width: 480px; box-shadow: var(--shadow-sheet); gap: var(--sp-4); } /* Geniş kutu (teşhis gibi uzun içerik). Yükseklik TÜRETİLİYOR: örtünün üst ve alt iç boşluğu düşülür. Eskiden elle 720 px yazıyordu; 1280x744'te ızgara alanı 704 px olduğu için kutu iç boşluğun 16 px'ini yiyordu. overscroll-behavior: kutunun içi bitince kaydırma altındaki bölüme (ve oradan kabuğa) taşmasın. */ .sheet--genis { max-width: 640px; /* MOBİL: iki bildirim BİLEREK üst üste. Dosyanın başındaki ÖLÇÜ NOTU "bu dosyadaki .sheet--genis dışında hiçbir bölüm CSS'i görüntü alanı yüksekliğini vh ile yazmıyor" diyordu — istisna buydu ve telefonda kırılan da buydu: mobil tarayıcıda 100vh, adres çubuğu AÇIKKEN bile çubuğun gizli hâlindeki BÜYÜK görüntü alanını ölçer, yani kutu ekrandan taşar ve alt kenarındaki düğmeler çubuğun altında kalır. 100dvh o anki GERÇEK yüksekliği verir (Chrome 108+). Sıra kasıtlı: dvh'i tanımayan tarayıcı ikinci bildirimi geçersiz sayıp atar, birincisi ayakta kalır (aynı kalıp .banner--crit'te de var). ⚠ NEREDE ETKİLİ, nerede değil — dürüst ayrım: · Bölüm KABUĞUN İÇİNDE (iframe) açıkken hiçbir şey değişmez: iframe'in içinde adres çubuğu diye bir şey yok, orada 100vh = 100dvh = çerçeve yüksekliği (zaten sahnenin 744 px'i). · Bölüm DOĞRUDAN açıldığında (telefondan /sistem/, /pano/ … tek başına gezilebiliyor) fark tam da burada çıkıyor: vh, adres çubuğu açıkken bile çubuğun gizli hâlindeki yüksekliği ölçer, kutu ekranın altına taşar ve en alttaki düğme sırası çubuğun arkasında kalır. Güvenli alan payı da aynı ayrıma tabi: env() iframe'de 0 döner, yalnız en üst belgede (ve ancak viewport-fit=cover ile) gerçek değer verir — yani bugün çoğu durumda 0 çıkarılıyor, kural ileriye dönük. */ max-height: calc(100vh - 2 * var(--sp-5)); max-height: calc(100dvh - 2 * var(--sp-5) - var(--guvenli-ust) - var(--guvenli-alt)); overflow-y: auto; overscroll-behavior: contain; } .sheet-dugmeler { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; } .sheet-dugmeler[hidden] { display: none; } /* ─────────────── Kaydırma çubuğu ─────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 3px solid var(--bg); } /* ─────────────── Gece kısma ─────────────── 23:30-07:00 arası kabuk body'e .is-night ekler. Amaç göz konforu: karanlık odada 7/24 açık duran parlak bir panel rahatsız ediyor. (Eskiden buraya "arka ışık ömrünü uzatır" yazıyordu — LCD'de siyah bir örtü arka ışığı kısmaz, tüketim de ömür de değişmez. İddia kaldırıldı.) */ .night-veil { position: fixed; inset: 0; background: #000; opacity: 0; /* Gündüz none KALMALI: perde tüm paneli kaplıyor, tıklamaları yutar. */ pointer-events: none; transition: opacity .6s var(--ease); z-index: 90; } /* .82 ölçüldü: altındaki panel neredeyse okunmuyordu. Dokununca perde zaten tamamen kalktığı için dinlenme değeri yüksek kalabilir, ama "uzaktan bakınca ne olduğunu seç" kadar bir şey görünsün diye .72. */ body.is-night .night-veil { opacity: .72; } /* Perde İNİKKEN dokunuşu YUTAR. Yoksa karanlık ekrana uzanan parmak, altta kalan 'Sil' ya da 'Tara' düğmesine basıyor; perde iframe'lerin üstünde ve kabuk belgesinde olduğu için bölüm dokunuşu hiç görmüyor, kullanıcı da ne yaptığını göremiyor. İlk dokunuş yalnızca perdeyi kaldırsın. */ body.is-night .night-veil { pointer-events: auto; } /* ═══════════════ MOBİL — dar ekran ortak kuralları ═══════════════ Eşik 480 px = --bp-dar (sorguda sayı yazmak ZORUNDA: özel değişken medya sorgusunda çalışmaz, gerekçesi :root'taki MOBİL SÖZLEŞMESİ bloğunda). Burada YALNIZ ortak bileşenler var; bölüm ızgaraları kendi dosyalarında. ── .mini-tabs neden kaydırılabilir oluyor ── Şerit inline-flex ve düğmeleri `white-space: nowrap`; sekme sayısı arttıkça (Sistem'de on bir düğme) 360-430 px'e sığmıyor ve şeridi SARAN kap kırpma yapmadığı için taşma BELGEYE çıkıyor — yani yatay kaydırma, DEMİR KURAL 2. Sistem bölümü bunu kendi `.alt-sekmeler` kuralıyla zaten çözmüştü (max-width + overflow-x: auto); o çözüm burada ORTAKLAŞTIRILIYOR, böylece `.mini-tabs` kullanan her bölüm (yayın, studyo, …) aynı kalkanı alıyor. Sistem'deki yerel kural aynı değerleri yazdığı için ÇAKIŞMIYOR, tekrar ediyor — davranış değişmiyor. ⚠ overflow-y: hidden AÇIKÇA yazılıyor: CSS'te bir eksen `visible` dışına çıkarsa diğeri kendiliğinden `auto` olur; yazılmazsa şerit dikeyde de kaydırılabilir bir kutuya dönüşür ve odak halkası (`:focus-visible`, 2 px dışa taşan) ikinci bir çubuk doğurabilir. Bedeli: halkanın kırpılması — klavyesiz panelde kabul edilebilir, `.alt-sekmeler` de aynı bedeli ödüyordu. ⚠ touch-action: pan-x ŞART. tasarim.css'in başında body{touch-action:pan-y} var; o, bütün alt ağaçta parmakla yatay panlamayı kapatıyor, yani overflow-x TEK BAŞINA ölü bir kaydırıcı üretirdi (aynı gerekçe `.yatay` sınıfında da yazılı). Bedeli de aynı: şeridin İÇİNDEN başlayan dikey kaydırma çalışmaz; şerit tek satır (bir --tap boyu) olduğu için kabul edilebilir bir takas. ⚠ Kabuğun swipe'ıyla çakışma AYRI iş: şeridi kullanan bölüm yanına `data-lenovo-noswipe` yazmalı (Sistem yazıyor). */ @media (max-width: 480px) { .mini-tabs { max-width: 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; /* Çubuk gizli: 10 px'lik yatay çubuk (bkz. ::-webkit-scrollbar) 50 px'lik şeridin beşte birini yiyordu. */ scrollbar-width: none; } .mini-tabs::-webkit-scrollbar { display: none; } /* Kutu düğmeleri dar ekranda satırı PAYLAŞARAK geriliyor (flex-grow 1). Gerekçe erişim, taşma değil: taşma zaten flex-wrap ile çözülüydü. İki düğme 320 px'te doğal genişliğinde ~90 px kalıyor ve sağa yaslı (justify-content: flex-end) durduğu için dokunma hedefi ekranın en sağ şeridine sıkışıyordu. Gerilince hedef genişliyor; sarma olursa da her satır tam genişlik oluyor. Yükseklik zaten --tap (.btn kuralı). */ .sheet-dugmeler > * { flex: 1 1 auto; } /* Boş durum iç boşluğu 48 px, 320 px'lik ekranda dikey yerin dörtte birini yiyor; metin daha değerli. Yatay boşluk DEĞİŞMİYOR (satır uzunluğu). */ .empty { padding: var(--sp-5) var(--sp-5); min-height: 0; } } /* ═══════════════ KISA GÖRÜNÜM — ortak bileşenlerin dikey ritmi ═══════════════ Eşik 500 px = --bp-kisa, YÜKSEKLİK (gerekçesi ve eşiğin nereden geldiği :root'taki MOBİL SÖZLEŞMESİ / "ÜÇÜNCÜ EŞİK" bloğunda). Sorguda yine SAYI yazılıyor: özel değişken medya sorgusunda çalışmaz. ⚠ GENİŞLİKLE VE'LENMİYOR, bilerek. Yatay telefonun genişliği 915 px — yukarıdaki 480 px bloğu orada HİÇ eşleşmiyor, yani bu iki kural o ekranda tek başına duruyor. Aynı öğeye iki blokta da dokunulduğu için değerler ÇAKIŞMAYACAK biçimde seçildi (aşağıda tek tek). ⚠ BURASI YALNIZ ORTAK BİLEŞEN. Bölümlerin kendi kart ızgaraları, başlık yükseklikleri ve dikey aralıkları KENDİ dosyalarında kısılır; ölçüm onların ne kadar sıkışık olduğunu gösteriyor (Sistem'de 23 karttan SIFIRI tam görünüyordu) ama kabuk o kartlara dokunamaz. ⚠ DOKUNMA HEDEFİNE DOKUNULMADI: .btn / .field / .mini-tabs button hepsi min-height: var(--tap) ile 44 px'te kalıyor. Kesilen tek şey hedeflerin ETRAFINDAKİ boşluk. */ @media (max-height: 500px) { /* --bp-kisa */ /* ── Boş durum: 48+48 px dikey dolgu + 200 px taban ── Bu turun EN BÜYÜK dikey kazancı, ray'inkinden on üç kat fazla. ÖLÇÜLDÜ (headless Chromium 152, canlı /notlar/, getComputedStyle + getBoundingClientRect): 1280x800 kiosk → padding 48/48, min-height 200px, GERÇEK BOY 200,0 px 915x412 kısa görünüm → padding 12/12, min-height 0, GERÇEK BOY 92,9 px Yani bir "kayıt yok" cümlesi 364 px'lik sahnenin 200 px'ini, %55'ini yiyordu; şimdi %26'sını yiyor ve 107 px geri geliyor. ⚠ DÜZELTME: bu blok ilk yazıldığında "96 px dolgu + 200 px taban = 296 px" diye hesaplanmıştı — YANLIŞ. Global `* { box-sizing: border-box }` var, yani 96 px'lik dolgu min-height'ın İÇİNDE; toplam 296 değil 200 px'ti. Sayı ölçümle düzeltildi, karar değişmedi. Dikey dolgu --sp-3'e iniyor, taban kalkıyor — metnin kendisi ve düğmesi olduğu gibi duruyor, sadece etrafındaki hava kesiliyor. YATAY dolgu DEĞİŞMİYOR: o satır uzunluğunu belirliyor, dikey sıkışıklığa bir katkısı yok (aynı gerekçe 480 px bloğunda da yazılı). ⚠ 480 px bloğuyla ÇAKIŞMA YOK — orası `var(--sp-5) var(--sp-5)` yazıyor ve dikey değeri 20 px'te bırakıyor; burası 12 px. İkisi aynı anda eşleştiğinde (ör. 412x412) kaynak sırası gereği BU blok kazanır ve kazanan zaten daha sıkı olan — istenen davranış bu. */ .empty { padding: var(--sp-3) var(--sp-5); min-height: 0; gap: var(--sp-2); } /* ── Örtü dolgusu: 20 → 12 px ── .sheet--genis'in boyu örtünün dolgusundan TÜRETİLİYOR (max-height: calc(100dvh - 2 * var(--sp-5) …)), yani 412 px'lik ekranda kutuya 372 px kalıyordu. --sp-3 ile 388 px'e çıkıyor: 16 px, bu ekranda bir satır artı kart aralığı demek. ⚠ TÜRETİLMİŞ SAYIYI BOZMAMAK İÇİN calc() DEĞİL, DEĞİŞKEN yerelleştiriliyor olsaydı .sheet--genis'in kendi calc()'i eski 20'yi yazmaya devam ederdi ve kutu örtüden 16 px taşardı. Bu yüzden ikisi BİRLİKTE yazılıyor; ayrı düşerlerse taşma sessizce geri gelir. Güvenli alan payları korunuyor (centiksiz cihazda dördü de 0px). */ .ortu { padding: calc(var(--sp-3) + var(--guvenli-ust)) calc(var(--sp-5) + var(--guvenli-sag)) calc(var(--sp-3) + var(--guvenli-alt)) calc(var(--sp-5) + var(--guvenli-sol)); } .sheet--genis { max-height: calc(100vh - 2 * var(--sp-3)); max-height: calc(100dvh - 2 * var(--sp-3) - var(--guvenli-ust) - var(--guvenli-alt)); } } /* ─────────────── Hareket azaltma ─────────────── */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }