/* =========================================================
   menu-v2.css — MENÜ (/qr) ve ÜRÜN DETAY (/qr/urun/...) katmanı
   İkisi de menu.css kullanıyor, tek katman ikisini birden düzeltir.
   Kural: HTML'e DOKUNULMAZ. Font tanımlanmaz.
   tema-v2.css'ten SONRA yüklenir (_Layout.cshtml).

   Ana sorun: mobil tipografi. Açıklamalar 10px, alerjen etiketleri 8px,
   besin değerleri 8px. Bunlar okunamaz; alerjen bilgisi yasal öneme sahip.
   ========================================================= */

/* =========================================================
   MARKA RENGİ TUTARLILIĞI — TÜM EKRANLAR
   Menü/sepet yüzeyleri vitrinden kopuktu: kategori vurgusu sarı,
   sepet ve garson eylemleri sabit yeşil (#2f6d54), adet butonları
   tarayıcı varsayılanı mavi. Hepsi tenant marka rengine bağlandı.
   ========================================================= */

/* Aktif kategori sarıydı (--accent) */
.category-item.active {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: var(--brand-soft);
  color: var(--brand);
}

/* Birincil eylemler */
.cart-summary button,
.combo-submit-bar button,
.qr-cart-add,
.cart-confirm-approve,
.waiter-presentation > .complete-presentation,
.floating-cart-link,
.waiter-call-panel button {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.cart-summary button:hover,
.combo-submit-bar button:hover,
.qr-cart-add:hover,
.cart-confirm-approve:hover,
.waiter-presentation > .complete-presentation:hover,
.floating-cart-link:hover,
.waiter-call-panel button:hover {
  background: var(--brand-hover);
}

/* İkincil eylemler */
.qr-cart-show,
.cart-empty a,
.combo-submit-bar a,
.combo-submit-bar p,
.combo-choice-buttons > button strong,
.combo-public-card b {
  color: var(--brand);
}

.qr-cart-show {
  background: var(--brand-soft);
}

.qr-cart-show span {
  background: var(--brand);
}

.floating-cart-link span {
  color: var(--brand);
}

.cart-confirm-icon {
  background: var(--brand);
}

.cart-ready-to-show,
.qr-cart-actions {
  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
}

/* Garsona gösterim ekranı: yeşil çizgiler marka rengine */
.waiter-presentation > header,
.waiter-presentation > footer {
  border-color: var(--brand);
}

.waiter-presentation > button {
  border-color: var(--brand);
  color: var(--brand);
}

/* Adet butonlarının + / − işaretleri renksizdi; iOS onları
   sistem mavisiyle boyuyordu. */
.cart-quantity button,
.qr-quantity-stepper button {
  color: var(--ink);
  background: var(--surface-2);
}

.cart-remove,
.cart-text-button {
  color: var(--warn);
}

/* Ürün detay görsel paneli sarımsıydı (--accent-soft), vitrinle uyumsuz */
.detail-visual {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand-soft) 60%, var(--surface)),
    var(--surface-2));
}

/* =========================================================
   SEPET ve KOMBO — TÜM EKRANLAR
   Bu iki ekran ayrı bir tasarım dilindeydi: sabit gri/hex renkler
   (#e2e6e4, #6d7772, #d9dfdc), farklı köşe yarıçapları ve gölgeler.
   Nötr renkler tema değişkenlerine bağlandı; eylem rengi (yeşil)
   kasıtlı bir anlam taşıdığı için DEĞİŞTİRİLMEDİ.
   ========================================================= */

.cart-line,
.cart-summary,
.cart-empty,
.combo-config-group,
.combo-public-card,
.combo-submit-bar {
  border-color: var(--line);
  background: var(--surface);
}

.cart-line,
.combo-config-group,
.combo-public-card {
  border-radius: 16px;
  box-shadow: var(--shadow-s);
}

.cart-summary,
.combo-submit-bar {
  border-radius: 16px;
  box-shadow: var(--shadow-m);
}

