/* BMT Melati - Nisbah & Simulasi Bagi Hasil (Material Design 3; token dari melati-material.php) */
.bmts { --p: var(--accent, #E02E0B); --pc: var(--md-primary-container, #FFDCC9); --on-pc: var(--md-on-primary-container, #3E1200); --navy: var(--md-navy, #1B2A49);
	--s: var(--base-3, #fff); --on-s: var(--contrast, #1d1d22); --on-sv: var(--contrast-2, #50505a); --ol: #7a7f8a; --olv: var(--md-outline-variant, #e4ddd7);
	max-width: 760px; margin: 0 auto 2rem; color: var(--on-s); }
html[data-theme="dark"] .bmts { --ol: #8b8f9a; }
.bmts *, .bmts *::before, .bmts *::after { box-sizing: border-box; }
.bmts [hidden] { display: none !important; }
.bmts-card { padding: 16px; background: var(--s); border-radius: 16px; box-shadow: var(--md-elev-1, 0 1px 3px rgba(0,0,0,.15)); }
.bmts-empty { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--pc); color: var(--on-pc); }
.bmts-noscript { padding: 12px 16px; margin-bottom: 12px; border-radius: 12px; background: var(--pc); color: var(--on-pc); }

/* kepala: tab + info berlaku */
.bmts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.bmts-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--olv) 55%, transparent); }
.bmts .bmts-tab { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--on-sv); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s; }
.bmts .bmts-tab[aria-selected="true"] { background: var(--s); color: var(--on-s); box-shadow: var(--md-elev-1, 0 1px 2px rgba(0,0,0,.2)); }
.bmts .bmts-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 55%, transparent); outline-offset: 2px; }
.bmts-meta { display: inline-flex; align-items: center; gap: 4px; }
.bmts-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; font-size: .8125rem; font-weight: 600; background: var(--pc); color: var(--on-pc); }

/* daftar baris (nisbah & simulasi) */
.bmts-list { list-style: none; margin: 0; padding: 0; }
.bmts-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 6px 16px; padding: 14px 4px; border-top: 1px solid var(--olv); }
.bmts-row:first-child { border-top: 0; }
.bmts-term { font-weight: 600; color: var(--navy); white-space: nowrap; }
.bmts-nis { min-width: 0; }
.bmts-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--navy) 22%, transparent); overflow: hidden; }
.bmts-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #059669, #34D399); }
html[data-theme="dark"] .bmts-bar > i { background: linear-gradient(90deg, #10B981, #6EE7B7); }
.bmts-nl { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: .75rem; color: var(--on-sv); }
.bmts-amt { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--navy); }
.bmts-amt small { margin-left: 2px; font-size: .75rem; font-weight: 500; color: var(--on-sv); }
.bmts-note { margin: 8px 4px 0; font-size: .8125rem; color: var(--on-sv); }

/* simulasi */
.bmts-tf { position: relative; }
.bmts .bmts-tf input[type="text"] { display: block; width: 100%; height: 56px; padding: 18px 16px 0 44px; line-height: 36px; font: inherit; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--on-s); background: transparent; border: 1px solid var(--ol); border-radius: 8px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.bmts .bmts-tf input[type="text"]:hover { border-color: var(--on-s); }
.bmts .bmts-tf input[type="text"]:focus { border-color: var(--p); box-shadow: 0 0 0 1px var(--p); }
.bmts-prefix { position: absolute; left: 16px; top: 19px; height: 36px; display: flex; align-items: center; font: inherit; font-size: 1.125rem; line-height: 1; font-weight: 500; color: var(--on-sv); pointer-events: none; }
.bmts-tf label { position: absolute; left: 12px; top: 6px; padding: 0 4px; font-size: .75rem; line-height: 16px; color: var(--on-sv); background: var(--s); pointer-events: none; }
.bmts-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.bmts .bmts-pre { min-height: 40px; padding: 0 16px; border: 1px solid var(--ol); border-radius: 8px; background: transparent; color: var(--on-s); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
.bmts .bmts-pre:hover { background: var(--md-surface-tint, rgba(0,0,0,.06)); }
.bmts .bmts-pre[aria-pressed="true"] { background: var(--pc); color: var(--on-pc); border-color: var(--p); }
.bmts .bmts-pre:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 55%, transparent); outline-offset: 2px; }
.bmts-sim .bmts-row { grid-template-columns: 84px 1fr 1fr auto; }
.bmts-sim .bmts-cell { display: flex; flex-direction: column; min-width: 0; }
.bmts-sim .bmts-cell b { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bmts-sim .bmts-cell span { font-size: .75rem; color: var(--on-sv); }
.bmts-sim .bmts-total b { color: var(--navy); }
.bmts-sim .bmts-pct { text-align: right; font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--on-sv); white-space: nowrap; }

/* tooltip */
.bmts-tip { position: relative; display: inline-flex; }
.bmts .bmts-tipbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-sv); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bmts .bmts-tipbtn svg { width: 20px; height: 20px; fill: currentColor; }
.bmts .bmts-tipbtn:hover { background: var(--md-surface-tint, rgba(0,0,0,.06)); }
.bmts .bmts-tipbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 55%, transparent); }
.bmts-tipbox { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; width: max-content; max-width: min(280px, 78vw); padding: 8px 12px; border-radius: 8px; background: #2f3033; color: #f1f0f4; font-size: .8125rem; font-weight: 400; line-height: 1.35; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none; }
html[data-theme="dark"] .bmts-tipbox { background: #e3e2e6; color: #1b1b1f; }
.bmts-tip:hover .bmts-tipbox, .bmts-tipbtn:focus-visible + .bmts-tipbox, .bmts-tip.open .bmts-tipbox { opacity: 1; visibility: visible; transform: none; }

/* HP: baris menumpuk agar teks tidak terjepit */
@media (max-width: 560px) {
	.bmts-card { padding: 12px; }
	.bmts-head { flex-direction: column; align-items: stretch; }
	.bmts-tabs { display: flex; } .bmts .bmts-tab { flex: 1; }
	.bmts-meta { justify-content: space-between; }
	.bmts-row { grid-template-columns: 1fr auto; padding: 12px 2px; }
	.bmts-nis { grid-column: 1 / -1; grid-row: 2; }
	.bmts-sim .bmts-row { grid-template-columns: 1fr auto; }
	.bmts-sim .bmts-cell.bmts-pm { grid-row: 2; }
	.bmts-sim .bmts-cell.bmts-total { grid-row: 1; grid-column: 2; text-align: right; align-items: flex-end; }
	.bmts-sim .bmts-term { grid-row: 1; grid-column: 1; }
	.bmts-sim .bmts-pct { grid-row: 2; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .bmts * { transition: none !important; } }