/* =================================== */
/* SAYFA BAŞLIĞI VE GÖRSEL STİLLERİ     */
/* =================================== */

.page-header {
    /* Navbar'ın altında kalan boşluğu doldurur */
    padding-top: 150px; 
    padding-bottom: 100px; /* Dikeyde daha fazla boşluk */
    height: 60vh; /* Ekranın %60'ını kaplasın */
    min-height: 400px;
    background-color: #333; /* Görsel yüklenmezse koyu arka plan */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Metnin görünürlüğü için z-index'in düzgün çalışması gerekir */
    position: relative; 
}

/* Mobil için override */
@media (max-width: 991px) {
    .page-header {
        padding-top: 100px !important; 
        height: 50vh;
    }
}

/* Görsel Kapsayıcısı (Eski video-background-container) */
.image-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Görsel en arkada kalmalı */
}

/* Görsel Etiketi (Eski video-background) */
.hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Görsel içeriği kapsayıcıyı kaplamalı */
    filter: brightness(0.6); /* Görsel kontrastını düşürür (okunurluk için) */
    display: block; /* Tarayıcı farklılıklarını önler */
}

/* Siyah Katman (Overlay) (Eski video-overlay) */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Hafif siyah katman */
    z-index: 2;
}

/* İçerik Konumu */
.header-content-wrapper {
    position: relative; /* İçeriği görsel ve overlay'in üzerine alır */
    z-index: 3;
}


/* =================================== */
/* 14. HAKKIMIZDA BÖLÜMÜ STİLLERİ      */
/* =================================== */

.mission-img-wrapper {
    /* Görselin tam olarak ortalanması için */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Görsel çevresinde hafif boşluk */
}

.mission-img-container {
    /* Görsel kapsayıcısını kareye yakın bir alanda tutmak için maks genişlik */
    max-width: 100%;
    /* border border-4 border-accent kullanıldı */
}

.mission-image {
    /* Görselin kapsayıcıyı doldurmasını sağlar */
    height: auto; 
    display: block;
}

/* w-80 sınıfı Bootstrap'ta tanımlı değilse, kendi tanımımızı ekleyelim */
.w-80 {
    width: 80% !important;
}

@media (max-width: 991.98px) {
    /* Mobilde görsel genişliğini artır, metin üstüne boşluk bırak */
    .mission-img-wrapper {
        margin-bottom: 2rem;
    }
    .w-80 {
        width: 100% !important; /* Mobilde tam genişlik */
    }
}


/* =================================== */
/* TEMEL DEĞERLER KARTLARI (ÖNCEKİLER) */
/* =================================== */
.value-card {
    background: var(--accent-gradient) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: perspective(1000px) rotateX(0deg); 
}
.value-card:hover {
    transform: translateY(-8px) perspective(1000px) rotateX(3deg) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 255, 255, 0.5) inset;
}
.value-card .feature-icon {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}


/* =================================== */
/* 14. HAKKIMIZDA BÖLÜMÜ STİLLERİ      */
/* =================================== */

.mission-img-wrapper {
    /* Görselin tam olarak ortalanması için */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; 
    
    /* YENİ KURAL: GÖRSELİN MAX GENİŞLİĞİNİ %90 İLE SINIRLA (BÜYÜTÜLDÜ) */
    max-width: 90%; /* Masaüstünde görselin maksimum genişliğini %90 ile sınırla */
    margin: 0 auto; /* Kapsayıcıyı col-lg-6 içinde merkezle */
}

.mission-img-container {
    /* Görsel kapsayıcısının sınırlarını koru */
    max-width: 100%;
}


@media (max-width: 991.98px) {
    .mission-img-wrapper {
        max-width: 100%; /* Mobilde tam genişliğe geri dön */
        margin-bottom: 2rem;
    }
}