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

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f5f7fa; /* Daha nötr bir arka plan */
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

h2 {
  color: #004d40; /* Ana tema rengi */
  font-size: 2.2rem;
  margin-bottom: 30px; /* Alt boşluk artırıldı */
  position: relative;
  display: inline-block;
  text-align: center; /* Başlıkları ortala */
  width: 100%; /* Tam genişlik kaplaması için */
}

h2:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px; /* Çizgi uzunluğu */
  height: 3px;
  background-color: #00bcd4; /* Vurgu rengi */
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem; /* Paragraflar arası boşluk */
}

a {
  text-decoration: none;
  color: #00796b; /* Link rengi */
  transition: color 0.3s ease;
}

a:hover {
  color: #004d40; /* Hover rengi */
}

img {
    max-width: 100%; /* Resimlerin taşmasını önle */
    height: auto; /* Oranları koru */
}

/* Header ve Navigasyon */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50px;
  background: linear-gradient(to right, #690422, #fd42a9); /* Gradient arka plan */
  color: white;
  position: sticky; /* Sayfa kaydırıldığında sabit kalması için */
  top: 0;
  z-index: 1000; /* Diğer elemanların üzerinde kalması için */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Hafif gölge */
}

.logo-container {
  width: 70px;
  height: 70px;
  background-color: white;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  margin-right: 10px; /* Logolar arası boşluk */
}

.logo-container img {
  max-height: 100%;
  max-width: 100%;
  transition: transform 0.3s ease;
}
.logo-container img:hover {
    transform: scale(1.1); /* Hover efekti */
}

.menu {
  list-style: none;
  display: flex;
  gap: 25px; /* Menü öğeleri arası boşluk */
}

.menu li {
  display: inline;
}

.menu a {
  text-decoration: none;
  color: lemonchiffon; /* Menü link rengi */
  font-weight: bold;
  padding: 8px 0; /* Dikey boşluk */
  position: relative; /* Alt çizgi için */
  transition: color 0.3s;
}

.menu a:hover {
  color: #ffffff; /* Hover rengi */
}

/* Aktif menü öğesi */
.menu a.active {
  color: #ffffff; /* Aktif link rengi */
  /* background-color: #0077b6; */ /* Arka plan yerine alt çizgi kullanılabilir */
  /* padding: 8px 15px; */
  /* border-radius: 20px; */
}

/* Menü linkleri için alt çizgi efekti */
.menu a::after {
  content: '';
  position: absolute;
  bottom: 0; /* Altına yerleştir */
  left: 0;
  width: 0; /* Başlangıçta genişlik 0 */
  height: 2px;
  background-color: #ffffff; /* Çizgi rengi */
  transition: width 0.3s ease; /* Genişlik animasyonu */
}

.menu a:hover::after,
.menu a.active::after {
  width: 100%; /* Hover veya aktif durumda tam genişlik */
}

/* Mobil Menü Toggle Butonu */
.menu-toggle {
  display: none; /* Varsayılan olarak gizli */
  font-size: 1.8rem; /* İkon boyutu */
  color: white;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
}

/* Hero Section */
.hero {
  position: relative;
  height: 90vh; /* Ekran yüksekliğinin %90'ı */
  background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: black;
  overflow: hidden; /* Dalgaların taşmasını önle */
}

.hero-content {
  z-index: 2; /* Dalgaların üzerinde kalması için */
  padding: 30px; /* İç boşluk artırıldı */
  background-color: rgba(255, 255, 255, 0.8); /* Daha belirgin arka plan */
  border-radius: 15px;
  max-width: 80%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Hafif gölge */
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #004d40; /* Ana tema rengi */
}

.hero-content p {
  margin: 15px 0;
  font-size: 1.2rem;
  color: #333; /* Metin rengi */
}

