/*
  quiz.css — "Deneyiminizi Tasarlayın" interaktif menü rehberi
  (js/menu-quiz.js). Tam ekran, kart-grid DEĞİL; her adım kendi ekranı.

  Tema: AÇIK. Önceki koyu gradyan, mekânın gündüz (nitelikli kahve)
  kimliğiyle çelişiyordu ve "sipariş formu" hissi veriyordu; artık yulaf/
  kırık beyaz zemin üstünde, seçimlerin öne çıktığı sakin bir yüzey —
  "yemek sepeti değil, bir tasarım süreci" (bkz. docs/DESIGN_SYSTEM.md).

  RTL notları: geri oku `[dir="rtl"]`de mirror edilir, harf aralığı ve
  `text-align:left` gibi Latin'e özgü değerler `:lang(ar)` kapsamında
  düzeltilir (bkz. RTL_CHECKLIST.md).
*/

.quiz-stage {
  /* TAM viewport — `100vh - nav` DEĞİL. Nav `position: fixed`, yani belge
     akışında yer KAPLAMAZ; ekran y=0'dan başlar. Nav yüksekliğini düşmek
     bölümü tam o kadar kısaltıyor ve altındaki bölümden ince bir şerit
     görünmesine yol açıyordu (kullanıcı geri bildirimi: "alt kısımdaki
     session'dan bir parça gözüküyor"). Nav'ın altında kalmamak için içerik
     `padding-block-start` ile aşağı itilir — yükseklikten düşülerek değil. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `center` DEĞİL: içerik ekrandan uzun olduğunda (ör. rezervasyon özeti +
     iki buton) ortalama, taşmayı iki uca birden dağıtır — üstteki kısım nav'ın
     altına kaçar, alttaki buton ekranın dışında kalır ve kaydırarak bile
     düzgün ulaşılamaz. `flex-start` + çocukta `margin-block: auto` klasik
     güvenli ortalamadır: yer varken ortalar, yer yokken üstten başlar ve
     doğal biçimde kaydırılır. */
  justify-content: flex-start;
  padding: calc(var(--nav-h) + var(--sp-8)) var(--sp-4) var(--sp-8);
  position: relative;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
  isolation: isolate;
  /* Nefes alan ışıltı (::before) scale(1.18)'e büyürken sahnenin dışına
     taşıyordu: yatayda sayfa sağa-sola oynatılabiliyordu, DİKEYDE ise
     sayfanın toplam boyu nefesle birlikte uzayıp kısalıyor ve iOS'ta
     kaydırma sırasında zemin oynuyormuş gibi TİTREME yapıyordu (kullanıcı
     geri bildirimi, gerçek cihaz). `clip` iki ekseni de kaydırma kabı
     YARATMADAN kırpar; sahnenin dışına bilerek taşan hiçbir şey yok
     (sheet/sepet/nav-izi body'de yaşıyor). */
  overflow: clip;
}

/* Sarmalayıcılar içerikten geniş OLAMAZ: mobildeki tek satır çip şeridinin
   doğal genişliği (~490px), flex/grid öğeleri varsayılan `min-width:auto`
   yüzünden küçülemediği için tüm adımı viewport'tan taşırıyor ve pano sağa
   kaymış görünüyordu (kullanıcı ekran görüntüsü). Kap tavanı + küçülme izni
   birlikte: şerit kendi içinde kayar, adım yerinde kalır. */
.quiz-step > *,
.quiz-reveal > div {
  max-width: 100%;
  min-width: 0;
}

/* ---------- Nefes alan ışıltı ----------
   Zemin düz kırık beyazdı ve seçim kartlarının arkası "boş beyaz" duruyordu.
   Artık üstten inen yumuşak bir adaçayı parıltısı çok yavaş (14s) soluyup
   doluyor — sabit bir gradyanın aksine ekran yaşıyormuş hissi veriyor ama
   dikkati kartlardan çalmıyor.

   Neden ayrı bir katman (::before) ve neden `opacity` + `scale`: gradyanın
   kendisini animasyona sokmak her karede yeniden boyama (repaint) demektir;
   opaklık ve ölçek ise compositor'da çalışır, mobilde bedava sayılır.

   Renk `--accent-light`ten türetiliyor, yani sayfa hangi işletme paletini
   kullanıyorsa ışıltı da ona uyar — sabit bir rgb() yazılmadı. */
.quiz-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* İki katman: üstten inen geniş adaçayı yıkaması + merkezde kartların
     arkasına denk gelen daha sıcak, dar bir odak. Tek katmanla parıltı
     kartların olduğu yerde sönüyordu, yani tam görülmesi gereken yerde
     görünmüyordu (kullanıcı geri bildirimi: "zayıf kalmış, belli olmuyor"). */
  background:
    radial-gradient(90% 55% at 50% 42%,
      color-mix(in srgb, var(--accent-light, #9DB8A6) 42%, transparent) 0%,
      transparent 70%),
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--accent-light, #9DB8A6) 55%, transparent) 0%,
      transparent 64%);
  transform-origin: 50% 30%;
  animation: quizGlowBreathe 9s ease-in-out infinite;
}

/* Nefes daha belirgin: opaklık aralığı 0.55→1 (eskiden 0.75→1) ve ölçek
   1→1.18. Süre 14s'ten 9s'e indi — 14 saniyede değişim o kadar yavaştı ki
   göz hareketi hiç fark etmiyordu. */
@keyframes quizGlowBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* Hareketi azaltılmış modda ışıltı DURUR ama KAYBOLMAZ — o zemin artık
   tasarımın parçası, animasyonu kapatmak onu silmek anlamına gelmemeli. */
@media (prefers-reduced-motion: reduce) {
  .quiz-stage::before {
    animation: none;
    opacity: 0.85;
  }
}

/* ---------- GECE: hale sis değil, NOKTA vurgu ----------
   Bordo parıltı gündüz ölçüleriyle gecede tüm ekranı kaplıyordu — "kadife
   hale" değil "kırmızı sis" (kullanıcı geri bildirimi). Gecede tek, dar
   bir radyal kalır (~%40 küçük) ve nefes çok daha kısık soluk alır;
   sıcak siyah zemin nefes alsın, kırmızı noktada kalsın. */
:root[data-theme="dark"] .quiz-stage::before {
  background:
    radial-gradient(52% 32% at 50% 46%,
      color-mix(in srgb, var(--accent-light, #7C1024) 34%, transparent) 0%,
      transparent 66%);
  animation-name: quizGlowGece;
}

@keyframes quizGlowGece {
  0%, 100% { opacity: 0.30; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.10); }
}

:root[data-theme="dark"] .quiz-stage::before {
  animation-duration: 9s;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .quiz-stage::before {
    animation: none;
    opacity: 0.4;
  }
}

/* Gecede pasif çipler siyah-üstü-siyah kayboluyordu — ince bordomsu
   kenarlık + bir tık açık zemin, Nargile'nin kırmızısı yalnız kalmasın
   (kullanıcı geri bildirimi). Tam menü çiplerini de kapsar. */
:root[data-theme="dark"] .menu-chip:not(.is-active) {
  background: #1B1416;
  border-color: #3A2A2C;
}

:root[data-theme="dark"] .menu-chip:hover,
:root[data-theme="dark"] .menu-chip:focus-visible {
  border-color: var(--accent, var(--brass));
}

/* Pasif çip metni gecede tam mürekkep — soluk gri okunmuyordu.
   `:not(.is-active)` ŞART: tema kuralının özgüllüğü (0-3-0) düz
   `.menu-chip.is-active`i (0-2-0) eziyor ve seçili çipin kırmızısını
   söndürüyordu. */
:root[data-theme="dark"] .menu-chip:not(.is-active) {
  color: var(--ink);
}

/* Aynı "siyah-üstü-siyah" sorunu pill'lerde, sayaçta ve karusel oklarında:
   gecede hepsine bordomsu kenarlıklı bir tık açık yüzey. */
:root[data-theme="dark"] .variant-pill:not(.is-selected),
:root[data-theme="dark"] .ev-count__btn,
:root[data-theme="dark"] .pick-cf__nav {
  background: #1B1416;
  border-color: #3A2A2C;
}

/* İlerleme noktaları — akışın neresinde olduğunu gösterir. Yatay ortalama
   saf aritmetik (left 50% + kendi genişliğinin yarısı kadar geri kaydırma);
   dir="rtl"'de de aynı ekran noktasını verdiği için BİLİNÇLİ olarak
   fiziksel left/translateX kullanılıyor. */
.quiz-progress {
  position: absolute;
  inset-block-start: calc(var(--nav-h) + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.quiz-progress__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand);
  transition: background 0.3s, transform 0.3s;
}

.quiz-progress__dot.is-active {
  background: var(--accent, var(--brass));
  transform: scale(1.5);
}

.quiz-progress__dot.is-done {
  background: var(--accent-light, var(--brass));
}

.quiz-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep, var(--brass-deep));
  font-weight: 700;
  margin-block-end: var(--sp-2);
}

