/* ============================================= */
/* FONT İÇE AKTARMA (HER ZAMAN EN ÜSTTE OLMALI)  */
/* ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&display=swap');
















/* ============================================= */
/* TEMEL AYARLAR VE DEĞİŞKENLER (VARIABLES)      */
/* ============================================= */


/* Herhangi bir elementi görünmez yapmak için kullanılacak yardımcı sınıf */
.gizli {
    display: none !important;
}












:root {
    /* === Renkler === */
    --arkaplan-gradient: linear-gradient(to bottom right, #0066FF, #92A8FF);
    --vurgu-rengi: #ddff3a;
    --acik-metin-rengi: #FFFFFF;
    --koyu-metin-rengi: #222222;
















    /* YENİ EKLENEN SATIR */
    --header-vurgu-rengi: #0066FF; /* Header'daki linklerin vurgu rengi için */
   
    /* === Fontlar === */
    --ana-font-ailesi: 'Montserrat', sans-serif;
















    /* === Font Ağırlıkları === */
    --agirlik-orta: 500;  /* Medium */
    --agirlik-kalin: 700;  /* Bold */
    --agirlik-en-kalin: 900; /* Black */
}
















/* ============================================= */
/* GENEL SIFIRLAMA VE SAYFA STİLLERİ             */
/* ============================================= */
















/* Tarayıcı varsayılanlarını sıfırlıyoruz. Bu, tüm elementleri kapsar. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
















body {
    font-family: var(--ana-font-ailesi);
    font-weight: var(--agirlik-orta);
    background-color: var(--acik-metin-rengi);
    color: var(--koyu-metin-rengi);
}










h1, h2, h3, h4, h5, h6 {
    font-family: var(--ana-font-ailesi);
}
















a {
    text-decoration: none;
    color: inherit;
}
















ul {
    list-style: none;
}/* ============================================= */
/* HEADER STİLLERİ - GÜNCELLENMİŞ                */
/* ============================================= */
header {
    /* DEĞİŞİKLİK: Arka plan rengi isteğine göre güncellendi */
    background-color: #ffffff;
    /* DEĞİŞİKLİK: Logo gibi link olmayan yazıların da rengini ayarlar */
    color: #e5e7eb;


    padding: 15px 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Header içindeki logo görselinin boyutları */
header img {
    /* Logonun yüksekliğini buradan ayarlayabilirsiniz */
    height: 50px;
   
    /* Genişliğin otomatik ayarlanarak oranın korunmasını sağlar */
    width: auto;
}
/* Header içindeki navigasyon linkleri */
header nav ul {
    display: flex;
    gap: 40px;
}


header nav a {
    /* DEĞİŞİKLİK: Yazı rengi isteğine göre güncellendi */
    color: #000000;
   
    font-weight: var(--agirlik-kalin);
    transition: all 0.3s ease;
    display: inline-block;
}


header nav a:hover {
    /* DEĞİŞİKLİK: Vurgu rengi eklendi ve efekt güncellendi */
    color: #3b3b3b; /* Vurgu rengi (beyaz) */
    opacity: 1; /* Soluklaştırmak yerine daha net hale getirildi */
    transform: scale(1.1) translateY(-3px);
}
/* ============================================= */
/* HERO BÖLÜMÜ STİLLERİ - VİDEOLU VERSİYON        */
/* ============================================= */
















#hero {
    height: 650px; /* Ekran yüksekliğini kaplasın */
    color: var(--acik-metin-rengi);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
































/* Şeffaf Katman (Overlay) */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* YARI ŞEFFAF KATMAN - Rengi (ilk 3 değer) ve şeffaflığı (son değer) buradan ayarla */
    background-color: #223859;
    z-index: 2;
}
















/* Metin ve Buton İçeriği */
.hero-content {
    position: relative;
    z-index: 3; /* İçeriğin en üstte olmasını sağlar */
    padding: 0 20px;
}
















/* Logo, h1, p ve butonlar için olan diğer stillerimiz */
.hero-logo {
    height: 120px;
    margin-bottom: 40px;
}
















#hero h1 {
    font-size: 35pt;
    font-weight: var(--agirlik-en-kalin);
    max-width: 900px;
    line-height: 1.4;
}
















.hero-subtitle { /* Eski p1 için yeni kural */
    font-size: 20pt;
    font-weight: var(--agirlik-kalin);
    max-width: auto;
    margin-top: 20px;
}
















.hero-description { /* Eski p2 için yeni kural */
    font-size: 12pt;
    font-weight: var(--agirlik-orta);
    max-width: 850px;
    margin-top: 20px;
}
















#hero .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
















/* BUTONLARLA İLGİLİ KODLARIN AYNI KALIYOR */
.button {
    display: inline-block;
    width: 200px;
    padding: 10px 0;
    text-align: center;
    border-radius: 50px;
    font-weight: var(--agirlik-kalin);
    margin: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
















.button:hover {
    transform: translateY(-3px);
}
















.button-primary {
    background-color: #f9f9f9;
    color: #000000;
}
















.button-secondary {
    background-color: transparent;
    color: var(--acik-metin-rengi);
    border: 2px solid var(--acik-metin-rengi);
}
/* ============================================= */
/* ANİMASYON TANIMLAMA (SADECE MOBİLDE KULLANILACAK) */
/* ============================================= */
@keyframes hizmetlerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}








/* ============================================= */
/* HİZMETLER BÖLÜMÜ - MASAÜSTÜ VARSAYILAN (GRID) */
/* ============================================= */
#hizmetler {
    padding: 80px 40px;
    background-color: #f9f9f9;
}








#hizmetler h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: var(--agirlik-en-kalin);
    margin-bottom: 60px;
}








.hizmetler-listesi {
    display: grid;
    /* Kartları ekrana sığacak şekilde otomatik ayarlar (en az 300px genişlik) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto;
}

















/* Kartların üzerine gelince animasyonun durması için (Masaüstünde geçerli değil ama burada dursun) */
.hizmetler-listesi:hover {
    animation-play-state: paused;
}
















/* ============================================= */
/* HİZMET KARTI STİLLERİ (İKİ GÖRÜNÜM İÇİN ORTAK) */
/* ============================================= */
.hizmet-karti {
    height: 350px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: transform 0.3s ease;
}








.hizmet-karti:hover {
    transform: translateY(-5px);
}








.hizmet-karti img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
    transition: transform 0.4s ease;
}








.hizmet-karti:hover img { transform: scale(1.1); }








.kart-icerik {
    position: absolute; bottom: 0; left: 0;
    width: 100%; z-index: 2; padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: var(--acik-metin-rengi);
}








.kart-icerik h3 {
    font-size: 1.2rem;
    font-weight: var(--agirlik-kalin);
    margin-bottom: 5px;
}








.kart-icerik p {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}
















/* ========================================================== */
/* MOBİL GÖRÜNÜM (SLIDER) - 992px VE ALTINDA GEÇERLİ OLACAK */
/* ========================================================== */
@media (max-width: 992px) {
   
    #hizmetler {
        padding: 80px 0; /* Sağ ve sol boşluğu sıfırla */


    }








    /* MASAÜSTÜNDEKİ GRID'İ İPTAL ET, SLIDER'I BAŞLAT */
    .hizmetler-listesi {
        display: flex; /* grid yerine flex yap */
        width: fit-content;
        max-width: none; /* max-width'i sıfırla */
        margin: 0;
       
        /* Animasyonu sadece bu ekran boyutunda başlat */
        animation: hizmetlerScroll 20s linear infinite;
    }
   
    /* MOBİLDE KOPYA KARTLARI GÖSTER */
    .hizmetler-listesi .hizmet-karti:nth-child(n+6) {
        display: block; /* veya flex */
    }
   
    /* Kenarlarda solma efekti için maskeyi sadece mobilde ekle */
    .hizmetler-slider-container {
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }








    /* Kartların slider içindeki boyutlarını ayarla */
    .hizmet-karti {
        flex: 0 0 280px; /* Sabit genişlik ver */
        margin: 0 15px; /* Kartlar arasına boşluk koy */
    }
}
/* ============================================= */
/* PORTFOLYO BÖLÜMÜ - ANİMASYONLU VERSİYON       */
/* ============================================= */
/* Bu kural, Portfolyo bölümünün üstündeki ve altındaki ana boşluğu ayarlar */
#portfolyo {
    padding: 50px 80px;
}
/* Bu kural, "Portfolyo" başlığını ortalar, boyutlandırır ve altındaki galeriyle arasını açar */
#portfolyo h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: var(--agirlik-en-kalin);
    margin-bottom: 100px;
}
/* Animasyonları Tanımlama (Keyframes) */
@keyframes scrollRight {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* İçeriğin yarısı kadar sola kaydır */
}


@keyframes scrollLeft {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); } /* İçeriğin yarısını sağa kaydırarak başlangıca dön */
}


/* Ana Slider Alanı */
.portfolyo-slider {
    display: flex;
    flex-direction: column;
    gap: 30px; /* İki satır arasına boşluk koy */
    margin-top: 50px;
    /* Slider'ın kenarlarında gradient bir solma efekti oluşturmak için (İsteğe bağlı ama şık durur) */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}


/* Her Bir Kayan Satır */
.portfolyo-satir {
    display: flex; /* Görselleri yan yana diz */
    width: fit-content; /* Genişliği içindeki görseller kadar olsun */
}


/* Animasyonları Uygulama */
.satir-sag {
    /* scrollRight animasyonunu 40 saniyede, sabit hızda, sonsuz döngüde uygula */
    animation: scrollRight 40s linear infinite;
}


.satir-sol {
    /* scrollLeft animasyonunu 40 saniyede, sabit hızda, sonsuz döngüde uygula */
    animation: scrollLeft 40s linear infinite;
}


/* Portfolyo öğesi için eski stilimiz aynı kalabilir, sadece margin ekleyelim */
.portfolyo-ogesi {
    width: 300px; /* Genişlik zaten 300px, bu kalıyor */
    height: 150px; /* BU SATIRI EKLE: Yüksekliği 150px olarak sabitle */
    flex-shrink: 0;
    margin: 0 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.portfolyo-ogesi img {
    width: 100%;
    height: 100%; /* Konteynerin tamamını doldurmasını sağlar */
    object-fit: cover; /* Bu satır görselin oranını korur ve bozulmasını engeller */
    display: block;
}


/* Portfolyo bölümündeki buton (değişiklik yok) */
#portfolyo .button {
    display: block;
    width: 200px; /* Genişliğin içeriğe göre otomatik ayarlanmasını sağla */
    padding: 10px 20px; /* İç boşluğu yeniden ayarla (üst/alt 15px, sağ/sol 50px) */
    margin: 60px auto 0 auto; /* Bu satır ortalamak için kalıyor */
}
/* ============================================= */
/* ÖZGEÇMİŞ SAYFASI ÖZEL STİLLERİ                */
/* ============================================= */

/* --- 1. Özgeçmiş Hero Bölümü --- */
.ozgecmis-hero {
    padding: 100px 20px;
    background-color: #223859; /* Koyu Lacivert */
    text-align: center;
    color: #ffffff;
}

.ozgecmis-hero h1 {
    font-size: 3rem;
    font-weight: var(--agirlik-en-kalin);
    margin-bottom: 20px;
}

.ozgecmis-hero h2 {
    font-size: 1.5rem;
    color: var(--vurgu-rengi); /* Neon sarı/yeşil */
    margin-bottom: 30px;
    font-weight: var(--agirlik-orta);
}

