* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Poppins', sans-serif;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      color-scheme: light;
    }
    
    /* --- GENEL CONTAINER AYARI --- */
.container {
    max-width: 90%;
    margin: 0 auto; /* Ortalar */
    padding: 0 15px; /* Mobilde kenar boşluğu bırakır */
    width: 100%;
}
    
    /* Sayfa içeriğini içeren yeni kapsayıcı */
    .page-wrapper {
        flex: 1; /* Esnek bir şekilde kalan boşluğu doldurur */
    }

    /* Sticky Navbar */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 80px;
      background-color: #fff;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      z-index: 1000;
      background-color: rgba(255, 255, 255, 0);
      box-shadow: none; 
      transition: background-color 0.5s ease, box-shadow 0.5s ease; 
    }
    
    .navbar.scrolled {
      background-color: rgba(250, 250, 250, 0.9);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Gölge ekle */
    }

    .logo {
      flex-grow: 1; 
      text-align: center; 
    }
    
    .logo a {
      display: inline-block;
    }

    .logo img {
       max-width: 150px; 
       height: auto;
       display: block;
       margin: 0 auto; 
    }

    .menu-icon {
      font-size: 1.8rem;
      cursor: pointer;
    }
    
    .menu-icon i {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    /* Side Menu */
    .side-menu {
      position: fixed;
      top: 0;
      left: -70%;
      height: 100%;
      background-color: #f4f4f4;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
      transition: left 0.5s ease;
      padding: 40px 20px;
      z-index: 1002;
      min-width: 300px;
      padding-top: 80px;
    }

    .side-menu.active {
      left: 0;
    }

    .side-menu ul {
      list-style: none;
      cursor: pointer;
      padding-top: 10px;
    }

    .side-menu ul li {
      margin-bottom: 10px;
      font-size: 1.1rem;
    }
    
    /* Alt Menü Stilleri */
    .side-menu ul li a {
      display: block; /* Bağlantıların tüm satırı kaplaması için */
      text-decoration: none; /* Alt çizgiyi kaldırır */
      color: #333; /* Renk */
      padding: 5px 0; /* İç boşluk */
      transition: color 0.3s ease;
    }
    
    .side-menu ul li a:hover {
    color: #215c9e; /* Mavi renk örneği */
    }
    
    /* Sidebar Sosyal Medya İkonları */
    .side-menu .social-icons {
      position: absolute; /* Butonları sidebar'a göre konumlandırır */
      bottom: 20px; /* Sidebar'ın altından 20px yukarıda durur */
      left: 0;
      right: 0;
      display: flex;
      justify-content: center; /* İkonları yatayda ortalar */
      gap: 20px; /* İkonlar arasında boşluk bırakır */
    }
    
    .side-menu .social-icons a {
      color: #333; /* İkon rengi */
      font-size: 1.5rem; /* İkon boyutu */
      transition: color 0.3s ease;
    }
    
    .side-menu .social-icons a:hover {
      color: #215c9e; /* Üzerine gelindiğinde renk değişimi */
    }
    
    .side-menu .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 1.8rem;
      cursor: pointer;
      color: #333; /* Rengi istediğiniz gibi değiştirebilirsiniz */
      transition: color 0.3s ease;
      z-index: 1002; /* Sidebar'ın üzerinde görünmesi için yüksek z-index */
    }
    
    .submenu-toggle:hover {
    color: #007bff; /* Aynı mavi renk */
    }

/* Alt Menü Container */
    .submenu {
      list-style: none;
      padding-left: 20px; /* Alt menüleri sağa yaslar */
      display: none; /* Varsayılan olarak gizli tutar */
      transition: max-height 0.3s ease-in-out;
      max-height: 0;
      overflow: hidden; /* Gizlenen içeriği saklar */
    }

    .submenu.open {
      display: block;
      max-height: 500px; /* Menünün yüksekliğinden daha büyük bir değer */
    }

/* Ok İkonu Stilleri */
    .submenu-toggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.submenu-toggle .fas {
      transition: transform 0.3s ease; /* Ok dönüşü için animasyon */
    }

.submenu-toggle.active .fas {
      transform: rotate(-180deg); /* Menü açıkken oku döndürür */
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.2);
      display: none;
      z-index: 1001;
    }

    .overlay.active {
      display: block;
    }

/* Video Galeri Stilleri */
.video-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 1060px;
    z-index: 999;
    overflow: hidden;
}

/* "Geleceğin Enerjisi" için stil */
.video-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam ortalar */
    width: 100%; /* Genişlik sorunu olmaması için */
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.video-text-main {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 2.8vw;
    font-weight: 300; /* Senin orijinal tercihin */
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 2s forwards;
    animation-delay: 1s;
    margin-bottom: 10px; 
}

.video-text-sub {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    font-size: 2vw;
    font-weight: 400; /* Senin orijinal tercihin */
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 2s forwards;
    animation-delay: 2s;
}

.video-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.video-slide {
    flex: 0 0 100%;
    width: 100%;
}