:lang(ar) .quiz-eyebrow {
  letter-spacing: normal;
  text-transform: none;
}

.quiz-question {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.6vw, 3.1rem);
  max-width: 20ch;
  margin-block-end: var(--sp-6);
  font-weight: 600;
  line-height: 1.15;
}

:lang(ar) .quiz-question {
  font-family: var(--font-arabic);
}

.quiz-options {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  width: 100%;
}

/* ---------- Adım geçişi ----------
   Eskiden her adım `stage.innerHTML = html` ile bir anda değişiyordu: ekran
   zıplıyordu ve akışın merkez fikri en cansız anında duruyordu. Artık her adım
   kendi sarmalayıcısında (`.quiz-step`) girip çıkıyor.

   Hareket DİKEY, yatay değil: yatay olsaydı RTL'de yönü ayrıca çevirmek
   gerekirdi; dikey eksen üç dilde de aynı anlama geliyor. İleri giderken içerik
   aşağıdan yükselir, geri dönerken yukarıdan iner — yön, nereye gittiğini
   söyler.

   Çıkış (160ms) girişten (340ms) belirgin biçimde kısa: kullanıcı kendi
   tıklamasının sonucunu beklemez, yeni içerik ise yerleşmek için zaman alır. */
.quiz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Ortalamayı kap değil ADIM üstlenir (bkz. .quiz-stage'deki not). */
  margin-block: auto;
  animation: quizStepIn 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.quiz-step--back {
  animation-name: quizStepInBack;
}

.quiz-step.is-leaving {
  animation: quizStepOut 0.16s ease both;
}

.quiz-step--back.is-leaving {
  animation-name: quizStepOutBack;
}

@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes quizStepInBack {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes quizStepOut {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes quizStepOutBack {
  to { opacity: 0; transform: translateY(10px); }
}

/* Seçenekler blok hâlinde değil, tek tek peş peşe gelir. Hem sıra numarası
   (`--sira`) hem kart başına gecikme (`--adim`) JS'ten geliyor (bkz.
   js/quiz-reveal.js → `siralaKartlar`): gecikme kart sayısına göre
   hesaplanır, böylece serilme kaç seçenek olursa olsun ~yarım saniyede
   biter. `nth-child` ile yazılsaydı hem 12 maçlık liste için 12 ayrı kural
   gerekirdi hem de gecikmeyi bir yerde sabitlemek zorunda kalırdık — son
   kartlar yine topluca gelirdi.

   Kademe, adım ÇİZİLİRKEN değil, soru okunduktan sonra kutu AÇILIRKEN
   başlar: kutu kapalıyken animasyon duraklatılır. Aksi hâlde 550ms'lik
   okuma payı boyunca kademe görünmeden akıp bitiyor ve kartların hepsi
   birden gelmiş gibi duruyordu. */
.quiz-step .choice-tile,
.quiz-step .dish-tile,
.quiz-step .variant-pill,
.quiz-step .ev-option {
  animation: quizItemIn 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--sira, 0) * var(--adim, 90ms));
}

/* Duraklatma SADECE animasyonun gerçekten çalıştığı tarayıcıda: `@supports`
   dışında kutu hiç `-open` almadan açık kalır, kural koşulsuz olsaydı
   kartlar `opacity: 0`da donardı. */
@supports (grid-template-rows: 0fr) {
  .quiz-reveal:not(.-open) .choice-tile,
  .quiz-reveal:not(.-open) .dish-tile,
  .quiz-reveal:not(.-open) .variant-pill,
  .quiz-reveal:not(.-open) .ev-option {
    animation-play-state: paused;
  }
}

/* ---------- Aynı sorunun yeniden çizilmesi ----------
   Çoklu seçim adımları anında ilerlemez: kullanıcı birkaç kutu işaretler ve
   her işaretleme adımı `innerHTML` ile baştan kurar. Ekranda hiçbir şey
   DEĞİŞMEDİĞİ hâlde —sadece bir onay işareti— soru ve kartlar her dokunuşta
   yeniden giriş animasyonu oynuyordu; liste her seferinde baştan diziliyor,
   kullanıcı işaretlediği yeri kaybediyordu. Animasyon ilk gelişe ait;
   yeniden çizimde hiçbir şey hareket etmez. */
.quiz-step--yeniden,
.quiz-step--yeniden .choice-tile,
.quiz-step--yeniden .dish-tile,
.quiz-step--yeniden .variant-pill,
.quiz-step--yeniden .ev-option {
  animation: none;
}

@keyframes quizItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Odak, her adımda JS ile soruya taşınıyor (bkz. js/menu-quiz.js →
   focusQuestion). Başlık programatik olarak odaklanabilir olmalı ama fare
   kullanıcısına odak halkası göstermemeli — `:focus-visible` zaten klavye
   dışında tetiklenmez, burada sadece outline'ı açıkça sıfırlıyoruz. */
.quiz-question:focus {
  outline: none;
}

/* Hareket azaltma "hiçbir animasyon yok" DEĞİL: standart, yer değiştirmeyi
   kaldırmayı ama kavrayışa yardım eden geçişleri korumayı söylüyor
   ("fewer and gentler animations, not zero"). Adım değişimi kullanıcının
   kendi tetiklediği bir olay; tamamen anında olunca "ekran değişti mi?"
   sorusu doğuyordu. Kayma gider, kısa bir opaklık kalır.

   Kademe de kalkar: sıraya dizilmek bir hareket dilidir, azaltılmış hareket
   tercihinde kartların hepsi aynı anda belirmeli. */
@media (prefers-reduced-motion: reduce) {
  .quiz-step,
  .quiz-step .choice-tile,
  .quiz-step .dish-tile,
  .quiz-step .variant-pill,
  .quiz-step .ev-option {
    animation: quizFadeIn 0.2s ease both;
    animation-delay: 0s;
    transform: none;
  }

  /* Çıkan adım beklemez: quizFadeIn'i buraya da uygulamak onu SOLDURMAK
     yerine belirtirdi. */
  .quiz-step.is-leaving {
    animation: none;
    transform: none;
  }
}

@keyframes quizFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Kategori seçimi (ikonlu) ---------- */
.choice-tile {
  flex: 1 1 170px;
  max-width: 220px;
  min-height: 168px;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Üst kenardaki aksan çizgisi hover'da açılır — "kart" hissi vermeyen,
   sadece odağı işaret eden minimal bir vurgu */
.choice-tile::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent, var(--brass));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.choice-tile:hover,
.choice-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent-light, var(--brass));
  box-shadow: var(--shadow-pop);
}

.choice-tile:hover::before,
.choice-tile:focus-visible::before {
  transform: scaleX(1);
}

.choice-tile__icon {
  width: 34px;
  height: 34px;
  color: var(--accent-deep, var(--brass-deep));
  transition: transform 0.25s ease;
}

.choice-tile:hover .choice-tile__icon {
  transform: scale(1.1);
}

.choice-tile__label {
  font-size: 1rem;
  font-weight: 600;
}

/* Kart altındaki açıklama satırı ("Sepetin korunur" gibi). Sınıf JS'te
   üretiliyordu ama CSS'te KARŞILIĞI YOKTU: metin etiketle aynı boyda ve
   ağırlıkta çıkıyor, hangisinin başlık olduğu belirsizleşiyordu. */
.choice-tile__sub {
  margin-block-start: 0.35em;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* 5 seçenekli ilk adım: geniş ekranda tek sıra, sıkışmadan */
.quiz-options--five .choice-tile {
  flex: 1 1 150px;
  max-width: 190px;
}

/* ---------- Ürün seçimi (isim + açıklama + fiyat) ---------- */
.dish-options {
  max-width: 860px;
}

.dish-tile {
  flex: 1 1 250px;
  max-width: 400px;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: start;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dish-tile:hover,
.dish-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-light, var(--brass));
  box-shadow: var(--shadow-pop);
}

.dish-tile__name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
}

:lang(ar) .dish-tile__name {
  font-family: var(--font-arabic);
}

.dish-tile__desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.dish-tile__price {
  margin-block-start: 4px;
  font-weight: 700;
  color: var(--accent-deep, var(--brass-deep));
  font-size: 0.95rem;
}

/* ---------- "Sen Öner" sonucu ---------- */
.quiz-reveal__desc {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-block-end: var(--sp-2);
}

.quiz-continue {
  margin-block-start: var(--sp-3);
}

/* ---------- Varyasyon / porsiyon "pill"leri ----------
   Büyük ikonlu kart YERİNE küçük, hafif butonlar: bu bir ana karar değil,
   hızlı bir ince ayar; görsel ağırlığı bilinçli olarak daha az. */
.variant-options {
  max-width: 620px;
}

.variant-pill {
  padding: 0.75em 1.5em;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

:lang(ar) .variant-pill {
  font-family: var(--font-arabic);
}

.variant-pill:hover,
.variant-pill:focus-visible {
  border-color: var(--accent, var(--brass));
  background: var(--accent, var(--brass));
  color: var(--on-accent, #FBF8F3);
  transform: translateY(-2px);
}

/* Detay ekranında pill'ler artık anında ilerletmiyor, İŞARETLİYOR —
   seçili durumun kalıcı bir görünümü olmak zorunda. */
.variant-pill.is-selected {
  border-color: var(--accent-deep, var(--brass-deep));
  background: var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
}

/* ---------- Dokunmatikte sahte hover ----------
   Telefon, parmakla dokunulduğunda `:hover`ı da tetikler ve kullanıcı başka
   bir yere dokunana kadar o durum ÜZERİNDE KALIR: kart havada asılı kalmış
   gibi görünür. Emil Kowalski'nin motion standardı bunu açıkça yasaklıyor
   ("touch fires false hovers on tap") — aynı hatayı yorum bandında da
   bulmuştuk (bkz. js/reviews.js).

   Sadece YER DEĞİŞTİRME kapatılıyor; renk/kenarlık değişimi kalıyor, o
   dokunma anında geri bildirim olarak işe yarıyor. `:focus-visible`
   ETKİLENMEZ — o klavye odağı ve her cihazda doğru davranış. */
@media (hover: none) {
  .choice-tile:hover,
  .choice-tile:hover::before,
  .choice-tile:hover .choice-tile__icon,
  .dish-tile:hover,
  .variant-pill:hover {
    transform: none;
  }
}


/* ---------- İkincil linkler: geri / atla / tüm menü ---------- */
.quiz-back,
.quiz-skip,
.quiz-see-all {
  background: none;
  border: none;
  padding: 0 0 2px;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  border-block-end: 1px solid var(--sand);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.quiz-back:hover, .quiz-back:focus-visible,
.quiz-skip:hover, .quiz-skip:focus-visible,
.quiz-see-all:hover, .quiz-see-all:focus-visible {
  color: var(--accent-deep, var(--brass-deep));
  border-block-end-color: var(--accent, var(--brass));
}

/* Geri dönüş HER adımda, seçeneklerin ALTINDA duruyor (eski sol-üst köşe
   butonu kaldırıldı — mobilde görülmüyordu). Birincil eylemden net bir
   boşlukla ayrılır ki yanlışlıkla basılmasın. */
.quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-block-start: var(--sp-6);
}

.quiz-back__icon {
  width: 13px;
  height: 13px;
}

/* Geri oku LTR'de sola bakar; RTL'de "geri" sağı işaret eder — mirror et */
[dir="rtl"] .quiz-back__icon {
  transform: scaleX(-1);
}

.quiz-skip {
  margin-block-start: var(--sp-4);
}

.quiz-or {
  margin-block-start: var(--sp-6);
  margin-block-end: var(--sp-1);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
}

:lang(ar) .quiz-or {
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- Özet — bilet/fiş hissi veren kapanış ekranı ---------- */
.quiz-summary {
  background: var(--stone);
  color: var(--ink);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  max-width: 440px;
  width: 100%;
  text-align: start;
}

.quiz-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--sp-2);
  gap: var(--sp-2);
}

.quiz-summary__row + .quiz-summary__row {
  border-block-start: 1px dashed var(--sand);
}

.quiz-summary__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
}

:lang(ar) .quiz-summary__label {
  letter-spacing: normal;
  text-transform: none;
}

.quiz-summary__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: end;
}

:lang(ar) .quiz-summary__value {
  font-family: var(--font-arabic);
}

/* ---------- Detay ekranı: varyasyon + porsiyon TEK ekranda ----------
   İki grup üst üste; her grubun kendi sorusu küçük bir etiket. Ayrı iki
   ekran yerine tek "nasıl hazırlayalım?" ekranı (bkz. js/menu-quiz.js).

   Sahne her şeyi ORTALIYOR (`.quiz-stage { text-align:center }`); burada
   bilinçli olarak SOLA yaslanır: iki soru-cevap grubu alt alta form gibi
   okunur, ortalanınca "havada asılı hap yığını" görünüyordu (kullanıcı
   ekran görüntüsü: "sıkışık, karman çorman"). Gruplar arasında kılçık
   çizgi + bol nefes var. */
.quiz-detail {
  width: 100%;
  max-width: 520px;
  text-align: start;
}

.quiz-detail__group {
  padding-block: var(--sp-4);
}

.quiz-detail__group + .quiz-detail__group {
  border-block-start: 1px solid var(--sand);
}

.quiz-detail__label {
  display: block;
  margin-block-end: var(--sp-3);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep, var(--brass-deep));
}

:lang(ar) .quiz-detail__label {
  letter-spacing: normal;
  text-transform: none;
}

/* Mobil medya bloğu `.quiz-options`ı 2 kolonlu ızgaraya çevirir (5'li kapı
   ekranı için doğru); pill'ler o ızgarada kutu gibi geriliyor. Detayda her
   kırılımda soldan akan serbest satır. */
.quiz-detail .quiz-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

/* ---------- Ürün seçimi: 3B kapak-akışı karuseli ----------
   "Hangisi olsun?" adımı (bkz. js/menu-quiz.js → pickHTML/applyPick).
   Kartta SADECE ürün adı + altın çizgi + "Bunu Seç" — açıklama bilerek yok,
   okuma yükü sonraki adımlara bırakıldı. Transform/opacity/z-index
   değerlerini JS verir (gezinme yeniden çizmeden sürer); burada yalnız
   biçim ve geçiş eğrisi var. */