.ozgecmis-aciklama {
    max-width: 800px;
    margin: 0 auto 40px auto;
    line-height: 1.8;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* PDF Butonu Özelleştirme */
.btn-pdf {
    background-color: var(--vurgu-rengi);
    color: #223859;
    font-weight: 700;
    padding: 15px 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-pdf:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(221, 255, 58, 0.3);
}

/* ============================================= */
/* YENİ PROFESYONEL YOLCULUK (TIMELINE) STİLLERİ */
/* ============================================= */


.yolculuk-ozet {
    text-align: center;
    max-width: 800px;
    margin: 80px auto 80px auto;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    font-weight: var(--agirlik-orta);
}

/* Timeline Ana Konteyneri */
.timeline-listesi {
    max-width: 700px;
    margin: 0 auto;
    border-left: 2px solid #eaeaea; /* Klasik düz çizgi */
    padding-left: 50px;
    position: relative;
    left: 80px; /* Yıllar sol tarafta kalsın diye sağa itiyoruz */
}

/* Her Bir Deneyim Kartı */
.timeline-kart {
    position: relative;
    margin-bottom: 70px;
    padding-bottom: 20px;
}

/* Sol Tarafa Asılı Duran Büyük Yıllar */
.buyuk-yil {
    position: absolute;
    left: -220px; /* Çizginin dışına, sola taşıyoruz */
    top: -5px;
    width: 140px;
    text-align: right;
    font-size: 1.8rem;
    font-weight: var(--agirlik-en-kalin);
    color: #223859;
}

/* Timeline Noktaları (Modern Halka) */
.timeline-kart::before {
    content: '';
    position: absolute;
    left: -59px; /* 50px padding + 8px kendi yarısı + 1px border yarısı */
    top: 5px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 4px solid #223859;
    border-radius: 50%;
    transition: transform 0.4s ease, background-color 0.4s ease;
}

/* Hover Efekti: Nokta Dolgulu Hale Gelir */
.timeline-kart:hover::before {
    background-color: #223859;
    transform: scale(1.3);
}

/* İçerik Tipografisi */
.timeline-icerik h3 {
    font-size: 1.6rem;
    color: #223859;
    margin-bottom: 5px;
    font-weight: var(--agirlik-kalin);
}

.timeline-icerik h4 {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 20px;
    font-weight: var(--agirlik-orta);
}

/* Etki Odaklı Liste (Bullet Points) */
.etki-listesi {
    margin-bottom: 25px;
}

.etki-listesi li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
}

.etki-listesi li::before {
    content: '→'; /* Sıkıcı noktalar yerine zarif bir ok */
    position: absolute;
    left: 0;
    top: 0;
    color: #223859;
    font-weight: bold;
}

/* Katkı Alanı Etiketleri (Micro-Tags) */
.katki-alani {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.etiket-baslik {
    font-size: 0.9rem;
    color: #223859;
    font-weight: var(--agirlik-kalin);
    margin-right: 5px;
}

.katki-etiket {
    font-size: 0.8rem;
    color: #666;
    border: 1px solid #dcdcdc;
    padding: 6px 16px;
    border-radius: 30px;
    background-color: #fbfbfb;
    transition: all 0.3s ease;
}

.timeline-kart:hover .katki-etiket {
    border-color: #223859;
    color: #223859;
    background-color: #f0f4f8;
}

/* --- Mobil Uyumluluk --- */
@media (max-width: 992px) {
    .timeline-listesi {
        left: 0; /* Mobilde ortalamayı sıfırla */
        padding-left: 30px;
        margin-left: 20px;
    }
    
    .buyuk-yil {
        position: static; /* Mobilde yılı sol sütundan kurtar, içeriğin üstüne koy */
        display: block;
        text-align: left;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }
    
    .timeline-kart::before {
        left: -39px; /* Noktayı mobil padding'e göre hizala */
        top: 0;
    }
}

/* ============================================= */
/* YENİ PREMIUM DEĞER ÜRETİMİ BÖLÜMÜ             */
/* ============================================= */

.premium-uzmanlik {
    padding: 100px 20px;
    background-color: #f7f7f7; 
}

.uzmanlik-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.uzmanlik-header h2 {
    font-size: 2.5rem;
    color: #223859;
    margin-bottom: 20px;
    font-weight: var(--agirlik-en-kalin);
}

.uzmanlik-header p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.7;
}

/* 4 Kart için 2x2 Şık Grid Yapısı */
.premium-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Kart Tasarımı */
.premium-card {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eaeaea;
    transition: all 0.4s ease;
}

/* Hover Efekti: Kart hafif yukarı kalkar, gölge büyür, çerçeve lacivert olur */
.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(34, 56, 89, 0.08);
    border-color: #223859;
}

/* Arka Plandaki Büyük Numaralar (01, 02...) */
.card-number {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 5rem;
    font-weight: var(--agirlik-en-kalin);
    color: #f2f2f2; /* Başlangıçta çok silik */
    transition: color 0.4s ease;
    z-index: 1;
    user-select: none;
}

.premium-card:hover .card-number {
    color: rgba(34, 56, 89, 0.06); /* Kartın üzerine gelince hafif laciverte çalar */
}

/* Kart İçerik (Z-index ile numaranın üstünde tutuyoruz) */
.premium-card h3 {
    font-size: 1.6rem;
    color: #223859;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    font-weight: var(--agirlik-kalin);
}

.premium-card p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* Micro Tags (Hap Şeklindeki Etiketler) */
.micro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.micro-tags span {
    background-color: #f0f4f8; /* Çok uçuk mavi/gri */
    color: #223859;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: var(--agirlik-kalin);
    transition: all 0.3s ease;
}

/* Hover'da Tag'ler Lacivert Olur */
.premium-card:hover .micro-tags span {
    background-color: #223859;
    color: #ffffff;
}

/* --- Mobil Uyumluluk --- */
@media (max-width: 992px) {
    .premium-grid {
        grid-template-columns: 1fr; /* Mobilde alt alta dizer */
        gap: 25px;
    }
    .uzmanlik-header h2 {
        font-size: 2rem;
    }
    .premium-card {
        padding: 40px 30px;
    }
}

/* --- 4. Eğitim Bölümü --- */
.egitim-bolumu {
    padding: 80px 20px;
    background-color: #ffffff;
    text-align: center;
}

.egitim-item {
    margin-bottom: 40px;
}

.egitim-okul {
    font-size: 1.4rem;
    color: #223859;
    font-weight: var(--agirlik-kalin);
    margin-bottom: 5px;
}

.egitim-bolum {
    color: #666;
    font-size: 1.1rem;
}

/* --- Mobil Uyumluluk --- */
@media (max-width: 992px) {
    .uzmanlik-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
        gap: 20px;
    }
    
    .ozgecmis-hero h1 { font-size: 2.2rem; }
    .ozgecmis-hero h2 { font-size: 1.2rem; }
    
    .deneyim-listesi::before { left: -15px; } /* Çizgiyi mobilde biraz sola çek */
    .deneyim-karti { 
        padding-left: 20px; 
        border-left: none; /* Mobilde border'ı kaldır, noktayı kullan */
        margin-left: 10px;
    }
    .deneyim-karti::before {
        left: -33px; /* Noktayı çizgiye hizala */
    }
}
    /* İleride daha şık bir alt çizgi efekti ekleyebiliriz */
}/* ============================================= */
/* ÇALIŞMA SÜRECİ BÖLÜMÜ - YENİ TASARIM         */
/* ============================================= */
















#surec {
    /* Üst ve alttan 100px, sağ ve soldan 20px iç boşluk ver */
    padding: 70px 20px;
    background-color: var(--acik-metin-rengi);
}
















#surec h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: var(--agirlik-en-kalin);
    margin-bottom: 60px;
}
















.surec-listesi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
















.surec-karti {
    background-color: var(--acik-metin-rengi);
    color: var(--koyu-metin-rengi);
    padding: 40px 30px;
    text-align: center;
    border-radius: 16px; /* DEĞİŞİKLİK: Tasarımdaki gibi daha yuvarlak köşeler */
   
    /* DEĞİŞİKLİK: Belirgin gölge yerine çok daha zarif ve ince bir kenarlık */
    border: 1px solid #EAEAEA;
   
    transition: all 0.3s ease; /* Hover efekti için geçiş ekledik */
}
















/* Üzerine gelince kart hafifçe yukarı kalksın ve daha belirgin bir gölgeye sahip olsun */
.surec-karti:hover {
    transform: translateY(-5px);
    border-color: transparent; /* Kenarlığı kaldır */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* Hafif bir gölge ekle */
}
















.surec-karti img {
    height: 80px; /* DEĞİŞİKLİK: İkonları tasarımdaki gibi büyüttük */
    margin-bottom: 30px;
}
















.surec-karti h3 {
    font-size: 1.2rem; /* Başlıkları biraz büyüttük */
    font-weight: var(--agirlik-kalin);
    margin-bottom: 15px;
}
















.surec-karti p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #223859;
}
/* ================================================================= */
/* YENİ FOOTER TASARIMI - MİNİMAL VE GENİŞ (FİNAL)                   */
/* ================================================================= */

footer#iletisim {
    background-color: #f7f7f7;
    color: #000000;
    padding: 80px 20px 30px 20px; /* Üstten ve alttan boşluklar */
    text-align: center;
}

.yeni-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Elemanlar arası boşluk */
}

/* --- ANA METİN ALANI --- */
.birlikte-calisalim {
    width: 100%;
    display: flex;
    justify-content: center;
}

.birlikte-calisalim p {
    line-height: 1.8;
    font-size: 1.1rem;
    opacity: 0.8;
    color: #000;
    
    /* Yazıyı yanlara yaydık */
    max-width: 1000px; 
    margin: 0 auto;
}

/* --- BUTONLAR --- */
.iletisim-butonlari-yeni {
    display: flex;
    justify-content: center;
    width: 100%;
}

.buton-grup img {
    height: 55px;
    transition: transform 0.3s ease;
}

.buton-grup a:hover img {
    transform: scale(1.05);
}

/* --- SOSYAL MEDYA --- */
.footer-sosyal-medya h4 {
    font-size: 1.2rem;
    font-weight: var(--agirlik-kalin);
    margin-bottom: 25px;
    opacity: 0.9;
    color: #000000;
}

.sosyal-ikonlar {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.sosyal-ikonlar img {
    height: 35px;
    transition: opacity 0.3s ease;
}

.sosyal-ikonlar a:hover img {
    opacity: 0.7;
}

/* --- COPYRIGHT --- */
.copyright {
    font-size: 0.85rem;
    opacity: 0.5;
    margin-top: 50px; /* Üstten biraz ayırdık */
    width: 100%;
    padding-top: 20px;
    /* İstersen çizgi için aşağıdaki satırı kullanabilirsin */
    /* border-top: 1px solid rgba(0,0,0,0.05); */
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 576px) {
    .birlikte-calisalim p {
        font-size: 1rem;
        padding: 0 10px;
    }
}
/* ============================================= */
/* HERO BÖLÜMÜ LOGO STİLİ                        */
/* ============================================= */
















.hero-logo {
    height: 180px; /* Logonun yüksekliğini buradan ayarlayabilirsin */
    margin-bottom: 50px; /* Logonun altındaki başlıkla arasına boşluk koyar */
}/* ============================================= */
/* BAŞA DÖN BUTONU STİLLERİ (GÜNCELLENMİŞ)       */
/* ============================================= */
.basa-don-buton {
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 1000;
    background-color: var(--acik-metin-rengi);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
















.basa-don-buton.goster {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
















/* Butonun içindeki PNG ikonun boyutunu ayarlayalım */
.basa-don-buton img {
    width: 50px; /* İkonun genişliği */
    height: auto;
    transition: transform 0.3s ease;
}/* Butonun üzerine gelince içindeki ikon büyüsün */
.basa-don-buton:hover img {
    transform: scale(1.2); /* İkonu %20 büyüt */
}
















/* "Başa Dön" yazısını oluşturup başlangıçta gizleyelim */
.basa-don-buton::after {
    content: 'Başa Dön'; /* Yazı içeriğini oluştur */
    position: absolute; /* Butona göre konumlandır */
    right: 100%; /* Butonun tam solunda başlasın */
    margin-right: 15px; /* Butonla arasına 15px boşluk bırak */
   
    /* Yazı kutusunun stilleri */
    background-color: #333; /* Koyu gri arka plan */
    color: white; /* Beyaz yazı */
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    white-space: nowrap; /* Yazının tek satırda kalmasını sağla */
   
    /* Başlangıçta gizli olsun */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
















/* Butonun üzerine gelince "Başa Dön" yazısı görünsün */
.basa-don-buton:hover::after {
    opacity: 1;
    visibility: visible;
}
/* ============================================= */
/* GENEL SAYFA İÇERİK STİLİ                      */
/* ============================================= */
.sayfa-icerik {
    /* İçeriğin sayfanın ortasında daha dar bir alanda durmasını sağla */
    max-width: 1200px; /* Tasarımına göre bu genişliği değiştirebilirsin */
    margin: 0 auto; /* Konteyneri yatayda ortala */




    /* Header ve Footer ile arasına boşluk koy */
    padding: 120px 20px;
}


.sayfa-icerik img {
    width: 100%; /* Resmin konteynere sığmasını sağla */
    height: auto;
}


/* ============================================= */
/* RESPONSIVE TASARIM & MOBİL MENÜ STİLLERİ      */
/* ============================================= */








/* 1. Hamburger Menü Butonunun Stilleri */
.hamburger-menu {
    display: none; /* MASAÜSTÜNDE GİZLİ OLSUN */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Menünün üzerinde kalsın */
}








.hamburger-menu span {
    width: 30px;
    height: 3px;
    background-color: var(--koyu-metin-rengi);
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}








/* 2. Hamburger Menü "Açık" (X) Animasyonu */
.hamburger-menu.aktif span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}








.hamburger-menu.aktif span:nth-child(2) {
    opacity: 0;
}








.hamburger-menu.aktif span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}
















/* 3. KIRILMA NOKTASI: EKRAN 992px'DEN DAR OLDUĞUNDA... */
@media (max-width: 992px) {








    /* Header'daki boşlukları mobil için azaltalım */
    header {
        padding: 15px 30px;
    }








    /* Hamburger menüyü göster */
    .hamburger-menu {
        display: flex;
    }








    /* Normal navigasyon menüsünü gizle ve mobil için yeniden konumlandır */
    header nav {
        /* Başlangıçta gizli olsun ve tıklandığında görünsün diye display:none kaldırıldı */
        position: absolute;
        top: 72px; /* Header'ının yüksekliği kadar. (padding dahil) */
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 1000;
       
        /* ÖNEMLİ: Menünün yumuşak açılması için */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }








    /* JavaScript ile .nav-aktif sınıfı eklendiğinde menüyü göster */
    header nav.nav-aktif {
       max-height: 300px; /* Menünün açıldığında kaplayacağı maksimum yükseklik */
    }








    /* Menü linklerini alt alta diz */
    header nav ul {
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 0; /* Aradaki boşluğu sıfırla */
    }








    header nav li {
        width: 100%;
        padding: 20px 0; /* Tıklama alanını genişlet */
        border-bottom: 1px solid #f0f0f0;
    }








    header nav li:last-child {
        border-bottom: none; /* Son elemanın alt çizgisini kaldır */
    }
}/* ============================================= */
/* HERO BÖLÜMÜ - MOBİL UYUMLULUK                 */
/* ============================================= */








/* --- Tablet Boyutu (768px ve altı) --- */
@media (max-width: 768px) {
    #hero {
        /* Yüksekliği mobil cihazlar için biraz azaltalım */
        height: 600px;
    }








    .hero-logo {
        height: 150px; /* Logoyu küçültelim */
        margin-bottom: 60px;
    }








    #hero h1 {
        font-size: 2.5rem; /* 35pt yerine daha esnek bir birim kullanalım */
        line-height: 1.3;
    }








    .hero-subtitle {
        font-size: 1.4rem; /* 20pt'den küçültüldü */
    }








    .hero-description {
        font-size: 1rem; /* 12pt'den küçültüldü */
        max-width: 80%; /* Cümlenin çok uzayıp taşmasını engeller */
        margin-left: auto;
        margin-right: auto;
    }
}








