@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Yellowtail&display=swap');







/* === 1. TEMEL AYARLAR (Reset) === */

/* Bu kod, tüm elemanların (padding ve border) boyut hesaplamasını 
   daha kolay yönetmemizi sağlar. Standart bir best practice'tir. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Sitenizin geneli için okunaklı bir font ailesi seçiyoruz */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333; /* Ana metin rengi (koyu gri) */
}

/* Bu, içeriğimizi ortalamak için kullanacağımız "joker" bir sınıftır. */
.container {
    width: 90%;
    max-width: 1100px; /* En fazla 1100px genişlesin */
    margin: 0 auto; /* Otomatik olarak ortalar */
}








/* === 2. HEADER (ÜST BÖLÜM) TASARIMI === */




/* === HEADER TASARIMI (DÜZENLENMİŞ) === */
header {
    background: #13394b49; /* Sizin belirlediğiniz renk */
    padding: 1px 0; /* 2px çok dardı, logoyu boğuyordu, 5px idealdir */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Alt çizgi rengini yumuşattım */
    
    /* AKILLI HEADER AYARLARI */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; 
    z-index: 1000;
    
    /* Animasyon */
    transition: transform 0.3s ease-in-out;
}

/* Header gizlendiğinde devreye girecek sınıf */
.header-hide {
    transform: translateY(-100%);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header fixed olduğu için sayfa içeriğinin üstte kalmasını önler 
body {
    padding-top: 80px; 
}*/

/* --- BODY AYARLARI --- */
body {
    /* padding-top: 80px;  <-- BU SATIRI SİLDİK */
    /* Sayfanın en tepesine yapışması için margin ve padding 0 olmalı */
    margin: 0;
    padding: 0;
    
    /* Font ayarlarınız vs. varsa burada kalabilir */
    font-family: 'Open Sans', sans-serif;
}






/* --- LOGO VE İSİM ALANI --- */

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px; /* Logo ile yazı arası boşluk biraz açıldı */
    text-decoration: none; 
}

.logo-link img {
    /* DÜZELTME: 90px çok büyüktü, 50px yaptık */
    width: 100px; 
    height: auto;
    object-fit: contain;
}

.brand-name {
    font-family: 'Yellowtail', cursive;
    font-size: 25px;
    color: #ffffff; /* Gri yerine Beyaz yaptık, daha net okunur */
    font-weight: 400;
    letter-spacing: 0.5px;
}


/* --- MENÜ (NAVİGASYON) ALANI --- */

.nav-menu {
    display: flex; 
    list-style: none; 
    gap: 30px; /* Linkler arasındaki boşluk 25px'den 30px'e çıktı */
    margin: 0;
    padding: 0;
}

.nav-menu li a {
    text-decoration: none;
    color: #f0f0f0; /* Tam beyaz değil, göz yormayan kırık beyaz */
    font-family: 'Open Sans', sans-serif; 
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s ease; 
}

.nav-menu li a:hover {
    color: #ffffff; /* Üzerine gelince tam parlak beyaz */
    text-shadow: 0 0 5px rgba(255,255,255,0.5); /* Hafif parlama efekti */
}


/* --- MOBİL UYUMLULUK (RESPONSIVE) --- */

@media (max-width: 768px) {
    .brand-name {
        font-size: 18px;
    }
    
    .logo-link img {
        width: 40px;
    }

    .nav-menu {
        gap: 15px; /* Mobilde boşluklar azalır */
    }
    
    .nav-menu li a {
        font-size: 13px; /* Yazılar küçülür */
    }
}


/* === 4. WHATSAPP BUTONU (PROFESYONEL & ANİMASYONLU) === */
.whatsapp-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    
    /* WhatsApp Yeşili */
    background-color: #25D366;
    
    width: 65px;  /* Biraz büyüttük */
    height: 65px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Güçlü bir gölge ile havada dursun */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    
    z-index: 9999; /* Her şeyin üstünde */
    
    /* Hover (Üzerine gelme) geçişi */
    transition: all 0.3s ease;
    
    /* Nefes alma animasyonu */
    animation: pulse 2s infinite;
}

