:root {
  --bg: #f6f1e8;
  --surface: #ffffff;
  --surface-alt: #fbf7ee;
  --text: #2b2622;
  --muted: #7a6f66;
  --border: #efe8dc;
  --primary: #d9472b;
  --like: #5e9e4a;
  --super: #f6c643;
  --pass: #7a6f66;
  --paper: #fbf7ee;
  --counter: #2b2622;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overscroll-behavior: none; }
#app { min-height: 100%; max-width: 480px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; }
h1 { font-size: 30px; font-weight: 800; margin: 8px 0; }
h2 { font-size: 22px; font-weight: 800; margin: 8px 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.screen { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.emoji { font-size: 56px; text-align: center; }
input {
  width: 100%; height: 54px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  padding: 0 16px; font-size: 18px; color: var(--text);
}
button.primary, a.primary, button.secondary, a.secondary {
  display: block; width: 100%; min-height: 54px; border-radius: 24px; border: 0; font-size: 17px; font-weight: 700;
  text-align: center; text-decoration: none; line-height: 54px; cursor: pointer;
}
.primary { background: var(--primary); color: #fff; }
.secondary { background: var(--surface); color: var(--text); border: 2px solid var(--border) !important; }
button:disabled { opacity: 0.4; }
.error { color: var(--primary); font-weight: 600; text-align: center; }
.count { font-size: 120px; font-weight: 900; color: var(--primary); text-align: center; }
.progress { font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Masa ---------- */
body.table, #app.table {
  background-color: #d0623f;
  background-image:
    linear-gradient(90deg, rgba(150, 40, 18, 0.32) 50%, transparent 50%),
    linear-gradient(rgba(150, 40, 18, 0.32) 50%, transparent 50%);
  background-size: 56px 56px;
}
#app.table { gap: 10px; min-height: 100dvh; }
.serif, .tcard h2, h1 { font-family: Georgia, 'Times New Roman', serif; }
.tcard { background: var(--paper); border-radius: 16px; padding: 10px 16px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }
.tcard h2 { font-size: 21px; font-weight: 700; margin: 0 0 2px; }
.tcard p { margin: 0; font-size: 13px; color: var(--muted); }
.tcard.closed { text-align: center; padding: 24px; }
.plates {
  flex: 1; display: grid; justify-content: center; align-content: center; gap: 8px 16px;
  grid-template-columns: repeat(2, min(42vw, 176px, calc((100dvh - 290px) / 3 - 30px)));
}
.cell { display: flex; flex-direction: column; align-items: center; animation: serve 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes serve { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.plate {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 0;
  padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.plate .rim {
  width: 84%; height: 84%; border-radius: 50%; background: var(--surface-alt); border: 1.5px solid #f1ece3;
  display: flex; align-items: center; justify-content: center;
}
.plate img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.plate .em { font-size: 48px; }
.plate.picked { box-shadow: 0 0 0 6px var(--super), 0 4px 8px rgba(0, 0, 0, 0.25); }
.plate.picked::after, .plate.super::before {
  position: absolute; top: 0; width: 26%; height: 26%; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px;
}
.plate.picked::after { content: '✓'; inset-inline-end: 0; background: var(--like); color: #fff; }
.plate.super::before { content: '★'; inset-inline-start: 0; background: var(--super); color: var(--text); }
.plate.bump { animation: bump 0.32s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(0.92); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.label {
  margin-top: -10px; background: var(--paper); border-radius: 10px; padding: 3px 12px; min-width: 70%; max-width: 100%;
  text-align: center; font: 700 14px Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); position: relative;
}
.tcounter { background: var(--paper); border-radius: 24px; padding: 8px 16px 16px; }
.tcounter .progress { margin: 0 0 8px; }
.collect {
  display: block; width: 100%; min-height: 58px; border-radius: 999px; border: 0; background: var(--counter); color: #fff;
  font-size: 18px; font-weight: 800; cursor: pointer;
}
.collect:active { transform: scale(0.98); }

/* ---------- Sipariş fişi ---------- */
body.counter, #app.counter { background: var(--counter); }
#app.counter { color: var(--paper); gap: 0; }
.slot { height: 18px; border-radius: 9px; background: #1a1613; display: flex; align-items: center; padding: 0 16px; position: relative; z-index: 2; }
.slot::after { content: ''; flex: 1; height: 4px; border-radius: 2px; background: #000; }
.receipt-clip { margin: -9px 16px 0; overflow: hidden; padding-bottom: 4px; }
.receipt { animation: print 1.3s cubic-bezier(0.3, 0.9, 0.4, 1) 0.15s both; }
@keyframes print { from { transform: translateY(-100%); } to { transform: none; } }
.paper {
  background: var(--paper); color: var(--text); padding: 24px 16px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; font-family: 'Courier New', Courier, monospace;
}
.zig { display: block; width: 100%; height: 12px; fill: var(--paper); }
.r-title { font-size: 20px; font-weight: 700; letter-spacing: 1px; text-align: center; }
.r-meta { font-size: 12px; color: var(--muted); text-align: center; }
.dash { align-self: stretch; border-top: 2px dashed #b9ada0; margin: 4px 0; }
.r-art { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.r-art img { width: 100%; height: 100%; object-fit: contain; }
.r-art .em { font-size: 96px; }
.r-dish { font-size: 36px; color: var(--primary); margin: 0; text-align: center; }
.r-note { font-size: 14px; text-align: center; }
.r-row { align-self: stretch; font-size: 15px; white-space: pre; overflow: hidden; }
.r-foot { font-size: 13px; color: var(--muted); }
.after { padding: 24px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.after p { color: #d8cfc4; margin: 0 0 8px; }
.stores { display: flex; flex-direction: column; gap: 8px; }