.pick-cf {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  /* Yan kartlar kabın dışına taşar; sayfayı yatay kaydırmasınlar. */
  overflow: hidden;
  padding-block: var(--sp-2) 0;
}

/* Kart genişliği TEK değişkenden: sahne yüksekliği karttan türetiliyor,
   iki yerde ayrı clamp yazmak kırılımda ayrışmalarına yol açıyordu. */
.pick-cf,
.pick-duo {
  --pick-w: clamp(230px, 58vw, 320px);
}

.pick-cf__stage {
  position: relative;
  height: calc(var(--pick-w) * 1.45);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
}

.pick-card {
  position: absolute;
  width: var(--pick-w);
  aspect-ratio: 20 / 29;
  border-radius: 16px;         /* fan/ev kartlarıyla aynı köşe ailesi */
  overflow: hidden;
  background: var(--stone);
  border: 1px solid var(--sand);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.8s ease, filter 0.8s ease, box-shadow 0.4s ease;
}

.pick-card.is-center {
  cursor: default;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5),
              0 0 35px color-mix(in srgb, var(--accent, var(--brass)) 25%, transparent);
}

.pick-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Adın fotoğraf ne olursa olsun okunması için alttan koyu perde. */
.pick-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}

/* Kart içeriği yalnız MERKEZDE görünür ve tıklanır — yan kartlarda ad ve
   buton gizli; oradaki tek eylem "beni merkeze getir". */
.pick-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.pick-card.is-center .pick-card__body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pick-card__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95);
}

:lang(ar) .pick-card__name {
  font-family: var(--font-arabic);
  letter-spacing: normal;
  text-transform: none;
}

.pick-card__line {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, var(--brass));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, var(--brass)) 70%, transparent);
}

/* Seçim eylemi: kartın TAM ORTASINDA nefes alan bir "+" — yazılı bir sahte
   buton yerine tek, net bir dokunma hedefi (kullanıcı geri bildirimi:
   "bunu seç bir gerçek buton değil"). Erişilebilir adı yine "Bunu Seç"
   (aria-label), gören kullanıcıya işaret yeter. */
.pick-card__add {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  animation: pickNefes 2.8s ease-in-out infinite;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* RTL'de translate yönü şaşmasın: -50% fiziksel olarak da doğru (yatay
   merkezleme simetrik), inset-inline-start yine %50'ye düşer. */
:dir(rtl) .pick-card__add {
  translate: 50% -50%;
}

.pick-card__add svg {
  width: 22px;
  height: 22px;
}

.pick-card__add:hover,
.pick-card__add:focus-visible {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--accent, var(--brass));
}

.pick-card__add:active {
  transform: scale(0.94);
}

@keyframes pickNefes {
  0%, 100% {
    scale: 1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    scale: 1.08;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                0 0 0 12px rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick-card__add {
    animation: none;
  }
}

/* Oklar: FİZİKSEL left/right — kartların translateX'i de fiziksel, RTL'de
   mantıksal özellik kullanmak okları kaymanın tersine düşürürdü. */
.pick-cf__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  box-shadow: var(--shadow-pop);
}

.pick-cf__nav svg { width: 18px; height: 18px; }
.pick-cf__nav--prev { left: 6px; }
.pick-cf__nav--next { right: 6px; }
.pick-cf__nav--next svg { transform: scaleX(-1); }

.pick-cf__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-block-start: var(--sp-2);
}

.pick-cf__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.pick-cf__dot.is-active {
  width: 26px;
  background: var(--accent-deep, var(--brass-deep));
}

/* ---------- Pano çipleri + ince ayar bağlantısı + alt-sayfa ----------
   Menü artık adım sihirbazı değil tek pano (bkz. js/menu-quiz.js başlığı):
   çipler kategori değiştirir, "+" anında sepete atar, "İnce Ayar" isteğe
   bağlı alt-sayfayı açar. */
/* Çift sınıf BİLEREK: `.menu-chips`in kendi hizalama kuralı dosyada daha
   AŞAĞIDA duruyor ve aynı özgüllükte olsaydı onu ezerdi — "Sen Öner" ikinci
   satırda sola yapışıyordu (kullanıcı ekran görüntüsü).
   Panoda büyük soru başlığı YOK (kullanıcı kararı: "daha az metin daha
   premium") — küçük başlığın altında doğrudan çipler gelir, üstten ufak
   nefes payı buradan verilir. */
.menu-chips.board-chips {
  justify-content: center;
  margin-block-start: var(--sp-1);
  margin-block-end: var(--sp-2);
}

/* İlk boyama geçişsiz otursun (bkz. js/pick-cf.js → setupPick). */
.pick-cf--ilk .pick-card {
  transition: none;
}

.menu-chip--surprise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-style: dashed;
}

.menu-chip--surprise svg {
  width: 14px;
  height: 14px;
}

/* Kategori değişiminde adım animasyonu YOK (data-adim sabit "board",
   bkz. js/menu-quiz.js render); onun yerine karusel hızlıca belirir. */
.pick-cf,
.pick-duo {
  animation: boardFade 0.22s ease;
}

@keyframes boardFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Kart altındaki sessiz kapı: buton gibi bağırmaz, merak edene görünür.
   Çizgisiz ve üstünde nefes payı var (kullanıcı isteği). */
.pick-card__tune {
  margin-block-start: 12px;
  padding: 2px 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  transition: color 0.2s ease;
}

/* Yazının üstünden geçen ışık hüzmesi: soldan sağa süzülür, `alternate` ile
   geri döner — gidip gelen bir nefes. Metin gradyana kırpıldığı için
   text-shadow kapatılır (gölge saydam harflerin arkasından dolu blok gibi
   görünüyordu); okunurluğu kartın kendi karartma perdesi sağlıyor. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pick-card__tune {
    color: transparent;
    background-image: linear-gradient(105deg,
      rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.72) 38%,
      #fff 50%,
      rgba(255, 255, 255, 0.72) 62%, rgba(255, 255, 255, 0.72) 100%);
    background-size: 250% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    animation: tuneHuzme 3.4s ease-in-out infinite alternate;
  }

  .pick-card__tune:hover,
  .pick-card__tune:focus-visible {
    background-image: linear-gradient(105deg,
      var(--accent, var(--brass)) 0%, var(--accent, var(--brass)) 100%);
  }
}

@keyframes tuneHuzme {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pick-card__tune {
    animation: none;
  }
}

:lang(ar) .pick-card__tune {
  font-family: var(--font-arabic);
  letter-spacing: normal;
  text-transform: none;
}

.pick-card__tune:hover,
.pick-card__tune:focus-visible {
  color: var(--accent, var(--brass));
}

/* "+"nın hemen altında minik onay: eklenince belirir, 1sn sonra söner. */
.pick-card__added {
  position: absolute;
  inset-block-start: calc(50% + 36px);
  inset-inline-start: 0;
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 0.25s ease, translate 0.25s ease;
  pointer-events: none;
}

:lang(ar) .pick-card__added {
  letter-spacing: normal;
  text-transform: none;
}

.pick-card__added.is-on {
  opacity: 1;
  translate: 0 0;
}

/* "+" onaya dönerken: kısa bir dolu-yeşil an, sonra eski hâline. */
.pick-card__add.is-added {
  background: var(--accent-deep, var(--brass-deep));
  border-color: var(--accent-deep, var(--brass-deep));
  animation: none;
}

/* Alt-sayfa: mobilde alttan, geniş ekranda ortada. Fon karartılır; panel
   quiz'in görsel dilini (etiket + pill grupları) aynen kullanır. */
