/* --- GENEL AYARLAR --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Orbitron', sans-serif; background-color: #0a0a1a; color: #f0f0f0; overflow-x: hidden; }
/* --- ARKA PLAN --- */
#particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
/* --- HEADER VE NAVİGASYON --- */
header { position: fixed; width: 100%; top: 0; left: 0; padding: 15px 50px; z-index: 1000; background: rgba(10, 10, 26, 0.5); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 209, 255, 0.2); animation: slideDown 1s ease-out; }
nav { display: flex; justify-content: space-between; align-items: center; }
nav .logo { display: flex; align-items: center; gap: 15px; text-decoration: none; color: #f0f0f0; z-index: 1001; }
nav .logo img { height: 40px; } 
nav .logo .logo-text { font-size: 1.4em; font-weight: 700; text-shadow: 0 0 8px rgba(0, 209, 255, 0.7); }
/* Masaüstü menü yapısı */
.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-menu ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; }
.nav-menu ul li a { cursor: pointer; text-decoration: none; color: #f0f0f0; font-size: 1.1em; padding: 5px 15px; transition: all 0.3s ease; border-bottom: 2px solid transparent; }
.nav-menu ul li a:hover, .nav-menu ul li a.active { color: #00d1ff; text-shadow: 0 0 8px #00d1ff; border-bottom: 2px solid #00d1ff; }
/* Müzik ve Dil Kontrolleri */
.controls-container { display: flex; align-items: center; gap: 25px; }
.control-btn { background: transparent; border: 1px solid #f0f0f0; color: #f0f0f0; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; font-size: 1em; display: flex; justify-content: center; align-items: center; }
.control-btn:hover { background: #00d1ff; color: #0a0a1a; border-color: #00d1ff; }
.language-switcher { display: flex; align-items: center; gap: 8px; font-size: 1.1em; }
.language-switcher span { color: rgba(240, 240, 240, 0.5); }
.lang-btn { text-decoration: none; color: #f0f0f0; font-weight: bold; transition: all 0.3s ease; opacity: 0.6; }
.lang-btn:hover { color: #00d1ff; opacity: 1; }
.lang-btn.active { color: #00d1ff; opacity: 1; text-shadow: 0 0 8px #00d1ff; }
/* Hamburger Butonu */
.hamburger { display: none; cursor: pointer; background: transparent; border: none; z-index: 1001; }
.hamburger .bar { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: #f0f0f0; }
/* --- SAYFA BÖLÜMLERİ --- */
.page-section { display: none; min-height: 100vh; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 120px 40px 40px 40px; animation: fadeIn 1s ease-in-out; }
.page-section.active { display: flex; }
.section-title { font-size: 3em; margin-bottom: 40px; color: #00d1ff; text-shadow: 0 0 10px #00d1ff; position: relative; }
.section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: #e500ff; box-shadow: 0 0 10px #e500ff; }
#anasayfa h1 { font-size: 4.5em; margin-bottom: 10px; }
#anasayfa h2 { font-size: 3em; color: #00d1ff; text-shadow: 0 0 15px #00d1ff; }
#anasayfa p { max-width: 600px; margin: 20px 0; font-size: 1.2em; line-height: 1.6; }
.apps-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; min-height: 150px; }
.app-card { background: rgba(20, 20, 40, 0.6); border: 1px solid rgba(0, 209, 255, 0.3); border-radius: 10px; padding: 25px; width: 300px; text-align: center; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(0, 209, 255, 0.1); display: flex; flex-direction: column; align-items: center; }
.app-card:hover { transform: translateY(-10px); box-shadow: 0 0 25px rgba(0, 209, 255, 0.5); }
.app-card img { width: 100px; height: 100px; border-radius: 15px; margin-bottom: 20px; object-fit: cover; }
.app-card h3 { color: #00d1ff; margin-bottom: 15px; }
.app-card p { font-size: 0.9em; margin-bottom: 20px; line-height: 1.5; flex-grow: 1; }
.support-info { max-width: 600px; margin-bottom: 30px; font-size: 1.1em; line-height: 1.6; color: #ccc; }
.contact-form { width: 100%; max-width: 600px; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group input, .form-group textarea { width: 100%; padding: 15px; background: rgba(10, 10, 26, 0.8); border: 1px solid #00d1ff; border-radius: 5px; color: #f0f0f0; font-family: 'Orbitron', sans-serif; font-size: 1em; }
.form-group input:focus, .form-group textarea:focus { outline: none; box-shadow: 0 0 10px #00d1ff; }
#form-status { margin-top: 20px; font-size: 1.1em; font-weight: bold; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; }
.social-btn { background: transparent; border: 2px solid #e500ff; color: #e500ff; padding: 12px 30px; font-family: 'Orbitron', sans-serif; font-size: 1.2em; text-decoration: none; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 0 0 10px rgba(229, 0, 255, 0.4), 0 0 10px rgba(229, 0, 255, 0.4); border-radius: 5px; }
.social-btn:hover { background: #e500ff; color: #0a0a1a; box-shadow: 0 0 20px #e500ff; }
.btn { background: transparent; border: 2px solid #00d1ff; color: #00d1ff; padding: 12px 25px; font-family: 'Orbitron', sans-serif; font-size: 1.1em; text-decoration: none; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 0 0 10px rgba(0, 209, 255, 0.4), 0 0 10px rgba(0, 209, 255, 0.4); margin-top: auto; }
.btn:hover { background: #00d1ff; color: #0a0a1a; box-shadow: 0 0 20px #00d1ff; }
.btn:disabled { cursor: not-allowed; background: #555; border-color: #555; color: #999; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* --- OYUN MODAL PENCERESİ --- */
#game-modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; pointer-events: none; }
.game-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.game-modal.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.game-modal iframe { width: 100%; height: 100%; border: none; }
.close-game-btn { position: absolute; top: 15px; left: 15px; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: white; font-size: 24px; line-height: 40px; text-align: center; border-radius: 50%; cursor: pointer; z-index: 2001; transition: background 0.2s, transform 0.2s; }
.close-game-btn:hover { background: rgba(255, 0, 0, 0.7); transform: scale(1.1); }

/* --- GİRİŞ/KAYIT MODAL PENCERESİ --- */
.auth-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 26, 0.8); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 3000; opacity: 0; transition: opacity 0.3s ease; }
.auth-modal-overlay.active { display: flex; opacity: 1; }
.auth-modal-content { background: rgba(20, 20, 40, 0.9); border: 1px solid rgba(0, 209, 255, 0.5); border-radius: 10px; padding: 30px 40px; width: 90%; max-width: 400px; text-align: center; position: relative; box-shadow: 0 0 30px rgba(0, 209, 255, 0.3); }
.auth-modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; color: #f0f0f0; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.auth-modal-close:hover { opacity: 1; }
.auth-modal-content h3 { font-size: 2em; color: #00d1ff; margin-bottom: 10px; }
.auth-modal-content p { color: #ccc; margin-bottom: 25px; }
.auth-error-message { color: #ff4d4d; margin-bottom: 15px; min-height: 1.2em; font-size: 0.9em; }
.auth-buttons { display: flex; gap: 15px; justify-content: center; }
.auth-buttons .btn.alt { border-color: #f0f0f0; color: #f0f0f0; }
.auth-buttons .btn.alt:hover { background: #f0f0f0; color: #0a0a1a; }

/* --- YÜKLEME ANİMASYONU --- */
.loader { border: 5px solid rgba(240, 240, 240, 0.2); border-top: 5px solid #00d1ff; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 40px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Giriş butonu içindeki daha küçük yükleyici */
.btn .loader-small { display: inline-block; vertical-align: middle; border: 2px solid rgba(240, 240, 240, 0.6); border-top: 2px solid #f0f0f0; border-radius: 50%; width: 18px; height: 18px; animation: spin 0.8s linear infinite; margin: -2px 5px 0 0; }
.btn:hover .loader-small { border: 2px solid rgba(10, 10, 26, 0.4); border-top: 2px solid #0a0a1a; }

/* === MOBİL UYUMLULUK === */
@media (max-width: 992px) {
    header { padding: 15px 30px; }
    .hamburger { display: block; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .nav-menu { position: fixed; left: -100%; top: 0; gap: 0; flex-direction: column; justify-content: center; background-color: rgba(10, 10, 26, 0.95); backdrop-filter: blur(15px); width: 100%; height: 100vh; text-align: center; transition: 0.3s; }
    .nav-menu.active { left: 0; }
    .nav-menu ul { flex-direction: column; gap: 30px; margin-bottom: 50px; }
    .nav-menu ul li a { font-size: 1.5em; }
    .controls-container { flex-direction: row; }
}
@media (max-width: 768px) {
    .page-section { padding: 120px 20px 20px 20px; }
    #anasayfa h1 { font-size: 2.5em; }
    #anasayfa h2 { font-size: 1.8em; }
    #anasayfa p { font-size: 1em; }
    .section-title { font-size: 2em; }
    .app-card { width: 90%; max-width: 320px; }
}