/* ============================================================ INCI AI — BASE.CSS Marketing Site Ortak CSS Değişkenleri & Reset Versiyon: 1.0 | 2 Haziran 2026 KULLANIM: Tüm marketing sayfalarında içine ekle: BU DOSYA: Değişkenler, reset, body, animasyonlar, utilities DOKUNMA: Sayfa-özel stiller buraya gelmez. ============================================================ */ /* ── 1. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── 2. CSS DEĞİŞKENLERİ — DARK (varsayılan) ─────────────── */ :root { /* Renkler — Green (g1, varsayılan) */ --c-bg: #0e1812; --c-primary: #2F453A; --c-primary-2: #3d5e4e; --c-accent: #5a9e78; --c-accent-glow: rgba(90, 158, 120, 0.3); --c-text: #e8f0ec; --c-text-muted: #a0b8aa; --c-surface: rgba(255, 255, 255, 0.05); --c-surface-2: rgba(255, 255, 255, 0.09); --c-border: rgba(255, 255, 255, 0.08); --c-danger: #e05050; --c-warning: #d4943a; /* Tipografi */ --font-h: 'Montserrat', sans-serif; --font-b: 'DM Sans', sans-serif; /* Layout */ --content-w: 90%; /* İçerik genişliği */ --content-max: 1200px; /* Maksimum genişlik */ --nav-h: 64px; /* Nav yüksekliği */ --r: 12px; /* Border radius */ --r-lg: 20px; /* Border radius büyük */ /* Animasyon */ --t: 0.3s ease; } /* ── 3. LIGHT MODE ────────────────────────────────────────── */ [data-theme="light"] { --c-bg: #f0faf5; --c-text: #0f1f17; --c-text-muted: #2e4a3a; --c-surface: rgba(0, 0, 0, 0.05); --c-surface-2: rgba(0, 0, 0, 0.09); --c-border: rgba(0, 0, 0, 0.14); } /* ── 4. DİL RENK SİSTEMİ — DARK ──────────────────────────── */ /* TR = Yeşil (g1) — varsayılan, :root'ta tanımlı */ /* EN = Mavi (b1) */ [data-color="b1"] { --c-bg: #090f1c; --c-primary: #1F3A5F; --c-primary-2: #2a4e7f; --c-accent: #4a90d9; --c-accent-glow: rgba(74, 144, 217, 0.3); --c-text: #e8eef8; --c-text-muted: #a0b0c8; } /* DE = Sarı (y1) */ [data-color="y1"] { --c-bg: #120c04; --c-primary: #7A5020; --c-primary-2: #9a6a2a; --c-accent: #d4943a; --c-accent-glow: rgba(212, 148, 58, 0.3); --c-text: #f8f0e8; --c-text-muted: #c0a878; } /* FR = Kırmızı (r1) */ [data-color="r1"] { --c-bg: #130608; --c-primary: #7B2D3E; --c-primary-2: #9a3a4e; --c-accent: #d45068; --c-accent-glow: rgba(212, 80, 104, 0.3); --c-text: #f8e8ec; --c-text-muted: #c09098; } /* ── 5. DİL RENK SİSTEMİ — LIGHT ─────────────────────────── */ [data-color="b1"][data-theme="light"] { --c-bg: #eef3fc; --c-text: #071530; --c-text-muted: #1e3858; } [data-color="y1"][data-theme="light"] { --c-bg: #fdf5e8; --c-text: #1e1002; --c-text-muted: #5a3408; } [data-color="r1"][data-theme="light"] { --c-bg: #fceef1; --c-text: #1e0508; --c-text-muted: #5a1020; } /* ── 6. DARK MODE SURFACE OVERRIDE (her renk için) ────────── */ /* Surface değerleri dark'ta hep aynı kalır */ [data-theme="dark"][data-color="g1"] { --c-bg: #0e1812; --c-surface: rgba(255,255,255,0.05); } [data-theme="dark"][data-color="b1"] { --c-bg: #090f1c; --c-surface: rgba(255,255,255,0.05); } [data-theme="dark"][data-color="y1"] { --c-bg: #120c04; --c-surface: rgba(255,255,255,0.05); } [data-theme="dark"][data-color="r1"] { --c-bg: #130608; --c-surface: rgba(255,255,255,0.05); } /* ── 7. HTML & BODY ───────────────────────────────────────── */ html { scroll-behavior: smooth; /* overflow-x body'de kontrol edilir — html'de olursa sticky bozulur */ } body { font-family: var(--font-b); background: var(--c-bg); color: var(--c-text); font-size: 16px; line-height: 1.6; overflow-x: hidden; transition: background var(--t), color var(--t); } /* ── 8. ANİMASYONLAR ──────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes orbFloat { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28px,-18px) scale(1.06); } 66% { transform: translate(-18px,14px) scale(0.95); } } /* ── 9. UTILITY SINIFLARI ─────────────────────────────────── */ /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* İçerik container — tüm sayfalarda aynı */ .container { width: var(--content-w); max-width: var(--content-max); margin: 0 auto; padding: 0 24px; } /* Dar container — legal/text sayfalar için */ .container-narrow { width: var(--content-w); max-width: 860px; margin: 0 auto; padding: 0 24px; } /* Section varsayılan padding */ section { padding: 96px 0; } /* Orb (landing hero arka plan efekti) */ .orb-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: orbFloat 14s infinite; } .orb-1 { width:420px; height:420px; background:var(--c-accent); top:-120px; right:-100px; animation-delay:0s; } .orb-2 { width:300px; height:300px; background:var(--c-primary); bottom:-60px; left:-60px; animation-delay:-5s; } .orb-3 { width:220px; height:220px; background:var(--c-accent); top:50%; left:32%; animation-delay:-9s; } /* Section divider */ .section-divider { height: 1px; background: var(--c-border); } /* ── 10. ORTAK SECTION BAŞLIK STİLLERİ ───────────────────── */ .section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--c-accent); text-transform: uppercase; margin-bottom: 12px; } .section-title { font-family: var(--font-h); font-weight: 800; font-size: clamp(22px, 3.5vw, 40px); line-height: 1.2; margin-bottom: 16px; color: var(--c-text); } .section-sub { font-size: 16px; color: var(--c-text-muted); max-width: 560px; line-height: 1.6; margin-bottom: 48px; } /* ── 11. BUTONLAR ─────────────────────────────────────────── */ .btn-primary { display: inline-block; padding: 14px 32px; border-radius: 32px; background: var(--c-accent); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 15px; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 0 30px var(--c-accent-glow); transition: all var(--t); text-align: center; white-space: nowrap; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 40px var(--c-accent-glow); opacity: .92; } .btn-ghost { display: inline-block; padding: 14px 32px; border-radius: 32px; border: 1.5px solid var(--c-border); color: var(--c-text); font-family: var(--font-h); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; background: transparent; transition: all var(--t); text-align: center; white-space: nowrap; } .btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-accent); color: var(--c-accent); } [data-theme="light"] .btn-ghost { border-color: rgba(0,0,0,0.2); color: var(--c-text); } /* ── 12. MOBİL ────────────────────────────────────────────── */ @media (max-width: 768px) { .container, .container-narrow { padding: 0 16px; } section { padding: 64px 0; } }