/* --- TEMEL AYARLAR VE DEĞİŞKENLER --- */

/* :root seçicisi, CSS değişkenlerini (variables) tanımlamak için kullanılır.
  Bu, projedeki ana renkleri tek bir yerden kolayca yönetmenizi sağlar.
*/
:root {
    /* Logo Renkleri */
    --renk-lacivert: #0D2C4D; /* Ana kurumsal renk (Başlıklar, Navigasyon, Footer) */
    --renk-mavi: #00AEEF;     /* Canlı vurgu rengi (Butonlar, Linkler, İkonlar) */
    --renk-toprak: #B9770E;   /* İkincil vurgu rengi (Geoteknik etiketleri) */
    
    /* Standart Renkler */
    --renk-beyaz: #ffffff;
    --renk-siyah: #000000;
    --renk-gri-arkaplan: #f3f4f6; /* Sayfa gövdesinin ana arkaplan rengi */
    --renk-gri-yazi: #1f2937;       /* Ana paragraf metinlerinin rengi */
    --renk-gri-acik-yazi: #d1d5db; /* Footer'daki açık renkli yazılar */
    --renk-gri-orta-yazi: #9ca3af; /* Footer'daki ikon/slogan gibi ikincil yazılar */
    --renk-gri-koyu-yazi: #111827;  /* Mobil menüdeki (beyaz arkaplanlı) yazı rengi */
    --renk-gri-border: #4b5563;   /* Footer'daki telif hakkı ayraç çizgisi */
    --renk-gri-acik-border: #e5e7eb; /* Kartların ve form inputlarının çerçeve (border) rengi */
}

/* 'box-sizing: border-box' ayarı, tüm elemanların genişlik ve yükseklik
  hesaplamalarına 'padding' (iç boşluk) ve 'border' (çerçeve) değerlerini
  dahil etmesini sağlar. Bu, modern CSS düzenlemeleri için standarttır.
*/
* {
    box-sizing: border-box; /* Genişlik hesaplamasını kolaylaştırır */
    margin: 0;              /* Tarayıcının varsayılan dış boşluklarını sıfırlar */
    padding: 0;             /* Tarayıcının varsayılan iç boşluklarını sıfırlar */
}

/* Sayfanın varsayılan yazı tipi 'Roboto' olarak ayarlandı */
body {
    font-family: 'Roboto', sans-serif;         /* Varsayılan yazı tipi */
    background-color: var(--renk-gri-arkaplan); /* Arkaplan rengi (değişkenlerden) */
    color: var(--renk-gri-yazi);               /* Varsayılan metin rengi */
    line-height: 1.6;                          /* Okunabilirlik için satır yüksekliği */
    
    /* Footer'ın (alt bilgi) kısa sayfalarda bile en altta kalmasını 
      sağlamak için modern 'flexbox' yöntemi kullanılır.
    */
    display: flex;          /* Flexbox düzenini başlatır */
    flex-direction: column; /* Elemanları dikey (alt alta) sıralar */
    min-height: 100vh;      /* Sayfanın minimum yüksekliğini ekran yüksekliği kadar yapar */
}

/* 'main' (ana içerik) alanı, 'flex-grow: 1' sayesinde
  header ve footer arasındaki tüm boş alanı doldurur.
  Bu, footer'ı sayfanın en altına iter.
*/
main {
    flex-grow: 1; /* Mevcut tüm dikey boş alanı kaplar */
}

/* Başlık etiketleri (h1, h2, h3...) ve özel '.font-display' class'ı,
  daha güçlü ve modern bir görünüm için 'Montserrat' yazı tipini kullanır.
*/
h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Montserrat', sans-serif;
}

/* '.container' class'ı, tüm içeriği (navigasyon, ana içerik, footer)
  belirli bir maksimum genişlikte (1280px) sınırlar ve ortalar.
*/
.container {
    width: 100%;           /* Her zaman %100 genişlikte başlar */
    max-width: 80rem;      /* Maksimum genişlik 1280px (80 * 16px) */
    margin-left: auto;     /* Sol ve sağ 'auto' margin, ortalanmasını sağlar */
    margin-right: auto;
    padding-left: 1rem;    /* 16px (Mobilde kenar boşluğu) */
    padding-right: 1rem;
}

/* Tablet (640px) ve üzeri ekranlarda kenar boşluklarını artır */
@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem; /* 24px */
        padding-right: 1.5rem;
    }
}
/* Büyük ekranlar (1024px) için kenar boşluklarını daha da artır */
@media (min-width: 1024px) {
    .container {
        padding-left: 2rem; /* 32px */
        padding-right: 2rem;
    }
}

/* JavaScript tarafından 'display: none' (gizle) için kullanılan ortak class */
.hidden {
    display: none;
}


/* --- HEADER / NAVİGASYON (Tüm Sayfalarda Ortak) --- */

#main-nav {
    position: fixed; /* 1. SABİT: Sayfa kaysa bile ekranın üstünde kalır */
    top: 0;          /* 2. KONUM: Ekranın en üstüne (0px) yapışır */
    left: 0;         /* 3. GENİŞLİK: Ekranın sol kenarına (0px) yapışır */
    right: 0;        /* 4. GENİŞLİK: Ekranın sağ kenarına (0px) yapışır (sonuç = %100 genişlik) */
    z-index: 50;     /* 5. KATMAN: Diğer tüm elemanların (slider, resim vb.) üzerinde görünür */
    
    /* KULLANICI İSTEĞİ (DÜZELTME 1): 
      Menü artık her zaman lacivert renktedir (transparan değil).
    */
    background-color: var(--renk-lacivert); /* Arka plan rengi (değişkenlerden) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Altta yumuşak bir gölge */
}

/* 'scrolled' class'ı artık arka plan rengi için gerekli değil, 
  ancak JavaScript'in mobil menü stillerini yönetmesi için JS dosyasında bırakılmıştır.
*/
#main-nav.scrolled {
    /* Rengi değiştirmek için değil, sadece JS'nin bir durum (state)
       kontrolü yapması için varlığını korur. */
}

