/* css/pages/_hakkimizda.css */

/* css/pages/_sirket-profili.css */

/* =========================================== */
/* 1. HERO BÖLÜMÜ (ARKA PLAN GÖRSELİ İLE) */
/* =========================================== */

.about-hero {
    color: var(--white-color);
    /* Yüksekliği tarayıcıya göre ayarla (Sabit Header'ın altından başlar) */
    min-height: 100vh; 
    padding: 0;            /* üst/alt boşluk kaldırıldı, tam ekran görünüm için */
    
    /* İçerik ve overlay'in çalışması için zorunludur */
    position: relative; 
    overflow: hidden;
    display: flex;
    align-items: center;   /* dikey ortala */
    justify-content: center;/* yatay ortala */
}

/* --- ARKA PLAN VE OVERLAY --- */

.hero-image-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* En altta kalır */
    
    /* Görseli kaplama ayarları */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Koyu mavi/mor tonunda güçlü opaklık */
    background: rgba(0, 0, 0, 0.6); 
    z-index: -1;
}

/* --- İÇERİK STİLLERİ --- */

.hero-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;    /* içerik genişliğini sınırla */
    padding: 2rem;        /* içerik etrafında nefes alma alanı */
    box-sizing: border-box;
}

/* Sol tarafa hizalanmış metin bloğu */
.hero-text-block {
    max-width: 800px; /* Okunurluk için maksimum genişlik */
}

/* BİZ KİMİZ? (Overline Başlık) */
.hero-overline-title {
    font-size: 3rem;      /* ESENKIYI başlığı için eşit boyut */
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--secondary-color, #ffaa00); /* eski renk geri alındı */
    cursor: default !important;
}

