/* FONT YÜKLEMESİ: Gilroy-Regular olarak güncellendi */
@font-face {
  font-family: 'Gilroy-Regular'; /* GÜNCELLEME: Font ailesinin adı, yüklenen dosya ('Gilroy-Regular.woff') ile tutarlı olacak şekilde düzeltildi. */
  /* Ana dizinde gilroy/Gilroy-Regular konumundan fontu yüklüyoruz. */
  src: url('../gilroy/Gilroy-Regular.woff') format('woff'),
       url('../gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: normal; /* Regular font için varsayılan ağırlık */
  font-style: normal;
  font-display: swap; /* Font yüklenene kadar yedek fontu göster */
}

body {
  font-family: 'Gilroy-Regular', sans-serif; /* GÜNCELLEME: Tüm siteye düzeltilmiş font ailesini uygula */
  margin: 0;
  /* GÜNCELLENDİ: Fixed Header'ın altından başlaması ve biraz boşluk bırakması için padding-top. */
  /* Header yüksekliği + İstenen boşluk */
  padding-top: 10px; /* DEĞER ARTIRILDI */
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: #f8f8f8; /* Hafif bir arka plan rengi */
  /* YENİ EKLEME: Mobil kayma sorununu çözmek için */
  overflow-x: hidden;
}

/* 1. Logo Boyutunu Daha da Büyültme */
.header-logo img {
  height: 75px !important; /* Logo yüksekliği */
  width: auto;
}

/* 2. Navigasyon Menüsünü Ortalama */
.header-nav {
  /* Ana menü (ul) elemanını yatayda ortalamak için kapsayıcıyı esnek hale getiriyoruz */
  flex-grow: 1; /* Ortalamayı sağlamak için gerekli tüm alanı kapla */
  display: flex;
  justify-content: center; /* Menüyü ortala */
}
.header-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
  align-items: center;
}
.header-nav a {
  text-decoration: none;
  color: #404141; /* YENİ: Menü yazı rengi */
  font-size: 15px;
  font-weight: normal; /* GÜNCELLEME: İsteğiniz üzerine menü yazıları inceltildi (600'den normale çevrildi). */
  padding: 8px 0;
  transition: color 0.2s;
}
.header-nav a:hover {
  color: #0c4a6e;
}

/* YENİ GÜNCELLEMELER */

.main-header {
  background-color: white; /* GÜNCELLENDİ: Arka plan rengi beyaza çevrildi */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  position: fixed; /* Header'ın mobil menü açıldığında sabit kalması için */
  top: 0;
  width: 100%;
  z-index: 500; /* Menüden daha yüksek z-index */
}

