/* ══════════════════════════════════════════════════════════════════════
   Araçlar hazırlanıyor sahnesi — ortak dosya
   ----------------------------------------------------------------------
   Yayında araç yokken araç şeridinin/ızgarasının yerine basılan sahne.
   Üç sayfa kullanır: tüketici açık artırması tanıtımı, ana sayfa ve araç
   listesi. İşaretleme Views/Shared/_AuctionPrepScene.cshtml dosyasında,
   zemin çizimi ve araç hareketleri wwwroot/js/consumer-auction-prep.js
   içinde.

   Renk ve ölçüler oa-ui.css'teki değişkenlerden okunur. Koyu zemin
   değişkenleri tüketici sayfasında sayfa sınıfında tanımlı; sahne başka
   sayfalarda da aynı görünsün diye burada kendi kabında yeniden veriliyor.
   ══════════════════════════════════════════════════════════════════════ */
.ca-prep {
    --ca-on-dark: #ffffff;
    --ca-on-dark-soft: rgba(255, 255, 255, .74);
    --ca-on-dark-faint: rgba(255, 255, 255, .52);
}

/* site.css'teki `.app-body a { color: inherit }` kuralı tek sınıflı buton
   varyantlarını yeniyor; koyu zemindeki düğmelerin rengi bu yüzden sahne
   kabıyla birlikte bir kez daha veriliyor (bkz. consumer-auction.css). */
.ca-prep .oa-btn--primary { color: var(--text-on-brand); }

.ca-prep .oa-btn--on-dark {
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ca-prep .oa-btn--on-dark:hover {
    border-color: #fff;
    background: #fff;
    color: #0d1526;
}

/* ══════════════════════════════════════════════════════════════════════
   3b — Araçlar hazırlanıyor sahnesi
   ----------------------------------------------------------------------
   Yayında araç yokken (açık artırma bağlı değil ya da lotları boş) şerit
   yerine bu sahne basılır: araçların geçtiği hazırlık hattının
   kuşbakışı görünümü. Araçlar park alanına girip yerlerine yerleşir,
   yerine oturan araçtan kontrol taraması geçer ve sıra etiketi belirir;
   park dolunca her araca tokmak vurulur, araçlar "Satıldı" rozetiyle
   sırayla çıkar ve döngü yeni araçlarla baştan başlar.

   Zemin çizimi ve araç hareketleri consumer-auction-prep.js dosyasında.
   Burada kap, metin kolonu ve sahnedeki öğelerin görünüşü tanımlı. Betik
   çalışmazsa sahne koyu zeminde boş kalır, metin ve eylemler yine okunur.
   ══════════════════════════════════════════════════════════════════════ */
.ca-prep {
    position: relative;
    isolation: isolate;
    display: flex;
    overflow: hidden;
    min-height: clamp(500px, 40vw, 590px);
    align-items: center;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 82% 50%, #1a2438 0%, rgba(26, 36, 56, 0) 62%),
        linear-gradient(120deg, #0a1120 0%, #0e1729 55%, #121c30 100%);
    color: var(--ca-on-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 40px rgba(13, 21, 38, .18);
}

/* Üst kenardaki ince magenta çizgi: sahneyi sayfanın ışık diliyle bağlar. */
.ca-prep::before {
    position: absolute;
    z-index: 8;
    top: 0;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--brand-rgb), 0), rgba(var(--brand-rgb), .85) 50%, rgba(var(--brand-rgb), 0));
    pointer-events: none;
    content: "";
}

.ca-prep__scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    contain: layout paint;
}

.ca-prep__yard,
.ca-prep__traffic {
    position: absolute;
    inset: 0;
}

.ca-prep__yard svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Metin kolonunun arkasındaki karartma ve kenar vinyeti. Araçlar parka
   karanlığın içinden girer; metin her zaman opak bir zeminde okunur. */
.ca-prep__shade {
    position: absolute;
    z-index: 5;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 17, 32, .97) 0%, rgba(10, 17, 32, .95) 36%, rgba(10, 17, 32, .72) 44%, rgba(10, 17, 32, 0) 60%),
        linear-gradient(180deg, rgba(10, 17, 32, .5) 0%, rgba(10, 17, 32, 0) 16%, rgba(10, 17, 32, 0) 84%, rgba(10, 17, 32, .55) 100%),
        linear-gradient(270deg, rgba(10, 17, 32, .45) 0%, rgba(10, 17, 32, 0) 9%);
    pointer-events: none;
}