/* Navigasyonun içindeki '.container'ı sarmalayan bölüm */
.nav-content {
    display: flex;             /* İçerikleri (logo ve menü) yatayda sıralar */
    justify-content: space-between; /* Logoyu sola, menüyü sağa iter */
    align-items: center;       /* Dikey olarak ortalar */
    height: 5rem;              /* 80px (Navigasyon yüksekliği) */
}

/* Logo ve Şirket İsmi */
.logo-link {
    display: flex;           /* Logo ve yazıyı yan yana getirir */
    align-items: center;       /* Dikey olarak ortalar */
    gap: 0.75rem;              /* 12px (Logo ve yazı arası boşluk) */
    color: var(--renk-beyaz);  /* Yazı rengi */
    text-decoration: none;     /* Linkin altındaki çizgiyi kaldırır */
    

}
.logo-link img {
    height: 2.5rem; /* 40px (Logo yüksekliği) */
    width: auto;    /* Genişlik otomatik ayarlanır */
    display: none;  /* Mobilde (640px altı) gizlidir */
    border-radius: 0.30rem;     /* GG - Logo img dosyası kenar radius */    

}
.logo-link span {
    font-size: 1.5rem; /* 24px (Şirket ismi yazı boyutu) */
    font-weight: 700;  /* Kalın */
    font-family: 'Montserrat', sans-serif; /* Başlık fontu */
}

/* 'sm' (640px) ve üzeri ekranlarda logo resmini göster */
@media (min-width: 640px) {
    .logo-link img {
        display: block; /* 'none' olan gizlemeyi kaldırır */
    }
}

/* Masaüstü Menüsü (Linkleri içeren <div>) */
.nav-menu-desktop {
    display: none; /* Mobilde (1024px altı) gizlidir */
}

/* 'lg' (1024px) ve üzeri ekranlarda masaüstü menüsünü göster */
@media (min-width: 1024px) {
    .nav-menu-desktop {
        display: flex;     /* Yatayda sıralar */
        align-items: center; /* Dikeyde ortalar */
        gap: 0.5rem;         /* 8px (Linkler arası boşluk) */
    }
}

/* Masaüstü menü linkleri (<a> etiketleri) */
.nav-menu-desktop a {
    color: var(--renk-beyaz);     /* Yazı rengi */
    text-decoration: none;        /* Link çizgilerini kaldırır */
    padding: 0.5rem 1rem;         /* 8px 16px (Tıklama alanını büyütür) */
    border-radius: 0.375rem;      /* 6px (Hafif yuvarlak köşe) */
    font-size: 0.95rem;           /* 15px (Yazı boyutu) */
    font-weight: 500;             /* Orta kalınlıkta */
    transition: color 0.3s ease, border-color 0.3s ease; /* Renk geçişini yumuşatır */
    border-bottom: 2px solid transparent; /* Altta gizli 2px çizgi (hover için yer kaplar) */
}
/* 'gradient-button' class'ı olmayan linklerin üzerine gelince (hover) */
.nav-menu-desktop a:not(.gradient-button):hover {
    color: var(--renk-mavi);           /* Yazı rengini vurgu mavisi yapar */
    border-bottom-color: var(--renk-mavi); /* Alttaki gizli çizgiyi görünür yapar */
}
/* Aktif sayfa linki (JavaScript tarafından .active-nav-link class'ı eklenir) */
.nav-menu-desktop a.active-nav-link:not(.gradient-button) {
    color: var(--renk-mavi);           /* Aktif linki mavi yapar */
    border-bottom-color: var(--renk-mavi); /* Aktif linkin altını çizer */
}

/* Mobil menü (hamburger) butonu */
.nav-menu-mobile-toggle {
    display: flex;           /* İçeriği hizalamak için (1024px altı görünür) */
    align-items: center;
}
#mobile-menu-button {
    color: var(--renk-beyaz); /* İkon rengi */
    padding: 0.5rem;         /* Tıklama alanını büyütür */
    border-radius: 0.375rem; /* 6px (Yuvarlak köşe) */
    background: none;        /* Arka planı kaldırır */
    border: none;            /* Çerçeveyi kaldırır */
    cursor: pointer;         /* El işareti */
}
#mobile-menu-button svg {
    width: 1.5rem; /* 24px (İkon boyutu) */
    height: 1.5rem;
}

/* 'lg' (1024px) ve üzeri ekranlarda mobil menü butonunu gizle */
@media (min-width: 1024px) {
    .nav-menu-mobile-toggle {
        display: none;
    }
}

