/*
 * Araç karşılaştırma sayfası (A12, Views/Karsilastir/Index). Ortak taban: .tablo-kabi / .tablo (site.css §6.11),
 * .rozet, .otocars-btn, .bos-durum, .form-check (form.css). Burada yalnız yerleşim:
 *   - ilk sütun (özellik adı) yapışkan; araç sütunları tablo kabında yatay kayar (sayfa taşmaz);
 *   - mobilde aynı anda iki araç sütunu görünür, 3–4 araçta kaydırılır;
 *   - farklı değerli satırlar hafif zeminli + etikette ince marka çizgisi; "Yalnız farkları göster" aynı
 *     değerli satırları gizler (betik tabloya .yalniz-farklar yazar).
 */

.karsilastir-sayfa {
    padding: var(--b-6) 0 var(--bolum-dikey);
}

.karsilastir-not {
    display: flex;
    align-items: flex-start;
    gap: var(--b-2);
    margin-bottom: var(--b-4);
}

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

.karsilastir-adet {
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
}

/* Anahtar satırı 44 px dokunma alanı. */
.karsilastir-farklar {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
}

.karsilastir-farklar[hidden] {
    display: none;
}

.karsilastir-farklar .form-check-label {
    cursor: pointer;
}

/* ── Tablo ── */

.karsilastir-kabi {
    --etiket: 200px;
    --sutun-min: 220px;
}

.karsilastir-kabi:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

.karsilastir-tablo {
    width: max(100%, calc(var(--etiket) + var(--arac-sayisi, 2) * var(--sutun-min)));
    table-layout: fixed;
}

.karsilastir-tablo .karsilastir-etiket {
    position: sticky;
    left: 0;
    z-index: 1;
    width: var(--etiket);
    border-right: var(--kenar);
    background-color: var(--renk-yuzey-ikincil);
    white-space: normal;
}

.karsilastir-tablo td {
    color: var(--renk-metin);
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--t-sayi);
    overflow-wrap: anywhere;
}

/* Farklı değerli satır: hafif zemin + etiket solunda ince marka çizgisi (renk tek başına değil; ekran okuyucuya "(farklı)"). */
.karsilastir-tablo tbody tr.fark > td {
    background-color: var(--renk-yuzey-ikincil);
}

.karsilastir-tablo tbody tr.fark > th {
    color: var(--renk-metin);
}

/* Yapışkan hücre konum bağlamıdır; çizgi hücreyle birlikte kayar. */
.karsilastir-tablo tbody tr.fark > th::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--renk-marka);
}

.karsilastir-tablo.yalniz-farklar tbody tr[data-fark="false"] {
    display: none;
}

.karsilastir-en {
    margin-left: var(--b-1);
    vertical-align: middle;
}

/* Araç sütun başlıkları: görsel, durum, ad, ihale, fiyat, süre, eylemler. */
.karsilastir-tablo thead th {
    height: auto;
    padding: var(--b-4);
    vertical-align: top;
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    white-space: normal;
}

.karsilastir-tablo thead .karsilastir-etiket {
    background-color: var(--renk-yuzey-ikincil);
}

.karsilastir-arac {
    font-weight: var(--t-normal);
}

.karsilastir-arac > * + * {
    margin-top: var(--b-2);
}

.karsilastir-gorsel {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
}

.karsilastir-gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.karsilastir-arac .rozet {
    margin-top: var(--b-3);
}

.karsilastir-ad {
    display: -webkit-box;
    overflow: hidden;
    color: var(--renk-metin);
    font-size: var(--t-md);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

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

.karsilastir-ihale,
.karsilastir-zaman {
    display: block;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.karsilastir-ihale {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.karsilastir-zaman b {
    color: var(--renk-metin);
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--t-sayi);
}

.karsilastir-fiyat {
    display: block;
}

.karsilastir-fiyat small {
    display: block;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
}

.karsilastir-fiyat b {
    color: var(--renk-metin);
    font-size: var(--t-xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--t-sayi);
    white-space: nowrap;
}

.karsilastir-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-2);
    padding-top: var(--b-1);
}

/* Küçük düğmeler tabloda 36 px görünür; dokunma alanı 44 px'e tamamlanır. */
.karsilastir-eylem .otocars-btn-kucuk {
    position: relative;
}

.karsilastir-eylem .otocars-btn-kucuk::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.karsilastir-dipnot {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: var(--b-3) 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.karsilastir-fark-ornegi {
    flex: none;
    width: 3px;
    height: 1.2em;
    background-color: var(--renk-marka);
}

@media (max-width: 1199.98px) {
    .karsilastir-kabi {
        --etiket: 160px;
        --sutun-min: 200px;
    }
}

/* Mobil: etiket sütunu dar; iki araç sütunu ekrana sığar, fazlası kayar. */
@media (max-width: 767.98px) {
    .karsilastir-sayfa {
        padding-top: var(--b-4);
    }

    .karsilastir-kabi {
        --etiket: 104px;
        --sutun-min: calc((100vw - 2 * var(--kap-kenar) - var(--etiket) - 2px) / 2);
    }

    .karsilastir-tablo th,
    .karsilastir-tablo td {
        padding: var(--b-2) var(--b-3);
    }

    .karsilastir-tablo thead th {
        padding: var(--b-3);
    }

    .karsilastir-fiyat b {
        font-size: var(--t-lg);
    }

    .karsilastir-eylem .otocars-btn {
        width: 100%;
    }
}

/* Yazdırma: yalnız tablo; yapışkanlık, kaydırma ve eylemler kalkar. */
@media print {
    .karsilastir-farklar,
    .karsilastir-eylem,
    .karsilastir-not {
        display: none;
    }

    .karsilastir-kabi {
        overflow: visible;
        border: 0;
    }

    .karsilastir-tablo {
        width: 100%;
    }

    .karsilastir-tablo .karsilastir-etiket {
        position: relative;
    }
}