/* 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" "gunluk gunluk"; }
.p-masa { grid-area: masa; } .p-salon { grid-area: salon; } .p-gunluk { grid-area: gunluk; }
/* mekân paneli: mutfak şeridi (üst) · salon planı · kasa şeridi (alt) — dört panel iki panele indi */
.mekan { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mekan-serit { border-top: 1.5px solid var(--murekkep); }
.mekan-mutfak { border-top: 0; border-bottom: 1.5px solid var(--murekkep); }
.serit-b { margin: 0; display: flex; align-items: baseline; gap: 10px; padding: 7px 12px 0; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep); }
.serit-b small { font-size: 11px; letter-spacing: .1em; color: var(--soluk); }
.mekan .kds { flex: none; flex-direction: row; align-items: flex-start; gap: 10px; min-height: 96px; max-height: none; padding: 8px 12px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.mekan .kds .bilet { flex: 0 0 236px; }
.mekan .kds-bos { margin: 8px auto; font-size: 14px; }
.mekan .kds-bos b { font-size: 15px; }
.mekan .salon-mini { flex: 1; padding: 8px 12px; }
.mekan .kasa { flex: none; min-height: 0; }
.mekan .kasa-ic { grid-template-columns: 34% 66%; }
.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; }

/* ---------- 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 small.mod { color: var(--kehribar-koyu); font-weight: 700; letter-spacing: .02em; }
.bilet li small.not { font-style: italic; color: var(--murekkep-2); }
.bilet li .koltuk { font: 800 10px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--beyaz); background: var(--murekkep-2); border-radius: 3px; padding: 2px 4px; vertical-align: 2px; font-style: normal; }
.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 .k-robot { color: var(--nane-koyu); }
.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: masanın hikâyesi ---------- */
.ozet-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.ozet-kart { margin: 0; background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 10px; padding: 14px 16px 16px; box-shadow: var(--golge-tent); min-width: 0; }
.ozet-kart.genis { grid-column: 1 / -1; }
.ozet-kart figcaption { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--kehribar-koyu); margin-bottom: 10px; }
.zaman-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.zaman { display: block; width: 100%; min-width: 720px; height: auto; }
.z-ad { font: 700 17px "Barlow", sans-serif; fill: var(--murekkep); }
.z-sn { font: 800 15px "Barlow Condensed", sans-serif; letter-spacing: .06em; fill: var(--kehribar-koyu); }
.z-faz { font: 800 12px "Barlow Condensed", sans-serif; letter-spacing: .14em; }
.z-g { font: 800 9px "Barlow Condensed", sans-serif; fill: #fff; }
.z-gl { font: 700 11px "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.adimsayar { margin-top: 10px; }
.adim-buyuk { display: flex; align-items: baseline; gap: 8px; }
.adim-buyuk b { font: 800 40px/1 "Barlow Condensed", sans-serif; letter-spacing: .01em; color: var(--murekkep); }
.adim-buyuk span { font: 700 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.adim-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adim-liste li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; font-size: 14px; }
.adim-liste li i { height: 2px; background-image: radial-gradient(circle, var(--oluk-koyu) 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; align-self: center; }
.adim-liste li b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.iz-not small { display: block; margin-top: 4px; font-size: 12px; color: var(--soluk); }
.halka-yuva { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: center; }
.halka { width: 180px; height: 180px; display: block; }
.h-tutar { font: 800 30px "Barlow Condensed", sans-serif; letter-spacing: .01em; fill: var(--murekkep); }
.h-alt { font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; fill: var(--soluk); }
.halka-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.halka-liste li { display: flex; align-items: center; gap: 8px; font-size: 15px; border-bottom: 1px dotted var(--oluk-koyu); padding-bottom: 5px; }
.halka-liste i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.halka-liste span { flex: 1; min-width: 0; }
.halka-liste b { font-variant-numeric: tabular-nums; }
.ozet-harita svg { width: 100%; height: auto; display: block; }
.ozet-harita .sv-masa-g { cursor: default; pointer-events: none; }
.sv-iz { fill: none; stroke: var(--nane-koyu); stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; stroke-linejoin: round; opacity: .9; animation: iz-akis 1.6s linear infinite; }
.sv-iz-bas { fill: var(--nane-koyu); }
@keyframes iz-akis { to { stroke-dashoffset: -22; } }
.iz-not { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--murekkep-2); }
.iz-not b.nane { color: var(--nane-koyu); } .iz-not b.kehribar { color: var(--kehribar-koyu); }
.ozet-damgalar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.damga-k { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px; border: 3px solid var(--oluk-koyu); border-radius: 8px; color: var(--oluk-koyu); font: 800 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; transform: rotate(-2deg); background: var(--beyaz); }
.damga-k small { font-size: 11px; letter-spacing: .1em; font-weight: 700; }
.damga-k.nane { color: var(--nane-koyu); border-color: var(--nane-koyu); }
.damga-k.kehribar { color: var(--kehribar-koyu); border-color: var(--kehribar-koyu); }
.damga-k.murekkep { color: var(--murekkep); border-color: var(--murekkep); }
.damga-k:nth-child(2n) { transform: rotate(2deg); }
@media (max-width: 760px) { .ozet-izgara { grid-template-columns: 1fr; } .halka-yuva { grid-template-columns: 1fr; justify-items: center; } .halka-liste { width: 100%; } .damga-k { font-size: 18px; padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .sv-iz { animation: none; } }

/* ---------- 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="mekan"] .p-salon, .oyun[data-sek="gunluk"] .p-gunluk { display: flex; }
  .mekan .kds .bilet { flex-basis: 220px; }
  .oyun { padding-bottom: 76px; }
  .izgara { gap: 12px; }
  .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 { animation: none; }
}

/* ---------- iyzico test kartları ---------- */
.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; }
.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; }
@media (max-width: 1099px) { .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; }
}
.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; }
.p-garson.kirmizi { border-color: var(--hata); }
.p-garson.kirmizi .pane-b { background: var(--hata); }
.p-garson.kirmizi .oturum { color: color-mix(in srgb, var(--beyaz) 85%, var(--hata)); }
.oyun.alarm .izgara { grid-template-areas: "garson garson" "masa salon" "gunluk gunluk"; }
@media (max-width: 1099px) { .oyun.alarm .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; } }

