/* Mobil üst header — ekran üstünde sabit, kaydırınca küçülür */
@media (max-width: 1020px) {
  :root {
    --mob-header-h: 74px;
    --mob-header-shrink: 0;
  }

  html,
  body {
    overflow-y: auto !important;
    height: auto !important;
  }

  #container {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-top: 0 !important;
  }

  #content {
    position: relative !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: calc(var(--mob-header-h, 74px) + env(safe-area-inset-top, 0px)) !important;
  }

  #content .inner-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #container > header.clearfix,
  #container > header,
  body #container header[role="banner"],
  header.clearfix,
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    overflow: visible !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #292929 8%, transparent) !important;
    --mob-header-shrink: 0;
    transition: box-shadow 0.22s ease, padding 0.18s ease !important;
  }

  header.is-compact {
    box-shadow: 0 2px 14px color-mix(in srgb, #292929 12%, transparent) !important;
  }

  header.active {
    box-shadow: 0 3px 18px color-mix(in srgb, #292929 14%, transparent) !important;
  }

  header div.logo.sidebar-logo,
  header div.logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: min(72vw, 280px) !important;
    text-align: center !important;
    padding: calc(10px - var(--mob-header-shrink, 0) * 4px) 6px calc(10px - var(--mob-header-shrink, 0) * 4px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: padding 0.15s ease !important;
  }

  header div.logo a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  header div.logo a img,
  header div.logo a img.sidebar-logo__img {
    display: block !important;
    height: calc(54px - var(--mob-header-shrink, 0) * 14px) !important;
    width: auto !important;
    max-width: min(calc(240px - var(--mob-header-shrink, 0) * 36px), 72vw) !important;
    max-height: none !important;
    aspect-ratio: 250 / 110 !important;
    object-fit: contain !important;
    transition: height 0.18s ease, max-width 0.18s ease, opacity 0.18s ease !important;
    opacity: calc(1 - var(--mob-header-shrink, 0) * 0.08);
  }

  .mob-header-toggle {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: calc(44px - var(--mob-header-shrink, 0) * 4px) !important;
    height: calc(44px - var(--mob-header-shrink, 0) * 4px) !important;
    margin: 0 max(4px, env(safe-area-inset-right, 0px)) 0 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #317a00 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, #317a00 32%, transparent) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transform: translateX(-12px) !important;
    transition: width 0.18s ease, height 0.18s ease, transform 0.16s ease, background 0.16s ease, box-shadow 0.18s ease !important;
    z-index: 2 !important;
  }

  .mob-header-toggle__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
  }

  .mob-header-toggle i {
    font-size: 18px !important;
    color: inherit !important;
    line-height: 1 !important;
  }

  .mob-header-toggle.is-open {
    background: #292929 !important;
    color: #292929 !important;
    box-shadow: 0 4px 14px color-mix(in srgb, #292929 24%, transparent) !important;
  }

  .mob-header-toggle.is-open .fa-bars::before {
    content: '\f00d' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
  }

  .mob-header-toggle:active {
    transform: translateX(-12px) scale(0.94) !important;
  }

  .mob-header-social-toggle {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: calc(44px - var(--mob-header-shrink, 0) * 4px) !important;
    height: calc(44px - var(--mob-header-shrink, 0) * 4px) !important;
    margin: 0 0 0 max(10px, env(safe-area-inset-left, 0px)) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #317a00 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, #317a00 32%, transparent) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: width 0.18s ease, height 0.18s ease, transform 0.16s ease, background 0.16s ease, box-shadow 0.18s ease, color 0.16s ease !important;
    z-index: 1002 !important;
  }

  .mob-header-social-toggle__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
  }

  .mob-header-social-toggle i {
    font-size: 17px !important;
    color: inherit !important;
    line-height: 1 !important;
  }

  .mob-header-social-toggle.is-open {
    background: #292929 !important;
    color: #292929 !important;
    box-shadow: 0 4px 14px color-mix(in srgb, #292929 24%, transparent) !important;
  }

  .mob-header-social-toggle.is-open .fa-share-nodes::before {
    content: '\f00d' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
  }

  .mob-header-social-toggle:active {
    transform: scale(0.94) !important;
  }

  .mob-social-drawer {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--mob-header-h, 74px) - 2px) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    width: auto !important;
    max-width: min(calc(100vw - 20px), 320px) !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-10px) scale(0.95) !important;
    transform-origin: top left !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.2s ease, visibility 0.26s !important;
    z-index: 1001 !important;
    overflow: visible !important;
  }

  body.mob-social-active .mob-social-drawer {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mob-social-drawer__panel {
    background: #ffffff !important;
    border-radius: 4px 16px 16px 16px !important;
    padding: 12px 14px 14px !important;
    box-shadow:
      0 16px 40px color-mix(in srgb, #292929 18%, transparent),
      0 0 0 1px color-mix(in srgb, #292929 8%, transparent) !important;
  }

  .mob-social-drawer__title {
    margin: 0 0 10px !important;
    padding: 0 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, #292929 55%, transparent) !important;
    line-height: 1.2 !important;
  }

  .mob-social-drawer__list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .mob-social-drawer__list li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mob-social-drawer__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 19px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px color-mix(in srgb, currentColor 20%, transparent) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mob-social-drawer__btn i {
    color: #ffffff !important;
  }

  .mob-social-drawer__btn:hover,
  .mob-social-drawer__btn:focus-visible {
    filter: brightness(1.08) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, currentColor 28%, transparent) !important;
  }

  .mob-social-drawer__btn:active {
    transform: scale(0.92) !important;
  }

  .mob-social-drawer__btn--facebook {
    background: linear-gradient(145deg, #1877f2 0%, #0d65d9 100%) !important;
  }

  .mob-social-drawer__btn--instagram {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%) !important;
  }

  .mob-social-drawer__btn--youtube {
    background: linear-gradient(145deg, #ff0000 0%, #cc0000 100%) !important;
  }

  .mob-social-drawer__btn--twitter {
    background: linear-gradient(145deg, #14171a 0%, #000000 100%) !important;
  }

  .mob-social-drawer__btn--linkedin {
    background: linear-gradient(145deg, #0a66c2 0%, #004182 100%) !important;
  }

  .mob-social-drawer__btn--tiktok {
    background: linear-gradient(135deg, #010101 55%, #ee1d52 100%) !important;
  }

  .mob-social-drawer__btn--pinterest {
    background: linear-gradient(145deg, #e60023 0%, #bd081c 100%) !important;
  }

  .mob-social-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    background: rgba(15, 23, 42, 0.32) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, visibility 0.22s !important;
  }

  body.mob-social-active .mob-social-backdrop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  header nav.nav-menu,
  header aside.sidebar-search,
  header .guide-box {
    grid-column: 1 / -1 !important;
  }

  header aside.sidebar-search,
  header .guide-box {
    display: none !important;
  }

  a.elemadded.responsive-link {
    display: none !important;
  }

  /* Tam ekran menü — mob-menu.css üstüne z-index (backdrop altında kalmaması için) */
  body.menu-active {
    overflow: hidden !important;
  }

  body.menu-active.mob-social-active {
    overflow: hidden !important;
  }

  body.menu-active .mob-social-drawer,
  body.menu-active .mob-header-social-toggle {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.menu-active header,
  body.menu-active header.clearfix,
  body.menu-active #container > header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100050 !important;
    isolation: isolate !important;
  }

  body.menu-active .mob-menu-backdrop {
    display: block !important;
    z-index: 100040 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.menu-active header nav.nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    z-index: 100060 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

@media (min-width: 1021px) {
  .mob-header-toggle,
  .mob-header-social-toggle,
  .mob-social-drawer,
  .mob-social-backdrop {
    display: none !important;
  }
}