@charset "iso-8859-9";
/* CSS Document */

        body { 
            margin: 0; 
            padding: 0; 
            overflow-x: hidden; 
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .text-container { 
            min-height: 120px; 
            overflow-y: hidden; 
            border: none;
            padding: 15px;
            margin-bottom: 20px;
            resize: horizontal; 
            min-width: 200px; 
            max-width: 100%; 
            width: 100%; 
            margin: 100px auto 20px; 
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            line-height: 2;
            transition: all 0.3s ease;
            font-family: 'Lucida Console';
            box-sizing: border-box;
        }
        .text-container:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
        .text-container span { 
            margin-right: 0;
            font-size: 20px;
            font-family: 'Lucida Console', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 2;
        }
        .right { color: darkgrey; }
        .wrong { color: #e74c3c; }
        #identityHeader { display: none; }
        .skip { color: #95a5a6; }
        .colored { color: #3498db; font-weight: 600; transition: color 0.2s ease; }
        .result-text { 
            font-size: 12px; 
            min-height: 150px; 
            overflow-y: auto; 
            border: 1px solid #ccc; 
            padding: 10px; 
            margin-bottom: 20px; 
            display: none; 
            width: 100%; 
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
        }
        .stats-table { 
            display: none; 
            width: 100%; 
            margin: 0 auto; 
            border-radius: 8px;
            overflow: hidden;
        }
        .stats-table th, .stats-table td { padding: 4px; line-height: 2; font-size: 12px; }
        #toType { 
            min-height: 78px; 
            border: none;
            padding: 12px 15px;
            border-radius: 12px;
            outline: none; 
            white-space: pre-wrap; 
            word-wrap: break-word; 
            resize: horizontal; 
            min-width: 200px; 
            max-width: 100%; 
            width: 100%; 
            margin: 0 auto; 
            background: #ffffff;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            font-size: 20px;
            font-family: 'Lucida Console', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.5;
            transition: all 0.3s ease;
        }
        #toType:focus { box-shadow: 0 6px 20px rgba(13, 110, 253, 0.25); border: none; }
        #toType:empty::before { content: "Buraya yazın..."; color: #bdc3c7; font-style: italic; }

        #settingsPanel { 
            position: fixed; 
            left: 0; 
            top: 0; 
            width: 20%; 
            height: 100vh; 
            background-color: #f8f9fa; 
            border-right: 1px solid #ccc; 
            padding: 10px; 
            border-radius: 0 5px 5px 0; 
            z-index: 1000; 
            overflow-y: auto; 
            display: flex; 
            flex-direction: column; 
        }
        #settingsPanel .draggable-header { 
            background-color: #e9ecef; 
            padding: 5px; 
            margin-bottom: 10px; 
            text-align: left; 
            font-weight: bold; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-shrink: 0; 
        }
        .close-btn { font-size: 18px; line-height: 1; padding: 0 5px; }
        .settings-item { margin-bottom: 6px; }
        .settings-container { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; flex-grow: 1; }
        .settings-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
        .button-group { display: flex; gap: 6px; }
        .button-group .btn { 
            flex: 1; 
            min-width: 0; 
            padding: 10px 20px;
            border-radius: 8px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .button-group .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
        .modal-body table tr:first-child td { background-color: #f0f8ff; font-weight: bold; }
        .mistake-input { width: 100%; margin-top: 10px; }
        .container { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; }
        .row { width: 100%; justify-content: center; }
        .menu-container { width: 100%; }
 /* Ana Menü (Açık olduğunda) */
.menu-item.active-main {
    background-color: #3498db; /* Mavi - Açık ana menü */
    color: white;
}

/* Alt Menü (Açık olduğunda - 3'lü menüde 2. seviye) */
.sub-menu.active-sub {
    background-color:whitesmoke; /* Açık mavi - Açık alt menü */
}

/* Aktif Link (2'li ve 3'lü menüde linkler) */
.sub-menu li a.active-link {
    color: #3498db; /* Mavi - Aktif link */
    font-weight: bold;
}

/* Genel Menü ve Alt Menü Stilleri */
.menu-item {
    cursor: pointer;
    padding: 5px;
    background-color: #e9ecef; /* Kapalı ana menü varsayılan rengi */
    border-bottom: 1px solid #ced4da;
    transition: background-color 0.3s;
}
	
.menu-item:hover {
    background-color: #d3d9df; /* Hover efekti */
}

.sub-menu {
    padding-left: 20px;
    background-color: #ecf0f1; /* Kapalı alt menü varsayılan rengi */
}

.sub-menu li {
    padding: 5px 0;
}

.sub-menu li a {
    text-decoration: none;
    color: #343a40; /* Kapalı link varsayılan rengi */
    transition: color 0.3s;
}

.sub-menu li a:hover {
    color: #3498db; /* Hover efekti */
}

/* PDF için stil */
@media print {
    #identityHeader, h3, p, table {
        text-align: center !important;
        margin: 0 auto !important;
    }
    #identityHeader div {
        display: block;
        margin: 5px auto;
    }
}

        #identityHeader div { font-size: 12px; line-height: 1.5; }
        .color-picker { margin-top: 20px; }
      
        @media (max-width: 100%) {
            .text-container, #toType { margin-top: 50px; height: 120px; }
            .button-group { flex-direction: column; }
        }
	
/* Butonlar için container */
.button-container {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: row; /* Soldan sağa sıralama */
    justify-content: flex-end; /* Sağdan hizalama */
    gap: 10px; /* Butonlar arası sabit boşluk */
    z-index: 1001;
}

/* Bireysel buton stilleri */
#homeButton, #speakerButton, #settingsButton, #identityButton {
    padding: 6px 12px; /* Sabit padding */
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 40px; /* Sabit minimum genişlik (emoji butonlar için) */
    text-align: center; /* İçerik ortalı */
}

/* identityButton için özel ayar */
#identityButton {
    min-width: unset; /* Kimlik butonu genişliği içeriğe göre değişebilir */
    white-space: nowrap; /* Metin tek satırda kalsın, kırılmasın */
}

/* Hover efektleri */
#homeButton:hover, #speakerButton:hover, #settingsButton:hover, #identityButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* infoModal2 için genişlik ayarı */
#infoModal2 .modal-dialog {
    max-width: 800px; /* Modal genişliğini 700px'e çıkardık */
}
	

		
#rainGameModal .modal-content {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

#rainGameModal .modal-header {
    border-bottom: none;
}

#rainGameModal .modal-body {
    padding: 0;
}

.word {
    position: absolute;
    color: #fff;
    font-size: 18px;
    font-family: 'Lucida Console', monospace;
    user-select: none;
    white-space: nowrap;
    padding: 5px;
    animation: fall linear forwards;
    transform: translateY(-100px);
    will-change: transform;
}

@keyframes fall {
    to { transform: translateY(600px); }
}

#wordInput:focus {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    border-color: #3498db;
}



.fire-effect {
    position: absolute;
    bottom: 70px;
    left: 50%;
    width: 10px;
    height: 20px;
    background: red;
    transform: translateX(-50%);
    animation: fireAnim 0.3s ease forwards;
}

@keyframes fireAnim {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

#scoreBoard {
    display: flex;
    align-items: center;
}