Taraf duzeltmesi: panel 'Kisiler & Taraflar' olarak gruplandi

- HATA DUZELTME: Kayinvalide (Daisy) daha once karsi tarafa yakin
  gosteriliyordu; konusma icerigi analizine gore Kaan tarafinin
  bas muzakerecisi (kanitlar: TARAF-ANALIZI.md)
- Sol panel 3 grup: Kaan tarafi (Kaan, Marissa, Daisy),
  Arabulucular (Kuya 1, Kuya 2), Karsi taraf (Litoy, Manong)
- Her isimde kisa rol aciklamasi (mobilde gizli, tooltip'te var)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

index.html

@@ -50,6 +50,7 @@
     .toggle button{padding:6px 10px;font-size:12px}
     #legend{max-width:150px;font-size:10px;padding:7px 9px;top:56px}
     #legend b{font-size:10.5px}
+    #legend .desc{display:none}
   }
 </style>
 </head>
@@ -64,7 +65,7 @@
   </div>
   <span id="lineId" style="pointer-events:auto;font-size:9px;color:#484f58;margin-left:8px">#—</span>
 </div>
-<div id="legend"><b>Masadaki kişiler</b><div id="legendRows"></div></div>
+<div id="legend"><b>Kişiler & Taraflar</b><div id="legendRows"></div></div>
 <div id="subtitle">
   <div class="who" id="subWho">—</div>
   <div class="orig" id="subOrig">Başlamak için ▶ tuşuna bas</div>
@@ -233,11 +234,30 @@ function TR_READY(){ return !!MEET.trAudio && !!TL_TR && !window.TR_AUDIO_FAILED
 function A(){ return (mode==='tr'&&TR_READY())?at:ao; }
 function curTL(){ return (mode==='tr'&&TR_READY())?TL_TR:TL; }
 
+const GROUPS=[
+  {ad:'🔵 Kaan tarafı', uyeler:[
+    ['Kaan','şikâyetçi; olayı anlatıyor'],
+    ['Marissa','eşi; fiyat & makbuz takibi'],
+    ['Kayınvalide','baş müzakereci; parayı koruyor']]},
+  {ad:'⚖️ Arabulucular', uyeler:[
+    ['Lider Uzlaşmacı (L.U)','lider arabulucu; çözüm önerdi'],
+    ['Uzlaşmacı (U)','arabulucu; sorguladı']]},
+  {ad:'🟡 Karşı taraf', uyeler:[
+    ['Dolandırıcı (D-)','suçlanan; kendini savundu'],
+    ['Yaşlı adam (V)','usta; Litoy ile çalıştı']]}
+];
 const lr=document.getElementById('legendRows');
-Object.keys(POS3D).forEach(function(r){
-  const d=document.createElement('div'); d.className='row';
-  d.innerHTML='<span class="dot" style="background:'+ROLES[r].renk+'"></span>'+SHORT[r]+(POS3D[r].stand?' <span style="color:#8b949e">(ayakta)</span>':'');
-  lr.appendChild(d);
+GROUPS.forEach(function(g){
+  const h=document.createElement('div');
+  h.style.cssText='margin-top:7px;font-weight:700;font-size:10.5px;color:#8b949e;letter-spacing:.3px';
+  h.textContent=g.ad; lr.appendChild(h);
+  g.uyeler.forEach(function(u){
+    const r=u[0], d=document.createElement('div'); d.className='row'; d.title=u[1];
+    d.innerHTML='<span class="dot" style="background:'+ROLES[r].renk+'"></span>'+SHORT[r]
+      +(POS3D[r].stand?' <span style="color:#8b949e">(ayakta)</span>':'')
+      +' <span class="desc" style="color:#8b949e;font-size:10px">— '+u[1]+'</span>';
+    lr.appendChild(d);
+  });
 });
 
 const tl=document.getElementById('tl'), tg=tl.getContext('2d');