/* * MOTOTEKER — Design Tokens * Master Plan V4.1.1 §6.1 / §6.2 · DESIGN.md * * KURAL: Hicbir bilesende ham renk kodu yazilmaz. Butun renkler * bu token'lar uzerinden kullanilir. PublicSiteTest bunu tarar. * * Kontrast degerleri olculmustur; degistirmeden once yeniden olcun. */ :root { /* | ⛔ `light dark` DEGIL, YALNIZ `light` — 13 Agustos 2026 karari. | | Bu satir kararin YARISI. Koyu paleti silmek tek basina yetmez: | kaydirma cubugu, onay kutusu, tarih secici ve acilir liste gibi | TARAYICININ cizdigi parcalar `color-scheme`e bakar. `light dark` | birakilsaydi sayfa acik, kontroller koyu bir melez cikardi — | eskiden bu satir tam da bunun TERSI icin vardi (palet koyuya | dondugunde kontroller beyaz kalmasin diye). | | Artik tek palet var, tek deger yaziliyor. */ color-scheme: light; /* | --- Marka renkleri (§6.1 — degistirilemez) --- */ --brand-navy-950: #000042; /* ters yuzey: ust bant, footer, veri paneli */ --brand-blue-700: #0054a6; /* kurumsal ana mavi, ikincil aksiyon */ --brand-blue-500: #0073ce; /* aktif durum, veri vurgusu, odak halkasi */ --brand-red-600: #ed1c24; /* marka kirmizisi — YALNIZ CTA ve kritik aksiyon */ /* | Buton dolgusu icin erisilebilir kirmizi. | beyaz / #ed1c24 = 4.38:1 -> normal metinde AA'yi GECMIYOR. | beyaz / #c8101a = 5.92:1 -> tam AA. Marka rengi kimlikte kalir, | dolgu bu tonu kullanir, hover'da markaya acilir. */ --brand-red-700: #c8101a; /* | Koyu temaya ozel diye eklenmisti; ARTIK ACIK TEMADA DA GEREKLI. | Anasayfa basligi video perdesinin uzerinde duruyor ve orada marka | mavilerinin ikisi de AA'yi kaybediyor: #0054a6 2,61:1 · #0073ce | 4,03:1. Marka rengi DEGISMEDI, yanina bir ton kondu. */ --brand-blue-300: #6cb6ff; /* --- Notr --- */ --neutral-white: #ffffff; --neutral-100: #f3f5f8; --neutral-200: #e3e7ee; --neutral-graphite: #33373d; /* | --- YUZEY KADEMESI ICIN EKLENEN IKI TON — Tur 3, F2 --- | | Sahibi dort yuzeyde de ayni seyi soyledi: "cartlar ic ice giriyor", | "her yer ic ice girmis gibi", "ayni renkten oturu". | | OLCULDU VE HAKLIYDI. Panel sayfasinin zemini `#f3f5f8`, kartin | zemini `#ffffff`; ikisi arasindaki kontrast 1,092:1 — yani kartin | nerede basladigi FIILEN gorunmuyordu. Kenarlik da zayifti | (`#e3e7ee`, 1,240:1), yani sinir ne zeminden ne cizgiden okunuyordu. | | Uc ton bir kademe kuruyor: | sayfa #e9edf5 kartin USTUNDE durdugu zemin (1,17:1 farkla) | kart #ffffff degismedi | ic blok #f4f7fb kartin ICINDEKI blok (1,08:1 farkla) | | ⚠️ METIN KONTRASTI FEDA EDILMEDI: grafit metin yeni sayfa zemininde | 10,29:1 (AAA esigi 7:1). Zemini koyulastirmanin bedeli okunabilirlik | olsaydi bu takas yapilmazdi. | | ⛔ GRADYAN YOK, CAM YOK. Kademe duz renklerle kuruluyor; ayrim | icin bir efekte basvurmak yasagin lafzini degil ruhunu cignerdi. */ --neutral-150: #e9edf5; --neutral-250: #d9dfe9; --neutral-050: #f4f7fb; /* | --- Durum: TINT + INK --- | Dolgu renk + beyaz metin KULLANILMAZ. Eski warning rozeti | beyaz metinle 2.80:1 ile kaliyordu. Asagidaki ciftlerin hepsi | AA metin esigini gecer. */ --success-tint: #e7f4ee; --success-ink: #0f6b42; /* 5.80:1 */ --warning-tint: #fdf1dd; --warning-ink: #8a5606; /* 5.51:1 */ --danger-tint: #fbeae8; --danger-ink: #9a2018; /* 6.95:1 */ --info-tint: #e6f0fa; --info-ink: #0054a6; /* 6.46:1 */ /* | TERS YUZEYDE RISK KIRMIZISI — 26 Agustos 2026. | | ⛔ `--danger-ink` LACIVERTTE OKUNMUYOR: tarayicida olculdu, | #9a2018 uzerine #000042 = 2.40:1. Beyaz zeminde 6.95:1 veren ayni | renk, ters yuzeyde AA'nin YARISINDA kaliyor. | | Bu bir tema turunda ortaya cikti: bayi panosunun bakiye seridi | lacivert oldu ve "Geciken" satirinin kirmizisi sessizce okunmaz | hale geldi — bilgi kaybolmuyordu (satir KALIN ve yaninda | "Gecikmiş" cipi var; renk tek basina anlam tasimaz kurali) ama | sinyal yok olmustu. | | OLCULDU (lacivert #000042 uzerine, aday taramasi): | #f8827a 7.85:1 #ff8a80 8.53:1 <- secilen | #ff9b95 9.62:1 #ffb3ad 11.41:1 (pembeye kayiyor) | | ⚠️ SECIM EN YUKSEK KONTRAST DEGIL: daha acik tonlar sayiyi | buyutuyor ama rengi PEMBEYE cekiyor ve "kirmizi = risk" isareti | zayifliyor. 8.53:1 hem AA'nin cok uzerinde hem hala kirmizi. | | ⛔ BEYAZ ZEMINDE KULLANILMAZ (2.28:1). Bu token YALNIZ `.koyu` | sozlesmesi icindir. */ --danger-on-inverse: #ff8a80; /* | ⛔ `--color-success` ve `--color-warning` SILINDI — Tur 4, 16 Agustos. | | "Yalniz ikon, cizgi ve grafik gibi metin DISI isaretler icin" | diye tanimlanmislardi ve HICBIR KURAL onlari cagirmiyordu. Grafikler | `--grafik-*` serisini, rozetler `--*-tint/--*-ink` ciftlerini | kullaniyor. | | Olu bir renk belirteci zararsiz degil: bir sonraki okuyan "bu | projede bir basari yesili var" sanip onu kullanir ve rozetlerdeki | kontrast kademesinin DISINDA bir yesil dogar. Tanimli olan sey, | tanimli olmayandan daha guclu bir davettir. */ /* | ⛔ IKINCI KIRMIZI (#b42318) SILINDI — 21 Agustos 2026, tema turu. | | ⚠️ Adi bilerek COLON'SUZ yazildi. Silinen bir tokenin adini | `--ad: deger` seklinde bir yoruma yazmak, tanim tarayan her testi | kandirir — `--z-modal` sahte yesili tam olarak boyle dogmustu. | | Tek tuketicisi vardi (`.dugme-tehlike:hover`) ve `--danger-ink` | (#9a2018) ile CAKISAN IKINCI BIR KIRMIZIYDI — silinen | `--color-success`/`--color-warning`in hayatta kalan kardesi. | | Yerine turetme kondu: `color-mix(--danger-ink 88%, beyaz)`. | Olculdu: #a63b34, beyaz metinle 6.37:1 (eskisi 6.57 — pratikte ayni, | AA fazlasiyla gecer). Palet 46 -> 45 renk, ham hex 28 -> 27. */ /* --- Anlamsal atamalar --- */ --surface-default: var(--neutral-white); --surface-muted: var(--neutral-100); --surface-sunken: var(--neutral-200); --surface-inverse: var(--brand-navy-950); /* | KOYU YUZEY MERDIVENI — 21 Agustos 2026, tema turu. | | ⛔ NEDEN EKLENDI: koyu yuzey vardi ama SOZLESMESI YOKTU. Bilesen | katmanindaki butun koyu turevler elle yazilmisti ve BES AYRI YUZDE | kullaniyorlardi: %7 ve %12 ayni isi (koyu kart zemini), %18/%20/%24 | ayni isi (koyu kenarlik). Her cagiran kendi sayisini uydurmus. | | ⚠️ VE OLCULDU KI BUGUNKU KART, PROJENIN KENDI ESIGININ ALTINDA: | | ACIK MERDIVEN (ThemeTest esigi > 1.15) | sayfa/kart 1.173 · kart/inset 1.075 · kenar/kart 1.339 | | KOYU MERDIVEN (eski, %7) | bolum/kart 1.136 ← ESIGIN ALTINDA | | Acik tarafta 1.092'yi "kartin nerede basladigi fiilen gorunmuyordu" | diye reddeden proje, koyu tarafta 1.136'yi kabul etmis — cunku kimse | olcmemis. | | SECILEN DEGERLER (olculdu): | bolum — · beyaz metin 19.47 · kisik 10.46 | inset %5 1.090 · beyaz metin 17.85 · kisik 9.60 | kart %12 1.297 ✓ · beyaz metin 15.02 · kisik 8.07 | | %12 uydurulmadi: components.css zaten bir yerde onu kullaniyordu. | Dogru olan sistem yapildi, yanlis olan (%7) ona cekildi. | | ⛔ MERDIVEN IKI ADIM: bolum -> kart. Ucuncu kademe (`inset`) bir | BLOK'tur, kart degil — yoksa "ic ice kart yok" kurali cignenir. | | ⛔ BU IKINCI BIR PALET DEGIL, AYNI PALETIN IKINCI BAGLAMI. Ikisi de | mevcut marka tokenlarindan `color-mix` ile turuyor; ziyaretcinin | isletim sistemi ayarina bakan hicbir sey yok. */ --surface-inverse-inset: color-mix(in srgb, var(--text-inverse) 5%, var(--surface-inverse)); --surface-inverse-raised: color-mix(in srgb, var(--text-inverse) 12%, var(--surface-inverse)); /* | Kademenin iki ucu — bkz. "YUZEY KADEMESI" notu. | | `--surface-page` panel govdesinin zemini; `--surface-inset` kartin | ICINDEKI ikincil blok (tablo basligi, ozet kutusu, form grubu). | | ⛔ `--surface-muted` DEGISTIRILMEDI: onu on alti yer kullaniyor | (urun gorseli zemini, `.dugme-sade:hover`, sekme seridi...) ve | anlami "hafif vurgulanmis yuzey", "sayfa zemini" degil. Var olan | bir tokenin anlamini genisletmek yerine iki yeni token kondu. */ --surface-page: var(--neutral-150); --surface-inset: var(--neutral-050); --text-default: var(--neutral-graphite); /* 11.97:1 / beyaz */ --text-muted: color-mix(in srgb, var(--neutral-graphite) 78%, var(--neutral-white)); --text-inverse: var(--neutral-white); /* 19.47:1 / navy */ --text-on-inverse-muted: #b8bdd6; /* 10.46:1 / navy */ --text-link: var(--brand-blue-700); /* 7.45:1 / beyaz */ /* | Kelime markasi. Ayri bir token cunku BAG DEGIL: lacivert olmasi | kimlik karari, koyu temada acilmasi ise okunabilirlik zorunlulugu. | `--text-default`e baglansaydi acik temada grafit olurdu. */ --text-wordmark: var(--brand-navy-950); --action-primary: var(--brand-red-700); --action-primary-hover: var(--brand-red-600); --action-secondary: var(--brand-blue-700); --action-secondary-hover: var(--brand-blue-500); /* | ⚠️ 15 AGUSTOS 2026 — KENARLIK GUCLENDIRILDI. | | Eskiden `--neutral-200` (#e3e7ee) idi ve beyaz kart uzerinde | 1,240:1 veriyordu. Zemin farki da 1,092:1 olunca kartin siniri iki | kaynaktan da okunamiyordu; sahibinin "ic ice giriyor" demesinin | ikinci yarisi buydu. | | Yeni deger 1,315:1. Kucuk gorunuyor ama zemin kademesiyle BIRLIKTE | calisiyor: sinir artik hem zeminden hem cizgiden belli. | | ⛔ DAHA KOYUYA GIDILMEDI. Kalin ve koyu bir cerceve kutulari | birbirinden ayirir ama ekrani bir tablo cizelgesine cevirir; | aranan sey ayrim, cerceve degil. */ --border-default: var(--neutral-250); /* | ⛔ %32'DEN %60'A — 22 Agustos 2026, BAGIMSIZ ERISILEBILIRLIK DENETIMI. | | Bu token dokuz yerde kullaniliyor ve YEDISI ETKILESIMLI BILESEN | SINIRIDIR: form girdisi, `.dugme-sade`, `.sepet-secim-oge`, | sayfalama, asistan cipi, tablo kaydirma cubugu. WCAG 1.4.11 bu tur | sinirlar icin 3:1 istiyor. | | TARAYICIDA OLCULDU (`/bayi-basvurusu`, 14 girdi): | %32 girdi zeminine karsi 1.69:1 ❌ | beyaz zemine karsi 1.84:1 ❌ | %55 3.06:1 (esik tam sinirda) | %60 3.48:1 ✅ beyazda 3.80:1 | | ⚠️ BEKCILERIM BUNU HIC GORMEDI. `ThemeTest` metin kontrastini olcuyor, | METIN DISI kontrasti degil — yani sitedeki HER form kutusu, her sade | dugme, her sayfalama baglantisi dogdugu gunden beri esigin altindaydi | ve hicbir kural sormadi. | | ⚠️ Ilginc karsilastirma: HATA durumundaki ayni girdi | `border-color: var(--danger-ink)` kullaniyor ve 8.10:1 veriyor. Yani | yuksek kontrastli kenarlik yazilabiliyordu; yalniz VARSAYILAN durum | hic olculmemisti. | | ⛔ %60'IN USTUNE CIKILMADI: `.bos-durum` ve `.olcum-yok` ayni token'i | KESIKLI cerceve olarak kullaniyor ve onlar dekoratif — daha koyusu | "bos kutu"yu bir tabloya cevirirdi. Ustteki `--border-default` notunda | yazan kaygi burada da gecerli: aranan sey ayrim, cerceve degil. */ --border-strong: color-mix(in srgb, var(--neutral-graphite) 60%, transparent); /* | TERS YUZEYIN KENARI. Lacivert bant beyaz sayfanin uzerinde zaten | 19:1 ile ayriliyor, yani gorunur bir kenara ihtiyac yok. | | ⚠️ BU TOKEN ARTIK HEP `transparent` — koyu tema kalkinca (13 Agustos | 2026) tek degeri kaldi. Silinmedi cunku dort yerde | `1px solid var(--border-inverse)` olarak duruyor ve o 1px YERLESIM | AYIRIYOR; kaldirmak dort bandi birer piksel kaydirirdi. | | Yani: renk olarak olu, olcu olarak canli. Bir gun ters yuzeyde | gercekten gorunur bir kenar gerekirse baglanacagi yer burasi. */ --border-inverse: transparent; /* | KOYU YUZEYDE KENARLIK — 21 Agustos 2026. | | ⛔ `--border-inverse` ILE KARISTIRILMAMALI. O bir OLCU tokeni | (`transparent`, dort yerde 1px yerlesim ayiriyor) ve ustteki not | "bir gun gorunur kenar gerekirse burasi" diyor — ama BAGLANMADI: | o dort yerin ikisi lacivert/beyaz siniri ve orada gorunur bir cizgi | YANLIS olur. Yeni kavram, yeni ad. | | Olculdu: | %20 bolum ile 1.68 · kart ile 1.30 (18/20/24'u tekillestirir) | %40 bolum ile 3.57 · kart ile 2.76 (3:1'i gecen ILK basamak; | %34 -> 2.87 gecmiyor) */ --border-on-inverse: color-mix(in srgb, var(--text-inverse) 20%, transparent); --border-on-inverse-strong: color-mix(in srgb, var(--text-inverse) 40%, transparent); /* --- Spacing: 8 px sistemi (§6.2) --- */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-6: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* --- Radius: pazarlama 14, panel 10, kartlarda 16'yi asmaz --- */ --radius-marketing: 0.875rem; /* 14px */ --radius-panel: 0.625rem; /* 10px */ --radius-control: 0.5rem; /* 8px */ --radius-pill: 999px; /* | --- COVERFLOW SERIDI: TEK OLCU --- 23 Agustos 2026 | | ⛔ SERIDIN BUTUN GEOMETRISI BU DEGERDEN TURUYOR: kartlar arasi | mesafe, geri cekilme derinligi ve bakis mesafesi (perspective). | Olculecek baska bir sey YOK — betik yalniz kartin genisligini | okuyor, gerisini hesapliyor. | | ⚠️ `clamp` KIRILMA NOKTASI DEGILDIR: kapali kume kurali medya | sorgularini baglar, akiskan bir olcuyu degil. Serit her genislikte | surekli olcekleniyor, 296px'te de 1024px'te de. */ --serit-kart: clamp(13rem, 22vw, 24rem); /* | KART KENAR ISIGININ ACISI — 23 Agustos 2026. | | Degeri CALISMA ANINDA betik yaziyor (`teknoloji-karti.js`): imlecin | kartin merkezine gore acisi, radyan olarak. Burada BASLANGIC degeri | duruyor. | | ⛔ TANIM ZORUNLU, `var(--kart-aci, 0rad)` yedegi YETMEZ: | `ThemeTest` *"KULLANILAN HER TOKEN TANIMLI"* diyor ve haklidir — | yedekli bir `var()` tanimsiz degiskeni gizler, sonraki okuyucu | degerin nereden geldigini bulamaz. | | ⚠️ Sifir = isik yatay gelir. Klavye odaginda da bu deger | kullaniliyor: odagin bir konumu yok. */ --kart-aci: 0rad; /* | IKON OLCEGI — 21 Agustos 2026, tema turu. | | ⛔ BES HAM OLCU VARDI, SIFIR TOKEN: 1 / 1.125 / 1.375 / 1.75 / 2rem. | Her cagiran kendi sayisini yaziyordu ve olcek diye bir sey yoktu. | | ⛔ VE HIYERARSI TERSTI: yan menude GRUP BASLIGI ikonu 1rem, altindaki | YAPRAK BAGLANTI ikonu 1.125rem idi. Kapsayan, kapsanandan kucuktu. | | KURAL, tek cumlede: KAPSAYAN KAPSANANDAN BUYUKTUR. | grup > yaprak · bolum > satir · tek basina duran > metne eslik eden | | ⚠️ 2rem ELENDI, yeni deger EKLENMEDI: bes basamak dorde indi ve | ThemeTest'in "8px alti ayri deger sayisi" tavanina uc ham deger geri | verildi. Ters hiyerarsi de yeni bir olcuyle degil, VAR OLAN iki | basamagin yer degistirmesiyle cozuldu. */ --ikon-sm: 1rem; /* satir ici: etiket, tablo hucresi, rozet komsusu */ --ikon-md: 1.125rem; /* yaprak: menu baglantisi, kart basligi */ --ikon-lg: 1.375rem; /* grup/bolum: menu grup basligi, taban .ikon */ --ikon-xl: 1.75rem; /* tek basina duran: bos durum, buyuk isaret */ /* --- Golgeler: iki adim. Kenarlik + genis golge AYNI ogede birlesmez. --- */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-navy-950) 8%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--brand-navy-950) 10%, transparent); /* | --- METIN KONTURU — perdenin yerini alan sey --- | | 10 Agustos 2026'da iki perde bandi da kaldirildi (sahibin karari: | "o arkalarinda ki mavi 2 seridi kaldirir misin"). Kontrast | garantisi silinmedi, OLCEGI KUCULDU: banttan harfe indi. | | `paint-order: stroke fill` konturu harfin ARKASINA cizer, uzerine | degil — harf incelmez, agirligini korur. Sonuc: beyaz harfin | dokundugu her piksel `--brand-navy-950`. Olcum degismedi, | beyaz/lacivert 19,47:1; yalniz o lacivertin kapladigi alan 40 kat | kucuk ve ekranda bir SERIT olarak okunmuyor. | | Golge konturun DISINDA, yumusak bir dususle bitiriyor: kontur sert | biterse harf videodan kesilmis gibi durur. | | TEK KALINLIK. Kisa bir sure iki tane vardi (hero basligi 42 px icin | kalin, cati icin ince); baslik ekrandan kalkinca kalin olan olu | kaldi ve silindi. Videonun uzerinde kalan butun metin 14-16 px ve | 2 px onlar icin dogru olcu — 3 px bu boyutta harfin ic bosluklarini | kapatiyor. */ /* | ⚠️ 2px'ten 1px'e INDI — 15 Agustos 2026. | | Sahibi cati yazilarini "cirkin" buldu ve hakliydi: | `-webkit-text-stroke` konturu harfin ICINE dogru boyuyor, yani | govdeyi yiyor. 14-16 px'lik menu metninde 2px, em'in %14'u — | harfler "cizili" ve bulanik gorunuyordu. | | ⛔ KONTUR KALDIRILMADI: kontrast garantisi ona bagli (perde | 10 Agustos'ta sahibinin karariyla kalkti, garanti banttan HARFE | tasindi). 1px hâlâ her harfin cevresine lacivert koyuyor; degisen | sey garantinin varligi degil AGIRLIGI. | | Golge de biraz siklastirildi: kontur incelince kaybolan ayrisma | oradan geri geliyor. */ --metin-konturu: 1px; --metin-golgesi: 0 0 3px color-mix(in srgb, var(--brand-navy-950) 85%, transparent), 0 2px 10px color-mix(in srgb, var(--brand-navy-950) 65%, transparent); /* | ⛔ `--hero-gecis: 7rem` SILINDI — Tur 4, 16 Agustos 2026. | | Yorumu su iddiada bulunuyordu: *"olcu KALDI ve isi degisti — artik | yalnizca basligi catinin altina itiyor."* IDDIA YANLISTI. Belirtec | `components.css` icinde SIFIR kez cagriliyordu; hero basliginin | catidan uzakligini `.hero-metin` dolgusu belirliyor. | | Yani perde 10 Agustos'ta kalkarken olcu de islevini kaybetmis, ama | yorum onu hayatta gostermeye devam etmis. `--hero-perde*` | silinirken bu da silinmeliydi. | | ⚠️ `--hero-perde*`in geri gelmedigini kontrol eden ThemeTest kurali | YERINDE DURUYOR — silinen o degil. */ /* | Hero yuksekligi. `svh` (kucuk gorunum alani): mobilde adres cubugu | acilip kapanirken hero ZIPLAMAZ — `vh` ziplatir. | | %92'den %80'e indi. Sebep aritmetik: bulucu tablasi artik akista ve | hero'nun ALTINDA duruyor. %92 + tabla ilk ekrani tasiriyordu; %80 | ile 900px'lik bir gorunumde 720 + 128 = 848 px eder ve alttaki | bolumden 52 px gorunur — sayfanin devam ettigi belli olur. */ --hero-yukseklik: min(80svh, 46rem); /* | Kapsayicinin genisligi. `.kap` bu sayiyi 1180 olarak SABIT | yaziyordu ve hero'daki durdurma dugmesi kendini gorunum alaninin | sag kenarina hizaliyordu — sonuc: dugmenin sag kenari 1401'de, | `.kap` 1303'te bitiyordu ve dugme izgaranin 98 piksel DISINA | tasiyordu. Sayfanin tek hizasiz ogesiydi. | | Sayi artik TEK YERDE: `.kap` da, kaba hizalanmak isteyen mutlak | konumlu her oge de buradan okuyor. */ --kap-genislik: 1180px; /* | Bulucu barinin yuksekligi TEK YERDE. Uc sey ona bagli: barin kendi | min yuksekligi, videonun uzerine BINDIGI miktar (ayni degerin | negatifi) ve

'in alt dolgusu (bara degmesin diye). Sabit sayiya | cevrilirse ucu birden ayri ayri kayar. */ --bulucu-bar-yuk: 3.5rem; /* --- Tipografi: UC aile, SABIT rem olcek (product register) --- */ /* | GOVDE VE ARAYUZ AILESI — Tur 4, 16 Agustos 2026'da Inter'den | BARLOW'a gecti. | | Sahibi: *"cok cirkin, stabil duruyor."* Haklıydi. Inter'in teknik | gerekcesi (x-height 0,546, `opsz` ekseni) dogruydu ama KARAKTERI | YOKTU — her SaaS panelinin, her yonetim arayuzunun fontu. Dogru | olcu, sifir kimlik. | | Barlow Kaliforniya otoyol tabelalarindan tureme, hafif | yuvarlatilmis, dusuk kontrastli bir grotesk. Yol, tabela, hiz — | bir lastik markasinin kendi dunyasi. | | ⚠️ UC AGIRLIK VAR: 400 / 600 / 700. Baska bir sayi yazilirsa | tarayici en yakinini secer; 500 sessizce 400 cizilir. Bu yuzden | CSS'te 500 BIRAKILMADI — kodun soyledigi ile ekranda cizilen ayni. */ --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif; /* | TEKNIK DIZGI AILESI — 11 Agustos 2026'da gercek bir dosyaya baglandi. | | ONCEKI HALI BIR VAADDI, KARSILIGI YOKTU: bu token dort kuralda | kullaniliyordu ve `public/fonts` icinde tek bir mono dosyasi yoktu. | `ui-monospace` Windows Chrome'da desteklenmiyor, yani yigin | CONSOLAS'a dusuyordu. En kotusu `.kunye-olcu`: `font-size: | var(--text-hero)` ile 52 piksele kadar buyuyen, urun detay | sayfasinin EN BUYUK harfleri Consolas ile ciziliyordu. | | JetBrains Mono secildi cunku `EG-ATT1015-12080-18-R-TT` gibi bir | kodda cakisan dort glifi de ayiriyor: `l` kuyruklu, `I` serifli, | `1` tam tabanli, `0` (`zero` ozelligiyle) egik cizgili. */ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace; /* | GOSTERIM AILESI — Archivo yerine BARLOW CONDENSED (Tur 4). | | Ayni ailenin dar kesimi oldugu icin artik "ikinci bir aile" degil, | AYNI SESIN yuksek perdesi. Archivo bagimsiz bir aileydi ve govdeyle | akrabaligi yoktu; Condensed, Barlow'un kendi iskeletini tasiyor. | | ⛔ YALNIZ BUYUK GOSTERIMDE. h1, `.tutar-display`, kelime markasi, | hero. h2-h4 NORMAL Barlow 700 kalir: Condensed 21-26px'te sikisik | okunuyor, motorsport afisi hissi ancak buyuk puntoda calisiyor. | | ⚠️ TEK AGIRLIK: 700. CSS'te 800 yazan 7 kural vardi ve hepsi bu | belirteci tuketiyordu — Inter/Archivo degisken oldugu icin 800 | gercek bir yuzdu. Barlow Condensed'in 800'u YOK; birakilsaydi | tarayici SAHTE KALIN (faux bold) uretirdi. Yedisi de 700'e cekildi. | | Yigin Barlow'a DUSER: condensed dosyasi yoksa baslik normal Barlow | ile cizilir, sayfa bozulmaz. */ --font-display: "Barlow Condensed", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; /* | OLCEKTEKI TEK ISTISNA. Urun yuzeyi (panel, tablo, form) SABIT rem | olcek kullanir ve clamp() YOKTUR — orada akiskan tipografi sayilari | ve hizalamalari bozar. | | Hero AYRI BIR REGISTER: pazarlama yuzeyi, tek satir baslik, yaninda | veri yok. Sabit 2rem telefonda dogru ama genis ekranda ciliz kalir. | Tavan 3.25rem — bagirmayan kurumsal ust sinir. */ /* | ⛔ TAVAN YUKSELDI 3.25rem -> 4.5rem — 21 Agustos 2026, tema turu. | | Olculen kusur: `--text-hero` ile `--text-display` TABANI DA TAVANI DA | birebir ayniydi (`clamp(2rem, ..., 3.25rem)`), yalniz ortadaki egim | %8 farkliydi. Iki token, tek boyut. Yani SAYFANIN EN BUYUK ANI, bir | bolum basligindan buyuk degildi. | | Kaza degil, kayma: 18 Agustos'ta `--text-display` tavani 40 -> 52px | cikarilmis ve o tur `--text-hero`ya bakmamis; display hero'ya | yetismis. | | ⚠️ TABAN KORUNDU (2rem): dar ekran birebir ayni kaliyor, | `--leading-hero` 1.02 ile tek satirda duruyor. Olculen degerler: | 390px -> 32px (taban) · 720px -> 42px | 1180px -> 58px · 1556px+ -> 72px (tavan) | | Tavan `impeccable`in 6rem sinirinin altinda; bagirmiyor. */ --text-hero: clamp(2rem, 1rem + 3.6vw, 4.5rem); /* | OLCEK YENIDEN KURULDU — 11 Agustos 2026. | | Eski olcegin uc sorunu vardi: | 1. Oranlar duzensizdi: 1.167 -> 1.143 -> 1.125 -> 1.111 -> 1.2 -> 1.333. | Adimlar sirayla DARALIP sonra sicriyordu; goz bunu duzensizlik | olarak okur, sebebini soyleyemese de. | 2. `h1` (2rem) ile `.bolum-baslik` (2rem) AYNI boyuttaydi. Sayfa | basligi ile bolum basligi arasinda hiyerarsi yoktu. | 3. Panel sayfa basligi icin bir kademe eksikti. | | Yeni olcek alt ucta siki (~1.13, urun register'i: tablo/form/panel), | ust ucta acilan (~1.25, pazarlama). Tek bir sabit orandan daha | iyi, cunku iki farkli isi var. | | --- BARLOW ICIN %7 YUKSELTILDI — Tur 4, 16 Agustos 2026 --- | | Tarayicida canvas ile OLCULDU, tahmin degil: | | x-height cap-height "Lastikler" genisligi | Inter 0,546 0,70 — | Barlow 0,510 0,70 3,763 em | Cond.700 0,510 0,70 3,183 em (%19 dar) | | Cap-height AYNI, x-height %6,6 KUCUK. Yani BUYUK HARF ayni boyda | duruyor ama kucuk harf kuculuyor — govde metninin tamami. Ustune | Barlow yatayda ~%13 dar: ayni cumle daha az yer kapliyor ve goz | daha az "murekkep" goruyor. Ikisi birlesince metin hem kucuk hem | zayif okunuyordu. | | Olcek 1,07 ile carpilip yuvarlandi. ORANLAR KORUNDU: | eski 1.25 1.231 1.238 1.167 1.125 1.143 1.167 1.09 | yeni 1.235 1.259 1.227 1.158 1.118 1.133 1.154 1.083 | | 17px Barlow'un x-height'i 8,67px; 16px Inter'inki 8,74px'ti. Yani | bu bir BUYUTME degil, eski optik boyu geri alma. | | ⚠️ BEDELI OLCULDU: tablo satirlari ~%7 uzuyor, yani ayni panelde | biraz daha az satir gorunur. Karsiliginda yatayda %13 kazaniliyor | ve sutunlar rahatliyor. Dar kalan sey ekran YUKSEKLIGI degil, | genisligiydi. */ --text-4xl: 2.625rem; /* 42px — panel sayfa basligi 1.235 */ --text-3xl: 2.125rem; /* 34px — h1 1.259 */ --text-2xl: 1.6875rem; /* 27px — h2 1.227 */ --text-xl: 1.375rem; /* 22px — h3 1.158 */ --text-lg: 1.1875rem; /* 19px — kart basligi, tutar 1.118 */ --text-base: 1.0625rem; /* 17px — govde 1.133 */ --text-sm: 0.9375rem; /* 15px — ikincil, tablo 1.154 */ --text-xs: 0.8125rem; /* 13px — rozet, etiket 1.083 */ --text-2xs: 0.75rem; /* 12px — DOT, yasal mikro metin */ /* | Public bolum basligi — hero'dan sonraki ikinci akiskan adim. | | ⚠️ TAVAN 40 → 52 PIKSEL, 18 Agustos 2026. | | Sahibi siteyi "cok basic" buldu ve referans olarak birlikte | yaptigimiz cuqmedya.com'u gosterdi. Ikisi yan yana olculdu: | | cuqmedya h2 = 64px / 800 | MOTOTEKER h2 = 40px / 700 | | ⛔ 64'E CIKILMADI. Orasi bir ajans sitesi — tasarim urunun kendisi. | Burada lastigi patlamis adam ebat ariyor ve `PRODUCT.md` "heyecan | yaratmaya calismamali, hedef guven ve rahatlama" diyor. 52px | sayfaya agirlik merkezi verir, bagirmaz. | | ⚠️ TABAN 32px'te KALDI: dar ekranda buyuyen bir baslik satira | sigmaz ve tasar. Degisen yalniz genis ekrandaki tavan. */ --text-display: clamp(2rem, 1.25rem + 2.2vw, 3.25rem); /* | SATIR YUKSEKLIGI: iki degil ALTI. | | Iki deger (1.2 ve 1.55) her isi goremiyordu: 21px'lik bir h3 icin | 1.2 cok siki, 26px'lik bir h2 icin 1.55 cok gevsek. | | `--leading-caps` bir sus DEGIL, Turkce'ye ozgu bir zorunluluk: | buyuk harfte `İ` NOKTASI CAP-HEIGHT'IN USTUNE CIKAR. 1.2 ile iki | satirlik bir "İLETİŞİM / MERKEZİ" blogunda ust satirin alt uzantisi | ile alttaki `İ` noktasi cakisir. Latin'de bu sorun yoktur. */ --leading-hero: 1.02; /* 60px display */ --leading-display: 1.10; /* 32-40px */ --leading-tight: 1.18; /* 21-32px baslik */ --leading-snug: 1.35; /* 18px kart basligi, tablo hucresi */ --leading-body: 1.55; /* govde */ --leading-caps: 1.40; /* BUYUK HARF kosusu */ /* | HARF ARALIGI — optik duzeltme. Kural fiziksel: buyuk puntoda | harfler arasi bosluk goze ORANTISAL olarak buyur, kucuk puntoda | kapanir. 16px notr nokta; yukari cikinca negatif, asagi inince | pozitif. | | ⛔ GEREKCE COKTU — Tur 4, 16 Agustos 2026. | | Burada su yaziyordu: *"degerler bilerek olculu: Inter'in `opsz` | ekseni bu duzeltmenin bir kismini zaten fontun kendi icinde | yapiyor, o yuzden tipik degerlerin (-0.03/-0.022) YARISI."* | | Dogru bir gerekceydi — Inter icin. BARLOW'UN `opsz` EKSENI YOK; | statik yuzler, optik boy duzeltmesi yapmiyorlar. Yariya bolme | sebebi ortadan kalkti ve negatif degerler oldugu gibi birakilsaydi | basliklar gevsek kalirdi. | | Degerler 1,5 ile carpildi, 2 ile DEGIL: Barlow zaten Inter'den dar | ciziliyor (%13 olculdu) ve tam tipik degerler ust uste binince | harfler birbirine girerdi. Yarisi az, tamami cok. */ /* | 72px'te -0.024em gevsek kalir. ⛔ TABAN -0.04em: bunun altinda | harfler birbirine deger ve "sikisik" okunur, "tasarlanmis" degil. */ --track-hero: -0.030em; --track-display: -0.018em; --track-heading: -0.012em; --track-title: -0.006em; /* | ⛔ `--track-body: 0` ve `--track-micro: 0.020em` SILINDI — Tur 4. | | `--track-body` degeri 0'di, yani "duzeltme yok" demekti. | `letter-spacing: 0` yazan bir kural gurultu; notr nokta (17px) | artik yalniz bu yorumda anlatiliyor, kodda bir satir yemiyor. | | `--track-micro` 11px icin kurulmustu ve olcekte 11px KALMADI — | `--text-2xs` Barlow ayarinda 12px'e cikti. Tek tuketicisi olabilecek | `.baslik-ust` ise BUYUK HARF ve ona `--track-caps-sm` (0.040em) | yazildi: buyuk harf kosusu kucuk harften belirgin daha fazla nefes | ister. | | ⚠️ ASAGIDAKI IKISI TUR 4'TE ILK KEZ BAGLANDI. Tur 1'de olcek | kurulurken yalniz NEGATIF yari (hero/display/heading/title) | kullanilmis, pozitif yari yazilip birakilmisti. Belirtec tanimli | oldugu icin is bitmis GORUNUYORDU. */ --track-ui: 0.005em; /* 15px — tablo hucresi, dugme, bos durum */ --track-small: 0.012em; /* 13px — rozet, cip */ --track-caps: 0.060em; /* buyuk harf kosusu */ --track-caps-sm: 0.040em; --track-tech: 0.010em; /* mono, kucuk boy — SKU okunurlugu */ --track-tech-lg: -0.010em; /* mono/display, buyuk boy */ /* | KELIME MARKASI — 24 Agustos 2026'da marka MOTOTEKER olarak BUYUK | HARFE gecti (sahibinin istegi). | | ⛔ `--track-title` (-0.006em) ARTIK YANLIS OLURDU. O deger kucuk | harf icin ayarlanmisti; kucuk harflerin cikinti ve inintileri | harfleri birbirinden zaten ayirir. Buyuk harf kosusunda o yardim | yok, negatif tracking harfleri sikistirir: MOTOTEKER'in T-E-K-E-R | dizisi birbirine deger. | | ⚠️ `--track-caps` (0.060em) DA YANLIS OLURDU — o kucuk ETIKETLER | icin (rozet, `.baslik-ust`). Tracking ihtiyaci boyla TERS orantili: | 12px'lik bir etiketin ihtiyaci 20px'lik bir logonunkinin katidir. | 0.060em burada logoyu harf harf dagitir, marka gibi degil | "harflendirilmis" gorunur. */ --track-wordmark: 0.015em; /* 20px buyuk harf logo */ /* | OLCU GENISLIGI. 1180px'lik kapta govde satirlari 140 karaktere kadar | uzayabiliyordu; goz satir sonundan satir basina donerken kayboluyor. | 68ch tipografide kabul gormus ust sinir. */ --olcu-genislik: 68ch; /* | --- z-index: anlamsal olcek. Keyfi 999 YOK. --- | | ⛔ `--z-modal: 400` ve `--z-toast: 500` SILINDI — Tur 4. | | Ikisi de tanimliydi, hicbiri kullanilmiyordu. Sebebi de basit: | projede ``, `popover`, `::backdrop`, `aria-modal` HIC | GECMIYOR ve bir bildirim (toast) katmani da yok. | | Yani bir katman TASARLANMIS ama KURULMAMISTI. Bos bir yuvayi | belirtec olarak tutmak, "burada bir modal var" diye okunuyor ve | bir sonraki gelisrici onun uzerine insa etmeye kalkiyor. | | ⚠️ OLCEKTE BOSLUK KALMASI SORUN DEGIL: 100/200/300/600 hala | siralidir ve aradaki bosluk yeni katman icin yer birakir. Gercek | bir modal yazildigi gun yuva BILESENIYLE BIRLIKTE geri gelir — | z-olcegi var olani belgeler, olabilecegi degil. */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-tooltip: 600; /* | --- DOKUNMA HEDEFLERI — WCAG 2.5.8 (AA) ve 2.5.5 (AAA) --- | | Ikisi de ham piksel olarak dagilmis duruyordu: 44px 23 yerde, | 24px 10 yerde. Sayinin kendisi bir sey anlatmiyor; ADI anlatiyor. | | --dokunma-hedefi 44px 2.5.5 (AAA). Ikon baglantilari, harita | dugmesi, hesap kumesi — parmakla | kullanilan her sey. | --dokunma-esigi 24px 2.5.8 (AA) ALT SINIR. Yogun tablodaki | satir dugmeleri ve menu baglantilari | burada duruyor. | | ⚠️ HEPSI 44px YAPILMADI VE BU BILINCLI — gerekcesi | `components.css` icindeki "dokunma hedefi" blogunda yazili: | yogun tablodaki 59 satir dugmesini 44px'e cikarmak, satir | yuksekligini geri buyuturdu. 24px, AA esigini gecen bilincli bir | taviz; 0px'lik bir "sonra bakariz" degil. */ --dokunma-hedefi: 44px; --dokunma-esigi: 24px; /* --- Hareket: durum anlatir, dekorasyon degil (150-250ms) --- */ /* | ⛔ TUR 4'E KADAR TEK YUMUSATMA VARDI ve envanter onu bir bosluk | olarak isaretledi: `components.css` icindeki 17 gecisin, 28 ozellik | girisinin TAMAMI `--ease-out` kullaniyordu. | | Sonucu su: GIREN ile CIKAN ayni egriyle hareket ediyordu. Hareket | "tek notada" kaliyordu — teknik olarak dogru, hisse olarak duz. | | Uc egri, uc ayri fizik: | | --ease-out GIREN. Hizli baslar, yavas oturur. Ekrana gelen | sey "varmis" gibi durur. Varsayilan budur. | | --ease-in CIKAN. Yavas baslar, hizli gider. Kaybolan sey | "cekilmis" gibi durur. `ease-out` ile cikan bir | oge, gitmeye karar veremiyormus gibi asili kalir. | | --ease-in-out YER DEGISTIREN. Iki ucu da yumusak. Ekranda | KALAN ama konumu/olcusu degisen sey icin — | katlanan panel, kayan sekme cizgisi. | | ⚠️ DEGERLER SIMETRIK SECILDI: `--ease-in` `--ease-out`un ayna | yansimasi (kontrol noktalari ters cevrildi). Ayri ayri "guzel" | egriler secmek, ayni ogenin girisi ile cikisi arasinda karakter | farki yaratirdi. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 200ms; /* | Hareket katmani — bayi portali, madde P7. | | --duration-press Buton basma geri bildirimi. 60ms, cunku basma | ANLIK olmali: parmak kalktiginda hâlâ suren bir | animasyon "kaydettim mi" tereddudu yaratir. | | --motion-rise Icerigin giriste yukseldigi mesafe. 8px, 16 degil: | buyuk bir yukselme sayfayi kayiyormus gibi | gosterir ve panelde okunacak sayi var. | | --stagger-adim Kart kademelenmesi. UC ADIMDA DURUYOR (bkz. | components.css): dorduncu karttan sonra | kademelenme bir ritim degil bir GECIKME olur. | | ⛔ ROZET/CIP ANIMASYONU, NABIZ, PARILTI YOK. Panel bir telemetri | ekrani; dikkat cekmek icin oynayan bir sayi, o sayiya olan guveni | dusurur. */ --duration-press: 60ms; /* | --duration-cizim Bir cizginin CEKILME suresi. 1100ms, cunku burada | olculen sey bir tepki degil bir HAREKET: "Lastigin icinde ne var" | bolumunde kartlarin ustunden gecen kesit cizgisi soldan saga | cekiliyor ve gozun o yolu izlemesi gerekiyor. | | ⛔ `--duration-base` (200ms) BURAYA UYMAZ: o bir GERI BILDIRIM suresi | — dugme rengi, kart kenari, acilan panel. 200ms'de cekilen bir cizgi | cekilmis gibi degil, birden belirmis gibi gorunur. | | ⚠️ USTE SINIR OLARAK 1100ms: daha uzagi bekletmeye baslar. WCAG | 2.2.2 esigi (5sn) cok uzakta; bu tek seferlik bir giris. */ --duration-cizim: 1100ms; --motion-rise: 8px; --stagger-adim: 40ms; /* | --- Grafik paleti — `` (Revize m.14, Faz 6.1c) --- | | BES ADIM, cunku bir donut'ta altiyi gecen dilim zaten okunmuyor; | altinci ve sonrasi "Diğer"de toplaniyor. Renkler markadan turedi | (lacivert -> mavi) ve son iki adim notr: bir grafikte alti farkli | MARKA rengi kullanmak markayi degil gurultuyu buyutur. | | ⚠️ RENK TEK BASINA ANLAM TASIMAZ. Her grafigin altinda etiketli | deger listesi var; palet yalniz dilimleri birbirinden ayirir. | Bu yuzden adimlar arasinda ACIKLIK farki da var, sadece ton degil — | renk koruligunda ve gri baskida da ayrisirlar. */ /* | ⛔ DORT VE BESINCI ADIM KOYULASTIRILDI — 22 Agustos 2026, BAGIMSIZ | ERISILEBILIRLIK DENETIMI. | | Beyaz zemine karsi olculdu (WCAG 1.4.11 metin disi kontrast, esik 3:1): | | ONCE SONRA | 1. #000042 19.47 ✅ 1. #000042 19.47 ✅ | 2. #1f4fa8 7.66 ✅ 2. #0054a6 7.45 ✅ | 3. #4b86d8 3.68 ✅ 3. #2f7fc4 4.24 ✅ | 4. #8fb4e6 2.13 ❌ 4. #4b86d8 3.68 ✅ | 5. #b9c4d6 1.76 ❌ 5. #6b7f8f 4.15 ✅ | | Bes kalemli bir sutun grafiginde besinci cubuk 1.76 ile sayfaya | KARISIYORDU. | | ⚠️ TAKAS ACIK VE KABUL EDILDI: bes basamagin hepsini 3:1'in ustune | cikarmak, tek hue ailesinde aralig SIKISTIRIYOR — komsu adimlarin | birbirine karsi kontrasti dustu (3↔4 icin 1.15). Bunu kabul | edilebilir kilan sey asagidaki kural: her grafigin altinda ETIKETLI | DEGER LISTESI var (`grafik.blade.php` `dokum`), yani komsu iki dilimi | ayirt edemeyen okuyucu kesin degeri metinden aliyor. Gorunurluk | kazanci, ayirt edilebilirlik kaybindan buyuk. | | ⛔ BESINCI ADIM ARTIK MAVI DEGIL, NOTR ARDUVAZ — ve bu bilincli: | "dort mavi + bir notr" beste-bes maviden daha iyi ayrisiyor. Rampa | tek yonlu aciklik merdiveni olmaktan cikti; kazanc gorunurluk. | | ⚠️ BEKCILERIM BUNU DA GORMEDI: `ThemeTest` metin kontrastini olcuyor, | grafik dolgusunu degil. */ --grafik-1: #000042; --grafik-2: #0054a6; --grafik-3: #2f7fc4; --grafik-4: #4b86d8; --grafik-5: #6b7f8f; /* --- Odak halkasi: her etkilesimli ogede gorunur --- */ --focus-ring: 0 0 0 2px var(--surface-default), 0 0 0 4px var(--brand-blue-500); /* | ICE CIZILEN halka — `overflow: hidden` tasiyan kaplarda. | | Disa cizilen golge, ustunde `overflow: hidden` olan bir atanin | icinde KIRPILIR ve odak halkasi gorunmez olur. Urun kartinda tam | olarak bu durum var (kart kose yuvarlatmasi icin `overflow` | kapali). Ayni iki adim, ayni renkler; yalniz yon iceri. */ --focus-ring-ic: inset 0 0 0 2px var(--surface-default), inset 0 0 0 4px var(--brand-blue-500); /* | TERS YUZEYDE ODAK HALKASI — 21 Agustos 2026. | | ⛔ GERCEK BIR ERISILEBILIRLIK ACIGIYDI. `--focus-ring`in ic 2px'i | bir BOSLUK halkasi ve ZEMINE ESIT olmak uzere tasarlandi | (`--surface-default` = beyaz). Lacivert uzerinde beyaz kaliyordu: | sert beyaz bir hale + mavi. Gorunuyor ama baska bir tasarim | dilinden. Olculdu: `koyu` ile `focus` eslesen kural sayisi SIFIRDI. | | Ustelik `--brand-blue-500` lacivertle 4.03:1 iken koyu tarafin kendi | vurgusu `--brand-blue-300` 9.06:1. | | ⚠️ BAGLAM DEGISKENI YENIDEN BAGLANMADI, ACIK TOKEN SECILDI: kim koyu | zeminde odaklaniyor, `grep` ile gorulur. Bu projede ortuk cozum | (`unset` hikayesi) iki kez isirdi. */ --focus-ring-ters: 0 0 0 2px var(--surface-inverse), 0 0 0 4px var(--brand-blue-300); /* | KOYU YUZEYDE DERINLIK — 21 Agustos 2026. | | ⛔ LACIVERT ZEMINDE LACIVERT GOLGE GORUNMEZ: `--shadow-sm/md` ikisi | de `--brand-navy-950` karisimi. Koyu tarafin derinlik araci golge | degil, ust kenardaki 1px acik cizgidir. | | ⚠️ DURUST NOT: bu tam olarak Tur 4'te silinen `.isikli-kenar` | kuralidir. Silinme gerekcesi "hicbir ekranda kullanilmiyordu" idi — | YANLIS OLDUGU ICIN DEGIL, TUKETICISI OLMADIGI ICIN. Simdi tuketicisi | var. Bu tarih burada yaziyor ki bir sonraki envanter ayni kurali | ikinci kez olu sanmasin. */ --kenar-isik: inset 0 1px 0 color-mix(in srgb, var(--text-inverse) 14%, transparent); } /* * ============================================================================ * KOYU TEMA KALDIRILDI — 13 Agustos 2026, sahibinin karari * ============================================================================ * * ⛔ BU DOSYADA ARTIK IKINCI BIR PALET YOK ve geri eklenmemeli. * * Karar: "insanlarin bilgisayari koyu modda da olsa site bizim * istedigimiz sekilde gorunsun, renkleri degismesin." Marka gorunumu * ziyaretcinin isletim sistemi ayarina birakilmiyor. * * NE SILINDI: `@media (prefers-color-scheme: dark)` bloguna sigan * yaklasik otuz anlamsal token — yuzeyler, metin renkleri, durum * cift'leri, kenarliklar, golgeler ve grafik paleti. * * ⚠️ BU BIR KARAR DEGISIKLIGIDIR, unutulmus bir temizlik degil. Eski * blok gercekten calisiyordu ve butun kontrastlari AA geciyordu; kaldiran * sey teknik bir kusur degil, gorunum kararidir. Geri istenirse * `git show de5e9fd:eurogrip/resources/css/tokens.css` icinde tam * haliyle duruyor. * * ⚠️ BEDELI DE YAZILI OLSUN: koyu tema tercih eden kullanici artik * acik arayuz gorecek. Bu bilinen ve kabul edilen bir takas. * * `color-scheme: light` (dosyanin basinda) bu kararin ikinci yarisi: * onsuz kaydirma cubugu, onay kutusu ve tarih secici gibi TARAYICININ * cizdigi parcalar koyu modda koyu kalirdi — palet acik, kontroller * koyu bir melez cikardi. */ /* * §6.2 — prefers-reduced-motion ZORUNLU. * Hareket azaltma tercihi butun DEKORATIF animasyonlari durdurur. * * --- SECICI TUR 4'TE DARALTILDI — 16 Agustos 2026 --- * * ⛔ SEBEBI OLCULDU, VARSAYILMADI. Sahibinin Windows'unda animasyon * kapali; tarayicida `matchMedia('(prefers-reduced-motion: reduce)')` * **true** donuyor. Yani bu blok ONUN EKRANINDA HER ZAMAN CALISIYOR ve * `*` seciciyle `!important` bastigi icin, T6'da eklenecek her animasyon * onun ekraninda OLU DOGARDI. * * Eski hâlde tek cikis yolu vardi: her istisnayi ayri ayri `!important` * ile geri acmak. Iki tane zaten oyle cozulmustu (urun seridi * `components.css`, hero videosu `hero-video.js`). Ucuncu, dorduncu, * onuncu istisna ayni yolla eklenirse dagilmis bir `!important` yigini * kalir ve hangi animasyonun neden acik oldugu okunamaz hale gelir. * * ARTIK TEK BIR KAPI VAR: `[data-hareket="zorunlu"]`. * * - Isaretsiz her sey (varsayilan) hareket azaltmaya SAYGI DUYAR. * - Isaretli oge ve TORUNLARI blogun disinda kalir. * * ⛔ ISARET BIR "ANIMASYONU AC" DUGMESI DEGIL. Yalnizca hareketin * BILGININ KENDISI oldugu yerde kullanilir — durdurulabilen hero * videosu, sonsuz urun seridi gibi. "Daha guzel duruyor" bir gerekce * degildir ve `ThemeTest` isaret sayisini tavanliyor. * * ⚠️ WCAG 2.2.2 PAZARLIGA ACIK DEGIL: 5 saniyeden uzun otomatik hareket * `:hover`/`:focus-within` ile durdurulabilir KALIR. Urun seridindeki * `animation-play-state: paused` ve videodaki durdurma dugmesi yerinde. * * ⛔ ISARET, ANIMASYONU TASIYAN OGENIN KENDISINE KONUR — torunlar * MUAF DEGILDIR. Bu, iki yanlis denemeden sonra oturdu ve ikisi de * tarayicida yakalandi: * * 1. Once isaret sarmalayiciya (`.urun-serit`) kondu ve torunlar icin * ayri bir kural yazildi: * [data-hareket="zorunlu"] * { animation-duration: unset !important } * OLCULDU: serit HALA DONMUYORDU (`animationDuration: 0s`). Sebep * `unset`in ne yaptigi: "oteki kuralin degerine don" DEMEK DEGIL, * "kalitilan ya da BASLANGIC degerini kullan" demek — * `animation-duration` baslangici da `0s`. Kural, kapatmayi geri * almak yerine kapatmayi kendi eliyle TEKRARLIYORDU. (`revert` de * cozmezdi: o tarayici varsayilanina doner, yazarin kuralina degil.) * * 2. Sonra `:not()` torunlari da kapsayacak sekilde genisletildi. * Serit dondu — ama OLCULDU ki fazla genis: seridin ICINDEKI * kartlarin `transition`i da acilmisti (0,2s). Kart hover'i * dekoratif; hareket azaltma isteyen kullanicidan onu saklamak * gerekiyor. * * Dogrusu: isaret `.urun-serit-ray` uzerinde, yani `animation` * bildirimini TASIYAN ogede. `:not()` yalniz o ogeyi disarida * birakiyor, torunlarina dokunmuyor. Secici de ucuz kaliyor. * * ⚠️ KURAL BUNDAN SONRA SU: bir CSS animasyonu her zaman bir ogenin * uzerindedir ve isaret ORAYA konur. Sarmalayiciya konursa altindaki * her sey sessizce muaf olur ve bunu hicbir sey fark etmez. */ @media (prefers-reduced-motion: reduce) { *:not([data-hareket="zorunlu"]), *:not([data-hareket="zorunlu"])::before, *:not([data-hareket="zorunlu"])::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* | ⚠️ GECIKME DE SIFIRLANIYOR — madde P7'de eklendi. | | Sure sifirlaninca is bitmiyordu: kademelenen kartlar | `animation-fill-mode: backwards` ile BASLAMADAN ONCE gizli | duruyor. Gecikme yerinde kalsaydi hareket azaltma isteyen | kullanici, sureleri sifir olan ama 80 ms gorunmeyen kartlar | gorurdu — hareket degil, YANIP SONME. */ animation-delay: 0s !important; transition-delay: 0s !important; } } /* ========================================================================== MOBIL BELIRTEC DEGERLERI — Tur 4, T3 ========================================================================== Bu blok `components.css` icinden BURAYA TASINDI. Gerekcesi dogruydu, yeri yanlisti: bilesen katmani belirtec TUKETIR, TANIMLAMAZ. Bir `@media` icinde `:root` acan tek yer orasiydi ve envanter onu "belirtec golgelemesi" olarak isaretledi. MOBILDE BULUCU BARI IKI SATIR: etiket ustte, sekmeler 2x2 izgarada. Bar yuksekligi buyudugu icin videonun uzerine BINDIGI miktar da ayni oranda buyumeli — tek degisken ikisini birden tasiyor. ⚠️ 720px, projenin TEK ana kirilma noktasi (asagidaki nota bak). ========================================================================== */ @media (max-width: 720px) { :root { /* | ⛔ 8rem YETMIYORDU — Tur 4, mobil tarama. 390px'te olculdu: | | serit ust 352 | hero alt 480 → barin sigmasi gereken sinir | sekmelerin alti 501 → 21px TASIYOR | | Ikinci sekme satiri ("Urun ailesi", "Mevcut lastigim") tam | sinirin uzerine oturuyordu: yarisi fotografta, yarisi beyaz | zeminde. Sekme yazisi fotograf icin acik renk oldugu icin alt | yarisi beyazda OKUNMUYORDU. | | Bu, yukaridaki notun uyardigi hatanin ta kendisi: bar buyudu ama | uzerine BINDIGI miktar ayni kaldi. 9.5rem (152px) olculen 149px'i | kapsiyor ve ustune bir nefes birakiyor. */ --bulucu-bar-yuk: 9.5rem; --hero-yukseklik: min(68svh, 30rem); } } /* ========================================================================== KIRILMA NOKTALARI — neden BELIRTEC DEGILLER ========================================================================== ⛔ `@media (max-width: var(--kirilma-orta))` CALISMAZ. Ozel ozellikler medya sorgusu kosulunda cozulmez; bunu yapan sey `@custom-media` ve o bir PostCSS eklentisi. Bu projede npm YOK (Master Plan B10), yani bir on isleyici de yok. Yani "kirilma noktalarini belirtece bagla" maddesi TEKNIK OLARAK IMKANSIZ — ve imkansiz bir seyi yapmis gibi gostermek, listeyi temizlemekten kotudur. Onun yerine kume BURADA belgeleniyor ve `ThemeTest` yeni bir deger eklenmesini engelliyor: 720px ANA kirilma — mobil/masaustu. 12 sorgu + 1 tane 721 (`min-width`, ayni sinirin oteki yuzu). 1024px Genis masaustu: gezinti tek satira sigsin diye bosluklar sikilir. 900px Yalniz iki yerde: hero izgarasi ve pano kartlari. 640px Tek yerde: cok dar telefonda arama paneli. 296px Tek yerde: grafik sarmalayicinin alt siniri. ⚠️ 900px BIR ARA DEGER VE SORGULANMALI — 720 ile 1024 arasinda ucuncu bir esik, duzenin uc kez kirilmasi demek. T4'te iki kullanimi da gozden gecirilecek; simdi dokunulmuyor cunku ekranda GORULMEDI. ========================================================================== */ /* ========================================================================== BOSLUK: 8px ALTI NEDEN BELIRTEC DEGIL ========================================================================== Olcum (16 Agustos 2026): `components.css` icinde 8px altinda 6 ayri ham deger var — 1, 2, 2.4, 3, 4, 6 px — toplam 41 bildirimde. Bunlar belirtece BAGLANMADI ve bu bir eksiklik degil, karar: - Cogu OPTIK BIR SEY: bir cipin dikey dolgusu, odak halkasinin ic kaymasi, bir kenarligin telafisi. Bunlar bir ritmin parcasi degil, ait olduklari bilesenin ayarlari. - Belirtece baglamak onlari "sistem" gosterirdi ve bir sonraki okuyan "hepsi 4px olsun" diye HIZALAMAYA kalkardi — optik ayari bozan tam olarak budur. - Olcek 8px'ten BASLIYOR cunku ritmi tasiyan en kucuk adim o. `ThemeTest` ayri deger SAYISINI tavanliyor: yenisi eklenemez, mevcut alti serbest. Yayilmayi durdurur, optik ayara karismaz. ========================================================================== */