.sd-ust {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.sd-siniflar { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-siniflar button {
  background: var(--ucuz-dark); color: #9aa5b4; cursor: pointer;
  border: 1px solid var(--ucuz-border); border-radius: 8px;
  padding: 7px 14px; font-size: .85rem; font-weight: 600; line-height: 1;
  transition: border-color .12s, color .12s, background .12s;
}
.sd-siniflar button:hover { color: var(--ucuz-metin); border-color: var(--ucuz-sonuk3); }
.sd-siniflar button.is-aktif {
  background: rgba(212,175,55,.12); border-color: var(--ucuz-gold); color: var(--ucuz-gold);
}
.sd-level { width: 96px; }
.sd-dugmeler { display: flex; gap: 6px; margin-left: auto; }

.sd-uyari {
  color: #f0b04a; font-size: .82rem; line-height: 1.5;
  background: rgba(240,176,74,.08); border: 1px solid rgba(240,176,74,.3);
  border-radius: 8px; padding: 8px 12px;
}

.sd-agaclar {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.sd-agac {
  background: var(--ucuz-card); border: 1px solid var(--ucuz-border);
  border-radius: 12px; padding: 12px; display: flex; flex-direction: column;
}
.sd-agac.is-dolu { border-color: rgba(212,175,55,.45); }
.sd-agac .agac-baslik {
  font-size: .95rem; font-weight: 700; margin: 0; color: var(--ucuz-metin);
  display: flex; align-items: baseline; gap: 6px;
}
.sd-agac .agac-baslik .konan { margin-left: auto; font-size: .82rem; color: var(--ucuz-gold); font-variant-numeric: tabular-nums; }
.sd-agac .agac-not { color: #7a8592; font-size: .72rem; line-height: 1.4; margin: 3px 0 0; min-height: 20px; }

.sd-kontrol { display: flex; align-items: center; gap: 6px; margin: 9px 0 4px; }
.sd-kontrol button {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; cursor: pointer;
  background: var(--ucuz-dark); border: 1px solid var(--ucuz-border); color: #9aa5b4;
  font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sd-kontrol button:hover:not(:disabled) { color: var(--ucuz-metin); border-color: var(--ucuz-sonuk3); }
.sd-kontrol button:disabled { opacity: .35; cursor: default; }
.sd-kontrol input[type=number] {
  width: 62px; text-align: center; padding: 4px 2px; font-variant-numeric: tabular-nums;
}
.sd-kontrol input[type=range] { flex: 1 1 auto; accent-color: var(--ucuz-gold); min-width: 60px; }

.sd-liste { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.sd-satir {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent; text-align: left; background: none; width: 100%;
}
.sd-satir:hover { background: rgba(255,255,255,.04); border-color: var(--ucuz-border); }
.sd-satir .skill-ikon { width: 26px; height: 26px; flex: 0 0 26px; }
.sd-satir .sd-ad { font-size: .8rem; color: var(--ucuz-sonuk2); flex: 1 1 auto; min-width: 0; }
.sd-satir .sd-ad b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-satir .sd-puan {
  font-size: .74rem; color: var(--ucuz-sonuk2); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.sd-satir.is-acik .sd-ad { color: var(--ucuz-metin); }
.sd-satir.is-acik .sd-puan { color: var(--ucuz-green); }
.sd-satir.is-acik .skill-ikon { box-shadow: 0 0 0 1px rgba(126,211,133,.5); }
.sd-satir:not(.is-acik) .skill-ikon { filter: grayscale(1) brightness(.5); }
.sd-satir.is-levelsiz .sd-puan { color: #d06565; }

.sd-rozet-ust {
  font-size: .62rem; padding: 1px 4px; border-radius: 4px; vertical-align: middle;
  background: rgba(122,162,247,.14); color: var(--ucuz-info); border: 1px solid rgba(122,162,247,.3);
}

.sd-acilan { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-acilan .sd-cip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px;
  background: var(--ucuz-dark); border: 1px solid var(--ucuz-border);
  border-radius: 8px; font-size: .76rem; color: #cdd4de;
}
.sd-acilan .skill-ikon { width: 22px; height: 22px; border-radius: 5px; }
.sd-acilan .sd-bos { color: var(--ucuz-sonuk2); font-size: .84rem; }

@media (max-width: 575px) {
  .sd-dugmeler { margin-left: 0; width: 100%; }
  .sd-agaclar { grid-template-columns: 1fr; }
}