<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Lingoano Günün Kelimesi - Her gün yeni kelimeler öğrenin. İngilizce, Türkçe, Almanca ve İspanyolca günün kelimeleri.">
    <meta name="keywords" content="günün kelimesi, daily word, kelime öğrenme, dil öğrenme, İngilizce kelime, Almanca kelime, İspanyolca kelime">
    <meta name="author" content="Lingoano">
            <meta name="robots" content="index, follow">
        <link rel="canonical" href="https://lingoano.com/gunun-kelimesi.html">
    <meta property="og:title" content="Lingoano Günün Kelimesi - Her Gün Yeni Kelimeler">
    <meta property="og:description" content="Her gün yeni kelimeler öğrenin. İngilizce, Türkçe, Almanca ve İspanyolca günün kelimeleri.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://lingoano.com/gunun-kelimesi">
    <meta property="og:image" content="logos/logo.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Lingoano Günün Kelimesi">
    <meta name="twitter:description" content="Her gün yeni kelimeler öğrenin">
    <title data-lang="word-of-day-title-page">Günün Kelimesi - Lingoano</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="popup-style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    
    
    <!-- Structured Data for SEO -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "Günün Kelimesi - Lingoano",
      "description": "Her gün yeni kelimeler öğrenin. İngilizce, Türkçe, Almanca ve İspanyolca günün kelimeleri.",
      "url": "https://lingoano.com/gunun-kelimesi.html",
      "mainEntity": {
        "@type": "EducationalContent",
        "name": "Günün Kelimesi",
        "description": "Günlük kelime öğrenme platformu"
      }
    }
    </script>

    <style>
        /* İletişim popup stilleri */
        .contact-popup {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .contact-popup-content {
            background-color: var(--bg-primary);
            margin: 15% auto;
            padding: 2rem;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
        }

        .contact-popup h2 {
            color: var(--accent-color);
            margin-bottom: 1rem;
        }

        .contact-popup p {
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .contact-popup .email {
            font-weight: bold;
            color: var(--accent-color);
            font-size: 1.1rem;
        }

        .contact-popup .close {
            background-color: var(--accent-color);
            color: white;
            padding: 0.5rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            margin-top: 1rem;
        }

        .contact-popup .close:hover {
            background-color: var(--accent-hover);
        }

        .word-of-day-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
        }

        .page-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .page-title {
            font-size: 2.5rem;
            color: var(--accent-color);
            margin-bottom: 1rem;
        }

        .page-subtitle {
            font-size: 1.2rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .date-display {
            background: var(--accent-bg);
            padding: 1rem 2rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            text-align: center;
            margin-bottom: 2rem;
        }

        .streak-footer {
            background: var(--primary-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 1rem 1.2rem;
            text-align: center;
            color: var(--text-secondary);
            margin: 1.5rem auto 0;
            max-width: 100%;
            width: 100%;
            font-weight: 600;
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        }
        .streak-footer .icon { margin-right: 6px; }
        /* Footer streak responsive layout */
        .footer-streak-wrap { display: flex; align-items: center; gap: 18px; justify-content: center; }
        .streak-footer .streak-img { max-height: 173px; max-width: 30vw; width: auto; height: auto; border-radius: 12px; object-fit: contain; display: block; }
        .streak-footer .streak-text-block { display: flex; flex-direction: column; gap: 10px; text-align: left; }
        .streak-footer .streak-text-primary { font-size: 1.89rem; color: var(--text-primary); font-weight: 800; }
        .streak-footer .streak-text-secondary { font-size: 1.8rem; color: var(--text-secondary); }
        @media (min-width: 1024px) { .streak-footer .streak-img { max-height: 270px; max-width: 35vw; } }
        @media (max-width: 768px) {
            .streak-footer .footer-streak-wrap { flex-direction: column; text-align: center; }
            .streak-footer .streak-text-block { text-align: center; }
            .streak-footer .streak-text-primary { font-size: 1.2rem; }
            .streak-footer .streak-text-secondary { font-size: 1.1rem; }
            .streak-footer .streak-img { max-height: 180px; max-width: 90vw; }
        }

        /* Fixed side streak box for desktop */
        .streak-sidebox {
            position: fixed;
            right: 24px;
            top: 120px;
            width: 360px;
            max-width: 40vw;
            background: var(--primary-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            z-index: 2500;
            display: none;
        }
        @media (max-width: 1023px) {
            .streak-sidebox { display: none !important; }
        }

        .date-text {
            font-size: 1.1rem;
            color: var(--text-primary);
            font-weight: 500;
        }

        .words-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin-bottom: 3rem;
        }

        /* Word Slider Styles */
        .word-slider {
            position: relative;
            max-width: 800px;
            width: 100%;
            margin: 3rem auto;
            overflow: hidden;
            border-radius: 15px;
            background: var(--accent-bg);
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .word-slider-container {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 600%; /* 6 languages */
        }

        .word-slide {
            width: calc(100% / 6);
            min-width: calc(100% / 6);
            padding: 2rem;
            text-align: center;
            box-sizing: border-box;
            flex-shrink: 0;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            overflow: hidden;
        }

        .word-slide .word-card {
            margin: 0;
            height: auto;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .word-slider-nav {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
            padding: 0 2rem 2rem;
        }

        .word-slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--border-color);
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        .word-slider-dot.active {
            background: var(--accent-color);
            transform: scale(1.2);
        }

        .word-slider-dot:hover {
            background: var(--accent-color);
            transform: scale(1.1);
        }

        @media (max-width: 768px) {
            .word-slider {
                width: 90%;
                max-width: 600px;
            }

            .word-slide {
                padding: 1.5rem;
            }

            .word-slider-nav {
                margin-top: 1rem;
                padding: 0 1rem 1rem;
            }

            .word-slider-dot {
                width: 10px;
                height: 10px;
            }
        }

        @media (max-width: 480px) {
            .word-slider {
                width: 95%;
                max-width: 400px;
                margin: 1rem auto;
            }

            .word-slide {
                padding: 1rem;
            }
        }

        .word-card {
            background: var(--primary-bg);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }

        .word-card:hover {
            border-color: var(--accent-color);
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .word-card:active {
            transform: translateY(-2px) scale(0.98);
            transition: all 0.1s ease;
        }

        .word-card.playing {
            border-color: var(--accent-color);
            box-shadow: 0 0 20px var(--soft-glow);
        }

        .language-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--accent-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .difficulty-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            color: white;
        }

        .word-header {
            margin-top: 2rem;
            margin-bottom: 1.5rem;
        }

        .word-text {
            font-size: 2rem;
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
        }

        .word-phonetic {
            color: var(--text-secondary);
            font-style: italic;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .word-meaning {
            margin-bottom: 1.5rem;
        }

        .meaning-title {
            font-weight: bold;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .meaning-text {
            color: var(--text-secondary);
            line-height: 1.6;
            font-size: 1rem;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            max-width: 100%;
        }

        .examples-section {
            margin-bottom: 1.5rem;
        }

        .examples-title {
            font-weight: bold;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .example-text {
            color: var(--text-secondary);
            font-style: italic;
            background: var(--accent-bg);
            padding: 0.8rem;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            border-left: 4px solid var(--accent-color);
        }

        .origin-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        .origin-title {
            font-weight: bold;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .origin-text {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .tips-section {
            background: var(--accent-bg);
            border-radius: 12px;
            padding: 2rem;
            margin-top: 3rem;
            border: 1px solid var(--border-color);
        }

        .tips-title {
            font-size: 1.5rem;
            color: var(--accent-color);
            margin-bottom: 1rem;
            text-align: center;
        }

        .tips-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .tip-card {
            background: var(--primary-bg);
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .tip-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        .tip-title {
            font-weight: bold;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .tip-text {
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .loading, .error {
            text-align: center;
            padding: 3rem;
            background: var(--accent-bg);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            margin: 2rem auto;
            max-width: 600px;
        }

        .loading h3, .error h3 {
            color: var(--accent-color);
            margin-bottom: 1rem;
        }

        .loading p, .error p {
            color: var(--text-secondary);
            font-size: 1rem;
        }

        .loading {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        /* Mobil responsive tasarım */
        @media (max-width: 768px) {
            .words-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin-bottom: 2rem;
            }
            
            .word-card {
                padding: 1.5rem;
            }
            
            .word-text {
                font-size: 1.5rem;
            }
            
            .tips-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }

        @media (max-width: 480px) {
            .word-card {
                padding: 1rem;
            }
            
            .word-text {
                font-size: 1.3rem;
            }
            
            .language-badge,
            .difficulty-badge {
                font-size: 0.8rem;
                padding: 0.3rem 0.6rem;
            }
        }

        /* Guess game styles */
        .guess-container {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .word-hint {
            font-size: 1.8rem;
            letter-spacing: 0.3em;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
            color: var(--accent-color);
            font-weight: bold;
            padding: 1rem 0;
        }
        .guess-input {
            width: 100%;
            padding: 0.8rem;
            box-sizing: border-box;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--secondary-bg);
            color: var(--text-primary);
            font-size: 1rem;
            text-align: center;
        }
        .guess-input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px var(--accent-bg);
        }

        @media (max-width: 768px) {
            .word-of-day-container {
                margin: 1rem;
                padding: 1rem;
            }
            
            .page-title {
                font-size: 2rem;
            }
            
            .words-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .word-card {
                padding: 1.5rem;
            }
            
            .word-text {
                font-size: 1.5rem;
            }
            
            .tips-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Word-of-day Quiz Popup Styles */
        .popup-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3000;
            padding: 16px;
        }

        .popup-overlay.active {
            display: flex;
        }

        .popup-content {
            background: var(--secondary-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: min(560px, 92vw);
            max-width: 560px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.45);
            padding: 24px 20px;
            text-align: center;
            position: relative;
        }

        .popup-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            position: relative;
        }

        .popup-header h3 {
            margin: 0;
            font-size: 1.3rem;
            color: var(--accent-color);
        }

        .popup-close {
            position: absolute;
            top: 6px;
            right: 8px;
            background: var(--accent-bg);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            cursor: pointer;
        }

        .popup-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .popup-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .popup-button.primary {
            background: var(--accent-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 16px;
            cursor: pointer;
        }

        #quizMeaning {
            color: var(--text-secondary);
        }

        #quizResult {
            min-height: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="menu-toggle" aria-label="Menüyü aç/kapat" data-lang="menu-toggle-label">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="theme-switcher" data-active="default" aria-label="Tema değiştirici" data-lang="theme-switcher-label">
        <div class="theme-track">
            <div class="theme-step" data-theme="default" title="Varsayılan Tema" data-lang="default-theme"></div>
            <div class="theme-step" data-theme="blue" title="Mavi Tema" data-lang="blue-theme"></div>
            <div class="theme-step" data-theme="purple" title="Mor Tema" data-lang="purple-theme"></div>
            <div class="theme-step" data-theme="green" title="Yeşil Tema" data-lang="green-theme"></div>
        </div>
        <div class="theme-indicator"></div>
        <div class="theme-preview" data-theme="default" title="Varsayılan Tema" data-lang="default-theme"></div>
        <div class="theme-preview" data-theme="blue" title="Mavi Tema" data-lang="blue-theme"></div>
        <div class="theme-preview" data-theme="purple" title="Mor Tema" data-lang="purple-theme"></div>
        <div class="theme-preview" data-theme="green" title="Yeşil Tema" data-lang="green-theme"></div>
    </div>

            <nav class="menu-container" role="navigation">
            <div class="language-selector">
                <select id="site-language-desktop" class="site-language-select">
                    <option value="tr">🇹🇷 Türkçe</option>
                    <option value="en">🇺🇸 English</option>
                    <option value="de">🇩🇪 Deutsch</option>
                    <option value="es">🇪🇸 Español</option>
                    <option value="fr">🇫🇷 Français</option>
                    <option value="ru">🇷🇺 Русский</option>
                </select>
            </div>
            <ul class="menu">
                <li><a href="anasayfa.html" data-lang="chat">Chat</a></li>
                <li><a href="hakkında.html" data-lang="about">Lingoano Hakkında</a></li>
                <li><a href="gunun-kelimesi.html" aria-current="page" data-lang="word-of-day">Günün Kelimesi</a></li>
                <li><a href="dil-rehberleri.html" data-lang="language-guides">Dil Rehberleri</a></li>
                <li><a href="indir.html" data-lang="download">İndir</a></li>
                <li class="language-menu-item">
                    <div class="language-selector">
                        <select id="site-language" class="site-language-select">
                            <option value="tr">🇹🇷 Türkçe</option>
                            <option value="en">🇺🇸 English</option>
                            <option value="de">🇩🇪 Deutsch</option>
                            <option value="es">🇪🇸 Español</option>
                            <option value="fr">🇫🇷 Français</option>
                            <option value="ru">🇷🇺 Русский</option>
                        </select>
                    </div>
                </li>
            </ul>
        </nav>

            <main class="main-content">
            <div class="container" style="max-width: 1200px; width: 100%; padding: 0 2rem; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; align-items: center;">
            <header class="fade-in">
                <div class="header-content">
                    <img src="logos/logo.png" alt="Lingoano Logo" class="header-logo">
                    <h1 data-lang="word-of-day">Günün Kelimesi</h1>
                </div>
            </header>

            

            <div class="word-of-day-container">
                <!-- Günlük Quiz Popup -->
                <div class="popup-overlay" id="quizOverlay" style="display:none;">
                    <div class="popup-content" role="dialog" aria-modal="true" aria-labelledby="quizTitle">
                        <div class="popup-header">
                            <h3 id="quizTitle">Günün Kelimesi – Hızlı Quiz</h3>
                            <button class="popup-close" id="quizClose" aria-label="Kapat">&times;</button>
                        </div>
                        <div class="popup-body">
                            <div id="languageSelectBlock">
                                <p>Hangi dili öğrenmek istiyorsunuz?</p>
                                <select id="quizLanguage" style="width:100%;padding:0.6rem;border-radius:8px;border:1px solid var(--border-color);background:var(--accent-bg);color:var(--text-primary)">
                                    <option value="">Seçiniz</option>
                                    <option data-lang="english" value="english">İngilizce</option>
                                    <option data-lang="turkish" value="turkish">Türkçe</option>
                                    <option data-lang="german" value="german">Almanca</option>
                                    <option data-lang="spanish" value="spanish">İspanyolca</option>
                                    <option data-lang="russian" value="russian">Rusça</option>
                                </select>
                                <div class="popup-actions" style="margin-top:1rem;justify-content:flex-end;">
                                    <button class="popup-button primary" id="saveLanguageBtn">Devam</button>
                                </div>
                            </div>

                            <div id="quizBlock" style="display:none;margin-top:0.5rem;">
                                <div id="quizMeaning" style="margin-bottom:0.75rem;"></div>
                                <div class="guess-container">
                                    <div id="wordHint" class="word-hint"></div>
                                    <input type="text" id="guessInput" class="guess-input" data-lang="guess-input-placeholder" placeholder="Tahmininizi yazın...">
                                </div>
                                <div class="popup-actions" style="margin-top:1rem;justify-content:center; gap:8px; flex-wrap: wrap;">
                                    <button class="popup-button primary" id="submitGuessBtn" data-lang="guess-button">Tahmin Et</button>
                                    <button id="quizChangeLang" class="popup-button primary" data-lang="change-wod-language">Dili değiştir</button>
                                </div>
                                <div id="quizResult" style="margin-top:0.75rem;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Streak Popup (quiz kapandıktan sonra) -->
                <div class="popup-overlay" id="streakOverlay" style="display:none;">
                    <div class="popup-content" role="dialog" aria-modal="true" aria-labelledby="streakTitle">
                        <div class="popup-header">
                            <h3 id="streakTitle">Günlük Streak</h3>
                            <button class="popup-close" id="streakClose" aria-label="Kapat">&times;</button>
                        </div>
                        <div class="popup-body" id="streakPopupBody" style="gap:8px;">
                            <!-- JS dolduracak -->
                        </div>
                    </div>
                </div>
                <div class="page-header">
                    <h2 class="page-title" data-lang="todays-words">Bugünün Kelimeleri</h2>
                    <p class="page-subtitle" data-lang="todays-words-subtitle">Her gün yeni kelimeler öğrenin ve dil becerilerinizi geliştirin</p>
                </div>

                <div class="date-display">
                    <div class="date-text" id="currentDate"></div>
                </div>

                

                <div id="wordsContainer" class="word-slider">
                    <div class="word-slider-container" id="wordSliderContainer">
                        <div class="loading">
                            <h3 data-lang="loading-words">Kelimeler yükleniyor...</h3>
                        </div>
                    </div>
                    <div class="word-slider-nav" id="wordSliderNav">
                        <!-- Dots will be added dynamically -->
                    </div>
                </div>

                <div class="tips-section">
                    <h3 class="tips-title" data-lang="learning-tips">Kelime Öğrenme İpuçları</h3>
                    <div class="tips-grid">
                        <div class="tip-card">
                            <div class="tip-icon">📝</div>
                            <div class="tip-title" data-lang="tip-daily">Günlük Tutun</div>
                            <div class="tip-text" data-lang="tip-daily-desc">Yeni öğrendiğiniz kelimeleri bir deftere yazın ve düzenli olarak tekrar edin.</div>
                        </div>
                        <div class="tip-card">
                            <div class="tip-icon">🎯</div>
                            <div class="tip-title" data-lang="tip-sentences">Cümle Kurun</div>
                            <div class="tip-text" data-lang="tip-sentences-desc">Her yeni kelime için kendi cümlelerinizi oluşturun ve pratik yapın.</div>
                        </div>
                        <div class="tip-card">
                            <div class="tip-icon">🔗</div>
                            <div class="tip-title" data-lang="tip-connect">Bağlantı Kurun</div>
                            <div class="tip-text" data-lang="tip-connect-desc">Yeni kelimeleri bildiğiniz kelimelerle ilişkilendirin ve hafızanızı güçlendirin.</div>
                        </div>
                        <div class="tip-card">
                            <div class="tip-icon">🎵</div>
                            <div class="tip-title" data-lang="tip-audio">Sesli Öğrenin</div>
                            <div class="tip-text" data-lang="tip-audio-desc">Kelimeyi doğru telaffuz etmeyi öğrenin ve sesli olarak tekrar edin.</div>
                        </div>
                    </div>
                </div>

                <div id="wodStreakFooter" class="streak-footer" style="display:none;"></div>
                <div id="wodStreakSideBox" class="streak-sidebox" style="display:none;"></div>
            </div>

            
        </div>
    </main>

                 <footer class="footer" style="background: var(--accent-bg); width: 100%; margin: 0; padding: 0;">
            <div style="display: flex; flex-direction: column; align-items: center; max-width: 100%; margin: 0 auto; padding: 0.5rem 1rem; gap: 0.5rem; box-sizing: border-box;">
             <a href="https://github.com/AhmetEfeYSR" target="_blank" rel="noopener noreferrer" aria-label="GitHub profilini ziyaret et">
                 <img src="https://cdn0.iconfinder.com/data/icons/shift-logotypes/32/Github-512.png" alt="GitHub" class="github-logo">
             </a>
                                                           <div class="footer-links-container" style="display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 0 1rem !important; gap: 0 !important; flex-wrap: nowrap !important; white-space: nowrap !important; position: relative !important;">
                     <a href="gizlilik-politikasi.html" class="privacy-link" style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; text-align: center !important; margin: 0 !important; flex: 0 0 auto !important;" data-lang="privacy-policy">Gizlilik Politikası</a>
                     <button id="contact-btn" class="contact-btn" style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; background: none; border: none; cursor: pointer; flex: 0 0 auto !important; text-align: center !important; margin: 0 !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10 !important;" data-lang="contactfooter">İletişim</button>
                     <a href="kullanim-sartlari.html" class="terms-link" style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; text-align: center !important; margin: 0 !important; flex: 0 0 auto !important;" data-lang="terms-of-service">Kullanım Şartları</a>
                 </div>
         </div>
     </footer>

    <!-- İletişim Popup -->
    <div id="contact-popup" class="contact-popup">
        <div class="contact-popup-content">
            <h2 data-lang="contact-us">Bizimle İletişime Geçin</h2>
            <p data-lang="contact-description">Sorularınız, önerileriniz veya geri bildirimleriniz için bizimle iletişime geçebilirsiniz.</p>
            <p class="email" data-lang="contact-email">E-posta: contact@lingoano.com</p>
            <p data-lang="contact-response">Yanıt süresi: 24-48 saat içinde</p>
            <button class="close" onclick="closeContactPopup()" data-lang="close">Kapat</button>
        </div>
    </div>

    
    <script src="script/translations.js"></script>
    <script defer src="script/js.js"></script>
    <script src="script/word-of-day.js"></script>
    <script>
        // UI language helpers
        function getSiteLang() {
            const sel = document.querySelector('#site-language') || document.querySelector('#site-language-desktop');
            const v = sel && sel.value ? sel.value : null;
            return (v || 'tr').toLowerCase();
        }

        const localeMap = { tr: 'tr-TR', en: 'en-US', de: 'de-DE', es: 'es-ES', fr: 'fr-FR', ru: 'ru-RU' };

        const languageNames = {
            tr: { en: 'İngilizce', tr: 'Türkçe', de: 'Almanca', es: 'İspanyolca', fr: 'Fransızca', ru: 'Rusça' },
            en: { en: 'English',  tr: 'Turkish', de: 'German',  es: 'Spanish',   fr: 'French',    ru: 'Russian' },
            de: { en: 'Englisch', tr: 'Türkisch',de: 'Deutsch', es: 'Spanisch',  fr: 'Französisch', ru: 'Russisch' },
            es: { en: 'Inglés',   tr: 'Turco',   de: 'Alemán',  es: 'Español',   fr: 'Francés',   ru: 'Ruso' },
            fr: { en: 'Anglais',  tr: 'Turc',    de: 'Allemand',es: 'Espagnol',  fr: 'Français',  ru: 'Russe' },
            ru: { en: 'Английский', tr: 'Турецкий', de: 'Немецкий', es: 'Испанский', fr: 'Французский', ru: 'Русский' }
        };

        const difficultyNames = {
            tr: { Beginner: 'Başlangıç', Intermediate: 'Orta',        Advanced: 'İleri' },
            en: { Beginner: 'Beginner',  Intermediate: 'Intermediate', Advanced: 'Advanced' },
            de: { Beginner: 'Anfänger',  Intermediate: 'Mittelstufe', Advanced: 'Fortgeschritten' },
            es: { Beginner: 'Principiante', Intermediate: 'Intermedio', Advanced: 'Avanzado' },
            fr: { Beginner: 'Débutant', Intermediate: 'Intermédiaire', Advanced: 'Avancé' },
            ru: { Beginner: 'Начальный', Intermediate: 'Средний',     Advanced: 'Продвинутый' }
        };

        // UI strings per language
        const uiStrings = {
            tr: {
                'guess-placeholder': 'Tahmininizi yazın... ',
                'guess-button': 'Tahmin Et',
                'meaning-label': 'Anlam',
                'quiz-title': 'Günün Kelimesi – Hızlı Quiz',
                'which-language': 'Hangi dili öğrenmek istiyorsunuz?',
                'select-option': 'Seçiniz',
                'continue-button': 'Devam'
            },
            en: {
                'guess-placeholder': 'Type your guess...',
                'guess-button': 'Guess',
                'meaning-label': 'Meaning',
                'quiz-title': 'Word of the Day – Quick Quiz',
                'which-language': 'Which language do you want to learn?',
                'select-option': 'Select',
                'continue-button': 'Continue'
            },
            de: {
                'guess-placeholder': 'Geben Sie Ihre Vermutung ein...',
                'guess-button': 'Raten',
                'meaning-label': 'Bedeutung',
                'quiz-title': 'Wort des Tages – Kurzes Quiz',
                'which-language': 'Welche Sprache möchten Sie lernen?',
                'select-option': 'Auswählen',
                'continue-button': 'Weiter'
            },
            es: {
                'guess-placeholder': 'Escribe tu suposición...',
                'guess-button': 'Adivinar',
                'meaning-label': 'Significado',
                'quiz-title': 'Palabra del Día – Quiz Rápido',
                'which-language': '¿Qué idioma quieres aprender?',
                'select-option': 'Seleccionar',
                'continue-button': 'Continuar'
            },
            fr: {
                'guess-placeholder': 'Entrez votre supposition...',
                'guess-button': 'Deviner',
                'meaning-label': 'Sens',
                'quiz-title': 'Mot du Jour – Quiz Rapide',
                'which-language': 'Quelle langue voulez-vous apprendre ?',
                'select-option': 'Sélectionner',
                'continue-button': 'Continuer'
            },
            ru: {
                'guess-placeholder': 'Введите вашу догадку...',
                'guess-button': 'Угадать',
                'meaning-label': 'Значение',
                'quiz-title': 'Слово Дня – Быстрый Викторина',
                'which-language': 'Какой язык вы хотите изучать?',
                'select-option': 'Выберите',
                'continue-button': 'Продолжить'
            }
        };

        function tUI(key) {
            const ui = getSiteLang();
            const dict = uiStrings[ui] || uiStrings.en;
            return dict[key] || key;
        }

        function formatDate(date) {
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const ui = getSiteLang();
            const loc = localeMap[ui] || 'en-US';
            try { return date.toLocaleDateString(loc, options); } catch(e) { return date.toDateString(); }
        }

        function getDisplayLanguageName(code) {
            const ui = getSiteLang();
            const map = languageNames[ui] || languageNames.en;
            return map[code] || code;
        }

        function getDisplayDifficulty(diff) {
            const ui = getSiteLang();
            const map = difficultyNames[ui] || difficultyNames.en;
            return map[diff] || diff;
        }

        // Aktif telaffuzu takip etmek için referans
        let currentUtterance = null;

        // Telaffuz fonksiyonu: Google Translate TTS URL'si dil kodu ile, Web Speech fallback
        function playPronunciation(word, languageCode) {
            try {
                const normalized = (languageCode || '').toString().trim().toLowerCase();
                const nameToCode = { english: 'en', turkish: 'tr', german: 'de', spanish: 'es', french: 'fr', russian: 'ru' };
                const code = nameToCode[normalized] || normalized || 'en';
                // Kart üzerinde görsel geri bildirim
                const card = document.querySelector(`[data-lang-code="${code}"]`);
                const onstart = () => { try { document.querySelectorAll('.word-card.playing').forEach(el => el.classList.remove('playing')); if (card) card.classList.add('playing'); } catch (_) {} };
                const onend = () => { try { if (card) card.classList.remove('playing'); currentUtterance = null; } catch (_) {} };

                // Öncelik: Google Translate TTS URL (tl=kelimenin dili)
                const q = encodeURIComponent(word || '');
                const url = `https://translate.google.com/translate_tts?ie=UTF-8&tl=${code}&client=tw-ob&q=${q}`;
                try {
                    const audio = new Audio(url);
                    audio.addEventListener('playing', onstart);
                    audio.addEventListener('ended', onend);
                    audio.addEventListener('error', () => {
                        onend();
                        // Hata halinde Web Speech'e düş
                        tryFallbackWebSpeech();
                    });
                    audio.play().catch(() => {
                        // Oynatma engellenirse (autoplay politikaları), Web Speech'e düş
                        tryFallbackWebSpeech();
                    });
                } catch (_) {
                    tryFallbackWebSpeech();
                }

                function tryFallbackWebSpeech() {
                    const opts = { onstart, onend, onerror: onend, rate: 0.8 };
                    if (window.ttsHelper && typeof window.ttsHelper.speak === 'function') {
                        window.ttsHelper.speak(word, code, opts);
                        return;
                    }
                    if ('speechSynthesis' in window) {
                        try { window.speechSynthesis.cancel(); } catch (_) {}
                        const localeFor = { en: 'en-US', tr: 'tr-TR', de: 'de-DE', es: 'es-ES', fr: 'fr-FR', ru: 'ru-RU' };
                        const utterance = new SpeechSynthesisUtterance(word);
                        utterance.lang = (localeFor[code] || 'en-US');
                        utterance.onstart = onstart;
                        utterance.onend = onend;
                        utterance.onerror = onend;
                        utterance.rate = 0.8;
                        utterance.pitch = 1.0;
                        utterance.volume = 1.0;
                        setTimeout(() => { try { speechSynthesis.speak(utterance); } catch (_) {} }, 50);
                        return;
                    }
                    alert(`${word} kelimesinin telaffuzu: ${word}`);
                }
            } catch (error) {
                console.error('Telaffuz hatası:', error);
                alert(`${word} kelimesinin telaffuzu: ${word}`);
            }
        }

        // Kelime kartını oluştur
        function createWordCard(wordData, languageCode) {
            const languageName = getDisplayLanguageName(languageCode);
            const difficultyText = getDisplayDifficulty(wordData.difficulty);
            const difficultyColor = window.wordOfDayAPI.getDifficultyColor(wordData.difficulty);
            
            return `
                <div class="word-card" data-lang-code="${languageCode}" tabindex="0" style="cursor: pointer; transition: all 0.2s ease;" title="Telaffuz için tıklayın">
                    <div class="language-badge">${languageName}</div>
                    <div class="difficulty-badge" style="background-color: ${difficultyColor};">${difficultyText}</div>
                    
                    <div class="word-header">
                        <div class="word-text">${wordData.word}</div>
                    </div>
                    
                    <div class="word-meaning">
                        <div class="meaning-text">${wordData.meaning}</div>
                    </div>
                </div>
            `;
        }

        // Yardımcılar
        const langNameToCode = { english: 'en', turkish: 'tr', german: 'de', spanish: 'es', french: 'fr', russian: 'ru' };
        const codeToPretty = { en: 'İngilizce', tr: 'Türkçe', de: 'Almanca', es: 'İspanyolca', fr: 'Fransızca', ru: 'Rusça' };
        const normalize = (s) => (s || '').toString().trim().toLowerCase();

        function openQuizOverlay() {
            const ov = document.getElementById('quizOverlay');
            if (ov) { ov.style.display = 'flex'; ov.classList.add('active'); }
            const titleEl = document.getElementById('quizTitle');
            if (titleEl) { titleEl.textContent = tUI('quiz-title'); }
            // Mark quiz shown for today
            try { localStorage.setItem('wod_quiz_last', getTodayKey()); } catch(_) {}
            // Localize language selection block
            try {
                const langBlock = document.getElementById('languageSelectBlock');
                if (langBlock) {
                    const p = langBlock.querySelector('p');
                    if (p) p.textContent = tUI('which-language');
                    const select = document.getElementById('quizLanguage');
                    if (select && select.options && select.options.length > 0) {
                        const firstOpt = Array.from(select.options).find(o => o.value === "");
                        if (firstOpt) firstOpt.text = tUI('select-option');
                    }
                    const btn = document.getElementById('saveLanguageBtn');
                    if (btn) btn.textContent = tUI('continue-button');
                }
            } catch (e) {}
        }
        function closeQuizOverlay() {
            const ov = document.getElementById('quizOverlay');
            if (ov) { ov.classList.remove('active'); ov.style.display = 'none'; }
        }

        async function startQuizForLanguage(siteLang) {
            // Accept both language names (english, turkish, ...) and codes (en, tr, ...)
            const validCodes = ['en','tr','de','es','fr','ru'];
            let code = langNameToCode[siteLang];
            if (!code) {
                code = validCodes.includes(siteLang) ? siteLang : 'en';
            }
            try {
                const wod = await window.wordOfDayAPI.getWordOfDay(code);
                const langBlock = document.getElementById('languageSelectBlock');
                const quizBlock = document.getElementById('quizBlock');
                const meaningDiv = document.getElementById('quizMeaning');
                
                if (!langBlock || !quizBlock || !meaningDiv) return;

                langBlock.style.display = 'none';
                quizBlock.style.display = 'block';
                const displayLang = getDisplayLanguageName(code);
                const meaningLabel = tUI('meaning-label');
                meaningDiv.innerHTML = `<div><strong>${displayLang}</strong>${wod.partOfSpeech ? ` • <em>${wod.partOfSpeech}</em>` : ''}</div><div style="margin-top:6px;">${meaningLabel}: ${wod.meaning}</div>`;

                // Tüm diller için Unicode harfleri koru (Cyrillic, Latin diakritikler vb.)
                const targetWord = normalize(wod.word).replace(/[^\p{L}]/gu, '');
                if (!targetWord) {
                    quizBlock.innerHTML = `<p>Bugünün kelimesi için quiz mevcut değil.</p>`;
                    return;
                }
                const wordLength = targetWord.length;

                // Reveal letter rules by difficulty & length
                function calcReveal(len, diff) {
                    const d = String(diff || '').toLowerCase();
                    if (d.includes('beginner') || d.includes('başlang') ) {
                        if (len <= 5) return 0;
                        if (len === 6) return 1;
                        return 2; // 7+
                    }
                    if (d.includes('intermediate') || d.includes('orta')) {
                        if (len <= 4) return 0;
                        if (len === 5) return 1;
                        return 2; // 6+
                    }
                    // Advanced (ileri)
                    if (len <= 3) return 0;
                    if (len === 4 || len === 5) return 1;
                    if (len === 6) return 2;
                    return 3; // 7+
                }
                let revealCount = calcReveal(wordLength, wod.difficulty);
                revealCount = Math.max(0, Math.min(revealCount, Math.max(0, wordLength - 1)));

                const hintArr = Array(wordLength).fill('_');
                const indices = [...Array(wordLength).keys()].sort(() => 0.5 - Math.random());
                
                for (let i = 0; i < revealCount; i++) {
                    hintArr[indices[i]] = targetWord[indices[i]].toUpperCase();
                }
                
                document.getElementById('wordHint').textContent = hintArr.join(' ');
                
                const guessInput = document.getElementById('guessInput');
                const submitBtn = document.getElementById('submitGuessBtn');
                const resultDiv = document.getElementById('quizResult');
                resultDiv.innerHTML = '';
                guessInput.value = '';
                guessInput.disabled = false;
                submitBtn.disabled = false;

                // Localize UI controls
                try {
                    guessInput.placeholder = tUI('guess-placeholder');
                    submitBtn.textContent = tUI('guess-button');
                } catch(e) {}

                const checkGuess = () => {
                    const userGuess = normalize(guessInput.value);
                    if (userGuess === targetWord) {
                        resultDiv.innerHTML = `<span style="color: #2e7d32; font-weight: bold;">✅ Doğru! Tebrikler!</span>`;
                        guessInput.disabled = true;
                        submitBtn.disabled = true;
                        document.getElementById('wordHint').textContent = targetWord.toUpperCase().split('').join(' ');
                        // Doğru cevapta quiz popup otomatik kapanır ve streak popup sadece bir kez gösterilir
                        try { closeQuizOverlay(); } catch(_) {}
                        try { updateStreakOnSuccess(); } catch(_) {}
                    } else {
                        resultDiv.innerHTML = `<span style="color: #c62828; font-weight: bold;">❌ Yanlış.</span> Doğru cevap: <strong>${wod.word.toUpperCase()}</strong>`;
                        guessInput.disabled = true;
                        submitBtn.disabled = true;
                    }
                };

                submitBtn.onclick = checkGuess;
                guessInput.onkeydown = (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        checkGuess();
                    }
                };
                
                guessInput.focus();

            } catch (e) {
                console.error("Quiz hatası:", e);
                const quizBlock = document.getElementById('quizBlock');
                if (quizBlock) {
                    quizBlock.innerHTML = `<p style="color: var(--text-secondary);">Quiz yüklenirken bir hata oluştu.</p>`;
                }
            }
        }

        // Sayfayı yükle
        function getTodayKey() {
            const now = new Date();
            const y = now.getFullYear();
            const m = String(now.getMonth()+1).padStart(2,'0');
            const d = String(now.getDate()).padStart(2,'0');
            return `${y}-${m}-${d}`;
        }

        function getYesterdayKey() {
            const n = new Date();
            n.setDate(n.getDate()-1);
            const y = n.getFullYear();
            const m = String(n.getMonth()+1).padStart(2,'0');
            const d = String(n.getDate()).padStart(2,'0');
            return `${y}-${m}-${d}`;
        }

        function computeStreakStatus(count, starts) {
            if (count <= 0) return 0; // no streak
            if (count === 1) {
                return (starts === 1) ? 2 : 1; // first ever => 2, otherwise => 1
            }
            return 3; // 2+ days active
        }

        function updateStreakBannerDisplay() {
            const el = document.getElementById('wodStreakFooter');
            const side = document.getElementById('wodStreakSideBox');
            if (!el || !side) return;
            let count = 0; let starts = 0; let status = 0; let special = '0';
            try {
                count = parseInt(localStorage.getItem('wod_streak_count') || '0', 10) || 0;
                starts = parseInt(localStorage.getItem('wod_streak_starts') || '0', 10) || 0;
                status = parseInt(localStorage.getItem('wod_streak_status') || String(computeStreakStatus(count, starts)), 10) || 0;
                special = localStorage.getItem('wod_streak_special') || '0';
            } catch(_) {}
            if (count <= 0) { el.style.display = 'none'; side.style.display = 'none'; return; }

            // Determine artwork and message
            let imgUrl = '';
            let msg = '';
            if (status === 1) {
                imgUrl = 'https://lingoano.com/logos/s1.png';
                msg = translations[getSiteLang()]?.['wod-streak-msg-1'] || '💔 Bizi bir kere terk ettin, İgo hâlâ kırgın.';
            } else if (status === 2) {
                imgUrl = 'https://lingoano.com/logos/s2.png';
                msg = translations[getSiteLang()]?.['wod-streak-msg-2'] || '🎉 Tebrikler! İlk streakinle İgo gurur duyuyor.';
            } else if (status === 3) {
                imgUrl = 'https://lingoano.com/logos/s3.png';
                if (special === '1') {
                    msg = translations[getSiteLang()]?.['wod-streak-msg-3-special'] || '🤗🎉 İgo seni affediyor ve kutluyor!';
                    try { localStorage.setItem('wod_streak_special', '0'); } catch(_) {}
                } else {
                    msg = translations[getSiteLang()]?.['wod-streak-msg-3'] || '🏆🔥 İgo streakinle gurur duyuyor, tebrikler!';
                }
            } else {
                el.style.display = 'none';
                return;
            }

            const ui = getSiteLang();
            const countText = ui === 'en'
                ? `${count}-day streak`
                : `${count} günlük streak`;

            const innerSide = `
                <div style="display:flex; align-items:center; gap:14px; justify-content:center;">
                    ${imgUrl ? `<img src="${imgUrl}" alt="streak" style="height:96px; max-width: 20vw; width:auto;border-radius:10px;"/>` : ''}
                    <div style="display:flex; flex-direction:column; gap:8px; text-align:left;">
                        <div style="font-size:1.05rem; color: var(--text-primary); font-weight:700;">${msg}</div>
                        <div style="font-size:1rem; color: var(--text-secondary);">🔥 ${countText}</div>
                    </div>
                </div>
            `;
            const innerFooter = `
                <div class="footer-streak-wrap">
                    ${imgUrl ? `<img class=\"streak-img\" src=\"${imgUrl}\" alt=\"streak\"/>` : ''}
                    <div class="streak-text-block">
                        <div class="streak-text-primary">${msg}</div>
                        <div class="streak-text-secondary">🔥 ${countText}</div>
                    </div>
                </div>
            `;

            // Show both: side box on desktop and footer always
            const isDesktop = window.matchMedia('(min-width: 1024px)').matches;
            if (isDesktop) {
                side.innerHTML = innerSide;
                side.style.display = '';
            } else {
                side.style.display = 'none';
            }
            el.innerHTML = innerFooter;
            el.style.display = '';
        }

        function updateStreakOnSuccess() {
            const today = getTodayKey();
            const yesterday = getYesterdayKey();
            let last = null; let count = 0; let starts = 0; let prevStatus = 0;
            try {
                last = localStorage.getItem('wod_streak_last');
                count = parseInt(localStorage.getItem('wod_streak_count') || '0', 10) || 0;
                starts = parseInt(localStorage.getItem('wod_streak_starts') || '0', 10) || 0;
                prevStatus = parseInt(localStorage.getItem('wod_streak_status') || '0', 10) || 0;
            } catch(_) {}
            if (last === today) {
                // already counted today
            } else if (last === yesterday) {
                count = count + 1;
            } else {
                count = 1;
                starts = starts + 1; // new streak started
            }
            try {
                localStorage.setItem('wod_streak_last', today);
                localStorage.setItem('wod_streak_count', String(count));
                localStorage.setItem('wod_streak_starts', String(starts));
            } catch(_) {}

            // Determine current status and special transition
            const status = computeStreakStatus(count, starts);
            if (status === 3 && prevStatus === 1) {
                try { localStorage.setItem('wod_streak_special', '1'); } catch(_) {}
            }
            try { localStorage.setItem('wod_streak_status', String(status)); } catch(_) {}
            updateStreakBannerDisplay();
            try { setTimeout(maybeShowStreakPopup, 0); } catch(_) {}
        }

        function maybeShowStreakPopup() {
            const overlay = document.getElementById('streakOverlay');
            const body = document.getElementById('streakPopupBody');
            if (!overlay || !body) return;
            let count = 0; let status = 0; let special = '0';
            try {
                count = parseInt(localStorage.getItem('wod_streak_count') || '0', 10) || 0;
                status = parseInt(localStorage.getItem('wod_streak_status') || '0', 10) || 0;
                special = localStorage.getItem('wod_streak_special') || '0';
            } catch(_) {}
            if (count <= 0 || status <= 0) return;
            // Aynı gün birden fazla kez açılmasını engelle
            const todayKey = getTodayKey();
            const shownKey = (localStorage.getItem('wod_streak_popup_shown') || '');
            if (shownKey === todayKey) {
                return;
            }
            // Build same content but stacked
            let imgUrl = '';
            let msg = '';
            if (status === 1) { imgUrl = 'https://lingoano.com/logos/s1.png'; msg = translations[getSiteLang()]?.['wod-streak-msg-1'] || '💔 Bizi bir kere terk ettin, İgo hâlâ kırgın.'; }
            else if (status === 2) { imgUrl = 'https://lingoano.com/logos/s2.png'; msg = translations[getSiteLang()]?.['wod-streak-msg-2'] || '🎉 Tebrikler! İlk streakinle İgo gurur duyuyor.'; }
            else if (status === 3) { imgUrl = 'https://lingoano.com/logos/s3.png'; msg = (special === '1') ? (translations[getSiteLang()]?.['wod-streak-msg-3-special'] || '🤗🎉 İgo seni affediyor ve kutluyor!') : (translations[getSiteLang()]?.['wod-streak-msg-3'] || '🏆🔥 İgo streakinle gurur duyuyor, tebrikler!'); }
            const ui = getSiteLang();
            const countText = ui === 'en' ? `${count}-day streak` : `${count} günlük streak`;
            body.innerHTML = `
                ${imgUrl ? `<img src="${imgUrl}" alt="streak" style="height:300px;width:auto;border-radius:12px;align-self:center;"/>` : ''}
                <div style="font-size:1.441rem; color: var(--text-primary); text-align:center;">${msg}</div>
                <div style="font-size:1.309rem; color: var(--text-secondary); text-align:center;">🔥 ${countText}</div>
            `;
            overlay.style.display = 'flex';
            overlay.classList.add('active');
            const btn = document.getElementById('streakClose');
            if (btn) btn.onclick = () => { overlay.classList.remove('active'); overlay.style.display = 'none'; };
            try {
                localStorage.setItem('wod_streak_special', '0');
                localStorage.setItem('wod_streak_popup_shown', todayKey);
            } catch(_) {}
        }

        // Word Slider functionality
        let currentWordSlide = 0;
        const totalWordSlides = 6;

        function goToWordSlide(slideIndex) {
            currentWordSlide = slideIndex;
            updateWordSlider();
        }

        function changeWordSlide(direction) {
            currentWordSlide = (currentWordSlide + direction + totalWordSlides) % totalWordSlides;
            updateWordSlider();
        }

        function updateWordSlider() {
            const container = document.getElementById('wordSliderContainer');
            const dots = document.querySelectorAll('.word-slider-dot');
            
            if (container) {
                container.style.transform = `translateX(-${currentWordSlide * (100/6)}%)`;
            }
            
            if (dots) {
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentWordSlide);
                });
            }
        }

        function initWordSlider() {
            // Only initialize the slider, no event listeners needed
            // Slider will be controlled only by navigation dots
        }

        // Event functions removed - sliders controlled only by navigation dots

        async function loadWordsOfDay() {
            const wordsContainer = document.getElementById('wordsContainer');
            const sliderContainer = document.getElementById('wordSliderContainer');
            const sliderNav = document.getElementById('wordSliderNav');
            const currentDateElement = document.getElementById('currentDate');
            
            try {
                // Tarihi göster
                currentDateElement.textContent = formatDate(new Date());
                // Streak banner
                updateStreakBannerDisplay();
                
                // Loading göster
                sliderContainer.innerHTML = `
                    <div class="loading">
                        <h3>Günün kelimeleri yükleniyor...</h3>
                        <p>Veriler hazırlanıyor...</p>
                    </div>
                `;
                
                // Günün kelimelerini al (async)
                const wordsOfDay = await window.wordOfDayAPI.getAllWordsOfDay();
                
                // Kelime kartlarını slider formatında oluştur
                const slidesHTML = Object.keys(wordsOfDay).map(lang => 
                    `<div class="word-slide">${createWordCard(wordsOfDay[lang], lang)}</div>`
                ).join('');
                
                sliderContainer.innerHTML = slidesHTML;
                
                // Navigation dots oluştur
                const dotsHTML = Array.from({length: totalWordSlides}, (_, i) => 
                    `<button class="word-slider-dot ${i === 0 ? 'active' : ''}" onclick="goToWordSlide(${i})"></button>`
                ).join('');
                
                sliderNav.innerHTML = dotsHTML;
                
                // Make cards interactive (event delegation): click to play pronunciation
                const containerEl = document.getElementById('wordsContainer');
                if (containerEl && !containerEl.__wodBound) {
                    containerEl.__wodBound = true;
                    const handler = (e) => {
                        const card = e.target.closest('.word-card');
                        if (!card) return;
                        const code = card.getAttribute('data-lang-code');
                        if (!code) return;
                        
                        // Get the word data from the card
                        const wordText = card.querySelector('.word-text').textContent;
                        playPronunciation(wordText, code);
                    };
                    containerEl.addEventListener('click', handler);
                    containerEl.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            handler(e);
                        }
                    });
                }
                
                // Initialize slider
                initWordSlider();
                
            } catch (error) {
                console.error('Kelimeler yüklenirken hata oluştu:', error);
                sliderContainer.innerHTML = `
                    <div class="error">
                        <h3>Kelimeler yüklenemedi</h3>
                        <p>Veriler alınırken bir sorun oluştu. Tekrar deneniyor...</p>
                    </div>
                `;
                
                // Fallback olarak eski yöntemi dene
                try {
                    const fallbackWords = await window.wordOfDayAPI.getAllWordsOfDay();
                    const slidesHTML = Object.keys(fallbackWords).map(lang => 
                        `<div class="word-slide">${createWordCard(fallbackWords[lang], lang)}</div>`
                    ).join('');
                    sliderContainer.innerHTML = slidesHTML;
                    
                    const dotsHTML = Array.from({length: totalWordSlides}, (_, i) => 
                        `<button class="word-slider-dot ${i === 0 ? 'active' : ''}" onclick="goToWordSlide(${i})"></button>`
                    ).join('');
                    sliderNav.innerHTML = dotsHTML;
                    
                    initWordSlider();
                } catch (fallbackError) {
                    console.error('Fallback de başarısız:', fallbackError);
                }
            }
        }

        // Sayfa yüklendiğinde çalıştır
        document.addEventListener('DOMContentLoaded', () => {
            // Web Speech API seslerini yükle
            if ('speechSynthesis' in window) {
                speechSynthesis.onvoiceschanged = () => {
                    console.log('Sesler yüklendi');
                };
            }
            
            loadWordsOfDay();
            const closeBtn = document.getElementById('quizClose');
            if (closeBtn) closeBtn.onclick = closeQuizOverlay;

            const saved = (localStorage.getItem('Lingoano-language') || '').toLowerCase();
            const lastQuizDate = localStorage.getItem('wod_quiz_last') || '';
            const todayKey = getTodayKey();
            const shouldAutoOpen = lastQuizDate !== todayKey;
            if (saved && langNameToCode[saved]) {
                if (shouldAutoOpen) {
                    openQuizOverlay();
                    startQuizForLanguage(saved);
                }
            } else {
                if (shouldAutoOpen) {
                    openQuizOverlay();
                    const saveBtn = document.getElementById('saveLanguageBtn');
                    const select = document.getElementById('quizLanguage');
                    if (saveBtn && select) {
                        saveBtn.onclick = () => {
                            const val = (select.value || '').toLowerCase();
                            if (!langNameToCode[val]) return;
                            try { localStorage.setItem('Lingoano-language', val); } catch (e) {}
                            startQuizForLanguage(val);
                        };
                    }
                }
            }

            // Change language inside quiz popup
            try {
                document.addEventListener('click', (e) => {
                    const btn = e.target.closest('#quizChangeLang');
                    if (!btn) return;
                    const langBlock = document.getElementById('languageSelectBlock');
                    const quizBlock = document.getElementById('quizBlock');
                    const ov = document.getElementById('quizOverlay');
                    if (langBlock && quizBlock && ov) {
                        quizBlock.style.display = 'none';
                        langBlock.style.display = 'block';
                        ov.style.display = 'flex';
                        ov.classList.add('active');
                        const titleEl = document.getElementById('quizTitle');
                        if (titleEl) { titleEl.textContent = tUI('quiz-title'); }
                        // Localize controls
                        try {
                            const p = langBlock.querySelector('p'); if (p) p.textContent = tUI('which-language');
                            const select = document.getElementById('quizLanguage');
                            if (select && select.options && select.options.length > 0) {
                                const firstOpt = Array.from(select.options).find(o => o.value === "");
                                if (firstOpt) firstOpt.text = tUI('select-option');
                                // Preselect current saved language if exists
                                try {
                                    const saved = (localStorage.getItem('Lingoano-language') || '').toLowerCase();
                                    if (saved) select.value = saved;
                                } catch(_) {}
                            }
                            const sbtn = document.getElementById('saveLanguageBtn');
                            if (sbtn) {
                                sbtn.textContent = tUI('continue-button');
                                // Bind handler to save selection and restart quiz
                                try { sbtn.onclick = null; } catch(_) {}
                                sbtn.onclick = () => {
                                    const selectEl = document.getElementById('quizLanguage');
                                    const val = (selectEl && selectEl.value ? selectEl.value : '').toLowerCase();
                                    if (!langNameToCode[val]) return;
                                    try { localStorage.setItem('Lingoano-language', val); } catch(_) {}
                                    startQuizForLanguage(val);
                                };
                            }
                        } catch(_) {}
                    }
                });
            } catch(_) {}

            // Update streak UI on resize (switch between sidebox and footer)
            try {
                window.addEventListener('resize', () => {
                    try { updateStreakBannerDisplay(); } catch(_) {}
                });
            } catch(_) {}
        });

        // İletişim popup fonksiyonları
        document.getElementById('contact-btn').addEventListener('click', function() {
            document.getElementById('contact-popup').style.display = 'block';
        });

        function closeContactPopup() {
            document.getElementById('contact-popup').style.display = 'none';
        }

        // Popup dışına tıklandığında kapatma
        document.getElementById('contact-popup').addEventListener('click', function(e) {
            if (e.target === this) {
                closeContactPopup();
            }
        });

        // ESC tuşu ile kapatma
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeContactPopup();
            }
        });
    </script>
    <script src="script/tts-helper.js"></script>
    <script src="script/dictionary-widget.js"></script>
</body>
</html>
