/* --- Genel Sayfa Ayarları ve Sıfırlama --- */
body {
    margin: 0; /* Sayfanın kenarlarındaki boşlukları sıfırla */
    font-family: Arial, sans-serif; /* Okunabilir bir yazı tipi ata */
    color: #333; /* Yazı rengini ayarla */
}

img {
    max-width: 100%; /* Resimlerin kendi kabından taşmasını engelle (ÇOK ÖNEMLİ) */
    height: auto;
    display: block; /* Resimlerin altındaki istenmeyen boşluğu kaldırır */
}

/* --- Ana Bölüm Stilleri --- */

/* En üstteki büyük başlık resmi */
.hero-section {
    background-image: url('img/bina_guclendirme-header2.jpg');
    background-size: cover; /* Resmi alana sığdır */
    background-position: center; /* Resmi ortala */
    height: 70vh; /* Ekran yüksekliğinin %70'i kadar yer kaplasın */
    display: flex; /* İçindeki elemanları esnek bir kutuya koy */
    flex-direction: column; /* Elemanları alt alta (dikey) diz */
    justify-content: center; /* Dikeyde tam ortala */
    align-items: center; /* Yatayda tam ortala */
    text-align: center; /* Yazıları da ortala */
    padding: 20px; /* Kenarlardan boşluk ver ki sıkışmasın */
    box-sizing: border-box; /* Padding değeri yüksekliği etkilemesin */
}

/* YENİ EKLENEN LOGO STİLİ */
.header-logo {
    height: 220px; /* Logonun yüksekliğini ayarla */
    width: auto; /* Genişlik otomatik olsun */
    max-width: 80%; /* Ekran çok daralırsa taşmasın */
    margin-bottom: 20px; /* Altındaki slogan ile arasına boşluk koy */
}


/* YENİ EKLENEN SLOGAN STİLİ */
.header-slogan {
    color: white;
    font-size: 2.5em; /* Yazı boyutu */
    font-weight: bold;
    margin: 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Yazının okunurluğu için güçlü bir gölge */
}

/* Hakkımızda Bölümü (Resim ve Yazı) */
.about-section {
    display: flex; /* İçindeki elemanları (resim ve yazı) yan yana getir */
    align-items: center; /* Dikeyde ortala */
    padding: 50px;
    gap: 40px; /* Aralarına boşluk bırak */
}

.about-image, .about-text {
    flex: 1; /* Her ikisi de eşit yer kaplasın */
}

.about-text h2 {
    font-size: 2.5em; /* Yazıyı büyüt */
    color: #CF2025; /* Eski sitedeki kırmızı renk */
}

/* Hizmetlerimiz Bölümü */
.services-section {
    background-color: #000; /* Arkaplanı siyah yap */
    color: #fff; /* Yazıları beyaz yap */
    padding: 50px;
    text-align: center; /* İçindeki her şeyi ortala */
}

.services-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
}

.services-container {
    display: flex; /* Hizmet kartlarını yan yana diz */
    gap: 20px; /* Aralarına boşluk bırak */
}

.service-card {
    background-color: #CF2025;
    padding-bottom: 20px;
    flex: 1; /* Hepsi eşit yer kaplasın */
}

.service-card img {
    margin: 0 auto; /* Resmi kendi kutusu içinde yatayda ortalar */
}

.service-card h3 {
    padding: 10px;
}
.service-card p {
    padding: 0 15px; /* Yazıya kenarlardan boşluk ver */
}


/* --- Galeri Bölümü --- */
.gallery-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9; /* Hafif bir arkaplan rengi */
}

.gallery-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
    color: #333;
}

.gallery-grid {
    display: grid;
    /* Izgara sütunlarını ayarla: Mümkün olduğunca 350px'lik sütunlar sığdır */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px; /* Resimler arası boşluk */
}

.gallery-grid picture,
.gallery-grid img {
    width: 100%; /* Resimlerin kabına tam oturmasını sağla */
    height: 100%;
    display: block;
}

.gallery-grid img {
    /* Resimlerin oranını bozmadan kabını doldurmasını sağla (kenarlardan kırpabilir) */
    object-fit: cover;
    border-radius: 8px; /* Kenarları hafif yuvarlat */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Hafif bir gölge ver */
}


/* Alt Kısım - İletişim */
.contact-section {
    background-color: #f4f4f4; /* Açık gri bir arkaplan */
    padding: 40px;
}

.contact-container {
    display: flex;
    justify-content: space-around; /* Elemanları aralıklı olarak dağıt */
    max-width: 1200px;
    margin: 0 auto; /* Konteyneri sayfanın ortasına al */
}

.contact-info h4 {
    color: #CF2025;
}

/* --- MOBİL UYUMLULUK (RESPONSIVE) KISMI --- */
/* Tarayıcı genişliği 768px veya daha az olduğunda bu kurallar devreye girecek */
@media (max-width: 768px) {
    

    .header-logo {
        height: 220px; /* Mobilde logoyu biraz küçült */
    }

    .header-slogan {
        font-size: 1.8em; /* Mobilde sloganı biraz küçült */
    }

    .hero-section {
        height: 40vh; /* Mobilde başlık resmi daha az yer kaplasın */
        min-height: 500px; /* AMA ASLA 300px'den daha kısa olma! */
    }

    .about-section {
        flex-direction: column; /* Yan yana olan resim ve yazıyı ALT ALTA getir */
        padding: 20px;
    }

    .services-container {
        flex-direction: column; /* Hizmet kartlarını ALT ALTA getir */
    }
    
    .contact-container {
        flex-direction: column; /* İletişim bilgilerini ALT ALTA getir */
        text-align: center;
        gap: 20px;
    }
}