.pick-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(4px);
}

.pick-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: 16px 16px 0 0;
  background: var(--paper);
  color: var(--ink);
  text-align: start;
  box-shadow: var(--shadow-float);
  animation: sheetYukari 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sheetYukari {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (min-width: 861px) {
  .pick-sheet {
    align-items: center;
    padding: var(--sp-4);
  }

  .pick-sheet__panel {
    border-radius: 16px;
  }
}

.pick-sheet__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sand);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}

.pick-sheet__close svg {
  width: 14px;
  height: 14px;
}

.pick-sheet__name {
  display: block;
  margin-block: 4px var(--sp-2);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
}

:lang(ar) .pick-sheet__name {
  font-family: var(--font-arabic);
}

.pick-sheet__panel .quiz-detail__group {
  padding-block: var(--sp-2);
}

/* Fiyatsız, tam ortada, BÜYÜK harflerle tek kelime (kullanıcı isteği) —
   tutar zaten sepette görünüyor. `.btn` bir flex kutusu ve içeriği BAŞTAN
   dizer; tam genişlikte yazı sola yapışıyordu — ortalama justify-content
   ile yapılır, text-align flex çocuklarına işlemez. */
.pick-sheet__add {
  width: 100%;
  margin-block-start: var(--sp-2);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

:lang(ar) .pick-sheet__add {
  text-transform: none;
  letter-spacing: normal;
}

/* Alt-sayfa açıkken arkadaki sayfa kaymasın. */
body.sheet-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pick-sheet__panel {
    animation: none;
  }
}

/* ---------- Dar telefon: pano TEK ekrana otursun ----------
   390×844'te yığın ~852px tutuyordu (8px taşma), 375×667'de kuyruk 185px
   taşıyordu. Kart bir tık daralır (sahne yüksekliği onunla birlikte iner),
   soru ve "veya" marjları kısılır — 844'lük ekranda tamamı, 667'lik ekranda
   çekirdek etkileşim (çipler + karusel + noktalar) ekran içinde kalır;
   yalnız "tüm menü" kuyruğu kaydırmayla gelir, o zaten ikincil yol. */
@media (max-width: 480px) {
  /* Kart BÜYÜK kalır (küçültülünce "+" dairesi ürün adının üstüne biniyordu
     — kullanıcı geri bildirimi). Yer, büyük soru başlığının kaldırılmasıyla
     açıldı: "daha az metin daha premium". */
  .pick-cf,
  .pick-duo {
    --pick-w: clamp(206px, 55vw, 320px);
  }

  .pick-cf {
    padding-block-start: 0;
  }

  .quiz-step[data-adim="board"] .quiz-or {
    margin-block-start: var(--sp-1);
  }

  /* Çipler SARAR ve hepsi TAM görünür: tek satır + kaydırma denendi,
     kenarda yarım kalan çip beğenilmedi ("kesik kalmasın"). Ortalı sarma
     420px'te 4+1 verir — "Sen Öner" ikinci satırda ortada, kesikli
     çerçevesiyle zaten özel bir çip gibi durur. */
  .menu-chips.board-chips {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    /* "Sen Öner" satırı ile kartın arası nefes alsın (kullanıcı ekran
       görüntüsü: "yakınlık çok fazla") — bedeli kart genişliğinden ödendi. */
    margin-block-end: var(--sp-2);
  }
}

/* 2 ürünlü havuz: karusel yok, iki kart yan yana ve ikisi de "merkez". */
.pick-duo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
}

.pick-duo .pick-card {
  position: static;
}

@media (prefers-reduced-motion: reduce) {
  .pick-card,
  .pick-card__body {
    transition: none;
  }
}

/* ---------- Sipariş kartı: özetin premium hâli ----------
   Onay listesi değil, kısa bir menü kartı: kategori üstte küçük, ürün adı
   serif ve büyük, seçimler rozet, en altta net bir tutar. Fiyat akışta
   İLK KEZ burada görünür (gerekçe: js/menu-quiz.js, dishTileHTML). */
/* Çift sınıf BİLEREK: alttaki mobil medya bloğu `.quiz-summary`nin dolgusunu
   kısıyor (0-1-0); kartın kendi dolgusu her kırılımda geçerli kalmalı.
   DİKKAT: aralık skalasında --sp-5 YOK (1,2,3,4,6,8…) — burada bir kez
   var(--sp-5) yazıldı, geçersiz değer dolguyu 0'a düşürdü ve tutar kart
   kenarına yapıştı (kullanıcı ekran görüntüsü). Skala dışına çıkma. */
.quiz-summary.quiz-summary--card {
  background: var(--paper);
  box-shadow: var(--shadow-float);
  padding: var(--sp-4) var(--sp-3);
}

.quiz-summary__cat {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep, var(--brass-deep));
}

:lang(ar) .quiz-summary__cat {
  letter-spacing: normal;
  text-transform: none;
}

.quiz-summary__name {
  display: block;
  margin-block-start: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
}

:lang(ar) .quiz-summary__name {
  font-family: var(--font-arabic);
  font-weight: 600;
}

.quiz-summary__desc {
  margin-block-start: var(--sp-1);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.quiz-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: var(--sp-3);
}

/* Rozetler BUTON: dokununca detay ekranına dönülür (bkz. editDetail).
   Kullanıcı "geri geri" gitmek yerine değiştirmek istediği şeyin üstüne
   basar. */
.quiz-summary__chip {
  padding: 6px 14px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--stone);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

:lang(ar) .quiz-summary__chip {
  font-family: var(--font-arabic);
}

.quiz-summary__chip:hover,
.quiz-summary__chip:focus-visible {
  border-color: var(--accent-deep, var(--brass-deep));
  color: var(--accent-deep, var(--brass-deep));
}

.quiz-summary__row--extra {
  margin-block-start: var(--sp-2);
  border-block-start: 1px dashed var(--sand);
}

.quiz-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--sand);
}

