/* =========================================================================== * Salus Fizyoterapi — tasarim jetonlari * * Yonetici fikir: TIBBI MONOGRAFI, wellness brosuru degil. * Yapi; ince cizgilerden (hairline), asimetrik kolon acikliklarindan, * numarali indekslerden ve bosluktan gelir. Golgeli kartlardan, yuvarlak * bloblardan veya gradyanlardan DEGIL. * * Asagidaki TUM kontrast oranlari hesaplanmistir (WCAG 2.1 rolatif * luminans formulu), tahmin degildir. Referans zemin --paper (#FDFCFA). * ======================================================================== */ @layer tokens { :root { /* --------------------------------------------------------------------- * ADACAYI (birincil) — taban #5D7056, logodan olculen murekkep * ------------------------------------------------------------------ */ --sage-50: #F5F6F5; /* 1.06:1 — dekoratif */ --sage-100: #EAECE9; /* 1.16:1 — dekoratif */ --sage-200: #D2D7D0; /* 1.43:1 — dev rakamlar, dolgu */ --sage-300: #B4BDB1; /* 1.89:1 — dekoratif */ --sage-400: #8A9885; /* 2.96:1 — YALNIZCA ikon/indeks, metin degil */ --sage-500: #5D7056; /* 5.23:1 AA — marka murekkebi */ --sage-600: #52624C; /* 6.38:1 AA — birincil aksan, baglanti */ --sage-700: #455340; /* 7.99:1 AAA — hover, vurgulu metin */ --sage-800: #374233; /* 10.29:1 AAA — CTA bandi zemini */ --sage-900: #2B3227; /* 12.90:1 AAA — manifesto/panel zemini */ --sage-950: #21261E; /* 15.05:1 AAA — footer zemini */ /* --------------------------------------------------------------------- * KUM (ikincil) — taban #C8B298 * * !!! KURAL !!! --sand-500 paper uzerinde 1.99:1'dir ve HICBIR WCAG * esigini gecmez. Yalnizca su amaclarla kullanilir: dolgu, cizgi, ayrac, * dekoratif blok, koyu zeminde ikon aksani. * METIN olarak SADECE --sage-900 (6.47:1 AA) veya --sage-950 (7.55:1 AAA) * uzerinde kullanilabilir. Paper uzerinde govde/baglanti/placeholder * metni olarak ASLA kullanilmaz. * ------------------------------------------------------------------ */ --sand-50: #FCFAF9; /* 1.01:1 */ --sand-100: #F8F5F2; /* 1.06:1 — hover zemini */ --sand-200: #F0E9E2; /* 1.17:1 — duz dekoratif blok */ --sand-300: #E6DCD0; /* 1.32:1 — SISTEMIN hairline rengi */ --sand-400: #D7C8B5; /* 1.60:1 */ --sand-500: #C8B298; /* 1.99:1 — bkz. yukaridaki KURAL */ --sand-600: #AF9B84; /* 2.61:1 */ --sand-700: #92816C; /* 3.67:1 — yalnizca buyuk metin */ --sand-800: #736453; /* 5.57:1 AA */ --sand-900: #564A3C; /* 8.39:1 AAA */ --sand-950: #40352A; /* 11.63:1 AAA */ /* --------------------------------------------------------------------- * NOTR * ------------------------------------------------------------------ */ --ink-0: #FFFFFF; --ink-50: #F7F7F7; /* 1.04:1 */ --ink-100: #EFEFEF; /* 1.12:1 */ --ink-200: #DEDFDF; /* 1.30:1 — notr cizgi */ --ink-300: #BDBEBF; /* 1.82:1 — form kenarligi */ --ink-400: #959798; /* 2.86:1 — yalnizca ikon */ --ink-500: #727375; /* 4.63:1 AA — en acik KULLANILABILIR metin */ --ink-600: #5F6163; /* 6.07:1 AA — ikincil metin */ --ink-700: #484A4C; /* 8.68:1 AAA */ --ink-800: #333538; /* 12.00:1 AAA — govde metni */ --ink-900: #24272A; /* 14.64:1 AAA — basliklar */ --ink-950: #1B1E21; /* 16.33:1 AAA */ /* --------------------------------------------------------------------- * SEMANTIK * ------------------------------------------------------------------ */ --paper: #FDFCFA; /* sicak kirik beyaz — ASLA saf beyaz */ --paper-raised: #FFFFFF; --paper-sunken: var(--sand-100); --text: var(--ink-800); --text-strong: var(--ink-900); --text-muted: var(--ink-600); --text-faint: var(--ink-500); --text-invert: var(--sand-200); --text-invert-muted: var(--sand-400); --accent: var(--sage-600); --accent-hover: var(--sage-700); --accent-quiet: var(--sage-400); --accent-ink: var(--sage-500); --rule: var(--sand-300); /* SISTEMIN hairline rengi */ --rule-neutral: var(--ink-200); --rule-strong: var(--sage-500); --rule-invert: var(--sage-800); --field-border: var(--ink-300); --field-focus: var(--sage-600); --ok: #3E6B4A; --warn: #8A6A22; --err: #8C3A32; --info: var(--sage-600); /* Randevu durum akisi (panel) */ --st-yeni: #8C6A1F; --st-arandi: var(--sage-500); --st-onaylandi: #3E6B4A; --st-tamamlandi: var(--ink-500); --st-iptal: #8C3A32; /* --------------------------------------------------------------------- * TIPOGRAFI * ------------------------------------------------------------------ */ --font-display: 'Fraunces', 'Fraunces Fallback', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-body: 'Geist', 'Geist Fallback', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Akiskan olcek — 360px'de 1.200 minor ucluden 1440px'de 1.250'ye */ --t-2xs: clamp(0.6875rem, 0.672rem + 0.07vw, 0.75rem); /* 11–12 eyebrow */ --t-xs: clamp(0.75rem, 0.729rem + 0.09vw, 0.8125rem); /* 12–13 etiket */ --t-sm: clamp(0.875rem, 0.854rem + 0.09vw, 0.9375rem); /* 14–15 kart metni */ --t-base: clamp(1rem, 0.969rem + 0.14vw, 1.0625rem); /* 16–17 govde */ --t-md: clamp(1.0625rem, 1.010rem + 0.23vw, 1.1875rem); /* 17–19 spot */ --t-lg: clamp(1.25rem, 1.156rem + 0.42vw, 1.5rem); /* 20–24 kart basligi */ --t-xl: clamp(1.5rem, 1.323rem + 0.79vw, 1.9375rem); /* 24–31 h3 */ --t-2xl: clamp(1.875rem, 1.573rem + 1.34vw, 2.625rem); /* 30–42 h2 */ --t-3xl: clamp(2.375rem, 1.823rem + 2.45vw, 3.75rem); /* 38–60 h1 */ --t-4xl: clamp(2.75rem, 1.750rem + 4.44vw, 5.25rem); /* 44–84 hero */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.68; --lh-loose: 1.78; --tr-display: -0.022em; --tr-tight: -0.012em; --tr-normal: 0; --tr-wide: 0.04em; --tr-caps: 0.11em; --tr-eyebrow: 0.16em; --measure: 66ch; --measure-narrow: 52ch; --measure-tight: 24ch; /* --------------------------------------------------------------------- * BOSLUK — 4px taban, 24px ustunde geometrik * ------------------------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --s-40: 10rem; /* Bolum ritmi — sistemdeki en onemli tek boşluk jetonu */ /* Mobil taban degerleri bilerek dusuk: ana sayfada 7 bolum var ve 4rem'lik taban tek basina ~900px ekliyordu. */ /* 1440px'de eski degerler 136px ust + 136px alt = bolumler arasi 272px aciyordu; sayfa "bos" hissettiriyordu. Yeni tavan 6rem (96px). */ --section-y: clamp(2.5rem, 1.5rem + 3.6vw, 6rem); --section-y-lg: clamp(3.25rem, 2rem + 5vw, 8rem); --section-y-sm: clamp(1.75rem, 1.25rem + 2vw, 3.25rem); --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem); --container: 78rem; /* 1248px */ --container-wide: 90rem; /* 1440px */ --container-narrow: 46rem; /* 736px */ /* --------------------------------------------------------------------- * KOSE YARICAPI — bilerek sifira yakin. Kurumsal, "dost uygulama" degil. * ------------------------------------------------------------------ */ --r-0: 0; --r-1: 6px; --r-2: 12px; --r-3: 16px; --r-4: 24px; --r-5: 32px; --r-pill: 9999px; /* --------------------------------------------------------------------- * KENARLIK * ------------------------------------------------------------------ */ --bw-hair: 1px; --bw-mark: 2px; --bw-slab: 3px; --border-hair: var(--bw-hair) solid var(--rule); --border-neutral: var(--bw-hair) solid var(--rule-neutral); --border-accent: var(--bw-mark) solid var(--rule-strong); --border-invert: var(--bw-hair) solid var(--rule-invert); /* --------------------------------------------------------------------- * GOLGE — sistemde toplam UC tane, ikisi overlay icin. * Sticky header'in "golgesi" blur degil, 1px cizgidir. * ------------------------------------------------------------------ */ --sh-none: none; --sh-header: 0 1px 0 0 var(--sand-300); --sh-pop: 0 2px 4px -2px rgb(43 50 39 / 0.10), 0 8px 20px -8px rgb(43 50 39 / 0.14); --sh-modal: 0 12px 48px -12px rgb(27 30 33 / 0.28); /* --------------------------------------------------------------------- * HAREKET — yalnizca opacity ve <=8px translate. Olcekleme/parilti yok. * ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 400ms; /* --------------------------------------------------------------------- * KATMAN SIRASI * ------------------------------------------------------------------ */ --z-base: 0; --z-sticky: 100; --z-nav: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* Sticky header yuksekligi — ic baglanti kaydirma payi icin */ --header-h: 5rem; } /* Hareket azaltma tercihi — sureleri sifirla. Ayrica app.js IntersectionObserver'i hic kurmaz (bkz. assets/js/app.js). */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } }