/*
 * İhale araç listesi (/ihale/{id}/{slug}) — yalnızca bu sayfada yüklenir.
 *
 * Kartın kendisi css/bilesenler/arac-karti.css, durum rozetleri, sayaç ve "Beni bilgilendir"
 * css/bilesenler/ihale-durumu.css, form öğeleri css/bilesenler/form.css, düğme/rozet/boş
 * durum/sayfalama site.css. Burada yalnız yerleşim: ihale bandı, filtre paneli (masaüstünde
 * yan sütun, mobilde alttan açılan sayfa), sonuç çubuğu, mobil alt çubuk ve sıralama sayfası,
 * kart ızgarası.
 */

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

/*
 * ── İhale bandı ──────────────────────────────────────────────────────────
 * Üç bölge tek satırda: ne zaman/nasıl · sayılar · eylem. Yönetim kısayolları altta, ince
 * çizgiyle ayrı. Takvim yaprağı ve sayaç css/bilesenler/ihale-durumu.css.
 */

.ihale-bant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "zaman bilgi eylem"
        "yonetim yonetim yonetim";
    align-items: center;
    column-gap: var(--b-8);
    margin-bottom: var(--b-6);
    padding: var(--b-5) var(--b-6);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

.ihale-bant-zaman {
    grid-area: zaman;
    display: flex;
    align-items: center;
    gap: var(--b-4);
    min-width: 0;
}

.ihale-bant-zaman > div {
    min-width: 0;
}

.ihale-bant-rozetler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b-2);
    margin: 0 0 var(--b-1);
}

.ihale-bant-baslangic {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--b-3);
    margin: 0;
}

.ihale-bant-baslangic strong {
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-kalin);
}

.ihale-bant-baslangic span {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.ihale-bant-tip {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: var(--b-1) 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.ihale-bant-tip .bi {
    color: var(--gri-400);
}

/* Sayılar: etiket üstte, değer altta; soldan ince çizgiyle ayrılır. */
.ihale-bant-bilgi {
    grid-area: bilgi;
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-3) var(--b-8);
    margin: 0;
    padding-left: var(--b-8);
    border-left: var(--kenar);
}

.ihale-bant-bilgi div {
    display: flex;
    flex-direction: column;
}

.ihale-bant-bilgi dt {
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
}

.ihale-bant-bilgi dd {
    margin: 0;
    color: var(--renk-metin);
    font-size: var(--t-md);
    font-weight: var(--t-kalin);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Toplu ihalede katılımcının bayrak numarası; son teklif kartlarda bu numarayla görünür. */
.ihale-bant-bayrak {
    display: inline-block;
    padding: 0 var(--b-2);
    border-radius: var(--r-kucuk);
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
    font-variant-numeric: tabular-nums;
}

.ihale-bant-kurallar {
    color: var(--renk-metin);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ihale-bant-eylem {
    grid-area: eylem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--b-2);
}

.ihale-bant-eylem p {
    max-width: 240px;
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
    text-align: right;
}

/* Sıralı ihale: canlı ekrana geçiş. Beyaz nokta, canlı rozetle aynı yayılan halka. */
.ihale-bant-katil {
    white-space: nowrap;
}

.ihale-bant-katil .nokta {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.ihale-bant-katil .nokta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: currentColor;
    animation: ihale-canli-halka 1.6s ease-out infinite;
}

/* Yaklaşan sıralı ihale: sayacın altında kısa not + "İhaleye katıl" (bekleme ekranına götürür). */
.ihale-bant-katil-satir {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--b-3);
}

.ihale-bant-eylem .ihale-bant-katil-satir p {
    max-width: 180px;
    font-size: var(--t-xs);
}

.ihale-bant-yonetim {
    grid-area: yonetim;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b-1) var(--b-5);
    margin: var(--b-4) 0 0;
    padding-top: var(--b-3);
    border-top: var(--kenar);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
}

.ihale-bant-yonetim > span {
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ihale-bant-yonetim a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--renk-metin-ikincil);
    text-decoration: none;
}