/* --- Telefon Boyutu (576px ve altı) --- */
@media (max-width: 576px) {
    #hero {
        /* Telefonlarda yüksekliği ekranın %90'ı yapalım, daha esnek olur */
        height: 92vh;
    }
   
    #hero h1 {
        font-size: 1.8rem; /* Başlığı daha da küçült */
    }
   
    .hero-subtitle {
        font-size: 1.2rem;
    }








    /* En önemli değişiklik: Butonları alt alta dizelim */
    .hero-buttons {
        flex-direction: column; /* Dikey olarak hizala */
        align-items: center;    /* Alt alta dizilen butonları ortala */
        gap: 15px;
    }








    .button {
        width: 240px; /* Butonların genişliğini biraz artıralım */
    }
}/* ============================================= */
/* HERO VİDEOSU - MOBİL BOYUT KONTROLÜ           */
/* ============================================= */








/* Ekran 768px ve daha darsa bu kural çalışsın */
@media (max-width: 768px) {
    .hero-video-bg {
        /*
          Bu kural, mobil dikey ekranda videonun yüksekliğe göre değil,
          genişliğe göre kendini ayarlamasını sağlar.
          Böylece videonun kenarlarından daha az kırpılır.
        */
        width: 2800px;
        height: auto;
       
        /* Eğer videonuz dikey olarak ekranı tam kaplamıyorsa
          ve altta/üstte boşluk kalıyorsa, aşağıdaki satırı
          kullanıp değeri artırarak videoyu büyütebilirsiniz.
          Örn: min-width: 120%;
        */
    }
}#portfolyo {
    display: none;
}
/* ============================================= */
/* HAKKIMDA BÖLÜMÜ - MOBİL UYUMLULUK           */
/* ============================================= */








@media (max-width: 992px) {








    #hakkimda {
        /* Mobil cihazlarda bölümün yan boşluklarını azaltalım */
        padding: 80px 40px;
    }








    .hakkimda-container {
        /* Bu komut, içindeki logo ve metin kutusunu alt alta dizer */
        flex-direction: column;
       
        /* Alt alta dizilen öğelerin arasındaki dikey boşluğu ayarlar */
        gap: 40px;
    }








    .hakkimda-metin {
        /* Metin bloğunun (başlık, paragraf ve link) ortalanmasını sağlar */
        text-align: center;
       
        /* Metin bloğunun flex yapısını sıfırlayarak tam genişlemesini sağlarız */
        flex-basis: auto;
    }
   
    .hakkimda-gorsel {
        /* Görsel bloğunun flex yapısını sıfırlayarak ortalanmasını sağlarız */
        flex-basis: auto;
    }
}








@media (max-width: 576px) {
    #hakkimda {
        /* Telefonlarda yan boşlukları daha da azaltalım */
        padding: 60px 20px;
    }
}
/* ============================================= */
/* ÇALIŞMA SÜRECİ BÖLÜMÜ - MOBİL UYUMLULUK      */
/* ============================================= */








@media (max-width: 768px) {
    #surec {
        padding: 70px 40px;
    }
    .surec-listesi {
        grid-template-columns: 1fr;
        gap: 20px;
    }








    /* Kartları küçülten kurallar BURANIN İÇİNDE OLMALI */
    .surec-karti {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .surec-karti img {
        height: 60px;
        margin-bottom: 20px;
    }
    .surec-karti h3 {
        margin-bottom: 10px;
    }
}








