/* MasaSuite — müşteri QR menüsü (/m/{slug}). Bootstrap'sız, mobil öncelikli.
   Renkler theme.css ile aynı; mock (workshop/mcp-test) "misafir yüzü" tasarım dili. */
:root {
  --ink-950:#07080E; --ink-900:#0B0D14; --ink-850:#10131C; --ink-800:#151926;
  --muted:#8B93A7; --text:#E6E8EF; --strong:#F4F5F9;
  --violet:#8B5CF6; --lilac:#C4B5FD;
  --line:rgba(255,255,255,.08);
  --grad:linear-gradient(115deg,#D8CCFF 0%,#8B5CF6 40%,#38BDF8 100%);
  --grad-warm:linear-gradient(115deg,#FFC79A,#FF8A4C);
}

*, *::before, *::after { box-sizing:border-box; }
/* hidden niteliği display tanımlı sınıflarda da geçerli olsun (ör. .qm-btn, .rd-push). */
[hidden] { display:none !important; }

body {
  margin:0; min-height:100vh;
  font-family:"Plus Jakarta Sans Variable","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60rem 24rem at 50% -8rem, rgba(139,92,246,.18), transparent 70%),
    var(--ink-900);
}

a { color:var(--lilac); text-decoration:none; }
a:hover { text-decoration:underline; }

.qm-head, .qm-cats, .qm-body, .qm-foot { max-width:40rem; margin:0 auto; padding-left:1rem; padding-right:1rem; }

/* Başlık */
.qm-head { padding-top:calc(1.4rem + env(safe-area-inset-top)); padding-bottom:1rem; }
.qm-brand { display:flex; align-items:center; gap:.85rem; }
.qm-logo {
  flex:none; width:3rem; height:3rem; border-radius:.9rem; background:var(--grad-warm);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.3rem; color:#241303;
}
.qm-name { margin:0; font-size:1.35rem; font-weight:800; line-height:1.2; color:var(--strong); letter-spacing:-.01em; }
.qm-sub { margin:.15rem 0 0; font-size:.8rem; color:var(--muted); }

/* Kategori şeridi */
.qm-cats {
  position:sticky; top:0; z-index:5;
  display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none;
  padding-top:.65rem; padding-bottom:.65rem;
  background:rgba(11,13,20,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.qm-cats::-webkit-scrollbar { display:none; }
.qm-chip {
  flex:none; padding:.45rem .9rem; border-radius:100rem; border:1px solid var(--line);
  font-size:.85rem; font-weight:600; color:var(--muted); white-space:nowrap; background:rgba(255,255,255,.03);
}
.qm-chip:hover { text-decoration:none; color:var(--lilac); }
.qm-chip.on { border-color:rgba(139,92,246,.5); color:var(--lilac); background:rgba(139,92,246,.14); }

/* Ürünler */
.qm-body { padding-top:.5rem; padding-bottom:1rem; }
.qm-section { scroll-margin-top:4rem; padding-top:1rem; }
.qm-sec-title {
  margin:0 0 .7rem; font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lilac);
}
.qm-item {
  padding:.95rem 1rem; margin-bottom:.65rem; border-radius:1rem; border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 50%,rgba(255,255,255,.025));
}
.qm-item.is-off { opacity:.55; }
.qm-row { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.qm-iname { margin:0; font-size:1rem; font-weight:700; line-height:1.35; color:var(--strong); }
.qm-price { flex:none; font-size:1rem; font-weight:800; color:var(--strong); font-variant-numeric:tabular-nums; white-space:nowrap; }
.qm-desc { margin:.3rem 0 0; font-size:.88rem; line-height:1.55; color:var(--muted); }
.qm-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
.qm-tag {
  font-size:.74rem; font-weight:600; padding:.2rem .6rem; border-radius:100rem;
  border:1px solid var(--line); color:var(--muted);
}
.qm-tag.g { color:#86EFAC; border-color:rgba(74,222,128,.35); }
.qm-tag.w { color:#FFC79A; border-color:rgba(255,145,71,.35); }
.qm-tag.r { color:#FDA4AF; border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.08); }
.qm-ing { margin:.55rem 0 0; font-size:.8rem; line-height:1.55; color:var(--muted); }
.qm-ing span { color:var(--text); font-weight:600; }
.qm-note { margin:2rem 0; text-align:center; color:var(--muted); }

/* Alt bilgi */
.qm-foot {
  padding-top:1.2rem; padding-bottom:calc(1.6rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); text-align:center; font-size:.75rem; line-height:1.6; color:var(--muted);
}
.qm-foot p { margin:.3rem 0; }
.qm-powered a { font-weight:700; }

/* Bulunamadı */
.qm-empty { max-width:26rem; margin:0 auto; padding:22vh 1.5rem 2rem; text-align:center; }
.qm-empty .qm-logo { margin-bottom:1rem; background:var(--grad); color:var(--ink-900); }
.qm-empty h1 { margin:0 0 .5rem; font-size:1.25rem; color:var(--strong); }
.qm-empty p { margin:0 0 1.2rem; font-size:.9rem; line-height:1.6; color:var(--muted); }

/* Rezervasyon talep formu (K-35) */
.qm-cta {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; padding:.55rem 1rem; border-radius:100rem;
  font-size:.85rem; font-weight:700; color:var(--ink-900); background:var(--grad);
}
.qm-cta:hover { text-decoration:none; filter:brightness(1.05); }
.qm-notice {
  margin:.5rem 0 1rem; padding:.85rem 1rem; border-radius:1rem; border:1px solid rgba(139,92,246,.35);
  background:rgba(139,92,246,.08); font-size:.85rem; line-height:1.55; color:var(--text);
}
.qm-notice strong { color:var(--strong); }
.qm-alert {
  margin:0 0 1rem; padding:.75rem 1rem; border-radius:.85rem; border:1px solid rgba(251,113,133,.45);
  background:rgba(251,113,133,.08); font-size:.85rem; color:#FDA4AF;
}
.qm-form { display:flex; flex-direction:column; gap:.85rem; }
.qm-field { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.qm-field > span { font-size:.78rem; font-weight:700; color:var(--muted); }
.qm-field em { font-style:normal; font-weight:500; }
.qm-field input, .qm-field select, .qm-field textarea {
  width:100%; padding:.7rem .85rem; border-radius:.8rem; border:1px solid var(--line); background:var(--ink-850);
  color:var(--strong); font:inherit; font-size:1rem; color-scheme:dark;
}
.qm-field textarea { resize:vertical; }
.qm-field input:focus, .qm-field select:focus, .qm-field textarea:focus {
  outline:none; border-color:rgba(139,92,246,.6); box-shadow:0 0 0 3px rgba(139,92,246,.2);
}
/* Tarih tam satır; saat 12 saatlik yerel ayarda "08:00 PM" sığsın diye kişi sayısıyla yan yana. */
.qm-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem .6rem; }
.qm-grid .qm-field:first-child { grid-column:1 / -1; }
.qm-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.qm-btn {
  display:inline-block; padding:.85rem 1.2rem; border:0; border-radius:100rem; background:var(--grad);
  color:var(--ink-900); font:inherit; font-size:1rem; font-weight:800; text-align:center; cursor:pointer;
}
.qm-btn.ghost { background:transparent; border:1px solid var(--line); color:var(--lilac); font-size:.9rem; }
.qm-btn:hover { text-decoration:none; }
.qm-fine { margin:0; font-size:.75rem; line-height:1.5; color:var(--muted); text-align:center; }
.qm-done { padding:1.5rem 0 1rem; text-align:center; }
.qm-done-mark {
  display:inline-grid; place-items:center; width:3.2rem; height:3.2rem; margin-bottom:.8rem; border-radius:50%;
  background:rgba(74,222,128,.15); color:#86EFAC; font-size:1.5rem; font-weight:800;
}
.qm-done h2 { margin:0 0 .4rem; font-size:1.25rem; color:var(--strong); }
.qm-done-sum { margin:0 0 1rem; font-size:.95rem; font-weight:600; color:var(--text); }
.qm-done .qm-notice { text-align:left; }

.qm-logo-img { object-fit:cover; background:#fff; }
.qm-sub a { font-weight:700; }

/* İşletme sayfası (/ms/{isletme}-{ilce}-{il}, Plus K-53/K-67) */
.bp-preview {
  position:sticky; top:0; z-index:20; padding:.6rem 1rem; text-align:center; font-size:.82rem; font-weight:700;
  color:#241303; background:var(--grad-warm);
}
.bp-preview a { color:#241303; text-decoration:underline; }
.bp-hero { max-width:48rem; margin:0 auto; }
.bp-cover {
  position:relative; aspect-ratio:16 / 7; overflow:hidden; background:var(--grad);
  border-radius:0 0 1.5rem 1.5rem;
}
.bp-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.bp-cover.is-empty::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(30rem 12rem at 80% 120%, rgba(11,13,20,.55), transparent 70%),
    radial-gradient(24rem 10rem at 10% -20%, rgba(255,255,255,.35), transparent 70%);
}
.bp-id { display:flex; align-items:flex-end; gap:1rem; margin-top:-2.75rem; padding:0 1rem; position:relative; }
.bp-logo {
  flex:none; width:5.5rem; height:5.5rem; border-radius:1.4rem; border:3px solid var(--ink-900);
  background:#fff; object-fit:cover; box-shadow:0 .75rem 2rem rgba(0,0,0,.35);
}
span.bp-logo {
  display:inline-flex; align-items:center; justify-content:center; background:var(--grad-warm);
  font-weight:800; font-size:2rem; color:#241303;
}
.bp-title { min-width:0; padding-bottom:.2rem; }
.bp-title h1 { margin:0; font-size:1.5rem; font-weight:800; line-height:1.2; color:var(--strong); letter-spacing:-.015em; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.bp-loc { margin:.3rem 0 0; display:flex; align-items:center; gap:.35rem; font-size:.88rem; color:var(--muted); }
.bp-ic { width:1.05em; height:1.05em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bp-main { max-width:48rem; margin:0 auto; padding:1.2rem 1rem 0; }
.bp-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.bp-actions .bp-btn { flex:1 1 9rem; }
@media (min-width:40rem) { .bp-actions .bp-btn { flex:1 1 auto; } }
.bp-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; padding:.7rem 1rem;
  border-radius:1rem; border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:.92rem; font-weight:700; color:var(--strong); text-align:center;
}
.bp-btn:hover { text-decoration:none; border-color:rgba(139,92,246,.5); color:var(--lilac); }
.bp-btn.primary { border:0; background:var(--grad); color:var(--ink-900); }
.bp-btn.primary:hover { color:var(--ink-900); filter:brightness(1.05); }
.bp-info { display:grid; gap:.7rem; margin-top:1.2rem; }
@media (min-width:40rem) { .bp-info { grid-template-columns:1fr 1fr; } .bp-info .bp-card.wide { grid-column:1 / -1; } }
.bp-card {
  padding:1rem 1.1rem; border-radius:1rem; border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 50%,rgba(255,255,255,.025));
}
.bp-card h2 {
  display:flex; align-items:center; gap:.45rem; margin:0 0 .5rem; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lilac);
}
.bp-card p { margin:0; font-size:.92rem; line-height:1.6; color:var(--text); white-space:pre-line; overflow-wrap:anywhere; }
.bp-card .bp-muted { margin-top:.35rem; font-size:.78rem; color:var(--muted); }
.bp-menu-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:2rem 0 .2rem; }
.bp-menu-head h2 { margin:0; font-size:1.2rem; font-weight:800; color:var(--strong); }
.bp-menu-head a { font-size:.82rem; font-weight:700; }
.bp-main .qm-cats { margin:0 -1rem; padding-left:1rem; padding-right:1rem; max-width:none; }
.bp-main .qm-body { max-width:none; padding-left:0; padding-right:0; }
.bp-foot { max-width:48rem; margin-top:1rem; }
@media (min-width:48rem) {
  .bp-cover { border-radius:0 0 1.75rem 1.75rem; }
  .bp-title h1 { font-size:1.9rem; }
}

/* Ön rezervasyon: KVKK onayı ve SMS doğrulama adımı (K-54) */
.qm-check { display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; line-height:1.5; color:var(--text); cursor:pointer; }
.qm-check input { flex:none; width:1.15rem; height:1.15rem; margin-top:.1rem; accent-color:var(--violet); }
.qm-step-title { margin:.5rem 0 .4rem; font-size:1.2rem; font-weight:800; color:var(--strong); }
.qm-verify .qm-done-sum { margin:0 0 .6rem; }
.qm-code { text-align:center; letter-spacing:.5em; font-size:1.4rem !important; font-weight:800; font-variant-numeric:tabular-nums; }
.qm-resend { margin-top:.6rem; display:flex; justify-content:center; }

/* Sipariş hazır bildirimi (K-56) */
.rd-card {
  margin:.5rem 0 1rem; padding:1.6rem 1rem 1.4rem; border-radius:1.25rem; text-align:center;
  border:1px solid var(--line); background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
}
.rd-label { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lilac); }
.rd-number { margin:.35rem 0 .5rem; font-size:4rem; font-weight:800; line-height:1; color:var(--strong); font-variant-numeric:tabular-nums; letter-spacing:-.02em; overflow-wrap:anywhere; }
.rd-status { font-size:1.05rem; font-weight:700; color:var(--muted); }
.rd-card.is-ready { border-color:rgba(74,222,128,.55); background:linear-gradient(168deg,rgba(74,222,128,.18),rgba(74,222,128,.04)); }
.rd-card.is-ready .rd-status { color:#86EFAC; font-size:1.25rem; }
.rd-card.is-ready .rd-number { color:#DCFCE7; }
.rd-push { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }