/* blog sayfasına ÖZGÜ yerleşim. Ortak bileşenler `bilesen.css`te kalır — buraya kopyalanan bir bileşen aynı kavramın ikinci yazımı olur. Bu sayfa şu ortak bileşenleri OLDUĞU GİBİ kullanıyor: `.iskelet` (+ süreğen döngü nabzı), `.iskelet-ust`, `.bas`, `.oz`, `.kizgara`, `.kart`, `.ikili`, `.akordeon`, `.cta`, `.ayak`, `.mono`, `.soluk`. Burada yalnız BİR şey var: yayın ölçütü listesi. ⚠️ 29 Eylül: "yokluk tonu" kuralı (`.bl-ust svg, .bl-yok .oz-kutu`) SİLİNDİ. Ses düzeltmesi turunda dizinin "bir blog dizininde normalde olan altı şey" bölümü kalktı, yani griye çekilecek yokluk ikonu da kalmadı. `.bl-ust`in svg ayağı zaten ÖLÜYDÜ: `.iskelet-ust` kabı `color:var(--soluk)` taşıyor ve `.ikon` `currentColor` ile çiziliyor — o satır hesaplanan hiçbir değeri değiştirmiyordu. Etiket rolü için YENİ bir sınıf yazılmadı: satırın üstündeki damga `.mono` + `.soluk` (temel.css) ile basılıyor. `.kizgara-et` (10px mikro rozet) bilerek kullanılmadı — adı bileşen önekli, `.kizgara` dışında kullanmak o adı ikinci bir anlama bağlamak olurdu. Hareket: kendi kare dizisi YOK. Süreğen döngü `.iskelet`ten, belirme `temel.css`in TEK deseninden (`.ac`) geliyor; ikisi de az-hareket kısıtında görünür karede duruyor. Sözcüğün kendisi de yazılmadı: bir kuralı ANLATAN yorum, o kuralı arayan tarayıcıyı tatmin eder. ⚠️ Bu dosya `bilesen.css`ten SONRA yükleniyor (blog.html satır 21-22), yani buradaki aynı özgüllükteki bir kural onu SESSİZCE ezer. O yüzden aşağıdaki her yeni ad `bl-` önekli ve her eleman seçicisi `.bl-govde`/`.bl-toc` ile KAPSAMLI — çıplak `ul`/`p`/`table` kuralı YOK. */ /* ---- Yayın ölçütü listesi ------------------------------------------------- Altı kural, TEK kolon. İki kolonlu (damga | akış metni) bir varyant yazılmadı: aynı şekil `guvenlik.css` (`.gv-satir`) ve `yaklasim.css` (`.yk-kanit`) içinde zaten var ve üçüncü bir yazımı ayrışacak üçüncü bir yer demek. Üçünün ortak şekli `bilesen.css`e taşınmalı — bu turda PAYLAŞILAN dosyaya dokunulmadı, koordinatöre bildirildi. Damga `.mono.soluk` olduğu için gövde kuralı `:not([class])` ile kapsamdan ayrılıyor (sınıfsız paragraf gövde metnidir — `.kizgara-m` ile aynı ayrım, özgüllük savaşı değil KAPSAM). */ .bl-kural { max-inline-size: var(--olcu-bas); border-block-start: 1px solid var(--cizgi); } .bl-kural > li { padding-block: var(--b4); border-block-end: 1px solid var(--cizgi); } .bl-kural .mono { display: block; margin-block-end: var(--b2); } .bl-kural h3 { font-size: var(--t8); line-height: var(--t8-s); font-weight: 500; margin-block-end: var(--b1); } .bl-kural p:not([class]) { font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); max-inline-size: var(--olcu-orta); } /* Gövdedeki bağlantı: altı çizili KALIR. `temel.css` bütün bağlantıların altını siliyor; akış metninde link yalnız renkle ayrılırsa renk körlüğünde kaybolur (nav'daki durum başka: orada bağlam bir menü). İki iç metin kabı birden sayılıyor — ızgara kartının gövdesi de akış metni. Desen `entegrasyonlar.css` (`.kizgara-m p.kizgara-not a`) ile aynı; her sayfa yalnız KENDİ CSS'ini yüklediği için bu kural bu sayfanın dışına taşmıyor. ⚠️ 29 Eylül: `.bl-govde a` BU kurala eklendi, ikinci bir yazım AÇILMADI. Referansın ölçülen zengin metin kuralı da aynı şeyi söylüyor (`.blog10_text-rich-text-v2 a{text-decoration:underline}`, offset 3px). */ .bl-kural a, .kizgara-m p a, .bl-govde a { text-decoration: underline; text-underline-offset: 3px; } /* ---- Bölüm sonu notu ----------------------------------------------------- Akış metni kapağıyla aynı ölçüde kalsın: kapak `ch` DEĞİL piksel tokenına bağlı (`ch` yazı tipine bağlıdır ve font değişince sessizce kayar — bu deponun ölçülmüş dersi). */ .bl-not { margin-block-start: var(--b4); max-inline-size: var(--olcu-orta); color: var(--soluk); } /* ============================================================================ C-21 · YAPIŞKAN İÇİNDEKİLER + C-24 · ZENGİN METİN GÖVDESİ ============================================================================ TÜKETİCİSİ S-17 (`site/blog-.html`), bu turda YAZILMADI: `blog.html` bugün "hiç yazı yok" diyor ve bir TRIPWIRE (`test/siteAnasayfa.test.ts`, `readdirSync` ile `blog-*.html` sayar) bunu pinliyor. Yani aşağıdaki kuralların bugün üretimde bir tüketicisi YOK — bu bir kusur değil, işin tanımı; ama okuyan bunu bilmeli, "canlı" sanmamalı. ── MARKUP SÖZLEŞMESİ ────────────────────────────────────────────────────

…

…

  • …
  1. …

…

…
…
…
…
…
…
Gövde SINIFSIZ yazılır: C-24 zengin metindir, her paragrafa sınıf eklenen bir gövde bir CMS'ten ya da markdown'dan doldurulamaz. O yüzden aşağıda eleman seçicileri var — ama HEPSİ `.bl-govde` ile kapsamlı. ── SIRA: yan kolon ÖNCE ───────────────────────────────────────────────── Referansın ızgarasında (`.rte-sidebar-content_component`) yan kolon BİRİNCİ çocuk (ölçüldü: doğrudan çocuklar `blog-post_for-tablet-mobile` · `blog_sidebar` · `blog_rte`). DOM sırası aynı tutuldu, yani mobilde içindekiler gövdenin ÜSTÜNE düşüyor ve klavye sırası da doğru: okuyucu gövdeye girmeden listeyi geçer. `order` ile görsel yeniden sıralama YOK — sıra ile odak sırasını ayırmak erişilebilirlik hatasıdır. ⚠️ Referansın KENDİ çözümü tekrarlanmadı: o, aynı gövdeyi İKİNCİ bir DOM bloğunda (`blog-post_for-tablet-mobile`, ≤991px'te `display:block`) bir daha basıyor — aynı içeriğin iki yazımı, envanter §6'nın "tekrarlanmayacak kusurlar" ailesinden. Burada TEK gövde var, kolon sayısı medya sorgusuyla değişiyor. ── `.ikili` NEDEN KULLANILMADI (ölçüldü, 1440×900) ─────────────────────── Koordinatör haklı olarak sordu. `bilesen.css`in `.ikili`si bu işi GÖRMÜYOR; CDP ile ölçülen altı bildirim çatışıyor: · kolonlar `508px 508px` (1:1) — gereken ölçülen orandı: `1fr 3fr` · `column-gap: 24px` (`--b4`) — referansın ölçülen boşluğu 5rem = 80px · `.ikili ul{display:flex}` → gövdenin akış listesi satır kutusuna dönüyor · `.ikili li{display:flex}` + `list-style:none` → madde imi KAYBOLUYOR · `.ikili li` yazı ölçüsü 14px ölçüldü → akış metni 18px değil 14px · `.ikili li{color:rgb(92,98,112)}` (`--soluk`) → gövde metni ikincil renkte Yani `.ikili` "şunu yapar / şunu yapmaz" iki kolonlu LİSTESİ; bu ise sayfa düzeyinde asimetrik bir MAKALE ızgarası. `.bl-yazi` ayrı bir ad ve `.ikili` ile hiçbir seçicide kesişmiyor. ── HAREKET ────────────────────────────────────────────────────────────── Yeni `@keyframes` YOK. Belirme `temel.css`in TEK deseninden (`.ac`), süreğen döngü `.iskelet`ten geliyor; açma/kapama oku `.akordeon-m > summary::after` (bilesen.css) ve onun `transition`ı az-hareket kipinde `temel.css`in genel kuralıyla söndürülüyor. Yani bu bölüm az-hareket kipinde İLERLEYEN animasyon ÜRETMİYOR ve görünmez kritik eleman bırakmıyor — ölçüldü, sayılar raporda. "Okunan bölüm" (scroll-spy) vurgusu YOK ve bilerek yok: IntersectionObserver ister, yani `site.js` — bu turda başka bir ajanda. Onun yerine `:target` işareti var: bir içindekiler bağlantısı izlendiğinde İNİLEN başlık işaretleniyor. Bu JS'siz, gerçek ve az-hareket kipinde de çalışıyor (animasyon değil, kenar çizgisi). CSS-only bir scroll-spy taklidi yazılmadı — okuyana "neredeyim" diye yanlış cevap veren bir denetim, denetim olmamasından kötüdür. ============================================================================ */ /* ---- Izgara --------------------------------------------------------------- */ /* Oran ve boşluk REFERANSTAN ÖLÇÜLDÜ, göz kararı değil: `.rte-sidebar-content_component{grid-template-columns:1fr 3fr;gap:5rem}`. 5rem = 80px = `--b6`. `--kap` 1200 − 2×`--gutter` 80 = 1040 içerik → kolonlar 240 / 720. Referansın yan kolonu `max-width:16vw` → 1440'ta 230px, yani 240 aynı bandın içinde. */ .bl-yazi { display: grid; grid-template-columns: 1fr 3fr; gap: var(--b6); } /* ---- Yapışkan yan kolon -------------------------------------------------- ⚠️ `position:sticky` ÜST KAPTA `overflow` varsa sayfaya değil O KABIN scrollport'una göre çözülür ve hiç yapışmaz. Bu deponun ölçülmüş hatası (llm-info.css'te yazılı) ve 29 Eylül'de CDP ile YENİDEN ölçüldü: · `body{overflow-x:hidden}` (temel.css) yapışkanlığı BOZMUYOR — sonda elemanı scrollY 0/600/1800'de `top` = 64'te sabit kaldı (Chrome 154). Yani bu satır bir engel DEĞİL; ölçüldü, varsayılmadı. · `overflow-x:auto` taşıyan bir ATA ise bozuyor — aynı sondada ikinci eleman `top` 4064 → 3464 → 2264 → −336, yani sayfayla birlikte kaydı. Sonuç: bu bölümdeki yatay kaydırma kapları (`.bl-kaydir`, `pre`) GÖVDE kolonunun İÇİNDE; hiçbiri `.bl-yan`ın atası değil. Bir sonraki tur ızgarayı `overflow`lu bir kaba sararsa içindekiler sessizce yapışmayı bırakır. `align-self:start` ŞART: item gerilirse kutu satır yüksekliği kadar olur ve yapışkanlık görünmez. Dört varyant ölçüldü (align-self:start · stretch + max-block-size:fit-content · içteki kutu sticky · ızgara align-items:start), DÖRDÜ de kendi bloğunda `top`u 80'de tuttu; en az bildirim isteyeni seçildi. */ .bl-yan { position: sticky; top: var(--b6); /* = temel.css'in `scroll-padding-top`u: çapadan inilen başlık ile listenin üst kenarı aynı hizada */ align-self: start; min-inline-size: 0; /* uzun başlık ızgara kolonunu taşırmasın */ } /* Açma/kapama mekanizması `.akordeon-m`den (bilesen.css) geliyor: kenarlık, ok, `::-webkit-details-marker` gizleme, `rotate` geçişi. İkinci bir chevron yazımı AÇILMADI — aynı kavramın iki yazımı yan yana bayatlar. Burada yalnız liste ve kendi kaydırması var. */ .bl-toc nav { /* Uzun bir içindekiler listesi ekranı taşmasın: KENDİ kaydırması olur. Bu kap `.bl-yan`ın ALTINDA (atası değil), yani yapışkanlığı bozmuyor — yukarıdaki ölçüme göre bozan şey ATA `overflow`u. `dvh`: mobil tarayıcıların değişen araç çubuğuyla doğru olan birim. */ max-block-size: calc(100dvh - var(--b7) - var(--b5)); overflow-y: auto; padding-block-end: var(--b3); } .bl-toc a { display: block; padding-block: var(--b2); font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); } .bl-toc a:hover { color: var(--murekkep); } /* H3 girdisi bir kademe içeri: referansın da iki kademesi var (`.content27_link-wrapper.is-h2` / `.is-h3`). */ .bl-toc-3 a { padding-inline-start: var(--b3); } /* Mobil / tablet: tek kolon, yapışkanlık YOK. Referansın kırılımı da 991 (`grid-template-columns:1fr`, `gap:3rem` = 48px = `--b5`; ≤767'de satır boşluğu 2rem'e iniyor → bizde `--b4`). Yapışkan bir kutuyu tek kolonda bırakmak onu gövdenin üstüne yapıştırır ve okunacak metni kapatır. */ @media (max-width: 991px) { .bl-yazi { grid-template-columns: 1fr; gap: var(--b5); } .bl-yan { position: static; top: auto; } /* ⚠️ Kapak MOBİLDE KALDIRILIYOR ve bunu sayaç değil GÖZ yakaladı: 390px'te ölçüm "taşma 0 · görünmez 0" diyordu, ama basılan kareye bakınca liste son iki girdisini KESİYORDU ve kesildiğini söyleyen hiçbir işaret yoktu — alttaki kenarlık listenin SONU gibi okunuyor. İç içe kaydırma alanı telefonda görünmez; yani kapak, eksik bir listeyi tam gibi gösteren bir denetimdi. Tek kolonda doğru çözüm zaten elimizde: `
`. Liste tamamen görünür, uzun geliyorsa okuyucu BAŞLIĞA dokunup katlar. */ .bl-toc nav { max-block-size: none; overflow-y: visible; } } @media (max-width: 767px) { .bl-yazi { gap: var(--b4); } } /* ---- Zengin metin gövdesi (C-24) ----------------------------------------- */ /* Akış metni 18px: referansın ölçülen gövde ölçüsü de 18px (referansın `li` kuralı 18px, mobil `p` kuralı 18px — ölçüldü). ⚠️ Bu satırlarda ölçülen değerler SÖZCÜKLE yazıldı, bildirim biçiminde DEĞİL: token kapısı (`ciplakFontPx`, siteAnasayfa.test.ts) ham metni tarıyor ve yorumu ayıklamıyor, yani bir kuralı ANLATAN cümle ihlal sayılırdı — bu deponun ödenmiş sınıfı. */ .bl-govde { font-size: var(--t7); line-height: var(--t7-s); min-inline-size: 0; } .bl-govde > * + * { margin-block-start: var(--b4); } .bl-govde > :first-child { margin-block-start: 0; } /* Satır uzunluğu kapağı SATIR metnine, kolona değil: figür, tablo ve kod bloğu 720px'lik kolonun tamamını kullanır, akış metni daha erken durur. Referans da bunu yapıyor (gövde kabı 50rem, metin kabı 48rem). Kapak ÖLÇÜLEREK seçildi, göz kararı değil: Inter Tight 18px'te ortalama karakter genişliği CDP ile 9,16px ölçüldü (canvas `measureText`), yani · `--olcu-orta` (672px) → 73 karakter — hedef bandın ÜSTÜNDE · 672 − `--b6` (592px) → 65 karakter — hedef bandın tam içinde Referansın kendi kapağı 48rem ve ~84 karakter, yani bu sayı referanstan DEĞİL bizim okuma standardımızdan geliyor ve ondan daha sıkı. ⚠️ Bu üçüncü bir ölçü kapağı ve `tokens.css`te bir `--olcu-*` tokenı olarak durması gerekir; o dosya bu turda başka bir ajanda, o yüzden burada tokenlardan TÜRETİLDİ (çıplak piksel yazılmadı). Koordinatöre bildirildi. */ .bl-govde p, .bl-govde ul, .bl-govde ol, .bl-govde figcaption { max-inline-size: calc(var(--olcu-orta) - var(--b6)); } /* Başlıklar: gövde H2/H3 display ailesinde (`.d2`/`.d3` ile aynı rol), H4 gövde ailesinde 500 — deponun kurulu deseni (`.oz-m h4`, `.kizgara-m h3`, `.bl-kural h3` hepsi böyle). Referansın ölçülen ölçeği 40/32/24; bizim 9 adımlı ölçekte karşılıkları bir kademe aşağıda: `--t3` 36 / `--t4` 28 / `--t6` 20. Sapma bilinçli — tek kaynak `tokens.css`. */ .bl-govde h2, .bl-govde h3 { font-family: var(--aile-display); font-weight: 400; text-wrap: balance; } .bl-govde h2 { font-size: var(--t3); line-height: var(--t3-s); margin-block-start: var(--b6); } .bl-govde h3 { font-size: var(--t4); line-height: var(--t4-s); margin-block-start: var(--b5); } .bl-govde h4 { font-size: var(--t6); line-height: var(--t6-s); font-weight: 500; } /* Madde imleri GERİ getiriliyor: `temel.css` `ul,ol{list-style:none}` diyor (menü/ızgara için doğru), ama akış metninde im kaybı yapı kaybıdır. */ .bl-govde ul { list-style: disc; } .bl-govde ol { list-style: decimal; } .bl-govde ul, .bl-govde ol { padding-inline-start: var(--b4); } .bl-govde li + li { margin-block-start: var(--b2); } /* Alıntı: referansın ölçülen hâli ortalı, üst+alt kuralı, 2.25rem/1.2 — bizde `--t3` (36px/1.2) birebir aynı satır aralığını taşıyor. Metin ALINMADI, yalnız şekil. */ .bl-govde blockquote { /* ⚠️ `margin-inline: 0` ŞART ve ölçülerek bulundu: `temel.css`in sıfırlaması `h1-h6,p,figure,ul,ol` sayıyor, `blockquote` SAYMIYOR — yani tarayıcının kendi `margin-inline: 40px` varsayılanı ayakta kalıyordu ve alıntı 720px kolonda 640px ölçülüyordu. 40px hiçbir tokenda yok, yani sessizce ölçek dışına çıkan bir değer; yalnız `margin-block` yazmak onu görmüyor. */ margin-block: var(--b5); margin-inline: 0; padding-block: var(--b5); border-block: 1px solid var(--cizgi); max-inline-size: var(--olcu-bas); text-align: center; font-family: var(--aile-display); font-size: var(--t3); line-height: var(--t3-s); } .bl-govde blockquote p { font-size: inherit; line-height: inherit; max-inline-size: none; } /* Atıf `` ile: referans bunu `
` + düz metinle yazıyor, yani atıf makineye görünmüyor. Şekli aldık, işaretlemeyi DÜZELTTİK. */ .bl-govde cite { display: block; margin-block-start: var(--b4); font-family: var(--aile-govde); font-style: normal; font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); } /* Görsel: yarıçap tokenı `--y-kart` (20px); referansın ölçülen değeri 10px, sapma bilinçli — depoda iki yarıçap var ve üçüncüsü açılmıyor. */ .bl-govde figure { margin-block: var(--b5); } .bl-govde figure img { inline-size: 100%; border-radius: var(--y-kart); } .bl-govde figcaption { margin-block-start: var(--b2); font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); } /* ---- Yatay kaydırma kabı: tablo ve kod ---------------------------------- Kaydırma KAPTA, sayfada değil. ⚠️ Bu kap GÖVDE kolonunun içinde durmak ZORUNDA: yukarıdaki ölçüme göre `overflow`lu bir ATA yapışkan içindekileri sessizce bozar. Izgarayı ya da `.bl-yan`ı saran bir kaydırma kabı YASAK. Aynı şeklin ikinci yazımı olduğu SÖYLENEREK yazıldı: `llm-info.css` kendi sayfası için `.tbl-kap`/`.tbl` taşıyor ve envanter C-29'u 3 sayfa tipinde sayıyor (alternatifler listesi · alt-işleyiciler · blog gövdesi). Buradaki fark kavramsal: orada tabloya SINIF verilebiliyor, zengin metin gövdesinde verilemiyor — o yüzden eleman seçicisi. Üçünün `bilesen.css`e taşınması KOORDİNATÖRÜN kararı; bu turda PAYLAŞILAN dosyaya dokunulmadı. */ .bl-kaydir { margin-block: var(--b5); overflow-x: auto; } .bl-govde table { inline-size: 100%; border-collapse: collapse; font-size: var(--t9); line-height: var(--t9-s); } .bl-govde caption { text-align: start; padding-block-end: var(--b3); color: var(--soluk); } .bl-govde th, .bl-govde td { padding: var(--b2) var(--b3); border-block-end: 1px solid var(--cizgi); vertical-align: top; text-align: start; overflow-wrap: break-word; } .bl-govde th { font-weight: 500; } .bl-govde td { color: var(--soluk); } /* Telefonda tablo SIKIŞTIRILMAZ, kaydırılır: referansın ölçülen kararı `min-width:35rem` (560px) — bizde tokenlardan türetildi (`--olcu-orta` 672 − `--b7` 120 = 552px, referanstan 8px sapma). */ @media (max-width: 767px) { .bl-govde table { min-inline-size: calc(var(--olcu-orta) - var(--b7)); } } /* Kod bloğu. ⚠️ Referansın zengin metin kapsamında `pre` ve `code` kuralı ÖLÇÜLDÜ ve SIFIR (kapsamdaki eleman seçicileri: h1–h6 · p · a · ul · ol · li · blockquote · figure · figcaption · img). Yani bu kural referanstan DEĞİL, brief'ten ve bu sitenin kendi konusundan geliyor — bir asistanın nasıl kurulduğunu anlatan gövde kod taşır. Satır içi `` stili `bilesen.css`te TEK YAZIM ve bir kapı onu pinliyor; burada o kural EZİLMİYOR, yalnız blok bağlamında hap görünümü (yuvarlak zemin + yan boşluk) nötrleniyor. `#ana` ile başlayan seçici bir özgüllük savaşı değil ZORUNLULUK: karşı kural ID taşıyor (1,0,1). */ .bl-govde pre { /* Aile GÖVDE ailesi, `monospace` DEĞİL. Ölçüldü: aile yazılmayınca kutu tarayıcının genel `monospace`ine düşüyordu — yani depoda hiç olmayan bir SİSTEM yazı tipi. `tokens.css` mono aileyi bilerek kaldırmış ("referansın ölçüm dosyasında hiçbir mono aile geçmiyor") ve satır içi `` da gövde ailesini kullanıyor; blok ile satır içi kodun ayrı tipte olması ikisinden de kötüydü. Bedeli yazılı: kod kolonları hizalanmıyor. */ font-family: var(--aile-govde); margin-block: var(--b4); padding: var(--b3); border-radius: var(--y-kart); background: var(--kagit2); font-size: var(--t9); line-height: var(--t9-s); overflow-x: auto; } #ana .bl-govde pre code { padding-inline: 0; border-radius: 0; background: none; font-size: inherit; } /* ---- İnilen başlık işareti (`:target`) ---------------------------------- Scroll-spy DEĞİL (yukarıdaki nota bakın): yalnız içindekiler bağlantısı izlendiğinde inilen başlığı işaretler. Kutu ölçüsüne DOKUNMUYOR — işaret mutlak konumlu, yani çapaya basmak satırı KAYDIRMIYOR (seçiliyken padding/kenarlık kalınlığı oynatmak akışı zıplatır, deponun yazılı dersi). Hareket yok, yani az-hareket kipinde de aynı. */ .bl-govde :is(h2, h3):target { position: relative; } .bl-govde :is(h2, h3):target::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(-1 * var(--b3)); inline-size: 3px; border-radius: var(--y-hap); background: var(--nokta); }