/* 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 {
  --turuncu: #E8843C; --sari: #F2C14E; --teal: #7FB8B0; --bej: #D9C7A7;
  --asfalt: #6E6259; --kahve: #3A2E28; --yesil: #4E9B4E; --acik: #F5EFE3;
}
* { 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: rgba(58, 46, 40, .75); padding: 6px 10px;
  border-radius: 8px; font-size: 12px; 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: 10px; padding: 10px; }
/* 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: 8px; flex: 0 0 auto; margin-left: auto; }
/* HUD: seviye + XP cubugu + para */
#hudKutu { width: 190px; max-width: 42vw; background: rgba(58, 46, 40, .8);
  border: 2px solid var(--kahve); border-radius: 10px; padding: 8px 10px;
  color: var(--acik); font-size: 12px; display: none; }
#hudKutu.acik { display: block; }
#hudUst { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; }
#hudSeviye { font-size: 14px; font-weight: bold; color: var(--sari); }
#hudPara { color: var(--yesil); font-weight: bold; }
#xpDis { height: 8px; background: rgba(0, 0, 0, .35); border-radius: 4px;
  overflow: hidden; }
#xpIc { height: 100%; width: 0%; background: linear-gradient(90deg, var(--turuncu), var(--sari));
  transition: width .3s; }
#hudXpMetin { font-size: 10px; opacity: .8; margin-top: 3px; text-align: right; }
#etiketler { position: absolute; inset: 0; overflow: hidden; }
.etiket { position: absolute; transform: translate(-50%, -100%); text-align: center; }
.etiket .ad { display: inline-block; color: var(--acik);
  background: rgba(58, 46, 40, .6); font-size: 12px; padding: 1px 6px;
  border-radius: 6px; }
.etiket .balon { display: none; width: max-content; max-width: 200px;
  margin: 0 auto 4px; background: var(--acik); color: var(--kahve);
  font-size: 13px; padding: 4px 8px; border-radius: 10px; 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; }   /* SAMP /me moru */
#mesajlar .sys { color: #AFAFAF; }
#sohbetForm { display: none; margin-top: 6px; pointer-events: auto; }
#sohbetForm.acik { display: block; }
#sohbetForm input { width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--kahve); background: rgba(245, 239, 227, .95);
  color: var(--kahve); font-size: 16px; outline: none; }
  /* 16px sart: kucugu iOS'ta odakta zoom yapar */
#sohbetSayac { font-size: 11px; color: var(--acik); text-align: right;
  margin-top: 2px; text-shadow: 1px 1px 0 #000; }
#sohbetSayac.dolmak-uzere { color: var(--sari); }
#sohbetSayac.doldu { color: #ffb0a6; }
/* giris ekrani */
#giris { position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(58, 46, 40, .92); z-index: 10;
  pointer-events: auto; }
#girisKutu { background: var(--bej); color: var(--kahve); border-radius: 14px;
  padding: 28px 26px; width: min(340px, 88vw); text-align: center;
  border: 3px solid var(--kahve); }
#girisKutu h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: 1px;
  color: var(--turuncu); text-shadow: 2px 2px 0 var(--kahve); }
#girisKutu p { margin: 0 0 18px; font-size: 13px; }
#googleBtn { display: flex; justify-content: center; margin-bottom: 12px;
  min-height: 44px; }
#misafirBtn { width: 100%; padding: 11px; border-radius: 8px;
  border: 1px solid var(--kahve); background: var(--asfalt); color: var(--acik);
  font-size: 15px; cursor: pointer; display: none; }
#misafirBtn.acik { display: block; }
#misafirBtn:hover { background: var(--kahve); }
/* karakter adi ekrani */
#karakterAlan { display: none; }
#karakterAlan.acik { display: block; }
#karakterAlan input { width: 100%; padding: 10px; border-radius: 8px;
  border: 2px solid var(--kahve); background: var(--acik); color: var(--kahve);
  font-size: 16px; outline: none; margin-bottom: 8px; text-align: center; }
#karakterAlan button { width: 100%; padding: 11px; border-radius: 8px;
  border: none; background: var(--turuncu); color: var(--kahve);
  font-size: 16px; font-weight: bold; cursor: pointer; }
#karakterAlan button:hover { filter: brightness(1.08); }
#karakterIpucu { font-size: 11px; opacity: .8; margin: 0 0 10px; }
#karakterHata { color: #B23A2E; font-size: 12px; min-height: 16px; margin: 6px 0 0; }
/* yükleme çubuğu: varlıklar hazır olmadan oyuna girilmesin */
#yuklemeCubuk { height: 6px; background: rgba(58, 46, 40, .25);
  border-radius: 3px; 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: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 10px; border: 2px solid var(--kahve);
  background: rgba(58, 46, 40, .8);
  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: var(--kahve); border-color: var(--asfalt); }
