/* =========================================================================
   Vyron Cafe — QR menü sayfası
   Token'lar style.css'ten geliyor; burada sadece menüye özel yerleşim var.
   Bu sayfa telefonda okunmak için tasarlandı: masadaki QR koddan giriliyor.
   ========================================================================= */

.vy {
  max-width: 720px;          /* menü tek sütun; geniş ekranda ortalanır */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Üst marka bloğu ---------- */

.vy-top {
  padding-top: var(--s-6);
  padding-bottom: var(--s-5);
}

.vy-top__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(2.25rem, 12vw, 3.5rem);
  letter-spacing: var(--display-track);
  line-height: 0.9;
}

.vy-top__sub {
  margin-top: var(--s-3);
  color: var(--muted);
}

.vy-top__back {
  display: inline-block;
  margin-top: var(--s-4);
  font-size: var(--fs-small);
}

/* ---------- Yapışkan kategori çubuğu ---------- */

.vy-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 14, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vy-nav__scroll {
  display: flex;
  gap: var(--s-5);
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vy-nav__scroll::-webkit-scrollbar { display: none; }

.vy-nav a {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-label);
  color: var(--muted);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}

.vy-nav a:hover { color: var(--ink); }

/* aktif kategori — sayfadaki tek aksan kullanımı */
.vy-nav a.on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- Kategori bölümü ---------- */

.vy-sec {
  padding-top: var(--s-7);
  scroll-margin-top: 64px;   /* yapışkan çubuğun altına düşmesin */
}

.vy-sec__title {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
}

/* ---------- Ürün grubu ---------- */

.vy-group { margin-top: var(--s-6); }

.vy-group__title {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

/* orta / büyük sütun başlıkları */
.vy-head {
  display: grid;
  grid-template-columns: 1fr 62px 62px;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--line);
}

.vy-head span:not(:first-child) { text-align: right; }

/* ---------- Ürün satırı ---------- */

.vy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.vy-list--dual .vy-row {
  grid-template-columns: 1fr 62px 62px;
}

.vy-name {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.vy-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.vy-price {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-align: right;
  white-space: nowrap;
}

.vy-price .cur {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* fiyatı belli olmayan ürünler */
.vy-price--ask {
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--track-label);
  color: var(--muted);
}

/* ---------- Alt notlar ---------- */

.vy-foot {
  margin-top: var(--s-8);
  padding: var(--s-5) 0 var(--s-8);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.vy-foot p + p { margin-top: var(--s-2); }

.vy-foot__brand {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-label);
}