.cart-empty {
  border-radius: 16px;
  border-color: var(--line);
}

.cart-line small,
.cart-line span,
.cart-page-head p,
.cart-summary span,
.combo-public-card p,
.combo-config-group header p {
  color: var(--muted);
}

.cart-page-head h1,
.combo-detail-head h1 {
  font-weight: 600;
  letter-spacing: -.02em;
}

/* 12px özet etiketi okunmuyordu */
.cart-summary span {
  font-size: 13px;
}

.cart-quantity button,
.cart-remove,
.qr-quantity-stepper,
.combo-choice-buttons > button,
.combo-instance-field select {
  border-color: var(--line);
  border-radius: 10px;
}

/* 32px dokunma hedefi standardın (44px) çok altındaydı */
.cart-quantity button {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
}

.cart-remove {
  min-height: 40px;
  padding: 8px 14px;
}

.cart-confirm-dialog {
  border-radius: 20px;
  box-shadow: var(--shadow-l);
}

.cart-confirm-dialog h2 {
  font-weight: 600;
  letter-spacing: -.02em;
}

.cart-confirm-actions button,
.cart-summary button,
.combo-submit-bar button,
.qr-cart-add,
.qr-cart-show {
  border-radius: 11px;
  font-weight: 700;
}

.floating-cart-link {
  border-radius: 999px;
  box-shadow: var(--shadow-m);
}

.qr-cart-actions {
  border-radius: 16px;
  box-shadow: var(--shadow-m);
}

.qr-cart-locked {
  border-radius: 14px;
}

/* =========================================================
   SEPET ve KOMBO — MOBİL
   ========================================================= */
@media (max-width: 899px) {

  .cart-page-head h1 {
    font-size: clamp(22px, 6.2vw, 27px);
  }

  .cart-page-head p {
    font-size: 13.5px;
  }

  .cart-line {
    padding: 14px;
    gap: 8px 12px;
  }

  .cart-line-total {
    font-size: 18px;
    font-weight: 700;
  }

  .cart-summary {
    padding: 13px 15px;
  }

  .cart-summary strong {
    font-size: 21px;
  }

  .cart-summary button,
  .qr-cart-add,
  .qr-cart-show {
    min-height: 46px;
  }

  .qr-cart-actions {
    padding: 12px;
    gap: 10px;
  }

  .qr-cart-actions label,
  .qr-cart-actions p {
    font-size: 13.5px;
  }

  /* 12px'e düşen "Garsona göster" metni okunmuyordu */
  .qr-cart-show {
    font-size: 13.5px;
  }

  .qr-quantity-stepper button {
    height: 44px;
  }

  .qr-cart-actions .qr-quantity-stepper input[type=number] {
    height: 44px;
  }

  .combo-detail-head h1 {
    font-size: clamp(24px, 6.4vw, 29px);
  }

  .combo-config-group {
    padding: 16px;
  }

  .combo-config-group h2 {
    font-size: 17px;
    font-weight: 600;
  }

  /* Dar ekranda 180px'lik min genişlik taşmaya yol açıyordu */
  .combo-choice-buttons > button {
    min-width: 0;
    width: 100%;
    min-height: 46px;
  }

  .combo-instance-field select {
    min-height: 44px;
  }

  .combo-instance-options label {
    padding: 9px;
    min-height: 42px;
  }

  .combo-submit-bar {
    padding: 12px;
  }

  .combo-submit-bar button {
    min-height: 46px;
  }
}

/* =========================================================
   MENÜ SAYFASI — MOBİL
   ========================================================= */
