/* css/style.css dosyası */

/*
İÇİNDEKİLER
-----------
1.AYARLAR
    1.1 Root
    1.2 Karanlık Mod
    1.3 Erişilebilirlik
2.HEADER VE NAVİGASYON
3.HAMBURGER MENU
4.ANA SAYFA BÖLÜMLERİ
    4.1 Buton Bölümü
    4.2 Hakkımızda Bölümü
    4.3 Projeler Bölümü
    4.4 Müşteri Yorumları
5.FOOTER (ALT BİLGİ)
6.GENEL SAYFA AYARLARI
    6.1 Hakkımızda Ve Hizmetler
    6.2 Projeler
    6.3 İletişim
7.404 HATA SAYFASI
8.YUKARI ÇIK BUTONU
9.LIGHTBOX
10.ÇEREZ ONAY BANNER'I
11.SAYFA YÜKLEME ANİMASYONU
12.RESPONSIVE TASARIM
13.YAZDIRMA STİLLERİ
*/






/* ========================================= */
/* 1.AYARLAR                                 */
/* ========================================= */

body {
    font-family: Arial, sans-serif; /* Okunabilir bir font belirleyelim */
    margin: 0; /* Sayfanın kenarlarındaki varsayılan boşluğu kaldıralım */
    padding: 0;
    color: var(--renk-metin-ana); /* Genel metin rengi */
}

.container {
    width: 90%; /* İçerik alanının genişliği ekranın %90'ı olsun */
    max-width: 1200px; /* Ama en fazla 1200px olsun */
    margin: 0 auto; /* Konteyneri yatayda ortalamak için sihirli kod */
}





/* ========================================= */
/* 1.1 ROOT                                  */
/* ========================================= */
:root {
  
  --renk-ana-kirmizi: #ba0000;
  --renk-koyu-kirmizi: #900000;
  --renk-ana-mavi: #00114b;
  --renk-acık-mavi:#001761;
  --renk-beyaz: #ffffff;
  --renk-siyah: #000000;

  --renk-metin-ana: #222;
  --renk-metin-ikincil: #555;
  --renk-metin-footer-acik: #e0e0e0;
  --renk-metin-footer: #f2f2f2;
  --renk-metin-copyright: #d1adad;

  --renk-arkaplan-acik-gri: #f9f9f9;
  --renk-arkaplan-sayfa-basligi: #f4f4f4;
  
  --renk-kenarlik-ince: #eee;
  --renk-kenarlik-normal: #ddd;
  --renk-kenarlik-form: #ccc;

  --golge-hafif: rgba(0, 0, 0, 0.1);
  --golge-belirgin: rgba(0, 0, 0, 0.15);
  --katman-hero: rgba(0, 0, 0, 0.5);
  --arkaplan-mobil-menu: rgba(255, 255, 255, 0.98);
}





/* ========================================= */
/* 1.2 KARANLIK MOD                          */
/* ========================================= */

/* style.css dosyasının en başına, :root'un altına ekle */

body.dark-mode {
    --karanlik-siyah:#000000


}



/* Tema Değiştirme Düğmesi */
#theme-toggle {
  cursor: pointer;
  padding: 10px 30px;
  background-color: var(--renk-ana-kirmizi);
  color: var(--renk-beyaz);
  border: none;
  border-radius: 25px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px var(--golge-hafif);

}












/* ========================================= */
/* 1.3 ERİŞİLEBİLİRLİK                       */
/* ========================================= */
:focus-visible {
    /* Dış çizgi: 3px kalınlığında, ana tema rengimizde ve kesintisiz */
    outline: 3px solid var(--renk-ana-kirmizi);
    
    /* Element ile dış çizgi arasına 2px boşluk bırak */
    outline-offset: 2px;
    
    /* Dış çizginin köşelerini de hafif yuvarlat (isteğe bağlı) */
    border-radius: 5px; 
}













/* ========================================= */
/* 2.  HEADER VE NAVİGASYON                  */
/* ========================================= */
header {
    background-color: var(--renk-beyaz); /* Beyaz arkaplan */
    padding: 20px 0; /* Üstten ve alttan 20px boşluk */  
    border-bottom: 1px solid var(--renk-kenarlik-ince); /* Altına ince bir çizgi */
    box-shadow: 0 2px 5px var(--golge-hafif); /* Hafif bir gölge efekti */
    position: relative; /* Konumlandırma bağlamı oluşturur */
    z-index: 1000;      /* Header'ı diğer tüm elementlerin üzerine çıkarır */
}