/* İkonun Boyutu */
.whatsapp-icon {
    width: 38px;
    height: 38px;
    fill: white; /* İkon rengi beyaz */
}

/* Üzerine gelince animasyon dursun ve hafif büyüsün */
.whatsapp-button:hover {
    transform: scale(1.1); /* %10 büyür */
    background-color: #20b858; /* Rengi koyulaşır */
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    animation: none; /* Titreşimi durdur */
}

/* --- NEFES ALMA (PULSE) ANİMASYONU --- */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); /* Halka genişler ve kaybolur */
        transform: scale(1.05); /* Buton hafifçe şişer */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        transform: scale(1);
    }
}

/* Mobilde butonu biraz daha küçültelim ki ekranı kaplamasın */
@media (max-width: 768px) {
    .whatsapp-button {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-icon {
        width: 32px;
        height: 32px;
    }
}


/* === 5. HERO (KARŞILAMA) BÖLÜMÜ === */

/* === 5. HERO (KARŞILAMA) BÖLÜMÜ - VİDEOLU === */

#hero {
    position: relative;
    width: 100%;
    
    /* GÜNCELLEME 1: Yükseklik */
    /* 90vh yerine 100vh yaptık. Artık ekranı tam dolduracak. */
    min-height: 100vh; 
    
    display: flex;
    align-items: center; 
    justify-content: center;
    
    color: #f5f5f5;
    
    /* GÜNCELLEME 2: İç Boşluk (Padding) */
    /* Üstten 150px vererek içeriği Header'ın altından kurtardık ve aşağı ittik. */
    padding-top: 150px; 
    padding-bottom: 50px; /* Alttan da biraz pay bıraktık */
    
    overflow: hidden; 
}

/* --- YENİ EKLENEN: VİDEO AYARLARI --- */
#hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Videoyu ekrana sündürmeden yayar (Cover mantığı) */
    object-fit: cover; 
    
    /* En arkaya at */
    z-index: -2; 
}

/* --- YENİ EKLENEN: FİLTRE (GRADYENT) AYARLARI --- */
/* Yazıların okunması için videonun üzerine attığımız tül */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Senin orijinal CSS'indeki renk tonlarını buraya taşıdık */
    background: linear-gradient(rgba(109, 101, 101, 0.6), rgba(109, 102, 102, 0.7));
    
    /* Videonun önünde, içeriğin arkasında dur */
    z-index: -1; 
}

/* --- MEVCUT İÇERİK KUTUSU (GÜNCELLEME) --- */
.hero-container {
    /* İçeriğin videonun altında kalmaması için z-index ekliyoruz */
    position: relative;
    z-index: 1; 

    /* Geri kalan ayarlar aynen korunuyor */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7vw; 
    width: 90%;
    max-width: 1800px; 
    margin: 0 auto;
}



/* === SOL TARAF === */
.hero-left {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-photo {
    width: auto;
    height: 70vh; /* Biraz küçülttük ki ekrana daha rahat sığsın */
    max-height: 800px;
    max-width: 100%;
    
    /* Parlaklığı biraz açtık, 0.80 çok karanlık kalabilir */
    filter: brightness(0.95); 
    
    /* ŞEKİL AYARI (Hafif Asimetrik/Doğal) */
    border-radius: 40% 60% 80% 60% / 40% 50% 50% 30%;
    
    /* --- GEÇİŞİ YUMUŞATAN SİHİRLİ KISIM --- */
    /* 1. Resmin etrafına yarı şeffaf beyaz bir çerçeve ekler */
    border: 8px solid rgba(255, 255, 255, 0.15); 
    
    /* 2. Resmin videodan ayrışması için yumuşak bir gölge */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); 
    
    /* 3. İçeriye doğru hafif bir gölge (Resme derinlik katar) */
    /* Not: Bu özellik sadece resim 'padding' ile ayrılırsa çalışır, 
       şimdilik dış gölgeye odaklanalım. */

    object-fit: cover;
    display: block;
    
    /* Animasyonlar (Korundu) */
    transition: transform 0.3s ease, border-color 0.3s ease;
    animation: appearUpPhoto 2s ease 0.1s both;
    opacity: 0;
}