.ihale-bant-yonetim a:hover {
    color: var(--renk-metin);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .ihale-bant-katil .nokta::after { animation: none; opacity: 0; }
}

/* ── Yerleşim ─────────────────────────────────────────────────────────── */

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

.arac-filtre-kolon {
    display: flex;
    flex-direction: column;
    gap: var(--b-3);
    min-width: 0;
}

/* ── Filtreler ─────────────────────────────────────────────────────────── */

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

.arac-filtre:focus {
    outline: none;
}

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

.arac-filtre-ust h2 {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--b-2);
    margin: 0;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-md);
    font-weight: var(--t-kalin);
}

.arac-filtre-temizle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.arac-filtre-kapat {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin);
    font-size: var(--t-md);
}

.arac-filtre-grup {
    min-width: 0;
    margin: 0;
    padding: var(--b-3) 0;
    border: 0;
    border-top: var(--kenar);
}

.arac-filtre-grup:first-of-type {
    border-top: 0;
}

/* Bootstrap legend'ı float:left ve %100 genişlikle çiziyor; etiketle aynı görünsün. */
.arac-filtre-grup > label,
.arac-filtre-grup > legend {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 var(--b-2);
    padding: 0;
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

/* Onay kutuları form.css tabanında (44px satır); filtrede satırlar sıkı ama dokunulabilir. */
.arac-filtre .form-check {
    align-items: center;
    padding: var(--b-1) 0;
}

.arac-filtre .form-check .form-check-input {
    margin-top: 0;
}

.arac-filtre .form-check-label {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: var(--b-2);
    font-size: var(--t-sm);
}

.arac-filtre .adet {
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

.arac-filtre-aralik {
    display: flex;
    align-items: center;
    gap: var(--b-2);
}

.arac-filtre-aralik .form-control {
    flex: 1;
    width: 0;
    padding-left: var(--b-3);
    padding-right: var(--b-2);
}

.arac-filtre-aralik span {
    color: var(--gri-400);
}

.arac-filtre-alt {
    padding-top: var(--b-4);
    border-top: var(--kenar);
}

/* "Bu aramayı kaydet" (_AramayiKaydet): filtre panelinin altında ikincil düğme; açılınca ad + Kaydet. */
.aramayi-kaydet > summary {
    list-style: none;
}

.aramayi-kaydet > summary::-webkit-details-marker {
    display: none;
}

.aramayi-kaydet[open] > summary {
    border-color: var(--gri-900);
}

.aramayi-kaydet-form {
    margin-top: var(--b-3);
    padding: var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

.aramayi-kaydet-form .form-yardim a {
    color: var(--renk-metin);
    font-weight: var(--t-orta);
}

/* ── Sonuç çubuğu ─────────────────────────────────────────────────────── */

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

.arac-sayi {
    flex: 1;
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.arac-sayi strong {
    color: var(--renk-metin);
    font-size: var(--t-md);
    font-weight: var(--t-kalin);
    font-variant-numeric: tabular-nums;
}

.arac-sirala {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
}

.arac-sirala .form-select {
    width: auto;
}

/* Seçili filtre etiketleri: tıklanınca o filtre kalkar. */
.filtre-etiketleri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-2);
    margin: 0 0 var(--b-4);
    padding: 0;
    list-style: none;
}

.filtre-etiketleri a {
    display: inline-flex;
    align-items: center;
    gap: var(--b-1);
    min-height: 36px;
    padding: 0 var(--b-2) 0 var(--b-3);
    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;
}

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

.filtre-etiketleri .tumunu-temizle {
    border-color: transparent;
    background: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

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

/* Sıralı ihalede aracın teklif durumu (görsel üstü etiket): kırmızı nokta + metin. */
.arac-durum.canli {
    color: var(--renk-marka);
}

.arac-durum .nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
}

/* "Tüm araçlar açık" ihalede her aracın kendi bitişi (teklif geldikçe uzar). */
.arac-kalan {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--b-3);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
}

.arac-kalan b {
    color: var(--renk-metin);
    font-weight: var(--t-kalin);
    font-variant-numeric: tabular-nums;
}

.arac-kalan.sayac-bitti {
    opacity: .5;
}

/* ── Sayfalama (ortak .sayfalama, site.css) ───────────────────────────── */

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

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

/* ── Boş durum (ortak .bos-durum; burada yalnız kap) ──────────────────── */

.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: 1199.98px) {
    .arac-listesi-izgara {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: var(--b-6);
    }

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

/* ── Mobil alt çubuk ve alt sayfalar (masaüstünde yok) ────────────────── */

.arac-mobil-cubuk,
.arac-sirala-sayfa {
    display: none;
}

/*
 * Tablet ve mobil (ihaleplus düzeni): sıralama ve filtre alttaki sabit çubuktan açılır;
 * ikisi de alttan kayan birer sayfadır. Başlık üstte, "Sonuçları göster" altta sabit kalır.
 */
@media (max-width: 991.98px) {
    .arac-listesi-izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Form alttan açılan sayfadır (fixed, akış dışı); kolon boşken ızgarada boş satır açmasın. */
    .arac-filtre-kolon {
        display: contents;
    }

    /* Üst çubukta yalnızca araç sayısı kalır; sıralama alttaki çubuğa taşınır. */
    .arac-cubuk .arac-sirala {
        display: none;
    }

    /* Mobil alt menü varsa onun üstüne oturur, menü kaydırmayla gizlenince aşağı iner (css/bilesenler/mobil-alt-menu.css). */
    .arac-mobil-cubuk {
        position: fixed;
        right: 0;
        bottom: var(--alt-menu-pay, 0px);
        left: 0;
        z-index: var(--z-alt-cubuk);
        display: flex;
        padding-bottom: var(--alt-menu-guvenli, env(safe-area-inset-bottom));
        transition: bottom var(--sure-orta) var(--egri);
        border-top: var(--kenar);
        background-color: var(--renk-yuzey);
        box-shadow: var(--golge-2);
    }

    .arac-mobil-cubuk button {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: var(--b-3);
        min-width: 0;
        min-height: 56px;
        padding: var(--b-2) var(--b-3);
        border: 0;
        background: none;
        color: var(--renk-metin);
        text-align: left;
    }

    .arac-mobil-cubuk button + button {
        border-left: var(--kenar);
    }

    .arac-mobil-cubuk button:active {
        background-color: var(--renk-yuzey-ikincil);
    }

    .arac-mobil-cubuk .bi {
        color: var(--renk-metin);
        font-size: var(--t-lg);
    }

    .arac-mobil-cubuk span {
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-size: var(--t-sm);
        font-weight: var(--t-kalin);
        line-height: var(--t-satir-siki);
    }

    /* Seçili sıralama / filtre sayısı: kullanıcı açmadan neyin geçerli olduğunu görür. */
    .arac-mobil-cubuk small {
        overflow: hidden;
        color: var(--renk-metin-ikincil);
        font-size: var(--t-xs);
        font-weight: var(--t-normal);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Alttaki çubuk sayfanın son satırlarını ve alt bilgiyi örtmesin. */
    body:has(.arac-mobil-cubuk) {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .arac-filtre-perde {
        position: fixed;
        inset: 0;
        z-index: var(--z-cekmece);
        background-color: var(--pencere-ortu);
    }

    /* Ortak alt sayfa: alttan kayar, üst köşeleri yuvarlak, içi kendi içinde kayar. */
    .arac-filtre,
    .arac-sirala-sayfa {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: calc(var(--z-cekmece) + 1);
        display: block;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: var(--r-buyuk) var(--r-buyuk) 0 0;
        background-color: var(--renk-yuzey);
        box-shadow: var(--golge-3);
        visibility: hidden;
        transform: translateY(100%);
        transition: transform var(--sure-orta) var(--egri), visibility 0s linear var(--sure-orta);
    }

    .arac-filtre.acik,
    .arac-sirala-sayfa.acik {
        visibility: visible;
        transform: none;
        transition: transform var(--sure-orta) var(--egri);
    }

    .arac-filtre {
        height: calc(100dvh - 48px);
        padding: 0 var(--b-4);
    }

    .arac-sirala-sayfa {
        padding: 0 0 env(safe-area-inset-bottom);
    }

    .arac-sirala-sayfa:focus {
        outline: none;
    }

    /* Başlık satırı: kaydırırken üstte sabit; tepesinde tutma çizgisi. */
    .arac-filtre-ust,
    .arac-sayfa-ust {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: var(--b-3);
        margin: 0;
        padding: var(--b-5) 0 var(--b-3);
        border-bottom: var(--kenar);
        background-color: var(--renk-yuzey);
    }

    .arac-filtre-ust::before,
    .arac-sayfa-ust::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 38px;
        height: 4px;
        margin-left: -19px;
        border-radius: var(--r-tam);
        background-color: var(--renk-kenar-guclu);
    }

    .arac-sayfa-ust {
        padding-right: var(--b-4);
        padding-left: var(--b-5);
    }

    .arac-sayfa-ust h2 {
        display: flex;
        flex: 1;
        align-items: center;
        gap: var(--b-2);
        margin: 0;
        color: var(--renk-metin);
        font-family: var(--t-aile-baslik);
        font-size: var(--t-md);
        font-weight: var(--t-kalin);
    }

    .arac-filtre-kapat {
        display: inline-flex;
    }

    .arac-filtre-grup:first-of-type {
        border-top: 0;
    }

    /* "Sonuçları göster" sayfanın dibinde hep görünür. */
    .arac-filtre-alt {
        position: sticky;
        bottom: 0;
        margin: 0 calc(-1 * var(--b-4));
        padding: var(--b-3) var(--b-4) calc(var(--b-3) + env(safe-area-inset-bottom));
        background-color: var(--renk-yuzey);
        box-shadow: var(--golge-2);
    }

    /* Sıralama seçenekleri: geniş dokunma alanı, seçili olan işaretli. */
    .arac-sirala-sayfa ul {
        margin: 0;
        padding: 6px 0 var(--b-3);
        list-style: none;
    }

    .arac-sirala-sayfa a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--b-3);
        min-height: 52px;
        padding: var(--b-3) var(--b-5);
        border-bottom: var(--kenar);
        color: var(--renk-metin);
        font-size: var(--t-md);
        text-decoration: none;
    }

    .arac-sirala-sayfa li:last-child a {
        border-bottom: 0;
    }

    .arac-sirala-sayfa a:active {
        background-color: var(--renk-yuzey-ikincil);
    }

    .arac-sirala-sayfa a.secili {
        font-weight: var(--t-kalin);
    }

    .arac-sirala-sayfa a.secili .bi {
        color: var(--renk-marka);
    }

    .arac-sirala-sayfa .bi {
        font-size: var(--t-lg);
    }
}

