.kutu-secici {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.kutu-kart {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ucuz-border);
  border-radius: 10px;
  background: var(--ucuz-dark);
  cursor: pointer;
  text-align: left;
  transition: .13s;
}
.kutu-kart:hover { border-color: #46536a; }
.kutu-kart.secili { border-color: var(--ucuz-gold); background: rgba(234, 179, 8, .08); }
.kutu-kart .gv { min-width: 0; }
.kutu-kart .ad {
  display: block; font-size: .82rem; font-weight: 700; color: var(--ucuz-metin);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kutu-kart .alt { display: block; font-size: .72rem; color: var(--ucuz-sonuk); }

.kikon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--ucuz-border);
  background-image: url('/img/kutu-atlas.png');
  background-image: image-set(url('/img/kutu-atlas.webp') type('image/webp'), url('/img/kutu-atlas.png') type('image/png'));
  background-repeat: no-repeat;
}
.kikon.is-kucuk { width: 30px; height: 30px; }
.kikon.is-bos { background-image: none; background: rgba(255, 255, 255, .03); }

.nadir-sik   { color: var(--ucuz-green); }
.nadir-orta  { color: var(--ucuz-metin); }
.nadir-az    { color: var(--ucuz-info); }
.nadir-nadir { color: #c084fc; }
.nadir-efsane { color: var(--ucuz-gold); font-weight: 700; }

.sans-cubuk {
  height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07);
  overflow: hidden; margin-top: 4px;
}
.sans-cubuk i { display: block; height: 100%; background: var(--ucuz-gold); border-radius: 3px; }

.kutu-liste { max-height: 70vh; overflow: auto; }