/* =======================================================
   K&M CORPORATE DESIGN LANGUAGE (3D Premium Tasarım v32.5)
   ======================================================= */

@font-face {
    font-family: 'Hamdullah';
    src: url('https://kuranmektebim.com/kiler/Hamdullah.ttf?v=2') format('truetype');
    font-weight: normal; font-style: normal;
}

:root {
    --ana-cerceve-zemin: #f8fafc;
    --ana-cerceve-ic-cizgi: #3B82F6; 
    --ana-cerceve-ic-cizgi-opaklik: 0.05;

    --soru-zemin: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(241,245,249,0.85));
    --secenek-zemin: linear-gradient(145deg, #ffffff, #f1f5f9);
    --arapca-zemin: linear-gradient(145deg, #ffffff, #f1f5f9);
    --dogru-zemin: linear-gradient(145deg, #d1fae5, #a7f3d0);
    
    --cizgi-renk: #93C5FD;
    --cizgi-kalinlik: 2px;
    --cizgi-glow: drop-shadow(0px 0px 5px rgba(147, 197, 253, 0.7));

    --soru-font: clamp(14px, 2vw, 22px); 
    --soru-padding: 20px 40px; 
    --soru-radius: 20px;       
    --soru-renk: #1e293b;
    --soru-arapca-renk: #cda036; 
    
    --secenek-font: clamp(14px, 1.8vw, 18px);
    --secenek-padding: 16px 45px; 
    --secenek-radius: 999px;     
    --secenek-renk: #1e293b;
    
    --arapca-font: clamp(28px, 4vw, 44px);
    --arapca-padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 40px);
    --arapca-radius: 24px;
    --arapca-renk: #1e293b;

    --km-main: #3B82F6; --km-success: #10B981; --km-error: #EF4444;
    --km-bg-soft: #f8fafc; --km-border: rgba(0, 0, 0, 0.06); 
}

#tecvid-app { font-family: 'Segoe UI', -apple-system, sans-serif !important; position: relative; width: 100%; margin: 0 auto; background: transparent; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 15px; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
#tecvid-app * { box-sizing: border-box !important; margin: 0; outline: none; }

#tecvid-app #dashboard-layer {
    width: 100%; max-width: 900px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px);
    border-radius: 50px !important; border: 1px solid rgba(255,255,255,0.4); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255,255,255,0.8); 
    padding: 10px 15px !important; display: flex !important; justify-content: space-between; align-items: center !important; z-index: 60;
}
#tecvid-app .dash-left-group { display: flex; gap: 8px; }
#tecvid-app .dash-center-group { display: flex; gap: 10px; align-items: center; }
#tecvid-app .dash-right-group { display: flex; align-items: center; gap: 8px; }

#tecvid-app .km-badge-container { display: flex; align-items: center; gap: 6px; padding: 6px 12px !important; border-radius: 20px !important; font-weight: 700; font-size: 13px; border: 1px solid transparent; transition: all 0.2s; }
#tecvid-app .badge-hearts { background: rgba(239,68,68,0.08); color: #EF4444; }
#tecvid-app .badge-progress { background: #ecfdf5; color: #059669; border-color: #a7f3d0; } 
#tecvid-app .badge-score { background: #fff7ed; color: #ea580c; border-color: #fed7aa; }   
#tecvid-app .badge-bolum { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; cursor: pointer; } 
#tecvid-app .badge-bolum:hover { background: #dbeafe; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(37,99,235,0.1); }

#tecvid-app .km-icon-btn { width: 36px; height: 36px; border-radius: 50% !important; border: 1px solid var(--km-border); background: linear-gradient(145deg, #ffffff, #f1f5f9); color: var(--km-text-secondary); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease-out !important; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.04), inset 0 2px 0 #fff; }
#tecvid-app .km-icon-btn:hover { color: var(--km-main); border-color: #bfdbfe; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(59,130,246,0.15), inset 0 2px 0 #fff; }

#tecvid-app [data-km-tooltip]:hover::after { content: attr(data-km-tooltip); position: absolute; background: rgba(15, 23, 42, 0.95); color: #fff; padding: 6px 12px; font-size: 11px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 999999; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
#tecvid-app .mini-lesson-btn[data-km-tooltip]:hover::after { top: -35px; left: 50%; transform: translateX(-50%); } 
#tecvid-app .badge-bolum[data-km-tooltip]:hover::after { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }

#tecvid-app #instruction-layer { width: 100%; max-width: 900px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 20px !important; border: 1px solid var(--km-border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); padding: 12px 25px !important; display: flex; justify-content: center; align-items: center; z-index: 50; }
#tecvid-app #instruction-text { font-size: 16px; font-weight: 600; color: var(--soru-renk); transition: opacity 0.3s; text-align: center; width: 100%; }

/* 🌟 MOBİL ZIRH - Eşit Genişlik ve Ferahlık Zırhı (v32.5) 🌟 */
@media (max-width: 768px) {
    :root {
        --soru-font: clamp(14px, 3.5vw, 18px); --soru-padding: 16px 18px;
        --secenek-font: clamp(11px, 3vw, 14px); 
        --arapca-font: clamp(22px, 5vw, 32px); --arapca-padding: 12px 20px;
    }
    
    #tecvid-app #dashboard-layer { 
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }
    #tecvid-app .dash-left-group { order: 1 !important; }
    #tecvid-app .dash-right-group { order: 2 !important; }
    #tecvid-app .dash-center-group { 
        order: 3 !important; 
        width: 100% !important; 
        justify-content: center !important; 
        flex-wrap: nowrap !important; 
        gap: 6px !important; 
        margin-top: 10px !important; 
    }
    
    #tecvid-app #instruction-layer { padding: 10px 15px !important; border-radius: 16px !important; }
    #tecvid-app #instruction-text { font-size: 14px !important; }
    
    #tecvid-app .km-icon-btn { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    #tecvid-app .km-badge-container { padding: 4px 8px !important; font-size: 11px !important; white-space: nowrap !important; }
    #tecvid-app .badge-bolum .km-icon-circle { display: none !important; }

    #tecvid-app #game-frame { aspect-ratio: 4 / 3 !important; min-height: 380px !important; }

    #tecvid-app .tree-node-box.at-top { 
        top: 22% !important; 
        transform: translate(-50%, -50%) !important; 
        width: 88% !important; 
        max-width: none !important; 
    }

    /* 🎯 DÜZELTME 1 (YENİ): Şık kutularının büzüşmesini önleyen "Eşit Genişlik" zırhı */
    #tecvid-app .tree-node-box {
        width: 31% !important; /* Tüm şıkları eşit genişliğe zorlar, İklab gibi kısa kelimeler sıkışmaz */
        max-width: 32% !important;
        padding: 10px 8px !important; /* Sağdan ve soldan nefes alma boşluğu eklendi */
        white-space: normal !important; 
        word-wrap: break-word !important; 
        line-height: 1.15 !important; 
        flex-direction: column !important;
    }

    /* 🎯 DÜZELTME 2: Arapça düğümler eşit genişlik kuralından MUAF tutuldu, bozulmaları imkansız hale getirildi. */
    #tecvid-app .arabic-node {
        width: auto !important; /* Türkçe butonlardaki 31% genişlik kuralını iptal eder */
        padding: 10px 15px !important; 
        max-width: none !important; 
        white-space: nowrap !important; 
        flex-direction: row !important; 
    }

    #tecvid-app #result-card { padding: 15px 12px !important; border-radius: 18px !important; width: 95% !important; }
    #tecvid-app #result-icon-area { display: none !important; } 
    #tecvid-app #result-title { font-size: 20px !important; margin-bottom: 4px !important;}
    #tecvid-app #result-desc { font-size: 12px !important; margin-bottom: 12px !important; line-height: 1.2 !important; }
    #tecvid-app .km-result-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 0 !important; justify-content: center !important;}
    #tecvid-app .btn-res { padding: 8px 10px !important; font-size: 12px !important; gap: 5px !important; flex: 1 1 calc(50% - 6px) !important; min-height: 36px !important; margin: 0 !important;}
    #tecvid-app .btn-res i { font-size: 14px !important; margin: 0 !important;}

    #tecvid-app .review-nav-btn { width: 36px; height: 36px; font-size: 16px; top: 8%; } 
}

