/* VendettaRPG arayuz stili - TEK KAYNAK.
 *
 * Hem oyun (index.html) hem UI katalogu (docs/ui/*.html) BU dosyayi
 * kullanir. Once index.html icinde satir ici bir <style> blogundaydi;
 * katalog eklenince kopyalanmasi gerekecekti ve iki kopya ilk
 * degisiklikte ayrisirdi - katalog o andan itibaren gercegi degil
 * eski halini gosterirdi.
 *
 * Duzenleme sirasi: katalogda dene -> burada degistir -> oyunda gorunur.
 */
:root {
  /* --- DUNYA RENKLERI (sicak sokak) - 3B sahne ve tilt-shift bunlari kullanir */
  --turuncu: #E8843C; --sari: #F2C14E; --teal: #7FB8B0; --bej: #D9C7A7;
  --asfalt: #6E6259; --kahve: #3A2E28; --yesil: #4E9B4E; --acik: #F5EFE3;

  /* --- ARAYUZ RENKLERI (soguk mavi) ---
   * Dunya sicak, arayuz soguk. Bilincli bir ayrim: panel sahnenin PARCASI
   * degil, uzerinde duran bir katman - farkli sicaklik bunu aninda okutuyor.
   * Rampa kullanicinin verdigi referans ekrandan turetildi.
   *
   * Yuzeyler KOYU. Bej panel doneminde bes metin/zemin cifti WCAG AA'nin
   * altindaydi (en kotusu bej uzerinde yesil fiyat: 2.07). Koyu yuzey o
   * sorunu kokten cozuyor - asagidaki metin renklerinin HEPSI iki mavi
   * yuzeyde de 4.8+ veriyor. */
  --mavi-kontur: #0D1B29;   /* en koyu: kontur ve golge */
  --mavi-panel:  #1B3A55;   /* panel govdesi */
  --mavi-ic:     #12293D;   /* ice gomuk yuzey: kart, liste satiri, giris */
  --mavi-acik:   #5FA8DC;   /* vurgu: aktif sekme, odak, secili kenar */
  --mavi-rim:    rgba(143, 208, 245, .3);  /* ust kenar isigi */

  /* Koyu mavi uzerinde okunacak METIN surumleri (olculdu, hepsi AA gecer) */
  --m-turuncu: #F58B3F;
  --m-yesil:   #5DBA5D;
  --m-kirmizi: #FF8166;

  /* ---------- OLCEKLER ----------
   * Once dagiliktilar: 9 yazi olcusu (altisi bitisik), 8 kose yaricapi,
   * 14 farkli bosluk degeri. Hicbiri secilmemisti - is sirasinda ne denk
   * geldiyse o yazilmisti. Ara deger yazmak yerine bir basamak secilir.
   */
  --y1: 11px;   /* ustveri: son giris, rozet, sayac, ipucu */
  --y2: 13px;   /* ikincil: aciklama, etiket, fiyat */
  --y3: 15px;   /* govde: buton, kart basligi, panel icerigi */
  --y4: 24px;   /* buyuk: sekme ikonu, kapat */
  --y5: 30px;   /* giris ekrani basligi */
  /* GIRIS ALANLARI OLCEK BASAMAGI DEGIL, TEKNIK ZORUNLULUK: iOS 16px'in
   * altindaki alanlara odaklaninca sayfayi yakinlastiriyor (0.3.1'de yasandi).
   * Bu yuzden 15 ile 16 bitisik duruyor - suruklenme degil, kural. */
  --giris-olcu: 16px;

  --k1: 6px;    /* kucuk: rozet ici, giris alani */
  --k2: 10px;   /* orta: kart, buton, ikon butonu */
  --k3: 14px;   /* buyuk: panel, modal, kutu */
  --kh: 999px;  /* hap: rozet, levha, ilerleme cubugu */

  --b1: 4px;
  --b2: 8px;
  --b3: 12px;
  --b4: 16px;
  --b5: 24px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--teal);
  font-family: system-ui, sans-serif; }
/* mobil: iOS lastik kaydirmasi ve sayfa itmesine karsi sabitle */
body { position: fixed; inset: 0; }
canvas { display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#bilgi { position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 10px;
  color: var(--acik);
  background: linear-gradient(180deg, var(--mavi-panel), var(--mavi-ic));
  border: 2px solid var(--mavi-kontur);
  box-shadow: inset 0 1.5px 0 var(--mavi-rim), 0 2px 5px rgba(0, 0, 0, .35);
  padding: var(--b1) var(--b3);
  border-radius: var(--k2); font-size: var(--y2); opacity: .85; }
/* UST SERIT: sol sutun (chat) ile sag sutun (HUD + menu) KARDES.
   Boylece cakisma yapisal olarak imkansiz - sabit koordinatla ikisini
   yan yana koymak dar ekranda mutlaka carpisir (0.7.0'da yasandi). */
#ustSerit { position: absolute; left: 0; right: 0;
  top: env(safe-area-inset-top, 0px); display: flex; align-items: flex-start;
  gap: var(--b2); padding: var(--b2); }
