:root {
  --primary: #E8742A;
  --primary-ink: #C25A16;
  --dark: #2B1D14;
  --cream: #FFF8EE;
  --accent: #1F7A72;
  --card: #FFFDF8;
  --line: #EADBC8;
  --muted: #5C4A3D;
  --radius: 22px;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --display: "Baloo 2", ui-rounded, "Nunito", system-ui, sans-serif;
  --ember: #C93A1E;
  --green: #3E9B3A;
  --plum: #7B3F9E;
  --sky: #2F7FC1;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--dark);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
svg { display: block; }
img { -webkit-user-drag: none; }
#app { min-height: 100dvh; position: relative; overflow-x: hidden; }

/* ---------- Ortak düğmeler ---------- */
.icon-btn {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(43, 29, 20, .08); color: var(--dark);
  text-decoration: none;
}
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn:active { transform: scale(.92); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 26px;
  border: 0; border-radius: 999px;
  font-size: 20px; font-weight: 800;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
  transition: transform .1s;
}
.btn svg { width: 28px; height: 28px; flex: none; }
.btn span { white-space: nowrap; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: #fff; color: var(--dark); box-shadow: 0 5px 0 var(--line); }

/* ---------- Ana sayfa ---------- */
.home {
  max-width: 560px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px 110px;
  display: flex; flex-direction: column; gap: 14px;
  background:
    radial-gradient(circle at 85% 18%, rgba(232, 116, 42, .18) 0 120px, transparent 121px),
    radial-gradient(circle at 10% 40%, rgba(31, 122, 114, .12) 0 90px, transparent 91px);
}
.brand { display: flex; align-items: center; justify-content: space-between; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.brand-name b { color: var(--primary); }
.brand-branch { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

.hero { position: relative; display: flex; justify-content: center; align-items: flex-end; height: min(40vh, 330px); }
.hero-mascot { height: 100%; width: auto; filter: drop-shadow(0 10px 12px rgba(43, 29, 20, .2)); animation: bob 3s ease-in-out infinite; transform-origin: bottom center; }
.bubble {
  position: absolute; left: 0; top: 8%; z-index: 1;
  max-width: 46%; padding: 12px 16px;
  background: #fff; border-radius: 20px 20px 20px 4px;
  font-size: 17px; font-weight: 800; line-height: 1.25;
  box-shadow: 0 6px 18px rgba(43, 29, 20, .12);
  animation: pop-in .5s .3s both cubic-bezier(.3, 1.6, .5, 1);
}

.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.game-card {
  --tone: var(--primary);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px 14px; border-radius: 26px;
  text-decoration: none; text-align: center; color: #fff;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .28), transparent 55%),
    radial-gradient(circle at 110% 110%, rgba(0, 0, 0, .22), transparent 50%),
    var(--tone);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--tone) 60%, #000), 0 14px 24px rgba(43, 29, 20, .18);
  transition: transform .12s, box-shadow .12s;
  animation: pop-in .45s var(--d, 0s) both cubic-bezier(.3, 1.5, .5, 1);
}
.game-card::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 12px, transparent 12px 24px); pointer-events: none; }
.game-card:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 color-mix(in srgb, var(--tone) 60%, #000), 0 6px 12px rgba(43, 29, 20, .18); }
.game-card:focus-visible { outline: 4px solid var(--dark); outline-offset: 3px; }
.tone-orange { --tone: var(--primary); }
.tone-teal { --tone: var(--accent); }
.tone-dark { --tone: var(--dark); }
.tone-ember { --tone: var(--ember); }
.tone-green { --tone: var(--green); }
.tone-plum { --tone: var(--plum); }
.tone-sky { --tone: var(--sky); }
.game-art {
  position: relative; z-index: 1;
  width: 86px; height: 86px; display: grid; place-items: center; padding: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #FFF3E2 60%, #F2DCC0);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .2);
}
.game-art svg { width: 100%; height: 100%; }
.game-card:hover .game-art svg { animation: wiggle .6s; }
.game-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.game-title { font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.05; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); text-wrap: balance; }
.game-hint { font-size: 15px; font-weight: 700; opacity: .92; line-height: 1.3; }
.game-age { font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .2); }
.game-new {
  position: absolute; z-index: 2; top: 12px; right: -30px; transform: rotate(35deg);
  width: 110px; padding: 3px 0; text-align: center;
  background: #FFCB3D; color: #5A2C12; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.game-card.featured { grid-column: 1 / -1; flex-direction: row; text-align: left; gap: 16px; padding: 18px 18px 18px 16px; }
.game-card.featured .game-art { width: 116px; height: 116px; flex: none; }
.game-card.featured .game-text { align-items: flex-start; }
.game-card.featured .game-title { font-size: 27px; }

.badge-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
}
.badge-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; }
.badge-label svg { width: 20px; height: 20px; color: #F6B92B; }
.badge-row { display: flex; gap: 4px; flex-wrap: wrap; }
.badge-row em { color: var(--muted); font-size: 15px; }
.home-foot { text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; }
.home-foot span { font-weight: 900; letter-spacing: 1px; }

.sticker { display: inline-grid; place-items: center; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.sticker svg { width: 70%; height: 70%; }
.sticker-orange { background: var(--primary); }
.sticker-teal { background: var(--accent); }
.sticker-dark { background: var(--dark); }
.sticker-ember { background: var(--ember); }
.sticker-green { background: var(--green); }
.sticker-plum { background: var(--plum); }
.sticker-sky { background: var(--sky); }
.sticker.mini { width: 32px; height: 32px; border-width: 2px; }
.sticker.big { width: 110px; height: 110px; border-width: 5px; animation: stamp .6s .5s both cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- Demo düğmesi ---------- */
.demo-chip {
  position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 10px; border: 2px dashed rgba(255, 255, 255, .6); border-radius: 999px;
  background: var(--dark); color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.demo-chip svg { width: 22px; height: 22px; }
.demo-chip small { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; background: var(--primary); padding: 2px 6px; border-radius: 6px; }
.game-shell.full ~ .demo-chip { top: 50%; bottom: auto; right: 8px; transform: translateY(-50%); padding: 6px 10px; }
.game-shell.full ~ .demo-chip span { display: none; }
.demo-chip.in-bar { position: static; transform: none; padding: 6px 10px; box-shadow: none; }
.demo-chip.in-bar span, .demo-chip.in-bar small { display: none; }
.demo-chip.in-bar { border-width: 2px; padding: 8px; }
body:has(.kk-intro) .demo-chip, body:has(.reward) .demo-chip { display: none; }

/* ---------- Oyun kabuğu ---------- */
.game-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.game-bar {
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 6px;
}
.game-bar h1 { flex: 1; margin: 0; font-family: var(--display); font-size: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 900; text-align: center; }
.game-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- Usta Sensin ---------- */
.usta { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 14px 90px; max-width: 520px; margin: 0 auto; width: 100%; }
.order { display: flex; align-items: center; gap: 10px; width: 100%; }
.order-face { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); object-fit: cover; flex: none; }
.ticket {
  flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  min-height: 72px; padding: 8px 10px;
  background: #fff; border-radius: 18px; border: 2px dashed var(--line);
  position: relative;
}
.ticket::before { content: ""; position: absolute; left: -10px; top: 26px; border: 8px solid transparent; border-right-color: var(--line); }
.ticket.pop { animation: pop-in .4s cubic-bezier(.3, 1.6, .5, 1); }
.ticket-item { position: relative; width: 50px; height: 50px; padding: 4px; border-radius: 12px; background: var(--cream); transition: opacity .2s; }
.ticket-item svg { width: 100%; height: 100%; }
.ticket-item.next { outline: 3px solid var(--primary); animation: pulse 1.1s ease-in-out infinite; }
.ticket-item.done { opacity: .45; }
.ticket-item .tick { position: absolute; inset: auto -4px -4px auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.ticket-item .tick svg { width: 16px; height: 16px; }
.ticket-item.nudge { animation: wiggle .5s; }
.dots { display: flex; gap: 8px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.dots i.now { background: var(--primary); transform: scale(1.25); }
.dots i.done { background: var(--accent); transform: none; }

.board {
  position: relative; width: min(72vw, 34vh, 360px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 62%, #F1E4D2 63% 66%, #fff 67%);
  box-shadow: 0 10px 24px rgba(43, 29, 20, .14);
}
.board-base, .layers, .board-result { position: absolute; inset: 8%; }
.board-base svg { width: 100%; height: 100%; }
.layer { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; translate: var(--x) var(--y); rotate: var(--r); }
.layer svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .18)); }
.board.wrapped .board-base, .board.wrapped .layers { animation: roll-up .5s forwards ease-in; }
.board-result { display: grid; place-items: center; pointer-events: none; }
.board-result > svg { width: 90%; height: 90%; animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) both; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.burst { position: absolute; top: -6%; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.burst span { width: 48px; height: 48px; color: #F6B92B; animation: star-in .5s calc(.25s + var(--n) * .15s) both cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.burst svg { width: 100%; height: 100%; }
.wrap-btn { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; font-size: 26px; min-width: 150px; animation: pulse 1s ease-in-out infinite; }
.wrap-btn[hidden] { display: none; }

.tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 18px; }
.tray-btn { aspect-ratio: 1.45; padding: 8px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--line); display: grid; place-items: center; }
.tray-btn svg { width: 74%; height: 92%; }
.tray-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.tray-btn.shake { animation: shake .45s; background: #FDE3D6; }

/* ---------- Dokun Boya ---------- */
.boya { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 14px 90px; max-width: 520px; margin: 0 auto; width: 100%; }
.pages { display: flex; gap: 10px; }
.page-thumb { width: 64px; height: 64px; padding: 4px; border: 3px solid transparent; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--line); }
.page-thumb.on { border-color: var(--accent); }
.page-thumb svg { width: 100%; height: 100%; }
.page-thumb .r { pointer-events: none; }
.paper { width: min(100%, 44vh); aspect-ratio: 400 / 440; background: #fff; border-radius: 22px; box-shadow: 0 8px 20px rgba(43, 29, 20, .12); padding: 8px; touch-action: none; }
.paper svg { width: 100%; height: 100%; }
.paper .r { cursor: pointer; transition: fill .15s; }
.paper .r.popfill { animation: fill-pop .3s; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; background: var(--c); box-shadow: 0 0 0 2px var(--line); transition: transform .12s; }
.swatch.on { transform: scale(1.12); box-shadow: 0 0 0 4px var(--dark); }
.boya-actions { display: flex; gap: 12px; }
.done-btn.glow { animation: pulse 1s ease-in-out infinite; }

/* ---------- Kap Kap ---------- */
.kk { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--dark); touch-action: none; }
.kk-half { position: relative; flex: 1; overflow: hidden; display: grid; place-items: center; transition: filter .2s; }
.kk-1 { background: var(--accent); }
.kk-2 { background: var(--primary); transform: rotate(180deg); }
.kk-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.kk-target { position: relative; width: 74px; height: 74px; display: grid; place-items: center; }
.kk-target-art { width: 54px; height: 54px; }
.kk-target-art svg { width: 100%; height: 100%; }
.kk-ring { position: absolute; inset: 0; border-radius: 50%; border: 5px dashed #fff; background: rgba(255, 255, 255, .25); animation: spin 6s linear infinite; }
.kk-score { color: #fff; font-weight: 900; display: flex; align-items: baseline; gap: 4px; }
.kk-score b { font-size: 48px; line-height: 1; }
.kk-score span { font-size: 20px; opacity: .8; }
.kk-item { position: absolute; left: 50%; bottom: 12px; width: min(40vw, 22vh); aspect-ratio: 1; translate: -50% 0; padding: 12px; background: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); pointer-events: none; }
.kk-item:empty { display: none; }
.kk-item svg { width: 100%; height: 100%; }
.kk-item.in { animation: pop-in .22s cubic-bezier(.3, 1.6, .5, 1); }
.kk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.kk-flash.go { animation: flash .4s; }
.kk-msg { position: absolute; top: 34%; left: 0; right: 0; text-align: center; color: #fff; font-size: 34px; font-weight: 900; opacity: 0; pointer-events: none; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.kk-msg.show { opacity: 1; animation: pop-in .3s cubic-bezier(.3, 1.6, .5, 1); }
.kk-msg.big { font-size: 64px; top: 22%; }
.kk-msg.plus { font-size: 56px; color: #FFF3B0; }
.kk-msg.warn { color: #fff; }
.kk-half.frozen { filter: grayscale(.9) brightness(.8); }
.kk-half.winner .kk-target { animation: pulse .8s infinite; }
.kk-half.loser { filter: brightness(.75); }
.kk-mid { height: 64px; flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--dark); color: #fff; position: relative; z-index: 2; }
.kk-mid .icon-btn { background: rgba(255, 255, 255, .14); color: #fff; position: absolute; left: 12px; }
.kk-vs { font-size: 28px; font-weight: 900; letter-spacing: 2px; }
.kk-intro { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(43, 29, 20, .7); }
.kk-intro-card { max-width: 380px; background: var(--cream); border-radius: 28px; padding: 26px 22px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; animation: pop-in .4s cubic-bezier(.3, 1.5, .5, 1); }
.kk-intro-card h2 { margin: 0; font-size: 34px; font-weight: 900; color: var(--primary-ink); }
.kk-intro-card p { margin: 0; font-size: 17px; font-weight: 700; color: var(--muted); }
.kk-howto { display: flex; gap: 14px; align-items: center; text-align: left; font-size: 16px; line-height: 1.35; color: var(--dark); }
.kk-howto-target { position: relative; width: 72px; height: 72px; flex: none; display: grid; place-items: center; background: var(--primary); border-radius: 50%; }
.kk-howto-target svg { width: 46px; height: 46px; position: relative; }

/* ---------- Katmanlar ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(43, 29, 20, .55); opacity: 0; transition: opacity .2s; }
.overlay.in { opacity: 1; }

.reward-card { position: relative; width: min(100%, 360px); padding: 26px 22px 22px; border-radius: 30px; background: var(--cream); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pop-in .45s cubic-bezier(.3, 1.5, .5, 1); overflow: hidden; }
.reward-face { width: 92px; height: 92px; border-radius: 50%; background: #fff; border: 4px solid var(--primary); object-fit: cover; }
.reward-msg { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.2; }
.reward-stars { display: flex; gap: 6px; }
.reward-stars span { width: 46px; height: 46px; color: #E9DCCB; }
.reward-stars span.on { color: #F6B92B; animation: star-in .5s calc(var(--n) * .15s) both cubic-bezier(.3, 1.6, .5, 1); }
.reward-stars svg { width: 100%; height: 100%; }
.reward-note { margin: 0; font-size: 15px; font-weight: 800; color: var(--primary-ink); text-transform: uppercase; letter-spacing: 2px; }
.reward-actions { display: flex; gap: 12px; margin-top: 6px; }
.reward-actions .btn { min-width: 76px; padding: 0 22px; }
.reward-actions .btn-ghost { padding: 0; width: 76px; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -20px; left: calc(var(--i) * 5.6%);
  width: 10px; height: 16px; border-radius: 3px;
  background: hsl(calc(var(--i) * 47), 85%, 58%);
  animation: confetti 1.8s calc(var(--i) * .07s) ease-in forwards;
}

.sheet, .break-card { width: min(100%, 420px); background: var(--cream); border-radius: 30px; padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; animation: pop-in .4s cubic-bezier(.3, 1.4, .5, 1); }
.sheet-face { width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--primary); background: #fff; object-fit: cover; margin-top: -60px; }
.sheet h2, .break-card h2 { margin: 0; font-size: 24px; font-weight: 900; }
.sheet-sub, .break-card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.4; }
.hold {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: 20px; border: 2px solid var(--line); background: #fff;
  touch-action: none;
}
.hold > svg { width: 30px; height: 30px; flex: none; color: var(--primary); position: relative; }
.hold-text { display: flex; flex-direction: column; position: relative; }
.hold-text b { font-size: 18px; }
.hold-text small { font-size: 14px; color: var(--muted); }
.hold-fill { position: absolute; inset: 0; background: rgba(232, 116, 42, .25); transform-origin: left; transform: scaleX(var(--p, 0)); }
.break-mascot { height: min(34vh, 260px); animation: bob 2.4s ease-in-out infinite; }

/* ---------- Yemeğin hikâyesi ---------- */
.story { background: var(--dark); display: flex; flex-direction: column; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); place-items: initial; }
.story-top { display: flex; align-items: center; gap: 10px; }
.story-progress { flex: 1; display: flex; gap: 5px; }
.story-progress i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.story-progress b { display: block; height: 100%; width: 0; background: var(--primary); }
.story-progress b.full { width: 100%; }
.story-progress b.run { animation: grow linear forwards; }
.story .icon-btn { background: rgba(255, 255, 255, .14); color: #fff; }
.story .icon-btn.big { width: 64px; height: 64px; background: var(--primary); }
.story-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.scene { position: relative; height: 100%; max-height: 62vh; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 26px; overflow: hidden; background: #F6E3C8; }
.story-caption { margin: 0; color: #fff; font-size: 21px; font-weight: 800; line-height: 1.35; text-align: center; min-height: 3em; max-width: 520px; align-self: center; }
.story-controls { display: flex; justify-content: center; align-items: center; gap: 18px; }
.story.paused .scene *, .story.paused .story-progress b { animation-play-state: paused !important; }

.st-wall { position: absolute; inset: 0 0 34% 0; background: repeating-linear-gradient(90deg, #FBEFD9 0 38px, #F6E3C8 38px 40px), #FBEFD9; }
.st-window { position: absolute; left: 14%; top: 10%; width: 34%; aspect-ratio: 1; border: 8px solid #fff; border-radius: 12px; background: linear-gradient(#9ED8F0, #D6F0F8); overflow: hidden; }
.st-sun { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #FFD84A; left: 28%; top: 70%; animation: sunrise 3s ease-out forwards; }
.st-counter { position: absolute; inset: 66% 0 0 0; background: linear-gradient(#B9773E 0 14px, #9B5F2E 14px); }
.st-mascot { position: absolute; bottom: 6%; height: 70%; }
.st-mascot.enter { left: 40%; animation: walk-in 1.6s ease-out both, bob 1.2s 1.6s ease-in-out infinite; }
.st-mascot.cheer { right: -4%; bottom: 4%; height: 62%; animation: bob .8s ease-in-out infinite; }
.st-tap { position: absolute; left: 44%; top: 6%; width: 12%; height: 18%; background: linear-gradient(90deg, #9AA5AD, #DDE3E7, #9AA5AD); border-radius: 0 0 40% 40%; }
.st-water { position: absolute; left: calc(47% + var(--i) * 1%); top: 24%; width: 8px; height: 14px; border-radius: 50%; background: #5DB6E5; animation: water 1s calc(var(--i) * .17s) linear infinite; }
.st-bowl { position: absolute; left: 18%; right: 18%; bottom: 20%; height: 22%; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #3B82C4; box-shadow: inset 0 10px 0 rgba(255, 255, 255, .25); z-index: 2; }
.st-drop { position: absolute; left: var(--x); bottom: 30%; width: 22%; animation: drop .9s calc(.6s + var(--i) * .9s) both cubic-bezier(.4, 0, .6, 1.4); z-index: 1; }
.st-skewer { position: absolute; left: 6%; right: 6%; top: 48%; height: 8px; border-radius: 4px; background: #8C8C8C; }
.st-piece { position: absolute; top: calc(48% - 7%); left: calc(14% + var(--i) * 12%); width: 13%; animation: slide-on .7s calc(.4s + var(--i) * .8s) both cubic-bezier(.3, 1.4, .5, 1); }
.st-night { position: absolute; inset: 0; background: radial-gradient(circle at 50% 75%, #6B2E12, #2B1D14 70%); }
.st-grill { position: absolute; left: 12%; right: 12%; bottom: 10%; height: 24%; border-radius: 12px; background: #3A3A3A; display: flex; justify-content: space-evenly; align-items: center; box-shadow: inset 0 0 0 6px #555; }
.st-grill i { width: 12%; height: 50%; border-radius: 50%; background: radial-gradient(#FFB347, #E8742A 60%, #8A2A0A); animation: glow 1.2s ease-in-out infinite alternate; }
.st-grill i:nth-child(2n) { animation-delay: .4s; }
.st-flame { position: absolute; bottom: 30%; left: calc(16% + var(--i) * 13%); width: 10%; aspect-ratio: .7; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFE27A, #FF8A1F 60%, transparent 70%); transform-origin: bottom; animation: flicker .5s calc(var(--i) * .09s) ease-in-out infinite alternate; }
.st-grill-sis { position: absolute; left: 10%; right: 10%; top: 26%; transform: rotate(45deg); animation: sizzle 1.5s ease-in-out infinite; }
.st-grill-sis svg { width: 100%; height: auto; }
.st-smoke { position: absolute; left: calc(30% + var(--i) * 18%); top: 30%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .35); filter: blur(6px); animation: smoke 3s calc(var(--i) * 1s) ease-out infinite; }
.st-wrap { position: absolute; left: 10%; right: 10%; top: 30%; aspect-ratio: 1; }
.st-lavas { position: absolute; inset: 0; animation: lavas-in .6s both, wrap-away .6s 3.6s forwards ease-in; }
.st-meat { position: absolute; width: 18%; left: calc(22% + var(--i) * 13%); top: 40%; animation: drop .7s calc(.8s + var(--i) * .5s) both cubic-bezier(.4, 0, .6, 1.4), wrap-away .6s 3.6s forwards ease-in; }
.st-durum { position: absolute; inset: 6%; animation: stamp .6s 4.1s both cubic-bezier(.3, 1.6, .5, 1); }
.st-cloth { position: absolute; inset: 0; background: repeating-conic-gradient(#E5392F 0 25%, #FFF8EE 0 50%) 0 0 / 60px 60px; opacity: .9; }
.st-plate { position: absolute; left: 6%; bottom: 14%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#fff 0 60%, #EDE3D6 61% 64%, #fff 65%); box-shadow: 0 10px 20px rgba(0, 0, 0, .25); animation: pop-in .6s both cubic-bezier(.3, 1.4, .5, 1); }
.st-plate-durum { position: absolute; inset: 14%; animation: stamp .6s .4s both cubic-bezier(.3, 1.6, .5, 1); }
.st-ayran { position: absolute; left: 50%; bottom: 46%; width: 24%; animation: pop-in .6s .8s both cubic-bezier(.3, 1.4, .5, 1); }
.scene svg { width: 100%; height: auto; }

/* ---------- Animasyonlar ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes pop-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes stamp { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes star-in { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.15); } 75% { transform: rotate(10deg) scale(1.15); } }
@keyframes roll-up { to { transform: scale(.2) rotate(200deg); opacity: 0; } }
@keyframes fill-pop { 40% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { 0% { opacity: .7; } 100% { opacity: 0; } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(560px) rotate(720deg); opacity: 0; } }
@keyframes grow { from { width: 0; } to { width: 100%; } }
@keyframes sunrise { from { top: 70%; } to { top: 18%; } }
@keyframes walk-in { 0% { transform: translateX(-140%); } 70% { transform: translateX(6%); } 100% { transform: translateX(0); } }
@keyframes water { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(260%); opacity: 0; } }
@keyframes drop { 0% { transform: translateY(-260%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes slide-on { 0% { transform: translateY(-300%) rotate(-30deg); opacity: 0; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes glow { from { filter: brightness(.8); } to { filter: brightness(1.35); } }
@keyframes flicker { from { transform: scaleY(.85) skewX(-4deg); } to { transform: scaleY(1.15) skewX(4deg); } }
@keyframes sizzle { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(43deg) translateY(-6px); } }
@keyframes smoke { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-160%) scale(1.4); opacity: 0; } }
@keyframes lavas-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wrap-away { to { transform: scale(.15) rotate(160deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 700px) {
  .home { padding-top: 32px; }
  .game-art { width: 96px; height: 96px; }
  .game-title { font-size: 20px; }
}

/* ---------- Canvas oyunları ---------- */
.game-shell.cv { height: 100dvh; min-height: 0; overflow: hidden; }
.game-shell.cv .game-bar { position: relative; z-index: 3; background: var(--cream); }
.game-shell.cv .game-stage { position: relative; }
.cv-host { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
.gcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.fx-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.usta, .boya { position: relative; }
.game-shell.cv ~ .demo-chip { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 70px); right: 10px; padding: 6px 10px; }
.game-shell.cv ~ .demo-chip span { display: none; }

/* Ortak tanıtım kartı */
.g-intro { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(43, 29, 20, .62); backdrop-filter: blur(3px); }
.g-intro-card {
  --c: var(--primary);
  width: min(100%, 400px); padding: 24px 20px 20px; border-radius: 30px;
  background: var(--cream); text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent), 0 20px 40px rgba(0, 0, 0, .3);
  animation: pop-in .4s cubic-bezier(.3, 1.5, .5, 1);
}
.g-intro-card h2 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--c); }
.g-intro-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.g-intro-card li { display: flex; gap: 12px; align-items: center; text-align: left; font-size: 16px; line-height: 1.35; padding: 8px 10px; border-radius: 18px; background: #fff; }
.g-intro-art { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--c) 14%, #fff); }
.g-intro-art svg { width: 44px; height: 44px; }
.g-intro-card .btn { background: var(--c); min-width: 180px; }
body:has(.g-intro) .demo-chip { display: none; }

/* ---------- Yükseltilmiş sayfa oyunları ---------- */
.board {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .45), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, #D9A066 0 6px, #CF9459 6px 9px, #D9A066 9px 15px),
    #D9A066;
  box-shadow: inset 0 0 0 10px #B57A42, inset 0 0 0 13px #8E5A2C, 0 14px 26px rgba(43, 29, 20, .25);
}
.board-base { inset: 12%; }
.tray-btn { background: radial-gradient(circle at 30% 20%, #fff, #FFF4E4); box-shadow: 0 5px 0 var(--line), 0 8px 14px rgba(43, 29, 20, .08); }
.ticket { border-style: solid; box-shadow: 0 6px 16px rgba(43, 29, 20, .1); }
.swatch { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), transparent 32%), var(--c); box-shadow: 0 0 0 2px var(--line), 0 4px 0 rgba(0, 0, 0, .12); }
.paper { background: #fff linear-gradient(90deg, rgba(43, 29, 20, .03) 1px, transparent 1px) 0 0 / 22px 22px; }
.kk-1 { background: radial-gradient(circle at 50% 100%, #2AA597, var(--accent) 60%, #14524C); }
.kk-2 { background: radial-gradient(circle at 50% 100%, #FF9A52, var(--primary) 60%, #A84A10); }
.kk-item { background: radial-gradient(circle at 35% 28%, #fff, #FFF1DE 70%, #EBD3B4); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .3); }
.kk-score b, .kk-vs, .kk-msg { font-family: var(--display); }
.reward-msg, .sheet h2, .break-card h2, .kk-intro-card h2 { font-family: var(--display); }

@media (min-width: 700px) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-card.featured .game-art { width: 140px; height: 140px; }
}

/* ---------- Ana ekran: yürüyen maskot, fotoğraflı kart, kupa ---------- */
.brand-actions { display: flex; gap: 8px; }
.trophy-btn { background: #FFCB3D; color: #7A4A0A; box-shadow: 0 3px 0 #D99A10; }
.trophy-btn svg { width: 26px; height: 26px; }
.hero { overflow: hidden; }
.walker {
  position: absolute; bottom: 0; left: 50%; height: 100%; aspect-ratio: 225 / 360;
  background: url("../assets/mini-kebapci/yuruyus.webp") 0 0 / 1200% 100% no-repeat;
  filter: drop-shadow(0 10px 12px rgba(43, 29, 20, .2));
  display: none; translate: -50% 0;
}
.hero.walking .walker { display: block; animation: walk-cycle .9s steps(12) infinite, walk-across 2.6s cubic-bezier(.25, .7, .4, 1) both; }
.hero.walking .hero-mascot { opacity: 0; }
.hero.walking .bubble { animation-delay: 2.4s; }
.hero.arrived .hero-mascot { animation: bob 3s ease-in-out infinite, fade-in .3s both; }
@keyframes walk-cycle { to { background-position: 109.0909% 0; } }
@keyframes walk-across { from { translate: -260% 0; } to { translate: -50% 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.game-card.photo .game-art { padding: 2px; overflow: hidden; background: radial-gradient(circle at 35% 30%, #FFF4E2, #F2C08A); }
.game-card.photo .game-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.25) translateY(10%); }
.sticker.photo { overflow: hidden; background: #F2C08A; }
.sticker.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.g-intro-art img { width: 50px; height: 50px; object-fit: contain; }

/* ---------- Ödül kartı + skor tablosu ---------- */
.reward { overflow-y: auto; align-items: start; }
.reward-card { margin-block: auto; }
.reward-card.with-score { gap: 12px; }
.reward-head { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; }
.reward-head .reward-face { width: 72px; height: 72px; flex: none; }
.reward-head .reward-msg { font-size: 20px; }
.reward-head .reward-stars span { width: 34px; height: 34px; }
.reward-card:not(.with-score) .reward-head { flex-direction: column; text-align: center; }
.reward-card:not(.with-score) .reward-head .reward-face { width: 92px; height: 92px; }
.reward-card:not(.with-score) .reward-stars { justify-content: center; }
.reward-score { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 10px 26px; border-radius: 18px; background: var(--dark); color: #FFE27A; }
.reward-score small { font-size: 11px; letter-spacing: 2px; color: #fff; opacity: .7; font-weight: 800; }
.reward-score b { font-family: var(--display); font-size: 42px; font-variant-numeric: tabular-nums; }
.lb-form { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.lb-form label { font-weight: 900; font-size: 15px; }
.lb-avatars { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-avbtn { width: 40px; height: 40px; padding: 4px; border-radius: 12px; border: 2px solid var(--line); background: #fff; }
.lb-avbtn svg { width: 100%; height: 100%; }
.lb-avbtn.on { border-color: var(--primary); background: #FFF0E2; transform: scale(1.08); }
.lb-row { display: flex; gap: 8px; }
.lb-row input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border-radius: 16px; border: 2px solid var(--line); font: 800 18px var(--font); color: var(--dark); background: #fff; }
.lb-row input:focus { outline: 3px solid var(--primary); outline-offset: 1px; }
.lb-row input.shake { animation: shake .45s; border-color: #E5392F; }
.lb-row .btn { min-height: 52px; padding: 0 18px; font-size: 17px; }
.lb-note { color: var(--muted); font-size: 12px; }
.lb-saved { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-weight: 900; color: var(--accent); }
.lb-saved svg { width: 24px; height: 24px; }
.lb-box { width: 100%; text-align: left; }
.lb-title { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 15px; margin-bottom: 6px; color: #9E5A0A; }
.lb-title svg { width: 20px; height: 20px; color: #F6B92B; }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: #fff; font-weight: 800; }
.lb-list li.me { background: #FFF0D0; outline: 2px solid #F6B92B; }
.lb-rank { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--line); font-size: 13px; font-weight: 900; }
.lb-rank.r1 { background: #FFCB3D; } .lb-rank.r2 { background: #D6DCE0; } .lb-rank.r3 { background: #E8B48A; }
.lb-av { width: 30px; height: 30px; flex: none; }
.lb-av svg { width: 100%; height: 100%; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pts { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.lb-empty, .lb-scope { margin: 6px 0; color: var(--muted); font-size: 14px; text-align: center; }
.champs { place-items: center; }
.board-card { width: min(100%, 420px); max-height: 90dvh; overflow-y: auto; background: var(--cream); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; animation: pop-in .35s cubic-bezier(.3, 1.4, .5, 1); }
.board-top { display: flex; align-items: center; justify-content: space-between; }
.board-top h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 28px; }
.board-top h2 svg { width: 28px; height: 28px; color: #F6B92B; }
.board-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.board-tabs button { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; background: #fff; box-shadow: 0 2px 0 var(--line); }
.board-tabs button[aria-selected="true"] { background: var(--dark); color: #fff; }

/* ---------- Usta Sensin: Dürüm Yarışı ---------- */
.usta { gap: 8px; padding-bottom: 24px; }
.u-hud { display: flex; align-items: center; gap: 12px; width: 100%; }
.u-time { position: relative; flex: 1; height: 26px; border-radius: 13px; background: #EFE4D6; overflow: hidden; }
.u-time i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #E8742A, #FFCB3D); border-radius: 13px; transition: width .1s linear; }
.u-time span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.usta.hurry .u-time i { background: #E5392F; animation: pulse .5s infinite; }
.u-score { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 70px; }
.u-score b { font-family: var(--display); font-size: 30px; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.u-score small { font-size: 11px; font-weight: 800; color: var(--muted); }
.u-rank { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 13px; font-weight: 900; }
.u-rank-now { color: var(--accent); white-space: nowrap; }
.u-rank-next { color: var(--muted); white-space: nowrap; }
.u-rank-bar { flex: 1; height: 10px; border-radius: 5px; background: #EFE4D6; overflow: hidden; }
.u-rank-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 5px; transition: width .3s; }
.u-cust { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.u-queue { display: flex; flex-direction: column; gap: 2px; }
.u-q { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #F3E3CC; opacity: .75; }
.u-q svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.5) translateY(8%); }
.u-person { position: relative; width: 96px; height: 96px; flex: none; border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #FFF4E2, #F2D2A8); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06); }
.u-person svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.15) translateY(6%); }
.u-person.enter { animation: pop-in .4s cubic-bezier(.3, 1.5, .5, 1); }
.u-person.leave { animation: shake .5s; opacity: .5; }
.u-person[data-mood="angry"] { animation: wiggle .5s infinite; }
.u-order { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.u-order .ticket { min-height: 64px; }
.u-order .ticket::before { top: 22px; }
.u-pat { height: 8px; border-radius: 4px; background: #EFE4D6; overflow: hidden; }
.u-pat i { display: block; height: 100%; width: 100%; border-radius: 4px; }
.ticket-item.done { opacity: .5; }
.board { width: min(64vw, 30vh, 320px); }
.board.fire { box-shadow: inset 0 0 0 10px #E8742A, inset 0 0 0 13px #C2391F, 0 0 0 6px rgba(255, 140, 40, .35), 0 0 40px rgba(255, 120, 30, .6); animation: fire-glow .6s ease-in-out infinite alternate; }
@keyframes fire-glow { to { box-shadow: inset 0 0 0 10px #FFB02E, inset 0 0 0 13px #E8742A, 0 0 0 10px rgba(255, 140, 40, .25), 0 0 60px rgba(255, 160, 40, .8); } }
.u-streak { position: absolute; top: -8px; right: -8px; display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 999px; background: #E5392F; color: #FFE27A; font-family: var(--display); font-size: 20px; box-shadow: 0 4px 10px rgba(229, 57, 47, .5); animation: pulse .6s infinite; }
.u-streak svg { width: 20px; height: 20px; }
.tray { margin-top: 26px; }
.tray-btn { display: flex; flex-direction: column; gap: 2px; padding: 6px; aspect-ratio: 1.25; }
.tray-btn svg { width: 64%; height: 64%; flex: 1; }
.tray-btn span { font-size: 13px; font-weight: 800; color: var(--muted); }

/* ---------- Kap Kap v2 ---------- */
.kk-goal { position: absolute; top: 12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 22px; background: #FFF8EE; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); pointer-events: none; z-index: 2; }
.kk-goal-tag { position: absolute; top: -10px; left: 14px; padding: 2px 10px; border-radius: 999px; background: #2B1D14; color: #FFCB3D; font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.kk-goal-art { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 3px #FFCB3D; }
.kk-goal-art svg { width: 54px; height: 54px; }
.kk-goal-name { font-family: var(--display); font-size: 30px; color: var(--dark); letter-spacing: 1px; }
.kk-goal.new { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1); }
.kk-pips { position: absolute; top: 100px; left: 50%; translate: -50% 0; display: flex; gap: 8px; pointer-events: none; z-index: 2; }
.kk-pips i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .15); }
.kk-pips i.on { background: #FFCB3D; border-color: #fff; animation: stamp .35s; }
.kk-plate { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; width: min(44vw, 21vh); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #FFF1DE 62%, #EBD3B4 63%, #fff 70%, #E6D2B6); box-shadow: 0 12px 24px rgba(0, 0, 0, .3); pointer-events: none; }
.kk-item { width: 74%; height: 74%; display: grid; place-items: center; }
.kk-item svg { width: 100%; height: 100%; }
.kk-item.in { animation: spin-in .28s cubic-bezier(.3, 1.6, .5, 1); }
.kk-item.gold { filter: drop-shadow(0 0 14px #FFCB3D); }
@keyframes spin-in { from { transform: scale(.2) rotate(-120deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.kk-msg small { display: block; font-size: 18px; letter-spacing: 3px; opacity: .85; }
.kk-msg.splash { font-size: 54px; top: 34%; color: #FFE27A; }
.kk-msg.miss { font-size: 24px; opacity: .8; }
.kk-ice { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(200, 235, 255, .2), rgba(160, 215, 245, .7)); transition: opacity .15s; }
.kk-half.frozen .kk-ice { opacity: 1; }
.kk-speed { position: absolute; right: 70px; display: flex; gap: 3px; }
.kk-speed i { width: 8px; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.kk-speed i.on { background: #FF8A2E; }
.kk-mid .demo-chip, .kk ~ .demo-chip { z-index: 60; }
.kk-intro-card { gap: 12px; }
.kk-howto-goal { position: relative; width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 3px #FFCB3D; }
.kk-howto-goal small { font-size: 10px; font-weight: 900; letter-spacing: 2px; color: var(--muted); }
.kk-howto-goal svg { width: 46px; height: 46px; }
.kk-howto-goal b { font-family: var(--display); font-size: 15px; }
.kk-howto-goal.gold { background: #FFF6D8; }

/* ---------- Boya ve Çiz ---------- */
.boya { gap: 10px; padding-bottom: 24px; }
.b-modes { display: flex; gap: 8px; width: 100%; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.b-modes::-webkit-scrollbar { display: none; }
.page-thumb { flex: none; width: 66px; height: 70px; }
.draw-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #FFF3D6; font-size: 11px; font-weight: 900; }
.draw-thumb svg { width: 30px; height: 30px; }
.paper { width: min(100%, 46vh); max-width: 100%; position: relative; }
.paper.drawing { padding: 0; overflow: hidden; touch-action: none; }
.draw-canvas { width: 100%; height: 100%; display: block; border-radius: 22px; touch-action: none; cursor: crosshair; }
.b-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.b-group { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #fff; box-shadow: 0 2px 0 var(--line); }
.b-tool { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--dark); }
.b-tool svg { width: 26px; height: 26px; }
.b-tool.on { background: var(--dark); color: var(--sel, #fff); }
.b-tool.on svg circle { fill: var(--sel, #fff); }
.b-pat { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; font-weight: 800; font-size: 13px; }
.b-pat[aria-checked="true"] { background: var(--dark); color: #fff; }
.b-pat-sw { width: 18px; height: 18px; border-radius: 6px; background: var(--sel, #E5392F); border: 2px solid rgba(255, 255, 255, .6); }
.pat-cizgi { background: repeating-linear-gradient(45deg, var(--sel), var(--sel) 4px, rgba(255, 255, 255, .6) 4px 7px); }
.pat-nokta { background: radial-gradient(circle, rgba(255, 255, 255, .8) 2px, transparent 2.5px) 0 0 / 7px 7px, var(--sel); }
.pat-parlak { background: linear-gradient(160deg, #fff, var(--sel) 55%, #000 160%); }
.b-stamps { display: flex; gap: 6px; width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.b-stamp { width: 50px; height: 50px; flex: none; padding: 6px; border-radius: 14px; border: 2px solid var(--line); background: #fff; }
.b-stamp svg { width: 100%; height: 100%; }
.b-stamp.on { border-color: var(--primary); background: #FFF0E2; }
.palette { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.swatch { border-width: 3px; }

.kk-plate .kk-item { position: static; translate: none; background: none; box-shadow: none; padding: 0; width: 74%; height: 74%; aspect-ratio: auto; border-radius: 0; }

/* ---------- Çizgi filmler: seçici ---------- */
.tone-gold { --tone: #C98A0E; }
.sticker-gold { background: #C98A0E; }
.films { place-items: center; }
.films-card { width: min(100%, 460px); max-height: 92dvh; overflow-y: auto; background: var(--cream); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; animation: pop-in .35s cubic-bezier(.3, 1.4, .5, 1); }
.films-top { display: flex; align-items: center; justify-content: space-between; }
.films-top h2 { margin: 0; font-family: var(--display); font-size: 28px; }
.films-page { width: 100%; max-width: 560px; margin: 0 auto; padding: 4px 16px 90px; display: flex; flex-direction: column; gap: 12px; }
.films-lead { margin: 0; font-size: 16px; font-weight: 700; color: var(--muted); }
.films-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.film { display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 var(--line), 0 8px 16px rgba(43, 29, 20, .08); text-align: left; transition: transform .12s; }
.film:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.film-art { position: relative; width: 88px; height: 88px; flex: none; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 35% 30%, #FFF4E2, #F5D3A4); overflow: hidden; }
.film-art svg { width: 76%; height: 76%; }
.film-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.film-play { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.film-play svg { width: 16px; height: 16px; }
.film-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.film-text b { font-family: var(--display); font-size: 21px; line-height: 1.1; }
.film-text small { font-size: 14px; color: var(--muted); font-weight: 700; }
.film-text em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--primary-ink); }
.story-title { margin: -4px 0 0; text-align: center; color: rgba(255, 255, 255, .7); font-weight: 800; font-size: 14px; letter-spacing: 1px; }

/* ---------- Çizgi filmler: sahne parçaları ---------- */
.scene { container-type: size; }
.scene > * { position: absolute; }
.st-s svg, .st-fly svg, .st-person svg, .st-crate svg, .st-stack svg, .st-ticket svg { width: 100%; height: 100%; display: block; }

/* Sabah gökyüzü ve sokak */
.st-dawn { inset: 0; background: linear-gradient(#FFB38A 0%, #FFD7A8 38%, #FFF0D6 62%); overflow: hidden; }
.st-day .st-dawn { background: linear-gradient(#8ED0F2, #D4EEF8 60%, #F4FAFC); }
.st-sunset .st-dawn { background: linear-gradient(#F27A54, #FFB36B 45%, #FFE1B0 65%); }
.st-day, .st-sunset { inset: 0; }
.st-dsun { position: absolute; left: 62%; top: 40%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#FFF6C8, #FFD34A 60%, #FFB02E); box-shadow: 0 0 60px 20px rgba(255, 210, 90, .5); animation: sunrise2 4s ease-out both; }
.st-day .st-dsun { top: 8%; animation: none; }
@keyframes sunrise2 { from { top: 52%; } to { top: 14%; } }
.st-cloud { position: absolute; width: 28%; height: 7%; border-radius: 99px; background: rgba(255, 255, 255, .9); animation: cloud-drift 18s linear infinite; }
.st-cloud::before, .st-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.st-cloud::before { width: 50%; height: 170%; left: 15%; bottom: 20%; }
.st-cloud::after { width: 38%; height: 130%; left: 50%; bottom: 25%; }
.st-cloud.c1 { left: 6%; top: 12%; }
.st-cloud.c2 { left: 70%; top: 24%; width: 20%; animation-duration: 26s; }
@keyframes cloud-drift { from { translate: 0 0; } to { translate: -40% 0; } }
.st-hills { left: 0; right: 0; bottom: 30%; height: 26%; background: radial-gradient(60% 100% at 25% 100%, #7DBE6A 98%, transparent 100%), radial-gradient(55% 90% at 80% 100%, #6AAE5C 98%, transparent 100%); background-size: 100% 100%; background-repeat: repeat-x; }
.st-hills.moving { animation: scroll-x 9s linear infinite; background-size: 50% 100%; }
.st-town { left: 0; right: 0; bottom: 27%; height: 22%; overflow: hidden; }
.st-strip { position: absolute; inset: 0 auto 0 0; width: 200%; display: flex; align-items: flex-end; }
.st-town.moving .st-strip { animation: strip 6s linear infinite; }
@keyframes strip { to { transform: translateX(-50%); } }
.st-h { position: relative; flex: none; width: 11%; height: var(--h); margin-right: 1%; background: var(--w); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .06); }
.st-h::before { content: ""; position: absolute; left: -12%; right: -12%; bottom: 100%; height: 34%; background: var(--r); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.st-h::after { content: ""; position: absolute; left: 22%; top: 20%; width: 22%; height: 22%; background: #8EC8E8; box-shadow: 2.4em 0 0 #8EC8E8, 1.2em 2.2em 0 #2E6B8F; font-size: clamp(4px, 1.2cqw, 10px); }
.st-tree { position: relative; flex: none; width: 4%; height: 46%; margin-right: 1%; background: radial-gradient(circle at 50% 30%, #7DC85A 0 42%, transparent 43%), linear-gradient(90deg, transparent 44%, #7A4A26 44% 56%, transparent 56%) 0 100% / 100% 50% no-repeat; }
.st-road { left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(90deg, #fff 0 9%, transparent 9% 18%) 0 52% / 100% 4% no-repeat, linear-gradient(#C9C2B6 0 10%, #5C6066 10% 92%, #7CC45A 92%); }
.st-road.moving { animation: road-move .5s linear infinite; }
@keyframes scroll-x { from { background-position-x: 0; } to { background-position-x: -100cqw; } }
@keyframes road-move { from { background-position: 0 52%, 0 0; } to { background-position: -18cqw 52%, 0 0; } }
.st-moto { width: auto; height: 34%; bottom: 7%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
.st-moto.ride { left: 22%; animation: drive-in 1.6s cubic-bezier(.2, .8, .3, 1) both, moto-bump .3s 1.6s ease-in-out infinite alternate; }
.st-moto.ride-back { right: 18%; animation: drive-in-r 1.6s cubic-bezier(.2, .8, .3, 1) both, moto-bump .3s 1.6s ease-in-out infinite alternate; }
.st-moto.park { left: 2%; height: 26%; bottom: 4%; z-index: 3; }
.st-moto.wait { left: 18%; animation: wait-go 7s ease-in both; }
@keyframes drive-in { from { translate: -130cqw 0; } to { translate: 0 0; } }
@keyframes drive-in-r { from { translate: 130cqw 0; } to { translate: 0 0; } }
@keyframes moto-bump { from { transform: translateY(0) rotate(0); } to { transform: translateY(-1.2%) rotate(-1deg); } }
@keyframes wait-go { 0%, 55% { translate: 0 0; } 100% { translate: 110cqw 0; } }

/* Dükkânlar */
.st-shop { left: 6%; right: 6%; top: 14%; bottom: 24%; border-radius: 10px 10px 0 0; background: linear-gradient(#FFF1DC, #F3DDBE); box-shadow: 0 0 0 5px #7A4A26; overflow: visible; }
.st-sign { position: absolute; left: 18%; right: 18%; top: -9%; padding: 2% 0; border-radius: 10px; background: #2B1D14; color: #FFCB3D; text-align: center; font-family: var(--display); font-weight: 800; font-size: 8cqw; letter-spacing: 3px; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); z-index: 2; }
.st-awning { position: absolute; left: -4%; right: -4%; top: 6%; height: 14%; background: repeating-linear-gradient(90deg, var(--aw1) 0 12.5%, #fff 12.5% 25%); border-radius: 0 0 50% 50% / 0 0 40% 40%; box-shadow: 0 6px 0 rgba(0, 0, 0, .1); z-index: 1; }
.st-shop.kasap { --aw1: #E5392F; }
.st-shop.manav { --aw1: #3E9B3A; }
.st-shop.firin { --aw1: #E8742A; }
.st-inside { position: absolute; left: 30%; right: 30%; top: 18%; height: 46%; }
.st-person { width: 100%; height: 100%; }
.st-person.keeper { position: absolute; inset: 0; animation: bob 2.2s ease-in-out infinite; }
.st-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; display: flex; align-items: center; justify-content: space-evenly; padding: 0 4%; background: linear-gradient(#B97A40, #8E5A2C); border-top: 6px solid #D49558; }
.st-shelf .st-s { position: relative; width: 27%; aspect-ratio: 1; animation: pop-in .5s calc(.3s + var(--i, 0) * .1s) both; }
.st-crate { position: relative; width: 23%; aspect-ratio: 1.2; border-radius: 6px; background: linear-gradient(#D9A066, #A86B34); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15); }
.st-crate span { position: absolute; width: 62%; aspect-ratio: 1; left: calc(var(--i) * 20% - 2%); bottom: calc(30% + (var(--i) % 2) * 12%); animation: pop-in .4s calc(.2s + var(--i) * .12s) both; }
.st-stack { position: relative; width: 40%; height: 90%; }
.st-stack span { position: absolute; left: 0; right: 0; bottom: calc(var(--i) * 14%); height: 70%; transform: scaleY(.45); animation: pop-in .4s calc(var(--i) * .2s) both; }
.st-steam { left: calc(40% + var(--i) * 9%); top: 46%; width: 8%; aspect-ratio: .5; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(4px); animation: smoke 2.4s calc(var(--i) * .7s) ease-out infinite; }
.st-steam.pot { top: 30%; left: calc(36% + var(--i) * 10%); }
.st-say { max-width: 46%; padding: 3% 4%; border-radius: 16px; background: #fff; font-weight: 800; font-size: 4.4cqw; line-height: 1.25; color: var(--dark); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); z-index: 4; animation: pop-in .45s .8s both cubic-bezier(.3, 1.6, .5, 1); }
.st-say.right { right: 4%; top: 22%; border-radius: 16px 16px 4px 16px; }
.st-say.left { left: 4%; top: 18%; border-radius: 16px 16px 16px 4px; }
.st-say.cow-say { left: 6%; top: 34%; font-size: 6cqw; font-family: var(--display); }
.st-fly { width: 16%; aspect-ratio: 1; left: var(--x0); top: var(--y0); z-index: 5; animation: fly-bag 1s cubic-bezier(.5, -.4, .6, 1) both; }
@keyframes fly-bag { 0% { left: var(--x0); top: var(--y0); transform: scale(1); opacity: 0; } 15% { opacity: 1; } 100% { left: var(--x1); top: var(--y1); transform: scale(.35) rotate(220deg); opacity: 0; } }
.st-bust { height: 30%; bottom: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); animation: bust-up .6s .3s both cubic-bezier(.3, 1.4, .5, 1); z-index: 6; }
.st-bust.b-right { right: 2%; }
.st-bust.late { animation-delay: 3.4s; }
@keyframes bust-up { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* Mutfak: lahmacun */
.st-board { left: 8%; right: 8%; bottom: 8%; height: 34%; border-radius: 20px; background: repeating-linear-gradient(90deg, #D9A066 0 9%, #CF9459 9% 10%), #D9A066; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12); }
.st-flour { left: calc(30% + var(--i) * 10%); bottom: 34%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(5px); animation: smoke 1.6s calc(var(--i) * .4s) ease-out infinite; }
.st-dough { left: 32%; bottom: 16%; width: 36%; aspect-ratio: 1.3; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF8E6, #F2DDB0 70%, #DDBE86); box-shadow: 0 6px 10px rgba(0, 0, 0, .15); animation: knead .7s ease-in-out infinite alternate; }
@keyframes knead { from { transform: scale(1.1, .85); } to { transform: scale(.9, 1.1) rotate(8deg); } }
.st-mascot.side { right: -6%; bottom: 36%; height: 50%; left: auto; animation: bob 1s ease-in-out infinite; }
.st-sheet { left: 30%; right: 30%; bottom: 14%; height: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF8E6, #F2DDB0 75%, #DDBE86); animation: roll-out 3s ease-out forwards; }
.st-sheet.done { left: 12%; right: 12%; animation: none; }
@keyframes roll-out { to { left: 12%; right: 12%; } }
.st-pin { left: 20%; width: 60%; bottom: 26%; height: 6%; animation: pin-roll 1.2s ease-in-out infinite alternate; }
.st-pin i { position: absolute; inset: 0 12%; border-radius: 99px; background: linear-gradient(#F2C691, #C98A4E); box-shadow: 0 4px 6px rgba(0, 0, 0, .2); }
.st-pin::before, .st-pin::after { content: ""; position: absolute; top: 20%; bottom: 20%; width: 14%; border-radius: 99px; background: #8E5A2C; }
.st-pin::before { left: 0; } .st-pin::after { right: 0; }
@keyframes pin-roll { from { translate: -18% 0; } to { translate: 18% 0; } }
.st-s.chop { width: 18%; aspect-ratio: 1; bottom: 18%; animation: chop-shrink 4s ease-in forwards; }
.chop.c1 { left: 12%; } .chop.c2 { left: 30%; animation-delay: 1.2s; } .chop.c3 { left: 48%; animation-delay: 2.4s; }
@keyframes chop-shrink { 0%, 20% { transform: scale(1); } 60% { transform: scale(.6) rotate(10deg); } 100% { transform: scale(.3); opacity: .3; } }
.st-knife { left: 22%; bottom: 30%; width: 34%; height: 8%; border-radius: 4px 40% 40% 4px; background: linear-gradient(90deg, #6E4420 0 30%, #DDE3E7 30%, #A9B2B9); animation: knife-chop .35s ease-in-out infinite alternate, knife-move 4s linear forwards; transform-origin: left; }
@keyframes knife-chop { from { transform: rotate(-14deg); } to { transform: rotate(4deg); } }
@keyframes knife-move { to { left: 48%; } }
.st-mixbowl { right: 6%; bottom: 14%; width: 30%; aspect-ratio: 1.6; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#5DA3D8, #2F6FA8); overflow: hidden; }
.st-mix { position: absolute; inset: -20% 10% 40%; border-radius: 50%; background: radial-gradient(circle, #C8603A 30%, transparent 32%) 0 0 / 22% 30%, radial-gradient(circle, #E5392F 25%, transparent 27%) 10% 10% / 26% 34%, radial-gradient(circle, #43AA4F 25%, transparent 27%) 4% 18% / 30% 28%, #A8441F; animation: spin 3s linear infinite; }
.st-harc { left: 14%; right: 14%; bottom: 17%; height: 16%; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #C8603A, #9E3A1A); transform-origin: left; animation: spread 3s ease-out both; }
@keyframes spread { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.st-lahm { left: 14%; right: 14%; bottom: 4%; height: 42%; opacity: 0; animation: fade-in .8s 3.6s forwards; }
.st-lahm svg { width: 100%; height: 100%; }
.st-stone { left: 12%; right: 12%; top: 18%; bottom: 22%; border-radius: 50% 50% 8% 8% / 70% 70% 8% 8%; background: repeating-linear-gradient(0deg, transparent 0 15%, rgba(80, 30, 10, .25) 15% 16%), radial-gradient(circle at 40% 25%, #E07A4E, #B24A2A 60%, #6E2614); }
.st-mouth { position: absolute; left: 25%; right: 25%; bottom: 0; height: 46%; border-radius: 50% 50% 0 0 / 80% 80% 0 0; background: #1A0904; overflow: hidden; }
.st-mouth i { position: absolute; inset: 20% 10% -20%; border-radius: 50%; background: radial-gradient(circle at 50% 80%, #FFE27A, #FF8A2E 45%, rgba(200, 40, 0, 0) 75%); animation: glow 1s ease-in-out infinite alternate; }
.st-peel { left: -10%; bottom: 20%; width: 70%; height: 10%; border-radius: 6px; background: linear-gradient(#D9A066, #A86B34); animation: peel-in 4s ease-in-out forwards; }
.st-peel-l { position: absolute; right: 0; bottom: 30%; width: 50%; aspect-ratio: 1.6; transform: scaleY(.5); transform-origin: bottom; }
.st-peel-l svg { width: 100%; height: 100%; }
@keyframes peel-in { 0% { translate: -60% 0; } 45% { translate: 30% 0; } 60% { translate: 30% 0; } 100% { translate: -80% 0; } }

/* Çiftlik ve ayran */
.st-farm { inset: 0; background: linear-gradient(#9ED8F0 0 52%, #8CCB6A 52%); }
.st-barn { position: absolute; right: 6%; top: 24%; width: 36%; height: 30%; background: #C2391F; box-shadow: inset 0 0 0 6px #fff; clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.st-fence { position: absolute; left: 0; right: 0; top: 50%; height: 8%; background: repeating-linear-gradient(90deg, #fff 0 3%, transparent 3% 10%), linear-gradient(transparent 30%, #fff 30% 42%, transparent 42% 70%, #fff 70% 82%, transparent 82%); }
.st-s.cow { left: 30%; bottom: 14%; width: 46%; aspect-ratio: 1; animation: cow-chew 1.6s ease-in-out infinite; }
@keyframes cow-chew { 50% { transform: rotate(-2deg) translateY(-1%); } }
.st-person.farmer { left: 4%; bottom: 10%; width: 30%; height: auto; aspect-ratio: 1; }
.st-bucket { right: 10%; bottom: 10%; width: 16%; aspect-ratio: .9; border-radius: 4px 4px 30% 30%; background: linear-gradient(90deg, #8C959C, #DDE3E7, #8C959C); overflow: hidden; }
.st-bucket i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #fff; animation: fill-up 4s 1s ease-out forwards; }
@keyframes fill-up { to { height: 80%; } }
.st-pot { left: 26%; right: 26%; bottom: 26%; height: 26%; border-radius: 0 0 18% 18%; background: linear-gradient(90deg, #6C757C, #DDE3E7 40%, #8C959C); box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.st-pot::before { content: ""; position: absolute; left: -8%; right: -8%; top: -6%; height: 12%; border-radius: 99px; background: #5B6268; }
.st-milk { position: absolute; left: 6%; right: 6%; top: 8%; height: 18%; border-radius: 50%; background: #FFFFFF; animation: fill-up2 3s ease-out both; }
@keyframes fill-up2 { from { opacity: 0; } to { opacity: 1; } }
.st-pour { left: 46%; top: 0; width: 6%; height: 50%; border-radius: 99px; background: linear-gradient(#fff, #F4F7F8); animation: pour 3s ease-in-out forwards; }
@keyframes pour { 0% { clip-path: inset(0 0 100% 0); } 20%, 70% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }
.st-stove { left: 22%; right: 22%; bottom: 20%; height: 6%; display: flex; justify-content: space-evenly; }
.st-stove i { width: 14%; height: 140%; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 80%, #9ED8FF, #3B82C4 60%, transparent 70%); animation: flicker .4s calc(var(--i) * .1s) ease-in-out infinite alternate; transform-origin: bottom; }
.st-sky-night { inset: 0; background: linear-gradient(#1E2A4A, #3A3F6E); }
.st-moon { position: absolute; right: 12%; top: 8%; width: 18%; aspect-ratio: 1; border-radius: 50%; box-shadow: -14px 6px 0 0 #FFF2B8; }
.st-star { position: absolute; left: calc(var(--i) * 8%); top: calc(6% + (var(--i) * 37 % 40) * 1%); width: 2%; aspect-ratio: 1; border-radius: 50%; background: #FFF6C8; animation: twinkle 1.4s calc(var(--i) * .2s) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: scale(1.2); } }
.st-counter.dark { background: linear-gradient(#6E4A2A 0 14px, #4A2E18 14px); }
.st-pot.covered .st-cover { position: absolute; left: -10%; right: -10%; top: -16%; height: 50%; border-radius: 40% 40% 10% 10%; background: repeating-conic-gradient(#E5392F 0 25%, #FFF8EE 0 50%) 0 0 / 16px 16px; }
.st-zz { right: 20%; top: 30%; color: #fff; font-family: var(--display); font-size: 9cqw; opacity: .8; animation: bob 1.6s ease-in-out infinite; }
.st-zz span { font-size: 70%; margin-left: 4px; }
.st-yog { position: absolute; left: 6%; right: 6%; top: 6%; height: 24%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFFFFF, #F2EFE6); }
.st-spoon { position: absolute; left: 46%; top: -46%; width: 10%; height: 70%; border-radius: 40% 40% 10px 10px; background: linear-gradient(90deg, #A9B2B9, #F2F4F6, #A9B2B9); animation: stamp .6s .8s both; }
.st-jug { left: 32%; right: 32%; bottom: 26%; height: 44%; border-radius: 8px 8px 24px 24px; background: rgba(230, 242, 248, .6); box-shadow: inset 0 0 0 5px rgba(160, 190, 205, .8); overflow: hidden; }
.st-jug-yog { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #FFFFFF; }
.st-jug-water { position: absolute; left: 0; right: 0; bottom: 30%; height: 0; background: rgba(200, 230, 245, .9); animation: jug-fill 2s .4s ease-out forwards; }
@keyframes jug-fill { to { height: 40%; } }
.st-foam { position: absolute; left: 0; right: 0; top: 0; height: 0; background: radial-gradient(circle, #fff 40%, transparent 42%) 0 0 / 18% 40%, #FDFDFB; animation: foam 3s 2.6s ease-out forwards; }
@keyframes foam { to { height: 34%; } }
.st-whisk { position: absolute; left: 44%; top: -10%; width: 12%; height: 80%; border-radius: 0 0 50% 50%; border: 3px solid #8C959C; border-top: 0; animation: whisk .15s 2.4s linear infinite alternate; }
@keyframes whisk { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.st-salt { left: calc(46% + var(--i) * 2%); top: 14%; width: 1.4%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); animation: salt-fall .8s calc(1.2s + var(--i) * .1s) ease-in both; }
@keyframes salt-fall { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26cqh); opacity: 0; } }
.st-ayran.big { width: 30%; left: 52%; bottom: 40%; }

/* Teslimat */
.st-phone { right: 14%; top: 18%; width: 20%; aspect-ratio: .6; border-radius: 18%; background: #2B1D14; box-shadow: inset 0 0 0 4px #4A3A30; animation: ring .12s ease-in-out infinite alternate; }
.st-phone i { position: absolute; inset: 10% 10% 18%; border-radius: 8%; background: linear-gradient(#FFE27A, #E8742A); }
@keyframes ring { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.st-ticket { left: 10%; top: 22%; width: 48%; display: flex; gap: 4%; padding: 4%; border-radius: 10px; background: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .15); animation: pop-in .5s 1s both cubic-bezier(.3, 1.6, .5, 1); }
.st-ticket svg { width: 30%; aspect-ratio: 1; height: auto; }
.st-bag { left: 10%; bottom: 30%; width: 40%; height: auto; animation: pop-in .5s both; }
.st-light { right: 14%; bottom: 26%; width: 10%; height: 44%; border-radius: 10px; background: #2B2B2B; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 4% 0; }
.st-light::after { content: ""; position: absolute; left: 42%; top: 100%; width: 16%; height: 30%; background: #4A4F55; }
.st-light i { width: 70%; aspect-ratio: 1; border-radius: 50%; background: #444; }
.st-light .r { animation: light-r 7s steps(1) both; }
.st-light .g { animation: light-g 7s steps(1) both; }
@keyframes light-r { 0%, 50% { background: #FF3B30; box-shadow: 0 0 14px #FF3B30; } 51%, 100% { background: #444; box-shadow: none; } }
@keyframes light-g { 0%, 50% { background: #444; } 51%, 100% { background: #3EDB55; box-shadow: 0 0 14px #3EDB55; } }
.st-house { left: 8%; right: 34%; top: 20%; bottom: 26%; background: #FFE2B8; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .06); }
.st-roof { position: absolute; left: -10%; right: -10%; top: -26%; height: 30%; background: #C2502E; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.st-door { position: absolute; left: 38%; width: 24%; bottom: 0; height: 52%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: #2E6B8F; }
.st-win { position: absolute; top: 14%; width: 22%; aspect-ratio: 1; background: linear-gradient(135deg, #CFEFFF, #7DB8DA); box-shadow: 0 0 0 4px #8E5A2C; }
.st-win.w1 { left: 8%; } .st-win.w2 { right: 8%; }
.st-person.door-kid { left: 32%; bottom: 20%; width: 28%; height: auto; aspect-ratio: 1; animation: bust-up .6s .6s both cubic-bezier(.3, 1.4, .5, 1); }
.st-day > *, .st-sunset > * { position: absolute; }

.st-say.farm-say { left: 4%; top: 58%; animation-delay: 1.6s; }
.st-person.farmer { left: 4%; bottom: 8%; width: 32%; z-index: 2; }
.st-grinder { position: relative; width: 26%; height: 80%; }
.st-grinder::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 40%; border-radius: 30% 30% 10% 10%; background: linear-gradient(90deg, #8C959C, #EEF2F4, #8C959C); }
.st-grinder::after { content: ""; position: absolute; left: 30%; right: 30%; top: 38%; height: 50%; background: linear-gradient(90deg, #6C757C, #C9D1D6, #6C757C); }
.st-grinder i { position: absolute; right: -20%; top: 10%; width: 30%; height: 8%; background: #5B6268; transform-origin: left; animation: spin 1s linear infinite; }
.st-mince-out { position: relative; width: 22%; aspect-ratio: 1.6; border-radius: 50%; background: radial-gradient(circle, #8A3416 20%, transparent 22%) 0 0 / 18% 26%, radial-gradient(circle, #C9683E 20%, transparent 22%) 9% 13% / 18% 26%, #A8441F; animation: pop-in .6s 1.2s both; }

.story .story-sound { background: var(--primary); color: #fff; }
.story .story-sound.off { background: rgba(255, 255, 255, .14); }
.story-note { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 203, 61, .15); color: #FFE27A; font-size: 14px; font-weight: 700; text-align: center; }

.st-shop.kuru { --aw1: #C98A0E; }
.st-mixbowl.big { right: 24%; width: 52%; bottom: 12%; }
.st-mix.pist { background: radial-gradient(circle, #8CC63F 30%, transparent 32%) 0 0 / 20% 26%, radial-gradient(circle, #B4502A 25%, transparent 27%) 10% 10% / 26% 34%, #A8441F; }
.st-shape { left: 4%; right: 4%; bottom: 10%; height: 40%; animation: spread 3.5s ease-out both; }
.st-shape svg { width: 100%; height: 100%; }

.hero { cursor: pointer; }

/* ---------- Film v3: kamera, geçişler, efektler ---------- */
.scene { overflow: hidden; perspective: 900px; }
.cam { position: absolute; inset: 0; transform-origin: 50% 60%; }
.cam > * { position: absolute; }
.cam.kb-soft { animation: kb-soft 14s ease-out both; }
.cam.kb-in { animation: kb-in 12s ease-out both; }
.cam.kb-out { animation: kb-out 12s ease-out both; }
.cam.pan-r { animation: pan-r 12s ease-in-out both; }
.cam.pan-l { animation: pan-l 12s ease-in-out both; }
@keyframes kb-soft { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes kb-in { from { transform: scale(1); } to { transform: scale(1.12) translateY(2%); } }
@keyframes kb-out { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes pan-r { from { transform: scale(1.08) translateX(3%); } to { transform: scale(1.08) translateX(-3%); } }
@keyframes pan-l { from { transform: scale(1.08) translateX(-3%); } to { transform: scale(1.08) translateX(3%); } }
.scene.tr-zoom { animation: tr-zoom .7s cubic-bezier(.2, .8, .3, 1) both; }
.scene.tr-slide { animation: tr-slide .65s cubic-bezier(.2, .8, .3, 1) both; }
.scene.tr-iris { animation: tr-iris .9s ease-out both; }
.scene.tr-flip { animation: tr-flip .7s cubic-bezier(.2, .8, .3, 1) both; }
.scene.tr-wipe { animation: tr-wipe .7s ease-out both; }
@keyframes tr-zoom { from { transform: scale(1.3); opacity: 0; filter: blur(6px); } to { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes tr-slide { from { transform: translateX(105%) rotate(4deg); } to { transform: translateX(0) rotate(0); } }
@keyframes tr-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes tr-flip { from { transform: rotateY(80deg) scale(.8); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes tr-wipe { from { clip-path: inset(0 100% 0 0 round 26px); } to { clip-path: inset(0 0 0 0 round 26px); } }

/* Açılış kartı */
.st-title { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10%; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); overflow: hidden; }
.st-rays { position: absolute; left: 50%; top: 40%; width: 220%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 255, 255, .18) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite; }
.st-title-art { position: relative; width: 34%; aspect-ratio: 1; padding: 4%; border-radius: 50%; background: #fff; box-shadow: 0 10px 0 rgba(0, 0, 0, .15); animation: stamp .7s .2s both cubic-bezier(.3, 1.6, .5, 1); display: grid; place-items: center; overflow: hidden; }
.st-title-art svg, .st-title-art img { width: 100%; height: 100%; object-fit: cover; }
.st-title h3 { position: relative; margin: 4% 4% 0; font-family: var(--display); font-size: 10cqw; line-height: 1; text-align: center; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .25); animation: pop-in .6s .5s both cubic-bezier(.3, 1.6, .5, 1); }
.st-poz { height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .25)); }
.st-poz.title-poz { width: 46%; left: 27%; bottom: -2%; animation: bust-up .7s .8s both cubic-bezier(.3, 1.4, .5, 1), bob 1.6s 1.6s ease-in-out infinite; }
.st-poz.cheer-poz { width: 42%; right: -2%; bottom: 2%; animation: pop-in .5s .3s both, jump 1s 1s ease-in-out infinite; }
.st-poz.serve-poz { width: 52%; left: 0; bottom: 0; animation: bust-up .7s .2s both cubic-bezier(.3, 1.4, .5, 1); }
.st-poz.side-poz { width: 40%; right: -2%; bottom: 0; animation: bust-up .7s .4s both cubic-bezier(.3, 1.4, .5, 1); }
.st-poz.point-poz { width: 44%; left: 4%; bottom: 4%; animation: drive-in 1.2s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8%) rotate(-3deg); } }
.st-plate.right { left: auto; right: 2%; width: 56%; }

/* Mini Usta tepki rozeti ve konuşma */
.st-react { width: 26%; aspect-ratio: 1; top: 4%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFF4E2, #F5C98E); border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); z-index: 8; animation: react-in .5s both cubic-bezier(.3, 1.6, .5, 1), wiggle 2.4s 1.4s ease-in-out infinite; }
.st-react.right { right: 4%; } .st-react.left { left: 4%; }
.st-react img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.1); }
@keyframes react-in { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.st-rtalk { top: 6%; max-width: 46%; padding: 2.4% 3.6%; border-radius: 16px; background: #FFE27A; color: #2B1D14; font-weight: 900; font-size: 4.6cqw; line-height: 1.15; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); z-index: 8; animation: pop-in .4s both cubic-bezier(.3, 1.6, .5, 1); }
.st-rtalk.right { right: 32%; border-radius: 16px 16px 4px 16px; }
.st-rtalk.left { left: 32%; border-radius: 16px 16px 16px 4px; }

/* Parçacıklar */
.st-fx { inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.st-fx i { position: absolute; left: var(--x); top: var(--y); font-style: normal; }
.fx-sparkle i { width: 5%; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 15%, transparent 16%), conic-gradient(from 45deg, transparent 0 20%, #FFF6B8 20% 30%, transparent 30% 45%, #FFF6B8 45% 55%, transparent 55% 70%, #FFF6B8 70% 80%, transparent 80% 95%, #FFF6B8 95%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); background: #FFF6B8; scale: var(--s); animation: twinkle 1.2s var(--d) ease-in-out infinite alternate; }
.fx-stars i { width: 6%; aspect-ratio: 1; background: #FFCB3D; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); top: 50%; left: 50%; animation: star-burst 1.6s var(--d) ease-out infinite; }
@keyframes star-burst { from { transform: translate(-50%, -50%) scale(0); opacity: 1; } to { transform: translate(calc((var(--x) - 50%) * 4), calc((var(--y) - 50%) * 4)) scale(var(--s)) rotate(var(--r)); opacity: 0; } }
.fx-hearts i { top: auto; bottom: -8%; color: #F0435A; font-size: calc(var(--s) * 7cqw); animation: rise 3s var(--d) ease-in infinite; }
.fx-notes i { top: auto; bottom: 20%; color: #fff; font-size: calc(var(--s) * 6cqw); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); animation: rise 2.6s var(--d) ease-out infinite; }
@keyframes rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-90cqh) translateX(4cqw) scale(1); opacity: 0; } }
.fx-leaves i { top: -10%; width: 4%; aspect-ratio: .6; border-radius: 0 100% 0 100%; background: #6BBF3B; animation: fall 4s var(--d) linear infinite; }
@keyframes fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(120cqh) translateX(10cqw) rotate(540deg); } }
.fx-sparks i { top: 78%; width: 1.6%; aspect-ratio: 1; border-radius: 50%; background: #FFB02E; box-shadow: 0 0 8px #FF7A2E; animation: spark 1.2s var(--d) ease-out infinite; }
@keyframes spark { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-50cqh) translateX(calc((var(--x) - 50%) * .3)); opacity: 0; } }
.fx-steam i { top: 50%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(5px); animation: smoke 2.6s var(--d) ease-out infinite; }
.fx-bubbles i { top: auto; bottom: 10%; width: calc(var(--s) * 4%); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: rgba(190, 230, 255, .3); animation: rise 2.4s var(--d) ease-out infinite; }
.fx-shells i { top: 62%; left: 50%; width: 4%; aspect-ratio: 1.3; border-radius: 50%; background: #EBD3A8; border: 1px solid #A88A5A; animation: shell 1.1s var(--d) ease-out infinite; }
@keyframes shell { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(calc((var(--x) - 50%) * 1.4), calc(-20cqh + var(--y) * .2)) rotate(var(--r)); opacity: 0; } }
.fx-heat i { top: 20%; width: 30%; height: 4%; border-radius: 50%; background: rgba(255, 255, 255, .25); filter: blur(3px); animation: heat 2s var(--d) ease-in-out infinite; }
@keyframes heat { 0%, 100% { transform: translateY(0) scaleX(1); opacity: 0; } 50% { transform: translateY(-6cqh) scaleX(1.3); opacity: 1; } }

/* Fıstık bahçesi */
.st-orchard { inset: 0; background: linear-gradient(#7EC8F0 0 46%, #E9D9A6 46% 60%, #C9B57A 60%); }
.st-orchard.hot { background: linear-gradient(#FFD27A 0 46%, #F0D9A0 46%); }
.st-osun { position: absolute; right: 10%; top: 6%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#FFF6C8, #FFD34A 60%, #FFB02E); box-shadow: 0 0 40px 12px rgba(255, 210, 90, .6); }
.st-osun.big { width: 34%; right: 33%; top: 4%; animation: glow 1.4s ease-in-out infinite alternate; }
.st-ptree { bottom: 30%; width: 34%; aspect-ratio: .9; }
.st-ptree.t0 { left: -4%; } .st-ptree.t1 { left: 33%; bottom: 34%; } .st-ptree.t2 { right: -4%; }
.st-ptree.big { left: 14%; width: 62%; bottom: 26%; }
.st-ptree .trunk { position: absolute; left: 44%; bottom: 0; width: 12%; height: 45%; border-radius: 4px; background: linear-gradient(90deg, #6E4420, #8E5A2C); }
.st-ptree .crown { position: absolute; left: 0; right: 0; top: 0; height: 66%; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #A8D86A, #5E9E36 60%, #3E7A22); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .1); animation: sway 3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.st-ptree b { position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFB3C6 0 20%, #E8506A 60%, #B8304A); box-shadow: 6px 4px 0 -2px #E8667E, -5px 5px 0 -2px #F08AA0; animation: pop-in .4s calc(.3s + var(--k) * .12s) both; }
@keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.st-person.picker { left: 60%; bottom: 8%; width: 34%; aspect-ratio: 1; height: auto; z-index: 2; }
.st-basket { left: 58%; bottom: 4%; width: 22%; aspect-ratio: 1.4; border-radius: 6px 6px 40% 40%; background: repeating-linear-gradient(45deg, #C98A4E 0 8%, #A86B34 8% 16%); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .15); z-index: 3; }
.st-dry { left: 6%; right: 6%; bottom: 10%; height: 36%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; padding: 3%; border-radius: 12px; background: repeating-linear-gradient(90deg, #D9A066 0 9%, #CF9459 9% 10%); box-shadow: 0 10px 0 #8E5A2C; }
.st-dry span { animation: pop-in .4s calc(var(--i) * .08s) both; }
.st-dry svg { width: 100%; height: 100%; }

/* Kamyon ve tabela */
.st-truck { left: 12%; bottom: 6%; width: 64%; height: 30%; animation: drive-in 1.8s cubic-bezier(.2, .8, .3, 1) both, moto-bump .35s 1.8s ease-in-out infinite alternate; }
.st-truck .box { position: absolute; left: 0; top: 0; width: 68%; height: 74%; border-radius: 8px; background: linear-gradient(#FFFFFF, #E9EEF1); box-shadow: inset 0 0 0 4px #C2502E; display: grid; place-items: center; }
.st-truck .box b { font-family: var(--display); font-size: 5cqw; color: #3E9B3A; text-align: center; line-height: 1; }
.st-truck .cab { position: absolute; right: 2%; top: 22%; width: 30%; height: 52%; border-radius: 6px 40% 6px 6px; background: linear-gradient(#E8742A, #C25A16); box-shadow: inset -30% 18% 0 -2px #CFEFFF; }
.st-truck .cab::after { content: ""; position: absolute; right: 12%; top: 14%; width: 40%; height: 40%; border-radius: 4px 30% 4px 4px; background: linear-gradient(135deg, #DFF4FF, #8EC8E8); }
.st-truck .w { position: absolute; bottom: 0; width: 15%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#C9D1D6 0 25%, #2B2B2B 27%); animation: spin .5s linear infinite; }
.st-truck .w1 { left: 8%; } .st-truck .w2 { left: 46%; } .st-truck .w3 { right: 6%; }
.st-signpost { right: 4%; bottom: 26%; width: 30%; height: 30%; }
.st-signpost::before { content: ""; position: absolute; left: 46%; bottom: 0; width: 8%; height: 70%; background: #8C959C; }
.st-signpost b { position: absolute; left: 0; right: 0; top: 0; padding: 6% 4%; border-radius: 6px; background: #2E7D4F; color: #fff; font-size: 4.6cqw; text-align: center; box-shadow: 0 0 0 3px #fff, 0 4px 0 rgba(0, 0, 0, .2); }

/* Kabuk kırma */
.st-crack { bottom: 18%; left: calc(14% + var(--i) * 25%); width: 22%; aspect-ratio: 1; animation: crack .55s calc(var(--i) * .55s) ease-in-out infinite; }
.st-crack svg { width: 100%; height: 100%; }
@keyframes crack { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.2, .7); } 80% { transform: scale(.9, 1.1) rotate(8deg); } }

/* Final ekranı */
.scene.finale .fin-poz { position: absolute; width: 50%; left: 25%; top: 10%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .3)); animation: stamp .6s .2s both cubic-bezier(.3, 1.6, .5, 1), jump 1.2s 1s ease-in-out infinite; }
.scene.finale .fin-done { position: absolute; left: 0; right: 0; top: 2%; margin: 0; text-align: center; font-family: var(--display); font-size: 10cqw; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.fin-next { position: absolute; left: 6%; right: 6%; bottom: 5%; display: flex; align-items: center; gap: 4%; padding: 3% 4%; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); text-align: left; cursor: pointer; animation: pop-in .5s .8s both cubic-bezier(.3, 1.6, .5, 1), pulse 1.4s 1.6s ease-in-out infinite; z-index: 9; }
.fin-art { position: relative; width: 26%; aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 35% 30%, #FFF4E2, #F5D3A4); overflow: hidden; }
.fin-art svg { width: 80%; height: 80%; }
.fin-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.fin-art i { position: absolute; right: 6%; bottom: 6%; width: 36%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; }
.fin-art i svg { width: 60%; height: 60%; }
.fin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-text small { font-size: 3.4cqw; font-weight: 900; letter-spacing: 2px; color: var(--primary-ink); }
.fin-text b { font-family: var(--display); font-size: 6.4cqw; line-height: 1.05; color: var(--dark); }
.reward-face { object-position: 50% 30%; }
.st-ayran.big { left: 38%; bottom: 26%; width: 26%; z-index: 3; }
.u-person img, .u-q img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.u-person { background: radial-gradient(circle at 50% 30%, #FFF4E2, #F2D2A8); }

/* ---------- Film: gönderilen çizimler ---------- */
.st-kitchen { left: 0; top: 0; width: 100%; height: 70%; object-fit: cover; object-position: 50% 40%; filter: saturate(1.05); }
.st-kar, .st-obj { height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .22)); }
.st-inside .st-kar.keeper { position: absolute; inset: auto 0 0; width: 100%; filter: none; animation: bob 2.2s ease-in-out infinite; }
.st-obj.sink { left: 14%; width: 72%; bottom: 14%; }
.st-drop.in-sink { bottom: 38%; width: 18%; z-index: 2; }
.st-obj.big-grill { left: 4%; width: 92%; bottom: 6%; }
.st-grill-sis.on-mangal { left: 12%; right: 12%; top: 34%; z-index: 2; }
.st-flame.small { bottom: 36%; width: 8%; opacity: .8; z-index: 1; }
.st-kar.picker { left: 62%; bottom: 4%; width: 22%; z-index: 3; }
.st-kar.farmer { left: 4%; bottom: 6%; width: 22%; z-index: 2; }
.st-kar.farm-dog { right: 26%; bottom: 4%; width: 18%; z-index: 3; animation: bob 1s ease-in-out infinite; }
.st-obj.house-img { left: 0; width: 72%; bottom: 22%; }
.st-kar.door-kid2 { left: 26%; bottom: 20%; width: 24%; z-index: 3; animation: bust-up .6s .6s both cubic-bezier(.3, 1.4, .5, 1), bob 1.2s 1.4s ease-in-out infinite; }
.st-kar.door-cat { left: 54%; bottom: 20%; width: 16%; z-index: 3; animation: pop-in .5s 1.4s both; }
.st-kar.side-cat { left: 6%; bottom: 26%; width: 14%; z-index: 1; }
.st-kar.helper-kid { right: 6%; bottom: 8%; width: 26%; animation: bust-up .6s .8s both cubic-bezier(.3, 1.4, .5, 1); }

/* ---------- Film: stok fotoğraflar ---------- */
.st-photo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.st-photo.dim { filter: brightness(.75) saturate(1.1); }
.st-heat { inset: 0; background: linear-gradient(transparent 40%, rgba(255, 120, 30, .25)); animation: glow 1s ease-in-out infinite alternate; }
.st-stok { height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .25)); }
.st-inside .st-stok.keeper { position: absolute; inset: auto 0 0; width: 100%; filter: none; animation: bob 2.2s ease-in-out infinite; }
.st-shelf .st-s.wide { width: 70%; aspect-ratio: 2; }
.st-plate.photo { left: 8%; bottom: 8%; width: 60%; background: radial-gradient(#fff 0 62%, #EDE3D6 63% 66%, #fff 67%); box-shadow: 0 14px 24px rgba(0, 0, 0, .35); }
.st-plate.photo.right { left: auto; right: 2%; }
.st-moto.ride-back.front { bottom: 2%; height: 30%; right: 8%; }
.st-town { overflow: hidden; }
.st-strip { gap: 0; align-items: flex-end; }
.st-hi { flex: none; height: calc(var(--k) * 100%); width: auto; margin-right: 1%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); }
.st-obj.ptree { bottom: 30%; width: 38%; }
.st-obj.ptree.t0 { left: -6%; } .st-obj.ptree.t1 { left: 31%; bottom: 33%; } .st-obj.ptree.t2 { right: -6%; }
.st-obj.ptree.big { left: 8%; width: 66%; bottom: 22%; animation: sway 3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.st-cloth2 { left: 4%; right: 4%; bottom: 8%; height: 34%; border-radius: 12px; background: repeating-linear-gradient(90deg, #F1E3C4 0 10%, #E9D7B0 10% 20%); box-shadow: 0 10px 0 #C9A97A; }
.st-stok.dry-bowl { left: 14%; width: 72%; bottom: 14%; animation: pop-in .6s .3s both; }
.st-stok.truck { left: 4%; width: 66%; bottom: 6%; animation: drive-in 1.8s cubic-bezier(.2, .8, .3, 1) both, moto-bump .35s 1.8s ease-in-out infinite alternate; }
.st-plate.photo ~ .st-ayran, .st-ayran.big { left: 54%; bottom: 34%; width: 20%; z-index: 3; }
.b-stamp img, .b-tool img { width: 100%; height: 100%; object-fit: contain; }
.lb-av img, .lb-avbtn img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
.lb-avbtn { padding: 2px; border-radius: 50%; }
.st-stok.cheer-poz.ayran-usta { width: 36%; right: 0; bottom: 2%; animation: pop-in .5s .3s both, bob 1.4s 1s ease-in-out infinite; }
.st-title-art img { object-position: 50% 20%; }
/* Ana ekran: Mini Usta, Mini Kebapçı dükkânının önünde */
.hero { border-radius: 28px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px; background: linear-gradient(180deg, rgba(43, 29, 20, .05) 40%, var(--cream) 98%), url("../assets/stok/dukkan.webp") 60% 0% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(43, 29, 20, .06); }
.hero .bubble { left: 10px; }

/* Ocakbaşı: gün seçimi */
.oc-days { margin: 4px 0 14px; text-align: center; }
.oc-days small { display: block; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 6px; }
.oc-days > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.oc-day { min-width: 44px; height: 44px; border-radius: 22px; border: 2px solid rgba(43,29,20,.18); background: #FFF8EE; font: 900 18px/1 inherit; font-family: inherit; color: #2B1D14; cursor: pointer; }
.oc-day.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(232,116,42,.35); }
.oc-day.lock { opacity: .4; cursor: default; background: repeating-linear-gradient(45deg, #EEE 0 6px, #F8F8F8 6px 12px); }

/* Usta Sensin: şiş çeşitleri ve bölümler */
.tray.four, .tray.dense { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.tray.four .tray-btn, .tray.dense .tray-btn { aspect-ratio: 1.05; padding: 6px 4px; border-radius: 16px; }
.tray.dense .tray-btn span, .tray.four .tray-btn span { font-size: 12px; }
.tray-btn { position: relative; }
.tray-btn.meat { background: radial-gradient(circle at 30% 20%, #fff, #FFE6D2); box-shadow: 0 5px 0 #E3B48F, 0 8px 14px rgba(170, 70, 20, .12); }
.tray-btn.meat span { color: #A8431A; font-weight: 900; }
.ticket-item { position: relative; }
.ticket-item.meat { background: #FFE9D8; box-shadow: inset 0 0 0 2px #F0B48A; }
.ticket-item.meat em { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; font-style: normal; font-size: 10px; font-weight: 900; color: #A8431A; background: #fff; border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.layer.meat { left: 8%; top: 30%; width: 84%; height: 40%; }
.u-person.vip { box-shadow: 0 0 0 4px #F6B92B, 0 0 18px rgba(246, 185, 43, .7); }
.u-vip { position: absolute; top: 2px; left: 50%; translate: -50% 0; width: 34px; height: 34px; color: #F6B92B; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); z-index: 2; animation: pulse .8s infinite; }
.u-vip svg { width: 100%; height: 100%; }
.ticket.vip { border-color: #F6B92B !important; box-shadow: 0 0 0 3px rgba(246, 185, 43, .35), 0 6px 16px rgba(43, 29, 20, .1); }
.tray-btn.meat svg { width: 100%; height: 100%; transform: scale(1.35); }
.u-order .ticket-item { width: 44px; height: 44px; }
.ticket-item.meat svg { transform: scale(1.3); }
.layer.meat { z-index: 2; }
.layer.meat svg { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }

/* Moto Kurye: yatay ekran önerisi ve kısa yatay ekranda ince üst çubuk */
.rot-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .rot-hint { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(43, 29, 20, .82); color: #fff; text-align: center; padding: 24px; }
  .rot-hint > div { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 280px; }
  .rot-hint svg { width: 84px; height: 84px; animation: rot-tilt 1.6s ease-in-out infinite; }
  .rot-hint b { font-family: var(--display); font-size: 26px; }
  .rot-hint span { opacity: .85; }
  .rot-hint .btn { margin-top: 8px; background: #fff; color: var(--dark); }
}
@keyframes rot-tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.game-stage { position: relative; }
@media (orientation: landscape) and (max-height: 520px) {
  .game-shell.cv .game-bar { padding-top: 4px; padding-bottom: 4px; min-height: 0; }
  .game-shell.cv .game-bar h1 { font-size: 18px; }
  .game-shell.cv .game-bar .icon-btn { width: 36px; height: 36px; }
  .g-intro-card { max-height: 92dvh; overflow-y: auto; }
}

/* ---------- Ekrana sığdırma: kısa ekranlarda kartlar taşmasın, ana düğme hep görünsün ---------- */
.g-intro, .kk-intro { padding: max(10px, min(18px, 2dvh)); }
.g-intro-card, .kk-intro-card { max-height: 100%; min-height: 0; overflow: hidden; }
.g-intro-card > h2, .g-intro-card > .btn, .g-intro-card > .oc-days, .kk-intro-card > h2, .kk-intro-card > .btn { flex: none; }
.g-intro-card > ul { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.kk-intro-card { overflow-y: auto; }
.kk-intro-card > .kk-start { position: sticky; bottom: 0; }
/* Genel katmanlar: kart uzunsa katman kayar, kart ortada kalır */
.overlay { overflow-y: auto; overscroll-behavior: contain; }
.overlay > .sheet, .overlay > .break-card, .overlay > .films-card, .overlay > .board-card { margin-block: auto; max-height: none; }
.overlay.champs > .board-card { max-height: calc(100dvh - 32px); }
.reward-card { overflow: clip; }
.reward-actions { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(transparent, var(--cream) 30%); padding: 14px 0 6px; margin-bottom: -6px; width: 100%; justify-content: center; }
@media (max-height: 760px) {
  .g-intro-card { gap: 10px; padding: 16px 16px 14px; }
  .g-intro-card h2 { font-size: 28px; }
  .g-intro-card li { font-size: 14px; padding: 6px 8px; gap: 10px; }
  .g-intro-art { width: 44px; height: 44px; border-radius: 12px; }
  .g-intro-art svg, .g-intro-art img { width: 38px; height: 38px; }
  .g-intro-card ul { gap: 7px; }
  .oc-days { margin: 0; }
  .oc-days small { margin-bottom: 4px; }
  .oc-day { min-width: 38px; height: 38px; font-size: 16px; }
}
@media (max-height: 480px) {
  .g-intro-card { width: min(100%, 640px); }
  .g-intro-card h2 { font-size: 24px; }
  .g-intro-card ul { display: grid; grid-template-columns: 1fr 1fr; }
  .g-intro-card li { font-size: 13px; line-height: 1.25; }
}
/* Sayfa oyunlarında (Usta Sensin) tanıtım kartı sayfayla kaymasın, ekrana sabitlensin */
.usta > .g-intro, .boya > .g-intro { position: fixed; inset: 0; z-index: 30; }
@media (max-height: 480px) {
  .sheet-face, .break-mascot { display: none; }
  .sheet, .break-card { width: min(100%, 720px); gap: 8px; padding: 14px; }
  .sheet h2, .break-card h2 { font-size: 22px; margin: 0; }
  .sheet-sub { margin: 0; font-size: 13px; }
  .sheet { display: grid; grid-template-columns: repeat(3, 1fr); }
  .sheet > h2, .sheet > .sheet-sub { grid-column: 1 / -1; }
  .sheet .hold { min-height: 0; padding: 10px 8px; }
  .sheet .hold small { display: none; }
}

/* Yatay telefonda canvas oyunları tam ekrana yakın: üst çubuk küçük bir yüzen şeride dönüşür */
@media (orientation: landscape) and (max-height: 520px) {
  .game-shell[data-game="moto"] { position: relative; }
  .game-shell[data-game="moto"] .game-bar { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 3px 6px; gap: 6px; border-radius: 999px; background: rgba(255, 248, 238, .82); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
  .game-shell[data-game="moto"] .game-bar h1 { display: none; }
  .game-shell[data-game="moto"] .game-bar .icon-btn { width: 32px; height: 32px; }
  .game-shell[data-game="moto"] .game-bar .icon-btn svg { width: 18px; height: 18px; }
  .game-shell[data-game="moto"] .game-bar .demo-chip.in-bar { transform: scale(.8); }
  .game-shell[data-game="moto"] .game-stage { flex: 1; }
}
.fs-btn[hidden] { display: none; }

/* Tam ekran düğmesi ve uyarısı */
.fs-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; max-width: min(92vw, 420px); padding: 12px 16px; border-radius: 16px; background: rgba(43, 29, 20, .92); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: pop-in .3s; }
.kk-mid .kk-fs { position: absolute; right: 12px; left: auto; background: rgba(255, 255, 255, .14); color: #fff; }
.story-top .story-home { background: rgba(255, 255, 255, .14); color: #fff; }
.films-top { gap: 8px; }
.films-top h2 { flex: 1; }
/* Tam ekrandayken çentik/alt çubuk boşlukları */
body.is-full .game-shell { padding-bottom: env(safe-area-inset-bottom); }
.fs-toast { top: 64px; bottom: auto; font-size: 13px; padding: 9px 14px; }

/* ---------- Telefon yan çevrilince ---------- */
/* Dikey tasarlanan oyunlar: yatayda "telefonu dik tut" uyarısı (Moto Kurye ve filmler hariç) */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .game-shell[data-game]:not([data-game="moto"]):not([data-game="film"])::after {
    content: "Telefonu dik tut\A Bu oyun dikey ekranda oynan\0131r";
    white-space: pre-line;
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-content: center; text-align: center; gap: 8px;
    padding: 24px 24px 24px 140px;
    background: rgba(43, 29, 20, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='20' y='6' width='24' height='42' rx='5' fill='none' stroke='%23FFE27A' stroke-width='4'/%3E%3Cpath d='M54 40a24 24 0 0 1-30 18' fill='none' stroke='%23FFE27A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 22% 50% / 84px 84px;
    color: #fff; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.4;
  }
  /* Film oynatıcı: solda sahne, sağda yazı ve düğmeler */
  .story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 18px; row-gap: 6px; }
  .story-top { grid-column: 1 / -1; grid-row: 1; }
  .story-title { grid-column: 2; grid-row: 2; margin: 0; }
  .story-note { grid-column: 2; grid-row: 3; font-size: 12px; padding: 6px 10px; }
  .story-stage { grid-column: 1; grid-row: 2 / 6; min-height: 0; }
  .story-stage .scene { max-height: 100%; height: 100%; }
  .story-caption { grid-column: 2; grid-row: 4; font-size: 17px; min-height: 0; overflow-y: auto; }
  .story-controls { grid-column: 2; grid-row: 5; }
  .story .icon-btn.big { width: 54px; height: 54px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body:has(.overlay.story) .game-shell::after, body:has(.overlay.films) .game-shell::after, body:has(.overlay.meal) .game-shell::after { display: none; }
}

/* ---------- Çizgi film: yeni stok çizimler ---------- */
.st-yeni { position: absolute; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .22)); z-index: 2; }
.st-yeni.shopfront { z-index: 1; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25)); animation: pop-in .6s both cubic-bezier(.3, 1.4, .5, 1); }
.st-yeni.bob-slow { animation: bob 3s ease-in-out infinite; }
.st-yeni.pop { animation: pop-in .5s .5s both cubic-bezier(.3, 1.6, .5, 1); }
.st-yeni.pop.late, .st-yeni.hop.late { animation-delay: 2.2s; }
.st-yeni.hop { animation: pop-in .5s .4s both, st-hop .6s 1s ease-in-out infinite alternate; }
.st-yeni.sway { transform-origin: 50% 100%; animation: st-sway 4s ease-in-out infinite; }
.st-yeni.sway.d2 { animation-delay: -1.3s; } .st-yeni.sway.d3 { animation-delay: -2.6s; }
.st-yeni.chew { transform-origin: 50% 100%; animation: cow-chew 1.6s ease-in-out infinite; }
.st-yeni.peck { transform-origin: 30% 90%; animation: st-peck 1.1s ease-in-out infinite; }
.st-yeni.waddle { animation: st-waddle 2.4s ease-in-out infinite alternate; }
.st-yeni.dip { transform-origin: 90% 10%; animation: st-dip 2s ease-in-out infinite; }
.st-yeni.ringing { animation: ring .1s ease-in-out infinite alternate; }
@keyframes st-hop { to { transform: translateY(-10%); } }
@keyframes st-sway { 50% { transform: rotate(1.6deg); } }
@keyframes st-peck { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(16deg); } }
@keyframes st-waddle { from { translate: 0 0; rotate: -4deg; } to { translate: 26cqw 0; rotate: 4deg; } }
@keyframes st-dip { 50% { transform: rotate(-14deg); } }
.st-warm { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #FFF3DE, #F2C9A0); }
.st-warm.green { background: radial-gradient(circle at 50% 40%, #F4FBE8, #BFE3A6); }
.st-zebra { position: absolute; left: 34%; width: 40%; bottom: 7%; height: 15%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 10%, transparent 10% 20%); z-index: 1; }
.st-tl-glow { position: absolute; right: 9.3%; width: 5.6%; aspect-ratio: 1; border-radius: 50%; z-index: 3; animation: tl-glow 7s steps(1) both; }
@keyframes tl-glow { 0%, 55% { bottom: 51.5%; background: rgba(255, 60, 40, .55); box-shadow: 0 0 22px 10px rgba(255, 60, 40, .55); } 56%, 100% { bottom: 34.5%; background: rgba(60, 220, 90, .55); box-shadow: 0 0 22px 10px rgba(60, 220, 90, .55); } }
.st-say.right.low { top: 46%; }
/* Dükkân çizimleri sahneye sığsın, konuşma balonu yüzleri kapatmasın */
.st-yeni.shopfront { left: 50%; translate: -50% 0; bottom: 14%; height: 76%; width: auto; max-width: 94%; object-fit: contain; }
.st-say.bottom { left: auto; right: 4%; top: auto; bottom: 3%; max-width: 58%; border-radius: 16px 4px 16px 16px; }
.story-note { font-size: 13px; padding: 6px 10px; }
.st-yeni.shopfront { left: auto; right: 2%; translate: none; bottom: 12%; height: 66%; max-width: 84%; }
.st-say.bottom { right: 3%; bottom: 2%; max-width: 64%; }
.st-moto.park { height: 21%; bottom: 3%; left: 0; }
.st-zebra { left: 48%; width: 34%; }
.st-yeni.crack-tool { transform-origin: 30% 60%; animation: st-crack 0.55s ease-in-out infinite; } @keyframes st-crack { 50% { transform: rotate(-6deg) scale(.97); } }

/* ---------- Mizanpaj düzeltmeleri: hiçbir öğe diğerinin üstüne binmesin ---------- */
.st-yeni.shopfront { right: 3%; bottom: 13%; height: 60%; max-width: 78%; }
.st-moto.park { left: 1%; height: 20%; bottom: 3%; }
/* Servis: tabak solda, Mini Usta sağda */
.st-plate.photo { left: 4%; bottom: 10%; width: 54%; }
.st-poz.cheer-poz { width: 38%; right: 0; bottom: 2%; }
.st-stok.cheer-poz.ayran-usta { width: 38%; right: 0; bottom: 2%; }
.st-plate.photo.right { left: auto; right: 2%; width: 52%; }
.st-poz.serve-poz { width: 42%; left: 0; bottom: 0; }
/* Karıştırma kabı: paslanmaz çelik, solda */
.st-mixbowl.big.left { right: auto; left: 4%; width: 52%; bottom: 14%; background: linear-gradient(90deg, #8C959C, #E8EDF0 40%, #A7B0B6 70%, #7C868E); box-shadow: 0 10px 14px rgba(0, 0, 0, .25); }
.st-poz.side-poz { width: 38%; right: 0; }
.st-kar.picker.big { width: 28%; left: 66%; }
.st-yeni.walk-in { animation: st-walkin 2.4s ease-out both, st-hop .3s ease-in-out infinite alternate; }
@keyframes st-walkin { from { translate: -40cqw 0; } to { translate: 0 0; } }
.reward-award { position: absolute; top: 10px; right: 12px; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); animation: pop-in .6s .5s both cubic-bezier(.3, 1.6, .5, 1), bob 2s 1.2s ease-in-out infinite; z-index: 2; }
.reward-head { padding-right: 64px; }
/* Ana ekran: üst sağ düğmeler sığsın, karşılama balonu kısa ekranda küçülsün */
.brand-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.brand-actions .demo-chip.in-bar { width: 48px; height: 48px; justify-content: center; }
@media (max-width: 420px) { .brand-actions .icon-btn { width: 44px; height: 44px; } .brand-actions .demo-chip.in-bar { width: 44px; height: 44px; } .brand-name { font-size: 30px; } }
.hero .bubble { max-width: 46%; font-size: clamp(15px, 4.4vw, 20px); }