/* ===========================
   HEADER DROPDOWNS (NEW API)
   =========================== */

/* Ortak kök */
.page-dd, .menu-dd { position: relative; --dd-gap: 20px; }

/* Görünürlük: JS .is-open sınıfını atar.
   Page dropdown için ayrıca hover desteği de veriyoruz (pointer destekleyen cihazlarda). */
.page-dd [data-dd-popover],
.menu-dd [data-dd-popover]{
  display: none;
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  width: max-content;
  background: var(--bg-color);
  color: var(--text-color);
  box-shadow: 0 8px 24px var(--color-bmx-shadow);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid var(--color-border-dark);
}

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

/* Page dropdown: hover ile de aç (desktop’ta akıcı his) */
@media (hover:hover){
  .page-dd:hover [data-dd-popover]{ display:block; }
}

/* Yön ve hizalama: JS gerekirse flip eder */
[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; }

/* Caret */
.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,
.page-dd:hover   .caret-icon{ transform: rotate(180deg); background-color: var(--color-bmx-darker); }

/* Page dropdown içerikleri (navigation)*/
.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 dropdown içerikleri */
.menu-dd .dd-section{ padding:6px 8px; }

.menu-dd .dd-title {
    font-size: 14px;
    opacity: 1;
    margin: 3px 5px 10px;
    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: 2px solid var(--color-bmx-shadow);
  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;
}

/* Hover “köprüsü”  */
.page-dd::after, .menu-dd::after{
  content:""; position:absolute; left:0; right:0; top:100%; height: var(--dd-gap);
}

/* Trigger (link veya buton) tek satır kalsın */
.menu-link.has-caret{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* Menü butonları header sağında taşmasın */
.top-menu-flex .menu-right{ gap:12px; white-space:nowrap; }
.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;
}

/* Orta breakpoint fine-tune */
@media (max-width: 1480px){
  .top-menu-flex .menu-right{ gap:10px; }
  .top-menu-flex .menu-right .btn{ height:34px; padding:0 12px; }
}