/* ECU Exclusive — kırmızı alanlar: karbon fiber dokulu, koyu ve tok kırmızı.
   Parlak düz kırmızı yerine derin kırmızı zemin + ince karbon örgü + üstte ince ışık çizgisi.
   Gradient/glow yok; doku yalnızca küçük karbon örgüsüdür. */

:root {
    --red-deep: #A8060B;          /* düğme zemini (marka kırmızısının koyu tonu) */
    --red-deep-hi: #C2090F;       /* üzerine gelince */
    --red-deep-lo: #5E0A0E;       /* pasif */
    --carbon-red: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><defs><linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23000' stop-opacity='.42'/><stop offset='1' stop-color='%23000' stop-opacity='.14'/></linearGradient><linearGradient id='b' x1='1' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23000' stop-opacity='.14'/><stop offset='1' stop-color='%23000' stop-opacity='.42'/></linearGradient></defs><rect width='4' height='4' fill='url(%23a)'/><rect x='4' y='4' width='4' height='4' fill='url(%23a)'/><rect x='4' width='4' height='4' fill='url(%23b)'/><rect y='4' width='4' height='4' fill='url(%23b)'/></svg>");
}

/* ---- karbon kırmızı düğmeler ve etiketler ---- */
.btn--primary,
html[data-theme="light"] .btn--primary,
.calc-strip .vsel__go:not([disabled]),
.tab[aria-selected="true"],
.bblock__all,
.langsw a[aria-current="true"],
.skip-link,
.mcard__tag {
    background: var(--red-deep) var(--carbon-red) 0 0 / 8px 8px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.btn--primary:hover, .btn--primary:focus-visible,
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] :is(.hero, .page-head--photo, .page-head--calc, .calc-card, .calc-hud, .site-footer) .btn--primary:hover,
.calc-strip .vsel__go:not([disabled]):hover,
.bblock__all:hover, .bblock__all:focus-visible,
html[data-theme="light"] .bblock__all:hover {
    background: var(--red-deep-hi) var(--carbon-red) 0 0 / 8px 8px;
    color: #fff;
}
.btn--primary:active { transform: translateY(0); }

/* pasif "Değerleri göster": koyu karbon kırmızı, yazı okunur */
.calc-strip .vsel__go[disabled] {
    background: var(--red-deep-lo) var(--carbon-red) 0 0 / 8px 8px;
    color: rgba(255, 255, 255, .8);
    opacity: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .3);
}

/* küçük kırmızı vurgu çizgileri/noktaları daha tok */
.bnr__dot.is-on::before { background: var(--red-deep-hi); }
.gen__t::before, .timeline li::before { background: var(--red-deep-hi); }
.js .section__title::after { background: var(--red-deep-hi); }

/* çerçeveler: parlak kırmızı yerine koyu kırmızı */
.btile { border-color: rgba(168, 6, 11, .6); }
.btile:hover, .btile:focus-visible { border-color: var(--red-deep-hi); background: rgba(168, 6, 11, .12); }

/* ---- boşluk düzeni: bölümler arası dikey aralık dengeli ve tutarlı ---- */
.section { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 72px 0; } }
/* istatistik bandı kendi iç boşluğunu kullanır (genel bölüm boşluğu uygulanmasın) */
.section.stats { padding: 0; }
.section.stats .container { padding-bottom: 20px; }
.section__head { margin-bottom: 24px; }

