/* Mobil hikâye — "aşağı inen hat" (≤860px). Masaüstünde sabitlenen grafik (.h5-story) kalır.
   Seçici ön eki: h5m- */
.h5m{display:none}

@media (max-width:860px){
  .h5-story{display:none}
  .h5m{display:block;position:relative;background:var(--h5-paper);color:var(--h5-ink);
    background-image:linear-gradient(90deg,var(--h5-rule) 1px,transparent 1px),linear-gradient(0deg,var(--h5-rule) 1px,transparent 1px);background-size:20vw 100%,100% 9vh}

  /* Açılış: dev ₺0 + aşağı çağrısı */
  .h5m-hero{min-height:100svh;padding:calc(var(--h5-nav-h) + 22px) var(--h5-pad) 26px;display:flex;flex-direction:column}
  .h5m-meta{display:flex;justify-content:space-between;font:600 10.5px var(--h5-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.6)}
  .h5m-zero{margin-top:auto;font-weight:900;font-stretch:62%;font-size:58vw;line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
  .h5m-h1{margin-top:14px;font-weight:800;font-stretch:85%;font-size:9.6vw;line-height:1;letter-spacing:-.035em}
  .h5m-hero p{margin-top:14px;font:400 13px/1.6 var(--h5-mono);color:rgba(10,10,10,.7);max-width:34ch}
  .h5m-down{margin-top:26px;display:flex;align-items:center;gap:14px;font:600 11px var(--h5-mono);letter-spacing:.18em;text-transform:uppercase}
  .h5m-down i{position:relative;width:26px;height:56px;border:1.5px solid var(--h5-ink);border-radius:13px;flex:none}
  .h5m-down i::before{content:"";position:absolute;left:50%;top:8px;width:4px;height:12px;margin-left:-2px;background:var(--h5-scream);border-radius:2px;animation:h5m-drop 1.5s ease-in-out infinite}
  @keyframes h5m-drop{0%{transform:translateY(0);opacity:1}70%{transform:translateY(26px);opacity:0}100%{transform:translateY(26px);opacity:0}}
  .h5m-down b{font-weight:600;color:var(--h5-scream)}

  /* Sabit HUD: menünün altına yapışır, hat boyunca ay/ciro/ilerleme gösterir */
  .h5m-hud{position:sticky;top:var(--h5-nav-h);z-index:20;display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;padding:10px var(--h5-pad) 12px;background:var(--h5-paper);border-bottom:1.5px solid var(--h5-ink);font:600 10.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase}
  .h5m-hud b{font-weight:900;font-stretch:62%;font-family:var(--h5-display);font-size:26px;letter-spacing:-.03em;text-transform:none;font-variant-numeric:tabular-nums;text-align:center;transition:color .3s}
  .h5m-hud b.is-down{color:var(--h5-scream)}
  .h5m-hud .h5m-trend{text-align:right;color:rgba(10,10,10,.6)}
  .h5m-hud .h5m-trend.is-down{color:var(--h5-scream)}
  .h5m-hud .h5m-cue{grid-column:1/-1;display:flex;justify-content:space-between;color:rgba(10,10,10,.6);font-weight:500;letter-spacing:.1em}
  .h5m-hud .h5m-cue b{font-size:11px;font-family:var(--h5-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--h5-scream);font-weight:600;animation:h5m-blink 1.6s steps(2) infinite}
  .h5m-hud.is-done .h5m-cue b{animation:none;color:var(--h5-ink)}
  @keyframes h5m-blink{50%{opacity:.35}}
  .h5m-bar{position:absolute;left:0;right:0;bottom:-1.5px;height:3px;background:var(--h5-scream);transform:scaleX(0);transform-origin:left;will-change:transform}

  /* Hat: sol oluk (96px) — çizgi ciroyla sağa kayarak aşağı iner; kartlar sağda */
  .h5m-track{position:relative;padding:34px 0 40px}
  .h5m-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .h5m-rail{stroke:rgba(10,10,10,.14);stroke-width:1.5;fill:none;stroke-dasharray:3 6}
  .h5m-line{stroke:var(--h5-ink);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .h5m-track.is-done .h5m-line{stroke:var(--h5-scream)}
  .h5m-tip{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--h5-scream);border:2.5px solid var(--h5-ink);z-index:3;will-change:transform}
  .h5m-tip::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;border:2px solid var(--h5-scream);animation:h5-pulse 1.4s ease-out infinite}

  .h5m-ms{position:relative;padding:0 var(--h5-pad) 0 104px;min-height:52vh;display:flex;flex-direction:column;justify-content:center}
  .h5m-dot{position:absolute;top:50%;left:calc(22px + var(--x,0) * 56px);width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid var(--h5-ink);background:var(--h5-paper);transform:rotate(45deg) scale(.6);transition:transform .45s var(--h5-ease),background-color .3s;z-index:2}
  .h5m-ms.is-on .h5m-dot{background:var(--h5-scream);transform:rotate(45deg) scale(1)}
  .h5m-card{border-left:1.5px solid var(--h5-ink);padding-left:16px;opacity:.28;transform:translateY(18px);transition:opacity .5s,transform .6s var(--h5-ease)}
  .h5m-ms.is-on .h5m-card{opacity:1;transform:none}
  .h5m-label{display:flex;align-items:center;gap:10px;font:600 10.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
  .h5m-label i{font-style:normal;background:var(--h5-scream);color:var(--h5-ink);padding:4px 8px}
  .h5m-body{font-weight:800;font-stretch:88%;font-size:clamp(22px,6.4vw,30px);line-height:1.06;letter-spacing:-.03em}
  .h5m-ms.is-last .h5m-body{font-weight:900;font-stretch:62%;font-size:15vw;color:var(--h5-scream)}
  .h5m-note{margin-top:10px;font:400 12.5px/1.55 var(--h5-mono);color:rgba(10,10,10,.72)}
  .h5m-amount{margin-top:10px;font-weight:900;font-stretch:62%;font-size:34px;letter-spacing:-.03em;line-height:.9;font-variant-numeric:tabular-nums}
  .h5m-delta{margin-top:8px;font:500 10.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.62)}
  .h5m-delta b{font-weight:600;color:var(--h5-ink)}
  .h5m-delta.is-down b{color:var(--h5-scream)}

  /* Referanslar hatla birlikte iner: mağaza çiftleri araya girer */
  .h5m-refs{position:relative;margin:6vh var(--h5-pad) 6vh 104px;border:1.5px solid var(--h5-ink);background:var(--h5-paper);opacity:.3;transform:translateY(18px);transition:opacity .5s,transform .6s var(--h5-ease)}
  .h5m-refs.is-on{opacity:1;transform:none}
  .h5m-refs-head{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1.5px solid var(--h5-ink);font:600 10.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase}
  .h5m-refs-head b{color:var(--h5-scream);font-weight:600}
  .h5m-refs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .h5m-refs-grid a{display:grid;gap:8px;padding:12px;border-right:1.5px solid var(--h5-ink);align-content:start}
  .h5m-refs-grid a:last-child{border-right:0}
  .h5m-phone{display:block;aspect-ratio:9/13;border:1.5px solid var(--h5-ink);border-radius:12px;overflow:hidden;background:#fff}
  .h5m-phone img{width:100%;height:auto;display:block}
  .h5m-phone.is-empty{display:flex;align-items:center;justify-content:center;font:600 10px var(--h5-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.5);text-align:center;padding:10px}
  .h5m-refs-grid b{font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:-.02em;line-height:1.1}
  .h5m-refs-grid small{font:500 10px var(--h5-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--h5-scream)}
  .h5m-refs-all{display:block;padding:10px 12px;border-top:1.5px solid var(--h5-ink);font:600 10.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;text-align:center}

  /* Doruk */
  .h5m-boom{background:var(--h5-ink);color:var(--h5-paper);padding:56px var(--h5-pad) 48px}
  .h5m-boom .h5m-meta{color:rgba(242,239,233,.7)}
  .h5m-boom-num{margin-top:22px;font-weight:900;font-stretch:62%;font-size:21.5vw;line-height:.86;letter-spacing:-.03em;color:var(--h5-scream);font-variant-numeric:tabular-nums}
  .h5m-boom p{margin-top:18px;font-weight:800;font-stretch:88%;font-size:7vw;letter-spacing:-.03em;line-height:1.05}
  .h5m-boom .h5-btn{margin-top:26px;background:var(--h5-scream);color:var(--h5-ink)}
}
@media (prefers-reduced-motion:reduce){
  .h5m-down i::before,.h5m-hud .h5m-cue b,.h5m-tip::after{animation:none}
  .h5m-card,.h5m-refs{opacity:1 !important;transform:none !important}
}