/* ---------- garson panosu: çağrılar ve adisyon (−/+) ---------- */
.cagri-blok { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1.5px solid var(--kehribar-koyu); border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--kehribar) 16%, transparent), transparent 80%); }
.cagri-blok b { font: 800 18px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cagri-blok small { display: block; font-size: 13px; color: var(--soluk); margin-top: 2px; }
.adisyon-b { margin: 4px 0 0; font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); display: flex; justify-content: space-between; }
.adisyon-s { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--oluk); font-size: 15px; }
.adisyon-s .adet { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.adisyon-s .adet button { width: 34px; height: 34px; border: 1.5px solid var(--murekkep); border-radius: 6px; background: var(--beyaz); color: var(--murekkep); font: 800 20px/1 "Barlow Condensed", sans-serif; cursor: pointer; }
.adisyon-s .adet button:disabled { opacity: .35; cursor: not-allowed; }
.adisyon-s .adet b { min-width: 26px; text-align: center; font: 800 18px/1 "Barlow Condensed", sans-serif; }
.adisyon-s .tut { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.sv-masa-g.cagri .sv-halka { stroke: var(--kehribar-koyu); opacity: 1; stroke-width: 5; animation: alarm-halka .8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sv-masa-g.cagri .sv-halka { animation: none; } }

/* ---------- POS terminali: TR Karekod'u terminal üretir ---------- */
.pos-t { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed var(--oluk-koyu); border-radius: 8px; background: color-mix(in srgb, var(--beyaz) 70%, var(--zemin)); transition: border-color .3s var(--ease), background .3s var(--ease); }
.pos-cihaz { flex: none; width: 54px; height: 72px; border-radius: 9px; background: var(--murekkep); padding: 6px 5px 0; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 6px 12px -8px rgba(17,42,74,.6); }
.pos-ekran { flex: 1; border-radius: 4px; background: var(--zemin); display: grid; place-items: center; overflow: hidden; font: 800 11px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--murekkep-2); }
.pos-ekran svg { width: 100%; height: 100%; display: block; }
.pos-cihaz i { display: block; height: 14px; margin: 0 -1px 5px; background: repeating-linear-gradient(90deg, #44546A 0 5px, transparent 5px 7px); border-radius: 2px; opacity: .7; }
.pos-metin { min-width: 0; } .pos-metin b { display: block; font: 800 15px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep); }
.pos-metin span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--murekkep-2); }
.pos-t[data-durum="bos"] { opacity: .75; } .pos-t[data-durum="bos"] .pos-cihaz { background: var(--soluk); box-shadow: none; }
.pos-t[data-durum="istek"], .pos-t[data-durum="qr"] { border-style: solid; border-color: var(--kehribar-koyu); background: color-mix(in srgb, var(--kehribar) 12%, var(--beyaz)); }
.pos-t[data-durum="qr"] .pos-cihaz { animation: pos-nabiz 1.8s ease-in-out infinite; }
.pos-t[data-durum="ok"] { border-style: solid; border-color: var(--nane-koyu); background: color-mix(in srgb, var(--nane) 14%, var(--beyaz)); }
.pos-t[data-durum="ok"] .pos-ekran { background: var(--nane); color: var(--murekkep); }
@keyframes pos-nabiz { 50% { transform: translateY(-2px); box-shadow: 0 10px 14px -8px rgba(240,162,59,.7); } }
@media (prefers-reduced-motion: reduce) { .pos-t[data-durum="qr"] .pos-cihaz { animation: none; } }
#qr-trkk { cursor: pointer; }
.e-bekle { display: block; padding: 40px 8px; text-align: center; font: 700 14px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--kehribar-koyu); animation: e-bekle 1.2s ease-in-out infinite; }
@keyframes e-bekle { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .e-bekle { animation: none; } }
/* POS terminali karekodu hazırlarken (≈3 sn): ekranda dönen noktalar, altında dolan adım şeridi */
.pos-nokta { display: inline-flex; gap: 4px; } .pos-nokta i { width: 6px; height: 6px; border-radius: 50%; background: var(--kehribar-koyu); animation: pos-nokta 1s ease-in-out infinite; }
.pos-nokta i:nth-child(2) { animation-delay: .15s; } .pos-nokta i:nth-child(3) { animation-delay: .3s; }
@keyframes pos-nokta { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
.pos-adim { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pos-adim li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.25; color: var(--soluk); }
.pos-adim li::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--oluk-koyu); box-sizing: border-box; background: transparent; }
.pos-adim li em { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--oluk); overflow: hidden; position: relative; opacity: 0; }
.pos-adim li em::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--kehribar); }
.pos-adim[data-d="bos"] { display: none; }
.pos-adim[data-d="istek"] li[data-a="1"], .pos-adim[data-d="qr"] li, .pos-adim[data-d="ok"] li { color: var(--murekkep); }
.pos-adim[data-d="istek"] li[data-a="1"]::before, .pos-adim[data-d="qr"] li::before, .pos-adim[data-d="ok"] li::before { background: var(--nane); border-color: var(--nane); }
.pos-adim[data-d="istek"] li[data-a="2"] { color: var(--murekkep); font-weight: 600; } .pos-adim[data-d="istek"] li[data-a="2"]::before { border-color: var(--kehribar); animation: pos-nokta 1s ease-in-out infinite; }
.pos-adim[data-d="istek"] li[data-a="2"] em { opacity: 1; } .pos-adim[data-d="istek"] li[data-a="2"] em::after { animation: pos-dol 3s linear forwards; }
@keyframes pos-dol { to { width: 100%; } }
.pos-ekran svg { animation: pos-ac .5s ease-out; } @keyframes pos-ac { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pos-nokta i, .pos-adim li em::after, .pos-adim li::before, .pos-ekran svg { animation: none !important; } .pos-adim[data-d="istek"] li[data-a="2"] em::after { width: 60%; } }

