/* ============================================================
   MOBILE PRODUCT CARD FIXES - siyahbeyaz Theme
   - Mobil görünümde product-price padding düzeltmesi
   - Product image container kesme sorunu düzeltmesi
   - Masaüstü görünümde product-name yükseklik düzeltmesi
   - Mobil görünümde dil tercihi linkleri düzeltmesi
   ============================================================ */

/* Unified Product Card System - Mobile Fixes Override */
@media (min-width: 769px) {
  /* Bu stiller artık unified-product-card.css'de tanımlı */

  /* Modern product card yüksekliğini ayarla */
  .modern-product-card {
    min-height: 400px !important; /* Yeterli yükseklik */
  }

  .product-info {
    min-height: 180px !important; /* Product info için yeterli alan */
  }

  /* Grid view için ek düzeltmeler */
  .product-grid-item .product-name {
    min-height: 2.8rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-grid-item .modern-product-card {
    min-height: 400px !important;
  }

  .product-grid-item .product-info {
    min-height: 180px !important;
  }

  /* List view için ek düzeltmeler */
  .list-view .product-name {
    min-height: 2.8rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .list-view .add-to-cart-btn {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Masaüstü görünümde breadcrumb separator düzeltmesi - Agresif Override */
  .breadcrumb-item:not(:last-child)::after,
  .breadcrumb-modern .breadcrumb-item:not(:last-child)::after,
  .category-hero .breadcrumb-item:not(:last-child)::after,
  .breadcrumb li:not(:last-child)::after,
  .breadcrumb-modern li:not(:last-child)::after,
  .category-hero li:not(:last-child)::after,
  nav .breadcrumb-item:not(:last-child)::after,
  nav .breadcrumb li:not(:last-child)::after {
    content: "→" !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-left: 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Breadcrumb ::before pseudo-element'ini gizle/düzelt */
  .breadcrumb-item::before,
  .breadcrumb-modern .breadcrumb-item::before,
  .category-hero .breadcrumb-item::before,
  .breadcrumb li::before,
  .breadcrumb-modern li::before,
  .category-hero li::before,
  nav .breadcrumb-item::before,
  nav .breadcrumb li::before {
    content: none !important;
    display: none !important;
  }

  /* Masaüstü görünümde breadcrumb-modern active item - Agresif Override */
  .breadcrumb-modern .breadcrumb-item.active,
  .breadcrumb-modern li.breadcrumb-item.active,
  .category-hero .breadcrumb-item.active,
  .category-hero li.breadcrumb-item.active,
  .breadcrumb-active-item {
    color: white !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important; /* Masaüstü için daha büyük padding */
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin: 0.25rem !important;
  }

  /* Masaüstü görünümde breadcrumb-modern active item içindeki a linki */
  .breadcrumb-modern .breadcrumb-item.active a,
  .breadcrumb-modern li.breadcrumb-item.active a,
  .category-hero .breadcrumb-item.active a,
  .category-hero li.breadcrumb-item.active a,
  .breadcrumb-active-item a {
    color: white !important;
    font-weight: 600 !important;
    padding: 0 !important; /* a linki için padding kaldır */
    background: transparent !important;
    border-radius: 0 !important;
    display: inline !important;
  }
}

/* Mobil Görünüm - Dil Tercihi Linkleri Düzeltmesi */
@media (max-width: 768px) {
  /* Mobil topbar düzeltmesi */
  .topbar-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
  }

  .topbar-mobile li {
    width: 100% !important;
  }

  .left-top-bar {
    text-align: center !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .right-top-bar-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.5rem 0 !important;
  }

  /* Dil tercihi linkleri mobil düzeltmesi */
  .right-top-bar-mobile .lang-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .right-top-bar-mobile .lang-selector:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
  }

  .right-top-bar-mobile .lang-selector img {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
  }

  /* Login partial mobil düzeltmesi */
  .right-top-bar-mobile .login-partial {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .right-top-bar-mobile .login-partial a {
    color: white !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
  }

  .right-top-bar-mobile .login-partial a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
  }
}

/* Mobil Görünüm - Breadcrumb Düzeltmesi */
@media (max-width: 768px) {
  .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .breadcrumb-item {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    padding: 0.2rem 0.4rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    max-width: calc(50% - 0.125rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .breadcrumb-item.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 0.2rem 0.4rem !important;
    max-width: calc(50% - 0.125rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Breadcrumb-modern active item için agresif override - Mobil */
  .breadcrumb-modern .breadcrumb-item.active,
  .breadcrumb-modern li.breadcrumb-item.active,
  .category-hero .breadcrumb-item.active,
  .category-hero li.breadcrumb-item.active,
  .breadcrumb-active-item {
    color: white !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.4rem !important; /* Mobil için daha küçük padding */
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin: 0 !important;
    max-width: calc(50% - 0.125rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Mobil görünümde breadcrumb-modern active item içindeki a linki */
  .breadcrumb-modern .breadcrumb-item.active a,
  .breadcrumb-modern li.breadcrumb-item.active a,
  .category-hero .breadcrumb-item.active a,
  .category-hero li.breadcrumb-item.active a,
  .breadcrumb-active-item a {
    color: white !important;
    font-weight: 600 !important;
    padding: 0 !important; /* a linki için padding kaldır */
    background: transparent !important;
    border-radius: 0 !important;
    display: inline !important;
  }

  .breadcrumb-item:not(:last-child)::after,
  .breadcrumb-modern .breadcrumb-item:not(:last-child)::after,
  .category-hero .breadcrumb-item:not(:last-child)::after,
  .breadcrumb li:not(:last-child)::after,
  .breadcrumb-modern li:not(:last-child)::after,
  .category-hero li:not(:last-child)::after,
  nav .breadcrumb-item:not(:last-child)::after,
  nav .breadcrumb li:not(:last-child)::after {
    content: "→" !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-left: 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Breadcrumb container düzeltmesi */
  .breadcrumb-modern {
    padding: 0.5rem 0 !important;
    margin: 0 0 1rem 0 !important;
    background: transparent !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .breadcrumb-modern .breadcrumb {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Mobil breadcrumb ::before pseudo-element'ini gizle */
  .breadcrumb-item::before,
  .breadcrumb-modern .breadcrumb-item::before,
  .category-hero .breadcrumb-item::before,
  .breadcrumb li::before,
  .breadcrumb-modern li::before,
  .category-hero li::before,
  nav .breadcrumb-item::before,
  nav .breadcrumb li::before {
    content: none !important;
    display: none !important;
  }
}

/* Mobil Görünüm - Product Price Padding Düzeltmesi */
@media (max-width: 768px) {
  .product-price {
    margin-top: 0.25rem !important; /* Fazla top padding'i azalt */
    padding-top: 0 !important;
  }

  .current-price {
    font-size: 1rem !important; /* Mobilde biraz küçült */
    margin-bottom: 0 !important;
  }

  .old-price {
    font-size: 0.85rem !important; /* Mobilde biraz küçült */
    margin-bottom: 0 !important;
  }
}

/* Mobil Görünüm - Product Image Container Düzeltmesi (Tablet) */
@media (max-width: 768px) {
  /* Tablet ve üstü için genel resim kapsayıcı düzeltmesi - Spesifikliği artırıldı */
  .modern-product-card .product-image-container {
    height: auto !important;
    min-height: 450px !important; /* Tablet için artırıldı */
    max-height: 600px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modern-product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 600px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  /* Product card genel düzeltmeler */
  .modern-product-card {
    padding: 0.5rem !important;
  }

  .product-info {
    padding: 0.75rem !important;
  }
}

/* ============================================================
   INSTAGRAM TARZI MOBİL GÖRÜNÜM - Tek Kolon, Büyük Resimler
   ============================================================ */
@media (max-width: 576px) {
  /* Tek kolon grid layout - Instagram tarzı */
  /* İki kolon grid layout - Simetri düzeltmesi */
  .products-grid,
  .product-grid-container,
  .modern-product-grid-container,
  .modern-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Resim container - Kare (1:1) oran */
  .modern-product-card .product-image-container {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Resim tam genişlik - Sığdırma modu (Spesifiklik artışı) */
  /* Resim tam genişlik - Cover modu */
  .modern-product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Ürün kartı tam genişlik */
  .modern-product-card {
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Ürün bilgi alanı */
  .product-info {
    padding: 1rem !important;
  }

  /* Ürün adı daha belirgin */
  .product-name {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Fiyat stili */
  .product-price {
    margin-top: 0.5rem !important;
    gap: 0.75rem !important;
  }

  .current-price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  }

  .old-price {
    font-size: 1rem !important;
  }

  /* Sepete ekle butonu daha büyük */
  .add-to-cart-btn {
    padding: 1rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    margin-top: 0.75rem !important;
  }
}

/* List view için mobil düzeltmeler */
@media (max-width: 768px) {
  .list-view .product-image-container {
    height: 120px !important;
    width: 120px !important;
    aspect-ratio: auto !important;
  }

  .list-view .product-info {
    padding: 0.25rem 0 !important;
  }

  .list-view .product-price {
    margin-top: 0.25rem !important;
  }
}

/* Grid view için mobil düzeltmeler (Spesifiklik artışı) */
@media (max-width: 768px) {
  .grid-view .modern-product-card .product-image-container {
    height: auto !important;
    min-height: 350px !important;
  }

  .grid-view .product-info {
    padding: 0.5rem 0 !important;
  }

  .grid-view .product-price {
    margin-top: 0.25rem !important;
  }
}

/* Product Grid Container için mobil düzeltmeler (Featured Products vb.) */
@media (max-width: 768px) {
  .product-grid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0.5rem !important;
  }

  .product-grid-item {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .product-grid-item .modern-product-card {
    height: auto !important;
    min-height: auto !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .product-grid-item .modern-product-card .product-image-container {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .product-grid-item .modern-product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px !important;
    max-height: 650px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  .product-grid-item .product-info {
    flex: 1 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 120px !important;
  }

  .product-grid-item .product-price {
    margin-top: 0.5rem !important;
  }

  .product-grid-item .product-name {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
  }

  .product-grid-item .product-price {
    margin-top: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .product-grid-item .current-price {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }

  .product-grid-item .old-price {
    font-size: 0.9rem !important;
  }
}

/* Çok küçük ekranlar için product grid düzeltmeleri */
@media (max-width: 576px) {
  /* Küçük ekranlar için dil tercihi linkleri */
  .right-top-bar-mobile {
    gap: 0.5rem !important;
    padding: 0.25rem 0 !important;
  }

  .right-top-bar-mobile .lang-selector {
    padding: 0.4rem !important;
    min-width: 35px !important;
    min-height: 35px !important;
  }

  .right-top-bar-mobile .lang-selector img {
    width: 18px !important;
    height: 13px !important;
  }

  .right-top-bar-mobile .login-partial a {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
  }

  .left-top-bar {
    font-size: 0.75rem !important;
  }
  .product-grid-container {
    gap: 0.75rem !important;
    padding: 0.25rem !important;
  }

  .product-grid-item .modern-product-card {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  .product-grid-item .modern-product-card .product-image-container {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    width: 100% !important;
  }

  .product-grid-item .product-name {
    font-size: 0.9rem !important;
    margin-bottom: 0.4rem !important;
    flex-shrink: 0 !important;
  }

  .product-grid-item .product-price {
    margin-top: 0.4rem !important;
    flex-shrink: 0 !important;
  }

  .product-grid-item .current-price {
    font-size: 1rem !important;
  }

  .product-grid-item .old-price {
    font-size: 0.8rem !important;
  }

  /* Product-actions container'ını gizle */
  .product-grid-item .product-actions {
    display: none !important;
  }

  .modern-product-card .product-actions {
    display: none !important;
  }

  /* Modern product card yükseklik düzeltmesi */
  .modern-product-card {
    height: 100% !important; /* Esnek yükseklik */
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modern-product-card .add-to-cart-btn {
    width: 100% !important;
    background: #000000 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    margin-top: auto !important;
    padding: 0.5rem !important;
    min-height: 36px !important;
    font-size: 0.8rem !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Tüm olası product-actions selector'ları için agresif düzeltme */
  .product-grid-container .product-actions,
  .product-grid-item .product-actions,
  .modern-product-card .product-actions,
  .product-list .product-actions,
  .product-item .product-actions {
    margin-top: auto !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
  }

  /* Tüm olası add-to-cart-btn selector'ları için agresif düzeltme */
  .product-grid-container .add-to-cart-btn,
  .product-grid-item .add-to-cart-btn,
  .modern-product-card .add-to-cart-btn,
  .product-list .add-to-cart-btn,
  .product-item .add-to-cart-btn {
    background: #000000 !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 0.25rem !important; /* Çok küçük margin-top */
    box-sizing: border-box !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .product-grid-item .add-to-cart-btn:hover {
    background: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4) !important;
  }

  .product-grid-item .add-to-cart-btn i {
    font-size: 0.9rem !important;
  }
}

/* Çok küçük ekranlar için sepete ekle butonu düzeltmeleri */
@media (max-width: 576px) {
  .product-grid-item .add-to-cart-btn {
    padding: 0 !important;
    font-size: 0.85rem !important;
    min-height: 40px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .product-grid-item .add-to-cart-btn i {
    font-size: 0.8rem !important;
  }

  /* Çok küçük ekranlar için breadcrumb düzeltmesi */
  .breadcrumb {
    font-size: 0.65rem !important;
    gap: 0.15rem !important;
    padding: 0.25rem 0 !important;
  }

  .breadcrumb-item {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.65rem !important;
    max-width: calc(50% - 0.075rem) !important;
  }

  .breadcrumb-item a {
    gap: 0.15rem !important;
  }

  .breadcrumb-item:not(:last-child)::after,
  .breadcrumb-modern .breadcrumb-item:not(:last-child)::after,
  .category-hero .breadcrumb-item:not(:last-child)::after,
  .breadcrumb li:not(:last-child)::after,
  .breadcrumb-modern li:not(:last-child)::after,
  .category-hero li:not(:last-child)::after,
  nav .breadcrumb-item:not(:last-child)::after,
  nav .breadcrumb li:not(:last-child)::after {
    content: "→" !important;
    margin-left: 0.3rem !important;
    font-size: 0.7rem !important;
  }

  .breadcrumb-item.active {
    padding: 0.15rem 0.3rem !important;
    max-width: calc(50% - 0.075rem) !important;
  }

  /* Küçük ekranlar için breadcrumb-modern active item - Agresif Override */
  .breadcrumb-modern .breadcrumb-item.active,
  .breadcrumb-modern li.breadcrumb-item.active,
  .category-hero .breadcrumb-item.active,
  .category-hero li.breadcrumb-item.active,
  .breadcrumb-active-item {
    color: white !important;
    font-weight: 600 !important;
    padding: 0.15rem 0.3rem !important; /* Küçük ekranlar için daha küçük padding */
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin: 0 !important;
    max-width: calc(50% - 0.075rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Küçük ekranlar için breadcrumb-modern active item içindeki a linki */
  .breadcrumb-modern .breadcrumb-item.active a,
  .breadcrumb-modern li.breadcrumb-item.active a,
  .category-hero .breadcrumb-item.active a,
  .category-hero li.breadcrumb-item.active a,
  .breadcrumb-active-item a {
    color: white !important;
    font-weight: 600 !important;
    padding: 0 !important; /* a linki için padding kaldır */
    background: transparent !important;
    border-radius: 0 !important;
    display: inline !important;
  }
}