/* Park dolduğunda sahnenin üstünden bir kez geçen ışık. */
.ca-prep__sweep {
    position: absolute;
    z-index: 4;
    top: -20%;
    bottom: -20%;
    left: 36%;
    width: 30%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 196, 228, .08) 42%, rgba(255, 255, 255, .15) 50%, rgba(255, 196, 228, .08) 58%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-30%) skewX(-14deg);
}

.ca-prep.is-yard-ready .ca-prep__sweep { animation: caPrepSweep 2.4s var(--ease) forwards; }

@keyframes caPrepSweep {
    0% { opacity: 0; transform: translateX(-30%) skewX(-14deg); }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateX(240%) skewX(-14deg); }
}

/* Sahnenin sağ üstündeki künye: alanın adı ve açık artırma anı. */
.ca-prep__hud {
    position: absolute;
    z-index: 6;
    top: 16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    background: rgba(8, 13, 25, .64);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.ca-prep__hud-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .22); }

.ca-prep__hud time {
    color: #fff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .02em;
}

.ca-prep__copy {
    position: relative;
    z-index: 7;
    width: min(540px, 44%);
    padding: clamp(24px, 2.8vw, 40px);
}

.ca-prep__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    border: 1px solid rgba(var(--brand-rgb), .42);
    border-radius: var(--radius-pill);
    background: rgba(var(--brand-rgb), .12);
    color: #ffc9e5;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.ca-prep__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 10px rgba(var(--brand-rgb), .9);
}

.ca-prep__pulse::after {
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(var(--brand-rgb), .75);
    border-radius: 50%;
    animation: caPrepPulse 1.8s ease-out infinite;
    content: "";
}

@keyframes caPrepPulse {
    0% { opacity: .9; transform: scale(.5); }
    100% { opacity: 0; transform: scale(1.9); }
}

.ca-prep__title {
    margin: 18px 0 0;
    color: #fff;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(28px, 2.7vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
}

.ca-prep__title em {
    background: linear-gradient(92deg, #ff8fcd 0%, var(--brand-primary) 62%, #ff63b3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
}

.ca-prep__text {
    max-width: 46ch;
    margin: 14px 0 0;
    color: var(--ca-on-dark-soft);
    font-size: 15px;
    line-height: 1.62;
}

/* Yayın öncesi dört aşama. Vurgu aşamadan aşamaya geçer: ziyaretçiye
   bir yüzde değil, araçların hangi kontrollerden geçtiğini anlatır. */
.ca-prep__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.ca-prep__step {
    --ca-prep-delay: 0s;
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
    padding: 11px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .035);
    animation: caPrepStep 13.6s var(--ease) var(--ca-prep-delay) infinite;
}

.ca-prep__step:nth-child(2) { --ca-prep-delay: 3.4s; }
.ca-prep__step:nth-child(3) { --ca-prep-delay: 6.8s; }
.ca-prep__step:nth-child(4) { --ca-prep-delay: 10.2s; }

.ca-prep__step::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary), #ff8fcd);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: caPrepStepBar 13.6s linear var(--ca-prep-delay) infinite;
    content: "";
}

.ca-prep__step-icon {
    display: grid;
    width: 30px;
    height: 30px;
    grid-row: span 2;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    animation: caPrepStepIcon 13.6s var(--ease) var(--ca-prep-delay) infinite;
}

.ca-prep__step-icon .material-symbols-outlined { font-size: 18px; }

.ca-prep__step strong {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.ca-prep__step small {
    color: var(--ca-on-dark-faint);
    font-size: 12px;
    line-height: 1.4;
}

@keyframes caPrepStep {
    0%, 25%, 100% { border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035); }
    3%, 22% { border-color: rgba(var(--brand-rgb), .5); background: rgba(var(--brand-rgb), .1); }
}

@keyframes caPrepStepIcon {
    0%, 25%, 100% { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); }
    3%, 22% { background: rgba(var(--brand-rgb), .24); color: #fff; }
}

@keyframes caPrepStepBar {
    0% { opacity: 1; transform: scaleX(0); }
    24% { opacity: 1; transform: scaleX(1); }
    26%, 100% { opacity: 0; transform: scaleX(1); }
}

.ca-prep__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

/* ── Hareketsiz sahne (PrepStatic) ────────────────────────────────────
   Araç listelerinde, yayında araç yokken hazırlık hattının canlandırması
   hiç basılmaz: geriye aynı koyu panelde durum rozeti, başlık, aşamalar
   ve eylemler kalır. Panel yalnızca metin kadar yer tutar, aşamalardaki
   sıra ışığı ve rozetin nabzı durur. */
