),
o yuzden deger burada tanimlanip .liste a'nin grid-template-columns'una
dogrudan bagli. /yazilar/ sayfasi (.yazi-liste-genis modifier'i tasiyan
AYNI .liste) KENDI degiskenini (--yazilar-liste-gorsel, asagida
.yazi-liste-genis kuralinda) tanimlayip bu satiri kendi kapsaminda EZIYOR
— ikisi TAMAMEN BAGIMSIZ, biri degisince digeri etkilenmiyor (test edildi,
bkz. rapor). Deger 56px — bugunku 140px degisikliginden ONCEKI, ana
sayfanin ORIJINAL hali; "Son Yazılar" duzeni bu turde bu yuzden TEKRAR
56px'e sabitlendi, ayrica (orijinaldeki gibi) 600px altinda AYRI bir
deger YOK — ana sayfa hep 56px, hicbir viewport'ta degismiyor. */
.liste { list-style: none; margin: 0; padding: 0; --anasayfa-liste-gorsel: 56px; }
.liste li { border-bottom: 1px solid var(--tas); }
.liste a {
display: grid; grid-template-columns: var(--anasayfa-liste-gorsel) 1fr;
gap: calc(var(--u) * 2); align-items: center;
padding: calc(var(--u) * 2) 0;
transition: opacity var(--gecis);
}
.liste a:hover { opacity: .7; }
.liste .baslik { font-family: var(--font-alt); font-size: 1rem; font-weight: 500; }
/* width/height HTML nitelikleri (2026-09-08, gercek kapak gecisi) CLS'i
onlemek icin eklendi, ama .liste img'in kendi CSS width/height'i yoktu —
yalniz global "img{max-width:100%}" vardi. max-width SADECE genisligi
koloni genisligine kirpiyor, yukseklik nitelikteki DEGERE (orn. 320px)
aynen kalip img'i GEREREK gorseli bozuyordu (olculdu, eski 56px kolonda:
getBoundingClientRect {w:56,h:700}). width:100%/height:auto ile genislik
koloni (yukaridaki grid-template-columns) doldurur, yukseklik nitelik
oranindan (287/320) otomatik hesaplanir — kapak gorselleri bu sayede
kirpilmadan dogru oranda kucuk kutuya sigar. Bu kural HER IKI baglamda
(ana sayfa VE /yazilar/) ortak — boyuttan BAGIMSIZ, o yuzden coklanmadi. */
.liste img { width: 100%; height: auto; }
.sembol-satir {
display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap;
font-family: var(--font-runik); font-size: 1.25rem;
color: var(--koyu-toprak);
padding-top: calc(var(--u) * 2);
border-top: 1px solid var(--tas);
margin-top: calc(var(--u) * 3);
}
/* ---------- Bölüm 3: alıntı + form ---------- */
/* 2026-09-03 yeniden kurgu — üç sapma düzeltildi (bkz. iş raporu):
1) süvari artık çerçevesiz/şeffaf gravür (suvari-gravur.png), sabit küçük
yükseklikte ve zemine gömülü; eskiden .gorsel--boy (aspect-ratio 3/4)
onu şeridin en uzun elemanı yapıp tüm satırı gereksiz yükseltiyordu.
2) kilim artık gerçek dokuma fotoğrafı (kilim-doku.jpg), sağ kenara
yapışık ve tam yükseklikte, object-fit:cover ile taşan kısım kırpılıyor.
3) alıntının üstüne küçük "GAGIRIZM" marka satırı eklendi (alinti-blok).
Kilim GRID AKIŞINDAN ÇIKARILDI (position:absolute, .alt-bolum'a göre) —
ilk denemede align-self:stretch + img{height:100%} kullanılmıştı ama grid
satırı "auto" (içerik boyutlu) olduğu için yüzde-yükseklik dairesel
büyümeye girdi (ölçülen: 1920px'te şerit 955px'e fırladı, olması gereken
~120-150px). position:absolute + top:0/right/bottom:0 (.alt-bolum'un
padding kutusuna göre) hem bu döngüyü kırıyor hem "sağ kenara yapışık,
tam yükseklik" isteğini DOĞRUDAN karşılıyor — negatif margin gerekmiyor.
grid-template-columns 4. sütunu (18%) BOŞ kalıyor, yalnız kilim için
yatay boşluk ayırma işi görüyor (3. sütun/form onun altına girmesin diye). */
.alt-bolum {
/* position:relative BURADAN KALKTI (2026-09-08, genis ekran duzeltmesi —
asagida .alt-bolum-icerik'e tasindi, bkz. o kuralin kose notu). .alt-bolum
artik yalniz padding/zemin/kenarlik tasiyan DIS (tam genislik, edge-to-
edge) kutu — ic duzeni (grid) ve genislik SINIRI .alt-bolum-icerik'te. */
padding: calc(var(--u) * 3);
border-bottom: 1px solid var(--tas);
/* Sol bölüm zemini (5a madde) — daha önce ozel arka plani yoktu, body'nin
duz --kagit'i seffaf katmandan gorunuyordu. Simdi .bolum'la ayni tonu
(--kagit-acik) ve ayni greni acikca tasiyor — hem 5a'nin "iki bolum
ARASINDA fark olmali" ölçütünü .bildirim-form'un --kagit-orta'sina karsi
saglam bir hesaplanan renkle karsiliyor, hem de ustundeki .bolum ile
gorsel sureklilik kuruyor. */
background-color: var(--kagit-acik);
background-image: url("data:image/svg+xml;utf8,\
");
background-blend-mode: multiply;
background-size: 140px 140px;
}
/* --------------------------------------------------------------------
.alt-bolum-icerik — 2698px'te olculen bulten bozulmasinin duzeltmesi
(2026-09-08, dorduncu ek tur). SEBEP (olculdu, tahmin degil): .alt-bolum
grid'i (1.15fr/142px/1.45fr/18%) HICBIR max-width'e sahip degildi; fr
sutunlari viewport ile SINIRSIZ buyuyordu ama .govde (global 46ch) ve
.form (kendi max-width:460px'i) İÇERİK olarak zaten SABIT genislikte —
2698px'te bildirim-form sutunu 1093px'e sismisti ama govde/form 414/460px
kaldi, aradaki ~600px BOS alan "metin sola sikismis, kilim koptu" gorunumu
yaratti (ekran goruntusu + getBoundingClientRect ile dogrulandi, bkz. is
raporu). .kilim'in KENDISI de ayni sekilde sinirsizdi (right:0/width:18%
.alt-bolum'un TAM genisligine gore, 3840px'te ~691px'e sisecekti).
COZUM: grid + position:relative (kilim/suvari/::before'un konum referansi)
DIS .alt-bolum'dan BU IC SARMALAYICIYA tasindi, max-width+margin:auto ile
sinirlandi. Deger 1920px — rastgele degil: bu bolumun TUM olcumleri
(yukaridaki .suvari/.kilim/::before kose notlari) tarihsel olarak
"1920-1280px arasi" araliginda yapilmis, yani tasarim zaten bu genislige
kadar kalibre edilmisti; 1920'nin USTUNDE artik BUYUMEMESI o kalibrasyonu
OLDUGU GIBI korur (1920 ve alti genislikte max-width hicbir sey
DEGISTIRMEZ — icerik zaten container'dan dar, sifir davranis farki,
olculdu). .alt-bolum'un KENDI arka plani/kenarligi (yukarida, dis kutu)
HALA edge-to-edge kaliyor — yalniz IC icerik 1920px'te durup ortalaniyor,
.bolum'un ustteki tam-genislik gorunumuyle CELISMIYOR (govde rengi ayni
kagit tonuyla devam ediyor, kutulanmis/cerceveli bir gorunum YOK). */
.alt-bolum-icerik {
position: relative;
display: grid;
/* 2. sütun (süvari) 2026-09-04 üçüncü turda .7fr'den 150px sabite indi:
görsel artık şeffaf kenar boşluksuz (744×737, oran ~1.009), şerit
yüksekliğinde (~141px) dikeyde KIRPILMADAN göstermek için genişliği de
~142px olmak ZORUNDA — geniş bir .7fr (~310px@1920) sütun yalnız ölü
boşluk yaratıyordu. Boşalan pay 1./3. sütuna (alıntı/form) dağıtıldı. */
grid-template-columns: 1.15fr 142px 1.45fr 18%;
align-items: center;
gap: calc(var(--u) * 3);
max-width: 1920px;
margin: 0 auto;
}
/* grid-column: 1 — EXPLİCİT, 2026-09-04. .suvari artık grid akışından
position:absolute ile çıkıyor (aşağıdaki köşe notu); onsuz auto-placement
alinti-blok/bildirim-form'u yanlış sütunlara kaydırırdı (bildirim-form
.7fr'lik dar 2. sütuna düşerdi). Üç görünür hücre de (alinti-blok/
bildirim-form burada, kilim zaten kendi mekanizmasıyla) artık sabit
sütuna açıkça bağlı. */
.alinti-blok { grid-column: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.mini-marka { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .75); }
.mini-marka img { width: 28px; height: 28px; }
.mini-marka span {
font-family: var(--font-baslik); font-weight: 400;
font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase;
color: var(--murekkep);
}
/* margin:0 — TARAYICI VARSAYILANI DÜZELTİLDİ (2026-09-03, ikinci tur). blockquote
etiketinin UA varsayılanı margin:1em 40px'tir; bu hiç sıfırlanmamış, önceki
ölçümde (141.8px) alinti-blok'un 77px'lik .alinti hücresinin GERÇEKTE 32px'i
(1em üst+alt) yalnızca tarayıcı varsayılanıydı — kilim/süvari düzeltmesinden
ÖNCE dev suvari kutusu her şeyi gölgelediği için bu hiç fark edilmemişti.
Bu satır olmadan .alinti hücresi 77px, bununla 45px (ölçüldü). */
/* grid-template-columns 1. sütun auto -> max-content (2026-09-04, dorduncu
tur): "auto" track, container'da fr birimi olmayan bir grid'de leftover
alani UTUN kendine cekiyor (CSS Grid spec 11.5.1 — auto max-sizing track'ler
justify-content:normal altinda stretch ediliyor). Olculdu: 1920px'te tirnak
sutunu 24px olmasi gerekirken 347px'e sisiyordu, alinti metni sag yariya
itiliyordu (Gurkan'in "alinti saga kacik" sikayetiyle birebir eslesiyor).
max-content stretch edilmiyor (yalnizca auto edilir), sutun tirnak
glifinin gercek genisligine kilitleniyor. text-align:left ile birlikte
metin artik tirnaktan hemen sonra, sola dayali basliyor. */
.alinti { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 25ch); gap: calc(var(--u) * 1.5); text-align: left; }
.alinti .tirnak {
font-family: var(--font-baslik); font-weight: 400;
font-size: 3rem; line-height: .7; color: var(--kiremit);
}
.alinti p { margin: 0; font-family: var(--font-alt); font-size: .9375rem; line-height: 1.45; }
.alinti cite { display: block; margin-top: calc(var(--u) * .5); font-style: normal; font-size: .75rem; color: var(--koyu-toprak); }
/* Süvari — çerçevesiz gravür, zemine gömülü (kutu/arka plan yok kasıtlı).
2026-09-04 (ikinci tur, REGRESYON DÜZELTMESİ): ilk turda .suvari img'e
sabit 380px height verilmişti ve süvari hâlâ grid akışındaydı (align-self:
stretch) — bu, satırın auto-height hesabına 380px'i soktu, şerit 429px'e
şişti (istenmeyen, bkz. iş raporu). Kilim'in ZATEN kullandığı desene
geçildi: .suvari artık grid-column:2/grid-row:1 İLE EXPLİCİT yerleştirilip
position:absolute yapıldı. Grid Level 1 §10 kuralı: explicit yerleştirilmiş
abs-pos grid item'in containing block'u o GRID ALANI (2. sütun × 1. satır)
olur — track boyutlandırmaya hiç katkı vermez (döngü riski yok, kilim'de
doğrulanan aynı 955px döngüsü tekrar tetiklenmiyor). Satır yüksekliğini
artık yalnız alinti-blok/bildirim-form belirliyor (~130px içerik + 48px
dolgu ≈ 178-190px, hedef 185-215px aralığında).
inset:0 kutuyu grid alanına tam oturtuyor (küçük, ~155-180px yükseklik ×
~200-310px genişlik — kutu artık yatayda GENİŞ, dikeyde KISA). İçindeki
img yine büyük/kare kalıyor (260px) — kutudan hem yatayda (sağdan kırpma,
ölü boşluk yok) hem dikeyde (align-items:center ile ortalanmış kırpma)
taşıyor; overflow:hidden ikisini de kesiyor. Kilim'in 18%'lik son sütunu
ayrı bir hücre olduğu için süvari ASLA ona binmiyor (grid alanları
kesişmez). */
.suvari {
/* start VE end ikisi de açık olmalı (2/3, 1/2) — yalnız start verilip end
auto bırakılırsa (grid-column:2) abs-pos item'ın o kenarı grid alanına
değil container'ın padding kutusuna göre çözülüyor (ölçüldü: kutu
1920px'te sağa doğru container sonuna kadar uzadı, 310px yerine 1362px
genişlik). */
grid-column: 2 / 3;
grid-row: 1 / 2;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}
/* 2026-09-04 DÖRDÜNCÜ TUR — DÜZELTME: ölçülen gerçek dosya artık
şeffaf kenar boşluksuz (744×737, oran ~1.009 — kareye çok yakın). Önceki
turda height:345px ile görsel bilerek kutudan büyük tutulup dikeyde
(bayrak üstten, bacaklar alttan) KIRPILIYORDU — hedefte süvari dikeyde TAM
görünüyor, bu yanlıştı. Artık height:100% — img'i kutunun (=satırın
içerik yüksekliği) TAM boyuna oturtuyor, dikey kırpma YOK. Genişlik
auto'dan geliyor (~%100.9 oranında, kutu genişliğiyle -yukarıdaki grid
sütunu değişikliğiyle- eşleşecek şekilde 150px'e ayarlandı) — sağda/solda
kasıtlı taşma yok, tam oturma hedefleniyor. */
.suvari img { height: 100%; width: auto; max-width: none; }
/* Yükseklik bütçesi — DOĞRULANDI (2026-09-04, üçüncü tur): süvari artık
position:absolute olduğu için satırın auto-height hesabına HİÇ girmiyor;
satırın en uzun elemanı yine .alinti-blok (marka+alıntı) ve .bildirim-form
(başlık+metin+form) — ikisi arasındaki büyük olan şerit yüksekliğini
belirliyor. .govde/.ustyazi/.form GLOBAL class'lar (Bölüm 2'de ve başka
yerlerde de kullanılıyor), o yüzden küçültme burada SADECE bu kapsamda
(descendant selector) yapıldı — global tanıma dokunulmadı. .form yalnız bu
bölümde kullanıldığı doğrulandı (grep), o yüzden .form'un KENDİSİ (aşağıda)
güvenle küçültüldü. Hedef 1536px'te %9-10; ulaşılan %12.1 (ölçüldü, iş
raporu) — kalan fark govde/form'un satır yüksekliği/dolgusundan geliyor,
daha fazla küçültmek punto boyutuna dokunmayı gerektirir (kapsam dışı
bırakıldı, bkz. iş raporu). */
/* Ton farki (5a madde, 2026-09-04 dorduncu tur) — 6. madde ile DUZELTILDI
(besinci tur): ilk denemede renk .bildirim-form'un KENDI kutusuna
(align-self:stretch, grid-column:3) verilmisti — bu kutu grid SATIRININ
icerik yuksekligini dolduruyor ama .alt-bolum'un KENDI padding'inin
(üst/alt calc(--u*3)=24px) ve sag taraftaki sutunlar-arasi gap'in
(column3-column4 arasi 24px + kilim'e kadar olan fark) DISINDA kaliyordu
— ekranda "yuzen kutu" gibi durdugu Gürkan tarafindan bildirildi (kanit:
feedback/2026-09-04/55-mevcut-ton-blogu-kutu.png). Ölçüldü: ust/alt bosluk
tam .alt-bolum padding'i (24px), sag bosluk bildirim-form'un sag kenariyla
kilim'in sol kenari arasindaki mesafe (1920-1280px arasi SABIT 39.36px —
cebirsel olarak ikisinin farkli taban yuzdesinden geliyor: kilim right:0/
width:18% .alt-bolum'un PADDING KUTUSUNA gore, grid'in 4. sutunu (18%) ise
CONTENT kutusuna gore — genislikten bagimsiz sabit fark).
COZUM (ILK HALI): renk BILDIRIM-FORM'UN KENDI KUTUSUNDA degil, ayri bir
.alt-bolum::before katmaninda — position:absolute, top:0/bottom:0,
right:18% (kilim'in right:0/width:18%'iyle BIREBIR AYNI taban, kesin
esitlik) ama left:42% — bildirim-form'un sol siniri fr+px karisik
birimlerden geldigi icin duz % ifade EDILEMEDIGINDEN, 1280-1920px
araliginda olculen %41.6-%44.2 araliginin ORTALAMASI (~42%) kullanildi.
Bu bir YAKLASIKLIKTI, kesin degil — ve tam bu yuzden 2026-09-08'de
(dorduncu ek tur, Gurkan'in canli buldugu hata) 1135px'te (kalibrasyon
araliginin — 1280px — ALTINDA, ama suvari'nin hala gorunur oldugu 1100-
1280px bandinda) yaklasik %42 degeri gercek bildirim-form sol kenarinin
ONEMLI OLCUDE GERISINDE kaldi (olculdu: tone-left=480.5px, bildirim-form
solu=513.6px, ARADAKI FARK suvari kutusunun (347.6-489.6px) SON 9px'ine
denk geldi) — ton bloğunun sol kenari suvari gorselinin ustunden GECTI,
at/bayrak gorseli "cerceve disina tasmis" gibi gorundu (ekran goruntusu +
getBoundingClientRect ile dogrulandi).
DUZELTME (ikinci hali, 2026-09-08): yaklasik % yerine GRID'IN KENDISI
kullanildi — ::before artik position:absolute DEGIL, dogrudan
.alt-bolum-icerik grid'inin bir OGESI (grid-column:3/-1, yani bildirim-
form'un 3. sutunundan kilim'in 4./son sutununa kadar, ARADAKI gap dahil).
Bu, sol kenari bildirim-form'un GERCEK sol kenariyla, sag kenari da
kilim'in sag kenariyla (ikisi de AYNI grid sutunlarindan turedigi icin)
HER GENISLIKTE piksel-kesin hizalar — yaklasiklik/kalibrasyon araligi
kavrami TAMAMEN ORTADAN KALKTI, sadece 1135px degil, TUM genislikler icin
kok neden giderildi. align-self:stretch — ebeveynin align-items:center'ini
EZIYOR, satirin TAM yuksekligini (top:0/bottom:0'in eskiden yaptigi isi)
dolduruyor. Katman sirasi (metin/kilim ustte kalsin) ARTIK position'a
bagli degil: CSS boyama sirasi kurali geregi POSITIONED olmayan bu oge
(position:static/default) her zaman POSITIONED kardeslerinden (bildirim-
form'un position:relative'i, kilim/suvari'nin position:absolute'u) ONCE
boyanir — eski ::before'un position:absolute + DOM sirasi kalibi ARTIK
GEREKMIYOR, spesifikasyonun kendisi ayni sonucu garanti ediyor. */
.alt-bolum-icerik::before {
content: "";
grid-column: 3 / -1;
grid-row: 1;
align-self: stretch;
background-color: var(--kagit-orta);
/* Kagit greni bu opak zeminde de tasiniyor — yukaridaki body koseNotu
("bolum ve altbar kendi opak zeminleri yuzunden bu katmani ortuyor, o
yuzden ayni dokuyu kendi kurallarinda ayrica tasirlar") ayni kalibi
burada da uyguluyor, aksi halde renk bloğu serit icinde dokusuz duz
bir alan gibi kalirdi. */
background-image: url("data:image/svg+xml;utf8,\
");
background-blend-mode: multiply;
background-size: 140px 140px;
}
.bildirim-form {
grid-column: 3;
/* grid-row:1 — 2026-09-08'de EXPLICIT eklendi. ::before artik (yukarida)
ayni satirda grid-column:3/-1 ile ACIKCA yerlestirilmis bir grid ogesi;
bildirim-form'un grid-row'u ACIK OLMADAN auto-yerlesim, ::before'in
ZATEN doldurdugu (row1, col3) hucresiyle CAKISMAMAK icin bildirim-formu
YENI bir satira (row2) itiyordu — olculdu/gorulmustu: ton kutusu ustte
ayri bir serit, metin/form altta ayri bir seritte, ikisi CAKISMIYORDU
(istenen tam tersi: ton ARKADA, metin ONDE, AYNI hucrede). Ikisini de
ACIKCA row:1'e sabitlemek CSS Grid'in "explicit yerlesim CAKISMAYA
izin verir" kuralini devreye sokuyor — auto-yerlesim algoritmasi hic
araya girmiyor. */
grid-row: 1;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 calc(var(--u) * 3);
/* position:relative — SADECE stacking icin: ::before ARTIK grid ogesi
(position:static/default), bildirim-form ISE position:relative —
CSS boyama sirasi kurali geregi POSITIONED olmayan ::before her zaman
POSITIONED bildirim-form'dan ONCE boyanir (spec: positioned olmayan
icerik DOM sirasindan bagimsiz once boyanir), metin ton renginin
USTUNDE kalir. */
position: relative;
}
/* Baslik/govde hiyerarsisi (2026-09-04): .ustyazi global .875rem (14px),
.bildirim-form .govde global .govde font-size TANIMLAMIYOR, body'den
.9375rem (15px) miras aliyordu — yani baslik govdeden KUCUKTU (14<15),
hiyerarsi tersti. .bolum > div > .ustyazi zaten 1.125rem/600 agirlikla
ayni sorunu cozmustu (bkz. yukarida); ayni kalip burada da uygulaniyor. */
.bildirim-form .ustyazi { font-size: 1.0625rem; font-weight: 600; margin-bottom: calc(var(--u) * .5); }
.bildirim-form .govde { line-height: 1.4; }
.bildirim-form .form { margin-top: calc(var(--u) * .5); }
/* Kilim — grid akışı dışında (yukarıdaki köşe notu), sağ kenara yapışık,
şeridin tam yüksekliğini dolduruyor, object-fit:cover ile taşan kısım
kırpılıyor. right değeri .alt-bolum'un sağ padding'ini (40px) iptal edip
viewport kenarına yapıştırıyor. */
.kilim {
position: absolute;
top: 0; bottom: 0; right: 0;
width: 18%;
overflow: hidden;
}
.kilim img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.form { display: flex; gap: 0; margin-top: calc(var(--u) * 2); max-width: 460px; }
/* padding 1.75u→1.25u (2026-09-03, ikinci tur, bildirim şeridi yükseklik
bütçesi) — .form bu SAYFADA tek yerde kullanılıyor (grep ile doğrulandı,
header/footer'daki .buton'a dokunulmuyor: buton kendi genel kuralı
yerine BURADA .form .buton ile ezildi), o yüzden global etki riski yok. */
.form input {
flex: 1; min-width: 0;
background: var(--kagit-acik);
border: 1px solid var(--tas); border-right: 0;
padding: calc(var(--u) * 1.25) calc(var(--u) * 2);
font-family: var(--font-govde); font-size: .8125rem;
color: var(--murekkep);
}
.form input::placeholder { color: var(--toprak); }
.form .buton { padding: calc(var(--u) * 1.25) calc(var(--u) * 3); }
.form input:focus { outline: 2px solid var(--kiremit); outline-offset: -2px; }
/* ---------- Alt bar ---------- */
.altbar {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: calc(var(--u) * 4);
padding: calc(var(--u) * 3) calc(var(--u) * 4);
background-color: var(--murekkep);
background-image: url("data:image/svg+xml;utf8,\
");
background-blend-mode: multiply;
background-size: 140px 140px;
color: var(--kagit-acik);
}
.altbar .marka svg { filter: invert(1); }
/* Telif satiri (2026-09-08) — eskiden burada .altbar nav vardi (kaldirildi,
nav artik header'in isi). Ortadaki 1fr kolonu (.altbar'in grid-template-
columns: auto 1fr auto duzeni) simdi bu satir dolduruyor, .altbar nav'in
yerini birebir aliyor (justify-content:center yerine text-align:center —
tek satirlik bir icin daha doğrudan). Renk --toprak (murekkep zeminde
4.41:1 kontrast, >=3:1 sartini rahat gecıyor, ama --kagit-acik'in 14:1'ine
gore belirgin sekilde SILIK — Gurkan'in istedigi "hafif silik ton" bu). */
.telif {
margin: 0; text-align: center;
font-size: .75rem; letter-spacing: .02em;
color: var(--toprak);
}
.altbar a { transition: color var(--gecis); }
.altbar a:hover { color: var(--kiremit); }
.sosyal { display: flex; gap: calc(var(--u) * 2.5); }
.sosyal a { display: grid; place-items: center; width: 22px; height: 22px; }
.sosyal svg { width: 18px; height: 18px; }
/* ---------- Yazılar listesi (/yazilar/) — mevcut kart sistemini yeniden
kullanir, YENI bir tasarim dili icat etmez. Tek gercek ekleme: .bolum
3 sutunlu grid'i varsayiyordu (Öne Çıkan/Son Yazılar/Gagirizm Nedir), bu
sayfada yalniz 2 blok (öne çıkan + tüm liste) var — .bolum--tek modifier'i
grid'i tek sutuna indiriyor, ic .one-cikan/.liste/.ustyazi/.govde/.bag
kurallarina DOKUNMUYOR (hepsi zaten global, aynen calisiyor). ---------- */
.bolum--tek { grid-template-columns: 1fr; }
/* Ic blok genisligi sinirlandi (2026-09-08): sinirlanmazsa .one-cikan tam
sayfa genisligine yayilir, gorsel sutunu (1fr/2.5fr oraninin 1fr'i) asiri
genis ama alcak bir seride donusur (icerik sutununun dogal metin
yuksekligine gore stretch oldugu icin) — object-fit:cover deseni asiri
yatay kirpar. 720px, ana sayfadaki .one-cikan'in orijinal oranina
(yaklasik 600-650px genislik) yakin, okuma genisligi acisindan da rahat. */
.bolum--tek > div { max-width: 720px; width: 100%; margin: 0 auto; }
/* Geri donus linki ("← Yazılar") — .bag'in kendi ok'u varsayilan olarak
sonda ve saga bakar (ileri gitme anlami); geri donus baglaminda ok basa
ve sola donuyor. flex-direction:row-reverse ile ve ::after'in
GORSEL sirasi degisir (icerik/DOM sirasi ayni kalir, ekran okuyucu
etkilenmez), gap zaten iki yonde de esit calisir. */
.bag--donus { flex-direction: row-reverse; }
.bag--donus::after { content: '←'; }
/* Liste ogelerine aciklama satiri eklenmesi (2026-09-08) — ana sayfadaki
.liste yalniz baslik+tarih gosterir (kisitli alan); bu sayfada gorev
tanimi "başlık, tarih, description" istiyor. .liste'in KENDISI
degistirilmedi (ana sayfa etkilenmiyor) — yalniz bu sayfaya ozel
.yazi-liste-genis ile ust-hizalama ve aciklama tipografisi EKLENDI. */
/* --yazilar-liste-gorsel — YALNIZ /yazilar/ sayfasindaki ("Tum Yazilar")
liste resminin GENISLIGI (2026-09-08, ucuncu tur — ana sayfadan AYRISTIRMA).
.liste'nin --anasayfa-liste-gorsel'inden (yukarida, 56px) TAMAMEN
BAGIMSIZ: burada tanimlanip grid-template-columns'u KENDI kapsaminda
(.yazi-liste-genis a) eziyor, .liste a'nin genel kuralina hic
dokunmuyor — birini degistirmek digerini ETKILEMEZ (test edildi, bkz.
rapor). Mevcut/kalici deger 140px (Gurkan'in begendigi, kabartma detayi
secilir boyut). 600px alti icin AYRI (daha kucuk) deger asagidaki
@media(max-width:600px) icinde AYNI degiskenin ikinci tanimi olarak
veriliyor — ikinci bir mekanizma degil, ayni degiskenin dar ekrandaki
karsiligi (ana sayfanin 56px'i sabit kalip byle bir karsiligi YOK). */
.yazi-liste-genis { --yazilar-liste-gorsel: 140px; }
.yazi-liste-genis a { grid-template-columns: var(--yazilar-liste-gorsel) 1fr; align-items: start; padding: calc(var(--u) * 2.5) 0; }
.yazi-liste-genis .aciklama {
display: block;
margin-top: calc(var(--u) * .5);
font-size: .8125rem;
line-height: 1.55;
color: var(--koyu-toprak);
}
/* ---------- Yazı detay (/yazilar//) — sitenin ilk uzun-metin
sayfasi. Govde sutununun ust siniri. .display'e DOKUNULMADI —
.yazi-baslik ayri, yeni bir class.
88ch (2026-09-12) — ESKI DEGER 68ch. Eski degerin dayandigi "1ch = 1
karakter, yani 68ch = 68 karakterlik satir" varsayimi OLCUMLE YANLIS
cikti; iki sebepten birden sapiyor:
1. box-sizing:border-box global (bkz. "Temel" bolumu), yani max-width
yatay padding'i DE kapsiyor: 2 x calc(--u * 3) = 48px sutunun
icinden gidiyor, metne kalmiyor.
2. ch birimi BU elementin font-size'ina gore cozuluyor (.yazi, body'den
miras, .9375rem = 15px, JetBrains Mono ilerleme 0.6em -> 1ch = 9px)
ama govde metni .yazi-govde icinde 1rem = 16px'te diziliyor
(ilerleme 9.6px + letter-spacing .01em = 0.15px -> 9.75px/karakter).
Olculen sonuc (Playwright, 1440px, gercek satirlar sayildi): 68ch = 612px
kutu -> 564px metin -> satir basina EN COK 57, ortalama 53.7 karakter.
Hedef tipografik aralik 72-80. 88ch = 792px kutu -> 744px metin ->
744 / 9.75 = satir basina EN COK 76 karakter. font-size'a DOKUNULMADI
(sutun 792px'te kaldi, 1000px esiginin altinda). Tek satirla geri almak
icin: 88ch -> 68ch. */
.yazi { max-width: 88ch; margin: 0 auto; padding: calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 10); }
.yazi-ust { margin-bottom: calc(var(--u) * 5); }
.yazi-ust .bag--donus { margin-bottom: calc(var(--u) * 3); }
.yazi-tarih { margin: 0 0 calc(var(--u) * 1.5); }
/* line-height 1.30 — .h2/.h3'teki KANITLANMIS guvenli deger (bkz. o
kuralin koşe notu, Turkce buyuk harf aksanlarinin satir ustune tasmasi
sorunu): ayni riskin burada da gecerli olabilecegi ihtimaline karsi
yeniden olcum yapmadan ayni kanitlanmis degeri kullaniyoruz. */
.yazi-baslik {
font-family: var(--font-baslik);
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 1.30;
text-transform: uppercase;
margin: 0 0 calc(var(--u) * 1.5);
}
.yazi-altbaslik { font-family: var(--font-alt); font-size: 1.0625rem; color: var(--koyu-toprak); margin: 0; }
/* Yazi detay kapagi (2026-09-08) — basligin ALTINA, govdenin USTUNE
yerlestirildi: once baslik okunur, sonra kapak gorulur, sonra metne
girilir — govde arasina girmiyor, akici okumayi kesmiyor.
KIRPILMA DUZELTMESI (2026-09-12). Sablon (_includes/yazi.njk:12) bu
kutuya .gorsel--gen'i de veriyor, o da "aspect-ratio: 4 / 3" (satir 743)
dayatiyor; .gorsel img ise "height:100%; object-fit:cover" (satir 740).
Kapak dosyalari PORTRE (1400x1560, oran 0.897), kutu ise YATAY 4:3
(1.333) — cover olcegi max(564/1400, 423/1560) = 0.4029, yani gorsel
564x628.5 cizilip 423px'lik pencereye sigdiriliyor ve object-position
varsayilani (50% 50%) yuzunden ustten 102.75px, alttan 102.75px
KESILIYOR. Gorunen "resmin ust kismi yok" hatasi tam olarak buydu
(olculdu, Playwright @1440px).
Cozum, gorev tanimindaki tercih sirasinin BIRINCISI: sabit oran kisiti
bu kutuda kaldirildi, gorsel kendi en-boy oraniyla akiyor — kirpma yok,
contain bosluğu yok, object-position hilesine gerek yok. .gorsel--gen
ve .gorsel img GENEL kurallari DEGISMEDI (liste/thumbnail etkilenmez).
Tek satirla geri almak icin: asagidaki iki bildirimi (aspect-ratio:auto
ve .yazi-kapak img{height:auto}) sil. */
.yazi-kapak { margin: 0 0 calc(var(--u) * 5); aspect-ratio: auto; }
.yazi-kapak img { height: auto; }
.yazi-govde { font-size: 1rem; line-height: 1.85; }
.yazi-govde p { margin: 0 0 calc(var(--u) * 3); }
.yazi-govde h2 {
font-family: var(--font-baslik);
font-weight: 400;
font-size: clamp(1.25rem, 2.6vw, 1.625rem);
line-height: 1.30;
text-transform: uppercase;
margin: calc(var(--u) * 6) 0 calc(var(--u) * 2);
}
.yazi-govde blockquote {
margin: calc(var(--u) * 4) 0;
padding-left: calc(var(--u) * 3);
border-left: 3px solid var(--kiremit);
font-family: var(--font-alt);
font-style: italic;
color: var(--koyu-toprak);
}
.yazi-govde blockquote p { margin: 0 0 calc(var(--u) * 1); }
.yazi-govde blockquote p:last-child { margin-bottom: 0; }
.yazi-govde a { color: var(--kiremit); text-decoration: underline; text-underline-offset: 3px; }
.yazi-govde a:hover { color: var(--murekkep); }
.yazi-alt { margin-top: calc(var(--u) * 6); padding-top: calc(var(--u) * 3); border-top: 1px solid var(--tas); }
/* ---------- Ilgili yazi onerileri — 2x2 izgara (2026-09-12, ikinci tur) ----
Markup: _includes/yazi.njk, siralama: .eleventy.js'teki ilgiliYazilar
filtresi (bu turda DOKUNULMADI — ayni 4 yazi, ayni sirada). Buradaki tek
is gorunum.
NEDEN AYRI AD UZAYI. Onceki tur bu bolumu /yazilar/ sayfasinin kart
bileseniyle ORTAK kullaniyordu (.liste.yazi-liste-genis + ucuncu bir
.yazi-liste-oneri modifier'i, gorsel kolonu 96px). O bilesenin iskeleti
"grid-template-columns: 1fr" — yani gorsel SOLDA, metin SAGDA.
Istenen duzen (gorsel USTTE, metin ALTTA, 2 sutun x 2 satir) bu iskeletin
ezilmesiyle degil, ayri bir iskeletle cozuluyor; miras zinciri tamamen
kesildi. Sonuc: .liste, .yazi-liste-genis, --yazilar-liste-gorsel ve
--anasayfa-liste-gorsel bu bolumden ARTIK HIC ETKILENMIYOR (olculdu:
/yazilar/ 5 kart 140x156 gorsel, ana sayfa 3 kart 56x62 gorsel —
tur oncesiyle birebir ayni). Eski .yazi-liste-oneri kurallari (96px /
dar ekranda 72px, ve son ogenin border-bottom'unu silen kural) artik
olu oldugu icin SILINDI; dar ekran karsiligi da dosyanin sonundaki
@media(max-width:600px) blogundan kaldirildi.
NEDEN 2 SUTUN SABIT (auto-fit degil). Kapsayici .yazi zaten 88ch (792px)
ile sinirli, yani izgaranin genisligi viewport'la dogrusal buyumuyor;
auto-fit/minmax burada gereksiz belirsizlik olurdu. Tek kirilma noktasi
var: 600px altinda tek sutun (asagidaki @media). 601-768 arasi 2 sutun
olarak kaliyor — 601px'te sutun basina ~260px dusuyor, olculdu, tasma
ve satir kirilmasi yok.
GORSEL ORANI 3/2 VE KIRPMA. Kapak dosyalari PORTRE (orta varyanti
628x700, oran 0.897). object-fit:cover ile 3:2'lik (1.5) kutuya
oturunca olcek max(1, 1.5/0.897) genislige gore belirlenir: gorselin
TAM genisligi kullanilir, yuksekliginin ortadan ~%40'lik bir bandi
alinir, ust ve alt kirpilir. Bu kart gorselleri icin KABUL EDILEN
davranis (gorev tanimi); object-position varsayilan merkezde birakildi,
kapak-bazli kaydirma YAPILMADI. Detay kapagi (.yazi-kapak) bundan
BAGIMSIZ ve hala kirpilmiyor (aspect-ratio:auto, bkz. yukarisi).
aspect-ratio img'in KENDISINDE: HTML width/height nitelikleri kaynagin
gercek olculeri (628x700), CSS aspect-ratio onlarin turettigi orani
eziyor — kutu yuklemeden once kesin, CLS yok. */
/* Bolum kabi — bu tur DEGISMEDI, onceki turdan aynen korunuyor: ustteki
tek yatay cizgi (border-top) ve govdeden ayiran bosluk. CIFT CIZGI
KONTROLU: hemen altindaki .yazi-alt da border-top tasiyor; iki cizgi
arasinda 1440px'te 933px var (olculdu), yani 2x2 izgarada kisalmis
bolumde bile cakisma yok. Kartlarin KENDI alt cizgisi YOK (eski
.liste li border-bottom'u miras zinciriyle birlikte dustu), o yuzden
son kartin altinda .yazi-alt cizgisinden baska cizgi kalmiyor. */
.yazi-oneri {
margin-top: calc(var(--u) * 6);
padding-top: calc(var(--u) * 3);
border-top: 1px solid var(--tas);
}
.oneri-izgara {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* tek deger (32px) — satir ve sutun bosluğu ayni. Satir bosluğu
bilerek dar tutuldu: 2x2 duzen dikey listeden daha UZUN (olculdu,
bkz. bolumun basindaki yukseklik notu), her px geri kazanim
"Tum Yazilara Don"u yukari cekiyor. */
gap: calc(var(--u) * 4);
}
/* min-width:0 — grid ogesinin varsayilan min-width:auto'su uzun bir
basligin sutunu disari itmesini engellemek icin (minmax(0,1fr) ile
birlikte ikinci emniyet). */
.oneri-kart { min-width: 0; }
/* height:100% + flex-column: satirdaki iki kart grid stretch ile ayni
yuksekligi alir, ama kendi icerigi kadar yuksek kalirdi — o zaman
kisa kartin metin zemini erken biterdi. height:100% bagi kartin tam
boyuna gerer, .oneri-metin'in flex:1'i de fazlaligi metin zeminine
yukler: iki kartin zemini ayni Y'de biter. */
.oneri-kart a {
display: flex; flex-direction: column;
height: 100%;
transition: opacity var(--gecis);
}
.oneri-kart img {
width: 100%; height: auto;
aspect-ratio: 3 / 2;
object-fit: cover; object-position: center;
/* yuklenmeden once kutuyu dolduran zemin — .gorsel'in kendi
background:var(--toprak) davranisiyla ayni, ayri sarmalayici
elemana gerek kalmadan. */
background: var(--toprak);
}
/* Metin zemini — sitenin KENDI kart deyimi (.one-cikan .icerik ile ayni
kagit-orta zemin + --u carpani padding). Yuvarlak kose, golge, beyaz
zemin YOK. */
.oneri-metin {
flex: 1;
display: flex; flex-direction: column;
padding: calc(var(--u) * 2.5);
background: var(--kagit-orta);
transition: background-color var(--gecis);
}
/* Baslik kartin ana ogesi: .h3 ile ayni deyim (font-baslik / 400 /
uppercase / line-height 1.30 — Turkce buyuk harf aksanlarinin satir
ustune tasmamasi icin KANITLANMIS deger, bkz. .h2/.h3 notu), eski
1rem/500 DM Sans yerine — global .h3 ile BIREBIR ayni degerler, yeni
bir baslik olcegi uydurulmadi. Boyut maliyeti olculdu: 1.125 -> 1.25rem
bolumu yalniz 8px uzatiyor (6 sayfada 852 -> 860); 1.375rem 44px
uzatiyordu, o yuzden alinmadi. */
.oneri-baslik {
font-family: var(--font-baslik);
font-weight: 400;
font-size: 1.25rem;
line-height: 1.30;
text-transform: uppercase;
transition: color var(--gecis);
}
/* Tarih ikincil: global .kucuk ile ayni olculer, ama .kucuk class'i
markup'a konmadi (kart kendi ad uzayinda dursun diye) — degerler
burada tekrarlaniyor. */
.oneri-tarih {
font-size: .75rem; letter-spacing: .04em;
color: var(--koyu-toprak);
margin-top: calc(var(--u) * .75);
}
/* 2 satirda kesme: -webkit-line-clamp hala bu isin tek genis destekli
yolu (line-clamp kisayolu Safari'de yeni). display:-webkit-box
gerektirdigi icin .oneri-aciklama'nin KENDISI flex ogesi olarak kalir,
ic dizimi -webkit-box olur. */
.oneri-aciklama {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin-top: calc(var(--u) * 1.25);
font-size: .8125rem;
line-height: 1.55;
color: var(--koyu-toprak);
}
/* Hover — sitenin mevcut sozlugu: .bag:hover'in kiremit'i + .liste
a:hover'in opacity'si. Yeni gorsel dil yok. Tum kart (gorsel dahil)
tek icinde oldugu icin hover alani kartin tamami. */
.oneri-kart a:hover { opacity: .92; }
.oneri-kart a:hover .oneri-baslik { color: var(--kiremit); }
.oneri-kart a:hover .oneri-metin { background: var(--kagit-acik); }
/* ---------- Gömülü video (tıkla-yükle / facade) — 2026-09-12 ----------
Markup: _includes/video.njk (Nunjucks macro), davranış: base.njk'teki
ikinci inline betik. Buradaki tek iş görünüm.
NEDEN YENİ AD UZAYI (.gomulu-video-*): bu dosyada `.video-izgara` adı
iki YORUM satırında geçiyor (1367, 1469) — kuralı yok, ölü ad. `.video`
önekini almak o ölü adla karışırdı; `.gomulu-` öneki çakışmayı baştan
kesiyor.
NEDEN object-fit:contain, cover DEĞİL: indirilen kapak (hqdefault.jpg,
480x360) ölçüldü — gerçek görüntü x=64..423 arasında, yani 360x360 KARE,
sağ ve solda YouTube'un koyduğu siyah direkler var (maxresdefault,
hq720, sddefault üçü de 404; bkz. rapor). Video kare olduğu için gerçek
oynatıcı da onu 16:9 çerçevede tam böyle gösterir. `cover` kullansaydık
16:9 kutuda görüntünün üstünü/altını keser, direkleri yine bırakırdı —
yani hem kırpar hem düzeltmez. `contain` + koyu zemin, tıklamadan SONRA
gelen iframe'in görünümüyle birebir aynı: kare içerik ortada, kenarlar
koyu. Kutunun kendisi 16:9 kalıyor (gereksinim), yer değiştirme
(layout shift) yok. */
.gomulu-video { margin: calc(var(--u) * 4) 0; }
.gomulu-video-dugme {
display: block; position: relative;
width: 100%; aspect-ratio: 16 / 9;
margin: 0; padding: 0; border: 0;
background: var(--murekkep);
cursor: pointer; overflow: hidden;
/* font-* miras — buton varsayılan olarak sistem fontuna düşer, başlık
etiketi sitenin gövde fontunda kalsın. */
font: inherit; color: var(--kagit-acik);
}
.gomulu-video-kapak {
width: 100%; height: 100%;
object-fit: contain; display: block;
transition: opacity var(--gecis);
}
.gomulu-video-oynat {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 68px; height: 68px; border-radius: 50%;
background: var(--kiremit);
display: grid; place-items: center;
transition: transform var(--gecis), background-color var(--gecis);
}
/* Oynat üçgeni — saf CSS (border hilesi), ek ağ isteği doğuracak bir ikon
dosyası/font YOK. Bu sayfanın sözü "tıklamadan önce sıfır istek". */
.gomulu-video-oynat::before {
content: ''; width: 0; height: 0;
margin-left: 5px;
border-left: 20px solid var(--kagit-acik);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.gomulu-video-baslik {
position: absolute; left: 0; right: 0; bottom: 0;
padding: calc(var(--u) * 4) calc(var(--u) * 2) var(--u);
font-size: .875rem; line-height: 1.35; text-align: left;
color: var(--kagit-acik);
background: linear-gradient(to top, rgba(21, 21, 20, .85), rgba(21, 21, 20, 0));
}
.gomulu-video-dugme:hover .gomulu-video-oynat { transform: translate(-50%, -50%) scale(1.08); }
.gomulu-video-dugme:hover .gomulu-video-kapak { opacity: .9; }
/* Klavye odağı görünür kalsın: genel :focus-visible kuralı (aşağıda)
outline-offset:2px veriyor, buton overflow:hidden olduğu için dışarıda
duran outline kırpılmaz (offset kutunun DIŞINDA çizilir). */
.gomulu-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.gomulu-video-yedek { margin: 0; }
/* ---------- Erişilebilirlik ---------- */
.atla {
position: absolute; left: -9999px;
background: var(--kiremit); color: var(--kagit-acik);
padding: var(--u) calc(var(--u) * 2); z-index: 10000;
}
.atla:focus { left: var(--u); top: var(--u); }
:focus-visible { outline: 2px solid var(--kiremit); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ---------- Duyarlılık ---------- */
/* Hero 2026-09-01'de yeniden kurgulandı (bkz. .display font-size'daki köşe
notu): eski @media(max-width:1100px) burada hero-metin/hero-logo/
hero-katman--sol/--sag yüzdelerini AYRI yönlerde değiştiriyordu (sol
24%→27% BÜYÜYOR, sağ genişliği 27.4%→26% KÜÇÜLÜYOR) — bu, "genişlik
daraldıkça sağdaki küçülüyor, soldaki küçülmüyor" şikayetinin ölçülebilir
doğrudan nedeniydi (before-data.json, 1100px). Artık hero için 1100px'te
HİÇBİR yeniden dağıtım yok; hero-metin/hero-logo/hero-katman temel %
değerleri (bkz. yukarıda .hero-metin, .hero-logo, .hero-katman--sol/--sag)
900px'e kadar kırpılmadan sürüyor — sol/sağ/logo/metin aynı vw oranıyla
BİRLİKTE küçülüyor. 1100px yalnız hero-DIŞI bölümler (.bolum, .alt-bolum,
.video-izgara) için hâlâ geçerli, onlara dokunulmadı. */
@media (max-width: 1100px) {
.bolum { grid-template-columns: 1fr 1fr; }
.bolum > :last-child { grid-column: 1 / -1; }
/* /yazilar/ sayfasindaki .bolum--tek (satir 1215, "grid-template-columns:
1fr") bu bloktaki .bolum kuralinin (yukarida, ayni satirda) EZILMESIYLE
kayboluyordu: ikisi de tek-sinif secici (esit ozgunluk, 0,1,0), ama bu
kural DOSYADA SONRA geldigi icin 761-1100px araliginda kazaniyordu —
olculdu (1044px): .bolum'un computed grid-template-columns'u "454px
454px" cikiyordu, oyle ki "Öne Çıkan Yazı" ilk sutuna (454px) hapsolup
"Tüm Yazılar" ise :last-child kuraliyla iki sutuna birden (grid-column:
1/-1) yayiliyor, iki blok farkli sol kenar/genislikte bitiyordu
(2026-09-16, Gürkan'ın "kayıyor" bulgusu). Duzeltme: ayni kapsamda
.bolum--tek'i tekrar 1fr'e sabitlemek — .bolum--tek zaten SONRA (760px
altinda) baska bir .bolum kuraliyla 1fr'e donuyordu (asagida), bu yuzden
sorun yalniz bu araliktaydi. */
.bolum--tek { grid-template-columns: 1fr; }
.alt-bolum-icerik { grid-template-columns: 1fr 1.2fr; }
.alt-bolum-icerik > :nth-child(2), .alt-bolum-icerik > :last-child { display: none; }
/* masaüstünde .bildirim-form 3. sütuna (grid-column:3) sabitleniyor
(yukarıda, süvari grid akışından çıkarılırken eklendi) — burada şablon
2 sütuna indiği için o kural aynen kalırsa 2. sütun boş bırakılıp
bildirim-form'un implicit bir 3. sütun açmasına yol açardı.
grid-row:auto DA GEREKLI (2026-09-08 eklendi) — masaustu grid-row:1
(::before ile AYNI hucreyi PAYLASMASI icin, yukarida) burada miras
kalirsa alinti-blok (auto-yerlesim, ayni satirda col1) ile CAKISMAYI
onlemek icin ikisinden biri BASKA bir satira itilir — ::before zaten
bu genislikte display:none oldugundan ayni hucreyi paylasmaya GEREK
YOK, auto'ya donup normal (col1/col2 yan yana) yerlesime birakiliyor. */
.alt-bolum-icerik > .bildirim-form { grid-column: 2; grid-row: auto; }
/* Ton bloğu (.alt-bolum::before, 6. madde) KAPATILIYOR (2026-09-04,
altıncı tur — Gürkan'ın raporu: 390px'te blok şeridin ORTASINDAN
geçen dikey bir bant halinde asılı kalıyor, alıntı metninin üstünü
kesiyordu). ÖLÇÜLEN SEBEP: ::before mutlak konumu kilim'in
right:0/width:18%'ine göre sabitlenmişti (bkz. yukarıdaki köşe notu)
ama kilim ve süvari TAM BU NOKTADA (1100px) display:none oluyor —
::before onlardan bağımsız render olmaya devam ediyor, artık hiçbir
çok-sütunlu düzene dayanmayan bir bant olarak ortada kalıyor. Ölçüldü
(scratchpad/tint-narrow.mjs): 390-1100px arası TÜMÜNDE hem .alinti hem
.bildirim-form ile çakışıyordu. ÇÖZÜM: kapatmak (Gürkan'ın önerisi) —
ton farkı "sol bölüm / sağ bölüm" ayrımına ait bir kavram; bu genişlik
altında .alt-bolum zaten tek sütuna (760px altı) veya süvari/kilimsiz
2 sütuna (1100-760 arası) yığılıyor, "sol/sağ" ayrımı anlamını
yitiriyor — suvari/kilim'in AYNI NOKTADA kapanmasıyla tutarlı. */
.alt-bolum-icerik::before { display: none; }
}
/* Kasıtlı kırılma noktası #1 — sağ katman kaybolur. DEĞİŞTİ (2026-09-01,
tur5, bağımsız denetçi düzeltmesi): eski @media(max-width:900px) bloğu
burada TAMAMEN KALDIRILDI — sol/metin/logo/height/.display font-size'ı
950px'te kilitlenen --t'nin ÜZERİNE, 900px'te ANİ bir ×100/72.6 (veya sabit
515px) sıçramasıyla yeniden dağıtıyordu (ölçülen: height 380→515 +%35, sol
şerit %10.00→%33.06, logo konteyner 237px→310px). Bu geometri artık --v
(bkz. .hero --v köşe notu) ile 950px'ten 680px'e SÜREKLİ akıyor — hiçbir
@media kuralı gerekmiyor, tüm sol/metin/logo/sağ/height/.display kuralları
yukarıda zaten --t VE --v'yi birlikte taşıyor.
Tek kalan iş: 680px'in ALTINDA sağ katman zaten geometrik olarak sıfır
genişlikte (left:100%, right:0) ve opacity:0 — görsel olarak hiçbir fark
yaratmadan, yalnız gereksiz bir ![]()
node'unu boyama/layout'tan çıkarmak
için display:none. Bu KAPATMA, KUSUR1/KUSUR2'nin çözümü değil, zaten
çözülmüş bir durumun temizliği (görsel etkisi sıfır, Playwright ile
680/679px screenshot farkı yok — bkz. iş raporu). */
@media (max-width: 680px) {
.hero-katman--sag { display: none; }
}
/* Nav sarma düzeltmesi, 951–1073px (2026-09-01) — ÖLÇÜM: .nav'ın doğal
(max-content) genişliği sabit 554.84px (6 link metni 394.84px + 5×32px
gap 160px). Track genişliği (.ustbar grid'inin 1fr sütunu) viewport
daraldıkça küçülüyor; Playwright bisect (scratchpad/nav/bisect.js) ile
tam sınır ölçüldü: 1073px'te hâlâ sarıyor, 1074px'te sarmıyor — görev
tanımındaki "951–1050" tahminiydi, ölçülen gerçek üst sınır 1073px.
Bant içindeki en dar track ~521.2px'te kilitleniyor (951–1040 arası
sabit), en kötü açık 554.84-521.2=33.6px. 950px altında zaten .nav
display:none (aşağıdaki blok) — hamburger eşiğine dokunmadan çözüldü.
Çözüm: gap 32px→16px (5×16px tasarruf = 80px) + white-space:nowrap.
Yeni gereken genişlik 394.84+80=474.84px, en dar track 521.2px'in
~46px altında — güvenli pay. 1080px sınırı 1073'ün üzerine 7px pay
(950 eşiğindeki 6px payla aynı mantık); 1074-1080 aralığında kural
zaten sarmayan nav'ı yalnızca biraz sıkıştırır, zararsız.
Yan fayda: aktif linkin alt çizgisinin yalnız ikinci kelimenin altında
görünmesi (.nav a flex item olarak blockified olduğundan, iki satıra
sarınca border-bottom kutunun en altına, yani son satırın altına
düşüyordu) ayrı bir kural gerekmeden çözülüyor — sarma yoksa border
zaten tek satırın tamamının altında.
Aynı ölçümde ikinci bir sarma bulundu: "Üye ol →" CTA butonu ("ÜYE OL"
görev tanımında da örnek verilmişti) 951–983px arasında sarıyor (bisect,
scratchpad/nav/bisect-buton2.js) — doğal genişliği sabit 122.19px,
.ustbar-sag track'i 951px'te 105.86px'e düşüyor (en kötü açık 16.33px).
Aynı mekanizma: grid'in auto sütunları (marka, ustbar-sag) yer yetmeyince
min-content'e sıkışıyor. Çözüm aynı desen: nowrap, bu kez track'i büyütecek
gap kısma değil (buton tek kelime grubu, gap zaten küçük calc(--u*1.5)
=12px) — nowrap tek başına yeterli mi diye taşma testi yapıldı (aşağıya
bkz. doğrulama), 951'e kadar scrollWidth=clientWidth kaldı, ek küçültme
gerekmedi. */
@media (max-width: 1080px) {
.nav { gap: calc(var(--u) * 2); }
.nav a { white-space: nowrap; }
.ustbar .buton { white-space: nowrap; }
}
/* Hamburger eşiği 760px→950px (2026-09-01, yatay kaydırma düzeltmesi) —
eşik TAHMİN değil ÖLÇÜM: Playwright ile clientWidth 1100'den 935'e kadar
1px adımlarla tarandı (scratchpad/tur3/measure-nav.js, bisect script).
.nav'ın içeriği (6 link + 32px gap, grid-template-columns:auto 1fr auto
içindeki 1fr track min-width:auto varsayılanıyla max-content'e kilitleniyor)
documentElement.scrollWidth'i clientWidth=944'te SABİT 945px'e kilitliyor —
yani ustbar 945px'in altına ASLA sığmıyor (font boyutu responsive değil,
.nav a sabit .75rem). scrollWidth>clientWidth tam olarak clientWidth<=944'te
true oluyordu (945'te false, 944'te true — kanıtlanmış tam sınır). Eski
760px eşiği bu nedenle 184px çok geçti: 945-761 aralığının TAMAMI yatay
kaydırmayla render ediliyordu (900/860/768 dahil, kullanıcının bildirdiği
üç genişlik de bu aralıkta). Yeni eşik 950px — ölçülen 944 sınırının
üzerine küçük bir güvenlik payı (tarayıcılar arası alt-piksel/font-hinting
farkına karşı 6px). Yalnız nav/hamburger'a özgü kurallar buraya taşındı;
hero-DIŞI diğer bölümler (.bolum, .alt-bolum, .video-izgara, .altbar,
.form) kasıtlı olarak AŞAĞIDAKİ 760px bloğunda bırakıldı — bu iş yalnız
üst bar taşmasını kapsıyor, onaysız başka bileşen taşınmadı. */
@media (max-width: 950px) {
.nav { display: none; }
.marka .runik--izgara { display: none; }
.menu-dugme { display: block; }
.ustbar { grid-template-columns: 1fr auto; position: relative; }
.ustbar .buton { display: none; }
.nav.acik {
display: flex; flex-direction: column;
position: absolute; top: 100%; left: 0; right: 0;
background: var(--kagit-acik);
padding: calc(var(--u) * 3) calc(var(--u) * 4);
border-bottom: 1px solid var(--tas);
gap: calc(var(--u) * 2);
z-index: 50;
}
}
@media (max-width: 760px) {
.bolum, .alt-bolum-icerik { grid-template-columns: 1fr; gap: calc(var(--u) * 5); }
.alt-bolum-icerik > .bildirim-form { grid-column: 1; grid-row: auto; }
.one-cikan { grid-template-columns: 1fr; }
/* Tek sutuna yigilinca gorsel/icerik artik yan yana degil ust-alt; yukarida
eklenen height:100% gecersiz kapsayiciya (auto yukseklik) dusup img'i
kendi ham en-boy oranina birakiyordu (olculdu: 600px'te 520x579, eski
520x693 3:4 oranindan sapiyor) — mobil crop davranisi eskiden oldugu gibi
3/4'e geri donuyor, bu iki sutunlu duzenin disinda kalan bir regresyon. */
.one-cikan .gorsel--boy { aspect-ratio: 3 / 4; height: auto; }
.altbar { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: calc(var(--u) * 3); }
.form { flex-direction: column; }
.form input { border-right: 1px solid var(--tas); }
}
/* Kasıtlı kırılma noktası #2 — mobil: her iki görsel de kaybolur, geriye
ortalanmış logo + başlık + gövde + HAKKIMDA kalır (şartname madde 2, net
ifade: "her iki görsel de kaybolur"). ÖNEMLİ: eski @media(max-width:760px)
bloğu yalnız SAĞI gizliyordu, SOL ("aslan kabartması") her zaman %100
genişlik + 46vh banda olarak GÖRÜNÜR kalıyordu (before-390.png ile
doğrulandı) — bu şartnameye aykırıydı, burada düzeltildi: sol da display:
none. Kağıt zemin ve tane dokusu (.hero::before, .hero'nun kendi
background:var(--kagit)'i) korunuyor, hero boş beyaz kutu gibi durmuyor.
Eşik 760px→600px taşındı (2026-08-31 tasarımında mobil-yığın ve
sağ-katman-gizleme AYNI noktada oluyordu; onaylı yön bunları İKİ AYRI
kırılma noktasına ayırmayı istiyor — 600-950px arası artık "tablet"
katmanı: sağ katman --v ile 950px'ten 680px'e SÜREKLİ soluyup küçülüyor
(bkz. .hero --v köşe notu), 680-600px arası sağ zaten görünmez/genişliği
sıfır (@media max-width:680px, .hero-katman--sag display:none), sol+metin+
logo yan yana duruyor; yalnız 600px altında tam mobil yığın. nav/menu-dugme/
ustbar ve .bolum/.alt-bolum gibi hero-DIŞI kurallar kasıtlı olarak 760px'te
bırakıldı, taşınmadı — hero'nun DIŞINDaki bir bileşeni onaysız değiştirmemek
için.
.display font-size burada SABİT rem'e dönüyor — konteyner artık %100
genişlik olduğundan vw ölçeği (680px altında zaten ×1.5723 büyütülmüş
katsayı, bkz. .display köşe notu) anlamsız derecede büyürdü; 3.25rem değeri, TEK akışkan ölçek
düzeltmesinden ÖNCE de bu genişliklerde (768-390px) zaten fiilen kullanılan
ve taşmasız çalıştığı ölçülen (before-data.json) değerle AYNI — mobilde
metin boyutu davranışı korunuyor, yalnız masaüstü/tablet aralığı ve sol
görselin gizlenmesi düzeltildi. */
@media (max-width: 600px) {
.hero {
height: auto;
display: flex; flex-direction: column;
overflow: visible;
}
.hero-katman--sol { display: none; }
.hero-katman--sag { display: none; }
.hero-metin {
position: static; width: 100%;
padding: calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 4);
order: 2;
}
.hero-logo {
position: static; width: 100%; height: auto;
padding: calc(var(--u) * 2) 0 calc(var(--u) * 4);
order: 3;
/* transform:none — masaüstü katmanının translateY(-6%) kaydırması
burada anlamsız (statik akışta "hero yüksekliği" kavramı yok) ve
hero-metin'in üstüne bindirir; mobilde logo doğal akışta kalmalı. */
transform: none;
}
.display { font-size: 3.25rem; }
/* --yazilar-liste-gorsel'in dar ekran karsiligi (yukaridaki .yazi-liste-genis
kuralindaki AYNI degiskenin ikinci tanimi — ayri bir mekanizma degil):
140px, 600px altinda metin sutununu asiri daraltir; 96px'te gorsel hala
kabartmayi secilir birakirken metne yeterli genislik kalir. Ana sayfanin
--anasayfa-liste-gorsel'i (56px) icin BURADA karsilik YOK — ana sayfa
orijinal davranisinda hicbir viewport'ta degismiyordu, bu tur o davranisi
aynen geri getiriyor. */
.yazi-liste-genis { --yazilar-liste-gorsel: 96px; }
/* Ilgili yazi onerileri (yazi detay sayfasi) — TEK KIRILMA NOKTASI.
600px altinda 2 sutun kart basina ~276px'in altina duser ve Anton
uppercase baslik kelime kirar; tek sutuna geciyor, gorsel yine
USTTE ve 3/2 oraninda kaliyor (sadece grid-template-columns
degisiyor, kart ic yapisina dokunulmuyor). Eski .yazi-liste-oneri
satiri (--yazilar-liste-gorsel: 72px) bu turda OLU KALDIGI icin
silindi; .yazi-liste-genis'in ustteki 96px'i /yazilar/ sayfasi icin
oldugu gibi duruyor. */
.oneri-izgara { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Hakkimda sayfasi — sayfaya OZEL duzen (2026-09-15, 2. tur) ----
ONCEKI ISKELET REDDEDILDI: sayfa kabuğu .yazi'ydi (max-width 88ch + orta
hizalama), yani gorunum bir BLOG YAZISI sablonuydu. Bu blok o iskeletin
YERINE geciyor. Ustteki hicbir kural (satir 1-1774) degistirilmedi, yeni
renk/font degiskeni tanimlanmadi; kullanilanlar yalniz mevcut token'lar.
Yapi (markup: hakkimda.njk):
ACILIS tam genislik — tez + zeminde soluk insa cizimi
01 GORSEL SOL | METIN SAG (gorsel sutunu sticky)
02 METIN SOL | GORSEL SAG (taraflar yer degistirir, sticky sagda)
CIKIS tam genislik — /yazilar/ bagi
Govde tipografisi hala GLOBAL .yazi-govde (satir 1318) ve blockquote
kurallari — KOPYALANMADI; yalniz sayfa kabuğu .yazi'dan koparildi. */
/* ===================== ACILIS ===================== */
.hakkimda-acilis {
position: relative;
display: flex;
align-items: center;
min-height: min(56vh, 460px);
padding: calc(var(--u) * 12) calc(var(--u) * 5);
border-bottom: 1px solid var(--tas);
/* Amblem kasitli olarak kutudan buyuk/tasar; kirpan yer burasi.
STICKY ILE ILGISI YOK: sticky sutunlar bu bolumun KARDESLERINDE
(.hakkimda-bolum) duruyor, bu overflow onlarin ebeveyn zincirinde
DEGIL. */
overflow: hidden;
}
/* Insa cizimi ZEMINDE: buyuk, soluk, metnin altinda. Ana sayfa hero'sunun
katman dili ama TEK katman — "ayni enerji, daha sade" kisiti. */
.hakkimda-acilis-isaret {
position: absolute;
top: 50%;
right: calc(var(--u) * 2);
transform: translateY(-50%);
width: min(520px, 44%);
opacity: .2;
pointer-events: none;
z-index: 0;
}
.hakkimda-acilis-isaret img { width: 100%; height: auto; }
.hakkimda-acilis-metin {
position: relative;
z-index: 1;
/* 54% — amblemin 44%'lik sag sutununa girmez, tez her zaman net zeminde. */
max-width: min(54%, 760px);
}
/* .display'in GLOBAL clamp'i var(--v)'yi kullanir ve --v YALNIZ .hero
kuralinin icinde tanimlidir (satir 487). .hero disinda var(--v)
cozumlenemez, font-size bildirimi gecersiz olur ve baslik govde
puntosuna duser. Bu yuzden buradaki .display'e DEGISKENSIZ kendi
clamp'i verildi. Global .display kuralina DOKUNULMADI (ana sayfa
etkilenmez); ayni ustunluk (0,2,0 > 0,1,0) @media(max-width:600px)
icindeki global ".display { font-size: 3.25rem }" icin de gecerli,
o yuzden dar ekran degeri asagida ayrica veriliyor. */
.hakkimda-acilis .display { font-size: clamp(2.25rem, 5.6vw, 4.5rem); }
.hakkimda-acilis .cizgi { margin: calc(var(--u) * 3) 0 calc(var(--u) * 2); }
.hakkimda-tez-alt {
font-family: var(--font-baslik);
font-weight: 400;
font-size: clamp(1.25rem, 2.8vw, 2rem);
/* 1.30 — .h2/.h3/.yazi-baslik'te kanitlanmis Turkce buyuk harf aksani
payi (bkz. .h2 kose notu). */
line-height: 1.30;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--koyu-toprak);
margin: 0;
}
/* ===================== BOLUM — SPLIT ===================== */
/* Oran 5fr/6fr: gorsel sutunu metinden dar (gorev kisiti). minmax(0, …)
zorunlu — cip fr sutunlari min-content tabanlidir ve uzun mono
kelimelerde izgarayi sisirip yatay tasma uretir. */
.hakkimda-bolum {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: calc(var(--u) * 8);
align-items: start;
padding: calc(var(--u) * 11) calc(var(--u) * 5);
border-bottom: 1px solid var(--tas);
/* Zemin ritmi: 01 --kagit-acik + gren (.bolum'un AYNI kalibi), 02 seffaf
(body'nin --kagit zemini ve greni gorunur), CIKIS yine --kagit-acik. */
background-color: var(--kagit-acik);
background-image: url("data:image/svg+xml;utf8,\
");
background-blend-mode: multiply;
background-size: 140px 140px;
}
/* 02 — taraflar yer degistirir. background OPAK BIR RENGE DEGIL, seffafa
aliniyor: opak --kagit verilseydi body'nin gren dokusunu ORTERDI ve
bolum duz bir plaka gibi gorunurdu. */
.hakkimda-bolum--ters {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
background-color: transparent;
background-image: none;
}
/* Metin sutunu — olcu kisiti. 58ch bu elementin KENDI puntosunda
(body 15px mono) ~522px eder; icindeki .yazi-govde 16px'te calistigi
icin gercek satir olcusu ~54 karakter olur, yani hedeflenen 50-60ch
araliginda. Sutunun kendisi 6fr oldugu icin artan bosluk kompozisyona
nefes olarak kaliyor; cift, justify-self ile sayfanin ortasina dogru
toplaniyor (01: metin sola yaslanir, gorsel saga; 02: tersi). */
.hakkimda-metin {
max-width: 58ch;
justify-self: start;
}
.hakkimda-bolum--ters .hakkimda-metin { justify-self: end; }
/* .ustyazi'nin global 16px alt boslugu + .cizgi'nin 8px'i ust uste binince
baslik kumesi dagiliyordu; yalniz bu sayfada sikilastirildi. */
.hakkimda-metin > .ustyazi { margin-bottom: 0; }
.hakkimda-metin > .cizgi { margin: var(--u) 0 calc(var(--u) * 4); }
.hakkimda-metin .yazi-govde > p:last-child { margin-bottom: 0; }
/* ---- Sticky gorsel sutunu ----
.ustbar SABIT DEGIL: tum stylesheet'te tek bir position:sticky/fixed
bildirimi yok (grep ile dogrulandi), ust bar sayfayla birlikte yukari
kayar ve ilk ekrandan sonra gorunmez. Bu yuzden ust ofset header
yuksekligini TASIMIYOR: tasisaydi sutun scroll boyunca olmayan bir
header'in payi kadar asagida asili kalirdi. .ustbar'in gercek yuksekligi
bu yuzden BELIRLEYICI DEGIL ve tarayicida olculmedi (CSS'ten okunan
bilesenler: 2x16px dolgu + 1px alt cizgi + satirin en uzun ogesi —
.marka'daki 5 satirlik runik izgara ya da .buton). 40px yalnizca
nefes payi.
OVERFLOW ZINCIRI (gorev kisiti): sticky ogenin ustundeki zincir
.hakkimda-bolum -> article.hakkimda -> main -> body -> html. Bu blokta
bunlarin HICBIRINE overflow verilmedi (overflow:hidden yalniz KARDES
.hakkimda-acilis'te ve o zincirde degil). body'de overflow-x:hidden
VAR (satir 151, degistirilmedi): CSS overflow yayilimina gore html
gorunur oldugunda body'nin overflow'u VIEWPORT'a tasinir ve body scroll
konteyneri OLMAZ, yani sticky calisir. Bu projede Playwright kurulu
olmadigi icin tarayicida DOGRULANMADI.
align-self:start ZORUNLU: grid varsayilani stretch, sutunu satirin tam
boyuna gerer; gerilen bir oge zaten en basta bittigi icin sticky'nin
kayacak payi kalmaz. */
.hakkimda-sahne {
position: sticky;
top: calc(var(--u) * 5);
align-self: start;
width: 100%;
max-width: 600px;
justify-self: end;
}
.hakkimda-bolum--ters .hakkimda-sahne { justify-self: start; }
/* ---- Kolaj ----
Metin sutunu sakin kalir, katmanli arsiv dili YALNIZ gorsel sutununda.
Bolum basina EN FAZLA 3 katman (1 ana ozne + 2 vurgu) — ana ozne her
zaman ustte ve net. Negatif ofsetler bolumun 40px'lik yan dolgusunun
icinde kaliyor, yatay tasma uretmiyorlar. */
.hakkimda-kolaj { position: relative; }
.hakkimda-kat {
position: absolute;
height: auto;
pointer-events: none;
}
/* 01 — ana ozne: MUHUR (2026-09-15, 4. tur). Onceki hal: ana ozne
kabartma-aslan.jpg (%84), muhur sag alt kosede %22'lik on katman.
ASLAN SAHNEDEN CIKARILDI, doku katmani olarak da tutulmadi. Uc sebep,
ucu de olculdu:
1) ORTUSME=0 KISITI ALAN BIRAKMIYOR. Ana ozne bu bolumde de 02'deki
levha agirligindaysa (asagida: %80 = 1280px'te 413px) sutunun
516px'inden geriye 103px'lik bir bant kaliyor. 1000x1114'luk bir
fotografi 103px'e sokmak onu ~93px genisliginde bir seride
ceviriyor; o olcude aslan bir figur olarak degil, tanimsiz bir gri
leke olarak okunuyor. Daha genis verilseydi muhurle ortusurdu.
2) FREKANS CAKISMASI. Muhur, ic bosluklari (counter) ince olan bir
VEKTOR amblem; aslan ise ayni tonal bantta calisan yuksek detayli
bir TAS FOTOGRAFI. Arkaya alinsa muhur diskinin ortuemedigi tek yer
koselerdir — yani geriye aslanin yuzu/yelesi degil, kirpilmis
parcalari kalirdi.
3) ERISILEBILIRLIK. Aslanin tasidigi anlamli alt metni ("Tasa oyulmus
aslan kabartmasi") vardi; onu aria-hidden bir dokuya dusurmek
gorseli sessizce anlamsizlastirirdi. Cikarmak durustu.
LEVHA YOK (02'den bilincli sapma): 02'deki .hakkimda-levha bir DIKIS
cozumudur — hakkimda-oyma.png'nin kendi krem zemini var. muhur.svg'nin
zemini SEFFAF ve gomulu krem (#E9E2D6) yalniz diskin ICINDEKI amblem
sekillerinde; SVG'nin dis konturu bastan sona #C0392B dolu disk, yani
krem hicbir yerde sayfa zeminine DEGMIYOR — dikecek dikis yok.
Ustelik bu bolumun zemini duz --kagit-acik degil, --kagit-acik + gren
(multiply); altina duz --kagit-acik bir levha konsaydi grensiz, daha
acik bir DIKDORTGEN olarak gorunur, yani olmayan bir dikise karsilik
YENI bir dikis uretirdi. Diskin kendi kenari zaten net bir sinir.
BU IDDIA OLCULDU, goz karari degil (1280px ekran goruntusu, piksel
ornekleme):
- Diskin cevresi 72 acida tarandi: r=183px'te 72/72 piksel kirmizi,
r=191px'te 0/72. Yani disk her yonde KAPALI bir kirmizi sinir;
gomulu krem hicbir acida sayfa zeminine degmiyor.
- Kenar gecisi 1 piksel: (226,215,202) -> (220,209,196) -> #C0392B.
Hale/sacak yok.
- Gomulu krem render'da tam #E9E2D6 = (233,226,214) cikiyor (600
ornekten 459'u birebir bu deger). Bolumun GERCEK grenli zemini ise
(222.7, 212.2, 199.0) (3029 ornek ortalamasi; nominal token
#ebe0d2'den gren yuzunden ~12 birim koyu). Iki degerin farki
+10/+14/+15, kontrast orani 1.13:1 — komsu olsalardi soluk bir
ton basamagi gorunurdu, ama YUKARIDAKI tarama gosterdi ki
hicbir yerde komsu degiller.
- Kirmizi disk / gercek zemin kontrasti: 3.73:1 (nominal token
#ebe0d2 uzerinden hesap 4.29 verir; gren zemini koyulttugu icin
gercek deger daha dusuk). Sayfanin en baskin lekesi bu.
Boyut/hiza: %80, saga yaslanmis. %80 = 1280px'te 413px cap; alani
pi*206.5^2 ~ 134k px-kare, 02'nin levha ICI gorseli 396x297 = 118k
px-kare — ayni mertebede, iki bolum birbirini dengeliyor. Saga yaslama
02'nin aynasi: orada levha kendi sutununda metne DOGRU (sola) capali
(margin: 0 auto 0 0), burada metin sagda oldugu icin saga capali.
Ortalama denenmedi: ortalanirsa iki yanda 51'er px kalir, kilim
seridi de o bandin icine sikisir ve "kenardan sizan katman" dili
kaybolurdu. */
.hakkimda-ana {
position: relative;
z-index: 2;
width: 80%;
margin-left: auto;
}
.hakkimda-ana img { width: 100%; height: auto; }
/* Arka katman — kilim blogu. KORUNDU ama GERI CEKILDI, 02'deki
.hakkimda-kat--serit kalibinin aynadaki karsiligi olsun diye:
orada serit dis kenardan (sag ust) sizip asagi dogru sonumleniyor,
burada blok dis kenardan (sol ust) sizip ice dogru sonumleniyor.
UC DEGISIKLIK:
1) BOYUT %40 -> %22 (1280px'te 206px -> 113px kenar). Eski %40, ana
ozne %80'e cikinca ortusmeyi kaciniImaz yapiyordu; %22'de
sag kenar 1280px'te 97.6px, muhurun sol kenari 143.3px — arada
45.7px bosluk, ORTUSME 0 px-kare (olculdu).
2) KENARDAN DISARI: top/left 0/8% -> -4u/-7u. Katman artik kolajin
kutusundan tasiyor, yani "arsivden sizan doku" olarak okunuyor;
kutuya hizali dursaydi ikinci bir kart gibi dururdu.
NEDEN -5u DEGIL -7u (olculdu): -5u = -40px, bolumun yan dolgusunun
TAM kendisi; 1280 ve 1100px'te katmanin sol kenari x=0'a, yani
sayfa kenarinin tam ustune oturuyordu. Bu, onceki turda
.hakkimda-kat--kilim icin yazilan kusurun aynisi: "ne iceride ne
disarida duran bu hal kazara gorunuyor". -7u (-56px) ile katman
1280/1100'de x=-16 olup gercekten sayfa disina tasiyor.
Yatay kaydirma uretmiyor: body'de overflow-x:hidden var (satir 151)
ve olcumde alti genislikte de scrollWidth = innerWidth kaldi.
3) MASKE + OPAKLIK — OLCUMLE AYARLANDI. kilim-blok.svg'nin en koyu
ogesi #151514 (ic eskenar dortgenler + 3px'lik dis cerceve); bu
bolumun gercek grenli zemininde (olculdu: rgb 222.7,212.2,199.0)
12.52:1 kontrast verir — maskesiz haliyle sayfanin EN yuksek
kontrastli lekesi, ana oznenin (3.73:1) uc katindan fazlasi olurdu.
Bu, onceki turda .hakkimda-kat--kilim icin bulunan kusurun aynisi.
ILK DENEME .55 YETMEDI: o degerde katmanin en koyu RENDER pikseli
(105,101,95) ve kontrasti 3.97:1 cikti — kil payi da olsa ana
oznenin 3.73'unun USTUNDE, yani hiyerarsi hala tersti. .45'te ayni
piksel (124,118,112) ve kontrast 3.07:1 OLCULDU: muhurun ALTINDA,
yani en baskin leke artik ana ozne.
Maske ic kenari eritiyor ki cerceve cizgisi "kutu" olarak
kapanmasin; olcumde katman x=95'te zeminden ayirt edilemez hale
geliyor (muhurun sol kenari 143px), yani sonumlenme ana ozneye
varmadan tamamlaniyor. */
.hakkimda-kat--kilimblok {
z-index: 1;
width: 22%;
top: calc(var(--u) * -4);
left: calc(var(--u) * -7);
opacity: .45;
-webkit-mask-image: linear-gradient(to right, #000 38%, transparent 100%);
mask-image: linear-gradient(to right, #000 38%, transparent 100%);
}
/* 02 — TEK GORSEL (2026-09-15, 5. tur). Onceki hal: ana ozne
.hakkimda-levha (cerceve + altyazi) + iki vurgu katmani
(.hakkimda-kat--serit = sutun.jpg, .hakkimda-kat--kilim = kilim-2.svg).
Ucu de KALDIRILDI, kurallariyla birlikte silindi — sahnede yalniz oyma
gorseli kaldi. Altyazinin tasidigi fikir metnin son paragrafina tasindi.
(Yukaridaki 01 kose notlarinda bu uc ogeye yapilan atiflar TARIHSELDIR:
.hakkimda-ana'nin "levha yok" gerekcesi ve .hakkimda-kat--kilimblok'un
"02'deki serit katmaninin aynasi" cumlesi artik karsiliksiz; 01'in
kurallari bilincli olarak DEGISTIRILMEDI.)
LEVHA NEDEN KALKABILDI (eski kural bir DIKIS cozumuydu): eski
hakkimda-oyma.png kendi duz krem zeminini tasiyordu (kose pikselleri
#F0E8DE / #F3EBDF), bu bolumun zemini ise --kagit (#dcceba); gorsel
dogrudan zemine konsa kanal basina 20-28'lik dikdortgen bir dikis
gorunurdu ve levha bu farki gizliyordu. Cerceve kalkinca dikis
KAYNAKTAN cozuldu: yeni hakkimda-oyma-seffaf.png/.webp RGBA'dir, zemini
DORT KENARDAN bagli bilesen taramasiyla alfaya alindi (piksellerin
%64.98'i tam seffaf, %0.55'i kenar yumusatma rampasi; rampadaki krem
bulasmasi matte geri hesabiyla temizlendi). Yeniden ORNEKLENMEDI,
1200x1200 kaldi; murekkep (lum<140) sinirlayici kutusu islem oncesi ve
sonrasi ayni: satir 234..999, sutun 66..1131. Kenara BAGLI OLMAYAN
krem/acik ic alanlar (574 ayri bilesen, 1266 px) tamamen opak kaldi —
global renk degistirme yapilmadi.
Genislik %86: eski levhanin DIS kutusuyla ayni, yani sutunun tasidigi
gorsel agirlik degismedi (1280px'te 516px'lik sutunda 444px).
KIRPMA KORUNDU (aspect-ratio 4/3 + cover + center 57%), ama GEREKCESI
DEGISTI: artik dikis gizlemek icin degil, OLU ALAN icin. Dosyada
murekkep dikeyde yalniz 234..999 satirlari arasinda; kirpma
kaldirilsaydi kutunun yuksekliginin %36'si (ust 234px + alt 200px)
gorunmez seffaf bosluk olarak layout'ta yer tutardi: cizim ayni kutu
genisliginde optik olarak kuculur, sticky sutunun dikey ritmi de
olmayan bir dolgu kadar kayardi. 1200 genislikte kutu 900px olur, 300px
kirpilir; %57 dikey hizalama ustten 171px, alttan 129px atar, yani
KOMPOZISYONDAN TEK PIKSEL KESILMEZ (171 < 234, 129 < 200). Kalan seffaf
marj ust 63 / alt 71 / sol 66 / sag 68 — dort yandan ayni mertebede.
Daha dar bir kirpma (ornegin murekkebin kendi 1066/766 orani)
secilmedi: nefes payini sifirlar, kompozisyonu kutu kenarina
yapistirirdi. */
.hakkimda-oyma {
position: relative;
z-index: 2;
width: 86%;
margin: 0 auto 0 0;
}
.hakkimda-oyma img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center 57%;
}
/* ===================== CIKIS ===================== */
.hakkimda-cikis {
padding: calc(var(--u) * 8) calc(var(--u) * 5) calc(var(--u) * 10);
background-color: var(--kagit-acik);
background-image: url("data:image/svg+xml;utf8,\
");
background-blend-mode: multiply;
background-size: 140px 140px;
}
/* ===================== RESPONSIVE =====================
Mevcut kirilma noktalarina uyuluyor: 1100 / 950 / 760 / 600. */
@media (max-width: 1100px) {
/* SPLIT COKUYOR: tek sutun, gorsel HER IKI bolumde de metnin USTUNDE,
sticky KAPALI (tek sutunda yapisacak yan yok). 02'nin DOM sirasi
metin-once oldugu icin gorsel sahnesi order:-1 ile one aliniyor;
DOM/okuma sirasi bozulmuyor, yalniz gorsel yer degistiriyor. */
.hakkimda-bolum,
.hakkimda-bolum--ters {
grid-template-columns: minmax(0, 1fr);
gap: calc(var(--u) * 5);
padding: calc(var(--u) * 9) calc(var(--u) * 5);
}
.hakkimda-sahne {
position: static;
justify-self: start;
max-width: 520px;
}
.hakkimda-bolum--ters .hakkimda-sahne { order: -1; justify-self: start; }
.hakkimda-metin,
.hakkimda-bolum--ters .hakkimda-metin { justify-self: start; max-width: 62ch; }
.hakkimda-acilis-metin { max-width: min(62%, 760px); }
}
@media (max-width: 950px) {
/* Kolaj seyreliyor: her bolumde EN BUYUK ikincil katman gidiyor, ana
ozne + tek vurgu kaliyor; ana ozne bosalan genisligi aliyor. */
.hakkimda-kat--kilimblok { display: none; }
.hakkimda-ana { width: 100%; margin-left: 0; }
/* Bu bantta bolum dolgusu 5u -> 4u'ya iniyor, oyma gorseli %86 -> %100'e
cikiyor. Eskiden burada .hakkimda-kat--kilim'in ofseti de duzeltiliyordu
(katman 860px'te tam x=0'a oturuyordu); katman kaldirildigi icin o kural
da silindi. */
.hakkimda-oyma { width: 100%; }
.hakkimda-acilis { padding: calc(var(--u) * 10) calc(var(--u) * 4); }
.hakkimda-bolum,
.hakkimda-bolum--ters { padding: calc(var(--u) * 8) calc(var(--u) * 4); }
.hakkimda-cikis { padding: calc(var(--u) * 7) calc(var(--u) * 4) calc(var(--u) * 9); }
}
@media (max-width: 760px) {
/* Kalan vurgu katmanlari da kapaniyor — ana sayfa 600px altinda hero
katmanlarini kapatiyor, ayni mantik: dar ekranda ana ozne tek basina
daha net. */
.hakkimda-kat { display: none; }
.hakkimda-sahne { max-width: none; }
.hakkimda-acilis-isaret { width: min(360px, 60%); opacity: .16; }
.hakkimda-acilis-metin { max-width: 100%; }
}
@media (max-width: 600px) {
.hakkimda-acilis {
min-height: 0;
padding: calc(var(--u) * 7) calc(var(--u) * 3) calc(var(--u) * 8);
}
/* Global @media(max-width:600px) icindeki ".display{font-size:3.25rem}"
bu kurali EZEMEZ (0,1,0 < 0,2,0); deger yine de acikca veriliyor ki
dar ekranda 5.6vw'nin alt clamp'ine (36px) takilmasin. */
.hakkimda-acilis .display { font-size: 2.125rem; }
.hakkimda-tez-alt { font-size: 1.25rem; }
.hakkimda-acilis-isaret { width: 78%; right: calc(var(--u) * -3); opacity: .14; }
.hakkimda-bolum,
.hakkimda-bolum--ters { padding: calc(var(--u) * 6) calc(var(--u) * 3); }
.hakkimda-cikis { padding: calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 8); }
.hakkimda-metin,
.hakkimda-bolum--ters .hakkimda-metin { max-width: none; }
}