.quiz-summary__amount {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Eşlik şeridi: özetin altında aç/kapa önerileri ---------- */
.quiz-pairstrip__title {
  margin-block: var(--sp-4) var(--sp-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.quiz-pairstrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
}

.pair-mini {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

:lang(ar) .pair-mini {
  font-family: var(--font-arabic);
}

.pair-mini__price {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.pair-mini:hover,
.pair-mini:focus-visible {
  border-color: var(--accent, var(--brass));
}

.pair-mini.is-selected {
  border-color: var(--accent-deep, var(--brass-deep));
  background: var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
}

.pair-mini.is-selected .pair-mini__price {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* ============================================================
   TÜM MENÜ — sorularla uğraşmak istemeyenler için düz liste

   Varsayılan olarak GİZLİ (`hidden`, HTML'de): mobilde 46 ürünlük liste
   quiz ekranının hemen altında durunca sayfa "karışık" görünüyordu.
   "Bütün menüyü görmek için tıkla" ile açılır (revealFullMenu) ve içine
   kaydırılır. Tek yönlü — açıldıktan sonra kapanmaz.
   ============================================================ */
.full-menu {
  background: var(--paper);
  padding: var(--section-y) var(--sp-6);
  scroll-margin-block-start: var(--nav-h);
  /* Başlangıç durumu burada, hedef durum `.is-visible`de. Sınıf `hidden`
     kalkar kalkmaz DEĞİL, bir sonraki frame'de eklenir (bkz.
     revealFullMenu) — aksi halde tarayıcı başlangıcı boyamadan atlar. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.full-menu[hidden] {
  display: none;
}

.full-menu.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .full-menu {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.full-menu__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.full-menu__title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-block: var(--sp-2) var(--sp-8);
}

/* ============================================================
   REZERVASYON AKIŞI (js/reservation.js)

   Quiz'in görsel dilini AYNEN kullanır — `.quiz-stage`, `.quiz-question`,
   `.choice-tile`, `.quiz-summary` hep ortak. Buradaki kurallar sadece
   quiz'de karşılığı olmayan üç şeyi ekler: tarih/saat alanları, kişi
   sayacı ve 6 seçenekli alan ızgarası.
   ============================================================ */

/* Alan seçimi 6 seçenekli: 5'li ilk adımın kuralları burada 3×2'ye oturur. */
.quiz-options--six .choice-tile {
  flex: 1 1 150px;
  max-width: 190px;
}

/* ---------- Tarih / saat ----------
   Native `<input type="date|time">` kullanılıyor: mobilde işletim sisteminin
   kendi seçicisini açar (parmakla en hızlı yol), klavyeyle de yazılabilir ve
   sıfır bağımlılık getirir. Özel bir takvim bileşeni yazmak bu akış için
   fazlasıyla ağır olurdu. */
.res-when {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 520px;
}

.res-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 200px;
  text-align: start;
}

.res-field__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep, var(--brass-deep));
}

:lang(ar) .res-field__label {
  letter-spacing: normal;
  text-transform: none;
}

.res-field__label svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.res-field input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85em 1em;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  /* iOS Safari tarih/saat girdilerine kendi iç dolgusunu ve yuvarlaklığını
     dayatır; sıfırlanmazsa diğer alanlarla aynı yükseklikte durmazlar. */
  -webkit-appearance: none;
  appearance: none;
  min-height: 52px;
}

.res-field input:focus-visible {
  border-color: var(--accent, var(--brass));
}

/* Tarih/saat her zaman soldan sağa okunur — RTL'de ters çevrilmemeli
   (bkz. docs/RTL_CHECKLIST.md → `.ltr-locked` ile aynı gerekçe). */
[dir="rtl"] .res-field input {
  direction: ltr;
  text-align: right;
}

.res-error {
  margin-block-start: var(--sp-2);
  color: var(--warm-deep, #A45B3E);
  font-size: 0.9rem;
}

.res-error[hidden] {
  display: none;
}

/* ---------- Kişi sayacı ---------- */
.res-counter {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.res-counter__btn {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sand);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent-deep, var(--brass-deep));
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.res-counter__btn svg {
  width: 20px;
  height: 20px;
}

.res-counter__btn:hover,
.res-counter__btn:focus-visible {
  border-color: var(--accent, var(--brass));
  background: var(--accent, var(--brass));
  color: var(--on-accent, #FBF8F3);
}

.res-counter__value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  min-width: 2.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

:lang(ar) .res-counter__value {
  font-family: var(--font-arabic);
}

.res-counter__unit {
  margin-block-start: var(--sp-1);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Kapanış: iki eylem ----------
   "Menüye geç" birincil, "sadece yerimi ayırt" ikincil ama ikisi de gerçek
   birer sonuç — biri link gibi küçültülmedi. */
.res-finish {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--sp-4);
}

@media (max-width: 560px) {
  .res-finish {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    gap: 10px;
    margin-block-start: var(--sp-3);
  }

  .res-finish .btn {
    justify-content: center;
  }

  .res-counter__value {
    font-size: 2.5rem;
  }
}

/* ---------- Filtre kartları ----------
   Üst sıra ana kategori, alt sıra seçili kategorinin etiketleri. İki sıra da
   yatayda kaydırılabilir: 5 kategori masaüstünde sığar ama etiket sırası
   (ör. içecek → 4 etiket + Tümü) dar ekranda sığmaz; sarmak yerine kaydırmak
   satır yüksekliğini sabit tutar. */
.menu-chips {
  display: flex;
  gap: var(--sp-1);
  justify-content: center;
  flex-wrap: wrap;
  margin-block-end: var(--sp-3);
}

.menu-chips--tags {
  margin-block-end: var(--sp-6);
}

.menu-chips--tags[hidden] {
  display: none;
}

.menu-chip {
  padding: 0.6em 1.15em;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

:lang(ar) .menu-chip {
  font-family: var(--font-arabic);
}

.menu-chip:hover,
.menu-chip:focus-visible {
  border-color: var(--accent-light, var(--brass));
  color: var(--ink);
}

.menu-chip.is-active {
  background: var(--accent-deep, var(--brass-deep));
  border-color: var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
}

.menu-chips--tags .menu-chip {
  font-size: 0.82rem;
  padding: 0.5em 1em;
}

/* ---------- Ürün listesi ----------
   Her ürün AYNI dolguya ve aynı iç yapıya sahip: eskiden bazı satırlar
   kontrol taşıdığı için diğerlerinden yüksekti ve alttaki ürünle iç içe
   girmiş gibi görünüyordu. Artık dolgu satırın içeriğinden bağımsız sabit,
   ayrım da hairline ile. */
.menu-grid {
  display: flex;
  flex-direction: column;
  text-align: start;
}

/* Kategori grubu başlığı — "Tümü" seçiliyken listeyi okunur kılan tek şey.
   Aksan renginde kalın bir alt çizgiyle ayrılır ki ürün adlarıyla
   karışmasın; ürün adları da display fontunda ama daha küçük ve çizgisiz. */
.menu-group[hidden] {
  display: none;
}

.menu-group + .menu-group {
  margin-block-start: var(--sp-6);
}

.menu-group__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--sp-1);
  padding-block-end: var(--sp-2);
  border-block-end: 2px solid var(--accent, var(--brass));
}

:lang(ar) .menu-group__title {
  font-family: var(--font-arabic);
}

.menu-item {
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--sand);
}

.menu-item[hidden] {
  display: none;
}

.menu-item:last-child {
  border-block-end: 0;
}

.menu-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.menu-item__text {
  min-width: 0;
}

.menu-item__name {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0;
}

:lang(ar) .menu-item__name {
  font-family: var(--font-arabic);
}

.menu-item__desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-block-start: 4px;
}

/* Fiyat boy seçimiyle DEĞİŞİR — `tabular-nums` olmadan rakam genişliği
   oynadıkça sağ kenar zıplıyordu. */
.menu-item__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-deep, var(--brass-deep));
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.menu-item__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
  flex-wrap: wrap;
}

.menu-item__sizes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Boy seçimi — quiz'deki `.variant-pill`den kasıtlı olarak daha küçük ve
   sessiz: burada bir ana karar değil, satır içi bir ince ayar. */
