/* ═══════════════════════════════════════════════════════════════════════════════ ████████╗██╗██╗ ██████╗ ███████╗ ██╗ ██╗ ██████╗ ███╗ ███╗███████╗ ╚══██╔══╝██║██║ ██╔══██╗██╔════╝ ██║ ██║██╔═══██╗████╗ ████║██╔════╝ ██║ ██║██║ ██████╔╝█████╗ ███████║██║ ██║██╔████╔██║█████╗ ██║ ██║██║ ██╔══██╗██╔══╝ ██╔══██║██║ ██║██║╚██╔╝██║██╔══╝ ██║ ██║███████╗██████╔╝███████╗ ██║ ██║╚██████╔╝██║ ╚═╝ ██║███████╗ ╚═╝ ╚═╝╚══════╝╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝ TILBE HOME — PREMIUM DESIGN TOKEN SYSTEM v4.0 ═══════════════════════════════════════════════════════════════════════════════ tilbehome.com | E-Ticaret Premium Tasarım Altyapısı ───────────────────────────────────────────────────── MİMARİ: 3 Katmanlı Token Yapısı ═════════════════════════════════ KATMAN 1 — PRIMITIVE TOKENS (Ham Palet) Her rengin 50-950 arası 13 tonu. Doğrudan kullanılmaz, semantic tokenlara referans verir. Örnek: --th-green-500: #14613A KATMAN 2 — SEMANTIC TOKENS (Anlam Katmanı) Renklerin amacını tanımlar. Tema değişikliğinde sadece bu katman güncellenir, tüm site otomatik değişir. Örnek: --th-color-primary: var(--th-green-500) KATMAN 3 — COMPONENT TOKENS (Bileşen Katmanı) Her UI bileşeninin kendi renk/boyut/aralık seti. Bileşen düzeyinde override kolaylığı sağlar. Örnek: --th-btn-primary-bg: var(--th-color-primary) ───────────────────────────────────────────────────── MARKA KİMLİĞİ ═════════════════ Primary : Orman Yeşili (#14613A) — Güven, doğallık, premium kalite Accent : Ateş Turuncusu (#F27A1A) — Enerji, CTA, dikkat çekici Bu ikili; Amazon'un güvenilirlik hissini (koyu + sakin) ve Trendyol'un enerji/aksiyonunu (turuncu CTA) birleştirir. Tilbe Home'un "ev sıcaklığı + profesyonel güven" vaadini renk diliyle ifade eder. ───────────────────────────────────────────────────── TOKEN ADLANDIRMA KURALI ═══════════════════════ Prefix: --th- (tilbe home) Primitive : --th-{renk}-{ton} → --th-green-500 Semantic : --th-color-{anlam} → --th-color-primary Component : --th-{bileşen}-{özellik} → --th-btn-primary-bg Spacing : --th-space-{değer} → --th-space-4 Typography: --th-text-{boyut} → --th-text-lg Shadow : --th-shadow-{seviye} → --th-shadow-md Radius : --th-radius-{seviye} → --th-radius-lg Z-index : --th-z-{katman} → --th-z-modal Transition: --th-ease-{tip} → --th-ease-bounce ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ KATMAN 1: PRIMITIVE TOKENS — Ham Renk Paleti ║ ║ ║ ║ Her renk 13 ton içerir (50, 100, 200 ... 900, 950) ║ ║ 50 = En açık (arka plan tint, subtle vurgu) ║ ║ 100 = Çok açık (hover arka plan, soft badge bg) ║ ║ 200 = Açık (border, divider, disabled bg) ║ ║ 300 = Orta-açık (disabled metin, soft icon) ║ ║ 400 = Orta (placeholder metin, secondary icon) ║ ║ 500 = BAZ RENK (ana kullanım, brand renk) ║ ║ 600 = Koyu (hover state, pressed link) ║ ║ 700 = Daha koyu (active/pressed button) ║ ║ 800 = Çok koyu (vurgulu metin, strong heading) ║ ║ 900 = En koyu (başlık metin, dark surface) ║ ║ 950 = Ultra koyu (footer bg, overlay, near-black) ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GREEN — Marka Ana Renk (Orman Yeşili) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tilbe Home'un kimliği. Güven, doğallık, ev sıcaklığı. Primary butonlar, navigasyon vurguları, başarı göstergeleri. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-green-50: #E8F5EE; --th-green-100: #C6E7D3; --th-green-200: #9FD4B5; --th-green-300: #74C096; --th-green-400: #4FAD7E; --th-green-500: #14613A; /* ★ MARKA PRIMARY */ --th-green-600: #12573A; --th-green-700: #0F4D2E; --th-green-800: #0C3E25; --th-green-900: #08301C; --th-green-950: #041F11; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ORANGE — Marka Accent Renk (Ateş Turuncusu) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Dikkat çekici, enerji veren, aksiyon tetikleyen. CTA butonları, fiyat vurgusu, kampanya highlight, sepet badge. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-orange-50: #FFF7ED; --th-orange-100: #FFEDD5; --th-orange-200: #FED7AA; --th-orange-300: #FDBA74; --th-orange-400: #FB923C; --th-orange-500: #E8710F; /* ★ MARKA ACCENT — WCAG AA 4.5:1 on white */ --th-orange-600: #EA580C; --th-orange-700: #C2410C; --th-orange-800: #9A3412; --th-orange-900: #7C2D12; --th-orange-950: #431407; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ NEUTRAL — Gri Skalası ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tüm metin, arka plan, border, gölge için temel gri paleti. Sıcak griler (mavi alt ton değil, hafif sarımsı-nötr). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-neutral-0: #FFFFFF; --th-neutral-50: #F9FAFB; --th-neutral-100: #F3F4F6; --th-neutral-150: #ECEDF0; --th-neutral-200: #E5E7EB; --th-neutral-250: #D8DAE0; --th-neutral-300: #D1D5DB; --th-neutral-350: #B8BCC5; --th-neutral-400: #9CA3AF; --th-neutral-450: #848B99; --th-neutral-500: #6B7280; --th-neutral-550: #5C6370; --th-neutral-600: #4B5563; --th-neutral-650: #3F4754; --th-neutral-700: #374151; --th-neutral-750: #2A3241; --th-neutral-800: #1F2937; --th-neutral-850: #172032; --th-neutral-900: #111827; --th-neutral-950: #030712; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RED — Tehlike / Hata / İndirim ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Form hataları, silme onayı, indirim badge, fiyat düşüşü, stok uyarısı, geçersiz kupon. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-red-50: #FEF2F2; --th-red-100: #FEE2E2; --th-red-200: #FECACA; --th-red-300: #FCA5A5; --th-red-400: #F87171; --th-red-500: #EF4444; --th-red-600: #DC2626; --th-red-700: #B91C1C; --th-red-800: #991B1B; --th-red-900: #7F1D1D; --th-red-950: #450A0A; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AMBER — Uyarı / Dikkat / Stok Azalıyor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Stok azalma uyarısı, son X ürün, dikkat mesajları, ödeme hatırlatma, kargo gecikme. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-amber-50: #FFFBEB; --th-amber-100: #FEF3C7; --th-amber-200: #FDE68A; --th-amber-300: #FCD34D; --th-amber-400: #FBBF24; --th-amber-500: #F59E0B; --th-amber-600: #D97706; --th-amber-700: #B45309; --th-amber-800: #92400E; --th-amber-900: #78350F; --th-amber-950: #451A03; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EMERALD — Başarı / Onay / Ücretsiz Kargo ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Sipariş onayı, başarılı ödeme, sepete eklendi, ücretsiz kargo badge, stokta var göstergesi, kupon uygulandı. NOT: Marka yeşilinden (green) farklı! Bu "fonksiyonel başarı" yeşili. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-emerald-50: #ECFDF5; --th-emerald-100: #D1FAE5; --th-emerald-200: #A7F3D0; --th-emerald-300: #6EE7B7; --th-emerald-400: #34D399; --th-emerald-500: #10B981; --th-emerald-600: #059669; --th-emerald-700: #047857; --th-emerald-800: #065F46; --th-emerald-900: #064E3B; --th-emerald-950: #022C22; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BLUE — Bilgi / Link / Yeni Ürün ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Bilgi mesajları, tooltip, yeni ürün badge, link rengi (opsiyonel), bildirim sayısı, filtre aktif göstergesi. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-blue-50: #EFF6FF; --th-blue-100: #DBEAFE; --th-blue-200: #BFDBFE; --th-blue-300: #93C5FD; --th-blue-400: #60A5FA; --th-blue-500: #3B82F6; --th-blue-600: #2563EB; --th-blue-700: #1D4ED8; --th-blue-800: #1E40AF; --th-blue-900: #1E3A8A; --th-blue-950: #172554; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEAL — Premium / Özel Kampanya / VIP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIP müşteri vurgusu, özel koleksiyon, premium ürün highlight, sezonluk kampanya alternatif rengi. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-teal-50: #F0FDFA; --th-teal-100: #CCFBF1; --th-teal-200: #99F6E4; --th-teal-300: #5EEAD4; --th-teal-400: #2DD4BF; --th-teal-500: #14B8A6; --th-teal-600: #0D9488; --th-teal-700: #0F766E; --th-teal-800: #115E59; --th-teal-900: #134E4A; --th-teal-950: #042F2E; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ROSE — Favori / Kalp / Özel Gün Kampanya ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Favori kalp ikonu, wishlist, Sevgililer Günü/Anneler Günü kampanya, kadın ürünleri vurgusu. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-rose-50: #FFF1F2; --th-rose-100: #FFE4E6; --th-rose-200: #FECDD3; --th-rose-300: #FDA4AF; --th-rose-400: #FB7185; --th-rose-500: #F43F5E; --th-rose-600: #E11D48; --th-rose-700: #BE123C; --th-rose-800: #9F1239; --th-rose-900: #881337; --th-rose-950: #4C0519; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PURPLE — Özel / Lüks / Flash Sale / Sınırlı Stok ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Flash sale vurgusu, "Sınırlı Üretim" badge, özel koleksiyon, bayram/özel gün kampanya alternatif rengi. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-purple-50: #FAF5FF; --th-purple-100: #F3E8FF; --th-purple-200: #E9D5FF; --th-purple-300: #D8B4FE; --th-purple-400: #C084FC; --th-purple-500: #A855F7; --th-purple-600: #9333EA; --th-purple-700: #7E22CE; --th-purple-800: #6B21A8; --th-purple-900: #581C87; --th-purple-950: #3B0764; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ INDIGO — Profesyonel / Kurumsal / B2B / Güvenilirlik ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Toptan satış bölümü, kurumsal iletişim, B2B müşteri paneli, profesyonel doküman/fatura alanı. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-indigo-50: #EEF2FF; --th-indigo-100: #E0E7FF; --th-indigo-200: #C7D2FE; --th-indigo-300: #A5B4FC; --th-indigo-400: #818CF8; --th-indigo-500: #6366F1; --th-indigo-600: #4F46E5; --th-indigo-700: #4338CA; --th-indigo-800: #3730A3; --th-indigo-900: #312E81; --th-indigo-950: #1E1B4B; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CYAN — Bilgi Alternatif / Kargo Takip / Teslimat ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Kargo takip adımları, teslimat bilgileri, hızlı teslimat badge, progress bar alternatif. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-cyan-50: #ECFEFF; --th-cyan-100: #CFFAFE; --th-cyan-200: #A5F3FC; --th-cyan-300: #67E8F9; --th-cyan-400: #22D3EE; --th-cyan-500: #06B6D4; --th-cyan-600: #0891B2; --th-cyan-700: #0E7490; --th-cyan-800: #155E75; --th-cyan-900: #164E63; --th-cyan-950: #083344; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIME — Eğlenceli / Sezonluk / Doğal Ürünler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Organik/doğal ürün vurgusu, bahar kampanyaları, eko-dostu etiketleri, taze ürün highlight. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-lime-50: #F7FEE7; --th-lime-100: #ECFCCB; --th-lime-200: #D9F99D; --th-lime-300: #BEF264; --th-lime-400: #A3E635; --th-lime-500: #84CC16; --th-lime-600: #65A30D; --th-lime-700: #4D7C0F; --th-lime-800: #3F6212; --th-lime-900: #365314; --th-lime-950: #1A2E05; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GOLD — Premium / Lüks / Ödül / Puan ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Premium üye rozeti, puan sistemi, ödül kazandınız, altın yıldız değerlendirme, VIP müşteri vurgusu. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-gold-50: #FEFCE8; --th-gold-100: #FEF9C3; --th-gold-200: #FEF08A; --th-gold-300: #FDE047; --th-gold-400: #FACC15; --th-gold-500: #EAB308; --th-gold-600: #CA8A04; --th-gold-700: #A16207; --th-gold-800: #854D0E; --th-gold-900: #713F12; --th-gold-950: #422006; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SLATE — Alternatif Nötr (Daha Soğuk Gri) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Kod blokları, terminal görünümü, teknik detay alanları, koyu tema bileşenleri. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --th-slate-50: #F8FAFC; --th-slate-100: #F1F5F9; --th-slate-200: #E2E8F0; --th-slate-300: #CBD5E1; --th-slate-400: #94A3B8; --th-slate-500: #64748B; --th-slate-600: #475569; --th-slate-700: #334155; --th-slate-800: #1E293B; --th-slate-900: #0F172A; --th-slate-950: #020617; /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ KATMAN 2: SEMANTIC TOKENS — Anlam Katmanı ║ ║ ║ ║ Primitive renkleri → anlama bağlar. ║ ║ Marka rengi değişecekse SADECE burayı güncelle. ║ ║ Tüm component tokenlar buraya referans verir. ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ /* ── BRAND (Marka Kimliği) ──────────────────────────────────────────────── */ --th-color-brand: var(--th-green-500); --th-color-brand-hover: var(--th-green-700); --th-color-brand-active: var(--th-green-800); --th-color-brand-subtle: var(--th-green-50); --th-color-brand-muted: var(--th-green-100); --th-color-brand-emphasis: var(--th-green-400); --th-color-brand-border: var(--th-green-200); --th-color-brand-border-strong: var(--th-green-300); --th-color-brand-text: var(--th-green-800); --th-color-brand-on: var(--th-neutral-0); /* ── PRIMARY (Ana Aksiyon = Marka Yeşili) ───────────────────────────────── */ --th-color-primary: var(--th-color-brand); --th-color-primary-hover: var(--th-color-brand-hover); --th-color-primary-active: var(--th-color-brand-active); --th-color-primary-subtle: var(--th-color-brand-subtle); --th-color-primary-muted: var(--th-color-brand-muted); --th-color-primary-emphasis: var(--th-color-brand-emphasis); --th-color-primary-border: var(--th-color-brand-border); --th-color-primary-on: var(--th-color-brand-on); /* ── ACCENT (Dikkat Çekici = Turuncu) ───────────────────────────────────── */ --th-color-accent: var(--th-orange-500); --th-color-accent-hover: var(--th-orange-600); --th-color-accent-active: var(--th-orange-700); --th-color-accent-subtle: var(--th-orange-50); --th-color-accent-muted: var(--th-orange-100); --th-color-accent-emphasis: var(--th-orange-400); --th-color-accent-border: var(--th-orange-200); --th-color-accent-on: var(--th-neutral-0); --th-color-accent-bg: var(--th-orange-50); /* ── SUCCESS (Başarı / Onay) ────────────────────────────────────────────── */ --th-color-success: var(--th-emerald-600); --th-color-success-hover: var(--th-emerald-700); --th-color-success-active: var(--th-emerald-800); --th-color-success-subtle: var(--th-emerald-50); --th-color-success-muted: var(--th-emerald-100); --th-color-success-emphasis: var(--th-emerald-400); --th-color-success-border: var(--th-emerald-200); --th-color-success-on: var(--th-neutral-0); --th-color-success-bg: var(--th-emerald-50); --th-color-success-dark: var(--th-emerald-800); /* ── DANGER (Hata / Tehlike / İndirim) ──────────────────────────────────── */ --th-color-danger: var(--th-red-500); --th-color-danger-hover: var(--th-red-600); --th-color-danger-active: var(--th-red-700); --th-color-danger-subtle: var(--th-red-50); --th-color-danger-muted: var(--th-red-100); --th-color-danger-emphasis: var(--th-red-400); --th-color-danger-border: var(--th-red-200); --th-color-danger-on: var(--th-neutral-0); --th-color-danger-bg: var(--th-red-50); /* ── WARNING (Uyarı / Dikkat) ───────────────────────────────────────────── */ --th-color-warning: var(--th-amber-500); --th-color-warning-hover: var(--th-amber-600); --th-color-warning-active: var(--th-amber-700); --th-color-warning-subtle: var(--th-amber-50); --th-color-warning-muted: var(--th-amber-100); --th-color-warning-emphasis: var(--th-amber-400); --th-color-warning-border: var(--th-amber-200); --th-color-warning-on: var(--th-neutral-0); --th-color-warning-bg: var(--th-amber-50); --th-color-warning-dark: var(--th-amber-800); /* ── INFO (Bilgi / Bildirim) ────────────────────────────────────────────── */ --th-color-info: var(--th-blue-500); --th-color-info-hover: var(--th-blue-600); --th-color-info-active: var(--th-blue-700); --th-color-info-subtle: var(--th-blue-50); --th-color-info-muted: var(--th-blue-100); --th-color-info-emphasis: var(--th-blue-400); --th-color-info-border: var(--th-blue-200); --th-color-info-on: var(--th-neutral-0); /* ── TEXT (Metin Renkleri) ──────────────────────────────────────────────── */ --th-color-text: var(--th-neutral-900); --th-color-text-secondary: var(--th-neutral-700); --th-color-text-tertiary: var(--th-neutral-600); --th-color-text-muted: var(--th-neutral-500); --th-color-text-placeholder: var(--th-neutral-500); /* WCAG AA: #6B7280 = 4.6:1 on white */ --th-color-text-disabled: var(--th-neutral-300); --th-color-text-inverse: var(--th-neutral-0); --th-color-text-inverse-muted: rgba(255, 255, 255, 0.7); --th-color-text-light: var(--th-neutral-400); --th-color-text-link: var(--th-color-primary); --th-color-text-link-hover: var(--th-color-primary-hover); --th-color-text-link-visited: var(--th-purple-700); --th-color-text-price: var(--th-neutral-900); --th-color-text-price-sale: var(--th-red-600); --th-color-text-price-old: var(--th-neutral-400); --th-color-text-discount: var(--th-red-600); --th-color-text-brand: var(--th-color-brand); --th-color-text-on-primary: var(--th-neutral-0); --th-color-text-on-accent: var(--th-neutral-0); --th-color-text-on-dark: var(--th-neutral-100); /* ── BACKGROUND (Arka Plan) ─────────────────────────────────────────────── */ --th-color-bg: var(--th-neutral-0); --th-color-bg-secondary: var(--th-neutral-50); --th-color-bg-tertiary: var(--th-neutral-100); --th-color-bg-muted: var(--th-neutral-150); --th-color-bg-strong: var(--th-neutral-200); --th-color-bg-inverse: var(--th-neutral-900); --th-color-bg-inverse-subtle: var(--th-neutral-800); --th-color-bg-overlay: rgba(0, 0, 0, 0.50); --th-color-bg-overlay-light: rgba(0, 0, 0, 0.30); --th-color-bg-overlay-heavy: rgba(0, 0, 0, 0.70); --th-color-bg-skeleton: var(--th-neutral-200); --th-color-bg-skeleton-shine: var(--th-neutral-100); --th-color-bg-scrim: rgba(0, 0, 0, 0.05); --th-color-bg-highlight: var(--th-amber-50); --th-color-bg-selected: var(--th-color-primary-subtle); --th-color-bg-hover: var(--th-neutral-50); --th-color-bg-active: var(--th-neutral-100); --th-color-bg-disabled: var(--th-neutral-100); --th-color-bg-soft: var(--th-neutral-50); --th-color-bg-primary: #ffffff; --th-color-surface: var(--th-neutral-0); /* ── BORDER (Kenar Çizgileri) ───────────────────────────────────────────── */ --th-color-border: var(--th-neutral-200); --th-color-border-light: var(--th-neutral-100); --th-color-border-strong: var(--th-neutral-300); --th-color-border-heavy: var(--th-neutral-400); --th-color-border-inverse: var(--th-neutral-700); --th-color-border-focus: var(--th-color-primary); --th-color-border-error: var(--th-color-danger); --th-color-border-success: var(--th-color-success); --th-color-border-selected: var(--th-color-primary); --th-color-border-disabled: var(--th-neutral-200); --th-color-border-divider: var(--th-neutral-100); /* ── SURFACE (Yüzey Katmanları) ─────────────────────────────────────────── */ --th-surface-base: var(--th-neutral-0); --th-surface-raised: var(--th-neutral-0); --th-surface-overlay: var(--th-neutral-0); --th-surface-sunken: var(--th-neutral-50); --th-surface-inset: var(--th-neutral-100); --th-surface-dark: var(--th-neutral-900); --th-surface-dark-raised: var(--th-neutral-800); /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ KATMAN 3: COMPONENT TOKENS — Bileşen Katmanı ║ ║ ║ ║ Her UI bileşeninin kendi token seti. ║ ║ Semantic tokenlara referans verir. ║ ║ Bileşen başına override kolaylığı sağlar. ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ /* ── BUTTON — Primary ───────────────────────────────────────────────────── */ --th-btn-primary-bg: var(--th-color-primary); --th-btn-primary-bg-hover: var(--th-color-primary-hover); --th-btn-primary-bg-active: var(--th-color-primary-active); --th-btn-primary-text: var(--th-color-text-on-primary); --th-btn-primary-border: var(--th-color-primary); --th-btn-primary-shadow: var(--th-shadow-primary); --th-btn-primary-shadow-hover: var(--th-shadow-primary-lg); --th-btn-primary-hover: var(--th-color-primary-hover); /* ── BUTTON — Accent (CTA) ──────────────────────────────────────────────── */ --th-btn-accent-bg: var(--th-color-accent); --th-btn-accent-bg-hover: var(--th-color-accent-hover); --th-btn-accent-bg-active: var(--th-color-accent-active); --th-btn-accent-text: var(--th-color-text-on-accent); --th-btn-accent-border: var(--th-color-accent); --th-btn-accent-shadow: var(--th-shadow-accent); --th-btn-accent-shadow-hover: var(--th-shadow-accent-lg); --th-btn-accent-hover: var(--th-color-accent-hover); /* ── BUTTON — Secondary (Outline) ───────────────────────────────────────── */ --th-btn-secondary-bg: transparent; --th-btn-secondary-bg-hover: var(--th-color-primary-subtle); --th-btn-secondary-bg-active: var(--th-color-primary-muted); --th-btn-secondary-text: var(--th-color-primary); --th-btn-secondary-text-hover: var(--th-color-primary-hover); --th-btn-secondary-border: var(--th-color-primary); --th-btn-secondary-border-hover: var(--th-color-primary-hover); /* ── BUTTON — Tertiary (Ghost) ──────────────────────────────────────────── */ --th-btn-ghost-bg: transparent; --th-btn-ghost-bg-hover: var(--th-color-bg-hover); --th-btn-ghost-bg-active: var(--th-color-bg-active); --th-btn-ghost-text: var(--th-color-text); --th-btn-ghost-text-hover: var(--th-color-primary); /* ── BUTTON — Danger ────────────────────────────────────────────────────── */ --th-btn-danger-bg: var(--th-color-danger); --th-btn-danger-bg-hover: var(--th-color-danger-hover); --th-btn-danger-bg-active: var(--th-color-danger-active); --th-btn-danger-text: var(--th-color-text-inverse); --th-btn-danger-shadow: var(--th-shadow-danger); /* ── BUTTON — Disabled (Tüm buton tipleri için) ────────────────────────── */ --th-btn-disabled-bg: var(--th-neutral-100); --th-btn-disabled-text: var(--th-neutral-400); --th-btn-disabled-border: var(--th-neutral-200); /* ── BUTTON — Sizing ────────────────────────────────────────────────────── */ --th-btn-height-xs: 28px; --th-btn-height-sm: 32px; --th-btn-height-md: 40px; --th-btn-height-lg: 48px; --th-btn-height-xl: 56px; --th-btn-padding-xs: var(--th-space-2) var(--th-space-3); --th-btn-padding-sm: var(--th-space-2) var(--th-space-4); --th-btn-padding-md: var(--th-space-3) var(--th-space-5); --th-btn-padding-lg: var(--th-space-3-5) var(--th-space-6); --th-btn-padding-xl: var(--th-space-4) var(--th-space-8); --th-btn-font-xs: var(--th-text-xs); --th-btn-font-sm: var(--th-text-sm); --th-btn-font-md: var(--th-text-base); --th-btn-font-lg: var(--th-text-md); --th-btn-font-xl: var(--th-text-lg); --th-btn-radius: var(--th-radius-lg); /* ── BADGE ──────────────────────────────────────────────────────────────── */ --th-badge-discount-bg: var(--th-red-600); --th-badge-discount-text: var(--th-neutral-0); --th-badge-new-bg: var(--th-blue-600); --th-badge-new-text: var(--th-neutral-0); --th-badge-stock-bg: var(--th-amber-500); --th-badge-stock-text: var(--th-neutral-0); --th-badge-freecargo-bg: var(--th-emerald-600); --th-badge-freecargo-text: var(--th-neutral-0); --th-badge-bestseller-bg: var(--th-orange-500); --th-badge-bestseller-text: var(--th-neutral-0); --th-badge-campaign-bg: var(--th-rose-600); --th-badge-campaign-text: var(--th-neutral-0); --th-badge-limited-bg: var(--th-purple-600); --th-badge-limited-text: var(--th-neutral-0); --th-badge-organic-bg: var(--th-lime-600); --th-badge-organic-text: var(--th-neutral-0); --th-badge-premium-bg: var(--th-gold-500); --th-badge-premium-text: var(--th-neutral-900); --th-badge-b2b-bg: var(--th-indigo-600); --th-badge-b2b-text: var(--th-neutral-0); --th-badge-delivery-bg: var(--th-cyan-600); --th-badge-delivery-text: var(--th-neutral-0); --th-badge-radius: var(--th-radius-sm); --th-badge-padding: var(--th-space-1) var(--th-space-2); --th-badge-font: var(--th-text-2xs); --th-badge-font-weight: var(--th-font-bold); /* ── PRODUCT CARD ───────────────────────────────────────────────────────── */ --th-card-bg: var(--th-surface-raised); --th-card-bg-hover: var(--th-neutral-0); --th-card-border: var(--th-color-border-light); --th-card-border-hover: var(--th-color-border); --th-card-radius: var(--th-radius-xl); --th-card-padding: var(--th-space-0); --th-card-body-padding: var(--th-space-3); --th-card-shadow: var(--th-shadow-xs); --th-card-shadow-hover: var(--th-shadow-md); --th-card-transition: var(--th-transition-normal); --th-card-title-color: var(--th-color-text); --th-card-title-font: var(--th-text-sm); --th-card-title-weight: var(--th-font-medium); --th-card-title-lines: 2; --th-card-price-color: var(--th-color-text-price); --th-card-price-font: var(--th-text-md); --th-card-price-weight: var(--th-font-bold); --th-card-old-price-color: var(--th-color-text-price-old); --th-card-old-price-font: var(--th-text-sm); --th-card-discount-color: var(--th-color-text-discount); --th-card-discount-font: var(--th-text-xs); --th-card-image-ratio: var(--th-aspect-square); --th-card-image-radius: var(--th-radius-xl) var(--th-radius-xl) 0 0; --th-card-fav-color: var(--th-neutral-400); --th-card-fav-color-active: var(--th-rose-500); --th-card-outofstock-opacity: 0.5; /* ── HEADER ─────────────────────────────────────────────────────────────── */ --th-header-height: 136px; --th-header-height-compact: 64px; --th-header-bg: var(--th-neutral-0); --th-header-shadow: var(--th-shadow-sm); --th-header-border: var(--th-color-border-light); --th-header-topbar-height: 36px; --th-header-topbar-bg: var(--th-neutral-50); --th-header-topbar-text: var(--th-neutral-600); --th-header-topbar-text-hover: var(--th-color-primary); --th-header-topbar-border: var(--th-color-border-light); --th-header-topbar-font: var(--th-text-xs); --th-header-main-height: 64px; --th-header-main-bg: var(--th-neutral-0); --th-header-main-text: var(--th-color-text); --th-header-nav-height: 44px; --th-header-nav-bg: var(--th-color-primary); --th-header-nav-text: var(--th-color-text-inverse); --th-header-nav-text-hover: var(--th-neutral-0); --th-header-nav-hover-bg: rgba(255, 255, 255, 0.15); --th-header-nav-font: var(--th-text-sm); --th-header-nav-font-weight: var(--th-font-medium); --th-header-search-bg: var(--th-neutral-100); --th-header-search-bg-focus: var(--th-neutral-0); --th-header-search-border: var(--th-neutral-200); --th-header-search-border-focus: var(--th-color-primary); --th-header-search-text: var(--th-color-text); --th-header-search-placeholder: var(--th-neutral-400); --th-header-search-radius: var(--th-radius-xl); --th-header-search-height: 44px; --th-header-icon-color: var(--th-neutral-700); --th-header-icon-hover: var(--th-color-primary); --th-header-icon-size: 22px; --th-header-cart-badge-bg: var(--th-color-accent); --th-header-cart-badge-text: var(--th-neutral-0); --th-header-cart-badge-size: 18px; --th-header-cart-badge-font: var(--th-text-2xs); --th-header-mega-bg: var(--th-neutral-0); --th-header-mega-shadow: var(--th-shadow-xl); --th-header-mega-border: var(--th-color-border-light); --th-header-mega-heading: var(--th-color-text); --th-header-mega-link: var(--th-neutral-600); --th-header-mega-link-hover: var(--th-color-primary); --th-header-mega-highlight-bg: var(--th-color-accent-subtle); --th-header-mega-highlight-text: var(--th-color-accent); /* ── FOOTER ─────────────────────────────────────────────────────────────── */ --th-footer-bg: var(--th-neutral-900); --th-footer-bg-top: var(--th-neutral-850); --th-footer-bg-bottom: var(--th-neutral-950); --th-footer-text: var(--th-neutral-300); --th-footer-text-muted: var(--th-neutral-500); --th-footer-heading: var(--th-neutral-0); --th-footer-heading-font: var(--th-text-sm); --th-footer-link: var(--th-neutral-400); --th-footer-link-hover: var(--th-color-accent); --th-footer-border: var(--th-neutral-800); --th-footer-icon: var(--th-neutral-400); --th-footer-icon-hover: var(--th-color-accent); --th-footer-social-bg: var(--th-neutral-800); --th-footer-social-bg-hover: var(--th-color-accent); --th-footer-social-text: var(--th-neutral-400); --th-footer-social-text-hover: var(--th-neutral-0); --th-footer-newsletter-bg: var(--th-neutral-800); --th-footer-newsletter-border: var(--th-neutral-700); --th-footer-newsletter-text: var(--th-neutral-200); --th-footer-newsletter-btn-bg: var(--th-color-accent); --th-footer-newsletter-btn-text: var(--th-neutral-0); --th-footer-copyright-text: var(--th-neutral-500); --th-footer-copyright-font: var(--th-text-xs); /* ── INPUT / FORM ───────────────────────────────────────────────────────── */ --th-input-height-sm: 32px; --th-input-height-md: 40px; --th-input-height-lg: 48px; --th-input-bg: var(--th-neutral-0); --th-input-bg-hover: var(--th-neutral-0); --th-input-bg-focus: var(--th-neutral-0); --th-input-bg-disabled: var(--th-neutral-100); --th-input-bg-readonly: var(--th-neutral-50); --th-input-border: var(--th-neutral-300); --th-input-border-hover: var(--th-neutral-400); --th-input-border-focus: var(--th-color-primary); --th-input-border-error: var(--th-color-danger); --th-input-border-success: var(--th-color-success); --th-input-border-disabled: var(--th-neutral-200); --th-input-text: var(--th-color-text); --th-input-text-disabled: var(--th-color-text-disabled); --th-input-placeholder: var(--th-color-text-placeholder); --th-input-label: var(--th-color-text-secondary); --th-input-label-font: var(--th-text-sm); --th-input-label-weight: var(--th-font-medium); --th-input-helper: var(--th-color-text-muted); --th-input-helper-font: var(--th-text-xs); --th-input-error-text: var(--th-color-danger); --th-input-error-font: var(--th-text-xs); --th-input-success-text: var(--th-color-success); --th-input-radius: var(--th-radius-lg); --th-input-shadow-focus: 0 0 0 3px rgba(20, 97, 58, 0.15); --th-input-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.15); --th-input-transition: var(--th-transition-fast); /* ── SELECT / DROPDOWN ──────────────────────────────────────────────────── */ --th-select-arrow-color: var(--th-neutral-400); --th-select-option-hover: var(--th-color-bg-hover); --th-select-option-selected: var(--th-color-primary-subtle); --th-select-option-selected-text: var(--th-color-primary); /* ── CHECKBOX / RADIO ───────────────────────────────────────────────────── */ --th-check-size: 18px; --th-check-border: var(--th-neutral-300); --th-check-border-hover: var(--th-color-primary); --th-check-checked-bg: var(--th-color-primary); --th-check-checked-border: var(--th-color-primary); --th-check-checked-icon: var(--th-neutral-0); --th-check-disabled-bg: var(--th-neutral-100); --th-check-disabled-border: var(--th-neutral-200); --th-check-radius: var(--th-radius-sm); --th-radio-radius: var(--th-radius-full); /* ── TRUST / GÜVEN MODÜLLERİ ───────────────────────────────────────────── */ --th-trust-bg: var(--th-green-50); --th-trust-bg-alt: var(--th-neutral-50); --th-trust-border: var(--th-green-200); --th-trust-icon-color: var(--th-color-primary); --th-trust-icon-size: 24px; --th-trust-title-color: var(--th-green-800); --th-trust-title-font: var(--th-text-sm); --th-trust-title-weight: var(--th-font-semibold); --th-trust-desc-color: var(--th-green-700); --th-trust-desc-font: var(--th-text-xs); --th-trust-radius: var(--th-radius-lg); --th-trust-padding: var(--th-space-4); --th-trust-gap: var(--th-space-3); /* ── CAMPAIGN / KAMPANYA ────────────────────────────────────────────────── */ --th-campaign-bg: var(--th-orange-50); --th-campaign-bg-intense: var(--th-orange-500); --th-campaign-border: var(--th-orange-200); --th-campaign-text: var(--th-orange-800); --th-campaign-text-inverse: var(--th-neutral-0); --th-campaign-accent: var(--th-color-accent); --th-campaign-radius: var(--th-radius-xl); --th-campaign-timer-bg: var(--th-neutral-900); --th-campaign-timer-text: var(--th-neutral-0); --th-campaign-timer-accent: var(--th-color-accent); --th-campaign-timer-digit-bg: var(--th-neutral-800); --th-campaign-timer-digit-text: var(--th-neutral-0); --th-campaign-timer-separator: var(--th-color-accent); --th-campaign-timer-label: var(--th-neutral-400); --th-campaign-timer-radius: var(--th-radius-md); --th-campaign-flash-bg: linear-gradient(135deg, var(--th-purple-600), var(--th-rose-600)); --th-campaign-flash-text: var(--th-neutral-0); --th-campaign-season-bg: linear-gradient(135deg, var(--th-green-500), var(--th-teal-500)); --th-campaign-season-text: var(--th-neutral-0); /* ── CART / SEPET ───────────────────────────────────────────────────────── */ --th-cart-bg: var(--th-neutral-0); --th-cart-item-border: var(--th-color-border-light); --th-cart-item-bg-hover: var(--th-neutral-50); --th-cart-remove-color: var(--th-neutral-400); --th-cart-remove-hover: var(--th-color-danger); --th-cart-quantity-border: var(--th-neutral-300); --th-cart-quantity-bg: var(--th-neutral-0); --th-cart-quantity-btn-bg: var(--th-neutral-100); --th-cart-quantity-btn-hover: var(--th-neutral-200); --th-cart-summary-bg: var(--th-neutral-50); --th-cart-summary-border: var(--th-neutral-200); --th-cart-summary-radius: var(--th-radius-xl); --th-cart-summary-label: var(--th-color-text-secondary); --th-cart-summary-value: var(--th-color-text); --th-cart-summary-total-color: var(--th-color-text); --th-cart-summary-total-font: var(--th-text-xl); --th-cart-summary-total-weight: var(--th-font-bold); --th-cart-summary-discount: var(--th-color-success); --th-cart-summary-shipping: var(--th-color-success); --th-cart-progress-bg: var(--th-neutral-200); --th-cart-progress-fill: var(--th-color-success); --th-cart-progress-complete: var(--th-color-success); --th-cart-progress-text: var(--th-color-text-muted); --th-cart-progress-text-success: var(--th-color-success); --th-cart-progress-height: 6px; --th-cart-progress-radius: var(--th-radius-full); --th-cart-coupon-bg: var(--th-neutral-0); --th-cart-coupon-border: var(--th-neutral-300); --th-cart-coupon-border-focus: var(--th-color-primary); --th-cart-coupon-btn-bg: var(--th-color-primary); --th-cart-coupon-btn-text: var(--th-neutral-0); --th-cart-coupon-success-bg: var(--th-emerald-50); --th-cart-coupon-success-text: var(--th-emerald-700); --th-cart-empty-icon-color: var(--th-neutral-300); --th-cart-empty-text: var(--th-color-text-muted); --th-cart-empty-cta-bg: var(--th-color-primary); --th-cart-empty-cta-text: var(--th-neutral-0); /* ── MINI CART (Side Drawer) ────────────────────────────────────────────── */ --th-minicart-width: 380px; --th-minicart-bg: var(--th-neutral-0); --th-minicart-header-bg: var(--th-neutral-50); --th-minicart-header-border: var(--th-neutral-200); --th-minicart-footer-bg: var(--th-neutral-0); --th-minicart-footer-border: var(--th-neutral-200); --th-minicart-shadow: var(--th-shadow-2xl); /* ── Cart Undo Toast ── */ --th-cart-undo-bg: var(--th-neutral-800); --th-cart-undo-text: var(--th-neutral-0); --th-cart-undo-btn-bg: var(--th-color-accent); /* ── Checkout Steps ── */ --th-checkout-step-bg: var(--th-neutral-100); --th-checkout-step-border: var(--th-neutral-300); --th-checkout-step-active-bg: var(--th-color-primary); --th-checkout-step-complete-bg: var(--th-color-success); --th-checkout-step-line: var(--th-neutral-300); /* ── Exit Intent ── */ --th-exit-overlay-bg: rgba(0,0,0,.55); --th-exit-dialog-bg: var(--th-neutral-0); --th-exit-dialog-radius: var(--th-radius-2xl); /* ── PDP (Ürün Detay Sayfası) ───────────────────────────────────────────── */ --th-pdp-gallery-bg: var(--th-neutral-0); --th-pdp-gallery-border: var(--th-color-border-light); --th-pdp-gallery-radius: var(--th-radius-xl); --th-pdp-gallery-thumb-size: 64px; --th-pdp-gallery-thumb-border: var(--th-neutral-200); --th-pdp-gallery-thumb-active: var(--th-color-primary); --th-pdp-gallery-zoom-bg: var(--th-neutral-0); --th-pdp-gallery-counter-bg: rgba(0, 0, 0, 0.5); --th-pdp-gallery-counter-text: var(--th-neutral-0); --th-pdp-title-color: var(--th-color-text); --th-pdp-title-font: var(--th-text-xl); --th-pdp-title-weight: var(--th-font-semibold); --th-pdp-brand-color: var(--th-color-text-link); --th-pdp-sku-color: var(--th-color-text-muted); --th-pdp-price-color: var(--th-color-text); --th-pdp-price-font: var(--th-text-2xl); --th-pdp-price-weight: var(--th-font-bold); --th-pdp-price-sale-color: var(--th-color-text-price-sale); --th-pdp-price-old-color: var(--th-color-text-price-old); --th-pdp-price-old-font: var(--th-text-md); --th-pdp-price-installment: var(--th-color-text-muted); --th-pdp-variant-chip-border: var(--th-neutral-300); --th-pdp-variant-chip-hover: var(--th-color-primary-border); --th-pdp-variant-chip-selected: var(--th-color-primary); --th-pdp-variant-chip-selected-bg: var(--th-color-primary-subtle); --th-pdp-variant-chip-disabled: var(--th-neutral-200); --th-pdp-variant-chip-disabled-text: var(--th-neutral-400); --th-pdp-variant-chip-radius: var(--th-radius-md); --th-pdp-variant-color-size: 32px; --th-pdp-variant-color-border: var(--th-neutral-200); --th-pdp-variant-color-selected: var(--th-color-primary); --th-pdp-sticky-bg: var(--th-neutral-0); --th-pdp-sticky-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); --th-pdp-sticky-height: 64px; --th-pdp-sticky-z: var(--th-z-sticky); --th-pdp-tab-border: var(--th-color-border); --th-pdp-tab-text: var(--th-color-text-muted); --th-pdp-tab-text-active: var(--th-color-primary); --th-pdp-tab-indicator: var(--th-color-primary); --th-pdp-tab-font: var(--th-text-base); --th-pdp-tab-weight: var(--th-font-medium); --th-pdp-delivery-bg: var(--th-green-50); --th-pdp-delivery-border: var(--th-green-200); --th-pdp-delivery-icon: var(--th-color-primary); --th-pdp-delivery-text: var(--th-green-800); /* ── RATING / DEĞERLENDİRME ────────────────────────────────────────────── */ --th-rating-star-filled: var(--th-gold-400); --th-rating-star-half: var(--th-gold-300); --th-rating-star-empty: var(--th-neutral-300); --th-rating-star-size: 16px; --th-rating-star-gap: 2px; --th-rating-count-color: var(--th-color-text-muted); --th-rating-count-font: var(--th-text-sm); --th-rating-bar-bg: var(--th-neutral-200); --th-rating-bar-fill: var(--th-gold-400); --th-rating-bar-height: 8px; /* ── BREADCRUMB ─────────────────────────────────────────────────────────── */ --th-breadcrumb-text: var(--th-color-text-muted); --th-breadcrumb-link: var(--th-color-text-muted); --th-breadcrumb-link-hover: var(--th-color-primary); --th-breadcrumb-separator: var(--th-neutral-300); --th-breadcrumb-current: var(--th-color-text); --th-breadcrumb-font: var(--th-text-xs); /* ── PAGINATION ─────────────────────────────────────────────────────────── */ --th-pagination-bg: var(--th-neutral-0); --th-pagination-bg-hover: var(--th-neutral-50); --th-pagination-bg-active: var(--th-color-primary); --th-pagination-text: var(--th-color-text-secondary); --th-pagination-text-active: var(--th-neutral-0); --th-pagination-border: var(--th-color-border); --th-pagination-radius: var(--th-radius-md); --th-pagination-size: 36px; /* ── FILTER / FİLTRE ───────────────────────────────────────────────────── */ --th-filter-bg: var(--th-neutral-0); --th-filter-border: var(--th-color-border); --th-filter-heading: var(--th-color-text); --th-filter-heading-font: var(--th-text-sm); --th-filter-heading-weight: var(--th-font-semibold); --th-filter-option-text: var(--th-color-text-secondary); --th-filter-option-hover: var(--th-color-primary); --th-filter-count: var(--th-color-text-muted); --th-filter-chip-bg: var(--th-color-primary-subtle); --th-filter-chip-text: var(--th-color-primary); --th-filter-chip-border: var(--th-color-primary-border); --th-filter-chip-remove: var(--th-color-primary); --th-filter-chip-radius: var(--th-radius-full); --th-filter-price-track: var(--th-neutral-200); --th-filter-price-fill: var(--th-color-primary); --th-filter-price-thumb: var(--th-color-primary); --th-filter-drawer-width: 320px; --th-filter-drawer-bg: var(--th-neutral-0); --th-filter-drawer-shadow: var(--th-shadow-2xl); /* ── MODAL / DIALOG ─────────────────────────────────────────────────────── */ --th-modal-bg: var(--th-neutral-0); --th-modal-border: var(--th-color-border-light); --th-modal-shadow: var(--th-shadow-2xl); --th-modal-radius: var(--th-radius-2xl); --th-modal-header-border: var(--th-color-border-light); --th-modal-footer-border: var(--th-color-border-light); --th-modal-close-color: var(--th-neutral-400); --th-modal-close-hover: var(--th-color-text); --th-modal-overlay: var(--th-color-bg-overlay); --th-modal-z: var(--th-z-modal); --th-modal-width-sm: 400px; --th-modal-width-md: 560px; --th-modal-width-lg: 720px; --th-modal-width-xl: 960px; /* ── TOAST / BİLDİRİM ──────────────────────────────────────────────────── */ --th-toast-bg: var(--th-neutral-900); --th-toast-text: var(--th-neutral-0); --th-toast-shadow: var(--th-shadow-lg); --th-toast-radius: var(--th-radius-lg); --th-toast-z: var(--th-z-toast); --th-toast-success-bg: var(--th-emerald-600); --th-toast-danger-bg: var(--th-red-600); --th-toast-warning-bg: var(--th-amber-500); --th-toast-info-bg: var(--th-blue-600); /* ── TOOLTIP ────────────────────────────────────────────────────────────── */ --th-tooltip-bg: var(--th-neutral-800); --th-tooltip-text: var(--th-neutral-0); --th-tooltip-font: var(--th-text-xs); --th-tooltip-radius: var(--th-radius-md); --th-tooltip-padding: var(--th-space-2) var(--th-space-3); --th-tooltip-shadow: var(--th-shadow-md); --th-tooltip-z: var(--th-z-tooltip); --th-tooltip-arrow-size: 6px; /* ── ANNOUNCEMENT BAR ───────────────────────────────────────────────────── */ --th-announce-bg: var(--th-color-primary); --th-announce-bg-alt: var(--th-color-accent); --th-announce-text: var(--th-neutral-0); --th-announce-link: var(--th-neutral-0); --th-announce-link-underline: rgba(255, 255, 255, 0.5); --th-announce-close: rgba(255, 255, 255, 0.7); --th-announce-close-hover: var(--th-neutral-0); --th-announce-height: 40px; --th-announce-font: var(--th-text-sm); --th-announce-font-weight: var(--th-font-medium); /* ── SKELETON LOADING ───────────────────────────────────────────────────── */ --th-skeleton-bg: var(--th-neutral-200); --th-skeleton-shine: var(--th-neutral-100); --th-skeleton-radius: var(--th-radius-md); --th-skeleton-animation-duration: 1.5s; /* ── SCROLL TO TOP ──────────────────────────────────────────────────────── */ --th-scrolltop-bg: var(--th-color-primary); --th-scrolltop-bg-hover: var(--th-color-primary-hover); --th-scrolltop-text: var(--th-neutral-0); --th-scrolltop-shadow: var(--th-shadow-lg); --th-scrolltop-radius: var(--th-radius-full); --th-scrolltop-size: 44px; --th-scrolltop-z: var(--th-z-fixed); /* ── WHATSAPP WIDGET ────────────────────────────────────────────────────── */ --th-whatsapp-bg: #25D366; --th-whatsapp-bg-hover: #20BD5A; --th-whatsapp-text: var(--th-neutral-0); --th-whatsapp-shadow: 0 4px 14px rgba(37, 211, 102, 0.4); --th-whatsapp-size: 56px; --th-whatsapp-radius: var(--th-radius-full); --th-whatsapp-z: var(--th-z-fixed); /* ── EMPTY STATE ────────────────────────────────────────────────────────── */ --th-empty-icon-color: var(--th-neutral-300); --th-empty-icon-size: 64px; --th-empty-title-color: var(--th-color-text); --th-empty-title-font: var(--th-text-lg); --th-empty-desc-color: var(--th-color-text-muted); --th-empty-desc-font: var(--th-text-base); /* ── TABLE ──────────────────────────────────────────────────────────────── */ --th-table-header-bg: var(--th-neutral-50); --th-table-header-text: var(--th-color-text-secondary); --th-table-header-font: var(--th-text-xs); --th-table-header-weight: var(--th-font-semibold); --th-table-row-bg: var(--th-neutral-0); --th-table-row-bg-alt: var(--th-neutral-50); --th-table-row-hover: var(--th-color-bg-hover); --th-table-border: var(--th-color-border-light); --th-table-text: var(--th-color-text); --th-table-text-font: var(--th-text-sm); /* ── ALERT / MESAJ KUTUSU ───────────────────────────────────────────────── */ --th-alert-radius: var(--th-radius-lg); --th-alert-padding: var(--th-space-4); --th-alert-font: var(--th-text-sm); --th-alert-success-bg: var(--th-emerald-50); --th-alert-success-border: var(--th-emerald-200); --th-alert-success-text: var(--th-emerald-800); --th-alert-success-icon: var(--th-emerald-600); --th-alert-danger-bg: var(--th-red-50); --th-alert-danger-border: var(--th-red-200); --th-alert-danger-text: var(--th-red-800); --th-alert-danger-icon: var(--th-red-600); --th-alert-warning-bg: var(--th-amber-50); --th-alert-warning-border: var(--th-amber-200); --th-alert-warning-text: var(--th-amber-800); --th-alert-warning-icon: var(--th-amber-600); --th-alert-info-bg: var(--th-blue-50); --th-alert-info-border: var(--th-blue-200); --th-alert-info-text: var(--th-blue-800); --th-alert-info-icon: var(--th-blue-600); /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY SYSTEM — Tipografi ═══════════════════════════════════════════════════════════════════════════ */ /* ── Font Family ── */ --th-font-primary: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --th-font-display: 'Poppins', system-ui, sans-serif; --th-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace; /* ── Font Size (Major Third — 1.25 ratio) ── */ --th-text-2xs: 10px; --th-text-xs: 11px; --th-text-sm: 13px; --th-text-base: 14px; --th-text-md: 16px; --th-text-lg: 18px; --th-text-xl: 20px; --th-text-2xl: 24px; --th-text-3xl: 30px; --th-text-4xl: 36px; --th-text-5xl: 48px; --th-text-6xl: 60px; --th-text-7xl: 72px; /* ── Font Weight ── */ --th-font-thin: 100; --th-font-extralight: 200; --th-font-light: 300; --th-font-regular: 400; --th-font-medium: 500; --th-font-semibold: 600; --th-font-bold: 700; --th-font-extrabold: 800; --th-font-black: 900; /* ── Line Height ── */ --th-leading-none: 1; --th-leading-tight: 1.25; --th-leading-snug: 1.375; --th-leading-normal: 1.5; --th-leading-relaxed: 1.625; --th-leading-loose: 2; /* ── Letter Spacing ── */ --th-tracking-tighter: -0.05em; --th-tracking-tight: -0.025em; --th-tracking-normal: 0em; --th-tracking-wide: 0.025em; --th-tracking-wider: 0.05em; --th-tracking-widest: 0.1em; /* ═══════════════════════════════════════════════════════════════════════════ SPACING SYSTEM — Aralık (4px tabanlı) ═══════════════════════════════════════════════════════════════════════════ */ --th-space-0: 0; --th-space-px: 1px; --th-space-0-5: 2px; --th-space-1: 4px; --th-space-1-5: 6px; --th-space-2: 8px; --th-space-2-5: 10px; --th-space-3: 12px; --th-space-3-5: 14px; --th-space-4: 16px; --th-space-5: 20px; --th-space-6: 24px; --th-space-7: 28px; --th-space-8: 32px; --th-space-9: 36px; --th-space-10: 40px; --th-space-11: 44px; --th-space-12: 48px; --th-space-14: 56px; --th-space-16: 64px; --th-space-18: 72px; --th-space-20: 80px; --th-space-24: 96px; --th-space-28: 112px; --th-space-32: 128px; --th-space-36: 144px; --th-space-40: 160px; --th-space-44: 176px; --th-space-48: 192px; --th-space-56: 224px; --th-space-64: 256px; --th-space-72: 288px; --th-space-80: 320px; --th-space-96: 384px; /* ═══════════════════════════════════════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════════════════════════════════════ */ --th-radius-none: 0; --th-radius-xs: 2px; --th-radius-sm: 4px; --th-radius-md: 6px; --th-radius-lg: 8px; --th-radius-xl: 12px; --th-radius-2xl: 16px; --th-radius-3xl: 24px; --th-radius-4xl: 32px; --th-radius-full: 9999px; /* ═══════════════════════════════════════════════════════════════════════════ SHADOW SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ --th-shadow-none: 0 0 0 0 transparent; --th-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --th-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --th-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --th-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --th-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --th-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --th-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); --th-shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.08); /* Renkli Gölgeler */ --th-shadow-primary: 0 4px 14px 0 rgba(20, 97, 58, 0.25); --th-shadow-primary-lg: 0 8px 25px 0 rgba(20, 97, 58, 0.30); --th-shadow-accent: 0 4px 14px 0 rgba(242, 122, 26, 0.25); --th-shadow-accent-lg: 0 8px 25px 0 rgba(242, 122, 26, 0.30); --th-shadow-danger: 0 4px 14px 0 rgba(239, 68, 68, 0.25); --th-shadow-danger-lg: 0 8px 25px 0 rgba(239, 68, 68, 0.30); --th-shadow-success: 0 4px 14px 0 rgba(5, 150, 105, 0.25); --th-shadow-info: 0 4px 14px 0 rgba(59, 130, 246, 0.25); /* ═══════════════════════════════════════════════════════════════════════════ Z-INDEX SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ --th-z-deep: -1; --th-z-base: 0; --th-z-raised: 1; --th-z-dropdown: 100; --th-z-sticky: 200; --th-z-banner: 250; --th-z-fixed: 300; --th-z-header: 400; --th-z-sidebar: 450; --th-z-drawer: 500; --th-z-overlay: 500; --th-z-modal: 600; --th-z-popover: 700; --th-z-tooltip: 800; --th-z-toast: 900; --th-z-max: 9999; /* ═══════════════════════════════════════════════════════════════════════════ TRANSITION / ANIMATION SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ /* Easing Functions */ --th-ease-linear: linear; --th-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --th-ease-in: cubic-bezier(0.4, 0, 1, 1); --th-ease-out: cubic-bezier(0, 0, 0.2, 1); --th-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --th-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --th-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --th-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); --th-ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* Duration */ --th-duration-instant: 0ms; --th-duration-fastest: 50ms; --th-duration-fast: 100ms; --th-duration-normal: 200ms; --th-duration-slow: 300ms; --th-duration-slower: 500ms; --th-duration-slowest: 700ms; --th-duration-crawl: 1000ms; /* Preset Transitions */ --th-transition-instant: 100ms var(--th-ease-default); --th-transition-fast: 150ms var(--th-ease-default); --th-transition-normal: 250ms var(--th-ease-default); --th-transition-slow: 350ms var(--th-ease-default); --th-transition-bounce: 500ms var(--th-ease-bounce); --th-transition-spring: 500ms var(--th-ease-spring); --th-transition-elastic: 600ms var(--th-ease-elastic); --th-transition-default: 250ms var(--th-ease-default); /* ═══════════════════════════════════════════════════════════════════════════ CONTAINER SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ --th-container-xs: 320px; --th-container-sm: 576px; --th-container-md: 768px; --th-container-lg: 992px; --th-container-xl: 1240px; --th-container-2xl: 1440px; --th-container-full: 100%; --th-container-padding: var(--th-space-4); /* ═══════════════════════════════════════════════════════════════════════════ BREAKPOINTS (CSS'te kullanılamaz ama referans) ═══════════════════════════════════════════════════════════════════════════ */ --th-screen-xs: 320px; --th-screen-sm: 576px; --th-screen-md: 768px; --th-screen-lg: 992px; --th-screen-xl: 1240px; --th-screen-2xl: 1440px; --th-screen-3xl: 1920px; /* ═══════════════════════════════════════════════════════════════════════════ OPACITY SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ --th-opacity-0: 0; --th-opacity-5: 0.05; --th-opacity-10: 0.1; --th-opacity-15: 0.15; --th-opacity-20: 0.2; --th-opacity-25: 0.25; --th-opacity-30: 0.3; --th-opacity-40: 0.4; --th-opacity-50: 0.5; --th-opacity-60: 0.6; --th-opacity-70: 0.7; --th-opacity-75: 0.75; --th-opacity-80: 0.8; --th-opacity-90: 0.9; --th-opacity-95: 0.95; --th-opacity-100: 1; /* ═══════════════════════════════════════════════════════════════════════════ ASPECT RATIO (Görsel Oranları) ═══════════════════════════════════════════════════════════════════════════ */ --th-aspect-auto: auto; --th-aspect-square: 1 / 1; --th-aspect-portrait: 3 / 4; --th-aspect-landscape: 4 / 3; --th-aspect-wide: 16 / 9; --th-aspect-ultrawide: 21 / 9; --th-aspect-banner: 3 / 1; --th-aspect-hero: 2 / 1; --th-aspect-thumb: 1 / 1; --th-aspect-card-image: 3 / 4; /* ═══════════════════════════════════════════════════════════════════════════ FOCUS RING (Erişilebilirlik) ═══════════════════════════════════════════════════════════════════════════ */ --th-focus-ring-color: var(--th-color-primary); --th-focus-ring-width: 2px; --th-focus-ring-offset: 2px; --th-focus-ring-style: solid; --th-focus-ring-shadow: 0 0 0 var(--th-focus-ring-offset) var(--th-color-bg), 0 0 0 calc(var(--th-focus-ring-offset) + var(--th-focus-ring-width)) var(--th-focus-ring-color); /* ═══════════════════════════════════════════════════════════════════════════ SCROLLBAR (Özel Scrollbar Stili) ═══════════════════════════════════════════════════════════════════════════ */ --th-scrollbar-width: 8px; --th-scrollbar-track: var(--th-neutral-100); --th-scrollbar-thumb: var(--th-neutral-300); --th-scrollbar-thumb-hover: var(--th-neutral-400); --th-scrollbar-radius: var(--th-radius-full); } /* :root sonu */ /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE TOKEN OVERRIDE'LARI ═══════════════════════════════════════════════════════════════════════════ */ /* ── XSMALL: Küçük telefon (< 576px) ── */ @media (max-width: 575px) { :root { --th-container-padding: var(--th-space-4); --th-text-5xl: 32px; --th-text-4xl: 26px; --th-text-3xl: 22px; --th-text-2xl: 20px; --th-text-xl: 18px; --th-text-sm: 12px; --th-header-height: 56px; --th-header-topbar-height: 0px; --th-header-nav-height: 0px; --th-pdp-gallery-thumb-size: 48px; --th-filter-drawer-width: 100%; --th-minicart-width: 100%; --th-card-body-padding: var(--th-space-2); --th-card-title-font: var(--th-text-xs); --th-card-price-font: var(--th-text-sm); --th-trust-padding: var(--th-space-3); --th-modal-width-sm: calc(100% - 32px); --th-modal-width-md: calc(100% - 32px); --th-scrolltop-size: 40px; --th-whatsapp-size: 48px; --th-announce-height: 36px; --th-announce-font: var(--th-text-xs); } } /* ── SMALL: Büyük telefon (576px - 767px) ── */ @media (min-width: 576px) and (max-width: 767px) { :root { --th-container-padding: var(--th-space-4); --th-text-5xl: 36px; --th-text-4xl: 28px; --th-text-3xl: 24px; --th-header-height: 56px; --th-header-topbar-height: 0px; --th-header-nav-height: 0px; --th-pdp-gallery-thumb-size: 48px; --th-filter-drawer-width: 100%; --th-minicart-width: 100%; --th-card-body-padding: var(--th-space-2); --th-card-title-font: var(--th-text-xs); --th-card-price-font: var(--th-text-sm); --th-trust-padding: var(--th-space-3); --th-modal-width-sm: calc(100% - 32px); --th-modal-width-md: calc(100% - 32px); --th-scrolltop-size: 40px; --th-whatsapp-size: 48px; --th-announce-height: 36px; --th-announce-font: var(--th-text-xs); } } /* ── MEDIUM: Tablet (768px - 991px) ── */ @media (min-width: 768px) and (max-width: 991px) { :root { --th-container-padding: var(--th-space-6); --th-text-5xl: 42px; --th-text-4xl: 32px; --th-text-3xl: 26px; --th-header-height: 100px; --th-header-topbar-height: 32px; --th-filter-drawer-width: 360px; --th-minicart-width: 400px; } } /* ── XXLARGE: Büyük masaüstü (>= 1400px) ── */ @media (min-width: 1400px) { :root { --th-container-padding: var(--th-space-8); --th-text-5xl: 56px; --th-text-4xl: 42px; --th-text-3xl: 34px; --th-text-6xl: 72px; --th-text-7xl: 84px; } /* ── PDP Ek Tokenlar (Lightbox, Bottom Sheet, Toast) ── */ --th-campaign-info-bg: #007185; --th-campaign-gift-bg: #16a34a; --th-campaign-doc-bg: #2563eb; --th-pdp-lightbox-bg: rgba(0, 0, 0, .92); --th-pdp-bottom-sheet-bg: var(--th-neutral-0); --th-pdp-bottom-sheet-radius: var(--th-radius-xl); }