.video-item {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Buton Stilleri */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.2rem; /* İkonların boyutu */
    z-index: 10;
    width: 40px; /* Butonun genişliği */
    height: 40px; /* Butonun yüksekliği */
    border-radius: 50%; /* Yuvarlak şekil */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    padding: 0; /* İç boşluğu sıfırla, böylece ikon tam ortaya hizalanır */
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-btn.prev-btn {
    left: 20px;
}

.nav-btn.next-btn {
    right: 20px;
}

/* Ana kapsayıcıyı ortalar ve genel sayfa yapısına uyarlar */
.tanitim-bolumu {
    /* Mevcut Faaliyetler bölümündeki container ile aynı maks. genişlik */
    max-width: 1200px;
    margin: 60px auto; /* Üstten ve alttan faaliyetler ile aynı boşluğu sağlar */
    padding: 0 15px; /* Yanlardaki boşluğu korur */
    /* Ekstra bir kenarlık veya gölge kullanmayarak sade bir görünüm elde ederiz */
}

/* H1 başlığı için stil */
.seo-h1 {
    text-align: center;
    color: #215c9e; 
    font-weight: 700; /* Güçlü bir H1 için daha kalın font */
    margin-bottom: 25px; 
}

.seo-h1 .title-line1 {
    display: block; /* Span'i blok seviyesine çıkararak alt satıra geçmesini sağlar */
    font-size: 2rem; /* İlk satırı biraz daha büyük yapabiliriz */
    margin-bottom: 5px; /* İki satır arasına boşluk koyar */
    font-weight: 800; /* Daha kalın bir vurgu */
}

/* H1 içindeki ikinci satır */
.seo-h1 .title-line2 {
    display: block; /* Span'i blok seviyesine çıkarır */
    font-size: 1.6rem; /* İlk satıra göre biraz daha küçük */
    font-weight: 600; /* Daha az kalın bir vurgu */
    opacity: 0.9;
}

/* Tanıtım metnini çevreleyen kutu ve paragraf ayarları */
.tanitim-metni {
    background-color: #ffffff; /* Beyaz veya hafif açık gri */
    border: 1px solid #e0e0e0; /* Hafif bir sınır */
    border-radius: 8px; /* Köşe yuvarlama */
    padding: 30px; /* İç boşluk */
    line-height: 1.7; /* Okumayı kolaylaştıran satır aralığı */
    font-size: 1.05rem; /* Metin font büyüklüğü */
    color: #444; /* Koyu ama yumuşak metin rengi */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Çok hafif bir gölge */
}

/* Paragraflar arası boşluk */
.tanitim-metni p {
    margin-bottom: 15px;
    text-align: justify; /* Okunurluğu artırmak için hizalama */
}

/* Önemli kelimeleri (anahtar kelimeleri) vurgulama */
.tanitim-metni strong {
    /* Anahtar kelimelerinizi sitenizin temel renklerinden biriyle (Örn: #215c9e) vurgulayabilirsiniz */
    color: #215c9e; 
    font-weight: 600;
}


/* Faaliyetlerimiz Bölümü Stilleri */
.faaliyetlerimiz-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.faaliyetlerimiz-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #54af39;
    margin-bottom: 20px;
}

/* Faaliyet Menüsü Butonları */
.faaliyet-menu {
    text-align: center;
    margin-bottom: 20px;
}

.menu-item {
    background-color: transparent;
    border: 2px solid #ddd;
    padding: 10px 25px;
    margin: 0 5px 10px 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item:hover {
    background-color: #a7d69a;
    color: #fff;
    border-color: #a7d69a;
}

.menu-item.active {
    background-color: #215c9e; 
    color: #fff;
    border-color: #215c9e;
}

/* Galeri Öğesi ve Başlık Stilleri */
.galeri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.galeri-item {
    height: 250px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeri-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.galeri-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.galeri-item:hover img {
    transform: scale(1.05);
}

/* Yeni eklenen galeri-baslik stilleri */
.galeri-baslik {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Yarı saydam siyah arka plan */
    color: #fff;
    padding: 10px 15px;
    text-align: center;
    transition: transform 0.3s ease;
}

.galeri-item:hover .galeri-baslik {
    transform: translateY(0); /* Üzerine gelindiğinde göster */
}

.galeri-baslik h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

/* Resimleri gizlemek için kullanılacak CSS sınıfı */
.galeri-item.hide {
    display: none;
}

.banner-image {
    position: relative;
    width: 100%; 
    overflow: hidden; 
    margin-bottom: 120px;
}

.banner-image img {
    width: 100%; 
    max-height: 720px; 
    display: block; 
}

.dynamic-text-container {
    position: absolute;
    right: 10%; 
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    text-align: right;
    z-index: 10;
    width: 350px; /* Metin alanının genişliği */
}

.text-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Başlangıçta tüm slide'lar gizli */
    transition: opacity 1s ease-in-out; /* Yumuşak geçiş efekti */
}

.text-slide.active-slide {
    opacity: 1; /* Aktif olan slide görünür */
}

.main-text {
    font-size: 3.5vw;
    font-weight: 700;
    margin-bottom: -5px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0,0,0,0.5);
}

.plus-sign {
    font-size: 1.8vw; 
    font-weight: 400; 
    vertical-align: middle;
}

.sub-text {
    font-size: 1.8vw;
    font-weight: 400;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0,0,0,0.5);
}

/* --- Projelerimiz Bölümü Stilleri --- */
.projelerimiz-section {
    padding: 60px 0;
    background-color: #ffffff; /* Beyaz arka plan */
}

.projelerimiz-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Projelerimiz Başlığı (Faaliyetler başlığından farklı bir renk) */
.projelerimiz-section .section-title {
    color: #54af39; /* Şirketinizin mavi tonu */
    margin-bottom: 20px;
}

