/* 
  DOSYA ADI: main.css
  KAYIT YOLU: /exe-live/css/main.css
  AÇIKLAMA: Ana stil dosyası - tüm arayüz stilleri
*/

/* ===== RESET & VARIABLES ===== */
: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;
  --accent3: #3fffd8;
  --green: #2ecc71;
  --yellow: #f0a500;
  --red: #e74c3c;
  --gold: #ffd700;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --shadow2: 0 2px 8px rgba(0,0,0,0.3);
  --radius: 16px;
  --radius2: 12px;
  --font: 'Space Grotesk', sans-serif;
  --font-display: 'Syne', sans-serif;
  --glow: 0 0 20px rgba(108,63,255,0.4);
}
[data-theme="light"] {
  --bg: #f0f0f8;
  --bg2: #e8e8f2;
  --bg3: #dedee8;
  --card: #ffffff;
  --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}
body{display:flex;flex-direction:column}
button,input,textarea,select{font-family:var(--font)}
textarea{resize:none}
a{color:var(--accent);text-decoration:none}

/* ===== ANIMATIONS ===== */
@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 slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 10px rgba(108,63,255,0.3)}50%{box-shadow:0 0 25px rgba(108,63,255,0.7)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gift{0%{transform:translateY(100vh) scale(0) rotate(0deg);opacity:0}30%{opacity:1}100%{transform:translateY(-120px) scale(1.4) rotate(360deg);opacity:0}}
@keyframes notifIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes notifOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(60px)}}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.4}}

.fade-in{animation:fadeIn 0.35s ease both}
.slide-up{animation:slideUp 0.45s ease both}

/* ===== LAYOUT ===== */
#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;overflow-x:hidden;padding:20px 16px;animation:fadeIn 0.3s ease}
.page.active{display:flex}
@media(min-width:700px){.page{max-width:780px;margin:0 auto;width:100%}}

/* ===== LOADING ===== */
#loadingScreen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity 0.5s}
.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}

/* ===== LOGIN ===== */
#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 ease}
.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;margin-bottom:4px}
.login-tagline{text-align:center;color:var(--text2);font-size:0.88rem;margin-bottom:4px}
.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;letter-spacing:0.5px}
.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;transition:all 0.2s}
.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}
.login-footer{font-size:0.7rem;color:var(--text3);margin-top:20px;text-align:center;line-height:1.7}
#registerSection{display:none}
#registerSection.show{display:block}

/* ===== TOP BAR ===== */
.top-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;z-index:20}
.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;letter-spacing:0.5px}
.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;transition:all 0.2s}
.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;transition:all 0.2s}
.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;flex-shrink:0}
.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 ===== */
.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;z-index:20}
.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;position:relative}
.nav-item .nav-icon{font-size:1.3rem;transition:transform 0.2s}
.nav-item .nav-label{font-size:0.6rem;font-weight:700;color:var(--text2);transition:color 0.2s}
.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}

/* ===== MAIN CONTENT CONTAINER ===== */
#mainContent{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ===== HOME PAGE ===== */
.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;position:relative;overflow:hidden;flex-shrink:0}
.welcome-banner::after{content:'✦';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:5rem;opacity:0.1;animation:float 3s ease-in-out infinite}
.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;flex-shrink:0}
.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;flex-shrink:0}
.online-title{font-size:0.78rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px;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;transition:all 0.2s}
.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;overflow:hidden}
.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)}

/* ===== ROOM SCREEN ===== */
#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;transition:all 0.2s}
.room-hdr-back:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.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}

/* tabs */
.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;transition:all 0.2s;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 */
.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;letter-spacing:1px;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;transition:all 0.2s;min-width:80px;position:relative}
.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);position:relative}
.stage-avatar.has-frame-bronze{border:3px solid #cd7f32}
.stage-avatar.has-frame-silver{border:3px solid #c0c0c0}
.stage-avatar.has-frame-gold{border:3px solid var(--gold);box-shadow:0 0 12px rgba(255,215,0,0.3)}
.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 */
.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 ease}
.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;line-height:1.4;transition:border-color 0.2s}
.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;flex-shrink:0;transition:all 0.2s}
.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;box-shadow:var(--shadow);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;transition:transform 0.15s}
.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;box-shadow:var(--shadow)}
.gift-panel-pop.open{display:grid}
.gift-opt{text-align:center;padding:10px 6px;background:var(--bg3);border-radius:10px;cursor:pointer;transition:all 0.2s;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 together */
.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-video-wrap .watch-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--text2)}
.watch-placeholder-icon{font-size:3rem}
.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;transition:border-color 0.2s}
.watch-url-input:focus{border-color:var(--accent)}
.watch-sync-info{font-size:0.78rem;color:var(--text2);text-align:center}

/* ===== GAMES PAGE ===== */
.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;overflow:hidden}
.game-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(108,63,255,0.05));opacity:0;transition:opacity 0.25s}
.game-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.3)}
.game-card:hover::before{opacity:1}
.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 containers */
.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;transition:all 0.2s}
.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;outline:none}

