/* =========================================================================== ORTAK STİL — HER EKRAN BUNU YÜKLER. =========================================================================== 🔴 NEDEN VAR: `[hidden]` özniteliği tarayıcının varsayılan stil sayfasında `display:none` olarak tanımlıdır — ama o varsayılan, YAZDIĞIMIZ HER `display` kuralı tarafından ezilir. Sınıf seçicisi (0,1,0) öznitelik seçicisinden (0,1,0) sonra geldiği için `.menu-govde{display:none}` gibi masum bir satır `[hidden]`i sessizce iptal eder. DÖRT KEZ OLDU ve dördü de aynı sınıf: .giris{display:grid} sinav.html başlangıç ekranı kapanmadı .menu-govde{display:none} kisi-listesi Sırala ve Sütunlar açılmadı .arama{display:flex} kisi-listesi Filtre açılmadı Dördüncüsü en öğreticisi: ÜÇÜNCÜSÜNÜ AYNI DOSYADA DÜZELTİRKEN gözden kaçtı. Vaka vaka düzeltmek beşincisini üretir; kuralın kendisi tek satır ve tüm ekranları kapsamalı. 🔴 `!important` BİLİNÇLİ. Bu projede genel olarak kaçınılır çünkü cascade'i okunmaz kılar — ama burada tam olarak istenen şey budur: `[hidden]` bir NİYET bildirimidir ve hiçbir düzen kuralı onu ezmemelidir. Bir öğeyi göstermenin yolu özniteliği KALDIRMAKTIR, display yazmak değil. Bir ekranın bu dosyayı yüklediği testle sabitlendi (`src/api/rota.test.ts`): yeni bir ekran linksiz eklenirse kırmızıya döner — beşinci vaka bu yüzden sessizce doğamaz. CLAUDE.md yasak #27 (ortak katman) · docs/arayuz.md =========================================================================== */ [hidden] { display: none !important; } /* =========================================================================== YATAY TAŞMA — İKİNCİ ORTAK KURAL =========================================================================== 🔴 AYNI HATA İKİ EKRANDA ÇIKTI, ÜÇÜNCÜSÜNDE ÇIKACAKTI: katalog.html geniş tablo ızgara hücresini şişirdi → [+ Yeni] ekran dışına düştü, Osman "yeni ekle yok" diye yaşadı kisi-detay sağ panelin uzun metni 288 px'lik kolonu şişirdi → sayfa yatay kaydı Sebep TEK: ızgara/esnek hücresinin örtük `min-width: auto` değeri İÇERİĞİNİN min-content genişliğidir. Hücre o boya şişer; içindeki `overflow-x: auto` bunu DURDURMAZ, çünkü şişen şey bir üst katmandır. İki ayrı ekranda elle düzeltilseydi üçüncüsünde unutulurdu (yasak #27). --- 1. Uzun metin SARAR ------------------------------------------------- `anywhere`, `break-word` DEĞİL: ikisi de satır sonunda kırar ama yalnız `anywhere` MIN-CONTENT hesabını da küçültür. Şişmeyi durduran şey tam olarak budur; `break-word` görüntüyü düzeltir, taşmayı düzeltmez. 🔴 KURAL `body`ye YAZILMIŞTI VE FAZLA GENİŞTİ — GERİ ALINDI. `anywhere` kelimeyi HER YERDEN kırabilir; dar bir kapta bunu harf harf yapar. Sol menünün dar kipinde *"sürüm …"* ve *"Daralt"* alt alta tek harf olarak döküldü. Osman ekran görüntüsüyle gösterdi. Ders: min-content'i küçülten bir kural GLOBAL yazılmaz. Kuralın gerektiği yer, mirası çözülen sabit genişlikli PANELDİ — genel bir sayfa kuralı değil. Artık `.daralabilir` ile birlikte geliyor: daralabilen kap, uzun metni de sarabilmeli. İkisi aynı ihtiyacın iki yüzü. `white-space: nowrap` taşıyan öğeler bundan etkilenmez — nowrap üstün gelir; menü bileşeni kendi kuralını `kabuk.js`te ayrıca yazıyor. */ /* --- 2. Izgara/esnek hücresi DARALABİLİR --------------------------------- Genel bir `* { min-width: 0 }` yazılmadı: bazı yerlerde içerik kadar genişlemek DOĞRU davranıştır ve hepsini kısmak başka düzenleri bozardı. Bunun yerine adı olan bir sınıf — yazan kişi ne yaptığını bilerek yazıyor, ve `katalog-ekrani.test.ts` uygulandığını ölçüyor. */ .daralabilir { min-width: 0; overflow-wrap: anywhere; } /* =========================================================================== TABLO TAŞMASI — ORTAK DAVRANIŞ *(kurucu 21.08.2026)* 🔴 ÖLÇÜLDÜ, gözle bakılmadı (`npm run sur … tasma:`): /raporlar/duzeltme-bekleyenler 1024 → 361px DIŞARIDA 1280 → 105px DIŞARIDA 1440 → taşma yok /kisiler · /ogrenciler 1280 ve 1440 → taşma yok 🔴 NEDEN `ortak.css`, NEDEN `liste-bileseni.js` DEĞİL: ölçüldü — `duzeltme-bekleyenler.html` `LISTE_STIL`i **hiç almıyor**. Kuralı oraya yazmak, taşan ekranın dışında kalırdı. `ortak.css` dördüne de ulaşıyor; *"tek yerde çöz"* şartı ancak GERÇEKTEN ulaşan yerde sağlanır. 🔴 İKİ SARMALAYICI ADI VAR ve ikisi de kapsanıyor: `.kaydir` *(kisi/kayit listesi)* ve `.tablo-sar` *(liste bileşeni · raporlar)*. Birini yazıp öbürünü unutmak, beşinci ekranda yine taşmaktır. =========================================================================== */ /* 🔴 `min-width:0` ŞART: esnek kutunun varsayılanı `min-width:auto` ve içeriğinden dar olmayı REDDEDER — sarmalayıcı büyür, düzeni iter. */ .kaydir, .tablo-sar { overflow-x: auto; min-width: 0; max-width: 100% } /* =========================================================================== TABLO GENİŞLİĞİ — LISTE-YALIN A1·A2 (kurucu Chrome turu 06.09.2026) 🔴 SABİT YERLEŞİM KALDIRILDI. `table-layout:fixed` sütunlara EŞİT pay veriyordu ve sonuç ölçüldü: «58.500,00 ₺» ile «28.10.2026» kesiliyor, sağda boş şerit kalıyordu. Kesilme bir TÜR meselesi: PARA · TARİH · ROZET · KİMLİK · SAYI → asla kesilmez (nowrap + asgari genişlik, içeriğine daralır) METİN (ad soyad · açıklama · program) → artan yeri paylaşır, kesilme YALNIZ burada, tamı `title`de 🔴 KURAL BURADA, LISTE_STIL'DE DEĞİL: Kişiler ve Öğrenciler kendi tablolarını çiziyor ve ortak bileşenin sınıfını taşımıyor; kuralı bileşene bağlamak o iki ekranı — kesilmenin en çok görüldüğü yerleri — kapsam dışında bırakırdı (yasak #27). =========================================================================== */ .kaydir > table, .tablo-sar > table { table-layout: auto; width: 100% } .kaydir > table th, .kaydir > table td, .tablo-sar > table th, .tablo-sar > table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tür sütunları: içeriğine daralır, KESİLMEZ. Asgari genişlikler türün en uzun gerçek değerinden ölçüldü (para «58.500,00 ₺» · tarih «28.10.2026 14:24» · rozet «Sonuç girilmedi» · kimlik «0533 *** ** 96») VE BAŞLIK METNİNDEN: 1024 pikselde «SON GÖRÜŞME» başlığı kesiliyordu — sütun değeri sığdırıp başlığı kesmek, sütunun ne olduğunu gizler. */ .kaydir > table th.t-para, .kaydir > table td.t-para, .tablo-sar > table th.t-para, .tablo-sar > table td.t-para, .kaydir > table th.t-tarih, .kaydir > table td.t-tarih, .tablo-sar > table th.t-tarih, .tablo-sar > table td.t-tarih, .kaydir > table th.t-rozet, .kaydir > table td.t-rozet, .tablo-sar > table th.t-rozet, .tablo-sar > table td.t-rozet, .kaydir > table th.t-kimlik, .kaydir > table td.t-kimlik, .tablo-sar > table th.t-kimlik, .tablo-sar > table td.t-kimlik, .kaydir > table th.t-sayi, .kaydir > table td.t-sayi, .tablo-sar > table th.t-sayi, .tablo-sar > table td.t-sayi { width: 1px; white-space: nowrap; overflow: visible; text-overflow: clip; } .kaydir > table th.t-para, .tablo-sar > table th.t-para, .kaydir > table td.t-para, .tablo-sar > table td.t-para { min-width: 112px } .kaydir > table th.t-tarih, .tablo-sar > table th.t-tarih, .kaydir > table td.t-tarih, .tablo-sar > table td.t-tarih { min-width: 112px } .kaydir > table th.t-rozet, .tablo-sar > table th.t-rozet, .kaydir > table td.t-rozet, .tablo-sar > table td.t-rozet { min-width: 112px } .kaydir > table th.t-kimlik, .tablo-sar > table th.t-kimlik, .kaydir > table td.t-kimlik, .tablo-sar > table td.t-kimlik { min-width: 124px } .kaydir > table th.t-sayi, .tablo-sar > table th.t-sayi, .kaydir > table td.t-sayi, .tablo-sar > table td.t-sayi { min-width: 88px } /* İşlem sütunu (⋯) dar ve sabit — tür sütunu değil. */ .kaydir > table th.s-islem, .tablo-sar > table th.s-islem, .kaydir > table td.s-islem, .tablo-sar > table td.s-islem { width: 44px; min-width: 44px } /* METİN: artan yeri paylaşır; kesilme yalnız burada. */ .kaydir > table th.t-metin, .tablo-sar > table th.t-metin, .kaydir > table td.t-metin, .tablo-sar > table td.t-metin { width: auto; min-width: 140px; } /* Toplam satırı hiçbir zaman kesilmez (A3). */ .kaydir > table tr.toplam-satiri td, .tablo-sar > table tr.toplam-satiri td { white-space: nowrap; overflow: visible; } /* Ad sütunu bilerek sarar — kısaltmak okunmaz kılardı. */ .kaydir > table td.s-ad, .tablo-sar > table td.s-ad { white-space: normal } /* 🔴 SON SÜTUN YAPIŞKAN — ÜÇÜNCÜ YOL *(kurucu onayı 21.08.2026)*. İki kusurlu seçenek ölçülmüştü: `table-layout:fixed` + kırpma → tablo sığar, EYLEM DÜĞMESİ kesilir son sütun korunur → düğme okunur, tablo 121px kayar Üçüncüsü ikisini de çözüyor: sütun sağa **yapışır**, tablo kaysa bile düğme **görünür kalır**. Kaydırma sürüyor ama artık bedeli yok. 🔴 ARKA PLAN ŞART: yapışkan hücre saydam olursa altından kayan sütunlar geçer ve okunmaz hâle gelir. 🔴 **`:last-child` DEĞİL `.s-islem`** *(düzeltildi 23.08.2026)*. Kural son sütunu AYRIM YAPMADAN `width:1%` yapıyordu; eylem sütunu olmayan ekranlarda son sütun bunu yiyordu. Ölçüldü: CRM arama kuyruğunda son sütun «Durum» ve **9 piksele** düşüyordu — kendi kuralı (`.kuyruk-tablo .s-durum{width:78px}`) daha DÜŞÜK özgüllükte olduğu için eziliyordu. *Yasak #64'ün CSS yüzü: ölçüt "son sütun" değil "EYLEM sütunu" olmalıydı — konum, rolün yerine geçmez.* */ .kaydir > table th.s-islem, .kaydir > table td.s-islem, .tablo-sar > table th.s-islem, .tablo-sar > table td.s-islem { width: 1%; white-space: nowrap; overflow: visible; position: sticky; right: 0; z-index: 1; } .kaydir > table tbody td.s-islem, .tablo-sar > table tbody td.s-islem { background: var(--n0) } .kaydir > table thead th.s-islem, .tablo-sar > table thead th.s-islem { background: var(--n2); z-index: 2 } /* Satır vurgusu yapışkan hücreyi de kapsasın — yoksa hücre "kopuk" durur. */ .kaydir > table tbody tr:hover td.s-islem, .tablo-sar > table tbody tr:hover td.s-islem { background: var(--n1) } /* Kaydırıldığını gösteren ince ayraç. */ .kaydir > table td.s-islem, .tablo-sar > table td.s-islem, .kaydir > table th.s-islem, .tablo-sar > table th.s-islem { box-shadow: -6px 0 6px -6px rgba(0,0,0,.18); } /* =========================================================================== SATIR YOĞUNLUĞU — TEK ÖLÇÜ *(kurucu 21.08.2026)* 🔴 Ölçüldü: Kişiler ~44px, CRM kuyruğu ~120px. Tasarım kararı *"yoğun · hızlı · sade"* *(`docs/arayuz.md`)* ve iki ekran iki ayrı yoğunlukta duruyordu. 🔴 ÖLÇÜ `kisi-listesi.html` İÇİNDE TANIMLIYDI — yani ortak değildi ve ikinci ekran onu göremiyordu. Artık `ortak.css`te; her ekran aynı değeri okuyor *(yasak #27)*. =========================================================================== */ :root { --satir: 34px } /* Liste tablolarının satır yüksekliği — sarmalayıcı hangi ad olursa olsun. */ .kaydir > table tbody td, .tablo-sar > table tbody td { height: var(--satir); padding-top: 0; padding-bottom: 0; } /* =========================================================================== "HENÜZ HAZIR DEĞİL" SEBEBİ — GÖRÜNÜR *(kurucu 21.08.2026)* 🔴 Sebep önce `title` içindeydi: yalnız SOLUK RENK görünüyordu ve fareyle üstünde bekleyen kimse sebebi okumuyordu. 🔴 VE KURALI İKİ KEZ YANLIŞ YERE YAZDIM: önce `ISKELET_STIL`e — ölçüldü, `duzeltme-bekleyenler.html` onu **hiç almıyor**, yalnız `KABUK_STIL` enjekte ediyor. Ekran görüntüsü gösterdi: "Dönüşüm hunisihenüz hazır değil" yan yana duruyordu. `ortak.css` her ekrana ulaşıyor — ölçülen tek yer burası. =========================================================================== */ .kenar .yok { line-height: 1.25 } .kenar .yok small { display: block; font-size: 11px; color: var(--n4); margin-top: 1px; line-height: 1.2 } /* ══ MODÜL KENAR ÇUBUĞU — TEK KAYNAK ══════════════════════════════════ 🔴 Kurallar `kabuk.js > ISKELET_STIL` içindeydi ve **hiçbir ekran onu enjekte etmiyordu** (ölçüldü 22.08: 13 ekranın 13'ü). `ortak.css` ise ekranların HEPSİNDE `` ile duruyor — kural artık ulaşıyor. 🔴 İKİ SÜTUNU `:has()` KURUYOR, ekran başına sınıf eklenmedi. Ölçüt: *"`#icerik`in doğrudan çocuğu bir kenar çubuğu mu"*. `.duzen` kullanan ekranlar (CRM · Öğrenciler · Kişiler · kişi kartı) kendi ızgaralarını kuruyor ve bu kural onlara HİÇ değmiyor. 🔴 Ekranın kendi `