:root {
        --brand-green: rgb(53, 97, 9 );
        --brand-green-light: rgba(53, 97, 9, 0.1);
    }
    body { font-family: 'Roboto', sans-serif; }
    h2, h5 { font-family: 'Teko', sans-serif; letter-spacing: 1px; }
    #hakkimizda { background-color: #e9e7e779; overflow: hidden; }
    .about-content-wrapper { padding-right: 2rem; }
    .about-title { font-size: 3.5rem; line-height: 1.1; color: var(--brand-green); }
    .about-tabs .nav-link { text-align: left; padding: 1rem; font-size: 1.1rem; font-weight: 500; color: #6c757d; border: none; border-left: 4px solid #e9ecef; border-radius: 0; transition: all 0.4s ease; }
    .about-tabs .nav-link.active { color: var(--brand-green); background-color: var(--brand-green-light); border-left-color: var(--brand-green); }
    
    /* --- YENİ GEÇİŞ ANİMASYONU STİLLERİ --- */
    .about-tabs .tab-content {
        position: relative;
        min-height: 150px; /* İçerik değişirken zıplamayı önler */
    }
    .about-tabs .tab-pane {
        transition: opacity 0.4s ease-in-out; /* Sadece solma efekti için */
    }
    /* Bootstrap'in 'fade' sınıfı, aktif olmayan sekmeleri gizler. Biz animasyon için bunu eziyoruz. */
    .about-tabs .tab-pane.fade:not(.show) {
        opacity: 0;
    }
    /* Animasyon için özel sınıflar */
    .tab-pane.animating-out {
        opacity: 0;
    }
    .tab-pane.animating-in {
        opacity: 1;
    }
    /* --- GEÇİŞ ANİMASYONU SONU --- */

    .about-tabs .tab-content h5 { font-size: 1.5rem; color: #212529; }
    .about-tabs .tab-content p { color: #6c757d; }
    .stats-wrapper { margin-top: 2rem; display: flex; gap: 2rem; padding-top: 2rem; border-top: 1px solid #e9ecef; }
    .stat-box .stat-number { font-size: 2.5rem; font-weight: 600; color: var(--brand-green); line-height: 1; }
    .stat-box .stat-text { font-size: 0.9rem; color: #6c757d; }
    .carousel-card-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; }
    .carousel-card { border-radius: 1rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); overflow: hidden; max-width: 500px; width: 100%; height: 450px; }
    .carousel, .carousel-inner, .carousel-item, .carousel-item img { height: 100%; width: 100%; }
    .carousel-item img { object-fit: cover; }
    .carousel-fade .carousel-item { transition-duration: 1.5s; }
    .placeholder-hero { height: 100vh; background-color: #333; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; }

    /* ========================================= */
/* === HAKKIMIZDA.CSS MOBİL UYUMLULUK === */
/* ========================================= */

/* lg (992px) altı tüm ekranlar için (tablet ve mobil) */
@media (max-width: 991.98px) {
  
  .about-content-wrapper {
    padding-right: 0; /* Masaüstü için olan sağ boşluğu sıfırla */
    text-align: center; /* Başlık ve metinler ortalansın */
  }

  .about-title {
    font-size: 2.5rem; /* 3.5rem'den küçültüldü */
  }

  /* Sekme yapısını dikeyden yataya çevir */
  .about-tabs {
    flex-direction: column; /* Sekmeler ve içerik alt alta gelsin */
    align-items: stretch !important; /* 'align-items-start'ı ez */
  }
  
  /* Sekme butonlarını yan yana diz */
  .about-tabs .nav-pills {
     flex-direction: row !important; /* Dikey butonları yatay yap */
     justify-content: center;
     margin-right: 0 !important; /* me-4'ü sıfırla */
     margin-bottom: 1.5rem;
     border: none;
  }

  /* Sekme butonlarının stilini düzelt */
  .about-tabs .nav-link {
    flex: 1; /* Butonlar eşit genişlikte olsun */
    text-align: center;
    border-left: none; /* Sol kenarlığı kaldır */
    border-bottom: 4px solid #e9ecef; /* Kenarlığı alta al */
    border-radius: 4px 4px 0 0;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
  }

  .about-tabs .nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-green);
  }

  .about-tabs .tab-content {
     min-height: 120px; /* Mobil için yüksekliği azalt */
     text-align: left; /* İçerik sola yaslansın */
  }

  .stats-wrapper {
    justify-content: center; /* Sayaçları ortala */
  }

  .carousel-card {
     height: 350px; /* Mobil için resim yüksekliğini azalt */
     margin-top: 2rem; /* Üstteki içerikle arasını aç */
  }
}
/* ========================================= */
/* === HAKKIMIZDA (EN KÜÇÜK EKRAN) DÜZELTMESİ === */
/* ========================================= */

/* 576px'den küçük ekranlar için (iPhone'lar vb.) */
@media (max-width: 576px) {
  
  .about-title {
    font-size: 2rem; /* Başlığı biraz daha küçült */
    line-height: 1.2;
  }
  
  /* Sekme butonları küçük ekrana sığmıyorsa yazılarını küçült */
  .about-tabs .nav-link {
    font-size: 0.9rem;
    padding: 0.75rem 0.25rem; /* Yan boşlukları azalt */
  }
}