/*
 * Ana sayfa (B2/Index) stilleri. Yalnızca ana sayfada yüklenir: Index.cshtml → @section Styles.
 * Bölümler: hero (vitrin + ihale takvimi), Neden Otocars, öne çıkan araçlar, Nasıl çalışır,
 * OTOCARS harf harf, blog. Ortak bileşenler (düğme, rozet, bölüm başlığı) css/site.css'te,
 * token'lar css/marka-renkleri.css'te; durum rozeti/takvim yaprağı css/bilesenler/ihale-durumu.css.
 */

/* ── Hero ─────────────────────────────────────────────────────────────── */

/*
 * İki ayrı kart: solda vitrin, sağda ihale takvimi. Takvim yoksa vitrin tüm genişliği kaplar;
 * 992px altında takvim vitrinin altına iner.
 *
 * Vitrin: arkada dönen görsel/video (ana-sayfa-banner.js), önde SABİT başlık + açıklama + tek ana
 * eylem (docs/04 §6.2). Metin akışta durur (kesilmez); slider arka planda mutlak konumludur.
 * Gezinme ince ilerleme çizgileri + duraklat düğmesidir (sağ alt).
 *
 * Sahne: açık sıcak gri zemin üzerinde tek vurgu — alttan sağa yükselen eğik marka kırmızısı
 * şerit (kullanıcı onaylı). Metin şeridin üzerine düşmez.
 */
.ana-banner-bolum {
    position: relative;
    overflow: hidden;
    padding: var(--b-5) 0 0;
    background-color: var(--renk-zemin);
}

/* Kırmızı alan: OTOCARS harf bölümü (.harf-bolum) — eğik üst kenarı vitrin kartının arkasına uzanır. */

/* İnce çift halka */
.ana-banner-bolum::after {
    content: "";
    position: absolute;
    top: -560px;
    right: -240px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    border: var(--kenar);
    outline: var(--kenar);
    outline-offset: 72px;
    pointer-events: none;
}

.ana-banner-bolum > .container {
    position: relative;
    z-index: 2;
}

/* Zemin süsü (SVG): ince çemberler, eğik çizgiler, nokta ızgarası — kenar renginde, kırmızı şeridin altında. */
.ana-banner-dekor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ana-banner-dekor .cizgi {
    fill: none;
    stroke: var(--renk-kenar-guclu);
    stroke-width: 1;
    opacity: .7;
}

.ana-banner-dekor .nokta {
    fill: url(#ana-banner-nokta);
}

.ana-banner-dekor pattern circle {
    fill: var(--renk-kenar-guclu);
}

.ana-banner {
    --vitrin-yukseklik: 400px;   /* en az; metin uzarsa vitrin uzar (kullanıcı kararı 2026-10-06: laptopta 540 çok uzundu) */
    --takvim-genislik: 380px;
    --ana-banner-sure: 7s;       /* slayt başına otomatik geçiş süresi */
    --ana-banner-yan: var(--b-12);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-5);
}

.ana-banner.takvimli {
    grid-template-columns: minmax(0, 1fr) var(--takvim-genislik);
}

/* Vitrin */

.ana-banner-vitrin {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--vitrin-yukseklik);
    overflow: hidden;
    border-radius: var(--r-buyuk);
    background-color: var(--gri-900);
    box-shadow: var(--golge-2);
}

.ana-banner-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ana-banner-slayt {
    position: relative;
    overflow: hidden;
}

.ana-banner-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Metin tarafı koyulaşır (sabit metin her görselde okunur); kampanya görselinde katman yok. */
.ana-banner-slayt:not(.ana-banner-kampanya)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--gri-900) 90%, transparent) 0%,
        color-mix(in srgb, var(--gri-900) 62%, transparent) 50%,
        color-mix(in srgb, var(--gri-900) 10%, transparent) 88%);
}

.ana-banner-tam-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Sabit metin */

.ana-banner-icerik {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--b-4);
    max-width: 660px;
    padding: var(--b-12) var(--ana-banner-yan) var(--b-20);   /* altta gezinme şeridine yer */
    color: var(--renk-metin-ters);
    transition: opacity var(--sure-orta) ease;
}

/* Kampanya görseli açıkken (metni kendi üzerinde) sabit metin geri çekilir; klavye odağı
   içindeyse görünür kalır. */
.ana-banner-vitrin:has(.ana-banner-kampanya.swiper-slide-active) .ana-banner-icerik:not(:focus-within) {
    opacity: 0;
    pointer-events: none;
}

.ana-banner-ust {
    margin: 0;
    color: var(--renk-koyu-metin-soluk);
    font-size: var(--t-sm);
    font-weight: var(--t-normal);
    line-height: var(--t-satir-arayuz);
}

.ana-banner-ust b {
    color: var(--renk-koyu-metin);
    font-weight: var(--t-orta);
}

.ana-banner-icerik h1 {
    margin: 0;
    color: var(--renk-metin-ters);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-4xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
    text-wrap: balance;
}

.ana-banner-aciklama {
    max-width: 52ch;
    margin: 0;
    color: var(--renk-koyu-metin);
    font-size: var(--t-lg);
    line-height: var(--t-satir-govde);
}

.ana-banner-eylemler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b-3) var(--b-6);
    margin-top: var(--b-2);
}

.ana-banner-baglanti {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--renk-metin-ters);
    font-size: var(--t-md);
    font-weight: var(--t-orta);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--renk-metin-ters) 45%, transparent);
    text-underline-offset: 5px;
    transition: text-decoration-color var(--sure-hizli) ease;
}

.ana-banner-baglanti:hover {
    color: var(--renk-metin-ters);
    text-decoration-color: currentColor;
}

/* Koyu zeminde odak halkası beyaz çizgiyle okunur. */
.ana-banner-baglanti:focus-visible,
.ana-banner-sekme:focus-visible,
.ana-banner-duraklat:focus-visible {
    outline: 2px solid var(--renk-metin-ters);
    outline-offset: 3px;
    border-radius: var(--r-kucuk);
}

/* Gezinme: ince ilerleme çizgileri + duraklat (sağ alt). Adlar ekran okuyucuda (aria-label). */

.ana-banner-sekmeler {
    position: absolute;
    right: var(--ana-banner-yan);
    bottom: var(--b-4);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--b-2);
    width: min(240px, 50%);
}