/* Proje Filtre Menüsü (Faaliyet menüsü stillerini kullanır) */
.proje-menu {
    text-align: center;
    margin-bottom: 30px;
}

.menu-proje {
    background-color: transparent;
    border: 2px solid #ddd;
    padding: 10px 25px;
    margin: 0 5px 10px 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-proje:hover {
    background-color: #a7d69a;
    color: #fff;
    border-color: #a7d69a;
}

.menu-proje.active {
    background-color: #215c9e; /* Şirketinizin yeşil tonu */
    color: #fff;
    border-color: #215c9e;
}

/* Proje Galeri Öğeleri için (Mevcut galeri stilini kullanır) */
.proje-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* İşbirliklerimiz Bölümü */
.isbirlikleri-section {
  padding: 60px 0;
  background-color: #f0f0f0; /* Hafif bir gri arka plan */
  overflow: hidden; /* Dışarı taşan logoları gizler */
}

/* Başlık stili, Faaliyetlerimiz bölümüyle uyumlu */
.isbirlikleri-section .section-title {
  margin-bottom: 40px;
}

.logo-slider {
  display: flex;
  white-space: nowrap;
  justify-content: center; /* Yatayda ortalar */
  animation: slide-logos 15s linear infinite;
  align-items: center; /* Dikeyde ortalar */
}

.logo-slide {
  flex-shrink: 0;
  width: 150px; /* Logo genişliği */
  height: 100px; /* Logo yüksekliği */
  margin: 0 30px; /* Logolar arası boşluk */
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Görüntüyü boyutlara sığdırır */
  filter: grayscale(100%); /* Logoları siyah-beyaz yapar */
  transition: filter 0.3s ease;
}

.logo-slide img:hover {
  filter: grayscale(0%); /* Üzerine gelince renkli olur */
}

@keyframes slide-logos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* Kendi boyutunun yarısı kadar kayar */
  }
}

/* Footer */
footer {
    background-color: #1a1a1a; /* Çok koyu gri (neredeyse siyah) */
    color: #b0b0b0; /* Okunabilir açık gri yazı */
    padding-top: 60px;
    font-size: 0.95rem;
    margin-top: auto;
    position: relative;
    border-top: 4px solid #54af39; /* Üst tarafa kurumsal yeşil çizgi */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 280px; /* Mobilde sıkışmayı önler */
}

/* Başlık Stilleri */
.footer-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Başlığın altına yeşil çizgi efekti */
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #54af39; /* Kurumsal Yeşil */
}

/* Orta kısımdaki başlığı ortalamak istersen */
.footer-center .footer-title::after {
    /* Eğer ortalı istiyorsan bu bloğu aç: 
       left: 50%; transform: translateX(-50%); 
    */
}

/* İletişim Satırları */
.contact-item {
    display: flex;
    align-items: flex-start; /* İkon yukarıda kalsın */
    margin-bottom: 15px;
    line-height: 1.6;
}

.contact-item i {
    color: #54af39; /* İkonlar Yeşil */
    margin-right: 15px;
    font-size: 1.1rem;
    margin-top: 4px; /* Hizalama düzeltmesi */
}

.contact-item a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: #fff;
}

/* Orta Kısım Açıklama */
.footer-desc {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Sosyal Medya Butonları - Yuvarlak */
.footer-social-icons {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: #54af39; /* Hover olunca yeşil */
    transform: translateY(-3px); /* Hafif yukarı zıplama */
}

/* Sağ Kolon Linkler */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Çok hafif ayraç */
    padding-bottom: 12px;
}

