/* Tarayıcı varsayılan kalınlaştırma özelliklerini iptal eden genel sıfırlama (Kullanıcı Talebi) */
h1, h2, h3, h4, h5, h6, b, strong, th {
    font-weight: normal !important;
}

/* Arapça fontların (ör. Arakom) tarayıcı tarafından sahte olarak kalınlaştırılmasını (synthesize) engeller */
* {
    font-synthesis: none !important;
}

@font-face {
    font-family: 'Arakom';
    src: url('../arakom.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --matrix-green: #000000; 
    --header-bg-gray: #FF3B30; 
    --matrix-border: #000000;
    --apple-gray: #f5f5f7;
    --apple-dark: #1d1d1f;
}

body {
    font-family: 'Arakom', sans-serif; 
    font-family: 'Arakom', sans-serif;
    background-color: #ffffff; 
    color: #000000; 
    margin: 0; 
    padding: 20px;
    overflow-x: hidden; 
    user-select: none;
}

body:has(.glass-box.matrix-opened) .back-link {
    background: #fff !important;
    color: #000 !important;
    cursor: default;
    pointer-events: none; 
}

.top-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 25;
}

/* 54 → 46'ya çekilmişti; Geylani "sekmeyi ve araç çubuğunu dikey olarak
   biraz büyütelim" dediği için 54'e geri çıkıldı. */
#root-display-box,
.switch-btn,
.zoom-toggle-area,
.back-link {
    height: 54px !important;
    min-height: 54px !important;
}

#root-display-box {
    /* 380px'ti: üst çubuğa OYUN ikonu eklenince içerik ~415px'e çıktı,
       ARAMA sağdan taşıyordu. Kutu genişledi; mücerred/mezid sekmesi
       flex:1 olduğu için aynı miktarda kendiliğinden KISALIYOR. */
    width: 450px;
    flex: 0 0 450px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 10px; 
    border: 2px solid #e2e8f0;
    background-color: #f1f5f9;
    border-radius: 12px;
    box-sizing: border-box;
}

#root-display-box:hover {
    border-color: #cbd5e1;
}

.segmented-switch {
    flex: 1;
    display: flex;
    gap: 4px;
    background: #f1f5f9; 
    border: 2px solid #e2e8f0; 
    padding: 4px; 
    border-radius: 12px; 
    margin: 0 auto;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    height: 54px;
}

.switch-btn {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    color: #000000;
    cursor: pointer;
    z-index: 1000;
    font-size: 17.5px;
    transition: none;
    font-family: 'Arakom', sans-serif !important;
    font-weight: normal !important;
    z-index: 2;
    text-align: center;
}

.switch-btn span {
    color: inherit !important; 
    transition: none;
}

.switch-btn span:last-child {
    font-size: 1.1rem;
}

.switch-slider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px; 
    width: calc(50% - 3px);
    background: #FF3B30;
    border-radius: 6px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    transform: translateX(100%);
}