/* POS kasada kalır; yalnızca QR / onay paketi PAYON cihazına uçar */
.pos-paket { position: fixed; z-index: 70; margin: 0; padding: 3px; border-radius: 7px; background: var(--beyaz); border: 1.5px solid var(--kehribar-koyu); box-shadow: 0 8px 14px -6px rgba(17,42,74,.5); display: grid; place-items: center; pointer-events: none; will-change: transform; }
.pos-paket svg { width: 100%; height: 100%; display: block; } .pos-paket b { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; color: var(--murekkep); }
.pos-paket.ok { background: var(--nane); border-color: var(--nane-koyu); } .pos-paket.ok b { font-size: 20px; color: var(--beyaz); }
.pos-iz { position: fixed; z-index: 69; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--kehribar); pointer-events: none; animation: pos-iz .7s ease-out forwards; }
.pos-iz.ok { background: var(--nane); } @keyframes pos-iz { to { transform: scale(.2); opacity: 0; } }
.pos-halka { position: fixed; z-index: 69; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--nane); pointer-events: none; animation: pos-halka .9s ease-out forwards; }
@keyframes pos-halka { to { transform: scale(9); opacity: 0; } }
.pos-cihaz.gonder { animation: pos-gonder .5s ease-out 1; } @keyframes pos-gonder { 30% { transform: scale(.94); } 60% { transform: scale(1.06); } }
/* küçük POS */
.pos-cihaz { width: 38px !important; height: 54px !important; padding: 5px 4px 0 !important; border-radius: 7px !important; gap: 3px !important; position: relative; }
.pos-cihaz i { height: 12px !important; background: radial-gradient(circle, #8FA0BC 1.3px, transparent 1.7px) 0 0 / 8px 6px !important; opacity: .85 !important; margin: 0 1px 3px !important; }
.pos-ekran { font-size: 8px !important; }
.pos-t { gap: 10px !important; padding: 8px 10px !important; }
.pos-metin b { font-size: 13px !important; } .pos-metin span { font-size: 12px !important; margin-top: 2px !important; }
.pos-adim { margin-top: 5px !important; gap: 3px !important; } .pos-adim li { font-size: 11.5px !important; }
.e-bekle { line-height: 1.35 !important; }
@media (prefers-reduced-motion: reduce) { .pos-cihaz.gonder { animation: none; } }
/* garson POS'u taşır: kasadaki yuva boşalır, garsonun elinde küçük POS görünür */
.pos-t[data-durum="garsonda"] { border-style: dashed; border-color: var(--murekkep-2); }
.pos-t[data-durum="garsonda"] .pos-cihaz { opacity: .22; background: transparent !important; border: 1.5px dashed var(--murekkep-2); box-shadow: none; }
.pos-t[data-durum="garsonda"] .pos-cihaz * { opacity: 0; }
.garson .pos-el { opacity: 0; transition: opacity .2s linear; } .garson .pos-el rect { fill: var(--murekkep); stroke: var(--beyaz); stroke-width: 1; } .garson .pos-el rect.e { fill: var(--nane); stroke: none; }
.garson.posli .pos-el { opacity: 1; }
/* haritada KASA'daki POS: boşta soluk, satış isteğinde nokta, karekod hazırken kehribar, onayda yeşil, garsondayken boş yuva */
.sv-pos { transform-box: fill-box; transform-origin: center; }
.sv-pos .g { fill: var(--murekkep); stroke: var(--beyaz); stroke-width: 1.2; } .sv-pos .e { fill: var(--zemin); } .sv-pos .d circle { fill: #8FA0BC; }
.sv-pos[data-durum="bos"] .g { fill: var(--murekkep-2); }
.sv-pos[data-durum="istek"] .e { fill: var(--kehribar); animation: pos-ekran-nabiz .6s ease-in-out infinite; }
.sv-pos[data-durum="qr"] .e { fill: var(--beyaz); stroke: var(--kehribar); stroke-width: 1.6; animation: pos-ekran-nabiz 1.2s ease-in-out infinite; }
.sv-pos[data-durum="ok"] .e { fill: var(--nane); } .sv-pos[data-durum="ok"] .g { stroke: var(--nane); stroke-width: 2; }
.sv-pos[data-durum="garsonda"] { opacity: .35; } .sv-pos[data-durum="garsonda"] .g { fill: none; stroke: var(--murekkep-2); stroke-dasharray: 3 2.4; } .sv-pos[data-durum="garsonda"] .e, .sv-pos[data-durum="garsonda"] .d { opacity: 0; }
.sv-pos.gonder { animation: pos-gonder .6s ease-out 1; } @keyframes pos-gonder { 30% { transform: scale(.88); } 65% { transform: scale(1.18); } }
@keyframes pos-ekran-nabiz { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sv-pos .e, .sv-pos.gonder { animation: none !important; } }

/* ======== İki cihaz · tek ekran kokpiti ========
   Demo iki cihazla çalışır: bu ekran (masa cihazı, mutfak, salon, kasa, günlük) ve müşterinin kendi telefonu. Telefon bölmesi yok; cihazdaki QR okutulur.
   Masaüstünde sahne görünür alana oturur (yakınlaştırma/küçültme yok): cihaz kompakt, kasa üç parçalı tezgâh, günlük yan sütun. */

/* iki cihaz ipucu: cihaz hangi QR'ı gösteriyorsa telefonla okutulacak olan o */
.iki { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--nane) 16%, var(--beyaz)); border: 1.5px solid var(--nane-koyu); color: var(--murekkep); font: 800 14px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; align-self: center; text-align: center; }
.iki-tel { flex: none; position: relative; width: 12px; height: 20px; border: 2px solid var(--murekkep); border-radius: 3px; animation: iki-nabiz 1.6s ease-in-out infinite; }
.iki-tel::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--murekkep); }
@keyframes iki-nabiz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .iki-tel { animation: none; } }

