/* =====================================================================
   Hizmet animasyonu — 36 sn döngü (yüzde = saniye × 2.778)
   0-2 sn     müşteri gelir (elinde toner)
   2-6 sn     müşteri: "Merhaba Gökhan Bey…"         6-10 sn  Gökhan Bey: "Hemen yardımcı olalım…"
   10-11 sn   müşteri toneri tezgâha bırakır          11-13 sn müşteri çıkar
   11-14.5 sn teknisyen toneri alır, yazıcıya takar    14.5-18.5 sn baskı, A4 test çıktısı
   18.8-20.3  dolu (mavi) toner tezgâha                20.5-24 sn paketleme (kutu, kapak, bant, etiket)
   24-26 sn   müşteri geri gelir                       26-30 sn "Teşekkürler!" + yıldızlar
   30-33.5 sn Gökhan Bey: "Rica ederiz…" + el sallar   33-34 sn paket müşteriye    34-36 sn müşteri paketle gider
   ===================================================================== */

.story { --dur: 36s; --iter: infinite; padding-top: 72px; }
.story-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.story-svg { display: block; width: 100%; height: auto; }
.st-sign { font: 800 14px var(--font); fill: #fff; letter-spacing: .12em; }
.st-done { font: 700 13px var(--font); fill: #15803d; }
.st-bubble-text { font: 800 15px var(--font); fill: var(--navy-800); }
.st-reply-text { font-family: var(--font); font-weight: 700; fill: #fff; }
.st-talk-text { font: 700 12px var(--font); fill: var(--navy-800); }
.st-talk-text--light { fill: #fff; }
.st-box-label { font: 800 7px var(--font); fill: #334155; letter-spacing: .08em; }
.st-pack-label { font: 800 8px var(--font); fill: rgba(80, 45, 15, .6); letter-spacing: .12em; }
.st-paper-text { font: 800 11px var(--font); letter-spacing: -.01em; }

/* Animasyon atamaları (hepsi aynı döngü süresini paylaşır → senkron kalır) */
.st-scene      { animation: st-scene var(--dur) var(--iter, infinite); }
.st-customer   { animation: st-customer var(--dur) var(--iter, infinite) ease-in-out; }
.st-bob        { animation: st-bob .45s infinite alternate ease-in-out; }
.st-box        { animation: st-box var(--dur) var(--iter, infinite) ease-in-out; }
.st-box-body   { fill: #94a3b8; animation: st-fill var(--dur) var(--iter, infinite); }
.st-box-check  { opacity: 0; animation: st-check var(--dur) var(--iter, infinite); }
.st-clock      { opacity: 0; animation: st-clock var(--dur) var(--iter, infinite); }
.st-hand, .st-hand-h { transform-box: view-box; transform-origin: 404px 50px; }
.st-hand       { animation: st-hand var(--dur) var(--iter, infinite) linear; }
.st-hand-h     { animation: st-hand-h var(--dur) var(--iter, infinite) linear; }
.st-progress   { transform-box: view-box; transform-origin: 440px 76px; transform: scaleX(0); animation: st-progress var(--dur) var(--iter, infinite); }
.st-done       { opacity: 0; animation: st-done var(--dur) var(--iter, infinite); }
.st-arm        { transform-box: view-box; transform-origin: 520px 180px; animation: st-arm var(--dur) var(--iter, infinite) ease-in-out; }
.st-paper      { animation: st-paper var(--dur) var(--iter, infinite) ease-out; }
.st-printer    { animation: st-printer var(--dur) var(--iter, infinite); }
.st-led        { animation: st-led var(--dur) var(--iter, infinite) steps(1); }
.st-screen     { transform-box: fill-box; transform-origin: left; animation: st-screen var(--dur) var(--iter, infinite); }
.st-pack       { animation: st-pack var(--dur) var(--iter, infinite) ease-in-out; }
.st-pack-pop   { transform-box: view-box; transform-origin: 503px 192px; animation: st-pack-pop var(--dur) var(--iter, infinite); }
.st-flap       { transform-box: view-box; }
.st-flap--l    { transform-origin: 476px 149px; animation: st-flap-l var(--dur) var(--iter, infinite); }
.st-flap--r    { transform-origin: 530px 149px; animation: st-flap-r var(--dur) var(--iter, infinite); }
.st-tape       { transform-box: view-box; transform-origin: 503px 145px; animation: st-tape var(--dur) var(--iter, infinite); }
.st-sticker    { transform-box: fill-box; transform-origin: center; animation: st-sticker var(--dur) var(--iter, infinite); }
.st-eyes       { transform-box: fill-box; transform-origin: center; animation: st-blink 4.2s infinite; }
.st-brows      { animation: st-brows var(--dur) var(--iter, infinite); }
.st-blush      { opacity: .35; animation: st-blush var(--dur) var(--iter, infinite); }
.st-smile      { opacity: 0; animation: st-smile var(--dur) var(--iter, infinite); }
.st-neutral    { animation: st-neutral var(--dur) var(--iter, infinite); }
.st-star       { transform-box: fill-box; transform-origin: center; opacity: 0; animation: st-star var(--dur) var(--iter, infinite); }
.st-star:nth-child(2) { animation-delay: .15s; }
.st-star:nth-child(3) { animation-delay: .3s; }
.st-ask        { opacity: 0; animation: st-ask var(--dur) var(--iter, infinite); }
.st-answer     { opacity: 0; animation: st-answer var(--dur) var(--iter, infinite); }
.st-bubble     { opacity: 0; animation: st-bubble var(--dur) var(--iter, infinite); }
.st-reply      { opacity: 0; animation: st-reply var(--dur) var(--iter, infinite); }

/* ---- Sahne ---- */
@keyframes st-scene { 0% { opacity: 0; } 1.5%, 98.5% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Müşteri: gel (0-2) · konuş (2-10) · bırak (10-11) · çık (11-13) · dön (24-26) · teşekkür/cevap (26-33.5) · paketle git (34-36) ---- */
@keyframes st-customer {
  0%             { transform: translateX(-150px); }
  5.56%, 30.28%  { transform: translateX(330px); }
  35.83%, 66.67% { transform: translateX(-150px); }
  72.22%, 94.44% { transform: translateX(330px); }
  100%           { transform: translateX(-150px); }
}
@keyframes st-bob { to { transform: translateY(-3px); } }

/* ---- Konuşmalar (her biri ~3.5 sn) ---- */
@keyframes st-ask    { 0%, 5.56% { opacity: 0; transform: translateY(6px); } 6.39%, 16.11% { opacity: 1; transform: none; } 16.94%, 100% { opacity: 0; } }
@keyframes st-answer { 0%, 16.94% { opacity: 0; transform: translateY(6px); } 17.78%, 26.67% { opacity: 1; transform: none; } 27.5%, 100% { opacity: 0; } }
@keyframes st-bubble { 0%, 72.5% { opacity: 0; transform: translateY(8px); } 73.6%, 82.5% { opacity: 1; transform: none; } 83.5%, 100% { opacity: 0; } }
@keyframes st-reply  { 0%, 83.06% { opacity: 0; transform: translateY(8px); } 84%, 92.8% { opacity: 1; transform: none; } 93.6%, 100% { opacity: 0; } }

/* ---- Toner kutusu: müşteri elinde → tezgâh (konuşmadan sonra) → yazıcı → mavi/dolu → pakete girer ---- */
@keyframes st-box {
  0%             { transform: translate(-106px, 182px); opacity: 1; }
  5.56%, 27.5%   { transform: translate(374px, 182px); opacity: 1; }
  30.28%, 33.33% { transform: translate(430px, 162px); }
  35.56%         { transform: translate(552px, 150px); }
  38.89%         { transform: translate(676px, 166px) scale(.7); opacity: 1; }
  40.28%, 52.22% { transform: translate(676px, 166px) scale(.7); opacity: 0; }
  52.5%          { transform: translate(676px, 166px) scale(.7); opacity: 1; }
  54.17%         { transform: translate(552px, 150px) scale(1); }
  56.39%, 58.33% { transform: translate(430px, 162px); opacity: 1; }
  60.56%         { transform: translate(484px, 152px) scale(.75); opacity: 1; }
  61.67%, 100%   { transform: translate(484px, 152px) scale(.75); opacity: 0; }
}
@keyframes st-fill  { 0%, 52.2% { fill: #94a3b8; } 52.5%, 100% { fill: var(--blue-600); } }
@keyframes st-check { 0%, 53.5% { opacity: 0; } 54.2%, 60.56% { opacity: 1; } 61.67%, 100% { opacity: 0; } }

/* ---- Saat ve dolum çubuğu (işlem süresince) ---- */
@keyframes st-clock    { 0%, 31.9% { opacity: 0; } 33.33%, 55.56% { opacity: 1; } 58.3%, 100% { opacity: 0; } }
@keyframes st-hand     { 0%, 33.33% { transform: rotate(0); } 55.56%, 100% { transform: rotate(1440deg); } }
@keyframes st-hand-h   { 0%, 33.33% { transform: rotate(0); } 55.56%, 100% { transform: rotate(120deg); } }
@keyframes st-progress { 0%, 36.11% { transform: scaleX(0); } 52.78%, 100% { transform: scaleX(1); } }
@keyframes st-done     { 0%, 52.5% { opacity: 0; } 53.3%, 63.9% { opacity: 1; } 65.3%, 100% { opacity: 0; } }

/* ---- Teknisyenin kolu ---- */
@keyframes st-arm {
  0%, 31.5%           { transform: rotate(0); }
  33.33%              { transform: rotate(-38deg); }  /* tezgâhtan alır */
  35.56%              { transform: rotate(-20deg); }
  38.89%              { transform: rotate(-8deg); }   /* yazıcıya takar */
  40.28%, 51.9%       { transform: rotate(0); }
  53.5%               { transform: rotate(-8deg); }   /* yazıcıdan alır */
  55.5%               { transform: rotate(-38deg); }  /* tezgâha koyar */
  57.5%               { transform: rotate(-20deg); }
  59%, 60.6%, 62.5%   { transform: rotate(-22deg); }  /* paketler */
  59.8%, 61.4%, 63.3% { transform: rotate(-6deg); }
  65%, 83.9%          { transform: rotate(0); }
  85%, 87.5%          { transform: rotate(-70deg); }  /* el sallar */
  86.2%, 88.7%        { transform: rotate(-50deg); }
  90%                 { transform: rotate(0); }
  91.67%              { transform: rotate(-40deg); }  /* paketi uzatır */
  94.44%, 100%        { transform: rotate(0); }
}

/* ---- Yazıcı ve A4 test çıktısı ---- */
@keyframes st-paper { 0%, 41.67% { transform: translateY(0); opacity: 1; } 51.39%, 66.67% { transform: translateY(-96px); opacity: 1; } 68.06% { transform: translateY(-96px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes st-printer {
  0%, 40.28%                   { transform: none; }
  41%, 43%, 45%, 47%, 49%, 51% { transform: translateY(-1px); }
  42%, 44%, 46%, 48%, 50%      { transform: translateY(1px); }
  51.39%, 100%                 { transform: none; }
}
@keyframes st-led {
  0%, 40.28%              { fill: #22c55e; }
  41%, 43%, 45%, 47%, 49% { fill: #f59e0b; }
  42%, 44%, 46%, 48%, 50% { fill: #22c55e; }
  51.39%, 100%            { fill: #22c55e; }
}
@keyframes st-screen { 0%, 40.28% { transform: scaleX(.3); } 51.39%, 100% { transform: scaleX(1.5); } }

/* ---- Paket: belirir → kapaklar kapanır → bant → etiket → müşteriye → müşteriyle gider ---- */
@keyframes st-pack     { 0%, 91.67% { transform: none; } 94.44% { transform: translate(-108px, 8px); } 100% { transform: translate(-588px, 8px); } }
@keyframes st-pack-pop { 0%, 56.94% { opacity: 0; transform: scale(.4); } 57.8% { opacity: 1; transform: scale(1.08); } 58.33%, 100% { opacity: 1; transform: scale(1); } }
@keyframes st-flap-l   { 0%, 61.67% { transform: rotate(-115deg); } 63.33%, 100% { transform: rotate(0); } }
@keyframes st-flap-r   { 0%, 62.5% { transform: rotate(115deg); } 64.17%, 100% { transform: rotate(0); } }
@keyframes st-tape     { 0%, 64.17% { transform: scaleY(0); } 65.56%, 100% { transform: scaleY(1); } }
@keyframes st-sticker  { 0%, 65.56% { opacity: 0; transform: scale(0); } 66.5% { opacity: 1; transform: scale(1.3); } 67.2%, 100% { opacity: 1; transform: scale(1); } }

/* ---- Yüz ifadeleri: hep güler yüzlü; teslimde kocaman gülümseme ---- */
@keyframes st-blink   { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }
@keyframes st-brows   { 0%, 72.2% { transform: none; } 73.3%, 100% { transform: translateY(-2px); } }
@keyframes st-blush   { 0%, 72.2% { opacity: .35; } 73.3%, 100% { opacity: .75; } }
@keyframes st-smile   { 0%, 72.2% { opacity: 0; } 73.3%, 100% { opacity: 1; } }
@keyframes st-neutral { 0%, 72.2% { opacity: 1; } 73.3%, 100% { opacity: 0; } }
@keyframes st-star    { 0%, 72.8% { opacity: 0; transform: scale(.2); } 75% { opacity: 1; transform: scale(1.25); } 76.5%, 81% { opacity: 1; transform: scale(1); } 83%, 100% { opacity: 0; } }

/* ---- Alt adımlar (sahneyle eş zamanlı) ---- */
.story-progress { height: 4px; background: var(--soft); }
.story-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-600), var(--accent)); transform-origin: left; animation: st-bar var(--dur) linear var(--iter, infinite); }
@keyframes st-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-steps { list-style: none; margin: 0; padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.story-step { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); opacity: .45; }
.story-step strong { display: block; font-size: .95rem; }
.story-step div span { font-size: .85rem; color: var(--text-2); line-height: 1.45; display: block; }
.story-step__num { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.story-step:nth-child(1) { animation: st-step1 var(--dur) var(--iter, infinite); }
.story-step:nth-child(2) { animation: st-step2 var(--dur) var(--iter, infinite); }
.story-step:nth-child(3) { animation: st-step3 var(--dur) var(--iter, infinite); }
.story-step:nth-child(4) { animation: st-step4 var(--dur) var(--iter, infinite); }
@keyframes st-step1 { 0%, 29% { opacity: 1; border-color: var(--blue-600); box-shadow: var(--shadow); } 31%, 100% { opacity: .45; } }
@keyframes st-step2 { 0%, 29% { opacity: .45; } 31%, 57.5% { opacity: 1; border-color: var(--blue-600); box-shadow: var(--shadow); } 59.5%, 100% { opacity: .45; } }
@keyframes st-step3 { 0%, 57.5% { opacity: .45; } 59.5%, 71% { opacity: 1; border-color: var(--blue-600); box-shadow: var(--shadow); } 73%, 100% { opacity: .45; } }
@keyframes st-step4 { 0%, 71% { opacity: .45; } 73%, 98% { opacity: 1; border-color: var(--green); box-shadow: var(--shadow); } 100% { opacity: .45; } }
@media (max-width: 860px) { .story-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .story-steps { grid-template-columns: 1fr; padding: 14px; } .story-step { padding: 12px; } }

/* Mobil: SVG küçülünce balon yazıları okunmaz → altyazı göster, SVG balonlarını gizle */
.story-subs { display: none; }
@media (max-width: 640px) {
  .story-svg .st-ask, .story-svg .st-answer, .story-svg .st-bubble, .story-svg .st-reply { visibility: hidden; }
  .story-subs { display: block; position: relative; min-height: 64px; background: var(--navy-800); }
  .story-subs p { position: absolute; inset: 0; margin: 0; padding: 12px 16px; color: #fff; font-size: .92rem; line-height: 1.4; display: flex; align-items: center; gap: 6px; }
  .story-subs p b { color: var(--accent); white-space: nowrap; }
  .story .section-head { margin-bottom: 24px; }
}

/* Duraklatma: ekranda görünene kadar bekle / fare üzerindeyken dur */
.story.is-waiting .story-card *, .story--hover .story-card:hover * { animation-play-state: paused !important; }

/* Son kare (sınırlı tekrar bitince veya "animasyonları azalt" açık ve panelde "cihaz ayarına uysun" seçiliyse) */
.story.st-ended .story-card * { animation: none !important; }
.story.st-ended .st-customer { transform: translateX(330px); }
.story.st-ended .st-box { opacity: 0; }
.story.st-ended .st-pack { transform: translate(-108px, 8px); }
.story.st-ended .st-paper { transform: translateY(-96px); }
.story.st-ended .st-smile, .story.st-ended .st-star, .story.st-ended .st-bubble, .story.st-ended .st-scene, .story.st-ended .st-sticker, .story.st-ended .st-pack-pop, .story.st-ended .story-step { opacity: 1; }
.story.st-ended .st-tape, .story.st-ended .st-flap--l, .story.st-ended .st-flap--r { transform: none; }
.story.st-ended .st-blush { opacity: .75; }
.story.st-ended .st-neutral, .story.st-ended .st-ask, .story.st-ended .st-answer, .story.st-ended .st-reply { opacity: 0; }
.story.st-ended .st-progress, .story.st-ended .story-progress span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.force-motion) .story .story-card * { animation: none !important; }
  body:not(.force-motion) .st-customer { transform: translateX(330px); }
  body:not(.force-motion) .st-box { opacity: 0; }
  body:not(.force-motion) .st-pack { transform: translate(-108px, 8px); }
  body:not(.force-motion) .st-paper { transform: translateY(-96px); }
  body:not(.force-motion) .st-smile, body:not(.force-motion) .st-star, body:not(.force-motion) .st-bubble, body:not(.force-motion) .st-scene, body:not(.force-motion) .st-sticker, body:not(.force-motion) .st-pack-pop, body:not(.force-motion) .story-step { opacity: 1; }
  body:not(.force-motion) .st-tape, body:not(.force-motion) .st-flap--l, body:not(.force-motion) .st-flap--r { transform: none; }
  body:not(.force-motion) .st-blush { opacity: .75; }
  body:not(.force-motion) .st-neutral { opacity: 0; }
  body:not(.force-motion) .st-progress { transform: none; }
}

/* =====================================================================
   2. animasyon — Kurye hizmeti (48 sn döngü, yüzde = saniye × 2.0833)
   0-8.5 sn   telefon: müşteri arar → Gökhan Bey "Hemen geliyorum"
   8.5-11     Gökhan dükkândan çıkar, motora biner       11-15  ofise sürer
   15-18      ofise girer, boş toneri alır                18-23.5 motorla dükkâna döner
   23.5-32    tezgâhta dolum (şişe, ilerleme çubuğu, ✓)   32-37  dolu tonerle ofise sürer
   37-38.5    toneri teslim eder → müşteri mutlu          39-43  müşteri: teşekkür
   43.4-47.2  Gökhan: "Bizi tercih ettiğiniz için…"
   ===================================================================== */
.st2-sign { font: 800 11px var(--font); fill: #fff; letter-spacing: .06em; }
.st2-scene        { animation: st-scene var(--dur) var(--iter, infinite); }
.st2-gokhan       { animation: st2-gokhan var(--dur) var(--iter, infinite) ease-in-out; }
.st2-bike         { animation: st2-bike var(--dur) var(--iter, infinite) ease-in-out; }
.st2-flip         { transform-origin: 0 0; animation: st2-flip var(--dur) var(--iter, infinite); }
.st2-ride         { animation: st2-ride .28s infinite alternate ease-in-out; }
.st2-rider        { opacity: 0; animation: st2-rider var(--dur) var(--iter, infinite); }
.st2-speed        { opacity: 0; animation: st2-speed var(--dur) var(--iter, infinite); }
.st2-puff         { transform-box: fill-box; transform-origin: center; animation: st2-puff .6s infinite; }
.st2-fill         { fill: #94a3b8; animation: st2-fill var(--dur) var(--iter, infinite); }
.st2-rack-box     { opacity: 0; animation: st2-rack var(--dur) var(--iter, infinite); }
.st2-g-box        { opacity: 0; animation: st2-gbox var(--dur) var(--iter, infinite); }
.st2-g-phone      { opacity: 0; animation: st2-gphone var(--dur) var(--iter, infinite); }
.st2-g-arm        { animation: st2-garm var(--dur) var(--iter, infinite); }
.st2-c-phone      { animation: st2-cphone var(--dur) var(--iter, infinite); }
.st2-c-arm        { opacity: 0; animation: st2-carm var(--dur) var(--iter, infinite); }
.st2-c-box        { opacity: 0; animation: st2-cbox var(--dur) var(--iter, infinite); }
.st2-ring         { opacity: 0; animation: st2-ring var(--dur) var(--iter, infinite); }
.st2-desk-toner   { animation: st2-desk var(--dur) var(--iter, infinite); }
.st2-bench-toner  { opacity: 0; animation: st2-bench var(--dur) var(--iter, infinite); }
.st2-bottle       { opacity: 0; transform-box: view-box; transform-origin: 89px 194px; animation: st2-bottle var(--dur) var(--iter, infinite) ease-in-out; }
.st2-pour         { opacity: 0; animation: st2-pour var(--dur) var(--iter, infinite); }
.st2-bar          { transform-box: view-box; transform-origin: 14px 153px; transform: scaleX(0); animation: st2-bar var(--dur) var(--iter, infinite); }
.st2-bench-check  { opacity: 0; animation: st2-check var(--dur) var(--iter, infinite); }
.st2-c-led        { fill: #ef4444; animation: st2-led var(--dur) var(--iter, infinite); }
.st2-c-paper      { opacity: 0; animation: st2-paper var(--dur) var(--iter, infinite); }
.st2-c-smile      { opacity: 0; animation: st2-smile var(--dur) var(--iter, infinite); }
.st2-c-neutral    { animation: st2-neutral var(--dur) var(--iter, infinite); }
.st2-c-blush      { opacity: .35; animation: st2-blush var(--dur) var(--iter, infinite); }
.st2-star         { transform-box: fill-box; transform-origin: center; opacity: 0; animation: st2-star var(--dur) var(--iter, infinite); }
.st2-star:nth-child(2) { animation-delay: .15s; }
.st2-star:nth-child(3) { animation-delay: .3s; }
.st2-c-call       { opacity: 0; animation: st2-t1 var(--dur) var(--iter, infinite); }
.st2-g-call       { opacity: 0; animation: st2-t2 var(--dur) var(--iter, infinite); }
.st2-c-thanks     { opacity: 0; animation: st2-t3 var(--dur) var(--iter, infinite); }
.st2-g-thanks     { opacity: 0; animation: st2-t4 var(--dur) var(--iter, infinite); }

/* Gökhan Bey: tezgâh (165) · motor (262 / 520) · müşteri (660) · dolum tezgâhı (130) */
@keyframes st2-gokhan {
  0%, 17.7%      { transform: translateX(165px); opacity: 1; }
  20.83%         { transform: translateX(262px); opacity: 1; }
  21.25%         { transform: translateX(262px); opacity: 0; }
  30.9%          { transform: translateX(520px); opacity: 0; }
  31.25%         { transform: translateX(520px); opacity: 1; }
  34.38%, 37.5%  { transform: translateX(660px); opacity: 1; }
  40.42%         { transform: translateX(520px); opacity: 1; }
  40.83%         { transform: translateX(520px); opacity: 0; }
  48.6%          { transform: translateX(262px); opacity: 0; }
  48.96%         { transform: translateX(262px); opacity: 1; }
  52.08%, 66.67% { transform: translateX(130px); opacity: 1; }
  68.75%         { transform: translateX(262px); opacity: 1; }
  69.17%         { transform: translateX(262px); opacity: 0; }
  76.7%          { transform: translateX(520px); opacity: 0; }
  77.08%         { transform: translateX(520px); opacity: 1; }
  80.21%, 100%   { transform: translateX(660px); opacity: 1; }
}
@keyframes st2-bike {
  0%, 22.92%     { transform: translateX(262px); }
  31.25%, 40.83% { transform: translateX(520px); }
  48.96%, 69.17% { transform: translateX(262px); }
  77.08%, 100%   { transform: translateX(520px); }
}
@keyframes st2-flip  { 0%, 40.8% { transform: scaleX(1); } 40.85%, 69.1% { transform: scaleX(-1); } 69.15%, 100% { transform: scaleX(1); } }
@keyframes st2-ride  { to { transform: translateY(-1.5px); } }
@keyframes st2-rider { 0%, 21.2% { opacity: 0; } 21.25%, 31.2% { opacity: 1; } 31.25%, 40.8% { opacity: 0; } 40.83%, 48.9% { opacity: 1; } 48.96%, 69.1% { opacity: 0; } 69.17%, 77% { opacity: 1; } 77.08%, 100% { opacity: 0; } }
@keyframes st2-speed { 0%, 23% { opacity: 0; } 24%, 30.5% { opacity: .9; } 31.2%, 41.5% { opacity: 0; } 42.5%, 48.2% { opacity: .9; } 48.9%, 70% { opacity: 0; } 71%, 76.4% { opacity: .9; } 77%, 100% { opacity: 0; } }
@keyframes st2-puff  { 0% { opacity: .9; transform: translateX(0) scale(.6); } 100% { opacity: 0; transform: translateX(-16px) scale(1.4); } }
/* toner: boş (gri) → dolum bitince (30. sn) mavi */
@keyframes st2-fill  { 0%, 62.4% { fill: #94a3b8; } 62.5%, 100% { fill: var(--blue-600, #1d6fe8); } }
@keyframes st2-rack  { 0%, 40.8% { opacity: 0; } 40.83%, 48.9% { opacity: 1; } 48.96%, 69.1% { opacity: 0; } 69.17%, 77% { opacity: 1; } 77.08%, 100% { opacity: 0; } }
@keyframes st2-gbox  { 0%, 35.4% { opacity: 0; } 35.42%, 40.8% { opacity: 1; } 40.83%, 48.9% { opacity: 0; } 48.96%, 52% { opacity: 1; } 52.08%, 66.6% { opacity: 0; } 66.67%, 69.1% { opacity: 1; } 69.17%, 77% { opacity: 0; } 77.08%, 80.1% { opacity: 1; } 80.21%, 100% { opacity: 0; } }
@keyframes st2-gphone { 0%, 3.5% { opacity: 0; } 4%, 17.7% { opacity: 1; } 18.2%, 100% { opacity: 0; } }
@keyframes st2-garm   { 0%, 3.5% { opacity: 1; } 4%, 17.7% { opacity: 0; } 18.2%, 100% { opacity: 1; } }
@keyframes st2-cphone { 0%, 17.7% { opacity: 1; } 18.2%, 100% { opacity: 0; } }
@keyframes st2-carm   { 0%, 17.7% { opacity: 0; } 18.2%, 100% { opacity: 1; } }
@keyframes st2-cbox   { 0%, 80.1% { opacity: 0; } 80.21%, 100% { opacity: 1; } }
@keyframes st2-ring   { 0%, 1.5% { opacity: 0; } 2%, 3%, 4%, 5% { opacity: 1; } 2.5%, 3.5%, 4.5% { opacity: .2; } 5.5%, 100% { opacity: 0; } }
@keyframes st2-desk   { 0%, 35.4% { opacity: 1; } 35.42%, 100% { opacity: 0; } }
@keyframes st2-bench  { 0%, 52% { opacity: 0; } 52.08%, 66.6% { opacity: 1; } 66.67%, 100% { opacity: 0; } }
@keyframes st2-bottle { 0%, 52.5% { opacity: 0; transform: none; } 53.5% { opacity: 1; transform: none; } 55%, 61% { opacity: 1; transform: rotate(-45deg); } 62.5%, 65.5% { opacity: 1; transform: none; } 66.5%, 100% { opacity: 0; transform: none; } }
@keyframes st2-pour   { 0%, 55.2% { opacity: 0; } 55.6%, 60.8% { opacity: 1; } 61.2%, 100% { opacity: 0; } }
@keyframes st2-bar    { 0%, 54% { transform: scaleX(0); } 62.5%, 67% { transform: scaleX(1); } 67.5%, 100% { transform: scaleX(0); } }
@keyframes st2-check  { 0%, 62.5% { opacity: 0; } 63.2%, 66.6% { opacity: 1; } 67.2%, 100% { opacity: 0; } }
@keyframes st2-led    { 0%, 81.5% { fill: #ef4444; } 82%, 100% { fill: #22c55e; } }
@keyframes st2-paper  { 0%, 82.5% { opacity: 0; transform: translateY(14px); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes st2-smile   { 0%, 80.2% { opacity: 0; } 81%, 100% { opacity: 1; } }
@keyframes st2-neutral { 0%, 80.2% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes st2-blush   { 0%, 80.2% { opacity: .35; } 81%, 100% { opacity: .75; } }
@keyframes st2-star    { 0%, 80.6% { opacity: 0; transform: scale(.2); } 82.5% { opacity: 1; transform: scale(1.25); } 84%, 89% { opacity: 1; transform: scale(1); } 90.5%, 100% { opacity: 0; } }
/* konuşmalar */
@keyframes st2-t1 { 0%, 2.08% { opacity: 0; transform: translateY(6px); } 2.9%, 9.6% { opacity: 1; transform: none; } 10.4%, 100% { opacity: 0; } }
@keyframes st2-t2 { 0%, 10.42% { opacity: 0; transform: translateY(6px); } 11.25%, 18.3% { opacity: 1; transform: none; } 19.1%, 100% { opacity: 0; } }
@keyframes st2-t3 { 0%, 81.9% { opacity: 0; transform: translateY(6px); } 82.7%, 89.6% { opacity: 1; transform: none; } 90.4%, 100% { opacity: 0; } }
@keyframes st2-t4 { 0%, 90.4% { opacity: 0; transform: translateY(6px); } 91.2%, 98.3% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* adımlar: 1 arama (0-10 sn) · 2 kurye alır (10-23.5) · 3 dolum (23.5-33) · 4 teslim (33-48) */
.story--courier .story-step:nth-child(1) { animation-name: st2-step1; }
.story--courier .story-step:nth-child(2) { animation-name: st2-step2; }
.story--courier .story-step:nth-child(3) { animation-name: st2-step3; }
.story--courier .story-step:nth-child(4) { animation-name: st2-step4; }
@keyframes st2-step1 { 0%, 20% { opacity: 1; border-color: var(--blue-600); box-shadow: var(--shadow); } 22%, 100% { opacity: .45; } }
@keyframes st2-step2 { 0%, 20% { opacity: .45; } 22%, 48% { opacity: 1; border-color: var(--blue-600); box-shadow: var(--shadow); } 50%, 100% { opacity: .45; } }
@keyframes st2-step3 { 0%, 48% { opacity: .45; } 50%, 68% { opacity: 1; border-color: var(--blue-600); box-shadow: var(--shadow); } 70%, 100% { opacity: .45; } }
@keyframes st2-step4 { 0%, 68% { opacity: .45; } 70%, 98% { opacity: 1; border-color: var(--green); box-shadow: var(--shadow); } 100% { opacity: .45; } }

@media (max-width: 640px) {
  .story-svg .st2-c-call, .story-svg .st2-g-call, .story-svg .st2-c-thanks, .story-svg .st2-g-thanks { visibility: hidden; }
}

/* Son kare (sınırlı tekrar bitti / hareket azaltılmış) */
.story--courier.st-ended .st2-gokhan { transform: translateX(660px); opacity: 1; }
.story--courier.st-ended .st2-bike { transform: translateX(520px); }
.story--courier.st-ended .st2-flip { transform: none; }
.story--courier.st-ended .st2-scene, .story--courier.st-ended .st2-c-box, .story--courier.st-ended .st2-c-smile, .story--courier.st-ended .st2-c-arm,
.story--courier.st-ended .st2-c-paper, .story--courier.st-ended .story-step, .story--courier.st-ended .st2-g-arm { opacity: 1; }
.story--courier.st-ended .st2-c-neutral, .story--courier.st-ended .st2-c-phone, .story--courier.st-ended .st2-desk-toner, .story--courier.st-ended .st2-rider,
.story--courier.st-ended .st2-g-phone, .story--courier.st-ended .st2-rack-box, .story--courier.st-ended .st2-g-box { opacity: 0; }
.story--courier.st-ended .st2-c-led { fill: #22c55e; }
.story--courier.st-ended .st2-c-blush { opacity: .75; }

/* Sıralı oynatma: tek alanda önce kurye, sonra dükkân */
.story-seq > .story[hidden] { display: none; }
.story-seq__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.story-seq__nav button { border: 1px solid var(--border); background: #fff; color: var(--text-2); border-radius: 999px; padding: 6px 14px; font: 600 .85rem var(--font); cursor: pointer; }
.story-seq__nav button[aria-pressed="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }