/*
 * Araç detay sayfası (/arac/{id}/{slug}) — araç detayı ve canlı ihale ekranı yükler.
 * Galeri ve bilgi bloğu css/bilesenler/arac-bilgileri.css, rozet/sayaç ihale-durumu.css.
 *
 * DİKKAT (bulgu 2): canlı ekran da bu dosyayı yükler; yerleşim kuralları .arac-detay kapsamında
 * yazılır, yoksa canlı sahnedeki bilgi tablosu ve özet şeridi bu ızgaraya girip kesilir.
 */

.arac-detay {
    padding: var(--b-6) 0 var(--bolum-dikey);
    background-color: var(--renk-zemin);
}

.arac-detay-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: var(--b-6);
}

/* ── Bölüm menüsü (§8.4) ──────────────────────────────────────────────────
 * Sayfa içi çapalar (JS'siz çalışır): Bilgiler · Ekspertiz · Donanım · Açıklama — yalnız var
 * olan bölümler. ≥992: galerinin altından başlayan yapışkan çizgili sekme çubuğu; mobilde yatay
 * kaydırılan hap düğmeler. Görünüm ortak .sekmeler.sekmeler-cizgili (site.css). */

.arac-bolum-menu {
    position: sticky;
    top: var(--b-16);   /* yapışkan menü çubuğunun hemen altı */
    z-index: var(--z-yapiskan-icerik);
    margin-top: var(--b-4);
    padding: 0 var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
    box-shadow: var(--golge-1);
}

/* Çapadan gelinen bölüm başlığı yapışkan menü çubuğu + bölüm menüsünün altında kalmasın. */
.arac-detay .arac-bolum {
    scroll-margin-top: calc(var(--b-16) * 2);
}

.arac-bolum-menu .sekmeler-cizgili {
    border-bottom: 0;
}

.arac-bolum-menu .sekme:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: -2px;
}

/* ── İçerik sütunu (≥992) ─────────────────────────────────────────────────
 * İki ana sütun: solda içerik (büyük galeri → bölüm menüsü → araç bilgileri → ekspertiz → donanım →
 * açıklama, hepsi sütun genişliğinde alt alta), sağda teklif/fiyat paneli. Galerinin yanına bilgi
 * tablosu konmaz: yükseklikleri denk olmadığından galerinin altında büyük boşluk kalıyordu.
 * Araç bilgileri bileşenin kendi iki sütunlu tanım ızgarasıdır (arac-bilgileri.css).
 * Galeri/bilgi partial'ları canlı ekranla ortaktır; bu kurallar yalnızca .arac-detay kapsamında
 * (araç detayı ve kazanılan araç sayfası). */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Geniş sütunda 4:3 galeri ekrana sığmıyordu; 3:2 sahne, küçük resim şeridi ilk ekranda kalır.
       ≥1200'de sahne yüksekliği sınırlıdır (css/bilesenler/arac-bilgileri.css, galeri bölümü). */
    .arac-detay .arac-galeri-sahne {
        aspect-ratio: 3 / 2;
    }
}

/* Özet şeridindeki beş bilgi, hemen altındaki bilgi tablosunda zaten var (iki kez söylenmez). */
@media (min-width: 1200px) {
    .arac-detay .arac-ozet-serit {
        display: none;
    }
}

/* ── Yan panel ────────────────────────────────────────────────────────── */

.arac-panel {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--b-4);
}

/* Yapışkan panel ekrandan uzunsa (üye görünümünde otomatik teklif, maliyet kutusu) alt kısmı içerik
   sütununun sonuna kadar görünmüyordu: panel ekran yüksekliğiyle sınırlanır, kendi içinde kayar. */
@media (min-width: 992px) {
    .arac-detay .arac-panel {
        max-height: calc(100vh - 96px - var(--b-4));
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* Canlı toplu ihalede sağ alttaki yüzen "Destek" düğmesi (css/bilesenler/canli-sohbet.css: alttan --b-4,
       44px) yapışkan panelin son satırına (Favori · Paylaş) biniyordu. Düğme görünürken panel düğmenin
       üstünde biter: düğme yüksekliği + alt boşluğu + --b-3 aralık kadar kısalır; içerik panel içinde kayar. */
    body:has(.canli-sohbet-ac:not([hidden])) .arac-detay .arac-panel {
        max-height: calc(100vh - 96px - 44px - 2 * var(--b-4) - var(--b-3));
    }
}

/* Sıralı ihale başlamadan: "İhaleye katıl" ana eylemin altındaki ipucu ve ikincil bağlantı. */
.arac-panel-ipucu {
    display: flex;
    align-items: flex-start;
    gap: var(--b-2);
    margin: var(--b-2) 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.arac-panel-ipucu .bi {
    flex: none;
    margin-top: 1px;
    color: var(--gri-400);
}

.arac-panel-ikincil-eylem {
    margin-top: var(--b-3);
}

.arac-panel-kart {
    padding: var(--b-5);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

.arac-panel-rozetler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-2);
    margin-bottom: var(--b-3);
}

/* Sıra numarası (canlı sahne de kullanır). */
.arac-sira {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-tam);
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
}

