/* ═══════════════════════════════════════════════════════════════════════════
   UYGULAMA DENEYİMİ KATMANI (2026-10-30) — QR menü / PWA, tüm Resta.Run mağazaları
   Hedef: web sitesi değil, gerçek bir yemek uygulaması hissi (Yemeksepeti restoran
   sayfası kalıbı). Yalnız GÖRÜNÜM katmanı — işaretleme, sınıf sözleşmesi ve JS akışı
   değişmez; menü CSS'inden SONRA yüklenir (kaynak sırası kazanır).
     1) Kapak: tam ekran sinematik kapak → içeride, yuvarlak köşeli kayan bant
     2) Ürün listesi: dikey uzun kart → satır (ad/açıklama/fiyat solda, görsel + "+" sağda)
     3) Dokunma tepkileri: satır basma vurgusu, sepet rozeti zıplaması
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --app-ink:#0b1512;
  --app-ink-2:#5b6b67;
  --app-sep:rgba(11,21,18,.07);
  --app-surface:#ffffff;
  --app-row-img:104px;
}

/* ── 1 · KAPAK → KAYAN BANT ────────────────────────────────────────────── */
#heroSlider.hero{
  --hero-h:clamp(150px, 44vw, 230px);
  height:var(--hero-h);
  margin:12px 16px 2px;
  border-radius:20px;
  box-shadow:0 10px 28px -18px rgba(11,21,18,.45);
  isolation:isolate;
}
@media (min-width:760px){
  #heroSlider.hero{ --hero-h:260px; max-width:1100px; margin:16px auto 4px; width:calc(100% - 32px) }
}
/* Sayfaya eriyen beyaz geçiş kalkar; yalnız noktalar okunsun diye alt kenarda hafif gölge */
#heroSlider .hero-gradient{ background:linear-gradient(180deg, transparent 62%, rgba(0,0,0,.28) 100%) }
#heroSlider .hero-progress{ display:none }
#heroSlider .hero-dots{ bottom:10px; right:auto; left:50%; transform:translateX(-50%) }
#heroSlider .hero-dots .dot{ background:rgba(255,255,255,.55) }
#heroSlider .hero-dots .dot.on{ background:#fff; box-shadow:none }
/* Ken Burns yakınlaştırması bant boyutunda yorucu — kapatılır */
#heroSlider .slide.kb-active img{ animation:none }

/* ── 2 · ÜRÜN LİSTESİ → SATIR DÜZENİ ───────────────────────────────────── */
#prodGrid.grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  margin-top:10px; padding:0 14px 4px;
  background:var(--app-surface);
  border-radius:20px;
  box-shadow:0 1px 0 rgba(11,21,18,.03), 0 8px 24px -20px rgba(11,21,18,.35);
}
@media (min-width:960px){
  #prodGrid.grid{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:28px }
}
#prodGrid .feed-sec{ margin:18px 0 0; padding-bottom:4px }
#prodGrid .feed-sec:first-of-type{ margin-top:14px }

#prodGrid .card{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--app-row-img);
  grid-template-areas:"govde gorsel";
  column-gap:14px; align-items:start;
  padding:14px 0;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  border-bottom:1px solid var(--app-sep);
  overflow:visible;
  contain-intrinsic-size:auto 132px;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease;
}
#prodGrid .card:last-child{ border-bottom:0 }
@media (hover:hover){ #prodGrid .card:hover{ transform:none; box-shadow:none; background:transparent } }
/* Basma tepkisi: iOS liste satırı gibi hafif vurgu (ölçek oyunu yok) */
#prodGrid .card:active{ background:color-mix(in srgb, var(--brand,#0f766e) 5%, transparent) }

#prodGrid .card__imgwrap{
  grid-area:gorsel; width:var(--app-row-img); aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(11,21,18,.05);
}
@media (hover:hover){ #prodGrid .card:hover .card__img{ transform:none } }
#prodGrid .card__body{ grid-area:govde; position:static; padding:0; min-height:var(--app-row-img); display:flex; flex-direction:column }
#prodGrid .name{
  margin:0 0 4px; font-size:15px; font-weight:700; letter-spacing:-.25px; line-height:1.3;
  color:var(--app-ink); min-height:0; -webkit-line-clamp:2;
}
#prodGrid .desc{
  margin:0 0 8px; font-size:13px; line-height:1.4; color:var(--app-ink-2);
  -webkit-line-clamp:2;
}
#prodGrid .card__foot{ margin-top:auto; padding-top:0 }
#prodGrid .price{ font-size:15px; font-weight:800; letter-spacing:-.3px; color:var(--app-ink) }
#prodGrid .price small{ color:var(--app-ink); opacity:.6 }
/* Listede yalnız karar verdiren bilgi: fiyat, üye fiyatı, şefin seçimi. Süre/kcal/vejetaryen detay penceresinde. */
#prodGrid .badges{ margin-top:4px !important }
#prodGrid .badges .badge--tag:not(.badge--star){ display:none }
#prodGrid .badges:not(:has(.badge--star)){ display:none }
#prodGrid .card .mprice{ margin-top:5px }