/* margin-left:auto SART: flex ogeleri varsayilan olarak basa yigilir,
   chat max-width'e ulasinca sag sutun ortada kalirdi (0.7.1'de yasandi) */
#sagSutun { display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--b2); flex: 0 0 auto; margin-left: auto; }
/* HUD: seviye + XP cubugu + para */
#hudKutu { width: 190px; max-width: 42vw;
  background: linear-gradient(180deg, var(--mavi-panel), var(--mavi-ic));
  border: 2px solid var(--mavi-kontur);
  box-shadow: inset 0 1.5px 0 var(--mavi-rim), 0 3px 0 rgba(0, 0, 0, .35),
              0 6px 14px rgba(0, 0, 0, .3);
  border-radius: var(--k2); padding: var(--b2);
  color: var(--acik); font-size: var(--y2); display: none; }
#hudKutu.acik { display: block; }
#hudUst { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--b1); }
#hudSeviye { font-size: var(--y3); font-weight: bold; color: var(--sari); }
/* METIN surumu: dunya yesili (--yesil) HUD'un mavi yuzeyinde 3.43 kontrast
   veriyordu (AA 4.5 istiyor, yazi 13px yani "buyuk" sayilmiyor). --m-yesil
   ayni yuzeyde 4.85. Katalog HUD sayfasinda olculerek bulundu. */
#hudPara { color: var(--m-yesil); font-weight: bold; }
#xpDis { border: 2px solid var(--mavi-kontur); height: 8px; background: rgba(0, 0, 0, .35); border-radius: var(--k1);
  overflow: hidden; }
#xpIc { height: 100%; width: 0%; background: linear-gradient(90deg, var(--turuncu), var(--sari));
  transition: width .3s; }
#hudXpMetin { font-size: var(--y1); opacity: .8; margin-top: var(--b1); text-align: right; }
/* BAGLANTI SERIDI: ust ortada, HUD ile chat'in arasinda kalan bosluk.
   Sadece kopma/donus aninda gorunur - surekli duran bir gosterge
   "her sey yolunda" bilgisini gurultuye cevirirdi. */
#baglantiSerit { position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 64px); display: none;
  padding: var(--b2) var(--b4); border-radius: var(--kh);
  border: 2px solid var(--mavi-kontur);
  background: linear-gradient(180deg, var(--mavi-panel), var(--mavi-ic));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  color: var(--acik); font-size: var(--y2); font-weight: bold;
  white-space: nowrap; pointer-events: none; z-index: 8; }
#baglantiSerit.acik { display: block; }
#baglantiSerit.uyari { border-color: var(--sari); color: var(--sari); }
#baglantiSerit.hata { border-color: var(--m-kirmizi); color: var(--m-kirmizi);
  pointer-events: auto; }
/* --- SAVAS HUD'u --- */
#canDis { border: 2px solid var(--mavi-kontur); height: 8px;
  background: rgba(0, 0, 0, .35); border-radius: var(--k1);
  overflow: hidden; margin-top: var(--b1); }
#canIc { height: 100%; width: 100%;
  background: linear-gradient(90deg, #3E9B57, #6FD08A); transition: width .18s; }
/* Can azalinca RENK degisiyor: sayiyi okumadan durum anlasilsin */
#canIc.az { background: linear-gradient(90deg, #B23A2E, #FF8166); }
#canMetin { font-size: var(--y1); opacity: .8; margin-top: 2px; text-align: right; }

/* Sarjor: arac ipucunun ustunde, ayni sutunda - ikisi ayni "eylem" alani */
#sarjor { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(150px + env(safe-area-inset-bottom, 0px)); display: none;
  padding: var(--b1) var(--b3); border-radius: var(--kh);
  border: 2px solid var(--mavi-kontur);
  background: linear-gradient(180deg, var(--mavi-panel), var(--mavi-ic));
  color: var(--acik); font-size: var(--y2); font-weight: bold;
  white-space: nowrap; pointer-events: none; }
#sarjor.acik { display: block; }
#sarjor.bos { border-color: var(--m-kirmizi); color: var(--m-kirmizi); }

/* Olum ekrani: oyun gorunur kalir ama kirmizi bir perde altinda */
#olumEkran { position: fixed; inset: 0; display: none; z-index: 11;
  align-items: center; justify-content: center;
  background: rgba(90, 16, 12, .45); pointer-events: none; }
#olumEkran.acik { display: flex; }
#olumKutu { text-align: center; color: var(--acik);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
#olumBaslik { font-size: var(--y5); font-weight: bold; letter-spacing: 3px;
  color: var(--m-kirmizi); }
#olumMetin { font-size: var(--y3); margin-top: var(--b2); }

