:root { /* CSS değişkenlerinin (renkler, fontlar, ölçüler) tanımlandığı kök alan */
    --primary-color: #d90429; 
    --secondary-color: #2b2d42; 
    --light-gray: #edf2f4; 
    --text-color: #333; 
    --white-color: #ffffff; 
    --container-width: 1140px; 
    --font-family: 'Roboto', sans-serif; 
}

* { /* Sayfadaki tüm elementleri seçer */
    box-sizing: border-box; /* Padding ve border değerlerini genişliğe dahil eder */
    margin: 0; /* Varsayılan dış boşlukları sıfırlar */
    padding: 0; /* Varsayılan iç boşlukları sıfırlar */
}

body { /* Sayfanın gövde stil ayarları */
    font-family: var(--font-family); /* Yazı tipini değişkenden alır */
    line-height: 1.6; /* Satır yüksekliğini ayarlar (okunabilirlik için) */
    background-color: var(--white-color); 
    color: var(--text-color);
    width: 100%
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { /* Tüm başlık etiketleri için ortak ayarlar */
    margin-top: 0; /* Üst boşluğu sıfırlar */
    margin-bottom: 20px; /* Altına 20px boşluk bırakır */
    line-height: 1.4; /* Başlıkların satır yüksekliğini biraz daraltır */
}

.container { /* İçeriği ortalayan ana kapsayıcı sınıf */
    max-width: var(--container-width); /* Genişliği 1140px ile sınırlar */
    margin: 0 auto; /* Bloğu yatayda ortalar */
    padding: 0 0px;
}

.section-title { /* Bölüm başlıkları için stil */
    text-align: center; /* Metni ortalar */
    font-size: 2.5rem; /* Yazı boyutunu büyütür */
    margin-top: 50px; /* Üstten 50px boşluk */
    margin-bottom: 50px; /* Alttan 50px boşluk */
    color: var(--secondary-color); 
}

.btn { /* Genel buton stili */
    display: inline-block; /* Satır içi blok davranışı gösterir */
    padding: 12px 28px; /* İç boşluklar (Üst-Alt: 12px, Sağ-Sol: 28px) */
    text-decoration: none; /* Link altı çizgisini kaldırır */
    border-radius: 5px; /* Köşeleri hafifçe yuvarlatır */
    font-weight: bold; /* Yazıyı kalınlaştırır */
    transition: all 0.3s ease; /* Tüm değişimlere 0.3s geçiş efekti verir */
}

.btn-primary { /* Ana aksiyon butonu stili */
    background-color: var(--primary-color); /* Arka planı ana renk (kırmızı) yapar */
    color: var(--white-color); 
}

.btn-primary:hover { /* Ana butonun üzerine gelindiğinde */
    background-color: #a4001d;
}

.btn-secondary { /* İkincil aksiyon butonu stili */
    background-color: var(--secondary-color); 
    color: var(--white-color); 
}

.btn-secondary:hover { /* İkincil butonun üzerine gelindiğinde */
    background-color: #1a1b28; 
}

.main-header { /* Üst menü (header) alanı */
    background-color: var(--white-color); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Altına hafif bir gölge ekler */
    padding: 15px 0; /* Üst ve alttan 15px boşluk verir */
    position: sticky; /* Kaydırma sırasında yapışkan olmasını sağlar */
    top: 0; /* Sayfanın en tepesine yapışır */
    z-index: 1000; /* Diğer elementlerin üzerinde durmasını sağlar */
}

.main-header .container { /* Header içindeki kapsayıcı */
    display: flex; /* Esnek kutu modelini açar */
    justify-content: space-between; /* İçerikleri (logo ve menü) iki uca yaslar */
    align-items: center; /* İçerikleri dikeyde ortalar */
}

.logo-container { /* Logo alanı kapsayıcısı */
    display: flex; /* Esnek kutu modeli */
    align-items: center; /* İçerikleri dikeyde ortalar */
    text-decoration: none; /* Link çizgisini kaldırır */
    color: var(--secondary-color); 
    font-size: 1.8rem; /* Yazı boyutunu büyütür */
    font-weight: bold; /* Yazıyı kalınlaştırır */
}

.logo { /* Logo görseli */
    height: 50px; /* Yüksekliği 50px yapar */
    margin-right: 10px; /* Sağ taraftan 10px boşluk bırakır */
}

.main-nav ul { /* Menü listesi */
    list-style: none; /* Liste işaretlerini (noktaları) kaldırır */
    display: flex; /* Elemanları yan yana dizer */
    margin: 0; /* Dış boşluğu sıfırlar */
}

.main-nav ul li a { /* Menü linkleri */
    color: var(--secondary-color); 
    text-decoration: none; /* Alt çizgiyi kaldırır */
    padding: 10px 15px; /* Tıklama alanını genişletmek için boşluk verir */
    font-weight: bold; /* Yazıyı kalınlaştırır */
    position: relative; /* Alt çizgi animasyonu için referans noktası */
    display: block; /* Blok element gibi davranmasını sağlar */
}

.main-nav ul li a::after { /* Linklerin altındaki animasyonlu çizgi */
    content: ''; /* Boş içerik oluşturur */
    position: absolute; /* Linke göre konumlandırır */
    bottom: 0; /* En alta yerleştirir */
    left: 15px; /* Soldan padding kadar boşluk bırakır */
    width: 0; /* Başlangıçta genişliği 0'dır (görünmez) */
    height: 3px; /* Çizgi kalınlığı */
    background-color: var(--primary-color); 
    transition: width 0.3s ease; /* Genişlik değişimine animasyon ekler */
}

.main-nav ul li a:hover::after, /* Linkin üzerine gelindiğinde */
.main-nav ul li a.active::after { /* Veya aktif link olduğunda */
    width: calc(100% - 30px); /* Genişliği paddingleri çıkararak %100 yapar */
}

.header-contact { /* Header'daki iletişim bilgisi alanı */
    color: var(--primary-color); 
    font-weight: bold; /* Kalın yazı */
}

.header-contact i { /* İletişim ikonu */
    margin-right: 5px; /* İkonun sağına boşluk verir */
}

.main-footer { /* Alt bilgi (Footer) alanı */
    background-color: var(--secondary-color); 
    color: var(--light-gray); 
    padding-top: 60px; /* Üstten boşluk */
    padding-bottom: 30px; /* Alttan boşluk */
}

.footer-grid { /* Footer içindeki ızgara yapısı */
    display: grid; /* Grid sistemini açar */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Sütunları otomatik sığdırır (en az 200px) */
    gap: 30px; /* Sütunlar arasına 30px boşluk koyar */
    margin-bottom: 40px; /* Altına boşluk bırakır */
    text-align: left; /* Metinleri sola hizalar */
    align-items: start; /* Öğeleri üstten hizalar */
}

.footer-section h4 { /* Footer başlıkları */
    color: var(--white-color); 
    font-size: 1.2rem; /* Yazı boyutu */
    margin-bottom: 20px; /* Alt boşluk */
    position: relative; /* Alt çizgi için referans */
    padding-bottom: 12px; /* Çizgi ile yazı arası boşluk */
    text-align: left; /* Sola hizalar */
    width: -moz-fit-content; /* İçerik kadar genişlik (Mozilla için) */
    width: fit-content; /* İçerik kadar genişlik */
    display: block; /* Blok element yapar */
}

.footer-section h4::after { /* Başlık altındaki dekoratif çizgi */
    content: ''; /* Boş içerik */
    position: absolute; /* Mutlak konumlandırma */
    left: 0; /* Sola yapıştır */
    bottom: 0; /* Alta yapıştır */
    width: 100%; /* Başlık genişliği kadar */
    height: 3px; /* Çizgi kalınlığı */
    background-color: var(--primary-color); 
}

.footer-section ul { /* Footer listeleri */
    list-style: none; /* Madde işaretlerini kaldırır */
    padding: 0; /* İç boşluğu sıfırlar */
    margin: 0; /* Dış boşluğu sıfırlar */
}

.footer-section ul li { /* Liste elemanları */
    margin-bottom: 10px; /* Altlarına boşluk bırakır */
}

.footer-section ul li a { /* Footer linkleri */
    color: var(--light-gray); 
    text-decoration: none; /* Alt çizgiyi kaldırır */
    display: block; /* Blok element yapar (tıklama alanı için) */
    transition: color 0.3s ease; /* Renk değişimine geçiş efekti */
}

.footer-section ul li a:hover { /* Link üzerine gelindiğinde */
    color: var(--primary-color); 
}

.footer-section p { /* Footer paragrafları */
    margin-bottom: 15px; /* Alt boşluk */
}

.footer-section p i { /* Paragraf içindeki ikonlar */
    margin-right: 10px; /* Sağına boşluk */
    color: var(--primary-color); 
}

.social a { /* Sosyal medya ikon linkleri */
    color: var(--light-gray); 
    font-size: 1.5rem; /* İkon boyutu */
    margin-right: 15px; /* Sağına boşluk */
    transition: color 0.3s ease; /* Renk geçiş efekti */
}

.social a:hover { /* Sosyal medya ikonuna gelindiğinde */
    color: var(--primary-color); 
}

.footer-bottom { /* Footer'ın en alt kısmı (Telif hakkı vb.) */
    text-align: center; /* Ortalar */
    padding-top: 25px; /* Üstten boşluk */
    margin-top: 25px; /* Üstteki elemanla arayı açar */
    border-top: 1px solid #444; /* Üste ince bir çizgi çeker */
}

.product-grid { /* Ürünlerin listelendiği ızgara */
    display: grid; /* Grid sistemini açar */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Otomatik sığan sütunlar (min 300px) */
    gap: 30px; /* Kartlar arası boşluk */
    margin-bottom: 50px; /* Izgaranın altına boşluk */
}

.product-card { /* Tekil ürün kartı */
    background-color: var(--white-color); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    border-radius: 8px; /* Köşeleri yuvarlatır */
    overflow: hidden; /* Dışa taşan içerikleri (resim köşeleri) gizler */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hareket ve gölge için geçiş efekti */
    display: flex; /* Esnek kutu düzeni */
    flex-direction: column; /* İçeriği dikey dizer */
}

.product-card:hover { /* Ürün kartının üzerine gelindiğinde */
    transform: translateY(-10px); /* Kartı 10px yukarı kaldırır */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Gölgeyi belirginleştirir */
}

.product-card img { /* Ürün resmi */
    width: 100%; /* Kart genişliğini kaplar */
    height: 200px; /* Sabit yükseklik */
    object-fit: cover; /* Resmi orantılı şekilde alana sığdırır (kırpar) */
}

.product-info { /* Ürün bilgi alanı (başlık, açıklama) */
    padding: 20px; /* İç boşluk */
    flex-grow: 1; /* Kartın kalan yüksekliğini doldurur */
}

.product-info h3 { /* Ürün başlığı */
    color: var(--primary-color); 
    margin-bottom: 15px; /* Alt boşluk */
}

.product-info p { /* Ürün açıklaması */
    margin-bottom: 20px; /* Alt boşluk */
    color: #555; 
}
/* ==================================================
    SAYFA YÜKLEME EKRANI (LOADER) - TÜM CİHAZLAR
   ================================================== */

#page-loader {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999999;
    /* İçindekileri her zaman tam ortalar */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0;
    padding: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Yükleme Ekranı Gizlendiğinde */
#page-loader.gizli {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

.loader-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    max-width: 400px; /* Maksimum genişlik sınırı */
}