/* kasa tezgâhı: adisyon kâğıdı · POS terminali · yazar kasa (üç nesne yan yana) */
.tezgah { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 10px 10px; }
.tz { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--beyaz); border: 1px solid var(--oluk-koyu); border-radius: 8px; padding: 7px 10px 8px; overflow: hidden; }
.tz h4 { margin: 0 0 5px; padding: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep); }
.tz h4 small { font: 700 11px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; color: var(--soluk); text-align: right; display: inline-flex; align-items: center; gap: 6px; }
.tz h4 small .pul { font-size: 11px; padding: 3px 5px; }
.tz .tz-ic { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.tz-ads { background: var(--beyaz); border-style: dashed; border-radius: 3px 3px 10px 10px; }
.tz-ads::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(135deg, transparent 50%, var(--zemin) 50%) 0 0 / 8px 6px, linear-gradient(225deg, transparent 50%, var(--zemin) 50%) 0 0 / 8px 6px; }
.tz-ads .kd-baslik b { font-size: 15px; }
.tz-ads .kd-ln { font-size: 13px; padding: 1px 0; }
.tz-ads .kd-top { font-size: 17px; padding-top: 4px; }
.tz-ads .kd-not { font-size: 12px; margin-top: 2px; }
.tz-ads .kd-bos { margin: 6px 0; font-size: 13px; }
.tezgah .pos-t { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0 !important; padding: 7px 10px 8px !important; }
.tezgah .pos-t .pos-metin { display: block; }
.pos-glif { flex: none; align-self: center; width: 14px; height: 20px; border: 2px solid var(--murekkep-2); border-radius: 3px; position: relative; background: var(--beyaz); }
.pos-glif::before { content: ""; position: absolute; left: 1px; right: 1px; top: 2px; height: 5px; background: var(--murekkep-2); border-radius: 1px; }
.pos-glif::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 2px; height: 5px; background: repeating-linear-gradient(90deg, var(--oluk-koyu) 0 3px, transparent 3px 4px); }
.pos-t[data-durum="qr"] .pos-glif::before, .pos-t[data-durum="istek"] .pos-glif::before { background: var(--kehribar); }
.pos-t[data-durum="ok"] .pos-glif::before { background: var(--nane); }
.tz-okc .okc { margin: 0; padding: 0; border: 0; flex: 1; min-height: 0; flex-direction: column; gap: 0; }
.tz-okc .okc-yazici { width: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0; }
.tz-okc .okc-yazici i { flex: 1; height: 14px; border-radius: 4px 4px 0 0; }
.tz-okc .okc-yazici i::after { top: 8px; height: 2px; }
.tz-okc .kagit { flex: 1; height: auto; min-height: 90px; margin: 0 8px; }