.footer-links li:last-child {
    border-bottom: none;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-links a i {
    font-size: 0.7rem;
    margin-right: 10px;
    color: #54af39;
    transition: margin-right 0.3s;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px; /* Sağa kayma efekti */
}

/* En Alt Telif Alanı */
.footer-bottom {
    background-color: #111; /* Footer'dan bir ton daha koyu */
    text-align: center;
    padding: 20px;
    border-top: 1px solid #333;
    font-size: 0.85rem;
    color: #777;
}

/* Yukarı Çıkma Butonu Stilleri */
.scroll-to-top {
    position: fixed; /* Ekranın belirli bir noktasına sabitler */
    bottom: 30px; /* Alttan 30 piksel yukarıda */
    right: 30px; /* Sağdan 30 piksel içeride */
    width: 50px;
    height: 50px;
    background-color: #007bff; /* Mavi arka plan */
    color: #fff; /* Beyaz ikon */
    border: none;
    border-radius: 50%; /* Yuvarlak şekil */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0; /* Başlangıçta gizli */
    visibility: hidden; /* Erişilemez hale getirir */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999; /* Sayfanın diğer elemanlarının üzerinde kalmasını sağlar */
}

.scroll-to-top.show {
    opacity: 1; /* Görünür hale getirir */
    visibility: visible;
}

.scroll-to-top:hover {
    background-color: #0056b3; /* Üzerine gelindiğinde koyu mavi */
}

@media (max-width: 1600px) {
    .video-container {
        max-height: 768px;
        overflow: hidden;
    }
    
    .main-text {
        font-size: 48px; 
    }
    .sub-text {
        font-size: 28px; 
    }
}

@media (max-width: 1024px) {
    .video-container {
        max-height: 768px;
        overflow: hidden;
    }
    
    .main-text {
        font-size: 36px; 
    }
    .sub-text {
        font-size: 22px; 
    }
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        min-width: 100%;
    }
    
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-item {
        justify-content: center; /* Mobilde ortala */
    }
    
    .footer-social-icons {
        justify-content: center;
    }
    
    .footer-links a {
        justify-content: center; /* Linkleri ortala */
    }
}
    
    .video-container {
    margin-bottom: 30px;
    }
    
    .video-text-main {
        font-size: 24px;
    }
    .video-text-sub {
        font-size: 16px;
    }
    
    .banner-image {
    margin-bottom: 70px;
    }
    
    .logo img {
       max-width: 150px;
    }
    
    .menu-icon {
      font-size: 1.4rem;
    }
    
    .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    }
    
    .menu-item {
        font-size: 0.8rem;
        font-weight: 500;
        padding: 8px 20px;
    }
   
    .main-text {
        font-size: 32px; 
    }
    .sub-text {
        font-size: 20px; 
    }
    
    .side-menu{
        min-width: 250px;
    }
    
    .side-menu ul li {
      margin-bottom: 20px;
      font-size: 0.9rem;
    }
    
    .seo-h1 .title-line1 {
        font-size: 1.2rem;
    }
    .seo-h1 .title-line2 {
        font-size: 1.1rem;
    }
    
    .faaliyetlerimiz-section {
        padding: 30px;
    }
    
    .video-text-main h4 {
        font-size: 4vw; /* Mobil cihazlarda daha büyük */
    }
    .video-text-sub h4 {
        font-size: 3.5vw; /* Mobil cihazlarda daha büyük */
    }
    
    .isbirlikleri-section {
    padding: 30px 0;
  }
  
  .logo-slide {
    width: 100px;
    height: 70px;
    margin: 0 15px;
  }
  
  .projelerimiz-section {
        padding: 30px 15px;
    }
    
    .menu-proje {
        font-size: 0.8rem;
        padding: 8px 20px;
    }
}

@media (max-width: 600px) {
    .main-text {
        font-size: 24px;
    }
    .sub-text {
        font-size: 16px;
    }
    
    .faaliyetlerimiz-section {
        padding: 25px;
    }
    
    .side-menu ul li {
      margin-bottom: 20px;
      font-size: 0.9rem;
      min-width: 250px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Başlangıç şeffaflığı (görünmez) */
    }
    to {
        opacity: 1; /* Bitiş şeffaflığı (tam görünür) */
    }
}

/* --- SAYFA BAŞLIĞI (HEADER) --- */
.page-header {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px; /* Navbar yüksekliği kadar boşluk */
    text-align: center;
}

.header-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Resmi karart */
}

.header-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.header-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.breadcrumb {
    font-size: 1rem;
    opacity: 0.9;
}

.breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.breadcrumb i {
    font-size: 0.8rem;
    margin: 0 5px;
    color: #54af39;
}

/* --- PROJE FİLTRELEME --- */
.projects-container {
    padding: 60px 15px;
    padding-left: 50px;
    padding-right: 50px;
}

.filter-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 25px;
    border: 2px solid #ddd;
    background: transparent;
    border-radius: 30px; /* Hap şeklinde butonlar */
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    color: #555;
}

.filter-btn:hover, .filter-btn.active {
    border-color: #54af39;
    background-color: #54af39;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(84, 175, 57, 0.3);
}

/* --- PROJE KARTLARI (GRID) --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Responsive Grid */
    gap: 30px;
}

.project-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card-image {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .card-image img {
    transform: scale(1.1); /* Resim hafifçe yaklaşır */
}

/* Durum Etiketi (Badge) */
.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    z-index: 2;
}

