/* ══════════════════════════════════════════════════════════════════════
   Tüketici araç açık artırması — tanıtım sayfası
   ----------------------------------------------------------------------
   Sayfanın kurgusu: ekranı tamamen kaplayan bir karşılama bölümü, ardından
   "nasıl alırım" sorusunun cevabı (ödeme, teminat, beş adım), sonra araç
   listesi, videolu sorular, salon ve SSS.

   Renk ve ölçüler oa-ui.css'teki değişkenlerden okunur; burada yalnızca bu
   sayfaya ait bileşenler tanımlıdır. Koyu bölümler markanın magentası ile
   lacivert arasında durur: zemin lacivertten türetilir, vurgu magenta kalır.
   ══════════════════════════════════════════════════════════════════════ */

.page-consumer-auction {
    /* Yapışkan üst çubuğun yüksekliği. consumer-auction.js ölçüp günceller;
       buradaki değer betik çalışmazsa kullanılan yedektir. */
    --ca-header-h: 84px;

    --ca-dark: #0d1526;
    --ca-dark-2: #16233c;
    --ca-on-dark: #ffffff;
    --ca-on-dark-soft: rgba(255, 255, 255, .74);
    --ca-on-dark-faint: rgba(255, 255, 255, .52);
    --ca-hairline: rgba(255, 255, 255, .16);
    background: var(--surface-page);
}

/* site.css'teki `.app-body a { color: inherit }` kuralı (tip + sınıf), buton
   varyantlarının kendi yazı renginden (tek sınıf) daha güçlü. Bu yüzden <a>
   olarak yazılan bir buton rengini kapsayıcısından alır: koyu zeminli
   bölümlerde doğru sonuç verir, açık zeminli kartlarda koyu yazıyı koyu
   butonun üstüne bırakır. Renkler burada, sayfa sınıfıyla birlikte daha
   yüksek özgüllükle bir kez geri veriliyor. */
.page-consumer-auction .oa-btn--primary { color: var(--text-on-brand); }
.page-consumer-auction .oa-btn--navy { color: #fff; }

.page-consumer-auction .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);
}

.page-consumer-auction .oa-btn--on-dark:hover {
    border-color: #fff;
    background: #fff;
    color: var(--ca-dark);
}

/* ══════════════════════════════════════════════════════════════════════
   Panel — sayfanın ortak kart yüzeyi
   ----------------------------------------------------------------------
   Araç şeridi, videolu sorular, katılım adımları, salon ve SSS aynı kabı
   paylaşır: sayfa tek bir sistem gibi okunsun, bölümler zeminde yalnız
   kalmasın. Yüzey burada bir kez tanımlanır; bölümler yalnızca kendi iç
   düzenlerini ekler.
   ══════════════════════════════════════════════════════════════════════ */
.ca-panel,
.ca-steps,
.ca-venue {
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

/* Panel içindeki başlık bloğu, kartın kendi dolgusuyla zaten nefes alıyor. */
.ca-panel > .oa-section-head { margin-bottom: var(--space-4); }

/* Tüketici açık artırması, birbirini takip eden bilgi bloklarıyla okunuyor. Genel
   sayfa ritminden daha sıkı bir aralık kullanmak kartların birbirinden kopuk
   görünmesini engeller. */
.page-consumer-auction .site-section {
    padding-block: clamp(18px, 2vw, 28px);
}

.page-consumer-auction .site-section + .site-section,
.ca-plan + .site-section {
    padding-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Bölüme odaklanma
   ----------------------------------------------------------------------
   Karşılama ekranındaki bağlantılar sayfayı kaydırdıktan sonra hedef
   bölümü kısa bir hâle ile işaretler: ziyaretçi tam ekrandan sonra nereye
   düştüğünü kaçırmasın. Hâle içeriğin arkasında durur (isolation + -1),
   başlık da aynı süre boyunca marka rengine geçer.
   ══════════════════════════════════════════════════════════════════════ */
.ca-focus-target {
    position: relative;
    isolation: isolate;
    scroll-margin-top: calc(var(--ca-header-h) + 16px);
}

/* Işık üç katmandan oluşuyor; hepsi tek sözde öğede üst üste duruyor:
     1) bölümün üst kenarındaki ince çizgi — ışığın kaynağı,
     2) kenarın altındaki sıcak odak — en parlak yer,
     3) aşağı doğru inceltilen yıkama — ışığın bölüme yayılması.
   Üçü de %50 hizasında, yani ışık tam tepeden vuruyor.

   Katman içeriğin ÜSTÜNDE duruyor (z-index: 3). Arkada dururken bölümün
   kendi kartları ışığı kapatıyordu: kartlar beyaz ve opak olduğu için ışık
   yalnızca aralarındaki boşluklarda görünüyor, uzun bölümlerde de sönük
   kalıyordu. Üstte olunca ışık kartların üzerine düşüyor — istenen etki
   zaten bu. Tıklamayı engellememesi için pointer-events kapalı.

   Odak ve yıkamanın dikey ölçüleri yüzde değil piksel: yüzdeyle uzun
   bölümlerde ışık yayılıp sönükleşiyor, kısa bölümlerde yoğunlaşıyordu.
   Piksel ölçü ışığı her bölümde aynı güçte tutuyor. */
.ca-focus-target::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 58% 5px at 50% 0%, rgba(var(--brand-rgb), .92) 0%, rgba(var(--brand-rgb), 0) 100%),
        radial-gradient(ellipse 60% 230px at 50% 0%, rgba(var(--brand-rgb), .16) 0%, rgba(var(--brand-rgb), 0) 70%),
        linear-gradient(to bottom, rgba(var(--brand-rgb), .05) 0%, rgba(var(--brand-rgb), 0) 280px);
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 0;
    content: "";
}

/* Süre 2,6 saniye. Hareket ışığın kendisinde: yukarıdan biraz yayvan ve
   sönük gelip yerine oturuyor, sönerken çok az aşağı kayıyor. Işık
   söndükten sonra bölüm kendi hâline dönüyor — kalıcı bir iz bırakmıyor.
   consumer-auction.js'teki temizleme süresi bu değeri izler (2800ms). */
.ca-focus-target.is-focus-flash::after { animation: caFocusBeam 2600ms var(--ease) forwards; }
.ca-focus-target.is-focus-flash .oa-h2 { animation: caFocusTitle 2600ms var(--ease); }