@media (min-width: 1100px) {
  .izgara, .masa-sec, .masa-uyari, .kocluk-ic, .ray { max-width: 1900px; }
  .oyun { display: flex; flex-direction: column; height: max(720px, calc(100dvh - var(--oluk-h))); padding-bottom: 10px; box-sizing: border-box; }
  .kocluk { position: static; flex: none; padding: 6px clamp(12px, 2vw, 28px) 8px; }
  .ray { margin-bottom: 5px; }
  .ray li { padding: 4px 8px; font-size: 12px; }
  .kocluk-ic { gap: 6px 14px; }
  #kocluk-metin { min-height: 0; max-height: 4.1em; overflow-y: auto; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.3; flex-basis: 360px; }
  #kocluk-metin small { font-size: .88em; }
  .kocluk-act { min-height: 0; gap: 8px; }
  .kocluk-act .tent { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .masa-sec { flex: none; margin-top: 6px; gap: 6px; width: 100%; box-sizing: border-box; }
  .masa-sec button { min-height: 32px; padding: 0 12px; font-size: 14px; }
  .masa-uyari { flex: none; margin-top: 6px; padding-top: 6px; padding-bottom: 6px; width: 100%; box-sizing: border-box; font-size: 14px; }

  .izgara { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; margin-top: 8px; gap: 0 10px;
    grid-template-columns: clamp(270px, 19vw, 340px) minmax(0, 1fr) clamp(250px, 19vw, 340px); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "masa salon garson" "masa salon gunluk"; }
  .oyun.alarm .izgara { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "masa salon garson" "masa salon gunluk"; }
  .p-masa, .p-salon { grid-row: 1 / span 2; }
  .p-garson { margin-bottom: 10px; max-height: 46vh; overflow-y: auto; }
  .alarm-pano { padding: 10px 12px 12px; gap: 8px; }
  .alarm-baslik { font-size: 19px; }
  .alarm-dugmeler .tent { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .pane { min-height: 0; }
  .pane-b { height: 32px; font-size: 15px; padding: 0 12px; }
  .oturum { font-size: 11px; }
  .pane-b > span:first-child { white-space: nowrap; }
  .p-gunluk .oturum, .p-garson .oturum { display: none; }

  /* masa: yalnız cihaz, ipucu, masadaki yemekler */
  .p-masa .masa-sahne { min-height: 0; padding: 8px 10px; gap: 6px; overflow: hidden; }
  .yuzey { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "c c" "s r"; grid-template-rows: auto auto; align-content: center; justify-items: center; align-items: start; gap: 8px 6px; padding: 14px 8px 10px; }
  .sandalye, .sen { display: none; }
  .yuzey .cihaz-kutu { grid-area: c; --k: .66; }
  #tabak-sol { grid-area: s; } #tabak-sag { grid-area: r; }
  .tabaklar { min-height: 0; gap: 6px; }
  .tabak, .tabak .tb { width: 50px; }
  .tabak .tb { height: 50px; padding: 4px; }
  .tabak figcaption { display: none; }
  .tabak .adet { min-width: 20px; padding: 3px 4px; font-size: 12px; }
  .masa-not { margin: 0; min-height: 0; font-size: 13.5px; line-height: 1.3; }
  .masa-bag { font-size: 12px; }
  .kart-garson { max-height: calc(100% - 20px); overflow-y: auto; padding: 10px 12px 12px; }
  .iki { font-size: 13px; padding: 6px 10px; }

  /* mekân: mutfak şeridi · salon planı (esner) · kasa tezgâhı */
  .mekan .kds { height: 128px; min-height: 0; padding: 4px 10px 8px; }
  .mekan .kds .bilet { flex: 0 0 340px; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .mekan .bilet > header { padding: 5px 10px; } .mekan .bilet > header b { font-size: 15px; }
  .mekan .bilet ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 2px 10px 4px; }
  .mekan .bilet li { font-size: 13px; padding: 2px 0; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 6px; }
  .mekan .bilet li small { font-size: 11px; }
  .mekan .bilet footer { padding: 0 10px 5px; font-size: 12px; }
  .mekan .kds-bos { margin: auto; }
  .mekan .salon-mini { flex: 1; min-height: 0; padding: 2px 8px; }
  .salon-mini svg { width: 100%; height: 100%; max-height: 100%; }
  .serit-b { padding: 5px 12px 0; }
  .mekan .kasa { flex: none; height: clamp(150px, 20dvh, 220px); min-height: 0; }
  .tezgah { height: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); padding: 6px 10px 8px; }

  /* günlük: dar sütun, kayıt iki satır */
  .p-gunluk .gunluk { flex: 1; min-height: 0; max-height: none; padding: 2px 12px 8px; font-size: 13px; }
  .gunluk li { grid-template-columns: 58px minmax(0, 1fr); gap: 0 8px; padding: 5px 0; }
  .gunluk li .kay, .gunluk li span.tx { grid-column: 2; }
}
/* telefon: Mekân sekmesinde tezgâh dikey dizilir */
@media (max-width: 1099px) {
  .tz-ads, .tz-pos, .tz-okc { min-height: 0; }
  .tz-okc .kagit { height: 168px; }
}

/* ======== Giriş ekranı: masaüstünde tek bakışta ======== */
@media (min-width: 1100px) {
  #giris { padding-top: 14px; padding-bottom: 14px; }
  #giris .harfler.buyuk { font-size: clamp(30px, 3vw, 46px); line-height: 1.05; }
  #giris-baslik .satir { display: inline; }
  #giris-baslik .satir + .satir::before { content: " · "; }
  #giris .giris-alt { margin-top: 10px; font-size: clamp(15px, 1.15vw, 18px); max-width: 84ch; }
  #giris .salon-kutu { margin-top: 14px; align-items: start; }
  #giris .salon svg { width: auto; max-width: 100%; max-height: calc(100dvh - 360px); margin: 0 auto; }
  #giris .masa-sec-b { margin-top: 12px; font-size: clamp(22px, 2vw, 30px); }
  #giris .masa-kartlar { margin-top: 4px; }
  #giris .pano-dip { margin-top: 8px; font-size: 14px; }
  .giris-not .menu-satirlar .satir-m { padding-top: 6px; padding-bottom: 6px; }
}

/* geniş ekran: mutfak biletleri salon planının yanında dikey akar; plan yüksekliği kazanır */
@media (min-width: 1200px) {
  .mekan { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 30%, 330px); grid-template-rows: minmax(0, 1fr) auto; }
  .mekan .salon-mini { grid-column: 1; grid-row: 1; }
  .mekan-mutfak { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: 0; border-left: 1.5px solid var(--murekkep); }
  .mekan-kasa { grid-column: 1 / -1; grid-row: 2; }
  .mekan .kds { flex: 1; height: auto; min-height: 0; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; gap: 8px; }
  .mekan .kds .bilet { flex: none; max-height: none; overflow: visible; }
  .mekan .bilet ul { grid-template-columns: 1fr; }
  .mekan .bilet li { font-size: 14px; }
}

