/*
 * Mobile navigation: blue menu trigger and accessible vertical drawer.
 * Overrides legacy desktop !important rules from theme/ozel/css.php.
 * Desktop navigation intentionally unchanged.
 */
@media screen and (max-width: 991px) {
  /* Avoid trapping the fixed menu beneath the mobile overlay. */
  header,
  header.headroom,
  header.headroom--top,
  header.headroom--not-bottom,
  header.headroom--pinned,
  header.headroom--bottom,
  header.headroom--unpinned {
    z-index: auto !important;
  }

  header nav.col-xs-9 {
    position: relative !important;
    overflow: visible !important;
  }

  /* Blue, rounded, touch-friendly hamburger trigger. */
  header .cmn-toggle-switch {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, #1788f5 0%, #0867ce 100%) !important;
    box-shadow: 0 5px 14px rgba(5, 97, 205, .25) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-indent: -9999px;
    transition: background .2s ease, box-shadow .2s ease !important;
  }

  header .cmn-toggle-switch:hover {
    background: linear-gradient(145deg, #2696ff 0%, #0764c6 100%) !important;
    box-shadow: 0 7px 18px rgba(5, 97, 205, .32) !important;
  }

  header .cmn-toggle-switch:focus-visible {
    outline: 3px solid #68b8ff !important;
    outline-offset: 3px;
  }

  header .cmn-toggle-switch span {
    top: 22px !important;
    left: 12px !important;
    right: 12px !important;
    height: 2px !important;
    background-color: #fff !important;
    border-radius: 2px;
  }

  header .cmn-toggle-switch span::before,
  header .cmn-toggle-switch span::after {
    height: 2px !important;
    background-color: #fff !important;
    border-radius: 2px;
  }

  header .cmn-toggle-switch span::before {
    top: -7px;
  }

  header .cmn-toggle-switch span::after {
    bottom: -7px;
  }

  header .cmn-toggle-switch__htx.active span {
    background: none !important;
  }

  /* Fixed, independently scrollable vertical navigation drawer. */
  header .main-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    float: none !important;
    display: block !important;
    width: 86vw !important;
    max-width: 350px !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    z-index: 999999 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 0 16px 16px 0;
    box-shadow: 5px 0 24px rgba(6, 32, 72, .18);
    transform: translateX(-110%) !important;
    -webkit-overflow-scrolling: touch;
  }

  header .main-menu.show {
    transform: translateX(0) !important;
  }

  header .main-menu #header_menu {
    display: block !important;
    position: relative;
    text-align: left !important;
    padding: 24px 56px 20px 20px !important;
    background: #f5f9ff;
    border-bottom: 1px solid #e3edfa;
  }

  header .main-menu #header_menu img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  header .main-menu #close_in {
    display: block !important;
    top: 18px !important;
    right: 18px !important;
    width: 28px !important;
    height: 28px !important;
  }

  header .main-menu #close_in:focus-visible {
    outline: 2px solid #0867ce;
    outline-offset: 3px;
  }

  header .main-menu > ul {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: initial !important;
    justify-content: initial !important;
    flex-wrap: wrap !important;
    padding: 8px 0 24px !important;
    margin: 0 !important;
    list-style: none !important;
  }

  header .main-menu > ul > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-bottom: 1px solid #eef2f7;
  }

  header .main-menu > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 13px 20px !important;
    line-height: 1.45 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    color: #183455 !important;
    box-sizing: border-box !important;
  }

  header .main-menu > ul > li > a:hover,
  header .main-menu > ul > li > a:focus-visible {
    color: #0867ce !important;
    background: #f3f8ff !important;
  }

  header .main-menu ul ul a {
    white-space: normal !important;
  }
}