:root {
  /* Colors */
  --color-primary: #EB5704;
  --color-primary-tint: #fff3e0;
  --color-accent: #2f4858;

  --color-text: #3e3e3e;
  --color-text-strong: #2a2a2a;
  --color-text-soft: #5a5a5a;
  --color-text-muted: #8a8a8a;
  --color-text-faint: #dddddd;
  --color-bg-deep-1: #22fe22;

  /* Spacing (4px scale) */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
  --space-9: 9.6rem;
}

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Rubik", sans-serif;
  color: rgba(235, 235, 235, 0.9);
}

/* === EKLENEN NAVİGASYON KUTUSU STİLLERİ (GÖRSEL HATAYI DÜZELTMEK İÇİN) === */
/* Bu sınıfı, menü linklerini kapsayan div veya nav etiketine atayın. */

.header-nav-box {
  /* Konumlandırma - Görseldeki gibi sağ üst köşeye yerleştirildiğini varsayıyoruz */
  position: absolute;
  top: 5rem; /* Başlık altından biraz aşağıda */
  right: 3.2rem;

  /* --- KRİTİK DÜZELTMELER: KUTUNUN İÇERİĞİ SARMALAMASI İÇİN --- */
  /* width: auto yerine daha güçlü olan fit-content kullanıldı */
  width: fit-content; 
  
  display: flex; /* İçindeki bağlantıları yan yana diz */
  align-items: center; /* Öğeleri dikeyde ortala */
  gap: 3.2rem; /* Bağlantılar arasına yeterli boşluk koy */

  /* İçerik Dışarı Taşmasın Diye Padding Ekleme (Sağ/Sol 4.0rem'e çıkarıldı) */
  padding: 1.6rem 4.0rem; 

  /* Görsel Efektler */
  background-color: rgba(255, 255, 255, 0.2); /* Yarı saydam beyaz arka plan */
  backdrop-filter: blur(0.6rem); /* Bulanıklaştırma efekti */
  border-radius: 8px;
  z-index: 1000; /* Diğer elementlerin üzerinde kalmasını sağla */
}

.header-nav-box a {
  /* Menü Bağlantı Yazılarının Stilleri */
  font-size: 2.0rem; 
  font-weight: 500;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  /* Yazının kutunun içinde tam oturması için satır yüksekliğini ayarla */
  line-height: 1; 
}

.header-nav-box a:hover {
  color: var(--color-primary); /* Turuncu rengi hover'da kullan */
}

/* __________________________________________________________________ */

.btn {
  font-size: 2.4rem;
  border: none;
  font-weight: 600;
  padding: 0.8rem 2.4rem;
  background-color: transparent;
  color: white;
  border: 2px solid white;
  border-radius: 8px;
  backdrop-filter: blur(0.4rem);
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.btn:link,
.btn:visited {
  color: white;
  background-color: transparent;
}

#scrollToProductsBtn {
  background-color: rgba(149, 101, 23, 0.455);
}

#scrollToProductsBtn:hover {
  background-color: rgba(149, 101, 23, 0.6);
}

.btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}


.btn:active {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0.95) translateY(2px);
}


.container {
  max-width: 120rem;
  margin: 6.4rem auto;
  padding: 3.6rem 3.2rem;
}


.products-container {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 0rem;
  padding: 3.2rem 6rem;
}

.icon {
  width: 2.4rem;
  color: #FF9B45;
}

.products-img {
  width: 82.5%;
  margin: 2.4rem 1.2rem;
}

#scrollToAboutUsBtn {
  background-color: rgba(149, 101, 23, 0.455);
}

#scrollToAboutUsBtn:hover {
  background-color: rgba(149, 101, 23, 0.6);
}

/* .btn:hover zaten yukarıda tanımlıydı, tekrarlananı kaldırdım. */

/* --- Ürün Gridleri ve Kartlar (Animasyon ve Temel Düzen Odaklı) --- */

