@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #050505; font-family: 'Rajdhani', sans-serif; color: #fff; overflow-x: hidden; min-height: 100vh; }

/* --- ARKA PLAN EFEKTLERİ --- */
.bg-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: radial-gradient(circle at 50% 50%, #1a0b2e 0%, #000000 100%); }
.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to bottom, rgba(255,255,255,0.02) 50%, transparent 50%); background-size: 100% 4px; pointer-events: none; }

/* --- GİRİŞ/KAYIT (INDEX) EKRANI TASARIMI --- */
.main-container { max-width: 500px; margin: 0 auto; padding: 50px 20px; text-align: center; }
.avatar-container { position: relative; width: 130px; height: 130px; margin: 0 auto 15px; }
#local-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #a855f7; box-shadow: 0 0 30px rgba(168,85,247,0.5); }
h1.glitch { font-size: 3rem; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: 2px 2px 0px #a855f7; }
.tagline { color: #94a3b8; font-size: 1.1rem; margin-bottom: 25px; font-weight: 600; }
.neon-card { background: rgba(20, 20, 25, 0.85); border: 2px solid rgba(168, 85, 247, 0.4); border-radius: 16px; padding: 25px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: left; }
.input-group { position: relative; margin-bottom: 15px; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #a855f7; }
input[type="text"], input[type="password"], input[type="email"] { width: 100%; background: #0f0f12; border: 1px solid #2d2d35; padding: 14px 14px 14px 45px; border-radius: 8px; color: #fff; outline: none; font-size: 1.1rem; font-family: 'Rajdhani', sans-serif; font-weight: 600; transition: 0.3s; }
input:focus { border-color: #a855f7; box-shadow: 0 0 10px rgba(168,85,247,0.2); }
.auth-tabs { display: flex; margin-bottom: 25px; border-bottom: 2px solid #333; }
.auth-tab { flex: 1; background: transparent; border: none; color: #9ca3af; font-size: 1.3rem; font-family: 'Rajdhani', sans-serif; font-weight: 800; padding: 12px; cursor: pointer; transition: 0.3s; }
.auth-tab.active { color: #a855f7; border-bottom: 3px solid #a855f7; }
.auth-form { display: none; animation: fadeIn 0.4s; }
.auth-form.active-form { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.auth-submit-btn { width: 100%; background: #a855f7; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 1.3rem; font-weight: 800; font-family: 'Rajdhani', sans-serif; cursor: pointer; transition: 0.3s; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-submit-btn:hover { background: #9333ea; box-shadow: 0 5px 15px rgba(168,85,247,0.4); transform: translateY(-2px); }
.register-btn { background: #22c55e; } 
.register-btn:hover { background: #16a34a; box-shadow: 0 5px 15px rgba(34,197,94,0.4); }
.auth-error { color: #ef4444; font-weight: 700; margin-top: 15px; text-align: center; font-size: 1.1rem; }
footer { margin-top: 40px; color: #52525b; font-size: 0.9rem; font-weight: 600; text-align: center; padding-bottom: 20px;}

/* ========================================= */
/* --- PROFESYONEL APP (DASHBOARD) DÜZENİ --- */
/* ========================================= */
.app-layout { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: #050505; }

/* SOL MENÜ (SIDEBAR) */
.sidebar { width: 260px; background: rgba(15, 15, 20, 0.95); border-right: 1px solid #2d2d35; padding: 30px 20px; display: flex; flex-direction: column; z-index: 10; }
.sidebar-logo { font-size: 2.2rem; font-weight: 800; color: #fff; text-align: center; margin-bottom: 40px; text-shadow: 0 0 15px rgba(168,85,247,0.5); letter-spacing: 1px; }
.sidebar-logo span { color: #a855f7; }
.nav-menu { display: flex; flex-direction: column; gap: 10px; }
.nav-item { display: flex; align-items: center; gap: 15px; padding: 15px; color: #9ca3af; text-decoration: none; font-size: 1.1rem; font-weight: 700; border-radius: 12px; transition: 0.3s; }
.nav-item:hover, .nav-item.active { background: rgba(168,85,247,0.1); color: #a855f7; border-left: 4px solid #a855f7; }
.nav-item i { font-size: 1.3rem; width: 25px; text-align: center; }

/* SAĞ ANA İÇERİK (CANVAS) */
.main-content { flex: 1; padding: 30px 40px; overflow-y: auto; position: relative; }

/* --- ÜST BAR (TOPBAR) VIP TASARIM --- */
.topbar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 30px; background: transparent; border: none; gap: 20px; }
.top-balance-badge { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); padding: 8px 18px; border-radius: 12px; box-shadow: 0 0 15px rgba(34, 197, 94, 0.1); }
#topBalance { display: flex; align-items: center; gap: 8px; color: #22c55e; font-weight: 800; font-size: 1.2rem; }
#topBalance img { width: 24px !important; height: 24px !important; object-fit: contain; border: none; }
.top-profile-badge { display: flex; align-items: center; gap: 12px; background: rgba(20, 20, 25, 0.8); border: 1px solid #2d2d35; padding: 6px 20px 6px 8px; border-radius: 50px; }
#mini-avatar { width: 38px !important; height: 38px !important; border-radius: 50%; border: 2px solid #a855f7; object-fit: cover; }
#topName { color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; }

/* DASHBOARD İÇERİK IZGARASI */
.dash-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 25px; }

/* Profil Kutusu (Sol) */
.profile-widget { background: rgba(15, 15, 20, 0.8); border: 1px solid #2d2d35; border-radius: 20px; padding: 40px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.big-avatar { width: 160px; height: 160px; border-radius: 50%; border: 4px solid #a855f7; box-shadow: 0 0 30px rgba(168,85,247,0.3); margin-bottom: 20px; background: #1a1a24; object-fit: cover; }
.profile-widget h3 { font-size: 1.8rem; margin-bottom: 5px; color: #fff; }
.profile-widget p { color: #9ca3af; font-weight: 600; margin-bottom: 20px; }

/* İstatistik Kutuları (Sağ) */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat-box { background: rgba(15, 15, 20, 0.8); border: 1px solid #2d2d35; padding: 25px; border-radius: 20px; display: flex; align-items: center; gap: 20px; transition: 0.3s; }
.stat-box:hover { border-color: #a855f7; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(168,85,247,0.1); }
.stat-icon { background: rgba(34,197,94,0.1); width: 60px; height: 60px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #22c55e; }
.stat-info h4 { color: #9ca3af; font-size: 1rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.stat-info span { font-size: 2rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }

/* Referans Kutusu */
.ref-box { background: rgba(15, 15, 20, 0.8); border: 1px solid #2d2d35; padding: 25px; border-radius: 20px; margin-top: 25px; }
.ref-box h3 { color: #fff; margin-bottom: 10px; font-size: 1.3rem; }
.ref-box p { color: #9ca3af; margin-bottom: 15px; }
.ref-input-group { display: flex; gap: 10px; }
.ref-input-group input { flex: 1; background: #050505; border: 1px solid #333; padding: 15px; border-radius: 10px; color: #a855f7; font-weight: 700; font-size: 1.1rem; }
.ref-copy-btn { background: #ef4444; color: #fff; border: none; padding: 0 25px; border-radius: 10px; font-weight: 800; cursor: pointer; transition: 0.3s; }
.ref-copy-btn:hover { background: #dc2626; }