/* roulette */
.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);transition:transform 4s cubic-bezier(0.17,0.67,0.24,0.99)}
.roulette-ring-inner{width:100%;height:100%;border-radius:50%;background:conic-gradient(
  #e74c3c 0deg 9.73deg,    /* 0 (yeşil) */
  #000 9.73deg 19.46deg,   /* 1 (siyah) */
  #e74c3c 19.46deg 29.19deg, /* 2 (kırmızı) */
  #000 29.19deg 38.92deg,  /* 3 (siyah) */
  #e74c3c 38.92deg 48.65deg, /* 4 (kırmızı) */
  #000 48.65deg 58.38deg,  /* 5 (siyah) */
  #e74c3c 58.38deg 68.11deg, /* 6 (kırmızı) */
  #000 68.11deg 77.84deg,  /* 7 (siyah) */
  #e74c3c 77.84deg 87.57deg, /* 8 (kırmızı) */
  #000 87.57deg 97.3deg,   /* 9 (siyah) */
  #e74c3c 97.3deg 107.03deg, /* 10 (kırmızı) */
  #000 107.03deg 116.76deg, /* 11 (siyah) */
  #e74c3c 116.76deg 126.49deg, /* 12 (kırmızı) */
  #000 126.49deg 136.22deg, /* 13 (siyah) */
  #e74c3c 136.22deg 145.95deg, /* 14 (kırmızı) */
  #000 145.95deg 155.68deg, /* 15 (siyah) */
  #e74c3c 155.68deg 165.41deg, /* 16 (kırmızı) */
  #000 165.41deg 175.14deg, /* 17 (siyah) */
  #e74c3c 175.14deg 184.87deg, /* 18 (kırmızı) */
  #000 184.87deg 194.6deg,  /* 19 (siyah) */
  #e74c3c 194.6deg 204.33deg, /* 20 (kırmızı) */
  #000 204.33deg 214.06deg, /* 21 (siyah) */
  #e74c3c 214.06deg 223.79deg, /* 22 (kırmızı) */
  #000 223.79deg 233.52deg, /* 23 (siyah) */
  #e74c3c 233.52deg 243.25deg, /* 24 (kırmızı) */
  #000 243.25deg 252.98deg, /* 25 (siyah) */
  #e74c3c 252.98deg 262.71deg, /* 26 (kırmızı) */
  #000 262.71deg 272.44deg, /* 27 (siyah) */
  #e74c3c 272.44deg 282.17deg, /* 28 (kırmızı) */
  #000 282.17deg 291.9deg,  /* 29 (siyah) */
  #e74c3c 291.9deg 301.63deg, /* 30 (kırmızı) */
  #000 301.63deg 311.36deg, /* 31 (siyah) */
  #e74c3c 311.36deg 321.09deg, /* 32 (kırmızı) */
  #000 321.09deg 330.82deg, /* 33 (siyah) */
  #e74c3c 330.82deg 340.55deg, /* 34 (kırmızı) */
  #000 340.55deg 350.28deg, /* 35 (siyah) */
  #e74c3c 350.28deg 360deg    /* 36 (kırmızı) */
)}
.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;transition:all 0.2s}
.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 */
.dice-wrap{text-align:center;padding:20px}
.dice-face{font-size:5.5rem;margin:20px 0;min-height:90px;line-height:1}

/* slots */
.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 */
.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}

/* blackjack */
.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}

/* ===== PROFILE MODAL ===== */
.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;backdrop-filter:blur(6px)}
.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;position:relative;overflow:hidden}
.profile-banner.custom-cover{background-size:cover;background-position:center}
.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;letter-spacing:0.5px}
.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;transition:all 0.2s}
.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;transition:all 0.2s;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.expired{opacity:0.5;border-color:var(--red)}
.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}
.shop-item-expiry{font-size:0.6rem;color:var(--text3);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 PANEL ===== */
.admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);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);box-shadow:0 24px 80px rgba(0,0,0,0.6)}
.admin-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--card);flex-shrink:0}
.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);flex-shrink:0;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;transition:all 0.2s}
.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-section{display:none}
.admin-section.active{display:block}

.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;letter-spacing:0.5px}
.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;transition:border-color 0.2s}
.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;transition:all 0.2s}
.admin-action-btn.primary{background:var(--accent);color:#fff}
.admin-action-btn.primary:hover{background:#5030dd}
.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);flex-shrink:0}
.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}
.ubadge-agency{background:var(--gold);color:#6a5200}
.user-actions-btns{display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0}
.uact-btn{padding:5px 10px;border-radius:6px;border:none;font-size:0.7rem;font-weight:700;cursor:pointer;transition:all 0.2s}
.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)}

/* ===== GIFT EFFECTS ===== */
#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;box-shadow:var(--shadow);text-align:center;pointer-events:none}

/* ===== NOTIFICATIONS ===== */
#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:notifIn 0.3s ease;box-shadow:var(--shadow2)}
.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)}
.notif-item.exit{animation:notifOut 0.3s ease forwards}

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

/* ===== RESPONSIVE ===== */
@media(max-width:380px){
  .rooms-grid{grid-template-columns:1fr}
  .games-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:repeat(3,1fr)}
  .roulette-bets{grid-template-columns:repeat(2,1fr)}
}