header .container {
    display: flex; /* Logo ve menüyü yan yana getirmek için */
    justify-content: space-between; /* Aralarına boşluk koyarak iki uca yaslamak için */
    align-items: center; /* Dikeyde ortalamak için */
}

.nav-tema-container {
    display: flex;
    align-items: center;
}

.logo {
    font-size: 36px; /* Logo yazısının boyutu */
    font-weight: bold; /* Kalın yazı */
    color: var(--renk-ana-kirmizi); /* Kırmızı bir renk */
    text-decoration: none; /* Linkin altındaki çizgiyi kaldır */
    transition: color 0.3s ease;
}

.logo:hover {
    color: var(--renk-koyu-kirmizi); /* Örnek bir hover efekti ekleyelim */
}



/* Navigasyon Menüsü */
nav ul {
    list-style-type: none; /* Liste maddelerinin başındaki noktaları kaldır */
    margin: 0;
    padding: 0;
    display: flex; /* Menü elemanlarını yan yana dizmek için */
}

nav ul li {
    margin-left: 25px; /* Menü elemanları arasına boşluk bırak */
}

nav ul li a {
    text-decoration: none; /* Linklerin altındaki çizgiyi kaldır */
    color: var(--renk-metin-ikincil); /* Metin rengi */
    font-weight: 600; /* Biraz daha kalın yazı */
    font-size: 16px;
    padding: 5px 0; /* Tıklama alanını biraz büyütelim */
    transition: color 0.3s ease; /* Renk değişimine yumuşak bir geçiş efekti */
}

nav ul li a:hover {
    color: var(--renk-koyu-kirmizi); /* Fare üzerine gelince renk kırmızıya dönsün */
}

nav ul li a:focus-visible {
    outline-color: var(--renk-ana-mavi);
}













/* ========================================= */
/* 3. HAMBURGER MENU                         */
/* ========================================= */
.hamburger-menu {
    display: none; /* Masaüstünde gizli olsun */
    font-size: 28px;
    cursor: pointer;
    color: var(--renk-ana-kirmizi);
}










/* ========================================= */
/* 4.ANA SAYFA BÖLÜMLERİ                     */
/* ========================================= */
.hero {
    background-image: url('../images/hero-background.webp'); /* Resmin dosya yolu */
    background-size: cover; /* Resmi alana sığdır, taşan kısımları kes */
    background-position: center; /* Resmi ortala */
    height: 90vh; /* Ekran yüksekliğinin %85'i kadar olsun */
    color: var(--renk-beyaz); /* Üzerindeki tüm yazıların rengi beyaz olsun */

    /* İçeriği (hero-content) dikey ve yatayda ortalamak için Flexbox kullanıyoruz */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* hero-content içindeki metinleri de ortala */
    position: relative; /* Gölge katmanı için gerekli */
}

/* Okunabilirliği artırmak için resmin üzerine koyu bir katman ekleyelim */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--katman-hero); /* Siyah, %50 şeffaf */
}

/* İçerik katmanının gölgenin üstünde kalmasını sağlıyoruz */
.hero-content {
    position: relative; 
    z-index: 1;
    max-width: 800px; /* Metnin çok fazla genişlemesini önle */
}

.hero h1 {
    font-size: 48px; /* Ana başlık boyutu */
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px; /* Paragraf boyutu */
    margin-bottom: 30px;
}













/* ========================================= */
/* 4.1 BUTON BÖLÜMÜ                          */
/* ========================================= */
.cta-button {
    background-color: var(--renk-ana-kirmizi); /* kırmızı arkaplan */
    color: var(--renk-beyaz); /* Beyaz metin */
    padding: 15px 30px; /* Butonun iç boşlukları */
    text-decoration: none; /* Link alt çizgisini kaldır */
    font-weight: bold; /* Kalın yazı */
    border-radius: 5px; /* Kenarları yuvarlat */
    transition: background-color 0.3s ease; /* Renk değişimine yumuşak geçiş */
}

.cta-button:hover {
    background-color: var(--renk-koyu-kirmizi); /* Fare üzerine gelince biraz daha koyu kırmızı */
}












