<!DOCTYPE html>
<html lang="tr" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#0a0a14">
<title>Exe Live | Exe Tekno Team</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet">
<style>
/* ===== TÜM CSS ===== */
:root{--bg:#0a0a14;--bg2:#0f0f1e;--bg3:#161625;--card:#1a1a2e;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);--text:#e2e2f0;--text2:#7878a0;--text3:#4a4a70;--accent:#6c3fff;--accent2:#ff3f7a;--green:#2ecc71;--yellow:#f0a500;--red:#e74c3c;--gold:#ffd700;--shadow:0 8px 32px rgba(0,0,0,0.5);--radius:16px;--radius2:12px;--font:'Space Grotesk',sans-serif;--font-display:'Syne',sans-serif}
[data-theme="light"]{--bg:#f0f0f8;--bg2:#e8e8f2;--bg3:#dedee8;--card:#fff;--border:rgba(0,0,0,0.07);--border2:rgba(0,0,0,0.13);--text:#0a0a1e;--text2:#505070;--text3:#909090}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px}
button,input,textarea,select{font-family:var(--font)}
textarea{resize:none}

@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes gift{0%{transform:translateY(100vh)scale(0)}30%{opacity:1}100%{transform:translateY(-120px)scale(1.4);opacity:0}}

#app{display:flex;flex-direction:column;height:100%;overflow:hidden}
.screen{display:none;flex-direction:column;height:100%;overflow:hidden;position:relative}
.screen.active{display:flex}
.page{display:none;flex-direction:column;flex:1;overflow-y:auto;padding:20px 16px;animation:fadeIn 0.3s}
.page.active{display:flex}

#loadingScreen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}
.loading-logo{font-family:var(--font-display);font-size:2.8rem;background:linear-gradient(135deg,#6c3fff,#ff3f7a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:pulse 1.5s infinite}
.loading-spinner{width:36px;height:36px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite}

#loginScreen{background:radial-gradient(ellipse at 30% 20%,rgba(108,63,255,0.15) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(255,63,122,0.1) 0%,transparent 60%),var(--bg);align-items:center;justify-content:center;padding:20px}
.login-wrap{width:100%;max-width:420px;animation:slideUp 0.5s}
.login-logo{font-family:var(--font-display);font-size:2.4rem;background:linear-gradient(135deg,#6c3fff,#ff3f7a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}
.login-tagline{text-align:center;color:var(--text2);font-size:0.88rem}
.login-brand{text-align:center;color:var(--accent);font-size:0.72rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:28px}
.login-card{background:var(--card);border:1px solid var(--border2);border-radius:22px;padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.tab-row{display:flex;background:var(--bg3);border-radius:10px;padding:4px;gap:4px;margin-bottom:24px}
.tab-btn{flex:1;padding:10px;border:none;background:transparent;color:var(--text2);font-size:0.9rem;font-weight:700;cursor:pointer;border-radius:7px;transition:all 0.2s}
.tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(108,63,255,0.4)}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:0.8rem;font-weight:700;color:var(--text2);margin-bottom:6px;text-transform:uppercase}
.form-input{width:100%;background:var(--bg3);border:1.5px solid var(--border2);border-radius:10px;padding:12px 14px;color:var(--text);font-size:0.95rem;outline:none}
.form-input:focus{border-color:var(--accent);background:rgba(108,63,255,0.08)}
.err-msg{color:var(--red);font-size:0.78rem;margin-top:5px;display:none}
.err-msg.show{display:block}
.login-btn{width:100%;background:linear-gradient(135deg,var(--accent),#5030dd);color:#fff;border:none;border-radius:10px;padding:14px;font-size:0.97rem;font-weight:700;cursor:pointer;transition:all 0.25s;margin-top:6px}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(108,63,255,0.45)}
.login-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
#registerSection{display:none}
#registerSection.show{display:block}

.top-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.tb-logo{font-family:var(--font-display);font-size:1.25rem;background:linear-gradient(135deg,#6c3fff,#ff3f7a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tb-badge{background:var(--accent);color:#fff;font-size:0.58rem;padding:2px 6px;border-radius:4px;font-weight:800}
.tb-spacer{flex:1}
.balance-chip{display:flex;align-items:center;gap:6px;background:rgba(255,215,0,0.1);border:1px solid rgba(255,215,0,0.35);border-radius:999px;padding:5px 12px;font-size:0.82rem;font-weight:700;color:var(--gold);cursor:pointer}
.balance-chip:hover{background:rgba(255,215,0,0.18);transform:scale(1.04)}
.user-chip{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border2);border-radius:999px;padding:5px 12px;font-size:0.82rem;font-weight:700;cursor:pointer}
.user-chip:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:0.95rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.icon-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.icon-btn.danger:hover{background:var(--red);border-color:var(--red)}

.bottom-nav{display:flex;background:var(--bg2);border-top:1px solid var(--border);padding:6px 0 calc(env(safe-area-inset-bottom,0px) + 6px);flex-shrink:0}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:5px;border-radius:10px;margin:0 4px;transition:all 0.2s}
.nav-item .nav-icon{font-size:1.3rem}
.nav-item .nav-label{font-size:0.6rem;font-weight:700;color:var(--text2)}
.nav-item.active .nav-icon{transform:scale(1.15)}
.nav-item.active .nav-label{color:var(--accent)}
.nav-badge{position:absolute;top:2px;right:6px;background:var(--red);color:#fff;font-size:0.6rem;font-weight:800;width:16px;height:16px;border-radius:50%;display:none;align-items:center;justify-content:center}
.nav-badge.show{display:flex}

#mainContent{flex:1;display:flex;flex-direction:column;overflow:hidden}

.welcome-banner{background:linear-gradient(135deg,rgba(108,63,255,0.9),rgba(255,63,122,0.8));border-radius:var(--radius);padding:22px 20px;margin-bottom:18px}
.welcome-name{font-family:var(--font-display);font-size:1.55rem;color:#fff}
.welcome-sub{color:rgba(255,255,255,0.78);font-size:0.85rem;margin-top:3px}

.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:0.82rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px}

.online-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px}
.online-title{font-size:0.78rem;font-weight:700;color:var(--text2);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:11px}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:livePulse 2s infinite}
.online-count-badge{background:var(--accent);color:#fff;font-size:0.65rem;padding:1px 7px;border-radius:999px;font-weight:800}
.online-list{display:flex;gap:8px;flex-wrap:wrap}
.online-pill{display:flex;align-items:center;gap:5px;background:var(--bg3);border:1px solid var(--border);padding:5px 10px;border-radius:999px;font-size:0.8rem;font-weight:600;cursor:pointer}
.online-pill:hover{border-color:var(--accent);color:var(--accent)}

.rooms-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.room-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:18px 14px;cursor:pointer;transition:all 0.25s;position:relative}
.room-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(108,63,255,0.18)}
.room-card.wide{grid-column:1/-1}
.live-badge{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;font-size:0.6rem;font-weight:800;padding:2px 7px;border-radius:4px;animation:livePulse 1.5s infinite}
.room-icon{font-size:1.8rem;margin-bottom:8px}
.room-name{font-weight:700;font-size:0.92rem}
.room-desc{font-size:0.74rem;color:var(--text2);margin-top:3px}
.room-meta{font-size:0.72rem;color:var(--text3);margin-top:7px;display:flex;gap:8px}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.quick-btn{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:14px 8px;cursor:pointer;transition:all 0.2s;text-align:center}
.quick-btn:hover{border-color:var(--accent);background:rgba(108,63,255,0.07)}
.quick-icon{font-size:1.4rem;margin-bottom:4px}
.quick-label{font-size:0.65rem;font-weight:700;color:var(--text2)}

.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.game-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 16px;cursor:pointer;transition:all 0.25s;text-align:center;position:relative}
.game-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.3)}
.game-card-icon{font-size:2.4rem;margin-bottom:8px}
.game-card-name{font-weight:700;font-size:0.97rem;margin-bottom:4px}
.game-card-desc{font-size:0.76rem;color:var(--text2)}

.game-screen{flex:1;overflow-y:auto;padding:18px}
.game-hdr{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.game-back{width:34px;height:34px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.game-back:hover{background:var(--accent);color:#fff}
.game-title{font-family:var(--font-display);font-size:1.35rem;font-weight:800}
.game-balance{margin-left:auto;font-size:0.85rem;color:var(--gold);font-weight:700}
.game-result{min-height:40px;text-align:center;font-size:1.05rem;font-weight:700;padding:10px}
.btn{padding:10px 20px;border-radius:10px;border:none;font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:scale(1.04);background:#5030dd}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover{border-color:var(--accent)}
.btn-gold{background:linear-gradient(135deg,#ffd700,#ffec4e);color:#6a5200;font-weight:800}
.btn-gold:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(255,215,0,0.35)}
.btn-danger{background:var(--red);color:#fff}
.btn-green{background:var(--green);color:#fff}
.bet-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px}
.bet-field{width:96px;text-align:center;padding:10px;background:var(--bg3);border:1.5px solid var(--border2);border-radius:10px;color:var(--text);font-size:1.1rem;font-weight:700}

.roulette-wrap{text-align:center}
.roulette-ring{width:260px;height:260px;border-radius:50%;margin:0 auto 14px;position:relative;box-shadow:0 0 40px rgba(0,0,0,0.6);background:conic-gradient(#2ecc71 0deg 9.73deg,#000 9.73deg 19.46deg,#e74c3c 19.46deg 29.19deg,#000 29.19deg 38.92deg,#e74c3c 38.92deg 48.65deg,#000 48.65deg 58.38deg,#e74c3c 58.38deg 68.11deg,#000 68.11deg 77.84deg,#e74c3c 77.84deg 87.57deg,#000 87.57deg 97.3deg,#e74c3c 97.3deg 107.03deg,#000 107.03deg 116.76deg,#e74c3c 116.76deg 126.49deg,#000 126.49deg 136.22deg,#e74c3c 136.22deg 145.95deg,#000 145.95deg 155.68deg,#e74c3c 155.68deg 165.41deg,#000 165.41deg 175.14deg,#e74c3c 175.14deg 184.87deg,#000 184.87deg 194.6deg,#e74c3c 194.6deg 204.33deg,#000 204.33deg 214.06deg,#e74c3c 214.06deg 223.79deg,#000 223.79deg 233.52deg,#e74c3c 233.52deg 243.25deg,#000 243.25deg 252.98deg,#e74c3c 252.98deg 262.71deg,#000 262.71deg 272.44deg,#e74c3c 272.44deg 282.17deg,#000 282.17deg 291.9deg,#e74c3c 291.9deg 301.63deg,#000 301.63deg 311.36deg,#e74c3c 311.36deg 321.09deg,#000 321.09deg 330.82deg,#e74c3c 330.82deg 340.55deg,#000 340.55deg 350.28deg,#e74c3c 350.28deg 360deg)}
.roulette-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--bg);border:4px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.4rem;z-index:2}
.roulette-pin{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid var(--gold);z-index:10}
.roulette-bets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:320px;margin:0 auto 14px}
.roulette-bet-btn{padding:8px;border-radius:8px;border:1.5px solid var(--border2);background:var(--bg3);color:var(--text);font-weight:700;font-size:0.8rem;cursor:pointer}
.roulette-bet-btn:hover,.roulette-bet-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}
.roulette-bet-btn.red{background:rgba(231,76,60,0.2);color:#e74c3c}
.roulette-bet-btn.red:hover,.roulette-bet-btn.red.active{background:#e74c3c;color:#fff}
.roulette-bet-btn.black{background:rgba(0,0,0,0.5);color:#fff}
.roulette-bet-btn.black:hover,.roulette-bet-btn.black.active{background:#000;color:#fff}
.roulette-bet-btn.green{background:rgba(46,204,113,0.2);color:#2ecc71}
.roulette-bet-btn.green:hover,.roulette-bet-btn.green.active{background:#2ecc71;color:#fff}

.dice-wrap{text-align:center;padding:20px}
.dice-face{font-size:5.5rem;margin:20px 0;min-height:90px;line-height:1}

.slots-wrap{text-align:center}
.slots-display{display:flex;justify-content:center;gap:14px;margin:24px 0;background:var(--bg3);padding:24px;border-radius:14px;border:2.5px solid var(--gold)}
.slot-reel{width:76px;height:76px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;background:var(--bg);border-radius:10px;border:1.5px solid var(--border2)}

.crash-wrap{text-align:center}
.crash-chart{width:100%;height:180px;background:var(--bg3);border-radius:14px;margin:16px 0;border:1.5px solid var(--border);position:relative;overflow:hidden}
.crash-bar{position:absolute;bottom:0;left:0;height:3px;background:var(--green);box-shadow:0 0 10px var(--green);transition:width 0.1s linear}
.crash-mult{font-size:3rem;font-weight:800;color:var(--green);margin:10px 0;font-family:var(--font-display)}
.crash-btns{display:flex;gap:10px;justify-content:center}

.bj-table{background:var(--bg3);border-radius:14px;padding:16px}
.bj-area-label{text-align:center;font-size:0.78rem;font-weight:700;color:var(--text2);text-transform:uppercase;margin-bottom:8px}
.bj-hand{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:60px;margin-bottom:14px}
.bj-card{width:54px;height:80px;background:#fff;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#222;font-weight:800;font-size:1.1rem;box-shadow:0 3px 8px rgba(0,0,0,0.35)}
.bj-card.red-suit{color:#e74c3c}
.bj-card.hidden-card{background:linear-gradient(135deg,#3a3a6a,#1a1a3e)}
.bj-score{text-align:center;font-size:1.1rem;font-weight:700;margin-bottom:8px}
.bj-divider{text-align:center;font-size:1.8rem;color:var(--text3);margin:8px 0}
.bj-controls{display:flex;gap:8px;justify-content:center}

#roomScreen{background:var(--bg)}
.room-container{display:flex;flex-direction:column;height:100%}
.room-hdr{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg2)}
.room-hdr-back{width:34px;height:34px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.room-hdr-back:hover{background:var(--accent);color:#fff}
.room-hdr-info{flex:1}
.room-hdr-name{font-weight:700;font-size:0.97rem}
.room-hdr-id{font-size:0.68rem;color:var(--text2)}
.room-hdr-actions{display:flex;gap:6px}

.room-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.room-tab{flex:1;padding:11px;border:none;background:transparent;color:var(--text2);font-size:0.82rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent}
.room-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.room-tab-content{display:none;flex:1;flex-direction:column;overflow:hidden}
.room-tab-content.active{display:flex}

.stage-area{padding:14px;border-bottom:1px solid var(--border);flex-shrink:0}
.stage-title{font-size:0.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;margin-bottom:10px}
.stage-grid{display:flex;gap:10px;flex-wrap:wrap}
.stage-slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;background:var(--bg3);border-radius:12px;cursor:pointer;min-width:80px}
.stage-slot:hover{background:rgba(108,63,255,0.12)}
.stage-slot.speaking{border:2px solid var(--green);box-shadow:0 0 16px rgba(46,204,113,0.3)}
.stage-slot.muted{opacity:0.6}
.stage-avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;background:var(--bg2)}
.stage-name{font-size:0.72rem;font-weight:700;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-mic{font-size:0.8rem}
.stage-empty{color:var(--text3);font-size:0.82rem;font-style:italic;padding:16px}

.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:7px}
.chat-msg{max-width:78%;animation:fadeIn 0.2s}
.chat-msg.mine{align-self:flex-end}
.chat-msg.theirs{align-self:flex-start}
.msg-sender{font-size:0.72rem;font-weight:700;color:var(--accent);margin-bottom:3px}
.msg-bubble{padding:9px 13px;border-radius:16px;font-size:0.9rem;line-height:1.5;word-break:break-word}
.mine .msg-bubble{background:linear-gradient(135deg,var(--accent),#5030dd);color:#fff;border-bottom-right-radius:4px}
.theirs .msg-bubble{background:var(--bg3);color:var(--text);border-bottom-left-radius:4px}
.msg-time{font-size:0.63rem;color:var(--text3);margin-top:2px;padding:0 3px}
.msg-system{text-align:center;font-size:0.78rem;color:var(--text3);font-style:italic;padding:4px}

.chat-input-wrap{padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0;position:relative}
.chat-input-row{display:flex;gap:7px;align-items:flex-end}
.chat-textarea{flex:1;background:var(--bg3);border:1.5px solid var(--border2);border-radius:22px;padding:10px 14px;color:var(--text);font-size:0.9rem;max-height:100px;min-height:40px;outline:none}
.chat-textarea:focus{border-color:var(--accent)}
.chat-action-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.chat-action-btn:hover{color:var(--accent);border-color:var(--accent)}
.send-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.send-btn:hover{transform:scale(1.08);background:#5030dd}

.emoji-picker-pop{position:absolute;bottom:56px;left:12px;right:12px;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;z-index:50;max-height:180px;overflow-y:auto;display:none}
.emoji-picker-pop.open{display:grid}
.emoji-picker-pop span{cursor:pointer;font-size:1.4rem;text-align:center;padding:4px;border-radius:6px}
.emoji-picker-pop span:hover{transform:scale(1.25);background:var(--bg3)}

.gift-panel-pop{position:absolute;bottom:56px;left:12px;right:12px;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:12px;display:none;grid-template-columns:repeat(5,1fr);gap:8px;z-index:50}
.gift-panel-pop.open{display:grid}
.gift-opt{text-align:center;padding:10px 6px;background:var(--bg3);border-radius:10px;cursor:pointer;border:1.5px solid transparent}
.gift-opt:hover{border-color:var(--gold);background:rgba(255,215,0,0.08)}
.gift-opt-emoji{font-size:1.8rem}
.gift-opt-name{font-size:0.68rem;font-weight:700;color:var(--text2);margin-top:3px}
.gift-opt-price{font-size:0.65rem;color:var(--gold);font-weight:700}

.watch-area{flex:1;display:flex;flex-direction:column;gap:14px;padding:14px;overflow-y:auto}
.watch-video-wrap{background:var(--bg3);border-radius:var(--radius2);overflow:hidden;aspect-ratio:16/9;position:relative}
.watch-video-wrap iframe{width:100%;height:100%;border:none}
.watch-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--text2)}
.watch-controls{display:flex;gap:8px}
.watch-url-input{flex:1;background:var(--bg3);border:1.5px solid var(--border2);border-radius:10px;padding:10px 14px;color:var(--text);font-size:0.88rem;outline:none}
.watch-sync-info{font-size:0.78rem;color:var(--text2);text-align:center}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:300;display:none;align-items:flex-end;justify-content:center}
.modal-bg.show{display:flex}
.modal-box{background:var(--bg2);border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;animation:slideUp 0.35s ease;border-top:1px solid var(--border2)}
.modal-hdr{padding:22px 22px 0;display:flex;justify-content:space-between;align-items:center}
.modal-title{font-family:var(--font-display);font-size:1.2rem}
.modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--red);color:#fff;border-color:var(--red)}
.modal-body{padding:18px 22px 24px}

.profile-banner{background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:20px}
.profile-avi{width:88px;height:88px;border-radius:50%;margin:0 auto 10px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:2.6rem;border:3px solid rgba(255,255,255,0.5)}
.profile-dname{color:#fff;font-weight:800;font-size:1.35rem;font-family:var(--font-display)}
.profile-uid{color:rgba(255,255,255,0.7);font-size:0.75rem;font-family:monospace}
.profile-role-badge{display:inline-block;margin-top:6px;background:rgba(255,255,255,0.25);color:#fff;font-size:0.72rem;font-weight:800;padding:3px 10px;border-radius:999px}
.profile-bio{color:rgba(255,255,255,0.85);font-size:0.85rem;margin-top:8px;font-style:italic}
.profile-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.profile-btn{padding:8px 16px;border-radius:20px;border:none;background:rgba(255,255,255,0.2);color:#fff;font-size:0.8rem;font-weight:700;cursor:pointer}
.profile-btn:hover{background:rgba(255,255,255,0.3)}

.stat-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.stat-row:last-child{border-bottom:none}
.stat-label{color:var(--text2);font-size:0.88rem}
.stat-value{font-weight:700;font-size:0.88rem}

.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.shop-item{text-align:center;padding:10px 6px;background:var(--bg3);border-radius:10px;cursor:pointer;border:1.5px solid transparent}
.shop-item:hover{border-color:var(--accent)}
.shop-item.owned{border-color:var(--green);background:rgba(46,204,113,0.07)}
.shop-item-icon{font-size:1.5rem;margin-bottom:4px}
.shop-item-name{font-size:0.68rem;font-weight:700}
.shop-item-price{font-size:0.65rem;color:var(--gold);font-weight:700;margin-top:2px}

.level-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--gold),#ffec4e);color:#6a5200;padding:4px 12px;border-radius:999px;font-size:0.75rem;font-weight:800;margin-top:8px}

.admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}
.admin-overlay.show{display:flex}
.admin-box{background:var(--bg2);border-radius:var(--radius);width:100%;max-width:900px;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border2)}
.admin-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--card)}
.admin-hdr-title{font-family:var(--font-display);font-size:1.2rem;color:var(--accent)}
.admin-tabs-row{display:flex;background:var(--bg3);border-bottom:1px solid var(--border);overflow-x:auto}
.admin-tab{padding:12px 16px;border:none;background:transparent;color:var(--text2);font-size:0.8rem;font-weight:700;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.admin-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(108,63,255,0.06)}
.admin-body{flex:1;overflow-y:auto;padding:18px}

.admin-card{background:var(--bg3);border-radius:var(--radius2);padding:16px;margin-bottom:14px}
.admin-card-title{font-size:0.82rem;font-weight:700;color:var(--text2);margin-bottom:12px;text-transform:uppercase}
.admin-input{width:100%;background:var(--bg2);border:1.5px solid var(--border2);border-radius:9px;padding:10px 12px;color:var(--text);font-size:0.9rem;outline:none;margin-bottom:8px}
.admin-input:focus{border-color:var(--accent)}
.admin-select{width:100%;background:var(--bg2);border:1.5px solid var(--border2);border-radius:9px;padding:10px 12px;color:var(--text);font-size:0.9rem;outline:none;margin-bottom:8px}
.admin-action-btn{padding:9px 18px;border-radius:8px;border:none;font-weight:700;font-size:0.85rem;cursor:pointer}
.admin-action-btn.primary{background:var(--accent);color:#fff}
.admin-action-btn.danger{background:var(--red);color:#fff}
.admin-action-btn.success{background:var(--green);color:#fff}

.user-item{background:var(--bg2);border-radius:10px;padding:12px;display:flex;align-items:center;gap:11px;margin-bottom:8px;border:1px solid var(--border)}
.user-item.banned{border-left:3px solid var(--red);opacity:0.65}
.user-avi{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--bg3)}
.user-info{flex:1;min-width:0}
.user-name{font-weight:700;font-size:0.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-uid{font-size:0.67rem;color:var(--text2);font-family:monospace}
.user-badges-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.ubadge{font-size:0.6rem;padding:2px 7px;border-radius:4px;font-weight:800}
.ubadge-superadmin{background:#ffd700;color:#6a5200}
.ubadge-admin{background:var(--red);color:#fff}
.ubadge-mod{background:#9b59b6;color:#fff}
.ubadge-user{background:var(--accent);color:#fff}
.ubadge-banned{background:var(--red);color:#fff}
.user-actions-btns{display:flex;gap:5px;flex-wrap:wrap}
.uact-btn{padding:5px 10px;border-radius:6px;border:none;font-size:0.7rem;font-weight:700;cursor:pointer}
.uact-btn.ban{background:rgba(231,76,60,0.15);color:var(--red);border:1px solid rgba(231,76,60,0.3)}
.uact-btn.unban{background:rgba(46,204,113,0.15);color:var(--green);border:1px solid rgba(46,204,113,0.3)}
.uact-btn.give{background:rgba(255,215,0,0.15);color:var(--gold);border:1px solid rgba(255,215,0,0.3)}
.uact-btn.role{background:rgba(108,63,255,0.15);color:var(--accent);border:1px solid rgba(108,63,255,0.3)}

.bank-panel{background:linear-gradient(135deg,rgba(255,215,0,0.12),rgba(255,215,0,0.05));border:2px solid rgba(255,215,0,0.35);border-radius:var(--radius2);padding:20px;text-align:center;margin-bottom:18px}
.bank-total{font-size:2.6rem;font-weight:800;color:var(--gold);font-family:var(--font-display)}

.agency-card{background:var(--bg3);border-radius:var(--radius2);padding:16px;margin-bottom:12px;border:1px solid var(--border)}
.agency-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.agency-icon{width:48px;height:48px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.agency-name{font-weight:700;font-size:1rem}
.agency-owner{font-size:0.75rem;color:var(--text2)}

#giftOverlay{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}
.gift-fly{position:absolute;animation:gift 2.8s ease-out forwards}
.gift-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(108,63,255,0.95),rgba(255,63,122,0.95));color:#fff;padding:14px 24px;border-radius:var(--radius);font-weight:700;z-index:1001;animation:slideUp 0.4s ease}

#notifCont{position:fixed;top:12px;right:12px;z-index:1500;display:flex;flex-direction:column;gap:7px;pointer-events:none;max-width:280px}
.notif-item{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:9px;font-size:0.83rem;font-weight:600;pointer-events:auto;animation:fadeIn 0.3s}
.notif-item.success{border-left:3px solid var(--green)}
.notif-item.error{border-left:3px solid var(--red)}
.notif-item.info{border-left:3px solid var(--accent)}
.notif-item.warning{border-left:3px solid var(--yellow)}
.notif-item.gift{border-left:3px solid var(--gold);background:rgba(255,215,0,0.07)}

.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

@media(max-width:380px){
  .rooms-grid,.games-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:repeat(3,1fr)}
}
</style>
</head>
<body>

<div id="loadingScreen">
  <div class="loading-logo">💜 Exe Live</div>
  <div class="loading-spinner"></div>
</div>

<div id="notifCont"></div>
<div id="giftOverlay"></div>

<div class="modal-bg" id="forgotPasswordModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">🔐 Şifremi Unuttum</div>
      <button class="modal-close" onclick="closeModal('forgotPasswordModal')"></button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">Kullanıcı Adı, E-posta veya Telefon</label>
        <input type="text" class="form-input" id="fp-identifier" placeholder="Kullanıcı adı, e-posta veya telefon numarası">
      </div>
      <div class="form-group">
        <label class="form-label">Yeni Şifre</label>
        <input type="password" class="form-input" id="fp-newpass" placeholder="Yeni şifreniz (en az 6 karakter)">
      </div>
      <div class="form-group">
        <label class="form-label">Yeni Şifre Tekrar</label>
        <input type="password" class="form-input" id="fp-newpass2" placeholder="Yeni şifrenizi tekrarlayın">
        <div class="err-msg" id="fp-err"></div>
      </div>
      <button class="login-btn" onclick="resetPassword()">🔄 Şifreyi Güncelle</button>
    </div>
  </div>
</div>

<div class="modal-bg" id="profileModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">👤 Profil</div>
      <button class="modal-close" onclick="closeModal('profileModal')"></button>
    </div>
    <div class="modal-body" id="profileContent"></div>
  </div>
</div>

<div class="modal-bg" id="editProfileModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">✏️ Profili Düzenle</div>
      <button class="modal-close" onclick="closeModal('editProfileModal')"></button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">Profil Fotoğrafı (Emoji)</label>
        <input type="text" class="form-input" id="ep-emoji" maxlength="2" placeholder="👤">
      </div>
      <div class="form-group">
        <label class="form-label">Görünen Ad</label>
        <input type="text" class="form-input" id="ep-displayname" placeholder="Adınız">
      </div>
      <div class="form-group">
        <label class="form-label">Biyografi</label>
        <textarea class="form-input" id="ep-bio" rows="3" placeholder="Kendinizden bahsedin..."></textarea>
      </div>
      <button class="login-btn" onclick="saveProfile()">💾 Kaydet</button>
    </div>
  </div>
</div>

<div class="modal-bg" id="walletModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">💰 Cüzdanım</div>
      <button class="modal-close" onclick="closeModal('walletModal')"></button>
    </div>
    <div class="modal-body">
      <div class="bank-panel">
        <div style="color:var(--gold);font-size:0.9rem;margin-bottom:4px">Mevcut Bakiye</div>
        <div class="bank-total" id="walletBalance">0</div>
      </div>
      <div class="section-hdr"><span class="section-title">🏦 Banka Transferleri</span></div>
      <div id="bankList"></div>
      <div style="margin-top:16px;padding:12px;background:var(--bg3);border-radius:10px">
        <div style="font-size:0.8rem;color:var(--text2);margin-bottom:8px">Yeni Banka Ekle</div>
        <input type="text" class="form-input" id="newBankName" placeholder="Banka Adı" style="margin-bottom:8px">
        <input type="text" class="form-input" id="newBankIban" placeholder="IBAN" style="margin-bottom:8px">
        <button class="btn btn-primary" onclick="addBank()" style="width:100%">➕ Banka Ekle</button>
      </div>
    </div>
  </div>
</div>

<div class="modal-bg" id="messagingModal">
  <div class="modal-box" style="max-width:600px">
    <div class="modal-hdr">
      <div class="modal-title">💬 Mesajlar</div>
      <button class="modal-close" onclick="closeModal('messagingModal')"></button>
    </div>
    <div class="modal-body" style="display:flex;gap:16px;height:400px;padding:0">
      <div style="width:180px;border-right:1px solid var(--border);padding:16px;overflow-y:auto" id="conversationsList"></div>
      <div style="flex:1;display:flex;flex-direction:column;padding:16px">
        <div id="chatHeader" style="padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px;font-weight:700"></div>
        <div id="privateMessages" style="flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:12px"></div>
        <div style="display:flex;gap:8px">
          <input type="text" class="form-input" id="pmInput" placeholder="Mesaj yaz..." style="flex:1" onkeydown="if(event.key==='Enter')sendPrivateMessage()">
          <button class="btn btn-primary" onclick="sendPrivateMessage()"></button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-bg" id="friendsModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">👥 Arkadaşlarım</div>
      <button class="modal-close" onclick="closeModal('friendsModal')"></button>
    </div>
    <div class="modal-body">
      <div class="tab-row" style="margin-bottom:16px">
        <button class="tab-btn active" onclick="switchFriendsTab('friends',this)">Arkadaşlar</button>
        <button class="tab-btn" onclick="switchFriendsTab('following',this)">Takip Edilen</button>
        <button class="tab-btn" onclick="switchFriendsTab('followers',this)">Takipçiler</button>
        <button class="tab-btn" onclick="switchFriendsTab('requests',this)">İstekler</button>
      </div>
      <div id="friendsContent"></div>
    </div>
  </div>
</div>

<div class="modal-bg" id="soundModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">🔊 Sesler</div>
      <button class="modal-close" onclick="closeModal('soundModal')"></button>
    </div>
    <div class="modal-body">
      <div class="sound-grid">
        <div class="quick-btn" onclick="playSound('applause')"><div class="quick-icon">👏</div><div class="quick-label">Alkış</div></div>
        <div class="quick-btn" onclick="playSound('laugh')"><div class="quick-icon">😂</div><div class="quick-label">Kahkaha</div></div>
        <div class="quick-btn" onclick="playSound('wow')"><div class="quick-icon">😱</div><div class="quick-label">Şaşkın</div></div>
        <div class="quick-btn" onclick="playSound('love')"><div class="quick-icon">❤️</div><div class="quick-label">Aşk</div></div>
        <div class="quick-btn" onclick="playSound('sad')"><div class="quick-icon">😢</div><div class="quick-label">Üzgün</div></div>
        <div class="quick-btn" onclick="playSound('tada')"><div class="quick-icon">🎉</div><div class="quick-label">Kutlama</div></div>
      </div>
    </div>
  </div>
</div>

<div class="modal-bg" id="giftUserModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">🎁 Hediye Gönder</div>
      <button class="modal-close" onclick="closeModal('giftUserModal')"></button>
    </div>
    <div class="modal-body">
      <div class="gift-panel-pop" style="display:grid;position:static;max-height:300px;overflow-y:auto" id="userGiftPanel"></div>
    </div>
  </div>
</div>

<div class="admin-overlay" id="adminOverlay">
  <div class="admin-box">
    <div class="admin-hdr">
      <div class="admin-hdr-title">⚡ Yönetim Paneli</div>
      <button class="modal-close" onclick="closeAdmin()"></button>
    </div>
    <div class="admin-tabs-row">
      <button class="admin-tab active" onclick="adminTab('users',this)">👥 Kullanıcılar</button>
      <button class="admin-tab" onclick="adminTab('roles',this)">🎖️ Roller</button>
      <button class="admin-tab" onclick="adminTab('bank',this)">🏦 Merkez Bankası</button>
      <button class="admin-tab" onclick="adminTab('agencies',this)">🏢 Ajanslar</button>
      <button class="admin-tab" onclick="adminTab('bans',this)">🚫 Ban Listesi</button>
      <button class="admin-tab" onclick="adminTab('rooms',this)">🚪 Odalar</button>
    </div>
    <div class="admin-body" id="adminBody"></div>
  </div>
</div>

<div class="modal-bg" id="roomControlsModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-title">⚙️ Oda Yönetimi</div>
      <button class="modal-close" onclick="closeModal('roomControlsModal')"></button>
    </div>
    <div class="modal-body" id="roomControlsContent"></div>
  </div>
</div>

<div id="app">
  <div class="screen active" id="loginScreen">
    <div class="login-wrap">
      <div class="login-logo">💜 Exe Live</div>
      <div class="login-tagline">Özel Aile Platformu</div>
      <div class="login-brand">Exe Tekno Team Ltd. Şti.</div>
      <div class="login-card">
        <div class="tab-row">
          <button class="tab-btn active" id="tabLogin" onclick="switchAuthTab('login')">Giriş Yap</button>
          <button class="tab-btn" id="tabRegister" onclick="switchAuthTab('register')">Kayıt Ol</button>
        </div>
        <div id="loginSection">
          <div class="form-group">
            <label class="form-label">Kullanıcı Adı / E-posta / Telefon</label>
            <input type="text" class="form-input" id="li-user" placeholder="Kullanıcı adınız" autocomplete="username">
          </div>
          <div class="form-group">
            <label class="form-label">Şifre</label>
            <input type="password" class="form-input" id="li-pass" placeholder="Şifreniz" autocomplete="current-password" onkeydown="if(event.key==='Enter')doLogin()">
            <div class="err-msg" id="li-err">Giriş başarısız</div>
          </div>
          <button class="login-btn" id="loginBtn" onclick="doLogin()">🔐 Giriş Yap</button>
          <div style="text-align:center;margin-top:12px">
            <a href="#" onclick="openModal('forgotPasswordModal');return false" style="color:var(--accent);font-size:0.85rem">Şifremi Unuttum</a>
          </div>
        </div>
        <div id="registerSection">
          <div class="form-group">
            <label class="form-label">Kullanıcı Adı</label>
            <input type="text" class="form-input" id="rg-user" placeholder="Benzersiz kullanıcı adı" autocomplete="username">
          </div>
          <div class="form-group">
            <label class="form-label">E-posta</label>
            <input type="email" class="form-input" id="rg-email" placeholder="ornek@email.com" autocomplete="email">
          </div>
          <div class="form-group">
            <label class="form-label">Telefon (Opsiyonel)</label>
            <input type="tel" class="form-input" id="rg-phone" placeholder="+90 5XX XXX XX XX" autocomplete="tel">
          </div>
          <div class="form-group">
            <label class="form-label">Şifre</label>
            <input type="password" class="form-input" id="rg-pass" placeholder="En az 6 karakter" autocomplete="new-password">
          </div>
          <div class="form-group">
            <label class="form-label">Şifre Tekrar</label>
            <input type="password" class="form-input" id="rg-pass2" placeholder="Şifrenizi tekrarlayın" autocomplete="new-password">
            <div class="err-msg" id="rg-err">Şifreler eşleşmiyor</div>
          </div>
          <button class="login-btn" id="registerBtn" onclick="doRegister()">✨ Kayıt Ol</button>
        </div>
      </div>
      <div class="login-footer" style="font-size:0.7rem;color:var(--text3);margin-top:20px;text-align:center">
        💻 Geliştirici: Faruk (Keylo.ᵉˣᵉ✓) &nbsp;|&nbsp; 📞 +90 552 187 92 03<br>
        © 2025 Exe Tekno Team Ltd. Şti.
      </div>
    </div>
  </div>

  <div class="screen" id="mainScreen">
    <div class="top-bar">
      <div style="display:flex;align-items:center;gap:7px">
        <div class="tb-logo">💜 Exe Live</div>
        <span class="tb-badge">BETA</span>
      </div>
      <div class="tb-spacer"></div>
      <div class="balance-chip" onclick="openWallet()">
        <span>💰</span>
        <span id="tbBalance">0</span>
      </div>
      <div class="user-chip" onclick="openMyProfile()">
        <span id="tbEmoji">👤</span>
        <span id="tbName">...</span>
      </div>
      <button class="icon-btn" id="messagesBtn" onclick="openMessaging()" style="position:relative">
        💬
        <span class="nav-badge" id="msgBadge" style="position:absolute;top:-2px;right:-2px">0</span>
      </button>
      <button class="icon-btn" id="adminBtn" style="display:none" onclick="openAdmin()"></button>
      <button class="icon-btn" onclick="toggleTheme()">🌙</button>
      <button class="icon-btn danger" onclick="doLogout()">🚪</button>
    </div>

    <div id="mainContent">
      <div class="page active" id="pageHome">
        <div class="welcome-banner">
          <div class="welcome-name" id="welcomeText">Merhaba!</div>
          <div class="welcome-sub" id="welcomeSub">Bugün ne yapmak istersin?</div>
        </div>

        <div class="online-panel">
          <div class="online-title">
            <div class="online-dot"></div>
            <span>Çevrimiçi</span>
            <span class="online-count-badge" id="onlineCnt">0</span>
          </div>
          <div class="online-list" id="onlineList">
            <span style="color:var(--text3);font-size:0.82rem">Yükleniyor...</span>
          </div>
        </div>

        <div class="section-hdr">
          <span class="section-title">🚪 Odalar</span>
          <button class="btn btn-primary" style="padding:7px 14px;font-size:0.78rem" onclick="createUserRoom()">+ Oda Aç</button>
        </div>
        <div class="rooms-grid" id="roomsGrid">
          <div style="grid-column:1/-1;text-align:center;padding:20px;color:var(--text3)">Yükleniyor...</div>
        </div>

        <div class="section-hdr"><span class="section-title">⚡ Hızlı Erişim</span></div>
        <div class="quick-grid">
          <div class="quick-btn" onclick="openModal('soundModal')"><div class="quick-icon">🔊</div><div class="quick-label">Sesler</div></div>
          <div class="quick-btn" onclick="navTo('games')"><div class="quick-icon">🎮</div><div class="quick-label">Oyunlar</div></div>
          <div class="quick-btn" onclick="openFriends()"><div class="quick-icon">👥</div><div class="quick-label">Arkadaşlar</div></div>
          <div class="quick-btn" onclick="openWallet()"><div class="quick-icon">💰</div><div class="quick-label">Cüzdan</div></div>
        </div>
      </div>

      <div class="page" id="pageGames">
        <div class="section-hdr"><span class="section-title">🎮 Oyunlar</span></div>
        <div class="games-grid" id="gamesGrid"></div>
      </div>

      <div class="page" id="pageSocial">
        <div class="section-hdr"><span class="section-title">🌐 Sosyal</span></div>
        <div class="online-panel">
          <div class="online-title">👥 Tüm Kullanıcılar</div>
          <div class="online-list" id="allUsersList" style="max-height:300px;overflow-y:auto"></div>
        </div>
      </div>
    </div>

    <div class="bottom-nav">
      <div class="nav-item active" id="nav-home" onclick="navTo('home')">
        <div class="nav-icon">🏠</div>
        <div class="nav-label">Ana Sayfa</div>
      </div>
      <div class="nav-item" id="nav-games" onclick="navTo('games')">
        <div class="nav-icon">🎮</div>
        <div class="nav-label">Oyunlar</div>
      </div>
      <div class="nav-item" id="nav-social" onclick="navTo('social')">
        <div class="nav-icon">🌐</div>
        <div class="nav-label">Sosyal</div>
      </div>
      <div class="nav-item" id="nav-profile" onclick="openMyProfile()">
        <div class="nav-icon">👤</div>
        <div class="nav-label">Profil</div>
      </div>
    </div>
  </div>

  <div class="screen" id="roomScreen">
    <div class="room-container" id="roomContainer"></div>
  </div>
</div>

<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>

<script>
// ==========================================
// TÜM JAVASCRIPT - TEK DOSYA
// ==========================================

// ===== KONFİGÜRASYON =====
const FBCFG = {
  apiKey: "AIzaSyDaF83tFjugQOz--LWQ82ijGyXOd1Qr0G8",
  authDomain: "aile-813c4.firebaseapp.com",
  databaseURL: "https://aile-813c4-default-rtdb.firebaseio.com",
  projectId: "aile-813c4",
  storageBucket: "aile-813c4.firebasestorage.app",
  messagingSenderId: "381993170597",
  appId: "1:381993170597:web:6205c4eb7b02295565bf4c"
};

const CONSTANTS = {
  GIFTS: [
    {id:'rose',emoji:'🌹',name:'Gül',price:10},
    {id:'heart',emoji:'❤️',name:'Kalp',price:25},
    {id:'star',emoji:'⭐',name:'Yıldız',price:50},
    {id:'diamond',emoji:'💎',name:'Elmas',price:100},
    {id:'crown',emoji:'👑',name:'Taç',price:250},
    {id:'rocket',emoji:'🚀',name:'Roket',price:500},
    {id:'trophy',emoji:'🏆',name:'Kupa',price:1000},
    {id:'unicorn',emoji:'🦄',name:'Tek Boynuz',price:2000},
    {id:'rainbow',emoji:'🌈',name:'Gökkuşağı',price:5000},
    {id:'galaxy',emoji:'🌌',name:'Galaksi',price:10000}
  ],
  FRAMES: [
    {id:'none',name:'Yok',price:0,color:'transparent',duration:null},
    {id:'bronze',name:'Bronz',price:100,color:'#cd7f32',duration:30},
    {id:'silver',name:'Gümüş',price:500,color:'#c0c0c0',duration:30},
    {id:'gold',name:'Altın',price:2000,color:'#ffd700',duration:30},
    {id:'neon',name:'Neon',price:5000,color:'#00ffcc',duration:60},
    {id:'royal',name:'Kraliyet',price:15000,color:'#9b59b6',duration:90}
  ],
  EFFECTS: [
    {id:'none',emoji:'❌',name:'Yok',price:0,duration:null},
    {id:'confetti',emoji:'🎉',name:'Konfeti',price:500,duration:30},
    {id:'star',emoji:'⭐',name:'Yıldız',price:1000,duration:30},
    {id:'fire',emoji:'🔥',name:'Ateş',price:2500,duration:60},
    {id:'crown',emoji:'👑',name:'Kraliyet',price:5000,duration:60},
    {id:'galaxy',emoji:'🌌',name:'Galaksi',price:15000,duration:90}
  ],
  GAMES: [
    {id:'roulette',name:'Rulet',emoji:'🎰',desc:'Gerçek rulet (0-36)'},
    {id:'dice',name:'Zar',emoji:'🎲',desc:'4-5-6 kazanır'},
    {id:'slots',name:'Slot',emoji:'🎰',desc:'3\'lü eşleştir'},
    {id:'crash',name:'Crash',emoji:'📈',desc:'Zamanında çek'},
    {id:'blackjack',name:'Blackjack',emoji:'🃏',desc:'21\'i geçme'},
    {id:'coinflip',name:'Yazı/Tura',emoji:'🪙',desc:'50/50 şans'},
    {id:'mines',name:'Mayın Tarlası',emoji:'💣',desc:'Mayınlardan kaç'},
    {id:'highlow',name:'Yüksek/Düşük',emoji:'📊',desc:'Tahmin et'}
  ],
  ROULETTE_NUMBERS: [
    {n:0,color:'green'},{n:32,color:'red'},{n:15,color:'black'},{n:19,color:'red'},
    {n:4,color:'black'},{n:21,color:'red'},{n:2,color:'black'},{n:25,color:'red'},
    {n:17,color:'black'},{n:34,color:'red'},{n:6,color:'black'},{n:27,color:'red'},
    {n:13,color:'black'},{n:36,color:'red'},{n:11,color:'black'},{n:30,color:'red'},
    {n:8,color:'black'},{n:23,color:'red'},{n:10,color:'black'},{n:5,color:'red'},
    {n:24,color:'black'},{n:16,color:'red'},{n:33,color:'black'},{n:1,color:'red'},
    {n:20,color:'black'},{n:14,color:'red'},{n:31,color:'black'},{n:9,color:'red'},
    {n:22,color:'black'},{n:18,color:'red'},{n:29,color:'black'},{n:7,color:'red'},
    {n:28,color:'black'},{n:12,color:'red'},{n:35,color:'black'},{n:3,color:'red'},
    {n:26,color:'black'}
  ],
  ROLE_LABELS: {
    superadmin:'👑 Süper Admin',
    admin:'⚡ Admin',
    mod:'🛡️ Moderatör',
    user:'👤 Kullanıcı',
    agency:'🏢 Ajans Sahibi'
  },
  LEVELS: [
    {min:0,max:99,name:'Yeni Üye',badge:'🌱'},
    {min:100,max:499,name:'Bronz',badge:'🥉'},
    {min:500,max:1999,name:'Gümüş',badge:'🥈'},
    {min:2000,max:4999,name:'Altın',badge:'🥇'},
    {min:5000,max:9999,name:'Platin',badge:'💎'},
    {min:10000,max:24999,name:'Elmas',badge:'💠'},
    {min:25000,max:49999,name:'Usta',badge:'👑'},
    {min:50000,max:99999,name:'Efsane',badge:'🔥'},
    {min:100000,max:Infinity,name:'Efsanevi',badge:'🌟'}
  ]
};

// ===== GLOBAL DEĞİŞKENLER =====
let db = null;
let me = null;
let room = null;
let currentGame = null;
let unsubscribers = [];
let currentChat = null;
let messageListener = null;
let giftTargetUser = null;

// ===== YARDIMCI FONKSİYONLAR =====
function esc(s){if(!s)return'';const d=document.createElement('div');d.textContent=String(s);return d.innerHTML}
function formatNumber(n){return n.toLocaleString('tr-TR')}
function formatDate(t){return new Date(t).toLocaleString('tr-TR')}
function formatTime(t){return new Date(t).toLocaleTimeString('tr',{hour:'2-digit',minute:'2-digit'})}
function delay(ms){return new Promise(r=>setTimeout(r,ms))}
function generateId(p='ID'){return p+Date.now().toString(36).

// ==========================================

// TÜM JAVASCRIPT - TEK DOSYA (DEVAM ve TAMAMLANMIŞ)

// ==========================================



// ===== KONFİGÜRASYON =====

const FBCFG = {

apiKey: "AIzaSyDaF83tFjugQOz--LWQ82ijGyXOd1Qr0G8",

authDomain: "aile-813c4.firebaseapp.com",

databaseURL: "https://aile-813c4-default-rtdb.firebaseio.com",

projectId: "aile-813c4",

storageBucket: "aile-813c4.firebasestorage.app",

messagingSenderId: "381993170597",

appId: "1:381993170597:web:6205c4eb7b02295565bf4c"

};



const CONSTANTS = {

GIFTS: [

{id:'rose',emoji:'🌹',name:'Gül',price:10},

{id:'heart',emoji:'❤️',name:'Kalp',price:25},

{id:'star',emoji:'⭐',name:'Yıldız',price:50},

{id:'diamond',emoji:'💎',name:'Elmas',price:100},

{id:'crown',emoji:'👑',name:'Taç',price:250},

{id:'rocket',emoji:'🚀',name:'Roket',price:500},

{id:'trophy',emoji:'🏆',name:'Kupa',price:1000},

{id:'unicorn',emoji:'🦄',name:'Tek Boynuz',price:2000},

{id:'rainbow',emoji:'🌈',name:'Gökkuşağı',price:5000},

{id:'galaxy',emoji:'🌌',name:'Galaksi',price:10000}

],

FRAMES: [

{id:'none',name:'Yok',price:0,color:'transparent',duration:null},

{id:'bronze',name:'Bronz',price:100,color:'#cd7f32',duration:30},

{id:'silver',name:'Gümüş',price:500,color:'#c0c0c0',duration:30},

{id:'gold',name:'Altın',price:2000,color:'#ffd700',duration:30},

{id:'neon',name:'Neon',price:5000,color:'#00ffcc',duration:60},

{id:'royal',name:'Kraliyet',price:15000,color:'#9b59b6',duration:90}

],

EFFECTS: [

{id:'none',emoji:'❌',name:'Yok',price:0,duration:null},

{id:'confetti',emoji:'🎉',name:'Konfeti',price:500,duration:30},

{id:'star',emoji:'⭐',name:'Yıldız',price:1000,duration:30},

{id:'fire',emoji:'🔥',name:'Ateş',price:2500,duration:60},

{id:'crown',emoji:'👑',name:'Kraliyet',price:5000,duration:60},

{id:'galaxy',emoji:'🌌',name:'Galaksi',price:15000,duration:90}

],

GAMES: [

{id:'roulette',name:'Rulet',emoji:'🎰',desc:'Gerçek rulet (0-36)'},

{id:'dice',name:'Zar',emoji:'🎲',desc:'4-5-6 kazanır'},

{id:'slots',name:'Slot',emoji:'🎰',desc:'3\'lü eşleştir'},

{id:'crash',name:'Crash',emoji:'📈',desc:'Zamanında çek'},

{id:'blackjack',name:'Blackjack',emoji:'🃏',desc:'21\'i geçme'},

{id:'coinflip',name:'Yazı/Tura',emoji:'🪙',desc:'50/50 şans'},

{id:'mines',name:'Mayın Tarlası',emoji:'💣',desc:'Mayınlardan kaç'},

{id:'highlow',name:'Yüksek/Düşük',emoji:'📊',desc:'Tahmin et'}

],

ROULETTE_NUMBERS: [

{n:0,color:'green'},{n:32,color:'red'},{n:15,color:'black'},{n:19,color:'red'},

{n:4,color:'black'},{n:21,color:'red'},{n:2,color:'black'},{n:25,color:'red'},

{n:17,color:'black'},{n:34,color:'red'},{n:6,color:'black'},{n:27,color:'red'},

{n:13,color:'black'},{n:36,color:'red'},{n:11,color:'black'},{n:30,color:'red'},

{n:8,color:'black'},{n:23,color:'red'},{n:10,color:'black'},{n:5,color:'red'},

{n:24,color:'black'},{n:16,color:'red'},{n:33,color:'black'},{n:1,color:'red'},

{n:20,color:'black'},{n:14,color:'red'},{n:31,color:'black'},{n:9,color:'red'},

{n:22,color:'black'},{n:18,color:'red'},{n:29,color:'black'},{n:7,color:'red'},

{n:28,color:'black'},{n:12,color:'red'},{n:35,color:'black'},{n:3,color:'red'},

{n:26,color:'black'}

],

ROLE_LABELS: {

superadmin:'👑 Süper Admin',

admin:'⚡ Admin',

mod:'🛡️ Moderatör',

user:'👤 Kullanıcı',

agency:'🏢 Ajans Sahibi'

},

LEVELS: [

{min:0,max:99,name:'Yeni Üye',badge:'🌱'},

{min:100,max:499,name:'Bronz',badge:'🥉'},

{min:500,max:1999,name:'Gümüş',badge:'🥈'},

{min:2000,max:4999,name:'Altın',badge:'🥇'},

{min:5000,max:9999,name:'Platin',badge:'💎'},

{min:10000,max:24999,name:'Elmas',badge:'💠'},

{min:25000,max:49999,name:'Usta',badge:'👑'},

{min:50000,max:99999,name:'Efsane',badge:'🔥'},

{min:100000,max:Infinity,name:'Efsanevi',badge:'🌟'}

]

};



// ===== GLOBAL DEĞİŞKENLER =====

let db = null;

let me = null;

let room = null;

let currentGame = null;

let unsubscribers = [];

let currentChat = null;

let messageListener = null;

let giftTargetUser = null;

let currentFriendsTab = 'friends';



// ===== YARDIMCI FONKSİYONLAR =====

function esc(s){if(!s)return'';const d=document.createElement('div');d.textContent=String(s);return d.innerHTML}

function formatNumber(n){return n.toLocaleString('tr-TR')}

function formatDate(t){return new Date(t).toLocaleString('tr-TR')}

function formatTime(t){return new Date(t).toLocaleTimeString('tr',{hour:'2-digit',minute:'2-digit'})}

function delay(ms){return new Promise(r=>setTimeout(r,ms))}

function generateId(p='ID'){return p+Date.now().toString(36)+Math.random().toString(36).substr(2,5).toUpperCase()}

function getLevelInfo(xp){

for(let lvl of CONSTANTS.LEVELS){

if(xp>=lvl.min&&xp<=lvl.max)return lvl;

}

return CONSTANTS.LEVELS[CONSTANTS.LEVELS.length-1];

}



// ===== BİLDİRİMLER =====

function showNotif(msg,type='info',duration=3000){

const cont=document.getElementById('notifCont');

const div=document.createElement('div');

div.className=`notif-item ${type}`;

div.innerHTML=`<span>${type==='success'?'✅':type==='error'?'❌':type==='warning'?'⚠️':type==='gift'?'🎁':'ℹ️'}</span><span>${esc(msg)}</span>`;

cont.appendChild(div);

setTimeout(()=>div.remove(),duration);

}



// ===== MODAL YÖNETİMİ =====

function openModal(id){

document.getElementById(id).classList.add('show');

if(id==='giftUserModal')renderUserGiftPanel();

}

function closeModal(id){

document.getElementById(id).classList.remove('show');

}

function closeAllModals(){

document.querySelectorAll('.modal-bg,.admin-overlay').forEach(m=>m.classList.remove('show'));

}



// ===== TEMA =====

function toggleTheme(){

const html=document.documentElement;

const current=html.getAttribute('data-theme');

const next=current==='light'?'dark':'light';

html.setAttribute('data-theme',next);

localStorage.setItem('theme',next);

}



// ===== FİREBASE BAŞLATMA =====

function initFirebase(){

try{

firebase.initializeApp(FBCFG);

db=firebase.database();

console.log('Firebase bağlandı');

checkAuth();

}catch(e){

console.error('Firebase hatası:',e);

showNotif('Bağlantı hatası!','error');

}

}



// ===== KİMLİK DOĞRULAMA =====

function checkAuth(){

const saved=localStorage.getItem('exe_user');

if(saved){

try{

me=JSON.parse(saved);

validateSession();

}catch(e){

localStorage.removeItem('exe_user');

showScreen('loginScreen');

}

}else{

showScreen('loginScreen');

setTimeout(()=>document.getElementById('loadingScreen').style.display='none',500);

}

}



async function validateSession(){

if(!me||!me.id){

showScreen('loginScreen');

return;

}

try{

const snap=await db.ref(`users/${me.id}`).once('value');

const data=snap.val();

if(!data){

throw new Error('Kullanıcı bulunamadı');

}

if(data.banned){

showNotif('Hesabınız yasaklandı!','error',5000);

doLogout();

return;

}

me={...me,...data};

localStorage.setItem('exe_user',JSON.stringify(me));

initApp();

}catch(e){

console.error('Oturum hatası:',e);

showScreen('loginScreen');

}

}



function switchAuthTab(tab){

document.getElementById('tabLogin').classList.toggle('active',tab==='login');

document.getElementById('tabRegister').classList.toggle('active',tab==='register');

document.getElementById('loginSection').style.display=tab==='login'?'block':'none';

document.getElementById('registerSection').style.display=tab==='register'?'block':'none';

document.getElementById('registerSection').classList.toggle('show',tab==='register');

}



async function doLogin(){

const btn=document.getElementById('loginBtn');

const err=document.getElementById('li-err');

const userIn=document.getElementById('li-user').value.trim();

const pass=document.getElementById('li-pass').value;

if(!userIn||!pass){

err.textContent='Tüm alanları doldurun';

err.classList.add('show');

return;

}

btn.disabled=true;

err.classList.remove('show');

try{

const usersSnap=await db.ref('users').once('value');

const users=usersSnap.val()||{};

let found=null;

for(let[id,data]of Object.entries(users)){

if((data.username===userIn||data.email===userIn||data.phone===userIn)&&data.password===pass){

found={id,...data};

break;

}

}

if(!found){

throw new Error('Kullanıcı adı veya şifre hatalı');

}

if(found.banned){

throw new Error('Hesabınız yasaklandı');

}

me=found;

me.lastLogin=Date.now();

await db.ref(`users/${me.id}`).update({lastLogin:me.lastLogin,online:true});

localStorage.setItem('exe_user',JSON.stringify(me));

showNotif('Giriş başarılı!','success');

initApp();

}catch(e){

err.textContent=e.message;

err.classList.add('show');

}finally{

btn.disabled=false;

}

}



async function doRegister(){

const btn=document.getElementById('registerBtn');

const err=document.getElementById('rg-err');

const user=document.getElementById('rg-user').value.trim().toLowerCase();

const email=document.getElementById('rg-email').value.trim();

const phone=document.getElementById('rg-phone').value.trim();

const pass=document.getElementById('rg-pass').value;

const pass2=document.getElementById('rg-pass2').value;

if(!user||!email||!pass){

err.textContent='Zorunlu alanları doldurun';

err.classList.add('show');

return;

}

if(pass.length<6){

err.textContent='Şifre en az 6 karakter olmalı';

err.classList.add('show');

return;

}

if(pass!==pass2){

err.textContent='Şifreler eşleşmiyor';

err.classList.add('show');

return;

}

btn.disabled=true;

err.classList.remove('show');

try{

const usersSnap=await db.ref('users').once('value');

const users=usersSnap.val()||{};

for(let data of Object.values(users)){

if(data.username===user)throw new Error('Bu kullanıcı adı alınmış');

if(data.email===email)throw new Error('Bu e-posta kayıtlı');

}

const newId='user_'+Date.now();

const newUser={

id:newId,

username:user,

email:email,

phone:phone||null,

password:pass,

displayName:user,

emoji:'👤',

bio:'',

balance:1000,

xp:0,

role:'user',

createdAt:Date.now(),

lastLogin:Date.now(),

online:true,

banned:false,

banks:[],

inventory:{frames:[],effects:[]},

friends:[],

following:[],

followers:[],

friendRequests:[]

};

await db.ref(`users/${newId}`).set(newUser);

me=newUser;

localStorage.setItem('exe_user',JSON.stringify(me));

showNotif('Kayıt başarılı! Hoş geldiniz','success');

initApp();

}catch(e){

err.textContent=e.message;

err.classList.add('show');

}finally{

btn.disabled=false;

}

}



async function resetPassword(){

const id=document.getElementById('fp-identifier').value.trim();

const pass=document.getElementById('fp-newpass').value;

const pass2=document.getElementById('fp-newpass2').value;

const err=document.getElementById('fp-err');

if(!id||!pass||!pass2){

err.textContent='Tüm alanları doldurun';

err.classList.add('show');

return;

}

if(pass.length<6){

err.textContent='Şifre en az 6 karakter olmalı';

err.classList.add('show');

return;

}

if(pass!==pass2){

err.textContent='Şifreler eşleşmiyor';

err.classList.add('show');

return;

}

try{

const usersSnap=await db.ref('users').once('value');

const users=usersSnap.val()||{};

let foundId=null;

for(let[uid,data]of Object.entries(users)){

if(data.username===id||data.email===id||data.phone===id){

foundId=uid;

break;

}

}

if(!foundId)throw new Error('Kullanıcı bulunamadı');

await db.ref(`users/${foundId}/password`).set(pass);

showNotif('Şifre güncellendi!','success');

closeModal('forgotPasswordModal');

}catch(e){

err.textContent=e.message;

err.classList.add('show');

}

}



function doLogout(){

if(me&&db){

db.ref(`users/${me.id}`).update({online:false,lastSeen:Date.now()});

}

me=null;

localStorage.removeItem('exe_user');

unsubscribers.forEach(u=>u&&u());

unsubscribers=[];

showScreen('loginScreen');

showNotif('Çıkış yapıldı','info');

}



// ===== UYGULAMA BAŞLATMA =====

function initApp(){

document.getElementById('loadingScreen').style.display='none';

showScreen('mainScreen');

updateTopBar();

loadHome();

setupPresence();

if(me.role==='admin'||me.role==='superadmin'){

document.getElementById('adminBtn').style.display='flex';

}

db.ref('.info/connected').on('value',(snap)=>{

if(snap.val()===true&&me){

db.ref(`users/${me.id}`).update({online:true});

}

});

}



function showScreen(id){

document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));

document.getElementById(id).classList.add('active');

}



function updateTopBar(){

document.getElementById('tbBalance').textContent=formatNumber(me.balance);

document.getElementById('tbEmoji').textContent=me.emoji||'👤';

document.getElementById('tbName').textContent=me.displayName||me.username;

document.getElementById('welcomeText').textContent=`Merhaba, ${me.displayName||me.username}!`;

}



function setupPresence(){

if(!me)return;

const conRef=db.ref(`users/${me.id}/online`);

conRef.onDisconnect().set(false);

conRef.set(true);

}



// ===== NAVİGASYON =====

function navTo(page){

document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));

document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active'));

document.getElementById(`page${page.charAt(0).toUpperCase()+page.slice(1)}`).classList.add('active');

document.getElementById(`nav-${page}`).classList.add('active');

if(page==='home')loadHome();

if(page==='games')loadGames();

if(page==='social')loadSocial();

}



// ===== ANA SAYFA =====

async function loadHome(){

updateTopBar();

loadOnlineUsers();

loadRooms();

}



function loadOnlineUsers(){

const ref=db.ref('users');

ref.orderByChild('online').equalTo(true).on('value',(snap)=>{

const users=snap.val()||{};

const list=document.getElementById('onlineList');

const count=Object.keys(users).length;

document.getElementById('onlineCnt').textContent=count;

if(count===0){

list.innerHTML='<span style="color:var(--text3);font-size:0.82rem">Çevrimiçi kullanıcı yok</span>';

return;

}

list.innerHTML=Object.entries(users).map(([id,u])=>{

if(id===me.id)return '';

return `<div class="online-pill" onclick="viewProfile('${id}')">

<span>${u.emoji||'👤'}</span>

<span>${esc(u.displayName||u.username)}</span>

</div>`;

}).join('');

},(err)=>{

console.error('Online hatası:',err);

});

unsubscribers.push(()=>ref.off());

}



function loadRooms(){

const ref=db.ref('rooms');

ref.on('value',(snap)=>{

const rooms=snap.val()||{};

const grid=document.getElementById('roomsGrid');

const sorted=Object.entries(rooms).sort((a,b)=>(b[1].userCount||0)-(a[1].userCount||0));

grid.innerHTML=sorted.map(([id,r])=>{

const isLive=r.type==='live'||r.userCount>0;

return `<div class="room-card ${r.wide?'wide':''}" onclick="enterRoom('${id}')">

${isLive?'<span class="live-badge">● CANLI</span>':''}

<div class="room-icon">${r.icon||'🚪'}</div>

<div class="room-name">${esc(r.name)}</div>

<div class="room-desc">${esc(r.desc||'Özel oda')}</div>

<div class="room-meta">

<span>👥 ${r.userCount||0}</span>

<span>${r.type==='public'?'🌐':'🔒'}</span>

</div>

</div>`;

}).join('');

if(sorted.length===0){

grid.innerHTML='<div style="grid-column:1/-1;text-align:center;padding:20px;color:var(--text3)">Henüz oda yok</div>';

}

});

unsubscribers.push(()=>ref.off());

}



async function createUserRoom(){

const name=prompt('Oda adı:');

if(!name)return;

const roomId='room_'+Date.now();

const roomData={

id:roomId,

name:name,

desc:'Kullanıcı odası',

type:'public',

icon:'🚪',

createdBy:me.id,

createdAt:Date.now(),

userCount:0,

users:{},

messages:{},

stage:{},

videoUrl:'',

videoTime:0,

videoPlaying:false

};

await db.ref(`rooms/${roomId}`).set(roomData);

enterRoom(roomId);

showNotif('Oda oluşturuldu!','success');

}



// ===== ODA SİSTEMİ =====

async function enterRoom(roomId){

if(room){

await leaveCurrentRoom();

}

const roomRef=db.ref(`rooms/${roomId}`);

const snap=await roomRef.once('value');

const data=snap.val();

if(!data){

showNotif('Oda bulunamadı!','error');

return;

}

room={id:roomId,...data};

await db.ref(`rooms/${roomId}/users/${me.id}`).set({

id:me.id,

name:me.displayName||me.username,

emoji:me.emoji||'👤',

role:me.role,

joinedAt:Date.now(),

isSpeaking:false,

isMuted:false

});

db.ref(`rooms/${roomId}/userCount`).transaction(c=>(c||0)+1);

showScreen('roomScreen');

renderRoom();

setupRoomListeners();

}



async function leaveCurrentRoom(){

if(!room||!db)return;

await db.ref(`rooms/${room.id}/users/${me.id}`).remove();

db.ref(`rooms/${room.id}/userCount`).transaction(c=>Math.max(0,(c||0)-1));

unsubscribers.forEach(u=>u&&u());

unsubscribers=[];

room=null;

}



function renderRoom(){

const container=document.getElementById('roomContainer');

container.innerHTML=`

<div class="room-hdr">

<button class="room-hdr-back" onclick="exitRoom()">←</button>

<div class="room-hdr-info">

<div class="room-hdr-name">${esc(room.name)}</div>

<div class="room-hdr-id">ID: ${room.id}</div>

</div>

<div class="room-hdr-actions">

<button class="icon-btn" onclick="toggleMute()" id="muteBtn">🎤</button>

<button class="icon-btn" onclick="openRoomControls()" style="display:${room.createdBy===me.id||me.role==='admin'?'flex':'none'}">⚙️</button>

</div>

</div>

<div class="room-tabs">

<button class="room-tab active" onclick="switchRoomTab('stage',this)">🎙️ Sahne</button>

<button class="room-tab" onclick="switchRoomTab('chat',this)">💬 Sohbet</button>

<button class="room-tab" onclick="switchRoomTab('watch',this)">📺 İzle</button>

</div>

<div class="room-tab-content active" id="tab-stage">

<div class="stage-area">

<div class="stage-title">🎙️ Konuşmacılar (8 kişi)</div>

<div class="stage-grid" id="stageGrid"></div>

</div>

</div>

<div class="room-tab-content" id="tab-chat">

<div class="chat-msgs" id="chatMsgs"></div>

<div class="chat-input-wrap">

<div class="emoji-picker-pop" id="emojiPicker"></div>

<div class="gift-panel-pop" id="giftPanel"></div>

<div class="chat-input-row">

<button class="chat-action-btn" onclick="toggleEmojiPicker()">😊</button>

<textarea class="chat-textarea" id="chatInput" placeholder="Mesaj yaz..." rows="1" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChat()}"></textarea>

<button class="chat-action-btn" onclick="toggleGiftPanel()">🎁</button>

<button class="chat-action-btn send-btn" onclick="sendChat()">➤</button>

</div>

</div>

</div>

<div class="room-tab-content" id="tab-watch">

<div class="watch-area">

<div class="watch-video-wrap" id="videoWrap">

<div class="watch-placeholder">

<span>📺</span>

<span>Video yok</span>

</div>

</div>

<div class="watch-controls">

<input type="text" class="watch-url-input" id="videoUrl" placeholder="YouTube URL veya video linki">

<button class="btn btn-primary" onclick="loadVideo()">▶️ Oynat</button>

<button class="btn btn-secondary" onclick="syncVideo()">🔄 Senkronize</button>

</div>

<div class="watch-sync-info" id="syncInfo">Video senkronize değil</div>

</div>

</div>

`;

renderEmojiPicker();

renderGiftPanel();

}



function setupRoomListeners(){

const stageRef=db.ref(`rooms/${room.id}/users`);

stageRef.on('value',(snap)=>{

const users=snap.val()||{};

const grid=document.getElementById('stageGrid');

const list=Object.values(users).sort((a,b)=>a.joinedAt-b.joinedAt).slice(0,8);

grid.innerHTML=list.map(u=>`

<div class="stage-slot ${u.isSpeaking?'speaking':''} ${u.isMuted?'muted':''}" onclick="viewProfile('${u.id}')">

<div class="stage-avatar" style="border:2px solid ${getUserFrameColor(u.id)}">${u.emoji}</div>

<div class="stage-name">${esc(u.name)}</div>

<div class="stage-mic">${u.isMuted?'🔇':u.isSpeaking?'🎤':'🔈'}</div>

</div>

`).join('');

if(list.length===0){

grid.innerHTML='<div class="stage-empty">Henüz kimse yok</div>';

}

});

unsubscribers.push(()=>stageRef.off());

const msgRef=db.ref(`rooms/${room.id}/messages`).limitToLast(50);

msgRef.on('child_added',(snap)=>{

const m=snap.val();

appendChatMessage(m);

});

unsubscribers.push(()=>msgRef.off());

const videoRef=db.ref(`rooms/${room.id}/videoPlaying`);

videoRef.on('value',(snap)=>{

// Video senkronizasyonu burada yapılır

});

unsubscribers.push(()=>videoRef.off());

}



function getUserFrameColor(userId){

// Kullanıcı çerçeve rengi (premium özellik)

return 'var(--border2)';

}



function switchRoomTab(tab,btn){

document.querySelectorAll('.room-tab').forEach(t=>t.classList.remove('active'));

document.querySelectorAll('.room-tab-content').forEach(c=>c.classList.remove('active'));

btn.classList.add('active');

document.getElementById(`tab-${tab}`).classList.add('active');

}



function exitRoom(){

leaveCurrentRoom();

showScreen('mainScreen');

navTo('home');

}



async function toggleMute(){

if(!room)return;

const muted=!me.isMuted;

me.isMuted=muted;

await db.ref(`rooms/${room.id}/users/${me.id}/isMuted`).set(muted);

document.getElementById('muteBtn').textContent=muted?'🔇':'🎤';

}



function renderEmojiPicker(){

const picker=document.getElementById('emojiPicker');

const emojis=['😀','😂','🥰','😎','🤔','😢','😡','👍','👎','❤️','🔥','🎉','👏','🙏','💯','⚡','💀','🤡','🥶','🤯'];

picker.innerHTML=emojis.map(e=>`<span onclick="insertEmoji('${e}')">${e}</span>`).join('');

}



function toggleEmojiPicker(){

document.getElementById('emojiPicker').classList.toggle('open');

document.getElementById('giftPanel').classList.remove('open');

}



function insertEmoji(emoji){

const input=document.getElementById('chatInput');

input.value+=emoji;

document.getElementById('emojiPicker').classList.remove('open');

input.focus();

}



function renderGiftPanel(){

const panel=document.getElementById('giftPanel');

panel.innerHTML=CONSTANTS.GIFTS.map(g=>`

<div class="gift-opt" onclick="sendRoomGift('${g.id}')">

<div class="gift-opt-emoji">${g.emoji}</div>

<div class="gift-opt-name">${g.name}</div>

<div class="gift-opt-price">${g.price} 💰</div>

</div>

`).join('');

}



function renderUserGiftPanel(){

const panel=document.getElementById('userGiftPanel');

if(!panel)return;

panel.innerHTML=CONSTANTS.GIFTS.map(g=>`

<div class="gift-opt" onclick="sendUserGift('${g.id}')">

<div class="gift-opt-emoji">${g.emoji}</div>

<div class="gift-opt-name">${g.name}</div>

<div class="gift-opt-price">${g.price} 💰</div>

</div>

`).join('');

}



function toggleGiftPanel(){

document.getElementById('giftPanel').classList.toggle('open');

document.getElementById('emojiPicker').classList.remove('open');

}



async function sendChat(){

const input=document.getElementById('chatInput');

const text=input.value.trim();

if(!text||!room)return;

const msg={

id:generateId('msg'),

userId:me.id,

userName:me.displayName||me.username,

userEmoji:me.emoji||'👤',

text:text,

timestamp:Date.now()

};

await db.ref(`rooms/${room.id}/messages/${msg.id}`).set(msg);

input.value='';

}



function appendChatMessage(m){

const cont=document.getElementById('chatMsgs');

if(!cont)return;

const div=document.createElement('div');

div.className=`chat-msg ${m.userId===me.id?'mine':'theirs'}`;

div.innerHTML=`

${m.userId!==me.id?`<div class="msg-sender">${esc(m.userName)}</div>`:''}

<div class="msg-bubble">${esc(m.text)}</div>

<div class="msg-time">${formatTime(m.timestamp)}</div>

`;

cont.appendChild(div);

cont.scrollTop=cont.scrollHeight;

}



async function sendRoomGift(giftId){

const gift=CONSTANTS.GIFTS.find(g=>g.id===giftId);

if(!gift||!room)return;

if(me.balance<gift.price){

showNotif('Yetersiz bakiye!','error');

return;

}

await db.ref(`users/${me.id}/balance`).set(me.balance-gift.price);

me.balance-=gift.price;

updateTopBar();

const msg={

id:generateId('msg'),

type:'gift',

gift:gift,

userId:me.id,

userName:me.displayName||me.username,

timestamp:Date.now()

};

await db.ref(`rooms/${room.id}/messages/${msg.id}`).set(msg);

showGiftAnimation(gift.emoji);

document.getElementById('giftPanel').classList.remove('open');

}



function showGiftAnimation(emoji){

const overlay=document.getElementById('giftOverlay');

for(let i=0;i<5;i++){

setTimeout(()=>{

const el=document.createElement('div');

el.className='gift-fly';

el.textContent=emoji;

el.style.left=Math.random()*80+10+'%';

el.style.fontSize=Math.random()*20+20+'px';

overlay.appendChild(el);

setTimeout(()=>el.remove(),2800);

},i*200);

}

}



// ===== VİDEO SENKRONİZASYONU =====

function loadVideo(){

const url=document.getElementById('videoUrl').value;

if(!url||!room)return;

const videoId=extractYouTubeId(url);

if(!videoId){

showNotif('Geçersiz YouTube URL','error');

return;

}

db.ref(`rooms/${room.id}`).update({

videoUrl:videoId,

videoPlaying:true,

videoTime:0,

lastUpdate:Date.now()

});

renderYouTubePlayer(videoId);

}



function extractYouTubeId(url){

const regExp=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;

const match=url.match(regExp);

return(match&&match[2].length===11)?match[2]:null;

}



function renderYouTubePlayer(videoId){

const wrap=document.getElementById('videoWrap');

wrap.innerHTML=`<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1&enablejsapi=1" allowfullscreen allow="autoplay"></iframe>`;

}



function syncVideo(){

if(!room)return;

// Video senkronizasyon mantığı

showNotif('Video senkronize edildi','success');

}



// ===== OYUNLAR =====

function loadGames(){

const grid=document.getElementById('gamesGrid');

grid.innerHTML=CONSTANTS.GAMES.map(g=>`

<div class="game-card" onclick="openGame('${g.id}')">

<div class="game-card-icon">${g.emoji}</div>

<div class="game-card-name">${g.name}</div>

<div class="game-card-desc">${g.desc}</div>

</div>

`).join('');

}



function openGame(gameId){

const game=CONSTANTS.GAMES.find(g=>g.id===gameId);

if(!game)return;

currentGame=gameId;

const content=document.getElementById('mainContent');

let gameHTML=`

<div class="game-screen">

<div class="game-hdr">

<button class="game-back" onclick="closeGame()">←</button>

<div class="game-title">${game.emoji} ${game.name}</div>

<div class="game-balance">${formatNumber(me.balance)} 💰</div>

</div>

<div class="game-result" id="gameResult"></div>

`;

if(gameId==='roulette'){

gameHTML+=`

<div class="roulette-wrap">

<div class="roulette-ring" id="rouletteWheel">

<div class="roulette-pin"></div>

<div class="roulette-center">🎰</div>

</div>

<div class="roulette-bets" id="rouletteBets">

<button class="roulette-bet-btn red" onclick="placeRouletteBet('red')">Kırmızı (2x)</button>

<button class="roulette-bet-btn black" onclick="placeRouletteBet('black')">Siyah (2x)</button>

<button class="roulette-bet-btn green" onclick="placeRouletteBet('green')">Yeşil (14x)</button>

</div>

<div class="bet-row">

<span>Bahis:</span>

<input type="number" class="bet-field" id="betAmount" value="100" min="10">

<button class="btn btn-gold" onclick="spinRoulette()">🎰 Çevir</button>

</div>

</div>

`;

}else if(gameId==='dice'){

gameHTML+=`

<div class="dice-wrap">

<div class="dice-face" id="diceFace">🎲</div>

<div class="bet-row">

<span>Bahis:</span>

<input type="number" class="bet-field" id="betAmount" value="100" min="10">

<button class="btn btn-gold" onclick="rollDice()">🎲 At</button>

</div>

<div style="margin-top:20px;color:var(--text2);font-size:0.9rem">

4, 5, 6 kazanır (2x)<br>

1, 2, 3 kaybeder

</div>

</div>

`;

}else if(gameId==='slots'){

gameHTML+=`

<div class="slots-wrap">

<div class="slots-display">

<div class="slot-reel" id="slot1">❓</div>

<div class="slot-reel" id="slot2">❓</div>

<div class="slot-reel" id="slot3">❓</div>

</div>

<div class="bet-row">

<span>Bahis:</span>

<input type="number" class="bet-field" id="betAmount" value="100" min="10">

<button class="btn btn-gold" onclick="spinSlots()">🎰 Çevir</button>

</div>

<div style="margin-top:20px;color:var(--text2);font-size:0.9rem">

3 eşleşme = 10x<br>

2 eşleşme = 3x

</div>

</div>

`;

}else if(gameId==='crash'){

gameHTML+=`

<div class="crash-wrap">

<div class="crash-mult" id="crashMult">1.00x</div>

<div class="crash-chart" id="crashChart">

<div class="crash-bar" id="crashBar" style="width:0%"></div>

</div>

<div class="bet-row">

<span>Bahis:</span>

<input type="number" class="bet-field" id="betAmount" value="100" min="10">

</div>

<div class="crash-btns">

<button class="btn btn-green" id="crashStart" onclick="startCrash()">▶️ Başlat</button>

<button class="btn btn-danger" id="crashCashout" onclick="cashoutCrash()" disabled>💰 Çek</button>

</div>

</div>

`;

}else if(gameId==='blackjack'){

gameHTML+=`

<div class="bj-table">

<div class="bj-area-label">Krupiye</div>

<div class="bj-hand" id="dealerHand"></div>

<div class="bj-score" id="dealerScore">0</div>

<div class="bj-divider">VS</div>

<div class="bj-area-label">Sen</div>

<div class="bj-hand" id="playerHand"></div>

<div class="bj-score" id="playerScore">0</div>

<div class="bj-controls" id="bjControls">

<div class="bet-row">

<span>Bahis:</span>

<input type="number" class="bet-field" id="betAmount" value="100" min="10">

<button class="btn btn-gold" onclick="startBlackjack()">🃏 Başlat</button>

</div>

</div>

</div>

`;

}else if(gameId==='coinflip'){

gameHTML+=`

<div class="dice-wrap">

<div class="dice-face" id="coinFace" style="font-size:4rem">🪙</div>

<div class="bet-row">

<button class="btn btn-secondary" onclick="setCoinSide('heads')">Yazı</button>

<button class="btn btn-secondary" onclick="setCoinSide('tails')">Tura</button>

</div>

<div class="bet-row">

<span>Bahis:</span>

<input type="number" class="bet-field" id="betAmount" value="100" min="10">

<button class="btn btn-gold" onclick="flipCoin()">🪙 At</button>

</div>

<input type="hidden" id="coinChoice" value="heads">

</div>

`;

}

gameHTML+=`</div>`;

content.innerHTML=gameHTML;

}



function closeGame(){

currentGame=null;

const content=document.getElementById('mainContent');

content.innerHTML=`

<div class="page active" id="pageHome">

<div class="welcome-banner">

<div class="welcome-name" id="welcomeText">Merhaba!</div>

<div class="welcome-sub" id="welcomeSub">Bugün ne yapmak istersin?</div>

</div>

<div class="online-panel">

<div class="online-title">

<div class="online-dot"></div>

<span>Çevrimiçi</span>

<span class="online-count-badge" id="onlineCnt">0</span>

</div>

<div class="online-list" id="onlineList"></div>

</div>

<div class="section-hdr">

<span class="section-title">🚪 Odalar</span>

<button class="btn btn-primary" style="padding:7px 14px;font-size:0.78rem" onclick="createUserRoom()">+ Oda Aç</button>

</div>

<div class="rooms-grid" id="roomsGrid"></div>

<div class="section-hdr"><span class="section-title">⚡ Hızlı Erişim</span></div>

<div class="quick-grid">

<div class="quick-btn" onclick="openModal('soundModal')"><div class="quick-icon">🔊</div><div class="quick-label">Sesler</div></div>

<div class="quick-btn" onclick="navTo('games')"><div class="quick-icon">🎮</div><div class="quick-label">Oyunlar</div></div>

<div class="quick-btn" onclick="openFriends()"><div class="quick-icon">👥</div><div class="quick-label">Arkadaşlar</div></div>

<div class="quick-btn" onclick="openWallet()"><div class="quick-icon">💰</div><div class="quick-label">Cüzdan</div></div>

</div>

</div>

<div class="page" id="pageGames">

<div class="section-hdr"><span class="section-title">🎮 Oyunlar</span></div>

<div class="games-grid" id="gamesGrid"></div>

</div>

<div class="page" id="pageSocial">

<div class="section-hdr"><span class="section-title">🌐 Sosyal</span></div>

<div class="online-panel">

<div class="online-title">👥 Tüm Kullanıcılar</div>

<div class="online-list" id="allUsersList" style="max-height:300px;overflow-y:auto"></div>

</div>

</div>

`;

loadHome();

navTo('games');

}



// ===== RULET =====

let rouletteBet={type:null,amount:0};



function placeRouletteBet(type){

rouletteBet.type=type;

document.querySelectorAll('.roulette-bet-btn').forEach(b=>b.classList.remove('active'));

event.target.classList.add('active');

}



async function spinRoulette(){

const amount=parseInt(document.getElementById('betAmount').value)||0;

if(!rouletteBet.type){

showNotif('Bahis seçin!','error');

return;

}

if(amount<10||amount>me.balance){

showNotif('Geçersiz bakiye!','error');

return;

}

const wheel=document.getElementById('rouletteWheel');

const result=Math.floor(Math.random()*37);

const resultData=CONSTANTS.ROULETTE_NUMBERS[result];

wheel.style.transition='none';

wheel.style.transform='rotate(0deg)';

await delay(50);

const spins=5+Math.random()*3;

const finalDeg=spins*360+(result*9.73); // 360/37 = 9.73

wheel.style.transition='transform 4s cubic-bezier(0.25,0.1,0.25,1)';

wheel.style.transform=`rotate(-${finalDeg}deg)`;

await delay(4000);

let win=false;

let multiplier=0;

if(rouletteBet.type==='green'&&resultData.color==='green'){

win=true;

multiplier=14;

}else if(rouletteBet.type==='red'&&resultData.color==='red'){

win=true;

multiplier=2;

}else if(rouletteBet.type==='black'&&resultData.color==='black'){

win=true;

multiplier=2;

}

const resultText=`Top ${resultData.n} ${resultData.color==='red'?'🔴':resultData.color==='black'?'⚫':'🟢'}`;

const winAmount=win?amount*multiplier:0;

if(win){

await updateBalance(winAmount);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--green)">${resultText} - ${formatNumber(winAmount)} 💰 Kazandın!</span>`;

showNotif(`Kazandın! +${formatNumber(winAmount)} 💰`,'success');

}else{

await updateBalance(-amount);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--red)">${resultText} - Kaybettin</span>`;

}

rouletteBet.type=null;

document.querySelectorAll('.roulette-bet-btn').forEach(b=>b.classList.remove('active'));

}



// ===== ZAR =====

async function rollDice(){

const amount=parseInt(document.getElementById('betAmount').value)||0;

if(amount<10||amount>me.balance){

showNotif('Geçersiz bakiye!','error');

return;

}

const diceEl=document.getElementById('diceFace');

let rolls=0;

const interval=setInterval(()=>{

diceEl.textContent=['⚀','⚁','⚂','⚃','⚄','⚅'][Math.floor(Math.random()*6)];

rolls++;

if(rolls>10){

clearInterval(interval);

const final=Math.floor(Math.random()*6)+1;

diceEl.textContent=['⚀','⚁','⚂','⚃','⚄','⚅'][final-1];

if(final>=4){

const win=amount*2;

updateBalance(win);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--green)">${final} - Kazandın! +${formatNumber(win)} 💰</span>`;

showNotif('Kazandın!','success');

}else{

updateBalance(-amount);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--red)">${final} - Kaybettin</span>`;

}

}

},100);

}



// ===== SLOT =====

async function spinSlots(){

const amount=parseInt(document.getElementById('betAmount').value)||0;

if(amount<10||amount>me.balance){

showNotif('Geçersiz bakiye!','error');

return;

}

const symbols=['🍒','🍋','🍇','💎','7️⃣','🎰'];

const reels=[document.getElementById('slot1'),document.getElementById('slot2'),document.getElementById('slot3')];

let completed=0;

reels.forEach((reel,i)=>{

let spins=0;

const interval=setInterval(()=>{

reel.textContent=symbols[Math.floor(Math.random()*symbols.length)];

spins++;

if(spins>10+i*5){

clearInterval(interval);

completed++;

if(completed===3)checkSlotsResult(reels,amount);

}

},80+i*40);

});

}



function checkSlotsResult(reels,amount){

const vals=reels.map(r=>r.textContent);

let win=false;

let multiplier=0;

if(vals[0]===vals[1]&&vals[1]===vals[2]){

win=true;

multiplier=vals[0]==='7️⃣'?20:vals[0]==='💎'?15:10;

}else if(vals[0]===vals[1]||vals[1]===vals[2]||vals[0]===vals[2]){

win=true;

multiplier=3;

}

if(win){

const winAmount=amount*multiplier;

updateBalance(winAmount);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--green)">${vals.join('')} - ${formatNumber(winAmount)} 💰 Kazandın!</span>`;

showNotif('Slot kazandı!','success');

}else{

updateBalance(-amount);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--red)">${vals.join('')} - Kaybettin</span>`;

}

}



// ===== CRASH =====

let crashInterval=null;

let crashMultiplier=1;

let crashActive=false;

let crashBet=0;



function startCrash(){

const amount=parseInt(document.getElementById('betAmount').value)||0;

if(amount<10||amount>me.balance){

showNotif('Geçersiz bakiye!','error');

return;

}

crashBet=amount;

updateBalance(-amount);

crashMultiplier=1;

crashActive=true;

document.getElementById('crashStart').disabled=true;

document.getElementById('crashCashout').disabled=false;

document.getElementById('crashResult').textContent='';

const crashPoint=1+Math.random()*5; // 1x ile 6x arası

crashInterval=setInterval(()=>{

crashMultiplier+=0.05;

document.getElementById('crashMult').textContent=crashMultiplier.toFixed(2)+'x';

document.getElementById('crashBar').style.width=Math.min((crashMultiplier/6)*100,100)+'%';

if(crashMultiplier>=crashPoint){

endCrash(false);

}

},100);

}



function cashoutCrash(){

if(!crashActive)return;

endCrash(true);

}



function endCrash(cashed){

clearInterval(crashInterval);

crashActive=false;

document.getElementById('crashStart').disabled=false;

document.getElementById('crashCashout').disabled=true;

if(cashed){

const win=Math.floor(crashBet*crashMultiplier);

updateBalance(win);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--green)">${crashMultiplier.toFixed(2)}x - ${formatNumber(win)} 💰 Çektin!</span>`;

showNotif('Çekildi!','success');

}else{

document.getElementById('gameResult').innerHTML=`<span style="color:var(--red)">💥 ${crashMultiplier.toFixed(2)}x - Patladı!</span>`;

}

}



// ===== BLACKJACK =====

let bjDealer=[];

let bjPlayer=[];

let bjBet=0;



function startBlackjack(){

bjBet=parseInt(document.getElementById('betAmount').value)||0;

if(bjBet<10||bjBet>me.balance){

showNotif('Geçersiz bakiye!','error');

return;

}

updateBalance(-bjBet);

bjDealer=[drawCard(),drawCard()];

bjPlayer=[drawCard(),drawCard()];

renderBJ();

document.getElementById('bjControls').innerHTML=`

<button class="btn btn-primary" onclick="hitBJ()">🃏 Kart Çek</button>

<button class="btn btn-gold" onclick="standBJ()">✋ Dur</button>

`;

}



function drawCard(){

const suits=['♠','♥','♦','♣'];

const values=['2','3','4','5','6','7','8','9','10','J','Q','K','A'];

return{

suit:suits[Math.floor(Math.random()*4)],

value:values[Math.floor(Math.random()*13)],

hidden:false

};

}



function cardValue(card){

if(['J','Q','K'].includes(card.value))return 10;

if(card.value==='A')return 11;

return parseInt(card.value);

}



function calculateHand(hand){

let sum=0;

let aces=0;

hand.forEach(c=>{

if(c.value==='A')aces++;

else sum+=cardValue(c);

});

for(let i=0;i<aces;i++){

if(sum+11>21)sum+=1;

else sum+=11;

}

return sum;

}



function renderBJ(){

const renderCard=c=>`<div class="bj-card ${c.suit==='♥'||c.suit==='♦'?'red-suit':''} ${c.hidden?'hidden-card':''}">

${c.hidden?'':c.value+'<br>'+c.suit}

</div>`;

document.getElementById('dealerHand').innerHTML=bjDealer.map(renderCard).join('');

document.getElementById('playerHand').innerHTML=bjPlayer.map(renderCard).join('');

document.getElementById('dealerScore').textContent=calculateHand(bjDealer.filter(c=>!c.hidden));

document.getElementById('playerScore').textContent=calculateHand(bjPlayer);

}



function hitBJ(){

bjPlayer.push(drawCard());

renderBJ();

if(calculateHand(bjPlayer)>21){

document.getElementById('gameResult').innerHTML='<span style="color:var(--red)">21\'i geçtin! Kaybettin</span>';

document.getElementById('bjControls').innerHTML=`<button class="btn btn-gold" onclick="startBlackjack()">🃏 Yeni Oyun</button>`;

}

}



async function standBJ(){

bjDealer[0].hidden=false;

while(calculateHand(bjDealer)<17){

bjDealer.push(drawCard());

await delay(500);

renderBJ();

}

const pScore=calculateHand(bjPlayer);

const dScore=calculateHand(bjDealer);

let result='';

if(dScore>21||pScore>dScore){

const win=bjBet*2;

updateBalance(win);

result=`<span style="color:var(--green)">Kazandın! +${formatNumber(win)} 💰</span>`;

showNotif('Blackjack kazandın!','success');

}else if(pScore===dScore){

updateBalance(bjBet);

result='<span style="color:var(--yellow)">Berabere</span>';

}else{

result='<span style="color:var(--red)">Kaybettin</span>';

}

document.getElementById('gameResult').innerHTML=result;

document.getElementById('bjControls').innerHTML=`<button class="btn btn-gold" onclick="startBlackjack()">🃏 Yeni Oyun</button>`;

}



// ===== COIN FLIP =====

function setCoinSide(side){

document.getElementById('coinChoice').value=side;

showNotif(`${side==='heads'?'Yazı':'Tura'} seçildi`,'info');

}



async function flipCoin(){

const amount=parseInt(document.getElementById('betAmount').value)||0;

const choice=document.getElementById('coinChoice').value;

if(amount<10||amount>me.balance){

showNotif('Geçersiz bakiye!','error');

return;

}

const coin=document.getElementById('coinFace');

coin.style.animation='spin 1s linear infinite';

await delay(2000);

const result=Math.random()<0.5?'heads':'tails';

coin.textContent=result==='heads'?'👤':'🦅';

coin.style.animation='none';

if(result===choice){

const win=amount*2;

updateBalance(win);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--green)">${result==='heads'?'Yazı':'Tura'} - Kazandın! +${formatNumber(win)} 💰</span>`;

showNotif('Kazandın!','success');

}else{

updateBalance(-amount);

document.getElementById('gameResult').innerHTML=`<span style="color:var(--red)">${result==='heads'?'Yazı':'Tura'} - Kaybettin</span>`;

}

}



// ===== BAKİYE YÖNETİMİ =====

async function updateBalance(amount){

me.balance+=amount;

await db.ref(`users/${me.id}/balance`).set(me.balance);

updateTopBar();

const balEl=document.querySelector('.game-balance');

if(balEl)balEl.textContent=formatNumber(me.balance)+' 💰';

}



// ===== SOSYAL =====

function loadSocial(){

db.ref('users').once('value',(snap)=>{

const users=snap.val()||{};

const list=document.getElementById('allUsersList');

list.innerHTML=Object.entries(users).map(([id,u])=>{

if(id===me.id)return '';

return `<div class="online-pill" onclick="viewProfile('${id}')" style="cursor:pointer">

<span>${u.emoji||'👤'}</span>

<span>${esc(u.displayName||u.username)}</span>

${u.online?'<span style="color:var(--green)">●</span>':''}

</div>`;

}).join('');

});

}



// ===== PROFİL =====

async function viewProfile(userId){

if(userId===me.id){

openMyProfile();

return;

}

const snap=await db.ref(`users/${userId}`).once('value');

const u=snap.val();

if(!u)return;

const level=getLevelInfo(u.xp||0);

const isFriend=me.friends?.includes(userId);

const isFollowing=me.following?.includes(userId);

const content=document.getElementById('profileContent');

content.innerHTML=`

<div class="profile-banner">

<div class="profile-avi">${u.emoji||'👤'}</div>

<div class="profile-dname">${esc(u.displayName||u.username)}</div>

<div class="profile-uid">ID: ${u.id}</div>

<span class="profile-role-badge">${CONSTANTS.ROLE_LABELS[u.role]||'👤 Kullanıcı'}</span>

<div class="level-badge">${level.badge} Seviye ${level.name}</div>

${u.bio?`<div class="profile-bio">"${esc(u.bio)}"</div>`:''}

<div class="profile-actions">

<button class="profile-btn" onclick="toggleFriend('${userId}',${isFriend})">${isFriend?'❌ Çıkar':'➕ Ekle'}</button>

<button class="profile-btn" onclick="toggleFollow('${userId}',${isFollowing})">${isFollowing?'✓ Takipte':'👁️ Takip Et'}</button>

<button class="profile-btn" onclick="openPrivateChat('${userId}')">💬 Mesaj</button>

<button class="profile-btn" onclick="openGiftModal('${userId}')">🎁 Hediye</button>

</div>

</div>

<div class="stat-row"><span class="stat-label">Bakiye</span><span class="stat-value">${formatNumber(u.balance)} 💰</span></div>

<div class="stat-row"><span class="stat-label">XP</span><span class="stat-value">${formatNumber(u.xp||0)}</span></div>

<div class="stat-row"><span class="stat-label">Kayıt Tarihi</span><span class="stat-value">${formatDate(u.createdAt)}</span></div>

`;

openModal('profileModal');

}



function openMyProfile(){

const level=getLevelInfo(me.xp||0);

const content=document.getElementById('profileContent');

content.innerHTML=`

<div class="profile-banner">

<div class="profile-avi">${me.emoji||'👤'}</div>

<div class="profile-dname">${me.displayName||me.username}</div>

<div class="profile-uid">ID: ${me.id}</div>

<span class="profile-role-badge">${CONSTANTS.ROLE_LABELS[me.role]||'👤 Kullanıcı'}</span>

<div class="level-badge">${level.badge} Seviye ${level.name}</div>

${me.bio?`<div class="profile-bio">"${esc(me.bio)}"</div>`:''}

<div class="profile-actions">

<button class="profile-btn" onclick="openModal('editProfileModal')">✏️ Düzenle</button>

</div>

</div>

<div class="stat-row"><span class="stat-label">Bakiye</span><span class="stat-value">${formatNumber(me.balance)} 💰</span></div>

<div class="stat-row"><span class="stat-label">XP</span><span class="stat-value">${formatNumber(me.xp||0)}</span></div>

<div class="stat-row"><span class="stat-label">E-posta</span><span class="stat-value">${me.email}</span></div>

<div class="stat-row"><span class="stat-label">Telefon</span><span class="stat-value">${me.phone||'Yok'}</span></div>

<div style="margin-top:20px">

<div class="section-title" style="margin-bottom:10px">🎨 Çerçevelerim</div>

<div class="shop-grid" id="myFrames"></div>

</div>

<div style="margin-top:20px">

<div class="section-title" style="margin-bottom:10px">✨ Efektlerim</div>

<div class="shop-grid" id="myEffects"></div>

</div>

`;

renderMyItems();

openModal('profileModal');

}



function renderMyItems(){

const framesDiv=document.getElementById('myFrames');

const effectsDiv=document.getElementById('myEffects');

if(framesDiv){

framesDiv.innerHTML=CONSTANTS.FRAMES.map(f=>{

const owned=me.inventory?.frames?.includes(f.id);

return `<div class="shop-item ${owned?'owned':''}" onclick="${owned?'':'buyFrame(\''+f.id+'\')'}">

<div class="shop-item-icon" style="color:${f.color}">⬡</div>

<div class="shop-item-name">${f.name}</div>

<div class="shop-item-price">${owned?'✓ Sahip':f.price+' 💰'}</div>

</div>`;

}).join('');

}

if(effectsDiv){

effectsDiv.innerHTML=CONSTANTS.EFFECTS.map(e=>{

const owned=me.inventory?.effects?.includes(e.id);

return `<div class="shop-item ${owned?'owned':''}" onclick="${owned?'':'buyEffect(\''+e.id+'\')'}">

<div class="shop-item-icon">${e.emoji}</div>

<div class="shop-item-name">${e.name}</div>

<div class="shop-item-price">${owned?'✓ Sahip':e.price+' 💰'}</div>

</div>`;

}).join('');

}

}



async function saveProfile(){

const emoji=document.getElementById('ep-emoji').value||'👤';

const name=document.getElementById('ep-displayname').value.trim();

const bio=document.getElementById('ep-bio').value.trim();

await db.ref(`users/${me.id}`).update({

emoji:emoji,

displayName:name||me.username,

bio:bio

});

me.emoji=emoji;

me.displayName=name||me.username;

me.bio=bio;

localStorage.setItem('exe_user',JSON.stringify(me));

closeModal('editProfileModal');

updateTopBar();

showNotif('Profil güncellendi!','success');

}



async function buyFrame(frameId){

const frame=CONSTANTS.FRAMES.find(f=>f.id===frameId);

if(!frame||me.balance<frame.price)return;

await updateBalance(-frame.price);

const frames=me.inventory?.frames||[];

frames.push(frameId);

await db.ref(`users/${me.id}/inventory/frames`).set(frames);

me.inventory.frames=frames;

renderMyItems();

showNotif('Çerçeve satın alındı!','success');

}



async function buyEffect(effectId){

const effect=CONSTANTS.EFFECTS.find(e=>e.id===effectId);

if(!effect||me.balance<effect.price)return;

await updateBalance(-effect.price);

const effects=me.inventory?.effects||[];

effects.push(effectId);

await db.ref(`users/${me.id}/inventory/effects`).set(effects);

me.inventory.effects=effects;

renderMyItems();

showNotif('Efekt satın alındı!','success');

}



// ===== ARKADAŞLAR =====

function openFriends(){

currentFriendsTab='friends';

renderFriends();

openModal('friendsModal');

}



function switchFriendsTab(tab,btn){

currentFriendsTab=tab;

document.querySelectorAll('#friendsModal .tab-btn').forEach(b=>b.classList.remove('active'));

btn.classList.add('active');

renderFriends();

}



async function renderFriends(){

const content=document.getElementById('friendsContent');

const list=me[currentFriendsTab]||[];

if(list.length===0){

content.innerHTML=`<div style="text-align:center;padding:40px;color:var(--text3)">Liste boş</div>`;

return;

}

let html='';

for(let userId of list){

const snap=await db.ref(`users/${userId}`).once('value');

const u=snap.val();

if(!u)continue;

html+=`<div class="user-item">

<div class="user-avi">${u.emoji||'👤'}</div>

<div class="user-info">

<div class="user-name">${esc(u.displayName||u.username)}</div>

<div class="user-uid">${u.id}</div>

</div>

<div class="user-actions-btns">

<button class="uact-btn" onclick="viewProfile('${userId}')">👤 Profil</button>

<button class="uact-btn" onclick="openPrivateChat('${userId}')">💬 Mesaj</button>

</div>

</div>`;

}

content.innerHTML=html;

}



async function toggleFriend(userId,remove){

const friends=me.friends||[];

if(remove){

const idx=friends.indexOf(userId);

if(idx>-1)friends.splice(idx,1);

}else{

if(!friends.includes(userId))friends.push(userId);

}

await db.ref(`users/${me.id}/friends`).set(friends);

me.friends=friends;

localStorage.setItem('exe_user',JSON.stringify(me));

viewProfile(userId);

}



async function toggleFollow(userId,unfollow){

const following=me.following||[];

if(unfollow){

const idx=following.indexOf(userId);

if(idx>-1)following.splice(idx,1);

}else{

if(!following.includes(userId))following.push(userId);

}

await db.ref(`users/${me.id}/following`).set(following);

me.following=following;

// Takipçi sayısını güncelle

const theirFollowers=(await db.ref(`users/${userId}/followers`).once('value')).val()||[];

if(unfollow){

const idx=theirFollowers.indexOf(me.id);

if(idx>-1)theirFollowers.splice(idx,1);

}else{

if(!theirFollowers.includes(me.id))theirFollowers.push(me.id);

}

await db.ref(`users/${userId}/followers`).set(theirFollowers);

localStorage.setItem('exe_user',JSON.stringify(me));

viewProfile(userId);

}



// ===== MESAJLAŞMA =====

function openMessaging(){

loadConversations();

openModal('messagingModal');

}



async function loadConversations(){

const ref=db.ref('privateMessages');

const snap=await ref.once('value');

const all=snap.val()||{};

const myConvs=[];

for(let[convId,messages]of Object.entries(all)){

if(convId.includes(me.id)){

const otherId=convId.replace(me.id,'').replace('_','');

const lastMsg=Object.values(messages).sort((a,b)=>b.timestamp-a.timestamp)[0];

myConvs.push({otherId,lastMsg});

}

}

const list=document.getElementById('conversationsList');

if(myConvs.length===0){

list.innerHTML='<div style="color:var(--text3);padding:20px;text-align:center">Henüz mesaj yok</div>';

return;

}

list.innerHTML=myConvs.map(c=>`

<div style="padding:10px;border-radius:8px;cursor:pointer;margin-bottom:4px;background:var(--bg3)" onclick="openPrivateChat('${c.otherId}')">

<div style="font-weight:700;font-size:0.9rem">${c.lastMsg.userName}</div>

<div style="font-size:0.75rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${c.lastMsg.text}</div>

</div>

`).join('');

}



async function openPrivateChat(userId){

currentChat=userId;

const snap=await db.ref(`users/${userId}`).once('value');

const u=snap.val();

document.getElementById('chatHeader').textContent=u.displayName||u.username;

const convId=[me.id,userId].sort().join('_');

const msgRef=db.ref(`privateMessages/${convId}`);

if(messageListener){

messageListener.off();

}

messageListener=msgRef.limitToLast(50).on('value',(snap)=>{

const msgs=snap.val()||{};

const cont=document.getElementById('privateMessages');

cont.innerHTML=Object.values(msgs).sort((a,b)=>a.timestamp-b.timestamp).map(m=>`

<div style="align-self:${m.userId===me.id?'flex-end':'flex-start'};background:${m.userId===me.id?'var(--accent)':'var(--bg3)'};color:${m.userId===me.id?'#fff':'var(--text)'};padding:8px 12px;border-radius:12px;max-width:80%;font-size:0.9rem">

${esc(m.text)}

</div>

`).join('');

cont.scrollTop=cont.scrollHeight;

});

document.getElementById('msgBadge').classList.remove('show');

}



async function sendPrivateMessage(){

const input=document.getElementById('pmInput');

const text=input.value.trim();

if(!text||!currentChat)return;

const convId=[me.id,currentChat].sort().join('_');

const msg={

id:generateId('msg'),

userId:me.id,

userName:me.displayName||me.username,

text:text,

timestamp:Date.now()

};

await db.ref(`privateMessages/${convId}/${msg.id}`).set(msg);

input.value='';

}



// ===== CÜZDAN =====

function openWallet(){

document.getElementById('walletBalance').textContent=formatNumber(me.balance);

renderBanks();

openModal('walletModal');

}



function renderBanks(){

const list=document.getElementById('bankList');

const banks=me.banks||[];

if(banks.length===0){

list.innerHTML='<div style="color:var(--text3);text-align:center;padding:20px">Henüz banka hesabı eklenmemiş</div>';

return;

}

list.innerHTML=banks.map((b,i)=>`

<div style="background:var(--bg3);padding:12px;border-radius:10px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">

<div>

<div style="font-weight:700">${esc(b.name)}</div>

<div style="font-size:0.75rem;color:var(--text2);font-family:monospace">${esc(b.iban)}</div>

</div>

<button class="btn btn-danger" style="padding:5px 10px;font-size:0.7rem" onclick="removeBank(${i})">Sil</button>

</div>

`).join('');

}



async function addBank(){

const name=document.getElementById('newBankName').value.trim();

const iban=document.getElementById('newBankIban').value.trim();

if(!name||!iban){

showNotif('Tüm alanları doldurun','error');

return;

}

const banks=me.banks||[];

banks.push({name,iban});

await db.ref(`users/${me.id}/banks`).set(banks);

me.banks=banks;

document.getElementById('newBankName').value='';

document.getElementById('newBankIban').value='';

renderBanks();

showNotif('Banka eklendi','success');

}



async function removeBank(index){

const banks=me.banks||[];

banks.splice(index,1);

await db.ref(`users/${me.id}/banks`).set(banks);

me.banks=banks;

renderBanks();

}



// ===== HEDİYE =====

function openGiftModal(userId){

giftTargetUser=userId;

openModal('giftUserModal');

}



async function sendUserGift(giftId){

if(!giftTargetUser)return;

const gift=CONSTANTS.GIFTS.find(g=>g.id===giftId);

if(!gift)return;

if(me.balance<gift.price){

showNotif('Yetersiz bakiye!','error');

return;

}

await updateBalance(-gift.price);

// Hediye geçmişi

await db.ref(`gifts/${giftTargetUser}/${Date.now()}`).set({

from:me.id,

fromName:me.displayName||me.username,

gift:gift,

timestamp:Date.now()

});

// Bildirim

await db.ref(`notifications/${giftTargetUser}/${Date.now()}`).set({

type:'gift',

message:`${me.displayName||me.username} sana ${gift.name} hediye etti!`,

timestamp:Date.now()

});

closeModal('giftUserModal');

showNotif('Hediye gönderildi!','success');

showGiftAnimation(gift.emoji);

}



// ===== SESLER =====

function playSound(type){

const sounds={

applause:'👏',

laugh:'😂',

wow:'😱',

love:'❤️',

sad:'😢',

tada:'🎉'

};

if(room){

db.ref(`rooms/${room.id}/messages/${generateId('msg')}`).set({

type:'sound',

sound:type,

emoji:sounds[type],

userId:me.id,

userName:me.displayName||me.username,

timestamp:Date.now()

});

}

closeModal('soundModal');

}



// ===== ODA KONTROLLERİ =====

function openRoomControls(){

if(!room)return;

const content=document.getElementById('roomControlsContent');

content.innerHTML=`

<div class="form-group">

<label class="form-label">Oda Adı</label>

<input type="text" class="form-input" id="rc-name" value="${room.name}">

</div>

<div class="form-group">

<label class="form-label">Açıklama</label>

<input type="text" class="form-input" id="rc-desc" value="${room.desc||''}">

</div>

<div class="form-group">

<label class="form-label">Oda Tipi</label>

<select class="form-input" id="rc-type">

<option value="public" ${room.type==='public'?'selected':''}>🌐 Herkese Açık</option>

<option value="private" ${room.type==='private'?'selected':''}>🔒 Özel</option>

</select>

</div>

<button class="login-btn" onclick="saveRoomSettings()">💾 Kaydet</button>

<button class="login-btn" style="background:var(--red);margin-top:10px" onclick="deleteRoom()">🗑️ Odayı Sil</button>

`;

openModal('roomControlsModal');

}



async function saveRoomSettings(){

if(!room)return;

const name=document.getElementById('rc-name').value;

const desc=document.getElementById('rc-desc').value;

const type=document.getElementById('rc-type').value;

await db.ref(`rooms/${room.id}`).update({name,desc,type});

room.name=name;

room.desc=desc;

room.type=type;

closeModal('roomControlsModal');

renderRoom();

showNotif('Oda güncellendi','success');

}



async function deleteRoom(){

if(!room)return;

if(!confirm('Odayı silmek istediğinize emin misiniz?'))return;

await db.ref(`rooms/${room.id}`).remove();

closeModal('roomControlsModal');

exitRoom();

showNotif('Oda silindi','success');

}



// ===== ADMIN PANELİ =====

function openAdmin(){

document.getElementById('adminOverlay').classList.add('show');

adminTab('users',document.querySelector('.admin-tab'));

}



function closeAdmin(){

document.getElementById('adminOverlay').classList.remove('show');

}



async function adminTab(tab,btn){

document.querySelectorAll('.admin-tab').forEach(t=>t.classList.remove('active'));

btn.classList.add('active');

const body=document.getElementById('adminBody');

if(tab==='users'){

const snap=await db.ref('users').once('value');

const users=snap.val()||{};

body.innerHTML=`<div style="margin-bottom:10px"><input type="text" class="admin-input" placeholder="Kullanıcı ara..." onkeyup="filterUsers(this.value)"></div>

<div id="adminUsersList">`+Object.entries(users).map(([id,u])=>`

<div class="user-item ${u.banned?'banned':''}" data-name="${u.username.toLowerCase()}">

<div class="user-avi">${u.emoji||'👤'}</div>

<div class="user-info">

<div class="user-name">${esc(u.displayName||u.username)}</div>

<div class="user-uid">${u.id}</div>

<div class="user-badges-row">

${u.role!=='user'?`<span class="ubadge ubadge-${u.role}">${CONSTANTS.ROLE_LABELS[u.role]}</span>`:''}

${u.banned?'<span class="ubadge ubadge-banned">YASAKLI</span>':''}

</div>

</div>

<div class="user-actions-btns">

<button class="uact-btn ${u.banned?'unban':'ban'}" onclick="toggleBan('${id}',${!u.banned})">${u.banned?'✓ Aç':'🚫 Yasakla'}</button>

<button class="uact-btn give" onclick="giveMoney('${id}')">💰 Para Ver</button>

<button class="uact-btn role" onclick="setRole('${id}')">🎖️ Rol</button>

</div>

</div>

`).join('')+`</div>`;

}else if(tab==='bank'){

body.innerHTML=`

<div class="admin-card">

<div class="admin-card-title">🏦 Merkez Bankası</div>

<div class="stat-row"><span class="stat-label">Toplam Kullanıcı</span><span class="stat-value" id="totalUsers">...</span></div>

<div class="stat-row"><span class="stat-label">Toplam Bakiye</span><span class="stat-value" id="totalBalance">...</span></div>

<div class="stat-row"><span class="stat-label">Toplam XP</span><span class="stat-value" id="totalXP">...</span></div>

</div>

<div class="admin-card">

<div class="admin-card-title">💰 Toplu Para Dağıtımı</div>

<input type="number" class="admin-input" id="massAmount" placeholder="Miktar">

<button class="admin-action-btn primary" onclick="massGiveMoney()">Tüm Kullanıcılara Dağıt</button>

</div>

`;

const usersSnap=await db.ref('users').once('value');

const users=usersSnap.val()||{};

let totalBal=0,totalXP=0;

Object.values(users).forEach(u=>{

totalBal+=u.balance||0;

totalXP+=u.xp||0;

});

document.getElementById('totalUsers').textContent=Object.keys(users).length;

document.getElementById('totalBalance').textContent=formatNumber(totalBal)+' 💰';

document.getElementById('totalXP').textContent=formatNumber(totalXP);

}else if(tab==='agencies'){

body.innerHTML=`<button class="admin-action-btn primary" style="margin-bottom:10px" onclick="createAgency()">+ Yeni Ajans</button><div id="agenciesList"></div>`;

loadAgencies();

}else if(tab==='bans'){

const bansSnap=await db.ref('bannedUsers').once('value');

const bans=bansSnap.val()||{};

body.innerHTML=Object.entries(bans).length===0?'<div style="text-align:center;padding:40px">Yasaklı kullanıcı yok</div>':

Object.entries(bans).map(([id,data])=>`

<div class="user-item banned">

<div class="user-info">

<div class="user-name">${esc(data.username)}</div>

<div class="user-uid">${id}</div>

<div style="font-size:0.7rem;color:var(--text3)">${formatDate(data.bannedAt)} - ${esc(data.reason||'Sebep belirtilmemiş')}</div>

</div>

<button class="uact-btn unban" onclick="toggleBan('${id}',false)">✓ Yasak Kaldır</button>

</div>

`).join('');

}else if(tab==='rooms'){

const roomsSnap=await db.ref('rooms').once('value');

const rooms=roomsSnap.val()||{};

body.innerHTML=Object.entries(rooms).map(([id,r])=>`

<div class="user-item">

<div class="user-info">

<div class="user-name">${esc(r.name)}</div>

<div class="user-uid">${id} | 👥 ${r.userCount||0} kullanıcı</div>

</div>

<button class="uact-btn ban" onclick="deleteAdminRoom('${id}')">🗑️ Sil</button>

</div>

`).join('');

}

}



function filterUsers(query){

const items=document.querySelectorAll('#adminUsersList .user-item');

items.forEach(item=>{

const name=item.getAttribute('data-name');

item.style.display=name.includes(query.toLowerCase())?'flex':'none';

});

}



async function toggleBan(userId,ban){

if(ban){

const reason=prompt('Yasaklama sebebi:');

await db.ref(`users/${userId}`).update({banned:true});

await db.ref(`bannedUsers/${userId}`).set({

username:(await db.ref(`users/${userId}/username`).once('value')).val(),

bannedAt:Date.now(),

reason:reason||'Sebep belirtilmemiş',

bannedBy:me.id

});

showNotif('Kullanıcı yasaklandı','success');

}else{

await db.ref(`users/${userId}`).update({banned:false});

await db.ref(`bannedUsers/${userId}`).remove();

showNotif('Yasak kaldırıldı','success');

}

adminTab('users',document.querySelector('.admin-tab.active'));

}



async function giveMoney(userId){

const amount=parseInt(prompt('Miktar:'));

if(!amount||isNaN(amount))return;

const userRef=db.ref(`users/${userId}`);

const snap=await userRef.once('value');

const u=snap.val();

await userRef.update({balance:(u.balance||0)+amount});

showNotif(`${formatNumber(amount)} 💰 verildi`,'success');

}



async function setRole(userId){

const roles=['user','mod','admin','superadmin'];

const newRole=prompt(`Yeni rol (${roles.join(', ')}):`);

if(!roles.includes(newRole)){

showNotif('Geçersiz rol','error');

return;

}

await db.ref(`users/${userId}`).update({role:newRole});

showNotif('Rol güncellendi','success');

adminTab('users',document.querySelector('.admin-tab.active'));

}



async function massGiveMoney(){

const amount=parseInt(document.getElementById('massAmount').value);

if(!amount||isNaN(amount))return;

const snap=await db.ref('users').once('value');

const users=snap.val()||{};

for(let[id,u]of Object.entries(users)){

await db.ref(`users/${id}/balance`).set((u.balance||0)+amount);

}

showNotif(`Tüm kullanıcılara ${formatNumber(amount)} 💰 dağıtıldı`,'success');

}



async function loadAgencies(){

const snap=await db.ref('agencies').once('value');

const agencies=snap.val()||{};

const list=document.getElementById('agenciesList');

list.innerHTML=Object.entries(agencies).map(([id,a])=>`

<div class="agency-card">

<div class="agency-header">

<div class="agency-icon">🏢</div>

<div>

<div class="agency-name">${esc(a.name)}</div>

<div class="agency-owner">Sahip: ${esc(a.ownerName)}</div>

</div>

</div>

<div class="stat-row"><span class="stat-label">Üyeler</span><span class="stat-value">${Object.keys(a.members||{}).length}</span></div>

<div class="stat-row"><span class="stat-label">Bakiye</span><span class="stat-value">${formatNumber(a.balance||0)} 💰</span></div>

</div>

`).join('');

}



async function createAgency(){

const name=prompt('Ajans adı:');

if(!name)return;

const ownerId=prompt('Sahip kullanıcı ID:');

if(!ownerId)return;

const userSnap=await db.ref(`users/${ownerId}`).once('value');

if(!userSnap.exists()){

showNotif('Kullanıcı bulunamadı','error');

return;

}

const agencyId='agency_'+Date.now();

await db.ref(`agencies/${agencyId}`).set({

name:name,

owner:ownerId,

ownerName:userSnap.val().displayName||userSnap.val().username,

createdAt:Date.now(),

balance:0,

members:{[ownerId]:{role:'owner',joinedAt:Date.now()}}

});

await db.ref(`users/${ownerId}`).update({role:'agency',agencyId:agencyId});

showNotif('Ajans oluşturuldu','success');

loadAgencies();

}



async function deleteAdminRoom(roomId){

if(!confirm('Odayı silmek istediğinize emin misiniz?'))return;

await db.ref(`rooms/${roomId}`).remove();

showNotif('Oda silindi','success');

adminTab('rooms',document.querySelector('.admin-tab.active'));

}



// ===== BAŞLATMA =====

document.addEventListener('DOMContentLoaded',()=>{

const savedTheme=localStorage.getItem('theme');

if(savedTheme){

document.documentElement.setAttribute('data-theme',savedTheme);

}

initFirebase();

});