@media (max-width: 576px) {
    #surec {
        padding: 60px 20px;
    }
}
    /* ============================================= */
/* İLETİŞİM - SOSYAL MEDYA LİNKLERİ (GÜNCELLENDİ) */
/* ============================================= */








/* Her bir linki (a) bir flex container yapıyoruz */
.sosyal-medya ul li a {
    display: flex;
    /* İçindeki ikonu ve metni alt alta diziyoruz */
    flex-direction: column;
    /* Öğeleri yatayda ortalıyoruz */
    align-items: center;
    /* İkon ile metin arasına 10px boşluk koyuyoruz */
    gap: 10px;
}








/* Metnin (span) stilini belirliyoruz */
.sosyal-medya ul li span {
    font-size: 0.8rem;
    font-weight: var(--agirlik-kalin);
    color: #555; /* Metin rengi */
    transition: color 0.3s ease;
}








/* Linkin üzerine gelince metnin rengini değiştiriyoruz */
.sosyal-medya ul li a:hover span {
    color: var(--koyu-metin-rengi);
}








/* Not: İkonların üzerine gelince büyüme efekti zaten çalışıyor,
   o yüzden onu tekrar yazmamıza gerek yok. */
   /* ============================================= */
   
   








   /* ========================================================= */
/* YENİ PORTFOLYO GALERİSİ TASARIMI (FİNAL)                  */
/* ========================================================= */


.yeni-galeri-bolumu {
    padding: 80px 40px;
}


.yeni-galeri-bolumu h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: var(--agirlik-en-kalin);
    margin-bottom: 40px;
    color: var(--koyu-metin-rengi);
}


/* --- FİLTRE BUTONLARI STİLLERİ --- */
.filtre-butonlari {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}


.filtre-btn {
    padding: 8px 20px;
    border: 1px solid #D1D1D1;
    border-radius: 20px;
    background-color: transparent;
    color: #555;
    font-family: var(--ana-font-ailesi);
    font-weight: var(--agirlik-kalin);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}


.filtre-btn.active,
.filtre-btn:hover 
{
    border-color: #0066FF;
    background-color: #0066FF;
    color: #f0f0f0;
}


/* --- PROJE GALERİSİ VE KARTLAR --- */
.proje-galerisi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 50px;
    max-width: 1200px;
    margin: 0 auto;
}


.proje-karti-referans .kart-link {
    display: block;
    text-decoration: none;
    color: var(--koyu-metin-rengi);
}


.kart-gorsel {
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 20px;
    background-color: #e5e7eb;
}


.kart-gorsel img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.4s ease;
}


.proje-karti-referans:hover .kart-gorsel img {
    transform: scale(1.05);
}


.kart-bilgi h3 {
    font-size: 1.3rem;
    font-weight: var(--agirlik-kalin);
    margin-bottom: 8px;
}


.kart-bilgi p {
    font-size: 1rem;
    color: #666;
}


/* --- MOBİL UYUMLULUK (Grid) --- */
@media (max-width: 768px) {
    .yeni-galeri-bolumu {
        padding: 60px 20px;
    }
    .proje-galerisi {
        grid-template-columns: 1fr;
    }
}
/* ========================================================= */
/* PROJE DETAY MODAL - FİNAL VE DOĞRU ÇALIŞAN VERSİYON       */
/* ========================================================= */
/* Modal içindeki video için stil */
.modal-video {
    border-radius: 8px; /* Kenarları resimler gibi yuvarlak yapar */
    margin-bottom: 20px; /* Altına boşluk bırakır */
}


/* Ana Pencere (Overlay) */
.proje-modal {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: none; /* Başlangıçta gizli ve yer kaplamıyor */
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.proje-modal.aktif {
    display: flex; /* Aktif olunca görünür yap */
    opacity: 1;
}


/* İçerik Kutusu */
.modal-icerik {
    width: 100%;
    max-width: 900px;
   
    /* YÜKSEKLİK AYARI: Yüksekliği içeriğe göre otomatik ayarla,
       ama ekranın %90'ından uzun olmasını engelle. */
    height: auto;
    max-height: 90vh;


    background-color: white;
    border-radius: 16px; /* Tüm köşeleri yuvarla */
    display: flex;
    flex-direction: column;
   
    /* İÇERİK SIĞMAZSA KAYDIRMA ÇUBUĞU GÖRÜNSÜN */
    overflow: hidden;
}


.modal-kapat {
    position: fixed; top: 20px; right: 30px;
    color: #fff;
    font-size: 2.5rem; cursor: pointer; z-index: 2002;
    background: none; border: none;
}


/* Modal'ın içindeki tüm içeriği saran ana bölüm */
.vaka-yeni-container {
    overflow-y: auto; /* ASIL KAYDIRMA BURADA OLACAK */
    padding: 30px;
}


/* Accordion Başlığı */
.vaka-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}
.vaka-baslik {
    font-size: 1.8rem;
    font-weight: var(--agirlik-en-kalin);
}
.vaka-kategori {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}
.vaka-ok-ikonu {
    width: 12px; height: 12px;
    border-left: 3px solid #999;
    border-bottom: 3px solid #999;
    transform: rotate(135deg);
    transition: transform 0.4s ease;
}
.vaka-accordion-header:not(.aktif) .vaka-ok-ikonu {
    transform: rotate(-45deg);
}


/* Accordion İçeriği (Açıklama) */
.vaka-accordion-content {
    max-height: 0; /* Başlangıçta kapalı */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.vaka-paragraf {
    padding-top: 20px;
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}


/* Galeri Alanı */
.vaka-galeri-alani {
    padding-top: 30px;
}
.galeri-gorsel {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-bottom: 20px; /* Görseller arasına boşluk */
}




/* --- MODAL MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .vaka-yeni-container {
        padding: 20px;
    }
    .vaka-baslik {
        font-size: 1.5rem;
    }
    .vaka-paragraf {
        font-size: 0.9rem;
    }
}
/* ============================================= */
/* HAKKIMDA SAYFASI YENİ TASARIM                 */
/* ============================================= */


/* --- Tam Genişlikli Alanlar --- */
.hakkimda-giris,
.hakkimda-yaklasim {
    background-color: #0f172a; /* İstediğin koyu arkaplan rengi */
    color: #e5e7eb; /* Koyu arkaplan için açık metin rengi */
    padding: 80px 40px; /* Bölümlerin iç boşlukları */
}


/* --- Normal Genişlikli Alanlar --- */
#hakkimda-sayfasi .container {
    max-width: 1200px;
    margin: 0 auto;
}


