/* --- Google Font Ekleme --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* --- Genel Stil Tanımlamaları ve Renkler --- */

/* CSS Değişkenleri ile renkleri tek bir yerden yönetelim */
:root {
    --ana-renk: #4CAF50; /* Güven veren bir yeşil */
    --ikincil-renk: #2196F3; /* Canlı bir mavi */
    --metin-rengi: #333333; /* Koyu gri, saf siyahtan daha yumuşak */
    --arka-plan: #FFFFFF;
    --hafif-arka-plan: #f8f9fa;
    --kenarlik-rengi: #dee2e6;
    --font-aile: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-aile);
    color: var(--metin-rengi);
    background-color: var(--hafif-arka-plan);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-aile);
    font-weight: 700; /* Kalın başlıklar */
    color: var(--ana-renk);
}

a {
    color: var(--ikincil-renk);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--ana-renk);
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #3a993f; /* Hover durumunda biraz koyulaştıralım */
    border-color: #3a993f;
}

.btn-secondary {
    background-color: var(--ikincil-renk);
    border-color: var(--ikincil-renk);
}

.btn-secondary:hover {
    background-color: #1e88e5;
    border-color: #1e88e5;
}

/* === HEADER VE MENÜ FİNAL STİLLERİ (TÜM AYARLAR BİRLEŞTİRİLDİ) === */

/* --- 1. BÖLÜM: HEADER (ÜST KISIM) --- */
header {
    padding: 5px 0; /* İSTEK: Header yüksekliği azaltıldı */
    background-color: #fff;
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* İSTEK: Beğenilen gölge korundu */
}

.header-main {
    display: flex; /* İSTEK: Logo ve sağ tarafı yan yana getirir */
    justify-content: space-between; /* Aralarına boşluk koyarak iki uca yaslar */
    align-items: center; /* Dikey olarak ortalar */
    gap: 20px; /* Aralarındaki minimum boşluk */
}

.header-logo {
    flex-shrink: 0; /* Ekran daralsa bile logo küçülüp bozulmasın */
}

.header-right {
    display: flex; /* Arama ve sepeti kendi içinde yan yana getirir */
    align-items: center;
}

/* --- HEADER İÇİ ELEMANLAR --- */
.header-search {
    margin-right: 18px; /* Arama ile sepet arasına boşluk */
}
#search input {
    height: 36px; /* Arama kutusu yüksekliği */
    font-size: 13px; /* İSTEK: Arama kutusu yazı boyutu küçültüldü */
    border-radius: 20px; /* Kenarları yuvarlak */
    border: 1px solid #ddd;
}
#search input::placeholder {
    font-size: 13px; /* İSTEK: 'Ne aramıştınız?' yazısı küçültüldü */
    color: #999;
}
#search .btn {
    font-size: 13px; /* İSTEK: Arama butonu (büyüteç) ikonu küçültüldü */
    background: none;
}
.header-cart #cart .btn {
    font-size: 18px; /* İSTEK: Sepet ikonu küçültüldü */
    padding: 2px 5px;
}
#cart > .btn > span#cart-total {
    font-size: 13px; /* İSTEK: Sepet içindeki yazı küçültüldü */
    font-weight: normal;
}


/* --- 2. BÖLÜM: MENÜ ÇUBUĞU (NAVİGASYON) --- */
#menu.navbar {
    /* İSTEK: Üst/alt boşlukları azaltıldı */
    margin-top: 18px;
    margin-bottom: 22px;

	background-color: #ffffff;             /* Arka planı tekrar saf beyaz yapalım */
    border: 1px solid #e9e9e9;             /* Çepeçevre ince bir kenarlık */
    border-radius: 6px;                    /* Kenarları yumuşatalım ki şık bir kutu olsun */
    box-shadow: 0 3px 8px rgba(0,0,0,0.07);/* Daha belirgin ama yumuşak bir gölge */
    min-height: auto;
}
#menu .navbar-collapse {
    padding: 0;
}
#menu ul.navbar-nav {
    display: flex;
    justify-content: center; /* Menü linklerini ortalar */
    width: 100%;
    float: none !important;
}

