/* ============================================================================= I-ORBITX — Design Tokens (TEK KAYNAK / single source of truth) ----------------------------------------------------------------------------- Tüm renk, boşluk, radius, buton şekli ve gölge kararları BURADA tanımlanır. Web sitesi (base_public.html) ve uygulama (base_app.html) bu token'lardan beslenir. Hangi hazır component kütüphanesinden parça alınırsa alınsın, onun renkleri buradaki token'lara uydurulur (bkz. docs/DesignSystem.md). Marka renkleri i-orbitx.com'un Elementor global kit'inden alınmıştır: accent #3957FF (ana marka mavisi) secondary #4054B2 dark #141414 (metin/koyu) dark-bg #0B0D16 (koyu zemin) Açık + koyu mod desteklenir: koyu mod, ile veya işletim sistemi tercihi (prefers-color-scheme) ile devreye girer. ============================================================================= */ :root { /* --- Marka çekirdek renkleri (moda göre değişmez ham değerler) --- */ --brand-blue: #3957ff; /* ana marka mavisi */ --brand-blue-600: #2e46cc; /* hover/koyu varyant */ --brand-blue-400: #6478ff; /* açık varyant */ --brand-indigo: #4054b2; /* ikincil mavi */ --brand-sky: #6ec1e4; /* yardımcı açık mavi */ --brand-ink: #141414; /* marka koyu (metin) */ --brand-dark-bg: #0b0d16; /* marka koyu zemin */ /* --- Geri bildirim (durum) renkleri --- */ --color-success: #23a455; --color-warning: #fcb900; --color-danger: #cf2e2e; --color-info: var(--brand-sky); /* --- Spacing ölçeği --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* --- Radius (buton/kart/girdi şekli) --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-btn: var(--radius-md); --radius-pill: 9999px; /* --- Tipografi --- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-base: 1rem; --line-base: 1.5; --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; /* --- Uygulama (app/dashboard) font ölçeği — AWS Console / Cloudscape --- */ /* Veri-yoğun panel: web sitesi gövdesinden (16px) küçük, tabloya daha çok satır sığar. Cloudscape: gövde/tablo 14px/20px, küçük 12px/16px (min 12px). Bu ölçek YALNIZCA app.css'te kullanılır; web sitesi (website.css) etkilenmez. */ --app-font-base: 14px; /* gövde + tablo hücresi */ --app-line-base: 20px; --app-font-sm: 12px; /* ikincil/hint/küçük */ --app-line-sm: 16px; --app-h1: 24px; --app-h2: 20px; --app-h3: 18px; /* ========================================================================= ANLAMLI (semantic) token'lar — AÇIK MOD varsayılan. Component'ler ve app.css yalnızca bunları kullanır, ham renkleri değil. ========================================================================= */ --color-primary: var(--brand-blue); --color-primary-hover: var(--brand-blue-600); --color-on-primary: #ffffff; /* mavi üstündeki metin */ /* AÇIK MOD DEĞERLERİ — TEK KAYNAK. Aşağıdaki `--light-*` alias'ları koyu modda DEĞİŞMEZ (bu blok yalnız :root'ta, media query dışında tanımlıdır). Vitrin (.wsite-surface) light-only olduğu için semantic token'larını bunlardan geri alır — sabit hex KOPYALANMAZ, tek kaynak burasıdır. */ --light-bg: #ffffff; --light-surface: #f7f8fb; --light-surface-2: #eef1f6; --light-text: var(--brand-ink); --light-text-body: #3f4754; --light-text-muted: #54595f; --light-text-subtle: #7a7a7a; --light-border: #d9dee8; --light-link: var(--brand-blue); --color-bg: var(--light-bg); /* sayfa zemini */ --color-surface: var(--light-surface); /* kart/panel zemini */ --color-surface-2: var(--light-surface-2); /* ikinci kademe panel */ --color-text: var(--light-text); /* ana metin / başlık (near-black, keskin) */ --color-text-body: var(--light-text-body); /* gövde paragraf (Stripe tarzı orta-koyu mavimsi gri: okunur + yumuşak/profesyonel) */ --color-text-muted: var(--light-text-muted); /* ikincil metin */ --color-text-subtle: var(--light-text-subtle); /* en silik metin */ --color-border: var(--light-border); /* çizgi/kenarlık */ --color-link: var(--light-link); /* --- Gölgeler --- */ --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06); --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.10); --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.14); /* ========================================================================= WEBSITE — "DENETİM RAPORU ESTETİĞİ" KATMANI (--w-*) ------------------------------------------------------------------------- Faz C kimliği (bkz. .claude/skills/iorbitx-design/SKILL.md — bağlayıcı anayasa; DesignSystem.md "Kimlik Yön Kararı"nın sayısal hali). Bu katman YALNIZCA website.css tarafından kullanılır; yukarıdaki app/admin token'ları (--brand-blue, --color-primary…) DOKUNULMADAN kalır → app + backoffice + admin bu turda kırılmaz (app/backoffice uyumu ayrı adım). Açık/koyu mod YOK: website tek yüzey (açık zemin hâkim + nadir lacivert bant). Palet §1 ile SINIRLI — indigo/mavi/mor/gradient bu katmanda YASAK. ========================================================================= */ /* ZEMİNLER — açık zemin hâkim */ --w-canvas: #FFFFFF; /* ana kağıt — sayfanın varsayılan zemini */ --w-paper: #F6F5F2; /* ılık kırık beyaz — kart plakası, footer bandı, ritim bölümü */ --w-paper-deep: #ECEAE4; /* nadir: iki açık bölüm bitişikse ayrım bandı */ --w-navy: #1F2A44; /* koyu bant + başlık rengi */ --w-navy-deep: #19223A; /* koyu bant içinde ikinci yüzey (kart/çerçeve) */ /* MÜREKKEP */ --w-ink: #1F2A44; /* başlık + gövde (saf siyah YOK) */ --w-ink-muted: #57607A; /* ikincil metin — lacivert ailesinden gri */ --w-on-dark: #FFFFFF; --w-on-dark-muted: #AEB6C8; /* VURGU — TEK RENK (kırmızı) */ /* KARAR 2026-07-22 (D3): primary buton ZEMİNİ --w-accent-down'a alındı — #E8262D üstünde beyaz metin 4.42:1 ölçülmüştü (AA sınırı 4.5 altında). #C81E24 = 5.73:1 (geçer). --w-accent imza rengi olarak kicker/aktif durum/ince çubuklarda AYNEN kalır (metin taşımaz, kontrast kuralı dışı). */ --w-accent: #E8262D; /* kicker şeridi, aktif durum, imza çubukları */ --w-accent-down: #C81E24; /* primary CTA zemini — beyaz metin 5.73:1 */ --w-accent-pressed: #A81319; /* CTA hover/active — beyaz metin 7.58:1 */ /* ÇİZGİLER */ --w-hairline: #E4E2DC; /* açık zeminde 1px */ --w-hairline-dark: #33405E; /* koyu zeminde 1px */ /* TİPOGRAFİ (website) — 700/300 kontrastı editoryal imzadır */ --w-font-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* başlıklar, SG 700 */ --w-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Mono — YALNIZ makine-adı rozetleri (Home matrisi teknoloji sütunu). Gövde, başlık ve UI metninde kullanılmaz; self-host YOK (sistem yığını yeterli, harici istek açmaz — Roadmap "hiçbir yüzey üçüncü tarafa istek atmıyor"). */ --w-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* GÖLGE — sistemdeki TEK drop-shadow (yalnız rapor/ürün görseli) */ --w-shadow-report: 0 24px 60px -24px rgba(31, 42, 68, 0.35); /* MOTION — az ama bilinçli (bkz. skill §7) */ --w-ease: cubic-bezier(.2,.6,.2,1); --w-reveal-dur: 240ms; } /* ============================================================================= KOYU MOD — iki yolla devreye girer: 1) Açık tercih: 2) OS tercihi: prefers-color-scheme: dark (data-theme verilmemişse) Yalnızca semantic token'lar override edilir; ham marka renkleri sabit kalır. ============================================================================= */ :root[data-theme="dark"] { --color-primary: var(--brand-blue); --color-primary-hover: var(--brand-blue-400); --color-on-primary: #ffffff; --color-bg: var(--brand-dark-bg); --color-surface: #141826; --color-surface-2: #1c2233; --color-text: #e8edf5; --color-text-muted: #aab3c5; --color-text-subtle: #7e879b; --color-border: #2a3147; --color-link: var(--brand-blue-400); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary-hover: var(--brand-blue-400); --color-bg: var(--brand-dark-bg); --color-surface: #141826; --color-surface-2: #1c2233; --color-text: #e8edf5; --color-text-muted: #aab3c5; --color-text-subtle: #7e879b; --color-border: #2a3147; --color-link: var(--brand-blue-400); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } } /* ============================================================================= VİTRİN LIGHT-ONLY (KARAR 2026-08-06, Murat) ----------------------------------------------------------------------------- Public site (.wsite-surface) marka kimliği SABİTTİR: beyaz header, navy hero. Vitrin koyu moda GİRMEZ. Uygulama/admin (base_app — .wsite-surface TAŞIMAZ) koyu modu bilinçli destekler ve bu bloktan ETKİLENMEZ. Sorun (ölçüldü 2026-08-06): chrome.css'in header/footer/mobil-panel kuralları genel `--color-*` token'larını kullanıyor; koyu modda bunlar koyuya dönünce vitrin bozuluyordu (mobil panel #0b0d16 zemin, CTA neredeyse görünmez). website.css `--w-*` sabit token'larını kullandığı için etkilenmiyordu — bu yüzden hata YALNIZ chrome tabanlı yüzeylerde çıkıyordu. Çözüm: koyu mod devredeyken vitrin kapsamında semantic token'lar `--light-*` TEK KAYNAĞINDAN geri alınır (sabit hex kopyalanmaz). Her iki koyu yol da kapatılır: OS tercihi (media query) + açık tercih (data-theme="dark"). ============================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wsite-surface { --color-bg: var(--light-bg); --color-surface: var(--light-surface); --color-surface-2: var(--light-surface-2); --color-text: var(--light-text); --color-text-body: var(--light-text-body); --color-text-muted: var(--light-text-muted); --color-text-subtle: var(--light-text-subtle); --color-border: var(--light-border); --color-link: var(--light-link); } } :root[data-theme="dark"] .wsite-surface { --color-bg: var(--light-bg); --color-surface: var(--light-surface); --color-surface-2: var(--light-surface-2); --color-text: var(--light-text); --color-text-body: var(--light-text-body); --color-text-muted: var(--light-text-muted); --color-text-subtle: var(--light-text-subtle); --color-border: var(--light-border); --color-link: var(--light-link); } /* body zemini: `.wsite-surface` sayfanın TAMAMINI kaplar (ölçüldü: yükseklik == document yüksekliği), yani koyu body normalde GÖRÜNMEZ — ama overscroll (rubber-band) sırasında sızar ve tarayıcı arayüzüne koyu tema sinyali verir. Vitrin light-only olduğu için body de açık kalır. `:has()` ile KAPSAM: yalnız içinde .wsite-surface OLAN body — base_app yüzeylerinin body'si bu seçiciye uymaz, koyu modu aynen korur. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:has(> .wsite-surface) { background: var(--light-bg); } } :root[data-theme="dark"] body:has(> .wsite-surface) { background: var(--light-bg); }