/* ═══════════════════════════════════════════════════════════════════
   TEMA SEÇİCİ — sağ üst "TEMALAR" düğmesi + panel
   ------------------------------------------------------------------
   KULLANICI: "sağ üste Temalar diye seçenek ekle: toz pembe, siyah,
   bej, bordo ve koyu yeşil — estetik şekilde düzenle, entegre et,
   isteyen istediğini kullansın."

   YERLEŞİM: .ust__sar içinde, aramanın sağında. Dar ekranda alta
   iner, tam genişlik olur.

   PANEL: her tema bir RENK ÖRNEĞİ (üç renkli şerit) + ad ile
   listelenir. Seçili olan işaretli. Renk körlüğü için yalnız renge
   değil ADA ve ✓ işaretine de bakılır.

   ERİŞİLEBİLİRLİK: role="radiogroup", her öğe role="radio" +
   aria-checked. Ok tuşları + Esc + dışına tıklama desteklenir.
   ═══════════════════════════════════════════════════════════════════ */

.tm{
  position:relative;
  flex:none;
}

/* ── DÜĞME ──────────────────────────────────────────────────────── */
.tm__b{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 15px;
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  background:color-mix(in srgb,var(--void-2) 62%,transparent);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:border-color .35s var(--ease),color .35s var(--ease),
             background .35s var(--ease);
}
.tm__b svg{width:14px;height:14px;flex:none}
/* düğmenin kendisi de seçili temayı gösterir: küçük renk noktası */
.tm__nokta{
  width:10px;height:10px;flex:none;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:var(--tm-ornek,var(--gold));
}
.tm__b:hover{
  color:var(--gold-hi);
  border-color:color-mix(in srgb,var(--gold) 62%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,transparent);
}
.tm__b[aria-expanded="true"]{
  color:var(--gold);
  border-color:color-mix(in srgb,var(--gold) 72%,transparent);
  background:color-mix(in srgb,var(--gold) 11%,transparent);
}
.tm__b:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ── PANEL ──────────────────────────────────────────────────────── */
.tm__p{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:236px;
  padding:7px;
  background:color-mix(in srgb,var(--void) 97%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  box-shadow:0 24px 58px -22px rgba(0,0,0,.95);
  z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),
             visibility .22s;
}
.tm.acik .tm__p{opacity:1;visibility:visible;transform:translateY(0)}

/* ── TEMA SATIRI ────────────────────────────────────────────────── */
.tm__o{
  display:flex;align-items:center;gap:11px;
  width:100%;
  padding:9px 10px;
  border:1px solid transparent;
  background:none;
  color:var(--muted);
  font-family:inherit;
  font-size:11.5px;letter-spacing:.04em;
  text-align:left;
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
}
.tm__o:hover{
  color:var(--ink);
  background:color-mix(in srgb,var(--gold) 7%,transparent);
}
.tm__o:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

/* RENK ÖRNEĞİ: temanın 3 ana rengi yan yana — seçmeden önce görülür */
.tm__ornek{
  display:flex;flex:none;
  width:42px;height:24px;
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  overflow:hidden;
}
.tm__ornek i{flex:1}

.tm__ad{flex:1;min-width:0}
.tm__ad small{
  display:block;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin-top:2px;
}
/* seçili işareti — yalnız renge güvenilmesin */
.tm__tik{
  flex:none;width:15px;height:15px;opacity:0;
  color:var(--gold);
}
.tm__o[aria-checked="true"]{
  color:var(--ink);
  border-color:color-mix(in srgb,var(--gold) 34%,transparent);
  background:color-mix(in srgb,var(--gold) 9%,transparent);
}
.tm__o[aria-checked="true"] .tm__tik{opacity:1}

/* ── dar ekran: düğme metni kısalır, panel tam genişlik ────────── */
@media (max-width:760px){
  .tm__p{min-width:0;width:min(280px,84vw)}
}
@media (max-width:520px){
  .tm{width:100%}
  .tm__b{width:100%;justify-content:center}
  .tm__p{right:0;left:0;width:auto}
}

@media (prefers-reduced-motion:reduce){
  .tm__b,.tm__p,.tm__o{transition:none}
}

/* ── ÜST ŞERİT YUVASI ──────────────────────────────────────────────
   `tema-secici.js` paneli TAM BURAYA kurar (`#tm-yuva`, .lg-ctl içinde
   TR/EN düğmelerinin sağında). Eski `#tema-dugme` kaldırıldı.
   `.tm` zaten `position:relative`, paneli `right:0` ile açılıyor →
   sağ kenardan taşmaz. Bu sınıf yalnız yerleşimi garanti eder. */
.tm-yuva{
  display:flex;align-items:center;flex:none;
}
/* Yuva boşken (JS henüz çalışmadıysa) yer kaplamasın */
.tm-yuva:empty{display:none}

/* ── ESKİ ÜST ŞERİT SAYFALARI (meta, ana-sayfa, oyuncu, profil, defter)
   ─────────────────────────────────────────────────────────────────
   Bu sayfalarda `.ust__sar` SÜTUN düzeni (`flex-direction:column;
   align-items:center`) kullanıyor; yuva akışa girerse altta ORTADA
   kalır (ölçüldü: /oyuncu tema düğmesi x=896, yani sayfa ortası).
   Yuva bu yüzden üst şeride göre MUTLAK konumlanır ve sağ üste
   yapışır — yeni üst şerit (`meta-lg`) zaten flex satır kullanıyor,
   orada bu kural devreye girmez (`.lg-ctl .tm-yuva` istisnası). */
.ust:not(.lg-ust) .tm-yuva{
  position:absolute;
  right:var(--gut,20px);
  top:50%;
  transform:translateY(-50%);
  z-index:30;
}
/* Üst şerit göreli konum almalı ki mutlak çocuk ona göre hizalansın */
.ust:not(.lg-ust){position:relative}
/* Dar ekranda menü düğmesiyle çakışmasın */
@media (max-width:760px){
  .ust:not(.lg-ust) .tm-yuva{position:static;transform:none;margin:8px auto 0}
}

/* Profil sayfası: yuva `.ust__orta` (satır flex) içinde, arama formundan
   sonra. Sağ uca yapışsın; mutlak konum gerekmez (üst şerit sütun
   düzeni ama iç kapsayıcı satır). */
.ust__orta > .tm-yuva{margin-left:auto}
/* Profil gibi `.ust__orta` kullanan sayfalarda mutlak kuralı iptal et,
   yoksa yuva iki kez konumlanır. */
.ust:not(.lg-ust) .ust__orta > .tm-yuva{
  position:static;right:auto;top:auto;transform:none;
}