/* ======== Oturum raporu: masaüstünde tek ekran ======== */
#ozet { scroll-margin-top: var(--oluk-h); }
.ozet-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ozet-ust { margin: 0 0 2px; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .16em; color: var(--kehribar-koyu); }
#ozet .harfler.orta { margin: 0; line-height: 1.05; }
.ozet-damgalar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ozet-damgalar .damga-k { font-size: 17px; padding: 5px 11px; border-width: 2.5px; }
.ozet-kart figcaption small { margin-left: 8px; font-size: 12px; letter-spacing: .08em; color: var(--soluk); }
.zaman-kart .zaman { min-width: 0; }
.halka-yuva { grid-template-columns: 130px minmax(0, 1fr); }
.halka { width: 130px; height: 130px; }
.iz-cip { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.iz-cip li { padding: 4px 8px; border: 1px solid var(--oluk-koyu); border-radius: 999px; font-size: 12.5px; color: var(--murekkep-2); font-variant-numeric: tabular-nums; }
.iz-cip li b { margin-right: 6px; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep); }
.kiyas-buyuk { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.kiyas-buyuk b { font: 800 56px/1 "Barlow Condensed", sans-serif; letter-spacing: .01em; }
.kiyas-buyuk b small { margin-left: 4px; font-size: 22px; color: var(--soluk); }
.kiyas-buyuk span { font-size: 14px; line-height: 1.3; color: var(--murekkep-2); max-width: 24ch; }
.kiyas.gelmeyen .kiyas-buyuk b { color: var(--nane-koyu); } .kiyas.gelen .kiyas-buyuk b { color: var(--kehribar-koyu); }
.kiyas-sat { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 4px 0; font-size: 13.5px; }
.kiyas-sat span { font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep); }
.kiyas-sat b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kiyas-cubuk { height: 12px; border-radius: 6px; background: var(--kece); overflow: hidden; }
.kiyas-cubuk i { display: block; height: 100%; border-radius: 6px; transform-origin: 0 50%; animation: kiyas-dol .9s var(--ease) both; }
.kiyas-cubuk i.p { background: var(--nane); } .kiyas-cubuk i.k { background: var(--kehribar); animation-delay: .15s; }
@keyframes kiyas-dol { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .kiyas-cubuk i { animation: none; } }
.kiyas .iz-not { margin-top: auto; padding-top: 8px; font-size: 13.5px; }
@media (min-width: 1100px) {
  #ozet { height: max(700px, calc(100dvh - var(--oluk-h))); box-sizing: border-box; padding: 0; display: flex; }
  #ozet:not([hidden]) { display: flex; }
  #ozet .ozet-ic { width: 100%; max-width: 1900px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; padding-bottom: 10px; min-height: 0; }
  #ozet .harfler.orta { font-size: clamp(28px, 2.6vw, 40px); }
  .ozet-izgara { flex: 1; min-height: 0; margin-top: 0; gap: 12px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr) minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr); }
  .ozet-kart { display: flex; flex-direction: column; min-height: 0; padding: 10px 14px 12px; }
  .ozet-kart figcaption { margin-bottom: 6px; }
  .ozet-kart.genis { padding-bottom: 6px; }
  .zaman-kaydir { overflow-x: auto; overflow-y: hidden; }
  .ozet-harita { flex: 1; min-height: 0; }
  .ozet-harita svg { width: 100%; height: 100%; }
  .halka-yuva { flex: 1; align-content: center; }
  #ozet .pano-dip { margin: 0; max-width: none; font-size: 13px; }
  #ozet .kartlar { margin-top: 0; flex: none; }
  #ozet .kartlar .tent { min-height: 44px; }
}
.kiyas-kutu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.kiyas-kutu div { padding: 10px 12px; border: 1.5px dashed var(--oluk-koyu); border-radius: 8px; }
.kiyas-kutu b { display: block; font: 800 30px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; color: var(--nane-koyu); font-variant-numeric: tabular-nums; }
.kiyas-kutu div + div b { color: var(--kehribar-koyu); }
.kiyas-kutu span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--murekkep-2); }
@media (min-width: 1100px) {
  .kiyas-cubuk { height: 20px; border-radius: 10px; } .kiyas-cubuk i { border-radius: 10px; }
  .kiyas-sat { padding: 8px 0; }
  .ozet-kart:nth-of-type(2) .halka-yuva { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .ozet-kart:nth-of-type(2) .halka { width: min(210px, 100%); height: auto; aspect-ratio: 1; }
  .ozet-kart:nth-of-type(2) .halka-liste { width: 100%; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .kiyas .iz-not { display: none; }
  .kiyas-buyuk { margin-bottom: 4px; } .kiyas-buyuk b { font-size: 44px; }
  .kiyas-sat { padding: 5px 0; } .kiyas-kutu { margin-top: 8px; } .kiyas-kutu b { font-size: 26px; }
  .ozet-kart:nth-of-type(2) .halka { width: min(160px, 100%); }
}

/* ======== iyzico test kartları: istendiğinde açılan çekmece ======== */
.menu-dugme { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--murekkep-2); font: 700 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
@media (max-width: 760px) { .menu-dugme { margin-left: auto; font-size: 14px; } }
@media (max-width: 520px) { .tabela-not { display: none; } }
.menu-dugme:hover, .menu-dugme[aria-expanded="true"] { border-bottom-color: var(--kehribar); color: var(--murekkep); }
.tk-glif { width: 18px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; flex: none; }
.tk-glif::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
.cekmece-ort { position: fixed; inset: 0; z-index: 38; background: transparent; }
.cekmece { position: fixed; z-index: 40; top: var(--oluk-h); right: 0; bottom: 0; width: min(410px, 100vw); display: flex; flex-direction: column; background: var(--zemin); border-left: 1.5px solid var(--murekkep); box-shadow: -18px 0 36px -26px rgba(17,42,74,.55); transform: translateX(104%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s linear .28s; overscroll-behavior: contain; }
.cekmece.acik { transform: none; visibility: visible; transition: transform .28s var(--ease); }
.cekmece-bas { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; background: var(--murekkep); color: var(--beyaz); }
.cekmece-bas h2 { margin: 0; font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.cekmece-kapat { background: none; border: 1.5px solid color-mix(in srgb, var(--beyaz) 55%, var(--murekkep)); border-radius: 4px; color: var(--beyaz); font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; cursor: pointer; }
.cekmece-ic { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 16px; }
.cekmece-not { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--murekkep-2); }
.tk-sabit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tk-sabit span { padding: 5px 9px; border: 1.5px dashed var(--oluk-koyu); border-radius: 999px; font-size: 12.5px; color: var(--soluk); }
.tk-sabit b { margin-left: 4px; font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; color: var(--murekkep); }
.tk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; background: var(--beyaz); border: 1px solid var(--oluk-koyu); border-radius: 8px; position: relative; overflow: hidden; }
.tk-liste li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--murekkep); }
.tk-liste li.tk-mc::before { background: var(--kehribar); } .tk-liste li.tk-visa::before { background: var(--murekkep); } .tk-liste li.tk-troy::before { background: var(--nane); } .tk-liste li.tk-hata::before { background: var(--hata); }
.tk-ad b { display: block; font-size: 14px; line-height: 1.2; } .tk-ad small { display: block; margin-top: 2px; font-size: 12px; color: var(--soluk); }
.tk-liste .kart-no { font-size: 16px; padding: 6px 8px; white-space: nowrap; }
.cekmece-dip { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--soluk); }
@media (max-width: 1099px) {
  .cekmece-ort { background: rgba(17,42,74,.38); }
  .cekmece { top: auto; left: 0; right: 0; width: 100%; max-height: 84dvh; border-left: 0; border-top: 1.5px solid var(--murekkep); border-radius: 14px 14px 0 0; transform: translateY(104%); box-shadow: 0 -18px 36px -26px rgba(17,42,74,.55); padding-bottom: env(safe-area-inset-bottom); }
  .cekmece-bas { border-radius: 12px 12px 0 0; }
}
@media (max-width: 520px) { .tk-liste .kart-no { font-size: 14px; letter-spacing: .04em; padding: 6px 7px; } .tk-ad b { font-size: 13px; } .tk-liste li { padding-left: 12px; } }
@media (prefers-reduced-motion: reduce) { .cekmece, .cekmece.acik { transition: none; } }

