/* Genel Stil Kuralları */
   /* 1. Body'yi dikey bir flexbox konteynerine dönüştürür */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Sayfanın en az ekran yüksekliği kadar olmasını sağlar */
            margin: 0; /* Sayfa kenarlarındaki boşluğu kaldırır */
            font-family: 'Inter', sans-serif;
            background-color: #fff;
        }



/* 768 pikselden küçük ekranlar için geçerli stil (örneğin tabletler) */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* 480 pikselden küçük ekranlar için geçerli stil (örneğin telefonlar) */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .header {
    flex-direction: column;
  }
}
       .main-content {
            flex-grow: 1; /* Bu, ana içeriğin kalan tüm boşluğu doldurmasını sağlar */
            padding: 0px;
            text-align: -webkit-center;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        .top-bar {
            background-color: #f7f7f7;
            text-align: center;
            padding: 10px 0;
        }
        .top-bar img {
            width: 100%;
            max-width: 1200px;
        }
        .main-header {
            background-color: #fff;
            padding: 20px 0;
            border-bottom: 1px solid #ddd;
        }
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo img {
            height: 75px;
        }
        .search-bar {
            display: flex;
            flex-grow: 1;
            margin: 0 20px;
        }
        .search-bar input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
            font-size: 16px;
        }

        /* Ana Navigasyon (Menü) */
.main-nav::-webkit-scrollbar {
    display: none;
}
        .nav-container {
            display: flex;
        }
        .main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap; /* Menü elemanlarının küçülmesini engeller */
    overflow-x: auto; /* Yatay kaydırma çubuğunu etkinleştirir */
    -webkit-overflow-scrolling: touch; /* iOS cihazlarda daha yumuşak kaydırma sağlar */
    scrollbar-width: none; /* Firefox'da kaydırma çubuğunu gizler */
}
.main-menu::-webkit-scrollbar {
    display: none; /* Webkit (Chrome, Safari) tarayıcılarda kaydırma çubuğunu gizler */
}
        .main-menu li a {
            display: block;
            padding: 15px 34px;
            text-decoration: none;
            color: #333;
            font-weight: bolder;
            border-bottom: 3px solid transparent;
        }
        .main-menu li a:hover {
            color: #007bff;
            border-bottom-color: #007bff;
        }
        .content-container {
            display: flex;
            gap: 20px;
        }
        .sidebar {
            width: 175px;
            background-color: #fff;
            border-radius: 5px;
        }
        .sidebar h3 {
            margin-top: 20px;
            padding-bottom: 40px;
            border-bottom: 2px ssolid #eee;
	    font-weight: bold;
        }
        .sub-menu {
            list-style: none;
            padding: 0;
        }
        .sub-menu li a {
            display: ruby-text;
            padding: 0px 0;
            color: #555;
            text-decoration: none;
        }

.sub-menu li a:hover {
    background-color: #fff; /* Üzerine gelince arka plan rengi */
    color: #703442; /* Üzerine gelince yazı rengi */
}

        .product-listing {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }
       .product-grid {
  display: flex; /* Flexbox düzenini etkinleştirir */
  flex-wrap: wrap; /* Öğelerin sığmadığında alt satıra geçmesini sağlar */
  gap: 20px; /* Ürün kartları arasına boşluk ekler */
  justify-content: center; /* Kartları yatayda ortalar */
}
      .product-card {
    /* Her bir ürün kartının genişliğini belirler */
    flex: 1 1 250px; 
    max-width: 245px;
    
    /* Kartların düzeni için Flexbox kullanın */
    display: flex;
    flex-direction: column; /* İçeriği dikey sırala */
    
    /* Tüm kartlar için sabit bir minimum yükseklik belirleyin */
    min-height: 400px; /* Bu değeri ürünlerinize göre ayarlayabilirsiniz */

    /* Diğer stil ayarları (gölge, kenar vb.) */
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    /* Resmin belirli bir boyuta sığmasını sağlar */
    width: 371px; 
    height: 100px; 
    object-fit: contain; 
    margin-bottom: 10px;
}

.product-name {
    font-size: 14px;
    min-height: 40px;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 18px;
    font-weight: bold;
    color: #e53935;
    margin: 10px 0;
}

.product-actions {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: auto; /* Bu kural butonu en alta iter ve boşluk sorununu çözer */
}