/* ESENKIYI: Denizcilikte Güvenin ve Tecrübenin Mimarisi (Ana Başlık) */
.hero-main-heading {
    font-size: 3rem;      /* Ana başlık ile aynı boyut */
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 0.9rem;
    font-style: italic !important; /* Ana başlığın italik kalmasını sağlar */
    color: var(--white-color, #ffffff); /* eski renk geri alındı */
}

.lead-text-light {
    font-size: 1.2rem;
    max-width: 90%; 
    line-height: 1.6;
    opacity: 0.9;
}

/* Açıklama metnini italik yap (lead paragraph) */
.hero-content-wrapper .lead-text-light,
.hero-text-block .lead-text-light {
    font-style: italic;
    color: var(--white-color, #ffffff) !important; /* eski renk geri alındı */
    cursor: default !important;
}

/* =========================================== */
/* RESPONSIVE AYARLAR */
/* =========================================== */
@media (max-width: 992px) {
    .about-hero {
        min-height: 100vh; /* mobilde de tam ekran */
        align-items: center;
        justify-content: center;
    }
    .hero-main-heading {
        font-size: 2.8rem;
    }
    .hero-overline-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .about-hero {
        min-height: 50vh !important;
        height: 50vh !important; /* Yarım ekran yüksekliği */
        padding: 0 !important; /* Tüm paddingleri kaldır */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hero-content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        text-align: center !important;
        margin: auto !important; /* Metni dikey ve yatayda ortala */
        padding-top: 0 !important; /* Üst padding'i sıfırla */
        padding-bottom: 0 !important; /* Alt padding'i sıfırla */
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
    }
    .hero-text-block {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-overline-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
        top: 0 !important; /* Metni en üste hizala */
    }
    .hero-main-heading {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
        top: 0 !important; /* Metni en üste hizala */
    }
    .lead-text-light {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        text-align: center !important;
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
        top: 0 !important; /* Metni en üste hizala */
    }
}

/* =========================================== */
/* 2. VİZYON/SÖZ BÖLÜMÜ */
/* =========================================== */
.vision-section {
    color: var(--white-color);
    min-height: 100vh;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;/* yatay ortala */
    
    /* Arka plan görseli ayarları (görsel HTML'den inline gelir) */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vision-section .hero-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    box-sizing: border-box;
    text-align: left;
    align-self: flex-start;

    /* Üst boşluğu burada kontrol edebilirsiniz.
       Değeri artırınca metin daha aşağı iner. Örnek: 220px */
    margin: 220px 0 0 0; /* <- burayı değiştirin (ör: 140px / 180px / 260px) */

    color: var(--white-color, #fff);
}

.vision-section .vision-text-block-wrapper {
    max-width: 800px; /* Hero bölümüyle aynı metin genişliği */
}

.vision-section .hero-main-text {
    color: var(--white-color);
    opacity: 0.9;
}

.vision-section .row {
    align-items: center;
}

/* Resim Maskesi (Görseli daha çarpıcı yapmak için) */
.vision-section .image-mask {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* İsteğe bağlı: Resme hafif geometrik bir şekil verebiliriz */
    /* clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); */
}

.vision-section img {
    width: 100%;
    height: auto;
    display: block;
}

/* Kaptan alıntısı: metni beyaz yap */
.vision-section .kaptan-quote {
    font-style: italic;
    font-size: 1.3rem;
    margin-top: 2rem;
    padding-left: 1.5rem;
    border-left: 5px solid var(--accent-color);
    color: #ffffff !important; /* beyaz metin */
    line-height: 1.4;
    cursor: default !important;
}

/* css/pages/_sirket-profili.css - METİN İÇİNDE YUVARLAK KART DÜZENİ */

:root {
    --card-size: 250px; /* Yuvarlak Çapı */
    --line-color: #bf092f; /* <-- Çizgi rengi buradan kontrol edilir (eski: #3c467b) */
    --dot-bg-color: #ecedf2; 
    --heading-color-dark: #3c467b;
    --text-color-dark: #ecedf2;
}

/* Genel Stil ve Konteyner Ayarları */
.company-profile-section {
    padding: 120px 20px;
    background-color: #ecedf2; /* Açık gri arka plan */
    font-family: 'Literata', serif; /* Yazı fontu */
}
/* Başlık Stili (Şirket Profili) */
.profile-header {
    margin-bottom: 50px;
    margin-left: 20px;
    top: 40px;
    position: relative;
    display: inline-block; /* Çizginin başlıkla sınırlı olması için */
}

.profile-header h1 {
    font-size: 36px;
    color: #3c467b; 
    margin: 0;
}

/* Başlık Altındaki Çizgi */
.header-underline {
    /* Başlangıçta Mavi Çizgi */
    width: 50%; 
    height: 3px;
    background-color: #3c467b; /* Mavi renk (Görsel 1'deki gibi) */
    position: absolute;
    bottom: -10px; /* Başlığın biraz altında konumlandır */
    left: 0;
    transition: width 0.8s ease-out, background-color 0.5s ease-out; /* Çizgi animasyonu için */
}

/* Animasyon tetiklendiğinde uygulanacak stil */
.header-underline.animate-underline {
    width: 100%;
    background-color: #bf092f; /* Kırmızı renk */
}

/* Kartların Konteyneri (Yan Yana Dizme) */
.profile-cards-container {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Kartlar arası boşluk */
    
}

/* Tekil Kart Stili */
.profile-card {
    flex: 1; /* Eşit genişlikte olmaları için */
    position: relative; /* İçerik konumlandırması için temel */
    border-radius: 40px; /* Köşe yuvarlatmaları */
    overflow: hidden; /* Resmin kart sınırları içinde kalması için */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    min-height: 470px; /* Kartların minimum yüksekliği (içerik az ise) */
    top:30px;
}

/* Kart Başlığı (Giriş, Gelişme, Sonuç) */
.card-title {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 4; /* Metnin üzerinde */
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* İçerik Sarıcı (Resim ve Yazı için) */
.card-content-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; /* Başlığın arkasında */
}

/* Kart Resmi */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi alana sığdır */
    display: block;
}

/* Resim Üzerindeki Karartma Katmanı */
.card-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Başlangıçta şeffaf */
    z-index: 2; /* Overlay ortada */
    transition: background-color 0.3s ease;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    cursor: default !important;
}

/* Kart Metni (Görseldeki lorem ipsum) */
.card-text {
    position: absolute;
    top: 90px; /* Başlığın altında */
    left: 30px;
    right: 30px;
    padding: 0;
    color: #ecedf2;
    text-align: center;
    opacity: 0; /* Başlangıçta görünmez */
    z-index: 3; /* Metin en üstte */
    transition: opacity 0.4s 0.1s ease, transform 0.4s 0.1s ease; /* Gecikmeli giriş */
    font-size: 30px;
    line-height: 1.6;
    transform: translateY(20px);
    box-sizing: border-box;
}

/* --- Hover Efektleri --- */

/* Kartın Üzerine Gelince Hafif Öne Çıkması ve Gölge Alması */
.profile-card:hover {
    transform: translateY(-5px) scale(1.05); /* Hafif yukarı ve biraz büyütme */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Daha belirgin gölge */
}

/* Hover: Başlık Altındaki Çizginin Kırmızı Olması (JS'siz sadece CSS ile) */
/* Eğer çizgiye özgü bir sınıf kullanmak isterseniz JS'ye gerek kalmaz. 
   Ancak görseldeki gibi tam olarak o efekti istiyorsanız JS gerekir. 
   Şimdilik sadece CSS ile bir hover efekti ekleyelim: */
/* .profile-header:hover .header-underline {
    width: 120%; 
    background-color: red; 
} */

/* Kart Üzerine Gelince: Resmin Kararması */
.profile-card:hover .card-image-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Yarı şeffaf mavi */
}

