/* SummerToons — Header & Search Fix
 * Authoritative layer loaded after mauve-toons.css / notifications.css.
 * 1) Desktop dropdowns: absolute, no layout shift, no dead hover gap.
 * 2) Mobile: real right-side control cluster + single-level accordion.
 * 3) Live-search dropdown.
 * Palette kept in the site's mauve identity.
 */

:root {
  --sthfx-accent: #5b0cec;
  --sthfx-lilac: #af67ff;
  --sthfx-surface: #150c28;
  --sthfx-surface-2: #1e1238;
  --sthfx-line: rgba(175, 103, 255, .22);
  --sthfx-text: #f0ecfa;
  --sthfx-text-2: #b3a4d0;
}

/* ================================================================== *
 * 1. DESKTOP DROPDOWNS  (min-width: 881px)
 * ================================================================== */
@media (min-width: 881px) {

  #main-menu ul.menu > li {
    position: relative !important;
  }

  /* common submenu shell: absolute so it never reflows the header row */
  #main-menu ul.menu > li > .sub-menu,
  #main-menu ul.menu > li .mauve-account-submenu,
  #main-menu ul.menu > li .mauve-recruit-submenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 220px !important;
    padding: 8px !important;
    display: block !important;
    background: var(--sthfx-surface-2) !important;
    border: 1px solid var(--sthfx-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .16s;
    pointer-events: none;
  }
  #main-menu ul.menu > li .mauve-account-submenu { left: auto !important; right: 0 !important; }

  /* invisible bridge across the parent→submenu gap so hover is never lost */
  #main-menu ul.menu > li.menu-item-has-children > a::before,
  #main-menu ul.menu > li.mauve-account-nav > a::before,
  #main-menu ul.menu > li.mauve-recruit-nav .mauve-recruit-menu > summary::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    display: block;
  }

  /* open on hover / keyboard focus of the whole item */
  #main-menu ul.menu > li:hover > .sub-menu,
  #main-menu ul.menu > li:focus-within > .sub-menu,
  #main-menu ul.menu > li:hover .mauve-account-submenu,
  #main-menu ul.menu > li:focus-within .mauve-account-submenu,
  #main-menu ul.menu > li:hover .mauve-recruit-submenu,
  #main-menu ul.menu > li:focus-within .mauve-recruit-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }

  /* the recruit <details> becomes a hover menu like the others */
  #main-menu .mauve-recruit-menu { position: static !important; }
  #main-menu .mauve-recruit-menu > summary { list-style: none !important; cursor: default !important; }

  #main-menu ul.menu > li .sub-menu a,
  #main-menu ul.menu > li .mauve-account-submenu a,
  #main-menu ul.menu > li .mauve-recruit-submenu a {
    display: block !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    color: var(--sthfx-text) !important;
    line-height: 1.3 !important;
  }
  #main-menu ul.menu > li .sub-menu a:hover,
  #main-menu ul.menu > li .mauve-account-submenu a:hover,
  #main-menu ul.menu > li .mauve-recruit-submenu a:hover {
    background: rgba(175, 103, 255, .16) !important;
    color: #fff !important;
  }
  #main-menu .mauve-recruit-submenu strong { display: block !important; font-size: 13px !important; }
  #main-menu .mauve-recruit-submenu small { display: block !important; font-size: 11px !important; color: var(--sthfx-text-2) !important; }

  /* keep desktop bell in the nav flow, right after "Kütüphanem", before search */
  .stn-bell-item { display: inline-flex !important; align-items: center; }
  .sthfx-cluster { display: none !important; }

  /* the mobile accordion chevron has no place on desktop */
  .sthfx-acc-toggle { display: none !important; }
}

/* ================================================================== *
 * 2. MOBILE HEADER  (max-width: 880px)
 * ================================================================== */
