/*
 * Hizmet bedeli (/hizmet-bedeli) — yalnızca bu sayfada yüklenir. Kart görünümü
 * bilesenler/kurumsal-menu.css'te, tablo (.tablo-kabi/.tablo) site.css'te, form öğeleri form.css'te.
 * Akış: giriş → tarife tablosu → diğer kalemler → hesaplayıcı → örnekler. Bölüm başlıkları H2.
 */

.hizmet-bedeli {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-4);
}

.hizmet-giris {
    max-width: 60ch;
    margin: 0 0 var(--b-1);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
    line-height: var(--t-satir-govde);
}

.hizmet-giris strong {
    color: var(--renk-metin);
}

.hizmet-bedeli h2 {
    margin: 0 0 var(--b-3);
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-xl);
    font-weight: var(--t-kalin);
}

.hizmet-not {
    margin: var(--b-3) 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.hizmet-bedeli h2 + .hizmet-not {
    margin-top: 0;
}

.hizmet-not + .tablo-kabi {
    margin-top: var(--b-4);
}

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

/* Tablo: ortak .tablo; tutarlar tabular. */
.hizmet-tablo td,
.hizmet-tablo tbody th {
    font-variant-numeric: tabular-nums;
}

.hizmet-tablo tbody th {
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    white-space: nowrap;
}

.hizmet-kalemler {
    display: grid;
    gap: var(--b-3);
    margin: 0;
}

.hizmet-kalemler > div {
    padding-bottom: var(--b-3);
    border-bottom: var(--kenar);
}

.hizmet-kalemler > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hizmet-kalemler dt {
    color: var(--renk-metin);
    font-size: var(--t-md);
    font-weight: var(--t-orta);
}

.hizmet-kalemler dd {
    margin: 2px 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

/* Hesaplayıcı */
.hizmet-form {
    display: flex;
    flex-direction: column;
    gap: var(--form-etiket-arasi);
}

.hizmet-form-satir {
    display: flex;
    gap: var(--b-2);
    max-width: 460px;
}

.hizmet-form-satir .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.hizmet-form-satir .otocars-btn {
    flex-shrink: 0;
    min-height: var(--form-yukseklik);
}

.hizmet-hata {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--renk-hata);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
}

.hizmet-hata::before {
    content: "\f332";                 /* bootstrap-icons: exclamation-circle-fill */
    flex: none;
    font-family: bootstrap-icons;
    font-weight: var(--t-normal);
}

.hizmet-sonuc {
    max-width: 460px;
    margin: var(--b-5) 0 0;
    padding: var(--b-3) var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-ikincil);
}

.hizmet-sonuc > div {
    display: flex;
    justify-content: space-between;
    gap: var(--b-4);
    padding: var(--b-2) 0;
    border-bottom: var(--kenar);
    font-size: var(--t-md);
}

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

.hizmet-sonuc dd {
    margin: 0;
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
}

.hizmet-sonuc .toplam {
    border-bottom: 0;
    font-size: var(--t-lg);
}

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

@media (max-width: 767.98px) {
    .hizmet-giris {
        font-size: var(--t-md);
    }

    .hizmet-form-satir {
        flex-direction: column;
        max-width: none;
    }
}