.btn {
  display: inline-block;
  margin-top: 20px;
  background-color: #00bcd4; /* Vurgu rengi */
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn:hover {
  background-color: #00796b; /* Hover rengi */
  transform: translateY(-3px); /* Hafif yukarı kalkma efekti */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Gölgeyi artır */
}

/* Dalga Animasyonu */
.waves {
  position: absolute;
  bottom: 0;
  left: 0; /* Sol kenara hizala */
  width: 100%;
  height: 100px; /* Dalga yüksekliği */
  background: url('https://svgshare.com/i/oW7.svg') repeat-x;
  background-size: 1000px 100px; /* Tekrarlama için boyut */
  animation: wave 15s linear infinite; /* Animasyon süresi artırıldı */
  z-index: 1;
}

@keyframes wave {
  0% { background-position-x: 0; }
  100% { background-position-x: 1000px; } /* Tekrarlama için */
}

/* Genel Bölüm Stilleri */
.about, .activities, .gallery, .video-section, .team, .contact, .team-section, .about-team-section {
  padding: 80px 20px; /* Bölüm iç boşlukları */
}

.about, .gallery, .contact, .about-team-section {
    background-color: #e0f7fa; /* Açık mavi tonu */
}

.activities, .video-section, .team, .team-section {
    background-color: #ffffff; /* Beyaz arka plan */
}

/* Kart Stilleri (Etkinlikler, Hedefler) */
.cards, .goals-cards{
  display: grid; /* Grid layout kullanımı */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive sütunlar */
  gap: 30px; /* Kartlar arası boşluk */
  margin-top: 40px;
}

.card, .goals-card{
  background: white;
  border-radius: 15px; /* Daha yuvarlak köşeler */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Daha yumuşak gölge */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; /* İçerik düzeni için flex */
  flex-direction: column; /* Dikey hizalama */
}

.card:hover, .goals-card:hover{
  transform: translateY(-10px); /* Hover efekti */
  box-shadow: 0 10px 20px rgba(0,0,0,0.12); /* Hover gölgesi */
}

.card-img img, .goals-card .card-icon img {
  width: 100%;
  height: 200px; /* Sabit yükseklik */
  object-fit: cover; /* Resmin orantılı sığması */
}

.goals-card .card-icon {
    width: 80px;
    height: 80px;
    margin: 20px auto 15px; /* Ortala ve boşluk */
    border-radius: 50%;
    overflow: hidden;
    background-color: #e0f7fa; /* İkon arka planı */
    display: flex;
    align-items: center;
    justify-content: center;
}

.goals-card .card-icon img {
    width: 50px; /* İkon boyutu */
    height: 50px;
}

.card-content, .goals-card .card-content { /* goals-card için de content div'i varsa */
  padding: 25px; /* İç boşluk */
  flex-grow: 1; /* Kartın alt kısmını doldur */
  display: flex;
  flex-direction: column;
}

.card-content h3, .goals-card h3 {
  color: #00796b; /* Başlık rengi */
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.card-content p, .goals-card p {
    font-size: 0.95rem; /* Metin boyutu */
    color:darkred; /* Metin rengi */
    flex-grow: 1; /* Mümkünse alanı doldur */
}

/* Takım Kartları */
.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
  gap: 30px;
  margin-top: 40px;
}

.team-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 0; /* Padding'i kaldırıp içeriğe ekleyeceğiz */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Resmin taşmasını önle */
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.team-card img {
  width: 100%;
  height: 250px; /* Yükseklik ayarı */
  object-fit: cover;
  /* border-radius: 15px 15px 0 0; */ /* Sadece üst köşeler yuvarlak */
  display: block; /* Altındaki boşluğu kaldır */
}

.team-card h3 {
  margin: 15px 10px 5px; /* Boşluk ayarları */
  color: #00796b;
  font-size: 1.1rem;
}

.team-card p {
  margin: 0 10px 15px; /* Boşluk ayarları */
  font-size: 0.9rem;
  color: #555;
}
.event-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.event-card {
  width: 280px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s;
}

.event-card img {
  width: 100%;
  height: 187px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}


.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 900px; /* Maksimum genişlik */
  margin: 30px auto; /* Ortalama ve üst boşluk */
  border-radius: 15px; /* Köşeleri yuvarlat */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Belirgin gölge */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Çerçeveyi kaldır */
}

/* Öne çıkan belgeler bölümü */
.featured-docs {
  background-color: #f2f8fc;
  padding: 2rem 0;
  text-align: center;
}

