/* --- PREMIUM KARANLIK TEMA (Varsayılan) --- */
/* :root seçicisi, tüm sayfaya etki eden global CSS değişkenlerini tanımlar. 
   Sayfa ilk açıldığında varsayılan olarak bu koyu renkler geçerlidir. */
:root {
    --bg-color: #000000;          /* Tam siyah arkaplan */
    --surface-color: #0a0a0a;     /* Kartlar ve kutular için bir tık daha açık siyah */
    --border-color: #222222;      /* İnce ve zarif kenarlık rengi */
    --text-primary: #ededed;      /* Göz yormayan, tam beyaz olmayan ana metin */
    --text-secondary: #888888;    /* Açıklamalar ve alt metinler için gri */
    --accent-color: #ffffff;      /* Vurgu rengi (Buton arkaplanı vb.) */
    --accent-text: #000000;       /* Vurgu üzerindeki metin rengi (Beyaz butonda siyah yazı) */
    --hover-bg: #141414;          /* Üzerine gelindiğinde (hover) belirecek arkaplan */
}

/* --- PREMIUM AÇIK TEMA --- */
/* JavaScript (theme.js) body etiketine 'light-theme' sınıfını eklediğinde,
   yukarıdaki değişkenlerin değerleri aşağıdaki açık renklerle ezilir (override). */
body.light-theme {
    --bg-color: #fafafa;
    --surface-color: #ffffff;
    --border-color: #eaeaea;
    --text-primary: #111111;
    --text-secondary: #666666;
    --accent-color: #000000;      
    --accent-text: #ffffff;       
    --hover-bg: #f5f5f5;
}

/* --- TİPOGRAFİ VE TEMEL AYARLAR --- */
/* Tüm elementlerde genişlik hesaplamalarına padding ve border'ı dahil eder. Düzen kaymalarını önler. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* İşletim sisteminin varsayılan, en okunaklı fontlarını sırasıyla dener (Apple cihazlarda San Francisco, Windows'ta Segoe UI) */
    font-family: "Helvetica Neue", Helvetica, "Segoe UI", -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* Mac'lerde fontların daha pürüzsüz ve ince görünmesini sağlar */
    -moz-osx-font-smoothing: grayscale;
    
    background-color: var(--bg-color);
    color: var(--text-primary);
    
    /* İçerik kısa olsa bile sayfanın tüm ekranı kaplaması ve footer'ın en alta yapışması için Flexbox yapısı */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    
    /* Tema değiştirildiğinde renklerin pat diye değil, 0.3 saniyede yumuşakça geçmesini sağlar */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- ÜST MENÜ --- */
.top-nav {
    position: fixed; /* Ekranı kaydırınca menü üstte sabit kalır */
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between; /* Logo sola, menü sağa yaslanır */
    align-items: center;
    
    background-color: rgba(var(--bg-color), 0.8); /* Arkaplan %80 saydam */
    backdrop-filter: blur(10px); /* Apple tarzı cam efekti (Glassmorphism). Arkasından geçen yazıları bulanıklaştırır */
    -webkit-backdrop-filter: blur(10px); /* Safari uyumluluğu */
    
    border-bottom: 1px solid var(--border-color);
    z-index: 100; /* Menünün her zaman diğer elemanların üstünde kalmasını garanti eder */
}

.top-nav .logo {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.02em; /* Premium hissiyat için harf aralığını çok hafif daraltır */
}

/* Üst Menü Sağ Taraf ve Lato Client Rozeti */
.nav-right {
    display: flex;
    align-items: center;
    gap: 24px; /* Elemanlar arası sabit boşluk */
}

.client-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

/* Yanıp sönen yeşil nokta animasyonu */
.blinking-dot {
    width: 8px;
    height: 8px;
    background-color: #32d74b;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(50, 215, 75, 0.7);
    animation: pulse 2s infinite; /* 'pulse' animasyonunu sonsuz döngüde çalıştırır */
}

/* Pulse animasyonunun kuralları: Büyür, etrafına gölge yayar ve küçülür */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(50, 215, 75, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(50, 215, 75, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(50, 215, 75, 0); }
}

/* Tema Kaydırma Butonu (İOS tarzı switch/toggle) */
.toggle-btn {
    width: 44px;
    height: 24px;
    background-color: var(--border-color);
    border-radius: 24px;
    border: none;
    cursor: pointer;
    position: relative; /* İçindeki yuvarlağın hareket edebilmesi için gerekli */
    padding: 0;
    transition: background-color 0.3s ease;
}