#tecvid-app #game-frame {
    width: 100%; max-width: min(100%, calc((100vh - 200px) * (16 / 9))); aspect-ratio: 16 / 9 !important; 
    background: var(--ana-cerceve-zemin) !important; border-radius: 32px !important; position: relative !important; 
    overflow: visible !important; 
    border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 25px 50px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,1); z-index: 10;
}

#tecvid-app #lines-svg {
    overflow: hidden !important;
    border-radius: 32px !important;
}
#tecvid-app #game-frame::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; border: 1px dashed var(--ana-cerceve-ic-cizgi) !important; border-radius: 20px !important; opacity: var(--ana-cerceve-ic-cizgi-opaklik) !important; pointer-events: none; z-index: 1; }

.tree-node-box {
    position: absolute !important; background: var(--secenek-zemin) !important; border: 1px solid rgba(255,255,255,0.8) !important; border-radius: var(--secenek-radius) !important; font-size: var(--secenek-font) !important; padding: var(--secenek-padding) !important; font-weight: 700 !important; color: var(--secenek-renk) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.04), inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -2px 0 rgba(0,0,0,0.02) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; line-height: 1.3 !important; transform: translate(-50%, -50%) !important; max-width: 30% !important; white-space: nowrap !important; word-break: normal !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; cursor: pointer; text-align: center !important;
}
#tecvid-app .tree-node-box:hover { transform: translate(-50%, -52%) !important; box-shadow: 0 15px 35px rgba(59, 130, 246, 0.15), inset 0 2px 0 rgba(255,255,255,1) !important; }

#tecvid-app .tree-node-box.at-top {
    top: 22% !important; 
    transform: translate(-50%, -50%) !important; font-size: var(--soru-font) !important; padding: var(--soru-padding) !important; border-radius: var(--soru-radius) !important; font-weight: 700 !important; color: var(--soru-renk) !important; background: var(--soru-zemin) !important; border: 1px solid rgba(255,255,255,0.6) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important; backdrop-filter: blur(12px) !important; cursor: default !important; pointer-events: none !important; width: max-content !important; max-width: 85% !important; display: block !important; text-align: center !important; white-space: pre-wrap !important; 
}

#tecvid-app .question-number-badge { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; background: linear-gradient(145deg, #eab308, #ca8a04); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 15px; border: 2px solid white; box-shadow: 0 4px 10px rgba(202, 138, 4, 0.4); z-index: 99 !important; }

#tecvid-app .arabic-question-word { font-family: 'Hamdullah', serif !important; font-size: 1.4em !important; color: var(--soru-arapca-renk) !important; font-weight: normal !important; padding: 0 4px !important; display: inline-block !important; vertical-align: middle !important; line-height: 0.5 !important; transform: translateY(-2px) !important; direction: rtl !important; unicode-bidi: isolate !important; }
#tecvid-app .arabic-node { font-family: 'Hamdullah', serif !important; font-size: var(--arapca-font) !important; padding: var(--arapca-padding) !important; border-radius: var(--arapca-radius) !important; font-weight: normal !important; color: var(--arapca-renk) !important; background: var(--arapca-zemin) !important; line-height: 1.5 !important; direction: rtl !important; unicode-bidi: isolate !important; white-space: nowrap !important; max-width: 30% !important; }
#tecvid-app .tree-node-box.correct { background: var(--dogru-zemin) !important; color: var(--dogru-yazi-renk) !important; border: 1px solid var(--dogru-cizgi) !important; box-shadow: 0 15px 35px rgba(16, 185, 129, 0.25), inset 0 2px 0 rgba(255,255,255,0.6) !important; pointer-events: none !important; }
#tecvid-app .tree-node-box.wrong { animation: shakeError 0.4s; border: 1px solid var(--km-error) !important; color: var(--km-error) !important; background: #fff5f5 !important; box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2) !important;}

/* VURGU RENKLERİ — sınıf adını game-engine.js > renklendirArapca kuruyor
   ('km-renkli-' + renk adı). Yeni bir renk eklenecekse İKİ yere birden:
   buraya bir kural, motordaki kmVurguHaritasi > gecerliRenkler listesine
   bir ad. Panel tarafındaki seçici de (assets/js/site.js > SITE_RENKLER)
   aynı listeyi taşıyor.
   Yeşil 23 Eyl 2026'da eklendi: bir kelimede aynı kuraldan birden fazla
   geçebildiği için tek kırmızı/mavi çifti yetmiyordu. Ton, doğru cevap
   yeşilinden (#10B981) ayrılsın diye daha koyu seçildi — vurgu bir
   "başarı" işareti değil. */