/* Açılır mobil menü (Navigasyonun hemen altında açılır) */
.mobile-menu-container {
    /* 'display: none' (yani 'hidden' class'ı) JavaScript tarafından yönetilir */
    background-color: var(--renk-beyaz); /* Açılır menü arkaplanı */
}
/* JS'nin scroll (kaydırma) sırasında rengini değiştirebilmesi 
  için .mobile-menu-container div'in içindeki div'e stilleri veriyoruz.
*/
.mobile-menu-container div {
    padding: 0.5rem 0.5rem 0.75rem 0.5rem; /* İç boşluklar */
}
.mobile-menu-container a {
    display: block; /* Linklerin tüm satırı kaplamasını sağlar */
    color: var(--renk-gri-koyu-yazi); /* Mobil menüdeki link rengi */
    text-decoration: none;            /* Link çizgilerini kaldırır */
    padding: 0.75rem 1rem;            /* Tıklama alanı */
    border-radius: 0.375rem;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 0.25rem; /* Linkler arası dikey boşluk */
}
.mobile-menu-container a:first-child {
    margin-top: 0; /* İlk linkde üst boşluk olmasın */
}
/* 'gradient-button' olmayan linklerin üzerine gelince */
.mobile-menu-container a:not(.gradient-button):hover {
    background-color: var(--renk-gri-arkaplan); /* Hafif gri arkaplan */
}
/* Mobilde aktif sayfa linki */
.mobile-menu-container a.active-nav-link:not(.gradient-button) {
    background-color: var(--renk-gri-arkaplan);
    color: var(--renk-lacivert); /* Aktif linki koyu mavi yapar */
    font-weight: 700;            /* Aktif linki kalın yapar */
}
/* Mobil menüdeki 'Bize Ulaşın' butonu */
.mobile-menu-container a.gradient-button {
    color: var(--renk-beyaz);    /* Yazı rengi beyaz */
    text-align: center;          /* Metni ortalar */
    margin-top: 0.5rem;          /* Üstündeki linkle arasını açar */
    width: calc(100% - 1rem); /* Kenar boşluklarını hesaba katarak tam genişlik */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* 'lg' (1024px) ve üzeri ekranlarda açılır mobil menüyü her zaman gizle */
@media (min-width: 1024px) {
    .mobile-menu-container {
        display: none !important; /* '!important' JS'nin açmasını engeller */
    }
}


/* --- HERO (BODY) BÖLÜMÜ (Sadece index.html) --- */

.hero-section {
    position: relative; /* İçerideki 'absolute' (slaytlar, overlay) elemanlar için referans noktası */
    min-height: 100vh; /* Ekran yüksekliği kadar yer kaplar (en az) */
    display: flex;       /* İçeriği (hero-content-wrapper) ortalamak için */
    align-items: center;   /* İçeriği dikeyde ortalar */
    justify-content: center; /* İçeriği yatayda ortalar */
    color: var(--renk-beyaz); /* Bu bölümdeki varsayılan yazı rengi */
    overflow: hidden;      /* Slaytların taşmasını engeller */
}

/* Arka plan slideshow resimlerinin kutusu */
#hero-slideshow {
    position: absolute; /* .hero-section'a göre konumlanır */
    top: 0;
    left: 0;
    width: 100%;  /* Ebeveynini tamamen kaplar */
    height: 100%;
}
/* Slayt resimleri */
.hero-slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi en-boy oranını koruyarak kaplar (kırpabilir) */
    object-position: center; /* Resmi ortalar */
    opacity: 0; /* JS tarafından 'active' class'ı eklenene kadar gizli */
    transition: opacity 1.5s ease-in-out; /* Yumuşak geçiş efekti */
    z-index: -2; /* Arka planın bile arkasında (overlay'in de arkasında) */
}
/* JS tarafından eklenen 'active' class'ı resmi görünür yapar */
.hero-slideshow-image.active {
    opacity: 1;
}

/* Arka plan resimlerinin üzerindeki siyah filtre (yazıların okunabilirliği için) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* %65 opaklıkta siyah */
    z-index: -1; /* Resimlerin üzerinde, içeriğin (yazıların) altında */
}

/* Hero içeriğini (main+aside) saran ana kutu */
.hero-content-wrapper {
    position: relative; /* 'absolute' overlay ve slaytların üzerine çıkar */
    z-index: 10;        /* İçeriği en üste alır */
    width: 100%;
    max-width: 80rem;   /* 1280px (container ile aynı) */
    margin-left: auto;
    margin-right: auto;
    padding: 8rem 1rem 6rem 1rem; /* Üst(nav bar için)/alt/yan boşluklar */
}
@media (min-width: 1024px) {
    .hero-content-wrapper {
        padding-top: 10rem; /* Desktopta daha fazla boşluk */
        padding-bottom: 10rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Main ve Aside'ı içeren layout (Ortak Kullanım: index, iletisim, hakkimizda) */
.hero-layout {
    display: flex;
    flex-direction: column; /* Mobilde alt alta (varsayılan) */
}
@media (min-width: 1024px) {
    .hero-layout {
        flex-direction: row; /* Desktopta yan yana */
        gap: 3rem;           /* 48px (İki sütun arası boşluk) */
    }
}

/* Hero Main (Sol taraf) */
.hero-main {
    width: 100%; /* Mobilde tam genişlik */
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikeyde ortalar (flex item olduğu için) */
    margin-bottom: 3rem;     /* 48px (Mobilde aside ile arasına boşluk koyar) */
}
@media (min-width: 1024px) {
    .hero-main {
        width: 66.666%; /* 2/3 genişlik */
        margin-bottom: 0; /* Desktopta alt boşluğu sıfırla */
    }
}

/* Hero Ana Başlık (Şirket İsmi) */
.hero-main h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem; /* 48px */
    font-weight: 900; /* En kalın */
    text-transform: uppercase; /* Tüm harfleri büyük */
    text-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); /* Hafif gölge */
}
@media (min-width: 768px) {
    .hero-main h1 {
        font-size: 4.15rem; /* 72px (Tablette daha büyük) */
    }
}

/* Hero Hakkımızda Paragrafı */
.hero-main p {
    margin-top: 1.5rem; /* 24px (Başlıkla arasına boşluk) */
    font-size: 1.125rem; /* 18px (Yazı boyutu) */
    color: var(--renk-gri-acik-yazi); /* Açık gri yazı */
    max-width: 45rem; /* 672px (Satır uzunluğunu sınırlar - okunabilirlik) */
    line-height: 1.625;
}
@media (min-width: 768px) {
    .hero-main p {
        font-size: 1.25rem; /* 20px (Tablette daha büyük) */
    }
}

/* Hero Hizmet Butonları (Wrapper) */
.hero-buttons {
    margin-top: 2.5rem; /* 40px (Paragrafla arasına boşluk) */
    display: flex;
    flex-direction: column; /* Mobilde alt alta */
    gap: 1rem;              /* 16px (Butonlar arası boşluk) */
}
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row; /* Küçük ekranda yan yana */
    }
}

/* Hero Aside (Sağ taraf) */
.hero-aside {
    width: 100%; /* Mobilde tam genişlik */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 1024px) {
    .hero-aside {
        width: 33.333%; /* 1/3 genişlik */
        padding-left: 2rem; /* 32px (Soldaki main ile arasını açar - gap'e ek olarak) */
    }
}

/* Aside İstatistik Kutusu (Sadece index.html) */
.aside-box {
    display: flex;
    flex-direction: row; /* Mobilde yan yana 3'lü */
    justify-content: space-around; /* Eşit aralıklı */
    text-align: center;   /* Metni ortalar */
    background-color: rgba(0, 0, 0, 0.3); /* Yarı şeffaf siyah */
    -webkit-backdrop-filter: blur(4px); /* Arkaplanı bulanıklaştır (Safari) */
    backdrop-filter: blur(4px); /* Arkaplanı bulanıklaştır (Modern tarayıcılar) */
    padding: 1.5rem; /* 24px (İç boşluk) */
    border-radius: 0.75rem; /* 12px (Yuvarlak köşe) */
    border: 1px solid var(--renk-gri-border); /* Hafif çerçeve */
}
@media (min-width: 1024px) {
    .aside-box {
        flex-direction: column; /* Desktopta alt alta */
        text-align: left; /* Desktopta sola hizalı */
        gap: 2.5rem;          /* 40px (İstatistikler arası boşluk) */
        padding: 2rem;        /* 32px (İç boşluk) */
    }
}