.ca-prep--static {
    display: block;
    min-height: 0;
    background: linear-gradient(120deg, #0a1120 0%, #0e1729 60%, #121c30 100%);
}

.ca-prep--static .ca-prep__copy {
    width: 100%;
    max-width: 860px;
}

.ca-prep--static .ca-prep__step,
.ca-prep--static .ca-prep__step::after,
.ca-prep--static .ca-prep__step-icon,
.ca-prep--static .ca-prep__pulse::after { animation: none; }

/* Aşamanın altındaki ilerleme çizgisi animasyonsuz bir iz bırakmasın. */
.ca-prep--static .ca-prep__step::after { display: none; }

/* ── Sahnedeki öğeler (consumer-auction-prep.js oluşturur) ───────────── */
.ca-prep-car {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
    will-change: transform;
}

.ca-prep-car.is-moving { z-index: 2; }

.ca-prep-car .cp-beam,
.ca-prep-car .cp-brake,
.ca-prep-car .cp-reverse,
.ca-prep-car .cp-signal {
    opacity: 0;
    transition: opacity .35s ease;
}

.ca-prep-car.is-lit .cp-beam { opacity: 1; }
.ca-prep-car.is-braking .cp-brake { opacity: 1; transition-duration: .12s; }
.ca-prep-car.is-reversing .cp-reverse { opacity: 1; }

.ca-prep-car.is-signal-left .cp-signal--left,
.ca-prep-car.is-signal-right .cp-signal--right {
    transition: none;
    animation: caPrepBlink .74s steps(1, end) infinite;
}

@keyframes caPrepBlink {
    0% { opacity: 1; }
    50% { opacity: 0; }
}

/* Kontrol taraması: araç yerine oturunca köşe işaretleri kapanır, ışın
   aracın boyunca bir kez geçer. Dış kap JS ile konumlanır ve döner; iç
   kutu yalnızca kendi animasyonunu oynatır. */
.ca-prep-scan {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    pointer-events: none;
}

.ca-prep-scan__box {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.ca-prep-scan.is-active .ca-prep-scan__box { animation: caPrepScanBox 2s var(--ease) forwards; }

.ca-prep-scan__corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--brand-primary);
    filter: drop-shadow(0 0 4px rgba(var(--brand-rgb), .85));
}

.ca-prep-scan__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.ca-prep-scan__corner--tr { top: 0; right: 0; border-bottom: 0; border-left: 0; border-top-right-radius: 4px; }
.ca-prep-scan__corner--bl { bottom: 0; left: 0; border-top: 0; border-right: 0; border-bottom-left-radius: 4px; }
.ca-prep-scan__corner--br { right: 0; bottom: 0; border-top: 0; border-left: 0; border-bottom-right-radius: 4px; }

.ca-prep-scan__track {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(-50%);
}

.ca-prep-scan__beam {
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: 50%;
    width: 2px;
    background: #ffd6ec;
    box-shadow: 0 0 10px 2px rgba(var(--brand-rgb), .9), 0 0 26px 6px rgba(var(--brand-rgb), .42);
}

.ca-prep-scan__beam::before {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 0;
    width: 48px;
    background: linear-gradient(90deg, rgba(var(--brand-rgb), 0), rgba(var(--brand-rgb), .3));
    content: "";
}

.ca-prep-scan.is-active .ca-prep-scan__track { animation: caPrepScanBeam 1.4s cubic-bezier(.45, .05, .55, .95) .25s both; }

@keyframes caPrepScanBox {
    0% { opacity: 0; transform: scale(1.2); }
    14% { opacity: 1; transform: scale(1); }
    84% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes caPrepScanBeam {
    0% { opacity: 0; transform: translateX(-50%); }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { opacity: 0; transform: translateX(50%); }
}

/* Sıra etiketi: tarama bitince aracın üstünde belirir; araç satılınca yerini
   "Satıldı" rozetine bırakır. */
.ca-prep-tag {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 3px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-pill);
    background: rgba(8, 13, 25, .82);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    color: #fff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: var(--ca-prep-tag-size, 10.5px);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.82);
    transition: opacity .3s ease, transform .5s cubic-bezier(.2, .9, .3, 1.35);
}

.ca-prep-tag.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ca-prep-tag__check {
    display: grid;
    width: 1.5em;
    height: 1.5em;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 10px rgba(var(--brand-rgb), .7);
}

.ca-prep-tag__check svg { width: 62%; height: 62%; }

.ca-prep.is-yard-ready .ca-prep-tag.is-visible { animation: caPrepTagReady 1.2s var(--ease); }

