/* =========================================================================
   VOLKAN PLAY STORE - ANA STİL DOSYASI (10 TEMA DESTEKLİ)
========================================================================= */

/* --- 10 TEMA İÇİN RENK DEĞİŞKENLERİ (CSS VARIABLES) --- */
:root {
    --font-family: 'Roboto', sans-serif;
    --transition: all 0.3s ease;
}

/* 1. Standart Light (Beyaz) Tema */
.theme-light {
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #202124;
    --text-muted: #5f6368;
    --primary-color: #01875f; /* Google Play Yeşili */
    --primary-hover: #016b4a;
    --border-color: #e0e0e0;
    --header-bg: #ffffff;
}

/* 2. Standart Dark (Karanlık) Tema */
.theme-dark {
    --bg-color: #202124;
    --card-bg: #303134;
    --text-color: #e8eaed;
    --text-muted: #9aa0a6;
    --primary-color: #81c995;
    --primary-hover: #5bb974;
    --border-color: #5f6368;
    --header-bg: #202124;
}

/* 3. Midnight Blue (Gece Mavisi - Premium) */
.theme-midnight { --bg-color: #0f172a; --card-bg: #1e293b; --text-color: #f8fafc; --text-muted: #94a3b8; --primary-color: #3b82f6; --primary-hover: #2563eb; --border-color: #334155; --header-bg: #0f172a; }
/* 4. Forest Green (Orman Yeşili - Premium) */
.theme-forest { --bg-color: #052e16; --card-bg: #14532d; --text-color: #ecfdf5; --text-muted: #a7f3d0; --primary-color: #10b981; --primary-hover: #059669; --border-color: #064e3b; --header-bg: #052e16; }
/* 5. Sunset Orange (Gün Batımı - Premium) */
.theme-sunset { --bg-color: #fff7ed; --card-bg: #ffffff; --text-color: #431407; --text-muted: #9a3412; --primary-color: #f97316; --primary-hover: #ea580c; --border-color: #fdba74; --header-bg: #ffedd5; }
/* 6. Deep Purple (Derin Mor - Premium) */
.theme-purple { --bg-color: #2e1065; --card-bg: #4c1d95; --text-color: #f5f3ff; --text-muted: #c4b5fd; --primary-color: #8b5cf6; --primary-hover: #7c3aed; --border-color: #5b21b6; --header-bg: #2e1065; }
/* 7. Cyberpunk Neon (Siber - Premium) */
.theme-cyber { --bg-color: #09090b; --card-bg: #18181b; --text-color: #fb02cc; --text-muted: #00f0ff; --primary-color: #eab308; --primary-hover: #ca8a04; --border-color: #fb02cc; --header-bg: #000000; }
/* 8. Minimalist Gray (Minimal - Premium) */
.theme-minimal { --bg-color: #e5e7eb; --card-bg: #f9fafb; --text-color: #111827; --text-muted: #6b7280; --primary-color: #374151; --primary-hover: #1f2937; --border-color: #d1d5db; --header-bg: #f3f4f6; }
/* 9. Ocean Wave (Okyanus - Premium) */
.theme-ocean { --bg-color: #e0f2fe; --card-bg: #f0f9ff; --text-color: #082f49; --text-muted: #0284c7; --primary-color: #0ea5e9; --primary-hover: #0284c7; --border-color: #bae6fd; --header-bg: #bae6fd; }
/* 10. Hacker Matrix (Matrix - Premium) */
.theme-matrix { --bg-color: #000000; --card-bg: #0a0a0a; --text-color: #00ff00; --text-muted: #008800; --primary-color: #00ff00; --primary-hover: #00cc00; --border-color: #004400; --header-bg: #001100; }

/* --- GENEL AYARLAR VE SIFIRLAMA --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); transition: var(--transition); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }

/* --- HEADER (ÜST BAR) --- */
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background-color: var(--header-bg); border-bottom: 1px solid var(--border-color); position: fixed; top: 0; width: 100%; height: 60px; z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.header-left, .header-center, .header-right { display: flex; align-items: center; gap: 15px; }
.header-center { flex: 1; justify-content: center; max-width: 600px; margin: 0 auto; }
.logo { font-size: 20px; font-weight: 700; color: var(--text-color); display: flex; align-items: center; gap: 8px; }
.logo i { color: var(--primary-color); font-size: 24px; }
.icon-btn { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 8px; border-radius: 50%; transition: var(--transition); }
.icon-btn:hover { background-color: rgba(128,128,128,0.1); color: var(--text-color); }

/* Arama Kutusu */
.search-box { position: relative; width: 100%; }
.search-box input { width: 100%; padding: 10px 15px 10px 40px; border-radius: 24px; border: 1px solid var(--border-color); background-color: var(--bg-color); color: var(--text-color); font-size: 15px; outline: none; transition: var(--transition); }
.search-box input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(1, 135, 95, 0.2); }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

/* Butonlar */
.btn-login { background-color: var(--primary-color); color: #fff !important; padding: 8px 16px; border-radius: 4px; font-weight: 500; transition: var(--transition); }
.btn-login:hover { background-color: var(--primary-hover); }

/* --- SİDEBAR (YAN HAMBURGER MENÜ) --- */
.sidebar { position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; background-color: var(--card-bg); z-index: 1002; transition: left 0.3s ease-in-out; box-shadow: 2px 0 10px rgba(0,0,0,0.1); overflow-y: auto; }
.sidebar.active { left: 0; }
.sidebar-header { padding: 20px; font-size: 20px; font-weight: bold; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.sidebar-content { padding: 10px 0; }
.sidebar .spa-link { display: block; padding: 15px 20px; color: var(--text-color); font-weight: 500; transition: var(--transition); }
.sidebar .spa-link i { width: 25px; color: var(--text-muted); }
.sidebar .spa-link:hover, .sidebar .spa-link.active { background-color: rgba(128,128,128,0.1); color: var(--primary-color); }
.sidebar .spa-link:hover i { color: var(--primary-color); }
.sidebar-divider { border: 0; border-top: 1px solid var(--border-color); margin: 10px 0; }
.sidebar-title { display: block; padding: 10px 20px; font-size: 12px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; }
.premium-link { color: #d97706 !important; }
.premium-link i { color: #d97706 !important; }

/* Overlay (Karanlık arka plan) */
#sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1001; display: none; opacity: 0; transition: opacity 0.3s ease; }
#sidebar-overlay.active { display: block; opacity: 1; }

/* --- ANA İÇERİK (DİNAMİK SPA ALANI) --- */
#app-content { margin-top: 60px; margin-bottom: 60px; padding: 20px; min-height: calc(100vh - 120px); }

/* --- BOTTOM NAVİGATİON (ALTA YAPIŞIK MENÜ - MOBİL İÇİN) --- */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background-color: var(--header-bg); border-top: 1px solid var(--border-color); display: flex; justify-content: space-around; align-items: center; z-index: 1000; }
.bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); width: 100%; height: 100%; cursor: pointer; transition: var(--transition); }
.bottom-nav .nav-item i { font-size: 20px; margin-bottom: 4px; }
.bottom-nav .nav-item span { font-size: 11px; font-weight: 500; }
.bottom-nav .nav-item:hover, .bottom-nav .nav-item.active { color: var(--primary-color); }

/* --- PRELOADER & SNACKBAR --- */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s ease; }
.spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#snackbar { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 24px; padding: 12px 24px; position: fixed; z-index: 10000; left: 50%; bottom: 80px; transform: translateX(-50%); font-size: 14px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: visibility 0s, opacity 0.5s linear; opacity: 0; }
#snackbar.show { visibility: visible; opacity: 1; }
#snackbar.error { background-color: #dc3545; }
#snackbar.success { background-color: #28a745; }

/* Responsive Düzenlemeler */
@media (min-width: 768px) {
    .bottom-nav { display: none; }
    #app-content { margin-bottom: 0; }
}
@media (max-width: 767px) {
    .header-center { display: none; /* Mobilde arama çubuğunu gizle veya ikona çevir */ }
}