@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer"');       
 /* Genel CSS kurallarınız */

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {
            font-family: 'Poppins', sans-serif; /* Sadece menü değil, genel metinler için daha iyi bir yazı tipi */
            color: #333; /* Genel metin rengi */
             background-color: #f8f8f8; /* Hafif bir arka plan rengi */
display: flex;
            flex-direction: column;
            min-height: 100vh;

        }



        .navbar {

            display: flex;

            flex-direction: column;

            align-items: center;

            padding: 20px;

            background-color: white;
    border-bottom: 1px solid #eee; /* Daha yumuşak bir çizgi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Hafif bir gölge */

        }



        .logo {
   
    font-family: 'Poppins', sans-serif; /* Logonuz için de aynı yazı tipini kullanın */
    font-size: 36px; /* Daha büyük logo metni */
    font-weight: 700; /* Daha kalın */
    color: #222; /* Daha koyu bir siyah */
    margin-bottom: 15px; /* Alt boşluk */
    transition: color 0.3s ease; /* Renk geçişi */

        }



        .logo a {

            text-decoration: none;

            color: inherit; /* Üst öğeden rengi miras alsın */

        }
.logo a:hover {
     text-decoration: none;
    color: #555; /* Hover rengi */
}


 .menu {
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda alta geçiş için */
    justify-content: center;
    gap: 25px; /* Menü öğeleri arası boşluk */
    font-weight: 500; /* Orta kalınlık */
}



.menu a {
    text-decoration: none;
    color: #555; /* Menü bağlantı rengi */
    padding: 8px 12px;
    transition: all 0.3s ease; /* Pürüzsüz geçişler */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    text-transform: uppercase; /* Tüm menü öğeleri büyük harf */
    letter-spacing: 0.5px; /* Harf aralığı */
}
.menu a:hover {
    color: #000;
    background-color: #f0f0f0; /* Hafif arka plan */
    transform: translateY(-2px); /* Hafif yukarı kayma */
}

        /* Slider CSS */

        .slider {

            width: 100%;

            max-width: 1000px;

            height: 400px;

            margin: 20px auto;

            position: relative;

            overflow: hidden;

            border-radius: 10px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

        }



        .slider-wrapper {

            display: flex;

            width: 100%;

            height: 100%;

            transition: transform 0.5s ease-in-out;

        }



        .slide {

            min-width: 100%;

            height: 100%;

        }



        .slide img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        /* Ürün listesi için stil kuralları */
/* urun.php sayfası için özel stiller */
.container .urun-img {
    max-width: 500px; /* Resmin maksimum genişliği */
    height: auto; /* Oranlarını koru */
    display: block; /* Kenarlarda boşluk bırakmamak için blok element yap */
    margin: 30px auto; /* Üstte ve altta boşluk, yatayda ortala */
    border-radius: 10px; /* Hafif yuvarlak köşeler */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

.container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 2.2em;
}

.container .price {
    text-align: center;
    font-size: 2em;
    color: #000; /* Fiyat rengi */
    font-weight: bold;
    margin-bottom: 30px;
}

.container .details {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    line-height: 1.8;
    margin-bottom: 40px;
}

.container .details p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.container .details strong {
    color: #555;
}

.back-link {
    display: inline-block;
    margin: 20px 0;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #000;
    text-decoration: underline;
}

/* urun.php sayfası için responsive ayarlar */
@media (max-width: 768px) {
    .container .urun-img {
        max-width: 90%; /* Küçük ekranlarda resim genişliğini %90'a düşür */
        margin: 20px auto;
    }

    .container h1 {
        font-size: 1.8em;
    }

    .container .price {
        font-size: 1.8em;
    }

    .container .details {
        padding: 15px;
    }

    .container .details p {
        font-size: 1em;
    }
}
/* Ürün listesi için stil kuralları */
.product {
    /* Mevcut stilleriniz burada kalacak (genişlik, yükseklik, border vb.) */
    width: 280px;
    height: 480px;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* Animasyon için başlangıç değerleri */
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Başlangıçta biraz aşağıda */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Geçiş efekti ekle */
    /* Transition süresi ve fonksiyonu animasyonun akıcılığını belirler */
}
.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
    padding: 20px;
    max-width: 1265px;
    margin: 40px auto;
    flex-grow: 1;
}

.product.fade-in-up {
    opacity: 1; /* Görünür hale getir */
    transform: translateY(0); /* Kendi orijinal konumuna kaydır */
}

        
        .price-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: auto; /* Fiyatları en alta hizalamak için */
            padding-top: 5px;
        }

        .original-price {
            font-size: 16px;
            color: #777;
            text-decoration: line-through; /* Üstü çizili */
            margin-bottom: 2px;
        }

        .discounted-price {
            font-size: 20px;
             color:rgb(0, 0, 0); /* İndirimli fiyatı vurgula/ */
            font-weight: bold;
        }

