@property --bg-a {
  syntax: '<color>';
  inherits: true;
  initial-value: #FFDE33;
}

@property --bg-b {
  syntax: '<color>';
  inherits: true;
  initial-value: #FFF3C4;
}

.train-banner {
  position: relative;
  --bg-a: #FFDE33;
  --bg-b: #FFF3C4;
  background-image: radial-gradient(120% 150% at 12% 15%, var(--bg-a) 0%, var(--bg-b) 48%, var(--bg-a) 100%);
  background-size: 200% 200%;
  border-radius: 24px;
  padding: 56px 64px 64px;
  overflow: hidden;
  transition: --bg-a 700ms ease, --bg-b 700ms ease;
  animation: bgdrift 16s ease-in-out infinite;
}

.train-banner[data-grade="1"] { --kart-zemin: #FAEEDA; --koyu: #412402; --bg-a: #FFDE33; --bg-b: #FFF3C4; }
.train-banner[data-grade="2"] { --kart-zemin: #EAF3DE; --koyu: #173404; --bg-a: #A9D96C; --bg-b: #EAF3DE; }
.train-banner[data-grade="3"] { --kart-zemin: #E6F1FB; --koyu: #042C53; --bg-a: #6FB2EE; --bg-b: #E6F1FB; }
.train-banner[data-grade="4"] { --kart-zemin: #EEEDFE; --koyu: #26215C; --bg-a: #B7AFF2; --bg-b: #EEEDFE; }

@keyframes bgdrift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 55%; }
}

.train-head {
  max-width: 60%;
}

.train-head .eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--koyu, #412402);
  opacity: .75;
}

.train-head h2 {
  font-size: 3.4rem;
  color: var(--koyu, #412402);
  margin-top: 6px;
}

.train-svg-wrap {
  position: absolute;
  top: 14px;
  right: 64px;
  width: 480px;
}

.train-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.vagon {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .45s cubic-bezier(.34, 1.56, .64, 1);
  opacity: .55;
}

.vagon:focus-visible .vagon-body {
  stroke: var(--brand-500);
  stroke-width: 2;
}

.vagon:hover {
  opacity: .8;
}

.vagon[aria-selected="true"] {
  opacity: 1;
}

.vagon.pop {
  animation: vagonpop .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes vagonpop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.vagon[data-grade="1"] { --v-aktif: #EF9F27; --v-pasif: #FAC775; }
.vagon[data-grade="2"] { --v-aktif: #97C459; --v-pasif: #C0DD97; }
.vagon[data-grade="3"] { --v-aktif: #378ADD; --v-pasif: #85B7EB; }
.vagon[data-grade="4"] { --v-aktif: #AFA9EC; --v-pasif: #CECBF6; }

.vagon-body {
  fill: var(--v-pasif);
  transition: fill .3s;
}

.vagon[aria-selected="true"] .vagon-body {
  fill: var(--v-aktif);
}

.vagon-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.vagon-hit {
  fill: transparent;
}

.rail {
  stroke: #C9A800;
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
  /* dashoffset artık CSS animation ile değil, train.js'teki requestAnimationFrame
     döngüsüyle doğrudan style.strokeDashoffset'e yazılıyor — animation-duration'ı
     class ile değiştirmek (örn. .boost eklemek/çıkarmak) tarayıcıda konumu bazen
     sıçratıyordu (hızlı bir dönüşten yavaşa geçerken görünür bir "zıplama"),
     rAF ile hep son konumdan devam ettiği için bu sıçrama imkansız hale geliyor */
}

.train-group.dash {
  animation: traindash .9s cubic-bezier(.22, .7, .3, 1);
}

@keyframes traindash {
  0% { transform: translateX(0); }
  40% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.loco-body {
  fill: #D85A30;
}

.loco-dark {
  fill: #993C1D;
}

.loco-window {
  fill: #FFF6E0;
}

.wheel {
  fill: #4A1B0C;
}

.wheel-spoke {
  stroke: #E8B98F;
  stroke-width: 1.6;
}

/* dönüş de aynı nedenle (bkz. .rail) artık CSS animation değil, train.js'teki
   rAF döngüsüyle doğrudan style.transform'a yazılıyor */

.puff {
  fill: #fff;
}

/* SVG'de transform-origin varsayılan olarak elemanın KENDİ merkezi değil,
   SVG'nin (0,0) köşesidir — bacanın konumu o köşeden uzak olduğu için
   scale() büyürken daire sağa doğru itiliyordu, bu da -14px'lik sola kayma
   hareketini eziyor, duman sola değil sağa gidiyormuş gibi görünüyordu.
   fill-box + center ile büyüme artık dairenin kendi merkezine göre oluyor. */
.puff-1, .puff-2, .puff-3, .puff-4 {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: puff 2.6s ease-out infinite;
}

.puff-1 { animation-delay: 0s; }
.puff-2 { animation-delay: .65s; }
.puff-3 { animation-delay: 1.3s; }
.puff-4 { animation-delay: 1.95s; }

.puff.boost .puff-1,
.puff.boost .puff-2,
.puff.boost .puff-3,
.puff.boost .puff-4 {
  animation-duration: .7s;
}

.puff.boost .puff-1 { animation-delay: 0s; }
.puff.boost .puff-2 { animation-delay: .175s; }
.puff.boost .puff-3 { animation-delay: .35s; }
.puff.boost .puff-4 { animation-delay: .525s; }

@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translate(-14px, -26px) scale(1.5); }
}

.train-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 40px;
  min-height: 150px;
}

.train-card {
  display: block;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  opacity: 1;
  animation: drop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: var(--delay, 0ms);
  transition: box-shadow .25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.train-card:hover {
  box-shadow: 0 14px 24px rgba(0, 0, 0, .16);
}

/* Hover'daki büyüme/dönme efekti, giriş animasyonunu taşıyan .train-card'ın
   KENDİ transform'u yerine bu iç elemana uygulanıyor — aynı elemanda ikisi
   çakışınca (CSS animasyonları normal kurallardan önceliklidir) giriş
   animasyonu bitene kadar hover hiç görünmüyordu, bu yüzden ayırdık. */
.train-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.train-card:nth-child(odd):hover .train-card-inner {
  transform: translateY(-8px) scale(1.04) rotate(-2deg);
}

.train-card:nth-child(even):hover .train-card-inner {
  transform: translateY(-8px) scale(1.04) rotate(2deg);
}

@keyframes drop {
  0% { opacity: 0; transform: translateY(-18px) scale(.85); }
  65% { opacity: 1; transform: translateY(4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.train-card-cover {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--kart-zemin, #FAEEDA);
  display: block;
}

.train-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.train-card-title {
  padding: 10px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.train-cta {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.train-cta .btn-primary {
  padding: 14px 32px;
  font-size: var(--text-base);
}

@media (max-width: 860px) {
  .train-banner {
    padding: 40px 24px 32px;
  }

  .train-head {
    max-width: 100%;
    text-align: center;
  }

  .train-svg-wrap {
    position: static;
    width: min(420px, 92%);
    margin: 24px auto 0;
  }

  .train-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .train-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vagon-hit {
    transform: scale(1.3);
    transform-box: fill-box;
    transform-origin: center;
  }
}