.ana-banner-sekme {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ana-banner-sekme .cizgi {
    display: block;
    height: 3px;
    border-radius: var(--r-tam);
    overflow: hidden;
    background-color: color-mix(in srgb, var(--renk-metin-ters) 30%, transparent);
    transition: background-color var(--sure-hizli) ease;
}

.ana-banner-sekme:hover .cizgi {
    background-color: color-mix(in srgb, var(--renk-metin-ters) 55%, transparent);
}

.ana-banner-sekme .dolgu {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--renk-metin-ters);
}

.ana-banner-sekme.aktif .dolgu {
    animation: ana-banner-dolgu var(--ana-banner-sure) linear forwards;
}

/* Fare/odak vitrindeyken, sekme arka plandayken ya da kullanıcı durdurduğunda
   çizgi olduğu yerde bekler; geçiş animasyonun bitişine bağlı olduğu için o da bekler. */
.ana-banner-vitrin.bekliyor .ana-banner-sekme.aktif .dolgu,
.ana-banner-vitrin.gizli .ana-banner-sekme.aktif .dolgu,
.ana-banner-vitrin.durduruldu .ana-banner-sekme.aktif .dolgu {
    animation-play-state: paused;
}

@keyframes ana-banner-dolgu {
    from { width: 0; }
    to   { width: 100%; }
}

.ana-banner-sekme .ad {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ana-banner-duraklat {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--renk-metin-ters) 35%, transparent);
    background-color: color-mix(in srgb, var(--gri-900) 40%, transparent);
    color: var(--renk-metin-ters);
    font-size: var(--t-lg);
    transition: background-color var(--sure-hizli) ease;
}

.ana-banner-duraklat:hover {
    background-color: color-mix(in srgb, var(--gri-900) 70%, transparent);
}

/* İhale takvimi: beyaz kart, en fazla iki ihale tam görünür (iç kaydırma yok, bulgu 13). */

.ana-banner-takvim {
  display: flex;
  flex-direction: column;
  padding: var(--b-5);
  border: var(--kenar);
  border-radius: var(--r-buyuk);
  background-color: #ffffffb8;
  box-shadow: var(--golge-2);
  line-height: var(--t-satir-arayuz);
  backdrop-filter: blur(10px);
}

.takvim-ust {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    margin-bottom: var(--b-4);
}

.takvim-ikon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin);
    font-size: var(--t-xl);
}

.takvim-ust h2 {
    margin: 0;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
}

.takvim-ust p {
    margin: 2px 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.takvim-sayi {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.takvim-liste {
    display: flex;
    flex-direction: column;
    gap: var(--b-3);
}

/*
 * Canlı ihale: açık zeminde çerçeveli satır. Kırmızı yalnızca durum göstergesinde ve ilerleme
 * çubuğunda. Bilgi sırası: durum → ad → konum/tür → ilerleme → kalan süre (en iri, koyu) → eylem.
 */
.takvim-canli {
    padding: var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin);
}

.takvim-canli-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-2);
}

.takvim-canli-ust .meta {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
}

.takvim-canli h3 {
    margin: var(--b-2) 0 2px;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-md);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
}

.takvim-canli .konum {
    margin: 0 0 var(--b-3);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.takvim-ilerleme {
    height: 4px;
    border-radius: var(--r-tam);
    overflow: hidden;
    background-color: var(--renk-kenar);
}

.takvim-ilerleme [data-ilerleme] {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--renk-marka);
    transition: width 1s linear;
}

/* Etiket solda, süre sağda ve iri: bir bakışta okunur. */
.takvim-kalan {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--b-2);
    margin: var(--b-2) 0 var(--b-3);
}

.takvim-kalan span {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.takvim-kalan b {
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-kalin);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sıradaki ihaleler: takvim yaprakları kesikli bir zaman çizgisiyle birbirine bağlanır. */
.takvim-siradakiler {
    --satir-yan: var(--b-2);

    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.takvim-siradakiler::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: calc(var(--satir-yan) + 28px - 1px);
    border-left: 2px dashed var(--renk-kenar);
}

.takvim-siradakiler li {
    position: relative;
}

.takvim-satir {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--b-3);
    padding: var(--b-2) var(--satir-yan);
    border-radius: var(--r-orta);
    color: var(--renk-metin);
    text-decoration: none;
    transition: background-color var(--sure-hizli) ease;
}

.takvim-satir:hover {
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin);
}

.takvim-satir:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Yaprak (ihale-durumu.css) zaman çizgisinin üstünde kalır. */
.takvim-satir .takvim-yaprak {
    position: relative;
    z-index: 1;
}

.takvim-satir .govde {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.takvim-satir strong {
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--t-aile-baslik);
    font-size: var(--t-sm);
    font-weight: var(--t-kalin);
}

.takvim-satir .meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
}

.takvim-satir .kalan {
    text-align: right;
    line-height: var(--t-satir-arayuz);
}

.takvim-satir .kalan small {
    display: block;
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
}

/* Kalan süre: satırda gözün ilk aradığı bilgi — koyu, tabular; renk değil kalınlık. */
.takvim-satir .kalan b {
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-kalin);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Yaklaşan sıralı ihale: satırın altında, ad sütununa hizalı "İhaleye katıl" metin bağlantısı
   (bekleme ekranı → teklif ekranı). Satır bağlantısının kardeşi; dokunma alanı 44 px. */
.takvim-satir-katil {
    --satir-ara: var(--b-3);

    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: calc(-1 * var(--b-2)) 0 0 calc(var(--satir-yan) + 56px + var(--satir-ara));
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: none;
}