/* --- Giriş Bölümü İçerik --- */
.hakkimda-giris {
    text-align: center;
}
.hakkimda-logo {
    height: 180px;
    margin-bottom: 30px;
}
.hakkimda-giris h1 {
    font-size: 2rem;
    font-weight: var(--agirlik-en-orta);
    margin-bottom: 20px;
}
.giris-paragraf {
    font-size: 1.2rem;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.7;
    opacity: 0.8;
}


/* --- Felsefe ve Tecrübe Bölümleri --- */
.hakkimda-bolum {
    padding: 80px 0;
    border-bottom: 1px solid #eaeaea;
}
.hakkimda-bolum:last-of-type {
    border-bottom: none;
}
.hakkimda-bolum h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: var(--agirlik-kalin);
    margin-bottom: 40px;
}
.hakkimda-bolum p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    text-align: center; /* Paragrafları ortala */
}
.hakkimda-bolum p + p {
    margin-top: 20px;
}


/* --- Yaklaşım Kartları --- */
.hakkimda-yaklasim .container .yaklasim-karti {
    text-align: center;
}
.hakkimda-yaklasim .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.yaklasim-karti img {
    height: 100px;
    margin-bottom: 20px;
}
.yaklasim-karti h3 {
    font-size: 1.2rem;
    font-weight: var(--agirlik-kalin);
    margin-bottom: 15px;
    color: #ffffff; /* Başlıkları beyaz yap */
}
.yaklasim-karti p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.8;
}


/* --- HAKKIMDA SAYFASI MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .hakkimda-yaklasim .container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
     .hakkimda-giris h1 {
        font-size: 2rem;
    }
    .giris-paragraf {
        font-size: 1.1rem;
    }
    .hakkimda-bolum {
    padding: 80px 40px;
    border-bottom: 1px solid #eaeaea;
    .hakkimda-bolum h2 {
        font-size: 1.8rem;
    }


    /* Kartları mobilde alt alta diz */
    .hakkimda-yaklasim {
        grid-template-columns: 1fr;
        gap: 60px;
        padding-top: 60px;
    }
}
/* ======================================================= */
/* YENİ GRİ YETKİNLİK ŞERİDİ (HERO ALTINDAKİ BANT)         */
/* ======================================================= */

.yetkinlik-seridi {
    background-color: #f1f3f5 !important; /* İstediğin o zarif açık gri ton */
    width: 100% !important;
    padding: 35px 20px !important; /* Şeridin üstten ve alttan kalınlığı */
    display: block !important;
    border-bottom: 1px solid #e5e5e5 !important; /* Şeridin altına çok ince bir çizgi */
}

