/* ============================================================ Bayconti Tycoon — TASARIM TOKEN'LARI ============================================================ styles.css'ten ÖNCE yüklenir; eski kurallar da bu değişkenleri kullanabilsin diye. Neden var: 29 Tem denetimi, "tek tasarımcı elinden çıkmamış" hissinin ölçülebilir sebebini gösterdi — box-shadow 102 farklı tanım / 119 kullanım padding 95 farklı değer / 170 kullanım font-size 33 farklı değer (9,10,11,12,13,14…) border-radius 22 farklı değer transition 37 farklı tanım / 60 kullanım z-index 28 farklı değer, elle serpiştirilmiş renk 899 literal ↔ yalnız 21 değişken Aşağıdaki ölçekler UYDURULMADI — mevcut CSS'teki dağılımdan türetildi, en çok kullanılan değerler korundu. Amaç görünümü değiştirmek değil, aynı görünümü sonlu sayıda karara indirmek. ── GÖÇ DURUMU (29 Tem) ──────────────────────────────────── `python _scripts/tokenize_styles.py --apply` ile yapıldı; betik dosyada duruyor, kural setleri ve toleranslar orada yazılı. dolgu 177 bildirim → 163'ü token, 11'i `0`/anahtar kalan 3 ham px: 80/110/160px kaydırma boşluğu (ölçek değeri değil, kasıtlı literal) geçiş 69 bildirim → ham eğri 0, ham süre 3 (yalnız .5s/.8s/1s dolum çubukları — süreleri oyun döngüsünün verisi, --dur-* ile ezilemez) gölge 16 bildirim → --el-… ve --glow-… token'larına @keyframes içindeki 16 gölge DOKUNULMADI: değişen yarıçap animasyonun kendisi, token'lanamaz. 46 renkli glow hâlâ literal — bunlar yükselti değil durum rengi (yeşil/mor/mavi/kırmızı) ve renk token katmanı henüz yok; geometriyi bağlamak sorunu bir kat aşağıya taşırdı. Renk göçüyle birlikte yapılmalı. Doğrulama: eski ve yeni CSS aynı sayfada A/B yüklenip 5 ekranda 3662 öğenin hesaplanan dolgu/gölgesi karşılaştırıldı. En büyük sapma 1 px (tek sayı yuvarlaması, 275 öğe — hepsi rozet/pil). Yeni taşma veya kırpılma yok, sayfa yatay taşması iki tarafta 0. ============================================================ */ :root { /* ── Aralık — 2 px tabanlı ────────────────────────────────── ⚠ Eskiden 4 px tabanlıydı ve "6/10/14 göç sırasında 8/12/16'ya toplanacak" yazıyordu. Göç günü sayım bunu çürüttü: dolgularda 14(37) 10(35) 6(29) 18(10) = 111 kullanım, ızgaradaki 128'le neredeyse başa baş. Yoğun bir telefon arayüzünde 4 px fazla kaba; ara basamaklar o yüzden çoğalmıştı. Toplamak yerine ızgarayı ikiye böldük — görünüm birebir korunuyor, karar sayısı yine sonlu (95 farklı dolgu kısayolu → 15 basamak). Adlandırma: --sp-N = 4N px, --sp-Nh = 4N+2 px ("N buçuk"). Tek sayılar (3,5,7,9,11 — rozet içi optik hizalama) göçte bir üst çift basamağa yuvarlandı; dokunma hedefi turu küçüklükten şikâyetçiydi, aşağı değil yukarı yuvarlamak o yönde güvenli. */ --sp-0h: 2px; --sp-1: 4px; --sp-1h: 6px; --sp-2: 8px; --sp-2h: 10px; --sp-3: 12px; --sp-3h: 14px; --sp-4: 16px; --sp-4h: 18px; --sp-5: 20px; --sp-5h: 22px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Köşe yarıçapı ───────────────────────────────────────── En çok kullanılanlar aynen alındı: 999(55) 50%(26) 12(23) 14(23) 10(17) 18(8). 22 değer → 6 karar. */ --r-sm: 10px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; --r-circle: 50%; /* ── Yükselti ────────────────────────────────────────────── Gölgeler blur'a göre dört banda kümeleniyordu (≤8: 6 · 9-20: 31 · 21-34: 13 · 35+: 8) → dört basamak. ⚠ Altın/turuncu gölgeler yükselti DEĞİL, durum göstergesi; ayrı token'landı (--glow-*). Karıştırma. */ --el-1: 0 2px 6px rgba(0, 0, 0, .35); --el-2: 0 8px 22px rgba(0, 0, 0, .40); --el-3: 0 16px 40px rgba(0, 0, 0, .55); --el-4: 0 24px 64px rgba(0, 0, 0, .65); --glow-gold: 0 0 16px rgba(255, 216, 107, .45); --glow-hot: 0 6px 18px rgba(255, 140, 66, .45); --glow-good: 0 4px 18px rgba(46, 204, 113, .35); /* ── Tipografi ───────────────────────────────────────────── ⚠ TABAN 12 px. Denetimde 8 ekranda 182 adet 12 px altı metin vardı (9/10/11 px, 94 kural). Telefonda okunmuyor. Eski 9-11 → --fs-xs, 18/22 → --fs-lg/--fs-xl. */ /* ⚠ TEK İSTİSNA. Yalnız KISA, BÜYÜK HARFLİ, yüksek kontrastlı rozetler için (PREMIUM, YENİ, NADİR). Kısa ve versal olduğu için 11 px'te okunuyor; 12 px'e çıkarmak rozeti kartın köşesinden taşırıyor. Cümle veya sayı için ASLA kullanma — onlar --fs-xs tabanında. */ --fs-micro: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --lh-tight: 1.15; /* rakam/başlık */ --lh-snug: 1.3; /* buton, etiket */ --lh-normal: 1.5; /* paragraf */ --fw-normal: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800; /* ── Hareket ─────────────────────────────────────────────── 37 farklı transition vardı. Üç süre + iki eğri yeter. `--ease-spring` projede zaten kullanılıyordu (tap-recoil). */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ── Katman sırası ───────────────────────────────────────── 28 dağınık z-index vardı (0-8, 10, 20, 25, 30, …). Altı adlı katman: yeni kural yazarken SAYI değil bu token'ları kullan. */ --z-base: 1; --z-scene: 4; /* sahne katmanları, maskot */ --z-hud: 20; /* üst bar, yan butonlar */ --z-nav: 40; /* alt navigasyon */ --z-overlay: 60; /* karartma perdesi */ --z-modal: 100; /* panel, popup */ --z-toast: 120; /* bildirim, en üst */ /* ── Dokunma ─────────────────────────────────────────────── ⚠ Denetim: 93 etkileşimli öğenin 57'si (%61) bunun altındaydı, en küçüğü 20 px. Yeni bileşenlerde bu taban zorunlu. */ --tap-min: 44px; } /* Erişilebilirlik: hareketi azalt tercihi. Oyun animasyonları (maskot, kutlama) ayrı yönetiliyor; bu yalnız arayüz geçişleri. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }