/* ========== Header & Mobile Menu (tek kaynak) ========== */

:root{
  /* JS ilk yüklemede gerçek yüksekliği yazar; fallback değer */
  --header-h: 72px;
  --action-h: 44px; /* sağdaki buton (Giriş / kullanıcı) yüksekliği */
}

header{
  position: sticky;
  top: 0;
  z-index: 11000; /* overlay menünün üstünde */
  background: rgb(251, 247, 247);
}

#menu{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}

#logo{
  display:flex;
  align-items:center;
}

#logo img{
  height: 60px;
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Ana nav (desktop) */
#nav-menu{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

#nav-menu a{
  text-decoration:none;
  margin: 0 15px;
  color:#333;
  font-weight:500;
  font-size:16px;
}

/* Sağ taraf: kullanıcı + hamburger */
.right-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

/* Hamburger (desktop'ta gizli) */
.hamburger-menu{
  display:none;
  align-items:center;
  justify-content:center;

  /* Giriş butonu ile aynı yükseklik */
  height: var(--action-h, 44px);
  width:  var(--action-h, 44px);

  padding:0;
  border:1px solid rgba(17,24,39,.25);
  background: transparent;
  cursor:pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

/* 3 çizgili ikon (X'e dönüşecek) */
.hamburger-icon{
  position: relative;
  width: 52%;
  height: 46%;
  display:block;
}

.hamburger-icon span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#111;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}

.hamburger-icon span:nth-child(1){ top: 0; }
.hamburger-icon span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.hamburger-icon span:nth-child(3){ top: 100%; transform: translateY(-100%); }

/* Açıkken X */
.hamburger-menu.is-open .hamburger-icon span:nth-child(1){
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger-menu.is-open .hamburger-icon span:nth-child(2){
  opacity: 0;
}
.hamburger-menu.is-open .hamburger-icon span:nth-child(3){
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ===== Mobile overlay menu ===== */
@media (max-width: 900px){
  /* desktop nav kapalı, hamburger açık */
  #nav-menu{ display:none; justify-content:flex-start; }
  .hamburger-menu{ display:inline-flex; }

  /* Menü açıkken: header'ın ALTINDAN başlasın */
  #nav-menu.show{
    display:flex !important;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;

    /* Android/iOS adres çubuğu oynasa bile boşluk bırakmasın */
    height: calc(100dvh - var(--header-h));
    height: calc(100vh - var(--header-h));

    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;

    background: #fff; /* tam opak: alttan içerik asla görünmesin */
    border-top: 1px solid rgba(17,24,39,.12);
    z-index: 10990; /* header'ın altında */

    overflow-y:auto;
    -webkit-overflow-scrolling: touch;

    /* Scroll zinciri kır (destekleyen tarayıcılarda) */
    overscroll-behavior: contain;

    /* iOS'ta daha iyi his */
    touch-action: pan-y;

    padding: 6px 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    box-sizing: border-box;
  }

  #nav-menu.show a{
    display:block;
    width:100%;
    padding: 16px 18px;
    margin: 0;
    font-size: 18px;
    color: #111;
    border-bottom: 1px solid rgba(17,24,39,.10);
    box-sizing:border-box;
  }

  #nav-menu.show a:last-child{ border-bottom: 0; }

  /* Menü açıkken: tarayıcı scroll zincirini daha da zorla kes */
  html.nav-open,
  body.nav-open{
    overflow:hidden;
    overscroll-behavior: none;
  }
}