/* ============================================================
   site-navbar.css — the new shared navbar (Paketler dropdown +
   Keşfet). Loaded on every page alongside the site CSS. Styles
   only the Paketler dropdown + Turkish-safe nav fonts; the bar
   itself reuses the site's existing navbar classes.
   ============================================================ */

/* Turkish-safe nav fonts (site body font Thicccboi lacks ç/ğ/ı/ö/ş/ü) */
.kf-nav .kpss-nav-menu-item,
.kf-nav .kf-dd-toggle,
.kf-dd-item {
  font-family: "Poppins", "Open Sans", sans-serif;
}

/* Design: bolder main nav headings (incl. the Paketler toggle) so the lighter
kpss-style (.kf-nav) and header-nav (42 pages, no .kf-nav). */
@media (max-width: 991px) {
  .kf-nav .kpss-nav-menu-item,
  .header-nav-link.w-nav-link,
  .kf-dd-toggle {
    font-weight: 700;
  }
   }

/* Paketler dropdown */
.kf-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* On the kpss-style navbar the wrapper is space-between with a wide menu, so the
   logo↔Paketler gap collapses to 0. Give the first item breathing room.
   Desktop only — on the mobile burger it must stay centered (see media query). */
@media (min-width: 992px) {
  .kpss-nav-menu-items .kf-dropdown {
    margin-left: 32px;
  }
}
.kf-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  /* match the sibling nav links: inherit family/size, but DON'T use `font:` (it
     would reset the weight-500 that .kpss-nav-menu-item / .header-nav-link give). */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
/* Design: Paketler text = #121212 on the light (kpss-style) navbars — homepage,
   kpss, and the Keşfet React app. NOT the blue header-nav pages (their toggle is
   .header-nav-link + white, so this .kpss-nav-menu-item selector doesn't match). */
   .kpss-nav-menu-item.kf-dd-toggle {
    color: #121212;
  }
  
.kf-caret {
  font-size: 12px;
  transition: transform 0.18s ease;
}
.kf-dropdown.is-open .kf-caret {
  transform: rotate(180deg);
}
.kf-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(6, 15, 51, 0.14);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 9999;
}
.kf-dropdown.is-open .kf-dd-menu {
  display: flex;
}
/* Hover-open only on real pointer devices. On touch (the hamburger), tapping the
   toggle leaves :hover "stuck", which kept the menu open even after the click
   toggle removed .is-open — so a second tap couldn't close it. */
   @media (hover: hover) and (pointer: fine) {
    .kf-dropdown:hover .kf-dd-menu {
      display: flex;
    }
  }
.kf-dd-item {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: #060f33;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.kf-dd-item:hover {
  background: #f0f4ff;
  color: #003be6;
}

/* on mobile (nav collapsed under the burger) render the menu inline, stacked
   UNDER the toggle (not beside it), full width */
@media (max-width: 991px) {
  .kf-dropdown {
    flex-direction: column;
    width: 100%;
  }
  .kf-dd-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 4px 0;
    min-width: 0;
    width: 100%;
  }
  /* the kpss-style burger centers its links → center Paketler + its items too */
  .kpss-nav-menu-items .kf-dropdown {
    margin-left: 0;
    align-items: center;
  }
  .kpss-nav-menu-items .kf-dd-toggle {
    justify-content: center;
  }
  .kpss-nav-menu-items .kf-dd-menu {
    align-items: center;
  }
  .kpss-nav-menu-items .kf-dd-item {
    text-align: center;
  }
}