/* Üzerine gelince çerçeve biraz belirginleşsin */
.hero-photo:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    filter: brightness(1); /* Üzerine gelince tam parlak olsun */
}

/* === SAĞ TARAF (Yazılar) === */
.hero-right {
    flex: 1.2; 
    text-align: left;
}

.hero-title {
    /* Yazı boyutu ekran genişliğine göre hesaplanır */
    /* Laptopta 50px ise Dev ekranda 90px olur */
    font-size: clamp(40px, 5vw, 90px); 
    
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2vh; /* Alt boşluk orantılı */
    font-family: 'Open Sans', sans-serif;
    text-shadow: 0 0.5vh 2vh rgba(0,0,0,0.4);
}

.hero-desc {
    /* Açıklama yazısı da ekranla birlikte büyür */
    font-size: clamp(16px, 1.3vw, 24px);
    
    line-height: 1.6;
    margin-bottom: 4vh;
    max-width: 90%; /* Yazı satırı çok uzamasın */
    opacity: 0.95;
}

/* Butonun büyümesi */
.btn-hero {
    padding: 1.5vh 3vw; /* Buton içi boşluklar orantılı */
    font-size: clamp(16px, 1.2vw, 22px);
}

/* === MOBİL UYUMLULUK === */
@media screen and (max-width: 1100px) {
    .hero-container {
        flex-direction: column;
        gap: 5vh; /* Mobilde dikey boşluk */
    }

    .hero-right {
        text-align: center;
        width: 100%;
    }

    .hero-photo {
        height: auto;
        width: 60vw; /* Mobilde genişliğe göre ayarla */
        max-width: 400px; 
    }
    
    .hero-title {
        font-size: 40px; /* Mobilde okunaklı sabit boyut */
    }
    
    .hero-desc {
        max-width: 100%;
    }
}


/* --- BUTON TASARIMI --- */
.btn-hero {
    display: inline-block;
    background-color: #13394b49; /* Header ile aynı renk */
    color: #ffffff;
    padding: 15px 35px;
    border-radius: 50px; /* Yuvarlak kenarlar */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 2px solid #8c6060;


    /* --- YENİ EKLENEN KISIM (ANİMASYON İÇİN) --- */
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Hafifçe aşağıda başlasın */
    /* Görünme efekti (opacity) 1 saniye sürsün, Hover efektleri 0.3 saniye sürsün */
    transition: opacity 1s ease, transform 1s ease, background-color 0.3s, color 0.3s;
    pointer-events: none; /* Görünmezken tıklanmasın */
}

/* JavaScript bu sınıfı eklediğinde buton belirecek */
.btn-hero.visible {
    opacity: 1; /* Tam görünür */
    transform: translateY(0); /* Yerine gelsin */
    pointer-events: auto; /* Tıklanabilir olsun */
}

.btn-hero:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}



/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column; /* Alt alta dizilsin */
        text-align: center; /* Yazılar ortalansın */
        padding-top: 20px;
    }

    .hero-right {
        text-align: center; /* Mobilde yazıyı ortala */
    }

    .hero-title {
        font-size: 32px; /* Başlığı küçült */
    }
    
    .hero-logo {
        max-width: 200px; /* Mobilde logoyu biraz küçült */
        margin-bottom: 20px;
    }
}



/* === 9. DANIŞAN GÖRÜŞLERİ === */

.testimonials {
    padding: 80px 0;
    /* Hero bölümüyle aynı sakin arka plan rengi */
    background-color: #f4f7f6; 
}

.testimonials h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: #2c3e50;
}




/* === 12. SSS (AKORDEON) BÖLÜMÜ === */

.faq {
    padding: 80px 0;
    background: #e7e6e5; /* Beyaz arka plan */
}

.faq h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: #2c3e50;
}