.segmented-switch.mucerred-active .switch-slider { transform: translateX(100%); }
.segmented-switch.mezid-active .switch-slider { transform: translateX(0%); }
.segmented-switch.mucerred-active .switch-btn.mucerred-btn { color: #ffffff; }
.segmented-switch.mucerred-active .switch-btn.mezid-btn { color: #000000; }
.segmented-switch.mezid-active .switch-btn.mucerred-btn { color: #000000; }
.segmented-switch.mezid-active .switch-btn.mezid-btn { color: #ffffff; }

.zoom-toggle-area {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f1f5f9; 
    border: 2px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 0 12px;
    box-sizing: border-box;
    transition: transform, background-color, color, opacity, box-shadow 0.2s ease;
}

.zoom-toggle-area:hover {
    border-color: #cbd5e1;
}

.zoom-toggle-label {
    font-family: 'Arakom', sans-serif !important;
    font-weight: normal !important;
    font-size: 14px;
    color: #000000;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px !important;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    z-index: 1000;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1; 
    transition: .3s;
    border-radius: 24px;
    border: none;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    border: none; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
}

input:checked + .toggle-slider {
   background-color: #34C759;
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* İKİ ANAHTAR YAN YANA (BÜYÜTME + ANLAM).
   Üst çubukta kök kutusu 450 px sabit, sekme bandı kalan yeri alıyor.
   İkinci anahtar eklenince dar ekranlarda sekme bandı öyle daralıyordu
   ki "SÜLASİ MÜCERRED" yazısı kendi sayı rozetinin altına giriyordu.
   1300 px altında iki anahtar da küçülüp banda yer açar; okunurluk
   bozulmaz, düzen aynı kalır. */
@media screen and (max-width: 1300px) {
    .zoom-toggle-area { gap: 6px; padding: 0 9px; }
    .zoom-toggle-label { font-size: 12px; }
    .toggle-switch { width: 36px !important; height: 20px; }
    .toggle-slider:before { height: 15px; width: 15px; left: 2.5px; bottom: 2.5px; }
    input:checked + .toggle-slider:before { transform: translateX(16px); }
    #root-display-box { width: 400px; flex: 0 0 400px; }
    /* Sekme yazısı ortalı, sayı rozeti sağa yapışık: bant daralınca
       yazının kuyruğu rozetin altına giriyordu. Yazı ve rozet birlikte
       küçülür, rozet de kenara yaklaşır. */
    .switch-btn { font-size: 14px; }
    .switch-btn span:last-child { font-size: 0.95rem; right: 9px !important; padding: 2px 7px !important; }
}
@media screen and (max-width: 1120px) {
    .switch-btn { font-size: 12.5px; }
    #root-display-box { width: 360px; flex: 0 0 360px; }
}
@media screen and (max-width: 1060px) {
    .zoom-toggle-label { font-size: 10px; }
    .zoom-toggle-area { gap: 5px; padding: 0 7px; }
    .switch-btn { font-size: 11.5px; }
    .switch-btn span:last-child { font-size: 0.8rem; right: 6px !important; padding: 1px 5px !important; }
    #root-display-box { width: 330px; flex: 0 0 330px; }
}

.back-btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background-color: #f1f5f9; 
    border: 2px solid #e2e8f0; 
    border-radius: 12px; 
    color: #000000;
    text-decoration: none;
    transition: transform, background-color, color, opacity, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.back-link:hover {
    background: #e2e8f0; 
    border-color: #cbd5e1;
    color: #FF3B30; 
}

.window-pencere {
    width: 100%;
    overflow: hidden; 
    touch-action: pan-y;
}

.slider-bandi {
    display: flex;
    width: 200%; 
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-content { 
    width: 50%; 
    flex-shrink: 0;
    box-sizing: border-box;
}

.container { 
    max-width: 100%; 
    margin: auto; 
    background: #ffffff; 
    border: 2px solid #000;
    position: relative; 
    border-radius: 8px; 
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

th {
    color: #FFFFFF !important;
    padding: 6px 5px;
    border: 2px solid #ffffff !important;
    text-align: center;
    font-weight: normal;
    font-size: 15px;
}

.baslik-fiil { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.baslik-isim { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }

th.baslik-notr { background-color: transparent !important; color: #FF3B30 !important; width: 245px !important; }

table { 
    width: 100%; 
    border-collapse: collapse; 
    color: #000; 
    table-layout: fixed; 
    margin: 0;
}

/* Bağımsız Başlık Genişlikleri */
#tab1 th:nth-child(1) { width: 10% !important; min-width: 80px !important; }
#table-view th:nth-child(1) { width: 280px !important; min-width: 280px !important; max-width: 280px !important; }

/* Gramer Overlay RTL Arabic Text Helper */
.grammar-arabic-text {
    direction: rtl;
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: 1.6em;
    display: inline-block;
    padding: 0 5px;
    color: #1a252f;
}
#table-view th:nth-child(1) { width: 22% !important; min-width: 350px; } 
th:nth-child(2) { width: 11%; } 
th:nth-child(3) { width: 11%; } 
th:nth-child(4) { width: 11%; } 
th:nth-child(5) { width: 22%; } 
th:nth-child(6) { width: 11%; } 
th:nth-child(7) { width: 11%; } 
th:nth-child(8) { width: 11%; } 
th:nth-child(9) { width: 11%; } 

td {
    background-color: #e5e5ea; 
    border: 4px solid #ffffff !important; 
    text-align: center; 
    vertical-align: middle; 
    padding: 3px 2px;
}

td:first-child {
    color: #FF3B30 !important;
    font-weight: normal; 
}

.conjugation-table td:first-child {
    color: #000000 !important;
    font-weight: normal;
}

/* --- 3. KELİME KUTULARI (3D Buton Tasarımı) --- */
.glass-box {
    position: relative; 
    background-color: #f8f9fa !important; 
    border-top: 1px solid #d1d5db !important;    
    border-left: 1px solid #d1d5db !important;   
    border-right: 1px solid #d1d5db !important;  
    border-bottom: 4px solid #9ca3af !important; 
    border-radius: 8px; 
    margin: 2px;
    padding: 10px 2px 4px 2px; 
    text-align: center;
    transition: transform, background-color, color, opacity, box-shadow 0.1s ease; 
    display: inline-block;
    min-width: 100px;
    width: 125px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); 
}

.glass-box:hover:not(.matrix-opened) { 
    background-color: #ffffff !important; 
    border-bottom-color: #64748b !important; 
}

.glass-box:active:not(.matrix-opened) {
    border-top: 2px solid #d1d5db !important;
    border-bottom-width: 1px !important; 
    transform: translateY(2px); 
    box-shadow: none; 
}

.ar, .ar-small, #temp-root-display, #root-text-display, .key {
    font-family: 'Arakom' !important;
    letter-spacing: 0 !important; 
    text-rendering: optimizeLegibility;
    font-weight: normal !important; 
}

#root-text-display {
    font-size: 1.25rem; 
    color: #000000;
    text-align: center;
    cursor: pointer;
    z-index: 1000;
}

.ar { font-size: 40px; color: #000 !important; line-height: 1; }
.ar-small { font-size: 30px; color: #000 !important; line-height: 1; }
.ref { position: absolute; top: 2px; right: 4px; font-size: 14px; color: #FF3B30 !important; }

.mastar-grid { 
    display: grid; 
    grid-template-rows: repeat(8, auto); 
    grid-auto-flow: column;             
    gap: 4px; 
    padding: 2px;
    justify-items: center;
}

.mastar-grid .glass-box { width: 125px !important; }

.footer-container { 
    display: flex; 
    gap: 10px; 
    margin-top: 2px; 
    width: 100%;
    background: linear-gradient(135deg, #e5eef7 0%, #d2e0f0 30%, #f0d8e6 65%, #d2ebd9 100%) !important;
    border-radius: 14px;
    padding: 6px;
}

.footer-container .ar { font-size: 36px !important; }

.footer-block { 
    background: transparent !important; 
    border: 4px solid rgba(255, 255, 255, 0.5) !important; 
    padding: 8px 10px 12px 10px; 
    border-radius: 12px; 
    box-shadow: none; 
}

.block-title { 
    text-align: center; 
    font-size: 14px;  
    margin-top: -8px; 
    margin-bottom: 8px; 
    margin-left: -10px;
    margin-right: -10px;
    padding: 4px;
    background-color: #2B88D9 !important; 
    color: #FFFFFF !important;
    border-bottom: 4px solid rgba(255, 255, 255, 0.5) !important; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px;
}

.mastar-grid, .cemi-grid { gap: 2px; }
.cemi-area .block-title { background-color: #2B88D9 !important; }

.cemi-area { flex: 8; background: transparent !important; } 
.tafdil-area { flex: 2; background: transparent !important; } 
.tasgir-area { flex: 1; background: transparent !important; }

.cemi-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 1px; 
    justify-items: center;
}

.full-screen-mode th, .full-screen-mode td { padding: 20px !important; }
.cemi-grid .glass-box, .tafdil-area .glass-box, .tasgir-area .glass-box { width: 95%; padding-top: 10px !important; padding-bottom: 4px !important; margin-top: 2px !important; margin-bottom: 2px !important; }
.cemi-grid .glass-box .ar, .tafdil-area .glass-box .ar, .tasgir-area .glass-box .ar { line-height: 1 !important; margin-bottom: -2px !important; }

.keyboard-overlay, .conjugation-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2) !important; 
    z-index: 9999999 !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* backdrop-filter removed for performance */
    -webkit-/* backdrop-filter removed for performance */
}

.keyboard-container, .conjugation-container {
    position: relative;
    padding: 25px; 
    background: #ffffff !important;
    border: 2px solid #000;
    border-radius: 16px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.conjugation-container {
    padding: 15px 20px; 
    border-radius: 12px;
    width: 100% !important;
    min-width: 350px !important;
    max-width: 95vw !important;
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

#conjugation-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#conjugation-content table {
    height: 100%;
}


.keyboard-container {
    padding: 0px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none;
    box-shadow: none;
    height: 100vh !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: space-between;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    direction: ltr;
}

.key {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--key-bg, #ffffff) !important;
    color: #000000;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    border-radius: 10px; 
    cursor: pointer;
    z-index: 1000;
    font-size: 1.6rem;
    user-select: none;
}

.key:hover { filter: brightness(0.9); }

#temp-root-display {
    font-size: 3rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 500px;
    margin: 0 auto 20px auto;
    background: rgba(0, 0, 0, 0.7); 
    border-radius: 14px;
    direction: rtl;
}

.root-icon {
    cursor: pointer;
    z-index: 1000;
    font-size: 1.2rem;
    padding: 8px;
    transition: 0.3s;
    color: #000;
}

.root-icon:hover {
    color: #FF3B30; 
    transform: scale(1.1);
}

.conjugation-inline-container {
    display: flex;
    /* SABİT: kutuya değil EKRANA göre. Sürükleyip sağa/aşağı taşırken
       sayfanın kaydırılabilir alanını büyütmüyor; tablo ekranın dışına
       çıkıyor ama kaydırma çubuğu çıkmıyor. */
    position: fixed; 
    background: #ffffff !important;
    border: 3px solid #000000;
    border-radius: 16px;       
    padding: 14px;             
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 999999 !important; 
    width: 500px !important;    /* tam ekran olmayan tablo biraz daha kucuk */
    max-width: 92vw !important;
    max-height: 74vh !important;
    /* TAŞMA GÖRÜNÜR: kenar/köşe tutamakları kutunun kenarına BİNİYOR
       (yarısı dışarıda), kırpılırsa tutulacak yer yarıya iniyordu.
       Kaydırma zaten içeride: şerit 52vh, tablolar kendi kaplarında —
       kutunun kendisi taşmıyor (ölçüldü). */
    overflow: visible !important;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.15s ease;
}

.glass-box.matrix-opened .conjugation-inline-container {
    display: block;
    opacity: 1;
    pointer-events: auto;
    /* ORANSAL BÜYÜME: ölçeği kenar/köşe tutamakları yazar (--fdm-olcek).
       Başlangıç noktası SOL ÜST — kalıplartablosu.js'teki çapa hesabı
       buna dayanıyor. */
    transform: scale(var(--fdm-olcek, 1));
    transform-origin: top left;
}

/* HANGİ SEKMEDEYSEK O SEKMENİN TABLOLARI GÖRÜNÜR.
   (Sınıfı kaliplartablosu.js/setTab yönetir.) */
/* (Tahta artık body'nin çocuğu ve tek; sekmeye göre gizlemeye gerek
   kalmadı — tablolar sekmeyle birlikte kaymıyor.) */

/* ÇEKİM TABLOSU AÇIKKEN KAHVERENGİ KÖK LEVHASI ÇEKİLİR.
   Levha belge koordinatlarına çakılı ve hep önde; tablo çoğu zaman tam
   onun üstüne açılıyor, levha tablonun içine giriyordu. Tek bir tablo
   bile açıkken sönüyor, hepsi kapanınca geri beliriyor.
   (Sınıfı kaliplartablosu.js/fdmKokLevhaTazele yönetir.) */
body.fdm-tablo-acik .draggable-root-clone {
    /* !important: levhanın opaklığı kimi durumda satır içi yazılıyor
       (büyütme açıkken kök klonu), onsuz kural geçmiyordu. */
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease;
}

/* ============ BÜYÜTME AÇIKKEN ÇEKİM TAHTASI ÇEKİLİR ============
   Büyütme açıkken vezne dokunmak ekranı kaplayan dev bir klon açıyor;
   çekim tahtası onun altında kalıp iki ayrı gösterimi çakıştırıyordu.
   Büyütme açıkken tahta hiç görünmüyor, anahtar kapanınca (rıhtımda
   olduğu gibi) geri geliyor. Kumanda, anlam katmanı ve kahverengi kök
   levhası ise dev klonun ÜSTÜNDE duruyor (Geylani: "büyütme açıkken
   fiil çekim popup görünmesin; ileri geri tuşları, anlam, kök levhası
   vezinlerin üstünde görünsün"). */
/* Ölçüt BÜYÜTME ANAHTARI DEĞİL, DEV KELİMENİN KENDİSİ: anahtar açıkken
   çekim tabloları ekranda duruyor, yalnız bir vezin büyütüldüğü sürece
   çekiliyor — tıpkı kahverengi kök levhası gibi (Geylani: "büyütme
   açıkken fiil çekim popup kısmı görünecek, sadece büyüme esnasında
   görünmemeli"). Yerini ve kaydırmasını korusun diye display yerine
   opaklık kullanılıyor. */
body:has(#crisp-zoom-clone) .fdm-tahta,
body.hizli-liste-acik .fdm-tahta {
    opacity: 0 !important; pointer-events: none !important;
    transition: opacity .2s ease;
}
/* Levhanın z-index'i YÜKSELTİLMİYOR: denendi, sayfanın üstüne çıkıp
   vezinlerin tıklamalarını yutuyordu (ölçüldü: büyütme açıkken kutuya
   üç kez tıklandı, dev klon hiç doğmadı). Levha kendi katmanında zaten
   vezinlerin üstünde duruyor; anlam katmanı da (1 000 000) dev klonun
   (999 999) üstünde. */

/* ==================== ÇEKİM TAHTASI ====================
   Bütün çekim tabloları TEK bir tahtanın ızgarasında yan yana durur.
   Sütunlar Arapçanın yönünde: MÂZÎ en sağda, sonra MUZÂRİ, EMİR, İSİM.
   Aynı türden ikinci tablo bir alt satıra iner. Tahta bir pencere gibi:
   şeridinden ya da boş alanından sürüklenir, sekiz tutamağından
   ORANSAL büyür (tablolar ve yazılar birlikte). */
.fdm-tahta {
    position: fixed;
    left: 0; top: 0;
    z-index: 2000000;
    /* Sayfa RTL; tahtanın KENDİ kabuğu soldan sağa. Rıhtım kipinde kap
       esnek bir satır oluyor ve RTL mirasıyla düğmeler sağa, simgeler
       sola düşüyordu (ölçüldü: simgeler 30-147, düğmeler 159-235 px).
       Tabloların içi `dir="rtl"` ile kendi yönünü koruyor. */
    direction: ltr;
    display: block;
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 18px;
    padding: 50px 14px 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
    /* ÖLÇEK `transform` DEĞİL: bkz. .fdm-gorus'taki `zoom`. Dönüşümle
       büyütünce yazı bir kez çizilip gerdiriliyor, büyüdükçe netlik
       kaybediyordu. */
    touch-action: none;
    cursor: grab;
}
/* YÜZEN MOD — sarı düğme. MacBook'un sarı noktası gibi: pencere yok
   olmuyor, küçülüp sol alt köşeye park ediyor. Kalıp tablosunun üstü
   açılıyor, öğretmen yandaki kalıbın numarasına basıp ikinci, üçüncü
   çekimi tahtaya ekleyebiliyor. Konum/ölçek işi JavaScript'te; buradaki
   kurallar yalnız "havada duran küçük pencere" görüntüsünü veriyor. */
/* Küçültülünce tahta bir RIHTIM oluyor: tablolar değil, her tablo için
   BİR SİMGE. Gezinme, kaydırma, yakınlaşma yok — yalnız sürükle ve
   tıkla. Tıklayınca tablolar rıhtımın bırakıldığı yerde açılıyor. */
.fdm-tahta.fdm-yuzen {
    display: block;
    padding: 10px;
    border-width: 2px; border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
    cursor: grab;
}
/* SİMGE HÂLİNDE DÜĞME YOK: kapatma/küçültme/büyütme tabloların açık
   hâline ait (Geylani: "simge halindeki yüzen popup bi simge olacak").
   Rıhtımda yalnız simgeler var; tıklayınca tablolar açılıyor. */
.fdm-tahta.fdm-yuzen .popup-drag-bar,
.fdm-tahta.fdm-yuzen .fdm-isiklar,
.fdm-tahta.fdm-yuzen .fdm-gorus,
.fdm-tahta.fdm-yuzen .fdm-tut { display: none !important; }
.fdm-tahta.fdm-yuzen .fdm-simgeler { display: grid; }

/* TAM EKRANDA TABLOLAR SÜTUNLARI PAYLAŞIR: sabit 500 px yerine kalan
   genişliği eşit bölüşüyorlar, kenarlarda boşluk kalmıyor. */
.fdm-tahta.fdm-tam { border-radius: 0; }
.fdm-tahta.fdm-tam .fdm-izgara { width: 100%; }
.fdm-tahta.fdm-tam .fdm-hucre { width: auto !important; }
/* TAM EKRANDA TABLOLAR SATIRI DOLDURUR: satır kipinde emir tablosu
   mâzîden kısa olduğu için altında koca bir boşluk kalıyordu. Hücreler
   satırın boyuna geriliyor, tablo da kutunun ortasında duruyor
   (Geylani: "satır düzeninde tablolar pencereye tam yayılsın"). */
.fdm-tahta.fdm-tam .fdm-izgara { align-items: stretch; }
.fdm-tahta.fdm-tam .fdm-hucre {
    display: flex !important; flex-direction: column;
}
/* Tablo, uzayan kutunun ORTASINDA dursun (üstte kalıp altta boşluk
   bırakmasın). */
.fdm-tahta.fdm-tam .fdm-hucre .carousel-container-outer {
    flex: 1 1 auto; min-height: 0;
}
/* TAM EKRANDA YAKINLAŞINCA ızgara ekrana ZORLANMIYOR: `width: 100%`
   yakınlaştırmayı enine kilitliyordu — tablo boyuna uzayıp enine
   sıkışıyor, üstelik taşan kısım kaydırılamıyordu (ölçüldü: ic 2'de
   yatay kaydırma payı 0, odaklanan tablo pencerenin 329 px dışında).
   Yaklaşınca ızgara normal kipteki gibi kendi doğal enini alıyor ve
   tablolar arasında kaydırarak geziliyor. */
.fdm-tahta.fdm-tam.fdm-tam-yakin .fdm-izgara { width: max-content; }

/* SATIR ⇄ SÜTUN GEÇİŞİ YUMUŞAK: tablolar eski yerlerinden yenisine
   kayarken (JS'teki FLIP) pencerenin kendi ölçüsü ve yeri de aynı
   eğriyle değişiyor; ayırıcı çizgiler yeni yönünde belirerek geliyor
   (Geylani: "yer değiştirme animasyonu olsun, birden olmasın"). */
.fdm-tahta.fdm-gecis {
    transition: left .46s cubic-bezier(.22, .61, .36, 1),
                top .46s cubic-bezier(.22, .61, .36, 1);
}
/* PENCERENİN ÖLÇÜSÜ ANINDA DEĞİŞİYOR, YERİ YUMUŞAK. Görüşün eni/boyu
   da geçişe alınınca `fdmTahtaSigdir` ekrana sığdırmayı ANİMASYONUN
   ORTASINDAKİ ölçüyle hesaplıyordu: art arda satır/sütun'a basınca
   tahta her seferinde biraz daha büyüyüp sağa taşıyordu (ölçüldü: sağ
   kenar 1694 px, ekran 1512 px). Tabloların kayma animasyonu zaten
   hareketi taşıyor. */
.fdm-ayirici.fdm-cizgi-belir { animation: fdmCizgiBelir .46s ease both; }
@keyframes fdmCizgiBelir {
    from { opacity: 0; }
    40%  { opacity: 0; }
    to   { opacity: 1; }
}

/* TEK SİMGE: içindeki göz sayısı ve dizilişi açık tabloları anlatır. */
.fdm-simgeler { display: none; }
.fdm-tahta.fdm-yuzen .fdm-simgeler { display: block; }
.fdm-simge {
    display: block; border: none; background: none; padding: 0; cursor: pointer;
    transition: transform .14s ease, filter .14s ease;
}
.fdm-simge svg {
    display: block;
    width: auto; height: auto;
    max-width: 108px; max-height: 96px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
}
.fdm-simge:hover { transform: scale(1.06); filter: brightness(1.04); }
.fdm-simge:active { transform: scale(.95); }

/* DİZİM KİPİ DÜĞMESİ — şeridin sağ ucunda: türler sütunda mı satırda mı */
.fdm-dizim {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 11px;
    border: 1.5px solid #cbd5e1; border-radius: 999px; background: #fff;
    color: #475569; cursor: pointer; z-index: 1000011;
    font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 900; letter-spacing: .06em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: filter .15s ease, transform .12s ease;
}
.fdm-dizim svg { width: 14px; height: 14px; fill: currentColor; flex: none; display: block; }
.fdm-dizim:hover { filter: brightness(.97); transform: translateY(-50%) scale(1.05); }
.fdm-dizim:active { transform: translateY(-50%) scale(.95); }
.fdm-tahta.fdm-boyutlaniyor { transition: none !important; }
.fdm-tahta.fdm-boyutlaniyor * { transition: none !important; }
.fdm-tahta .popup-drag-bar {
    position: absolute; top: 0; left: 0; width: 100%; height: 40px;
    background: #f1f5f9; border-top-left-radius: 15px; border-top-right-radius: 15px;
    border-bottom: 2px solid #e2e8f0;
    display: flex; justify-content: center; align-items: center;
    cursor: grab; z-index: 3; touch-action: none;
}
/* GÖRÜŞ PENCERESİ: bir sütunda en çok iki tablo görünür, gerisi
   kaydırmayla gelir. İki parmakla / dokunmatik yüzeyle yakınlaşılır,
   yukarı-aşağı sağ-sola kaydırılarak öteki tablolara geçilir. */
.fdm-gorus {
    overflow: auto;
    overscroll-behavior: contain;
    direction: ltr;                 /* kaydırma matematiği soldan sağa kalsın */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;      /* tek parmak kaydırır, iki parmak kıstırır */
    /* PENCERE ÖLÇEĞİ: yerleşimi değiştiren `zoom`. Yazılar her ölçekte
       gerçek boyunda diziliyor — büyüdükçe netlik düşmüyor. Tahtanın
       kendisi ölçeklenmediği için `left/top` gerçek piksel kalıyor. */
    zoom: var(--fdm-olcek, 1);
}
.fdm-gorus::-webkit-scrollbar { width: 10px; height: 10px; }
.fdm-gorus::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.fdm-gorus::-webkit-scrollbar-track { background: transparent; }
/* TUVAL: ölçeklenmiş içeriğin gerçek boyunu taşır — kaydırma payları
   buradan doğuyor (dönüşüm tek başına kaydırma alanı üretmez). */
.fdm-tuval { position: relative; }
.fdm-izgara {
    display: grid;
    gap: 14px;
    align-items: start;
    justify-items: stretch;
    width: max-content;
    zoom: var(--fdm-ic-olcek, 1);   /* içerik yakınlaşması da yerleşimle */
    /* GEÇİŞ YOK: yakınlaşma JavaScript'te ölçek + kaydırma birlikte
       yumuşatılarak yapılıyor. CSS geçişi eklenirse ikisi denk düşmüyor,
       tablo yandan kayarak geliyormuş gibi görünüyor. */
}
.fdm-tahta.fdm-canli .fdm-gorus { scroll-behavior: auto; }
/* Yakınlaşılmış tabloda imleç "geri uzaklaş" der. */
.fdm-tahta.fdm-odak .fdm-hucre { cursor: zoom-out; }
.fdm-tahta:not(.fdm-odak) .fdm-hucre { cursor: zoom-in; }
/* AYIRICI ÇİZGİ — FİİL KUŞAKLARI ARASINDA, ızgaranın bir ucundan öbür
   ucuna. Kalın ama ağır değil: uçları yuvarlatılmış, enine ince bir
   ışık-gölge geçişiyle hafif kabartmalı bir ray gibi duruyor
   (Geylani: "daha kalın daha şık olsun"). Boyunca renk düz — uçları
   soluklaşan geçiş çizgiyi kısa gösteriyordu. */
.fdm-ayirici {
    height: 5px; width: 100%; align-self: center; justify-self: stretch;
    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 55%, #7c8ba1 100%);
    border-radius: 999px; pointer-events: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .16), 0 0 0 1px rgba(255, 255, 255, .75);
}
.fdm-ayirici-dikey {
    height: 100%; width: 5px; align-self: stretch; justify-self: center;
    background: linear-gradient(90deg, #e2e8f0 0%, #94a3b8 55%, #7c8ba1 100%);
    box-shadow: 1px 0 2px rgba(15, 23, 42, .16), 0 0 0 1px rgba(255, 255, 255, .75);
}
/* HÜCRE: eski popup'ın gövdesi, artık ızgarada bir kutu */
.fdm-hucre {
    /* `relative` — hem akışta duruyor (eski `fixed` ezildi) hem de
       içindeki mutlak konumlu öğelerin kapsayan bloğu oluyor. `static`
       bıraktığımızda hücrenin çarpı/tam-ekran düğmeleri kapsayan blok
       diye TAHTAYI buluyor, dördü birden tahtanın köşesine yığılıyordu
       (ölçüldü: tek bir kırmızı ✕ tahtanın sağ üstünde, gri büyütme
       düğmesi de sol üstteki noktaların üstünde duruyordu). */
    position: relative !important;
    width: 500px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: auto !important;
    display: block !important;
    cursor: default;
}
.fdm-hucre .carousel-container-outer { margin-top: 0 !important; height: auto !important; }
/* Tahtanın kendisi `touch-action: none` — parmak nereye değerse tahta
   gezsin, sayfa kaymasın. Ama bu, hücrenin İÇİNDEKİ olumlu/menfî
   şeridinin parmakla kaydırılmasını da kapatıyordu (ölçüldü: dokunuşla
   şerit 0'da çakılı kalıyordu). Şeride `pan-x` verilince tarayıcı
   yatayda gene kendi ivmeli kaydırmasını ve yapışma noktalarını
   yürütüyor: tablolar arası geçiş eskisi gibi akıcı, tahta sürüklemesi
   ise bozulmuyor. */
.fdm-hucre .conjugation-carousel { touch-action: pan-x; }
/* İKİ VE DAHA ÇOK TABLO: şerit parmakla dönmüyor. Olumlu ↔ olumsuz
   geçişi yalnız oklarla; parmak/dokunmatik yüzey ise tablolar arasında
   gezinmeye ayrılıyor (Geylani: "diğer tabloya geçmek isteyebilirim").
   `overflow-x: hidden` elle kaydırmayı kapatır ama okların programlı
   kaydırmasını ve yapışma noktalarını bozmaz. Tek tablo açıkken eski
   davranış aynen sürüyor. */
.fdm-tahta.fdm-coklu .fdm-hucre .conjugation-carousel,
.fdm-tahta.fdm-odak .fdm-hucre .conjugation-carousel {
    overflow-x: hidden !important;
    touch-action: pan-x pan-y;
}
/* ŞERİT KAYDIRILAMAZ HÂLE GELİNCE parmak hareketi zincirlenip
   TARAYICININ GERİ GİTME JESTİNİ tetikliyordu: yan yana iki tablo
   varken sağa doğru bir kaydırma sayfayı geri alıyor, bütün tablolar
   uçuyordu (ölçüldü: tahta DOM'dan silinmiyor, sayfa değişiyordu).
   Tahta açıkken yatay taşma zinciri kapatılıyor. */
html.fdm-tablo-acik, body.fdm-tablo-acik { overscroll-behavior-x: none; }
.fdm-hucre .conjugation-carousel { overscroll-behavior: contain; }
/* GEZİNTİ OKLARI: satır içi biçimde −15 px ile hücrenin dışına
   taşıyorlardı, hücrenin `overflow: hidden`ı da yarılarını kesiyordu.
   Şeridin iki yanında zaten 40'ar px boşluk var; oklar oraya, tablonun
   dibine alındı (Geylani: "oklar taşıyor, tablolara daha yakın olsun").
   Satır içi biçimi ancak `!important` ezebiliyor. */
.fdm-hucre .carousel-nav-btn { width: 30px !important; height: 30px !important; }
.fdm-hucre .left-btn  { left: 5px !important; }
.fdm-hucre .right-btn { right: 5px !important; }
.fdm-hucre .carousel-nav-btn svg { width: 17px; height: 17px; }

/* TAHTA AÇIKKEN: ⓘ düğmeleri ve dilbilgisi başlıkları tıklanmaz.
   İşlevler de kendi içinde kilitli (çift emniyet); buradaki kural
   imleci ve dokunuşu daha baştan kesiyor. */
body.fdm-kilit .th-3d-btn,
body.fdm-kilit .header-info-icon,
body.fdm-kilit .mt-bilgi,
body.fdm-kilit .info-icon,
body.fdm-kilit .block-title { pointer-events: none !important; cursor: default !important; }
/* FİİL KÜNYESİ: hangi satırın (satır kipinde hangi sütunun) hangi
   fiile ait olduğu başlıktaki fiil yazısından okunuyor. Fiil başına
   ayrı renk verilmiyor (Geylani: "her fiil için renk olmasın");
   ayırıcı görev artık satır/sütun boyunca uzanan çizgide. */
.fdm-hucre-bas {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    direction: ltr;
}
.fdm-hucre-fiil {
    flex: none; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    padding: 1px 10px; border-radius: 11px;
    background: #475569; color: #fff; direction: rtl;
    font-family: 'Arakom', 'Amiri', serif; font-size: 1.02rem; line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.fdm-hucre-ad {
    font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 800;
    letter-spacing: .06em; color: #475569; white-space: nowrap;
}
/* KELİMENİN TÜRKÇESİ: başlıkta, kalıp adının yanında. Uzun anlamlar
   satırı taşırmasın diye tek satır ve üç noktayla kesiliyor; tamamı
   ipucu (title) olarak duruyor. Boşken hiç yer kaplamıyor. */
.fdm-hucre-anlam {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    text-align: left; direction: ltr;
    font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600;
    color: #0f766e;
}
.fdm-hucre-anlam:empty { display: none; }
/* ROZET: 3 = mücerred · 3+ = mezid. Tahta iki sekmede de yüzdüğü için
   hangi tablonun nereden geldiği başlıktan okunabilmeli. Fiil oldukları
   için dolgu yeşil — sayfadaki fiil başlıklarıyla aynı yeşil. */
.fdm-hucre-rozet {
    flex: none;
    min-width: 30px; padding: 2px 9px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-weight: 900; font-size: .82rem;
    letter-spacing: .04em; text-align: center; direction: ltr;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .18);
}
.fdm-hucre-tus { display: flex; align-items: center; gap: 7px; }
/* Tek tabloda ⤢ var; iki ve üstünde yalnız ✕ kalır. */
.fdm-tahta.fdm-coklu .fdm-hucre .matrix-expand-btn { display: none !important; }
/* HAZIR ÇEKİMLERDE TABLO BAŞINA ✕ YOK: bu tablolar bir bütün, tek tek
   kapatılmıyor; tahtanın ✕'i de onları küçültüyor (Geylani: "hazır
   fiillerde her tabloda çarpı olmasın"). */
.fdm-hucre[data-hazir="1"] .fdm-hucre-x { display: none !important; }
/* İki sınıf: eski `.matrix-close-btn` / `.matrix-expand-btn` kuralları
   (mutlak konum, 24 px kırmızı ✕) dosyada DAHA SONRA geldiği için tek
   sınıflı bir kural onları ezemiyordu. Hücreyle birlikte yazılınca
   özgüllük yükseliyor ve düğmeler başlığın akışında kalıyor. */
.fdm-hucre .fdm-hucre-btn {
    width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    color: #fff; background: #64748b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: filter .15s ease, transform .12s ease;
    position: static; top: auto; right: auto; left: auto;
    flex: none;
}
.fdm-hucre .fdm-hucre-btn.fdm-hucre-x { background: #ff5f57; color: #fff; font-size: 12px; }
.fdm-hucre .fdm-hucre-btn:hover { filter: brightness(1.08); transform: scale(1.12); }
.fdm-hucre .fdm-hucre-btn:active { filter: brightness(.9); transform: scale(.94); }

/* ================= ÇEKİM TABLOSU: PENCERE DAVRANIŞI =================
   Sekiz tutamak (dört kenar + dört köşe). Hangisinden çekilirse
   çekilsin tablo ORANINI BOZMADAN büyür; yazılar da onunla büyür.
   Tutamakların kalınlığı ÖLÇEĞE BÖLÜNÜYOR: pencere ne kadar büyürse
   büyüsün ekranda hep aynı kalınlıkta (20 px, köşelerde 30 px) kalıyor
   — parmakla rahat tutulsun, ama devasa bir tutuş bandına da dönüşmesin
   (Geylani: "dokunarak rahatlıkla büyütebilmek için kenarlar kalın
   olsun"). */
.fdm-tut {
    position: absolute;
    z-index: 1000002;
    touch-action: none;
}
.conjugation-inline-container.fdm-boyutlaniyor { transition: none !important; }
.conjugation-inline-container.fdm-boyutlaniyor * { transition: none !important; }

/* TUTAMAKLAR KABIN KENDİ ÇİZGİSİNDE: dışarı taşmıyor, ayrıca köşe ve
   kenar izleri de yok (Geylani: "sürükleyerek büyütme kısmı tablodan
   taşmış, o çizgilere gerek yok, konteynırın kendi çizgisine o özelliği
   atayalım"). Bantlar tahtanın iç dolgusuna denk geliyor; tabloların
   üstüne binmiyor, tıklamalarını yutmuyor. Üst bant şeridin yalnız ilk
   12 px'ini kaplar — kalan 28 px sürükleme için temiz kalıyor. */
.fdm-tut-n { top: 0;    left: 0; right: 0; height: 12px; cursor: ns-resize; }
.fdm-tut-s { bottom: 0; left: 0; right: 0; height: 14px; cursor: ns-resize; }
.fdm-tut-w { left: 0;   top: 0; bottom: 0; width: 14px;  cursor: ew-resize; }
.fdm-tut-e { right: 0;  top: 0; bottom: 0; width: 14px;  cursor: ew-resize; }
.fdm-kose  { width: 18px; height: 18px; z-index: 1000003; }
.fdm-tut-nw { top: 0;    left: 0;  height: 14px; cursor: nwse-resize; }
.fdm-tut-ne { top: 0;    right: 0; height: 14px; cursor: nesw-resize; }
.fdm-tut-sw { bottom: 0; left: 0;  cursor: nesw-resize; }
.fdm-tut-se { bottom: 0; right: 0; cursor: nwse-resize; }
/* Tutulan kenar, kabın kendi çizgisini vurgulayarak belli oluyor. */
.fdm-tahta.fdm-boyutlaniyor { border-color: #2B88D9; }

/* ---- İKİ BÜYÜK DÜĞME: KAPAT (kırmızı) · TAM EKRAN (yeşil) ----
   ŞERİDİN İÇİNDE DEĞİL, KABIN DOĞRUDAN ÇOCUĞU. Şerit kendi yığın
   bağlamını kuruyor (position + z-index), içine konulan düğme
   tutamakların üstüne çıkamıyor ve kenar tutamakları düğmeleri
   yutuyordu — çarpıya basılamıyor, tam ekran açılamıyordu (Geylani:
   "büyütme kısmı engel oluyor, büyütemiyorum, çarpıdan kapatamıyorum").
   Dışarı alınınca düğmeler en üstte; ayrıca soldan 26 px başlıyorlar,
   yani sol üst köşe tutamağının (20 px) alanına hiç girmiyorlar.
   Simgeler DAİMA görünür: dokunmatikte "üstüne gelme" yok. */
.fdm-tahta .fdm-isiklar {
    position: absolute; left: 26px; top: 7px;
    display: flex; align-items: center; gap: 12px;
    z-index: 1000010;                 /* tutamakların (1000003) üstünde */
    direction: ltr;                   /* tablo RTL; düğme sırası şaşmasın */
}
.fdm-tahta .fdm-nokta {
    width: 26px; height: 26px; border-radius: 50%;
    border: none; padding: 0; cursor: pointer;
    position: static;                 /* .matrix-close-btn'in absolute'unu ezer */
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1; color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 2px 5px rgba(0, 0, 0, .22);
    transition: filter .15s ease, transform .12s ease;
    touch-action: manipulation;
}
.fdm-tahta .fdm-kirmizi { background: #ff5f57; }
.fdm-tahta .fdm-sari    { background: #febc2e; font-size: 11px; color: #7c4a03; }
.fdm-tahta .fdm-yesil   { background: #28c840; font-size: 13px; }
.fdm-tahta .fdm-nokta:hover { filter: brightness(1.06); transform: scale(1.1); }
.fdm-tahta .fdm-nokta:active { filter: brightness(.88); transform: scale(.94); }
/* Eski çarpı/büyüteç biçimleri (mutlak konum, 24px kırmızı ✕) uygulanmasın */
.fdm-tahta .fdm-nokta { top: auto; right: auto; left: auto; }

.popup-drag-bar .fdm-tutus {
    width: 50px; height: 6px; background: #cbd5e1; border-radius: 10px; pointer-events: none;
}

.conjugation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    direction: rtl;
    table-layout: fixed;
}

.glass-box.no-transition { transition: none !important; }

.conjugation-table th {
    background-color: #FF3B30 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000;
    padding: 8px;
    font-size: 16px;
    font-family: 'Arakom' !important;
    font-weight: normal !important;
}

.conjugation-table td {
    border: 2px solid #000000;
    padding: 4px 2px;
    text-align: center;
    background: #ffffff;
    width: 33.33%;
}

.siga-text {
    font-size: 28px;
    color: #000000;
    display: block;
    font-family: 'Arakom' !important;
    font-weight: normal !important;
    line-height: 1.2;
    white-space: nowrap;
}

.kok { color: #000000 !important; }
.ek { color: #FF3B30 !important; }

.matrix-close-btn {
    position: absolute;
    top: 4px;
    right: 12px;
    color: #FF3B30;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    font-weight: normal;
    z-index: 1000001; 
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.matrix-close-btn:hover { transform: scale(1.2); }

#tab2 .ar { font-size: 2.2rem !important; }
#tab2 .conjugation-table { margin-top: 6px; }
#tab2 .glass-box { width: 92%; padding: 10px 2px 4px 2px; }
#tab2 .glass-box .ar { font-size: 38px; line-height: 1; }

/* Sülasi (Mücerred) Tablosu - GENEL YEKPARE MAT PASTEL GRADYAN (Parlak beyaz içermez, ana renklere benzemez) */
/* DEGRADE ARTIK TABLONUN KENDİSİNDE, tbody'de değil: hücreler kendi
   dilimini taşıyacak (kalipliste.js → ustZeminDilimle), oluklar ve
   yuvarlatılmış köşeler beyaz kalsın diye tbody beyaza çekildi. Böylece
   üstteki gri, altbilgi blokları gibi HÜCREYE AİT bir dolgu oluyor;
   eskiden hücrelerden bağımsız tek bir levhaydı. */
/* DEGRADE ARTIK HİÇBİR YERE BOYANMIYOR, yalnız DEĞİŞKEN olarak
   duruyor: hücreler dilimini buradan alıyor (kalipliste.js →
   ustZeminDilimle). Tabloya boyanınca satırlar aşağı süzülüp gitse bile
   altta gri bir plaka kalıyordu — sağda BABLAR'dan solda zaman-mekân
   sütununa kadar (Geylani). Değişken boyamadığı için o plaka yok. */
#tab1 .container > table {
    --ust-degrade: linear-gradient(135deg, #e6e2db 0%, #dce2dd 33%, #e1dfe6 66%, #eaddd7 100%);
    background: transparent !important;
}
#tab1 tbody {
    background: #ffffff !important;
}
/* ÖRNEK LİSTESİ AÇIKKEN DEGRADE BÜTÜN SAYFAYI KAPLAR (Geylani:
   "arkada çıkan degrade tüm sayfayı kaplasın"): tablo kutusuyla sınırlı
   bir levha değil, pencereye çakılı tek bir zemin. Sayfa kartı da
   saydamlaşıyor ki altındaki degrade görünsün. */
body.muc-zemin::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #e6e2db 0%, #dce2dd 33%, #e1dfe6 66%, #eaddd7 100%);
    z-index: 0;
    opacity: 0;
    transition: opacity var(--muc-zemin-sure, .9s) ease-out;
    pointer-events: none;
}
body.muc-zemin.muc-zemin-ac::before { opacity: 1; }
/* ŞERİDİN AYRI BANDI YOK. Sayfa zemini zaten arkada duruyor; şerit de
   aynı degradeyi taşıdığı için ikisi üst üste binince (özellikle
   beliriş sırasında, ikisi de yarı saydamken) sayfadan KOYU çıkıyor ve
   en üstte sağdan sola uzanan ekstra bir bant gibi görünüyordu
   (Geylani: "yukarda ekstra bi kısım var, ona gerek yok").
   Şerit saydam duruyor; yalnız sayfa kaydırılıp levha yapışkan hâle
   geçtiğinde boyanıyor — o an sayfa zemini zaten tam opak, dolayısıyla
   dikiş görünmüyor, kartlar da altından geçerken okunaklı kalıyor. */
body.muc-zemin #tab1 .muc-levha-zemin {
    opacity: 0 !important;
    transition: opacity .28s ease !important;
}
body.muc-zemin.ko-stor-yuzer #tab1 .muc-levha-zemin { opacity: 1 !important; }
/* Sayfa kartı saydamlaşır ki altındaki zemin görünsün; sınıf ancak
   tablo ekrandan çekildikten sonra takılıyor, o an ekran zaten boş. */
body.muc-zemin #tab1 .container,
body.muc-zemin .window-pencere { background: transparent !important; box-shadow: none !important; }
body.muc-zemin #tab1 { position: relative; z-index: 1; }
body.muc-zemin #tab1 .container > table > tbody { background: transparent !important; }

/* Hücreler saydam başlar; dilimlerini kalipliste.js yazar (yazamazsa
   tablo yine eski görünümüne düşer, degrade tablodan görünür). */
#tab1 tbody td {
    background: transparent !important;
}

/* Mezid Bab Satırları (Canlı ama Göz Yormayan Daha Açık ve Uçuk Pasteller) */
#tab2 tbody tr:nth-child(1) td { background-color: #fcf0f0 !important; } /* İf'al: Uçuk Tatlı Kırmızı */
#tab2 tbody tr:nth-child(2) td { background-color: #fbf5ee !important; } /* Tef'il: Uçuk Tatlı Turuncu */
#tab2 tbody tr:nth-child(3) td { background-color: #f7f4e4 !important; } /* Müfa'ale: Uçuk Tatlı Sarı */
/* 4. satır ayırıcı çizgidir */
#tab2 tbody tr:nth-child(5) td { background-color: #e8f5ec !important; } /* İnfi'al: Uçuk Tatlı Yeşil */
#tab2 tbody tr:nth-child(6) td { background-color: #e0f2ef !important; } /* İfti'al: Uçuk Tatlı Camgöbeği */
#tab2 tbody tr:nth-child(7) td { background-color: #e5eef7 !important; } /* İf'ilal: Uçuk Tatlı Mavi */
/* 8. satır ayırıcı çizgidir */
#tab2 tbody tr:nth-child(9) td { background-color: #ebedf7 !important; } /* Tefe'ul: Uçuk Tatlı İndigo */
#tab2 tbody tr:nth-child(10) td { background-color: #f3ebf7 !important; } /* Tefa'ul: Uçuk Tatlı Mor */
#tab2 tbody tr:nth-child(11) td { background-color: #f7ebf2 !important; } /* İstif'al: Uçuk Tatlı Pembe */

/* Büyüyen Kutu Efektleri ve Çakışma Önleyiciler */
.zoom-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.4) !important; 
    /* backdrop-filter removed for performance */
    -webkit-/* backdrop-filter removed for performance */
    z-index: 9990 !important; 
    display: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1000;
}

.zoom-overlay.active { display: block; }

.pulse-highlight {
    transform: translate3d(var(--move-x), var(--move-y), 0) scale(4) rotate(0.001deg) !important;
    z-index: 99999 !important; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
    transform-origin: center center;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    will-change: transform;
}

.glass-box.pulse-settled {
    transition: none !important; 
    animation: none !important;
    transform: translate(var(--move-x), var(--move-y)) scale(4) !important;
    will-change: auto !important; 
}

.glass-box.pulse-highlight * { animation: none !important; }
.glass-box.pulse-highlight { animation: none !important; }

.glass-box.pulse-highlight .ref {
    transform: scale(0.95) !important; 
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.9) !important; 
    background-color: #FF3B30 !important; 
    color: #ffffff !important; 
}

.current-active-red {
    border-color: #FF3B30 !important; 
    background-color: #fffaf9 !important; 
    box-shadow: inset 0 3px 8px rgba(255, 59, 48, 0.15), 0 1px 2px rgba(255, 59, 48, 0.1) !important; 
    z-index: 100;
}

/* Kök türetilmiş kutuların varsayılan yeşil arka planı (Kırmızı aktif değilse) */
.glass-box.kok-turendi:not(.current-active-red) {
    background-color: #bfffdf !important;
}

/* Kutu BÜYÜTÜLMEDİĞİ SÜRECE aşağı basık durur (Büyüyen Klonları Hariç Tutar!) */
.glass-box.current-active-red:not(.pulse-highlight):not(.crisp-zoom-clone):not(.matrix-opened) {
    transform: translateY(2px) !important; 
}

/* Fareyle üzerine gelindiğinde zıplamasını engeller (Büyüyen Klonları Hariç Tutar!) */
.glass-box.current-active-red:not(.pulse-highlight):not(.crisp-zoom-clone):not(.matrix-opened):hover {
    transform: translateY(2px) !important; 
    background-color: #fff0ed !important; 
    box-shadow: inset 0 4px 12px rgba(255, 59, 48, 0.25), 0 1px 2px rgba(255, 59, 48, 0.1) !important; 
    border-color: #e6352b !important; 
}

.glass-box.current-active-red.pulse-highlight:hover {
    background-color: #fff0ed !important; 
    border-color: #FF3B30 !important; 
    box-shadow: 0 15px 40px rgba(255, 59, 48, 0.25) !important; 
}


/* CÜMLE BUTONU (!) - Kırmızı Dolgulu Küçük Tasarım */
.easter-egg-trigger {
    position: absolute;
    top: -8px;   
    left: -8px; 
    width: 20px;  
    height: 20px;
    background: #FF3B30; 
    color: #ffffff;      
    border: 1.5px solid #ffffff; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    z-index: 100;
    font-size: 13px;
    font-family: 'Arakom', sans-serif;
    font-weight: normal;
    animation: elegantRedGlow 2s infinite alternate;
    transition: transform 0.2s ease;
}

.easter-egg-trigger:hover { transform: scale(1.15); }

@keyframes elegantRedGlow {
    0% { box-shadow: 0 1px 3px rgba(255, 59, 48, 0.3); }
    100% { box-shadow: 0 0 8px rgba(255, 59, 48, 0.7); }
}

.easter-egg-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999999 !important;
    justify-content: center;
    align-items: center;
    animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUpModal {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.easter-egg-content {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Mobilde taşmayı önleyen kritik özellik */
    box-sizing: border-box;
    /* Çarpı butonu metinle üst üste binmesin diye üstten 60px padding */
    padding: 60px 20px 30px 20px; 
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    text-align: center;
    
    width: 96vw !important; 
    max-width: 1800px !important;
    max-height: 85vh !important; 
    overflow-y: auto !important; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.2) inset;
    animation: scaleUpModal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll (Kaydırma Çubuğu) Tasarımı */
.easter-egg-content::-webkit-scrollbar {
    width: 8px;
}
.easter-egg-content::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 20px;
    margin-bottom: 20px;
}
.easter-egg-content::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.5);
    border-radius: 20px;
}
.easter-egg-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.8);
}

/* Kapatma Butonu Tasarımı */
.easter-egg-close-btn {
    position: absolute;
    top: 25px; 
    right: 25px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-weight: normal;
    font-family: 'Arakom', sans-serif;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

.easter-egg-close-btn:hover { 
    transform: scale(1.1) rotate(90deg); 
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
}

.easter-egg-ar {
    font-size: 110px; 
    direction: rtl; 
    color: #0f172a;
    margin-bottom: 20px; 
    line-height: 1.2;
    font-family: 'Arakom', sans-serif !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.easter-egg-tr {
    font-size: 60px; 
    direction: ltr; 
    color: #dc2626;
    line-height: 1.3;
    font-family: 'Arakom', sans-serif !important;
    font-weight: normal;
}

.sentence-emoji-header {
    width: 100%; display: flex; justify-content: center; align-items: center;
    padding: 10px 0; margin-bottom: 10px;
}

.sentence-emoji-badge {
    font-size: 40px; background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px; border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid rgba(255, 255, 255, 0.5);
    /* backdrop-filter removed for performance */
}

/* TAM EKRAN MODU */
.matrix-fullscreen-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #ffffff !important; z-index: 9999999 !important; overflow: hidden; 
    padding: 0; box-sizing: border-box; direction: rtl; align-items: center; justify-content: center;
}

.matrix-fullscreen-content {
    width: 100%; height: 100%; max-width: 100%;
    position: relative; display: flex; flex-direction: column; justify-content: center;
}

.matrix-fullscreen-close {
    position: absolute; top: 18px; left: 18px; width: 50px; height: 50px;
    background: #ffffff; border: 3px solid #000000; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 28px; color: #000000; 
    cursor: pointer;
    z-index: 1000; z-index: 99999999; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-family: 'Arakom', sans-serif; transition: transform 0.1s ease;
}
.matrix-fullscreen-close:active { transform: scale(0.9); }

.matrix-fullscreen-table {
    width: 100%; height: 95%; border-collapse: collapse; margin: auto 0; table-layout: fixed; 
}
.matrix-fullscreen-table th {
    background-color: #FF3B30 !important; color: #FFFFFF !important; border: 3px solid #000000;
    padding: 1vh 1vw; font-size: clamp(20px, 3.5vh, 30px); font-family: 'Arakom', sans-serif !important;
    font-weight: normal !important; text-align: center; height: 6vh; 
}
.matrix-fullscreen-table td {
    border: 3px solid #000000; padding: 1vh 1vw; text-align: center; background: #ffffff; vertical-align: middle;
}
.matrix-fullscreen-text {
    font-size: clamp(24px, 10vh, 100px); color: #000000; display: block;
    font-family: 'Arakom', sans-serif !important; font-weight: normal !important; line-height: 1.1;
    white-space: nowrap;
}
.matrix-expand-btn {
    position: absolute; top: 4px; left: 12px; color: #2B88D9; font-size: 18px; cursor: pointer;
    z-index: 1000;
    z-index: 1000001; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.matrix-expand-btn:hover { transform: scale(1.2); }

@keyframes glowingPlus {
    0% { transform: scale(1); color: #000; text-shadow: none; }
    50% { transform: scale(1.6); color: #FF3B30; text-shadow: 0 0 15px rgba(255, 59, 48, 0.8); }
    100% { transform: scale(1); color: #000; text-shadow: none; }
}

.plus-highlighted { animation: glowingPlus 1.2s infinite !important; color: #FF3B30 !important; }

/* Uzun Basma (Long Press) Tuş Varyasyon Menüsü */
.key-variations-menu {
    position: absolute; background: #ffffff; border: 2px solid #000; border-radius: 12px;
    padding: 6px; gap: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 99999999 !important; display: flex; flex-direction: row-reverse; 
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.var-key {
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    background: #f5f5f7; color: #000; border: 1px solid #ccc; border-radius: 8px; cursor: pointer;
    z-index: 1000;
    font-size: 1.6rem; font-family: 'Arakom', sans-serif !important; user-select: none; transition: background 0.2s;
}
.var-key:hover { background: #d1d1d6; }

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.8) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 3 BOYUTLU AHŞAP KÖK TAŞI (YATAYDA UZATILMIŞ) */
.draggable-root-clone {
    position: absolute; z-index: 2000; font-family: 'Arakom', sans-serif;
    font-weight: normal !important; font-size: 2.6rem; color: #000000; direction: rtl;
    pointer-events: auto; cursor: grab; user-select: none; white-space: nowrap;
    background-color: #e4be97; 
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 2px, transparent 2px, transparent 6px); 
    
    /* İŞTE BURASI: Sağ ve sol boşluklar (45px) artırılarak kutu yatayda uzatıldı */
    padding: 8px 15px 15px 0px !important; 
    min-width: 180px; /* Kutuya standart bir yatay uzunluk verir */
    text-align: center; /* Kutu uzasa da Arapça kök tam ortada kalır */
    
    line-height: 1.2 !important;
    border-radius: 10px; border: 2px solid #5c3a21; 
    box-shadow: 5px 5px 0px #5c3a21, 0px 10px 20px rgba(0,0,0,0.3); text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); 
}
.draggable-root-clone:active { cursor: grabbing; }

/* KÜÇÜK LEVHA YALNIZ DEV KLON EKRANDAYKEN ÇEKİLİR. Eskiden ölçüt
   BÜYÜTME ANAHTARIYDI: anahtar açık ama hiçbir vezin büyütülmemişken
   ekranda hiç kök levhası kalmıyordu (dev klon ancak bir vezne
   dokununca doğuyor). Artık anahtar açıkken de kök hep görünüyor;
   yalnız dev klon çıktığında yerini ona bırakıyor (Geylani: "büyütme
   açıkken … kök levhası vezinlerin üstünde görünsün"). */
body:has(#crisp-root-clone) .draggable-root-clone:not(#crisp-root-clone) {
    opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease !important;
}

.sari-vurgu {
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.8), inset 0 0 10px rgba(255, 204, 0, 0.3) !important;
    background-color: #fffde7 !important; transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

/* FİİL NUMARALARINI BUTONA ÇEVİRME (Tekrarlar temizlendi) */
.glass-box.fiil-box.kok-turendi .ref,
.glass-box.coklu-kullanim.kok-turendi .ref {
    background-color: #FF3B30 !important; color: #ffffff !important; border-radius: 5px; 
    padding: 0px 5px; transform: scale(0.95); -webkit-text-stroke: 0 !important; 
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.7); cursor: pointer;
    z-index: 1000; z-index: 105; 
    pointer-events: auto; animation: refPulse 1.5s infinite;
}

.glass-box.fiil-box.kok-turendi .ref:hover,
.glass-box.coklu-kullanim.kok-turendi .ref:hover {
    background-color: #d62828 !important; transform: scale(1.1); 
}

@keyframes refPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { box-shadow: 0 0 0 4px rgba(255, 59, 48, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* YENİ KÖK SEÇME EKRANI (TAM EKRAN + POPUP KLAVYE) */
.verb-overlay {
    background-color: #eef2f5 !important;
    width: 100vw !important; height: 100vh !important;
    position: fixed; top: 0; left: 0; z-index: 99999999;
    display: none; /* js ile açılır */
    margin: 0; padding: 0;
}

.new-verb-layout {
    display: flex; flex-direction: column; width: 100%; height: 100%;
    padding: 15px 3vw; box-sizing: border-box; overflow: hidden;
}

.root-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 15px; width: 90%; 
    margin-left: auto; margin-right: auto; flex-shrink: 0; justify-content: center; direction: ltr;
}

#root-search {
    flex: 1; height: 55px; font-size: 24px; font-family: 'Arakom', sans-serif;
    padding: 0 20px; background: #ffffff; color: #2c3e50; border: 2px solid #FF3B30 !important; 
    border-radius: 15px; outline: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 0 10px rgba(255, 59, 48, 0.1); 
    text-align: left !important; direction: ltr !important; cursor: text; transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

#root-search:focus {
    border-color: #d62828 !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 0 15px rgba(255, 59, 48, 0.3);
}

.verb-close-btn {
    background: #ffffff; border: 2px solid #cbd5e1; border-radius: 50%;
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #64748b; cursor: pointer;
    z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: 0.2s; flex-shrink: 0; 
}
.verb-close-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; transform: scale(1.05); }

/* TAHMİN (ÖNERİ) ÇUBUĞU */
.root-predictions {
    display: flex; gap: 10px; padding: 5px 0 15px 0; flex-shrink: 0;
    justify-content: center; flex-wrap: wrap; 
}
.prediction-chip {
    background: #f0fdf4; color: #166534; padding: 8px 20px; border-radius: 20px;
    font-family: 'Arakom', sans-serif; font-size: 22px; cursor: pointer;
    z-index: 1000; white-space: nowrap;
    border: 2px solid #34C759 !important; box-shadow: 0 4px 10px rgba(52, 199, 89, 0.15); 
    font-weight: normal; transition: 0.2s;
}
.prediction-chip:hover { transform: scale(1.05); background: #dcfce7; box-shadow: 0 6px 15px rgba(52, 199, 89, 0.3); }

/* ========================================================= */
/* KLAVYE AÇILDIĞINDA ÖNEMLİ KÖKLERİ GİZLEME (YENİ EK)       */
/* ========================================================= */
body:has(.integrated-keyboard-popup.active) #important-roots-list,
body:has(.integrated-keyboard-popup.active) .important-roots-wrapper {
    display: none !important;
}


/* ÖNEMLİ KÖKLER LİSTESİ (Ortalanmış ve Yeşil) */
#important-roots-list {
    display: flex; flex-wrap: wrap; justify-content: center !important; gap: 12px; padding: 10px 0 25px 0;
}
.important-roots-wrapper .section-title { text-align: center !important; width: 100%; margin-bottom: 15px; }

#important-roots-list .flat-root-item {
    background-color: #f0fdf4 !important; color: #166534 !important;
    border-top: 1px solid #86efac !important; border-left: 1px solid #86efac !important;
    border-right: 1px solid #86efac !important; border-bottom: 4px solid #22c55e !important; 
    box-shadow: 0 4px 10px rgba(52, 199, 89, 0.15); font-weight: normal; border-radius: 10px;
}
#important-roots-list .flat-root-item:hover { background-color: #dcfce7 !important; border-bottom-color: #16a34a !important; transform: translateY(-2px); }
#important-roots-list .flat-root-item:active { border-top: 2px solid #86efac !important; border-bottom-width: 1px !important; transform: translateY(2px); box-shadow: none; }

.section-title.left-aligned {
    text-align: left; margin: 0 0 10px 0; font-size: 18px; color: #64748b;
    border-bottom: 2px solid rgba(200, 210, 224, 0.5); padding-bottom: 5px;
}

.flat-root-list { display: flex; flex-wrap: wrap; gap: 10px; }
.flat-root-item {
    display: flex; flex-direction: row-reverse; align-items: center; justify-content: center;
    gap: 8px; background-color: #f8f9fa !important; color: #000; padding: 10px 18px; 
    font-family: 'Arakom', sans-serif; font-size: 22px; cursor: pointer;
    z-index: 1000; border-radius: 8px; 
    border-top: 1px solid #d1d5db !important; border-left: 1px solid #d1d5db !important;
    border-right: 1px solid #d1d5db !important; border-bottom: 3px solid #9ca3af !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); transition: transform, background-color, color, opacity, box-shadow 0.1s ease;
}
.flat-root-item:hover { background-color: #ffffff !important; border-bottom-color: #64748b !important; }
.flat-root-item:active { border-bottom-width: 1px !important; transform: translateY(2px); }

.letters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; height: 100%; }
.letter-column {
    display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
    padding-right: 5px; background: #e5e5ea !important; border: 4px solid #ffffff !important; 
    border-radius: 12px; padding-bottom: 20px;
}
.letter-column::-webkit-scrollbar { width: 5px; }
.letter-column::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }

.col-range-header {
    text-align: center; font-weight: normal; background: #2B88D9 !important; color: #ffffff !important;
    border-bottom: 4px solid #ffffff !important; padding: 10px; position: sticky; top: 0; z-index: 1010; 
    font-size: 18px; font-family: 'Arakom', sans-serif; border-radius: 8px 8px 0 0;
    margin-top: -4px; margin-left: -4px; margin-right: -4px;
}
.letter-group-title { font-size: 26px; font-family: 'Arakom', sans-serif; color: #f28b82; text-align: center; border-bottom: 1px dashed rgba(242, 139, 130, 0.4); margin: 10px 15px 5px; }

/* Küçük Yüzen (Popup) Butonlar */
.floating-mini-btns { position: absolute; bottom: 30px; right: 3vw; display: flex; flex-direction: column; gap: 15px; z-index: 100; }
.mini-popup-btn {
    color: #2c3e50; border: 1px solid rgba(255,255,255,0.8); padding: 12px 25px; border-radius: 30px;
    font-family: 'Arakom', sans-serif; font-size: 18px; box-shadow: 0 6px 15px rgba(0,0,0,0.06); cursor: pointer;
    z-index: 1000; transition: 0.3s; font-weight: normal;
}
.mini-popup-btn.btn-aksam { background: rgba(163, 191, 250, 0.9); }
.mini-popup-btn.btn-mezid { background: rgba(252, 165, 165, 0.9); }

/* POPUP KLAVYE TASARIMI */
.integrated-keyboard-popup {
    position: fixed; bottom: -100%; left: 0; width: 100vw;
    background: rgba(255,255,255,0.85); /* backdrop-filter removed for performance */ -webkit-/* backdrop-filter removed for performance */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1); transition: bottom 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10000; border-top-left-radius: 25px; border-top-right-radius: 25px; padding-bottom: 25px; border-top: 1px solid #ffffff;
}
.integrated-keyboard-popup.active { bottom: 0; }

.keyboard-popup-dragbar { width: 100%; height: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 1000; }
.keyboard-popup-dragbar div { width: 50px; height: 6px; background: #cbd5e1; border-radius: 10px; pointer-events: none;}

.integrated-keyboard-inner { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 0px 20px; }
.search-kb-row { display: flex; justify-content: center; gap: 10px; direction: ltr; }
.search-key {
    width: 55px; height: 55px; display: flex; align-items: center; justify-content: center;
    background: #1d1d1f; color: #ffffff; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    cursor: pointer;
    z-index: 1000; font-size: 26px; font-family: 'Arakom', sans-serif; user-select: none; transition: 0.1s;
}
.search-key:active { background: #323236; transform: scale(0.95); }
.search-key.backspace { background: #600; min-width: 80px; }

/* Slide Menü */
.slide-up-menu {
    position: fixed; bottom: -100%; left: 0; width: 100vw; height: 65vh; 
    background: rgba(248, 250, 252, 0.95); /* backdrop-filter removed for performance */ border-top: 1px solid rgba(255,255,255,0.9);
    border-top-left-radius: 30px; border-top-right-radius: 30px; box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
    transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; padding: 20px 3vw; box-sizing: border-box; z-index: 105;
}
.slide-up-menu.active { bottom: 0; }
.slide-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid rgba(200, 210, 224, 0.5); padding-bottom: 15px; }
.slide-header h3 { margin: 0; font-size: 24px; color: #334155; }
.slide-close { background: #f1f5f9; border: none; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    z-index: 1000; color: #ef4444; font-weight: normal;}
.slide-content { overflow-y: auto; flex: 1; align-content: flex-start;}

/* --- KLAVYE İÇİN GÖRÜNMEZ TIKLAMA KALKANI (İPTAL EDİLDİ) --- */
.keyboard-backdrop { 
    display: none !important; 
    pointer-events: none !important; 
}
.keyboard-backdrop.active { 
    display: none !important; 
    pointer-events: none !important; 
}

.slide-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: transparent; z-index: 104; }
.slide-backdrop.active { display: block; }


/* ========================================================= */
/* YÜKSEK ÇÖZÜNÜRLÜKLÜ KLON (ZOOM BULANIKLIK ÇÖZÜMÜ)         */
/* ========================================================= */
.crisp-zoom-clone {
    position: fixed !important; 
    top: 35% !important; 
    left: 50% !important; 
    /* DİKKAT: !important takısı kaldırıldı ki büyüme/açılma animasyonu çalışabilsin */
    transform: translate(-50%, -50%); 
    margin: 0 !important;
    z-index: 999999 !important;
    width: auto !important;
    min-width: 400px !important;
    min-height: 120px !important;
    padding: 35px 55px !important;
    background-color: #fffaf9 !important; 
    border: 4px solid #FF3B30 !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(255, 59, 48, 0.3) !important;
    animation: crispPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    will-change: auto !important; 
    cursor: default !important;
}

/* KAHVERENGİ KÖK TAŞI KLONU */
.crisp-root-clone {
    position: fixed !important; 
    top: 75% !important; 
    left: 50% !important; 
    /* DİKKAT: !important takısı kaldırıldı ki büyüme/açılma animasyonu çalışabilsin */
    transform: translate(-50%, -50%); 
    margin: 0 !important;
    z-index: 999999 !important;
    background-color: #e4be97 !important; 
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 2px, transparent 2px, transparent 6px) !important;
    border: 3px solid #5c3a21 !important; 
    border-radius: 18px !important; 
    padding: 15px 40px !important;
    box-shadow: 6px 6px 0px #5c3a21, 0 20px 50px rgba(0,0,0,0.4) !important;
    animation: crispPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; 
    pointer-events: none !important;
}

#crisp-root-clone .root-clone-buttons {
    display: none !important;
}

.crisp-zoom-clone .ar, .crisp-zoom-clone .ar-small {
    font-size: 180px !important; line-height: 1.2 !important; white-space: nowrap !important;
}

.crisp-zoom-clone .ref {
    font-size: 26px !important; top: 15px !important; right: 15px !important; padding: 4px 12px !important;
    border-radius: 8px !important; background-color: #FF3B30 !important; color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 59, 48, 0.6) !important; animation: none !important; 
}

.crisp-zoom-clone .easter-egg-trigger {
    width: 45px !important; height: 45px !important; font-size: 24px !important;
    top: -15px !important; left: -15px !important; cursor: pointer !important;
}


.crisp-root-clone .ar-root {
    font-family: 'Arakom', sans-serif !important; font-size: 130px !important; color: #000000 !important; 
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4) !important; line-height: 1.2 !important; white-space: nowrap !important;
    display: block !important; direction: rtl !important; padding-bottom: 0px !important; 
}

.crisp-root-clone.is-ghost {
    opacity: 0.4 !important;
    filter: grayscale(30%) !important;
    pointer-events: none !important;
}

@keyframes crispPopIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.glass-box.crisp-zoom-clone:hover {
    border-color: #FF3B30 !important; background-color: #fffaf9 !important; transform: translate(-50%, -50%) scale(1) !important; 
}
.glass-box.crisp-zoom-clone[style*="#bfffdf"]:hover { border-color: #000000 !important; background-color: #bfffdf !important; }

/* ARTI (+) MENÜSÜ */
/* ÖLÇEK YOK — YAZI NET.
   Menü eskiden `transform: scale(1.1)` ile büyütülüyordu; kutuda
   `translateZ(0)` de olduğu için tarayıcı katmanı 1× rasterleyip sonra
   %10 esnetiyordu, yazılar bu yüzden puslu çıkıyordu (Geylani: "+
   basınca çıkan tabloda yazı neden net değil"). Ölçek kaldırıldı,
   büyüklük doğrudan ölçülere (yazı boyu, dolgu, boşluk) %10 eklenerek
   verildi: görünüm aynı, yazı keskin. Üstelik geniş hâlde ölçek
   olmadığı için açılış/kapanış animasyonunda da içerik zıplamıyor. */
#suffix-dropdown {
    transform: none !important;
    z-index: 9999999 !important;
    width: max-content !important; /* YENİ EKLENEN: Sütunların sıkışmasını engeller */
}
#suffix-dropdown .suffix-btn { font-size: 33px; padding: 9px 13px; border-radius: 13px; }
#suffix-dropdown .key.suggested-suffix {
    background-color: #fbbf24 !important; color: #1e293b !important; border-color: #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); transform: scale(1.08); font-weight: normal; transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

.plus-hint-badge {
    position: absolute; bottom: -10px; right: -10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(245, 158, 11, 0.5)); 
    color: rgba(255, 255, 255, 0.75); font-size: 14px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.2); animation: pulseHintBadge 1.5s infinite;
    z-index: 20; pointer-events: none; /* backdrop-filter removed for performance */ 
}

@keyframes pulseHintBadge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ==========================================================================
   GÜNCEL: AKILLI YÜZEREK UÇAN EMOJİ (HASSAS KONUM AYARLI)
   ========================================================================== */
.elegant-emoji {
    position: absolute; 
    width: 100%; 
    left: 0;
    top: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 110px; 
    /* DEV KLONUN DA ÜSTÜNE ÇIKMASI İÇİN Z-INDEX EN ZİRVEYE ALINDI */
    z-index: 99999999 !important; 
    pointer-events: none; 
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35)); 
    opacity: 0; 
}

/* 1. Aşağıdaki Kalıplar -> Yukarı Uçar */
.pop-up-right { animation: floatUpRight 2.5s ease-out forwards; }
.pop-up-left { animation: floatUpLeft 2.5s ease-out forwards; }

/* 2. Yukarıdaki Kalıplar -> Aşağı Uçar */
.pop-down-right { animation: floatDownRight 2.5s ease-out forwards; }
.pop-down-left { animation: floatDownLeft 2.5s ease-out forwards; }

/* 3. BÜYÜTÜLMÜŞ DEV KLON -> Sağdan fırlar! */
.pop-zoom-right { animation: floatZoomRight 2.5s ease-out forwards; }


/* ORTA VE ALT KALIPLAR (YUKARI UÇARLAR) */
@keyframes floatUpRight {
    0% { transform: translate(0, -120px) scale(0); opacity: 0; }
    20% { transform: translate(30px, -150px) scale(1.1); opacity: 1; }
    40% { transform: translate(50px, -170px) scale(1); opacity: 1; }
    100% { transform: translate(90px, -230px) scale(0.8); opacity: 0; }
}
@keyframes floatUpLeft {
    0% { transform: translate(0, -120px) scale(0); opacity: 0; }
    20% { transform: translate(-30px, -150px) scale(1.1); opacity: 1; }
    40% { transform: translate(-50px, -170px) scale(1); opacity: 1; }
    100% { transform: translate(-90px, -230px) scale(0.8); opacity: 0; }
}

/* ÜST KALIPLAR (AŞAĞI UÇARLAR) */
@keyframes floatDownRight {
    0% { transform: translate(0, 30px) scale(0); opacity: 0; }
    20% { transform: translate(30px, 70px) scale(1.1); opacity: 1; }
    40% { transform: translate(50px, 90px) scale(1); opacity: 1; }
    100% { transform: translate(90px, 140px) scale(0.8); opacity: 0; }
}
@keyframes floatDownLeft {
    0% { transform: translate(0, 30px) scale(0); opacity: 0; }
    20% { transform: translate(-30px, 70px) scale(1.1); opacity: 1; }
    40% { transform: translate(-50px, 90px) scale(1); opacity: 1; }
    100% { transform: translate(-90px, 140px) scale(0.8); opacity: 0; }
}

/* BÜYÜME (ZOOM) KLONU ÖZEL: DAHA SAĞDA, DAHA AŞAĞIDA VE ÇOK DAHA BÜYÜK
   - X Ekseni: +280px ile sağdan başlar
   - Y Ekseni: +60px yapılarak merkezin daha aşağısından başlatıldı
   - Boyut: scale() 1.7'ye çıkartılarak devasa boyuta getirildi! */
@keyframes floatZoomRight {
    0% { transform: translate(280px, 60px) scale(0); opacity: 0; }
    20% { transform: translate(320px, 40px) scale(1.7); opacity: 1; }
    40% { transform: translate(340px, 20px) scale(1.6); opacity: 1; }
    100% { transform: translate(420px, -20px) scale(1.2); opacity: 0; }
}

.ornek-box {
    margin-top: 20px; 
    padding: 25px; 
    background: #f0f8ff; 
    border-radius: 12px; 
    border-right: 6px solid #2B88D9; 
    text-align: center !important; 
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Örnek kutusu içindeki Arapça yazının devasa boyutu */
.ornek-box .easter-egg-ar {
    font-size: 85px !important; 
    margin-bottom: 20px !important;
}

/* Örnek kutusu içindeki Türkçe yazının devasa boyutu */
.ornek-box .easter-egg-tr {
    font-size: 55px !important; 
}

body.matrix-active { overflow: hidden !important; }



/* HAZIR KÖK İKONU YÖNLENDİRME ANİMASYONU */
@keyframes bookWavePulse {
    0% { box-shadow: 0 0 0 0 rgba(43, 136, 217, 0.45); transform: scale(1); }
    70% { box-shadow: 0 0 0 4px rgba(43, 136, 217, 0); transform: scale(1.035); }
    100% { box-shadow: 0 0 0 0 rgba(43, 136, 217, 0); transform: scale(1); }
}

.ready-root-hint {
    animation: bookWavePulse 1.5s infinite ease-out !important;
    color: #2B88D9 !important; 
    border-radius: 50% !important; 
    display: inline-block; 
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

.siga-tr-text {
    display: block; font-family: 'Arakom', sans-serif !important; font-size: 16px; color: #555555; margin-top: 8px; font-weight: normal;
}

/* =============================================================== */
/* 3D PREMIUM BUTON TASARIMI (Mekanik Tuş Hissi) */
/* =============================================================== */
.suffix-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f7 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 1000;
    transition: transform, background-color, color, opacity, box-shadow 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: 'Arakom', sans-serif;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    /* 3D KATMANLARI: İç Işık + Alt Kalınlık Zırhı + Yumuşak Zemin Gölgesi */
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.9),  /* Tuşun üst kenarındaki ışık yansıması */
        0 4px 0 #d1d1d6,                         /* 3D tuşun fiziksel alt kalınlığı */
        0 5px 8px rgba(0, 0, 0, 0.1);            /* Tuşun panele düşen dış gölgesi */
        
    transform: translateY(0);
}

.suffix-btn:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5ea 100%);
    /* Üzerine gelince gölge ve kalınlık çok hafif belirginleşir */
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 1), 
        0 4px 0 #c7c7cc, 
        0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.suffix-btn:active {
    background: #e5e5ea;
    /* Tuşa basıldığı an fiziksel kalınlık (4px) yok olur, tuş aşağı çöker */
    transform: translateY(4px); 
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.1),      /* İçeri göçme hissi veren iç gölge */
        0 0 0 #c7c7cc,                           /* Alt kalınlık sıfırlandı */
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ========================================================= */
/* ÖNERİLEN EKLER İÇİN ALTIN SARI VURGU (İPUCU SİSTEMİ)      */
/* ========================================================= */
.suffix-btn.suggested-suffix {
    background-color: #FFD700 !important; /* Altın Sarısı */
    border-color: #D4AF37 !important;
    color: #000 !important;
    font-weight: 900 !important;
    transform: scale(1.05) !important; /* Öğrenci görsün diye hafifçe büyütür */
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important;
    animation: ipucuParla 1.5s infinite !important; /* Tatlı bir yanıp sönme efekti */
}

@keyframes ipucuParla {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
}

.suffix-menu-grid {
    display: grid; /* !important TAKISI KALDIRILDI */
    grid-template-columns: 1fr 1fr; 
    gap: 12px !important;            
    padding: 20px !important;       
    background: rgba(255, 255, 255, 0.98) !important;
    /* backdrop-filter removed for performance */
    border: 2px solid rgba(0, 0, 0, 0.1); 
    border-radius: 24px;            
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    width: 220px !important;        
    min-width: 220px !important;
    direction: rtl;
    z-index: 9999;                  
    position: absolute;
}

.menu-divider {
    grid-column: span 2; 
    height: 3px;                     /* Çizgiyi biraz kalınlaştırdık */
    background: #FF3B30 !important; 
    margin: 8px 0;                   /* Çizgi etrafındaki boşluğu artırdık */
    border-radius: 2px;
    opacity: 0.8;
}




.suffix-btn:active {
    background-color: #f3f4f6;
    transform: scale(0.92);         /* Basıldığında gözle görülür tepki */
}

/* =========================================================
   BAB BİLGİ (INFO) OVERLAY SİSTEMİ (EXTRA GENİŞ & KIRMIZI BUTON)
========================================================= */
.bab-info-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.7); /* Arka planı hafif daha koyulaştırdık ki kutu öne çıksın */
    /* backdrop-filter removed for performance */ 
    z-index: 999999; 
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bab-info-overlay.active {
    opacity: 1;
}