/* ========================================= */
/* 4.2 HAKKIMIZDA BÖLÜMÜ                     */
/* ========================================= */
.hakkimizda {
    padding: 30px 0; /* Bölümün üstünden ve altından boşluk */
    background-color: var(--renk-arkaplan-acik-gri); /* Çok hafif bir gri arkaplan rengi */
}

.hakkimizda-icerik {
    display: flex; /* İçindeki resim ve metin div'lerini yan yana getir */
    align-items: center; /* İçerikleri dikeyde ortala */
    gap: 30px; /* Resim ve metin arasına 50px boşluk koy */
}

.hakkimizda-resim {
    flex: 1; /* Esnek kutunun kapladığı alanın 1 birimini al (yaklaşık %50) */
}

.hakkimizda-resim img {
    width: 100%; /* Resim, kendi kapsayıcısının %100'ünü kaplasın */
    border-radius: 8px; /* Resmin köşelerini hafifçe yuvarlat */
    box-shadow: 0 4px 15px var(--golge-hafif); /* Resme derinlik katmak için gölge */
}

.hakkimizda-metin {
    flex: 1; /* Bu da esnek kutunun 1 birimini alsın (yaklaşık %50) */
}

.hakkimizda-metin h2 {
    font-size: 32px;
    color: var(--renk-ana-kirmizi); /* kırmızı renk ile tema bütünlüğü */
    text-transform: uppercase; /* BÜYÜK HARFLERLE YAZ */
    letter-spacing: 1px; /* Harfler arasına boşluk */
    margin-bottom: 10px;
}

.hakkimizda-metin h3 {
    font-size: 36px;
    color: var(--renk-ana-mavi);
    margin-top: 0;
    margin-bottom: 20px;
}

.hakkimizda-metin p {
    font-size: 16px;
    line-height: 1.7; /* Satır yüksekliği, metnin daha okunaklı olmasını sağlar */
    color: var(--renk-metin-ikincil);
}

.bolum-basligi {
    text-align: center;
    font-size: 38px;
    color: var(--renk-ana-kirmizi);
    margin-bottom: 50px;
}











/* ========================================= */
/* 4.3 PROJELER BÖLÜMÜ                       */
/* ========================================= */
.one-cikan-projeler {
    padding: 80px 0;
    background-color: var(--renk-beyaz); /* Arka plan bu sefer beyaz kalsın */
}

.projeler-grid {
    display: flex;
    justify-content: space-between; /* Kartlar arasına boşluk bırakarak yay */
    gap: 30px; /* Kartlar arasındaki boşluk */
    flex-wrap: wrap;
}

.proje-karti {
    background-color: var(--renk-beyaz);
    border-radius: 8px; /* Kart köşelerini yuvarlat */
    box-shadow: 0 4px 15px var(--golge-hafif);
    overflow: hidden; /* Taşan kısımları (resmin köşeleri) gizle */
    flex-basis: calc(33.333% - 20px); /* Üç sütunlu yapı için temel genişlik ayarı */
    display: flex;
    flex-direction: column; /* Kart içeriğini dikeyde sırala */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover efekti için geçiş */
}

.proje-karti:hover {
    transform: translateY(-10px); /* Fare üzerine gelince kart yukarı kaysın */
    box-shadow: 0 8px 25px var(--golge-belirgin); /* Gölgeyi belirginleştir */
}
.proje-karti:hover img {
    transform: scale(1.05); /* Resmi %5 büyüt */
}

.proje-karti img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Resmin oranını bozmadan alanı kaplamasını sağlar */
    transition: transform 0.4s ease;
}

.kart-icerik {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* İçeriğin kartın kalan boşluğunu doldurmasını sağla */
}

.kart-icerik h3 {
    font-size: 22px;
    color: var(--renk-ana-mavi);
    margin-top: 0;
    margin-bottom: 15px;
}

.kart-icerik p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--renk-metin-ikincil);
    flex-grow: 1; /* Paragrafın mevcut alanı doldurmasını sağlar, butonları hizalar */
    margin-bottom: 20px;
}

.kart-buton {
    display: inline-block;
    background-color: transparent;
    color: var(--renk-ana-kirmizi);
    padding: 10px 20px;
    border: 2px solid var(--renk-ana-kirmizi);
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: auto; /* Butonu kartın en altına it */
}

