/* ========================================================================== ARIS — TASARIM SİSTEMİ (Design Tokens) Tüm renk/font/boşluk değerleri burada. Panelden gelen override'lar içinde :root seviyesinde bu değerlerin üzerine yazılır. ========================================================================== */ :root { /* --- Renk paleti: monokrom siyah → gri → beyaz --- */ --c-black: #0a0a0b; /* en koyu zemin */ --c-ink: #111827; /* metin / koyu zemin */ --c-ink-2: #1f2937; --c-graphite: #374151; --c-gray: #6b7280; --c-gray-2: #9ca3af; --c-line: #e5e7eb; /* ince çizgi/sınır */ --c-mist: #f3f4f6; /* açık zemin */ --c-ivory: #f7f4f1; /* fildişi — açık bölüm zemini (beyazdan yumuşak) */ --c-paper: #f9fafb; /* neredeyse beyaz */ --c-white: #ffffff; /* --- AKSAN: ALTIN (siyah + altın — lüks imza) --- */ --c-gold: #c9a96a; /* ana altın */ --c-gold-deep: #a8842f; /* koyu altın (gradyan/derinlik) */ --c-gold-soft: #e7d3a8; /* açık altın */ --c-gold-bright: #f3e7c6; /* en açık şampanya parıltısı */ --c-gold-ink: #846a2c; /* açık zeminde okunur altın metin (AA) */ --c-gold-grad: linear-gradient(135deg, #f3e7c6 0%, #d9b978 38%, #c9a96a 60%, #a8842f 100%); /* metalik altın */ /* Anlamsal aksan → altın (main.css bu değişkenleri kullanır) */ --c-accent: var(--c-gold-bright); --c-accent-deep: var(--c-gold); --c-accent-strong:var(--c-gold-deep); --c-accent-ink: var(--c-gold-ink); /* --- Pudra pembe: çok ince, isteğe bağlı feminen dokunuş --- */ --c-blush: #fee3ec; --c-blush-deep: #f6a8c4; /* --- Anlamsal --- */ --c-bg: var(--c-white); --c-bg-alt: var(--c-paper); --c-bg-dark: var(--c-ink); --c-text: var(--c-ink); --c-text-soft: var(--c-gray); --c-text-invert: var(--c-paper); --c-border: var(--c-line); /* --- Tipografi --- */ --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --font-script: "Marcellus", "Cormorant Garamond", Georgia, serif; /* zarif logo/başlık aksanı */ /* Akıcı tip ölçeği (clamp ile responsive) */ --fs-hero: clamp(2.6rem, 6vw, 5.5rem); --fs-h1: clamp(2.2rem, 4.6vw, 3.75rem); --fs-h2: clamp(1.8rem, 3.4vw, 2.85rem); --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem); --fs-h4: clamp(1.1rem, 1.6vw, 1.3rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.78rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.7; --ls-tight: -0.02em; --ls-wide: 0.18em; /* eyebrow / majuskül başlık harf aralığı */ --ls-wider: 0.32em; /* --- Boşluk sistemi (8px tabanlı) --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4.5rem, 9vw, 9rem); /* bölüm dikey boşluğu (lüks nefes) */ --container: 1280px; --container-narrow: 880px; --gutter: clamp(1.25rem, 4vw, 3rem); /* --- Köşe & gölge --- */ --radius-xs: 4px; --radius: 10px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(10,10,11,.06), 0 1px 3px rgba(10,10,11,.08); --shadow: 0 10px 30px -12px rgba(10,10,11,.22); --shadow-lg: 0 30px 60px -20px rgba(10,10,11,.35); --shadow-gold: 0 10px 40px -12px rgba(201,169,106,.4), 0 2px 8px -2px rgba(168,132,47,.25); --shadow-gold-sm: 0 4px 16px -4px rgba(168,132,47,.35); /* --- Geçişler --- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --t-fast: .2s var(--ease); --t: .4s var(--ease); --t-slow: .7s var(--ease-out); /* --- Katmanlar --- */ --z-header: 100; --z-overlay: 200; --z-menu: 300; --z-float: 400; --z-cursor: 9999; /* --- İmza desen: siyah-beyaz eşkenar dörtgen (geometrik zemin) --- */ --pattern-diamond: repeating-conic-gradient(var(--c-ink) 0% 25%, var(--c-white) 0% 50%) 0 0 / 28px 28px; /* --- Calacatta mermer hissi için ince damar gradyanı --- */ --marble-vein: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.04) 100%); } /* Koyu bölümler için anlamsal tema bağlamı */ .is-dark { --c-bg: var(--c-black); /* Bölüm 18: siyah — ink değil, tam koyu */ --c-bg-alt: var(--c-ink); --c-text: var(--c-paper); --c-text-soft: var(--c-gray-2); --c-border: rgba(255,255,255,.10); }