.ust-bant {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

/*
 * Bant sekiz menü ögesiyle sıkışıyordu. Dolgu, boşluk ve punto kısıldı;
 * menü artık 1088 pikselde de sığıyor ve hamburger eşiği 78rem'den
 * 68rem'e geri indi.
 */
.ust-bant-ic {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.logo img {
  width: auto;
  height: 1.95rem;
}

/* Konseptte logonun yanında derneğin adı iki-üç satır hâlinde duruyor. */
.logo-alt {
  max-width: 9rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--metin-soluk);
  border-left: 1px solid var(--cizgi);
  padding-left: 0.65rem;
  display: block;
}

@media (max-width: 64rem) {
  .logo-alt {
    display: none;
  }
}

.ust-bant-sag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Bant düğmesi gövde düğmelerinden küçük. */
.ust-bant-sag .buton {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.arama-dugme {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  color: var(--metin-soluk);
}

.arama-dugme:hover {
  background: var(--zemin-acik);
  color: var(--metin);
}

/* --- Gezinti --- */

.gezinti {
  flex: 1;
  min-width: 0;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-oge {
  position: relative;
}

.menu-bag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.7rem 0.55rem;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--metin);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  /* Alt menüsü olan başlık <button>; tarayıcı varsayılanları sıfırlanıyor. */
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: inherit;
  text-align: left;
}

.menu-oge:hover > .menu-bag,
.menu-oge.aktif > .menu-bag {
  color: var(--kirmizi);
}

.menu-oge.aktif > .menu-bag {
  border-bottom-color: var(--kirmizi);
  font-weight: 600;
}

.ok {
  transition: transform 0.15s ease;
}

.menu-oge:hover .ok {
  transform: rotate(180deg);
}

.alt-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: 0 0 var(--radius-kucuk) var(--radius-kucuk);
  box-shadow: var(--golge-guclu);
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}

/*
 * `focus-within` şart: masaüstünde alt menü yalnızca fareyle üzerine
 * gelince açılıyordu ve alt menüyü açan düğme masaüstünde gizli. Yani
 * klavyeyle gezen biri "Kurumsal" başlığına gelebiliyor ama altındaki
 * yedi sayfaya hiçbir şekilde ulaşamıyordu.
 */
.menu-oge:hover .alt-menu,
.menu-oge:focus-within .alt-menu,
.alt-menu.acik {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.alt-menu a {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  color: var(--metin);
}

.alt-menu a:hover {
  background: var(--zemin-acik);
  color: var(--kirmizi);
}

.mobil-dugme,
.alt-ac {
  display: none;
}


/* --- Mega menü --- */

/*
 * Panel bandın tamamına yayılıyor, ögesinin altına değil: `.menu-oge`
 * konumlandırma bağlamı olduğu için panel oradan çıkıyordu. Sabit
 * konumlandırma yerine bantın kendisine göre yayılması için `.menu-oge`
 * üzerindeki `position: relative` mega ögelerde kaldırılıyor.
 */
.menu-oge.megali {
  position: static;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge-guclu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}

.menu-oge.megali:hover .mega-menu,
.menu-oge.megali:focus-within .mega-menu,
.mega-menu.acik {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 2rem;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.mega-baglantilar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  align-content: start;
}

.mega-oge {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-kucuk);
  color: var(--metin);
}

.mega-oge:hover,
.mega-oge:focus-visible {
  background: var(--zemin-acik);
}

.mega-oge.aktif {
  background: var(--kirmizi-soluk);
}

.mega-oge-ad {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.mega-oge:hover .mega-oge-ad,
.mega-oge.aktif .mega-oge-ad {
  color: var(--kirmizi);
}

.mega-oge-aciklama {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--metin-soluk);
}

.mega-yan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--zemin-acik);
  border: 1px solid var(--cizgi);
}

.mega-yan-etiket {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--kirmizi);
}

.mega-yan h3 {
  font-size: 1rem;
  margin: 0;
}

.mega-yan p {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--metin-soluk);
}

/* --- Mobil --- */

/*
 * Eşik 68rem. Sekiz öge bir ara sığmıyordu ve eşik geçici olarak 78rem'e
 * çıkarılmıştı; punto, dolgu ve boşluklar kısılıp logo alt yazısı 84rem
 * altında gizlenince menü 1088 pikselde yeniden sığdı. Eşiği yüksek
 * bırakmak, sığan bir menüyü hamburgere gömmek olurdu.
 */
