.oi-kart, .oi {
  --oi-ana: var(--ucuz-metin);
  --oi-el: #87e680; --oi-bonus: #adff2f; --oi-yet: #5dd2e6;
  --oi-u: #dcc77c; --oi-ru: #ff84a6; --oi-rq: #ffae4d; --oi-up: #c87cc7; --oi-n: var(--ucuz-metin);
}
:root[data-bs-theme="light"] :is(.oi-kart, .oi) {
  --oi-el: #2e7a2a; --oi-bonus: #3d7a12; --oi-yet: #0f7f93;
  --oi-u: #7a6a24; --oi-ru: #b8456b; --oi-rq: #9a5f14; --oi-up: #7d4f80;
}
.oi-d-u { --oi-derece: var(--oi-u); }
.oi-d-ru { --oi-derece: var(--oi-ru); }
.oi-d-rq { --oi-derece: var(--oi-rq); }
.oi-d-up { --oi-derece: var(--oi-up); }
.oi-d-n { --oi-derece: var(--oi-n); }

.oi-kart .iv-ad a, .oi-kart .iv-ad > span { color: var(--oi-derece, var(--ucuz-metin)); }
.oi-kart .iv-sag.is-derece { color: var(--oi-derece, var(--ucuz-metin)); }

.oi-parca { display: grid; align-content: start; min-width: 0; }
.oi-parca + .oi-parca { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ucuz-border); }
.oi-s {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(var(--px) * 14); font-weight: 400; line-height: 1.8;
  font-variant-numeric: tabular-nums; color: var(--oi-ana);
}
.oi-s.is-orta { text-align: center; }
.oi-s--e { color: var(--oi-el); }
.oi-s--o { color: var(--oi-bonus); }
.oi-s--a { color: var(--oi-yet); }
.oi-s--g { color: var(--oi-derece, var(--oi-ana)); }
.oi-bos { font-size: calc(var(--px) * 14); line-height: 1.8; color: var(--ucuz-sonuk); }