/* Header Stilleri */
.custom-header {
    width: 100vw; /* Görüntüleme alanının tam genişliği */
    height: 80px; /* Sabit yükseklik */
    display: flex;
    justify-content: space-between; /* Menü ve logoyu iki yana yerleştir */
    align-items: center; /* Dikey ortalama */
    padding: 0 20px; /* Sabit yüksekliğe uyumlu yatay boşluk */
    background: #111827; /* Header için koyu renk */
    color: white; /* Metin rengi beyaz */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
    position: fixed; /* Header'ı sabitle */
    top: 0; /* En üstte sabit tut */
    left: 0; /* Soldan sıfırla */
    z-index: 1000; /* Diğer öğelerin üzerinde */
}

/* Logo ve Başlık */
.custom-header .custom-logo {
    display: flex; /* Yatay düzen */
    align-items: center; /* Dikey ortalama */
    gap: 15px; /* Logo ve başlık arasındaki boşluk */
    padding: 0 20px; /* Sağ ve sol boşluk ekle */
}

.custom-header .custom-logo img {
    width: 200px; /* Logonun genişliği */
    height: auto; /* Yükseklik orana göre ayarlanır */
    object-fit: contain; /* Taşmayı engelle */
    border-radius: 5px; /* Hafif yuvarlatılmış köşeler */
    transition: transform 0.3s ease; /* Hover efekti için */
}

.custom-header .custom-logo img:hover {
    transform: scale(1.1); /* Hover durumunda büyütme efekti */
}

.custom-header .custom-site-name {
    font-size: 1.8rem; /* Başlık boyutu */
    margin: 0;
    color: #60a5fa; /* Başlık metni için açık mavi renk */
}

/* Navigasyon Menüsü */
.nav-menu {
    position: absolute;
    top: 50%;
    right: 8%; /* Menü sağa yapışır */
    transform: translateY(-50%); /* Dikeyde ortalama */
    display: flex; /* Flexbox düzeni */
    gap: 20px; /* Menü elemanları arasındaki boşluk */
    list-style: none; /* Liste işaretlerini kaldır */
    margin: 0; /* Dış boşlukları kaldır */
    padding: 0; /* İç boşlukları kaldır */
}

.nav-menu li form {
    display: inline-block; /* Formun boyutunu butona göre ayarla */
    margin: 0; /* Varsayılan margin değerlerini sıfırla */
    padding: 0; /* Varsayılan padding değerlerini sıfırla */
}

/* Buton Stili */
.btn {
    position: relative; /* Göreceli konumlandırma */
    display: flex; /* Flexbox düzeni */
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
    font-size: 15px; /* Yazı boyutu */
    font-weight: 600; /* Yazı kalınlığı */
    height: 40px; /* Buton yüksekliği */
    line-height: 40px; /* Yazıyı ortalamak için */
    cursor: pointer; /* El simgesi */
    background-color: inherit; /* Arka plan rengini koru */
    border: none; /* Çerçeve kaldır */
    outline: none; /* Varsayılan konturu kaldır */
    color: #f1f1f1; /* Yazı rengi */
}

/* Hover Efekti */
.btn:hover .background {
    height: inherit;
    width: 120%;
    top: 50%;
}

/* Arka Plan Hover Efekti */
.btn .background {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 3px;
    width: 100%;
    background-color: #006b92;
    z-index: -1;
    border-radius: 5px;
    transition: all 0.3s;
}

/* Mobil Cihazlar (max-width: 768px) */
@media (max-width: 768px) {
  .custom-header {
      display: flex;
      flex-direction: column; /* Elemanları dikey hizala */
      align-items: center; /* Yatayda ortala */
      justify-content: center; /* Dikeyde ortala */
      gap: 60px; /* Elemanlar arasındaki boşluk */
      padding: 30px; /* Header iç boşluk */
      background: #111827; /* Arka plan rengi */
      color: white; /* Yazı rengi */
      width: 100%; /* Header genişliği */
  }

  .custom-logo {
      align-self: flex-start; /* Logoyu sola hizala */
      margin-left: -30px; /* Sol kenardan biraz boşluk ekle (isteğe bağlı) */
  }

  .custom-logo img {
      width: 50px; /* Logo genişliği */
      height: auto; /* Yükseklik orantılı */
      margin-bottom: 20px; /* Logonun altına boşluk */
  }

  .nav-menu {
    display: flex; /* Flex düzen */
    flex-direction: row; /* Butonları yatayda hizala */
    justify-content: flex-start; /* Butonları sola hizala */
    align-items: center; /* Dikeyde ortala */
    gap: 10px; /* Butonlar arasındaki boşluk */
    padding-left: 20px; /* Sol kenardan boşluk ekle */
    list-style: none; /* Liste işaretlerini kaldır */
    margin: 40px; /* Dış boşlukları kaldır */
  }

  .nav-menu li {
      list-style: none; /* Liste işaretlerini kaldır */
  }

  .btn {
      font-size: 8px; /* Buton yazı boyutu */
      padding: 10px 20px; /* İç boşluk */
      text-align: center; /* Yazıyı ortala */
      background-color: #006b92; /* Buton arka planı */
      color: #ffffff; /* Yazı rengi */
      border: none; /* Kenarlık kaldır */
      border-radius: 5px; /* Yuvarlatılmış köşeler */
      cursor: pointer; /* El simgesi */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
      transition: background-color 0.3s ease; /* Hover geçiş efekti */
  }

  .btn:hover {
      background-color: #004d70; /* Hover sırasında buton arka planı */
  }
}


/* Tabletler (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-header {
    height: 70px; /* Header yüksekliği biraz küçültüldü */
    padding: 0 15px; /* Yatay boşluk orta seviyede */
  }

  .custom-logo img {
    width: 180px; /* Tablet için logo genişliği */
  }

  .custom-site-name {
    font-size: 1.5rem; /* Başlık yazı boyutu */
  }

  .nav-menu {
    gap: 15px; /* Menü elemanları arasındaki boşluk azaltıldı */
  }

  .btn {
    font-size: 14px; /* Buton yazı boyutu */
    height: 35px; /* Buton yüksekliği */
    line-height: 35px;
  }

  .btn .background {
    height: 3px; /* Hover efekt çubuğu */
  }
}

/* Masaüstü ve Geniş Ekranlar (min-width: 1024px) */
@media (min-width: 1024px) {
  .custom-header {
    height: 80px; /* Varsayılan yükseklik */
    padding: 0 20px; /* Varsayılan padding */
  }

  .custom-logo img {
    width: 200px; /* Varsayılan logo genişliği */
  }

  .custom-site-name {
    font-size: 1.8rem; /* Varsayılan başlık boyutu */
  }

  .nav-menu {
    gap: 20px; /* Varsayılan boşluk */
  }

  .btn {
    font-size: 15px; /* Varsayılan yazı boyutu */
    height: 40px; /* Varsayılan buton yüksekliği */
    line-height: 40px;
  }

  .btn .background {
    height: 3px; /* Varsayılan hover efekt çubuğu */
  }
}
