/* style.css */

/* Temel ayarlar */

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip; /* Hidden yerine Clip kullanmayı dene */
    position: relative;
}
body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Temiz bir sans-serif yazı tipi varsayıyorum */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header ana konteyner */
.header {
    background-color: #000000; /* Koyu yeşil arka plan */
    color: #ffffff; /* Varsayılan metin rengi beyaz */
    padding: 15px 40px; /* Üst-alt ve yan boşluklar */
    display: flex; /* Yatay yerleşim için */
    justify-content: space-between; /* Bölümleri aralıklı yerleştir */
    align-items: center; /* Dikeyde ortala */
    position: fixed; /* Ekranda sabit kalsın */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Her şeyin en üstünde görünsün */
    
    /* Başlangıçta ekranın %100 yukarısına sakla (gizle) */
    transform: translateY(-100%); 
    transition: transform 0.3s ease-in-out; /* Kayarak gelme animasyonu */
}

.header.sticky-active {
    transform: translateY(0);
}

/* Sol bölüm: Logo */
.header-left .logo-placeholder {
    display: flex;
    align-items: center;
}

.header-left .logo-text {
    font-family: 'Great Vibes', cursive;
    font-size: 38px; /* El yazısı fontları genelde daha küçük görünür, o yüzden büyüttük */
    color: #ffffff;
    letter-spacing: 1px;
    font-style: normal;
}

/* Orta bölüm: Gezinme */
.header-center nav ul {
    list-style: none; /* Noktaları kaldır */
    margin: 0;
    padding: 0;
    display: flex; /* Menü öğelerini yan yana diz */
}

.header-center nav ul li {
    margin-right: 60px; /* Öğeler arası boşluk */
}

.header-center nav ul li:last-child {
    margin-right: 0; /* Son öğede sağ boşluğu kaldır */
}

.header-center nav ul li a {
    text-decoration: none; /* Alt çizgiyi kaldır */
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease; /* Renk değişimi için geçiş efekti */
}

.header-center nav ul li a.active {
    color: #ffc107; /* Aktif menü öğesi sarı */
}

.header-center nav ul li a:hover {
    color: #ffc107; /* Üzerine gelince sarı olsun */
}

.header-center nav ul li a i {
    margin-left: 5px; /* Ok ikonu ile metin arası boşluk */
    font-size: 12px;
}

/* Sağ bölüm: Eylemler */
.header-right {
    display: flex;
    align-items: center;
}

.header-right .action-item {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    margin-left: 20px; /* Öğeler arası boşluk */
    cursor: pointer; /* Tıklanabilir hissi ver */
    position: relative; /* Bildirim rozeti için */
}

.header-right .action-item:first-child {
    margin-left: 0; /* İlk öğede sol boşluğu kaldır */
}

/* Bildirim rozetleri */
.header-right .has-badge .badge,
.header-right .cart-item .badge {
    position: absolute; /* Ana öğeye göre konumlandır */
    top: -8px; /* Yukarı kaldır */
    right: -10px; /* Sağa kaydır */
    background-color: #ffc107; /* Sarı arka plan */
    color: #041c15; /* Koyu metin rengi */
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%; /* Daire yap */
    width: 18px; /* Genişlik */
    height: 18px; /* Yükseklik */
    display: flex; /* İçeriği ortalamak için */
    justify-content: center;
    align-items: center;
}

/* Hero Section Temel Ayarlar */
.hero-section {
    position: relative;
    width: 100%;
    height: 85vh; /* Ekranın %85'ini kaplasın */
}

.heroSwiper {
    width: 100%;
    height: 100%;
}

.hero-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    
    /* 1. DEĞİŞİKLİK: Dikeyde ortalamayı (center) iptal edip, EN ALTA (flex-end) alıyoruz */
    align-items: flex-end; 
    
    /* Yatay boşluk (%10) zaten iyi, görseldeki gibi duruyor, aynen kalsın */
    padding: 0 2%; 
    position: relative;
    width: 100%; 
    box-sizing: border-box;
}

/* Arka planı hafif karartma */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Yazı Alanı */
.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 600px;
    
    /* "Tam sol alt köşe degil" dediğin için alttan 80px boşluk bıraktık. 
       Bu değeri görseldeki slider kontrollerinin (01---03) üzerine gelecek şekilde ayarlayabilirsin. */
    margin-bottom: 80px;
}

.hero-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.hero-subtitle i {
    font-size: 8px;
    margin-right: 10px;
}

.hero-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 30px;
}

/* Buton Tasarımı */
.hero-btn {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 15px 30px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-btn i {
    margin-left: 8px;
}

.hero-btn:hover {
    background-color: #000000;
    color: #ffffff !important; /* Sarı hover efekti */
}

/* Alt Navigasyon (Oklar ve Sayaç) */
.hero-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    color: #fff;
    gap: 20px;
}

.hero-prev, .hero-next {
    cursor: pointer;
    font-size: 18px;
    transition: color 0.3s;
}

.hero-prev:hover, .hero-next:hover {
    color: #000000;
}

.hero-pagination-custom {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    gap: 15px;
}

/* Aradaki o uzun çizgi */
.hero-pagination-custom .separator {
    width: 100px;
    height: 2px;
    background-color: rgba(255,255,255,0.3);
    position: relative;
}

.hero-pagination-custom .separator span {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background-color: #fff;
    transition: width 0.3s;
}

/* custom.js ile animasyon tetiklenene kadar öğeleri gizle (titremeyi önler) */
.hero-content .ani-subtitle,
.hero-content .ani-title,
.hero-content .ani-btn {
    opacity: 0;
    visibility: hidden;
}

/* animate__animated sınıfı eklendiğinde animate.css kendi kontrolü altına alır, 
   biz JavaScript ile animate__animated sınıfını ekleyip çıkararak animasyonları tetikleyeceğiz. */