#tecvid-app .km-renkli-kirmizi { color: #EF4444 !important; text-shadow: 0px 0px 6px rgba(255,255,255,0.9) !important; }
#tecvid-app .km-renkli-mavi { color: #2563EB !important; text-shadow: 0px 0px 6px rgba(255,255,255,0.9) !important; }
#tecvid-app .km-renkli-yesil { color: #15803D !important; text-shadow: 0px 0px 6px rgba(255,255,255,0.9) !important; }

#tecvid-app .mini-lesson-btn { position: absolute !important; top: -12px !important; right: -12px !important; left: auto !important; transform: none !important; width: 32px !important; height: 32px !important; background: linear-gradient(145deg, #3B82F6, #2563EB) !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; color: white !important; text-decoration: none !important; font-size: 14px !important; box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4), inset 0 2px 0 rgba(255,255,255,0.3) !important; z-index: 60 !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; border: 2px solid white !important; pointer-events: auto !important; }
#tecvid-app .mini-lesson-btn:hover { transform: scale(1.2) translateY(-2px) !important; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.5) !important; }

#tecvid-app .thinking-qmark { position: absolute !important; top: 44% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-size: clamp(50px, 8vw, 80px) !important; font-weight: 300 !important; color: var(--km-error) !important; text-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important; z-index: 20 !important; animation: gentle-breathe-qmark 1.2s infinite alternate ease-in-out !important; pointer-events: none; }
@keyframes gentle-breathe-qmark { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; } to { transform: translate(-50%, -50%) scale(1.4); opacity: 1; text-shadow: 0 10px 30px rgba(239, 68, 68, 0.8); } }

#tecvid-app #guess-action-area { position: absolute !important; top: 58% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; z-index: 30 !important; transition: opacity 0.5s; display: none; }
#tecvid-app .km-btn-guess { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 24px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: clamp(14px, 1.8vw, 15px) !important; color: #1e3a8a !important; font-family: inherit !important; cursor: pointer !important; line-height: 1.2 !important; background: #bfdbfe !important; border: 1px solid #93c5fd !important; box-shadow: 0 6px 15px rgba(147, 197, 253, 0.4), inset 0 1px 0 rgba(255,255,255,0.5) !important; transition: all 0.2s ease-out !important; }
#tecvid-app .km-btn-guess:hover { background: #93c5fd !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(147, 197, 253, 0.5), inset 0 1px 0 rgba(255,255,255,0.6) !important; }
#tecvid-app .km-btn-guess:active { transform: scale(0.97) !important; }

#tecvid-app .tree-line { position: absolute; z-index: 5; fill: none; stroke: var(--cizgi-renk); stroke-width: var(--cizgi-kalinlik); filter: var(--cizgi-glow); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLineDown 1.5s ease-out forwards; }

#tecvid-app #result-screen { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(241, 245, 249, 0.95) !important; backdrop-filter: blur(10px) !important; display: none; flex-direction: column !important; justify-content: center !important; align-items: center !important; z-index: 100 !important; padding: 20px !important; }
#tecvid-app #result-card { background: linear-gradient(145deg, #ffffff, #f8fafc) !important; padding: 30px !important; border-radius: 24px !important; text-align: center !important; box-shadow: 0 20px 50px rgba(0,0,0,0.1), inset 0 2px 0 #fff !important; border: 1px solid rgba(255,255,255,0.8) !important; width: 85% !important; max-width: 380px !important; position: relative !important; z-index: 101 !important; margin: 0 auto !important; }
#tecvid-app #result-card::before { content: ''; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; border: 1px solid var(--km-main); border-radius: calc(24px - 6px); opacity: 0.05; pointer-events: none; }
#tecvid-app .km-result-actions { display: flex !important; gap: 10px !important; justify-content: center !important; flex-wrap: wrap !important; margin-top: 15px !important; width: 100% !important; }