@media (max-width: 880px) {

  .centernav.bound {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 12px !important;
    padding: 10px 0 !important;
  }

  /* logo cluster: always first, always left */
  .centernav.bound > header,
  .centernav.bound .site-branding.logox {
    order: 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  /* right-side control cluster: assembled by headerfix.js */
  .sthfx-cluster {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* exact visual order inside the cluster */
  .sthfx-cluster .mauve-mobile-account-quick { order: 1 !important; }
  .sthfx-cluster .stn-bell               { order: 2 !important; }
  .sthfx-cluster .shme                    { order: 3 !important; }

  /* any stray copies that briefly land outside the cluster stay hidden */
  .centernav.bound > .mauve-mobile-account-quick,
  .centernav.bound > .stn-bell,
  .centernav.bound > .stn-bell-item { display: none !important; }

  .sthfx-cluster .mauve-mobile-account-quick {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--sthfx-accent);
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
  }

  .sthfx-cluster .stn-bell {
    /* MUST stay positioned: .stn-bell__badge is position:absolute against it.
       `static` here detached the red badge and let it float elsewhere. */
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sthfx-cluster .shme {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 10px !important;
    border: 1px solid var(--sthfx-line) !important;
    background: var(--sthfx-surface) !important;
    color: var(--sthfx-text) !important;
  }

  /* search box: full-width row below the top bar */
  .centernav.bound .searchx {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .centernav.bound .srcmob { display: none !important; }

  /* ---- nav shell ---- */
  #main-menu {
    order: 4 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    display: none !important;
  }
  body.mauve-nav-open #main-menu { display: block !important; }

  #main-menu > span { display: block !important; }
  #main-menu ul.menu,
  #main-menu .menu {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 6px !important;
    list-style: none !important;
    border: 1px solid var(--sthfx-line) !important;
    border-radius: 14px !important;
    background: #110a1e !important;
    max-height: calc(100vh - 150px);
    overflow-y: auto !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
  }

  /* ---- accordion rows ---- */
  #main-menu ul.menu > li {
    display: block !important;
    position: static !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  #main-menu ul.menu > li > a,
  #main-menu ul.menu > li > .mauve-recruit-menu > summary {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--sthfx-text) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    list-style: none !important;
  }
  #main-menu ul.menu > li > a:hover { background: rgba(175, 103, 255, .12) !important; }

  /* the toggle button headerfix.js injects for a parent with children */
  .sthfx-acc-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: rgba(175, 103, 255, .12);
    color: var(--sthfx-lilac);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
  }
  #main-menu ul.menu > li.sthfx-open > a .sthfx-acc-toggle,
  #main-menu ul.menu > li.sthfx-open > .sthfx-acc-toggle { transform: rotate(180deg); }

  /* submenus: closed by default, single indent level, no box-in-box */
  #main-menu ul.menu > li .sub-menu,
  #main-menu ul.menu > li .mauve-account-submenu,
  #main-menu ul.menu > li .mauve-recruit-submenu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 6px 10px !important;
    border: 0 !important;
    border-left: 2px solid var(--sthfx-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  #main-menu ul.menu > li.sthfx-open > .sub-menu,
  #main-menu ul.menu > li.sthfx-open .mauve-account-submenu,
  #main-menu ul.menu > li.sthfx-open .mauve-recruit-submenu { display: block !important; }

  /* recruit <details> is driven by the accordion, not its native marker */
  #main-menu .mauve-recruit-menu { display: block !important; }
  #main-menu .mauve-recruit-menu > summary::-webkit-details-marker { display: none !important; }
  #main-menu .mauve-recruit-menu > summary::before,
  #main-menu .mauve-recruit-menu > summary::after { display: none !important; }

  #main-menu ul.menu > li .sub-menu li,
  #main-menu ul.menu > li .mauve-account-submenu li,
  #main-menu ul.menu > li .mauve-recruit-submenu li { display: block !important; margin: 0 !important; }
  #main-menu ul.menu > li .sub-menu a,
  #main-menu ul.menu > li .mauve-account-submenu a,
  #main-menu ul.menu > li .mauve-recruit-submenu a {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: var(--sthfx-text-2) !important;
    font-weight: 500 !important;
  }
  #main-menu ul.menu > li .sub-menu a:hover,
  #main-menu ul.menu > li .mauve-account-submenu a:hover,
  #main-menu ul.menu > li .mauve-recruit-submenu a:hover { color: #fff !important; background: rgba(175, 103, 255, .12) !important; }
  #main-menu .mauve-recruit-submenu strong { font-weight: 600 !important; }
  #main-menu .mauve-recruit-submenu small { display: block !important; font-size: 11px !important; color: var(--sthfx-text-2) !important; }

  /* the ▾ glyph mauve adds after "Hesabım" is redundant next to the toggle */
  #main-menu .mauve-account-menu > a::after { display: none !important; }

  /* bell lives in the cluster on mobile; its empty nav <li> and the duplicate
   * top-level "Kütüphanem" shortcut are hidden so the accordion matches spec */
  #main-menu .stn-bell-item,
  #main-menu li.stp-lib-nav { display: none !important; }
}

/* ================================================================== *
 * 3. LIVE SEARCH DROPDOWN
 * ================================================================== */

/* suppress the theme's encrypted live-search UI */
#live-search_sb { display: none !important; }

.sthfx-sd {
  position: fixed;
  z-index: 100000;
  background: var(--sthfx-surface-2);
  border: 1px solid var(--sthfx-line);
  border-radius: 12px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
  overflow: hidden;
  max-height: min(70vh, 460px);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--sthfx-text);
}
.sthfx-sd[hidden] { display: none; }

.sthfx-sd__list { overflow-y: auto; padding: 6px; }

.sthfx-sd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--sthfx-text);
}
.sthfx-sd__item:hover,
.sthfx-sd__item.is-active { background: rgba(175, 103, 255, .16); }

.sthfx-sd__cover {
  flex: 0 0 auto;
  width: 38px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--sthfx-surface);
  border: 1px solid var(--sthfx-line);
}
.sthfx-sd__meta { min-width: 0; }
.sthfx-sd__title {
  display: block;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sthfx-sd__alt {
  display: block;
  font-size: 12px;
  color: var(--sthfx-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sthfx-sd__msg { padding: 14px 12px; color: var(--sthfx-text-2); text-align: center; }

.sthfx-sd__all {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--sthfx-line);
  color: var(--sthfx-lilac);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.sthfx-sd__all:hover { background: rgba(175, 103, 255, .12); }

@media (max-width: 880px) {
  .sthfx-sd { border-radius: 10px; }
  .sthfx-sd__title { white-space: normal; }
}