/*
 * Araç detayı "Tahmini toplam maliyet" kutusu (Views/Ihale/Partials/_MaliyetKutusu).
 * Paneldeki ikincil yüzey: açık zemin, ince kenar; toplam satırı kalınlıkla öne çıkar.
 * Tutarlar tabular rakam (canlı fiyat değişince js/maliyet-kutusu.js metni yeniler).
 */

.maliyet-kutusu {
    margin: 0 0 var(--b-4);
    padding: var(--b-3) var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-ikincil);
}

.maliyet-kutusu h2 {
    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);
}

.maliyet-kutusu dl {
    margin: 0;
}

.maliyet-kutusu dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--b-3);
    padding: var(--b-1) 0;
    font-size: var(--t-sm);
}

.maliyet-kutusu dt {
    color: var(--renk-metin-ikincil);
    font-weight: var(--t-normal);
}

.maliyet-kutusu dd {
    margin: 0;
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--t-sayi);
    text-align: right;
}

.maliyet-kutusu .toplam {
    margin-top: var(--b-1);
    padding-top: var(--b-2);
    border-top: var(--kenar-guclu);
    font-size: var(--t-md);
}

.maliyet-kutusu .toplam dt,
.maliyet-kutusu .toplam dd {
    color: var(--renk-metin);
    font-weight: var(--t-kalin);
}

.maliyet-kutusu .maliyet-not {
    margin: var(--b-2) 0 0;
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    line-height: var(--t-satir-govde);
}

.maliyet-kutusu .maliyet-not a {
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    text-decoration: underline;
    text-underline-offset: 2px;
}