:root { /* CSS değişkenlerinin (custom properties) tanımlandığı kök seçici */
    --primary-color: #d90429; 
    --text-dark: #212529; 
    --text-grey: #6c757d; 
    --bg-white: #ffffff; 
    --bg-section: #f1f3f5; 
    --border-color: #dee2e6; 
}

body { /* Sayfanın genel gövde stili */
    font-family: 'Roboto', sans-serif; /* Yazı tipi ailesini belirler */
    background-color: var(--bg-white); 
    color: var(--text-dark); 
    margin: 0 !important; padding: 0 !important; /* Tarayıcının varsayılan kenar boşluklarını sıfırlar */
    line-height: 1.7; /* Satır yüksekliğini artırarak okunabilirliği sağlar */
    
    /* YENİ EKLENEN KISIM */
    overflow-x: hidden !important; /* Yatay kaydırmayı engeller */
    width: 100%;        /* Genişliği sınırlar */
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* İçeriği ortalar ve maksimum genişlik sınırı koyar */

.section-header { text-align: center; margin-bottom: 60px; } /* Bölüm başlıklarını ortalar ve alt boşluk bırakır */
.section-title { /* Bölüm ana başlığı stili */
    font-size: 2.5rem; font-weight: 800; color: var(--text-dark); /* Büyük, kalın ve koyu renkli yazı */
    margin-bottom: 15px; position: relative; display: inline-block; /* Alt çizgi için pozisyon ayarı */
    text-transform: uppercase; letter-spacing: -0.5px; /* Harfleri büyütür ve aralıklarını daraltır */
}

.section-title::after { /* Başlığın altındaki dekoratif çizgi */
    content: ''; display: block; width: 60px; height: 4px; /* Çizginin boyutu */
    background: var(--primary-color); margin: 10px auto 0; border-radius: 2px; /* Rengi, ortalaması ve yuvarlak köşeleri */
}
.section-subtitle { /* Başlığın altındaki açıklama metni */
    font-size: 1.1rem; color: var(--text-grey); max-width: 700px; margin: 0 auto; /* Gri renk, sınırlı genişlik ve ortalama */
}

.btn { /* Genel buton stili */
    display: inline-block; padding: 14px 35px; border-radius: 50px; /* Buton boyutu ve tam yuvarlak köşeler */
    text-decoration: none; font-weight: 700; transition: all 0.3s; /* Link çizgisini kaldır, kalın yazı ve geçiş efekti */
    font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; /* Büyük harf ve harf aralığı */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Butonun altına hafif gölge */
}
.btn-primary { /* Ana aksiyon butonu */
    background: var(--primary-color); color: #fff; border: 2px solid var(--primary-color); 
}
.btn-primary:hover { /* Butonun üzerine gelindiğindeki efekt */
    background: #fff; color: var(--primary-color); transform: translateY(-3px); 
}

.hero { /* Tam ekran karşılama alanı */
    position: relative; width: 100%; height: 90vh; /* Ekranın %90 yüksekliğini kapla */
    display: flex; align-items: center; justify-content: center; /* İçeriği hem yatay hem dikey ortala */
    background: #000; overflow: hidden; 
}
.hero-video { /* Arka plan videosu */
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Tüm alanı kapla */
    object-fit: cover; opacity: 0.75; /* Görüntü oranını koruyarak doldur, hafif şeffaflık ver */
}
.hero-overlay { /* Videonun üzerindeki karartma katmanı */
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Tüm alanı kapla */
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)); /* Yukarıdan aşağıya koyulaşan gölge */
    z-index: 1; pointer-events: none; /* İçeriğin altında kalmasını sağlar, tıklamaları engeller */
}
.hero-content { /* Hero alanındaki metin içeriği */
    position: relative; z-index: 2; text-align: center; color: #fff; /* En üst katmanda, ortalanmış beyaz yazı */
    max-width: 900px; padding: 0 20px; /* Genişlik sınırı ve iç boşluk */
}
.hero-content h1 { /* Hero başlığı */
    font-size: 4rem; font-weight: 800; margin-bottom: 20px; /* Çok büyük ve kalın yazı */
    letter-spacing: -1px; line-height: 1.1; /* Harf aralığı ve satır yüksekliği ayarı */
    text-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Yazıya gölge vererek okunabilirliği artır */
}
.hero-content p { /* Hero açıklama metni */
    font-size: 1.4rem; font-weight: 300; margin-bottom: 40px; opacity: 0.95; /* İnce ve büyük yazı */
}

.featured-products { padding: 0px 0; background-color: #fff; } /* Öne çıkan ürünler bölümü dış boşluğu */

.product-grid { /* Ürünlerin dizildiği ızgara yapısı */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Otomatik sığan sütunlar (min 350px) */
    gap: 40px; /* Kartlar arasındaki boşluk */
    justify-content: center;
}

.minimal-card { /* Ürün kartı tasarımı */
    background: #fff; border: 1px solid var(--border-color); 
    transition: all 0.3s ease; position: relative; /* Hover efektleri için geçiş ayarı */
    display: flex; flex-direction: column; /* İçeriği dikey hizala */
    border-radius: 12px; overflow: hidden; /* Köşeleri yuvarlat ve taşanları gizle */
}

.minimal-card:hover { /* Kartın üzerine gelindiğinde */
    transform: translateY(-10px); /* Kartı yukarı kaldır */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); /* Belirgin bir gölge ekle */
    border-color: #ddd; /* Kenarlık rengini koyulaştır */
}

