/*--------------------------------------------------------------
# Cross-Browser Compatibility Helper Styles
# Bu dosya tüm tarayıcılarda uyumluluğu sağlamak için ek stiller içerir
--------------------------------------------------------------*/

/* Flexbox fallback for older browsers */
@supports not (display: flex) {
  .d-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
  }
  
  .align-items-center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  
  .justify-content-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
}

/* Grid fallback for older browsers */
@supports not (display: grid) {
  .product-grid {
    display: -ms-grid;
    display: -webkit-grid;
  }
}

/* CSS Variables fallback */
@supports not (--css: variables) {
  :root {
    /* CSS Variables desteklenmiyorsa fallback renkler kullanılır */
  }
  
  body {
    color: #4a4a4a !important;
    background-color: #f0f0f0 !important;
    font-family: "Roboto", Arial, sans-serif !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #0c0c0c !important;
    font-family: "Montserrat", Arial, sans-serif !important;
  }
  
  a {
    color: #c82818 !important;
  }
}

/* Border-radius fallback */
.border-radius-fix {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

/* Box-shadow fallback */
.box-shadow-fix {
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Transform fallback */
.transform-fix {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* Backdrop-filter fallback */
@supports not (backdrop-filter: blur(10px)) {
  .header,
  main,
  section,
  footer {
    background: rgba(25, 25, 25, 0.9) !important; /* Daha opak fallback */
  }
  
  .category-sidebar-wrapper,
  .product-card {
    background: rgba(0, 0, 0, 0.4) !important;
  }
}

/* Smooth scroll fallback */
@supports not (scroll-behavior: smooth) {
  html {
    scroll-behavior: auto;
  }
}

/* User-select fix for better UX */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
textarea,
select,
button {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Fix for iOS Safari viewport height */
@supports (-webkit-touch-callout: none) {
  .hero {
    height: -webkit-fill-available;
  }
}