/* Kutunun Kendisi - ÇOK DAHA GENİŞ */
.bab-info-content {
    background: linear-gradient(145deg, #ffffff, #f8fafc); 
    padding: 50px 60px; /* İçeriden biraz daha boşluk verdik */
    border-radius: 32px; 
    width: 95%;
    max-width: 1100px; /* 800px'den 1100px'e çıkardık! Artık devasa. */
    max-height: 90vh; 
    display: flex;
    flex-direction: column; 
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5), 0 0 0 1px rgba(226,232,240,0.5); 
    position: relative;
    transform: translateY(20px) scale(0.95); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    direction: ltr; 
}

.bab-info-overlay.active .bab-info-content {
    transform: translateY(0) scale(1); 
}

/* Kapatma Butonu (Sağ Köşe, Kırmızı Tasarım) */
.close-info-btn {
    position: absolute;
    top: 25px; right: 25px; /* Tam sağ üst köşeye milimetrik hizalandı */
    background: #ef4444; /* Dikkat çekici, canlı kırmızı renk */
    border: none;
    width: 50px; height: 50px; /* Biraz daha büyüttük */
    border-radius: 50%;
    font-size: 24px;
    color: #ffffff; /* İçi bembeyaz çarpı/ikon */
    cursor: pointer;
    z-index: 1000;
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); /* Etrafına kırmızımsı parlama efekti */
    z-index: 10;
}

.close-info-btn:hover {
    background: #dc2626; /* Üzerine gelince daha koyu, tok bir kırmızı */
    transform: rotate(90deg) scale(1.15); /* Hem dönüp hem büyüyerek harika bir his verir */
}

/* Başlık */
.bab-info-title {
    font-family: 'Arakom', sans-serif;
    font-size: 46px; /* 40px'den 46px'e çıkarıldı */
    color: #0f172a; 
    margin-top: 0; 
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
    border-bottom: 3px solid #e2e8f0; 
    padding-bottom: 20px;
    flex-shrink: 0; 
}

/* Bilgi Metni ve SCROLL Özelliği - DAHA BÜYÜK YAZI */
.bab-info-text {
    font-family: 'Arakom', sans-serif;
    font-size: 34px; /* 30px'den 34px'e çıkarıldı, artık daha da okunaklı */
    color: #334155; 
    line-height: 1.75; 
    font-weight: 500; 
    text-align: left;
    
    /* SCROLL MOTORU */
    overflow-y: auto; 
    max-height: 65vh; /* Yazı alanı sınırını biraz daha artırdık */
    padding-right: 25px; 
}

/* Şık Kaydırma Çubuğu (Scrollbar) Tasarımı */
.bab-info-text::-webkit-scrollbar {
    width: 10px;
}
.bab-info-text::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.bab-info-text::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.bab-info-text::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tablodaki Bilgi (i) İkonu - SAĞ ÜST KÖŞEYE SABİTLENDİ */
.info-icon {
    position: absolute; /* Kutu içinden bağımsız hareket etmesini sağlar */
    top: 8px; /* Yukarıdan boşluk */
    right: 8px; /* Sağdan boşluk */
    color: #94a3b8;
    font-size: 1.2em; 
    cursor: pointer;
    z-index: 1000;
    transition: transform, background-color, color, opacity, box-shadow 0.2s ease;
    z-index: 10;
}

.info-icon:hover {
    color: #ef4444; /* Üzerine gelince ikon da çarpı butonu gibi kırmızı olsun */
    transform: scale(1.3);
}

/* Arapça Örnek Kelimeler ve Paragraf Stilleri */
.arabic-sample {
    font-family: 'Arakom', serif;
    color: #3b82f6; 
    font-weight: normal;
    font-size: 1.45em; /* Arapça kelimeler 34px'e göre oranlandı */
    direction: rtl;
    display: inline-block;
    padding: 0 6px;
}

.bab-info-text p {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px dashed #e2e8f0; 
}

.bab-info-text p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* =========================================================
   MARATON TELAFFUZ MODU (ORİJİNAL AYDINLIK TEMA)
========================================================= */
.marathon-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #f1f2f6; z-index: 9999999;
    display: none; flex-direction: column; overflow: hidden;
    font-family: 'Arakom', sans-serif;
    
    /* İŞTE KESİN ÇÖZÜM: Tüm sistemi soldan sağa (Türkçe) düzenine zorlar */
    direction: ltr !important; 
}
.marathon-overlay.active { display: flex; }

#game-wrapper {
    flex: 1; background: white; margin: 10px; border-radius: 20px;
    display: flex; flex-direction: column; overflow: hidden; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

#top-bar-panel {
    background: #f8f9fa; border-bottom: 3px solid #eee;
    display: grid; grid-template-columns: repeat(6, 1fr);
    align-items: center; justify-items: center;
    height: 70px; flex-shrink: 0; padding: 0 10px;
}

