/* ECU Exclusive — üst banner (Ana sayfa + Chip Tuning Hesapla).
   Eski düzen: tek geniş arka plan banner; içinde en fazla 7 görsel sağa doğru kayar.
   Düz renk, gradient/glow düğme yok; hareket prefers-reduced-motion'da durur. */

.bnr { position: absolute; inset: 0; overflow: hidden; background: #0B0A0C; }
.bnr__track { position: absolute; inset: 0; overflow: hidden; }
.bnr__slide { position: absolute; inset: 0; transform: translateX(-100%); visibility: hidden; }
.bnr__slide.is-active { transform: none; visibility: visible; }
.hero__scene .bnr__slide img, .page-head__bg .bnr__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 1; animation: none; }
.bnr__slide.is-moving { transition: transform .8s cubic-bezier(.65, 0, .25, 1); will-change: transform; }

/* oklar ve noktalar: sağ altta, sayfa genişliğine hizalı */
.bnr__uiwrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; padding-bottom: 14px; pointer-events: none; }
.bnr__ui { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.bnr__dots { display: flex; gap: 4px; }
.bnr__dot { position: relative; width: 24px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.bnr__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: rgba(255, 255, 255, .42); transition: background-color .2s; }
.bnr__dot:hover::before { background: rgba(255, 255, 255, .8); }
.bnr__dot.is-on::before { background: var(--red); }
.bnr__arrows { display: flex; gap: 6px; }
.bnr__arrow { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); background: rgba(11, 10, 12, .72); color: #fff; cursor: pointer; transition: background-color .2s, color .2s; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.bnr__arrow:hover, .bnr__arrow:focus-visible { background: #fff; color: var(--red); }
.bnr__dot:focus-visible, .bnr__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* geçiş süresini gösteren ince çizgi */
.bnr__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .12); pointer-events: none; }
.bnr__bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.bnr.is-run .bnr__bar i { animation: bnrbar var(--bnr-ms, 5s) linear forwards; }
.bnr.is-hold .bnr__bar i { animation-play-state: paused; }
@keyframes bnrbar { to { transform: scaleX(1); } }

/* ---- Ana sayfa: eski düzen, metin ve seçici bannerın üstünde ---- */
.hero__scene::after, .page-head__bg::after { pointer-events: none; }
.hero--photo .hero__in { pointer-events: none; }
.hero--photo .hero__in > * { pointer-events: auto; }
@media (min-width: 900px) {
    .hero__scene .bnr__uiwrap { top: 0; bottom: auto; padding: 22px 0 0; }
}
@media (max-width: 899px) {
    .hero__scene .bnr__uiwrap { padding-bottom: 12px; }
    .bnr__arrow { width: 34px; height: 34px; }
}

