/* * Floortrim UK — marka token'lari. * Yon A "Galeri Monokromu" (docs/rebrand-floortrim/floortrim-kimlik-onerileri.html): * eski marka turuncu ailesi tamamen cikti, vurgu = is siyahi (--color-ink #141414). * Token ADLARI (486 kullanim) korunmustur; "orange"/"charcoal" gibi eski adlar artik * --color-ink/--color-ink-2'nin alias'idir — deger tanimi :root icinde tek kaynaktan gelir. * Kontrast (olculdu, tema-fix Puppeteer harness'i): --color-ink beyaz uzerinde 18,42:1 * (AAA); --color-ink-2 beyaz uzerinde 5,38:1, --color-surface (#F6F5F2) uzerinde 4,93:1 * (ikisi de AA gecer). * * ROL TABANLI TOKEN'LAR: 6 Agu 2026'da koyu deriler (body.ft-skin-*) :root'un ACIK * varsayimini bilesen CSS'inde tersine ceviriyordu. 24 Eyl 2026'dan itibaren bu * tersleme TEMA DUZEYINDE yapilir: rol token'lari (--bg, --fg, --fill-accent, * --focus ...) degerine gore cozulur, bilesenler yalniz rolleri * kullanir. Ayrinti ve token listesi asagidaki "RENK SISTEMI" blogunda. */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/jost-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/jost-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jost-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jost-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jost-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jost-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/mulish-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/mulish-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/mulish-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/mulish-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/mulish-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/mulish-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/mulish-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/mulish-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/mulish-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/mulish-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================= RENK SISTEMI — iki tema (koyu / acik), 24 Eylul 2026 ----------------------------------------------------------------------------- Uc katman (yukaridan asagiya; bilesen YALNIZ 2. ve 3. katmani kullanir): 1) KIMLIK PRIMITIFLERI (temadan bagimsiz, Yon A "Galeri Monokromu"): --color-ink #141414 · --color-ink-2 #6E6A63 · --color-surface #F6F5F2 --color-line #E7E4DE · --color-white #FFFFFF Sabit kalir; "her iki temada ayni" olmasi gereken yerler icin (beyaz teknik cizim kagidi, fotograf ustu scrim) kullanilir. 2) ROL TOKEN'LARI (tema degistiginde degeri degisen tek yer): Zemin --bg (sayfa) · --bg-raised (kart/panel/input) · --bg-raised-2 (kart ici ikinci kademe) · --bg-header (yapiskan baslik, yari saydam) Cizgi --line (ayrac, dekoratif) · --line-control (adet kutusu vb. kontrol cercevesi, >=3:1) · --field-border (CF7/yorum alani cercevesi; koyuda eski degeri korur, acikta >=3:1) Metin --fg · --fg-muted · --fg-accent (vurgu metni/link) Vurgu --accent-deco (nokta, alt cizgi, aktif cerceve — metin DEGIL) Dolgu --fill-accent + --on-fill-accent (birincil buton: acikta is siyahi dolgu + beyaz etiket, koyuda ters dolgu) Odak --focus · --focus-soft Katman --overlay (cekmece arka perdesi) · --shadow-lg · --shadow-sm Doku --glow · --band/--band-end · --media-ring Spec Katalog derisi (WooCommerce) esdegerleri: --spec-bg, --spec-bg-raised, --spec-line, --spec-fg, --spec-fg-muted, --spec-field-border, --spec-bg-header 3) ESKI ADLAR (geriye donuk alias; 486+ kullanim): --color-surface-0..3, --color-on-surface(-muted), --color-spec-*, --color-on-spec(-muted), --color-orange(-bright), --color-focus. Rol token'larina baglidir, tema ile birlikte doner. YENI KODDA rol token'larini kullan. Tema secimi: (functions.php'deki satir ici boot script'i stil sayfalarindan ONCE yazar; FastCGI cache ile uyumlu, tum mantik istemcide). JS yoksa data-ft-theme olmaz -> isletim sistemi tercihi varsayilan ACIK (24 Eyl 2026: isletim sistemi tercihi artik izlenmez). ⚠️ SABIT KOYU KAPSAM: fotograf ustundeki metin (hero, kategori hero'su, lightbox) HER IKI temada beyaz kalmalidir. Bu ogeler asagidaki koyu blogun secici listesindedir; yeni bir "gorsel ustu" bolum icin isaretlemeye data-ft-scheme="dark" eklemek yeterli (alias'lar da o ogede yeniden cozulur — custom property var() zinciri tanimlandigi ogede cozuldugu icin SART). ACIK DEGERLER IKI YERDE yazilidir (data-ft-theme="light" + JS'siz medya sorgusu yedegi); scripts/kontrast-kontrol.mjs ikisinin ayni oldugunu da denetler. Kontrast olcumleri: node scripts/kontrast-kontrol.mjs (modema-uk kokunden). ========================================================================== */ :root { /* — 1) Kimlik primitifleri (temadan bagimsiz) — */ --color-white: #FFFFFF; --color-ink: #141414; /* ana metin + vurgu; beyazda 18,42:1 (AAA) */ --color-ink-2: #6E6A63; /* ikincil metin; beyazda 5,38:1, #F6F5F2 uzerinde 4,93:1 (AA) */ --color-surface: #F6F5F2; /* acik kart/bolum yuzeyi */ --color-line: #E7E4DE; /* acik ayrac cizgisi — metin DEGIL */ /* Eski kimlik alias'lari (temadan bagimsiz, is siyahi ailesi) */ --color-brand-orange: var(--color-ink); --color-brand-orange-text: var(--color-ink); --color-brand-dark: var(--color-ink); --color-orange-text: var(--color-ink); --color-charcoal: var(--color-ink); --color-body: var(--color-ink); --color-muted: var(--color-ink-2); --color-muted-text: var(--color-ink-2); --color-paper: var(--color-surface); --color-hairline: var(--color-line); --color-neutral-100: var(--color-surface); --color-neutral-300: var(--color-line); --color-neutral-600: var(--color-ink-2); /* — Kose yaricapi: Yon A "Galeri Monokromu" keskin kose disiplini — */ --radius: 0; /* kart, buton, giris alani, rozet — tum dikdortgen ogeler */ --radius-round: 50%; /* gercek daire (nokta, ikon dugmesi) — bicimdir, stil degil */ --font-display: 'Jost', Futura, 'Century Gothic', sans-serif; --font-body: 'Mulish', 'Avenir Next', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* — 2) KOYU tema (varsayilan) + sabit koyu kapsamlar. Degerler 24 Eyl 2026 oncesi tek temanin BIREBIR degerleridir (koyu modda gorsel regresyon yok). — */ :root, :root[data-ft-theme="dark"], [data-ft-scheme="dark"], .ft-hero--visual, .ft-shop-header--visual, .ft-lightbox { color-scheme: dark; --bg: #0D0D0D; --bg-raised: #141414; --bg-raised-2: #1A1A1A; --bg-header: rgba(13, 13, 13, 0.86); --line: #1F1F1F; --line-control: #6B6B6B; /* #141414 uzerinde 3,4:1 */ --field-border: #6B6B6B; /* CF7 alan cercevesi (koyu: 24 Eyl 2026 >=3:1 icin #1F1F1F yukseltildi) */ --fg: #FFFFFF; --fg-muted: #A3A3A3; --fg-accent: #FFFFFF; --accent-deco: #FFFFFF; --fill-accent: #FFFFFF; --on-fill-accent: #141414; --focus: #FFFFFF; --focus-soft: rgba(255, 255, 255, 0.18); --overlay: rgba(13, 13, 13, 0.55); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08); --glow: rgba(255, 255, 255, 0.03); --band: rgba(20, 20, 20, 0.6); --band-end: rgba(20, 20, 20, 0); --media-ring: rgb(255 255 255 / 0.09); --spec-bg: #131517; --spec-bg-raised: #1B1E21; --spec-bg-header: rgba(19, 21, 23, 0.86); --spec-line: #2A2F33; --spec-field-border: #6A7175; --spec-fg: #E9EAEA; --spec-fg-muted: #969D9F; /* — 3) Eski adlar -> rol token'lari (her kapsamda yeniden cozulur) — */ --color-surface-0: var(--bg); --color-surface-1: var(--bg-raised); --color-surface-2: var(--bg-raised-2); --color-surface-3: var(--line); --color-on-surface: var(--fg); --color-on-surface-muted: var(--fg-muted); --color-spec-0: var(--spec-bg); --color-spec-1: var(--spec-bg-raised); --color-spec-line: var(--spec-line); --color-on-spec: var(--spec-fg); --color-on-spec-muted: var(--spec-fg-muted); --color-orange: var(--accent-deco); /* DEKORATIF/GOSTERGE rolu */ --color-orange-bright: var(--fg-accent); /* vurgu METNI rolu */ --color-focus: var(--focus); } /* — ACIK tema: Yon A "Galeri Monokromu"nun kendi zemini (kimlik zaten acik). — */ :root[data-ft-theme="light"] { color-scheme: light; --bg: #F6F5F2; --bg-raised: #FFFFFF; --bg-raised-2: #EFEDE8; --bg-header: rgba(246, 245, 242, 0.9); --line: #E7E4DE; --line-control: #8A857D; --field-border: #8A857D; --fg: #141414; --fg-muted: #6E6A63; --fg-accent: #141414; --accent-deco: #141414; --fill-accent: #141414; --on-fill-accent: #FFFFFF; --focus: #141414; --focus-soft: rgba(20, 20, 20, 0.16); --overlay: rgba(20, 20, 20, 0.32); --shadow-lg: 0 8px 24px rgba(20, 20, 20, 0.1); --shadow-sm: 0 4px 12px rgba(20, 20, 20, 0.08); --glow: rgba(20, 20, 20, 0.02); --band: rgba(231, 228, 222, 0.55); --band-end: rgba(231, 228, 222, 0); --media-ring: rgb(20 20 20 / 0.08); --spec-bg: #F1EFEB; --spec-bg-raised: #FFFFFF; --spec-bg-header: rgba(241, 239, 235, 0.9); --spec-line: #E0DDD6; --spec-field-border: #8A857D; --spec-fg: #141414; --spec-fg-muted: #67635C; } /* JS'siz yedek (24 Eyl 2026'dan beri kosulsuz): data-ft-theme yazilmadiysa ACIK tema. Degerler yukaridaki :root[data-ft-theme="light"] blogunun AYNISIDIR. */ :root:not([data-ft-theme]) { color-scheme: light; --bg: #F6F5F2; --bg-raised: #FFFFFF; --bg-raised-2: #EFEDE8; --bg-header: rgba(246, 245, 242, 0.9); --line: #E7E4DE; --line-control: #8A857D; --field-border: #8A857D; --fg: #141414; --fg-muted: #6E6A63; --fg-accent: #141414; --accent-deco: #141414; --fill-accent: #141414; --on-fill-accent: #FFFFFF; --focus: #141414; --focus-soft: rgba(20, 20, 20, 0.16); --overlay: rgba(20, 20, 20, 0.32); --shadow-lg: 0 8px 24px rgba(20, 20, 20, 0.1); --shadow-sm: 0 4px 12px rgba(20, 20, 20, 0.08); --glow: rgba(20, 20, 20, 0.02); --band: rgba(231, 228, 222, 0.55); --band-end: rgba(231, 228, 222, 0); --media-ring: rgb(20 20 20 / 0.08); --spec-bg: #F1EFEB; --spec-bg-raised: #FFFFFF; --spec-bg-header: rgba(241, 239, 235, 0.9); --spec-line: #E0DDD6; --spec-field-border: #8A857D; --spec-fg: #141414; --spec-fg-muted: #67635C; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); font-display: swap; font-weight: 400; font-style: normal; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); font-display: swap; font-weight: 400; font-style: normal; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); font-display: swap; font-weight: 500; font-style: normal; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); font-display: swap; font-weight: 500; font-style: normal; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }