/* Vade'ye özgü bileşenler — kmp token'ları + Bootstrap değişkenleri (açık/koyu tema) */
.tabular-nums { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }

/* Yaşlandırma yatay çubukları */
.vade-bars { display: grid; gap: .65rem; }
.vade-bar { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: .75rem; font-size: .875rem; }
.vade-bar__label { color: var(--bs-secondary-color); }
.vade-bar__track { height: .7rem; background: var(--bs-tertiary-bg); border-radius: 999px; overflow: hidden; }
.vade-bar__fill { height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.vade-bar__fill.is-ok { background: var(--bs-success); }
.vade-bar__fill.is-1 { background: #f59e0b; }
.vade-bar__fill.is-2 { background: #f97316; }
.vade-bar__fill.is-3 { background: #ef4444; }
.vade-bar__fill.is-4 { background: #b91c1c; }
.vade-bar__value { text-align: right; font-weight: 600; }

/* DSO sütunları */
.vade-cols { display: flex; align-items: flex-end; gap: .4rem; height: 190px; }
.vade-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.vade-col__value { font-size: .72rem; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.vade-col__track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--bs-tertiary-bg); border-radius: .4rem; overflow: hidden; }
.vade-col__fill { width: 100%; background: linear-gradient(180deg, var(--kmp-primary, #4f46e5), color-mix(in srgb, var(--kmp-primary, #4f46e5) 60%, transparent)); border-radius: .4rem .4rem 0 0; transition: height .4s cubic-bezier(.4,0,.2,1); }
.vade-col__label { font-size: .68rem; color: var(--bs-secondary-color); margin-top: .25rem; white-space: nowrap; }

/* Mesaj önizleme */
.vade-mail-frame { width: 100%; height: 420px; border: 1px solid var(--bs-border-color); border-radius: var(--kmp-radius-md, .625rem); background: #f4f5f7; }
.vade-wa-balon { white-space: pre-wrap; background: #dcf8c6; color: #111; border-radius: .9rem .9rem .9rem .2rem; padding: .8rem 1rem; max-width: 520px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: .9rem; }
.vade-kademe input[type=number] { max-width: 100px; }

/* Portal */
.vade-portal { min-height: 100vh; background:
    radial-gradient(1200px 400px at 10% -10%, color-mix(in srgb, var(--kmp-primary, #4f46e5) 12%, transparent), transparent),
    var(--bs-body-bg); }

@media (max-width: 575.98px) {
    .vade-bar { grid-template-columns: 80px 1fr 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .vade-bar__fill, .vade-col__fill { transition: none; }
}


/* ── Ödeme yönü (0.2.0) ── */
/* Sihirbaz: kart yüksekliği doldurur, adım gövdesi esner (dock-fill zinciri), ızgara adımı kalan alanı alır. */
.vade-sihirbaz .kmp-steps-wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Kart zaten dock-fill (sabit yükseklik) → pasif adım yer kaplamaz; etkin adım kalan alanı doldurur, kaydırma içeride. */
/* contain:size → adım içeriği (uzun liste/ızgara) sayfayı uzatmaz; yükseklik dock zincirinden gelir, kaydırma adımın içinde. */
.vade-sihirbaz .kmp-steps-body { flex: 1 1 auto; min-height: 380px; margin-top: 1rem; display: flex; flex-direction: column; contain: size; }
.vade-sihirbaz .kmp-step-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.vade-sihirbaz .kmp-step-pane.kmp-tab-off { display: none; }
.vade-adim-grid { flex: 1 1 auto; min-height: 340px; display: flex; flex-direction: column; }
.vade-adim-grid > .kmp-grid--fill, .vade-adim-grid .kmp-tabstack-pane > .kmp-grid--fill { flex: 1 1 auto; min-height: 0; height: auto; }
.vade-adim-grid.kmp-tabstack > .kmp-tabstack-pane { min-height: 0; }
.vade-bulgular .list-group-item { transition: background-color .15s cubic-bezier(.4,0,.2,1); }
.vade-bulgular .list-group-item:hover { background: var(--bs-tertiary-bg); }
.min-h-0 { min-height: 0; }

/* Nakit akışı çubukları */
.vade-nakit__bar { height: .45rem; background: var(--bs-tertiary-bg); border-radius: 999px; overflow: hidden; }
.vade-nakit__in, .vade-nakit__out { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.vade-nakit__in { background: var(--bs-success); }
.vade-nakit__out { background: var(--bs-danger); }
@media (prefers-reduced-motion: reduce) { .vade-nakit__in, .vade-nakit__out { transition: none; } }