    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #020617;
            color: #e2e8f0;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 10vh;
            margin: 0;
        }
        .font-heading {
             font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
             font-weight: 800;
        }
        /* LOGO VE METİN GRADYAN CSS'İ */
        .logo-text-gradient {
            background: linear-gradient(90deg, #f97316, #fbbf24);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }
        .dynamic-text-gradient {
            background: linear-gradient(90deg, var(--glow-color), var(--glow-color-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            display: inline-block;
        }
        .source-text-gradient {
             background: linear-gradient(90deg, var(--source-glow-color), var(--source-glow-color-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             color: transparent; 
             display: inline-block; 
        }

        /* DİNAMİK LOGO İKONU CSS'İ */
        .dynamic-logo-icon {
            position: relative;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: transparent !important; 
        }

        .dynamic-logo-icon .icon-default,
        .dynamic-logo-icon .icon-hover {
            position: absolute;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .dynamic-logo-icon .icon-hover {
            opacity: 0;
            transform: scale(0.8);
            font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
            font-weight: 800;
            font-size: 2.2rem;
            line-height: 1;
            color: white; 
            background: none;
            -webkit-text-fill-color: white;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
        }

        .logo-group:hover .icon-default {
            opacity: 0;
            transform: scale(0.5);
        }

        .logo-group:hover .icon-hover {
            opacity: 1;
            transform: scale(1);
        }

        /* Çevir Butonu Stili */
        .translate-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            margin-top: 1rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            background: linear-gradient(135deg, var(--glow-color), var(--glow-color-secondary));
            border: 1px solid var(--glow-color);
            box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.5), inset 0 0 10px rgba(255, 255, 255, 0.1); 
            width: 100%;
            max-width: 300px;
            position: relative; 
            overflow: hidden;
            z-index: 50; 
        }
        
        .translate-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 
                0 0 15px rgba(var(--glow-rgb), 1), 
                0 0 30px rgba(var(--glow-rgb), 0.8), 
                inset 0 0 20px rgba(255, 255, 255, 0.3);
            animation: speed-pulse 0.3s infinite alternate; 
        }

        .translate-button:hover:not(:disabled)::after {
            content: none;
        }
        
        .translate-button:hover:not(:disabled) > i, 
        .translate-button:hover:not(:disabled) > span {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
            transition: text-shadow 0.1s;
        }

        .translate-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
            animation: none;
        }
        .translate-button > i, .translate-button > span {
            position: relative;
            z-index: 60;
        }


        :root { 
            --glow-color: #ef4444;
            --glow-rgb: 239, 68, 68; 
            --glow-color-secondary: #f87171;
            --source-glow-color: #0c4a6e;
            --source-glow-color-secondary: #38bdf8;
            --source-glow-rgb: 12, 74, 110;
            --box-bg: rgba(15, 23, 42, 0.8);
            --border-color: rgba(255, 255, 255, 0.08);
        }
        #lang-menu { transition: all 0.2s ease-in-out; transform-origin: top right; } 
        #lang-menu.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; } 
        #lang-menu:not(.hidden) { opacity: 1; transform: scale(1); pointer-events: auto; }
        
        .ambient-light { 
            display: none !important;
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
            width: 80vw; height: 80vh; 
            background: radial-gradient(circle, var(--glow-color), transparent 70%); 
            opacity: 0.1; z-index: -1; filter: blur(80px); 
        }
        
        .card { 
            background-color: var(--box-bg); backdrop-filter: blur(24px); 
            border: 1px solid var(--border-color); 
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 20px 50px -20px var(--glow-color); 
            transition: box-shadow 0.6s ease; 
            position: relative; 
            z-index: 30; 
        }
        .custom-dropdown { position: relative; cursor: pointer; user-select: none; z-index: 50; } 
        
        .dropdown-trigger { 
            display: flex; align-items: center; justify-content: center; gap: 0.5rem; 
            padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.05); 
            border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; 
            transition: all 0.3s ease; min-width: 150px; 
        } 
        
        .dropdown-trigger:hover { 
            background: rgba(255, 255, 255, 0.1); 
            border-color: var(--glow-color); 
        } 
        
        .dropdown-menu { 
            position: absolute; top: 120%; left: 0; width: 220px; max-height: 320px; overflow-y: auto; 
            background-color: #0f172a; border: 1px solid rgba(255, 255, 255, 0.15); 
            border-radius: 1.5rem; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8); 
            opacity: 0; visibility: hidden; transform: translateY(-10px); 
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; 
        } 
        
        .dropdown-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-item { 
            display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: #94a3b8; 
            cursor: pointer; transition: all 0.2s ease; border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
            width: 100%; box-sizing: border-box; 
        } 
        
        .dropdown-item:last-child { border-bottom: none; } 
        
        .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.08); color: white; }

        .textarea-box {
            position: relative;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 1rem;
            height: 300px;
            overflow: hidden;
            transition: border-color 0.3s ease, box-shadow 0.3s ease; 
        }
        
        .source-textarea {
            padding-bottom: 2.5rem; 
        }
        
        .source-textarea:focus-within {
             border-color: var(--source-glow-color);
             box-shadow: 0 0 15px rgba(var(--source-glow-rgb), 0.5);
        }

        .target-textarea {
            color: var(--glow-color); 
            padding-bottom: 2.5rem;
        }

        textarea {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            outline: none;
            resize: none; 
            font-size: 1.1rem;
            line-height: 1.6;
            color: #e2e8f0;
            padding: 0;
            margin: 0;
            font-weight: 400; 
        }
        
        .target-textarea textarea {
            font-weight: 400; 
        }
        
        .swap-btn { 
            background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.15); 
            color: var(--glow-color); 
            padding: 0.75rem; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 60;
            margin: 0 auto; 
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(90deg); 
        }
        .swap-btn:hover { 
            background: var(--glow-color); 
            color: white; box-shadow: 0 0 20px var(--glow-color);
            transform: rotate(90deg) scale(1.1);
        }

        .api-status { 
            font-size: 0.7rem; color: #64748b; 
            margin-top: 5px; text-transform: uppercase; 
            letter-spacing: 1px; font-weight: bold;
        } 
        
        .api-status.live { color: #10b981; } 
        .api-status.error { color: #ef4444; }

        @media (min-width: 768px) {
            .swap-btn {
                position: absolute; 
                top: 50%; 
                left: 50%; 
                transform: translate(-50%, -50%);
                margin: 0; 
                transform: rotate(0deg) translate(-50%, -50%); 
            }
            .swap-btn:hover {
                transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
            }
        }
        .seo-link-card { 
            background: rgba(255, 255, 255, 0.01); 
            border: 1px solid rgba(255, 255, 255, 0.05); 
            padding: 0.6rem 0.5rem; 
            border-radius: 12px; 
            text-align: center; 
            text-decoration: none; 
            color: #94a3b8; 
            font-size: 0.9rem; 
            transition: all 0.3s ease; 
            cursor: pointer; 
        } 
        
        .seo-link-card:hover { 
            background: rgba(255, 255, 255, 0.08); 
            color: white; 
            border-color: var(--glow-color); 
            transform: translateY(-2px); 
        }
        .tab-button {
            padding: 0.5rem 0.75rem; 
            border-radius: 999px; 
            font-size: 0.75rem; 
            font-weight: 600;
            color: #94a3b8; 
            background-color: rgba(255, 255, 255, 0.03);
            transition: all 0.3s ease; 
            cursor: pointer; 
            border: 1px solid transparent;
            white-space: nowrap;
        }
        .tab-button:hover { 
            background-color: rgba(255, 255, 255, 0.08); 
            color: white; 
        }
        .tab-button.active {
            color: white; 
            background: linear-gradient(135deg, var(--glow-color), var(--glow-color-secondary)); 
            border-color: var(--glow-color-secondary); 
            box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.5), 0 0 20px rgba(var(--glow-rgb), 0.3);
        }
        
        #translation-tabs {
            max-height: none; 
            overflow-y: visible;
            position: relative; 
            overflow: hidden;
            padding: 1rem;
        }

        /* DÜNYA HARİTASI ARKA PLANI */
        .world-map-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%; 
            height: 300%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
            perspective: 1000px; 
        }
        
        .world-map-bg::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%; 
            height: 100%;
            border-radius: 50%;
            border: 1px solid rgba(var(--glow-rgb), 0.3); 
            box-shadow: 
                0 0 100px rgba(var(--glow-rgb), 0.2) inset, 
                0 0 50px rgba(var(--glow-rgb), 0.4); 

            transform: translate(-50%, -50%) rotateX(45deg); 
            
            animation: rotate-globe 40s linear infinite;
            opacity: 0.2;
        }

        @keyframes rotate-globe {
            0% { transform: translate(-50%, -50%) rotateX(45deg) rotateZ(0deg); }
            100% { transform: translate(-50%, -50%) rotateX(45deg) rotateZ(360deg); }
        }

        /* IŞIK SÜZÜLMELERİ */
        .light-pulse {
            position: absolute;
            width: 12px; height: 12px; 
            background: white; 
            border-radius: 50%;
            opacity: 0.6; 
            filter: blur(10px); 
            box-shadow: 0 0 15px var(--glow-color); 
            animation: pulse-lights 15s infinite alternate ease-in-out;
            z-index: 2;
        }

        .light-pulse:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
        .light-pulse:nth-child(2) { top: 80%; left: 70%; animation-delay: 3s; width: 15px; height: 15px; }
        .light-pulse:nth-child(3) { top: 40%; left: 50%; animation-delay: 7s; }

        @keyframes pulse-lights {
            0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
            50% { transform: translate(15px, -20px) scale(1.3); opacity: 0.8; } 
            100% { transform: translate(10px, 15px) scale(1); opacity: 0.6; }
        }

        @keyframes spin-grow {
            0% { transform: rotate(0deg) scale(1); }
            100% { transform: rotate(360deg) scale(1.2); }
        }
        .logo-speed-animation #default-logo-icon {
            animation: spin-grow 0.3s infinite linear;
            filter: drop-shadow(0 0 10px var(--glow-color));
            opacity: 1 !important; 
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 15px rgba(var(--glow-rgb), 0.3), 0 0 0px var(--glow-color); }
            50% { box-shadow: 0 0 25px rgba(var(--glow-rgb), 0.6), 0 0 10px var(--glow-color); }
        }
        .target-textarea.pulse-glow {
            animation: pulse-glow 0.75s ease-in-out; 
        }
        
        @keyframes speed-pulse {
            0% { transform: scaleX(1) translateY(0); }
            55% { transform: scaleX(1.01) translateY(-3px); }
            100% { transform: scaleX(1) translateY(-2px); }
        }

        #copy-button {
            position: absolute;
            bottom: 1rem; 
            right: 0.5rem; 
            padding: 0.5rem; 
            background-color: rgba(255, 255, 255, 0.05); 
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem; 
            color: #94a3b8;
            font-size: 0.875rem; 
            font-weight: 500;
            transition: all 0.2s ease;
            cursor: pointer;
            display: flex; 
            align-items: center;
            gap: 0.25rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 50; 
            pointer-events: auto;
        }

        #copy-button:hover {
            color: white;
            background-color: var(--glow-color); 
            border-color: var(--glow-color-secondary);
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 4px 10px rgba(var(--glow-rgb), 0.5);
        }

        #copy-button:hover > i, #copy-button:hover > span {
            color: white !important;
        }

        #copy-button > i {
            color: #94a3b8;
            transition: color 0.2s ease;
        }

        @media (max-width: 640px) {
            #copy-button > span {
                display: none;
            }
            #copy-button {
                padding: 0.75rem; 
                border-radius: 50%; 
                bottom: 1.25rem; 
                right: 0.75rem;
            }
        }
        
        @media (min-width: 641px) {
            #copy-button > span {
                display: inline;
            }
        }
        
        /* YENİ STİL: Bayrağı olmayan diller için kısa kod kutusu */
        .code-flag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.8rem;
            height: 1.4rem;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 800;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'Inter', sans-serif;
        }

        .ai-detect-icon-svg {
            color: var(--ai-primary-color, #06b6d4); 
            filter: drop-shadow(0 0 5px var(--ai-secondary-color, #22d3ee));
            animation: subtle-pulse 2s infinite ease-in-out;
            width: 1.5rem; 
            height: 1.5rem; 
            display: inline-block; 
        }
        
        .dropdown-item .ai-detect-icon-simple {
            font-size: 1.25rem;
            line-height: 1;
            color: #22d3ee; 
            filter: drop-shadow(0 0 3px #06b6d4);
        }

        @keyframes subtle-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.85; }
        }
        
        .star-burst {
            position: absolute; 
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden; 
            z-index: 55; 
        }
        
        /* Şarkı Sözleri Feed Stilleri */
        .lyrics-feed-card {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .lyrics-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
            text-decoration: none;
            color: #e2e8f0;
            transition: background-color 0.2s ease;
        }
        .lyrics-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 6px;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        .lyrics-item:last-child {
            border-bottom: none;
        }
        .song-title {
            font-weight: 600;
            color: white;
        }
        .artist-name {
            font-size: 0.8rem;
            color: #94a3b8;
        }
        .flag-pair { 
            display: flex; 
            align-items: center; 
            gap: 0.25rem; 
            flex-shrink-0; 
            min-width: 70px;
        }
        
        /* WIKI FEED STİLLERİ */
        .wiki-feed-card {
            background-color: rgba(15, 23, 42, 0.8); 
            border-radius: 1rem;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            height: 100%; 
        }
        .wiki-list-item {
            display: flex;
            flex-direction: column; 
            align-items: flex-start;
            padding: 0.75rem 0;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
            text-decoration: none;
            color: #94a3b8;
            transition: color 0.2s ease, transform 0.2s ease;
            position: relative;
            padding-left: 1.5rem; 
        }
        .wiki-list-item:hover {
            color: var(--glow-color); 
            transform: translateX(4px);
        }
        .wiki-list-item:last-child {
            border-bottom: none;
        }
        .wiki-item-icon {
            position: absolute;
            left: 0;
            top: 1rem; 
            opacity: 0.5;
            transition: opacity 0.2s ease;
        }
        .wiki-list-item:hover .wiki-item-icon {
             opacity: 1;
        }
        .wiki-title {
             font-weight: 600;
             color: white;
        }
        .wiki-summary {
             font-size: 0.75rem;
             color: #64748b; 
             max-height: 2.2em; 
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 2; 
             -webkit-box-orient: vertical;
             line-height: 1.1;
             margin-top: 0.25rem;
        }
        
        #logo-link, 
        #logo-link:focus, 
        #logo-link:focus-visible,
        #logo-main,
        #logo-main:focus,
        #logo-main:focus-visible,
        #logo-suffix,
        #logo-suffix:focus,
        #logo-suffix:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important; 
        }
    </style>