/* PAYON demo sahnesi — tanıtım sayfasının harfli menü panosu dünyasında; belgesi: .impeccable/surfaces/site-demo-index-html.md
   Ortak jetonlar ../style.css'ten gelir; buradakiler sahneye özgüdür. Yalnız 12 renk jetonu kullanılır. */

.sahne-ic { max-width: 1560px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 28px); }
.giris-alt { max-width: 62ch; margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--murekkep-2); }
[hidden] { display: none !important; }

/* ---------- pul (durum damgası) ---------- */
.pul { display: inline-block; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border: 2px solid currentColor; border-radius: 4px; white-space: nowrap; background: transparent; }
.pul.hazir { color: var(--nane-koyu); }
.pul.bek { color: var(--kehribar-koyu); }
.pul.sol { color: var(--soluk); }

/* ---------- giriş: salon planı ---------- */
.salon-kutu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: 30px; }
.salon svg { width: 100%; height: auto; display: block; }
.sv-zemin { fill: var(--beyaz); stroke: var(--murekkep); stroke-width: 1.5; }
.sv-duvar { fill: var(--kece); stroke: var(--murekkep); stroke-width: 1.5; }
.sv-etiket { font: 800 13px "Barlow Condensed", sans-serif; letter-spacing: .12em; fill: var(--murekkep); text-transform: uppercase; }
.sv-etiket.s { fill: var(--soluk); font-size: 11px; }
.sv-masa { fill: var(--zemin); stroke: var(--murekkep); stroke-width: 1.5; }
.sv-sandalye { fill: var(--oluk); stroke: var(--oluk-koyu); stroke-width: 1; }
.sv-no { font: 800 22px "Barlow Condensed", sans-serif; fill: var(--murekkep); text-anchor: middle; dominant-baseline: central; }
.sv-misafir { fill: var(--murekkep-2); opacity: .8; }
.sv-halka { fill: none; stroke: var(--nane); stroke-width: 3; opacity: 0; transition: opacity .25s var(--ease); }
.sv-masa-g { cursor: pointer; outline: none; }
.sv-masa-g.dolu { cursor: not-allowed; }
.sv-masa-g.dolu .sv-masa { fill: var(--kece); }
.sv-masa-g:not(.dolu):hover .sv-halka, .sv-masa-g:not(.dolu):focus-visible .sv-halka { opacity: 1; }
.sv-masa-g.sec .sv-halka { opacity: 1; stroke: var(--nane-koyu); }
.sv-masa-g.sec .sv-masa { fill: var(--beyaz); }
.sv-pul { font: 800 10px "Barlow Condensed", sans-serif; letter-spacing: .1em; fill: var(--soluk); text-anchor: middle; }
.sv-sen { font: 800 11px "Barlow Condensed", sans-serif; letter-spacing: .12em; fill: var(--nane-koyu); text-anchor: middle; }
.sv-kasa-pc { fill: var(--murekkep-2); }
.sv-pas { fill: var(--oluk-koyu); }
.garson { transition: transform 1s linear; }
.garson circle.g { fill: var(--murekkep); stroke: var(--beyaz); stroke-width: 2; }
.garson text { font: 800 14px "Barlow Condensed", sans-serif; fill: var(--beyaz); text-anchor: middle; dominant-baseline: central; }
.garson .tepsi { fill: var(--beyaz); stroke: var(--murekkep); stroke-width: 1.5; opacity: 0; transition: opacity .2s linear; }
.garson.yuklu .tepsi { opacity: 1; }
.garson.tasiyor { filter: drop-shadow(0 2px 2px rgba(17,42,74,.35)); }
.masa-kartlar { margin-top: 8px; }
.gerekir-b { margin-top: 30px; }
.gerekir { max-width: 980px; }
.masa-kartlar .tent[disabled] { opacity: .45; cursor: not-allowed; }
.masa-sec-b { margin-top: 26px; }