@keyframes caPrepTagReady {
    0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
    40% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35), 0 0 22px rgba(var(--brand-rgb), .55); }
}

/* Satıldı rozeti: park dolduktan sonra her araca tokmak vurulur. Rozet
   tokmakla belirir, vuruş anında "Satıldı" yazısı damga gibi basılır ve
   araç park yerinden çıkıp sahneyi terk edene kadar üstünde kalır. Dış
   kap her karede aracın konumuna taşınır; iç rozet yalnızca kendi
   animasyonunu oynatır. */
.ca-prep-sold {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    pointer-events: none;
    visibility: hidden;
    will-change: transform;
}

.ca-prep-sold.is-visible { visibility: visible; }

.ca-prep-sold__badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .3em .85em .3em .3em;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #f35ea8 0%, var(--brand-primary) 48%, #b51b6c 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .42), 0 0 18px rgba(var(--brand-rgb), .5);
    color: #fff;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--ca-prep-sold-size, 11.5px);
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.ca-prep-sold__gavel {
    position: relative;
    display: grid;
    width: 2em;
    height: 2em;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary-active);
}

.ca-prep-sold__gavel svg {
    width: 70%;
    height: 70%;
    overflow: visible;
}

.ca-prep-sold__hammer {
    transform-box: view-box;
    transform-origin: 19.6px 19.6px;
}

/* Vuruş anında tokmağın çevresinden yayılan halka. */
.ca-prep-sold__gavel::after {
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    opacity: 0;
    content: "";
}

.ca-prep-sold__text { display: inline-block; }

.ca-prep-sold.is-visible .ca-prep-sold__badge { animation: caPrepSoldIn 1s var(--ease) both; }
.ca-prep-sold.is-visible .ca-prep-sold__hammer { animation: caPrepGavel 1s cubic-bezier(.45, 0, .3, 1) both; }
.ca-prep-sold.is-visible .ca-prep-sold__gavel::after { animation: caPrepGavelHit 1s ease-out both; }
.ca-prep-sold.is-visible .ca-prep-sold__text { animation: caPrepSoldText 1s cubic-bezier(.2, .9, .3, 1.3) both; }

@keyframes caPrepSoldIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    44% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    64%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Tokmak kalkar, ses bloğuna iner, hafifçe geri seker. */
@keyframes caPrepGavel {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(16deg); }
    46% { transform: rotate(-40deg); }
    58% { transform: rotate(-26deg); }
    76%, 100% { transform: rotate(0deg); }
}

@keyframes caPrepGavelHit {
    0%, 44% { opacity: 0; transform: scale(.7); }
    50% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

@keyframes caPrepSoldText {
    0%, 44% { opacity: 0; transform: scale(1.7); }
    58% { opacity: 1; transform: scale(.94); }
    72%, 100% { opacity: 1; transform: scale(1); }
}

/* ── Hazırlık hattı: çalışanlar ─────────────────────────────────────────
   Kuşbakışı çizilmiş kişiler JS ile konumlanır ve döner. Parçaları
   (ayaklar, kollar, gövde, alet) de her karede JS'ten gelir: adım
   uzunluğu yürünen yola bağlıdır, kollar ayaklarla ters salınır,
   çalışırken duruş role göre değişir. */
.ca-prep-person {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
    will-change: transform;
}

/* El fenerinin ışığı zemine ve araca eklenerek düşer. */
.ca-prep-person .cp-beam { mix-blend-mode: screen; }

/* Fotoğraf flaşı: fotoğrafçıdan araca uzanan kısa bir ışık konisi. Açı ve
   boy JS'ten gelir; animasyon yalnızca parlaklığı oynatır. */
.ca-prep-flash {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse 100% 62% at 0% 50%, rgba(255, 255, 255, .8) 0%, rgba(255, 248, 236, .28) 40%, rgba(255, 255, 255, 0) 76%);
    clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%);
    opacity: 0;
    pointer-events: none;
    transform-origin: 0 50%;
    mix-blend-mode: screen;
}

.ca-prep-flash.is-firing { animation: caPrepShutter .45s cubic-bezier(.1, .7, .2, 1); }

@keyframes caPrepShutter {
    0% { opacity: 0; }
    6% { opacity: .7; }
    100% { opacity: 0; }
}