.size-pill {
  padding: 0.45em 0.9em;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

:lang(ar) .size-pill {
  font-family: var(--font-arabic);
}

.size-pill:hover,
.size-pill:focus-visible {
  border-color: var(--accent-light, var(--brass));
  color: var(--ink);
}

.size-pill.is-active {
  border-color: var(--accent, var(--brass));
  background: color-mix(in srgb, var(--accent-light, #9DB8A6) 26%, transparent);
  color: var(--ink);
}

/* Sepete ekleme MANUEL — boy seçmek eklemez. Bu yüzden buton görsel olarak
   satırın en belirgin eylemi. */
.menu-item__add {
  padding: 0.55em 1.3em;
  border: 1px solid var(--accent-deep, var(--brass-deep));
  border-radius: 999px;
  background: var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

:lang(ar) .menu-item__add {
  font-family: var(--font-arabic);
}

.menu-item__add:hover:not(:disabled),
.menu-item__add:focus-visible {
  background: var(--accent, var(--brass));
  border-color: var(--accent, var(--brass));
}

.menu-item__add.is-added {
  background: var(--warm, #C4785A);
  border-color: var(--warm, #C4785A);
  transform: scale(1.03);
}

.menu-item__add:disabled {
  cursor: default;
}

.menu-empty {
  text-align: center;
  color: var(--ink-soft);
  padding-block: var(--sp-8);
}

.menu-empty[hidden] {
  display: none;
}

/* ============================================================
   MOBİL
   ============================================================ */
@media (max-width: 720px) {
  /* `min-height: auto` idi: adım içeriği kısaldığında (5 seçenekli ilk
     adımdan 4 seçenekliye geçince) ekran küçülüyor ve ALTTAKİ bölüm
     ("Tüm Menü") içeri sızıyordu — her adım farklı yükseklikte bir sayfa
     gibi davranıyordu.

     `svh` (small viewport height) kullanılıyor, `vh` değil: mobil
     tarayıcılarda adres çubuğu açıkken `100vh` görünür alandan BÜYÜKTÜR ve
     içeriğin altı çubuğun arkasında kalır. `svh` çubuk açıkken geçerli olan
     küçük yüksekliği verir, yani içerik her zaman görünür. Desteklemeyen
     tarayıcılar bir önceki satırdaki `vh` değerini kullanır. */
  .quiz-stage {
    /* Üst dolgu kısaldı (nav zaten kaydırmada çekiliyor), alt dolgu ise
       ARTTI: sepet butonu sağ altta sabit duruyor ve tam genişlikteki son
       butonun üstüne biniyordu. */
    /* Üst dolgu nav'ın GERÇEK boyuna göre: --nav-h 62px ama iPhone'da üç
       satırlık logo kilidi + dil hapıyla bar ~94px ölçülüyor; 62+16'lık
       dolgu başlığı nav'ın altında bırakıyordu (kullanıcı ekran görüntüsü).
       62+32 gerçek barı da örter. */
    padding: calc(var(--nav-h) + var(--sp-4)) var(--sp-3) var(--sp-8);
    min-height: 100vh;
    min-height: 100svh;
  }

  /* İlk adımda 5 kart + "VEYA" + tam menü linki dar ekrana sığmıyordu
     (ekranın altı kesiliyordu). Kartlar biraz kompaktlaştı. */
  /* Uzun sorular ("Siparişinizi şimdiden hazırlamamızı ister misiniz?")
     dar ekranda üç satıra çıkıp özet + iki buton + geri linkini ekran
     dışına itiyordu. Alt sınır 1,85rem'den 1,5rem'e indi. */
  .quiz-question {
    font-size: clamp(1.5rem, 6.2vw, 2.4rem);
    margin-block-end: var(--sp-4);
  }

  .quiz-progress {
    inset-block-start: calc(var(--nav-h) + var(--sp-1));
  }

  /* Dar ekranda kartlar alt alta dizilince 4-5. seçenek ekran dışında
     kalıyordu ("4. kart altta kalıyo"). 2 kolonlu ızgara hepsini tek
     bakışta görünür kılıyor; 5. kart (Sen Öner) tam genişlik alır. */
  .quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
  }

  .quiz-options--five .choice-tile:last-child {
    grid-column: 1 / -1;
  }

  .choice-tile {
    max-width: none;
    min-height: 96px;
    padding: var(--sp-2);
    gap: 8px;
  }

  .quiz-options--five .choice-tile {
    max-width: none;
  }

  .choice-tile__icon {
    width: 26px;
    height: 26px;
  }

  .choice-tile__label {
    font-size: 0.9rem;
  }

  /* Ürün kartları ve pill'ler ızgaraya girmemeli — doğal akışta kalsınlar */
  .dish-options,
  .variant-options {
    display: flex;
  }

  .dish-tile {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Rezervasyon özeti dar ekranda uzuyordu: 5 satır × 32px dolgu + kutu
     dolgusu, üç satırlık soru ve iki butonla birlikte tek ekranı aşıyordu
     (kullanıcı ekran görüntüsü: "Evet, menüye geçmek istiyorum" kesiliyordu).
     Satır dolgusu ve kutu iç boşluğu kısıldı — bilgi aynı, yer daha az. */
  .quiz-summary {
    padding: var(--sp-2) var(--sp-3);
  }

  .quiz-summary__row {
    padding-block: 11px;
  }

  .quiz-summary__value {
    font-size: 1rem;
  }

  /* Geri linki de bir tık yukarı çekildi. */
  .quiz-back {
    margin-block-start: var(--sp-4);
  }

  .full-menu {
    padding: var(--section-y) var(--sp-4);
  }

  /* Dar ekranda kontroller ürünün altına tam genişlikte iner — yan yana
     sıkıştırmak dokunma hedeflerini küçültürdü. */
  .menu-item__controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }

  .menu-item__add {
    width: 100%;
    padding-block: 0.8em;
  }

  .menu-chips {
    justify-content: flex-start;
  }
}

/* ---------- Etkinlik talebi taşındı bildirimi ----------
   Etkinlik planlayıcıdan menüye geçen misafire, doldurduğu talebin
   kaybolmadığını gösterir. Rezervasyon kapısı bu durumda hiç açılmıyor
   (bkz. js/reservation.js) — kullanıcı aynı soruları iki kez görmesin diye.
   Bildirim sessiz: bir eylem değil, bir güvence. */
/* Bildirim BELGEYE çapalı (`absolute`), ekrana değil: `fixed` sürüm
   kaydırırken nav'ın altına kilitli geziyordu ve kalıcı bir rozet gibi
   duruyordu (kullanıcı ekran görüntüsü). Belgeye çapalanınca sayfayla
   birlikte yukarı kayar, nav'ın arkasına dalar (nav z-index 50 > 20 ve
   kaydırınca `is-scrolled` zemini alır) — bir kez okunup geride kalması
   doğal; talep zaten sepette taşınıyor, çubuk hatırlatmadan ibaret. */
.event-carry {
  /* Akışta yer KAPLAMAZ: sahnenin üstünde bir şerit açmasın ve sahne
     sayfanın tepesinden başlasın diye. Çapa belgenin tepesi: ebeveyn
     (body) konumlandırılmış değil, o yüzden ölçüler `fixed` günündeki
     ekran konumuyla birebir aynı — yalnız artık sayfayla kayıyor. */
  position: absolute;
  inset-block-start: calc(var(--nav-h) + 8px);
  inset-inline: var(--sp-3);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em 0.6em;
  width: fit-content;
  max-width: min(640px, calc(100% - 2 * var(--sp-3)));
  margin-inline: auto;
  padding: 0.7em 1.2em;
  /* Hap DEĞİL: metin iki satıra sardığında 999px'lik yuvarlaklık satırları
     kapsayamıyor ve içerik kutunun dışına taşıyordu. Yumuşak köşe sarmayı
     doğal karşılar. */
  border-radius: 14px;
  line-height: 1.4;
  /* Yapışık dururken arkasından içerik geçtiği için zemin SAYDAM OLAMAZ. */
  background: color-mix(in srgb, var(--accent-light, #9DB8A6) 22%, var(--paper));
  color: var(--ink);
  font-size: 0.9rem;
  text-align: center;
}

/* Gece varyantı AYRI: açık temanın karışımı gecede simsiyah kalıyor,
   kırmızı link koyu zeminde kayboluyordu (kullanıcı geri bildirimi).
   Zemin bordoya çalan koyu bir yüzey, link gül tonu — ikisi de kremsi
   metinle aynı ışıkta okunur. */
:root[data-theme="dark"] .event-carry {
  background: #2A171C;
  color: var(--ink);
}

:root[data-theme="dark"] .event-carry__back {
  color: #E9A3B0;
  border-block-end-color: #7C1024;
}

.event-carry svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent-deep, var(--brass-deep));
}

/* Plana dönüş bağlantısı. Dar ekranda kendi satırına iner — bildirim metni
   zaten iki satıra sarabiliyor, bağlantıyı aynı satırda tutmaya çalışmak
   çubuğu taşırırdı. */
.event-carry__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--accent-deep, var(--brass-deep));
  font-weight: 600;
  white-space: nowrap;
  border-block-end: 1px solid currentColor;
  padding-block-end: 1px;
  transition: color 0.2s ease;
}

.event-carry__back svg {
  color: currentColor;
}

.event-carry__back:hover,
.event-carry__back:focus-visible {
  color: var(--ink);
}

/* Bildirim nav'ın altından başladığı için sahne kendi üst boşluğunu
   yeniden vermemeli — yoksa ikisi üst üste binip büyük bir boşluk açar. */
/* Bildirim nav'ın altındaki boşluğu zaten harcadı; sahne kendi üst
   dolgusunu tekrar vermemeli, yoksa arada büyük bir boşluk açılır. */
/* İlerleme noktaları sahnenin üstüne, nav yüksekliği kadar aşağıdan
   konumlanıyor. Bildirim çubuğu varken sahne zaten nav'ın altından
   başlıyor, dolayısıyla o pay ikinci kez eklenince noktalar sorunun
   ÜSTÜNE biniyordu. Bildirim varsa noktalar sahnenin tepesine alınır. */
.quiz-stage--carry .quiz-progress {
  inset-block-start: calc(var(--nav-h) + 78px);
}

/* Bildirim çubuğu artık akışta yer KAPLAMIYOR (`position: fixed`), yani
   sahne tam yükseklikte kalır ve sayfanın tepesinden başlar — üstteki düz
   şerit böylece yok olur. Tek gereken içeriğin çubuğun ALTINDAN başlaması.
   Önceki sürüm bunun TERSİNİ yapıyordu (dolguyu azaltıp yüksekliği
   kısaltıyordu) çünkü o zaman çubuk akışın içindeydi. */
.quiz-stage--carry {
  padding-block-start: calc(var(--nav-h) + 104px);
}

@media (max-width: 720px) {
  /* Mobilde çubuk SABİT DEĞİL, akışın içinde: `fixed` sürüm nav'ın token
     yüksekliğine (62) göre konumlanıyordu ama gerçek mobil bar 82px —
     çubuğun üst yarısı nav'ın altında kalıyor, kaydırırken de garip
     biçimde asılı duruyordu (kullanıcı ekran görüntüsü). Akışta olunca
     sayfayla doğal kayar ve nav'la çakışması imkânsız. Üst marj gerçek
     bar boyu (nav-h + 2×10 dolgu) + 10px nefes. Ayrıca %20 kompakt:
     küçük yazı, sıkı dolgu, ikon metinle aynı satırda. */
  .event-carry {
    position: static;
    width: fit-content;
    margin: calc(var(--nav-h) + 30px) auto 0;
    font-size: 0.76rem;
    line-height: 1.3;
    padding: 0.5em 0.9em;
    gap: 0.25em 0.5em;
  }

  .event-carry svg {
    width: 13px;
    height: 13px;
  }

  .event-carry .event-carry__back {
    font-size: 0.76rem;
  }

  /* Çubuk akışta yer kapladığı için sahnenin nav payı ARTIK GEREKMEZ —
     küçük bir boşluk yeter. Çift sınıf: genel mobil kural ezmesin. */
  .quiz-stage.quiz-stage--carry {
    padding-block-start: var(--sp-4);
  }
}

/* ---------- Soru önce, seçenekler sonra (js/quiz-reveal.js) ----------
   Seçenekler kapalıyken adım yalnızca sorudan ibarettir; `.quiz-step`
   `margin-block: auto` ile ortalandığı için soru ekranın ortasında durur.
   Kutu açılınca adım büyür ve soru KENDİLİĞİNDEN yukarı kayar — sorunun
   konumunu ayrıca animasyona sokmaya gerek yok.

   Yükseklik `grid-template-rows: 0fr → 1fr` ile açılır: `max-height`
   hilesinin aksine gerçek içerik yüksekliğinde yumuşar ve içeriğin ne kadar
   uzun olduğunu önceden bilmek gerekmez. */
.quiz-reveal {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.quiz-reveal > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease 0.1s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}

.quiz-reveal.-open { grid-template-rows: 1fr; }

.quiz-reveal.-open > div {
  opacity: 1;
  transform: none;
}

/* Açılma bitti: kırpmayı kaldır, yoksa kartların hover'da yükselmesi ve
   gölgeleri kutunun kenarında kesilir. */
.quiz-reveal.-done {
  grid-template-rows: none;
}

.quiz-reveal.-done > div {
  overflow: visible;
}

/* `grid-template-rows` animasyonunu desteklemeyen tarayıcıda kutu kapalı
   kalabilir; orada animasyonu tamamen devre dışı bırakıp içeriği açıyoruz —
   akış hiçbir koşulda kilitlenmemeli. */
@supports not (grid-template-rows: 0fr) {
  .quiz-reveal { display: block; }
  .quiz-reveal > div { overflow: visible; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-reveal,
  .quiz-reveal > div {
    transition: none;
  }
}

/* ============================================================
   ETKİNLİK MODU — yapışkan "Etkinliğe Dön" dönüş yolu

   Etkinlik planından menüye geçen misafirin tamamlama adımı. Üstteki
   event-carry çubuğundaki eski dönüş linki KALDIRILDI (aynı işi yapan
   iki kontrol — menüdeki çift geri butonu dersi); dönüşün tek kapısı bu.
   Alt-ORTA: sepet düğmesi sağ altta, ikisi çakışmaz. Sepet değiştikçe
   sayaç rozeti günceller (js/menu-quiz.js → etkinlikTeyidi).
   ============================================================ */
.event-return {
  position: fixed;
  inset-block-end: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 60;               /* içerik üstünde, sepet paneli (yukarıda) altında */
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.3em;
  border-radius: 999px;      /* tek satır metin — hap güvenle sarar */
  background: var(--accent-deep);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  transition: background 0.2s ease, transform 0.2s ease;
}

:lang(ar) .event-return { font-family: var(--font-arabic); }

.event-return:hover,
.event-return:focus-visible {
  background: var(--accent);
  transform: translateX(-50%) translateY(-2px);
}

/* RTL: translateX(-50%) yön bağımsız (yüzde kendi genişliğine göre),
   yalnız ilerleme oku diğer yana bakar. */
.event-return__icon { width: 16px; height: 16px; flex: none; }
.event-return__go   { width: 13px; height: 13px; flex: none; transform: rotate(-90deg); }
html[dir="rtl"] .event-return__go { transform: rotate(90deg); }

.event-return__count {
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: rgba(251, 248, 243, 0.18);
  font-size: 0.82rem;
  font-weight: 500;
}

/* Hap içeriğin son satırını örtmesin: etkinlik modunda sahne ve tam menü
   alttan nefes alır. (Mod sınıfı yalnız çubuk eklenirken veriliyor —
   normal menüde bu boşluk yok.) */
.quiz-stage--carry { padding-block-end: 88px; }
.quiz-stage--carry ~ .full-menu { padding-block-end: 88px; }

/* Sayaç rozeti: .ltr-locked'ın display:inline-block'u UA'nın
   [hidden]{display:none} kuralını eziyordu — rozet boşken "0 ürün" olarak
   görünür kalıyordu (kullanıcı geri bildirimi). Author katmanında açıkça
   bastırılır. */
.event-return__count[hidden] { display: none; }

/* Sepet düğmesi etkinlik modunda gizli olduğundan eklemenin hissedilir
   karşılığı hapın kendisinde: sayaç değişince kısa bir nabız. */
.event-return.is-pulsing { animation: eventReturnPulse 0.45s ease; }
@keyframes eventReturnPulse {
  40% { transform: translateX(-50%) scale(1.07); }
}