/* ---------- oyun: koçluk çubuğu ---------- */
.oyun { padding-bottom: 12px; }
.kocluk { position: sticky; top: var(--oluk-h); z-index: 9; background: color-mix(in srgb, var(--zemin) 92%, white); border-bottom: 1px solid var(--oluk-koyu); padding: 10px clamp(12px, 2vw, 28px) 12px; }
.ray { list-style: none; margin: 0 auto 8px; padding: 0; display: flex; gap: 6px; max-width: 1504px; overflow-x: auto; scrollbar-width: none; }
.ray::-webkit-scrollbar { display: none; }
.ray li { flex: 1 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-top: 3px solid var(--oluk-koyu); font: 700 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.ray li b { font-weight: 800; color: var(--kehribar-koyu); }
.ray li.bitti { color: var(--nane-koyu); border-top-color: var(--nane); }
.ray li.bitti b { color: var(--nane-koyu); }
.ray li.aktif { color: var(--murekkep); border-top-color: var(--kehribar); background: linear-gradient(180deg, color-mix(in srgb, var(--kehribar) 16%, transparent), transparent 80%); }
.ray li.aktif b { color: var(--murekkep); }
.kocluk-ic { max-width: 1504px; margin: 0 auto; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.simdi { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; color: var(--beyaz); background: var(--murekkep); padding: 6px 9px; border-radius: 4px; }
#kocluk-metin { margin: 0; flex: 1 1 320px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.35; min-width: 0; }
#kocluk-metin b { color: var(--murekkep); }
.kocluk-act { display: flex; gap: 12px; flex-wrap: wrap; }
.kocluk-act .tent { min-height: 44px; padding: 0 16px; font-size: 15px; }
.hiz { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 700 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; color: var(--soluk); }
.hiz button { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; padding: 7px 9px; background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--oluk-koyu); border-radius: 4px; cursor: pointer; }
.hiz button[aria-pressed="true"] { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); }

/* ---------- ızgara ---------- */
.izgara { display: grid; gap: 14px; max-width: 1560px; margin: 14px auto 0; padding: 0 clamp(12px, 2vw, 28px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) clamp(340px, 26vw, 400px); grid-template-areas: "masa salon tel" "mutfak kasa tel" "gunluk gunluk gunluk"; }
.p-masa { grid-area: masa; } .p-salon { grid-area: salon; } .p-tel { grid-area: tel; } .p-mutfak { grid-area: mutfak; } .p-kasa { grid-area: kasa; } .p-gunluk { grid-area: gunluk; }
.pane { background: var(--zemin); border: 1.5px solid var(--murekkep); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pane-b { margin: 0; padding: 0 14px; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--murekkep); color: var(--beyaz); font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pane-b b { font-weight: 800; }
.oturum { font: 600 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: color-mix(in srgb, var(--beyaz) 72%, var(--murekkep)); text-transform: uppercase; }

/* ---------- masa sahnesi ---------- */
.masa-sahne { position: relative; flex: 1; padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 450px; }
.yuzey { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 30px 12px; background: var(--beyaz); border: 1.5px solid var(--oluk-koyu); border-radius: 14px; box-shadow: inset 0 0 0 5px var(--zemin), inset 0 0 0 6px var(--oluk); }
.sandalye { position: absolute; width: 58px; height: 13px; background: var(--oluk); border: 1px solid var(--oluk-koyu); border-radius: 7px; }
.s1 { top: -8px; left: 18%; } .s2 { top: -8px; right: 18%; } .s3 { bottom: -8px; left: 18%; } .s4 { bottom: -8px; right: 18%; }
.sen { position: absolute; bottom: 9px; left: calc(18% + 66px); font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; color: var(--nane-koyu); }
.cihaz-kutu { --k: .62; position: relative; width: calc(360px * var(--k)); height: calc(540px * var(--k)); flex: none; transition: transform .3s var(--ease); }
.olcek { width: 360px; height: 540px; transform: scale(var(--k)); transform-origin: 0 0; }
.cihaz-kutu .cihaz { width: 360px; }
.cihaz-kutu.tara::before { content: ""; position: absolute; inset: -8px; border: 3px solid var(--nane); border-radius: 18px; animation: tara-halka 1s var(--ease) 2; z-index: 3; pointer-events: none; }
@keyframes tara-halka { from { opacity: 1; transform: scale(1.06); } to { opacity: 0; transform: scale(1.18); } }
.cihaz-kutu.vurgu { animation: vurgu 1.1s var(--ease) 2; }
@keyframes vurgu { 40% { transform: translateY(-5px); } }
/* sahne ekranları: kopyaya eklenen fiş ekranı */
.cihaz[data-ekran="fis"] .e-fis { opacity: 1; transform: none; }
.e-fis .e-qr { margin-top: 10px; }
.e-menu .e-qr img, .e-fis .e-qr img { image-rendering: pixelated; }

.tabaklar { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px 8px; min-height: 100px; }
.tabak { --k: 1; position: relative; margin: 0; width: 84px; text-align: center; }
.tabak .tb { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--beyaz); padding: 8px; box-shadow: 0 8px 14px -8px rgba(17,42,74,.5), 0 1px 2px rgba(17,42,74,.18), inset 0 0 0 1px var(--oluk-koyu); animation: tabak-in .6s var(--ease) both; }
.tabak .tb::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, var(--oluk) 0 2px, transparent 2.5px); background-size: 9px 9px; opacity: 0; transition: opacity .5s linear; }
.tabak img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; clip-path: circle(calc(var(--k) * 50%)); }
.tabak.bos .tb::after { opacity: .8; }
.tabak figcaption { margin-top: 6px; font: 600 11px/1.15 "Barlow", sans-serif; color: var(--soluk); }
.tabak .adet { position: absolute; right: -2px; top: -2px; min-width: 24px; padding: 4px 5px; border-radius: 999px; background: var(--murekkep); color: var(--beyaz); font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.tabak .buhar { position: absolute; left: 50%; top: -6px; width: 28px; height: 22px; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.tabak.sicak:not(.bos) .buhar { opacity: .7; }
.tabak .buhar i { position: absolute; bottom: 0; width: 2px; height: 14px; border-radius: 2px; background: var(--oluk-koyu); animation: buhar 2.2s ease-in-out infinite; }
.tabak .buhar i:nth-child(1) { left: 6px; } .tabak .buhar i:nth-child(2) { left: 13px; animation-delay: .5s; } .tabak .buhar i:nth-child(3) { left: 20px; animation-delay: 1.1s; }
@keyframes buhar { 0% { transform: translateY(4px) scaleY(.6); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-10px) scaleY(1.1); opacity: 0; } }
@keyframes tabak-in { from { transform: translateY(-26px) scale(1.25); opacity: 0; } to { transform: none; opacity: 1; } }
.tabaklar.mini .tabak { width: 62px; }
.tabaklar.mini .tb { width: 62px; height: 62px; padding: 6px; }
.tabaklar.mini figcaption { display: none; }
.gar-nokta { position: absolute; top: 12px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--murekkep); color: var(--beyaz); display: grid; place-items: center; font: 800 14px/1 "Barlow Condensed", sans-serif; box-shadow: 0 6px 10px -6px rgba(17,42,74,.6); animation: gar-gel .6s var(--ease) both; z-index: 2; }
@keyframes gar-gel { from { transform: translateY(-34px); opacity: 0; } to { transform: none; opacity: 1; } }
.masa-not { margin: 6px 0 0; min-height: 22px; font-size: 15px; color: var(--murekkep-2); text-align: center; }
.masa-not b { color: var(--murekkep); }