#dukkanBtn:active, #menuBtn:active { transform: translateY(1px); }
/* 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(58, 46, 40, .75); pointer-events: auto; }
#panel.acik { display: flex; }
#panelKutu { background: var(--bej); color: var(--kahve);
  border: 3px solid var(--kahve); border-radius: 14px;
  width: min(760px, 94vw); max-height: min(86vh, 720px);
  display: flex; flex-direction: column; overflow: hidden; }
#panelBaslik { display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 2px solid var(--kahve);
  background: var(--asfalt); flex-wrap: wrap; }
.sekme { padding: 9px 14px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent; color: var(--acik); font-size: 14px;
  font-weight: bold; min-height: 40px; }
.sekme.aktif { background: var(--turuncu); color: var(--kahve); }
.sekme.yonetim { display: none; }
.sekme.yonetim.acik { display: inline-block; }
#panelKapat { margin-left: auto; width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent; color: var(--acik); font-size: 24px;
  cursor: pointer; line-height: 1; }
#panelIcerik { padding: 14px; overflow-y: auto; }
.sekmeIcerik { display: none; }
.sekmeIcerik.acik { display: block; }
.bilgiSatir { display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(58, 46, 40, .2); font-size: 14px; }
.bilgiSatir b { font-weight: bold; }
.panelBtn { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kahve);
  background: var(--turuncu); color: var(--kahve); font-size: 14px;
  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: 16px; padding: 9px 10px; border-radius: 8px;
  border: 2px solid var(--kahve); background: var(--acik); color: var(--kahve);
  outline: none; }
#uyeAra { width: 100%; margin-bottom: 10px; }
.uyeSayi { width: 110px; }
/* üye LİSTESİ: tek satır, temel bilgi. Düzenleme detayda. */
.uyeSatir { display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid rgba(58, 46, 40, .25); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; background: rgba(245, 239, 227, .55);
  color: var(--kahve); font-family: inherit; font-size: 14px; cursor: pointer;
  text-align: left; min-height: 42px; }
.uyeSatir:hover { background: rgba(232, 132, 60, .18); }
.uyeSol { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uyeZaman { font-size: 11px; opacity: .65; }
.uyeSatirSag { margin-left: auto; display: flex; gap: 5px; 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;
  background: rgba(26, 20, 17, .72); padding: 16px;
  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: 12px; padding: 14px;
  background: var(--acik); color: var(--kahve);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
.uyeAlan { display: flex; align-items: center; gap: 6px; }
.uyeAlan label { font-size: 12px; opacity: .8; min-width: 62px; }
.uyeKart { border: 2px solid rgba(58, 46, 40, .35); border-radius: 10px;
  padding: 10px; margin-bottom: 10px; background: rgba(245, 239, 227, .6); }
.uyeUst { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; }
.uyeAd { font-size: 15px; font-weight: bold; }
.rozet { font-size: 11px; padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--kahve); }
.rozet.onayli { background: #cfe6cf; }
.rozet.beklemede { background: var(--sari); }
.rozet.banli { background: #e8b4ae; }
.rozet.isim-gerekli { background: #ddd; }
.rozet.admin { background: var(--turuncu); }
.rozet.moderator { background: #bcd; }
.rozet.cevrimici { background: var(--yesil); color: #fff; border-color: #2f6b2f; }
.uyeIslem { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.uyeIslem select { font-size: 15px; padding: 8px; border-radius: 8px;
  border: 2px solid var(--kahve); background: var(--acik); color: var(--kahve); }
/* dükkân vitrini */
.deriKart { display: flex; align-items: center; gap: 12px;
  border: 2px solid rgba(58, 46, 40, .35); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: rgba(245, 239, 227, .6); }
.deriKart.secili { border-color: var(--turuncu); background: rgba(232, 132, 60, .18); }
/* Onizleme: 3:4 kutu her zaman ayrilir (resim gelmeden de yer tutar,
   yoksa kartlar resim yuklendikce zipliyor). */
.deriGorsel { flex: 0 0 auto; width: 60px; height: 80px; border-radius: 8px;
  background: rgba(58, 46, 40, .55); border: 1px solid rgba(58, 46, 40, .3);
  object-fit: cover; display: block; }
.deriBilgi { flex: 1 1 auto; min-width: 0; }
.deriAd { font-size: 15px; font-weight: bold; }
.deriAciklama { font-size: 12px; opacity: .75; }
.deriFiyat { font-weight: bold; color: var(--yesil); white-space: nowrap; }
.deriFiyat.yetersiz { color: #B23A2E; }
#dukkanPara { font-size: 14px; margin-bottom: 10px; }
#panelDurum { font-size: 13px; min-height: 18px; margin-bottom: 8px; }
#panelDurum.hata { color: #B23A2E; }
#panelDurum.iyi { color: #2f6b2f; }
/* 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; }
}
#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(58, 46, 40, .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%); }