/* ========================================
MOBILE-FIRST STYLES (Refactored)
======================================== */
/* 1. VARIABLES & RESET */
/* ========================================
DEUTSCH SATZSPIEL - MODERN CSS SYSTEM
Sistemli, Kompakt ve Modern Tasarım
======================================== */
/* ========================================
CSS VARIABLES (Design Tokens)
======================================== */
:root {
--color-primary: #007aff;
/* Subject - 🟦 */
--color-primary-dark: #0056b3;
--color-secondary: #22c55e;
/* Verb - 🟩 */
--color-secondary-dark: #16a34a;
--color-accent: #f59e0b;
/* Time - 🟧 */
--color-accent-dark: #d97706;
/* Colors - Semantic */
--color-success: #22c55e;
--color-error: #ef4444;
--color-warning: #f59e0b;
--color-info: #10b981;
/* Object - 🟢 */
/* Backgrounds */
--bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
--bg-card: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
--bg-overlay: rgba(0, 0, 0, 0.85);
--bg-glass: rgba(255, 255, 255, 0.06);
--bg-glass-hover: rgba(255, 255, 255, 0.12);
/* Text */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
/* Spacing (8px base) */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Typography */
--font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.25rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 1000;
--z-tooltip: 2000;
/* Layout */
--container-max: 900px;
}
/* ========================================
RESET & BASE
======================================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background: var(--bg-primary);
background-attachment: fixed;
min-height: 100vh;
color: var(--text-primary);
padding: var(--space-lg) var(--space-md);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
font-size: var(--font-size-base);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
/* Mobil Responsive */
/* 2. BASE STYLES (Mobile Default) */
:root {
font-size: 14px;
}
body {
padding: var(--space-sm);
}
.container {
padding: 0 var(--space-sm);
}
.header h1 {
font-size: 1.8rem;
margin-bottom: 5px;
}
.header p {
font-size: 1rem;
}
.game-mode {
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 20px;
}
.mode-card {
padding: 20px;
}
.mode-card h3 {
font-size: 1.2rem;
}
.difficulty {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.diff-card {
padding: 15px;
}
.start-btn {
font-size: 16px;
padding: 15px 30px;
margin: 15px auto;
}
.game-area {
padding: 20px;
margin-top: 20px;
}
.question h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.question p {
font-size: 1rem;
}
.words-area,
.answer-area {
min-height: 80px;
padding: 15px;
}
.word {
font-size: 14px;
padding: 8px 12px;
margin: 3px;
}
.modal-content {
margin: 10px;
max-height: 90vh;
overflow-y: auto;
}
.settings-section {
margin-bottom: 20px;
}
.settings-section h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.theme-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.theme-option {
padding: 10px;
}
.theme-name {
font-size: 12px;
}
.language-options {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.language-option {
padding: 10px;
}
.mobile-menu {
display: block;
}
.desktop-only {
display: none;
}
/* 3. TABLET/MOBILE EXTRAS */
/* ═══════════════════════════════════════════════════════
FAZ 4: TABLET & MOBİL OPTİMİZASYON CSS
Ek CSS dosyası — mevcut styles.css'e EKLER
═══════════════════════════════════════════════════════ */
/* ========================================
1. TABLET BREAKPOINT SİSTEMİ
======================================== */
/* 📱 Küçük Telefon (< 360px) */
@media (max-width: 360px) {
:root {
font-size: 12px;
}
body {
padding: 4px;
}
.word {
font-size: 11px;
padding: 6px 8px;
margin: 2px;
border-radius: 16px;
}
.answer-area .word {
font-size: 12px;
padding: 7px 10px;
}
.game-area {
padding: 12px;
border-radius: 12px;
}
.question h3 {
font-size: 1rem;
}
.question p {
font-size: 0.9rem;
}
}
/* 📱 Telefon (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
:root {
font-size: 13px;
}
.word {
font-size: 13px;
padding: 8px 12px;
min-height: 44px;
/* Touch target */
display: inline-flex;
align-items: center;
}
}
/* 📱 Büyük Telefon / Küçük Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
:root {
font-size: 15px;
}
body {
padding: 12px;
}
.container {
max-width: 720px;
}
.word {
font-size: 15px;
padding: 10px 16px;
min-height: 48px;
display: inline-flex;
align-items: center;
}
.game-mode {
grid-template-columns: 1fr 1fr;
}
.difficulty {
grid-template-columns: repeat(3, 1fr);
}
}
/* 📱 Tablet Dikey (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
:root {
font-size: 16px;
}
body {
padding: 20px;
}
.container {
max-width: 960px;
}
.game-area {
padding: 32px;
}
.word {
font-size: 16px;
padding: 12px 20px;
min-height: 52px;
display: inline-flex;
align-items: center;
}
.words-area {
min-height: 120px;
gap: 12px;
}
.answer-area {
min-height: 120px;
}
.question h3 {
font-size: 1.6rem;
}
.question p {
font-size: 1.3rem;
}
}
/* 💻 Tablet Yatay / Desktop (1025px+) */
@media (min-width: 1025px) {
.container {
max-width: 1100px;
}
.word {
font-size: 16px;
padding: 12px 22px;
min-height: 48px;
}
}
/* ========================================
2. TABLET LANDSCAPE SPLIT-VIEW
======================================== */
/* Tablet yatay modda yan panel göster */
@media (min-width: 769px) and (orientation: landscape) {
.game-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
align-items: start;
}
.game-sidebar {
position: sticky;
top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.game-sidebar .sidebar-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 16px;
}
.game-sidebar .sidebar-card h4 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 12px;
}
.game-main {
min-width: 0;
}
}
/* Telefon ve tablet dikeyde sidebar gizle */
@media (max-width: 768px),
(orientation: portrait) {
.game-sidebar {
display: none;
}
.game-layout {
display: block;
}
}
/* ========================================
3. KURAL İPUCU PANELİ
======================================== */
.rule-hint-panel {
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 16px;
margin-bottom: 16px;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rule-hint-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-weight: 600;
font-size: 0.95rem;
}
.rule-hint-header .rule-icon {
font-size: 1.2rem;
}
.rule-hint-body {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
}
.rule-hint-body .pattern-badge {
display: inline-block;
background: rgba(59, 130, 246, 0.2);
border: 1px solid rgba(59, 130, 246, 0.3);
color: #93c5fd;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
margin-left: 6px;
}
/* ========================================
4. KURAL DOĞRULAMA SONUÇ GÖSTERİMİ
======================================== */
.rule-result {
padding: 16px;
border-radius: 16px;
margin-top: 12px;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.rule-result.success {
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.rule-result.error {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.rule-result.warning {
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.3);
}
.rule-result-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
margin-bottom: 8px;
}
.rule-result-message {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.rule-result-hint {
margin-top: 10px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
}
/* Geçilen kurallar listesi */
.rules-passed {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.rules-passed .rule-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.25);
border-radius: 20px;
font-size: 0.78rem;
color: #6ee7b7;
}
/* ========================================
5. İLERLEME PANELİ (Sidebar)
======================================== */
.progress-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.progress-stat {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 10px;
text-align: center;
}
.progress-stat .stat-value {
font-size: 1.3rem;
font-weight: 700;
background: linear-gradient(135deg, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.progress-stat .stat-label {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
/* XP Bar (Sidebar versiyonu) */
.sidebar-xp-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-top: 8px;
}
.sidebar-xp-bar .xp-fill {
height: 100%;
background: linear-gradient(90deg, #60a5fa, #a78bfa);
border-radius: 4px;
transition: width 0.5s ease;
}
/* Kural Listesi (Sidebar) */
.sidebar-rules-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.sidebar-rule-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.03);
border-radius: 10px;
font-size: 0.82rem;
transition: background 0.2s;
}
.sidebar-rule-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.sidebar-rule-item .rule-status {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
flex-shrink: 0;
}
.sidebar-rule-item .rule-status.mastered {
background: rgba(16, 185, 129, 0.2);
color: #6ee7b7;
}
.sidebar-rule-item .rule-status.learning {
background: rgba(245, 158, 11, 0.2);
color: #fcd34d;
}
.sidebar-rule-item .rule-status.locked {
background: rgba(100, 116, 139, 0.2);
color: #94a3b8;
}
/* ========================================
6. DOKUNMATIK İYİLEŞTİRMELER
======================================== */
/* Minimum touch target boyutları */
@media (pointer: coarse) {
.word {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
button,
.btn,
[role="button"] {
min-height: 44px;
min-width: 44px;
}
.settings-btn {
min-height: 48px;
min-width: 48px;
}
/* Drag sırasında kelimeye gölge ekle */
.word.dragging {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
z-index: 100;
}
/* Aktif dokunma durumu */
.word:active {
transform: scale(0.95);
opacity: 0.9;
}
}
/* Haptic feedback animasyonu */
@keyframes hapticPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.word.haptic {
animation: hapticPulse 0.15s ease;
}
/* Drop zone highlight */
.answer-area.drag-over {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.5);
transition: all 0.2s ease;
}
.words-area.drag-over {
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.4);
}
/* Swipe gesture göstergesi */
.swipe-indicator {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(10px);
border-radius: 20px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.82rem;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 50;
}
.swipe-indicator.show {
opacity: 1;
}
/* ========================================
7. KELIME RENKLENDİRME (KURAL MOTORU)
======================================== */
/* Her kelime tipine dinamik renk uygulamak için */
.word[data-type="subject"] {
--word-color: #4a90d9;
--word-bg: #e8f0fe;
}
.word[data-type="verb"] {
--word-color: #34a853;
--word-bg: #e6f4ea;
}
.word[data-type="modal_verb"] {
--word-color: #7b1fa2;
--word-bg: #f3e5f5;
}
.word[data-type="object"] {
--word-color: #00897b;
--word-bg: #e0f2f1;
}
.word[data-type="time"] {
--word-color: #ef6c00;
--word-bg: #fff3e0;
}
.word[data-type="place"] {
--word-color: #9c27b0;
--word-bg: #f3e5f5;
}
.word[data-type="preposition"] {
--word-color: #795548;
--word-bg: #efebe9;
}
.word[data-type="article"] {
--word-color: #607d8b;
--word-bg: #eceff1;
}
.word[data-type="adverb"] {
--word-color: #e91e63;
--word-bg: #fce4ec;
}
.word[data-type="adjective"] {
--word-color: #ff5722;
--word-bg: #fbe9e7;
}
.word[data-type="conjunction"] {
--word-color: #009688;
--word-bg: #e0f2f1;
}
.word[data-type="w_frage"] {
--word-color: #ff9800;
--word-bg: #fff3e0;
}
.word[data-type="pronoun"] {
--word-color: #3f51b5;
--word-bg: #e8eaf6;
}
.word[data-type="noun"] {
--word-color: #5d4037;
--word-bg: #efebe9;
}
.word[data-type="number"] {
--word-color: #00bcd4;
--word-bg: #e0f7fa;
}
.word[data-type="greeting"] {
--word-color: #ffc107;
--word-bg: #fff8e1;
}
/* Renk modu açıkken kelime stilini uygula */
.color-mode-active .word[data-type] {
background: linear-gradient(135deg, var(--word-color), color-mix(in srgb, var(--word-color) 70%, black));
color: white;
border: none;
}
/* Tip etiketi gösterimi */
.word .word-type-label {
display: none;
font-size: 0.6rem;
background: rgba(0, 0, 0, 0.3);
padding: 1px 5px;
border-radius: 6px;
margin-left: 4px;
vertical-align: middle;
}
.grammar-mode .word .word-type-label {
display: inline;
}
/* ========================================
8. ANİMASYONLAR
======================================== */
/* Kelime ekleme animasyonu */
@keyframes wordAppear {
from {
opacity: 0;
transform: translateY(10px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.word.appearing {
animation: wordAppear 0.3s ease forwards;
}
/* Doğru cevap patlama efekti */
@keyframes correctBurst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}
100% {
transform: scale(1);
}
}
.game-area.correct-animation {
animation: correctBurst 0.5s ease;
}
/* Yanlış cevap sallanma efekti */
@keyframes wrongShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-8px);
}
40% {
transform: translateX(8px);
}
60% {
transform: translateX(-6px);
}
80% {
transform: translateX(6px);
}
}
.game-area.wrong-animation {
animation: wrongShake 0.4s ease;
}
/* Floating XP animasyonu */
@keyframes floatUp {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-60px) scale(1.3);
}
}
.floating-xp {
position: fixed;
z-index: 1000;
font-weight: 700;
font-size: 1.2rem;
color: #fbbf24;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
pointer-events: none;
animation: floatUp 1.2s ease-out forwards;
}
/* Streak animasyonu */
@keyframes streakGlow {
0% {
text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(251, 191, 36, 0.6), 0 0 40px rgba(251, 191, 36, 0.3);
}
100% {
text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
}
}
.streak-active {
animation: streakGlow 1.5s ease-in-out infinite;
}
/* ========================================
9. GÜVENLİ ALAN (Safe Area) - Notch
======================================== */
@supports (padding: max(0px)) {
body {
padding-left: max(env(safe-area-inset-left), 8px);
padding-right: max(env(safe-area-inset-right), 8px);
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.mobile-menu {
padding-top: max(env(safe-area-inset-top), 20px);
}
}
/* ========================================
10. DARK / LIGHT MOD DESTEĞİ
======================================== */
/* Sistem tercihine göre otomatik tema */
@media (prefers-color-scheme: light) {
:root {
--bg-card-light: rgba(255, 255, 255, 0.9);
--text-light: #1e293b;
}
/* Light mode opsiyonel — kullanıcı tercihine bırak */
}
/* Yüksek kontrast modu */
@media (prefers-contrast: high) {
.word {
border: 2px solid white;
font-weight: 700;
}
.answer-area {
border-width: 3px;
}
}
/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
}
/* ========================================
11. YAZDIR DESTEĞİ
======================================== */
@media print {
body {
background: white;
color: black;
}
.settings-btn,
.mobile-menu,
.mobile-btn,
.offline-indicator,
.swipe-indicator {
display: none;
}
}
/* ========================================
12. GAME FOOTER & SCORE BAR
======================================== */
.game-footer {
display: flex;
justify-content: center;
width: 100%;
margin-top: 25px;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
animation: slideUp 0.5s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.score {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
font-size: 1.1rem;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Common button styles in footer */
.score button {
border: none;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.score button:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
filter: brightness(1.1);
}
.score button:active {
transform: translateY(0) scale(0.95);
}
/* Specific Button Colors */
.achievement-btn {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.stats-btn {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.learning-btn {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.social-btn {
background: linear-gradient(135deg, #ec4899, #db2777);
}
.mobile-btn {
background: linear-gradient(135deg, #64748b, #475569);
}
.mini-games-btn {
background: linear-gradient(135deg, #10b981, #059669);
}
/* Explanation Toggle specific */
.explanation-toggle-btn {
display: flex !important;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
border-radius: 12px;
color: white;
cursor: pointer;
z-index: 1001;
}
.explanation-toggle-btn.active {
background: linear-gradient(135deg, #22c55e, #16a34a);
box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
border: 1px solid #bef264;
}
/* 📱 Mobile Specific Adjustments for Footer */
@media (max-width: 600px) {
.score {
gap: 8px;
/* Reduce gap on mobile */
font-size: 0.9rem;
/* Smaller font for numbers */
}
/* Hide text labels "Puan:" and "Doğru:" but keep the numbers */
/* This assumes the HTML structure is: Puan: 0 */
/* Since we can't easily target just text nodes with CSS without wrapping them,
we'll rely on a small trick or assume the user accepts "0 | 0" format if we can't hide text.
However, better approach: target the container and modify visibility or font-size if possible.
Given existing HTML: Puan: 0 | Doğru: 0
We can't hide 'Puan:' text alone with CSS unless it's in a span.
ALTERNATIVE: We will hide the whole text and absolutely position the numbers if needed,
OR simply accept that on mobile buttons are icons only.
Let's Focus on Buttons being Icons ONLY as requested.
*/
/* Hide text inside buttons if any (currently buttons are icons only in HTML: 🏆, 📊 etc.
If they had text, this would hide it. Since they are emojis/icons, they are considered text content.
Wait, user said "sadece iconlari goruksun" (only icons visible).
The HTML is: . It IS only icon.
Maybe user means if there WAS text.
But user also said: "Skor:: ve dogru gibi yazilar sadece sayi olark gorukecek"
(Score logs and correct logs should only appear as numbers).
This requires wrapping the text "Puan: " and " | Doğru: " in spans in HTML to hide them via CSS.
Let's update the CSS to support this anticipating HTML change, or try a 'font-size: 0' hack on parent and restoring font-size on spans.
*/
.score {
font-size: 0;
/* Hide text nodes */
}
.score span {
font-size: 1.1rem;
/* Show numbers */
margin: 0 5px;
}
/* Re-add a separator visually if needed, or simple spacing */
.score span:first-child::after {
content: " / ";
color: rgba(255, 255, 255, 0.5);
}
/* Buttons are already just icons/emojis in HTML structure (e.g. 🏆), so no text to hide unless added later.
If buttons had text like "🏆 Achievements", we would do: */
.score button {
padding: 10px;
/* Larger tap area */
}
}
/* Explanation Toggle specific */
.explanation-toggle-btn.active {
background: linear-gradient(135deg, #22c55e, #16a34a);
box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
border: 1px solid #bef264;
}
/* ========================================
13. QUESTION AREA LAYOUT (Mobile)
======================================== */
/* Soru alanı - flex column yapısı */
.question {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* questionText - vurgulu ve ortalı */
#questionText {
text-align: center;
width: 100%;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.6;
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
padding: 16px 20px;
margin: 12px 0;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
letter-spacing: 0.3px;
}
/* hint-btn - ortalı */
.hint-btn {
display: block;
margin: 8px auto 0 auto;
text-align: center;
}
@media (max-width: 600px) {
#questionText {
font-size: 1.2rem;
padding: 12px 16px;
}
}
/* Desktop Specific Adjustments */
@media (min-width: 1025px) {
.game-footer {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
#questionText {
font-size: 1.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
}
/* 4. DESKTOP OVERRIDES (min-width: 769px) */
@media (min-width: 769px) {
/* Mobil Menü */
.mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
padding: 20px;
overflow-y: auto;
}
.mobile-menu.active {
display: block;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.mobile-menu-title {
font-size: 1.5rem;
color: white;
}
.mobile-menu-close {
background: none;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-section {
margin-bottom: 30px;
}
.mobile-menu-section h4 {
color: #f59e0b;
margin-bottom: 15px;
font-size: 1.1rem;
}
.mobile-menu-btn {
display: block;
width: 100%;
background: linear-gradient(45deg, #3b82f6, #1d4ed8);
color: white;
border: none;
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
}
.mobile-menu-btn:hover {
background: linear-gradient(45deg, #1d4ed8, #1e40af);
transform: translateY(-2px);
}
.mobile-menu-btn:active {
transform: translateY(0);
}
/* Touch Gestures */
.touch-gestures {
margin-top: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.gesture-item {
display: flex;
align-items: center;
margin-bottom: 15px;
color: white;
}
.gesture-icon {
font-size: 1.5rem;
margin-right: 15px;
width: 30px;
text-align: center;
}
.gesture-text {
flex: 1;
}
.gesture-title {
font-weight: bold;
margin-bottom: 5px;
}
.gesture-desc {
font-size: 0.9rem;
}
.score {
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.95rem;
margin-bottom: 10px;
}
.mobile-btn {
display: none;
border: none;
border-radius: 999px;
padding: 6px 10px;
background: rgba(15, 23, 42, 0.85);
color: #e5e7eb;
cursor: pointer;
font-size: 1rem;
}
@media (max-width: 768px) {
.mobile-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
.offline-indicator {
position: fixed;
top: 16px;
right: 16px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
font-size: 0.85rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
z-index: 1100;
backdrop-filter: blur(10px);
}
.offline-indicator span {
white-space: nowrap;
}
.offline-indicator.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.touch-guide {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(15, 23, 42, 0.85);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.touch-guide.show {
opacity: 1;
pointer-events: auto;
}
.touch-guide-content {
width: 100%;
max-width: 420px;
background: linear-gradient(135deg, #0f172a, #1f2937);
border-radius: 20px;
padding: 24px 20px;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
}
.touch-guide-content h3 {
margin-bottom: 16px;
font-size: 1.1rem;
text-align: center;
}
.gesture-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.gesture-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.9);
}
.gesture-desc {
font-size: 0.9rem;
color: #e5e7eb;
}
@media (max-width: 480px) {
body {
padding: 5px;
font-size: 12px;
}
.header h1 {
font-size: 1.5rem;
}
.mode-card h3 {
font-size: 1rem;
}
.word {
font-size: 12px;
padding: 6px 10px;
margin: 2px;
}
.theme-grid {
grid-template-columns: 1fr;
}
.language-options {
grid-template-columns: 1fr;
}
}
.header {
text-align: center;
margin-bottom: var(--space-2xl);
padding: var(--space-xl) var(--space-lg);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-glow);
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #6366f1, #0ea5e9, #38bdf8, #6366f1);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 8px;
background: linear-gradient(135deg, #c084fc, #818cf8, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
letter-spacing: -0.5px;
}
.header p {
color: var(--text-secondary);
font-size: var(--font-size-base);
letter-spacing: 0.5px;
}
/* Top Toolbar - Fixed sağ üst köşe */
.top-toolbar {
position: fixed;
top: var(--space-md);
right: var(--space-md);
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.toolbar-btn {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
border: 1px solid rgba(139, 92, 246, 0.3);
color: var(--text-primary);
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
position: relative;
overflow: hidden;
}
.toolbar-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.toolbar-btn:hover {
transform: scale(1.12);
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
border-color: rgba(139, 92, 246, 0.5);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.35));
}
.toolbar-btn:hover::before {
opacity: 1;
}
.toolbar-btn:active {
transform: scale(0.95);
}
/* Settings butonu özel hover - dönme */
#settingsBtnDesktop:hover {
transform: scale(1.12) rotate(90deg);
}
.game-mode {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.mode-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-lg);
text-align: center;
cursor: pointer;
transition: all var(--transition-base);
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.mode-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.12), transparent 70%);
opacity: 0;
transition: opacity var(--transition-base);
}
.mode-card:hover {
transform: translateY(-4px);
border-color: rgba(139, 92, 246, 0.4);
box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
}
.mode-card:hover::after {
opacity: 1;
}
.mode-card.selected {
border-color: rgba(139, 92, 246, 0.6);
background: rgba(99, 102, 241, 0.12);
box-shadow: 0 0 25px rgba(99, 102, 241, 0.2);
}
.mode-card h3 {
font-size: 1.4rem;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.mode-card p {
opacity: 0.7;
margin-bottom: 16px;
font-size: var(--font-size-sm);
position: relative;
z-index: 1;
}
.difficulty {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.diff-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
padding: var(--space-lg);
text-align: center;
cursor: pointer;
transition: all var(--transition-base);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.diff-card:hover {
transform: translateY(-3px);
border-color: rgba(34, 197, 94, 0.3);
box-shadow: 0 8px 30px rgba(34, 197, 94, 0.1);
}
.diff-card.selected {
border-color: rgba(34, 197, 94, 0.5);
background: rgba(34, 197, 94, 0.1);
box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}
/* ========================================
BUTON SİSTEMİ - Modern & Kompakt
======================================== */
/* Base Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
font-size: var(--font-size-base);
font-weight: 500;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
white-space: nowrap;
font-family: var(--font-family);
}
/* Button Variants */
.btn-primary {
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--bg-glass);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: var(--bg-glass-hover);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.btn-accent {
background: linear-gradient(45deg, var(--color-accent), var(--color-accent-dark));
color: white;
box-shadow: var(--shadow-md);
}
.btn-accent:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-success {
background: linear-gradient(45deg, var(--color-success), var(--color-secondary-dark));
color: white;
box-shadow: var(--shadow-md);
}
.btn-success:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-danger {
background: linear-gradient(45deg, var(--color-error), #dc2626);
color: white;
box-shadow: var(--shadow-md);
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Button States */
.btn:disabled,
.btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
pointer-events: none;
}
/* Start Button - Special */
.start-btn {
background: linear-gradient(135deg, #6366f1, #0ea5e9);
color: white;
border: none;
padding: var(--space-lg) var(--space-2xl);
font-size: var(--font-size-xl);
font-weight: 600;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-base);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.35);
margin: var(--space-xl) auto;
display: block;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.start-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.start-btn:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(99, 102, 241, 0.45);
}
.start-btn:hover::before {
transform: translateX(100%);
}
.start-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.game-area {
display: none;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
padding: var(--space-2xl) var(--space-xl);
margin-top: var(--space-xl);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.question {
text-align: center;
margin-bottom: var(--space-xl);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.question h3 {
font-size: 1.4rem;
margin-bottom: var(--space-md);
font-weight: 600;
letter-spacing: -0.3px;
}
.question p {
font-size: 1.15rem;
opacity: 0.9;
}
.words-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--space-lg);
min-height: 100px;
border: 2px dashed rgba(255, 255, 255, 0.15);
border-radius: var(--radius-xl);
padding: var(--space-lg);
background: rgba(0, 0, 0, 0.08);
transition: border-color var(--transition-base);
}
.words-area:hover {
border-color: rgba(255, 255, 255, 0.25);
}
.word {
background: rgba(255, 255, 255, 0.12);
padding: 10px 16px;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-base);
user-select: none;
margin: 4px;
display: inline-block;
font-weight: 500;
font-size: var(--font-size-sm);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-sm);
}
.word:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: var(--shadow-md);
}
.word.dragging {
opacity: 0.5;
transform: rotate(3deg) scale(1.05);
box-shadow: var(--shadow-lg);
}
.word.custom-colored {
background-image: none !important;
}
/* Renk kodları - Kolay mod için */
/* Word Type Colors - Using CSS Variables */
.word.subject {
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
}
.word.verb {
background: linear-gradient(45deg, var(--color-secondary), var(--color-secondary-dark));
}
.word.time {
background: linear-gradient(45deg, var(--color-warning), #d97706);
}
.word.place {
background: linear-gradient(45deg, #ec4899, #be185d);
}
.word.object {
background: linear-gradient(45deg, var(--color-info), #0891b2);
}
.word.preposition {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.article {
background: linear-gradient(45deg, #6b7280, #4b5563);
}
.word.adverb {
background: linear-gradient(45deg, #f97316, #ea580c);
}
.word.adjective {
background: linear-gradient(45deg, #84cc16, #65a30d);
}
.word.possessive {
background: linear-gradient(45deg, #38bdf8, #9333ea);
}
.word.greeting {
background: linear-gradient(45deg, #fbbf24, #f59e0b);
}
.word.noun {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.proper_noun {
background: linear-gradient(45deg, #ec4899, #be185d);
}
.word.language {
background: linear-gradient(45deg, #06b6d4, #0891b2);
}
.word.conjunction {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.W-frage {
background: linear-gradient(45deg, #f59e0b, #d97706);
}
.word.demonstrative_pronoun {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.profession {
background: linear-gradient(45deg, #06b6d4, #0891b2);
}
.word.separable_verb_part {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.number {
background: linear-gradient(45deg, #f59e0b, #d97706);
}
.word.ordinal_number {
background: linear-gradient(45deg, #f59e0b, #d97706);
}
.word.month {
background: linear-gradient(45deg, #f59e0b, #d97706);
}
.word.modal_verb {
background: linear-gradient(45deg, #10b981, #047857);
position: relative !important;
width: auto !important;
height: auto !important;
top: auto !important;
left: auto !important;
z-index: auto !important;
}
/* Modal verb sınıfı için özel düzeltme */
.word.modal.verb {
position: relative !important;
width: auto !important;
height: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
display: inline-block !important;
margin: 5px !important;
padding: 8px 12px !important;
border-radius: 8px !important;
background: linear-gradient(45deg, #10b981, #047857) !important;
color: white !important;
font-weight: bold !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.word.auxiliary_verb {
background: linear-gradient(45deg, #10b981, #047857);
position: relative !important;
width: auto !important;
height: auto !important;
}
.word.past_participle_verb {
background: linear-gradient(45deg, #10b981, #047857);
position: relative !important;
width: auto !important;
height: auto !important;
}
.word.separable_verb {
background: linear-gradient(45deg, #10b981, #047857);
position: relative !important;
width: auto !important;
height: auto !important;
}
.word.relative_pronoun {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.reflexive_pronoun {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.pronoun {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.infinitive_with_zu {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.infinitive_particle {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.auxiliary_verb_Plusquamperfekt {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.verb_Konjunktiv_II {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.auxiliary_verb_Konjunktiv_II {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.auxiliary_verb_Passiv {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.relative_pronoun_Genitiv {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
}
.word.past_participle {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.verb_Präteritum {
background: linear-gradient(45deg, #10b981, #047857);
}
.word.auxiliary_verb_Futur_I_Passiv {
background: linear-gradient(45deg, #10b981, #047857);
}
.word-pool {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--space-lg);
min-height: 100px;
border: 2px dashed rgba(255, 255, 255, 0.12);
border-radius: var(--radius-xl);
padding: var(--space-lg);
background: rgba(0, 0, 0, 0.1);
transition: border-color var(--transition-base);
}
.word-pool:hover {
border-color: rgba(255, 255, 255, 0.2);
}
.answer-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--space-lg);
min-height: 100px;
border: 2px solid rgba(139, 92, 246, 0.25);
border-radius: var(--radius-xl);
padding: var(--space-lg);
background: rgba(139, 92, 246, 0.04);
transition: all var(--transition-base);
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}
.answer-area:hover {
border-color: rgba(139, 92, 246, 0.4);
background: rgba(139, 92, 246, 0.06);
}
.error-indicator {
color: #ef4444;
font-size: 1.5rem;
text-align: center;
margin-top: 10px;
display: none;
}
.error-indicator.show {
display: block;
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
/* İpucu Butonu */
.hint-btn {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.3);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
cursor: pointer;
font-size: var(--font-size-sm);
font-weight: 500;
margin-top: var(--space-md);
transition: all var(--transition-base);
letter-spacing: 0.3px;
}
.hint-btn:hover {
background: rgba(245, 158, 11, 0.25);
border-color: rgba(245, 158, 11, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
}
.hint-area {
position: absolute;
z-index: 1000;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: 450px;
background: linear-gradient(135deg, #1e293b, #334155);
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 20px;
margin-top: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
animation: slideDown 0.3s ease-out;
pointer-events: auto;
}
.hint-area::before {
content: '';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #f59e0b;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hint-content h4 {
color: #f59e0b;
margin: 0 0 10px 0;
font-size: 16px;
}
.hint-content p {
color: #e2e8f0;
line-height: 1.6;
margin: 0 0 15px 0;
font-size: 14px;
}
.color-legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.color-item {
background: rgba(255, 255, 255, 0.1);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: bold;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Settings Buttons - Level, Mode, Difficulty */
.level-buttons,
.mode-buttons,
.difficulty-buttons {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
justify-content: center;
}
.level-btn,
.mode-btn,
.diff-btn {
background: var(--bg-glass);
color: var(--text-primary);
border: 2px solid rgba(255, 255, 255, 0.2);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
cursor: pointer;
font-size: var(--font-size-base);
font-weight: 500;
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
min-width: 80px;
}
.level-btn:hover,
.mode-btn:hover,
.diff-btn:hover {
background: var(--bg-glass-hover);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.level-btn.active,
.mode-btn.active,
.diff-btn.active {
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
color: white;
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.level-btn:disabled,
.mode-btn:disabled,
.diff-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* Action Buttons - Score Area */
.achievement-btn,
.stats-btn,
.learning-btn,
.social-btn,
.mobile-btn {
background: var(--bg-glass);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
cursor: pointer;
font-size: var(--font-size-base);
margin-left: var(--space-md);
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
display: inline-flex;
align-items: center;
justify-content: center;
}
.achievement-btn {
background: linear-gradient(45deg, var(--color-accent), var(--color-accent-dark));
color: white;
border: none;
box-shadow: var(--shadow-sm);
}
.achievement-btn:hover {
background: linear-gradient(45deg, var(--color-accent-dark), #d97706);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stats-btn {
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
color: white;
border: none;
}
.stats-btn:hover {
background: linear-gradient(45deg, var(--color-primary-dark), #1e40af);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.learning-btn {
background: linear-gradient(45deg, var(--color-secondary), var(--color-secondary-dark));
color: white;
border: none;
}
.learning-btn:hover {
background: linear-gradient(45deg, var(--color-secondary-dark), #047857);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.social-btn {
background: linear-gradient(45deg, #0ea5e9, #0284c7);
color: white;
border: none;
}
.social-btn:hover {
background: linear-gradient(45deg, #0284c7, #6d28d9);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.mobile-btn {
background: var(--bg-glass);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-btn:hover {
background: var(--bg-glass-hover);
transform: translateY(-2px);
}
.stats-modal,
.social-modal,
.achievement-modal {
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
}
.social-modal .modal-content {
background: var(--bg-glass);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stats-tabs,
.social-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.tab-btn {
background: transparent;
color: var(--text-secondary);
border: none;
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md) var(--radius-md) 0 0;
cursor: pointer;
font-weight: 500;
font-size: var(--font-size-sm);
transition: all var(--transition-base);
border-bottom: 2px solid transparent;
}
.tab-btn.active {
color: var(--color-primary);
background: rgba(59, 130, 246, 0.1);
border-bottom-color: var(--color-primary);
}
.tab-btn:hover {
color: var(--text-primary);
background: var(--bg-glass);
}
.tab-content {
display: none;
animation: fadeIn 0.4s ease-out;
}
.tab-content.active {
display: block;
}
/* Premium Profile Design (Social) */
.profile-header {
display: flex;
align-items: center;
gap: var(--space-xl);
padding: var(--space-xl);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: var(--space-xl);
}
.profile-avatar {
position: relative;
width: 120px;
height: 120px;
flex-shrink: 0;
}
.profile-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--color-primary);
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
transition: transform 0.3s ease;
}
.profile-avatar:hover img {
transform: scale(1.05) rotate(2deg);
}
.change-avatar-btn {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--bg-glass);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.change-avatar-btn:hover {
background: var(--color-primary);
transform: translateX(-50%) translateY(-2px);
}
.profile-info h3 {
font-size: 28px;
font-weight: 800;
margin: 0 0 10px 0;
background: linear-gradient(135deg, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.profile-info p {
font-size: 16px;
color: var(--text-secondary);
margin: 5px 0;
display: flex;
align-items: center;
gap: 8px;
}
.profile-info p::before {
content: "•";
color: var(--color-primary);
}
/* Glassmorphism Profile Stats */
.profile-stats .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.profile-stats .stat-item {
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: var(--space-lg);
border-radius: var(--radius-lg);
text-align: center;
transition: all 0.3s ease;
}
.profile-stats .stat-item:hover {
transform: translateY(-4px);
background: rgba(30, 41, 59, 0.6);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.profile-stats .stat-label {
display: block;
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
.profile-stats .stat-value {
display: block;
color: white;
font-size: 32px;
font-weight: bold;
font-family: 'Inter', sans-serif;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.5);
}
/* Recent Achievements Badge Area */
.profile-achievements .recent-achievements {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
background: rgba(0, 0, 0, 0.2);
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
.achievement-badge {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
border: 1px solid rgba(245, 158, 11, 0.2);
padding: 10px 20px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 10px;
color: #fcd34d;
font-weight: 500;
transition: all 0.3s ease;
}
.achievement-badge:hover {
background: rgba(245, 158, 11, 0.15);
transform: scale(1.05);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stats-actions {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.strength-item,
.improvement-item,
.recommendation-item {
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 14px;
}
.strength-item:last-child,
.improvement-item:last-child,
.recommendation-item:last-child {
border-bottom: none;
}
.strength-item {
color: #10b981;
}
.improvement-item {
color: #f59e0b;
}
.recommendation-item {
color: #3b82f6;
}
/* Ses Sistemi Stilleri */
.audio-settings {
display: flex;
flex-direction: column;
gap: 15px;
}
.volume-controls {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.volume-controls label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.volume-controls input[type="range"] {
flex: 1;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.volume-controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #3b82f6;
border-radius: 50%;
cursor: pointer;
}
.volume-controls input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: #3b82f6;
border-radius: 50%;
cursor: pointer;
border: none;
}
.music-selection select {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
padding: 8px 12px;
font-size: 14px;
}
.music-selection select option {
background: #1e293b;
color: white;
}
.music-player {
position: fixed;
bottom: 20px;
right: 20px;
background: linear-gradient(135deg, #1e293b, #334155);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 100;
display: none;
}
.music-player.show {
display: block;
animation: slideInUp 0.3s ease-out;
}
.music-player.compact-player {
right: auto !important;
left: 20px !important;
bottom: 20px !important;
padding: 10px 15px !important;
background: rgba(15, 23, 42, 0.85) !important;
backdrop-filter: blur(8px) !important;
border-radius: 50px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
z-index: 9999 !important;
}
.music-player.compact-player .music-btn {
width: 36px !important;
height: 36px !important;
font-size: 14px !important;
}
.music-player.compact-player .music-title {
font-size: 12px !important;
margin-bottom: 0px !important;
}
.music-player.compact-player .music-volume input[type="range"] {
width: 50px !important;
height: 4px !important;
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.music-controls {
display: flex;
align-items: center;
gap: 10px;
}
.music-btn {
background: #3b82f6;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.music-btn:hover {
background: #1d4ed8;
transform: scale(1.1);
}
.music-info {
flex: 1;
color: #e2e8f0;
font-size: 12px;
}
.music-title {
font-weight: bold;
margin-bottom: 2px;
}
.music-volume {
display: flex;
align-items: center;
gap: 5px;
}
.music-volume input[type="range"] {
width: 60px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.music-volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: #3b82f6;
border-radius: 50%;
cursor: pointer;
}
/* Tema Sistemi Stilleri */
.theme-selection {
display: flex;
flex-direction: column;
gap: 20px;
}
.theme-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.theme-option {
cursor: pointer;
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
border: 2px solid transparent;
}
.theme-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.theme-option.active {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
.theme-preview {
padding: 15px;
text-align: center;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.theme-colors {
display: flex;
justify-content: center;
gap: 5px;
margin-bottom: 10px;
}
.color-swatch {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.theme-name {
font-size: 12px;
font-weight: bold;
color: inherit;
}
/* Tema Renkleri */
.dark-theme {
background: linear-gradient(135deg, #1e293b, #334155);
color: #e2e8f0;
}
.light-theme {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
color: #1e293b;
}
.ocean-theme {
background: linear-gradient(135deg, #0f172a, #1e3a8a);
color: #e0f2fe;
}
.sunset-theme {
background: linear-gradient(135deg, #1c1917, #dc2626);
color: #fef3c7;
}
.forest-theme {
background: linear-gradient(135deg, #14532d, #22c55e);
color: #f0fdf4;
}
.purple-theme {
background: linear-gradient(135deg, #581c87, #38bdf8);
color: #faf5ff;
}
.theme-customization {
background: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.theme-customization h4 {
color: #fbbf24;
margin: 0 0 15px 0;
font-size: 16px;
}
.custom-colors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 15px;
}
.custom-colors label {
display: flex;
flex-direction: column;
gap: 5px;
color: #e2e8f0;
font-size: 14px;
}
.custom-colors input[type="color"] {
width: 100%;
height: 40px;
border: none;
border-radius: 8px;
cursor: pointer;
}
/* CSS Variables moved to top of file */
/* Tema Uygulama */
body.theme-dark {
--primary-color: #3b82f6;
--secondary-color: #10b981;
--background-color: #1e293b;
--text-color: #e2e8f0;
--accent-color: #fbbf24;
}
body.theme-light {
--primary-color: #3b82f6;
--secondary-color: #10b981;
--background-color: #f8fafc;
--text-color: #1e293b;
--accent-color: #f59e0b;
}
body.theme-ocean {
--primary-color: #06b6d4;
--secondary-color: #10b981;
--background-color: #0f172a;
--text-color: #e0f2fe;
--accent-color: #06b6d4;
}
body.theme-sunset {
--primary-color: #f59e0b;
--secondary-color: #ef4444;
--background-color: #1c1917;
--text-color: #fef3c7;
--accent-color: #f59e0b;
}
body.theme-forest {
--primary-color: #22c55e;
--secondary-color: #84cc16;
--background-color: #14532d;
--text-color: #f0fdf4;
--accent-color: #22c55e;
}
body.theme-purple {
--primary-color: #38bdf8;
--secondary-color: #ec4899;
--background-color: #581c87;
--text-color: #faf5ff;
--accent-color: #38bdf8;
}
/* Akıllı Öğrenme Sistemi Stilleri */
.smart-learning-settings {
display: flex;
flex-direction: column;
gap: 25px;
}
.smart-learning-settings h4 {
color: #fbbf24;
margin: 0 0 15px 0;
font-size: 16px;
}
.mode-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.mode-options label {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.mode-options label:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(59, 130, 246, 0.3);
}
.mode-options label:has(input:checked) {
background: rgba(59, 130, 246, 0.1);
border-color: #3b82f6;
}
.mode-options input[type="radio"] {
margin: 0;
width: 18px;
height: 18px;
accent-color: #3b82f6;
}
.mode-label {
display: flex;
flex-direction: column;
gap: 4px;
}
.mode-label strong {
color: #e2e8f0;
font-size: 14px;
}
.mode-label small {
color: #94a3b8;
font-size: 12px;
}
.adjustment-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.adjustment-options label {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.adjustment-options input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #3b82f6;
}
.goal-settings {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.goal-settings label {
display: flex;
flex-direction: column;
gap: 8px;
color: #e2e8f0;
font-size: 14px;
}
.goal-settings input[type="number"] {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
padding: 8px 12px;
font-size: 14px;
}
.weak-areas-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 15px;
}
.weak-area-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 4px solid #ef4444;
}
.area-name {
min-width: 120px;
color: #e2e8f0;
font-weight: 500;
font-size: 14px;
}
.weak-area-item .progress-bar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.weak-area-item .progress-fill {
height: 100%;
background: linear-gradient(45deg, #ef4444, #f87171);
transition: width 0.3s ease;
}
.weak-area-item .accuracy {
min-width: 40px;
text-align: right;
color: #ef4444;
font-weight: bold;
font-size: 14px;
}
.learning-progress {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: linear-gradient(135deg, #1e293b, #334155);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 100;
min-width: 200px;
display: none;
}
.learning-progress.show {
display: block;
animation: slideInRight 0.3s ease-out;
}
.difficulty-indicator {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(45deg, #3b82f6, #1d4ed8);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
z-index: 100;
display: none;
animation: fadeInDown 0.3s ease-out;
}
.difficulty-indicator.show {
display: block;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Çoklu Dil Desteği Stilleri */
.language-settings {
display: flex;
flex-direction: column;
gap: 25px;
}
.language-settings h4 {
color: #fbbf24;
margin: 0 0 15px 0;
font-size: 16px;
}
.language-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.language-options label {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.language-options label:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(59, 130, 246, 0.3);
}
.language-options label:has(input:checked) {
background: rgba(59, 130, 246, 0.1);
border-color: #3b82f6;
}
.language-options input[type="radio"] {
margin: 0;
width: 18px;
height: 18px;
accent-color: #3b82f6;
}
.pronunciation-options,
.translation-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.pronunciation-options label,
.translation-options label {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.voice-settings {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 15px;
}
.voice-settings label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: #e2e8f0;
font-size: 14px;
}
.voice-settings input[type="range"] {
flex: 1;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.voice-settings input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #3b82f6;
border-radius: 50%;
cursor: pointer;
}
.pronunciation-button {
background: linear-gradient(45deg, var(--color-secondary), var(--color-secondary-dark));
color: white;
border: none;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-sm);
margin-left: var(--space-md);
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
}
.pronunciation-button:hover {
background: linear-gradient(45deg, var(--color-secondary-dark), #047857);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.word-tooltip {
position: absolute;
background: linear-gradient(135deg, #1e293b, #334155);
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 200px;
word-wrap: break-word;
}
.word-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #1e293b transparent transparent transparent;
}
/* Sosyal Butonu zaten yukarıda tanımlı */
.friends-section,
.leaderboard-section,
.challenges-section,
.profile-section {
display: flex;
flex-direction: column;
gap: 25px;
}
.leaderboard-item.top-3 {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1f2937;
}
/* XP VE SEVİYE SİSTEMİ */
.xp-container {
position: fixed;
top: 20px;
left: 20px;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 15px 20px;
min-width: 200px;
z-index: 100;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.xp-bar-container {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
margin-bottom: 8px;
}
.xp-bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #3b82f6, #0ea5e9);
background-size: 200% 100%;
border-radius: 5px;
transition: width 0.5s ease;
animation: xpBarShimmer 2s linear infinite;
}
@keyframes xpBarShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.xp-float {
position: fixed;
font-size: 1.2rem;
font-weight: bold;
color: #10b981;
z-index: 10000;
pointer-events: none;
animation: xpFloat 1s ease-out forwards;
text-shadow: 0 2px 10px rgba(16, 185, 129, 0.5);
}
@keyframes xpFloat {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-50px);
}
}
/* RTL Support for Arabic */
[dir="rtl"] {
text-align: right;
}
[dir="rtl"] .header,
[dir="rtl"] .card,
[dir="rtl"] .word-pool,
[dir="rtl"] .answer-area,
[dir="rtl"] .settings-section,
[dir="rtl"] .modal-content,
[dir="rtl"] .achievement-item,
[dir="rtl"] .stat-item {
text-align: right;
}
[dir="rtl"] .word {
text-align: center;
}
/* Modal Styles - Modern & Compact */
.modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: var(--bg-overlay);
display: none !important;
align-items: center;
justify-content: center;
z-index: 9999 !important;
padding: var(--space-md);
}
.modal.show,
.modal[style*="flex"] {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.modal-content {
background: var(--bg-card);
border-radius: var(--radius-2xl);
padding: 0;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
}
/* Game Footer */
.game-footer {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
width: 100%;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
z-index: 100;
}
/* Diğer tüm kurallar HTML içinde 5000 satırdı, burada özetlenmiştir. Tam hali styles.css'e yazılmıştır. */
/* Mobil icin Ayarlar Butonu - Her zaman gorunur */
@media (max-width: 768px) {
.settings-btn {
position: fixed !important;
top: 10px !important;
right: 10px !important;
padding: 10px 16px !important;
font-size: 14px !important;
border-radius: 50px !important;
z-index: 1001 !important;
display: flex !important;
align-items: center;
gap: 6px;
}
}
@media (max-width: 480px) {
.settings-btn {
padding: var(--space-xs) var(--space-sm) !important;
font-size: var(--font-size-xs) !important;
}
.btn {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
}
.level-btn,
.mode-btn,
.diff-btn {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
min-width: 60px;
}
.level-buttons,
.mode-buttons,
.difficulty-buttons {
gap: var(--space-sm);
}
.achievement-btn,
.stats-btn,
.learning-btn,
.social-btn,
.mobile-btn {
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
margin-left: var(--space-sm);
}
}
/* ========================================
MİNİ OYUNLAR STİLLERİ
======================================== */
.mini-games-btn {
background: linear-gradient(45deg, var(--color-error), #dc2626);
color: white;
border: none;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
cursor: pointer;
font-size: var(--font-size-base);
margin-left: var(--space-md);
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
}
.mini-games-btn:hover {
background: linear-gradient(45deg, #dc2626, #b91c1c);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.mini-games-modal {
max-width: 1000px !important;
max-height: 90vh;
overflow-y: auto;
}
.mini-games-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
}
.mini-games-tabs .tab-btn {
background: transparent;
color: #94a3b8;
border: none;
padding: 12px 20px;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
font-size: 14px;
}
.mini-games-tabs .tab-btn.active {
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
border-bottom-color: #ef4444;
}
.mini-games-tabs .tab-btn:hover {
color: #e2e8f0;
background: rgba(255, 255, 255, 0.05);
}
.mini-games-content .tab-content {
display: none;
}
.mini-games-content .tab-content.active {
display: block;
}
/* Mini Oyun Bölümleri */
.wordsearch-section,
.daily-challenge-section,
.memory-game-section,
.speed-test-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.wordsearch-header,
.daily-challenge-header,
.memory-game-header,
.speed-test-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wordsearch-header h3,
.daily-challenge-header h3,
.memory-game-header h3,
.speed-test-header h3 {
color: #fbbf24;
margin: 0;
}
.wordsearch-info,
.daily-info,
.memory-info,
.speed-info {
display: flex;
gap: 20px;
color: #e2e8f0;
font-size: 14px;
}
/* Kelime Bulmaca */
.wordsearch-grid {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 2px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.wordsearch-cell {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: #e2e8f0;
cursor: pointer;
transition: all 0.3s ease;
}
.wordsearch-cell:hover {
background: rgba(255, 255, 255, 0.2);
}
.wordsearch-cell.selected {
background: #3b82f6;
color: white;
}
.wordsearch-cell.found {
background: #10b981;
color: white;
}
.wordsearch-cell.wrong {
background: #ef4444;
color: white;
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
.wordsearch-words {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wordsearch-words h4 {
color: var(--color-accent);
margin: 0 0 var(--space-md) 0;
}
.words-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.word-item {
background: rgba(255, 255, 255, 0.1);
padding: 8px 12px;
border-radius: 6px;
color: #e2e8f0;
font-size: 14px;
transition: all 0.3s ease;
}
.word-item.found {
background: #10b981;
color: white;
text-decoration: line-through;
}
.wordsearch-controls,
.memory-controls,
.speed-controls {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* Günlük Meydan Okuma */
.daily-challenge-card {
background: linear-gradient(135deg, #1e293b, #334155);
border-radius: 15px;
padding: 25px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.challenge-title {
color: var(--color-accent);
font-size: var(--font-size-2xl);
font-weight: bold;
margin-bottom: var(--space-sm);
}
.challenge-description {
color: #e2e8f0;
font-size: 16px;
margin-bottom: 20px;
}
.challenge-progress {
margin: 20px 0;
}
.challenge-reward {
color: #10b981;
font-size: 18px;
font-weight: bold;
margin: 15px 0;
}
.daily-history {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.daily-history h4 {
color: #fbbf24;
margin: 0 0 15px 0;
}
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
margin-bottom: 8px;
}
.history-date {
color: #94a3b8;
font-size: 14px;
}
.history-status {
color: #10b981;
font-weight: bold;
}
/* Hafıza Oyunu */
.memory-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
margin: 0 auto;
}
.memory-card {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1e293b, #334155);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.1);
font-size: 24px;
color: #e2e8f0;
}
.memory-card:hover {
transform: scale(1.05);
}
.memory-card.flipped {
background: #3b82f6;
color: white;
}
.memory-card.matched {
background: #10b981;
color: white;
}
/* Hız Testi */
.speed-test-area {
background: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 15px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.speed-question h4 {
color: #fbbf24;
margin: 0 0 15px 0;
font-size: 20px;
}
.speed-question p {
color: #e2e8f0;
font-size: 16px;
margin-bottom: 20px;
}
.speed-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 20px 0;
}
.speed-option {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
color: #e2e8f0;
font-size: 14px;
}
.speed-option:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #3b82f6;
}
.speed-option.selected {
background: #3b82f6;
color: white;
border-color: #1d4ed8;
}
.speed-timer {
margin: 20px 0;
}
.timer-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(45deg, #ef4444, #dc2626);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
color: white;
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
}
.timer-circle.warning {
background: linear-gradient(45deg, #f59e0b, #d97706);
animation: pulse 1s infinite;
}
.timer-circle.danger {
background: linear-gradient(45deg, #ef4444, #dc2626);
animation: pulse 0.5s infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Modal Header ve Footer */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header h2 {
margin: 0;
color: white;
}
.modal-close {
background: transparent;
border: none;
color: #e2e8f0;
font-size: 28px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.modal-body {
padding: 20px 30px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 20px 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Settings Section İyileştirmeleri */
.settings-section {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-section:last-child {
border-bottom: none;
}
.settings-section h3 {
color: var(--color-accent);
margin-bottom: var(--space-md);
font-size: var(--font-size-lg);
}
/* Responsive Mini Oyunlar */
@media (max-width: 768px) {
.mini-games-modal {
max-width: 95% !important;
max-height: 95vh;
}
.wordsearch-grid {
grid-template-columns: repeat(10, 1fr);
}
.wordsearch-cell {
width: 25px;
height: 25px;
font-size: 12px;
}
.memory-grid {
grid-template-columns: repeat(3, 1fr);
}
.memory-card {
width: 60px;
height: 60px;
font-size: 18px;
}
.speed-options {
grid-template-columns: 1fr;
}
.mini-games-tabs {
overflow-x: auto;
}
}
}