/* garson kartı: hesap + masada ödeme */
.kart-garson { position: absolute; inset: auto 14px 12px 14px; z-index: 5; background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 10px; padding: 14px 16px 16px; box-shadow: var(--golge-tent); animation: tabak-in .5s var(--ease) both; }
.kart-garson h3 { margin: 0 0 6px; font: 800 20px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kart-garson .kg-satir { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; border-bottom: 1px solid var(--oluk); }
.kart-garson .kg-top { display: flex; justify-content: space-between; font: 800 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; padding-top: 8px; font-variant-numeric: tabular-nums; }
.kg-yontem { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kg-yontem .tent { flex: 1 1 90px; min-height: 44px; padding: 0 10px; font-size: 15px; }
.kg-pos { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pos-cihaz { width: 74px; flex: none; background: var(--murekkep); color: var(--beyaz); border-radius: 8px; padding: 8px 8px 10px; text-align: center; font: 800 13px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.pos-cihaz .pe { background: var(--zemin); color: var(--murekkep); border-radius: 3px; padding: 7px 4px; margin-bottom: 8px; font-size: 14px; min-height: 44px; display: grid; place-items: center; }
.pos-cihaz.ok .pe { color: var(--nane-koyu); }
.pos-cihaz .tus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pos-cihaz .tus i { height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--beyaz) 30%, var(--murekkep)); }
.kg-mesaj { font-size: 14px; color: var(--murekkep-2); line-height: 1.35; }

/* masaüstünde telefon bölmesi ekrana yapışık kalır: alttaki "Siparişi gönder" / gezinme çubuğu hep görünür */
@media (min-width: 1100px) {
  .p-tel { position: sticky; top: 176px; align-self: start; height: calc(100vh - 192px); min-height: 560px; }
  .p-tel .telefon { min-height: 0; }
  .p-tel .tel-ic { min-height: 0; }
}
/* ---------- telefon ---------- */
.telefon { flex: 1; display: flex; flex-direction: column; padding: 12px 12px 14px; min-height: 640px; }
.tel-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border: 1.5px solid var(--murekkep); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--murekkep-2); color: var(--beyaz); font: 600 12px/1 "Barlow", sans-serif; }
.tel-url { font: 600 12px/1 "Barlow", sans-serif; background: color-mix(in srgb, var(--beyaz) 14%, var(--murekkep-2)); padding: 5px 10px; border-radius: 999px; max-width: 76%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-ic { position: relative; flex: 1; border: 1.5px solid var(--murekkep); border-radius: 0 0 14px 14px; overflow: hidden; background: var(--beyaz); min-height: 580px; }
.tel-ic iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--beyaz); }
.kamera { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: var(--murekkep-2); color: var(--beyaz); }
.kamera p { margin: 0; font-size: 16px; max-width: 24ch; color: color-mix(in srgb, var(--beyaz) 88%, var(--murekkep)); }
.kamera .tent { background: var(--beyaz); color: var(--murekkep); }
.kamera .tent::after { background: var(--kece); }
.vizor { position: relative; width: 190px; height: 190px; }
.vizor i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--nane); }
.vizor i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-radius: 6px 0 0 0; }
.vizor i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-radius: 0 6px 0 0; }
.vizor i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 6px; }
.vizor i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 6px 0; }
.vizor .cizgi { position: absolute; left: 10px; right: 10px; top: 14px; height: 3px; background: var(--nane); border-radius: 2px; animation: tarama 2.2s ease-in-out infinite alternate; }
@keyframes tarama { to { top: calc(100% - 17px); } }
.kamera.tarandi .cizgi { animation-duration: .5s; }
.p-tel.vurgu { animation: vurgu-pane 1.2s var(--ease) 2; }
@keyframes vurgu-pane { 50% { box-shadow: 0 0 0 4px var(--nane); } }

