/* === header === */

.top-menu-flex {
  position: fixed;
  top: 0; left: 0; right: 0;
  background-color: var(--bg-color);
  z-index: 1000;
  padding: 10px 20px;
  display: flex; justify-content: space-between; align-items: center;

}

.menu-left, .menu-right {
  display: flex; align-items: center; gap: 16px;
}

.menu-link {
  color: var(--text-color); font-weight: 600; text-decoration: none;
}
.menu-link:hover { color: var(--color-bmx-darker); }


/* ===== Header → Events dropdown (FULL REPLACE) ===== */

/* ============ Events dropdown (hover bridge fix) ============ */

/* ddgap ( 6-8-10 ) */
.menu-dropdown{ position: relative; --dd-gap: 8px; }

/* Hover köprüsü: link ile dropdown arasındaki boşluğu doldurur (görünmez) */
.menu-dropdown::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--dd-gap);   /* boşluk kadar alan → hover kesilmez */
  /* background: transparent;  // görünmez */
}

/* Sadece hover/focus-within ile aç/kapat */
.menu-dropdown .dropdown{
  display: none;
  position: absolute;
  top: calc(100% + var(--dd-gap));   /* dropdown’u boşluk kadar aşağı indir */
  left: 0;
  z-index: 1000;
  background: var(--bg-color); color: var(--text-color);
  border-top: none;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: 0px 3px 10px var(--color-bmx-shadow);
  padding: 8px 10px;
  min-width: 140px;
  width: max-content;
  white-space: nowrap;
}
.menu-dropdown:hover .dropdown,
.menu-dropdown:focus-within .dropdown{ display:block; }

/* Caret hover’da yanıp/dönsün */
.menu-dropdown:hover .caret-icon,
.menu-dropdown:focus-within .caret-icon{
  background-color: var(--color-bmx-darker);
  transform: rotate(180deg);
}

/* Caret tanımı (mask) */
.caret-icon{
  width: 12px; height: 12px; margin-left: 6px; vertical-align: middle; display:inline-block;
  -webkit-mask: url("../images/sort.png") no-repeat center / contain;
  mask:         url("../images/sort.png") no-repeat center / contain;
  background-color: var(--text-color);
  transition: transform .18s ease, background-color .18s ease;
}

/* Menü item'ları – sağda boşluk kalmasın */
/* Nav ile uyumlu, daha kalın metin */
.dropdown-item{
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;     
  font-size: 15px;   
  line-height: 1.25;
  transition: color .15s ease, background-color .15s ease;
}

/* Hover/klavye odakta: arka plan + metin rengi bmx-darker */
.dropdown-item:hover,
.dropdown-item:focus-visible{
  background: var(--block-bg2);     /* senin kullandığın soft arka planla uyumlu */
  color: var(--color-bmx-darker);   /* “yanma” efekti */
  outline: none;                    /* focus halka istemiyorsan */
}

/* Header CTA — kompakt ölçü, taşma yok */
.top-menu-flex .menu-right .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;                 /* sabit yükseklik */
  padding: 0 14px;              /* yatay boşluk */
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;               /* çok satıra taşmayı engeller */
  white-space: nowrap;
}

/* Orta breakpoint’te de sabit kalsın */
@media (max-width: 1279px){
  .top-menu-flex .menu-right .btn {
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* mobile header */

.m-header .menu-right{
justify-content: flex-end;
gap: 8px;
}

.m-header .menu-right .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;                 /* sabit yükseklik */
  padding: 0 8px 0;              /* yatay boşluk */
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;               /* çok satıra taşmayı engeller */
  white-space: nowrap;
}


/* ——— MENÜ: tek satır kalsın, linkler satır kırmasın ——— */
.top-menu-flex { flex-wrap: nowrap; }
.top-menu-flex .menu-left{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;      /* kırma yok */
  min-width: 0;           /* flex hesap hatalarını engelle */
}

/* Tüm menü linkleri tek satır */
.top-menu-flex .menu-left .menu-link,
.top-menu-flex .menu-left .menu-dropdown { white-space: nowrap; }

/* “Listing Application” iki satıra düşmesin */
.top-menu-flex .menu-left a.menu-link { white-space: nowrap; }

/* ——— EVENTS: caret aynı satırda dursun ——— */
.menu-link.has-caret{
  display: inline-flex;      /* metin + caret yan yana */
  align-items: center;
  gap: 6px;                  /* metin-caret aralığı */
  line-height: 1;            /* alt satıra kaymayı önler */
}

/* caret tanımı varsa kalsın; sadece margin'i kaldırıyoruz */
.caret-icon{ margin-left: 0; vertical-align: middle; }

/* ===== Header layout fix ===== */
.top-menu-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;   /* sol ve sağ grubu ayır */
  column-gap: 20px;                 /* gruplar arası nefes */
  /* padding burada varsa koru */
}

