@import url("/assets/css/base/tokens.css");

:root {
  --topbar-h: 42px; /* tokens.css’te de tutabiliriz */
  --topbar-alpha: 0.55; /* degrade opaklık */
  --topbar-offset: var(--topbar-h);
  --topbar-height: 42px;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  color: #fff;

  /* Daha açık maviye kayan degrade + cam efekti (daha şeffaf) */
  background: linear-gradient(
    90deg,
    rgba(21, 101, 192, 0.55) 0%,
    /* koyu mavi */ rgba(33, 150, 243, 0.55) 50%,
    /* orta mavi */ rgba(100, 181, 246, 0.55) 100% /* açık mavi */
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  z-index: 110;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.topbar.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.topbar .left i {
  margin-right: 6px;
}
.topbar .left span {
  margin-right: 18px;
  white-space: nowrap;
}
/* Telefon bağlantısını (tel:) link yapınca tarayıcıların mavi/underline vermesini engelle */
.topbar .left .topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  color: inherit; /* iOS Safari mavi yapmasın */
  text-decoration: none; /* underline kaldır */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.topbar .left .topbar-phone:link,
.topbar .left .topbar-phone:visited,
.topbar .left .topbar-phone:hover,
.topbar .left .topbar-phone:active,
.topbar .left .topbar-phone:focus {
  color: inherit !important; /* tüm durumlarda maviye dönmesin */
  text-decoration: none !important; /* alt çizgi oluşmasın */
  outline: none; /* focus çerçevesini kaldırıyoruz (erişilebilirlik için istenirse farklı stil eklenebilir) */
}
/* iOS / Safari bazı durumlarda tel: linklerini yine de renklendirebiliyor – ek güvenlik için attribute tabanlı seçim */
.topbar .left a[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
}
.topbar .left .topbar-phone:active {
  opacity: 0.85;
}
.topbar .left .topbar-phone i {
  margin: 0;
}
/* Sağ ikonlar */
.topbar .right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  margin-left: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 8px rgba(34, 198, 255, 0.25);
}
.topbar .right a:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(34, 198, 255, 0.55);
}

/* Navbar topbar'ın altında başlasın */
.navbar {
  top: var(--topbar-height, 42px) !important;
}
body.scrolled .navbar {
  top: 0 !important;
}

/* Mobil düzen */
/* Mobil düzen */
@media (max-width: 768px) {
  .topbar {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    padding: 6px 12px;
    font-size: 13px;
  }

  .topbar .left {
    display: flex;
    align-items: center;
    width: 100%; /* email sola, telefon sağa */
  }

  .topbar .left .topbar-email {
    margin-right: auto;
  }

  .topbar .left .topbar-phone {
    margin-left: auto;
    text-align: right;
    color: inherit; /* maviye dönmesini engelle */
    text-decoration: none; /* alt çizgi kaldır */
  }

  .topbar .left .topbar-phone i {
    margin-right: 6px;
  }

  /* Sosyal medya ikonlarını gizle */
  .topbar .right {
    display: none;
  }
}