/* SSS kutularını çok geniş olmasın diye ortalıyoruz */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-question {
    padding: 20px;
    background: #f9f9f9; /* Hafif gri soru arka planı */
    cursor: pointer; /* Tıklanabilir olduğunu gösteren imleç */
    
    /* '+' ikonunu eklemek için */
    position: relative;
    font-size: 18px;
    font-weight: 500;
}

/* Soru satırının sağına '+' işareti ekliyoruz */
.faq-question::after {
    content: '+';
    font-size: 24px;
    font-weight: bold;
    color: #4d2e81; /* Mavi renk */
    
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Cevap bölümü: JavaScript ile açılana kadar GİZLİ */
.faq-answer {
    /* Akıcı bir açılma-kapanma efekti için max-height kullanıyoruz */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    
    background: #ffffff; /* Cevap alanı beyaz */
}

.faq-answer p {
    padding: 20px;
    font-size: 16px;
    line-height: 1.7;
}

/* === AKORDEON AKTİF STİLLERİ (JS ile eklenecek) === */

/* JavaScript, bu 'active' sınıfını eklediğinde... */
.faq-item.active .faq-question::after {
    /* '+' ikonu '−' (eksi) ikonuna dönüşür */
    content: '−';
}

.faq-item.active .faq-answer {
    /* 'max-height' değerini içeriğin sığacağı bir değere çıkarırız */
    /* Bu, 'display: block' yapmaktan daha akıcıdır */
    max-height: 300px; /* Cevabınızın uzunluğuna göre artırılabilir */
}




/* =========================================
   13. İLETİŞİM & FOOTER (DÜZELTİLMİŞ)
   ========================================= */

/* =========================================
   13. İLETİŞİM & FOOTER (RESİMLİ ARKA PLAN)
   ========================================= */

.contact {
    position: relative;
    
    /* --- ARKA PLAN RESMİ VE FİLTRE --- */
    background-image: 
        /* 1. KATMAN: Koyu Mavi/Siyah Filtre (Yazılar okunsun diye) */
        linear-gradient(rgba(87, 123, 129, 0.404), rgba(85, 116, 128, 0.932)),
        /* 2. KATMAN: Sizin Resminiz */
        url('../images/iletisim5.webp');
    
    /* Resmi ekrana yay */
    background-size: cover;
    background-position: center;
    
    /* PARALLAX EFEKTİ: Resim arkada sabit durur, site üzerinden kayar */
    background-attachment: scroll; 
    
    /* İç boşluklar */
    padding: 80px 0 40px 0;
    color: #ffffff;
}

/* --- Diğer ayarlarınız aynen devam eder --- */
.contact h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #ffffff; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Başlığa gölge ekledik */
}

/* ... (Geri kalan h3, grid vb. kodlarınız aynen kalacak, onlara dokunmanıza gerek yok) ... */

.contact h3 {
    font-size: 24px;
    color: #81ecec; 
    margin-bottom: 20px;
}

/* GRID YAPISI (DÜZELTME BURADA) */
.contact-grid {
    display: flex;
    flex-wrap: wrap; /* Mobilde alt alta geçebilsin diye */
    
    /* 100px çok fazlaydı, sığmıyordu. 50px idealdir. */
    gap: 200px; 
    
    /* Elemanları yukarı hizala */
    align-items: flex-start;
    
    /* İçeriklerin ortalanmasını garantiye alalım */
    justify-content: center; 
}

.contact-info,
.contact-form {
    flex: 1;
    /* Eğer ekran çok daralırsa (mobil), genişlik en az 300px olsun */
    min-width: 300px; 
}

/* --- SOL TARAFTAKİ BİLGİLER --- */
.contact-info p {
    margin-bottom: 30px;
    color: #dfe6e9; 
    line-height: 1.6;
}

.info-item {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 15px;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item strong {
    display: block;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 5px;
}

.info-item span,
.info-item a {
    font-size: 16px;
    color: #dfe6e9;
    text-decoration: none;
}

.info-item a:hover {
    color: #81ecec;
    text-decoration: underline;
}

/* --- HARİTA --- */
.map-container {
    width: 100%;
    margin-top: 30px;
    border-radius: 8px;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,0.2); 
}