.featured-docs h2 {
  color: #1a73e8;
  margin-bottom: 1.5rem;
}

.featured-docs .cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.featured-docs .card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  width: 250px;
  text-align: left;
  transition: transform 0.3s ease;
}

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

.featured-docs .card h4 {
  color: #333;
  margin-top: 0;
  margin-bottom: 1rem;
}

.featured-docs .card a {
  display: flex;
  align-items: center;
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
}

.featured-docs .card a:hover {
  text-decoration: underline;
}

.featured-docs .card img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* Tümünü gör butonu */
.see-all-container {
  margin-top: 2rem;
  text-align: center;
}

.see-all-btn {
  display: inline-block;
  padding: 10px 24px;
  background-color: #1a73e8;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.see-all-btn:hover {
  background-color: #0d5bbc;
}

/* Ekstra belgelerin saklanması için stil */
.hidden-cards {
  display: none;
}

@media (max-width: 768px) {
  .featured-docs .card {
    width: 100%;
    max-width: 300px;
  }
}


   /* Mevcut sitenizdeki .container benzeri bir genel stil */
   .custom-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    .custom-container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .custom-container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .custom-container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .custom-container {
        max-width: 1140px;
    }
}

/* Sitenizin ana başlık stiline benzer bir stil */
.section-title {
    text-align: center;
    font-size: 2rem; /* 32px */
    font-weight: 700;
    color: #1a73e8; /* Sitenizdeki maviye benzer bir renk */
    margin-bottom: 1.5rem; /* 24px */
}



/* Kart benzeri görünüm için ek stil */
body {
  font-family: 'Montserrat', sans-serif; /* Sitenizin ana yazı tipi */
  background-color: #f8f9fa; /* Sitenizin arka planına benzer bir renk */
}

/* Mevcut sitenizdeki .container benzeri bir genel stil */
.custom-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) { .custom-container { max-width: 540px; } }
@media (min-width: 768px) { .custom-container { max-width: 720px; } }
@media (min-width: 992px) { .custom-container { max-width: 960px; } }
@media (min-width: 1200px) { .custom-container { max-width: 1140px; } }

/* Sitenizin ana başlık stiline benzer bir stil */
.section-title {
  text-align: center;
  font-size: 2.25rem; /* 36px, biraz daha büyük */
  font-weight: 700;
  color: #1a73e8; /* Sitenizdeki ana mavi renk */
  margin-bottom: 2rem; /* 32px */
  padding-top: 1rem; /* Başlık için üst boşluk */
}

/* Yorum Ekleme Formu Stilleri */
.comment-form-container {
  background-color: #ffffff;
  border-radius: 12px; /* Daha yuvarlak köşeler */
  padding: 2rem; /* 32px */
  margin-bottom: 2rem; /* 32px */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); /* Daha belirgin gölge */
}
.comment-form-container h3 {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  color: #333; /* Koyu gri */
  margin-bottom: 1.5rem; /* 24px */
}
.comment-form-container label {
  font-weight: 500;
  color: #555; /* Orta gri */
}
.comment-form-container input[type="text"],
.comment-form-container textarea {
  border: 1px solid #ced4da; /* Açık gri kenarlık */
  border-radius: 8px; /* Daha yuvarlak köşeler */
  padding: 0.75rem 1rem; /* 12px 16px */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.comment-form-container input[type="text"]:focus,
.comment-form-container textarea:focus {
  border-color: #1a73e8; /* Odaklandığında mavi kenarlık */
  box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25); /* Odaklandığında mavi gölge */
}
.comment-form-container button[type="submit"] {
  background-color: #1a73e8; /* Ana mavi renk */
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.comment-form-container button[type="submit"]:hover {
  background-color: #0d5bbc; /* Hover durumunda koyu mavi */
}

/* Yorum Listesi Başlığı */
.comments-list-title {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem; /* 24px */
}

/* Yorum Kartı Stilleri */
.comment-card {
  background-color: #ffffff;
  border-radius: 12px; /* Daha yuvarlak köşeler */
  padding: 1.5rem; /* 24px */
  margin-bottom: 1.5rem; /* 24px */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.07); /* Daha yumuşak gölge */
  border-left: 5px solid #1a73e8; /* Vurgu için ana mavi sol kenarlık */
  display: flex;
  align-items: flex-start; /* Avatar ve içeriği üste hizala */
}
.comment-avatar {
  flex-shrink: 0;
  width: 48px; /* Avatar boyutu */
  height: 48px;
  border-radius: 50%; /* Tam yuvarlak */
  background-color: #1a73e8; /* Ana mavi renk */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* İkon boyutu */
  font-weight: 600;
  margin-right: 1rem; /* 16px, avatar ve içerik arası boşluk */
}
.comment-content {
  flex-grow: 1;
}
.comment-card .comment-author {
  font-weight: 700; /* Daha kalın yazar adı */
  color: #222; /* Çok koyu gri/siyah */
  margin-bottom: 0.375rem; /* 6px */
  font-size: 1.125rem; /* 18px */
}
.comment-card .comment-text {
  color: #454545; /* Koyu gri metin */
  line-height: 1.6; /* Daha iyi okunabilirlik için satır yüksekliği */
  margin-bottom: 0.5rem; /* 8px */
  font-size: 1rem; /* 16px */
}
.comment-card .comment-date {
  font-size: 0.875rem; /* 14px */
  color: #777; /* Orta-açık gri */
}
#noCommentsMessage {
  color: #6c757d; /* Bootstrap'in text-muted rengine benzer */
  padding: 1rem;
  background-color: #e9ecef; /* Bootstrap'in alert-light rengine benzer */
  border-radius: 8px;
  text-align: center;
}


