/**
 * Oluşturulma: 2026-08-17
 * Son değişiklik: 2026-08-17
 * Oluşturan: Özgür Elibol
 * Amaç: QR Menü ilk açılışında ürün kartlarını görünür kılmak için üst alanı ve filtre satırlarını daha kompakt hale getirmek.
 */

/* Menü sayfasında dekoratif hero alanı kaldırılır; ziyaretçi doğrudan filtre + ürünlere ulaşır. */
.menu-hero,
body:has([data-menu-list]) .page-hero,
body:has(.menu-page) .page-hero,
body:has(.menu-wrap) .page-hero{
  display:none!important;
}

/* Filtre bloğunu sıkıştır. */
.menu-tools,
.menu-filter-shell,
.menu-filter-wrap,
.menu-filters-wrap,
.qr-menu-filters,
[data-menu-tools]{
  margin:0!important;
  padding:5px 0!important;
}

.menu-chip-row,
.menu-main-filters,
.menu-sub-filters,
.menu-main-tabs,
.menu-sub-tabs,
.menu-category-tabs,
.menu-subcategory-tabs,
[data-menu-main-filters],
[data-menu-sub-filters]{
  gap:8px!important;
  min-height:0!important;
  margin:0!important;
  padding:3px 6px!important;
  align-items:center!important;
}

.menu-chip,
.menu-filter-btn,
.menu-main-filter,
.menu-sub-filter,
.menu-tab,
.menu-category-tab,
.menu-subcategory-tab,
[data-menu-main-filter],
[data-menu-sub-filter]{
  height:34px!important;
  min-height:34px!important;
  padding:0 18px!important;
  font-size:12px!important;
  line-height:32px!important;
  border-radius:999px!important;
}

.menu-main-filters > *,
.menu-sub-filters > *,
.menu-main-tabs > *,
.menu-sub-tabs > *,
.menu-category-tabs > *,
.menu-subcategory-tabs > *,
[data-menu-main-filters] > *,
[data-menu-sub-filters] > *{
  min-width:132px!important;
  width:auto!important;
  flex:0 0 auto!important;
}

/* İki filtre satırının scrollbar yüksekliğini de azalt. */
.menu-chip-row,
.menu-main-filters,
.menu-sub-filters,
.menu-main-tabs,
.menu-sub-tabs,
.menu-category-tabs,
.menu-subcategory-tabs,
[data-menu-main-filters],
[data-menu-sub-filters]{
  scrollbar-width:thin!important;
}
.menu-chip-row::-webkit-scrollbar,
.menu-main-filters::-webkit-scrollbar,
.menu-sub-filters::-webkit-scrollbar,
.menu-main-tabs::-webkit-scrollbar,
.menu-sub-tabs::-webkit-scrollbar,
.menu-category-tabs::-webkit-scrollbar,
.menu-subcategory-tabs::-webkit-scrollbar,
[data-menu-main-filters]::-webkit-scrollbar,
[data-menu-sub-filters]::-webkit-scrollbar{
  height:4px!important;
}

/* Ürün alanını filtrelerin hemen altına getir. */
.menu-wrap,
.menu-page,
[data-menu-list]{
  margin-top:0!important;
  padding-top:6px!important;
}
.menu-category,
.menu-category-block{
  margin-top:0!important;
  padding-top:0!important;
}
.menu-category > h2,
.menu-category-title{
  margin:6px 0 8px!important;
  font-size:clamp(22px,2.1vw,28px)!important;
  line-height:1.05!important;
}
.menu-category > h3,
.menu-subcategory-title{
  margin:4px 0 8px!important;
  font-size:16px!important;
  line-height:1.1!important;
}

/* Menü sayfasında üst navigasyonun dikey boşluğunu da azalt. */
body:has([data-menu-list]) .site-header,
body:has(.menu-page) .site-header,
body:has(.menu-wrap) .site-header{
  min-height:0!important;
}
body:has([data-menu-list]) .site-header .container,
body:has(.menu-page) .site-header .container,
body:has(.menu-wrap) .site-header .container{
  min-height:72px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}
body:has([data-menu-list]) .site-header .brand img,
body:has(.menu-page) .site-header .brand img,
body:has(.menu-wrap) .site-header .brand img{
  max-height:54px!important;
}

@media (max-width:760px){
  .menu-chip,
  .menu-filter-btn,
  .menu-main-filter,
  .menu-sub-filter,
  .menu-tab,
  .menu-category-tab,
  .menu-subcategory-tab,
  [data-menu-main-filter],
  [data-menu-sub-filter]{
    height:32px!important;
    min-height:32px!important;
    padding:0 14px!important;
    font-size:11px!important;
    line-height:30px!important;
  }
  .menu-main-filters > *,
  .menu-sub-filters > *,
  .menu-main-tabs > *,
  .menu-sub-tabs > *,
  .menu-category-tabs > *,
  .menu-subcategory-tabs > *,
  [data-menu-main-filters] > *,
  [data-menu-sub-filters] > *{
    min-width:112px!important;
  }
  body:has([data-menu-list]) .site-header .container,
  body:has(.menu-page) .site-header .container,
  body:has(.menu-wrap) .site-header .container{
    min-height:58px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  body:has([data-menu-list]) .site-header .brand img,
  body:has(.menu-page) .site-header .brand img,
  body:has(.menu-wrap) .site-header .brand img{
    max-height:44px!important;
  }
  .menu-wrap,
  .menu-page,
  [data-menu-list]{padding-top:3px!important}
}