.kart-buton:hover {
    background-color: var(--renk-ana-kirmizi);
    color: var(--renk-beyaz);
}

.proje-karti:focus-within {
    outline: 3px solid var(--renk-ana-kirmizi);
    outline-offset: 2px;
}












/* ========================================= */
/* 4.4 MÜŞTERİ YORUMLARI                     */
/* ========================================= */
.yorumlar {
    background-color: var(--renk-arkaplan-acik-gri);
    padding: 80px 0;
}
.yorumlar-grid {
    display: flex;
    gap: 30px;
}
.yorum-karti {
    flex: 1;
    background-color: var(--renk-beyaz);
    padding: 30px;
    border-radius: 8px;
    box-shadow:0 4px 15px var(--golge-hafif);
    border-left: 5px solid var(--renk-ana-kirmizi);
}
.yorum-karti p {
    font-style: italic;
    margin-bottom: 20px;
    color: var(--renk-metin-ikincil);
}
.yorum-karti cite {
    font-weight: bold;
    color: var(--renk-ana-mavi);    
}












/* ========================================= */
/* 5.FOOTER (ALT BİLGİ)                      */
/* ========================================= */
footer {
    background-color: var(--renk-ana-kirmizi); /* Ana tema rengimiz (koyu kırmızı) */
    color: var(--renk-metin-footer); /* Ana metinler için yumuşak bir beyaz tonu */
    padding: 60px 0 20px 0;
}

.footer-icerik {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-bolum {
    flex: 1; /* Sütunların mevcut alanı eşit paylaşmasını sağla */
}

.logo-footer {
    display: inline-block;
    font-size: 28px;
    font-weight: bold;
    color: var(--renk-beyaz); /* Logonun öne çıkması için saf beyaz */
    text-decoration: none;
    margin-bottom: 20px;
}

.footer-bolum h3 {
    font-size: 20px;
    color: var(--renk-beyaz); /* Başlıklar için saf beyaz */
    margin-bottom: 25px;
 /* border-bottom çizgisi kaldırıldı */
    padding-bottom: 10px;
}

.footer-bolum p {
    line-height: 1.8;
    color: var(--renk-metin-footer-acik); /* paragraflar için biraz daha soluk bir beyaz */
}

.footer-bolum ul {
    list-style: none;
    padding: 0;
}

.footer-bolum ul li {
    margin-bottom: 12px;
}

.footer-bolum a {
    color: var(--renk-metin-footer-acik); /* Linkler için soluk beyaz */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bolum a:hover {
    color: var(--renk-ana-mavi); /* Vurgu ve dikkat çekicilik için altın sarısı bir hover rengi */
}

/* Footer'ın en altındaki telif hakkı kısmı */
.footer-alt {
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    color: var(--renk-metin-copyright); /* Telif hakkı yazısı için daha az dikkat çeken, kırmızıya dönük soluk bir renk */
}

footer :focus-visible {
    outline-color: var(--renk-beyaz);
}













/* ========================================= */
/* 6. GENEL SAYFA AYARLARI                    */
/* ========================================= */
.sayfa-basligi {
    background-color: var(--renk-arkaplan-sayfa-basligi);
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid var(--renk-kenarlik-normal);
}

.sayfa-basligi h1 {
    color: var(--renk-ana-kirmizi);
    font-size: 42px;
    margin: 0;
}












/* ========================================= */
/* 6.1 HAKKIMIZDA,HİZMETLER,SSS              */
/* ========================================= */
.hakkimizda-detay {
    padding: 80px 0;
}

.misyon-vizyon {
    display: flex;
    gap: 50px;
    text-align: center;
    margin-top: 40px;
}

.misyon, .vizyon {
    flex: 1;
    background-color: var(--renk-arkaplan-acik-gri);
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px var(--golge-hafif);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.misyon:hover, .vizyon:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px var(--golge-belirgin);
}
.misyon-vizyon h3 {
    color: var(--renk-ana-kirmizi);
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 15px;
}
.misyon-vizyon p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--renk-metin-ana);
}



/* HİZMETLER */
.hizmetler-grid {
    display: flex;
    justify-content: center; /* Kartları ortala */
    flex-wrap: wrap;
    gap: 30px; /* Kartlar arası boşluk */
}

