/* ============================================================
   CANVAS THEME RENK DEĞİŞKENLERİ
   ============================================================ */

:root {
    /* ============================================================
       ANA TEMA RENKLERİ (Main Theme Colors)
       ============================================================ */
    
    /* Ana Tema Rengi */
    --cnvs-themecolor: #E62F28;
    --cnvs-themecolor-rgb: 230, 47, 40;
    
    /* Temel Renkler */
    --cnvs-white: #fff;
    --cnvs-black: #000;
    
    /* ============================================================
       KONTRAST RENKLERİ (Contrast Colors)
       ============================================================ */
    
    /* Normal Kontrast Renkleri - Kırmızı Tema Uyumlu */
    --cnvs-contrast-0: #fff;
    --cnvs-contrast-100: #fefefe;
    --cnvs-contrast-200: #f5f5f5;
    --cnvs-contrast-300: #e8e8e8;
    --cnvs-contrast-400: #d1d1d1;
    --cnvs-contrast-500: #b3b3b3;
    --cnvs-contrast-600: #8c8c8c;
    --cnvs-contrast-700: #595959;
    --cnvs-contrast-800: #404040;
    --cnvs-contrast-900: #262626;
    --cnvs-contrast-1000: #000;
    
    /* Ters Kontrast Renkleri - Kırmızı Tema Uyumlu */
    --cnvs-invert-contrast-0: #000;
    --cnvs-invert-contrast-100: #262626;
    --cnvs-invert-contrast-200: #404040;
    --cnvs-invert-contrast-300: #595959;
    --cnvs-invert-contrast-400: #8c8c8c;
    --cnvs-invert-contrast-500: #b3b3b3;
    --cnvs-invert-contrast-600: #d1d1d1;
    --cnvs-invert-contrast-700: #e8e8e8;
    --cnvs-invert-contrast-800: #f5f5f5;
    --cnvs-invert-contrast-900: #fefefe;
    --cnvs-invert-contrast-1000: #fff;
    
    /* Kontrast RGB Değerleri */
    --cnvs-contrast-rgb: 0, 0, 0;
    --cnvs-invert-contrast-rgb: 255, 255, 255;
    
    /* ============================================================
       ARKA PLAN RENKLERİ (Background Colors)
       ============================================================ */
    
    --cnvs-contrast-bg: #fff;
    --cnvs-contrast-bg-offset: #fefefe;
    --cnvs-bg-overlay-bg-opacity: 0.75;
    --cnvs-bg-overlay-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-bg-overlay-bg-opacity));
    
    /* ============================================================
       HEADER RENKLERİ (Header Colors)
       ============================================================ */
    
    --cnvs-topbar-bg: var(--cnvs-contrast-0);
    --cnvs-topbar-color: var(--cnvs-contrast-700);
    --cnvs-topbar-border-color: rgba(var(--cnvs-contrast-rgb), 0.1);
    --cnvs-topbar-social-icon-color: var(--cnvs-contrast-600);
    
    --cnvs-header-bg: var(--cnvs-contrast-0);
    --cnvs-header-sticky-bg: var(--cnvs-header-bg);
    --cnvs-side-header-bg: var(--cnvs-contrast-0);
    
    --cnvs-header-border-color: rgba(var(--cnvs-contrast-rgb), .1);
    --cnvs-header-transparent-border-color: rgba(var(--cnvs-contrast-rgb), .1);
    --cnvs-header-floating-bg: var(--cnvs-contrast-0);
    
    /* ============================================================
       MENÜ RENKLERİ (Menu Colors)
       ============================================================ */
    
    --cnvs-primary-menu-color: var(--cnvs-contrast-900);
    --cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
    --cnvs-primary-menu-active-color: var(--cnvs-primary-menu-hover-color);
    
    --cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-0);
    --cnvs-primary-menu-submenu-color: var(--cnvs-contrast-900);
    --cnvs-primary-menu-submenu-border: 1px solid rgba(var(--cnvs-contrast-rgb), 0.1);
    --cnvs-primary-menu-submenu-hover-bg: rgba(var(--cnvs-contrast-rgb), 0.025);
    --cnvs-primary-menu-submenu-subtitle-color: var(--cnvs-contrast-600);
    
    --cnvs-header-misc-icons-color: var(--cnvs-primary-menu-color);
    
    /* ============================================================
       İÇERİK RENKLERİ (Content Colors)
       ============================================================ */
    
    --cnvs-section-bg: var(--cnvs-contrast-bg-offset);
    --cnvs-heading-color: var(--cnvs-contrast-900);
    --cnvs-line-color: rgba(var(--cnvs-contrast-rgb), .1);
    --cnvs-footer-bg: var(--cnvs-contrast-bg-offset);
    
    /* ============================================================
       PANEL RENKLERİ (Panel Colors)
       ============================================================ */
    
    --cnvs-side-panel-bg: var(--cnvs-contrast-100);
    
    /* ============================================================
       KIRMIZI TEMA ÖZEL RENKLERİ (Red Theme Special Colors)
       ============================================================ */
    
    /* Kırmızı Tema Vurgu Renkleri */
    --cnvs-red-accent-light: #ff6b6b;
    --cnvs-red-accent-medium: #ff5252;
    --cnvs-red-accent-dark: #d32f2f;
    --cnvs-red-accent-darker: #b71c1c;
    
    /* Kırmızı Tema Gradient Renkleri */
    --cnvs-red-gradient-primary: linear-gradient(135deg, #E62F28 0%, #d32f2f 100%);
    --cnvs-red-gradient-secondary: linear-gradient(135deg, #ff6b6b 0%, #E62F28 100%);
    --cnvs-red-gradient-accent: linear-gradient(135deg, #ff5252 0%, #ff6b6b 100%);
    
    /* Kırmızı Tema Overlay Renkleri */
    --cnvs-red-overlay-light: rgba(230, 47, 40, 0.1);
    --cnvs-red-overlay-medium: rgba(230, 47, 40, 0.2);
    --cnvs-red-overlay-dark: rgba(230, 47, 40, 0.3);
    
    /* Kırmızı Tema Gölge Renkleri */
    --cnvs-red-shadow-light: rgba(230, 47, 40, 0.15);
    --cnvs-red-shadow-medium: rgba(230, 47, 40, 0.25);
    --cnvs-red-shadow-dark: rgba(230, 47, 40, 0.35);
    
    /* ============================================================
       SOSYAL MEDYA RENKLERİ (Social Media Colors)
       ============================================================ */
    
    /* Facebook */
    --cnvs-color-facebook: #3b5998;
    --cnvs-color-facebook-rgb: 59, 89, 152;
    
    /* WhatsApp */
    --cnvs-color-whatsapp: #25d366;
    --cnvs-color-whatsapp-rgb: 37, 211, 102;
    
    /* Twitter/X */
    --cnvs-color-twitter: #00acee;
    --cnvs-color-twitter-rgb: 0, 172, 238;
    --cnvs-color-x-twitter: #010101;
    --cnvs-color-x-twitter-rgb: 1, 1, 1;
    
    /* Instagram */
    --cnvs-color-instagram: #e4405f;
    --cnvs-color-instagram-rgb: 228, 64, 95;
    
    /* YouTube */
    --cnvs-color-youtube: #c4302b;
    --cnvs-color-youtube-rgb: 196, 48, 43;
    
    /* LinkedIn */
    --cnvs-color-linkedin: #0e76a8;
    --cnvs-color-linkedin-rgb: 14, 118, 168;
    
    /* Google */
    --cnvs-color-google: #4885ed;
    --cnvs-color-google-rgb: 72, 133, 237;
    
    /* Skype */
    --cnvs-color-skype: #00aff0;
    --cnvs-color-skype-rgb: 0, 175, 240;
    
    /* Vimeo */
    --cnvs-color-vimeo: #86c9ef;
    --cnvs-color-vimeo-rgb: 134, 201, 239;
    
    /* Spotify */
    --cnvs-color-spotify: #1DB954;
    --cnvs-color-spotify-rgb: 29, 185, 84;
    
    /* Slack */
    --cnvs-color-slack: #ECB22E;
    --cnvs-color-slack-rgb: 236, 178, 46;
    
    /* RSS */
    --cnvs-color-rss: #ee802f;
    --cnvs-color-rss-rgb: 238, 128, 47;
    
    /* VK */
    --cnvs-color-vk: #2b587a;
    --cnvs-color-vk-rgb: 43, 88, 122;
    
    /* Yahoo */
    --cnvs-color-yahoo: #720e9e;
    --cnvs-color-yahoo-rgb: 114, 14, 158;
    
    /* Email */
    --cnvs-color-email3: #6567a5;
    --cnvs-color-email3-rgb: 101, 103, 165;
    
    /* Mac Store */
    --cnvs-color-macstore: #333333;
    --cnvs-color-macstore-rgb: 51, 51, 51;
    
    /* Figma */
    --cnvs-color-figma: #ab7c63;
    --cnvs-color-figma-rgb: 171, 124, 99;
    
    /* Diğer Sosyal Medya Renkleri */
    --cnvs-color-delicious: #205cc0;
    --cnvs-color-delicious-rgb: 32, 92, 192;
    
    --cnvs-color-paypal: #00588b;
    --cnvs-color-paypal-rgb: 0, 88, 139;
    
    --cnvs-color-waze: #05c8f7;
    --cnvs-color-waze-rgb: 5, 200, 247;
    
    --cnvs-color-android: #a4c639;
    --cnvs-color-android-rgb: 164, 198, 57;
    
    --cnvs-color-googledrive: #1FA463;
    --cnvs-color-googledrive-rgb: 31, 164, 99;
    
    --cnvs-color-wikipedia: #333;
    --cnvs-color-wikipedia-rgb: 51, 51, 51;
    
    --cnvs-color-stumbleupon: #f74425;
    --cnvs-color-stumbleupon-rgb: 247, 68, 37;
    
    --cnvs-color-foursquare: #25a0ca;
    --cnvs-color-foursquare-rgb: 37, 160, 202;
    
    --cnvs-color-call: #444;
    --cnvs-color-call-rgb: 68, 68, 68;
    
    --cnvs-color-ninetyninedesigns: #f26739;
    --cnvs-color-ninetyninedesigns-rgb: 242, 103, 57;
    
    --cnvs-color-forrst: #5b9a68;
    --cnvs-color-forrst-rgb: 91, 154, 104;
    
    --cnvs-color-digg: #191919;
    --cnvs-color-digg-rgb: 25, 25, 25;
    
    --cnvs-color-reddit: #c6c6c6;
    --cnvs-color-reddit-rgb: 198, 198, 198;
    
    --cnvs-color-blogger: #fc4f08;
    --cnvs-color-blogger-rgb: 252, 79, 8;
    
    --cnvs-color-cc: #688527;
    --cnvs-color-cc-rgb: 104, 133, 39;
    
    --cnvs-color-dribbble: #ea4c89;
    --cnvs-color-dribbble-rgb: 234, 76, 137;
    
    --cnvs-color-evernote: #5ba525;
    --cnvs-color-evernote-rgb: 91, 165, 37;
    
    --cnvs-color-flickr: #ff0084;
    --cnvs-color-flickr-rgb: 255, 0, 132;
    
    --cnvs-color-salesforce: #1798c1;
    --cnvs-color-salesforce-rgb: 23, 152, 193;
    
    --cnvs-color-cloudflare: #f38020;
    --cnvs-color-cloudflare-rgb: 243, 128, 32;
    
    /* ============================================================
       GÖLGE RENKLERİ (Shadow Colors)
       ============================================================ */
    
    --cnvs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --cnvs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --cnvs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* ============================================================
       METİN RENKLERİ (Text Colors)
       ============================================================ */
    
    --cnvs-text-stroke-size: 2px;
    --cnvs-text-stroke-color: var(--cnvs-contrast-900);
    
    /* ============================================================
       BOYUT VE BOŞLUK DEĞİŞKENLERİ (Size & Spacing Variables)
       ============================================================ */
    
    /* Header Boyutları */
    --cnvs-header-height: 100px;
    --cnvs-header-height-sm: 60px;
    --cnvs-header-height-md: 80px;
    --cnvs-header-height-lg: 120px;
    --cnvs-header-height-shrink: 60px;
    
    /* Side Header */
    --cnvs-side-header-width: 260px;
    --cnvs-side-header-padding-gutters: 30px;
    
    /* Side Panel */
    --cnvs-side-panel-size: 300px;
    --cnvs-side-panel-padding: 50px 70px 50px 40px;
    --cnvs-side-panel-widget-padding: 40px;
    
    /* Geçiş Efektleri */
    --cnvs-transitions: 0.5s ease;
    
    /* Boşluklar */
    --cnvs-margin-base: 3rem;
    --cnvs-margin-sm: 2rem;
    --cnvs-margin-lg: 5rem;
    --cnvs-content-padding: 5rem;
    --cnvs-section-margin: 4rem;
    --cnvs-section-padding: var(--cnvs-section-margin);
    --cnvs-col-padding: var(--cnvs-section-padding);
    
    /* Font Boyutları */
    --cnvs-copyrights-font-size: 0.875rem;
    
    /* ============================================================
       FONT DEĞİŞKENLERİ (Font Variables)
       ============================================================ */
    
    --cnvs-headings-font-weight: 600;
    --cnvs-body-font: "Inter", sans-serif;
    --cnvs-primary-font: "Inter", sans-serif;
    --cnvs-secondary-font: "Playfair Display", serif;
    --cnvs-line-height-base: 1.5;
    --cnvs-line-height-content: 1.65;
}

/* ============================================================
   KULLANIM ÖRNEKLERİ (Usage Examples)
   ============================================================ */

/* Ana tema rengi kullanımı */
.theme-color {
    color: var(--cnvs-themecolor);
    background-color: var(--cnvs-themecolor);
}

/* Kırmızı tema özel renkleri kullanımı */
.red-accent {
    color: var(--cnvs-red-accent-medium);
    background-color: var(--cnvs-red-accent-light);
}

.red-gradient {
    background: var(--cnvs-red-gradient-primary);
}

.red-overlay {
    background-color: var(--cnvs-red-overlay-medium);
}

.red-shadow {
    box-shadow: 0 4px 12px var(--cnvs-red-shadow-medium);
}

/* Kontrast renkleri kullanımı */
.text-light {
    color: var(--cnvs-contrast-100);
}

.text-dark {
    color: var(--cnvs-contrast-900);
}

.bg-light {
    background-color: var(--cnvs-contrast-100);
}

.bg-dark {
    background-color: var(--cnvs-contrast-900);
}

/* Sosyal medya renkleri kullanımı */
.facebook-color {
    color: var(--cnvs-color-facebook);
}

.twitter-color {
    color: var(--cnvs-color-twitter);
}

.instagram-color {
    color: var(--cnvs-color-instagram);
}

/* Gölge kullanımı */
.shadow-sm {
    box-shadow: var(--cnvs-box-shadow-sm);
}

.shadow {
    box-shadow: var(--cnvs-box-shadow);
}

.shadow-lg {
    box-shadow: var(--cnvs-box-shadow-lg);
}

/* ============================================================
   RENK KULLANIM REHBERİ (Color Usage Guide)
   ============================================================ */

/*
   ANA TEMA RENKLERİ:
   - --cnvs-themecolor: Ana tema rengi (kırmızı #E62F28)
   - --cnvs-themecolor-rgb: RGB değeri (230, 47, 40)
   - --cnvs-white: Saf beyaz
   - --cnvs-black: Saf siyah

   KIRMIZI TEMA ÖZEL RENKLERİ:
   - --cnvs-red-accent-light: Açık kırmızı vurgu (#ff6b6b)
   - --cnvs-red-accent-medium: Orta kırmızı vurgu (#ff5252)
   - --cnvs-red-accent-dark: Koyu kırmızı vurgu (#d32f2f)
   - --cnvs-red-accent-darker: Daha koyu kırmızı (#b71c1c)
   - --cnvs-red-gradient-primary: Ana kırmızı gradient
   - --cnvs-red-gradient-secondary: İkincil kırmızı gradient
   - --cnvs-red-gradient-accent: Vurgu kırmızı gradient
   - --cnvs-red-overlay-light/medium/dark: Kırmızı overlay renkleri
   - --cnvs-red-shadow-light/medium/dark: Kırmızı gölge renkleri

   KONTRAST RENKLERİ:
   - --cnvs-contrast-0 ile --cnvs-contrast-1000: Açıktan koyuya gri tonları (kırmızı tema uyumlu)
   - --cnvs-invert-contrast-0 ile --cnvs-invert-contrast-1000: Ters kontrast
   - --cnvs-contrast-rgb: RGB değerleri

   HEADER RENKLERİ:
   - --cnvs-header-bg: Header arka planı
   - --cnvs-primary-menu-color: Menü metin rengi
   - --cnvs-primary-menu-hover-color: Hover rengi (kırmızı tema rengi)

   SOSYAL MEDYA RENKLERİ:
   - --cnvs-color-facebook, --cnvs-color-twitter, vb.
   - Her rengin RGB versiyonu da mevcut

   GÖLGE RENKLERİ:
   - --cnvs-box-shadow-sm: Küçük gölge
   - --cnvs-box-shadow: Normal gölge
   - --cnvs-box-shadow-lg: Büyük gölge

   BOYUT DEĞİŞKENLERİ:
   - --cnvs-header-height: Header yüksekliği
   - --cnvs-side-header-width: Yan header genişliği
   - --cnvs-transitions: Geçiş süresi

   KULLANIM ÖRNEKLERİ:
   - .theme-color: Ana kırmızı tema rengi
   - .red-accent: Kırmızı vurgu renkleri
   - .red-gradient: Kırmızı gradient arka planlar
   - .red-overlay: Kırmızı overlay efektleri
   - .red-shadow: Kırmızı gölge efektleri
*/