:root {
    --primary-color: #ff0055;
    --secondary-color: #1e1e2f;
    --background-color: #14141e;
    --text-color: #ffffff;
    --card-color: #2a2a3e;
    --border-radius: 12px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 700px;
    text-align: center;
    padding: 2rem;
}

header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    opacity: 0.8;
}

.downloader-box {
    display: flex;
    margin-top: 2rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#videoUrl {
    flex-grow: 1;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    background-color: var(--card-color);
    color: var(--text-color);
    outline: none;
}

#downloadBtn {
    border: none;
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#downloadBtn:hover {
    background-color: #d60045;
}

#result {
    margin-top: 2rem;
    background-color: var(--card-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    transition: all 0.3s ease;
}

.hidden { display: none !important; }

.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    color: #ff5555;
    font-weight: 500;
}

.video-info img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.video-info h3 {
    margin: 0 0 1.5rem 0;
}

.formats-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary-color);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.formats-list a:hover {
    transform: translateY(-3px);
    background-color: var(--primary-color);
}

.formats-list .format-label {
    font-weight: 500;
}

.formats-list .format-icon {
    font-size: 1.2rem;
}```

**3. Ana Sayfa JavaScript (`static/js/main.js`)**

Bu dosya, backend ile iletişime geçer ve indirme linklerini dinamik olarak sayfada gösterir.

`/var/www/ttube/static/js/main.js`
```javascript
document.addEventListener('DOMContentLoaded', () => {
    const downloadBtn = document.getElementById('downloadBtn');
    const videoUrlInput = document.getElementById('videoUrl');
    const resultDiv = document.getElementById('result');
    const loader = document.getElementById('loader');
    const errorDiv = document.getElementById('error');
    const videoInfoDiv = document.getElementById('videoInfo');
    const thumbnailImg = document.getElementById('thumbnail');
    const videoTitleH3 = document.getElementById('videoTitle');
    const formatsDiv = document.getElementById('formats');

    downloadBtn.addEventListener('click', fetchVideoInfo);
    videoUrlInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            fetchVideoInfo();
        }
    });

    async function fetchVideoInfo() {
        const url = videoUrlInput.value.trim();
        if (!url) {
            showError('Lütfen bir video linki girin.');
            return;
        }

        // Reset UI
        resultDiv.classList.remove('hidden');
        videoInfoDiv.classList.add('hidden');
        errorDiv.classList.add('hidden');
        loader.classList.remove('hidden');

        try {
            const response = await fetch('/api/get_links', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ url: url }),
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || 'Bilinmeyen bir hata oluştu.');
            }

            displayResults(data);

        } catch (err) {
            showError(err.message);
        } finally {
            loader.classList.add('hidden');
        }
    }

    function showError(message) {
        errorDiv.textContent = message;
        errorDiv.classList.remove('hidden');
        videoInfoDiv.classList.add('hidden');
        resultDiv.classList.remove('hidden');
    }

    function displayResults(data) {
        thumbnailImg.src = data.thumbnail;
        videoTitleH3.textContent = data.title;
        formatsDiv.innerHTML = '';

        if (data.formats && data.formats.length > 0) {
            data.formats.forEach(format => {
                const link = document.createElement('a');
                link.href = format.url;
                link.setAttribute('download', ''); // Bu satır dosyanın direkt indirilmesini sağlar
                
                // İndirme işlemini loglamak için event listener ekle
                link.addEventListener('click', () => {
                    logDownload(data.original_url, data.title);
                });

                const label = document.createElement('span');
                label.className = 'format-label';
                label.textContent = format.label;

                const icon = document.createElement('span');
                icon.className = 'format-icon';
                // FontAwesome gibi bir kütüphane kullanırsanız daha güzel ikonlar ekleyebilirsiniz
                icon.innerHTML = format.has_audio ? '🔊' : '🔇';

                link.appendChild(label);
                link.appendChild(icon);
                formatsDiv.appendChild(link);
            });
        } else {
            showError('Bu video için indirilebilir format bulunamadı.');
            return;
        }

        videoInfoDiv.classList.remove('hidden');
        errorDiv.classList.add('hidden');
    }

    async function logDownload(videoUrl, videoTitle) {
        try {
            await fetch('/api/log_download', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ video_url: videoUrl, video_title: videoTitle })
            });
        } catch (error) {
            console.error("İndirme loglanamadı:", error);
        }
    }
});
/* --- YENİ EKLENEN STİLLER --- */

/* Sekmeler */
.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--secondary-color);
}
.tab-link {
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.6;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: opacity 0.3s ease;
}
.tab-link.active {
    opacity: 1;
}
.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

/* Sekme İçerikleri */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* Format Tablosu */
.formats-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.formats-table th {
    padding: 0.8rem 1rem;
    font-weight: 600;
    opacity: 0.7;
}
.formats-table td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
}
.formats-table tbody tr {
    border-top: 1px solid var(--secondary-color);
}
.formats-table .format-label {
    font-weight: 500;
}
.formats-table .has-no-audio {
    opacity: 0.6;
    font-size: 0.8rem;
    margin-left: 8px;
}
.formats-table .filesize {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* İndirme Butonu (Tablo İçi) */
.download-btn-table {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.3s ease;
    min-width: 100px; /* Butonların aynı genişlikte olması için */
}
.download-btn-table:hover {
    background-color: #d60045;
}