.header-container {
  max-width: 1450px; /* GÜNCELLENDİ: Maksimum genişlik 1450px olarak ayarlandı */
  margin: 0 auto; /* Sayfayı ortala */
  padding: 10px 20px; /* Üstten ve alttan boşluk */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* BURADAKİ DÜZELTME: Arama ve Randevu butonlarını yan yana getiren kural */
.header-actions {
  display: flex; /* İçindeki elemanları (Arama Kutusu ve Randevu Butonu) yan yana diz */
  align-items: center;
  gap: 16px; /* İki buton grubu arasına boşluk ekle */
}

/* RANDEVU AL BUTON GRUBU */
.appointment-button-group {
  /* Randevu grubu yüksekliğini arama kutusu yüksekliği ile eşleştirmek için padding azaltıldı */
  border-radius: 9999px; /* Tam yuvarlak kenarlar */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Gölge azaltıldı */
  display: flex; 
  overflow: hidden; 
  align-items: center;
  background-color: white; 
  padding: 0; /* İç padding kaldırıldı */
  border: 1px solid #e0e0e0; /* Arama kutusu ile aynı çerçeve */
}

/* Randevu Metin Butonu (Sol kısım) */
.appointment-text-button {
  background-color: transparent;
  border: none;
  color: #0c4a6e; /* Metin rengi */
  padding: 10px 18px 10px 20px; 
  text-decoration: none;
  font-weight: 500;
  transition: none;
  border-radius: 0; 
  font-size: 14px;
  height: 100%; 
  display: flex;
  align-items: center;
}

/* Randevu Ok Butonu (Sağ kısım - Yuvarlak ve Renkli) */
.appointment-icon-button {
  background-color: #0c4a6e; 
  border-radius: 50%; 
  padding: 6px; 
  width: 32px; 
  height: 32px; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px 0 0; 
  box-shadow: none; 
}

.appointment-icon-button svg {
  color: white; 
  width: 18px;
  height: 18px;
  transform: none; 
}
.appointment-text-button {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ARAMA/IZGARA BUTON GRUBU */
.icon-buttons {
  display: flex;
  align-items: center;
  /* margin-right kaldırıldı, artık boşluk .header-actions içindeki gap ile kontrol ediliyor */
  
  /* Birleşik buton görünümü için ana kapsayıcıya stil veriyoruz */
  border-radius: 9999px; 
  border: 1px solid #e0e0e0; /* Çerçeve (border) kalınlığı 1px */
  background-color: white;
  padding: 0; 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
  height: 48px; /* Genel yüksekliği koruyoruz (Randevu ile hizalamak için) */
}

/* Tekil ikon butonları (Arama ve Izgara) */
.action-icon-button {
  background-color: transparent;
  border: none;
  /* YENİ DÜZENLEME: Yatay boşlukları düşürerek ızgarayı arama ikonuna yakınlaştırıyoruz */
  padding: 6px 10px; /* 12px yerine 10px kullanıldı */
  cursor: pointer;
  transition: background-color 0.2s;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  position: relative; 
}

/* Arama butonunun sağındaki boşluğu biraz daha düşürüyoruz */
.action-icon-button:first-child {
  padding-right: 8px; /* Dikey çizgiye daha yakın olması için 8px yapıldı */
}

.action-icon-button:hover {
  background-color: transparent; 
}

.action-icon-button svg {
  width: 18px; 
  height: 18px;
  stroke: #555; 
  stroke-width: 2;
  fill: none; /* Arama için fill:none */
}

/* Izgara ikonu için özel ayarlar */
.action-icon-button.grid-icon svg {
  stroke: none; /* Kareleri doldurmak için stroke'u iptal et */
  fill: #555; /* Kareleri doldur */
}

/* İki buton arasına dikey ayırıcı (border) ekleme */
.action-icon-button:first-child::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%; 
  background-color: #e0e0e0;
}

/* ------------------------------------------- */
/* MOBİL UYUMLULUK BAŞLANGICI */
/* ------------------------------------------- */

/* Hamburger butonu başlangıçta gizli */
.menu-toggle-button {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 32px; /* GÜNCELLENDİ: Butonu daha kibar yapmak için küçültüldü */
  height: 32px;
  position: relative; /* X geçişi için gerekli */
  z-index: 600; /* Menüden üstte kalması için z-index artırıldı */
}
.menu-toggle-button svg {
  stroke-width: 2; /* GÜNCELLENDİ: Çizgi kalınlığı azaltıldı */
  width: 28px;
  height: 28px;
  transition: opacity 0.3s;
  stroke: #333; /* Hamburger rengi */
}

/* X simgesi için yer tutucu */
/* Bu elemanları is-open sınıfı eklendiğinde X'e dönüşecek şekilde ayarlıyoruz. */
.menu-toggle-button::before,
.menu-toggle-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  background-color: #333; /* X rengi */
  transform-origin: center;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0; /* Başlangıçta gizli */
}