.map-container iframe {
    width: 100% !important;
    height: 350px !important; 
    display: block;
}

/* --- SAĞ TARAF: FORM TASARIMI --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #ffffff;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background-color: #ffffff; 
    border: 1px solid #ccc;
    color: #333333; 
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    /* Kutu hesaplaması hatasını önler */
    box-sizing: border-box; 
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

::placeholder {
    color: #999;
}

/* GÖNDER BUTONU */
.contact-form .cta-button {
    width: 100%;
    font-size: 18px;
    background-color: #00cec9; 
    border: none;
    color: #ffffff;
    padding: 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.contact-form .cta-button:hover {
    background-color: #01a3a4;
}

/* --- FOOTER BOTTOM --- */
.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.footer-bottom p {
    color: #b2bec3;
    font-size: 14px;
    margin: 0;
}




/* Merhaba Yazısı için Animasyon Başlangıcı */
.fade-in-text {
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Hafif aşağıda başlasın */
    transition: opacity 1.5s ease, transform 1.5s ease-out;
}

/* JavaScript bu sınıfı eklediğinde görünür olacak */
.fade-in-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Daktilo Efekti İmleci (Yanıp sönen çizgi) */
.cursor {
    display: inline-block;
    width: 2px;
    background-color: #333; /* Yazı rengin neyse o renk yapabilirsin */
    animation: blink 0.8s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}




/* === YENİ ANİMASYON TANIMI (Dosyanın en altına ekleyebilirsiniz) === */
@keyframes appearUpPhoto {
    from {
        opacity: 0; /* Başlangıçta şeffaf */
        /* Başlangıçta 30px aşağıda ve normal boyutta */
        transform: translateY(30px) scale(1); 
    }
    to {
        opacity: 1; /* Sonunda tam görünür */
        /* Sonunda orijinal yerinde ve normal boyutta */
        transform: translateY(0) scale(1);
    }
}






/* =========================================
   DEĞERLERİM BÖLÜMÜ (ARKA PLANLI VERSİYON)
   ========================================= */

.values-section {
    position: relative; /* Katmanlama için gerekli */
    padding: 80px 0;
    
    /* ARKA PLAN RESMİNİ BURADAN DEĞİŞTİREBİLİRSİNİZ */
    background-image: url('../images/değerlerimarkaplan3.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Resmi sabitler (Paralaks efekti) */
}

/* Resmin üzerine gelen Beyaz Tül (Yazıların okunması için) */
.values-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(207, 202, 202, 0.9); /* %90 oranında beyazlık */
    z-index: 1;
}

/* İçeriği (Yazıları ve Kartları) tülün üzerine çıkarma */
.values-section .container {
    position: relative;
    z-index: 2;
}




/* Giriş Metni (Intro) Tasarımı */
/* Giriş Metni (Intro) Tasarımı - GÜNCELLENMİŞ GENİŞLİK */
.values-intro {
    text-align: center;
    /* Önceki değer 800px idi, şimdi 1000px yaptık. Yazı yanlara yayılacak. */
    max-width: 1100px; 
    margin: 0 auto 40px auto; /* Ortalamak ve alttan boşluk bırakmak için */
    padding: 0 20px; /* Mobilde kenarlara yapışmaması için güvenli boşluk */
}

.values-intro h2 {
    font-size: 38px;
    color: #12273b;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

/* Başlığın altına ince dekoratif çizgi */
.values-intro h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #8151ce; /* Mavi vurgu */
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

.values-intro p {
    font-size: 20px;
    line-height: 1.8;
    color: #353131;
}

/* Izgara (Grid) Yapısı */
.values-grid {
    display: grid;
    /* Masaüstünde yan yana 3 tane sığdır */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; /* Kartlar arası boşluk */
}




/* --- KART TASARIMI (DAHA ŞEFFAF BUZLU CAM) --- */
.value-card {
    /* Şeffaflık ayarı: 0.6 yerine 0.25 yaptık (Daha saydam oldu) */
    background: rgba(255, 255, 255, 0.39); 
    
    /* Buzlu görüntü için bulanıklık miktarını artırdık */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* Kenar çizgileri cam hissi verir */
    border: 1px solid rgba(242, 223, 245, 0.664);
    
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    
    /* Hafif gölge ile derinlik katalım */
    box-shadow: 0 8px 32px 0 rgba(14, 19, 83, 0.226);
    
    transition: all 0.4s ease;
}

/* Kartın üzerine gelince (Hover) */
.value-card:hover {
    transform: translateY(-10px);
    /* Üzerine gelince biraz daha matlaşsın ki okuması kolaylaşsın */
    background: rgba(255, 255, 255, 0.199); 
    box-shadow: 0 15px 45px rgba(14, 19, 83, 0.226);
    border-color: #ffffff;
}





/* İkon Kutusu */
.value-card .icon-box {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px auto;
    background-color: #fff0fd; /* Çok açık mavi zemin */
    color: #8151ce; /* İkon rengi (Mavi) */
    
    border-radius: 50%; /* Yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Kartın üzerine gelince ikon rengi değişsin */
.value-card:hover .icon-box {
    background-color: #8151ce;
    color: #ffffff;
}

.value-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.value-card p {
    font-size: 15px;
    color: #441a1a;
    line-height: 1.6;
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2'li olsun */
    }
}

@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }
    .values-intro h2 {
        font-size: 28px;
    }
    .values-section {
        padding: 60px 0;
    }
}



