/* ========================================================================== SELF-HOSTED FONTS — RAPID-DS-002.CSP Google Fonts CDN kaldırıldı (KVKK: yurt dışı IP transferi engellendi). Kaynak: Google Webfonts Helper (https://gwfh.mranftl.com/fonts) Lisans: OFL 1.1 — bkz. public/fonts/_LICENSES.md 22 @font-face: BricolageGrotesque (8) + PublicSans (8) + JetBrainsMono (6) unicode-range: latin (U+0000-00FF...) + latin-ext (U+0100-024F...) ayrımı font-display: swap — FOUC < 50ms, sistem fontu ile başlar, swap yapar. ========================================================================== */ /* ── Bricolage Grotesque — latin ── */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Bricolage Grotesque — latin-ext (Türkçe: ş ğ ü ç ö İ) ── */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Public Sans — latin ── */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Public Sans — latin-ext (Türkçe) ── */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/public-sans/public-sans-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── JetBrains Mono — latin ── */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── JetBrains Mono — latin-ext (Türkçe) ── */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* * RapidHCM Default Theme — "Dedeman flat-clean" (RAPID-UI-147) * Formerly: Design L (Spatial Glass + Multi-Hue Wash) * * Revision: token values updated to flat-clean visual language. * Warm cream page ground (#faf8f5), opaque white cards (#fff), * 1px border, no app-shell mesh, demo dark set (#0f1117/#1a1f2e). * Token names unchanged (ADR-041 backwards-compat, K-B). * * This file defines the platform's visual identity via CSS custom properties. * Token architecture (3 layers per ADR-041): * Layer 1 — Primitive : --prim-* (raw OKLCH values, durations, etc.) * Layer 2 — Semantic : --rhcm-* (backwards-compat semantic aliases) * Layer 3 — Component : --rhcm-btn-*, --rhcm-sidebar-*, --rhcm-card-*, etc. * * ═══════════════════════════════════════════════════════════════════════ * WHITE-LABEL OVERRIDE * * SaaS tenants : API delivers branding, injected at runtime via JS * (src/theme/runtime.ts → applyTheme()). * On-premise : Replace this file with custom values. Only override * what you need — unset properties fall back to defaults. * * Example on-premise override: * --prim-brand-primary: oklch(55% 0.18 250); (blue instead of teal) * --rhcm-primary: #1a56db; * --rhcm-brand-name: "AcmeCorp HR"; * --rhcm-logo-url: url('/brand/custom-logo.svg'); * * Minimum viable override (just brand color): * :root { --prim-brand-primary: oklch(55% 0.18 250); } * ═══════════════════════════════════════════════════════════════════════ */ /* ====================================================================== LAYER 0 — FALLBACK (old browsers — no OKLCH support) Kept minimal; only brand essentials. Full overrides below via @supports. ====================================================================== */ :root { /* Brand hex fallbacks — used when OKLCH @supports block is not evaluated */ --rhcm-primary: #219c90; --rhcm-primary-light: #2ec4b6; --rhcm-primary-dark: #1a7f75; --rhcm-accent: #ee9322; --rhcm-warning: #e9b824; --rhcm-danger: #d83f31; --rhcm-info: #0ea5e9; --rhcm-success: #16a34a; /* Surface hex fallbacks */ --rhcm-paper: #faf8f5; --rhcm-ink: #14202a; --rhcm-ink-soft: #36505b; --rhcm-ink-mute: #6c8088; --rhcm-ink-faint: #9aabb0; /* Typography fallbacks */ --rhcm-font-display: 'Bricolage Grotesque', system-ui, sans-serif; --rhcm-font-body: 'Public Sans', system-ui, sans-serif; --rhcm-font-sans: 'Public Sans', system-ui, sans-serif; --rhcm-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Motion fallbacks */ --rhcm-duration-fast: 140ms; --rhcm-duration-std: 200ms; --rhcm-duration-slow: 400ms; --rhcm-duration-exit: 600ms; /* Sidebar fallbacks */ --rhcm-sidebar-width-collapsed: 68px; --rhcm-sidebar-width-expanded: 250px; } /* ====================================================================== LAYER 1 — PRIMITIVE (OKLCH — full color engine) Wrapped in @supports so old browsers keep hex fallbacks above. ====================================================================== */ @supports (color: oklch(0 0 0)) { :root { /* ── Primitive Brand ── */ --prim-brand-primary: oklch(60% 0.10 180); --prim-brand-primary-light: oklch(72% 0.10 180); --prim-brand-primary-dark: oklch(50% 0.08 180); --prim-brand-accent: oklch(72% 0.16 60); --prim-brand-warning: oklch(84% 0.12 88); --prim-brand-danger: oklch(52% 0.20 30); --prim-brand-info: oklch(60% 0.16 230); --prim-brand-success: oklch(52% 0.17 142); /* ── Primitive Canvas ── */ /* RAPID-UI-147: warm cream (#faf8f5 ≈ oklch(98% .008 85)) replaces cold blue-white */ --prim-paper: oklch(98% 0.008 85); /* 4-level text scale aligned to demo values: ink=#0f172a ink-mute(muted)=#5a6e6c ink-soft=#94a3b8 ink-faint(disabled)=#cbd5e1 */ --prim-ink: oklch(15% 0.018 255); --prim-ink-soft: oklch(66% 0.010 232); --prim-ink-mute: oklch(46% 0.018 195); --prim-ink-faint: oklch(84% 0.008 232); --prim-rule: color-mix(in oklab, var(--prim-ink) 12%, transparent); /* ── Primitive Blobs (6-blob multi-hue canvas) ── */ /* All hues derived from rapidsol brand palette: primary #219c90 · light #2ec4b6 · accent #ee9322 · warning #e9b824 · info #6488b0 */ --blob-teal-deep: oklch(86% 0.025 195); /* top-left anchor — rapidsol primary whisper */ --blob-teal-light: oklch(90% 0.018 195); /* bottom-right — breath of teal */ --blob-peach: oklch(83% 0.07 50); /* top-right — orange family (faded) */ --blob-gold: oklch(86% 0.08 88); /* bottom-left — warning yellow (faded) */ --blob-steel: oklch(80% 0.045 245); /* diagonal — info blue (faded/toned) */ --blob-amber: oklch(84% 0.09 60); /* splash — accent orange (faded) */ /* ── Primitive Motion ── */ --prim-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --prim-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --prim-ease-glass: cubic-bezier(0.2, 0.7, 0.2, 1); --prim-duration-fast: 140ms; --prim-duration-std: 200ms; --prim-duration-slow: 400ms; --prim-duration-exit: 600ms; /* ── Primitive Spatial ── */ --prim-perspective: 1600px; --prim-perspective-origin: 50% 38%; /* ── Primitive Type Scale ── */ --prim-text-xs: 0.75rem; --prim-text-sm: 0.875rem; --prim-text-base: 1rem; --prim-text-lg: 1.125rem; --prim-text-xl: 1.5rem; --prim-text-2xl: 2rem; --prim-text-3xl: 2.375rem; --prim-text-4xl: 3rem; /* ── Primitive Radius ── */ --prim-radius-sm: 0.25rem; --prim-radius-md: 0.5rem; --prim-radius-lg: 0.75rem; --prim-radius-xl: 1rem; --prim-radius-2xl: 1.125rem; --prim-radius-pill: 999px; /* ── Primitive Spacing ── */ --prim-space-1: 0.25rem; --prim-space-2: 0.5rem; --prim-space-3: 0.75rem; --prim-space-4: 1rem; --prim-space-6: 1.5rem; --prim-space-8: 2rem; --prim-space-12: 3rem; --prim-space-16: 4rem; } /* ==================================================================== LAYER 2 — SEMANTIC (--rhcm-* — backwards-compat aliases) Existing components using var(--rhcm-primary) keep working. ==================================================================== */ :root { /* Brand */ --rhcm-primary: var(--prim-brand-primary); --rhcm-primary-light: var(--prim-brand-primary-light); --rhcm-primary-dark: var(--prim-brand-primary-dark); --rhcm-primary-50: oklch(97% 0.008 180); --rhcm-primary-100: oklch(94% 0.015 180); --rhcm-primary-500: var(--prim-brand-primary); --rhcm-primary-600: var(--prim-brand-primary-dark); --rhcm-primary-900: oklch(30% 0.06 180); --rhcm-accent: var(--prim-brand-accent); --rhcm-warning: var(--prim-brand-warning); --rhcm-danger: var(--prim-brand-danger); --rhcm-info: var(--prim-brand-info); --rhcm-success: var(--prim-brand-success); /* Canvas / Surface */ --rhcm-paper: var(--prim-paper); --rhcm-ink: var(--prim-ink); --rhcm-ink-soft: var(--prim-ink-soft); --rhcm-ink-mute: var(--prim-ink-mute); --rhcm-ink-faint: var(--prim-ink-faint); --rhcm-rule: var(--prim-rule); /* RAPID-UI-147 flat-clean: opaque card surface token (page ≠ card) */ --rhcm-bg-card-opaque: #ffffff; /* Backwards-compat surface aliases (old names) */ --rhcm-bg: var(--prim-paper); /* RAPID-UI-147: subtle uses warm teal-tint (#ecf3f1) */ --rhcm-bg-muted: oklch(96% 0.006 165); --rhcm-bg-subtle: oklch(94.5% 0.010 165); --rhcm-text: var(--prim-ink); --rhcm-text-muted: var(--prim-ink-mute); --rhcm-text-on-primary: #ffffff; --rhcm-border: #e2e8f0; --rhcm-border-hover: color-mix(in oklab, var(--prim-ink) 20%, transparent); /* Typography (Design L: Bricolage Grotesque + Public Sans + JetBrains Mono) */ --rhcm-font-display: 'Bricolage Grotesque', system-ui, sans-serif; --rhcm-font-sans: 'Public Sans', system-ui, sans-serif; --rhcm-font-body: var(--rhcm-font-sans); /* alias for tokens.ts bodyFamily */ --rhcm-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Motion */ --rhcm-easing: var(--prim-ease-out-quint); --rhcm-ease-out-quint: var(--prim-ease-out-quint); --rhcm-ease-out-expo: var(--prim-ease-out-expo); --rhcm-ease-glass: var(--prim-ease-glass); --rhcm-duration-fast: var(--prim-duration-fast, 140ms); --rhcm-duration-std: var(--prim-duration-std, 200ms); --rhcm-duration-normal: 200ms; /* backwards compat alias */ --rhcm-duration-slow: var(--prim-duration-slow, 400ms); --rhcm-duration-exit: var(--prim-duration-exit, 600ms); /* Gradients */ --rhcm-gradient-primary: linear-gradient(135deg, var(--prim-brand-primary-light), var(--prim-brand-primary)); --rhcm-gradient-warm: linear-gradient(135deg, var(--prim-brand-accent), var(--prim-brand-warning)); } /* ==================================================================== LAYER 3 — COMPONENT (--rhcm-{component}-*) ==================================================================== */ :root { /* ── Card ── */ --rhcm-card-bg: var(--prim-paper); --rhcm-card-border: var(--prim-rule); --rhcm-card-radius: var(--prim-radius-xl); --rhcm-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); --rhcm-card-hover-shadow: 0 10px 15px -3px oklch(60% 0.10 180 / 0.08), 0 4px 6px -4px oklch(60% 0.10 180 / 0.04); --rhcm-card-hover-lift: translateY(-2px); /* ── Popover / Dropdown (BUG-1 fix: opak yüzey — glass KULLANMA) --rhcm-card-bg glass değerken dropdown içeriden görünürdü. Popover her zaman tam opak olmalı (okunabilirlik). RAPID-UI-148: prim-paper (krem) → bg-card-opaque (#fff); kart=popover=beyaz. ── */ --rhcm-popover-bg: var(--rhcm-bg-card-opaque); --rhcm-popover-border: var(--prim-rule); /* ── Glass ── */ --rhcm-glass-bg: rgba(255, 255, 255, 0.45); --rhcm-glass-bg-strong: rgba(255, 255, 255, 0.78); --rhcm-glass-bg-soft: rgba(255, 255, 255, 0.30); --rhcm-glass-blur: 28px; --rhcm-glass-blur-strong: 32px; --rhcm-glass-saturate: 180%; --rhcm-glass-border: 1px solid rgba(255, 255, 255, 0.55); --rhcm-glass-border-strong: 1px solid rgba(255, 255, 255, 0.70); /* H3 fix: defined here so var(--rhcm-glass-shine-opacity, 0.85) fallback chain works */ --rhcm-glass-shine-opacity: 0.85; --rhcm-glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.85); --rhcm-glass-shine-strong: inset 0 1px 0 rgba(255, 255, 255, 0.90); --rhcm-glass-undershade: inset 0 -1px 0 color-mix(in oklab, var(--prim-ink) 4%, transparent); --rhcm-glass-radius: 14px; --rhcm-glass-radius-strong: 18px; --rhcm-glass-shadow: var(--rhcm-glass-shine), var(--rhcm-glass-undershade), 0 8px 24px -4px color-mix(in oklab, var(--prim-ink) 14%, transparent), 0 24px 48px -12px color-mix(in oklab, var(--prim-ink) 18%, transparent); --rhcm-glass-shadow-strong: var(--rhcm-glass-shine-strong), inset 0 -1px 0 color-mix(in oklab, var(--prim-ink) 5%, transparent), 0 12px 30px -10px color-mix(in oklab, var(--prim-ink) 18%, transparent), 0 36px 70px -20px color-mix(in oklab, var(--prim-ink) 22%, transparent); /* ── Input ── */ --rhcm-input-bg: rgba(255, 255, 255, 0.55); --rhcm-input-border: rgba(255, 255, 255, 0.70); --rhcm-input-radius: var(--prim-radius-lg); --rhcm-input-focus-ring: oklch(60% 0.10 180 / 0.18); --rhcm-input-focus-border: oklch(60% 0.10 180 / 0.60); --rhcm-input-placeholder: var(--prim-ink-mute); /* ── Button — Primary ── */ --rhcm-btn-primary-bg: linear-gradient(135deg, var(--prim-brand-primary-light), var(--prim-brand-primary-dark)); --rhcm-btn-primary-border: rgba(255, 255, 255, 0.40); --rhcm-btn-primary-radius: var(--prim-radius-lg); --rhcm-btn-primary-shadow: 0 10px 24px -8px oklch(50% 0.08 180 / 0.55), inset 0 1px 0 rgba(255,255,255,0.50); --rhcm-btn-primary-hover-shadow: 0 14px 28px -6px oklch(50% 0.08 180 / 0.65); --rhcm-btn-primary-hover-lift: translateY(-1px); /* ── Button — Ghost ── */ --rhcm-btn-ghost-bg: rgba(255, 255, 255, 0.55); --rhcm-btn-ghost-border: rgba(255, 255, 255, 0.65); --rhcm-btn-ghost-blur: 14px; --rhcm-btn-ghost-shadow: inset 0 1px 0 rgba(255,255,255,0.70); /* ── Sidebar ── */ --rhcm-sidebar-bg: linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0.34)); --rhcm-sidebar-border: rgba(255, 255, 255, 0.55); --rhcm-sidebar-blur: 28px; --rhcm-sidebar-radius: var(--prim-radius-2xl); --rhcm-sidebar-active-bg: linear-gradient(135deg, oklch(60% 0.10 180 / 0.94), oklch(50% 0.08 180 / 0.94)); --rhcm-sidebar-active-bar: var(--prim-brand-primary); --rhcm-sidebar-active-shadow: 0 10px 22px -8px oklch(50% 0.08 180 / 0.55), inset 0 1px 0 rgba(255,255,255,0.55); --rhcm-sidebar-item-radius: var(--prim-radius-lg); --rhcm-sidebar-width-collapsed: 68px; --rhcm-sidebar-width-expanded: 250px; /* ── TopBar ── */ --rhcm-topbar-bg: var(--rhcm-glass-bg); --rhcm-topbar-blur: var(--rhcm-glass-blur); --rhcm-topbar-border: var(--rhcm-glass-border); --rhcm-topbar-shadow: var(--rhcm-glass-shadow); /* ── Table ── */ --rhcm-table-head-bg: rgba(255, 255, 255, 0.55); --rhcm-table-head-border: oklch(60% 0.10 180 / 0.18); --rhcm-table-row-bg: rgba(255, 255, 255, 0.62); --rhcm-table-row-border: oklch(60% 0.10 180 / 0.10); --rhcm-table-row-hover-bg: rgba(255, 255, 255, 0.82); /* ── Status Pills ── */ --rhcm-pill-active-bg: rgba(204, 240, 226, 0.92); --rhcm-pill-active-color: #0d5240; --rhcm-pill-active-dot: #15a37a; --rhcm-pill-leave-bg: rgba(255, 232, 195, 0.92); --rhcm-pill-leave-color: #7a4a08; --rhcm-pill-leave-dot: #d68a17; --rhcm-pill-passive-bg: rgba(220, 232, 240, 0.92); --rhcm-pill-passive-color: #39556a; --rhcm-pill-passive-dot: #5d7a92; /* ── Focus Ring ── */ --rhcm-focus-ring: 2px solid var(--prim-brand-primary); --rhcm-focus-ring-offset: 2px; --rhcm-focus-ring-radius: 10px; /* ── Overlay / Scrim ── */ --rhcm-scrim-bg: color-mix(in oklab, var(--prim-ink) 30%, transparent); --rhcm-scrim-blur: 2px; --rhcm-overlay-z: 140px; /* ── Spatial Z-layers ── */ --rhcm-z-sidebar: -30px; --rhcm-z-topbar: -15px; --rhcm-z-kpi: 25px; --rhcm-z-filter: 40px; --rhcm-z-table: 60px; --rhcm-z-overlay: 140px; } } /* end @supports (color: oklch(0 0 0)) */ /* ====================================================================== RAPID-UI-147 — DARK MODE KATMANI (demo değer-bazlı set — konsolide) ---------------------------------------------------------------------- Demo flat-clean dark seti: page #0f1117, card #1a1f2e, subtle #1e2535, border #ffffff1a, marka #2dbfaf. Layer 2 + Layer 3 component token'ları tek blokta toplandı (çift-bakım yok). Konum: build-script marker'ının (DS-002.1) DIŞINDA → script bu bloğa dokunmaz. ====================================================================== */ .dark { /* ── Layer 2 — semantic surface (dark — demo değer-bazlı) ── */ /* page: #0f1117 → index.css .dark'ta --rhcm-paper olarak tanımlı */ --rhcm-bg-card-opaque: #1a1f2e; --rhcm-bg-muted: #1e2535; --rhcm-bg-subtle: #1e2535; --rhcm-border: rgba(255,255,255,.10); --rhcm-border-hover: rgba(255,255,255,.18); --rhcm-text-muted: #94a3b8; /* ── Layer 2 — primary opens up in dark ── */ --rhcm-primary: #2dbfaf; /* ── Layer 3 — glass (dark: şeffaf — login/welcome/GlassCard kullanır) ── */ --rhcm-glass-bg: color-mix(in oklab, var(--rhcm-paper) 72%, transparent); --rhcm-glass-bg-strong: color-mix(in oklab, var(--rhcm-paper) 90%, transparent); --rhcm-glass-bg-soft: color-mix(in oklab, var(--rhcm-paper) 55%, transparent); --rhcm-glass-border: 1px solid rgba(255,255,255,.14); --rhcm-glass-border-strong: 1px solid rgba(255,255,255,.22); --rhcm-glass-shine: inset 0 1px 0 rgba(255,255,255,.08); --rhcm-glass-shine-strong: inset 0 1px 0 rgba(255,255,255,.12); /* ── Layer 3 — card / popover / input (dark — flat-clean opaque) ── */ --rhcm-card-bg: #1a1f2e; --rhcm-card-border: 1px solid rgba(255,255,255,.10); --rhcm-card-shadow: none; --rhcm-popover-bg: #1e2535; --rhcm-popover-border: rgba(255,255,255,.14); --rhcm-input-bg: #1a1f2e; --rhcm-input-border: rgba(255,255,255,.14); /* ── Layer 3 — table (dark) ── */ --rhcm-table-head-bg: #1e2535; --rhcm-table-header-bg: #1e2535; --rhcm-table-row-bg: #1a1f2e; --rhcm-table-row-hover-bg: #232a3b; --rhcm-table-row-stripe-bg: #1a1f2e; /* ── Layer 3 — sidebar (dark — opaque) ── */ --rhcm-sidebar-bg: #1a1f2e; --rhcm-sidebar-border: rgba(255,255,255,.10); --rhcm-sidebar-blur: none; --rhcm-sidebar-item-hover-bg: #1e2535; --rhcm-sidebar-active-bg: linear-gradient(135deg, color-mix(in oklab, #2dbfaf 28%, transparent), color-mix(in oklab, #2dbfaf 18%, transparent)); /* ── Layer 3 — topbar + chip (dark) ── */ --rhcm-topbar-bg: rgba(15,17,23,.85); --rhcm-topbar-blur: 12px; --rhcm-topbar-border: 1px solid rgba(255,255,255,.10); --rhcm-chip-bg: #1e2535; /* ── Layer 3 — shadow (dark) ── */ --rhcm-shadow-popup: 0 12px 32px -12px rgba(0,0,0,.50), 0 2px 6px -2px rgba(0,0,0,.30); /* ── Layer 3 — button primary (dark — opened marka rengi) ── */ --rhcm-btn-primary-bg: #2dbfaf; --rhcm-btn-primary-shadow: rgba(45,191,175,.35) 0 4px 12px -4px; /* ── Layer 2 — durum renkleri (dark — demo açılmış set) ── */ --rhcm-success: #22c55e; --rhcm-info: #38bdf8; } /* ====================================================================== RAPID-UI-158 D0 — CANVAS MESH RESTORED (Kubilay direktifi 2026-07-07) Projenin en baştaki renkli yapısı geri: beyaz (paper) üstüne 6-blob canvas mesh. RAPID-DS-001'de vardı, RAPID-UI-147 flat-clean'de kaldırılmıştı; O-1 ile geri (UI-147 revizyonu). SABİT (drift animasyonu YOK — Kubilay tercihi; dikkat dağıtmaz, reduced-motion ile tutarlı). Okunabilirlik sözleşmesi: içerik yüzeyleri (kart/tablo/sidebar/header/popover) OPAK token'larla mesh'i örter. Tablo hücreleri/satırları şeffaf BIRAKILMAZ — aksi halde mesh üstünde veri okunmaz (Kubilay bulgusu). Kök AppLayout zemini şeffaf → mesh main boşluklarında görünür. ====================================================================== */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(45% 35% at 5% 5%, var(--blob-teal-deep, #d0ede9) 0%, transparent 60%), radial-gradient(72% 58% at 95% 10%, var(--blob-peach, #f2d9c0) 0%, transparent 75%), radial-gradient(68% 58% at 10% 95%, var(--blob-gold, #f0e3b0) 0%, transparent 74%), radial-gradient(38% 32% at 95% 90%, var(--blob-teal-light, #d4f0ec) 0%, transparent 58%), radial-gradient(45% 38% at 70% 30%, var(--blob-steel, #cad5e2) 0%, transparent 75%), radial-gradient(32% 26% at 30% 70%, var(--blob-amber, #f5dfc0) 0%, transparent 72%), var(--rhcm-paper, #f9fdfd); background-size: 115% 115%; } /* Dark: aynı köşe kompozisyonu, koyu paper'a karışmış düşük-yoğunluk (okunabilirlik önce) */ :root.dark body::before { background: radial-gradient(45% 35% at 5% 5%, color-mix(in oklch, var(--rhcm-primary) 22%, var(--rhcm-paper)) 0%, transparent 60%), radial-gradient(72% 58% at 95% 10%, color-mix(in oklch, var(--rhcm-warning) 16%, var(--rhcm-paper)) 0%, transparent 75%), radial-gradient(68% 58% at 10% 95%, color-mix(in oklch, var(--rhcm-warning) 12%, var(--rhcm-paper)) 0%, transparent 74%), radial-gradient(38% 32% at 95% 90%, color-mix(in oklch, var(--rhcm-primary) 18%, var(--rhcm-paper)) 0%, transparent 58%), var(--rhcm-paper); background-size: 115% 115%; } /* ── RAPID-UI-163 (Kubilay canlı, dark): DÜZ yüzey — parlama/beyazlık kaldır ── Dark'ta cam yüzeylerin (statcard/topbar/sidebar/filtre çerçevesi) köşe/kenarındaki beyaz iç-parıltı (glass-shine) + kabartma gölge hoş durmuyordu ("daha düz dursun"). :root.dark specificity (0,2,0) ile YAZILIR — çünkü tema runtime'ı glass-shine'ı DÜZ `:root { … }` (0,1,0) olarak enjekte edip ışık-değerini geri getiriyordu (155/161 dersi: runtime :root enjeksiyonu .dark'ı ezer → :root.dark ile aş). glass-bg-strong'a DOKUNULMAZ. Light TEMA DEĞİŞMEZ (yalnız :root.dark). */ :root.dark { --rhcm-glass-shine: none; --rhcm-glass-shine-strong: none; /* Emboss = shine + katmanlı gölge; shine=none olunca zincir geçersiz olur → dark için DÜZ tek yumuşak gölge (parıltısız/kabartmasız). Dark'ta --rhcm-ink AÇIK olduğundan gölge SİYAH tabanlı (color-mix ink kullanılırsa parlama yapar). */ --rhcm-surface-glass-emboss: 0 1px 2px rgba(0,0,0,.28); } @keyframes rhcm-mesh-drift { 0% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 70% 30%, 30% 70%, 0% 0%; } 100% { background-position: 3% -2%, 97% 3%, -2% 97%, 98% 98%, 67% 33%, 32% 68%, 0% 0%; } } /* ====================================================================== ACCESSIBILITY FALLBACKS ====================================================================== */ /* Reduced motion — kill all animation and transition */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } body::before, body::after { animation: none !important; } } /* Reduced transparency — replace glass with opaque fallbacks */ @media (prefers-reduced-transparency: reduce) { :root { --rhcm-glass-bg: rgba(255, 255, 255, 0.97); --rhcm-glass-bg-strong: rgba(255, 255, 255, 0.99); --rhcm-glass-bg-soft: rgba(255, 255, 255, 0.95); } body { background: var(--rhcm-paper, #faf8f5) !important; } } /* No backdrop-filter support — solid backgrounds */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --rhcm-glass-bg: rgba(255, 255, 255, 0.96); --rhcm-glass-bg-strong: rgba(255, 255, 255, 0.98); --rhcm-glass-bg-soft: rgba(255, 255, 255, 0.94); } } /* ====================================================================== DS-002.1 COMPONENT TOKEN LAYER Generated by scripts/build-theme-css.ts — do not edit manually. Derives from semantic --rhcm-* tokens. Override at :root level. ====================================================================== */ :root { --rhcm-btn-primary-bg: var(--rhcm-primary); --rhcm-btn-primary-fg: oklch(98% 0.01 180); --rhcm-btn-primary-hover: color-mix(in oklch, var(--rhcm-primary), oklch(0% 0 0) 8%); --rhcm-btn-secondary-bg: var(--rhcm-paper); --rhcm-btn-secondary-fg: var(--rhcm-ink); --rhcm-btn-ghost-hover-bg: color-mix(in oklch, var(--rhcm-paper), oklch(0% 0 0) 2%); --rhcm-btn-destructive-bg: color-mix(in srgb, var(--rhcm-danger) 10%, transparent); --rhcm-input-bg: color-mix(in oklch, var(--rhcm-paper), var(--rhcm-primary) 3%); --rhcm-input-border: var(--rhcm-border); --rhcm-input-focus-ring: color-mix(in srgb, var(--rhcm-primary) 30%, transparent); --rhcm-input-placeholder-fg: var(--rhcm-ink-mute); --rhcm-card-bg: var(--rhcm-bg-card-opaque); --rhcm-card-border: 1px solid var(--rhcm-border); --rhcm-card-shadow: none; --rhcm-card-z: var(--rhcm-z-mid, -15px); --rhcm-popover-bg: var(--rhcm-bg-card-opaque); --rhcm-surface-glass: color-mix(in srgb, var(--rhcm-bg-card-opaque) 70%, transparent); --rhcm-surface-glass-emboss: var(--rhcm-glass-shine), 0 1px 2px color-mix(in oklab, var(--rhcm-ink) 6%, transparent), 0 10px 24px -8px color-mix(in oklab, var(--rhcm-ink) 12%, transparent), 0 24px 48px -16px color-mix(in oklab, var(--rhcm-ink) 10%, transparent); --rhcm-sidebar-bg: var(--rhcm-bg-card-opaque); --rhcm-sidebar-blur: none; --rhcm-sidebar-z: var(--rhcm-z-sidebar, -30px); --rhcm-sidebar-item-hover-bg: color-mix(in oklch, var(--rhcm-paper), oklch(0% 0 0) 2%); --rhcm-sidebar-item-active-bg: var(--rhcm-gradient-primary); --rhcm-sidebar-item-active-fg: var(--rhcm-text-on-primary); --rhcm-sidebar-item-active-shadow: var(--rhcm-btn-primary-shadow, 0 8px 18px -8px oklch(50% 0.08 180 / 0.45)); --rhcm-topbar-bg: var(--rhcm-bg-translucent); --rhcm-topbar-blur: 12px; --rhcm-topbar-z: var(--rhcm-z-topbar, -15px); --rhcm-table-row-hover-bg: var(--rhcm-bg-subtle); --rhcm-table-header-bg: var(--rhcm-bg-subtle); --rhcm-table-row-stripe-bg: var(--rhcm-bg-card-opaque); --rhcm-chip-bg: color-mix(in srgb, var(--rhcm-accent) 60%, transparent); --rhcm-chip-fg: var(--rhcm-ink); --rhcm-overlay-bg: rgba(0,0,0,0.4); --rhcm-aurora-blob-opacity: var(--rhcm-glass-shine-opacity, 0.85); --rhcm-sparkle-accent: var(--rhcm-accent); }