/* scaleX her zaman 1'in altında kalır: 1'i aşan bir değer tam genişlikteki
   katmanı sayfanın dışına taşırıyor ve giriş karesinde yatay kaydırma
   çubuğu çıkmasına yol açıyordu. Işık bu yüzden dar gelip yerine
   otururken yayılıyor — hem taşma yok hem hareket daha inandırıcı. */
@keyframes caFocusBeam {
    0% { opacity: 0; transform: translateY(-16px) scaleX(.94); }
    12% { opacity: 1; transform: translateY(0) scaleX(1); }
    76% { opacity: 1; transform: translateY(0) scaleX(1); }
    100% { opacity: 0; transform: translateY(8px) scaleX(1); }
}

/* Başlık ışığın altında kaldığı sürece marka rengine geçer; renk
   değişimi ışıktan bir tık sonra başlar ki iki hareket üst üste binmesin. */
@keyframes caFocusTitle {
    0% { color: var(--text-primary); }
    18% { color: var(--brand-primary); }
    76% { color: var(--brand-primary); }
    100% { color: var(--text-primary); }
}

@media (prefers-reduced-motion: reduce) {
    .ca-focus-target.is-focus-flash::after,
    .ca-focus-target.is-focus-flash .oa-h2 { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   1 — Karşılama ekranı
   ----------------------------------------------------------------------
   Bölüm, üst çubuğun altında kalan alanın tamamını kaplar: sayfa hangi
   ekranda açılırsa açılsın ilk görülen yalnızca bu karedir. Görsel bandı
   doldurur, metin soldaki karartmanın üzerinde durur.
   ══════════════════════════════════════════════════════════════════════ */
.ca-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ca-dark);
    color: var(--ca-on-dark);
}

.ca-hero__media {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.ca-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

/* Soldan sağa açılan karartma: metin bölgesi neredeyse opak, fotoğrafın
   sağ üçte biri açıkta kalır. */
.ca-hero__scrim {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 21, 38, .97) 0%, rgba(13, 21, 38, .90) 38%, rgba(13, 21, 38, .55) 66%, rgba(13, 21, 38, .35) 100%),
        linear-gradient(180deg, rgba(13, 21, 38, .55) 0%, rgba(13, 21, 38, 0) 34%, rgba(13, 21, 38, .45) 100%);
}

.ca-hero__inner {
    display: flex;
    min-height: calc(100svh - var(--ca-header-h));
    flex-direction: column;
    gap: clamp(24px, 4vh, 48px);
    /* Alt boşluk fazladan 30px: aşağı işareti durum kartının üstüne binmesin. */
    padding-block: clamp(28px, 5vh, 64px) calc(clamp(28px, 5vh, 64px) + 30px);
}

/* Eski tarayıcılar için yedek: svh desteklenmiyorsa vh ile aynı sonucu verir. */
@supports not (height: 100svh) {
    .ca-hero__inner { min-height: calc(100vh - var(--ca-header-h)); }
}

/* Metin bloğu boş alanı yutar ve kendi içinde ortalanır; durum kartı da
   böylece karenin altına oturur. */
.ca-hero__top {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    align-content: center;
    align-items: center;
    gap: var(--space-6);
}

/* Başlığın ikinci satırı ("Tüketici Araç Açık Artırması") geniş ekranda
   tek satıra sığsın diye 780px; paragraf kendi 46ch sınırında kalır. */
.ca-hero__copy { max-width: 780px; }

