/* =================================
   🎨 MURATABI - COMPREHENSIVE COLOR SYSTEM
   Ultra Modern Color Management System
   ================================= */

/* =================================
   GLOBAL TYPOGRAPHY
   ================================= */
* {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'liga' 1, 'kern' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =================================
   CORE BRAND COLORS
   ================================= */
:root {
    /* Primary Brand Colors */
    --primary-color: #1e2a3a;
    --secondary-color: #2c3e50;
    --tertiary-color: #34495e;
    --quaternary-color: #e74c3c;
    
    /* RGB Values for rgba() usage */
    --primary-color-rgb: 30, 42, 58;
    --secondary-color-rgb: 44, 62, 80;
    --tertiary-color-rgb: 52, 73, 94;
    --quaternary-color-rgb: 231, 76, 60;
    
    /* =================================
       BACKGROUND SYSTEM
       ================================= */
    /* Main Backgrounds */
    --header-bg: #0f1419;
    --section-bg-a: #0f1419;        /* Ana lacivert ton */
    --section-bg-b: #1a1f2e;        /* Alternatif lacivert ton */
    
    /* Background Gradients */
    --bg-gradient-primary: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #243342 100%);
    --bg-gradient-secondary: linear-gradient(135deg, #1a2332, #243342);
    --bg-gradient-tertiary: linear-gradient(145deg, #1a2332, #243342);
    
    /* =================================
       TEXT COLOR SYSTEM
       ================================= */
    --primary-text-color: #ffffff;
    --secondary-text-color: #f8f9fa;
    --tertiary-text-color: #e8f5e8;
    --text-white: #ffffff;
    --text-cream: #f8f9fa;
    --text-light-green: #e8f5e8;
    
    /* Secondary Text Variations */
    --text-secondary-alt: #b0bec5;
    --text-muted: #78909c;
    --text-disabled: #95a5a6;
    --text-placeholder: rgba(255, 255, 255, 0.5);
    
    /* =================================
       BLUE ACCENT SYSTEM (Header/Footer Theme)
       ================================= */
    --header-accent-primary: #64b5f6;
    --header-accent-secondary: #42a5f5;
    --header-accent-tertiary: #1e88e5;
    --header-text-hover: #64b5f6;
    --header-border-color: #37474f;
    --header-shadow: rgba(0, 0, 0, 0.4);
    --header-highlight: rgba(100, 181, 246, 0.1);
    
    /* Footer Blues */
    --footer-accent-primary: #64b5f6;
    --footer-accent-secondary: #42a5f5;
    --footer-accent-tertiary: #1e88e5;
    --footer-text-hover: #64b5f6;
    --footer-border-color: #37474f;
    --footer-highlight: rgba(100, 181, 246, 0.1);
    --footer-hover-bg: rgba(100, 181, 246, 0.08);
    
    /* =================================
       GREEN NATURE SYSTEM (Hero Slider Theme)
       ================================= */
    --nature-primary-green: #2d5016;    /* Koyu orman yeşili */
    --nature-secondary-green: #1a2f0e;  /* Çok koyu yeşil */
    --nature-tertiary-green: #4a7c59;   /* Orta yeşil */
    --nature-accent-brown: #8b4513;     /* Kahverengi */
    
    /* =================================
       CONTACT THEME COLORS (İletişim)
       ================================= */
    --contact-primary-bg: #0f1419;
    --contact-secondary-bg: #1a2332;
    --contact-tertiary-bg: #243342;
    --contact-accent-primary: #64b5f6;
    --contact-accent-secondary: #42a5f5;
    --contact-accent-tertiary: #1e88e5;
    --contact-text-hover: #64b5f6;
    --contact-highlight-bg: rgba(100, 181, 246, 0.1);
    --contact-hover-bg: rgba(100, 181, 246, 0.08);
    
    /* =================================
       ADVANTAGES SECTION COLORS
       ================================= */
    --advantages-section-bg-a: #0f1419;
    --advantages-section-bg-b: #1a1f2e;
    
    /* =================================
       SOCIAL MEDIA BRAND COLORS
       ================================= */
    --whatsapp-green: #25D366;
    --whatsapp-green-hover: #20b358;
    --instagram-red: #E4405F;
    --instagram-gradient-start: #E4405F;
    --instagram-gradient-end: #fd5949;
    --sahibinden-blue: #1e3d59;
    --sahibinden-blue-hover: #2d5986;
    
    /* =================================
       UI ELEMENT COLORS
       ================================= */
    --scroll-button-bg: #333333;
    --scroll-button-hover: #555555;
    --button-hover-red: #c0392b;
    --red-hover: #c0392b;
    
    /* =================================
       GRADIENT ACCENT COLORS
       ================================= */
    --gradient-orange: #ff6b35;
    --gradient-blue: #4a90e2;
    --gradient-green: #50c878;
    
    /* =================================
       UTILITY COLORS
       ================================= */
    --success-color: #27ae60;
    --success-green: #4caf50;
    --warning-color: #f39c12;
    --error-color: #e74c3c;
    --info-color: #3498db;
    
    /* =================================
       ALPHA/TRANSPARENCY SYSTEM
       ================================= */
    /* White Alpha Variations */
    --white: #ffffff;
    --white-01: rgba(255, 255, 255, 0.1);
    --white-02: rgba(255, 255, 255, 0.2);
    --white-03: rgba(255, 255, 255, 0.3);
    --white-04: rgba(255, 255, 255, 0.4);
    --white-05: rgba(255, 255, 255, 0.5);
    --white-06: rgba(255, 255, 255, 0.6);
    --white-05-opacity: rgba(255, 255, 255, 0.5);
    --white-06-opacity: rgba(255, 255, 255, 0.6);
    
    /* Black Alpha Variations */
    --black: #000000;
    --black-02: rgba(0, 0, 0, 0.2);
    --black-03: rgba(0, 0, 0, 0.3);
    --black-04: rgba(0, 0, 0, 0.4);
    --black-07: rgba(0, 0, 0, 0.7);
    --black-09: rgba(0, 0, 0, 0.9);
    
    /* Common Overlays */
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-bg: rgba(15, 20, 25, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(255, 255, 255, 0.3);
    
    /* =================================
       SHADOW SYSTEM
       ================================= */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --red-shadow: rgba(231, 76, 60, 0.4);
    --whatsapp-shadow: rgba(37, 211, 102, 0.4);
    
    /* =================================
       SUCCESS SYSTEM
       ================================= */
    --success-green-01: rgba(39, 174, 96, 0.1);
    
    /* =================================
       HOVER STATES
       ================================= */
    --hover-overlay: rgba(255, 255, 255, 0.1);
    --hover-accent: rgba(231, 76, 60, 0.2);
    --hover-glass: rgba(255, 255, 255, 0.15);
    
    /* =================================
       GRADIENT SYSTEMS
       ================================= */
    /* Header Gradients */
    --header-bg-gradient: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #243342 100%);
    --header-card-gradient: linear-gradient(145deg, #1a2332, #243342);
    
    /* Footer Gradients */
    --footer-bg-gradient: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #243342 100%);
    --footer-card-gradient: linear-gradient(145deg, #1a2332, #243342);
    --footer-button-gradient: linear-gradient(45deg, #42a5f5, #1e88e5);
    --footer-icon-gradient: linear-gradient(135deg, #64b5f6, #42a5f5);
    
    /* Contact Page Gradients */
    --contact-main-gradient: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #243342 100%);
    --contact-card-gradient: linear-gradient(145deg, #1a2332, #243342);
    --contact-button-gradient: linear-gradient(45deg, #42a5f5, #1e88e5);
    --contact-icon-gradient: linear-gradient(135deg, #64b5f6, #42a5f5);
    
    /* =================================
       ANIMATION VARIABLES
       ================================= */
    --transition-smooth: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-easing: cubic-bezier(0.77, 0, 0.175, 1);
    --transition-fast: all 0.3s ease;
    --transition-medium: all 0.6s ease;
    --transition-slow: all 1.2s ease;
}

/* =================================
   THEME VARIATIONS
   ================================= */

/* Dark Theme (Default) */
[data-theme="dark"] {
    --primary-color: #1a1a1a;
    --secondary-color: #2d2d2d;
    --tertiary-color: #404040;
    --primary-text-color: #ffffff;
    --secondary-text-color: #cccccc;
}

/* Light Theme */
[data-theme="light"] {
    --primary-color: #ffffff;
    --secondary-color: #f8f9fa;
    --tertiary-color: #e9ecef;
    --primary-text-color: #212529;
    --secondary-text-color: #6c757d;
    --header-bg: #ffffff;
    --overlay-dark: rgba(0, 0, 0, 0.1);
}

/* =================================
   COLOR UTILITY CLASSES
   ================================= */

/* Text Colors */
.text-primary { color: var(--primary-text-color) !important; }
.text-secondary { color: var(--secondary-text-color) !important; }
.text-tertiary { color: var(--tertiary-text-color) !important; }
.text-accent { color: var(--quaternary-color) !important; }
.text-white { color: var(--text-white) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-hover { color: var(--header-text-hover) !important; }

/* Background Colors */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-tertiary { background-color: var(--tertiary-color) !important; }
.bg-accent { background-color: var(--quaternary-color) !important; }
.bg-glass { background: var(--glass-bg) !important; }
.bg-gradient-primary { background: var(--bg-gradient-primary) !important; }
.bg-gradient-secondary { background: var(--bg-gradient-secondary) !important; }

/* Section Backgrounds */
.section-bg-a { background: var(--section-bg-a) !important; }
.section-bg-b { background: var(--section-bg-b) !important; }

/* Border Colors */
.border-subtle { border-color: var(--border-subtle) !important; }
.border-accent { border-color: var(--border-accent) !important; }

/* Theme Specific Classes */
.header-theme {
    --accent-color: var(--header-accent-primary);
    --text-hover: var(--header-text-hover);
    --highlight-bg: var(--header-highlight);
}

.footer-theme {
    --accent-color: var(--footer-accent-primary);
    --text-hover: var(--footer-text-hover);
    --highlight-bg: var(--footer-highlight);
}

.nature-theme {
    --accent-color: var(--nature-accent-brown);
    --primary-green: var(--nature-primary-green);
    --secondary-green: var(--nature-secondary-green);
}

.contact-theme {
    --accent-color: var(--contact-accent-primary);
    --text-hover: var(--contact-text-hover);
    --highlight-bg: var(--contact-highlight-bg);
}

/* =================================
   RESPONSIVE COLOR ADJUSTMENTS
   ================================= */
@media (max-width: 768px) {
    :root {
        --overlay-dark: rgba(0, 0, 0, 0.8);
        --glass-bg: rgba(255, 255, 255, 0.08);
        --shadow-medium: rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 480px) {
    :root {
        --overlay-dark: rgba(0, 0, 0, 0.85);
        --glass-bg: rgba(255, 255, 255, 0.1);
    }
}

/* =================================
   ACCESSIBILITY SUPPORT
   ================================= */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-text-color: #ffffff;
        --secondary-text-color: #ffffff;
        --border-subtle: rgba(255, 255, 255, 0.5);
        --glass-bg: rgba(0, 0, 0, 0.8);
        --overlay-dark: rgba(0, 0, 0, 0.9);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    :root {
        --hover-overlay: rgba(255, 255, 255, 0.05);
        --hover-accent: rgba(231, 76, 60, 0.1);
        --transition-smooth: none;
        --transition-bounce: none;
        --transition-easing: none;
    }
}

/* =================================
   PRINT STYLES
   ================================= */
@media print {
    :root {
        --primary-color: #ffffff;
        --secondary-color: #ffffff;
        --tertiary-color: #ffffff;
        --primary-text-color: #000000;
        --secondary-text-color: #333333;
        --quaternary-color: #000000;
        --overlay-dark: transparent;
        --glass-bg: transparent;
        --shadow-light: none;
        --shadow-medium: none;
        --shadow-heavy: none;
    }
}

/* =================================
   COMPONENT-SPECIFIC COLOR SETS
   ================================= */

/* Button Color Variations */
.btn-theme-header {
    --btn-bg: var(--header-accent-primary);
    --btn-hover: var(--header-accent-secondary);
    --btn-text: var(--text-white);
}

.btn-theme-footer {
    --btn-bg: var(--footer-accent-primary);
    --btn-hover: var(--footer-accent-secondary);
    --btn-text: var(--text-white);
}

.btn-theme-nature {
    --btn-bg: var(--nature-accent-brown);
    --btn-hover: var(--nature-primary-green);
    --btn-text: var(--text-white);
}

.btn-theme-whatsapp {
    --btn-bg: var(--whatsapp-green);
    --btn-hover: var(--whatsapp-green-hover);
    --btn-text: var(--text-white);
    --btn-shadow: var(--whatsapp-shadow);
}

/* Card Color Variations */
.card-theme-header {
    background: var(--header-card-gradient);
    border-color: var(--header-border-color);
}

.card-theme-footer {
    background: var(--footer-card-gradient);
    border-color: var(--footer-border-color);
}

.card-theme-contact {
    background: var(--contact-card-gradient);
    border-color: var(--contact-accent-primary);
}

/* =================================
   DEBUG COLORS (Development Only)
   ================================= */
.debug-red { border: 2px solid red !important; }
.debug-blue { border: 2px solid blue !important; }
.debug-green { border: 2px solid green !important; }
.debug-yellow { background: yellow !important; opacity: 0.3 !important; }