/* --- ÇOKLU PREMİUM TEMA DEĞİŞKENLERİ --- */
body.theme-notion {
    --bg-main: #191919; --bg-sidebar: #202020; --bg-card: #252525; --bg-input: #2f2f2f;
    --text-main: #f1f1f1; --text-muted: #9b9b9b; --primary: #6366f1;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --success: #10b981; --danger: #eb5757; --warning: #f2c94c; --border-radius: 10px;
}
body.theme-github {
    --bg-main: #0d1117; --bg-sidebar: #161b22; --bg-card: #21262d; --bg-input: #30363d;
    --text-main: #c9d1d9; --text-muted: #8b949e; --primary: #238636;
    --primary-gradient: linear-gradient(135deg, #2ea44f 0%, #238636 100%);
    --success: #238636; --danger: #da3637; --warning: #d29922; --border-radius: 6px;
}
body.theme-dracula {
    --bg-main: #282a36; --bg-sidebar: #21222c; --bg-card: #44475a; --bg-input: #6272a4;
    --text-main: #f8f8f2; --text-muted: #6272a4; --primary: #bd93f9;
    --primary-gradient: linear-gradient(135deg, #ff79c6 0%, #bd93f9 100%);
    --success: #50fa7b; --danger: #ff5555; --warning: #ffb86c; --border-radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-main); color: var(--text-main); display: flex; min-height: 100vh; overflow-x: hidden; }

.sidebar { width: 260px; background-color: var(--bg-sidebar); border-right: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; padding: 2rem 1.5rem; position: fixed; height: 100vh; z-index: 100; }
.logo { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.text-gradient { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.user-level-box { background: rgba(0,0,0,0.2); padding: 0.85rem; border-radius: var(--border-radius); margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.03); }
.level-badge { font-weight: 700; font-size: 0.9rem; color: var(--warning); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.xp-progress-container { background-color: var(--bg-input); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 4px; position: relative; }
.xp-progress-bar { background: var(--primary-gradient); height: 100%; width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.user-level-box small { font-size: 0.75rem; color: var(--text-muted); }

.nav-menu { display: flex; flex-direction: column; gap: 0.4rem; flex-grow: 1; overflow-y: auto; }
.nav-item { background: none; border: none; color: var(--text-muted); padding: 0.8rem 1rem; text-align: left; font-size: 0.9rem; font-weight: 500; cursor: pointer; border-radius: var(--border-radius); display: flex; align-items: center; gap: 0.75rem; transition: all 0.2s; }
.nav-item:hover, .nav-item.active { color: var(--text-main); background-color: var(--bg-card); }
.nav-item.active { border-left: 3px solid var(--primary); }

.theme-switcher-zone { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.5rem; border-top: 1px solid rgba(255,255,255,0.05); margin-bottom: 1rem; font-size: 0.8rem; color: var(--text-muted); }
.theme-dots { display: flex; gap: 8px; }
.theme-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.theme-dot.active { border-color: var(--text-main); }
.dot-notion { background-color: #2f2f2f; } .dot-github { background-color: #21262d; } .dot-dracula { background-color: #bd93f9; }
.sidebar-footer { padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; }
.btn-notif { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; }
#streak-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(245, 158, 11, 0.1); color: var(--warning); padding: 0.4rem 0.8rem; border-radius: 20px; font-weight: 600; font-size: 0.8rem; }

.main-content { margin-left: 260px; flex-grow: 1; padding: 3rem; max-width: 1200px; width: calc(100% - 260px); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }
.content-header { margin-bottom: 2rem; }
.content-header h1 { font-size: 1.8rem; font-weight: 700; }
.flex-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Günlük Görevler */
.quest-card-zone { border-left: 4px solid var(--primary); }
.quests-list-container { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.quest-item { background: rgba(0,0,0,0.15); padding: 0.75rem 1rem; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,0.02); }
.quest-item.completed { opacity: 0.6; border-left: 3px solid var(--success); }
.quest-item.completed .quest-title { text-decoration: line-through; color: var(--text-muted); }
.quest-xp-badge { background: rgba(168, 85, 247, 0.15); color: #a855f7; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }


.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.stat-card { background-color: var(--bg-card); padding: 1.25rem; border-radius: var(--border-radius); display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(255,255,255,0.03); }
.stat-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(99, 102, 241, 0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.stat-icon.checked { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.stat-icon.percentage { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.stat-icon.today { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.stat-info p { font-size: 1.3rem; font-weight: 700; }

/* STEAM TARZI ACHIEVEMENTS (BAŞARIMLAR) */
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 10px; }
.achievement-item { display: flex; align-items: center; gap: 15px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255,255,255,0.04); padding: 1rem; border-radius: 8px; opacity: 0.4; filter: grayscale(100%); transition: all 0.4s ease; }
.achievements-controls { margin-top: 1rem; display: flex; justify-content: flex-end; }
.achievements-controls .btn { min-width: 150px; }
.achievement-item.unlocked { opacity: 1; filter: grayscale(0%); border-color: var(--warning); background: linear-gradient(135deg, rgba(242,201,76,0.05) 0%, rgba(0,0,0,0.2) 100%); box-shadow: 0 0 10px rgba(242, 201, 76, 0.1); }
.ach-icon-box { font-size: 1.75rem; color: var(--text-muted); }
.achievement-item.unlocked .ach-icon-box { color: var(--warning); animation: pulseScale 2s infinite ease-in-out; }
.ach-details h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
.ach-details p { font-size: 0.75rem; color: var(--text-muted); }

.dashboard-lower-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (max-width: 900px) { .main-content { margin-left: 0; width: 100%; padding: 1.5rem; } .sidebar { display: none; } }

.section-card {
    background: rgba(255,255,255,0.05);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.5rem;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(16px);
}
.section-card h3 { font-size: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }

.quiz-box { background: linear-gradient(145deg, rgba(15,23,42,0.98), rgba(20,25,45,0.95)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.22); }
.quiz-question { margin-bottom: 1.5rem; }
#quiz-word-meta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
#quiz-question-text { font-size: 2.2rem; font-weight: 800; line-height: 1.05; margin-top: 0.75rem; color: var(--text-main); }
.quiz-answer-zone { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.quiz-answer-zone input { flex: 1; min-width: 220px; }
.quiz-answer-zone button { min-width: 140px; }
.quiz-voice-zone { margin-top: 1.5rem; padding: 1.25rem 1.3rem; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.12); display: grid; gap: 0.75rem; }
.quiz-voice-zone button { width: 100%; justify-content: center; font-size: 0.95rem; padding: 0.95rem 1.2rem; border-radius: 999px; box-shadow: 0 14px 26px rgba(220, 38, 38, 0.18); }
.quiz-voice-zone button:hover { transform: translateY(-1px); }
#btn-trigger-mic { background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important; }
#mic-status-text { min-height: 24px; font-size: 0.9rem; color: var(--text-muted); }
#quiz-feedback { margin-top: 1.25rem; min-height: 50px; padding: 1rem 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--text-main); font-weight: 600; transition: all 0.25s ease; }
#quiz-feedback.success { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.12); color: var(--success); }
#quiz-feedback.error { border-color: rgba(235,87,87,0.25); background: rgba(235,87,87,0.12); color: var(--danger); }

/* SAF CSS HAFTALIK GRAFİK */
.css-chart-wrapper { display: flex; align-items: flex-end; justify-content: space-between; height: 160px; padding: 1rem 0.5rem 0 0.5rem; background: rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 0.5rem; }
.chart-column { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 8px; }
.chart-bar { width: 28px; background: var(--primary-gradient); border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.6s ease; position: relative; }
.chart-bar-val { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 600; color: var(--text-main); opacity: 0; }
.chart-column:hover .chart-bar-val { opacity: 1; }
.chart-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }

/* METIN OKUYUCU AKIŞ DÜZENİ */
.interactive-text-stream { line-height: 2; font-size: 1.1rem; color: var(--text-main); word-spacing: 2px; }
.reader-word-node { cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: all 0.15s; display: inline-block; }
.reader-word-node:hover { background-color: var(--primary); color: white; transform: scale(1.05); }
.reader-known-word { background-color: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.25); }

.reader-top-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.reader-input-card, .reader-library-card { min-height: 360px; }
.reader-library-card { display: flex; flex-direction: column; gap: 1rem; }
.reader-library-list { display: flex; flex-direction: column; gap: 0.75rem; overflow-y: auto; max-height: 380px; }
.reader-library-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.reader-library-item strong { font-size: 0.97rem; }
.reader-library-actions { display: flex; justify-content: flex-end; }
.reader-output-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.reader-output-header h3 { margin: 0; }
.reader-output-meta { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.35rem; }
.reader-notes-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1rem; margin-top: 1.5rem; }
.reader-notes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; }
.reader-clicked-words { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.reader-clicked-word { background: rgba(99, 102, 241, 0.15); color: #c7d2fe; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8rem; }
.btn-small { padding: 0.45rem 0.85rem; font-size: 0.8rem; }

/* HAFIZA YANKISI BÖLÜMÜ */
.audio-lounge-box { text-align: center; padding: 3rem; }
.audio-status-display { margin-bottom: 2rem; }
#audio-lounge-icon { font-size: 3.5rem; color: var(--text-muted); margin-bottom: 1rem; }
#audio-lounge-icon.pulse-playing { color: var(--success); animation: pulseScale 1.5s infinite ease-in-out; }
#audio-lounge-word { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.audio-mode-selector { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.audio-mode-selector .btn { min-width: 120px; }
.audio-mode-selector .btn.active { border-color: var(--success); background: rgba(34,197,94,0.12); color: var(--success); }

/* KELİMEDEN HİKAYEYE (STORY MODE) GÖRSEL TASARIMI */
.story-words-display { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.story-word-tag { background-color: var(--bg-input); border: 1px solid rgba(255,255,255,0.08); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: var(--text-main); display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; }
.story-word-tag i { color: var(--text-muted); font-size: 0.75rem; }
.story-word-tag.used { background: rgba(16, 185, 129, 0.15); border-color: var(--success); color: var(--success); }
.story-word-tag.used i { color: var(--success); }

/* DÜŞEN KELİME REFLEKS OYUNU */
.game-zone-wrapper { background: rgba(0,0,0,0.1); padding: 1.5rem; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,0.03); margin-top: 15px; }
.fall-game-dashboard { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-weight: 600; }
.fall-game-arena { width: 100%; height: 280px; background-color: #121214; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
.falling-word { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--primary-gradient); padding: 0.4rem 1rem; border-radius: 20px; font-weight: 700; color: #fff; white-space: nowrap; }
.fall-game-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 1.25rem; }
.btn-fall-opt { background-color: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); color: var(--text-main); padding: 1rem; border-radius: 8px; cursor: pointer; text-align: center; }
.btn-fall-opt:hover { border-color: var(--primary); }

/* Form Elemanları ve Genel */
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
input, select, textarea { background-color: var(--bg-input); border: 1px solid rgba(255,255,255,0.08); color: var(--text-main); padding: 0.85rem 0.95rem; border-radius: 12px; font-size: 0.93rem; outline: none; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
input:hover, select:hover, textarea:hover { background-color: rgba(255,255,255,0.06); }
input:focus, select:focus, textarea:focus { border-color: rgba(99, 102, 241, 0.45); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12); }
.btn { border: 1px solid rgba(255,255,255,0.12); padding: 0.75rem 1.1rem; border-radius: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.92rem; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease, border-color 0.18s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); }
.btn:hover { transform: translateY(-1px); opacity: 0.97; filter: saturate(1.08); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2); }
.btn:active { transform: translateY(0); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); }
.btn-primary { background: linear-gradient(135deg, #7c3aed, #ec4899); color: white; border-color: rgba(255,255,255,0.16); }
.btn-secondary { background-color: rgba(255,255,255,0.06); color: var(--text-main); border-color: rgba(255,255,255,0.12); }
.btn-secondary.active { background: rgba(99,102,241,0.18); color: white; border-color: rgba(99,102,241,0.28); }
.btn-success { background: linear-gradient(135deg, #22c55e, #10b981); color: #fff; border-color: rgba(16,185,129,0.24); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border-color: rgba(239,68,68,0.24); }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #f97316); color: #111; border-color: rgba(249,115,22,0.24); }

.mic-btn.pulse-active { animation: pulseDanger 1.2s infinite ease-in-out; background-color: #b91c1c !important; color: white !important; }

/* Anki Kart Düzeni */
.cards-study-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 450px; }
#flashcard-container { perspective: 1000px; width: 100%; max-width: 480px; }
.flashcard { width: 100%; height: 340px; position: relative; transform-style: preserve-3d; transition: transform 0.5s ease; cursor: pointer; }
.flashcard.flipped { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--border-radius); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: var(--bg-card); border: 1px solid rgba(255,255,255,0.03); }
.card-back { transform: rotateY(180deg); }
.card-mnemonic-box { background: rgba(245, 158, 11, 0.08); border: 1px dashed rgba(245, 158, 11, 0.3); padding: 0.75rem; border-radius: 8px; font-size: 0.85rem; color: var(--warning); margin-top: 10px; width: 100%; display: flex; gap: 6px; }

/* GitHub Stili Katkı Takvimi */
.github-contributor-card { padding: 1.8rem 2rem; width: 100%; }
.github-contributor-card h3 { font-size: 1.15rem; }
.github-contributor-card p { max-width: 720px; }
.github-calendar-panel { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 1.25rem; align-items: stretch; }
.github-activity-calendar { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 4px; overflow-x: auto; scroll-behavior: smooth; padding: 0.8rem 0.6rem 0.75rem; margin: 0 auto; width: 100%; max-width: 100%; min-width: auto; justify-content: center; }
.github-activity-calendar::-webkit-scrollbar { height: 8px; }
.github-activity-calendar::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); border-radius: 999px; }
.github-activity-calendar::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); border-radius: 999px; }
.github-day { width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08); background-color: var(--bg-input); transition: transform 0.15s ease, background-color 0.15s ease; }
.github-day:hover { transform: scale(1.15); z-index: 3; }
.github-day-empty { background: transparent; border-color: transparent; }
.github-day[data-level="0"] { background-color: var(--bg-input); }
.github-day[data-level="1"] { background-color: #16a34a; }
.github-day[data-level="2"] { background-color: #22c55e; }
.github-day[data-level="3"] { background-color: #14b8a6; }
.github-day[data-level="4"] { background-color: #0ea5e9; }
.github-month-selector { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 1rem 0; }
.github-month-option { padding: 0.55rem 0.9rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; color: var(--text-main); font-size: 0.82rem; cursor: pointer; transition: all 0.18s ease; }
.github-month-option:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.github-month-option.active { background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(59,130,246,0.18)); border-color: rgba(59,130,246,0.28); color: white; }
.github-year-selector { background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 0.9rem 0.8rem; max-height: 365px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; scrollbar-width: none; -ms-overflow-style: none; }
.github-year-selector::-webkit-scrollbar { width: 0; height: 0; }
.github-year-selector h4 { margin: 0 0 0.75rem 0; font-size: 0.95rem; color: var(--text-main); }
.github-year-option { border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 0.8rem 0.9rem; background: rgba(255,255,255,0.03); color: var(--text-main); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; text-align: center; }
.github-year-option:hover { background: rgba(255,255,255,0.06); }
.github-year-option.active { background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(59,130,246,0.18)); border-color: rgba(59,130,246,0.28); color: white; }
.github-calendar-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.github-legend { display: flex; align-items: center; gap: 0.65rem; color: var(--text-muted); font-size: 0.92rem; }
.contrib-key { width: 18px; height: 18px; border-radius: 5px; display: inline-block; border: 1px solid rgba(255,255,255,0.12); }
.contrib-level-0 { background-color: var(--bg-input); }
.contrib-level-1 { background-color: #2563eb; }
.contrib-level-2 { background-color: #1d4ed8; }
.contrib-level-3 { background-color: #0ea5e9; }
.contrib-level-4 { background-color: #22d3ee; }

/* Kelime Tablosu */
.search-filter-bar { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.search-box { position: relative; flex-grow: 1; }
.search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-box input { padding-left: 2.5rem; }
.table-container { background-color: var(--bg-card); border-radius: var(--border-radius); overflow-x: auto; }
.words-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.words-table th, .words-table td { padding: 0.95rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; }
.words-table tbody tr { transition: background 0.2s ease, transform 0.2s ease; }
.words-table tbody tr:hover { background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.word-table-name { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; }
.word-table-title-group { display: flex; flex-direction: column; gap: 0.15rem; }
.word-table-subtitle { font-size: 0.78rem; color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-actions { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }
.btn-icon { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; }
.btn-icon:hover { background: rgba(255,255,255,0.12); color: var(--primary); transform: translateY(-1px); }
.btn-icon:active { transform: translateY(0); }
.btn-icon-secondary { background: rgba(255,255,255,0.08); border-color: rgba(99,102,241,0.18); color: var(--text-main); }
.btn-icon-danger { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.24); color: var(--danger); }
.btn-icon-sound { width: auto; min-width: 42px; padding: 0 0.85rem; border-radius: 999px; font-size: 0.95rem; }

.mini-progress-wrapper { display: flex; align-items: center; gap: 8px; }
.mini-progress-container { background-color: var(--bg-input); height: 6px; border-radius: 3px; width: 60px; overflow: hidden; }
.mini-progress-bar { height: 100%; background-color: var(--warning); }
.mini-progress-bar.high { background-color: var(--success); }
.mini-progress-bar.low { background-color: var(--danger); }

.badge-status { padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7 roll; font-weight: 600; }
.status-new { background-color: rgba(99, 102, 241, 0.1); color: #818cf8; }
.status-learning { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); }
.status-learned { background-color: rgba(16, 185, 129, 0.1); color: var(--success); }

.critical-words-list { display: flex; gap: 8px; flex-wrap: wrap; }
.critical-tag { background: rgba(235, 87, 87, 0.15); color: var(--danger); padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.8rem; border: 1px solid rgba(235, 87, 87, 0.2); }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { background-color: var(--bg-card); padding: 1.75rem; border-radius: var(--border-radius); width: 100%; max-width: 380px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }
.hidden { display: none !important; }

/* Eş Anlamlı Avcısı Seçenek Izgarası */
.synonym-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-synonym-opt { background-color: var(--bg-input); border: 1px solid rgba(255,255,255,0.08); color: var(--text-main); padding: 0.85rem; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; text-align: center; transition: all 0.2s ease; }
.btn-synonym-opt:hover { border-color: var(--primary); background-color: var(--bg-card); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); }

/* Overclock Animasyon Modülü */
@keyframes crystalShock { 0% { background-color: var(--bg-main); } 50% { background-color: #4d0026; } 100% { background-color: var(--bg-main); } }
.crystal-overclock-active { animation: crystalShock 0.8s ease-in-out 2; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseDanger { 0% { box-shadow: 0 0 0 0 rgba(235, 87, 87, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(235, 87, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(235, 87, 87, 0); } }
@keyframes pulseScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.correct-flash { border-color: var(--success) !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }
.wrong-flash { border-color: var(--danger) !important; box-shadow: 0 0 15px rgba(235, 87, 87, 0.3); }

/* =========================================
   PREMIUM CYBER FLASHCARD TASARIMI
========================================= */
.cards-study-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: calc(100vh - 200px);
}

#flashcard-container {
    perspective: 1200px;
    width: 100%;
    max-width: 520px;
}

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

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, #1e1e24 0%, #121215 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.3s;
}

.flashcard:hover .card-face {
    box-shadow: 0 25px 50px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cyber-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-main);
}

.success-badge {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.card-hint-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-main-word {
    text-align: center;
    margin: auto 0;
}

.card-main-word h2 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #a8a8a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.meaning-word h2 {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-sentence-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.box-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.card-sentence-box p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #e2e8f0;
    font-style: italic;
}

.card-mnemonic-box {
    background: rgba(245, 158, 11, 0.05) !important;
    border: 1px dashed rgba(245, 158, 11, 0.2) !important;
    padding: 0.85rem;
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--warning);
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Anki Tepki Butonları */
#card-actions-panel {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 520px;
    animation: fadeIn 0.4s ease;
}

.btn-anki-danger, .btn-anki-success {
    flex: 1;
    border: none;
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: white;
    transition: all 0.2s ease;
    text-align: left;
}

.btn-anki-danger {
    background: linear-gradient(135deg, #e63946 0%, #b91c1c 100%);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);
}

.btn-anki-success {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.btn-anki-danger:hover, .btn-anki-success:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-anki-danger div, .btn-anki-success div {
    display: flex;
    flex-direction: column;
}

.btn-anki-danger span, .btn-anki-success span {
    font-weight: 700;
    font-size: 0.95rem;
}

.btn-anki-danger small, .btn-anki-success small {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* =========================================
   WORD MATCH OYUNU TAM TASARIM YAMASI
========================================= */
#zone-match-game {
    width: 100%;
    max-width: none;
    margin: 0;
}

.match-game-status {
    padding: 0.95rem 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.14);
    color: #c7d2fe;
    font-size: 0.92rem;
    line-height: 1.4;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 20px;
    perspective: 1000px;
}

.game-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-input) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1.5rem 0.75rem;
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    user-select: none;
    color: var(--text-main);
    word-break: break-word;
}

.game-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}

.game-card.selected {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary);
    color: #a855f7;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
    transform: scale(0.98);
}

.game-card.matched {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
    opacity: 0.5;
    cursor: default;
    transform: scale(0.95);
    pointer-events: none;
    box-shadow: none;
}