/* Footer Bannerları */
.footer-banner-container {
  display: flex;
  justify-content: space-between; /* Sola ve sağa yasla */
  align-items: center; /* Dikeyde ortala */
  padding: 50px 5%; /* Yanlarda daha az boşluk bırakarak genişliği artır */
  background-color: #e8f1ff; /* Farklı bir arka plan */
  flex-wrap: wrap; /* Küçük ekranlarda alt alta gelmesi için */
  max-width: 1200px; /* Maksimum genişlik */
  margin: 0 auto; /* Sayfada ortalama */
}

.footer-banner {
  height: auto; /* Otomatik yükseklik */
  width: 45%; /* Genişliğin %45'ini kaplasın */
  max-width: none; /* Maksimum genişlik sınırını kaldırdım */
  object-fit: contain; /* Oranları koruyarak sığdır */
  transition: transform 0.3s ease; /* Hover efekti için geçiş ekledim */
}

.footer-banner:hover {
  transform: scale(1.05); /* Hafif bir hover efekti ekledim */
}

/* Mobil cihazlarda responsive düzenleme */
@media (max-width: 768px) {
  .footer-banner-container {
    flex-direction: column; /* Alt alta getir */
    gap: 30px; /* Aralarında boşluk bırak */
    padding: 40px 20px; /* Padding ayarla */
  }
  
  .footer-banner {
    width: 90%; /* Daha geniş alan kaplasın */
    max-height: 120px; /* Yükseklik sınırı */
  }
}

@media (max-width: 576px) {
  .footer-banner {
    width: 100%; /* Tam genişlik */
    max-height: 100px; /* En küçük ekranlar için */
  }
}

/* Footer (Alt Bilgi) - DÜZENLENMİŞ KISIM */
footer {
  background: linear-gradient(to right, #690422, #fd42a9); /* Header ile aynı gradient */
  color: #e0e0e0; /* Daha açık metin rengi */
  padding: 60px 20px 30px; /* Üst boşluk artırıldı, alt boşluk azaltıldı */
}

.footer-content {
  display: grid;
  /* Sütunları daha dengeli dağıtmak için fr birimleri kullanılabilir */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Min genişlik artırıldı */
  gap: 40px 30px; /* Satır ve sütun boşlukları */
  margin-bottom: 40px;
  text-align: left; /* Genel hizalama sola */
}

/* Footer Logo Bölümü */
.footer-logo {
    /* Grid alanı içinde kendi kendine hizalanacak */
    /* text-align: center; */ /* Eğer ortalamak isterseniz */
    margin-bottom: 20px; /* Altındaki elemanlarla boşluk */
}
.footer-logo img {
    max-height: 80px; /* Logo boyutu */
    width: auto; /* Oranı koru */
}

/* Footer Başlıkları */
.footer-links h4,
.footer-contact h4,
.footer-social h4 {
  font-size: 1.2rem; /* Başlık boyutu */
  color: #ffffff; /* Beyaz başlık */
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
  display: inline-block; /* Çizgi sadece başlık kadar yer kaplasın */
}

/* Başlık Altı Çizgileri */
.footer-links h4::after,
.footer-contact h4::after,
.footer-social h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px; /* Çizgi uzunluğu */
  height: 2px;
  background-color: #00bcd4; /* Vurgu rengi */
}