/* Fiyat stilini güncelledik (tek fiyat gösterimi) */
.product p.price {
    font-size: 18px;
    color: #000; /* Fiyatı daha koyu siyah yaptık */
    font-weight: bold;
    margin-top: auto;
    padding-top: 5px;
}

.product {
    width: 280px; /* Genişliği sabit tutuyoruz */
    height: 480px; /* Ürün kartının yüksekliğini büyüttük, örneğin 420px */
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product img {
    width: 100%;
    height: 360px; /* Resim yüksekliğini ürün kartının yeni yüksekliğine göre ayarladık */
    object-fit: cover;
    border-radius: 5px;
    border-bottom: 1px solid #eee;
}

  .product:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); /* Marka renginizle daha canlı bir gölge */
    transform: translateY(-8px) scale(1.02); /* Hem yukarı kaydır hem de hafifçe büyüt */
    transition: all 0.3s ease-in-out; /* Daha yumuşak bir geçiş için transition süresini artır */
    z-index: 2; /* Üstte görünmesini sağla, diğer ürünlerin altına kaymasını engelle */
}




        /* Ürün başlığı stilini güncelledik */

        .product h3 {

            font-size: 18px;
            /* Daha büyük font boyutu */

            margin: 10px 0 5px;

            color: #333;
            /* Biraz daha koyu renk */

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            padding: 0 5px;
            /* Kenarlardan boşluk ekleyelim */

        }




        .product a {

            text-decoration: none;

            color: inherit;

        }



        .no-products {

            text-align: center;

            font-size: 1.2em;

            color: #777;

            padding: 50px;

            width: 100%;

        }



        /* Responsive ayarlar */

        @media (max-width: 1280px) {

            .product-list {

                max-width: 950px;

                gap: 35px;

            }

            .product {

                width: 280px;

            }

        }



        @media (max-width: 990px) {

            .product-list {

                max-width: 635px;

                gap: 35px;

            }

            .product {

                width: calc(50% - 17.5px);

            }

        }



        @media (max-width: 670px) {

            .navbar {
        padding: 15px 10px; /* Daha küçük ekranlarda navbar paddingi */
    }
    .logo {
        font-size: 28px; /* Mobil görünümde daha küçük logo */
        margin-bottom: 10px;
    }
    .menu {
        gap: 15px; /* Menü öğeleri arası boşluk */
        flex-direction: column; /* Mobil görünümde menüyü dikey hizala */
        align-items: center; /* Menü öğelerini ortala */
    }

    
        .menu a {
            text-decoration: none;
            color: #555; /* Menü bağlantı rengi */
            padding: 8px 12px;
            transition: all 0.3s ease; /* Pürüzsüz geçişler */
            border-radius: 5px; /* Hafif yuvarlak köşeler */
            text-transform: uppercase; /* Tüm menü öğeleri büyük harf */
            letter-spacing: 0.5px; /* Harf aralığı */
        }
        .menu a:hover {
            color: #000;
            background-color: #f0f0f0; /* Hafif arka plan */
            transform: translateY(-2px); /* Hafif yukarı kayma */
        }

        /* Aktif kategori linkini vurgulamak için */
        .menu a.active {
            color: #d9534f; /* Vurgu rengi */
            border-bottom: 2px solid #d9534f;
            padding-bottom: 2px;
        }

            .product-list {

                max-width: 320px;

                gap: 20px;

                padding: 10px;

            }

            .product {

                width: 100%;

            }

        }



        footer {

            background-color: #ffffff;

            color: white;

            padding: 40px 20px;

            text-align: center;

            margin-top: 30px;

        }



        footer h3 {

            margin-bottom: 10px;

            font-size: 20px;

        }



        footer p {

            font-size: 14px;

            color: #000;

        }



        footer a {

            color: #ccc;

            text-decoration: none;

        }



        footer a:hover {

            text-decoration: underline;

        }

        /* Resimdeki gibi bölümleyici (divider) stili */
        .section-divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 60px auto 40px auto;
            width: 100%;
            /* Genişliği %100'e çıkardık */
            max-width: none;
            /* Maksimum genişlik kısıtlamasını tamamen kaldırdık */
            color: #333;
            font-family: Arial, sans-serif;
            font-size: 2em;
            font-weight: normal;
            text-transform: uppercase;
        }

        .section-divider::before,
        .section-divider::after {
            content: '';
            flex-grow: 100;
            /* Esneklik oranını çok yüksek bir değere çıkardık */
            height: 1px;
            background-color: #ccc;
        }

        .section-divider::before {
            margin-right: 20px;
        }

        .section-divider::after {
            margin-left: 20px;
        }

        .section-divider span {
            white-space: nowrap;
            padding: 0 10px;
        }

/* footer */