.takvim-satir-katil:hover {
    color: var(--renk-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.takvim-tumu {
    margin-top: var(--b-3);
}

/* Kırılımlar */

@media (max-width: 1199.98px) {
    .ana-banner {
        --takvim-genislik: 340px;
        --ana-banner-yan: var(--b-8);
    }
}

/* Tablet ve mobil: takvim vitrinin altına iner, kendi yüksekliğini alır. */
@media (max-width: 991.98px) {
    .ana-banner.takvimli {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ana-banner-bolum {
        padding: var(--b-4) 0 var(--b-12);
    }

    .ana-banner-bolum::after {
        top: -380px;
        right: -300px;
        width: 560px;
        height: 560px;
        outline-offset: 48px;
    }

    .ana-banner {
        --vitrin-yukseklik: 420px;   /* ≤ 70vh: takvimin ilk ihalesi ilk ekrana yaklaşır */
        --ana-banner-yan: var(--b-5);
        gap: var(--b-4);
    }

    .ana-banner-icerik {
        gap: var(--b-3);
        padding-top: var(--b-8);
        padding-bottom: var(--b-16);
    }

    .ana-banner-icerik h1 {
        font-size: var(--t-2xl);
    }

    .ana-banner-aciklama {
        font-size: var(--t-md);
    }

    /* CTA tam genişlik; metin bağlantısı altında. */
    .ana-banner-eylemler {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .ana-banner-baglanti {
        justify-content: center;
    }

    .ana-banner-sekmeler {
        left: var(--ana-banner-yan);
        right: var(--ana-banner-yan);
        bottom: var(--b-2);
        width: auto;
    }

    .ana-banner-takvim {
        padding: var(--b-4);
    }

    .takvim-siradakiler {
        --satir-yan: var(--b-1);
    }

    .takvim-satir {
        gap: var(--b-2);
    }

    .takvim-satir-katil {
        --satir-ara: var(--b-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .takvim-ilerleme [data-ilerleme] { transition: none; }
    .ana-banner-icerik { transition: none; }
}

/* ── Neden Otocars ────────────────────────────────────────────────────── */

/*
 * Kapsayıcı içinde beyaz, ince kenarlı pano: solda bölüm başlığı (.bolum-baslik) + dikey avantaj
 * listesi, sağda görsel. Süs çerçevesi yok; görsel tek yuvarlak köşeli yüzey.
 */
.avantaj-bolum {
    margin-bottom: var(--bolum-dikey);
}

.avantaj-pano {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: var(--b-16);
    align-items: center;
    padding: var(--b-16); 
    background-color: var(--renk-yuzey);
}

.avantaj-metin {
    max-width: 580px;
}

/* Maddeler: solda ince çizgi; üzerine gelince koyulaşır. */
.avantaj-liste {
    display: flex;
    flex-direction: column;
    gap: var(--b-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.avantaj-liste li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--b-4);
    padding-left: var(--b-5);
}

.avantaj-liste li::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 2px;
    border-radius: var(--r-tam);
    background-color: var(--renk-kenar);
    transition: background-color var(--sure-orta) ease;
}

.avantaj-liste li:hover::before {
    background-color: var(--gri-900);
}

.avantaj-ikon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin);
    font-size: var(--t-xl);
}

.avantaj-liste h3 {
    margin: 0 0 var(--b-1);
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-siki);
}

.avantaj-liste p {
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

/* Görsel: yüksekliği metin sütununa eşitlenir (align-self: stretch). */
.avantaj-gorsel {
    align-self: stretch;
    justify-self: center;
    width: 100%;
    max-width: 560px;
}

.avantaj-gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border-radius: var(--r-buyuk);
    object-fit: cover;
    /* Görselin sağında kameraya yakın bir lastik var; araç ortada kalsın. */
    object-position: 28% 50%;
}

@media (max-width: 1199.98px) {
    .avantaj-pano {
        gap: var(--b-10);
        padding: var(--b-12) var(--b-10);
    }
}

/* Tablet: alt alta; görsel metnin altında yatay kırpılır. */
@media (max-width: 991.98px) {
    .avantaj-pano {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--b-10);
    }

    .avantaj-metin,
    .avantaj-gorsel {
        max-width: none;
    }

    .avantaj-gorsel img {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 575.98px) {
    .avantaj-pano {
        gap: var(--b-8);
        padding: var(--b-8) var(--b-5);
    }

    .avantaj-liste {
        gap: var(--b-5);
    }

    .avantaj-liste li {
        gap: var(--b-3);
        padding-left: var(--b-4);
    }

    .avantaj-gorsel img {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .avantaj-liste li::before { transition: none; }
}

/* ── Yatay şerit: oklar ve sayfa noktaları (öne çıkan araçlar + blog) ──── */

/* Davranış wwwroot/js/yatay-serit.js'te. */
.serit-oklar {
    display: flex;
    gap: var(--b-2);
}

.serit-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: 50%;
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: var(--t-lg);
    transition: border-color var(--sure-hizli) ease, opacity var(--sure-hizli) ease;
}

.serit-ok:hover:not(:disabled) {
    border-color: var(--gri-900);
}

.serit-ok:disabled {
    opacity: .35;
    cursor: default;
}

.serit-ok:focus-visible,
.serit-nokta:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

/* Sayfa noktaları: aktif olan uzar. Tek sayfada JS hiç nokta üretmez. */
.serit-noktalar {
    display: flex;
    justify-content: center;
    gap: 6px;
    min-height: 8px;
    margin-top: var(--b-6);
}

.serit-nokta {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-tam);
    background-color: var(--renk-kenar-guclu);
    transition: width var(--sure-orta) ease, background-color var(--sure-orta) ease;
}

.serit-nokta.aktif {
    width: 24px;
    background-color: var(--gri-900);
}

/* ── Öne çıkan araçlar ────────────────────────────────────────────────── */

/*
 * Hero'nun hemen altında. Eşit sütunlu ızgara (--sutun: ≥1200px'te 4, altında 3): ilk sütun
 * bölüm başlığı (.bolum-baslik) + dikey ihale sekmeleri (one-cikan-araclar.js), kalan sütunlar
 * seçili ihalenin paneli. Sol sütun tam bir kart genişliğindedir; sekme sütunu, kartlar ve
 * aralarındaki boşluklar tek bir ritimle hizalanır. Kartın kendisi css/bilesenler/arac-karti.css.
 */
.one-cikan-bolum {
    --sutun: 4;
    --sutun-bosluk: var(--b-6);

    margin-top: var(--bolum-dikey);
    margin-bottom: var(--bolum-dikey);
}

.one-cikan-izgara {
    display: grid;
    grid-template-columns:
        calc((100% - (var(--sutun) - 1) * var(--sutun-bosluk)) / var(--sutun))
        minmax(0, 1fr);
    gap: var(--sutun-bosluk);
}

/* Sol sütun */

.one-cikan-yan {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Sağdaki sayfa noktaları satırı (24px boşluk + 8px nokta): sekmelerin alt kenarı
       kartların alt kenarına denk gelir. */
    padding-bottom: var(--b-8);
}

.one-cikan-yan .bolum-baslik {
    margin-bottom: var(--b-6);
}

/* Dikey sekmeler: seçili olan beyaz kart + koyu kenar, diğerleri zemine yakın. */

.one-cikan-sekmeler {
    display: flex;
    flex-direction: column;
    gap: var(--b-2);
    margin-top: auto;
    scrollbar-width: none;
}

.one-cikan-sekmeler::-webkit-scrollbar {
    display: none;
}

.one-cikan-sekme {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    width: 100%;
    min-height: 44px;
    padding: var(--b-3) var(--b-4);
    white-space: normal;   /* tema tüm button'lara nowrap veriyor; uzun ihale adı taşıyordu */
    border: 1px solid transparent;
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
    text-align: left;
    color: var(--renk-metin);
    transition: background-color var(--sure-orta) ease, border-color var(--sure-orta) ease, box-shadow var(--sure-orta) ease;
}

.one-cikan-sekme:hover {
    border-color: var(--renk-kenar-guclu);
}

.one-cikan-sekme[aria-selected="true"] {
    border-color: var(--gri-900);
    background-color: var(--renk-yuzey);
    box-shadow: var(--golge-1);
}

.one-cikan-sekme:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

.sekme-metin {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.one-cikan-sekme .ad {
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

.one-cikan-sekme .meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    line-height: var(--t-satir-arayuz);
}

.one-cikan-sekme > .bi {
    flex: none;
    color: var(--gri-400);
    font-size: var(--t-md);
    transition: color var(--sure-orta) ease;
}

.one-cikan-sekme[aria-selected="true"] > .bi {
    color: var(--renk-metin);
}

/* Canlı ihalenin noktası (tek kırmızı) */
.one-cikan-sekme .nokta {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--renk-marka);
    animation: canli-nabiz 1.4s ease-in-out infinite;
}

@keyframes canli-nabiz {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

/* Panel, sol sütunla aynı boyda: sol sütun uzun kalırsa kartlar da uzar, fiyat satırı kartın
   dibinde kalır. [hidden] panel dışarıda kalmalı; display burada verilirse gizli panel görünür. */
.one-cikan-paneller {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.one-cikan-panel:not([hidden]) {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.one-cikan-panel:not([hidden]) > .arac-serit {
    flex: 1;
}

/* Panel başlık satırı: açıklama | Tümünü gör | oklar */

.one-cikan-panel-ust {
    display: flex;
    align-items: center;
    gap: var(--b-4);
    margin-bottom: var(--b-4);
}

.one-cikan-panel-ust p {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.one-cikan-panel-ust .meta {
    margin-left: var(--b-1);
    color: var(--renk-metin-soluk);
    white-space: nowrap;
}

.one-cikan-tumu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding-right: var(--b-4);
    border-right: var(--kenar);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    white-space: nowrap;
    text-decoration: none;
}

.one-cikan-tumu:hover {
    color: var(--renk-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Araç şeridi */

.arac-serit {
    --kart-sayi: calc(var(--sutun) - 1);
    --kart-bosluk: var(--sutun-bosluk);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--kart-sayi) - 1) * var(--kart-bosluk)) / var(--kart-sayi));
    gap: var(--kart-bosluk);
    /* Üzerine gelince kartın gölgesi kaydırma kutusunda kırpılmasın diye kutu her yöne biraz
       taşar; eksi kenar boşluğu yerleşimi aynı tutar. */
    margin: -6px -12px -22px;
    padding: 6px 12px 22px;
    scroll-padding-inline: 12px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.arac-serit::-webkit-scrollbar {
    display: none;
}

/* 1200px altı: üç sütun (sekmeler + iki kart). */
@media (max-width: 1199.98px) {
    .one-cikan-bolum {
        --sutun: 3;
    }
}

/* Tablet: sütunlar alt alta; sekmeler başlığın altında yatay kayan bir satır olur. */
@media (max-width: 991.98px) {
    .one-cikan-izgara {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--b-5);
    }

    .one-cikan-yan {
        padding-bottom: 0;
    }

    .one-cikan-yan .bolum-baslik {
        margin-bottom: var(--b-5);
    }

    /* Satır kapsayıcı kenarına kadar uzanır; kaydırılınca sekmeler kenarda kesilmez. */
    .one-cikan-sekmeler {
        flex-direction: row;
        gap: var(--b-2);
        margin: 0 calc(-1 * var(--otocars-kap-bosluk));
        padding: 0 var(--otocars-kap-bosluk);
        overflow-x: auto;
    }

    .one-cikan-sekme {
        flex: none;
        width: auto;
        padding: var(--b-2) var(--b-4);
    }

    .one-cikan-sekme[aria-selected="true"] {
        box-shadow: none;
    }

    .one-cikan-sekme > .bi {
        display: none;
    }

    .one-cikan-sekme .ad {
        white-space: nowrap;
    }

    .arac-serit {
        --kart-sayi: 2;
    }
}

/* Mobil: açıklama tam satır; oklar gizli, parmakla kaydırılır; yanındaki kartın kenarı görünür. */
@media (max-width: 575.98px) {
    .one-cikan-bolum {
        --sutun-bosluk: var(--b-3);
    }

    .one-cikan-panel-ust {
        flex-wrap: wrap;
        gap: var(--b-1) var(--b-3);
        margin-bottom: var(--b-3);
    }

    .one-cikan-panel-ust p {
        flex-basis: 100%;
    }

    .one-cikan-panel-ust .serit-oklar {
        display: none;
    }

    .one-cikan-tumu {
        padding-right: 0;
        border-right: 0;
    }

    .arac-serit {
        grid-auto-columns: 84%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .one-cikan-sekme .nokta { animation: none; }
    .serit-nokta { transition: none; }
    .one-cikan-sekme > .bi { transition: none; }
}

/* ── Nasıl çalışır ────────────────────────────────────────────────────── */

/*
 * Solda akordiyon adımlar, sağda telefon maketi (akis-adimlar.js). Aktif adımın alt
 * çizgisi --akis-sure boyunca dolar; dolunca sonraki adıma geçilir. Telefondaki ekran
 * adımla eşleşir, içeriği kademeli belirir.
 *
 * Zemin #f5f5f0: telefon çerçevesi görseli (images/telefon-cerceve-ikili.webp) opak ve arka
 * planı bu renk. Zemin değişirse görsel de aynı renkle yeniden çıkarılmalı.
 */
.akis-bolum {
    --akis-sure: 6s;

    margin-bottom: var(--bolum-dikey);
    padding: var(--bolum-dikey) 0;
    background-color: #f5f5f0;
    scroll-margin-top: var(--b-16);   /* hero'daki "Nasıl çalışır?" bağlantısı yapışkan başlığın altına iner */
}

/* Başlık ortak .bolum-baslik.bolum-baslik-orta; burada yalnız genişlik ve alt boşluk. */
.akis-ust {
    max-width: 640px;
    margin: 0 auto var(--b-12);
}

/* Geniş kapsayıcıda (1600px'e kadar) adımlar fazla uzuyordu. 1120px: adım kartı ~676px,
   açıklama satırı ~70 karakter (okunabilir aralık 60–75); telefonla arası dengeli. */
.akis-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;   /* sağ: iki telefon */
    gap: 56px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}

/* Adımlar */

.akis-adimlar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.akis-adim {
    position: relative;
    overflow: hidden;
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
    transition: border-color var(--sure-orta) ease, box-shadow var(--sure-orta) ease;
}

/* Etkin adım: koyu kenar + gölge; kırmızı yalnız ilerleme çizgisinde. */
.akis-adim.on {
    border-color: var(--gri-900);
    box-shadow: var(--golge-2);
}

.akis-bas {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 26px;
    border: 0;
    background: none;
    text-align: left;
    line-height: 1.3;
    cursor: pointer;
}

/* Kartın tamamı tıklanabilir. */
.akis-bas::after {
    content: "";
    position: absolute;
    inset: 0;
}

.akis-bas:focus-visible {
    outline: none;
}

.akis-adim:has(.akis-bas:focus-visible) {
    outline: var(--odak-cizgi);
    outline-offset: 3px;
}

.akis-no {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: 50%;
    font-family: var(--t-aile-baslik);
    font-size: var(--t-sm);
    font-weight: var(--t-kalin);
    font-variant-numeric: tabular-nums;
    color: var(--renk-metin-ikincil);
    transition: background-color var(--sure-orta) ease, border-color var(--sure-orta) ease, color var(--sure-orta) ease;
}

.akis-adim.on .akis-no {
    border-color: var(--gri-900);
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.akis-ad {
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-orta);
    color: var(--renk-metin);
}

/* Açıklama: 0fr → 1fr ile yükseklik ölçmeden akıcı açılır. */
.akis-aciklama {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.akis-aciklama > div {
    min-height: 0;
    overflow: hidden;
}

.akis-aciklama p {
    margin: 0;
    padding: 0 26px 22px 88px;   /* 26 kenar + 46 numara + 16 aralık: başlıkla hizalı */
    font-size: 14.5px;
    line-height: 1.6;
    color: #5f5f5f;
    opacity: 0;
    transition: opacity .35s ease;
}

.akis-adim.on .akis-aciklama {
    grid-template-rows: 1fr;
}

.akis-adim.on .akis-aciklama p {
    opacity: 1;
}

/* İlerleme çizgisi: dolunca akis-adimlar.js sonraki adıma geçer. */
.akis-cubuk {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: var(--otocars-ana);
}

.akis-adim.on .akis-cubuk {
    animation: akis-cubuk var(--akis-sure) linear forwards;
}

@keyframes akis-cubuk {
    to { width: 100%; }
}

.akis-bolum.bekliyor .akis-adim.on .akis-cubuk,
.akis-bolum.gorunmuyor .akis-adim.on .akis-cubuk {
    animation-play-state: paused;
}

.akis-bolum.hareketsiz .akis-cubuk {
    display: none;
}

/* ── İki telefon ──
   Çerçeve: images/telefon-cerceve-ikili.webp (1000×1346, zemini ve ekranları SAYDAM; iki telefon perspektifli
   durur, ekranlar dikdörtgen değil DÖRTGEN). Yerleşim sabit 1000×1346 px'lik iç alanda kurulur ve --k ile tek
   seferde küçültülür. Her ekran kutusu çerçevenin ARKASINDA durur ve matrix3d ile görseldeki ekran dörtgenine
   tam oturur. Dörtgenler görselden ölçüldü (ekran kenarlarına doğru uydurma; köşeler kesişimlerden; kenarlar
   çerçevenin altında kalsın diye merkezden %1,2 büyütüldü), 1000 px uzayında köşeler (sol-üst, sağ-üst, sol-alt,
   sağ-alt):
     arka (sol) : (34,322) (412,305) (130,1260) (548,1215)      kutu 440×920
     ön   (sağ) : (552,79) (955,15) (378,1062) (779,1083)       kutu 400×980
   Sıra: arka ekran < ön ekran < çerçeve; ön ekran opak olduğundan arkadakinin altında kalan kısmını örter.
   İçerik sabit mantıksal genişlikte (~255 px) çizilir; --tel-olcek kutuya büyütür. */

.akis-telefon {
    --k: .52;   /* 1000 px'lik iç alan → 520 px */

    position: relative;
    justify-self: center;
    width: calc(1000px * var(--k));
    height: calc(1346px * var(--k));
}

.akis-telefon-ic {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 1346px;
    transform: scale(var(--k));
    transform-origin: 0 0;
}

.akis-cerceve {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tel-ekran {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--renk-yuzey);
    font-family: var(--t-aile);
    font-feature-settings: var(--t-sayi);
    line-height: var(--t-satir-arayuz);
    color: var(--renk-metin);
    transform-origin: 0 0;
}

.tel-arka {
    --tel-olcek: 1.69;

    z-index: 1;
    width: 440px;
    height: 920px;
    border-radius: 54px;
    transform: matrix3d(0.887356, -0.037477, 0, 0.000047, 0.094804, 0.902117, 0, -0.000096, 0, 0, 1, 0, 34.236633, 321.911471, 0, 1);
}

.tel-on {
    --tel-olcek: 1.575;

    z-index: 2;
    width: 400px;
    height: 980px;
    border-radius: 52px;
    transform: matrix3d(0.820699, -0.163936, 0, -0.000197, -0.187331, 0.978202, 0, -0.000026, 0, 0, 1, 0, 552.489732, 79.208881, 0, 1);
}

/* İçerik mantıksal boyutta çizilir, ekran kutusuna büyütülür/küçültülür. */
.tel-ic {
    display: flex;
    flex-direction: column;
    width: calc(100% / var(--tel-olcek));
    height: calc(100% / var(--tel-olcek));
    transform: scale(var(--tel-olcek));
    transform-origin: 0 0;
}

/* Arka telefon bir ton geride: hafif soluk. Sağ kısmı öndeki telefonun altında kaldığı için içerik ekranın
   görünen sol bölgesine toplanır. */
.tel-arka .tel-sahne {
    opacity: .92;
}

.tel-arka .tel-sayfa {
    justify-content: flex-start;
    padding-top: 40px;
    padding-right: 25%;
}

.tel-durum {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 22px 4px;
    font-size: 11px;
    font-weight: var(--t-kalin);
}

.tel-durum .ikonlar i {
    margin-left: 4px;
    font-size: 11px;
}

/* Sitenin üst çubuğu: logo + oturum simgesi, altında ince kenar. */
.tel-ust {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px 8px;
    border-bottom: 1px solid var(--renk-kenar);
}

.tel-ust img {
    display: block;
    width: 70px;
    height: auto;
}

.tel-ust i {
    font-size: 15px;
    color: var(--renk-metin-ikincil);
}

.tel-sahne {
    position: relative;
    flex: 1;
    overflow: hidden;
    background-color: var(--renk-zemin);
}

.tel-sayfa {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* içerik ekranda dikey ortalı */
    gap: 8px;
    padding: 12px 14px 64px;   /* alt boşluk büyük: ortalanan içerik biraz yukarıda durur */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease;
}

.tel-sayfa.on {
    opacity: 1;
    transform: none;
}

/* Başlık */
.tel-adim {
    font-size: 9px;
    font-weight: var(--t-orta);
    color: var(--renk-metin-soluk);
}

.tel-bas .h {
    margin-top: 1px;
    font-size: 15px;
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

.tel-bas .sub {
    margin-top: 2px;
    font-size: 10px;
    color: var(--renk-metin-ikincil);
}

/* Form alanı (form.css): etiket üstte, beyaz kutu, ince kenar. */
.tel-girdi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tel-girdi .l {
    font-size: 9.5px;
    font-weight: var(--t-orta);
    color: var(--renk-metin-ikincil);
}

.tel-girdi .v {
    padding: 7px 9px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-kucuk);
    background-color: var(--renk-yuzey);
    font-size: 11.5px;
}

/* Tek kullanımlık kod: altı ayrı kutu. */
.tel-kod {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.tel-kod b {
    padding: 5px 0;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-kucuk);
    background-color: var(--renk-yuzey);
    text-align: center;
    font-size: 12px;
    font-weight: var(--t-orta);
}

.tel-tamam {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: var(--t-orta);
    color: var(--renk-basari);
}

/* Bilgi satırı: simge + metin (+ sağda rozet). */
.tel-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    font-size: 10.5px;
    font-weight: var(--t-orta);
}

.tel-satir > i {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.tel-satir > span {
    flex: 1;
    min-width: 0;
}

.tel-satir.sizde {
    border-color: transparent;
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
}

.tel-satir.sizde > i {
    color: inherit;
}

/* Satırın sağındaki tutar (teklif akışı, tramer). */
.tel-tutar {
    flex: none;
    font-size: 11px;
    font-weight: var(--t-kalin);
    white-space: nowrap;
}

/* Arka telefondaki kazanılan araç satırları arasında ince ayraç. */
.tel-arac + .tel-arac {
    padding-top: 8px;
    border-top: 1px solid var(--renk-kenar);
}

/* Rozet (.rozet): nötr; başarı yeşil; canlı marka rengi. */
.tel-rozet {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--r-tam);
    background-color: var(--renk-yuzey-vurgu);
    font-size: 8.5px;
    font-weight: var(--t-orta);
    color: var(--renk-metin);
    white-space: nowrap;
}

.tel-rozet.basari {
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
}

.tel-rozet.canli {
    background-color: var(--renk-marka);
    color: var(--renk-marka-uzeri);
}

/* Ana düğme (.otocars-btn-ana): dikdörtgen, orta köşe. */
.tel-buton {
    margin-top: var(--b-1);
    padding: 9px;
    border-radius: var(--r-orta);
    background-color: var(--renk-marka);
    text-align: center;
    font-size: 11.5px;
    font-weight: var(--t-orta);
    color: var(--renk-marka-uzeri);
}

/* Araç detayı: fotoğraf alanı, özellik şeridi, ekspertiz özeti, ikincil düğmeler. */
.tel-foto {
    position: relative;
    height: 104px;
    overflow: hidden;
    border-radius: var(--r-orta);
    background-color: var(--gri-200);
}

.tel-foto img,
.tel-arac-resim img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tel-foto .tel-rozet {
    position: absolute;
    top: 7px;
    left: 7px;
    background-color: var(--renk-yuzey);
}

.tel-foto-sayi {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 2px 6px;
    border-radius: var(--r-tam);
    background-color: rgba(27, 27, 25, .6);
    font-size: 8.5px;
    font-weight: var(--t-orta);
    color: var(--renk-metin-ters);
}

.tel-ozellikler {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tel-ozellikler span {
    padding: 3px 7px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--r-tam);
    background-color: var(--renk-yuzey);
    font-size: 9.5px;
    color: var(--renk-metin-ikincil);
}

.tel-ekspertiz {
    padding: 8px 9px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
}

.tel-ekspertiz .l {
    font-size: 9.5px;
    font-weight: var(--t-orta);
    color: var(--renk-metin-ikincil);
}

.tel-ekspertiz-sayilar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 5px;
    text-align: center;
}

.tel-ekspertiz-sayilar span {
    display: flex;
    flex-direction: column;
    font-size: 8.5px;
    color: var(--renk-metin-ikincil);
}

.tel-ekspertiz-sayilar span + span {
    border-left: 1px solid var(--renk-kenar);
}

.tel-ekspertiz-sayilar b {
    font-size: 15px;
    font-weight: var(--t-kalin);
    color: var(--renk-metin);
}

.tel-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: var(--b-1);
}