/* İçindeki hareketli yuvarlak */
.toggle-circle {
    width: 20px;
    height: 20px;
    background-color: var(--text-primary);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    /* İvmeli ve gerçekçi bir kayma animasyonu (cubic-bezier) */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Açık tema aktifken, yuvarlağı X ekseninde 20px sağa kaydır */
body.light-theme .toggle-circle {
    transform: translateX(20px);
}

/* --- ANA KUTU (CONTAINER) --- */
.container {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 48px;
    width: 100%;
    max-width: 540px; /* İçeriğin çok genişleyip okunabilirliği bozmasını engeller */
    text-align: center;
    margin-top: 120px; /* Sabit üst menünün (top-nav) altında kalmaması için itme */
    margin-bottom: 60px;
    flex: 1 0 auto; /* İçerik kısayken kutunun esnemesini ve footer'ı aşağı itmesini sağlar */
}

header h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

/* Kilit İkonu ve Gizlilik Metni */
.privacy-badge {
    display: flex;
    flex-direction: column; /* İkonu her zaman yazının üstüne alır */
    align-items: center;    /* İkonu ve taşıyıcıyı tam merkeze hizalar */
    justify-content: center;
    gap: 10px;              /* İkon ile yazı arasına zarif bir boşluk bırakır */
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 10px;
    margin-bottom: 24px;
    padding: 0 15px;
    line-height: 1.4;
}

.privacy-badge span {
    text-align: center;     
    max-width: 400px;       /* Geniş ekranlarda yazının tek ve çirkin bir uzun satır olmasını engeller */
}

.privacy-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0; /* İkonun ezilmesini (küçülmesini) engeller */
}

/* --- SÜRÜKLE BIRAK ALANI --- */
.drop-zone {
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 60px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 24px;
    background-color: transparent;
}

/* Dosya sürüklendiğinde veya mouse üzerine geldiğinde sınır rengi değişir */
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--text-secondary);
    background-color: var(--hover-bg);
}

.upload-icon {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    stroke-width: 1.5;
}

.drop-text {
    display: block;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- KONTROL PANELİ --- */
/* JS tarafından elemanları görünmez yapmak için kullanılan genel sınıf */
.hidden {
    display: none !important;
}

#file-name {
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.slider-container {
    margin-bottom: 32px;
    text-align: left;
}

.slider-container label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

#quality-label {
    font-weight: 600;
    color: var(--text-primary);
}

/* Kaydırma çubuğunun (slider) rengini temaya göre otomatik ayarlar */
input[type="range"] {
    width: 100%;
    accent-color: var(--text-primary); 
}

.slider-marks {
    display: flex;
    justify-content: space-between; /* Etiketleri sağa, sola ve ortaya eşit dağıtır */
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- BUTONLAR --- */
/* Ana işlem butonu (Comprimi e Scarica) */
.primary-btn {
    background-color: var(--accent-color);
    color: var(--accent-text);
    border: none;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

.primary-btn:hover {
    opacity: 0.9;
}

/* Butona tıklandığı an fiziksel basılma hissi vermek için boyutu %2 küçültür */
.primary-btn:active {
    transform: scale(0.98); 
}

/* Buton inaktif (disabled) olduğunda */
.primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* İkincil Buton (Cambia PDF vb.) */
.secondary-btn {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    margin-top: 24px;
    transition: all 0.2s ease;
}

.secondary-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--text-secondary);
}

/* --- DURUM MESAJLARI (PREMIUM MONOKROM) --- */
/* Çok renkli (kırmızı/yeşil) hatalar yerine profesyonel siyah/beyaz/gri mesajlar */
.status-message {
    margin-top: 24px;
    font-size: 0.9rem;
    font-weight: 400; 
    min-height: 20px;
    letter-spacing: 0;
    color: var(--text-primary); 
    opacity: 0.7; 
    transition: opacity 0.3s ease;
}

.status-message.success, 
.status-message.error {
    color: var(--text-primary);
}