.ca-hero__date {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--brand-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.ca-hero__title {
    margin: 0;
    color: var(--ca-on-dark);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(31px, 4.6vw, 54px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.03em;
}

/* OtoSor işaretini görsel dosyası olmadan kuruyoruz: referanstaki ince
   "Oto" ile kalın "SOR" ayrımı metin olarak korunur; böylece başlık
   seçilebilir ve her ölçekte keskin kalır. Koyu kahraman bölümünde işaret
   beyaz basılır; başlıktaki tek renkli vurgu pembe "X" olarak kalır. */
.ca-otosor-wordmark {
    display: inline-flex;
    align-items: baseline;
    margin-left: .08em;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: .94em;
    font-style: normal;
    letter-spacing: -.055em;
    line-height: 1;
    vertical-align: .015em;
    white-space: nowrap;
}

.ca-otosor-wordmark__oto {
    color: #fff;
    font-weight: 400;
}

.ca-otosor-wordmark__sor {
    color: #fff;
    font-weight: 800;
}

/* Ortaklık başlığındaki tek vurgu OtoArena'nın pembe "X" işaretidir;
   OtoArena da OtoSor da beyaz durur, ayrımı harf kalınlığı verir. */
.ca-hero__partner-x { color: var(--brand-primary); }

.ca-hero__lead {
    margin: var(--space-3) 0 0;
    color: var(--ca-on-dark);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.35;
}

.ca-hero__text {
    margin: var(--space-3) 0 0;
    max-width: 46ch;
    color: var(--ca-on-dark-soft);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

.ca-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* El yazısı notu — "Esnaf dostu OtoArena tüketicinin yanında."
   Fotoğrafın üstünde durduğu için yalnızca geniş ekranda görünür. */
.ca-hero__note {
    justify-self: end;
    max-width: 300px;
    margin: 0;
    color: var(--ca-on-dark);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.45;
    text-align: right;
    text-shadow: 0 2px 18px rgba(13, 21, 38, .8);
}

.ca-hero__note::after {
    display: block;
    width: 124px;
    height: 3px;
    margin: var(--space-3) 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    content: "";
}

/* Aşağı işareti: ekranın tamamı tek bir kare olduğu için altında içerik
   olduğunu gösteren tek ipucu budur. */
.ca-hero__scroll {
    position: absolute;
    bottom: 18px;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--ca-hairline);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateX(-50%);
    animation: caScrollCue 2.4s var(--ease) infinite;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.ca-hero__scroll:hover { border-color: #fff; background: rgba(255, 255, 255, .22); }
.ca-hero__scroll:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes caScrollCue {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
    .ca-hero__scroll { animation: none; }
}

/* ── Durum kartı: geri sayım + kontenjan + künye ──────────────────────
   Karşılama karesinin içinde durur; ayrı bir şerit olarak aşağı taşmaz.

   Zemin koyu cam; üstüne birincil butonun magentası (--brand-primary) her
   yerde aynı yoğunlukta, %20 gücünde düz bir tabaka olarak biniyor. Renk
   butonla aynı, yalnızca açığı: kart markanın rengini taşısın ama sayılar ve
   künye okunaklı kalsın. */
.ca-status {
    display: grid;
    flex: 0 0 auto;
    margin-top: auto;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5);
    border: 1px solid rgba(var(--brand-rgb), .30);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(rgba(var(--brand-rgb), .2), rgba(var(--brand-rgb), .2)),
        rgba(9, 15, 28, .62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 48px rgba(4, 9, 20, .38);
}

.ca-status__cell { min-width: 0; }
.ca-status__cell + .ca-status__cell { padding-left: var(--space-5); border-left: 1px solid var(--ca-hairline); }

.ca-status__label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--brand-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Rakamlar tabular: saniye ilerlerken satır genişliği oynamasın. */
.ca-clock {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--ca-on-dark);
    font-variant-numeric: tabular-nums;
}

.ca-clock__unit { display: grid; justify-items: center; gap: 3px; min-width: 34px; }

.ca-clock__value {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

.ca-clock__name {
    color: var(--ca-on-dark-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-clock__sep {
    color: rgba(255, 255, 255, .28);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1;
}

.ca-status__quota {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    color: var(--ca-on-dark);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ca-status__quota span {
    color: var(--ca-on-dark-faint);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* Kontenjan çubuğu: pembe kısım dolan koltuklar, sondaki boşluk kalan
   kontenjan. 47 kişilik yer kaldıysa çubuğun %77'si pembedir — "çoğu yer
   doldu" cümlesinin görseli. */
.ca-status__bar {
    display: block;
    overflow: hidden;
    height: 4px;
    margin-top: var(--space-3);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16);
}

.ca-status__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-primary);
}

.ca-status__cell--meta { display: grid; align-content: center; gap: var(--space-3); }

.ca-status__meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    color: var(--ca-on-dark-faint);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.ca-status__meta > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ca-status__meta strong { color: var(--ca-on-dark); font-size: var(--fs-sm); font-weight: 700; }
.ca-status__meta .material-symbols-outlined { flex: 0 0 auto; font-size: 20px; color: var(--brand-primary); }

/* Alçak ekranlarda (dizüstü, yatay telefon) karşılama karesi taşmasın. */
@media (max-height: 760px) {
    .ca-hero__text { display: none; }
    .ca-status { padding: var(--space-4); }
    .ca-hero__scroll { display: none; }
}

@media (max-width: 1023px) {
    .ca-hero__top { grid-template-columns: minmax(0, 1fr); }
    .ca-hero__note { display: none; }
    .ca-hero__media img { object-position: 62% center; }
    .ca-hero__scrim {
        background: linear-gradient(180deg, rgba(13, 21, 38, .74) 0%, rgba(13, 21, 38, .93) 52%, rgba(13, 21, 38, .97) 100%);
    }

    .ca-status { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .ca-status__cell + .ca-status__cell {
        padding-top: var(--space-4);
        padding-left: 0;
        border-top: 1px solid var(--ca-hairline);
        border-left: 0;
    }
}

@media (max-width: 639px) {
    .ca-hero__actions .oa-btn { width: 100%; }
    .ca-status__cell--meta { display: none; }
    .ca-clock__unit { min-width: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════
   2 — Katılım planı bandı
   ----------------------------------------------------------------------
   Ödeme seçeneği, teminat kuralı ve beş adım tek bir bantta toplanır.
   Bandın kendi zemini var: sayfanın gri tabanı üzerinde yumuşak bir marka
   ışığı, kartların beyazını öne çıkarır.
   ══════════════════════════════════════════════════════════════════════ */
.ca-plan {
    position: relative;
    isolation: isolate;
    padding-block: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 28px);
    background: linear-gradient(180deg, #eef1f7 0%, var(--surface-page) 62%, var(--surface-page) 100%);
}

.ca-plan::before {
    position: absolute;
    z-index: -1;
    top: -80px;
    left: 50%;
    width: min(1100px, 92%);
    height: 420px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(var(--brand-rgb), .12) 0%, rgba(var(--brand-rgb), 0) 70%);
    transform: translateX(-50%);
    pointer-events: none;
    content: "";
}

.ca-offer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-4);
    scroll-margin-top: calc(var(--ca-header-h) + 16px);
}

/* ── Taksit kartı ─────────────────────────────────────────────────── */
/* Metin sol sütunda kalır; taksit göstergesi sağdaki boşluğa mutlak
   konumla oturur ve yerini kartın sağ iç boşluğu ayırır (böylece uzun
   metin göstergenin altına girmez). */
.ca-offer {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: clamp(20px, 2.2vw, 30px);
    border: 1px solid #cfe0f5;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #eef4fd 0%, #dfeafb 55%, #d6e4fa 100%);
    box-shadow: var(--shadow-card);
}

@media (min-width: 1200px) {
    .ca-offer { padding-right: calc(clamp(20px, 2.2vw, 30px) + 172px); }
}

/* ── Taksit göstergesi ────────────────────────────────────────────────
   Kartın sağ boşluğunu dolduran süsleme: bir ödeme kartı ve altında eşit
   taksit dilimleri. Sayı ya da oran içermez. */
/* Seçici `.ca-offer > *` kuralından (position: relative) daha güçlü
   olmalı; ikisi de tek sınıf olduğu için çocuk birleşimi ekleniyor. */
.ca-offer > .ca-offer__visual {
    position: absolute;
    top: 50%;
    right: clamp(20px, 2.2vw, 30px);
    transform: translateY(-50%);
}

/* Yazı tipi sayfadan miras alınır ki rozetteki süre gövde metniyle aynı
   ailede dursun. Gölge çizimin kendi taban levhasına düşer. */
.ca-installment {
    display: block;
    width: 168px;
    height: auto;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    filter: drop-shadow(0 12px 26px rgba(16, 37, 74, .12));
}

@media (max-width: 1199px) {
    .ca-offer { grid-template-columns: minmax(0, 1fr); }
    .ca-offer__visual { display: none; }
}

/* Kartın sağ üstündeki yumuşak ışık: düz bir dikdörtgen gibi durmasın. */
.ca-offer::before {
    position: absolute;
    top: -120px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    content: "";
}

.ca-offer > * { position: relative; }

/* İki markanın imzası kartın açılışında durur. */
.ca-cobrand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(16, 37, 74, .12);
}

/* Logo.png'nin zemini beyaz (saydam değil); açık mavi kartın üstünde beyaz
   bir kutu olarak görünüyordu. Çarpma karışımı beyazı zemine gömer, koyu ve
   magenta harfler olduğu gibi kalır — dosyayı değiştirmeden "arkasız" durur. */
.ca-cobrand__logo {
    width: auto;
    height: 36px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.ca-cobrand__x { color: #7f92ad; font-size: 17px; font-weight: 800; }

/* OtoSor'un kendi renkleri: lacivert kelime işareti, mavi halka, kırmızı
   göz. OtoArena'nın magentası buraya taşınmaz — iki marka ayrı durur. */
.ca-brand-otosor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f2b56;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.ca-brand-otosor__mark {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid #1268b3;
    border-radius: 50%;
}

.ca-brand-otosor__mark::before,
.ca-brand-otosor__mark::after,
.ca-brand-otosor__mark i {
    display: block;
    grid-area: 1 / 1;
    border-radius: 50%;
    content: "";
}

.ca-brand-otosor__mark::before { width: 15px; height: 15px; border: 2px solid #d81f26; }
.ca-brand-otosor__mark::after { width: 5px; height: 5px; background: #1268b3; }
.ca-brand-otosor__mark i { width: 3px; height: 14px; background: #1268b3; transform: rotate(-38deg) translateY(10px); }

.ca-offer__eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--info);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.ca-offer h2 {
    margin: 0;
    color: #10254a;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(23px, 2.4vw, 31px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ca-offer__text {
    margin: var(--space-3) 0 0;
    max-width: 52ch;
    color: #3c5170;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

.ca-offer__points {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.ca-offer__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: #24405f;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.5;
}

.ca-offer__points .material-symbols-outlined { flex: 0 0 auto; font-size: 19px; color: #2f7d55; }

.ca-offer__actions { margin-top: auto; padding-top: var(--space-4); }

/* ── Teminat kartı ────────────────────────────────────────────────── */
/* İçerik kısa; taksit kartıyla yan yana uzadığında dikeyde ortalanır. */
.ca-deposit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 2.2vw, 30px);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #fff6fb 0%, var(--brand-soft) 100%);
    box-shadow: var(--shadow-card);
}

.ca-deposit__badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-deposit__amount {
    margin: var(--space-3) 0 0;
    color: var(--brand-primary-active);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(30px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.ca-deposit h2 {
    margin: 14px 0 var(--space-5);
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.ca-deposit__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.ca-deposit__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .72);
}

.ca-deposit__icon {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary);
    box-shadow: var(--shadow-card);
}

.ca-deposit__icon .material-symbols-outlined { font-size: 20px; }
.ca-deposit__item strong { display: block; margin-bottom: 3px; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; }
.ca-deposit__item p { margin: 0; color: var(--text-primary); font-size: var(--fs-body); line-height: 1.5; }

@media (max-width: 899px) {
    .ca-offer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   Katılım adımları
   ----------------------------------------------------------------------
   Beş adım tek kartta; işaretlerin arkasından geçen ince çizgi akışı
   gösterir. Çizgi yalnızca adımlar gerçekten yan yanayken çizilir, alt
   alta düştüklerinde yön işareti anlamını yitirir.
   ══════════════════════════════════════════════════════════════════════ */
/* OtoSor ana sayfasındaki alan sırasını kullanan hızlı taksit hesaplama. */
.ca-calculation {
    margin-top: var(--space-5);
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-card);
    scroll-margin-top: calc(var(--ca-header-h) + 16px);
}

.ca-calculation__intro { max-width: 720px; }
.ca-calculation__intro .oa-h2 { margin: var(--space-2) 0 0; }
.ca-calculation__intro .oa-sub { margin-top: var(--space-2); }

[data-ca-calculator] {
    display: flex;
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    flex-direction: column;
    gap: 24px;
    margin-top: var(--space-4);
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface-muted, #f4f6f9);
}

.ca-calculator__primary {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.ca-calculator__field,
.ca-calculator__down-payment { display: flex; flex-direction: column; gap: 8px; }

.ca-calculator__field > span:first-child,
.ca-calculator__label-row label,
.ca-calculator__plans legend,
.ca-calculator__terms legend {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.ca-money-input { position: relative; display: block; }
.ca-money-input > span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 16px;
    color: var(--text-primary);
    font-size: 18px;
    transform: translateY(-50%);
    pointer-events: none;
}

.ca-money-input input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 16px 0 38px;
    border: 1px solid var(--border-default, #cbd4e1);
    border-radius: 9px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    font-weight: 650;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ca-money-input input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.ca-calculator__label-row { display: flex; justify-content: space-between; gap: 16px; }
.ca-calculator__label-row strong { color: var(--text-primary); font-size: 16px; }

.ca-calculator__rate-scroll {
    display: flex;
    gap: 4px;
    min-width: 0;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 11px;
    background: #e9eef5;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
.ca-calculator__rate-option { position: relative; display: block; flex: 0 0 78px; margin: 0; cursor: pointer; scroll-snap-align: start; }
.ca-calculator__rate-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ca-calculator__rate-option span { display: grid; height: 34px; place-items: center; border-radius: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 700; transition: background .15s ease, box-shadow .15s ease, color .15s ease; }
.ca-calculator__rate-option:hover span { color: var(--text-primary); }
.ca-calculator__rate-option.is-selected span { color: var(--text-primary); background: #fff; box-shadow: 0 1px 4px rgba(15, 35, 68, .18); }
.ca-calculator__rate-option input:focus-visible + span { outline: 3px solid rgba(var(--brand-rgb), .24); outline-offset: 1px; }

.ca-calculator__plans,
.ca-calculator__terms { min-width: 0; margin: 0; padding: 0; border: 0; }
.ca-calculator__plans legend,
.ca-calculator__terms legend { width: 100%; margin-bottom: 9px; }
.ca-calculator__plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.ca-payment-plan {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 106px;
    padding: 14px;
    border: 1px solid var(--border-default, #cbd4e1);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ca-payment-plan:hover { border-color: #8ea2bd; transform: translateY(-1px); }
.ca-payment-plan.is-selected { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.ca-payment-plan input { position: absolute; opacity: 0; pointer-events: none; }
.ca-payment-plan__check {
    display: grid;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    place-items: center;
    border: 1px solid #9aa9bc;
    border-radius: 50%;
    background: #fff;
}
.ca-payment-plan__check::after {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-primary);
    content: "";
    opacity: 0;
    transform: scale(.5);
    transition: opacity .15s ease, transform .15s ease;
}
.ca-payment-plan.is-selected .ca-payment-plan__check { border-color: var(--brand-primary); }
.ca-payment-plan.is-selected .ca-payment-plan__check::after { opacity: 1; transform: scale(1); }
.ca-payment-plan:has(input:focus-visible) { outline: 3px solid rgba(var(--brand-rgb), .18); outline-offset: 2px; }
.ca-payment-plan strong { display: block; color: var(--text-primary); font-size: 15px; line-height: 1.35; }
.ca-payment-plan small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }

.ca-calculator__term-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.ca-term-card {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 4px 9px;
    padding: 13px;
    border: 1px solid var(--border-default, #cbd4e1);
    border-radius: 10px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ca-term-card input { position: absolute; opacity: 0; pointer-events: none; }
.ca-term-card__radio { grid-row: span 2; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #9aa9bc; border-radius: 50%; }
.ca-term-card strong { color: var(--text-primary); font-size: 16px; }
.ca-term-card [data-ca-monthly-payment] { font-size: 14px; }
.ca-term-card.is-selected { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.ca-term-card.is-selected .ca-term-card__radio { border: 5px solid var(--brand-primary); }
.ca-term-card.is-unavailable { opacity: .48; cursor: not-allowed; }
.ca-term-card.is-loading [data-ca-monthly-payment] {
    color: transparent;
    border-radius: 5px;
    background: linear-gradient(90deg, #e5eaf1 25%, #f5f7fa 50%, #e5eaf1 75%) 0 0 / 200% 100%;
    animation: ca-calculation-shimmer 1.2s linear infinite;
}
.ca-term-card:has(input:focus-visible) { outline: 3px solid rgba(var(--brand-rgb), .18); outline-offset: 2px; }
.ca-calculator__status { min-height: 21px; margin: -8px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.ca-calculator__status.is-error { color: #aa2449; }
.ca-calculator__status.is-success { color: #257050; }
.ca-calculator__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ca-calculator__actions .oa-btn.is-disabled {
    cursor: not-allowed;
    opacity: .52;
    pointer-events: auto;
}

@keyframes ca-calculation-shimmer { to { background-position: -200% 0; } }

@media (max-width: 899px) {
    [data-ca-calculator] { padding: 20px; background: transparent; }
    .ca-calculator__primary { grid-template-columns: 1fr; }
    .ca-calculator__plan-grid { grid-template-columns: 1fr; }
    .ca-payment-plan { min-height: 0; }
}

@media (max-width: 639px) {
    .ca-calculation { padding: 20px 14px; }
    [data-ca-calculator] { padding: 18px 0 0; }
    .ca-calculator__term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-calculator__actions .oa-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-term-card.is-loading [data-ca-monthly-payment] { animation: none; }
}

.ca-plan > .site-container {
    display: flex;
    flex-direction: column;
}

/* Katılım adımları, ödeme/taksit kartlarından önce okunur. Kaynak sırayı
   değiştirmeden mevcut kart yapısını koruyoruz; bu sayede dar ekranlardaki
   grid davranışı da aynen devam eder. */
.ca-plan .ca-steps {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.ca-steps__head { margin-bottom: var(--space-5); }
.ca-steps__head .oa-h2 { margin: var(--space-2) 0 0; }
.ca-steps__head .oa-sub { margin-top: var(--space-2); max-width: 62ch; }

.ca-steps__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Adım işaretlerinin merkez hizasından geçen bağlantı çizgisi. */
.ca-steps__list::before {
    position: absolute;
    top: 24px;
    /* Çizgi her işaretin merkezinden geçer. Yüzdeyle verilen eski boşluk,
       ilk işaretle çizgi arasında kopuk bir alan oluşturuyordu. */
    right: 24px;
    left: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-tint) 0%, var(--border-default) 50%, var(--brand-tint) 100%);
    content: "";
}

.ca-step { position: relative; min-width: 0; }

.ca-step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    place-items: center;
    border: 1px solid var(--brand-border);
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-primary);
    box-shadow: 0 0 0 6px var(--surface-card);
}

.ca-step__marker .material-symbols-outlined { font-size: 23px; }

/* Sıra numarası işaretin köşesinde durur: başlığın önünde ayrı bir satır
   tutmadan adımın kaçıncı olduğunu söyler. */
.ca-step__num {
    position: absolute;
    top: -4px;
    right: -6px;
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: #fff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
}

.ca-step__title {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.ca-step__text { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.55; }

.ca-steps__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.ca-steps__foot p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.ca-steps__foot strong { color: var(--text-primary); font-weight: 700; }

@media (max-width: 1023px) {
    .ca-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-steps__list::before { display: none; }
    .ca-step__marker { box-shadow: none; }
}

@media (max-width: 599px) {
    .ca-steps__list { grid-template-columns: minmax(0, 1fr); }
    .ca-steps__foot .oa-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   3 — Araç şeridi
   ----------------------------------------------------------------------
   Kartlar sitenin ortak .auction-card bileşeni. Şerit tek sıra hâlinde
   yatay kayar; ölçüler ve davranış ana sayfadaki araç ve haber
   şeritleriyle aynı (bkz. Views/Home/Index.cshtml → #live-auction-grid),
   böylece iki sayfa ayrı ayrı tasarlanmış gibi durmaz. Kart genişliği
   "N kart tam bir sayfa doldursun" kuralıyla hesaplanır: N * kart + boşluk
   = şerit genişliği; ok düğmeleri de tam bir sayfa kaydırır.
   ══════════════════════════════════════════════════════════════════════ */
#ca-vehicle-rail-wrap { position: relative; padding: 0 0 4px; }

/* Kenar geçişleri: şeridin kesildiği yer sert bir kenar değil, sayfanın
   zeminine karışan bir geçiş olsun. Yalnızca o yönde kayacak içerik
   varken görünür (has-fade-*, consumer-auction.js tarafından konur). */
#ca-vehicle-rail-wrap::before,
#ca-vehicle-rail-wrap::after {
    position: absolute;
    top: 0;
    bottom: 8px;
    z-index: 3;
    width: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    content: "";
}

#ca-vehicle-rail-wrap::before { left: 0; background: linear-gradient(to right, var(--surface-card) 0%, rgba(255, 255, 255, .85) 40%, rgba(255, 255, 255, 0) 100%); }
#ca-vehicle-rail-wrap::after { right: 0; background: linear-gradient(to left, var(--surface-card) 0%, rgba(255, 255, 255, .85) 40%, rgba(255, 255, 255, 0) 100%); }
#ca-vehicle-rail-wrap.has-fade-left::before { opacity: 1; }
#ca-vehicle-rail-wrap.has-fade-right::after { opacity: 1; }

/* Şeridin yatay düzeni yalnızca Tailwind sınıflarına (flex, gap-5,
   snap-x) bırakılmaz: CDN betiği bu sınıfları üretmediğinde kartlar alt
   alta diziliyordu. Aynı değerler burada da yazılı; boşluk,
   consumer-auction.js içindeki 20px ile aynı kalmalı. */
#ca-vehicle-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-stop: always;
    scroll-padding-inline: 4px;
    will-change: scroll-position;
}

#ca-vehicle-rail::-webkit-scrollbar { display: none; }

/* Ok düğmesiyle kayarken tutturma kapanır; açık kalırsa animasyon her
   karede kendini bir sonraki karta çeker. */
#ca-vehicle-rail.is-animating { scroll-snap-type: none; scroll-behavior: auto; }

#ca-vehicle-rail > * {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    scroll-snap-align: start;
}

/* Sayfa sayfa tam oturan genişlikler: (100% - toplam boşluk) / sütun. */
@media (min-width: 480px) { #ca-vehicle-rail > * { flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } }
@media (min-width: 900px) { #ca-vehicle-rail > * { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); } }
/* Beş sütun: kartlar dört sütunlu ölçünün yaklaşık %20 altında kalıyor,
   şeritte bir sayfada daha çok araç görünüyor. */
@media (min-width: 1240px) { #ca-vehicle-rail > * { flex: 0 0 calc((100% - 80px) / 5); max-width: calc((100% - 80px) / 5); } }

/* Kart gövdesindeki tek eylem tam genişlikte durur: bu sayfada teklif
   verilmiyor, yalnızca detaya gidiliyor. */
#ca-vehicle-rail .ac-actions { grid-template-columns: minmax(0, 1fr); }

/* Şerit okları — ana sayfadaki .auction-nav-btn ile aynı ölçü ve durumlar.
   O sınıf ana sayfanın kendi <style> bloğunda tanımlı olduğu için burada
   sayfanın kendi adıyla yeniden yazıldı. */
.ca-nav-btn {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--text-secondary);
    box-shadow: var(--shadow-card);
    transition: color var(--dur-slow) ease, border-color var(--dur-slow) ease, background var(--dur-slow) ease, box-shadow var(--dur-slow) ease, opacity var(--dur-slow) ease;
}

.ca-nav-btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 4px 14px rgba(var(--brand-rgb), .14); }
.ca-nav-btn:active:not(:disabled) { background: var(--brand-soft); }
.ca-nav-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.ca-nav-btn:disabled { border-color: var(--border-subtle); color: var(--text-muted); box-shadow: none; opacity: .35; cursor: default; }

/* Dar ekranda oklar gizlenir: şerit zaten parmakla kaydırılıyor. */
@media (max-width: 639px) { .oa-section-head__tools .ca-nav-btn { display: none; } }

.ca-soon {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border: 1px dashed var(--brand-border);
    border-radius: var(--radius-lg);
    background: var(--brand-soft);
    text-align: center;
}

.ca-soon__icon {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-2);
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary);
    box-shadow: var(--shadow-card);
}

.ca-soon__icon .material-symbols-outlined { font-size: 28px; }

.ca-soon strong {
    color: var(--brand-primary-active);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-card-title);
    font-weight: 800;
    line-height: 1.25;
}

.ca-soon p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   3b — Araçlar hazırlanıyor sahnesi
   ----------------------------------------------------------------------
   Sahne artık ana sayfa ve araç listesinde de kullanıldığı için stilleri
   wwwroot/css/auction-prep.css dosyasına taşındı; işaretlemesi
   Views/Shared/_AuctionPrepScene.cshtml dosyasında.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   4 — Videolu sorular
   ----------------------------------------------------------------------
   Bölüm ana sayfada da kullanıldığı için kart ve oynatıcı katmanı stilleri
   wwwroot/css/video-questions.css dosyasına taşındı; işaretlemesi
   Views/Shared/_VideoQuestions.cshtml dosyasında.
   ══════════════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════════════
   5 — Salon
   Sol sütun adres ve ulaşım, sağ sütun harita. Harita gömülü çerçeve
   olduğu için köşe yuvarlaması dış kutuda tutulur.
   ══════════════════════════════════════════════════════════════════════ */
/* Adres ve harita, katılım adımlarıyla aynı beyaz kartın içinde durur. */
.ca-venue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(20px, 2.5vw, 32px);
}

.ca-venue__body { display: flex; flex-direction: column; }
.ca-venue__body .oa-section-head { margin-bottom: 0; }

.ca-venue__facts { display: grid; align-content: center; gap: var(--space-4); margin-top: var(--space-5); }
.ca-venue__fact { display: flex; align-items: flex-start; gap: var(--space-3); }

.ca-venue__icon {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--brand-primary);
}

.ca-venue__icon .material-symbols-outlined { font-size: 21px; }
.ca-venue__fact strong { display: block; margin-bottom: 3px; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; }
.ca-venue__fact p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.55; }
.ca-venue__fact a { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ca-venue__map {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

.ca-venue__map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

.ca-venue__map-link {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 1;
}

@media (max-width: 899px) {
    .ca-venue { grid-template-columns: minmax(0, 1fr); }
    .ca-venue__map iframe { height: 240px; }
}

/* ══════════════════════════════════════════════════════════════════════
   6 — SSS (Ow_Faqs)
   Sorular iki sütuna dizilir; her satır kendi başına açılır. Sekmeler
   yalnızca birden fazla üye tipi varsa çizilir.
   ══════════════════════════════════════════════════════════════════════ */
/* Ana sayfadaki SSS düzeni: başlığın altında solda destek kartı, sağda
   tek sütun akordiyon yer alır. Böylece destek çağrısı sorulardan ayrışır. */
.ca-faq .oa-section-head { margin-bottom: var(--space-5); }

.ca-faq__layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.ca-faq__aside {
    position: sticky;
    top: calc(var(--ca-header-h) + var(--space-3));
}

.ca-faq-aside-card {
    padding: 20px;
    border: 1px solid var(--oa-line);
    border-radius: var(--oa-r-lg);
    background: var(--oa-surface);
    box-shadow: var(--oa-sh-1);
}

.ca-faq-aside-card__icon {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: var(--oa-brand-soft);
    color: var(--oa-brand);
}

.ca-faq-aside-card h3 {
    margin-bottom: 6px;
    color: var(--oa-ink);
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.ca-faq-aside-card p {
    margin-bottom: 14px;
    color: var(--oa-muted);
    font-size: 12px;
    line-height: 1.55;
}

.ca-faq-aside-card .oa-btn--primary { color: #fff; }

.ca-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.ca-faq-tab {
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.ca-faq-tab:hover { border-color: var(--brand-border); color: var(--brand-primary); }
.ca-faq-tab.is-active { border-color: transparent; background: var(--brand-primary); color: #fff; box-shadow: 0 6px 16px var(--brand-glow); }
.ca-faq-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.ca-faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3);
}

.ca-faq-list[hidden] { display: none; }

.ca-faq-row {
    align-self: start;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.ca-faq-row:hover { border-color: var(--brand-border); }
.ca-faq-row.is-open { border-color: var(--brand-border); background: var(--surface-card); box-shadow: var(--shadow-card); }

.ca-faq-row h3 { margin: 0; }

.ca-faq-row__q {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.ca-faq-row__q:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.ca-faq-row__title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
}

.ca-faq-row__cat {
    flex: 0 0 auto;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.ca-faq-row__chev {
    display: flex;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: 18px;
    transition: transform .3s var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.ca-faq-row__q:hover .ca-faq-row__chev { border-color: var(--brand-primary); color: var(--brand-primary); }
.ca-faq-row.is-open .ca-faq-row__chev { transform: rotate(180deg); border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }

/* Yükseklik geçişi grid satırı üzerinden: cevabın yüksekliği önceden
   bilinmediği için max-height tahmini kullanılmıyor. */
.ca-faq-row__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease);
}

.ca-faq-row.is-open .ca-faq-row__panel { grid-template-rows: 1fr; }
.ca-faq-row__panel > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
.ca-faq-row.is-open .ca-faq-row__panel > div { visibility: visible; transition-delay: 0s; }

.ca-faq-row__answer {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.ca-faq-row__answer iframe,
.ca-faq-row__answer video { width: 100%; height: auto; border: 0; border-radius: var(--radius-sm); }
.ca-faq-row__answer iframe { aspect-ratio: 16 / 9; }

@media (max-width: 899px) {
    .ca-faq__layout { grid-template-columns: minmax(0, 1fr); }
    .ca-faq__aside { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-faq-row__panel,
    .ca-faq-row__chev { transition: none; }
    .ca-faq-row__panel > div { transition-delay: 0s; }
}

/* ══════════════════════════════════════════════════════════════════════
   7 — Kapanış bandı
   Karşılama ekranıyla aynı koyu zemin; sayfayı açan çağrıyı tekrar eder.
   ══════════════════════════════════════════════════════════════════════ */
.ca-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(100deg, var(--ca-dark) 0%, var(--ca-dark-2) 62%, #23324f 100%);
    color: var(--ca-on-dark);
}

/* Sağ üstteki magenta ışık: bandın düz bir dikdörtgen gibi durmasını
   engelleyen tek dekoratif öğe. */
.ca-cta::before {
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--brand-rgb), .34) 0%, rgba(var(--brand-rgb), 0) 70%);
    content: "";
}

.ca-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: clamp(32px, 4vw, 52px);
}

.ca-cta h2 {
    margin: 0;
    color: var(--ca-on-dark);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.ca-cta p { margin: var(--space-2) 0 0; max-width: 56ch; color: var(--ca-on-dark-soft); font-size: var(--fs-body); line-height: 1.5; }
.ca-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ══════════════════════════════════════════════════════════════════════
   Yer ayırma penceresi
   ══════════════════════════════════════════════════════════════════════ */
.oa-btn.is-disabled {
    opacity: .58;
    pointer-events: none;
    cursor: not-allowed;
}

.ca-reservation-modal {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.ca-reservation-modal[hidden] { display: none; }

.ca-reservation-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 31, .72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.ca-reservation-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 570px);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    padding: clamp(28px, 5vw, 46px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 28px;
    background: linear-gradient(145deg, #fff 0%, #fff7fc 100%);
    box-shadow: 0 28px 80px rgba(5, 11, 25, .38);
    animation: ca-reservation-in .24s var(--ease, ease-out);
}

.ca-reservation-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: #fff;
    color: var(--text-primary);
    cursor: pointer;
}

.ca-reservation-modal__close:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.ca-reservation-modal__close:focus-visible { outline: 3px solid rgba(238, 49, 146, .3); outline-offset: 2px; }

.ca-reservation-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ca-reservation-modal__eyebrow .material-symbols-outlined { font-size: 17px; }
.ca-reservation-modal h2 { margin: 0; color: var(--text-primary); font-size: clamp(26px, 4vw, 34px); letter-spacing: -.04em; }
.ca-reservation-modal__form > p:not(.ca-reservation-modal__error):not(.ca-reservation-modal__note),
.ca-reservation-modal__success > p { margin: 11px 0 24px; color: var(--text-muted); font-size: 15px; line-height: 1.65; }

.ca-reservation-summary {
    display: grid;
    gap: 1px;
    overflow: hidden;
    margin: 0 0 20px;
    border: 1px solid #f0dce8;
    border-radius: 16px;
    background: #f0dce8;
}

.ca-reservation-summary > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .9);
}

.ca-reservation-summary .material-symbols-outlined { margin-top: 2px; color: var(--brand-primary); font-size: 19px; }
.ca-reservation-summary p { min-width: 0; margin: 0; }
.ca-reservation-summary small { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.ca-reservation-summary strong { display: block; color: var(--text-primary); font-size: 13px; line-height: 1.35; }

.ca-reservation-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
.ca-reservation-consent input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand-primary); }
.ca-reservation-modal__submit[disabled] { opacity: .52; cursor: not-allowed; }
.ca-reservation-modal__submit.is-loading { pointer-events: none; }
.ca-reservation-modal__note { display: flex; gap: 6px; align-items: center; margin: 13px 0 0; color: var(--text-muted); font-size: 12px; }
.ca-reservation-modal__note .material-symbols-outlined { color: #20855a; font-size: 16px; }
.ca-reservation-modal__error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff0f3; color: #b32151; font-size: 13px; line-height: 1.45; }

.ca-reservation-modal__success { text-align: center; padding: 18px 4px 4px; }
.ca-reservation-success__mark {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e8f8ee;
    color: #16834d;
    box-shadow: 0 0 0 10px rgba(22, 131, 77, .08);
}
.ca-reservation-success__mark .material-symbols-outlined { font-size: 38px; font-weight: 700; }
.ca-reservation-modal.is-success .ca-reservation-success__mark { animation: ca-reservation-check .48s cubic-bezier(.2, .9, .25, 1.35); }

@keyframes ca-reservation-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ca-reservation-check { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body.ca-reservation-open { overflow: hidden; }

@media (max-width: 540px) {
    .ca-reservation-modal { padding: 10px; }
    .ca-reservation-modal__panel { max-height: calc(100vh - 20px); padding: 28px 22px 24px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-reservation-modal__panel,
    .ca-reservation-modal.is-success .ca-reservation-success__mark { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Şerit kartlarının küçük ölçüye uyarlanması
   ----------------------------------------------------------------------
   Kartlar beş sütuna inince özellik değerleri (196.648 km) sütuna
   sığmayıp kırpılıyordu. Gövde dolgusu ve simge aralığı birkaç piksel
   kısılınca değerler tam okunuyor; ölçüler yalnızca bu şeride özel.
   ══════════════════════════════════════════════════════════════════════ */
#ca-vehicle-rail .ac-body { padding: 14px; }
#ca-vehicle-rail .ac-specs { gap: var(--space-2) var(--space-2); }
#ca-vehicle-rail .ac-spec { gap: 6px; }
#ca-vehicle-rail .ac-title { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   Bölüm gezgini
   ----------------------------------------------------------------------
   Sayfanın solunda sabit duran küçük bir pusula: bulunulan bölümün adını
   gösterir, üstündeki ve altındaki bölüme atlatır. Atlayış karşılama
   ekranındaki bağlantılarla aynı ışık animasyonunu tetikler.

   Yalnızca geniş masaüstünde görünür: dar ekranda içerik kolonunun
   yanında yer yok, orada sayfa zaten kaydırılarak geziliyor.
   ══════════════════════════════════════════════════════════════════════ */
.ca-stepper {
    position: fixed;
    z-index: 60;
    top: 50%;
    /* Sağ kenara sabit. Kolonun kenarına hesapla oturtmayı denedim ama
       sabit konumlu öğenin kapsayıcı bloğu kaydırma çubuğunu da sayıyor;
       100vw da, %50 de kolonun gerçek kenarını birkaç piksel şaşırıp
       gezgini içeriğin üstüne bindiriyordu. Sabit kenar payı + yeterince
       geniş bir eşik, çakışmayı hesapla uğraşmadan garanti ediyor. */
    right: 12px;
    width: 136px;
    flex-direction: column;
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-hover);
    transform: translateY(-50%);
    transition: opacity var(--dur-slow) var(--ease);
}

.ca-stepper[hidden] { display: none; }
.ca-stepper:not([hidden]) { display: flex; }

/* ── Kompakt şerit ────────────────────────────────────────────────────
   Etiketli gezgin kolonun yanına sığmadığında gizlenmiyor, nokta şeridine
   dönüşüyor: gezinme her ekran boyutunda kenarda kalıyor. Kararı sabit bir
   kırılma noktası değil, consumer-auction.js'in ölçtüğü gerçek boşluk
   veriyor — piksel eşiği yakınlaştırma, kaydırma çubuğu genişliği ve kolon
   ölçüsüyle birlikte kaydığı için bazı ekranlarda kıl payı şaşıyordu.
   Bölüm adları noktalarda da title ve aria-label olarak duruyor. */
.ca-stepper.is-compact {
    width: auto;
    padding: 6px;
    border-radius: var(--radius-pill);
}

.ca-stepper.is-compact .ca-stepper__arrow,
.ca-stepper.is-compact .ca-stepper__label { display: none; }

.ca-stepper.is-compact .ca-stepper__row {
    justify-content: center;
    padding: 5px;
    border-left: 0;
    border-radius: 50%;
    background: none;
}

.ca-stepper.is-compact .ca-stepper__dot { display: block; }

/* Nokta yalnızca kompakt şeritte görünür. */
.ca-stepper__dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.ca-stepper__row:hover .ca-stepper__dot { background: var(--brand-primary); }

.ca-stepper__row.is-current .ca-stepper__dot {
    background: var(--brand-primary);
    transform: scale(1.5);
}

/* Karşılama ekranındayken saklı: orası tam ekran bir kare, üstüne
   yüzen bir kutu düşmüyor. */
.ca-stepper.is-idle { opacity: 0; pointer-events: none; }

.ca-stepper__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.ca-stepper__row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.ca-stepper__row:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-primary); }
.ca-stepper__row:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.ca-stepper__arrow { flex: 0 0 auto; font-size: 16px; }
.ca-stepper__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* İki basamak uzaktakiler soluk: yakınlık listede görülebilsin. */
.ca-stepper__row.is-far { opacity: .55; }

/* Bulunulan bölüm: markanın rengiyle ve solundaki çizgiyle işaretli.
   Girinti, yön okunu taşıyan komşularıyla aynı hizada dursun diye. */
.ca-stepper__row.is-current {
    padding-left: 9px;
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand-soft);
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: -.01em;
    opacity: 1;
    cursor: default;
}

/* Kompakt şerit içeriğin üstünde duruyor (dar ekranda kolonun yanında yer
   yok). Okumayı bölmemesi için sönük bekliyor, üzerine gelince ya da
   klavyeyle odaklanınca tam görünürlüğe çıkıyor. */
.ca-stepper.is-compact:not(.is-idle) { opacity: .62; }
.ca-stepper.is-compact:not(.is-idle):hover,
.ca-stepper.is-compact:not(.is-idle):focus-within { opacity: 1; }

/* Dokunmatikte "üzerine gelme" yok; orada şerit her zaman tam görünür. */
@media (hover: none) {
    .ca-stepper.is-compact:not(.is-idle) { opacity: .9; }
}