/* ============================================================================ /ozellikler — Özellikler sayfası Bu dosya YALNIZ Features.html tarafından yüklenir (o şablonun `styles` bloğu) ve kuralları `.f2` / `.f2js` kapsamıyla yazılır. Ön ek bir dönem "ikinci tasarım" demekti — sayfa eski özellik listesiyle yan yana yaşadı ve karşılaştırmayı 2026-08-24'te bu tasarım kazandı; eski şablon silindi. Ön ek yeniden adlandırılmadı: şablon + CSS + JS + testlerde birden geçiyor ve kaçan tek bir sınıf hiçbir hata vermeden bir bölümü stilsiz bırakır. Kurallar Site.css'e TAŞINMADI ve taşınmayacak: buradaki hiçbir sınıf başka bir sayfada geçmiyor, taşımak tasarım sistemine yalnız bu sayfayı ilgilendiren 1000 satır eklerdi. Kapsam ayrı kaldığı sürece bu sayfa başka bir sayfada görsel gerileme yaratamaz. Tasarım fikri: uzun özellik listesi yerine YEDİ TAM EKRAN BÖLÜM. Her biri masaüstünde üç kolon (sol ad · orta ürün ekranı · sağ fayda) ve kendi vurgu rengi. Bölümler kart DEĞİL: zeminsiz, tam genişlikte; sayfadaki tek çerçeveli öğe ortadaki ürün ekranı. ZEMİN SADE (kullanıcı kararı, 2026-08-24): ana sayfayla birebir aynı — `body.kd` → `var(--bg)`. Sayfanın kendi arka planı, dev tipografisi, gradyanı, dekoratif lekesi/orb'u YOK; etkiyi boşluk, büyük ürün görselleri ve kontrollü hareket taşır. Bir dönem sayfanın dibine yapışan dev bir "KIDLIO ÖZELLİKLERİ" yazısı vardı; onunla birlikte `--f2-ac` değişkeni ve taşmaya karşı yazılmış `overflow-x: clip` güvenlik ağı da kaldırıldı. Renk, tipografi, gölge, yarıçap ve boşluk DEĞERLERİ Site.css token'larından gelir; burada yalnız bölüm aksanları ham yazılır (aşağıdaki nota bak). ========================================================================== */ /* --------------------------------------------------------------------------- Bölüm aksanları — HAM DEĞER, ve bu bilinçli Site.css'in kategori renkleri (oyna/düşün/keşfet/muhabbet) bir SINIFLANDIRMA taşır: o renkler "bu etkinlik hangi dünyada" demektir. Buradaki altı renk bölüm kimliği; kategori sanılmamaları için palet bilerek kaydırıldı. İKİ DEĞİŞKEN, İKİ İŞ: --ac ham renk → dolgu, halka, kenar, parıltı (metin DEĞİL) --ac-tx metin/link/ikon rengi → krem zeminde WCAG AA (≥4.5:1) ölçüldü Ham rengi metin yapmak sitenin her yerinde yasak (bkz. Site.css kategori notu): #F5A51E krem üstünde 2.0:1, yani okunmaz. PALET 2026-08-24'te YENİDEN KURULDU, çünkü yukarıdaki "bilerek kaydırıldı" iddiası doğru DEĞİLDİ: yedi aksanın ÜÇÜ kategori renginin birebir aynı hex'iydi (profil = Oyna #FF2DBE, yorgun = Düşün #F5A51E, içgörü = Keşfet #23C38C) ve dördüncüsü 1° farkla Muhabbet'ti. Yani "Çocuk Profilleri" tam olarak Oyna pembesiyle, "Bugün Enerjim Yok" tam olarak Düşün amberiyle boyanıyordu. Hiçbir şey hata vermez — renk bir SINIFLANDIRMA taşıdığı için sessizce yanlış şey söyler. YENİ PALETİN İKİ ÖLÇÜTÜ VAR ve ikisi de sayısal: 1) Kategori hue'larına (Oyna 318° · Düşün 38° · Keşfet 160° · Muhabbet 238°) EN AZ 24° uzak. Eşik uydurma değil: sitenin hero'sundaki mor, periwinkle'dan 17° farkla "muhabbet rengi" diye okunmuş ve 25°+'ye çekilmişti (bkz. Site.css hero-count notu). 2) SAHNE SIRASINDA komşusundan en az 40° uzak — sahneler arka arkaya okunur, uzaktaki iki sahnenin benzer olması sorun değil. Ölçülen değerler aşağıda; `--ac-tx`lerin hepsi krem (#FDFAF6) üstünde AA (4.90–7.02) ve koyu temada royal lacivert üstünde 6.0–9.7. --------------------------------------------------------------------------- */ /* hue krem komşu en yakın kategori */ .f2 .ac-plan { --ac: #2E8BF7; --ac-tx: #2563EB; } /* 212° 4.97 — muhabbet 26° · azur */ .f2 .ac-profile { --ac: #B040D4; --ac-tx: #8A2AAB; } /* 285° 6.73 73° oyna 33° · mor */ .f2 .ac-tired { --ac: #0FA3B4; --ac-tx: #0A7683; } /* 186° 5.13 99° keşfet 26° · deniz */ /* ETKİNLİK DETAYI ŞEFTALİYE ÇEKİLDİ (2026-08-25, kullanıcı kararı). Eskisi #E8506E idi (348°, gül) ve tinti pembe okunuyordu; sahne yüzeyleri gelince yedi zeminin renk sırası tek tek seçildi ve buranın karşılığı ŞEFTALİ. İki ölçüt yeniden hesaplandı: hue 12.8°, yani en yakın kategori olan Düşün amberine (38°) 25.2° — eşik 24°, geçiyor; sahne sırasındaki komşuları uyku (237°) ve gelişim (87°), ikisi de 40°'nin çok üstünde. `--ac-tx` krem (#FDFAF6) üstünde 5.75:1, yani AA. Ham rengi metin yapmak yine yasak: #E86B49 aynı zeminde 2.9:1. */ .f2 .ac-activity { --ac: #E86B49; --ac-tx: #B23A17; } /* 13° 5.75 74° düşün 25° · şeftali*/ .f2 .ac-insight { --ac: #6FA82A; --ac-tx: #4E7A16; } /* 87° 4.90 99° düşün 49° · yaprak */ .f2 .ac-family { --ac: #7C3AED; --ac-tx: #6D28D9; } /* 262° 6.83 175° muhabbet 24° · menekşe*/ /* UYKU tek istisna ve GEREKÇESİ VAR: 237°, yani Muhabbet'in (238°) hue'su. Kaydırılmadı, çünkü bu rengin kaynağı kategori paleti değil sitenin KENDİ gece rengi — `/uyku` bölümü `#191970` kullanır ve onun hue'su da 240°. Yani çakışma buradan doğmuyor, siteden miras alınıyor; uykuyu 200°'ye çekmek onu komşusu yorgun deniz mavisine (186°) 14° yaklaştırır, 265°'ye çekmek aile menekşesine (262°) 3° yaklaştırırdı — iki ölçütten birini kırmadan gidilecek yer yok. Ayrım hue'da değil DEĞERDE: #4C4FD8 gece koyuluğunda, Muhabbet #6E73F0 ise açık. Bu sayfada ikisi hiç yan yana gelmiyor (kategori rengi yalnız plan ekranının içindeki rozetlerde var). */ .f2 .ac-sleep { --ac: #4C4FD8; --ac-tx: #4247BE; } /* 237° 7.02 51° muhabbet 1° · gece */ /* Koyu temada aynı altı renk METİN olarak fazla koyu kalır (royal lacivert zeminde #0B7F58 3:1'in altında). Her bölüm için ayrı ton yazmak yerine ham renk beyazla açılır — token'lar tek yerde kalsın diye. GEZİNME ŞERİDİ DE KAPSANMAK ZORUNDA: kapsüller `.f2-scene`in içinde değil, yani yalnız sahneye yazılan bir override onları dışarıda bırakır ve yedi kapsül koyu temada gece zemininin üstünde koyu renkle çıkar. */ [data-theme="dark"] .f2 .f2-scene, [data-theme="dark"] .f2 .f2-raillink { --ac-tx: color-mix(in srgb, var(--ac) 58%, #fff); } /* --------------------------------------------------------------------------- 1) Giriş — KART YOK, ve KISA İlk ekran ferah: etiket + başlık + tek paragraf + tek birincil eylem. Sayfanın geri kalanı zeminsiz bölümlerden oluştuğu için buraya kutu koymak o dili daha başlamadan bozardı. DOLGULAR VE BAŞLIK BİLEREK KÜÇÜK (kullanıcı kararı, 2026-08-24): giriş ayrı bir tanıtım sayfası değil, özelliklere girizgâh. Ölçüt somut — 1440×900'de ilk ürün görselinin ÜST KISMI ilk ekranda görünmeli; giriş büyüdüğünde ziyaretçi ilk özelliğe ulaşmak için kaydırmak zorunda kalır ve sayfanın tüm fikri (ürünü göstermek) bir ekran geç başlar. Eski değerler yaklaşık %30 daha büyüktü: üst dolgu 38–92px, alt 34–72px, başlık 2.05–3.85rem. --------------------------------------------------------------------------- */ /* ALT DOLGU 2026-08-30'da büyüdü (20/3vh/40 → 44/6vh/68, kullanıcı kararı: "öne çıkanlar ve çipler aşağı in, üst taraf rahatlasın"). Aynı işlemden "ÖNE ÇIKANLAR" etiketi de çıktığı için ölçüt — 1440×900'de ilk ürün görselinin üst kısmı ilk ekranda görünür — HÂLÂ geçiyor: net yerleşim Telefon yukarı kaydı, aşağı değil. Üst dolgu dokunulmadı. */ /* ALT DOLGU 2026-08-30'da büyüdü (20/3vh/40 → 44/6vh/68, kullanıcı kararı: "öne çıkanlar ve çipler aşağı in, üst taraf rahatlasın"). Aynı işlemden "ÖNE ÇIKANLAR" etiketi de çıktığı için ölçüt — 1440×900'de ilk ürün görselinin üst kısmı ilk ekranda görünür — HÂLÂ geçiyor: net yerleşim Telefon yukarı kaydı, aşağı değil. Üst dolgu dokunulmadı. */ /* ÜST DOLGU VE ÖGE ARALARI 2026-08-30 akşamı AÇILDI (kullanıcı kararı: "header alanı ferahlat, çok sıkışık"). Gün içinde eyebrow · cümle · güven satırı · ikincil eylem çıkınca yığın kısaldı ama marjlar eski uzun yığın için tasarlanmıştı — h1 ile buton arası 24px'e (kardeş marjları ÇÖKÜYOR, geçerli olan max'u) inmişti. Ölçüt değişmedi ve hâlâ geçiyor (aşağıda, düzenlemeden sonra yeniden ölçüldü). */ /* ALT DOLGU 2026-09-10'da KISILDI (kullanıcı: "başlık ile altındaki çipli buton alanında çok boşluk var gibi"). Ölçüldü ve haklıydı: aralık ÜÇ toplamdan oluşuyordu — kabın alt dolgusu (54px) + H1'in ölü alt marjı (21.6px) + çip şeridinin `margin-top`u (40px) = 1440×900'de 116px, mobilde 99px. Üçü de tek başına makuldü, üst üste binmesi değildi. ÜST DOLGUYA DOKUNULMADI (2026-08-30 kararı: "header ferahlasın") ve şerit kendi marjını korudu — kısılan yalnız burası. */ .f2-intro { padding: calc(var(--nav-h) + clamp(36px, 7.2vh, 76px)) 0 clamp(26px, 3.2vh, 36px); } /* GİRİŞ ORTALANMIŞTIR (kullanıcı kararı, 2026-08-24). Sayfanın geri kalanı üç kolonlu, sola yaslı bir editoryal akış; giriş ise tek sütun ve KAPAK gibi okunmalı — etiket · başlık · tek cümle · tek eylem, hepsi eksende. Sola yaslı hâlinde başlık kabın soluna yapışıp sağında ~300px boş şerit bırakıyordu. Ortalama YALNIZ girişe kapsanmıştır (`.f2-intro` ön eki): sahnelerin metin kolonu sola yaslı kalmak zorunda, ortalanan bir madde listesi okunmaz. Kural (0,2,0) özgüllükte, yani yukarıdaki taban kurallarla sıraya bağlı bir yarışa girmez — dosyanın neresine taşınırsa taşınsın kazanır. */ .f2-intro .container { text-align: center; } /* GİRİŞ KOLONU KISITLI DEĞİL, KABIN GENİŞLİĞİNDE (kullanıcı kararı, 2026-08-24). Eski `max-width: 20ch` başlığı 599px'e sıkıştırıyordu; oysa başlık 1440px'de doğal hâlinde TR'de 899px, EN'de 1153px — yani ikisi de 1180px'lik kaba TEK SATIR sığıyor, kolon onları zorla ikiye bölüyordu. Sayfanın tek H1'i iki satıra kırılınca hem 53px yer yiyor hem de "başlık sığmamış" gibi okunuyordu. Punto 3.05rem'den 2.95rem'e İNDİ ve bu bir küçültme değil, tek satır sözünün payandası: 48.8px'te EN başlığı 1153px, kaba yalnız 27px kalıyordu — font yüklenmesindeki en küçük fark satırı ikiye böler. 47.2px'te aynı başlık ~1115px, pay 65px. Kırılma noktası viewport ~1230px (altında kap daralır ve başlık iki satıra iner, `balance` ile eşit bölünür). 2026-08-29: H1'ler Baloo 2 display yüzüne geçince tavan 2.95'ten 2.65rem'e indi — Baloo 2 Quicksand'tan ~%10 daha geniş harf ölçüsü çizer, 47.2px'te aynı EN başlığı ~1230px tutar ve 1180px'lik kaba sığmazdı. 42.4px'te (2.65rem) ~1105px'e iner, pay yeniden ~75px. Görsel boy kaybolmaz: Baloo'nun x-height'u Quicksand'tan büyük, 42px Baloo ≈ 47px Quicksand okunur. line-height da 1.08'den 1.14'e çıktı — chunky bir yüzde 1.08, sarınca (viewport <~1230px) satırları birbirine sokuyordu. 2026-09-10: TAVAN 2.65 → 2.95rem'e GERİ ÇIKTI ve tek satır sözü ÖLÇÜLEREK korundu. Kullanıcı bulgusu şuydu: "başlık öteki sayfalardan küçük geldi" — ve ölçüm onu doğruladı, sitedeki her hero H1'i 2.95rem tavanlıdır (`.px-hero-copy h1` · `.sx-hero-copy h1` · `.gx-hero-copy h1` · `.cw-hero-copy h1`; `.page-hero h1` 3.2, `.cx-intro h1` 3.35), yalnız bu sayfa 2.65'te (42.4 vs 47.2px, %10 küçük) duruyordu. 2026-08-29'un gerekçesi BUGÜN GEÇERSİZ, çünkü ölçtüğü KOPYA artık yok: o gün EN başlığı 47.2px'te ~1230px tutuyordu, başlık 2026-09-06'da yeniden yazıldı ve bugün aynı puntoda EN 997px, TR 793px (1180px'lik kapta pay 183px / 387px — Chromium'da `white-space: nowrap` ile ölçüldü). Yani punto artık sayfanın en dar kısıtı değil; ölçülen tek satır kırılması EN'de ~1210px viewport'ta. KURAL AYNI KALIYOR: display fontu ya da başlığın KOPYASI değişirse pay yeniden ölçülür, kopya edilmez. Alt sınır da 1.92 → 2rem oldu ve orta terim 4.35 → 4.2vw: ikisi de öteki hero'ların clamp'iyle birebir aynı, yani "aynı görünen başlık" bir tesadüf değil paylaşılan ölçü. */ .f2-h1 { font-size: clamp(2rem, 4.2vw, 2.95rem); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 clamp(16px, 2.4vh, 28px); } /* ALT MARJ, H1 GİRİŞİN SON ÖGESİYSE SIFIRLANIR (2026-09-10). Marj bir alt cümleyle arasındaki nefes için yazıldı; 2026-09-10'da deneme bloğu da gidince H1 girişin TEK ögesi kaldı ve marj, kabın alt dolgusunun ÜSTÜNE eklenen ölü boşluğa dönüştü (kardeşi olmayan marj çökmez). Ölçüldü: 1440×900'de başlık kutusuyla çip şeridi arası 116px, 390×844'te 99px. Marj SİLİNMİYOR, koşullu hâle geliyor: alt cümle (`.f2-lede`, kopyası SiteContent'te duruyor) bir gün geri gelirse aralık kendiliğinden doğru olur. */ .f2-intro .f2-h1:last-child { margin-bottom: 0; } /* 80ch bir TAVAN, hedef değil: cümle iki satıra sığsın diye var (EN doğal genişliği 1623px, yani satır başına ~811px istiyor), fazlası okunur satır uzunluğunun dışına çıkar. Cümle uzarsa kolonu genişletmek DEĞİL cümleyi kısaltmak gerekir — kural SiteContent `fp2_hero.s` notunda. */ .f2-lede { font-size: clamp(1rem, 1.4vw, 1.14rem); color: var(--tx2); max-width: min(80ch, 100%); /* Yatay `auto` ortalamanın parçası ve TABAN kuralda durmak zorunda: `.f2-intro .f2-lede { … }` diye ayrı yazıldığında kural doğru çalışır ama `\.f2-lede \{([^}]*)\}` deseniyle okuyan test (üstteki 80ch tavanını tutan test) önce O kuralı yakalar ve tavanı kaybolmuş sanır. */ margin: 0 auto; } /* `.f2-actions` (girişin buton satırı) 2026-09-07'de KURALIYLA BİRLİKTE silindi: taşıdığı tek öğe `#f2-katil`e inen `.btn-primary` idi ve o düğme kullanıcı kararıyla kaldırıldı (gerekçesi Features.html'de). Boş bir sınıf bırakmak, sonraki oturumda "burada bir eylem satırı vardı" diye yeniden doldurulmaya davettir. O turda kalan tek eylem `.f2-freecta` düğmesiydi; 2026-09-10'da o da deneme bloğuyla birlikte silindi (aşağıdaki nota bak), yani girişte artık HİÇ eylem yok — çağrı navbar'da ve sayfa sonundaki ortak kapanışta. */ /* `.f2-jump` ("Özelliklere in") ve `.f2-trust` (güven satırı) 2026-08-30'da silindi (kullanıcı kararı: giriş ferahladı) — bağlantının işini çip şeridi yapıyor, güven satırı deneme satırının üstünde ikinci küçük-metin satırıydı. Kopya SiteContent'te duruyor (testler içerikten okuyor). */ /* Eski `.f2-trust` kuralının ölçüm notu kayıt için durur: satır --tx3 (#8B97B8) ile 2.80:1'de kalıyordu, --tx2'ye çekildi (5.09:1). Satırın kendisi yukarıdaki silme notuyla template'ten çıktı. */ /* DENEME BLOĞU (`.f2-trial`) VE ÜÇ PARÇASI 2026-09-10'da SİLİNDİ — kullanıcı kararı: "özellikler sayfasında ekrandaki alanları kaldır". Gitmiş kurallar: `.f2-trial` (konumlandırma kabı), `.f2-freeline` + `.f2-freeline-ok` (+ `.is-muted`, iki vaat rozeti), `.f2-freecta` (altındaki "Planları karşılaştır" pili) ve `.f2-trial > .f2-kido` (satırın sağ ucundaki maskotlu imza + onu ≤1023px'te gizleyen medya sorgusu). Giriş bugün YALNIZ H1'den oluşuyor; `.f2-intro .container { text-align: center }` tek başına yetiyor, çünkü ortalanacak flex satır kalmadı (o yüzden `.f2-intro .f2-freeline, .f2-intro .f2-freecta { justify-content: center }` da silindi). TARİHÇE KAYITTA KALIR — üçü de ölçülmüş kararlardı ve gerekçeleri bir sonraki oturumun aynı şeyi geri koymasını engelliyor: - Burada bir dönem `.f2-plannote` vardı: dört satırlık, kesikli kenarlı bir "Ücretsiz planda ne var?" açıklaması. Ölçüldü (390×844): blok ~153px yer kaplıyor ve ilk özelliğin BAŞLIĞINI ilk ekranın altına itiyordu — yani ziyaretçi tek bir ürün ekranı görmeden fiyat ayrıntısı okuyordu. Ayrıntı silinmedi, üçüncü sahneden sonraki `.f2-planband`e indi ve orada duruyor. - Rozetler DOLU KUTU DEĞİL cam pildi (`.eyebrow`un kabuğu): dolu zemin onları "uyarı kutusu" yapardı. Sayfadaki tek dolu blok hâlâ en dipteki kapanış kutusu — bu kural bloğun silinmesiyle daha da sağlam. - Rozet satırının 820px üstünde `::before` ile çizilen 3px'lik ayıraç noktası 2026-09-07'de silinmişti: satır sarınca nokta satır başına düşüyordu. Geri gelmemesini test hâlâ ölçüyor. - Rozet SAYISI iki ile sınırlıydı (üçüncüsü satırı 390px'te üçe böler ve ilk ürün görselini fold'un altına iter). Blok artık yok; sınır bir gün geri gelirse yeniden geçerli. - Maskotun yeri de ölçülmüştü: çip şeridinin kenarı denenip reddedilmişti, çünkü kapsüller 1280px'e kadar kabı ucundan uca dolduruyor (ulRight = vw − 20) ve her sağ konum son çipi örtüyordu. `.f2-kido` sınıfı bu dosyada artık geçmiyor; sayfanın öteki maskotu `.f2-kido-q` (§ aşağıda) ve dokunuş kartındaki resim yerinde. */ /* SATIR YÜKSEKLİĞİ YALNIZ SARDIĞI YERDE AÇILIR (2026-09-10). 1.14, başlık tek satırken doğru; iki satıra inince Baloo 2'nin 1.60em'lik içerik alanı satırları birbirine sokuyor ve vurgunun el-çizimi altı çizgisi (kuralı Site.css `.f2-h1 .hl::after`) ikinci satırın harflerine biniyordu. 1.22, 390px'te satır arasını 35.0 → 37.5px yapar: çizgiye ~4.5px pay kalır. MASAÜSTÜ HİÇ DEĞİŞMEZ — orada başlık tek satır (kırılma ~1230px) ve kural 900px'in altında kalıyor; ölçüldü, 1440'ta h1 kutusu 48px, aynı. Mobil bedeli ölçüldü: h1 70 → 75px, ilk sahnenin tepesi 5px aşağı. */ @media (max-width: 899px) { .f2-h1 { line-height: 1.22; } } /* ---- AÇILIŞ KOREOGRAFİSİ (2026-08-30, kullanıcı isteği — frontend-design Ö3) Girişin ögeleri 80ms merdivenle açılır (2026-08-30'da DÖRT öge vardı; bugün yalnız H1 — aşağıdaki nota bak). Sayfanın geri kalanındaki tek hareket kaydırma hikâyesi; ilk yükleme düz kalıyordu (ana sayfa fadeUp ile açılıyor, bu sayfa açmıyordu). `to` karesi `transform: none` — kalıcı dönüşüm metni rasterize eder (hero parallax notundaki kural). KENDİ `prefers-reduced-motion` bloğu OLMAK ZORUNDA (İletişim sahnesinin aynı kararı): global blok yalnız SÜREYİ sıfırlar, gecikmeyi sıfırlamaz — gecikmeli + `both` dolgulu animasyon süresi .01ms'ye inince öge gecikme boyunca `from` karesinde, yani GÖRÜNMEZ beklerdi. (Blok bir dönem maskotun sonsuz `orbFloat` süzülmesini de kesiyordu; maskot 2026-09-10'da deneme bloğuyla gitti.) */ /* MERDİVEN 2026-09-10'da TEK BASAMAĞA İNDİ: deneme bloğu (rozet satırı + düğme + maskot) silinince açılacak öge yalnız H1 kaldı. Gecikme .04s KORUNUR — merdivenin ilk basamağıydı ve sıfırlanması başlığı sayfayla birlikte "zıplatır"; kendi süresi zaten kısa. */ .f2-intro .f2-h1 { animation: f2IntroUp .6s var(--ease-out) .04s both; } @keyframes f2IntroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .f2-intro .f2-h1 { animation: none; } } /* `.f2-kicker` AİLESİ TAMAMEN SİLDİ (2026-08-30, kullanıcı kararı): önce girişin sayfa-adı etiketi (`--intro`), ardından sahnelerin kategori etiketleri ("HER SABAH", "HER ÇOCUĞA AYRI"…) — ad zaten ne olduğunu söylüyordu, etiket ikinci bir tekrardı. `s.kicker` verisi SiteContent'te duruyor; panel-etiketiyle ayrışmasını tutan test içerikten okuyor. */ /* --------------------------------------------------------------------------- 2) Özellik akışı --------------------------------------------------------------------------- */ /* `overflow` YAZILAMAZ: gezinme şeridi `position: sticky` ve bir kaydırma bağlamı açan her ata (overflow: hidden/clip/auto) sticky'yi SESSİZCE öldürür — şerit hiç kaydırılmadığı için başlangıç yerinde kalır ve kimse hata almaz (/sss'in `.fq-bg` düzeltmesinin aynısı). */ .f2-scenes { position: relative; } /* "ÖNE ÇIKANLAR" etiketi ve kılcal çizgisi 2026-08-30'da KALDIRILDI (kullanıcı kararı: giriş ile kapsül şeridi arası kalabalık). Kavşakta sekiz metin katmanı üst üste duruyordu; çipler ikon + ad + aktif durumla kendi kendini anlatıyor, nav'ın `aria-label`i bağımsız var. Başlık GÖRÜNMEZ hâlde duruyor (`aria-labelledby` hedefi ve `fp2_index` kopyası tek kaynakta kaldı) — `.cw-vh` ile aynı klip deseni. */ .f2-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* --------------------------------------------------------------------------- 2a) GİRİŞ ŞERİDİ (2026-08-25) — yedi özelliğe doğrudan giriş Sayfa yedi tam ekranlık bir akış. Aradığı özelliği bilen ziyaretçi (Ahmet dil gelişimini, Elif uykuyu arıyor — UserPanel.md) ona ulaşmak için altı ekran kaydırmak zorundaydı; nerede olduğunu söyleyen tek şey de sağ üstteki `01 — 07` idi, yani bir GÖSTERGE, bir kontrol değil. ŞERİT ARTIK YAPIŞKAN DEĞİL (2026-08-26, kullanıcı kararı). Kapsüller "ÖNE ÇIKANLAR"ın altında normal görünür, hikâye başlayınca yerini 44px'lik kompakt ilerleme alanı alır (§2b). Ölçü kararı verdi: yedi dolu kapsül + sayaç 58px'lik bir bant tutuyor ve yedi tam ekranlık bir akış boyunca ekranın tepesinde duruyordu — hikâyenin en pahalı yerinden (viewport) 58px'i kalıcı olarak bir gezinme aracı yiyordu. Bugün o pay 44px ve içinde gezinme değil KONUM var. Dört karar yükü taşıyor: - **KENDİ ZEMİNİ VAR ve olmak zorunda.** Şerit yapışkan olmasa da ilerleme bandı yapışıyor ve ikisi aynı dili konuşur: bandın ALTINDAN sahnelerin içeriği akıp geçiyor (telefonlar, kılcal ayraçlar); saydam bırakılırsa etiketler onların üstüne biner ve okunmaz olur. Zemin `--bg`, yani sayfanın kendi zemini; yeni bir yüzey ailesi değil. - **ŞERİT `.container`IN İÇİNDE KAYAR.** Mobilde yatay kaydırma kutusu olduğu için sayfada yatay taşma AÇMAZ (Kategoriler şeridi ve /sss'in hızlı geçiş şeridiyle aynı kural). - **AKTİF DURUM `[aria-current="true"]`DEN TÜRER**, ayrı bir sınıftan değil: iki durum kaynağı olsaydı biri güncellenip diğeri unutulurdu. - **KAPSÜLLER >= 44px** (WCAG 2.5.8) ve ölçü `min-height` ile verilir, dolguyla DEĞİL — dolgu, iki satıra sarabilecek bir etiketi de büyütür. --------------------------------------------------------------------------- */ /* SABİT MENÜ PAYI: `--nav-h`in DEĞİL, navbar'ın GERÇEK dibinin ölçüsü (2026-08-25 akşamı, kullanıcı kararı). Yapışan öğe `top: var(--nav-h)`teyken aradan ÖNCEKİ SAHNENİN TELEFONU ince bir bant hâlinde akıp geçiyordu: navbar'ın buzlu bandı 60px'te bitiyor, yapışan öğe 76px'te başlıyordu. 16px'in ikisi de ÖLÇÜLDÜ (1440×900, Chromium) ve ikisi de Site.css §4'ten geliyor: - **12px** — sayfa kaydırıldığı anda Site.js `is-scrolled` takıyor ve navbar'ın dolgusu 14px'ten 8px'e iniyor; iki yandan tam 12px, içerik yüksekliğinden bağımsız. - **4px** — `--nav-h: 76px` navbar'ın gerçek durgun boyundan (72px: 44px içerik + 2×14px dolgu) zaten 4px fazla; sitenin geri kalanında bu bir pay, burada bir açıklık. Yapışınca navbar 60px, yani `76 - 16`. Değerler sabit değil çünkü kaynakları sabit: o dolgular değişirse burası da değişmek zorunda. `.f2js` ön eki ŞART: `is-scrolled`ı JS yazıyor, JS kapalıyken navbar hep 72–76px kalır ve bu pay bandı navbar'ın ALTINA sokardı. `--f2-prog-h` ÜÇ YERDE BİRDEN OKUNUR: ilerleme bandının boyu, sticky sahne kutusunun `top`u/yüksekliği ve şerit çapalarının payı. Ayrışırlarsa sahne bandın ALTINA girer ve hiçbir şey hata vermez. */ .f2 { --f2-rail-h: 58px; --f2-prog-h: 44px; --f2-nav-gap: 16px; } .f2-rail { position: relative; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--border); /* 2026-08-30: 10/1.6vw/16 → 28/3.4vw/40 — etiket kalkınca şerit, giriş kopyasının (deneme satırı) hemen ardından gelmek yerine gerçek bir nefes alıyor; alta doğru kayması çipl→telefon ölü bandını da yer. */ margin-top: clamp(28px, 3.4vw, 40px); } .f2-rail-in { display: flex; align-items: center; gap: 14px; min-height: var(--f2-rail-h); } /* Şerit: ince işaretçide sığar, sığmazsa kayar. `touch-action: pan-x` şart — yazılmazsa tarayıcı ilk hareketin yönünü kendi tahmin eder ve şeridin üstünde başlayan DİKEY kaydırma kutuda takılır. */ .f2-rail-nav { flex: 1; min-width: 0; } .f2-rail-nav ul { list-style: none; margin: 0; padding: 6px 0; /* ÇİPLER YAYILDI (2026-08-30 akşamı, kullanıcı isteği: "abartmadan"): gap 8 → 12, kapsül dolgusu 15 → 19 — içerik 789 → ~869px, en dar masaüstünde (1024) bile 115px rahat kalıyor (ölçüldü); scroll tetiklenmez. */ display: flex; flex-wrap: nowrap; gap: 12px; /* ORTALANIR — ama `safe` İLE (2026-08-26, kullanıcı kararı). Yedi kapsül geniş ekranda şeridin soluna yapışıp sağında geniş bir boş şerit bırakıyordu; bölüm başlığı ("ÖNE ÇIKANLAR") ve sayfanın girişi ortalıyken tek sola yaslı blok oydu. DÜZ `center` YAZILAMAZ ve bu tam olarak "telefonda kaybolmasın"ın sebebi: kapsüller kaba sığmadığında (390px'te yedisi ~980px) düz `center` taşmayı İKİ YANA dağıtır, sol taraftaki taşma kaydırılarak ULAŞILAMAZ bir yere düşer — yani ilk iki kapsül kalıcı olarak kaybolur ve hiçbir şey hata vermez. `safe`, taşma durumunda `start`a döner: dar ekranda şerit yine baştan başlar ve parmakla sonuna kadar kayar. Düz kural yedek olarak ÖNCE yazılır (`safe`i tanımayan tarayıcı onu okur). */ justify-content: center; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; /* ÇUBUK GİZLİ, KAYDIRMA AÇIK (/sss'in şeridiyle aynı karar): koyu yatay çubuk bir kontrol gibi okunuyor ve şeridi "kırpılmış kutu" gösteriyor. `overflow-x: hidden` YAPILAMAZ — çubukla birlikte parmakla kaydırmayı da kapatır (Kategoriler şeridinin bir kez düştüğü tuzak). */ scrollbar-width: none; -ms-overflow-style: none; /* UÇ KESİLMEZ, SOLAR — token ve gerekçesi Site.css `:root > --strip-mask`. Şerit `safe center` ile ortalandığı için dar ekranda taşma SAĞA düşer; rampanın uzun ucu (40px) tam oraya bakıyor. AMA YALNIZ KESİLEN UÇTA (2026-09-10, kullanıcı: "çipler sağdan soldan blurlu görünüyor"). Maske koşulsuzdu: 1440px'de şerit hiç kaydırılamazken bile (içerik 1180 = kap 1180) ilk çipin solu ve son çipin sağı soluyordu, 390px'te ise şeridin BAŞINDAYKEN — yani solda kesik hiç yokken — dolu mavi kapsülün sol kenarı siliniyordu. Solmanın gerekçesi "yarım kalan kelime bozuk okunuyor"du; kesik yoksa gerekçe de yok. DURUMU JS YAZAR (`data-strip`/`data-edge`, Site.js) ve TEK YERDEN: maskenin üç okuyucusu var, kancası da bir tane. Şablondaki `data-strip` olmadan hiçbir şey değişmez, aşağıdaki iki uçlu taban kural JS'siz hâli korur. Uç kuralları Site.css'te, token'ların hemen altında. */ -webkit-mask-image: var(--strip-mask); mask-image: var(--strip-mask); } .f2-rail-nav ul::-webkit-scrollbar { display: none; } .f2-raillink { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 19px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--card); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; color: var(--tx2); transition: background var(--t-xs) ease, color var(--t-xs) ease, border-color var(--t-xs) ease; } .f2-raillink i { font-size: .95em; color: var(--ac-tx); } .f2-raillink:hover { color: var(--ac-tx); border-color: color-mix(in srgb, var(--ac) 45%, transparent); background: color-mix(in oklch, var(--ac) 10%, var(--card-solid)); } /* AKTİF KAPSÜL DOLU: tint + kalın kenar denendi ve elendi — yedi soluk kapsül arasında bir tanesi "biraz daha az soluk" oluyordu, yani aktiflik ancak ikisi yan yana görülünce okunuyordu. */ .f2-raillink[aria-current="true"] { background: var(--ac-tx); border-color: var(--ac-tx); color: #fff; } .f2-raillink[aria-current="true"] i { color: #fff; } /* KOYU TEMADA ETİKET ÇEVRİLİR ve bu ölçüldü. `--ac-tx` gece zemininde ham rengin AÇIK ucudur (yukarıdaki `color-mix(… 58%, #fff)`), yani dolu kapsül AÇIK bir yüzey olur: beyaz etiket orada **2.61:1**e düşüyordu — AA'nın yarısı. Mürekkep sayfanın kendi gece zeminine çevrilince aynı kapsül 9.4–10.9:1 veriyor. Zemini koyulaştırmak çözüm DEĞİL: o zaman aktif kapsül komşularından ayrışmaz, yani düzeltilmek istenen şey kaybolur. (/iletisim'in "koyu temada seçili sekmenin mürekkebi de çevrilir" kuralının aynısı.) */ [data-theme="dark"] .f2-raillink[aria-current="true"], [data-theme="dark"] .f2-raillink[aria-current="true"] i { color: var(--bg); } /* --------------------------------------------------------------------------- 2b) KOMPAKT İLERLEME ALANI (2026-08-26, kullanıcı kararı) Hikâye boyunca sabit menünün altında duran 44px'lik bant: aktif özelliğin adı · `02 / 07` · ince ilerleme çizgisi. Giriş şeridinin YERİNE geçer, onu tekrar etmez — burada tıklanacak bir şey yok, yalnız "neredeyim" sorusunun cevabı var. Beş şey yükü taşıyor: - **YALNIZCA `.f2-scenes` BOYUNCA YAPIŞIR.** `position: sticky` kapsayıcısını aşamaz: bant yedinci sahnenin sonunda kendiliğinden durur, alt bölümlerin üstüne sarkmaz — "hikâye bitince sayfa normal akışa döner" kuralının taşıyıcısı budur. - **AKIŞTA 44px YER KAPLAR** ve kaplamak zorunda: sticky bir öğe akıştaki yerinden yapışır. Aynı 44px sahne kutusunun `top`una ve yüksekliğine de giriyor (§7); üçü tek token'dan (`--f2-prog-h`) okunmazsa sahnenin tepesi bandın altında kalır. - **HİKÂYE DIŞINDA HİÇ ÇİZİLMEZ.** Taban `display: none`; bant yalnız `.f2js` + 1024px dalında açılır (§7a). İki şeyi birden kapatır: mobilde hikâye yok, JS kapalıyken de bant hiç açılamaz — ikisinde de akışta duran 44px'lik BOŞ bir bant kalırdı. Çizildiği yerde ise `is-on` sınıfını Features.js yazar (ilk sahne sabit menünün altına oturunca) ve opaklık 0/1 arasında gider — ARADA bir değerde bırakılmaz, yoksa yarı saydam bir gezinme bandı kalır. `pointer-events: none` şart: görünmezken de bant orada durur ve altındaki metnin seçimini engellerdi. - **ÇİZGİ TEK YÖNLÜ VE SÜREKLİ.** Dolgu `--f2-fill` (0→1) ile gelir ve yedi sahnenin TAMAMINDAKİ ilerlemeyi ölçer — sahne başına `(i+1)/7` diye yazılsaydı her geçişte %14'lük bir sıçrama olurdu. - **1024px ALTINDA HİÇ ÇİZİLMEZ** (§7): orada sticky hikâye yok, gezinmenin tamamı giriş şeridinde. --------------------------------------------------------------------------- */ .f2-prog { display: none; /* yalnız `.f2js` + 1024px dalında açılır */ position: relative; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--border); opacity: 0; pointer-events: none; transition: opacity var(--t-sm) ease; } .f2-prog.is-on { opacity: 1; } .f2-prog-in { display: flex; align-items: center; gap: 14px; min-height: var(--f2-prog-h); } .f2-prog-name { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm); color: var(--tx1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .f2-prog-num { flex: none; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; color: var(--tx3); font-variant-numeric: tabular-nums; } .f2-prog-num b { color: var(--tx2); } /* Çizgi kalan yeri alır ama ASGARİ bir boy ister: uzun bir özellik adının yanında `flex: 1` onu 20px'e indiriyor ve gösterge "kırık bir çizgi" gibi okunuyordu. */ .f2-prog-line { flex: 1 1 auto; min-width: 90px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--tx3) 26%, transparent); overflow: hidden; } .f2-prog-line i { display: block; height: 100%; width: calc(var(--f2-fill, 0) * 100%); border-radius: 2px; background: var(--tx2); } /* BİLGİ BANDI — ücretsiz planın ayrıntısı, ÜÇÜNCÜ SAHNEDEN SONRA. Hero'nun altındayken (`.f2-plannote`, kesikli kenarlı dört satır) iki şey birden yanlıştı: ziyaretçi tek bir ürün ekranı görmeden fiyat ayrıntısı okuyordu ve blok mobilde ilk özelliğin başlığını ekranın altına itiyordu. Bugün sorunun gerçekten doğduğu yerde: üç ekran görüldükten sonra. Üç karar yükü taşıyor: - **BANT, KART DEĞİL.** Zemin, gölge, dolgu kutusu yok; yalnız kılcal üst/alt çizgi. İki sahnenin arasına giren dolu bir kutu, sayfanın "sahneler arasında hiçbir şey yok" dilini tek başına bozar ve akışı "uyarı okundu mu?" diye keser. - **MASAÜSTÜNDE TEK SATIR IZGARA** (başlık · cümle · bağlantı). Üst üste istiflenmiş hâli üç satır eder ve bant yeniden bir bölüm gibi görünür; `auto minmax(0,1fr) auto` ile bant gerçekten bant kalır. - **Dolgu KÜÇÜK ve simetrik.** Sahne dolgusu zaten iki yanında duruyor; bandın kendi dolgusunu büyütmek onu iki sahne arasında yüzen bir boşluğa çevirir (§7'deki "ferah ile bitmiş sanılan sayfa" farkı). */ .f2-planband { display: grid; gap: 4px 18px; align-items: baseline; padding: clamp(13px, 1.6vw, 17px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .f2-planband b { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 800; color: var(--tx1); } .f2-planband p { margin: 0; font-size: var(--fs-sm); color: var(--tx2); line-height: 1.55; max-width: 78ch; } /* Bandın bağlantısı sahne aksanı taşımaz (`--ac` burada tanımlı değil, mavi düşer): bant hiçbir sahneye ait değil, yedisinin birden altlığı. */ .f2-planband .f2-more { --ec: var(--btn); white-space: nowrap; } @media (min-width: 900px) { .f2-planband { grid-template-columns: auto minmax(0, 1fr) auto; } } /* DOLGU YÜZEYİNKİNİ DEVRALDI (2026-08-26). Değer bir dönem 30–50 idi ve gerekçesi doğruydu: sahnenin dolgusu ile yüzeyin dolgusu toplanınca iki sahne arasında içinde hiçbir şey olmayan bir bant açılıyordu. Yüzey kalkınca (aşağıdaki not) toplam kendiliğinden ~34px eksildi, yani iki sahnenin içeriği birbirine yaklaştı — ayrımı taşıyan tek şey artık boşluk olduğu için ölçü yüzeyinkini içine aldı (30–50 + 20–34 ≈ 40–66). ÖLÇÜ ARTIK TOKEN'IN ÇARPANI (2026-09-05, `clamp(40px, 6vh, 66px)` → `×.8`). 2026-09-02'de bölüm geçişleri tek `--sec-pad`e bağlanırken bu satır gözden kaçmıştı: sahne dolgusu `vh` tabanlıydı, yani ölçüyü ekranın YÜKSEKLİĞİ veriyordu ve sitenin geri kalanı GENİŞLİKTEN okuyordu. Sonuç 390×844'te 50.6px, yani sahneler arası 101px'lik boş bant — sitenin kendi mobil ritmi 76px iken. ÖLÇÜLDÜ (Chromium, hareket-azaltma): 14 sayfanın 13'ü mobilde 90px üstü hiç boş bant üretmiyordu, tek istisna bu sayfaydı (5 × 101px). Çarpan `.8` UYDURMA DEĞİL, iki ucu birden tutan tek değer: masaüstünde 68×.8 = 54.4px, yani eski `6vh`in 900px'te verdiği 54px — o yüzden masaüstü bandı 148 → 149px, piksel piksel aynı; mobilde 38×.8 = 30.4px, bant 101 → 61px ve sayfa 10.499 → 10.216px. Düz `var(--sec-pad)` DENENDİ ve geri alındı: mobili düzeltiyordu ama masaüstü tavanı 68px olduğu için bandı 148 → 176px'e ÇIKARIYORDU, yani boşluğu azaltma işinin tersi. Sahne sınırını mobilde yalnız bu boşluk taşımıyor — kılcal çizgi (aşağıda) ve her sahnenin başındaki ikon rozeti de orada. */ .f2-scene { position: relative; z-index: 1; padding-block: calc(var(--sec-pad) * .8); /* Şerit tıklandığında sahne SABİT MENÜNÜN ALTINA oturur. Global `html { scroll-padding-top: calc(var(--nav-h) + 12px) }` navbar payını zaten veriyor; buradaki marj yalnız sticky ŞERİDİN payı. İkisi toplanır, yani hedef navbar + şerit + 12px altına düşer. Masaüstünde eklenir (§7): mobilde şerit sticky değil, orada eklenen marj yalnız çapayı gereksiz yere aşağı iterdi. */ } /* ---- SAHNE SINIRI: NÖTR KILCAL ÇİZGİ (2026-08-26, kullanıcı kararı) ------- Yüzey kalkınca sınırı bu çizgi devraldı. Üç şey yükü taşıyor: - **NÖTR, aksan DEĞİL.** `--border`, `--ac` değil: sitenin "dekoratif renkli şerit yasak" kuralı tam olarak bunu — bir bölümün kenarına yapıştırılan renkli bandı — yasaklıyor, ve ayrım gerektiğinde reçetesi zaten `1px solid var(--border)` (bkz. `.cw-tags`). - **SAHNENİN TEPESİNDE, kabın değil.** İki sahnenin arasındaki boşluk "öncekinin alt dolgusu + sonrakinin üst dolgusu"dur; çizgi sahne sınırında durunca o boşluğun tam ortasına düşer. Kaba (`.container`) yazılsaydı üst dolgunun ALTINDA kalır ve "bir sonraki sahneye yapışmış bir başlık çizgisi" gibi okunurdu. - **KAP GENİŞLİĞİNDE, kenardan kenara DEĞİL.** Tam genişlikte bir çizgi sayfayı yedi bölmeye ayıran bir tablo çizer; buradaki iş yalnız "burada bir sahne bitti" demek. Ölçü kabın kendi formülü, yani 1180px'lik hizadan sapmaz. İLKİNDE ÇİZGİ YOK (`+` seçicisi): şeridin hemen altında duran bir çizgi şeridin kendi alt kenarlığıymış gibi okunur. */ .f2-scene + .f2-scene::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--container), 100% - 40px); height: 1px; transform: translateX(-50%); background: var(--border); } /* ---- SAHNE KABI — DIŞ KART KALDIRILDI (2026-08-26, kullanıcı kararı) ------ Bu kutu bir gün boyunca (2026-08-25) bir YÜZEYDİ: sahne aksanının çok hafif tinti (%7 açık / %14 koyu, OKLCH), kılcal renkli kenar ve 20–34px yarıçap. Gerekçesi doğruydu ve kayıtta kalır — sahneler zeminsizken biri bitip öteki başlarken görsel bir sınır yoktu, sayfa yedi ekran değil tek uzun bir kolon gibi okunuyordu. Ama sınırla birlikte gelen şey yedi tane ~1180×780px'lik DEV KART oldu: sayfanın asıl unsuru olan ürün ekranı kendisinden dört kat büyük bir kutunun içinde duruyor ve pastel zemin, telefonun KENDİ mavi kartıyla yarışıyordu — yani kutu, göstermek için var olduğu şeyi zayıflatıyordu. Bugün kap GÖRÜNMEZ: zemin, kenar, gölge ve büyük yarıçap YOK. DOM'da duruyor çünkü işi yerleşim — sahne → `.f2-stage` → kap → `.f2-surface` zinciri gerilip içeriği ortalıyor (§7a). Adı korundu: şablon + CSS + test + belgede birden geçiyor ve kaçan tek bir sınıf hiçbir hata vermeden ortalamayı düşürür. Yüzeyin üç işini üç şey devraldı: - **SINIR** → 1024px altında sahne tepesindeki nötr kılcal çizgi (yukarıda); sticky hikâyede sınırı sahnelerin ÇAPRAZ GEÇİŞİ taşıyor (§6) ve çizgi orada çizilmez — ekranın ortasından akıp geçen bir çizgi olurdu. - **RENK** → sahne adının mürekkebi, ikon rozeti ve madde işaretleri. Bir gün boyunca ürün görselinin arkasındaki hale de bu işi yapıyordu; kaldırıldı (gerekçe §3'ün başındaki not). - **AYRIM** → boşluk: sahne dolgusu yüzeyinkini içine aldı (yukarıda). ZEMİN/KENAR/GÖLGE/YARIÇAP GERİ YAZILAMAZ; dördünden biri kutuyu tek satırda geri getirir ve `test_features_scenes_carry_no_outer_card` düşer. Dolgu da geri gelmez: yüzeyin dolgusu artık sahnenin dolgusunun İÇİNDE, ikisi yazılırsa toplanır ve içerik ekranın ortasında küçük bir adaya iner. */ .f2-grid { display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 30px); } /* MOBİL SIRA (768px altı): etiket → ad → açıklama → ürün görseli → maddeler → bağlantı. Sol/sağ kolon sarmalayıcıları `display: contents` ile kalkar, altı öğe tek kolonda kendi sırasını alır — aynı DOM, iki düzen. NOT: display:contents kutuyu kaldırdığı için bu iki öğeye verilen opacity/transform mobilde ETKİSİZDİR; giriş animasyonu bu yüzden yalnız ürün görselinde çalışır ve hiçbir içerik gizli kalmaz. */ .f2-left, .f2-right { display: contents; } .f2-ico { order: 1; } .f2-kicker { order: 2; } .f2-name { order: 3; } .f2-badge { order: 4; } .f2-lead { order: 5; } .f2-media { order: 6; } .f2-points { order: 7; } .f2-more { order: 8; } /* ---- Sol kolon ---- */ .f2-ico { /* KONTEYNER YOK — YALIN GLYPH (2026-08-30, kullanıcı kararı): tintli kutu + kenar kalktı, ikon yalnız kendisi. Aynı günün 58px rozet kararının yerini aldı; ağırlığı boy taşır (rozetin optik kütlesi yok artık). Zemin düz (`--bg`) — tintli kartın içine gömülme tuzağı burada yok (profil panelindeki karardan farkı bu). Mürekkep yine `--ac-tx`: açık temada aksanın koyu ucu, gece zemininde açık ucu (token çevirir). Koyu tema için ayrıca bir şey YAZILMAZ — eski override yalnız zemin tintiydi, o artık yok. */ display: block; color: var(--ac-tx); font-size: clamp(2.1rem, 2.8vw, 2.7rem); line-height: 1; } /* SAHNE NUMARASI (`.f2-num`, `01`–`07`) KALDIRILDI (2026-08-26, kullanıcı kararı) ve geri gelmemeli. İkonun altında duran iki haneli sayı okuyucuya bir SIRA/ÖNCELİK anlatıyordu — oysa yedi özellik sıralı değil, hiçbiri ötekinden önce gelmiyor (Kategoriler'in dört dünya kartından `01`–`04` aynı gerekçeyle çıkmıştı). Üstelik değer `loop.index`ten geliyordu: sahne listesi yeniden sıralanırsa numara sessizce başka bir özelliğe kayardı. "Kaçıncı sahnedeyim" sorusunun karşılığı zaten ilerleme bandında var (`.f2-prog-num`, `02 / 07`) — orada bir GÖSTERGE, burada bir süstü. */ .f2-name { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.14; color: var(--ac-tx); /* Sol kolon daraldı (§7 not): uzun adlar üç satıra çıkabiliyor ve son satır tek kelime kalıyordu ("… ve Diğer / Kısayollar"). `balance` satırları eşit böler; desteklemeyen tarayıcıda kural sessizce düşer. */ text-wrap: balance; } /* BAŞLIK İSTİFİ MOBİLDE DE ORTALANIR (2026-09-10, kullanıcı kararı: "özelliklerin başlıkları ve başlıkların ikonları ortalansın responsivede de"). 768px üstünde sol kolon zaten ortalanmış bir istifti (§7); mobilde `.f2-left` `display: contents` olduğu için o kural HİÇ GEÇMİYORDU — ikon ve ad sayfanın sol kenarına diziliyordu, yani aynı sahne iki genişlikte iki farklı düzen okuyordu. ORTALAMA ÖĞE ÖĞE YAZILIR, sarmalayıcıya değil: `.f2-left`e kutu vermek (`display: grid`) mobil sırayı bozar — altı öğenin `order`ı ancak ikisi de `contents` iken tek kolonda geçerli, kutu geri gelirse ürün görseli başlığın altından çıkıp kolonun dışına düşer. KAPSAM AYNI GÜN GENİŞLETİLDİ — ARTIK SAHNENİN TAMAMI (2026-09-10, ikinci kullanıcı kararı: *"tüm sayfayı ortala; textler solda kaldığı için başlıklarla uyumsuz görünüyor responsivede"*). Sabah yazılan sınır ("gövde ve madde listesi sola yaslı kalır — ortalanan bir metin bloğu okunmaz") ölçülünce kendi kendini yiyordu: mobilde ikon · ad · rozet · düğme ortalıydı, aralarındaki lead ve madde listesi sola yaslıydı, yani TEK sahnenin içinde iki farklı hiza okunuyordu. Masaüstündeki sınır DURUYOR ve duruyor olması gerekiyor: orada sağ kolon 1.14fr'lik bir okuma kolonu (`justify-items: start`) ve yanında iki kolon daha var; mobilde ise üç kolon tek kolona iniyor, yani ortalanan şey bir kolon değil SAYFANIN KENDİSİ oluyor. ÜÇ BİLDİRİM BİRLİKTE ÇALIŞIR, biri düşerse blok ortada duran ama sola dizilmiş bir metin olur (`.sec-head.is-center`in aynı ikilisi + flex): `text-align` sarmış satırları ortalar, `margin-inline: auto` 44ch'lik kutuyu kabın ortasına alır (ölçü DEĞİŞMEZ: ortalanan şey kutunun yeri, satır uzunluğu değil), `justify-content` ise madde satırının kendisini — madde bir flex satırı (tik rozeti + metin) ve otomatik marj orada iş görmez. Tik rozeti satırın SOLUNDA kalır: ortalanan şey rozet+metin ikilisi, yani ikon işaret olmaya devam eder. Bilgi bandı (`.f2-planband`) da aynı kararla ortalanır — 900px altında üç parçası (başlık · cümle · pil) tek kolona iniyor ve orada sayfanın son sola yaslı bloğu oydu. `max-width: 78ch` payı için marj yeter. */ @media (max-width: 767px) { .f2-ico, .f2-name, .f2-lead, .f2-safe, .f2-planband { text-align: center; } .f2-badge, .f2-more { margin-inline: auto; } .f2-lead { margin-inline: auto; } /* MADDE LİSTESİ METİN GİBİ ORTALANMAZ, KUTU OLARAK ORTALANIR (2026-09-10, üçüncü karar — ikinci karardaki `justify-content: center` + dolgu telafisi İKİ TUR SONRA geri alındı, kullanıcı: "aşırı asimetri var göz yoruyor okuması zor dengeli görünmüyor"). O ara çözüm sapmayı sıfırlamıştı ama başka bir şeyi ölçmemişti: `.f2-points` kutusu HİÇ DARALMIYORDU (width: auto, kabın tamamı), yani her `
  • ` kendi genişliğini konteynerin tamamından alıyordu ve `justify-content: center` her satırdaki rozet+metin ÖBEĞİNİ o tam genişlik içinde ayrı ayrı ortalıyordu. Öbek uzunluğu satırdan satıra değiştiği için (kısa madde / iki satıra sarmış madde) rozet üç sahnede üç ayrı x'te duruyordu (20 · 50 · 53px) — göz her satırda rozeti yeniden arıyordu, "dengesiz" hissi tam olarak buydu. Çözüm SATIRI değil KUTUYU ortalamak: `width: fit-content` kutuyu en geniş satırının genişliğine daraltır, `margin-inline: auto` o daralmış kutuyu kabın ortasına alır (`.f2-lead`le aynı eksen — ölçüldü, ikisinin merkezi her sahnede birebir aynı piksel). Kutunun İÇİNDE satırlar SOLA yaslanır (`justify-content: flex-start`): rozet artık HER SAHNEDE TEK x'te, sahneler arası fark yalnız o sahnenin en uzun satırından gelir. Üç ay önce aynı fikir ("tek rozet kolonu") denenip "bloğu sola yaslıyor" diye elenmişti — o denemede kutu `width: auto`ydu (konteynerin tamamı), yani sola yaslanan satırlar gerçekten sayfanın sol kenarına yapışıyordu; `width: fit-content` eklenince aynı sol hizalama artık KABIN ORTASINDAKİ KENDİ KUTUSUNUN solu oluyor — kutunun kendisi `.f2-lead`le aynı merkezde. */ .f2-points { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; } .f2-points li { justify-content: flex-start; } /* Bant IZGARA: `justify-items` her parçayı kendi izinin ekseninde daraltıp ortalar. `justify-content` YAZILAMAZ — tek örtük iz `auto` genişlikte olduğu için o, izin KENDİSİNİ kaba göre ortalar ve cümle max-content'e çekilir. */ .f2-planband { justify-items: center; } } .f2-badge { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: var(--r-full); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800; background: color-mix(in srgb, var(--ac) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); color: var(--ac-tx); width: fit-content; } /* --------------------------------------------------------------------------- 3) Orta kolon: ürün ekranı — sayfanın ASIL unsuru Kaydırmaya bağlı büyüme KAPTA (.f2-media, kuralları §6), hover büyümesi İÇERİDE (.f2-shot/.f2-fs). İkisi tek öğeye yazılırsa biri diğerini sessizce ezer — sitedeki hero parallax ve etkinlik duvarı aynı tuzağa iki kez düştü. ÖLÇÜ KURALI (kullanıcı kararı, 2026-08-24): masaüstünde medya alanı 360–420px genişlik, telefon görselinde EN FAZLA 620px yükseklik. Telefon görselleri 612×1277, yani 1:2.09 — ölçü yükseklikten verilir ama okunan şey GENİŞLİKTİR (620px → ~297px telefon); 400px'e "büyütülemezler", kırpmak ürünü yalanlar. Replika paneller (.f2-fs) 344→396px genişledi. Telefon bir dönem 580px (~278px genişlik), ondan önce 540px (~259px) idi: ikisinde de sayfanın ana unsuru olması gereken şey yanındaki metin kolonundan zayıf okunuyordu. 620px'in tavan olmasının sebebi bölümün sözü: görsel + YÜZEY dolgusu + sahne dolgusu `100svh - navbar - şerit`e sığmalı (§7), yoksa sahne bir ekranı aşar. `svh` payı bunun ikinci yarısı: 620px sabit yazılsaydı 800px'lik bir ekranda telefon tek başına sahnenin tamamını yerdi. --------------------------------------------------------------------------- */ .f2-media { position: relative; margin: 0; display: flex; justify-content: center; } /* ---- ÜRÜN GÖRSELİNİN ARKASI BOŞTUR (2026-08-26 akşamı, kullanıcı kararı) --- Burada bir gün boyunca bir HALE vardı: `.f2-media::before`, ürün ekranından yayılan geniş ve çok yumuşak bir radial gradyan (masaüstünde kabın %132'si, tepe alfa %18/%26). Dış kart kaldırılınca sahne aksanının taşıyıcısı olsun diye konmuştu ve ölçüleri tek tek hesaplanmıştı — kayıtta kalsın diye: kutu görselden BÜYÜK olmak zorundaydı (küçükken panelin arkasında hiç görünmüyordu), taban %100'ü aşamazdı (mobilde yatay kaydırma açıyordu) ve `z-index: -1` şarttı (yoksa saydam WEBP telefonun üstüne biniyordu). KALDIRILDI, ÇÜNKÜ SAHNE ARTIK HAREKETLE ANLATILIYOR. Telefonlar sticky hikâyede büyüyerek giriyor ve solarak çıkıyor; arkalarındaki renkli leke o hareketin altında "ekranın etrafına yapışmış bir parlama" olarak okunuyordu — yani gösterilmek istenen şeyin (ürün ekranının) etrafına ikinci bir görsel olay koyuyordu. Görseller bugün TEMİZ KIRIK BEYAZ ZEMİN üstünde durur: zemin sayfanın kendi `--bg`si, derinliği veren tek şey mockup'ın kendi hafif doğal gölgesi (`.f2-shot` drop-shadow / `.fs` box-shadow). RADIAL GRADYAN, BLUR, GLOW VE RENKLİ GÖLGE GERİ YAZILAMAZ — dördünden biri aynı lekeyi tek satırda geri getirir ve `test_features_product_shots_stand_ on_a_clean_background` düşer. Aksan sayfada zaten üç yerde okunuyor: sahne adının mürekkebi, ikon rozeti ve madde işaretleri. */ /* Bağlantısı olan görselin TAMAMI tıklanabilir. Odak halkası belirgin: bu bir metin linki değil, 300×580px'lik bir hedef — ince bir çizgi kaybolur. */ .f2-medialink { position: relative; display: flex; justify-content: center; border-radius: var(--r-lg); } .f2-medialink:focus-visible { outline: 3px solid var(--ac-tx); outline-offset: 10px; } /* Telefon SERBEST durur: kutu, kenarlık ve box-shadow YOK. Görseller saydam WEBP; box-shadow saydam görselde gövdenin değil dikdörtgenin gölgesini çizer, yani kaldırılan kutuyu tek satırda geri koyar. Derinlik drop-shadow ile (Site.css `.feat-shot` kararının aynısı) ve HAFİF — ağır gölge, kutuyu başka bir yoldan geri getirmektir. */ /* `max-width: 100%` ŞART ve masaüstünde de geçerli. İki telefonun ORANI artık aynı değil: plan çekimi 612×1277 (0.479), uyku çekimi ölü şeridi kırpıldığı için 612×1091 (0.561). Ölçü yükseklikten verildiği için uyku telefonu aynı yükseklikte ~%17 daha geniş çıkar — istenen de bu (ekran dolu görünsün) — ama 768–1180 arasında orta kolon 320px sabit, oradaki 600px yükseklik 337px telefon demek: kap taşar ve komşu kolonların üstüne biner. Tavan kolonun kendisi olunca kırpma değil KÜÇÜLME olur. */ /* HOVER BÜYÜMESİ BİR ÇARPANDIR (`--f2-hs`), ayrı bir `transform` DEĞİL (2026-08-26). Sticky hikâyede ölçek/kayma artık görselin KENDİSİNDE (§6) ve `transform` tek bir özellik: hover'ı ayrı bir kural olarak yazmak giriş ilerlemesini sessizce siler — telefon hover'da tam boya zıplar. Çarpan olarak yazılınca ikisi çarpılır ve JS'siz sayfada da (`--f2-p` hiç yazılmazken) hover çalışmaya devam eder. */ .f2-shot { width: min(260px, 68vw); height: auto; max-width: 100%; filter: drop-shadow(0 18px 30px rgba(60, 45, 32, .22)); transform: scale(var(--f2-hs, 1)); transition: transform var(--t) var(--ease-out); } [data-theme="dark"] .f2-shot { filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .55)); } /* --------------------------------------------------------------------------- 3b) İKİ SAHNE RASTER ÇEKİM DEĞİL, SİTENİN KENDİ TELEFONU (`.f2-phone`) Plan sahnesi: 2026-08-26 akşamı, kullanıcı kararı: *"sen kendin anasayfadaki görseli koydun … direkt aynısını al koy ya da Kidlio app'e git al."* Uyku sahnesi: aynı gün, aynı karar — ama sebebi zemin değil DİLDİ. `feature-sleep.webp` uygulamanın TÜRKÇE arayüzünden alınmış bir kareydi ("Uyku Sesleri", "Güvenlik Bilgisi", "Sık Dinlediklerim"), yani /en/ozellikler'de sayfa baştan sona İngilizceyken sahnenin ortasındaki ürün ekranı Türkçe okunuyordu; raster metin CSS ile çevrilemez. `PhoneSleep.html` tam olarak o ekranın saf-CSS replikası ve /uyku hero'su onu zaten kullanıyor. Çekim dosyası silindi. UYKU TELEFONU `phone-wrap--lg` İLE GELİR: `PhoneSleep` bir `.phone--mini` (244px) render eder; sarmalayıcı onu plan telefonuyla aynı 306px genişliğe (ekran 590px) çıkarır, yani iki telefon sahneden sahneye aynı boyda gelir. Aşağıdaki `.f2-phone .phone` kuralı ikisini birden kapsar — `animation: none` burada ayrıca yük taşır, `.phone--mini`nin kendi `phoneFloat` süzülmesi var ve bekleme evresinde yerinde duran bir ekran süzülemez. `.f2-shot` (raster çekim) kuralları §3'te DURUYOR ama bugün onu kullanan sahne YOK. Silinmediler çünkü hikâye/hover/hareket-azaltma seçici listeleri üçlü (`.f2-shot · .f2-fs · .f2-phone`) ve bir gün gerçek bir çekim geri gelirse listeden düşmüş bir seçici o sahneyi hikâyeye hiç sokmaz — hiçbir şey hata vermeden. Uygulamanın ana sekmesi `KidlioBackground` kullanıyor (açık `#1A6FF5`, koyu `#191970`) ve ana sayfanın hero telefonu zaten o ekranın saf-CSS replikası: zemini `--app-screen-bg`, yani uygulamanın kendi mavisi. Sahne bugün onu gösterir — aynı `PhonePlan.html` partial'ı, aynı kopya, aynı dört etkinlik. Yeni bir varlık üretilmedi; kazanç da bir dosya değil: ekran uygulamayla birlikte GÜNCEL kalır ve iki temada da doğru zemine oturur (raster çekim koyu temada da açık mavi kalıyordu). ÜÇ KURAL: - **ÖLÇÜ `zoom` İLE.** `.phone` 306px genişlikte ~638px yüksektir; sahnenin tavanı ise `.f2-shot` ile aynı (1024+ 600px, 1180+ 620px — gerekçesi §3). `transform: scale()` DÜZENDE hâlâ 638px yer kaplar, yani sahne hiç kısalmaz; `width` daraltmak `.phone-screen`in sabit puntolu satırlarını KIRPAR (ikisi de Site.css'te hero için tek tek elenmiş kararlar). Yükseklik guard'ları EN SONA yazılır ve şart: kısa ekranda (720p dizüstü) `.f2-shot` `70svh`e iniyor; telefon inmezse sahnenin "tek ekran" sözü yalnız orada bozulur ve hiçbir şey hata vermez. - **`transform: none`** — `.phone`un taban kuralı hero'nun tilt kancasını (`--tiltX/--tiltY`) taşıyor. Burada `data-tilt` yok, ama KALICI bir 3B dönüşüm öğeyi kendi katmanına çıkarıp içindeki metni rasterize eder (Site.css'teki "reveal düz iner" kuralının aynı gerekçesi). - **`animation: none`** — `phoneFloat` sonsuz süzülme. Bu sayfada hareketin sahibi hikâyedir (§6): bekleme evresinde YERİNDE DURAN bir ekran kendi başına süzülürse o evre "bekleme" olmaktan çıkar. --------------------------------------------------------------------------- */ .f2-phone { flex: 0 0 auto; transform: scale(var(--f2-hs, 1)); transition: transform var(--t) var(--ease-out); } /* Taban = mobil ölçek (306 → 257px, `.f2-shot`ın `min(260px, 68vw)`i ile aynı boy). Ölçek merdiveninin geri kalanı `.f2-shot`ın YÜKSEKLİK merdiveniyle YAN YANA durur (§7, 768 ve 1180 blokları) — ikisi ayrı yerlere yazılırsa telefon komşu sahnelerden farklı boyda kalır ve hiçbir şey hata vermez. */ .f2-phone .phone { zoom: .84; transform: none; animation: none; } /* ---- İKİ DENEME GERİ ALINDI — kayıt (2026-08-26) (a) MAVİ TAHTA (`.f2-board`) — 2026-08-26 akşamı, kullanıcı kararı Plan telefonunun arkasında bir gün boyunca 14-22px dolgulu, 34px yuvarlatılmış, uygulamanın mavisiyle dolu bir kutu durdu. YANLIŞ SORUNU ÇÖZÜYORDU: istenen şey telefonun ARKASI değil EKRANIydı — "telefonun bg'si ana sayfadaki gibi mavi olsun". Tahta o isteği hiç karşılamıyor, yalnız telefonun etrafına mavi bir çerçeve çiziyor ve §6'nın "telefonların arkası boş" kuralını tek sahnede deliyordu. Plan telefonu da öteki altısı gibi temiz `--bg` üstünde durur; derinliği yalnız kendi gölgesi verir. (b) RASTERİ BOYAMAK. `feature-plan.webp` saydam DEĞİLDİ (%98.7 opak — alfa yalnız cihaz çerçevesinin dışında), yani ekranın uçuk mavi zemini görselin KENDİ pikselleriydi ve CSS ile değiştirilemezdi. Boyamak zemini mavi yapardı ama üstündeki lacivert karşılama metnini okunmaz bırakırdı; metni de boyamak, uygulamanın hiç render etmediği bir ekranı uydurmak olurdu. Üçüncü yol "yeniden çekim"di ve o da yok: ekosistemin `.docs/Sunum/Ekranlar/` klasöründe çekim TALİMATI var, kare yok. Düğüm yukarıdaki §3b ile çözüldü — uygulamanın ekranı sitede zaten duruyordu. Çekim dosyası SİLİNDİ: yanlış zeminli bir kareyi "elimizde duruyor" diye bırakmak, bir sonraki oturumun onu geri koymasının en kolay yolu. */ /* Ekran replikası (.fs) ana sayfanın panelidir; orada `flex: 1` ile kolonu doldurur, burada sabit bir cihaz ekranı gibi durmalı. Dördünün de boyu AYNI: bir cihaz ekranı içeriği azaldı diye kısalmaz. YÜKSEKLİK KARTA GÖRE ÖLÇÜLÜR, yuvarlak bir sayı DEĞİL. Panelin içindeki kart dikeyde ORTALANIR ama gökyüzü grafiği (`.fs-sky`) üstte sabit 170px'tir: panel uzadıkça kazanılan yer kartın ALTINA düz mavi olarak eklenir. Bu dosya bir dönem 540px deneyip 450px'e inmişti — ama belirtiyi yarıya indirmek sorunu çözmedi. 1440px'de ölçüldü: beş kartın yükseklikleri 242 · 216 · 185 · 174 · 163px, panel ise 450px; yani "etkinlik tamamlandı" panelinde kartın 185px'i vardı ve **panelin %60'ı boş maviydi**. Sayfanın tezi "büyük ürün ekranı = kanıt" olduğu için bu tam da en pahalı yerdeki kusurdu: yedi sahnenin beşi ekran değil, boyalı bir dikdörtgen okunuyordu. Bugünkü değer EN UZUN PANEL İÇERİĞİNDEN türetilir: gövde dolgusu (2×20) + en uzun içerik + güneşin şeridi Kart sığdığı sürece beşi de AYNI boyda kalır — bir cihaz ekranı içeriği azaldı diye kısalmaz, o kural duruyor; değişen yalnız ekranın içerikle ölçülmesi. Yeni bir panel eklenip içeriği en uzun olursa DEĞER YENİDEN ÖLÇÜLMELİ: sığmayan içerik taşmaz, panel kendiliğinden uzar ve BEŞ PANEL FARKLI BOYDA olur — hiçbir şey hata vermez, ekranlar birbirini tutmaz. 440 ÖLÇÜLDÜ (2026-08-24, panel içerikleri zenginleştirildikten sonra): 1440 ve 1000px'de içerikler 256 · 314 · 360 · 270 · 327px. Tavan 360 + 40 dolgu = 400 yalnız sığmaya yeter; 440 ayrıca GÜNEŞİ KURTARIR. Gökyüzünün güneşi panelin tepesinden 14–46px arasında duruyor ve içerik dikeyde ortalandığı için 400'de aile paneli (etiketi olmayan tek panel, kart hemen başlıyor) kartı 36px'e yerleştirip güneşin üstüne biniyordu. 440'ta en yüksek kart 56px'ten başlar. Yani bu sayı iki kısıtın birden karşılığı: sığmak VE gökyüzünü yememek. */ .f2-fs { flex: 0 0 auto; width: min(340px, 90vw); /* 440 → 470 (2026-08-30 gece, kullanıcı: "görselleri büyütmen için gerekiyorsa kartların boyunu da büyütebilirsin") — üst bant 140px'e çıkınca içerik nefes alsın. Mobil taban genişliği 340'ta kaldı. */ min-height: 470px; transform: scale(var(--f2-hs, 1)); transition: transform var(--t) var(--ease-out); } /* ---- ÜRÜN EKRANLARININ ARKASINDA DIŞ GÖLGE YOK (kullanıcı kararı, 2026-08-26) Yalnız GÖLGE kalkar: ölçü, geçiş, yüzey ve düzen değişmez. - `.f2-fs` gölgesini Site.css'in `.fs` kuralından miras alıyor (`box-shadow: var(--shadow)`). Bu sayfaya özel bir "gölgesiz" varyant yazmak yerine burada EZİLİR — `.fs` ana sayfada aynen gölgeli kalmalı. `!important` bilinçli: `.fs` ile `.f2-fs` aynı özgüllükte (0,1,0) ve iki dosya arasındaki sıra bir gün değişirse (Site.css sonra yüklenirse) kural sessizce düşerdi. - Telefonda gölgenin YALNIZ DIŞ katmanı gider (`var(--shadow-lg)`); ince iç çerçeve (`inset … rgba(255,255,255,.06)`) KALIR — cihazın kenar parlamasıdır, arkasına düşen bir leke değil. `box-shadow: none` yazmak onu da silerdi. Kural §6'nın "telefonların arkası boş" maddesinin bir adım ilerisi: orada hale/gradyan/blur yasaklanmış ama mockup'ın kendi gölgesi bırakılmıştı. */ .f2-fs { box-shadow: none !important; } .f2-phone .phone { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); } /* ---- Replika panellerin bu sayfaya özel parçaları ---- Hepsi Site.css'in `.fs` dilinin İÇİNDE kalır (aynı kart, aynı tipografi, aynı çizgi ağırlığı); buradaki kurallar yalnız o dilde olmayan iki şeyi ekler: kart İÇİNDE bölüm ayracı ve ekranın kendi küçük bileşenleri. İÇ İÇE KART YASAK — ürün ekranının İÇİNDE ayrım her yerde kılcal çizgiyle yapılır. (Kural PANELİN İÇİ için; sahnenin kendi yüzeyi ile alt bölümlerin kartları ayrı bir katman ve onların içine de kart girmiyor.) */ .f2-fs .f2-fs-div { height: 1px; margin: 1px 0; background: color-mix(in srgb, var(--tx3) 22%, transparent); } /* AÇIK UYGULAMA YÜZEYİ VARYANTI (pilot, "Bu Yaşta") 2026-08-30 gecesi silindi: kullanıcı "telefon dışındaki hepsini çıplak kart yap" dedi. Değerleri (zemin #E9F2FF→#F6FAFF, soluk mavi bulutlar, tx2 etiket, mavi kılcal) git geçmişinde — commit d307ff3; geri dönerse oradan alınır. */ /* ÇIPLAK PANELDEKİ HIZLI ÇÖZÜM ÇİPLERİ — cam değil, site çip dili. Temel `.fs-quick > span` cam-sür: beyaz metin + `backdrop-filter`, MAVİ GÖĞÜN üstü için tasarlandı; çıplakta (krem sayfa) metni görünmez olurdu. Burada token'lardan okunan site çipi: beyaz zemin, güçlü kılcal, mürekkep; seçili yalnız dolu mavi + beyaz glif (`.fs-ages i.is-on` ile aynı karar). Token'lar temayla çevrildiği için koyu tema kendi değerlerini alır. */ .f2-fs--bare .fs-quick > span { background: var(--card); border: 1px solid var(--border-strong); color: var(--tx1); backdrop-filter: none; -webkit-backdrop-filter: none; } .f2-fs--bare .fs-quick > span.is-on i { color: #fff; opacity: 1; } /* ---- OKUNABİLİRLİK VE ÖLÇÜ DÜZELTMESİ (2026-08-30, kullanıcı: "görseller çok küçük kalmış, yazıların çoğu okunmuyor") ---- Ölçüm teşhisi: kart içi punto `.fs` tabanından geliyordu (.88rem) — fs-tag 9.6px · rozetler 10.7px · fs-note 11px, üstelik fs-note'nun rengi `--tx3` (beyazda 2.8:1, AA altı). Sticky hikâye görseli giriş evresinde 0.68×'e inince ziyaretçi bu yazıların çoğunu ~7-10px okuyordu. Çare: çıplak kartların taban puntosu 1rem'e çıkar (em tabanlı her şey +%'14 büyür), en küçüklere mutlak taban koşul, fs-note mürekkebi tx2'ye döner, görseller büyür. Bu kurallar YALNIZ `.f2-fs--bare` kapsamında — ana sayfanın / /gelisim'in /fiyatlandirma'nın `.fs` panelleri kendi ölçüsünde kalır (onlar mavi panel içinde, ölçeklenmiyor). */ .f2-fs--bare { font-size: 1rem; } .f2-fs--bare .fs-note { color: var(--tx2); } .f2-fs--bare .fs-role { font-size: max(.76em, 12px); } .f2-fs--bare .fs-sec em { font-size: max(.78em, 12px); } .f2-fs--bare .f2-check li i { font-size: max(.72em, 12px); } .f2-fs--bare .f2-check b { font-size: max(.78em, 12px); } /* ---- KARTLARA EĞLENCE (2026-08-30; 23:00 revizyonu) ---- Görsel kimliği ÜST BANDI taşır (`.f2-band`): yuvarlak çerçeveli, gerçek katalog illüstrasyonu — bugün tek okuyanı Etkinlik Detayı ve gösterdiği şey o sahnenin KENDİ etkinliği. İkinci okuyanı "Enerjim Yok" kartıydı (görsel `q.pick`ten geliyordu); o panel 2026-08-31'de sahnesiyle birlikte silindi, kural burada duruyor. Maskotun başına gelenler (kayıt): done kartındaki kutlama maskotu + yıldızlar ve yorgunluk kartındaki enter-hero "maskota gerek yok / yerine başka bir şey" kararıyla kalktı; "Bu Yaşta"nın büyüteçli Kidlio'su duruyor. */ .f2-band { display: block; height: 140px; border-radius: 14px; overflow: hidden; } .f2-band img { width: 100%; height: 100%; object-fit: cover; display: block; } .f2-kido-q { justify-self: end; width: 84px; height: auto; margin-top: 4px; filter: drop-shadow(0 6px 10px rgba(36,55,105,.20)); } /* ÇIPLAK KART VARYANTI — ikinci pilot (2026-08-30, kullanıcı isteği): arka alan YOK; içteki yazılı kartın kendisi ekran. Gökyüzü süsü ve panel zemini kalkar, kart tam boyu doldurur (440px — sahne ölçüsü değişmez, sadece yüzey gider). Bu varyant İKİ temada da çıplaktır; koyu tema için ayrıca `[data-theme="dark"]` ön ekli satır ŞART — temel gece kuralı (`[data-theme="dark"] .fs`) aynı özgüllükte ve Site.css'te ÖNCE geldiği için, sonradan gelen bu kural onu ezer; öneksiz satır yalnız açık temayı karşılar. Etiket gökten iner: mürekkep tx2 (krem üstünde ölçülü), gölge yok. Kart kenarı krem üzerinde kılcal `--border` + yumuşak gölge — "ekran" okunması kenardan ve köşeden (20px) gelir, zemin boyasından değil. */ .f2-fs--bare, [data-theme="dark"] .f2-fs--bare { background: none; box-shadow: none; color: var(--tx2); } .f2-fs--bare .fs-sky { display: none; } .f2-fs--bare .fs-label--sky { color: var(--tx2); text-shadow: none; } [data-theme="dark"] .f2-fs--bare .fs-label--sky { color: var(--night-tx2, #AFC0E4); } .f2-fs--bare .fs-body { display: flex; flex-direction: column; /* flex sütun: kart kalan boyu güvenilirce doldurur (grid'te auto satır yüzdeyle büyümüyor, %78'de kalıyordu — ölçüldü) */ } .f2-fs--bare .fs-card { flex: 1; align-content: center; /* ZEMİNDEN AYRIŞMA (2026-08-30, kullanıcı isteği) — üç meşru kaldıraç: saf beyaz zemin (.96 alfa kremle neredeyse eş parlaklıktaydı), güçlü kılcal kenar (--border → --border-strong) ve ÜÇ KATMANLI nötr gölge (temas + orta + ortam). Renkli gölge/aksan halesi testle yasak (test_features_product_shots_stand_on_a_clean_background), kenara renkli bant tasarım kuralıyla yasak — derinlik tamamıyla gölgeden ve kenardan. */ background: #fff; border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(10,24,55,.10), 0 10px 24px -12px rgba(10,24,55,.22), 0 30px 60px -28px rgba(10,24,55,.45); } [data-theme="dark"] .f2-fs--bare .fs-card { background: rgba(10,24,55,.95); border-color: rgba(140,145,255,.28); box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 26px 52px -26px rgba(0,0,0,.85); } /* Çocuk profili — ad satırı. Avatar `.fs-av` (aile panelindeki daire, tek kaynak); alan DOLU ve imleçli, çünkü boş bir kutu "kurulmamış ekran" gibi okunuyordu. `is-filled` yer tutucu rengini gövde rengine çevirir — dizeyi değiştirmeden, yani /ozellikler'in aynı bileşeni etkilenmez. */ .f2-namerow { display: flex; align-items: center; gap: 10px; } .f2-namefield { flex: 1; min-width: 0; display: grid; gap: 3px; } .f2-namefield > small { font-size: .78em; font-weight: 700; color: var(--tx3); } .f2-fs .fs-input.is-filled { display: flex; align-items: center; color: var(--tx1); font-weight: 700; } [data-theme="dark"] .f2-fs .fs-input.is-filled { color: #EAF1FF; } /* İmleç YANIP SÖNMEZ: bu sayfada sürekli dönen/atan hiçbir hareket yok (§6'nın kuralı) ve yedi bölümlük bir akışta tek bir yanıp sönen çizgi gözü oraya çiviler. Duran bir imleç "buraya yazılıyor" demeye yeter. */ .f2-caret { width: 2px; height: 1.05em; margin-left: 2px; background: var(--blue); border-radius: 1px; } /* Yaş seçici TEK SATIR. Site.css'in `.fs-ages`i sarar ve orada bunun bir gerekçesi var ("sarmalamak kırpmaktan dürüst": uygulamadaki şerit yatay kayıyor, durağan bir kesitte kaydırma görünmez, yani kırpılmış bir şerit "0'dan 5'e kadar" diye okunur). BURADA HİÇBİR ŞEY KIRPILMIYOR — on bir çipin on biri de satırda duruyor — yani o gerekçe geçerli değil; geçerli olan, sarınca ikinci satırda tek başına kalan "10"un ekranı kırık göstermesiydi. Çipler ESNEK (`flex: 1 1 0`), sabit genişlikte değil: satır 340px'lik mobil panelde de 396px'lik masaüstü panelinde de tam dolar ve hiçbir breakpoint'te taşmaz. Sabit ölçü denendi — 26px masaüstünde sığıyor, mobilde kartı panelden 8px taşırıyordu. `min-width: 0` şart: Site.css `min-width: 26px` veriyor ve esnemeyi o engelliyor. */ .f2-ages { flex-wrap: nowrap; gap: 3px; } .f2-ages i { flex: 1 1 0; min-width: 0; font-size: .78em; } /* --- Favoriler kartı — profil panelinin İKİNCİ YARISI ---------------------- Sahnenin adı "Çocuk Profilleri ve Favoriler", lead'i de favorileri söz veriyordu ama panel yalnız kurulum formuydu: ekran, yanındaki metnin yarısını kanıtlıyordu ("Bu Yaşta" panelinin haftalık özetiyle aynı gerekçe). Yan kazanç, sayfanın asıl derdiydi: beş replikanın hiçbirinde tek bir RESİM yoktu — yedi sahnenin canlı duran ikisi tam da gerçek ekran görüntüsü olan ikisiydi. İlk gerçek etkinlik illüstrasyonu buradan giriyor. Kart uygulamanın KENDİ favoriler ekranından sıkıştırıldı (app/favorites.tsx → ActivityCard): geniş bant görsel, üstüne kategori çipi + DOLU kalp + etkinliği favorileyen çocuğun avatarı, altında ad + süre. BANT BOYU (58px) BÜTÇEDEN GELİR, gözden değil. Panel gövdesi 400px sabit ve sığmayan içeriği `.fs`in `overflow: hidden`i SESSİZCE kırpar. Bu panelde ölçülen pay 143px idi (en dar masaüstü, 900-1024px'te ölçüldü — panelin gövdesi 401px, kutusu 441px); ayraç + başlık + bant + ad satırı onun içinde kalmak zorunda ve bugün TAM sığıyor (kırpma yok). Bandı büyütmek hiçbir hata vermez, kartın altını görünmez yapar — yeni bir satır eklenirse pay YENİDEN ÖLÇÜLMELİ (`.f2-fs--done` panelindeki aynı kural). */ .f2-fav { display: grid; gap: 6px; } .f2-fav-img { position: relative; display: block; /* 58 → 120px (2026-08-30 gece, kullanıcı: "favorilerim alanındaki görsel de küçük kalmış") — kart 396px genişleyince bant da yeni dilin ölçüsüne yaklaşır (üst bantlar 140px); radius 14 aynı dil. Eski 58px'lik bütçe notu (440px'lik panel gününden) geçersiz: panel artık min 470 ve içerikle büyür — ölçüm: taşma 0. */ height: 120px; border-radius: 14px; overflow: hidden; } /* Görsel gerçek katalog illüstrasyonu (geniş bant, 720x338). `cover` kırpar; `object-position` üste çekilir — suluboyalarda ilgi merkezi çoğunlukla üst yarıda ve ortadan kırpmak çocuğun başını kesiyordu. */ .f2-fav-img > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 34%; } /* Kategori çipi DOLU kategori rengi + beyaz metin — uygulamada da öyle, ve suluboya görselin üstünde tintli bir çip okunmuyor. */ .f2-fav-cat { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--r-full); background: var(--pc); color: #fff; font-size: .72em; font-weight: 800; line-height: 1.5; } /* Kalp DOLU ve kırmızı (#EF4444 — uygulamanın favori rengi). Boş kalp "favorilenebilir" der; bu kart zaten favorilenmiş bir etkinliği gösteriyor, yani boş hâli ekranı kendi başlığıyla çelişkiye düşürürdü. */ .f2-fav-img > i { position: absolute; right: 6px; top: 6px; font-size: .82em; color: #EF4444; filter: drop-shadow(0 1px 3px rgba(10, 24, 55, .6)); } /* Etkinliği favorileyen çocuk (uygulamanın `cardAvatarStack`i). Harf profil kartındaki avatarla AYNI kaynaktan (`sh.name[0]`) gelir: iki yarı aynı çocuğu anlatıyor, ayrı yazılsalardı sessizce ayrışırdı. */ .f2-fav-who { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #7FB6FF, #2E8BF7); border: 1.5px solid rgba(255, 255, 255, .85); font-size: .62em; font-weight: 800; color: #fff; } .f2-fav-copy { display: flex; align-items: center; gap: 8px; } /* `color` YAZILMAZ: `.fs-card` iki temada da doğru mürekkebi veriyor (açıkta `--tx1`, koyuda #EAF1FF) ve token'ı burada tekrar etmek koyu temada beyaz kart varsayımına düşerdi. */ .f2-fav-copy > b { flex: 1; min-width: 0; font-size: .89em; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f2-fav-copy > small { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .78em; font-weight: 700; color: var(--tx3); } [data-theme="dark"] .f2-fs .f2-fav-copy > small { color: #A9BCE4; } /* Durum çipleri (yorgun paneli) — Site.css `.fs-quick` ızgarasının aynısı, iki farkla: burada biri SEÇİLİ ve altı çip kartın da yer alacağı bir panele sığmak zorunda, o yüzden dolgu bir tık dar (ana sayfada çipler panelin TAMAMI, burada üçte biri). İki kolonda kalır — üç kolon denendi ve elendi: 396px'lik panelde hücre 108px'e düşüyor, "Yatma vakti" sarıyor. Seçili çip vurguyu ZEMİNDEN alır; punto ve dolgu değişmez, yoksa seçim her değiştiğinde ızgara kayar. */ .f2-fs .fs-quick { gap: 7px; } .f2-fs .fs-quick > span { padding: 9px 11px; font-size: .84em; border-radius: 13px; } /* Seçili çip: paneller ÇIPLAK olduğundan (2026-08-30, beş replikanın tamamı) seçili, sitenin seçili-çip dilini okur — dolu mavi + beyaz glif (`.fs-ages i.is-on` ile aynı karar; iki temada da aynı çalışır). Eskisi mavi gök üstünde beyaz zemin + btn-tx mürekkepti: cam çiplerin arasında "seçili" demenin tek yolu beyaz kutuydu; krem üzerinde beyaz kutu ayrışmaz. */ .f2-fs--bare .fs-quick > span.is-on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 18px -10px rgba(10, 24, 55, .55); } /* --- 3a) Etkinlik paneli (`fs-done`) — SADELEŞTİRİLDİ, 2026-08-24 ----------- Bu panel yedi sahnenin en yoğunuydu: dört malzeme, üç adım, iki ilerleme rozeti ve kutlama, hepsi `.fs`in .88rem tabanına oturan .8–.84em'lik puntolarla — yani ana satırlar masaüstünde **11.8px**. Üstelik uzun adım cümleleri tek satıra sıkıştırılıp üç noktayla kesiliyordu. İKİ ÖLÇÜ BİRDEN DEĞİŞTİ ve ikisi birlikte çalışır: - **Taban punto .92rem** (14.7px), yalnız BU panelde. Diğer dört panel `.fs`in kendi ölçüsünde kalır; ölçü tek tek satırlara yazılsaydı yeni bir satır eklendiğinde sessizce eski (küçük) ölçüde kalırdı. Ana satırlar böylece .89em → **13.1px**, seçenek çipleri 13.1px, kart başlıkları 14.7px — hepsi 13px eşiğinin üstünde. - **Kart boşluğu 12 → 9px.** Panelin `min-height`i 440px'de SABİT kalmak zorunda (§3: beş ekranın boyu aynı olmalı) ve büyüyen punto + sarma satırları o bütçeyi yiyor. Ölçüldü: en dar hâlde (768–1180 arası, panel 356px, EN kopya) kart 361px, gövde 389px — 400px'lik alana 11px payla sığıyor. Yeni bir satır eklenirse pay YENİDEN ÖLÇÜLMELİ: sığmayan içerik hata vermez, `.fs`in `overflow: hidden`i onu sessizce kırpar. */ .f2-fs--done { font-size: .92rem; } .f2-fs--done .fs-card { gap: 9px; } /* Malzeme ve adım listeleri. İki liste aynı bileşen, tek fark madde işareti: malzemede onay, adımda sıra numarası. */ .f2-check { display: grid; gap: 5px; } .f2-check-head { display: flex; align-items: center; gap: 8px; font-size: .82em; font-weight: 800; color: var(--tx2); } .f2-check-head > b { margin-left: auto; font-size: .94em; font-weight: 800; color: var(--cat-kesfet-deep); } [data-theme="dark"] .f2-fs .f2-check-head > b { color: #6EE7A0; } .f2-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } /* `flex-start`: satır sardığında ikon/numara İLK satırla hizalanır. `center` iken iki satırlık bir adımda numara ortada asılı kalıyordu. */ .f2-check li { display: flex; align-items: flex-start; gap: 8px; font-size: .89em; line-height: 1.4; min-width: 0; } /* SATIRLAR KIRPILMAZ, SARAR (2026-08-24). Burada bir dönem `white-space: nowrap` + `text-overflow: ellipsis` vardı ve gerekçesi "sarmak kart boyunu içeriğe bağlar" idi — doğru bir kaygı, yanlış çözüm: kırpılan şey adımın KENDİSİYDİ, yani panelin kanıtlamak için var olduğu tek bilgi. TR'de "Üç bardağa su doldurup kırmızı, sarı ve mavi boya…" diye bitiyordu. Boy artık liste UZUNLUĞU sabitlenerek tutuluyor (şablon `[:3]` / `[:2]`), satır sayısı değil. */ .f2-check li > span { min-width: 0; } .f2-check li > i { flex: none; font-style: normal; margin-top: .22em; font-size: .72em; font-weight: 800; color: var(--cat-kesfet-deep); } [data-theme="dark"] .f2-fs .f2-check li > i { color: #6EE7A0; } .f2-check .is-steps li > i { width: 16px; height: 16px; margin-top: .06em; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); } [data-theme="dark"] .f2-fs .f2-check .is-steps li > i { color: #9EC2FF; } /* Haftalık özet cümlesi ("Bu Yaşta" panelinin ikinci yarısı) günlük nottan bir tık küçük: not sahnenin ASIL kanıtı, özet onun devamı. */ .f2-fs .f2-week { font-size: .88em; color: var(--tx2); } [data-theme="dark"] .f2-fs .f2-week { color: #A9BCE4; } /* "Nasıl geçti?" seçenekleri (yalnız `fs-done` paneli). Site.css'in `.fs-ages` çipi rakam için ölçülmüş (kare, 26px); bunlar kelime taşıyor, o yüzden kendi kuralları — ama aynı dil: cam çip, kart zemininde nötr. ÜÇÜ DE AYNI GÖRÜNÜR ve öyle kalmalı: uygulamada da üç seçenek eşit ağırlıklı kategorik gözlem, puan değil. Birini "seçili" göstermek ekrana bir doğru cevap koyar ve panelin anlattığı şeyin tam tersini söyler. */ .f2-opts { display: flex; flex-wrap: wrap; gap: 6px; } .f2-opts i { font-style: normal; font-size: .89em; font-weight: 700; padding: 5px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--tx3) 12%, transparent); color: var(--tx2); } [data-theme="dark"] .f2 .f2-opts i { background: rgba(255,255,255,.10); color: #C6D6F2; } /* Masaüstüne özel "İncele" ipucu — ve YALNIZ gerçek bir bağlantı varsa (şablon bu yüzden `href` boşsa etiketi hiç yazmaz). Sistem imleci DEĞİŞTİRİLMEZ: özel imleç erişilebilirlik gerilemesidir. */ .f2-peek { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.92); display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: var(--r-full); background: var(--ac-tx); color: #fff; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity var(--t-sm) ease, transform var(--t-sm) var(--ease-out); } /* ---- Sağ kolon ---- SAĞ KOLON BİR KADEME GÜÇLENDİ (2026-09-07, kullanıcı kararı: "sayfadaki section'ların sağ taraflarını çok daha iyi görünür hale getirmeliyiz"). Ölçülen sorun kontrast değil AĞIRLIKTI: solda 3 satırlık bir başlık, ortada ~620px'lik bir telefon, sağda `--fs` (16px) `--tx2` bir madde listesi ve `.78em`lik bir tik vardı — sahnenin ARGÜMANI en zayıf üçüncü katmandı. Üç ayar: lead 600 ağırlık, maddeler `--fs-lg`/`--tx1`, tik ise aksan tintli bir daire içine alındı (glyph büyütmek yerine ÇAP: 26px'lik yuvarlak, aynı ailedeki `.ptease-ico` deseni). KART EKLENMEDİ: sağ kolona zemin/kenar vermek `.f2-surface`ın 2026-08-26'da kaldırılma sebebini geri getirirdi (ürün ekranı, kendisiyle yarışan bir pastel kutunun içinde kalıyordu). Görünürlük tipografiden geldi. */ .f2-lead { /* `margin-block` — `margin: 0` DEĞİL, ve fark ölçülmüştür (2026-09-10). Bu taban kural dosyada mobil bloğun (767px, ~600 satır yukarıda) ALTINDA duruyor; medya sorgusu özgüllük EKLEMEDİĞİ için `margin: 0` kısayolu oradaki `margin-inline: auto`yu sessizce eziyordu — kural yazılıydı, testi vardı, ekranda HİÇ geçmiyordu. Bir `

    `/`