/* ============================================================================ Sitabula — web sitesi tasarim token'lari ---------------------------------------------------------------------------- KAYNAK: Sitabula.Next/src/design/tokens.css (451 satir) KURALLAR: Sitabula.Next/docs/tasarim-sistemi.md (621 satir) Bu dosya o sistemin DUZ CSS'e cevrilmis halidir. Tailwind yok, derleme yok; site elle yazilmis durgun HTML (PLAN.md §1). Katman mimarisi korundu: 1. PALET — ham OKLCH degerleri. Literal renge izin verilen TEK yer. 2. TOKEN — palete anlam veren `--sit-*` degiskenleri. Sayfalar ve `site.css` YALNIZCA bunlari gorur; palete dogrudan erisim yok. Ucuncu katman (Tailwind koprusu) sitede YOKTUR: koprunun isi sinif uretmekti, burada sinif yerine `site.css` var. ------------------------------------------------------------------------ SITE KOYU TEMALIDIR — tek tema (kullanici karari 2026-09-20, PLAN.md §10.4/2). Uygulamada iki tema var ve `:root` acik temayi tutar; SITEDE `:root` DOGRUDAN KOYU DEGERLERI TUTAR. Acik tema siteye tasinmadi, `.dark` sinifi yok. Uygulamanin `.dark` blogunda ne varsa burada `:root` icindedir — degerler birebir. ------------------------------------------------------------------------ Iki bilincli genisletme var ve ikisi de asagida gerekcesiyle yazili: · tip olceginin USTUNE iki adim (vitrin basligi) — §3 · bosluk izgarasinin USTUNE iki adim (sayfa bolumu) — §4 Ikisi de mevcut adimlarin ARASINA bir sey koymaz. Belgenin kurali "ara boyut icat edilmez"dir; olcegin ucunu uzatmak ayri bir seydir ve vitrin bunu gerektirir: bir pazarlama basligi bir tablo basligi degildir. ========================================================================== */ /* --------------------------------------------------------------------------- 1. PALET — ham degerler. Literal renge izin verilen tek katman. Kaynaktan birebir kopya; hex karsiliklari Sitabula.Android/.../Palette.kt. ------------------------------------------------------------------------- */ :root { /* Notr rampa — hafif SOGUK (hue 265). Amber aksan sicak oldugu icin zemin bilerek soguk; sicak zemin + sicak aksan birbirini bogar. Bugunku sitenin krem zemini (#f7f5f0) tam olarak bu hataydi. */ --palette-ink-0: oklch(1 0 0); --palette-ink-50: oklch(0.978 0.002 265); --palette-ink-100: oklch(0.958 0.003 265); --palette-ink-150: oklch(0.935 0.004 265); --palette-ink-200: oklch(0.905 0.005 265); --palette-ink-300: oklch(0.845 0.007 265); --palette-ink-400: oklch(0.715 0.011 265); --palette-ink-500: oklch(0.615 0.013 265); --palette-ink-600: oklch(0.52 0.014 265); --palette-ink-700: oklch(0.408 0.013 265); --palette-ink-800: oklch(0.318 0.011 265); --palette-ink-850: oklch(0.272 0.01 265); --palette-ink-900: oklch(0.228 0.009 265); --palette-ink-925: oklch(0.205 0.0085 265); --palette-ink-950: oklch(0.185 0.008 265); --palette-ink-975: oklch(0.152 0.007 265); --palette-ink-1000: oklch(0.125 0.006 265); /* Marka amber. 500 = #C87412 — MSitabula'dan devralindi, dort platformda ayni. */ --palette-amber-100: oklch(0.94 0.045 70); --palette-amber-200: oklch(0.88 0.075 68); --palette-amber-300: oklch(0.8 0.105 65); --palette-amber-400: oklch(0.72 0.13 63); --palette-amber-500: oklch(0.638 0.143 61); --palette-amber-600: oklch(0.565 0.132 60); --palette-amber-700: oklch(0.49 0.115 58); --palette-amber-800: oklch(0.4 0.093 55); /* Durum renkleri. Uyari bilerek SARI (hue 90) — amber (hue 61) ile karismasin diye; "dikkat et" ile "marka vurgusu" ayni renge dusemez. */ --palette-green-300: oklch(0.82 0.13 152); --palette-green-500: oklch(0.66 0.15 152); --palette-green-600: oklch(0.58 0.145 152); --palette-green-700: oklch(0.5 0.13 152); --palette-yellow-300: oklch(0.87 0.14 92); --palette-yellow-500: oklch(0.78 0.155 90); --palette-yellow-600: oklch(0.65 0.14 88); --palette-yellow-700: oklch(0.56 0.12 86); --palette-yellow-800: oklch(0.465 0.103 84); --palette-red-300: oklch(0.78 0.13 25); --palette-red-400: oklch(0.71 0.17 25); --palette-red-500: oklch(0.64 0.195 25); --palette-red-600: oklch(0.565 0.2 26); --palette-red-700: oklch(0.49 0.18 27); --palette-blue-300: oklch(0.81 0.1 245); --palette-blue-500: oklch(0.66 0.145 248); --palette-blue-600: oklch(0.57 0.16 250); --palette-blue-700: oklch(0.49 0.15 252); /* Katman vurgusu ve golge icin saydam siyah/beyaz */ --palette-white-a04: oklch(1 0 0 / 0.04); --palette-white-a06: oklch(1 0 0 / 0.06); --palette-white-a10: oklch(1 0 0 / 0.1); --palette-black-a04: oklch(0 0 0 / 0.04); --palette-black-a06: oklch(0 0 0 / 0.06); --palette-black-a08: oklch(0 0 0 / 0.08); --palette-black-a40: oklch(0 0 0 / 0.4); --palette-black-a50: oklch(0 0 0 / 0.5); --palette-black-a60: oklch(0 0 0 / 0.6); } /* --------------------------------------------------------------------------- 2. TOKEN — anlamsal katman. `site.css` ve sayfalar YALNIZCA bunlari kullanir. Degerler uygulamanin `.dark` blogundan birebir alindi. ------------------------------------------------------------------------- */ :root { color-scheme: dark; /* --- Yuzeyler --------------------------------------------------------- Koyu temada yuzey sirasi acik temanin AYNASI DEGILDIR: derinlik ACILARAK anlatilir, cunku golge siyah uzerinde is gormez. Kuyu da kart da ayni yonde ayrilir: yukari. Isik yukaridan gelir. canvas 0.125 < surface 0.152 < raised 0.185 < zebra 0.205 < sunken 0.228 */ --sit-canvas: var(--palette-ink-1000); --sit-surface: var(--palette-ink-975); --sit-surface-raised: var(--palette-ink-950); --sit-surface-overlay: var(--palette-ink-850); --sit-surface-sunken: var(--palette-ink-900); --sit-surface-hover: var(--palette-ink-850); --sit-surface-active: var(--palette-ink-800); --sit-table-zebra: var(--palette-ink-925); /* --- Cizgiler --------------------------------------------------------- line-subtle / line dekoratiftir (yuzey degisimi siniri zaten anlatir). line-strong sinirin TEK gostergesi oldugu yerler icindir — girdi kenarligi, isaret kutusu — ve 3:1 esigini gecer (WCAG 1.4.11). */ --sit-line-subtle: var(--palette-ink-900); --sit-line: var(--palette-ink-850); --sit-line-strong: var(--palette-ink-600); /* --- Metin. Uclu de 4.5:1 esigi uzerinde (fg 16.5 · muted 7.4 · subtle 5.0) */ --sit-fg: var(--palette-ink-100); --sit-fg-muted: var(--palette-ink-400); --sit-fg-subtle: var(--palette-ink-500); /* --- Aksan — marka amberi. Koyu zeminde METIN icin 400 (parlak, okunur), DOLGU icin 500 + koyu metin. Ayni adimi iki temada kullanmak birinde mutlaka kirilir. */ --sit-accent: var(--palette-amber-400); --sit-accent-solid: var(--palette-amber-500); --sit-accent-solid-hover: var(--palette-amber-400); --sit-accent-fg: var(--palette-ink-1000); /* Zemin YIKAMASI — ikon kutusunun arkasi, rozet zemini. %16'da bilerek neredeyse gorunmez; uzerindeki metin okunsun diye. */ --sit-accent-soft: oklch(0.72 0.13 63 / 0.16); --sit-accent-line: oklch(0.72 0.13 63 / 0.32); /* VERI dolgusu — grafik sutunu, dilim. `accent-soft` DEGIL: sutunun boyu bir sayiyi temsil eder, sutunun gorunmesi zorunludur. */ --sit-accent-fill: oklch(0.72 0.13 63 / 0.45); /* --- Grafik serisi. Ucuncu seri NOTR, ucuncu bir hue degil: amber (61) ile mavi (248) her renk korlugunde ayrisir, araya konacak mor ya da yesil mavinin yanina duser. Durum renkleri seri olarak kullanilmaz — onlar bir YARGI tasir. */ --sit-series-1: var(--palette-amber-500); --sit-series-2: var(--palette-blue-500); --sit-series-3: var(--palette-ink-400); /* --- Durumlar. Renk TEK BASINA anlam tasimaz: durum rengi her zaman bir ikon ya da metinle birlikte gelir. */ --sit-success: var(--palette-green-300); --sit-success-solid: var(--palette-green-500); --sit-success-soft: oklch(0.82 0.13 152 / 0.16); --sit-success-line: oklch(0.82 0.13 152 / 0.3); --sit-warning: var(--palette-yellow-300); --sit-warning-solid: var(--palette-yellow-500); --sit-warning-soft: oklch(0.87 0.14 92 / 0.16); --sit-warning-line: oklch(0.87 0.14 92 / 0.3); --sit-danger: var(--palette-red-300); --sit-danger-solid: var(--palette-red-500); --sit-danger-solid-hover: var(--palette-red-400); --sit-danger-soft: oklch(0.78 0.13 25 / 0.16); --sit-danger-line: oklch(0.78 0.13 25 / 0.3); --sit-info: var(--palette-blue-300); --sit-info-solid: var(--palette-blue-500); --sit-info-soft: oklch(0.81 0.1 245 / 0.16); --sit-info-line: oklch(0.81 0.1 245 / 0.3); /* --- Derinlik. Koyu temada bir karti ayirmak icin GOLGEYI BUYUTMEK cozum degildir — yuzeyi bir adim acmak cozumdur. Golge burada yalnizca ayirici rol oynar; asil is `--sit-highlight`in 1px ust isik cizgisinde. */ --sit-shadow-e1: 0 1px 2px var(--palette-black-a40); --sit-shadow-e2: 0 2px 4px var(--palette-black-a40), 0 8px 16px -4px var(--palette-black-a50); --sit-shadow-e3: 0 4px 12px var(--palette-black-a50), 0 24px 48px -12px var(--palette-black-a60); --sit-highlight: inset 0 1px 0 var(--palette-white-a06); /* Hazir bilesimler — kaynaktaki `shadow-card` / `shadow-overlay` karsiligi */ --sit-shadow-card: var(--sit-highlight), var(--sit-shadow-e1); --sit-shadow-overlay: var(--sit-highlight), var(--sit-shadow-e3); /* --- Odak halkasi. YALNIZCA klavyeyle gezinirken cizilir (:focus-visible); fare tiklamasi halka birakmaz. */ --sit-ring: oklch(0.72 0.13 63 / 0.6); /* --- Ortu — katman arkasi (lightbox, acik mobil menu) */ --sit-scrim: oklch(0.125 0.006 265 / 0.6); } /* --------------------------------------------------------------------------- 3. TIPOGRAFI ------------------------------------------------------------------------- */ :root { --sit-font-sans: "Inter Variable", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --sit-font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace; /* UYGULAMANIN ALTI ADIMI — birebir, degistirilmedi. Buyuk boyutlarda harf araligi negatif, kucukte hafif pozitif: Inter buyudukce genisler, sikistirilmazsa basliklar dagilir; kuculdukce sikisir, acilmazsa okunmaz. */ --sit-text-caption: 0.75rem; /* 12 / 16 */ --sit-leading-caption: 1rem; --sit-tracking-caption: 0.005em; --sit-text-label: 0.8125rem; /* 13 / 20 */ --sit-leading-label: 1.25rem; --sit-tracking-label: 0; --sit-text-body: 0.875rem; /* 14 / 22 */ --sit-leading-body: 1.375rem; --sit-tracking-body: 0; --sit-text-heading: 1rem; /* 16 / 24 */ --sit-leading-heading: 1.5rem; --sit-tracking-heading: -0.006em; --sit-text-title: 1.375rem; /* 22 / 28 */ --sit-leading-title: 1.75rem; --sit-tracking-title: -0.014em; --sit-text-display: 2rem; /* 32 / 38 */ --sit-leading-display: 2.375rem; --sit-tracking-display: -0.022em; /* VITRIN ICIN BIR ADIM USTE — siteye ozel, uygulamada yok. Gerekce: uygulamanin en buyuk adimi (32px) bir KPI SAYISIDIR, bir pazarlama basligi degil. Vitrin basligini 32px'te birakmak "ucuz" hissini uretir; ama cozum ara boyut icat etmek DEGIL, olcegi ayni orandan (~1.45) yukari uzatmaktir: 22 → 32 → 46 Adimlarin ARASINA hicbir sey konmadi. Bu adim YALNIZCA vitrin basliklarinda kullanilir; hukuki ve yardimci sayfalar alti adimla yetinir. 🔴 66 px'lik DORDUNCU adim KALDIRILDI (2026-09-20). Olceği uzatirken konmustu ve sitede onu kullanan tek yer kahramanin basligiydi; kahraman soldan hizali iki sutuna gecince 620 px'lik kapta calismadi ve baslik `display-lg`e indi. Kullanilmayan bir adim, olcegi tarif eden bir yalandir. */ --sit-text-display-lg: 2.875rem; /* 46 / 52 */ --sit-leading-display-lg: 3.25rem; --sit-tracking-display-lg: -0.026em; /* GOVDE METNI. Uygulamada `body` 14px'tir cunku yogun bir VERI ARAYUZUDUR; bir web sayfasinda uzun metin 14px'te yorar. Site uzun metin icin `heading` ADIMININ BOYUTUNU (16px) kullanir — yeni sayi icat edilmedi, var olan adim baska bir rolde kullanildi. Agirlik role gore verilir: ayni boyut 600 agirlikta baslik, 400 agirlikta govdedir. */ --sit-text-prose: var(--sit-text-heading); --sit-leading-prose: 1.625rem; /* 26 — uzun okuma icin 24 yerine bir tik acik */ /* Buyuk harfli kucuk etiket. Buyuk harf harfleri sikistirir; acilmazsa blok gibi durur. Aralik TEK YERDE tanimli — sayfada `letter-spacing` yazilmaz. */ --sit-tracking-caps: 0.06em; } /* Dar ekranda vitrin basliklari bir adim asagi iner. Ara deger uretilmez: 46 → 32 → 22, hepsi tanimli adimlar. `clamp()` bilerek KULLANILMADI — akiskan boyut her genislikte yeni bir sayi uretir ve olcek diye bir sey kalmaz. Olculdu: 46 px'lik baslik 375 px'lik ekranda BES SATIRA yayiliyor ve ilk ekranda metinden baska bir sey kalmiyordu. */ @media (max-width: 720px) { :root { --sit-text-display-lg: 2rem; /* 32 */ --sit-leading-display-lg: 2.375rem; --sit-tracking-display-lg: -0.022em; } } /* --------------------------------------------------------------------------- 4. YARICAP VE BOSLUK ------------------------------------------------------------------------- */ :root { /* UC DEGER. Baskasi yok. MSitabula'da 30 farkli yaricap vardi; goz bunu isimlendiremez ama ritim bozuklugunu fark eder. */ --sit-radius-control: 0.5rem; /* 8px — dugme, girdi, rozet, kucuk ikon kutusu */ --sit-radius-card: 0.875rem; /* 14px — kart, panel, katman */ --sit-radius-pill: 9999px; /* tam — cip, avatar, durum noktasi */ /* 8px IZGARASI. Ara deger yok. Tek istisna: 4px, yalnizca kontrol ICI mikro ayar (rozet dikey ic boslugu gibi). Yerlesimde kullanilmaz. */ --sit-space-1: 0.25rem; /* 4 — yalnizca kontrol ici */ --sit-space-2: 0.5rem; /* 8 — ikon-etiket arasi */ --sit-space-4: 1rem; /* 16 — kart ici ogeler */ --sit-space-6: 1.5rem; /* 24 — kart ic boslugu */ --sit-space-8: 2rem; /* 32 — bolumler arasi */ --sit-space-12: 3rem; /* 48 — sayfa bolumleri */ /* VITRIN ICIN IKI ADIM USTE — tipografideki genisletmenin esi. Uygulamanin listesi 48'de biter cunku bir PENCERE icinde yasar; bir vitrin sayfasinin bolum araligi 48px'te sikisik durur. Ikisi de 8px izgarasinda: kural bozulmadi, ucu uzatildi. Arada yeni deger yok. */ --sit-space-16: 4rem; /* 64 */ --sit-space-24: 6rem; /* 96 */ /* Sayfa genisligi ve kenar payi */ --sit-container: 1160px; --sit-container-narrow: 760px; /* hukuki ve uzun metin sayfalari */ --sit-gutter: var(--sit-space-6); } @media (max-width: 720px) { :root { --sit-gutter: var(--sit-space-4); } } /* --------------------------------------------------------------------------- 5. HAREKET 320ms'den uzun arayuz gecisi YOK. Uzun animasyon pahali degil, yavas hissettirir. ------------------------------------------------------------------------- */ :root { --sit-duration-instant: 80ms; /* renk/opaklik degisimi, hover */ --sit-duration-fast: 140ms; /* kucuk oge acilip kapanmasi */ --sit-duration-base: 200ms; /* panel, acilir menu */ --sit-duration-slow: 320ms; /* katman, sayfa gecisi */ /* Kuraldan muaf tek deger: bu bir gecis degil, surekli donen bir bekleme isareti. Hizli olursa titrek gorunur. */ --sit-duration-shimmer: 1400ms; /* Blogun ekrana girmesi bir GECIS degil, icerigin BELIRMESIDIR; uygulamada da 320ms kuralinin disindadir (motion.ts / MOTION.rise = 360ms). */ --sit-duration-rise: 360ms; --sit-stagger-rise: 50ms; --sit-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* girisler */ --sit-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* yer degistirme */ --sit-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* vurgulu giris */ } /* "Hareketi azalt" — isletim sistemi ayari. Sitede framer-motion yok, her hareket CSS'te; bu yuzden tek kural yeter (uygulamada iki yerde ele alinir). */ @media (prefers-reduced-motion: reduce) { :root { --sit-duration-instant: 0ms; --sit-duration-fast: 0ms; --sit-duration-base: 0ms; --sit-duration-slow: 0ms; --sit-duration-rise: 0ms; --sit-stagger-rise: 0ms; } }