:root {
  /* Renk Paleti */
  --color-primary: #f7f8f4;
  --color-secondary: #000;
  --color-accent: #FF0000;
  --color-background: #f4f4f4;
  --color-text-primary: #333;
  --color-text-secondary: #555;
  --color-text-light: #aaa;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.6);
  --color-card-bg: #fff;
  --color-footer-bg: #111;
  --color-menu-bg: rgba(20, 20, 20, 0.98);
  
  /* Font Ayarları */
  --font-family-primary: "Roboto", sans-serif;
  --font-size-xs: 0.75rem;  /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem;     /* 16px */
  --font-size-lg: 1.25rem;  /* 20px */
  --font-size-xl: 1.5rem;   /* 24px */
  --font-size-2xl: 2rem;    /* 32px */
  --font-size-3xl: 3rem;    /* 48px */
  --font-size-4xl: 4.375rem; /* 70px */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing ve Boyutlar */
  --spacing-xs: 0.5rem;     /* 8px */
  --spacing-sm: 0.625rem;   /* 10px */
  --spacing-md: 0.9375rem;  /* 15px */
  --spacing-lg: 1.25rem;    /* 20px */
  --spacing-xl: 1.5625rem;  /* 25px */
  --spacing-2xl: 1.875rem;  /* 30px */
  --spacing-3xl: 2.5rem;    /* 40px */
  --spacing-4xl: 3.125rem;  /* 50px */
  --spacing-5xl: 3.75rem;   /* 60px */
  --spacing-6xl: 6.25rem;   /* 100px */
  
  --header-height: 6.25rem; /* 100px */
  --logo-size: 5rem;        /* 80px */
  --main-height: 31.25rem;  /* 500px */
  --product-height: 17.5rem; /* 280px */
  --border-radius-sm: 0.3125rem;  /* 5px */
  --border-radius-md: 0.5rem;     /* 8px */
  --border-radius-lg: 0.625rem;   /* 10px */
  --border-radius-xl: 0.75rem;    /* 12px */
  --border-radius-circle: 50%;
  
  /* Shadow ve Efektler */
  --shadow-sm: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.5rem 0.9375rem rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.3);
  --shadow-accent: 0 0 0.625rem rgba(255, 0, 0, 0.7);
  --shadow-white: 0 0 0.625rem rgba(255, 255, 255, 0.7);
  
  /* Transition ve Animasyon */
  --transition-fast: 0.3s ease;
  --transition-normal: 0.4s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Z-index Katmanları */
  --z-index-header: 100;
  --z-index-mobile-menu: 1000;
  --z-index-burger: 1001;
  --z-index-close-btn: 1002;
  
  /* Breakpoints */
  --breakpoint-mobile: 48rem;     /* 768px */
  --breakpoint-mobile-sm: 30rem;  /* 480px */
  --breakpoint-tablet: 64rem;     /* 1024px */
  --breakpoint-desktop: 75rem;    /* 1200px */
  
  /* Grid ve Layout */
  --max-width: 75rem;             /* 1200px */
  --grid-gap: 1.5625rem;          /* 25px */
  --grid-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); /* 250px */
  
  /* Container Padding */
  --container-padding: 1.25rem;   /* 20px */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.7;
}

/* Responsive Font Sizes for Mobile */
@media (max-width: 48rem) { /* 768px */
  :root {
    --font-size-xs: 0.6875rem;    /* 11px */
    --font-size-sm: 0.75rem;      /* 12px */
    --font-size-md: 0.875rem;     /* 14px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */
    
    --header-height: 4.375rem;    /* 70px */
    --logo-size: 3.75rem;         /* 60px */
    --main-height: 25rem;         /* 400px */
    --product-height: 12.5rem;    /* 200px */
    
    --spacing-xs: 0.375rem;       /* 6px */
    --spacing-sm: 0.5rem;         /* 8px */
    --spacing-md: 0.75rem;        /* 12px */
    --spacing-lg: 1rem;           /* 16px */
    --spacing-xl: 1.25rem;        /* 20px */
    --spacing-2xl: 1.5rem;        /* 24px */
    --spacing-3xl: 2rem;          /* 32px */
    --spacing-4xl: 2.5rem;        /* 40px */
    --spacing-5xl: 3rem;          /* 48px */
    --spacing-6xl: 4rem;          /* 64px */
  }
}

@media (max-width: 30rem) { /* 480px */
  :root {
    --font-size-xs: 0.625rem;     /* 10px */
    --font-size-sm: 0.6875rem;    /* 11px */
    --font-size-md: 0.75rem;      /* 12px */
    --font-size-lg: 1rem;         /* 16px */
    --font-size-xl: 1.125rem;     /* 18px */
    --font-size-2xl: 1.25rem;     /* 20px */
    --font-size-3xl: 1.5rem;      /* 24px */
    --font-size-4xl: 2rem;        /* 32px */
    
    --header-height: 3.75rem;     /* 60px */
    --logo-size: 3.125rem;        /* 50px */
    --main-height: 18.75rem;      /* 300px */
    --product-height: 9.375rem;   /* 150px */
    
    --spacing-xs: 0.25rem;        /* 4px */
    --spacing-sm: 0.375rem;       /* 6px */
    --spacing-md: 0.5rem;         /* 8px */
    --spacing-lg: 0.75rem;        /* 12px */
    --spacing-xl: 1rem;           /* 16px */
    --spacing-2xl: 1.25rem;       /* 20px */
    --spacing-3xl: 1.5rem;        /* 24px */
    --spacing-4xl: 2rem;          /* 32px */
    --spacing-5xl: 2.5rem;        /* 40px */
    --spacing-6xl: 3rem;          /* 48px */
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.1);
  }
}

/* Print Styles */
@media print {
  :root {
    --color-primary: #000;
    --color-secondary: #000;
    --color-accent: #000;
    --color-background: #fff;
    --color-text-primary: #000;
    --color-text-secondary: #333;
    --color-text-light: #666;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01s;
    --transition-normal: 0.01s;
    --transition-slow: 0.01s;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #1a1a1a;
    --color-secondary: #ffffff;
    --color-background: #2d2d2d;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-text-light: #808080;
    --color-card-bg: #3d3d3d;
    --color-footer-bg: #0a0a0a;
  }
}

/* Large Screens */
@media (min-width: 120rem) { /* 1920px */
  :root {
    --max-width: 87.5rem; /* 1400px */
    --font-size-3xl: 3.5rem; /* 56px */
    --font-size-4xl: 5rem;   /* 80px */
  }
}