.card-image { /* Kart içindeki resim alanı */
    height: 260px; overflow: hidden; position: relative; /* Sabit yükseklik, taşan resmi gizle */
    background: #fcfcfc; border-bottom: 1px solid #f0f0f0; 
}
.card-image img { /* Ürün resmi */
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; /* Alanı doldur, zoom efekti için geçiş ekle */
}
.minimal-card:hover .card-image img { transform: scale(1.08); } /* Kart hover olunca resmi büyüt */

.card-tag { /* Ürün etiketi (örn: Yeni, İndirim) */
    position: absolute; top: 15px; left: 15px; /* Sol üst köşeye sabitle */
    background: rgba(255,255,255,0.9); padding: 5px 12px; 
    font-size: 0.75rem; font-weight: 700; color: var(--text-dark); /* Küçük ve kalın yazı */
    border-radius: 4px; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Köşeleri yuvarlat ve gölge ver */
}

.card-info { /* Kartın altındaki bilgi alanı */
    padding: 30px; text-align: center; flex-grow: 1; /* İç boşluk, ortalama ve alanı doldurma */
    display: flex; flex-direction: column; align-items: center; /* İçerikleri dikey hizala ve ortala */
}

.card-info h3 { /* Ürün başlığı */
    font-size: 1.5rem; margin: 0 0 10px; color: var(--text-dark); font-weight: 800; /* Boyut ve renk ayarları */
}
.card-info p { color: var(--text-grey); font-size: 0.95rem; margin-bottom: 25px; line-height: 1.5; } /* Açıklama metni stili */

.btn-product-outline { /* Ürün detay butonu (çerçeveli) */
    display: inline-block; padding: 10px 35px; /* Buton boyutu */
    border: 2px solid var(--border-color); color: var(--text-dark); /* Gri çerçeve ve koyu yazı */
    text-decoration: none; font-weight: 700; border-radius: 50px; /* Link çizgisini kaldır, yuvarlak köşe */
    transition: all 0.3s ease; text-transform: uppercase; font-size: 0.85rem; /* Geçiş efekti ve büyük harf */
    margin-top: auto; /* Butonu kartın en altına it */
}
.btn-product-outline:hover { /* Buton hover efekti */
    border-color: var(--primary-color); color: var(--primary-color); /* Çerçeve ve yazıyı kırmızı yap */
    background: #fff; box-shadow: 0 5px 15px rgba(217, 4, 41, 0.15); 
}
.btn-product-outline i { margin-left: 5px; transition: 0.3s; } /* İkon varsa sola boşluk ver */
.btn-product-outline:hover i { transform: translateX(5px); } /* Hover'da ikonu sağa kaydır */


.about-all { /* Hakkımızda bölümü genel kapsayıcısı */
    background-color: var(--bg-section); 
    color: var(--text-dark); 
    padding: 120px 0; /* Üst ve alttan geniş boşluk */
    position: relative; /* Pozisyonlandırma için */
    border-top: 1px solid var(--border-color); /* Üst kenarlık */
}

.about-row { /* Hakkımızda içeriğini hizalayan satır */
    display: flex; align-items: center; justify-content: space-between; gap: 80px; /* Yan yana diz, arayı aç */
}

.about-col-text { flex: 1; } /* Metin sütunu esnek genişlik */

.sub-heading { /* Alt başlık (H2'nin üzerindeki küçük başlık) */
    color: var(--primary-color); font-weight: 700; text-transform: uppercase; 
    letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 15px; display: block; /* Harf aralığı ve boşluklar */
}

.about-col-text h2 { /* Hakkımızda ana başlığı */
    font-size: 2.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; /* Büyük, kalın, sıkı satır aralığı */
    color: var(--text-dark); 
}

.about-col-text p { /* Hakkımızda paragraf metni */
    font-size: 1.1rem; color: var(--text-grey); margin-bottom: 40px; line-height: 1.8; /* Gri, okunaklı metin */
}

.stats-container { /* İstatistik kutularının kapsayıcısı */
    display: flex; gap: 50px; margin-bottom: 45px; /* Yan yana diz, arayı aç */
    padding-top: 30px; border-top: 1px solid #e0e0e0; /* Üst çizgi ve boşluk */
}
.stat-box h4 { /* İstatistik sayısı */
    font-size: 3rem; font-weight: 900; color: var(--text-dark); margin: 0; line-height: 1; /* Çok büyük ve kalın sayı */
}
.stat-box p { /* İstatistik açıklaması */
    font-size: 0.85rem; color: #777; text-transform: uppercase; letter-spacing: 1px; margin: 5px 0 0 0; /* Küçük, gri, büyük harf */
}
    /* Video yoksa gösterilecek yedek arka plan görseli */
    .hero-bg-image {
        background-image: url('assets/img/hakkımızdafoto.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    /* Video geçiş efekti için CSS ayarları */
    .hero-video {
        transition: opacity 0.5s ease-in-out; /* 0.5 saniye yumuşak geçiş */
        object-fit: cover;
    }
    .fade-out {
        opacity: 0; /* Görünmezlik sınıfı */
    }
.about-col-img { flex: 1; position: relative; } /* Resim sütunu esnek genişlik */

.about-col-img img { /* Hakkımızda resmi */
    width: 100%; border-radius: 12px; /* Genişliği doldur, köşeleri yuvarlat */
    border: 5px solid #fff; /* Beyaz çerçeve ekle */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Resme gölge ver */
}

@media (max-width: 992px) { /* 992px altı ekranlar (Tablet/Mobil) için ayarlar */
    .hero-content h1 { font-size: 2.5rem; } /* Başlığı küçült */
    .about-row { flex-direction: column; text-align: center; } /* İçeriği alt alta diz ve ortala */
    .stats-container { justify-content: center; } /* İstatistikleri ortala */
    .about-col-text h2 { font-size: 2.2rem; } /* Hakkımızda başlığını küçült */
}