/* Stüdyo tepe lambaları deklanşörle aynı anda patlar. */
.ca-prep-strobe {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(240, 246, 255, .3) 30%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.ca-prep-strobe.is-firing { animation: caPrepFlash .6s cubic-bezier(.1, .7, .2, 1); }

@keyframes caPrepFlash {
    0% { opacity: 0; }
    7% { opacity: 1; }
    100% { opacity: 0; }
}

/* Flaş anında araç gövdesi bir an aydınlanır. */
.ca-prep.is-line-mode .ca-prep-car { transition: filter .45s ease-out; }
.ca-prep.is-line-mode .ca-prep-car.is-flash { filter: brightness(1.5); transition-duration: .04s; }

/* İstasyon künyesi: pedin dış kenarında numara ve ad. Araç işlenirken
   kenarlık marka rengine döner ve alttaki çizgi dolar; iş bitince onay
   işareti yeşil yanar. Sıra istasyonunda son verilen sıra numarası da
   görünür. */
.ca-prep-station {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 6px 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    background: rgba(8, 13, 25, .74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .72);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.ca-prep-station__num {
    color: var(--brand-primary);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0;
}

.ca-prep-station__count {
    padding: 3px 6px;
    border-radius: var(--radius-pill);
    background: rgba(var(--brand-rgb), .22);
    color: #fff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .02em;
}

.ca-prep-station__state {
    display: grid;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    transition: background .3s ease;
}

.ca-prep-station__state svg {
    width: 9px;
    height: 9px;
    opacity: 0;
    transition: opacity .2s ease;
}

.ca-prep-station__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary), #ff8fcd);
    opacity: 0;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
}

.ca-prep-station.is-busy {
    border-color: rgba(var(--brand-rgb), .6);
    box-shadow: 0 0 16px rgba(var(--brand-rgb), .22);
    color: #fff;
}

.ca-prep-station.is-busy .ca-prep-station__bar { opacity: 1; }
.ca-prep-station.is-busy .ca-prep-station__state { background: var(--brand-primary); animation: caPrepBusy 1s ease-in-out infinite; }
.ca-prep-station.is-done .ca-prep-station__state { background: #22a05a; }
.ca-prep-station.is-done .ca-prep-station__state svg { opacity: 1; }

@keyframes caPrepBusy {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .45); }
    50% { box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0); }
}

.ca-prep.is-compact-line .ca-prep-station {
    gap: 4px;
    padding: 4px 6px 5px 7px;
    font-size: 9px;
}

.ca-prep.is-compact-line .ca-prep-station__count { display: none; }

/* Sıra etiketi araçla birlikte hareket eden kabın içinde durur. */
.ca-prep-follow {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
}

/* Dar ekranda hat iki şeride sığsın diye sahne biraz daha yüksek. */
@media (max-width: 899px) {
    .ca-prep.is-line-mode .ca-prep__scene { height: clamp(300px, 84vw, 430px); }
}

@media (prefers-reduced-motion: reduce) {
    .ca-prep-flash.is-firing,
    .ca-prep-strobe.is-firing,
    .ca-prep-station.is-busy .ca-prep-station__state { animation: none; }
}

/* Dar ekran: sahne üstte kendi yüksekliğinde, metin altında. */
@media (max-width: 899px) {
    .ca-prep {
        display: block;
        min-height: 0;
        background: linear-gradient(180deg, #0c1426 0%, #0e1729 100%);
    }

    .ca-prep__scene {
        position: relative;
        height: clamp(260px, 62vw, 380px);
    }

    .ca-prep__shade {
        background:
            linear-gradient(180deg, rgba(10, 17, 32, .4) 0%, rgba(10, 17, 32, 0) 20%, rgba(10, 17, 32, 0) 72%, #0c1426 100%);
    }

    .ca-prep__sweep { left: 0; }

    .ca-prep__copy {
        width: 100%;
        padding: 6px 20px 24px;
    }

    /* Dar sahnede künye üst sıradaki sıra etiketlerinin üstüne biniyor;
       aynı bilgi metin kolonundaki durum rozetinde zaten var. */
    .ca-prep__hud { display: none; }
}

@media (max-width: 519px) {
    .ca-prep__steps { grid-template-columns: minmax(0, 1fr); }
    .ca-prep__actions .oa-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-prep__step,
    .ca-prep__step::after,
    .ca-prep__step-icon,
    .ca-prep__pulse::after,
    .ca-prep.is-yard-ready .ca-prep__sweep,
    .ca-prep.is-yard-ready .ca-prep-tag.is-visible,
    .ca-prep-sold.is-visible .ca-prep-sold__badge,
    .ca-prep-sold.is-visible .ca-prep-sold__hammer,
    .ca-prep-sold.is-visible .ca-prep-sold__gavel::after,
    .ca-prep-sold.is-visible .ca-prep-sold__text { animation: none; }

    .ca-prep-tag { transition: none; }
}