@media (max-width: 68rem) {
  .logo-alt {
    display: none;
  }

  .ust-bant-ic {
    gap: 0.75rem;
  }

  .gezinti {
    order: -1;
    flex: 0 0 auto;
  }

  .mobil-dugme {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.65rem;
    margin-left: -0.65rem;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .cizgi {
    display: block;
    height: 2px;
    background: var(--metin);
    border-radius: 2px;
  }

  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    box-shadow: var(--golge-guclu);
    padding: 0.5rem 0;
  }

  .menu.acik {
    display: flex;
  }

  /*
   * Mobilde mega panel yok: katlanır listenin içinde açılıyor. Bandın
   * tamamına yayılan bir panel dar ekranda zaten tam genişlik oluyor ve
   * kaydırmayı bozuyordu.
   */
  .menu-oge.megali {
    position: relative;
  }

  .mega-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: var(--zemin-acik);
  }

  .mega-menu.acik {
    display: block;
  }

  .mega-ic {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 0.75rem 1.5rem 1.25rem;
  }

  .mega-baglantilar {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu-oge.megali:hover .mega-menu,
  .menu-oge.megali:focus-within .mega-menu {
    display: none;
  }

  .menu-oge.megali .mega-menu.acik {
    display: block;
  }

  .menu-bag {
    padding: 0.8rem 1.5rem;
    border-bottom: 0;
  }

  .menu-bag .ok {
    display: none;
  }

  /* Mobilde alt menü ayrı bir düğmeyle açılıyor; böylece başlığın kendi
     bağlantısı da kullanılabilir kalıyor. */
  .alt-ac {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 2.9rem;
    background: none;
    border: 0;
    color: var(--metin-soluk);
    cursor: pointer;
  }

  .alt-menu {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    background: var(--zemin-acik);
    transform: none;
    opacity: 1;
    visibility: visible;
    padding: 0;
  }

  /*
   * Burada bir "hover'da gizle" kuralı vardı; alt menüyü mobilde tamamen
   * çalışmaz hâle getiriyordu. Kural `.menu-oge:hover .alt-menu` olarak
   * yazıldığı için `.alt-menu.acik` kuralından daha özgüldü ve onu
   * eziyordu. Dokunmatik ekranda parmak kalktıktan sonra öğe `:hover`
   * durumunda kaldığı için menü açıldığı anda yeniden gizleniyordu.
   *
   * Kural gereksizdi zaten: mobilde `.alt-menu` öntanımlı `display: none`
   * ve masaüstündeki hover kuralı yalnızca `opacity`/`visibility`
   * değiştiriyor, `display`'e dokunmuyor.
   */
  .alt-menu.acik {
    display: block;
  }

  .alt-menu a {
    padding-left: 2.5rem;
  }
}

/*
 * Dar telefonlar (320px — iPhone SE ve eski Android'ler).
 *
 * Üst bantta hamburger + logo + arama + "Üye Girişi" yan yana 311 piksel
 * istiyordu, kullanılabilir alan ise 272 piksel; sayfanın tamamı 16 piksel
 * sağa taşıyordu. Boşluklar ve düğme daraltıldı.
 */
@media (max-width: 26rem) {
  .ust-bant-ic {
    gap: 0.5rem;
  }

  .ust-bant-sag {
    gap: 0.4rem;
  }

  .ust-bant-sag .buton {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
  }

  .logo img {
    height: 1.9rem;
  }
}

/*
 * "Üye Ol" düğmesi girişin yanında duruyor. Menü daha önce sıkışıktı,
 * bu yüzden düğme dolgusu ve yazısı kısıldı; dokunma hedefi yine de
 * 24 pikselin üstünde.
 */
.uye-ol-dugmesi {
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/*
 * Dar ekranda hamburger menü açılıyor ve sağda yalnızca giriş düğmesi
 * kalıyor; iki düğme yan yana sığmıyordu. "Üye Ol" menünün içinden ve
 * sayfalardaki düğmelerden ulaşılabilir durumda.
 */
@media (max-width: 48rem) {
  .uye-ol-dugmesi {
    display: none;
  }
}