#etiketler { position: absolute; inset: 0; overflow: hidden; }
.etiket { position: absolute; transform: translate(-50%, -100%); text-align: center; }
/* Isim metni levhanin icinde; rengi oyuncuya sabit (SAMP tarzi) */
/* OPTIK ORTALAMA (0.9.12, kullanici bildirdi: "isimler tam ortali degil
   dikeyde"). KUTU zaten simetrikti - olculdu, her olcekte 0.00 fark.
   Kayan sey MUREKKEP: font kutusu alt tarafta INMEYEN harfler icin de
   yer ayiriyor, bu yuzden gorunur yazi kutunun merkezinin ALTINDA kaliyor.
   Tuvale cizip piksel sayarak olculdu (13px):
     GeceKusu 0.49 px asagi | Misafir-1PYV 0.32 | Luke_Bane 1.30 | Cynydlan 1.79
   Duzeltme BUYUK HARF BANDINI (tepe -> temel cizgi) ortaliyor: ada bagli
   degil, yoksa levha her isimde baska yere kayardi. 0.04em = 0.52 px @13px.
   transform kullaniliyor, padding degil: padding'i asimetrik yapmak kesirli
   font boyutlarinda yuvarlama farki uretiyor (olculdu, 1.8 px'e kadar). */
.etiket .levhaAd { color: var(--acik); }
.levha .levhaAd { transform: translateY(-.04em); }
.etiket .balon { display: none; width: max-content; max-width: 200px;
  /* OKUNAN ALANLAR ACIK ZEMINDE (0.9.12, kullanici karari): her sey koyu
     temaya donmemeli. Baloncuk ve sohbet girisi okunacak METIN tasiyor;
     kirik beyaz zemin + koyu metin gozu yormadan en yuksek okunakligi
     veriyor. Panel/HUD koyu kalmaya devam ediyor - onlar "katman", bunlar
     "metin alani". */
  /* KONTUR YOK (kullanici: "border cok siyah, ilk zamanki guzeldi").
     Acik zeminin kendisi zaten sahneden ayiriyor; kalin koyu cerceve
     baloncugu bir arayuz kutusu gibi gosteriyordu. Ayirmayi golge yapiyor. */
  margin: 0 auto 4px; background: var(--acik); color: var(--kahve);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  font-size: var(--y2); padding: var(--b1) var(--b2); border-radius: var(--k2); text-align: left;
  /* uzun kesintisiz kelime baloncugu tasirmasin: her yerden bolunebilir */
  word-break: break-all;
  /* cok uzun mesajda baloncuk ekrani kaplamasin: 3 satirda kes */
  -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; }
.etiket .balon.acik { display: -webkit-box; }
/* SAMP tarzi chat: sol ust, kutu yok, siyah konturlu yazi */
/* Genislik artik flex ile: sag sutun ne kadar yer alirsa kalani chat'in.
   min-width:0 sart, yoksa flex ogesi icerigi kadar genisleyip tasar. */
#sohbet { flex: 1 1 auto; min-width: 0; max-width: 500px;
  pointer-events: none; }
#mesajlar { font: bold 13px/1.45 Verdana, Arial, sans-serif; color: #fff;
  max-height: calc(1.45em * 15); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
    -1px -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  /* SAMP davranisi: satir sonuna kadar DOLDUR, gerekiyorsa kelimeyi ortadan
     bol. (overflow-wrap ile tarayici once isimden sonraki bosluktan atlar
     ve "Isim:" tek basina satirda kalirdi) */
  word-break: break-all; }
#mesajlar div { min-width: 0; } /* flex ogesi icerigi kadar genisleyemesin */
#mesajlar .me { color: #C2A2DA; }   /* /me: eylem moru */
/* /do ORTAMI anlatir, /me karakterin yaptigini. Ayni renk verilseydi
   "kim yapiyor, ne gorunuyor" ayrimi kaybolurdu - rol yapma sohbetinin
   tek ayirt edici bilgisi bu. */
#mesajlar .do { color: #8FD3C7; }
#mesajlar .zar { color: #F2C14E; }  /* zar: sonuc gozle bulunabilmeli */
/* /b OOC: oyuncunun sesi. Rol yapma satirlarindan GERI CEKILMIS durmali ama
   sistem grisiyle de karismamali - solgun mavi ikisinin arasinda duruyor. */
#mesajlar .b { color: #9FB6D4; }
#mesajlar .sys { color: #AFAFAF; }
#sohbetForm { display: none; margin-top: var(--b2); pointer-events: auto; }
#sohbetForm.acik { display: block; }
#sohbetForm input { width: 100%; padding: var(--b2) var(--b2); border-radius: var(--k2);
  /* Ince ve YUMUSAK kenar: 2px mavi-kontur cok sertti (kullanici bildirdi).
     Kutuyu sahneden ayiran sey golge, cerceve degil. */
  border: 1px solid rgba(13, 27, 41, .45); background: var(--acik);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  color: var(--kahve); font-size: var(--giris-olcu); outline: none; }
#sohbetForm input:focus { border-color: var(--mavi-acik); }
/* Yer tutucu da okunur olmali: varsayilan tarayici grisi acik zeminde soluk */
#sohbetForm input::placeholder { color: rgba(58, 46, 40, .62); }
  /* 16px sart: kucugu iOS'ta odakta zoom yapar */