.badge.completed { background-color: #54af39; } /* Yeşil */
.badge.ongoing { background-color: #f39c12; } /* Turuncu */

.card-content {
    padding: 25px;
}

.card-category {
    font-size: 0.85rem;
    color: #215c9e; /* Firma Mavisi */
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.project-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.card-content p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.card-content p i {
    width: 20px;
    color: #54af39;
    margin-right: 5px;
}

.details-btn {
    display: inline-block;
    margin-top: 15px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
    border-bottom: 2px solid transparent;
}

.details-btn:hover {
    color: #54af39;
    border-bottom-color: #54af39;
}

.details-btn i {
    margin-left: 5px;
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.details-btn:hover i {
    transform: translateX(5px);
}

/* --- CTA (TEKLİF ALANI) --- */
.cta-section {
    background-color: #215c9e; /* Koyu Mavi */
    color: #fff;
    padding: 60px 15px;
    text-align: center;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.cta-btn {
    display: inline-block;
    background-color: #fff;
    color: #215c9e;
    padding: 12px 30px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: all 0.3s;
}

.cta-btn:hover {
    background-color: #54af39;
    color: #fff;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .page-header h1 { font-size: 2rem; }
    .projects-grid { grid-template-columns: 1fr; } /* Tek sütun */
    .filter-btn { width: 100%; margin-bottom: 5px; } /* Butonlar tam genişlik */
}

/* --- PROJE DETAY SAYFASI --- */

.project-details-section {
    padding: 60px 15px;
}

/* Ana Düzen: Flexbox ile Yan Yana */
.details-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Sidebar'ın sticky çalışması için önemli */
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
}

/* --- SOL KOLON: İÇERİK --- */
.details-content {
    flex: 2; /* 3 birimin 2'sini kaplar (~%66) */
}

.content-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    position: relative;
}

.content-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #54af39;
    margin-top: 10px;
}

.details-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.sub-title {
    font-size: 1.5rem;
    color: #215c9e;
    margin: 30px 0 15px;
    font-weight: 600;
}

/* Teknoloji Listesi */
.tech-list {
    list-style: none;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.tech-list li {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #444;
    background: #f9f9f9;
    padding: 10px 15px;
    border-radius: 5px;
    border-left: 3px solid #54af39;
}

.tech-list i {
    color: #54af39;
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Detay Galerisi */
.detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.gallery-img {
    border-radius: 8px;
    overflow: hidden;
    height: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-img:hover img {
    transform: scale(1.05);
}

/* --- SAĞ KOLON: SIDEBAR (KÜNYE) --- */
.details-sidebar {
    flex: 1; /* 3 birimin 1'ini kaplar (~%33) */
    position: sticky; /* Sayfa kayarken sabit kalır */
    top: 100px; /* Navbar'ın altında durması için */
}

.info-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-top: 5px solid #215c9e;
}

.info-box h3 {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.info-item i {
    width: 40px;
    height: 40px;
    background: #eef5ff;
    color: #215c9e;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 1.1rem;
}

.info-item div {
    display: flex;
    flex-direction: column;
}

.info-item strong {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
}

.info-item span {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.sidebar-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #54af39;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.sidebar-btn:hover {
    background-color: #43942d;
}

/* --- BENZER PROJELER --- */
.related-projects {
    padding-bottom: 60px;
    padding-left: 50px;
    padding-right: 50px;
}

.related-projects h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.related-card {
    position: relative;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px;
    color: #fff;
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .details-wrapper {
        flex-direction: column; /* Mobilde alt alta diz */
    }
    
    .details-sidebar {
        width: 100%; /* Tam genişlik */
        position: static; /* Mobilde yapışkan olmasın */
    }
    
    .details-content {
        width: 100%;
    }
}

/* --- İLETİŞİM SAYFASI STİLLERİ --- */

.contact-section {
    padding: 80px 15px;
    padding-left: 50px;
    padding-right: 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Sol taraf biraz daha dar, Form daha geniş */
    gap: 60px;
    align-items: start;
}

/* Başlıklar */
.section-heading, .form-heading {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    font-weight: 700;
}

.section-desc {
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Bilgi Kartları (Sol Taraf) */
.info-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    transition: transform 0.3s;
}

.info-card:hover {
    transform: translateY(-5px);
}

.icon-box {
    width: 50px;
    height: 50px;
    background-color: #eef9eb; /* Açık yeşil arka plan */
    color: #54af39;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.info-text h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
}

.info-text p {
    color: #555;
    line-height: 1.5;
    font-size: 0.95rem;
}

.info-text a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 500;
}

.info-text a:hover {
    color: #54af39;
}

.sub-info {
    font-size: 0.85rem !important;
    color: #999 !important;
    margin-top: 5px;
}

/* Sosyal Medya Alanı */
.social-connect {
    margin-top: 20px;
}

.social-connect h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: #215c9e;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.social-links a:hover {
    background-color: #54af39;
}

/* İletişim Formu (Sağ Taraf) */
.contact-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Daha belirgin gölge */
    border-top: 5px solid #54af39;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

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

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    background-color: #fcfcfc;
    transition: all 0.3s;
}

/* Inputa tıklandığında */
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #54af39;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(84, 175, 57, 0.1);
}

.submit-btn {
    width: 100%;
    background-color: #215c9e;
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.submit-btn:hover {
    background-color: #1a4b82;
}

/* Harita */
.map-container {
    width: 100%;
    margin-bottom: -5px; /* Footer ile boşluk kalmaması için */
    filter: grayscale(100%); /* Haritayı siyah beyaz yapar (Şık görünüm) */
    transition: filter 0.3s;
}

.map-container:hover {
    filter: grayscale(0%); /* Üzerine gelince renklenir */
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
        gap: 40px;
    }

    .form-row {
        grid-template-columns: 1fr; /* Form içindeki yan yana kutuları alt alta al */
    }
    
    .contact-form-wrapper {
        padding: 25px; /* Mobilde iç boşluğu azalt */
    }
}

/* --- FAALİYETLERİMİZ SAYFASI CSS --- */
.services-section {
    padding: 80px 15px;
}

.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.section-intro h2 {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
}

.section-intro p {
    color: #666;
    font-size: 1.1rem;
}

/* Hizmet Kartları Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    border-bottom: 4px solid transparent; /* Alt çizgi için hazırlık */
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.service-card:hover {
    transform: translateY(-10px); /* Yukarı kalkma efekti */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom-color: #54af39; /* Hoverda altı yeşil olsun */
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: #eef5ff; /* Açık mavi arka plan */
    color: #215c9e; /* Koyu mavi ikon */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    margin: 0 auto 25px; /* Ortala ve alttan boşluk bırak */
    transition: all 0.3s ease;
}

.service-card:hover .icon-wrapper {
    background-color: #54af39; /* Hoverda arka plan yeşil */
    color: #fff; /* İkon beyaz */
}

.service-card h3 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.service-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-btn {
    display: inline-block;
    color: #215c9e;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.service-btn i {
    margin-left: 5px;
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.service-btn:hover {
    color: #54af39;
}

.service-btn:hover i {
    transform: translateX(5px); /* Ok sağa kaysın */
}

/* --- HİZMET DETAY SAYFASI EKSTRA CSS --- */

/* Giriş paragrafını biraz daha vurgulu yapalım */
.lead-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 25px;
}

/* Özellik Listesi (İkonlu yan yana kutular) */
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s;
}

