/* style.css - ORTAK STİLLER */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --bg-color: #ffffff; --text-color: #000000; --gray: #f5f5f5; }
body { font-family: 'Roboto', sans-serif; background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; }
h1, h2, h3, h4, .brand-font { font-family: 'Oswald', sans-serif; text-transform: uppercase; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* HEADER */
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background-color: var(--bg-color); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #eee; }
.brand { display: flex; align-items: center; gap: 15px; font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.logo-svg { width: 60px; height: 60px; }
nav ul { display: flex; gap: 30px; }
nav a { font-weight: 500; font-size: 14px; letter-spacing: 1px; position: relative; }
nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--text-color); transition: width 0.3s; }
nav a:hover::after { width: 100%; }
.menu-toggle { display: none; font-size: 24px; cursor: pointer; }

/* MOBİL MENÜ STİLİ */
@media (max-width: 900px) {
    header { padding: 15px 20px; }
    .menu-toggle { display: block; }
    nav ul { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white; flex-direction: column; padding: 20px; text-align: center; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
    nav ul.show { display: flex; }
}

/* FOOTER */
footer { background-color: #111; color: #fff; padding: 60px 40px; margin-top: 50px; }
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-col h4 { font-size: 18px; margin-bottom: 20px; letter-spacing: 1px; }
.footer-col p, .footer-col a { color: #aaa; font-size: 14px; line-height: 1.8; margin-bottom: 10px; display: block; }
.social-icons { display: flex; gap: 15px; margin-top: 20px; }
.copyright { text-align: center; margin-top: 50px; border-top: 1px solid #333; padding-top: 20px; color: #555; font-size: 12px; }

/* Ortak Buton Stilleri vs. buraya eklenebilir */
/* --- KAYAN YAZI ŞERİDİ (MARQUEE) --- */
/* --- KAYAN YAZI ŞERİDİ (SONSUZ DÖNGÜ) --- */
.scrolling-bar {
    background-color: #D32F2F; /* Kırmızı */
    color: white;
    width: 100%;
    overflow: hidden; /* Taşan kısımları gizle */
    white-space: nowrap; /* Asla alt satıra inme */
    padding: 10px 0; /* Biraz daha kalın şerit */
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
}

.scrolling-content {
    display: inline-block;
    /* 120s = Çok Yavaş (Hızlandırmak istersen bu sayıyı düşür, örn: 60s)
       linear = Takılmadan, sabit hızda
       infinite = Sonsuz döngü
    */
    animation: infiniteScroll 120s linear infinite; 
}

/* SOLDAN SAĞA SONSUZ AKIŞ MANTIĞI */
@keyframes infiniteScroll {
    0% {
        /* Başlangıç noktası: Yazının sol başı görünüyor */
        transform: translateX(-50%); 
    }
    100% {
        /* Bitiş noktası: Yazı olduğu yerde başa dönüyor */
        transform: translateX(0%); 
    }
}

        /* --- 1. GENEL AYARLAR --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { width: 100%; overflow-x: hidden; font-family: 'Roboto', sans-serif; }

        /* GÖRÜNÜRLÜK KONTROLÜ */
        .mobile-only { display: none; }
        .desktop-only { display: block; }

        /* --- 2. PRELOADER --- */
        #preloader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #000; z-index: 99999;
            display: flex; justify-content: center; align-items: center;
            transition: opacity 0.5s ease;
        }
        .loader-spinner {
            width: 50px; height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-top: 5px solid #fff; border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* --- 3. MASAÜSTÜ SLIDER TASARIMI --- */
        .hero-slider {
            position: relative; width: 100%; height: 85vh;
            overflow: hidden; background-color: #000;
        }
        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0; transition: opacity 1s ease-in-out;
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
        }
        .slide.active { opacity: 1; }
        .slide-content {
            text-align: center; color: white; z-index: 2;
            background: rgba(0,0,0,0.4); padding: 40px;
            border: 2px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px);
        }
        .slide-content h2 { font-family: 'Oswald', sans-serif; font-size: 60px; margin-bottom: 20px; letter-spacing: 5px; }
        .slide-content p { font-size: 20px; margin-bottom: 30px; font-weight: 300; }
        .btn {
            padding: 15px 40px; background-color: white; color: black;
            font-weight: bold; text-transform: uppercase; letter-spacing: 2px;
            border: none; cursor: pointer; transition: all 0.3s;
        }
        .btn:hover { background-color: black; color: white; }
        .slider-btn {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.2); color: white;
            border: none; padding: 20px; cursor: pointer; z-index: 10;
            font-size: 24px; transition: 0.3s;
        }
        .slider-btn:hover { background: white; color: black; }
        .prev { left: 0; } .next { right: 0; }

        /* --- 4. ÜRÜN YAPISI (GRID) --- */
        .product-section { width: 100%; padding-bottom: 50px; }
        .product-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 0; 
        }
        .product-item {
            position: relative; width: 100%; aspect-ratio: 1 / 1;
            overflow: hidden; cursor: pointer; background-color: #f4f4f4;
        }
        .product-gallery { width: 100%; height: 100%; position: relative; }
        .product-img {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover; opacity: 0;
            transition: opacity 1.5s ease-in-out, transform 3s ease;
        }
        .product-img.active { opacity: 1; z-index: 1; }
        .product-item:hover .product-img.active { transform: scale(1.05); }

        .product-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255, 255, 255, 0.85);
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            opacity: 0; z-index: 10; transition: opacity 0.4s ease;
            text-align: center; padding: 20px;
        }
        @media (min-width: 769px) { .product-item:hover .product-overlay { opacity: 1; } }

        .product-title { font-family: 'Oswald', sans-serif; font-size: 32px; font-weight: 700; margin-bottom: 10px; color: black; transform: translateY(20px); transition: transform 0.4s ease; }
        .product-price { font-size: 18px; color: #333; transform: translateY(20px); transition: transform 0.4s ease 0.1s; }
        .color-count { margin-top: 10px; font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 1px; transform: translateY(20px); transition: transform 0.4s ease 0.2s; }
        .product-item:hover .product-title, .product-item:hover .product-price, .product-item:hover .color-count { transform: translateY(0); }
        .mobile-link-btn { display: none; margin-top: 15px; padding: 10px 20px; background-color: black; color: white; border: none; font-weight: bold; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: background 0.3s; }

        /* --- 5. MOBİL ÖZEL STİLLER --- */
       @media (max-width: 768px) {
            /* Masaüstü gizle, Mobil göster */
            .desktop-only { display: none !important; }
            .mobile-only { display: block; }

            /* MOBİL SLIDER (DİKEY GÖRSELLER İÇİN) */
            .mobile-hero-wrapper {
                position: relative; width: 100%; height: 85vh;
                background: #000; overflow: hidden;
            }
            .mobile-slider-container {
                display: flex; width: 100%; height: 100%;
                overflow-x: auto; 
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth; 
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                touch-action: pan-y; 
            }
            .mobile-slider-container::-webkit-scrollbar { display: none; }
            
            .mobile-slide {
                flex: 0 0 100%; height: 100%; position: relative; 
                scroll-snap-align: start;
                scroll-snap-stop: always; 
            }
            
            .mobile-slide img {
                width: 100%; height: 100%; object-fit: cover; object-position: center;
                pointer-events: none;
            }
            
            .m-slide-overlay {
                position: absolute; bottom: 0; left: 0; width: 100%;
                padding: 40px 20px 80px 20px;
                background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
                color: white; display: flex; flex-direction: column;
                align-items: flex-start; justify-content: flex-end;
                pointer-events: none;
            }
            .m-slide-overlay button { pointer-events: auto; }

            .m-slide-overlay .tag {
                background: white; color: black; padding: 4px 10px; font-size: 10px;
                font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
                margin-bottom: 10px; border-radius: 2px;
            }
            .m-slide-overlay h2 { font-family: 'Oswald', sans-serif; font-size: 42px; line-height: 1; margin-bottom: 5px; text-transform: uppercase; }
            .m-slide-overlay p { font-size: 16px; opacity: 0.8; margin-bottom: 20px; font-weight: 300; }
            .m-slide-overlay button {
                background: transparent; border: 1px solid rgba(255,255,255,0.4);
                color: white; padding: 12px 25px; font-size: 14px; font-weight: bold;
                border-radius: 30px; cursor: pointer; backdrop-filter: blur(5px);
                transition: 0.3s; display: flex; align-items: center; gap: 10px;
            }
            .m-slide-overlay button:hover { background: white; color: black; }

            /* STORY INDICATORS */
            .story-indicators {
                position: absolute; top: 20px; left: 0; width: 100%;
                padding: 0 10px; display: flex; gap: 5px; z-index: 20;
            }
            .indicator {
                flex: 1; height: 3px; background: rgba(255,255,255,0.3);
                border-radius: 3px; overflow: hidden; position: relative;
            }
            .indicator.active::after {
                content: ''; position: absolute; top: 0; left: 0;
                width: 100%; height: 100%; background: white;
            }

            /* Ürün Grid Mobil Ayarları */
            .product-grid { grid-template-columns: 1fr; }
            .mobile-link-btn { display: inline-block; }
            .product-item.active-card .product-overlay { opacity: 1; background: rgba(255, 255, 255, 0.95); }
            .product-item.active-card .product-title, .product-item.active-card .product-price, .product-item.active-card .color-count { transform: translateY(0); }
        }

        /* --- 6. SEO & INFO SECTION --- */
        .seo-info-container { width: 100%; padding: 80px 5%; background-color: #f9f9f9; border-top: 1px solid #ddd; }
        .seo-wrapper { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 50px; }
        .seo-image-box { flex: 1; height: 400px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .seo-image-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .seo-text-box { flex: 1; }
        .seo-text-box h2 { font-family: 'Oswald', sans-serif; font-size: 40px; margin-bottom: 10px; }
        .seo-text-box p { font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 20px; }

        /* --- 7. BÖLÜM BAŞLIKLARI (GENEL) --- */
        .section-header {
            text-align: center;
            margin-bottom: 50px;
            padding: 0 5%;
        }
        .section-header h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 36px;
            color: #000;
            letter-spacing: 2px;
            margin-bottom: 5px;
            text-transform: uppercase;
        }
        .section-header p {
            font-size: 14px;
            color: #777;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        /* --- 8. ÇOK SATANLAR (SHOP GRID) --- */
        .featured-products { padding: 80px 5%; background-color: #fff; }
        .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; }
        .shop-card { background: #fff; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #eee; }
        .shop-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .card-image-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1.1; overflow: hidden; background-color: #f9f9f9; }
        .card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .shop-card:hover .card-image-wrapper img { transform: scale(1.05); }
        .badge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; font-size: 11px; font-weight: bold; color: #fff; text-transform: uppercase; z-index: 2; }
        .badge.new { background-color: #000; }
        .badge.sale { background-color: #d35400; }
        .card-actions { position: absolute; bottom: -50px; left: 0; width: 100%; padding: 10px; transition: bottom 0.3s; z-index: 3; }
        .shop-card:hover .card-actions { bottom: 0; }
        .add-btn { width: 100%; padding: 12px; background-color: #000; color: #fff; border: none; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; font-size: 14px; transition: 0.3s; }
        .add-btn:hover { background-color: #d35400; }
        .card-info { padding: 20px; text-align: left; }
        .card-info .category { font-size: 11px; color: #999; text-transform: uppercase; font-weight: bold; display: block; margin-bottom: 5px; }
        .card-info h4 { font-family: 'Oswald', sans-serif; font-size: 18px; color: #000; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .new-price { font-size: 18px; font-weight: bold; color: #d35400; }
        .view-all-wrapper { text-align: center; margin-top: 50px; }
        .view-all-btn { background: transparent; border: 2px solid #000; padding: 12px 40px; font-family: 'Oswald', sans-serif; font-size: 16px; cursor: pointer; transition: 0.3s; text-transform: uppercase; }
        .view-all-btn:hover { background: #000; color: #fff; }

        @media (max-width: 768px) {
            .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .card-actions { position: relative; bottom: 0; padding: 0; }
            .add-btn { font-size: 12px; padding: 8px; background-color: #f4f4f4; color: #000; }
            .card-info { padding: 10px; }
            .card-info h4 { font-size: 14px; }
        }
  /* --- SEO & INFO SECTION (HAKKIMIZDA) MOBİL FİX --- */
.seo-info-container { 
    width: 100%; 
    padding: 60px 5%; 
    background-color: #f9f9f9; 
    border-top: 1px solid #ddd; 
}

.seo-wrapper { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    gap: 50px; 
}

.seo-image-box { 
    flex: 1; 
    height: 400px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    border-radius: 4px;
}

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

.seo-text-box { flex: 1; }

/* MOBİL AYARLAR */
@media (max-width: 768px) {
    .seo-wrapper { 
        flex-direction: column; /* Mobilde alt alta diz */
        gap: 30px; 
        text-align: center;
    }
    
    .seo-image-box { 
        width: 100%; 
        height: 300px; /* Mobilde yüksekliği sabitle */
    }

    .seo-text-box h2 { 
        font-size: 28px; 
    }

    /* Koleksiyon Kartı Aktif Durumu */
    .product-item.active-card .product-overlay { 
        opacity: 1; 
        background: rgba(255, 255, 255, 0.95); 
        pointer-events: auto; /* Tıklanabilir yap */
    }
}