/* ========================================================================== SOSYAL KELÄ°ME YARIÅMALARI - TAM SÄ°STEM CSS (CLEANED & MERGED V12.5) TÃ¼m Sayfalar: Index, Login, Register, Teacher, Student, Play, Admin Son GÃ¼ncelleme: Ocak 2026 (En son eklenen yamalar dahildir) ========================================================================== */
/* -------------------------------------------------------------------------- 1. DEÄÄ°ÅKENLER VE TEMEL RENKLER -------------------------------------------------------------------------- */
:root {
    --bg-dark: #0d1117;
    --bg-panel: #161b22;
    --text-main: #e6edf3;
    --text-muted: #8b949e;
    --accent: #d32f2f;
    --accent-hover: #b71c1c;
    --border: #30363d;
    --game-correct: #538d4e;
    --game-present: #b59f3b;
    --game-absent: #3a3a3c;
    --game-hint: #1f6feb;
    --glass-bg: rgba(22, 27, 34, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(211, 47, 47, 0.4);
}
/* -------------------------------------------------------------------------- 2. GENEL SIFIRLAMA VE YAPI -------------------------------------------------------------------------- */
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #30363d #0d1117; }
/* Chrome Scrollbar */
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: #0d1117; }
body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
body {
    margin: 0;
    padding: 0;
    padding-top: 70px !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: 0.2s ease; }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; }
