/* 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; }
}