.hizmet-karti {
    background-color: var(--renk-arkaplan-acik-gri); /* Hafif gri arkaplan */
    border-radius: 8px; /* Proje kartları gibi yuvarlak köşeler */
    padding: 40px 30px;
    text-align: center;
    flex-basis: calc(25% - 23px); /* 4'lü yapı için temel genişlik */
    max-width: 300px;
    border-top: 5px solid var(--renk-ana-kirmizi); /* Başlığa vurgu */
    box-shadow: 0 4px 15px var(--golge-hafif);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hizmet-karti:hover {
    transform: translateY(-10px); /* Proje kartları gibi hover efekti */
    box-shadow: 0 8px 25px var(--golge-belirgin);
}

.kart-ikon {
    font-size: 48px;
    color: var(--renk-ana-mavi); /* Ana tema rengi */
    margin-bottom: 25px;
}

.hizmet-karti h3 {
    font-size: 22px;
    color: var(--renk-ana-mavi); /* Ana tema rengi */
    margin-top: 0;
    margin-bottom: 15px;
}

.hizmet-karti p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--renk-metin-ana);
}




/* SIKÇA SORULAN SORULAR (SSS) */
.sss-akordiyon {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--renk-kenarlik-normal);
}

.sss-item {
    border-bottom: 1px solid var(--renk-kenarlik-normal);
}

.sss-soru {
    width: 100%;
    padding: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--renk-metin-ana);
    text-align: left;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.sss-soru:hover {
    background-color: var(--renk-arkaplan-acik-gri);
}


.sss-ikon {
    font-size: 24px;
    font-weight: bold;
    color: var(--renk-ana-kirmizi);
    transition: transform 0.3s ease;
}

.sss-cevap {
    /* Açılıp kapanma animasyonu için en iyi yöntem */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.sss-cevap p {
    padding: 0 20px;
    margin-top: 0;
    line-height: 1.7;
    color: var(--renk-metin-ikincil);
}

/* JavaScript ile eklenecek olan 'active' durumu */
.sss-item.active .sss-soru {
    background-color: var(--renk-arkaplan-acik-gri);
}


.sss-item.active .sss-cevap {
    max-height: 200px; /* Cevabın sığacağı kadar bir yükseklik */
    padding-bottom: 20px;
}

.sss-item.active .sss-ikon {
    transform: rotate(45deg); /* + ikonunu X ikonuna çevirir */
}













/* ========================================= */
/* 6.2 PROJELER                              */
/* ========================================= */
.proje-galerisi {
    padding: 80px 0;
    background-color: var(--renk-arkaplan-acik-gri);
}






/* ========================================= */
/* 6.2 İLETİŞİM                              */
/* ========================================= */
.iletisim-sayfasi {
    padding: 80px 0;
}

.iletisim-icerik {
    display: flex;
    gap: 50px;
}

.iletisim-sol, .iletisim-sag {
    flex: 1; /* İki sütun da eşit genişlikte olsun */
}

.iletisim-sol h2 {
    color: var(--renk-ana-kirmizi);
}


.bilgi-listesi li strong {
    color: var(--renk-ana-kirmizi);
    list-style: none;
    padding: 0;
    line-height: 2; /* Satır aralarını açalım */
    font-size: 16px;
}

.bilgi-listesi a {
    color: var(--renk-ana-kirmizi);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
.bilgi-listesi a:hover {
    color: var(--renk-ana-kirmizi);
}




/* İLETİŞİM FORMU */
.iletisim-formu input,
.iletisim-formu textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--renk-kenarlik-form);
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Padding ve border'ın genişliğe dahil edilmesini sağlar */
}

.iletisim-formu button {
    width: 100%;
    border: none;
    cursor: pointer;
}



/* HARİTA*/
.iletisim-sag iframe {
    width: 100%;
    height: 100%; /* Kapsayıcısının tamamını doldur */
    min-height: 450px; /* Çok küçülmesini engelle */
    border: 0;
    border-radius: 8px; /* Köşeleri yuvarlat */
}





/* ========================================= */
/* 7.FORM DOĞRULAMA                          */
/* ========================================= */
.form-sonuc {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    display: none; /* Başlangıçta gizli */
}
.form-sonuc.basari {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block; /* Başarılı olunca görünür yap */
}
.form-sonuc.hata {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block; /* Hata olunca görünür yap */
}