#menu .navbar-nav > li > a {
    color: #444;
    font-size: 15px; /* Fontu bir tık küçülterek yüksekliğe yardımcı olalım */
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 18px; /* Dikey padding'i daha da azalttık */
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid transparent; /* Hover efekti için hazırlık */
}

#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li.open > a {
    background: none !important;
    color: var(--ana-renk) !important;
    border-bottom-color: var(--ana-renk); /* Üzerine gelince alttaki çizgi belirir */
}

/* --- AÇILIR MENÜLER (DROPDOWN) --- */
#menu .dropdown-menu {
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    border: 1px solid #e7e7e7;
    border-top: 2px solid var(--ana-renk);
    padding: 5px 0;
    margin-top: 0px;
}
#menu .dropdown-menu a {
    display: block; padding: 10px 20px; color: #333 !important;
    font-weight: 500; font-size: 15px; text-transform: none;
    transition: all 0.2s ease;
}
#menu .dropdown-menu a:hover {
    background-color: var(--hafif-arka-plan);
    color: var(--ana-renk) !important;
}
#menu .dropdown-menu li > a:hover {
    background-image: none;
    background-color: var(--hafif-arka-plan);
    color: var(--ana-renk);
	transition: all 0.2s ease;
}
/* === AÇILIR MENÜ SON ELEMAN HOVER DÜZELTMESİ === */

/* Sadece dropdown menünün SON elemanının hover durumunu özel olarak hedef alalım */
#menu .dropdown-menu > li:last-child > a:hover {
    background-color: var(--hafif-arka-plan) !important;
    color: var(--ana-renk) !important;
}

/* === 3. BÖLÜM: EN ÜST NAVİGASYON (#top) === */

/* Adım 1: Çubuğun kendisini stilize edelim */
#top {
    background-color: #333; /* Belirgin, koyu gri bir arka plan */
    border-bottom: 1px solid #444; /* Altta hafif tonda bir ayırıcı çizgi */
    padding: 8px 0; /* İSTEK: Yüksekliği artırmak ve ortalamak için iç boşluk */
    font-size: 13px; /* İçindeki genel font boyutu */
}

/* Adım 2: Float yerine Flexbox ile hizalama (Modern ve Doğru Çözüm) */
#top .container {
    display: flex;
    justify-content: space-between; /* Sol ve sağdaki grupları iki uca yaslar */
    align-items: center; /* İSTEK: Tüm elemanları dikeyde mükemmel ortalar */
}
/* Eski float sınıflarının davranışını iptal edelim */
#top .pull-left, #top .pull-right {
    float: none !important;
}

/* Adım 3: İçindeki tüm link, yazı ve ikonların rengini ayarlayalım */
#top, #top a, #top i, #top span {
    color: #e7e1e1; /* Koyu arka plana uygun açık renk */
    transition: color 0.2s ease;
    vertical-align: middle; /* Dikey hizalamayı garantiler */
}
#top a:hover {
    color: #fff; /* Üzerine gelince daha parlak olsun */
    text-decoration: none;
}

/* Adım 4: Dil/Para birimi seçicisini düzenleyelim */
#top .btn-group > .btn {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
    line-height: 1; /* Butonun gereksiz yüksekliğini alır */
}
#top .btn-group .dropdown-menu {
    background-color: #333; /* Açılır menü de koyu olsun */
    border-color: #444;
}
#top .btn-group .dropdown-menu button {
    color: #eee; /* Açılır menüdeki yazı renkleri */
    text-align: left;
}
#top .btn-group .dropdown-menu button:hover {
    background-color: #444;
    color: #fff;
}