/* =========================================
   DANIŞAN YORUMLARI (KOLAJ VERSİYONU)
   ========================================= */


.testimonials {
    position: relative; /* Katmanlama için şart */
    padding: 50px 0;    /* Üstten ve alttan boşluk */
    text-align: center;
    
    /* --- ARKA PLAN RESMİ AYARLARI --- */
    background-image: url('../images/yorumlararkaplan.webp'); 
    
    /* Resmi arkaya sabitler (Paralaks Efekti) */
    background-attachment: fixed; 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Resmin üzerine beyaz tül (Yazı ve Kolaj net görünsün diye) */
.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* %90 Beyazlık (Resim çok hafif arkada hissedilir) */
    background-color: rgba(255, 255, 255, 0.788); 
    z-index: 1;
}

/* İçeriği tülün üzerine çıkarma ve GENİŞLİK AYARI */
.testimonials .container {
    position: relative;
    z-index: 2;
    
    /* ÖNEMLİ DÜZELTME: */
    /* %95 yerine sabit bir üst sınır (px) koyuyoruz. */
    /* Böylece zoom out yapınca diğerleri gibi bu da küçülür. */
    max-width: 1300px !important; 
    width: 100% !important;
    
    padding: 0 10px; /* Kenarlardan hafif boşluk */
    margin: 0 auto;  /* Ortala */
}

/* Kolaj Resminin Ayarları */
.collage-img {
    /* Resmi kutuya tamamen yay */
    width: 100%; 
    max-width: 100%; /* Sınırı kaldırdık */
    height: auto; 
    
    border-radius: 8px; /* Hafif yuvarlak köşeler */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Hafif gölge */
    
    display: block; /* Blok eleman olsun */
    margin: 0 auto; /* Ortala */
}


/* =========================================
   BLOG BÖLÜMÜ (MODERN KARTLAR)
   ========================================= */

.blog-preview {
    position: relative;
    width: 100%;
    padding: 60px 0; /* İdeal yükseklik */
    
    /* --- ARKA PLAN RESMİ --- */
    background-image: url('../images/yorumlararkaplan2.webp'); 
    
    /* Bu kod resmi ekranın arkasına "çiviler". */
    /* Bölüm uzasa da resim arkada sabit kalır, asla bitmez. */
    background-attachment: fixed; 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Beyaz Tül (Overlay) - Yazıların okunması için */
.blog-preview::before {
    content: '';
    position: absolute;
    /* Dört köşeden çekiştirerek kaplamayı garantiye alıyoruz */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    background-color: rgba(231, 225, 224, 0.829); /* Beyazlık oranı */
    z-index: 1;
}

/* İçeriği tülün üzerine çıkarma */
.blog-preview .container {
    position: relative;
    z-index: 2;
}

.blog-preview h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #2c3e50;
}