/* --- Ürün Gridleri --- */
.products-grid-wrapper {
  position: relative;
  transition: min-height 0.3s ease-in-out;
}

.products-grid {
  display: grid;
  /* KESİNLİKLE 4 SÜTUN VE EŞİT GENİŞLİKTE OLMALARI İÇİN: */
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem 3.6rem; /* Satır ve sütun aralıkları - kendi değerlerinizi kullanın */
  padding: 20px; /* Grid içi kenar boşluğu - kendi değerinizi kullanın */

  /* Animasyon için gerekli stiller (bunlar aynı kalacak) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s linear, visibility 0s linear 0.1s; /* Gridin hızlı değişimi */
}

.products-grid.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
  transition-delay: 0s;
}

/* ----- STAGGERED KART ANİMASYONU (Bu kısımlar aynı kalacak) ----- */
.products-card {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.products-grid.active .products-card.card-animate-enter {
  opacity: 1;
  transform: translateY(0);
}

/* === INFO SECTION STYLES === */
.section-info {
  width: auto;
  height: 100vh;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
}

/* Ana Grid Kapsayıcı */
.info-container {
  max-width: 145rem;
  margin: 0rem auto;
  padding: 3.2rem 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "box-1 box-2 box-3 box-3"
    "box-1 box-4 box-4 box-5"
    "box-6 box-6 box-7 box-5";
  gap: 1.6rem;
}


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

.section-contact {
    /* Mevcut body arka planınıza uygun olarak ayarlandı */
    background-color: #2f3439;
    padding: var(--space-8) 0; /* Üst ve altta boşluk bırak */
}

/* Mevcut .container stilini kullanmak yerine, sadece bu bölüme özel bir kapsayıcı */
.contact-container {
    max-width: 110rem;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.contact-heading {
    font-size: 4.8rem;
    color: white; /* Veya güçlü bir renk: var(--color-text-strong) */
    text-align: center;
    margin-bottom: var(--space-3);
}

.contact-subheading {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 70rem;
    margin: 0 auto var(--space-8);
}

/* Form ve Bilgileri Yan Yana Koymak İçin Grid */
.contact-grid {
    display: grid;
    /* Form sol (2/3), Bilgiler sağ (1/3) */
    grid-template-columns: 2fr 1fr; 
    gap: 6.4rem;
}

.contact-content-wrapper {
    display: flex; /* İçerikleri yan yana dizer */
    gap: 30px; /* İletişim bilgileri ve resim arasına boşluk koyar */
    align-items: flex-start; /* Elemanları yukarıdan hizalar */
}

/* Eğer mobil cihazlarda yan yana değil, alt alta gelmesini istiyorsanız */
@media (max-width: 10000px) {
    .contact-content-wrapper {
        flex-direction: column; /* Alt alta diz */
        gap: 20px;
    }
}

/* === FORM STİLLERİ === */

.form-group {
    margin-bottom: var(--space-4);
}

.contact-form label {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--color-primary-tint); /* Hafif beyaz tonu */
}

/* Bu stil hem INPUT hem de TEXTAREA elementlerini hedef alır */
.contact-form input[type="text"], 
.contact-form input[type="email"], 
.contact-form textarea {
    /* Boyutlandırma ve padding (iç boşluk) muhtemelen zaten doğru */
    width: 100%;
    padding: 1.2rem;
    font-size: 1.6rem;
    font-family: "Work Sans", sans-serif;
    color: black; /* Yazı rengi beyaz */

    /* 1. ÜST KUTULARLA AYNI GÖRÜNÜMÜ VEREN ÖZELLİKLER */
    
    /* a) Koyu, Yarı Saydam Arka Plan (Önceki koyu rengi kullanıyoruz) */
    background-color: rgb(255, 255, 255),;
    
    /* b) Cam Etkisi (Glassmorphism) Özellikleri */
    border: 1px solid rgb(255, 255, 255);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.001));
    backdrop-filter: blur(0.05rem); /* Eğer tarayıcı desteklerse hafif bulanıklık verir */
    
    /* c) İki Gölgeli Box-Shadow */
    box-shadow: 
        inset 0 0 12rem rgba(249, 249, 249, 0.06); /* İç Parlaklık/Gölge */
    border-radius: 8px;
    transition: all 0.4s ease-out;
}