/* Adım 5: Sağdaki link listesini düzenleyelim */
#top-links ul.list-inline > li + li {
    margin-left: 20px; /* Linkler arasına boşluk koy */
}
/* Sağdaki açılır menüyü de düzenleyelim ('Hesabım' gibi) */
#top-links .dropdown-menu {
    background-color: #333;
    border-color: #444;
}
#top-links .dropdown-menu a {
    color: #eee !important;
}
#top-links .dropdown-menu a:hover {
    background-color: #444;
    color: #fff !important;
}

/* --- DİL SEÇİCİSİ MANUEL HİZALAMA --- */

#top #form-language .btn-group {
  position: relative; /* Konumlandırmayı etkinleştirir */
  top: -6px;          /* YUKARI kaydırmak için eksi değer. Bu değeri ayarlayacağız. */
}

/* === 4. BÖLÜM: FOOTER (ALT KISIM) === */

footer {
    background-color: #282828; /* Koyu, modern bir arka plan */
    color: #a0a0a0; /* Okunabilir, yumuşak bir metin rengi */
    padding: 40px 0 0 0; /* Üstten geniş, alttan sıfır boşluk */
    font-size: 14px;
}

footer h5 {
    color: #ffffff; /* Başlıklar beyaz ve belirgin olsun */
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 15px;
}

footer a {
    color: #a0a0a0;
    transition: color 0.2s ease;
}

footer a:hover {
    color: #ffffff; /* Linklerin üzerine gelince beyaz olsun */
    text-decoration: none;
}

/* Sol Taraf: Hakkımızda ve Logo */
.footer-about .footer-logo {
    margin-bottom: 20px;
    max-width: 180px; /* Logonun çok büyük olmasını engelle */
    filter: brightness(0) invert(1); /* Siyah logoyu beyaz yapar (isteğe bağlı) */
}

/* Sosyal Medya İkonları */
.footer-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%; /* Yuvarlak ikonlar */
    background-color: #3e3e3e;
    color: #fff;
    margin-right: 8px;
    font-size: 16px;
    transition: background-color 0.2s ease;
}
.footer-social a:hover {
    background-color: var(--ana-renk); /* Marka rengimizle vurgu */
}

/* Sağ Taraf: İletişim Bilgileri */
.footer-contact li {
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
}
.footer-contact i {
    font-size: 16px;
    margin-right: 15px;
    margin-top: 3px;
    color: var(--ana-renk); /* İkonları marka rengimizle vurgula */
}

/* En Alt Şerit */
.footer-bottom {
    background-color: #1e1e1e; /* Bir ton daha koyu arka plan */
    padding: 20px 0;
    margin-top: 40px;
    text-align: center;
    font-size: 13px;
}
.footer-bottom p {
    margin: 0;
}

/* === 5. BÖLÜM: ÜRÜN KUTULARI (KATEGORİ SAYFASI) === */

/* Ürünün ana kapsayıcısını (kartı) düzenleyelim */
.product-layout .product-thumb {
    border: 1px solid #e9e9e9;         /* Eski kenarlığı biraz daha yumuşak bir renkle değiştirelim */
    border-radius: 8px;                /* Kenarları modern bir görünüm için yuvarlatalım */
    background-color: #fff;
    padding: 15px;                     /* Kartın içine nefes alması için boşluk verelim */
    text-align: center;                /* İçindeki her şeyi ortalayalım */
    transition: all 0.3s ease-in-out;  /* Üzerine gelince oluşacak efektler için yumuşak geçiş */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* Başlangıçta çok hafif bir gölge */
    margin-bottom: 20px;
}

/* Kartın üzerine gelince (hover) efekti */
.product-layout .product-thumb:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Gölgeyi belirginleştir */
    transform: translateY(-5px);             /* Kartı 5px yukarı kaydır */
    border-color: #ddd;                      /* Kenarlık rengini biraz koyulaştır */
}

/* Resim bölümü */
.product-thumb .image {
    margin-bottom: 15px; /* Resimle yazı arasına boşluk */
}
.product-thumb .image img {
    border-radius: 6px; /* Resmin de kenarlarını hafif yuvarlatalım */
}


