/* ═══════════════════════════════════════════════════════════════════ ADIMLAR · yapışkan başlık + kayan numaralı kartlar ------------------------------------------------------------------- Referans (Beyefendi, 29 Ağu 2026): discovermarket.videinfra.com → section.ecosystem. Oradan ALINAN düzen mantığı: · sağda tek dev cümle, kartlar geçerken YERİNDE DURUYOR (sticky) · solda geniş, alçak, yuvarlak kartlar; başlık üstte, dev rakam altta · dizinin sonunda dolu renkli tek CTA kartı ALINMAYAN — ve neden: · .card__overlay (beyaz, inset 2px, opacity 0→1): masaüstünde GÖRÜNMEZ. Kartın ::before'u zaten opak beyaz; üstüne beyaz bindirmek hiçbir şey değiştirmiyor. Dört DOM düğümü ve dört kaydırma dinleyicisi bedavaya taşınmış olurdu. · padding-top yüzdesiyle en-boy hilesi (.card__sizer, 346.4px): aspect-ratio varken gereksiz bir kutu. ÖLÇÜ TEK KAYNAKTAN: başlık da rakam da ortak .d2 ölçeğidir. Bu dosya font-size YAZMAZ — yazsaydı sitedeki tek başlık ölçeği yine dağılırdı. RTL: sütun yerleşimi grid-column ile; yön bağımlı her değer logical. Okun yönü --adm-yon ile döner (LTR +1 · RTL -1). ═══════════════════════════════════════════════════════════════════ */ .adm{ padding-block: var(--blm-pd); background: var(--z1); --adm-yon: 1; /* ── DOK HATTI · nav'ın GERÇEK alt kenarından ölçülür ──────────── 29 Ağu 2026 · Beyefendi: "kutular üstteki nav ile çok yakın, aradaki boşluğu sitedeki boşluklarla eşitleyelim." Kök sebep ÖLÇÜLDÜ: --nav-h (68 px) kapsülün İÇ yüksekliğidir, nav'ın kapladığı şerit değil. Kapsül --cerceve kadar aşağıdan başlar ve 1 px üst + 1 px alt kenarlık taşır: 16 + 68 + 2 = 86 px ← nav'ın gerçek alt hattı (canlıda ölçüldü) Eski hesap (--nav-h + --bo-2 = 92 px) bu 18 px'i hiç saymıyordu; geriye 6 px boşluk kalıyordu, kartlar nav'a yapışık duruyordu. Boşluk artık --bo-3: sitenin ızgara oluğu ve iki bölüm arasındaki açıklık da odur (taban.css "ızgara oluğu — referans"). Nav ile yapışan öğe arası da aynı ritmi tutuyor. Token .adm üzerinde: iki sütun da (liste + başlık) buradan miras alır. Kardeş öğede tanımlansa öteki göremezdi. */ --adm-nav-alt: calc(var(--cerceve) + var(--nav-h) + 2px); --adm-dok: calc(var(--adm-nav-alt) + var(--bo-3)); /* ── KART BAŞLIĞI · hiyerarşi ölçüldü ────────────────────────── 29 Ağu 2026 · Beyefendi: rakam/başlık ölçüleri birbirine girmişti. ÖLÇÜM (canlı): ana başlık ile kart başlığı arasındaki fark 1440 px → 59,2 / 37,4 = +%58 (sağlıklı) 768 px → 35,3 / 29,6 = +%19 390 px → 32,0 / 29,6 = +%8 ← hiyerarşi yok Kök sebep: --blm-bsl clamp'inin ALT SINIRI 1.85rem (29,6 px) ve 1138 px altında orada takılıyor; ana başlık ise inmeye devam ediyor. İki eğri küçük ekranda buluşuyor. Token bağı KOPARILMIYOR: bölüm kendi punto boyunu yazmıyor, ortak token'ı tek sütun düzeninde ORANLIYOR. --blm-bsl büyürse kart başlığı da büyür, basamak da (aşağıda ondan türüyor). */ --adm-kart-bsl: calc(var(--blm-bsl) * .82); /* İkon kutusu başlıktan BAĞIMSIZ ölçeklenir — eski rakam .d2 ile ana başlıkla eşit puntodaydı (59,2 / 59,2), dekoratif öğe başlıkla yarışıyordu. */ --adm-ikon-o: clamp(3.25rem, 2rem + 2.8vw, 4.75rem); } html[dir="rtl"] .adm{ --adm-yon: -1 } .adm-iz{ display: grid; gap: var(--bo-4); align-items: start; } /* ── SOL SÜTUN · kart dizisi ─────────────────────────────────────── */ .adm-liste{ list-style: none; margin: 0; padding: 0; /* Kartlar arası basamak = geçmiş karttan görünen şerit. Referansta 40 px sabit ve orada başlık yarıdan kesiliyor. Bizde şerit KART DOLGUSU + BİR BAŞLIK SATIRI'ndan türetiliyor: geçmiş kartın sözü okunur kalıyor. (Dok hattı .adm üzerinde — orada açıklandı.) 29 Ağu 2026: başlık ölçüsü .d3 sınıfından --blm-bsl TOKEN'ına geçti (Beyefendi: "kutuların içindeki başlıklar diğer başlıklarımızla eşit olsun"). Token doğrudan okunabildiği için buradaki clamp YANKISI da bitti: ölçü artık tek kaynaktan gelir, başlık büyüyünce basamak kendiliğinden büyür. */ --adm-bsl-satir: calc(var(--adm-kart-bsl) * var(--sy-bsl)); /* Görünen şerit BOŞ bir paydır — metin vitrini değil. 29 Ağu 2026, iki tur: önce iki başlık satırına çıkarıldı (deste tıkış tıkış oldu), sonra tek satıra indi (yazı hâlâ görünüyordu). Beyefendi: "yazıları göstermek için uğraşma, birbirlerine yaklaşsınlar, üsttekinin sadece boşluğu gözüksün." Şerit artık KART DOLGUSU kadar: yazı başlamadan biter, geride yalnız kartın üst kenarı ve boş zemini kalır. Yan kazanç, destenin doğal mesafesi de basamaktan türediği için bölüm kısalıyor — "gereksiz scroll" ondan geliyordu. */ /* Görünen şerit. 30 Ağu 2026 · Beyefendi "aralara boşluk": kart dolgusu kadarken (32 px) deste sıkışık duruyordu. İki katına çıktı — şeritte yazı YİNE görünmez, çünkü örtülen kartın içeriği zaten sönüyor (--adm-ic-opak). */ /* 30 Ağu 2026 · Beyefendi: "üstteki piramitlerin yükseklikleri bunun yarısı kadar olsun." İki katına çıkarılmıştı (aralık isteği), deste fazla yer kapladı — kart dolgusuna geri döndü. */ --adm-basamak: var(--kart-pd); /* Kartlar arası nefes · tek yerden. 30 Ağu 2026 · Beyefendi "aralara boşluk". --bo-4'ün bir buçuk katı; deste ve üstte birleşme aynen korunuyor, yalnız aralık açılıyor. */ /* KARTLAR ARASI MARGIN · 30 Ağu 2026, referanstan ölçüldü. discovermarket'te kartlar AÇIKKEN aralarında ~48 px duruyor; bizde ~15 px kalıyordu. Değer artık türetilmiyor, doğrudan yazılıyor: --adm-esitleme'nin iç içe max(calc(…)) hesabı padding'i sessizce düşürüyordu ve boşluk hiç uygulanmıyordu. */ --adm-ara: 3rem; } /* Boşluk grid gap'i DEĞİL, öğenin kendi dolgusu. Yığılma hareketi yPercent ile veriliyor ve yüzde öğenin KENDİ yüksekliğine göre hesaplanıyor; boşluk öğenin dışında kalsaydı her adım kart boyu kadar değil, kart+boşluk kadar kayması gerekirken kısa düşerdi. */ .adm-oge{ margin: 0; padding-block-end: var(--bo-3); /* ── YIĞILMA ────────────────────────────────────────────────── Referansta kartlar sırayla akmıyor, ÜST ÜSTE BİNİYOR. Referans bunu translateY ile "geciktirerek" yapıyor: adım başına %85–90 geri itme, %100 doğal kayma. Ölçüldü — o yöntem bizim bölüm boyunda desteyi ekranın ÜSTÜNDEN KAÇIRIYOR (kart tepesi −229 px), çünkü kalan %10–15'lik süzülme 570% boyunca 831 px birikiyor. Kenetlenme yapışkanla veriliyor: kaçış matematiksel olarak imkânsız, dok hattı token'dan geliyor ve her ölçüde aynı. Küçülme betikle bindiriliyor — betik gelmezse deste yine doğru yerde kenetlenir, sadece küçülmez. Dönüşüm kenarı ÜSTTEN: ölçek değişince kenetlenen tepe hattı kaymasın, görünen şerit hep bir basamak kalsın. */ position: sticky; inset-block-start: var(--adm-dok); transform-origin: 50% 0%; will-change: transform; /* 🚨 BAŞLANGIÇ DEĞERİ AÇIK YAZILIR — var() yedeği YETMEZ. 29 Ağu 2026: solma `opacity: var(--adm-ic-opak, 1)` ile kurulmuştu, yani değişken hiçbir yerde TANIMLI değildi, yalnız yedeği vardı. GSAP tween'in başlangıcını getComputedStyle ile okur; tanımsız özel özellik BOŞ dizge döner, o da 0 sayılır. Sonuç: tween 0'dan 0'a gitti, kartların içeriği daha bölüm görünmeden kayboldu — canlıda bomboş kutular kaldı. Değişken burada tanımlı olduğu için betik gelmese de içerik 1'dir. */ --adm-ic-opak: 1; } .adm-oge:nth-child(2){ inset-block-start: calc(var(--adm-dok) + var(--adm-basamak)) } .adm-oge:nth-child(3){ inset-block-start: calc(var(--adm-dok) + var(--adm-basamak) * 2) } /* ── KAPANIŞ · dördü AYNI ANDA bırakılır ───────────────────────── 29 Ağu 2026 · Beyefendi: "son dalga hareket ederken bir üstündekini hareket ettiriyor, o da diğerlerini eziyordu — hiçbiri ezilmeden yukarı doğru çıksın sonuncuda." KÖK SEBEP: sticky öğe, kapsayıcısının alt sınırına KENDİ ALT KENARI dayanınca bırakılır. Dok hatları kademeli (123 · 195 · 267 · 339) olduğu için alt kenarlar da kademeliydi — ÖLÇÜLDÜ: 462 / 559 / 688 / 747 px. Dördü dört ayrı anda kopuyor; en aşağıdaki CTA önce serbest kalıp hâlâ kenetli kartların üstünden geçiyordu. Kapanış anında kart üstleri 77 / 77 / 62 / 115 px — piramit dağılıyor, sıra ters dönüyor. ÇÖZÜM: yuvanın alt boşluğu her adımda BİR BASAMAK azalır. Dok yukarı çıktığı kadar boşluk aşağıdan eksilir, dördünün alt kenarı aynı hatta düşer ve sticky dördünü aynı anda bırakır — deste aralarını koruyarak blok hâlinde kalkar. Yan kazanç: kartlar arası doğal mesafe açıldığı için her kart yığılmadan önce daha uzun süre tek başına okunuyor. */ /* Formül: pad(i) = (3 − i) × basamak + SABİT PAYLAR. Dok hattı her adımda bir basamak AŞAĞI iner, alt boşluk bir basamak AZALIR — ikisi birbirini götürür, dört yuvanın alt kenarı aynı hatta düşer. 30 Ağu 2026 · DÜZELTME: nefes payını (--bo-4) buradan çıkarmıştım, gerekçem "hizayı bozuyor" idi — YANLIŞ TEŞHİS. Her yuvaya EŞİT eklenen bir pay hizayı bozamaz; dört alt kenarı da aynı miktar aşağı iter, aralarındaki fark değişmez. O turdaki 1143 px'lik sapma paydan değil, formülün kendisinden geliyordu (basamak o sırada 113 px'ti ve eşitleme payı yoktu). Pay çıkınca kartlar arasındaki boşluk da gitti ve deste yığılmadan önce yapışık görünmeye başladı — Beyefendi: "boşluklar nereye gitti, neden birleştiler?" */ /* Aralık HER KARTTA EŞİT. 30 Ağu 2026 · kademeli verilmişti (144 / 112 / 80 px) ve Beyefendi "aralıklar çok fazla olmuş" dedi — kademe kapanışta bırakma hatlarını hizalıyordu ama görsel ritmi bozuyordu. Referansta aralık tek değer. */ .adm-oge{ padding-block-end: var(--adm-ara) } /* ── EYLEM KARTI · destenin SON BASAMAĞI ───────────────────────── 29 Ağu 2026 · Beyefendi: "kapanırken de böyle kapanmalı, yukarıya doğru böyle itmeli sonuncu… piramit hepsini yukarı taşımalı." ÖNCEKİ HÂL: kart `position:static` idi, yani sayfa hızında kayıp kenetli üç kartın üstünden geçiyordu. Zemini opak olduğu için 01 ve 02 CTA'nın arkasında tamamen kayboluyordu — deste dağılmış gibi görünüyordu. Bir önceki denemede kenetleme "kart ekranın dibinde asılı kalıp 02 ve 03'ü örttü" diye geri alınmıştı; sebep kenetlemenin kendisi değil, DOK HATTININ YOKLUĞUYDU: CTA basamak kuralı almadığı için ötekilerle aynı hatta yapışıyordu. Artık kendi basamağında duruyor: dok + basamak × 3 (üç kartın altında, dördüncü kademe) :last-child yerine SINIF: kuyruk bloğu eklenince son çocuk o oldu; konum kuralı sıra sayımına değil, öğenin kimliğine bağlanır. */ .adm-oge-cta{ inset-block-start: calc(var(--adm-dok) + var(--adm-basamak) * 3); padding-block-end: var(--adm-ara); } /* Kuyruk · piramidin ekranda durduğu pay. Yüksekliği yarım ekrandan uzun: kısa tutulursa deste kenetlenir kenetlenmez dağılmaya başlar. */ .adm-kuyruk{ list-style: none; margin: 0; padding: 0; block-size: 10svh; } /* ── SAĞ SÜTUN · referanstaki gibi ──────────────────────────────── 29 Ağu 2026 · Beyefendi: "referans sitedekinin aynısını istedim." Referansta (.ecosystem__title) tek kural var: position:sticky, top:0, kutu = KENDİ İÇERİĞİ kadar. Kutu ekran boyu değil, metin kutunun tepesinden başlıyor. Kartlar geçerken yazı orada duruyor. Denenip ELENEN iki fazlalık — ikisi de benim eklemem: · min-block-size ile kutuyu ekran boyu yapıp içeriği ORTALAMAK (metin ekranın ortasına düşüyordu) · sonra aynı kutuyu ALT hatta hizalamak (metin dibe iniyordu) Referansın kendisinde ikisi de yok. Fazlalık kaldırıldı. */ .adm-kart{ position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--bo-2); /* 29 Ağu 2026: başlık --blm-bsl'e çıkınca 1024×768'de içerik kartı 3 px aşıyordu (ölçüldü: scrollHeight − offsetHeight = 3). min-block-size sabit kaldığı sürece aspect-ratio esnemiyor; min-content ile taban içerikten de beslenir, oran korunur ve taşma biter. */ padding: var(--kart-pd); /* ── ZEMİN VE KENARLIK · 30 Ağu 2026 ───────────────────────────── Beyefendi: "renk dark ve light'ta çok koyu, kendilerine uygun hareket ettir… etrafındaki border'lar çok ön plana çıkmasın." Kart zemini --z2 idi; koyu temada bölüm zemininden (--z1) yalnız bir tık ayrışıyordu (#1B2220 ↔ #121715) ve kart "koyu bir leke" gibi duruyordu. Zemin artık --z3'e (koyu temanın üçüncü yüzeyi) dayanıyor; --z3 yalnız koyu temada tanımlı olduğu için açık temada yedek --z2 devreye giriyor — yani her tema kendi yüzey ölçeğinde kalıyor, tek bir renk iki temaya zorlanmıyor. Kenarlık yarı yarıya soluklaştı: kartı hâlâ ayırıyor ama çerçeve gibi öne çıkmıyor. */ border: 1px solid color-mix(in srgb, var(--cizgi) 50%, transparent); border-radius: var(--yr-l); background: var(--z3, var(--z2)); /* Derinlik gölgeyle değil, zemin katmanı + hat ile kuruluyor (proje yasağı: box-shadow). */ transition: background-color var(--gecis) var(--egri), border-color var(--gecis) var(--egri); /* Kart ZEMİNİ OPAK olmak zorunda: yığılırken alttaki kartın üstünü örtüyor. Referans bunun için ayrı bir beyaz overlay katmanı taşıyordu; token'lı opak zemin aynı işi sıfır düğümle yapıyor. */ } /* ── KART ORANI · YALNIZ İKİ SÜTUN DÜZENİNDE ──────────────────────── 29 Ağu 2026 · İKİ AYRI ÖLÇÜM, İKİ AYRI DERS: (a) Başlık sınırı düzelip cümle 4 satırdan 2'ye inince kart dikeyde boşaldı — 340,6 px kutu, 269,8 px içerik, 92,8 px ölü alan (doluluk %65,7). Oran içeriğin doğal boyuna çekildi: 628,5 × 7.2/16 = 282,8 px. (b) Oran 48rem'den başlayınca TABLET DİKEYDE ters çalıştı. aspect-ratio genişliğe bağlıdır: tek sütunda kart masaüstünden GENİŞ oluyor (708,1 > 628,5), yani kutu uzuyor — ama aynı kırılmada başlık token'ı küçülüyor (37,4 → 24,3 px), yani içerik kısalıyor. ÖLÇÜLDÜ 768×1024: kutu 318,7 px, doğal 172,8 px, ölü alan 160,7 px, doluluk %40,6. Oran iki sütun düzenine ait bir karardır; kırılma cihaz adına değil DÜZENİN DEĞİŞTİĞİ YERE (62rem) bağlandı. Tek sütunda kart içeriğinin boyunda durur. min-block-size: min-content tabanı korur — metin uzarsa oran onu ezmez, kart büyür, taşma olmaz. */ /* ── TEK SÜTUN · yükseklikleri ortak taban eşitler ──────────────── 62rem altında oran yok (tablet dikeyde ters çalışıyordu), kartlar içerik boyunda: ÖLÇÜLDÜ 390 px'te 152/158/180/160 — 28 px sapma. Eşitlenmiş bırakma hattı bundan 75 px kayıyor, kapanışta şerit 49/75/107'ye dağılıyordu. Ortak taban farkı yutuyor; içerik tabanı aşarsa kart yine büyür, taşma olmaz. */ /* ── KART YÜKSEKLİĞİ · eşitliği betik sürer ────────────────────── Kapanış hizası kartların eşit olmasına bağlı (sticky bırakma anı yükseklikten türüyor). Sabit oran/taban metne bağımlıydı: 29 Ağu'da kart metinleri uzayınca yükseklikler 303/320/320/303'e ayrıldı ve 17 px sapma doğdu. Ölçüm artık adimlar.js'te — en uzun kart --adm-kart-h'ye yazılıyor, üçü de ona uyuyor. Değişken yoksa (betik gelmedi) yedek devrede: 16rem taban. min-content ŞART: aspect-ratio kartın yüksekliğini kendi oranına sabitliyor; içerik ondan uzunsa kutudan TAŞIYOR — 30 Ağu 2026'da alt metin 13 px'ten 20,88 px'e çıkınca ikonlar kartın alt kenarından dışarı sarktı. max(...) içeriği tabana katar, oran korunur, taşma biter. */ .adm-kart{ min-block-size: max(var(--adm-kart-h, 16rem), min-content) } @media (min-width: 62rem){ /* 29 Ağu 2026 · Oran 7.2 iken 1. ve 3. kartın notu iki satır olduğu için min-content devreye giriyordu: yükseklikler 301/285/301/285. Eşit olmayan yükseklik, eşitlenmiş bırakma hattını 31 px kaydırıp kapanışta şeridi 73/53/104'e dağıtıyordu. Oran içeriğin ihtiyacının ÜSTÜNE çıkarıldı (598 × 8.1/16 = 302,7 px > 301) — min-content artık devreye girmiyor, dördü de aynı boyda. */ .adm-kart{ aspect-ratio: 16 / 8.1 } } /* Geride kalan kartın içeriği SOLAR — zemin değil. Kartın kendisine opacity verilemez: yığılmada alttakini örtmesi gerekiyor, saydamlaşırsa alttaki sızar (26 Ağu 2026'da ölçüldü). Bu yüzden solma İÇERİĞE uygulanır, kart zemini opak kalır. Değeri betik sürüyor; betik gelmezse 1 kalır ve bölüm tam görünür. */ .adm-kart-us, .adm-ikon{ opacity: var(--adm-ic-opak) } .adm-kart-us{ display: grid; gap: var(--bo-1); /* SINIR BURADA DEĞİL, TÜKETEN ÖĞEDE. 29 Ağu 2026 · Beyefendi: "çok dar kullanıyoruz yazıyı, kartı tam kullanalım." Kök sebep ÖLÇÜLDÜ: buradaki max-inline-size:34ch, bu kutunun KENDİ font-size'ından (16 px) hesaplanıyordu → 9,61 px × 34 = 326,7 px. Onu tüketen başlık ise 37,44 px yazılıyor; yani "34 karakter" niyeti başlıkta pratikte 14 karaktere düşüyordu. Sonuç: 55 harflik cümle 4 satıra bölünüyor, kart iç genişliğinin (564,5 px) yalnız %42,1'i kullanılıyordu. ch birimi tanımlandığı öğenin ölçüsünden hesaplanır — sınır, onu tüketen öğenin üstüne yazılır. */ } .adm-kart-bsl{ margin: 0; /* 29 Ağu 2026 · Beyefendi: "kutuların içindeki başlıklar diğer başlıklarımızla eşit olsunlar." ÖLÇÜLDÜ: bu başlık .d3 ile 32,8 px / w700 idi; hukuk, villalar ve avantajlar bölümlerinin kart başlıkları --blm-bsl ile 37,4 px / w800. Bölüm kendi punto boyunu YAZMIYOR — sitenin başlık token'ına bağlanıyor. */ font-size: var(--adm-kart-bsl); font-weight: 800; line-height: var(--sy-bsl); letter-spacing: -.03em; color: var(--mrk); /* Kartın iç genişliği ne ise başlık odur — kısıt yok. balance yerine pretty: balance satırları EŞİTLEMEK için erken kırıyor ve kutu yine dar kullanılıyordu; pretty yalnız yetim satırı toplar. */ text-wrap: pretty; } .adm-kart-not{ margin: 0; /* 29 Ağu 2026 · Beyefendi: kart alt metinleri sağ sütundaki giriş yazısıyla AYNI ölçüde olsun. İkisi de aynı işi yapıyor (başlığın altındaki açıklama), farklı puntoda durmaları için sebep yoktu: --yz-kck 13 px sabitti, --yz-alt 1440'ta 20,88 px / 390'da 17,6 px. Sağ sütun (.adm-gir) zaten --yz-alt kullanıyor; tek token'a indi. */ font-size: var(--yz-alt); line-height: 1.5; /* Sınır notun KENDİ ölçüsünde hesaplanır. 13 px'teyken 62ch ≈ 440 px idi; 20,88 px'te aynı sayı 715 px eder, yani kart genişliğini aşar ve etkisiz kalır. Karakter cinsinden okunabilirlik sınırı korunuyor: 45ch ≈ 490 px, satır başına 45 karakter. */ max-inline-size: 45ch; /* --mrk3 küçük puntoda AA altında kalıyor (ölçüldü: 3.14:1) */ color: var(--mrk2); } /* ── KART İKONU · rakamın yerine ───────────────────────────────── 29 Ağu 2026 · Beyefendi: "sağ alta da sayıları değil ikon bulalım." Rakam (01/02/03) ortak .d2 ölçeğindeydi, yani ANA BAŞLIKLA EŞİT puntoda (1440'ta 59,2 / 59,2). Sıra bilgisi zaten
    semantiğinde duruyor ve rakam aria-hidden'dı — görsel ağırlığı karşılığı yoktu. İkon ELLE ÇİZİLMEZ: FA Pro 7 light-300 glifi ikon-cikar.py ile çıkarıldı (file-certificate · people-roof · handshake-simple). Glif kutunun sağ-alt köşesine çapalı; boşluğu kartın dolgusu verir. RTL'de AYNALANMAZ: üçü de yön taşımayan simgeler. Aynalanan tek şey CTA okudur (--adm-yon), o gerçekten yön gösterir. */ .adm-ikon{ flex: none; align-self: end; /* satır ekseninin sonu → RTL'de sola geçer */ inline-size: var(--adm-ikon-o); block-size: var(--adm-ikon-o); /* ── İKON RENGİ · zemine yakın, öne çıkmaz ────────────────────── 30 Ağu 2026 · Beyefendi: "ikonlar turuncu değil, bg renklerine yakın koyulukta ve açıklıkta olsunlar, öne çıkmasınlar." --toprak (#AA7651) sabit bir vurgu rengiydi: koyu temada parlıyor, açık temada da dikkat çekiyordu. Renk artık KART ZEMİNİNDEN türetiliyor, metin yönüne %22 kaydırılarak — yani her temada zeminle aynı ailede, yalnız okunacak kadar ayrık. Tema dönünce kendiliğinden döner. */ color: color-mix(in srgb, var(--z3, var(--z2)) 78%, var(--mrk) 22%); /* opacity KALDIRILDI · 29 Ağu 2026. Eski rakamdan devralınmıştı ama ince çizgili glif zaten soluk: ÖLÇÜLDÜ açık temada ikon/zemin 2,79:1 (grafik nesnesi eşiği 3:1), .9 ile ~2,6'ya iniyordu. İkon aria-hidden ve bilgi metinde duruyor — WCAG 1.4.11 dekoratif grafiği muaf tutar — ama saydamlığı bırakmanın bir bedeli yok. */ } /* RTL'de KUTU aynalanır, GLİF aynalanmaz — ikon-cikar.py glifi kutunun SAĞ-alt köşesine çapalar ve %75 doluluk bırakır, yani solda kutunun ~çeyreği kadar boş pay vardır. LTR'de bu pay içeride kalır (glif sağ kenarı = kutu kenarı); RTL'de kutu sola geçince pay dışarıda kalıyor. ÖLÇÜLDÜ /ar 1440: glif kart kenarından 54,3 px, karşı kenarda metin 33,0 px — 21,3 px asimetri. Pay geri alınıyor. Aynalama DEĞİL: ikon çizimi olduğu gibi kalır, yalnız kutunun boş çeyreği kadar kaydırılır. */ html[dir="rtl"] .adm-ikon{ transform: translateX(calc(var(--adm-ikon-o) * -.25)) } /* ── SON KART · tek eylem ────────────────────────────────────────── */ .adm-kart-cta{ /* Zemin ve mürekkep TEMAYLA DÖNMEZ: ikisi de sabit token. Dönen token + dönmeyen zemin karışımı krem üstüne krem üretiyordu. Ölçüldü: #AA7651 üstüne #0B0F0E → 5.02:1 (AA, her punto). */ background: var(--toprak); border-color: transparent; color: var(--gece); text-decoration: none; /* Diğer üç kartla AYNI ritim: başlık üstte, ağır öğe altta-sonda. Satır yönünde kurulduğunda kartın üst %60'ı boş kalıyordu. */ } .adm-kart-cta .adm-kart-bsl, .adm-kart-cta .adm-kart-not{ color: inherit } .adm-kart-cta .adm-kart-not{ opacity: .78 } .adm-kart-cta .adm-kart-us{ display: grid; gap: var(--bo-1) } .adm-ok{ flex: none; align-self: end; /* rakamlarla aynı hizada: satır sonu */ display: grid; place-items: center; /* 29 Ağu 2026: üç kartın ikonu 72,3 px'e çıkınca 48 px'lik daire destenin sonunda küçük kaldı — ÖLÇÜLDÜ: CTA kartı doluluk %57,1, ötekiler %86,4. Daire ikon ölçüsünün ~%75'i: eylem öğesi olduğu için tam eşit değil, hafif geride durur. */ inline-size: calc(var(--adm-ikon-o) * .75); block-size: calc(var(--adm-ikon-o) * .75); border-radius: var(--yr-tam); background: var(--gece); /* 30 Ağu 2026 · Beyefendi: "dark modda siyah içinde ikon siyah." Ok rengi --z1 idi: o TEMAYLA DÖNEN zemin token'ı, koyu temada #121715 oluyor ve sabit koyu dairenin (--gece) içinde kayboluyordu. Daire sabit olduğuna göre mürekkep de sabit olmalı — --keten, paletin değişmeyen açık tonu. */ color: var(--keten); transition: transform var(--gecis) var(--egri); } .adm-ok-cizim{ inline-size: calc(var(--adm-ikon-o) * .3); block-size: calc(var(--adm-ikon-o) * .3); transform: scaleX(var(--adm-yon)); /* RTL'de ok ters döner */ transition: transform var(--gecis) var(--egri); } .adm-kart-cta:hover .adm-ok, .adm-kart-cta:focus-visible .adm-ok{ transform: translateX(calc(var(--adm-yon) * .375rem)); } /* ── SAĞ SÜTUN · yapışkan başlık ─────────────────────────────────── */ .adm-bas{ display: grid; gap: var(--blm-bsl-ara); justify-items: start; text-align: start; } .adm-bsl{ margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; } html[lang="ar"] .adm-bsl{ letter-spacing: 0; line-height: 1.32 } /* Satır maskesi: iç öğe yukarıdan iner, dış öğe kırpar. overflow gizli olsa da .vrg gradyanı bozulmuyor — 29 Ağu'da canlı sayfada ölçüldü (harfler kayboluyor mu diye bakıldı). */ .adm-satir{ display: block; overflow: hidden; padding-block: .04em } .adm-satir-ic{ display: block } /* ── SAĞ SÜTUN GİRİŞİ ───────────────────────────────────────────── 29 Ağu 2026 · Beyefendi: "yazı size'ını da, alt text çok küçük, onu da standarda geçir" + "text genişliğini de belirle, iç içe girmesin." ÖLÇÜLDÜ (1440, canlı): sitede bölüm girişi iki grupta duruyor — ortak .gvd sınıfı 15,68 px (adimlar · villalar · istatistik · tur) ve --yz-gir 16,56 px (proje · hukuk). Hero'nun anlatı gövdesi ise 20,8 px. Sağ sütun artık bölümün ANLATI bloğu (başlık + açıklama), giriş cümlesi değil; ölçü hero hizasına, --yz-alt'a çekildi. .gvd sınıfı işaretlemeden kaldırıldı — rengi buradan geliyor. GENİŞLİK: sınır bu öğenin KENDİ ölçüsünden hesaplanıyor (1ch ≈ 11,5 px), yani 44ch ≈ 505 px — sütunun %80'i, satır başına 44 karakter. Kısıtsız bırakılsaydı 634 px'te satır 55 karaktere çıkardı; ch'i kapsayıcıya yazmak ise başlıkta 14 karaktere düşerdi (aynı tuzak kart tarafında ölçüldü). */ /* ── SAĞ SÜTUN GÖRSELİ ─────────────────────────────────────────── Metnin ALTINDA, akışta. 30 Ağu 2026 · Beyefendi: "sadece fotoyu aşağıya koyacaksın, yazıların yerleriyle neden uğraşıyorsun." Bir tur önce arka plana alıp metnin arkasına geçirmiştim — yazıyı okunmaz yaptı ve düzeni oynattı. Geri alındı: görsel akışta, kendi yerinde, yazıya dokunmuyor. */ .adm-gorsel{ margin: 0; margin-block-start: var(--bo-4); /* GÖRSEL YAZIYLA AYNI KUTUDA. 30 Ağu 2026 · Beyefendi "görseli yazıya ortala": metin 52ch'lik bir blokta ve sütunun sonuna yaslı; görsel tam genişlikteyken ikisinin merkezi ayrı düşüyordu. Aynı ölçüye bağlandı — sütun hizası (justify-items) ikisini de aynı kenara yasladığı için merkezler de çakışıyor. min(...) dar ekranı korur: 52ch sütundan genişse sütun kazanır, görsel hiçbir ölçüde taşmaz. */ inline-size: min(52ch, 100%); } .adm-gorsel-im{ inline-size: 100%; block-size: auto; display: block; } .adm-gir{ margin: 0; margin-block-start: var(--bo-2); font-size: var(--yz-alt); line-height: 1.5; color: var(--mrk2); /* 29 Ağu 2026 · Beyefendi: "alt text pc'de 3. satır çok boş kalıyor, satırları eşitleyelim genişlikle." 44ch'te satırlar 42 / 40 / 20 karaktere dağılıyordu — son satır ötekilerin yarısı. İki müdahale birlikte çalışır: · sınır 44ch → 52ch (sütunun %80'i yerine %94'ü; "tıkış tıkış" duran metin nefes alır) · text-wrap: balance satır uzunluklarını EŞİTLER. Tarayıcı kırılmayı satır sayısını artırmadan dengeler; 6 satıra kadar çalışır, buradaki 3 satır kapsam içinde. */ max-inline-size: 52ch; text-wrap: balance; } html[lang="ar"] .adm-gir{ line-height: 1.8 } /* EN ve AR başlığı üç satır, TR dört satır. Boş kalan satır anahtarı kutu yüksekliği bırakmasın — yoksa dilden dile başlık altında bir satırlık boşluk açılır. */ .adm-satir:has(> :empty){ display: none } /* ── MASAÜSTÜ · iki sütun + yapışma ──────────────────────────────── */ @media (min-width: 62rem){ /* İki sütun düzeninde ana başlık yeniden büyüyor (1440'ta 59,2 px), aradaki fark kendiliğinden açılıyor — oran geri alınır. */ .adm{ --adm-kart-bsl: var(--blm-bsl) } .adm-iz{ /* 29 Ağu 2026 · Beyefendi: "daha geniş alanımız var fakat biz tıkış tıkış yapmışız." Eşit sütunda anlatı tarafı 634 px'e sıkışıyordu; deste kart oranıyla yönetiliyor, anlatı ise satır uzunluğuyla — yer ihtiyacı eşit değil. Sağ sütun 1,12 katına çıktı (≈596 / 668 px). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(2rem, 5vw, 4.5rem); } /* DOM'da başlık önce (h2 içerikten önce gelsin); sütunlar burada yer değiştiriyor. RTL'de grid kendiliğinden aynalanır. */ .adm-liste{ grid-column: 1; grid-row: 1 } .adm-bas{ grid-column: 2; grid-row: 1; /* Gerilen ızgara öğesi sticky OLMAZ — align-self:start şart. */ align-self: start; position: sticky; /* Sol destenin kenetlendiği hattın AYNISI — iki sütun aynı çizgide durur, nav ile arası --bo-3 kadardır. */ inset-block-start: var(--adm-dok); justify-items: end; text-align: end; /* ── DİKEY ORTALAMA · yalnız iki sütun düzeninde ────────────── 29 Ağu 2026 · Beyefendi: "üstten boşluğu biraz daha fazla olsun, pc'ye ortalansın; mobilde zaten üstte sabit kalacak." Kutu, dok hattından ekranın altına kadar uzatılıyor ve içerik grid ile ortalanıyor — metin dok hattına yapışmak yerine destenin ortasıyla aynı yükseklikte duruyor. svh kullanılıyor: mobil tarayıcı çubuğu açılıp kapandığında vh zıplarken svh sabit kalır (burada 62rem üstü, yine de tutarlı). Alt pay --blm-pd kadar: bölümün kendi nefes payıyla aynı. */ /* ── İKİ SÜTUN BİRLİKTE KALKAR ──────────────────────────────── 29 Ağu 2026 · Beyefendi: "kaybolmalı sağ ve sol, şu an bağımsız yükseliyorlar." Sticky öğe kapsayıcısının alt sınırına KENDİ ALT KENARI dayanınca bırakılır — sağ sütun ile sol destenin bırakma hatları farklıydı: sağ sütun : dok + 100svh payı = 824 px deste : dok + kart + 3×basamak = 522 px Deste 302 px önce kopuyor, sağ sütun geride kalıyordu. İkisi ayrı ayrı yükseldiği için bölüm sonu dağılıyordu. Kutu artık DESTENİN bırakma hattına bağlı: yüksekliği en alttaki yuvanınkiyle aynı formülden türüyor (kart + üç basamak). Kart boyu değişince ikisi birlikte değişir, hat tek noktadan yönetilir. Ortalama payı bu kutunun içinde kalır. */ /* Kutu ekran boyunda → içerik gerçekten ekrana ortalı. Destenin bırakma hattı --adm-esitleme ile buraya çekildiği için ikisi yine AYNI ANDA kalkar; ortalama payı artık kısıtlı değil. */ /* 30 Ağu 2026 · kutu destenin hattına bağlıydı (kart + aralık) ve ekran boyundan kısa kalıyordu: görsel küçülüyor, ALTINDA büyük bir boşluk kalıyordu. Kutu ekrana yayıldı — görsel de onunla büyüyor, boşluk kapanıyor. */ min-block-size: calc(100svh - var(--adm-dok) - var(--blm-pd)); align-content: center; } } /* ── HAREKET AZALTMA ───────────────────────────────────────────── JS zaten hiç kurulmuyor; burada yalnız geçişler susturuluyor. */ @media (prefers-reduced-motion: reduce){ .adm-kart, .adm-ok, .adm-ok-cizim{ transition: none } }