.hero-content .animate__animated {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- FOOTER STİLLERİ --- */
.main-footer {
    background-color: #000; /* Siyah arka plan */
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

/* Bu kısmı güncelle */
.footer-container {
    max-width: 100%; /* %95'ten %100'e çıkarıldı */
    margin: 0;       /* Ortalamayı kaldır, sola yasla */
    padding: 0;      /* Kenar boşluklarını sıfırla */
    display: flex;
    flex-wrap: wrap;
}

/* Sol Logo Alanı */
/* Bu kısmı kontrol et/güncelle */
/* 1. SOL TARAF: Görselin Olduğu Alanı Genişlettik */
.brand-col {
    flex: 2.5; /* Eskiden 1'di, şimdi sağ tarafın 2.5 katı yer kaplayacak */
    min-width: 450px; /* Mobilde çok daralmaması için alt sınır */
    background-image: linear-gradient(to right, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%), 
                      url('../images/Gemini_Generated_Image_51n87y51n87y51n8.png');
    
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    
    /* İçerik Hizalaması */
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* 2. SAĞ TARAF: Linklerin Olduğu Alanı Daralttık */
.footer-content-wrapper {
    flex: 1; /* Sol tarafa göre çok daha dar bir alan verdik */
    max-width: 600px; /* Linklerin çok yayılıp görselin üstüne binmesini engeller */
    padding-left: 40px; 
    padding-right: 40px;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 3. LİNK GRUPLARI: Yan yana dizilimi korumak için */
.footer-links-row {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Link grupları arası mesafeyi daralttık */
    flex-wrap: wrap; /* Ekran küçülürse alt alta geçerler */
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo .logo-icon {
    color: #ffc107;
    font-size: 24px;
    margin-right: 10px;
}

.footer-logo .logo-text {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Great Vibes', cursive;
}

.footer-description {
    font-size: 13px;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 30px;
}

.footer-socials a {
    display: inline-flex;
    width: 35px;
    height: 35px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s;
}

.footer-socials a:hover {
    background: #ffc107;
}

/* Sağ İçerik Alanı */
/* Sağ taraftaki içerik alanı */
.footer-content-wrapper {
    flex: 2;
    padding-left: 60px;  /* Görselle arasındaki mesafe */
    padding-right: 5%;   /* Sağ taraftan ekran kenarıyla arasına boşluk koyar */
    padding-top: 80px;   /* Üst hizalama */
    padding-bottom: 40px;
}

/* Newsletter Bölümü */
.footer-newsletter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.newsletter-text h3 {
    font-size: 16px;
    margin: 0 0 5px 0;
}

.newsletter-text p {
    font-size: 11px;
    color: #888;
    margin: 0;
}

.newsletter-form {
    display: flex;
    border: 1px solid #555;
    flex: 1;
    max-width: 400px;
    margin-left: 20px;
}

.newsletter-form input {
    background: transparent;
    border: none;
    padding: 12px;
    color: #fff;
    flex: 1;
    outline: none;
}

.newsletter-form button {
    background: #fff;
    border: none;
    padding: 0 25px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.newsletter-form button:hover {
    background: #ffc107;
}

/* Link Grupları */
.footer-links-row {
    display: flex;
    justify-content: space-between;
}

.link-group h4 {
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 600;
}

.link-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-group ul li {
    margin-bottom: 10px;
}

.link-group ul li a {
    color: #888;
    text-decoration: none;
    font-size: 12px;
    transition: 0.3s;
}

.link-group ul li a:hover {
    color: #ffc107;
}

/* Footer Alt Bant */
.footer-bottom {
    border-top: 1px solid #333;
    padding: 30px 120px;
}

.footer-bottom .footer-container {
    justify-content: space-between;
    align-items: center;
}

.copyright p {
    font-size: 11px;
    color: #666;
    margin: 0;
}

.payment-methods {
    display: flex;
    gap: 15px;
    font-size: 24px;
    color: #fff;
}

/* Yukarı Çık Butonu */
/* Yukarı Çık Butonu Temel Hali */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    z-index: 1000;
    
    /* ANIMASYON ICIN EKLENENLER */
    opacity: 0;           /* Başlangıçta görünmez */
    visibility: hidden;    /* Başlangıçta tıklanamaz */
    transition: all 0.4s ease-in-out; /* Yumuşak geçiş */
    transform: translateY(20px);      /* Hafif aşağıdan başlasın */
}

/* Sayfa aşağı inince eklenecek olan sınıf */
.scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Yerine çıksın */
}

.scroll-top:hover {
    background: #000;
    color: #ffffff;
    transform: scale(1.1); /* Üzerine gelince hafif büyüsün */
}

/* --- GÖRSELDEKİ KUTUSUZ VE RENKLİ ÖDEME İKONLARI --- */
.payment-methods {
    display: flex;
    gap: 15px; /* Logolar arası minimalist boşluk */
    align-items: center;
}

.payment-card {
    /* --- ESKİ KUTU AYARLARI SİLİNDİ (Arka plan, çerçeve, gölge) --- */
    background-color: transparent; /* Arka plan şeffaf */
    border: none; /* Çerçeve yok */
    border-radius: 0;
    box-shadow: none; /* Gölge yok */
    
    /* Boyutlandırma artık kutu için değil, logonun hizalanması için */
    width: auto; /* Genişlik otomatik */
    height: 32px; /* Yükseklik hizalama için sabit */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 1. DEĞİŞİKLİK: Saf logoların elit durması için boyutu artırdık (Eski: 22px) */
    font-size: 32px; 
    
    transition: transform 0.3s ease; /* Hover efekti kalsın */
}

.payment-card:hover {
    transform: translateY(-3px); /* Hafif yukarı kalksın */
}

/* İkon Renkleri (Görseldeki Saf Renkler) */
.payment-card.visa {
    color: #1A1F71; /* Visa Mavisi */
}

.payment-card.mastercard {
    color: #EB001B; /* Mastercard Kırmızısı (Turuncu-Kırmızı Font Awesome'da birleşiktir) */
}

/* 2. DEĞİŞİKLİK: Görseldeki o mor-mavi kesişimi yakalamak için teknik hile */
/* Biz bu ikonu CSS ile o görseldeki gibi renklendireceğiz. */
.payment-card.mastercard-intersection i {
    /* İkonun yarısını mor, yarısını mavi yapıyoruz (Kesişme hissi verir) */
    background: linear-gradient(to right, #6F42C1 50%, #0076CE 50%); /* Mor ve Mavi yan yana */
    -webkit-background-clip: text; /* Arka planı yazıya (ikona) maskele */
    -webkit-text-fill-color: transparent; /* Yazının asıl rengini şeffaf yap */
    color: transparent; /* Garanti olsun */
}

.payment-card.amex {
    color: #016FD0; /* Amex Mavisi */
}

/* --- ANA SAYFA HERO HEADER TASARIMI --- */
.main-header {
    position: absolute; /* Slider resminin tam üzerine biner */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Her şeyin en üstünde durmasını sağlar */
    padding: 35px 0; /* Üstten ve alttan ferahlık */
    background: transparent; /* Arka plan şeffaf, slider resmi görünsün */
}

.main-header .header-container {
    max-width: 95%; /* Kenarlardan çok az boşluk bırakır */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sol Alan: Logo */
.main-header .logo {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    text-decoration: none;
}

.main-header .logo i {
    color: #ffc107; /* Sarı lamba/logo rengi */
    margin-right: 12px;
}

/* Orta Alan: Menu ve Search */
.main-header .header-center {
    display: flex;
    align-items: center;
    flex: 1; /* Ortadaki arama çubuğunun yayılmasını sağlar */
    margin: 0 60px;
}

.main-header .menu-toggle-btn {
    border: 1px solid rgba(255,255,255,0.3); /* İnce şeffaf çerçeve */
    color: #fff;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 25px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
}

.main-header .menu-toggle-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Dev Arama Çubuğu */
.main-header .search-bar {
    display: flex;
    flex: 1;
    background: #fff;
    height: 52px; /* Görseldeki gibi dolgun yükseklik */
    border-radius: 5px;
}

.main-header .search-bar input {
    flex: 1;
    border: none;
    padding: 0 25px;
    outline: none;
    font-size: 14px;
    color: #333;
    border-radius: 5px;
}

.main-header .search-bar button {
    background: #000000; /* Arka planı tam siyah yaptık */
    color: #ffffff;      /* Yazıyı ve ikonu beyaz yaptık */
    border: none;
    padding: 0 40px;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s ease; /* Geçiş efekti */
    border-radius: 0 5px 5px 0;
}

/* Hover (Üzerine gelince) efekti - Opsiyonel */
.main-header .search-bar button:hover {
    background: #333333; /* Üzerine gelince çok hafif grileşsin ki tıklandığı anlaşılsın */
    color: #ffc107;      /* İstersen ikon/yazı senin meşhur sarı tonuna dönebilir */
}

/* Sadece içindeki ikonun renginden emin olmak için */
.main-header .search-bar button i {
    color: #ffffff; 
}

/* Sağ Alan: İkonlar ve Yazılar */
.main-header .header-right {
    display: flex;
    align-items: center;
    gap: 35px;
    color: #fff;
}

.main-header .header-action {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.main-header .header-action i {
    font-size: 20px;
}

.main-header .header-action:hover {
    color: #ffc107;
}

/* Sepet Kutusu */
.main-header .cart-total {
    background: #ffc107;
    color: #000;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 800;
    margin-left: 5px;
}

/* --- BEYAZ KAYAN ŞERİDİ STİLLERİ --- */
.info-ticker-wrapper.white-ticker {
    width: 100%;
    background-color: #ffffff; /* Beyaz arka plan */
    color: #000000; /* Siyah yazılar */
    overflow: hidden;
    padding: 40px 0; /* Üstten ve alttan geniş boşluk (Görseldeki gibi) */
    border-bottom: 1px solid #f0f0f0; /* Altına çok hafif bir çizgi */
    display: flex;
    align-items: center;
}

.white-ticker .info-ticker {
    display: flex;
    white-space: nowrap;
    animation: ticker-animation 40s linear infinite; /* Hızı biraz yavaşlattık daha okunaklı olsun diye */
}

.white-ticker .ticker-item {
    display: flex;
    align-items: center;
    padding: 0 60px; /* Elemanlar arası geniş boşluk */
    font-size: 14px;
    font-weight: 700; /* Yazılar biraz daha belirgin */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.white-ticker .ticker-item i {
    color: #000000; /* İkonlar tam siyah */
    margin-right: 15px;
    font-size: 22px; /* İkonlar biraz daha büyük ve net */
}

/* Animasyon aynı kalıyor */
@keyframes ticker-animation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Üzerine gelince durma (opsiyonel) */
.white-ticker:hover .info-ticker {
    animation-play-state: paused;
}

/* --- SONSUZ SAĞA AKAN KARTLAR TASARIMI --- */
.category-infinite-scroll {
    width: 100%;
    background-color: #fcfcff; /* Hafif kırık beyaz */
    padding: 60px 0;
    overflow: hidden; /* Dışarı taşan kartları gizle */
}

.infinite-cards-wrapper {
    width: 100%;
    display: flex;
}

.infinite-cards-track {
    display: flex;
    white-space: nowrap; /* Kartların alt alta binmesini engelle */
    /* 40 saniye boyunca pürüzsüz akan sonsuz animasyon */
    animation: scroll-cards 30s linear infinite; 
    width: fit-content;
}

/* SAĞA AKMASINI SAĞLAYAN KRİTİK SINIF */
.infinite-cards-track.reverse {
    animation-direction: reverse; /* Animasyonu tersine çevir (Sola -> Sağa) */
}

/* Üzerine gelince yavaşlamasını veya durmasını istersen */
.infinite-cards-wrapper:hover .infinite-cards-track {
    animation-play-state: paused;
}

/* KART TASARIMI */
/* KAT KART - ANA YAPI */
.cat-card {
    flex: 0 0 260px;
    margin: 0 12px;
    border-radius: 18px;
    overflow: hidden;
    height: 380px;
    background: #fff;
    border: 0.5px solid #e8e8e8;
    box-shadow: none;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.cat-image {
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.cat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.cat-card:hover .cat-image img {
    transform: scale(1.08);
}

/* BİLGİ BARI - SİYAH DOLMA EFEKTİ BURADA */
.cat-info {
    position: relative; /* Dolgu için relative şart */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 14px 18px;
    flex-shrink: 0;
    overflow: hidden; /* Siyah dolgunun dışarı taşmaması için */
    transition: 0.4s ease;
}

/* SOLDA BEKLEYEN SİYAH DOLGU */
.cat-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Kartın tamamen solunda saklı */
    width: 100%;
    height: 100%;
    background-color: #000; /* Dolacak olan siyah renk */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* KARTA HOVER YAPILINCA DOLGUYU İÇERİ İT */
.cat-card:hover .cat-info::before {
    transform: translateX(100%); /* Sola doğru kayarak alanı kaplar */
}

.cat-name {
    font-size: 10px;
    font-weight: 600;
    color: #111;
    position: relative;
    z-index: 2; /* Siyah dolgunun üstünde kalması için */
    transition: color 0.4s ease;
}

/* Hoverda yazıyı beyaz yap */
.cat-card:hover .cat-name {
    color: #fff;
}

.cat-link {
    width: 34px;
    height: 34px;
    background: #f0f0f0;
    color: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Siyah dolgunun üstünde kalması için */
    transition: background 0.4s, color 0.4s;
}

/* Hoverda butonu beyaz yap (Arka plan siyah olduğu için) */
.cat-card:hover .cat-link {
    background: #fff;
    color: #000;
}

/* KAYMA ANİMASYONU */
@keyframes scroll-cards {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Listenin yarısına gelince başa sarar */
    }
}

/* --- HANDPICKED ELEGANCE BÖLÜMÜ (GÖRSELLE BİREBİR GÜNCEL) --- */
.handpicked-section {
    padding: 80px 0;
    background-color: #fff;
}

/* Bölüm Başlığı - Kenarlardan Boşluklu ve Hizalı */
.handpicked-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.handpicked-section .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.handpicked-section .section-title {
    font-size: 24px;
    font-weight: 800;
    color: #000;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.handpicked-section .title-line {
    width: 80px;
    height: 1px;
    background-color: #e0e0e0; /* İnce gri çizgi */
}

.handpicked-section .section-subtitle {
    font-size: 13px;
    color: #999;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Sağ Üst Navigasyon (Oklar ve Noktalar) */
.handpicked-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Sayfalama Noktaları (Görseldeki minik siyah-gri noktalar) */
.handpicked-pagination {
    display: flex;
    gap: 8px;
}

.handpicked-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #e0e0e0;
    opacity: 1;
    margin: 0 !important;
}

.handpicked-pagination .swiper-pagination-bullet-active {
    background: #000;
}

/* İnce Uzun Oklar */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
    color: #ffc107; /* Senin sarı rengin */
}

/* ÜRÜN KARTLARI */
.product-card {
    background: transparent;
    text-align: left;
}

.product-image {
    width: 100%;
    height: 350px; /* Görseldeki dikey dolgunluk */
    background-color: #f6f6f6; /* Görseldeki soft gri arka plan */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden;
}

.product-image img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    transition: 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08); /* Hafif zoom efekti */
}

.product-info {
    padding: 0 5px;
}

.rating {
    color: #e0e0e0; 
    font-size: 11px;
    margin-bottom: 8px;
    display: flex;
    gap: 2px;
}

.rating i.fa-solid {
    color: #ffc107;
}

.product-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px; /* İsimlerin hizalı durması için sabit yükseklik */
}

.product-price {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

/* Kenar boşluğunu kontrol eden merkez kapsayıcı */
.handpickedSwiper-container {
    margin: 0 auto;    /* Ortalar */
    padding: 0 20px;   /* İŞTE O İSTEDİĞİN NET KENAR BOŞLUĞU BURASI */
}

/* Navigasyon hizalaması */
.handpicked-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hp-prev, .hp-next {
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: 0.3s;
}

.hp-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #ccc;
    opacity: 1;
}

.hp-pagination .swiper-pagination-bullet-active {
    background: #000;
}

/* --- DİNAMİK KÖŞE (CURVE) EFEKTİ --- */
.product-image {
    position: relative;
    background-color: #f6f6f6;
    overflow: hidden; /* Dışarıdaki butonu gizlemek için */
}

.button-wrapper {
    position: absolute;
    bottom: -100px; /* Başlangıçta aşağıda gizli */
    right: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

/* Karta hover yapınca komple wrapper yukarı çıksın */
.product-card:hover .button-wrapper {
    bottom: 0;
}

.quick-view-btn {
    width: 60px;
    height: 60px;
    background-color: #fff; /* Kartın alt kısmıyla aynı renk olmalı */
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 30px 0 0 0; /* Sadece sol üstü yuvarlak */
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* ÜSTTEKİ TERS KAVİS */
.curve-top {
    position: absolute;
    top: -20px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 0 0 20px 0; /* İçbükey kavis */
    box-shadow: 10px 10px 0 10px #fff; /* İşte o yuvarlaklığı veren gölge hilesi */
    z-index: 1;
}

/* SOLDTAKİ TERS KAVİS */
.curve-left {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 0 0 20px 0;
    box-shadow: 10px 10px 0 10px #fff;
    z-index: 1;
}

/* Butonun içindeki siyah yuvarlak (Senin attığın görseldeki gibi) */
.quick-view-btn i {
    background: #000;
    color: #fff;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.quick-view-btn:hover i {
    background: #ffc107;
    color: #000;
}

/* --- QUICK VIEW TOOLTIP (BİLGİ BALONCUĞU) --- */

.quick-view-btn {
    position: relative; /* Tooltip'in butona göre konumlanması için */
}

/* Tooltip Kutusu */
.tooltip-text {
    position: absolute;
    right: 110%; /* Butonun solunda durması için */
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Hafif sağda ve görünmez başla */
    background-color: #ffc107; /* Görseldeki sarı renk */
    color: #000;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap; /* Yazının tek satır kalması için */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Tooltip'in ucundaki o küçük üçgen (Ok işareti) */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; /* Kutunun sağında */
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #ffc107; /* Sadece sol taraf sarı */
}

/* Butonun üzerine gelince Tooltip'i göster */
.quick-view-btn:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0); /* Yerine süzülerek gelsin */
}

/* --- SHOPPING GUIDE GENEL ALAN --- */
.shopping-guide-section {
    padding: 60px 0; /* Sayfanın diğer bölümleriyle arasındaki mesafe */
    background-color: #fff; /* Sayfanın ana zemini beyaz kalsın */
}

/* --- GRİ PANEL (SENİN İSTEDİĞİN O GRİ ALAN) --- */
.guide-gray-card {
    background-color: #f6f6f6; /* Görseldeki o açık gri tonu */
    border-radius: 30px; /* Kenarları yuvarlatılmış elit yapı */
    padding: 60px; /* İçerideki öğelerin gri kenarlara yaklaşmaması için */
    margin: 0 20px; /* Tarayıcı kenarlarına yapışmasın diye dış boşluk */
}

.guide-wrapper {
    display: flex;
    align-items: center;
    gap: 60px; /* Yazılar ve resim arası boşluk */
}

/* Sol Taraf Ayarları */
.guide-steps {
    flex: 0 0 45%;
}

.guide-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin: 20px 0 40px;
    color: #000;
}

/* --- ADIM LİSTESİ ANA YAPI --- */
.steps-list { 
    list-style: none; 
    padding: 0; 
    margin: 0;
    position: relative; 
}

.step-item {
    display: flex; 
    gap: 30px; 
    margin-bottom: 50px; /* Çizginin uzunluğunu bu boşluk belirler */
    cursor: pointer; 
    opacity: 0.4; 
    transition: 0.4s ease; 
    position: relative;
    align-items: flex-start; /* İçeriği yukarı hizala */
}

.step-item:last-child {
    margin-bottom: 0; 
}

.step-item.active { 
    opacity: 1; 
}

/* SAYI DAİRELERİ */
.step-number {
    width: 32px; 
    height: 32px; 
    background: #f0f0f0; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: 700; 
    font-size: 13px;
    z-index: 5; 
    transition: 0.4s;
    color: #999;
    flex-shrink: 0;
    position: relative;
}

.step-item.active .step-number {
    background: #ffc107; 
    color: #000;
}

/* --- DİNAMİK VE TAM BAĞLI ÇİZGİ AYARI --- */
/* --- ADIM LİSTESİ ANA YAPI --- */
/* --- ADIM LİSTESİ ANA YAPI --- */
.step-item {
    display: flex; 
    gap: 30px; 
    margin-bottom: 45px; /* Adımlar arası ferah boşluk */
    cursor: pointer; 
    opacity: 0.4; 
    transition: 0.4s ease; 
    position: relative;
}

/* --- TEMASSIZ DİNAMİK ÇİZGİ (HER İKİ UÇTA BOŞLUKLU) --- */
.step-line {
    position: absolute; 
    left: 16px; /* 32px dairenin tam merkezi */
    
    /* 1. DOKUNUŞ: Üstteki sayıdan 8px aşağıda başlasın (Yapışmasın) */
    top: 40px; 
    
    width: 2px; 
    
    /* 2. DOKUNUŞ: 
       calc(100% - 15px) diyerek hem üstteki 8px'i telafi ediyoruz 
       hem de alttaki sayıya çarpmadan 7-8px kala durmasını sağlıyoruz. */
    height: calc(100% - 15px); 
    
    background: #e0e0e0; 
    z-index: 1;
    transition: 0.4s ease;
}

/* Aktif adımda çizgi sarı yansın */
.step-item.active .step-line { 
    background: #ffc107; 
}

/* Son adımda çizgi tamamen kalksın */
.step-item:last-child .step-line {
    display: none;
}

/* 1 Numara Özel Başlangıç (Zaten first-child ayarı yukarıda yapıldı) */
.step-item:first-child .step-line {
    top: 40px;
}

/* YAZI ALANI HİZALAMASI */
.step-content {
    padding-top: 2px; /* Başlığı sayıyla hizalar */
}

.step-content h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0;
    color: #333;
}

.step-content p {
    font-size: 14px; 
    color: #666; 
    display: none;
    margin: 12px 0 0 0;
    line-height: 1.6;
}

.step-item.active .step-content p { 
    display: block; 
    animation: fadeInDown 0.4s ease-out;
}

/* Sağ taraftaki resim alanı */
.guide-image-side {
    flex: 0 0 55%;
    border-radius: 20px;
    overflow: hidden; /* Kayarken dışarı taşan resmi gizler */
    position: relative;
}

.guideSwiper {
    width: 100%;
    height: 100%;
}

.guideSwiper .swiper-slide img {
    width: 100%;
    height: 550px; /* Sabit yükseklik ver ki zıplamasın */
    object-fit: cover;
    display: block;
}

/* Resimler arası geçişte boşluk olmasın diye */
.guideSwiper .swiper-wrapper {
    display: flex;
}

/* Ana alan (Koyu yeşil arka plan) */
.itme-section {
    position: relative;
    width: 100%;
    height: 600px; /* Kendi tasarımına göre ayarla */ 
    overflow: hidden; /* Ekranın dışına taşan kısmı gerçekten gizlemek için şart */
}

/* Görseli ekranın solunda tutan ve sadece belli bir yere kadar (örn: %45) izin veren kutu */
.itilen-kutu {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%; /* Sadece orta kısıma kadar gelmesi için genişliği kısıtladık */
}

/* Asıl Görsel ve İtme Efekti */
.itilen-kutu img {
    width: 150%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    /* KRİTİK NOKTA: Görseli kendi genişliğinin %25'i kadar sola (ekran dışına) kaydırıyoruz. 
       Böylece sadece %75'i ekranda kalıyor. */
    transform: translateX(-25%); 
    
    /* Yağ gibi kayma (itilme) animasyonu */
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* İmleç section alanına girince... */
.itme-section:hover .itilen-kutu img {
    /* Görseli ekranın dışından tam yerine (0 noktasına) it */
    transform: translateX(0);
}

/* --- STATIC RIGHT SIDE STRUCTURE --- */

/* Container for the static elements */

/* Vertical Text */
.vertical-text-group {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-right: 30px;
}

.v-title {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 2px;
}

.v-subtitle {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 20px;
    letter-spacing: 3px;
}

/* --- UNIFIED CARD BLOCK (Görsel ve Kart Birleşik) --- */

/* Ana Kapsayıcı Bloğu */
.unified-card-block {
    display: flex;
    align-items: stretch; /* İçeriklerin dikeyde aynı boyda olması için */
    background-color: #fff; /* İşte o birleştirici beyaz arka plan */
    border-radius: 8px;
    overflow: hidden;
    max-width: 900px; /* Toplam genişlik sınırı */
}

/* Sol Taraftaki Görsel Alanı */
.card-image-side {
    width: 400px; /* Görsel kutusunun genişliği */
    background-color: #f6f6f6; /* Hafif bir ton farkı istersen, istersen #fff yap */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.card-image-side img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* Görsel dikeyde küçük kalsa bile container beyaz olduğu için sırıtmayacak */
}

/* Sağ Taraftaki Bilgi Kartı (Birleşik olduğu için kölgeleri ve yuvarlağı sildik) */
.product-info-card {
    background: #fff;
    width: 420px;
    padding: 40px;
    box-shadow: none; /* Gölgeyi dış kutuya verdik */
    border-radius: 0; /* Köşeleri dış kutu yönetiyor */
}

/* Diğer iç eleman stilleri (başlık, buton vs.) senin eski kodundakilerle aynı kalabilir. 
   Sadece padding ve genişlik ayarlarını yukarıdakilerle senkronize etmen yeterli. */

/* Dikey metinlerin konumunu da bu yeni kutuya göre hizalayalım */
.static-product-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* En sağa yaslar */ 
    z-index: 5;
}

.card-title { font-size: 22px; margin: 0 0 10px; color: #111; font-weight: 700; }
.card-price { display: block; font-size: 20px; font-weight: 800; margin-bottom: 15px; color: #000; }
.card-desc { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 20px; }
.stock-status { color: #27ae60; font-size: 12px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

/* Buttons & Actions */
.action-row { display: flex; gap: 12px; margin-bottom: 12px; height: 48px; }
.qty-control { border: 1px solid #ddd; display: flex; border-radius: 4px; }
.qty-control button { background: none; border: none; width: 35px; cursor: pointer; font-size: 18px; }
.qty-control input { width: 35px; border: none; text-align: center; font-weight: 700; outline: none; }

.add-to-cart-btn { flex: 1; background: #ffc107; border: none; font-weight: 800; cursor: pointer; border-radius: 4px; text-transform: uppercase; }
.wishlist-btn { width: 48px; background: none; border: 1px solid #ddd; color: #999; cursor: pointer; border-radius: 4px; }
.buy-now-btn { width: 100%; height: 48px; background: #000; color: #fff; border: none; font-weight: 700; cursor: pointer; border-radius: 4px; text-transform: uppercase; margin-bottom: 25px; }

.card-footer { border-top: 1px solid #eee; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.footer-item { font-size: 11px; color: #888; display: flex; align-items: center; gap: 10px; }
.footer-item i { color: #333; font-size: 14px; }

/* Furniture Edit Section Styles */
.furniture-edit-section {
    background-color: #fff;
    padding: 80px 0;
    text-align: center;
}

.furniture-edit-section .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.furniture-subtitle {
    font-size: 14px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.furniture-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.furniture-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* --- CASCADING CARDS SECTION --- */

.cascading-cards-section {
    padding: 100px 0;
    background-color: #fff;
}

.cards-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Son kartın tam görünmesi için kapsayıcıya alt boşluk */
    padding-bottom: 500px; 
}

/* YENİ — BUNUNLA DEĞİŞTİR */
.cards-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 500px;
}

@media (max-width: 991px) {
    .cards-container {
        padding-bottom: 0 !important;
    }

    .stacked-card {
        position: relative !important; /* sticky'yi kapat */
        top: auto !important;
        margin-bottom: 20px !important; /* 350px yerine */
        height: auto !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .card-content {
        flex-direction: column !important; /* Yan yana yerine alt alta */
    }

    .card-text {
        padding: 30px 20px !important;
    }

    .card-image {
        height: 220px !important;
        flex: none !important;
        width: 100% !important;
    }
}

/* --- GENİŞLİK VE KATMAN AYARLARI --- */

/* İlk Kart: En üstte ve En Dar */
.card-1 {
    top: 50px;
    width: 85%; /* En küçük genişlik */
    z-index: 1;
}

/* İkinci Kart: Orta Genişlik */
.card-2 {
    top: 80px; /* Bir öncekinden biraz aşağıda sabitlenir (sekme görünümü) */
    width: 90%; 
    z-index: 2;
}

/* Üçüncü Kart: En Altta ve En Geniş */
.card-3 {
    top: 110px;
    width: 95%; /* En büyük genişlik */
    max-width: 1250px;
    z-index: 3;
    margin-bottom: 0; /* Son kartta büyük boşluğa gerek yok */
}

/* --- SCROLL EDERKEN KÜÇÜLME EFEKTİ --- */
/* Üstteki kartın, arkadan gelen kart altına girerken küçülmesi için */
.stacked-card {
    view-timeline-name: --card-scroll;
    animation: shrink-effect linear both;
    animation-timeline: --card-scroll;
    animation-range: exit 0% exit 100%;
}

@keyframes shrink-effect {
    to {
        transform: scale(0.95);
        opacity: 0.9;
    }
}

/* Kart İçerik Yapısı (Aynı Kalıyor) */
.card-content {
    display: flex;
    height: 100%;
    width: 100%;
}

.card-text {
    flex: 1;
    padding: 60px;
    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.card-image {
    flex: 1.5;
    height: 100%;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-shop-btn {
    align-self: flex-start;
    padding: 12px 35px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 20px;
}

/* --- GENEL BÖLÜM AYARLARI --- */
.instagram-showcase-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5; /* Görseldeki arka plan rengi */
    padding: 80px 5%;
    height: 700px; /* Sütunların kayacağı alanın yüksekliği */
    overflow: hidden;
}

/* --- SOL TARAF: YAZILAR --- */
.insta-info-side {
    flex: 1;
    padding-right: 80px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.profile-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-text-group {
    display: flex;
    flex-direction: column;
}

.profile-text-group .handle {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.profile-text-group .followers {
    font-size: 10px;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.insta-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #000;
}

.insta-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 400px;
}

/* --- BUTONUN ANA GÖVDESİ --- */
.insta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #000;
    padding: 15px 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* İŞTE ANİMASYON İÇİN GEREKENLER: */
    position: relative; 
    overflow: hidden; /* Dışarı taşan siyahlığı gizler */
    z-index: 1; /* Yazının üstte kalmasını sağlar */
    transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- BUTONU DOLDURACAK GİZLİ SİYAH KATMAN --- */
.insta-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Dolacak olan siyah renk */
    z-index: -1; /* Yazının arkasında beklemesi için */
    
    /* Başlangıçta görünmez (genişliği sıfır) */
    transform: scaleX(0); 
    transform-origin: left; /* Animasyonun soldan sağa akması için */
    
    /* Akış hızını ve yumuşaklığını ayarlıyoruz */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* --- FARE ÜZERİNE GELİNCE OLACAKLAR --- */
.insta-btn:hover {
    color: #fff; /* Siyah arkaplanda yazı ve ikon beyaz olur */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transform: translateY(-3px); /* O hafif yukarı kalkma efekti kalsın */
}

/* Fare gelince siyah katmanı tam boyuta (%100) çıkar */
.insta-btn:hover::before {
    transform: scaleX(1); 
}

/* --- SAĞ TARAF: KAYAN RESİMLER --- */
.insta-gallery-side {
    flex: 1.2; /* Sağ taraf biraz daha geniş */
    height: 100%;
    position: relative;
    border-radius: 10px;
}

/* Üst ve Alt Solma (Fade) Efekti */
.fade-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 5;
    pointer-events: none; /* Tıklamaları engellemesin */
}

/* Section arka planıyla aynı renkten şeffafa geçiş yapıyoruz */
.fade-top {
    top: 0;
    background: linear-gradient(to bottom, #f5f5f5 0%, transparent 100%);
}

.fade-bottom {
    bottom: 0;
    background: linear-gradient(to top, #f5f5f5 0%, transparent 100%);
}

/* Sütunların Kapsayıcısı */
.marquee-container {
    display: flex;
    gap: 15px; /* Sütunlar arası boşluk */
    height: 100%;
    overflow: hidden;
}

/* Her Bir Sütun */
.marquee-col {
    flex: 1;
    position: relative;
    height: 100%;
}

/* Resimleri Tutan Track (Şerit) */
.marquee-track {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Resimler arası boşluk */
    width: 100%;
}

.marquee-track img {
    width: 100%;
    
    /* İŞTE ÇÖZÜM: Tüm resimleri tam kare (genişlik = yükseklik) yapar */
    aspect-ratio: 1 / 1; 
    
    /* Eğer kare değil de Instagram'ın dikey portre boyutu gibi 
       dikdörtgen istersen burayı aspect-ratio: 4 / 5; yapabilirsin. */
    
    border-radius: 8px; 
    
    /* Resim kareye sığsın diye ezilmesin, fazlalıklar kırpılsın: */
    object-fit: cover; 
    
    display: block;
}

/* --- ANİMASYONLAR --- */

/* 1. ve 3. Sütun: Yukarı Kayar */
.move-up .marquee-track {
    /* 30 saniyede bir tur. Hızı artırmak için süreyi düşürebilirsin */
    animation: scrollUp 30s linear infinite; 
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } 
    /* -%50'ye geldiğinde resimlerin kopyası asıl yere gelmiş olur, sıfırlanıp başa sarar, döngü hissi verir */
}

/* 2. Sütun: Aşağı Kayar */
.move-down .marquee-track {
    transform: translateY(-50%); /* Aşağıdan başlaması için önce yukarı çekiyoruz */
    animation: scrollDown 30s linear infinite;
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* Üzerine gelince animasyon dursun istersen (İsteğe bağlı) */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* --- GENEL KAPSAYICI --- */
.product-grid-section {
    padding: 60px 20px;
    background-color: #fff;
    font-family: 'Poppins', sans-serif;
}

.product-grid-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    /* 4 eşit sütun oluşturur, ekran küçülürse 2'ye veya 1'e düşer */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

/* --- SÜTUN BAŞLIKLARI --- */
.column-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee; /* Görseldeki alt ince çizgi */
}

/* --- ÜRÜN LİSTESİ --- */
.column-items {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Alt alta gelen ürünler arasındaki boşluk */
}

/* Tekil Ürün Satırı */
.list-product-item {
    display: flex;
    align-items: center; /* Görseli ve yazıyı dikeyde ortalar */
    gap: 15px;
}

/* --- RESİM ALANI VE GRİ KUTU --- */
.item-image-wrapper {
    width: 90px;  /* Gri kutunun genişliği */
    height: 90px; /* Gri kutunun yüksekliği (tam kare) */
    background-color: #f6f6f6; /* Görseldeki açık gri arka plan */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* İndirim etiketini içine sabitlemek için */
    flex-shrink: 0; /* Yazı uzun olsa da resim kutusu ezilmesin */
    overflow: hidden;
}

.item-image-wrapper img {
    width: 80%; /* Resim gri kutunun içine sığsın diye biraz küçük */
    height: 80%;
    object-fit: contain; /* Resmi kesmeden tam sığdırır */
    transition: transform 0.3s ease;
}

/* Üzerine gelince resim hafif büyüsün */
.list-product-item:hover .item-image-wrapper img {
    transform: scale(1.1);
}

/* --- İNDİRİM ETİKETİ (-3%) --- */
.discount-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background-color: #f15e4f; /* Görseldeki turuncumsu kırmızı */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    z-index: 2;
}

/* --- YAZI VE FİYAT BİLGİLERİ --- */
.item-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-title {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* İsim uzunsa 2 satırda kessin, 3'e inmesin */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.item-title:hover {
    color: #ffc107; /* Temanın sarısı (isteğe bağlı) */
}

.item-price {
    font-size: 14px;
    font-weight: 800;
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px; /* İndirimli ve eski fiyat arasındaki boşluk */
}

/* Üstü çizili eski fiyat */
.old-price {
    font-size: 12px;
    color: #aaa;
    font-weight: 500;
    text-decoration: line-through;
}

/* ==========================================================================
   REVEAL SECTION: ZOOM-OUT + SABİT BAŞLIK + SÜZÜLEN AÇIKLAMA
   ========================================================================== */

.reveal-section {
    padding: 80px 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.reveal-container {
    display: flex;
    width: 100%;
    max-width: 1300px;
    height: 500px;
    gap: 20px;
    overflow: hidden;
}

.reveal-item {
    position: relative;
    flex: 1; 
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Hover durumunda genişleme ayarları */
.reveal-container:hover .reveal-item { flex: 0.7; }
.reveal-container .reveal-item:hover { flex: 0.8; }

/* --- ZOOM-OUT RESİM AYARI --- */
.reveal-static-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.3); /* Başlangıçta zoom-in */
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

.item-left .reveal-static-img { transform-origin: left center; }
.item-right .reveal-static-img { transform-origin: right center; }

.reveal-item:hover .reveal-static-img {
    transform: scale(1.0); /* Hoverda zoom-out */
}

/* --- İÇERİK (BAŞLIKLAR SABİT) --- */
.reveal-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 2;
    color: #fff;
    /* Başlıklar her zaman görünür, hoverda hafif yukarı kayar */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1);
}

.reveal-item:hover .reveal-content {
    transform: translateY(-20px);
}

.reveal-subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.reveal-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

/* --- SÜZÜLEN AÇIKLAMA (SADECE HOVERDA) --- */
.reveal-description {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 350px;
    
    /* Başlangıçta gizli ve aşağıda */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.reveal-item:hover .reveal-description {
    opacity: 1;
    max-height: 150px;
    transform: translateY(0);
    margin-top: 15px; /* Başlıkla açıklama arası boşluk */
}

.reveal-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

/* 1. Başlangıçta mobil header'ı gizle */
.mobile-fixed-header {
    display: none;
}

/* 2. MOBİL AYARLARI (Tüm cihazlar için aynı konum) */
@media (max-width: 991px) {
    
    /* Masaüstü header'ı mobilde tamamen yok et */
    .main-header { 
        display: none !important; 
    }

    /* Mobil header'ı devreye sok ve ekranın tepesine çivile */
    .mobile-fixed-header {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 65px;
        background: #000000; /* Senin koyu yeşil tonun */
        z-index: 999999;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .m-header-container {
        display: flex !important;
        height: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Üç sütunu da eşit genişliğe çivile: %33.3 - %33.3 - %33.3 */
    .m-col {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .m-left { justify-content: flex-start; }
    .m-center { justify-content: center; }
    .m-right { justify-content: flex-end; }

    /* Buton ve Yazı Tasarımları */
    .mobile-menu-btn, .mobile-search-btn {
        background: transparent;
        border: none;
        color: #fff;
        padding: 0;
        cursor: pointer;
    }

    .mobile-menu-btn i { font-size: 24px; }
    .mobile-search-btn i { font-size: 20px; }

    .mobile-fixed-header .logo-text {
        font-family: 'Great Vibes', cursive;
        font-size: 26px !important;
        white-space: nowrap;
        color: #fff;
    }
}

/* --- MOBİL CİHAZLAR İÇİN ÖZEL AYARLAR --- */
@media (max-width: 991px) {

    /* 1. Hero alanının yüksekliğini mobilde sabit tutmak yerine esnetiyoruz */
    .hero-section {
        height: auto !important; 
        min-height: 350px; 
    }

    .hero-slide {
        /* DÜZELTME: Görsel artık alanı tam doldurur, merkez odaklıdır */
        background-size: cover !important; 
        background-repeat: no-repeat !important;
        background-position: center center !important; 
        
        /* DÜZELTME: Alanı senin istediğin o kompakt boyuta (basık görünüme) sabitledik */
        height: 400px !important; 
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; 
        align-items: center !important;
        padding: 0 20px !important;
    }

    /* 4. Karartma perdesi - Dokunulmadı */
    .hero-overlay {
        background: rgba(0, 0, 0, 0.4); 
    }

    /* 5. Yazıların Boyutları - Dokunulmadı */
    .hero-content {
        margin-bottom: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
        z-index: 10;
    }

    .hero-title {
        font-size: 20px !important; 
        line-height: 1.3 !important;
    }

    .hero-subtitle {
        font-size: 10px !important;
        justify-content: center;
    }

    /* 6. Buton - Dokunulmadı */
    .hero-btn {
        padding: 12px 20px !important;
        font-size: 11px !important;
    }

    /* 7. Slide Kontrolleri - Dokunulmadı */
    .hero-controls {
        bottom: 15px !important; 
        gap: 10px !important;
    }
}

/* ==========================================================================
   FOOTER MOBİL UYUM (RESPONSIVE) GÜNCEL AYARLARI
   ========================================================================== */

@media (max-width: 991px) {
    /* SCROLL VE TAŞMA ENGELLEYİCİ - Sayfanın aşağı inmesini garantiye alır */
    body {
        overflow-y: auto !important;
    }
    .main-footer {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .main-footer .footer-container {
        flex-direction: column;
        height: auto !important;
        display: flex;
    }

    /* 1. SOL ALAN (Marka ve Yazı) */
    .brand-col {
        flex: none;
        width: 100%;
        /* Yazının net okunması için mobilde arka plan karartmasını (gradient) artırıyoruz */
        background-image: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.85) 100%), url('../images/Gemini_Generated_Image_51n87y51n87y51n8.png') !important;
        background-position: center center !important;
        padding: 50px 20px !important;
        box-sizing: border-box;
        text-align: center;
        align-items: center;
    }

    .footer-description {
        font-size: 13px;
        line-height: 1.7;
        color: #e0e0e0; /* Yazıyı biraz daha parlak yaptık */
        padding: 0 10px;
    }

    .footer-socials {
        justify-content: center;
        margin-top: 10px;
    }

    /* 2. SAĞ ALAN (Bülten ve Linkler) */
    .footer-content-wrapper {
        flex: none;
        width: 100%;
        padding: 40px 20px !important;
        box-sizing: border-box;
    }

    /* Bülten (Newsletter) Görünümü */
    .footer-newsletter {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 30px;
    }

    .newsletter-form {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        flex-direction: column; /* Mobilde alt alta gelsin */
        border: none !important; /* Dış çerçeveyi sıfırladık */
        gap: 12px;
    }

    /* E-posta kutusunu belirginleştiriyoruz */
    .newsletter-form input {
        width: 100%;
        padding: 16px !important;
        background-color: rgba(255, 255, 255, 0.08) !important; /* Kutu içi hafif gri/beyaz */
        border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Belirgin çerçeve */
        color: #fff !important;
        border-radius: 4px;
        text-align: center;
        box-sizing: border-box;
    }

    .newsletter-form button {
        width: 100%;
        padding: 16px !important;
        border-radius: 4px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    /* Link Grupları */
    .footer-links-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
        padding-top: 20px;
    }

    /* 3. EN ALT ŞERİT (Copyright ve Ödeme İkonları) */
    .footer-bottom {
        padding: 30px 20px !important;
        height: auto !important;
    }

    .footer-bottom .footer-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .payment-methods {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* 1. YAZI TAŞMASINI (PATLAMAYI) ÇÖZEN KISIM */
    .brand-col {
        min-width: 0 !important; /* Masaüstündeki 450px dayatmasını sıfırlar */
        max-width: 100vw !important; /* Ekran genişliğini aşmasını kesin olarak engeller */
        overflow: hidden !important; 
    }

    .footer-description {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important; /* Kelime çok uzunsa zorla alt satıra atar */
        padding: 0 10px !important;
    }

    /* 2. SCROLL (KAYDIRMA) VE GİZLENEN İKONLARIN ÇÖZÜMÜ */
    html, body {
        /* clip bazen mobilde dikey kaydırmayı da bozar, hidden daha güvenlidir */
        overflow-x: hidden !important; 
        height: auto !important;
    }

    .main-footer, 
    .footer-container, 
    .footer-content-wrapper {
        height: auto !important;
        min-height: 0 !important; /* Gizli yükseklik kısıtlamalarını ezer */
    }

    /* Ödeme yöntemlerinin olduğu en alt kısım */
    .footer-bottom {
        /* Mobil cihazların altındaki adres/menü çubukları ikonları örtmesin diye ekstra boşluk */
        padding-bottom: 80px !important; 
        position: relative;
        z-index: 10;
    }
}

/* Modal Arka Planı */
.modal-overlay {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Modal Kutusu */
.modal-pencere {
    background: #fff;
    width: 100%;
    max-width: 1000px;
    border-radius: 12px;
    position: relative;
    padding: 40px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Kapatma Butonu */
.modal-kapat {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 35px;
    border: none;
    background: none;
    cursor: pointer;
    color: #333;
    line-height: 1;
}

/* İçerik Düzeni */
.modal-govde {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Sol ve sağ eşit */
    gap: 40px;
}

/* Sol Taraftaki Slider Alanı */
.modal-sol {
    min-width: 0; /* Swiper'ın taşmasını önler */
    background: #f5f5f3;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

/* Sağ Taraftaki Bilgiler */
.modal-baslik {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.modal-fiyat {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.modal-liste {
    padding-left: 20px;
    margin-bottom: 30px;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

/* Satın Al Butonu */
.modal-satin-btn {
    display: block;
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.modal-satin-btn:hover {
    background: #333;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .modal-govde {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .modal-pencere {
        padding: 30px 20px;
    }
    .modal-baslik {
        font-size: 20px;
    }
}

/* Fiyat kalktığı için stilini silebilirsin, diğer modal stilleri aynı kalıyor */

.modal-accordion {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 25px;
    overflow: hidden;
}

.accordion-tetik {
    width: 100%;
    padding: 15px 20px;
    background: #f9f9f9;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.accordion-icerik {
    max-height: 0; /* Kapalıyken yükseklik 0 */
    overflow-y: auto;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

/* JS ile 'acik' class'ı eklenince kutu açılır */
.accordion-icerik.acik {
    max-height: 250px; /* Kutunun maksimum yüksekliği (buradan ayarlayabilirsin) */
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.modal-liste {
    padding: 10px 20px 10px 35px;
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.8;
}

.modal-sol img {
    width: 100%;
    height: 450px;
    object-fit: contain;
}

.search-bar {
    position: relative;
}

.arama-dropdown {
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 99999;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.arama-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.arama-item:hover {
    background: #f5f5f5;
}

.arama-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #f5f5f3;
    border-radius: 4px;
    flex-shrink: 0;
}

.menu-dropdown {
    position: absolute;
    left: 0;
    width: 100%;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
}

.menu-dropdown.open {
    max-height: 400px;
}

.menu-dropdown-inner {
    max-width: 95%;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    gap: 60px;
}

.drop-col h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0;
    cursor: default;
}

.drop-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #ffffff;
    position: fixed;
    left: 0;
    width: 100%;
    margin-top: 15px;
}

.drop-col:hover .drop-links {
    max-height: 300px;
}

.drop-links a {
    display: block;
    color: #333;
    font-size: 13px;
    padding: 12px 40px 12px 60px;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.drop-links a:hover {
    padding-left: 50px;
}

@media (max-width: 991px) {

    /* Shopping Guide Section - Mobil Düzeltme */
    .shopping-guide-section {
        padding: 30px 0;
    }

    .guide-gray-card {
        border-radius: 16px;
        padding: 30px 20px;
        margin: 0 12px;
    }

    .guide-wrapper {
        flex-direction: column; /* Yan yana yerine alt alta */
        gap: 30px;
    }

    /* Sol taraf (yazılar) tam genişliğe yayılsın */
    .guide-steps {
        flex: none;
        width: 100%;
    }

    .guide-title {
        font-size: 22px;
        margin: 15px 0 25px;
    }

    .guide-subtitle {
        font-size: 12px;
    }

    /* Sağ taraf (resim) tam genişliğe yayılsın */
    .guide-image-side {
        flex: none;
        width: 100%;
        border-radius: 12px;
    }

    .guideSwiper .swiper-slide img {
        height: 250px; /* Mobilde daha kompakt resim yüksekliği */
    }

    /* Adım elemanları mobilde daha sıkışık durmasın */
    .step-item {
        margin-bottom: 30px;
        gap: 20px;
    }

    .step-content h3 {
        font-size: 16px;
    }

    .step-content p {
        font-size: 13px;
    }
}

@media (max-width: 991px) {

    .itme-section {
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* İtilen görsel - mobilde üstte tam genişlik göster */
    .itilen-kutu {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        display: block !important;
    }

    .itilen-kutu img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        border-radius: 0 !important;
        transition: none !important;
    }

    /* Ürün wrapper - görselin hemen altında */
    .static-product-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;
    }

    .vertical-text-group {
        writing-mode: horizontal-tb !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }

    .v-title {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 16px !important;
        color: #000 !important;
    }

    .v-subtitle {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 10px !important;
        margin-bottom: 0 !important;
        color: #999 !important;
    }

    .unified-card-block {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .card-image-side {
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .product-info-card {
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .card-title {
        font-size: 18px !important;
    }

    .buy-now-btn {
        width: 100% !important;
    }
}

@media (max-width: 991px) {

    .instagram-showcase-section {
        flex-direction: column !important;
        height: auto !important;
        padding: 40px 20px !important;
        gap: 40px !important;
        overflow: hidden !important;
    }

    .insta-info-side {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .insta-title {
        font-size: 22px !important;
    }

    .insta-desc {
        font-size: 13px !important;
        max-width: 100% !important;
    }

    .insta-gallery-side {
        flex: none !important;
        width: 100% !important;
        height: 300px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .marquee-container {
        height: 100% !important;
        gap: 8px !important; /* Sütunlar arası boşluğu daralttık */
    }

    /* 3 sütunun tamamı kalıyor, eşit genişlikte */
    .marquee-col {
        flex: 1 !important;
        min-width: 0 !important; /* Taşmayı engeller */
    }

    .marquee-track {
        gap: 8px !important;
    }

    .marquee-track img {
        border-radius: 6px !important;
        width: 100% !important;
    }

    .fade-overlay {
        height: 80px !important;
    }
}

@media (max-width: 991px) {

    .reveal-section {
        padding: 40px 15px !important;
    }

    .reveal-container {
        flex-direction: column !important;
        height: auto !important;
        gap: 15px !important;
    }

    .reveal-item {
        flex: none !important;
        width: 100% !important;
        height: 320px !important;
        border-radius: 12px !important;
    }

    /* Hover genişleme efektini mobilde kapat */
    .reveal-container:hover .reveal-item,
    .reveal-container .reveal-item:hover {
        flex: none !important;
    }

    .reveal-title {
        font-size: 20px !important;
    }

    .reveal-content {
        bottom: 25px !important;
        left: 25px !important;
    }

    /* Açıklama mobilde hep görünsün */
    .reveal-description {
        opacity: 1 !important;
        max-height: 100px !important;
        transform: translateY(0) !important;
        margin-top: 10px !important;
        font-size: 12px !important;
    }
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Alt alta boşlukları ayarlar */
    color: #dedede; /* Siyah arkaplanda çok çiğ durmaması için hafif kırık beyaz/gri */
    font-family: inherit;
    margin-top: 10px;
    margin-bottom: 55px;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
}

.contact-row i {
    font-size: 18px;
    color: #ffffff; /* İkon rengi - temanın vurgu rengiyle de değiştirebilirsin */
    margin-top: 2px; /* Metinle hizalamak için ufak bir ayar */
}

.contact-row span strong {
    color: #ffffff;
    font-weight: 600;
    margin-right: 4px;
}

/* WhatsApp Link Tasarımı */
.contact-row a {
    color: #fff; /* Orijinal WhatsApp yeşili, dikkat çeker */
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}

.contact-row a:hover {
    opacity: 0.8;
}

/* --- MOBİL DRAWER MENÜ --- */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background: #111;
    z-index: 999999;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-drawer.active {
    left: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.drawer-logo {
    font-family: 'Great Vibes', cursive;
    font-size: 28px;
    color: #fff;
}

.drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 5px;
}

.drawer-nav {
    padding: 10px 0;
    flex: 1;
}

.drawer-item {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.drawer-title {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-title i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.drawer-title.open i {
    transform: rotate(180deg);
}

.drawer-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: rgba(255,255,255,0.04);
}

.drawer-sub.open {
    max-height: 300px;
}

.drawer-sub a {
    display: block;
    color: #aaa;
    font-size: 13px;
    padding: 12px 20px 12px 35px;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.drawer-sub a:hover {
    padding-left: 42px;
}

.mobile-search-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #111;
    z-index: 999999;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mobile-search-panel.active {
    right: 0;
}

.search-panel-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-panel-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    align-self: flex-end;
    padding: 5px;
}

.search-panel-form {
    display: flex;
    background: #222;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.search-panel-form input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    padding: 14px 16px;
    font-size: 15px;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.search-panel-form input::placeholder {
    color: #666;
}

.search-panel-form button {
    background: none;
    border: none;
    color: #ffc107;
    padding: 0 18px;
    font-size: 16px;
    cursor: pointer;
}

#mobileAramaDropdown {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: #1a1a1a !important;
    border-radius: 8px !important;
    overflow-y: auto !important;
    max-height: 400px !important;
}

#mobileAramaDropdown .arama-item {
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

#mobileAramaDropdown .arama-item:hover {
    background: rgba(255,255,255,0.05) !important;
}

#mobileAramaDropdown .arama-item span {
    color: #fff !important;
}

/* --- HEADER DROPDOWN --- */
.header-center nav ul li.has-dropdown {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    min-width: 220px;
    border-top: 2px solid #ffc107;
    padding: 10px 0;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
}

.has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
    display: block;
    color: #ccc !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 20px;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    white-space: nowrap;
}

.nav-dropdown a:hover {
    color: #ffc107 !important;
    padding-left: 28px;
}

/* Ok ikonu dönsün */
.has-dropdown:hover > a i {
    transform: rotate(180deg);
}

.has-dropdown > a i {
    transition: transform 0.3s ease;
    display: inline-block;
}