/* ===== Yol animasyonu: araba gelir, ortada durur, döner, selektör yakar, yoluna devam eder (≈5,8 sn) =====
   Tüm parçalar aynı süreyi (--cs-ms) paylaşır; yüzdeler zaman çizelgesidir:
   3–33 gelir · 33–38 frenler · 38–45 öne döner · 45–65 selektör ×3 · 65–72 geri döner · 72–97 gider */
.carshow { --cs-c1: #e4eaf4; --cs-c2: #c8d4e6; --cs-c3: #647089; --cs-ms: 5800ms; --cs-s: 1.3;
  position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1050; pointer-events: none; font-family: var(--font, 'Segoe UI', sans-serif); }
.carshow[hidden] { display: none; }

.cs-flash { position: absolute; inset: -60vh 0; background: #fff; opacity: 0; }
.cs-strip { position: relative; height: 450px; opacity: 0; }
.cs-strip::before { content: ""; position: absolute; inset: 0; background: rgba(var(--blue-950-rgb), .93); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }

.cs-head { position: relative; padding-top: 56px; text-align: center; opacity: 0; }
.cs-title { display: block; font-size: clamp(1.5rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -.015em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.cs-title::after { content: ""; display: block; width: 90px; height: 4px; margin: .55rem auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--yellow)); }
.cs-sub { display: block; margin-top: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.cs-sub:empty { display: none; }

.cs-stage { position: absolute; left: 0; right: 0; bottom: 34px; height: 310px; overflow: hidden; }
.cs-road { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, #2a3553 0, #151d33 40%, #0a0f1e 100%); border-top: 3px solid rgba(255, 255, 255, .38); box-shadow: 0 -18px 40px rgba(var(--cyan-rgb), .12); }
.cs-dashes { position: absolute; left: 0; right: 0; top: 30px; height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 46px, transparent 46px 94px); opacity: .7; }

.cs-scale { position: absolute; left: 50%; bottom: 36px; width: 0; height: 0; transform: scale(var(--cs-s)); transform-origin: 50% 100%; }
.cs-car { position: absolute; left: 0; bottom: 0; width: 0; height: 0; transform: translateX(-70vw); }
.cs-side, .cs-front { position: absolute; bottom: -6px; height: auto; overflow: visible; transform-origin: 50% 100%; }
.cs-side { left: -190px; width: 380px; }
.cs-front { left: -125px; width: 250px; transform: scaleX(0); }
.cs-wheel { transform-box: fill-box; transform-origin: center; }
.cs-pitch { transform-box: fill-box; transform-origin: 50% 100%; }
.cs-brake, .cs-beam-side, .cs-light, .cs-lamp { opacity: 0; }
.cs-lamp { opacity: .45; }

.cs-speed { position: absolute; left: -470px; bottom: 20px; width: 240px; height: 120px; opacity: 0; }
.cs-speed b { position: absolute; left: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85)); }
.cs-speed b:nth-child(1) { bottom: 18px; width: 220px; } .cs-speed b:nth-child(2) { bottom: 52px; width: 160px; left: 50px; } .cs-speed b:nth-child(3) { bottom: 86px; width: 190px; left: 20px; }