/* Yazı ve Fiyat Bölümü (.caption) */
.product-thumb .caption {
    padding: 0; /* Bootstrap'in varsayılan padding'ini sıfırla */
    min-height: 90px; /* Kartların aynı hizada durması için minimum yükseklik */
}
.product-thumb .caption h4 {
    margin-bottom: 10px;
}
.product-thumb .caption h4 a {
    font-size: 17px;
    font-weight: 700;
    color: #222; /* Ürün ismi rengi */
	line-height: 1.4; /* İsim iki satıra sığarsa satırlar arası boşluğu ayarlar */
    transition: color 0.2s ease; /* Renk değişim efekti için yumuşak geçiş */
}
.product-thumb .caption h4 a:hover {
    color: var(--ana-renk); /* Marka rengimiz olan yeşile dönsün */
}
.product-thumb .price {
    font-size: 18px;
    font-weight: 700;
    color: var(--ana-renk); /* Fiyatı marka rengimizle vurgulayalım */
    margin-bottom: 15px;
}
/* Vergiler hariç fiyat yazısını küçültelim */
.product-thumb .price .price-tax {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

/* Buton Grubu */
.product-thumb .button-group {
    border-top: 1px solid #f0f0f0; /* Butonları yazıdan ayıran çizgi */
    padding-top: 15px;
}

/* "Sepete Ekle" butonunu ana buton stilimizle aynı yapalım */
.product-thumb .button-group button:first-of-type {
    background-color: var(--ana-renk);
    border-color: var(--ana-renk);
    color: #fff;
    border-radius: 5px;
    font-weight: 500;
    padding: 8px 12px;
    font-size: 14px;
}
.product-thumb .button-group button:first-of-type:hover {
    background-color: #45a049;
    border-color: #45a049;
}
/* Diğer ikon butonları (istek listesi vb.) daha sade olsun */
.product-thumb .button-group button {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 12px;
}
.product-thumb .button-group button:hover {
    background: #e9e9e9;
}

/* === 6. BÖLÜM: ÜRÜN DETAY SAYFASI === */

/* --- Genel Yerleşim ve Başlık --- */
#product-product .row {
    margin-bottom: 25px; /* Ürün bilgisi ile alttaki sekmeler arasına boşluk */
}
#product-product h1 {
    font-size: 28px; /* Ürün başlığını daha büyük ve dikkat çekici yapalım */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* --- Sağ Sütun: Fiyat ve Butonlar --- */

/* Fiyatı öne çıkaralım */
#product-product .list-unstyled .price {
    font-size: 26px; /* Fiyatı büyütelim */
    font-weight: 700;
    color: var(--ana-renk); /* Marka rengimizle vurgulayalım */
    margin-bottom: 20px;
}
#product-product .list-unstyled .price-tax {
    font-size: 14px;
    font-weight: 400;
    color: #888;
}

/* Ürün Seçenekleri (stok vb. bilgiler) */
#product-product #product {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 0;
    margin-bottom: 20px;
}
#product-product #product .form-group {
    margin-bottom: 15px;
}
#product-product #product label {
    font-weight: 600; /* Seçenek etiketlerini belirginleştir */
}

/* "Sepete Ekle" Butonunu devleştirelim */
#product-product #button-cart {
    width: 100%; /* Buton tam genişlikte olsun */
    padding: 15px 20px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px; /* Harf aralarını biraz açalım */
    line-height: 1.5;
}

/* Miktar kutusunu butonla uyumlu yapalım */
#product-product #input-quantity {
    border-radius: 5px;
    height: 55px; /* Butonla aynı yükseklikte olsun */
    width: 80px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}

/* Diğer ikon butonları (istek listesi, karşılaştır) */
#product-product .btn-group .btn-default {
    height: 55px;
    width: 55px;
    font-size: 20px;
}