/* İstatistik kutusu içindeki her bir eleman */
.aside-item {
    flex: 1; /* Mobilde eşit genişlik paylaşır */
}
@media (min-width: 1024px) {
    .aside-item {
        flex: none; /* Desktopta esnemeyi kaldırır */
    }
}

/* İstatistik başlıkları (15+ Yıl vb.) */
.aside-item h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.25rem; /* 36px */
    font-weight: 700; /* Kalın */
}
@media (min-width: 1024px) {
    .aside-item h2 {
        font-size: 3rem; /* 48px (Desktopta daha büyük) */
    }
}

/* İstatistik alt yazıları (Saha Deneyimi vb.) */
.aside-item p {
    margin-top: 0.25rem;
    font-size: 0.875rem; /* 14px */
    color: var(--renk-gri-acik-yazi);
    font-weight: 500;
}
@media (min-width: 1024px) {
    .aside-item p {
        font-size: 1rem; /* 16px */
    }
}


/* --- GENEL BUTON STİLLERİ (Tüm Sayfalarda Ortak) --- */

/* "Bize Ulaşın" Gradyan Butonu */
.gradient-button {
    background-image: linear-gradient(to right, var(--renk-mavi) 0%, #0077B6 100%); /* Renk geçişi */
    transition: all 0.3s ease; /* Tüm geçişleri (gölge, transform) yumuşatır */
    color: var(--renk-beyaz);  /* Yazı rengi */
    font-weight: 700;          /* Kalın yazı */
    padding: 0.5rem 1.25rem;   /* İç boşluk */
    border-radius: 9999px;   /* Tam yuvarlak (pill) şekli */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Hafif gölge */
    font-size: 0.875rem;       /* 14px (Yazı boyutu) */
    text-decoration: none;       /* Link çizgilerini kaldırır */
    border: none;              /* Çerçeveyi kaldırır */
    cursor: pointer;           /* El işareti */
}
.gradient-button:hover {
    box-shadow: 0 0 15px var(--renk-mavi); /* Parlama efekti */
    transform: translateY(-2px); /* Hafif yukarı kalkma */
}
/* Navigasyonda aktif olan gradient buton (örn: İletişim sayfasındayken) */
.nav-menu-desktop a.gradient-button.active-nav-link {
    box-shadow: 0 0 15px var(--renk-mavi); /* Aktifken de parlar */
    transform: translateY(-2px);
    border-bottom-color: transparent; /* Altındaki çizgiyi (hover) kaldırır */
}


/* Hero Hizmet Butonları (Sadece index.html) */
.service-button {
    background-color: rgba(255, 255, 255, 0.1); /* %10 opaklıkta beyaz (şeffaf) */
    border: 1px solid var(--renk-mavi); /* Vurgu mavisi çerçeve */
    color: var(--renk-mavi);            /* Yazı rengi */
    transition: all 0.3s ease;      /* Geçişleri yumuşatır */
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 0.75rem 2rem;    /* İç boşluk */
    border-radius: 0.5rem;    /* 8px (Yuvarlak köşe) */
    font-size: 1.125rem;      /* 18px (Yazı boyutu) */
    text-transform: uppercase; /* Tüm harfleri büyük */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.service-button:hover {
    background-color: var(--renk-mavi); /* Üzerine gelince arkaplanı doldurur */
    color: var(--renk-lacivert);        /* Yazı rengini koyu lacivert yapar */
    transform: translateY(-2px);        /* Hafif yukarı kalkar */
}


/* --- ALT SAYFA STİLLERİ (Hakkımızda, Uzmanlık, Referans, İletişim) --- */

/* Ortak Sayfa Başlığı (Gri Alan) */
.page-header {
    background-color: var(--renk-beyaz);       /* Beyaz arkaplan */
    padding-top: 8rem;  /* 128px (Sabit navigasyon barının (80px) altında kalmaması için) */
    padding-bottom: 2.5rem; /* 40px (Alt boşluk) */
    border-bottom: 1px solid var(--renk-gri-acik-border); /* Alt çizgi */
}
.page-header h1 {
    font-size: 2.5rem; /* 40px (Sayfa başlığı) */
    font-weight: 900; /* En kalın */
    color: var(--renk-lacivert);
    margin-top: 0.5rem; /* Üstündeki breadcrumb ile arasını açar */
}
/* Sayfa Başlığı Altındaki Açıklama (hakkimizda.html düzeltmesinde eklendi) */
.page-subtitle {
    font-size: 1.125rem; /* 18px */
    color: var(--renk-gri-yazi);
    max-width: 48rem; /* 768px (Satır uzunluğunu sınırlar) */
    margin: 0.5rem 0 0 0; /* Başlığın altına boşluk */
}

/* Breadcrumb (İçerik Haritası) */
.breadcrumb {
    font-size: 0.875rem; /* 14px */
    color: var(--renk-gri-orta-yazi); /* Soluk renk */
}
.breadcrumb a {
    color: var(--renk-lacivert); /* Ana sayfa linki */
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline; /* Üzerine gelince altını çiz */
}

/* Ortak İçerik Bölümü (Sayfaların beyaz alanları) */
.content-section {
    padding-top: 4rem; /* 64px (Üst boşluk) */
    padding-bottom: 4rem; /* 64px (Alt boşluk) */
}
/* Ortak Bölüm Başlığı (H2) */
.section-title {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    color: var(--renk-lacivert);
    text-align: center; /* Varsayılan olarak ortalı */
    margin-bottom: 2rem; /* 32px (Altındaki içerikle arasını açar) */
    font-family: 'Montserrat', sans-serif;
}
/* Ortak Bölüm Alt Başlığı (Açıklama) */
.section-subtitle {
    font-size: 1.125rem; /* 18px */
    color: var(--renk-gri-yazi);
    max-width: 48rem; /* 768px (Satır uzunluğunu sınırlar) */
    margin: 0 auto 2.5rem auto; /* Üst(0)/Sağ(auto)/Alt(40px)/Sol(auto) */
    text-align: center; /* Ortalar */
    line-height: 1.7;
}

/* --- ANA SAYFA (index.html) Ek Stilleri --- */

/* Uzmanlık Kartları Grid (Geoteknik / Kıyı-Liman) */
.uzmanlik-grid {
    display: grid;              /* Izgara düzeni */
    grid-template-columns: 1fr; /* Mobilde tek sütun (tam genişlik) */
    gap: 2rem;                  /* 32px (Kartlar arası boşluk) */
}
@media (min-width: 768px) {
    .uzmanlik-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun (eşit genişlikte) */
    }
}

/* Uzmanlık Kartı */
.uzmanlik-card {
    display: block; /* Linkin tüm kutuyu kaplaması için */
    background-color: var(--renk-beyaz);
    border-radius: 0.75rem; /* 12px (Yuvarlak köşe) */
    overflow: hidden;       /* Resmin köşelerden taşmasını engeller */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    text-decoration: none;  /* Link çizgilerini kaldırır */
    color: var(--renk-gri-yazi);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover efekti için */
}
.uzmanlik-card:hover {
    transform: translateY(-5px); /* Üzerine gelince 5px yukarı kayar */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Gölge belirginleşir */
}
.uzmanlik-card img {
    width: 100%;      /* Tam genişlik */
    height: 15rem;    /* 240px (Sabit yükseklik) */
    object-fit: cover; /* Resmi kırparak sığdırır */
}
.uzmanlik-card-content {
    padding: 1.5rem; /* 24px (İç boşluk) */
}
.uzmanlik-card-content h3 {
    font-size: 1.25rem; /* 20px (Kart başlığı) */
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--renk-lacivert);
}
.uzmanlik-card-content p {
    font-size: 1rem; /* 16px */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.uzmanlik-card-content span {
    font-weight: 700;  /* Kalın */
    color: var(--renk-mavi); /* Vurgu mavisi */
}

/* CTA (Call to Action) Bandı */
.cta-band {
    background-color: var(--renk-lacivert); /* Lacivert arkaplan */
    color: var(--renk-beyaz);            /* Beyaz yazı */
    padding: 4rem 1.5rem;              /* İç boşluk (dikey 64px) */
    text-align: center;                /* İçeriği ortalar */
}
.cta-band h2 {
    font-size: 2rem; /* 32px (Başlık) */
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.cta-band p {
    font-size: 1.125rem; /* 18px (Açıklama) */
    color: var(--renk-gri-acik-yazi); /* Açık gri yazı */
    max-width: 42rem; /* Satır uzunluğunu sınırlar */
    margin: 1rem auto 0 auto; /* Üst(16px)/Sağ(auto)/Alt(0)/Sol(auto) */
}
.cta-band .cta-button {
    /* KULLANICI İSTEĞİ (DÜZELTME 2): Üst üste gelmeyi düzeltir */
    display: inline-block;     /* 'margin-top' özelliğinin çalışması için gereklidir */
    margin-top: 1.5rem;        /* 24px (Buton ile üstteki paragraf arasına boşluk koyar) */
    padding: 0.75rem 2.5rem;   /* 12px 40px (Daha büyük buton) */
    font-size: 1rem;           /* 16px (Yazı boyutu) */
    border-radius: 0.5rem;     /* 8px (Daha köşeli buton) */
}


/* --- HAKKIMIZDA (hakkimizda.html) Stilleri --- */
/* DÜZELTME 3: Bu bölümdeki stillerin tamamı eksikti, eklendi */

/* Responsive resim (Hakkımızda bölümündeki) */
.responsive-image {
    width: 100%;            /* Tam genişlik */
    height: auto;           /* Yükseklik otomatik */
    border-radius: 0.75rem;   /* 12px (Yuvarlak köşe) */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Belirgin gölge */
}

/* 3'lü Kart Grid Yapısı (Misyon, Vizyon, Kalite) */
.card-grid-3 {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde 1 sütun */
    gap: 2rem; /* 32px (Kartlar arası boşluk) */
}
@media (min-width: 768px) {
    .card-grid-3 {
        grid-template-columns: repeat(3, 1fr); /* Tablet/Desktop 3 sütun */
    }
}

/* Ortak Kart Stili (Misyon, Vizyon, Kalite kartları) */
.card {
    background-color: var(--renk-beyaz);
    padding: 2rem; /* 32px (İç boşluk) */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--renk-gri-acik-border); /* İnce çerçeve */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    height: 100%; /* Grid sırasındaki kartların eşit yükseklikte olmasını sağlar */
}

/* HTML'de kullanılan .text-center class'ı için */
.text-center {
    text-align: center;
}

/* DÜZELTME 3: "Temel Değerlerimiz" bölümündeki ikonları boyutlandırır */
.card-icon {
    /* KULLANICI İSTEĞİ: İkonları küçültür */
    width: 3.5rem;  /* 56px (İkon genişliği) */
    height: 3.5rem; /* 56px (İkon yüksekliği) */
    
    color: var(--renk-mavi); /* İkon rengi (değişkenlerden) */
    margin-bottom: 1rem;     /* 16px (Altındaki başlıkla arasına boşluk koyar) */
    display: inline-block;   /* 'text-align: center' ile ortalanmasını sağlar */
}

.card h3 {
    font-size: 1.25rem; /* 20px (Kart başlığı) */
    font-weight: 700;
    color: var(--renk-lacivert);
    margin-bottom: 0.5rem; /* Altındaki paragrafla arasını açar */
}

.card p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Madde işaretli liste (örn: Uzmanlıklarımız sayfasındaki) */
.bullet-list {
    list-style: none; /* Varsayılan liste işaretlerini kaldırır */
    padding-left: 0; /* Sol boşluğu sıfırlar */
    margin-top: 1.5rem; /* Üstündeki paragrafla arasını açar */
}

.bullet-list li {
    position: relative;  /* '::before' elemanını konumlandırmak için */
    padding-left: 1.75rem; /* 28px (İkon için solda boşluk bırakır) */
    margin-bottom: 0.75rem; /* 12px (Liste elemanları arası boşluk) */
    font-size: 1rem;
}

/* Liste elemanlarının başına özel 'tik' (check) ikonu ekler */
.bullet-list li::before {
    content: '✓'; /* Tik işareti */
    position: absolute; /* 'li' elemanına göre konumlanır */
    left: 0; /* Sol boşluğun başına gelir */
    top: 0;
    color: var(--renk-mavi); /* Vurgu mavisi */
    font-weight: 700; /* Kalın */
    font-size: 1.125rem; /* 18px */
}

/* Bölümler arası ayırıcı çizgi (Uzmanlıklarımız sayfasında) */
.section-divider {
    border: 0; /* Varsayılan <hr> stilini sıfırlar */
    height: 1px; /* 1px yükseklik */
    background-color: var(--renk-gri-acik-border); /* Çizgi rengi */
    margin: 4rem 0; /* 64px (Bölümler arası dikey boşluk) */
}


/* --- UZMANLIKLARIMIZ (uzmanliklarimiz.html) Stilleri --- */
/* DÜZELTME 4 & 5: Bu bölümdeki stillerin tamamı eksikti, eklendi */

/* Sekmeli (Tabs) Yapı */
.tabs-container {
    display: flex;
    flex-wrap: wrap; /* Mobilde butonlar alt alta düşer */
    border-bottom: 2px solid var(--renk-gri-acik-border); /* Alt çizgi */
    margin-bottom: 2rem; /* Altındaki içerikle arasını açar */
}

.tab-button {
    padding: 1rem 1.5rem; /* İç boşluk (dikey 16px, yatay 24px) */
    font-size: 1rem; /* 16px */
    font-weight: 700; /* Kalın */
    font-family: 'Montserrat', sans-serif;
    color: var(--renk-gri-orta-yazi); /* Pasif buton rengi */
    background-color: transparent; /* Şeffaf arkaplan */
    border: none; /* Çerçeve yok */
    border-bottom: 3px solid transparent; /* Altta gizli çizgi (aktif durum için) */
    cursor: pointer; /* El işareti */
    transition: color 0.3s ease, border-color 0.3s ease; /* Yumuşak geçiş */
    margin-bottom: -2px; /* Çizgiyle (border-bottom) tam hizalanır */
    
    /* KULLANICI İSTEĞİ (DÜZELTME 5): İkonları ve metni hizalar */
    display: inline-flex; /* Modern hizalama için */
    align-items: center;  /* İkon ve metni dikeyde ortalar */
    justify-content: center; /* Yatayda ortalar */
    gap: 0.5rem;         /* 8px (İkon ve metin arası boşluk) */
}
.tab-button:hover {
    color: var(--renk-lacivert); /* Üzerine gelince koyu mavi */
}
.tab-button.active { /* JS tarafından eklenen 'active' class'ı */
    color: var(--renk-mavi); /* Vurgu mavisi */
    border-bottom-color: var(--renk-mavi); /* Alttaki çizgiyi görünür yapar */
}

/* KULLANICI İSTEĞİ (DÜZELTME 5): İkonları boyutlandırır */
.tab-button svg {
    width: 1.25rem; /* 20px (İkon genişliği) */
    height: 1.25rem; /* 20px (İkon yüksekliği) */
    flex-shrink: 0; /* Küçük ekranlarda ikonun büzülmesini engeller */
}

/* Sekme İçeriği (Paneller) */
.tabs-content-container {
    padding: 2rem; /* 32px (İç boşluk) */
    background-color: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-acik-border); /* Çerçeve */
    border-top: none; /* Üstteki çerçeveyi kaldırır (buton çizgisiyle birleşir) */
    border-radius: 0 0 0.5rem 0.5rem; /* Alt köşeleri yuvarlar */
}