/* dar sağ sütunda garson adisyonu: ad ve tutar solda iki satır, adet düğmeleri sağda (ad ile düğmeler üst üste binmez) */
@media (min-width: 1100px) {
  .p-garson .adisyon-s { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 6px 0; }
  .p-garson .adisyon-s > span:first-child { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; line-height: 1.25; }
  .p-garson .adisyon-s .tut { grid-column: 1; grid-row: 2; min-width: 0; text-align: left; font-size: 13px; color: var(--soluk); }
  .p-garson .adisyon-s .adet { grid-column: 2; grid-row: 1 / span 2; gap: 3px; }
  .p-garson .adisyon-s .adet button { width: 30px; height: 30px; font-size: 18px; }
  .p-garson .adisyon-s .adet b { min-width: 20px; font-size: 17px; }
  .p-garson .alarm-dugmeler { flex-direction: column; }
  .p-garson .alarm-dugmeler .tent { width: 100%; }
}

/* ---------- TROY hediyesi: cihaz kopyasındaki hediye ve teşekkür ekranları (gerçek cihazın 320×480 düzeni) ---------- */
.cihaz[data-ekran="hediye"] .e-hediye, .cihaz[data-ekran="tesekkur"] .e-tesekkur { opacity: 1; transform: none; }
.e-sayfa.e-hediye, .e-sayfa.e-tesekkur { inset: 0; }
.ekran .e-ust { position: relative; z-index: 3; }
.cihaz[data-ekran="hediye"] .e-alt, .cihaz[data-ekran="tesekkur"] .e-alt { visibility: hidden; }
.gd { display: block; width: 100%; height: 100%; }
.gd #qr-hediye svg { shape-rendering: crispEdges; }

/* Servis robotu (sahne): park hâlinde soluk, seçilince görünür; tepsi yüklenince tepsi çıkar */
.robot { transition: transform 1s linear, opacity .25s linear; opacity: .5; pointer-events: none; }   /* park hâlinde soluk görünür: robotun sahnede olduğu fark edilsin */
.robot.acik { opacity: 1; }
.robot .r-et { font: 800 9px "Barlow Condensed", sans-serif; letter-spacing: .1em; fill: var(--murekkep); }
.robot .r-govde { fill: var(--nane); stroke: var(--beyaz); stroke-width: 2; }
.robot .r-goz { fill: var(--beyaz); } .robot .r-agiz { fill: var(--beyaz); opacity: .8; }
.robot .r-tepsi { fill: var(--beyaz); stroke: var(--murekkep); stroke-width: 1.5; opacity: 0; transition: opacity .2s linear; }
.robot.yuklu .r-tepsi { opacity: 1; }
.robot.yuklu { filter: drop-shadow(0 2px 2px rgba(17,42,74,.35)); }
.hiz.servis-sec { margin-right: 10px; }