/* ============================================================
   SYNERGY OS — avatar_builder.css
   Katmanlı avatar giydirme editörü.
   Oyunun koyu paletiyle uyumlu; renkler mevcut değişkenlerden türer.
   ============================================================ */

.avb-root { --avb-line: rgba(255,255,255,0.08);
            --avb-bg:   rgba(255,255,255,0.03);
            --avb-bg-2: rgba(255,255,255,0.06);
            --avb-accent: #7b5cfa;
            --avb-text: #e2e8f0;
            --avb-muted: #94a3b8; }

.avb-wrap {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Önizleme ── */
.avb-preview-col { display: flex; flex-direction: column; gap: 10px; }

.avb-preview {
  width: 100%;
  aspect-ratio: 100 / 120;      /* katalog canvas oranıyla birebir */
  background: var(--avb-bg);
  border: 1px solid var(--avb-line);
  border-radius: 16px;
}

.avb-preview-actions { display: flex; gap: 8px; }

.avb-btn {
  flex: 1;
  padding: 7px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--avb-text);
  background: var(--avb-bg-2);
  border: 1px solid var(--avb-line);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.avb-btn:hover { background: rgba(123,92,250,0.16); border-color: rgba(123,92,250,0.4); }

.avb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.avb-presets-title {
  width: 100%; font-size: 0.62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--avb-muted); margin-bottom: 2px;
}
.avb-preset {
  padding: 5px 10px; font-size: 0.68rem; font-weight: 600;
  color: var(--avb-text); background: var(--avb-bg-2);
  border: 1px solid var(--avb-line); border-radius: 999px; cursor: pointer;
}
.avb-preset:hover { border-color: rgba(123,92,250,0.5); color: #fff; }

/* ── Yuva sekmeleri ── */
.avb-editor-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.avb-slot-tabs {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-bottom: 10px; border-bottom: 1px solid var(--avb-line);
}
.avb-tab {
  padding: 5px 11px; font-size: 0.68rem; font-weight: 600;
  color: var(--avb-muted); background: transparent;
  border: 1px solid var(--avb-line); border-radius: 999px; cursor: pointer;
  transition: all .15s;
}
.avb-tab:hover { color: var(--avb-text); }
.avb-tab.active {
  color: #fff; background: rgba(123,92,250,0.18);
  border-color: rgba(123,92,250,0.55);
}

/* ── Parça ızgarası ── */
.avb-part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.avb-part {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px;
  background: var(--avb-bg);
  border: 1px solid var(--avb-line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}
.avb-part:hover { background: var(--avb-bg-2); border-color: rgba(123,92,250,0.4); }
.avb-part.active {
  border-color: var(--avb-accent);
  box-shadow: 0 0 0 1px var(--avb-accent) inset, 0 0 14px rgba(123,92,250,0.25);
}
.avb-part-thumb {
  width: 100%; aspect-ratio: 100 / 120; display: block;
  background: rgba(0,0,0,0.22); border-radius: 8px;
}
.avb-part-label {
  font-size: 0.58rem; font-weight: 600; color: var(--avb-muted);
  text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.avb-part.active .avb-part-label { color: #fff; }

/* ── Renk paletleri ── */
.avb-colors { display: flex; flex-direction: column; gap: 8px; }
.avb-color-row { display: flex; flex-direction: column; gap: 5px; }
.avb-color-label {
  font-size: 0.62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--avb-muted);
}
.avb-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.avb-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.14);
  cursor: pointer; padding: 0;
  transition: transform .12s, border-color .12s;
}
.avb-swatch:hover { transform: scale(1.12); }
.avb-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--avb-accent);
}

/* ── Dar ekran ── */
@media (max-width: 640px) {
  .avb-wrap { grid-template-columns: 1fr; }
  .avb-preview { max-width: 190px; margin: 0 auto; }
  .avb-preview-actions, .avb-presets { justify-content: center; }
  .avb-part-grid { max-height: 210px; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}