/* Kart Üzerine Gelince: Yazının ve başlığın görünür olması */
.profile-card:hover .card-title,
.profile-card:hover .card-text {
    opacity: 1;
    transform: translateY(0);
}



/* Medya Sorgusu (Daha küçük ekranlar için) */
@media (max-width: 992px) {
    .profile-cards-container {
        flex-direction: column;
    }
}

/* =========================================== */
/* 3. DEĞERLERİMİZ BÖLÜMÜ (GRID İLE ZİKZAK DÜZEN) */
/* =========================================== */

.values-section {
    padding: 6rem 0;
}

.values-section .section-title {
    margin-bottom: 4rem;
    color: var(--heading-color-dark);
}

.main-timeline-grid {
    display: grid;
    /* 4 sütunlu grid: Metin Sol | Yuvarlak Sol | Yuvarlak Sağ | Metin Sağ */
    grid-template-columns: 1fr var(--card-size) var(--card-size) 1fr; 
    grid-template-rows: repeat(2, 1fr); /* İki satır oluştur (Üst ve Alt) */
    
    max-width: 1400px;
    margin: 0 auto;
    height: 600px; /* Sabit yükseklik, hizalama için zorunlu */
    position: relative;
    gap: 30px; 
}

/* --- ORTA DİKEY ÇİZGİ --- */
.vertical-center-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--line-color);
    z-index: 1;
}

/* --- YUVARLAK KART KAPSAYICILARI --- */
.value-card-item {
    z-index: 10;
    display: flex;
    align-items: center; /* İçeriği dikey ortala */
    padding: 0 10px;
}

/* KART 1 ve 3: Sol tarafta */
.value-card-item:nth-child(2n+1) { 
    grid-column: 1 / span 2; /* 1. ve 2. sütunu kapla */
    justify-content: flex-end; /* Sağ tarafa (çizgiye) doğru hizala */
}

/* KART 2 ve 4: Sağ tarafta */
.value-card-item:nth-child(2n) { 
    grid-column: 3 / span 2; /* 3. ve 4. sütunu kapla */
    justify-content: flex-start; /* Sol tarafa (çizgiye) doğru hizala */
}

/* KART 1 ve 2: Üst Sırada */
.item-1, .item-2 { grid-row: 1; }
/* KART 3 ve 4: Alt Sırada */
.item-3, .item-4 { grid-row: 2; }


/* --- YUVARLAK VE İÇERİK STİLİ --- */

.value-card-content {
    /* Yuvarlak dış görünüm */
    width: var(--card-size);
    height: var(--card-size);
    border-radius: 50%;
    border: 3px solid var(--line-color);
    background-color: var(--dot-bg-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
    /* İçerik Dikey Hizalama */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    
    transition: transform 0.3s ease;
}
.value-card-content:hover { transform: scale(1.05); }

/* İçindeki İkon ve Metin */
.card-metin-body {
    padding: 0 10px;
}

.card-metin-body .icon {
    font-size: 2rem;
    color: var(--timeline-accent-color);
    margin-bottom: 5px;
}

.card-heading {
    color: var(--heading-color-dark);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.card-text {
    font-size: 0.8rem;
    color: var(--text-color-dark);
    line-height: 1.3;
}

/* --- MOBİL UYUMLULUK --- */

@media (max-width: 992px) {
    .main-timeline-grid {
        display: block !important;
        width: 100% !important;
        max-width: 940px !important;
        margin: 0 auto;
        padding: 0 12px !important;
        height: auto !important;
    }

    .vertical-center-line {
        display: none !important;
    }

    .value-card-item {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .value-card-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        padding: 14px !important;
        border-width: 1px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
        background-color: #ecedf2!important;
        box-sizing: border-box !important;
    }

    .value-card-content .icon {
        flex: 0 0 48px !important;
        font-size: 1.5rem !important;
        color: var(--line-color, #3c467b) !important;
        margin-top: 4px !important;
    }

    .card-metin-body {
        flex: 1 1 auto !important;
        padding: 0 !important;
    }

    .card-heading {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
        color: var(--heading-color-dark) !important;
    }

    .card-text {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        color: var(--text-color-dark) !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-height: none !important;
    }

    .values-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .bubble-item, .value-card-item.item-1, .value-card-item.item-2, .value-card-item.item-3, .value-card-item.item-4 {
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        position: relative !important;
    }

    .timeline-base-line { background-image: none !important; }
}


/* css/pages/_sirket-profili.css - GÜCÜMÜZ BÖLÜMÜ (YAN YANA EŞİT KARTLAR) */

:root {
    --highlight-blue: #3c467b; 
    --highlight-accent: #bf092f; /* <-- Başlık altındaki ince çizgi rengi */
    --bg-krem: #ecedf2; /* Kart İç Dolgu Rengi */
   
}

/* =========================================== */
/* 5. GÜCÜMÜZ: FİLO VE KADRO */
/* =========================================== */

.strength-section {
    min-height: 100vh;
    margin-top: 90px;
}

/* KARTLARI TAŞIYAN ANA SATIR */
.strength-content-grid {
    /* KRİTİK: Yan yana düzeni ve eşit yükseklik almayı garantiler */
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Kartların dikeyde eşit uzamasını sağlar */
    gap: 30px; /* Kartlar arası boşluk */
    flex-wrap: wrap;
}

/* Kartların sarıldığı kolon (col-md-6) */
.strength-card-wrapper {
    /* Flex yapısı içinde 50% genişlik alır */
    flex: 1 1 calc(50% - 15px); /* Gap'ı telafi eder */
    padding: 0; /* İç paddingi kaldır */
    display: flex; /* Eklendi: İçindeki .strength-card'ın esnemesi için */
}

/* --- KART STİLİ (Kapsül Köşeli) --- */
.strength-card {
    background-color: var(--dot-bg-color, var(--bg-krem));
    padding: 70px; 

    
    /* Görüntüdeki gibi yuvarlak köşeler */
    border-radius: 20px; 
    
    /* ZORUNLU: Eşit yükseklik alması için kartın kendisi de flex olmalı */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    
    height: 100%; /* Kapsayıcısının (wrapper) yüksekliğini alır */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 51, 102, 0.1);
    transition: transform 0.3s;
}

.strength-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}


/* --- BAŞLIK VE LİSTE STİLİ --- */
.strength-card h3 {
    color: var(--highlight-blue);
    font-size: 1.6rem;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--highlight-accent); 
    padding-bottom: 8px;
}