/* --- FOOTER (SAYFA ALTI) --- */
.site-footer {
    width: 100%;
    padding: 24px 40px;
    display: flex;
    justify-content: space-between; /* Telif sola, linkler sağa */
    align-items: center;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0; /* İçerik uzasa bile footer'ın ezilmesini engeller */
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* --- MOBİL UYUM (RESPONSIVE) --- */
/* Ekran genişliği 768px'den küçük olduğunda (Tablet ve Telefonlar) devreye girer */
@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 40px 24px; /* Mobilde iç boşlukları daraltır */
    }
    .top-nav {
        padding: 16px 24px;
    }
    .site-footer {
        flex-direction: column; /* Linkleri ve telifi yan yana değil alt alta dizer */
        gap: 16px;
        text-align: center;
        padding: 24px;
    }
    .footer-links {
        flex-wrap: wrap; /* Çok fazla link varsa alt satıra taşmasını sağlar */
        justify-content: center;
        gap: 16px;
    }
}

/* --- ALT SAYFALAR: GERİ DÖN LİNKİ --- */
.back-link {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: var(--text-primary);
}

/* --- ANA SAYFA: KO-FI DESTEK ALANI --- */
.kofi-support-home {
    text-align: center;
    margin-top: -10px; /* Ana kutunun altındaki varsayılan büyük boşluğu kapatmak için yukarı çeker */
    margin-bottom: 40px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.kofi-support-home p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 400px;
    line-height: 1.5;
}

/* Ko-fi Butonu (Dinamik Siyah/Beyaz Tema) */
.kofi-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Temaya göre zıt renkleri kullanır: Koyu temada beyaz buton, açık temada siyah buton */
    background-color: var(--text-primary); 
    color: var(--bg-color) !important; 
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.2s ease, transform 0.1s ease;
    border: 1px solid var(--text-primary);
}

.kofi-btn:hover {
    opacity: 0.85; /* Sadece hafifçe matlaşarak premium bir his verir */
}

.kofi-btn:active {
    transform: scale(0.98); /* Tıklama hissiyatı */
}

.kofi-btn svg {
    width: 18px;
    height: 18px;
}

/* --- BELGE TÜRÜ SEÇİCİ (SEGMENTED CONTROL - iOS Tarzı Butonlar) --- */
.mode-container {
    margin-bottom: 24px;
    text-align: left;
}

.mode-container > label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.segmented-control {
    display: flex;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden; /* Kenarlardan taşan label arka planlarını yuvarlatır */
}

/* Asıl radyo butonlarını gizleriz, çünkü biz "label"ları (yazıları) tıklanabilir buton olarak tasarlıyoruz */
.segmented-control input {
    display: none;
}

.segmented-control label {
    flex: 1; /* İki seçeneği (Testo ve Immagini) %50 / %50 eşit genişlikte böler */
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    margin-bottom: 0 !important;
}

/* Sihirli Kısım: Eğer gizli input "checked" (seçili) ise, hemen yanındaki (+) label'ın stilini değiştir! */
.segmented-control input:checked + label {
    background-color: var(--text-primary);
    color: var(--bg-color); /* Koyu temada beyaz arka plan, siyah yazı yapar */
}

/* Bilgilendirme Metni */
.mode-hint {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* --- NETSONS REKLAM ALANI --- */
.ad-container {
    width: 100%;
    max-width: 768px; /* 728px iframe genişliği + kenar boşlukları için yeterli alan */
    
    /* Header (top-nav) fixed yani havada uçtuğu için, reklamın onun altında kalmaması adına üstten boşluk bırakıyoruz */
    margin-top: 90px !important; 
    margin-bottom: 0 !important;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.ad-wrapper {
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    
    /* Mobilde 728px'lik iframe ekranı sağa doğru patlatmasın diye overflow-x: auto ekliyoruz. 
       Böylece mobil kullanıcı reklam alanını parmağıyla sağa sola kaydırabilir. */
    overflow-x: auto; 
    
    /* Premium görünümü bozmamak için kaydırma çubuğunu (scrollbar) gizliyoruz */
    scrollbar-width: none;     /* Firefox için */
    -ms-overflow-style: none;  /* IE ve Edge için */
}

/* Chrome, Safari ve Opera için scrollbar gizleme */
.ad-wrapper::-webkit-scrollbar {
    display: none; 
}

/* Bitişik Kardeş Seçici (+): 
   Eğer ad-container elementi boş değilse (yani Netsons iframe'i yüklenmişse), 
   hemen ardından gelen 'main.container' elementinin üst boşluğunu (margin-top) 24px'e düşür. 
   Böylece reklam ile ana kutu arasındaki boşluk dengelenmiş olur. */
.ad-container:not(:empty) + main.container {
    margin-top: 24px !important; 
}