/* ========================================= */
/* 7. 404 HATA SAYFASI                       */
/* ========================================= */
.hata-sayfasi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
    min-height: calc(100vh - 160px); /* Ekranın yüksekliğinden header ve footer'ı çıkararak ortala */
}

.hata-sayfasi h1 {
    font-size: 15vw; /* Ekran genişliğine göre büyüyüp küçülen birim */
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin: 0;
}

.hata-sayfasi h2 {
    font-size: 3vw;
    color: var(--dark-blue);
    margin: 0 0 20px 0;
}

.hata-sayfasi p {
    font-size: 18px;
    color: var(--text-color-light);
    max-width: 500px; /* Metnin çok fazla yayılmasını önle */
    margin: 0 auto 30px auto;
}






/* ========================================= */
/* 8. YUKARI ÇIK BUTONU                      */
/* ========================================= */
#scrollTopBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Sayfa kaysa bile sabit kal */
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--renk-ana-kirmizi); /* kırmızı tema rengi */
    color: var(--renk-beyaz);
    text-decoration: none;
    border-radius: 50%; /* Tamamen yuvarlak yap */
    font-size: 24px;
    box-shadow: 0 4px 10px var(--golge-hafif);
    z-index: 1000; /* Diğer tüm elementlerin üzerinde dursun */
    
    /* Başlangıçta gizli olsun */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Aşağıda başlasın */
    transition: all 0.4s ease;
}

/* JavaScript ile eklenecek 'visible' class'ı */
#scrollTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Kendi pozisyonuna gelsin */
}

#scrollTopBtn:hover {
    background-color: var(--renk-ana-mavi); /* Hover'da mavi */
}

/* Mobil Menü Açık Durumu (JavaScript ile bu class eklenir) */
header nav.mobil-menu-aktif {
    display: flex; /* 'display: none' kuralını ezip menüyü görünür yap */
    position: absolute; /* Sayfa içeriğinin üzerine çıkmasını sağla */
    top: 80px; /* Header'ın yüksekliğine göre ayarla, hemen altında başlasın */
    left: 0;
    width: 100%;
    background-color: var(--arkaplan-mobil-menu); /* Hafif şeffaf beyaz */
    backdrop-filter: blur(5px); /* Arka planı bulanıklaştır (Modern görünüm) */
    box-shadow: 0 5px 15px var(--golge-hafif);
    
    /* Menü elemanlarını dikeyde sırala */
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

header nav.mobil-menu-aktif ul {
    flex-direction: column; /* Liste elemanlarını dikey yap */
    gap: 20px; /* Linkler arasına boşluk koy */
}

header nav.mobil-menu-aktif ul li {
    margin-left: 0; /* Masaüstünden kalan sol boşluğu sıfırla */
}

header nav.mobil-menu-aktif ul li a {
    font-size: 20px; /* Linklerin yazı boyutunu büyüt */
}








/* ========================================= */
/* 9. LIGHTBOX                               */
/* ========================================= */
#baguetteBox-overlay {
    background-color: rgba(60, 64, 69, 0.9) !important; /* Arka plan rengini tema rengimizle uyumlu yap */
}

#baguetteBox-overlay .full-image img {
    max-width: 80%;   /* genişliği ekranın %70’i ile sınırla */
    max-height: 80%;  /* yüksekliği ekranın %70’i ile sınırla */
    object-fit: contain; /* orantıyı koruyarak sığdır */
}





/* ========================================= */
/* 10. ÇEREZ ONAY BANNER'I                   */
/* ========================================= */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--renk-beyaz);
    color: var(--renk-metin-ana);
    padding: 18px 30px;
    z-index: 1001 ;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
    font-size: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 -3px 12px var(--golge-belirgin);
    max-width: 100vw; /* Ekran genişliğini aşmasını engelle */
    overflow: hidden; /* Taşan içeriği gizle */
    
}

.cookie-banner.visible {
    display: flex;
    animation: slideUp 0.4s ease-out;
}