/* --- Sol Sütun: Resim ve Galeri --- */
#product-product .thumbnails {
    list-style: none;
    padding: 0;
}
/* Ana resmin etrafındaki çerçeveyi güzelleştirelim */
#product-product .thumbnails > li:first-child {
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
}
/* Alttaki küçük resimler */
#product-product .thumbnails > li {
    margin: 0 10px 10px 0;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    padding: 5px;
}
#product-product .thumbnails > li:hover {
    border-color: var(--ana-renk); /* Üzerine gelince kenarlık renk değiştirsin */
}


/* --- Açıklama ve Yorumlar Sekmeleri --- */
#product-product .nav-tabs {
    border-bottom: 2px solid #ddd; /* Sekmelerin altındaki çizgiyi belirginleştir */
    margin-bottom: 20px;
}
#product-product .nav-tabs > li > a {
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    font-weight: 500;
    color: #555;
    border-bottom: none;
}
#product-product .nav-tabs > li.active > a, 
#product-product .nav-tabs > li.active > a:hover, 
#product-product .nav-tabs > li.active > a:focus {
    color: var(--ana-renk);
    border: 2px solid #ddd;
    border-bottom-color: transparent; /* Aktif sekmenin alt çizgisi olmasın */
    margin-bottom: -2px; /* Çizginin üzerine binsin */
}

/* === 7. BÖLÜM: MİKTAR İNDİRİM KUTUSU (FİNAL VERSİYON - İÇ ÇİZGİ DÜZELTMESİ) === */

/* Ayırıcıyı gizle */
#product-product ul.list-unstyled > li:nth-child(3) {
    display: none !important;
}

/* İndirimleri içeren 4. ve sonraki LI'ları genel olarak stilize edelim */
#product-product ul.list-unstyled > li:nth-child(n+4) {
    background: #fffadd !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    /* SADECE sol ve sağ kenarlıkları burada veriyoruz */
    border-left: 2px dashed #e6c521 !important;
    border-right: 2px dashed #e6c521 !important;
    text-align: left !important;
    margin: 0 !important;
    border-radius: 0; /* Köşeleri sıfırla, sadece ilk ve son elemana vereceğiz */
}

/* İSTEK: İndirim satırları arasına İNCE bir çizgi koyalım */
/* Bu kural, sonuncu HARİÇ tüm indirim satırlarının altına ince bir çizgi ekler. */
#product-product ul.list-unstyled > li:nth-child(n+4):not(:last-child) {
    border-bottom: 1px solid #f2e7c3 !important; 
}

/* Kutunun üstünü oluştur: Sadece 4. LI */
#product-product ul.list-unstyled > li:nth-child(4) {
    margin-top: 25px !important;
    border-top: 2px dashed #e6c521 !important; /* Kalın üst çerçeve */
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    position: relative; /* Başlık için gerekli */
    padding-top: 65px !important; /* Başlık için yer aç */
}

/* BAŞLIĞI OLUŞTURAN BÖLÜM (Bu kod doğru, dokunmuyoruz) */
#product-product ul.list-unstyled > li:nth-child(4)::before {
    content: 'Toplu Alım Fırsatları';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    background-color: var(--ana-renk);
    color: #fff;
    padding: 12px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Kutunun en altını oluştur: Sadece son LI */
#product-product ul.list-unstyled > li:last-of-type {
    border-bottom: 2px dashed #e6c521 !important; /* Kalın alt çerçeve */
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* === ÜRÜN KARTI SEPET BUTONUNU KÜÇÜLTME === */

/* Ürün kartındaki "Sepete Ekle" butonunu özel olarak hedef alalım */
/* onclick özelliğinde 'cart.add' geçen butonu seçiyoruz */
.product-thumb .button-group button[onclick*="cart.add"] {
    width: 45px !important; /* Butona sabit, küçük bir genişlik verelim */
    padding: 6px 0 !important; /* İç boşluğunu küçültelim */
    background-color: #f5f5f5 !important; /* Rengini diğer ikonlarla aynı yapalım */
    border-color: #ddd !important;
}

/* Üzerine gelince de ana rengimiz olsun */
.product-thumb .button-group button[onclick*="cart.add"]:hover {
    background-color: var(--ana-renk) !important;
    border-color: var(--ana-renk) !important;
}