.tab-content {
    display: none; /* Varsayılan olarak gizli (JS 'active' class'ı ekler) */
}
.tab-content.active {
    display: block; /* Aktif olanı gösterir */
    animation: fadeIn 0.5s ease-in-out; /* Yumuşak giriş animasyonu */
}

/* Sekme içeriğindeki başlık (h3) */
.tab-content h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--renk-lacivert);
    margin-bottom: 1rem; /* Altındaki paragrafla arasını açar */
}
/* Sekme içeriğindeki paragraf (p) */
.tab-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}


/* --- REFERANSLARIMIZ (referanslarimiz.html) Stilleri --- */
/* KULLANICI İSTEĞİ (DÜZELTME 6): Tüm proje kartı yapısı "Resim Solda, İçerik Sağda" olacak şekilde güncellendi */

/* Filtre Butonları (Stilleri değişmedi) */
.filter-buttons {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}
.filter-button {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem; 
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--renk-lacivert);
    background-color: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-acik-border);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-button:hover {
    background-color: var(--renk-gri-arkaplan);
}
.filter-button.active { 
    background-color: var(--renk-mavi);
    color: var(--renk-beyaz);
    border-color: var(--renk-mavi);
}

/* Proje Galerisi Grid */
.project-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde 1 sütun */
    gap: 2rem; /* 32px (Kartlar arası boşluk) */
}
/* Desktopta 2 sütunlu grid (daha geniş kartlar için) */
@media (min-width: 1024px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Proje Kartı (Ana Kutu) */
.project-card {
    background-color: var(--renk-beyaz);
    border-radius: 0.75rem; /* 12px */
    overflow: hidden; /* Köşeleri ve taşmaları gizler */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* YAN YANA YERLEŞİM İÇİN */
    flex-direction: column; /* MOBİLDE (Varsayılan: Resim üstte, içerik altta) */
}
.project-card:hover {
    transform: translateY(-5px); /* Üzerine gelince 5px yukarı kayar */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* TABLET VE ÜZERİ (768px) - Yan Yana Yerleşime Geçiş */
@media (min-width: 768px) {
    .project-card {
        flex-direction: row; /* Resim solda, içerik sağda */
    }
}

/* Proje Kartı GÖRSEL Bölümü (Sol Taraf) */
.project-card-image {
    position: relative; 
    width: 100%; /* Mobilde tam genişlik */
    height: 14rem; /* 224px (Mobilde sabit yükseklik) */
}
.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kırparak sığdırır */
}

/* Tablet ve üzeri (yan yana) için Görsel Bölümü Stilleri */
@media (min-width: 768px) {
    .project-card-image {
        width: 40%; /* Desktopta %40 genişlik */
        height: auto; /* Yüksekliği içeriğe göre ayarlar */
        flex-shrink: 0; /* Küçülmesini engeller */
    }
}

/* Proje Kartı İÇERİK Bölümü (Sağ Taraf) */
.project-card-content {
    padding: 1.25rem; /* 20px */
    display: flex; /* İçeriklerin (yazı, lokasyon vb.) hizalanması için */
    flex-direction: column; /* İçerikleri dikey sıralar */
    width: 100%; /* Mobilde tam genişlik */
    flex-grow: 1; /* Esneyerek alanı doldurur */
}

/* Tablet ve üzeri (yan yana) için İçerik Bölümü Stilleri */
@media (min-width: 768px) {
    .project-card-content {
        width: 60%; /* Desktopta %60 genişlik */
        padding: 1.5rem; /* 24px (Daha fazla iç boşluk) */
    }
}

/* Kategori Etiketi (Görselden buraya taşındı) */
.project-card-category {
    padding: 0.25rem 0.75rem; /* 4px 12px (İç boşluk) */
    border-radius: 9999px; /* Tam yuvarlak */
    font-size: 0.75rem; /* 12px (Yazı boyutu) */
    font-weight: 700;
    color: var(--renk-beyaz);
    text-transform: uppercase;
    align-self: flex-start; /* Sola hizalar */
    margin-bottom: 0.75rem; /* 12px (Altındaki başlıkla arasını açar) */
}
/* Kategori Renkleri */
.project-card-category.geoteknik {
    background-color: var(--renk-toprak);
}
.project-card-category.kıyı-liman {
    background-color: var(--renk-mavi);
}
.project-card-category.diğer {
    background-color: #666;
}

/* Proje Kartı Başlığı (h3) */
.project-card-content h3 {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: var(--renk-lacivert);
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.5rem;
}

/* YENİ EKLENEN BİLGİ METNİ */
.project-card-description {
    font-size: 0.875rem; /* 14px */
    color: var(--renk-gri-yazi);
    line-height: 1.5;
    margin-bottom: 1rem; /* 16px (Altındaki lokasyon ile arasını açar) */
    flex-grow: 1; /* Esneyerek alanı doldurur (lokasyonu en alta iter) */
}

/* Proje Lokasyon (p) */
.project-card-location {
    font-size: 0.875rem; /* 14px */
    color: var(--renk-gri-orta-yazi);
    margin: 0; /* Paragrafın varsayılan margin'ini sıfırlar */
}

/* Proje Hizmet (span) */
.project-card-service {
    display: flex; /* (Gelecekte ikon eklenebilmesi için) */
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem; /* 14px */
    color: var(--renk-gri-orta-yazi);
    margin-top: 0.25rem; /* 4px (Lokasyon ile arasını açar) */
    font-weight: 500; /* Orta kalınlık */
}


/* --- İLETİŞİM (iletisim.html) Stilleri --- */

/* İletişim Formu */
.contact-form {
    display: flex;
    flex-direction: column; /* Form elemanlarını dikey sıralar */
    gap: 1.5rem; /* 24px (Form grupları arası boşluk) */
}
.form-group {
    display: flex;
    flex-direction: column; /* Etiket ve input'u dikey sıralar */
}
.form-group label {
    font-size: 0.875rem; /* 14px (Etiket) */
    font-weight: 700;
    color: var(--renk-lacivert);
    margin-bottom: 0.5rem; /* 8px (Input ile arasını açar) */
}
.form-group input,
.form-group textarea {
    width: 100%; /* Tam genişlik */
    padding: 0.75rem 1rem; /* İç boşluk */
    font-size: 1rem; /* 16px (Kullanıcı yazısı) */
    font-family: 'Roboto', sans-serif; /* Formlar varsayılan fontu almayabilir */
    border: 1px solid var(--renk-gri-acik-border); /* Çerçeve */
    border-radius: 0.5rem; /* 8px (Yuvarlak köşe) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Odaklanma efekti */
}
/* Form elemanına odaklanıldığında (focus) */
.form-group input:focus,
.form-group textarea:focus {
    outline: none; /* Tarayıcının varsayılan 'outline'ını kaldırır */
    border-color: var(--renk-mavi); /* Çerçeveyi mavi yapar */
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.2); /* Mavi bir parlama ekler */
}
.form-group textarea {
    resize: vertical; /* Sadece dikeyde yeniden boyutlandırılabilir */
    min-height: 8rem; /* 128px (Minimum yükseklik) */
}
/* Form Grid (Ad ve Soyad'ı yan yana koyar) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde tek sütun */
    gap: 1.5rem; /* 24px */
}
@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun */
    }
}

