/* =====================================================
   CSS VARIABLES - Premium Platform Premium Level
   ===================================================== */

:root {
    /* Primary Colors - Sandstone Gold (default theme) */
    --primary-color: #C28E0E;
    --primary-dark: #8F680A;
    --primary-light: #FFF7E6;
    --secondary-color: #8B5E34;
    --accent-color: #D4AF37;

    /* P1-2 FIX: On-Color Tokens (Material Design Standard) */
    /* Text colors for use ON colored backgrounds */
    --on-primary: #ffffff;       /* White text on primary bg */
    --on-primary-dark: #ffffff;  /* White text on dark primary bg */
    --on-secondary: #ffffff;     /* White text on secondary bg */
    --on-surface: #1e293b;       /* Dark text on surface bg */
    --on-background: #2c3e50;    /* Text on background */
    --on-error: #ffffff;         /* White text on error bg */
    --on-success: #ffffff;       /* White text on success bg */
    --on-warning: #1e293b;       /* Dark text on warning bg (yellow needs dark text) */
    
    /* Status Colors */
    --success-color: #10b981;
    --success-dark: #047857;
    --success-light: #ecfdf5;
    --warning-color: #f59e0b;
    --warning-dark: #d97706;
    --warning-light: #fef3c7;
    --danger-color: #ef4444;
    --danger-dark: #dc2626;
    --danger-light: #fee2e2;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Text Colors */
    --text-color: #2c3e50;
    --text-dark: #1e293b;
    --text-light: #475569;  /* Improved contrast - was #64748b */
    --text-muted: #64748b;  /* Improved contrast - was #94a3b8 */
    --muted-color: #94a3b8; /* Muted text color for reviews */
    
    /* Background Colors */
    --background-color: #ffffff;
    --bg-light: #f8fafc;
    --bg-muted: #f1f5f9;
    --white: #ffffff;
    --black: #000000;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    --border-light: #cbd5e1;  /* Improved contrast - was #f1f5f9 */
    --border-dark: #cbd5e1;
    --border-accessible: #94a3b8;  /* High contrast border for inputs */
    
    /* Gradients - Sandstone Gold */
    --gradient-primary: linear-gradient(135deg, #8B5E34 0%, #C28E0E 100%);
    --gradient-primary-dark: linear-gradient(135deg, #8F680A 0%, #C28E0E 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition: all var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --motion-fast: 0.15s;
    --motion-base: 0.25s;
    --motion-slow: 0.4s;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows & RGBA Values */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 20px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 25px 60px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --primary-shadow: rgba(194, 142, 14, 0.3);
    --primary-shadow-hover: rgba(194, 142, 14, 0.4);
    --success-shadow: rgba(16, 185, 129, 0.3);
    --success-shadow-hover: rgba(16, 185, 129, 0.4);
    --warning-shadow: rgba(245, 158, 11, 0.4);
    --warning-shadow-hover: rgba(245, 158, 11, 0.6);
    
    /* Additional Shadow Variables for Search & Interactive Elements */
    --primary-shadow-light: rgba(194, 142, 14, 0.1);
    --error-shadow-light: rgba(239, 68, 68, 0.2);
    --white-overlay-15: rgba(255, 255, 255, 0.15);
    --white-overlay-20: rgba(255, 255, 255, 0.2);
    --white-overlay-25: rgba(255, 255, 255, 0.25);
    --white-overlay-30: rgba(255, 255, 255, 0.3);
    --success-pulse-light: rgba(66, 220, 101, 0.3);
    --success-pulse-strong: rgba(66, 220, 101, 0.6);
    
    /* Social Media Brand Colors */
    --whatsapp-green: #25d366;
    --google-red: #ea4335;
    --google-green: #34a853;
    --google-blue: #4285f4;
    --facebook-blue: #1877f2;
    --instagram-gradient: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    --linkedin-blue: #0077b5;
    --twitter-blue: #1da1f2;
    
    /* Common Whites and Transparency */
    --white-pure: #ffffff;
    --white-soft: rgba(255, 255, 255, 0.8);
    --white-muted: rgba(255, 255, 255, 0.6);
    --white-faint: rgba(255, 255, 255, 0.1);
    
    /* Common Blacks and Grays */
    --black-pure: #000000;
    --black-soft: rgba(0, 0, 0, 0.8);
    --black-muted: rgba(0, 0, 0, 0.6);
    --black-faint: rgba(0, 0, 0, 0.1);
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Common Shadow RGBA values */
    --shadow-black-05: rgba(0, 0, 0, 0.05);
    --shadow-black-10: rgba(0, 0, 0, 0.1);
    --shadow-black-15: rgba(0, 0, 0, 0.15);
    --shadow-black-20: rgba(0, 0, 0, 0.2);
    --shadow-black-25: rgba(0, 0, 0, 0.25);
    --shadow-black-30: rgba(0, 0, 0, 0.3);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --white-overlay: rgba(255, 255, 255, 0.15);
    --black-overlay: rgba(0, 0, 0, 0.5);
    --error-light: rgba(239, 68, 68, 0.1);
    --error-shadow: rgba(239, 68, 68, 0.2);
    
    /* Typography */
    /* Sistem CJK/Arapça yedeği (webfont indirilmez): Latin fontlarında glyph yoksa OS-yerleşik font kullanılır.
       macOS: Hiragino/PingFang/Apple SD Gothic/Geeza · Windows: Yu Gothic/YaHei/Malgun/Segoe · Linux/Android: Noto CJK/Arabic. */
    --fallback-cjk: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'PingFang SC', 'Microsoft YaHei', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans CJK JP', 'Noto Sans CJK SC', 'Noto Sans CJK KR', 'Geeza Pro', 'Noto Sans Arabic';
    --font-family-primary: 'Inter', 'system-ui', var(--fallback-cjk), sans-serif;
    --font-family-base: 'Inter', 'system-ui', var(--fallback-cjk), sans-serif;
    --font-family-display: 'Poppins', 'Inter', var(--fallback-cjk), sans-serif;
    --font-family-heading: 'Poppins', 'Inter', var(--fallback-cjk), sans-serif;
    --font-family-mono: 'Fira Code', Consolas, Monaco, monospace;
    --font-family-serif: 'Playfair Display', var(--fallback-cjk), serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    
    /* Responsive Breakpoints - Standardized System */
    --breakpoint-xs: 320px;   /* Smallest mobile devices */
    --breakpoint-sm: 480px;   /* Small mobile devices */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops */
    --breakpoint-xl: 1200px;  /* Desktop */
    --breakpoint-2xl: 1400px; /* Large desktop */
    --breakpoint-3xl: 1600px; /* Ultra wide */
    
    /* Container Max Widths */
    --container-xs: 100%;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
    
    /* Grid Gaps - Responsive */
    --gap-xs: 0.75rem;   /* 12px */
    --gap-sm: 1rem;      /* 16px */
    --gap-md: 1.5rem;    /* 24px */
    --gap-lg: 2rem;      /* 32px */
    --gap-xl: 3rem;      /* 48px */
    
    /* Touch Target Sizes */
    --touch-target-min: 44px;  /* WCAG minimum */
    --touch-target-optimal: 48px; /* iOS/Material Design */
    --touch-target-large: 56px; /* Large buttons */
}

/* BAŞLIK WEB FONTU YEDEKLERİ (her içerik sayfası variables.css yükler; critical-loading.css 9/24 sayfada) — font gelene dek aynı genişlikte yazı (satır sayısı değişmez ⇒ kayma yok).
   Zincire theme-manager-universal.js (yedekli) ve sunucu (server.js tema-fontlari) ekler: '<web font>', '<web font> Yedek G/N/D|A/R/D', <temanın zinciri>.
   Yerel font yoksa yüz yüklenmez, tarayıcı sıradakine geçer (indirme yok). size-adjust = web font genişliği / yedek genişliği,
   64 px kalın Türkçe+Latin 4 metin ortalaması (Chromium ölçümü; Georgia/Arial Windows dosyası, Noto Serif/Roboto
   Google, DejaVu sistem): Playfair G 88,96 · N 89,96 · D 81,22 | Fraunces G 96,77 · N 97,86 · D 88,35 | Poppins A 108,80 · R 116,22 · D 92,15. */
@font-face { font-family: 'Playfair Display Yedek G'; src: local('Georgia'); font-weight: 100 600; size-adjust: 88.96%; }
@font-face { font-family: 'Playfair Display Yedek G'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 700 900; size-adjust: 88.96%; }
@font-face { font-family: 'Playfair Display Yedek N'; src: local('Noto Serif'), local('NotoSerif'); font-weight: 100 600; size-adjust: 89.96%; }
@font-face { font-family: 'Playfair Display Yedek N'; src: local('Noto Serif Bold'), local('NotoSerif-Bold'); font-weight: 700 900; size-adjust: 89.96%; }
@font-face { font-family: 'Playfair Display Yedek D'; src: local('DejaVu Serif'), local('DejaVuSerif'); font-weight: 100 600; size-adjust: 81.22%; }
@font-face { font-family: 'Playfair Display Yedek D'; src: local('DejaVu Serif Bold'), local('DejaVuSerif-Bold'); font-weight: 700 900; size-adjust: 81.22%; }
@font-face { font-family: 'Fraunces Yedek G'; src: local('Georgia'); font-weight: 100 600; size-adjust: 96.77%; }
@font-face { font-family: 'Fraunces Yedek G'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 700 900; size-adjust: 96.77%; }
@font-face { font-family: 'Fraunces Yedek N'; src: local('Noto Serif'), local('NotoSerif'); font-weight: 100 600; size-adjust: 97.86%; }
@font-face { font-family: 'Fraunces Yedek N'; src: local('Noto Serif Bold'), local('NotoSerif-Bold'); font-weight: 700 900; size-adjust: 97.86%; }
@font-face { font-family: 'Fraunces Yedek D'; src: local('DejaVu Serif'), local('DejaVuSerif'); font-weight: 100 600; size-adjust: 88.35%; }
@font-face { font-family: 'Fraunces Yedek D'; src: local('DejaVu Serif Bold'), local('DejaVuSerif-Bold'); font-weight: 700 900; size-adjust: 88.35%; }
@font-face { font-family: 'Poppins Yedek A'; src: local('Arial'), local('ArialMT'); font-weight: 100 600; size-adjust: 108.80%; }
@font-face { font-family: 'Poppins Yedek A'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700 900; size-adjust: 108.80%; }
@font-face { font-family: 'Poppins Yedek R'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 600; size-adjust: 116.22%; }
@font-face { font-family: 'Poppins Yedek R'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 700 900; size-adjust: 116.22%; }
@font-face { font-family: 'Poppins Yedek D'; src: local('DejaVu Sans'), local('DejaVuSans'); font-weight: 100 600; size-adjust: 92.15%; }
@font-face { font-family: 'Poppins Yedek D'; src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold'); font-weight: 700 900; size-adjust: 92.15%; }