.tmk-car {
  /* Лента кадров во всю ширину блока, под ней «разбивка» из рисок как по свайному полю */
  --tmk-ground: #16191c;
  --tmk-steel: #2a2f34;
  --tmk-snow: #f2f4f5;
  --tmk-frost: #9aa6ae;
  --tmk-signal: #f07a1a;
  --tmk-font: Arial, Helvetica, sans-serif;
  position: relative; max-width: 100%; margin: 0 auto;
  background: var(--tmk-ground); color: var(--tmk-snow);
  font-family: var(--tmk-font); overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.tmk-car *, .tmk-car *::before, .tmk-car *::after { box-sizing: border-box; }
.tmk-car__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.tmk-car__track::-webkit-scrollbar { display: none; }
.tmk-car__track:focus-visible { outline: 2px solid var(--tmk-signal); outline-offset: -2px; }

/* Фото целиком, подпись — под фото, ничего не перекрывает кадр */
.tmk-car__slide {
  position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start;
  max-width: 100%; display: flex; flex-direction: column; background: #202723;
}
.tmk-car__slide picture {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto;
  background: var(--tmk-ground); overflow: hidden;
}
/* размытая подложка из того же кадра вместо чёрных полос по бокам */
.tmk-car__slide picture::before {
  content: ""; position: absolute; inset: -20px; background: var(--bg) center / cover no-repeat;
  filter: blur(22px) brightness(.45); transform: scale(1.1);
}
.tmk-car__slide img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain;
}
.tmk-car__slide figcaption {
  display: flex; align-items: baseline; gap: .7em; min-height: 3.6em;
  padding: .95em 1.2em; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.35;
  background: #202723; text-wrap: balance;
}
.tmk-car__num { color: var(--tmk-signal); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .75em; letter-spacing: .04em; flex-shrink: 0; }

/* Стрелки — по центру фото (top задаёт скрипт), не над подписью */
.tmk-car__btn {
  position: absolute; top: 28%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--tmk-snow);
  background: rgba(22,25,28,.55); backdrop-filter: blur(4px); transition: background .2s;
}
.tmk-car__btn:hover { background: var(--tmk-signal); }
.tmk-car__btn:focus-visible, .tmk-car__tick:focus-visible, .tmk-car__play:focus-visible { outline: 2px solid var(--tmk-signal); outline-offset: 2px; }
.tmk-car__btn--prev { left: 12px; } .tmk-car__btn--next { right: 12px; }
.tmk-car__btn svg { width: 22px; height: 22px; }

.tmk-car__bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px 14px; border-top: 1px solid #2f3833; }
.tmk-car__ticks { flex: 1; display: flex; gap: 3px; align-items: center; height: 28px; }
.tmk-car__tick {
  position: relative; flex: 1; height: 8px; min-width: 0; padding: 0; border: 0; cursor: pointer; background: var(--tmk-steel);
  border-radius: 1px; transition: height .2s, background .2s;
}
.tmk-car__tick::before { content: ""; position: absolute; inset: -12px 0; }
.tmk-car__tick:hover { background: var(--tmk-frost); }
.tmk-car__tick[aria-current="true"] { height: 18px; background: var(--tmk-signal); }
.tmk-car__count { font-variant-numeric: tabular-nums; color: var(--tmk-frost); font-size: 1rem; letter-spacing: .04em; white-space: nowrap; }
.tmk-car__count b { color: var(--tmk-snow); font-weight: 700; }
.tmk-car__play { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #3a4440; border-radius: 50%; background: none; color: var(--tmk-frost); cursor: pointer; display: grid; place-items: center; }
.tmk-car__play:hover { color: var(--tmk-snow); border-color: var(--tmk-signal); }
.tmk-car__play svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .tmk-car__slide picture { aspect-ratio: 4 / 3; }
  .tmk-car__slide figcaption { min-height: 4.6em; padding: .9em 1em; font-size: 1rem; }
  .tmk-car__btn { width: 38px; height: 38px; }
  .tmk-car__btn--prev { left: 8px; } .tmk-car__btn--next { right: 8px; }
  .tmk-car__bar { gap: 10px; padding: 8px 10px 12px; }
  .tmk-car__ticks { gap: 2px; }
  .tmk-car__count { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .tmk-car__track { scroll-behavior: auto; } }