/* --- GENEL AYARLAR & SIFIRLAMA --- */

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url(../arkaplan_resim/arkaplan2.jpg) !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-color: #ffffff;
}

/* --- HEADER ANA TAŞIYICI --- */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-image: url(../arkaplan_resim/üstdivapson.png);
    background-size: 100% 100%; /* Arka plan her zaman ekranı tam kaplar */
    height: 15vh; /* Toplam yükseklik */
    max-height: 15vh; /* Ekranın sadece %15'i header olsun */
    display: flex;
    flex-direction: column;
}

/* 1. ÜST ALAN (Arama ve Butonun Olduğu Kısım) */
.header-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Elemanları soldan sağa dizer */
    padding: 0 4%;              /* Kenar payı */
    height: 75px;
    width: 100%;
}

/* 1. LOGO ALANI (%20) */
.logo-area {
    flex: 0 0 20%; /* Logonun alanı sabit %20 kalsın */
}

.hidden-home-link {
    display: block;
    width: 8vw; 
    height: 15vh;
    margin-left: 20%; /* Logodaki resmin konumuna göre % ile ayarla */
    cursor: pointer;
}
/* --- LOGO VE ANA SAYFA BUTONU (MANUEL AYAR ALANI) --- */
.grid-logo {
    position: relative; /* Butonun dışarı taşmasını engeller */
    width: 300px;
    height: 90px;
}



/* Mevcut logo etiketlerini kapatıyoruz */
.logo-container, .logo { display: none !important; }

/* --- ARAMA KUTUSU VE BUTONLAR --- */

#search { border: none; background: transparent; width: 100%; outline: none; font-size: 14px; }
#search-btn { border: none; background: transparent; cursor: pointer; font-size: 18px; color: #444; }
/* 2. ARAMA KUTUSU (ORTA %45 - ESNEK) */
.search-box {
    display: flex;
    background: #fff;
    border-radius: 25px;
    border: 1px solid #ccc;
    flex: 0 0 40%;    /* Genişliğini buradan ayarla */
    height: 50%;
    margin-left: 2%;  /* BURASI ÖNEMLİ: Bu değeri artırırsan sağa, azaltırsan sola kayar */
    position: relative;
}

/* 3. İLETİŞİM ALANI (HEMEN YANINDA - %15) */
.contact-area {
    flex: 0 0 10%; 
    display: flex;
    justify-content: flex-start; /* Aramanın hemen bitimine yaslar */
    margin-left: 10px;           /* Arama kutusu ile buton arasındaki boşluk */
    height: 50%;
}

.contact-btn {
    background: #e80000;
    color: #fff;
    padding: 7px 0;
    width: 100%;                 /* Kendi alanı olan %15'i tam doldurur */
    border-radius: 20px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
}

/* --- NAVİGASYON (ŞEFFAF VE HİZALI) --- */
.main-nav-container {
    width: 50%;
    display: flex;
    justify-content: center;
    background: transparent;
    height: 50%; /* Çizginin altında kalan alan */
    margin-left: 25%;
}

.nav-8-12 {
    display: flex;
    gap: 5vw; /* Kategori arasını ekran genişliğine göre ayarlar (vw = viewport width) */
    padding-top: -3px;
}

.nav-item {
    position: relative; /* Dropdown'un buna göre hizalanması için şart */
    
    padding: 10px 20px;
    margin-top: -1.5vw;
     font-weight: 600;
    color: #ffffff;
    font-size: 15px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    cursor: pointer;
}

/* Mouse aşağı inerken panelin kapanmasını engelleyen köprü (Optimize Edildi) */
.nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px; /* 30px çok fazlaydı, 10px mouse ayrılınca hemen kapanmasını sağlar */
    background: transparent;
}

