/* ============================================================================ HOMI — Tasarım token'ları (design tokens) + temel eleman stilleri ---------------------------------------------------------------------------- TÜM stiller bu dosyaya bağlıdır: en önce yüklenir (handle 'homi-tokens'). Semantik renkler light (:root) / dark ([data-theme="dark"]) ile değişir. Marka sabitleri (--navy/--ink/--gold/--muted) iki modda da aynıdır — gece/ hero bölümleri için. Tipografi ölçeği, spacing, radius, --ease, --maxw burada. Renk kodunu bileşenlere GÖMME; hep bu değişkenleri kullan. ==========================================================================*/ /* ── Semantik + ölçek token'ları — LIGHT (varsayılan) ─────────────────── */ :root { /* Yüzeyler / zeminler */ --bg: #f6f3ec; --bg-alt: #efeae0; --surface: #ffffff; --surface-2: #f4f1ea; /* Metin */ --text: #20243a; --text-soft: #5b6070; --heading: #0b0f26; /* Çizgi / gölge */ --border: rgba(11, 15, 38, .12); --shadow: rgba(11, 15, 38, .14); /* Vurgu (altın) — iki modda da aynı ton */ --accent: #f0c479; --accent-strong: #d9a24a; /* daha derin altın: hover/emphasis */ --on-accent: #0b0f26; /* accent üstündeki yazı */ /* Bağlantı */ --link: #0b0f26; --link-hover: #000000; /* ── Marka SABİTLERİ (değişmez; gece/hero bölümleri) ── */ --navy: #0b0f26; --ink: #f1eee6; --gold: #f0c479; --muted: rgba(241, 238, 230, .62); /* gece metin (navy üstü yumuşak) */ /* ── Tipografi ── --font-head / --font-body Customizer'dan gelen --font-serif/--font-sans'e köprülenir; onlar tanımlı değilse (ör. blok editör) aşağıdaki yığın kullanılır. */ /* Marka fontu: Futura (Apple cihazlarında sistem fontu). Futura ücretsiz bir web fontu OLMADIĞI için gömülemez; olmayan cihazlarda Century Gothic / Avenir gibi geometrik yedeklere düşer. */ --font-brand: 'Futura', 'Futura PT', 'Century Gothic', 'Avenir Next', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif; --font-head: var(--font-brand); --font-body: var(--font-brand); /* Akışkan modüler ölçek (min → max, ~320px..1240px) */ --step--1: clamp(0.79rem, 0.77rem + 0.11vw, 0.85rem); --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --step-1: clamp(1.20rem, 1.14rem + 0.30vw, 1.40rem); --step-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.85rem); --step-3: clamp(1.73rem, 1.55rem + 0.90vw, 2.45rem); --step-4: clamp(2.07rem, 1.78rem + 1.45vw, 3.20rem); --step-5: clamp(2.49rem, 2.03rem + 2.30vw, 4.20rem); --step-6: clamp(2.99rem, 2.30rem + 3.45vw, 5.50rem); --fs-base: var(--step-0); --lh-tight: 1.08; --lh-normal: 1.6; /* ── Uzay ölçeği ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: clamp(2.5rem, 1.9rem + 3vw, 4rem); /* 40–64px */ --space-8: clamp(3.5rem, 2.4rem + 5.5vw, 6.5rem); /* 56–104px */ /* ── Şekil / hareket / ölçü ── */ --radius: 0.75rem; /* 12px — kart/panel */ --radius-lg: 1.25rem; /* 20px — büyük panel */ --radius-pill: 999px; /* hap/pill */ --ease: cubic-bezier(.22, 1, .36, 1); --maxw: 1200px; /* içerik max genişliği (theme.json contentSize ile eş) */ } /* ── DARK — açık toggle () ────────────────────── */ [data-theme="dark"] { --bg: #0b0f26; --bg-alt: #0e1330; --surface: #141a3a; --surface-2: #171d40; --text: #e9eaf2; --text-soft: rgba(233, 234, 242, .64); --heading: #f4f2ea; --border: rgba(255, 255, 255, .10); --shadow: rgba(0, 0, 0, .5); --accent: #f0c479; --accent-strong: #f6cd85; /* koyu zeminde biraz daha parlak */ --on-accent: #0b0f26; --link: #f1eee6; --link-hover: #ffffff; } /* (Dark mode kaldırıldı — otomatik sistem-koyu (navy) uygulaması yok. Arka plan artık Elementor bölümünden ya da her bloğun "Arka plan" kontrolünden yönetilir. İçerik blokları varsayılan olarak ŞEFFAFtır; bkz. elementor.css.) */ /* ── Temel reset + eleman stilleri ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Yumuşak mod geçişi (light ⇄ dark) */ transition: background .3s var(--ease), color .3s var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--heading); line-height: var(--lh-tight); text-wrap: balance; } a { color: var(--link); transition: color .25s var(--ease); } a:hover, a:focus { color: var(--link-hover); } /* Görseller taşmasın (yatay taşma yok) */ img, svg, video, canvas { max-width: 100%; height: auto; } /* Görünür klavye odağı (erişilebilirlik) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Seçim rengi */ ::selection { background: var(--accent); color: var(--on-accent); } /* ── prefers-reduced-motion: geçiş/animasyonları yumuşat ─────────────── Yalnızca süreleri sıfırlar; transform'a DOKUNMAZ (imza JS scroll motorları inline transform ile çalışır, onları bozmayalım). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } body { transition: none; } } /* HOMI Elementor Kiti: bölüm CSS'lerinin (hero/process/sections/intro/hpro) beklediği font takma adları — tema inline CSS'i olmadan doğru tipografi. */ :root{ --font-serif: var(--font-brand, 'Futura', 'Century Gothic', 'Avenir Next', 'Trebuchet MS', Arial, sans-serif); --font-sans: var(--font-brand, 'Futura', 'Century Gothic', 'Avenir Next', 'Trebuchet MS', Arial, sans-serif); }