:root {
            --font-size: 22px; --line-height: 1.8; --primary-color: #1e3a8a;
            --light-gray: #f0f2f5; --white: #fff; --border-color: #e0e0e0;
        }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--light-gray); color: #333; margin: 0; padding: 20px; display: flex; justify-content: center; }
        .container { width: 100%; max-width: 1400px; }
        h2, h3 { color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-top: 0; }
        .panel-kutu { background-color: var(--white); border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); height: 100%; box-sizing: border-box; }
        select, input[type=text], button { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }
        button { background-color: var(--primary-color); color: white; border: none; cursor: pointer; transition: background-color 0.3s; }
        button:hover { background-color: #1c327a; }
        .uye-durum-cubugu { padding: 12px 20px; border-radius: 8px; font-weight: bold; text-align: center; margin-bottom: 20px; color: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .ana-sayfa-btn { position: fixed; top: 20px; left: 20px; background: #6c757d; color: white; padding: 10px 15px; border-radius: 8px; font-size: 0.9em; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 1000; }
        .ana-sayfa-btn:hover { background: #5a6268; }
        .ayarlar-grid { display: grid; grid-template-columns: 3fr 4fr 5fr; gap: 20px; align-items: start; }
        .ayar-satiri { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .ayar-satiri label { flex-basis: 45%; margin: 0; font-weight: bold;}
        .ayar-satiri select, .ayar-satiri .radio-grup-yan-yana, .ayar-satiri input[type=range] { flex-basis: 55%; margin: 0; }
        .radio-grup-yan-yana { display: flex; align-items: center; justify-content: flex-start; gap: 15px; }
        .radio-grup-yan-yana div { display: flex; align-items: center; }
        .radio-grup-yan-yana input[type=radio] { width: auto; margin: 0 5px 0 0; }
        .radio-grup-yan-yana label { font-weight: normal; }
        .checkbox-satiri { margin-top: 15px; display: flex; align-items: center; }
        .checkbox-satiri label { font-weight: normal; }
        .ayarlar-sutun hr { margin: 15px 0; border: 0; border-top: 1px solid var(--border-color); }
        .ayarlar-sutun input[type=checkbox] { width: auto; margin-right: 8px; }
        .sekmeler { display: flex; border-bottom: 1px solid #ccc; margin-bottom: 15px; flex-wrap: nowrap; overflow-x: auto;}
        .sekme-btn { background-color: transparent; border: none; padding: 10px 15px; cursor: pointer; font-size: 1em; color: #555; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: background-color 0.3s, color 0.3s; }
        .sekme-btn.aktif { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: bold; }
        .sekme-btn:hover { background-color: var(--primary-color); color: var(--white); }
        .sekme-icerik { display: none; } .sekme-icerik.aktif { display: block; }
        .baslik-listesi { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 5px; }
        .baslik-listesi .liste-oge { padding: 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
        .baslik-listesi .liste-oge:hover { background-color: #f5f5f5; }
        .baslik-listesi .liste-oge.secili { background-color: #dbeafe; color: var(--primary-color); font-weight: bold; }
        .btn-start { background-color: #28a745; font-size: 1.4em; padding: 18px; margin-top: 20px; width: 100%; }
        .btn-start:hover { background-color: #218838; }
        #calisma-alani { display: none; }
        #calisma-wrapper { display: flex; flex-direction: column; height: calc(100vh - 180px); max-height: calc(100vh - 180px); }
        #calisma-wrapper.char-mode { align-items: center; }
        #sesli-bilgi { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 5px; font-size: 0.9em; z-index: 10; }
        #istatistik-bar, #onizleme-istatistik-bar { width: 100%; display: flex; align-items: center; justify-content: space-around; margin-bottom: 10px; font-size: 1em; color: var(--primary-color); background: #f8f9fa; padding: 8px; border-radius: 8px; border: 1px solid #e9ecef; box-sizing: border-box;}
        #istatistik-bar { font-size: 1.2em; background: var(--white); box-shadow: 0 2px 4px rgba(0,0,0,0.1); justify-content: space-between; padding: 8px 15px;}
        #istatistik-bar-veriler { display: flex; justify-content: space-around; flex-grow: 1; }
        #istatistik-bar div span, #onizleme-istatistik-bar div span { font-weight: bold; color: #333;}
        .btn-ayar-don { background-color: #6c757d; color: white; padding: 5px 10px; font-size: 0.8em; border-radius: 5px; cursor: pointer; width: auto; margin: 0;}
        #metin-gosterim, #yazi-alani { font-family: 'Courier New', Courier, monospace; font-size: var(--font-size); line-height: var(--line-height); letter-spacing: 1px; padding: 15px; border-radius: 5px; box-sizing: border-box; }
        #metin-gosterim { max-height: calc(var(--font-size) * var(--line-height) * 6); overflow-y: auto; overflow-x: hidden; padding-right: 10px; margin-bottom: 15px; background: var(--white); border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;}
        .char-mode #metin-gosterim { width: calc(68ch + 32px); height: calc(var(--font-size) * var(--line-height) * 4); }
        .char-mode #yazi-alani { width: calc(68ch + 32px); }
        #yazi-alani { flex-shrink: 0; min-height: calc(var(--font-size) * var(--line-height) * 1.5); margin-top: auto; position: sticky; bottom: 0; background: white; z-index: 5; border: 2px solid var(--primary-color); border-top: none; border-radius: 0 0 5px 5px;}
        .metin-harf { display: inline; border-radius: 2px; }
        .dogru { color: #155724; background-color: #d4edda; }
        .yanlis { color: #721c24; background-color: #f8d7da; text-decoration: none; }
        .aktif-kelime { background-color: #e9ecef; border-radius: 3px; }
        .aktif-harf { background-color: #007bff; color: white; animation: blink-bg 1s infinite; }
        @keyframes blink-bg { 50% { background-color: #6c757d; } }
        #onizleme-alani { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; min-height: 140px; font-family: 'Courier New', Courier, monospace; word-break: break-all; }
        #onizleme-alani textarea { width: 100%; margin-top: 10px; height: 40px; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; font-size: 1em; }
        #ses-deneme-alani { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; }
        #sonuc-ekrani { display: none; }
        #sonuc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0; }
        .sonuc-kart { background-color: #f8f9fa; border-radius: 8px; padding: 20px; border: 1px solid #e9ecef; text-align: center; }
        .sonuc-kart .baslik { font-size: 0.9em; color: #6c757d; }
        .sonuc-kart .deger { font-size: 1.8em; font-weight: bold; color: var(--primary-color); }
        .chart-container { position: relative; height: 250px; width: 100%; margin: 20px 0; }
        .btn-grup { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 15px; }
        .btn-grup button { flex-grow: 1; max-width: 200px; }
        #sonuc-hatali-kelimeler { margin-top: 25px; }
        .hata-tablosu { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .hata-tablosu th, .hata-tablosu td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .hata-tablosu th { background-color: #f2f2f2; }
        .hatali-yazim { color: #dc3545; font-weight: bold; }
        .gizli { display: none !important; } .disabled { pointer-events: none; opacity: 0.6; }
#calisma-wrapper.sesli-mod-aktif #yazi-alani {
    margin-top: 20px; /* 'auto' yerine sabit bir üst boşluk veriyoruz */
    min-height: calc(var(--font-size) * var(--line-height) * 4); /* Daha kullanışlı bir yükseklik verelim */
}

/* Ayrıca, sesli modda çalışma alanının dikeyde ortalanması daha iyi görünebilir */
#calisma-wrapper.sesli-mod-aktif {
    justify-content: flex-start; /* Elemanları yukarıdan başlat */
}
/* klavye_stilleri.css dosyasının sonuna ekleyin */

/* ======================================== */
/*          İPUCU BİLGİLENDİRME KUTUSU      */
/* ======================================== */
.ipucu-kutusu {
    margin-top: 25px; /* Üstündeki önizleme alanıyla arasına boşluk koyar */
    padding: 15px 20px;
    background-color: #f8f9fa; /* Açık gri bir arka plan */
    border-left: 5px solid var(--primary-color); /* Sol tarafta ana renkte bir vurgu şeridi */
    border-radius: 0 8px 8px 0; /* Köşeleri yuvarlat */
    font-size: 0.9em; /* Yazı boyutunu biraz küçültelim */
    color: #495057; /* Metin rengi */
}

.ipucu-kutusu h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--primary-color); /* Başlık rengini ana renkle aynı yap */
    display: flex; /* İkon ve metni yan yana hizalamak için */
    align-items: center; /* Dikeyde ortala */
    font-size: 1.1em;
}

.ipucu-kutusu h4 svg {
    width: 22px;
    height: 22px;
    margin-right: 10px; /* İkon ile metin arasına boşluk */
    fill: var(--primary-color); /* İkonun rengini ayarla */
}

.ipucu-kutusu ul {
    list-style: none; /* Liste başındaki noktaları kaldır */
    padding: 0;
    margin: 0;
}

.ipucu-kutusu li {
    margin-bottom: 10px; /* Liste elemanları arasına boşluk */
    line-height: 1.5; /* Satır yüksekliğini artırarak okunabilirliği iyileştir */
}

.ipucu-kutusu li:last-child {
    margin-bottom: 0; /* Son elemanın alt boşluğunu kaldır */
}

.ipucu-kutusu strong {
    color: #343a40; /* Başlıkları biraz daha belirgin yap */
    display: block; /* Başlığın kendi satırında olmasını sağla */
    margin-bottom: 3px;
}