/* İletişim Bilgi Listesi (Formun sağı) */
.contact-info-list {
    list-style: none; /* Liste işaretlerini kaldırır */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px (Liste elemanları arası boşluk) */
}
.contact-info-list li {
    display: flex;
    align-items: flex-start; /* İkon ve yazıyı üstten hizalar */
    gap: 1rem; /* 16px (İkon ve yazı arası boşluk) */
}
.contact-info-list li svg {
    flex-shrink: 0; /* İkonun büzülmesini engeller */
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    color: var(--renk-mavi); /* İkon rengi */
    margin-top: 0.25rem; /* 4px (Yazı ile hizalamak için) */
}
.contact-info-list li span,
.contact-info-list li a {
    font-size: 1rem; /* 16px */
    color: var(--renk-gri-yazi);
    text-decoration: none;
    line-height: 1.6;
}
.contact-info-list li a:hover {
    color: var(--renk-mavi); /* Linklerin üzerine gelince mavi olur */
    text-decoration: underline; /* Altını çizer */
}

/* Harita Göster Harita Konteyneri */
#map-location {
    scroll-margin-top: 5rem; /* Scrolled olur */
}

/* Google Harita Konteyneri */
.map-container {
    width: 100%;
    height: 30rem; /* 288px (Harita yüksekliği) */
    border-radius: 0.75rem; /* 12px (Yuvarlak köşe) */
    overflow: hidden; /* Köşelerden taşan 'iframe'i gizler */
    margin-top: 2rem; /* 32px (Bilgi listesiyle arasını açar) */
    border: 1px solid var(--renk-gri-acik-border);
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0; /* 'iframe'in varsayılan çerçevesini kaldırır */
}