#sohbetSayac { font-size: var(--y1); color: var(--acik); text-align: right;
  margin-top: var(--b1); text-shadow: 1px 1px 0 #000; }
#sohbetSayac.dolmak-uzere { color: var(--sari); }
#sohbetSayac.doldu { color: #ffb0a6; }
/* giris ekrani */
/* PERDELER de mavi konturdan. Sicak kahve (58,46,40) bej panel doneminin
   kalintisiydi; mavi kutunun arkasinda kahverengi bir sis birakiyordu.
   Ayni degisiklik #panel ve #uyeDetay perdelerinde de yapildi. */
#giris { position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(13, 27, 41, .92); z-index: 10;
  pointer-events: auto; }
#girisKutu { background: var(--mavi-panel); color: var(--acik); border-radius: var(--k3);
  box-shadow: inset 0 2px 0 var(--mavi-rim), 0 12px 32px rgba(0, 0, 0, .55);
  padding: var(--b5) var(--b5); width: min(340px, 88vw); text-align: center;
  border: 3px solid var(--mavi-kontur); }
#girisKutu h1 { margin: 0 0 4px; font-size: var(--y5); letter-spacing: 1px;
  color: var(--turuncu); text-shadow: 2px 2px 0 var(--mavi-kontur); }
#girisKutu p { margin: 0 0 18px; font-size: var(--y2); }
#googleBtn { display: flex; justify-content: center; margin-bottom: var(--b3);
  min-height: 44px; }
#misafirBtn { width: 100%; padding: var(--b3); border-radius: var(--k2);
  border: 1px solid var(--mavi-kontur); background: var(--asfalt); color: var(--acik);
  font-size: var(--y3); cursor: pointer; display: none; }
#misafirBtn.acik { display: block; }
#misafirBtn:hover { background: var(--mavi-acik); color: var(--mavi-kontur); }
/* karakter adi ekrani */
#karakterAlan { display: none; }
#karakterAlan.acik { display: block; }
#karakterAlan input { width: 100%; padding: var(--b2); border-radius: var(--k2);
  border: 2px solid var(--mavi-kontur); background: var(--mavi-ic); color: var(--acik);
  font-size: var(--giris-olcu); outline: none; margin-bottom: var(--b2); text-align: center; }
#karakterAlan button { width: 100%; padding: var(--b3); border-radius: var(--k2);
  border: none; background: var(--turuncu); color: var(--acik);
  font-size: var(--giris-olcu); font-weight: bold; cursor: pointer; }
#karakterAlan button:hover { filter: brightness(1.08); }
#karakterIpucu { font-size: var(--y1); opacity: .8; margin: 0 0 10px; }
#karakterHata { color: var(--m-kirmizi); font-size: var(--y2);
  min-height: var(--b4); margin: var(--b2) 0 0; }
/* yükleme çubuğu: varlıklar hazır olmadan oyuna girilmesin */
#yuklemeCubuk { height: 6px; background: rgba(143, 208, 245, .16);
  border-radius: var(--k1); overflow: hidden; margin: 0 0 14px; display: none; }
#yuklemeCubuk.acik { display: block; }
#yuklemeIc { height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--turuncu), var(--sari));
  transition: width .2s; }
#girisAlan.gizli { display: none; }
/* menu butonu: sag sutunun ikinci ogesi (konumu yerlesimden gelir) */
/* dükkân butonu menü butonuyla aynı kare stil (ikinci kare ikon) */
/* Iki kare ikon butonu ayni tabani paylasir; tek fark ikon rengi. */
#dukkanBtn, #menuBtn { width: 50px; height: 50px; flex: 0 0 auto;
  border-radius: var(--k3); border: 3px solid var(--mavi-kontur);
  background: linear-gradient(180deg, #2A5075, var(--mavi-panel));
  box-shadow: inset 0 2px 0 var(--mavi-rim), 0 3px 0 rgba(0, 0, 0, .38),
              0 6px 12px rgba(0, 0, 0, .3);
  cursor: pointer; pointer-events: auto; display: none; padding: 0;
  align-items: center; justify-content: center; line-height: 1;
  transition: background .12s ease, border-color .12s ease; }
#dukkanBtn svg, #menuBtn svg { width: 22px; height: 22px; display: block; }
#dukkanBtn { color: var(--sari); }
#menuBtn { color: var(--acik); }
#dukkanBtn.acik, #menuBtn.acik { display: flex; }
#dukkanBtn:hover, #menuBtn:hover {
  background: linear-gradient(180deg, #3A6693, #24486A); }
#dukkanBtn:active, #menuBtn:active { transform: translateY(2px);
  box-shadow: inset 0 2px 0 var(--mavi-rim), 0 1px 0 rgba(0, 0, 0, .38); }
/* Klavyeyle gezinen icin gorunur odak (fare tiklamasinda cikmaz) */
#dukkanBtn:focus-visible, #menuBtn:focus-visible {
  outline: 2px solid var(--sari); outline-offset: 2px; }