.feature-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #54af39;
}

.feature-item i {
    font-size: 2rem;
    color: #215c9e;
    margin-right: 20px;
    margin-top: 5px;
}

.feature-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.feature-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* --- SIDEBAR WIDGETLARI --- */

/* Genel Widget Kutusu Stili */
.sidebar-widget {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.sidebar-widget h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #333;
    position: relative;
    padding-bottom: 10px;
}

/* Başlık altı mavi çizgi */
.sidebar-widget h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #215c9e;
}

/* Yan Menü Linkleri */
.service-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-nav li {
    margin-bottom: 10px;
}

.service-nav li:last-child {
    margin-bottom: 0;
}

.service-nav a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #555;
    padding: 12px 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: all 0.3s;
    font-weight: 500;
}

.service-nav a i {
    margin-right: 12px;
    color: #215c9e;
    font-size: 1rem;
}

/* Hover ve Aktif Sayfa Durumu */
.service-nav a:hover, .service-nav a.active {
    background-color: #215c9e; /* Mavi arka plan */
    color: #fff; /* Beyaz yazı */
}

.service-nav a:hover i, .service-nav a.active i {
    color: #fff; /* İkon da beyaz olsun */
}

/* İletişim Widget'ı Özel Stili */
.contact-widget p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-widget .sidebar-btn {
    /* Proje detaydaki sidebar-btn ile aynı stili kullanır */
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-widget .sidebar-btn i {
    margin-left: 10px;
}

/* --- KURUMSAL SAYFA STİLLERİ --- */

.corporate-section {
    margin-bottom: 60px; /* Bölümler arası boşluk */
    scroll-margin-top: 100px; /* JS çalışmazsa CSS ile offset */
}

/* Misyon & Vizyon Kutuları */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.mv-box {
    padding: 30px;
    border-radius: 10px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.mv-box:hover {
    transform: translateY(-5px);
}

.mv-box.mission {
    background: linear-gradient(135deg, #215c9e, #1a4b82);
}

.mv-box.vision {
    background: linear-gradient(135deg, #54af39, #43942d);
}

.mv-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    opacity: 0.8;
}

.mv-box h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.mv-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.95;
    color: white;
}

/* Değerlerimiz Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.value-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;
}

.value-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #54af39;
}

.value-item i {
    font-size: 2rem;
    color: #54af39;
    margin-bottom: 15px;
}

.value-item h4 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.value-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Sertifikalar Grid */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.cert-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.cert-item:hover {
    border-color: #215c9e;
    background: #fff;
}

.cert-item i {
    font-size: 2.5rem;
    color: #215c9e;
    margin-bottom: 10px;
}

.cert-item span {
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

/* Sidebar Katalog İndir Widget */
.download-widget {
    text-align: center;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e74c3c; /* PDF Kırmızısı */
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #c0392b;
}

.download-btn i {
    font-size: 1.5rem;
    margin-right: 10px;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .mv-grid {
        grid-template-columns: 1fr; /* Misyon vizyon alt alta */
    }
}

/* --- SÜRDÜRÜLEBİLİRLİK SAYFASI --- */

/* 3 Temel İlke (Pillars) */
.sustain-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0 50px;
}

.pillar-item {
    text-align: center;
    padding: 20px;
    background: #f4fcf4; /* Çok açık yeşil */
    border-radius: 10px;
    border: 1px solid #d4ebd4;
    transition: transform 0.3s;
}

.pillar-item:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 5px 15px rgba(84, 175, 57, 0.15);
}

.pillar-item i {
    font-size: 2.5rem;
    color: #54af39;
    margin-bottom: 15px;
}

.pillar-item h4 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.pillar-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* SDG (Sürdürülebilir Kalkınma Hedefleri) Grid */
.sdg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 sütun */
    gap: 20px;
    margin-bottom: 40px;
}

.sdg-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    transition: transform 0.3s;
}

.sdg-card:hover {
    transform: scale(1.02);
}

.goal-num {
    font-size: 2.5rem;
    font-weight: 800;
    margin-right: 20px;
    opacity: 0.8;
    line-height: 1;
}

.goal-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: uppercase;
}

.goal-content p {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.9;
    line-height: 1.4;
}