/* Logo Ayarları ve Nefes Alma Animasyonu */
.loader-logo {
    width: 280px; /* Masaüstü varsayılan boyutu */
    height: auto;
    margin-bottom: 25px;
    display: block;
    animation: nefesAl 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Yükleme Çubuğu Alanı */
.progress-container {
    width: 250px; /* Masaüstü varsayılan genişlik */
    height: 12px !important;
    background-color: #f0f0f0 !important;
    border-radius: 20px;
    overflow: visible !important; /* Traktörün görünmesi için */
    border: 1px solid #ddd;
    margin: 10px auto !important;
    display: block !important;
    position: relative; /* Traktör için */
}

.progress-bar {
    height: 100% !important;
    width: 0%; /* JS ile dinamik dolar */
    background-color: var(--primary-color, #d90429);
    transition: width 0.3s linear;
}

/* Traktör Animasyonu */
.progress-tractor {
    position: absolute;
    top: 50%;
    left: 10px; /* Başlangıç pozisyonu - traktörün tamamı görünsün */
    transform: translateY(-50%);
    font-size: 20px;
    color: #2b2d42;
    z-index: 10;
    transition: left 0.3s linear;
    animation: traktorSalla 0.5s ease-in-out infinite;
}

@keyframes traktorSalla {
    0%, 100% { transform: translateY(-50%) rotate(-2deg); }
    50% { transform: translateY(-50%) rotate(2deg); }
}

/* Yüzde Metni */
.progress-text {
    width: 100% !important;
    text-align: center !important;
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--secondary-color, #2b2d42);
    margin: 5px 0 0 0 !important;
    display: block !important;
}

/* Logo Animasyonu */
@keyframes nefesAl { 
    0% { transform: scale(0.95); opacity: 0.9; } 
    50% { transform: scale(1.05); opacity: 1; } 
    100% { transform: scale(0.95); opacity: 0.9; } 
}

/* ==================================================
    MOBİL UYUMLULUK SORGULARI
   ================================================== */

/* Tablet ve Akıllı Telefonlar (768px altı) */
@media (max-width: 768px) {
    .loader-logo {
        width: 200px; /* Mobilde logoyu biraz küçültüyoruz */
        max-width: 70%;
    }

    .progress-container {
        width: 200px !important; /* Çubuk mobilde daha dar olsun */
        max-width: 80%;
    }
    
    .progress-tractor {
        font-size: 16px; /* Mobilde biraz küçült */
    }
}

/* Çok Küçük Ekranlar (320px altı) */
@media (max-width: 320px) {
    .loader-logo {
        width: 85% !important;
    }
    
    .progress-container {
        width: 90% !important;
    }
}