.header-item { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ui-hidden { visibility: hidden; opacity: 0; transition: 0.3s; }
.ui-visible { visibility: visible !important; opacity: 1 !important; }

.back-nav { 
    font-size: 1.1rem; border: 2px solid #6c5ce7; 
    background: white; color: #6c5ce7; padding: 8px 15px;
    border-radius: 12px; cursor: pointer;
    z-index: 1000; font-weight: normal; transition: 0.2s;
}
.back-nav:hover { background: #6c5ce7; color: white; }

.chrono-btn { font-size: 2.2rem; background: none; border: none; filter: grayscale(1); transition: 0.3s; }
.chrono-btn.active { filter: grayscale(0); transform: scale(1.1); }
.pause-circle { width: 45px; height: 45px; border-radius: 50%; border: none; background: #636e72; color: white; cursor: pointer;
    z-index: 1000; font-size: 1.2rem; }
.stage-badge { background: #6c5ce7; color: white; padding: 5px 15px; border-radius: 10px; font-size: 1.1rem; font-weight: normal; }
.timer-val { font-size: 2.2rem; font-weight: normal; color: #ff7675; font-family: monospace; }
.score-val { font-size: 2.2rem; font-weight: normal; color: #6c5ce7; }

.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 75px; height: 110px; background: rgba(108, 92, 231, 0.1);
    border: none; border-radius: 15px; cursor: pointer;
    z-index: 1000;
    font-size: 3rem; color: #6c5ce7; z-index: 50; display: flex;
    transition: 0.3s;
}
.nav-arrow:disabled { opacity: 0.1; cursor: not-allowed; }
.arrow-right.finish-ready { background: #ff7675; color: white; }

.marathon-screen { display: none; flex: 1; flex-direction: column; padding: 5px 20px; width: 100%; }
.marathon-screen.active { display: flex; }

.verb-table { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; direction: rtl; margin: 0 110px; }
.marathon-cell { 
    display: flex; align-items: center; justify-content: center; border-radius: 18px; 
    font-family: 'Arakom', serif; font-size: clamp(2.8rem, 9.5vh, 7.5rem); 
    font-weight: normal; border: 2px solid rgba(0,0,0,0.03); cursor: pointer;
    z-index: 1000;
}
.muez-row { background-color: #e3f2fd; color: #1565c0; }
.mue-row { background-color: #fce4ec; color: #c2185b; }
.marathon-cell.error-active { background-color: #ff7675 !important; color: white !important; }

#error-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; direction: rtl; }
.error-item { font-family: 'Arakom', serif; font-size: 2.5rem; background: #fee2e2; padding: 8px 20px; border-radius: 12px; color: #ff7675; border: 2px solid #ff7675; }

/* KAHVERENGİ KÖK KUTULARINA EKLENECEK KRONOMETRE BUTONU (LAZER KAZIMA EFEKTİ) */
.kutu-timer-btn {
    position: absolute; 
    top: 2px; /* Daha da köşeye yaslandı */
    right: 4px; /* Daha da köşeye yaslandı */
    left: auto;
    transform: none; 
    background: transparent; 
    border: none; 
    width: 36px; 
    height: 36px; 
    cursor: pointer;
    z-index: 1000;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: none; 
    z-index: 99999; 
    transition: transform 0.2s ease;
}

.kutu-timer-btn:hover { 
    transform: scale(1.1); 
}

.kutu-timer-btn svg {
    stroke: rgba(0, 0, 0, 0.85); 
    transition: transform, background-color, color, opacity, box-shadow 0.2s ease;
}

.kutu-timer-btn:hover svg {
    stroke: #000000; 
}

/* TAŞINABİLİR (SÜRÜKLENEBİLİR) KUTU İÇİN ÖZEL BOYUT VE KONUM */
.draggable-root-clone .kutu-timer-btn {
    width: 30px;
    height: 30px;
    top: 2px; /* Daha da köşeye yaslandı */
    right: 4px; /* Daha da köşeye yaslandı */
}
.draggable-root-clone .kutu-timer-btn svg {
    width: 18px; 
    height: 18px;
}


/* ==========================================================================
   FİİL ÇEKİMİ VE MARATON CİNSİYET (ERİL/DİŞİL) RENK EŞİTLEMESİ
   ========================================================================== */

/* 1. MARATON (KRONOMETRE) CİNSİYET RENKLERİ */
#table-view .marathon-cell.muez-row { 
    background-color: #e3f2fd !important; 
    color: #1565c0 !important; 
    border: 2px solid #bbdefb !important;
}
#table-view .marathon-cell.mue-row { 
    background-color: #fce4ec !important; 
    color: #c2185b !important; 
    border: 2px solid #f8bbd0 !important;
}
/* Ben/Biz (Mütekellim) Özel Sınıfı - Nötr Gri */
#table-view .marathon-cell.mutekellim-row {
    background-color: #f8fafc !important; 
    color: #334155 !important;
    border: 2px solid #cbd5e1 !important;
}

/* 2. POPUP (ÇEKİM TABLOSU) CİNSİYET RENKLERİ EŞİTLEMESİ */
.conjugation-table tbody tr:nth-child(1) td,
.conjugation-table tbody tr:nth-child(3) td {
    background-color: #e3f2fd !important; 
    color: #1565c0 !important;
    border: 2px solid #bbdefb !important;
}
.conjugation-table tbody tr:nth-child(2) td,
.conjugation-table tbody tr:nth-child(4) td {
    background-color: #fce4ec !important; 
    color: #c2185b !important;
    border: 2px solid #f8bbd0 !important;
}

/* ÖNEMLİ KORUMA: Maraton ekranında yanlış kelimeye tıklandığında yanan KIRMIZI hata rengini korur */
#table-view .marathon-cell.error-active {
    background-color: #fee2e2 !important; 
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

/* ==========================================================================
   ANA KLAVYE: TAHMİN ÇİPLERİ (YAZILAN KUTUNUN ÜZERİNDE)
   ========================================================================== */

#main-keyboard-predictions {
    /* display handled by js */
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important; /* Yazılan kutu ile arasına tatlı bir boşluk bırakır */
    min-height: 60px !important; 
    flex-wrap: wrap !important;
    width: 100% !important;
}

.prediction-chip {
    background-color: #ffffff !important; 
    color: #0f172a !important; 
    font-size: 2.2rem !important; 
    font-family: 'Arakom', sans-serif !important; 
    font-weight: normal !important;
    padding: 10px 25px !important; 
    border-radius: 20px !important; 
    border: 2px solid #cbd5e1 !important; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important; 
    cursor: pointer !important; 
    text-align: center !important;
    transition: transform 0.1s ease, background-color 0.2s ease !important;
    /* display handled by js */
    align-items: center !important;
    justify-content: center !important;
}

.prediction-chip:active {
    transform: scale(0.92) !important; 
    background-color: #f1f5f9 !important;
}

/* ==========================================================================
   HAZIR KÖKLER EKRANI: GEREKSİZ BOŞLUĞU SIFIRLAMA VE ÇARPIYI HİZALAMA
   ========================================================================== */

/* Kapatma butonunu köklerle aynı hizaya (sol köşeye) alır */
.root-header {
    position: absolute !important;
    top: 20px !important; /* Köklerle aynı üst hiza */
    right: 15px !important; /* Kökler sağdan dizildiği için çarpıyı sola çektik (çakışmaz) */
    right: auto !important; 
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50 !important;
    display: block !important;
}

/* Üstteki 50px'lik gereksiz boşluğu tamamen sıfırlar, içeriği en tepeye çeker */
.new-verb-layout {
    padding-top: 10px !important; 
    position: relative !important;
}


/* ==========================================================================
   HAZIR KÖKLER: SÜTUNLARIN EKRAN DIŞINA TAŞMASINI ENGELLEYEN KESİN ÇÖZÜM
   ========================================================================== */

/* 1. Ana taşıyıcıyı ekranın kendisine milimetrik olarak kilitler ve altından 25px boşluk bırakır */
.new-verb-layout {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important; 
    max-height: none !important;
    /* display handled by js */
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding-bottom: 0px !important; /* Ekranın altından bırakılan nefes boşluğu */
}

/* 2. Orta bölüm (Önemli kökler + Alfabe) kalan alanı doldurur */
.roots-main-content {
    flex: 1 !important; 
    /* display handled by js */
    flex-direction: column !important;
    min-height: 0 !important; /* İtme gücünü sıfırlar */
    gap: 5px !important; 
}

/* 3. Alfabe listesi taşıyıcısına "sınırlarını çizme" emri verir */
.letters-grid-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important; /* Mutlak ızgara için zemin hazırlar */
}

/* 4. İŞTE KESİN ÇÖZÜM: Izgarayı (Grid) dış çerçevenin içine hapseder. 1 piksel bile dışarı çıkamaz! */
.letters-grid {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
}

/* 5. Gri Sütunların kendisi (Kaydırma motoru içeride kalır) */
.letter-column {
    height: auto !important; 
    min-height: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-bottom: 15px !important; /* Sütunun içindeki son kelimenin yapışmasını önler */
}

/* ==========================================================================
   MOBİL MOTORU: DİKEY UYARI, YATAY MİNİ MOD VE YAMALAR (SON TEMİZ VERSİYON)
   ========================================================================== */

/* 1. TELEFON DÖNDÜRME ANİMASYONU (Klas ve Pürüzsüz Geçiş) */
@keyframes smoothRotatePhone { 
    0% { transform: rotate(0deg); } 
    40%, 60% { transform: rotate(-90deg); } 
    100% { transform: rotate(0deg); } 
}

#mobile-portrait-warning { display: none; }

/* 2. MOBİL DİKEY MOD (PORTRAIT) UYARI EKRANI (Aralıklı ve Sade Tasarım) */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    #mobile-portrait-warning {
        /* display handled by js */ 
        position: fixed !important; 
        top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: #fafafc !important; /* Temiz kırık beyaz */
        z-index: 9999999 !important; 
        justify-content: center !important; 
        align-items: center !important;
        text-align: center !important; 
        padding: 40px !important; 
        box-sizing: border-box !important;
        font-family: 'Arakom', sans-serif;
    }
    
    body > div:not(#mobile-portrait-warning) { display: none !important; }
    
    .warning-animation-box { 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 55px; /* Elemanlar büyüdüğü için boşluğu da biraz artırdık */
    }
    
    .phone-icon-wrapper { 
        position: relative; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .portrait-phone-svg { 
        /* Çizdiğimiz yeni SVG'nin animasyonu */
        animation: smoothRotatePhone 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; 
        transform-origin: center center;
    }
    
    #mobile-portrait-warning h3 { 
        font-size: 75px; /* Yazı çok daha büyük hale getirildi */
        font-weight: 500; 
        letter-spacing: 0.5px;
        margin: 0; 
        color: #1d1d1f; 
    }
}

/* 3. TABLO DAVRANIŞI: MASAÜSTÜNDE SIĞDIR, MOBİLDE KAYDIR */
.window-pencere { overflow: hidden !important; width: 100% !important; box-sizing: border-box !important; }
.tab-content { width: 50% !important; flex-shrink: 0 !important; overflow-y: visible !important; overflow-x: hidden !important; padding-bottom: 0px !important; box-sizing: border-box !important; }
.tab-content .container { width: 100% !important; min-width: 0 !important; margin: 0 auto !important; white-space: normal !important; box-sizing: border-box !important; min-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.tab-content .container > table { flex: 1; }
@media screen and (max-width: 1024px) {
    .tab-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .tab-content .container { min-width: 900px !important; }
}

/* 4. MOBİL YATAY MOD (LANDSCAPE) MİKRO TASARIM VE KAHVERENGİ KUTU */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    html, body {
    font-family: 'Arakom', sans-serif; overflow: auto !important; -webkit-text-size-adjust: 100% !important; padding: 10px !important; background-color: #ffffff !important; }
    .top-bar { gap: 6px !important; margin-bottom: 8px !important; }
    #root-display-box, .switch-btn, .segmented-switch, .zoom-toggle-area, .back-link { height: 30px !important; min-height: 30px !important; font-size: 12px !important; padding: 0 6px !important; }
    .temp-root-display { font-size: 2.5rem !important; height: 60px !important; }
    
    .ar, #tab1 .ar, #tab2 .ar { font-size: 28px !important; line-height: 1 !important; }
    .ar-small, #tab1 .ar-small, #tab2 .ar-small { font-size: 20px !important; line-height: 1 !important; }
    .siga-text { font-size: 18px !important; }
    
    .glass-box { width: auto !important; min-width: 50px !important; max-width: 95% !important; padding: 10px 8px 4px 8px !important; margin: 2px auto !important; display: inline-block !important; box-sizing: border-box !important; }
    .ref { font-size: 11px !important; top: 1px !important; right: 2px !important; padding: 1px 4px !important; }
    
    .verb-table { transform-origin: top right; width: 100% !important; }
    table { table-layout: fixed !important; width: 100% !important; }
    th { font-size: 14px !important; padding: 4px 2px !important; }
    td { padding: 2px 1px !important; border-width: 2px !important; text-align: center !important; font-size: 11px !important; }
    .verb-table td b { font-size: 14px !important; }
    
    .tab-content { padding-bottom: 30px !important; }
    #tab1 .container { width: 100% !important; min-width: 600px !important; margin: 0 auto !important; }
    #tab2 .container { width: 100% !important; min-width: 950px !important; margin: 0 auto !important; }
    
    .keyboard-overlay { padding: 5px !important; }
    .keyboard-inner { gap: 4px !important; max-width: 100% !important; }
    .kb-row { gap: 4px !important; margin-bottom: 4px !important; }
    .key, .search-key, .var-key { height: 30px !important; width: 45px !important; font-size: 16px !important; border-radius: 4px !important; }
    .key-special { min-width: 50px !important; }
    #main-keyboard-predictions { min-height: 45px !important; margin-bottom: 8px !important; gap: 8px !important; }
    .prediction-chip { font-size: 1.2rem !important; padding: 6px 12px !important; border-radius: 12px !important; height: 30px !important; min-height: 30px !important; }
    .suffix-btn { height: 35px !important; font-size: 14px !important; }
    
    .new-verb-layout { padding: 5px !important; }
    .root-header { top: 5px !important; right: 5px !important; margin-bottom: 5px !important; }
    .verb-close-btn { width: 32px !important; height: 32px !important; font-size: 14px !important; border-width: 1px !important; }
    #root-search { height: 35px !important; font-size: 16px !important; padding: 0 10px !important; border-radius: 8px !important; }
    
    .important-roots-wrapper { margin-bottom: 5px !important; }
    #important-roots-list { gap: 6px !important; padding: 5px 0 5px 0 !important; }
    .flat-root-item { padding: 4px 10px !important; font-size: 16px !important; border-bottom-width: 2px !important; border-radius: 6px !important; }
    .letters-grid { gap: 5px !important; }
    .letter-column { flex: 0 0 100% !important; scroll-snap-align: center !important; overflow-y: auto !important; height: auto !important; border-width: 2px !important; border-radius: 8px !important; gap: 4px !important; padding-right: 2px !important; padding-bottom: 80px !important; box-sizing: border-box !important; }
    .col-range-header { padding: 4px !important; font-size: 11px !important; margin-top: -2px !important; margin-left: -2px !important; margin-right: -2px !important; border-radius: 6px 6px 0 0 !important; border-bottom-width: 2px !important; }
    .letter-column .glass-box { min-height: 30px !important; margin: 0 auto !important; width: 95% !important; padding: 8px 2px 2px 2px !important; }
    
    /* Kahverengi Kök Kutusu Yaması */
    .draggable-root-clone { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 999999 !important; font-size: 2rem !important; min-width: 140px !important; padding: 6px 12px 10px 0px !important; }
    .draggable-root-clone .kutu-timer-btn { width: 26px !important; height: 26px !important; top: 2px !important; right: 2px !important; }
    .draggable-root-clone .kutu-timer-btn svg { width: 15px !important; height: 15px !important; }
}

/* 5. MARATON SEÇİM EKRANI KAYDIRMA YAMASI */
#marathon-selection-area { justify-content: flex-start !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 80px !important; }
#marathon-verb-buttons { justify-content: flex-start !important; height: auto !important; min-height: max-content !important; padding-bottom: 40px !important; margin-top: 20px !important; }

/* Tablo iskeletinin ve metinlerin seçilmesini engeller */
#table-view, .verb-table {
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
    user-select: none;         
    pointer-events: auto; /* Tıklama ve sürükleme işlevlerinin bozulmaması için */
}

.keyboard-overlay {
    justify-content: flex-start !important;
    padding-bottom: 0px !important; 
    padding-top: 0px !important; 
}

/* Dinamik Uretilen Kok (Sihirli Cip) Animasyon ve Stili */
@keyframes showLoading {
    0%, 90% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes countdownTimer {
    0% { content: "Kök Oluşturuluyor... 3"; }
    33% { content: "Kök Oluşturuluyor... 2"; }
    66% { content: "Kök Oluşturuluyor... 1"; }
    95% { content: "Kök Hazır!"; color: #00ff00; }
}

@keyframes fillProgress {
    0% { width: 0%; }
    100% { width: 80%; }
}

@keyframes rightToLeftScan {
    0% { clip-path: inset(0 0 0 100%); opacity: 0; transform: scale(0.95); }
    5% { opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; transform: scale(1); }
}

@keyframes weldMove {
    0% { right: -5%; opacity: 1; }
    95% { right: 105%; opacity: 1; }
    100% { right: 105%; opacity: 0; visibility: hidden; }
}

@keyframes weldSparks {
    0% {
        box-shadow: 0 0 10px 5px #ffee00, -5px -10px 5px 2px #ffcc00, 10px 5px 8px 1px #ffff00, -15px 15px 5px 2px #ffee00;
        transform: translate(0, -5px) scale(1);
    }
    50% {
        box-shadow: 0 0 15px 8px #ffffff, 5px -15px 4px 1px #ffee00, -10px 10px 10px 2px #ffcc00, 15px -5px 6px 3px #ffff00;
        transform: translate(-3px, 8px) scale(1.5);
    }
    100% {
        box-shadow: 0 0 5px 3px #ffff00, 10px 15px 4px 1px #ffdd00, -10px -10px 8px 2px #ffcc00, -5px 10px 5px 2px #ffee00;
        transform: translate(3px, -3px) scale(0.8);
    }
}

@keyframes fuseSettle {
    0%   { border-color: rgba(255, 238, 0, 1); box-shadow: 0 0 30px rgba(255, 238, 0, 1), inset 0 0 15px rgba(255, 238, 0, 0.8); }
    40%  { border-color: rgba(255, 238, 0, 0.6); box-shadow: 0 0 15px rgba(255, 238, 0, 0.6), inset 0 0 8px rgba(255, 238, 0, 0.4); }
    100% { border-color: rgba(255, 238, 0, 0); box-shadow: none; }
}
@keyframes textGlowSettle {
    0%   { text-shadow: 0 0 20px rgba(255, 238, 0, 1), 0 0 30px rgba(255, 238, 0, 1); }
    100% { text-shadow: 0 0 8px rgba(255, 238, 0, 0.4); }
}

.dynamic-root-chip {
    position: relative;
    margin-top: 25px !important; 
    border: 2px dashed rgba(255, 238, 0, 0) !important;
    background: rgba(0, 0, 0, 0.75) !important;
    animation: fuseSettle 2.5s 3.2s ease-out forwards; /* Vurgu yavasca azalip biter */
}

.dynamic-root-loading {
    position: absolute;
    top: -25px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: #8b5a2b;
    font-family: 'Arakom', sans-serif;
    font-weight: normal;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(139, 90, 43, 0.6);
    opacity: 0;
    visibility: hidden;
    animation: showLoading 1.5s forwards;
}

.dynamic-root-countdown::after {
    content: "Kök Oluşturuluyor... 3";
    animation: countdownTimer 1.5s step-end forwards;
}

.dynamic-root-progress {
    position: absolute;
    top: -10px; /* Cizgi ile kutu arasinda daha cok bosluk */
    left: 10%; /* Soldan saga ilerlemesi icin left kullanildi */
    height: 3px;
    background: #8b5a2b;
    border-radius: 2px;
    box-shadow: 0 0 8px #8b5a2b;
    opacity: 0;
    visibility: hidden;
    animation: fillProgress 1.5s linear forwards, showLoading 1.5s forwards;
}

.dynamic-root-text {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(255, 238, 0, 1), 0 0 30px rgba(255, 238, 0, 1);
    opacity: 0;
    display: inline-block;
    animation: rightToLeftScan 1.7s 1.5s ease-out forwards, textGlowSettle 2.5s 3.2s ease-out forwards;
}

.welding-spark-emitter {
    position: absolute;
    top: 50%;
    right: -5%;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    animation: 
        weldMove 1.7s 1.5s ease-out forwards, 
        weldSparks 0.05s 1.5s infinite;
}

.dynamic-root-chip:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 238, 0, 0.5) !important;
    box-shadow: 0 0 10px rgba(255, 238, 0, 0.4);
}

/* Scrollbar Gizleme */
.hide-scrollbars {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbars::-webkit-scrollbar {
    display: flex;
}

.keyboard-bottom-area {
    background: #f4f6f9; /* Solid light color to prevent eye strain */
    width: calc(100% - 10px);
    max-width: 1000px;
    margin: 0 auto 5px auto;
    padding: 15px 0 5px 0;
    border: 3px solid #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


/* Kokleri maksimum 2 sutun yapma */
#dynamic-root-display .prediction-chip {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
}

/* Tanimli olmayan köklerde numaranın (ref) kırmızı olmasını ve tıklanabilir görünmesini engeller */
html body .glass-box.tanimsiz-kok.kok-turendi .ref,
html body .glass-box.tanimsiz-kok .ref {
    background-color: transparent !important;
    color: #FF3B30 !important;
    animation: none !important;
    box-shadow: none !important;
    cursor: default !important;
    transform: none !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* MEZİD TAB ALT ÇİZGİ DALGASI (BORDER SWEEP) ANİMASYONU */
@keyframes borderSweep {
    0% { transform: scaleX(0); transform-origin: left; opacity: 0; }
    21% { transform: scaleX(1); transform-origin: left; opacity: 1; }
    23% { transform-origin: right; }
    44% { transform: scaleX(0); transform-origin: right; opacity: 0; }
    100% { transform: scaleX(0); transform-origin: right; opacity: 0; }
}

.mezid-btn.heartbeat-active {
    position: relative !important;
    background: #f1f5f9 !important;
    animation: none !important;
}

.mezid-btn.heartbeat-active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #FF3B30;
    border-radius: 2px;
    animation: borderSweep 4s infinite ease-in-out;
}


/* --- CHOICE MENU LAYOUT --- */
.choice-menu-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.choice-card {
    flex: 1;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* backdrop-filter removed for performance */
}

.choice-card:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.choice-card.choice-roots:hover .choice-icon {
    color: #f39c12;
}

.choice-card.choice-words:hover .choice-icon {
    color: #3498db;
}

.choice-icon {
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    transition: color 0.3s ease;
}

.choice-title {
    font-size: 3.5rem;
    font-weight: normal;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Arakom', sans-serif;
}

/* --- THEMATIC ACCORDION --- */
.thematic-accordion-item {
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    overflow: hidden;
}

.thematic-accordion-header {
    padding: 25px 30px;
    cursor: pointer;
    z-index: 1000;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, border-radius 0.3s ease;
    border-radius: 15px;
}

.thematic-accordion-item.active .thematic-accordion-header {
    padding: 25px 30px;
    cursor: pointer;
    z-index: 1000;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, border-radius 0.3s ease;
    border-radius: 15px;
}

.thematic-accordion-header:hover {
    background: rgba(255, 255, 255, 0.4);
}

.thematic-accordion-title {
    font-size: 2.2rem;
    font-family: 'Arakom', sans-serif;
    color: #000;
    margin: 0;
}

.thematic-accordion-icon {
    font-size: 2rem;
    color: #000;
    transition: transform 0.3s ease;
}

.thematic-accordion-content {
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.thematic-accordion-item.active .thematic-accordion-content {
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.thematic-accordion-item.active .thematic-accordion-icon {
    font-size: 2rem;
    color: #000;
    transition: transform 0.3s ease;
}

.thematic-words-grid {
    display: grid;
    /* Masaüstünde 5 sütun, tablette 3, mobilde 2 veya 1 */
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}


/* Kökler Tablosu (Gizlemek İçin Helper) */
.roots-main-content.hidden {
    display: none !important;
}


/* --- FLIP CARDS --- */
.thematic-word-card {
    background-color: transparent;
    perspective: 1000px;
    height: 130px;
    cursor: pointer;
    z-index: 1000;
    padding: 0;
    border: none;
}

.thematic-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.thematic-word-card.flipped .thematic-flip-inner {
    transform: rotateY(180deg);
}

.thematic-flip-front, .thematic-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.thematic-flip-front {
    background: rgba(255, 255, 255, 0.1);
}

.thematic-flip-back {
    background: rgba(255, 255, 255, 0.15);
    transform: rotateY(180deg);
}

.thematic-word-card:hover .thematic-flip-front {
    background: rgba(255, 255, 255, 0.2);
}

.thematic-word-emoji {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.thematic-word-ar {
    font-family: 'Arakom', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 5px;
}

.thematic-word-tr {
    font-size: 1.2rem;
    color: #bdc3c7;
}

.thematic-words-content.hidden {
    display: none !important;
}

/* --- HAFIZA OYUNU EKLENTILERI --- */
.score-board {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Kutuların boyunu uzatır */
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 100%; /* 4K'da tam yayılma için */
     /* Header dışında kalan alanın çoğu */
    margin: 0 auto;
}
.score-board { flex-direction: column; align-items: center; }
.player-box {
    flex: 0 0 80px; /* Kutuların genişliğini sabitledik */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    box-shadow: var(--shadow);
    transition: transform, background-color, color, opacity, box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 5px solid transparent;
    margin: 10px 0; /* Animasyon ve nefes alma payı */
}
.player-box { flex-direction: row; flex: none; width: 90%; height: 45px; gap: 5px; margin: 5px 0; }
.active-p { 
    background: #fff; 
    border-color: currentColor; 
    transform: scale(1.05); /* Hafif büyüme animasyonu */
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
}
.p-label { font-size: 1.1rem; font-weight: normal; opacity: 0.6; }
.p-label { font-size: 0.8rem; }
.p-score { font-size: 2.5rem; font-weight: 900; margin-top: 5px; }
.p-score { font-size: 1.4rem; margin-top: 0; }


.thematic-words-grid.memory-mode[data-total="12"] { grid-template-columns: repeat(4, 1fr); }
.thematic-words-grid.memory-mode[data-total="18"] { grid-template-columns: repeat(6, 1fr); }
.thematic-words-grid.memory-mode[data-total="20"] { grid-template-columns: repeat(5, 1fr); }
.thematic-words-grid.memory-mode[data-total="24"] { grid-template-columns: repeat(6, 1fr); }
.matched { opacity: 0; pointer-events: none; transition: 0.6s; transform: scale(0.8); }
.slider:before {
            position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
            background-color: white; transition: .4s; border-radius: 50%;
        }
input:checked + .slider { background-color: var(--p2) !important; }
input:checked + 
.memory-game-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
}

.memory-btn {
    border: none; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    z-index: 1000;
    font-family: 'Arakom', sans-serif; background: #e9ecef; box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: 0.3s; font-size: 0.9rem; color: #333;
}
.memory-btn.active { background: #ff922b; color: white; }
/* Hafıza oyunu başladıktan sonra mod düğmeleri kilitlenir: oyun
   ortasında sekme değiştirmek skoru sessizce siliyordu. Çıkış tek
   kapıdan — ✕ (İptal). */
.memory-btn.memory-btn-kilitli {
    opacity: .42; cursor: not-allowed; box-shadow: none;
    filter: grayscale(.5);
}
.memory-btn.memory-btn-kilitli:hover { opacity: .42; }

.memory-card { perspective: 1000px; cursor: pointer;
    z-index: 1000; width: 100%; height: 100%; min-height: 180px; }
.memory-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.memory-card.flipped .memory-card-inner { transform: rotateY(180deg); }

.memory-card-face {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    border-radius: 15px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    border: 3px solid rgba(255,255,255,0.3); 
    box-sizing: border-box; 
    text-align: center; 
    padding: 10px;
    word-break: break-word;
    font-size: 1.5rem;
}

.memory-card-front { background: rgba(255,255,255,0.1); color: white; }
.memory-mode .memory-card-front::after { content: "؟"; font-size: 3rem; opacity: 0.3; position: absolute; }
.memory-card-back { transform: rotateY(180deg); background: #ffffff; color: #333; }
.memory-card.matched { opacity: 0; pointer-events: none; transition: 0.6s; transform: scale(0.8); }

.score-board {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 0 auto 20px auto;
}

.player-box {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform, background-color, color, opacity, box-shadow 0.4s;
    border: 4px solid transparent;
    padding: 10px;
}

.active-p { 
    background: #fff; 
    border-color: currentColor; 
    transform: scale(1.05); 
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.p-label { font-size: 1.1rem; font-weight: normal; opacity: 0.6; }
.p-score { font-size: 2.5rem; font-weight: 900; margin-top: 5px; }


/* Tam Ekran Modu (Hafıza Oyunu) */
.fullscreen-accordion {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    background: #f1f2f6 !important;
    z-index: 9999999;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    overflow-y: auto !important;
}

.fullscreen-accordion .thematic-accordion-header {
    padding: 25px 30px;
    cursor: pointer;
    z-index: 1000;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, border-radius 0.3s ease;
    border-radius: 15px;
}
.fullscreen-accordion .thematic-accordion-content {
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.fullscreen-accordion .thematic-words-grid.memory-mode {
    flex: 1;
}
.fullscreen-accordion .thematic-words-grid:not(.memory-mode) {
    flex: 1;
    align-content: start;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar styling for the fullscreen grid */
.fullscreen-accordion .thematic-words-grid:not(.memory-mode)::-webkit-scrollbar {
    width: 8px;
}
.fullscreen-accordion .thematic-words-grid:not(.memory-mode)::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
.fullscreen-accordion .thematic-words-grid:not(.memory-mode)::-webkit-scrollbar-track {
    background: transparent;
}

/* Make fonts larger in fullscreen study cards */
.fullscreen-accordion .thematic-words-grid:not(.memory-mode) .lang-ar {
    font-size: 4rem !important;
}
.fullscreen-accordion .thematic-words-grid:not(.memory-mode) .lang-tr {
    font-size: 2rem !important;
}
.fullscreen-accordion .thematic-words-grid:not(.memory-mode) .memory-card-front div {
    font-size: 4rem !important;
}

/* --- FULLSCREEN HIDING RULES --- */
.fullscreen-accordion .hide-in-fullscreen {
    display: none !important;
}

/* Enforce 5 columns specifically for desktop. It falls back to 2 or 1 on mobile */
.thematic-words-grid:not(.memory-mode) {
    grid-template-columns: repeat(5, 1fr) !important;
}

@media screen and (max-width: 768px) {
    .thematic-words-grid:not(.memory-mode) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- YENİ İSTEKLER: 
   1. Kapalıyken butonları gizle
   2. RTL sorununu çözüp başlığı sola sabitle
--- */

.thematic-accordion-item:not(.active) .memory-game-controls {
    display: none !important;
}

.thematic-accordion-item {
    margin-bottom: 20px;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    overflow: hidden;
}

/* Sadece içerikteki tablolar RTL olarak kalsın istenirse (kartların içinde Arapça varsa vs.)
   ızgara (grid) içi RTL olabilir ama dış konteyner LTR oldu. */
.thematic-words-grid {
    direction: rtl; 
}

/* Fullscreen UI Shrinking & Light Theme Enhancements */
.fullscreen-accordion .thematic-accordion-header {
    padding: 25px 30px;
    cursor: pointer;
    z-index: 1000;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, border-radius 0.3s ease;
    border-radius: 15px;
}
.fullscreen-accordion .thematic-accordion-title {
    font-size: 2.2rem;
    font-family: 'Arakom', sans-serif;
    color: #000;
    margin: 0;
}
.fullscreen-accordion button[title="Tam Ekran"] {
    font-size: 1rem !important;
    padding: 2px 8px !important;
    color: #333 !important;
    border-color: rgba(0,0,0,0.2) !important;
}
.fullscreen-accordion .memory-card-front {
    background: #ffffff !important;
    color: #333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- YENİ İSTEKLER: Kart Kelimeleri Büyük ve Arakom --- */
.memory-card-face .lang-ar,
.memory-card-face.lang-ar,
.memory-card-face .lang-tr,
.memory-card-face.lang-tr {
    font-family: 'Arakom', sans-serif !important;
}

/* ÇALIŞMA KARTLARI (Küçük) */
.thematic-words-grid:not(.memory-mode):not(.list-mode-grid) .memory-card-face .lang-ar, 
.thematic-words-grid:not(.memory-mode):not(.list-mode-grid) .memory-card-face.lang-ar { font-size: 4rem !important; }
.thematic-words-grid:not(.memory-mode):not(.list-mode-grid) .memory-card-face .lang-tr, 
.thematic-words-grid:not(.memory-mode):not(.list-mode-grid) .memory-card-face.lang-tr { font-size: 2.8rem !important; }

/* LİSTE MODU */
.thematic-words-grid.list-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    direction: ltr; /* İçerik manuel yönlendirilecek */
}

.list-mode-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.list-mode-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.list-mode-tr {
    font-size: 1.4rem;
    font-weight: normal;
    color: #495057;
    flex: 1;
    text-align: left;
}

.list-mode-emoji {
    font-size: 2.2rem;
    margin: 0 15px;
    flex: 0 0 auto;
}

.list-mode-ar {
    font-size: 2.4rem;
    font-family: 'Arakom', sans-serif;
    color: #000;
    flex: 1;
    text-align: right;
}


/* HAFIZA OYUNU (Büyük) */
.thematic-words-grid.memory-mode .memory-card-face .lang-ar,
.thematic-words-grid.memory-mode .memory-card-face.lang-ar { font-size: 4rem !important; }
.thematic-words-grid.memory-mode .memory-card-face .lang-tr,
.thematic-words-grid.memory-mode .memory-card-face.lang-tr { font-size: 2.5rem !important; }

/* Hafıza oyunu arka yüzünde Türkçe kelime rengi bazen sarı oluyordu, açık temaya uygun olsun diye koyulaştırıldı */
.fullscreen-accordion .memory-card-back .lang-tr {
    color: #333 !important;
}


#thematic-accordion-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: start;
    direction: ltr;
    position: relative;
}

/* KESİNTİSİZ DİKEY ÇİZGİLER KALDIRILDI (Tasarım Bağımsızlığı) */


.thematic-accordion-item {
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* Çizgiler için sözde elementler (sadece aktif değilken ve son sütun değilken sağa çizgi ekler) */


/* Başlıklar artık genişlemiyor, yerinde sabit kalıyor */
.thematic-accordion-item.active {
    background: rgba(92, 124, 250, 0.4); /* Aktif sekme rengi */
    border-color: rgba(92, 124, 250, 0.8) !important;
    overflow: visible !important; /* Ok işaretinin görünmesi için */
    z-index: 20; /* Panelin (z-index:5) üzerinde kalsın diye */
    margin-bottom: 0 !important; /* Konteynerla aradaki fazlalık boşluğu kapatıp okun tam birleşmesini sağlar */
}

/* Bütünlük (Continuity) Ok İşareti: Aktif başlığın altından, altta açılan panele işaret eder */
.thematic-accordion-item.active::before {
    content: "";
    position: absolute;
    bottom: -15px; /* Grid'in gap boşluğuna doğru sarkar */
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 15px 0 15px;
    border-style: solid;
    border-color: #5c7cfa transparent transparent transparent;
    z-index: 10;
}


@media screen and (max-width: 768px) {
    #thematic-accordion-container {
        grid-template-columns: 1fr;
    }
}


/* KÖKLER LİSTESİ YÖNLENDİRME ANİMASYONU (SİTEMAP) */
@keyframes sitemapWavePulse {
    0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.45); transform: scale(1); }
    70% { box-shadow: 0 0 0 4px rgba(243, 156, 18, 0); transform: scale(1.035); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); transform: scale(1); }
}

.sitemap-wave-hint {
    animation: sitemapWavePulse 1.5s infinite ease-out !important;
    color: #f39c12 !important; 
    border-radius: 50% !important; 
    display: inline-block; 
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

.svg-wave-active {
    animation: sitemapWavePulse 1.5s infinite ease-out !important;
    color: #f39c12 !important;
    border-radius: 50% !important;
    display: flex;
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

/* Sayfa açılışında (kök seçilmemişken) kronometre için YEŞİL dalga vurgusu */
@keyframes sitemapWavePulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(32, 201, 151, 0.45); transform: scale(1); }
    70% { box-shadow: 0 0 0 4px rgba(32, 201, 151, 0); transform: scale(1.035); }
    100% { box-shadow: 0 0 0 0 rgba(32, 201, 151, 0); transform: scale(1); }
}

.svg-wave-green {
    animation: sitemapWavePulseGreen 1.5s infinite ease-out !important;
    color: #16A085 !important;
    border-radius: 50% !important;
    display: flex;
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}

/* Kök seçilince liste ikonu için KIRMIZI dalga vurgusu */
@keyframes sitemapWavePulseRed {
    0% { box-shadow: 0 0 0 0 rgba(238, 82, 83, 0.45); transform: scale(1); }
    70% { box-shadow: 0 0 0 4px rgba(238, 82, 83, 0); transform: scale(1.035); }
    100% { box-shadow: 0 0 0 0 rgba(238, 82, 83, 0); transform: scale(1); }
}

.svg-wave-red {
    animation: sitemapWavePulseRed 1.5s infinite ease-out !important;
    color: #EE5253 !important;
    border-radius: 50% !important;
    display: flex;
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease;
}


.score-board.active-score { /* display handled by js */ }

.thematic-accordion-panel {
    position: relative;
    z-index: 5;
    background: #f8f9fa !important; /* Opak renk çizgiyi tam örter */
}

.fullscreen-accordion .thematic-words-grid.memory-mode .memory-card {
    min-height: 0 !important;
}
.fullscreen-accordion:has(.memory-mode) {
    overflow-y: hidden !important;
}
.fullscreen-accordion .thematic-words-grid.memory-mode {
    min-height: 0 !important;
    height: auto !important;
}

/* Tüm flex dikey silsilede büzülmeye (shrink) izin ver */
.fullscreen-accordion .thematic-accordion-content {
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.fullscreen-accordion .thematic-words-grid.memory-mode {
    min-height: 0 !important;
    height: auto !important;
}
.fullscreen-accordion {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important; /* height yerine bottom/top ile viewporta oturtalım */
}

/* Tam ekranda iç boşlukları (padding) ve dış boşlukları (margin) optimize edelim ki alt kısım taşmasın */

.fullscreen-accordion .score-board {
    margin-bottom: 10px !important;
}
.fullscreen-accordion .thematic-words-grid.memory-mode {
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
}

/* Çift sayısına göre dinamik font küçültme (Hafıza Kartları için) */
/* 8 Çift */
.thematic-words-grid.memory-mode.pairs-8 .memory-card-face.lang-ar { font-size: 3.5rem !important; }
.thematic-words-grid.memory-mode.pairs-8 .memory-card-face.lang-tr { font-size: 2rem !important; }

/* 10 Çift */
.thematic-words-grid.memory-mode.pairs-10 .memory-card-face.lang-ar { font-size: 2.2rem !important; }
.thematic-words-grid.memory-mode.pairs-10 .memory-card-face.lang-tr { font-size: 1.6rem !important; }

/* 12 Çift */
.thematic-words-grid.memory-mode.pairs-12 .memory-card-face.lang-ar { font-size: 2.1rem !important; }
.thematic-words-grid.memory-mode.pairs-12 .memory-card-face.lang-tr { font-size: 1.5rem !important; }

/* Çalışma kartları HER ZAMAN 3 sütun olsun */
.thematic-words-grid:not(.memory-mode) {
    grid-template-columns: repeat(3, 1fr) !important;
}
@media screen and (max-width: 768px) {
    /* Mobilde 3 sütun çok sıkışık olursa diye 1'e düşür, ama kullanıcı ısrarla 3 istiyorsa yorum satırı yapabiliriz. Kullanıcı "her zaman 3 sütun" dediği için burada 1fr'yi kaldırmıyorum. */
    .thematic-words-grid:not(.memory-mode) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Hafıza ve Çalışma Kartlarının arkasındaki yazılar her zaman tam siyah olsun */
.memory-card-back {
    color: #000000 !important;
}
.memory-card-back .lang-ar {
    color: #000000 !important;
}
.memory-card-back .lang-tr {
    color: #000000 !important;
}

/* Scoreboard Fixes */
.score-board {
    display: flex;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 15px auto !important;
    padding: 10px !important;
    height: auto !important; /* NOT 85vh */
}
.player-box {
    flex: 0 1 150px !important; /* Auto size */
    padding: 10px 20px !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    border: 2px solid transparent !important;
    text-align: center;
}
.player-box.active-p {
    border: 2px solid #5c7cfa !important;
    transform: scale(1.05) !important;
    background: #eef2ff !important;
}
.p-label {
    font-size: 1.2rem !important;
    font-weight: normal; !important;
    color: inherit !important;
}
.p-score {
    font-size: 1.8rem !important;
    font-weight: normal; !important;
    color: inherit !important;
}

/* Toggles Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
    z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #4dabf7;
}
input:checked + .slider:before {
  transform: translateX(22px);
}

/* Çalışma Kartları Ön Yüz (Arapça) metni de siyah olsun */
.memory-card-front { color: #000000 !important; }
.memory-card-front .lang-ar { color: #000000 !important; }

/* Switch kısmının RTL'den etkilenip ters çalışmasını engelle */
.switch-wrapper {
    direction: ltr !important;
}

/* Çalışma kartlarındaki emojileri büyüt */
.thematic-words-grid:not(.memory-mode) .memory-card-front div[style*="font-size: 2.5rem;"] {
    font-size: 4rem !important;
}
.thematic-words-grid:not(.memory-mode) .memory-card-back div[style*="font-size: 2rem;"] {
    font-size: 3.5rem !important;
}

/* Compact Scoreboard in settings bar */
.mem-settings .score-board {
    /* display handled by js */ /* Javascript will toggle none/flex inline, but when flex, use these rules */
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mem-settings .player-box {
    flex: 0 1 auto !important;
    /* display handled by js */
    flex-direction: row !important; /* Horizontal layout for label and score */
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 50px !important; /* Pill shape */
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    border: 2px solid transparent !important;
}
.mem-settings .player-box.active-p {
    border: 2px solid #5c7cfa !important;
    transform: scale(1.05) !important;
    background: #eef2ff !important;
}
/* Override any lingering CSS for score-board inside mem-settings */
.mem-settings .score-board.active-score { /* display handled by js */ }

/* Emoji ile metin arası boşluğu azalt */
.thematic-words-grid:not(.memory-mode) .memory-card-face div[style*="margin-bottom: 10px;"] {
    margin-bottom: 0px !important;
}

/* Yeni yatay Piller için CSS */
.memory-game-controls .p-score-box {
    /* display handled by js */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important; font-size: 1.2rem !important; min-height: 44px !important; box-sizing: border-box !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    border: 2px solid transparent !important;
    transition: transform, background-color, color, opacity, box-shadow 0.3s ease !important;
    min-width: 80px;
}
.memory-game-controls .p-score-box.active-p {
    transform: scale(1.1) !important;
    background: #fdfdfd !important;
}
/* Renk vurgusu */
[id^="p1-box-"].active-p { border: 3px solid #4dabf7 !important; background: #eef2ff !important; }
[id^="p2-box-"].active-p { border: 3px solid #ff8787 !important; background: #fff5f5 !important; }

/* Inactive player opacity */
.memory-game-controls .p-score-box:not(.active-p) {
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
}

/* RTL Override for controls container so visual layout matches DOM layout */
.memory-game-controls {
    direction: ltr !important;
}

.memory-game-controls .p-score-box[style*="display: flex"] {
    display: flex !important;
}


/* Hafıza Oyunu Switch Override */
.switch-wrapper .switch {
    width: 44px !important;
    height: 22px !important;
}
.switch-wrapper .switch .slider {
    background-color: #ffffff !important;
    border: 2px solid #4dabf7 !important;
}
.switch-wrapper .switch input:checked + .slider {
    background-color: #ffffff !important;
}
.switch-wrapper .switch .slider:before {
    background-color: #4dabf7 !important;
    height: 14px !important;
    width: 14px !important;
    bottom: 2px !important;
    left: 2px !important;
}
.switch-wrapper .switch input:checked + .slider:before {
    transform: translateX(22px) !important;
    background-color: #4dabf7 !important;
}


/* Prevent study cards from overlapping by forcing row height */
.thematic-words-grid:not(.memory-mode) {
    grid-auto-rows: minmax(200px, auto) !important;
    gap: 15px !important;
}
.thematic-words-grid:not(.memory-mode) .memory-card-wrapper {
    min-height: 200px !important;
}

/* GUARANTEE FULLSCREEN MEMORY GRID FILLS THE SCREEN PROPERLY */
.fullscreen-accordion .thematic-accordion-content {
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.fullscreen-accordion .thematic-words-grid.memory-mode {
    display: grid !important;
    flex: 1 1 0 !important; /* Forces it to fit exactly within flex container without expanding */
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 10px !important;
    align-content: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important; /* Forces rows to shrink and fit exactly */
    box-sizing: border-box !important;
}
.thematic-words-grid.memory-mode .memory-card-wrapper {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important; /* Do not force aspect ratio in memory mode */
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
.thematic-words-grid.memory-mode .memory-card {
    height: auto !important;
    width: 100% !important;
}

/* Fix Turkish punctuation rendering in RTL grid context */
.lang-tr, 
.memory-card-face.lang-tr {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: center !important;
}

@keyframes pulseWave {
    0% { box-shadow: 0 0 0 0 rgba(77, 171, 247, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(77, 171, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(77, 171, 247, 0); }
}
.wave-btn {
    animation: pulseWave 1.5s infinite;
}

@keyframes quickPulse {
    0% { transform: scale(1.05); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.3); }
    100% { transform: scale(1.05); filter: brightness(1); }
}
.pulse-anim {
    animation: quickPulse 0.4s ease-out;
}

.thematic-words-grid.active-p1-grid {
    box-sizing: border-box !important;
    border: 4px solid #4dabf7 !important;
    box-shadow: 0 0 25px rgba(77, 171, 247, 0.5) !important;
    border-radius: 15px;
    padding: 10px;
    transition: transform, background-color, color, opacity, box-shadow 0.4s ease;
}

.thematic-words-grid.active-p2-grid {
    box-sizing: border-box !important;
    border: 4px solid #ff8787 !important;
    box-shadow: 0 0 25px rgba(255, 135, 135, 0.5) !important;
    border-radius: 15px;
    padding: 10px;
    transition: transform, background-color, color, opacity, box-shadow 0.4s ease;
}

.roots-main-content:not(.hidden) {
    display: flex !important;
}

/* MEMORY GRID ROW FIX: Izgara satırlarını matematiksel olarak bölerek taşmayı %100 engelliyoruz */
.thematic-words-grid.memory-mode.pairs-6 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.thematic-words-grid.memory-mode.pairs-8 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.thematic-words-grid.memory-mode.pairs-10 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.thematic-words-grid.memory-mode.pairs-12 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.thematic-words-grid.memory-mode.pairs-18 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
.thematic-words-grid.memory-mode.pairs-20 { grid-template-rows: repeat(8, minmax(0, 1fr)) !important; }
.thematic-words-grid.memory-mode.pairs-24 { grid-template-rows: repeat(8, minmax(0, 1fr)) !important; }

.thematic-words-grid.memory-mode .memory-card-wrapper,
.thematic-words-grid.memory-mode .memory-card,
.thematic-words-grid.memory-mode .memory-card-face {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Fullscreen modundayken grid çizgilerini ve sütunları kaldır */
.fullscreen-accordion #thematic-accordion-container {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}

.fullscreen-accordion .thematic-accordion-item {
    margin-bottom: 20px;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    overflow: hidden;
}

/* 3D Buton Başlık Efekti */
.th-3d-btn {
    cursor: pointer !important;
    position: relative;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.4) !important;
    transform: translateY(0);
    transition: transform, background-color, color, opacity, box-shadow 0.1s ease !important;
    user-select: none;
    z-index: 2;
}

.th-3d-btn:active {
    box-shadow: 0 0px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(4px) !important;
}

.th-3d-btn:hover {
    filter: brightness(1.1);
}



/* Guarantee full width in fullscreen mode */
body.fullscreen-accordion .new-verb-layout {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

body.fullscreen-accordion #thematic-words-content {
    padding: 20px !important;
}

body.fullscreen-accordion .thematic-accordion-item {
    border: none !important;
    margin: 0 !important;
}

body.fullscreen-accordion .thematic-accordion-content.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
}

body.fullscreen-accordion #thematic-accordion-container {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Disabled toggle appearance */
input:disabled + .slider {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.5;
}
input:disabled ~ span {
    opacity: 0.5;
    cursor: not-allowed !important;
}
.switch-wrapper:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* GUARANTEE UNBROKEN FLEX CHAIN FOR FULLSCREEN MEMORY GAME */
body.fullscreen-accordion #thematic-words-content {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden !important; /* Prevent scroll so grid fits exactly */
}

body.fullscreen-accordion #thematic-accordion-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
}

body.fullscreen-accordion .thematic-accordion-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
}

body.fullscreen-accordion .thematic-accordion-content.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
}

body.fullscreen-accordion .thematic-words-grid.memory-mode {
    display: grid !important;
    flex: 1 1 auto !important;
    height: auto !important;
    width: 100% !important;
}

/* The missing link in the flex chain */
.fullscreen-accordion .thematic-accordion-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
}

/* Disabled toggle switch styling */
.switch input:disabled + .slider {
    background-color: #ccc !important;
    cursor: not-allowed !important;
}
.switch input:disabled + .slider:before {
    background-color: #999 !important;
}
.switch-wrapper:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}
.switch-wrapper:has(input:disabled) span {
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Disabled pair count select styling */
select.memory-btn:disabled {
    background-color: #e9ecef !important;
    color: #adb5bd !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Hide underlying elements when fullscreen accordion is active */
body.has-fullscreen-accordion .verb-close-btn {
    display: none !important;
}
body.has-fullscreen-accordion .thematic-accordion-item {
    display: none !important; /* Hafıza oyununda başlıkların görünmesini engeller */
}
body.has-fullscreen-accordion .thematic-words-content {
    overflow: hidden !important;
}

/* Vezinlere Bak Arama Kısmı Öneri Kökleri (Sabit Boyut, Yanyana İkili, Büyük Yazı) */
#root-predictions-box .prediction-chip.dynamic-root-chip {
    margin-top: 35px !important; 
    overflow: visible !important;
}

#root-predictions-box .prediction-chip {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 85px !important;
    font-size: 2.8rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    #root-predictions-box .prediction-chip {
        height: 65px !important;
        min-height: 65px !important;
        font-size: 1.8rem !important;
    }
}

/* KAHVERENGİ KÖK KUTULARINA EKLENECEK LİSTE BUTONU (FDM İÇİN) */
.kutu-list-btn {
    position: absolute; 
    top: 40px; /* Timer'ın altına */
    right: 4px; 
    left: auto;
    transform: none; 
    background: transparent; 
    border: none; 
    width: 36px; 
    height: 36px; 
    cursor: pointer;
    z-index: 1000;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
    box-shadow: none; 
    z-index: 99999; 
    transition: transform 0.2s ease;
}

.kutu-list-btn:hover { 
    transform: scale(1.1); 
}

.kutu-list-btn svg {
    stroke: rgba(0, 0, 0, 0.85); 
    transition: transform, background-color, color, opacity, box-shadow 0.2s ease;
    width: 20px;
    height: 20px;
}

.kutu-list-btn:hover svg {
    stroke: #000000; 
}

.draggable-root-clone .kutu-list-btn {
    width: 30px;
    height: 30px;
    top: 34px; 
    right: 4px; 
}
.draggable-root-clone .kutu-list-btn svg {
    width: 18px; 
    height: 18px;
}

@media (max-width: 768px) {
    .draggable-root-clone .kutu-list-btn { width: 26px !important; height: 26px !important; top: 30px !important; right: 2px !important; }
    .draggable-root-clone .kutu-list-btn svg { width: 15px !important; height: 15px !important; }
}


/* TAŞINABİLİR (SÜRÜKLENEBİLİR) KUTU İÇİN ÖZEL BOYUT VE KONUM */
.draggable-root-clone {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Kök yazısı ile butonlar arası mesafe */
    padding: 10px 15px !important; 
    box-sizing: border-box;
}

.draggable-root-clone .root-text-content {
    flex: 1;
    text-align: center;
}

.draggable-root-clone .root-clone-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.draggable-root-clone .kutu-timer-btn,
.draggable-root-clone .kutu-list-btn {
    position: static !important; /* absolute'ı eziyoruz */
    width: 30px !important;
    height: 30px !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
}

.draggable-root-clone .kutu-timer-btn svg,
.draggable-root-clone .kutu-list-btn svg {
    width: 18px !important; 
    height: 18px !important;
}

/* FDM Kök Levhasındaki SVG Butonlarını Daha Büyük Yap */
.fdm-root-plate .kutu-timer-btn {
    width: 40px !important;
    height: 40px !important;
}
.fdm-root-plate .kutu-list-btn {
    width: 40px !important;
    height: 40px !important;
}
.fdm-root-plate .kutu-timer-btn svg,
.fdm-root-plate .kutu-list-btn svg {
    width: 24px !important;
    height: 24px !important;
}


/* BULUNAN EN SON CSS TASARIMI (list-mode-paper vb.) */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

/* LİSTE MODU */
.thematic-words-grid.list-mode-grid {
    display: block !important;
    direction: ltr;
}

.list-mode-paper {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 30px 40px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Caveat', 'Comic Sans MS', cursive;
}

.list-mode-title {
    font-size: 3rem;
    font-weight: normal !important;
    text-align: center;
    color: #2c3e50;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #e0e0e0;
}

.list-mode-columns {
    column-count: 2;
    column-gap: 50px;
    column-rule: 1px solid #e0e0e0; /* Ortadaki çizgi */
}

.list-mode-item {
    break-inside: avoid-column;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Sadece hafif bir alt çizgi */
    transition: background 0.2s ease;
}

.list-mode-item:hover {
    background: rgba(0,0,0,0.02); /* Üzerine gelince çok hafif belirginlik */
}

.list-mode.aksam-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.list-mode-num {
    font-size: 1.4rem;
    font-weight: normal !important;
    color: #adb5bd;
    margin-right: 15px;
    flex: 0 0 auto;
}

.list-mode-tr {
    font-size: 1.4rem;
    font-weight: normal !important;
    color: #495057;
    flex: 1;
    text-align: left;
    margin-right: 10px;
}

.list-mode-ar {
    font-size: 2.4rem;
    font-family: 'Arakom', sans-serif !important;
    color: #000;
    flex: 1;
    text-align: right;
    margin-left: 10px;
}

/* TELAFFUZ FILTRE CSS */
.t-filter-chip {
    padding: 8px 16px;
    background: transparent;
    color: #2ecc71;
    border-radius: 20px;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid #2ecc71;
    transition: all 0.2s ease;
    font-weight: 600;
}
.desktop-chip {
    padding: 10px 25px !important;
    font-size: 1.5rem !important;
    border-radius: 30px !important;
}
.t-filter-chip.active {
    background: transparent;
    color: #e74c3c !important;
    border-color: #e74c3c !important;
    box-shadow: none;
}
.desktop-chip.active {
    background: #eff6ff;
    color: #3498db;
    border-color: #3498db;
    box-shadow: none;
}
.aksam-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 25px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px;
    box-shadow: none !important;
    gap: 10px;
    height: 100%;
}
.aksam-chip::after {
    content: '';
    display: block;
    width: 90px;
    height: 8px;
    background-color: #2ecc71;
    border-radius: 8px;
    margin-top: 6px;
    transition: background-color 0.2s ease;
}
.aksam-chip.active {
    background: transparent !important;
    box-shadow: none !important;
}
.aksam-chip.active::after {
    background-color: #e74c3c !important;
}
.aksam-chip.active .aksam-name {
    /* Kept original colors intact for highlighting */
}
.aksam-chip.active .aksam-visual {
    /* Kept original colors intact for highlighting */
}
.aksam-chip .aksam-name {
    font-size: 1.5rem;
    font-weight: 600;
}
.aksam-chip .aksam-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
}
.t-result-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    cursor: pointer;
}
.t-result-ar {
    font-family: 'Arakom', sans-serif;
    font-size: 2rem;
    color: #000;
}
.t-result-tag {
    font-size: 0.8rem;
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 5px;
}


/* POPUP KUCULTME: tam ekran olmayan cekim tablolari biraz daha kucuk acilsin */
.conjugation-inline-container .conjugation-carousel { max-height: 52vh !important; }
.conjugation-inline-container .conjugation-carousel > div { max-height: 52vh !important; }


/* KALIP-POPUP KATMAN DUZELTME: acik popup kutusu stacking context olusturmasin,
   boylece kutunun kalibi (numarasi) asla baska popuplarin ustune cikmaz.
   Yukseklik yalnizca .conjugation-inline-container'a (popup) verilir. */
.glass-box.matrix-opened { z-index: auto !important; }

/* ==========================================================================
   KALIP LİSTESİ PERDESİ  (sarf/kalipliste.js)
   --------------------------------------------------------------------------
   Kök seçili DEĞİLKEN bir kalıba dokununca açılır: o kalıptan sözlükte
   kayıtlı bütün kelimeler. Üç görünüm — data-kip özniteliğiyle ayrılır:
     tekil : isim kalıbı, 4 sütun kart ızgarası
     bab   : sülâsî mücerret bâbı, 3 sütun (mazi · muzari · emir)
     mezid : mezid satırı, en çok 6 sütun
   Görsel dil .bab-info-overlay'den alındı; ölçüler tabloyla aynı ailede.
   ========================================================================== */
/* Perde ARKASI GÖRÜNSÜN: koyuluk 0.72 -> 0.34. Tablo silik de olsa
   seçiliyor, öğrenci nereden geldiğini kaybetmiyor. Panel gölgesi
   buna karşılık koyulaştırıldı ki perde yine öne çıksın. */
.kl-perde {
    position: fixed; inset: 0; z-index: 1000000;
    background: rgba(15, 23, 42, 0.20);
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .28s ease;
    direction: ltr;
}
.kl-perde.acik { display: flex; opacity: 1; }
body.kl-kilit { overflow: hidden; }

/* PANEL SAYDAM: beyaz bir levha yok. Dolgu yalnız KELİME KUTULARINDA;
   aralarda arkadaki mücerret/mezid tablosu görünür. */
/* YÜKSEKLİK SABİT (max değil): vezin levhası ile klavye hep en üstte,
   aynı yerde durur; kelimeler onların altından başlayıp AŞAĞI DOĞRU
   dizilir ve yalnız gövde kayar. Yükseklik içeriğe göre değişseydi
   liste kısayken pencere ortalanıyor, başlık her kalıpta başka bir
   hizaya düşüyordu. */
.kl-pencere {
    background: transparent; box-shadow: none;
    border-radius: 28px; position: relative;
    width: 97%; max-width: 97vw; height: 97vh; max-height: 97vh;
    /* ÜST BOŞLUK KISILDI: vezin levhası, klavye ve kapat düğmesi ekranın
       en tepesinden başlasın — kazanılan yer listeye gidiyor. */
    padding: 6px 26px 14px;
    /* content-box olsaydı 93vh'ye iç boşluk EKLENİR, pencere %96.8'e
       çıkar ve alt kenarı ekrandan taşardı. */
    box-sizing: border-box;
    display: flex; flex-direction: column;
    transform: translateY(18px) scale(.96);
    transition: transform .35s cubic-bezier(.175,.885,.32,1.275);
}
.kl-perde.acik .kl-pencere { transform: translateY(0) scale(1); }

.kl-kapat {
    position: absolute; top: 6px; right: 18px;      /* başlık sırasıyla aynı hizada */
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: #ef4444; color: #fff; font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(239,68,68,.4);
    transition: transform .3s ease, background-color .3s ease;
}
.kl-kapat:hover { transform: rotate(90deg) scale(1.12); background: #dc2626; }

/* ---- ÜST SIRA: SOLDA SÜZGEÇ, SAĞDA KALIP LEVHASI ----
   İkisi alt alta dururken listeye kalan yükseklik azalıyordu; yan yana
   gelince hem kelimelere yer açıldı hem de süzgeç göz hizasında kaldı. */
.kl-ust {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex: 0 0 auto;                 /* gövde uzasa da başlık kısalmaz/kaymaz */
    gap: 18px; margin-bottom: 12px; direction: ltr;
    /* Sağ üstteki kapat düğmesi (44px + 18px kenar) levhanın üstüne
       binmesin diye o kadar yer ayrılır. */
    padding-right: 52px;
    /* Süzgeç, sol kenarla vezin levhası arasında GERÇEKTEN ortada dursun:
       aradaki 18px'lik boşluk sağ tarafa ekleniyor, aynısını sola paddingle
       verince otomatik kenarların paylaştırdığı yer iki yanda eşitlenir. */
    padding-left: 18px;
}
/* Süzgeç gizliyken (avuç içi liste) levha yine ortada dursun */
.kl-ust.kl-ust-yalin { justify-content: center; }

/* Başlık: numara · vezin (iri) · adı — üst sıranın SAĞ ucunda */
/* Başlık kendi levhasında: saydam panelde tablonun üstünde okunsun */
.kl-bas {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    align-self: flex-start; padding: 10px 30px 12px; margin-bottom: 0;
    background: rgba(255,255,255,.94); border-radius: 20px;
    border-bottom: 4px solid var(--kl-vurgu, #9ca3af);
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    flex: 0 0 auto;
}
.kl-no {
    font-weight: 800; font-size: .95rem; color: #fff; background: #C00000;
    border-radius: 999px; padding: 2px 14px; letter-spacing: .04em;
}
.kl-vezin {
    font-family: 'Harmattan', 'arakom', serif;
    font-size: clamp(3.4rem, 8vh, 5.4rem); line-height: 1.2; color: #0f172a;
}
.kl-ad { font-weight: 700; color: #64748b; font-size: clamp(1.05rem, 2.6vh, 1.4rem); }

/* ---- SÜZGEÇ ÇUBUĞU: alfabe · aksâm-ı seb'a ----
   Başlıkla listenin arasında kendi levhasında durur. Üstte iki sekme,
   altında o sekmenin kutucukları. Kutucuk dili tablodaki kutuların
   dili: 1px kenar + 3B alt kenar; seçili olan kırmızı (.current-active-red). */
/* SÜZGEÇ, SOL BOŞLUĞUN ORTASINDA: otomatik kenar boşlukları artan yeri
   iki yana eşit paylaştırır, yani levha sayfanın sol kenarıyla vezin
   levhası arasında ortalanır (space-between'i ezer). */
.kl-suzgec {
    align-self: flex-start; min-width: 0; flex: 0 1 auto;
    margin-left: auto; margin-right: auto;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 9px 14px 11px; margin-bottom: 0;
    background: rgba(255,255,255,.94); border-radius: 16px;
    border-bottom: 4px solid var(--kl-vurgu, #9ca3af);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
/* KAPALI KİP: perde açılınca yalnız iki başlık görünür, klavye/şema
   gizlidir. Başlığa dokunmak açar, yanındaki ok yeniden küçültür.
   Böylece ilk bakışta ekranın tamamı kelimelerin olur. */
.kl-suzgec[data-acik="0"] { padding: 7px 10px 8px; }
.kl-suzgec[data-acik="0"] .kl-pullar { display: none; }
/* Ok kapalıyken de durur, yalnız AŞAĞI döner: "burada açılacak bir şey var" */
.kl-suzgec[data-acik="0"] .kl-kucult svg { transform: rotate(180deg); }
.kl-sekmeler { display: flex; align-items: center; gap: 6px; }
/* Katla/aç oku — açıkken yukarı, kapalıyken aşağı bakar */
.kl-kucult {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    width: 30px; height: 30px; padding: 0; flex: 0 0 auto; margin-left: 2px;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #64748b;
    border: 1px solid #e2e8f0; border-radius: 999px;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.kl-kucult:hover { background: #e2e8f0; color: #0f172a; transform: translateY(-1px); }
.kl-kucult:active { transform: translateY(0); }
.kl-kucult:focus-visible { outline: 3px solid #FF3B30; outline-offset: 2px; }
.kl-kucult svg { display: block; pointer-events: none; transition: transform .2s ease; }
/* Süzgeç kapalıyken hangi harf/kısım seçili olduğu başlıkta durur */
.kl-sekme-rozet:empty { display: none; }
.kl-sekme-rozet {
    margin-left: 7px; padding: 1px 7px; border-radius: 999px;
    background: #FF3B30; color: #fff; font-size: .72rem; font-weight: 800;
    font-family: 'Harmattan', 'arakom', inherit; line-height: 1.5;
}
.kl-sekme-acik .kl-sekme-rozet { background: #FF3B30; }
.kl-sekme {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    font: inherit; font-weight: 700; font-size: clamp(.9rem, 1.9vh, 1.05rem);
    color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 999px; padding: 5px 18px; letter-spacing: .01em;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.kl-sekme:hover { color: #0f172a; background: #e2e8f0; }
.kl-sekme-acik, .kl-sekme-acik:hover {
    color: #fff; background: #0f172a; border-color: #0f172a;
    box-shadow: 0 3px 8px rgba(15,23,42,.28);
}
.kl-pullar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    max-width: min(760px, 52vw);
}
/* ---- HARF SÜZGECİ = KÜÇÜLTÜLMÜŞ ARAMA KLAVYESİ ----
   Diziliş de tasarım da sayfanın kendi arama klavyesinden geliyor:
   sıralar universalKeyboardLayout'tan (kaliplartablosu.js), tuşun rengi
   ve biçimi .search-key'den — yalnız ölçüsü 55px'ten 40px'e indi.
   Öğrenci kök ararken hangi tuşa basıyorsa harfi burada da aynı yerde
   bulur; ezberlemesi gereken ikinci bir yerleşim yok. */
.kl-klavye { display: flex; flex-direction: column; gap: 5px; }
.kl-kb-satir { display: flex; justify-content: center; gap: 5px; direction: ltr; }
.kl-tus {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    position: relative; width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #1d1d1f; color: #fff;
    border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
    transition: background-color .12s ease, transform .1s ease, box-shadow .12s ease;
}
.kl-tus:hover { background: #323236; }
.kl-tus:active { transform: scale(.95); }          /* arama klavyesindeki basma hissi */
.kl-tus:focus-visible { outline: 3px solid #FF3B30; outline-offset: 2px; }
.kl-tus-harf { font-family: 'Arakom', 'Harmattan', serif; font-size: 21px; line-height: 1; }
.kl-tus-sayi {
    position: absolute; top: 2px; left: 4px;
    font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.5);
    direction: ltr; unicode-bidi: isolate;
}
/* Bu kalıpta örneği olmayan harf: klavyenin şekli bozulmasın diye
   yerinde durur, sönüktür ve basılamaz. */
.kl-tus-olu, .kl-tus-olu:hover {
    background: #2b2b2f; color: rgba(255,255,255,.2); cursor: default; transform: none;
}
/* Seçili tuş perdenin geri kalanıyla aynı dili konuşur (#FF3B30) */
.kl-tus-secili, .kl-tus-secili:hover {
    background: #FF3B30; color: #fff;
    box-shadow: 0 0 0 2px rgba(255,59,48,.35), 0 3px 8px rgba(255,59,48,.4);
}
.kl-tus-secili .kl-tus-sayi { color: rgba(255,255,255,.85); }
/* Sil tuşunun yerindeki "Hepsi": süzgeci kaldırır */
.kl-tus-hepsi { width: auto; min-width: 78px; padding: 0 11px; gap: 7px; background: #3f3f46; }
.kl-tus-hepsi:hover { background: #52525b; }
.kl-tus-hepsi .kl-tus-harf { font-family: inherit; font-size: .84rem; font-weight: 800; letter-spacing: .02em; }
.kl-tus-hepsi .kl-tus-sayi { position: static; color: rgba(255,255,255,.6); }
.kl-tus-hepsi.kl-tus-secili { background: #FF3B30; }

/* ---- AKSÂM SEKMESİ = KAVRAM ŞEMASININ KÜÇÜĞÜ ----
   Renk, kart dili ve iki dallı yerleşim sayfanın kendi kavram
   şemasından (#aksam-sema-panel, kaliplartablosu.html) geliyor:
   SOLDA mu'tel dördü turuncu, SAĞDA sahih üçü yeşil; her kart
   ad · tanım · örnek fiil taşır. Ölçüler süzgece sığacak kadar küçültüldü. */
.kl-pullar[data-kip="aksam"] { max-width: 100%; }
.kl-sema { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 560px; max-width: 100%; }
/* Şemadaki koyu kök başlığının yerinde "Hepsi": süzgeci kaldırır */
.kl-sema-kok {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: baseline; gap: 8px;
    background: #2c3e50; color: #fff; border: none; border-radius: 9px;
    padding: 5px 24px; font-weight: 800; font-size: .95rem; letter-spacing: .03em;
    box-shadow: 0 3px 9px rgba(0,0,0,.18);
    transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.kl-sema-kok:hover { background: #34495e; transform: translateY(-1px); }
.kl-sema-kok b { font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.65); }
.kl-sema-kok.kl-sema-secili { background: #FF3B30; box-shadow: 0 3px 10px rgba(255,59,48,.4); }
.kl-sema-kok.kl-sema-secili b { color: rgba(255,255,255,.8); }

.kl-sema-dallar { display: flex; align-items: stretch; gap: 12px; width: 100%; }
.kl-sema-sutun {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    background: #fff; border: 2px solid #E9EEF5; border-radius: 12px; padding: 9px 9px 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,.05);
}
.kl-sema-baslik {
    width: 84%; padding: 4px 10px; border-radius: 7px; margin-bottom: 8px;
    color: #fff; font-weight: 800; font-size: .84rem; letter-spacing: .08em;
    text-align: center; direction: ltr; unicode-bidi: isolate;
}
.kl-sema-sahih .kl-sema-baslik { background: #20C997; }
.kl-sema-mutel .kl-sema-baslik { background: #F39C12; }
/* Kartlar SAĞDAN SOLA: Sâlim sağda Mehmûz solda, Misâl sağda Ecvef solda,
   Nâkıs sağda Lefîf solda — kavram şemasındaki sıranın aynısı.
   Kartın içi LTR kalır ki Türkçe tanımdaki nokta/virgül başa atlamasın. */
.kl-sema-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; flex: 1 1 auto; direction: rtl; }
.kl-sema-kart { direction: ltr; }
.kl-sema-kart {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    position: relative; background: #fdfdfd;
    border: 1px solid #eef2f7; border-left: 4px solid #ccc; border-radius: 9px;
    padding: 7px 6px 7px; display: flex; flex-direction: column;
    align-items: center; justify-content: space-between; gap: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
    transition: transform .15s ease, box-shadow .15s ease, border-left-width .15s ease,
                background-color .15s ease, border-color .15s ease;
}
.kl-sema-kart:hover { transform: translateY(-3px); border-left-width: 7px; box-shadow: 0 5px 12px rgba(0,0,0,.1); }
.kl-sema-kart:focus-visible { outline: 3px solid #FF3B30; outline-offset: 2px; }
.kl-sk-sahih { border-left-color: #20C997; }
.kl-sk-mutel { border-left-color: #F39C12; }
/* Tek sayıda kart kalan sütunda sonuncusu ortada (şemadaki MUDAAF gibi) */
.kl-sk-orta { grid-column: 1 / -1; width: 64%; margin: 0 auto; }
.kl-sk-ad { font-weight: 800; font-size: .93rem; color: #2c3e50; line-height: 1.2; }
.kl-sk-tanim { font-size: .66rem; color: #7f8c8d; line-height: 1.28; text-align: center; }
.kl-sk-ornek {
    font-family: 'Harmattan', 'arakom', serif; font-size: 1.55rem; line-height: 1.4;
    color: #2c3e50; background: #ecf0f1; border-radius: 5px; padding: 0 9px; margin-top: 3px;
}
.kl-sk-sayi {
    position: absolute; top: 3px; right: 5px;
    font-size: .6rem; font-weight: 800; color: #94a3b8;
    direction: ltr; unicode-bidi: isolate;
}
/* Seçili kart: perdenin geri kalanıyla aynı kırmızı dil */
.kl-sema-kart.kl-sema-secili, .kl-sema-kart.kl-sema-secili:hover {
    background: #fffaf9; border-color: #FF3B30; border-left-color: #FF3B30;
    box-shadow: inset 0 3px 8px rgba(255,59,48,.15), 0 2px 7px rgba(255,59,48,.22);
}
.kl-sema-kart.kl-sema-secili .kl-sk-ad { color: #FF3B30; }
.kl-sema-kart.kl-sema-secili .kl-sk-sayi { color: #fca5a1; }
/* Bu kalıpta örneği olmayan kısım: bilgi olarak durur, basılamaz */
.kl-sema-bos, .kl-sema-bos:hover {
    opacity: .34; cursor: default; transform: none; box-shadow: none; border-left-width: 4px;
}
.kl-pul {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: baseline; gap: 5px;
    background: #f8f9fa; color: #334155;
    border: 1px solid #d1d5db; border-bottom: 3px solid var(--kl-vurgu, #9ca3af);
    border-radius: 8px; padding: 4px 10px 3px; line-height: 1.25;
    transition: transform .12s ease, background-color .12s ease,
                color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.kl-pul:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.kl-pul:active { transform: translateY(0); box-shadow: none; }
.kl-pul:focus-visible { outline: 3px solid #FF3B30; outline-offset: 2px; }
.kl-pul-ad { font-weight: 700; font-size: clamp(.92rem, 1.95vh, 1.06rem); }
.kl-pul-sayi {
    font-size: .74rem; font-weight: 800; color: #94a3b8;
    direction: ltr; unicode-bidi: isolate;
}
/* Harf kutucuğu: Arapça harf iri ve okunur dursun */
.kl-pul-harf .kl-pul-ad {
    font-family: 'Harmattan', 'arakom', serif; font-size: 1.7rem; line-height: 1;
    color: #0f172a;
}
/* Seçili kutucuk: sayfadaki "seçili = kırmızı" diliyle aynı */
.kl-pul-secili, .kl-pul-secili:hover {
    background: #fffaf9; color: #FF3B30;
    border-color: #FF3B30; border-bottom-color: #FF3B30;
    box-shadow: inset 0 3px 8px rgba(255,59,48,.15), 0 2px 6px rgba(255,59,48,.18);
}
.kl-pul-secili .kl-pul-ad { color: #FF3B30; }
.kl-pul-secili .kl-pul-sayi { color: #fca5a1; }
/* Bu kalıpta örneği olmayan kısım: bilgi olarak durur ama tıklanmaz */
.kl-pul-pasif, .kl-pul-pasif:hover {
    opacity: .38; cursor: default; transform: none; box-shadow: none;
    background: #f1f5f9; color: #94a3b8;
}
.kl-pul-hepsi .kl-pul-ad { letter-spacing: .02em; }

.kl-govde { overflow: auto; flex: 1 1 auto; min-height: 0; padding: 4px 2px 2px; }
.kl-bos {
    text-align: center; color: #475569; font-weight: 700; padding: 26px 20px;
    background: rgba(255,255,255,.92); border-radius: 14px;
    border-bottom: 4px solid #9ca3af;
}

/* ---- TEKİL: 4 sütunlu kart ızgarası ----
   AKIŞ SAĞDAN SOLA: liste Arapça, ilk kart SAĞ ÜSTTE başlar ve
   satırlar sağdan sola dolar. */
.kl-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; direction: rtl; }

/* KELİME KUTUSU — tablodaki .glass-box'ın birebir dili:
   1px açık gri üst/yan kenar + 4px koyu ALT kenar (yükseltilmiş tuş
   hissi) + 8px köşe. Alt kenarın rengi o bâbın rengidir (--kl-vurgu);
   mücerrette tablodaki gibi nötr gri kalır. */
.kl-kart {
    background: #fff;
    border-top: 1px solid #d1d5db; border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    border-bottom: 4px solid var(--kl-vurgu, #9ca3af);
    border-radius: 8px;
    padding: 14px 12px 10px; text-align: center; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease;
}
.kl-kart.kl-ornekli { cursor: pointer; }
/* Tablodaki :active hissi — kutu basılıp oturuyor */
.kl-kart.kl-ornekli:hover { box-shadow: 0 6px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.kl-kart.kl-ornekli:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
.kl-emoji { font-size: 1.7rem; line-height: 1; }
.kl-ar {
    font-family: 'Harmattan', 'arakom', serif;
    font-size: clamp(2.9rem, 6.4vh, 4.4rem); line-height: 1.3; color: #0f172a;
}
/* Türkçe satır LTR: ızgara rtl olduğu için nokta ve parantezler
   cümlenin başına atlıyordu (".Yiyen, Obur (İsm-i Fail)"). */
.kl-tr {
    color: #475569; font-size: clamp(.98rem, 2.1vh, 1.28rem); line-height: 1.4;
    direction: ltr; unicode-bidi: isolate;
}
/* Türkçesi girilmemiş kayıt: kart yarım görünmesin, eksik belli olsun */
.kl-tr-yok { color: #cbd5e1; letter-spacing: .1em; }
.kl-kok {
    position: absolute; top: 7px; left: 10px;
    font-family: 'Harmattan', 'arakom', serif; font-size: 1.25rem;
    color: #cbd5e1; letter-spacing: .06em;
}
/* KARTIN SAĞ ÜST KÖŞESİ: kökü tabloda açan simge. Kök rozetinin
   karşısında ve onunla aynı sessiz gride durur — kartı kalabalık
   yapmasın, dokunulduğunda belirginleşsin. İsim kalıplarında kök
   sütunu olmadığı için tek kısayol bu; maraton simgesi konmadı,
   bunlar isim kalıpları. */
.kl-kart-tablo {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    position: absolute; top: 5px; right: 7px; z-index: 2;
    width: 24px; height: 24px; padding: 0; display: flex;
    align-items: center; justify-content: center;
    background: none; border: none; border-radius: 6px; color: #cbd5e1;
    transition: color .15s ease, background-color .15s ease, transform .12s ease;
}
.kl-kart-tablo:hover { color: #FF3B30; background: #fff5f4; transform: translateY(-1px); }
.kl-kart-tablo:active { transform: translateY(0); }
.kl-kart-tablo:focus-visible { outline: 3px solid #FF3B30; outline-offset: 1px; }
.kl-kart-tablo svg { display: block; width: 17px; height: 17px; pointer-events: none; }
/* Matris hücrelerinde kök zaten satır başında ve kısayolları orada */
.kl-kart.kl-mini .kl-kart-tablo { display: none; }
/* Örnek cümle: kart açılınca görünür */
.kl-ornek { display: none; margin-top: 6px; border-top: 1px dashed #e2e8f0; padding-top: 6px; }
.kl-kart.kl-acik .kl-ornek { display: block; }
.kl-ornek span {
    display: block; font-family: 'Harmattan', 'arakom', serif;
    font-size: 1.85rem; color: #0f172a; line-height: 1.5;
}
.kl-ornek i {
    display: block; color: #64748b; font-size: .95rem; font-style: italic;
    direction: ltr; unicode-bidi: isolate;
}

/* ---- MATRİS: bâb (3 sütun) ve mezid (en çok 6 sütun) ----
   SAĞDAN SOLA: fiil kökleri SAĞDA, mazi sağda, emir (ve mezidde son
   türev) solda — Arapça okuma yönü. dir=rtl sütun sırasını çevirir,
   HTML'deki sıra (kök, mazi, muzari, emir…) olduğu gibi kalır.
   table-layout:fixed ŞART: kök sütunu dar kalsın, kalıp sütunları eşit
   bölüşsün. Otomatik düzende kök sütunu bütün artan yeri yutuyordu. */
.kl-tablo {
    width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 8px;
    direction: rtl;
}
/* Türkçe sütun adları ve numaralar LTR kalır (rtl kapta "İsm-i Mef'ûl"
   ve "67 · 68" gibi karışık metinler ters okunuyordu). */
.kl-th-ad, .kl-th-no { direction: ltr; unicode-bidi: isolate; }
/* Sayfanın genel th kuralı (color:#fff !important, beyaz kenarlık)
   burada geçerli olmamalı: "Kök" başlığı beyaz-üstüne-beyaz kalıyor,
   hücreler beyaz çerçeveyle kutulanıyordu. */
/* Sütun başlıkları tablodaki gibi RENKLİ PİL: fiil yeşil, isim mavi
   (.baslik-fiil / .baslik-isim sayfanın kendi sınıfları). */
.kl-tablo th {
    padding: 8px 6px 9px; vertical-align: middle;
    border: none !important; white-space: nowrap;
    border-radius: 10px; background-clip: padding-box;
}
/* Başlık pilleri yan yana YAPIŞMASIN: saydam yan kenar aralık açar,
   table-layout:fixed olduğu için sütun genişliğini bozmaz. */
.kl-tablo th.kl-th {
    color: #0f172a !important; box-shadow: 0 2px 6px rgba(0,0,0,.10);
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    /* !important şart: .baslik-fiil/.baslik-isim "background" KISA
       yazımını !important ile veriyor, o da background-clip'i
       border-box'a sıfırlıyor — gradyan saydam kenara taşıp piller
       yapışık görünüyordu. */
    background-clip: padding-box !important;
}
/* PASTEL BAŞLIKLAR: perdedeki kutular tablodakinden çok daha büyük
   olduğu için sayfanın doygun yeşil/mavisi burada göze batıyordu.
   Zemin açıldı, yazı koyulaştı — okunurluk düşmedi (yeşilde ~6:1,
   mavide ~6.5:1). Tablo sayfasının kendi .baslik-fiil/.baslik-isim
   renkleri DEĞİŞMEDİ; bu ezme yalnız perdenin içinde geçerli. */
/* background KISA YAZIMI kullanılmıyor: o, background-clip'i de
   border-box'a sıfırlar ve piller yan yana yapışırdı (aynı tuzağa
   daha önce düşülmüştü). Yalnız görüntü katmanı eziliyor. */
.kl-tablo th.kl-th.baslik-fiil { background-image: linear-gradient(135deg, #a7f3d0, #6ee7b7) !important; }
.kl-tablo th.kl-th.baslik-isim { background-image: linear-gradient(135deg, #dbeafe, #93c5fd) !important; }
.kl-tablo th.kl-th .kl-th-ad,
.kl-tablo th.kl-th .kl-th-vezin { color: #0f172a; text-shadow: none; }
.kl-tablo th.kl-th.baslik-fiil .kl-th-ad,
.kl-tablo th.kl-th.baslik-fiil .kl-th-vezin { color: #065f46; }
.kl-tablo th.kl-th.baslik-isim .kl-th-ad,
.kl-tablo th.kl-th.baslik-isim .kl-th-vezin { color: #1e3a8a; }
.kl-tablo th.kl-th.baslik-fiil .kl-th-no { color: rgba(6,95,70,.6); }
.kl-tablo th.kl-th.baslik-isim .kl-th-no { color: rgba(30,58,138,.6); }
.kl-tablo thead tr { }
.kl-kok-bas {
    color: #475569 !important; font-weight: 800; font-size: 1.05rem;
    letter-spacing: .04em; background: rgba(255,255,255,.8);
}
.kl-th-ad { display: block; font-weight: 800; color: #0f172a; font-size: clamp(1.05rem, 2.3vh, 1.35rem); }
/* Başlıktaki vezin, hücredeki örnek kelimeyle AYNI PUNTODA olsun:
   ölçü tek yerden gelsin diye .kl-mini .kl-ar ile birebir aynı clamp. */
.kl-th-vezin {
    display: block; font-family: 'Harmattan', 'arakom', serif;
    font-size: clamp(2.7rem, 5.8vh, 4rem); color: #C00000; line-height: 1.25;
}
.kl-th-no { display: block; color: #94a3b8; font-size: .82rem; letter-spacing: .06em; }
/* Sütun genişlikleri AÇIKÇA veriliyor: yalnız table-layout:fixed
   yetmedi, kök sütunu artan yerin tamamını yutuyordu. kl-sN sınıfı
   kalıp sütunu sayısını taşır (3 · 5 · 6). */
.kl-kok-bas { width: 112px !important; }
.kl-tablo.kl-s3 th:not(.kl-kok-bas) { width: calc((100% - 112px) / 3); }
.kl-tablo.kl-s5 th:not(.kl-kok-bas) { width: calc((100% - 112px) / 5); }
.kl-tablo.kl-s6 th:not(.kl-kok-bas) { width: calc((100% - 112px) / 6); }
/* Hücreler SAYDAM: dolgu yalnız kelime kutusunda. Satır, bâbın
   rengiyle çok hafif tonlanır (mezid tablosundaki satır tonunun aynısı,
   çalışma anında oradan okunuyor) — mücerrette ton yok. */
.kl-tablo td {
    background: transparent; border: none;
    padding: 5px 6px; text-align: center; vertical-align: middle;
}
.kl-perde[data-tonlu="1"] .kl-tablo tbody tr { background: var(--kl-ton); }
.kl-tablo tbody tr { border-radius: 12px; }
.kl-tablo tbody td:first-child { border-radius: 0 12px 12px 0; }
.kl-tablo tbody td:last-child  { border-radius: 12px 0 0 12px; }
/* Kök levhası kendi köşesini korur (satır ucu yuvarlaması onu ezmesin) */
.kl-tablo tbody td.kl-kok-hucre { border-radius: 8px; }
/* Kök hücresi BEYAZ levha: mücerret satırlarında ton olmadığı için
   kök yazısı arkadaki tablonun üstüne düşüyor ve okunmuyordu.
   Kutu diliyle aynı: 1px kenar + 4px 3B alt kenar. */
/* Seçici .kl-tablo td'den DAHA ÖZGÜL olmalı: o kural hücreleri
   saydam yapıyor ve tek sınıflı seçiciyi eziyordu. */
.kl-tablo td.kl-kok-hucre {
    font-family: 'Harmattan', 'arakom', serif; font-size: clamp(2.2rem, 4.8vh, 3.2rem);
    color: #FF3B30; font-weight: 700; letter-spacing: .05em;   /* tablodaki bâb sütunu rengi */
    background: #fff;
    border-top: 1px solid #d1d5db; border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    border-bottom: 4px solid var(--kl-vurgu, #9ca3af);
    border-radius: 8px; padding: 8px 4px 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.kl-yok { color: #cbd5e1; font-size: 1.8rem; }

/* ---- KÖK LEVHASININ İÇİ: KÖK + İKİ KISAYOL ----
   Üstte kök yazısı, altında iki düğme: ⏱ maraton (fiil çekim tablosu)
   ve ▦ tablo (kökü sayfada aç). Düğme dili kutuların diliyle aynı:
   1px kenar + 3B alt kenar, alt kenar rengi satırın tonundan. */
.kl-kok-plaka { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.kl-kok-ad { display: block; line-height: 1.1; }
.kl-kok-dugmeler { display: flex; gap: 6px; justify-content: center; }
.kl-kd {
    -webkit-appearance: none; appearance: none;
    width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #f8f9fa; color: #475569; cursor: pointer;
    border: 1px solid #d1d5db;
    border-bottom: 3px solid var(--kl-vurgu, #9ca3af);
    border-radius: 8px;
    transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.kl-kd:hover { background: #fff; color: #FF3B30; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.kl-kd:active { transform: translateY(0); box-shadow: none; }
.kl-kd:focus-visible { outline: 3px solid #FF3B30; outline-offset: 2px; }
.kl-kd svg { display: block; pointer-events: none; }   /* tık hep düğmeye gelsin */
.kl-kd-pasif, .kl-kd-pasif:hover {
    opacity: .32; cursor: default; transform: none; box-shadow: none;
    background: #f1f5f9; color: #94a3b8;
}

/* ---- TIKLANAN SÜTUN ----
   Bütün satır listelendiği için hangi kalıba basıldığı kaybolmasın:
   o sütunun başlığı öne çıkar, hücreleri kırmızı çerçeveli olur.
   Renk dili tablodaki .current-active-red ile aynı (#FF3B30). */
.kl-tablo th.kl-th.kl-sec {
    box-shadow: 0 0 0 3px #FF3B30, 0 6px 16px rgba(255,59,48,.35);
    transform: translateY(-2px);
}
.kl-tablo th.kl-th.kl-sec .kl-th-no {
    color: #C0392B; font-weight: 800; letter-spacing: .12em;
}
.kl-tablo td.kl-sec .kl-kart {
    border-color: #FF3B30; border-bottom-color: #FF3B30;
    background-color: #fffaf9;
    box-shadow: inset 0 3px 8px rgba(255,59,48,.15), 0 1px 2px rgba(255,59,48,.1);
}
.kl-tablo td.kl-sec.kl-yok { color: #fca5a1; }

/* ---- MUFÂ'ALE'NİN İKİ MASTARI (67/68): BİRİ AÇIK, ÖBÜRÜ KATLI ----
   İki vezin tek başlığa yığılınca sütun taşıyordu. Çözüm sayfada zaten
   var: mezid tablosunda 67/68 kutularından biri daralıp yalnız
   numarasını gösteriyor (.bo-kapali, bkz. sarf/babodak.js). Perde de o
   dili konuşuyor — dar kutu, ortalı numara, üstüne gelince turuncu. */
.kl-tablo th.kl-th-ikili .kl-th-ic {
    display: flex; align-items: stretch; gap: 6px;
}
.kl-tablo th.kl-th-ikili .kl-th-ac { flex: 1 1 auto; min-width: 0; }
.kl-katli {
    flex: 0 0 34px; width: 34px; align-self: stretch; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 1rem; font-weight: 800; line-height: 1;
    color: rgba(30,58,138,.75);
    background: rgba(255,255,255,.55);
    border: 1px dashed rgba(30,58,138,.35);
    border-radius: 8px; cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}
/* Tablodaki .bo-kapali:hover ile aynı turuncu */
.kl-katli:hover, .kl-katli:focus-visible {
    background: #fff3e6; border-color: #f39c12; color: #b45309; outline: none;
}
/* Matris içindeki kart da tablodaki kutunun aynısı — yalnız daha dar */
.kl-kart.kl-mini { padding: 8px 6px 6px; gap: 0; }
.kl-kart.kl-mini .kl-kok, .kl-kart.kl-mini .kl-emoji { display: none; }
.kl-kart.kl-mini .kl-ar { font-size: clamp(2.7rem, 5.8vh, 4rem); }
.kl-kart.kl-mini .kl-tr { font-size: clamp(1rem, 2.1vh, 1.28rem); color: #64748b; }
.kl-kart.kl-mini.kl-ornekli:hover { transform: none; box-shadow: none; }
.kl-kart.kl-mini.kl-ornekli:hover .kl-ar { color: #C00000; }
.kl-kart.kl-mini .kl-ornek span { font-size: 1.5rem; }

/* Mufâ'ale'nin iki mastarı aynı hücrede yan yana durur */
.kl-tablo td > .kl-kart.kl-mini + .kl-kart.kl-mini { border-top: 1px dashed #eef2f7; margin-top: 4px; }

/* Dar ekranda yan yana sığmıyor: süzgeç yine kalıp levhasının ÜSTÜNE
   geçer, ikisi de ortalanır. Harfler yine üç satır. */
@media (max-width: 1150px) {
    .kl-ust { flex-direction: column; align-items: center; gap: 10px; padding-right: 0; padding-left: 0; }
    .kl-suzgec { align-self: center; align-items: center; }
    .kl-bas { align-self: center; }        /* yan yana kipteki flex-start'ı ez */
    .kl-pullar { justify-content: center; max-width: min(1100px, 92vw); }
    .kl-pullar[data-kip="aksam"] { max-width: min(1100px, 92vw); }
}
@media (max-width: 1000px) {
    .kl-izgara { grid-template-columns: repeat(3, 1fr); }
    .kl-pencere { padding: 8px 16px 14px; }
    .kl-th-vezin { font-size: clamp(2.1rem, 4.6vh, 2.8rem); }
    .kl-ar { font-size: clamp(2.3rem, 5.4vh, 3.2rem); }
}
@media (max-width: 700px) {
    .kl-izgara { grid-template-columns: repeat(2, 1fr); }
    .kl-govde { overflow: auto; }
    .kl-tablo { min-width: 720px; }          /* dar ekranda yatay kaydır */
    .kl-kok-bas { width: 74px !important; }
    .kl-tus { width: 32px; height: 32px; border-radius: 6px; }
    .kl-tus-harf { font-size: 17px; }
    .kl-tus-hepsi { min-width: 64px; padding: 0 8px; }
    .kl-klavye, .kl-kb-satir { gap: 4px; }
    .kl-kd { width: 27px; height: 27px; border-radius: 7px; }
    .kl-kd svg { width: 16px; height: 16px; }
    .kl-kok-dugmeler { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .kl-perde, .kl-pencere, .kl-kart, .kl-kapat { transition: none; }
}

/* ====================================================================
   TABLO İÇİ KALIP ODAĞI (SÜLÂSÎ MEZİD)
   --------------------------------------------------------------------
   Mezidde perde kaldırıldı: satır zaten bâb bâb dizili ve vezinler yan
   yana duruyor, ayrıca büyük bir vezin levhasına gerek yok. Tıklanan
   veznin satırı bâb odağındaki gibi en üste süzülür; SÜZGEÇ satırın
   üstünde tam genişlikte bir şeritte, ÖRNEKLER altında aynı sütun
   hizasında durur.
   Sayfanın genel `td` kuralı (gri zemin + 4px beyaz kenarlık) bu iki
   satırda geçerli olmamalı — yoksa şerit ve liste tablo hücresi gibi
   kutulanıyor. ==================================================== */
#tab1 .ko-satir > td,
#tab2 .ko-satir > td {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: initial;
}
/* Şerit thead'in ilk satırı: sayfanın th kuralları (renkli pil, beyaz
   yazı) buraya sızmasın. */
#tab1 thead tr.ko-satir > td,
#tab2 thead tr.ko-satir > td { color: inherit; }
@keyframes koBelir {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}
/* fill: BOTH DEĞİL, BACKWARDS. "both" bitince son kareyi (transform:none)
   kalıcı olarak dayatıyordu; animasyonlar normal bildirimleri ezdiği için
   stor perdesinin transform'u şeride hiç işlemiyordu (şerit derinde ekran
   dışına çekilemiyordu). "backwards" yalnız başlangıç karesini önden
   uygular — açılışta çakma yok, bitince eleman kendi kurallarına döner. */
.ko-satir.ko-belir > td { animation: koBelir .45s cubic-bezier(.22,1,.36,1) backwards; }
.ko-satir.ko-belir { animation-name: none; }
/* ---- AÇILIŞ KOREOGRAFİSİ ----
   FAZ 1: şerit 0'dan açılır → başlık satırı (Mazi … İsm-i Mef'ûl) yavaşça
          aşağı iner; aynı sürede bâb satırı yukarı süzülür.
   FAZ 2: veznin altındaki bâb satırları söner ve kalkar, yerlerine
          örnekler belirir. */
.ko-serit-sar { overflow: hidden; }
/* Örnek satırları sırayla beliriyor (ilk 12'si; gerisi zaten kaydırma
   alanının dışında). */
@keyframes koSatirBelir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.ko-kaydir .kl-tablo tbody tr.ko-satir-belir {
    animation: koSatirBelir .6s cubic-bezier(.33,1,.68,1) both;
}
.ko-sonuyor { opacity: 0; transition: opacity .3s ease; }
.ko-sonuyor td { border-color: transparent !important; }

/* --- ÜST ŞERİT: süzgeç + bâb adı + kapat --- */
.ko-serit {
    /* Tablo RTL; şeridin KENDİSİ ltr olsun ki DOM sırası ekrandaki
       sırayla aynı olsun: süzgeç SOLDA (perdedeki gibi), bâb adı ortada,
       kapat sağda. RTL bırakılınca süzgeç sağ üstteki sürüklenebilir kök
       levhasının altında kalıyordu. */
    direction: ltr; position: relative;
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 10px 10px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    margin-bottom: 6px;
}
/* Süzgeç burada daha GENİŞ bir yatay alanda: perdede yan sütundaydı,
   tabloda satırın tamamı onun. */
/* Süzgeç ŞERİDİN TAMAMINI kullanır: klavye ile şema ancak böyle yan
   yana sığıyor. */
/* box-sizing ŞART: .kl-suzgec'in 14px'lik yan dolgusu content-box'ta
   %100'ün ÜSTÜNE ekleniyor, kutu şeritten 28px taşıyordu (ölçüldü:
   1428 > 1400). */
.ko-serit .kl-suzgec { margin: 0; width: 100%; box-sizing: border-box; }
/* Bâb bilgisi klavyenin ve şemanın ALTINDA, ortalı */
.ko-ad {
    align-self: center; text-align: center; padding: 2px 46px 0;
    font-weight: 800; color: #0f172a; font-size: clamp(1rem, 2.1vh, 1.35rem);
}
.ko-kapat {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 36px; height: 36px; line-height: 1; padding: 0;
    font-size: 26px; color: #64748b;
    background: #fff; border: 1px solid rgba(15,23,42,.10);
    border-radius: 10px; cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s;
}
.ko-kapat:hover { background: #fff3e6; border-color: #f39c12; color: #b45309; }

/* --- ÖRNEK ALANI: kendi içinde kaydırılır ---
   Ölçüldü: 102 kalıbın 23'ünde 50'den fazla kelime var (en kalabalığı
   133). Doğrudan sayfa akışına dökülseydi tablo metrelerce uzardı. */
/* STOR PERDE: örnekler artık KENDİ içinde değil, SAYFAYLA kayar.
   Aşağı indikçe üst çubuk, sekmeler ve süzgeç şeridi yukarı sıyrılır;
   yeşil/mavi başlık satırı (Mazi … İsm-i Mef'ûl) ekranın tepesine
   dayanınca YAPIŞIR (aşağıdaki sticky kuralı) — liste bütün yüksekliği
   kullanır. Yukarı kaydırınca sekmeler ve diğer kısımlar stor perde
   gibi geri iner. (Eski iç kaydırma 58vh'ydi; dikey alanı boşa
   bırakıyordu.) */
.ko-kaydir { overflow: visible; padding: 0 0 6px; }
#tab2 table.ko-acik thead tr:not(.ko-satir) th {
    position: sticky; top: 0;
    /* Kutuların z-index'i 1000 (.glass-box) — başlık üstlerinden akmalı */
    z-index: 1200;
}
/* Sticky'nin çalışması için başlıkla GÖRÜNÜM PENCERESİ arasında kaydırma
   kapsayıcısı olmamalı. Oysa .window-pencere overflow:hidden (öteki
   sekmeyi gizliyor), sekmeler overflow-x:auto (setTab satır içi yazıyor)
   ve body overflow-x:hidden — üçü de sticky'yi kendine bağlayıp
   koparıyordu (ölçüldü: başlık -697'ye kadar aktı). Stor açıkken
   (body.ko-stor — babodak.js yazar) üçü serbest bırakılır; öteki
   sekmenin ekran dışına taşan yarısını body'nin overflow-x:clip'i
   kırpar — clip, hidden'dan farklı olarak kaydırma kapsayıcısı
   OLUŞTURMAZ, sticky bozulmaz. */
body.ko-stor { overflow-x: clip; }
/* !important ŞART: sayfada .window-pencere { overflow:hidden !important }
   (satır ~2041) var — onsuz bu kural eziliyordu. */
body.ko-stor .window-pencere { overflow: visible !important; }
body.ko-stor .tab-content { overflow-x: visible !important; }
.ko-govde { overflow: visible; padding: 0; }
/* Satır tonu (bâbın kendi rengi) perdede olduğu gibi burada da */
.ko-govde-satir[data-tonlu="1"] .kl-tablo tbody tr { background: var(--kl-ton); }
/* Başlıksız matris: üstteki vezin satırı zaten başlık */
.kl-tablo.kl-tablo-bassiz thead { display: none; }
/* Sütun genişlikleri colgroup'tan (üstteki satırdan ölçülüyor); th
   üzerinden gelen sabit genişlikler burada devre dışı kalmalı. */
.kl-tablo.kl-tablo-bassiz { table-layout: fixed; }
/* ID'li seçici ŞART: sayfanın bâb şerit kuralları
   (#tab2 tbody tr:nth-child(N) td { background !important }) İÇTEKİ
   örnek matrisinin satırlarını da yakalıyordu — ilk 9-11 örnek satırı
   9 bâbın renklerine boyanıyor, sonrası tek renge düşüyordu. Bu kural
   hem daha özgül hem daha sonra: hücre saydam kalır, rengi SATIR verir
   (--kl-ton = tıklanan bâbın kendi tonu) — bütün örnekler aynı renk. */
#tab1 .ko-kaydir .kl-tablo td,
#tab2 .ko-kaydir .kl-tablo td {
    background-color: transparent !important;
    border: none !important;
    padding: 2px 3px !important;
}
/* ÖRNEKLERDEKİ ARAPÇA DAHA KÜÇÜK.
   Perdede sütun ~226px'ti, tabloda 187px: aynı 55px'lik yazı kartı
   (181px) doldurup Türkçesini üç satıra kırıyor, sütunlar yatayda
   sıkışmış görünüyordu. Üstteki vezin 48px; örnek ondan küçük olmalı
   ki göz önce vezni okusun. */
.ko-kaydir .kl-kart .kl-ar { font-size: clamp(1.9rem, 4.1vh, 2.6rem); }
.ko-kaydir .kl-kart .kl-tr { font-size: clamp(.78rem, 1.75vh, 1.05rem); }
.ko-kaydir .kl-kart .kl-ornek span { font-size: clamp(1rem, 2.1vh, 1.3rem); }

/* --- SÜZGEÇ: KÖK ARA ve AKSÂM-I SEB'A YAN YANA ---
   Perdede yer dar olduğu için ikisi sekmeydi; tabloda satırın tamamı
   süzgecin olduğundan ikisi birden duruyor, sekme değiştirmeye gerek
   kalmıyor. Sıra başlıklardaki sırayla aynı: solda Kök Ara, sağda
   Aksâm-ı Seb'a. */
.kl-pullar[data-kip="ikisi"] {
    /* Perdedeki max-width:min(760px,52vw) burada geçerli değil — o ölçü
       dar sütun içindi. Tabloda şeridin tamamı süzgecin, ikisi ancak
       böyle yan yana sığıyor (klavye ~580 + şema ~560 + boşluk). */
    max-width: none; width: 100%;
    /* Şema klavyeden uzun; ikisi DİKEYDE ORTALANIR ki klavye kendi
       kutusunda tepede asılı kalmasın. */
    display: flex; align-items: center; justify-content: center;
    gap: clamp(12px, 1.6vw, 26px); flex-wrap: wrap;
}
/* Her panel ŞERİDİN YARISINI alır ve kendi yarısında ortalanır; yoksa
   ikisi de ortaya yanaşıp kenarlarda geniş boşluk bırakıyordu. */
.kl-pullar[data-kip="ikisi"] > .kl-pul-bolum {
    flex: 1 1 0; min-width: 0; display: flex; justify-content: center;
}
.ko-serit .kl-suzgec { flex: 1 1 auto; }
.ko-serit .kl-sekmeler { justify-content: center; }

/* Odak açıkken TABLO GERİLMESİN.
   `.tab-content .container` bir DİKEY flex kabı (min-height: 100vh-120px)
   ve `.container > table { flex: 1 }` tabloyu 796px'e kadar uzatıyor.
   Öteki bâb satırları gizlenince geriye tek satır kaldığı için o satır
   82px yerine 657px'e açılıyor, süzülürken boyu her karede değişiyordu —
   hareket "genişleyerek gidiyor" gibi görünüyordu
   (ölçüldü: 734 → 697 → 657 → 640 → 632 → 81).
   Odakta tablo içeriği kadar yüksek olsun; genişlik değişmiyor (dikey
   flex'te genişliği align-items: stretch veriyor). */
#tab1 .container > table.ko-acik,
#tab2 .container > table.ko-acik { flex: 0 0 auto; }

/* MÜCERRED ve MEZİD TABLOSUNDA SİYAH ÇERÇEVE YOK.
   .container'ın 2px siyah kenarlığı ile 15px dolgusu, örnek listesinin
   dikey kaydırma çubuğuna yer bırakmayıp yatay kaydırma doğuruyordu.
   Kenarlık kalktı, dolgu inceldi — kazanılan yer çubuğa gidiyor. */
#tab1 .container, #tab2 .container {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    padding: 6px 2px !important;
}
/* TABLO KABI YATAYDA %98.
   Genişliği asıl belirleyen body'nin 20px'lik YAN DOLGUSUYDU: 1500px
   ekranda pencere 1460px (%97,3) kalıyordu ve dikey kaydırma çubuğu
   açılınca daralma buradan hissediliyordu. Yan dolgu 1vw'ye indi →
   pencere tam %98. (Pencereyi transform'la dolgudan çıkarmayı denedim,
   satır ekranın dışına kaçıyor — dolguyu değiştirmek doğru yer.) */
body { padding-left: 1vw !important; padding-right: 1vw !important; }

/* ODAK AÇIKKEN ÜST ÇUBUK SAKİN (body.ust-kilit — sarf/babodak.js yazar).
   Bâb ⓘ odağı ya da vezin örnek listesi açıkken üstteki kök / kronometre
   / kitap-liste ikonlarının DALGA vurgusu durur (dikkat listede kalsın),
   ARAMA hiç çalışmaz — örneklerin kendi kök kısayolları (⏱ ▦) zaten var.
   Kapanınca hepsi kendiliğinden geri gelir. */
body.ust-kilit .sitemap-wave-hint,
body.ust-kilit .svg-wave-active,
body.ust-kilit .svg-wave-green,
body.ust-kilit .svg-wave-red { animation: none !important; box-shadow: none !important; }
body.ust-kilit i.fa-search.root-icon,
/* Oyun · kronometre · kitap · kök · yenileme de pasif: örneklere
   bakarken tabloyu altından değiştiren ya da üstüne pencere açan
   kısayollar çalışmasın. Odak kapanınca hepsi geri gelir. */
body.ust-kilit #static-oyun-btn,
body.ust-kilit #static-timer-btn,
body.ust-kilit i.fa-book.root-icon,
body.ust-kilit #root-text-display,
body.ust-kilit i.fa-sync-alt.root-icon {
    pointer-events: none; opacity: .35; cursor: default;
}

/* ÖRNEKLER AÇIKKEN SÜTUN BAŞLIKLARI ve BÂB ⓘ'LERİ PASİF.
   Mazi · Muzari · Emir · Mastar … başlıkları tam odaktaki satırın
   üstünde duruyor; dokunmak tam ekran dilbilgisi perdesini açıyor ve
   odağı bölüyordu. Bâb adındaki ⓘ da aynı: örnek listesi açıkken hiç
   çalışmaz (eskiden örnekleri kapatıp bâb odağına geçiyordu). Odak
   kapanınca ikisi de kendiliğinden geri gelir. */
#tab2 table.ko-acik thead th.th-3d-btn,
#tab2 table.ko-acik .info-icon {
    /* Yalnız TIKLAMA kapalı; renk olduğu gibi durur (soluklaştırma
       "başlıklar bozuldu" gibi görünüyordu). */
    pointer-events: none; cursor: default;
}

/* --- ODAKTAKİ SATIR --- */
/* Vezin puntosu BURADA YAZILMIYOR: ⓘ odağıyla ortak tek kural
   sarf/babodak.js'te (#tab2 tr.bo-odak-kalip, #tab2 tr.ko-odak-satir).
   Burada yalnız geçiş var. */
#tab1 tr.ko-odak-satir .glass-box .ar,
#tab1 tr.ko-odak-satir .glass-box .ar-small,
#tab2 tr.ko-odak-satir .glass-box .ar { transition: font-size .5s; }
#tab1 tr.ko-odak-satir .glass-box,
#tab2 tr.ko-odak-satir .glass-box { transition: min-height .5s; }
/* Tıklanan vezin: tablonun kendi kırmızı dili (.current-active-red) */
#tab1 .glass-box.ko-sec,
#tab2 .glass-box.ko-sec {
    border-color: #FF3B30 !important;
    background-color: #fffaf9 !important;
    box-shadow: inset 0 3px 8px rgba(255,59,48,.15), 0 0 0 3px rgba(255,59,48,.35) !important;
    z-index: 100;
}

/* ============ TABLO YEKPARE: ÜST HÜCRELER DE ALTTAKİ BLOKLAR GİBİ ====
   İki bölge zaten AYNI yapıyla kurulmuş: hücre/blok saydam, üstünde
   4px beyaz kenar, gri-mavi zemin arkadan (tbody / .footer-container
   degradesi) görünüyor. Tek fark KÖŞELERDİ — altbilgi blokları 12px
   yuvarlak, üstteki hücreler keskin. Bu yüzden alttaki bölüm "kart"
   gibi, üstteki ise kesilmiş tek parça bir levha gibi okunuyordu
   (Geylani: "gri rengi de aşağıdaki tabloda olduğu gibi yapalım, tablo
   tasarımı yekpare olsun"). Aynı yarıçapı üst tabloya da veriyoruz.
   Kapsam yalnız ANA tablolar: örnek matrisi (.kl-tablo), çekim
   tabloları ve maraton tabloları dışarıda. */
#tab1 .container > table > tbody > tr:not(.ko-satir):not(.muc-levha-satir) > td,
#tab2 .container > table > tbody > tr:not(.ko-satir):not(.muc-levha-satir) > td {
    border-radius: 12px;
}

/* LEVHA ZEMİNİ AYRI KAT: şerit soluklanırken içindeki vezin
   başlıkları etkilenmesin diye zemin, hücrenin kendisine değil
   hücrenin içindeki bu kata boyanıyor (kalipliste.js → mucLevhaBoya).
   Kutular onun üstünde, kendi opaklıklarıyla durur. */
#tab1 .muc-levha-satir > td { position: relative; }
#tab1 .muc-levha-zemin {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 0;
    pointer-events: none;
}
#tab1 .muc-levha-satir > td > .muc-levha { position: relative; z-index: 1; }

/* ============ KAYDIRMA ÇUBUĞU: ANİMASYON SIRASINDA TİTREME YOK ============
   Geylani: "animasyon sırasında scroll çubuğu aktif oluyor ve bu sayfanın
   titremesine neden oluyor."
   Satırlar aşağı ötelenirken (transform: translateY) tarayıcı ötelenmiş
   kutuları KAYDIRILABİLİR ALANA sayıyor: ölçüldü, sayfa 982 px iken bir
   anda 1590 px'e uzuyor. Sağda kaydırma çubuğu beliriyor, kullanılabilir
   genişlik ~15 px daralıyor, bütün sayfa yeniden yerleşiyor; animasyon
   bitince çubuk gidip aynı sarsıntı ters yönde tekrarlanıyor.
     .ko-cubuk-yer      → odak açıkken çubuğun yeri ayrılı durur. Sınıf
        TAM EKRANA GEÇİLİRKEN ekleniyor, TAM EKRANDAN ÇIKARKEN
        kaldırılıyor: 15 px'lik daralma/genişleme sayfanın zaten baştan
        yerleştiği o iki anın içinde eriyor. Arada örnek listesi ne kadar
        uzun olursa olsun çubuk hazır yuvasına oturuyor, genişlik hiç
        oynamıyor.
     .ko-kaydirma-kilit → kayış boyunca kaydırma kapalı: sahte çubuk hiç
        doğmuyor. Ayrılmış oluk kilit altında da duruyor (ölçüldü), yani
        kilit genişliği oynatmıyor; oluk yokken gerçek bir çubuğu
        kaldırırsa kalipliste.js aynı ölçüde sağ boşluk veriyor.
   `scrollbar-gutter: stable` yeri AYIRIR ama boş bir çubuk oluğu
   ÇİZMEZ (ölçüldü: overflow-y:scroll sağda 15 px'lik gri oluk bırakıyor,
   stable bembeyaz kalıyor) — ayrıca kilitle birlikte de ayrılmış kalır,
   yani kilit genişliği hiç oynatmaz. Desteklemeyen tarayıcıda oluklu
   sürüme düşülür. */
html.ko-kaydirma-kilit { overflow: hidden !important; }
html.ko-cubuk-yer { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
    html.ko-cubuk-yer { overflow-y: scroll !important; }
}

/* ============ ÇAKILI VEZİN KATMANI ============
   Tablo aşağı süzülürken tıklanan vezinler EKRANDA SABİT durur: gerçek
   kutular satırların içinde olduğu için onlarla kayıyorlardı, bu yüzden
   kopyaları buraya çakılıyor (kalipliste.js → cakiliKur). Katman #tab1'in
   içinde: `#tab1 .glass-box` kuralları kopyalara da işlesin diye.
   Tablo gidince kopyalar söner, levhadaki asıllar belirir — vezin
   uçmaz, DÖNÜŞÜR. */
.muc-cakili {
    position: fixed;
    inset: 0;
    /* Levha hücresi stor perdede `z-index: 1200` ile yapışıyor; 850'de
       kalınca yürüyen kopyalar bandın ALTINDA kalıp soluk görünüyordu
       (ölçüldü). Üst çubuk 1000000+ olduğu için onun altında kalır. */
    z-index: 1300;
    pointer-events: none;
}
.muc-cakili .muc-cakili-kutu {
    position: absolute;
    margin: 0 !important;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity var(--muc-cakili-sure, .9s) ease-in;
}

/* ================== STOR PERDE GERİ DÖNÜŞÜ ==================
   Kalıp odağı (örnek listesi) açıkken üst çubuk YAPIŞKANDIR:
   derine inerken yukarı süzülüp kaybolur (ko-stor-sakla), geri
   kaydırma başlar başlamaz listenin başı beklenmeden iner.
   ko-stor-yuzer: bar asılıyken buzlu zemin + gölge (satırların
   üstünde okunaklı kalması için); sayfanın başında şeffaftır. */
body.ko-stor .top-bar {
    position: sticky;
    top: 0;
    z-index: 1290;              /* yapışkan vezin başlıkları (1200) üstünde */
    transition: transform .35s ease, background-color .25s ease, box-shadow .25s ease;
    will-change: transform;
}
body.ko-stor.ko-stor-sakla .top-bar {
    transform: translateY(-140%);   /* gölgesiyle birlikte tamamen dışarı */
}
body.ko-stor.ko-stor-yuzer .top-bar {
    background-color: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    border-radius: 0 0 16px 16px;
}

/* Katlar inmişken (asılı: ko-stor-yuzer, gizli değil) yapışkan vezin
   başlıkları bar + şeridin hemen ALTINA kayar; katlar çekilince yine
   en tepeye yapışırlar. Geçiş, barın iniş animasyonuyla aynı sürede. */
/* HAREKET TRANSFORM İLE (top ile değil): `top` her karede yeniden
   yerleşim istiyor — ölçüldü, geri kaydırmada 7 takılan kare. transform
   ekran kartında çalışır: aynı yolda 1 takılan kare kaldı.
   Yapışma eşiği (top) ARTIK SON HÂLİ: bar+şerit inmişken oturacağı yer.
   Derine inildiğinde (sakla) kutu translateY ile tepeye çekilir — o anda
   başlık kesin yapışmış durumdadır, kayma sayfanın başında olmaz. */
body.ko-stor #tab2 table.ko-acik thead tr:not(.ko-satir) th {
    top: var(--ko-bas-kayma, 120px);
    transition: transform .35s ease;
    will-change: transform;
}
body.ko-stor.ko-stor-sakla #tab2 table.ko-acik thead tr:not(.ko-satir) th {
    transform: translateY(calc(-1 * var(--ko-bas-kayma, 120px)));
}

/* ŞERİT (Kök Ara klavyesi + Aksâm-ı Seb'a) DE STOR PERDEYE KATILIR:
   derindeyken negatif top ile görüş alanının üstünde asılı durur
   (görünmez, tıklama da almaz — tamamen ekran dışındadır); geri
   kaydırmada barın hemen altına iner, başlıklar da onun altına kayar.
   Sayfanın başındayken doğal akışındadır, hiçbir şey değişmez. */
body.ko-stor #tab1 table.ko-acik thead .ko-suzgec-satir > td,
body.ko-stor #tab2 table.ko-acik thead .ko-suzgec-satir > td {
    position: sticky;
    top: var(--ko-bar-yuk, 62px);   /* yapışma eşiği: barın hemen altı */
    z-index: 1260;                /* bar 1290'ın altında, başlıklar 1200'ün üstünde */
    transition: transform .35s ease, background-color .3s ease, box-shadow .3s ease;
    will-change: transform;
}
/* Derinde şerit görüş alanının ÜSTÜNE çekilir (görünmez); hareket
   transform, bar ile aynı dil. */
body.ko-stor.ko-stor-sakla #tab1 table.ko-acik thead .ko-suzgec-satir > td,
body.ko-stor.ko-stor-sakla #tab2 table.ko-acik thead .ko-suzgec-satir > td {
    transform: translateY(calc(-1 * (var(--ko-bar-yuk, 62px) + var(--ko-serit-yuk, 420px))));
}
/* ============ MEZİDDE VEZİN SATIRI DA YAPIŞIR ============
   Örnek listesinde derine inerken eskiden yalnız TÜRKÇE başlık satırı
   (MAZİ · MUZARİ · … · İSMİ MEF'UL) tepede kalıyordu; altındaki
   ARAPÇA vezin satırı — ⓘ'den ism-i mef'ûl veznine kadar bâbın kendi
   satırı — yukarı kayıp kayboluyordu. Öğrenci örnekleri gezerken
   hangi veznin altında olduğunu göremiyordu (Geylani: "sadece türkçe
   başlıklar değil arapça vezinler de sabit kalsın, info olan yerden
   ismi meful veznine kadar olan satırın hepsi").
   Satır Türkçe başlığın TAM ALTINA yapışıyor: eşiği bar + şerit
   payına başlığın kendi boyu eklenerek bulunuyor (--ko-mez-bas'ı
   kalipliste.js/storOlc ölçüyor). Katlar çekilince o da onlarla
   birlikte yukarı süzülüyor — aynı eğri, aynı dil. */
body.ko-stor #tab2 table.ko-acik > tbody > tr.ko-odak-satir > td {
    /* !important ŞART: bâb künyesinin hücresi (ⓘ · kalıp · "4 Tef'il")
       satır içi `position: relative` taşıyor; onsuz o tek hücre yapışmaz,
       vezinler tepede kalırken künye aşağıda kayıp gidiyordu. */
    position: sticky !important;
    top: calc(var(--ko-bas-kayma, 120px) + var(--ko-mez-bas, 41px));
    z-index: 1190;               /* Türkçe başlık 1200'ün hemen altında */
    transition: transform .35s ease, background-color .3s ease, box-shadow .3s ease;
    will-change: transform;
}
body.ko-stor.ko-stor-sakla #tab2 table.ko-acik > tbody > tr.ko-odak-satir > td {
    transform: translateY(calc(-1 * var(--ko-bas-kayma, 120px)));
    transition: transform .65s cubic-bezier(.33, 0, .18, 1),
                background-color .3s ease, box-shadow .3s ease;
}
/* Asılıyken buzlu zemin: altından akan örnek satırları içinden
   görünmesin. Sayfanın başındayken saydam, yani duran görünüm hiç
   değişmiyor. */
body.ko-stor.ko-stor-yuzer #tab2 table.ko-acik > tbody > tr.ko-odak-satir > td {
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
body.ko-stor.ko-stor-yuzer #tab2 table.ko-acik > tbody > tr.ko-odak-satir > td:first-child {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}
/* Buzlu zemin, sakla sırasında da kalır: şerit yukarı çekilirken
   arkasındaki satırlar içinden görünmesin. */
body.ko-stor.ko-stor-yuzer #tab1 table.ko-acik thead .ko-suzgec-satir > td,
body.ko-stor.ko-stor-yuzer #tab2 table.ko-acik thead .ko-suzgec-satir > td {
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    border-radius: 0 0 16px 16px;
}

/* ============ KAYBOLMA DAHA PÜRÜZSÜZ ============
   Katlar yukarı ÇEKİLİRKEN (sakla) daha uzun süre + yumuşak eğri:
   iniş çevik kalır (.35s), kayboluş süzülerek olur. Eğri başta
   yavaş ivmelenir, sonda yumuşak durur — stor perdenin sarılışı. */
body.ko-stor.ko-stor-sakla .top-bar {
    transition: transform .65s cubic-bezier(.33, 0, .18, 1), background-color .3s ease, box-shadow .3s ease;
}
body.ko-stor.ko-stor-sakla #tab1 table.ko-acik thead .ko-suzgec-satir > td,
body.ko-stor.ko-stor-sakla #tab2 table.ko-acik thead .ko-suzgec-satir > td {
    transition: transform .65s cubic-bezier(.33, 0, .18, 1), background-color .3s ease, box-shadow .3s ease;
}
body.ko-stor.ko-stor-sakla #tab2 table.ko-acik thead tr:not(.ko-satir) th {
    transition: transform .65s cubic-bezier(.33, 0, .18, 1);
}

/* ================== MÜCERRED TABLO İÇİ ODAK ==================
   1-51: perde yerine liste tablonun içinde. Tıklanan kutu tablonun
   tepesindeki sentetik "vezin levhası" satırına FLIP ile taşınıp
   büyür (muc-buyuk); satırlar gizlenir, başlık satırının (BABLAR ·
   Mazi … Zaman Mekan) tek levhalı görünümde anlamı olmadığından o da
   gizlidir. Renk dili hızlı listedeki lejantla aynı: FİİL yeşil,
   İSİM mavi (tonu kalipliste.js yazar). */
/* Yalnız ANA tablonun başlık satırı: torun seçici kullanılsaydı
   içerideki örnek matrisinin (kl-tablo) başlığını da yutuyordu. */
#tab1 table.ko-acik > thead > tr:not(.ko-satir) { display: none; }
#tab1 .muc-levha-satir > td {
    border: none !important;
    padding: 8px 0 10px !important;
    text-align: center;
    border-radius: 12px;
}
#tab1 .muc-levha {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(14px, 2vw, 30px);       /* bâb üçlüsünde kutular arası nefes */
    padding: 10px 0 12px;
}
/* ALTTAKİ CEMİ TEKSİR · TASĞİR · TAFDİL BÖLÜMÜ odak açılırken artık
   CSS ile BİRDEN gizlenmiyor: kalipliste.js satırlarla birlikte yarım
   saniyede SOLDURUP akıştan çıkarıyor (beyaz ekran çakması olmasın). */
#tab1 .glass-box.muc-buyuk {
    min-width: 250px;
    padding: 10px 26px 14px;
    margin: 0;
}
#tab1 tr.ko-odak-satir .glass-box .ar,
#tab1 tr.ko-odak-satir .glass-box .ar-small {
    font-size: 3rem !important;
    line-height: 1.4;
}
/* Tekil ızgarada (isim kalıpları) kartlar da sırayla belirir */
.ko-kaydir .kl-izgara .kl-kart.ko-kart-belir {
    animation: koSatirBelir .6s cubic-bezier(.33,1,.68,1) both;
}
/* Tekil ızgaranın zemini kalıbın tonu (fiil yeşili / isim mavisi);
   kartlar beyaz kalır — mezidde satır tonuyla aynı dil. */
.ko-govde-satir[data-tonlu="1"] .kl-izgara {
    background: var(--kl-ton);
    border-radius: 12px;
    padding: 10px;
}
/* STOR PERDE: mücerredde yapışan şey başlıklar değil (gizliler),
   VEZİN LEVHASI — derinde en tepede kalır, katlar inince onların
   altına kayar; kayboluşu da katlarla aynı yumuşak eğride. */
body.ko-stor #tab1 table.ko-acik .muc-levha-satir > td {
    position: sticky;
    top: var(--ko-bas-kayma, 120px);   /* eşik: bar + şerit inmişkenki yeri */
    z-index: 1200;
    transition: transform .35s ease;
    will-change: transform;
}
/* Derinde levha en tepeye çıkar — transform ile (bkz. şerit notu) */
body.ko-stor.ko-stor-sakla #tab1 table.ko-acik .muc-levha-satir > td {
    transform: translateY(calc(-1 * var(--ko-bas-kayma, 120px)));
    transition: transform .65s cubic-bezier(.33, 0, .18, 1);
}
/* TAKIM GÖRÜNÜMLERİNDE LEVHA YAPIŞMAZ. Takımda örnekler panel panel
   KENDİ İÇİNDE kaydığı için sayfanın kendisi neredeyse hiç kaymıyor
   (teksirde toplam 94px); yapışan levha o birkaç pikselde bandından
   KOPUP arada kocaman boşluk bırakıyordu — ölçüldü: vezin ile örnek
   kutusu arası 9px iken 117px'e çıkıyordu. Vezinler kendi bantlarıyla
   birlikte hareket etsin. */
body.ko-stor #tab1 table.ko-acik .muc-levha-satir.muc-satir-takim > td {
    position: static;
    transform: none !important;
}
/* TEK EKRAN KİPİNDE (takım ve bâb) LEVHA HİÇ YAPIŞMAZ: sayfa zaten
   kaymıyor, örnekler kendi kabında kayıyor. Yapışkan kalırsa levha
   eşiğine (bar + şerit) doğru itiliyor ve üst katlar çekilince tepede
   48 px'lik boşluk bırakıyordu — vezin tam yukarı oturamıyordu. */
body.muc-takim #tab1 table.ko-acik .muc-levha-satir > td {
    position: static;
    transform: none !important;
}
/* ============ TAKIM KİPİNDE ÜST KATLAR (bar + şerit) ============
   Kök Ara / Aksâm-ı Seb'a şeridi ARTIK TAKIMDA DA VAR ve üst çubukla
   birlikte AÇIK gelir: her vezinde aynı görüntü (Geylani: "tüm
   vezinlerde sistem aynı olmalı, filtre ve yapışkan kısmın yukarı
   çıkması vs"). Ekranı yukarı çekince ikisi birlikte kalkar ve
   YERLERİNİ DE bırakır — vezinler tepeye oturur; ters jest indirir.
   Jesti kalipliste.js dinler (muc-takim-ust).

   ŞERİDİN YERİ NASIL GERİ ALINIYOR: şerit bir <tr>/<td>; ne margin
   ne transform onun yerini bırakır. Bu yüzden çekilen şey TABLONUN
   KENDİSİ: negatif üst payla tam şerit boyu yukarı kayıyor, şerit
   görüş alanının üstünde kalıyor, levha en tepeye oturuyor. */
body.muc-takim #tab1 table.ko-acik {
    margin-top: calc(-1 * (var(--ko-serit-oz, 116px) + 2px));
    transition: margin-top .42s cubic-bezier(.33, 0, .18, 1);
}
body.muc-takim.muc-takim-ust #tab1 table.ko-acik { margin-top: 0; }
/* Kapanışta pay şeridin küçülmesini KARE KARE izler (kalipliste.js);
   üstüne bir de geçiş binerse pay geride kalır ve vezinler ekranın
   üstünden taşar. Kapanış boyunca geçiş kapalı. */
body.muc-takim.muc-kapaniyor #tab1 table.ko-acik { transition: none; }
/* Takımda sayfa kaymıyor; şerit yapışkan kalsaydı tablo çekilirken
   tepede asılı kalırdı. Akışında dursun, tabloyla birlikte gitsin. */
body.muc-takim #tab1 table.ko-acik > thead > tr.ko-suzgec-satir > td {
    position: static;
    transform: none !important;
}
/* ÜST ÇUBUK (sekmeler) DA ÇEKİLİR — hem kendisi hem YERİ: negatif pay
   olmasa 56px'lik boşluğu kalırdı, vezinler tepeye oturamazdı. */
body.muc-takim .top-bar {
    transform: translateY(-140%);
    margin-bottom: calc(-1 * var(--ko-bar-yuk, 48px));
    transition: transform .42s cubic-bezier(.33, 0, .18, 1),
                margin-bottom .42s cubic-bezier(.33, 0, .18, 1),
                background-color .3s ease, box-shadow .3s ease;
}
/* Sürüklenebilir kök levhası (فعل) belge koordinatlarına çakılı duruyor;
   içerik yukarı kayınca 41'in kutusunun üstüne biniyordu. Bu görünümde
   tablo zaten gizli, levhanın işi yok — sönük dursun. */
body.muc-takim .draggable-root-clone {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
body.muc-takim.muc-takim-ust .top-bar {
    transform: none;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    border-radius: 0 0 16px 16px;
}
/* Levha yüzerken BEYAZ MASKE YOK: zemini kalipliste.js tablonun kendi
   gradyanından kopyalıyor (mucZeminKopyala) — kaydırırken renk
   değişmiyor, altındaki kartlar da görünmüyor. */

/* Mücerred odağı açıkken MEZİD sekmesi ve bandın boş sol yarısı
   akışta durmasın: kaydırıcı bandı %200 genişlikte olduğundan sol
   yarısı görüş alanının soluna (-1455px) uzanıyor; SOLA taşan içerik
   RTL sayfada boyama uzayının orijinini kaydırıyor (ekran görüntüsü
   ölçümüyle bulundu). Odak kapanınca ikisi de eski hâline döner. */
body.muc-odak #tab2.tab-content { display: none !important; }
body.muc-odak #mainSliderBandi {
    width: 100% !important;
    transform: none !important;
}
/* Sekmeler normalde bandın yarısı (%50) genişliğinde; band daralınca
   mücerred sekmesi tam genişliğe açılır. */
body.muc-odak #tab1.tab-content { width: 100% !important; }

/* MEZİDDE DE AYNISI. Sebebi burada görünürdü: liste açılınca stor perde
   `.window-pencere`nin `overflow: hidden`ını KALDIRIYOR (yapışkan
   başlıklar bir kırpıcı ata içinde çalışmaz) — kırpma kalkınca bandın
   hemen sağındaki MÜCERRED sekmesi ekranın son ~15px'inde görünüyordu.
   Öteki sekmeyi akıştan çıkarınca kırpacak bir taşma da kalmıyor. */
body.mezid-odak #tab1.tab-content { display: none !important; }
body.mezid-odak #mainSliderBandi {
    width: 100% !important;
    transform: none !important;
}
body.mezid-odak #tab2.tab-content { width: 100% !important; }

/* ============ BÂB LEVHASI: MATRİSLE AYNI İZLER ============
   Fiil odaklarında levha 4 izli bir grid: sağda kök izi (boş — altta
   matrisin kök sütunu var), sonra mazi · muzari · emir kutuları.
   İz ölçülerini kalipliste.js yazar (matrisin colgroup'uyla birebir);
   böylece örnek sütunları üç uçan kutunun TAM altına düşer. */
#tab1 .muc-levha.muc-levha-bab {
    display: grid;
    direction: rtl;
    justify-items: center;
    align-items: center;
    gap: 0;
}
#tab1 .muc-levha-kok-izi { display: block; }

/* DİLBİLGİSİ BAŞLIK KUTULARI (kapalı hâl) BİRAZ YUVARLAK:
   köşeli dikdörtgen, dilbilgisi ekranındaki hapların diline uymuyordu. */
.th-3d-btn { border-radius: 12px !important; }
.block-title { border-radius: 12px !important; }

/* ============ MÜCERREDDE YAZILAR ÇOK DAHA BÜYÜK ============
   (Geylani: "yeterince yer var") Levhadaki vezinler 4rem'e, örnek
   kartları ve kök plakaları da birlikte büyüdü; kök yazısı ile
   kısayol SVG'lerinin arası açıldı. Mezid ölçüleri değişmedi. */
#tab1 tr.ko-odak-satir .glass-box .ar,
#tab1 tr.ko-odak-satir .glass-box .ar-small {
    font-size: 4rem !important;
    line-height: 1.35;
}
#tab1 .ko-kaydir .kl-kart .kl-ar { font-size: clamp(2.6rem, 5.8vh, 3.7rem); }
#tab1 .ko-kaydir .kl-kart .kl-tr { font-size: clamp(1rem, 2.2vh, 1.4rem); }
#tab1 .ko-kaydir .kl-kart .kl-ornek span { font-size: clamp(1.2rem, 2.5vh, 1.6rem); }
#tab1 .ko-kaydir .kl-kok-hucre { font-size: 3.6rem; }
#tab1 .ko-kaydir .kl-kok-plaka { gap: 16px; }
#tab1 .ko-kaydir .kl-kok-dugmeler { gap: 10px; }

/* ============ DİLBİLGİSİ EKRANI YARI SAYDAM ============
   Atlas kipinde arkadaki kalıplar tablosu hafifçe görünsün; maraton
   OYUNU aynı katmanı kullanır ama bu sınıfı almaz, opak kalır. */
#marathon-overlay.atlas-modu {
    background-color: rgba(241, 242, 246, 0.55);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
/* AÇILIŞ/KAPANIŞ UÇUŞU BOYUNCA BUZLU CAM KAPALI (kalıplartablosu.js
   .atlas-ucus sınıfını takar/çıkarır): tarayıcı her karede tüm ekranı
   yeniden bulanıklaştırdığı için morf 20 fps'e düşüyordu; kapalıyken
   60 fps. Ekran oturur oturmaz blur geri gelir, görünüm değişmez. */
#marathon-overlay.atlas-modu.atlas-ucus {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#marathon-overlay.atlas-modu #game-wrapper {
    background: rgba(255, 255, 255, 0.72);
}

/* ============ VEZİN TAKIMLARI (tafdil 50+51 · teksir 41-48) ============
   Takım üyelerinden birine basılınca TÜM üye kutular birlikte levhaya
   uçar; örnekler üye başına birer panelde, --takim-sutun kadar sütunda
   dizilir. Her panelin gövdesi BAĞIMSIZ dikey kaydırma alanıdır. */
#tab1 .muc-levha.muc-levha-takim {
    display: grid;
    grid-template-columns: repeat(var(--takim-sutun, 2), 1fr);
    direction: rtl;
    justify-items: center;
    align-items: center;
    gap: 10px 0;
}
/* Teksir kutuları (üst levhada da ara levhada da) biraz küçük: sekizli
   takım ekrana ancak böyle sığıyor */
#tab1 .muc-levha-teksir .glass-box.muc-buyuk,
#tab1 .muc-ara-levha .glass-box.muc-buyuk { min-width: 170px; padding: 8px 10px; margin: 0; }
#tab1 tr.ko-odak-satir .muc-levha-teksir .glass-box .ar,
#tab1 tr.ko-odak-satir .muc-levha-teksir .glass-box .ar-small,
#tab1 .muc-ara-levha .glass-box .ar,
#tab1 .muc-ara-levha .glass-box .ar-small { font-size: 3rem !important; line-height: 1.4; }
/* ARA LEVHA: teksirin ikinci dörtlüsü örneklerin ORTASINA iner —
   vezinlerin yarısı üstte yarısı ortada, her vezin sırasının hemen
   altında kendi örnek bandı. Kutular süzülüp gelmeden yer ayrılır. */
.muc-ara-levha {
    display: grid;
    grid-template-columns: repeat(var(--takim-sutun, 4), 1fr);
    direction: rtl;
    justify-items: center;
    align-items: center;
    gap: 8px 0;
    min-height: 104px;
    margin: 8px 4px 2px;               /* alt pay üst bandınkiyle eşit dursun */
}
.ko-govde-satir[data-tonlu="1"] .muc-ara-levha { background: var(--kl-ton); border-radius: 12px; padding: 6px; }
/* ============ TEKSİRDE DİKEY SIKILIK + KISA KART ============
   Sekiz vezin bir arada: her dikey pay kısılır, kartlar küçülür,
   TÜRKÇELERİ GİZLİ durur — kelimeye dokununca açılır (örnekli kartta
   örneğiyle birlikte). Tafdil ve öteki görünümler eski ölçüsünde. */
#tab1 tr.muc-satir-teksir > td { padding: 3px 0 5px !important; }
#tab1 .muc-levha.muc-levha-teksir { padding: 2px 0 4px; gap: 8px 0; }
/* İKİ BANDIN KUTULARI DİKEYDE BİREBİR AYNI: paneller içeriği kadar
   değil, bandın en uzunu kadar yükselir (stretch) — üstteki dörtlü ile
   alttaki dörtlü aynı boyda durur, kısa listeli vezinlerde kutu küçülüp
   sıra bozulmaz. */
/* İki sınıflı seçici bilerek: genel .kl-takim kuralı bu bloktan SONRA
   geliyor, eşit özgüllükte olsa onu ezerdi. */
.kl-takim.kl-takim-teksir { gap: 8px 12px; align-items: stretch; }
.kl-takim-teksir .kl-panel-govde { flex: 1 1 auto; }
.ko-govde-satir[data-tonlu="1"] .kl-takim-teksir { padding: 6px; }
.kl-takim-teksir .kl-takim-panel { padding: 3px 4px 5px; }
.kl-takim-teksir .kl-panel-bas { padding: 0 4px 3px; margin-bottom: 4px; font-size: 1.25rem; }
.kl-takim-teksir .kl-izgara { gap: 8px; }
.kl-kart.kl-kisa { cursor: pointer; padding: 7px 6px 5px; gap: 1px; }
.kl-kart.kl-kisa .kl-emoji { font-size: 1.1rem; }
.kl-kart.kl-kisa .kl-kok { font-size: 1rem; top: 4px; left: 7px; }
#tab1 .ko-kaydir .kl-kart.kl-kisa .kl-ar { font-size: clamp(1.9rem, 4.2vh, 2.7rem); }
#tab1 .ko-kaydir .kl-kart.kl-kisa .kl-tr { font-size: clamp(.85rem, 1.8vh, 1.05rem); }
#tab1 .ko-kaydir .kl-kart.kl-kisa .kl-ornek span { font-size: clamp(1rem, 2vh, 1.3rem); }
.kl-kart.kl-kisa .kl-tr { display: none; }
.kl-kart.kl-kisa.kl-acik .kl-tr { display: block; }
.kl-kart.kl-kisa:hover { box-shadow: 0 6px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.kl-kart.kl-kisa:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
.kl-takim {
    display: grid;
    grid-template-columns: repeat(var(--takim-sutun, 2), 1fr);
    direction: rtl;
    align-items: start;
    gap: 12px 14px;
    padding: 0 4px;
}
.kl-takim-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 12px;
    padding: 6px 6px 8px;
}
.kl-takim-panel.kl-takim-secili { border-color: rgba(37, 99, 235, .45); background: rgba(255, 255, 255, .78); }
.kl-panel-bas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 4px 6px;
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    color: #1e3a8a;
    border-bottom: 1px dashed rgba(37, 99, 235, .25);
    margin-bottom: 6px;
}
.kl-panel-no {
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: #64748b;
    background: rgba(100, 116, 139, .12);
    border-radius: 8px;
    padding: 1px 7px;
}
/* HAREKEYLE AYRIŞAN AİLELERDE (17-32) vezinin görevi de yazılır:
   فَعَل ile فَعِل arasındaki fark yalnız harekedir, hangi panelin ne
   olduğu başlıktan okunmalı. Başlığın hemen altında, sessiz bir
   satır — kartların önüne geçmez. */
.kl-panel-gorev {
    margin: -3px 0 7px;
    text-align: center;
    font-family: 'Marhey', 'Inter', sans-serif;
    font-size: .78rem;
    line-height: 1.25;
    color: #64748b;
    letter-spacing: .2px;
}
/* Beş panelli aile (17-21) dar ekranda sıkışmasın */
.kl-takim-masdar1 .kl-panel-bas { font-size: 1.28rem; gap: 6px; }
.kl-takim-masdar1 .kl-panel-gorev { font-size: .72rem; }
.kl-takim-masdar1 .kl-takim-panel { padding: 5px 4px 7px; }

.kl-panel-govde {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
/* Tek sıralı takımlarda (fâil · zaman-mekân · âlet · tafdil) panel
   gövdesi ekranın yarısından biraz fazlasına kadar uzar, sonra kendi
   içinde kayar; teksirde iki sıra olduğu için tavan alçaktır. */
.kl-takim .kl-panel-govde { max-height: clamp(300px, 56vh, 760px); }
.kl-takim-teksir .kl-panel-govde { max-height: clamp(210px, 26vh, 380px); }
/* TAKIM GÖRÜNÜMÜ EKRANI DİKEYDE %100 KULLANIR: panellerin tavanını
   kalipliste.js/takimOlc ÖLÇEREK yazar (--kl-panel-yuk) — sayfanın geri
   kalanı (üst katlar, levha, ara levha, panel başlıkları) ne tutuyorsa
   kalan boşluk bantlara paylaştırılır. Sabitlerle tutturulamıyordu:
   üst katlar inip kalkıyor, masdar ailelerinde panel başlığı iki satır,
   teksirde iki bant var. Aşağıdaki calc()'lar yalnız JS yetişmeden
   önceki ilk kare için yedek. Geçiş katların süresiyle aynı ki
   büyüme ile kalkış tek hareket görünsün. */
body.muc-takim .kl-takim-teksir .kl-panel-govde {
    max-height: var(--kl-panel-yuk, max(120px, calc(50vh - 159px)));
    transition: max-height .42s cubic-bezier(.33, 0, .18, 1);
}
body.muc-takim .kl-takim:not(.kl-takim-teksir) .kl-panel-govde {
    max-height: var(--kl-panel-yuk, max(150px, calc(100vh - 245px)));
    transition: max-height .42s cubic-bezier(.33, 0, .18, 1);
}
/* ALT DOLGULAR HER İKİ HÂLDE DE SIFIRA YAKIN: aşağıda boşuna yer
   tutmasınlar, kazanılan yer panellere gitsin. */
/* BÂB ODAĞINDA (1-16) MATRİS KENDİ KABINDA KAYAR.
   Eskiden bütün sayfa kayıyordu (ölçüldü: 1. bâbda 14 237 px): örnekleri
   gezerken vezin levhası yapışkanlıkla tutulmaya çalışılıyor, sütunlar
   levhadan kopuyor, üstteki filtre de yolda kalıyordu. Artık kabın tavanı
   ölçülerek yazılıyor (kalipliste.js/takimOlc) ve kaydırma onun İÇİNDE
   kalıyor; kabın dışında yapılan jest üst katları kaldırıp filtreyi
   topluyor — takımlarda ne oluyorsa o. */
body.muc-bab #tab1 .ko-kaydir {
    max-height: var(--kl-kaydir-yuk, calc(100vh - 380px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: max-height .42s cubic-bezier(.33, 0, .18, 1);
}
body.muc-takim { padding-bottom: 2px !important; }
/* .container'ın dikey dolgusu !important ile geliyor (bkz. yukarısı) */
body.muc-takim #tab1 .container { padding-bottom: 0 !important; }
body.muc-takim #tab1 .ko-kaydir { padding-bottom: 0; }
/* ÜST DOLGULAR YALNIZ KATLAR ÇEKİLİYKEN DARALIR.
   Önce takım kipine girer girmez daralıyorlardı; vezne dokunulduğu an
   sayfa 22 px (gövde 20 → 2, kap 6 → 2) YUKARI SIÇRIYOR, hemen ardından
   tablo aşağı süzülmeye başlıyordu (Geylani: "tablo önce biraz yukarı
   çıkıyor sonra aşağı iniyor"). Artık katlar açıkken tekil kalıplarla
   aynı boşluk duruyor; daralma katların kalkışıyla birlikte ve aynı
   eğride oluyor, yani tek yumuşak harekete katılıyor. */
body.muc-takim, body.muc-takim #tab1 .container {
    transition: padding-top .42s cubic-bezier(.33, 0, .18, 1);
}
body.muc-takim:not(.muc-takim-ust) { padding-top: 2px !important; }
body.muc-takim:not(.muc-takim-ust) #tab1 .container { padding-top: 2px !important; }
/* Kart sütunu panelin genişliğine göre kendiliğinden: 2 sütunlu
   takımda panel geniş (2-3 kart), 3 sütunluda dar (1-2 kart). */
.kl-takim .kl-izgara { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kl-takim-teksir .kl-izgara { grid-template-columns: 1fr; }
.kl-takim .kl-bos { text-align: center; padding: 30px 8px; }
/* Ton takım KABUĞUNA yazılır; panel içindeki ızgaralar çıplak kalır
   (yoksa beyaz panelin içinde ikinci bir tonlu kutu belirirdi). */
.ko-govde-satir[data-tonlu="1"] .kl-takim { background: var(--kl-ton); border-radius: 12px; padding: 10px; }
.ko-govde-satir[data-tonlu="1"] .kl-takim .kl-izgara { background: transparent; border-radius: 0; padding: 0; }

/* ============================================================================
   MARATON SÜZGECİ VE KARTLARI — site renk dili
   Süzgeç, kalıp listesi perdesindeki .kl-* tasarımını olduğu gibi kullanır;
   burada yalnız maratona özgü küçük farklar tanımlıdır.
   ========================================================================= */
/* Süzgeç levhası maratonda daha geniş: üstte klavye, altta şema + rakamlar */
/* SÜZGEÇ YUVASI YAPIŞKAN: aşağıdaki fiillere doğru kaydırırken klavye,
   aksâm şeması ve rakamlar tepede sabit kalır. Eksi kenar boşlukları
   kapsayıcının 30px/40px iç boşluğunu yutar ki şerit ekranın tam enini
   kaplasın; kartlar buzlu camın ardından geçer. */
#maraton-suzgec-yuva {
    position: sticky; top: 0; z-index: 30;
    display: flex; justify-content: center;
    margin: -30px -40px 0; padding: 8px 40px 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 20px -14px rgba(0,0,0,.25);
}
/* SOLDA klavye · ORTADA aksâm şeması · SAĞDA harf sayısı.
   Üçü tek levhanın içinde değil, HER BİRİ KENDİ LEVHASINDA durur. */
.mt-govde {
    display: flex; align-items: stretch; justify-content: center;
    gap: 14px; width: 100%; max-width: 1340px; margin: 0 auto;
    box-sizing: border-box;
}
/* Her sütun ayrı bir levha: kalıp perdesindeki süzgeç levhasıyla aynı
   dil (beyaz zemin · yuvarlak köşe · 4px renkli alt kenar), yalnız alt
   kenarın rengi o sütunun sorusunun rengi. */
.mt-kol {
    display: flex; flex-direction: column; align-items: center; min-width: 0;
    padding: 10px 12px 12px; box-sizing: border-box;
    background: rgba(255,255,255,.94); border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    border-bottom: 4px solid #9ca3af;
}
.mt-kol-klavye { flex: 0 0 auto; border-bottom-color: #2980B9; }
.mt-kol-sema   { flex: 1 1 auto; border-bottom-color: #F39C12; }
.mt-rakam-sutun{ flex: 0 0 auto; border-bottom-color: #E53935; }
/* Levha başlıkları: her biri kendi sorusunu sorar, renkler siteden */
.mt-kol-baslik {
    width: 100%; padding: 5px 12px; border-radius: 8px; margin-bottom: 9px;
    color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .08em;
    text-align: center; direction: ltr; white-space: nowrap;
}
.mt-b-harf  { background: #2980B9; }
.mt-b-aksam { background: #F39C12; }
/* HARF başlığı sütunun tamamını kaplamasın, dar bir künye gibi dursun */
.mt-b-rakam { background: #E53935; width: auto; padding: 5px 13px; }
/* Klavye artık sol sütun: üç sıra kendi doğal eninde, dikeyde ortalı */
.mt-klavye-sira { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; }
.mt-klavye-sira .kl-tus { width: 41px; height: 41px; }
.mt-klavye-sira .kl-tus-harf { font-size: 21px; }
.mt-klavye-sira .kl-tus-hepsi { width: auto; min-width: 80px; }
.mt-klavye-sira .kl-klavye { gap: 4px; }
.mt-klavye-sira .kl-kb-satir { gap: 4px; }
/* Aksâm şeması ortada, artan bütün yeri o alır */
.mt-sema-alan { flex: 1 1 auto; width: 100%; min-width: 0; display: flex; justify-content: center; }
.mt-sema-alan .kl-sema { width: 100%; max-width: 100%; }
.mt-sema-alan .kl-sema-kart { padding: 9px 6px; }
.mt-sema-alan .kl-sk-ad { font-size: .93rem; }
.mt-sema-alan .kl-sk-tanim { font-size: .69rem; }
.mt-sema-alan .kl-sk-ornek { font-size: 1.45rem; }
.mt-sema-alan .kl-sema-dallar { gap: 9px; }
.mt-sema-alan .kl-sema-izgara { gap: 6px; }
/* Dar ekranda klavye biraz küçülür, kazandığı yeri şemaya bırakır */
@media (max-width: 1400px) {
    .mt-klavye-sira .kl-tus { width: 38px; height: 39px; }
    .mt-klavye-sira .kl-tus-harf { font-size: 20px; }
    .mt-klavye-sira .kl-tus-hepsi { min-width: 72px; }
}
/* DÖRT tuş levhanın boyunu paylaşır: yanındaki şema ne kadar uzarsa
   tuşlar da o kadar uzar, sütunda boşluk kalmaz. 3 harfliler de
   eklenince (3 · 4 · 5 · 6) tuşlar küçüldü: dar sütunda dördü de
   sığsın diye en 60→50 px, rakam 22→18 px, aralar 9→6 px. */
.mt-rakam-tuslar {
    flex: 1 1 auto; width: 100%; display: flex; flex-direction: column;
    align-items: stretch; justify-content: stretch; gap: 6px;
}
.mt-tus { width: 50px; height: auto; flex: 1 1 0; min-height: 38px; }
.mt-tus .kl-tus-harf { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; }
.mt-tus .kl-tus-sayi { font-size: .6rem; }
.mt-bilgi {
    margin-left: 9px; color: #FFC107; cursor: pointer; font-size: .95rem;
    transition: color .15s ease, transform .12s ease;
}
.mt-bilgi:hover { color: #fff; transform: scale(1.15); }

/* ---- SONUÇ KARTI ---- */
#telaffuz-results { gap: 16px !important; }
.mt-kart {
    position: relative; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 210px; padding: 16px 20px 14px;
    background: #fff; border-radius: 18px;
    border: 1px solid #F3E7CF; border-bottom: 5px solid #F39C12;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease, border-color .16s ease;
}
.mt-kart:hover {
    transform: translateY(-4px);
    border-bottom-color: #E53935;
    box-shadow: 0 10px 24px rgba(229,57,53,.18);
}
.mt-kart:active { transform: translateY(-1px); }
.mt-kart-fiil {
    font-family: 'Arakom', 'Harmattan', serif; font-size: 3.4rem; line-height: 1.15; color: #1d1d1f;
}
.mt-kart-alt { display: flex; align-items: center; gap: 7px; direction: rtl; }
.mt-kart-kok {
    font-family: 'Arakom', serif; font-size: 1.15rem; color: #E53935;
    background: rgba(229,57,53,.08); border-radius: 999px; padding: 1px 10px;
}
.mt-kart-aksam, .mt-kart-harf {
    font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    color: #9a7b3a; background: rgba(255,193,7,.16); border-radius: 999px; padding: 2px 9px;
    direction: ltr; unicode-bidi: isolate;
}

/* ---- KELİME LİSTELERİ: toplam kelime sayacı ---- */
.kl-sayac-serit {
    grid-column: 1 / -1;                 /* ızgarada tam genişlik: bir sütunu kapatmasın */
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0 0 18px; padding: 12px 26px; border-radius: 999px;
    background: linear-gradient(90deg, #FFC107 0%, #F39C12 38%, #EF5350 72%, #E53935 100%);
    box-shadow: 0 6px 18px rgba(243,156,18,.28);
    color: #fff; font-family: 'Inter', sans-serif; direction: ltr;
}
.kl-sayac-serit .kls-sayi {
    font-size: 2rem; font-weight: 900; letter-spacing: .02em;
    text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.kl-sayac-serit .kls-etiket { font-size: .95rem; font-weight: 700; opacity: .95; }
.kl-sayac-serit .kls-ayrac { width: 1px; height: 26px; background: rgba(255,255,255,.45); }
.kl-sayac-serit .kls-alt { font-size: .8rem; font-weight: 600; opacity: .9; }

/* =========================================================================
   EK BİLGİ PERDESİ — "+" düğmesinin öğretmen yüzü
   -------------------------------------------------------------------------
   Kök seçilmemişken bir eke basılınca açılır. Tek kart: büyük harf, tek
   cümlelik tanım, canlı şema (yalın ➜ ekli), iki örnek, bir dikkat satırı.
   Renk her ekin kendi rengi (--ekb-renk), site paletinden geliyor.
   ========================================================================= */
/* ---- "+" MENÜSÜNÜN GENİŞ HÂLİ: SON EKLER | BİLGİ | ÖN EKLER ----
   Kök tanımlı DEĞİLKEN ekler bir kelimeye eklenecek parça değil,
   öğrenilecek konudur. O yüzden bilgi ayrı bir perdede açılmaz;
   menünün tam ortasında, iki ek sütununun arasında açılır
   (Geylani: "bu popup kısmını ve + listesini birleştirelim").
   Kök tanımlıyken orta sütun ve ikinci ayraç gizlenir — menü eski dar
   hâline döner, ekler türeyen kelimeye eklenir. */
#suffix-dropdown .ek-orta,
#suffix-dropdown .ek-ayrac { display: none; }
#suffix-dropdown.ek-genis .ek-orta { display: block; }
#suffix-dropdown.ek-genis .ek-ayrac { display: block; }
#suffix-dropdown .ek-orta {
    --ekb-renk: #2980B9;
    width: 470px; max-width: 48vw; max-height: 66vh; overflow-y: auto;
    direction: ltr; font-family: 'Inter', system-ui, sans-serif;
    padding-right: 4px;
}
/* ---- GENİŞ HÂL EKRANI KAPLAR (Geylani: "popup kısmı ekranın neredeyse
   tamamını kaplasın, cümleleri daha büyük yap") ----
   Menünün kendi `transform: scale(1.1)` büyütmesi burada kapatılır: tam
   ekran bir kutuda ölçek, kutuyu ekranın dışına taşırıyor. Büyüklük
   doğrudan yazı ölçüleriyle veriliyor. */
/* Ölçüleri (left/top/width/height) kalipliste tarafı piksel piksel verir:
   dar kutudan tam ekrana GEÇİŞ animasyonu ancak böyle akıcı olur
   (auto/max-content ölçüler arasında geçiş çalışmaz). */
#suffix-dropdown.ek-genis {
    position: fixed !important;
    right: auto !important; bottom: auto !important;
    max-width: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    padding: 52px 24px 24px !important;
    border-radius: 26px !important;
    overflow: hidden;
}
#suffix-dropdown.ek-genis > div { height: 100%; }
#suffix-dropdown.ek-genis .ek-orta {
    width: auto; flex: 1 1 auto; max-width: none; max-height: none; height: 100%;
    padding-right: 10px;
}
/* Tam ekranı kaplayınca "+" tuşu altta kalıyor: kapatma tuşu şart */
#suffix-dropdown .ek-menu-kapat { display: none; }
#suffix-dropdown.ek-genis .ek-menu-kapat {
    display: flex; position: absolute; top: 13px; left: 14px;
    width: 38px; height: 38px; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer; padding: 0; z-index: 3;
    background: #F1F3F7; color: #6B7280; transition: background .15s, color .15s;
}
#suffix-dropdown.ek-genis .ek-menu-kapat:hover { background: #FF7675; color: #fff; }
#suffix-dropdown.ek-genis .ek-menu-kapat svg { width: 19px; height: 19px; }
/* Geniş hâlde yazılar büyür: cümleler uzaktan da okunsun */
/* ---- BÜYÜK EKRAN ÖLÇEĞİ ----
   Geylani: "popup bilgileri büyük ekranlarda küçük kalıyor, özellikle
   4K'larda; daha büyük olsun ve 4K'da büyüme oranı ekle."
   Bütün kart ölçüleri tek bir katsayıya (--ekb-olcek) bağlı. Katsayı
   ekran genişliğiyle basamak basamak artıyor; 4K bir ekran %100
   ölçekte ~3840 CSS px olarak geldiği için orada kart neredeyse iki
   katına çıkıyor. Satır uzunluğu da katsayıyla birlikte sınırlanıyor:
   3840 px'lik ekranda metin bir uçtan bir uca uzayıp okunmaz olmasın. */
#suffix-dropdown.ek-genis .ek-orta { --ekb-olcek: 1; }
@media (min-width: 1800px) { #suffix-dropdown.ek-genis .ek-orta { --ekb-olcek: 1.14; } }
@media (min-width: 2300px) { #suffix-dropdown.ek-genis .ek-orta { --ekb-olcek: 1.38; } }
@media (min-width: 2900px) { #suffix-dropdown.ek-genis .ek-orta { --ekb-olcek: 1.72; } }
@media (min-width: 3600px) { #suffix-dropdown.ek-genis .ek-orta { --ekb-olcek: 2.05; } }

#suffix-dropdown.ek-genis .ek-orta > * {
    max-width: calc(1180px * var(--ekb-olcek));
    margin-left: auto; margin-right: auto;
}
#suffix-dropdown.ek-genis .ek-orta .ekb-harf {
    min-width: calc(142px * var(--ekb-olcek));
    font-size: calc(4.4rem * var(--ekb-olcek));
    border-radius: calc(24px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-tepe { gap: calc(20px * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-kimlik h3 { font-size: calc(2.25rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-alt { font-size: calc(1.26rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-rozet {
    font-size: calc(.86rem * var(--ekb-olcek));
    padding: calc(4px * var(--ekb-olcek)) calc(12px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-rozet svg {
    width: calc(15px * var(--ekb-olcek)); height: calc(15px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-ozet {
    font-size: calc(1.55rem * var(--ekb-olcek)); line-height: 1.6;
    padding: calc(18px * var(--ekb-olcek)) calc(22px * var(--ekb-olcek));
    border-radius: calc(14px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-sema {
    padding: calc(14px * var(--ekb-olcek)) calc(12px * var(--ekb-olcek));
    gap: calc(14px * var(--ekb-olcek));
    border-radius: calc(16px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-kutu {
    font-size: calc(2.95rem * var(--ekb-olcek));
    padding: calc(14px * var(--ekb-olcek)) calc(24px * var(--ekb-olcek));
    border-radius: calc(14px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-ucan { font-size: calc(2rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-ok-svg {
    width: calc(72px * var(--ekb-olcek)); height: calc(19px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-adim small,
#suffix-dropdown.ek-genis .ek-orta .ekb-gecis small { font-size: calc(.82rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-sema-tr { font-size: calc(1.34rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-ornekler { gap: calc(10px * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-ornek {
    padding: calc(16px * var(--ekb-olcek)) calc(22px * var(--ekb-olcek));
    gap: calc(18px * var(--ekb-olcek));
    border-radius: calc(14px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-o-yalin,
#suffix-dropdown.ek-genis .ek-orta .ekb-o-ekli { font-size: calc(2.9rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-o-tr { font-size: calc(1.44rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-o-ok { font-size: calc(2rem * var(--ekb-olcek)); }
#suffix-dropdown.ek-genis .ek-orta .ekb-dikkat {
    padding: calc(14px * var(--ekb-olcek)) calc(18px * var(--ekb-olcek));
    gap: calc(13px * var(--ekb-olcek));
    border-radius: calc(14px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ek-orta .ekb-dikkat span { font-size: calc(1.34rem * var(--ekb-olcek)); line-height: 1.55; }
#suffix-dropdown.ek-genis .ek-orta .ekb-dikkat b {
    font-size: calc(.82rem * var(--ekb-olcek));
    padding: calc(4px * var(--ekb-olcek)) calc(14px * var(--ekb-olcek));
}
#suffix-dropdown.ek-genis .ekb-bos p { font-size: calc(1.28rem * var(--ekb-olcek, 1)); }
#suffix-dropdown.ek-genis .ekb-bos svg {
    width: calc(66px * var(--ekb-olcek, 1)); height: calc(66px * var(--ekb-olcek, 1));
}
/* Ekler ve kapatma tuşu da büyük ekranda orantılı büyür */
@media (min-width: 1800px) {
    #suffix-dropdown.ek-genis .suffix-btn { font-size: 38px; padding: 11px 16px; }
    #suffix-dropdown.ek-genis .ek-menu-kapat { width: 44px; height: 44px; }
}
@media (min-width: 2300px) {
    #suffix-dropdown.ek-genis .suffix-btn { font-size: 46px; padding: 13px 19px; }
    #suffix-dropdown.ek-genis .ek-menu-kapat { width: 52px; height: 52px; }
    #suffix-dropdown.ek-genis .ek-menu-kapat svg { width: 24px; height: 24px; }
}
@media (min-width: 2900px) {
    #suffix-dropdown.ek-genis .suffix-btn { font-size: 58px; padding: 16px 24px; }
    #suffix-dropdown.ek-genis .ek-menu-kapat { width: 62px; height: 62px; }
    #suffix-dropdown.ek-genis .ek-menu-kapat svg { width: 28px; height: 28px; }
}
/* Ekler de büyür ve tam ekranda dikeyde ortalanır: yan sütunlar tepeye
   yığılıp altta koca bir boşluk bırakmasın. */
/* Geniş hâlde yer bol: ekler tek satırda kalsın (ـ ـ ـيَّات sarmasın).
   ÖLÇÜ DEĞİŞMİYOR: dar ve geniş hâlde ekler birebir aynı boyda — büyüme
   ve küçülme sırasında içerik ne sıkışıyor ne de sonda zıplıyor
   (Geylani: "kapanırken fazla daralıyor sonra tekrar genişliyor"). */
#suffix-dropdown.ek-genis .suffix-btn { white-space: nowrap; }
#suffix-dropdown.ek-genis .ek-orta { align-self: center; height: auto; max-height: 100%; }
/* Tam ekranda arkadaki tablo okunurluğu bozmasın: zemin daha opak */
#suffix-dropdown.ek-genis { background: rgba(255, 255, 255, 0.94) !important; }

/* ---- AÇILIŞ: DAR LİSTEDEN TAM EKRANA ----
   Geylani: "normalde + ye basınca popup görünmesin, eklerden birine
   basınca popup kısmı güzel bir animasyonla görünsün ve genişleme
   animasyonu olsun."
   "+" menüsü DAR açılır (yalnız ek listeleri). Bir eke dokununca kutu
   bulunduğu yerden tam ekrana büyür; bilgi kartı da bir tık gecikmeyle
   aşağıdan süzülerek belirir — büyüme bitmeden içerik zıplamasın. */
#suffix-dropdown.ek-buyuyor {
    transition: left .46s cubic-bezier(.22,1,.36,1),
                top .46s cubic-bezier(.22,1,.36,1),
                width .46s cubic-bezier(.22,1,.36,1),
                height .46s cubic-bezier(.22,1,.36,1),
                padding .46s cubic-bezier(.22,1,.36,1),
                border-radius .46s ease,
                background-color .3s ease;
}
#suffix-dropdown.ek-genis .ek-orta {
    opacity: 0; transform: translateY(14px);
    transition: opacity .18s ease, transform .18s ease;   /* kapanışta yumuşak çıkış */
}
#suffix-dropdown.ek-genis.ek-icerik-acik .ek-orta {
    opacity: 1; transform: none;
    transition: opacity .34s ease .12s, transform .42s cubic-bezier(.22,1,.36,1) .12s;
}
/* KÜÇÜLÜRKEN KART AKIŞTAN DA ÇIKAR: kart ile ikinci ayraç iki fazladan
   boşluk + kendi asgari genişliğini istiyordu; kutu dar hâle yaklaşınca
   satır 433px isteyip 333px'e sıkışıyor, sonda da bir anda açılıyordu
   (ölçüldü — Geylani'nin gördüğü "fazla daralıyor sonra genişliyor" bu).
   Kart söndükten sonra akıştan çıkarılıyor; sütunlar `space-between` ile
   iki uçta durduğu için ortadan kalkması hiçbir şeyi kaydırmıyor. */
#suffix-dropdown.ek-genis > div { justify-content: space-between; }
#suffix-dropdown.ek-genis.ek-kart-yok .ek-orta,
#suffix-dropdown.ek-genis.ek-kart-yok .ek-ayrac { display: none; }
#suffix-dropdown.ek-genis .ek-ayrac,
#suffix-dropdown.ek-genis .ek-menu-kapat { opacity: 0; transition: opacity .3s ease .14s; }
#suffix-dropdown.ek-genis.ek-icerik-acik .ek-ayrac,
#suffix-dropdown.ek-genis.ek-icerik-acik .ek-menu-kapat { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #suffix-dropdown.ek-buyuyor { transition: none; }
    #suffix-dropdown.ek-genis .ek-orta { opacity: 1; transform: none; }
}
/* Henüz eke dokunulmadıysa: sütun boş kalmasın, ne yapılacağını söylesin */
#suffix-dropdown .ekb-bos {
    height: 100%; min-height: 320px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; text-align: center; color: #9AA3B2; padding: 0 22px;
}
#suffix-dropdown .ekb-bos svg { width: 46px; height: 46px; opacity: .5; }
#suffix-dropdown .ekb-bos p { margin: 0; font-size: .95rem; line-height: 1.55; }
/* Bilgisi açık olan ek belli olsun */
#suffix-dropdown .suffix-btn.ek-secili {
    border-color: var(--ekb-renk, #2980B9) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ekb-renk, #2980B9) 30%, transparent) !important;
}
/* Menü içindeki kart, perdedeki kartın süslerini taşımasın */
#suffix-dropdown .ek-orta .ekb-tepe { margin-bottom: 12px; }
#suffix-dropdown .ek-orta .ekb-harf { min-width: 88px; font-size: 2.7rem; }
#suffix-dropdown .ek-orta .ekb-kimlik h3 { font-size: 1.24rem; }
#suffix-dropdown .ek-orta .ekb-sema { padding: 12px 10px; }
#suffix-dropdown .ek-orta .ekb-o-yalin,
#suffix-dropdown .ek-orta .ekb-o-ekli { font-size: 1.28rem; }

/* =========================================================================
   EK KARTINDA İ'RAB SONLARI
   -------------------------------------------------------------------------
   Ekler kelimenin SONUNU değiştirir: harf-i cer ismi mecrûr, lâm-ı ta'lîl
   muzâriyi mansûb yapar. Bu yüzden kartın altına tamlamavecumleler.html'in
   sonlar tablosu birebir gömüldü. Biçim de oradan geldi; yalnız punto ve
   dolgu kart ölçeğine (--ekb-olcek) bağlandı ki 4K'da da orantılı büyüsün.
   ========================================================================= */
.ekb-sonlar {
    --ekb-o: var(--ekb-olcek, 1);
    margin-top: calc(16px * var(--ekb-o));
    padding: calc(16px * var(--ekb-o)) calc(18px * var(--ekb-o)) calc(14px * var(--ekb-o));
    border: 1px solid #E6EBF2; border-radius: calc(14px * var(--ekb-o));
    background: #FBFCFE;
}
.ekb-son-bas {
    display: flex; align-items: center; gap: calc(10px * var(--ekb-o));
    font-size: calc(1.12rem * var(--ekb-o)); font-weight: 800; color: #1d1d1f;
    margin-bottom: calc(6px * var(--ekb-o));
}
.ekb-son-etiket {
    flex: 0 0 auto; padding: calc(3px * var(--ekb-o)) calc(11px * var(--ekb-o));
    border-radius: 999px; background: #3A4657; color: #fff;
    font-size: calc(.68rem * var(--ekb-o)); font-weight: 800; letter-spacing: .08em;
}
.ekb-son-giris {
    margin: 0 0 calc(10px * var(--ekb-o));
    font-size: calc(.98rem * var(--ekb-o)); line-height: 1.55; color: #5A6474;
}
.ekb-son-sekme { display: flex; gap: calc(8px * var(--ekb-o)); margin-bottom: calc(10px * var(--ekb-o)); }
.ekb-ss {
    border: 1px solid #DDE3EC; background: #fff; color: #6B7280; cursor: pointer;
    padding: calc(6px * var(--ekb-o)) calc(18px * var(--ekb-o));
    border-radius: 999px; font-family: inherit; font-weight: 800;
    font-size: calc(.82rem * var(--ekb-o)); letter-spacing: .06em;
    transition: background .15s, color .15s, border-color .15s;
}
.ekb-ss.aktif { background: #3A4657; border-color: #3A4657; color: #fff; }
.ekb-son-kutu { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }

/* --- tablonun kendisi (tamlamavecumleler.css'ten) --- */
/* Tablo İÇERİĞİ KADAR geniş olur ve ortalanır. `width:100%` bırakılınca
   artan bütün yer hâl etiketi sütununa gidiyor, Merfu/Mansub/Mecrur
   blokları tablonun yarısını kaplıyordu (ölçüldü). */
.ekb-sonlar .tc-irab {
    direction: rtl; width: max-content !important; margin: 0 auto; max-width: 100%;
    border-collapse: separate !important; border-spacing: 0 calc(6px * var(--ekb-o));
    table-layout: auto !important;
}
/* Başlık bandı MOR DEĞİL: mecrur etiketi de mor, ikisi karışıyordu
   (Geylani). Nötr kurşuni bir bant hem yeşil-mavi-mor-kırmızı hâl
   etiketlerinin hiçbiriyle çakışmıyor hem de onları öne çıkarıyor. */
.ekb-sonlar .tc-irab th {
    background: #3A4657; color: #fff; border: 1px solid #2C3644;
    padding: calc(8px * var(--ekb-o)) calc(7px * var(--ekb-o)) calc(9px * var(--ekb-o));
    text-align: center; line-height: 1.3; font-family: 'Marhey', system-ui, sans-serif;
}
.ekb-sonlar .tc-irab th .tc-ib-ar {
    display: block; direction: rtl; font-family: 'Arakom', 'Traditional Arabic', serif;
    font-size: calc(1.2rem * var(--ekb-o)); line-height: 1.4;
}
.ekb-sonlar .tc-irab th .tc-ib-ad { display: block; font-size: calc(.88rem * var(--ekb-o)); font-weight: 700; }
.ekb-sonlar .tc-irab th .tc-ib-alt {
    display: inline-block; margin-top: calc(3px * var(--ekb-o));
    padding: calc(1px * var(--ekb-o)) calc(9px * var(--ekb-o)); border-radius: calc(6px * var(--ekb-o));
    background: #EDEFF3; color: #7C8794; font-size: calc(.74rem * var(--ekb-o)); font-weight: 700;
}
.ekb-sonlar .tc-irab th .tc-ib-alt b { color: #9AA5B1; font-weight: 700; }
.ekb-sonlar .tc-ib-hareke { color: #D6199B; }
.ekb-sonlar .tc-ib-harf { color: #1D6FD0; }
.ekb-sonlar .tc-irab td {
    background: #fff; border: 1px solid #D8DEE6;
    padding: calc(11px * var(--ekb-o)) calc(9px * var(--ekb-o)); text-align: center;
    font-family: 'Arakom', 'Traditional Arabic', serif;
    font-size: calc(2rem * var(--ekb-o)); white-space: nowrap; line-height: 1.5;
}
/* `!important`: sayfanın kendi tablo kuralları hücre rengini eziyordu —
   etiketler renkli zeminde kızıl çıkıyordu (ölçüldü). */
.ekb-sonlar .tc-irab .tc-hal {
    font-family: 'Marhey', system-ui, sans-serif !important; font-weight: 700;
    font-size: calc(.86rem * var(--ekb-o)) !important; color: #fff !important;
    white-space: nowrap;
    /* Etiket sütunu içeriği kadar: 104px'te blok tablonun neredeyse
       üçte birini kaplıyordu (Geylani: "çok geniş olmuş"). */
    width: 1%; padding: calc(9px * var(--ekb-o)) calc(12px * var(--ekb-o)) !important;
}
/* KÖŞEDEKİ BOŞ HÜCRE: bant rengini taşımasın, saydam kalsın */
.ekb-sonlar .tc-irab th:first-child {
    background: transparent !important; border-color: transparent !important;
    width: 1%; padding: 0 !important;
}
.ekb-sonlar .tc-h-merfu  .tc-hal { background: #12A05F; }
.ekb-sonlar .tc-h-mansub .tc-hal { background: #2C7BE5; }
.ekb-sonlar .tc-h-mecrur .tc-hal { background: #8B4BD8; }
.ekb-sonlar .tc-h-meczum .tc-hal { background: #C0392B; }
/* O hâlde DÜŞEN nûn: yerinde durur ama üstü çizilir (Arakom'un kendi
   strikeout ölçüsü sıfıra yakın olduğu için çizgi elle çiziliyor). */
.ekb-sonlar .tc-dusen { position: relative; display: inline-block; line-height: 1; color: #E11D2E; }
.ekb-sonlar .tc-dusen::after {
    content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .42em;
    border-top: .075em solid currentColor; pointer-events: none;
}

/* =========================================================================
   ÜST ÇUBUK SİMGELERİ — TEK SIRA, EŞİT ARA
   -------------------------------------------------------------------------
   Dokuz simge iki ayrı grupta, kutunun iki ucuna yaslanıyordu; ortada
   ~68px'lik bir boşluk kalıyor, gruplar içinde ise 15px'lik aralar
   fazla geniş duruyordu (ölçüldü). Gruplar `display: contents` ile
   eritilip dokuzu birden tek sıraya alındı; `space-evenly` aralarını
   eşitliyor, kutu da içeriğine göre daraltıldı — böylece hem aralar
   küçüldü hem de diziliş yatayda simetrik oldu (Geylani: "svg'ler
   arasındaki boşluğu azalt, elementleri yatay olarak simetrik dağıt").
   Sekme şeridi `flex: 1` olduğu için boşalan yeri kendiliğinden alıyor.
   ========================================================================= */
/* 372px'ti; simgeler 18 → 21px'e çıkıp büyüteç geniş bir hap düğmeye
   dönüşünce içerik büyüdü, kutu da onunla birlikte genişledi. 448 → 510 → 612: Geylani önce "svg'ler arasında biraz daha boşluk
   olsun", ardından "boşluğu ve boyutları biraz daha arttıralım" dedi.
   space-evenly fazla eni aralara dağıttığı için tek yapılacak iş
   kutuyu açmak. */
#root-display-box { width: 612px; flex: 0 0 612px; }
/* Dar masaüstünde (≤1180px) sekme şeridine yer bırakmak için kutu bir
   miktar geri çekiliyor: "SÜLASİ MÜCERRED" yazısı sayı rozetine
   değmesin. Simge boyları aynı kalır, yalnız aralar daralır. */
@media screen and (max-width: 1180px) {
    #root-display-box { width: 545px; flex: 0 0 545px; }
}
/* space-evenly kutunun İKİ UCUNA da bir aralık koyuyordu; Geylani
   "en sağda ve en solda boşluk var, o boşluk svg'ler arasına dağılsın"
   dedi. space-between uçlardaki payı sıfırlayıp hepsini aralara
   veriyor; kenar payı olarak yalnız kutunun kendi 8px'i kalıyor. */
#root-display-box > div { justify-content: space-between !important; padding: 0 !important; }
#root-display-box { padding: 0 8px !important; }
/* `!important` şart: grupların `display:flex`i satır içinde yazılı */
#root-display-box > div > div { display: contents !important; }
/* SİMGE BOYU: çizgi ikonlar ile Font Awesome glifleri aynı ölçüye
   getiriliyor. 18px'ti, Geylani'nin isteğiyle 21px'e çıkarıldı —
   çubuk daha rahat okunuyor; kutu da aşağıda buna göre genişledi. */
#root-display-box .root-icon { padding: 7px; font-size: 1.38rem; }
#root-display-box .root-icon > svg { width: 24px !important; height: 24px !important; }

/* =========================================================================
   KULLANIM KILAVUZU — üst çubuğun en sağındaki ⓘ
   -------------------------------------------------------------------------
   Dokuz adım; her adımın yanında sayfanın kendisinden alınmış bir ekran
   görüntüsü var (sarf/kilavuz/). Kart tek sütun akar, bölümler dönüşümlü
   olarak yazı-görsel / görsel-yazı dizilir. Ölçüler büyük ekranlarda
   basamaklı olarak büyür — 4K'da kılavuz da küçük kalmasın.
   ========================================================================= */
#kt-kilavuz {
    --ktk-olcek: 1;
    display: none; position: fixed; inset: 0; z-index: 6200;
    padding: 26px; overflow-y: auto;
    background: rgba(20, 22, 28, .5);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    opacity: 0; transition: opacity .22s ease;
    font-family: 'Inter', system-ui, sans-serif; direction: ltr;
}
#kt-kilavuz.ktk-acik { opacity: 1; }
@media (min-width: 1800px) { #kt-kilavuz { --ktk-olcek: 1.14; } }
@media (min-width: 2300px) { #kt-kilavuz { --ktk-olcek: 1.34; } }
@media (min-width: 2900px) { #kt-kilavuz { --ktk-olcek: 1.62; } }
@media (min-width: 3600px) { #kt-kilavuz { --ktk-olcek: 1.9; } }
.ktk-kart {
    position: relative;
    width: min(calc(1080px * var(--ktk-olcek)), 100%);
    margin: 0 auto;
    background: #fff; border-radius: calc(26px * var(--ktk-olcek));
    padding: calc(34px * var(--ktk-olcek)) calc(38px * var(--ktk-olcek)) calc(26px * var(--ktk-olcek));
    box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
    transform: translateY(16px) scale(.985);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
#kt-kilavuz.ktk-acik .ktk-kart { transform: none; }
/* KAPATMA ÇARPISI AŞAĞI İNİLİRKEN DE DURSUN. Eskiden karta mutlak
   konumlanıyordu; kılavuz uzun olduğu için kaydırınca yukarıda kalıp
   gözden kayboluyor, öğretmen kapatmak için tâ başa dönmek zorunda
   kalıyordu (Geylani: "aşağı inildikçe çarpı kaybolmasın"). Şimdi sıfır
   yükseklikli YAPIŞKAN bir yuvanın içinde: satır kaplamıyor, kartın sağ
   üstünde duruyor ve kaydırıldıkça ekranın üstüne yapışıyor. */
.ktk-kapat-yuva {
    position: sticky; top: 0; height: 0; z-index: 5;
    display: flex; justify-content: flex-end;
    margin-top: calc(-18px * var(--ktk-olcek));
    margin-right: calc(-22px * var(--ktk-olcek));
    pointer-events: none;                 /* yuva tıklamayı yutmasın */
}
.ktk-kapat {
    position: relative; pointer-events: auto;
    width: calc(38px * var(--ktk-olcek)); height: calc(38px * var(--ktk-olcek));
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer; padding: 0;
    background: #F1F3F7; color: #6B7280; transition: background .15s, color .15s;
    /* Yazının üstünde dururken sınırı belli olsun */
    box-shadow: 0 2px 10px rgba(15, 23, 42, .16), 0 0 0 calc(4px * var(--ktk-olcek)) #fff;
}
.ktk-kapat:hover { background: #FF7675; color: #fff; }
.ktk-kapat svg { width: calc(18px * var(--ktk-olcek)); height: calc(18px * var(--ktk-olcek)); }

.ktk-tepe { text-align: center; margin-bottom: calc(26px * var(--ktk-olcek)); }
.ktk-rozet {
    display: inline-flex; align-items: center; gap: calc(7px * var(--ktk-olcek));
    padding: calc(5px * var(--ktk-olcek)) calc(14px * var(--ktk-olcek));
    border-radius: 999px; background: #2980B9; color: #fff;
    font-size: calc(.72rem * var(--ktk-olcek)); font-weight: 800; letter-spacing: .1em;
}
.ktk-rozet svg { width: calc(15px * var(--ktk-olcek)); height: calc(15px * var(--ktk-olcek)); }
.ktk-tepe h2 {
    margin: calc(12px * var(--ktk-olcek)) 0 calc(8px * var(--ktk-olcek));
    font-size: calc(2rem * var(--ktk-olcek)); font-weight: 800; color: #1d1d1f;
}
.ktk-tepe p {
    margin: 0 auto; max-width: calc(720px * var(--ktk-olcek));
    font-size: calc(1.02rem * var(--ktk-olcek)); line-height: 1.65; color: #5A6474;
}

/* GİRİŞTEKİ "NEDEN" IZGARASI — kılavuzun ilk ekranı yalnız "ne yapar"ı
   değil "neden işe yarar"ı da söylesin diye. Kartlar solda renkli bir
   simge, sağda tek cümlelik gerekçe; renk her kartta --nk ile veriliyor
   ki ızgara tek renge boğulmasın. */
.ktk-neden {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(300px * var(--ktk-olcek)), 1fr));
    gap: calc(12px * var(--ktk-olcek)) calc(20px * var(--ktk-olcek));
    margin: calc(22px * var(--ktk-olcek)) 0 calc(16px * var(--ktk-olcek));
    text-align: left;
}
.ktk-nk {
    display: flex; align-items: flex-start; gap: calc(12px * var(--ktk-olcek));
    background: #F8FAFD; border: 1px solid #EBF0F7;
    border-radius: calc(14px * var(--ktk-olcek));
    padding: calc(13px * var(--ktk-olcek)) calc(15px * var(--ktk-olcek));
}
.ktk-nk > div {
    font-size: calc(.93rem * var(--ktk-olcek)); line-height: 1.55; color: #55606F;
}
.ktk-nk b { color: #1d1d1f; }
.ktk-nk > div > b:first-child {
    display: block; font-size: calc(1rem * var(--ktk-olcek));
    font-weight: 800; margin-bottom: calc(3px * var(--ktk-olcek));
}
.ktk-nk kbd {
    display: inline-block; padding: 0 calc(5px * var(--ktk-olcek));
    border-radius: calc(5px * var(--ktk-olcek)); background: #EDF1F7;
    border: 1px solid #DDE3EC; font-family: inherit; font-weight: 700;
    font-size: calc(.84rem * var(--ktk-olcek)); color: #374151;
}
.ktk-nk-ik {
    flex: 0 0 auto; width: calc(38px * var(--ktk-olcek)); height: calc(38px * var(--ktk-olcek));
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(11px * var(--ktk-olcek));
    background: #EEF3F9;                                   /* color-mix yoksa yedek */
    background: color-mix(in srgb, var(--nk) 12%, #fff);
    color: var(--nk);
}
.ktk-nk-ik svg { width: calc(21px * var(--ktk-olcek)); height: calc(21px * var(--ktk-olcek)); }
.ktk-alt-not {
    margin: 0 auto !important; max-width: calc(720px * var(--ktk-olcek));
    font-size: calc(.96rem * var(--ktk-olcek)) !important; color: #7A8494 !important;
}

.ktk-bolum {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: calc(26px * var(--ktk-olcek)); align-items: center;
    padding: calc(22px * var(--ktk-olcek)) 0;
    border-top: 1px solid #EDF1F7;
}
.ktk-bolum:nth-child(odd) .ktk-yazi { order: 2; }     /* dönüşümlü diziliş */
.ktk-yazi { position: relative; padding-left: calc(46px * var(--ktk-olcek)); }
.ktk-no {
    position: absolute; left: 0; top: calc(-2px * var(--ktk-olcek));
    width: calc(34px * var(--ktk-olcek)); height: calc(34px * var(--ktk-olcek));
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #EAF2FA; color: #2980B9;
    font-size: calc(1.02rem * var(--ktk-olcek)); font-weight: 800;
}
/* Başlıklar: numara dairesinin yanına adımı anlatan bir simge. Simge
   flex kutunun ilk çocuğu, metin ikinci — başlık iki satıra sararsa
   simge yukarıda hizalı kalsın diye align-items: flex-start değil,
   metin bloğu ayrı span'de tutuluyor. */
.ktk-yazi h3 {
    margin: 0 0 calc(9px * var(--ktk-olcek));
    font-size: calc(1.34rem * var(--ktk-olcek)); font-weight: 800; color: #1d1d1f;
    display: flex; align-items: center; gap: calc(10px * var(--ktk-olcek));
}
.ktk-bik {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: calc(30px * var(--ktk-olcek)); height: calc(30px * var(--ktk-olcek));
    border-radius: calc(9px * var(--ktk-olcek));
    background: #EAF2FA; color: #2980B9;
}
.ktk-bik svg { width: calc(19px * var(--ktk-olcek)); height: calc(19px * var(--ktk-olcek)); }
.ktk-yazi p {
    margin: 0 0 calc(9px * var(--ktk-olcek));
    font-size: calc(1rem * var(--ktk-olcek)); line-height: 1.62; color: #4B5563;
}
.ktk-yazi ul { margin: 0 0 calc(9px * var(--ktk-olcek)); padding-left: calc(20px * var(--ktk-olcek)); }
.ktk-yazi li {
    font-size: calc(.98rem * var(--ktk-olcek)); line-height: 1.6; color: #4B5563;
    margin-bottom: calc(3px * var(--ktk-olcek));
}
.ktk-yazi b { color: #1F2937; }
.ktk-ipucu {
    background: #FFF8E7; border: 1px solid #FFE3A3; border-radius: calc(11px * var(--ktk-olcek));
    padding: calc(9px * var(--ktk-olcek)) calc(13px * var(--ktk-olcek));
    color: #6B5A2E !important; font-size: calc(.94rem * var(--ktk-olcek)) !important;
}
.ktk-artı {
    display: inline-flex; align-items: center; justify-content: center;
    width: calc(24px * var(--ktk-olcek)); height: calc(24px * var(--ktk-olcek));
    border-radius: calc(8px * var(--ktk-olcek)); background: #EAF2FA; color: #2980B9;
    font-size: calc(1.1rem * var(--ktk-olcek)); vertical-align: middle;
}
/* Görseli olmayan bölüm (1. adım) tek sütuna yayılır; ikon listesi
   sayfadaki ikonların TA KENDİSİNİ kullanır — ekran görüntüsü yerine
   canlı simge, böylece ikon dili değişirse kılavuz da kendiliğinden
   güncellenir. */
.ktk-bolum:has(.ktk-tek) { grid-template-columns: 1fr; }
.ktk-ikonlu { list-style: none; padding-left: 0 !important;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(280px * var(--ktk-olcek)), 1fr));
    gap: calc(6px * var(--ktk-olcek)) calc(22px * var(--ktk-olcek)); }
.ktk-ikonlu li { display: flex; align-items: center; gap: calc(11px * var(--ktk-olcek)); }
.ktk-ik {
    flex: 0 0 auto; width: calc(34px * var(--ktk-olcek)); height: calc(34px * var(--ktk-olcek));
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(10px * var(--ktk-olcek)); background: #F4F7FB;
    border: 1px solid #E6EBF2; color: #2980B9; font-size: calc(1rem * var(--ktk-olcek));
}
.ktk-ik svg { width: calc(20px * var(--ktk-olcek)); height: calc(20px * var(--ktk-olcek)); }
.ktk-gorsel { margin: 0; }
.ktk-gorsel img {
    display: block; width: 100%; height: auto;
    border-radius: calc(14px * var(--ktk-olcek));
    border: 1px solid #E6EBF2; box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
.ktk-bolum:has(.ktk-genis) { grid-template-columns: 1fr; }
.ktk-genis img { border-radius: calc(10px * var(--ktk-olcek)); }
/* İki görselli bölüm (tablonun iki sekmesi, ek kartının iki hâli):
   alt alta iki kare + altlarında hangi hâl olduğunu söyleyen etiket.
   Yan yana koymadım — kılavuz sütunu zaten dar, iki tabloyu yan yana
   sıkıştırınca harekeler okunmaz oluyordu. */
.ktk-cift { display: grid; gap: calc(14px * var(--ktk-olcek)); }
.ktk-cift figure { margin: 0; }
.ktk-cift figcaption {
    margin-top: calc(6px * var(--ktk-olcek)); text-align: center;
    font-size: calc(.82rem * var(--ktk-olcek)); font-weight: 700;
    color: #7A8494; letter-spacing: .015em;
}

.ktk-dip {
    display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--ktk-olcek)) calc(18px * var(--ktk-olcek));
    margin-top: calc(18px * var(--ktk-olcek)); padding-top: calc(16px * var(--ktk-olcek));
    border-top: 1px solid #EDF1F7;
    font-size: calc(.92rem * var(--ktk-olcek)); color: #6B7280;
}
.ktk-dip b { color: #1F2937; }
.ktk-dip kbd {
    display: inline-block; padding: calc(2px * var(--ktk-olcek)) calc(8px * var(--ktk-olcek));
    border-radius: calc(6px * var(--ktk-olcek)); background: #F1F3F7;
    border: 1px solid #DDE3EC; font-family: inherit; font-weight: 700; color: #374151;
}
@media (max-width: 820px) {
    .ktk-bolum { grid-template-columns: 1fr; }
    .ktk-bolum:nth-child(odd) .ktk-yazi { order: 0; }
    .ktk-kart { padding: 26px 20px 20px; }
    /* Dar ekranda kartın dolgusu farklı; yuva ona göre kaydırılıyor. */
    .ktk-kapat-yuva { margin-top: -12px; margin-right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
    #kt-kilavuz, .ktk-kart { transition: none; }
}

#ek-bilgi-perde {
    display: none; position: fixed; inset: 0; z-index: 6000;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(20,22,28,.42);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .2s ease;
}
#ek-bilgi-perde.ekb-acik { opacity: 1; }
.ekb-kart {
    --ekb-renk: #2980B9;
    position: relative; width: min(600px, 100%); max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: 24px; padding: 26px 28px 24px;
    border-bottom: 6px solid var(--ekb-renk);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    font-family: 'Inter', system-ui, sans-serif; direction: ltr;
    transform: translateY(14px) scale(.97); transition: transform .22s cubic-bezier(.22,1,.36,1);
}
#ek-bilgi-perde.ekb-acik .ekb-kart { transform: none; }
.ekb-kapat {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer; padding: 0;
    background: #F1F3F7; color: #6B7280; transition: background .15s, color .15s;
}
.ekb-kapat svg { width: 17px; height: 17px; }
.ekb-kapat:hover { background: var(--ekb-renk); color: #fff; }

/* --- TEPE: dev harf + kimlik --- */
.ekb-tepe { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ekb-harf {
    flex: 0 0 auto; min-width: 104px; padding: 10px 14px 14px; text-align: center;
    font-family: 'Arakom', 'Harmattan', serif; font-size: 3.5rem; line-height: 1;
    color: var(--ekb-renk); background: color-mix(in srgb, var(--ekb-renk) 10%, #fff);
    border-radius: 18px; border: 2px solid color-mix(in srgb, var(--ekb-renk) 22%, #fff);
}
.ekb-kimlik { min-width: 0; }
.ekb-rozet {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
    padding: 3px 11px 3px 8px; border-radius: 999px;
    background: var(--ekb-renk); color: #fff;
    font-size: .66rem; font-weight: 800; letter-spacing: .1em;
}
.ekb-rozet svg { width: 14px; height: 14px; }
.ekb-kimlik h3 { margin: 0; font-size: 1.42rem; font-weight: 800; color: #1d1d1f; line-height: 1.2; }
.ekb-alt { margin: 2px 0 0; font-size: .92rem; color: #8A94A6; }
.ekb-ozet {
    margin: 0 0 16px; font-size: 1.02rem; line-height: 1.55; color: #374151;
    padding: 11px 14px; border-radius: 12px; background: #F7F9FC;
}

/* --- ŞEMA: yalın ➜ ek uçar ➜ ekli --- */
.ekb-sema {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 10px 8px; border-radius: 16px;
    background: linear-gradient(180deg, #FBFCFE, #F3F6FA);
    border: 1px solid #E9EEF5;
}
.ekb-adim { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ekb-adim small { font-size: .66rem; letter-spacing: .07em; color: #9AA3B2; text-transform: uppercase; }
.ekb-kutu {
    padding: 9px 15px; border-radius: 13px; background: #fff;
    font-family: 'Arakom', 'Harmattan', serif; font-size: 1.85rem; line-height: 1.35;
    border: 1px solid #E4E9F0; box-shadow: 0 2px 6px rgba(0,0,0,.05); white-space: nowrap;
}
.ekb-ekli { border-color: var(--ekb-renk); color: var(--ekb-renk); box-shadow: 0 3px 10px color-mix(in srgb, var(--ekb-renk) 22%, transparent); }
.ekb-gecis { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px; }
.ekb-gecis small { font-size: .62rem; letter-spacing: .06em; color: #9AA3B2; text-transform: uppercase; }
/* Ek, her turda yerine uçup oturur: öğrenci nereye yapıştığını görsün */
.ekb-ucan {
    font-family: 'Arakom', 'Harmattan', serif; font-size: 1.5rem; line-height: 1;
    color: var(--ekb-renk); font-weight: 700;
    animation: ekbUc 2.6s ease-in-out infinite;
}
@keyframes ekbUc {
    0%, 8%    { transform: translateX(0)    scale(1);    opacity: .35; }
    38%, 62%  { transform: translateX(-14px) scale(1.22); opacity: 1; }
    92%, 100% { transform: translateX(0)    scale(1);    opacity: .35; }
}
.ekb-ok-svg { width: 66px; height: 17px; overflow: visible; }
.ekb-ok-yol, .ekb-ok-uc {
    fill: none; stroke: var(--ekb-renk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ekb-ok-yol { stroke-dasharray: 7 6; animation: ekbAk 1.1s linear infinite; }
@keyframes ekbAk { to { stroke-dashoffset: -13; } }
.ekb-sema-tr {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 8px 0 16px; font-size: .86rem; color: #6B7280;
}
.ekb-sema-tr b { color: var(--ekb-renk); }

/* --- ÖRNEKLER --- */
.ekb-ornekler { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ekb-ornek {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 13px; border-radius: 12px; background: #F7F9FC; border: 1px solid #EDF1F7;
}
.ekb-o-yalin, .ekb-o-ekli { font-family: 'Arakom', 'Harmattan', serif; font-size: 1.45rem; line-height: 1.4; }
.ekb-o-yalin { color: #8A94A6; }
.ekb-o-ekli  { color: var(--ekb-renk); font-weight: 600; }
.ekb-o-ok { color: #C3CAD6; font-size: .95rem; }
/* SATIR DÜZENİ (Geylani): solda TÜRKÇE, sağda ARAPÇA ikili.
   Arapça ikili kendi içinde sağdan sola okunur — YALIN hâl en sağda,
   ok sola bakar, EKLİ hâl solunda. Türkçenin sağındaki otomatik boşluk
   bütün Arapça grubu sağ kenara yaslar. */
.ekb-o-tr    { order: 0; margin-right: auto; font-size: .85rem; color: #6B7280; }
.ekb-ornek .ekb-o-ekli  { order: 1; }
.ekb-ornek .ekb-o-ok    { order: 2; }
.ekb-ornek .ekb-o-yalin { order: 3; }

/* --- DİKKAT --- */
.ekb-dikkat {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 14px; border-radius: 12px;
    background: #FFF8E7; border: 1px solid #FFE3A3;
}
.ekb-dikkat b {
    flex: 0 0 auto; padding: 2px 10px; border-radius: 999px;
    background: #F39C12; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .09em;
}
.ekb-dikkat span { font-size: .9rem; line-height: 1.5; color: #6B5A2E; }

@media (max-width: 620px) {
    .ekb-kart { padding: 22px 18px 20px; }
    .ekb-harf { min-width: 82px; font-size: 2.7rem; }
    .ekb-kimlik h3 { font-size: 1.18rem; }
    .ekb-sema { flex-direction: column; gap: 10px; }
    .ekb-ok-svg { transform: rotate(-90deg); width: 44px; }
    .ekb-o-tr { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ekb-ucan, .ekb-ok-yol { animation: none; }
    .ekb-ucan { opacity: 1; }
}
/* Türkçe cümle içindeki Arapça parça: kendi yönünde, kendi yazı tipiyle */
.ekb-ar {
    font-family: 'Arakom', 'Harmattan', serif; font-style: normal;
    font-size: 1.18em; line-height: 1; unicode-bidi: isolate; direction: rtl;
    padding: 0 1px;
}

/* Yatay telefon: perde alçak kalıyor, kart sığsın diye sıkılaşır */
@media (max-height: 540px) {
    #ek-bilgi-perde { padding: 10px; }
    .ekb-kart { max-height: 94vh; padding: 16px 18px 14px; border-radius: 18px; }
    .ekb-tepe { gap: 12px; margin-bottom: 9px; }
    .ekb-harf { min-width: 76px; font-size: 2.3rem; padding: 6px 10px 9px; border-radius: 13px; }
    .ekb-kimlik h3 { font-size: 1.05rem; }
    .ekb-alt { font-size: .8rem; }
    .ekb-ozet { font-size: .88rem; padding: 8px 11px; margin-bottom: 10px; }
    .ekb-sema { padding: 10px 8px 6px; }
    .ekb-kutu { font-size: 1.4rem; padding: 6px 11px; }
    .ekb-sema-tr { margin: 6px 0 10px; font-size: .78rem; }
    .ekb-ornekler { gap: 6px; margin-bottom: 10px; }
    .ekb-ornek { padding: 6px 10px; }
    .ekb-o-yalin, .ekb-o-ekli { font-size: 1.18rem; }
    .ekb-o-tr, .ekb-dikkat span { font-size: .8rem; }
    .ekb-dikkat { padding: 9px 11px; }
}

/* =========================================================================
   ŞEMA SORUSU ("SOR") — gizlenen parça ve düğme
   ========================================================================= */
/* SOR şeridi yalnız ODAK kipinde görünür: küçük süzgeçte yer kaplamasın,
   soru sormak için önce başlıktaki büyüteçle şema büyütülsün. */
.kl-sor-serit { display: none; }
.kl-sema-odak .kl-sor-serit {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    flex-wrap: wrap; width: 100%; margin-top: 10px;
}
.kl-sor-btn {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 20px 7px 15px; border: none; border-radius: 999px;
    background: #E53935; color: #fff; font-weight: 800; font-size: .82rem;
    letter-spacing: .09em; font-family: 'Inter', sans-serif;
    box-shadow: 0 3px 10px rgba(229,57,53,.32);
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.kl-sor-btn svg { width: 17px; height: 17px; }
.kl-sor-btn:hover { background: #EF5350; box-shadow: 0 5px 14px rgba(229,57,53,.4); }
.kl-sor-btn:active { transform: scale(.95); }
.kl-sor-ip { font-size: .72rem; color: #9AA3B2; font-family: 'Inter', sans-serif; }

/* Gizlenen parça: metni görünmez olur, yerinde soru etiketi durur.
   Tıklanabilir olduğu belli olsun diye kesikli kırmızı çerçeve alır. */
.kl-gizli {
    position: relative; cursor: pointer; border-radius: 8px;
    color: transparent !important; text-shadow: none !important;
    background: repeating-linear-gradient(135deg,
        rgba(229,57,53,.10) 0 6px, rgba(229,57,53,.16) 6px 12px);
    box-shadow: inset 0 0 0 2px rgba(229,57,53,.55);
    animation: klGizliNabiz 1.9s ease-in-out infinite;
    min-width: 62px; min-height: 1.25em; display: inline-block;
}
.kl-gizli::after {
    content: attr(data-soru);
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #E53935; font-family: 'Inter', sans-serif; font-weight: 800;
    font-size: .74rem; letter-spacing: .04em; text-shadow: none; direction: ltr;
    white-space: nowrap; padding: 0 4px;
}
@keyframes klGizliNabiz {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(229,57,53,.55); }
    50%      { box-shadow: inset 0 0 0 2px rgba(229,57,53,.95), 0 0 10px rgba(229,57,53,.25); }
}
@media (prefers-reduced-motion: reduce) { .kl-gizli { animation: none; } }

/* =========================================================================
   ODAK KİPİ — şema büyütülüp öne alındığında
   ========================================================================= */
#sema-odak-perde {
    display: none; position: fixed; inset: 0; z-index: 6100;
    align-items: stretch; justify-content: center; padding: 12px;
    background: rgba(20,22,28,.46);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    opacity: 0; transition: opacity .2s ease;
}
#sema-odak-perde.so-acik { opacity: 1; }
.so-levha {
    /* Tam ekrana yakın: hatırlatma anında ekranın tamamı şemanın olsun */
    width: 100%; height: auto; max-height: 100%; overflow-y: auto;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 22px; padding: 16px 22px 20px;
    border-bottom: 6px solid #F39C12; box-shadow: 0 26px 64px rgba(0,0,0,.3);
    font-family: 'Inter', system-ui, sans-serif; direction: ltr;
    transform: translateY(14px) scale(.97); transition: transform .22s cubic-bezier(.22,1,.36,1);
}
#sema-odak-perde.so-acik .so-levha { transform: none; }
.so-tepe {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #EDF1F7;
}
.so-baslik {
    padding: 6px 16px; border-radius: 999px; background: #F39C12; color: #fff;
    font-weight: 800; font-size: .82rem; letter-spacing: .1em;
}
.so-ip { font-size: .82rem; color: #8A94A6; }
.so-kucult {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px; border: none; border-radius: 999px;
    background: #2980B9; color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .05em;
    box-shadow: 0 3px 10px rgba(41,128,185,.3); transition: background .15s, transform .12s;
}
.so-kucult svg { width: 16px; height: 16px; }
.so-kucult:hover { background: #5DADE2; }
.so-kucult:active { transform: scale(.96); }
.so-govde { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* Odaktaki şema: kartlar büyür, yazılar okunur hâle gelir */
.kl-sema-odak { width: 100% !important; max-width: 100% !important; }
.kl-sema-odak .kl-sema-tepe { display: none; }
.kl-sema-odak .kl-sema-dallar { gap: 18px; }
.kl-sema-odak .kl-sema-izgara { gap: 12px; }
.kl-sema-odak .kl-sema-baslik { font-size: clamp(1.1rem, 2.7vh, 2rem); padding: clamp(8px,1.4vh,16px) 24px; letter-spacing: .12em; }
.kl-sema-odak { height: 100%; display: flex; flex-direction: column; }
.kl-sema-odak .kl-sema-dallar { flex: 1 1 auto; min-height: 0; }
.kl-sema-odak .kl-sema-sutun { display: flex; flex-direction: column; }
.kl-sema-odak .kl-sema-izgara { flex: 1 1 auto; }
.kl-sema-odak .kl-sema-kart { padding: 18px 14px; cursor: default; min-height: 132px; }
.kl-sema-odak .kl-sema-kart:hover { transform: none; border-left-width: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
/* Kart tam ekranda büyüyünce yazı da büyür; içerik ortada toplanır ki
   kartın içi boş boş durmasın. Ölçüler ekran boyuna göre esner. */
.kl-sema-odak .kl-sema-kart { justify-content: center; gap: clamp(8px, 1.8vh, 24px); }
.kl-sema-odak .kl-sk-ad { font-size: clamp(1.7rem, 4.4vh, 3.2rem); line-height: 1.15; }
.kl-sema-odak .kl-sk-tanim { font-size: clamp(1.05rem, 2.5vh, 1.85rem); line-height: 1.3; }
.kl-sema-odak .kl-sk-ornek { font-size: clamp(2.6rem, 8vh, 5.6rem); line-height: 1.35; padding: 4px 18px; }
.kl-sema-odak .kl-sk-sayi { font-size: clamp(.9rem, 1.8vh, 1.3rem); }
/* Sorulan kutu: büyük kipte iyi okunsun — geniş, kalın çerçeveli,
   içindeki soru metni de kartın yazısıyla aynı ölçekte. */
.kl-sema-odak .kl-gizli {
    min-width: clamp(140px, 16vh, 240px); min-height: 1.5em;
    border-radius: 12px; box-shadow: inset 0 0 0 3px rgba(229,57,53,.6);
}
.kl-sema-odak .kl-gizli::after {
    font-size: clamp(1.15rem, 2.9vh, 2.1rem); letter-spacing: .02em;
}
@keyframes klGizliNabizBuyuk {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(229,57,53,.6); }
    50%      { box-shadow: inset 0 0 0 3px rgba(229,57,53,1), 0 0 18px rgba(229,57,53,.3); }
}
.kl-sema-odak .kl-gizli { animation-name: klGizliNabizBuyuk; }
.kl-sema-odak .kl-sor-serit { margin-top: 18px; }
.kl-sema-odak .kl-sor-btn { font-size: .92rem; padding: 10px 26px 10px 20px; }
.kl-sema-odak .kl-sor-ip { font-size: .82rem; }

/* Başlık yanındaki büyüteç düğmesi */
.kl-buyutec {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; margin-left: 9px; vertical-align: middle;
    border: none; border-radius: 6px; background: rgba(255,255,255,.22); color: inherit;
    transition: background .15s ease, transform .12s ease;
}
.kl-buyutec svg { width: 14px; height: 14px; }
.kl-buyutec:hover { background: rgba(255,255,255,.45); transform: scale(1.12); }
.kl-buyutec:active { transform: scale(.94); }

/* Vezin listesindeki şemanın ince başlığı ("Hepsi" düğmesinin yerine) */
.kl-sema-tepe {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    color: #7A8698; font-family: 'Inter', sans-serif;
    font-size: .68rem; font-weight: 800; letter-spacing: .14em;
}
.kl-sema-tepe .kl-buyutec { background: rgba(0,0,0,.06); color: #7A8698; }
.kl-sema-tepe .kl-buyutec:hover { background: rgba(0,0,0,.12); }

@media (max-width: 760px) {
    .so-levha { padding: 14px 14px 18px; }
    .kl-sema-odak .kl-sema-kart { padding: 12px 9px; min-height: 108px; }
    .kl-sema-odak .kl-sk-ad { font-size: 1.15rem; }
    .kl-sema-odak .kl-sk-tanim { font-size: .84rem; }
    .kl-sema-odak .kl-sk-ornek { font-size: 1.9rem; }
    .so-ip { display: none; }
}
@media (max-height: 560px) {
    .so-levha { padding: 12px 14px 14px; max-height: 96vh; }
    .so-tepe { padding-bottom: 9px; margin-bottom: 9px; }
    .kl-sema-odak .kl-sema-kart { padding: 10px 8px; min-height: 96px; }
    .kl-sema-odak .kl-sk-ornek { font-size: 1.7rem; }
    .kl-sema-odak .kl-sor-serit { margin-top: 10px; }
}

/* Grup başlığı gizlendiğinde: turuncu/yeşil zemin üstünde kırmızı yazı
   okunmuyordu — soru kutusu beyaza döner, kırmızı yazı öne çıkar. */
.kl-sema-baslik.kl-gizli {
    background: rgba(255,255,255,.94);
    box-shadow: inset 0 0 0 3px rgba(229,57,53,.75);
}
.kl-sema-baslik.kl-gizli::after { color: #E53935; }

/* SEKME BANDI: geçiş varsayılan olarak KAPALI, yalnız gerçek sekme
   değişiminde (setTab ➜ bandiKaydir) açılır. Böylece düzen değişiklikleri
   — tam ekran, body.mezid-odak sınıfının kalkması — bandı kaydıramaz.
   Ayrıntı: kaliplartablosu.js, bandiKaydir(). */
.slider-bandi { transition: none; }
.slider-bandi.bandi-kayar { transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1); }
.switch-slider { transition: none; }
.segmented-switch.bandi-kayar .switch-slider { transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1); }

/* ---------- AÇIK VEZNİN KÖŞESİNDEKİ ÇARPI ----------
   Kırmızı vurgulu kutu "açık" demek; nereden kapatılacağı belli olsun
   diye köşesine küçük bir çarpı oturuyor. Vezne tekrar dokunmak da
   kapatıyor — çarpı yalnız yolu gösteriyor. */
.glass-box.ko-sec { position: relative; }
.ko-kapat-x {
    /* KUTUNUN İÇİNDE duruyor, dışarı taşmıyor: odaktaki satır üst çubuğun
       hemen altına yapıştığı için dışarı taşan bir düğme çubuğun altında
       kalıp tıklanamıyordu. Sağ üstte kalıp numarası, sol üstte «örneği
       var» işareti duruyor; boş köşe SOL ALT. */
    -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0;
    position: absolute; bottom: 5px; left: 5px; z-index: 40;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #E53935; color: #fff; border: 2px solid #fff;
    box-shadow: 0 3px 9px rgba(229,57,53,.45);
    transition: transform .14s cubic-bezier(.22,1,.36,1), background .15s ease;
    animation: koXBelir .35s cubic-bezier(.22,1,.36,1) both;
}
.ko-kapat-x svg { width: 13px; height: 13px; }
.ko-kapat-x:hover { background: #B71C1C; transform: scale(1.15); }
.ko-kapat-x:active { transform: scale(.92); }
@keyframes koXBelir {
    from { opacity: 0; transform: scale(.4) rotate(-90deg); }
    to   { opacity: 1; transform: none; }
}
/* Mücerredde kutu büyüyerek levhaya taşınıyor: çarpı da onunla büyümesin */
.muc-buyuk .ko-kapat-x { bottom: 7px; left: 7px; width: 30px; height: 30px; }
.muc-buyuk .ko-kapat-x svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .ko-kapat-x { animation: none; } }

/* KAPANIRKEN SAYFA SUSAR: odak kalkarken sayfanın bekleme animasyonları
   (kalıp numarası nabzı, sürpriz kutu parıltısı, ipucu rozeti, üst çubuk
   simgeleri) hep birlikte yeniden başlıyordu — üstelik satır tam kendi
   yerine dönerken. Satır oturana kadar hepsi susturulur. */
body.ko-sakin .ref,
body.ko-sakin .easter-egg-trigger,
body.ko-sakin .plus-hint-badge,
body.ko-sakin .root-icon,
body.ko-sakin .sitemap-wave-hint { animation: none !important; transition: none !important; }

/* MÜCERRED AÇILIŞI: mavi/yeşil dilbilgisi başlık satırı, tablo `ko-acik`
   olur olmaz gizlenmesin — önce aşağı kayan tabloyla birlikte süzülsün.
   Kayış bitince `ko-bas-kayan` kalkar, aşağıdaki kural yine iş görür. */
#tab1 table.ko-acik > thead > tr.ko-bas-kayan { display: table-row !important; }

/* KELİME LİSTESİ BAŞLIKLARI — site renginde zemin, BEYAZ yazı.
   Başlık/ok için ayrı ayrı #000 veren eski kurallar duruyor (başka
   yerlerde de kullanılıyorlar), bu yüzden renkli kartın içindekiler
   burada topluca beyaza çekiliyor. Açık uçlu geçişlerde (yeşil, amber)
   okunurluk için çok hafif bir gölge var — koyu zeminde fark edilmez. */
.thematic-accordion-item.site-renk,
.thematic-accordion-item.site-renk .thematic-accordion-header,
.thematic-accordion-item.site-renk .thematic-accordion-title,
.thematic-accordion-item.site-renk .thematic-accordion-title span,
.thematic-accordion-item.site-renk .thematic-accordion-icon {
    color: #fff !important;
}
.thematic-accordion-item.site-renk .thematic-accordion-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.thematic-accordion-item.site-renk { border-color: rgba(255, 255, 255, .18); }
.thematic-accordion-item.site-renk .thematic-accordion-header:hover {
    background: rgba(255, 255, 255, .13);
}

/* ARAMA EKRANI BAŞLIK İKONLARI (Sözlük / Vezinlere Bak).
   Başlık RTL bir esnek kutu: DOM'da nokta → ikon → yazı sırası,
   ekranda YAZI → İKON → nokta olarak okunur. Yani ikon kelimenin
   sağında; tek eksik olan araya boşluktu. margin-left kelimeye,
   margin-right noktaya bakıyor. Eski Font Awesome <i>'leri yerine
   satır içi SVG: CDN'e bağlı değil, boyu yazıyla orantılı. */
.kt-bas-ik {
    width: 21px; height: 21px; flex: 0 0 auto;
    margin-left: 11px; margin-right: 4px;
    opacity: .88;
}

/* KONU ÖBEĞİ BAŞLIĞI — kelime listeleri ekranında grupları ayırır.
   Izgaranın tamamını kaplar (grid-column: 1 / -1) ki kartların
   arasına satır olarak girsin; ilk öbeğin üstünde fazladan boşluk
   olmasın diye :first-child'ın üst payı kısılıyor. */
.ktl-obek {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    margin: 26px 2px 2px; padding: 0 0 9px;
    border-bottom: 2px solid rgba(41, 128, 185, .16);
}
.ktl-obek:first-child { margin-top: 4px; }
.ktl-obek-ik { font-size: 1.55rem; line-height: 1; }
.ktl-obek-ad {
    font-size: 1.38rem; font-weight: 800; color: #2C3E50;
    letter-spacing: .01em;
}
.ktl-obek-say {
    margin-left: auto; font-size: .88rem; font-weight: 700;
    color: #7C8797; background: #EEF2F7;
    padding: 4px 13px; border-radius: 999px;
}
@media (max-width: 1024px) {
    .ktl-obek { margin-top: 20px; }
    .ktl-obek-ad { font-size: 1.05rem; }
}

/* ==================== AYAR MENÜSÜ ====================
   Üst çubuktaki dişli düğmesinin açtığı küçük pano. BÜYÜTME ve ANLAM
   anahtarları buraya taşındı (çubukta yer açıldı, MÜCERRED/MEZİD
   sekmesi genişledi); yanlarına da "fiil çekimleri hazır" seçeneği
   eklendi. */
.ayar-menu {
    display: none;
    position: fixed; top: 74px; right: 18px; z-index: 3000000;
    width: 320px; padding: 14px 16px 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, .85); border-radius: 20px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
    direction: ltr; font-family: 'Inter', sans-serif;
}
.ayar-menu.acik { display: block; animation: ayarAc .16s cubic-bezier(.25, 1, .5, 1); }
@keyframes ayarAc { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.ayar-bas {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .74rem; font-weight: 900; letter-spacing: .14em; color: #64748b;
    padding: 0 2px 10px; border-bottom: 1px solid rgba(15, 23, 42, .08); margin-bottom: 6px;
}
/* Başlığın sağ ucunda kapatma çarpısı: menünün nereden kapandığı belli
   olsun (Geylani: "ayarlar yazan satırın sağında bi çarpı olsun"). */
.ayar-kapat {
    flex: none; width: 26px; height: 26px; padding: 0; margin: -4px -2px -4px 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(15, 23, 42, .06); color: #475569;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 900; line-height: 1;
    letter-spacing: 0;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.ayar-kapat:hover { background: #ef4444; color: #fff; }
.ayar-kapat:active { transform: scale(.9); }
.ayar-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 2px; cursor: pointer; border-radius: 12px;
}
.ayar-satir:hover { background: rgba(15, 23, 42, .04); }
.ayar-satir + .ayar-satir { border-top: 1px solid rgba(15, 23, 42, .06); }
.ayar-ad {
    display: flex; flex-direction: column; gap: 3px;
    flex: 1 1 auto; min-width: 0;
    font-size: .84rem; font-weight: 800; letter-spacing: .04em; color: #1f2937;
}
/* SATIR SİMGESİ: her ayarın solunda, yazıyla aynı hizada duran yuvarlak
   rozet. Renk currentColor olduğu için anahtar açıkken satır rengiyle
   birlikte koyulaşıyor. */
.ayar-ikon {
    flex: none; width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .05); color: #475569;
    transition: background .18s ease, color .18s ease;
}
.ayar-ikon svg { width: 19px; height: 19px; display: block; }
.ayar-satir:hover .ayar-ikon { background: rgba(15, 23, 42, .09); }
.ayar-satir:has(input:checked) .ayar-ikon { background: rgba(22, 160, 133, .14); color: #0E7C63; }
.ayar-not { font-size: .7rem; font-weight: 500; letter-spacing: 0; color: #64748b; line-height: 1.35; }
.ayar-menu .toggle-switch { flex: none; }

/* ============ ARAÇ ÇUBUĞU BÜYÜTEÇ DÜĞMESİ ============
   Anahtar yerine büyüteç: kapalıyken merceğin arkasında küçük bir ف
   duruyor, büyütme açılınca harf büyüyüp merceği taşıyor — ayarın
   ne yaptığı simgenin kendisinde görünüyor (Geylani).
   Mercek YATAY OVAL: dairesel hâlde harfe yer kalmıyordu, geniş oval
   hem harfi rahat gösteriyor hem çubukta daha oturmuş duruyor. */
/* DAHA BELİRGİN: düz simgelerin arasında kaybolmasın diye kapalıyken
   de hafif zeminli, çerçeveli bir HAP düğme; açılınca yeşile dönüyor. */
#static-buyutme-btn {
    border-radius: 999px;
    padding: 6px 11px !important;
    background: rgba(15, 23, 42, .055);
    border: 1.5px solid rgba(15, 23, 42, .12);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
#static-buyutme-btn:hover { background: rgba(15, 23, 42, .09); border-color: rgba(15, 23, 42, .2); }
#static-buyutme-btn .byt-svg { overflow: visible; }
/* Mercek KOMŞULARLA AYNI BOYDA — kafayı şişirmenin anlamı yok. Genişleyen
   şey ALAN: mercekten sonra bir ok, onun ardında da harfin BÜYÜMÜŞ hâli
   duruyor. Kapalıyken sağdaki harf küçük ve soluk; açılınca yaylanarak
   büyüyüp yeşile dönüyor — ayarın ne yaptığı düğmede okunuyor. */
#static-buyutme-btn .byt-kucuk,
#static-buyutme-btn .byt-buyuk {
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
}
#static-buyutme-btn .byt-kucuk,
#static-buyutme-btn .byt-buyuk { direction: rtl; unicode-bidi: isolate; }
#static-buyutme-btn .byt-kucuk { font-size: 4.9px; opacity: .8; }
#static-buyutme-btn .byt-sap { stroke-width: 2.8; }
#static-buyutme-btn .byt-ok {
    stroke-width: 1.75; opacity: .3;
    transition: opacity .22s ease;
}
/* KÜÇÜKKEN DE OKUNSUN (Geylani): %28 saydamda gri bir leke gibi
   duruyordu, kelime olduğu anlaşılmıyordu. Küçük hâl artık KOYU;
   açık/kapalı farkını renk değil BOY ve yeşile dönüş taşıyor. */
#static-buyutme-btn .byt-buyuk {
    font-size: 8.6px; opacity: .82;
    transition: font-size .32s cubic-bezier(.34, 1.45, .48, 1), opacity .24s ease;
}
/* Çubuktaki genel kural bütün ikon svg'lerini 18×18'e sabitliyor
   (#root-display-box .root-icon > svg). Büyüteç düğmesi geniş bir
   alan istiyor: 48/22 oranıyla 39×18. */
#root-display-box #static-buyutme-btn > svg { width: 60px !important; height: 24px !important; }
#static-buyutme-btn.acik {
    color: #0E7C63;
    background: rgba(22, 160, 133, .15);
    border-color: rgba(14, 124, 99, .42);
}
#static-buyutme-btn.acik:hover { background: rgba(22, 160, 133, .22); }
#static-buyutme-btn.acik .byt-ok { opacity: .8; }
#static-buyutme-btn.acik .byt-buyuk { font-size: 14.5px; opacity: 1; }
#static-buyutme-btn:active { transform: scale(.94); }

/* ============ OYUN DÜĞMESİ: RENKLİ · HÂLE · SİMLER ============
   Geylani: "oyun svg si renkli olsun ve çevresinde parlama ve sim
   tarzı şeyler uçuşsun ama sadece oyun svg sinin yakınlarında".
   Bu yüzden hâle de simler de düğme kutusunun EN FAZLA 7px dışına
   taşıyor; çubuğun geri kalanına hiç bulaşmıyor. */
.oyun-tus { position: relative; }
.oyun-tus .oyun-svg { position: relative; z-index: 2; overflow: visible; }
.oyun-tus:hover .oyun-svg { filter: drop-shadow(0 0 5px rgba(124, 92, 230, .55)); }
/* Yumuşak nefes alan hâle — ikonun tam ardında, dar bir daire. */
.oyun-hale {
    position: absolute; z-index: 1; pointer-events: none;
    top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(124, 92, 230, .30) 0%,
        rgba(46, 134, 222, .17) 42%,
        rgba(18, 184, 134, 0) 72%);
    animation: oyunHale 3.1s ease-in-out infinite;
}
@keyframes oyunHale {
    0%, 100% { opacity: .5; transform: scale(.86); }
    50%      { opacity: 1;  transform: scale(1.1); }
}
/* Dört köşede minik dört uçlu yıldızlar; sırayla parlayıp sönüyor. */
.oyun-sim {
    position: absolute; z-index: 3; pointer-events: none;
    width: 6px; height: 6px; opacity: 0;
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    animation: oyunSim 2.6s ease-in-out infinite;
}
.oyun-tus .s1 { top: 1px;   left: 1px;   width: 7px; height: 7px; background: #F5B301; animation-delay: 0s; }
.oyun-tus .s2 { top: 2px;   right: 0;    width: 5px; height: 5px; background: #7C5CE6; animation-delay: .55s; }
.oyun-tus .s3 { bottom: 1px; right: 3px; width: 6px; height: 6px; background: #EE5253; animation-delay: 1.15s; }
.oyun-tus .s4 { bottom: 3px; left: 2px;  width: 5px; height: 5px; background: #12B886; animation-delay: 1.75s; }
@keyframes oyunSim {
    0%       { opacity: 0; transform: scale(.2) rotate(0deg)   translateY(2px); }
    18%      { opacity: 1; transform: scale(1)  rotate(45deg)  translateY(0); }
    38%      { opacity: 0; transform: scale(.25) rotate(90deg) translateY(-3px); }
    100%     { opacity: 0; transform: scale(.2) rotate(90deg)  translateY(-3px); }
}
/* Hareket azaltma tercihi açıksa renk kalıyor, uçuşma duruyor. */
@media (prefers-reduced-motion: reduce) {
    .oyun-hale, .oyun-sim { animation: none; }
    .oyun-sim { opacity: .75; transform: rotate(45deg); }
}

/* Hazırlık perde arkasında: tahta kurulurken görünmüyor. */
body.fdm-hazirlik .fdm-tahta { opacity: 0 !important; pointer-events: none !important; }
/* Rıhtım belirirken yumuşak bir yaylanma. */
@keyframes fdmBelir {
    0%   { opacity: 0; transform: translateY(14px) scale(.82); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
.fdm-tahta.fdm-belir { animation: fdmBelir .5s cubic-bezier(.22, 1.2, .4, 1); }

/* BÜYÜTMEYİ KAPATAN KIRMIZI ÇARPI: dev kelime ekrandayken araç
   çubuğunun hemen altında duruyor; büyütme yalnız buradan kapanıyor. */
.fdm-buyutme-kapat {
    /* EN SAĞDA: araç çubuğunun altında, sağ kenara yaslı (Geylani). */
    position: fixed; right: 18px; left: auto;
    z-index: 1000008;
    width: 48px; height: 48px; padding: 0;
    border: 3px solid #fff; border-radius: 50%;
    background: #ef4444; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 900; line-height: 1;
    box-shadow: 0 10px 22px rgba(239, 68, 68, .38), 0 2px 6px rgba(15, 23, 42, .2);
    animation: fdmKapatBelir .3s cubic-bezier(.22, 1.2, .4, 1);
}
.fdm-buyutme-kapat:hover { filter: brightness(1.07); }
.fdm-buyutme-kapat:active { transform: scale(.92); }
@keyframes fdmKapatBelir {
    from { opacity: 0; transform: translateY(-12px) scale(.8); }
    to   { opacity: 1; transform: none; }
}

/* "TAM EKRANDAN ÇIKILDI" ŞERİDİ: kenardan tutup küçültünce kipin
   değiştiği belli olsun diye şeridin altında kısa süre beliriyor. */
.fdm-tam-uyari {
    position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
    z-index: 1000012; pointer-events: none; white-space: nowrap;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(15, 23, 42, .88); color: #fff;
    font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 800;
    letter-spacing: .05em;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .28);
    animation: fdmTamUyari 1.9s ease both;
}
@keyframes fdmTamUyari {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ================= YÜKLENİYOR EKRANI =================
   Çekimler hazırlanırken sayfanın üstüne ince bir perde iniyor: dönen
   halka, kök ve ilerleme çizgisi. Perde tıklamayı da yutuyor ki
   hazırlık sürerken araya giren bir dokunuş sırayı bozmasın. */
.fdm-yukleniyor {
    /* Tahtanın (2000000) da üstünde: perde kalkana kadar arkada ne
       olduğu görünmesin — sarı vurgular ve kök levhası ancak sistem
       hazır olunca ortaya çıksın. */
    position: fixed; inset: 0; z-index: 2000050;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248, 250, 252, .97);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;          /* yalnız KAPANIRKEN yumuşak */
}
/* Açılış ANINDA: perde inerken bir kare bile sayfa görünmesin —
   sarı vurgular kök seçilir seçilmez çiziliyor. */
.fdm-yukleniyor.acik { opacity: 1; pointer-events: auto; transition: none; }
.fdm-yuk-kart {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    /* Sayfa RTL: kart soldan sağa olmalı, yoksa "…" başa geçiyor ve
       ilerleme çizgisi ters yönden doluyor. */
    direction: ltr;
    min-width: 240px; padding: 26px 34px 22px;
    background: #fff; border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
    transform: translateY(8px) scale(.97);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.fdm-yukleniyor.acik .fdm-yuk-kart { transform: none; }
.fdm-yuk-cark {
    width: 38px; height: 38px; border-radius: 50%;
    border: 4px solid #e2e8f0; border-top-color: #22c55e;
    animation: fdmYukDon .8s linear infinite;
}
@keyframes fdmYukDon { to { transform: rotate(360deg); } }
.fdm-yuk-yazi {
    font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700;
    letter-spacing: .03em; color: #334155;
}
.fdm-yuk-kok {
    font-family: 'Arakom', 'Amiri', serif; font-size: 1.7rem; line-height: 1.3;
    color: #0f172a;
}
.fdm-yuk-kok:empty { display: none; }
.fdm-yuk-cizgi {
    width: 100%; height: 6px; border-radius: 999px;
    background: #eef2f7; overflow: hidden;
}
.fdm-yuk-cizgi span {
    display: block; width: 0; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width .25s ease;
}
/* Kaç tablo kurulacağı daha bilinmiyorken (kök yeni seçildi) çizgi
   belirsiz kipte akıyor. */
.fdm-yukleniyor.belirsiz .fdm-yuk-cizgi span {
    width: 42%; transition: none;
    animation: fdmYukAk 1.1s ease-in-out infinite;
}
@keyframes fdmYukAk {
    0%   { transform: translateX(-115%); }
    100% { transform: translateX(240%); }
}