.tel-ikincil {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    font-size: 9.5px;
    font-weight: var(--t-orta);
    white-space: nowrap;
}

/* Canlı teklif: araç satırı, fiyat + sayaç, tek dokunuşla artış düğmeleri (_CanliTeklif). */
.tel-arac {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tel-arac-resim {
    flex: none;
    width: 44px;
    height: 32px;
    overflow: hidden;
    border-radius: var(--r-kucuk);
    background-color: var(--gri-200);
}

.tel-arac > span:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 11.5px;
}

.tel-arac small {
    font-size: 9px;
    color: var(--renk-metin-ikincil);
}

.tel-fiyat {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

.tel-fiyat span {
    display: flex;
    flex-direction: column;
}

.tel-fiyat small {
    font-size: 9px;
    color: var(--renk-metin-ikincil);
}

.tel-fiyat b {
    font-size: 19px;
    font-weight: var(--t-kalin);
    letter-spacing: var(--t-harf-baslik);
    white-space: nowrap;
}

.tel-sayac {
    align-items: flex-end;
}

.tel-sayac b {
    font-size: 15px;
    color: var(--renk-marka);
}

.tel-artislar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.tel-artislar span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
}

.tel-artislar b {
    font-size: 12px;
    font-weight: var(--t-kalin);
}

