/* ─── `.gs` TABANI — her bölümün altında çalışan ortak zemin ───────────────── * * ⚠️ Bu dosya ELLE yazılır (tokens.css üretilir — ikisini karıştırma). * * Amacı iki yönlü bir duvar örmek: * • florax + Bootstrap + Elementor kit'in kuralları bölümlerin İÇİNE sızmasın. * • Bölüm CSS'i de sayfanın geri kalanına taşmasın — her şey `.gs` altında. * * Laboratuvarda da aynı dosya yüklenir (src/app/layout.tsx), bu yüzden * `/d/` ile gurtesv2 çıktısı aynı zeminde durur. * * ── `!important` NEDEN VAR (ölçüldü, 2026-08-21) ─────────────────────────── * florax `style.css`'te `.post-entry h2 { font-size: 36px !important }` gibi * kurallar var. `!important`, özgüllük ne olursa olsun normal bildirimi yener; * yani savunma da `!important` olmak ZORUNDA. Kaskad şöyle çözülüyor: * * florax `.post-entry h2` (0,1,1) !important ← bizden ÖNCE yükleniyor * bu dosya `.gs h2` (0,1,1) !important ← eşitlik, sonra gelen kazanır ✓ * bölüm `.gs- .foo` (0,2,0) !important ← özgüllük daha yüksek ✓ * * Bölümün `style.css`'ine `!important`'ı `npm run port` EKLER; tasarımcı * `section.css`'te böyle bir şey yazmaz. * * Tipografik miras zorlanır. Kutu modelinde ise yalnız TABAN SIFIRLAMASI * zorlanır (aşağıdaki `margin: 0` bloğu); ölçü veren kurallar serbest kalır ve * bölüm CSS'i onları istediği gibi yazar. * * 🔴 ÖNCEKİ SÖZLEŞME "kutu modelinde kimseyle kavga yok" diyordu ve bu * ÖLÇÜLDÜ, YANLIŞ ÇIKTI (Ö-118). Devralınmamış bir yüzeyde iki rakip var: * florax `.post-entry ol li` (0,1,2) margin-bottom: 15px * Elementor kiti `.elementor-kit-* button` (0,1,1) border-radius/padding… * Birincisi taban sıfırlamasını ÖZGÜLLÜKLE, ikincisi YÜKLEME SIRASIYLA * yeniyordu. `!important` ikisini de yener (önemli bildirim, özgüllükten ve * sıradan bağımsız olarak önemsizi yener) ve bölüm CSS'ini ezmez: o * `.gs- .foo` = (0,2,0) + `!important`, taban ise (0,1,1) + `!important`. */ .gs, .gs *, .gs *::before, .gs *::after { box-sizing: border-box; } /* ── UZUN KELİME KUTUSUNU AŞMAZ ───────────────────────────────────────────── * * F6.2 ölçtü (M-201): TR ve EN beş genişlikte on iki yüzeyde tertemiz, ama * ALMANCA ≤375'te düzeni iki yerde bozuyordu — `Feuerverzinkung`, * `Gestaltungsstandard`, `Beschichtung`. Bileşik ad bölünmüyor, kutusundan * geniş kalıyor ve ya kırpılıyor ya da satırı dışarı itiyor. * * 🔒 Kural taban seviyesindedir çünkü kusur bir bölümün değil DİLİN * özelliğidir: bugün üç bölümde göründü, yarın yeni yazılan her bölümde * görünebilir. Bir kez burada çözülür. * * ⚠️ `break-word`, `anywhere` DEĞİL. İkisi de kelimeyi böler, ama `anywhere` * elemanın **min-content** ölçüsünü de küçültür ve ızgara/flex hesabını * sessizce değiştirir — yani TR ve EN'de bugün doğru duran yerleşimleri de * oynatırdı. `break-word` yalnız kelime kendi satırına sığmadığında devreye * girer; sığdığı her yerde HİÇBİR ŞEY değişmez. * * ⚠️ Bu kural `1fr` ızgara izlerini TEK BAŞINA kurtarmaz: `1fr` = * `minmax(auto, 1fr)` ve `auto` tabanı max-content'tir, yani iz kelimeyi * ağırlamak için BÜYÜR. Metin taşıyan iz `minmax(0, 1fr)` yazmak zorundadır * (M-201 · `DESIGN.md`). */ .gs, .gs * { overflow-wrap: break-word; } /* ── TİPOGRAFİK ÖLÇEK — yedi basamak, dibi 11 px ──────────────────────────── * * Ö-084 ölçtü: ölçek yoktu. On üç ayrı punto vardı, dokuzu 14 px'in altında * (9 · 10 · 11 · 12 · 13 …) ve 375'te metnin %62'si 14 px altındaydı. Bu bir * ölçek değil, sürüklenmeydi — her bölüm kendi etiket puntosunu icat ediyordu. * * Basamaklar ROLE göre adlandırılır, boyuta göre değil: `--gs-fs-2` demek * "on iki piksel" değil, "etiket katmanı" demektir. Bir gün 12 px yetmezse * değer burada değişir, elli kural değişmez. * * 🔒 DİP 11 px. Bunun altına inen bir metin yoktur — dekoratif olduğu * söylenen etiket de yoktur, çünkü ekranda duran her şey okunur. * * Basamak 5–7 `clamp`tir: dar ekranda alt sınırda durur, geniş ekranda açılır. * Ara değer `vw` cinsindendir ve iki uç arasında doğrusal ilerler; bu yüzden * 375 ile 1440 arasında ara bir punto ÜREMEZ — ölçek yediden büyümez. * * ⚠️ Bir bölüm bu listenin dışında bir `font-size` yazarsa ölçek geri * sürüklenmeye başlar. Yeni bir basamak gerekiyorsa önce DESIGN.md'ye girer. */ .gs { --gs-fs-1: 0.6875rem; /* 11 px — damga, dt etiketi, ipucu */ --gs-fs-2: 0.75rem; /* 12 px — bölüm etiketi, sayaç, telif */ --gs-fs-3: 0.875rem; /* 14 px — menü, düğme, dd değeri */ --gs-fs-4: 1rem; /* 16 px — gövde metni */ --gs-fs-5: clamp(1.1875rem, 1.9vw, 1.5rem); /* 19 → 24 px — kart/aks adı, slogan */ --gs-fs-6: clamp(1.75rem, 3.3vw, 2.5rem); /* 28 → 40 px — bölüm başlığı */ --gs-fs-7: clamp(2.5rem, 6.4vw, 4.75rem); /* 40 → 76 px — manşet */ /* ── DOKUNMA HEDEFİ TABANI — WCAG 2.2 AA · 2.5.8 ─────────────────────── * Ö-084 ölçtü: 1440'ta 26, 375'te 31 öğe 24 px'in altındaydı; yirmisi * çıplak `` (footer bağlantıları, dil şeridi). Hedef alanı METNİN * ölçüsü değildir — 11 px bir bağlantı da 24 px'lik bir alan taşır. * Bölümler bu değeri `min-height` / `min-width` olarak okur. */ --gs-hedef: 24px; /* ── BOŞLUK ÖLÇEĞİ — altı basamak, dibi 4 px ─────────────────────────── * * Ö-106 ölçtü: boşlukta da ölçek yoktu. `10-aks-hatti` + `11-duyuru-bandi` * içinde 191 boşluk bildirimi **40 ayrı rem değeri** taşıyor (0.1 · 0.15 · * 0.2 · 0.3 · 0.35 · 0.4 · 0.42 · 0.45 · 0.55 · 0.6 · 0.62 · 0.7 …) ve * yalnız %61'i 4 px ızgarasına oturuyor. Punto sürüklenmesinin (Ö-084) * aynısı: her bileşen kendi boşluğunu icat etti. * * Basamaklar ROLE göre adlandırılır, boyuta göre değil — `--gs-bo-2` * "sekiz piksel" değil, "yakın" demektir. Değerler icat değil, ölçülen * kullanımın omurgası: 1rem (17 kez) · 1.5rem (12) · 0.5rem (9) · 2rem (9). * * 🔒 Yeni bir yüzey bu listenin dışında boşluk YAZMAZ. Bir ara değer * gerekiyorsa önce DESIGN.md'ye girer — yoksa ölçek geri sürüklenir. * * ⚠️ `10-aks-hatti` ve `11-duyuru-bandi` HENÜZ eşlenmedi: eşleme ana * sayfanın kilidini (Ö-105) yeniden ölçmeyi gerektirir ve bugün ölçülmüş * bir kusuru yoktur. Bu tokenlar bugün hiçbir kuralın okumadığı EK * tanımlardır; var olan hiçbir hesaplanmış değeri değiştirmezler. * → PLAN.md A19 */ --gs-bo-1: 0.25rem; /* 4 px — sıkı: etiket↔değer, damga içi, ikon↔metin */ --gs-bo-2: 0.5rem; /* 8 px — yakın: liste öğeleri, düğme iç boşluğu */ --gs-bo-3: 0.75rem; /* 12 px — ayrık: etiketin altı, satır grupları */ --gs-bo-4: 1rem; /* 16 px — blok: bileşen iç dolgusu */ --gs-bo-5: 1.5rem; /* 24 px — grup: bileşenler arası */ --gs-bo-6: 2rem; /* 32 px — kesit: bölüm içi büyük ayrım */ /* Bölümün dikey nefesi. İcat değil ölçüm: `10-aks-hatti`in beş bölüm * kökünden üçü zaten tam bu değeri taşıyor (`padding-block: clamp(2.5rem, * 6vw, 4.5rem)`), ikisi 4rem üst sınırla aynı ailenin varyantı. */ --gs-ritim: clamp(2.5rem, 6vw, 4.5rem); /* 40 → 72 px */ } /* ── KOYU PALET — sitenin ortak zemini ──────────────────────────────────────── * * F3.3'e kadar bu altı renk her bölümün KENDİ CSS'inde çıplak hex olarak * duruyordu (`10-aks-hatti` → `--ax-*`, `11-duyuru-bandi` → `--db-*`). * İki bölümde taşınabilirdi; **header, footer ve F4'ün on beş sayfasıyla * birlikte on yediye çıkıyor** — o yüzden değer artık TEK yerde durur. * * Bu, M-107'nin "paylaşılan şey SINIF DEĞİL SÖZLEŞME" kararını çiğnemez: * paylaşılan hiçbir SEÇİCİ yok, yalnız adlandırılmış bir DEĞER var. Her bölüm * kendi ön ekiyle kendi kuralını yazmaya devam eder; scope duvarı (Ö-014) * delinmez. * * Oranlar HESAPLANMIŞTIR (DESIGN.md §3 — zemin `#1B1E20` üzerinde): * `--gs-koyu-metin` #E6E9EA 13.73:1 ✅ AAA * `--gs-koyu-ikincil` #B9BFC2 9.01:1 ✅ AAA * `--gs-koyu-silik` #8E9599 5.51:1 ✅ AA (AAA DEĞİL — etiket katmanı) * beyaz 16.76:1 ✅ * * 🔴 `--gs-primary` (#B40404) koyu zeminde 2.36:1'dir: METİN ya da ÇİZGİ olarak * KULLANILAMAZ, yalnız beyaz metinli DOLGU olarak (beyaz üzerinde 7.10:1). * Koyu zeminde odak halkası da kırmızı olamaz — aşağıdaki `.gs` odak kuralına bak. * * ⚠️ Bunlar da EK tanımlardır: `10-aks-hatti` ve `11-duyuru-bandi` kendi * `--ax-*` / `--db-*` değişkenlerini AYNEN kullanmaya devam eder (aynı hex, * aynı hesaplanmış çıktı). Onların eşlenmesi → PLAN.md A19. */ .gs { --gs-koyu-zemin: #1b1e20; --gs-koyu-zemin-rgb: 27 30 32; /* `rgb(… / α)` için — cam ve perde */ --gs-koyu-yuzey: #24282a; /* zeminden bir tık açık: bant, kart */ --gs-koyu-yuzey-ust: #2c3134; /* iki tık: seçili kayıt, açılan panel */ --gs-koyu-metin: #e6e9ea; --gs-koyu-ikincil: #b9bfc2; --gs-koyu-silik: #8e9599; --gs-koyu-hat: #363b3e; } /* ── DİKİŞ — ilk ekranı paylaşan bölümler ───────────────────────────────── * * Bir sayfanın açılışı "ekranın tamamı" olmak istediğinde ÜSTÜNDE ne kadar * yer harcandığını bilmek zorundadır. Ö-083 bunu ölçtü: bilmezse açılışın * alt şeridi (damga + kaydırma çağrısı) tam da en çok gerektiği dar ekranda * kadraj dışında kalır. * * 🔒 İKİSİ DE NÖTR: varsayılanları `0rem`, yani tek başlarına HİÇBİR ŞEYİ * değiştirmez. Değerini "üstüne konan bölüm" komşu seçiciyle verir * (`12-ust` · `11-duyuru-bandi`). Bağımlılık TEK YÖNLÜDÜR: açılış üstündekini * TANIMAZ, üstteki açılışı tanır. Üstte hiçbir şey yoksa değer 0'da kalır ve * sayfa tek başına doğru çalışır. * * 🔴 Custom property KARDEŞTEN MİRAS ALINMAZ, ATADAN alınır (M-080'in ölçtüğü * tuzak): `.gs-12-ust + .gs { --gs-ust-yer: var(--us-h) }` yazan kural, `--us-h`yi * SONRAKİ elemana da vermek zorundadır — yoksa orada çözülemez. * * ⚠️ İkisi AYNI ŞEY DEĞİLDİR (Ö-083'ün kök sebebi buydu, M-089 ayırdı): * `--gs-ust-h` yapışkan header'ın yüksekliği. Yapışkan değilse 0'dır. * Yapışkan bir cam bu değere göre konumlanır. * `--gs-ust-yer` ilk ekranda gerçekten harcanan TOPLAM yer (header + * üzerindeki bant). Yapışkanlıkla ilgisi yoktur. * `--gs-ust-ek` header'ın ÜSTÜNDE harcanan yer (bugün: duyuru bandı). * Header bunu iki yerde okur: kendi dikişini hesaplarken ve * açılır panelinin kadraja sığması için. Bant yoksa 0. * * 🔵 Zincir böylece TEK KURALA iniyor ve bölüm sayısından bağımsız kalıyor: * 12-ust: --gs-ust-yer = --us-h + --us-kenar + --gs-ust-ek * Bant varsa `--gs-ust-ek` doludur, yoksa 0 — header ikisini de bilmez. */ .gs { --gs-ust-h: 0rem; --gs-ust-yer: 0rem; --gs-ust-ek: 0rem; } .gs { font-family: var(--gs-font); font-size: var(--gs-fs-4); font-weight: 400; line-height: 1.6; letter-spacing: normal; color: var(--gs-text); text-align: start; } /* Tema doğrudan `h2`, `p`, `a` gibi seçicilere yazdığı için KALITIM yetmiyor: * doğrudan seçici, miras alınan değeri her zaman yener. Bu yüzden her metin * elemanı açıkça `inherit`e çekiliyor — böylece tek doğruluk kaynağı yukarıdaki * `.gs` bloğu (ve onun üzerine yazan bölüm CSS'i) oluyor. */ .gs h1, .gs h2, .gs h3, .gs h4, .gs h5, .gs h6, .gs p, .gs ul, .gs ol, .gs li, .gs dl, .gs dt, .gs dd, .gs a, .gs span, .gs time, .gs small, .gs strong, .gs em, .gs b, .gs i, .gs label, .gs button, .gs input, .gs textarea, .gs select, .gs blockquote, .gs figure, .gs figcaption, .gs table, .gs th, .gs td { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: none !important; color: inherit !important; } /* ⚠️ `display` bu listede OLMAK ZORUNDA. Yer değiştirilen elemanın (`img` · * `svg` · `video`) tarayıcı varsayılanı `inline`dır; laboratuvarda Tailwind * preflight onu `block`a çeviriyordu, WordPress'te çeviren yoktu. Ölçüldü * (2026-09-01, F2.4 kilidi): ana sayfadaki 19 yer değiştirilen elemanın 12'si * `position: absolute`, 5'i flex çocuğu — hepsi kendiliğinden bloklaşıyor ve * farkı gizliyor. Akışta kalan iki eleman vardı: `.ax-video` (bölüm CSS'i * zaten açıkça `display: block` veriyor) ve `.ax-dip-logo` — sayfanın TEK * örtüsüz görseli, iki dünyada `block` / `inline` ayrışıyordu. * O gün geometri aynıydı, yani kusur GÖRÜNMÜYORDU; ama satır kutusunun taban * boşluğu punto ya da satır aralığı değişince ortaya çıkar. Ö-090 · Ö-097 ② * ile aynı sınıf: liste "ısırdığında ekle" ile değil, "`.gs` altında * görünüyorsa listede olsun" ile bakımlanır. */ .gs img, .gs svg, .gs video { max-width: 100%; height: auto; display: block; vertical-align: middle; } /* ⚠️ `dl · dt · dd` bu listede OLMAK ZORUNDA. Tarayıcı `dd`ye varsayılan * `margin-inline-start: 40px` verir; laboratuvarda Tailwind preflight onu * sıfırlıyordu, WordPress'te sıfırlayan yoktu. Ölçüldü (2026-08-31): footer * adres metni `/d/` ile gurtesv2 arasında tam **40 px** ayrışıyordu * (lab 308 · wp 268) ve kapanış bölümündeki iletişim kutusu aynı sebeple * 40 px genişliyordu. İki dünyanın ayrıştığı yer bir bölüm CSS'i değil, * TABANIN eksiğiydi. * * ⚠️ Aynı sınıftan bir boşluk yukarıdaki MİRAS listesinde de vardı: `time` * orada yoktu. Bugün ısırmıyor (florax'ın hiçbir kuralı `time`ı hedeflemiyor — * arandı; üstelik devralınan sayfada florax stili zaten kuyrukta değil), ama * `.gs` altında görünen HER eleman bu listede olmalı: kural "ısırdığında * ekle" değil, "görünüyorsa listede olsun". */ /* ⚠️ `li` DE OLMAK ZORUNDA — ve bu ÖLÇÜLDÜ (Ö-118). Tarayıcı `li`ye marj * vermez, o yüzden liste uzun süre eksik kaldı ve devralınan yüzeylerde * ısırmadı: orada florax'ın stili zaten kuyrukta değil (F1.2). Ama florax'ta * DURAN bir sayfaya bir bölüm konduğunda florax `li`ye 15 px alt marj * veriyor. `/d/00-bilesen-tahtasi` ↔ gurtesv2 karşılaştırmasında bu 33 * satırda birden çıktı ve tahtayı orada **435 px** uzatıyordu (5941 → 6376). * * Bu, `dd` (Ö-090) · `time` (Ö-097) · `display` (Ö-099) ile aynı ailenin * dördüncü üyesidir: iki dünyanın ayrıştığı yer bir bölüm CSS'i değil, * TABANIN eksiği. Kural yukarıda yazılı — "ısırdığında ekle" değil, * "görünüyorsa listede olsun" — ve `li` markup'ta 196 kez geçiyor. * `figcaption` aynı gerekçeyle eklendi (2 kez; tarayıcı marjı yok ama * florax'ın metin kurallarının menzilinde). */ .gs h1, .gs h2, .gs h3, .gs h4, .gs h5, .gs h6, .gs p, .gs ul, .gs ol, .gs li, .gs dl, .gs dt, .gs dd, .gs figure, .gs figcaption, .gs blockquote { /* `!important` — gerekçesi dosya başlığında (Ö-118). Bu bir ÖLÇÜ değil, * TABAN SIFIRLAMASIDIR: bölüm CSS'i (0,2,0) ile onu serbestçe ezer. */ margin: 0 !important; } .gs ul, .gs ol { padding: 0; list-style: none; } .gs a { text-decoration: none; } /* ── Klavye odağı — her etkileşimli öğede GÖRÜNÜR ───────────────────────── * florax bazı yerlerde `outline: none` yazıyor; burada geri alınır. */ .gs :focus-visible { outline: 2px solid var(--gs-primary) !important; outline-offset: 3px; border-radius: 2px; } /* ── Tam genişlik kaçışı ─────────────────────────────────────────────────── * Elementor konteyneri içeriği 1300px'e sıkıştırır. Bu sınıf bölümü ekranın * tamamına açar. * * `100vw` normalde dikey scrollbar genişliği kadar yatay taşma yaratır; burada * yaratmıyor çünkü florax `style.css` satır 18–21'de `html, body { width: 100%; * overflow-x: clip }` tanımlıyor (ölçüldü: florax 1.0.4). Tema değişirse bu * varsayım DÜŞER — o gün 375'te yatay taşmayı yeniden ölç. */ .gs-bleed { margin-inline: calc(50% - 50vw); width: 100vw; } /* ── Hareket ─────────────────────────────────────────────────────────────── * `prefers-reduced-motion` kuralı CSS'te DEĞİL, runtime.js'te uygulanır: * hareket hiç başlatılmaz. Burada `animation: none` YAZILMAZ — `both` * fill-mode'lu giriş animasyonları ilk keyframe'de donar ve `opacity: 0`da * kalır; içerik kaybolur. Doğrusu: içerik CSS'te GÖRÜNÜR durur, hareket onu * bulduğu yerden alır. */ /* ── Yineleyicinin BOŞ HÂLİ ──────────────────────────────────────────────── * `[data-gs-liste]` bir yineleyici listesi, `[data-gs-oge]` kayıt şablonu, * `[data-gs-bos]` ise kayıt yokken görünecek hâl (CLAUDE.md §6 Kural 4). * * WordPress'te ikisi ASLA birlikte basılmaz: PHP kayıt varsa boş hâli düşürür, * kayıt yoksa şablonu (class-gs-yinele.php). Laboratuvarda ise ikisi de render * edilir — tasarımcı boş hâli de görsün diye — ve liste doluyken bu kural onu * gizler. * * `!important` ZORUNLU: bölüm CSS'inin her bildirimi `npm run port` sonrası * `!important` taşır (Ö-014). Özgüllük (0,3,0) bölümün (0,2,0)'ını yener. * `:has` desteklenmezse boş hâl laboratuvarda görünür kalır — yanlış tarafa * düşmez, WordPress çıktısı etkilenmez. */ [data-gs-liste]:has([data-gs-oge]) [data-gs-bos] { display: none !important; }