/* -------------------------------------------------------------------------- 3. NAVBAR (ÃœST MENÃœ - GÃœNCEL V13 + HÄ°ZALAMA DÃœZELTMESÄ°) -------------------------------------------------------------------------- */
.navbar {
    height: 70px;
    background-color: rgba(22, 27, 34, 0.95);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-container { width: 100%; max-width: 1400px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.brand {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.brand i { color: var(--accent); font-size: 1.8rem; }
.brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}
.brand-top {
    font-size: 0.62rem;
    font-weight: 900;
    color: #d32f2f;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.brand-bottom {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.4px;
}
.auth-buttons { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.btn-login {
    color: #fff;
    background: transparent;
    font-weight: 600;
    padding: 8px 20px;
    border: 2px solid var(--accent);
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}
.btn-login:hover { background-color: var(--accent); color: white; }
.btn-register {
    background: var(--accent);
    color: white;
    padding: 8px 25px;
    border-radius: 6px;
    font-weight: 600;
    border: 2px solid var(--accent);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}
.btn-register:hover { background: transparent; color: var(--accent); }
/* Profil & Dropdown (GÃ¼ncel) */
.profile-dropdown { position: relative; }
/* MenÃ¼ hizalamasÄ± iÃ§in */
.profile-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #e6edf3;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: 0.3s;
    user-select: none;
}
.profile-btn:hover, .profile-btn:focus { background-color: rgba(255, 255, 255, 0.08); }
.profile-name { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    margin-top: 10px;
    background-color: #161b22;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    border: 1px solid #30363d;
    border-radius: 12px;
    z-index: 100000;
    overflow: hidden;
    animation: menuSlideIn 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dropdown-menu.show { display: block; }
.menu-role-header { padding: 15px; background: #0d1117; border-bottom: 1px solid #30363d; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.role-label { font-size: 0.65rem; color: #8b949e; font-weight: 800; letter-spacing: 1px; }
.role-badge {
    font-size: 0.8rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.badge-student { background: linear-gradient(135deg, #1f6feb, #10469b); border: 1px solid #1f6feb; }
.badge-teacher { background: linear-gradient(135deg, #d32f2f, #911818); border: 1px solid #d32f2f; }
.badge-admin { background: linear-gradient(135deg, #f85149, #b31d28); border: 1px solid #f85149; }
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #c9d1d9;
    transition: 0.2s;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.dropdown-menu a:hover { background-color: rgba(56, 139, 253, 0.1); color: #58a6ff; border-left-color: #58a6ff; }

.menu-divider { border-top: 1px solid #30363d; margin: 5px 0; }
.logout-link { color: #ff7b72 !important; border-top: 1px solid #30363d; }
.logout-link:hover { background-color: rgba(218, 54, 51, 0.1) !important; color: #ff7b72 !important; border-left-color: #ff7b72 !important; }

/* Navbar bildirim modali */
.notify-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notify-box {
    background: #161b22;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #30363d;
    text-align: center;
    max-width: 400px;
}

.notify-icon {
    font-size: 3rem;
    color: #58a6ff;
    margin-bottom: 20px;
}

.notify-title {
    color: #fff;
    margin: 0 0 15px 0;
}

.notify-message {
    color: #c9d1d9;
    margin-bottom: 25px;
}

.notify-ok-btn {
    width: auto !important;
    padding: 10px 30px !important;
}
@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        } to {
        opacity: 1;
        transform: translateY(0) scale(1);
        }
    }
/* -------------------------------------------------------------------------- 4. HERO SECTIONS VE ARKAPLANLAR (GÃœNCEL DÃœZELTME) -------------------------------------------------------------------------- */
.hero-section {
    width: 100%;
    height: 450px;
    background: linear-gradient(rgba(13, 17, 23, 0.7), rgba(13, 17, 23, 0.9)), url(img/index-wallpaper.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    position: relative;
    z-index: 1;
}
.hero-content { padding: 20px; animation: fadeIn 1s ease-out; }
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hero-content p { font-size: 1.3rem; color: #e6edf3; max-width: 800px; margin: 0 auto; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); font-weight: 500; }
/* Paneller - DÃ¼zeltilmiÅŸ Arka Plan */
.action-panel, .teacher-hero, .student-hero {
    background-image: url(img/index-teacher-wallpaper.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%;
    max-width: 900px;
    padding: 80px 40px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.action-panel h2, .teacher-hero h2, .student-hero h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.main-wrapper { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; align-items: center; }
/* -------------------------------------------------------------------------- 5. BUTONLAR VE FORMLAR (GÃœNCEL + Ã–ZEL BUTONLAR) -------------------------------------------------------------------------- */
.btn-create-game, .btn-join {
    background-color: var(--accent) !important;
    color: white !important;
    padding: 18px 45px !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: 0.3s !important;
    text-transform: uppercase !important;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.4) !important;
}
.btn-create-game:hover, .btn-join:hover {
    transform: scale(1.05) !important;
    background-color: var(--accent-hover) !important;
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.6) !important;
}
.modern-form { display: flex; gap: 20px; justify-content: center; width: 100%; flex-wrap: wrap; margin-top: 20px; }
.big-btn {
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 800;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    text-transform: uppercase;
    min-width: 200px;
    letter-spacing: 1px;
    color: white;
}
.btn-primary { background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%); border: 1px solid #d32f2f; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.btn-primary:hover { transform: translatey(-3px); box-shadow: 0 10px 25px rgba(211, 47, 47, 0.5); }
.btn-secondary { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); transform: translatey(-3px); }
/* Inputlar */
.code-form { display: flex; gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.code-input, .big-input {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #58a6ff;
    border-radius: 12px;
    padding: 18px 25px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    text-align: center;
    min-width: 220px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: 0.3s;
}
.code-input:focus, .big-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 20px rgba(211, 47, 47, 0.3); }
/* Form Group & Genel Input */
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper i { position: absolute; left: 15px; font-size: 1.1rem; }
.input-wrapper input, .form-control {
    width: 100%;
    padding: 14px 14px 14px 45px;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: 0.3s;
}
.form-control { padding-left: 15px; }
.input-wrapper input:focus, .form-control:focus { outline: none; border-color: var(--accent); background-color: #333; }
.btn-submit {
    width: 100%;
    padding: 14px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}
.btn-submit:hover { background-color: var(--accent-hover); transform: translatey(-2px); }
/* -------------------------------------------------------------------------- 6. AUTH VE SETUP (KAYIT, GÄ°RÄ°Å, OYUN OLUÅTURMA) -------------------------------------------------------------------------- */
.auth-body { display: flex; flex-direction: column; }
.auth-wrapper { flex: 1; display: flex; justify-content: center; align-items: center; padding: 40px 20px; }
/* Setup & Auth Container (GÃ¼ncel) */
.auth-container, .setup-container {
    background-color: #161b22;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #333;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.5s ease-out;
}
.auth-container { max-width: 480px; }
/* Auth iÃ§in daraltma */
.auth-header { text-align: center; margin-bottom: 30px; }
.auth-header h2 { font-size: 2rem; color: #fff; margin-bottom: 10px; }
.auth-header p { color: var(--text-muted); font-size: 0.95rem; }
.auth-footer { text-align: center; margin-top: 20px; border-top: 1px solid #333; padding-top: 20px; color: #888; }
.auth-footer a { color: #fff; font-weight: bold; }
/* Setup Gri Inputlar */
.setup-container input[type="text"], .setup-container select {
    background-color: #2e343d !important;
    border: 1px solid #444c56 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 1rem;
    width: 100%;
    transition: all 0.3s ease;
}
.setup-container input:focus, .setup-container select:focus {
    background-color: #363c46 !important;
    border-color: #58a6ff !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}
/* Kelime SatÄ±rlarÄ± Grid */
.btn-add-row {
    background: linear-gradient(135deg, #1f6feb, #10469b);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(31, 111, 235, 0.4);
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-add-row:hover { transform: translatey(-2px); box-shadow: 0 6px 20px rgba(31, 111, 235, 0.6); }
.btn-save-game {
    width: 100%;
    padding: 20px;
    margin-top: 40px;
    background: linear-gradient(135deg, #d32f2f, #8a1c1c);
    color: white;
    font-size: 1.4rem;
    font-weight: 800;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(211, 47, 47, 0.3);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.btn-save-game:hover { transform: translatey(-4px) scale(1.01); box-shadow: 0 15px 40px rgba(211, 47, 47, 0.5); }
.btn-delete-row {
    background: rgba(218, 54, 51, 0.1);
    border: 1px solid rgba(218, 54, 51, 0.3);
    color: #f85149;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}
.btn-delete-row:hover { background: #d32f2f; color: white; }
/* Radio Card */
.radio-card input { position: absolute; opacity: 0; }
/* -------------------------------------------------------------------------- 7. SLIDER & OYUN KARTLARI -------------------------------------------------------------------------- */
.game-section { width: 100%; margin-bottom: 40px; }
.section-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 25px; }
.section-title { font-size: 1.5rem; color: #fff; display: flex; align-items: center; gap: 15px; }
.level-badge { padding: 5px 12px; border-radius: 4px; font-weight: bold; color: #fff; font-size: 0.8rem; }
.lvl-8 { background: #d32f2f; }
.lvl-7 { background: #1976d2; }
.lvl-6 { background: #2e7d32; }
.lvl-5 { background: #f57c00; }
.view-all { color: #888; font-size: 0.9rem; }
.slider-container { position: relative; display: flex; align-items: center; width: 100%; }
.slider-track { display: flex; gap: 20px; overflow-x: auto; padding: 10px 5px 20px 5px; scroll-behavior: smooth; width: 100%; }
.slider-track::-webkit-scrollbar { height: 8px; display: block; }
.slider-track::-webkit-scrollbar-track { background: #161b22; border-radius: 4px; }
.slider-track::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; border: 1px solid #0d1117; }
.game-card-wrapper { position: relative; cursor: pointer; height: 100%; transition: transform 0.3s; flex-shrink: 0; }
.game-card-wrapper:hover { transform: translatey(-5px); }
.game-card { width: 260px; min-width: 260px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card-image { height: 140px; position: relative; display: flex; align-items: center; justify-content: center; }
.img-8 { background: linear-gradient(135deg, #590b0b, #8a1c1c); }
.img-7 { background: linear-gradient(135deg, #0b1e45, #163c7a); }
.img-6 { background: linear-gradient(135deg, #0e3612, #1e5e24); }
.img-5 { background: linear-gradient(135deg, #5c2e02, #944e04); }
.card-details { padding: 15px; }
.card-details h3 { margin: 0 0 10px 0; color: #fff; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.85rem; }
.overlay {
    opacity: 0;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    transition: 0.3s;
    backdrop-filter: blur(2px);
}
.game-card-wrapper:hover .overlay { opacity: 1; }
.btn-edit-game {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: #f9826c;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
/* Scroll OklarÄ± */
/* Empty State */
.empty-state-card {
    width: 100%;
    background: rgba(22, 27, 34, 0.5);
    border: 2px dashed #30363d;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: #8b949e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.empty-state-card i { font-size: 2.5rem; color: #30363d; }
/* -------------------------------------------------------------------------- 8. OYUN EKRANI (GAMEPLAY - GÃœNCEL) -------------------------------------------------------------------------- */
body.game-mode { overflow-y: auto !important; background-color: #0d1117; padding-top: 80px; }
.game-stage {
    width: 95%;
    max-width: 1150px;
    margin: 20px auto 50px;
    background: #161b22;
    border: 2px solid #30363d;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.game-stage:fullscreen { max-width: none; margin: 0; border-radius: 0; overflow: hidden !important; }
/* Fullscreen Trigger */
.fs-trigger-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid #58a6ff;
    color: #58a6ff;
    border-radius: 12px;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* Soru ve Grid */
.game-header-area { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 15px; align-items: center; margin: 0 auto; }
.scoreboard { display: flex; gap: 15px; width: 100%; justify-content: center; flex-wrap: wrap; }
.group-card { background: #161b22; padding: 10px 30px; border-radius: 12px; text-align: center; border: 2px solid transparent; opacity: 0.5; transition: 0.3s; min-width: 150px; }
.group-card.active { opacity: 1; border-color: var(--accent); background: linear-gradient(145deg, #21262d, #161b22); box-shadow: var(--shadow-glow); transform: scale(1.1); }
.group-score { font-size: 2.2rem; font-weight: 900; color: #fff; }
.question-area { text-align: center; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); align-self: center; }
.hint-label { background: var(--game-hint); }
.hint-text { color: #fff; }
.word-grid { width: 100%; align-self: center; }
.letter-box {
    border: 3px solid #3c444d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 8px;
    color: white;
    background: transparent;
}
.letter-box.filled { border-color: #8b949e; background: #21262d; }
.letter-box.space { width: 30px; border: none !important; background: transparent !important; }
/* Flip Efekti ve Renkler (GÃ¼ncel) */
@keyframes flipReveal {
    0% {
        transform: rotateX(0deg);
        background-color: transparent;
        border-color: #3c444d;
        } 50% {
        transform: rotateX(90deg);
        background-color: transparent;
        } 100% {
        transform: rotateX(0deg);
        }
    }
.letter-box.flip { animation: flipReveal 0.6s ease-in-out forwards; }
.letter-box.hint-revealed { background-color: #1f6feb !important; border-color: #1f6feb !important; color: white; }
.letter-box.correct { background: #538d4e !important; border-color: #538d4e !important; color: white !important; }
.letter-box.present { background: #b59f3b !important; border-color: #b59f3b !important; color: white !important; }
.letter-box.absent { background: #3a3a3c !important; border-color: #3a3a3c !important; color: #b0b0b0 !important; }
/* Klavye (GÃ¼ncel - SoÄŸuk Gri & Mobil Uyumlu) */
/* Kompakt Kontroller (GÃ¼ncel) */
.compact-controls { display: flex; justify-content: center; gap: 10px; margin: 10px 0 20px 0; width: 100%; }
.ctrl-btn.narrow { display: flex; align-items: center; gap: 6px; min-width: 110px; justify-content: center; }
.btn-hint { background-color: #d29922; color: #fff; }
.btn-hint:hover { background-color: #ac7b15; }
.btn-pass { background-color: #1f6feb; color: #fff; }
.btn-pass:hover { background-color: #1158c7; }
.btn-skip-word { background-color: #da3633; color: #fff; }
.btn-skip-word:hover { background-color: #b92b27; }
/* GeÃ§miÅŸ Tahminler */
.history-wrapper { width: 100%; align-items: center; gap: 5px; }
.history-row { display: flex; gap: 5px; }
.hist-box {
    width: 35px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.hist-box.correct { background-color: #538d4e; border-color: #538d4e; }
.hist-box.present { background-color: #b59f3b; border-color: #b59f3b; }
.hist-box.absent { background-color: #3a3a3c; border-color: #3a3a3c; }
/* Lobi / Grup SeÃ§ici */
.lobby-controls { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); }
/* -------------------------------------------------------------------------- 9. ADMIN DASHBOARD & TABLOLAR -------------------------------------------------------------------------- */
.stat-icon { background: #0d1117; color: #d32f2f; border: 1px solid #30363d; }
.table-container { overflow-x: auto; }
table { color: #e6edf3; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #30363d; white-space: nowrap; }
.badge { padding: 4px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 800; }
.badge.admin { background: rgba(218, 54, 51, 0.2); color: #ff7b72; }
.badge.teacher { background: rgba(31, 111, 235, 0.2); color: #58a6ff; }
.badge.student { background: rgba(35, 134, 54, 0.2); color: #3fb950; }
/* -------------------------------------------------------------------------- 10. YORUMLAR VE SOSYAL (GÃœNCEL: GRÄ° KUTU, Ä°Ã‡ Ä°Ã‡E YANITLAR) -------------------------------------------------------------------------- */
.social-interaction-area { width: 100%; max-width: 1150px; margin: 0 auto; }
.btn-like {
    background: #21262d;
    border: 2px solid #30363d;
    color: #8b949e;
    padding: 12px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: 0.3s;
    margin-bottom: 20px;
}
.btn-like.active { background: rgba(248, 81, 73, 0.1); border-color: #f85149; color: #f85149; }
.btn-like:hover { transform: scale(1.05); }
/* Yorum Kutusu Stili (Gri & Sabit) */
.comment-input-wrapper { background: #161b22; padding: 20px; border-radius: 12px; border: 1px solid #30363d; margin-bottom: 30px; }
.comment-form textarea {
    width: 100%;
    min-height: 120px;
    background-color: #21262d !important;
    color: #e6edf3;
    resize: none !important;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 15px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: 0.3s;
}
.comment-form textarea:focus { outline: none; border-color: #d32f2f; background-color: #262c33; }
.textarea-footer { display: flex; justify-content: flex-end; align-items: center; gap: 15px; margin-top: 10px; }
.char-counter { font-size: 0.85rem; color: #8b949e; }
.btn-submit.small-btn {
    background-color: #d32f2f !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    width: auto !important;
    box-shadow: none !important;
}
.btn-submit.small-btn:hover { background-color: #b71c1c !important; }
/* Yorum Listesi */
.comment-item { background: #161b22; padding: 15px; border-radius: 8px; border: 1px solid #30363d; margin-bottom: 15px; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #21262d; }
.user-info { display: flex; align-items: center; gap: 8px; }
.user-info strong { font-size: 1rem; color: #fff; font-weight: 700; }
.comment-date {
    font-size: 0.75rem;
    color: #8b949e;
    background: #0d1117;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #30363d;
    white-space: nowrap;
    font-family: monospace;
}
.comment-text { font-size: 1rem; color: #c9d1d9; line-height: 1.5; margin: 0; word-wrap: break-word; }
.comment-actions { margin-top: 10px; padding-top: 5px; display: flex; gap: 15px; }
.c-action-btn { font-size: 0.85rem; color: #8b949e; background: none; border: none; cursor: pointer; }
.c-action-btn:hover { color: #fff; }
/* Ä°Ã§ Ä°Ã§e YanÄ±tlar */
.nested-replies { margin-top: 15px; margin-left: 10px; padding-left: 20px; border-left: 2px solid #30363d; animation: slideDown 0.3s ease-out; }
.comment-item.reply {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    border-radius: 0;
    padding: 15px 0 15px 15px;
    margin-bottom: 5px;
    position: relative;
}
.comment-item.reply::before { content: ""; position: absolute; top: 25px; left: -22px; width: 20px; height: 2px; background-color: #30363d; }
.reply-form-container { margin-top: 15px; padding-left: 15px; position: relative; margin-bottom: 20px; }
.reply-form-container::before { content: ""; position: absolute; top: 25px; left: -22px; width: 20px; height: 2px; background-color: #30363d; }
.reply-box-design { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 10px; }
.reply-box-design textarea {
    width: 100%;
    min-height: 60px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #e6edf3;
    padding: 10px;
    font-size: 0.9rem;
    resize: none;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        } to {
        opacity: 1;
        transform: translateY(0);
        }
    }
/* Ã–ÄŸretmen Kodu Kutusu */
.copy-code-box {
    background: rgba(13, 17, 23, 0.8);
    border: 1px dashed #58a6ff;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: copy;
    transition: all 0.2s ease;
}
.copy-code-box:hover { background: rgba(88, 166, 255, 0.1); transform: scale(1.02); border-color: #fff; }
.the-code { font-family: "Courier New", Courier, monospace; font-weight: 900; font-size: 1.1rem; color: #58a6ff; letter-spacing: 1px; }
/* Like UyarÄ±sÄ± */
.like-container { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; margin-top: 10px; }
.login-warning {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translatex(-50%) translatey(10px);
    background-color: #da3633;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 1000;
    pointer-events: none;
}
.login-warning::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #da3633 transparent transparent transparent;
}
.login-warning.show { opacity: 1; visibility: visible; transform: translatex(-50%) translatey(-5px); }
/* -------------------------------------------------------------------------- 11. FOOTER -------------------------------------------------------------------------- */
.site-footer { background-color: #0d1117; border-top: 1px solid #30363d; padding: 60px 0 20px; margin-top: auto; color: #8b949e; font-size: 0.95rem; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; text-align: left; }
.footer-col h4 { color: #fff; font-size: 1.1rem; margin-bottom: 20px; border-left: 3px solid #d32f2f; padding-left: 10px; display: inline-block; line-height: 1; }
.brand-footer { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.brand-footer i { color: #d32f2f; }
.footer-desc { line-height: 1.6; max-width: 350px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #8b949e; transition: 0.3s; display: flex; align-items: center; gap: 10px; }
.footer-col ul li a:hover { color: #58a6ff; padding-left: 5px; }
.contact-list li { display: flex; align-items: center; gap: 10px; color: #ccc; margin-bottom: 10px; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a {
    width: 40px;
    height: 40px;
    background: #21262d;
    border: 1px solid #30363d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    transition: 0.3s;
    font-size: 1.2rem;
}
.footer-socials a:hover { background: #30363d; transform: translatey(-3px); border-color: var(--accent); color: var(--accent); }
.footer-bottom-row { border-top: 1px solid #21262d; padding-top: 20px; text-align: center; }
/* -------------------------------------------------------------------------- 12. ANIMATIONS, LOADER & MODALS -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        } to {
        opacity: 1;
        transform: translateY(0);
        }
    }
@keyframes countPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
        } 50% {
        transform: scale(1.2);
        opacity: 1;
        } 100% {
        transform: scale(1.5);
        opacity: 0;
        }
    }
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
        } to {
        transform: scale(1);
        opacity: 1;
        }
    }
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d1117;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    transition: opacity 0.5s, visibility 0.5s;
}
#startModal {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
/* Geri SayÄ±m EkranÄ± (Kutu Ä°Ã§ine HapsedilmiÅŸ - GÃ¼ncel) */
#countdownOverlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: rgba(13, 17, 23, 0.98);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    overflow: hidden;
}
#countdownNumber {
    font-size: 12rem;
    font-weight: 900;
    font-family: "Segoe UI", sans-serif;
    background: linear-gradient(#fff, #d32f2f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 30px rgba(211, 47, 47, 0.6));
    animation: countPulse 0.8s cubic-bezier(0.1, 0.7, 1, 0.1) infinite;
}
#countdownNumber.go-text {
    font-size: 8rem;
    background: linear-gradient(#fff, #238636);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 30px rgba(35, 134, 54, 0.6));
}
/* Oyun Sonu EkranÄ± (GÃ¼ncel - Liste TasarÄ±mÄ± & Absolute) */
#gameOverModal { border-radius: 22px; }
#gameOverModal h1 { margin-bottom: 25px; }
#finalScores {
    width: 90%;
    max-width: 600px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 30px;
    max-height: 60vh;
    overflow-y: auto;
}
.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #21262d;
    font-size: 1.3rem;
    color: #e6edf3;
    transition: 0.2s;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: rgba(255, 255, 255, 0.03); }
.rank-1 { color: #FFD700 !important; font-weight: 900; font-size: 1.5rem; background: rgba(255, 215, 0, 0.05); }
.rank-2 { color: #C0C0C0 !important; font-weight: 800; font-size: 1.4rem; }
.rank-3 { color: #CD7F32 !important; font-weight: 800; font-size: 1.4rem; }
.rank-other { color: #8b949e; font-weight: 600; font-size: 1.1rem; }
.rank-icon { width: 30px; text-align: center; margin-right: 15px; display: inline-block; }
.score-badge { background: #21262d; padding: 5px 15px; border-radius: 50px; border: 1px solid #30363d; font-size: 1rem; color: #fff; }
/* Kod Modal (Setup) */
.code-modal-content {
    background: #161b22;
    padding: 50px;
    border-radius: 24px;
    border: 1px solid #30363d;
    text-align: center;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    position: relative;
    animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.code-display-box {
    background: #0d1117;
    border: 2px dashed #58a6ff;
    color: #58a6ff;
    font-family: "Courier New", monospace;
    font-size: 3.5rem;
    font-weight: 900;
    padding: 30px;
    margin: 25px 0;
    border-radius: 16px;
    letter-spacing: 8px;
    position: relative;
}
.btn-copy-modal {
    background: #238636;
    color: white;
    border: none;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.btn-copy-modal:hover { background: #2ea043; transform: translatey(-2px); }
.modal-close { position: absolute; top: 20px; right: 25px; font-size: 2rem; color: #8b949e; cursor: pointer; }
.modal-close:hover { color: #fff; }
/* Cinematic Toast (Bildirimler) */
/* Ã–ÄŸretmen Kodu Toast (GÃ¼ncel) */
#toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    background: rgba(22, 27, 34, 0.95) !important;
    border: 2px solid #58a6ff !important;
    padding: 30px 50px !important;
    border-radius: 20px !important;
    color: white !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7), 0 0 50px rgba(0, 0, 0, 0.8) !important;
    z-index: 1000000 !important;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
#toast.show { visibility: visible !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
.toast-answer {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    letter-spacing: 3px;
    margin: 10px 0;
    display: inline-block;
}
/* -------------------------------------------------------------------------- 13. YARDIMCI Ã–ÄELER -------------------------------------------------------------------------- */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translatey(20px);
    transition: all 0.3s ease;
    z-index: 1000000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
#backToTop.show { opacity: 1; visibility: visible; transform: translatey(0); }
#backToTop:hover { background-color: var(--accent-hover); transform: translatey(-5px); box-shadow: 0 8px 20px rgba(211, 47, 47, 0.6); }
/* -------------------------------------------------------------------------- 14. MOBÄ°L UYUMLULUK (RESPONSIVE) -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    body { padding-top: 60px !important; }
    .navbar { height: 60px !important; }
    .nav-container { padding: 0 10px !important; }
    .brand i { font-size: 1.2rem !important; }
    .brand-text { gap: 0 !important; }
    .brand-top { font-size: 0.48rem !important; letter-spacing: 1px !important; }
    .brand-bottom { font-size: 0.75rem !important; }
    .auth-buttons { gap: 6px !important; }
    .btn-login, .btn-register { font-size: 0.75rem !important; padding: 6px 10px !important; }
    .profile-btn span { display: none; }
    .profile-name { display: inline-block; max-width: 100px; font-size: 0.9rem; }
    .profile-btn { padding: 6px 10px; }
    .dropdown-arrow { display: none; }
    .dropdown-menu { right: -10px !important; width: 200px; }
    .hero-section { height: 300px; background-attachment: scroll; }
    .hero-content h1 { font-size: 2rem; }
    .main-wrapper { padding: 10px; width: 100%; }
    .action-panel, .teacher-hero, .student-hero { padding: 40px 20px; width: 100%; margin-left: 0; margin-right: 0; }
    .modern-form { flex-direction: column; }
    .big-btn, .big-input { width: 100%; }
    .scroll-btn { display: none; }
    .slider-track { padding-right: 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-col { align-items: flex-start; }
    .game-stage { padding: 15px 10px; min-height: 85vh; }
    .fs-trigger-btn { top: 10px; right: 10px; width: 40px; height: 40px; }
    .timer-badge { top: 60px; right: 10px; padding: 5px 10px; font-size: 1.2rem; }
    .letter-box { width: 40px; height: 50px; font-size: 1.5rem; }
    /* Mobil Klavye */
    .keyboard { width: 98%; padding: 10px 5px; margin: 10px auto; gap: 6px; box-sizing: border-box; }
    .key-row { gap: 3px; width: 100%; }
    .key { min-width: unset; width: 9%; height: 52px; font-size: 1.1rem; border-radius: 4px; box-shadow: 0 2px 0 #2d333b; }
    .key.wide { width: 14%; font-size: 0.8rem; }
    /* Mobil Kontroller */
    .compact-controls { gap: 5px; }
    .ctrl-btn.narrow { padding: 8px 10px; font-size: 0.75rem; min-width: auto; flex: 1; }
    .ctrl-btn.narrow i { font-size: 0.9rem; }
    #backToTop { width: 40px; height: 40px; bottom: 20px; right: 20px; font-size: 1rem; }
    .toast-answer { font-size: 2rem; }
}
/* 1. OYUN SONU "DÃ–N" BUTONU DÃœZELTME */
#gameOverModal .modal-footer { width: 100%; display: flex; justify-content: center; margin-top: 20px; }
/* 2. OYUN Ä°Ã‡Ä° 3 MODERN BUTON (HÄ°NT, PASS, SKIP) */
.ctrl-btn.narrow {
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3) !important;
}
.ctrl-btn.narrow:active { transform: translatey(4px) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important; }
/* Buton Renkleri Modernizasyon */
.btn-hint { background: linear-gradient(135deg, #d29922, #b0801a) !important; }
/* 3. TOAST MESAJLARINI HIZLANDIRAN CSS */
#cinematicToastOverlay { transition: opacity 0.2s ease, visibility 0.2s ease !important; }
#cinematicToastBox { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
#toastMessage { font-size: 2.2rem !important; text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
/* Mobil iÃ§in buton ayarÄ± */
@media screen and (max-width: 768px) {
    .btn-modern-return { width: 90% !important; padding: 12px 20px; font-size: 1rem; }
}
/* EK MODERN STÄ°LLER */
.ctrl-btn.narrow { position: relative; overflow: hidden; }
#cinematicToastOverlay.show { display: flex; animation: fadeIn 0.2s; }
#cinematicToastBox { color: white; }
/* ============================================================ SÄ°LME ONAY PENCERESÄ° VE AKTÄ°F BUTONLAR ============================================================ */
/* 1. Aktif YanÄ±tla Butonu (KÄ±rmÄ±zÄ± Olur) */
.c-action-btn.active-reply { font-weight: 900; text-shadow: 0 0 10px rgba(211, 47, 47, 0.4); }
/* 2. Ã–zel Silme ModalÄ± (BÃ¼yÃ¼k Pencere) */
#customDeleteModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#customDeleteModal.show { display: flex; opacity: 1; }
.delete-box {
    background: #161b22;
    border: 2px solid #d32f2f;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 0 50px rgba(211, 47, 47, 0.2);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#customDeleteModal.show .delete-box { transform: scale(1); }
.delete-box h2 { color: #fff; font-size: 2rem; margin-bottom: 15px; text-transform: uppercase; }
.delete-box p { color: #8b949e; font-size: 1.1rem; margin-bottom: 30px; }
.delete-actions { display: flex; gap: 15px; justify-content: center; }
.btn-confirm-delete {
    background: #d32f2f;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
}
.btn-confirm-delete:hover { background: #b71c1c; transform: scale(1.05); }
.btn-cancel-delete {
    background: transparent;
    border: 2px solid #8b949e;
    color: #8b949e;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
}
.btn-cancel-delete:hover { border-color: #fff; color: #fff; }
/* ============================================================ YORUM ROZETLERÄ° VE BEÄENÄ° BUTONU DÃœZELTMESÄ° ============================================================ */
/* 1. KULLANICI ROZETLERÄ° (MODERN TASARIM) */
.user-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    vertical-align: middle;
}
/* Ã–ÄŸretmen Rozeti (KÄ±rmÄ±zÄ±msÄ± Åeffaf) */
.user-badge.teacher { background-color: rgba(248, 81, 73, 0.15); color: #ff7b72; border: 1px solid rgba(248, 81, 73, 0.4); box-shadow: 0 0 5px rgba(248, 81, 73, 0.1); }
/* Ã–ÄŸrenci Rozeti (Mavimsi Åeffaf) */
.user-badge.student { background-color: rgba(56, 139, 253, 0.15); color: #58a6ff; border: 1px solid rgba(56, 139, 253, 0.4); }
/* 2. YORUM BEÄENÄ° BUTONU (AKTÄ°FKEN KIRMIZI) */
.c-action-btn { transition: all 0.2s ease; }
/* BeÄŸenilince (Aktif Class'Ä± gelince) */
.c-action-btn.active { color: #d32f2f !important; font-weight: bold; transform: scale(1.1); text-shadow: 0 0 8px rgba(211, 47, 47, 0.3); }
/* YanÄ±tla Butonu Aktifken (Zaten KÄ±rmÄ±zÄ±ydÄ± ama garanti olsun) */
.c-action-btn.active-reply { color: #d32f2f !important; }
/* Silme Butonu Hover Efekti */
.c-delete-btn:hover { color: #d32f2f !important; transform: scale(1.1); }
/* ============================================================ 6. GLOBAL LOADER (GÃœÃ‡LENDÄ°RÄ°LMÄ°Å) ============================================================ */
/* 1. Sayfa YÃ¼klenirken KaydÄ±rmayÄ± Kapat */
body.loading,
body.loading-active { overflow: hidden !important; }
/* 2. Ana KapsayÄ±cÄ± (Siyah Ekran - Her ÅŸeyin Ã¼stÃ¼nde) */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d1117;
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}
/* Sadece sayfa yÃ¼klenirken tÄ±klamayÄ± engelle */
body.loading-active #global-loader { pointer-events: auto; }
/* 3. Ãœstteki KÄ±rmÄ±zÄ± YÃ¼kleme Ã‡izgisi */
.global-loading-line { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: transparent; overflow: hidden; }
.global-loading-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #d32f2f;
    transform-origin: left;
    animation: globalLineAnim 1s infinite ease-in-out;
}
/* 4. Ortadaki Yuvarlak */
.loader-circle { width: 60px; height: 60px; background-color: #d32f2f; border-radius: 50%; animation: pulseLoader 1.2s infinite; box-shadow: 0 0 20px rgba(211, 47, 47, 0.6); }
/* Animasyonlar */
@keyframes globalLineAnim {
    0% {
        transform: scaleX(0);
        transform-origin: left;
        } 50% {
        transform: scaleX(0.5);
        } 100% {
        transform: scaleX(1);
        transform-origin: right;
        }
    }
@keyframes pulseLoader {
    0% {
        transform: scale(0.6);
        opacity: 0.7;
        } 50% {
        transform: scale(1.2);
        opacity: 1;
        } 100% {
        transform: scale(0.6);
        opacity: 0.7;
        }
    }
/* ============================================================ 7. SLIDER BUTONLARI (GÃœNCELLENDÄ°) ============================================================ */
/* Scroll OklarÄ± - Genel YapÄ± */
.scroll-btn {
    position: absolute;
    width: 45px;
    height: 100%;
    top: 0;
    background: rgba(22, 27, 34, 0.8);
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* MasaÃ¼stÃ¼nde Mouse ile Ã¼zerine gelince gÃ¶rÃ¼nÃ¼r olsun */
.slider-container:hover .scroll-btn { opacity: 1; }
/* SOL OK (PREV) - Border Radius DIÅA (Sola) Kavisli */
.prev { left: 0; border-radius: 12px 0 0 12px; }
/* SAÄ OK (NEXT) - Border Radius DIÅA (SaÄŸa) Kavisli */
.next { right: 0; border-radius: 0 12px 12px 0; }
/* BÄ°LGÄ°SAYAR: Mouse Ã¼zerine gelince KIRMIZI */
.scroll-btn:hover { background: #d32f2f !important; color: white; }
/* MOBÄ°L Ä°Ã‡Ä°N Ã–ZEL AYARLAR (GÃœNCELLENDÄ°) */
@media screen and (max-width: 768px) {
    /* Mobilde Slider ButonlarÄ± */
    .scroll-btn {
        display: flex !important;
        opacity: 1 !important;
        width: 35px !important;
        background: rgba(22, 27, 34, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px);
        color: rgba(255, 255, 255, 0.8) !important;
    }
    /* Mobilde BASINCA (Active) KIRMIZI olsun */
    .scroll-btn:active { background: rgba(211, 47, 47, 0.9) !important; color: white !important; border-color: #d32f2f !important; transition: 0.1s; }
}
/* Kontrol ButonlarÄ± (GÃ¼ncellendi) */
.ctrl-btn { padding: 12px 10px; }
/* Ãœzerine gelince hafif parlasÄ±n (Opsiyonel ama ÅŸÄ±k durur) */
.ctrl-btn:hover { filter: brightness(1.1); transform: translatey(-1px); }
/* BasÄ±nca Ã§Ã¶kme efekti */
/* ========================================================================== 14. MOBÄ°L UYUMLULUK (RESPONSIVE) - V22 (FÄ°NAL) (Ä°sim Sola YaslÄ± & ÅÄ±k + Navbar Script HazÄ±rlÄ±ÄŸÄ±) ========================================================================== */
@media screen and (max-width: 768px) {
    /* --- 1. NAVBAR DÃœZENLEMELERÄ° --- */
    /* Ãœstteki ismi gizle */
    .profile-name { display: none !important; }
    /* Ok iÅŸaretini GÃ–STER */
    .dropdown-arrow { display: block !important; font-size: 1.1rem !important; margin-left: 5px !important; color: #8b949e !important; }
    /* MENÃœ Ä°Ã‡Ä°NDEKÄ° Ä°SÄ°M (YENÄ° TASARIM) */
    .mobile-menu-name {
        display: block !important;
        width: 100%;
        text-align: left;
        font-size: 1.1rem;
        font-weight: 900;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        letter-spacing: 0.5px;
    }
    /* --- 2. GENEL SAYFA (SCROLL AÃ‡IK) --- */
    body.game-mode { padding-top: 60px !important; overflow-y: auto !important; background: #0d1117 !important; }
    .game-stage {
        position: relative !important;
        width: 96% !important;
        min-height: 600px !important;
        margin: 10px auto 50px auto !important;
        background: #161b22 !important;
        border: 1px solid #30363d !important;
        border-radius: 12px !important;
        padding: 10px !important;
        display: flex;
        flex-direction: column !important;
    }
    /* --- 3. TAM EKRAN BUTONU --- */
    .fs-trigger-btn {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 35px !important;
        height: 35px !important;
        z-index: 100 !important;
        background: rgba(88, 166, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
/* ============================================================
   ZAMANLAYICI GARANTÄ° Ã‡Ã–ZÃœM (FÄ°NAL)
   ============================================================ */

/* 1. ZamanlayÄ±cÄ±nÄ±n Temel TasarÄ±mÄ± (VarsayÄ±lan olarak GÄ°ZLÄ°) */
.timer-badge {
    position: absolute !important;
    top: 20px !important; 
    right: 150px !important;
    z-index: 10000 !important;

    /* GÃ¶rÃ¼nÃ¼m AyarlarÄ± */
    height: 45px !important;
    min-width: 100px !important;
    padding: 0 15px !important;
    background: rgba(22, 27, 34, 0.95) !important;
    border: 2px solid #d32f2f !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3) !important;

    /* YazÄ± AyarlarÄ± */
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    
    /* Hizalama */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    /* GÄ°ZLEME KOMUTU (JS aÃ§ana kadar gizli kalÄ±r) */
    display: none; 
}

.timer-badge i {
    font-size: 1.2rem !important;
    color: #d32f2f !important;
}

/* 2. JavaScript 'display: flex' verdiÄŸinde CSS bunu ZORLA uygular */
/* Bu kÄ±sÄ±m oyun baÅŸladÄ±ÄŸÄ±nda gÃ¶rÃ¼nmeyi garanti eder */
.timer-badge[style*="display: flex"],
.timer-badge[style*="display: block"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Mobil Uyumluluk */
@media screen and (max-width: 768px) {
    .timer-badge {
        top: 60px !important;
        right: 10px !important;
        height: 38px !important;
        min-width: 85px !important;
        font-size: 1.2rem !important;
    }
}
    /* --- 5. GRUPLAR (SKOR TABLOSU) --- */
    .scoreboard {
        margin-top: 55px !important;
        margin-bottom: 25px !important;
        width: 100% !important;
        padding-right: 80px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .group-card { padding: 5px 8px !important; min-width: 60px !important; font-size: 0.8rem !important; }
    .group-score { font-size: 1.2rem !important; }
    /* --- 6. LOBÄ° --- */
    #lobbyScreen { height: 450px !important; justify-content: center !important; }
    #lobbyScreen h1 { display: block !important; font-size: 1.5rem !important; margin: 20px 0 !important; line-height: 1.2 !important; }
    #lobbyScreen p { display: none !important; }
    .lobby-controls { margin: 0 auto 20px auto !important; width: 100% !important; }
    .btn-create-game { width: 100% !important; padding: 15px !important; }
    /* --- 7. BUTONLAR --- */
    .compact-controls { margin-bottom: 25px !important; gap: 6px !important; display: flex !important; flex-wrap: nowrap !important; }
    .ctrl-btn.narrow {
        padding: 10px 4px !important;
        font-size: 0.6rem !important;
        height: 45px !important;
        flex: 1 !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-skip-word { font-size: 0.55rem !important; letter-spacing: -0.5px !important; padding-left: 2px !important; padding-right: 2px !important; }
    #btnHint { flex-direction: row !important; gap: 4px !important; }
    #btnHint span { font-size: 0.7rem !important; }
    /* --- 8. SORU VE GRID --- */
    .question-area { margin-bottom: 25px !important; padding: 10px !important; }
    .word-grid { margin-bottom: 25px !important; gap: 4px !important; }
    .letter-box { width: 34px !important; height: 44px !important; font-size: 1.4rem !important; }
    /* --- 9. KLAVYE --- */
    .keyboard {
        margin-top: 15px !important;
        padding: 10px 5px !important;
        background: #0d1117 !important;
        border: 2px solid #58a6ff !important;
        border-radius: 12px !important;
        box-shadow: 0 0 15px rgba(88, 166, 255, 0.15) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    .key-row { gap: 4px !important; width: 100% !important; display: flex !important; justify-content: center !important; }
    .key {
        flex: 1 !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        border-radius: 5px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background-color: #21262d !important;
        min-width: 0 !important;
    }
    .key:active { background-color: #58a6ff !important; transform: translatey(2px); }
    .key.wide {
        flex: 1.3 !important;
        max-width: 60px !important;
        font-size: 0.65rem !important;
        font-weight: 900 !important;
        padding: 0 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* --- 10. DÄ°ÄER --- */
    #cinematicToastBox { width: auto !important; min-width: unset !important; max-width: 80% !important; padding: 15px 25px !important; border-radius: 12px !important; }
    #toastMessage { font-size: 1.2rem !important; }
    #toastIcon { font-size: 2rem !important; margin-bottom: 5px !important; }
    #countdownNumber { font-size: 4rem !important; }
    #countdownNumber.go-text { font-size: 3rem !important; }
    .navbar { position: fixed !important; z-index: 999 !important; }
    .dropdown-menu { top: 60px !important; position: absolute !important; }
}
/* ========================================================================== YENÄ° MOBÄ°L MENÃœ Ä°SÄ°M TASARIMI (BÄ°LGÄ°SAYARDA GÄ°ZLÄ°) ========================================================================== */
/* 1. VarsayÄ±lan (Bilgisayar) Durumu: Ä°sim menÃ¼ iÃ§inde GÄ°ZLÄ° */
.mobile-menu-name { display: none; }
/* 2. Mobil Durumu (768px altÄ±) */
@media screen and (max-width: 768px) {
    /* Ãœst barda (Navbar) ismi gizle */
    .profile-name { display: none !important; }
    /* AÃ§Ä±lÄ±r menÃ¼ ok iÅŸaretini gÃ¶ster */
    .dropdown-arrow { display: block !important; color: #8b949e; margin-left: 5px; }
    /* MenÃ¼ iÃ§indeki ismi GÃ–STER ve STÄ°L VER */
    .mobile-menu-name {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 20px 20px 15px 20px;
        margin-bottom: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(to bottom, rgba(22, 27, 34, 1), rgba(13, 17, 23, 0));
    }
    /* Ä°kon Stili */
    .mobile-menu-name i { font-size: 1.8rem; color: #d32f2f; filter: drop-shadow(0 0 8px rgba(211, 47, 47, 0.4)); }
    /* Ä°sim Metni Stili (Daha ÅÄ±k) */
    .mobile-menu-name span {
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: #fff;
        background: linear-gradient(135deg, #fff 0%, #c9d1d9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
}
/* ========================================================================== MOBÄ°L MENÃœ AYARLARI (NAVBAR'A YAPIÅIK & Ä°SÄ°M GÃ–RÃœNÃœR) ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. MENÃœ KUTUSU (YUKARI YAPIÅTIRMA) */
    .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        right: 0 !important;
        left: auto !important;
        width: 280px !important;
        margin-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-top: none !important;
        box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.8) !important;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    /* 2. Ä°SÄ°M ALANI (TAM GÃ–RÃœNÃœM) */
    .mobile-menu-name {
        display: flex !important;
        align-items: center;
        gap: 15px;
        padding: 20px;
        background: linear-gradient(to bottom, #1c2128, #161b22);
        border-bottom: 1px solid #30363d;
    }
    /* Ä°kon */
    .mobile-menu-name i { font-size: 2rem; color: #d32f2f; filter: drop-shadow(0 0 10px rgba(211, 47, 47, 0.5)); flex-shrink: 0; }
    /* Ä°sim Metni (Kesilmeden Alt SatÄ±ra GeÃ§sin) */
    .mobile-menu-name span {
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.4;
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
    }
}
/* ============================================================ SADE HATA BÄ°LDÄ°RÄ°MÄ° (SÃ–ZLÃœKTE YOK UYARISI Ä°Ã‡Ä°N) ============================================================ */
/* GÃ¶rÃ¼nÃ¼r OlduÄŸunda */
#simpleToast.show { top: 100px; }
/* ============================================================ SADE HATA MESAJI - MOBÄ°L AYARI ============================================================ */
@media screen and (max-width: 768px) {
    #simpleToast {
        font-size: 0.8rem !important;
        padding: 8px 20px !important;
        top: 70px !important;
        border-radius: 30px !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
        white-space: nowrap;
    }
}
/* ============================================================ OYUN SONU EKRANI VE KIRMIZI BUTON DÃœZELTMESÄ° ============================================================ */
/* 1. KIRMIZI ANA SAYFA BUTONU */
.btn-modern-return {
    background: linear-gradient(135deg, #d32f2f, #b71c1c) !important;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: auto !important;
    min-width: 200px;
    padding: 15px 40px !important;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    box-shadow: 0 10px 30px rgba(211, 47, 47, 0.4);
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-modern-return:hover { transform: scale(1.05); background: #c62828 !important; box-shadow: 0 15px 40px rgba(211, 47, 47, 0.6); }
/* 2. MODAL HÄ°ZALAMA (YazÄ± KaymasÄ±nÄ± Ã–nler) */
#gameOverModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    backdrop-filter: blur(15px);
    z-index: 10002;
    padding: 20px;
}
/* BaÅŸlÄ±k AyarÄ± (Oyun Bitti) */
#gameOverModal h1 {
    font-size: 3.5rem;
    color: #fff;
    margin: 0 0 20px 0 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
/* MOBÄ°L Ä°Ã‡Ä°N Ã–ZEL AYARLAR */
@media screen and (max-width: 768px) {
    /* Butonu biraz kÃ¼Ã§Ã¼lt */
    .btn-modern-return { font-size: 1rem !important; padding: 12px 30px !important; min-width: 160px; }
    /* BaÅŸlÄ±ÄŸÄ± sÄ±ÄŸdÄ±r */
    #gameOverModal h1 { font-size: 2.5rem !important; margin-bottom: 15px !important; }
    /* Skor listesi Ã§ok uzunsa taÅŸmasÄ±n */
    #finalScores { max-height: 50vh !important; width: 100% !important; }
}
/* ============================================================ MODAL VE NAVBAR Ã‡AKIÅMA DÃœZELTMESÄ° (3-2-1 ve Oyun Bitti EkranlarÄ±nÄ± Oyun Kutusuna Hapsetme) ============================================================ */
/* 1. Navbar Her Zaman En Ãœstte Olsun */
.navbar { z-index: 999999999 !important; }
/* 2. Oyun Kutusunun SÄ±nÄ±rlarÄ±nÄ± Belirle */
.game-stage { position: relative !important; z-index: 1 !important; }
/* 3. ModallarÄ± Sadece Oyun Kutusunun Ä°Ã§ine Hapset */
#countdownOverlay, #gameOverModal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important;
    border-radius: 0 !important;
}
/* 4. Oyun Bitti ModalÄ± Ä°Ã§in Ã–zel Hizalama (Tekrar) */
#gameOverModal { display: none; flex-direction: column !important; justify-content: center !important; align-items: center !important; background: rgba(13, 17, 23, 0.98); }
/* Mobil iÃ§in ekstra gÃ¼venlik */
@media screen and (max-width: 768px) {
    .navbar { position: fixed !important; }
}
/* ============================================================ DÃœZELTÄ°LMÄ°Å FORMLAR VE Ä°KON (MAT GÃ–RÃœNÃœM) ============================================================ */
/* 1. KutucuklarÄ± GRÄ° Yap (Kahverengi Yok) */
.input-wrapper input, .form-control, .setup-container input, .setup-container select, .card-content {
    background-color: #21262d !important;
    border: 1px solid #30363d !important;
    color: #e6edf3 !important;
    box-shadow: none !important;
}
/* 2. Etiketleri (Label) Geri Getir ve Rengini Ayarla */
.form-group label { display: block !important; margin-bottom: 8px; }
/* 3. GiriÅŸ Ä°konunu BÃœYÃœT ama PARLAMASINI AL (SadeleÅŸti) */
.auth-header i { margin-bottom: 20px !important; text-shadow: none !important; box-shadow: none !important; }
/* 4. Ã–ÄŸrenci/Ã–ÄŸretmen SeÃ§imi (Eski DÃ¼zen + Gri Renk) */
.card-content { background-color: #21262d !important; border: 1px solid #30363d !important; color: #8b949e !important; }
/* SeÃ§ilince */
.radio-card input:checked + .card-content { background-color: rgba(211, 47, 47, 0.1) !important; border-color: #d32f2f !important; color: #fff !important; }
/* ============================================================ PLACEHOLDER VE KUTU RENGÄ° AYARLARI ============================================================ */
/* 1. KutularÄ± GRÄ° Yap (Kahverengi Yok) */
.input-wrapper input, .form-control, .card-content { background-color: #21262d !important; border: 1px solid #30363d !important; color: #fff !important; padding-left: 45px; }
/* 2. Placeholder (Kutu Ä°Ã§indeki YazÄ±) Rengi */
::placeholder { color: #8b949e !important; opacity: 1; }
/* 3. Ä°kon Rengi */
.input-wrapper i { color: #8b949e !important; z-index: 10; }
/* 4. GiriÅŸ Ä°konu (Mat KÄ±rmÄ±zÄ±) */
.auth-header i { font-size: 5rem !important; color: #fff !important; filter: none !important; }
/* ============================================================ HESAP TÃœRÃœ Ä°KON DÃœZENÄ° ============================================================ */
/* Ä°kon Boyutu */
.card-content i { font-size: 1.3rem !important; }
/* GÃœNEÅ EFEKTÄ° (GARANTÄ°) */
.auth-body {
    background-color: #0d1117 !important;
    background-image: radial-gradient(circle at 0% 0%, rgba(211, 47, 47, 0.15) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(180, 40, 40, 0.1) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1;
}
/* Ä°Ã§eriÄŸi Ã¶ne Ã§Ä±kar */
.auth-wrapper, .navbar, .site-footer { position: relative; z-index: 10; }
/* Ä°Ã§eriÄŸi Ã¶ne Ã§Ä±karmak iÃ§in */
.auth-wrapper { position: relative; z-index: 1; }
/* ============================================================ REGISTER - SEÃ‡Ä°M BUTONLARI (TAM ORTALAMA & MOBÄ°L UYUMLU) ============================================================ */
/* 1. KapsayÄ±cÄ± Alan (Yan Yana Dizme) */
.radio-group-modern { display: flex !important; flex-direction: row !important; gap: 15px !important; width: 100% !important; }
/* 2. KartlarÄ±n Kendisi (EÅŸit GeniÅŸlik) */
.radio-card { flex: 1 !important; position: relative !important; margin: 0 !important; cursor: pointer; }
/* 3. Butonun GÃ¶rÃ¼nÃ¼mÃ¼ (Ä°Ã§erik Ortalama) */
.card-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 15px 10px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
/* 4. MOBÄ°L UYUMLULUK (KÃ¼Ã§Ã¼k Ekranlar Ä°Ã§in Ayar) */
@media screen and (max-width: 480px) {
    .radio-group-modern { gap: 10px !important; }
    .card-content { padding: 12px 5px !important; font-size: 0.9rem !important; }
    .card-content i { font-size: 1.1rem !important; }
}
/* ============================================================ SAÄ ÃœST KONTROLLER (SES & TAM EKRAN) ============================================================ */
/* 1. ButonlarÄ± Kapsayan Grup (Hizalama Ä°Ã§in) */
/* 2. ButonlarÄ±n Ortak Stili */
/* Aktif (Sessiz) Durumu Ä°Ã§in KÄ±rmÄ±zÄ± Renk */
/* 3. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 768px) {
    .top-controls { top: 10px; right: 10px; gap: 8px; }
    .control-icon-btn { width: 38px; height: 38px; font-size: 1rem; border-radius: 8px; }
    /* Timer badge butonlarÄ±n Ã¼stÃ¼ne binmesin diye biraz aÅŸaÄŸÄ±/sola alalÄ±m */
    .timer-badge { top: 60px !important; }
}
/* --- SÃ–ZLÃœKTE YOK UYARISI (FIX) --- */
/* ========================================================================== ADMIN PANEL CSS (EKLEMELER) ========================================================================== */
/* 1. Container ve BaÅŸlÄ±klar */
.admin-container { min-height: 85vh; }
.admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #30363d; }
.page-title { color: #fff; font-size: 2rem; font-weight: 900; margin: 0; letter-spacing: 1px; display: flex; align-items: center; gap: 15px; }
.page-title i { color: #d32f2f; }
.server-status {
    background: rgba(63, 185, 80, 0.1);
    color: #3fb950;
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid rgba(63, 185, 80, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.server-status i { font-size: 0.6rem; animation: pulseGreen 1.5s infinite; }
@keyframes pulseGreen {
    0% {
        opacity: 1;
        } 50% {
        opacity: 0.5;
        } 100% {
        opacity: 1;
        }
    }
/* 2. Ä°statistik KartlarÄ± */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 40px; }
.stat-card { position: relative; overflow: hidden; }
.stat-card:hover { transform: translatey(-5px); border-color: #58a6ff; }
.stat-icon { flex-shrink: 0; }
.icon-game { background: rgba(88, 166, 255, 0.1); color: #58a6ff; }
.icon-user { background: rgba(210, 153, 34, 0.1); color: #d29922; }
.icon-comment { background: rgba(219, 97, 162, 0.1); color: #db61a2; }
.icon-like { background: rgba(248, 81, 73, 0.1); color: #f85149; }
.stat-info h3 { margin: 0; font-size: 2rem; color: #fff; font-weight: 900; }
.stat-info p { margin: 5px 0 0; color: #8b949e; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; }
/* 3. Sekmeler */
.tabs-header { display: flex; gap: 10px; margin-bottom: 30px; background: #0d1117; padding: 5px; border-radius: 12px; border: 1px solid #30363d; width: fit-content; }
.tab-btn {
    background: transparent;
    border: none;
    color: #8b949e;
    padding: 12px 25px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}
.tab-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.tab-btn.active { background: #238636; color: white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.section-view { display: none; animation: fadeIn 0.3s ease; }
.section-view.active { display: block; }
/* 4. GeliÅŸmiÅŸ Tablo */
.table-container { background: #161b22; border: 1px solid #30363d; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
table { width: 100%; border-collapse: collapse; }
th {
    background: #21262d;
    color: #8b949e;
    font-weight: 700;
    padding: 18px 20px;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #30363d;
}
td { padding: 15px 20px; border-bottom: 1px solid #30363d; color: #e6edf3; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 255, 255, 0.02); }
.id-badge { background: #0d1117; padding: 4px 8px; border-radius: 6px; font-family: monospace; color: #8b949e; border: 1px solid #30363d; }
.user-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; }
.level-tag { background: rgba(56, 139, 253, 0.1); color: #58a6ff; padding: 5px 10px; border-radius: 50px; font-size: 0.8rem; font-weight: bold; }
.status-active { color: #3fb950; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.status-active::before { content: ""; width: 8px; height: 8px; background: #3fb950; border-radius: 50%; display: inline-block; }
.status-passive { color: #8b949e; font-weight: bold; }
.td-title { font-weight: bold; color: #fff; font-size: 1.05rem; }
/* 5. Butonlar */
.action-buttons { display: flex; gap: 8px; }
.btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 1rem;
}
.btn-icon:hover { transform: scale(1.1); }
.btn-blue { background: rgba(88, 166, 255, 0.1); color: #58a6ff; border: 1px solid rgba(88, 166, 255, 0.3); }
.btn-yellow { background: rgba(210, 153, 34, 0.1); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.3); }
.btn-red { background: rgba(248, 81, 73, 0.1); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.3); }
.toolbar { margin-bottom: 20px; display: flex; justify-content: flex-end; }
.btn-create-new {
    background: #238636;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
}
.btn-create-new:hover { background: #2ea043; transform: translatey(-2px); box-shadow: 0 5px 15px rgba(35, 134, 54, 0.4); }
/* 6. GeliÅŸmiÅŸ Modallar */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.modal.show { opacity: 1; }
.modal-content {
    background-color: #161b22;
    margin: auto;
    border: 1px solid #30363d;
    width: 90%;
    max-width: 800px;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9);
    transform: scale(0.9);
    transition: transform 0.3s;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.modal.show .modal-content { transform: scale(1); }
.sm-modal { max-width: 500px; }
.modal-header { padding: 25px 30px; border-bottom: 1px solid #30363d; background: #0d1117; }
.modal-header h2 { margin: 0; font-size: 1.5rem; color: #fff; display: flex; align-items: center; gap: 15px; }
.close { position: absolute; top: 25px; right: 30px; color: #8b949e; font-size: 28px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.close:hover { color: #fff; }
.modal-body { padding: 30px; }
.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-row.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 0.9rem; font-weight: 700; color: #8b949e; }
.admin-input, .admin-select { background: #0d1117; border: 1px solid #30363d; padding: 12px 15px; border-radius: 8px; color: #fff; font-size: 1rem; width: 100%; transition: 0.2s; }
.admin-input:focus, .admin-select:focus { border-color: #58a6ff; outline: none; }
.admin-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}
.words-section { background: #0d1117; padding: 20px; border-radius: 12px; border: 1px solid #30363d; }
.word-row-edit { display: grid; grid-template-columns: 1fr 1.5fr 40px; gap: 10px; margin-bottom: 10px; animation: fadeIn 0.3s; }
.btn-mini-del { background: rgba(248, 81, 73, 0.1); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.3); border-radius: 6px; cursor: pointer; }
.btn-add-row-small {
    background: #238636;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}
.modal-footer { padding: 20px 30px; border-top: 1px solid #30363d; background: #0d1117; display: flex; justify-content: flex-end; }
.btn-save { background: #1f6feb; color: white; border: none; padding: 12px 30px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1rem; transition: 0.2s; }
.btn-save:hover { background: #388bfd; }
.btn-save.full-width { width: 100%; }
/* 7. SQL Terminal */
.sql-box-container { background: #0d1117; padding: 30px; border-radius: 16px; border: 1px solid #30363d; }
.sql-terminal { font-size: 1rem; resize: vertical; }
.btn-run-sql { display: flex; align-items: center; gap: 10px; }
/* 8. Mesaj KutularÄ± */
.msg-box { padding: 15px 20px; border-radius: 12px; margin-bottom: 25px; display: flex; align-items: center; gap: 15px; font-weight: 600; font-size: 1rem; }
.msg-box.success { background: rgba(35, 134, 54, 0.1); color: #3fb950; border: 1px solid rgba(35, 134, 54, 0.3); }
.msg-box.error { background: rgba(248, 81, 73, 0.1); color: #ff7b72; border: 1px solid rgba(248, 81, 73, 0.3); }
/* Mobilde Responsive Ayarlar */
@media screen and (max-width: 768px) {
    .form-row, .form-row.three-col { flex-direction: column; display: flex; }
    .stat-card { padding: 15px; }
    .tabs-header { width: 100%; overflow-x: auto; }
    .word-row-edit { grid-template-columns: 1fr; gap: 5px; border-bottom: 1px solid #333; padding-bottom: 10px; }
    .btn-mini-del { width: 100%; padding: 5px; }
}
/* --- ADMIN PANEL EKSTRALAR (ULTRA GOD MODE) --- */
/* Tehlikeli BÃ¶lge (ID DeÄŸiÅŸtirme) */
/* EtkileÅŸim Grid (Yorumlar ve BeÄŸeniler Yan Yana) */
/* SQL Terminal */
@media screen and (max-width: 768px) {
    .interaction-grid { grid-template-columns: 1fr; }
}
/* --- ADMIN PANEL EKSTRALAR (ULTRA GOD MODE) --- */
/* Tehlikeli BÃ¶lge (ID DeÄŸiÅŸtirme) */
.danger-zone { background: rgba(248, 81, 73, 0.05); border: 1px solid rgba(248, 81, 73, 0.4); padding: 20px; border-radius: 12px; margin-bottom: 25px; }
.danger-zone h4 { color: #f85149; margin-top: 0; display: flex; align-items: center; gap: 10px; }
.btn-danger-action { background: #f85149; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; }
.btn-danger-action:hover { background: #b62324; }
/* EtkileÅŸim Grid (Yorumlar ve BeÄŸeniler Yan Yana) */
.interaction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.interaction-col { background: #0d1117; padding: 15px; border-radius: 12px; border: 1px solid #30363d; }
.interaction-col h4 { margin-top: 0; border-bottom: 1px solid #30363d; padding-bottom: 10px; color: #8b949e; }
.detail-list { max-height: 250px; overflow-y: auto; }
.detail-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #21262d; font-size: 0.9rem; }
.detail-item:last-child { border-bottom: none; }
.detail-item:hover { background: rgba(255, 255, 255, 0.03); }
/* SQL Terminal */
.sql-terminal { width: 100%; height: 200px; background: #000; color: #0f0; border: 1px solid #333; padding: 15px; font-family: "Courier New", monospace; border-radius: 8px; }
.btn-run-sql { background: #d29922; color: #fff; border: none; padding: 10px 25px; font-weight: bold; margin-top: 10px; cursor: pointer; border-radius: 6px; }
@media screen and (max-width: 768px) {
    .interaction-grid { grid-template-columns: 1fr; }
}
/* ============================================================ ADMIN GOD MODE ENHANCED UI ============================================================ */
.admin-body { background: #0b0e14; }
.admin-container { max-width: 1400px; margin: 40px auto; padding: 20px; }
/* Header Glow */
.admin-header-glow {
    background: linear-gradient(135deg, #161b22 0%, #0d1117 100%);
    border: 1px solid #30363d;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.header-info h1 { color: #fff; font-size: 2.2rem; margin: 0; display: flex; align-items: center; gap: 15px; }
.header-info h1 i { color: #f85149; filter: drop-shadow(0 0 10px rgba(248, 81, 73, 0.5)); }
.live-status { display: flex; align-items: center; gap: 10px; color: #3fb950; font-weight: 800; font-size: 0.8rem; }
/* Stats Card */
.stat-card { background: #161b22; border: 1px solid #30363d; border-radius: 16px; padding: 25px; display: flex; align-items: center; gap: 20px; transition: 0.3s; }
.stat-card.highlight { border-color: #f85149; background: rgba(248, 81, 73, 0.05); }
.stat-icon { width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.icon-blue { background: rgba(88, 166, 255, 0.1); color: #58a6ff; }
.icon-red { background: rgba(248, 81, 73, 0.1); color: #f85149; }
.stat-data h3 { margin: 0; font-size: 2rem; color: #fff; line-height: 1; }
.stat-data p { margin: 5px 0 0; color: #8b949e; font-size: 0.75rem; font-weight: 800; }
/* Tabs */
.admin-tabs { display: flex; gap: 10px; margin-bottom: 25px; }
.tab-link { background: #161b22; border: 1px solid #30363d; color: #8b949e; padding: 12px 25px; border-radius: 12px; cursor: pointer; font-weight: 700; transition: 0.3s; }
.tab-link.active { background: #238636; color: #fff; border-color: #2ea043; box-shadow: 0 5px 15px rgba(35, 134, 54, 0.3); }
/* Modals */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}
.admin-modal.show { display: flex; animation: fadeIn 0.3s ease; }
.modal-content-large { background: #161b22; width: 95%; max-width: 1100px; border-radius: 20px; border: 1px solid #30363d; max-height: 90vh; overflow-y: auto; padding: 30px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 20px; }
.grid-section { background: #0d1117; padding: 20px; border-radius: 15px; border: 1px solid #30363d; }
.full-width { grid-column: 1/-1; }
.danger { border-color: #f85149; background: rgba(248, 81, 73, 0.02); }
/* Comment Edit UI */
.comment-edit-row { background: #161b22; padding: 15px; border-radius: 10px; border: 1px solid #30363d; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.comment-edit-row textarea { width: 100%; background: #0d1117; border: 1px solid #30363d; color: #fff; padding: 10px; border-radius: 6px; resize: vertical; min-height: 60px; }
.c-btns { display: flex; gap: 10px; justify-content: flex-end; }
.btn-save-mini { background: #238636; color: #fff; border: none; padding: 5px 12px; border-radius: 4px; cursor: pointer; }
/* Words Editor */
.word-edit-item { display: flex; gap: 10px; margin-bottom: 10px; }
.word-edit-item input { background: #0d1117; border: 1px solid #30363d; color: #fff; padding: 8px; border-radius: 6px; flex: 1; }
.remove-word { background: #f85149; color: #fff; border: none; width: 35px; border-radius: 6px; cursor: pointer; }
.btn-god-save {
    width: 100%;
    padding: 15px;
    background: #1f6feb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
}
.btn-god-save:hover { background: #388bfd; transform: translatey(-3px); }
/* Table Enhancements */
.id-pill { background: #0d1117; padding: 3px 8px; border-radius: 6px; font-family: monospace; border: 1px solid #30363d; }
.mini-stat { font-size: 0.8rem; margin-right: 10px; color: #8b949e; }
.mini-stat i { color: #f85149; }
@media (max-width: 768px) {
    .modal-grid { grid-template-columns: 1fr; }
    .admin-tabs { overflow-x: auto; white-space: nowrap; }
}
/* ============================================================ MOBÄ°L Ä°PUCU AYARLARI (DAHA KÃœÃ‡ÃœK VE KOMPAKT) ============================================================ */
@media screen and (max-width: 768px) {
    /* 1. Ä°pucu Kutusu (DÄ±ÅŸ Ã‡erÃ§eve) */
    .question-area { padding: 12px 15px !important; margin-bottom: 15px !important; border-radius: 10px !important; min-height: 60px !important; }
    /* 2. Ä°pucu Metni (AsÄ±l Soru) */
    .hint-text { font-size: 1.1rem !important; line-height: 1.3 !important; font-weight: 700 !important; }
    /* 3. "Ä°PUCU" Etiketi (Sol Ã¼stteki kÃ¼Ã§Ã¼k kutu) */
    .hint-label { font-size: 0.6rem !important; padding: 2px 8px !important; top: -8px !important; left: 15px !important; }
}
/* --- KUTU VE Ä°PUCU DÃœZENÄ° --- */
.letter-box { position: relative !important; overflow: visible !important; transform-origin: center center; }
/* Ä°PUCU: Kutunun tam altÄ±na, ortalÄ± ve mavi */
.letter-box.show-hint::after {
    content: attr(data-hint);
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
/* POP ANÄ°MASYONU: Sadece kutuyu bÃ¼yÃ¼tÃ¼r, etrafÄ± itmez */
@keyframes singlePop {
    0% {
        transform: scale(1);
        } 50% {
        transform: scale(1.2);
        border-color: #fff;
        background: #21262d;
        } 100% {
        transform: scale(1);
        }
    }
/* Bu sÄ±nÄ±f sadece son harfe verilecek */
.letter-box.pop { animation: singlePop 0.15s ease-out forwards; z-index: 10; }
/* ============================================================ AKILLI TAHTA & BÃœYÃœK EKRAN DÃœZELTMESÄ° (SAFE AREA) ============================================================ */
/* 1. Tam Ekran Modunda Kenar BoÅŸluklarÄ± */
.game-stage:fullscreen {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
}
/* 2. SaÄŸ Ãœstteki ButonlarÄ± (Ses/Tam Ekran) Kenardan UzaklaÅŸtÄ±r */
.game-stage:fullscreen .top-controls { top: 30px !important; right: 30px !important; }
/* 3. SÃ¼re Rozetini Butonlara GÃ¶re Hizala */
.game-stage:fullscreen #timerBadge { top: 90px !important; right: 30px !important; }
/* 4. Skor Tablosunu (GruplarÄ±) Biraz AÅŸaÄŸÄ± Ä°ndir */
.game-stage:fullscreen .scoreboard { margin-top: 20px !important; width: 90% !important; justify-content: center !important; }
/* 5. Oyun AlanÄ±nÄ± (Soru ve Harfler) GeniÅŸ Ekranda Toparla */
.game-stage:fullscreen #gameArea { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; }
/* KELÄ°ME SATIRI DÃœZENÄ° */
.word-item {
    display: grid;
    grid-template-columns: 30px 80px 1fr 1.5fr 40px;
    gap: 15px;
    align-items: center;
    background: #0d1117;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #30363d;
    margin-bottom: 12px;
    animation: fadeIn 0.3s ease;
}
/* RESÄ°M YÃœKLEME ALANI */
/* YÃ¼klenmiÅŸ Resim Ã–nizleme */
/* Resim Ãœzerindeki Hover AksiyonlarÄ± */
.img-actions-overlay { flex-direction: row; }
/* YARDIM (?) TOOLTIP */
/* EDITOR MODAL (CANVAS) */
.editor-modal { flex-direction: column; }
.canvas-wrapper { max-width: 100%; }
canvas { cursor: crosshair; }
/* Mobil Uyum */
@media (max-width: 768px) {
    .word-item { grid-template-columns: 1fr 1fr; grid-template-areas: "num img" "word word" "hint hint" "del del"; gap: 10px; }
    .word-item > div:first-child { grid-area: num; }
    .img-wrapper-cell { grid-area: img; justify-self: end; }
    input[name="words[]"] { grid-area: word; }
    input[name="hints[]"] { grid-area: hint; }
    .btn-delete-row { grid-area: del; width: 100%; }
}
/* --- FOTOÄRAFLI Ä°PUCU STÄ°LÄ° --- */
.hint-image-wrapper { margin-bottom: 15px; display: none; justify-content: center; animation: fadeIn 0.5s; }
/* --- OYUN KONTROL BUTONLARI (3'LÃœ GRUP) --- */
.game-controls-area { margin: 15px 0 25px 0; }
.ctrl-btn { transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); background: #21262d; position: relative; overflow: hidden; }
/* BUTON TÄ°PLERÄ° (AKTÄ°F RENKLER) */
.ctrl-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: #30363d; }
/* Harf Butonu */
.btn-hint:hover, .btn-hint:active { background: rgba(210, 153, 34, 0.15); border-color: #d29922; color: #d29922; }
/* Pas Butonu */
.btn-pass:hover, .btn-pass:active { background: rgba(31, 111, 235, 0.15); border-color: #58a6ff; color: #58a6ff; }
/* Atla Butonu */
.btn-skip-word:hover, .btn-skip-word:active { background: rgba(218, 54, 51, 0.15); border-color: #f85149; color: #f85149; }
/* MOBÄ°L UYUM */
@media screen and (max-width: 768px) {
    .hint-image { max-height: 180px; }
    .ctrl-btn { font-size: 0.75rem; padding: 0 5px; height: 45px; }
    .ctrl-btn i { font-size: 0.9rem; }
}
/* ============================================================ YENÄ° RESÄ°M Ã–ZELLÄ°KLERÄ° (ADD GAME & PLAY GAME) ============================================================ */
/* --- PLAY GAME: Ä°PUCU RESMÄ° --- */
/* --- ADD GAME: RESÄ°M YÃœKLEME KUTUSU (ARTI Ä°ÅARETLÄ°) --- */
/* Resim YÃ¼klÃ¼yken Hover Efekti */
/* YardÄ±m Ä°konu (?) */
.help-tip { border: 1px solid #30363d; }
.help-tip:hover { border-color: #58a6ff; }
/* --- ADD GAME: EDÄ°TÃ–R MODALI --- */
.canvas-wrapper { height: 60vh; }
/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .word-item { grid-template-columns: 1fr 1fr; grid-template-areas: "num img" "word word" "hint hint" "del del"; gap: 10px; }
    .word-item > div:first-child { grid-area: num; justify-self: start; }
    .img-wrapper-cell { grid-area: img; justify-self: end; }
    input[name="words[]"] { grid-area: word; }
    input[name="hints[]"] { grid-area: hint; }
    .btn-delete-row { grid-area: del; width: 100%; margin-top: 5px; }
    .hint-image { max-height: 180px; }
}
/* ========================================================================== RESÄ°M YÃ–NETÄ°MÄ° - ADD GAME & PLAY GAME ========================================================================== */
/* --- PLAY GAME: Ä°PUCU RESMÄ° --- */
/* --- ADD GAME: RESÄ°M YÃœKLEME KUTUSU --- */
.img-wrapper-cell { width: 80px; display: flex; align-items: center; justify-content: center; position: relative; }
.img-upload-box {
    width: 70px;
    height: 70px;
    background: #161b22;
    border: 2px dashed #30363d;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.img-upload-box:hover { border-color: #58a6ff; background: rgba(88, 166, 255, 0.05); }
.img-placeholder { color: #8b949e; font-size: 1.5rem; transition: 0.3s; pointer-events: none; }
.img-upload-box:hover .img-placeholder { color: #58a6ff; transform: scale(1.1); }
.preview-img { width: 100%; height: 100%; object-fit: cover; display: none; border-radius: 8px; }
/* Resim Hover AksiyonlarÄ± */
.img-actions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    backdrop-filter: blur(2px);
}
.img-upload-box.has-image:hover .img-actions-overlay { display: flex; }
.action-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s;
    cursor: pointer;
}
.action-icon:hover { background: #58a6ff; border-color: #58a6ff; transform: scale(1.1); }
/* YardÄ±m Ä°konu */
.help-tip {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #8b949e;
    color: #0d1117;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    z-index: 5;
}
.help-tip:hover { background: #58a6ff; color: white; }
.help-tip::after {
    content: "Bu gÃ¶rsel soru ekranÄ±nda gÃ¶rÃ¼necektir.";
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translatex(-50%);
    background: #21262d;
    color: #c9d1d9;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: 0.2s;
    border: 1px solid #30363d;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10;
}
.help-tip:hover::after { visibility: visible; opacity: 1; bottom: 150%; }
/* --- EDÄ°TÃ–R MODAL --- */
.editor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    align-items: center;
    justify-content: center;
}
.editor-content {
    background: #161b22;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #30363d;
    width: 95%;
    max-width: 900px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}
.editor-toolbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; background: #0d1117; padding: 10px; border-radius: 10px; border: 1px solid #30363d; }
.tool-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    transition: 0.2s;
}
.tool-btn:hover, .tool-btn.active { background: #58a6ff; color: white; border-color: #58a6ff; }
.canvas-wrapper {
    background: #0d1117;
    border: 2px dashed #30363d;
    min-height: 400px;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    position: relative;
}
canvas { max-width: 100%; max-height: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
/* MOBÄ°L UYUMLULUK */
@media (max-width: 768px) {
    .hint-image { max-height: 180px; }
    .word-item { grid-template-columns: 30px 70px 1fr; grid-template-areas: "num img img" "word word word" "hint hint hint" "del del del"; gap: 10px; }
    .word-item > div:first-child { grid-area: num; }
    .img-wrapper-cell { grid-area: img; justify-self: end; }
    input[name="words[]"] { grid-area: word; }
    input[name="hints[]"] { grid-area: hint; }
    .btn-delete-row { grid-area: del; width: 100%; }
}
/* GÃ–RSEL DÃœZENLEMELERÄ° (YENÄ°LENMÄ°Å) */
.hint-image { display: block; max-width: 100%; margin: 10px auto; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); background-color: #0d1117; }
/* Mobil uyumluluk - BURASI Ã‡OK Ã–NEMLÄ° */
@media screen and (max-width: 768px) {
    .hint-image { max-height: 120px !important; }
    .question-area { padding: 15px 10px !important; }
}
/* ========================================================================== TAM EKRAN OYUN DÃœZENÄ° - FÄ°NAL TOPLU VERSÄ°YON (TekrarsÄ±z, Eksiksiz, Optimize EdilmiÅŸ) ========================================================================== */
/* 1. OYUN KUTUSU - TEMEL YAPI */
.game-stage { min-height: 500px !important; }
/* 2. ÃœST ALAN (SKORLAR & KONTROL BUTONLARI) */
.scoreboard { margin-top: 5px !important; }
.game-controls-area { min-height: 50px; }
/* 3. ORTA ALAN (SORU & RESÄ°M) - ESNEK */
.question-area { z-index: 5 !important; }
/* Normal Modda Ä°pucu AlanÄ± */
.game-stage:not(:fullscreen) .question-area { flex-shrink: 0 !important; }
/* Mavi Ä°pucu Etiketi */
/* Ä°pucu Resmi */
.game-stage:not(:fullscreen) .hint-image { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
/* Ä°pucu Metni */
/* 4. OYUN ALANI KAPSAYICI */
/* 5. GEÃ‡MIÅ DENEMELER (SADECE SON SATIR) */
/* 6. HARF KUTULARI */
.word-grid { margin-top: 10px !important; margin-bottom: 40px !important; z-index: 10 !important; }
/* Ä°pucu Harfi (Kutu AltÄ±nda) */
.letter-box.show-hint::after { top: 110% !important; font-size: 1.2rem !important; color: #58a6ff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
/* 7. KLAVYE - NORMAL VE TAM EKRAN AYRI BOYUTLAR */
/* Normal Mod Klavye */
/* Tam Ekran Mod Klavye */
/* Klavye TuÅŸ Stilleri */
/* 8. KONTROL BUTONLARI */
.ctrl-btn { opacity: 1 !important; visibility: visible !important; }
/* Harf Al Butonu (Ampul Solda) */
/* DiÄŸer Butonlar */
.btn-pass { border-color: #1f6feb !important; }
.btn-skip-word { border-color: #da3633 !important; }
/* 9. LOBÄ° EKRANI */
#gcDisplay { min-width: 60px !important; }
/* 10. MESAJLAR (TOAST) - FIXED, ORTALANMIÅ, BULANIK */
#cinematicToastOverlay { background: rgba(0, 0, 0, 0.7) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
#cinematicToastBox {
    position: relative !important;
    background: #161b22 !important;
    border: 2px solid #30363d !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
    padding: 30px 50px !important;
    border-radius: 20px !important;
}
/* Sade Hata MesajÄ± (SÃ¶zlÃ¼kte Yok) */
#simpleToast {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9);
    background-color: rgba(211, 47, 47, 0.95) !important;
    color: white !important;
    padding: 20px 40px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    white-space: nowrap !important;
    z-index: 2147483647 !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#simpleToast.show { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, -50%) scale(1) !important; }
/* 11. ÃœST KONTROLLER */
/* 12. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 768px) {
    .game-stage { height: calc(100vh - 65px) !important; padding: 5px !important; }
    .hint-image { max-height: 15vh !important; margin-bottom: 5px !important; }
    .game-stage:not(:fullscreen) .hint-image { max-height: 110px !important; }
    .hint-text { font-size: 1rem !important; }
    .hint-label { font-size: 0.7rem !important; padding: 3px 10px !important; top: -10px !important; }
    .word-grid { margin-bottom: 30px !important; }
    .history-wrapper { min-height: 40px !important; max-height: 40px !important; }
    /* Mobil Normal Mod Klavye */
    .game-stage:not(:fullscreen) .keyboard { padding: 6px 4px !important; min-height: 150px !important; }
    .game-stage:not(:fullscreen) .key { height: 42px !important; font-size: 0.9rem !important; }
    .game-stage:not(:fullscreen) .key.wide { font-size: 0.65rem !important; }
    /* Mobil Tam Ekran Klavye */
    .game-stage:fullscreen .keyboard { padding: 10px 8px !important; min-height: 180px !important; }
    .game-stage:fullscreen .key { height: 50px !important; font-size: 1.2rem !important; }
    .game-stage:fullscreen .key.wide { font-size: 0.85rem !important; }
    /* Harf Al Butonu */
    #btnHint { gap: 5px !important; font-size: 0.75rem !important; }
    #btnHint::before { font-size: 1rem !important; }
    /* Mesajlar */
    #cinematicToastBox { width: 85% !important; max-width: 400px !important; padding: 20px !important; }
    #simpleToast { font-size: 1rem !important; padding: 15px 25px !important; width: 80% !important; white-space: normal !important; text-align: center; }
    /* Lobi */
    #gcDisplay { font-size: 2.5rem !important; }
}
/* ========================================================================== KLAVYE DÃœZELTMESÄ° - FÄ°NAL VERSÄ°YON (FotoÄŸraftaki gibi olmayacak, dÃ¼zgÃ¼n TÃ¼rkÃ§e Q klavye) ========================================================================== */
/* KLAVYE - ORTAK STÄ°LLER */
.keyboard { margin-top: auto !important; }
/* Normal Mod Klavye (Tam Ekran DeÄŸilken) - GÃœZEL GÃ–ZÃœKECEK */
/* Tam Ekran Mod Klavye - GENÄ°Å VE RAHAT */
.game-stage:fullscreen .key-row { display: flex !important; justify-content: center !important; }
/* TUÅ STÄ°LLERÄ° */
/* TuÅŸ Renkleri (Oyun SÄ±rasÄ±nda) */
/* MOBÄ°L UYUMLULUK */
@media screen and (max-width: 768px) {
    /* Mobil Normal Mod */
    .game-stage:not(:fullscreen) .keyboard { padding: 8px 6px !important; min-height: 160px !important; }
    .game-stage:not(:fullscreen) .key-row { gap: 4px !important; }
    .game-stage:not(:fullscreen) .key { height: 45px !important; font-size: 1rem !important; min-width: 30px !important; }
    .game-stage:not(:fullscreen) .key.wide { min-width: 55px !important; font-size: 0.7rem !important; }
    /* Mobil Tam Ekran */
    .game-stage:fullscreen .keyboard { padding: 12px 10px !important; min-height: 190px !important; }
    .game-stage:fullscreen .key-row { gap: 6px !important; }
    .game-stage:fullscreen .key { height: 55px !important; font-size: 1.3rem !important; min-width: 35px !important; }
    .game-stage:fullscreen .key.wide { min-width: 65px !important; font-size: 0.9rem !important; }
}
/* ========================================================================== NORMAL MOD (TAM EKRAN DEÄÄ°LKEN) DÃœZELTMELERÄ° 1. Klavye Tamamen GÃ¶zÃ¼ksÃ¼n 2. Ä°pucu AlanÄ± KÃ¼Ã§Ã¼lsÃ¼n ========================================================================== */
/* 1. OYUN ALANI - NORMAL MODDA DAHA Ä°YÄ° DAÄILIM */
.game-stage:not(:fullscreen) {
    height: calc(100vh - 85px) !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
}
.game-stage:not(:fullscreen) #gameArea {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
}
/* 2. Ä°PUCU ALANI - NORMAL MODDA DAHA KOMPAKT */
/* Ä°pucu Resmi - Normal Modda */
.game-stage:not(:fullscreen) .hint-image { max-height: 80px !important; margin-bottom: 6px !important; border-radius: 6px; }
/* Ä°pucu Metni - Normal Modda */
.game-stage:not(:fullscreen) .hint-text { overflow-y: auto !important; padding: 0 10px !important; }
/* Mavi Ä°pucu Etiketi - Normal Modda */
/* 3. SKORLAR - NORMAL MODDA KOMPAKT */
.game-stage:not(:fullscreen) .scoreboard { flex-shrink: 0 !important; margin-top: 3px !important; margin-bottom: 8px !important; }
.game-stage:not(:fullscreen) .group-card { padding: 6px 12px !important; min-width: 80px !important; }
.game-stage:not(:fullscreen) .group-score { font-size: 1.5rem !important; }
/* 4. KONTROL BUTONLARI - NORMAL MODDA */
.game-stage:not(:fullscreen) .game-controls-area { flex-shrink: 0 !important; margin-bottom: 8px !important; min-height: 45px !important; }
.game-stage:not(:fullscreen) .ctrl-btn { height: 45px !important; font-size: 0.75rem !important; }
.game-stage:not(:fullscreen) #btnHint::before { font-size: 1rem !important; }
/* 5. HARF KUTULARI - NORMAL MODDA */
.game-stage:not(:fullscreen) .word-grid { flex-shrink: 0 !important; margin-top: 8px !important; margin-bottom: 15px !important; }
.game-stage:not(:fullscreen) .letter-box { width: 45px !important; height: 55px !important; font-size: 1.8rem !important; }
/* 6. GEÃ‡MÄ°Å - NORMAL MODDA */
.game-stage:not(:fullscreen) .history-wrapper { min-height: 35px !important; max-height: 35px !important; margin-bottom: 8px !important; }
/* 7. KLAVYE - NORMAL MODDA TAM GÃ–ZÃœKSÃœN */
/* 8. TAM EKRAN MODU (DEÄÄ°ÅÄ°KLÄ°K YOK) */
.game-stage:fullscreen #gameArea { height: calc(100vh - 120px) !important; }
/* 9. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 768px) {
    /* Mobil Normal Mod */
    .game-stage:not(:fullscreen) { padding: 5px !important; }
    .game-stage:not(:fullscreen) .question-area { min-height: 80px !important; max-height: 100px !important; padding: 8px !important; }
    .game-stage:not(:fullscreen) .hint-image { max-height: 60px !important; }
    .game-stage:not(:fullscreen) .hint-text { font-size: 0.85rem !important; max-height: 50px !important; }
    .game-stage:not(:fullscreen) .keyboard { padding: 8px 6px !important; min-height: 150px !important; max-height: 160px !important; }
    .game-stage:not(:fullscreen) .key { height: 42px !important; font-size: 0.95rem !important; min-width: 30px !important; }
    .game-stage:not(:fullscreen) .key.wide { min-width: 50px !important; font-size: 0.65rem !important; }
    .game-stage:not(:fullscreen) .letter-box { width: 38px !important; height: 48px !important; font-size: 1.4rem !important; }
    .game-stage:not(:fullscreen) .word-grid { margin-bottom: 12px !important; }
    /* Mobil Tam Ekran */
    .game-stage:fullscreen .keyboard { padding: 12px 10px !important; min-height: 190px !important; }
    .game-stage:fullscreen .key { height: 55px !important; font-size: 1.3rem !important; min-width: 35px !important; }
    .game-stage:fullscreen .key.wide { min-width: 65px !important; font-size: 0.9rem !important; }
}
/* 10. ORTAK KLAVYE STÄ°LLERÄ° (TÃœM MODLAR Ä°Ã‡Ä°N) */
/* TuÅŸ Renkleri */
/* ========================================================================== KLAVYE VE Ä°PUCU DÃœZELTMELERÄ° - FÄ°NAL 1. KenarlÄ±k TuÅŸlarÄ± KapsasÄ±n (BÃ¼yÃ¼tÃ¼ldÃ¼) 2. Ä°pucu YanÄ±ndaki Ok Silindi ========================================================================== */
/* 1. KLAVYE KENARLIKLARI - GENÄ°ÅLETÄ°LDÄ° */
/* Normal Mod Klavye */
/* Tam Ekran Mod Klavye */
/* 2. Ä°PUCU ETÄ°KETÄ° - OK Ä°ÅARETÄ° SÄ°LÄ°NDÄ° */
/* OK Ä°ÅARETÄ°NÄ° KALDIR (::after veya ::before varsa) */
.game-stage:not(:fullscreen) .hint-label { font-size: 0.7rem !important; padding: 4px 12px !important; top: -10px !important; }
/* 3. Ä°PUCU ALANI - AYARLAMALAR */
.game-stage:not(:fullscreen) .question-area {
    flex: 0 0 auto !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px 0 !important;
    padding: 12px !important;
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(22, 27, 34, 0.5);
    border-radius: 12px;
}
/* 4. ORTAK KLAVYE STÄ°LLERÄ° */
/* TuÅŸ Renkleri */
/* 5. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 768px) {
    /* Mobil Normal Mod */
    .game-stage:not(:fullscreen) .keyboard { padding: 12px 15px !important; min-height: 160px !important; }
    .game-stage:not(:fullscreen) .key-row { gap: 4px !important; }
    .game-stage:not(:fullscreen) .key { height: 45px !important; font-size: 1rem !important; min-width: 32px !important; }
    .game-stage:not(:fullscreen) .key.wide { min-width: 55px !important; font-size: 0.7rem !important; }
    /* Mobil Tam Ekran */
    .game-stage:fullscreen .keyboard { padding: 15px 12px !important; min-height: 195px !important; }
    .game-stage:fullscreen .key { height: 55px !important; font-size: 1.3rem !important; min-width: 36px !important; }
    .game-stage:fullscreen .key.wide { min-width: 68px !important; font-size: 0.9rem !important; }
    .game-stage:not(:fullscreen) .hint-label { font-size: 0.65rem !important; padding: 3px 10px !important; }
}
/* ========================================================================== Ä°PUCU VE KLAVYE FÄ°NAL DÃœZELTMELERÄ° 1. Ä°pucu Oku Tamamen Silindi 2. Ä°pucu YazÄ±sÄ± BÃ¼yÃ¼tÃ¼ldÃ¼ 3. Klavye KenarlÄ±ÄŸÄ± Daha da GeniÅŸletildi ========================================================================== */
/* 1. Ä°PUCU ALANI - OK SÄ°LÄ°NDÄ°, YAZI BÃœYÃœTÃœLDÃœ */
.question-area { overflow: visible !important; }
.game-stage:not(:fullscreen) .question-area { min-height: 100px !important; max-height: 150px !important; }
/* Ä°pucu Etiketi (Mavi "Ä°PUCU" yazÄ±sÄ±) */
.hint-label { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; }
/* TÃœM OLASI OKLARI SÄ°L */
.hint-label::after, .hint-label::before { display: none !important; content: none !important; }
.question-area::after, .question-area::before { display: none !important; content: none !important; }
/* Ä°pucu Metni - BÃœYÃœTÃœLDÃœ */
.hint-text { max-width: 100% !important; }
.game-stage:not(:fullscreen) .hint-text { font-size: 1.2rem !important; line-height: 1.3 !important; max-height: 80px !important; }
/* 2. KLAVYE KENARLIKLARI - DAHA DA GENÄ°ÅLETÄ°LDÄ° */
/* Normal Mod Klavye */
.game-stage:not(:fullscreen) .key-row { margin-bottom: 6px !important; }
.game-stage:not(:fullscreen) .key-row:last-child { margin-bottom: 0 !important; }
/* Tam Ekran Mod Klavye */
.game-stage:fullscreen .keyboard {
    background: #0d1117 !important;
    border: 4px solid #58a6ff !important;
    border-radius: 16px !important;
    box-shadow: 0 0 25px rgba(88, 166, 255, 0.35) !important;
}
.game-stage:fullscreen .key-row { margin-bottom: 10px !important; }
/* 3. ORTAK KLAVYE STÄ°LLERÄ° */
/* TuÅŸ Renkleri */
/* 4. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 768px) {
    /* Mobil Ä°pucu Metni */
    .hint-text { font-size: 1.1rem !important; }
    .game-stage:not(:fullscreen) .hint-text { font-size: 1rem !important; }
    .game-stage:not(:fullscreen) .hint-label { font-size: 0.65rem !important; padding: 3px 10px !important; }
    /* Mobil Normal Mod Klavye */
    .game-stage:not(:fullscreen) .keyboard { padding: 14px 18px !important; min-height: 165px !important; }
    .game-stage:not(:fullscreen) .key-row { gap: 4px !important; }
    .game-stage:not(:fullscreen) .key { height: 45px !important; font-size: 1rem !important; min-width: 32px !important; }
    .game-stage:not(:fullscreen) .key.wide { min-width: 55px !important; font-size: 0.7rem !important; }
    /* Mobil Tam Ekran */
    .game-stage:fullscreen .keyboard { padding: 18px 15px !important; min-height: 200px !important; }
    .game-stage:fullscreen .key { height: 55px !important; font-size: 1.3rem !important; min-width: 36px !important; }
    .game-stage:fullscreen .key.wide { min-width: 68px !important; font-size: 0.9rem !important; }
}
/* ========================================================================== RESPONSIVE OYUN DÃœZENÄ° - FÄ°NAL (MOBÄ°L & BÃœYÃœK EKRAN OPTIMIZE) TÃ¼m Ekran BoyutlarÄ±nda MÃ¼kemmel GÃ¶rÃ¼nÃ¼m ========================================================================== */
/* 1. OYUN KUTUSU - TEMEL YAPI */
.game-stage {
    height: calc(100vh - 85px) !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 10px 15px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
/* 2. OYUN ALANI KAPSAYICI */
#gameArea {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 20px 0 !important;
}
/* 3. ÃœST ALAN (SKORLAR) */
.scoreboard { flex-shrink: 0 !important; margin-bottom: 15px !important; }
/* 4. KONTROL BUTONLARI - RESPONSIVE BOYUTLAR */
.game-controls-area {
    flex-shrink: 0 !important;
    margin-bottom: 15px !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.ctrl-btn {
    color: #fff !important;
    background-color: #21262d;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    border-radius: 10px !important;
    height: 50px !important;
    flex: 1 !important;
    max-width: 180px !important;
    min-width: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}
.ctrl-btn i { color: #fff !important; font-size: 1rem !important; }
.ctrl-btn:active { transform: translatey(3px) !important; box-shadow: none !important; }
/* Harf Al Butonu */
#btnHint {
    background: linear-gradient(135deg, #f1c40f, #d4ac0d) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    flex-direction: row !important;
    gap: 6px !important;
}
#btnHint::before { content: "ïƒ«"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.1rem; color: #fff; }
.btn-pass { background: linear-gradient(135deg, #1f6feb, #1158c7) !important; }
.btn-skip-word { background: linear-gradient(135deg, #da3633, #a52623) !important; }
/* 5. Ä°PUCU ALANI - RESPONSIVE */
.question-area {
    flex: 0 0 auto !important;
    min-height: 100px !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 15px auto !important;
    padding: 15px 20px !important;
    position: relative !important;
    width: 100% !important;
    max-width: 900px !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(22, 27, 34, 0.5);
    border-radius: 12px;
}
.hint-label {
    position: absolute !important;
    top: -12px !important;
    left: 20px !important;
    background-color: #1f6feb !important;
    color: white !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    z-index: 999 !important;
}
.hint-label::after, .hint-label::before, .question-area::after, .question-area::before { display: none !important; content: none !important; }
.hint-text {
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
    text-align: center;
    font-weight: 600 !important;
    max-height: 120px !important;
    overflow-y: auto !important;
}
.hint-image {
    max-height: 120px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
    border: 2px solid #1f6feb;
    background: #0d1117;
    border-radius: 10px;
}
/* 6. HARF KUTULARI */
.word-grid {
    flex-shrink: 0 !important;
    margin: 15px auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    max-width: 700px !important;
}
.letter-box { width: 50px !important; height: 60px !important; font-size: 2rem !important; }
/* 7. GEÃ‡MÄ°Å */
.history-wrapper {
    min-height: 45px !important;
    max-height: 45px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
}
.history-wrapper .history-row:not(:last-child) { display: none !important; }
/* 8. KLAVYE - RESPONSIVE VE ORTALANMIÅ */
.keyboard {
    flex-shrink: 0 !important;
    margin: 15px auto 0 auto !important;
    width: 100% !important;
    max-width: 850px !important;
    padding: 16px 22px !important;
    min-height: 185px !important;
    background: #0d1117 !important;
    border: 3px solid #58a6ff !important;
    border-radius: 14px !important;
    box-shadow: 0 0 20px rgba(88, 166, 255, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 50 !important;
}
.key-row { gap: 6px !important; }
.key { flex: 1 !important; height: 52px !important; font-size: 1.15rem !important; min-width: 42px !important; max-width: 65px !important; }
.key.wide { flex: 1.5 !important; min-width: 75px !important; max-width: 110px !important; font-size: 0.85rem !important; }
/* 9. TAM EKRAN MODU */
.game-stage:fullscreen { height: 100vh !important; padding: 15px 20px !important; }
.game-stage:fullscreen #gameArea { padding: 40px 0 !important; }
.game-stage:fullscreen .keyboard { max-width: 1100px !important; }
.game-stage:fullscreen .ctrl-btn { height: 55px !important; font-size: 0.9rem !important; max-width: 200px !important; }
.game-stage:fullscreen .letter-box { width: 60px !important; height: 70px !important; font-size: 2.2rem !important; }
/* 10. MOBÄ°L UYUMLULUK (768px ve altÄ±) */
@media screen and (max-width: 768px) {
    .game-stage { padding: 5px 8px !important; }
    #gameArea { padding: 10px 0 !important; }
    /* Butonlar - Mobilde KÃ¼Ã§Ã¼k */
    .game-controls-area { gap: 6px !important; max-width: 100% !important; }
    .ctrl-btn { height: 45px !important; font-size: 0.7rem !important; min-width: 90px !important; max-width: 130px !important; gap: 4px !important; }
    #btnHint::before { font-size: 0.95rem !important; }
    /* Ä°pucu */
    .question-area { min-height: 90px !important; max-height: 120px !important; padding: 12px 15px !important; margin: 10px auto !important; }
    .hint-text { font-size: 1rem !important; max-height: 80px !important; }
    .hint-image { max-height: 70px !important; }
    .hint-label { font-size: 0.65rem !important; padding: 3px 10px !important; }
    /* Harf KutlarÄ± */
    .letter-box { width: 38px !important; height: 48px !important; font-size: 1.5rem !important; }
    .word-grid { gap: 5px !important; margin: 10px auto !important; }
    /* Klavye - Mobil */
    .keyboard { padding: 10px 12px !important; min-height: 160px !important; max-width: 100% !important; gap: 5px !important; }
    .key-row { gap: 4px !important; }
    .key { height: 44px !important; font-size: 1rem !important; min-width: 28px !important; max-width: 50px !important; }
    .key.wide { min-width: 50px !important; max-width: 75px !important; font-size: 0.7rem !important; }
    .history-wrapper { min-height: 35px !important; max-height: 35px !important; }
    /* Mobil Tam Ekran */
    .game-stage:fullscreen { padding: 8px !important; }
    .game-stage:fullscreen #gameArea { padding: 15px 0 !important; }
    .game-stage:fullscreen .keyboard { padding: 12px 10px !important; min-height: 180px !important; }
    .game-stage:fullscreen .key { height: 50px !important; font-size: 1.2rem !important; max-width: 55px !important; }
    .game-stage:fullscreen .key.wide { max-width: 80px !important; font-size: 0.85rem !important; }
    .game-stage:fullscreen .ctrl-btn { height: 48px !important; font-size: 0.75rem !important; }
}
/* 11. TABLET (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .keyboard { max-width: 700px !important; }
    .key { max-width: 58px !important; }
    .ctrl-btn { max-width: 160px !important; }
}
/* 12. BÃœYÃœK EKRANLAR (1400px ve Ã¼stÃ¼) */
@media screen and (min-width: 1400px) {
    #gameArea { padding: 50px 0 !important; }
    .keyboard { max-width: 950px !important; }
}
/* ========================================================================== MOBÄ°L KLAVYE DÃœZELTMELERÄ° - FÄ°NAL FÄ°X 1. TuÅŸlar arasÄ± boÅŸluklar optimize edildi 2. ZamanlayÄ±cÄ± Ã¼st kontrollere gÃ¶re yerleÅŸtirildi 3. BaÅŸlangÄ±Ã§ butonlarÄ± dÃ¼zeltildi ========================================================================== */
/* 1. NORMAL MOD KLAVYE (MASAÃœSTÃœ) */
.game-stage:not(:fullscreen) .keyboard {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 14px 20px !important;
    min-height: 185px !important;
    max-height: 195px !important;
    background: #0d1117 !important;
    border: 3px solid #58a6ff !important;
    border-radius: 14px !important;
    box-shadow: 0 0 18px rgba(88, 166, 255, 0.25) !important;
    overflow: visible !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.game-stage:not(:fullscreen) .key-row { display: flex !important; justify-content: center !important; gap: 5px !important; width: 100% !important; }
.game-stage:not(:fullscreen) .key {
    flex: 1 !important;
    height: 50px !important;
    font-size: 1.1rem !important;
    min-width: 38px !important;
    max-width: 60px !important;
    border-radius: 6px !important;
    background-color: #484f58 !important;
    color: #fff !important;
}
.game-stage:not(:fullscreen) .key.wide { flex: 1.3 !important; min-width: 65px !important; max-width: 85px !important; font-size: 0.75rem !important; }
/* 2. TAM EKRAN KLAVYE */
.game-stage:fullscreen .keyboard { padding: 20px 28px !important; min-height: 250px !important; gap: 8px !important; }
.game-stage:fullscreen .key-row { gap: 8px !important; }
.game-stage:fullscreen .key { height: 68px !important; font-size: 1.5rem !important; min-width: 55px !important; max-width: 80px !important; }
.game-stage:fullscreen .key.wide { min-width: 95px !important; max-width: 120px !important; font-size: 1.1rem !important; }
/* 3. ZAMANLAYICI KONUMU - ÃœST KONTROLLERLE UYUMLU */
.timer-badge { width: auto !important; display: none !important; }
/* 4. ÃœST KONTROLLER (SES & TAM EKRAN) - HIZALAMA */
.top-controls { position: absolute !important; top: 20px !important; right: 20px !important; display: flex !important; gap: 10px !important; z-index: 10001 !important; }
.control-icon-btn {
    width: 45px !important;
    height: 45px !important;
    background: rgba(88, 166, 255, 0.1) !important;
    border: 1px solid #58a6ff !important;
    color: #58a6ff !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    font-size: 1.2rem !important;
}
.control-icon-btn:hover { background: rgba(88, 166, 255, 0.3) !important; transform: scale(1.05) !important; }
.control-icon-btn.muted { border-color: #f85149 !important; color: #f85149 !important; background: rgba(248, 81, 73, 0.1) !important; }
/* 5. LOBÄ° BUTONLARI DÃœZELTMESÄ° */
.lobby-controls {
    background: rgba(13, 17, 23, 0.5) !important;
    border: 1px solid #30363d !important;
    border-radius: 20px !important;
    padding: 30px !important;
    max-width: 450px !important;
    margin: 30px auto !important;
    backdrop-filter: blur(5px) !important;
}
.counter-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; gap: 30px !important; margin-top: 15px !important; }
.btn-counter {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid #30363d !important;
    background: #161b22 !important;
    color: #58a6ff !important;
    font-size: 1.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}
.btn-counter:hover { background: #58a6ff !important; color: white !important; border-color: #58a6ff !important; transform: scale(1.1) !important; }
#gcDisplay {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    color: white !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
    width: 80px !important;
    text-align: center !important;
}
.btn-create-game {
    background: linear-gradient(135deg, #1f6feb, #1158c7) !important;
    border: 1px solid #1f6feb !important;
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    padding: 18px 60px !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    box-shadow: 0 10px 30px rgba(31, 111, 235, 0.4) !important;
    margin-top: 30px !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.btn-create-game:hover { transform: scale(1.05) !important; box-shadow: 0 15px 40px rgba(31, 111, 235, 0.6) !important; }
/* 6. MOBÄ°L UYUMLULUK (768px ve altÄ±) */
@media screen and (max-width: 768px) {
    /* Mobil Klavye - Optimize EdilmiÅŸ */
    .game-stage:not(:fullscreen) .keyboard { padding: 10px 8px !important; min-height: 160px !important; max-height: 170px !important; gap: 4px !important; }
    .game-stage:not(:fullscreen) .key-row { gap: 3px !important; }
    .game-stage:not(:fullscreen) .key { height: 44px !important; font-size: 1rem !important; min-width: 26px !important; max-width: 42px !important; }
    .game-stage:not(:fullscreen) .key.wide { min-width: 48px !important; max-width: 65px !important; font-size: 0.65rem !important; }
    /* Mobil ZamanlayÄ±cÄ± - Ãœste YerleÅŸtirildi */
    .timer-badge {
        top: 60px !important;
        right: 10px !important;
        height: 38px !important;
        min-width: 85px !important;
        padding: 0 10px !important;
        font-size: 1.2rem !important;
        border-radius: 10px !important;
        gap: 6px !important;
    }
    .timer-badge i { font-size: 1rem !important; }
    /* Mobil Ãœst Kontroller */
    .top-controls { top: 10px !important; right: 10px !important; gap: 8px !important; }
    .control-icon-btn { width: 38px !important; height: 38px !important; font-size: 1rem !important; border-radius: 8px !important; }
    /* Mobil Lobi */
    .lobby-controls { padding: 20px !important; max-width: 90% !important; }
    .counter-wrapper { gap: 20px !important; }
    .btn-counter { width: 50px !important; height: 50px !important; font-size: 1.5rem !important; }
    #gcDisplay { font-size: 2.8rem !important; width: 60px !important; }
    .btn-create-game { font-size: 1.2rem !important; padding: 15px 40px !important; width: 100% !important; }
    /* Mobil Tam Ekran Klavye */
    .game-stage:fullscreen .keyboard { padding: 12px 8px !important; min-height: 185px !important; gap: 5px !important; }
    .game-stage:fullscreen .key-row { gap: 4px !important; }
    .game-stage:fullscreen .key { height: 52px !important; font-size: 1.25rem !important; min-width: 32px !important; max-width: 52px !important; }
    .game-stage:fullscreen .key.wide { min-width: 60px !important; max-width: 80px !important; font-size: 0.8rem !important; }
}
/* 7. TABLET (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .keyboard { max-width: 700px !important; padding: 16px 22px !important; }
    .key { max-width: 58px !important; }
    .key.wide { max-width: 90px !important; }
    .timer-badge { right: 130px !important; font-size: 1.3rem !important; }
}
/* ========================================================================== MOBÄ°L KLAVYE KÃœÃ‡ÃœLTME VE BAÅLANGIÃ‡ BUTONLARI GÄ°ZLEME ========================================================================== */
/* 1. MOBÄ°L KLAVYE - DAHA KÃœÃ‡ÃœK */
@media screen and (max-width: 768px) {
    /* Mobil Normal Mod Klavye - KÃ¼Ã§Ã¼ltÃ¼ldÃ¼ */
    .game-stage:not(:fullscreen) .keyboard { padding: 8px 6px !important; min-height: 145px !important; max-height: 155px !important; gap: 3px !important; }
    .game-stage:not(:fullscreen) .key-row { gap: 2px !important; }
    .game-stage:not(:fullscreen) .key { height: 40px !important; font-size: 0.9rem !important; min-width: 24px !important; max-width: 38px !important; }
    .game-stage:not(:fullscreen) .key.wide { min-width: 44px !important; max-width: 60px !important; font-size: 0.6rem !important; }
    /* Mobil Tam Ekran Klavye - KÃ¼Ã§Ã¼ltÃ¼ldÃ¼ */
    .game-stage:fullscreen .keyboard { padding: 10px 8px !important; min-height: 170px !important; gap: 4px !important; }
    .game-stage:fullscreen .key-row { gap: 3px !important; }
    .game-stage:fullscreen .key { height: 48px !important; font-size: 1.15rem !important; min-width: 30px !important; max-width: 48px !important; }
    .game-stage:fullscreen .key.wide { min-width: 56px !important; max-width: 75px !important; font-size: 0.75rem !important; }
}
/* 2. BAÅLANGIÃ‡ BUTONLARINI GÄ°ZLE (LOBÄ° EKRANINDA) */
/* Oyun baÅŸladÄ±ÄŸÄ±nda gÃ¶ster */
/* ========================================================================== BAÅLANGIÃ‡ EKRANI (LOBÄ°) TEMÄ°ZLÄ°ÄÄ° - FÄ°NAL EKLEME Oyun baÅŸlamadan Ã¶nce ipuÃ§larÄ±, butonlar ve klavye gÃ¶rÃ¼nmeyecek. ========================================================================== */
/* 1. Oyun AlanÄ± Pasifken (Lobi Modu) Ä°Ã§indeki Her Åeyi Gizle */
/* Bu, ipucu, resim, klavye ve gridin lobi ekranÄ±nda taÅŸmasÄ±nÄ± Ã¶nler */
#gameArea:not(.active) { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
/* 2. Oyun Kontrol ButonlarÄ±nÄ± (Harf Al, Pas, Atla) BaÅŸlangÄ±Ã§ta Gizle */
/* Bu butonlar sadece oyun baÅŸladÄ±ÄŸÄ±nda gÃ¶rÃ¼nmelidir */
.game-controls-area { display: none !important; }
/* 3. Sadece Oyun BaÅŸladÄ±ÄŸÄ±nda (.active class'Ä± gelince) ButonlarÄ± GÃ¶ster */
/* JS: document.getElementById('gameArea').classList.add('active'); tetiklediÄŸinde Ã§alÄ±ÅŸÄ±r */
#gameArea.active .game-controls-area { display: flex !important; animation: fadeIn 0.5s ease-out; }
/* 4. ZamanlayÄ±cÄ± Rozetini Lobide Garanti Gizle */
/* JS style="display: flex" yapana kadar gizli kalÄ±r */
#timerBadge:not([style*="display: flex"]) { display: none !important; }
/* 5. Ä°pucu AlanÄ± ve Etiketleri Garanti Gizle */
/* EÄŸer JS yÃ¼klenmeden Ã¶nce gÃ¶rÃ¼nÃ¼rse diye Ã¶nlem */
#gameArea:not(.active) .question-area, #gameArea:not(.active) .hint-label, #gameArea:not(.active) .hint-text, #gameArea:not(.active) .hint-image { display: none !important; }
/* ============================================================ BÄ°LGÄ°SAYAR Ä°Ã‡Ä°N KLAVYE KÃœÃ‡ÃœLTME (GÃœNCELLEME) Bu kod sadece bilgisayar ekranlarÄ±nda Ã§alÄ±ÅŸÄ±r, mobili etkilemez. ============================================================ */
@media screen and (min-width: 769px) {
    /* --- 1. NORMAL MOD (PENCERELÄ°) - KOMPAKT KLAVYE --- */
    .game-stage:not(:fullscreen) .keyboard {
        padding: 8px 10px !important;
        min-height: 140px !important;
        max-height: 150px !important;
        max-width: 600px !important;
        margin: 5px auto 0 auto !important;
        gap: 4px !important;
    }
    .game-stage:not(:fullscreen) .key { height: 38px !important; font-size: 0.9rem !important; border-radius: 6px !important; }
    .game-stage:not(:fullscreen) .key-row { gap: 4px !important; }
    /* --- 2. TAM EKRAN MODU - DENGELÄ° KLAVYE --- */
    .game-stage:fullscreen .keyboard { padding: 15px 20px !important; min-height: 200px !important; max-width: 800px !important; margin-top: auto !important; gap: 8px !important; }
    .game-stage:fullscreen .key { height: 55px !important; font-size: 1.2rem !important; }
    .game-stage:fullscreen .key.wide { font-size: 0.9rem !important; }
    /* --- 3. HARF KUTULARINI DA BÄ°RAZ TOPARLA --- */
    /* Klavye kÃ¼Ã§Ã¼lÃ¼nce harfler Ã§ok bÃ¼yÃ¼k kalmasÄ±n */
    .game-stage:not(:fullscreen) .letter-box { width: 40px !important; height: 50px !important; font-size: 1.6rem !important; }
}
/* ========================================================================== MOBÄ°L KLAVYE TAÅMA DÃœZELTMESÄ° (KESÄ°N Ã‡Ã–ZÃœM) TuÅŸlar Ã§erÃ§eve dÄ±ÅŸÄ±na asla Ã§Ä±kamaz, esnekleÅŸir. ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Klavye Kutusu: Yan boÅŸluklarÄ± al, geniÅŸliÄŸi tam kullan */
    .game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard {
        width: 98% !important;
        max-width: 100% !important;
        margin: 5px auto 0 auto !important;
        padding: 10px 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 5px !important;
    }
    /* 2. SatÄ±rlar: Tam geniÅŸliÄŸe yayÄ±l */
    .key-row { display: flex !important; width: 100% !important; justify-content: space-between !important; gap: 3px !important; margin: 0 !important; }
    /* 3. TuÅŸlar: "min-width: 0" ile kÃ¼Ã§Ã¼lmeye zorla */
    .key {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        font-size: 1rem !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* 4. GeniÅŸ TuÅŸlar (Enter ve Sil): OrantÄ±lÄ± bÃ¼yÃ¼t */
    .key.wide { flex: 1.5 1 0 !important; font-size: 0.7rem !important; font-weight: 900 !important; }
    /* Ä°kon hizalamasÄ± */
    .key.wide i { font-size: 1rem !important; }
}
/* ========================================================================== FÄ°NAL KLAVYE TASARIMI (GÃ–RSEL Ä°LE BÄ°REBÄ°R) Hem Bilgisayar Hem Mobilde Mavi Ã‡erÃ§eveli, 3D TuÅŸlu, OrtalÄ± TasarÄ±m ========================================================================== */
/* 1. KLAVYE KUTUSU (DIÅ Ã‡ERÃ‡EVE) - ORTAK AYARLAR */
.game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard {
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px auto !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}
/* 2. TUÅ SATIRLARI */
.key-row { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
/* 3. TUÅLARIN GENEL GÃ–RÃœNÃœMÃœ (3D EFEKTÄ°) */
.key {
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.1s !important;
    user-select: none !important;
}
/* TÄ±klanÄ±nca Ã§Ã¶kme efekti */
.key:active { transform: translatey(4px) !important; box-shadow: none !important; background-color: #58a6ff !important; }
/* ----------------------------------------------------------- BÄ°LGÄ°SAYAR Ä°Ã‡Ä°N Ã–ZEL AYARLAR (GeniÅŸ ve Rahat) ----------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard { width: fit-content !important; padding: 20px 30px !important; gap: 10px !important; }
    .key-row { gap: 8px !important; }
    .key { width: 55px !important; height: 60px !important; font-size: 1.2rem !important; }
    .key.wide { width: 100px !important; font-size: 0.9rem !important; }
}
/* ----------------------------------------------------------- MOBÄ°L Ä°Ã‡Ä°N Ã–ZEL AYARLAR (TaÅŸmayÄ± Ã–nleyen SÄ±kÄ±ÅŸtÄ±rma) ----------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard {
        width: 98% !important;
        max-width: 100% !important;
        padding: 10px 4px !important;
        gap: 6px !important;
    }
    .key-row { gap: 3px !important; }
    .key { flex: 1 !important; height: 48px !important; font-size: 1rem !important; min-width: 0 !important; padding: 0 !important; }
    /* Enter ve Silme tuÅŸunu biraz daha geniÅŸ yap ama orantÄ±lÄ± */
    .key.wide { flex: 1.5 !important; font-size: 0.7rem !important; }
    /* Ä°kon hizalamasÄ± */
    .key.wide i { font-size: 0.9rem !important; }
}
/* ----------------------------------------------------------- RENK DURUMLARI (DoÄŸru/YanlÄ±ÅŸ/Var) - GÃ¶rseli bozmadan ----------------------------------------------------------- */
.key.correct { border: none !important; }
.key.present { border: none !important; }
.key.absent { opacity: 0.6; }
/* ========================================================================== KLAVYE DÃœZELTMESÄ° (NEON YOK & MOBÄ°L DÃœZEN) ========================================================================== */
/* 1. NEON EFEKTÄ°NÄ° KALDIR (TÃ¼m Ekranlar Ä°Ã§in) */
.game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard {
    border: 2px solid #30363d !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    background-color: #0d1117 !important;
}
/* 2. BÄ°LGÄ°SAYAR Ä°Ã‡Ä°N: TUÅ BOÅLUKLARINI AZALT (SÄ±kÄ±laÅŸtÄ±rma) */
@media screen and (min-width: 769px) {
    /* SatÄ±rlar arasÄ± boÅŸluk */
    .game-stage:not(:fullscreen) .keyboard { gap: 4px !important; padding: 10px 15px !important; min-height: auto !important; }
    /* Yan yana tuÅŸlar arasÄ± boÅŸluk */
    .game-stage:not(:fullscreen) .key-row { gap: 4px !important; }
    /* TuÅŸ boyutu ince ayar */
    .game-stage:not(:fullscreen) .key { border-radius: 4px !important; }
}
/* 3. TELEFON Ä°Ã‡Ä°N: KENARLIK Ã‡AKIÅMASINI DÃœZELT */
@media screen and (max-width: 768px) {
    .game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard {
        padding: 12px 8px !important;
        width: 96% !important;
        margin: 5px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    /* TuÅŸlarÄ± kenardan biraz daha uzaklaÅŸtÄ±r */
    .key-row { width: 100% !important; margin: 0 !important; gap: 3px !important; }
    /* Enter ve Sil tuÅŸlarÄ±nÄ±n yazÄ± boyutu ve kenar payÄ± */
    .key.wide { font-size: 0.65rem !important; padding: 0 2px !important; }
    /* TuÅŸlarÄ±n kendisine de sÄ±nÄ±r koy */
    .key { min-width: 0 !important; flex: 1 !important; }
}
/* KLAVYE RENK DÃœZELTMESÄ° (TAM EKRAN VE NORMAL MOD AYNI) */
.key { background-color: #484f58 !important; box-shadow: 0 4px 0 #2d333b !important; }
.key:hover { background-color: #555c65 !important; }
.key.correct { background-color: #538d4e !important; box-shadow: 0 4px 0 #3e6b3b !important; }
.key.present { background-color: #b59f3b !important; box-shadow: 0 4px 0 #8a782d !important; }
.key.absent { background-color: #21262d !important; color: #666 !important; box-shadow: none !important; border: 1px solid #30363d !important; }
.key.wide { background-color: #3b434b !important; }
/* OYUN SAHNESÄ° Ã–LÃ‡EK (TAM EKRANDAN Ã‡IKINCA HAFÄ°F KÃœÃ‡ÃœLT) */
.game-stage { transform-origin: top center; transition: transform 0.2s ease; }

/* Mobil: Ã¶lÃ§ekleme yok (responsive layout kullan) */
@media screen and (max-width: 768px) {
    .game-stage { transform: none !important; }
}

/* MasaÃ¼stÃ¼: normal modda hafif kÃ¼Ã§Ã¼lt (tam ekrandan Ã§Ä±kÄ±nca â€œgrup halindeâ€ kÃ¼Ã§Ã¼lme) */
@media screen and (min-width: 769px) {
    .game-stage:not(:fullscreen) { transform: scale(0.97); }
}

/* Daha kÄ±sa ekranlarda biraz daha kÃ¼Ã§Ã¼lt */
@media screen and (min-width: 769px) and (max-height: 820px) {
    .game-stage:not(:fullscreen) { transform: scale(0.94); }
}
@media screen and (min-width: 769px) and (max-height: 720px) {
    .game-stage:not(:fullscreen) { transform: scale(0.9); }
}

/* Tam ekran modunda Ã¶lÃ§ek iptal */
.game-stage:fullscreen { transform: scale(1) !important; }
/* CÄ°NEMATÄ°C TOAST - TAM ORTALAMA (TAM EKRAN + NORMAL) */
#cinematicToastOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999999 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#cinematicToastOverlay.show { opacity: 1 !important; visibility: visible !important; }
#cinematicToastBox { text-align: center; transform: scale(0.8); min-width: 300px; }
#cinematicToastOverlay.show #cinematicToastBox { transform: scale(1) !important; }
#toastIcon { font-size: 4rem; margin-bottom: 15px; }
#toastMessage { font-weight: 900; color: white; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; }
/* TOAST TÄ°PLERÄ° */
.success-toast { border-color: #3fb950 !important; background: linear-gradient(145deg, #161b22, #0d1117) !important; }
.success-toast #toastIcon { color: #3fb950; text-shadow: 0 0 20px rgba(63, 185, 80, 0.6); }
.error-toast { border-color: #f85149 !important; background: linear-gradient(145deg, #161b22, #0d1117) !important; }
.error-toast #toastIcon { color: #f85149; text-shadow: 0 0 20px rgba(248, 81, 73, 0.6); }
.timeout-toast { border-color: #d29922 !important; }
.timeout-toast #toastIcon { color: #d29922; text-shadow: 0 0 20px rgba(210, 153, 34, 0.6); }
.skip-toast { border-color: #58a6ff !important; }
.skip-toast #toastIcon { color: #58a6ff; text-shadow: 0 0 20px rgba(88, 166, 255, 0.6); }
.info-toast { border-color: #58a6ff !important; }
.info-toast #toastIcon { color: #58a6ff; text-shadow: 0 0 20px rgba(88, 166, 255, 0.6); }
/* ZAMANLAYICI - BAÅLANGIÃ‡TA GÄ°ZLÄ°, OYUN BAÅLAYINCA GÃ–RÃœNÃœR */
#gameArea.active ~ .timer-badge, body.game-started .timer-badge { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
/* ============================================================ ZAMANLAYICI DÃœZELTMESÄ° (FÄ°NAL) ============================================================ */
/* ZamanlayÄ±cÄ± varsayÄ±lan gÃ¶rÃ¼nÃ¼mÃ¼ */
.timer-badge {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 20px !important;
    right: 150px !important;
    height: 45px !important;
    min-width: 100px !important;
    padding: 0 15px !important;
    background: rgba(22, 27, 34, 0.95) !important;
    border: 2px solid #d32f2f !important;
    border-radius: 12px !important;
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 10000 !important;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3) !important;
    transition: all 0.3s ease;
}
.timer-badge i { font-size: 1.2rem !important; color: #d32f2f !important; }
/* Mobil iÃ§in Ã¶zel konumlandÄ±rma */
@media screen and (max-width: 768px) {
    .timer-badge { top: 60px !important; right: 10px !important; height: 38px !important; min-width: 85px !important; font-size: 1.2rem !important; }
}
/* Not: HTML tarafÄ±nda id="timerBadge" elementinde style="display:none;" olduÄŸu iÃ§in sayfa ilk aÃ§Ä±ldÄ±ÄŸÄ±nda zaten gÃ¶rÃ¼nmez olacaktÄ±r. JS "startGameFlow" fonksiyonu Ã§alÄ±ÅŸtÄ±ÄŸÄ±nda display:flex yaparak gÃ¶rÃ¼nÃ¼r hale getirecektir. */
/* ============================================================
   ZAMANLAYICI GARANTÄ° GÃ–RÃœNÃœM (BAÅLANGIÃ‡TA GÄ°ZLENMEZ)
   ============================================================ */
.timer-badge {
    /* GÃ¶rÃ¼nÃ¼rlÃ¼ÄŸÃ¼ Zorla */
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* KonumlandÄ±rma */
    position: absolute !important;
    top: 20px !important;
    right: 150px !important; /* ButonlarÄ±n solunda durur */
    z-index: 20000 !important; /* En Ã¼st katmanda olsun */

    /* TasarÄ±m */
    height: 45px !important;
    min-width: 100px !important;
    padding: 0 15px !important;
    background: rgba(22, 27, 34, 0.95) !important;
    border: 2px solid #d32f2f !important;
    border-radius: 12px !important;
    
    /* YazÄ± */
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    
    /* Ä°Ã§erik Hizalama */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3) !important;
}

.timer-badge i {
    font-size: 1.2rem !important;
    color: #d32f2f !important;
}

/* Mobil iÃ§in konum dÃ¼zeltmesi */
@media screen and (max-width: 768px) {
    .timer-badge {
        top: 60px !important; /* ButonlarÄ±n altÄ±na iner */
        right: 10px !important;
        height: 38px !important;
        min-width: 85px !important;
        font-size: 1.2rem !important;
    }
}

/* ==========================================================================
   MOBÄ°L KLAVYE (TELEFON) - DÃœZEN DÃœZELTMESÄ°
   - 11 tuÅŸlu 2. satÄ±r + ENTER/SÄ°L taÅŸmasÄ±n
   ========================================================================== */
@media screen and (max-width: 768px) {
    .game-stage:not(:fullscreen) #keyboard {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .game-stage:not(:fullscreen) #keyboard .key-row {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 3px !important;
        flex-wrap: nowrap !important;
    }

    .game-stage:not(:fullscreen) #keyboard .key {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        height: 48px !important;
        font-size: clamp(0.7rem, 3.4vw, 1.05rem) !important;
        line-height: 1 !important;
        touch-action: manipulation;
    }

    .game-stage:not(:fullscreen) #keyboard .key.wide {
        flex: 1.6 1 0 !important;
        padding: 0 4px !important;
        font-size: clamp(0.6rem, 3vw, 0.9rem) !important;
        white-space: nowrap;
    }
}

@media screen and (max-width: 360px) {
    .game-stage:not(:fullscreen) #keyboard {
        padding: 8px 6px !important;
        gap: 3px !important;
    }
    .game-stage:not(:fullscreen) #keyboard .key-row { gap: 2px !important; }
    .game-stage:not(:fullscreen) #keyboard .key { height: 44px !important; }
    .game-stage:not(:fullscreen) #keyboard .key.wide { flex: 1.5 1 0 !important; }
}

/* Google Sign-In Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
    color: #666;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.divider span {
    padding: 0 15px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Google Sign-In Button Center */
.g_id_signin {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Hesap TÃ¼rÃ¼ SeÃ§im KartlarÄ± */
.account-type-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0;
}

.account-type-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: #fff;
}

.account-type-card:hover {
    border-color: #4CAF50;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.2);
    transform: translateY(-3px);
}

.account-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.account-type-card input[type="radio"]:checked + .card-content {
    color: #4CAF50;
}

.account-type-card input[type="radio"]:checked ~ .card-content {
    border-color: #4CAF50;
}

.account-type-card input[type="radio"]:checked + .card-content::before {
    content: "âœ“";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #4CAF50;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.card-content {
    text-align: center;
    position: relative;
}

.card-content i {
    font-size: 48px;
    color: #4CAF50;
    margin-bottom: 15px;
    display: block;
}

.card-content h3 {
    margin: 10px 0;
    font-size: 20px;
    color: #333;
}

.card-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Mobil responsive */
@media (max-width: 768px) {
    .account-type-selection {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .account-type-card {
        padding: 20px;
    }
    
    .card-content i {
        font-size: 36px;
    }
}

/* ============================================================ 
   HESAP TÃœRÃœ SEÃ‡Ä°MÄ° - ESKÄ° TEMA (KIRMIZI/MAVÄ°)
   ============================================================ */

/* 1. KapsayÄ±cÄ± Alan */
.radio-group-modern {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
}

/* 2. KartlarÄ±n Kendisi */
.radio-card {
    flex: 1 !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer;
    border: 2px solid #30363d !important;
    border-radius: 8px !important;
    padding: 15px 10px !important;
    background: #161b22 !important;
    transition: all 0.3s ease !important;
}

.radio-card:hover {
    border-color: #58a6ff !important;
    transform: translateY(-2px) !important;
}

/* 3. Radio Input Gizle */
.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

/* 4. SeÃ§ildiÄŸinde Renk DeÄŸiÅŸimi */
/* Ã–ÄŸrenci SeÃ§ilince - MAVÄ° */
.radio-card input[value="student"]:checked ~ .card-content {
    color: #58a6ff !important;
}

.radio-card input[value="student"]:checked + .card-content,
.radio-card:has(input[value="student"]:checked) {
    border-color: #58a6ff !important;
    background: rgba(88, 166, 255, 0.1) !important;
}

/* Ã–ÄŸretmen SeÃ§ilince - KIRMIZI */
.radio-card input[value="teacher"]:checked ~ .card-content {
    color: #f85149 !important;
}

.radio-card input[value="teacher"]:checked + .card-content,
.radio-card:has(input[value="teacher"]:checked) {
    border-color: #f85149 !important;
    background: rgba(248, 81, 73, 0.1) !important;
}

/* 5. Ä°Ã§erik TasarÄ±mÄ± */
.card-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #c9d1d9 !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

/* 6. Ä°kon Stilleri */
.card-content i {
    font-size: 1.3rem !important;
    margin-right: 5px !important;
}

/* Ã–ÄŸrenci Ä°konu - MAVÄ° */
.card-content .fa-user-graduate {
    color: #58a6ff !important;
}

/* Ã–ÄŸretmen Ä°konu - KIRMIZI */
.card-content .fa-chalkboard-teacher {
    color: #f85149 !important;
}

/* 7. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 480px) {
    .radio-group-modern {
        gap: 10px !important;
    }
    
    .card-content {
        padding: 12px 5px !important;
        font-size: 0.9rem !important;
    }
    
    .card-content i {
        font-size: 1.1rem !important;
    }
}

/* ============================================================ 
   AUTH DIVIDER - ESKÄ° TASARIM
   ============================================================ */
.auth-divider {
    height: 1px;
    background: #30363d !important;
    margin: 25px 0;
}

/* ============================================================ 
   AUTH FOOTER - ESKÄ° TEMA
   ============================================================ */
.auth-footer {
    text-align: center;
    margin: 0;
}

.auth-footer p {
    color: #8b949e !important;
    font-size: 14px;
    margin: 0;
}

.auth-footer a {
    color: #58a6ff !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.auth-footer a:hover {
    color: #388bfd !important;
    text-decoration: underline;
}
/* ============================================================ 
   HESAP TÃœRÃœ SEÃ‡Ä°MÄ° - TEK KENARLIK DÃœZELTMESÄ°
   ============================================================ */

/* 1. KapsayÄ±cÄ± Alan */
.radio-group-modern {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
}

/* 2. DÄ±ÅŸ Kart (label) - KenarlÄ±k Yok, Sadece KapsayÄ±cÄ± */
.radio-card {
    flex: 1 !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

/* 3. Radio Input Gizle */
.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 4. Ä°Ã§erik Kutusu - ASIL KENARLK BURADA */
.card-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 15px 20px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #8b949e !important;
    white-space: nowrap !important;
    border: 2px solid #30363d !important;
    border-radius: 12px !important;
    background: #161b22 !important;
    transition: all 0.3s ease !important;
}

/* Hover Efekti */
.radio-card:hover .card-content {
    background: #1c2128 !important;
    transform: translateY(-2px) !important;
}

/* 5. SEÃ‡Ä°LÄ° DURUM - KIRMIZI KENARLK */

/* Ã–ÄŸrenci SeÃ§ilince */
.radio-card:has(input[value="student"]:checked) .card-content {
    border: 2px solid #d32f2f !important;
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.15), rgba(183, 28, 28, 0.1)) !important;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.3) !important;
    color: #fff !important;
}

/* Ã–ÄŸretmen SeÃ§ilince */
.radio-card:has(input[value="teacher"]:checked) .card-content {
    border: 2px solid #d32f2f !important;
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.15), rgba(183, 28, 28, 0.1)) !important;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.3) !important;
    color: #fff !important;
}

/* 6. Ä°kon Stilleri */
.card-content i {
    font-size: 1.5rem !important;
    margin-right: 5px !important;
}

/* SeÃ§ilmemiÅŸ durumda ikonlar gri */
.radio-card:not(:has(input:checked)) .card-content i {
    color: #8b949e !important;
}

/* SeÃ§ili durumda ikonlar beyaz */
.radio-card:has(input:checked) .card-content i {
    color: #fff !important;
}

/* 7. MOBÄ°L UYUMLULUK */
@media screen and (max-width: 480px) {
    .radio-group-modern {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .card-content {
        padding: 12px 15px !important;
        font-size: 0.95rem !important;
    }
    
    .card-content i {
        font-size: 1.3rem !important;
    }
}

.card-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.card-content i {
  font-size: 1.5rem !important;
  margin: 0 !important;
}

/* ==========================================
   YARIÅMA KARTI - GÄ°ZLÄ°LÄ°K AYARLARI CSS
   ========================================== */

/* 1. Herkese AÃ§Ä±k Rozeti (Kod Yerine Gelecek) */
.public-badge-box {
    background: rgba(35, 134, 54, 0.15); /* YeÅŸilimsi zemin */
    border: 1px dashed #238636;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #3fb950; /* Parlak yeÅŸil yazÄ± */
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    cursor: default;
}

.public-badge-box i {
    font-size: 1rem;
}

/* 2. Gizli Kod Kutusu (Mevcut stile kÃ¼Ã§Ã¼k dokunuÅŸ) */
.copy-code-box {
    /* EÄŸer css'de varsa Ã¼zerine yazar, yoksa yeni ekler */
    background: rgba(13, 17, 23, 0.8);
    border: 1px dashed #58a6ff; /* Mavi Ã§erÃ§eve */
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: copy;
    transition: all 0.2s ease;
}

.copy-code-box:hover {
    background: rgba(88, 166, 255, 0.15);
    transform: scale(1.02);
    border-color: #79c0ff;
}

.the-code {
    font-family: 'Courier New', monospace;
    font-weight: 900;
    font-size: 1.2rem;
    color: #58a6ff;
    letter-spacing: 2px;
}
/* ==========================================
   YENÄ° EKLENEN Ã–ZELLÄ°KLER (ZAMANLAYICI & TOGGLE)
   ========================================== */

/* 1. Timer Badge DÃ¼zenlemesi (Butonu Ä°Ã§erecek Åekilde) */
.timer-badge {
    flex-direction: column !important; /* Alt alta diz */
    gap: 5px !important;
    padding: 8px 10px !important;
    height: auto !important;
    min-height: 70px !important;
    transition: all 0.3s ease;
}

.timer-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 2. Buz TemalÄ± Dondurma Butonu */
.btn-freeze {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 100%;
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-freeze:hover {
    background: rgba(88, 166, 255, 0.3);
    border-color: #58a6ff;
    transform: scale(1.05);
}

/* 3. DondurulmuÅŸ Mod (Frozen Mode) - Buz Efekti */
.timer-badge.frozen-mode {
    background: linear-gradient(135deg, #0b1e45, #1f6feb) !important; /* Buz Mavisi Gradyan */
    border-color: #58a6ff !important;
    box-shadow: 0 0 20px rgba(88, 166, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3) !important;
    animation: frozenPulse 2s infinite;
}

.timer-badge.frozen-mode i.fa-stopwatch, 
.timer-badge.frozen-mode span {
    color: #e6edf3 !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes frozenPulse {
    0% { box-shadow: 0 0 20px rgba(88, 166, 255, 0.6); }
    50% { box-shadow: 0 0 30px rgba(88, 166, 255, 0.9); border-color: #fff; }
    100% { box-shadow: 0 0 20px rgba(88, 166, 255, 0.6); }
}

/* Mobil Uyum */
@media screen and (max-width: 768px) {
    .timer-badge {
        min-height: 60px !important;
        min-width: 70px !important;
    }
    .btn-freeze {
        padding: 2px !important;
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   PLAY GAME (IPUCU RESIM + KLAVYE) - GUNCELLEME
   ========================================================================== */

body.modal-open { overflow: hidden !important; }

/* IPUCU ICERIK: solda resim, sagda yazi */
body.game-mode .question-area .hint-body {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

body.game-mode .question-area .hint-image-btn {
    flex: 0 0 auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

body.game-mode .question-area .hint-image {
    width: 140px !important;
    max-height: 120px !important;
    height: auto !important;
    object-fit: contain !important;
    border: 2px solid #1f6feb !important;
    border-radius: 10px !important;
    background: #0d1117 !important;
}

body.game-mode .question-area .hint-text {
    flex: 1 1 auto !important;
    text-align: left !important;
    max-height: 140px !important;
    overflow-y: auto !important;
    padding: 4px 6px !important;
}

/* IPUCU RESMI MODAL */
.hint-image-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999999;
    padding: 18px;
}
.hint-image-overlay.show { display: flex; }

.hint-image-dialog {
    position: relative;
    background: rgba(13, 17, 23, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px;
    max-width: min(720px, 92vw);
    max-height: 80vh;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85);
}

.hint-image-dialog img {
    display: block;
    max-width: 100%;
    max-height: calc(80vh - 60px);
    border-radius: 10px;
    background: #0d1117;
}

.hint-image-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(22, 27, 34, 0.7);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.hint-image-close:hover { border-color: #58a6ff; background: rgba(88, 166, 255, 0.2); }

/* Klavye ozel tuslar */
body.game-mode #keyboard .key.key-enter {
    background-color: #2ea043 !important;
    box-shadow: 0 4px 0 #1f6f33 !important;
    font-weight: 900 !important;
}
body.game-mode #keyboard .key.key-enter:hover { background-color: #3fb950 !important; }
body.game-mode #keyboard .key.key-enter:active { transform: translatey(4px) !important; box-shadow: none !important; }

/* Klavye alta kaymasin (normal mod) */
body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard {
    margin-top: auto !important;
    min-height: 165px !important;
    position: static !important;
    bottom: auto !important;
}

body.game-mode .game-stage:not(:fullscreen) #gameArea {
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
}

/* Normal modda her seyi biraz daha kompakt yap */
@media screen and (min-width: 769px) {
    body.game-mode .game-stage:not(:fullscreen) .scoreboard { margin-top: 0 !important; margin-bottom: 6px !important; }
    body.game-mode .game-stage:not(:fullscreen) .group-card { padding: 6px 14px !important; min-width: 110px !important; }
    body.game-mode .game-stage:not(:fullscreen) .group-card.active { transform: scale(1.06) !important; }
    body.game-mode .game-stage:not(:fullscreen) .group-score { font-size: 1.9rem !important; }

    body.game-mode .game-stage:not(:fullscreen) .game-controls-area { margin-bottom: 6px !important; }
    body.game-mode .game-stage:not(:fullscreen) .ctrl-btn { height: 42px !important; font-size: 0.72rem !important; }

    body.game-mode .game-stage:not(:fullscreen) .question-area { margin: 8px auto !important; padding: 12px 16px !important; max-height: 160px !important; }
    body.game-mode .game-stage:not(:fullscreen) .hint-text { font-size: 1.1rem !important; }

    body.game-mode .game-stage:not(:fullscreen) .word-grid { margin-top: 6px !important; margin-bottom: 8px !important; gap: 6px !important; }
    body.game-mode .game-stage:not(:fullscreen) .letter-box { width: 40px !important; height: 50px !important; font-size: 1.55rem !important; }

    body.game-mode .game-stage:not(:fullscreen) #keyboard .key { height: 44px !important; font-size: 0.95rem !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.wide { font-size: 0.7rem !important; }
}

/* Mobilde (ozellikle tam ekran degilken) daha kompakt */
@media screen and (max-width: 480px) {
    body.game-mode { padding-top: 65px !important; }

    body.game-mode .game-stage { width: 98% !important; margin: 10px auto 20px !important; }
    body.game-mode .game-stage:not(:fullscreen) { height: calc(100dvh - 70px) !important; }

    body.game-mode .game-stage:not(:fullscreen) .top-controls { top: 4px !important; right: 8px !important; }

    body.game-mode .game-stage:not(:fullscreen) #gameArea {
        padding: 8px 0 !important;
        gap: 8px !important;
    }

    body.game-mode .scoreboard { margin-top: 34px !important; margin-bottom: 10px !important; }
    body.game-mode .group-card { padding: 5px 10px !important; min-width: 70px !important; }
    body.game-mode .group-card.active { transform: scale(1.03) !important; }
    body.game-mode .group-score { font-size: 1.25rem !important; }

    body.game-mode .game-controls-area { gap: 6px !important; margin-bottom: 10px !important; }
    body.game-mode .ctrl-btn { height: 38px !important; font-size: 0.58rem !important; min-width: 0 !important; }

    body.game-mode .question-area { margin: 6px auto !important; padding: 10px 12px !important; max-height: 135px !important; }

    body.game-mode .game-stage:not(:fullscreen) .history-wrapper { min-height: 36px !important; max-height: 36px !important; margin-bottom: 6px !important; }
    body.game-mode .game-stage:not(:fullscreen) .word-grid { margin-top: 4px !important; margin-bottom: 6px !important; gap: 5px !important; }

    body.game-mode .game-stage:not(:fullscreen) #wordGrid .letter-box {
        width: 28px !important;
        height: 36px !important;
        font-size: 1.15rem !important;
        border-width: 2px !important;
    }

    /* Zamanlayici daha kompakt olsun */
    body.game-mode .timer-badge {
        top: 50px !important;
        right: 8px !important;
        min-width: 66px !important;
        min-height: 54px !important;
        padding: 6px 8px !important;
        font-size: 1.05rem !important;
        border-radius: 10px !important;
    }
    body.game-mode .btn-freeze { font-size: 0.75rem !important; }
 
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard { width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: 8px 6px !important; gap: 4px !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key-row { gap: 2px !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key { height: 44px !important; font-size: 0.95rem !important; min-width: 0 !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.wide { flex: 1.6 1 0 !important; font-size: 0.75rem !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.key-enter { font-size: 0.72rem !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard { margin-top: 8px !important; min-height: 150px !important; }

    body.game-mode .question-area .hint-body { gap: 10px !important; }
    body.game-mode .question-area .hint-image { width: 96px !important; max-height: 72px !important; border-radius: 8px !important; }
    body.game-mode .question-area .hint-text { font-size: 1rem !important; line-height: 1.25 !important; max-height: 90px !important; }
}

/* 475px altinda klavye bosluklarini biraz azalt */
@media screen and (max-width: 475px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard { padding: 8px 6px !important; gap: 3px !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key-row { gap: 2px !important; }
}

/* Cinematic toast: sadece oyun alanini kaplasin (navbar etkilenmesin) */
body.game-mode #gameStage #cinematicToastOverlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 30000 !important; /* timer-badge/top-controls ustu */
    pointer-events: none !important;
}
body.game-mode #gameStage #cinematicToastOverlay.show { pointer-events: auto !important; }

/* Bulaniklik sadece buyuk kutuda */
body.game-mode #gameStage #cinematicToastBox {
    max-width: min(520px, 92%) !important;
    min-width: min(360px, 92%) !important;
    padding: 28px 32px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(13, 17, 23, 0.45) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.75) !important;
}

body.game-mode #gameStage #cinematicToastBox.success-toast {
    border-color: rgba(63, 185, 80, 0.95) !important;
    background: rgba(63, 185, 80, 0.12) !important;
}
body.game-mode #gameStage #cinematicToastBox.error-toast {
    border-color: rgba(248, 81, 73, 0.95) !important;
    background: rgba(248, 81, 73, 0.12) !important;
}
body.game-mode #gameStage #cinematicToastBox.timeout-toast {
    border-color: rgba(210, 153, 34, 0.95) !important;
    background: rgba(210, 153, 34, 0.12) !important;
}
body.game-mode #gameStage #cinematicToastBox.skip-toast {
    border-color: rgba(88, 166, 255, 0.95) !important;
    background: rgba(88, 166, 255, 0.12) !important;
}
body.game-mode #gameStage #cinematicToastBox.info-toast {
    border-color: rgba(88, 166, 255, 0.95) !important;
    background: rgba(88, 166, 255, 0.12) !important;
}
/* ==========================================================================
   MOBÄ°L KLAVYE VE ZAMANLAYICI OPTÄ°MÄ°ZASYONU (480px -> 450px -> 350px)
   ========================================================================== */

/* 1. ADIM: 480px ALTI (Genel Mobil DÃ¼zen) */
@media screen and (max-width: 480px) {
    /* Klavye Kutusu */
    .game-stage:not(:fullscreen) .keyboard {
        padding: 8px 4px !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* TuÅŸ SatÄ±rlarÄ± */
    .key-row {
        gap: 3px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* TuÅŸlar - EsnekleÅŸmeye BaÅŸlÄ±yor */
    .key {
        flex: 1 1 0 !important; /* EÅŸit daÄŸÄ±l ve kÃ¼Ã§Ã¼lmeye izin ver */
        min-width: 0 !important; /* Asla taÅŸma yapma */
        height: 48px !important;
        font-size: 1rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* GeniÅŸ TuÅŸlar (Enter/Sil) */
    .key.wide {
        flex: 1.5 1 0 !important; /* Normal tuÅŸun 1.5 katÄ± */
        font-size: 0.75rem !important;
    }

    /* --- ZAMANLAYICI AYARI (Ãœst Butonlardan Kurtar) --- */
    .timer-badge {
        position: absolute !important;
        top: 70px !important;  /* Ãœstteki butonlarÄ±n altÄ±na it */
        right: 10px !important;
        background-color: #161b22 !important; /* ArkasÄ± koyu renk (ÅŸeffaf deÄŸil) */
        border: 2px solid #d32f2f !important;
        z-index: 9999 !important; /* Her ÅŸeyin Ã¼stÃ¼nde */
        box-shadow: 0 4px 10px rgba(0,0,0,0.8) !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 5px 10px !important;
    }
}

/* 2. ADIM: 450px ALTI (Biraz daha sÄ±kÄ±ÅŸÄ±k) */
@media screen and (max-width: 450px) {
    .game-stage:not(:fullscreen) .keyboard {
        padding: 6px 2px !important;
        gap: 3px !important;
    }
    
    .key-row {
        gap: 2px !important; /* TuÅŸ arasÄ± boÅŸluÄŸu azalt */
    }
    
    .key {
        height: 44px !important; /* TuÅŸ boyunu kÄ±salt */
        font-size: 0.9rem !important; /* YazÄ±yÄ± kÃ¼Ã§Ã¼lt */
    }
    
    .key.wide {
        font-size: 0.7rem !important;
    }
}

/* 3. ADIM: 360px ALTI (iPhone SE, Galaxy Fold vb. - Kritik BÃ¶lge) */
@media screen and (max-width: 360px) {
    /* Klavye kenar boÅŸluklarÄ±nÄ± sÄ±fÄ±rla */
    .game-stage:not(:fullscreen) .keyboard {
        padding: 4px 1px !important; 
        gap: 2px !important;
    }
    
    /* TuÅŸlar birbirine yapÄ±ÅŸsÄ±n */
    .key-row {
        gap: 1px !important; 
    }
    
    /* TuÅŸlarÄ± Ä°yice KÃ¼Ã§Ã¼lt */
    .key {
        height: 38px !important;      /* Boyu kÄ±salttÄ±k */
        font-size: 0.8rem !important; /* Harfleri kÃ¼Ã§Ã¼lttÃ¼k */
        border-radius: 4px !important;
    }
    
    /* Enter ve Silme TuÅŸu TaÅŸmasÄ±n */
    .key.wide {
        flex: 1.3 1 0 !important;     /* GeniÅŸlik oranÄ±nÄ± biraz dÃ¼ÅŸÃ¼r */
        font-size: 0.6rem !important; /* YazÄ±yÄ± iyice kÃ¼Ã§Ã¼lt sÄ±ÄŸsÄ±n */
        padding: 0 2px !important;
    }
    
    /* Ä°konlarÄ± (Silme tuÅŸu oku vb.) kÃ¼Ã§Ã¼lt */
    .key i {
        font-size: 0.8rem !important;
    }

    /* ZamanlayÄ±cÄ±yÄ± da bu ekranda biraz kÃ¼Ã§Ã¼lt */
    .timer-badge {
        top: 65px !important;
        right: 5px !important;
        min-width: 60px !important;
        font-size: 0.9rem !important;
        padding: 4px !important;
    }
    
    .timer-badge i {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   BÃœYÃœK EKRANLAR Ä°Ã‡Ä°N "CTRL -" EFEKTÄ° (ZOOM OUT)
   ============================================================ */

@media screen and (min-width: 1024px) {
    /* Laptop ve MasaÃ¼stÃ¼ Ekranlar */
    .game-stage:not(:fullscreen) {
        /* Oyunu %90 boyutuna kÃ¼Ã§Ã¼lt */
        transform: scale(0.9) !important;
        
        /* KÃ¼Ã§Ã¼ltme iÅŸlemini Ã¼st-orta merkezli yap (yukarÄ± yapÄ±ÅŸÄ±k kalsÄ±n) */
        transform-origin: top center !important;
        
        /* KÃ¼Ã§Ã¼lÃ¼nce altta kalan boÅŸluÄŸu toparla */
        margin-bottom: -5% !important; 
        
        /* GeniÅŸliÄŸi biraz artÄ±r ki kÃ¼Ã§Ã¼lÃ¼nce Ã§ok dar kalmasÄ±n */
        width: 100% !important;
        max-width: 1200px !important; 
    }
}

@media screen and (min-width: 1600px) {
    /* Ã‡ok GeniÅŸ Ekranlar (Full HD ve Ã¼zeri) */
    .game-stage:not(:fullscreen) {
        /* Oyunu %85 boyutuna kÃ¼Ã§Ã¼lt (Daha da uzaklaÅŸtÄ±r) */
        transform: scale(0.85) !important;
        
        /* Maksimum geniÅŸliÄŸi biraz daha aÃ§ */
        max-width: 1400px !important;
    }
}

/* Tam ekran modunda kÃ¼Ã§Ã¼ltmeyi Ä°PTAL ET (EkranÄ± kaplasÄ±n) */
.game-stage:fullscreen {
    transform: scale(1) !important;
    width: 100vw !important;
    max-width: none !important;
}

/* ============================================================
   MOBÄ°L Ä°Ã‡Ä°N ZAMANLAYICI BOÅLUÄU (3 BUTONUN ÃœSTÃœ)
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Harf Al / Pas / Atla butonlarÄ±nÄ±n olduÄŸu kutu */
    .game-controls-area {
        /* ZamanlayÄ±cÄ±nÄ±n rahat sÄ±ÄŸmasÄ± iÃ§in Ã¼stten boÅŸluk bÄ±rak */
        margin-top: 50px !important; 
        
        /* EÄŸer butonlar Ã§ok sÄ±kÄ±ÅŸÄ±ksa altÄ±nÄ± da biraz aÃ§abilirsin */
        margin-bottom: 20px !important;
        
        /* GeÃ§iÅŸ yumuÅŸak olsun */
        transition: margin 0.3s ease;
    }

    /* EÄŸer skor tablosu (Scoreboard) varsa onunla Ã§akÄ±ÅŸmamasÄ± iÃ§in */
    .scoreboard {
        /* Skor tablosunu da azÄ±cÄ±k yukarÄ± itelim veya yer aÃ§alÄ±m */
        margin-bottom: 10px !important;
    }
}

/* ============================================================
   KESÄ°N Ã‡Ã–ZÃœM: TAÅMAYAN, EKRANA GÃ–RE KÃœÃ‡ÃœLEN KLAVYE
   ============================================================ */

@media screen and (max-width: 768px) {
    /* 1. KLAVYE KUTUSUNU TAM EKRANA YAY */
    .game-stage:not(:fullscreen) .keyboard {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 2px !important; /* Kenar boÅŸluklarÄ±nÄ± minimuma indir */
        box-sizing: border-box !important;
        overflow: hidden !important; /* TaÅŸma olursa gizle (ama olmayacak) */
    }

    /* 2. SATIRLARI DÃœZENLE */
    .game-stage:not(:fullscreen) .key-row {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important; /* Ortala */
        gap: 2px !important; /* TuÅŸlar arasÄ± boÅŸluk (Ã§ok az olsun) */
        margin-bottom: 3px !important;
    }

    /* 3. TUÅLARI OTOMATÄ°K KÃœÃ‡ÃœLT (SÄ°HÄ°RLÄ° KOD BURADA) */
    .game-stage:not(:fullscreen) .key {
        /* "flex: 1" tuÅŸlarÄ±n eÅŸit daÄŸÄ±lmasÄ±nÄ± saÄŸlar.
           "min-width: 0" tuÅŸun iÃ§eriÄŸi sÄ±ÄŸmasa bile kÃ¼Ã§Ã¼lmeye zorlar (taÅŸmayÄ± engeller) */
        flex: 1 1 0px !important; 
        min-width: 0 !important; 
        width: auto !important; 
        max-width: none !important;

        /* GÃ¶rÃ¼nÃ¼m AyarlarÄ± */
        height: 45px !important; 
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 4px !important;
        
        /* YazÄ± Boyutu: Ekran kÃ¼Ã§Ã¼ldÃ¼kÃ§e yazÄ± da otomatik kÃ¼Ã§Ã¼lÃ¼r (clamp fonksiyonu) */
        font-size: clamp(0.6rem, 2.5vw, 1.1rem) !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. ENTER VE SÄ°LME TUÅU (BÄ°RAZ DAHA GENÄ°Å) */
    .game-stage:not(:fullscreen) .key.wide {
        /* Normal tuÅŸlardan 1.5 kat daha geniÅŸ olsun ama o da sÄ±ÄŸsÄ±n */
        flex: 1.5 1 0px !important; 
        font-size: 0.6rem !important; /* Bu tuÅŸlarÄ±n yazÄ±sÄ± kÃ¼Ã§Ã¼k olsun */
        font-weight: 900 !important;
    }
}

/* ============================================================
   EKSTRA KÃœÃ‡ÃœK EKRANLAR (360px ve altÄ± - iPhone SE, Mini vb.)
   ============================================================ */
@media screen and (max-width: 360px) {
    .game-stage:not(:fullscreen) .key {
        height: 38px !important; /* TuÅŸ boyunu kÄ±salt */
        border-radius: 3px !important;
    }
    .game-stage:not(:fullscreen) .key-row {
        gap: 1px !important; /* BoÅŸluÄŸu neredeyse yok et */
    }
}

/* ============================================================
   ZAMANLAYICI Ä°Ã‡Ä°N 3 BUTONUN ÃœSTÃœNE BOÅLUK
   ============================================================ */
@media screen and (max-width: 768px) {
    .game-controls-area {
        margin-top: 60px !important; /* ButonlarÄ± aÅŸaÄŸÄ± it, timer'a yer aÃ§ */
    }
}
/* KELÄ°ME KUTUCUKLARI: KÃœÃ‡ÃœLME VE TEK SATIR GARANTÄ°SÄ° */
.word-grid {
    display: flex !important;
    flex-wrap: nowrap !important; /* KutularÄ±n alt satÄ±ra geÃ§mesini engeller */
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important; /* Kutular arasÄ± minimum boÅŸluk */
    width: 100% !important;
    max-width: 95% !important; /* EkranÄ±n kenarlarÄ±na yapÄ±ÅŸmasÄ±n */
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
}

.letter-box {
    /* Sihirli kod: flex-shrink ve flex-basis */
    flex: 1 1 0 !important; 
    min-width: 0 !important; /* Ä°Ã§erik ne olursa olsun kÃ¼Ã§Ã¼lmeye zorla */
    aspect-ratio: 1 / 1.2; /* Kutunun oranÄ±nÄ± koru */
    height: auto !important; /* YÃ¼ksekliÄŸi geniÅŸliÄŸe gÃ¶re ayarla */
    
    /* YazÄ± boyutunu kutu geniÅŸliÄŸine gÃ¶re dinamik yap */
    font-size: clamp(0.7rem, 4vw, 2rem) !important; 
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Mobil iÃ§in Ã¶zel ince ayar */
@media screen and (max-width: 480px) {
    .word-grid { gap: 2px !important; }
    .letter-box { border-width: 2px !important; }
}


/* KLAVYE: EKRANA GÃ–RE OTOMATÄ°K Ã–LÃ‡EKLENDÄ°RME */
@media screen and (max-width: 768px) {
    .keyboard {
        width: 100% !important;
        padding: 5px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }

    .key-row {
        gap: 2px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .key {
        flex: 1 1 0px !important; /* TuÅŸlar alanÄ± eÅŸit paylaÅŸÄ±r */
        min-width: 0 !important;
        height: clamp(35px, 10vw, 50px) !important; /* Ekran daraldÄ±kÃ§a boyu kÄ±salÄ±r */
        font-size: clamp(0.65rem, 3.5vw, 1.1rem) !important; /* Harfler kÃ¼Ã§Ã¼lÃ¼r */
        border-radius: 4px !important;
        margin: 0 !important;
    }

    /* Enter ve Silme TuÅŸu (OrantÄ±lÄ± GeniÅŸlik) */
    .key.wide {
        flex: 1.6 1 0px !important;
        font-size: clamp(0.55rem, 2.8vw, 0.85rem) !important;
    }
}

/* OYUN KUTUSU VE BEÄENÄ° ALANI ARASI BOÅLUK */
.social-interaction-area {
    margin-top: 60px !important; /* YaklaÅŸÄ±k 1-2 satÄ±rlÄ±k boÅŸluk */
    padding-top: 20px !important;
    border-top: 1px solid var(--border); /* Hafif bir ayraÃ§ Ã§izgisi (isteÄŸe baÄŸlÄ±) */
}

/* BeÄŸen butonu konteynÄ±rÄ± iÃ§in ek dÃ¼zenleme */
.like-container {
    margin-top: 10px !important;
    margin-bottom: 40px !important;
}

/* ============================================================ 
   1. HARF KUTUCUKLARI: KESÄ°N SABÄ°T FORM (UZAMA YAPMAZ)
   ============================================================ */
.word-grid {
    display: flex !important;
    flex-wrap: nowrap !important; /* Alt satÄ±ra geÃ§mez */
    justify-content: center !important; /* KutularÄ± merkeze toplar */
    align-items: center !important;
    gap: 8px !important; /* Kutular arasÄ± boÅŸluk */
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 10px 0 !important;
}

.letter-box {
    /* GENÄ°ÅLÄ°K VE YÃœKSEKLÄ°K: Buradaki deÄŸerler kutunun "normal" halidir */
    width: 45px !important; 
    height: 55px !important;
    
    /* ESNEKLÄ°ÄÄ° KAPAT: Bu satÄ±r kutunun yayÄ±lmasÄ±nÄ± veya bÃ¼zÃ¼lmesini engeller */
    flex: 0 0 45px !important; 
    
    /* GÃ–RSEL DÃœZEN */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #3c444d !important;
    border-radius: 8px !important;
    background-color: #21262d !important;
    color: white !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    box-sizing: border-box !important; /* Border'Ä±n geniÅŸliÄŸi etkilememesi iÃ§in */
}

/* BoÅŸluk (Space) Karakteri Ä°Ã§in */
.letter-box.space {
    width: 20px !important;
    flex: 0 0 20px !important;
    background: transparent !important;
    border: none !important;
}

/* ============================================================ 
   2. ALANLAR ARASI BOÅLUK (OYUN VE BEÄENÄ° BUTONU ARASI)
   ============================================================ */
.game-stage {
    margin-bottom: 80px !important; /* Oyun kutusu bittikten sonra 80px boÅŸluk bÄ±rakÄ±r */
}

/* ============================================================ 
   3. MOBÄ°L KLAVYE: TAÅMAYAN VE SADECE EKRANA SIÄAN YAPI
   ============================================================ */
@media screen and (max-width: 768px) {
    .keyboard {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    .key-row {
        display: flex !important;
        justify-content: center !important;
        gap: 3px !important;
        margin-bottom: 5px !important;
    }

    .key {
        /* Klavyede flex:1 olmasÄ± iyidir Ã§Ã¼nkÃ¼ ekranÄ± kaplamasÄ± gerekir */
        flex: 1 !important;
        min-width: 0 !important;
        height: 48px !important;
        font-size: clamp(0.8rem, 3.5vw, 1.1rem) !important;
        border-radius: 5px !important;
        padding: 0 !important;
    }

    .key.wide {
        flex: 1.6 !important;
    }

    /* Mobilde harf kutularÄ±nÄ± biraz kÃ¼Ã§Ã¼ltmek istersen (ekrana sÄ±ÄŸmasÄ± iÃ§in): */
    .letter-box {
        width: 38px !important;
        height: 48px !important;
        flex: 0 0 38px !important;
        font-size: 1.4rem !important;
    }
}

/* ============================================================ 
   1. HARF KUTUCUKLARI VE KLAVYEYÄ° YUKARI Ã‡EK
   ============================================================ */

/* Ana oyun alanÄ±ndaki elemanlarÄ± en Ã¼ste yaklaÅŸtÄ±rÄ±r */
#gameArea {
    justify-content: flex-start !important; /* ElemanlarÄ± aÅŸaÄŸÄ± itmez, baÅŸtan dizer */
    gap: 5px !important; /* Elemanlar arasÄ± genel boÅŸluÄŸu Ã§ok daraltÄ±r */
    padding-top: 5px !important;
}

/* Ä°pucu alanÄ± alt boÅŸluÄŸu */
.question-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Harf kutucuklarÄ± (Grid) yukarÄ± Ã§ekme */
.word-grid {
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Klavye ile arasÄ±ndaki mesafe */
}

/* Klavyeyi yukarÄ± Ã§ekme */
#keyboard, .keyboard {
    margin-top: 0 !important; /* Altta kalmasÄ±nÄ± saÄŸlayan auto boÅŸluÄŸu siler */
    margin-bottom: 10px !important;
}

/* ============================================================ 
   2. HARF KUTUCUKLARI: SABÄ°T BOYUT (HER MODDA AYNI)
   ============================================================ */
.letter-box {
    width: 50px !important; 
    height: 62px !important;
    flex: 0 0 50px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #3c444d !important;
    border-radius: 8px !important;
    background-color: #21262d !important;
    color: white !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

/* Tam ekran olsa bile boyut sabit kalÄ±r */
.game-stage:fullscreen .letter-box {
    width: 50px !important; 
    height: 62px !important;
    flex: 0 0 50px !important;
}

/* ============================================================ 
   3. ALANLAR ARASI BOÅLUK (OYUN VS BEÄENÄ° BUTONU)
   ============================================================ */
.game-stage {
    margin-bottom: 70px !important; /* Oyun kutusu bittikten sonra BeÄŸeni butonu iÃ§in boÅŸluk */
}

/* ============================================================ 
   4. MOBÄ°L UYUM
   ============================================================ */
@media screen and (max-width: 768px) {
    #gameArea { gap: 2px !important; }
    
    .letter-box {
        width: 38px !important;
        height: 50px !important;
        flex: 0 0 38px !important;
        font-size: 1.4rem !important;
    }
}

/* ============================================================ 
   ANA OYUN KUTUSUNU (STAGE) AÅAÄIYA DOÄRU UZAT
   ============================================================ */

.game-stage {
    /* Kutuyu aÅŸaÄŸÄ± doÄŸru uzatmak iÃ§in en az yÃ¼ksekliÄŸi artÄ±rdÄ±k */
    min-height: 660px !important; 
    
    /* Ä°Ã§eriklerin kutu iÃ§inde Ã§ok daÄŸÄ±lmamasÄ± iÃ§in Ã¼stte toplanmasÄ±nÄ± saÄŸlÄ±yoruz */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Tam ekran modunda kutu zaten tÃ¼m ekranÄ± kapladÄ±ÄŸÄ± iÃ§in boyutu sabittir */
.game-stage:fullscreen {
    height: 100vh !important;
    min-height: 100vh !important;
}

/* ============================================================ 
   MOBÄ°L Ä°Ã‡Ä°N UZUNLUK AYARI (TELEFONDA DAHA UZUN GÃ–RÃœNSÃœN)
   ============================================================ */
@media screen and (max-width: 768px) {
    .game-stage:not(:fullscreen) {
        /* Mobilde de kutuyu aÅŸaÄŸÄ± doÄŸru biraz daha esnetiyoruz */
        min-height: 720px !important; 
    }
}

/* BeÄŸeni butonuyla olan o istediÄŸin boÅŸluÄŸu korumak iÃ§in */
.game-stage {
    margin-bottom: 60px !important;
}

/* ============================================================ 
   MOBÄ°L KLAVYE TUÅLARINI KÃœÃ‡ÃœLTME (TELEFON MODU)
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Klavye kutusunun iÃ§ boÅŸluklarÄ±nÄ± daraltalÄ±m */
    .game-stage:not(:fullscreen) .keyboard {
        padding: 6px 4px !important;
        gap: 3px !important; /* SatÄ±rlar arasÄ± boÅŸluÄŸu azalttÄ±k */
    }

    /* TuÅŸ satÄ±rlarÄ± arasÄ± boÅŸluk */
    .key-row {
        gap: 2px !important;
    }

    /* TUÅ BOYUTLARINI KÃœÃ‡ÃœLTME */
    .key {
        height: 38px !important;     /* TuÅŸ yÃ¼ksekliÄŸini 44-48px'den 38px'e Ã§ektik */
        font-size: 0.85rem !important; /* YazÄ± boyutunu azÄ±cÄ±k kÃ¼Ã§Ã¼lttÃ¼k */
        border-radius: 4px !important; /* Daha keskin/zarif kÃ¶ÅŸeler */
        flex: 1 1 0 !important;      /* TuÅŸlarÄ±n geniÅŸliÄŸini esnek ama dengeli tutar */
    }

    /* Enter ve Silme tuÅŸlarÄ± (YazÄ±larÄ± sÄ±ÄŸsÄ±n diye ayar) */
    .key.wide {
        flex: 1.4 1 0 !important;
        font-size: 0.65rem !important; /* ENTER ve SÄ°L yazÄ±larÄ± daha kÃ¼Ã§Ã¼k ve sÄ±ÄŸar */
        font-weight: 900 !important;
    }

    /* Silme ikonu varsa onu da kÃ¼Ã§Ã¼ltelim */
    .key i {
        font-size: 0.8rem !important;
    }
}

/* ============================================================ 
   Ã–NCEKÄ° AYARLARI KORU (FORM BOZULMAMASI Ä°Ã‡Ä°N)
   ============================================================ */
.letter-box {
    width: 50px !important; 
    height: 62px !important;
    flex: 0 0 50px !important;
}

@media screen and (max-width: 768px) {
    .letter-box {
        width: 38px !important;
        height: 50px !important;
        flex: 0 0 38px !important;
    }
}

/* ============================================================ 
   500PX - 300PX ARASI HASSAS KADEMELÄ° KLAVYE TUÅU KÃœÃ‡ÃœLTME
   ============================================================ */

/* 500px AdÄ±mÄ± */
@media screen and (max-width: 500px) {
    .letter-box { width: 45px !important; height: 58px !important; font-size: 1.6rem !important; flex: 0 1 auto !important; }
    .key { height: 36px !important; font-size: 0.9rem !important; }
    .keyboard { gap: 4px !important; padding: 5px !important; }
}

/* 490px AdÄ±mÄ± */
@media screen and (max-width: 490px) {
    .letter-box { width: 44px !important; height: 57px !important; font-size: 1.55rem !important; }
    .key { height: 35px !important; font-size: 0.88rem !important; }
}

/* 480px AdÄ±mÄ± */
@media screen and (max-width: 480px) {
    .letter-box { width: 43px !important; height: 56px !important; font-size: 1.5rem !important; }
    .key { height: 34px !important; font-size: 0.86rem !important; }
}

/* 470px AdÄ±mÄ± */
@media screen and (max-width: 470px) {
    .letter-box { width: 42px !important; height: 55px !important; font-size: 1.45rem !important; }
    .key { height: 33px !important; font-size: 0.84rem !important; }
}

/* 460px AdÄ±mÄ± */
@media screen and (max-width: 460px) {
    .letter-box { width: 41px !important; height: 54px !important; font-size: 1.4rem !important; }
    .key { height: 32px !important; font-size: 0.82rem !important; }
}

/* 450px AdÄ±mÄ± */
@media screen and (max-width: 450px) {
    .letter-box { width: 40px !important; height: 53px !important; font-size: 1.35rem !important; }
    .key { height: 31px !important; font-size: 0.80rem !important; }
}

/* 440px AdÄ±mÄ± */
@media screen and (max-width: 440px) {
    .letter-box { width: 39px !important; height: 52px !important; font-size: 1.3rem !important; }
    .key { height: 30px !important; font-size: 0.78rem !important; }
}

/* 430px AdÄ±mÄ± */
@media screen and (max-width: 430px) {
    .letter-box { width: 38px !important; height: 51px !important; font-size: 1.25rem !important; }
    .key { height: 29px !important; font-size: 0.76rem !important; }
}

/* 420px AdÄ±mÄ± */
@media screen and (max-width: 420px) {
    .letter-box { width: 37px !important; height: 50px !important; font-size: 1.2rem !important; }
    .key { height: 28px !important; font-size: 0.74rem !important; }
}

/* 410px AdÄ±mÄ± */
@media screen and (max-width: 410px) {
    .letter-box { width: 36px !important; height: 49px !important; font-size: 1.15rem !important; }
    .key { height: 27px !important; font-size: 0.72rem !important; }
}

/* 400px AdÄ±mÄ± */
@media screen and (max-width: 400px) {
    .letter-box { width: 35px !important; height: 48px !important; font-size: 1.1rem !important; }
    .key { height: 26px !important; font-size: 0.70rem !important; }
}

/* 390px AdÄ±mÄ± */
@media screen and (max-width: 390px) {
    .letter-box { width: 34px !important; height: 47px !important; font-size: 1.05rem !important; }
    .key { height: 26px !important; font-size: 0.68rem !important; }
}

/* 380px AdÄ±mÄ± */
@media screen and (max-width: 380px) {
    .letter-box { width: 33px !important; height: 46px !important; font-size: 1rem !important; }
    .key { height: 25px !important; font-size: 0.66rem !important; }
}

/* 370px AdÄ±mÄ± */
@media screen and (max-width: 370px) {
    .letter-box { width: 32px !important; height: 45px !important; font-size: 0.98rem !important; }
    .key { height: 25px !important; font-size: 0.64rem !important; }
}

/* 360px AdÄ±mÄ± */
@media screen and (max-width: 360px) {
    .letter-box { width: 31px !important; height: 43px !important; font-size: 0.95rem !important; }
    .key { height: 24px !important; font-size: 0.62rem !important; }
}

/* 350px AdÄ±mÄ± */
@media screen and (max-width: 350px) {
    .letter-box { width: 30px !important; height: 41px !important; font-size: 0.93rem !important; }
    .key { height: 24px !important; font-size: 0.60rem !important; }
}

/* 340px AdÄ±mÄ± */
@media screen and (max-width: 340px) {
    .letter-box { width: 29px !important; height: 39px !important; font-size: 0.91rem !important; }
    .key { height: 23px !important; font-size: 0.58rem !important; }
}

/* 330px AdÄ±mÄ± */
@media screen and (max-width: 330px) {
    .letter-box { width: 28px !important; height: 38px !important; font-size: 0.9rem !important; }
    .key { height: 23px !important; font-size: 0.56rem !important; }
}

/* 320px AdÄ±mÄ± */
@media screen and (max-width: 320px) {
    .letter-box { width: 27px !important; height: 37px !important; font-size: 0.88rem !important; }
    .key { height: 22px !important; font-size: 0.54rem !important; }
}

/* 310px AdÄ±mÄ± */
@media screen and (max-width: 310px) {
    .letter-box { width: 26px !important; height: 36px !important; font-size: 0.85rem !important; }
    .key { height: 22px !important; font-size: 0.52rem !important; }
}

/* 300px ve AltÄ± AdÄ±mÄ± */
@media screen and (max-width: 300px) {
    .letter-box { width: 25px !important; height: 35px !important; font-size: 0.8rem !important; }
    .key { height: 21px !important; font-size: 0.50rem !important; }
}

/* TuÅŸlar arasÄ±ndaki boÅŸluÄŸu ve satÄ±r mesafesini de kÃ¼Ã§Ã¼ltelim ki iyice daralsÄ±n */
.key-row { gap: 2px !important; margin-bottom: 3px !important; }
.keyboard { gap: 2px !important; }

/* ============================================================ 
   KLAVYE KENAR HÄ°ZALAMA SÄ°STEMÄ° (PERFECT ALIGNMENT)
   ============================================================ */

/* 1. Klavye Ana Kutusu */
.keyboard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 800px !important; /* MasaÃ¼stÃ¼nde Ã§ok yayÄ±lmasÄ±n */
    margin: 10px auto !important;
    padding: 10px !important;
    background-color: #0d1117 !important;
    border: 2px solid #30363d !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* 2. SatÄ±r DÃ¼zeni */
.key-row {
    display: flex !important;
    width: 100% !important; /* SatÄ±rÄ± tam geniÅŸlet */
    justify-content: center !important;
    gap: 4px !important; /* TuÅŸlar arasÄ± boÅŸluk */
    margin-bottom: 6px !important;
}

/* 3. Genel TuÅŸ YapÄ±sÄ± */
.key {
    /* Sihirli Kod: Flex-grow ve Flex-basis */
    flex: 1 1 0 !important; /* TÃ¼m harf tuÅŸlarÄ± eÅŸit bÃ¼yÃ¼r */
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #484f58 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 1.1rem !important;
}

/* 4. SÄ°LME TUÅU (Backspace) - 2. SatÄ±rda */
/* 2. satÄ±rda 11 harf + 1 silme var. Silme tuÅŸunu 1 harf geniÅŸliÄŸine sabitlersek kenarlar hizalanÄ±r. */
.key-backspace {
    flex: 1 1 0 !important; /* Harflerle aynÄ± geniÅŸlikte */
    background-color: #3b434b !important;
}

/* 5. ENTER TUÅU - 3. SatÄ±rda */
/* 3. satÄ±rda 9 harf var. KenarlarÄ±n hizalanmasÄ± iÃ§in Enter tuÅŸu 3 harf geniÅŸliÄŸinde olmalÄ± (9+3=12) */
.key-enter {
    flex: 3 1 0 !important; /* 3 kat geniÅŸlik vererek saÄŸ kenarÄ± 1. satÄ±ra kilitler */
    background-color: #2ea043 !important; /* YeÅŸil Enter */
    font-size: 0.9rem !important;
}

/* --- MOBÄ°L Ä°NCE AYARLAR --- */
@media screen and (max-width: 768px) {
    .keyboard {
        padding: 5px !important;
        gap: 3px !important;
    }
    
    .key-row {
        gap: 3px !important;
    }

    .key {
        height: 44px !important;
        font-size: 0.95rem !important;
    }

    .key-enter {
        font-size: 0.75rem !important;
    }
}

/* --- TAM EKRAN MODUNDA KLAVYE --- */
.game-stage:fullscreen .key {
    height: 60px !important;
    font-size: 1.4rem !important;
}   

/* ============================================================ 
   KESÄ°N GARANTÄ° MOBÄ°L KLAVYE SIKIÅTIRMA (510px ALTI)
   TuÅŸlar asla taÅŸmaz, ekran kÃ¼Ã§Ã¼ldÃ¼kÃ§e preslenir.
   ============================================================ */

@media screen and (max-width: 510px) {
    /* 1. ANA KUTUYU EKRANA YAPIÅTIR */
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 2px !important; /* Kenar boÅŸluÄŸu minimum */
        box-sizing: border-box !important;
        gap: 4px !important; /* SatÄ±rlar arasÄ± boÅŸluk */
        overflow: hidden !important; /* TaÅŸma olursa gizle (olmayacak ama Ã¶nlem) */
    }

    /* 2. SATIRLARI TAM GENÄ°ÅLÄ°ÄE YAY */
    .key-row {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 3px !important; /* Yan yana tuÅŸlar arasÄ± 3px boÅŸluk */
        margin: 0 !important;
    }

    /* 3. TUÅLARI ZORLA SIKIÅTIR (SÄ°HÄ°RLÄ° KOD) */
    .key {
        /* "flex: 1 1 0px" -> TuÅŸlara eÅŸit alan ver ve 0px'den baÅŸlayarak bÃ¼yÃ¼t.
           "min-width: 0" -> Ä°Ã§indeki harf sÄ±ÄŸmasa bile kutuyu kÃ¼Ã§Ã¼ltmeye zorlar. */
        flex: 1 1 0px !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;

        /* GÃ¶rÃ¼nÃ¼m AyarlarÄ± */
        height: 45px !important; /* YÃ¼kseklik */
        padding: 0 !important;   /* Ä°Ã§ boÅŸluk yok */
        margin: 0 !important;    /* DÄ±ÅŸ boÅŸluk yok */
        
        /* YazÄ± Boyutu: Ekran kÃ¼Ã§Ã¼ldÃ¼kÃ§e yazÄ± da kÃ¼Ã§Ã¼lÃ¼r */
        font-size: clamp(0.75rem, 4vw, 1.1rem) !important;
        border-radius: 4px !important;
    }

    /* 4. ENTER ve SÄ°LME TUÅLARI (ORANTILI GENÄ°ÅLÄ°K) */
    .key.wide {
        flex: 1.5 1 0px !important; /* Normal tuÅŸtan 1.5 kat geniÅŸ */
        font-size: clamp(0.6rem, 3vw, 0.8rem) !important; /* YazÄ±sÄ± daha kÃ¼Ã§Ã¼k */
        font-weight: 800 !important;
    }

    /* Ä°konlarÄ± hizala */
    .key i { font-size: 1rem !important; }
}

/* ============================================================ 
   EKSTRA KÃœÃ‡ÃœK EKRANLAR (360px ALTI - iPhone SE, Mini vb.)
   Burada boÅŸluklarÄ± neredeyse sÄ±fÄ±rlÄ±yoruz.
   ============================================================ */
@media screen and (max-width: 360px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        padding: 2px 1px !important;
        gap: 2px !important;
    }

    .key-row { gap: 2px !important; } /* BoÅŸluk 2px'e indi */

    .key {
        height: 40px !important; /* Boyu kÄ±salttÄ±k */
        font-size: 0.8rem !important; /* YazÄ±yÄ± kÃ¼Ã§Ã¼lttÃ¼k */
        border-radius: 3px !important;
    }
}

/* ============================================================ 
   MOBÄ°L HARF KUTUCUKLARI (SABÄ°T Ä°DEAL BOYUT)
   Tam ekranda devleÅŸmez, normalde kÃ¼Ã§Ã¼lmez.
   ============================================================ */
@media screen and (max-width: 768px) {
    /* Grid AyarÄ±: KutularÄ± ortala ve sÄ±kÄ±ÅŸtÄ±r */
    .word-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 10px auto !important;
    }

    /* Kutucuk AyarÄ±: Boyutu Kilitle */
    .game-stage:not(:fullscreen) .letter-box, 
    .game-stage:fullscreen .letter-box,
    .letter-box {
        /* Ä°deal Mobil Boyut */
        width: 40px !important;
        height: 50px !important;
        
        /* Esnemeyi ve bÃ¼zÃ¼ÅŸmeyi engelle */
        flex: 0 0 40px !important;
        
        /* YazÄ± ve KenarlÄ±k */
        font-size: 1.5rem !important;
        border: 2px solid #3c444d !important;
        border-radius: 6px !important;
    }
}

/* Ã‡ok kÃ¼Ã§Ã¼k ekranlarda (350px altÄ±) kutular sÄ±ÄŸmazsa hafif kÃ¼Ã§Ã¼lt */
@media screen and (max-width: 350px) {
    .game-stage:not(:fullscreen) .letter-box, 
    .game-stage:fullscreen .letter-box {
        width: 34px !important;
        height: 44px !important;
        flex: 0 0 34px !important;
        font-size: 1.2rem !important;
    }
}    

/* KESÄ°N GARANTÄ° MOBÄ°L KLAVYE SIKIÅTIRMA */
@media screen and (max-width: 768px) {
    /* 1. Klavye Kutusunu Ekrana SÄ±ÄŸdÄ±r */
    .game-stage:not(:fullscreen) .keyboard, .game-stage:fullscreen .keyboard {
        width: 100% !important; 
        padding: 5px 2px !important; 
        box-sizing: border-box !important;
    }

    /* 2. SatÄ±rlarÄ± Tam GeniÅŸliÄŸe Yay ve BoÅŸluÄŸu Azalt */
    .key-row {
        display: flex !important; 
        width: 100% !important; 
        gap: 2px !important; 
        margin: 0 0 3px 0 !important;
    }

    /* 3. TuÅŸlarÄ± Zorla Ez ve SÄ±ÄŸdÄ±r (SÄ°HÄ°RLÄ° KOD) */
    .key {
        flex: 1 1 0 !important; /* TuÅŸlarÄ± eÅŸit daÄŸÄ±t ve sÄ±kÄ±ÅŸtÄ±r */
        min-width: 0 !important; /* Ä°Ã§erik sÄ±ÄŸmasa bile kÃ¼Ã§Ã¼lmeye zorla (TaÅŸmayÄ± Ã¶nler) */
        height: 42px !important; 
        font-size: clamp(0.7rem, 3.5vw, 1.1rem) !important; /* YazÄ±yÄ± ekrana gÃ¶re ayarla */
        padding: 0 !important; margin: 0 !important;
    }

    /* 4. Enter ve Silme TuÅŸu OranÄ± */
    .key.wide { flex: 1.5 1 0 !important; font-size: 0.65rem !important; }
}
/* ============================================================
   BÃœYÃœK EKRANLAR Ä°Ã‡Ä°N OTOMATÄ°K KÃœÃ‡ÃœLTME (ZOOM OUT EFEKTÄ°)
   AkÄ±llÄ± Tahta, ProjektÃ¶r ve GeniÅŸ MonitÃ¶rler Ä°Ã§in
   ============================================================ */

/* 1. LAPTOP VE MASAÃœSTÃœ EKRANLAR (1024px - 1599px) */
@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .game-stage:not(:fullscreen) {
        /* Oyunu %90 boyutuna kÃ¼Ã§Ã¼lt */
        transform: scale(0.9) !important;
        
        /* KÃ¼Ã§Ã¼ltme merkezini Ã¼st-orta yap (yukarÄ± yapÄ±ÅŸÄ±k kalsÄ±n) */
        transform-origin: top center !important;
        
        /* KÃ¼Ã§Ã¼lÃ¼nce altta kalan boÅŸluÄŸu toparla */
        margin-bottom: -8% !important;
        
        /* GeÃ§iÅŸ efekti */
        transition: transform 0.3s ease !important;
    }
}

/* 2. BÃœYÃœK MASAÃœSTÃœ EKRANLAR (1600px - 1919px) */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
    .game-stage:not(:fullscreen) {
        /* Oyunu %85 boyutuna kÃ¼Ã§Ã¼lt */
        transform: scale(0.85) !important;
        transform-origin: top center !important;
        margin-bottom: -12% !important;
        transition: transform 0.3s ease !important;
    }
}

/* 3. Ã‡OK BÃœYÃœK EKRANLAR (1920px - 2559px) - Full HD ve Ãœzeri */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    .game-stage:not(:fullscreen) {
        /* Oyunu %80 boyutuna kÃ¼Ã§Ã¼lt */
        transform: scale(0.80) !important;
        transform-origin: top center !important;
        margin-bottom: -15% !important;
        transition: transform 0.3s ease !important;
    }
}

/* 4. DEV EKRANLAR (2560px ve Ã¼zeri) - 4K, AkÄ±llÄ± Tahta */
@media screen and (min-width: 2560px) {
    .game-stage:not(:fullscreen) {
        /* Oyunu %75 boyutuna kÃ¼Ã§Ã¼lt */
        transform: scale(0.75) !important;
        transform-origin: top center !important;
        margin-bottom: -20% !important;
        transition: transform 0.3s ease !important;
    }
}

/* 5. KISA EKRANLAR Ä°Ã‡Ä°N EK KÃœÃ‡ÃœLTME (YÃ¼kseklik 800px altÄ±) */
@media screen and (min-width: 1024px) and (max-height: 800px) {
    .game-stage:not(:fullscreen) {
        /* KÄ±sa ekranlarda biraz daha kÃ¼Ã§Ã¼lt */
        transform: scale(0.85) !important;
        margin-bottom: -10% !important;
    }
}

@media screen and (min-width: 1024px) and (max-height: 720px) {
    .game-stage:not(:fullscreen) {
        /* Ã‡ok kÄ±sa ekranlarda iyice kÃ¼Ã§Ã¼lt */
        transform: scale(0.80) !important;
        margin-bottom: -12% !important;
    }
}

/* 6. TAM EKRAN MODUNDA KÃœÃ‡ÃœLTME Ä°PTAL */
.game-stage:fullscreen {
    /* Tam ekranda normal boyuta dÃ¶n */
    transform: scale(1) !important;
    transform-origin: center center !important;
    margin-bottom: 0 !important;
}

/* 7. MOBÄ°L VE TABLET Ä°Ã‡Ä°N KÃœÃ‡ÃœLTME Ä°PTAL (768px ve altÄ±) */
@media screen and (max-width: 768px) {
    .game-stage {
        /* Mobilde kÃ¼Ã§Ã¼ltme yapma, responsive layout kullansÄ±n */
        transform: none !important;
        margin-bottom: 60px !important; /* Sadece beÄŸeni butonu iÃ§in boÅŸluk */
    }
}

/* 8. TABLET Ä°Ã‡Ä°N HAFIF KÃœÃ‡ÃœLTME (769px - 1023px) */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    .game-stage:not(:fullscreen) {
        /* Tablette hafif kÃ¼Ã§Ã¼lt */
        transform: scale(0.92) !important;
        transform-origin: top center !important;
        margin-bottom: -5% !important;
    }
}

/* ============================================================ 
   MOBÄ°L KLAVYE - ORTALANMIÅ VE DENGELÄ° KÃœÃ‡ÃœLTME
   KenarlarÄ± biraz geniÅŸletildi, tÃ¼m tuÅŸlar gÃ¶zÃ¼kecek
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Klavye KapsayÄ±cÄ±sÄ± - Dengeli KÃ¼Ã§Ã¼ltme */
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.85) !important; /* %85 boyutuna kÃ¼Ã§Ã¼lt (daha az) */
        transform-origin: center center !important;
        
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 12px 8px !important; /* Kenar boÅŸluÄŸu biraz artÄ±rÄ±ldÄ± */
        box-sizing: border-box !important;
        
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* SatÄ±rlar */
    .key-row {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 5px !important; /* TuÅŸlar arasÄ± boÅŸluk artÄ±rÄ±ldÄ± */
        margin-bottom: 6px !important;
    }

    /* TuÅŸlar */
    .key {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Enter ve Silme TuÅŸlarÄ± */
    .key.wide {
        flex: 1.5 1 0 !important;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
    }

    /* Ä°konlar */
    .key i {
        font-size: 1rem !important;
    }
}

/* ============================================================ 
   KÃœÃ‡ÃœK TELEFONLAR (500px ve altÄ±)
   ============================================================ */

@media screen and (max-width: 500px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.80) !important; /* %80 boyutuna kÃ¼Ã§Ã¼lt */
        padding: 10px 6px !important;
    }

    .key-row {
        gap: 4px !important;
    }
}

/* ============================================================ 
   DAHA KÃœÃ‡ÃœK TELEFONLAR (420px ve altÄ±)
   ============================================================ */

@media screen and (max-width: 420px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.75) !important; /* %75 boyutuna kÃ¼Ã§Ã¼lt */
        padding: 8px 4px !important;
    }

    .key-row {
        gap: 3px !important;
    }
}

/* ============================================================ 
   Ã‡OK KÃœÃ‡ÃœK EKRANLAR (360px ve altÄ± - iPhone SE)
   ============================================================ */

@media screen and (max-width: 360px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.70) !important; /* %70 boyutuna kÃ¼Ã§Ã¼lt */
        padding: 6px 3px !important;
    }

    .key-row {
        gap: 2px !important;
    }
}

/* ============================================================ 
   HARF KUTUCUKLARI - WRAP VE OTOMATÄ°K KÃœÃ‡ÃœLME
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Grid DÃ¼zeni */
    .word-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 95% !important;
        margin: 12px auto !important;
        padding: 5px !important;
    }

    /* Harf KutularÄ± - BaÅŸlangÄ±Ã§ Boyutu */
    .letter-box {
        width: 40px !important;
        height: 50px !important;
        flex: 0 0 40px !important;
        
        font-size: 1.5rem !important;
        border: 2px solid #3c444d !important;
        border-radius: 6px !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* BoÅŸluk */
    .letter-box.space {
        width: 16px !important;
        flex: 0 0 16px !important;
        background: transparent !important;
        border: none !important;
    }

    /* 15+ Harf: KÃ¼Ã§Ã¼lt */
    .word-grid:has(.letter-box:nth-child(15):not(.space)) .letter-box:not(.space) {
        width: 34px !important;
        height: 44px !important;
        flex: 0 0 34px !important;
        font-size: 1.3rem !important;
    }

    /* 20+ Harf: Daha da KÃ¼Ã§Ã¼lt */
    .word-grid:has(.letter-box:nth-child(20):not(.space)) .letter-box:not(.space) {
        width: 30px !important;
        height: 40px !important;
        flex: 0 0 30px !important;
        font-size: 1.2rem !important;
    }

    /* 25+ Harf: Minimum Boyut */
    .word-grid:has(.letter-box:nth-child(25):not(.space)) .letter-box:not(.space) {
        width: 26px !important;
        height: 36px !important;
        flex: 0 0 26px !important;
        font-size: 1.1rem !important;
    }
}

/* KÃ¼Ã§Ã¼k Ekranlarda Harf KutularÄ± */
@media screen and (max-width: 500px) {
    .letter-box {
        width: 36px !important;
        height: 46px !important;
        flex: 0 0 36px !important;
        font-size: 1.4rem !important;
    }
}

@media screen and (max-width: 420px) {
    .letter-box {
        width: 32px !important;
        height: 42px !important;
        flex: 0 0 32px !important;
        font-size: 1.3rem !important;
    }
}

@media screen and (max-width: 360px) {
    .letter-box {
        width: 28px !important;
        height: 38px !important;
        flex: 0 0 28px !important;
        font-size: 1.2rem !important;
    }
}


/* ============================================================ 
   MOBÄ°L KLAVYE - ORTALANMIÅ VE DENGELÄ° KÃœÃ‡ÃœLTME
   KenarlarÄ± biraz geniÅŸletildi, tÃ¼m tuÅŸlar gÃ¶zÃ¼kecek
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Klavye KapsayÄ±cÄ±sÄ± - Dengeli KÃ¼Ã§Ã¼ltme */
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.85) !important; /* %85 boyutuna kÃ¼Ã§Ã¼lt (daha az) */
        transform-origin: center center !important;
        
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 12px 8px !important; /* Kenar boÅŸluÄŸu biraz artÄ±rÄ±ldÄ± */
        box-sizing: border-box !important;
        
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* SatÄ±rlar */
    .key-row {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 5px !important; /* TuÅŸlar arasÄ± boÅŸluk artÄ±rÄ±ldÄ± */
        margin-bottom: 6px !important;
    }

    /* TuÅŸlar */
    .key {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Enter ve Silme TuÅŸlarÄ± */
    .key.wide {
        flex: 1.5 1 0 !important;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
    }

    /* Ä°konlar */
    .key i {
        font-size: 1rem !important;
    }
}

/* ============================================================ 
   KÃœÃ‡ÃœK TELEFONLAR (500px ve altÄ±)
   ============================================================ */

@media screen and (max-width: 500px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.80) !important; /* %80 boyutuna kÃ¼Ã§Ã¼lt */
        padding: 10px 6px !important;
    }

    .key-row {
        gap: 4px !important;
    }
}

/* ============================================================ 
   DAHA KÃœÃ‡ÃœK TELEFONLAR (420px ve altÄ±)
   ============================================================ */

@media screen and (max-width: 420px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.75) !important; /* %75 boyutuna kÃ¼Ã§Ã¼lt */
        padding: 8px 4px !important;
    }

    .key-row {
        gap: 3px !important;
    }
}

/* ============================================================ 
   Ã‡OK KÃœÃ‡ÃœK EKRANLAR (360px ve altÄ± - iPhone SE)
   ============================================================ */

@media screen and (max-width: 360px) {
    .game-stage:not(:fullscreen) .keyboard, 
    .game-stage:fullscreen .keyboard {
        transform: scale(0.70) !important; /* %70 boyutuna kÃ¼Ã§Ã¼lt */
        padding: 6px 3px !important;
    }

    .key-row {
        gap: 2px !important;
    }
}

/* ============================================================ 
   HARF KUTUCUKLARI - WRAP VE OTOMATÄ°K KÃœÃ‡ÃœLME
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Grid DÃ¼zeni */
    .word-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 95% !important;
        margin: 12px auto !important;
        padding: 5px !important;
    }

    /* Harf KutularÄ± - BaÅŸlangÄ±Ã§ Boyutu */
    .letter-box {
        width: 40px !important;
        height: 50px !important;
        flex: 0 0 40px !important;
        
        font-size: 1.5rem !important;
        border: 2px solid #3c444d !important;
        border-radius: 6px !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* BoÅŸluk */
    .letter-box.space {
        width: 16px !important;
        flex: 0 0 16px !important;
        background: transparent !important;
        border: none !important;
    }

    /* 15+ Harf: KÃ¼Ã§Ã¼lt */
    .word-grid:has(.letter-box:nth-child(15):not(.space)) .letter-box:not(.space) {
        width: 34px !important;
        height: 44px !important;
        flex: 0 0 34px !important;
        font-size: 1.3rem !important;
    }

    /* 20+ Harf: Daha da KÃ¼Ã§Ã¼lt */
    .word-grid:has(.letter-box:nth-child(20):not(.space)) .letter-box:not(.space) {
        width: 30px !important;
        height: 40px !important;
        flex: 0 0 30px !important;
        font-size: 1.2rem !important;
    }

    /* 25+ Harf: Minimum Boyut */
    .word-grid:has(.letter-box:nth-child(25):not(.space)) .letter-box:not(.space) {
        width: 26px !important;
        height: 36px !important;
        flex: 0 0 26px !important;
        font-size: 1.1rem !important;
    }
}

/* KÃ¼Ã§Ã¼k Ekranlarda Harf KutularÄ± */
@media screen and (max-width: 500px) {
    .letter-box {
        width: 36px !important;
        height: 46px !important;
        flex: 0 0 36px !important;
        font-size: 1.4rem !important;
    }
}

@media screen and (max-width: 420px) {
    .letter-box {
        width: 32px !important;
        height: 42px !important;
        flex: 0 0 32px !important;
        font-size: 1.3rem !important;
    }
}

@media screen and (max-width: 360px) {
    .letter-box {
        width: 28px !important;
        height: 38px !important;
        flex: 0 0 28px !important;
        font-size: 1.2rem !important;
    }
}
/* HARF KUTUCUKLARI - ALTA 1 SATIRLIK BOÅLUK (HARF Ä°PUCU Ä°Ã‡Ä°N) */

/* Genel (Bilgisayar dahil tÃ¼m cihazlar) */
.word-grid {
    margin-bottom: 50px !important; /* Grid'in altÄ±na 1 satÄ±rlÄ±k boÅŸluk */
}

/* Mobil Ã¶zel ayar */
@media screen and (max-width: 768px) {
    .word-grid {
        margin-bottom: 45px !important;
    }
}

@media screen and (max-width: 500px) {
    .word-grid {
        margin-bottom: 40px !important;
    }
}

/* Ä°pucu harfi stil dÃ¼zeltmesi (kutu altÄ±nda gÃ¶sterilir) */
.letter-box.show-hint::after {
    position: absolute !important;
    bottom: -22px !important; /* Kutu altÄ±na 22px boÅŸlukla yerleÅŸtir */
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 1.1rem !important;
    color: #58a6ff !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

@media screen and (max-width: 768px) {
    .letter-box.show-hint::after {
        bottom: -20px !important;
        font-size: 1rem !important;
    }
}

@media screen and (max-width: 500px) {
    .letter-box.show-hint::after {
        bottom: -18px !important;
        font-size: 0.9rem !important;
    }
}
/* BÄ°LGÄ°SAYAR KLAVYE - HAFIF KÃœÃ‡ÃœLTME */
@media screen and (min-width: 769px) {
    .game-stage:not(:fullscreen) .keyboard {
        transform: scale(0.90) !important; /* biraz daha kÃ¼Ã§Ã¼lt (altta kesilmesin) */
        transform-origin: top center !important;
    }
}

/* Tam ekranda normal boyut */
.game-stage:fullscreen .keyboard {
    transform: scale(1) !important;
}
/* HARF GRÄ°D VE KLAVYE ARASI BOÅLUK DÃœZELTMESÄ° */

/* Harf grid'inin altÄ±na boÅŸluk (ipucu harfi iÃ§in) */
.word-grid {
    margin-bottom: 35px !important; /* 50px'ten 35px'e dÃ¼ÅŸÃ¼rdÃ¼k */
}

/* Klavyenin Ã¼stÃ¼ne negatif margin (yukarÄ± Ã§ek) */
.keyboard {
    margin-top: -10px !important; /* Klavyeyi 10px yukarÄ± Ã§ek */
}

/* Mobil iÃ§in */
@media screen and (max-width: 768px) {
    .word-grid {
        margin-bottom: 30px !important;
    }
    
    .keyboard {
        margin-top: -5px !important;
    }
}

@media screen and (max-width: 500px) {
    .word-grid {
        margin-bottom: 25px !important;
    }
}

/* -------------------------------------------------------------------------- */
/* PLAY GAME: 441px altÄ± klavye + ipucu katmanÄ± dÃ¼zeltmeleri */
/* -------------------------------------------------------------------------- */

/* Ä°pucu harfi, boÅŸluk kutusunun/yan kutularÄ±n arkasÄ±nda kalmasÄ±n */
body.game-mode #wordGrid.word-grid .letter-box { position: relative !important; }
body.game-mode #wordGrid.word-grid .letter-box.show-hint { z-index: 5 !important; }
body.game-mode #wordGrid.word-grid .letter-box.show-hint::after { z-index: 6 !important; }
body.game-mode #wordGrid.word-grid .letter-box.space { z-index: 1 !important; }

/* Mobilde klavye iÃ§in transform: scale() KULLANMA (tuÅŸlar Ã§ok kÃ¼Ã§Ã¼lÃ¼yor) */
@media screen and (max-width: 768px) {
    body.game-mode #keyboard.keyboard {
        transform: none !important;
        margin-top: 0 !important;
    }
}

/* 500px altÄ±: tuÅŸlarÄ± biraz kÃ¼Ã§Ã¼lt (441'e kadar kademeli) */
@media screen and (max-width: 500px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard,
    body.game-mode .game-stage:fullscreen #keyboard.keyboard { padding: 8px 6px !important; gap: 3px !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key-row,
    body.game-mode .game-stage:fullscreen #keyboard .key-row { gap: 2px !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key,
    body.game-mode .game-stage:fullscreen #keyboard .key { height: 42px !important; font-size: 0.92rem !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.wide,
    body.game-mode .game-stage:fullscreen #keyboard .key.wide { font-size: 0.70rem !important; }
}

/* 441px altÄ±: daha kÃ¶tÃ¼ olan aralÄ±k, hepsini azÄ±cÄ±k daha kÃ¼Ã§Ã¼lt */
@media screen and (max-width: 441px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard,
    body.game-mode .game-stage:fullscreen #keyboard.keyboard { padding: 7px 6px !important; gap: 3px !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key,
    body.game-mode .game-stage:fullscreen #keyboard .key { height: 40px !important; font-size: 0.88rem !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.wide,
    body.game-mode .game-stage:fullscreen #keyboard .key.wide { font-size: 0.68rem !important; }
}

@media screen and (max-width: 360px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key,
    body.game-mode .game-stage:fullscreen #keyboard .key { height: 38px !important; font-size: 0.82rem !important; }
    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.wide,
    body.game-mode .game-stage:fullscreen #keyboard .key.wide { font-size: 0.62rem !important; }
}

/* ============================================================
   AUTH ENTRY TOGGLES (LOGIN / REGISTER)
   ============================================================ */
.auth-entry-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.account-type-label {
    color: #8b949e;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 5px;
}

.auth-entry-btn {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.auth-entry-btn i {
    font-size: 0.95rem;
}

.auth-entry-btn .fa-chevron-down {
    transition: transform 0.25s ease;
}

.auth-entry-btn.is-open .fa-chevron-down {
    transform: rotate(180deg);
}

.auth-google-btn {
    border: 1px solid #30363d;
    background: #21262d;
    color: #e6edf3;
}

.auth-google-btn:hover {
    border-color: #58a6ff;
    background: #1f2a36;
}

.auth-google-btn .fa-google {
    color: #58a6ff;
}

.auth-or-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
}

.auth-or-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #30363d;
}

.auth-or-divider span {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    background: #161b22;
    color: #8b949e;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.auth-collapsible-section {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.35s ease, opacity 0.22s ease, transform 0.22s ease;
}

.auth-collapsible-section.is-open {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
}

.auth-collapsible-section form {
    margin-top: 6px;
}

.auth-collapsible-section .auth-divider {
    margin: 20px 0 0;
}

.auth-google-area {
    padding-top: 4px;
    border-radius: 10px;
}

.auth-google-area .g_id_signin {
    display: none;
}

.auth-google-area.show-widget .g_id_signin {
    display: flex;
}

.auth-google-area.is-highlighted {
    animation: authGooglePulse 0.8s ease;
}

@keyframes authGooglePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(88, 166, 255, 0);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(88, 166, 255, 0.13);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(88, 166, 255, 0);
    }
}

@media screen and (max-width: 768px) {
    .auth-entry-btn {
        font-size: 0.9rem;
    }

    .auth-or-divider span {
        font-size: 0.72rem;
    }
}

/* ============================================================
   PLAY GAME - FULLSCREEN KLAVYE INCE AYAR
   - Klavye asagi itilmesin
   - Altta her zaman kucuk bir bosluk kalsin
   - Tuslar biraz kuculup sikissin
   ============================================================ */
body.game-mode .game-stage:fullscreen #keyboard.keyboard {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    width: min(94vw, 980px) !important;
    max-width: 980px !important;
    padding: 10px 10px !important;
    gap: 4px !important;
    transform: scale(0.97) !important;
    transform-origin: center bottom !important;
}

body.game-mode .game-stage:fullscreen #keyboard .key-row {
    gap: 4px !important;
    margin-bottom: 4px !important;
}

body.game-mode .game-stage:fullscreen #keyboard .key-row:last-child {
    margin-bottom: 0 !important;
}

body.game-mode .game-stage:fullscreen #keyboard .key {
    height: 50px !important;
    min-width: 32px !important;
    max-width: 56px !important;
    font-size: 1.08rem !important;
    padding: 0 !important;
}

body.game-mode .game-stage:fullscreen #keyboard .key.wide {
    min-width: 62px !important;
    max-width: 88px !important;
    font-size: 0.76rem !important;
}

/* ============================================================
   PLAY GAME - HARF IPUCU GORUNURLUK FIX (SON OVERRIDE)
   ============================================================ */
body.game-mode #wordGrid.word-grid {
    overflow: visible !important;
    padding-bottom: 28px !important;
}

body.game-mode #wordGrid.word-grid .letter-box {
    overflow: visible !important;
}

body.game-mode #wordGrid.word-grid .letter-box.show-hint::after {
    content: attr(data-hint) !important;
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: -24px !important;
    transform: translateX(-50%) !important;
    display: block !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #58a6ff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
    z-index: 20 !important;
    pointer-events: none !important;
}

@media screen and (max-width: 768px) {
    body.game-mode #wordGrid.word-grid {
        padding-bottom: 24px !important;
    }

    body.game-mode #wordGrid.word-grid .letter-box.show-hint::after {
        bottom: -20px !important;
        font-size: 1rem !important;
    }
}
/* Navbar Logosunu Kalınlaştır */
.brand-text span {
    font-weight: 900 !important;
    letter-spacing: 1px;
}
/* Navbar ile Hero Resmi Arasındaki Boşluğu Silme */
.hero-section {
    margin-top: -70px !important; /* Resmi yukarı çekip Navbar'ın arkasına/altına yapıştırır */
    padding-top: 100px !important; /* Yazıların Navbar'ın altında kalmaması için içeriği biraz aşağı iter */
    background-position: center top !important; /* Resmi yukarı hizalar */
}

/* Başlığın kendi boşluğunu sıfırla (Garanti çözüm) */
.hero-content h1 {
    margin-top: 0 !important;
}

/* ============================================================
   PLAY GAME - KLAVYE FINAL DENGELI LAYOUT
   - Normal modda tasma engeli
   - Fullscreen ve normalde ayni satir hizada son tuslar
   - Genislik ve tus boyutlari ekran boyutuna gore dengeli
   ============================================================ */
body.game-mode .game-stage:not(:fullscreen) #gameArea,
body.game-mode .game-stage:fullscreen #gameArea {
    padding: 0 !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard,
body.game-mode .game-stage:fullscreen #keyboard.keyboard {
    margin: 8px auto 12px auto !important;
    padding: 10px 8px !important;
    min-height: unset !important;
    transform: none !important;
    transform-origin: center center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard {
    width: min(96vw, 860px) !important;
    max-width: calc(100% - 8px) !important;
}

body.game-mode .game-stage:fullscreen #keyboard.keyboard {
    width: min(88vw, 860px) !important;
    max-width: min(88vw, 860px) !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard .key-row,
body.game-mode .game-stage:fullscreen #keyboard .key-row {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: clamp(2px, 0.45vw, 5px) !important;
    margin-bottom: clamp(2px, 0.45vw, 5px) !important;
    justify-content: stretch !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard .key-row:last-child,
body.game-mode .game-stage:fullscreen #keyboard .key-row:last-child {
    margin-bottom: 0 !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard .key,
body.game-mode .game-stage:fullscreen #keyboard .key {
    flex: initial !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: clamp(42px, 5vw, 50px) !important;
    font-size: clamp(0.9rem, 1.4vw, 1.02rem) !important;
    padding: 0 !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard .key.wide,
body.game-mode .game-stage:fullscreen #keyboard .key.wide {
    grid-column: span 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: clamp(0.68rem, 1.05vw, 0.82rem) !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard .key.key-backspace,
body.game-mode .game-stage:fullscreen #keyboard .key.key-backspace {
    grid-column: span 1 !important;
}

body.game-mode .game-stage:not(:fullscreen) #keyboard .key.key-enter,
body.game-mode .game-stage:fullscreen #keyboard .key.key-enter {
    grid-column: span 3 !important;
    font-size: clamp(0.72rem, 1.1vw, 0.86rem) !important;
}

@media screen and (max-width: 900px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard {
        width: min(97vw, 780px) !important;
    }

    body.game-mode .game-stage:fullscreen #keyboard.keyboard {
        width: min(90vw, 780px) !important;
        max-width: min(90vw, 780px) !important;
    }

    body.game-mode .game-stage:not(:fullscreen) #keyboard .key,
    body.game-mode .game-stage:fullscreen #keyboard .key {
        height: 44px !important;
        font-size: 0.92rem !important;
    }
}

@media screen and (max-width: 768px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard,
    body.game-mode .game-stage:fullscreen #keyboard.keyboard {
        width: min(98vw, 760px) !important;
        max-width: calc(100% - 4px) !important;
        padding: 8px 5px !important;
        margin: 6px auto 10px auto !important;
    }

    body.game-mode .game-stage:not(:fullscreen) #keyboard .key-row,
    body.game-mode .game-stage:fullscreen #keyboard .key-row {
        gap: 2px !important;
        margin-bottom: 3px !important;
    }

    body.game-mode .game-stage:not(:fullscreen) #keyboard .key,
    body.game-mode .game-stage:fullscreen #keyboard .key {
        height: 40px !important;
        font-size: 0.86rem !important;
    }

    body.game-mode .game-stage:not(:fullscreen) #keyboard .key.key-enter,
    body.game-mode .game-stage:fullscreen #keyboard .key.key-enter {
        font-size: 0.76rem !important;
    }
}
/* "HARF AL" (SARI) BUTON İKONU DÜZELTMESİ */
#btnHint::before { 
    content: "\f0eb" !important; /* Ampul İkonu Kodu */
    font-family: "Font Awesome 6 Free" !important; 
    font-weight: 900 !important; 
    font-size: 1.1rem !important; 
    color: #fff !important; 
}
/* Logoyu Büyüt */
.brand i { font-size: 2.2rem !important; }
.brand-top { font-size: 0.75rem !important; }
.brand-bottom { font-size: 1.3rem !important; }
/* Logoyu Mobilde Küçült */
@media screen and (max-width: 768px) {
    .brand i { font-size: 1.5rem !important; }
    .brand-top { font-size: 0.55rem !important; }
    .brand-bottom { font-size: 0.9rem !important; }
}

/* Anasayfa Bilgi Yazısı Mobilde Küçültme */
@media screen and (max-width: 768px) {
    .hero-content h1 { font-size: 1.8rem !important; }
    .hero-content p { font-size: 1rem !important; }
}
/* ============================================================ 
   KLAVYE GENİŞLİK VE TAŞMA DÜZELTMESİ (YAMA)
   ============================================================ */

/* 1. Klavye Kutusunu Daralt ve Ortala */
body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard,
body.game-mode .game-stage:fullscreen #keyboard.keyboard {
    width: 95% !important;        /* Ekrana yapışmasın */
    max-width: 600px !important;  /* GENİŞLİK AZALTILDI: Daha kompakt durur */
    margin: 10px auto !important; /* Tam ortala */
    padding: 8px !important;      /* İç boşluğu azalt */
    box-sizing: border-box !important;
    overflow: hidden !important;  /* Dışa taşmayı kesin engelle */
    border-radius: 12px !important;
}

/* Tam ekranda biraz daha geniş olabilir (ama yine de sınırlı) */
body.game-mode .game-stage:fullscreen #keyboard.keyboard {
    max-width: 750px !important;
    padding: 15px !important;
}

/* 2. Satırları Esnek Yap (Flex) */
body.game-mode .game-stage:not(:fullscreen) .key-row,
body.game-mode .game-stage:fullscreen .key-row {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 4px !important;          /* Tuş arası boşluk */
    margin-bottom: 4px !important;
}

/* 3. Tuşları Kutuya Sığmaya Zorla */
body.game-mode .game-stage:not(:fullscreen) .key,
body.game-mode .game-stage:fullscreen .key {
    flex: 1 !important;           /* Mevcut alanı eşit paylaş */
    min-width: 0 !important;      /* SİHİRLİ KOD: İçerik sığmasa bile küçülmeye zorlar, taşmayı önler */
    width: auto !important;       /* Sabit genişliği iptal et */
    max-width: none !important;
    
    height: 45px !important;      /* Yükseklik */
    font-size: 1rem !important;
    margin: 0 !important;
}

/* 4. Geniş Tuşlar (Enter/Sil) Oranı */
body.game-mode .game-stage:not(:fullscreen) .key.wide,
body.game-mode .game-stage:fullscreen .key.wide {
    flex: 1.5 !important;         /* Normal tuşun 1.5 katı genişlikte */
    font-size: 0.75rem !important;
    font-weight: 800 !important;
}

/* 5. Mobil İçin Ekstra Sıkıştırma */
@media screen and (max-width: 480px) {
    body.game-mode .game-stage:not(:fullscreen) #keyboard.keyboard {
        padding: 5px 2px !important;
        gap: 3px !important;
    }
    .key-row { gap: 2px !important; }
    .key { height: 42px !important; font-size: 0.9rem !important; border-radius: 4px !important; }
}

/* ============================================================
   PLAY GAME - NON-FULLSCREEN GROUP SCALE
   Tum oyun sahnesini tek parca olarak kucultur.
   ============================================================ */
body.game-mode #gameStage {
    --game-stage-scale: 1;
}

body.game-mode #gameStage .game-stage-scale {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% / var(--game-stage-scale));
    height: calc(100% / var(--game-stage-scale));
    min-height: calc(100% / var(--game-stage-scale));
    transform: scale(var(--game-stage-scale));
    transform-origin: top left;
    transition: transform 0.18s ease, width 0.18s ease, height 0.18s ease;
}

body.game-mode #gameStage:not(:fullscreen) {
    overflow: hidden !important;
}

body.game-mode #gameStage:fullscreen {
    --game-stage-scale: 1 !important;
}

body.game-mode #gameStage:fullscreen .game-stage-scale {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    transform: none !important;
}

/* ============================================================
   PLAY GAME - NON-FULLSCREEN LAYOUT FINE TUNE
   Saga kayma duzeltme + bosluk toparlama + hafif buyutme
   ============================================================ */
body.game-mode #gameStage:not(:fullscreen) #gameArea {
    padding-top: 14px !important;
    gap: 5px !important;
}

body.game-mode #gameStage:not(:fullscreen) .scoreboard {
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    transform: scale(1.09) !important;
    transform-origin: top center !important;
}

body.game-mode #gameStage:not(:fullscreen) .game-controls-area {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    transform: scale(1.07) !important;
    transform-origin: top center !important;
}

body.game-mode #gameStage:not(:fullscreen) .question-area {
    margin-top: 3px !important;
    margin-bottom: 1px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

body.game-mode #gameStage:not(:fullscreen) .history-wrapper {
    min-height: 42px !important;
    max-height: 42px !important;
    margin-bottom: 2px !important;
}

body.game-mode #gameStage:not(:fullscreen) .history-wrapper:empty {
    min-height: 0 !important;
    max-height: 0 !important;
    margin-bottom: 0 !important;
}

body.game-mode #gameStage:not(:fullscreen) #wordGrid.word-grid {
    margin-top: 1px !important;
    margin-bottom: 4px !important;
    padding-bottom: 20px !important;
    gap: 7px !important;
}

body.game-mode #gameStage:not(:fullscreen) #wordGrid .letter-box {
    width: 50px !important;
    height: 60px !important;
    font-size: 1.86rem !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard.keyboard {
    margin-top: 2px !important;
}

body.game-mode #gameStage:not(:fullscreen) .question-area .hint-text {
    font-size: 1.12rem !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key {
    height: 45px !important;
    font-size: 0.96rem !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key.wide {
    font-size: 0.74rem !important;
}

@media screen and (max-width: 768px) {
    body.game-mode #gameStage:not(:fullscreen) .scoreboard {
        margin-top: 10px !important;
        transform: scale(1.06) !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .game-controls-area {
        margin-top: 8px !important;
        transform: scale(1.05) !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #wordGrid .letter-box {
        width: 43px !important;
        height: 53px !important;
        font-size: 1.62rem !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #keyboard .key {
        height: 42px !important;
        font-size: 0.91rem !important;
    }
}

/* ============================================================ 
   FİNAL DENGELİ YAMA (BÜYÜK BOYUT + RAHAT BOŞLUK)
   1. Öğeler %10 civarı büyütüldü.
   2. Öğeler arasına "nefes alma payı" (boşluk) eklendi.
   3. Mobil puan tablosu düzeltildi.
   ============================================================ */

/* --- 1. MOBİL PUAN TABLOSU DÜZELTMESİ --- */
@media screen and (max-width: 768px) {
    body.game-mode #gameStage:not(:fullscreen) .scoreboard {
        transform: none !important; /* Taşmayı önlemek için ölçeklemeyi kaldır */
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important; /* Altına boşluk bırak */
        padding: 0 5px !important;
        display: flex !important;
        justify-content: space-between !important; /* Kartları yana yay */
        gap: 8px !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .group-card {
        flex: 1 !important; /* Eşit genişlik */
        min-width: 0 !important;
        padding: 8px 4px !important; /* Kart içini ferahlat */
    }

    body.game-mode #gameStage:not(:fullscreen) .group-score {
        font-size: 1.6rem !important; /* Puanı büyüt */
    }
}

/* --- 2. GENEL BOŞLUK VE BOYUTLANDIRMA (Tüm Ekranlar) --- */

/* Ana Oyun Alanı: Öğeler arasına boşluk koy */
body.game-mode #gameStage:not(:fullscreen) #gameArea {
    padding-top: 10px !important;
    gap: 12px !important; /* Öğeler birbirine yapışmasın (önceki 2px idi) */
    justify-content: flex-start !important;
}

/* İpucu Alanı: Büyüt ve Boşluk Bırak */
body.game-mode #gameStage:not(:fullscreen) .question-area {
    width: 96% !important;
    margin: 5px auto 10px auto !important; /* Altına boşluk */
    padding: 15px 15px !important; /* İçini ferahlat */
    transform: scale(1.05) !important; /* %5 Büyüt */
}

body.game-mode #gameStage:not(:fullscreen) .question-area .hint-text {
    font-size: 1.3rem !important; /* Yazıyı büyüt */
    line-height: 1.4 !important;
}

/* Harf Kutuları (Grid): İri Kutular + Kenar Boşluğu */
body.game-mode #gameStage:not(:fullscreen) #wordGrid.word-grid {
    margin-top: 5px !important;
    margin-bottom: 15px !important; /* Klavye ile arasına mesafe koy */
    padding-bottom: 25px !important; /* İpucu harfi için alt boşluk */
    gap: 8px !important; /* Kutular arası boşluk */
}

body.game-mode #gameStage:not(:fullscreen) #wordGrid .letter-box {
    width: 55px !important;  /* Genişlet */
    height: 68px !important; /* Uzat */
    font-size: 2.2rem !important; /* Harfi kocaman yap */
    border-width: 3px !important;
    border-radius: 8px !important;
}

/* Klavye: Yukarı yapışmasın, tuşlar büyük olsun */
body.game-mode #gameStage:not(:fullscreen) #keyboard.keyboard {
    margin-top: 5px !important; /* Grid'e yapışmasın */
    padding: 12px 10px !important; /* İç boşluk */
    width: 98% !important;
    transform: none !important; /* Mobilde taşmayı önle */
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key-row {
    gap: 4px !important; /* Tuşlar arası boşluk */
    margin-bottom: 6px !important; /* Satırlar arası boşluk */
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key {
    height: 52px !important; /* Tuşları uzat */
    font-size: 1.15rem !important; /* Harfleri büyüt */
    border-radius: 6px !important;
}

/* --- 3. MOBİL İÇİN ÖZEL BOYUT AYARLARI (Telefona Sığdırma) --- */
@media screen and (max-width: 768px) {
    /* İpucu Resmi Mobilde */
    body.game-mode #gameStage:not(:fullscreen) .question-area .hint-image {
        max-height: 80px !important; /* Resmi biraz büyüt */
    }

    /* Harf Kutuları Mobilde (Ekrana sığacak maksimum boyut) */
    body.game-mode #gameStage:not(:fullscreen) #wordGrid .letter-box {
        width: 46px !important;
        height: 58px !important;
        font-size: 1.8rem !important;
    }

    /* Klavye Mobilde */
    body.game-mode #gameStage:not(:fullscreen) #keyboard {
        padding: 10px 5px !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #keyboard .key {
        height: 48px !important; /* Mobil için ideal büyük boy */
        font-size: 1.1rem !important;
    }
}

body.game-mode #gameStage .game-stage-scale {
            position: relative;
            display: flex;
            flex-direction: column;
            
            /* Genişlik Hesaplaması */
            width: calc(100% / var(--game-stage-scale));
            height: calc(100% / var(--game-stage-scale));
            min-height: calc(100% / var(--game-stage-scale));
            
            /* --- KRİTİK DÜZELTME BAŞLANGICI --- */
            margin: 0 auto !important;       /* Kutuyu yatayda ortalar */
            left: 0 !important;              /* Sağa kaymayı sıfırlar */
            right: 0 !important;             /* Sağa yaslamayı engeller */
            transform: scale(var(--game-stage-scale)) !important; /* Sadece ölçekler */
            transform-origin: top center !important; /* Büyütme/Küçültme merkezi tam orta tepe olur */
            /* --- KRİTİK DÜZELTME BİTİŞİ --- */
            
            transition: transform 0.18s ease, width 0.18s ease, height 0.18s ease;
        }

/* ============================================================
   PLAY GAME FINAL OVERRIDE (NON-FULLSCREEN CENTER + SCALE)
   Keep this block at the very end of style.css.
   ============================================================ */
body.game-mode #gameStage {
    --game-stage-scale: 1;
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-template-rows: 100% !important;
    justify-items: center !important;
    align-items: start !important;
}

body.game-mode #gameStage > #gameStageScale {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% / var(--game-stage-scale)) !important;
    height: calc(100% / var(--game-stage-scale)) !important;
    min-height: calc(100% / var(--game-stage-scale)) !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: scale(var(--game-stage-scale)) !important;
    transform-origin: top center !important;
    transition: transform 0.18s ease, width 0.18s ease, height 0.18s ease !important;
}

body.game-mode #gameStage:fullscreen > #gameStageScale {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    transform: none !important;
}

body.game-mode #gameStage:not(:fullscreen) #gameArea {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-top: 10px !important;
}

body.game-mode #gameStage:not(:fullscreen) .scoreboard,
body.game-mode #gameStage:not(:fullscreen) .game-controls-area,
body.game-mode #gameStage:not(:fullscreen) .question-area,
body.game-mode #gameStage:not(:fullscreen) #wordGrid.word-grid,
body.game-mode #gameStage:not(:fullscreen) #keyboard.keyboard {
    transform: none !important;
}

body.game-mode #gameStage:not(:fullscreen) .scoreboard {
    margin: 16px auto 8px !important;
}

body.game-mode #gameStage:not(:fullscreen) .group-card {
    padding: 8px 14px !important;
    min-width: 96px !important;
}

body.game-mode #gameStage:not(:fullscreen) .group-score {
    font-size: 1.95rem !important;
}

body.game-mode #gameStage:not(:fullscreen) .game-controls-area {
    margin: 4px auto 6px !important;
    gap: 8px !important;
}

body.game-mode #gameStage:not(:fullscreen) .ctrl-btn {
    height: 44px !important;
    font-size: 0.70rem !important;
}

body.game-mode #gameStage:not(:fullscreen) .question-area {
    width: min(96%, 920px) !important;
    margin: 2px auto 6px !important;
    padding: 12px 15px !important;
    max-height: 145px !important;
}

body.game-mode #gameStage:not(:fullscreen) .question-area .hint-text {
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
}

body.game-mode #gameStage:not(:fullscreen) .history-wrapper {
    min-height: 36px !important;
    max-height: 36px !important;
    margin-bottom: 2px !important;
}

body.game-mode #gameStage:not(:fullscreen) .history-wrapper:empty {
    min-height: 0 !important;
    max-height: 0 !important;
    margin-bottom: 0 !important;
}

body.game-mode #gameStage:not(:fullscreen) #wordGrid.word-grid {
    margin: 0 auto 8px !important;
    gap: 7px !important;
    padding-bottom: 12px !important;
}

body.game-mode #gameStage:not(:fullscreen) #wordGrid .letter-box {
    width: 52px !important;
    height: 64px !important;
    flex: 0 0 52px !important;
    font-size: 1.9rem !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard.keyboard {
    width: min(96%, 820px) !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    padding: 7px 7px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key-row {
    gap: 3px !important;
    margin-bottom: 3px !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key {
    height: 40px !important;
    font-size: 0.90rem !important;
    min-width: 0 !important;
}

body.game-mode #gameStage:not(:fullscreen) #keyboard .key.wide {
    font-size: 0.66rem !important;
}

@media screen and (max-width: 768px) {
    body.game-mode #gameStage:not(:fullscreen) #gameArea {
        gap: 7px !important;
        padding-top: 8px !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .group-card {
        padding: 6px 9px !important;
        min-width: 70px !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .group-score {
        font-size: 1.45rem !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .ctrl-btn {
        height: 38px !important;
        font-size: 0.58rem !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .question-area {
        max-height: 132px !important;
        padding: 10px 12px !important;
    }

    body.game-mode #gameStage:not(:fullscreen) .question-area .hint-text {
        font-size: 0.98rem !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #wordGrid .letter-box {
        width: 44px !important;
        height: 56px !important;
        flex: 0 0 44px !important;
        font-size: 1.6rem !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #keyboard.keyboard {
        width: calc(100% - 4px) !important;
        padding: 6px 5px !important;
        margin-bottom: 6px !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #keyboard .key {
        height: 36px !important;
        font-size: 0.82rem !important;
    }

    body.game-mode #gameStage:not(:fullscreen) #keyboard .key.wide {
        font-size: 0.62rem !important;
    }
}