/* ---- Chip Tuning Hesapla: banner tüm başlığın arkasında, solda koyu perde ---- */
.page-head--bnr .page-head__bg::after { background: linear-gradient(to right, rgba(11,10,12,.82) 0%, rgba(11,10,12,.5) 30%, rgba(11,10,12,0) 56%); }
/* telefonda yazı görselin tamamının üstünde: beyaz araçlarda da okunsun diye perde bütün genişliğe yayılır */
@media (max-width: 899px) {
    .page-head--bnr .page-head__bg::after { background: rgba(11,10,12,.58); }
    .page-head--bnr .lead { text-shadow: 0 1px 12px rgba(0,0,0,.7); }
}
.page-head--bnr > .container { position: relative; z-index: 2; pointer-events: none; }
.page-head--bnr > .container > * { pointer-events: auto; }
.page-head--bnr .calc-head__txt { pointer-events: auto; max-width: 480px; }
/* her görsele ayrı yazı: hepsi aynı hücrede üst üste, aktif olan görünür (yükseklik sabit kalır) */
.calc-caps { display: grid; }
.calc-cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.calc-cap.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .25s, transform .55s ease .25s, visibility 0s; }
.page-head--bnr .page-head__title { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; color: #fff; font-size: clamp(28px, 4.1vw, 50px); line-height: 1.06; margin: 6px 0 14px; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.page-head--bnr .lead { font-size: clamp(15px, 1.5vw, 17.5px); }
/* banner + seçici ilk ekrana sığsın: banner yüksekliği ekrana göre ayarlanır */
@media (min-width: 900px) { .page-head--calc.page-head--bnr { min-height: clamp(400px, calc(100vh - 290px), 620px); } }
.page-head--bnr { padding-bottom: 76px; }
.page-head--bnr .bnr__uiwrap { justify-content: flex-start; padding-bottom: 18px; }

/* ---- Chip Tuning Hesapla: araç seçici bannerın hemen altında, tek satır ---- */
/* tam genişlik, ince çubuk; bannerın hemen altında boşluk yok */
.calc-strip { background: #1B1920; border-bottom: 1px solid #4A4552; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.calc-strip__in { padding: 12px var(--gut, 20px); }
.calc-strip .field label { color: #CFCBD4; white-space: nowrap; }
.calc-strip select { background-color: #0F0E12; border-color: #5A5563; color: #fff; }
.calc-strip select:not(:disabled):hover, .calc-strip select:not(:disabled):focus { border-color: #fff; }
.calc-strip select:disabled { opacity: .72; }
.calc-strip .vsel__go[disabled] { opacity: 1; background: #6B1015; color: rgba(255, 255, 255, .75); }
.calc-strip .vsel__go:not([disabled]) { background: var(--red); color: #fff; }
.calc-strip .vsel__go { min-height: 46px; }
.calc-strip .vsel__msg { margin: 6px 0 0; min-height: 0; }
.calc-strip .vsel__msg:empty { display: none; }
.calc-strip__note { margin: 0; padding: 7px var(--gut, 20px); font-size: 11px; line-height: 1.4; color: var(--text-dim); background: #131116; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .calc-strip .vsel__grid { gap: 16px; } .calc-strip .vsel__go { min-width: 190px; } }
/* geniş ekran: etiketler (01 MARKA …) kutunun soluna, çubuk tek ince satır */
@media (min-width: 1180px) {
    .calc-strip__in { padding: 10px 28px; }
    .calc-strip .vsel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; }
    .calc-strip .field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
    .calc-strip .field label { margin: 0; }
}

/* ---- Ana sayfa: banner altında en çok kullanılan marka logoları ---- */
.calc-cap__more { display: inline-block; margin-top: 4px; }
.bstrip { background: #1B1920; border-bottom: 1px solid #4A4552; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.bstrip__in { display: flex; align-items: center; gap: 6px; padding: 10px var(--gut, 20px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bstrip__in::-webkit-scrollbar { display: none; }
.bstrip__lbl { display: none; flex: none; margin-right: 14px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.bstrip__a { flex: 1 0 auto; display: grid; place-items: center; min-width: 88px; height: 64px; padding: 0 10px; border: 1px solid transparent; scroll-snap-align: start; transition: border-color .2s, background-color .2s; }
.bstrip__a img { width: auto; height: auto; max-width: 78px; max-height: 44px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); transition: transform .25s ease; }
.bstrip__a:hover, .bstrip__a:focus-visible { border-color: var(--red); background: rgba(215, 0, 6, .12); }
.bstrip__a:hover img, .bstrip__a:focus-visible img { transform: scale(1.08); }
.bstrip__a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.bstrip__mono { font: 700 13px var(--font-head); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.bstrip__all { flex: none; margin-left: 10px; padding: 8px 2px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; white-space: nowrap; border-bottom: 2px solid var(--red-deep-hi, var(--red)); }
.bstrip__all:hover, .bstrip__all:focus-visible { color: var(--red-text); }
@media (min-width: 1180px) {
    .bstrip__in { padding: 10px 28px; }
    .bstrip__lbl { display: block; }
    .bstrip__a { flex: 1 1 0; min-width: 0; max-width: 150px; padding: 0 6px; }
    .bstrip__a img { max-width: min(78px, 100%); }
}

/* ---- far ışığı animasyonu (görsel indirmeden, yalnızca CSS) ---- */
.bnr__slide--fx { container-type: size; }
.bnr__stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
@supports (width: 1cqw) {
    .bnr__stage {
        width: max(100cqw, calc(100cqh * 16 / 9)); height: max(100cqh, calc(100cqw * 9 / 16));
        left: calc((100cqw - max(100cqw, calc(100cqh * 16 / 9))) * .6);
        top: calc((100cqh - max(100cqh, calc(100cqw * 9 / 16))) * .5);
    }
}
.bnr__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.28) contrast(1.07) brightness(1.1); }
/* araç sağa kayar, yazıya yer açılır; görselin sol kenarı koyu zemine yumuşakça karışır */
@media (min-width: 900px) {
    .bnr__slide--fx .bnr__stage { margin-left: 14cqw; }
    .bnr__stage > img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); }
}
.bnr__lamp { position: absolute; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(closest-side, rgba(255,255,255,1) 0, rgba(255,255,255,.8) 24%, rgba(215,232,255,.34) 56%, rgba(215,232,255,0) 100%); }
.bnr__slide.is-active .bnr__lamp { animation: bnrlamp 4.6s ease-in-out infinite; }
.bnr__slide.is-active .bnr__lamp:nth-of-type(2) { animation-delay: .06s; }
@keyframes bnrlamp {
    0%, 4% { opacity: 0; } 9% { opacity: .95; } 13% { opacity: .15; } 18% { opacity: 1; }
    62% { opacity: .85; } 80% { opacity: .85; } 90%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bnr__slide.is-active .bnr__lamp { animation: none; opacity: .75; }
    .bnr__slide.is-moving { transition: none; }
    .bnr.is-run .bnr__bar i { animation: none; }
}