/* açık temada da koyu seçici çubuğu: kutular koyu, yazı beyaz */
html[data-theme="light"] .calc-strip select { background-color: #0F0E12; border-color: #5A5563; color: #fff; }
html[data-theme="light"] .calc-strip select:disabled { opacity: .72; }
html[data-theme="light"] .calc-strip select option { background: #fff; color: #0B0A0C; }

/* ---- Hızlı seçim açılır listesi (Chip Tuning Hesapla, "Markanı seç" başlığının sağı) ---- */
.qlist { position: relative; flex: none; align-self: flex-end; margin-bottom: 16px; }  /* 16px = başlık altındaki kırmızı çizginin payı: düğme başlık yazısının alt çizgisine oturur */
.qlist__btn { list-style: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 210px; min-height: 48px; padding: 0 18px; cursor: pointer;
    font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: #fff;
    background: var(--red-deep) var(--carbon-red) 0 0 / 8px 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .28);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background-color .2s; }
.qlist__btn::-webkit-details-marker { display: none; }
.qlist__btn:hover, .qlist[open] .qlist__btn { background-color: var(--red-deep-hi); }
.qlist__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qlist__btn svg { transition: transform .2s; }
.qlist[open] .qlist__btn svg { transform: rotate(180deg); }
.qlist__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(420px, calc(100vw - 32px)); background: #16141A; border: 1px solid #4A4552; border-radius: var(--r-card); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); padding: 10px; color: #F6F4F4; }
.qlist__q { width: 100%; min-height: 44px; margin-bottom: 6px; padding: 0 14px; background: #0F0E12; border: 1px solid #5A5563; border-radius: var(--r-btn); color: #fff; font: 500 14px var(--font-body); }
.qlist__q:focus { outline: none; border-color: #fff; }
.qlist__ul { list-style: none; margin: 0; padding: 0; max-height: min(360px, 52vh); overflow-y: auto; overscroll-behavior: contain; }
.qlist__ul li[hidden] { display: none; }
.qlist__panel .sres__row { color: #F6F4F4; border-bottom-color: #26232C; }
.qlist__panel .sres__row:hover, .qlist__panel .sres__row:focus-visible { background: #221F27; box-shadow: inset 3px 0 0 var(--red-deep-hi); }
.qlist__panel .sres__k { color: #A9A5B0; }
.qlist__none { margin: 12px 8px 6px; font-size: 12px; color: #A9A5B0; }
@media (max-width: 899px) { .qlist { align-self: stretch; margin-bottom: 4px; } .qlist__btn { width: 100%; } .qlist__panel { left: 0; right: 0; width: auto; } }

/* ---- Mobil düzeltmeler ---- */
@media (max-width: 639px) {
    .topbar .topbar__right > a { display: none; }          /* sosyal bağlantılar mobilde menüde/altbilgide */
    .topbar__in { gap: 8px; }
    .topbar__info { min-width: 0; flex: 0 1 auto; }
    .topbar__info a, .topbar .mono { white-space: nowrap; }
}

/* Marka blokları (Chip Tuning Hesapla): telefonda 2 sütun, derli toplu başlık */
@media (max-width: 559px) {
    .bblocks { gap: 18px; }
    .bblock { padding: 14px; }
    .bblock__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
    .bblock__logo { width: 60px; height: 44px; }
    .bblock__logo img { max-width: 60px; max-height: 44px; }
    .bblock__title { font-size: 24px; min-width: 0; overflow-wrap: anywhere; }
    .bblock__n { grid-column: 1 / 2; margin: 0; align-self: center; }
    .bblock__all { grid-column: 2 / 3; justify-self: end; margin: 0; padding: 11px 16px; font-size: 12px; }
    .bblock__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bblock .mcard { min-height: 0; gap: 8px; padding: 0 10px 12px; }
    .bblock .mcard__car { margin: 0 -10px; }
    .bblock .mcard--photo .mcard__top { left: 10px; right: 8px; top: 8px; }
    .bblock .mcard__logo, .bblock .mcard__mono { display: none; }   /* marka zaten başlıkta */
    .bblock .mcard__car { aspect-ratio: 3 / 2; }
    .bblock .mcard__name { font-size: 16px; }
    .bblock .mcard__brand { font-size: 9px; letter-spacing: 1.2px; }
    .bblock .mcard__go { font-size: 10px; letter-spacing: .8px; }
    .bblock .mcard__tag { font-size: 8.5px; padding: 2px 5px; }
}

/* Telefonda kartlar biraz daha sıkı */
@media (max-width: 639px) {
    .card__n { margin-bottom: 12px; }
    .card__more { margin-top: 12px; }
    .section { padding: 44px 0; }
}

/* Dokunma alanları (telefon): küçük bağlantılara dikey dolgu */
@media (max-width: 639px) {
    .topbar__info a { min-height: 38px; }
    .crumbs a { display: inline-block; padding: 8px 2px; margin: -8px 0; }
    .card__more { padding: 8px 0; margin-bottom: -8px; }
}

/* ---- Açılış logo animasyonu: oturumda bir kez, 3 sn. Yalnızca CSS zaman çizelgesi; sayfa kaydırması kilitlenmez,
   JS çalışmasa bile 3 sn sonunda kendiliğinden kapanır. ---- */
.intro { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; cursor: pointer; background: #0B0A0C; transition: opacity .35s ease, visibility .35s ease; }
.intro-on .intro { display: flex; animation: introOut .5s ease 2.5s forwards; }
.intro--out { opacity: 0; visibility: hidden; }
.intro__stage { position: relative; width: min(560px, 78vw); }
.intro__logo { display: block; width: 100%; height: auto; clip-path: inset(0 100% 0 0); animation: introReveal .8s cubic-bezier(.2, .7, .2, 1) .45s forwards; }
.intro__shine { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 632 / 103; pointer-events: none;
    -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 100% 0 / 260% 100% no-repeat;
    animation: introShine .8s ease-in-out 1.4s forwards; }
.intro__ecg { position: absolute; left: -9.97%; top: -29.1%; width: 119.9%; max-width: none; height: auto; overflow: visible; pointer-events: none; }
.intro__line { fill: none; stroke: #D70006; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: introDraw 1.1s cubic-bezier(.45, .05, .3, 1) .1s forwards; }
.intro__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.intro__bar i { display: block; height: 100%; background: #D70006; transform: scaleX(0); transform-origin: left; animation: introBar 2.5s linear forwards; }
@keyframes introReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes introBar { to { transform: scaleX(1); } }
@keyframes introOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ---- Çözüm ortakları logo şeridi (ana sayfa, en alt) ---- */
.partners { padding: 40px 0 48px; border-top: 1px solid var(--line); }
.partners__t { margin: 0 0 22px; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.partners__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.partners__i { display: grid; place-items: center; height: 92px; padding: 16px 20px; background: #0F0E12; border: 1px solid #3A3640; border-radius: var(--r-card); transition: border-color .2s; }
.partners__i:hover { border-color: #6A6573; }
.partners__i img { display: block; max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.partners__i:nth-child(3) img { max-height: 58px; }
.partners__i--evc { padding: 10px; }
.partners__i--evc a { display: block; line-height: 0; }
@media (max-width: 1099px) { .partners__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .partners { padding: 32px 0 36px; } .partners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .partners__i { height: 78px; padding: 12px; } .partners__i img { max-height: 44px; } }