/* yonetim + hesap paneli */
#panel { position: fixed; inset: 0; z-index: 9; display: none;
  align-items: center; justify-content: center;
  background: rgba(13, 27, 41, .75); pointer-events: auto; }
#panel.acik { display: flex; }
#panelKutu { background: var(--mavi-panel); color: var(--acik);
  box-shadow: inset 0 2px 0 var(--mavi-rim), 0 10px 28px rgba(0, 0, 0, .5);
  border: 3px solid var(--mavi-kontur); border-radius: var(--k3);
  width: min(760px, 94vw); max-height: min(86vh, 720px);
  display: flex; flex-direction: column; overflow: hidden; }
#panelBaslik { display: flex; align-items: center; gap: var(--b2);
  padding: var(--b2) var(--b2); border-bottom: 2px solid var(--mavi-kontur);
  background: linear-gradient(180deg, #245177, var(--mavi-panel));
  box-shadow: inset 0 1.5px 0 var(--mavi-rim); flex-wrap: wrap; }
.sekme { padding: var(--b2) var(--b3); border-radius: var(--k2); border: none; cursor: pointer;
  background: transparent; color: var(--acik); font-size: var(--y3);
  font-weight: bold; min-height: 40px; }
/* TURUNCU ZEMINDE KOYU METIN. Acik metin (--acik) turuncunun uzerinde 2.35
   kontrast veriyordu - AA 4.5 istiyor ve 15px kalin "buyuk yazi" sayilmiyor.
   Koyu kontur ayni zeminde 6.32. Dukkan sekmesi (.kozSekme.aktif) bastan
   boyleydi; birincil buton ve panel sekmesi atlanmisti. */
.sekme.aktif { background: var(--turuncu); color: var(--mavi-kontur); }
.sekme.yonetim { display: none; }
.sekme.yonetim.acik { display: inline-block; }
#panelKapat { margin-left: auto; width: 36px; height: 36px; border-radius: var(--k2);
  border: none; background: transparent; color: var(--acik); font-size: var(--y4);
  cursor: pointer; line-height: 1; }
#panelIcerik { padding: var(--b3); overflow-y: auto; }
.sekmeIcerik { display: none; }
.sekmeIcerik.acik { display: block; }
.bilgiSatir { display: flex; justify-content: space-between; gap: var(--b2);
  padding: var(--b2) 0; border-bottom: 1px solid var(--mavi-kontur);
  font-size: var(--y3); }
.bilgiSatir b { font-weight: bold; }
.panelBtn { padding: var(--b2) var(--b3); border-radius: var(--k2); border: 1px solid var(--mavi-kontur);
  background: var(--turuncu); color: var(--mavi-kontur); font-size: var(--y3);
  font-weight: bold; cursor: pointer; min-height: 40px; }
.panelBtn.ikincil { background: var(--asfalt); color: var(--acik); }
.panelBtn.tehlike { background: #B23A2E; color: #fff; border-color: #7d2820; }
.panelBtn:hover { filter: brightness(1.08); }
#uyeAra, .uyeSayi { font-size: var(--giris-olcu); padding: var(--b2) var(--b2); border-radius: var(--k2);
  border: 2px solid var(--mavi-kontur); background: var(--mavi-ic); color: var(--acik);
  outline: none; }
#uyeAra { width: 100%; margin-bottom: var(--b2); }
.uyeSayi { width: 110px; }
/* üye LİSTESİ: tek satır, temel bilgi. Düzenleme detayda. */
.uyeSatir { display: flex; align-items: center; gap: var(--b2); width: 100%;
  border: 1px solid rgba(143, 208, 245, .16); border-radius: var(--k2);
  padding: var(--b2) var(--b2); margin-bottom: var(--b2); background: var(--mavi-ic);
  color: var(--acik); font-family: inherit; font-size: var(--y3); cursor: pointer;
  text-align: left; min-height: 42px; }
.uyeSatir:hover { background: rgba(232, 132, 60, .18); }
.uyeSol { display: flex; flex-direction: column; gap: var(--b1); min-width: 0; }
.uyeZaman { font-size: var(--y1); opacity: .65; }
.uyeSatirSag { margin-left: auto; display: flex; gap: var(--b1); align-items: center;
  flex-wrap: wrap; justify-content: flex-end; }
.rozet.seviye { background: var(--sari); }
/* Uye detayi POP-UP. Once listenin ustunde acilan bir blokdu ve listeyi
   asagi itiyordu (kullanici bildirdi): detaya bakmak icin acip kapatinca
   liste zipliyordu. Artik ustte, listenin yerini bozmadan aciliyor. */
#uyeDetay { display: none; position: fixed; inset: 0; z-index: 12;
  /* Perde rengi mavi konturdan: sicak siyah (26,20,17) bej panel doneminden
     kalmisti ve mavi panelin altinda kahverengi bir sis gibi duruyordu. */
  background: rgba(13, 27, 41, .72); padding: var(--b4);
  align-items: center; justify-content: center; }
