@charset "UTF-8";

/* Google Fonts (Türkçe destekli, daha ince ağırlıklarla) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap&subset=latin-ext');

/* Temel HTML elemanlarının varsayılan boşluklarını sıfırlar ve yazı tipini ayarlar */
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif, 'Segoe UI Symbol', 'Noto Sans', 'Apple Color Emoji';
    margin: 0;
    padding: 0;
}

/* Footer'ın tüm arka planını kapsayan div */
.footer-background {
    background-color: #104CA7; /* Arka plan rengini belirler ve tüm genişliği kaplar */
}

/* Footer içeriğini ortalayan ana container'ın stilini belirler */
.footer-container_alt {
    color: #fff; /* Metin rengini beyaza çevirir */
    padding: 35px 20px; /* İçeriden 40px dikey, 20px yatay boşluk bırakır */
    max-width: 1440px; /* Kenarlardan 240px boşluk bırakacak şekilde maksimum genişliği ayarlar */
    margin: 0 auto; /* İçeriği yatayda ortalar */
    display: flex; /* İçindeki elemanları (sütunları) esnek kutu modelinde sıralar */
    flex-wrap: wrap; /* Sütunlar sığmadığında alt satıra geçmesini sağlar */
    justify-content: space-between; /* Sütunlar arasında eşit boşluk bırakır */
    align-items: flex-start; /* Sütunları dikeyde en üste hizalar */
	padding-left: 170px;
	padding-right: 170px;
}

/* Her bir footer sütunu için genel stiller */
.footer-column_alt {
    flex: 1; /* Sütunların eşit genişlikte esnemesini sağlar */
    max-width: 180px; /* Her bir sütun için maksimum 150px genişlik belirler */
    margin: 10px; /* Sütunlar arasına dış boşluk ekler */
}

/* Başlıkların (h3) stilini belirler */
.footer-column_alt h3 {
    font-size: 1.2rem; /* Başlık metin boyutunu ayarlar */
    font-weight: bold; /* Başlık metnini kalın yapar */
    text-transform: uppercase; /* Başlık metnini büyük harfe çevirir */
    color: #fff; /* Başlık metin rengini beyaz yapar */
    margin-bottom: 25px; /* Başlık ile altındaki liste arasına 25px boşluk bırakır */
    font-weight: 400;   /* daha ince yazı */
    font-size: 18px;
}

/* Liste (ul) elemanlarının stilini belirler */
.footer-column_alt ul {
    list-style-type: none; /* Liste maddelerinin başındaki varsayılan noktaları kaldırır */
    padding: 0; /* Liste elemanlarının varsayılan iç boşluğunu sıfırlar */
    margin: 0; /* Liste elemanlarının varsayılan dış boşluğunu sıfırlar */
}

/* Her bir liste maddesi (li) için boşluk ayarı */
.footer-column_alt ul li {
    margin-bottom: 1px; /* Liste maddeleri arasına 2px boşluk bırakır */
    font-weight: 300;   /* daha ince yazı */
    font-size: 18px;
}

/* Son liste maddesinde ekstra boşluk olmasını engeller */
.footer-column_alt ul li:last-child {
    margin-bottom: 0;
    font-weight: 300;   /* daha ince yazı */
    font-size: 16px;
}

/* Bağlantıların (a) stilini belirler */
.footer-column_alt a {
    color: #fff; /* Bağlantı metin rengini beyaza çevirir */
    text-decoration: none; /* Bağlantıların altındaki çizgiyi kaldırır */
    font-size: 0.9rem; /* Bağlantı metin boyutunu ayarlar */
    opacity: 0.8; /* Bağlantıların saydamlığını ayarlar */
    transition: opacity 0.3s ease; /* Fare üzerine gelindiğinde yumuşak geçiş efekti ekler */
    font-weight: 300;   /* daha ince yazı */
    font-size: 16px;
}

/* Bağlantıların üzerine gelindiğinde (hover) stilini belirler */
.footer-column_alt a:hover {
    opacity: 1; /* Fare üzerine gelince saydamlığı kaldırır, rengi netleştirir */
    font-weight: 300;   /* daha ince yazı */
    font-size: 16px;
}

/* Ortadaki logo ve iletişim sütunu için özel stiller */
.center-column_alt {
    text-align: center; /* İçindeki metinleri ve elemanları ortalar */
    flex-grow: 1.5; /* Diğer sütunlara göre daha fazla esneyerek daha geniş olmasını sağlar */
    display: flex; /* Elemanları esnek kutu modelinde sıralar */
    flex-direction: column; /* İçindeki elemanları dikey olarak sıralar */
    align-items: center; /* Dikey sıralamada elemanları ortalar */
    justify-content: center; /* Yatay sıralamada elemanları ortalar */
    font-weight: 300;   /* daha ince yazı */
    font-size: 16px;
    color: #fff; /* Bağlantı metin rengini beyaza çevirir */
}

/* Footer logosunun stilini belirler */
.footer-logo_alt {
    width: 149px; /* Logonun genişliğini ayarlar */
    height: auto; /* Yüksekliğini otomatik olarak ayarlar */
    margin-top: 50px; /* Logo ile altındaki metin arasına boşluk bırakır */
    font-weight: 300;   /* daha ince yazı */
    font-size: 16px;
    color: #fff; /* Bağlantı metin rengini beyaza çevirir */
}

/* Orta sütundaki paragraf ve küçük metinler için boşluk ayarı */
.center-column_alt p,
.center-column_alt small {
    margin: 5px 0;
    font-weight: 300;   /* daha ince yazı */
    font-size: 16px;
    color: #fff; /* Bağlantı metin rengini beyaza çevirir */
}

.center-column_alt small2 {
    font-weight: 300;   /* daha ince yazı */
    font-size: 13px;
    color: #fff; /* Bağlantı metin rengini beyaza çevirir */
}

/* Mobil cihazlar için responsive tasarım (ekran genişliği 768px ve altı) */
@media (max-width: 768px) {
    .footer-container_alt {
        padding: 40px 10px; /* Mobil görünümde yatay boşluğu azaltır */
    }
    .footer-container_alt {
        flex-direction: column; /* Sütunları yan yana yerine alt alta sıralar */
        align-items: center; /* Sütunları yatayda ortalar */
        text-align: center; /* Metinleri ortalar */
        max-width: 100%; /* Mobil cihazlarda tam genişlik kullanır */
    }

    .footer-column_alt {
        min-width: 100%; /* Mobil görünümde sütunların tam genişlikte olmasını sağlar */
        margin-bottom: 30px; /* Sütunlar arasına daha fazla boşluk bırakır */
    }

    .center-column_alt {
        order: -1; /* Logo ve iletişim sütununu mobil görünümde en üste taşır */
    }
}