/* ═══════════════════════════════════════════════════════════════════
   DESKTOP-WEB OVERLAY — Misafir QR menü masaüstü yerleşimi (≥1024px)
   ───────────────────────────────────────────────────────────────────
   Desen: qr-premium-tema'nın kanıtlı OVERLAY yaklaşımı — mevcut render
   AYNEN kalır, bu dosya yalnız geniş ekranda yerleşimi genişletir.
   • HER kural @media (min-width:1024px) kapısı altındadır → ≤1023px
     (beğenilen mobil görünüm) HİÇBİR ŞEKİLDE etkilenmez.
   • Kaynak sırası tuzağı: bu dosya <head>'de yüklenir, sayfanın inline
     <style> blokları (base + qrv3-gezinme) SONRA gelir → eşit
     spesifiklikte inline kazanır. Bu yüzden kurallar `body ` öneki
     (veya qrv3 ile yarışanlarda `body #prodGrid`) ile +1 spesifiklik
     taşır. `!important` YALNIZ base'in kendi !important'ını (dock
     display'i) ezmek için kullanılır.
   • Tema uyumu: renk/elevation token'ları base + premium-elevate'ten
     miras alınır; burada yeni renk TANIMLANMAZ. premium-elevate'in
     html[data-qr-theme="premium"] kuralları renk/gölge katmanı olarak
     üstte çalışmaya devam eder (farklı property kümeleri).
   • Geri almak = head'deki tek <link> satırını silmek.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px){

  /* ── 1 ▸ İçerik kolonu: 760px mobil kolon → 1200px masaüstü ──
     .container hem header__in hem ana içerik sarmalayıcısıdır;
     ikisi birlikte genişler → başlık ve içerik aynı hizada. */
  body .container{
    width:min(1200px,100%);
    padding:0 32px;
  }

  /* Hero tam genişlik sinematik KALIR (container dışında, dokunulmadı). */

  /* ── 2 ▸ Bölüm başlıkları — tipografi bir kademe büyür ── */
  body .section-header{padding:30px 0 16px}
  body .section-title{font-size:26px;letter-spacing:-.6px}
  body .event-showcase__title{font-size:28px}
  body .event-showcase__sub{font-size:14px}

  /* ── 3 ▸ "Günün Önerileri" — yatay kaydırma şeridi → 4-5 sütun grid ──
     auto-fill: 1024px'te 4, 1200px konteynerde 5 sütun; az öneri
     geldiğinde kartlar şişmez (boş track'ler kalır). */
  body .ai-reco{margin-top:26px}
  body .ai-reco__head{margin-bottom:10px}
  body .ai-reco__title{font-size:22px;letter-spacing:-.5px}
  body .ai-reco__eyebrow{font-size:11px}
  body .ai-reco__refresh{height:38px;font-size:12px;padding:0 14px}
  body .ai-reco__chip{height:36px;padding:0 16px;font-size:12.5px}
  /* ── Vitrin SLIDER (kullanıcı isteği): büyük kartlı, snap'li yatay şerit + ok butonları ── */
  body .ai-reco__track{position:relative}
  body .ai-reco__list{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:8px 4px 16px;
    scrollbar-width:none;
  }
  body .ai-reco__list::-webkit-scrollbar{display:none}
  body .ai-reco__item{
    width:320px;
    flex:0 0 320px;
    scroll-snap-align:start;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 6px 24px -8px rgba(15,23,42,.14);
    transition:transform .28s ease, box-shadow .28s ease;
  }
  body .ai-reco__item:hover{transform:translateY(-6px);box-shadow:0 18px 44px -12px rgba(15,23,42,.24)}
  body .ai-reco__skel{width:320px;flex:0 0 320px}
  body .ai-reco__img-wrap{height:200px}
  body .ai-reco__track::after{width:90px}            /* sağ solma efekti geri — devamı olduğunu fısıldar */
  body .ai-reco__body{padding:14px 16px 16px}
  body .ai-reco__name{font-size:16px;font-weight:800}
  body .ai-reco__badge{font-size:11px}
  body .ai-reco__reason{font-size:12.5px;-webkit-line-clamp:2}
  body .ai-reco__price{font-size:18px}
  /* Ok butonları (desktop-web.js enjekte eder) */
  body .dw-reco-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:46px;height:46px;border-radius:50%;border:1px solid rgba(15,23,42,.08);
    background:rgba(255,255,255,.95);color:#0f766e;font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px -6px rgba(15,23,42,.28);
    transition:background .15s ease, opacity .2s ease, transform .15s ease;
  }
  body .dw-reco-arrow:hover{background:#0f766e;color:#fff}
  body .dw-reco-arrow:active{transform:translateY(-50%) scale(.94)}
  body .dw-reco-arrow--prev{left:-14px}
  body .dw-reco-arrow--next{right:-14px}
  body .dw-reco-arrow[disabled]{opacity:0;pointer-events:none}

  /* ── 4 ▸ Hızlı servis kartları (rezervasyon / öde / sadakat) ──
     Tek dar sütun → kart sayısına göre 2-3 sütun. loyalty-card'ın
     padding:0 tanımı (0,2,0) korunur — burası onu ezmez. */
  body .quick-promos{margin-top:18px}
  body .quick-promos.has-visible{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:14px;
  }
  body .promo-card{
    padding:18px;
    transition:transform .3s ease,box-shadow .3s ease;
  }
  body .promo-card__title{font-size:20px}
  body .promo-card__desc{font-size:14px}

  /* Aktif kampanya çipleri — kaydırma yerine sarmalı akış */
  body .qr-promo-showcase{flex-wrap:wrap;overflow:visible;padding:12px 0 2px}

  /* ── 5 ▸ Etkinlik vitrini ── */
  body .event-showcase__track{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:18px;
  }
  body .event-card{transition:transform .3s ease,box-shadow .3s ease}

  /* ── 6 ▸ "Menü" kategori grid'i — 4 sütun zaten ≥760'ta devrede;
     geniş kolonda nefes payı + tipografi büyür ── */
  body .cat-grid{gap:16px}
  body .cat-title{font-size:15.5px;padding:16px 14px 13px}
  body .cat-count{font-size:12px;margin-top:3px}

  /* ── 7 ▸ Ürün akışı — qrv3 dikey kart grid'i (≥960'ta 4 sütun)
     1200px kolonda ferahlar; başlık/fiyat bir tık büyür ── */
  body #prodGrid.grid{gap:20px 16px}
  body #prodGrid .feed-sec{margin:34px 2px 6px}
  body #prodGrid .feed-sec__title{font-size:22px}
  body #prodGrid .feed-sec__count{font-size:12px}
  body #prodGrid .name{font-size:15px}
  body #prodGrid .desc{font-size:12.5px}
  body #prodGrid .price{font-size:17px}

  /* Arama kutusu — 1200px'e yayılmasın, okunur satır uzunluğu */
  body .search .search__wrap{max-width:560px}
  body .search .search__box{height:48px}

  /* ── 8 ▸ Ürün modalı — alt-sayfa his yerine ortalanmış geniş kart ── */
  body #productModal .modal-box{width:min(640px,94%)}
  body #productModal .modal-img{height:clamp(300px,40vh,420px)}
  body #productModal .modal-content{padding:24px 28px 28px}
  body #productModal .modal-title{font-size:23px}
  body #productModal .modal-price{font-size:24px}
  body #productModal .modal-desc{font-size:15px}

  /* ── 9 ▸ Dock — masaüstünde geri gelir: ortalanmış yüzer bar ──
     Base ≥900 kuralı `.mobile-dock{display:none !important}` dediği
     için burada id spesifikliği + !important ZORUNLU (tek istisna).
     Köşe FAB ikilisi (sepet/garson) dock'un kopyası olurdu → gizlenir. */
  body #mobileDock{
    display:inline-flex !important;
    max-width:min(720px,calc(100vw - 48px));
  }
  body #mobileDock.has-cart{width:min(720px,calc(100vw - 48px)) !important}
  body .dock-label{font-size:11px}
  body .cart-fab{display:none !important}
  body .waiter-fab{display:none !important}

  /* İçerik dock'un altında ezilmesin — JS'in ölçtüğü --dock-h payı geri gelir
     (base ≥900 kuralı 88px sabitlemişti; dock görünürken yetmez). */
  body .main-content,
  body .main-content.no-footer{
    padding-bottom:calc(var(--dock-h,80px) + var(--tracker-h,0px) + 48px);
  }

  /* Header'daki "…" hızlı menü çekmecesi masaüstünde de çalışsın
     (base ≥900'da display:none !important ile ölüydü; kapalı hali zaten
     pointer-events:none + translateX(102%) ile görünmez). */
  body .mobile-menu{display:block !important}

}

/* ── 10 ▸ Pointer cihaz mikro-etkileşimleri (kart lift + gölge, .3s) ──
   Yalnız gerçek hover'lı cihazlarda; dokunmatik geniş ekranlarda yapışma olmaz.
   Ürün/kategori/öneri kartlarının hover'ı zaten var (qrv3/premium) — burada
   yalnız hover'ı OLMAYAN yüzeyler tamamlanır; premium elevation ezilmez. */
@media (min-width: 1024px) and (hover: hover){
  body .promo-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(12,22,34,.14);
  }
  body .event-card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 44px rgba(15,23,42,.13);
  }
  body .mobile-dock__item:hover{background:rgba(0,0,0,.05)}
  body .mobile-dock__item--qr:hover{background:var(--brand,#0f766e)}
  body .dock-cart-row{transition:transform .2s ease,box-shadow .2s ease}
  body .dock-cart-row:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px -6px color-mix(in srgb,var(--brand,#0f766e) 55%,transparent);
  }
}
