/* Menü sayfası — QR hedefi.
   Kaynak: design/Menü.dc.html (tasarımcının 2026-08-03 güncellemesi).

   Sayfa artık dar kolonda değil: tam site navigasyonu, 1160px içerik
   sarmalayıcı, yapışkan sekmeler, serpme kartları dört kolon, kategoriler
   çok kolonlu ızgara. Mobilde aynı bileşenler tek/iki kolona iner. */

body[data-sayfa="menu"] { background: var(--zemin); }

.blok-menu-tam > h1 { font-size: var(--h2-boyut); }

/* Sekmeler yapışkan: kaydırırken hangi serviste olduğun görünür kalır.
   Prototipte sekme çifti 560px'i geçmiyor, sola yaslı duruyor. */
.menu-sekmeler {
  position: sticky; top: 62px; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--b2);
  max-width: 560px; padding: 10px 0; background: var(--zemin);
}
.menu-sekme {
  min-height: 44px; border-radius: var(--r-giris); cursor: pointer;
  font-weight: 800; font-size: 14px;
  background: var(--zemin-alt); color: var(--metin-soluk);
}
.menu-sekme[aria-selected="true"] { background: var(--derin); color: var(--aksan-metin); }

.menu-panel[hidden] { display: none; }
.menu-panel > .cipler { position: sticky; top: 118px; z-index: 39; background: var(--zemin); padding: var(--b2) 0; }

/* Serpme kartları prototipte dört kolon (`flex: 0 1 calc(25% - 5px)`);
   min-width 170px sayesinde dar ekranda kendiliğinden ikiye, sonra teke
   iner — ayrı bir medya sorgusu gerekmiyor. */
.blok-menu-tam .serpme-kalem { flex: 0 1 calc(25% - 5px); min-width: 170px; }

.serpme { margin: var(--b5) 0 var(--b4); }

/* Fix menü ve etkinlik kartı ortalanmış, 760px'i geçmiyor. */
.menu-fix { margin: var(--b5) auto var(--b4); max-width: 760px; grid-template-columns: 1fr; }

/* Kategoriler çok kolonlu: dar kolonda alt alta uzayan liste geniş ekranda
   gereksiz kaydırma yaratıyordu. */
.menu-panel {
  display: grid; gap: 0 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
}
.menu-panel > .cipler,
.menu-panel > .menu-rozetler,
.menu-panel > .serpme,
.menu-panel > .menu-fix,
.menu-panel > .ayrac { grid-column: 1 / -1; }
.menu-kategori { padding-top: 0; margin-top: 28px; }

/* Görselli kalem tıklanabilir olduğunu belli etsin. */
.menu-kalem[data-onizleme]:hover { border-color: var(--aksan); }

/* Quick-preview modalı: büyük görsel + ad + fiyat + açıklama + rozetler. */
#onizleme-modal .modal-kutu { max-width: 440px; }
#onizleme-modal .modal-galeri { height: 240px; }
#onizleme-modal .rozetler { margin-top: var(--b3); }

/* Serpme bileşeninin üstündeki vaat rozetleri. */
.menu-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--b4); }
.menu-rozetler li {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border: 1px solid var(--aksan); border-radius: var(--r-cip); color: var(--aksan);
}

/* "AYRICA SİPARİŞ EDİLEBİLİR" ayracı: serpme ile à la carte arasında. */
.ayrac { display: flex; align-items: center; gap: 10px; margin: var(--b6) 0 0; }
.ayrac::before, .ayrac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi-renk); }
.ayrac span { font-size: 10.5px; letter-spacing: 0.12em; color: var(--metin-soluk); }

/* Menü sayfasının kendi alt şeridi: servis notu + WhatsApp/telefon.
   Tam genişlik koyu şerit, içerik 1160'ta ortalanmış. */
.menu-alt {
  margin-top: clamp(24px, 4vw, 36px);
  padding: var(--b6) max(var(--bolum-yatay), (100% - var(--genislik)) / 2) 32px;
  background: var(--derin); color: var(--aksan-metin);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}
.menu-alt p { font-size: 13px; line-height: 1.6; max-width: 560px; opacity: 0.9; margin: 0; }
.menu-alt-eylem { display: flex; gap: 10px; flex: 1; min-width: 260px; max-width: 400px; }
.menu-alt-eylem .dugme { flex: 1; }
.menu-alt-eylem .dugme--ikincil { border-color: var(--aksan); color: var(--aksan-metin); }

@media (max-width: 640px) {
  .menu-sekmeler { top: 58px; max-width: none; }
  .menu-panel > .cipler { top: 112px; }
}