/* Footer Link Listesi */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px; /* Linkler arası boşluk */
}

.footer-links a {
  color: #e0e0e0; /* Link rengi */
  transition: color 0.3s ease, padding-left 0.3s ease; /* Geçiş efekti */
}

.footer-links a:hover {
  color: #ffffff; /* Hover rengi */
  padding-left: 5px; /* Hover'da hafif içeri kayma */
}

/* Footer İletişim Bilgileri */
.footer-contact p {
  margin-bottom: 12px; /* Satırlar arası boşluk */
  display: flex; /* İkon ve metni hizala */
  align-items: flex-start; /* Üste hizala (uzun adresler için) */
  color: #e0e0e0; /* Metin rengi */
}

.footer-contact i {
  margin-right: 12px; /* İkon sağ boşluk */
  color: #00bcd4; /* İkon rengi */
  width: 20px; /* Sabit ikon genişliği */
  text-align: center;
  margin-top: 3px; /* İkonu metinle hizalamak için ince ayar */
}

.footer-contact a {
    color: #e0e0e0; /* E-posta link rengi */
}
.footer-contact a:hover {
    color: #ffffff; /* Hover rengi */
}

/* Footer Sosyal Medya İkonları */
.social-icons {
    display: flex;
    gap: 15px; /* İkonlar arası boşluk */
    align-items: center;
}

.social-icons a {
  color: #690422; /* İkon rengi (arka plan rengiyle kontrast) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9); /* Hafif şeffaf beyaz arka plan */
  border-radius: 50%; /* Yuvarlak ikon */
  font-size: 1.2rem; /* İkon boyutu */
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background-color: #00bcd4; /* Hover arka plan rengi */
  color: #ffffff; /* Hover ikon rengi */
  transform: scale(1.1) rotate(10deg); /* Hover efekti */
}

/* Galeri sayfası */
.gallery {
  /* background-color: #f0f8ff; Zaten yukarıda tanımlı */
  padding: 60px 20px;
}

/* gallery-grid yukarıda .cards ile birleştirildi */
.gallery-grid img {
  width: 280px; /* 300px yerine daha küçük bir değer */
  height: 187px; /* Genişlik değiştiği için yüksekliği de orantılı (veya sabit) ayarlayın */
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  cursor: pointer;
}

.gallery-grid img:hover {
    transform: scale(1.05); /* Hafif büyütme efekti */
}

/* Footer Alt Kısım */
.footer-bottom {
  text-align: center;
  padding-top: 30px; /* Üst boşluk */
  margin-top: 40px; /* Üst bölümle arasına boşluk */
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Ayırıcı çizgi */
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7); /* Daha soluk renk */
}

/* ScrollReveal için Gizleme (JS yüklenene kadar) */
.reveal {
  visibility: hidden;
}

/* Responsive Tasarım (Medya Sorguları) */

/* Tablet ve Küçük Masaüstü */
@media (max-width: 992px) {
  .container {
    max-width: 960px;
  }
  h2 {
    font-size: 2rem;
  }
  .footer-content {
    /* Grid yapısı bu boyutta genellikle iyi çalışır */
    gap: 30px; /* Boşlukları biraz azalt */
  }
}