.serit-konteyner {
    display: flex !important;
    flex-wrap: wrap !important; /* Ekrana sığmazsa alt satıra geçer */
    justify-content: center !important; /* İkonları ortalar */
    align-items: center !important;
    gap: 50px !important; /* İkonlar arasındaki boşluk */
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.serit-ikon {
    width: 45px !important; /* İkon boyutu */
    height: 45px !important;
    object-fit: contain !important;
    
    /* İSTEDİĞİN ÖZELLİK: Tek renk (gri) ve Opacity düşük */
    opacity: 0.5 !important; 
    filter: grayscale(100%) !important; 
    
    transition: all 0.4s ease !important;
    cursor: pointer !important;
}

/* HOVER EFEKTİ: Üzerine gelince kendi rengine döner ve canlanır */
.serit-ikon:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important; /* Orijinal rengi geri gelir */
    transform: translateY(-5px) scale(1.1) !important; /* Hafif havaya kalkar */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .serit-konteyner {
        gap: 25px !important; /* Mobilde boşluklar daralır */
    }
    .serit-ikon {
        width: 35px !important; /* İkonlar biraz küçülür */
        height: 35px !important;
    }
}
/* ========================================================= */
/* 1. YENİ FOOTER (TAM ORTALANMIŞ)                           */
/* ========================================================= */
footer#iletisim {
    background-color: #f7f7f7 !important;
    color: #000000 !important;
    padding: 80px 20px 30px 20px !important;
    text-align: center !important;
}
.yeni-footer-container {
    max-width: 1000px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100% !important;
}
.birlikte-calisalim { width: 100% !important; display: flex !important; justify-content: center !important; }
.birlikte-calisalim p { line-height: 1.8 !important; font-size: 1.1rem !important; opacity: 0.8 !important; color: #000 !important; max-width: 800px !important; margin: 0 auto !important; }
.iletisim-butonlari-yeni { display: flex !important; justify-content: center !important; width: 100% !important; }
.buton-grup img { height: 55px !important; transition: transform 0.3s ease !important; }
.buton-grup a:hover img { transform: scale(1.05) !important; }
.footer-sosyal-medya h4 { font-size: 1.2rem !important; font-weight: bold !important; margin-bottom: 25px !important; color: #000000 !important; }
.sosyal-ikonlar { display: flex !important; justify-content: center !important; gap: 40px !important; }
.sosyal-ikonlar img { height: 35px !important; transition: opacity 0.3s ease !important; }
.sosyal-ikonlar a:hover img { opacity: 0.7 !important; }
.copyright { font-size: 0.85rem !important; opacity: 0.5 !important; margin-top: 50px !important; width: 100% !important; padding-top: 20px !important; }

/* ========================================================= */
/* 2. GRİ YETKİNLİK ŞERİDİ (LOGO BANDI)                      */
/* ========================================================= */
.yetkinlik-seridi {
    background-color: #f1f3f5 !important;
    width: 100% !important;
    padding: 35px 20px !important;
    display: block !important;
    border-bottom: 1px solid #e5e5e5 !important;
}
.serit-konteyner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 50px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.serit-ikon {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain !important;
    opacity: 0.5 !important;
    filter: grayscale(100%) !important;
    transition: all 0.4s ease !important;
    cursor: pointer !important;
}
.serit-ikon:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    transform: translateY(-5px) scale(1.1) !important;
}

/* ========================================================= */
/* 3. PROFESYONEL YOLCULUK (TIMELINE)                        */
/* ========================================================= */
.profesyonel-yolculuk {
    padding: 100px 20px !important;
    background-color: #ffffff !important;
    display: block !important;
    width: 100% !important;
}
.profesyonel-yolculuk .bolum-baslik {
    text-align: center !important;
    font-size: 2.5rem !important;
    color: #223859 !important;
    margin-bottom: 20px !important;
    font-weight: bold !important;
    display: block !important;
    width: 100% !important;
}
.yolculuk-ozet {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 80px auto !important;
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    color: #444 !important;
    display: block !important;
}
.timeline-listesi {
    max-width: 700px !important;
    margin: 0 auto !important;
    border-left: 2px solid #eaeaea !important; 
    padding-left: 45px !important;
    position: relative !important;
    left: 80px !important; 
}
.timeline-kart {
    position: relative !important;
    margin-bottom: 70px !important;
    padding-bottom: 20px !important;
}
.buyuk-yil {
    position: absolute !important;
    left: -220px !important; 
    top: -5px !important;
    width: 140px !important;
    text-align: right !important;
    font-size: 1.8rem !important;
    font-weight: bold !important;
    color: #223859 !important;
}
.timeline-kart::before {
    content: '' !important;
    position: absolute !important;
    left: -58px !important; 
    top: 5px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: #ffffff !important;
    border: 4px solid #223859 !important;
    border-radius: 50% !important;
    transition: transform 0.4s ease, background-color 0.4s ease !important;
}
.timeline-kart:hover::before {
    background-color: #223859 !important;
    transform: scale(1.3) !important;
}
.timeline-icerik h3 { font-size: 1.6rem !important; color: #223859 !important; margin-bottom: 5px !important; font-weight: bold !important; }
.timeline-icerik h4 { font-size: 1.1rem !important; color: #666 !important; margin-bottom: 20px !important; }
.etki-listesi { margin-bottom: 25px !important; padding-left: 0 !important; list-style: none !important; }
.etki-listesi li { position: relative !important; padding-left: 20px !important; margin-bottom: 12px !important; color: #555 !important; line-height: 1.6 !important; font-size: 0.95rem !important; }
.etki-listesi li::before { content: '→' !important; position: absolute !important; left: 0 !important; top: 0 !important; color: #223859 !important; font-weight: bold !important; }
.katki-alani { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
.etiket-baslik { font-size: 0.9rem !important; color: #223859 !important; font-weight: bold !important; margin-right: 5px !important; }
.katki-etiket { font-size: 0.8rem !important; color: #666 !important; border: 1px solid #dcdcdc !important; padding: 6px 16px !important; border-radius: 30px !important; background-color: #fbfbfb !important; transition: all 0.3s ease !important; }
.timeline-kart:hover .katki-etiket { border-color: #223859 !important; color: #223859 !important; background-color: #f0f4f8 !important; }

/* ========================================================= */
/* 4. MARKALAR İÇİN DEĞER ÜRETİMİ (2x2 GRID)                 */
/* ========================================================= */
.premium-uzmanlik { padding: 100px 20px !important; background-color: #f7f7f7 !important; display: block !important; }
.uzmanlik-header { text-align: center !important; max-width: 800px !important; margin: 0 auto 60px auto !important; display: block !important; }
.uzmanlik-header h2 { font-size: 2.5rem !important; color: #223859 !important; margin-bottom: 20px !important; font-weight: bold !important; display: block !important; }
.uzmanlik-header p { font-size: 1.1rem !important; color: #666 !important; line-height: 1.7 !important; display: block !important; }
.premium-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; max-width: 1100px !important; margin: 0 auto !important; }
.premium-card { background: #ffffff !important; padding: 50px 40px !important; border-radius: 16px !important; position: relative !important; overflow: hidden !important; border: 1px solid #eaeaea !important; transition: all 0.4s ease !important; }
.premium-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(34, 56, 89, 0.08) !important; border-color: #223859 !important; }
.card-number { position: absolute !important; top: 10px !important; right: 20px !important; font-size: 5rem !important; font-weight: bold !important; color: #f2f2f2 !important; transition: color 0.4s ease !important; z-index: 1 !important; user-select: none !important; }
.premium-card:hover .card-number { color: rgba(34, 56, 89, 0.06) !important; }
.premium-card h3 { font-size: 1.6rem !important; color: #223859 !important; margin-bottom: 15px !important; position: relative !important; z-index: 2 !important; font-weight: bold !important; }
.premium-card p { font-size: 1.05rem !important; color: #555 !important; line-height: 1.6 !important; margin-bottom: 30px !important; position: relative !important; z-index: 2 !important; }
.micro-tags { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; position: relative !important; z-index: 2 !important; }
.micro-tags span { background-color: #f0f4f8 !important; color: #223859 !important; font-size: 0.85rem !important; padding: 8px 16px !important; border-radius: 50px !important; font-weight: bold !important; transition: all 0.3s ease !important; }
.premium-card:hover .micro-tags span { background-color: #223859 !important; color: #ffffff !important; }

/* ========================================================= */
/* 5. EĞİTİM BÖLÜMÜ                                          */
/* ========================================================= */
.egitim-bolumu { padding: 80px 20px !important; background-color: #ffffff !important; text-align: center !important; display: block !important; }
.egitim-item { margin-bottom: 40px !important; }
.egitim-okul { font-size: 1.4rem !important; color: #223859 !important; font-weight: bold !important; margin-bottom: 5px !important; }
.egitim-bolum { color: #666 !important; font-size: 1.1rem !important; }

/* ========================================================= */
/* MOBİL UYUMLULUK SADECE BU BÖLÜMLER İÇİN                   */
/* ========================================================= */
@media (max-width: 992px) {
    .premium-grid { grid-template-columns: 1fr !important; gap: 25px !important; }
    .uzmanlik-header h2 { font-size: 2rem !important; }
    .premium-card { padding: 40px 30px !important; }
    .timeline-listesi { left: 0 !important; padding-left: 30px !important; margin-left: 20px !important; }
    .buyuk-yil { position: static !important; display: block !important; text-align: left !important; margin-bottom: 15px !important; font-size: 1.5rem !important; }
    .timeline-kart::before { left: -39px !important; top: 0 !important; }
}

@media (max-width: 768px) {
    .serit-konteyner { gap: 25px !important; }
    .serit-ikon { width: 35px !important; height: 35px !important; }
}