/*
 * Lumout Mobile Header Fix
 * YouTube tarzı mobil header — CSS özgüllük override
 * custom.css'deki .home-fluid .home-header__middle (2-sınıf) kuralını eziyor
 * app.blade.php'de custom-patch.css'den sonra yüklenir
 */

/* =========================================================
   MOBİL — 767px ve altı
   ========================================================= */
@media (max-width: 767px) {

  /* Arama orta bölümü gizle — 2-sınıflı seçici ile custom.css override */
  .home-fluid .home-header__middle,
  .home-header .home-header__middle {
    display: none !important;
    flex: unset !important;
    max-width: unset !important;
    position: static !important;
    width: auto !important;
  }

  /* Arama açıkken (JS ile .search-open class ekleniyor) — tam ekran overlay */
  .home-fluid .home-header__middle.search-open,
  .home-header .home-header__middle.search-open {
    display: flex !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    background: var(--yt-bg, #0f0f0f) !important;
    z-index: 100001 !important;
    padding: 0 8px !important;
    gap: 4px !important;
    flex: unset !important;
    max-width: unset !important;
  }

  /* Light tema arama overlay */
  [data-theme="light"] .home-fluid .home-header__middle.search-open,
  [data-theme="light"] .home-header .home-header__middle.search-open {
    background: #ffffff !important;
  }

  /* Büyüteç ikonu mobilde göster */
  .home-fluid .home-header__right .sm-search-btn,
  .home-header__right .sm-search-btn {
    display: inline-flex !important;
  }

  /* Desktop-only öğeler mobilde gizle (create + notification) */
  .home-fluid .home-header__right .header-desktop-only,
  .home-header__right .header-desktop-only {
    display: none !important;
  }

  /* Header inner layout — flex, sol/sağ */
  .home-header .home-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 6px 0 2px !important;
    gap: 0 !important;
    height: 56px !important;
  }

  /* Sol taraf — hamburger + logo */
  .home-header .home-header__left {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 120px) !important;
  }

  /* Sağ taraf — arama + ... + kullanıcı */
  .home-header .home-header__right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Logo tam boyut mobilde */
  .home-header .sidebar-logo__full {
    max-height: 20px !important;
    width: auto !important;
    display: block !important;
  }

  /* Favicon gizle — tam logo göster */
  .home-header .sidebar-logo__favicon {
    display: none !important;
  }

  /* Logo link flex */
  .home-header .sidebar-logo__link {
    display: flex !important;
    align-items: center !important;
  }

  /* Hamburger boyut */
  .home-header .menu-button {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  /* Settings (3 nokta) butonu — göster */
  .home-header .yt-settings-dropdown {
    display: inline-flex !important;
  }

  /* Oturum aç butonu — küçük */
  .home-header .yt-signin-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* User avatar butonu — küçük */
  .home-header .user-info__button {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* home__right — header altından başla, alt nav için boşluk */
  .home-fluid .home__right {
    padding-top: 0px !important;
    padding-left: 0 !important;
    padding-bottom: 68px !important;
  }

  /* Sidebar mobilde tamamen dışarı kaydır */
  .sidebar-menu {
    transform: translateX(-100%) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 9999 !important;
    width: 80% !important;
    max-width: 280px !important;
    overflow-y: auto !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Sidebar açıkken */
  .sidebar-menu.show {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
  }

  /* Sidebar overlay mobilde */
  #sidebarOverlay.show {
    display: block !important;
  }

  /* Body scroll kilidi sidebar açıkken */
  body.sidebar-open {
    overflow: hidden !important;
  }

  /* Kategori tag bar — header altında */
  .category-tag-bar {
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Body alt padding — alt nav için */
  body {
    padding-bottom: 60px !important;
  }

  /* Notification dropdown mobilde küçük */
  .notification__list {
    right: -40px !important;
    width: 290px !important;
    min-width: 290px !important;
  }
}

/* =========================================================
   MASAÜSTÜ — 768px ve üzeri, arama ortasını geri getir
   ========================================================= */
@media (min-width: 768px) {

  .home-fluid .home-header__middle,
  .home-header .home-header__middle {
    display: flex !important;
    flex: 1 !important;
    max-width: 600px !important;
    align-items: center !important;
  }

  /* Büyüteç ikonunu masaüstünde gizle */
  .home-fluid .home-header__right .sm-search-btn,
  .home-header__right .sm-search-btn {
    display: none !important;
  }

  /* Desktop-only öğeleri masaüstünde göster */
  .home-fluid .home-header__right .header-desktop-only,
  .home-header__right .header-desktop-only {
    display: inline-flex !important;
  }
}

/* =========================================================
   BÜYÜK EKRAN — 1200px+
   ========================================================= */
@media (min-width: 1200px) {
  .home-fluid .home-header__middle,
  .home-header .home-header__middle {
    max-width: 640px !important;
  }
}