.product-actions input {
    width: 50px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.add-to-cart {
    background-color: #71404e;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}
        
          .cart-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .cart-modal {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 500px;
            position: relative;
        }
        .cart-modal h2 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .cart-modal-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .cart-modal-item:last-child {
            border-bottom: groove;
        }
        .cart-modal-item .item-info {
            flex-grow: 1;
        }
        .cart-modal-item .item-quantity {
            font-weight: bold;
        }
        .cart-modal-total {
            text-align: right;
            padding-top: 15px;
            font-size: 1.2em;
            font-weight: bold;
        }
        .cart-modal-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .close-modal, .place-order {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            
        }
          
        .hidden {
    display: none
             }	

        .close-modal {
            background-color: #000000;
            color: #fff;
        }
        .place-order {
            background-color: #cf1515;
            color: #fff;
        }
        .notification-box {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #333;
            color: #fff;
            padding: 15px;
            border-radius: 5px;
            z-index: 2000;
            display: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .notification-box.show {
            display: block;
            opacity: 1;
        }




/* Özelleştirilmiş stiller için burayı kullanabilirsiniz */
.featured-products-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox için kaydırma çubuğunu gizle */
    }
.featured-products-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari ve Opera için kaydırma çubuğunu gizle */
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hidden {
    display: none;
}
/* #popular-product-container elementinin kaydırma çubuğunu gizler */

/* WebKit tabanlı tarayıcılar (Chrome, Safari, Edge) için */
#popular-product-container::-webkit-scrollbar {
    display: none;
}

/* Firefox için */
#popular-product-container {
    scrollbar-width: none;
}

/* Internet Explorer için */
#popular-product-container {
    -ms-overflow-style: none;
}

/* Kayan Yazı Stilleri */
.marquee-container {
    overflow: hidden; /* Dışarı taşan içeriği gizle */
    background-color: #bf1212; /* Koyu gri arka plan */
    color: #ffffff; /* Beyaz yazı rengi */
    padding: 8px 0; /* Üstten ve alttan boşluk */
    white-space: nowrap; /* Yazının tek satırda kalmasını sağla */
    font-size: 1rem;
    font-weight: 500;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Başlangıçta yazının tam ekranın dışında olmasını sağla */
    animation: marquee 25s linear infinite; /* Animasyon ayarları */
}

.marquee-content p {
    margin: 0;
    display: inline-block;
}

/* Kayan yazı animasyonu */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

#banner-slider .swiper-slide img {
    height: 500px; /* İstediğiniz yüksekliği buraya yazın */
    width: 100%; /* Resmin slayt genişliğine tam olarak yayılmasını sağlar */
    object-fit: cover; /* Resmi, en boy oranını bozmadan belirlenen yüksekliği dolduracak şekilde boyutlandırır ve gerekirse kırpar */
}

/* Mobil Uyumlu Tasarım (Tablet ve Telefonlar İçin) */
@media (max-width: 768px) {
    #banner-slider .swiper-slide img {
        height: 300px; /* Mobil cihazlar için daha uygun bir yükseklik */
    }
    .header-container {
        flex-direction: column;
        align-items: center;
    }
    .search-bar {
        width: 100%;
        margin-top: 10px;
    }
    .content-container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
    .product-card {
        width: 100%;
        max-width: 100%;
    }
}

/* Masaüstü Ekranlar için Ek Kural */
@media (min-width: 769px) {
    .main-menu {
        justify-content: center;
        overflow-x: hidden;
    }
}
.hidden {
    display: none;
}

/* Container için */
.logo-carousel-container {
    width: 100%;
    overflow: hidden; /* Dışarı taşan logoları gizler */
    background-color: white; /* Arka plan rengini beyaza çevirir */
    padding: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
}

/* Kayan animasyonun uygulanacağı asıl element */
.logo-carousel {
    display: flex; /* Logoları yan yana dizer */
    animation: slide 30s linear infinite; /* Animasyonu uygular */
    gap: 50px; /* Logolar arasına boşluk bırakır */
    width: max-content; /* İçeriğe göre genişler */
}

/* Her bir logo öğesi */
.logo-item {
    flex-shrink: 0; /* Küçülmeyi engeller */
}

.logo-item img {
    height: 100px; /* Logoların yüksekliği */
    width: 100px;  /* Logoların genişliği */
    object-fit: contain; /* Görüntünün en boy oranını korur ve aynı boyutta gösterir */
    opacity: 1; /* Logoları tam opaklıkta (canlı) gösterir */
}

/* Kayan animasyonun tanımı */
@keyframes slide {
    from {
        transform: translateX(0); /* Başlangıç pozisyonu */
    }
    to {
        /*
            Carousel'in kendi genişliğinin yarısı kadar sola kaydırır,
            böylece kesintisiz bir döngü oluşur.
        */
        transform: translateX(-50%); 
    }
}
.logo-carousel-container.hidden-on-menu {
    display: none;
}

footer {
   margin-top: 50px; /* Veya istediğin başka bir değer */
}