/* Genel Footer Stilleri */
/* Footer Genel Ayarları (Eğer yoksa veya eksikse ekleyin/güncelleyin) */
.main-footer {
    background-color: #fffefe; /* Koyu gri/siyah arka plan */
    color: #000000; /* Açık renk metin */
    padding: 50px 20px 20px; /* Üst, sağ/sol, alt boşluklar */
    font-size: 0.95em;
    line-height: 1.6;
}

.main-footer .footer-content {
    display: flex; /* Flexbox'ı etkinleştir */
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçiş için */
    justify-content: space-between; /* Bölümler arası boşluk bırak */
    gap: 40px; /* Bölümler arası boşluk */
    max-width: 1200px; /* İçeriği ortala */
    margin: 0 auto 30px;
}

.main-footer .footer-section {
    flex: 1; /* Bölümlerin eşit oranda genişlemesini sağla */
    min-width: 250px; /* Bölümlerin belirli bir genişlikten daha fazla küçülmesini engelle */
    margin-bottom: 20px; /* Mobil görünümde alt boşluk */
}

.main-footer .footer-section h3 {
        color: #000000; /* Açık renk metin */
/* Başlık rengi (marka renginizden) */
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
}

.main-footer .footer-section ul {
    list-style: none;
    padding: 0;
}

.main-footer .footer-section ul li {
    margin-bottom: 10px;
}

.main-footer .footer-section ul li a {
       color: #000000; /* Açık renk metin */
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-footer .footer-section ul li a:hover {
        color: #000000; /* Açık renk metin */
    text-decoration: underline;
}


.main-footer .contact-info p,
.main-footer .social-links a,
.main-footer .newsletter p {
color: #000000;
}

.main-footer .social-links a {
    font-size: 1.5em;
    margin-right: 15px;
    color: #000000;
    transition: color 0.3s ease;
}

.main-footer .social-links a:hover {
    color: #000000;
}

.main-footer .newsletter .text-input {
    background-color: #333;
    border: 1px solid #555;
    padding: 10px 15px;
    width: calc(100% - 110px); /* Buton için boşluk bırak */
    max-width: 250px;
    border-radius: 5px;
    color: #fff;
    margin-right: 10px;
}

.main-footer .newsletter .btn-primary {
    background-color: #00bcd4;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.main-footer .newsletter .btn-primary:hover {
    background-color: #0097a7;
}

/* Harita Bölümü Stilleri */
.main-footer .footer-section.map-section {
    flex: 2; /* Harita bölümünün diğerlerinden biraz daha geniş olmasını sağlayabiliriz */
    min-width: 300px; /* Küçük ekranlarda harita için daha fazla yer */
    margin-bottom: 20px;
}

.main-footer .footer-section.map-section h3 {
    text-align: left; /* Başlığı sola hizala */
}

/* Harita iframe'inin responsive ve estetik görünmesi için */
.main-footer .footer-section.map-section iframe {
    max-width: 100%; /* Kapsayıcısından taşmamasını sağla */
    height: 250px; /* Yüksekliğini sabit tut */
    border-radius: 8px; /* Haritanın köşelerini yuvarla */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Daha belirgin gölge */
    display: block; /* Sayfada herhangi bir boşluk olmaması için */
}

/* style.css dosyasına ekleyin veya güncelleyin */

/* Footer Alt Kısım (Telif Hakkı vb.) */
/* style.css dosyasına ekleyin veya güncelleyin */

.footer-bottom {
    background-color: #000000; /* Arka planı siyah yap */
    color: #ffffff; /* Yazı rengini beyaz yap */
    border-top: 1px solid #444; /* Üstteki ince çizgiyi koru */
    padding: 20px; /* Üstten ve alttan boşluk */
    margin-top: 30px;
    text-align: center;
    font-size:0.95em;
}

.footer-bottom a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #cccccc;
    text-decoration: none;
}


/* Responsive Ayarlamalar */
@media (max-width: 768px) {
    .main-footer .footer-content {
        flex-direction: column; /* Mobil'de alt alta sırala */
        align-items: center; /* Ortala */
        gap: 30px; /* Mobil'de bölümler arası boşluk */
    }

    .main-footer .footer-section {
        width: 100%; /* Tam genişlik kapla */
        max-width: 400px; /* Çok geniş olmaması için */
        text-align: center; /* Metinleri ortala */
    }

    .main-footer .footer-section.map-section {
        order: 5; /* Mobil'de harita bölümünü en sona taşı (isteğe bağlı, görsel akışı düzenler) */
    }

    .main-footer .footer-section h3 {
        text-align: center; /* Başlıkları ortala */
    }

    .main-footer .footer-section ul {
        text-align: center; /* Linkleri ortala */
    }

    .main-footer .newsletter .text-input {
        width: 100%; /* Mobil'de input tam genişlik */
        max-width: none;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .main-footer .newsletter form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .main-footer {
        padding: 30px 15px 15px;
    }
    .main-footer .footer-content {
        gap: 20px;
    }
    .main-footer .footer-section h3 {
        font-size: 1.2em;
    }
}
/* footer bitiş */