/* ── Rozet yigini (js/rozet.js, mobil RozetYigini ikizi) ──
   gece-maci.css'ten SONRA yuklenir; renkler yalniz rollerden.
   Olculer mobille ayni: halka 1.5px (kart renginde), bindirme 7px,
   yelek kosesi = boyut x oran (gece .3, gunduz .4 — mobil yelekYaricapOran),
   +N cipi 26px (10 ve ustu 30px). */
.rozet-yigin {
  --rozet-boyut: 20px;
  --rozet-halka: 1.5px;
  --rozet-bindirme: 7px;
  --rozet-oran: .3;
  display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0;
}
:root[data-theme="light"] .rozet-yigin { --rozet-oran: .4; }

.rozet-halka {
  position: relative; display: inline-flex; padding: var(--rozet-halka);
  background: var(--kart);
  border-radius: calc(var(--rozet-boyut) * var(--rozet-oran) + var(--rozet-halka));
}
.rozet-halka + .rozet-halka { margin-left: calc(var(--rozet-bindirme) * -1); }

.rozet-yigin .yelek.rozet-yelek {
  width: var(--rozet-boyut); height: var(--rozet-boyut);
  border-radius: calc(var(--rozet-boyut) * var(--rozet-oran));
  font-size: calc(var(--rozet-boyut) * .42); letter-spacing: 0;
}

.rozet-halka.rozet-fazla-halka { border-radius: 999px; }
.rozet-fazla {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: var(--rozet-boyut); border-radius: 999px;
  background: var(--yuzey2); color: var(--ink); font-size: 10.5px;
}
.rozet-fazla.genis { width: 30px; }