.cookie-banner p {
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.cookie-banner .cta-button {
    padding: 12px 22px;
    border-radius: 6px;
    border: none;
    background: var(--renk-ana-kirmizi);
    color: var(--renk-beyaz);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.cookie-banner .cta-button:hover {
    background: var(--renk-koyu-kirmizi);
    transform: scale(1.05);
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}





/* ========================================= */
/* 11. SAYFA YÜKLEME ANİMASYONU              */
/* ========================================= */
#loader-wrapper {
    position: fixed; /* Sayfanın üzerinde sabit kal */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--renk-beyaz); /* Temaya uygun arkaplan */
    z-index: 9999; /* Her şeyin en üstünde olmalı */

    /* İçindeki spinner'ı ortalamak için */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Kaybolma efekti için */
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

/* JavaScript ile eklenecek olan gizleme sınıfı */
#loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Spinner animasyonu */
.loader {
    border: 8px solid var(--renk-arkaplan-acik-gri); /* Halkanın açık gri kısmı */
    border-top: 8px solid var(--renk-ana-kirmizi); 
    border-radius: 50%; /* Tam yuvarlak yap */
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* Animasyonu uygula */
}

/* Dönme animasyonunu tanımla */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}














/* ========================================= */
/* 12.RESPONSIVE TASARIM                     */
/* ========================================= */
/* Tablet Boyutu (992px ve altı) */
@media (max-width: 992px) {
    .container {
        width: 95%; /* Konteyneri biraz daha genişletelim */
    }

    /* İki sütunlu yapıları alt alta getir */
    .hakkimizda-icerik, .iletisim-icerik {
        flex-direction: column; /* Flex yönünü dikey yap */
    }
    
    .projeler-grid {
        justify-content: center; /* Kartlar ortalansın */
        flex-wrap: wrap;
    }

    /* Proje kartlarını tablette 2'li yapıda göster */
    .proje-karti {
        flex-basis: calc(50% - 20px); /* Genişlik: %50 eksi boşluk */
    }
    
    .footer-icerik {
        flex-direction: column;
        text-align: center;
    }
    
}

/* Mobil Boyutu (768px ve altı) */
@media (max-width: 768px) {
    /* Başlık ve metin boyutlarını mobil için küçültelim */
    .hero h1 { font-size: 36px; }
    .hero p { font-size: 18px; }
    .bolum-basligi { font-size: 32px; }
    .hakkimizda-metin h3 { font-size: 28px; }

    .misyon-vizyon {
        flex-direction: column;
    }

    /* Proje kartlarını mobilde tek sütun yap */
    .proje-karti {
        flex-basis: 90%; /* Neredeyse tam genişlik */
    }
    
    /* Mobil Menü Hazırlığı */
    header nav {
        display: none; /* Masaüstü menüyü gizle */
    }

    .hamburger-menu {
        display: block; /* Hamburger ikonunu göster */
    }
    
    .cookie-banner {
        flex-direction: column;
        padding: 20px;
    }
    .cookie-banner .cta-button {
        width: 100%;
        margin-top: 15px;
    }

}







/* ========================================= */
/* 13. YAZDIRMA STİLLERİ                     */
/* ========================================= */
@media print {

    /* 1. TÜM GEREKSİZ ELEMENTLERİ GİZLE */
    /* Sayfayı tek sayfaya sığdırmak için en önemli adım budur. */
    /* Yazdırılmasını istemediğiniz her şeyin class veya id'sini buraya ekleyin. */
    header,
    footer,
    nav,
    aside,
    form,
    .hero,
    .cta-button,
    .kart-buton,
    .hamburger-menu,
    .cookie-banner,
    #scrollTopBtn {
        display: none !important;
    }

    /* 2. GENEL SAYFA VE YAZI AYARLARI */
    /* Tüm elementlerdeki gölgeleri, arka planları sıfırla ve yazıyı siyah yap */
    * {
        background: transparent !important;
        color: var(--renk-siyah) !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-left: none !important;
        border-top: none !important;
        margin: none!important;
        padding: none!important;
    }


    

    /* 3. İÇERİĞİ SAYFANIN TAMAMINA YAY */
    /* Ana içeriğin kenar boşlukları olmadan tüm sayfayı kullanmasını sağla */
    .container,
    main,
    section,
    article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* İçeriklerin sayfa ortasında bölünmesini engelle */
    .misyon,.vizyon,.hizmet-karti,.one-cikan-projeler,
    img, 
    .proje-karti,
    .hakkimizda-icerik {
        page-break-inside: avoid;
    }
}