/* --- YENİ VE GELİŞTİRİLMİŞ HERO SECTION STİLLERİ --- */

/* Temel Font Ayarı */
body {
  font-family: 'Roboto', sans-serif;
}

.hero-section {
  background: url('images/mermer-bg.webp') no-repeat center center/cover;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  /* justify-content: center; - İçeriği ve slider'ı ayırmak için kaldırıldı */
  justify-content: space-between; /* İçeriği üste, slider'ı alta yaslar */
  text-align: center;
  overflow: hidden;
}

/* Arka Plan Animasyonu (Ken Burns Efekti) */
.hero-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit; /* Ana elementin arka planını kopyala */
  background-size: cover;
  z-index: 0;
  animation: kenburns 20s ease-out infinite;
}

@keyframes kenburns {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Arka Plan Filtresi (Görselin üstündeki katman) */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Beyaz ve hafif bir filtre, yeşil yazıyı daha okunaklı yapar */
  background-color: rgba(255, 255, 255, 0.4); 
  z-index: 1;
}

/* İçerik Konteyneri (Filtrenin ve animasyonun üzerinde kalması için) */
.hero-section .hero-content {
  position: relative;
  z-index: 2;
  flex-grow: 1; /* Esnek büyüme */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* dikeyde tam ortalama */
  padding-bottom: 200px; /* Slider için altta boşluk bırak */
}

/* Başlık ve Metin Stilleri */
.hero-section h1 {
  font-family: 'Teko', sans-serif; /* Cesur ve modern başlık fontu */
  font-size: 6rem; /* Daha büyük ve etkileyici */
  font-weight: 600;
  color: rgb(53, 97, 9); /* İstenen koyu yeşil */
  text-shadow: 2px 2px 15px rgba(255, 255, 255, 0.5);
}

.hero-section p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: rgb(53, 97, 9);
}

/* Özel Buton Stilleri */
.btn-custom-outline {
    border: 2px solid rgb(53, 97, 9);
    color: rgb(53, 97, 9);
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem; /* Buton boyutunu ayarladım */
}
.btn-custom-outline:hover {
    background-color: rgb(53, 97, 9);
    color: #fff;
}
.btn-custom-solid {
    background-color: rgb(53, 97, 9);
    color: #fff;
    border: 2px solid rgb(53, 97, 9);
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
}
.btn-custom-solid:hover {
    background-color: rgba(53, 97, 9, 0.8);
    border-color: rgba(53, 97, 9, 0.8);
}

/* Giriş Animasyonu */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Konum Bilgisi Stilleri (Masaüstü) */
.location-info {
    position: absolute;
    top: 120px; /* Navbar'ın altından başlama */
    right: 5%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-width: 280px;
    text-align: left;
    border-left: 4px solid rgb(53, 97, 9);
}

.location-info h6 {
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(53, 97, 9);
}

.location-info p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

.location-info a {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    color: rgb(53, 97, 9);
}

.location-info a:hover {
    transform: translateX(3px);
}

/* Responsive Düzenlemeler */
@media (max-width: 1200px) {
    .location-info {
        right: 3%;
        max-width: 250px;
    }
}

@media (max-width: 992px) {
  .hero-section {
    height: auto;        /* sabit yükseklik yok */
    min-height: auto;    /* min-height kaldırıldı, içerik belirlesin */
    padding-top: 100px; /* Navbar için boşluk */
    padding-bottom: 40px; /* İçerik sonrası boşluk */
    justify-content: flex-start; /* İçeriği yukarıdan başlat */
  }

  /* TMG Mermer başlığının navbar ile çakışmasını önlemek için üst boşluğu artır */
  .hero-section .hero-content {
      padding-top: 20px; /* Başlık için ek boşluk */
      padding-bottom: 40px; /* Slider ile aradaki boşluk */
  }

  /* location-info'nun 992px altında akışa dahil olma ve ortalama stilleri */
  .location-info {
    position: relative; /* Akışa dahil et */
    order: 1; /* Butonların altına taşı */
    margin: 42px auto 42px auto; /* %40 artış: 30px -> 42px */
    right: auto;
    top: auto;
    max-width: 350px; /* %40 artış: 250px -> 350px */
    width: 90%;
    text-align: left; /* İçerik sola hizalı kalsın */
    padding: 17px 21px; /* %40 artış: 12px 15px -> 17px 21px */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.95);
    border-left: 5.6px solid rgb(53, 97, 9); /* %40 artış: 4px -> 5.6px */
  }

  .location-info h6 {
      font-size: 1.54rem; /* %40 artış: 1.1rem -> 1.54rem */
  }

  .location-info p {
      font-size: 1.26rem; /* %40 artış: 0.9rem -> 1.26rem */
  }

  .location-info a {
      font-size: 1.26rem; /* %40 artış: 0.9rem -> 1.26rem */
  }

  .hero-section h1 {
    font-size: 3.5rem; /* 6rem'den küçültüldü */
    line-height: 1.1;
  }

  .hero-section p {
    font-size: 1.15rem; /* 1.5rem'den küçültüldü */
    margin-bottom: 2rem; /* Butonlarla arayı aç */
  }
  
  /* Butonların mobilde alt alta gelmesini ve ortalanmasını sağlar */
  .hero-section .mt-4 a.btn {
    display: block; /* Tam genişlik kaplamalarını sağla */
    width: 80%; /* Genişlikleri %80 olsun */
    margin-left: auto;  /* Ortalamak için */
    margin-right: auto; /* Ortalamak için */
    margin-bottom: 1rem; /* Aralarını aç */
  }

  /* İkinci butondaki me-3 (sağ boşluk) sınıfını sıfırla */
  .hero-section .mt-4 a.me-3 {
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
    .location-info {
        margin: 28px auto 28px auto; /* %40 artış: 20px -> 28px */
        padding: 14px 17px; /* %40 artış: 10px 12px -> 14px 17px */
        max-width: 90%;
    }

    .location-info h6 {
        font-size: 1.4rem; /* %40 artış: 1rem -> 1.4rem */
    }

    .location-info p {
        font-size: 1.19rem; /* %40 artış: 0.85rem -> 1.19rem */
    }
    .location-info a {
        font-size: 1.19rem; /* %40 artış: 0.85rem -> 1.19rem */
    }
}

@media (max-width: 480px) {
  .hero-section h1 {
    font-size: 2.8rem; /* Çok küçük telefonlar için biraz daha küçült */
  }
   .hero-section p {
    font-size: 1rem;
  }
    .location-info {
        margin: 21px auto 21px auto; /* %40 artış: 15px -> 21px */
        padding: 11px 14px; /* %40 artış: 8px 10px -> 11px 14px */
        max-width: 95%;
    }
    .location-info h6 {
        font-size: 1.33rem; /* %40 artış: 0.95rem -> 1.33rem */
    }
    .location-info p {
        font-size: 1.12rem; /* %40 artış: 0.8rem -> 1.12rem */
    }
    .location-info a {
        font-size: 1.12rem; /* %40 artış: 0.8rem -> 1.12rem */
    }
}