/* ---------- mutfak ekranı ---------- */
.kds { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 280px; max-height: 420px; overflow-y: auto; }
.kds-bos { margin: auto; text-align: center; color: var(--soluk); font-size: 15px; max-width: 28ch; }
.kds-bos b { display: block; font: 800 18px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-2); margin-bottom: 4px; }
.bilet { background: var(--beyaz); border: 1px solid var(--oluk-koyu); border-radius: 6px; box-shadow: 0 8px 14px -12px rgba(17,42,74,.55), 0 1px 2px rgba(17,42,74,.12); animation: bilet-in .5s var(--ease) both; }
@keyframes bilet-in { from { transform: translateY(-14px); opacity: 0; } }
.bilet > header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1.5px dashed var(--oluk-koyu); }
.bilet > header b { font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.bilet > header span.no { font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.bilet > header .pul { margin-left: auto; }
.bilet ul { list-style: none; margin: 0; padding: 6px 12px 10px; }
.bilet li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 4px 0; font-size: 15px; }
.bilet li .q { font: 800 16px/1 "Barlow Condensed", sans-serif; color: var(--kehribar-koyu); }
.bilet li small { display: block; font-size: 12px; color: var(--soluk); }
.bilet li .ist { font: 700 11px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; color: var(--soluk); }
.bilet li .cb { grid-column: 2 / 4; height: 5px; background: var(--oluk); border-radius: 3px; overflow: hidden; }
.bilet li .cb b { display: block; height: 100%; background: var(--kehribar); border-radius: 3px; width: 0; }
.bilet li.ok .cb b { background: var(--nane); }
.bilet li.ok .nm { color: var(--nane-koyu); }
.bilet footer { padding: 0 12px 9px; font-size: 13px; color: var(--soluk); display: flex; gap: 8px; align-items: center; }
.zil { display: inline-block; width: 16px; height: 16px; background: var(--kehribar); border-radius: 50%; position: relative; animation: zil 0.5s ease-in-out 6; }
.zil::before { content: ""; position: absolute; left: 4px; top: 3px; width: 8px; height: 8px; background: var(--beyaz); border-radius: 4px 4px 1px 1px; }
@keyframes zil { 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }

/* ---------- kasa bilgisayarı ---------- */
.kasa { flex: 1; display: flex; flex-direction: column; min-height: 280px; }
.kasa-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--murekkep-2); color: var(--beyaz); font: 600 13px/1 "Barlow", sans-serif; }
.kasa-bar .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--nane); }
.kasa-bar span:last-child { margin-left: auto; color: color-mix(in srgb, var(--beyaz) 76%, var(--murekkep)); }
.kasa-ic { flex: 1; display: grid; grid-template-columns: 38% 62%; min-height: 0; }
.kasa-liste { border-right: 1px solid var(--oluk-koyu); padding: 10px 0; overflow-y: auto; }
.kasa-liste h4, .kasa-detay h4 { margin: 0 0 6px; padding: 0 12px; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }
.k-sat { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--oluk); font-size: 14px; }
.k-sat b { font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.k-sat small { display: block; font-size: 12px; color: var(--soluk); }
.k-sat.biz { background: linear-gradient(90deg, color-mix(in srgb, var(--kehribar) 16%, transparent), transparent 85%); position: static; font: inherit; color: inherit; }
.k-sat .tut { font-variant-numeric: tabular-nums; font-weight: 600; }
.kasa-detay { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kasa-detay .kd-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kasa-detay .kd-baslik b { font: 800 19px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.kd-ln { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 3px 0; border-bottom: 1px solid var(--oluk); }
.kd-top { display: flex; justify-content: space-between; font: 800 20px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; padding-top: 6px; font-variant-numeric: tabular-nums; }
.kd-not { margin: 4px 0 0; font-size: 13px; color: var(--soluk); line-height: 1.35; }
.kd-bos { margin: 14px 0; color: var(--soluk); font-size: 14px; }
.okc { margin-top: auto; border-top: 1.5px dashed var(--oluk-koyu); padding-top: 8px; display: flex; gap: 12px; align-items: stretch; }
.okc-yazici { flex: none; width: 82px; font: 700 11px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--soluk); text-transform: uppercase; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.okc-yazici i { display: block; height: 22px; border-radius: 4px; background: var(--murekkep-2); position: relative; }
.okc-yazici i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 3px; background: var(--murekkep); border-radius: 2px; }
.okc-yazici.calisiyor i::before { content: ""; position: absolute; right: 7px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--nane); animation: yan .4s linear infinite alternate; }
@keyframes yan { to { opacity: .2; } }
.kagit { flex: 1; min-width: 0; height: 168px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: var(--beyaz); border: 1px solid var(--oluk-koyu); border-top: 0; padding: 6px 10px 8px; font: 500 12px/1.35 "Barlow", sans-serif; font-variant-numeric: tabular-nums; color: var(--murekkep); }
.kagit:empty::before { content: "yazar kasa boşta"; margin: auto; color: var(--oluk-koyu); font: 700 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.kagit div { display: flex; justify-content: space-between; gap: 8px; animation: kagit-in .25s var(--ease) both; white-space: nowrap; }
.kagit div.m { justify-content: center; font-weight: 600; }
.kagit div.k { color: var(--soluk); font-size: 11px; justify-content: center; white-space: normal; text-align: center; }
.kagit div.t { font-weight: 600; border-top: 1px solid var(--murekkep); margin-top: 3px; padding-top: 3px; }
.kagit img { width: 54px; margin: 4px auto 0; image-rendering: pixelated; }
@keyframes kagit-in { from { transform: translateY(10px); opacity: .2; } }

/* ---------- günlük ---------- */
.gunluk { list-style: none; margin: 0; padding: 4px 14px 8px; max-height: 210px; overflow-y: auto; font-size: 14px; }
.gunluk li { display: grid; grid-template-columns: 64px 92px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--oluk); animation: kagit-in .35s var(--ease) both; }
.gunluk time { color: var(--soluk); font-variant-numeric: tabular-nums; font-size: 13px; }
.gunluk .kay { font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-2); }
.gunluk .k-payon { color: var(--nane-koyu); } .gunluk .k-mutfak { color: var(--kehribar-koyu); } .gunluk .k-cihaz, .gunluk .k-garson { color: var(--soluk); }
.gunluk code { font: 600 13px "Barlow", sans-serif; color: var(--murekkep); background: var(--kece); border-radius: 3px; padding: 1px 5px; }
.gunluk .bos { grid-template-columns: 1fr; color: var(--soluk); }