.tel-artislar small {
    font-size: 8.5px;
    color: var(--renk-metin-ikincil);
}

.tel-artislar .ana {
    border-color: var(--renk-marka);
    background-color: var(--renk-marka);
    color: var(--renk-marka-uzeri);
}

.tel-artislar .ana small {
    color: inherit;
    opacity: .85;
}

.tel-not {
    text-align: center;
    font-size: 9px;
    color: var(--renk-metin-ikincil);
}

/* Kazanılan araç: onay, özet, süreç adımları. */
.tel-basari {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 8px;
    text-align: center;
}

.tel-onay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    border-radius: 50%;
    background-color: var(--renk-basari-zemin);
    font-size: 24px;
    color: var(--renk-basari);
}

.tel-basari .t {
    font-size: 15px;
    font-weight: var(--t-kalin);
    letter-spacing: var(--t-harf-baslik);
}

.tel-basari .s {
    font-size: 10px;
    color: var(--renk-metin-ikincil);
}

.tel-ozet {
    padding: 4px 10px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
}

.tel-ozet > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 0;
    font-size: 9.5px;
    color: var(--renk-metin-ikincil);
}

.tel-ozet > div + div {
    border-top: 1px solid var(--renk-kenar);
}

.tel-ozet b {
    font-size: 12px;
    font-weight: var(--t-kalin);
    color: var(--renk-metin);
    white-space: nowrap;
}