.blog-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center; /* Kartları ortala */
}

/* KART YAPISI */
.blog-card {
    background: #ffffff;
    border-radius: 15px; /* Yumuşak köşeler */
    overflow: hidden; /* Resmin taşmasını engelle */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Modern gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    flex: 1;
    min-width: 300px; /* Mobilde çok küçülmesin */
    max-width: 500px; /* Çok da büyümesin */
    border: 1px solid #eee;
}

/* Kartın üzerine gelince havaya kalksın */
.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* RESİM ALANI */
.blog-img-box {
    width: 100%;
    height: 250px; /* Sabit yükseklik (Resimler eşit dursun) */
    overflow: hidden;
}

.blog-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya kırparak sığdır (Ezilmez) */
    transition: transform 0.5s ease;
}

/* Kartın üzerine gelince resim hafif yakınlaşsın (Zoom efekti) */
.blog-card:hover .blog-img-box img {
    transform: scale(1.05);
}

/* İÇERİK ALANI */
.blog-card-content {
    padding: 25px;
}

.blog-date {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600;
}

.blog-card-content h3 {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-card-content p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Devamını Oku Linki */
.read-more {
    text-decoration: none;
    color: #5905a8;
    font-weight: bold;
    font-size: 15px;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #640491;
    text-decoration: underline;
}





/* =========================================
   BLOG "TÜM YAZILARI GÖR" BUTONU DÜZELTME
   ========================================= */

/* Butonu saran kutu (Ortalamak için) */
.blog-footer {
    text-align: center;
    margin-top: 50px; /* Yazılarla buton arası boşluk */
    margin-bottom: 20px;
}

/* Butonun Kendisi */
.btn-blog-all {
    display: inline-block;
    
    /* Hero bölümündeki Bordo renk */
    background-color: #1448557a; 
    color: #ffffff !important; /* Yazı rengi zorla beyaz */
    
    padding: 15px 40px;
    border-radius: 50px; /* Yuvarlak kenarlar */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    
    /* Kenarlık */
    border: 2px solid #9c8d92;
    
    /* Geçiş Efekti */
    transition: all 0.3s ease;
    
    /* Hafif gölge */
    box-shadow: 0 4px 15px rgba(109, 11, 43, 0.3);
}

/* Mouse ile üzerine gelince */
.btn-blog-all:hover {
    background-color: transparent; /* İçi boşalsın */
    color: #6d0b2b !important; /* Yazı rengi bordo olsun */
    transform: translateY(-3px); /* Hafifçe yukarı zıplasın */
}




/* =========================================
   DAKTİLO İMLECİ (CURSOR) TAMİRİ
   ========================================= */

/* 1. Ana metin kutusu ve içindeki her şey */
#typewriter-text,
#typewriter-text * {
    color: #ffffff !important;       /* Rengi kesinlikle beyaz yap */
    text-shadow: none !important;    /* Olası siyah gölgeleri kaldır */
    background: none !important;     /* Arka plan rengini temizle */
    -webkit-text-fill-color: #ffffff !important;
}

/* 2. Yaygın kütüphanelerin (Typed.js vb.) imleç sınıfları */
.typed-cursor, 
.ti-cursor,
span.cursor {
    color: #ffffff !important;
    opacity: 1; /* Görünürlük */
    font-weight: 100 !important; /* Eğer çok kalınsa incelt */
}

/* 3. Eğer imleç CSS ile "border-right" olarak yapılmışsa */
#typewriter-text {
    border-right-color: #ffffff !important;
}

/* 4. Eğer imleç bir "::after" elemanıysa */
#typewriter-text::after {
    color: #ffffff !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* =========================================
   10. HİZMET ALANLARI (FİNAL VE TEK PARÇA)
   ========================================= */