.strength-list {
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Liste içeriğinin kartın kalan alanını doldurmasını sağlar */
}

.strength-list li {
    position: relative;
    padding-left: 2.6rem; /* ikon için sol boşluk (isteğe göre ayarlayın) */
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--text-color, #333);
}

/* disable old pseudo bullet if present */
.strength-list li::before { content: none !important; }

/* gerçek ikon elementinin stili: sabit renk ve konum (strength-list içindeki <i class="li-icon ..."> için) */
.strength-list li {
    position: relative;
    padding-left: 2.6rem; /* ikon için sol boşluk */
    cursor: default !important;
}
.strength-list li::before { content: none !important; } /* eski pseudo işareti varsa kapat */

.strength-list li .li-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    width: 1.6rem;
    text-align: center;
    color: #3c467b !important; /* istenen renk */
}

/* Mobilde biraz küçültme */
@media (max-width: 768px) {
    .strength-list li { padding-left: 2rem; }
    .strength-list li .li-icon { font-size: 0.95rem; width: 1.4rem; }
}

/* --- MOBİL UYUMLULUK --- */

@media (max-width: 768px) {
    /* Mobilde alt alta geçiş */
    .strength-content-grid {
        flex-direction: column;
        gap: 20px;
    }
    .strength-card-wrapper {
        width: 100%;
        flex: 1 1 100%;
        padding: 0;
    }
    .strength-card {
        height: auto; /* Yüksekliği serbest bırakır */
        width: 100%; /* Eklendi: Wrapper'ı doldurmasını garantiler */
    }
}
/* --- RESPONSIVE AYARLAR --- */


/* KISALTMA: değerlerimiz bölümünü daha kompakt yapmak için override ayarları */
:root {
	/* Küçültme: baloncuk ve kart boyutları (ince ayar için burayı değiştir) */
	--bubble-size: 250px;            /* önceki büyük değerden küçük değere düşürdük */
	--card-size: 300px;
	--values-section-padding: 4rem; /* bölümün üst/alt boşluğunu azalt */
	--values-gap: 10px;              /* baloncuklar arası boşluk */
	--timeline-line-thickness: 4px;  /* çizgi daha ince olsun */
}

/* Daha kısa bölüm yüksekliği ve daha sıkışık görünüm */
.values-section {
	padding: var(--values-section-padding) 0;
}

/* Konteyner artık sabit yükseklik kullanmasın — içeriğe göre kısalsın */
.bubble-timeline-container,
.main-timeline-grid {
	height: auto !important;
	max-height: none !important;
	gap: var(--values-gap);
	padding: 0 8px;
}

