/*
 * Vitrin listeleri — marka vitrini (/marka/{slug}) ve tamamlanan ihaleler (/tamamlanan-ihaleler).
 * Yalnızca bu sayfalarda yüklenir; araç kartı bilesenler/arac-karti.css, sayfalama/boş durum/
 * bölüm başlığı site.css, form öğeleri form.css (tamamlanan), "Beni bilgilendir" ihale-durumu.css.
 *
 * Açık sıcak gri zemin, beyaz kartlar. Marka sayfasında üstte özet kartı ve model filtresi,
 * tamamlanan ihalelerde ihale seçici; ikisi de aynı kart ızgarasını kullanır.
 */

.vitrin-sayfa {
    padding: var(--b-10) 0 var(--bolum-dikey);
    background-color: var(--renk-zemin);
}

/* ── Kart ızgarası ────────────────────────────────────────────────────── */

.vitrin-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--izgara-bosluk);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bağlantısız kart (tamamlanan ihaleler): üzerine gelince tıklanabilir gibi görünmesin. */
.vitrin-izgara .arac-kart:not(:has(h3 a)):hover {
    border-color: var(--renk-kenar);
    box-shadow: none;
}

/* ── Marka özeti ──────────────────────────────────────────────────────── */

.marka-ozet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-5) var(--b-10);
    margin-bottom: var(--b-6);
    padding: var(--b-8);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

.marka-ozet .bolum-baslik {
    margin-bottom: 0;
}

.marka-sayilar {
    display: flex;
    flex-shrink: 0;
    gap: var(--b-3);
    margin: 0;
}

.marka-sayilar div {
    min-width: 116px;
    padding: var(--b-3) var(--b-5);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
    text-align: center;
}

.marka-sayilar dt {
    margin-bottom: 2px;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
}

.marka-sayilar dd {
    margin: 0;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    font-variant-numeric: tabular-nums;
}

/* ── Model filtresi ───────────────────────────────────────────────────── */

.marka-modeller {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-2);
    margin-bottom: var(--b-6);
}

.marka-modeller a {
    display: inline-flex;
    align-items: center;
    gap: var(--b-2);
    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);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: none;
    transition: border-color var(--sure-hizli) ease;
}

.marka-modeller a span {
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
}

.marka-modeller a:hover {
    border-color: var(--gri-900);
    color: var(--renk-metin);
}

.marka-modeller a.secili {
    border-color: var(--gri-900);
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.marka-modeller a.secili span {
    color: var(--renk-koyu-metin-soluk);
}

/* Karttaki ihale adı */
.vitrin-ihale {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: calc(-1 * var(--b-2)) 0 var(--b-3);
    overflow: hidden;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vitrin-ihale .bi {
    flex-shrink: 0;
    color: var(--gri-400);
}

/* ── Tamamlanan ihaleler: seçici + özet ───────────────────────────────── */

.vitrin-arac-cubugu {
    display: flex;
    align-items: flex-end;
    gap: var(--b-3);
    margin-bottom: var(--b-5);
}

.vitrin-secici {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--form-etiket-arasi);
    max-width: 520px;
}

.vitrin-goster {
    min-height: var(--form-yukseklik);
}

.vitrin-goster[hidden] {
    display: none;
}

.vitrin-ozet {
    margin-bottom: var(--b-6);
}

.vitrin-ozet h2 {
    margin: 0 0 6px;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
}

.vitrin-ozet p {
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
}

.vitrin-ozet p span {
    margin-left: var(--b-1);
}

.vitrin-ozet b {
    color: var(--renk-metin);
    font-variant-numeric: tabular-nums;
}

/* Satıldı / satılmadı etiketi (görsel üstü .arac-durum): başarı tonu ya da nötr; simge + metin. */
.arac-durum.vitrin-satildi {
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
}

.arac-durum.vitrin-satilmadi {
    color: var(--renk-metin-ikincil);
}

/* Tamamlanan kartta başlık bağlantı değil düz metindir; fiyatlar yan yana. */
.vitrin-izgara .arac-alt {
    align-items: flex-end;
}

.vitrin-acilis {
    text-align: right;
}

.vitrin-acilis span {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
}

/* ── Sayfalama ve boş durum (ortak bileşenler; burada yalnız yerleşim) ── */

.arac-sayfalama {
    margin-top: var(--b-8);
}

.sayfalama-bosluk {
    display: inline-flex;
    align-items: center;
    min-width: 20px;
    color: var(--renk-metin-soluk);
}

.arac-bos {
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

.arac-bos .bos-durum-eylem {
    align-items: flex-start;
}

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

@media (max-width: 1399.98px) {
    .vitrin-izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .vitrin-sayfa {
        padding-top: var(--b-6);
    }

    .vitrin-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marka-ozet {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--b-5);
    }
}

@media (max-width: 575.98px) {
    .vitrin-izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    .marka-sayilar {
        width: 100%;
    }

    .marka-sayilar div {
        flex: 1;
        min-width: 0;
    }

    .vitrin-arac-cubugu {
        flex-direction: column;
        align-items: stretch;
    }

    .vitrin-secici {
        max-width: none;
    }

    .arac-bos .bos-durum-eylem,
    .arac-bos .bos-durum-eylem > *,
    .arac-bos .bos-durum-eylem .otocars-btn {
        width: 100%;
    }
}