/* ===== Avatar seçimi — js/AvatarSecim.js + koleksiyon profil kartı (2026-09-04) =====
   Overlay/kart iskeleti `gorev.css`/`magaza.css` ile aynı ailedendir; `:root` token'ları style.css'ten
   (--bg-card · --frame-wood · --ink · --shadow-soft). Halka rengi = çerçeve türü (Unity Bg_Mask):
   duz #ffffff · altin #FAC738 · elmas #29D1C7 · ilerleme #CC8540 — JS `--av-renk` ile yazar. */

.av-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(38, 22, 10, 0.55);
  opacity: 0; transition: opacity .2s ease;
  overflow-y: auto;
}
.av-overlay.av-acik { opacity: 1; }
/* `hidden` gizlemesi TEK YASA'dan gelir: style.css `[hidden]{display:none !important}` — buraya KOPYA yazma. */

.av-kart {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 22px 20px 16px; border-radius: 24px;
  background: var(--bg-card, #fdf6e6);
  border: 3px solid var(--frame-wood, #c08652);
  box-shadow: 0 14px 40px rgba(38, 22, 10, 0.35);
  transform: translateY(10px); transition: transform .2s ease;
}
.av-acik .av-kart { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .av-overlay, .av-kart, .av-btn-onay { transition: none; animation: none; } }

.av-kart h3 {
  margin: 0 0 10px; text-align: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.45rem;
  color: var(--ink, #3a2415);
}
.av-kapat {
  position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; line-height: 1;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(58, 36, 21, 0.08); color: var(--ink, #3a2415);
  font-size: 1.5rem; font-family: 'Fredoka', sans-serif;
}
.av-kapat:hover { background: rgba(58, 36, 21, 0.16); }

.av-bakiye { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.av-bk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 999px; background: rgba(58, 36, 21, 0.07);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* 2 sütun × 5 kart; dar ekranda tek sütun */
.av-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .av-izgara { grid-template-columns: 1fr; } }

.av-avatar {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 18px; background: #fff;
  box-shadow: var(--shadow-soft, 0 3px 9px rgba(58,36,21,0.14));
  font-family: 'Fredoka', sans-serif; color: var(--ink, #3a2415);
}
/* Halka: dolgu rengi çerçeve türü; iç boşluk görselin etrafında renkli şerit bırakır */
.av-halka {
  --av-renk: #ffffff;
  flex: none; width: 68px; height: 68px; padding: 4px; border-radius: 50%;
  background: var(--av-renk);
  box-shadow: 0 0 0 2px rgba(58, 36, 21, 0.18), 0 2px 6px rgba(58, 36, 21, 0.18);
}
.av-gorsel {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; background: #fdf6e6;
}
.av-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.av-ad { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-etiket { font-size: .8rem; font-weight: 600; opacity: .75; }
.av-etiket-secili { color: #2f7d26; opacity: 1; }
.av-etiket-kilit { opacity: .85; }
.av-fiyat {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.av-soru { font-size: .8rem; font-weight: 600; color: #a35d1f; line-height: 1.3; }
.av-btn { align-self: flex-start; padding: 6px 14px; font-size: .86rem; }
.av-btn-onay { animation: av-nabiz .9s ease-in-out infinite alternate; }
@keyframes av-nabiz { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Durumlar — renk TEK sinyal değil: etiket metni (✅ / 🔒) ve buton da ayırır */
.av-secili { box-shadow: inset 0 0 0 3px #4c9c3f, var(--shadow-soft, 0 3px 9px rgba(58,36,21,0.14)); }
.av-onayda { box-shadow: inset 0 0 0 3px #e0a03a, var(--shadow-soft, 0 3px 9px rgba(58,36,21,0.14)); }
.av-kilit { opacity: .78; }
.av-kilit .av-halka { filter: grayscale(.55); }
.av-bar { height: 7px; border-radius: 999px; background: rgba(58,36,21,0.14); overflow: hidden; }
.av-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f0a835, #e0752d); }

.av-durum { min-height: 1.3em; margin: 12px 0 0; text-align: center; font-weight: 600; font-size: .9rem; }
.av-durum-ok { color: #2f7d26; }
.av-durum-hata { color: #c0562d; }

/* ── KOLEKSİYON PROFİL KARTI (İstatistik › Oyuncu) — avatar + halka + "Avatarını seç" ── */
.av-profil { display: flex; align-items: center; gap: 14px; padding: 4px 2px 12px; }
.av-profil .av-halka { width: 76px; height: 76px; }
.av-profil-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.av-profil-ad { font-weight: 700; font-size: 15px; color: var(--ink, #3a2415); }
.av-profil-btn { align-self: flex-start; padding: 7px 16px; font-size: .88rem; }
@media (max-width: 480px) {
  .av-profil { flex-wrap: wrap; }
}

/* ===== Canlı Avatar tanıtımı (2026-09-29) — büyüteç + sahne. Unity AvatarTanitimPaneli aynası ===== */
/* Zeminsiz büyüteç (kullanıcı 2026-09-29) — yalnız ikon, kartın sağ üstünde. */
.av-buyutec {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px;
  border: none; border-radius: 50%; cursor: pointer; padding: 0;
  background: transparent; font-size: 1.35rem; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(13, 8, 5, 0.25));
}
.av-buyutec:hover, .av-buyutec:focus-visible { transform: scale(1.08); }

.av-tanitim {
  position: fixed; inset: 0; z-index: 1250;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(13, 8, 5, 0.72);
}
.av-tanitim-kart {
  position: relative; width: 100%; max-width: 520px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 22px 20px 18px; border-radius: 24px;
  background: #FFF7E2; border: 3px solid var(--frame-wood, #c08652);
  box-shadow: 0 14px 40px rgba(38, 22, 10, 0.45);
  font-family: 'Fredoka', sans-serif; color: #0D0805; text-align: center;
}
.av-tanitim-kart h3 { margin: 0 0 6px; font-weight: 700; font-size: 1.6rem; }
.av-tanitim-sahne {
  position: relative; margin: 4px auto 0; width: min(100%, 440px);
  background: radial-gradient(ellipse 60% 9% at 50% 93%, rgba(140, 107, 64, 0.22), transparent 70%);
}
.av-tanitim-karakter {
  width: 100%; aspect-ratio: 353 / 320;
  background-repeat: no-repeat; background-position: center bottom; background-size: contain;
}
.av-tanitim-dugmeler { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.av-tanitim-tekrar { background: #2C8A3C; color: #fff; }
@media (prefers-reduced-motion: reduce) { .av-buyutec:hover { transform: none; } }