#uyeDetay.acik { display: flex; }
#uyeDetayKart { width: min(480px, 100%); max-height: 86vh; overflow: auto;
  border: 2px solid var(--turuncu); border-radius: var(--k3); padding: var(--b3);
  background: var(--mavi-ic); color: var(--acik);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
.uyeAlan { display: flex; align-items: center; gap: var(--b2); }
.uyeAlan label { font-size: var(--y2); opacity: .8; min-width: 62px; }
/* .uyeKart KALDIRILDI: detay satirin altinda acilan bir bloktan pop-up'a
   tasininca (0.9.6) kullanicisi kalmadi, kural olu kod olarak duruyordu.
   Katalog dogrulamasi (docs/ui/_dogrula.py) "style.css'te var, katalogda yok"
   diye isaretleyince farkedildi. */
.uyeUst { display: flex; align-items: center; gap: var(--b2); flex-wrap: wrap;
  margin-bottom: var(--b2); }
.uyeAd { font-size: var(--y3); font-weight: bold; }
/* ROZETLER: zemin ACIK, metin KOYU - kapsayan panel koyu oldugu icin
   metin rengi acikca veriliyor. Once panelden miras aliniyordu; panel
   maviye donunce acik metin acik rozetin uzerinde okunmaz kaldi. */
/* TEMEL ROZET ZEMINI SART: varyanti olmayan rol (or. "oyuncu") zeminsiz
   kaliyordu ve koyu metin koyu panelde okunmuyordu. */