@media (max-width: 899px) {

  /* ---- Ürün listesi kartları (yatay: görsel + metin) ---- */
  .menu-page .product-card {
    gap: 13px;
    padding: 11px;
    border-radius: 16px;
    box-shadow: var(--shadow-s);
  }

  .menu-page .product-card > img,
  .menu-page .product-card .product-logo-fallback {
    width: 90px;
    height: 90px;
    min-height: 90px;
    border-radius: 12px;
  }

  .menu-page .product-card-body {
    padding: 2px 4px 2px 0;
    gap: 3px;
  }

  /* Uzun ürün adları tek satırda kesiliyordu ("San Sebastian Chees…").
     İki satıra izin verildi. */
  .menu-page .product-card-body h3 {
    margin-right: 72px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 10px açıklama okunmuyordu */
  .menu-page .product-card-body p {
    margin: 3px 0 5px;
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }

  .menu-page .product-card-body strong {
    top: -1px;
    font-size: 16px;
    font-weight: 700;
  }

  /* 8px alerjen/hassasiyet etiketi kabul edilemez — yasal bilgi */
  .menu-page .product-card .badge {
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 10px;
    letter-spacing: .01em;
    text-transform: none;
  }

  .menu-page .product-card .badge-row {
    gap: 5px;
    margin-top: 5px;
  }

  /* ---- Kategori şeridi ---- */
  .menu-page .category-app-bar .category-item {
    min-height: 44px;          /* dokunma hedefi */
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
  }

  .menu-page .category-app-bar .category-item .img-fallback {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  /* ---- Bölüm başlıkları ---- */
  .menu-page .category-section > .section-title h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
  }

  .section-title a {
    font-size: 12px;
  }

  /* ---- Arama ---- */
  .menu-page .search-box {
    min-height: 48px;
    border-radius: 12px;
    box-shadow: var(--shadow-s);
    background: var(--surface);
  }
}

/* =========================================================
   ÜRÜN DETAY — MOBİL
   ========================================================= */
@media (max-width: 899px) {

  /* Başlık şeridi üç sütunluydu: "Menüye dön" iki satıra, işletme adı
     üç satıra kırılıyordu. Ortadaki marka metni kaldırıldı, logo kaldı. */
  .detail-header {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .detail-header .back-link {
    white-space: nowrap;
    font-weight: 600;
  }

  .detail-header .brand {
    justify-self: center;
  }

  .detail-header .brand-copy,
  .detail-header .brand > span:not([aria-hidden]) {
    display: none;
  }


  /* Görsel mobilde daireydi, masaüstünde 4/3 kare. Tutarsızdı ve
     daire yemek fotoğrafının kenarlarını kırpıyordu. */
  .detail-visual {
    min-height: 0;
    padding: 16px;
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--brand-soft) 60%, var(--surface)),
      var(--surface-2));
  }

  .detail-visual > img,
  .detail-logo-fallback {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 16px;
    box-shadow: var(--shadow-m);
  }

  .detail-visual > span {
    top: 24px;
    left: 24px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
  }

  .detail-body {
    padding: 22px 18px 32px;
  }

  .detail-title {
    text-align: left;
  }

  .detail-title p {
    font-size: 11px;
    letter-spacing: .09em;
  }

  .detail-title h1 {
    margin-top: 7px;
    font-size: clamp(24px, 6.6vw, 30px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
  }

  .detail-title > strong {
    margin-top: 8px;
    font-size: 22px;
  }

  /* Ürün açıklaması 11px'ti — kartın en çok okunan metni */
  .detail-title > span {
    max-width: none;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .detail-section {
    padding: 18px 0;
  }

  .detail-section h2 {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .detail-section h2 small {
    font-size: 12px;
    text-transform: none;
  }

  /* 9px alerjen etiketi — yasal bilgi, okunabilir olmalı */
  .tag {
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12px;
  }

  .tag-list {
    gap: 7px;
  }

  /* Besin değerleri: 8px etiket, 12px değer */
  .nutrition-grid {
    border-radius: 12px;
    background: var(--surface-2);
  }

  .nutrition-grid div {
    padding: 13px 8px;
  }

  .nutrition-grid span {
    font-size: 11px;
  }

  .nutrition-grid strong {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 700;
  }

  .back-link {
    font-size: 13px;
  }

  .choice-row {
    min-height: 46px;
    font-size: 14px;
  }

  .qr-cart-locked span {
    font-size: 13.5px;
  }
}