/* ---------- 3. tasarım (index3): hikâyeli ana çizim + eriyen para ----------
   Çizimler site3.js'te kurulur. Kamera: her katman (svg) farklı hızda yatay kayar; yalnızca transform.
   Sahne içi hareketler, sahne etkinken ([data-s="N"]) başlar; sahneden çıkarken ([data-p="N"]) geçici parçalar söner. */

html:not(.js) .story { display: none; }

/* Sahne renkleri: açık tema sabah, koyu tema akşam üstü */
.story-stage {
  --sky-a: #5aa9e6; --sky-b: #a9d6f5; --sky-c: #f7e8c8;
  --sun: #fff6d2; --cloud: #ffffff; --cloud2: #d3e5f5;
  --hill1: #acd3b2; --hill1b: #92c29c; --hill2: #82b68e; --hill2b: #6ca67b;
  --city: #c8d6e8; --city2: #b5c6dc; --win: #edf3fa;
  --tree0: #93d48c; --tree1: #58a65f; --tree2: #2e7744; --leaf1: #72c070; --leaf2: #2e7744;
  --wall: #f5f3ee; --wall2: #dad5cb; --frame: #d0d6de; --glass1: #d9eefb; --glass2: #85abd1; --floor: #a3bcd6;
  --walk: #dbd5c9; --walk2: #c3bcae; --road: #4b515c; --fence: #bdb6a8;
  --lamp: 0; --stars: 0; --haze: #eef6fc;
  --cam: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 2 / 1; border-radius: 16px; background: var(--sky-b);
}
[data-theme="dark"] .story-stage {
  --sky-a: #0b1733; --sky-b: #283d72; --sky-c: #d98b5f;
  --sun: #ffcf8a; --cloud: #55658f; --cloud2: #3b4972;
  --hill1: #2e4262; --hill1b: #243652; --hill2: #213350; --hill2b: #192842;
  --city: #26385a; --city2: #1e2d4b; --win: #ffd27a;
  --tree0: #4a8a68; --tree1: #2c5d48; --tree2: #1a3d30; --leaf1: #3d7d55; --leaf2: #1c4630;
  --wall: #3b435c; --wall2: #2b3248; --frame: #222a3d; --glass1: #ffe3b0; --glass2: #c68650; --floor: #a46a3a;
  --walk: #3b4253; --walk2: #2f3545; --road: #22262e; --fence: #4b5468;
  --lamp: 1; --stars: 0.85; --haze: #3a3f63;
}
.story-sky { position: absolute; inset: 0; background: linear-gradient(var(--sky-a), var(--sky-b) 58%, var(--sky-c)); }
.story-stars {
  position: absolute; inset: 0 0 45% 0; opacity: var(--stars);
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 36% 40%, #fff 50%, transparent 51%);
}
.story-defs { position: absolute; width: 0; height: 0; }
.ly {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; display: block;
  transition: transform 1.5s var(--cam), opacity 0.25s ease; will-change: transform;
}
.ly[data-w="2160"] { aspect-ratio: 2160 / 600; }
.ly[data-w="3840"] { aspect-ratio: 3840 / 600; }
.ly[data-w="6000"] { aspect-ratio: 6000 / 600; }
.ly[data-w="7680"] { aspect-ratio: 7680 / 600; }
.story-stage:not(.is-ready) .ly { transition: none; }
.story-stage.is-cut .ly { opacity: 0; transition: opacity 0.25s ease; }

/* Tema ayrıntıları */
.win { fill: var(--win); opacity: 0.75; }
.lamp-glow { opacity: var(--lamp); }
.beam-car { opacity: calc(var(--lamp) * 0.9); }
[data-theme="dark"] .sun-g { transform: translateY(210px); }
.inside { opacity: 0.55; }
.shutter { transform: translateY(-250px); } /* son hal: kepenk açık */

/* Çizimdeki yazılar */
.ly text { font-family: var(--font); font-weight: 800; }
.sign-t { font-size: 44px; fill: #fff; letter-spacing: 0.08em; }
.doc-h { font-size: 13px; fill: #0b2d62; letter-spacing: 0.03em; }
.doc-l { font-size: 11.5px; font-weight: 600 !important; fill: #6b7586; }
.doc-v { font-size: 12px; fill: #0f1b2d; }
.ph-h { font-size: 22px; fill: #0f1b2d; }
.ph-l { font-size: 15px; font-weight: 600 !important; fill: #4f5b6d; }
.ph-v { font-size: 21px; fill: #0f1b2d; }
.ph-ok { font-size: 15px; fill: #17703f; }
.cal-h { font-size: 16px; fill: #fff; letter-spacing: 0.1em; }
.cal-n { font-size: 74px; fill: #0f1b2d; letter-spacing: -0.04em; }
.cal-s { font-size: 20px; fill: #4f5b6d; }
.chip-l { font-size: 18px; font-weight: 600 !important; fill: #4f5b6d; }
.chip-v { font-size: 19px; fill: #0f1b2d; }
.lc-l { font-size: 20px; font-weight: 600 !important; fill: #4f5b6d; }
.lc-v { font-size: 22px; fill: #0f1b2d; }
.lc-loss { font-size: 34px; fill: #b3261e; letter-spacing: -0.02em; }
.zz { font-size: 40px; fill: #fff; stroke: #0b2d62; stroke-width: 2px; paint-order: stroke; }
.zz-s { font-size: 30px; }
.tag-s { font-size: 13px; fill: #c8102e; }
.wa-h { font-size: 18px; fill: #fff; }
.wa-logo { font-size: 15px; fill: #fff; }
.wa-b { font-size: 17px; fill: #0f1b2d; }
.wa-s { font-size: 14px; font-weight: 600 !important; fill: #4f5b6d; }
.wa-t { font-size: 18px; fill: #0f1b2d; }
.dep-t { font-size: 20px; fill: #231a00; }
.rb-t { font-size: 22px; fill: #fff; letter-spacing: 0.08em; }
.nk-h { font-size: 20px; fill: #0f1b2d; }
.nk-chip { font-size: 15px; fill: #0b2d62; }
.nk-l { font-size: 17px; font-weight: 600 !important; fill: #4f5b6d; }
.nk-v { font-size: 18px; fill: #0f1b2d; }
.nk-neg { fill: #b3261e; }
.nk-nl { font-size: 18px; fill: #17703f; }
.nk-nv { font-size: 38px; fill: #17703f; letter-spacing: -0.02em; }

/* Sahne bölmeleri (üstte, hikâye çubukları gibi) */
.story-frame { position: relative; }
.story-seg { position: absolute; top: 0; left: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; }
.story-seg button { flex: 1; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.story-seg i { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.42); box-shadow: 0 1px 3px rgba(4, 17, 41, 0.35); }
.story-seg b { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.story-seg button:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 6px; }

/* Alt yazı ve düğmeler */
.story-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 18px; }
.story-cap { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; align-content: start; min-height: 3.6em; max-width: 64ch; }
.story-n { font-family: var(--font-cond); font-weight: 600; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; grid-row: 1 / 3; }
.story-t { font-weight: 800; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.15; }
.story-d { grid-column: 2; color: var(--muted); font-size: 17px; line-height: 1.45; }
.story-ctl { display: flex; gap: 8px; flex: none; }
.story-btn {
  width: 48px; height: 48px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 180ms ease;
}
.story-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .story-btn:hover { background: var(--accent-soft); } }
.story-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.story-pp span { width: 14px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.story-pp[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent currentColor; margin-left: 4px; }

/* İkinci çizim: eriyen para */
.live-side { display: grid; gap: 20px; }
.melt { margin: 0; max-width: 520px; }
.melt-svg { display: block; width: 100%; height: auto; overflow: visible; }
.melt-svg text { font-family: var(--font); }
.m-l { font-size: 20px; font-weight: 600; fill: var(--muted); }
.m-days { font-size: 32px; font-weight: 800; fill: var(--ink); letter-spacing: -0.02em; }
.m-loss { font-size: 30px; font-weight: 800; fill: var(--loss); letter-spacing: -0.02em; }
.m-stack { transform: scale(1.1, 0.5); transform-origin: 50% 100%; transform-box: fill-box; }
.m-pool { transform-box: fill-box; transform-origin: center; }
.drip { opacity: 0; }

@media (max-width: 1080px) {
  .story-stage { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .story-stage { aspect-ratio: 7 / 6; border-radius: 12px; }
  /* Telefonda çubuklar çizimin üstünü kapatmasın: altına iner */
  .story-seg { position: static; margin: 0 -2px; }
  .story-seg i { background: var(--line); box-shadow: none; }
  .story-seg b { background: var(--ink); }
  .story-seg button:focus-visible { outline-color: var(--accent); }
  .story-bar { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 4px; }
  .story-cap { min-height: 5.2em; column-gap: 10px; }
  .story-d { font-size: 16px; }
  .story-ctl { justify-content: flex-end; }
}

/* ---------- Hareketsiz hal ----------
   Azaltılmış harekette kamera atlamalı, sahneler son halinde; geçici parçalar (ışın, uçan noktalar, bayrak dalgası) yok. */
@media (prefers-reduced-motion: reduce) {
  .ly { transition: none !important; }
  .beam, .pt, .z, .cf, .page1, .page2, .page3, .steam, .drip { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .story-stage.is-paused *, .melt.is-paused * { animation-play-state: paused !important; }

  /* Sürekli küçük döngüler */
  .drift { animation: drift 26s ease-in-out infinite alternate; }
  .drift.d2 { animation-duration: 32s; animation-delay: -8s; }
  .drift.d3 { animation-duration: 38s; animation-delay: -15s; }
  .blink { transform-box: fill-box; transform-origin: center; animation: blink 5.2s linear infinite; }
  .sc2 .blink { animation-delay: -2s; } .sc4 .blink { animation-delay: -3.4s; }
  .idle { animation: breathe 3.6s ease-in-out infinite alternate; }
  .steam { transform-box: fill-box; animation: steam 2.6s ease-out infinite; }
  .steam2 { animation-delay: -1.3s; }
  .flag { transform-box: fill-box; transform-origin: 50% 0; animation: flag 3.2s ease-in-out infinite alternate; }
  .flag:nth-child(odd) { animation-delay: -1.6s; }

  /* Sahne içinden çıkıp giren parçalar: etkin değilken gizli */
  .sc .phone-ui, .sc .doc, .sc .brk, .sc .beam, .sc .pt, .sc .fill, .sc .ok,
  .sc .chip, .sc .loss, .sc .z, .sc .bubble, .sc .plane-x, .sc .dep, .sc .ribbon, .sc .net, .sc .row, .sc .cf { opacity: 0; }
  .sc .phone-ui, .sc .doc, .sc .brk, .sc .ok, .sc .chip, .sc .loss, .sc .bubble, .sc .dep, .sc .ribbon, .sc .net { transform-box: fill-box; transform-origin: 50% 100%; }

  /* Çıkışta yumuşak sönme */
  [data-p="2"] .sc2 :is(.phone-ui, .doc, .brk, .fill, .ok),
  [data-p="3"] .sc3 :is(.chip, .loss),
  [data-p="4"] .sc4 :is(.bubble, .dep),
  [data-p="5"] .sc5 :is(.ribbon, .net, .row) { animation: s-out 0.45s ease both; }
  [data-p="3"] .sc3 :is(.page1, .page2, .page3) { opacity: 0; }

  /* 1. Sabah */
  [data-s="1"] .sc1 .shutter { animation: shutter 1.8s var(--ease-in-out) 1s both; }
  [data-s="1"] .sc1 .drive-in { animation: drive 2.8s cubic-bezier(0.2, 0.7, 0.25, 1) 1.7s both; }
  [data-s="1"] .sc1 .rim { transform-box: fill-box; transform-origin: center; animation: roll 2.8s cubic-bezier(0.2, 0.7, 0.25, 1) 1.7s both; }

  /* 2. Ruhsat */
  [data-s="2"] .sc2 .phone-ui { animation: rise 0.8s var(--ease-out) 1.1s both; }
  [data-s="2"] .sc2 .doc { animation: slide-l 0.8s var(--ease-out) 1.35s both; }
  [data-s="2"] .sc2 .brk { animation: pop 0.5s var(--ease-out) 2s both; transform-origin: center; }
  [data-s="2"] .sc2 .beam { animation: scan 1.7s var(--ease-in-out) 2.3s both; }
  [data-s="2"] .sc2 .pt1 { animation: pt1 0.8s var(--ease-in-out) 3.5s both; }
  [data-s="2"] .sc2 .pt2 { animation: pt2 0.8s var(--ease-in-out) 3.8s both; }
  [data-s="2"] .sc2 .pt3 { animation: pt3 0.8s var(--ease-in-out) 4.1s both; }
  [data-s="2"] .sc2 .pt4 { animation: pt4 0.8s var(--ease-in-out) 4.4s both; }
  [data-s="2"] .sc2 .fill1 { animation: fill-in 0.5s var(--ease-out) 4.2s both; }
  [data-s="2"] .sc2 .fill2 { animation: fill-in 0.5s var(--ease-out) 4.5s both; }
  [data-s="2"] .sc2 .fill3 { animation: fill-in 0.5s var(--ease-out) 4.8s both; }
  [data-s="2"] .sc2 .fill4 { animation: fill-in 0.5s var(--ease-out) 5.1s both; }
  [data-s="2"] .sc2 .fill5 { animation: fill-in 0.5s var(--ease-out) 5.6s both; }
  [data-s="2"] .sc2 .ok { animation: pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 5.9s both; transform-origin: center; }

  /* 3. Masraf ve bekleme */
  [data-s="3"] .sc3 .loss { animation: rise 0.7s var(--ease-out) 1.2s both; }
  [data-s="3"] .sc3 .page1 { animation: flip 0.6s var(--ease-in-out) 2s both; }
  [data-s="3"] .sc3 .page2 { animation: flip 0.6s var(--ease-in-out) 3.2s both; }
  [data-s="3"] .sc3 .page3 { animation: flip 0.6s var(--ease-in-out) 4.4s both; }
  .page1, .page2, .page3 { transform-box: fill-box; transform-origin: 50% 0; }
  [data-s="3"] .sc3 .chip1 { animation: rise 0.6s var(--ease-out) 1.9s both; }
  [data-s="3"] .sc3 .chip2 { animation: rise 0.6s var(--ease-out) 3.1s both; }
  [data-s="3"] .sc3 .chip3 { animation: rise 0.6s var(--ease-out) 4.3s both; }
  [data-s="3"] .sc3 .z { transform-box: fill-box; animation: zz 2.8s ease-out 2.4s infinite; }
  [data-s="3"] .sc3 .z2 { animation-delay: 2.9s; }
  [data-s="3"] .sc3 .z3 { animation-delay: 3.4s; }

  /* 4. Kapora */
  [data-s="4"] .sc4 .walk-in { animation: walk 2.4s linear 0.9s both; }
  [data-s="4"] .sc4 .plane-x { animation: plane-x 1s cubic-bezier(0.45, 0, 0.55, 1) 3.5s both; }
  [data-s="4"] .sc4 .plane-y { animation: plane-y 1s cubic-bezier(0.45, 0, 0.55, 1) 3.5s both; }
  [data-s="4"] .sc4 .bubble { animation: pop-up 0.6s var(--ease-out) 4.4s both; }
  [data-s="4"] .sc4 .dep { animation: pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 5.6s both; transform-origin: center; }

  /* 5. Satış */
  [data-s="5"] .sc5 .ribbon { animation: pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 1s both; transform-origin: center; }
  [data-s="5"] .sc5 .net { animation: rise 0.8s var(--ease-out) 1.3s both; }
  [data-s="5"] .sc5 .row1 { animation: fill-in 0.45s var(--ease-out) 1.6s both; }
  [data-s="5"] .sc5 .row2 { animation: fill-in 0.45s var(--ease-out) 1.75s both; }
  [data-s="5"] .sc5 .row3 { animation: fill-in 0.45s var(--ease-out) 1.9s both; }
  [data-s="5"] .sc5 .row4 { animation: fill-in 0.45s var(--ease-out) 2.05s both; }
  [data-s="5"] .sc5 .row5 { animation: pop 0.5s var(--ease-out) 2.25s both; transform-box: fill-box; transform-origin: center; }
  [data-s="5"] .sc5 .jump { animation: jump 0.75s var(--ease-in-out) 1.4s 3; }
  [data-s="5"] .sc5 .cf { transform-box: fill-box; animation: cf 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s both; }
  [data-s="5"] .sc5 .beam-car { animation: blink-lamp 0.9s ease 2.6s 2; }

  /* Alt yazı değişimi */
  .story-cap.is-new > * { animation: cap-in 0.42s var(--ease-out) both; }
  .story-cap.is-new > .story-d { animation-delay: 60ms; }

  /* Eriyen para: güneş döner, deste erir, damlalar düşer */
  .m-stack { transform: none; }
  .m-pool { transform: scaleX(0.3); }
  .m-rays { animation: spin 24s linear infinite; }
  .melt.is-on .m-stack { animation: melt 2.6s var(--ease-in-out) 0.3s both; }
  .melt.is-on .m-pool { animation: pool 2.6s var(--ease-in-out) 0.3s both; }
  .melt.is-on .drip { transform-box: fill-box; animation: drip 1.8s ease-in 0.6s infinite; }
  .melt.is-on .drip2 { animation-delay: 1.1s; } .melt.is-on .drip3 { animation-delay: 1.5s; } .melt.is-on .drip4 { animation-delay: 0.9s; animation-duration: 2.2s; }
  .m-heat { animation: heat 2.4s ease-in-out infinite alternate; }
}

@keyframes drift { to { transform: translateX(70px); } }
@keyframes blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(0.1); } }
@keyframes breathe { to { transform: translateY(-3px); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes flag { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes s-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes shutter { from { transform: none; } to { transform: translateY(-250px); } }
@keyframes drive { from { transform: translateX(-1050px); } to { transform: none; } }
@keyframes roll { from { transform: rotate(-1580deg); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(36px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pop-up { from { opacity: 0; transform: translateY(16px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes slide-l { from { opacity: 0; transform: translateX(60px) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes fill-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes scan { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 88% { opacity: 1; transform: translateY(300px); } 100% { opacity: 0; transform: translateY(300px); } }
@keyframes pt1 { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-112px, 24px) scale(0.6); } }
@keyframes pt2 { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-112px, 72px) scale(0.6); } }
@keyframes pt3 { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-112px, 120px) scale(0.6); } }
@keyframes pt4 { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-112px, 168px) scale(0.6); } }
@keyframes flip { from { opacity: 1; transform: none; } 60% { opacity: 1; } to { opacity: 0; transform: translateY(-24px) scaleY(0.15); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, -36px); } }
/* Yürüyüş: yavaşlayarak gelir, her adımda hafif sekme */
@keyframes walk {
  0% { transform: translate(380px, 0); } 12.5% { transform: translate(296px, -7px); } 25% { transform: translate(222px, 0); }
  37.5% { transform: translate(158px, -6px); } 50% { transform: translate(104px, 0); } 62.5% { transform: translate(60px, -4px); }
  75% { transform: translate(28px, 0); } 87.5% { transform: translate(8px, -2px); } 100% { transform: none; }
}
@keyframes plane-x { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(150px); } }
@keyframes plane-y { 0%, 100% { transform: none; } 50% { transform: translateY(-70px) rotate(-8deg); } }
@keyframes jump { 0%, 100% { transform: none; } 40% { transform: translateY(-22px); } }
@keyframes cf { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)); } }
@keyframes blink-lamp { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes melt { from { transform: none; } to { transform: scale(1.1, 0.5); } }
@keyframes pool { from { transform: scaleX(0.3); } to { transform: none; } }
@keyframes drip { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(22px) scaleY(1.3); } }
@keyframes heat { from { transform: translateY(0); opacity: 0.4; } to { transform: translateY(-8px); opacity: 1; } }

/* ---------- Sık sorulanlar: başlık ortada, liste altında ---------- */
.faq-h { grid-column: 1 / -1; position: static; text-align: center; }
.faq-list { grid-column: 3 / -3; }

/* ---------- Alt bilgi: daha kısa, OtoWise yazısı ortalı ---------- */
.close { padding-top: clamp(40px, 4vw, 64px); }
.close-in { row-gap: 28px; }
.close h2 { font-size: clamp(32px, 3.6vw, 56px); }
.close-main { gap: 16px; }
.close-legal { margin-top: clamp(16px, 1.6vw, 24px); }
.close-name { height: auto; font-size: clamp(56px, 7vw, 112px); line-height: 1; padding: 4px 0 14px; text-align: center; letter-spacing: -0.04em; }
.close-name span, .js .close-name:not(.is-in) span { transform: none; }
@media (max-width: 760px) {
  .faq-list { grid-column: 1 / -1; }
  .close h2 { font-size: 9vw; }
  .close-name { font-size: 17vw; }
}