/* ===== 9 KURYE — teslim al → yolda → teslim → ödeme ===== */
.v9 { --cycle: 14s; background:
  radial-gradient(ellipse 55% 45% at 30% 40%, rgba(126,182,255,.1), transparent 55%),
  linear-gradient(160deg,#0e1418,#0a0c10); }
.v9 .story { position:absolute; inset:0; }
.v9 .beat {
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:4% 5%;
  opacity:0; visibility:hidden;
  pointer-events:none;
}
/* 16–26 pickup · 26–36 route · 36–44 deliver · 44–100 pay+hold */
.v9 .b1 { animation:v9b1 var(--cycle) linear infinite; }
.v9 .b2 { animation:v9b2 var(--cycle) linear infinite; }
.v9 .b3 { animation:v9b3 var(--cycle) linear infinite; }
.v9 .b4 { animation:v9b4 var(--cycle) linear infinite; }
@keyframes v9b1 {
  0%,15.5%{opacity:0;visibility:hidden}
  16.5%,25%{opacity:1;visibility:visible}
  26.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v9b2 {
  0%,25.5%{opacity:0;visibility:hidden}
  26.5%,35%{opacity:1;visibility:visible}
  36.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v9b3 {
  0%,35.5%{opacity:0;visibility:hidden}
  36.5%,43%{opacity:1;visibility:visible}
  44.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v9b4 {
  0%,43.5%{opacity:0;visibility:hidden}
  44.5%,100%{opacity:1;visibility:visible}
}
.v9 .frame {
  width:min(92%,720px); height:min(88%,100%);
  display:grid; grid-template-columns:1.15fr .95fr; gap:.55rem;
  align-items:stretch;
}
.v9 .card {
  background:#151922; border:1px solid var(--line); border-radius:14px;
  padding:.55rem .65rem; box-shadow:0 16px 40px rgba(0,0,0,.4);
  min-width:0; display:flex; flex-direction:column; gap:.4rem;
}
.v9 .chip {
  align-self:flex-start; font-size:.52rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.15rem .4rem; border-radius:5px;
}
.v9 .chip-pick{background:rgba(255,200,107,.18);color:#ffc86b;border:1px solid rgba(255,200,107,.4)}
.v9 .chip-road{background:rgba(126,182,255,.18);color:#a8cfff;border:1px solid rgba(126,182,255,.4)}
.v9 .chip-drop{background:rgba(125,255,178,.15);color:#7dffb2;border:1px solid rgba(50,200,120,.4)}
.v9 .chip-pay{background:rgba(var(--brand-rgb),.2);color:#ffb4b1;border:1px solid rgba(var(--brand-rgb),.45)}
.v9 .card h3 { margin:0; font:700 .85rem Outfit,sans-serif; letter-spacing:-.01em; }
.v9 .card .sub { margin:0; font-size:.58rem; color:var(--muted); line-height:1.35; }
.v9 .order {
  display:grid; grid-template-columns:44px 1fr auto; gap:.4rem; align-items:center;
  background:rgba(255,255,255,.04); border-radius:10px; padding:.4rem;
  font-size:.58rem;
}
.v9 .bag {
  width:44px; height:44px; border-radius:10px;
  background:linear-gradient(160deg,#2a3340,#1a2028);
  border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center; position:relative;
}
.v9 .bag::before {
  content:""; width:22px; height:16px; border-radius:3px 3px 5px 5px;
  background:linear-gradient(180deg,#ef514c,#c43a36);
  box-shadow:0 2px 0 #8a2826;
}
.v9 .bag::after {
  content:""; position:absolute; top:10px; width:10px; height:6px;
  border:2px solid rgba(255,255,255,.55); border-bottom:0; border-radius:6px 6px 0 0;
}
.v9 .order strong { display:block; font-family:Outfit,sans-serif; font-size:.68rem; }
.v9 .order span { color:var(--muted); }
.v9 .order .amt { font:700 .75rem Outfit,sans-serif; color:#ffc86b; }
.v9 .cta {
  margin-top:auto; text-align:center; font:800 .72rem Outfit,sans-serif;
  padding:.5rem; border-radius:10px; color:#fff;
  background:var(--brand); box-shadow:0 8px 20px rgba(var(--brand-rgb),.35);
  animation:v9cta var(--cycle) var(--punch) infinite;
}
@keyframes v9cta {
  0%,18%{transform:scale(.96);filter:brightness(.9)}
  22%{transform:scale(1.04);filter:brightness(1.1)}
  26%,100%{transform:scale(1);filter:brightness(1)}
}
.v9 .phone {
  background:#0e1218; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:.45rem .4rem .55rem; display:flex; flex-direction:column; gap:.35rem;
  box-shadow:0 20px 48px rgba(0,0,0,.5); position:relative;
}
.v9 .phone::before {
  content:""; width:36%; height:4px; border-radius:99px; background:rgba(255,255,255,.12);
  margin:.1rem auto .25rem;
}
.v9 .ph-bar {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.5rem; color:var(--muted); padding:0 .15rem;
}
.v9 .ph-bar b { color:var(--text); font-family:Outfit,sans-serif; font-size:.62rem; }
.v9 .courier {
  display:flex; align-items:center; gap:.4rem; padding:.35rem;
  background:rgba(255,255,255,.04); border-radius:10px;
}
.v9 .avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(145deg,#3d4a5c,#1e2630);
  border:2px solid rgba(126,182,255,.45);
  display:grid; place-items:center; font:800 .65rem Outfit,sans-serif; color:#a8cfff;
}
.v9 .courier .who { font-size:.55rem; }
.v9 .courier .who strong { display:block; font:700 .68rem Outfit,sans-serif; }
.v9 .courier .who span { color:var(--muted); }
.v9 .status {
  font-size:.55rem; font-weight:700; padding:.35rem .4rem; border-radius:8px;
  text-align:center;
}
.v9 .st-wait{background:rgba(255,200,107,.12);color:#ffc86b}
.v9 .st-road{background:rgba(126,182,255,.12);color:#a8cfff}
.v9 .st-ok{background:rgba(50,200,120,.15);color:#7dffb2}
.v9 .st-pay{background:rgba(var(--brand-rgb),.15);color:#ffb4b1}

/* Beat 1 — pickup handshake */
.v9 .b1 .hand {
  display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.2rem 0;
}
.v9 .b1 .spot {
  flex:1; text-align:center; font-size:.5rem; color:var(--muted);
  padding:.35rem; background:rgba(255,255,255,.03); border-radius:8px;
}
.v9 .b1 .spot b { display:block; font:700 .62rem Outfit,sans-serif; color:var(--text); margin-bottom:.15rem; }
.v9 .b1 .arrow {
  font:800 1.1rem Outfit,sans-serif; color:var(--brand);
  animation:v9arr .7s var(--snap) infinite alternate;
}
@keyframes v9arr { to { transform:translateX(4px); opacity:.7 } }
.v9 .b1 .picked {
  opacity:0; text-align:center; font:800 .65rem Outfit,sans-serif; color:#7dffb2;
  animation:v9picked var(--cycle) var(--punch) infinite;
}
@keyframes v9picked {
  0%,21%{opacity:0;transform:translateY(6px)}
  23%{opacity:1;transform:none}
  26%,100%{opacity:1}
}

/* Beat 2 — map */
.v9 .map {
  position:relative; flex:1; min-height:0; border-radius:12px; overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0 / 28px 28px,
    #121820;
  border:1px solid var(--line);
}
.v9 .road {
  position:absolute; left:14%; top:62%; width:72%; height:3px;
  background:linear-gradient(90deg,#3a4554,#5a6a7e); border-radius:99px;
  transform:rotate(-12deg); transform-origin:left center;
}
.v9 .pin {
  position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); border:2px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.v9 .pin-a { left:12%; top:58%; background:var(--brand); }
.v9 .pin-b { right:10%; top:28%; background:#7dffb2; }
.v9 .rider {
  position:absolute; left:12%; top:54%; width:22px; height:22px; margin-left:-11px; margin-top:-11px;
  border-radius:50%; background:#7eb6ff; border:2px solid #fff;
  box-shadow:0 0 0 4px rgba(126,182,255,.25), 0 6px 14px rgba(0,0,0,.4);
  animation:v9ride var(--cycle) var(--snap) infinite;
  z-index:2;
}
@keyframes v9ride {
  0%,26%{left:14%;top:58%}
  35%{left:78%;top:32%}
  36%,100%{left:78%;top:32%}
}
.v9 .eta {
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  font:800 .7rem Outfit,sans-serif; color:#fff;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  padding:.25rem .55rem; border-radius:99px; white-space:nowrap;
  animation:v9eta var(--cycle) steps(1,end) infinite;
}
@keyframes v9eta {
  0%,26%{content:"8 dk"}
  26%,30%{opacity:1}
  36%,100%{opacity:1}
}
.v9 .b2 .eta::after { content:" · 8 dk"; }
.v9 .b2 .progress {
  height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:.15rem;
}
.v9 .b2 .progress i {
  display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,#4d8dff,#7eb6ff);
  animation:v9prog var(--cycle) var(--snap) infinite;
}
@keyframes v9prog {
  0%,26%{width:8%}
  35%{width:100%}
  36%,100%{width:100%}
}

/* Beat 3 — door deliver */
.v9 .door {
  flex:1; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(180deg,#1a222c 0%,#121820 100%);
  display:grid; place-items:center; position:relative; overflow:hidden; min-height:120px;
}
.v9 .door::before {
  content:""; position:absolute; inset:18% 28%; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#2a3544,#1c2530); border:1px solid rgba(255,255,255,.1);
}
.v9 .door::after {
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background:#ffc86b; top:48%; right:34%; box-shadow:0 0 8px rgba(255,200,107,.5);
}
.v9 .handoff {
  position:relative; z-index:1; display:flex; align-items:flex-end; gap:.6rem;
  animation:v9hand var(--cycle) var(--snap) infinite;
}
@keyframes v9hand {
  0%,36%{transform:translateY(8px);opacity:.4}
  39%{transform:none;opacity:1}
  44%,100%{opacity:1;transform:none}
}
.v9 .fig {
  width:36px; height:52px; border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg,#3d4a5c,#1e2630); border:1px solid rgba(255,255,255,.12);
  position:relative;
}
.v9 .fig::before {
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(145deg,#c4b09a,#8a7358);
}
.v9 .fig.k { background:linear-gradient(180deg,#4d8dff,#2a5080); }
.v9 .fig .pkg {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:18px; height:12px; border-radius:2px; background:var(--brand);
  box-shadow:0 2px 0 #8a2826;
  animation:v9pkg var(--cycle) var(--snap) infinite;
}
@keyframes v9pkg {
  0%,38%{left:20%;opacity:1}
  42%{left:80%;opacity:1}
  44%,100%{left:80%;opacity:.85}
}
.v9 .b3 .ok-banner {
  text-align:center; font:800 .72rem Outfit,sans-serif; color:#7dffb2;
  opacity:0; animation:v9okb var(--cycle) var(--punch) infinite;
}
@keyframes v9okb {
  0%,40%{opacity:0;transform:scale(.9)}
  43%{opacity:1;transform:none}
  44%,100%{opacity:1}
}

/* Beat 4 — payment */
.v9 .pay-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.35rem;
}
.v9 .pay-opt {
  text-align:center; padding:.45rem .3rem; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-size:.55rem; font-weight:700; color:var(--muted);
  animation:v9payopt var(--cycle) var(--snap) infinite;
}
.v9 .pay-opt:nth-child(2){animation-delay:.12s}
@keyframes v9payopt {
  0%,44%{border-color:var(--line);color:var(--muted);background:rgba(255,255,255,.03)}
  47%{border-color:var(--brand);color:#fff;background:rgba(var(--brand-rgb),.28);box-shadow:0 0 16px rgba(var(--brand-rgb),.35)}
  52%,100%{border-color:rgba(50,200,120,.45);color:#7dffb2;background:rgba(50,200,120,.12);box-shadow:none}
}
.v9 .pay-opt b { display:block; font:800 .8rem Outfit,sans-serif; margin-bottom:.1rem; color:inherit; }
.v9 .success {
  margin-top:auto; text-align:center; padding:.55rem; border-radius:12px;
  background:linear-gradient(160deg,rgba(50,200,120,.22),rgba(50,200,120,.08));
  border:1px solid rgba(50,200,120,.4);
  opacity:0; animation:v9suc var(--cycle) var(--punch) infinite;
}
@keyframes v9suc {
  0%,48%{opacity:0;transform:scale(.92)}
  51%{opacity:1;transform:scale(1.03)}
  53%,100%{opacity:1;transform:none}
}
.v9 .success strong { display:block; font:800 .95rem Outfit,sans-serif; color:#7dffb2; }
.v9 .success span { font-size:.55rem; color:var(--muted); }
.v9 .rail {
  position:absolute; left:50%; bottom:3.5%; transform:translateX(-50%);
  display:flex; gap:.35rem; z-index:5;
}
.v9 .rail i {
  width:28px; height:4px; border-radius:99px; background:rgba(255,255,255,.12);
  animation:v9rail var(--cycle) linear infinite;
}
.v9 .rail i:nth-child(1){animation-name:v9r1}
.v9 .rail i:nth-child(2){animation-name:v9r2}
.v9 .rail i:nth-child(3){animation-name:v9r3}
.v9 .rail i:nth-child(4){animation-name:v9r4}
@keyframes v9r1 {
  0%,15%{background:rgba(255,255,255,.12)} 16%,25%{background:var(--brand)} 26%,100%{background:rgba(255,255,255,.12)}
}
@keyframes v9r2 {
  0%,25%{background:rgba(255,255,255,.12)} 26%,35%{background:#7eb6ff} 36%,100%{background:rgba(255,255,255,.12)}
}
@keyframes v9r3 {
  0%,35%{background:rgba(255,255,255,.12)} 36%,43%{background:#7dffb2} 44%,100%{background:rgba(255,255,255,.12)}
}
@keyframes v9r4 {
  0%,43%{background:rgba(255,255,255,.12)} 44%,100%{background:var(--brand)}
}