<style>
/* OPTİMİZE MODAL TASARIMI */
.simple-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 999999;
    padding: 10px;
    box-sizing: border-box;
}

.simple-modal-content {
    background: white;
    margin: 20px auto;
    padding: 0;
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    position: relative;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.simple-modal-body {
    padding: 25px 20px 15px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: none;
}

.simple-modal-body::-webkit-scrollbar {
    width: 2px;
}

.simple-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.simple-modal-body::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 1px;
}

.simple-close {
    position: absolute;
    top: 12px;
    right: 15px;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    background: none;
    border: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 50%;
}

.simple-close:hover {
    color: #6b7280;
    background: #f9fafb;
}

.modal-header {
    text-align: center;
    margin-bottom: 15px;
}

.modal-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 5px 0;
}

.modal-header p {
    color: #6b7280;
    margin: 0;
    font-size: 13px;
}

.form-field {
    margin-bottom: 12px;
}

.form-field label {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-weight: 600;
    font-size: 13px;
}

.form-field input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    background: #fafbfc;
    box-sizing: border-box;
    transition: all 0.2s ease;
    outline: none;
}

.form-field input:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.password-container {
    position: relative;
}

/* GERÇEKÇİ GÖZ İKONU */
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #3b82f6;
}

.eye-icon {
    width: 16px;
    height: 16px;
}

/* FORM OPSİYONLARI - YAN YANA DÜZELTİLDİ */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 16px 0;
    font-size: 12px;
    gap: 8px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
}

.checkbox-wrapper input {
    width: 14px !important;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: #3b82f6;
}

.checkbox-wrapper label {
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
    font-size: 12px;
}

.forgot-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.forgot-link:hover {
    text-decoration: underline;
}

.submit-btn {
    width: 100%;
    padding: 12px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 0 0 12px 0;
    transition: all 0.2s ease;
}

.submit-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.divider {
    text-align: center;
    margin: 8px 0;
    position: relative;
    color: #9ca3af;
    font-size: 12px;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #f3f4f6;
}

.divider span {
    background: white;
    padding: 0 10px;
    position: relative;
}

.social-btn {
    width: 100%;
    padding: 10px 16px;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #374151;
    transition: all 0.2s ease;
}

.social-btn:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
    transform: translateY(-1px);
}

.google-icon {
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjgyIDcuMTZDMTIuODIgNi43IDE2LjQgNi4yIDE0LjQgNS43SDcuMTZWOC4ySDEwLjNDMTAuMiA4LjkgOS4yIDkuOCA3LjE2IDkuOEM1LjcgOS44IDQuNiA4LjcgNC42IDcuMTZDNC42IDUuNiA1LjcgNC41IDcuMTYgNC41QzguMSA0LjUgOC44IDQuOCA5LjMgNS4yTDExLjMgMy4yQzEwLjMgMi4zIDguOCAxLjkgNy4xNiAxLjlDNC4yIDEuOSAyIDQuMiAyIDcuMTZDMiAxMC4xIDQuMiAxMi40IDcuMTYgMTIuNEMxMC4zIDEyLjQgMTIuODIgMTAuMSAxMi44MiA3LjE2WiIgZmlsbD0iIzQyODVGNCIvPgo8L3N2Zz4K') no-repeat center;
    background-size: contain;
}

.modal-footer {
    text-align: center;
    padding: 0 20px 15px;
    color: #6b7280;
    font-size: 12px;
}

.modal-footer a {
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
}

/* ÜYELIK FORMU - KULLANIM ŞARTLARI VE PROMOSYON */
.terms-section {
    margin: 8px 0 16px 0;
}

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
}

.terms-checkbox input {
    width: 14px !important;
    height: 14px;
    margin: 0 !important;
    margin-top: 2px !important;
    flex-shrink: 0;
    accent-color: #3b82f6;
    cursor: pointer;
}

.terms-checkbox label {
    margin: 0;
    flex: 1;
    cursor: pointer;
    font-weight: 400;
}

.terms-checkbox a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.terms-checkbox a:hover {
    text-decoration: underline;
}

.error-message {
    color: #dc2626;
    font-size: 11px;
    margin-top: 2px;
    display: none;
}

.error-message.show {
    display: block;
}

/* LOADING STATE */
.submit-btn.loading {
    opacity: 0.8;
    position: relative;
}

.submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* MOBILE */
@media (max-width: 640px) {
    .simple-modal {
        padding: 8px;
    }
    
    .simple-modal-content {
        max-width: none;
        margin: 15px auto;
    }
    
    .simple-modal-body {
        padding: 20px 18px 12px;
    }
    
    .modal-header {
        margin-bottom: 12px;
    }
    
    .modal-header h2 {
        font-size: 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* MOBİLDE FORM OPSİYONLARI ALT ALTA */
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 8px 0 12px 0;
    }
    
    .checkbox-wrapper label {
        white-space: normal;
    }
    
    .modal-footer {
        padding: 0 18px 12px;
    }
}

@media (max-width: 380px) {
    .simple-modal-content {
        margin: 10px auto;
    }
    
    .simple-modal-body {
        padding: 18px 15px 10px;
    }
}
</style>

<!-- LOGIN MODAL -->
<div id="loginModal" class="simple-modal">
    <div class="simple-modal-content">
        <button class="simple-close" onclick="hideModal('loginModal')">×</button>
        <div class="simple-modal-body">
            <div class="modal-header">
                <h2>Hoş Geldiniz!</h2>
                <p>Hesabınıza giriş yapın</p>
            </div>
            
            <form id="loginForm">
                <div class="form-field">
                    <label for="loginEmail">E-posta</label>
                    <input type="email" id="loginEmail" name="email" placeholder="ornek@email.com" required>
                    <div class="error-message" id="loginEmailError"></div>
                </div>
                
                <div class="form-field">
                    <label for="loginPassword">Şifre</label>
                    <div class="password-container">
                        <input type="password" id="loginPass" name="password" placeholder="••••••••" required>
                        <button type="button" class="password-toggle" onclick="togglePass('loginPass')">
                            <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </button>
                    </div>
                    <div class="error-message" id="loginPasswordError"></div>
                </div>
                
                <!-- YAN YANA FORM OPSİYONLARI -->
                <div class="form-options">
                    <div class="checkbox-wrapper">
                        <input type="checkbox" id="loginRemember" name="remember">
                        <label for="loginRemember">Beni hatırla</label>
                    </div>
                    <a href="#" class="forgot-link" onclick="switchToForgot()">Şifremi unuttum</a>
                </div>
                
                <button type="submit" class="submit-btn">Giriş Yap</button>
                
                <div class="divider"><span>veya</span></div>
                
                <button type="button" class="social-btn" onclick="googleLogin()">
                    <div class="google-icon"></div>
                    Google ile Giriş
                </button>
            </form>
        </div>
        
        <div class="modal-footer">
            Hesabınız yok mu? <a onclick="switchToRegister()">Üye olun</a>
        </div>
    </div>
</div>

<!-- REGISTER MODAL -->
<div id="registerModal" class="simple-modal">
    <div class="simple-modal-content">
        <button class="simple-close" onclick="hideModal('registerModal')">×</button>
        <div class="simple-modal-body">
            <div class="modal-header">
                <h2>Üye Olun</h2>
                <p>Hızlı kayıt</p>
            </div>
            
            <form id="registerForm">
                <div class="form-row">
                    <div class="form-field">
                        <label for="regFirstName">Ad</label>
                        <input type="text" id="regFirstName" name="firstName" placeholder="Adınız" required>
                        <div class="error-message" id="regFirstNameError"></div>
                    </div>
                    <div class="form-field">
                        <label for="regLastName">Soyad</label>
                        <input type="text" id="regLastName" name="lastName" placeholder="Soyadınız" required>
                        <div class="error-message" id="regLastNameError"></div>
                    </div>
                </div>
                
                <div class="form-field">
                    <label for="regEmail">E-posta</label>
                    <input type="email" id="regEmail" name="email" placeholder="ornek@email.com" required>
                    <div class="error-message" id="regEmailError"></div>
                </div>
                
                <div class="form-field">
                    <label for="regPhone">Telefon</label>
                    <input type="tel" id="regPhone" name="phone" placeholder="0555 555 55 55" required>
                    <div class="error-message" id="regPhoneError"></div>
                </div>
                
                <div class="form-field">
                    <label for="regPassword">Şifre</label>
                    <div class="password-container">
                        <input type="password" id="regPass" name="password" placeholder="••••••••" required minlength="6">
                        <button type="button" class="password-toggle" onclick="togglePass('regPass')">
                            <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </button>
                    </div>
                    <div class="error-message" id="regPasswordError"></div>
                </div>
                
                <div class="form-field">
                    <label for="regPasswordConfirm">Şifre Tekrar</label>
                    <div class="password-container">
                        <input type="password" id="regPassConfirm" name="confirmPassword" placeholder="••••••••" required>
                        <button type="button" class="password-toggle" onclick="togglePass('regPassConfirm')">
                            <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </button>
                    </div>
                    <div class="error-message" id="regConfirmPasswordError"></div>
                </div>
                
                <!-- KULLANIM ŞARTLARI VE PROMOSYON -->
                <div class="terms-section">
                    <div class="terms-checkbox">
                        <input type="checkbox" id="terms" name="terms" required>
                        <label for="terms">
                            <a href="terms.php" target="_blank">Kullanım Koşulları</a> ve 
                            <a href="privacy.php" target="_blank">KVKK</a> metnini okudum, kabul ediyorum
                        </label>
                    </div>
                    
                    <div class="terms-checkbox">
                        <input type="checkbox" id="newsletter" name="newsletter">
                        <label for="newsletter">
                            Promosyon, kampanya ve duyurulardan haberdar olmak istiyorum
                        </label>
                    </div>
                </div>
                
                <button type="submit" class="submit-btn">Üye Ol</button>
                
                <div class="divider"><span>veya</span></div>
                
                <button type="button" class="social-btn" onclick="googleLogin()">
                    <div class="google-icon"></div>
                    Google ile Üye Ol
                </button>
            </form>
        </div>
        
        <div class="modal-footer">
            Hesabınız var mı? <a onclick="switchToLogin()">Giriş yapın</a>
        </div>
    </div>