/* Baloncukları küçült ve iç paddingleri azalt */
.bubble-item,
.value-card-content {
	width: var(--bubble-size) !important;
	height: var(--bubble-size) !important;
	padding: 12px !important;
	border-width: 4px !important;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Yazıları daha kompakt yap */
.bubble-title, .card-heading { font-size: 1rem; }
.bubble-text, .card-text { font-size: 0.82rem; line-height:1.2; }

/* Hafifçe konumları daraltarak dikey yayılmayı azalt */
.bubble-item.item-1 { top: 0; left: 8%; }
.bubble-item.item-2 { bottom: 0; left: 28%; }
.bubble-item.item-3 { top: 0; left: 48%; }
.bubble-item.item-4 { bottom: 0; left: 68%; }

/* Eğer timeline connectors arka planla çiziliyorsa uzunlukları kısalt */
.timeline-base-line {
	background-size:
		calc(var(--timeline-line-gap-1) * 0.6) var(--timeline-line-thickness),
		calc(var(--timeline-line-gap-2) * 0.6) var(--timeline-line-thickness),
		calc(var(--timeline-line-gap-3) * 0.6) var(--timeline-line-thickness);
}

/* Grid varyantı için daha küçük gap */
.main-timeline-grid { gap: 18px; }

/* Mobilde daha kompakt stacked görünüme geri dön */
@media (max-width: 992px) {
	.values-section { padding: 1.5rem 0; }
	.bubble-item, .value-card-content {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		border-radius: 12px !important;
		padding: 14px !important;
	}
	.vertical-center-line,
	.timeline-base-line { display: none !important; } /* çizgileri gizle */
}

/* Vision hero: ayarlanabilir tam ekran ve overlay kontrolü
   - --vision-min-height : section yüksekliği (ör: 90vh / 100vh / 1200px)
   - --vision-overlay-opacity : overlay karartma (0.0 - 1.0 arası; index hero ile aynı yapmak için 0.6 kullanın) */
:root {
    --vision-min-height: 100vh;          /* <-- tam ekran için 100vh */
    --vision-overlay-opacity: 0.6;       /* <-- overlay opaklığını buradan değiştirin */
}

/* Vision section: tam ekran ve overlay/inset garantisi */
.vision-section.full-screen-hero-style {
    position: relative !important;
    overflow: hidden !important;
    min-height: var(--vision-min-height) !important; /* tam ekran yüksekliği */
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Background layer kesinlikle tüm alanı kaplasın ve görsel her zaman cover olsun */
.vision-section .image-background-container.hero-image-bg-layer,
.vision-section .hero-image-bg-layer {
    position: absolute !important;
    inset: 0 !important;                  /* top:0; right:0; bottom:0; left:0; */
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: cover !important;    /* görseli tam ekrana sığdırır */
    background-repeat: no-repeat !important;
    z-index: 0 !important;                /* overlay'in altında, içeriğin üstünde */
    pointer-events: none !important;
}

/* Overlay mutlaka görselin üstünde olmalı */
.vision-section .hero-overlay-dark {
    position: absolute !important;
    inset: 0 !important;
    /* overlay opaklığını değişkenden alır */
    background: rgba(0, 0, 0, var(--vision-overlay-opacity)) !important;
    z-index: 1 !important;                /* görselin üstünde, içeriğin altında */
    pointer-events: none !important;      /* overlay tıklamaları engellemesin */
}

/* İçerik overlay'in üstünde gözüksün */
.vision-section .hero-content-wrapper {
    position: relative !important;
    z-index: 2 !important;                /* içerik her zaman en önde */
    /* Dikey pozisyonu buradan kontrol edin (ör. margin-top) */
    margin: 220px 0 0 0; /* isteğe göre değiştirin */
}

/* Mobilde yine tam ekran ve overlay davranışını koru */
@media (max-width: 768px) {
    .vision-section.full-screen-hero-style {
        min-height: calc(100vh - 60px) !important; /* Menü yüksekliğini çıkar */
        height: 50vh !important; /* Yarım ekran yüksekliği */
        padding: 0 !important; /* Tüm paddingleri kaldır */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .vision-section .hero-content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        text-align: center !important;
        margin: auto !important; /* Metni dikey ve yatayda ortala */
        padding-top: 0 !important; /* Üst padding'i sıfırla */
        padding-bottom: 0 !important; /* Alt padding'i sıfırla */
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
    }
}

/* Kullanım notu:
   - Daha koyu karartma: :root { --vision-overlay-opacity: 0.7; }
   - Daha hafif karartma: :root { --vision-overlay-opacity: 0.45; }
   - Section yüksekliğini azaltmak isterseniz: :root { --vision-min-height: 80vh; } */

/* DISABLE eski values-section / timeline stiller (geçici, yeni tasarım denenene kadar) */
.values-section,
.main-timeline-grid,
.value-card-item,
.value-card-content,
.vertical-center-line {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Yeni tam ekran görsel section */
.five-image-section,
.five-image-section .five-image-bg {
    position: relative;
    width: 100%;
    min-height: 105vh; /* tam ekran yüksekliği */
    box-sizing: border-box;
}

/* Arka plan görsel katmanı (tam kaplama) */
.five-image-section .five-image-bg {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-position: center center;
    background-size: cover; /* görseli keserek tüm ekrana sığdırır */
    background-repeat: no-repeat;
    z-index: 0;
}

/* İsteğe bağlı: karartma gerekiyorsa uncomment edin ve opacity ayarlayın */
/*
.five-image-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);  / * opaklık: 0.0 - 1.0 arasında değiştirin * /
    z-index: 1;
}
*/

/* İçerik (varsa) overlay'in üstünde görünsün */
.five-image-section .hero-content-wrapper {
    position: relative;
    z-index: 2;
    padding: 2rem;
    color: var(--white-color, #fff);
}

/* Mobil/Responsive ayar: görselin odağını koru */
@media (max-width: 768px) {
    .five-image-section { min-height: 70vh; }
    .five-image-section .hero-content-wrapper { padding: 1.25rem; text-align: center; }
}

/* Override: strength-section içeriğini hero'dan daha aşağıya al ve full-viewport zorlamasını kaldır
   - --strength-section-top ile üst boşluğu manuel kontrol edin (ör: 3rem / 6rem / 90px)
   - min-height kaldırıldı, padding-top ile güvenli boşluk verildi
*/
:root {
	--strength-section-top: 10rem; /* <-- Burayı artırarak/azaltarak içeriği dikeyde aşağı/ Yukarı taşıyın */
}

/* Güvenli override, önceki min-height/margin-top kurallarını iptal eder */
.strength-section {
	position: relative;
	min-height: auto !important;       /* önceki 100vh'yi iptal et */
	margin-top: 0 !important;          /* varsa üstten ekstra margin temizlendi */
	padding-top: var(--strength-section-top) !important; /* kontrollü üst boşluk */
	padding-bottom: 3.5rem !important; /* isteğe bağlı alt boşluk */
	clear: both;                        /* önceki elementlerle çakışmayı engeller */
}

/* İçerik overlay'in üstünde gözüksün */
.strength-content-grid {
    position: relative;
    z-index: 2;
}

/* Ensure strength cards take equal height side-by-side */
/* Wrapper becomes a flex container so its child .strength-card can stretch */
.strength-content-grid > .strength-card-wrapper {
	display: flex;
	flex-direction: column; /* vertikal düzen içinde kart uzasın */
	align-items: stretch;
	min-height: 0; /* flex children overflow için güvenlik */
	box-sizing: border-box;
}

/* Card fills its wrapper and uses column flex so header/list/footer layout is preserved */
.strength-content-grid .strength-card-wrapper .strength-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;      /* kart yüksekliğini wrapper'a göre doldurur */
	box-sizing: border-box;
}

/* Allow the list to take remaining vertical space so cards match height */
.strength-card .strength-list {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* liste elemanları yukarıdan başlasın */
}

/* Normalize title spacing to avoid small differences affecting height */
.strength-card h3 {
	margin-top: 0;
	margin-bottom: 16px; /* tutarlı alt boşluk */
}

/* Small tweak: ensure padding/box sizing identical across cards */
.strength-card {
	padding: 70px; /* mevcut padding korunur; gerekirse eşitleyin */
	box-sizing: border-box;
}

/* Mobile: revert to stacked cards with natural heights */
@media (max-width: 768px) {
	.strength-content-grid > .strength-card-wrapper { display: block; }
	.strength-content-grid .strength-card-wrapper .strength-card {
		display: block;
		flex: none;
	}
	.strength-card .strength-list { display: block; flex: none; }
}

/* Strength başlığına buton görünümü ver (hover/etkileşim yok) */
.strength-section .section-title.btn-title {
    display: block; /* bloğa çevir: margin auto ile ortalanır */
    width: max-content; /* metin genişliği kadar kutu */
    margin: 0 auto 1.25rem auto; /* yatayda ortala, alt boşluk */
    background-color: var(--highlight-blue, #3c467b);
    color: #ffffff;
    padding: 0.9rem 1.6rem; /* daha belirgin dolgu */
    border-radius: 50px;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem); /* masaüstü büyük, mobil küçülür */
    line-height: 1;
    text-align: center;
    box-shadow: none;
    cursor: default;
    pointer-events: none; /* tıklanamaz/hover etkisiz */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Güçlü override: hover durumunu kesinlikle değiştirmesin */
.strength-section .section-title.btn-title:hover {
    background-color: var(--highlight-blue, #3c467b) !important;
}

/* Mobilde daha küçük ve dengeli görünüm */
@media (max-width: 480px) {
    .strength-section .section-title.btn-title {
        font-size: 1.2rem;
        padding: 0.6rem 1rem;
    }
}
@media screen and (max-width: 768px) {
    
    * { box-sizing: border-box !important; }
    html, body { overflow-x: hidden !important; width: 100% !important; }
    body { padding-top: 0 !important; }
    .container { padding-left: 15px !important; padding-right: 15px !important; }
    section { padding: 2rem 0 !important; padding-bottom: 0 !important; overflow: hidden !important; }
    
    /* --- HERO BÖLÜMÜ (TÜM SAYFALAR İÇİN) --- */
    .hero-section,
    .hero-section.about-hero,
    .vision-section {
        min-height: auto !important; /* İçeriğe göre otomatik yükseklik */
        height: auto !important; /* İçeriğe göre otomatik yükseklik */
        padding: 0 !important; /* Tüm paddingleri kaldır */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Başlık ve metin küçültme */
    .hero-content-wrapper {
        margin: auto !important;
        padding: 1rem !important;
    }
    .hero-overline-title,
    .hero-main-heading { font-size: 1.8rem !important; line-height: 1.2 !important; }
    .lead-text-light { font-size: 0.95rem !important; }
    
    /* Vision Section için de aynı hero ayarlarını zorla */
    .vision-section,
    .vision-section.full-screen-hero-style {
        min-height: 50vh !important;
        height: 50vh !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .vision-section .hero-content-wrapper {
        margin: auto !important;
        padding: 1rem !important;
    }
    .vision-section .hero-overline-title,
    .vision-section .hero-main-heading { font-size: 1.8rem !important; line-height: 1.2 !important; }
    .vision-section .lead-text-light { font-size: 0.95rem !important; }
    .profile-cards-container {
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }
    .profile-card {
        min-height: 250px !important;
        margin-top: 0 !important;
        transform: none !important; /* Hover hareketini mobilde sıfırla */
    }
    .card-title { opacity: 1 !important; transform: none !important; color: #fff !important; }
    .card-text { opacity: 1 !important; transform: none !important; font-size: 1rem !important; line-height: 1.4 !important; }

    /* --- VİZYON BÖLÜMÜ (Vision Section) --- */
    .vision-section .hero-content-wrapper {
        margin: 0 !important; /* Dikey boşluğu sıfırla */
        padding: 1rem !important;
    }
    .vision-section .kaptan-quote { 
        font-size: 1.1rem !important; 
        cursor: default !important;
    }
    
    /* --- GÜÇ/FİLO KARTLARI (Strength Section) --- */
    .strength-content-grid { flex-direction: column !important; gap: 20px !important; }
    .strength-card-wrapper { width: 100% !important; flex: none !important; }
    .strength-card { padding: 25px !important; height: auto !important; }
    .strength-section .section-title.btn-title { margin-bottom: 2rem auto !important; }

}

/* ===== İSTATİSTİK BÖLÜMÜ - 2x2 DÜZENİ ZORLAMA (TÜM MOBİL EKRANLARDA) ===== */
@media (max-width: 768px) {
    
    /* --- 1. GÖRSEL KISMI (ÜSTTE) --- */
    .stats-visual-col { order: 1 !important; width: 100% !important; padding: 0 !important; }
    
    .stats-master-image {
        width: 100% !important;
        height: 200px !important; /* Görsel boyutunu küçült ama sığdır */
        object-fit: cover !important; 
        border-radius: 20px 20px 0 0 !important;
    }
    
    .stats-visual-col::after {
        /* Karartma katmanı */
        content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); z-index: 1; 
    }
    
    /* Başlık */
    .stats-master-card .section-heading.btn-title {
        font-size: 1rem !important;
        margin-top: 1.5rem !important; 
        margin-bottom: 1.5rem !important;
    }
    
    .stats-grid-wrapper { order: 2 !important; width: 100% !important; padding: 0 15px 30px 15px !important; }
    
    /* --- 2. SAYAÇLARIN 2x2 GRID DÜZENİ VE YATAY HİZALAMA --- */
    
    .stats-grid {
        /* KRİTİK ZORLAMA: 2 sütunlu grid */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px 10px !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 auto !important;
    }

    .stats-item-col { padding: 0 !important; width: 100% !important; }
    
    .stat-inner-item {
        /* YATAY AKIŞ: Yuvarlak (Sol) + Metin (Sağ) */
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        text-align: left !important; /* Dikey hiza ortalanacak */
        gap: 8px !important; 
        height: 100%;
    }
    
    /* Yuvarlak ikon ve Sayı Boyutu */
    .stat-icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: flex !important; /* İçeriği dikey ortalamak için */
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .stat-number, .counter {
        font-size: 1.1rem !important;
        line-height: 1 !important;
    }

    /* Metin Kısmı (Yazı Bloğu) */
    .stat-text {
        display: flex !important;
        flex-direction: row !important; /* Ok ve metin yan yana */
        align-items: center !important; 
        justify-content: flex-start !important; /* Sola yasla */
        text-align: left !important;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .stat-text p {
        text-align: left !important;
        font-size: 0.8rem !important; 
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: normal !important; /* Metnin kırılmasına izin ver */
    }
    
    /* Ok İkonu (Okun Metinle Yan Yana Kalmasını Sağlar) */
    .stat-icon-img {
        width: 12px !important;
        height: 12px !important;
        margin-right: 2px !important; 
        flex-shrink: 0 !important;
    }
    
    /* CTA Butonu */
    .cta-row .cta-button {
        width: 100% !important;
    }
}

/* ===== ÇOK KÜÇÜK EKRANLAR: 480px ve altı ===== */
@media screen and (max-width: 480px) {
    /* Görseli daha da küçült */
    .stats-master-image {
        height: 150px !important;
    }
}

/* MOBILE RESPONSIVE START */
@media (max-width: 768px) {
    /* Genel Ayarlar */
    body {
        padding-top: 0 !important; /* Mobil hero görselinin en üstte başlaması için kaldırıldı */
    }
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    section {
        padding: 2rem 0 !important;
        overflow: hidden !important;
    }

    /* HERO BÖLÜMÜ */
    .about-hero {
        min-height: 50vh !important;
        height: 50vh !important; /* Yarım ekran yüksekliği */
        padding: 0 !important; /* Tüm paddingleri kaldır */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .hero-content-wrapper {
        padding: 1rem !important;
        padding-top: 5rem !important; /* Metni aşağı kaydırmak için üst boşluğu artır */
        margin: auto !important;
    }
    .hero-text-block {
        max-width: 100% !important;
    }
    .hero-overline-title {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }
    .hero-main-heading {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.8rem !important;
    }
    .lead-text-light {
        font-size: 0.95rem !important;
        max-width: 100% !important;
    }

    /* ŞİRKET PROFİLİ KARTLARI */
    .company-profile-section {
        padding: 20px !important;
    }
    .profile-header {
        margin-left: 0 !important;
        text-align: center;
        width: 100%;
    }
    .profile-header h1 {
        font-size: 28px !important;
    }
    .header-underline {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
    }
    .profile-cards-container {
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }
    .profile-card {
        min-height: 300px !important;
        top: 0 !important;
        transform: none !important; /* Hover hareketini mobilde sıfırla */
        border-radius: 15px !important;
    }
    .card-title {
        opacity: 1 !important;
        transform: none !important;
        font-size: 20px !important;
        top: 30px !important;
    }
    .card-text {
        opacity: 1 !important;
        transform: none !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        top: 80px !important;
        left: 20px !important;
        right: 20px !important;
    }
    .profile-card:hover .card-image-overlay {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
    .card-image-overlay.mobile-overlay {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    /* VİZYON BÖLÜMÜ */
    .vision-section {
        min-height: 50vh !important;
        height: 50vh !important; /* Yarım ekran yüksekliği */
        padding: 0 !important; /* Tüm paddingleri kaldır */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .vision-section .hero-content-wrapper {
        margin: auto !important; /* Dikey boşluğu sıfırla ve ortala */
        padding: 1rem !important;
        padding-top: 0 !important; /* Üst boşluğu sıfırla */
    }
    .vision-section .hero-overline-title {
        font-size: 1.4rem !important;
    }
    .vision-section .hero-main-heading {
        font-size: 2rem !important;
    }
    .vision-section .lead-text-light {
        font-size: 0.95rem !important;
    }
    .vision-section .kaptan-quote {
        font-size: 1.1rem !important;
        padding-left: 1rem !important;
        margin-top: 1.5rem !important;
    }

    /* GÜCÜMÜZ BÖLÜMÜ */
    .strength-section {
        padding-top: 2rem !important;
        padding-bottom: 0 !important; /* Alt boşluğu sıfırla */
        margin-top: 0 !important;
    }
    .strength-section .section-title.btn-title {
        font-size: 1.4rem !important;
        padding: 0.8rem 1.2rem !important;
        margin: 0 auto 1.5rem auto !important;
    }
    .strength-content-grid {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .strength-card-wrapper {
        width: 100% !important;
        flex: none !important;
    }
    .strength-card {
        padding: 30px !important;
        height: auto !important;
        border-radius: 15px !important;
    }
    .strength-card h3 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }
    .strength-list li {
        font-size: 0.95rem !important;
        padding-left: 2rem !important;
        margin-bottom: 10px !important;
    }
    .strength-list li .li-icon {
        font-size: 0.9rem !important;
        width: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    .hero-main-heading {
        font-size: 1.3rem !important;
    }
    .profile-card {
        min-height: 280px !important;
    }
    .card-title {
        font-size: 18px !important;
        top: 20px !important;
    }
    .card-text {
        font-size: 0.9rem !important;
        top: 60px !important;
    }
    .strength-section .section-title.btn-title {
        font-size: 1.2rem !important;
        padding: 0.6rem 1rem !important;
    }
    .strength-card h3 {
        font-size: 1.2rem !important;
    }
    .strength-list li {
        font-size: 0.85rem !important;
    }
}
/* MOBILE RESPONSIVE END */