/* --- MODERN TASARIM DİLİ VE CSS DEĞİŞKENLERİ --- */
        :root {
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            
            --primary: #0284c7;
            --primary-hover: #0369a1;
            --success: #22c55e;
            --danger: #ef4444;
            --warning: #f59e0b;
            --accent: #38bdf8;
            
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-theme="dark"] {
            --bg-main: #0f172a;
            --bg-card: #1e293b;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-color: #334155;
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
        }

        /* --- MAVİ KONTÜR VE ODAKLANMA SORUNU İÇİN KESİN ÇÖZÜM --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            
            /* Tarayıcıların varsayılan dokunma efektlerini tamamen kaldırır */
            -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-user-select: none;
            user-select: none;
            outline: none !important;
            touch-action: manipulation; /* Çift tıklama yakınlaştırmasını kapatır, tıklamaları hızlandırır */
        }

        /* Tüm elementler için focus ve active durumlarını devre dışı bırakma */
        button, div, span, a, input, select, textarea, img, svg {
            outline: 0 !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        *:focus, *:active, *:focus-visible, *:focus-within {
            outline: 0 !important;
            outline: none !important;
            outline-width: 0 !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        :not(img):not(svg):not(picture):focus,
        :not(img):not(svg):not(picture):active,
        :not(img):not(svg):not(picture):focus-visible,
        :not(img):not(svg):not(picture):focus-within {
            background-image: none !important;
        }

        /* Mavi kontür sorununu tamamen yok eder */
        * {
            -webkit-tap-highlight-color: transparent !important;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
            outline: none !important;
        }

        /* Tıklanabilir alanlarda focus'u zorla kaldır */
        button:focus, button:active, .option-btn:focus, .match-card:focus, .word-chip:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        /* option-btn focus/active anında mavi border'ı zorla nötrle */
        .option-btn:focus, .option-btn:active, .option-btn:focus-visible {
            border-color: var(--border-color) !important;
            background-image: none !important;
            box-shadow: none !important;
            outline: none !important;
        }

        /* Gradient / özel arka planlı option-btn'lerde active gölgeyi öldür */
        .option-btn:active {
            transform: scale(0.99);
            opacity: 0.95;
        }

        /* :focus-visible — sadece klavyeyle gezinen kullanıcılar için tut, dokunmada sıfırla */
        @media (pointer: coarse) {
            *:focus-visible { outline: none !important; box-shadow: none !important; }
            .option-btn, .level-badge-btn, .vocab-set-btn, .placement-opt,
            .start-set-btn, .placement-banner, .level-badge-btn, .vocab-set-btn {
                -webkit-tap-highlight-color: transparent !important;
                tap-highlight-color: transparent !important;
            }
        }
        /* div olarak yazılmış option-btn'lerin de focus/active sıfırlanması */
        div.option-btn:focus, div.option-btn:focus-visible, div.option-btn:active {
            outline: none !important;
            box-shadow: var(--shadow) !important;
            border-color: var(--border-color) !important;
        }
        /* Gradient arkaplanı koruyan özel butonlar */
        div.option-btn[style*="background"]:focus,
        div.option-btn[style*="background"]:focus-visible {
            outline: none !important;
            box-shadow: var(--shadow) !important;
        }
        /* start-set-btn, level-badge-btn focus sıfırla */
        .start-set-btn:focus, .start-set-btn:focus-visible,
        .vocab-set-btn:focus, .vocab-set-btn:focus-visible {
            outline: none !important;
            box-shadow: var(--shadow-lg) !important;
        }
        /* Doğru/yanlış renkleri focus olsa bile korunmalı (öncelik) */
        .option-btn.correct, .option-btn.correct:focus, .option-btn.correct:active {
            border-color: var(--success) !important;
        }
        .option-btn.wrong, .option-btn.wrong:focus, .option-btn.wrong:active {
            border-color: var(--danger) !important;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            transition: var(--transition);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* --- MOBİL CİHAZ ÇERÇEVESİ --- */
        .phone-container {
            width: 100%;
            max-width: 412px;
            height: 100vh;
            max-height: 892px;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            transition: var(--transition);
        }

        @media (min-width: 450px) {
            .phone-container {
                border-radius: 40px;
                height: 85vh;
            }
        }

        /* --- DURUM ÇUBUĞU --- */
        .status-bar {
            padding: 12px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            background-color: var(--bg-main);
            z-index: 10;
        }

        .status-icons {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .theme-toggle {
            cursor: pointer;
            background: none;
            border: none;
            font-size: 16px;
            color: var(--text-main);
        }

        .help-toggle {
            cursor: pointer;
            background: none;
            border: none;
            font-size: 16px;
            color: var(--text-muted);
            margin-right: 2px;
            transition: var(--transition);
        }
        .help-toggle:hover { color: var(--text-main); }

        /* --- ÜST PANEL --- */
        .game-header {
            padding: 8px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .btn-header-action {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-muted);
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-header-action:hover { color: var(--text-main); }
        .btn-header-action.invisible { opacity: 0; pointer-events: none; }

        .progress-container {
            flex-grow: 1;
            height: 20px;
            background-color: var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .progress-bar {
            position: absolute;
            left: 0;
            top: 0;
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--success), #4ade80);
            border-radius: 10px;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        .progress-text {
            position: relative;
            z-index: 2;
            font-size: 11px;
            font-weight: 800;
            color: var(--text-main);
            text-shadow: 0px 0px 2px rgba(255,255,255,0.8);
        }

        .hearts-container {
            display: flex;
            gap: 2px;
            font-size: 15px;
            align-items: center;
            letter-spacing: -1px;
        }

        /* --- ANA İÇERİK ALANI --- */
        .main-content {
            flex-grow: 1;
            padding: 24px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        /* language-view tam alanı kaplasın */
        .main-content > #language-view {
            flex: 1;
        }

        .screen-title {
            font-size: 22px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }

        .screen-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            text-align: center;
            margin-bottom: 24px;
        }

        /* --- FLASHCARD --- */
        .flashcard-wrapper {
            perspective: 1000px;
            margin-bottom: 28px;
            align-self: center;
            width: 100%; 
            max-width: 364px;
            height: 200px;
        }

        .flashcard {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .flashcard.flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: var(--radius-lg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: var(--shadow);
            border: 2px solid var(--border-color);
            padding: 20px;
            text-align: center;
        }

        .card-front {
            background-color: var(--bg-card);
            color: var(--primary);
        }

        .card-back {
            background-color: var(--primary);
            color: #ffffff;
            transform: rotateY(180deg);
        }

        .card-tag {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            margin-bottom: 14px;
        }
        .card-back .card-tag { color: rgba(255,255,255,0.7); }

        .card-word {
            font-size: 32px;
            font-weight: 800;
            line-height: 1.2;
        }

        .card-hint {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 18px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .card-back .card-hint { color: rgba(255,255,255,0.8); }

        /* --- SEÇENEKLER --- */
        .options-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }

        .option-btn {
            background-color: var(--bg-card);
            border: 2px solid var(--border-color);
            color: var(--text-main);
            padding: 14px 20px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .option-btn:hover { border-color: var(--primary); }
        /* Dokunmatik cihazlarda takılı kalan hover mavi border'ını engelle */
        @media (hover: none) {
            .option-btn:hover { border-color: var(--border-color); }
        }
        .option-btn.correct { background-color: rgba(34, 197, 94, 0.15); border-color: var(--success); color: var(--success); }
        .option-btn.wrong { background-color: rgba(239, 68, 68, 0.15); border-color: var(--danger); color: var(--danger); animation: shake 0.4s ease; }

        /* --- CÜMLE PUZZLE ALANI --- */
        .puzzle-target {
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-md);
            min-height: 80px;
            margin-bottom: 24px;
            padding: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            background-color: rgba(0,0,0,0.02);
            align-items: center;
            justify-content: center;
        }

        .word-pool {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
            padding: 12px 0;
        }

        .word-chip {
            background-color: var(--bg-card);
            border: 2px solid var(--border-color);
            border-bottom-width: 4px;
            color: var(--text-main);
            padding: 10px 16px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.1s ease, background-color 0.2s ease;
        }
        .word-chip:active { transform: translateY(2px); border-bottom-width: 2px; }
        .word-chip.used { opacity: 0.2; cursor: default; pointer-events: none; }

        .speech-section { margin: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .mic-btn { background-color: var(--bg-card); border: 2px solid var(--border-color); border-bottom-width: 4px; border-radius: 50%; width: 56px; height: 56px; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
        .mic-btn.listening { background-color: var(--danger) !important; border-color: #b91c1c !important; color: white !important; animation: pulse 1.2s infinite alternate; }
        .speech-status { font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: center; padding: 0 8px; }
        .feedback-panel { background-color: rgba(239, 68, 68, 0.1); border: 2px solid var(--danger); border-radius: var(--radius-md); padding: 12px; margin-top: 12px; text-align: center; color: var(--danger); font-weight: 700; font-size: 14px; }

        /* --- KELİME EŞLEŞTİRME --- */
        .match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
        .match-card { background-color: var(--bg-card); border: 2px solid var(--border-color); border-bottom-width: 4px; border-radius: var(--radius-sm); padding: 14px 8px; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; color: var(--text-main); display: flex; align-items: center; justify-content: center; min-height: 52px; box-shadow: var(--shadow); transition: var(--transition); }
        .match-card.selected { background-color: rgba(2, 132, 199, 0.15); border-color: var(--primary); color: var(--primary); }
        .match-card.matched { background-color: rgba(34, 197, 94, 0.15); border-color: var(--success); color: var(--success); opacity: 0.2; pointer-events: none; transform: scale(0.95); }
        .match-card.wrong { background-color: rgba(239, 68, 68, 0.15); border-color: var(--danger); color: var(--danger); }

        /* --- KELİME BANKASI --- */
        .dict-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
        /* dict-cat-btn removed: using dropdown instead */
        /* Allow text selection inside search input */
        /* input overrides moved to end of style block */
        .dict-item { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); }
        .dict-lang-group { display: flex; flex-direction: column; gap: 2px; }
        .dict-badge { font-size: 10px; padding: 2px 8px; background-color: rgba(2, 132, 199, 0.15); color: var(--primary); border-radius: 20px; font-weight: 700; }

        /* --- DİL SEÇİMİ LOGO --- */
        .lang-logo-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding-top: 8px;
            margin-bottom: 28px;
            opacity: 1 !important;
            visibility: visible !important;
        }
        .lang-logo {
            display: block !important;
            width: 52% !important;
            max-width: 180px !important;
            height: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            filter: none !important;
            object-fit: contain;
            background-image: unset !important;
            pointer-events: none;
        }
        [data-theme="dark"] .lang-logo {
            filter: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* --- DİL SEÇİMİ EKRANI: dikey flexbox dağılımı --- */
        #language-view {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            flex: 1;
            height: 100%;
            padding-top: 16px;
        }
        #language-view .screen-title,
        #language-view .screen-subtitle {
            text-align: center;
        }
        #language-view .options-grid {
            margin-top: 8px;
        }

        /* --- NAVBAR: dil seçimi ekranında gizle (JS ile .hidden-on-lang yönetilir) --- */
        .tab-bar.hidden-on-lang {
            display: none !important;
        }

        /* --- TAB BAR --- */
        .tab-bar { border-top: 1px solid var(--border-color); background-color: var(--bg-card); padding: 10px 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; z-index: 10; }
        .tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition); width: 100%; }
        .tab-item.active { color: var(--primary); }
        .tab-icon { font-size: 20px; }

        /* --- ORTALAMA VE HİZALAMA STİLLERİ --- */
        .center-btn-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-top: 20px;
        }

        .view-centered-layout {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            margin: auto 0;
            text-align: center;
        }

        @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
        .hidden { display: none !important; }
        .no-transition { transition: none !important; }

        /* ── CEFR SEVİYE ROZETLERİ ── */
        .cefr-badge { display:inline-block; font-size:10px; font-weight:800; padding:2px 7px; border-radius:8px; letter-spacing:.5px; vertical-align:middle; margin-left:4px; }
        .cefr-A1 { background:#dcfce7; color:#15803d; }
        .cefr-A2 { background:#d1fae5; color:#065f46; }
        .cefr-B1 { background:#dbeafe; color:#1d4ed8; }
        .cefr-B2 { background:#e0e7ff; color:#4338ca; }
        .cefr-C1 { background:#fef3c7; color:#b45309; }
        .cefr-C2 { background:#fee2e2; color:#b91c1c; }

        /* ── MODAL OVERLAY ── */
        .modal-overlay {
            position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999;
            display:flex; align-items:center; justify-content:center;
            padding:16px; backdrop-filter:blur(4px);
        }
        .modal-box {
            background:var(--bg-card); border-radius:var(--radius-lg);
            padding:24px; width:100%; max-width:420px; max-height:85vh;
            overflow-y:auto; box-shadow:var(--shadow-lg);
            animation: modalIn .25s cubic-bezier(.34,1.56,.64,1);
        }
        @keyframes modalIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

        /* ── MİKRO ANİMASYONLAR ── */
        @keyframes popIn   { 0%{transform:scale(0.8);opacity:0} 100%{transform:scale(1);opacity:1} }
        @keyframes shakeX  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
        @keyframes pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
        @keyframes xpFloat { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-40px)} }
        .anim-pop   { animation:popIn   .3s cubic-bezier(.34,1.56,.64,1) both; }
        .anim-shake { animation:shakeX  .35s ease both; }
        .anim-pulse { animation:pulse   .4s ease both; }
        .xp-float   { position:absolute; font-weight:800; color:var(--success);
                       font-size:18px; pointer-events:none; animation:xpFloat 1.2s ease forwards; z-index:50; }

        /* ── SEVIYE BELİRLEME SINAVI ── */
        .placement-card {
            background:var(--bg-card); border:2px solid var(--border-color);
            border-radius:var(--radius-md); padding:20px; margin-bottom:16px;
            box-shadow:var(--shadow);
        }
        .placement-opt { width:100%; text-align:left; background:var(--bg-card);
            border:2px solid var(--border-color); border-radius:var(--radius-sm);
            padding:12px 16px; margin-bottom:8px; font-size:14px; font-weight:600;
            color:var(--text-main); cursor:pointer; transition:var(--transition); }
        .placement-opt:active { transform:scale(.98); }
        .placement-opt.correct-ans { border-color:var(--success); background:#dcfce7; color:#15803d; }
        .placement-opt.wrong-ans   { border-color:var(--danger);  background:#fee2e2; color:#b91c1c; }

        /* ── SRS HAVUZ KARTLARI ── */
        .srs-card { background:var(--bg-card); border:1.5px solid var(--border-color);
            border-radius:var(--radius-sm); padding:14px 16px; display:flex;
            justify-content:space-between; align-items:center; box-shadow:var(--shadow); }
        .srs-pill { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
        .srs-learn   { background:#dbeafe; color:#1d4ed8; }
        .srs-review  { background:#fef3c7; color:#b45309; }
        .srs-mastered{ background:#dcfce7; color:#15803d; }

        /* ── XP PROGRESS BAR ── */
        .xp-bar-wrap { height:8px; background:var(--border-color); border-radius:8px; overflow:hidden; margin-top:6px; }
        .xp-bar-fill { height:100%; border-radius:8px;
            background:linear-gradient(90deg, var(--primary), #38bdf8);
            transition:width .6s cubic-bezier(.4,0,.2,1); }

        /* ── FEEDBACK & GİZLİLİK ── */
        .form-label  { font-size:13px; font-weight:700; color:var(--text-muted);
            text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; display:block; }
        .form-input  { width:100%; padding:11px 14px; border:2px solid var(--border-color);
            border-radius:var(--radius-sm); font-size:14px; background:var(--bg-card);
            color:var(--text-main); box-sizing:border-box; resize:vertical;
            -webkit-user-select:text !important; user-select:text !important;
            touch-action:auto !important; pointer-events:all !important; }
        .form-input:focus { border-color:var(--primary); outline:none; }

        /* ── KART ÇEVİRME SAYACI ── */
        .flip-counter {
            display:inline-flex; align-items:center; gap:5px;
            background:var(--bg-card); border:1.5px solid var(--border-color);
            border-radius:20px; padding:5px 12px; font-size:13px; font-weight:700;
            color:var(--text-main); margin:0 auto 14px; box-shadow:var(--shadow);
        }
        .flip-counter.depleted { border-color:var(--danger); color:var(--danger); }
        .flip-dots { display:inline-flex; gap:3px; }
        .flip-dot { width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:var(--transition); }
        .flip-dot.active { background:var(--primary); }

        /* ── REKLAM (REWARDED AD) MODALI ── */
        .ad-box { text-align:center; }
        .ad-simulation {
            background:linear-gradient(135deg,#1e293b,#334155); border-radius:var(--radius-md);
            padding:32px 20px; margin:16px 0; color:#fff; position:relative; overflow:hidden;
        }
        .ad-spinner {
            width:44px; height:44px; border:4px solid rgba(255,255,255,0.2);
            border-top-color:#38bdf8; border-radius:50%; margin:0 auto 14px;
            animation:adSpin 0.8s linear infinite;
        }
        @keyframes adSpin { to { transform:rotate(360deg); } }
        .srs-hint-badge {
            display:inline-block; background:#fef3c7; color:#b45309;
            font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px;
            margin-left:6px; vertical-align:middle;
        }

        /* ── NASIL KULLANILIR? (GUIDE) KART ── */
        .guide-card {
            background:var(--bg-card); border:1px solid var(--border-color);
            border-radius:var(--radius-md); padding:16px; margin-bottom:14px;
            box-shadow:var(--shadow);
        }
        .guide-item {
            display:flex; align-items:flex-start; gap:12px;
            padding:10px 0; border-bottom:1px solid var(--border-color);
        }
        .guide-item:last-child { border-bottom:none; padding-bottom:0; }
        .guide-icon { font-size:22px; flex-shrink:0; margin-top:1px; }
        .guide-text-wrap strong { font-size:13px; font-weight:700; color:var(--text-main); display:block; margin-bottom:2px; }
        .guide-text-wrap span { font-size:12px; color:var(--text-muted); line-height:1.5; }

        /* ── PLACEMENT BANNER (Dashboard üstü) ── */
        .placement-banner {
            background:linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
            border-radius:var(--radius-md); padding:16px 18px; margin-bottom:14px;
            display:flex; align-items:center; justify-content:space-between;
            box-shadow:var(--shadow-lg); cursor:pointer;
            -webkit-tap-highlight-color:transparent;
        }
        .placement-banner:active { transform:scale(0.99); opacity:0.95; }
        .placement-banner:focus,
        .placement-banner:focus-visible {
            outline:none !important;
            box-shadow:var(--shadow-lg) !important;
        }
        .placement-banner-left { display:flex; flex-direction:column; gap:3px; }
        .placement-banner-left strong { font-size:14px; font-weight:800; color:#fff; }
        .placement-banner-left span { font-size:11px; color:rgba(255,255,255,0.8); }
        .placement-banner-btn {
            background:rgba(255,255,255,0.22); color:#fff; border:1.5px solid rgba(255,255,255,0.5);
            border-radius:20px; padding:6px 14px; font-size:12px; font-weight:700;
            white-space:nowrap; cursor:pointer;
            -webkit-tap-highlight-color:transparent;
        }

        /* ── AD DOUBLE TEKLIF ── */
        .ad-double-offer {
            background:linear-gradient(135deg,#1e3a5f,#0369a1);
            border-radius:var(--radius-md); padding:20px; margin:12px 0; color:#fff; text-align:center;
        }

        /* ── VOCAB LIST (SYLLABUS) GÖRÜNÜMÜ ── */
        .vocab-set-btn {
            display:flex; justify-content:space-between; align-items:center;
            background:var(--bg-card); border:2px solid var(--border-color);
            border-radius:var(--radius-sm); padding:14px 18px; width:100%;
            margin-bottom:10px; cursor:pointer; transition:var(--transition);
            box-shadow:var(--shadow);
        }
        .vocab-set-btn:active { transform:scale(.98); }
        .vocab-set-btn .set-info { text-align:left; }
        .vocab-set-btn .set-title { font-size:15px; font-weight:700; color:var(--text-main); }
        .vocab-set-btn .set-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }

        .vocab-row {
            display:flex; align-items:center; justify-content:space-between;
            padding:11px 14px; border-bottom:1px solid var(--border-color);
            background:var(--bg-card);
        }
        .vocab-row:last-child { border-bottom:none; }
        .vocab-row:nth-child(even) { background:var(--bg-main); }
        .vocab-row .v-ind { font-size:15px; font-weight:700; color:var(--primary); }
        .vocab-row .v-tr  { font-size:14px; color:var(--text-muted); text-align:right; }
        .vocab-list-card {
            border:1px solid var(--border-color); border-radius:var(--radius-md);
            overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow);
        }
        .vocab-list-header {
            background:linear-gradient(135deg,var(--primary),#0ea5e9);
            padding:14px 16px; color:#fff;
        }
        .vocab-list-header h3 { font-size:15px; font-weight:800; margin-bottom:2px; }
        .vocab-list-header p  { font-size:12px; opacity:0.8; }
        .start-set-btn {
            width:100%; padding:15px; background:var(--primary); color:#fff;
            border:none; border-radius:var(--radius-sm); font-size:16px;
            font-weight:700; cursor:pointer; margin-top:8px;
            transition:var(--transition); box-shadow:var(--shadow-lg);
        }
        .start-set-btn:active { transform:scale(.98); }

        /* Dashboard'daki set seçim butonları */
        .level-set-grid { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
        .level-badge-btn {
            display:flex; align-items:center; gap:12px; padding:13px 16px;
            background:var(--bg-card); border:2px solid var(--border-color);
            border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition);
            box-shadow:var(--shadow);
            -webkit-tap-highlight-color: transparent !important;
            outline:none !important;
        }
        .level-badge-btn:active  { transform:scale(.98); }
        .level-badge-btn:focus,
        .level-badge-btn:focus-visible {
            outline:none !important;
            box-shadow:var(--shadow) !important;
            border-color:var(--border-color) !important;
        }
        .level-icon { font-size:26px; }
        .level-info { text-align:left; }
        .level-info strong { font-size:14px; font-weight:700; color:var(--text-main); }
        .level-info span { display:block; font-size:12px; color:var(--text-muted); margin-top:1px; }

        /* ── ARAMA INPUT: global user-select:none / touch-action:manipulation ezme ── */
        html body #dict-search-input,
        html body #dict-search-input:focus,
        html body #dict-search-input:active,
        html body #dict-search-input:hover {
            -webkit-user-select: text !important;
            user-select: text !important;
            touch-action: auto !important;
            pointer-events: all !important;
            cursor: text !important;
            -webkit-tap-highlight-color: rgba(2,132,199,0.08) !important;
            box-shadow: none !important;
        }
        html body #dict-cat-select,
        html body #dict-cat-select:focus {
            -webkit-user-select: auto !important;
            user-select: auto !important;
            touch-action: auto !important;
            pointer-events: all !important;
            cursor: pointer !important;
            box-shadow: none !important;
            outline: none !important;
            -webkit-appearance: none;
            appearance: none;
        }
        html body #dict-clear-btn {
            pointer-events: all !important;
            touch-action: auto !important;
            box-shadow: none !important;
        }
        /* ══════════════════════════════════════════════════════════════
           KAYIT OL EKRANI
        ══════════════════════════════════════════════════════════════ */
        .register-fields {
            display: flex;
            flex-direction: column;
            margin-bottom: 8px;
        }
        .register-input {
            -webkit-user-select: text !important;
            user-select: text !important;
            touch-action: auto !important;
            pointer-events: all !important;
        }
        .register-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 16px 0;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 600;
        }
        .register-divider::before,
        .register-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }
        .register-social-btns {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* ── Sosyal Giriş Butonları ── */
        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 13px 18px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            transition: var(--transition);
        }
        .social-btn:active { transform: scale(0.98); opacity: 0.9; }
        .social-btn-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* Google: beyaz/gri arka plan, koyu metin */
        .social-btn-google {
            background: #ffffff;
            color: #3c4043;
            border: 1.5px solid #dadce0;
            box-shadow: var(--shadow);
        }
        .social-btn-google:active {
            background: #f8f9fa;
        }
        [data-theme="dark"] .social-btn-google {
            background: #2d2d2d;
            color: #e8eaed;
            border-color: #5f6368;
        }

        /* Facebook: marka mavisi #1877F2 */
        .social-btn-facebook {
            background: #1877F2;
            color: #ffffff;
            border: 1.5px solid #1877F2;
        }
        .social-btn-facebook:active {
            background: #166fe5;
        }

        html body .register-input:focus,
        html body .register-input:active {
            border-color: var(--primary);
            -webkit-user-select: text !important;
            user-select: text !important;
            touch-action: auto !important;
            pointer-events: all !important;
            box-shadow: none !important;
        }

        /* ══════════════════════════════════════════════════════════════
           FREEMİUM — KİLİTLİ KARTLAR
        ══════════════════════════════════════════════════════════════ */
        .locked-card {
            opacity: 0.48;
            filter: grayscale(0.65);
            pointer-events: auto;
            position: relative;
        }
        .locked-card:active { transform: none !important; }

        .locked-icon {
            font-size: 20px;
            flex-shrink: 0;
            color: var(--text-muted);
        }

        /* ══════════════════════════════════════════════════════════════
           FREEMİUM — PROFİL KAYIT OL BUTONU (MİSAFİR)
        ══════════════════════════════════════════════════════════════ */
        .profile-guest-reg-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, var(--primary), #0ea5e9);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            letter-spacing: 0.2px;
        }
        .profile-guest-reg-btn:active { transform: scale(0.98); opacity: 0.92; }

        /* ══════════════════════════════════════════════════════════════
           FREEMİUM — KAYIT OL PROMPT MODALİ
        ══════════════════════════════════════════════════════════════ */
        .freemium-modal-box {
            padding: 28px 24px 20px;
        }

        /* ══════════════════════════════════════════════════════════════
           SPLASH SCREEN
        ══════════════════════════════════════════════════════════════ */
        #splash-screen {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: var(--bg-main);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 32px;
            padding: 40px 32px;
            transition: opacity 0.55s ease;
        }
        #splash-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        .splash-logo {
            width: 120px;
            height: 120px;
            object-fit: contain;
            animation: splash-pulse 1.8s ease-in-out infinite alternate;
        }
        @keyframes splash-pulse {
            from { transform: scale(0.95); opacity: 0.9; }
            to   { transform: scale(1.05); opacity: 1; }
        }
        .splash-progress-wrap {
            width: 180px;
            height: 5px;
            background: var(--border-color);
            border-radius: 10px;
            overflow: hidden;
        }
        .splash-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #08defd, #5c3afd);
            border-radius: 10px;
            animation: splash-load 1.8s ease forwards;
        }
        @keyframes splash-load {
            0%   { width: 0%; }
            50%  { width: 60%; }
            85%  { width: 88%; }
            100% { width: 100%; }
        }
        .splash-url {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* ══════════════════════════════════════════════════════════════
           DİL SEÇİMİ EKRANI — ÜST BANNER (kayıt teşvik)
        ══════════════════════════════════════════════════════════════ */
        #lang-reg-banner {
            display: none;               /* JS ile yönetilir */
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 9px 16px;
            background: linear-gradient(135deg, rgba(2,132,199,0.12), rgba(14,165,233,0.08));
            border: 1.5px solid rgba(2,132,199,0.25);
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 13px;
            font-weight: 700;
            color: var(--primary);
            text-align: center;
            box-sizing: border-box;
        }
        #lang-reg-banner:active {
            transform: scale(0.98);
            background: rgba(2,132,199,0.18);
        }

        /* ══════════════════════════════════════════════════════════════
           GAME HEADER — dil seçimi ekranında gizle
        ══════════════════════════════════════════════════════════════ */
        .game-header.hidden-on-lang {
            display: none !important;
        }

        /* ══════════════════════════════════════════════════════════════
           DASHBOARD — kilitli oyun kartları (game1/2/3)
        ══════════════════════════════════════════════════════════════ */
        .option-btn.game-locked {
            opacity: 0.52;
            filter: grayscale(0.6);
            position: relative;
            cursor: pointer;
        }
        .option-btn.game-locked:active { transform: none !important; }
        .game-lock-badge {
            font-size: 18px;
            flex-shrink: 0;
        }