/* X simgesi stil (kapalıyken gizli) */
/* is-open sınıfı eklendiğinde hamburger simgesi gizlenir ve X simgesi görünür */
.menu-toggle-button.is-open svg {
  opacity: 0; /* Hamburger simgesini gizle */
}
.menu-toggle-button.is-open::before {
  opacity: 1; /* X simgesini göster */
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-toggle-button.is-open::after {
  opacity: 1; /* X simgesini göster */
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* Mobil Menü içeriği başlangıçta gizli */
.mobile-menu-content {
  display: none;
}

@media (max-width: 768px) {
  
  /* 1. Header'ı mobil cihaza göre düzenle */
  .header-container {
    max-width: 100%; /* Mobil genişlik */
    padding: 10px 15px; /* Mobil kenar boşlukları */
  }

  /* 2. Masaüstü menüsünü ve aksiyonları gizle */
  .header-nav, 
  .header-actions {
    display: none;
  }

  /* 3. Hamburger butonunu göster (Sağ tarafta) */
  .menu-toggle-button {
    display: block;
  }

  /* 4. Mobil Menüyü tam ekran açılır hale getir */
  .mobile-menu-content {
    display: block; /* GÜNCELLEME: Menünün animasyon için her zaman render edilmesini sağlar */
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh; 
    background-color: white; /* Menü arka planı */
    z-index: 400; 
    padding: 100px 20px 20px; 
    box-sizing: border-box;
    overflow-y: auto;
    
    /* Başlangıçta gizli tut */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
  }

  /* Menü açıldığında */
  .mobile-menu-content.is-open {
    transform: translateX(0);
  }
  
  /* Mobil menü listesi stili */
  .mobile-menu-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mobile-menu-content ul li {
    border-bottom: 1px solid #eee;
    /* --- YENİ ANİMASYON EKLEMESİ BAŞLANGICI --- */
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    /* --- ANİMASYON EKLEMESİ SONU --- */
  }
  /* Menü açıldığında animasyonu tetikle */
  .mobile-menu-content.is-open ul li {
    opacity: 1;
    transform: translateX(0);
  }

  /* Her menü elemanına gecikme ekleyerek animasyonu kademeli yap (GECİKMELER ARTIRILDI) */
  .mobile-menu-content.is-open ul li:nth-child(1) { transition-delay: 0.1s; }
  .mobile-menu-content.is-open ul li:nth-child(2) { transition-delay: 0.2s; }
  .mobile-menu-content.is-open ul li:nth-child(3) { transition-delay: 0.3s; }
  .mobile-menu-content.is-open ul li:nth-child(4) { transition-delay: 0.4s; }
  .mobile-menu-content.is-open ul li:nth-child(5) { transition-delay: 0.5s; }
  .mobile-menu-content.is-open ul li:nth-child(6) { transition-delay: 0.6s; }
  .mobile-menu-content.is-open ul li:nth-child(7) { transition-delay: 0.7s; }
  .mobile-menu-content.is-open ul li:nth-child(8) { transition-delay: 0.8s; }

  .mobile-menu-content ul li a {
    display: block;
    padding: 15px 0;
    text-decoration: none;
    color: #404141;
    font-size: 16px;
    font-weight: 600;
  }
  
  /* Mobil Aksiyon Butonları */
  .mobile-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    /* YENİ ANİMASYON EKLEMESİ */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  }
  /* Menü açıldığında butonları da animasyonla getir (GECİKME ARTIRILDI) */
  .mobile-menu-content.is-open .mobile-actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s; /* Menü elemanlarından sonra başlasın */
  }
  .mobile-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  /* Arama butonu mobil'de tam genişlikte olsun */
  .mobile-action-buttons .icon-buttons {
    width: 100%;
    justify-content: space-between;
  }

  /* --- YENİ GÜNCELLEME: Mobil Randevu Butonu Stilleri --- */
  .mobile-action-buttons .appointment-button-group {
    width: 100%;
    justify-content: space-between;
    /* YENİ: Mobil butonun genel yüksekliğini ayarlayarak daha zarif hale getirelim */
    height: 46px;
  }
  .mobile-action-buttons .appointment-text-button {
    flex-grow: 1; /* Metin alanının genişlemesini sağla */
    justify-content: flex-start;
    /* YENİ: Yazı boyutunu küçültüp, dikey dolguyu sıfırlayarak yüksekliği azaltalım */
    font-size: 15px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mobile-action-buttons .appointment-icon-button {
    margin-right: 8px; /* İkonu sağ kenardan biraz içeri alalım */
    /* YENİ: İkonu yeni yüksekliğe göre yeniden boyutlandıralım */
    width: 32px;
    height: 32px;
    padding: 6px;
  }
  .mobile-action-buttons .appointment-icon-button svg {
    /* YENİ: SVG ikonunu yeni boyuta göre ayarlayalım */
    width: 17px;
    height: 17px;
  }
  /* --- GÜNCELLEME SONU --- */

  /* Logo boyutu mobil'de küçültülebilir */
  .header-logo img {
    height: 65px !important; /* GÜNCELLENDİ: Mobil logo boyutu 65px'e yükseltildi */
  }
}