/* "+" görselin sağ-alt köşesinde (Yemeksepeti kalıbı) */
#prodGrid .card__foot .add-cart-btn{
  top:calc(14px + var(--app-row-img) - 40px); bottom:auto; right:6px;
  width:36px; height:36px; border-radius:12px;
  background:#fff; color:var(--brand,#0f766e);
  border:0; box-shadow:0 2px 10px rgba(11,21,18,.18);
}
/* Fotoğrafsız ürün: görsel alanı yok, metin tam genişlik; "+" satırın sağ-altında */
#prodGrid .card--noimg{ grid-template-columns:minmax(0,1fr); grid-template-areas:"govde" }
#prodGrid .card--noimg .card__imgwrap{ display:none }
#prodGrid .card--noimg .card__body{ min-height:0; padding-right:48px }
#prodGrid .card--noimg .card__foot .add-cart-btn{
  top:auto; bottom:12px;
  background:color-mix(in srgb, var(--brand,#0f766e) 10%, #fff);
}

/* ── 3 · SEPET ROZETİ ZIPLAMASI ────────────────────────────────────────── */
.app-zipla{ animation:appZipla .45s cubic-bezier(.34,1.56,.64,1) }
@keyframes appZipla{ 0%{ transform:scale(1) } 40%{ transform:scale(1.35) } 100%{ transform:scale(1) } }

@media (prefers-reduced-motion:reduce){
  .app-zipla{ animation:none }
  #prodGrid .card{ transition:none }
}

/* ── 4 · EKRAN GEÇİŞLERİ: alt sayfa sağdan gelir, geri dönüş soldan (uygulama gezinmesi) ── */
#viewProducts.view-in{ animation:appIleri .3s cubic-bezier(.2,.8,.2,1) both }
#viewCategories.view-in{ animation:appGeri .26s cubic-bezier(.2,.8,.2,1) both }
@keyframes appIleri{ from{ opacity:0; transform:translateX(22px) } to{ opacity:1; transform:none } }
@keyframes appGeri{ from{ opacity:0; transform:translateX(-18px) } to{ opacity:1; transform:none } }

/* ── 5 · SEPET: tek kontrol (adet seçici; 1'de çöp kutusu) + altın üyelik şeridi ── */
#cartModal .cart-remove{ display:none }
.cart-member-teaser{
  flex-wrap:nowrap; gap:12px; margin:10px 0; padding:10px 10px 10px 14px;
  border:0; border-radius:14px;
  background:linear-gradient(135deg,#fff8e1,#fde9b0);
  box-shadow:inset 0 0 0 1px rgba(200,149,46,.28);
  color:#6b4205; font-size:13px; line-height:1.35;
}
.cart-member-teaser > span{ min-width:0 }
.cart-member-teaser i{ color:#c8952e }
.cart-member-teaser__btn{
  flex-shrink:0; border:0; border-radius:999px; padding:9px 14px;
  font-weight:900; font-size:12.5px; color:#3d2603;
  background:linear-gradient(135deg,#fff1c1,#f3c969); box-shadow:0 4px 12px -6px rgba(200,149,46,.9);
}

@media (prefers-reduced-motion:reduce){
  #viewProducts.view-in, #viewCategories.view-in{ animation:none }
}