/* ============================================================================
Growth.css — YALNIZ /gelisim
Şablon: Pages/Site/Growth.html · Davranış: Js/Site/Growth.js
Features.css ve Categories.css'in kurduğu desen: sayfaya özel kurallar
sayfaya özel dosyada yaşar, Site.css'e bir satır bile eklenmez. Bu dosya
Site.css §35'in yerini aldı — o bölüm (≈110 satır) her sayfaya iniyordu
ama yalnız burada geçiyordu. `ga-*` ve `gn-*` adları KORUNDU: testler o
yazımla sayıyor (`test_growth_page_shows_all_eight_areas`,
`test_growth_page_keeps_the_what_kidlio_is_not_section`). Yeni bloklar
`gx-` ön ekli — bu sayfanın ad alanı.
TASARIM SİSTEMİNDEN NE ÖDÜNÇ ALINDI: token'ların tamamı, `.eyebrow`,
`.container`, `.reveal`, uygulama paneli dili (`.fs`,
`.fs-body`, `.fs-card`, `.fs-sec`, `.fs-label`, `.fs-sky`), `devAreaIcon`
(`.devarea-ico`) ve gece paneli token'ları (`--night-*`). Yeni font yok,
yeni kütüphane yok, yeni görsel varlık yok.
İÇİNDEKİLER
1) Kabuk
2) Hero (kopya + üç adım) · Gelişim Yolculuğu ekranı bölümü
3) Üç adım — hero'nun içindeki bulutlar
4) Sekiz alan kartı
5) Lacivert güven bandı
6) Responsive + mobil akordeon
7) prefers-reduced-motion
============================================================================ */
/* ----------------------------------------------------------------------------
1) Kabuk
---------------------------------------------------------------------------- */
.gx { --gx-r: var(--r-lg); }
/* ----------------------------------------------------------------------------
2) Hero — tek kolon, ortalanmış: kopya + üç adım (ürün ekranı aşağıda)
`.page-hero` ORTALANMIŞ tek kolondur; bu hero iki kolon, o yüzden sayfanın
kendi hero'su (Kategoriler'deki aynı karar ve aynı tuzaklar):
- ÜST DOLGUYA `--nav-h` DAHİLDİR. Navbar `position: fixed`, yani sayfa
akışında hiç yer kaplamıyor ve hero `top: 0`dan başlıyor; düz bir dolguyla
ekranın tepesi navbar'ın altında kalır.
- BAŞLIĞIN PUNTOSU ELLE YAZILIR. Taban `h1` kuralı yalnız aile/ağırlık/satır
verir, ÖLÇÜ vermez; yazılmazsa tarayıcının 2em varsayılanı geçerli olur ve
başlık masaüstünde 34px'te kalır — iki kolonlu bir hero'da kopya baş
roldür, küçük başlık sağdaki ekranı yalnız bırakır. Tavan `.page-hero`nun
ALTINDA: bu kopya tek kolona değil kolonun yarısına sığmak zorunda.
---------------------------------------------------------------------------- */
.gx-hero {
position: relative; overflow: hidden;
/* İlk-ekran denetimi (2026-08-30): 30/5vw/60 → 18/3vw/38, alt
30/5vw/64 → 20/3.2vw/40 — kullanım hikâyesi bölümü fold'a yaklaştı. */
padding: calc(var(--nav-h) + clamp(18px, 3vw, 38px)) 0 clamp(20px, 3.2vw, 40px);
}
/* İlk-ekran denetimi (2026-08-30): hero'yu izleyen kullanım hikâyesinin
104px üst dolgusu hero altıyla üst üste binip 1440×900'de 176px'lik ölü
bant açıyordu. Yalnız hero komşusu kısıldı (`.section:has(+ .cta-sec)`
deseninin hero tarafındaki karşılığı); 761px altında blok geçmez — mobil
ritim değişmedi. */
@media (min-width: 761px) {
.gx-hero + .gx-screen-sec { padding-top: 48px; }
}
.gx-hero-bg { position: absolute; inset: 0; pointer-events: none; }
/* Dekoratif renk lekeleri — sekiz alanın ilk dördünün rengi, çok düşük alfa.
Hiçbiri metnin altına girmez; bilgi taşımazlar, sıcaklık taşırlar. */
.gx-blob {
position: absolute; border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklch, var(--da) 42%, transparent), transparent 68%);
filter: blur(18px);
}
.gx-blob--1 { width: 320px; height: 320px; top: -80px; left: -90px; opacity: .30; }
.gx-blob--2 { width: 240px; height: 240px; bottom: -70px; left: 26%; opacity: .22; }
.gx-blob--3 { width: 300px; height: 300px; top: 8%; right: -80px; opacity: .26; }
.gx-blob--4 { width: 220px; height: 220px; bottom: -60px; right: 18%; opacity: .20; }
/* KOYU TEMADA RENKLİ IŞIMA YOK (2026-09-01, kullanıcı kararı: *"dark moddaki
bg'deki renkli ışımaları kaldır"*). Aynı fikrin (zemine renkli ışık havuzu)
koyu temada geri alınışı bu; gerekçesi Site.css'teki "ORTAM IŞIĞI" notuyla
aynı — lacivert gecede düşük alfalı renk lekesi sıcaklık değil pus üretiyor.
AÇIK TEMADA DURUYOR: orada zemin kırık beyaz ve lekeler seçilmeden ısıtıyor. */
[data-theme="dark"] .gx-blob { display: none; }
.gx-hero-in {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr;
gap: clamp(26px, 3.6vw, 46px); justify-items: center;
}
/* TEK KOLON, ORTALANMIŞ (2026-09-01, kullanıcı kararı: üç adım ilk ekranda
görünsün). Eskiden iki kolondu — kopya solda, ürün ekranı sağda; ekran
kendi bölümüne indi (`.gx-screen-sec`) ve hero'nun sağ kolonu boşaldı. */
.gx-hero-copy { text-align: center; max-width: 54ch; }
.gx-hero-copy h1 {
margin: 12px 0 14px;
font-size: clamp(2rem, 4.2vw, 2.95rem);
letter-spacing: -.02em; text-wrap: balance;
}
.gx-hero-copy p { margin: 0 auto; font-size: var(--fs-2xl); color: var(--tx2); max-width: 52ch; }
/* ---- Gelişim Yolculuğu ekranı ----
`.fs` ailesinin (Site.css "UYGULAMA PANELİ") ikinci kullanımı: gökyüzü
zemini + cam kartlar. Telefon GÖVDESİ yok, bilerek — sayfada başka telefon
maketi yok ve bir çerçeve eklemek ekranı küçültürdü; ekran burada baş rolde.
PUAN / YÜZDE / SIRALAMA YOK. Ekrandaki tek sayı "birlikte kaç etkinlik
yaptınız". Bar eklemek onu bir karşılaştırmaya, yüzde eklemek bir ölçüme
çevirir — ikisi de sayfanın dibindeki lacivert bandın sözünü çürütür. */
.gx-screen-sec { padding-top: clamp(26px, 3.4vw, 44px); }
/* ---- KART DEĞİL, SAYFANIN KENDİSİ (2026-09-01, kullanıcı: *"altındaki kartı
da kart olarak bırakmayalım"*) ------------------------------------------
Ekran hero'nun sağ kolonundayken beyaz bir karttı ve orada doğruydu: küçük,
çerçeveli, "telefondaki ekran" gibi. Kendi bölümüne inince aynı kart 520px
genişliğinde bir maket olarak kaldı — sayfanın ortasında duran bir ekran
görüntüsü. Şimdi kabuk yok: başlık satırı sayfanın başlığı gibi, sekiz alan
sayfanın ızgarası gibi, bölümleri yalnız saç teli çizgiler ayırıyor. İçerik,
sırası ve her satırı AYNEN duruyor — değişen tek şey çerçeve.
`fs`/`fs-sky`/`fs-card` DOM'da bilerek duruyor: varyant tek sınıfla geri
alınabilsin diye ve testler `fs-sky`ı arıyor. */
.gx-screen-wrap { position: relative; max-width: 940px; margin-inline: auto; }
.gx-screen { border-radius: 0; padding: 0; font-size: 1rem; }
.gx-screen.fs--bare .fs-card {
background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
}
[data-theme="dark"] .gx-screen.fs--bare .fs-card { background: none; }
.gx-screen-sec .gx-app { padding: 0; gap: clamp(14px, 1.8vw, 20px); }
/* Başlık satırı sayfa ölçeğinde: ikon büyür, ekranın adı bir bölüm başlığı
gibi okunur. Sekmeler yine sağda ve yine `aria-selected` tek kaynak. */
.gx-screen-sec .gx-appbar { padding-bottom: clamp(12px, 1.6vw, 16px); }
.gx-screen-sec .gx-appbar-t { font-size: 1.22em; gap: 11px; }
.gx-screen-sec .gx-appbar-t > i { flex-basis: 34px; height: 34px; border-radius: 12px; }
.gx-screen-sec .gx-who { font-size: .62em; }
.gx-screen-sec .gx-tab { padding: 7px 14px; font-size: .62em; }
/* Sayfa ölçeğinde çember büyür ve sekiz alan onun SAĞINDA iki kolon durur.
Dört kolon burada denenmez: liste çemberin yanında zaten dar, dört kolonda
ad tekrar üç noktaya iner (düzeltilen şey tam olarak oydu). */
.gx-screen-sec .gx-wheel { --wh: clamp(196px, 22vw, 252px); }
.gx-screen-sec .gx-areas { gap: 10px; }
.gx-screen-sec .gx-area-btn { padding: 11px 12px; border-radius: 15px; }
.gx-screen-sec .gx-areas .devarea-ico { flex-basis: 30px; height: 30px; border-radius: 10px; }
.gx-screen-sec .gx-area-name { font-size: .84em; }
.gx-screen-sec .gx-area-n { font-size: .76em; }
.gx-screen-sec .gx-note { font-size: .8em; padding-top: 11px; }
/* GÜNEŞ SAĞ ÜST KÖŞEDEN ALINIR. `.fs-sky::before` varsayılanı `top:14px;
right:18px` ve tam olarak `.gx-who` ("Her çocuğa özel") etiketinin altına
düşüyor — iki açık sarı leke üst üste biniyordu. Şu an hiçbir şey
boyamıyor (panel `fs--bare`, gök gizli); kural SİLİNMEZ, varyant tek sınıfla
geri alınabiliyor ve o gün bu düzeltme aynı anda gerekiyor. */
.gx-screen .fs-sky::before { top: 8px; right: auto; left: 44%; width: 22px; height: 22px; }
.gx-screen .fs-body { gap: 12px; }
/* `.fs-card`ın `flex: 1` + `align-content: center`ı varyantın TEK KARTLI
panelleri için; burada kartın boyu içerikten gelir. `.gx-who`nun `opacity`
payı ise mavi gök içindi — krem zeminde aynı pay metni AA'nın altına indirir. */
.gx-screen.fs--bare .fs-card { flex: 0 0 auto; align-content: normal; }
.gx-screen.fs--bare .gx-who { opacity: 1; }
.gx-card { gap: 10px; padding: 13px 14px; }
/* ---- Uygulama başlık çubuğu ----
Solda ekranın adı + çocuk, SAĞDA sekmeler. Sekmeler eskiden kartın
tamamına yayılmış üç dev düğmeydi ve ekranın en dikkat çeken öğesiydi —
oysa sekme bir filtre, ekranın konusu değil. */
.gx-appbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.gx-appbar-t {
display: flex; align-items: center; gap: 9px; min-width: 0;
font-family: var(--font-head); font-weight: 800; line-height: 1.2;
}
.gx-appbar-t > i {
flex: 0 0 28px; height: 28px; display: grid; place-items: center;
border-radius: 10px; font-size: .62em; color: #fff;
background: var(--blue);
}
.gx-who { margin-left: .5em; font-size: .66em; font-weight: 700; color: var(--tx2); }
[data-theme="dark"] .gx-screen .gx-who { color: #A9BEE8; }
.gx-sec { font-size: .95em; }
.gx-sec > i { color: var(--blue); }
/* Tek kart, iki kart değil: bölümleri saç teli çizgi ayırır. */
.gx-sec--split {
margin-top: 2px; padding-top: clamp(12px, 1.6vw, 16px);
border-top: 1px solid rgba(16, 32, 64, .1);
}
[data-theme="dark"] .gx-screen .gx-sec--split { border-top-color: rgba(255,255,255,.12); }
/* Sekmeler. `aria-selected` TEK KAYNAK: görünüm ondan türer, ayrı bir
`is-active` sınıfı yok — iki durum kaynağı sessizce ayrışır. */
.gx-tabs {
display: flex; gap: 4px; padding: 3px;
border-radius: var(--r-full);
background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.gx-tab {
min-width: 0;
padding: 7px 12px; border: 0; border-radius: var(--r-full);
background: transparent; cursor: pointer;
font-family: var(--font-body); font-size: .82em; font-weight: 800;
color: color-mix(in srgb, var(--blue) 74%, var(--ink));
transition: background var(--t-sm) ease, color var(--t-sm) ease;
}
.gx-tab[aria-selected="true"] {
background: var(--card-solid); color: var(--blue);
box-shadow: 0 4px 12px -6px rgba(10,24,55,.5);
}
[data-theme="dark"] .gx-screen .gx-tab { color: color-mix(in srgb, var(--blue) 42%, #fff); }
[data-theme="dark"] .gx-screen .gx-tab[aria-selected="true"] { background: rgba(255,255,255,.12); color: #EAF1FF; }
/* ---- ÇEMBER + LİSTE: ekranın gövdesi ---- */
.gx-dial {
display: grid; grid-template-columns: auto minmax(0, 1fr);
gap: clamp(14px, 2vw, 26px); align-items: center;
}
/* ---- ÇEMBER ----------------------------------------------------------
SEKİZ DİLİM DE 45°, yani grafik hiçbir ölçü taşımaz (şablondaki not).
Halka `mask` ile açılıyor; `-webkit-mask` ikizi olmadan Safari maskeyi
hiç uygulamaz ve ortada dolu bir daire kalır. Pipler halkanın ORTA
yarıçapına oturuyor: bant %58 → %100 arası, ortası ≈ %39.5. Yarıçap
`--wh`den okunur, yani çember küçüldüğünde pipler kendiliğinden toplanır —
ikinci bir kırılma noktası gerekmiyor. */
.gx-wheel {
--wh: clamp(164px, 19vw, 218px);
position: relative; width: var(--wh); height: var(--wh);
}
/* ---- DİLİM: açı sabit, YARIÇAP dolar --------------------------------
Dilimin AÇISI sayıdan bağımsız (45°) — pasta grafiği olsaydı "en büyük
pay" aynı ekranda bir rozete dönüşürdü. Dolan şey halkanın kalınlığı:
iç kenardan (%58) dışa doğru `--f` kadar tam renk, kalanı AYNI RENGİN soluk
hâli — boş bırakılsaydı halka kırılmış görünürdü.
`circle closest-side` ŞART: varsayılan `farthest-corner` yarıçapı kutunun
KÖŞESİNE göre ölçer (≈%70.7) ve bütün yüzdeler kayar.
Sektörü `mask` kırpıyor; **`-webkit-mask` ikizi ŞART**, yoksa Safari
maskeyi hiç uygulamaz ve sekiz dilim üst üste dolu daire olur.
İki yandaki .8° boşluk dilimleri ayırır — çizgi çizmeden. */
.gx-slice {
--f: 1;
position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle closest-side,
transparent 57.5%,
var(--da) 58%,
var(--da) calc(58% + var(--f) * 42%),
color-mix(in srgb, var(--da) 20%, transparent) calc(58% + var(--f) * 42%),
color-mix(in srgb, var(--da) 20%, transparent) 100%);
-webkit-mask: conic-gradient(from calc(var(--i) * 45deg + .8deg),
#000 0 43.4deg, transparent 43.4deg 360deg);
mask: conic-gradient(from calc(var(--i) * 45deg + .8deg),
#000 0 43.4deg, transparent 43.4deg 360deg);
}
[data-theme="dark"] .gx-screen .gx-slice {
background: radial-gradient(circle closest-side,
transparent 57.5%,
var(--da) 58%,
var(--da) calc(58% + var(--f) * 42%),
color-mix(in srgb, var(--da) 26%, transparent) calc(58% + var(--f) * 42%),
color-mix(in srgb, var(--da) 26%, transparent) 100%);
}
.gx-pip {
--sc: 1;
position: absolute; top: 50%; left: 50%;
width: 32px; height: 32px; margin: -16px 0 0 -16px;
display: grid; place-items: center;
border-radius: 50%; background: var(--card-solid);
box-shadow: 0 2px 7px rgba(16, 32, 64, .16);
transform:
rotate(calc(var(--i) * 45deg + 22.5deg))
translateY(calc(var(--wh) * -.395))
rotate(calc(var(--i) * -45deg - 22.5deg))
scale(var(--sc));
transition: transform .2s ease;
}
.gx-pip .devarea-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; }
.gx-pip .devarea-ico svg { width: .8em; height: .8em; }
/* Listedeki satırın üstündeyken kendi dilimi büyür — ad ile renk arasındaki
bağı kuran tek şey bu (adlar yaya sığmıyor, bkz. şablon). */
.gx-pip.is-hot { --sc: 1.2; }
.gx-wheel-hub {
position: absolute; inset: 26%; border-radius: 50%;
display: grid; place-items: center;
background: var(--card-solid); color: var(--green, #4FB477);
box-shadow: 0 1px 10px rgba(16, 32, 64, .1);
font-size: 1.7em;
}
[data-theme="dark"] .gx-screen .gx-wheel-hub,
[data-theme="dark"] .gx-screen .gx-pip { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
/* ---- SEKİZ ALAN · liste --------------------------------------------------
Karo düzeni duruyor (sayı adın ALTINDA, ad sarabilir): tek satırda ad ile
birim yan yanayken "Sosyal-Duygusal Gelişim" üç noktaya iniyordu.
Satır artık BUTON: aşağıdaki sekiz alan kartından kendi kartına iner.
Zemin alanın kendi rengi ama sekizi de AYNI ALFADA — zemin bir ölçü
taşımaz, hiçbiri "daha dolu" değil. */
.gx-areas {
display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
margin: 0; padding: 0; list-style: none;
}
.gx-area-btn {
width: 100%; display: flex; align-items: center; gap: 9px; min-width: 0;
padding: 8px 9px; border: 0; border-radius: 13px; cursor: pointer;
font: inherit; color: inherit; text-align: left;
background: color-mix(in srgb, var(--da) 9%, transparent);
transition: background .18s ease;
}
.gx-area-btn:hover,
.gx-area-btn:focus-visible { background: color-mix(in srgb, var(--da) 20%, transparent); }
[data-theme="dark"] .gx-screen .gx-area-btn { background: color-mix(in srgb, var(--da) 20%, transparent); }
[data-theme="dark"] .gx-screen .gx-area-btn:hover,
[data-theme="dark"] .gx-screen .gx-area-btn:focus-visible { background: color-mix(in srgb, var(--da) 32%, transparent); }
.gx-areas .devarea-ico { flex: 0 0 26px; height: 26px; border-radius: 9px; }
.gx-areas .devarea-ico svg { width: .95em; height: .95em; }
.gx-area-tx { display: grid; gap: 1px; min-width: 0; }
.gx-area-name {
min-width: 0;
font-size: .78em; line-height: 1.2; font-weight: 600;
}
/* Sayı NÖTR: alan rengiyle boyanırsa sekiz rakam sekiz renge dönüşür ve göz
onları karşılaştırmaya başlar — tam olarak istenmeyen okuma. İçinde birim
de var ("3 etkinlik"); `nowrap` şart, iki satıra düşen bir sayı sırayı tek
başına büyütür. */
.gx-area-n {
font-size: .72em; font-weight: 700; color: var(--tx2);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .gx-screen .gx-area-n { color: #A9BEE8; }
/* Aşağı ok: satırın tıklanabilir olduğunu söyleyen tek işaret. Sekizi birden
hep görünürse liste süse döner; yalnız hedeflenen satırda. */
.gx-area-go {
margin-left: auto; font-size: .68em; color: var(--tx2);
opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.gx-area-btn:hover .gx-area-go,
.gx-area-btn:focus-visible .gx-area-go { opacity: .85; transform: translateY(2px); }
/* Hedef kart kendi rengiyle çerçevelenir ve bir sonraki tıklamaya kadar
öyle kalır — çemberden inen ziyaretçi sekiz kartın hangisine geldiğini
kaydırma bittikten sonra da görmeli. */
.ga-card.is-lit { box-shadow: 0 0 0 2px var(--da-deep, var(--blue)); }
.gx-note {
display: flex; align-items: flex-start; gap: 7px;
margin: 2px 0 0; padding-top: 8px;
border-top: 1px solid color-mix(in srgb, var(--tx1) 10%, transparent);
font-size: .74em; line-height: 1.45; color: var(--tx2);
}
.gx-note > i { margin-top: .18em; color: var(--blue); }
[data-theme="dark"] .gx-screen .gx-note { color: #A9BEE8; border-top-color: rgba(255,255,255,.12); }
/* ----------------------------------------------------------------------------
3) Üç adım — HERO'NUN İÇİNDE (kendi bölümü yok, 2026-09-01)
Üç adım eşit genişlikte: renkli bulut + TEK SATIR başlık. Alt açıklama
2026-09-01'de kaldırıldı (kullanıcı) — cümlenin söylediği şey zaten bulutun
içinde duruyor.
OK YOK — `.gx-arrow` (bir
) ve 01·02·03 numaraları aynı gün kaldırıldı;
sıra okuma yönünden belli, ok yalnız mobilde 90° dönüp akışı uzatıyordu.
BULUTUN ORANI SABİT (`aspect-ratio`, eski `--gx-shot-h` yerine): üç görsel
farklı türde (illüstrasyon · tamamlama kartı · özet satırı) ve serbest
bırakıldığında üç farklı boyda duruyor; ayrıca maskenin yüzde ölçüleri
kutunun oranına bağlı, oran kayarsa loblar da kayar.
---------------------------------------------------------------------------- */
/* Tek başlık, ortalanmış — `sectionHead` DEĞİL. Bu bölümün eyebrow'u ve alt
cümlesi 2026-09-01'de kaldırıldı: üçü de aynı şeyi söylüyordu ve üç adımın
altındaki cümleler zaten anlatıyor. */
/* ÜÇ EŞİT SÜTUN, OK YOK (2026-09-01, kullanıcı referansı: renkli blob + kısa
başlık + iki satır). Eskiden aralarda `.gx-arrow` bir
olarak duruyordu;
üç blob zaten soldan sağa bir ritim kuruyor ve ok, mobilde 90° dönerek
akışı uzatmaktan başka bir iş yapmıyordu. Numaralar (01·02·03) da aynı
sebeple kalktı: sıra okuma yönünden belli. */
.gx-story {
width: 100%;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2.6vw, 44px); align-items: start;
margin: 0; padding: 0; list-style: none;
}
.gx-step { display: grid; gap: clamp(14px, 1.6vw, 20px); min-width: 0; justify-items: center; }
/* ---- Bulut: adımın görseli, kutu değil ----
ŞEKİL `mask-image` İLE, `border-radius` ya da `clip-path` ile DEĞİL.
- `border-radius`ın sekiz değerli yazımı yalnız eliptik bir yumurta verir;
kabarcıklı kenar çıkmaz.
- `clip-path: path()` kutu ölçüsüne göre esnemez (bulut mobilde küçülüyor).
Kalan yol: SEKİZ lobun + ortadaki elipsin birleşimi. Çok katmanlı
`mask-image` varsayılan olarak toplanır (`mask-composite: add`).
İKİ ÖLÇÜ KURALI, ikisi de sessiz bozulur:
1. HER LOB KUTUNUN İÇİNDE KALIR. Lob merkezleri %26 dışarıda, yarıçapları
`farthest-corner`ın %22'si; kutunun kenarına taşan bir lob `overflow:
hidden` ile DÜZ KESİLİR ve bulut "kırpılmış" görünür (2026-09-01'de tam
olarak bu oldu: dört lob %26 yarıçapla kenarı aşıyordu).
2. KUTUNUN ORANI SABİT (`aspect-ratio`), yükseklik serbest değil: yüzdeyle
yazılan yarıçaplar x'te genişliğe, y'de yüksekliğe göre çözülüyor, yani
oran kayarsa loblar da kayar.
Renk `--blob`: 01 kategori · 02 güven yeşili · 03 gelişim alanı — sayfanın
başka yerinde zaten kullanılan üç renk, yeni palet yok. */
.gx-shot {
--lr: 22%; /* lob yarıçapı (farthest-corner oranı) */
--l1: radial-gradient(circle at 50% 24%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l2: radial-gradient(circle at 68% 31%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l3: radial-gradient(circle at 76% 50%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l4: radial-gradient(circle at 68% 69%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l5: radial-gradient(circle at 50% 76%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l6: radial-gradient(circle at 32% 69%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l7: radial-gradient(circle at 24% 50%, #000 var(--lr), transparent calc(var(--lr) + .6%));
--l8: radial-gradient(circle at 32% 31%, #000 var(--lr), transparent calc(var(--lr) + .6%));
/* Ortadaki elips lobları birbirine bağlar; olmazsa merkez boş kalır. */
--lc: radial-gradient(34% 36% at 50% 50%, #000 99%, transparent 100%);
position: relative; overflow: hidden;
width: 100%; max-width: 330px; aspect-ratio: 1 / .94; height: auto;
display: grid; place-content: center; justify-items: center; gap: 9px;
padding: clamp(16px, 2vw, 24px); text-align: center;
border: 0; box-shadow: none; border-radius: 0;
background: color-mix(in oklch, var(--blob) 72%, #FFF);
-webkit-mask-image: var(--l1), var(--l2), var(--l3), var(--l4), var(--l5), var(--l6), var(--l7), var(--l8), var(--lc);
mask-image: var(--l1), var(--l2), var(--l3), var(--l4), var(--l5), var(--l6), var(--l7), var(--l8), var(--lc);
}
[data-theme="dark"] .gx-shot { background: color-mix(in oklch, var(--blob) 58%, #0B1734); }
/* Üç bulut aynı olmasın: yalnız iki lob birkaç puan oynar — şekil değişir,
ölçü kuralı (lob kutunun içinde) bozulmaz. */
.gx-step:nth-child(2) .gx-shot {
--l1: radial-gradient(circle at 46% 23%, #000 23%, transparent 23.6%);
--l5: radial-gradient(circle at 54% 77%, #000 21%, transparent 21.6%);
}
.gx-step:nth-child(3) .gx-shot {
--l3: radial-gradient(circle at 77% 46%, #000 23%, transparent 23.6%);
--l7: radial-gradient(circle at 23% 54%, #000 21%, transparent 21.6%);
}
.gx-shot--act { --blob: var(--cat); padding: 0; }
/* `>` ŞART: seçici torun `img`leri de kapsayınca rozetin kategori ikonu da
mutlak konumlanıp blob'u dolduruyordu. */
.gx-shot--act > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
.gx-shot-cat {
/* Blob'un ALT EĞRİSİ kırpar: %9'da rozetin solu kesiliyordu. %16 blob'un
hâlâ geniş olduğu yer — burada yükseklik değiştirilirse tekrar bakılmalı. */
position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px 5px 6px; border-radius: var(--r-full);
background: color-mix(in oklch, var(--cat) 16%, var(--card-solid));
border: 1px solid color-mix(in oklch, var(--cat) 42%, transparent);
/* `width: max-content` ŞART: rozet mutlak konumlu ve `left: 50%` ile
ortalanıyor; onsuz genişliği 52px'e büzülüp adın üstüne biniyordu. */
width: max-content;
font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
color: color-mix(in oklch, var(--cat-deep) 52%, var(--tx1));
box-shadow: var(--shadow);
}
.gx-shot-cat img { width: 1.7em; height: 1.7em; object-fit: contain; }
[data-theme="dark"] .gx-shot-cat { color: color-mix(in oklch, var(--cat) 62%, #FFF); }
/* 02 · Tamamlama kartı — uygulamanın kutlama ekranının sakin hâli.
Yeşil sitenin güven yeşili (Keşfet ailesi): aynı iddia `.ps-trust` ve
`.gw-proof`ta da o renkte. */
.gx-shot--done { --blob: var(--cat-kesfet); }
/* DAİRE = UYGULAMANIN "SİHİRLİ KÜRESİ" (2026-09-01, kullanıcı isteği).
Kaynak KidlioApp `app/activity/[id].tsx`: etkinlik ekranındaki Tamamla
düğmesi bir küredir ve tamamlanınca yeşile döner — `orbColors`
(#A7F3D0 → #6EE7B7 → #34D399 → #22C55E), üstte `orbHighlight` cam
yansıması, altta `orbDepth` yeşil derinliği. Web karşılığı üç katman:
`background` küre gradyanı · `::before` üst cam · `inset` gölge alt derinlik.
RENKLER SİTENİN TOKEN'INDAN DEĞİL UYGULAMADAN gelir — bu daire sitenin bir
rozeti değil, uygulamadaki bir nesnenin alıntısı; `--cat-kesfet`e
bağlanırsa uygulama yeşilini değiştirdiğinde site sessizce ayrışır.
Uygulamadaki kıvılcımlar (`spark`) ve konfeti ALINMADI: ikisi de
tamamlanmamış/az önce tamamlanmış anın hareketi, buradaki küre ise durmuş
bir kayıt — bu sayfanın "puan yok, kutlama gösterisi yok" sözüyle çakışır. */
.gx-tick {
position: relative; overflow: hidden;
display: grid; place-items: center; width: 76px; height: 76px;
border-radius: 50%; font-size: 1.7rem; color: #fff;
background: radial-gradient(120% 125% at 30% 2%,
#A7F3D0 0%, #6EE7B7 20%, #34D399 48%, #22C55E 78%, #34D399 100%);
box-shadow:
0 0 0 10px color-mix(in oklch, #34D399 18%, transparent),
0 14px 28px -12px color-mix(in oklch, #16A34A 62%, transparent),
inset 0 -10px 16px -8px color-mix(in oklch, #16A34A 55%, transparent);
}
/* Cam yansıması — kürenin üst-sol çeyreği. `inset: 0` + `border-radius`
miras: ayrı bir yarım daire elemanı kenarda dişli bir çizgi bırakıyordu. */
.gx-tick::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(158deg,
rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 20%,
rgba(255, 255, 255, .04) 38%, transparent 56%);
}
/* Tik yansımanın ÜSTÜNDE kalır (`::before` onu yıkardı) ve uygulamadaki
`orbText` gibi hafif bir gölge taşır — beyaz tik açık yeşilde kayboluyordu. */
.gx-tick i {
position: relative; z-index: 1;
text-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.gx-shot--done b {
font-family: var(--font-head); font-size: var(--fs-xl);
color: var(--cat-kesfet-ink, var(--cat-kesfet-deep));
}
[data-theme="dark"] .gx-shot--done b { color: #FFF; }
.gx-shot-act { font-size: var(--fs); font-weight: 700; color: var(--tx1); }
.gx-shot-day {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-sm); color: var(--tx2);
}
[data-theme="dark"] .gx-shot--done .gx-shot-act,
[data-theme="dark"] .gx-shot--done .gx-shot-day { color: #EAF1FF; }
/* 03 · Özet satırı — ekrandaki gerçek satırın büyütülmüş hâli, blob'un
içinde beyaz bir mini kart olarak duruyor. */
.gx-shot--area { --blob: var(--da); align-content: center; }
.gx-shot-head {
font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--tx2); opacity: .85;
}
.gx-shot-row {
display: flex; align-items: center; gap: 11px; text-align: left;
padding: 12px 13px; border-radius: var(--r);
background: var(--card-solid);
border: 1px solid color-mix(in oklch, var(--da) 34%, var(--border));
box-shadow: var(--shadow);
}
.gx-shot-row .devarea-ico { flex: 0 0 38px; height: 38px; border-radius: 12px; }
.gx-shot-row-copy { min-width: 0; display: grid; flex: 1 1 auto; }
.gx-shot-row-copy b { font-family: var(--font-head); font-size: var(--fs); line-height: 1.25; }
.gx-shot-row-copy small { font-size: var(--fs-sm); color: var(--tx2); }
.gx-shot-ok {
flex: 0 0 22px; height: 22px; display: grid; place-items: center;
border-radius: 50%; font-size: .62rem; color: #fff;
background: var(--cat-kesfet-deep);
}
/* `.gx-shot-seen` 2026-09-01'de şablonla birlikte SİLİNDİ — kartın başlığı
zaten "Gelişim Yolculuğu" diyordu, satır aynı cümlenin tekrarıydı. */
[data-theme="dark"] .gx-shot--area .gx-shot-head { color: #EAF1FF; }
/* ---- Adım metni: blob'un altında, ORTALANMIŞ, iki-üç satır ---- */
.gx-step-copy { display: grid; gap: 8px; text-align: center; max-width: 34ch; }
.gx-step-copy h3 {
margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.22;
}
.gx-step-copy p { margin: 0; font-size: var(--fs); line-height: 1.55; color: var(--tx2); }
/* ----------------------------------------------------------------------------
4) Sekiz alan kartı
PASTEL ZEMİN, DOLU RENK DEĞİL (2026-08-25, kullanıcı kararı). Eski kural
"renk mürekkeptir, zemin değil"di ve sekiz kartın zeminini nötr bırakıyordu;
sonuç iki kolonda tekdüze bir metin listesiydi. Bugün zemin alan renginin
ÇOK HAFİF tinti.
ORAN BİR TAVANDIR (%9) ve METİNLE BİRLİKTE düşünülür: gövde `--tx2` üstünde
AA'yı ancak bu aralıkta koruyor. Tinti koyulaştıran hiçbir hata almaz,
yalnız açıklama cümlesi AA'nın altına düşer. Karışım OKLCH'de: sRGB'de açık
uçta chroma kaybolur ve sekiz pastel birbirinden ayrılmayan sekiz gri tona
iner (`.cta-box`taki aynı gerekçe).
KOYU TEMADA TİNT YOK, ve bu ölçülmüş bir geri alma. `--card-solid` gece
temasında doygun lacivert (#191970, hue ~264°); üstüne alan rengi bindirmek
OKLCH'te hue'yu KISA YOLDAN çeviriyor ve sekiz karttan beşi mor çıkıyordu —
turuncu Motor #513464, sarı Dil aynı mor, pembe Sosyal-Duygusal lacivert.
Yalnız zaten soğuk olan üçü doğru okunuyordu. Aynı tuzak Kategoriler
sayfasında (`--cw-tint`) ve hero'nun güven rozetinde de ölçüldü, çözümü de
aynı: GECE TEMASINDA RENGİ KENAR + DOLU İKON ROZETİ + ETİKETLER taşır,
zemin nötr kalır. sRGB'ye geçmek de kurtarmaz — #191970 her karışıma hâkim,
%9'luk bir turuncu onu kahverengiye değil yine mora çeker.
DEKORATİF AKSAN ŞERİDİ YOK: eski `.ga-card::before` (3px'lik gradyan bant)
KALDIRILDI — sitedeki son örnek buydu. Kural ve gerekçesi
`.claude/rules/UI-Templates.md` → "Dekoratif renkli şerit yasak". Kartın
dört yanını saran ince `border` bunun istisnası değil, farklı şey: o öğenin
sınırı, kenarın bir yüzüne konan kalın bant değil.
---------------------------------------------------------------------------- */
.ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
/* SEKİZ KARTIN HEPSİ AYNI BOYDA (kullanıcı kararı, 2026-09-01): `grid-auto-rows: 1fr`
bütün satırları en uzun kartın boyuna eşitler — yoksa dört satır dört farklı
yükseklikte oluyor ve yelpaze açılırken bu fark iyice göze batıyordu.
Kartın içi zaten dibe yapışık (`.ga-where` → `margin-top: auto`), yani artan
yer boşluk olarak dağılmaz, rozet satırı tabana oturur.
YALNIZ MASAÜSTÜ: mobilde satırlar akordeon, eşit yükseklik kapanmayı bozar. */
@media (min-width: 761px) { .ga-grid { grid-auto-rows: 1fr; } }
.ga-card {
position: relative;
/* IZGARA, FLEX DEĞİL (2026-09-01): ikon rozeti artık başlığın ÜSTÜNDE değil
YANINDA — kartın üst şeridi tek satır olunca kartın içindeki en büyük
boşluk (76px'lik rozetin sağındaki boş kolon) kapanıyor. Gövde iki kolonu
birden kaplar; `1fr` satırı `.ga-where`in dibe yapışmasını korur. */
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
column-gap: 14px;
padding: clamp(15px, 1.5vw, 19px) clamp(16px, 1.6vw, 20px) clamp(16px, 1.6vw, 20px);
border-radius: var(--gx-r);
border: 1px solid color-mix(in oklch, var(--da) 30%, var(--border));
/* ZEMİN DÜZ TİNT — GRADYAN DENENDİ VE GERİ ALINDI (kullanıcı kararı,
2026-09-01, aynı oturum): ikon köşesinden yayılan radyal ışık kartı
"tasarlanmış" değil "efektli" gösteriyordu. Oran hâlâ %9 tavanı ve
karışım OKLCH'de (sRGB'de sekiz pastel sekiz griye iner). */
background: color-mix(in oklch, var(--da) 9%, var(--card-solid));
box-shadow: var(--shadow);
/* `transform` yelpaze animasyonunun elinde (animasyon `both` ile dolduğu
için hover'da `transform` yazmak İŞLEMEZ) — bu yüzden kalkma ayrı
`translate` özelliğiyle yapılır, ikisi birbirinin üstüne biner. */
translate: 0 0;
transition: translate var(--t-sm) var(--ease-out), box-shadow var(--t-sm) ease,
border-color var(--t-sm) ease;
}
.ga-card:hover {
translate: 0 -4px;
border-color: color-mix(in oklch, var(--da) 55%, var(--border));
box-shadow: 0 18px 34px -22px color-mix(in oklch, var(--da-deep) 70%, transparent), var(--shadow);
}
/* KENAR KOYU TEMADA %28 OPAKLIKTA (kullanıcı kararı, 2026-08-26): alan rengi
doğrudan, `alpha .28` ile. Zemin zaten nötr (yukarıdaki hue notu), yani
kartın çevresindeki tek renkli şey kenardı ve sekiz kart yan yana sekiz
renkli çerçeve okunuyordu. Renk ikon rozetinde, başlıkta ve `.ga-tag`
etiketlerinde kalır — kural yalnız kartın KENDİ kenarına yazılır, kartın
içindeki hiçbir öğeye dokunmaz. Karışım `srgb`de: hedef bir TON değil,
rengin kendisinin opaklığı. */
[data-theme="dark"] .ga-card {
border-color: color-mix(in srgb, var(--da) 28%, transparent);
background: var(--card-solid);
}
/* Büyük renkli ikon alanı — kartın "görsel" tarafı, akordeon kapalıyken de
görünür. Rozetin kendisi `devAreaIcon`ın SVG'si; yeni görsel varlık yok.
İKİ KATMAN: açık "tabaka" (`.ga-art`) + üstünde DOLU rozet. Rozetin
varsayılan hâli (Site.css `.devarea-ico`: %14 tint zemin + `--da-deep`
glyph) burada işe yaramıyordu — kartın zemini de aynı rengin tinti, yani
rozet zeminine karışıp kayboluyordu. Aynı tuzak hero'daki güven rozetinde
de yaşandı ve aynı şekilde çözüldü: zemin dolu, glyph beyaz.
GRADYANIN AÇIK UCU %55'TEN ÖNCE BİTER. Glyph gövdesi `--da`nın üstünde
kalırsa beyaz sekiz alandan üçünde grafik eşiğinin (3:1) altına düşer —
en kötüsü Dil Gelişimi'nin sarısı (#FCD060 üstünde beyaz 1.5:1). `-deep`
uçlarında ölçüm 3.9-8.0 arası, sekizi de geçiyor. */
.ga-art {
display: grid; place-items: center;
grid-column: 1; grid-row: 1; align-self: center;
width: 58px; height: 58px; margin-bottom: 0;
border-radius: 18px;
background: color-mix(in oklch, var(--da) 16%, var(--card-solid));
}
.ga-art .devarea-ico {
width: 42px; height: 42px; border-radius: 14px;
background: linear-gradient(145deg, var(--da) 0%, var(--da-deep) 55%);
color: #fff;
box-shadow: 0 8px 18px -10px color-mix(in oklch, var(--da-deep) 80%, transparent);
}
.ga-art .devarea-ico svg { width: 1.5em; height: 1.5em; }
/* Gece temasında tabaka NÖTR — kartın zeminiyle aynı gerekçe (yukarıdaki
hue notu): renk zaten üstündeki dolu rozette. */
[data-theme="dark"] .ga-art { background: rgba(255,255,255,.07); }
/* Başlık
KALIR, buton onun İÇİNDEDİR — ``
geçerli işaretlemedir (buton yalnız phrasing content taşıyor). `quick-grid`
başlığı ``a indirmek zorunda kalmıştı çünkü panelini de butonun
içine almıştı; burada panel butonun KARDEŞİ, o yüzden başlık gerçek başlık
kalabiliyor — sekiz alan adı bu sayfanın SEO gövdesi. */
.ga-name { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.ga-head {
display: grid; grid-template-columns: 1fr auto; align-items: center;
gap: 2px 12px; width: 100%; padding: 0;
border: 0; background: none; cursor: default; text-align: left;
font-family: var(--font-head); color: inherit;
}
/* BAŞLIK 20–22px (kullanıcı kararı, 2026-08-25): `--fs-xl` bu sayfada
~1.15rem'e denk geliyordu ve sekiz kart aynı gövde ağırlığında okunuyordu.
Sabit clamp, token değil — token'ı büyütmek sitedeki her `.h3`yi büyütür. */
/* TEK SATIR KİLİDİ (kullanıcı kararı, 2026-09-01): kartın içindeki hiçbir
metin ikinci satıra taşmaz. Metin DOM'da tam duruyor (SEO ve ekran okuyucu
eksiksiz), yalnız görsel olarak kırpılıyor. `min-width: 0` şart — grid/flex
çocuğunun varsayılan `auto` minimum genişliği `text-overflow`u iptal eder ve
kutu taşar. */
.ga-t, .ga-gloss { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-t { font-size: clamp(1.15rem, 1.35vw, 1.28rem); font-weight: 700; line-height: 1.3; }
.ga-gloss { grid-column: 1; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--tx2); }
/* Chevron yalnız akordeon açıkken (mobil) görünür — masaüstünde açılıp
kapanmayan bir kartta oturan ok, olmayan bir etkileşimi vaat eder. */
/* KOLON AÇIKÇA YAZILIR. `grid-row` verilip `grid-column` verilmediğinde
otomatik yerleşim chevron'u BİRİNCİ kolona koyuyor ve iki satırı birden
kapladığı için başlık ile gloss ikinci kolona itiliyordu: başlık sağa
yaslanmış, ok solda kalmış bir kart. Mobilde ölçüldü, masaüstünde
görünmüyordu çünkü orada chevron `display: none`. */
.ga-chev {
display: none; grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
color: var(--tx2); transition: transform var(--t-md) var(--ease-out);
}
.ga-body { grid-column: 1 / -1; display: flex; flex-direction: column; flex: 1 1 auto; }
.ga-body-in { display: flex; flex-direction: column; flex: 1 1 auto; gap: 7px; padding-top: 11px; min-width: 0; }
.ga-what {
margin: 0; min-width: 0;
font-size: var(--fs); line-height: 1.55; color: var(--tx2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* CÜMLE 1200px ALTINDA SARAR (2026-09-04, kullanıcı kararı) — 2026-09-01'in
"hiçbir metin ikinci satıra taşmaz" kuralı MASAÜSTÜNDE aynen duruyor, dar
kartta bilerek deliniyor. Gerekçe ölçüm: cümle 561px, kart içi 390px'te
318px ve 768px'te 323px, yani açıklamanın **%43'ü** okunamıyordu. Kural
yazıldığında bu kartlar masaüstü ızgarasıydı; mobilde AKORDEON oldular ve
orada üç nokta kuralı kendi kendini yiyor: ziyaretçi "devamını gör" diye
dokunuyor, karşılığında kesilmiş bir cümle alıyor. Açılan bir panelin tek
işi içeriği göstermektir.
Sınır `.ga-tags`in sarma sınırıyla AYNI (1199px) ve aynı ölçümden geliyor —
ikisi de "kart dört adı/cümleyi taşıyamıyor" eşiğidir; ayrı sayılar
verilirse aynı kartın iki satırı iki farklı genişlikte kırılır.
Metin zaten DOM'da TAMDI (SEO ve ekran okuyucu hiç etkilenmemişti); değişen
yalnız görünen kısım. `text-overflow` burada kendiliğinden atıl kalır —
`white-space: nowrap` olmadan çalışmaz — o yüzden ayrıca sıfırlanmıyor. */
@media (max-width: 1199px) {
.ga-what { white-space: normal; }
}
/* ETİKET BAŞLIKLARI KALDIRILDI ("Uygulamadan" / "Nerede bulunur"): sekiz
kartta on altı kez tekrarlanan iki başlık taşıdıkları bilgiden fazla yer
kaplıyordu. Ne oldukları BİÇİMDEN okunur — düz çipler gerçek etkinlik
adları, maskotlu çipler kategori bağlantıları. */
/* ETİKETLER ARTIK HAP DEĞİL, TEK SATIRLIK RAY (2026-09-01).
Gerekçe bir tasarım ilkesi, süsleme değil: kartta iki tür çip vardı — dört
etkinlik adı (tıklanmaz) ve bir-iki kategori rozeti (LİNK) — ve ikisi de
aynı hapa benziyordu, yani "hangisine basılır" biçimden okunamıyordu.
Şimdi kartta hap kalan tek şey linktir. Etkinlik adları düz metin, aralarında
ince nokta; dört ad dört kutu yerine tek satır oluyor ve kart ~120px kısalıyor.
TAŞMA KIRPILMAZ, SOLDURULUR: ray `nowrap` ve sağ ucunda maske var — aynı
çözüm ana sayfadaki kayan şeridin uçlarında da kullanılıyor. `-webkit-`
ikizi ŞART (Safari), yoksa maske hiç uygulanmaz. */
.ga-tags {
display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none;
min-width: 0; overflow: hidden;
mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
}
.ga-tag {
flex: 0 0 auto; white-space: nowrap;
font-size: var(--fs-sm); font-weight: 600;
color: color-mix(in oklch, var(--da-deep) 62%, var(--tx1));
}
/* AYRAÇ ÖNCEKİ ADIN `::after`'IDIR, sonrakinin `::before`'u DEĞİL (2026-09-04).
Görsel dizi ("A · B · C") tek satırda birebir aynı; fark yalnız SARMA
noktasında ortaya çıkıyor ve tek yönde çalışıyor: `::before` ile ayraç alt
satıra inen adın kutusunun BAŞINDA durduğu için sarınca satır "· Hafıza
Oyunu" diye açılıyordu — bir satırın noktayla başlaması yazım hatası
okunuyor. `::after` ile nokta üst satırın SONUNDA kalır, yani "devamı
aşağıda" işareti gibi okunur. Geri çevirirsen sarma çalışır ama her ikinci
satır noktayla başlar. */
.ga-tag:not(:last-child)::after {
content: "·"; margin: 0 8px;
color: color-mix(in oklch, var(--da-deep) 40%, var(--tx2));
font-weight: 700;
}
[data-theme="dark"] .ga-tag { color: color-mix(in oklch, var(--da) 58%, #FFF); }
[data-theme="dark"] .ga-tag:not(:last-child)::after { color: color-mix(in oklch, var(--da) 40%, var(--tx2)); }
/* RAY 1200px ALTINDA SARAR — kırılma noktası UYDURULMADI, ÖLÇÜLDÜ (2026-09-04,
kullanıcı kararı; ilk seçilen "mobilde 3 ad göster" ölçümle ÇÜRÜDÜ).
Ölçüm (8 alanda tam sığan çip sayısı, kartın kendi iç genişliği):
320px → kart 248px, TR 1-2 çip, EN'de beş alanda YALNIZ 1
390px → kart 318px, TR 2-3
768px → kart 323px ← ızgara 2 kolona düştüğü için TELEFONDAN DAR
900px → kart 388px, hâlâ 2-3
1024px → kart 448px, TR üç alanda 3, EN altı alanda 3
1200px → kart 530px, TR sekizde sekiz 4 ← ilk temiz genişlik
Yani SABİT BİR ÇİP SAYISI YOK: 320'de ikisi bile taşıyor, 700'de dördü
sığıyor. "Mobilde 3" de "mobilde 2" de dar ekranda kırpılırdı.
Neyi düzeltiyor: 2026-08-30'da `DEV_AREAS[*].picks` 2→4 çıkarıldı ama solma
maskesi İKİ adlık ray için yazılmıştı ve mobilde bir daha ölçülmedi. Dördüncü
ad 390px'te 95px'in 14'ü kadar görünüyordu — maske %84'ten başladığı için
fiilen sıfır — ve ekranda kalan tek şey o çipin kendi ayracıydı: adlardan
sonra boşluğu işaret eden asılı bir nokta. Solma değil, kırık görünüyordu.
MASKE SARARKEN KAPANIR: maskenin işi "sağda devamı var" demek; sarılmış bir
rayda kırpılan hiçbir şey yok, açık bırakılırsa kesilmemiş bir adın son
harflerini boşuna soldururdu. 1200px ÜSTÜ hiç değişmiyor — orada dördü
sığdığı için tek satır kuralı (2026-09-01) kendiliğinden korunuyor;
`flex-wrap` orada zaten hiçbir şey yapmaz. */
@media (max-width: 1199px) {
.ga-tags {
flex-wrap: wrap; row-gap: 2px;
mask-image: none; -webkit-mask-image: none;
}
}
/* Kategori rozetleri kartın DİBİNE yapışır (margin-top:auto): satırdaki iki
kart farklı boyda metin taşısa da rozet sırası aynı hizada kalır. */
/* Kartın TEK hap ailesi ve tek linki. Üstündeki saç teli çizgi, "yukarısı bu
alanın tarifi, aşağısı gidilecek yer" ayrımını kutu eklemeden veriyor. */
.ga-where {
margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding-top: 12px; border-top: 1px solid color-mix(in oklch, var(--da) 22%, var(--border));
}
[data-theme="dark"] .ga-where { border-top-color: color-mix(in srgb, var(--da) 20%, var(--border)); }
.ga-cat {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 11px 4px 6px;
border: 1px solid color-mix(in oklch, var(--cat) 40%, transparent);
border-radius: var(--r-full);
background: var(--card-solid);
font-size: var(--fs-sm); font-weight: 700;
/* Kategori rengi METİN olarak HAM kullanılmaz — `.cat-more`daki ölçülmüş
formülün aynısı: açık temada `--tx1` ile, koyuda beyazla karışır.
`-deep` varyantı AÇIK zemin için koyulaştırılmıştır, gece zemininde ters
yönde çalışır ve dört kategorinin yarısı AA'nın altına iner. */
color: color-mix(in oklch, var(--cat-deep) 62%, var(--tx1));
transition: background var(--t-sm) ease, transform var(--t-sm) ease;
}
/* Kategori maskotu, Font Awesome ikonu değil — marquee ile aynı kural: aynı
dört suluboya kesme (256², şeffaf) zaten indirilmiş durumda. */
.ga-cat img { width: 1.7em; height: 1.7em; object-fit: contain; }
.ga-cat:hover { background: color-mix(in oklch, var(--cat) 12%, var(--card-solid)); transform: translateY(-2px); }
[data-theme="dark"] .ga-cat { color: color-mix(in oklch, var(--cat) 58%, #FFF); }
/* ----------------------------------------------------------------------------
Sekiz kartın YELPAZESİ — kaydırma sürüşlü (kullanıcı kararı, 2026-09-01)
İstenen hareket: kartlar başta ortada V harfi biçiminde bir boşluk
bırakacak kadar dışa yatık durur; sayfa kaydıkça tepeleri ortaya gelir,
boşluk kapanır. Sol kolon sola, sağ kolon sağa yatar (`--ga-x`), dönüş
`transform-origin: bottom center` ile TABANDAN olur — kartın altı yerinde
durduğu için ızgara satırı kaymaz, yalnız tepeler açılır.
ZAMAN ÇİZELGESİ SCROLL, JS DEĞİL (`animation-timeline: view()`): her kart
kendi görünürlük aralığında ilerler, yani aynı anda üsttekiler kapanmış,
alttakiler hâlâ yatık olur — V'yi görünür kılan da bu. Desteklemeyen
tarayıcıda (@supports) hiç animasyon yok: kartlar doğrudan yerinde ve
okunur. Bu yüzden `.ga-card`ta `reveal` sınıfı YOK — iki mekanizma da
`transform`/`opacity` yazar, üst üste binerlerse kart görünmez kalır.
---------------------------------------------------------------------------- */
.gx-areas-sec { overflow-x: clip; }
.ga-grid > :nth-child(odd) { --ga-x: -1; }
.ga-grid > :nth-child(even) { --ga-x: 1; }
/* SAYILAR REFERANSTAN ÖLÇÜLDÜ, uydurulmadı (loftylab.framer.website → "our
works", 2026-09-01): kartın `matrix()`i kaydırma boyunca örneklendi ve
`scale .880 → 1`, `rotate ∓5.99° → 0`, `translateX ∓108px → 0` çıktı.
Referansta OLMAYAN üç şey burada da yok: dikey kayma, opacity solması ve
taban dönüşü — dönüş merkezi kartın ORTASI (ölçülen `transform-origin`
295/329, yani kartın tam ortası). 108px, 590px'lik karta göre %18; bu
yüzden yüzde yazılır, kolon daralınca kayma da daralır. */
@keyframes ga-fan {
from {
transform: translate3d(calc(var(--ga-x, -1) * var(--ga-dx, 18%)), 0, 0)
rotate(calc(var(--ga-x, -1) * var(--ga-rot, 6deg)))
scale(var(--ga-s, .88));
}
to { transform: none; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.ga-card {
animation: ga-fan linear both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
}
}
/* ----------------------------------------------------------------------------
5) Lacivert güven bandı — "Kidlio ne değildir"
TAM GENİŞLİKTE VE LACİVERT (2026-08-25, kullanıcı kararı). Eskiden üç
kesikli kenarlı, zeminsiz karttı: "bir şeyin yokluğunu anlatıyorlar" diye
bilerek zayıf çizilmişlerdi, ama sayfanın en önemli sözü sayfanın en silik
bloğu olarak duruyordu. Zemin `--night-bg` — sitenin gece paneliyle
(`.night`, ana sayfadaki uyku bölümü) AYNI TOKEN, yani yeni bir yüzey
ailesi değil, mevcut olanın ikinci kullanımı. İki temada da aynı: gece
zemini zaten koyu, temaya göre değişmesi gereken bir şey yok.
ÜÇ İLKE KUTUSUZ: kutu içinde kutu, lacivert zeminde üç açık dikdörtgen
demek olurdu ve bant "bölüm" değil "kart ızgarası" okunurdu. Ayrımı kılcal
çizgi verir (masaüstünde dikey, mobilde yatay).
---------------------------------------------------------------------------- */
/* ÜST MARJ YOK, ve bu ölçülmüş bir karar. Bir üstteki `.section`ın alt dolgusu
(72px) zaten geliyor; 56px'lik bir marj eklendiğinde ikisi ~128px ediyor ve
bant sayfadan kopmuş gibi duruyordu — kapanış CTA'sındaki
`.section:has(+ .cta-sec)` kuralının aynı hesabı. */
.gx-trust {
position: relative; overflow: hidden;
padding: var(--sec-pad) 0;
background: var(--night-bg);
color: var(--night-tx);
}
.gx-trust-stars {
position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1.2px 1.2px at 32% 68%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(2px 2px at 56% 14%, rgba(255,255,255,.85), transparent 60%),
radial-gradient(1.4px 1.4px at 74% 46%, rgba(255,255,255,.75), transparent 60%),
radial-gradient(1.8px 1.8px at 88% 24%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1.2px 1.2px at 44% 84%, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 92% 76%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(1.3px 1.3px at 8% 88%, rgba(255,255,255,.65), transparent 60%);
animation: twinkle 4s ease-in-out infinite alternate;
}
.gx-trust-in { position: relative; z-index: 1; }
/* Ölçü `ch` DEĞİL px: `ch` kabın (gövde) puntosuna göre çözülür, başlığın
kendi 2.6rem'ine göre değil — 30ch yazan hâli başlığı BEŞ satıra düşürüyordu
(1440'ta ölçüldü). 820px bu cümleyi iki satırda tutar.
ORTALAMA İKİ BİLDİRİMDİR (`.sec-head.is-center`in aynı ikilisi, Site.css §3):
`margin-inline: auto` kutuyu kabın ortasına alır, `text-align: center`
sarmış başlığın satırlarını ve inline-flex `.eyebrow` çipini ortalar. Bu
blok `.sec-head`i miras almadığı için (kendi max-width'i 720px değil 820px
olmak zorunda, yukarıdaki not) ikisi elle yazılır — sayfanın öteki bölüm
başlıkları (`sec-head is-center`) bunu zaten alıyor, burada eksikti ve
çip + başlık sola yapışıyordu. */
.gx-trust-head {
max-width: 820px; margin-bottom: clamp(30px, 4vw, 52px);
margin-inline: auto; text-align: center;
}
.gx-trust .eyebrow {
/* Cam pilin halesi lacivert bantta leke okunuyor (Site.css `.night
.eyebrow` ile aynı düzeltme). */
box-shadow: none; border-width: 1px;
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.20);
color: #BBD4FA;
}
/* Sayfanın en büyük ikinci yazısı, ve bilerek: bu cümle bölümün başlığı değil
SÖZÜ. `balance` kuyruğu toplar (tek kelimelik son satır bırakmaz). */
.gx-trust-head h2 {
margin: 14px 0 0; color: var(--night-tx);
font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.24;
letter-spacing: -.015em; text-wrap: balance;
}
.gn-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(22px, 3vw, 44px);
}
/* KUTU YOK — ayrımı kılcal çizgi veriyor. */
.gn-card { padding: 0; }
.gn-card + .gn-card { padding-left: clamp(22px, 3vw, 44px); border-left: 1px solid rgba(255,255,255,.16); }
.gn-ico {
display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
border-radius: 16px; font-size: 1.25rem;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
color: var(--cat-kesfet);
}
.gn-card h3 {
margin: 0 0 10px; color: var(--night-tx);
font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.28;
}
.gn-card p { margin: 0; font-size: var(--fs-lg); line-height: 1.65; color: var(--night-tx2); }
/* ----------------------------------------------------------------------------
6) Responsive + mobil akordeon
---------------------------------------------------------------------------- */
@media (max-width: 1020px) {
.gx-hero-in { grid-template-columns: 1fr; gap: 28px; }
.gx-hero-copy p { max-width: none; }
}
/* Hikâye tek kolona iner ve OK AŞAĞIYI GÖSTERİR. Ok bir ızgara öğesi olduğu
için tek kural yetiyor; sözde öğeyle çizilmiş olsaydı yönü değiştirilemezdi. */
@media (max-width: 900px) {
.gx-story { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 34px); }
.gn-grid { grid-template-columns: 1fr; gap: 26px; }
.gn-card + .gn-card { padding-left: 0; padding-top: 26px; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 900px) {
/* Çember ÜSTTE, liste altında: yan yana dururken listeye ~240px kalıyor ve
iki kolon kırpmaya başlıyor. Çember küçülüp KORUNUYOR — sekiz rengi tek
bakışta veren tek öğe o. */
.gx-dial { grid-template-columns: 1fr; justify-items: center; }
.gx-screen-sec .gx-wheel, .gx-wheel { --wh: clamp(158px, 42vw, 200px); }
.gx-areas { width: 100%; }
}
@media (max-width: 460px) {
.gx-areas { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.ga-grid { grid-template-columns: 1fr; gap: 12px; }
/* `.gx-areas` burada TEK KOLONA İNDİRİLMEZ — taban kuralı zaten tek kolon
(bkz. §"Sekiz alan"); birim sayının yanına girince iki kolon masaüstünde
de sığmıyordu. */
/* ---- AKORDEON, YALNIZ BURADA ----
Masaüstünde sekiz kart iki kolonda zaten açık okunur; mobilde tek kolonda
sekiz açık kart ~2.400px, yani sayfanın en uzun bloğu olurdu ve ziyaretçi
aradığı alana ulaşmak için yedi tanesini geçerdi.
Gizleme `.gxjs` ön ekli: JS yoksa sekizi de açık okunur, hiçbir içerik
JS'e bağlı değil. Kapanış `grid-template-rows: 0fr → 1fr` ile, `max-height`
ile değil — `max-height` bir tahmin gerektirir ve açıklama uzunluğu sekiz
kartta farklı; kısa tahmin metni kırpar, uzun tahmin geçişi yavaşlatır.
`.ga-body-in`in `min-height: 0`ı şart, yoksa ızgara satırı içeriğin altına
inemez ve kapanma hiç görünmez. */
/* Tek kolonda yelpaze KÜÇÜLÜR: %18'lik kayma dar ekranda kartı kenardan
taşırır, 6°'lik dönüş de fazla gelir. */
.ga-card { padding: 14px 15px 16px; column-gap: 12px; --ga-dx: 7%; --ga-rot: 2.6deg; --ga-s: .94; }
.ga-art { width: 50px; height: 50px; margin-bottom: 0; border-radius: 16px; }
.ga-art .devarea-ico { width: 36px; height: 36px; border-radius: 12px; }
.ga-head { cursor: pointer; }
.ga-chev { display: block; }
.gxjs .ga-body {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--t-md) var(--ease-out);
}
.gxjs .ga-body-in { min-height: 0; overflow: hidden; padding-top: 0; }
.gxjs .ga-card.is-open .ga-body { grid-template-rows: 1fr; }
.gxjs .ga-card.is-open .ga-body-in { padding-top: 13px; }
.gxjs .ga-card.is-open .ga-chev { transform: rotate(180deg); }
}
@media (max-width: 620px) {
.gx-step-copy h3 { font-size: var(--fs-lg); }
}
/* ----------------------------------------------------------------------------
7) prefers-reduced-motion
Global blok yalnız SÜREYİ sıfırlar; buradaki geçişler (akordeon satırı,
chevron) süreye bağlı olduğu için o yeterli, ama yıldız parıltısı bir
`infinite` animasyon — onu ayrıca durdurmak gerekiyor.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gx-trust-stars { animation: none; }
.gxjs .ga-body { transition: none; }
}