/* ============================================ RÖPER — TASARIM DİLİ Editöryel minimalism, mimari yayın hissi ============================================ */ :root { /* Renkler — MONOKROM, NÖTR GRİ (8 Eylül 2026). Öncesi krem #FAF7F2 zemin + mimar yeşili #3D5A47 vurgu idi. Kullanıcı kararı: renk kalksın, zemin nötr olsun, yön "yumuşak katman" olsun. Dört yönün karşılaştırması ve ölçümleri `_tasarim-deneme.html` içinde duruyor. ÜÇ YÜZEY KATMANI. Öncesi TEK DÜZLEMDİ ve teşhisin merkezi buydu: sitede kart diye çizilen şeyler aslında 1px çizgiyle ayrılmış tablo hücreleriydi (`.tools-grid { gap: 0 }`), bütün sitede yalnız BİR gölge vardı ve o da mobil çekmecedeydi. --bg zemin, en alt düzlem --bg-elevated kart, zeminden gölgeyle ayrılır --surface kart içi (tablo şeridi, iç kutu) DURUM RENKLERİ MONOKROMA DÂHİL DEĞİL, ayrı blokta duruyorlar. Onlar dekorasyon değil SİNYAL: fiyatsız poz sessizce 0 TL katıyordu (6.11), bir eksi işareti toplamı düşürüyordu (6.33), matris değişince keşif bayatlıyordu (B1). Griye çevirmek o üç korumayı iptal ederdi. */ --bg: #E4E3DF; --bg-elevated: #FFFFFF; --ink: #141414; /* DEGER EKSENI KOYULASTIRILDI (8 Eylul 2026, WCAG 2.1 AA karari). Olculdu: eski `--ink-subtle: #8C8A85` sol panelde 2,66:1, zeminde 2,69:1, cam kartta 3,11:1 veriyordu; AA govde metni icin 4,5:1 istiyor. Gercek tarayicida 9 sayfada 761 metin ogesi esigin altindaydi ve HEPSI bu tek token'dan geliyordu. `--ink-muted` de koyulastirildi ve sebebi erisilebilirlik DEGIL, anlam: yalniz subtle 4,5'e cekilseydi iki kademe arasindaki ayrim 2,00:1'den 1,20:1'e duser, yani "zorunlu degil" ile "belirsiz" gorsel olarak birlesirdi. Bu, monokrom gecisinde yakalanan `.zorunlu` / `.zorunluDegil` cakismasinin ayni sinifi. Bugunku ayrim 1,52:1. Eski 2,00'in altinda ve bu AA'nin kacinilmaz bedeli: cok silik bir metin kademesi 4,5:1 ile bir arada olamaz. ink 21,0:1 · muted 6,93:1 · subtle 4,56:1 (en kotu zemin #E3E2DD) */ --ink-muted: #4B4944; --ink-subtle: #66645F; --line: #E0DFDB; --line-strong: #141414; /* GÖRÜNÜR SINIR (R6-b · 21 Eylül 2026 · WCAG 1.4.11). `--line` DEKORATİF bir ayraçtır ve öyle kalıyor: bölüm çizgisi, tablo şeridi, kart kenarı. Ama 20 Eylül'de D3 (1.4.11) ölçümü açıldığında görüldü ki aynı token *anlam taşıyan* iki yerde de kullanılıyordu ve ikisi de eşiğin altındaydı: form kontrolünün görünür sınırı · beyaz kutuda 1,33:1 (122 bulgu) `.sema-soluk` dolgusu · şema zemininde 1,20:1 ( 14 bulgu) 1.4.11 bir arayüz bileşeninin sınırından ve anlam taşıyan bir grafikten 3:1 ister. Değer ÖLÇÜLEREK seçildi, göz kararıyla değil: #8C8A85 beyaz 3,45 surface 3,17 cam 3,11 zemin 2,69 ← zeminde düşer #807E79 beyaz 4,06 surface 3,72 cam 3,66 zemin 3,16 ← SEÇİLEN #66645F beyaz 5,91 ... zemin 4,60 ← form için ağır Neden `#807E79`: D3a "en iyi komşu" kuralıyla ölçülüyor (kenarlık ya İÇ ya DIŞ zeminine karşı 3:1 sağlasa yeter) ama D3b "en kötü komşu" kuralıyla ölçülüyor. Tek token ikisini de karşılamak zorunda, yani BÜTÜN zeminlerde 3:1'i geçen en açık değer alındı. Daha koyu bir değer (`--ink-subtle`) geçiyordu ama her girdi kutusunu kalın bir çerçeveye sokuyordu; bu, palet değişmeyecek diye seçilen Y3'ün kapsamını aşardı. */ --grafik-sinir: #807E79; /* Vurgu artık MÜREKKEBİN KENDİSİ. Değişken ADI korundu, çünkü bir değişken adı rolü anlatır, değeri değil: "dikkat çeken öğe" rolü değişmedi, yalnız rengi değişti. Yeniden adlandırmak 90 çağrıyı elle dolaşmak demekti ve tek bir atlama sessizce yeşil bir leke bırakırdı. DİKKAT: `--accent` bir DOLGU olarak kullanıldığı yerlerde artık `--ink` ile aynı değerde. `button:hover { background: var(--accent) }` gibi kurallar görünmez hâle gelirdi; onlar tek tek ele alındı. */ --accent: #141414; --accent-soft: #F2F1EF; /* Koyu dolgulu bir öğenin üzerine gelince. Eskiden bu iş `--accent` ile yapılıyordu (siyah zemin → yeşil zemin); yeşil kalkınca o kural SESSİZCE GÖRÜNMEZ olurdu, çünkü iki değer artık aynı. */ --ink-hover: #3A3A38; /* Yüzey — kart, satır ve tablo zeminlerinin krem üstü tonu. 6 Eylül 2026'ya kadar `var(--surface, #FFFDF8)` diye 30 yerde çağrılıyordu ama HİÇBİR YERDE TANIMLI DEĞİLDİ; hepsi sessizce yedeğe düşüyordu. CSS'i okuyan onu tanımlı bir tema değişkeni sanardı. Tanımlandı, çağrılardaki yedekler kaldırıldı. */ --surface: #F6F5F3; /* Durum renkleri — 6 Eylül 2026'da tek yere toplandı. Öncesi: kesif.css, mahal.css ve poz-ortak.css'te elle yazılı hex değerleri. Üç yerde AYRIŞMIŞLARDI: uyarı arka planı üç ayrı tondaydı (#FFF9E8 · #FFF8E8 · #FFF8E6), hata arka planı ikiye bölünmüştü (#FFF6F6 · #FFF4F4). Farklar 1-2/255, yani kimse fark etmiyordu ama sayı üçe çıkmıştı. Bu, bu projenin altı kez yaşadığı "kopyalanan CSS sessizce ayrışır" deseni (CLAUDE.md 6.29). Yeni renk EKLENMEDİ, mevcutlar toplandı. */ --durum-hata: #B00020; --durum-hata-bg: #FFF6F6; --durum-hata-bg-guclu: #FFE5E5; /* çakışma şeridi gibi güçlü uyarılar */ /* KOYULAŞTIRILDI · #C9922B → #8A6A1F (R6-b · 21 Eylül 2026). Sebep tasarım tercihi DEĞİL, ölçüm: bu token yalnız `border-left: 3px solid` olarak kullanılıyor (8 kural, hepsi uyarı kutusu) ve 1.4.11 kalın kenarlıktan 3:1 istiyor. Eski değer kendi zemininde 2,62:1, sayfa zemininde 2,14:1 veriyordu; 40 bulgunun 30'u Proje Ön Kontrol'ün ASIL mevzuat uyarılarıydı ve sol kenarlık bu projede ayrımın tek görsel taşıyıcısı (3D). Okunmayan bir ayrım ayrım değildir. ARA DEĞER #96701F DENENDİ VE `sinyal_ayrikligi_denetimi.py` REDDETTİ. O değer bütün eşikleri geçiyordu, ama metin token'ına (#8A6A1F) **ΔE2000 3,39** kalıyordu: iki SİNYAL token'ı algısal olarak ayırt edilemez hâle geliyor ve betiğin kalibre ettiği sinyal eşiği 17,37'den 3,39'a ÇÖKÜYORDU. 3,39'luk bir eşik neredeyse her yeni rengi "ayrık" sayar, yani denetim sessizce hiçbir şey ölçmez olurdu. Betik bunu [3b] KALİBRASYON SAĞLIĞI bölümünde yakaladı. Çözüm ikisini AYNI DEĞERE getirmek oldu: #8A6A1F her iki eşiği de karşılıyor (kenarlık 3:1 · metin 4,5:1) ve özdeş değerler tekilleştirildiği için sinyal eşiği 17,37'ye geri döndü. #8A6A1F uyarı-bg 4,80 beyaz 5,05 cam 4,55 zemin 3,93 sidebar 3,71 ANLAMI DEĞİŞMEDİ, tonu koyulaştı; 8 Eylül'de değer ekseninin AA için koyulaştırılmasıyla aynı sınıf bir değişiklik. `--favori` (#C9922B) DOKUNULMADI: o bir metin glifi (☆/★) ve ayrımını renk değil ŞEKİL taşıyor (3B). */ --durum-uyari: #8A6A1F; /* KENARLIK · 1.4.11 · 3:1 */ /* AYNI DEĞER, AYRI TOKEN ve bu bilinçli · `--favori` ile `--durum-uyari`nın bir dönem aynı değerde ama ayrı tutulmasıyla aynı gerekçe (3B): eşikleri farklı (3:1 ve 4,5:1), yani ileride kenarlık görünüm için açılmak istenirse metin token'ı yerinde kalır ve sessizce sürüklenmez. Tek değişkende toplanırsa o koruma kaybolur. */ --durum-uyari-metin: #8A6A1F; /* METİN · AA · 4,5:1 */ --durum-uyari-bg: #FFF9E8; --durum-negatif-bg: #F3F0FA; /* minha satırı; hata değil, dikkat */ /* Favori yıldızı. Değeri --durum-uyari ile AYNI ama rolü ayrı: biri "dikkat", öteki "işaretledin". Tek değişkende toplanırsa uyarı tonu değiştiği gün yıldız da sessizce sürüklenir. */ --favori: #C9922B; /* ---- KİMLİK KATMANI · Y3 (R6-b · 21 Eylül 2026) ---- Kullanıcı R6-a'da dört varyantı ekranda görüp Y3'ü seçti: zemin, mürekkep, font, cam ve ızgara MONOKROM KALIR, renk yalnız bir kimlik katmanında durur. Ölçümler ve elenen yönler CLAUDE.md 6H'de. DÖRT renk, yedi değil. Yedi araç rengi denendi ve ÖLÇÜMLE elendi: ΔE2000 eşiğini geçen yedili setler var ama ancak tonları sıkıştırarak (iki yeşil, iki turkuaz) ya da sıcak banda girerek. Ölçüm geçiyordu, ayırt edilebilirlik geçmiyordu. Dört renk hem rahatça ayrık hem DAHA BİLGİLENDİRİCİ: renk aracın kimliğini değil TÜRÜNÜ söylüyor. Ölçüldü: durum renklerine en yakın kimlik ΔE2000 ≥29,5 (sinyal eşiği 17,37), kimlikler birbirine ΔE 20,9, en kötü zeminde kontrast 3,80 (1.4.11 için 3:1 yeter, rozet metni için 4,5 gerek ve sidebar dışındaki her zeminde sağlanıyor). ÜÇ KISIT GEVŞETİLEMEZ: 1. Renk SOL KENARLIKTA durmaz. Sol kenarlık bu projede semantik bir araçtır (3D): `.ok-kart`ın zorunlu / zorunlu değil / koşullu ayrımının tek görsel taşıyıcısı. 2. Renk METİN ZEMİNİ olmaz. Beyaz metin renkli zemine yazılmaz. 3. Renk DURUM BİLDİRMEZ. Durum renkleri ayrı blokta ve sinyal; kimlik rengi yalnız "hangi araçtayım" der. */ --kimlik-hesap: #0F766E; /* Yapı Maliyeti · Hizmet Bedeli */ --kimlik-proje: #1E3A5F; /* Keşif · Mahal Listesi */ --kimlik-referans: #86198F; /* Şartnameler · Pozlar */ --kimlik-mevzuat: #2563EB; /* Proje Ön Kontrol */ /* Tipografi — Fira ailesi (3 Eylül 2026). Öncesi Fraunces + Inter + JetBrains Mono idi. Tek süperaileye geçildi: Fira Sans ve Fira Mono aynı elden (Erik Spiekermann / Carrois) çıkıyor, Herman Miller'ın kullandığı FF Meta ile aynı tasarımcı soyundan geliyor. Lisans: SIL Open Font License, ticari kullanım serbest. Ölçüm notu: Fira Sans gövdede Inter'in %97,5'i, Fira Mono kod dizisinde JetBrains ile %100 aynı genişlikte. Boyut ölçeği bu yüzden değişmedi; yalnızca başlık ağırlıkları ve sıkılığı kalibre edildi. */ --font-display: "Fira Sans", system-ui, sans-serif; --font-body: "Fira Sans", system-ui, sans-serif; --font-mono: "Fira Mono", "Courier New", monospace; /* Ağırlık ölçeği — tek yerde toplandı. Fraunces bir serifti, 500 ağırlıkta başlık olarak yeterli geliyordu. Fira Sans grotesk; aynı 500 ağırlıkta başlık silik kalır. Hiyerarşi ağırlıkla kuruluyor, ölçüldü: 500 ile 700 arasında genişlik farkı yalnızca binde 3, yani ağırlık artışı satır kırılımını bozmuyor. */ --w-normal: 400; --w-orta: 500; /* vurgu, aktif nav, sayı değeri */ --w-baslik: 600; /* bölüm ve kart başlıkları */ --w-guclu: 700; /* sayfa başlığı, marka */ /* Ölçek */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.875rem; --text-3xl: 2.5rem; --text-4xl: 3.5rem; --text-5xl: 5rem; /* SONUÇ RAKAMI ve SAYFA BAŞLIĞI (8 Eylül 2026). Teşhisin en somut ölçümü buydu: sayfa başlığı 40px, aracın ürettiği CEVAP 22px. Bir hesap aracında hiyerarşi tam tersti. Ayrıca `--text-4xl` ile `--text-5xl` TANIMLI OLDUĞU HÂLDE hiçbir yerde çağrılmıyordu; ölçek 80 piksele kadar kuruluydu, site 40 pikseli hiç geçmiyordu. clamp tabanı 2,25rem ölçülerek seçildi: 375px ekranda keşif toplamı gibi 13 haneli bir dize (3.342.627,68 TL) taşmadan sığmalı. Tarayıcıda dört yön × beş ekran sınandı, taşma 0. */ --rakam: clamp(2.25rem, 6vw, 4.25rem); --baslik-sayfa: clamp(2.5rem, 5vw, 3.75rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Layout */ --container-max: 1200px; /* Yarıçap ölçeği (8 Eylül 2026). Öncesi TEK değerdi: `--radius: 2px`, yaklaşık 25 yerde çağrılıyordu ve her şey aynı keskinlikteydi. Tek değeri 18px'e çekmek girdi kutularını ve 44px'lik hamburger düğmesini de yuvarlardı; o yüzden ölçek üçe ayrıldı ve `--radius` GÜVENLİ VARSAYILAN olarak yeniden ayarlandı. Dokunulmayan hiçbir `var(--radius)` çağrısı bozulmaz, hepsi 2px yerine 10px alır. */ --radius: 10px; /* varsayılan: girdi, küçük kutu, ikincil yüzey */ --radius-kucuk: 6px; /* SIKIŞIK denetim: satır içi kutu, tablo hücresi girdisi. Ölçüldü: `.sepet-giris` 22px yüksekliğinde ve 10px yarıçap yüksekliğinin yarısı demek; kutu blob gibi duruyordu. Yarıçap kutunun boyuna göre seçilir. */ --radius-kart: 18px; /* zeminden gölgeyle ayrılan kart */ --radius-ic: 12px; /* kart İÇİNDEKİ yüzey */ --radius-pill: 999px; /* buton ve rozet */ /* Yükseklik. Öncesi sitede TEK gölge vardı ve o da mobil çekmecedeydi; içerik alanında sıfır yükseklik vardı. Yumuşak katman yönünün tamamı buna dayanıyor. İki kademe yeter: duran kart ve kalkan kart. */ --golge: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .055); --golge-yuksek: 0 2px 4px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .08); /* CAM (8 Eylül 2026). ÖNCE BİR GERÇEK: `backdrop-filter: blur()` ARKASINDAKİNİ bulanık yapar. Zemin düz tek renk olsaydı düz rengin bulanığı yine aynı düz renk olurdu ve cam etkisi TAMAMEN GÖRÜNMEZ kalırdı. Bu yüzden `body` zeminine çok yumuşak monokrom geçişler verildi; cam onları kırıyor. İkisi ayrılamaz, biri olmadan öteki anlamsız. BAŞARIM SINIRI: `backdrop-filter` pahalıdır. Yalnız SAYISI SINIRLI yüzeylere verilir (kart, panel, diyalog). 13.250 pozluk listenin satırlarına verilseydi kaydırma çökerdi; tablo satırları ve liste öğeleri bilerek dışarıda. */ --cam-zemin: rgba(255, 255, 255, 0.58); --cam-kenar: rgba(255, 255, 255, 0.85); --cam-bulanik: saturate(160%) blur(20px); --cam-ic-isik: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* Sidebar düzeni — SIDEBAR-SPEC.md 6.1 */ --sidebar-width: 300px; --sidebar-bg: #DEDDD8; /* zeminden bir kademe KOYU: panel içerik değil çerçevedir */ /* PANELİN CAMI TOKEN'A BAĞLANDI (R6-b · 21 Eylül 2026). R6-a'da ölçüldü: `.side-panel` zemini `rgba(226,225,220,.66)` diye ELLE yazılıydı ve `--sidebar-bg` tanımlı olduğu hâlde HİÇBİR YERDE kullanılmıyordu. Sonucu iki katlıydı: (1) token ezmek panele ulaşmıyordu, Y4 koyu kip denemesinde 20 kontrast bulgusu bu yüzden çıktı; (2) `--cam-zemin`in geri çekilme kuralları (saydamlık tercihi, `backdrop-filter` yokluğu, yazdırma) paneli hiç kapsamıyordu, yani saydamlık kapalıyken panel %34 saydam kalmaya devam ediyordu. Artık üç geri çekilmenin üçü de paneli kapsıyor. */ --sidebar-cam: rgba(226, 225, 220, 0.66); --sidebar-border: #D0CFCA; --content-max: 1040px; --content-max-genis: 1400px; --nav-aktif-bg: rgba(20, 20, 20, 0.055); /* z-index ölçeği — tek yerde toplandı, çakışma olmasın */ --z-scroll-top: 800; --z-backdrop: 900; --z-sidebar: 1000; --z-menu-btn: 1100; } @media (max-width: 1200px) { :root { --sidebar-width: 260px; } } /* ============================================ RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink); /* Camın kıracağı ZEMİN. Tek renk bir zeminde `backdrop-filter` hiçbir şey üretmez (bkz. --cam-* notu). Geçişler monokrom ve bilerek çok düşük kontrastlı: iş bir hesap aracı, zemin dikkat çekmemeli, yalnız camın tutunacağı bir doku vermeli. `background-attachment: fixed` KULLANILMADI: mobilde kaydırma takılmasına yol açan bilinen bir davranış. */ /* İLK DENEMEDE BU ZEMİN ÇOK SİLİKTİ ve cam görünmedi. Ölçüldü: zeminin kendi değişimi 8/255'in altında kalınca `backdrop-filter` fiilen hiçbir şey üretmiyor, çünkü bulanıklaştıracak bir FARK yok. Üç katman var ve sırası önemli (ilk katman en üstte): 1. IZGARA · camın asıl görünme sebebi. Bulanıklık KESKİN KENARI yumuşatır; düz bir geçişte fark edilmez, çizgide edilir. Mimarlık aracında çizim kâğıdı dokusu ayrıca yerinde. 2-4. HAVUZLAR · büyük tonal değişim, camın içinden geçen ton farkı. Zemin de bir kademe koyulaştı: kart ile zemin arasında görünür bir sınır olmadan cam "cam" gibi okunmuyor. */ background-color: var(--bg); background-image: repeating-linear-gradient(0deg, rgba(20, 20, 20, .042) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(20, 20, 20, .042) 0 1px, transparent 1px 44px), radial-gradient(1200px 820px at 8% -10%, rgba(255, 255, 255, .96), transparent 60%), radial-gradient(900px 700px at 96% 2%, rgba(255, 255, 255, .70), transparent 55%), radial-gradient(1100px 900px at 55% 112%, rgba(20, 20, 20, .10), transparent 60%); background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat; /* Önceki "ss01","cv11" Inter'e özgü karakter alternatifleriydi; Fira Sans'ta karşılıkları yok, sessizce ölü kalıyordu. Kaldırıldı. */ } /* Tablolarda rakamlar alt alta hizalansın. Fiyat ve miktar kolonlarının bir kısmı mono değil gövde fontuyla yazılıyor (.poz-fiyat, .sepet-tutar); orantılı rakamlarda basamaklar kayıyordu. Gövde metnine verilmedi: paragraf içindeki "1.659 poz" gibi ifadeleri gereksiz seyreltir. */ table { font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* HTML'in hidden özniteliği, display'i açıkça atanmış öğelerde sessizce çalışmaz (bkz. CLAUDE.md bölüm 5 — bu projede iki kez yakalandı). Merkezî çözüm: */ [hidden] { display: none !important; } /* ============================================ CAM YÜZEY Tek tanım, her yerden çağrılır. Bileşen dosyaları (kesif, mahal, on-kontrol) styles.css'ten SONRA yüklendiği için kendi panellerine bu bloğu ayrıca uygular; buradan uygulansaydı onların `background: var(--bg-elevated)` kuralı camı sessizce ezerdi. ============================================ */ /* DİKKAT · bu bloğun `background`, `border` ve `box-shadow` satırları bir kez SESSİZCE SİLİNDİ. Sebep: `.result-box` bu seçici listesinin SON üyesi ve `.result-box {` deseni dosyada İLK burada eşleşiyor; kendi yazdığım temizlik betiği o üç satırı buradan söktü. Sonuç kartların tamamen saydam kalması ve camın hiç görünmemesiydi · hata mesajı yok, test yok, yalnız "hiçbir şey değişmemiş" görüntüsü. Bu yüzden `.result-box` artık listenin sonunda DEĞİL. */ .cam, .result-box, .tool-card, .form-section { background: var(--cam-zemin); -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik); border: 1px solid var(--cam-kenar); box-shadow: var(--golge), var(--cam-ic-isik); } /* Şeffaflığı azaltılmış sistemde cam DÜŞER, düz yüzeye döner. Ayrıca `backdrop-filter` desteklemeyen tarayıcıda `--cam-zemin` yarı saydam kalırdı ve metin zeminle karışırdı; @supports ile yalnız destekleyen tarayıcıda saydamlığa iniliyor. */ /* GERİ ÇEKİLME ARTIK DEĞİŞKEN BAZLI, seçici bazlı değil. Önceki hâli yalnız `styles.css`teki dört seçiciyi kapsıyordu; `kesif`, `mahal` ve `on-kontrol` panelleri camı KENDİ dosyalarında uyguladığı ve o dosyalar SONRA yüklendiği için geri çekilme onlara hiç ulaşmıyordu. Token'ı değiştirmek her tüketiciyi kendiliğinden kapsar ve dosya sırasından bağımsızdır. ÖNEMLİ ÖLÇÜM: headless tarayıcı `prefers-reduced-transparency` sorgusuna DAİMA `reduce` cevabı veriyor. Yani bu blok test ortamında her zaman devrede ve cam Playwright ile GÖRÜLEMİYOR. Windows'ta "Saydamlık efektleri" kapalıysa gerçek tarayıcı da `reduce` bildirir ve cam kapanır; bu tasarım hatası değil, kullanıcı tercihine uymaktır. Geri çekilme camı SİLMİYOR, SAYDAMLIĞI AZALTIYOR: %58 yerine %94. Tercihin istediği budur; kenar ışığı ve gölge korunur, yani tasarım dağılmaz, yalnız arkası görünmez olur. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --cam-zemin: rgba(255, 255, 255, 0.96); --cam-bulanik: none; --sidebar-cam: var(--sidebar-bg); } } @media (prefers-reduced-transparency: reduce) { :root { --cam-zemin: rgba(255, 255, 255, 0.94); --cam-bulanik: none; --sidebar-cam: var(--sidebar-bg); } } /* Yazdırmada cam anlamsız ve mürekkep yakar. Bu da değişken bazlı ki bileşen dosyalarındaki panelleri de kapsasın (Proje Ön Kontrol'ün yazdırılabilir kontrol listesi bunlardan biri). */ @media print { :root { --cam-zemin: #fff; --cam-bulanik: none; --cam-kenar: #999; --cam-ic-isik: none; --golge: none; --golge-yuksek: none; --sidebar-cam: #fff; } body { background-image: none; background-color: #fff; } } /* ============================================ LAYOUT ============================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } @media (min-width: 768px) { .container { padding: 0 var(--space-8); } } /* Üst başlık (.site-header, .brand*, .site-nav) ve hero kuralları 3 Eylül 2026'da silindi — görevlerini sol panel üstlendi (bkz. CLAUDE.md 6A). `.hero-eyebrow` silinmedi, `.sayfa-etiketi` olarak yaşamaya devam ediyor: 6 araç sayfasının üst etiketi (`06 / Referans`) bu sınıf. */ .sayfa-etiketi { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-subtle); margin-bottom: var(--space-6); } /* ============================================ TOOLS SECTION ============================================ */ /* SIKILASTIRILDI · R6-b (21 Eylul 2026). Olculdu: ana sayfada iki baslik blogu ust uste biniyordu (`.tool-header` + bu) ve ikisi birlikte izgarayi 598 px'e itiyordu; 1440 px'lik bir ekranda ilk ekranda yalniz 3 kart tam goruluyordu. Bu bolum artik bir SAYFA BASLIGI degil bir IZGARA KUNYESI: cizgi ve buyuk bosluk kalkti, baslik kucuk punto goz kasina dondu. Y3 fikstürünün `.bolum-baslik` kalibinin aynisi. */ .section-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); } .section-title { font-family: var(--font-body); font-weight: var(--w-baslik); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .section-meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); } /* ARAÇ KARTLARI · R6-b (21 Eylül 2026) · Y3 KİMLİK KATMANI. 8 Eylül 2026'da bu kartlar gerçekten KART oldu: öncesi `gap: 0` ile 1px çizgiyle ayrılmış TABLO HÜCRELERİYDİ ve zeminden ayrılmıyorlardı. O karar duruyor; bu turda üstüne kimlik katmanı bindi. ÜÇ ŞEY KALKTI, üçü de kullanıcı kararı (21 Eylül): 1. HAYALET NUMARA · `.tool-card::before`, 8,5rem, %5,5 opaklık, `attr(data-no)` ile okunuyordu. Y1'in tarifi "hayalet numaralar gider" diyordu; varyantlarda korunmuştu ve bu bilinçli bir seçim DEĞİL bir eksiklikti (CLAUDE.md 6H). 2. `.tool-num` · görünen küçük numara, aynı karar. 3. `.tool-status` "Hazır" rozeti · yedi kartın YEDİSİ "Hazır" diyordu, yani rozet sıfır bilgi taşıyordu. Yerini KİMLİK rozeti aldı ve o araç TÜRÜNÜ söylüyor. Sayfa etiketindeki numara (`03 / Hesap Aracı`) DURUYOR ve bu ayrı bir kayıt: `.sayfa-etiketi` 3D'nin konusu, kullanıcı 9 Eylül 2026'da "böyle kalsın" demişti ve o kayıt yeniden AÇILMADI. Izgara iki sabit kolondan auto-fill'e geçti. Ölçüldü (R6-a + 21 Eylül): 1440 px ekranda ilk ekranda görünen anlamlı bilgi birimi 4 → 9, sayfa yüksekliği 2.140 → 1.033 px. KİMLİK RENGİ ÜST KENARDA VE ROZETTE. Sol kenarlıkta DURMAZ: sol kenarlık bu projede semantik bir araçtır (3D). Metin zemini de olmaz. */ .tools-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .tool-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); /* Cam bloğu `border: 1px solid var(--cam-kenar)` veriyor; burada yalnız ÜST kenar kalınlaşıyor ve rengini kimlikten alıyor. */ border-top-width: 3px; border-top-color: var(--line); transition: transform 0.18s ease, box-shadow 0.18s ease; } .tool-card:hover { transform: translateY(-2px); box-shadow: var(--golge-yuksek), var(--cam-ic-isik); } @media (prefers-reduced-motion: reduce) { .tool-card { transition: box-shadow 0.18s ease; } .tool-card:hover { transform: none; } } .tool-card[data-grup="hesap"] { border-top-color: var(--kimlik-hesap); } .tool-card[data-grup="proje"] { border-top-color: var(--kimlik-proje); } .tool-card[data-grup="referans"] { border-top-color: var(--kimlik-referans); } .tool-card[data-grup="mevzuat"] { border-top-color: var(--kimlik-mevzuat); } /* KİMLİK ROZETİ. Mono DEĞİL ve bu bilinçli bir sapma: bölüm 3B'nin ilkesi "rozet mono" diyor, ama kullanıcı Y3'ü EKRANDA GÖREREK seçti ve fikstürde bu etiket gövde fontuyla duruyordu. Onaylanan görünümden sessizce sapmamak, ilkeyi harfiyen uygulamaktan önce geldi. Boyut fikstürde 0,6875rem (11 px) idi; 0,75rem'e çıkarıldı çünkü 11 px D2'nin TABANI ve tabanda durmak marj bırakmıyor (3C, bağlayıcı kural). Etiketler tek kelime seçildi (Hesap · Proje · Referans · Mevzuat) ve gerekçesi Türkçe: `text-transform: uppercase` küçük "i" taşıyan bir kelimede tarayıcı `lang`ı dikkate almazsa "BELGESI" üretir. Dördünde de küçük "i" yok, yani tuzak yapısal olarak kapalı. */ .tool-grup { font-size: var(--text-xs); font-weight: var(--w-baslik); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-subtle); } .tool-card[data-grup="hesap"] .tool-grup { color: var(--kimlik-hesap); } .tool-card[data-grup="proje"] .tool-grup { color: var(--kimlik-proje); } .tool-card[data-grup="referans"] .tool-grup { color: var(--kimlik-referans); } .tool-card[data-grup="mevzuat"] .tool-grup { color: var(--kimlik-mevzuat); } /* Izgara sıkılaştığı için başlık 1,875rem'den 1,125rem'e indi. Kartın içinde artık hayalet numara yok, yani başlığın onunla yarışması da gerekmiyor. */ .tool-name { font-family: var(--font-display); font-weight: var(--w-baslik); font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.2; } .tool-desc { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.45; flex: 1; } /* `.tool-link` SİLİNDİ (R6-b). Kartın altındaki "Hesapla →" satırıydı ve kartın TAMAMI zaten bir ``: ikinci bir eylem işareti hem gereksiz hem de kart başına bir satır yükseklik ekliyordu. Onaylanan Y3 fikstüründe de yoktu. Ölü CSS bırakılmıyor (6.21'in kalıbı). */ /* `.tool-card--genis` KALDIRILDI · 21 Eylül 2026, ölçümle. Y3 fikstüründe Keşif ve Mahal Listesi iki kolon kaplıyordu ve bunun bir GEREKÇESİ vardı: o kartlar fikstürde ayrıca `.arac-durum` satırını taşıyordu (açık projenin adı, mahal ve kalem sayısı). Ana sayfada canlı proje durumu gösterilmeyeceği kullanıcı kararıyla belli olunca (durum şeridi ve "Kaldığınız yerden" listesi eklenmedi), o kartların taşıyacağı fazladan içerik de kalmadı. Geriye yalnız DEKORATİF bir genişlik kalıyordu. Üstelik ölçüldü ve ızgarayı bozuyordu: auto-fill 1440 ve 1280 px'te ÜÇ kolon veriyor, `span 2` bir kart o satırda **330 px'lik bir delik** bırakıyordu. Sondaki bir boşluk normal okunur, ORTADAKİ bir delik bozuk okunur. Bugün yedi kartın yedisi eşit: 3 kolonda 3+3+1, 2 kolonda 2+2+2+1, yani yalnız sonda boşluk kalıyor. */ /* ============================================ INFO SECTION ============================================ */ .info-section { padding: var(--space-16) 0; } .info-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } @media (min-width: 768px) { .info-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-16); } } .info-title { font-family: var(--font-display); font-weight: var(--w-baslik); font-size: var(--text-lg); margin-bottom: var(--space-4); letter-spacing: -0.01em; } .info-section p { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; } /* Alt bilgi (.site-footer, .footer-content) 3 Eylül 2026'da silindi — künye sol panelin altında. `.tool-page` de silindi; dış boşluğu artık `.app-content` veriyor. */ /* ============================================ FORMS & TOOL PAGES ============================================ */ .tool-header { margin-bottom: var(--space-12); padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); } /* Ana sayfa varyanti. Arac sayfasinda baslik SAYFANIN KONUSUDUR ve nefes almasi gerekir; ana sayfada ise altinda hemen izgara var ve marka zaten sol panelde duruyor. Olculdu: bu iki satir izgarayi ~100 px yukari cekiyor. */ .tool-header--sik { margin-bottom: var(--space-6); padding-bottom: var(--space-4); } /* Sayfa başlığı en büyük punto; Fira Sans burada Fraunces'tan %17 geniş olduğu için sıkılık bir kademe artırıldı (-0.02 → -0.025em). Uzun Türkçe başlıklar ("Yapı Yaklaşık Maliyeti Hesaplama") satır kırmadan sığsın. */ .tool-page-title { font-family: var(--font-display); font-weight: var(--w-guclu); font-size: var(--baslik-sayfa); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--space-4); } .tool-page-desc { color: var(--ink-muted); font-size: var(--text-lg); max-width: 720px; } .form-section { padding: var(--space-8); margin-bottom: var(--space-8); border-radius: var(--radius-kart); } .form-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); } .form-row:last-child { margin-bottom: 0; } /* Girdi altındaki "hangi durumda" açıklaması (bölüm 3, üslup kuralı 4). ÖNCE YALNIZ `hizmet-bedeli.html`in satır içi bloğundaydı; dört sayfada birden kullanılacağı için buraya taşındı. Kopyalansaydı sessizce ayrışırdı: iki satır içi blokta 36 ortak selektörün yedisinin ayrıştığı ölçülmüştü (CLAUDE.md 6.29). */ .ipucu-mini { font-size: var(--text-xs); color: var(--ink-subtle); line-height: 1.5; margin: var(--space-2) 0 0; } /* FORM ETİKETİ — 8 Eylül 2026'da mono/büyük harf tekelinden çıkarıldı. Ölçülmüştü: `label`, `button`, `.sayfa-etiketi`, `.section-meta`, `.tool-card-meta`, `.side-meta` ve `.side-nav-heading` YEDİ AYRI ROL olduğu hâlde ekranda birbirinden ayırt edilemiyordu; hepsi mono, büyük harf, harf aralıklıydı. Bir dilde tek bir cihaz her işi yapıyorsa o artık tercih değil tiktir. Bölünme: GÖZ KAŞI etiketleri (`.sayfa-etiketi`, `.section-meta`) mono büyük harf KALIR, çünkü onlar taranır. Form etiketi OKUNUR, normal yazıma geçer. YAN FAYDA: bu kural, CLAUDE.md bölüm 5'teki iki CSS tuzağından birinin kaynağıydı. `