.cs-link { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: .55rem 1.4rem; border-radius: 99px; background: var(--yellow); color: var(--blue-950); font-weight: 700; font-size: .9rem; text-decoration: none; pointer-events: auto; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; white-space: nowrap; }
.cs-link[hidden] { display: none; }
.cs-link:hover { background: #fff; color: var(--blue-900); }
.cs-skip { position: absolute; top: 40px; right: clamp(12px, 4vw, 52px); pointer-events: auto; cursor: pointer; padding: .4rem .95rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .12); color: #fff; font: 600 .78rem var(--font, sans-serif); opacity: 0; }
.cs-skip:hover { background: rgba(255, 255, 255, .26); }

/* ---- zaman çizelgesi ---- */
.cs-go .cs-strip { animation: cs-strip var(--cs-ms) cubic-bezier(.3, .7, .2, 1) both; }
.cs-go .cs-head { animation: cs-head var(--cs-ms) cubic-bezier(.2, .8, .2, 1) both; }
.cs-go .cs-car { animation: cs-carx var(--cs-ms) both; }
.cs-go .cs-wheel { animation: cs-spin var(--cs-ms) both; }
.cs-go .cs-side { animation: cs-side var(--cs-ms) ease-in-out both; }
.cs-go .cs-front { animation: cs-front var(--cs-ms) ease-in-out both; }
.cs-go .cs-pitch { animation: cs-pitch var(--cs-ms) ease-in-out both; }
.cs-go .cs-brake { animation: cs-brake var(--cs-ms) linear both; }
.cs-go .cs-beam-side { animation: cs-beamside var(--cs-ms) linear both; }
.cs-go .cs-light { animation: cs-flash var(--cs-ms) linear both; }
.cs-go .cs-lamp { animation: cs-lamp var(--cs-ms) linear both; }
.cs-go .cs-flash { animation: cs-pageflash var(--cs-ms) linear both; }
.cs-go .cs-speed { animation: cs-speed var(--cs-ms) linear both; }
.cs-go .cs-link { animation: cs-linkin var(--cs-ms) linear both; }
.cs-go .cs-skip { animation: cs-skipin var(--cs-ms) linear both; }

@keyframes cs-strip { 0% { opacity: 0; transform: scaleY(.5); } 7% { opacity: 1; transform: none; } 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleY(.5); } }
@keyframes cs-head { 0%, 4% { opacity: 0; transform: translateY(-28px); } 14% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes cs-carx {
  0%, 3% { transform: translateX(-70vw); animation-timing-function: cubic-bezier(.12, .75, .25, 1); }
  33% { transform: translateX(0); animation-timing-function: linear; }
  72% { transform: translateX(0); animation-timing-function: cubic-bezier(.65, 0, .9, .45); }
  97%, 100% { transform: translateX(70vw); }
}
@keyframes cs-spin {
  0%, 3% { transform: rotate(0); animation-timing-function: cubic-bezier(.12, .75, .25, 1); }
  33% { transform: rotate(1700deg); animation-timing-function: linear; }
  72% { transform: rotate(1700deg); animation-timing-function: cubic-bezier(.65, 0, .9, .45); }
  97%, 100% { transform: rotate(5200deg); }
}
@keyframes cs-side { 0%, 38% { transform: scaleX(1); } 41%, 68% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
@keyframes cs-front { 0%, 41% { transform: scaleX(0); } 45%, 65% { transform: scaleX(1); } 68%, 100% { transform: scaleX(0); } }
@keyframes cs-pitch { 0%, 28% { transform: rotate(0); } 33% { transform: rotate(2.4deg); } 38% { transform: rotate(0); } 72% { transform: rotate(0); } 76% { transform: rotate(-2.2deg); } 86%, 100% { transform: rotate(0); } }
@keyframes cs-brake { 0%, 29% { opacity: 0; } 32%, 39% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes cs-beamside { 0%, 3% { opacity: 0; } 9%, 37% { opacity: .85; } 40%, 70% { opacity: 0; } 74%, 100% { opacity: .85; } }
@keyframes cs-flash {
  0%, 46.5% { opacity: 0; } 47%, 48.6% { opacity: 1; } 49%, 52% { opacity: 0; } 52.5%, 54.1% { opacity: 1; } 54.5%, 57% { opacity: 0; } 57.5%, 59.6% { opacity: 1; } 60%, 100% { opacity: 0; }
}
@keyframes cs-lamp {
  0%, 46.5% { opacity: .45; } 47%, 48.6% { opacity: 1; } 49%, 52% { opacity: .45; } 52.5%, 54.1% { opacity: 1; } 54.5%, 57% { opacity: .45; } 57.5%, 59.6% { opacity: 1; } 60%, 100% { opacity: .45; }
}
@keyframes cs-pageflash { 0%, 46.5% { opacity: 0; } 47.2%, 47.8% { opacity: .16; } 48.8%, 52.3% { opacity: 0; } 53%, 53.4% { opacity: .16; } 54.4%, 57.7% { opacity: 0; } 58.4%, 58.8% { opacity: .16; } 59.8%, 100% { opacity: 0; } }
@keyframes cs-speed { 0%, 5% { opacity: 0; } 10%, 30% { opacity: .9; } 34%, 72% { opacity: 0; } 76%, 94% { opacity: .9; } 98%, 100% { opacity: 0; } }
@keyframes cs-linkin { 0%, 44% { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px); } 52% { opacity: 1; visibility: visible; transform: translateX(-50%); } 88% { opacity: 1; visibility: visible; transform: translateX(-50%); } 95%, 100% { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px); } }
@keyframes cs-skipin { 0%, 10% { opacity: 0; } 16%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

@media (max-width: 760px) {
  .carshow { --cs-s: .66; }
  .cs-strip { height: 340px; }
  .cs-head { padding-top: 44px; }
  .cs-skip { top: 14px; }
  .cs-stage { height: 230px; }
}
@media (prefers-reduced-motion: reduce) { .carshow { display: none !important; } }