.tel-surec {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tel-surec li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--renk-metin-soluk);
}

/* Adımlar arası çizgi */
.tel-surec li + li::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--renk-kenar);
}

.tel-surec i {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--renk-kenar-guclu);
    border-radius: 50%;
    background-color: var(--renk-yuzey);
    font-size: 10px;
}

.tel-surec .tamam {
    color: var(--renk-basari);
}

.tel-surec .tamam i {
    border-color: var(--renk-basari);
    background-color: var(--renk-basari);
    color: var(--renk-metin-ters);
}

.tel-surec .simdi {
    font-weight: var(--t-orta);
    color: var(--renk-metin);
}

.tel-surec .simdi i {
    border-color: var(--renk-marka);
}

.tel-surec .tamam + li::before,
.tel-surec .tamam + .simdi::before {
    background-color: var(--renk-basari);
}

/* Ekran içi kademeli gösterim: aktif ekranın öğeleri sırayla belirir. */
.tel-sayfa > * {
    opacity: 0;
    transform: translateY(9px);
}

.tel-sayfa.on > * {
    animation: akis-oge .5s ease both;
}

.tel-sayfa.on > *:nth-child(1) { animation-delay: .10s; }
.tel-sayfa.on > *:nth-child(2) { animation-delay: .22s; }
.tel-sayfa.on > *:nth-child(3) { animation-delay: .34s; }
.tel-sayfa.on > *:nth-child(4) { animation-delay: .46s; }
.tel-sayfa.on > *:nth-child(5) { animation-delay: .58s; }
.tel-sayfa.on > *:nth-child(6) { animation-delay: .70s; }
.tel-sayfa.on > *:nth-child(7) { animation-delay: .80s; }
.tel-sayfa.on > *:nth-child(8) { animation-delay: .90s; }
.tel-sayfa.on > *:nth-child(n+9) { animation-delay: 1s; }

