:root, [data-theme="light"] { --primary-color: #008069; --primary-light: #25D366; --bg-color: #efeae2; --box-bg: #ffffff; --text-color: #111b21; --text-muted: #667781; --border-color: #d1d7db; --header-bg: #008069; --header-text: #ffffff; --nav-bg: #ffffff; --nav-active: #008069; --nav-inactive: #54656f; }
[data-theme="dark"] { --primary-color: #00A884; --primary-light: #00A884; --bg-color: #0b141a; --box-bg: #111b21; --text-color: #e9edef; --text-muted: #8696a0; --border-color: #222e35; --header-bg: #202c33; --header-text: #e9edef; --nav-bg: #111b21; --nav-active: #00A884; --nav-inactive: #8696a0; }
[data-theme="midnight"] { --primary-color: #3b82f6; --primary-light: #60a5fa; --bg-color: #0f172a; --box-bg: #1e293b; --text-color: #f8fafc; --text-muted: #94a3b8; --border-color: #334155; --header-bg: #0f172a; --header-text: #f8fafc; --nav-bg: #1e293b; --nav-active: #3b82f6; --nav-inactive: #64748b; }
[data-theme="sunset"] { --primary-color: #ea580c; --primary-light: #f97316; --bg-color: #fff7ed; --box-bg: #ffffff; --text-color: #431407; --text-muted: #9a3412; --border-color: #ffedd5; --header-bg: #ea580c; --header-text: #ffffff; --nav-bg: #ffffff; --nav-active: #ea580c; --nav-inactive: #fdba74; }
[data-theme="ocean"] { --primary-color: #0891b2; --primary-light: #06b6d4; --bg-color: #ecfeff; --box-bg: #ffffff; --text-color: #164e63; --text-muted: #155e75; --border-color: #cffafe; --header-bg: #0891b2; --header-text: #ffffff; --nav-bg: #ffffff; --nav-active: #0891b2; --nav-inactive: #67e8f9; }
[data-theme="forest"] { --primary-color: #10b981; --primary-light: #34d399; --bg-color: #022c22; --box-bg: #064e3b; --text-color: #ecfdf5; --text-muted: #a7f3d0; --border-color: #047857; --header-bg: #064e3b; --header-text: #ecfdf5; --nav-bg: #064e3b; --nav-active: #10b981; --nav-inactive: #059669; }
[data-theme="rose"] { --primary-color: #db2777; --primary-light: #ec4899; --bg-color: #fdf2f8; --box-bg: #ffffff; --text-color: #831843; --text-muted: #be185d; --border-color: #fce7f3; --header-bg: #db2777; --header-text: #ffffff; --nav-bg: #ffffff; --nav-active: #db2777; --nav-inactive: #f472b6; }
[data-theme="gold"] { --primary-color: #d97706; --primary-light: #eab308; --bg-color: #1a1c23; --box-bg: #292c35; --text-color: #fef08a; --text-muted: #a1a1aa; --border-color: #3f3f46; --header-bg: #111111; --header-text: #eab308; --nav-bg: #292c35; --nav-active: #eab308; --nav-inactive: #71717a; }
[data-theme="dracula"] { --primary-color: #bd93f9; --primary-light: #ff79c6; --bg-color: #282a36; --box-bg: #44475a; --text-color: #f8f8f2; --text-muted: #6272a4; --border-color: #6272a4; --header-bg: #282a36; --header-text: #bd93f9; --nav-bg: #44475a; --nav-active: #ff79c6; --nav-inactive: #6272a4; }
[data-theme="hacker"] { --primary-color: #22c55e; --primary-light: #4ade80; --bg-color: #000000; --box-bg: #0a0a0a; --text-color: #4ade80; --text-muted: #166534; --border-color: #14532d; --header-bg: #000000; --header-text: #22c55e; --nav-bg: #0a0a0a; --nav-active: #22c55e; --nav-inactive: #14532d; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Helvetica, sans-serif; transition: background-color 0.3s ease, color 0.3s ease; }
body { background-color: var(--bg-color); color: var(--text-color); height: 100vh; overflow: hidden; }
#app-container { width: 100%; height: 100vh; display: flex; flex-direction: column; background: var(--box-bg); position: relative; }

.auth-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-color); }
.auth-box { background: var(--box-bg); padding: 30px; border-radius: 15px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid var(--border-color); }
.auth-header { margin-bottom: 30px; } .auth-header .auth-logo { font-size: 55px; color: var(--primary-light); margin-bottom: 10px; } .auth-header h2 { font-size: 22px; color: var(--text-color); } .auth-header p { font-size: 14px; color: var(--text-muted); }
.auth-form { display: none; flex-direction: column; gap: 15px; } .auth-form.active { display: flex; animation: fadeIn 0.4s ease; }
.input-group { position: relative; width: 100%; } .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.input-group input { width: 100%; padding: 14px 15px 14px 45px; border: 1px solid var(--border-color); border-radius: 10px; background: transparent; color: var(--text-color); font-size: 15px; outline: none; transition: 0.3s; }
.input-group input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(37,211,102,0.2); }
.btn-primary { width: 100%; padding: 14px; border: none; border-radius: 10px; background: var(--primary-color); color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px; }
.auth-switch { font-size: 14px; margin-top: 15px; color: var(--text-muted); } .auth-switch a { color: var(--primary-light); text-decoration: none; font-weight: bold; }
.hidden { display: none !important; }

.app-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; opacity: 0; visibility: hidden; transition: 0.3s ease; } .app-overlay.active { opacity: 1; visibility: visible; }
.app-sidebar { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: var(--box-bg); z-index: 1000; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 2px 0 10px rgba(0,0,0,0.2); display: flex; flex-direction: column; border-right: 1px solid var(--border-color); } .app-sidebar.active { transform: translateX(300px); }
.sidebar-profile { background: var(--header-bg); padding: 30px 20px 20px 20px; color: var(--header-text); display: flex; align-items: center; gap: 15px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.sidebar-profile img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--header-text); object-fit: cover; }
.sidebar-menu { list-style: none; padding: 10px 0; overflow-y: auto; flex: 1; } .sidebar-menu li { padding: 15px 25px; display: flex; align-items: center; gap: 15px; font-size: 16px; color: var(--text-color); cursor: pointer; font-weight: 500; } .sidebar-menu li i { color: var(--text-muted); width: 25px; text-align: center; } .sidebar-menu li:hover { background: var(--bg-color); }

.app-layout { display: flex; flex-direction: column; height: 100%; width: 100%; position: relative; }
.app-header { background: var(--header-bg); color: var(--header-text); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.header-left { display: flex; align-items: center; gap: 15px; } .app-header .logo { font-size: 20px; font-weight: 600; }
.header-actions { display: flex; gap: 20px; align-items: center; } .action-icon { font-size: 20px; cursor: pointer; padding: 5px; } .admin-icon { color: #FFD700; }
.app-content { flex: 1; overflow-y: auto; background: var(--bg-color); padding-bottom: 70px; }
.loader-center { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-muted); }

.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--nav-bg); display: flex; justify-content: space-around; padding: 12px 0 15px 0; border-top: 1px solid var(--border-color); z-index: 100; }
.nav-item { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--nav-inactive); cursor: pointer; width: 25%; }
.nav-item.active { color: var(--nav-active); } .nav-item.active i { transform: translateY(-3px) scale(1.15); }

.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; } .theme-option { padding: 15px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; font-weight: bold; color: white; display: flex; justify-content: space-between; align-items: center; } .theme-option.locked { opacity: 0.5; filter: grayscale(100%); cursor: not-allowed; }
.story-tray { display: flex; gap: 15px; padding: 15px 20px; overflow-x: auto; background: var(--box-bg); border-bottom: 1px solid var(--border-color); } .story-tray::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0; position: relative; }
.story-avatar-ring { width: 65px; height: 65px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); display: flex; align-items: center; justify-content: center; } .story-avatar-ring.me { background: var(--border-color); } .story-avatar-ring.me.active { background: var(--primary-color); }
.story-avatar { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--box-bg); object-fit: cover; }
.story-username { font-size: 12px; color: var(--text-color); max-width: 65px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.add-story-btn { position: absolute; bottom: 20px; right: 0; background: #1DA1F2; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 2px solid var(--box-bg); z-index: 2; }
#story-viewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #111; z-index: 99999; display: none; flex-direction: column; } .story-header { position: absolute; top: 0; left: 0; width: 100%; padding: 15px; display: flex; align-items: center; gap: 10px; z-index: 10; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); } .story-progress-container { position: absolute; top: 5px; left: 5px; right: 5px; display: flex; gap: 3px; z-index: 11; } .story-progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden; } .story-progress-fill { height: 100%; background: white; width: 0%; } .story-media-container { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; } .story-media-container img, .story-media-container video { max-width: 100%; max-height: 100%; object-fit: contain; z-index: 1; } .tap-left { position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: 5; } .tap-right { position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: 5; } .story-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 20; display: flex; gap: 10px; align-items: center; }

/* === ÇAĞRI (ARAMA) EKRANI (WebRTC UYUMLU) === */
.call-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 999999; display: none; flex-direction: column; align-items: center; color: white; overflow: hidden; }
.call-header { position: absolute; top: 40px; left: 0; width: 100%; text-align: center; z-index: 20; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.call-avatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #25D366; object-fit: cover; animation: pulseCall 1.5s infinite; margin: 0 auto 15px auto; }
.call-name { font-size: 26px; font-weight: bold; margin-bottom: 5px; }
.call-status { font-size: 16px; color: #eee; font-weight: 500; }
.call-actions { position: absolute; bottom: 40px; left: 0; width: 100%; display: flex; justify-content: center; gap: 40px; z-index: 20; }
.btn-call { width: 65px; height: 65px; border-radius: 50%; border: none; font-size: 26px; color: white; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.btn-accept { background: #25D366; } .btn-accept:hover { background: #128C7E; }
.btn-reject { background: #ff4757; } .btn-reject:hover { background: #c82333; transform: rotate(135deg); }

/* VİDEO DÜZENLERİ (TAM EKRAN VE PiP) */
.call-video-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: none; background: #111; }
.main-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 11; }
.pip-video { position: absolute; bottom: 130px; right: 20px; width: 110px; height: 160px; background: #333; border-radius: 12px; object-fit: cover; border: 2px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 15; cursor: pointer; transition: 0.3s; }
.pip-video:hover { transform: scale(1.05); }
.pip-overlay-text { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; color: white; z-index: 12; font-size: 14px; text-shadow: 0 1px 3px black; opacity: 0.7; }

@keyframes pulseCall { 0% { box-shadow: 0 0 0 0 rgba(37,211,102, 0.7); } 70% { box-shadow: 0 0 0 25px rgba(37,211,102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102, 0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 768px) {
    body { display: flex; justify-content: center; align-items: center; }
    #app-container { max-width: 450px; height: 90vh; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid var(--border-color); overflow: hidden; }
    .bottom-nav, .app-sidebar, .app-overlay, #story-viewer, .call-screen { position: absolute; }
}