/* ===== 7 DİJİ MENÜ — seç → QR → garson aktar → masa ===== */
.v7 { --cycle: 14s; background:
  radial-gradient(ellipse 50% 45% at 70% 35%, rgba(var(--brand-rgb),.12), transparent 55%),
  linear-gradient(155deg,#12151c,#0a0c10); }
.v7 .story { position:absolute; inset:0; }
.v7 .beat {
  position:absolute; inset:0; display:grid; place-items:center;
  padding:3.5% 4%; opacity:0; visibility:hidden; pointer-events:none;
}
.v7 .b1 { animation:v7b1 var(--cycle) linear infinite; }
.v7 .b2 { animation:v7b2 var(--cycle) linear infinite; }
.v7 .b3 { animation:v7b3 var(--cycle) linear infinite; }
.v7 .b4 { animation:v7b4 var(--cycle) linear infinite; }
@keyframes v7b1 {
  0%,15.5%{opacity:0;visibility:hidden}
  16.5%,25%{opacity:1;visibility:visible}
  26.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v7b2 {
  0%,25.5%{opacity:0;visibility:hidden}
  26.5%,34%{opacity:1;visibility:visible}
  35.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v7b3 {
  0%,34.5%{opacity:0;visibility:hidden}
  35.5%,44%{opacity:1;visibility:visible}
  45.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v7b4 {
  0%,44.5%{opacity:0;visibility:hidden}
  45.5%,100%{opacity:1;visibility:visible}
}
.v7 .rail {
  position:absolute; left:50%; bottom:3%; transform:translateX(-50%);
  display:flex; gap:.35rem; z-index:6;
}
.v7 .rail i {
  width:28px; height:4px; border-radius:99px; background:rgba(255,255,255,.12);
}
.v7 .rail i:nth-child(1){animation:v7r1 var(--cycle) linear infinite}
.v7 .rail i:nth-child(2){animation:v7r2 var(--cycle) linear infinite}
.v7 .rail i:nth-child(3){animation:v7r3 var(--cycle) linear infinite}
.v7 .rail i:nth-child(4){animation:v7r4 var(--cycle) linear infinite}
@keyframes v7r1 {
  0%,15%{background:rgba(255,255,255,.12)} 16%,25%{background:var(--brand)} 26%,100%{background:rgba(255,255,255,.12)}
}
@keyframes v7r2 {
  0%,25%{background:rgba(255,255,255,.12)} 26%,34%{background:#ffc86b} 35%,100%{background:rgba(255,255,255,.12)}
}
@keyframes v7r3 {
  0%,34%{background:rgba(255,255,255,.12)} 35%,44%{background:#7eb6ff} 45%,100%{background:rgba(255,255,255,.12)}
}
@keyframes v7r4 {
  0%,44%{background:rgba(255,255,255,.12)} 45%,100%{background:#7dffb2}
}
.v7 .frame {
  width:min(94%,760px); height:min(90%,100%);
  display:grid; gap:.55rem; align-items:stretch; min-height:0;
}
.v7 .b1 .frame, .v7 .b2 .frame { grid-template-columns:1.05fr 1fr; }
.v7 .b3 .frame { grid-template-columns:1fr 1.15fr; }
.v7 .b4 .frame { grid-template-columns:1fr 1.05fr; }
.v7 .chip {
  align-self:flex-start; font-size:.5rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.14rem .4rem; border-radius:5px;
}
.v7 .chip-1{background:rgba(var(--brand-rgb),.2);color:#ffb4b1;border:1px solid rgba(var(--brand-rgb),.45)}
.v7 .chip-2{background:rgba(255,200,107,.18);color:#ffc86b;border:1px solid rgba(255,200,107,.4)}
.v7 .chip-3{background:rgba(126,182,255,.18);color:#a8cfff;border:1px solid rgba(126,182,255,.4)}
.v7 .chip-4{background:rgba(125,255,178,.15);color:#7dffb2;border:1px solid rgba(50,200,120,.4)}
.v7 .card {
  background:#151922; border:1px solid var(--line); border-radius:14px;
  padding:.5rem .6rem; box-shadow:0 16px 40px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:.35rem; min-width:0;
}
.v7 .card h3 { margin:0; font:700 .82rem Outfit,sans-serif; }
.v7 .card .sub { margin:0; font-size:.55rem; color:var(--muted); line-height:1.35; }
.v7 .phone {
  width:min(100%,200px); aspect-ratio:9/17; margin:0 auto;
  background:#0e1014; border:2px solid #2a3140; border-radius:22px;
  padding:8px; box-shadow:0 22px 48px rgba(0,0,0,.5); position:relative;
  display:flex; flex-direction:column;
}
.v7 .phone::before {
  content:""; width:34%; height:5px; border-radius:99px; background:rgba(255,255,255,.12);
  margin:2px auto 6px; flex-shrink:0;
}
.v7 .screen {
  flex:1; min-height:0; border-radius:14px; overflow:hidden;
  background:#f7f4ef; color:#1a1d24; display:flex; flex-direction:column;
  font-size:.48rem;
}
.v7 .dm-head {
  background:#fff; padding:.35rem .4rem; border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; justify-content:space-between; align-items:center;
  font:700 .58rem Outfit,sans-serif; color:var(--brand);
}
.v7 .dm-head span { font-size:.45rem; font-weight:600; color:#6b7280; }
.v7 .grid {
  flex:1; padding:.3rem; display:grid; grid-template-columns:1fr 1fr; gap:.25rem;
  align-content:start; overflow:hidden;
}
.v7 .tile {
  background:#fff; border-radius:8px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 6px rgba(0,0,0,.04);
  position:relative; opacity:.55; transform:scale(.96);
  animation:v7tile var(--cycle) var(--snap) infinite;
}
.v7 .tile:nth-child(1){animation-delay:0s}
.v7 .tile:nth-child(2){animation-delay:.12s}
.v7 .tile:nth-child(3){animation-delay:.24s}
.v7 .tile:nth-child(4){animation-delay:.36s}
@keyframes v7tile {
  0%,17%{opacity:.5;transform:scale(.96);box-shadow:none}
  19%{opacity:1;transform:scale(1.04);box-shadow:0 0 0 2px var(--brand)}
  22%{opacity:1;transform:scale(1);box-shadow:0 0 0 1.5px rgba(var(--brand-rgb),.5)}
  26%,100%{opacity:1;transform:scale(1);box-shadow:0 2px 6px rgba(0,0,0,.06)}
}
.v7 .tile img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.v7 .tile b { display:block; padding:.15rem .2rem 0; font:700 .5rem Outfit,sans-serif; line-height:1.2; }
.v7 .tile em { display:block; padding:0 .2rem .2rem; font-style:normal; color:#6b7280; font-size:.42rem; }
.v7 .cartbar {
  background:#fff; border-top:1px solid rgba(0,0,0,.08);
  padding:.3rem .35rem; display:flex; justify-content:space-between; align-items:center;
  font-weight:700;
}
.v7 .cartbar .cta {
  background:var(--brand); color:#fff; padding:.22rem .4rem; border-radius:6px;
  font:800 .48rem Outfit,sans-serif; animation:v7cta var(--cycle) var(--punch) infinite;
}
@keyframes v7cta {
  0%,22%{transform:scale(1)} 24%{transform:scale(1.06)} 26%,100%{transform:scale(1)}
}
.v7 .cart-lines { padding:.25rem .35rem; display:flex; flex-direction:column; gap:.15rem; }
.v7 .cart-lines div {
  display:flex; justify-content:space-between; background:rgba(0,0,0,.03);
  border-radius:5px; padding:.18rem .25rem; font-size:.45rem; font-weight:600;
  opacity:0; animation:v7cl var(--cycle) var(--snap) infinite;
}
.v7 .cart-lines div:nth-child(1){animation-delay:.05s}
.v7 .cart-lines div:nth-child(2){animation-delay:.18s}
.v7 .cart-lines div:nth-child(3){animation-delay:.3s}
@keyframes v7cl {
  0%,18%{opacity:0;transform:translateY(4px)} 21%{opacity:1;transform:none} 26%,100%{opacity:1}
}

/* Beat 2 — QR */
.v7 .qr-view {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; padding:.4rem; background:#fff; text-align:center;
}
.v7 .qr-view h4 { margin:0; font:800 .62rem Outfit,sans-serif; color:#1a1d24; }
.v7 .qr-view p { margin:0; font-size:.45rem; color:#6b7280; }
.v7 .qr-box {
  width:78%; aspect-ratio:1; border-radius:10px; border:2px solid #1a1d24;
  background:
    repeating-linear-gradient(0deg,#111 0 3px,transparent 3px 6px),
    repeating-linear-gradient(90deg,#111 0 3px,transparent 3px 6px);
  background-color:#fff; background-blend-mode:multiply;
  position:relative; animation:v7qrpop var(--cycle) var(--punch) infinite;
}
@keyframes v7qrpop {
  0%,27%{transform:scale(.9);opacity:.4}
  29%{transform:scale(1.05);opacity:1}
  32%,100%{transform:scale(1);opacity:1}
}
.v7 .qr-box::before, .v7 .qr-box::after {
  content:""; position:absolute; width:22%; height:22%; border:3px solid #111; background:#fff;
}
.v7 .qr-box::before { top:8%; left:8%; border-right:0; border-bottom:0; }
.v7 .qr-box::after { bottom:8%; right:8%; border-left:0; border-top:0; }
.v7 .code {
  font:800 .7rem Outfit,sans-serif; letter-spacing:.12em; color:var(--brand);
  animation:v7code var(--cycle) var(--punch) infinite;
}
@keyframes v7code {
  0%,28%{opacity:0} 31%{opacity:1} 35%,100%{opacity:1}
}
.v7 .hint-side {
  display:flex; flex-direction:column; gap:.4rem; justify-content:center;
}
.v7 .step-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.v7 .step-list li {
  display:flex; gap:.4rem; align-items:flex-start; font-size:.55rem; color:var(--muted);
  padding:.35rem; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid var(--line);
}
.v7 .step-list li b {
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font:800 .5rem Outfit,sans-serif; color:#fff; background:var(--brand);
}
.v7 .step-list li strong { display:block; color:var(--text); font:700 .6rem Outfit,sans-serif; margin-bottom:.1rem; }
.v7 .step-list li.is-on { border-color:rgba(var(--brand-rgb),.45); background:rgba(var(--brand-rgb),.1); }

/* Beat 3 — waiter scan → kasa + KDS */
.v7 .handset {
  background:#151922; border:1px solid var(--line); border-radius:14px; padding:.5rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.v7 .scan {
  position:relative; flex:1; min-height:90px; border-radius:10px; overflow:hidden;
  background:linear-gradient(160deg,#1a2430,#0e141c); border:1px solid rgba(126,182,255,.25);
  display:grid; place-items:center;
}
.v7 .scan .target {
  width:52%; aspect-ratio:1; border:2px dashed rgba(126,182,255,.55); border-radius:8px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0 2px,transparent 2px 5px);
  opacity:.7;
}
.v7 .scan .beam {
  position:absolute; left:18%; right:18%; height:2px; background:var(--brand);
  box-shadow:0 0 12px rgba(var(--brand-rgb),.8); top:20%;
  animation:v7beam var(--cycle) linear infinite;
}
@keyframes v7beam {
  0%,35%{top:22%;opacity:0}
  37%{opacity:1}
  43%{top:72%;opacity:1}
  45%,100%{top:72%;opacity:0}
}
.v7 .scan-ok {
  text-align:center; font:800 .65rem Outfit,sans-serif; color:#7dffb2;
  opacity:0; animation:v7sok var(--cycle) var(--punch) infinite;
}
@keyframes v7sok {
  0%,40%{opacity:0;transform:translateY(6px)} 43%{opacity:1;transform:none} 45%,100%{opacity:1}
}
.v7 .sinks {
  display:grid; grid-template-rows:1fr 1fr; gap:.35rem; min-height:0;
}
.v7 .sink {
  background:#151922; border:1px solid var(--line); border-radius:12px; padding:.4rem .5rem;
  opacity:0; animation:v7sink var(--cycle) var(--snap) infinite;
}
.v7 .sink:nth-child(1){animation-delay:0s}
.v7 .sink:nth-child(2){animation-delay:.15s}
@keyframes v7sink {
  0%,38%{opacity:0;transform:translateX(10px)}
  42%{opacity:1;transform:none}
  45%,100%{opacity:1}
}
.v7 .sink .lbl {
  font-size:.48rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.2rem;
}
.v7 .sink .lbl.kasa{color:#ffc86b} .v7 .sink .lbl.kds{color:#7dffb2}
.v7 .sink .ln {
  display:flex; justify-content:space-between; font-size:.55rem; font-weight:600;
  padding:.2rem .25rem; background:rgba(255,255,255,.04); border-radius:6px; margin-bottom:.15rem;
}
.v7 .sink .ln span { color:var(--muted); font-weight:500; }

/* Beat 4 — table view */
.v7 .table-screen { background:#fff; }
.v7 .masa-banner {
  background:var(--brand); color:#fff; text-align:center; padding:.4rem;
  font:800 .75rem Outfit,sans-serif; letter-spacing:.04em;
  animation:v7masa var(--cycle) var(--punch) infinite;
}
@keyframes v7masa {
  0%,45%{transform:scale(1)} 47%{transform:scale(1.03)} 50%,100%{transform:scale(1)}
}
.v7 .masa-banner small { display:block; font-size:.45rem; font-weight:600; opacity:.85; letter-spacing:0; }
.v7 .xfer-list { flex:1; padding:.35rem; display:flex; flex-direction:column; gap:.2rem; }
.v7 .xfer-list .row {
  display:grid; grid-template-columns:1fr auto; gap:.2rem;
  padding:.3rem; background:#f3f0ea; border-radius:8px; font-size:.5rem;
  opacity:0; animation:v7xr var(--cycle) var(--snap) infinite;
}
.v7 .xfer-list .row:nth-child(1){animation-delay:0s}
.v7 .xfer-list .row:nth-child(2){animation-delay:.1s}
.v7 .xfer-list .row:nth-child(3){animation-delay:.2s}
@keyframes v7xr {
  0%,46%{opacity:0;transform:translateY(6px)} 49%{opacity:1;transform:none} 52%,100%{opacity:1}
}
.v7 .xfer-list strong { font-family:Outfit,sans-serif; }
.v7 .xfer-list em { font-style:normal; color:#6b7280; font-size:.42rem; }
.v7 .xfer-list .amt { font:700 .55rem Outfit,sans-serif; color:var(--brand); align-self:center; }
.v7 .status-pill {
  margin:.2rem .35rem .4rem; text-align:center; padding:.3rem;
  border-radius:8px; background:rgba(50,200,120,.12); color:#15803d;
  font:800 .52rem Outfit,sans-serif; border:1px solid rgba(50,200,120,.35);
  opacity:0; animation:v7pill var(--cycle) var(--punch) infinite;
}
@keyframes v7pill {
  0%,49%{opacity:0} 52%{opacity:1} 100%{opacity:1}
}
.v7 .ops-side .mirror {
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px;
  padding:.4rem; font-size:.55rem;
}
.v7 .ops-side .mirror b { display:block; font:700 .7rem Outfit,sans-serif; margin-bottom:.25rem; }
.v7 .ops-side .mirror div {
  display:flex; justify-content:space-between; padding:.2rem 0;
  border-bottom:1px solid var(--line); color:var(--muted);
}
.v7 .ops-side .mirror div strong { color:var(--text); }