/* Genel Stil Resetleme ve Font */
/* --- YENİ: ÜST YATAY PANEL (HEADER) STİLLERİ --- */
#header-panel {
    width: 100%;
    background-color: #34495e; /* Koyu gri/mavi zemin */
    color: white;
    padding: 10px 0;
    text-align: center;
    border-bottom: 5px solid #2ecc71; /* Yeşil çizgi vurgusu */
    margin-bottom: 20px; /* Ana içerikle arasına boşluk */
    display: flex;
    justify-content: space-around; /* Elemanları yay */
    align-items: center;
}

.header-logo {
    font-size: 1.5em;
    font-weight: bold;
    padding: 5px 15px;
}

.header-ad {
    background-color: #e67e22; /* Turuncu reklam arka planı */
    color: white;
    padding: 10px 20px;
    font-size: 0.9em;
    border-radius: 4px;
    min-width: 728px; /* Standart yatay banner genişliği */
    max-height: 90px; /* Standart yatay banner yüksekliği */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Küçük Ekranlarda Yatay Reklamı Gizle */
@media (max-width: 1100px) {
    .header-ad {
        display: none; 
    }
    #header-panel {
        justify-content: center;
    }
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* --- ANA ÜÇ SÜTUNLU DÜZEN (Flexbox) --- */
#main-wrapper {
    display: flex; /* Flexbox'ı etkinleştir */
    justify-content: center; /* İçerikleri merkezler (reklamları da dahil) */
    width: 100%;
    min-height: 100vh;
    padding: 20px 0; /* Üstten alttan boşluk */
}

/* Reklam Sütunları (İnce, Sabit Genişlik) */
.ad-sidebar {
    width: 160px; /* İnce sütun genişliği (Standart geniş reklamlar 160px'dir) */
    margin: 0 15px; /* Ana içerikten boşluk bırakır */
    padding: 10px;
    background-color: #e9ecef; /* Hafif arka plan rengi */
    border-radius: 8px;
    text-align: center;
    font-size: 0.9em;
    color: #666;
    height: 600px; /* Reklam alanına sabit yükseklik ver */
    /* Reklam içeriği dikeyde ortalanabilir */
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl; /* Dikey yazı için (isteğe bağlı, kaldırılabilir) */
    text-orientation: upright;
}

/* Ana Uygulama İçeriği Sütunu */
.main-content {
    flex-grow: 0; /* Genişlemez */
    flex-shrink: 0; /* Daralmaz */
    width: 500px; /* Ana içeriğin sabit genişliği */
    max-width: 90%;
}

/* --- ANA İÇERİK KARTI (ORTA SÜTUN) --- */
.container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Başlık ve Diğer Elemanlar */
h1 { color: #333; margin-bottom: 25px; font-size: 1.8em; }
.error-message { color: #e74c3c; background-color: #fceae9; padding: 10px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e74c3c; }
input[type="file"] { display: block; width: 100%; padding: 10px; margin: 15px 0 20px 0; border: 2px dashed #bdc3c7; border-radius: 8px; background-color: #f8f8f8; cursor: pointer; text-align: left; }
label { display: block; margin-bottom: 20px; font-size: 1.1em; color: #555; cursor: pointer; }
button[type="submit"] { background-color: #3498db; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s ease; width: 100%; margin-top: 10px; }
button[type="submit"]:hover { background-color: #2980b9; }

/* Ekran Küçük Olduğunda Reklamları Gizle */
@media (max-width: 900px) {
    .ad-sidebar {
        display: none; /* Mobilde reklamları gizle */
    }
    .main-content {
        width: 100%;
        max-width: 600px;
    }
}

/* --- İLERLEME ÇUBUĞU STİLLERİ --- */

#progress-container {
    /* Başlangıçta gizli tut */
    display: none; 
    margin-top: 30px;
    padding: 20px;
    background-color: #ecf0f1;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.progress-bar {
    width: 100%;
    height: 25px;
    background-color: #bdc3c7;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar-fill {
    height: 100%;
    width: 90%; /* Statik olarak %90 dolu görünüm */
    background-color: #2ecc71; /* Yeşil renk */
    transition: width 0.4s ease;
    /* Hafif animasyon için ekleyebilirsiniz (opsiyonel) */
    animation: loading-animation 1.5s infinite alternate;
}

#progress-container p {
    color: #34495e;
    font-weight: bold;
    font-size: 1.1em;
}

@keyframes loading-animation {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}