</div>

<!-- FORGOT PASSWORD MODAL -->
<div id="forgotModal" class="simple-modal">
    <div class="simple-modal-content">
        <button class="simple-close" onclick="hideModal('forgotModal')">×</button>
        <div class="simple-modal-body">
            <div class="modal-header">
                <h2>Şifremi Unuttum</h2>
                <p>E-posta adresinizi girin</p>
            </div>
            
            <form id="forgotForm">
                <div class="form-field">
                    <label for="forgotEmail">E-posta</label>
                    <input type="email" id="forgotEmail" name="email" placeholder="ornek@email.com" required>
                    <div class="error-message" id="forgotEmailError"></div>
                </div>
                
                <button type="submit" class="submit-btn">Sıfırlama Linki Gönder</button>
            </form>
        </div>
        
        <div class="modal-footer">
            <a onclick="switchToLogin()">← Giriş sayfası</a>
        </div>
    </div>
</div>

<script>
// MODAL FONKSİYONLARI
function switchToLogin() {
    hideModal('registerModal');
    hideModal('forgotModal');
    showLoginModal();
}

function switchToRegister() {
    hideModal('loginModal');
    hideModal('forgotModal');
    showRegisterModal();
}

function switchToForgot() {
    hideModal('loginModal');
    hideModal('registerModal');
    document.getElementById('forgotModal').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

// GERÇEKÇİ GÖZ İKONU İLE PASSWORD TOGGLE
function togglePass(inputId) {
    const input = document.getElementById(inputId);
    const button = input.nextElementSibling;
    const eyeIcon = button.querySelector('.eye-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        // Göz kapalı icon
        eyeIcon.innerHTML = `
            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
            <line x1="1" y1="1" x2="23" y2="23"></line>
        `;
    } else {
        input.type = 'password';
        // Göz açık icon
        eyeIcon.innerHTML = `
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
            <circle cx="12" cy="12" r="3"></circle>
        `;
    }
}

function googleLogin() {
    alert('Google girişi yakında aktif olacak');
}

function showError(elementId, message) {
    const element = document.getElementById(elementId);
    if (element) {
        element.textContent = message;
        element.classList.add('show');
    }
}

function clearErrors() {
    document.querySelectorAll('.error-message').forEach(el => {
        el.textContent = '';
        el.classList.remove('show');
    });
}

// FORM SUBMISSIONS - Mevcut kod aynı kalıyor
document.addEventListener('DOMContentLoaded', function() {
    // Login form
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        clearErrors();
        
        const submitBtn = this.querySelector('.submit-btn');
        const originalText = submitBtn.textContent;
        
        const email = this.querySelector('[name="email"]').value.trim();
        const password = this.querySelector('[name="password"]').value;
        
        if (!email) {
            showError('loginEmailError', 'E-posta gerekli');
            return;
        }
        if (!password) {
            showError('loginPasswordError', 'Şifre gerekli');
            return;
        }
        
        submitBtn.classList.add('loading');
        submitBtn.textContent = 'Giriş yapılıyor...';
        
        const formData = new FormData(this);
        formData.append('action', 'login');
        
        try {
            const response = await fetch('api/auth.php', {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            
            const text = await response.text();
            
            if (!text.trim()) {
                throw new Error('Sunucudan boş yanıt geldi');
            }
            
            let result;
            try {
                result = JSON.parse(text);
            } catch (parseError) {
                console.error('JSON parse error:', parseError);
                console.error('Response text:', text);
                throw new Error('Sunucu yanıtı geçersiz format');
            }
            
            if (result.success) {
                submitBtn.textContent = '✅ Başarılı!';
                setTimeout(() => {
                    window.location.href = result.redirect || 'dashboard/';
                }, 1000);
            } else {
                submitBtn.classList.remove('loading');
                submitBtn.textContent = originalText;
                alert(result.message || 'Giriş başarısız');
            }
        } catch (error) {
            console.error('Login error:', error);
            submitBtn.classList.remove('loading');
            submitBtn.textContent = originalText;
            alert('Bağlantı hatası: ' + error.message);
        }
    });
    
    // Register form
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        clearErrors();
        
        const submitBtn = this.querySelector('.submit-btn');
        const originalText = submitBtn.textContent;
        
        const firstName = this.querySelector('[name="firstName"]').value.trim();
        const lastName = this.querySelector('[name="lastName"]').value.trim();
        const email = this.querySelector('[name="email"]').value.trim();
        const phone = this.querySelector('[name="phone"]').value.trim();
        const password = this.querySelector('[name="password"]').value;
        const confirmPassword = this.querySelector('[name="confirmPassword"]').value;
        const terms = this.querySelector('[name="terms"]').checked;
        
        let hasError = false;
        
        if (!firstName) { showError('regFirstNameError', 'Ad gerekli'); hasError = true; }
        if (!lastName) { showError('regLastNameError', 'Soyad gerekli'); hasError = true; }
        if (!email) { showError('regEmailError', 'E-posta gerekli'); hasError = true; }
        if (!phone) { showError('regPhoneError', 'Telefon gerekli'); hasError = true; }
        if (!password) { showError('regPasswordError', 'Şifre gerekli'); hasError = true; }
        else if (password.length < 6) { showError('regPasswordError', 'Şifre en az 6 karakter'); hasError = true; }
        if (password !== confirmPassword) { showError('regConfirmPasswordError', 'Şifreler eşleşmiyor'); hasError = true; }
        if (!terms) { alert('Kullanım koşulları ve KVKK metnini kabul etmelisiniz'); hasError = true; }
        
        if (hasError) return;
        
        submitBtn.classList.add('loading');
        submitBtn.textContent = 'Üyelik oluşturuluyor...';
        
        const formData = new FormData(this);
        formData.append('action', 'register');
        
        try {
            const response = await fetch('api/auth.php', {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            
            const text = await response.text();
            
            if (!text.trim()) {
                throw new Error('Sunucudan boş yanıt geldi');
            }
            
            let result;
            try {
                result = JSON.parse(text);
            } catch (parseError) {
                console.error('JSON parse error:', parseError);
                console.error('Response text:', text);
                throw new Error('Sunucu yanıtı geçersiz format');
            }
            
            if (result.success) {
                submitBtn.textContent = '✅ Başarılı!';
                alert('🎉 Üyelik oluşturuldu! Giriş yapabilirsiniz.');
                setTimeout(() => {
                    switchToLogin();
                    document.getElementById('loginEmail').value = email;
                }, 1000);
            } else {
                submitBtn.classList.remove('loading');
                submitBtn.textContent = originalText;
                alert(result.message || 'Üyelik oluşturulamadı');
            }
        } catch (error) {
            console.error('Register error:', error);
            submitBtn.classList.remove('loading');
            submitBtn.textContent = originalText;
            alert('Bağlantı hatası: ' + error.message);
        }
    });
    
    // Forgot password
    document.getElementById('forgotForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        clearErrors();
        
        const email = this.querySelector('[name="email"]').value.trim();
        if (!email) {
            showError('forgotEmailError', 'E-posta gerekli');
            return;
        }
        
        const submitBtn = this.querySelector('.submit-btn');
        submitBtn.classList.add('loading');
        submitBtn.textContent = 'Gönderiliyor...';
        
        setTimeout(() => {
            submitBtn.classList.remove('loading');
            submitBtn.textContent = 'Sıfırlama Linki Gönder';
            alert('📧 Şifre sıfırlama sistemi yakında aktif olacak');
            hideModal('forgotModal');
        }, 1500);
    });
    
    // Modal kapatma
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('simple-modal')) {
            e.target.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    });
    
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.simple-modal').forEach(modal => {
                if (modal.style.display === 'block') {
                    modal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });
        }
    });
});

console.log('✅ Form opsiyonları yan yana düzenlendi');
</script>