/* --- FOOTER (ALT BİLGİ) (Tüm Sayfalarda Ortak) --- */

.footer {
    background-color: var(--renk-lacivert); /* Lacivert arkaplan */
    color: var(--renk-gri-acik-yazi); /* Varsayılan yazı rengi (açık gri) */
    padding-top: 4rem; /* 64px (Üst boşluk) */
    padding-bottom: 2rem; /* 32px (Alt boşluk) */
    margin-top: auto; /* 'body'deki 'flex' ayarı sayesinde en alta sabitler */
}

/* Footer'daki 3'lü grid yapısı */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde tek sütun */
    gap: 3rem; /* 48px (Sütunlar arası boşluk) */
}
/* 'md' (768px) ve üzeri ekranlarda 2 sütunlu grid */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 'lg' (1024px) ve üzeri ekranlarda 3 sütunlu grid */
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Footer 1. Sütun (Logo) */
.footer-col-1 {
    grid-column: span 1 / span 1; /* Varsayılan olarak 1 sütun kaplar */
}
@media (min-width: 768px) {
    /* Tablette 2 sütunlu düzende 2 sütunu da kaplar */
    .footer-col-1 {
        grid-column: span 2 / span 2;
    }
}
@media (min-width: 1024px) {
    /* Desktopta 3 sütunlu düzende tekrar 1 sütun kaplar */
    .footer-col-1 {
        grid-column: span 1 / span 1;
    }
}