/* ---------- salon küçük ---------- */
.salon-mini { padding: 10px 12px 12px; flex: 1; display: flex; align-items: center; }

/* ---------- sekmeler (telefon) ---------- */
.sekmeler { display: none; }

/* ---------- özet ---------- */
#ozet .menu-satirlar .satir-m .sm-isim small { color: var(--soluk); }
#ozet .sm-fiyat { font-variant-numeric: tabular-nums; }

/* ---------- küçük ekran ---------- */
@media (max-width: 1099px) {
  .izgara { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .izgara > .pane { grid-area: auto; display: none; }
  .oyun[data-sek="masa"] .p-masa, .oyun[data-sek="masa"] .p-salon, .oyun[data-sek="tel"] .p-tel, .oyun[data-sek="mutfak"] .p-mutfak, .oyun[data-sek="kasa"] .p-kasa, .oyun[data-sek="gunluk"] .p-gunluk { display: flex; }
  .oyun { padding-bottom: 76px; }
  .izgara { gap: 12px; }
  .telefon { min-height: 0; }
  .tel-ic { min-height: calc(100vh - 290px); }
  .gunluk { max-height: none; }
  .kds { max-height: none; }
  .sekmeler { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; background: var(--zemin); border-top: 1.5px solid var(--murekkep); padding-bottom: env(safe-area-inset-bottom); }
  .sekmeler button { position: relative; min-height: 56px; border: 0; background: transparent; color: var(--soluk); font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .sekmeler button[aria-pressed="true"] { color: var(--murekkep); box-shadow: inset 0 3px 0 var(--kehribar); background: color-mix(in srgb, var(--kehribar) 10%, transparent); }
  .sekmeler button.yeni::after { content: ""; position: absolute; top: 10px; right: calc(50% - 30px); width: 9px; height: 9px; border-radius: 50%; background: var(--kehribar); }
  .salon-kutu { grid-template-columns: 1fr; }
  .hiz { margin-left: 0; }
}
@media (max-width: 560px) {
  .kocluk { padding: 8px 12px 10px; }
  .ray li { padding: 5px 7px; font-size: 12px; }
  .ray li span { display: none; }
  .ray li.aktif span, .ray li.bitti:last-of-type span { display: inline; }
  .masa-sahne { padding: 14px 10px 10px; min-height: 420px; }
  .yuzey { padding: 26px 8px; }
  .cihaz-kutu { --k: .46; }
  .tabak, .tabak .tb { width: 62px; }
  .tabak .tb { height: 62px; padding: 6px; }
  .tabak figcaption { display: none; }
  .kasa-ic { grid-template-columns: 1fr; }
  .kasa-liste { border-right: 0; border-bottom: 1px solid var(--oluk-koyu); }
  .gunluk li { grid-template-columns: 56px minmax(0, 1fr); }
  .gunluk li .kay { grid-column: 2; }
  .gunluk li span.tx { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .tabak .tb, .bilet, .kart-garson, .gar-nokta, .gunluk li, .kagit div { animation: none; }
  .vizor .cizgi, .zil, .okc-yazici.calisiyor i::before, .tabak .buhar i, .cihaz-kutu.vurgu, .cihaz-kutu.tara::before, .p-tel.vurgu { animation: none; }
}

/* ---------- iyzico test kartları ---------- */
.testkart { max-width: 760px; }
.kart-no { font: 800 clamp(16px, 1.4vw, 20px)/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--nane-koyu); background: transparent; border: 2px solid currentColor; border-radius: 4px; padding: 6px 10px; cursor: pointer; white-space: nowrap; justify-self: end; width: max-content; }
.kart-no.bek { color: var(--kehribar-koyu); }
.kart-no.kopya { background: var(--nane-koyu); color: var(--beyaz); }
.kart-no.bek.kopya { background: var(--kehribar-koyu); }
.kart-no:hover { transform: translateY(-1px); }

/* demo sayfasında damga etiketleri düz durur (eğim yalnız tanıtım sayfasında) */
.sahne-ic .sm-fiyat.durum { transform: none; justify-self: end; width: max-content; }
.sahne-ic .sm-isim { min-width: 0; }

/* ---------- gerçek arka uç: dinamik QR, isteğe bağlı telefon bölmesi ---------- */
.e-qr svg { width: 100%; height: auto; display: block; }
.cihaz[data-ekran="olmadi"] .e-olmadi { opacity: 1; transform: none; }
.cihaz[data-ekran="online"] .e-online { opacity: 1; transform: none; }
.e-online .e-baslik { margin-top: 26px; }
.e-pill.e-lacivert { background: #112A4A; color: #fff; }
.e-zil-k { background: var(--kehribar); }
.masa-bag { margin: 0; text-align: center; font-size: 14px; color: var(--soluk); }
.masa-bag a, .masa-bag button { color: var(--murekkep-2); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.tel-not { margin: 8px 2px 0; font-size: 12px; color: var(--soluk); line-height: 1.35; }
.pane-b a, .pane-b button { color: inherit; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-decoration: underline; cursor: pointer; text-transform: none; }
/* telefon bölmesi varsayılan kapalı: ızgara iki sütun, açılınca üçüncü sütun */
.izgara { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "masa salon" "mutfak kasa" "gunluk gunluk"; }
.oyun.tel-acik .izgara { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) clamp(340px, 26vw, 400px); grid-template-areas: "masa salon tel" "mutfak kasa tel" "gunluk gunluk gunluk"; }
@media (max-width: 1099px) { .izgara, .oyun.tel-acik .izgara { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } }
.sv-pul.gercek { fill: var(--kehribar-koyu); }
.kagit .kq { width: 56px; margin: 4px auto 0; flex: none; }
.kagit .kq svg { width: 100%; height: auto; display: block; }

/* ---------- masa değiştirme, cihazın masaya konması ---------- */
.masa-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 1560px; margin: 12px auto 0; padding: 0 clamp(12px, 2vw, 28px); }
.masa-sec > span { font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; color: var(--soluk); margin-right: 4px; }
.masa-sec button { min-height: 38px; padding: 0 14px; font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--oluk-koyu); border-radius: 6px; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease); }
.masa-sec button:hover:not([disabled]) { transform: translateY(-1px); border-color: var(--murekkep); }
.masa-sec button[aria-pressed="true"] { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); box-shadow: var(--golge-tent); }
.masa-sec button[disabled] { opacity: .45; cursor: not-allowed; }
.masa-uyari { max-width: 1560px; margin: 10px auto 0; padding: 10px clamp(12px, 2vw, 28px); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--kehribar); background: linear-gradient(90deg, color-mix(in srgb, var(--kehribar) 16%, transparent), transparent 70%); font-size: 15px; }
.masa-uyari button { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--murekkep); border-radius: 4px; padding: 8px 10px; cursor: pointer; }
.sv-cihaz { fill: var(--murekkep-2); stroke: var(--beyaz); stroke-width: 1; opacity: .3; transition: opacity .3s var(--ease); }
.sv-cihaz-qr { fill: var(--beyaz); opacity: .3; }
.sv-masa-g.sec .sv-cihaz { opacity: 1; }
.sv-masa-g.sec .sv-cihaz-qr { opacity: 1; }
.salon-mini .sv-masa-g { cursor: pointer; }
.salon-mini .sv-masa-g:not(.sec) .sv-masa, .salon-mini .sv-masa-g:not(.sec) .sv-no { opacity: .6; }
.salon-mini .sv-masa-g.sec .sv-halka { stroke-width: 4; opacity: 1; }
.salon-mini .sv-masa-g.sec .sv-masa { fill: var(--beyaz); stroke-width: 2.5; }
.sv-masa-g.sec.gel .sv-halka { animation: gel-halka .9s var(--ease) 2; }
@keyframes gel-halka { 0% { stroke-width: 2; } 50% { stroke-width: 9; } 100% { stroke-width: 4; } }
.cihaz[data-ekran="baglan"] .e-baglan { opacity: 1; transform: none; }
.e-yukle { display: flex; gap: 8px; margin: 18px 0 14px; }
.e-yukle i { width: 12px; height: 12px; border-radius: 50%; background: var(--oluk-koyu); animation: yukle 1s ease-in-out infinite; }
.e-yukle i:nth-child(2) { animation-delay: .15s; } .e-yukle i:nth-child(3) { animation-delay: .3s; }
@keyframes yukle { 50% { background: var(--nane); transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .sv-masa-g.sec.gel .sv-halka, .e-yukle i { animation: none; } }

/* ---------- kaydırma kararlılığı ---------- */
#kocluk-metin { min-height: 2.8em; }
.kocluk-act { min-height: 44px; }
@media (max-width: 1099px) {
  /* telefonda koçluk çubuğu sayfayla akar (yapışkan olursa yüksekliği değiştikçe içerik kayıyordu); ilerleme şeridi yine görünür kalır */
  .kocluk { display: contents; }
  .ray { position: sticky; top: var(--oluk-h); z-index: 9; background: color-mix(in srgb, var(--zemin) 94%, white); margin: 0; padding: 6px clamp(12px, 2vw, 28px) 4px; border-bottom: 1px solid var(--oluk-koyu); }
  .kocluk-ic { padding: 10px clamp(12px, 2vw, 28px) 4px; }
  .tel-ic { min-height: 560px; }
}
.pane, .kds, .kasa, .gunluk { overflow-anchor: auto; }

/* ---------- masa doluluğu (paylaşımlı demo masaları) ---------- */
.sv-nokta { fill: var(--kehribar); stroke: var(--beyaz); stroke-width: 1.5; display: none; }
.sv-masa-g.mesgul .sv-nokta { display: block; }
.sv-doluk { fill: var(--kehribar-koyu); font: 800 10px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-anchor: middle; text-transform: uppercase; }
.sv-masa-g.mesgul .sv-masa { stroke: var(--kehribar-koyu); stroke-dasharray: 5 3; }
.masa-sec button small, .masa-kartlar .tent small { display: block; margin-top: 3px; font: 700 10px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--kehribar-koyu); text-transform: uppercase; }
.masa-sec button { min-height: 44px; }
.masa-sec button.mesgul { border-color: var(--kehribar); box-shadow: inset 0 -3px 0 var(--kehribar); }
.masa-sec button[aria-pressed="true"] small { color: color-mix(in srgb, var(--beyaz) 80%, var(--murekkep)); }
.masa-kartlar .tent.mesgul { border-color: var(--kehribar-koyu); }
.masa-kartlar .tent small { text-align: center; }
.oneri { margin: 6px 0 10px; font-size: 16px; }
.oneri b { color: var(--nane-koyu); }
.masa-kartlar .tent.mesgul { flex-direction: column; justify-content: center; gap: 0; padding-top: 6px; padding-bottom: 6px; }

