/* PAYON ara geçiş sahneleri — sahne.js ile. Renkler sayfanın değişkenlerinden okunur; yoksa menü dünyasının değerleri kullanılır. */
.sh { --sh-ink: var(--fg, #1F1A15); --sh-kir: var(--kiremit, #B8432F); --sh-nane: var(--acc, #19B77C); --sh-ok: var(--ok-ink, #0E7A52);
  --sh-kagit: var(--s1, #fff); --sh-cizgi: var(--line2, #D8CDB9); --sh-s2: var(--s2, #F3ECE0); --sh-s3: var(--s3, #E7DFD0); --sh-mute: var(--mute, #7A6E62);
  display: grid; justify-items: center; align-content: center; text-align: center; gap: 6px; min-height: 64dvh; padding: 8px 12px 28px; animation: sh-gir .55s cubic-bezier(.2, .8, .2, 1) both; }
.sh-art { width: min(240px, 66vw); margin-bottom: 4px; }
.sh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-svg.gecis { width: min(300px, 82vw); margin: 0 auto; }
.sh-art:has(.gecis) { width: min(300px, 82vw); }
.sh-b { margin: 6px 0 0; font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 600; font-variation-settings: "opsz" 72, "SOFT" 50; font-size: clamp(24px, 7vw, 30px); line-height: 1.1; letter-spacing: -.015em; color: var(--sh-ink); text-wrap: balance; }
.sh-tutar { font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 40; font-size: clamp(40px, 12vw, 54px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sh-ink); margin-top: 4px; }
.sh-a { margin: 4px 0 0; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--sh-mute); text-wrap: balance; }

/* kâğıt, mürekkep, gölge */
.sh-kagit { fill: var(--sh-kagit); stroke: var(--sh-cizgi); stroke-width: 1.6; }
.sh-golge { fill: rgba(31, 26, 21, .09); animation: sh-golge 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sh-nokta { fill: none; stroke: var(--sh-cizgi); stroke-width: 1.6; stroke-dasharray: 3 5; }
.sh-i { fill: var(--sh-ink); transform-box: fill-box; transform-origin: left center; animation: sh-yaz 3s cubic-bezier(.3, .7, .2, 1) infinite; animation-delay: var(--d, 0s); }
.sh-i.ince { fill: var(--sh-mute); opacity: .55; }
.sh-i.tot { fill: var(--sh-kir); }
.sh-i.sabit { animation: none; }
.sh-adisyon .sh-svg, .sh-fis .sh-svg, .sh-payon .sh-svg { animation: sh-salin 3s ease-in-out infinite; transform-origin: 50% 90%; }

/* menü kartı */
.sh-menu .sh-kagit { fill: var(--sh-kagit); }
.sh-sat { transform-box: fill-box; animation: sh-sat 2.8s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: var(--d, 0s); }
.sh-tabak { fill: var(--sh-s2); stroke: var(--sh-cizgi); stroke-width: 1.4; } .sh-tabak.ic { fill: none; stroke: var(--sh-cizgi); }
.sh-fiyat { fill: var(--sh-kir); opacity: .85; }
.sh-baslik-c { fill: var(--sh-kir); }
.sh-buhar path { fill: none; stroke: var(--sh-mute); stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: sh-buhar 2.4s ease-in-out infinite; } .sh-buhar path:nth-child(2) { animation-delay: .6s; }

/* geçiş: masa → güvenli sayfa */
.sh-masa { fill: var(--sh-ink); }
.sh-masa-t { font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 700; font-size: 30px; fill: var(--sh-kagit); }
.sh-yol { fill: none; stroke: var(--sh-cizgi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: sh-yol 1s linear infinite; }
.sh-kart { fill: var(--sh-kir); animation: sh-kart 2.4s cubic-bezier(.5, 0, .3, 1) infinite; transform: translate(90px, 72px); } .sh-kart rect:last-child { fill: rgba(0, 0, 0, .28); }
.sh-pos-g { fill: var(--sh-kagit); stroke: var(--sh-ink); stroke-width: 3; } .sh-ekran { fill: var(--sh-s2); }
.sh-kilit-b { fill: var(--sh-ink); } .sh-kilit-n { fill: var(--sh-kagit); }
.sh-kilit-k { fill: none; stroke: var(--sh-ink); stroke-width: 4; stroke-linecap: round; animation: sh-kilit 2.4s ease-in-out infinite; }
.sh-halka { fill: none; stroke: var(--sh-nane); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sh-halka 2.4s ease-out infinite; }

/* doğrulama */
.sh-bekle { transform-box: fill-box; transform-origin: center; animation: sh-don 7s linear infinite; }
.sh-halka-d { fill: none; stroke: var(--sh-kir); stroke-width: 3; stroke-dasharray: 8 9; stroke-linecap: round; opacity: .8; }
.sh-halka-i { fill: none; stroke: var(--sh-cizgi); stroke-width: 2; stroke-dasharray: 2 6; }
.sh-adim { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; font-size: 15px; font-weight: 600; color: var(--sh-mute); }
.sh-adim li { display: flex; align-items: center; gap: 12px; }
.sh-adim i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sh-cizgi); flex: none; position: relative; }
.sh-adim li.ok { color: var(--sh-ink); } .sh-adim li.ok i { background: var(--sh-nane); border-color: var(--sh-nane); }
.sh-adim li.ok i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.sh-adim li.now { color: var(--sh-ink); } .sh-adim li.now i { border-color: var(--sh-kir) var(--sh-kir) transparent transparent; animation: sh-don .9s linear infinite; }

/* ödendi: fiş çıkar, damga basılır */
.sh-yuva { fill: var(--sh-ink); } .sh-agiz { fill: #000; opacity: .5; }
.sh-cik { animation: sh-cik 1.15s steps(26, end) both; }
.sh-damga-i { transform-box: fill-box; transform-origin: center; animation: sh-damga .42s cubic-bezier(.2, 1.6, .4, 1) 1.2s both; }
.sh-damga { transform: translate(112px, 150px) rotate(-9deg); }
.sh-damga rect { fill: rgba(255, 255, 255, .7); stroke: var(--sh-ok); stroke-width: 4; }
.sh-damga text { font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 800; font-size: 24px; letter-spacing: .1em; fill: var(--sh-ok); }
.sh-dalga { fill: none; stroke: var(--sh-ok); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sh-dalga .7s ease-out 1.28s both; }
.sh-odendi .sh-svg { animation: sh-vur .3s ease-out 1.26s both; }

/* belirsiz ilerleme: ince mürekkep çizgisi */
.sh-iz { width: min(180px, 50vw); height: 3px; border-radius: 2px; background: var(--sh-s3); overflow: hidden; margin-top: 14px; }
.sh-iz i { display: block; width: 38%; height: 100%; border-radius: 2px; background: var(--sh-kir); animation: sh-iz 1.4s cubic-bezier(.5, 0, .3, 1) infinite; }

@keyframes sh-gir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sh-yaz { 0%, 4% { transform: scaleX(0); opacity: 0; } 10% { opacity: 1; } 30%, 78% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sh-sat { 0%, 4% { opacity: 0; transform: translateY(10px); } 22%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sh-salin { 50% { transform: translateY(-4px) rotate(-.6deg); } }
@keyframes sh-golge { 50% { transform: scaleX(.88); opacity: .7; } }
@keyframes sh-buhar { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sh-yol { to { stroke-dashoffset: -11; } }
@keyframes sh-kart { 0% { transform: translate(90px, 72px) scale(.85); opacity: 0; } 12% { opacity: 1; } 62% { transform: translate(172px, 72px) scale(1); opacity: 1; } 72%, 100% { transform: translate(190px, 72px) scale(.5); opacity: 0; } }
@keyframes sh-kilit { 0%, 55% { transform: translateY(-6px); } 70%, 100% { transform: translateY(0); } }
@keyframes sh-halka { 0%, 66% { opacity: 0; transform: scale(.6); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sh-don { to { transform: rotate(360deg); } }
@keyframes sh-iz { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
@keyframes sh-cik { from { transform: translateY(-176px); } to { transform: none; } }
@keyframes sh-damga { from { opacity: 0; transform: scale(2.6); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes sh-dalga { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }
@keyframes sh-vur { 0% { transform: translateY(0); } 40% { transform: translateY(5px); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .sh, .sh *, .sh-svg { animation: none !important; }
  .sh-i, .sh-sat, .sh-damga-i { opacity: 1; transform: none; }
  .sh-kart, .sh-halka, .sh-buhar path, .sh-dalga { opacity: 0; }
  .sh-kart { transform: translate(172px, 72px); }
  .sh-iz i { width: 100%; }
}
.sh-ust { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg, #FAF6EF); animation: sh-ac .28s ease-out both; }
@keyframes sh-ac { from { opacity: 0; } to { opacity: 1; } }