/* ============================================================================ Kidlio Tanıtım Sitesi — Tasarım Sistemi v2 MAVİ marka · Quicksand (başlık) + Nunito (metin) · pofuduk + glassmorphism Tema: [data-theme="light"|"dark"] — tüm renkler token'dan gelir. ========================================================================== */ /* ---------------------------------------------------------------------------- 1) Tokens ---------------------------------------------------------------------------- */ :root { /* Marka mavileri */ --blue: #2E8BF7; --blue-deep: #1A6FF5; --blue-light: #6CB4FF; --blue-ghost: #EAF3FF; /* MARKA MAVİSİNİN MÜREKKEP UCU — `--sun-ink` / `--violet-tx` ile aynı desen. `--blue` bir AKSAN pigmentidir: çip zemini, gradyan durağı, ikon dolgusu, `--blue-ghost` tinti. Aynı pigment küçük METİN olarak gece zemininde yetmiyor: mavi ghost çipin üstünde 4.04:1, yani AA'nın ALTINDA. (Kart yüzeyinde 4.90:1 — yüzey #151B3D'ye koyulaşınca o ölçüm 4.20'den yukarı çıktı; belirleyici olan artık ghost çip.) Token açık temada `--blue`nin KENDİSİ (yani light hiç değişmez), koyu temada ailenin açık ucuna döner. Fillere DOKUNMAZ: yalnız `color:` yazan kurallar bunu okur. */ --blue-ink: var(--blue); --ink: #243769; --sun: #FFD166; /* Sarının AÇIK ZEMİNDE OKUNAN ucu. `--sun` bir PİGMENT (tema geçişindeki güneş, "etkinlik öner" ikonu) ve krem/beyaz üstünde 1.27:1 ile kayboluyor; `--cat-dusun-deep` (#DC8214) 2.69:1 ile hâlâ büyük metin eşiğinin (3:1) altında. Bu uç 3.11:1 — hue neredeyse aynı, yalnız bir tık koyu. İhtiyaç yeni değil: hero başlığının el-çizimi altı çizgisi aynı sebeple #EDAE33'ü data-URI'nin İÇİNE gömmek zorunda kalmıştı (bkz. §5), token'a bağlanamadığı için. Koyu temada ters yönde çalışır — orada ham `--sun` doğrudur. */ --sun-ink: #C97A12; --moon: #E9F0FF; /* Tema geçişi göğü (bölüm 32). Bunlar YÜZEY token'ı değil PİGMENT: gece göğü her iki temada da aynı gecedir, o yüzden [data-theme] altında değil burada. Yüzey token'ları (--bg, --card) geçiş bittiğinde zaten devralıyor. */ --sky-night: linear-gradient(180deg, #02081A 0%, #06173A 46%, #123055 100%); /* Gündüz göğü DENİZ MAVİSİ, soluk bir pastel değil: bu gradyan sayfanın zemini değil, geçişin ödülü — ekranı 1.6sn boyunca kaplayacak tek şey o. Eski hâli (#BADCFF → krem) perde açılınca "beyazımsı bir dikdörtgen" gibi duruyordu; doygun azurdan açık turkuaza inen bu sıra hem markanın mavisini hem de beyaz bulutların kontrastını taşıyor. */ --sky-day: linear-gradient(180deg, #1B7FD4 0%, #3FA3EC 30%, #79C9F6 60%, #BDE9FF 84%, #E9F7FF 100%); /* Şafak: aydınlığa geçişin İLK yarısı. Gündüz göğü perdenin altında hazır bekler, bunun opaklığı düşerken ortaya çıkar — yani gökyüzü "açılır". Tek süsleme değil: batan ay (#E9F0FF) doğrudan --sky-day üstüne düşünce gerçekten görünmez oluyordu; ayın kaydığı kareler artık burada geçiyor. Ağırlık mavi tarafta duruyor, sıcaklık yalnız ufukta: güneşin doğduğu yer orası, gökyüzünün geri kalanı turuncuya kaçarsa varılan mavi sürpriz değil tezat olurdu. */ --sky-dawn: linear-gradient(180deg, #0D1740 0%, #23336F 30%, #4A5A9E 55%, #A2739C 78%, #E9A97E 100%); /* AKSİYON mavisi (butonlar) — marka mavisinden bir tık derin, hafif indigoya kaçık. Neden ayrı token: --blue dekoratif aksan (link, çip, ikon, gradyan); buton "yapılacak şey"i işaret eder ve sıcak krem zeminde daha oturaklı bir ton ister. Parlak azur (#2E8BF7) beyaz üstünde 3.4:1 idi — bu 5.2:1 (AA). Muhabbet periwinkle'ından (#6E73F0) uzak durmak için indigoya fazla kaçmıyor: hue 221°, muhabbet 238°. */ --btn: #2563EB; --btn-deep: #1E52C8; /* hover: renk koyulur, hale büyümez */ --btn-ring: rgba(23, 50, 120, .28); /* nötr mürekkep — mavi hale değil */ --btn-tx: var(--btn); /* aksiyon rengi METİN/kenar olarak (ghost, ring) */ /* Kategori kimlik renkleri (yalnızca kategori öğelerinde) — app v2.34 paleti. Ham renkler yalnızca DOLGU/gradyan/nokta/çip zemininde kullanılır. METİN (etiket, pill metni, link) için WCAG gereği -deep varyantları: #F5A51E ve #23C38C beyaz üstünde metin olarak ASLA kullanılmaz. */ --cat-oyna: #FF2DBE; --cat-oyna-deep: #D71E9B; /* Oyna (play) */ --cat-dusun: #F5A51E; --cat-dusun-deep: #DC8214; /* Düşün (think) */ --cat-kesfet: #23C38C; --cat-kesfet-deep: #0FA06E; /* Keşfet (explore) */ /* Keşfet ailesinin MÜREKKEP ucu: -deep beyaz üstünde 3.35:1 ile idare eder ama DOYGUN yeşil bir zeminin (hero'daki pedagog rozeti) üstünde 2.6:1'e düşüyor. Bu ton aynı hue'da (158°) ve o zeminde 5.6:1 — zemin koyulaşınca metin de koyulaşmak zorunda, yoksa "opak" rozet okunmaz rozet olur. */ --cat-kesfet-ink: #07694A; --cat-muhabbet: #6E73F0; --cat-muhabbet-deep: #5550E1; /* Muhabbet (conversation) */ /* KATEGORİ MÜREKKEBİ — küçük metin için, TEMAYLA ÇEVRİLİR. `-deep` varyantı AÇIK zemin için koyulaştırılmıştır; gece zemininde ters yönde çalışır ve sitede bunu tek tek düzelten dağınık `[data-theme="dark"] … { color: var(--cat-X) }` kuralları birikmişti. Bugün tek kaynak bu dört token. Açık temada `-deep`in KENDİSİ — yani light hiçbir yerde değişmez. `-deep` FİLL olarak da kullanılıyor (rozet gradyanının koyu durağı, dolu yeşil onay diski) ve o kullanımlar bu token'ı OKUMAZ: gece temasında açılan bir gradyan durağı beyaz glyph'i eşiğin altına düşürürdü. Koyu temadaki değerler ÖLÇÜLDÜ (`--card-solid` üstünde, sitenin en zorlu küçük-metin yüzeyi). Seçim #1B2A46 üstünde yapıldı; yüzey #151B3D'ye KOYULAŞINCA dördü de yukarı gitti, yani seçim güvenli tarafta kaldı — parantezdeki eski ölçüm, hangi ikisinin GERÇEKTEN eksik olduğunu gösterdiği için duruyor: Oyna #FF7FD3 7.35 (eski yüzeyde 6.29; ham 4.35 ✗ idi) Düşün ham 8.19 (eski yüzeyde 7.01 ✓ — ham kaldı) Keşfet ham 7.37 (eski yüzeyde 6.31 ✓ — ham kaldı) Muhabbet #A0A5FF 7.42 (eski yüzeyde 6.36; ham 3.66 ✗ — en kötüsü) Dördü de 7.35-8.19 bandında: aynı okunabilirlik, chroma korunuyor. Beyazla karıştırarak açmak da denenebilirdi ama %58 karışım Düşün'ü 9.6'ya, Keşfet'i 9.1'e çıkarıp ikisini pastele düşürüyor — gerekmeyen yerde kimlik kaybı. Sadece EKSİK olan ikisi kaldırıldı. */ --cat-oyna-tx: var(--cat-oyna-deep); --cat-dusun-tx: var(--cat-dusun-deep); --cat-kesfet-tx: var(--cat-kesfet-deep); --cat-muhabbet-tx: var(--cat-muhabbet-deep); /* Geriye dönük takma adlar (mevcut kullanımlar --c-* bekliyor) → yeni ham renk */ --c-oyna: var(--cat-oyna); --c-dusun: var(--cat-dusun); --c-kesfet: var(--cat-kesfet); --c-muhabbet: var(--cat-muhabbet); /* MOR — kategori rengi DEĞİL, kategori taşımayan ikinci aksan. Bugün yalnız İKİ yerde: /iletisim sahnesinin renk yıkaması ve /sss'in "Plan" grubu. HERO'DA ARTIK YOK (2026-08-26, kullanıcı kararı): nicelik sayısı orada morla yazılıyordu, hero lacivert + Kidlio mavisine indirilince kategori taşımayan ÜÇÜNCÜ bir renk karşılıksız kaldı — sayı telefonun üstündeki lacivert rozete taşındı. `--violet-tx2` (gradyanın açık ucu) o gün kullanımsız kaldığı için silindi; geri gerekirse #A855F7 / #D8B4FE. Hue 263-271°: muhabbet periwinkle'ı (238°) ile karıştırılmasın diye bilerek uzak — 17 derece fark eden ilk deneme "muhabbet kategorisi rengi" diye okunuyordu. Kategori renklerindeki kural burada da geçerli: ham renk dolgu/parıltı için, METİN için -tx (krem zeminde 6.8:1). */ --violet: #7C3AED; /* ham: yıkama/tint zemini */ --violet-tx: #6D28D9; /* metin ucu */ /* Yüzeyler & metin — LIGHT ("soğuk kağıt") Zemin DataFluvia design pack'inin `--dp-paper`ından geliyor (2026-09-07, kullanıcı kararı): pack'te `--dp-paper` → `--df-canvas` = #F6F8FC, yani ekosistemin ortak çalışma zemini. Kartlar saf beyaz kalır — ayrışma bundan gelir ve kart:zemin oranı 1.031 → 1.045'e ÇIKAR (zemin soğurken bir tık koyulaşıyor). ÖNCESİ #FDFAF6 idi ("sıcak kağıt", krem). Gerekçesi "mavi atmosfer olmaktan çıkıp AKSAN olsun"du ve o iş hâlâ duruyor: yeni zemin de nötr-soğuk bir kağıt, marka mavisinin kendisi değil (#F6F8FC hue 220° ama S %55/L %98, yani pigment değil kağıt). Sitedeki "krem üstünde ölçüldü" notları (`Features.css` §, `tests/test_site_pages.py`) geçerliliğini KORUYOR: luminans .9683 → .9549, yani metin kontrastı %1.4 değişiyor — tx1 11.16 → 11.01, `--ac-tx` ailesinin en dara olanı 5.75 → 5.67. Hiçbiri eşik değiştirmiyor. Gövde TEK ZEMİN: bölümler arasında açık/koyu bant almaşması yok (eski .section--tint + --bg-soft kaldırıldı) — ritmi kartlar ve boşluk taşır. */ --bg: #F6F8FC; --card: rgba(255, 255, 255, .96); --card-solid: #FFFFFF; --border: rgba(72, 54, 38, .10); --border-strong: rgba(72, 54, 38, .18); --tx1: #243769; --tx2: #5B6B92; --tx3: #8B97B8; --grad-brand: linear-gradient(135deg, #6CB4FF 0%, #2E8BF7 55%, #1A6FF5 100%); --grad-text: linear-gradient(120deg, #1A6FF5, #2E8BF7 45%, #6CB4FF); /* Gölgeler nötr-sıcak: mavi gölge + mavi zemin çamurlu bir hale veriyordu. (Buton gölgesi marka mavisi kalır — o bilinçli bir aksan.) */ --shadow-sm: 0 2px 10px -2px rgba(60, 45, 32, .07); --shadow: 0 14px 40px -14px rgba(60, 45, 32, .15); --shadow-lg: 0 30px 70px -24px rgba(60, 45, 32, .22); /* Marka gradyanının MAVİ halesi. Adı bir dönem --shadow-btn'di ama birincil buton bunu bilerek kullanmıyor (aşağıdaki .btn-primary notu): buton nötr mürekkep halkası taşır. Bu token yalnız --grad-brand'li dekoratif öğelerin (telefon pill'i, adım numarası) altında durur. */ --shadow-brand: 0 10px 24px -8px rgba(26, 111, 245, .45); /* Kart üst kenarı ışık çizgisi — "yukarıdan aydınlatılmış" net kenar */ --edge: inset 0 1px 0 rgba(255, 255, 255, .92); /* Renkli parıltı ölçeği — nötr --shadow ailesinin RENKLİ karşılığı. Yukarıdaki gölgeler yüzeyi zeminden ayırır; bunlar öğenin KENDİ aksan rengini altına sızdırır (kategori mavisi, özellik moru...). İkisi farklı iş yapar, o yüzden ayrı ölçek. Rengi öğe verir: kullanım yerinde --glow-c yazılır, token onu okur. .cat-emoji { --glow-c: var(--cat); box-shadow: var(--glow-sm); } Üç kademe = üç boyut sınıfı: --glow-sm 48-64px ikon rozeti (düz/hafif zeminli) --glow 74-92px orb + gradyan rozet; ayrıca sm'in HOVER karşılığı (ikon parıltısı bir kademe yukarı çıkar — ölçek bunun için) --glow-lg kart yüzeyinin hover'da kalkması (nötr --shadow ile birlikte) Önce 9 bildirim elle yazılmıştı: 6/8/10/12/20/22/26/36px dikey, 14-68px bulanıklık, 38-70% arası altı ayrı karışım oranı. Görsel olarak üç şey eden yerde on beş sayı vardı. Kaymalar ≤4px bulanıklık / ≤8 puan oran. (Bir dönem buradaki listenin dışında Özellikler sayfasının dekoratif ikon kutusu da anılıyordu; o kural sayfayla birlikte silindi.) */ --glow-sm: 0 8px 18px -11px color-mix(in srgb, var(--glow-c, var(--blue)) 60%, transparent); --glow: 0 10px 23px -10px color-mix(in srgb, var(--glow-c, var(--blue)) 68%, transparent); --glow-lg: 0 22px 46px -22px color-mix(in srgb, var(--glow-c, var(--blue)) 40%, transparent); /* Odak halkası — erişilebilirlik öğesi, TEK değer. Dört bildirim ayrı ayrı yazılmıştı (.14 / .18 / .22 üç farklı opaklık): odak göstergesi forma göre değişmez, hep aynı kalınlıkta ve aynı güçte olur. Rengi --ring-c verir (koyu panel üstünde beyaz). */ --ring: 0 0 0 4px color-mix(in srgb, var(--ring-c, var(--blue)) 18%, transparent); /* Radius ölçeği — yüzeyler bir tık daha kare (24-32 → 16-26); telefon, balon, çip, avatar ve yuvarlak butonlar bilinçli olarak dışarıda tutulur. Ölçek BAĞLAYICI: yüzey radius'u ham px yazılmaz, buradan gelir. Bir kez 40 bildirim 8/9/11/12/14/15/17/20/24/28px diye elle yazılmıştı — görsel olarak 4 kademe eden şey 14 ayrı sayıydı. Hepsi ≤2px kayma ile buraya bağlandı; 16-26 zarfı (yukarıdaki karar) aynen korundu. Bilerek DIŞARIDA kalanlar: - Gerçek cihaz köşesi modelleyenler — .phone 52, .phone-screen 42, .phone--mini 40/50, .sps/.cps-screen 33, .ps-tabbar ve .cat-act-media (çok değerli köşe). Token bunları bozar. - Kılcal 1-3px: ayraç, toggle çubuğu, nokta. Form dili meselesi değil. - 6px (x5) ve 13px (x1, .nav-brand): en yakın kademeye 3-4px var, yani ≤2px kuralının dışında. Marka öğesi + küçük çipler; göz kararı taşımak yerine olduğu gibi bırakıldı. 22px (x5) ÇÖZÜLDÜ — ölçeğe 5. kademe EKLENMEDİ. 16/18/22/26 bir ölçek değil gürültü olurdu; bu maddenin dersi zaten "az sayıda değer". Bunun yerine boyuta göre ayrıldılar: .about-story, .principle-card, .duo-card → --r-xl (padding 24-32px, sayfanın en büyük içerik yüzeyleri) .ps-card → --r-lg (padding 15x14, telefon maketi içindeki küçük kart; 26px bu boyutta balon gibi duruyordu) Not: --r 16 ile --r-lg 18 arasında yalnız 2px var — ölçeğin kendisinde kalan tek gürültü bu. Ayrı bir karar, burada dokunulmadı. */ --r-sm: 10px; --r: 16px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px; /* Boşluk ölçeği — kart dolgusu ve ızgara boşluğu için clamp rampaları. Radius ve gölgede olan buradaydı da: 38 ayrı clamp() elle ayarlanmıştı, ON İKİ farklı büyüme eğimiyle (1.9 / 2.4 / 3 / 3.2 / 3.4 / 3.5 / 3.6 / 4 / 5 / 6 / 8 / 9vw). Sonuç ARA genişliklerde görünür: yan yana duran iki yüzeyden biri 3vw, diğeri 3.6vw ile büyüyünce pencere yeniden boyutlanırken aralarındaki ilişki kayıyor — hiçbir maketin göstermediği bir kayma. --sp-sm küçük yüzey dolgusu (kategori paneli, balon butonu) --sp-md orta yüzey dolgusu (kategori kartı, paket, fayda kartı, formlar) --sp-lg iki sütunlu ızgara boşluğu (gece, telefon, güven, footer...) --sp-xl bölüm içi büyük ayrım (gün hikâyesi, CTA kutusu dikeyi) 17 rampa 4 tokene bağlandı. Mobil ucunda kayma ≤2px; masaüstü ucunda ≤4px, bir istisnayla: .foot-inner 56→50. Saf boşluk, sarma riski yok. Bilerek DIŞARIDA: - .section (56/9vw/104) ve .hero/.page-hero — bölüm ritmi ayrı bir ölçek, kart dolgusuyla aynı ailede değil. - .night (34/5vw/60) ve .kd-invite (32/5vw/48) — 5vw eğimli tam-panel yüzeyler; en yakın kademeye 6-12px var. - .hero-grid (44/6vw/92) — sayfanın tek en büyük boşluğu, kendi başına. - Çift eksenli dolgular (.step, .legal-body, .trust-explain yüzeyi) — yatay ve dikeyi ayrı ayarlanmış, tek token karşılamıyor. */ --sp-sm: clamp(16px, 2.2vw, 22px); --sp-md: clamp(24px, 3.2vw, 36px); --sp-lg: clamp(26px, 4vw, 50px); --sp-xl: clamp(40px, 6vw, 72px); /* Punto ölçeği — sitenin METİN kademeleri. 215 font-size bildirimi 70 ayrı değer kullanıyordu. Asıl kanıt tek bir bantta: 0.90-1.05rem arasında 13 farklı değer vardı (.92 .93 .94 .95 .96 .97 .98 .99 1 1.02 1.04 1.05 1.0625) — .97 ile .98 arasındaki fark 16px kökte 0.16 PIKSEL. Bu bir kademe değil, kararsızlık. 107 bildirim (36 kaynak değer) 11 kademeye bağlandı. En büyük kayma 0.8px; çoğu 0.3px'in altında. Bilerek DIŞARIDA: - Telefon simülasyonunun iç tipografisi — app-parity maketi, ayrı karar. - İkon/maskot punto'ları (1.5rem üstü: .nf-mascot 3.4 ...). Bunlar metin değil, KUTU ÖLÇÜSÜ; font-size burada ikonun boyutunu veriyor. Metin ölçeğine sokmak ikisini karıştırır. - .nav-brand (1.42) — marka kelime-işareti, radius'ta da dışarıdaydı. - em birimli olanlar — ebeveyne göreli, farklı mekanizma. - clamp() rampaları (.hero-title, .sec-title, .cta-box h2...) — başlık ailesi kendi içinde tutarlı ve viewport'a bağlı; ayrı mesele. */ --fs-3xs: .62rem; /* mikro etiket */ --fs-2xs: .68rem; --fs-xs: .74rem; /* çip, rozet */ --fs-sm: .82rem; /* yardımcı metin */ --fs-md: .88rem; --fs: .95rem; /* GÖVDE */ --fs-lg: 1rem; --fs-xl: 1.06rem; /* öne çıkan gövde */ --fs-2xl: 1.15rem; /* küçük başlık */ --fs-3xl: 1.25rem; --fs-4xl: 1.35rem; /* kart başlığı */ /* Hareket ölçeği — SÜRE ve EĞRİ iki ayrı eksen. 44 transition bildirimi 37 farklı değerden kuruluydu; süre tarafında ON İKİ ayrı sayı: .15 .18 .2 .22 .25 .28 .3 .34 .35 .4 .5 .7. .18s ile .2s arasındaki fark 20 MİLİSANİYE — hiçbir gözün ayıramayacağı bir aralık için iki ayrı değer. Eğri tarafı daha beter: `ease` 88 kez, yanında SEKİZ ayrı cubic-bezier, üçü zaten aynı eğrinin farklı yazımı (.22,.9,.35,1 · .22, .9, .35, 1 · .22,.9,.35,1.1). Süre kademesini hız değil, öğenin gittiği YOL belirler: --t-xs renk/zemin takası, yol yok (link, çip, fatura sekmesi) --t-sm VARSAYILAN hover: küçük kontrol 2-3px kalkar + gölge --t kart/panel yüzeyi, akordeon, telefon — büyük yüzey, uzun yol --t-lg ekran/örtü girişi (telefon ekran geçişi, tab bar) --t-xl giriş animasyonu (hero fadeUp merdiveni, scroll reveal) .25s (15 bildirim) için 5. kademe AÇILMADI — radius'taki 22px kararının aynısı: boyuta göre ayrıldılar. Kart/yüzey olanlar --t (.3s), küçük kontrol olanlar --t-sm (.2s). En büyük kayma 100ms (.4→.5 ps-tabbar, .8→.7 hero telefon sütunu); geri kalan her şey ≤50ms. Eğriler — `ease` varsayılan kalır, bu ikisi onun dışındaki iki iş: --ease-out yumuşak yavaşlama; dört varyantı vardı (.22,.9,.35,1 / .22,1,.36,1 / .3,.9,.3,1 / .22,.9,.35,1.1) --ease-pop geri sekme; .3,1.4,.5,1 ile .36,1.4,.46,1 aynı işi yapıyordu Bilerek DIŞARIDA: - Sonsuz ortam döngüleri (2.5-9s: orbFloat, twinkle, phoneFloat, cpsClouds). Bunlar etkileşim değil ARKA PLAN; periyotları da bilerek birbirini tutmuyor — hepsi ölçeğe oturursa sayfa tek bir nabızla atmaya başlar. - .mini-chart barGrow eğrisi (.25,1,.35,1.15): taşma payı 1.15, --ease-pop 1.4. Çubuk hedef genişliğini gözle görülür biçimde aşardı. - psTap .9s, psBarGrow 1s, barGrow 1s, psOrbPress .6s, bounceIn .6s — iki kademenin tam ortasına düşüyorlar (≥100ms kayma), üstelik tek kullanımlık jestler. Not: bounceIn ÜÇ ayrı sürede çağrılıyor (.5 hover kıpırtısı → --t-lg, .7 kutlama girişi → --t-xl, .6 hâlâ ham). İlk ikisi ayrı iş, .6 hangisi olmak istediğine karar vermemiş — bir sonraki elin işi. Azaltılmış hareket buraya bakmaz: 25) bloğu süreyi global ezer. */ --t-xs: .15s; --t-sm: .2s; --t: .3s; --t-lg: .5s; --t-xl: .7s; --ease-out: cubic-bezier(.22, .9, .35, 1); --ease-pop: cubic-bezier(.3, 1.4, .5, 1); --font-head: 'Quicksand', 'Nunito', system-ui, -apple-system, sans-serif; --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* EL YAZISI (2026-09-06): ikinci kullanım (navbar sekmeleri) çıkınca eyebrow'un hardcode zinciri token oldu — Layouts/Site.html'in "ikinci kullanım çıkarsa buradan genişletilir" notunun CSS ayağı. Caveat tek ağırlıkla (600) yüklü; bu yüzü kullanan her kural 600 yazar, başka ağırlık istemek yüklemeyi genişletmeden sahte-bold üretir. Caveat'in x-yüksekliği küçük: aynı optik boy için punto Quicksand'inkinden ~1.3 kat BÜYÜK yazılır (eyebrow ve navbar aynı kuralı uygular). */ --font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; /* DISPLAY YÜZÜ — yalnız H1'ler (2026-08-29, kullanıcı isteği: başlıklara karakter). Quicksand ile Nunito ikisi de yuvarlak-hatlı akraba, yani başlık ile gövde arasında kontrast yoktu; Baloo 2 sticker/suluboya dilini taşıyan chunky bir yüz. Gövde ve h2-h5 Quicksand'da kalır — Display'i her başlığa yaymak sesi kalınlaştırır, inceltmez. Font değişikliği bu tek satırdan yapılır; latin-ext (ğ ş ı İ) yüklenmezse zincir Quicksand'a düşer ve hiçbir şey hata vermez. Genişliği yüzünden Özellikler girişinin tavanı yeniden ölçüldü (bkz. Features.css .f2-h1 notu). */ --font-display: 'Baloo 2', var(--font-head); --nav-h: 76px; --container: 1180px; /* TEK DİKEY RİTİM (2026-09-02). Bölüm geçişlerinin boşluğu bu tek değişkenden gelir — sayfa dosyaları (Features/Growth/Faq/Pricing) kendi clamp'lerini yazdığı için aynı sitede 62 · 72 · 84 · 104px'lik dört ayrı "bölüm arası" vardı ve hepsi de fazlaydı: iki komşu bölümün dolgusu TOPLANDIĞI için 104px'lik tavan masaüstünde 208px'lik ölü bant demekti. Yeni tavan 68px → geçiş 136px. Özel durumlar (has-steps · has-strip · cta-sec) ARTIK KENDİ SAYISINI YAZMAZ, bu değerin çarpanını alır; yoksa token değişince biri değişip beşi kalır. */ --sec-pad: clamp(38px, 5.4vw, 68px); /* YATAY ŞERİDİN UCU KESİLMEZ, SOLAR (2026-08-30, konsey kararı 6). Parmakla kaydırılan şeritlerin (hızlı çözüm · /sss hızlı geçiş · /ozellikler giriş şeridi) sağ ucunda kelimeler ortasından kesiliyordu: panelin bir üyesi yarım kalan "Bugün Ded..." etiketini görüp SAYFAYI BOZUK SANDI. Aynı desen sitede dört yerde tekrarlıyor, o yüzden çözüm de tek yerde duruyor — bir şerit `mask-image: var(--strip-mask)` yazar, gerisi buradan gelir. RAMPA ASİMETRİK ve öyle kalmalı: sağ uç 40px (kesilen içeriğin olduğu yer), sol uç 20px. Simetrik 40px'te şerit sayfa ilk açıldığında — yani scrollLeft 0 iken, hiçbir şey kesilmemişken — ilk çipin kendi metnini soluklaştırıyordu; 20px büyük ölçüde çipin kendi iç dolgusuna ve köşe yarıçapına düşer. RENK YOK, OK YOK, ANİMASYON YOK: maske nötr bir alfa rampasıdır, bir kontrol gibi okunmaz — kaydırılabilirliği anlatan şey hâlâ kesilen çipin kendisi (bkz. /sss şeridinin "çubuk gizli, kaydırma açık" notu). Şeridin KENDİ zemini olsaydı maske onu da yerdi; dördü de zeminsiz. UÇ SOLAR AMA YALNIZ KESİK VARSA (2026-09-10, kullanıcı: "çipler sağdan soldan blurlu görünüyor"). Maske koşulsuz yazıldığında şerit KAYDIRILABİLİR OLMASA BİLE iki ucu soluyordu — 1440px'de `.f2-rail-nav ul`ın kendi ölçüsü 1180 = 1180, yani hiçbir şey kesilmemişken ilk çipin solu ve son çipin sağı silikti; asimetrik rampa (20/40) o kusuru azaltmıştı, kapatmamıştı. Rampa artık ÜÇ token ve durumu tek bir genel kanca yazıyor (Site.js, `data-strip` → `data-edge`); uç kuralları bu bölümün sonunda. Ölçüler DEĞİŞMEDİ (20/40) — değişen tek şey maskenin NE ZAMAN uygulandığı. Şablonuna `data-strip` yazılmayan bir şerit eski (koşulsuz) davranışta kalır: kural sessizce bozulmaz, yalnız o şerit fırsatı kullanmaz. */ --strip-fade-l: 20px; --strip-fade-r: 40px; --strip-mask: linear-gradient(to right, transparent 0, #000 var(--strip-fade-l), #000 calc(100% - var(--strip-fade-r)), transparent 100%); /* Tek uçlu iki kardeş: yalnız sağ ucu (şeridin başındayken) ya da yalnız sol ucu (sonundayken) soldurur. */ --strip-mask-r: linear-gradient(to right, #000 calc(100% - var(--strip-fade-r)), transparent 100%); --strip-mask-l: linear-gradient(to right, transparent 0, #000 var(--strip-fade-l)); /* Gece paneli (uyku) — her iki temada sabit */ /* RAMPA DARALTILDI (2026-09-02): parlak durak #23346B → #1A2854, ara durak #14204A → #131E48. Eski aralık gece bantlarının (`.night`, `.gx-trust`, `.cta-sec` gecesi) sol üstünden sağ altına kadar uzanan, kenarsız bir ışık rampasıydı ve koyu yüzeyde SİS okunuyordu — gerekçenin tamamı Sleep.css'in başındaki "KOYU YÜZEYLERDE SİS" notunda. Gradyan silinmedi: yön (sol üstten ışık) gece bantlarının derinliğini taşıyan tek şey, ama artık bir yıkama değil ton farkı. */ --night-bg: radial-gradient(120% 140% at 20% 0%, #1A2854 0%, #131E48 45%, #0C1533 100%); --night-tx: #EAF1FF; --night-tx2: #AFC0E4; --foot-bg: #14204A; --foot-tx: #D9E4F8; --foot-tx2: #90A3CC; /* Koyu çip (mağaza butonları) — sayfa zemininin üstünde durur, o yüzden temanın yüzey ailesini izler. CTA'nın mavi paneli üstündeki kopyaları bilinçli olarak literal kalır: o panel iki temada da aynı. */ --chip-dark: #14204A; /* Yerli form kontrolleri (onay kutusu vb.) tarayıcının kendi çizimini kullanır ve bu çizim `color-scheme` ile belirlenir. Bildirilmezse tarayıcı İŞLETİM SİSTEMİNİN tercihini okur — OS koyu, site açık temadaysa onay kutusu siyah bir kutu olarak sayfadan kopuyordu (`accent-color` yalnız işaretli hâli boyar, boş kutunun çerçeve/zemin rengini DEĞİL). Token temayla birlikte döner, OS'le değil. */ color-scheme: light; } [data-theme="dark"] { color-scheme: dark; /* ————— YÜZEY AİLESİ: OPAK GECE LACİVERTİ (2026-08-26 akşamı, kullanıcı kararı — üç hex kullanıcı tarafından verildi) ————— Kart bir gün boyunca YARI SAYDAM bir gri-mavi idi (rgba(31,47,76,.85), sayfa zemini üstündeki efektifi #1B2A46). İki şikâyeti birden taşıyordu ve ikisi de aynı ölçüden geliyor: chroma C .056, yani hue lacivert bandında olmasına rağmen yüzey PETROL/gri-mavi okunuyordu — ve %15'lik saydamlık sayfa zeminini yüzeyin İÇİNDEN geçirip o griliği pekiştiriyordu. Bugünkü aile üç OPAK hex; zeminle aynı hue bandında ama chroma'sı belirgin biçimde yüksek, yani yüzey açılırken griye değil MAVİYE gider. Dört ölçü yükü taşıyor: 1) ALFA YOK, ÜÇÜ DE TAM OPAK. `--card` ile `--card-solid` bu yüzden AYNI DEĞER ve öyle kalmak zorunda: ayrıştıkları an color-mix tabanları, mobil menü paneli ve üstüne içerik binen her kutu saydam kardeşinden görünür biçimde ayrılır. (Saydam yüzeyin kendisi zaten iki kez şikâyet konusu oldu — aşağıdaki KAYIT.) 2) MERDİVEN, OKLCH L: taban .2376 → seçili .2846 → hover .3139; üçü de H 272-273 · C .065-.090. Yüzey açılırken hue'sunu korur ve chroma'sı onunla birlikte ARTAR. Beyazla karıştırmak tersini yapar (chroma düşer, yüzey griye kayar); koyu temada "kir" tam olarak odur. DİKKAT — HOVER BU AİLEDE SEÇİLİDEN AÇIK. Eski kural bunun tersiydi ("kalıcı durum geçici olandan sönük kalmasın"); üç değer kullanıcı tarafından verildi ve hover en üst kademe. Bir gün geri çevrilecekse değişecek şey token'ların değeri, kuralların hangisini okuduğu değil. 3) METİN ÖLÇÜMÜ YENİ YÜZEY ÜSTÜNDE: tx1 14.8 · tx2 11.0 · tx3 6.8 — üçü de eski değerlerin (12.6 · 9.4 · 5.8) ÜSTÜNDE, çünkü yüzey koyulaştı. Aynı sebeple aşağıdaki KAYIT'ta "tek ödün" diye geçen madde de kapandı: dolgu buton kart üstünde 2.6 → 4.9. 4) BEDELİ KART:ZEMİN ORANI: 1.33 → 1.14. Yüzeyi sayfadan ayıran iş artık büyük ölçüde KENARIN üstünde — kenarı inceltmek/soluklaştırmak bu yüzden eskisinden daha pahalı (aşağıya bkz.). KAYIT — bu yüzeyden ÖNCEKİ iki tur, ikisi de geri alındı: · Nötr gri-mavi (rgba(31,47,76,.85)): yukarıdaki iki şikâyetin kaynağı. · Uygulamanın gece zemini (#191970, KidlioBackground dark tabanı); amaç "site kartı değil uygulamanın kendi yüzeyi" hissiydi. Ölçüldüğünde H 272.8 · C .144, yani lacivert değil DOYGUN MOR ve sayfa yüzeyi olarak parlaktı. Mockup'lar o rengi AYNEN kullanmaya devam ediyor (.fs, .ps-*, .phone-screen, --sleep-bg, --cat-sky-dk) — orada doğru, sayfa yüzeyi olarak değildi; ikisi zaten iki ayrı iş yapıyor. ————— ESKİ NOT (hâlâ geçerli olan kısımlar) ————— İKİ KURAL (ikisi de "kirli görünüyor" şikâyetinin sebebiydi): 1) Yüzeyler OPAK. Yarı saydam kart arkasındaki her şeyi içinden sızdırıp lekeleniyordu. Bugün alfa hiç yok. 2) Kart zeminden açılırken DOYGUNLUĞUNU KORUR. Eski #151C33 açılırken doygunluk kaybediyordu (ΔL +4.7 / ΔS −7.8) → gri plaka. 3) ZEMİN SABİT KALIR, DEĞİŞEN YÜZEYDİR (2026-08-24, kullanıcı kararı — üç kart tonu gerçek sayfada yan yana görülüp seçildi). Bir kez zemin de koyulaştırılmıştı (#020814) ve GERİ ALINDI: istenen şey kartın kendi rengiydi, sayfanınki değil. Zemini indirmek kartı ayrıştırmanın kolay ama yanlış yolu — sayfanın tamamını karartıp aynı farkı elde ediyor, yani düzeltilmesi istenen yüzey hiç düzelmiyor. Elenenler (o günkü ölçümle): #0E2C63 (doğru aile ama uygulamayla ilgisi yok), #071634 (zeminden koyu — kutular yüzey değil oyuk okunuyordu). */ /* Gece zemini de aynı kaynaktan (2026-09-07, kullanıcı kararı): design pack'in `--dp-paper`ı koyu temada `--df-canvas` = `--df-navy-990` = #030A1C. ÖNCESİ #040F25 idi ve "ZEMİN SABİT KALIR" (2026-08-24) kuralıyla korunuyordu — o kural bugün kullanıcı tarafından, ekosistem eşleşmesi için bilerek geri alındı; aşağıdaki §3 notu tarihçe olarak duruyor. Kazanç ölçüldü: aşağıda §4'te "bedeli" diye kayıtlı olan kart:zemin oranı 1.14 → 1.18'e çıkıyor (zemin koyulaştı, kart aynı kaldı), yani kenarın üstündeki yük bir tık hafifliyor. Metin kontrastları da yukarı gidiyor. */ --bg: #030A1C; /* Taban yüzey. `--card-solid` ile AYNI değer olmak zorunda (yukarıda §1): opak kalması gereken yüzeyler (mobil menü paneli, color-mix tabanları) saydam olmayan kardeşinden ayrışamaz. */ --card: #151B3D; --card-solid: #151B3D; /* Yükseltilmiş/seçili ve hover. Ölçü token'ın KENDİSİNDE durur, kurallarda değil — üç yerde ayrı ayrı yazılan bir vurgu sessizce ayrışır. */ --card-active: #1D2552; /* okL .2846 — taban +.047 */ --card-hover: #222C5E; /* okL .3139 — taban +.076 */ /* Kenar: MAVİ-MOR ve DÜŞÜK OPAKLIK. Ölçü: kenar-kart RGB toplam farkı 95 (efektif rgb(47,53,104) vs rgb(21,27,61)). Kenar bu ailede eskisinden daha çok iş yapıyor, çünkü kart:zemin oranı 1.14'e indi (yukarıda §4) — yani kartın çerçevesi, yüzeyi sayfadan ayıran şeyin büyük yarısı. Daha aşağı bir opaklık ölçülmüş "puslu görünüyor" sınırına (fark ~90) girer. `-strong` aynı pigment, orantılı olarak yükseltilmiş alfa (fark 138). */ --border: rgba(140, 145, 255, .22); --border-strong: rgba(140, 145, 255, .32); /* Kapanış kutusu ailesi (.cta-box · /sss .fq-help) yüzeyini ESKİ gece zemininden okur ve okumaya devam eder: kart ailesi nötrleşirken o iki kutu DEĞİŞMEYECEK (kullanıcı kararı, 2026-08-26). İkisi tek değerden beslenir — ayrı ayrı yazılan bir yüzey ayrışır ve "sayfa sonu tek tasarım dilidir" kuralı sessizce kırılır. /iletisim'in .cx-team'i BU AİLEDE DEĞİL (aynı gün, kullanıcı kararı): aileye alınma gerekçesi "kardeşi .cta-box'tan ayrışmasın"dı, oysa /iletisim ctaBand ÇAĞIRMIYOR — ayrışacağı kardeş o sayfada yok ve geriye nötr kart ailesinin yanında duran mor-mavi bir kutu kalıyordu. Bugün koyu temada --card okur (Contact.css §2); açık teması değişmedi. Onu buraya geri bağlamak o kararı sessizce geri alır. */ --cta-surface: #191970; /* Gövde metni de puslunun bir parçasıydı: doygunluğu düşük mavi-gri, doygun royal zemin üzerinde siliniyordu. tx2 8.3→10.7:1, tx3 4.6→6.6:1. */ --tx1: #EAF1FF; --tx2: #C3D2F2; --tx3: #93A5CC; --blue-ghost: rgba(46, 139, 247, .14); --btn-ring: rgba(2, 7, 20, .55); /* koyu zeminde gölge daha derin olmalı */ /* #2563EB koyu kart üstünde metin olarak 3.3:1 — AA'nın altında. Ghost buton ve focus halkası için aynı ailenin açık ucu. Dolgu butonun zemini --btn olarak kalır: beyaz metinle 5.2:1 zaten geçiyor. 2026-08-26'da BİR KADEME DAHA AÇILDI (kullanıcı kararı): #6C97F5 kart üstünde 5.04:1 ile AA'yı geçiyordu ama payı 0.5'ti ve bu token sitenin BÜTÜN ikincil eylemlerini taşıyor — `.btn-ghost`, `.cta-arrow`, `.f2-more--lg`, `.cw-more`, `.gw-more`, `/iletisim`in kanal satırları, `/sss`in "Kidlio hakkında" grubu. Yeni değer aynı hue ailesinde: kart 6.92 · sayfa zemini 9.22 · kapanış kutusu 7.17. Bu token'ın MÜREKKEBİ çevrilen iki yüzeyi (`.cx-tab[aria-selected]` ve `.f2-fs .fs-quick .is-on`) kendi koyu tema kurallarını taşıyor, yani açılma onları etkilemez. */ --btn-tx: #8FB4FF; /* Aksan mavisinin mürekkep ucu (yukarıdaki `--blue-ink` notu). Ölçüm: sayfa zemini 8.73 · kart 6.55 · kapanış kutusu 6.79 · mavi ghost çip 7.40 — hepsi AA'nın rahat üstünde. Yeni renk uydurulmadı, sitenin zaten var olan `--blue-light`i; gece yüzeylerinde bugün de o kullanılıyor (`.night-mode .e i`, `.px-plan--navy .px-more`, `.hero-count::after`). */ --blue-ink: var(--blue-light); /* Kategori mürekkebi — gerekçe ve ölçümler açık tema bloğunda. Düşün ile Keşfet HAM renklerine döner (zaten 7.01 / 6.31); Oyna ile Muhabbet AA'nın altında kaldığı için bir kademe açılır. Ham renkler (dolgu, gradyan, nokta, tint) DEĞİŞMEDİ. */ --cat-oyna-tx: #FF7FD3; --cat-dusun-tx: var(--cat-dusun); --cat-kesfet-tx: var(--cat-kesfet); --cat-muhabbet-tx: #A0A5FF; /* Sarının koyu ucu gece zemininde ters çalışır: #C97A12 lacivert üstünde donuk kalır, ham `--sun` (#FFD166) 7.9:1. Token aynı işi görsün diye burada pigmentin kendisine döner. */ --sun-ink: var(--sun); /* Mor da aynı sebeple açılır: #6D28D9 gece zemininde 1.8:1 — /sss'in "Plan" grubu orada okunmuyordu. Aynı hue'nun açık ucu, -tx 7.2:1. */ --violet: #A855F7; --violet-tx: #C084FC; /* Footer light temada zeminden KOYU bir çapa; dark'ta zeminden AÇIK olduğu için öne fırlıyordu (aynı öğe iki temada ters davranıyordu). Artık koyu. */ --foot-bg: #030917; --chip-dark: #092254; /* mağaza çipi royal aileye taşınır */ /* Koyu temada geniş siyah gölge yükseklik ANLATMAZ — zemin zaten siyaha yakın, gölge yalnızca oluklara ve komşu kartların üstüne gri bir is bırakır. Sıkı gölge + net kenar, koyu temanın doğru yükseklik modeli: yükseklik yüzeyin AÇIKLIĞINDAN gelir, gölgeden değil. Geçiş bandı 53px'ten 40px'e indi. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow: 0 4px 14px -6px rgba(0, 0, 0, .6); --shadow-lg: 0 10px 28px -12px rgba(0, 0, 0, .7); --shadow-brand: 0 10px 24px -8px rgba(26, 111, 245, .55); /* Üst kenar ışığı NÖTR beyazken kartın tepesini griye çekiyordu (kartın kendisi renkli). Aynı aileden bir ışık: kenar hâlâ okunur, ton kaymaz. */ --edge: inset 0 1px 0 rgba(175, 210, 255, .09); } /* KOYU TEMADA KART VURGUSU YALNIZ YÜZEYİ AÇAR (2026-08-26, kullanıcı kararı). Tek bildirim `background`: boyut, gölge, kenar ve hareket kendi kurallarında duruyor ve oralara DOKUNULMAZ — hover'da ikinci bir gölge ya da büyüme eklemek, istenen "sakin" koyu temanın tam tersini üretir. Açık temada bu kuralların hiçbiri geçmez; token'lar da yalnız burada tanımlı. Özgüllük (0,3,0) taban kuralların (0,2,0) üstünde, yani sıra ne olursa olsun kazanır — dosyanın çok aşağısındaki .faq-item.is-open de dahil. */ [data-theme="dark"] .quick-card:not(.is-open):hover, [data-theme="dark"] .cat-card:hover, [data-theme="dark"] .area-card:hover { background: var(--card-hover); } /* Seçili, hover'dan bir kademe daha açık: kalıcı bir durum geçici olandan sönük kalırsa hiyerarşi ters döner. `.quick-card`ın hover kuralı zaten `:not(.is-open)` ile korunuyor, yani açık kartın üstüne gelmek onu geri karartmaz. */ [data-theme="dark"] .quick-card.is-open, [data-theme="dark"] .faq-item.is-open { background: var(--card-active); } /* ---- Yatay şeridin solan ucu: DURUM KURALLARI ---------------------------- Maskeyi `--strip-mask` ile açan her şerit (`.quick-grid` mobil, `.fq-jump` mobil, `.f2-rail-nav ul`) bu üç kuralı da bedava okur; hangi durumda olduğunu Site.js ölçüp `data-edge` olarak yazar (gerekçe: token notu). ÖZNİTELİK ÇİFTİ (0,2,0) şeritlerin kendi seçicilerini (0,1,1 ve daha düşük) bilerek yener — kural şeridin yanında değil BURADA durur, yoksa dördüncü şerit açan onu kopyalamayı unutur ve hata almaz. `data-edge` hiç yazılmazsa (JS kapalı) şeridin kendi iki uçlu maskesi geçerli kalır. */ [data-strip][data-edge="none"] { -webkit-mask-image: none; mask-image: none; } [data-strip][data-edge="start"] { /* şeridin başı: yalnız SAĞ uç kesik */ -webkit-mask-image: var(--strip-mask-r); mask-image: var(--strip-mask-r); } [data-strip][data-edge="end"] { /* şeridin sonu: yalnız SOL uç kesik */ -webkit-mask-image: var(--strip-mask-l); mask-image: var(--strip-mask-l); } /* ---------------------------------------------------------------------------- 2) Base ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* `main` yalnız ARKA PLAN FİGÜRLERİ için konumlandırılmıştır (katman ona göre ölçülüyor). Yığın bağlamı AÇMAZ (`z-index: auto`), yani figürlerin `-1`i kök bağlama çıkar ve zemin ile içerik arasına oturur — açsaydı figürler main'in kendi zemininin altına düşüp tamamen görünmez olurdu. */ main { position: relative; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body.kd { margin: 0; font-family: var(--font-body); font-size: var(--fs-xl); line-height: 1.65; color: var(--tx1); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* NOT: Burada bir dönem kategori renkli "ambient glow" katmanı (body::before, pembe/amber/yeşil ışık havuzları) denendi ve KALDIRILDI — özellikle koyu temada zemini renkli yıkayıp marka mavisini eziyordu. Zemin sade kalır; renk yalnızca içerik öğelerinden (kategori çipleri, rozetler) gelir. */ /* ÇİZGİ FİGÜRLER DE DENENDİ VE KALDIRILDI (2026-09-01, aynı gün, üçüncü ve son deneme; kullanıcı kararı: "yok ya beğenmedim, kaldıralım"). Ne olduğu: `main`in içinde `.bgf` katmanı, sayfa sözlüğüne göre seçilen 14 nesnenin (top · uçurtma · kitap · blok · yaprak · kâğıt uçak · çadır · boya kalemi · ay · yıldız · bulut · kova…) satır içi SVG çizimleri, `--gut` formülüyle yan boşluğa itilmiş, %13 mürekkep (koyuda %16), hareketsiz. ÜÇ TURUN ÖLÇÜLEN DERSİ — dördüncüyü önermeden önce bu bloğu oku: 1) Fikir üç kez ve ÜÇ AYRI BİÇİMDE denendi: nokta ızgarası (doku), ortam ışığı (renk alanı), çizgi figürler (kenar). Üçü de farklı bir algı mekanizmasına oynadı ve üçü de aynı yerden reddedildi. 2) Görünürlük problemi ÇÖZÜLDÜ, ve mesele o değildi. Sırasıyla ölçüldü: alfa %5 → "bgde hiçbir şey yok"; %16/%20 → görünür (ort 1.68-2.79 / max ~21) ama "hiç beğenmedim"; figür 52-90px → ekranın binde 4'ü, "bişeyler olmadı sanki"; 180-310px + kırpılma sınırı (`max(--out,--cap)`, 1400px altında boy ×0.78) → her genişlikte %67+ görünür, metin kontrastı dört kombinasyonda da figürlü = figürsüz (10.96 / 16.84, SIFIR fark) — ve yine istenmedi. Yani reddin sebebi ne görünmezlik ne okunabilirlikti. 3) Kaydedilen sınır: `.bgf` 900px altında kapalıydı ve panelin 10 kişisinden 8'i mobilde geziyor — üç tur boyunca uğraşılan katmanı hedef kitlenin %80'i hiç görmedi. Arka plan dekoruna dördüncü kez girilecekse ilk soru "ne koyalım" değil, "bunu kim görecek" olmalı. ZEMİN SADE KALIR. Renk ve doku yalnız içerik öğelerinden gelir (kategori çipleri, rozetler, kartlar, illüstrasyonlar). */ /* ORTAM IŞIĞI DA DENENDİ VE KALDIRILDI (2026-09-01, aynı gün, kullanıcı kararı: "hiç beğenmedim"). Ne olduğu: `body.kd::after`te üç dev soluk renk lekesi (kenarlarda, sayfa rengine göre `--amb-1`), nokta ızgarasının yerine. İki tur alfa denendi ve ikincisi ölçümle doğrulanmıştı — %5/%3.5 GÖRÜNMEZ çıktı ("bgde hiçbir şey yok"), %16/%20 görünür oldu (açık ort 1.68-2.79 / max ~21, koyu ort 1.82-2.63 / max ~22, metin kontrastı en kötü 4.96 → 4.83, AA duruyor). Yani mesele görünürlük DEĞİLDİ: renkli yıkamanın kendisi istenmedi — bu, aynı fikrin (kategori renkli ışık havuzları) ÜÇÜNCÜ kez geri alınışıdır. Dördüncüsünü önermeden önce bu satırı oku. Ölçümden kalan ve taşınabilir tek ders yukarıda, gren notunun yanında duruyor: grenin eşiği düz gradyana taşınmaz (gürültü ≠ gradyan). Yerine gelen: arka plan FİGÜRLERİ — kendi bölümünde. */ /* KÂĞIT GRENİ (2026-08-29, kullanıcı isteği; frontend-design önerisi 2). Suluboya illüstrasyonlarla kırık beyaz zeminin kaynaşmasını sağlayan ÇOK HAFIF nokta gürültüsü — "hikâye kitabı kâğıdı" yüzeyi. Nokta DESENİNE (.hero-dots vb. düzenli benekler) rakip değil, altına giren ölçüsüz bir materyal dokusu; reveal animasyonunun "defter sayfası" metaforunun zemin karşılığı. Beş karar yükü taşır: - `body::before` + `z-index: -1`: gövde zemininin ÜSTÜNDE, bütün içeriğin ALTINDA boyanır. Kendi zeminini boyayan her yüzey (kartlar, paneller, uygulama maketleri) onu örter — gren yalnız sayfanın görünen kâğıdında durur, ürün ekranlarının "temiz zemin" sözüne dokunmaz (yasak olan hale/gradyan/renkli gölgeydi; materyal dokusu yerel bir görsel olay değil, sayfanın her yerinde eşit bir yüzey). - `position: fixed`: tek bileşik katman, kaydırmada yeniden boyanmaz (mobil performans, Fatma'nın düşük donanımı). - `pointer-events: none`: hiçbir tıklamayı yemez. - NOISE NÖTR ve İÇİNDE griye çevrilir (feColorMatrix saturate 0): yukarıdaki "ambient glow" kaydının tam tersi — gren renk YIKAMAZ, yalnız doku verir. - YALNIZ AÇIK TEMA: koyu tema lacivert geceyi "puslu/kirli" gösterme riskiyle korundu (koyu yüzey şikâyetlerinin hepsi o yöndeydi); display none ile tamamen inder. Yoğunluk `opacity`den ayarlanır — .035 başlangıç değeriydi ve ÖLÇÜMLE görünmez çıktı (Playwright, gren açık/kapalı farkı: ortalama 0.9, max 3/255 — algı eşiğinin altında; hero'da "var" sanılan doku `.hero-dots` deseninin kendisiydi). .07 = ölçülen max ~7/255, kâğıt hissi gözle seçilir, metin kontrastı etkilenmez (boya kâğıt üstünde, metnin altında değil). Desteklemeyen tarayıcıda data-URI sessizce düşer. */ body.kd::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } [data-theme="dark"] body.kd::before { display: none; } body.kd.nav-locked { overflow: hidden; } h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.18; color: var(--tx1); margin: 0 0 .5em; letter-spacing: -.01em; } /* H1 display yüzü (bkz. --font-display notu). line-height bir kademe ferah: Baloo 2'nin x-height'u Quicksand'tan büyük, 1.18'de iki satırlık bir başlık (alt sayfa başlıkları `balance` ile sarabiliyor) satırları birbirine sokuyordu. */ h1 { font-family: var(--font-display); line-height: 1.2; } p { margin: 0 0 1em; color: var(--tx2); } /* Bağlantı mürekkebi `--blue` DEĞİL `--blue-ink`: sitedeki serbest linklerin çoğu küçük punto ve gövde metninin içinde (`mailto:` adresleri, gizlilik ve koşullar sayfalarının satır içi bağlantıları). Açık temada iki token aynı değer, koyu temada bu açık uca döner — bkz. token bloğu. */ a { color: var(--blue-ink); text-decoration: none; } img { max-width: 100%; display: block; } ul { padding-left: 1.2em; } /* Kart üst kenarı ışık çizgisi (--edge) — cam/kart yüzeylerine "yukarıdan aydınlatılmış" net bir kenar verir. Gölge zaten var; sadece inset eklenir. */ .glass, .quick-card, .cat-card, .faq-item { box-shadow: var(--shadow), var(--edge); } /* SATIR KIRIĞI CÜMLENİN ORTASINA DÜŞMEZ. `|clauses` filtresi (Helpers/Typography.py) kopyayı noktalama sınırlarında öbeklere ayırır; öbek burada ATOMİK bir satır-içi kutu olur. Atomik kutu iki satıra bölünemez, yani tarayıcı ancak öbekler ARASINDA kırabilir → kırık her zaman bir noktalamadan sonra gelir ("Listeye yazıl — / çıktığı gün…"), eskisi gibi öbeğin ortasında değil ("… çıktığı / gün ilk planını al"). `text-wrap: balance` bunun yerini TUTMAZ: o yalnız satır uzunluklarını eşitler, kırığın nereye düşeceğini umursamaz. İkisi birlikte çalışır — balance, kalan kırılma fırsatları arasından en dengelisini seçer. Bu kural düşerse hiçbir şey hata vermez: öbekler satır-içi metne döner ve kırıklar sessizce cümle ortasına geri düşer. Kutu kaba sığmazsa kendi içinde sarar (shrink-to-fit), yani dar ekranda yatay taşma olmaz. 620px ALTINDA KAPALI, ve eşik ölçülerek seçildi. Dar kolonda (390px'te kopya ~330px ≈ 30 karakter) öbeklerin çoğu satırdan uzundur: kural kırığı zaten noktalamaya taşıyamaz, yalnız sığmayan öbeği aşağı atıp yarım satır bırakır. Altı sayfada toplam fark: 390px'te +486px, 480px'te +231px, 620px'te +60px, 768px ve üstünde +30px (o da /ozellikler hero'sunun dört maddeyi alt alta dizmesi — istenen şey). Yani bedelin tamamı mobilde ve mobil sayfa boyu bu sitede bilerek kısaltılmış bir ölçü (bkz. UI-Templates.md "Mobil uzunluk"). Eşik yeni değil: duvarın 12→8 karoya inmesi ve `.phone { zoom }` de 620px. */ @media (min-width: 620px) { .clause { display: inline-block; } } ::selection { background: rgba(46, 139, 247, .22); } /* OTOMATİK DOLDURMA ZEMİNİ — TARAYICININ DEĞİL, SİTENİN RENGİ (2026-09-05) Kullanıcı bildirimi: koyu temada e-posta kutusuna tıklayıp kayıtlı adresi seçince kutunun İÇİ hardal-kahverengiye dönüyordu. Sebep sitede değil tarayıcıdaydı: `color-scheme: dark` bildirildiği için Chrome/Edge autofill'i koyu şemanın kendi vurgusuyla — sarımsı kahve — boyuyor, ve o rengi `background` ile ezmek mümkün değil (UA stili !important). Tek yol devasa bir `inset` box-shadow'la zemini örtmek + metnin rengini `-webkit-text-fill-color` ile geri vermek. ÜÇ SEÇİCİ, ve sebebi ODAK HALKASI: sitedeki iki form da (`.wl-input` ve /iletisim'in `.cx-field`i) halkayı `box-shadow: var(--ring)` ile çiziyor. Odaktaki bir autofill kutusunda tek bir box-shadow bildirimi ikisinden birini yutardı — o yüzden odak varyantı örtüyü VE halkayı birlikte yazar. Seçici `html` ile başlar: sayfa CSS'leri Site.css'ten SONRA yükleniyor ve `.cx-field input:focus-visible` bu kuralla aynı ağırlıkta; `html` olmadan koyu temada /iletisim'de kahverengi geri gelirdi. Zemin `--card-solid`: iki formun da (odaktaki) kutu rengi zaten o. */ html input:-webkit-autofill, html textarea:-webkit-autofill, html select:-webkit-autofill { -webkit-text-fill-color: var(--tx1); caret-color: var(--tx1); box-shadow: inset 0 0 0 100px var(--card-solid); /* Chrome zemini bir geçişle boyuyor; geçiş asla bitmezse renk hiç oturmaz. Örtüyle birlikte ikinci emniyet — biri sürüm değişiminde kırılırsa öteki tutar. */ transition: background-color 100000s ease 0s; } html input:-webkit-autofill:focus, html input:-webkit-autofill:focus-visible, html textarea:-webkit-autofill:focus, html textarea:-webkit-autofill:focus-visible { box-shadow: inset 0 0 0 100px var(--card-solid), var(--ring); } /* Firefox: aynı iş, orada zemin `background-image` ile geliyor. */ html input:autofill, html textarea:autofill { background-image: none; -webkit-text-fill-color: var(--tx1); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--btn-tx) 60%, transparent); outline-offset: 2px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 10px; z-index: 300; padding: 10px 18px; background: var(--btn); color: #fff; border-radius: var(--r-full); font-weight: 700; } .skip-link:focus { left: 12px; } /* ---------------------------------------------------------------------------- 3) Utilities ---------------------------------------------------------------------------- */ .container { width: min(var(--container), 100% - 40px); margin-inline: auto; } /* Tek zemin: bölüm bantları (.section--tint) kaldırıldı — açık/koyu almaşma sayfayı dilimlenmiş gösteriyordu. Ayrımı artık kart kenarı + boşluk veriyor. */ .section { padding: var(--sec-pad) 0; position: relative; } .sec-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 54px); } .sec-head.is-center { margin-inline: auto; text-align: center; } /* CAM PİL (2026-09-07, kullanıcı kararı — referans görsel). Etiket çipi ve rozet bağlantısı AYNI kabuğu paylaşır; fark yalnız `.eyebrow-cta`nın eklediği ok, ağırlık ve hover. Düz ghost zemin + nötr kenar, sayfada bir "durum etiketi" gibi duruyordu; bugün kenarı, zemini ve halesi bölümün aksanından türeyen bir pil. RENK TEK YERDEN: `--ec` (dört katman birden döner — kenar · zemin · hale · ok). Ayrı ayrı yazılsalardı biri sessizce geride kalırdı. */ .eyebrow { --ec: var(--sec-accent, var(--btn)); display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; margin-bottom: 16px; /* BUZLU ZEMİN: aksanın %6'sından %15'ine inen çok açık bir geçiş — pil "renkli" değil "renk almış beyaz" duruyor. */ background: linear-gradient(180deg, color-mix(in srgb, var(--ec) 6%, var(--card-solid)), color-mix(in srgb, var(--ec) 15%, var(--card-solid))); border: 1px solid color-mix(in srgb, var(--ec) 38%, transparent); border-radius: var(--r-full); /* YÜZEN GÖLGE + İÇ PARLAMA, halka DEĞİL. Bir dönem burada 4px'lik renkli bir halka vardı (aynı gün, daha erken bir tur): pili zeminden koparıyordu ama etiketi "seçili durumda bir çip" gibi gösteriyordu. Referans düzende derinlik iki şeyden gelir — altına düşen yumuşak gölge ve üst kenardaki 1px'lik beyaz iç parlama. */ box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ec) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .7); /* Yedek `--blue-ink`, `--blue` DEĞİL: etiket sitenin en küçük metni (`--fs-sm`, büyük harf, harf aralıklı) ve kendi mavi ghost çipinin üstünde duruyor — ham aksan orada 4.74:1, yani payı yok. */ color: var(--sec-accent, var(--blue-ink)); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* BAŞLIK AKSAN RENGİNİ TAŞIMAZ, `--tx1` OKUR (2026-08-30, konsey kararı 5). Aksan döngüsü (aşağıdaki `is-*` bloğu) SİLİNMEDİ ve silinmemeli — bilgiyi `.eyebrow` çipi taşımaya devam ediyor. Değişen şey ölçek: bölüm başlığı sayfanın en büyük ikinci yazısı ve ana sayfada ard arda DÖRT doygun kategori tonunda geliyordu; on ebeveynin dördü sayfayı "kalabalık/dağınık" diye okudu ve tasarımcıların üçü de bağımsız olarak aynı yere bastı. Rozet küçük ve kendi tintli zemininde duruyor — orada renk bir işaret; 40px'lik bir başlıkta aynı renk bölümün KONUSU sanılıyor. `--sec-accent`i geri yazmak istersen: bilgi kaybı yok, yalnız gürültü geri gelir. */ .sec-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--tx1); } /* `text-wrap: pretty` (2026-09-04) — son satırda tek kelime bırakmaz. Bölüm alt başlıkları ortalanmış ve kısa; dul kelime burada en çok göze batan yer ("…uyuyor mu diye / bakıyoruz."). `|clauses` ile ÇAKIŞMAZ: filtre öbekleri atomik kutulara alır, pretty ise kalan kırılma fırsatları arasından seçer — ikisi aynı yönde çalışır (bkz. §2'deki `balance` notu, aynı mantık). Desteklemeyen tarayıcı değeri yok sayıp `wrap`'a döner; bozulma riski yok. */ .sec-sub { font-size: var(--fs-xl); margin: 0; text-wrap: pretty; } /* ── Bölüm aksan ritmi ────────────────────────────────────────────────────── Her bölüm sırayla bir kategori aksan rengi alır; sayfa tek renkte boğulmaz ve her blok "ayrı bir oda" gibi okunur. Ritmi YALNIZCA başlık taşır: eyebrow çipi + .sec-title renklenir. Zemin TEK RENK kalır — satır ~228'deki "tek zemin" kararı korunur. NOT: zemin tonlaması (%3-4.5 opaklıkta, aralıklı) bir kez daha denendi ve yine elendi — düşük opaklıkta bile bölümler "blok blok" okunuyor. Sorun opaklık değil, tam-genişlik yatay bandın kendisi. Tekrar denemeye değmez. Fallback'li var(): modifier verilmeyen bölüm hiç değişmez. Light'ta -deep varyantı (sıcak krem üstünde WCAG AA); dark'ta ham varyant — royal lacivert zeminde -deep fazla koyu kalıyor. */ /* Aksan bir SARMALAYICIYA yazılır, tek tek başlıklara değil: token'lar custom property olduğu için içerideki .eyebrow ve .sec-title miras alır. (Bir dönem listede Özellikler sayfasının grup kutusu da vardı; o sayfa sahne düzenine geçince kendi aksanlarını Features.css'teki `.ac-*` ile taşımaya başladı.) */ .section.is-oyna { --sec-accent: var(--cat-oyna-deep); --sec-accent-ghost: rgba(255, 45, 190, .09); } .section.is-dusun { --sec-accent: var(--cat-dusun-deep); --sec-accent-ghost: rgba(245, 165, 30, .12); } .section.is-kesfet { --sec-accent: var(--cat-kesfet-deep); --sec-accent-ghost: rgba( 35, 195, 140, .12); } .section.is-muhabbet { --sec-accent: var(--cat-muhabbet-deep); --sec-accent-ghost: rgba(110, 115, 240, .12); } /* Koyu temada aksan HAM renk değil `-tx` MÜREKKEBİ (2026-08-26). Ham varyant dördünün ikisinde yetiyordu, ikisinde yetmiyordu: etiket kendi tintli çipinin üstünde okunuyor ve orada Oyna 4.87 · Muhabbet **3.97** — sonuncusu AA'nın altında ve sitenin en küçük metni. `-tx` ikisini açar, Düşün ile Keşfet'i olduğu yerde bırakır (bkz. token bloğu). `.sec-title` aynı token'ı miras alıyor ama o büyük metin, zaten geçiyordu. */ [data-theme="dark"] .section.is-oyna { --sec-accent: var(--cat-oyna-tx); --sec-accent-ghost: rgba(255, 45, 190, .18); } [data-theme="dark"] .section.is-dusun { --sec-accent: var(--cat-dusun-tx); --sec-accent-ghost: rgba(245, 165, 30, .18); } [data-theme="dark"] .section.is-kesfet { --sec-accent: var(--cat-kesfet-tx); --sec-accent-ghost: rgba( 35, 195, 140, .18); } [data-theme="dark"] .section.is-muhabbet { --sec-accent: var(--cat-muhabbet-tx); --sec-accent-ghost: rgba(110, 115, 240, .18); } /* ── Bölüm aksan ritmi sonu ─────────────────────────────────────────────── */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 28px; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; border-radius: var(--r-full); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--t-sm) ease, box-shadow var(--t-sm) ease, background var(--t-sm) ease, border-color var(--t-sm) ease; will-change: transform; } .btn:active { transform: scale(.97); } /* Birincil buton: TEK TON + yumuşak gölge (gradyan ve renkli hale yok). Neden: sıcak krem zeminde gradyanın açık ucu (#6CB4FF) ile .45 opaklıklı mavi hale birlikte "yanma" etkisi yapıyordu — krem (~40°) ve mavi (~215°) neredeyse karşıt tonlar, eşzamanlı kontrast tavanda. Buton hâlâ sayfanın en dikkat çekeni; sadece şiddeti düştü. Ton --btn'den gelir (marka --blue'sundan derin/indigo-kaçık aksiyon mavisi). NOT: --grad-brand / --shadow-brand token'larına DOKUNULMADI — telefon pill'i, adım numaraları ve tier rozeti dekoratif gradyanları korunur. */ .btn-primary { background: var(--btn); color: #fff; box-shadow: 0 8px 18px -8px var(--btn-ring); } .btn-primary:hover { transform: translateY(-2px); background: var(--btn-deep); box-shadow: 0 12px 24px -10px var(--btn-ring); } /* backdrop-filter YOK: --card opak (dark alfa 1.0, light .96) → blur'un görünür işi yok, yalnızca gereksiz GPU katmanı açıyordu. */ .btn-ghost { background: var(--card); color: var(--btn-tx); border-color: var(--border-strong); } .btn-ghost:hover { transform: translateY(-2px); border-color: var(--btn-tx); box-shadow: var(--shadow-sm); } .btn-lg { padding: 17px 34px; font-size: var(--fs-xl); } /* ── Ok çipli metin CTA — PokPok uyarlaması #2 ─────────────────────────────── Buton değil, satır içi link: metnin sağında dolu yuvarlak çip + chevron. PokPok'un en çok tekrar eden öğesi (.cta_arrow, 17 kural) — ikincil "tümünü gör" eylemleri buton kabuğundan çıkar, sayfada tek birincil buton kalır. Çip EYLEM mavisi (--btn), bölüm aksan rengine BAĞLANMAZ: aksan ritmi yalnız başlıkta yaşar, eylem iki temada da mavi (Public.css'teki gold override notuyla aynı karar). Beyaz chevron #2563EB üstünde 4.6:1. Hover'daki 3px kayma global prefers-reduced-motion bloğuyla (25) zaten kapsanıyor (*::after dahil) — burada ayrıca ele almaya gerek yok. */ .cta-arrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; color: var(--btn-tx); text-decoration: none; /* DOKUNMA HEDEFİ (WCAG 2.5.8) — ve ölçü `min-height` ile verilir, dolguyla DEĞİL: dolgu, mobilde iki satıra sarabilen bir etiketi ("Uyku Seslerini keşfet") gereksizce büyütür. Kural 2026-09-01'de eklendi, çünkü bileşen o gün ana sayfanın BÜTÜN "içindekiler" bağlantılarını devraldı — uyku bölümündeki bağlantı öncesinde 46px'lik bir `.btn`di ve ölçülmeden çevrilseydi 390px'te **29px**'e düşecekti. */ min-height: 44px; padding: 4px 2px; border-radius: var(--r-sm); } .cta-arrow::after { content: "\f101"; /* fa-angle-double-right — FA5 Free Solid, tema fontuyla gelir. TEK CHEVRON DEĞİL: 2026-09-07 kullanıcı kararıyla sitedeki bütün "ileri" okları `»` oldu (rozet bağlantısı, adım bağlayıcısı, hızlı çözüm kartları) — tek `›` yön değil "kapalı/açılır" gibi okunuyordu. */ font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; font-size: var(--fs-xs); line-height: 1; color: #fff; background: var(--btn); border-radius: var(--r-full); transition: transform var(--t-sm) ease, background-color var(--t-sm) ease; } .cta-arrow:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .cta-arrow:hover::after { transform: translateX(3px); background: var(--btn-deep); } .cta-arrow:focus-visible { outline: 3px solid var(--btn-tx); outline-offset: 3px; } .cta-arrow-lg { font-size: var(--fs-2xl); gap: 13px; } .cta-arrow-lg::after { width: 31px; height: 31px; font-size: var(--fs-md); } /* ROZETİN KENDİSİ BAĞLANTI (2026-09-07, kullanıcı kararı) — ana sayfanın dört dünya bölümünde `.eyebrow` pili tıklanabilir ve ok onun İÇİNDE duruyor. Sınıf `.cta-arrow`ın ÜSTÜNE biner (dosyada ondan sonra, aynı özgüllük), üç şeyi geri yazar: 1) TİPOGRAFİ — taban bileşen `--fs-lg` ve normal yazım; rozet `--fs-sm`, büyük harf, harf aralıklı. Sırf sınıf sırası taşıdığı için burada yeniden yazılıyor, `.eyebrow`ın kendi kuralı sessizce kaybediyor. 2) DİSK KALKAR, GERİYE YALNIZ GLYPH KALIR (kullanıcı kararı). Taban bileşen oku dolu bir çipin içine koyuyor; rozetin İÇİNDE o disk pilin içinde ikinci bir pil oluyordu. 3) RENK: MAVİ ÇIKAR, BÖLÜM AKSANI GİRER — ok `color: inherit` ile rozetin kendi mürekkebini sürüyor. Kontrast sorusu da böyle kapanıyor: glyph, yanındaki metinle AYNI renk, yani rozet yazısı okunuyorsa ok da okunur. (Denenip bırakılan ara adım: aksan renginde disk + koyu glyph. Beyaz chevron aksan turuncusunda #DC8214 üzerinde **2.90**, grafik eşiğinin 3:1 altındaydı; koyu glyph geçiyordu ama disk fikri zaten elendi.) Ok `»` (fa-angle-double-right, FA5 Free Solid) — tek chevron rozetin içinde "bir şey daha var" değil "kapalı" gibi okunuyordu. MIN-HEIGHT 44px TABANDAN GELİR ve dokunulmaz: rozet 34px'lik bir etiketti, bağlantıya dönüştüğü an dokunma hedefi (WCAG 2.5.8) onu bağlar. */ /* TIKLANABİLİR PİL — referans görselin birebir karşılığı (2026-09-07, kullanıcı kararı). Kabuk tabandan (`.eyebrow`) gelir; buradaki fark dört şey: RENK, ölçü, ok ve tepki. RENK BURADA MAVİ, aksan DEĞİL — ve bu bilinçli bir ayrım: etiket çipi bölümün rengini taşır (ritim), eylem sitenin tek eylem rengini (`--btn`). İstisna dört dünya rozeti: orası hem etiket hem bağlantı ve kullanıcı kararıyla aksan rengini sürüyor (`.wall-head` kuralı, aşağıda). YAZI KOYU KRALİYET MAVİSİ (`--btn-tx`, beyazda 5.17), OK BİR KADEME AÇIK (%88 aksan + beyaz): referansta okun metinden açık olması, düğmenin yönünü metinden ayıran şey. */ .eyebrow-cta { --ec: var(--btn); position: relative; gap: 11px; font-weight: 800; letter-spacing: .05em; color: var(--btn-tx); /* ÖLÇÜ: 13/26 → 9/18 (2026-09-07, kullanıcı: "buton bu kadar büyük olmasın"). Pil bir bilgi satırının ucunda duruyor ve o satırdan uzun görünüyordu; dokunma hedefi tabandaki `min-height: 44px`ten geliyor, dolgudan değil. */ padding: 9px 18px; transition: transform var(--t-sm) var(--ease-out), box-shadow var(--t-sm) ease, border-color var(--t-sm) ease; } /* ÜÇ KÜÇÜK ÇİZGİ, PİLİN SOL ÜST DIŞINDA. Referansın "çocuk uygulaması" karakteri buradan geliyor ve tek işi o: dekoratif, `pointer-events: none`, ekran okuyucuda yok (pseudo-element). SVG satır içi data-URI — yeni bir varlık dosyası açmıyor (CI perf bütçesine sıfır bayt) ve yuvarlak uçlu stroke, FA glyph'iyle yapılamayacak tek şey oydu. TEK İSTİSNA `.faq-two-more` (aşağıda): orada süs, hemen üstündeki bölümün düğmesiyle arka arkaya düşüyordu. */ .eyebrow-cta::before { content: ""; position: absolute; left: -11px; top: -10px; width: 24px; height: 24px; pointer-events: none; /* RENK MASKEDEN GELİR, SVG'DEN DEĞİL. Data-URI'nin içine `var(--ec)` yazılamaz (URL bir dize, custom property orada çözülmez), o yüzden çizgiler ilk halinde SABİT maviydi ve turuncu rozetin yanında yabancı duruyordu. SVG artık yalnız ŞEKLİ veriyor (alfa maskesi), rengi zemin katmanı taşıyor — böylece süs de pilin öteki üç katmanı gibi `--ec`den türüyor. */ background: color-mix(in srgb, var(--ec) 80%, #FFF); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .eyebrow-cta::after { content: "\f101"; /* fa-angle-double-right */ /* AİLE VE AĞIRLIK BURADA YAZILIR, `.cta-arrow`tan MİRAS BEKLENMEZ: bu sınıfı `.cta-arrow` olmadan taşıyan bağlantılar var (`.gw-more`) ve orada glyph, başlık fontunun tanımadığı bir kod noktası olarak (dizgi çubukları gibi) çiziliyordu. FA5 Free Solid 900 ağırlık ister; anchor'ın kendi 800'ü pseudo-element'e de inerdi. */ font-family: "Font Awesome 5 Free"; font-weight: 900; width: auto; height: auto; /* Ok METİNDEN BÜYÜK ve bir kademe AÇIK: küçük büyük harfli bir etikette aynı boyda ve aynı renkte bir `»` harflerin arasına karışıyor. */ font-size: 1.1em; color: color-mix(in srgb, var(--ec) 88%, #FFF); background: none; border-radius: 0; } /* Altı çizili bir rozet düğme değil, yanlışlıkla linklenmiş bir etiket gibi duruyor — hover'da düğme KALKAR ve halesi büyür. Okun 3px kayması TABANDAN (`.cta-arrow:hover::after`) gelir, yalnız oradaki `--btn-deep` maviye dönüşü iptal edilir. */ .eyebrow-cta:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--ec) 58%, transparent); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--ec) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .8); } .eyebrow-cta:hover::after { background: none; } .eyebrow-cta:focus-visible { outline-color: var(--sec-accent, var(--btn-tx)); } /* ANA SAYFANIN "İÇİNDEKİLER" SATIRI (2026-09-01, konsey kararı 8) — her ÖZET bölümün dibinde, tam sayfasına giden tek tip bağlantıyı ortalayan satır. Kendi görseli YOK: zemin, kenar, gölge yazmaz — görünen şey yalnız `.cta-arrow`ın kendisi. Bir yüzey eklemek onu bölümün içindeki ikinci bir kutuya, yani "dolu blok sayısı" hesabına sokar. ÜST BOŞLUK BİR KADEME BÜYÜK (`.energy-line`ın 22px'ine karşı 26-38px): bağlantı bölümün içeriğinin PARÇASI değil, onun ardından gelen bir "devamı var" işareti — içerikle aynı aralıkta dururken listenin son satırı gibi okunuyordu. */ .sec-more { display: flex; justify-content: center; margin: clamp(26px, 3.4vw, 38px) 0 0; } /* Rozet biçimli bağlantı bu satırda da durabilir (bkz. `.eyebrow-cta`), ama `.eyebrow`ın 16px'lik alt payı orada satırın altına ölü boşluk bırakır — rozet bir başlığın üstünde değil, bölümün dibinde. */ .sec-more .eyebrow-cta { margin-bottom: 0; } /* GECE YÜZEYİNDE MÜREKKEP ÇEVRİLİR, VE BU ÖLÇÜLMÜŞ BİR ZORUNLULUK. `.night` lacivert bir yüzey ve İKİ TEMADA DA öyle kalıyor; `--btn-tx` ise açık temada `--btn`in kendisi (#2563EB). Gradyanın üç durağında ölçüldü: **2.29 / 3.04 / 3.47** — üçü de AA'nın altında, en kötüsü de kopyanın durduğu sol üst durağın (#23346B) üzerinde. Koyu temada aynı token açık uca dönüyor (#8FB4FF, 5.71-8.66) ve geçiyor, ama kural KOŞULSUZ yazılır: yüzey temayla değişmiyor, o yüzden mürekkebi de yüzeyin kendi token'ı taşır (`--night-tx`, 10.44-15.82). ÇİP DOKUNULMAZ — kendi zeminini (`--btn`) taşıyor, beyaz chevron orada her yüzeyde 4.6:1; onu da çevirmek bağlantıyı iki farklı dilde konuşturur. Kural `.night`e kapsanmıştır, yani `/uyku` ve `/gelisim`in lacivert bantları bu sınıfı taşıdığı gün aynı düzeltmeyi bedavaya alır. */ .night .cta-arrow { color: var(--night-tx); } .night .cta-arrow:focus-visible { outline-color: var(--night-tx); } /* ÇİP DE ÇEVRİLİR — ve bu ikinci ölçüm. Taban çip `--btn` (#2563EB) zemin, beyaz chevron: beyaz/çip 5.17 (glyph okunur), ama ÇİPİN KENDİSİ gece duraklarına karşı **2.29 / 3.04 / 3.47** — ve bağlantı tam da en açık durağın (#23346B) üzerinde duruyor, yani disk zemine gömülüp geriye "havada duran bir chevron" kalıyordu. Gece sürümünde disk `--blue-light` (5.41-8.21) ve glyph lacivert (7.20). Renk uydurulmadı: `--blue-light` sitenin gece mavisi ve `--blue-ink` koyu temada zaten ona dönüyor. HOVER'I DA ÇEVİRMEK ŞART: taban hover `--btn-deep`e KOYULAŞIYOR, gece yüzeyinde bu diski görünür olmaktan çıkarır — burada yön ters, disk açılır (`--night-tx`, glyph 13.87). */ .night .cta-arrow::after { color: #14204A; background: var(--blue-light); } .night .cta-arrow:hover::after { background: var(--night-tx); } /* "Glass" adı tarihsel: yüzey artık opak, cam değil. backdrop-filter kaldırıldı — koyu temada --card alfası 1.0 olduğu için backdrop matematiksel olarak hiç katkı veremiyordu; açık temada .96 ile katkısı ölçüm eşiğinin altında. */ .glass { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); } /* Scroll reveal — hikâye kitabı sayfası. `html.js` guard'ı ZORUNLU: JS yoksa içerik gizlenmez. (Sınıfı Layouts/Site.html 'indeki tek satırlık script ekler.) Bölüm düz kaymaz: ALT KENARINDAN menteşelenir, üstü hafifçe geriye yatmış halden düzlüğe çevrilir — kitap sayfası gibi. Dört karar yük taşıyor: - `perspective()` transform LİSTESİNİN İÇİNDE, ata öğede değil. `.reveal` sayfa boyunca onlarca ayrı ebeveynin altında duruyor; hepsine `perspective` vermek mümkün değil. Bedeli: kaçış noktası `transform-origin`e, yani alt kenara oturur — menteşenin zaten orada olmasını istediğimiz için sorun değil. - Bitiş `transform: none`, `perspective(...) rotateX(0)` DEĞİL. Kalıcı bir 3B transform öğeyi kendi katmanına terfi ettirir ve metin sabit çözünürlükte rasterlenip bulanık kalır. Hareket boyunca 3B, bittiğinde hiç transform yok. - `transform-origin` is-visible'da SIFIRLANMIYOR: sınıfın eklendiği an origin de değişseydi geçiş görünür bir zıplamayla başlardı. Kalıcı alt-kenar origin'in tek yan etkisi kendi `rotate`'i olan hover'lardı; sitede artık hiç örneği yok (`.quick-card`ın -1.4deg'lik sticker eğimi 2026-08-27'de hızlı çözüm sahnesiyle birlikte kalktı, bkz. §11). - Açı bilerek 6deg + perspective 1100px: 400px'lik bir karoda üst kenar ~%3 daralır. Sayfa çevrilme hissi okunur, içerik yamulmuş görünmez. Daha kısa perspective ya da >8deg açıda kartlar "devriliyor" gibi duruyordu. translateY 26px→18px indi: dönüş zaten dikey yol katıyor, ikisi toplanınca giriş fazla uzuyordu. */ .js .reveal { opacity: 0; transform: perspective(1100px) translateY(18px) rotateX(6deg); transform-origin: 50% 100%; transition: opacity var(--t-xl) ease var(--d, 0ms), transform var(--t-xl) var(--ease-out) var(--d, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------------------------------------------------------------------------- 4) Navbar — ORTADA NAVİGASYON KAPSÜLÜ (2026-08-26, kullanıcı kararı) Üç kutu: sol logo · ortada yedi sekmelik KAPSÜL · sağda dil + tema + CTA. Öncesinde navbar kenardan kenara saydam bir satırdı ve kaydırınca sayfa genişliğinde buzlu bir BANT açıyordu (`.nav::before`). Bugün bant yok: yüzey yalnız kapsülün (ve yanındaki iki küçük pilin) kendisinde, yani navbar sayfanın üstünde YÜZER. YÜKÜ TAŞIYAN KARARLAR: - `position: fixed`, `sticky` DEĞİL — ve bu bir gerileme değil, aynı davranış. Navbar zaten `inset: 0 0 auto` ile her zaman tepeye yapışık; `sticky`ye çevirmek onu AKIŞA sokar, yani sayfanın en üstünde 72px'lik gerçek bir yer kaplar. Sitedeki her hero o payı `calc(var(--nav-h) + …)` ile KENDİ dolgusundan veriyor (hero, `pageHero`, /uyku, /gelisim, /fiyatlandirma…): akışa giren bir navbar o payı ikinci kez ekler ve on sayfanın onunda birden ~76px'lik ölü bant açar. "Floating" görüntüsünü veren şey konumlandırma değil, ÜSTTEKİ 14px'lik dolgu (aşağıda) ve bandın yokluğu. - DIŞ DOLGU 14px → kaydırmada 8px. Sıkışmanın tamamı burada: `--nav-h` (76px) navbar'ın durgun boyundan (44 + 28 = 72px) bilerek 4px fazla ve KAYDIRILMIŞ boy 44 + 16 = 60px. Aradaki 16px, /ozellikler'in ilerleme bandının `--f2-nav-gap` payının ta kendisi. Yani İÇERİK SATIRI HER İKİ DURUMDA DA 44px OLMAK ZORUNDA: kapsülü ya da CTA'yı kaydırmada küçülten bir kural o hesabı sessizce bozar ve bandın altından bir önceki sahne akıp geçer. - BLUR YALNIZ KAPSÜLDE (ve dil/tema pilinde), çok hafif. Sayfa genişliğinde `backdrop-filter` kalıcı bir GPU katmanı demekti; bugün blur yalnız ~600px'lik bir kutuda ve yüzeyin %88 opak olmasının tek sebebi altından geçen içeriğin belli belirsiz okunması. - GLOW / BELİRGİN GÖLGE YOK. Kapsülü zeminden ayıran şey 1px kenar; renkli bir hale, sayfanın üstünde yüzen bir kutunun etrafına ikinci bir görsel olay koyardı (dünya kartlarının ve `.f2-media` halesinin aynı gerekçesi). - AKTİF SAYFA "MİNİ-PİLL": kapsülün içinde, sekmenin kendi zemini. Durum tek kaynaktan okunur — `aria-current="page"` şablonda, görünüm `.is-active` sınıfında; ikisi birlikte yazılır. `white-space: nowrap` LOAD-BEARING: navbar öğeleri esnek kutulardır ve dar bir masaüstünde (ölçüldü: 1280px) flex öğeleri içerik genişliğinin altına sıkışıyordu. Sıkışan bir etikette metin SARAR ve navbar tek bir breakpoint olmadan iki kat yükselir. Sarma yasak; yer sorunu §24'teki 1021–1440 bloğunda boşluk toplayarak çözülür. ---------------------------------------------------------------------------- */ .nav { /* KAPSÜL PALETİ — bileşene kapsanmış üç değer. Koyu tarafın üçü de zaten sitenin token'ları (`--card-solid` #151B3D · `--border` rgba(140,145,255,.22)); açık taraf kapsüle özel, çünkü `--card` (%96 beyaz) ve `--border` (sıcak kahve) yüzen bir kutuda ikisi de yanlış: biri altından hiçbir şey geçirmiyor, öteki mavi kapsülün kenarında gri okunuyor. */ --nav-cap: rgba(255, 255, 255, .88); --nav-cap-edge: rgba(50, 78, 170, .14); --nav-cap-tx: #24304A; /* Mini-pill mürekkebi + (eski) zemini. Mürekkep ham `--blue` DEĞİL — o, bu tintin üstünde 3.05:1 (eski `--blue-ghost` kuralının sessiz hatasıydı, 16px/600 küçük metin sayılır). `--btn-deep` ile 5.8:1. NOT (2026-09-06): `--nav-pill` ZEMİNİNİ artık hiçbir kural basmıyor — hover/aktif pill öldü, yerine kelime mürekkebi + alt çizgi (sekme kuralının notu). Token yine de tanımlı kalır: Sleep.css gece hero'sunda ikisini birden çevirir ve `--nav-pill-tx` hover mürekkebi olarak yaşamaya devam ediyor. */ --nav-pill: rgba(37, 99, 235, .10); --nav-pill-tx: var(--btn-deep); position: fixed; inset: 0 0 auto; z-index: 100; padding: 14px 0; transition: padding var(--t-sm) ease; } [data-theme="dark"] .nav { --nav-cap: var(--card-solid); --nav-cap-edge: var(--border); --nav-cap-tx: #CFD9F2; /* açık gri-beyaz, kapsülde 11.9:1 */ --nav-pill: rgba(108, 180, 255, .16); --nav-pill-tx: var(--blue-ink); /* #6CB4FF — pill üstünde 5.6:1 */ } .nav.is-scrolled { padding: 8px 0; } /* `display: contents` ŞART. `.nav-links` mobilde kayan panelin kendisi (bkz. §24) ve bağlantı + dil + tema ÜÇÜNÜ birden taşımak zorunda; masaüstünde ise kapsül ile dil/tema `.nav-inner` satırının iki AYRI öğesi olmalı. Sarmalayıcı burada dağılır, mobilde `display: flex` ile geri gelir. */ .nav-inner { position: relative; /* kapsülün çivilendiği kutu, aşağı bak */ width: 100%; padding-inline: clamp(20px, 4vw, 48px); display: flex; align-items: center; gap: 14px; } .nav-links { display: contents; } .nav-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 1.42rem; font-weight: 700; color: var(--tx1); } .nav-brand img { width: 42px; height: 42px; border-radius: 13px; } .nav-brand:hover .nav-brand-mark { animation: wiggle var(--t-lg) ease; } .nav-brand-name { white-space: nowrap; } /* KIDO'NUN ELINDEKI KURE NEFES ALIR (2026-09-06, kullanici karari). Maskotu degistirmek yerine onun ZATEN TASIDIGI isigi canlandirir: karakter aynen kalir, header'a hareket gelir. Saf CSS parilti — YENI DOSYA YOK, perf butcesine sifir bayt (canli three.js ~600 KB olurdu, tavan 1.365 MB). Konum PNG'den OLCULDU (kido-mascot.png 512x512, pembe-magenta sarmal kumesi): kure merkezi %50 / %65, capi genisligin ~%26'si — parilti ondan genis ki kenari yumusak dagilsin. Yuzde oldugu icin 38px'ten 230px'e her basimda ayni yere oturur. `spsGlow` YENIDEN KULLANILDI (ambient keyframes) — kendi transform'unu tasiyor ve global prefers-reduced-motion blogu onu zaten kapsiyor, ek medya sorgusu gerekmiyor. Wiggle sarmalayiciya tasindi: img'de kalsaydi hover'da ayi donerken parilti yerinde kalir, kure isigindan kacardi. */ .nav-brand-mark { position: relative; display: inline-flex; } .nav-brand-mark::after { content: ""; position: absolute; left: 50%; top: 65%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(216, 116, 255, .95) 0%, rgba(176, 66, 240, .5) 38%, rgba(176, 66, 240, 0) 70%); mix-blend-mode: screen; pointer-events: none; animation: spsGlow 3.6s ease-in-out infinite; } /* ORTADAKİ KAPSÜL. Taban kural AKIŞTADIR (`margin-inline: auto`) ve mobilde kayan panelin içinde öyle kalır; masaüstünde (≥1021px) kapsül VIEWPORT MERKEZİNE ÇİVİLENİR — aşağıdaki bloğa bak, gerekçe orada. BOY 44px SABİT ve üç parçadan gelir: 34 (sekme) + 2×4 (dolgu) + 2×1 (kenar). Kenarı hesaba katmamak navbar'ı 74px'e çıkarıyordu ve `--nav-h` (76px) ile arasındaki pay 4px'ten 2px'e, `--f2-nav-gap`in ölçtüğü fark da 16px'ten 14px'e düşüyordu — yani /ozellikler'in ilerleme bandı ile navbar'ın dibi arasında 2px'lik bir aralık açılıyordu (ölçüldü, Chromium). */ .nav-menu { flex: 0 1 auto; margin-inline: auto; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-full); background: var(--nav-cap); border: 1px solid var(--nav-cap-edge); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } /* KAPSÜL VIEWPORT MERKEZİNE ÇİVİLENİR (≥1021px; 2026-08-27, kullanıcı kararı). Akışta `margin-inline: auto` kapsülü logo ile SAĞ GRUBUN ARASINDA ortalar — ama iki yan grup eşit genişlikte değil: sağda dil + tema + CTA var, solda yalnız logo. Fark ekranda görünüyordu: kapsülün merkezi viewport merkezinden **67px SOLDA** kalıyordu (1440×900'de ölçüldü). Bugün kutu akıştan çıkar ve merkeze oturur; ölçü artık yan grupların genişliğinden BAĞIMSIZ. Üç şey yükü taşıyor: - **Kapsam `min-width: 1021px` OLMAK ZORUNDA.** Altında kapsül kayan panelin İÇİNDE yaşıyor (§24); orada `position: absolute` onu panelin akışından çıkarır ve sekmeler üst üste biner. - **`.nav-side { margin-left: auto }` ŞART.** Kapsül akıştan çıkınca boşluğu paylaştıran `margin-inline: auto` da gitti; sağ grubu sağa yaslayan tek şey bu satır (mobil bloktaki `.nav-right` kuralının kardeşi). - **BİNDİRME ÖLÇÜLDÜ, varsayılmadı — ve GERÇEK ÇIKTI.** Eski kuralın gerekçesi buydu: çivilenmiş kapsül, iki yan grubun genişlik farkının YARISINI sağ paydan yer. İlk ölçümde 1021px'te kapsül ile dil pili arasındaki pay **-1.0px**, yani pil kapsülün üstüne biniyordu; §24'e eklenen 1021–1120 kademesi onu **+27.4px**'e çıkardı. Bugünkü ölçüm (Chromium, sol pay / sağ pay): 1920 → 508 / 352 · 1440 → 268 / 112 · 1280 → 258 / 123 · 1121 → 181 / 47 · 1021 → 152 / **27**. Kapsüle sekme eklemek, CTA'yı ya da dil pilini büyütmek en dar bandı yeniden negatife düşürür ve HİÇBİR ŞEY HATA VERMEZ — önce bu sayılar yeniden ölçülür. BU TABLO ALTI SEKMENİNDİR. 2026-09-07'de yedinci sekme ("Ana Sayfa") eklendi ve §24'ün iki kademesi hesapla genişletildi/kısıldı (kısılmış bant 1280 → 1440, en dar bantta dolgu + punto); tablo O OTURUMDA ÖLÇÜLEMEDİ — tarayıcı yoktu. Yani bugünkü paylar tahmin; ilk fırsatta yeniden okunur. */ @media (min-width: 1021px) { .nav-menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; margin-inline: 0; } .nav-side { margin-left: auto; } } /* Dil + tema — sağ grubun sol yarısı. DOM'da kayan panelin içinde (yukarı bak), masaüstünde `display: contents` sayesinde burada. */ .nav-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } /* CTA + hamburger — panelin DIŞINDA, her genişlikte barda. `position: relative` + `z-index` LOAD-BEARING: mobilde kayan panel (`.nav-links`, `position: fixed`) sağ üst köşeyi kaplıyor ve konumlanmış bir öğe olarak konumlanmamış kardeşlerinin ÜSTÜNE boyanır. Bu ikisi olmadan hamburger panelin altında kalır — yani menüyü kapatacak düğme tıklanamaz. */ .nav-right { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } .nav-link { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px; border-radius: var(--r-full); color: var(--nav-cap-tx); /* NUNITO 600, TEK MÜREKKEP (2026-09-06, beşinci tur; kullanıcı: "hepsi aynı lacivert, aynı font, Nunito 600 — hover'da sadece kelime mavi + altında minicik bir çizgi"). Aynı gün denenen iki şey burada öldü: · EL YAZISI (Caveat 600 ×1.3, "bugün ne yapsak'taki gibi") — token `--font-hand` eyebrow'da yaşamaya devam ediyor, Google Fonts satırına DOKUNULMAZ. ×1.3 çarpanı Caveat'in küçük x-yüksekliği içindi; Nunito'da kalsa sekmeler bir kademe BÜYÜMÜŞ okunur — üç kademesi de (burası, §24 dar bant, mobil panel) çarpansız döndü. · Mürekkep `--nav-cap-tx` (açıkta #24304A lacivert, 12.9:1; koyuda #CFD9F2; /uyku gece hero'su kendi çevirisini yapar — Sleep.css) — yani "lacivert" sabit pigment DEĞİL, kapsülün ölçülü metin token'ı: sabit yazılsa gece hero'sunda ve koyu temada görünmez olurdu. nowrap + min-height 34px DURUR (§24 kademe/44px hesabı; kapsül Quicksand ölçüsüne yakın genişliğe geri döndü, çivilenme payı rahatladı). */ font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg); white-space: nowrap; transition: color var(--t-xs) ease; } /* RENKLİ SEKMELER DENENDİ VE KALDIRILDI (2026-09-06, aynı gün, dört tur; beşinci turda kullanıcı: "hepsi aynı lacivert"). Ne olduğu: her sekme nth-of-type ile altı metin token'ı (--blue-ink · --cat-oyna-tx · --cat-kesfet-tx · --violet · --sun-ink · --ink/--moon gece çifti). Dört turda iki kez "iki sekme aynı renk" düzeltmesi yapıldı ve dersler KALIR — renk bu satıra geri gelecekse önce bunlar okunur: · morlar TEK AİLEDİR (violet 265° ile periwinkle 243° "aynı" okundu) — kesin ayrışan metin ailesi BEŞ: mavi · pembe · yeşil · amber · mor; · --cat-dusun-tx beyaz kapsülde 2.9:1 (büyük metin eşiği 3:1'in ALTI), turuncu ailesinin tek okunur ucu --sun-ink; · ham --cat-* asla metin olmaz (§1 yasağı); · mobil paneldeki `color: var(--tx2)` o gün düşmüştü ve GERİ GELMEDİ — tek mürekkep artık taban kuraldan (--nav-cap-tx) akar, panel zemini (--card-solid) o token'ın ölçülü yüzeyi. */ /* HOVER = KELİME MAVİ + MİNİCİK ÇİZGİ (2026-09-06, beşinci tur). Pill ZEMİNİ ÖLDÜ: hover ve aktif durum artık kutu boyamaz, yalnız kelimenin mürekkebini çevirir ve altına currentColor'dan minik bir çizgi koyar. Mürekkep yine `--nav-pill-tx` (açıkta --btn-deep 5.8:1, koyuda --blue-ink 5.6:1, /uyku gece hero'sunda Sleep.css'in beyazı) — ham --blue'nun 3.05:1 tuzağı ve token'ın tema/gece çevirileri aynen geçerli, `--nav-pill` zemin token'ı tanımlı kalır (Sleep.css çeviriyor, silinirse çeviri yetim düşer). Çizgi ::after'da ve opacity ile açılır: scaleX yerine opacity, mobil panelde konumu ayrıca sola alınabilsin diye transform'u tek işe bırakır. Aktif sayfa AYNI dili konuşur (mini-pill yerine kalıcı çizgi); durum kaynağı değişmedi — aria-current şablonda, görünüm .is-active'de. */ .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 2px; margin-left: -9px; border-radius: var(--r-full); background: currentColor; opacity: 0; transition: opacity var(--t-xs) ease; } .nav-link:hover { color: var(--nav-pill-tx); } .nav-link.is-active { color: var(--nav-pill-tx); } .nav-link:hover::after, .nav-link.is-active::after { opacity: 1; } .nav-lang { display: inline-flex; align-items: center; background: var(--nav-cap); border: 1px solid var(--nav-cap-edge); border-radius: var(--r-full); padding: 3px; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } .nav-lang-btn { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: var(--r-full); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; /* PASİF DİL SÖNÜK (2026-09-07, kullanıcı kararı: "seçim net belli olmuyor"). Eskiden pasif dil `--nav-cap-tx` (#24304A, kapsülde ~12:1) ile sitenin en koyu mürekkebini taşırken AKTİF olan `--blue-ink`ti — ve o token açık temada ham `--blue`nin (#2E8BF7) takma adı, yani beyaz topuzun üzerinde **3.03**. Seçili olan, seçili olmayandan dört kat sönük çıkıyordu. Şimdi ikisi de yerini biliyor: pasif `--tx2` (5.6), aktif `--btn-tx` (#2563EB, 5.17) + beyaz topuz + gölge. */ color: var(--tx2); transition: color var(--t-xs) ease; } .nav-lang-btn:hover { color: var(--nav-cap-tx); } /* Görseli büyütmeden dokunma hedefini ~44px'e çıkar (WCAG 2.5.8) */ .nav-lang-btn::after { content: ""; position: absolute; inset: -8px -3px; border-radius: inherit; } /* Aktif dil (`TR`/`EN`) `--card-solid` üstünde duruyor — koyu temada #151B3D. Etiket iki karakter ve `--fs-sm`: sitedeki en küçük durum işareti, o yüzden ham pigment değil mürekkep token'ı okur (ham `--blue` bu ikilinin ghost kardeşinde 4.04 ile AA'nın altında; bkz. `--blue-ink` notu). */ .nav-lang-btn.is-active { background: var(--card-solid); color: var(--btn-tx); font-weight: 800; box-shadow: var(--shadow-sm); } .nav-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-full); color: var(--nav-cap-tx); border: 1px solid var(--nav-cap-edge); background: var(--nav-cap); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); transition: color var(--t-xs) ease, transform var(--t-xs) ease; } .nav-theme:hover { color: var(--nav-pill-tx); transform: rotate(15deg); } .nav-theme svg { width: 19px; height: 19px; } .nav-theme i { font-size: 18px; line-height: 1; } /* Zemin `--btn` (#2563EB) + beyaz metin — `.btn-primary`dan gelir, burada yalnız ÖLÇÜ veriliyor. 44px hem satırın boyu hem dokunma hedefi (WCAG 2.5.8); ölçü `min-height` ile verilir, dolguyla değil — dolgu iki satıra sarabilecek bir etiketi de büyütür. */ .nav-cta { min-height: 44px; padding: 0 18px; font-size: var(--fs-md); white-space: nowrap; } /* Hamburger */ .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--nav-cap-edge); border-radius: var(--r); background: var(--nav-cap); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 2; } .nav-toggle span { width: 20px; height: 2.4px; border-radius: 2px; background: var(--tx1); transition: transform var(--t-sm) ease, opacity var(--t-sm) ease; } .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); } .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); } /* ---------------------------------------------------------------------------- 5) Hero ---------------------------------------------------------------------------- */ /* HERO TAM OLARAK BİR EKRANDIR. Eskiden dolgu sabitti (üstte 54–110px + nav, altta 60–104px) ve hero ~1060px'e çıkıyordu: masaüstünde bile alt ucu — yani waitlist formu ve store rozetleri — ilk ekranın ALTINDA kalıyordu. Ziyaretçi asıl eylemi görmek için kaydırmak zorundaydı, üstelik yukarıda 180px boş dolgu dururken. İki dert tek karar: dolgu küçülür, `min-height: 100svh` + `align-content: center` ile ARTAN dikey boşluk içeriğin arasına değil ETRAFINA dağılır. Yüksek ekranda hero kendiliğinden ferahlar, kısa ekranda sıkışır ama taşmaz. - `svh`, `vh` DEĞİL: mobilde adres çubuğu açıkken 100vh viewport'tan büyüktür ve hero yine ekrana sığmazdı. - `safe center`: mobilde tek kolona inince içerik ekrandan uzun olur; düz `center` negatif boşluğu iki yana taşırır ve hero'nun TEPESİ navbar'ın altında kalır (kaydırarak da ulaşılamaz). `safe` o durumda `start`a döner. Düz `center` önce yazılır: desteklemeyen tarayıcı onu okur. */ .hero { position: relative; display: grid; align-content: center; align-content: safe center; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + clamp(18px, 3vh, 44px)) 0 clamp(22px, 3.5vh, 52px); overflow: clip; } /* HERO ARKA PLANI ARTIK YOK — iki kuşak da burada öldü, ikisi de geri gelmesin: 1) Yüzen renkli "blob" ışıma küreleri (sol/sağ açık mavi, altta amber bir "güneş"): zemini yıkayıp sayfayı bulanıklaştırıyordu → kaldırıldı. 2) `.hero-bg` + `.hero-dots` (26px mavi nokta ızgarası, parallax'ın uzak düzlemi): 2026-09-01, kullanıcı isteği + konsey (panel 10 kişi, A 5 · B 4 · C 1 · F 1). İki gerekçe: ızgara markanın TERSİ bir dil — suluboya ve yuvarlak hatlı bir sitedeki tek "teknik/şablon" dokusuydu (Deniz: "bir şablon kokuyor"); ve doku YALNIZ hero'nun arkasındaydı, yani sayfanın geri kalanı çıplak krem kalıyordu. Yerine geçen şey hero'da değil `body`de — ilk denemesi (ortam ışığı) aynı gün geri alındı, notu yukarıda; bugünkü karşılığı arka plan figürleri. Nokta dokusunu geri isteyen biri çıkarsa, ölçüm de burada kayıtlı: kâğıt greninin ".035 görünmez" ölçümünde hero'da "gren var" sanılan doku tam olarak bu ızgaraydı — yani hissi taşıyan şey buydu, ve karşılığı boş bırakılmadı, `body`ye taşındı. */ .hero-grid { width: min(var(--container), 100% - 40px); margin-inline: auto; display: grid; /* SOL KOLON GENİŞLETİLDİ: 1.08fr/.92fr → 1.22fr/.78fr (2026-09-05 üçüncü istek; kullanıcı: "başlığı küçültme, ALANI GENİŞLETEBİLİRSİN"). Yeni h1'in ikinci satırı ("ekran dışı aktivite fikirleri.") tek satır sözü verdi ve punto kolon eninden türüyor (cqw, §5 başlık notu) — kolonu genişletmek puntoyu BÜYÜTMENİN yolu. Sağ kolonun bedeli ölçülür: telefon 330px sabit, kolon .78fr'de her genişlikte onu taşımaya yeter; kartların bindirmesi phone-wrap'a göre olduğu için onlar telefonla birlikte kayar (bant payı ölçümü aşağıdaki kart bloğunda). */ grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(44px, 6vw, 92px); align-items: center; } /* EYEBROW ÇİP DEĞİL, DÜZ SATIR (2026-09-05, "A · Gökyüzü" — kullanıcı: "çiplerin kalktığı yerlerde sen de kaldır"). AYNI GÜN İKİ REVİZYON DAHA: (1) "rengi değişsin ama yazı tipi böyle olsun" → büyük-harf + harf aralığı + mürekkep çizgisi (::after) EMEKLİ, renk Kidlio mavisi; (2) "bu fontla yaz Caveat, 500–600 ağırlık … sonuna kalp koy el yazısı ile" → satır artık CAVEAT 600 (Google Fonts, Layouts/Site.html'den tek ağırlık yüklenir; yedek zincir sistem el yazıları). Caveat'in x-yüksekliği küçük — aynı optik boy için punto Quicksand'inkinden bir-iki kademe BÜYÜK yazılır, küçültme "font düzelsin" diye geri alınmaz. Renk --blue, --btn değil: --btn h1 vurgusunun ve düğmelerin tonu, eyebrow onlarla yarışmaz. Emekli çizgi geri istenirse: width 44px, height 3px, margin-top 7px, currentColor %85. */ .hero-eyebrow { display: inline-block; /* Dikey ritim GRUPLUDUR, eşit aralıklı değil. Eskiden her blok arası 24–30px idi; eşit aralıklı bir istif gruplanmaz, duvar gibi okunur — "kalabalık" hissinin yarısı oradan geliyordu. Artık üst grup (etiket + başlık + alt başlık) sıkı, gruplar arası (→ rozetler, → CTA) geniş. Değerler `vh`'ye bağlı: yüksek ekranda açılır, kısa ekranda kapanır. */ font-family: var(--font-hand); font-weight: 600; font-size: clamp(1.45rem, 2vw, 1.75rem); color: var(--blue); animation: fadeUp var(--t-xl) ease both; } /* El çizimi kalp — satırın parçası, emoji değil (emoji yasağı testli). currentColor: satır hangi mürekkebi giyerse kalp de onu giyer. */ .hero-eyebrow-heart { width: .8em; height: auto; vertical-align: -.08em; margin-left: 6px; rotate: -6deg; } /* ÇİP SATIRI (2026-09-01). Alt marj ÇİPTEN BURAYA taşındı: iki çip dar ekranda alt alta sarıyor ve marj çipin kendisinde kalsaydı sarma noktasında ikisinin ARASINA da girerdi (26px + satır boşluğu = hero fold'un altına iner; mobil ilk-ekran bütçesi Site.css §5'te ölçülü duruyor). `justify-content` mobilde `.hero-grid`in `text-align: center`inden gelmez — flex kabı hizalamayı kendi yazar; 761px altında ortalanır (§5'in sonunda). */ .hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: clamp(12px, 2.4vh, 26px); } /* DENEME ÇİPİ (`.hero-trial`) 2026-09-05'TE ÖLDÜ — dördüncü yeri olmadı. Yolculuğu: `.hero-tags` satırı (2026-09-01) → formun üstü (aynı gün) → telefonun sağındaki bant (2026-09-05 sabahı) → ve aynı gün "A · Gökyüzü" hero'suyla birlikte KALDIRILDI: sağ bant artık iki uygulama kartının (`.hero-card`, aşağıda), deneme vaadi ise form panelinin köşesindeki sarı %50 etiketinin ikinci satırı ("+ 7 gün ücretsiz deneme", `.hero-deal`). Böylece 2026-09-01'in gerekçesi de geri geldi: vaat formun bağlamında okunuyor (kaydol → çıkınca deneme senin). Çip geri istenirse önce docs/ui/Home-Hero.md'nin 2026-09-05 bölümü okunur — bandın genişlik hesapları ve ≤960px satır düzeninin üç sessiz tuzağı orada kayıtlı. */ /* SOL KOLON BİR CONTAINER (2026-09-05 üçüncü istek: "ekran dışı aktivite fikirleri tek satırda olsun", "tikli alanlar da tek satırda olsun"). Başlığın ve rozet satırının "tek satır" sözü viewport'a değil kolonun KENDİ enine göre verilmek zorunda: iki kolonlu düzende kolon ~%54, tek kolonluda %100 — vw katsayısı iki rejimde birden doğru olamaz, cqw olur. Parallax'ın `.hero-copy`a yazdığı inline transform ile çakışmaz (inline-size containment yalnız yatay ölçüyü kapsar). */ .hero-copy { container-type: inline-size; } /* Puntoda `min(6vw, 7.4vh)`: hero artık tek ekrana sığmak zorunda ve iki satırlık başlık o bütçenin en büyük kalemi. Yalnız genişliğe bağlıyken geniş ama ALÇAK bir ekranda (16:10 dizüstü, açık geliştirici araçları) 4.3rem'lik başlık tek başına ~150px yiyip formu aşağı itiyordu. vh terimi ancak ~930px yükseklik altında devreye girer — normal masaüstünde punto aynı. */ .hero-title { font-size: clamp(2.5rem, min(6vw, 7.4vh), 4.3rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: clamp(11px, 2.2vh, 24px); animation: fadeUp var(--t-xl) ease .08s both; } /* TEK SATIR SÖZÜ YALNIZ İKİ KOLONLU DÜZENDE (2026-09-05 üçüncü istek; kullanıcı düzeltmesi aynı oturumda: "başlığı küçültme, alanı genişletebilirsin"). İki hamle birlikte çalışır: (1) `.hero-grid`in sol kolonu genişletildi (aşağıdaki grid notu), (2) punto o GENİŞLETİLMİŞ kolonun kendi eninden türer (cqw) ve `white-space: nowrap` sözü tutar — yani punto "küçültülmüş" bir sabit değil, kolonun taşıyabildiği EN BÜYÜK ölçü. Katsayı ölçülür, uydurulmaz (ölçüm notu aşağıda). 960 ve altında bu blok hiç açılmaz: mobil başlık eski clamp'iyle kalır ve sarabilir. cqw bilmeyen tarayıcı vw'li yedeğe düşer. */ /* KATSAYI ÖLÇÜLDÜ (Chromium 1280×900, Quicksand 700, letter-spacing -.02em) ve KOPYAYLA BİRLİKTE DEĞİŞİR — üç değer de ölçümde kayıtlı: - BUGÜNKÜ KOPYA ("0–10 yaş çocuklar için / ekransız aktivite fikirleri."): en geniş satır EN hl'i ("screen-free activity ideas.", punto × 11.15) → 100/11.15 = 8.97; %2 pay ile 8.75cqw. 673 kolonda punto 58.9 — 2026-09-10 öncesindeki 8.35'ten YÜKSEK, çünkü TR hl'i "ekran dışı"dan "ekransız"a kısaldı ve en geniş hat TR'den EN'e geçti. - "ekran dışı aktivite fikirleri." (2026-09-06 → 09-10): en geniş hat TR hl'iydi (× 11.70) → 8.35cqw, 673 kolonda 56.2px. - "ekran dışı aktiviteler." (2026-09-05 gecesi, ertesi gün geri alındı): × 9.38 → 10.4cqw ve masaüstünde 4.3rem tavanı. Kopya kısalırsa hazır. ÜÇÜNCÜ SATIR DENENDİ VE GERİ ALINDI (2026-09-10, aynı gün): "pedagog onaylı" bir tur h1'in ikinci satırıydı, sonra okun yanına rozet oldu (`.hero-arrow-badge`). O turun ölçümü Home-Hero.md §2026-09-10'da duruyor ve ibare h1'e geri istenirse tekrar geçerli: iki satıra sığdırmak en geniş hattı × 16.64/17.50'ye çıkarıp puntoyu MOBİL tabanın (40px) altına düşürüyor, üç satır ise dikey freni doğrusallaştırmayı gerektiriyor. vw'li yedeğin tavanı 3.4rem: 54.4 × 11.15 = 607 ≤ 664 — cqw'siz tarayıcı geniş ekranda da taşmaz. */ /* `7.4vh` TERİMİ BURADA DA YAŞAR (tabandaki kuralın aynı gerekçesi): cqw'ye geçerken bir kez düşürüldü ve 1366×768'de hero 790px'e çıktı (ölçüldü — 22px taşma; 768'de 7.4vh başlığı frenliyor, heroH 768'e iner). İki satırda orantılı terim yetiyor; ÜÇ satırda yetmiyordu (o ölçüm Home-Hero.md'de). */ @media (min-width: 961px) { .hero-title { font-size: clamp(2rem, min(3.4vw, 7.4vh), 3.4rem); font-size: min(8.75cqw, 7.4vh, 4.3rem); white-space: nowrap; } } /* Vurgu satırı TEK RENK ve bir tık koyu. Eski gradyan (koyu→açık mavi) harflerin sağ ucunu solduruyordu; parlak azur (--blue) ise üstündeki koyu lacivert satırın yanında zayıf kalıyordu. --btn (kobalt) ile sayfada tek bir baskın mavi oluyor: hero vurgusu + butonlar aynı ton, --blue küçük aksanlara (link, çip, ikon) kalıyor. Sarı el-çizimi altı çizgi (::after) duruyor. */ .hero-title .hl { position: relative; display: inline-block; color: var(--btn); } /* Çizgi de bir tık koyu: #FFD166 (--sun) sıcak krem zeminde neredeyse eriyordu. #EDAE33 hâlâ güneş sarısı ama zeminden ayrışıyor. Renk data-URI'nin içinde (SVG stroke) olduğu için token'a bağlanamıyor — --sun'a dokunulmadı, o hâlâ "etkinlik öner" ikonunun ve tema geçişindeki güneşin rengi. /ozellikler h1'i AYNI deseni taşır (2026-08-30, kullanıcı onayı): kobalt sözcük + aynı çizgi. Gerekçe hero'nunkiyle aynı — vurgu sözcüğü hemen altındaki mavi CTA ile aynı tonu okur, sayfada tek baskın mavi kalır. Genişlik etkisi yok: çizgi yer kaplamaz, tek satır ölçüsü Features.css .f2-h1 notundaki hesabı izlemeye devam eder. */ /* Çizgi SATIRIN DEĞİL `.hl-mark`IN altında (2026-09-05 üçüncü istek: "ekran dışı alanın altı çizgili olsun") — mavi mürekkep satırın tamamında kalır, sarı vuruş yalnız ilk öbeğin ("ekran dışı" / "screen-free") altına iner. /ozellikler'in `.f2-h1 .hl::after`ı BİLEREK eski davranışta: orada vurgu tek kelime, çizgi zaten kelimenin altında. İKİ ÇİZGİNİN ÖLÇÜ BİRİMİ AYRI ve birleştirilmemeli: buradaki `.hl-mark` inline-block, yani ölçüsünü SATIR KUTUSUNDAN alır ve `bottom: -4px` doğru yere düşer; /ozellikler'deki `.hl` `inline` (satır sonu fırsatı açmasın diye, kendi notu aşağıda) ve orada aynı px değeri çizgiyi bir sonraki satırın harflerine bindiriyordu — o yüzden orası em ile yazılı. */ .hero-title .hl-mark { position: relative; display: inline-block; } .hero-title .hl-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 30 2, 60 6 T 118 4' fill='none' stroke='%23EDAE33' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } /* `inline-block` DEĞİL `inline` + `nowrap` (2026-09-06). inline-block ATOMIK satır içi kutudur ve tarayıcı onun HEMEN ARDINDA bir satır sonu fırsatı açar; TR başlığında vurgudan sonra virgül geldiği için mobilde ikinci satır VİRGÜLLE BAŞLIYORDU (360·375·390·393·402·412·430px'te ölçüldü). Şablondaki `⁠` (word joiner) TEK BAŞINA ÇÖZMEDİ — ölçüldü: Blink atomik satır içi kutunun çevresindeki kırılma fırsatını word joiner ile bastırmıyor, HTML'de karakter duruyorken satır yine virgülle başlıyordu. `inline`da o fırsat hiç doğmaz. `nowrap` şart: altı çizgi `::after` ile mutlak konumlanıyor ve iki kelimelik vurgu ("hazır plan") kendi içinde sararsa çizgi yalnız ilk parçanın altına düşerdi — inline-block bunu dolaylı olarak engelliyordu, açık kural onun yerine geçer. Altı çizginin geometrisi DEĞİŞMEZ (ölçüldü: aynı x/genişlik/y). */ .f2-h1 .hl { position: relative; display: inline; white-space: nowrap; color: var(--btn); } /* ÇİZGİNİN ÖLÇÜSÜ px DEĞİL em, ve bu bir güzelleştirme değil ÇAKIŞMA düzeltmesi (2026-09-10, kullanıcı: "responsivede sarı çizgi yazının üstüne biniyor"). `display: inline` bir kutunun mutlak konumlanan çocuğu, satır kutusuna değil YAZI TİPİNİN İÇERİK ALANINA göre yerleşir: Baloo 2'de o alan 1.60em (ölçüldü: ascent 1.074em + descent 0.521em), oysa `.f2-h1`in satır yüksekliği 1.14em. Yani içerik alanı satır kutusundan her iki uçta ~0.23em taşar ve `bottom: -4px` çizgiyi taban çizgisinin 0.38em altına, yani BİR SONRAKİ SATIRIN harflerinin arasına indiriyordu. Masaüstünde görünmüyordu çünkü başlık orada tek satır (390px'te ölçüldü: çizgi 172.8–182.8, ikinci satırın büyük harf tepesi 175.8 — 7px örtüşme). Bugünkü kural taban çizgisine bağlıdır ve ÖLÇEKLE BÜYÜR: içerik alanının dibi taban + 0.52em olduğu için `bottom: .13em` + `height: .19em`, çizgiyi her puntoda taban + 0.20em ile + 0.39em arasına koyar (390'da 6.1–12.0px, ikinci satırın harflerine 1px değil ~4.5px pay kalır — `.f2-h1`in mobil satır yüksekliği aynı turda 1.14 → 1.22 oldu, gerekçesi Features.css'te). ORAN ANA SAYFANIN VURGUSUYLA AYNI HİZAYA GELDİ: `.hl-mark` çizgisi orada taban + 0.23em'de duruyor (inline-block olduğu için ölçüsünü satır kutusundan alıyor); burada 0.20em. px yazılırsa kural yine puntoya göre kayar ve çakışma başka bir genişlikte geri gelir. */ .f2-h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .13em; height: .19em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 30 2, 60 6 T 118 4' fill='none' stroke='%23EDAE33' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } /* DÖRT DÜNYA SATIRI (2026-09-05, ikinci referans görseli): başlığın hemen altında kalın mürekkep bir satır — dünya adları başlıkla alt metin arasında köprü. Üst grubun (etiket + başlık + bu satır + alt metin) parçası, o yüzden marjı sıkı; büyük boşluk gruplar ARASINDA kalır (§5 dikey ritim). */ .hero-cats { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.12rem, 1.8vw, 1.4rem); letter-spacing: .01em; color: var(--tx1); /* `hero_sub` 2026-09-05'te kullanıcı kararıyla ÖLDÜ ("bunu kaldır") — üst grubu rozetlerden ayıran boşluğu (eski `.hero-sub` `margin-bottom: clamp(20px, 4vh, 40px)`) artık bu satır taşıyor. Alt metin geri gelirse boşluk ona geri verilir, iki yerde birden durmaz. Ölü kuralın geri kalanı: font 1.06–1.2rem, max-width 34em, fadeUp .16s. Mobil eşlikçileri de onunla gitti (960 bloğundaki `margin-inline: auto` ve kısa-ekran bloğundaki marj kısaltması). */ margin-bottom: clamp(20px, 4vh, 40px); animation: fadeUp var(--t-xl) ease .12s both; } /* PEDAGOG ONAY SATIRI — hero'daki TEK yeşil, ve KUTU DEĞİL SATIR. (2026-08-26, kullanıcı kararı.) Uzun süre doygun yeşil zeminli, kenarlıklı, iki satırlık bir KART'tı. Kart olarak doğru çalışıyordu ama sol kolonda alt alta ÜÇ dolu blok bırakıyordu — yeşil kart → mavi CTA butonu → store rozetleri — ve hero'nun "kalabalık" okunmasının kaynağı renk sayısı değil tam olarak o yığındı (aynı teşhis §5'in başındaki hero notunda ve `.hero-soon` ghost kararında da yazılı). Satır aynı iddiayı taşır, ~46px daha az yer kaplar ve yeşili hero'da tek bir yere hapseder: sarı YALNIZ başlığın altı çizgisinde, yeşil YALNIZ burada, geri kalan her şey lacivert + Kidlio mavisi. GÖZDEN KAÇMASIN DİYE İKİ ÖNLEM: dolu yeşil bir onay diski (satırın tek grafiği) ve ilk öbeğin 800 ağırlıkta, `-ink` mürekkeple yazılması. Zeminsiz ama sessiz değil. Ayraç `·` gerçek metin (şablon notu): ekran okuyucu duraklamayı ondan alır. Boşluk `vh`ye bağlı ve GRUPLU kalır — alt başlıktan sonra sıkı, CTA'dan önce geniş (§5'in dikey ritim notu). */ /* SATIR-İÇİ AKAR, flex satır DEĞİL. Flex hâli masaüstünde aynı görünüyordu ama mobilde metin iki satıra sarınca onay diski İKİ SATIRIN ORTASINDA, metnin solunda asılı kalıyordu — cümlenin işareti değil, yanına konmuş bir ikon gibi. `display: inline-grid` + `vertical-align` ile disk cümlenin İLK kelimesiyle aynı satıra oturur ve sarma doğal akar; ortalama da mobilde `.hero-grid`in `text-align: center`inden bedava gelir (ayrı bir kural gerekmiyor). */ .hero-trust { max-width: 100%; margin: 0 0 clamp(22px, 4.6vh, 46px); font-size: var(--fs-xl); line-height: 1.55; color: color-mix(in srgb, var(--tx1) 72%, var(--tx2)); animation: fadeUp var(--t-xl) ease .2s both; } /* Onay diski DOLU yeşil, beyaz glyph. Beyaz daire + yeşil glyph hâli zeminden hiç ayrışmıyordu. Gradyan AÇIK uçta başlayıp %70'te -deep'e oturur — glyph gövdesi hep -deep'in üstünde kalır (beyaz 3.4:1, grafik eşiği 3:1); açık ucu ortaya taşırsan eşik düşer. Hale --glow-c ile ölçekten gelir, elle yazılmaz. Ölçü 24px ve `vertical-align` ona bağlı: daha büyük bir disk satır kutusunu kendisi büyütür ve cümlenin satır aralığı komşularından ayrışır. */ .hero-trust-ico { display: inline-block; width: 24px; height: 24px; /* DİSK METNİN ORTASINA HİZALI ve hizanın ölçüsü UYDURULMAZ (2026-09-01, kullanıcı: *"check işaretini yazıyla ortala, aşağıya kaymış"*). Eski `vertical-align: -6px` ölçüldüğünde disk merkezini metnin görsel merkezinden 8,4px AŞAĞIDA bırakıyordu: `inline-grid`in taban çizgisi KENDİ İÇİNDEKİ glyph'in (FA check) taban çizgisidir, kutunun alt kenarı değil — yani -6px, sanılanın aksine, bilinmeyen bir referanstan ölçülen bir kaydırmaydı. `overflow: hidden` kutuyu kaydırma bağlamı yapar ve taban çizgisi ALT KENARA sentezlenir; hesap bundan sonra kapalı formdur: alt kenar = taban + 12px(yarı disk) - .35em(yarı cap yüksekliği). Halesi (`box-shadow`) kutunun DIŞINDA kaldığı için kırpılmaz. */ position: relative; vertical-align: calc(.35em - 12px); margin-right: 9px; background: linear-gradient(145deg, var(--cat-kesfet) 0%, var(--cat-kesfet-deep) 70%); border-radius: 50%; color: #FFFFFF; font-size: var(--fs-xs); --glow-c: var(--cat-kesfet); box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, .3); } /* Mürekkep -deep DEĞİL -ink: -deep krem zeminde 3.35:1 ile ancak idare eder, -ink aynı hue'da (158°) ve 6.9:1. İkinci öbek yeşil DEĞİL, sitenin lacivert mürekkebi — ikisi de yeşil olsaydı satır "yeşil bir blok" okunurdu. */ /* Glyph AKIŞTAN ÇIKARILIR — dekor değil, hizanın ta kendisi: akışta kalırsa kutunun taban çizgisi onun taban çizgisi olur ve yukarıdaki hesap kapanmaz. */ .hero-trust-ico i { position: absolute; inset: 0; display: grid; place-items: center; } /* TEKLİF ROZETİ (hero_trust4, 2026-09-06): disk YOK — yeşil disk ürün niteliğinin mührü, "7 gün ücretsiz deneme" bir TEKLİF; referans görselindeki ayrım da bu (üç yeşil disk + çıplak sarı yıldız). Renk duygu kartının kalbiyle aynı kararı verir: açık zeminde --sun-ink (dekor eşiği), koyu temada ham --sun. Glyph disksiz kalınca .7em'de nokta gibi kalıyordu → 1.7em (≈ disk çapının görsel dengi). Aynı özgüllük (0,1,0), dosyada sonra — base'i o yüzden yener. */ .hero-trust-ico--star { background: none; box-shadow: none; color: var(--sun-ink); } [data-theme="dark"] .hero-trust-ico--star { color: var(--sun); } .hero-trust-ico--star i { font-size: 1.7em; } .hero-trust strong { font-family: var(--font-head); font-weight: 800; color: var(--cat-kesfet-ink); } [data-theme="dark"] .hero-trust { color: var(--tx2); } /* -ink gece zemininde okunmuyor; ham yeşile açılır (ikon iki temada da dolu). */ [data-theme="dark"] .hero-trust strong { color: var(--cat-kesfet); } /* ÜÇ ROZET (2026-09-05, ikinci referans görseli — YALNIZ ana sayfa hero'su). Taban `.hero-trust` satır-içi akar (yukarıdaki gerekçe /kategoriler'in ortak bileşeni için hâlâ geçerli); ana sayfada üç kısa rozet var ve sarma ROZETLER ARASINDA olmalı, o yüzden kap flex + öğe `inline-flex`. Eski "flex'te disk iki satırın ortasında asılı kalır" tuzağı burada yok: rozet metni tek öbek, öbek içinde sarma `white-space` olmadan da pratikte gerçekleşmiyor (en uzunu ~200px). Üç etiketin ÜÇÜ DE lacivert mürekkep — yeşil yalnız disklerde kalır; üç yeşil etiket satırı "yeşil blok" yapardı (tek satırlı hâlin aynı gerekçesi). --tx1 temayla çevrilir, koyu tema için ayrı kural gerekmez; ama dark-strong kuralı (0,2,1) tek sınıflı yazımı (0,1,1) her zaman yener — o yüzden koyu tema seçicisi AÇIKÇA da yazılır (aynı özgüllük + dosyada sonra = ana sayfada geri alınır). Punto --fs-xl değil --fs: üç rozet --fs-xl'de 620px'lik kolonda iki satıra taşıyor. */ .hero-trust--badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 1.5em; font-size: var(--fs); } .hero-trust--badges .hero-trust-item { display: inline-flex; align-items: center; white-space: nowrap; } /* İnline-flex öğede dikey hiza `align-items`ten gelir; taban çizgisi hesabına gerek kalmaz. Kapalı-form `vertical-align` /kategoriler bileşeni için durur. ÖLÇÜLER EM (2026-09-05 üçüncü istek): rozet satırı masaüstünde TEK SATIR sözü verdi ve punto kolondan (cqw) türeyecek — disk/boşluk px kalsaydı satırın sabit kısmı küçülmez, dar kolonda söz yine bozulurdu. `.7em` glyph + `2.4em` disk ≈ eski 24px diskin --fs'teki ölçüsü; satır artık tek katsayıyla orantılı küçülüyor. */ .hero-trust--badges .hero-trust-ico { vertical-align: initial; flex: none; font-size: .7em; width: 2.4em; height: 2.4em; margin-right: .8em; } /* TEK SATIR YALNIZ İKİ KOLONLU DÜZENDE (≥961px): katsayı ölçüldü (aşağıdaki ölçüm notu) — punto kolon eninden türer, satır sarmaz. 960 ve altında kolon tüm ekran ama 390px'te üç rozet tek satıra ancak ~10px puntoyla sığar — okunmaz; mobilde sarma bilerek duruyor (taban kural), satır ortalanıyor. */ /* KATSAYI ÖLÇÜLDÜ ve 4. rozetle YENİDEN ÖLÇÜLDÜ (2026-09-06): üç rozetin değeri 2.27cqw'ydi (EN 43.31×, geniş dil İngilizce'ydi). "7 gün ücretsiz deneme" rozeti gelince geniş dil TR'ye döndü: toplam puntonun 54.08 katı (EN 53.11) — eski katsayıyla satır her masaüstü genişlikte ~120-150px taşıyordu (ölçüldü, _m4 turu). Sınır 100/54.08 = 1.85cqw; pay ile 1.81. BEDELİ AÇIK KAYIT: punto artık --fs tavanına HİÇ ulaşmıyor (kolon max ~674 → punto max ~12.2, 961'de 9.5) — dört rozetin tek satır sözü puntodan ödendi. Rozet kopyası yine UZARSA önce bu oran yeniden ölçülür. */ @media (min-width: 961px) { .hero-trust--badges { flex-wrap: nowrap; font-size: clamp(.6rem, .85vw, .95rem); /* cqw bilmeyen tarayıcı yedeği */ font-size: min(1.81cqw, var(--fs)); } } .hero-trust--badges strong, [data-theme="dark"] .hero-trust--badges strong { color: var(--tx1); } /* --- Nicelik: "1.000+ ekransız etkinlik" — TELEFONUN ALTINDAKİ STICKER --- 2026-09-05 ("A · Gökyüzü", kullanıcı onayı, İKİ ADIM): önce sticker telefonun ALTINA indi ve 1440+ yan yerleşimi kalktı (bant kartların); aynı akşam KUTU DA EMEKLİ OLDU (kullanıcı: "1000+ etkinlik yazısını da örnekteki gibi yaz") — bugünkü biçim düz bir SATIR: mavi ikon + kalın sayı + etiket, akışta, telefonun altında. Aşağıdaki tarihçe KUTULU sticker'ın kararlarını anlatır; kutu geri istenirse ölçüleri ve tuzakları orada, `.sticker` kiti (kapanış + fiyat paneli) ondan türedi ve YAŞIYOR. Sayı bir dönem hero'nun altında kendi bölümündeydi (`.stat-line`, bir ekran boyu yer + tek cümle), sonra sol kolonda kutusuz MOR bir blok (mor gitti: hero lacivert + Kidlio mavisi, kategori taşımayan üçüncü bir aksan rengi burada karşılıksızdı), sonra telefonun tam üstünde onunla AYNI ENİDE lacivert bir BANT, sonra sol üst köşeye BİNEN küçük bir bilgi kartı. Dördü de geri dönüş sayılır. Bugün: telefonun tam üstünde ORTALANMIŞ, ona DEĞMEYEN, hafifçe eğik bir KİDLİO STICKER'I (2026-08-26 akşamı, kullanıcı kararı; ölçüler de kullanıcının: 170×75, 20px köşe, sayı 31px, eğim -2deg). YERİ EKRAN ENİNE GÖRE: 1440px'ten geniş ekranda telefonun SAĞINDAKİ boş bantta (kullanıcı kararı, aynı akşam), altında telefonun ÜSTÜNDE. İki yerleşim tek kutuyu paylaşır — ikinci bir sticker YOK, yoksa aynı iddia sayfada iki kez durur ve biri hep yanlış yerde olur. Bandın gerekçesi "telefonun kendi kapağı" idi ve düşme sebebi de oydu: telefon kadar geniş, doygun koyu bir yüzey cihazla aynı ağırlıkta okunuyor, yani kapak olsun diye yapılan şey kapağın altındakini bastırıyordu. Köşe kartından buraya iki şey taşındı ve kaldı: gölgesizlik, açık zemin + ince mavi çerçeve. Değişen tek şey sticker'ın telefona DOKUNMAMASI. Yükü taşıyan altı karar: - DAR EKRANDA AKIŞTA DURUR ve boşluk MARJLA verilir (`margin-bottom: 14px`, kullanıcı ölçüsü). Pay kutunun EĞİLMEMİŞ alt kenarından ölçülür; -2deg eğim alt-sağ köşeyi ~3px sarkıtır, yani gerçek boşluk köşeden köşeye 11 → 17px arasında değişir ve ortalaması istenen 14px'tir. Sıfırdan büyük olduğu sürece sticker telefona DEĞMEZ — sözü tutan tek şey bu. Köşe kartı `position: absolute` idi ve bindirmesi `bottom: calc(100% - 18px)` ile ölçülüyordu; "değmesin" istendiği anda o mekanizmanın tamamı gereksizleşti — akıştaki bir marj her `zoom` basamağında oransal kalır ve ölçülecek bir bindirme bırakmaz. Bedeli hero'nun dikey bütçesi: sağ kolon 688 → 776px (74 + 14 + 688). Merdiven (aşağıda) bunu taşıyor; 900/840/800/740/680 basamaklarının beşinde de hero tam 1.00 ekran (yeniden ölçüldü). 1440px'ten GENİŞ ekranda sticker akıştan çıkıp telefonun SAĞINA geçiyor (aşağıdaki medya sorgusu) ve o 93px'i hero'ya geri veriyor. - ORTALAMA SARMALAYICIDAN GELİR (`.phone-wrap` bir kolon + `align-items: center`), sticker'ın kendi marjından değil: kutu sabit genişlikte ve kolonun eni telefondan geliyor. - STICKER TELEFONLA BİRLİKTE SÜZÜLÜR (`phoneFloat`, aynı süre/easing, GECİKMESİZ). Telefon 7 saniyede 14px yukarı süzülüyor; sticker yerinde dursaydı aradaki boşluk 16 ile 30px arasında nefes alırdı — yani istenen ölçü yalnız duruşta doğru olurdu. Üç hareket çakışmaz: `fadeUp` `transform`u, `phoneFloat` `translate`i, eğim `rotate`ı kullanıyor. - ÖLÇÜ SABİT (170×74, boy `min-height` ile): içerik iki dilde de tek satır ("ekransız etkinlik" / "screen-free activities" 142px'lik iç genişliğe sığıyor, ölçüldü). Genişlik akışkan bırakılsaydı TR ve EN'de iki farklı sticker olurdu; `height` yerine `min-height`, çünkü sığmayan bir kopya kırpılmak yerine kutuyu büyütmeli. - EĞİM `rotate` İLE, `transform` ile DEĞİL: `transform: rotate(-2deg)` yazılsaydı `fadeUp`ın kendi transform'unu SİLERDİ ve sticker giriş animasyonunu sessizce kaybederdi (hero parallax'ta bir kez düşülen tuzak). - GÖLGE YOK (kullanıcı kararı, üç tasarımda da). Telefonun kendi `--shadow-lg`i zaten orada; ikinci bir gölge sticker'ı cihazdan koparıp sayfaya yapıştırılmış bir etiket yapar. Ayrımı ince mavi çerçeve verir. Sayı SABİT: eski `[data-count]` sayacı kaldırıldı (bkz. Index.html). */ .hero-count { /* AKIŞTA, telefonun altında ve ORTALANMIŞ (`.phone-wrap` kolonu). Boşluğu sarmalayıcının `gap`i verir — akıştan çıkarsa telefonla ilişkisi kopar. Telefonla birlikte süzülür (`phoneFloat`, sticker döneminin aynı gerekçesi: yerinde dursa aradaki boşluk nefes alırdı). */ display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: var(--fs); color: var(--tx2); animation: fadeUp var(--t-xl) ease .26s both, phoneFloat 7s ease-in-out infinite; } /* (Satırın başındaki mavi ikon aynı akşam elendi — kullanıcı: "ikona gerek yok". Satır yalnız sayı + etiket.) */ /* YAN YERLEŞİM (1440+, sticker telefonun sağındaki bantta) 2026-09-05'TE KALKTI: bant "A · Gökyüzü" ile iki uygulama kartına verildi ve tek iddia iki yerde duramaz. Sticker artık HER ende akışta, telefonun altında. Eski eşiğin ölçümü kayıtta kalsın — biri geri isterse aynı tuzağa düşmesin: eşik 1440'ın altına çekilirse 1220–1300 arasında bant 120–150px kalır ve 186px'lik sticker `.hero`nun `overflow: clip`i tarafından KIRPILIR; en dar durum uzun ekrandır (zoom çalışmaz, telefon tam 330px), 1400×1000'de sağ kenara yalnız 9.8px kalıyordu. Aynı hesap bugün kartların 1280px kapısını belirliyor (aşağıda). */ /* Sayı KALIN ve `--tx1` — TEMAYLA ÇEVRİLİR: açıkta lacivert, gece zemininde aynı token beyaza döner. nowrap: "1.000+" iki satıra düşerse veri değil paragraf gibi okunur. (Kutu döneminin sarı "+"ı, 30px puntosu ve üç süs aksanı — yıldız + iki nokta — kutuyla birlikte 2026-09-05 akşamı emekli oldu; `.hc-plus`/`.hc-fx` markup'tan da kalktı. Sarı "+" istenirse tarihçe git log'da ve `--sun-ink` token notunda.) */ .hero-count b { font-family: var(--font-head); font-weight: 800; font-size: 1.2em; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tx1); } .hero-count small { font-size: inherit; font-weight: 700; color: var(--tx2); } /* ── STICKER KİTİ (2026-08-29, kullanıcı isteği — frontend-design önerisi) ── Hero'nun "1.000+" sticker'ı sitedeki en akılda kalıcı öğe; bu kit onun dilini KÜÇÜLTÜLMÜŞ ölçüde tekrar eder: aynı zemin/kenar karışımı, aynı -2deg eğim (`rotate`, transform değil), aynı gölgesizlik, aynı sarı yıldız aksanı. Değerler hero-count'tan GEÇİRİLMEDİ KOPYALANMADI — token'lar aynı, oranlar aynı, ölçüler küçük (b 17px / small 10.5px / köşe 14px). KURAL, kitin kendisi kadar önemli: NADİR kalır. Sticker işaretlenen yüzeyin KÖŞESİNE, kenarından taşarak vurulur (yapıştırılmış etiket); `aria-hidden`'dır — taşıdığı bilgi her zaman birinci kanaldan da okunur (CTA'da sayı hero'da, fiyatta deneme sözü başlıkta ve çiplerde). Kullanım yeri bugün ikidir: kapanış kutusu (`.cta-box`, Macros `ctaBand`) ve /fiyatlandirma'nın deneme paneli (`.px-panel-wrap`). Her yeni yer "dolu blok sayısı" hesabına girer — üçüncüsü eklenirse biri çıkarılmalı. */ .sticker { position: absolute; z-index: 2; display: inline-grid; justify-items: center; gap: 1px; padding: 7px 14px 6px; text-align: center; white-space: nowrap; rotate: -2deg; pointer-events: none; background: color-mix(in oklch, var(--blue) 7%, var(--card-solid)); border: 1px solid color-mix(in oklch, var(--blue) 58%, var(--card-solid)); border-radius: 14px; box-shadow: none; } [data-theme="dark"] .sticker { background: color-mix(in oklch, var(--blue) 20%, var(--card-solid)); border-color: color-mix(in oklch, var(--blue-light) 42%, var(--card-solid)); } .sticker b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 17px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tx1); } .sticker small { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--tx2); } /* Mini yıldız — hero-count'un ::before'uyla aynı yazım (FA5 glyph, emoji yasağının CSS karşılığı), bir kademe küçük. */ .sticker::before { content: "\f005"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: -8px; right: -9px; font-size: 11px; line-height: 1; color: var(--sun-ink); rotate: 14deg; pointer-events: none; } /* CTA bloğu TEK hizalı kolon: waitlist formu üstte, "çok yakında" store rozetleri altında — ikisi de aynı sol kenardan başlar, ayrı ayrı yüzmıyor. Blok kolon genişliğine yayılır (form max-width 480 ile sol hizalı kalır), böylece input label'a göre ezilip daralmaz. */ .hero-cta { display: flex; flex-direction: column; align-items: flex-start; animation: fadeUp var(--t-xl) ease .24s both; } .hero-note { margin: 14px 0 0; font-size: var(--fs); color: var(--tx3); } /* EYLEM ALANI TEK KUTUDA (2026-09-05, kullanıcı kararı: *"çıkınca ilk sen haber al'dan store çiplerine kadar olanı bir container içine al, bu alan çok karışık görünüyor, ferahlasın"*). Kutunun işi ZEMİN değil ÇERÇEVE: form başlığı, alt satırı, input+düğme, onay kutusu, hukuk satırı ve iki store rozeti — altı ayrı satır, hepsi krem hero zemininin üstünde serbest yüzüyordu ve hiçbiri ötekinin nerede bittiğini söylemiyordu. Tek kart hepsini bir eyleme bağlıyor. ZEMİN `--card`, gölge YOK: hero'nun tek gölgeli nesnesi telefon. İkinci bir gölge kutuyu kaldırır ve store rozetlerinin ghost hâlini (§18b) anlamsız kılar — o karar "hero'da üst üste dolu blok olmasın" diyordu, kutu da tam bunun için var. GENİŞLİK (2026-09-05 akşamı, kullanıcı: "kartı checkbox'lı yazı tek satıra sığacak şekilde genişlet"): kutu artık SOL KOLONUN TAMAMI (max-width yok) ve içindeki `.wl` de onunla açılır — 480px'lik form kolonu YALNIZ hero'da esner, kapanış kutusundaki form 480'de kalır. Onay metni de aynı istekle kısaldı (SiteContent notu). */ /* 2026-09-05, "A · Gökyüzü" (kullanıcı onayı): kutu KREM BİR PANEL oldu. İki bilinçli sapma, ikisi de kayda geçer: - GÖLGE GELDİ. Eski kural "hero'nun tek gölgeli nesnesi telefon" diyordu; zemin kremken paneli krem hero zemininden ayıran tek şey artık bu yumuşak gölge (kenar tek başına yetmiyordu, panel zeminle aynı sıcaklıkta). Gölge alçak ve dağınık — telefonun `--shadow-lg`iyle yarışmaz. - SARI HERO'DA BİR YER DAHA KAZANDI (sağ banttaki maskot kartı) — kullanıcı onayıyla (docs/ui/Home-Hero.md). Köşedeki sarı %50 etiketi de bu listedeydi; 2026-09-06'da öldü (aşağıdaki mezar taşı), sarı payı artık `.wl-mark` vuruşunda. `position: relative` DURUR: honeypot'un absolute input'u ve köşeye gelecek olası bir öğe buradan çapalanır — düşerse absolute çocuk en yakın konumlanmış ataya (hero'ya) kaçar ve hiçbir şey hata vermez. */ .hero-act { position: relative; width: 100%; padding: clamp(16px, 2vh, 22px) clamp(16px, 1.6vw, 24px) clamp(14px, 1.8vh, 20px); /* Karışım OKLCH'de (sRGB açık uçta chroma'yı yer, tint griye kaçar — `.cta-box`taki aynı gerekçe): %6 güneş sarısı = mock'taki krem panel. */ background: color-mix(in oklch, var(--sun) 6%, var(--card-solid)); border: 1px solid color-mix(in oklch, var(--sun) 40%, var(--card-solid)); border-radius: var(--r-xl); box-shadow: 0 22px 44px -34px rgba(36, 55, 105, .45); } /* Gece zemininde krem tint çamurlaşır; panel sitenin normal kart yüzeyine döner, ayrımı kenar taşır (gölge gece zemininde zaten okunmuyor). */ [data-theme="dark"] .hero-act { background: var(--card); border-color: var(--border-strong); box-shadow: none; } /* Form kolonu YALNIZ hero panelinde kutuyla açılır (kapanış kutusunda 480). */ .hero-act .wl { max-width: none; } /* Rozetler kutunun içinde: üst payı kutunun kendi dolgusundan sonra gelir, `clamp(12px, 2.4vh, 22px)` orada iki kat boşluk gibi okunuyordu. */ .hero-act .hero-soon { margin-top: 14px; } /* %50 ETİKETİNİN MEZAR TAŞI (doğum 2026-09-05 "A · Gökyüzü", bir küçültme turu 2026-09-06 sabahı — dolgu 5/12, punto 13/9.5, köşe 11, top -12 — ölüm aynı gün: "öncekinden iyi ama yine kampanya kartı gibi duruyor, premiumluğu düşürüyor"). `.hero-deal`, panelin sağ üst köşesine vurulmuş iki satırlık sarı etiketti (rotate -2deg, hardcode #4A3A08/#6B5410 mürekkep, `linear-gradient(160deg, --sun, #F5B82E)` zemin, fadeUp .3s). Küçültme işe yaramadı çünkü sorun boyut değil TÜRDÜ: doygun sarı zemin + eğim + köşeden taşma üçlüsü her boyda "indirim kuponu" grameri okutur — arka plan figürlerinin kapanış dersinin akrabası. Vaatlerin yeni yerleri: %50 → `wl_sub`un içindeki `.wl-mark` vuruşu (aşağıda, .wl-sub'un yanı); deneme → hero'dan TAMAMEN çıktı ("İlk haftan bizden." başlığı denendi ve kullanıcı olgusuyla düştü — deneme herkese açık; SiteContent wl_title notu; başlık şimdi "İlk günden oyunun hazır.", panel kararı iki turda, UserPanel.md). Etiket geri istenirse önce docs/ui/Home-Hero.md'nin 2026-09-06 bölümü okunur; §24'teki mobil `top: -28px` kademesi de onunla birlikte silindi. */ /* Panel içi tipografi — YALNIZ hero kapsamı (`.hero-act …`): aynı form kapanış kutusunda eski görünümüyle basılmaya devam eder, makroya dokunulmaz. Referans görselin hiyerarşisi: küçük mavi etiket ("ERKEN KATILIM") → büyük panel başlığı (`wl_title`) → teşvik satırı. */ .hero-act-eyebrow { display: block; margin: 0 0 4px; font-weight: 900; font-size: var(--fs-xs); letter-spacing: 1.8px; text-transform: uppercase; color: var(--blue-ink); } .hero-act .wl-label { display: block; margin-bottom: 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--tx1); } /* Başlığa dönen etikette zarf ikonu kalabalık — yalnız hero'da gizlenir. */ .hero-act .wl-label-ico { display: none; } /* (Eski .hero-badges/.badge-chip çip şeridi kaldırılmıştı; adı bir süre iki güven rozetini yan yana tutan sarmalayıcı olarak yaşadı, 2026-08-26'da o da gitti: kalite artık tek satır, nicelik telefonun üstünde.) */ /* (Kaydırma ipucu — .hero-scroll / .hero-scroll-arrow / @keyframes heroScrollBob — KALDIRILDI. Hero ~1060px'ken alt ucu ilk ekranın altında kalıyordu ve ipucu o kusurun yamasıydı: `position: fixed` olmasının tek sebebi bile akışta kalsa kendisinin de fold'un altına düşecek olmasıydı. Hero artık tam bir ekran, alt ucu görünüyor; ipucu ekranın altında yer kaplayan fazladan bir öğeden ibaret kalmıştı. Şablon, JS kancası ve iki dildeki `hero_scroll` kopyası da silindi.) */ /* --- Telefon mockup --- */ .hero-visual { position: relative; display: flex; justify-content: center; animation: fadeUp var(--t-xl) ease .2s both; perspective: 1200px; } /* `position: relative` YÜK TAŞIR: nicelik kartı (§5'in `.hero-count` notu) akıştan çıkmış ve konumunu BU kutudan alıyor — sarmalayıcı statik bırakılırsa kart en yakın konumlanmış ataya (hero'nun kendisine) kaçar, telefonun köşesinden kopar ve hiçbir şey hata vermez. Kutunun ölçüsü de telefonundur: akışta tek çocuk o. */ /* BOŞLUK STICKER'IN MARJINDA DEĞİL, SARMALAYICININ `gap`İNDE (kullanıcı kararı, 2026-08-26 akşamı, birebir değerlerle verildi). Kolon flex olduğu için gap yalnız İKİ çocuk varken iş yapar — sitede `.phone-wrap` sınıfını taşıyan tek öğe ana sayfa hero'su (öteki telefonlar `phone-wrap--lg` / `cw-hero-phone` / `night-phone-wrap`), yani kural başka hiçbir sayfaya dokunmuyor. ≥1440px'te sticker `position: absolute` ile akıştan çıkıyor ve gap orada zaten geçmiyor; o yerleşimin payı kendi `left: calc(100% + 14px)`inden geliyor. */ .phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px !important; } /* ── "A · GÖKYÜZÜ" KATMANI (2026-09-05, kullanıcı onayı) ───────────────────── Üç yeni dekordan İKİSİ YAŞIYOR: EL ÇİZİMİ OK (kopyadan telefona) ve sağ bantta İKİ UYGULAMA KARTI — üçüncüsü, güneş halkası, 2026-09-06'da öldü (bir alttaki mezar taşı). Arka plan dekorunun üç kez denenip üç kez geri alındığı kayıt (dosyanın kapanış notu) OKUNDU: bu katman sayfa geneli bir doku değil, hero'nun KENDİ nesneleri; ok ve kartlar yalnız ≥1240px'te (aşağıda). Kartlar `.phone-wrap`ın İÇİNDE — sticker'ın gerekçesi: parallax sarmalayıcıyı kaydırıyor, `zoom` merdiveni onu ölçekliyor; dışarıda kalan her şey sayfa kaydıkça telefondan ayrılır. */ /* MEZAR TAŞI (2026-09-06): `.hero-halo` — telefonun arkasındaki halka, İKİ BİÇİMİ DE AYNI GÜN ÖLDÜ. Tarihçe tek nefeste: 2026-09-05'te bej GÜNEŞ HALKASI olarak doğdu (425 → kullanıcı isteğiyle 540px, card-solid karışımlı iki-duraklı radial, %78'de biten kenar), 2026-09-06 sabahı kullanıcı "shape değil IŞIK" dedi ve hale rafine edildi (444px, merkez 41%/362, `--sun` %30→%16 TRANSPARANA dağılan gradyan + 14px blur, sol-altta %11 `--blue` organik leke, gecede mavi ışıma) — AYNI GÜN "haleyi kaldır" ile o da gitti. Bu, hero/arka plan dekorunun DÖRDÜNCÜ ölümü (doku · renk alanı · kenar figürleri · ışık halesi — ilk üçün kaydı dosyanın kapanış notunda). Ders öncekiyle aynı: rafine etmek kurtarmadı, dekorun kendisi istenmiyor. Beşincisini önermeden önce kapanış notundaki soru sorulur: "ne koyalım" değil "bunu kim görecek". Telefon zeminden gölgesiyle (`--shadow-lg`) zaten ayrışıyor. */ /* Ok: `.hero-visual`ın sol üstünde, kolonlar arası boşlukta. Kendini çizerek gelir (stroke-dashoffset); mürekkep metin ailesinden. 1240 kapısı kartlarla ortak: dar ekranda kolon arası boşluk (clamp alt ucu 44px) oku taşıyamaz, kopyanın üstüne biner. */ /* OK ARTIK YALNIZ DEĞİL: 2026-09-10'da yanına "Pedagog onaylı" rozeti geldi (kullanıcı: *"başlıktan kaldır, telefona giden okun oraya badge gibi koy"*), ikisi tek sarmalayıcıda (`.hero-arrow-note`) duruyor. Konum sarmalayıcıya taşındı: rozet + ok tek blok olarak yerleşir, yoksa iki ayrı `absolute` öğe her genişlikte elle hizalanırdı. 1240 kapısı da buraya taşındı — ikisi birlikte açılır, birlikte kapanır. */ .hero-arrow-note { display: none; position: absolute; top: -18px; /* SAĞ KENARDAN ÇAPALI, ve çapa noktası SOL kolonun payı değil TELEFONUN kenarı: `.hero-visual`ın solundan +40px, yani rozetin sağ kenarı her genişlikte telefonun (kolon içinde 48–62px içeride) SOLUNDA kalır. `left` ile çapalanırsa rozet sağa doğru büyür ve telefona binerdi. */ right: calc(100% - 22px); width: max-content; text-align: right; color: color-mix(in srgb, var(--tx1) 75%, var(--tx2)); pointer-events: none; } /* Ok sarmalayıcının SAĞINA yaslanır (blok + `margin-left: auto`), negatif sağ marj ucu telefonun kenarına 6px bindirir — rozet sola doğru büyürken okun ucu yerinde kalsın diye. */ .hero-arrow { display: block; width: 92px; height: auto; margin: 0 -32px 8px auto; } /* Rozet OKUN ALTINDA, kuyruğunun dibinde ve okla aynı el-çizimi dilde: kart yüzeyi + yumuşak gölge + hafif eğim, yani sahneye İĞNELENMİŞ küçük bir etiket. İLK DENEME (aynı gün) rozeti okun ÜSTÜNE koymuştu ve kullanıcı reddetti (*"çok kötü olmuş"*). Ölçüm sebebi gösterdi: rozet 1512'de (874,106), okun kutusu (887,144) — yani rozet okun ne sol ne sağ kenarıyla hizalıydı, üstelik h1 ile telefon arasındaki 139px'lik boşluğun DIŞINDA, sahnenin en boş yerinde tek başına duruyordu. Şimdi rozetin sağ kenarı okun ucuyla aynı düşeyde bitiyor; iki öğe tek "işaret" gibi okunuyor. ÜÇ AYAR KULLANICIDAN (aynı gün, *"biraz daha sola alıp bir tık daha büyütürsen, çapraz hafif dursa yine süper olacak"*): sağ çapa 40 → 22px (telefona boşluk 7 → 25px), punto 13 → 14px, eğim -3 → -5deg. Okun negatif sağ marjı buna karşı BÜYÜTÜLDÜ (-14 → -32px): sarmalayıcı sola kayarken okun ucu telefonun kenarında piksel piksel yerinde kaldı — kayan şey yalnız rozet. Punto büyürken rozetin metne boşluğu ölçüldü (en dar: EN 1512), çakışma yok. Eğim `rotate` ile (transform tuzağı: `.hero-visual`ın parallax'ı transform yazıyor, çocuğunda transform kullanmak onunla yarışmaz ama okun kendi çizim animasyonuyla aynı dili konuşsun diye ayrı özellik kullanıldı). Punto SABİT px: rozet kolonun cqw bağlamının DIŞINDA (sağ kolonda) ve sahnenin ölçüsüyle değil kendi okunabilirliğiyle sınırlı. */ .hero-arrow-badge { display: inline-flex; align-items: center; padding: 8px 16px 8px 11px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--tx1); font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; rotate: -5deg; } .hero-arrow-badge .hero-trust-ico { vertical-align: initial; flex: none; font-size: 9px; width: 20px; height: 20px; margin-right: 8px; } .hero-arrow path { stroke-dasharray: 230; stroke-dashoffset: 230; animation: heroArrowDraw 1s ease .9s forwards; } @keyframes heroArrowDraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .hero-arrow path { animation: none; stroke-dashoffset: 0; } } /* İki uygulama kartı: telefonun sağ kenarına ~30px binen, bandın içine taşan küçük kartlar — keşif kartı (beyaz, katalog görseli) + maskot kartı (sarı). Telefonla BİRLİKTE süzülürler (`phoneFloat`, sticker'ın gerekçesi) ve eğim `rotate` ile (transform tuzağı). GENİŞLİK KAPISI 1240px ve HESAPLI: kart kenardan 102px taşıyor; bant = kolon içi pay (~102px) + sayfa kenarı ((vw−1180)/2, 1240'ta 30px) → 1240'ta 30px pay kalır, altında `.hero`nun `overflow: clip`i kartın sağ yarısını sessizce KIRPARDI (sticker'ın eski 1440 eşiğiyle aynı tuzak, oradaki ölçümden türetildi). */ .hero-card { display: none; position: absolute; z-index: 2; width: 132px; padding: 8px 8px 9px; justify-items: center; gap: 6px; text-align: center; pointer-events: none; background: var(--card-solid); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 32px -22px rgba(36, 55, 105, .5); } .hero-card img { width: 100%; height: auto; border-radius: 10px; display: block; } .hero-card b { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--tx1); } /* Keşif kartı referans görselin ölçüsünde ve yerinde (kullanıcı, iki turda: "örnekteki büyüklükte ve yerinde" + "daha yukarısında ve bu kadar içinde değil"): telefonun ÜST kenarı hizasına yakın 176px'lik polaroid. Bindirme İKİ KADEMELİ, çünkü bant öyle: 1240–1439'da bant ~119–139px, kart kenara ~70px biner (taşma 106px, kırpılmaz); ≥1440'ta bant ≥216px ve kart örnekteki gibi dışarı çıkar (~44px bindirme). Tek değer seçilseydi ya 1280'lik dizüstünde kart kırpılır/kaybolur ya geniş ekranda örnekten uzak dururdu — ikisi de 1280 ekran görüntüsünde YAŞANDI (kapı bir tur 1280'e çekildi, o genişlikte kartlar tamamen düştü, geri alındı). Görsel 720×338 yatay; polaroid oranına `aspect-ratio` + `object-fit: cover` ile kırpılır (kutu büyütülüp şerit gibi bırakılırsa örnekteki kare his kaybolur). */ .hero-card--pick { /* Bindirme 70 → 95px (2026-09-05: sol kolon 1.22fr'ye genişleyince sağ kolonun içi payı ~100 → ~47px'e indi ve 1240'ta kartın sağı 11px, maskot kartınki 20px KIRPILIYORDU — ölçüldü). Dar bandın çözümü yine kapıyı oynatmak değil bindirmeyi artırmak; ≥1440 değerleri örnekteki gibi durur. */ top: 46px; left: calc(100% - 95px); width: 176px; padding: 10px 10px 12px; gap: 8px; rotate: 3deg; animation: fadeUp var(--t-xl) ease .34s both, phoneFloat 7s ease-in-out infinite; } .hero-card--pick img { aspect-ratio: 8 / 7; object-fit: cover; } .hero-card--pick b { font-size: 13.5px; } /* DUYGU NOTU KARTI (2026-09-06, kullanıcı tarifi: "küçük, sıcak, premium bir duygu kartı … parlak kampanya etiketi gibi değil; yumuşak köşeli, açık krem-sarı, mini not kartı; üstte çok küçük bir kalp; hafif gölge, ince border"). Önceki hâli doygun sarı zeminde açılış Kido'suydu (78px yuvarlak maskot + "Birlikte, ekransız.", mürekkep hardcode #4A3A08) — %50 etiketiyle AYNI GÜN aynı teşhisle gitti: doygun sarı zemin + gölge kampanya etiketi okutuyor. Zemin artık eylem panelinin krem ailesi (OKLCH karışım — sRGB açık uçta chroma'yı yer, `.hero-act`taki aynı gerekçe; %14, panelin %6'sından bir tık sıcak ki beyaz keşif kartından ayrışsın), İNCE sarı kenar, ALÇAK lacivert gölge (eski amber gölge "parlak etiket"in yarısıydı). Mürekkep hardcode DEĞİL `--tx1`: zemin krem, koyu lacivert üstünde okunur ve temayla çevrilir. Kalp EMOJİ DEĞİL — eyebrow kalbiyle aynı el-çizimi SVG (currentColor), rengi `--sun-ink` (açık zeminde 3.11:1; dekor için yeter, koyu temada ham `--sun`a döner). İki satır ("Küçük anlar," / "büyüyen bağlar.") kopyaya yazılmaz: iç genişlik + `text-wrap: balance` virgülden kırar. */ .hero-card--together { /* 16 → 41px: pick kartıyla aynı ölçümün ikinci yarısı (1240'ta 20px kırpık). 2026-09-06 (kullanıcı): "konsept doğru, konum ince ayarı" — kart telefonun sağ yanına yapışık okundu → top 424 → 396 (bir tık yukarı) ve ≥1440'ta bindirme 16 → 4px (aşağıda): kenarla arasında nefes. 1240 bandında bindirme DURUR — oradaki 41px kırpık ölçümünden. */ top: 396px; left: calc(100% - 41px); padding: 12px 12px 13px; gap: 4px; rotate: -4deg; background: color-mix(in oklch, var(--sun) 14%, var(--card-solid)); border-color: color-mix(in oklch, var(--sun) 45%, var(--card-solid)); border-radius: 18px; box-shadow: 0 12px 26px -20px rgba(36, 55, 105, .45); animation: fadeUp var(--t-xl) ease .42s both, phoneFloat 7s ease-in-out infinite; } /* Gece zemininde krem tint çamurlaşır; kart panelle aynı kararı verir (normal kart yüzeyi, ayrımı kenar taşır), kalp ham sarıya döner. */ [data-theme="dark"] .hero-card--together { background: var(--card); border-color: var(--border-strong); } .hero-note-heart { width: 13px; height: auto; color: var(--sun-ink); } [data-theme="dark"] .hero-note-heart { color: var(--sun); } .hero-card--together b { color: var(--tx1); font-size: 13px; line-height: 1.4; text-wrap: balance; } @media (min-width: 1240px) { .hero-arrow-note { display: block; } .hero-card { display: inline-grid; } } @media (min-width: 1440px) { .hero-card--pick { left: calc(100% - 44px); } /* -16 → +8 (2026-09-06, kullanıcı: "telefonun sağ yanına yapışık, bir tık nefes alsın"): phone-wrap'ın %100'ü telefonun kenarından 2px ötede, yani -4px hâlâ 6px BİNDİRMEYDİ (ölçüldü) — gerçek boşluk için işaret değişir: +8px = telefonla arasında ~6px hava. Kırpılma payı ölçüldü: 1440'ta kartın sağı viewport kenarına 68-12=56px içeride, 1512'de 92, 1920'de 295 — hero'nun `overflow: clip`i dokunmuyor. 1240 bandında bindirme (-41) DURUR, oranın gerekçesi kırpık ölçümü. */ .hero-card--together { left: calc(100% + 8px); } } .phone { position: relative; /* 306 → 330px (%+7.8): hero'nun tek görseli ve sayfanın "gerçek ürün" kanıtı — panelin (Deniz) 15 saniyelik taramasında okunan şey bu. Büyüme doğrudan hero'nun dikey bütçesine giriyor; karşılığı aşağıdaki `zoom` merdiveninin sıklaştırılmasıyla ödendi. */ width: min(330px, 76vw); border-radius: 52px; padding: 11px; background: linear-gradient(160deg, #2B3555, #16203E); box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06); transform: rotateY(calc(var(--tiltY, 0) * 1deg)) rotateX(calc(var(--tiltX, 0) * 1deg)); transition: transform var(--t) var(--ease-out); animation: phoneFloat 7s ease-in-out infinite; } /* KISA EKRANDA HERO'NUN BOYUNU TELEFON BELİRLER. 306px genişlikte mockup ~638px yüksektir; navbar + dolgu ile birlikte ~770px'in altındaki her viewport'ta hero'nun "tek ekran" sözü telefon yüzünden bozulur (sol kolon metni `vh` clamp'leriyle zaten kısalıyor, telefon kısalmıyor). Ölçek `zoom` ile yapılıyor, ve iki alternatif bilerek elendi: - `width` daraltmak: içeriği KIRPAR. `.phone-screen` sabit puntolu satırlar taşır ve `overflow: hidden`dır; ayrıca kendi `min-height: 588px`i var. - `transform: scale()`: görüntüyü küçültür ama DÜZENDE hâlâ 638px yer kaplar, yani hero hiç kısalmaz — çözülmek istenen şey tam olarak budur. `zoom`u desteklemeyen eski tarayıcıda kural sessizce düşer: davranış bugünkü hâline döner, kırılan bir şey olmaz. Eşik 961px, hero'nun tek kolona indiği kırılma noktasıyla (max-width: 960) bilerek aynı: mobilde hero zaten bir ekrandan uzun, telefonu küçültmek orada yalnızca mockup'ı sebepsiz ufaltırdı. */ @media (min-width: 961px) and (max-height: 800px) { .phone { zoom: .88; } } @media (min-width: 961px) and (max-height: 700px) { .phone { zoom: .78; } } /* ANA SAYFA HERO'SUNUN KENDİ MERDİVENİ — daha sık ve daha dik, çünkü burada kısaltılması gereken şey telefon DEĞİL, "rozet + telefon" bloğunun tamamı (2026-08-26). Telefon %8 büyüdü ve üstüne 46px'lik nicelik rozeti bindi: ikisi birlikte hero'nun dikey bütçesinden ~110px daha istiyor ve eski iki basamaklı merdiven (800→.88, 700→.78) o bütçeyi 1366×768 ile 1536×864 gibi ÇOK YAYGIN iki ölçüde aşıyordu — yani rozetin ya da telefonun alt ucu ilk ekranın altında kalıyordu. Ölçülen bütçe (Chromium, 1440 genişlik): içeriğe kalan yükseklik = 0.935·vh − 76px (nav + `vh`ye bağlı hero dolgusu), sağ kolon (rozet + boşluk + telefon) = 748px · zoom. Basamaklar her bandın EN KISA ekranına göre ve ~15px payla seçildi; 660–980 arası 20px adımlarla taranıp doğrulandı. MERDİVEN 680'DE BİTER, daha aşağısı için basamak eklenmez: 660px'te SOL kolon 526px ve sağ kolon ondan zaten kısa — yani orada hero'nun boyunu telefon değil kopya belirliyor, telefonu küçültmek hiçbir şey kazandırmaz. `align-content: safe center` o noktada `start`a döner ve sayfa kaydırılır. ÖLÇEK SARMALAYICIYA YAZILIR, telefona DEĞİL (2026-08-26 akşamı). Nicelik kartı artık `.phone-wrap`ın içinde akıştan çıkmış duruyor ve konumunu ondan alıyor; telefonu tek başına ölçeklemek kartı yerinde bırakır, yani kart küçülen telefonun ekranına doğru büyür ve bindirme her ekran boyunda başka bir yere düşer. Sarmalayıcı ölçeklenince ikisi de aynı `zoom` uzayında kalır: bindirme (22px) ve taşma (28px) her basamakta oransal. Bir sonraki satır ŞART — yukarıdaki genel `.phone { zoom }` kuralları (800/700px) hero'nun telefonunu da yakalıyor ve sarmalayıcının ölçeğiyle ÇARPIŞIRDI; (0,2,0) özgüllükle hero'da geri alınıyor, o kurallar Kategoriler/Uyku sayfalarının telefonları için olduğu gibi kalır. `zoom`, `scale()` DEĞİL — gerekçe hemen yukarıda: scale düzende hâlâ tam boy yer kaplar, yani hero hiç kısalmaz. */ .hero-visual .phone { zoom: 1; } @media (min-width: 961px) and (max-height: 900px) { .hero-visual .phone-wrap { zoom: .93; } } @media (min-width: 961px) and (max-height: 840px) { .hero-visual .phone-wrap { zoom: .88; } } @media (min-width: 961px) and (max-height: 800px) { .hero-visual .phone-wrap { zoom: .80; } } @media (min-width: 961px) and (max-height: 740px) { .hero-visual .phone-wrap { zoom: .73; } } @media (min-width: 961px) and (max-height: 680px) { .hero-visual .phone-wrap { zoom: .68; } } /* Mobilde de küçülür. Hero tek kolona indiğinde metin `vh` clamp'leriyle kısalıyor ama telefon kısalmıyordu: hero 390×844'te 1.568px, yani "hero tam BİR ekrandır" kuralı masaüstünde tutup mobilde tutmuyordu (ölçüldü). Yükseklikten payı en büyük olan tek blok telefon (617px). Yine `zoom`, `transform: scale()` değil — scale düzende hâlâ tam boy yer kaplar, yani hero hiç kısalmaz; çözülmek istenen tam olarak odur (bkz. §5). */ @media (max-width: 620px) { .phone { zoom: .84; } /* Hero'da ölçek yine SARMALAYICIDA (yukarıdaki merdivenin aynı gerekçesi: nicelik kartı konumunu ondan alıyor, ayrı ölçeklenirse bindirme kayar). `.hero-visual .phone { zoom: 1 }` yukarıda geneli hero'da geri aldığı için bu satır olmadan hero'nun telefonu mobilde HİÇ küçülmez. */ .hero-visual .phone-wrap { zoom: .84; } } .phone-notch { /* iPhone 16 Pro Dynamic Island — daha ince, üste yakın hap */ position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: var(--r-full); background: #0B1226; z-index: 3; } .phone-screen { /* Uygulamanın taban mavisi — token BURADA tanımlanır ki hem telefon gövdesi hem içindeki .ps-screens aynı değeri kullansın. */ --app-screen-bg: #1A6FF5; /* KidlioBackground light taban mavisi */ position: relative; border-radius: 42px; overflow: hidden; /* TEK ZEMİN. Eskiden gövde soluk gök gradyanıydı, detay ekranı ise doygun mavi: aynı telefonun içinde iki ayrı uygulama rengi görünüyordu. Ayrıca sağ üstteki radial "güneş" parlamaları kaldırıldı — düz zemin. */ background: var(--app-screen-bg); padding: 64px 15px 20px; /* iPhone 16 Pro ekran oranı ≈ 1:2.17 (1206×2622). aspect-ratio ile boy genişlikten türer; min-height yalnızca güvenli alt sınır. */ aspect-ratio: 1 / 2.17; min-height: 588px; } [data-theme="dark"] .phone-screen { --app-screen-bg: #191970; /* KidlioBackground dark taban (gece laciverdi) */ } .ps-status { position: absolute; top: 22px; left: 26px; right: 26px; display: flex; justify-content: space-between; align-items: center; /* Zemin her ekranda doygun mavi → durum çubuğu daima beyaz (light'ta eski --ink 2.54:1 ile okunmuyordu; beyaz 4.53:1 / dark 14.85:1). */ font-size: .74rem; font-weight: 800; color: #fff; } /* Selam satırı — uygulamadaki gibi el sallayan güneş + zamana göre selam + çocuk adı alt satırı (kaynak: KidlioApp home getGreeting()). */ .ps-greet { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; /* tab bar için dikey bütçe: 16→10 */ } .ps-kido { position: relative; width: 48px; height: 48px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; overflow: visible; } .ps-kido img { width: 38px; height: 38px; } /* El sallayan güneş rozeti (uygulamadaki waving icon) */ .ps-kido::after { content: "\f185"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -7px; bottom: -6px; font-size: .7rem; line-height: 1; color: #F5A51E; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); transform-origin: 70% 70%; animation: psWave 2.6s ease-in-out infinite; } /* Selamlama mavi zeminin ÜSTÜNDE duruyor (kart içinde değil) → beyaz. */ .ps-greet b { display: block; font-family: var(--font-head); font-size: 1.02rem; color: #fff; } /* SAF beyaz — .86 alfa 3.76:1'e düşüyordu. Doygun mavide saf beyaz zaten 4.53:1, yani hiç pay yok: ikincil metin opaklıkla değil puntoyla ayrılır. */ .ps-greet small { color: #fff; font-size: .82rem; } /* Yüzey OPAK — detay ekranındaki .ps-sec ile aynı reçete. Doygun mavi zemin üzerinde .72 alfa kartı zemini içinden sızdırıp bulanık bir leke gibi okunuyordu; aynı "pus" sorunu sayfa kartlarında da bu şekilde çözülmüştü. */ .ps-card { background: rgba(255,255,255,.95); border: 1px solid rgba(26,111,245,.08); border-radius: var(--r-lg); padding: 15px 14px; box-shadow: 0 10px 26px -14px rgba(10,40,120,.45); } [data-theme="dark"] .ps-card { background: rgba(18,20,90,.88); border-color: rgba(255,255,255,.14); box-shadow: var(--shadow-sm); } /* Plan kartının başlık SATIRI — `
` DEĞİL, `
` (2026-08-26): partial her zaman `aria-hidden` bir maketin içinde render ediliyor, yani başlığın erişilebilir adı boştu (gerekçe PhonePlan.html'de). İlk dört bildirim taban `h1..h5` kuralından KOPYALANDI — `
` onları miras almaz ve yazılmazsa satır Nunito 400'e düşer. Ölçüler değişmedi. */ .ps-card-h { font-family: var(--font-head); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; margin: 2px 2px 12px; font-size: .96rem; color: var(--ink); display: flex; align-items: center; gap: 6px; } [data-theme="dark"] .ps-card-h { color: #EAF1FF; } /* Plan başlığı başında kıvılcım, sonunda ilerleme rozeti ("Bugun" / "N an" onay rozeti) */ .ps-card-h::before { content: "\f0d0"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .85em; color: #F5A51E; } .ps-plan-badge { margin-left: auto; padding: 3px 9px; border-radius: var(--r-full); font-size: .62rem; font-weight: 800; color: var(--blue); background: rgba(46,139,247,.12); } [data-theme="dark"] .ps-plan-badge { color: var(--blue-light); background: rgba(108,180,255,.16); } /* Plan satırı — nötr kart yüzeyi (uygulamadaki sade plan kartı). Kategori rengi satırı boyamaz; yalnızca thumb halkasında + kategori etiketinde yaşar. --pc: satırın kategori rengi (thumb/etiket için, inline set edilir). */ .ps-item { --pc: var(--blue); position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; /* tab bar için dikey bütçe: 11→9 */ margin-top: 6px; /* 8→6 */ border-radius: var(--r); /* Satır artık BEYAZ kartın içinde duruyor (zeminin değil) → beyaz üstüne beyaz olmasın diye hafif mavi tint; ayırt edilebilir ama kartı bölmez. */ background: rgba(26,111,245,.055); border: 1px solid rgba(26,111,245,.10); box-shadow: none; } [data-theme="dark"] .ps-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } .ps-item:first-of-type { margin-top: 0; } .ps-dot { flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; font-size: 1.3rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent); } .ps-thumb { flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent); } .ps-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Plan satırındaki renkli noktada kategori illüstrasyonu (WebP, şeffaf zemin) */ .ps-dot--img img { width: 78%; height: 78%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); } /* Satır bilgisi — üstte kategori badge (Oyna · 15dk) + alt kategori, altında başlık. Uygulamadaki DailyPlanWidget kart info bloğunun düzeni. */ .ps-item-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; } .ps-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .ps-cat { flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-full); font-size: .58rem; font-weight: 800; white-space: nowrap; letter-spacing: .1px; /* WCAG: kategori rengi burada METİN — açık zeminde (F5A51E/23C38C okunmaz). Ham rengi koyulaştırarak beyaz çip üstünde okunur bir ton elde ediyoruz; çip zemini (aşağıda) ham renkte kalır (dolgu). */ color: color-mix(in srgb, var(--pc) 62%, #17233f); background: color-mix(in srgb, var(--pc) 13%, transparent); } [data-theme="dark"] .ps-cat { color: color-mix(in srgb, var(--pc) 78%, #ffffff); } .ps-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; font-weight: 600; color: var(--tx2); } .ps-item-info b { display: block; font-family: var(--font-head); font-size: .87rem; line-height: 1.2; color: var(--ink); } [data-theme="dark"] .ps-item-info b { color: #EAF1FF; } /* "Neden bu öneri" çipi — app'teki koyu yarı saydam pill (küçük, beyaz metin) */ .ps-reason { align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: var(--r-full); background: rgba(15,27,46,.55); color: #fff; font-size: .52rem; font-weight: 700; letter-spacing: .1px; white-space: nowrap; } .ps-pill { margin: 12px auto 0; width: fit-content; /* 16→12: plan ekranında bara sığar */ padding: 10px 22px; background: var(--grad-brand); color: #fff; font-weight: 800; font-size: .86rem; border-radius: var(--r-full); box-shadow: var(--shadow-brand); } /* Alt tab bar — app'in dekoratif kopyası (kaynak: KidlioApp src/components/GlobalTabBar.tsx). phone-screen viewport'una sabitlenir (plan ekranı içeriği taşabildiği için plan ekranına bağlanamaz — overflow kırpardı). Plan içeriği alta çarpmasın diye plan ekranına alt boşluk verilir; detay/kutlama ekranlarında gizlenir. KÖŞE KURALI: app'te yalnızca ÜST köşeler yuvarlak (borderTopLeftRadius / borderTopRightRadius), alt kenar cihazın dibine yapışık. Burada da öyle — bir zamanlar `border-radius: 0 0 36px 36px` vardı ve barın 36px'lik alt kavisi, ekranın 42px'lik kavisinden içeride kaldığı için alt köşelerde mavi zemin sızıyordu: bar "dipten kopuk" görünüyordu. Alt köşeler 0 kalmalı; dışarı taşan kısmı zaten .phone-screen'in overflow'u ekran şekline kırpar. */ .ps-screen--plan { padding-bottom: 52px; } .ps-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 7px 6px 13px; /* alt: iOS safe-area payının ölçeklisi */ border-top: 1px solid rgba(46,139,247,.25); /* app'teki cam bar: açık mavi zemin + üstten beyaz iç parlama */ background: linear-gradient(to bottom, rgba(255,255,255,.42), rgba(255,255,255,0) 60%), rgba(225,240,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 18px 18px 0 0; /* sw(24) → ekran genişliğine ölçekli */ transition: opacity var(--t-lg) ease; } .phone-screen:has(.ps-screen--detail.is-active) .ps-tabbar, .phone-screen:has(.ps-screen--done.is-active) .ps-tabbar { opacity: 0; } [data-theme="dark"] .ps-tabbar { background: linear-gradient(to bottom, rgba(174,205,255,.06), rgba(174,205,255,0) 60%), rgba(50,60,160,.96); border-top-color: rgba(174,205,255,.22); } .ps-tab { position: relative; flex: 1; display: grid; place-items: center; min-height: 26px; font-size: .84rem; line-height: 1; color: rgba(59,130,246,.35); /* TAB_INACTIVE_LIGHT */ } [data-theme="dark"] .ps-tab { color: rgba(255,255,255,.40); } .ps-tab.is-active { color: #3B82F6; } /* TAB_ACTIVE_LIGHT */ [data-theme="dark"] .ps-tab.is-active { color: #AECDFF; } /* Aktif sekmenin arkasındaki hap — app'teki pillBg */ .ps-tab.is-active::before { content: ""; position: absolute; z-index: -1; width: 35px; height: 28px; border-radius: 10px; background: rgba(59,130,246,.15); } [data-theme="dark"] .ps-tab.is-active::before { background: rgba(174,205,255,.22); } /* Ortadaki yüzen orb — app'teki FloatingOrb: beyazdan maviye dikey gradyan, bardan yukarı kalkık. (app'in orbHighlight beneği burada taşınmadı: gradyanın tepesi zaten beyaz, bu ölçekte leke gibi duruyordu.) */ .ps-tab.ps-tab--orb, [data-theme="dark"] .ps-tab.ps-tab--orb { flex: 0 0 auto; width: 42px; height: 42px; margin: -16px 6px 0; border-radius: 50%; color: #fff; font-size: .95rem; background: linear-gradient(to bottom, #FFFFFF 0%, #7FB8FA 35%, #1A6FF5 100%); box-shadow: 0 6px 12px -2px rgba(26,111,245,.55); } /* --- Telefon turu: ekran döngüsü (sınıfları JS yönetir; JS yokken yalnız is-active işaretli 1. ekran görünür — bugünkü statik tasarım) --- */ .phone-screen { display: flex; flex-direction: column; } .ps-screens { position: relative; flex: 1; } .ps-screen { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(36px); transition: opacity var(--t-lg) ease, transform var(--t-lg) ease, visibility 0s linear var(--t-lg); } .ps-screen--plan { position: relative; } .ps-screen--detail, .ps-screen--done { position: absolute; inset: 0; } .ps-screen.is-exit { transform: translateX(-36px); } .ps-screen.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-lg) ease, transform var(--t-lg) ease, visibility 0s; } /* Dokunma göstergesi (parmak ucu + halka dalgası) */ .ps-tap { position: absolute; top: 0; left: 0; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 38%, transparent); box-shadow: 0 0 0 2px rgba(255,255,255,.7), var(--shadow-sm); opacity: 0; pointer-events: none; } .ps-tap::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; } .ps-tap.is-tapping { animation: psTap .9s ease both; } .ps-tap.is-tapping::after { animation: psTapRipple .9s ease both; } /* Ekran 2 — etkinlik detayı: gerçek uygulama ekranının küçültülmüş kopyası. Uygulamanın kendine özgü renkleri app-brand-matching token olarak burada (kaynak: KidlioApp KidlioBackground.tsx, categoryColors.ts, categories.ts): */ .ps-screens { /* --app-screen-bg .phone-screen'de tanımlı (tek zemin), buradan miras alınır */ --app-play: #FF2DBE; /* categoryColors.play.solid (Oyna pembesi) */ --app-play-soft: #FFA5E1; /* play orb gradyanı — açık durak */ --app-play-deep: #D71E9B; /* play orb gradyanı — koyu durak */ --app-science: #3CC795; /* "Doğa ve Bilim" alt kategori chip rengi */ --app-body-tx: #4B5563; /* uygulama kart gövde metni */ } [data-theme="dark"] .ps-screens { --app-science: #5EEAB5; /* alt kategori darkColor */ --app-body-tx: rgba(255,255,255,.8); } .ps-screen--detail { /* Uygulamadaki gibi uçtan uca mavi zemin: phone-screen padding'ini geri al */ inset: -62px -16px -18px; padding: 56px 13px 13px; display: flex; flex-direction: column; /* Gövde ile birebir aynı düz zemin — sağ üst beyaz "güneş" parlaması ve sol alt lacivert gölge kaldırıldı; ekranlar arası renk farkı kalmadı. */ background: var(--app-screen-bg); } /* İç kaydırma: içerik uygulamadaki doğal boyunda (ekrandan uzun) durur; tur sırasında JS, .ps-detail-inner'ı translateY ile aşağı süpürür. */ .ps-detail-scroll { flex: 1; min-height: 0; overflow: hidden; } .ps-detail-inner { display: flex; flex-direction: column; gap: 8px; will-change: transform; } /* Üst bar: geri butonu + "Pedagog eşliğinde" rozeti + favori kalbi. ROZET METNİ `detail.badge`DAN gelir; "onaylı" DEĞİL (mühür formu yasak, gerekçe SiteContent.py'deki trust_explainer notunda). */ .ps-app-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ps-hbtn { width: 22px; height: 22px; border-radius: var(--r-sm); background: rgba(255,255,255,.88); display: grid; place-items: center; color: var(--ink); font-weight: 800; font-size: .74rem; line-height: 1; } .ps-trust { padding: 3px 10px; border-radius: var(--r-full); background: rgba(255,255,255,.88); color: #166534; font-weight: 800; font-size: .56rem; white-space: nowrap; } .ps-detail-title { display: block; text-align: center; font-family: var(--font-head); font-size: 1.04rem; font-weight: 700; line-height: 1.2; color: #fff; text-shadow: 0 1px 6px rgba(10,40,120,.35); } /* Uygulamadaki section kartı (Özet / Gereken Malzemeler / Nasıl Yapılır) */ .ps-sec { background: rgba(255,255,255,.95); border: 1px solid rgba(26,111,245,.08); border-radius: var(--r); padding: 10px 11px; box-shadow: 0 3px 10px -4px rgba(10,40,120,.35); } [data-theme="dark"] .ps-sec { background: rgba(18,20,90,.88); border-color: rgba(255,255,255,.14); } .ps-sec-head { display: flex; align-items: center; gap: 5px; } .ps-sec-ico { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--app-play) 20%, #fff); display: grid; place-items: center; font-size: .6rem; line-height: 1; } [data-theme="dark"] .ps-sec-ico { background: color-mix(in srgb, var(--app-play) 36%, transparent); } .ps-sec-head h6 { margin: 0; font-size: .73rem; color: var(--ink); flex: 1; min-width: 0; } [data-theme="dark"] .ps-sec-head h6 { color: #fff; } .ps-chip--sub, .ps-chip--age { padding: 2px 7px; border-radius: 6px; font-size: .56rem; font-weight: 800; white-space: nowrap; } .ps-chip--sub { background: var(--app-science); color: #fff; } .ps-chip--age { background: rgba(15,27,46,.06); border: 1px solid rgba(15,27,46,.1); color: var(--ink); } [data-theme="dark"] .ps-chip--age { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: #fff; } .ps-sec-body { margin: 6px 1px 0; font-size: .68rem; line-height: 1.45; color: var(--app-body-tx); } /* Görsel — uygulamadaki gibi tam genişlik, 2:3 dikey aktivite kartı */ .ps-detail-hero { display: block; flex: none; aspect-ratio: 2 / 3; border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); } .ps-detail-hero img { width: 100%; height: 100%; object-fit: cover; } /* "0 / N" ilerleme chip'i (Malzemeler + Nasıl Yapılır başlıklarında) */ .ps-progress { padding: 2px 7px; border-radius: 6px; font-size: .56rem; font-weight: 800; color: var(--ink); background: rgba(15,27,46,.06); } [data-theme="dark"] .ps-progress { color: #fff; background: rgba(255,255,255,.1); } /* Malzeme checklist'i — kare onay kutuları */ .ps-mats { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .ps-mats li { position: relative; padding-left: 20px; font-size: .67rem; line-height: 1.4; color: var(--app-body-tx); } .ps-mats li::before { content: ""; position: absolute; left: 1px; top: 2px; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid #9CA3AF; } /* Adım ilerleme çubuğu + numaralı timeline (ilk adım "aktif" pembe halka) */ .ps-stepbar { height: 4px; border-radius: var(--r-full); background: rgba(15,27,46,.06); margin: 6px 0 2px; overflow: hidden; } [data-theme="dark"] .ps-stepbar { background: rgba(255,255,255,.08); } .ps-stepbar i { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--app-play); } .ps-steps { list-style: none; margin: 3px 0 0; padding: 0; counter-reset: psstep; } .ps-steps li { counter-increment: psstep; position: relative; padding: 5px 0 5px 28px; font-size: .67rem; line-height: 1.4; color: var(--app-body-tx); } .ps-steps li::before { content: counter(psstep); position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; font-weight: 800; background: #E5E7EB; color: #9CA3AF; } [data-theme="dark"] .ps-steps li::before { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); } .ps-steps li:first-child::before { background: #fff; border: 2px solid var(--app-play); color: var(--app-play); } [data-theme="dark"] .ps-steps li:first-child::before { background: rgba(255,255,255,.1); } .ps-steps li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 24px; bottom: -4px; width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--app-play) 16%, transparent); } /* "Tamamla" orb'u — uygulamadaki dairesel kategori-gradyan CTA */ .ps-orb { position: relative; align-self: center; flex: 0 0 auto; margin: 3px 0 4px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; /* Sol üstteki beyaz "parlama" (specular highlight) kaldırıldı — telefonun içinde güneş yansıması istenmiyor; renk gradyanı tek başına kalıyor. */ background: linear-gradient(160deg, var(--app-play-soft) 0%, var(--app-play) 55%, var(--app-play-deep) 100%); color: #fff; font-weight: 800; font-size: .66rem; text-align: center; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--app-play) 70%, transparent); } /* Tur, dokunma anında is-pressed verir: basılma (scale) + halka dalgası */ .ps-orb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; } .ps-orb.is-pressed { animation: psOrbPress .6s var(--ease-pop) both; } .ps-orb.is-pressed::after { animation: psOrbRing var(--t-xl) ease .16s both; } /* Ekran 3 — kutlama / tamamlama */ .ps-screen--done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ps-confetti { position: absolute; inset: 8px; pointer-events: none; background-image: radial-gradient(circle at 14% 18%, var(--c-oyna) 3px, transparent 4px), radial-gradient(circle at 82% 12%, var(--c-dusun) 3px, transparent 4px), radial-gradient(circle at 68% 26%, var(--c-kesfet) 2.5px, transparent 3.5px), radial-gradient(circle at 28% 32%, var(--c-muhabbet) 2.5px, transparent 3.5px), radial-gradient(circle at 90% 46%, var(--c-oyna) 2px, transparent 3px), radial-gradient(circle at 8% 58%, var(--c-dusun) 2.5px, transparent 3.5px), radial-gradient(circle at 80% 72%, var(--c-muhabbet) 3px, transparent 4px), radial-gradient(circle at 18% 82%, var(--c-kesfet) 3px, transparent 4px), radial-gradient(circle at 55% 92%, var(--c-oyna) 2px, transparent 3px), radial-gradient(circle at 42% 8%, var(--sun) 2.5px, transparent 3.5px); opacity: .9; animation: confettiDrift 4.5s ease-in-out infinite alternate; } .ps-done-kido { width: 84px; height: 84px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; margin-bottom: 14px; } [data-theme="dark"] .ps-done-kido { background: rgba(18,20,90,.95); } .ps-done-kido img { width: 64px; height: 64px; } .ps-screen--done.is-active .ps-done-kido { animation: bounceIn var(--t-xl) ease .4s both; } /* Kutlama metni de doğrudan mavi zeminde → beyaz. */ .ps-done-title { font-family: var(--font-head); font-size: 1.35rem; color: #fff; } .ps-done-sub { color: #fff; font-size: .84rem; margin-top: 4px; } .ps-done-progress { width: 66%; height: 8px; margin-top: 16px; border-radius: var(--r-full); /* Yiv de mavi zeminde: mavi-üstü-mavi yerine beyaz saydam → dolgu okunur. */ background: rgba(255,255,255,.28); overflow: hidden; } .ps-done-progress i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); transform-origin: left; } .ps-screen--done.is-active .ps-done-progress i { animation: psBarGrow 1s ease .5s both; } /* "4/4 etkinlik" — light'ta --tx2 koyu mavi-gri olduğu için mavi zeminde tamamen kayboluyordu (görsel kontrolde yakalandı, ölçüm probe'unda yoktu). */ .ps-done-count { color: #fff; font-size: .74rem; font-weight: 800; margin-top: 7px; } .ps-screen--done .ps-pill { margin-top: 18px; } /* ---------------------------------------------------------------------------- 7) (Stats bandı ve ardından gelen .stat-line "sıcak satır" da kaldırıldı; ölü kuralları temizlendi. Sayı artık hero'da, telefonun sol üst köşesine binen küçük bilgi kartında — .hero-count. HERO'NUN SAYACI GİTTİ: sticker 170px'lik bir kutu, orada kıpırdayan bir rakam okunacak bir hareket değil. Site.js'in sayaç bloğu DURUYOR ve ölü DEĞİL: ana sayfada hâlâ tek bir [data-count] var — gelişim çemberinin merkezindeki "1.000+" sayacı (Components/Site/GrowthWheel.html). Blok "hiçbir düğüm bulmuyor" diye silinirse o sayı sayfaya sessizce sabit gelir.) ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 8) Kategori kartları ---------------------------------------------------------------------------- */ /* IZGARA KOLON SAYISI İÇERİĞE GÖRE, "4" DİYE VARSAYILARAK DEĞİL. Taban `repeat(4, 1fr)` idi ve tek kullanıcısı kategori sayfalarının "Diğer dünyalar" bölümüydü: orada HER ZAMAN 3 kart var (dört kategoriden bulunulan çıkar), yani dört sayfanın dördünde de satırın sağında 299px boş bir kolon duruyordu (1440'ta ölçüldü). Kolon sayısı bu yüzden kart sayısına eşit: 3. `auto-fit` denenip elendi: 1180px kapta minmax(240px,1fr) yine 4 yuva açar, yani aynı boş kolonu geri getirir. (Bir dönem bir de `.cat-grid--map` vardı — Kategoriler sayfasındaki dört dünya kart haritası. Bölüm üstündeki balonları tekrarladığı için kaldırıldı, bkz. Categories.html'in tepesindeki not.) */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cat-card { --cat: var(--blue); --glow-c: var(--cat); /* parıltı ölçeği kategorinin rengini alır (rozete de miras kalır) */ position: relative; display: flex; flex-direction: column; gap: 12px; padding: var(--sp-md); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease; } .cat-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cat) 30%, var(--border)); box-shadow: var(--shadow), var(--glow-lg); } .cat-card:hover .cat-emoji { transform: translateY(-2px); box-shadow: var(--glow); } .cat-emoji { width: 64px; height: 64px; display: grid; place-items: center; font-size: 2rem; border-radius: var(--r); background: color-mix(in srgb, var(--cat) 12%, var(--card-solid)); border: 1px solid color-mix(in srgb, var(--cat) 18%, transparent); box-shadow: var(--glow-sm); transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease; } /* Diğer kategoriler kartında kategori illüstrasyonu (WebP, şeffaf zemin) */ .cat-emoji--img img { width: 78%; height: 78%; object-fit: contain; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); } .cat-name { font-size: var(--fs-4xl); margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .cat-name .tag { font-size: var(--fs-sm); font-weight: 700; color: color-mix(in srgb, var(--cat) 78%, var(--tx1)); } .cat-desc { margin: 0; } /* "İncele →" — KATEGORİ RENGİ AMA ZEMİNİN MÜREKKEBİYLE KARIŞMIŞ HÂLİ. Ham `--cat-deep` yazıyordu ve dört kategoride sekiz kombinasyonun BEŞİ AA'nın altındaydı (ölçüldü, kart zemininde): açık temada Düşün 2.90 · Keşfet 3.35, koyu temada Oyna 3.22 · Keşfet 4.44 · Muhabbet 2.56. `-deep` varyantı AÇIK zemin için koyulaştırılmıştır; gece zemininde tam ters yönde çalışır — bu yüzden karışım YÖNÜ temaya göre değişir, tek bir değer iki temayı birden kurtaramaz (.energy-line ikonundaki aynı kural). Oran her iki yönde de en yüksek geçen değer: kategori rengi olabildiğince korunsun, ölçüm 4.5'i geçsin. Sonuç (kart zemininde, dört kategori): açık 6.63 · 4.98 · 4.97 · 7.52 koyu 7.56 · 10.0 · 9.44 · 7.22 Oranı yükseltmek renge yaklaştırır ve ölçümü AA'nın altına indirir; hiçbir şey hata vermez, yalnız bağlantı okunmaz olur. */ .cat-more { margin-top: auto; padding-top: 14px; font-family: var(--font-head); font-weight: 700; color: color-mix(in oklch, var(--cat-deep, var(--cat)) 62%, var(--tx1)); transition: transform var(--t-sm) ease; } [data-theme="dark"] .cat-more { color: color-mix(in oklch, var(--cat) 58%, #FFF); } .cat-card:hover .cat-more { transform: translateX(5px); } /* ---------------------------------------------------------------------------- 8b) Kategori balonları (ana sayfa) — uygulamadaki dairesel gradyan balonlar; tıklayınca o kategoriden 4 gerçek etkinlik açılır. Gradyan durakları categoryColors.ts .gradient[] dizilerinden. YERLEŞİM KURALI: ızgara SABİT. Kartlar 1-2. satıra elle yerleştirilir, panel `grid-column: 1 / -1` ile otomatik olarak ALTLARINA (3. satır) düşer. Böylece bir kart açıldığında hiçbir kart yer değiştirmez — eski davranışta açılan kart tüm satırı kaplayıp kalan üçünü kaydırıyor, düzen tek sütunlu/dengesiz görünüyordu. DURUM: gizli checkbox (.cat-switch) → `:checked + .cat-bubble + .cat-panel`. CSS-only; JS yoksa da açılır. Site.js yalnız "tek panel açık" ekler. ---------------------------------------------------------------------------- */ .cat-bubbles { display: grid; /* DÖRT KOLON, iki değil (2026-09-01). İki kolonluk hâli, balonların yanında `PhoneCategories` maketi dururken doğruydu: kolonun yarısını telefon alıyordu. Maket kalkınca (bkz. Index.html'deki bölüm notu) dört balon 1440'ta ~580px genişliğinde dört BOŞ beyaz karta dönüştü — maskot + ad + tek satır, gerisi boşluk; yani tam olarak "230px kutuda iki satır bilgi" eleştirisinin kendisi. Dört kolonda kart ~270px'e iner ve dolu okunur. ÖLÇÜLDÜ: balon ızgarası 1440x900'de 471 → 251px. */ grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 20px); align-content: start; /* .cat-switch'in çıpası. Olmazsa gizli checkbox belgenin sol üstüne konumlanır ve odaklandığı an tarayıcı sayfayı EN BAŞA kaydırır. */ position: relative; } /* Kart hücreleri SABİT ve bu bir süs değil: paneller aynı ızgaranın çocuğu ve açıldıklarında `1 / -1` ile tam satır isterler. Otomatik akış bırakılsaydı açılan bir panel, kendisinden SONRAKİ balonları da alt satırlara dağıtırdı — yani bir kategoriyi açmak dört dünyanın düzenini bozardı. 2026-09-01: dördü de TEK SATIRDA (1/1..1/4). Öncesi 2x2 idi ve doğruydu — balonların yanında `PhoneCategories` maketi duruyordu, kolonun yarısı telefonundu. Maket kalkınca 2x2, 1440'ta dört ~580px'lik BOŞ beyaz kart üretti (maskot + ad + tek satır, gerisi boşluk). Kategori sayısı değişirse burası ve `.cat-bubbles`ın kolon sayısı BİRLİKTE güncellenir; ayrışırsa fazladan kolon sessizce implicit olarak açılır. */ .cat-bubble:nth-of-type(1) { grid-area: 1 / 1; } .cat-bubble:nth-of-type(2) { grid-area: 1 / 2; } .cat-bubble:nth-of-type(3) { grid-area: 1 / 3; } .cat-bubble:nth-of-type(4) { grid-area: 1 / 4; } /* Panel: kapalıyken display:none olduğu için ızgarada hiç hücre tüketmez; açıldığında tam genişlik ister ve 1-2. satır dolu olduğundan 3. satıra iner. */ .cat-panel { display: none; grid-column: 1 / -1; } .cat-switch:checked + .cat-bubble + .cat-panel { display: block; } /* Durumu taşıyan onay kutusu. display:none DEĞİL — klavyeyle ulaşılabilir kalmalı (Tab ile odaklan, Space ile aç/kapa). */ .cat-switch { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .cat-bubble { /* Slug bazlı gradyan durakları (açık → orta → koyu) */ --cg1: #6CB4FF; --cg2: #2E8BF7; --cg3: #1A6FF5; --glow-c: var(--cat); /* --cat inline gelir (CategoryBubbles.html) */ cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: var(--sp-sm) 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease, background var(--t) ease; } .cat-bubble--oyna { --cg1: #FFA5E1; --cg2: #FF2DBE; --cg3: #D71E9B; } .cat-bubble--dusun { --cg1: #FEE682; --cg2: #F5A51E; --cg3: #DC8214; } .cat-bubble--kesfet { --cg1: #78EBBE; --cg2: #23C38C; --cg3: #0FA06E; } .cat-bubble--muhabbet { --cg1: #AFBEFF; --cg2: #6E73F0; --cg3: #5550E1; } .cat-bubble:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cat) 30%, var(--border)); box-shadow: var(--shadow), 0 22px 44px -26px color-mix(in srgb, var(--cat) 42%, transparent); } .cat-switch:focus-visible + .cat-bubble { outline: 3px solid color-mix(in srgb, var(--cat) 55%, transparent); outline-offset: 3px; } /* MASKOT SERBEST DURUR, KUTU İÇİNDE DEĞİL (2026-09-01, konsey kararı 6: "boşalan yere resim gir, kutu değil — suluboya illüstrasyonlar ve maskotlar tam boy görünsün"). Buradaki `.cat-orb` uzun süre DOLU bir gradyan disk + 3px beyaz halka idi ve suluboya kesit onun içinde %78'e küçültülüyordu: 92px'lik dairede ~72px'lik maskot, yani sitenin ayırt edici varlığı bir rozetin içine sıkışmıştı. Ölçüldü (1440x900): görünen maskot 72 → 138px. KURAL YENİ DEĞİL, sitenin her yerindeki maskot kuralının ta kendisi — `/kategoriler`in `.cw-mark`ı, kapanış kutusunun maskotu, `.steps-mascot`, `.trust-explain-kido` hepsi böyle: kutusu/kenarlığı/zemini yok, derinliği yalnız `drop-shadow` verir. Ana sayfanın dört dünya kartı bu kuralın sitedeki son istisnasıydı. RENK GİTMEDİ, KUTUSU GİTTİ: `--cat` artık sert kenarlı bir disk değil, maskotun arkasındaki yumuşak hale. Kategori kimliği hale + renkli ad + renkli "Etkinlikleri gör" satırıyla üç kanaldan okunuyor. Karışım OKLCH'de (`.cta-box`taki aynı gerekçe): sRGB'de açık uçta chroma kaybolur ve dört hale birbirinden ayrılmayan dört griye iner. Koyu temada oran %26 → %20: gece zemininde aynı değer, özellikle Düşün'ün amberinde, halesi olmayan bir "kahverengi leke" gibi okunuyordu. `cpsBubbleFloat` KALIR (uygulamanın imza hareketi) ama HOVER ARTIK GÖRSELDE: `.cat-orb`un transform'u sonsuz animasyonun elinde, oraya yazılan bir `scale` sessizce yenilir — eski `.cat-bubble:hover .cat-orb` kuralı tam olarak bu yüzden ÖLÜYDÜ ve hiçbir şey hata vermiyordu. */ .cat-orb { width: clamp(104px, 12vw, 138px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 46%, color-mix(in oklch, var(--cat) 26%, transparent) 0 50%, transparent 72%); animation: cpsBubbleFloat 5s ease-in-out infinite; } [data-theme="dark"] .cat-orb { background: radial-gradient(circle at 50% 46%, color-mix(in oklch, var(--cat) 20%, transparent) 0 50%, transparent 72%); } /* GÖRSELSİZ KATEGORİ YEDEĞİ — burada disk KALMAK ZORUNDA: beyaz bir glyph şeffaf halenin üstünde krem zeminde görünmez olur. Yedek bugün hiç çalışmıyor (dört kategorinin dördünde de `img` var) ama düşerse sessizce boş bir daire kalır. */ .cat-orb-ico { width: 78%; height: 78%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(120% 120% at 32% 18%, var(--cg1), var(--cg2) 60%, var(--cg3)); border: 3px solid rgba(255,255,255,.6); box-shadow: inset 0 8px 14px -8px rgba(255,255,255,.6); font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); } [data-theme="dark"] .cat-orb-ico { border-color: rgba(255,255,255,.28); } /* Kategori illüstrasyonu — şeffaf WebP, hale kadar TAM BOY. */ .cat-orb-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); transition: transform var(--t) var(--ease-out); } .cat-bubble:hover .cat-orb-img { transform: scale(1.06); } .cat-bubble-name { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-2xl); color: var(--tx1); } .cat-bubble-ex { font-size: var(--fs-sm); color: var(--tx2); font-weight: 700; } /* `margin-top: auto` TABANA İTER — DÜZ `2px` DEĞİL. Izgara satırı en uzun karta göre eşitleniyor (grid `stretch`, ölçüldü: 320px'te "Keşfet" (tek satır) ile "Muhabbet Et" (iki satıra sarar) kartı birebir 301px), ama `.cat-bubble` içi `flex-start` olduğu için fazla boy varsayılan olarak ALTA düşüyordu — kısa başlıklı kartın çipi bir satır yukarıda kalıyor, ikisi yan yana bakınca sıra bozuk okunuyordu. `auto` çipi her zaman kartın dibine oturtur, başlık kaç satır sürerse sürsün (TR/EN ikisinde de). */ .cat-bubble-cue { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 800; color: var(--cat-deep, var(--cat)); /* METİN: WCAG için -deep varyantı */ } .cat-bubble-cue i { transition: transform var(--t-sm) ease; font-size: .8em; } /* Açık kart — panel artık altta ve uzakta durduğu için kaynağın hangi kart olduğu GÖZLE seçilebilmeli: kategori tintli zemin + kalın kategori halkası. */ .cat-switch:checked + .cat-bubble { background: color-mix(in srgb, var(--cat) 8%, var(--card-solid)); border-color: color-mix(in srgb, var(--cat) 45%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 32%, transparent), var(--shadow), 0 22px 44px -26px color-mix(in srgb, var(--cat) 42%, transparent); } .cat-switch:checked + .cat-bubble .cat-bubble-cue i { transform: rotate(180deg); } /* Genişleyen etkinlik paneli — ızgaranın altında, tam genişlikte tek şerit */ .cat-panel { padding: var(--sp-sm); border-radius: var(--r-lg); background: color-mix(in srgb, var(--cat) 6%, var(--card-solid)); border: 1px solid color-mix(in srgb, var(--cat) 18%, var(--border)); box-shadow: var(--shadow-sm); animation: catPanelIn var(--t) var(--ease-out) both; } /* Panel başlık satırı: solda mini kategori küresi + başlık, sağda Kapat */ .cat-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .cat-panel-head { flex: 1 1 240px; min-width: 0; margin: 0; font-size: var(--fs-lg); color: var(--tx2); display: inline-flex; align-items: center; gap: 10px; } .cat-panel-head b { color: color-mix(in srgb, var(--cat) 78%, var(--tx1)); } /* Kartla panel arasındaki görsel bağ — karttaki orb'un küçük kopyası. --cg* değerleri karta ait olduğu için burada gradyan --cat/--cat-deep'ten. */ .cat-panel-mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(120% 120% at 32% 18%, color-mix(in srgb, var(--cat) 42%, #fff), var(--cat) 62%, var(--cat-deep, var(--cat))); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--cat) 70%, transparent); color: #fff; font-size: .82rem; } [data-theme="dark"] .cat-panel-mark { border-color: rgba(255,255,255,.28); } .cat-panel-mark img { width: 80%; height: 80%; object-fit: contain; display: block; } /* Kapat — kartın