.contact-form textarea {
    resize: vertical;
}

/* Form Gönderme Butonu */
.btn--form {
    /* Mevcut .btn stilinizi kullanın, ancak arkaplanı belirginleştirin */
    background-color: var(--color-primary); 
    color: white;
    border: none;
    cursor: pointer;
    font-size: 2.0rem;
    font-weight: 600;
    padding: 1.2rem 3.2rem;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.btn--form:hover {
    background-color: #d14a00; /* Biraz daha koyu ton */
}


/* === BİLGİ VE HARİTA STİLLERİ === */

.contact-details h3 {
    color: var(--color-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    font-size: 2.2rem;
}

.contact-details p {
    font-size: 1.6rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-1);
}

.contact-map {
    margin-top: var(--space-6);
    border-radius: 8px;
    overflow: hidden; 
}

/* Sosyal Medya İkonları */
.social-links {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.social-icon {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: color 0.3s;
}

.social-icon:hover {
    color: var(--color-primary-tint);
}
/* Harita ve Bilgi Stili */
.contact-map {
    border-radius: 8px;
    overflow: hidden; /* iframe'in kenarlarını yuvarlamak için */
}

.contact-details h3 {
    color: var(--color-primary);
    margin-top: 3.2rem;
    margin-bottom: 1.2rem;
}

/* === GRID KUTU KONUMLANDIRMALARI === */
.box-1 {
  grid-area: box-1;
  display: flex; 
  justify-content: center;
  align-items: center;
}

.box-2 {
  grid-area: box-2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-3 {
  grid-area: box-3;
}

.box-4 {
  grid-area: box-4;
}

.box-5 {
  grid-area: box-5;
}

.box-6 {
  grid-area: box-6;
}

.box-7 {
  grid-area: box-7;
}

/* Ana Kapsayıcı - Flexbox Uygulaması */
.footer-content {
    /* Flexbox aktif edilir */
    display: flex; 
    
    /* İçeriklerin arasında maksimum boşluk bırakılarak, 
       biri sola diğeri sağa itilir */
    justify-content: space-between; 
    
    /* Öğeleri dikeyde merkezler */
    align-items: center; 
    
    padding: 15px 20px; /* İç boşluklar */
    border-top: 1px solid #eee; /* Üste ince bir çizgi ekler */
    background-color:#2F3439; /* Hafif bir arka plan rengi */
    font-size: 14px; /* Yazı boyutunu ayarlar */
}

/* Telif Hakkı Yazısı Stili */
.copyright {
    color: #6c757d; /* Biraz daha soluk bir renk */
}

/* KVKK Bloğuna Özel Stiller (sağa hizalı olan) */
.kvkk-block {
    /* KVKK bloğunun kendi içindeki öğeleri de hizalamak için */
    display: flex;
    align-items: center;
}

/* KVKK Link Stili */
.kvkk-link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

/* Zorunlu İşaret Stili */
.required-star {
    color: red;
    margin-left: 3px;
}

/* Onay Kutusu Stili */
#kvkk-onay {
    margin-right: 5px;
}

/* Zorunlu İşaret (*) Stili */
.required-star {
    color: red; /* Kırmızı renk verir */
    margin-left: 3px; /* Soldan hafif boşluk bırakır */
}
/* === DİĞER KUTU STİLLERİ (Önceki CSS'ten kalan ve düzgün çalışanlar) === */

.animated-stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9.6rem;
}