/* Onay kutusu satırı (üyelik sözleşmesi): marka renginde işaret. */
.tel-satir .tel-isaret {
    color: var(--renk-marka);
}

@keyframes akis-oge {
    to { opacity: 1; transform: none; }
}

/* Teklif ekranında en küçük artış düğmesi bir kez "dokunulur"; kazanma ekranında onay işareti belirir. */
.tel-sayfa.on .tel-artislar .ana {
    animation: akis-dokun .5s ease 1.5s both;
}

@keyframes akis-dokun {
    50% { transform: scale(.94); }
}

.tel-sayfa.on .tel-onay {
    animation: akis-pop .55s cubic-bezier(.34, 1.56, .64, 1) .25s both;
}

@keyframes akis-pop {
    0%   { opacity: 0; transform: scale(.35); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

/* Dar masaüstü: telefonlar biraz küçülür. */
@media (max-width: 1199.98px) {
    .akis-izgara {
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: 40px;
    }

    .akis-telefon {
        --k: .44;
    }
}

/* Tablet ve mobil: telefonlar adımların altına iner. İki telefonlu görünüm korunur (kullanıcı kararı
   2026-10-07: tek telefonlu görsel yerine); 1000×1346'lık iç alan --k ile ekran genişliğine ölçeklenir
   (telefon genişliği = 1000px × --k, 16 px kenar boşluğuyla sığar). Tek telefon çerçevesi kullanılmaz. */
@media (max-width: 991.98px) {
    .akis-izgara {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        justify-items: center;
    }

    .akis-adimlar {
        width: 100%;
    }

    .akis-telefon {
        --k: .42;
    }
}

@media (max-width: 575.98px) {
    .akis-telefon { --k: .28; }   /* 280 px — ekranı doldurmasın (kullanıcı geri bildirimi 2026-10-07) */
}

@media (max-width: 374.98px) {
    .akis-telefon { --k: .25; }   /* 250 px — 320–360 px ekranlar */
}

@media (max-width: 575.98px) {
    .akis-ust {
        margin-bottom: var(--b-8);
    }

    .akis-bas {
        gap: 12px;
        padding: 16px 18px;
    }

    .akis-no {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .akis-ad {
        font-size: 15.5px;
    }

    /* Dar ekranda açıklama girintisiz, tam genişlik. */
    .akis-aciklama p {
        padding: 0 18px 18px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .akis-aciklama,
    .akis-aciklama p,
    .tel-sayfa { transition: none; }

    .tel-sayfa > *,
    .tel-sayfa.on > *,
    .tel-sayfa.on .tel-onay,
    .tel-sayfa.on .tel-artislar .ana { animation: none; opacity: 1; transform: none; }
}

/* ── OTOCARS harf harf ────────────────────────────────────────────────── */

/*
 * Açık zeminde logonun harfleri kapsayıcı genişliğinde bir kelime olarak; her harfin altında o
 * harfle başlayan ilke. Sütunlar ince kenarla ayrılır. "OTO" koyu, "CARS" marka kırmızısı
 * (logodaki ayrım) — bölümde kırmızı yalnız bu gliflerde (docs/04 §6.2, bulgu 7).
 *
 * Harf genişliği sütundan gelir; yükseklik sembolün oranından (--genislik / 60).
 * Ekrana girince harfler sırayla belirir (gorununce.js; --sira).
 */
/* Banner bölümünün kırmızı alanı (kullanıcı kararı 2026-10-06): harfler ve metin beyaz; harfler .6, sütuna
   gelince 1. Eğik üst kenar ::before'dur; vitrin kartı (container, z-index 2) onun önünde durur. */
.harf-bolum {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    padding: var(--b-4) 0 var(--bolum-dikey);
    background-color: var(--renk-marka);
    color: var(--renk-metin-ters);
}

.harf-bolum::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 220px;
    margin-bottom: -1px;   /* iki parça arasında ince boşluk kalmasın */
    pointer-events: none;
    background-color: var(--renk-marka);
    clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%);
}

.harf-izgara {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

/* Sütun genişliği container query ile okunur (100cqi): harfler aynı YÜKSEKLİKTE olmalı,
   yoksa dar harf (T) uzun, geniş harf (A) kısa çıkar ve başlıklar farklı hizada kalır.
   Yükseklik en geniş harfe (A, 61.5) göre hesaplanır; her harfin genişliği kendi oranından. */
.harf-oge {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--b-3);
}

.harf-oge + .harf-oge {
    border-left: 1px solid var(--renk-koyu-cizgi);
}

.harf-sekli {
    --harf-y: min(30cqi * 60 / 61.5, 120px);

    display: block;
    width: calc(var(--harf-y) * var(--genislik) / 60);
    height: var(--harf-y);
    margin-bottom: var(--b-5);
    color: var(--renk-metin-ters);
}

.harf-oge h3 {
    margin: 0 0 var(--b-1);
    color: var(--renk-metin-ters);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-md);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-siki);
}