/* Butonun içindeki "SEPETE EKLE" yazısını gizleyelim */
.product-thumb .button-group button[onclick*="cart.add"] span {
    display: none; 
}

/* İkonun rengini ayarlayalım */
.product-thumb .button-group button[onclick*="cart.add"] .fa-shopping-cart {
    color: var(--ana-renk);
}
.product-thumb .button-group button[onclick*="cart.add"]:hover .fa-shopping-cart {
    color: #fff;
}

/* === 8. BÖLÜM: JAVASCRIPT İLE GELEN BUTONLARI GİZLEME (NİHAİ ÇÖZÜM) === */

/* onclick event'i 'wishlist.add' kelimesini içeren butonu gizle */
#product-product button[onclick*="wishlist.add"] {
    display: none !important;
}

/* onclick event'i 'compare.add' kelimesini içeren butonu gizle */
#product-product button[onclick*="compare.add"] {
    display: none !important;
}

/* === 9. BÖLÜM: BOOTSTRAP STİLLERİNİ EZME (OVERRIDE) === */

/* === SİTE GENELİ BİRİNCİL BUTON STİLİ (FİNAL) === */

/* 'body' kelimesini ekleyerek kuralımızı güçlü hale getiriyoruz.
   Bu, sitedeki TÜM .btn-primary butonlarını etkileyecektir. */
body .btn-primary {
    color: #fff !important;
    background-color: var(--ana-renk) !important;
    border-color: var(--ana-renk) !important;
    
    /* Bootstrap'in gradyen/gölge efektlerini tamamen sıfırlayalım */
    background-image: none !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
    /* Butonların biraz daha dolgun görünmesi için */
    padding: 10px 18px !important;
    font-weight: 500 !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active {
    color: #fff !important;
    background-color: #45a049 !important; /* Ana rengin biraz koyusu */
    border-color: #45a049 !important;
    background-image: none !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* --- Menü Rengini Garantiye Alma --- */
/* Menü çubuğumuzun mavi olmadığından emin olalım */
#menu.navbar {
    background-color: #ffffff !important; /* Bu bizim en son belirlediğimiz kutu menü rengiydi */
    border-color: #e9e9e9 !important;
}
/* Ana menü linklerinin de rengini garantileyelim */
#menu .navbar-nav > li > a {
    color: #444 !important;
}

/* --- Sepet Sayfası Güncelleme Butonu FİNALİ --- */
/* Artık temel stiller yüklendiği için bu kuralın çalışması gerekiyor.
   Seçiciyi daha da güçlendirdik. */
#content .table-responsive .input-group .btn-primary[data-original-title="Güncelle"] {
    /* Boyutlandırmayı sıfırlayıp yeniden tanımlayalım */
    height: 34px !important;
    width: auto !important;
    min-width: 40px !important;
    
    /* Padding'i sıfırdan, zorla tanımlayalım */
    padding: 6px 12px !important;
    
    /* Font ve ikon boyutunu tanımlayalım */
    font-size: 14px !important;
    line-height: 1.42 !important;

    /* Diğer olası çakışmaları ezelim */
    background-image: none !important;
}

/* === 10. BÖLÜM: FİNAL DOKUNUŞ: MAVİ MENÜ SORUNU ÇÖZÜMÜ === */

/* Menü çubuğunun arka planının KESİNLİKLE beyaz olduğunu garantileyim */
/* Bu kural, Bootstrap'in .navbar-default'ini de ezer */
#menu.navbar {
    background-image: none !important;
    background-color: #ffffff !important; /* Bizim istediğimiz kutu menü rengi (beyaz) */
    border-color: #e9e9e9 !important;      /* Bizim istediğimiz kenarlık rengi */
    box-shadow: 0 3px 8px rgba(0,0,0,0.07) !important; /* Gölgemiz */
}

