/* ========================================================= TMV2 - 01 VARIABLES.CSS --------------------------------------------------------- AMAÇ: Bu dosya kurumsal sitenin ana tasarım hafızasıdır. BURADA NE VAR? - Renkler - Fontlar - Yazı boyutları - Boşluk değerleri - Radius değerleri - Gölge değerleri - Geçiş animasyonları - Navbar değişkenleri - Button değişkenleri - Form değişkenleri - Tema renkleri - Dark mode ayarları KURAL: Diğer CSS dosyalarında sabit renk/font yazılmayacak. Her şey buradaki değişkenlerden beslenecek. ========================================================= */ /* ========================================================= 1. DEFAULT TEMA --------------------------------------------------------- Bu alan sitenin varsayılan tema değerlerini belirler. Eğer html üzerinde özel tema seçilmezse bu değerler kullanılır. Örnek: ========================================================= */ :root, [data-tmv2-theme="default"] { /* ===================================================== TEMA ADI ----------------------------------------------------- Sistemde aktif temanın adını temsil eder. ===================================================== */ --tmv2-theme-name: "default"; /* ===================================================== ANA MARKA RENKLERİ ----------------------------------------------------- Primary: Sitenin ana kurumsal rengidir. Hover: Buton, link ve hover efektlerinde kullanılır. Dark: Daha koyu vurgu alanlarında kullanılır. Light: Hafif arka planlarda kullanılır. RGB: Transparan efektlerde kullanılır. Örnek: rgba(var(--tmv2-color-primary-rgb), .15) ===================================================== */ --tmv2-color-primary: #CABA9F; --tmv2-color-primary-hover: #b5a58a; --tmv2-color-primary-dark: #968a75; --tmv2-color-primary-light: #eee5d6; --tmv2-color-primary-rgb: 202, 186, 159; /* ===================================================== YARDIMCI RENKLER ----------------------------------------------------- Secondary: İkincil buton, arka plan veya metinlerde kullanılır. Accent: Dikkat çekici küçük vurgular için kullanılır. ===================================================== */ --tmv2-color-secondary: #334155; --tmv2-color-accent: #f59e0b; /* ===================================================== DURUM RENKLERİ ----------------------------------------------------- Success: Başarılı işlem Danger : Hata / silme / riskli işlem Warning: Uyarı Info : Bilgilendirme ===================================================== */ --tmv2-color-success: #36a25d; --tmv2-color-danger: #eb4444; --tmv2-color-warning: #e9ad45; --tmv2-color-info: #4b9ec4; /* ===================================================== ARKA PLAN RENKLERİ ----------------------------------------------------- Body: Sayfanın genel arka planıdır. Surface: Navbar, footer, kutu gibi yüzeylerde kullanılır. Card: Kartların arka planıdır. Muted: Hafif gri alanlarda kullanılır. ===================================================== */ --tmv2-bg-body: #f8fafc; --tmv2-bg-surface: #ffffff; --tmv2-bg-surface-2: #f1f5f9; --tmv2-bg-surface-3: #e2e8f0; --tmv2-bg-card: #ffffff; --tmv2-bg-muted: #f8fafc; /* ===================================================== METİN RENKLERİ ----------------------------------------------------- Main: Normal metin rengi. Soft: Açıklama metinleri için. Muted: Daha pasif metinler için. Dark: Başlıklar için. Inverse: Koyu zemin üzerindeki açık metinler için. ===================================================== */ --tmv2-text-main: #1a45a8; --tmv2-text-soft: #3f4b5f; --tmv2-text-muted: #808ea0; --tmv2-text-dark: #1f2d6d; --tmv2-text-inverse: #ffffff; /* Footer-specific tokens (map to text-muted by default) */ --tmv2-footer-muted-rgb: var(--tmv2-text-muted-rgb, 128,142,160); --tmv2-footer-bg-gradient: var(--tmv2-gradient-surface); /* Footer dark-mode specific tokens (can be overridden per theme) */ --tmv2-footer-muted-rgb-dark: var(--tmv2-text-muted-rgb, 128,142,160); --tmv2-footer-bg-gradient-dark: linear-gradient(135deg, rgba(var(--tmv2-text-inverse-rgb), .06), var(--tmv2-bg-surface)); /* on-primary RGB for accessible text on primary surfaces */ --tmv2-on-primary: #ffffff; --tmv2-on-primary-rgb: 255,255,255; /* RGB tokens for alpha/overlay helpers */ --tmv2-text-main-rgb: 26,69,168; --tmv2-text-soft-rgb: 63,75,95; --tmv2-text-muted-rgb: 128,142,160; --tmv2-text-dark-rgb: 31,45,109; --tmv2-text-inverse-rgb: 255,255,255; /* ===================================================== BORDER RENKLERİ ----------------------------------------------------- Border: Standart çizgi rengi. Border Soft: Hafif çizgiler için. Border Strong: Daha belirgin çizgiler için. ===================================================== */ --tmv2-border: #e2e8f0; --tmv2-border-soft: #f1f5f9; --tmv2-border-strong: #cbd5e1; /* ===================================================== FONT SİSTEMİ ----------------------------------------------------- Main: Tüm gövde yazıları için. Heading: Başlıklar için. Heading Pro: Hero, özel başlık, marka alanları için. Mono: Kod, teknik veri, admin panel değerleri için. ===================================================== */ --tmv2-font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tmv2-font-heading: "Poppins", "Inter", sans-serif; --tmv2-font-heading-pro: "Manrope", "Poppins", sans-serif; --tmv2-font-mono: "JetBrains Mono", Consolas, monospace; /* ===================================================== FONT BOYUTLARI ----------------------------------------------------- Tüm yazı boyutları merkezi olarak buradan yönetilir. ===================================================== */ --tmv2-font-xs: .75rem; --tmv2-font-sm: .875rem; --tmv2-font-base: 1rem; --tmv2-font-lg: 1.125rem; --tmv2-font-xl: 1.25rem; --tmv2-font-2xl: 1.5rem; --tmv2-font-3xl: 1.875rem; --tmv2-font-4xl: 2.25rem; --tmv2-font-5xl: 3rem; --tmv2-font-6xl: 4rem; /* ===================================================== FONT KALINLIKLARI ===================================================== */ --tmv2-weight-regular: 400; --tmv2-weight-medium: 500; --tmv2-weight-semibold: 600; --tmv2-weight-bold: 700; --tmv2-weight-extrabold: 800; --tmv2-weight-black: 900; /* ===================================================== SATIR YÜKSEKLİĞİ ----------------------------------------------------- tight : Başlıklar normal : Genel metin relaxed : Uzun açıklamalar ===================================================== */ --tmv2-leading-tight: 1.15; --tmv2-leading-normal: 1.5; --tmv2-leading-relaxed: 1.75; /* ===================================================== BOŞLUK SİSTEMİ ----------------------------------------------------- Padding, margin, gap gibi değerlerde kullanılır. ===================================================== */ --tmv2-space-1: .25rem; --tmv2-space-2: .5rem; --tmv2-space-3: .75rem; --tmv2-space-4: 1rem; --tmv2-space-5: 1.25rem; --tmv2-space-6: 1.5rem; --tmv2-space-8: 2rem; --tmv2-space-10: 2.5rem; --tmv2-space-12: 3rem; --tmv2-space-16: 4rem; --tmv2-space-20: 5rem; --tmv2-space-24: 6rem; /* ===================================================== RADIUS SİSTEMİ ----------------------------------------------------- Kart, buton, input ve modal köşe yuvarlaklıkları. ===================================================== */ --tmv2-radius-xs: .25rem; --tmv2-radius-sm: .375rem; --tmv2-radius-md: .625rem; --tmv2-radius-lg: .875rem; --tmv2-radius-xl: 1.25rem; --tmv2-radius-2xl: 1.75rem; --tmv2-radius-3xl: 2.25rem; --tmv2-radius-pill: 999px; /* ===================================================== GÖLGE SİSTEMİ ----------------------------------------------------- Kart, dropdown, modal, navbar ve hover efektlerinde kullanılır. ===================================================== */ --tmv2-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05); --tmv2-shadow-sm: 0 4px 12px rgba(15, 23, 42, .08); --tmv2-shadow-md: 0 12px 28px rgba(15, 23, 42, .12); --tmv2-shadow-lg: 0 24px 60px rgba(15, 23, 42, .18); --tmv2-shadow-xl: 0 32px 80px rgba(15, 23, 42, .22); --tmv2-shadow-primary: 0 16px 40px rgba(var(--tmv2-color-primary-rgb), .28); /* ===================================================== GEÇİŞ SİSTEMİ ----------------------------------------------------- Hover, focus ve animasyon geçişleri. ===================================================== */ --tmv2-transition-fast: .18s ease; --tmv2-transition-normal: .28s ease; --tmv2-transition-slow: .45s ease; /* ===================================================== BLUR SİSTEMİ ----------------------------------------------------- Cam efekti, navbar ve modern yüzeylerde kullanılır. ===================================================== */ --tmv2-blur-sm: blur(8px); --tmv2-blur-md: blur(16px); --tmv2-blur-lg: blur(24px); /* ===================================================== GRADIENT SİSTEMİ ----------------------------------------------------- Hero, CTA, kart ve vurgu alanları için kullanılır. ===================================================== */ --tmv2-gradient-primary: linear-gradient(135deg, var(--tmv2-color-primary), var(--tmv2-color-primary-dark)); --tmv2-gradient-soft: linear-gradient(135deg, rgba(var(--tmv2-color-primary-rgb), .14), transparent); --tmv2-gradient-surface: linear-gradient(180deg, var(--tmv2-bg-surface), var(--tmv2-bg-surface-2)); /* ===================================================== CONTAINER ----------------------------------------------------- Genel site genişliği. ===================================================== */ --tmv2-container: 1320px; --tmv2-container-padding: 1rem; /* ===================================================== BUTTON DEĞİŞKENLERİ ===================================================== */ --tmv2-btn-radius: var(--tmv2-radius-pill); --tmv2-btn-padding-y: .75rem; --tmv2-btn-padding-x: 1.35rem; --tmv2-btn-font-size: .95rem; --tmv2-btn-font-weight: var(--tmv2-weight-bold); /* ===================================================== FORM DEĞİŞKENLERİ ===================================================== */ --tmv2-input-bg: #ffffff; --tmv2-input-text: var(--tmv2-text-main); --tmv2-input-border: var(--tmv2-border); --tmv2-input-border-focus: var(--tmv2-color-primary); --tmv2-input-radius: var(--tmv2-radius-lg); --tmv2-input-shadow-focus: 0 0 0 .25rem rgba(var(--tmv2-color-primary-rgb), .18); /* ===================================================== Z-INDEX ----------------------------------------------------- Katman sıralaması. ===================================================== */ --tmv2-z-dropdown: 1000; --tmv2-z-sticky: 1020; --tmv2-z-fixed: 1030; --tmv2-z-modal: 1050; --tmv2-z-tooltip: 1080; } /* ========================================================= THEME HELPERS & RESPONSIVE TYPOGRAPHY --------------------------------------------------------- Modern tema uyumluluğu için HSL helper token'ları, responsive font ve motion token'ları ekleniyor. Bunlar gerektiğinde projede kolayca kullanılabilir. ========================================================= */ :root { /* HSL helpers (opsiyonel) */ --tmv2-color-primary-h: 34; /* örnek: 34 202,186,159 karşılığı approx */ --tmv2-color-primary-s: 15%; --tmv2-color-primary-l: 70%; /* Responsive base font (clamp ile akıllı boyut) */ --tmv2-font-base-clamp: clamp(.95rem, .9vw + .45rem, 1.05rem); /* Motion token — kullanıcı tercihlerine göre override edilebilir */ --tmv2-motion: transform .28s ease, opacity .28s ease; } /* ========================================================= TMV2 THEME MODES 1) light 2) dark 3) theme ========================================================= */ /* LIGHT MODE - Kurumsal mavi */ :root, [data-tmv2-mode="light"] { --tmv2-theme-name: "light"; --tmv2-color-primary: #2563eb; --tmv2-color-primary-hover: #1d4ed8; --tmv2-color-primary-dark: #1e40af; --tmv2-color-primary-light: #dbeafe; --tmv2-color-primary-rgb: 37, 99, 235; --tmv2-bg-body: #f8fafc; --tmv2-bg-surface: #ffffff; --tmv2-bg-surface-2: #f1f5f9; --tmv2-bg-surface-3: #e2e8f0; --tmv2-bg-card: #ffffff; --tmv2-bg-muted: #f8fafc; --tmv2-text-main: #122246; --tmv2-text-soft: #3f4b5f; --tmv2-text-muted: #808ea0; --tmv2-text-dark: #091134; --tmv2-text-inverse: #ffffff; --tmv2-on-primary: #ffffff; --tmv2-on-primary-rgb: 255,255,255; /* RGB fallbacks for light mode */ --tmv2-text-main-rgb: 18,34,70; --tmv2-text-soft-rgb: 63,75,95; --tmv2-text-muted-rgb: 128,142,160; --tmv2-text-dark-rgb: 9,17,52; --tmv2-text-inverse-rgb: 255,255,255; --tmv2-border: #e2e8f0; --tmv2-border-soft: #f1f5f9; --tmv2-border-strong: #cbd5e1; --tmv2-input-bg: #ffffff; --tmv2-input-text: #14213f; --tmv2-input-border: #dbe3ef; --tmv2-nav-bg: rgba(255,255,255,.94); --tmv2-nav-text: #0f172a; --tmv2-nav-link: #334155; --tmv2-nav-hover: #2563eb; --tmv2-nav-active-bg: rgba(37,99,235,.12); --tmv2-nav-dropdown-bg: #ffffff; --tmv2-nav-dropdown-text: #182a50; --tmv2-nav-dropdown-hover-bg: #eff6ff; --tmv2-nav-border: rgba(226,232,240,.90); --tmv2-nav-shadow: 0 18px 45px rgba(32, 49, 90, 0.12); /* On-primary / on-surface for accessible text on colored surfaces */ --tmv2-on-primary: #ffffff; --tmv2-on-surface: var(--tmv2-text-main); --tmv2-focus-ring: rgba(var(--tmv2-color-primary-rgb), .18); /* Footer tokens for light mode */ --tmv2-footer-muted-rgb: var(--tmv2-text-muted-rgb, 128,142,160); --tmv2-footer-bg-gradient: linear-gradient(135deg, rgba(var(--tmv2-color-primary-rgb), .06), var(--tmv2-bg-surface)); } /* DARK MODE - Koyu zemin, beyaz yazı */ [data-tmv2-mode="dark"] { color-scheme: dark; --tmv2-theme-name: "dark"; --tmv2-color-primary: #60a5fa; --tmv2-color-primary-hover: #93c5fd; --tmv2-color-primary-dark: #3b82f6; --tmv2-color-primary-light: rgba(96,165,250,.16); --tmv2-color-primary-rgb: 96, 165, 250; --tmv2-bg-body: #192e64; --tmv2-bg-surface: #111827; --tmv2-bg-surface-2: #1f2937; --tmv2-bg-surface-3: #273449; --tmv2-bg-card: #111827; --tmv2-bg-muted: #1f2937; --tmv2-text-main: #f8fafc; --tmv2-text-soft: #e1e6ea; --tmv2-text-muted: #bfcad6; --tmv2-text-dark: #ffffff; --tmv2-text-inverse: #152242; --tmv2-on-primary: #091027; --tmv2-on-primary-rgb: 9,16,39; /* RGB fallbacks for dark mode */ --tmv2-text-main-rgb: 248,250,252; --tmv2-text-soft-rgb: 225,230,235; --tmv2-text-muted-rgb: 191,202,214; --tmv2-text-dark-rgb: 255,255,255; --tmv2-text-inverse-rgb: 21,34,66; --tmv2-border: rgba(255,255,255,.12); --tmv2-border-soft: rgba(255,255,255,.08); --tmv2-border-strong: rgba(255,255,255,.22); --tmv2-input-bg: #1f2937; --tmv2-input-text: #ffffff; --tmv2-input-border: rgba(255,255,255,.16); --tmv2-nav-bg: rgba(14, 29, 64, 0.96); --tmv2-nav-text: #ffffff; --tmv2-nav-link: #ffffff; --tmv2-nav-hover: #ffffff; --tmv2-nav-active-bg: rgba(255,255,255,.14); --tmv2-nav-dropdown-bg: #111827; --tmv2-nav-dropdown-text: #ffffff; --tmv2-nav-dropdown-hover-bg: rgba(255,255,255,.12); --tmv2-nav-border: rgba(255,255,255,.12); --tmv2-nav-shadow: 0 24px 60px rgba(6, 6, 31, 0.42); --tmv2-on-primary: #091027; --tmv2-on-surface: var(--tmv2-text-main); --tmv2-focus-ring: rgba(var(--tmv2-color-primary-rgb), .22); /* Footer tokens for dark mode */ --tmv2-footer-muted-rgb: var(--tmv2-text-muted-rgb, 191,202,214); --tmv2-footer-bg-gradient: linear-gradient(135deg, rgba(var(--tmv2-color-primary-rgb), .12), var(--tmv2-bg-surface)); } /* THEME MODE - Bej / altın kurumsal */ [data-tmv2-mode="theme"] { --tmv2-theme-name: "theme"; --tmv2-color-primary: #b89b63; --tmv2-color-primary-hover: #9f854f; --tmv2-color-primary-dark: #7a6339; --tmv2-color-primary-light: #f1e7d3; --tmv2-color-primary-rgb: 184, 155, 99; --tmv2-bg-body: #f8f4ed; --tmv2-bg-surface: #ffffff; --tmv2-bg-surface-2: #f3eadc; --tmv2-bg-surface-3: #e6d4b8; --tmv2-bg-card: #ffffff; --tmv2-bg-muted: #f8f4ed; --tmv2-text-main: #1f2937; --tmv2-text-soft: #5f574d; --tmv2-text-muted: #8b8071; --tmv2-text-dark: #111827; --tmv2-text-inverse: #ffffff; --tmv2-on-primary: #ffffff; --tmv2-on-primary-rgb: 255,255,255; /* RGB fallbacks for theme mode */ --tmv2-text-main-rgb: 31,41,55; --tmv2-text-soft-rgb: 95,87,77; --tmv2-text-muted-rgb: 140,125,110; --tmv2-text-dark-rgb: 17,24,39; --tmv2-text-inverse-rgb: 255,255,255; --tmv2-border: #e6d7bd; --tmv2-border-soft: #f3eadc; --tmv2-border-strong: #cdbb9d; --tmv2-input-bg: #ffffff; --tmv2-input-text: #1f2937; --tmv2-input-border: #e6d7bd; --tmv2-nav-bg: rgba(255,255,255,.94); --tmv2-nav-text: #1f2937; --tmv2-nav-link: #5f574d; --tmv2-nav-hover: #7a6339; --tmv2-nav-active-bg: rgba(184,155,99,.18); --tmv2-nav-dropdown-bg: #ffffff; --tmv2-nav-dropdown-text: #1f2937; --tmv2-nav-dropdown-hover-bg: #f1e7d3; --tmv2-nav-border: rgba(205,187,157,.75); --tmv2-nav-shadow: 0 18px 45px rgba(122,99,57,.20); --tmv2-on-primary: #ffffff; --tmv2-on-surface: var(--tmv2-text-main); --tmv2-focus-ring: rgba(var(--tmv2-color-primary-rgb), .16); /* Footer tokens for theme mode */ --tmv2-footer-muted-rgb: var(--tmv2-text-muted-rgb, 140,125,110); --tmv2-footer-bg-gradient: linear-gradient(135deg, rgba(var(--tmv2-color-primary-rgb), .06), var(--tmv2-bg-surface)); } /* Apply the responsive font and base theme styles to the document */ html { font-family: var(--tmv2-font-main); font-size: var(--tmv2-font-base-clamp); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--tmv2-bg-body); color: var(--tmv2-text-main); line-height: var(--tmv2-leading-normal); transition: background-color var(--tmv2-transition-normal), color var(--tmv2-transition-normal); } /* prefers-reduced-motion support */ @media (prefers-reduced-motion: reduce) { :root { --tmv2-transition-fast: 0s; --tmv2-transition-normal: 0s; --tmv2-transition-slow: 0s; --tmv2-motion: none; } * { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; } } /* ========================================================= COMPONENTS - THEME COMPATIBLE BASE STYLES --------------------------------------------------------- Basit component stilleri tema token'ları ile bağlanmış olarak ekleniyor; Bootstrap sınıflarıyla birlikte kullanılabilir. ========================================================= */ /* Buttons */ .btn-primary { background-color: var(--tmv2-color-primary) !important; color: var(--tmv2-on-primary) !important; border-color: transparent !important; transition: var(--tmv2-motion); } .btn-primary:hover, .btn-primary:focus { background-color: var(--tmv2-color-primary-hover) !important; color: var(--tmv2-on-primary) !important; box-shadow: 0 8px 30px rgba(var(--tmv2-color-primary-rgb), .12); } .btn-outline-primary { color: var(--tmv2-color-primary); border-color: rgba(var(--tmv2-color-primary-rgb), .18); background: transparent; } .btn-outline-primary:hover { background: var(--tmv2-color-primary); color: var(--tmv2-on-primary); } /* Cards */ .card { background: var(--tmv2-bg-card); color: var(--tmv2-text-main); border: 1px solid var(--tmv2-border); box-shadow: var(--tmv2-shadow-xs); border-radius: var(--tmv2-radius-lg); transition: var(--tmv2-motion); } .card .card-title { color: var(--tmv2-text-dark); } .card .card-text { color: var(--tmv2-text-soft); } .card:hover { box-shadow: var(--tmv2-shadow-sm); transform: translateY(-2px); } /* Images inside cards */ .card-img-top { border-top-left-radius: var(--tmv2-radius-lg); border-top-right-radius: var(--tmv2-radius-lg); } /* Forms */ .form-control { background: var(--tmv2-input-bg); color: var(--tmv2-input-text); border: 1px solid var(--tmv2-input-border); border-radius: var(--tmv2-input-radius); transition: border-color var(--tmv2-transition-normal), box-shadow var(--tmv2-transition-normal); } .form-control:focus { border-color: var(--tmv2-input-border-focus); box-shadow: var(--tmv2-input-shadow-focus); outline: none; } /* Navbar / Nav */ .tmv2-navbar, .navbar { background: var(--tmv2-nav-bg) !important; color: var(--tmv2-nav-text) !important; border-bottom: 1px solid var(--tmv2-nav-border); box-shadow: var(--tmv2-nav-shadow); } .tmv2-navbar a, .navbar a { color: var(--tmv2-nav-link) !important; } .tmv2-navbar a:hover, .navbar a:hover { color: var(--tmv2-nav-hover) !important; } /* Focus visible accessibility helper */ :focus-visible { box-shadow: 0 0 0 4px var(--tmv2-focus-ring); }