/* Hedeflerin Orijinal Renkleri */
.goal-7 { background-color: #fcc30b; color: #333; } /* Sarı - Siyah yazı daha iyi okunur */
.goal-7 .goal-num, .goal-7 p { color: #333; }

.goal-9 { background-color: #fd6925; } /* Turuncu */
.goal-12 { background-color: #bf8b2e; } /* Hardal */
.goal-13 { background-color: #3f7e44; } /* Koyu Yeşil */

/* Alıntı Kutusu */
.green-quote {
    background-color: #eef9eb;
    border-left: 5px solid #54af39;
    padding: 25px;
    margin-top: 30px;
    border-radius: 0 10px 10px 0;
    font-style: italic;
}

.green-quote i {
    color: #54af39;
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: block;
}

.green-quote p {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
    margin: 0;
}

/* --- SIDEBAR WIDGETLARI --- */

/* Yeşil Etki Widget */
.green-stats-widget {
    background: linear-gradient(135deg, #54af39, #43942d);
    color: #fff;
    border: none;
}

.green-stats-widget h3 {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.green-stats-widget h3::after {
    background-color: #fff;
}

.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.stat-row i {
    font-size: 2rem;
    margin-right: 15px;
    opacity: 0.9;
}

.stat-row div {
    display: flex;
    flex-direction: column;
}

.stat-row strong {
    font-size: 1.4rem;
    font-weight: 700;
}

.stat-row span {
    font-size: 0.85rem;
    opacity: 0.9;
    text-transform: uppercase;
}

/* Audit (Enerji Etüdü) Widget */
.audit-widget {
    text-align: center;
    border-top: 5px solid #215c9e;
}

.audit-btn {
    background-color: #215c9e;
}

.audit-btn:hover {
    background-color: #1a4b82;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .sdg-grid {
        grid-template-columns: 1fr; /* Hedefler tek sütun */
    }
}

/* --- ORTAK BAŞLIK STİLLERİ --- */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.sub-title {
    color: #54af39; /* Kurumsal Yeşil */
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    display: block;
}
.section-header h2 {
    font-size: 2.2rem;
    color: #333;
    font-weight: 700;
}

/* --- 1. NEDEN BİZ (Features) --- */
.features-section {
    padding: 80px 0;
    background-color: #fff;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.feature-box {
    background: #f9f9f9;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}
.feature-box:hover {
    background: #fff;
    transform: translateY(-10px); /* Yukarı zıplama */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #54af39;
}
.f-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: #215c9e; /* Mavi */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s;
}
.feature-box:hover .f-icon {
    background: #54af39; /* Yeşil */
    color: #fff;
}
.feature-box h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: #333;
}
.feature-box p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- 2. HAREKETLİ SAYAÇ (Counter) --- */
.counter-section {
    background: linear-gradient(rgba(33, 92, 158, 0.9), rgba(20, 60, 100, 0.95)), url('../img/galeri/enerji1.jpg');
    background-size: cover;
    background-attachment: fixed; /* Parallax */
    padding: 60px 0;
    color: #fff;
}
.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}
.counter-item i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #54af39; /* Yeşil ikon */
}
.counter-item h3 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 5px;
}
/* Artı işareti eklemek için */
.counter-item h3::after {
    content: '+';
    font-size: 2rem;
    vertical-align: top;
    color: #54af39;
}
.counter-item p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* --- 3. ÇALIŞMA SÜRECİ (Timeline) --- */
.process-section {
    padding: 80px 0;
    background-color: #fcfcfc;
}
.process-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}
.process-step {
    text-align: center;
    flex: 1;
    padding: 20px;
    min-width: 200px;
}
.step-icon {
    width: 90px;
    height: 90px;
    background: #fff;
    border: 2px dashed #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: #555;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}
.process-step:hover .step-icon {
    border-color: #215c9e;
    color: #215c9e;
    background: #eef5ff;
    transform: rotateY(180deg); /* Dönme efekti */
}
/* İkon içindeki i harfinin dönmesini engellemek istersen transformu iptal et */
.process-step:hover .step-icon i {
    transform: rotateY(-180deg);
}

.process-step h4 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 700;
}
.process-step p {
    font-size: 0.9rem;
    color: #666;
}

.process-arrow {
    font-size: 1.5rem;
    color: #ccc;
    flex-shrink: 0;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .process-wrapper {
        flex-direction: column;
    }
    .process-arrow {
        transform: rotate(90deg); /* Oku aşağı çevir */
        margin: 10px 0;
    }
    .process-step {
        width: 100%;
    }
}

/* --- AKILLI KART GRID --- */
.smart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.smart-card {
    position: relative;
    height: 350px; /* Kart yüksekliği */
    border-radius: 15px;
    overflow: hidden; /* Dışarı taşan resmi gizle */
    background: #000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Resim Alanı */
.card-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    transition: transform 0.5s ease;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Resim üzerindeki siyah gölgelendirme (Yazı okunsun diye) */
.overlay-gradient {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 60%, transparent);
    z-index: 1;
}

/* Kart İçeriği */
.card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
    transform: translateY(60px); /* Başlangıçta açıklamayı aşağıda gizle */
    transition: transform 0.4s ease;
}

.icon-box {
    font-size: 2rem;
    color: #54af39;
    margin-bottom: 10px;
    opacity: 0; /* Başlangıçta ikon gizli olsun, hoverda çıksın */
    transform: translateY(-20px);
    transition: all 0.4s ease;
}

.smart-card h3 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.card-desc {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 0.4s ease 0.1s; /* Hafif gecikmeli gelsin */
    margin-bottom: 20px;
}

.card-link {
    display: inline-block;
    color: #54af39;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.2s;
}

/* --- HOVER EFEKTLERİ --- */
.smart-card:hover .card-img {
    transform: scale(1.1); /* Resim büyüsün */
}

.smart-card:hover .card-body {
    transform: translateY(0); /* İçerik yukarı kayarak yerine otursun */
}

.smart-card:hover .icon-box {
    opacity: 1;
    transform: translateY(0);
}

.smart-card:hover .card-desc {
    opacity: 1;
}

.smart-card:hover .card-link {
    opacity: 1;
    transform: translateY(0);
}