/* Sol grup: tek satır, esneyebilir, ama sağa taşsa da altına girmesin */
.top-menu-flex .menu-left{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;                   /* alanın çoğunu kullanır */
  min-width: 0;                     /* flex overflow bug fix */
  white-space: nowrap;              /* "Listing Application" satır kırmasın */
}

/* Sağ grup: sabit; sola çakışmasın, arada boşluk kalsın */
.top-menu-flex .menu-right{
  position: static;                 /* olası absolute’ı iptal et */
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;                   /* genişliği kadar yer kaplar */
  margin-left: 16px;                /* sol gruptan güvenli mesafe */
  white-space: nowrap;
}

/* Header CTA butonları kompakt kalsın (taşma yok) */
.top-menu-flex .menu-right .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Caret satır kırmasın */
.menu-link.has-caret{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

/* Login & Signup */
.btn-login {
  background-color: var(--color-bmx-purple2);
  color: #000;
}

.btn-signup {
  background-color: var(--color-bmx-dark);
  color: #000;
}

.btn-login:hover{
  background-color: var(--color-bmx-light);
} 

.btn-signup:hover {
  background-color: var(--color-bmx-darker);
}


/* Orta breakpoint’te küçük ayar: biraz daha sıkı boşluklar */
@media (max-width: 1280px){
  .top-menu-flex .menu-left{ gap: 14px; }
  .top-menu-flex .menu-right{ gap: 10px; margin-left: 12px; }
}

/* Son güvenlik ağı: header aşırı sıkışmasın (ay taşıyorsa) */
@media (max-width: 1120px){
  .top-menu-flex{ min-width: 720px; }  /* ister header’a, ister body’ye koyabilirsin */
}

/* =======================
   DropDown Trigger Resets
   ======================= */

/* Tüm dropdown tetikleyicilerini link/ikon gibi yap (buton görünümü kapat) */
[data-dd] [data-dd-trigger]{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: var(--text-color);
  line-height: 1;
}

/* Page dropdown (Events vb.): metin + caret link gibi dursun */
.page-dd [data-dd-trigger]{
  display: inline-flex;
  align-items: center;
  gap: 6px;             /* metin-caret aralığı */
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
}

/* Hover rengi (mevcut nav hover’ı ile uyumlu) */
.page-dd [data-dd-trigger]:hover{
  color: var(--color-bmx-darker);
}

/* Caret (SVG kullanacaksan dosya adı burada) */
.caret-icon{
  width: 12px; height: 12px; display:inline-block; vertical-align: middle;
  -webkit-mask: url("../images/svg/sort.svg") no-repeat center/contain; /* <- sort.svg */
  mask:         url("../images/svg/sort.svg") no-repeat center/contain;
  background-color: var(--text-color);
  transition: transform .18s ease, background-color .18s ease;
}
.page-dd.is-open .caret-icon,
@media (hover:hover){
  .page-dd:hover .caret-icon{ transform: rotate(180deg); background-color: var(--color-bmx-darker); }
}

/* =======================
   Menu icon (sağ üst)
   ======================= */

/* Menü ikonunu saf ikon yap (buton stile girmesin) */
#menu-btn, .menu-icon{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  width: auto; height: auto;
  cursor: pointer;
  line-height: 0;       /* sıkı */
}

/* İkon boyutu moon ile tutarlı */
#menu-btn img, .menu-icon img{
  width: 22px; height: 22px; display:block;
}

/* Hover’a hafif vurgu (opsiyonel) */
#menu-btn:hover img, .menu-icon:hover img{
  opacity: .9;
}

/* =======================
   Çakışmaları engelle
   ======================= */

/* Sağ taraftaki CTA buton kuralları sadece .btn için geçerli olsun */
.top-menu-flex .menu-right .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* .btn KULLANMAYAN icon/menu tetikleyicilerini etkileme */
.top-menu-flex .menu-right #menu-btn,
.top-menu-flex .menu-right .menu-icon{ height:auto; padding:0; }