/* Menünün içindeki linklerin rengini, o genel mavi kuralını ezecek şekilde yeniden tanımlayalım */
#menu.navbar .navbar-nav > li > a {
    color: #444 !important; /* Linkler mavi değil, koyu gri olsun */
}

/* Üzerine gelince de yeşil olduğundan emin olalım */
#menu.navbar .nav > li > a:hover {
    color: var(--ana-renk) !important; /* Üzerine gelince ana rengimiz */
    background-color: transparent !important; /* Arka planı olmasın */
}

/* === 11. BÖLÜM: MOBİL UYUMLULUK DÜZELTMELERİ (DÜZELTİLMİŞ) === */

/* Bu kurallar sadece mobil ekranlarda (genişliği 767px ve altı) geçerli olsun */
@media (max-width: 767px) {

    /* --- 2. Açılır Menü Yerleşimini Düzeltme --- */
    #menu .navbar-collapse {
        /* Açılan menünün arka planını ve genel görünümünü ayarlayalım */
        background: #fdfdfd;
        border-top: 1px solid #eee;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
        margin-top: 10px;
        padding: 5px 0;
    }
	#menu .navbar-nav > li {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
}
#menu .navbar-nav > li + li {
    border-top: 1px solid #eee;
}
#menu .navbar-nav > li > a {
    padding: 12px 15px;
}

    /* Mobil menü içindeki alt menüleri (dropdown) de düzenleyelim */
    #menu .dropdown-menu {
        position: static !important; /* Statik konumlandırarak akışın içinde kalmasını sağla */
        width: 100%;
        float: none !important;
        box-shadow: none;
        border: none;
        background: #f5f5f5; /* İç içe menüyü hafif farklı bir renkle göster */
        padding-left: 15px; /* İçeriye doğru bir girinti ver */
    }
    #menu .dropdown-menu a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* --- 3. MOBİLDE MAVİ OLAN MENÜ ÇUBUĞUNU DÜZELTME --- */
    .navbar-default {
        background-image: none !important;
        background-color: #ffffff !important; /* Arka planı beyaza zorla */
        border-color: #e9e9e9 !important;
    }
	/* Menü linklerinin de rengini garantileyelim */
    .navbar-default .navbar-nav > li > a {
        color: #444 !important;
    }
    /* --- 4. MOBİLDE MAVİ OLAN YENİLE BUTONUNU DÜZELTME --- */
    .btn.btn-primary {
        background-color: var(--ana-renk) !important;
        border-color: var(--ana-renk) !important;
    }
     .btn.btn-primary:hover {
        background-color: #45a049 !important; /* Ana rengin biraz koyusu */
        border-color: #45a049 !important;
    }	
	/* --- 5. MOBİLDE BÜYÜK OLAN YENİLE BUTONUNU DÜZELTME --- */
    #content .table-responsive .input-group .btn-primary[data-original-title="Güncelle"] {
        height: 34px !important;
        width: auto !important;
        min-width: 40px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        line-height: 1.42 !important;
    }	
	/* --- 6. FOOTER ALANLARA TIKLANABİLSİN --- */
	footer ul,
	footer li,
	footer a {
		display: block;
		position: relative;
		z-index: 2;
	}
}

/*  mobilde taşan menüyü alta açma */
@media (max-width: 767px) {
    #menu .navbar-nav {
        display: flex;
        flex-wrap: wrap; /* Taşarsa alt satıra geç */
        justify-content: center; /* Ortala */
    }
    #menu .navbar-nav > li {
        flex: 1 1 auto;
        min-width: 33.33%; /* 3 sütun gibi davranması için */
        text-align: center;
        border-top: 1px solid #eee; /* Gözle görülür ayrım */
    }
    #menu .navbar-nav > li > a {
        font-size: 14px;
        padding: 10px 5px; /* Daha az iç boşluk */
    }
}

/* "Categories" yazısını mobilde gizleme */
@media (max-width: 767px) {
    #menu .navbar-header #category,
    #menu .navbar-header .heading,
    #menu .navbar-header h3 {
        display: none !important;
    }
}