/* --- PREMIUM LOGO SLIDER --- */
.isbirlikleri-section {
    padding: 80px 0;
    background-color: #fff; /* Gri yerine beyaz daha temiz durur */
}

.logo-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    background: #fff;
    /* Slider'ın üzerine gelince animasyon dursun */
}

.logo-slider-wrapper:hover .logo-track {
    animation-play-state: paused;
}

/* Kayan Şerit */
.logo-track {
    display: flex;
    width: calc(250px * 12); /* Logo genişliği x Toplam Logo Sayısı (2 set) */
    animation: scroll 30s linear infinite;
}

.logo-slide {
    width: 250px; /* Her logonun alanı */
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-slide img {
    max-width: 100%;
    max-height: 80px; /* Yükseklik standardı */
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7); /* Gri ve hafif soluk */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover Efekti: Renklenir ve canlanır */
.logo-slide img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* Animasyon */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 6)); } /* 1 setin genişliği kadar kaydır */
}

/* --- KENAR YUMUŞATMA EFEKTİ (SİHİRLİ KISIM) --- */
.slider-fade-left, .slider-fade-right {
    position: absolute;
    top: 0;
    width: 150px; /* Karartma genişliği */
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Tıklamayı engellemesin */
}

.slider-fade-left {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.slider-fade-right {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

/* --- MODERN TANITIM BÖLÜMÜ --- */
.corporate-intro-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden; /* Taşmaları engelle */
}

.intro-wrapper {
    display: flex;
    align-items: center;
    gap: 60px; /* Metin ve resim arası boşluk */
}

/* Sol Kolon (Metin) */
.intro-text-col {
    flex: 1; /* Alanın yarısını kapla */
}

.intro-text-col .sub-heading {
    color: #54af39; /* Kurumsal Yeşil */
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.intro-text-col .seo-h1 {
    font-size: 2.5rem;
    line-height: 1.3;
    color: #333;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: left; /* Sola yaslı daha profesyonel durur */
}

.intro-text-col .highlight {
    color: #215c9e; /* Kurumsal Mavi */
}

.intro-lead {
    font-size: 1.15rem;
    color: #444;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.6;
    border-left: 4px solid #54af39;
    padding-left: 15px;
}

.intro-desc {
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: justify;
}

/* Özellik Listesi */
.intro-features {
    list-style: none;
    margin-bottom: 35px;
    display: grid;
    grid-template-columns: 1fr; /* Alt alta */
    gap: 12px;
}

.intro-features li {
    font-size: 1.05rem;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.intro-features i {
    color: #54af39;
    margin-right: 12px;
    font-size: 1.1rem;
}

.mt-4 { margin-top: 20px; } /* Yardımcı sınıf */

/* Sağ Kolon (Resim) */
.intro-image-col {
    flex: 1;
    position: relative;
}

.image-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden; /* Resim kenarlarını yuvarla */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Derinlik katan gölge */
}

.image-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-frame:hover img {
    transform: scale(1.03); /* Hafif zoom efekti */
}

/* Yüzen Tecrübe Kutusu */
.floating-experience-box {
    position: absolute;
    bottom: 30px;
    left: -30px; /* Resmin solundan dışarı taşır */
    background: linear-gradient(135deg, #215c9e, #163c6b);
    padding: 25px 35px;
    border-radius: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 20px rgba(33, 92, 158, 0.4);
    z-index: 2;
}

.exp-year {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.exp-text {
    font-size: 0.9rem;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 600;
}

/* Mobil Uyum */
@media (max-width: 992px) {
    .intro-wrapper {
        flex-direction: column; /* Mobilde alt alta */
    }

    .intro-text-col .seo-h1 {
        font-size: 2rem;
    }
    
    .floating-experience-box {
        left: 20px; /* Mobilde taşmasın, içeri girsin */
        bottom: 20px;
        padding: 15px 25px;
    }
    
    .exp-year { font-size: 2.2rem; }
}

/* --- MODERN KURUMSAL BUTON TASARIMI --- */
.btn-corporate-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Yazı ve ok arası boşluk */
    
    /* Modern Renk Geçişi (Gradient) */
    background: linear-gradient(90deg, #215c9e 0%, #163c6b 100%);
    color: #fff;
    
    /* Şekil ve Boyut */
    padding: 14px 35px;
    border-radius: 50px; /* Hap Şekli */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    
    /* Derinlik ve Gölge */
    box-shadow: 0 10px 20px rgba(33, 92, 158, 0.3);
    border: 1px solid rgba(255,255,255,0.1);
    
    /* Animasyon Geçişi */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover (Üzerine Gelince) Efekti */
.btn-corporate-modern:hover {
    transform: translateY(-3px); /* Hafif yukarı kalkar */
    box-shadow: 0 15px 30px rgba(33, 92, 158, 0.5); /* Gölge büyür */
    background: linear-gradient(90deg, #163c6b 0%, #215c9e 100%); /* Renk yönü değişir */
}

/* Ok İkonu Animasyonu */
.btn-corporate-modern i {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-corporate-modern:hover i {
    transform: translateX(5px); /* Ok sağa doğru kayar */
}

/* Tıklama Efekti */
.btn-corporate-modern:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(33, 92, 158, 0.3);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .btn-corporate-modern {
        width: 100%; /* Mobilde tam genişlik */
        justify-content: center;
        margin-top: 20px;
    }
}