/* Panel başlığı (canlı sahne ve kazanılan araç sayfası: araç adı). */
.arac-panel-baslik {
    margin: 0 0 var(--b-4);
    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);
}

/* Araç detayında H1 araç adıdır; panelde ad tekrarlanmaz, yalnız yıl · paket alt satırı (§6.4). */
.arac-panel-alt {
    margin: 0 0 var(--b-4);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

.arac-panel-fiyat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--b-4);
    padding-bottom: var(--b-4);
    border-bottom: var(--kenar);
}

.arac-panel-fiyat small {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
}

/* En önemli bilgi: renkle değil boyutla öne çıkar. */
.arac-panel-fiyat b {
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-3xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--t-sayi);
}

/* KDV yalnız burada (kartta değil, §8.2). */
.arac-panel-fiyat .arac-panel-kdv {
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-weight: var(--t-normal);
}

.arac-panel .ihale-sayac {
    margin-bottom: var(--b-4);
}

.arac-panel-bilgi {
    display: flex;
    flex-direction: column;
    gap: var(--b-2);
    margin: 0 0 var(--b-4);
    padding: 0;
    list-style: none;
    color: var(--renk-metin);
    font-size: var(--t-sm);
}

.arac-panel-bilgi li {
    display: flex;
    align-items: flex-start;
    gap: var(--b-2);
}

.arac-panel-bilgi .bi {
    margin-top: 1px;
    color: var(--gri-400);
}

.arac-panel-not {
    display: block;
    margin: 0 0 var(--b-4);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.arac-panel-fiyat .arac-panel-not {
    margin: 6px 0 0;
}

.arac-panel-ikincil {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-2);
    margin-top: var(--b-3);
}

/* İkincil düğme (ortak .otocars-btn ikincil görünümüyle aynı; kazanılan araç sayfası da kullanır). */
.arac-panel-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-2);
    min-height: 44px;
    padding: 0 var(--b-3);
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: none;
    transition: border-color var(--sure-hizli) ease, color var(--sure-hizli) ease;
}

.arac-panel-dugme:hover {
    border-color: var(--gri-900);
    color: var(--renk-metin);
}

.arac-panel-dugme:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

.arac-panel-tum {
    width: 100%;
    margin-top: var(--b-1);
}

.arac-panel-dugme.secili,
.arac-panel-dugme.secili:hover {
    border-color: var(--renk-marka-cizgi);
    color: var(--renk-marka);
}

.arac-panel-dugme[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

.arac-panel-konum h2 {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: 0 0 var(--b-2);
    color: var(--renk-metin);
    font-family: var(--t-aile);
    font-size: var(--t-sm);
    font-weight: var(--t-kalin);
}

.arac-panel-konum p {
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
    white-space: pre-line;
}

/* ── İhale bitti (ortak .bos-durum; burada yalnız kap) ────────────────── */

.arac-bitti {
    max-width: 600px;
    margin: 0 auto;
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

/* ── Duyarlı düzen ────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .arac-detay-izgara {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/* Tablet ve mobil: panel galerinin hemen altına gelir, yapışkan değildir. Bölüm menüsü
   yatay kaydırılan hap düğmelere döner (yapışkan değil). */
@media (max-width: 991.98px) {
    .arac-detay-izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    .arac-panel {
        position: static;
        order: -1;
    }

    .arac-detay .arac-detay-icerik {
        display: contents;
    }

    .arac-detay .arac-galeri {
        order: -2;
    }

    .arac-bolum-menu {
        position: static;
        margin-top: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .arac-bolum-menu .sekmeler {
        gap: var(--b-2);
        mask-image: none;
    }

    .arac-bolum-menu .sekme {
        min-height: 40px;
        padding: 0 var(--b-4);
        border: 1px solid var(--renk-kenar-guclu);
        border-radius: var(--r-tam);
        background-color: var(--renk-yuzey);
        box-shadow: none;
        color: var(--renk-metin);
    }

    .arac-bolum-menu .sekme:hover {
        border-color: var(--gri-900);
        box-shadow: none;
    }
}

@media (max-width: 575.98px) {
    .arac-detay {
        padding-top: var(--b-4);
    }

    .arac-panel-fiyat b {
        font-size: var(--t-2xl);
    }
}