/* Tablet */
@media (max-width: 768px) {
  header {
    padding: 15px 20px; /* Header iç boşluk */
    flex-wrap: wrap; /* Gerekirse logolar ve menü alt alta gelebilir */
    justify-content: space-between; /* Logolar ve toggle arası boşluk */
  }

  .menu-toggle {
    display: block; /* Hamburger ikonunu göster */
    order: 3; /* Sağ tarafta kalması için */
  }

  nav {
      order: 4; /* Menü toggle'dan sonra gelsin */
      width: 100%; /* Tam genişlik */
  }

  .menu {
    display: none; /* Menüyü gizle */
    flex-direction: column; /* Dikey menü */
    width: 100%;
    background-color: rgba(105, 4, 34, 0.95); /* Hafif şeffaf arka plan */
    position: absolute;
    top: 100%; /* Header'ın hemen altına */
    left: 0;
    padding: 15px 0; /* Dikey boşluk */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    gap: 0; /* Boşlukları sıfırla, li'den ayarla */
  }

  .menu.active {
    display: flex; /* Aktif olunca göster */
  }

  .menu li {
    margin: 0; /* Boşlukları sıfırla */
    width: 100%;
    text-align: center;
  }

  .menu a {
    padding: 15px 20px; /* Tıklama alanını genişlet */
    display: block; /* Tam genişlik */
    border-bottom: 1px solid rgba(253, 66, 169, 0.3); /* Ayırıcı çizgi */
    color: #ffffff; /* Mobil menü link rengi */
  }
  .menu li:last-child a {
      border-bottom: none; /* Son elemanın alt çizgisini kaldır */
  }

  .menu a:hover {
      background-color: rgba(253, 66, 169, 0.5); /* Hover arka planı */
  }
  .menu a::after {
      display: none; /* Mobil menüde alt çizgiyi kaldır */
  }
  .menu a.active {
      background-color: #fd42a9; /* Aktif link arka planı */
  }


  .hero-content h1 {
    font-size: 2.2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }

  .cards, .team-cards, .goals-cards {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Daha küçük min genişlik */
  }

  /* Footer'ı Tek Sütuna Düşür */
  .footer-content {
    grid-template-columns: 1fr; /* Tek sütun */
    text-align: center; /* İçeriği ortala */
  }

  .footer-logo {
      text-align: center; /* Logoyu ortala */
  }

  .footer-links h4,
  .footer-contact h4,
  .footer-social h4 {
    display: block; /* Başlıklar tam genişlik */
    text-align: center;
  }

  .footer-links h4::after,
  .footer-contact h4::after,
  .footer-social h4::after {
    left: 50%; /* Çizgiyi ortala */
    transform: translateX(-50%);
  }

  .footer-links ul {
      text-align: center;
  }

  .footer-contact p {
    justify-content: center; /* İletişim bilgilerini ortala */
    text-align: left; /* Metni sola hizala */
    padding: 0 10%; /* Kenarlardan boşluk bırak */
  }
   .footer-contact p i {
        margin-top: 5px; /* İkonu biraz aşağı al */
    }

  .social-icons {
    justify-content: center; /* Sosyal ikonları ortala */
  }

  .footer-banner-container {
    gap: 15px; /* Daha az boşluk */
    padding: 30px 15px;
  }
  .footer-banner {
    height: 50px; /* Biraz daha küçük */
  }
}

/* Küçük Mobil Cihazlar */
@media (max-width: 576px) {
  body {
      font-size: 15px; /* Genel font boyutunu küçült */
  }
  h2 {
    font-size: 1.8rem;
  }
  .hero {
      height: 80vh; /* Hero yüksekliğini azalt */
  }
  .hero-content {
      padding: 20px;
  }
  .hero-content h1 {
    font-size: 1.8rem;
  }

  .btn {
      padding: 10px 25px; /* Buton boyutunu ayarla */
      font-size: 0.9rem;
  }

  .cards, .team-cards, .goals-cards {
      grid-template-columns: 1fr; /* Tek sütun */
      gap: 20px;
  }

  .footer-content {
      gap: 25px; /* Footer bölümleri arası boşluk */
  }
   .footer-contact p {
        padding: 0 5%; /* Daha az kenar boşluğu */
    }

  .footer-banner-container {
      gap: 10px;
  }
  .footer-banner {
      height: 40px;
  }
}