/* --- ANA BÖLÜM AYARLARI --- */
.services-preview {
    position: relative;
    background-image: url('../images/arkaplan4.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed;
    padding-top: 100px;    /* Başlık yukarı çıkar (Eskisi 200px idi) */
    padding-bottom: 200px;
    border: none !important;
}

/* Koyu Filtre */
.services-preview .overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.relative-content {
    position: relative;
    z-index: 2;
}

.services-preview h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin-bottom: 60px;
    text-align: center;
    
    /* GÜNCELLEME: Başlık Boyutu */
    font-size: 38px !important; /* Eski hali muhtemelen 30-36px civarıydı */
    font-weight: 700; /* Biraz daha kalın olsun */
    letter-spacing: 1px; /* Harfler arası hafif boşluk */
}




/* --- GRID (KUTULARIN DİZİLİMİ) --- */
.services-grid {
    display: grid; /* Flex değil Grid kullanıyoruz */
    grid-template-columns: 1fr 1fr; /* Yan yana 2 kutu */
    gap: 30px;
}

/* --- KUTU TASARIMI (BUZLU CAM) --- */
.service-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    min-height: 200px;
    padding: 20px;
    
    /* Buzlu Cam Efekti */
    background: rgba(255, 255, 255, 0.15) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    
    cursor: pointer;
    transition: all 0.4s ease;
    
    /* Yazı ayarları */
    text-decoration: none;
    color: #ffffff;
}

.service-card h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff !important;
}

.click-hint {
    font-size: 12px;
    color: #ffd700;
}

/* Hover Efekti */
.service-card:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* --- MOBİL UYUM --- */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }
}

/* --- AÇILAN DETAY KUTUSU (POP-UP ALANI) --- */
.service-detail-container {
    /* JS ile kontrol edileceği için CSS'te display:none yazmıyoruz */
    
    background: rgba(255, 255, 255, 0.15); /* Buzlu cam */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    
    padding: 40px;
    color: #ffffff;
    max-width: 900px;
    margin: 0 auto;
    
    animation: fadeIn 0.5s ease;
}

/* Detay İçerik Başlığı */
.service-content-item h3 {
    text-align: center;
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}

/* Listeler */
.service-list {
    list-style: none;
    padding: 0;
}

.service-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #f0f0f0;
}

.service-list li::before {
    content: "•";
    color: #ffd700;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: -6px;
}

/* Geri Dön Butonu */
.btn-service-back {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: 0.3s;
    font-family: inherit;
    font-size: 14px;
}

.btn-service-back:hover {
    background: #ffffff;
    color: #6d0b2b;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}




/* =========================================
   MOBİL HEADER (ALT ALTA RAHAT DÜZEN)
   ========================================= */

@media (max-width: 900px) { /* Tablet ve Telefonlarda devreye girer */
    
    /* 1. Header içindekileri (Logo ve Menü) alt alta diz */
    header .container {
        flex-direction: column !important; /* Yan yana değil, alt alta */
        padding: 10px 0 !important;
        height: auto !important; /* Yükseklik sınırlamasını kaldır */
    }

    /* 2. Logo Alanı */
    .logo-link {
        margin-bottom: 10px; /* Menü ile arasına boşluk bırak */
        width: 100%;
        justify-content: center; /* Logoyu tam ortala */
    }
    
    .brand-name {
        font-size: 18px !important; /* İsim rahatça okunsun */
        white-space: nowrap; 
    }

    /* 3. Menü Alanı */
    .nav-menu {
        justify-content: center; /* Linkleri ortala */
        flex-wrap: wrap; /* Sığmazsa nazikçe alt satıra geçsin */
        gap: 15px !important; /* Linkler arası boşluk */
        width: 100%;
        padding-bottom: 5px;
    }
    
    .nav-menu li a {
        font-size: 13px !important; /* Link boyutları ideal */
        display: inline-block;
        padding: 2px 5px; /* Tıklamayı kolaylaştır */
    }
}