/* ---------- ödemeden kalkma alarmı (walkout) ---------- */
.p-garson { grid-area: garson; border-color: var(--hata); }
.p-garson .pane-b { background: var(--hata); }
.p-garson .oturum { color: color-mix(in srgb, var(--beyaz) 85%, var(--hata)); }
.oyun.alarm .izgara { grid-template-areas: "garson garson" "masa salon" "mutfak kasa" "gunluk gunluk"; }
.oyun.alarm.tel-acik .izgara { grid-template-areas: "garson garson tel" "masa salon tel" "mutfak kasa tel" "gunluk gunluk gunluk"; }
@media (max-width: 1099px) { .oyun.alarm .izgara, .oyun.alarm.tel-acik .izgara { grid-template-areas: none; } .oyun[data-sek="masa"] .p-garson { display: flex; } }
.alarm-pano { padding: 14px 16px 16px; display: grid; gap: 10px; }
.alarm-baslik { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 clamp(20px, 2vw, 26px)/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--hata); }
.alarm-zil { width: 22px; height: 22px; border-radius: 50%; background: var(--hata); animation: alarm-yan .7s ease-in-out infinite; flex: none; }
.alarm-kalem { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--murekkep-2); }
.alarm-kalem span b { font-weight: 600; color: var(--murekkep); }
.alarm-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.alarm-dugmeler .tent { min-height: 46px; padding: 0 16px; font-size: 15px; }
.alarm-not { margin: 0; font-size: 13px; color: var(--soluk); }
@keyframes alarm-yan { 50% { opacity: .25; transform: scale(.8); } }
.sv-masa-g.alarm .sv-halka { stroke: var(--hata); opacity: 1; stroke-width: 5; animation: alarm-halka .7s ease-in-out infinite; }
.sv-masa-g.alarm .sv-masa { stroke: var(--hata); fill: color-mix(in srgb, var(--hata) 12%, var(--beyaz)); }
@keyframes alarm-halka { 50% { opacity: .2; } }
.cihaz[data-alarm="1"] .e-zil { background: var(--hata); animation: alarm-yan .7s ease-in-out infinite; }
.cihaz[data-alarm="1"] .e-personel .e-pill { background: var(--hata); color: var(--beyaz); }
.cihaz[data-alarm="1"] .e-personel .e-baslik { color: var(--hata); }
@media (prefers-reduced-motion: reduce) { .alarm-zil, .sv-masa-g.alarm .sv-halka, .cihaz[data-alarm="1"] .e-zil { animation: none; } }