#tecvid-app .btn-res { padding: 12px 24px !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: 1px solid transparent !important; transition: all 0.3s ease-out !important; cursor: pointer !important; font-family: inherit !important; line-height: 1.2 !important; min-height: auto !important; }
#tecvid-app .btn-res i { font-size: 16px !important; margin: 0 !important; padding: 0 !important; }
#tecvid-app .btn-res:hover { transform: translateY(-2px) !important; }
#tecvid-app .btn-res:active { transform: scale(0.97) !important; }

#tecvid-app .btn-res-tekrar { color: #475569 !important; border-color: #e2e8f0 !important; background: linear-gradient(145deg, #ffffff, #f1f5f9) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05), inset 0 2px 0 #fff !important; }
#tecvid-app .btn-res-tekrar:hover { box-shadow: 0 8px 15px rgba(0,0,0,0.08), inset 0 2px 0 #fff !important;}
#tecvid-app .btn-res-incele { color: #2563EB !important; border-color: #bfdbfe !important; background: linear-gradient(145deg, #eff6ff, #dbeafe) !important; box-shadow: inset 0 2px 0 #fff;}
#tecvid-app .btn-res-incele:hover { filter: brightness(0.95); }
#tecvid-app .btn-res-cikis { color: #ef4444 !important; border-color: #fecaca !important; background: linear-gradient(145deg, #fef2f2, #fee2e2) !important; box-shadow: inset 0 2px 0 #fff;}
#tecvid-app .btn-res-cikis:hover { filter: brightness(0.95); }
#tecvid-app .btn-res-sonraki { background: linear-gradient(145deg, #3B82F6, #2563EB) !important; color: white !important; box-shadow: 0 6px 20px rgba(59,130,246,0.3), inset 0 2px 0 rgba(255,255,255,0.2) !important; border:none !important;}
#tecvid-app .btn-res-sonraki:hover { box-shadow: 0 10px 25px rgba(59,130,246,0.4), inset 0 2px 0 rgba(255,255,255,0.2) !important;}

#tecvid-app .review-nav-btn { position: absolute; top: 22%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--km-main); font-size: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.2s; z-index: 80; border: 1px solid var(--km-border); }
#tecvid-app .review-nav-btn:hover { background: var(--km-main); color: white; transform: translateY(-50%) scale(1.1); }
#tecvid-app .review-nav-prev { left: 10px; }
#tecvid-app .review-nav-next { right: 10px; }