.nav-item:hover { color: #ff0000; }

/* Mouse aşağı inerken panelin kapanmasını engelleyen köprü alanı */


/* 2. MARKA KUTUSU (DROPDOWN - ORTALANMIŞ) */
.brand-dropdown {
    display: none !important; /* JS'den gelebilecek çakışmaları önlemek için */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 2000;
    /* DİKDÖRTGEN FORMÜLÜ: Genişliği sabit tutarsak logolar alt alta dizilir */
    width: 320px;        /* Kutunun genişliğini sabitledik (3 logo yan yana sığar) */
    
    display: flex;
    flex-wrap: wrap;     /* Logolar sığmayınca alt satıra geçer */
    gap: 15px;           /* Logolar arası dikey ve yatay mesafe */
    justify-content: center; /* Logoları kutu içinde ortalar */
    min-width: 250px;
    pointer-events: none; /* Kutu kapalıyken mouse etkileşimini tamamen keser */
}
/* Sadece üzerine gelinen kategorinin markalarını göster */
/* SADECE MOUSE ÜZERİNDEYKEN AÇILIR */
.nav-item:hover > .brand-dropdown {
    display: flex !important;
    pointer-events: auto; /* Görünürken etkileşime izin verir */
}
.brand-img-link {
    width: 150px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #f0f0f0; border-radius: 5px; overflow: hidden;
}
.brand-img-link img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- POPÜLER MODELLER VE SLIDER --- */
.popular-section { width: 90%; margin: 10px auto; overflow: hidden; position: relative;height: 56vh auto; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; height: 400px; }
.item-big { grid-row: 1 / span 2; }
.hero-item { position: relative; overflow: hidden; border-radius: 12px; background: #222; }
.hero-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* KAYMA ANİMASYONLARI */
@keyframes slideRightOut { 
    from { transform: translateX(0); } 
    to { transform: translateX(100%); } 
}
@keyframes slideRightIn { 
    from { transform: translateX(-100%); } 
    to { transform: translateX(0); } 
}

/* Sola Kayış (Mevcut olanı iyileştirelim) */
@keyframes slideLeftOut { 
    from { transform: translateX(0); } 
    to { transform: translateX(-100%); } 
}
@keyframes slideLeftIn { 
    from { transform: translateX(100%); } 
    to { transform: translateX(0); } 
}

.slide-right-out { animation: slideRightOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-right-in { animation: slideRightIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-left-out { animation: slideLeftOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-left-in { animation: slideLeftIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* --- TICKER (HAREKETLİ ŞERİTLER) --- */
.ticker-section { margin: 50px 0; overflow: hidden; }
.ticker-wrapper { display: flex; white-space: nowrap; width: max-content; margin-bottom: 25px; }
.ticker-item { flex: 0 0 28vw; height: 270px; padding: 0 15px; cursor: pointer; transition: 0.3s; }
.ticker-item:hover { transform: scale(1.05); }
.ticker-item img { width: 100%; height: 100%; object-fit: contain; background: transparent; }

/* Şeritlerin sınıflarına bu animasyonları tekrar bağlıyoruz */
.ticker-wrapper.right { 
    animation: marquee-right 100s linear infinite !important; 
}

.ticker-wrapper.left { 
    animation: marquee-left 100s linear infinite !important; 
}

/* --- KATEGORİ KARTLARI --- */
.cat-images-section {
    padding-top: 0 !important;  /* Kendi içindeki üst boşluğu sıfırla */
    margin-top: 2vh !important; /* Kırmızı alanları yukarı çekerek yok eder */
    position: relative;         /* Yukarı tırmanması için şart */
    z-index: 5;                /* Üstteki slider'ın üstüne binmesini sağlar */
    margin-left: 5vw;
    
}
/* KATEGORİ KONTEYNIRI */
.cat-image-grid {
    display: grid !important;
    width: 90vw !important;      /* Ekran genişliğinin %95'ini kaplasın */
    margin: 0 !important; /* Üstten ve alttan ekranın %2'si kadar boşluk */
    
    /* 4 sütun kalsın ama her birinin alanı ekranla beraber büyüsün */
    grid-template-columns: repeat(4, 1fr) !important; 
    
    /* MESAFE AYARI: Piksel yerine ekran genişliğine (vw) bağladık */
    gap: 2vw !important;       /* Resimler arası mesafe artık ekranın %3'ü kadar */
}

/* KATEGORİ KARTLARI */
.cat-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    margin: 0 !important;
    /* BÜYÜTME BURADA: 18vh veya 20vh yerine 25vh yaparsak resimler DEVLEŞİR */
    height: 23vh !important;     /* Ekran yüksekliğinin tam 4'te 1'i */
             /* Çok ezilmesin diye bir emniyet sınırı */
    
    width: 100% !important;       /* Kart, grid hücresinin tamamını doldursun */
    
}

.cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Resmi kesmeden kutuya tam doldurur */
}
.cat-label { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7); color: white; padding: 10px; text-align: center; font-weight: bold; }

/* --- ÜRÜN LİSTELERİ --- */

.product-card { background: white; border-radius: 12px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); text-align: center; cursor: pointer; transition: 0.3s; }
.product-card img { width: 100%; height: 180px; object-fit: contain; }

/* --- ÜRÜN DETAY SAYFASI --- */
.product-detail-container { display: flex; max-width: 1100px; margin: 40px auto; gap: 40px; padding: 30px; background: rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); align-items: center; }
.detail-left img { width: 100%; height: auto; max-height: 500px; object-fit: contain; }
.detail-right { flex: 1; display: flex; flex-direction: column; }
.detail-brand-label { color: #e80000; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; }
.detail-desc-box { margin: 20px 0; padding: 20px; background: #fff; border-radius: 12px; border: 1px solid #eee; line-height: 1.6; }
.whatsapp-detail-btn { background: #25D366; color: white; padding: 15px 30px; border-radius: 40px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; gap: 10px; }

/* --- FOOTER & MODAL --- */
.main-footer { background: #222; color: #fff; padding: 25px 0 0 0; margin-top: 40px; text-align: center; }
.footer-info p { margin: 8px 0; font-size: 14px; color: #ccc; }
.developer-credit { text-align: center; padding: 1px 0 !important; background-color: #222; color: #bbb !important; border-top: 1px solid #444; }
.dev-link { color: #982d2d !important; text-decoration: none; font-weight: bold; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); }
.modal-content { background: white; margin: 10% auto; padding: 30px; border-radius: 20px; width: 350px; position: relative; text-align: center; }
.close-modal { position: absolute; right: 15px; top: 10px; cursor: pointer; font-size: 24px; color: #999; }
#popular-hero-area { scroll-margin-top: 150px; padding-top: 20px; } 

/* --- MARKA ŞERİDİ ÖZEL AYARLARI (RENKLİ VERSİYON) --- */
.brand-ticker-area {
    background: rgba(255, 255, 255, 0.9); /* Arka planı biraz daha net beyaz yaptık */
    padding: 25px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; /* Altına da ince çizgi ekledik, footer'dan ayrılsın */
    margin-top: 40px; /* Üstteki içerikten biraz uzaklaşsın */
}

#brand-logos-ticker .ticker-item {
    flex: 0 0 16vw; /* Logoların kapladığı alan */
    height: 90px;   /* Yükseklik */
    display: flex;
    align-items: center;     /* Logoları dikeyde ortala */
    justify-content: center; /* Logoları yatayda ortala */
}

#brand-logos-ticker img {
    max-width: 85%;      /* Kutu dışına taşmasın */
    max-height: 85%;
    object-fit: contain; /* Orantılı sığdır */
    transition: transform 0.3s ease; /* Sadece hareket efekti için geçiş */
    
    /* BURADAKİ 'filter: grayscale' ve 'opacity' SATIRLARINI KALDIRDIK */
}

#brand-logos-ticker img:hover {
    /* Üzerine gelince renk değişimi YOK, sadece hafifçe büyüsün */
    transform: scale(1.1); 
}

/* --- EN BEĞENİLEN ÜRÜNLER GRİD SİSTEMİ --- */
.most-liked-section {
    width: 90%;
    margin: 50px auto;
}

.section-title-liked {
    text-align: center;
    font-size: 26px;
    margin-bottom: 30px;
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
}

.most-liked-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Ürün yan yana */
    gap: 20px;
}

/* Kartların tasarımı genel kartlarınla uyumlu olsun */
.most-liked-grid .product-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.most-liked-grid .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.most-liked-grid .product-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
}

/* Mobil uyum: Ekran küçülünce 5 yerine 2 ürün yan yana gelsin */
@media (max-width: 992px) { .most-liked-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .most-liked-grid { grid-template-columns: repeat(2, 1fr); } }

#brand-logos-ticker {
    animation: marquee-left 70s linear infinite !important;
}

@keyframes marquee-right { 
    0% { transform: translateX(-50%); } 
    100% { transform: translateX(0); } 
}

@keyframes marquee-left { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr; /* Yan yana değil, alt alta */
        height: auto;               /* Sabit 450px'i iptal et, içeriğe göre uzasın */
        min-height: 300px;
    }
    
    .item-big {
        grid-row: auto;             /* Büyük resim artık tüm satırı kaplamasın */
        height: 250px;              /* Telefondaki yüksekliği */
    }
}

/* ARAMA VE FİLTRE SONUÇLARI İÇİN GRID AYARI */
.general-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 30px !important; /* Resimler arası ideal boşluk */
    justify-content: center !important; /* Kartları merkezler */
    width: 95% !important;
    margin: 0 auto !important; /* Sağa dayalı olmayı engeller */
}