/* Orta genişlik: sayılar alta iner, eylem sağda kalır. */
@media (max-width: 1199.98px) {
    .ihale-bant {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "zaman eylem"
            "bilgi bilgi"
            "yonetim yonetim";
    }

    .ihale-bant-bilgi {
        margin-top: var(--b-4);
        padding: var(--b-3) 0 0;
        border-top: var(--kenar);
        border-left: 0;
    }
}

/* Dar ekran: her şey alt alta, eylem tam genişlik. */
@media (max-width: 767.98px) {
    .ihale-bant {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "zaman"
            "bilgi"
            "eylem"
            "yonetim";
        padding: var(--b-4);
    }

    .ihale-bant-eylem {
        align-items: stretch;
        margin-top: var(--b-4);
    }

    .ihale-bant-eylem p {
        max-width: none;
        text-align: left;
    }

    .ihale-bant-katil {
        justify-content: center;
    }

    .ihale-bant-katil-satir {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--b-2);
    }

    .ihale-bant-eylem .ihale-bant-katil-satir p {
        max-width: none;
        text-align: center;
    }
}

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

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

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

@media (prefers-reduced-motion: reduce) {
    .arac-filtre,
    .arac-filtre.acik,
    .arac-sirala-sayfa,
    .arac-sirala-sayfa.acik { transition: none; }
}