body.dark-mode #tecvid-app {
    --ana-cerceve-zemin: #0f172a; --soru-zemin: linear-gradient(145deg, #1e293b, #0f172a); --soru-renk: #f1f5f9; 
    --secenek-zemin: linear-gradient(145deg, #164e63, #083344); --secenek-renk: #e0f2fe; 
    --arapca-zemin: linear-gradient(145deg, #164e63, #083344); --arapca-renk: #e0f2fe; 
    --dogru-zemin: linear-gradient(145deg, #059669, #047857); --dogru-yazi-renk: #ecfdf5; 
    --soru-arapca-renk: #fcd34d; --cizgi-glow: drop-shadow(0px 0px 8px rgba(96, 165, 250, 0.5)); 
    --km-bg-wrapper: #0f172a; --km-bg-card: #1e293b; --km-bg-soft: #111827; --km-border: rgba(255, 255, 255, 0.1); --km-text-primary: #f1f5f9; --km-text-secondary: #94a3b8; --km-line-tree: #475569; 
}
body.dark-mode #tecvid-app #dashboard-layer, body.dark-mode #tecvid-app #instruction-layer { background: rgba(30, 41, 59, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1) !important;}
body.dark-mode #result-card { background: linear-gradient(145deg, #1e293b, #0f172a) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.5) !important; border-color: rgba(255,255,255,0.05) !important;}
body.dark-mode .tree-node-box { border-color: rgba(255,255,255,0.05) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 25px rgba(0,0,0,0.3) !important; }
body.dark-mode .btn-res-tekrar { background: transparent !important; color: #cbd5e1 !important; border-color: #475569 !important; box-shadow: none !important;}
body.dark-mode .btn-res-incele { background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #93c5fd !important; box-shadow: none !important;}
body.dark-mode .btn-res-cikis { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #fca5a5 !important; box-shadow: none !important;}
body.dark-mode .km-icon-btn { background: #1e293b !important; color: #94a3b8 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;}
body.dark-mode .km-icon-btn:hover { color: var(--km-main) !important; }
body.dark-mode .km-btn-guess { background: #1e3a8a !important; border-color: #1e40af !important; color: #93c5fd !important; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; }
body.dark-mode #game-frame::before, body.dark-mode #result-card::before { opacity: 0.15 !important; }
body.dark-mode .review-nav-btn { background: #1e293b; color: #93c5fd; border-color: rgba(255,255,255,0.1); }
body.dark-mode #tecvid-app .tree-node-box.wrong { background: #450a0a !important; border-color: #ef4444 !important; color: #fca5a5 !important; }

.pop-in { animation: popUpSimple 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.km-fade-out { opacity: 0; pointer-events: none; transition: opacity 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popCard { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes drawLineDown { to { stroke-dashoffset: 0; } }
@keyframes popUpSimple { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes shakeError { 0%, 100% { transform: translate(-50%, -50%) translateX(0); } 20%, 60% { transform: translate(-50%, -50%) translateX(-8px); } 40%, 80% { transform: translate(-50%, -50%) translateX(8px); } }
.falling-heart { position: fixed; font-size: 30px; z-index: 9999; pointer-events: none; animation: heartFall 1.2s ease-out forwards; }
@keyframes heartFall { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(100px) scale(0.5) rotate(15deg); opacity: 0; } }

/* =======================================================
   Arapça Kelime Ses İkonu (Merkeze Hizalı)
   ======================================================= */
#tecvid-app .km-audio-btn {
    pointer-events: auto !important;
    position: absolute;
    bottom: -40px; 
    left: 50%;
    transform: translateX(-50%); 
    width: 32px;
    height: 32px;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--km-main);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    z-index: 50;
}
#tecvid-app .km-audio-btn:hover {
    background: var(--km-main);
    color: #ffffff;
    transform: translateX(-50%) scale(1.15) translateY(-2px); 
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
}
body.dark-mode #tecvid-app .km-audio-btn {
    background: #1e293b;
    border-color: rgba(255,255,255,0.1);
    color: #93c5fd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
body.dark-mode #tecvid-app .km-audio-btn:hover {
    background: var(--km-main);
    color: #ffffff;
}

/* =======================================================
   KARANLIK MOD - DIŞ SAYFA (ELEMENTOR) EZİCİSİ
   ======================================================= */
body.dark-mode {
    background-color: #0f172a !important;
}
body.dark-mode .elementor,
body.dark-mode .elementor-section,
body.dark-mode .elementor-background-overlay,
body.dark-mode .elementor-widget-wrap,
body.dark-mode .elementor-container,
body.dark-mode #page,
body.dark-mode #content,
body.dark-mode .site-main {
    background-color: transparent !important;
    background-image: none !important;
}

/* =======================================================
   Kısa Tanım Bilgi İkonu (Sol Üst Simetri)
   ======================================================= */
#tecvid-app .info-btn { 
    position: absolute !important; 
    top: -12px !important; 
    left: -12px !important; 
    transform: none !important; 
    width: 32px !important; 
    height: 32px !important; 
    background: linear-gradient(145deg, #10B981, #059669) !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    color: white !important; 
    font-size: 14px !important; 
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4), inset 0 2px 0 rgba(255,255,255,0.3) !important; 
    z-index: 60 !important; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; 
    border: 2px solid white !important; 
    pointer-events: auto !important; 
}
#tecvid-app .info-btn:hover { 
    transform: scale(1.2) translateY(-2px) !important; 
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.5) !important; 
}

/* Uzun Metinler İçin Akıllı Tooltip (Kısa Tanım) */
#tecvid-app .info-btn[data-km-tooltip]:hover::after {
    content: attr(data-km-tooltip);
    position: absolute;
    top: -45px; 
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 10px 14px;
    font-size: 12.5px;
    border-radius: 12px;
    white-space: normal; 
    width: max-content;
    max-width: 260px; 
    pointer-events: none;
    z-index: 999999;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center;
}

body.dark-mode #tecvid-app .info-btn {
    border-color: #1e293b !important;
}