/* Footer'daki logo linki (beyaz yazı) */
.footer .logo-link span {
    color: var(--renk-beyaz);
}
.footer .logo-link img {
    display: block; /* Footer'da logo resmi her zaman görünür (mobilde de) */
}

/* Footer slogan yazısı */
.footer-col-1 p {
    margin-top: 1rem; /* 16px (Logo ile arasını açar) */
    font-size: 0.875rem; /* 14px */
    color: var(--renk-gri-orta-yazi); /* Orta gri yazı */
    max-width: 20rem; /* 320px (Satır uzunluğunu sınırlar) */
}

/* Sosyal medya ikonları */
.social-icons {
    display: flex;
    gap: 1rem; /* 16px (İkonlar arası boşluk) */
    margin-top: 1.5rem; /* 24px (Slogan ile arasını açar) */
}
.social-icons a {
    color: var(--renk-gri-orta-yazi); /* İkon rengi */
    transition: color 0.3s ease; /* Yumuşak renk geçişi */
}
.social-icons a:hover {
    color: var(--renk-beyaz); /* Üzerine gelince beyaz */
}
.social-icons svg {
    width: 1.5rem; /* 24px (İkon boyutu) */
    height: 1.5rem;
}

/* Footer başlıkları (Hızlı Linkler, İletişim) */
.footer-grid h3 {
    font-size: 0.875rem; /* 14px */
    font-weight: 600; /* Yarı kalın */
    letter-spacing: 0.05em; /* Harf arası boşluk */
    text-transform: uppercase; /* Tüm harfleri büyük */
    color: var(--renk-beyaz); /* Beyaz yazı */
    font-family: 'Montserrat', sans-serif;
}

/* Footer link listeleri (Hızlı Linkler ve İletişim) */
.footer-grid ul {
    margin-top: 1rem; /* 16px (Başlıkla arasını açar) */
    list-style: none; /* Liste işaretlerini kaldırır */
    padding: 0;
    display: flex;
    flex-direction: column; /* Dikey sıralar */
    gap: 0.75rem; /* 12px (Liste elemanları arası boşluk) */
}
/* İkonlu iletişim listesi için (<li>) */
.footer-grid li {
    display: flex;         /* İkon ve yazıyı yan yana getirir */
    align-items: flex-start; /* Üstten hizalar */
    gap: 0.75rem;            /* 12px (İkon ve yazı arası boşluk) */
}
/* Sadece Hızlı Linkler'deki linkler (<a>) */
.footer-grid ul a {
    font-size: 1rem; /* 16px */
    color: var(--renk-gri-acik-yazi);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-grid ul a:hover {
    color: var(--renk-beyaz);
}

/* İletişim bölümündeki ikonlar (SVG) */
.footer-grid li svg {
    flex-shrink: 0; /* İkonların büzülmesini engeller */
    margin-top: 0.25rem; /* 4px (Yazı ile hizalamak için) */
    width: 1.25rem; /* 20px (İkon boyutu) */
    height: 1.25rem;
    color: var(--renk-gri-orta-yazi); /* İkon rengi */
}
/* İletişim bölümündeki yazı (span) ve linkler (a) */
.footer-grid li span,
.footer-grid li a {
    font-size: 1rem; /* 16px */
}

/* Telif Hakkı (Copyright) bölümü */
.footer-copyright {
    margin-top: 3rem; /* 48px (Footer gridi ile arasını açar) */
    /* DÜZELTME: 't' harfi buradan kaldırıldı */
    border-top: 1px solid var(--renk-gri-border); /* Üst ayırıcı çizgi */
    padding-top: 2rem; /* 32px (Çizgi ile arasını açar) */
}
.footer-copyright p {
    font-size: 1rem; /* 16px */
    color: var(--renk-gri-orta-yazi);
    text-align: center; /* Ortalar */
}

/* --- ANİMASYONLAR --- */
/* Uzmanlıklar sayfasındaki sekme (tab) içeriği için yumuşak giriş */
@keyframes fadeIn {
    from {
        opacity: 0; /* %0 opaklıktan başlar */
        transform: translateY(10px); /* 10px aşağıdan gelir */
    }
    to {
        opacity: 1; /* %100 opaklığa ulaşır */
        transform: translateY(0); /* Normal pozisyonuna gelir */
    }
}