/* Eski .menu-dropdown/.dropdown kalıntılarının görünmesini engelle */
.menu-dropdown .dropdown{ display:none !important; }

/* =========================
   MENU ICON – theme aware
   ========================= */
#menu-btn, .menu-icon{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  line-height: 0;
  cursor: pointer;
}
#menu-btn img, .menu-icon img{
  width: 22px; height: 22px; display:block;
  filter: var(--menu-icon-filter, invert(1));
}
html[data-theme="dark"]  { --menu-icon-filter: invert(1); }
html[data-theme="light"] { --menu-icon-filter: invert(0); }

/* =========================
   DROPDOWNS – page-dd/menu-dd
   ========================= */

/* Popover ortak görünüm + taşma sınırları */
.page-dd [data-dd-popover],
.menu-dd [data-dd-popover]{
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  max-width: min(320px, calc(100vw - 16px)); /* sağa/sola taşma güvenliği */
  max-height: calc(100vh - 16px);            /* alta taşma güvenliği */
  overflow: auto;
  display: none;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--color-border-dark);
  border-radius: 12px;
  box-shadow: 0 12px 28px var(--color-bmx-shadow);
  padding: 8px;
}

/* Açıkken görünür */
.page-dd.is-open [data-dd-popover],
.menu-dd.is-open [data-dd-popover]{ display:block; }

/* Varsayılan yön/hizalama (JS gerekli yerde flip eder) */
[data-dd]{ --dd-gap: 8px; position: relative; }
[data-dd][data-dd-dir="down"]   [data-dd-popover]{ top:  calc(100% + var(--dd-gap)); bottom: auto; }
[data-dd][data-dd-dir="up"]     [data-dd-popover]{ bottom: calc(100% + var(--dd-gap)); top: auto; }
[data-dd][data-dd-align="left"] [data-dd-popover]{ left: 0; right: auto; }
[data-dd][data-dd-align="right"][data-dd-popover]{ right: 0; left:  auto; }

/* Menü için sağ hizalamayı varsayılan yap (HTML'de data-dd-align yazmasan bile) */
.menu-dd [data-dd-popover]{ right: 0; left: auto; }

/* Hover köprüsü (tetikleyici ile popover arasında boşlukta hover kesilmesin) */
.page-dd::after, .menu-dd::after{
  content:""; position:absolute; left:0; right:0; top:100%; height: var(--dd-gap);
}

/* Trigger reset: link/ikon gibi görünsün (buton değil) */
[data-dd] [data-dd-trigger]{
  background: transparent; border:0; padding:0; margin:0; box-shadow:none;
  -webkit-appearance:none; appearance:none;
  color: var(--text-color); font: inherit; line-height:1; cursor:pointer;
}

/* Page dropdown (Events) – metin + caret link gibi */
.page-dd [data-dd-trigger]{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.page-dd [data-dd-trigger]:hover{ color: var(--color-bmx-darker); }

/* Caret (sort.svg kullanıyoruz) */
.caret-icon{
  width: 12px; height: 12px; display:inline-block; vertical-align: middle;
  -webkit-mask: url("../images/svg/sort.svg") no-repeat center/contain;
  mask:         url("../images/svg/sort.svg") no-repeat center/contain;
  background-color: var(--text-color);
  transition: transform .18s ease, background-color .18s ease;
}
.page-dd.is-open .caret-icon{ transform: rotate(180deg); background-color: var(--color-bmx-darker); }

/* İçerikler */
.dd-list{ display:flex; flex-direction:column; gap:4px; }
.dd-item{
  display:block; padding:8px 10px; border-radius:10px;
  color:var(--text-color); text-decoration:none; font-weight:600; font-size:15px;
}
.dd-item:hover, .dd-item:focus-visible{
  background: var(--block-bg2); color: var(--color-bmx-darker); outline:none;
}
.menu-dd .dd-section{ padding:6px 8px; }
.menu-dd .dd-title{ font-size:12px; opacity:.7; margin:2px 0 6px; letter-spacing:.2px; font-weight:700; }
.menu-dd .menu-dd-row{ display:flex; flex-wrap:wrap; gap:6px; }
.menu-dd .menu-dd-item{
  padding:6px 10px; border-radius:8px; border:1px solid var(--color-border-dark);
  background: var(--block-bg); cursor:pointer; user-select:none; font-weight:600; font-size:13px;
}
.menu-dd .menu-dd-item.is-active{
  background: var(--color-bmx-darker); color: var(--text-color-negative); border-color: transparent;
}