.harf-oge p {
    max-width: 230px;
    margin: 0 auto;
    color: var(--renk-koyu-metin);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

/* Harfler soluk (.6); harfin sütununa gelince tam. */
.harf-sekli {
    opacity: .6;
    transition: opacity .3s ease;
}

.harf-bolum .harf-oge:hover .harf-sekli {
    opacity: 1;
    transition-delay: 0s;
}

/* Görününce: harfler aşağıdan sırayla belirir, metin arkasından gelir.
   Yalnızca JS hazırsa gizlenir (gorununce.js). Hareket yalnız opaklık + kısa kayma. */
.harf-bolum.gorununce-hazir .harf-sekli,
.harf-bolum.gorununce-hazir .harf-oge > div {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s var(--egri);
    transition-delay: calc(var(--sira) * 70ms);
}

.harf-bolum.gorununce-hazir .harf-oge > div {
    transition-delay: calc(var(--sira) * 70ms + 160ms);
}

.harf-bolum.gorundu .harf-oge > div {
    opacity: 1;
    transform: none;
}

.harf-bolum.gorundu .harf-sekli {
    opacity: .6;
    transform: none;
}

.harf-bolum.gorundu .harf-oge:hover .harf-sekli {
    opacity: 1;
    transition-delay: 0s;
}

@media (max-width: 1199.98px) {
    .harf-oge {
        padding: 0 var(--b-2);
    }

    .harf-oge p {
        font-size: var(--t-xs);
    }
}

/* Tablet ve mobil: kelime dikey okunur — solda harf, sağda başlık ve açıklama. */
@media (max-width: 991.98px) {
    .harf-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--b-6) var(--b-8);
        text-align: left;
    }

    .harf-oge {
        container-type: normal;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: var(--b-4);
        padding: 0;
    }

    .harf-oge + .harf-oge {
        border-left: 0;
    }

    .harf-sekli {
        --harf-y: 46px;
        margin: 0;
    }

    .harf-oge p {
        max-width: none;
        margin: 0;
        font-size: var(--t-sm);
    }
}

@media (max-width: 575.98px) {
    .harf-izgara {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--b-5);
    }

    .harf-oge {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .harf-sekli {
        --harf-y: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .harf-bolum.gorununce-hazir .harf-sekli,
    .harf-bolum.gorununce-hazir .harf-oge > div { transition: none; transform: none; }
}

/* ── Blog ─────────────────────────────────────────────────────────────── */

/*
 * Görsel + başlık + özet + tarih kartları, yatay kayan şeritte (CSS scroll-snap; oklar
 * yatay-serit.js). Görünen kart sayısı --kart-sayi ile kırılımlarda değişir. Başlık ortak
 * .bolum-baslik; sağda "Tüm yazılar" ve oklar.
 */
.blog-bolum {
    margin-bottom: var(--bolum-dikey);
}

.blog-ust {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--b-4);
    margin-bottom: var(--b-6);
}

.blog-ust .bolum-baslik {
    margin-bottom: 0;
}

.blog-ust-sag {
    display: flex;
    align-items: center;
    gap: var(--b-5);
    flex: none;
}

.blog-tumu {
    display: inline-flex;
    align-items: center;
    gap: var(--b-2);
    min-height: 44px;
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    white-space: nowrap;
    text-decoration: none;
}

.blog-tumu:hover {
    color: var(--renk-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-serit {
    --kart-sayi: 3;
    --kart-bosluk: var(--b-5);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--kart-sayi) - 1) * var(--kart-bosluk)) / var(--kart-sayi));
    gap: var(--kart-bosluk);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.blog-serit::-webkit-scrollbar {
    display: none;
}

.blog-serit > li {
    scroll-snap-align: start;
}

/* Kartın kendisi (.blog-kart) ortak bileşendir: css/bilesenler/blog-karti.css. */

@media (max-width: 991.98px) {
    .blog-serit { --kart-sayi: 2; }
}

/* Mobil: tek kart + yanındakinin kenarı görünür; oklar gizlenir, parmakla kaydırılır. */
@media (max-width: 575.98px) {
    .blog-ust {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--b-2);
        margin-bottom: var(--b-5);
    }

    .blog-ust .serit-oklar {
        display: none;
    }

    .blog-serit {
        --kart-bosluk: var(--b-3);
        grid-auto-columns: 82%;
    }
}