.rozet { font-size: var(--y1); padding: var(--b1) var(--b2); border-radius: var(--kh);
  border: 1px solid var(--mavi-kontur); color: var(--mavi-kontur);
  background: #C9D3DA; font-weight: bold; }
.rozet.onayli { background: #8FD9A0; }
.rozet.beklemede { background: var(--sari); }
.rozet.banli { background: #F0A79E; }
/* Notr zemin ACIKCA yaziliyor: temel .rozet zaten bunu veriyor ama iki
   varyantin notr oldugunu gormek, "unutulmus mu" sorusunu ortadan kaldiriyor.
   .rozet.oyuncu kurali yokken katalog dogrulamasi "tanimsiz sinif" dedi. */
.rozet.isim-gerekli, .rozet.oyuncu { background: #C9D3DA; }
.rozet.admin { background: var(--turuncu); }
.rozet.moderator { background: var(--mavi-acik); }
.rozet.cevrimici { background: #5DBA5D; }
.uyeIslem { display: flex; gap: var(--b2); flex-wrap: wrap; align-items: center; }
.uyeIslem select { font-size: var(--y3); padding: var(--b2); border-radius: var(--k2);
  border: 2px solid var(--mavi-kontur); background: var(--mavi-ic); color: var(--acik); }
/* dükkân vitrini: kart bileşeni aşağıda (.kozKart), burada yalnızca para satırı.
   Eski .deriKart/.deriGorsel/.deriFiyat kaldırıldı - sekmeli düzene geçince
   kıyafet ve levha aynı karta taşındı, o sınıfların kullanıcısı kalmadı. */
#dukkanPara { font-size: var(--y3); margin-bottom: var(--b2); }
#panelDurum { font-size: var(--y2); min-height: 18px; margin-bottom: var(--b2); }
#panelDurum.hata { color: var(--m-kirmizi); }
#panelDurum.iyi { color: var(--m-yesil); }
/* Panel tam ekrana gecis: yalniz DAR ekran degil, ALCAK ekran da sayilir.
   Telefon yatayken genislik 812 px oluyor ve eski kural devreye girmiyordu;
   panel 375 px yuksekligin ortasinda ince bir serit halinde kaliyordu. */
@media (max-width: 560px), (max-height: 480px) {
  #panelKutu { width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
}
@media (max-width: 560px) {
  .uyeIslem { flex-direction: column; align-items: stretch; }
  .panelBtn, .uyeSayi { width: 100%; }
}
/* Hareket duyarliligi: kullanici isletim sisteminde "hareketi azalt"
   dediyse dekoratif gecisler kapanir. Oyun kamerasi zaten SERT takip
   ediyor (yumusatma yok), bu yuzden geriye arayuz gecisleri kaliyor. */
@media (prefers-reduced-motion: reduce) {
  #xpIc { transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
/* ARAC IPUCU: ekranin alt ORTASI - joystick sagda, sohbet solda, orta bos.
   Buton (metin degil): mobilde F tusu olmadigi icin dokunulabilir olmali.
   Joystick'in ustunde durur ki bas parmak ikisini birden kapatmasin. */
#aracIpucu { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: none; pointer-events: auto; cursor: pointer;
  padding: var(--b2) var(--b4); border-radius: var(--k2);
  border: 2px solid var(--mavi-kontur);
  background: linear-gradient(180deg, var(--mavi-panel), var(--mavi-ic));
  box-shadow: inset 0 1.5px 0 var(--mavi-rim), 0 3px 0 rgba(0, 0, 0, .38),
              0 6px 14px rgba(0, 0, 0, .3);
  color: var(--acik); font-family: inherit; font-size: var(--y3);
  font-weight: bold; white-space: nowrap; }
#aracIpucu.acik { display: block; }
#aracIpucu:hover { filter: brightness(1.12); }

#joystick { position: absolute; right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 120px;
  height: 120px; display: none; pointer-events: auto; touch-action: none; }
#joystick.acik { display: block; }
#joystickTaban { position: absolute; inset: 0; border-radius: 50%;
  background: rgba(13, 27, 41, .35); border: 2px solid rgba(245, 239, 227, .5); }
#joystickTopuz { position: absolute; left: 50%; top: 50%; width: 56px;
  height: 56px; border-radius: 50%; background: rgba(232, 132, 60, .85);
  border: 2px solid var(--acik); transform: translate(-50%, -50%); }

/* ---------- ISIM LEVHASI ----------
 * Karakterin ustundeki etiketin susu. Dukkandan satin alinir (LEVHALAR).
 *
 * YAPI: seviye madalyonu cubugun USTUNE TASAR ve ondan buyuktur.
 * IS BOLUMU: madalyon SABIT (seviye herkeste ayni okunmali, kozmetik degil),
 * degisen yalnizca cubuk - kenar rengi, zemin, parilti.
 *
 * GORSEL DOSYA YOK, hepsi CSS: rank rozetlerindeki kuralin devami.
 * Sifir indirme, her cozunurlukte net, yeni levha = bir CSS blogu.
 */
/* OLCEK TEK YERDEN: ic olculer em cinsinden, yani font-size'i degistirmek
   levhanin tamamini (madalyon dahil) buyutup kucultuyor. Piksel yazsaydik
   kamera mesafesine gore olceklemek her satiri ayri ayri carpmak olurdu.
   --levhaOlcek'i main.ts #etiketler uzerine yaziyor; dukkan vitrinindeki
   ornek levhalar o kabin disinda oldugu icin her zaman 1 kaliyor. */
.levha { position: relative; display: inline-flex; align-items: center;
  min-height: 1.93em; padding: .23em 1em .23em 2.23em; border-radius: var(--k1);
  font-weight: bold; color: var(--acik);
  font-size: calc(var(--y2) * var(--levhaOlcek, 1));
  background: rgba(42, 33, 28, .88); border: 2px solid rgba(245, 239, 227, .3);
  /* Oyun zemini acikdan koyuya degisiyor: TEK golge acik zeminde yetmiyor,
     isim eriyor. Sert golge + yumusak hale birlikte. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .7);
  white-space: nowrap; }
/* Seviyesi olmayan (misafir): madalyon cizilmiyor, sol bosluk da kalkiyor */
.levha.svYok { padding-left: 1em; }
/* MADALYON GERI CEKILDI (0.9.12, kullanici bildirdi: "cok belirgin, fazla
   one cikiyor"). Uc sey birden bagiriyordu: parlak radyal isik lekesi, KREM
   kalin cerceve ve sert golge. Simdi duz gradyan, levhanin kendi konturuyla
   ayni renkte ince cerceve, yumusak golge. Boyut da 2.46 -> 2.3em: madalyon
   hala levhanin disina tasiyor (kullanicinin istedigi yapi) ama okuma sirasi
   artik once ISIM. */
.levha .sv { position: absolute; left: -.62em; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.3em; height: 2.3em;
  border-radius: 50%; font-size: 1em; line-height: 1;
  background: linear-gradient(180deg, #D2AC5A, #A8813A);
  color: #241C15; border: 1px solid rgba(36, 28, 21, .5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); text-shadow: none; }

/* --- CESITLER: yalnizca cubugun kenari/zemini degisir --- */
.levha.sokak   { background: rgba(42, 33, 28, .88);
  border-color: rgba(245, 239, 227, .3); }
.levha.asfalt  { background: linear-gradient(180deg, #7A6E64, #52483F);
  border-color: #8E8177; }
.levha.altin   { background: linear-gradient(180deg, #5E4A22, #2E2419);
  border-color: var(--sari);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .3), 0 2px 6px rgba(0, 0, 0, .4); }
.levha.neon    { background: linear-gradient(180deg, #22383C, #12201F);
  border-color: var(--teal); box-shadow: 0 0 9px rgba(127, 184, 176, .5); }
.levha.serit   { border-color: var(--sari);
  background: repeating-linear-gradient(135deg, #3A2E28 0 9px, #55442F 9px 18px); }
.levha.grafiti { background: linear-gradient(180deg, #4A2B3A, #26161F);
  border-color: #C4562F; border-style: dashed; }

/* Izgara ornegi: isim YERINE notr cubuk. Gercek isim yazilirsa her kart
   farkli genislikte oluyor ve kartlarda bosluk kaliyor; sabit cubuk
   levhalari KARSILASTIRILABILIR yapiyor. */
.levha.ornek { width: 100%; padding: .23em .62em .23em 2.15em; }
.levha.ornek .cubuk { flex: 1 1 auto; height: .62em; border-radius: var(--kh);
  background: rgba(245, 239, 227, .4); }

/* ---------- DUKKAN SEKMELERI ---------- */
.kozSekmeler { display: flex; gap: var(--b1); align-items: flex-end;
  margin-bottom: var(--b3); border-bottom: 2px solid var(--mavi-kontur); }
.kozSekme { appearance: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--y3); font-weight: bold; padding: var(--b2) var(--b4);
  border-radius: var(--k2) var(--k2) 0 0; background: var(--mavi-ic);
  color: var(--bej); }
.kozSekme:hover { background: #1A3A55; }
.kozSekme.aktif { background: var(--turuncu); color: var(--mavi-kontur); }

/* ---------- OGE KARTI (kiyafet + levha ortak) ----------
 * Referanstaki dort durum: sahip / kusanili / yeni / kilitli.
 * KILITLI GIZLENMIYOR, soluk gosteriliyor - neyin kazanilacagini gormek
 * satin alma sebebi, gizlemek onu yok eder.
 */
.kozKart { position: relative; border-radius: var(--k2); padding: var(--b2);
  background: var(--mavi-ic); border: 2px solid var(--mavi-kontur);
  display: flex; flex-direction: column; gap: var(--b1); cursor: pointer;
  text-align: left; font-family: inherit; color: var(--acik); }
.kozKart:hover { border-color: var(--mavi-acik); }
.kozGorsel { height: 44px; border-radius: var(--k1); display: grid;
  place-items: center; background: rgba(0, 0, 0, .25); padding: 0 var(--b2);
  overflow: hidden; }
.kozGorsel.dikey { height: 86px; padding: 0; }
.kozGorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kozAd { font-size: var(--y2); font-weight: bold; }
/* Silah kartinda gorsel yerine SAYILAR: karsilastirilan sey bu */
.kozStat { font-size: var(--y1); opacity: .85; text-align: center;
  line-height: 1.4; padding: 0 var(--b1); }
.kozAlt { font-size: var(--y1); opacity: .8; }

.kozKart.kusanili { border-color: var(--turuncu);
  background: linear-gradient(180deg, #2A4A63, #1C3348); }
.kozKart.kusanili::before, .kozKart.kusanili::after { content: ''; position: absolute;
  width: 12px; height: 12px; border: 3px solid var(--turuncu); }
.kozKart.kusanili::before { top: -3px; left: -3px; border-right: none;
  border-bottom: none; border-radius: var(--k2) 0 0 0; }
.kozKart.kusanili::after { bottom: -3px; right: -3px; border-left: none;
  border-top: none; border-radius: 0 0 var(--k2) 0; }
.kozTik { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--m-yesil); color: var(--mavi-kontur);
  display: grid; place-items: center; border: 2px solid var(--acik); z-index: 1;
  font-size: var(--y1); font-weight: bold; }

.kozKart.kilitli { background: rgba(13, 27, 41, .7); }
.kozKart.kilitli .kozGorsel > * { opacity: .45; filter: saturate(.5); }
.kozKart.kilitli .kozAd { opacity: .65; }
.kozKilit { position: absolute; right: var(--b2); bottom: var(--b2);
  width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .6);
  color: var(--bej); display: grid; place-items: center; }
.kozKilit svg { width: 12px; height: 12px; }
.kozFiyat { font-weight: bold; color: var(--m-yesil); }
.kozFiyat.yetersiz { color: var(--m-kirmizi); }

.kozIzgara { display: grid; gap: var(--b2);
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }

/* ---------- EYLEM CUBUGU ----------
 * Izgaranin altinda duran, secili ogeyi ve TEK eylemi gosteren serit.
 * Karta tiklamak once dogrudan satin aliyordu/kusaniyordu; oyuncu goz
 * gezdirirken istemeden kusaniyordu (kullanici bildirdi). Geri alinamayan
 * islem artik ayri ve ETIKETLI bir butona bagli.
 */
.kozEylem { display: flex; align-items: center; gap: var(--b3);
  margin-top: var(--b3); padding: var(--b3);
  border-top: 2px solid var(--mavi-kontur);
  background: var(--mavi-ic); border-radius: var(--k2); }
.kozEylemBilgi { flex: 1 1 auto; min-width: 0; }
.kozEylemAd { font-size: var(--y3); font-weight: bold; }
.kozEylemAciklama { font-size: var(--y2); opacity: .75; }
.kozEylem .panelBtn { flex: 0 0 auto; white-space: nowrap; }
/* SECILI kart: kusanilidan ayri gorunur - biri "su an uzerinde", digeri
   "su an bakiyorsun". Ikisi ayni gosterilse eylem cubugu hangi ogeyi
   anlattigi belirsiz kalirdi. */
.kozKart.secili { border-color: var(--mavi-acik);
  box-shadow: 0 0 0 2px rgba(95, 168, 220, .45); }