(çocuk yüzeyi, sıcak/şeker). Semantik token'lar bölgeye göre otomatik değişir → şeritler yalnız --renk-* / --sp-* / --r-* / --fs-* kullanır, hex yazmaz. Tipografi: _shared/fonts (Fraunces başlık + Inter gövde). Erişilebilirlik: prefers-reduced-motion + focus-ring dahil. */ :root { /* — HAM PALET (marka sabitleri, doğrudan kullanma; semantik token'lara bağlan) — */ --p-lacivert: #1C355E; /* Akademik-Lacivert */ --p-lacivert-koyu: #12233f; --p-mavi: #3A7CA5; /* Güven-Mavisi */ --p-mercan: #E07A5F; /* Şefkat-Mercanı — DOLGU/AKSAN için; beyaz metin taşıMAZ (beyazla 2.95:1) */ --p-mercan-cta: #9b625f; /* Şefkat-Mercanı, METİN-TAŞIYAN koyu türev (beyazla 4.88:1 — Ai3 hükmü, 14 Tem) */ --p-altin: #C9A14A; --p-keten: #F4F1DE; --p-krem: #FBF9F3; --p-murekkep: #2A3A4F; --p-sus: #5F7186; /* çocuk-şeker pastelleri */ --p-seker-nane: #7ED0B8; --p-seker-gok: #8FC7E8; --p-seker-seftali: #F7B58C; --p-seker-leylak: #C4A9E8; --p-seker-krem: #FFF7EE; /* — ÖLÇEK: boşluk (8px tabanlı) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* — yarıçap — */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* — tipografi ölçeği (modüler ~1.2) — */ --font-baslik: "Fraunces", Georgia, serif; --font-govde: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* ⚠️ TERS-ÖLÇEK DÜZELTMESİ (Ai3, 15 Tem · USTABAŞI emri · ÖLÇÜLDÜ) KUSUR: --fs-3xl'in TABANI (30px) alt komşusu --fs-2xl'den (34px) KÜÇÜKTÜ. Sabit-px basamaklar (2xs..2xl) ile akıcı clamp basamaklar (3xl, hero) karışınca, dar ekranda clamp min'e oturur ve sabit komşusunu GEÇEMEZ ⇒ 566px ALTINDA: --fs-2xl = 34 > --fs-3xl = 30 (ad büyük, boyut küçük) ⇒ MOBİL-FIRST bir sitede ölçek HER TELEFONDA tersti. 11 genişlik taraması: 5/11 ters. TEK TÜKETİCİ: --fs-3xl'i yalnız css/birlesik.css kullanıyor (+ yetim anasayfa-a kopyası) ve orada da mobilde eziliyor: @media (max-width:760px){ .bahce-pasaj__giris h2 { --fs-2xl } } ⇒ Bu yüzden DÜZELTMENİN RENDER ETKİSİ SIFIR (36 yüzey × 2 ekran ölçüldü: beklenmeyen fark 0). ⚠️ Not — bu yamayı önce "ters-ölçek fark edilip yamalanmış" diye yorumlamıştım; GERİ ALDIM: yama <566px'te büyütüyor (30→34) ama 566-760px'te KÜÇÜLTÜYOR (45.6→34) ⇒ niyeti "bug yaması" değil, "mobilde düz 34px". Yazarın niyetini ölçemem; ölçebildiğim şu: 566px altında DAHA BÜYÜK yazı için yazarın adı DAHA KÜÇÜK olan basamağa (2xl) uzanması gerekiyordu. Kusur adlandırmayı yalancı çıkarıyordu — düzeltmenin gerekçesi bu, niyet-okuma değil. KURAL: akıcı bir basamağın TABANI, altındaki sabit basamaktan BÜYÜK olmalı. 34 (2xl) < 36 (3xl tabanı) < 38 (hero tabanı) ⇒ her genişlikte monoton. Ölçek KARIŞIK kalıyor (gövde basamakları sabit, gösteri basamakları akıcı) — bu kasıtlı ve meşru; kusur karışımda değil, akıcı tabanın sabit komşunun ALTINA düşmesindeydi. Harness: _tekvucut-2026-07-15/_olcum/olcek-monotonluk.mjs (tokens 5/11 ters → 0/11) */ --fs-2xs: 11.5px; --fs-xs: 13px; --fs-sm: 15px; --fs-md: 17px; --fs-lg: 21px; --fs-xl: 27px; --fs-2xl: 34px; --fs-3xl: clamp(36px, 6vw, 56px); --fs-hero: clamp(38px, 8vw, 84px); --lh-sik: 1.12; --lh-govde: 1.6; /* — hareket — */ --dur-hizli: .16s; --dur-orta: .32s; --dur-yavas: .6s; --ease-yumusak: cubic-bezier(.22, 1, .36, 1); --ease-giris: cubic-bezier(.34, 1.56, .64, 1); /* — gölge / ring — */ --golge-sm: 0 2px 10px rgba(20, 30, 50, .08); --golge-md: 0 8px 30px rgba(20, 30, 50, .12); --golge-lg: 0 20px 60px rgba(20, 30, 50, .18); --ring: 0 0 0 3px color-mix(in srgb, var(--renk-vurgu) 45%, transparent); --kenar: 1px solid var(--renk-cizgi); } /* ===== BÖLGE: KLİNİK (varsayılan — mesleki/yetişkin: akademik-lacivert, güven, dingin editoryal) ===== */ :root, [data-bolge="klinik"] { --renk-zemin: var(--p-krem); --renk-zemin2: #ffffff; --renk-yuzey: color-mix(in srgb, var(--p-keten) 55%, #fff); --renk-murekkep: var(--p-lacivert); --renk-govde: var(--p-murekkep); --renk-sus: var(--p-sus); --renk-marka: var(--p-lacivert); /* birincil kimlik */ --renk-vurgu: var(--p-mavi); /* etkileşim/vurgu */ --renk-aksan: var(--p-altin); /* premium detay */ --renk-cizgi: #E7E1D2; --renk-cizgi2: color-mix(in srgb, var(--p-lacivert) 14%, transparent); --bolge-r: var(--r-md); /* mesleki: ölçülü yuvarlama */ } /* ===== BÖLGE: ÇOCUK (şeker/sıcak: mercan+pasteller, oyunsu, yüksek-yuvarlama, ışıltılı) ===== */ [data-bolge="cocuk"] { --renk-zemin: var(--p-seker-krem); --renk-zemin2: #ffffff; --renk-yuzey: color-mix(in srgb, var(--p-seker-seftali) 22%, #fff); --renk-murekkep: #3a2b3f; --renk-govde: #5a4a50; --renk-sus: #9a8790; --renk-marka: var(--p-mercan); --renk-vurgu: var(--p-seker-gok); --renk-aksan: var(--p-seker-nane); --renk-cizgi: color-mix(in srgb, var(--p-mercan) 18%, #f3e8df); --renk-cizgi2: color-mix(in srgb, var(--p-mercan) 24%, transparent); --bolge-r: var(--r-xl); /* çocuk: bol yuvarlama, yumuşak */ } /* koyu-tema opsiyonel (klinik): gerekirse şeritler [data-tema="koyu"] ile kullanır */ [data-tema="koyu"][data-bolge="klinik"], [data-tema="koyu"] { --renk-zemin: #0f1a2e; --renk-zemin2: #14233d; --renk-yuzey: #1a2c49; --renk-murekkep: #eaf1fb; --renk-govde: #c7d4e6; --renk-sus: #8a9bb5; --renk-cizgi: rgba(255,255,255,.10); --renk-cizgi2: rgba(255,255,255,.16); } /* — yardımcı temel sınıflar (isteğe bağlı; şeritler kendi CSS'lerinde token'ları da doğrudan kullanabilir) — */ .tkn-baslik { font-family: var(--font-baslik); font-optical-sizing: auto; color: var(--renk-murekkep); line-height: var(--lh-sik); letter-spacing: -.015em; } .tkn-govde { font-family: var(--font-govde); color: var(--renk-govde); line-height: var(--lh-govde); } .tkn-yuzey { background: var(--renk-yuzey); border: var(--kenar); border-radius: var(--bolge-r); box-shadow: var(--golge-sm); } :where(a, button):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } @media (prefers-reduced-motion: reduce) { :root { --dur-hizli: .001s; --dur-orta: .001s; --dur-yavas: .001s; } } /* ══════════════════════════════════════════════════════════════════════════════ ÇOCUK-OYUN YÜZEYİ — KOYU-IMMERSIVE PALET (Ai4, 14 Tem · FAZ-A göç) Çocuk-bölgesi (yukarıda) AÇIK şeker paletidir; OYUN yüzeyi ise bilinçli KOYU'dur ("koyu immersive oyun-deneyimi bilinçli KORUNDU" — bekleme-salonu kendi notu). Bu paleti körü körüne açık şeker-paletine eşlemek 21 oyun sayfasını aydınlatır ve tasarım kararını yok ederdi. O yüzden palet SİSTEME TAŞINDI, değerleri korunarak: artık ayrı bir 23-token adası değil, token sisteminin bir teması. Kanoniğe BİREBİR eşit olan 4 değer kanonik değişkene BAĞLANDI (tek doğruluk-kaynağı). ⚠️ :root üzerinde tanımlı — çocuk sayfalarının 'sine ek öznitelik gerekmesin diye (21 sayfayı gereksiz yere ellememek için). ══════════════════════════════════════════════════════════════════════════════ */ :root { /* zemin/yüzey — oyun-paletine özgü (kanonikte karşılığı yok) */ --oyun-zemin: #121726; --oyun-zemin2: #1b2236; --oyun-cam: #1c1e2acc; --oyun-cizgi: #ffffff1c; --oyun-murekkep: #2a3142; /* kanonik palete BİREBİR eşit olanlar → kanoniğe bağlandı */ --oyun-lacivert: var(--p-lacivert); /* #1C355E */ --oyun-mavi: var(--p-mavi); /* #3A7CA5 */ --oyun-mercan: var(--p-mercan); /* #E07A5F */ --oyun-keten: var(--p-keten); /* #F4F1DE */ /* oyun-aksanları (canlı; çocuk-ödül dili) */ --oyun-altin: #f6c453; --oyun-nane: #7ad9b5; --oyun-camgobegi: #5ec5e8; --oyun-pembe: #ef8fb3; --oyun-leylak: #c9b6ff; --oyun-guvenli: #5fd6a6; --oyun-uyari: #ff8f6b; } /* ── KURAL: SANAT RENGİ ≠ SİSTEM RENGİ (Ai4, 14 Tem · göç sırasında ölçüldü) ── Göç planında "5 sayfa elle-uyarlama" görünüyordu. Ölçünce çıktı: o sayfalardaki 41 rengin yalnız 1'i sistem rengiydi. Geri kalanı OYUNUN İÇERİĞİ: • oje-tirnak-boyama → oje renkleri / cilt tonları / gradyanlar (çocuğun SEÇTİĞİ palet) • bekleme-salonu/organ → mevcut token'ların ALFA varyantları (#7ad9b53a = --mint + saydamlık) Bunları token'a çevirmek ya görüntüyü bozar ya sisteme 40 çöp-token sokar. ⇒ Token sistemi KABUK/ÇERÇEVEYİ yönetir (zemin, yüzey, metin, aksan, yarıçap, gölge). Oyunun SANAT paleti yerel kalır. Bu bir eksik değil, sınırdır. */