/* ═══════════════════════════════════════════════════════════════
   BULLETPROOF OVERLAY SYSTEM - Heart Animation
   Dense vertical chimney stream - Works on ALL themes
   ═══════════════════════════════════════════════════════════════ */

.floating-heart {
    position: fixed !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    color: #ff4757 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    animation: bulletproofFloat 4s linear forwards !important;
    filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.8)) 
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    isolation: isolate !important;
}

.floating-star {
    position: fixed !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    color: #ffd700 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    animation: bulletproofFloat 4s linear forwards !important;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)) 
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    isolation: isolate !important;
}

@keyframes bulletproofFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -100vh, 0) scale(1.2);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE COUNTDOWN FIX V3 (CENTER ALIGNMENT MASTER)
   Başlık ve kutuları tam ortaya çiviler, kutuları büyütür.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 1. ANA BÖLÜMÜ ORTALA (Kapsayıcı) */
    .counter-section, 
    .counter-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Yatayda tam orta */
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 20px 0 !important;
        margin: 0 !important;
    }

    /* 2. SAYAÇ CONTAINER (Grid) */
    #countdown,
    .countdown-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Eşit Sütun */
        gap: 12px !important; /* Boşluğu biraz azalttım ki kutular büyüsün */
        width: 94% !important; /* Ekranın %94'ünü kapla (daha geniş) */
        max-width: 400px !important; /* Çok da devasa olmasın */
        margin: 0 auto !important; /* Kendini ortala */
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. KUTULAR (Time Box) */
    .time-box,
    .counter-box {
        width: 100% !important;
        height: auto !important;
        min-height: 110px !important; /* Yüksekliği biraz artırdım */
        margin: 0 !important;
        padding: 15px 5px !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        
        box-sizing: border-box !important;
        border-radius: 18px !important; /* Daha yumuşak köşeler */
        
        /* Eğer temanın kendi width/float ayarları varsa ez: */
        float: none !important;
        position: static !important;
    }
    
    /* 4. RAKAMLAR (Büyütüldü) */
    .time-box span, 
    .time-box .number {
        font-size: 2.6rem !important; /* Daha büyük rakamlar */
        line-height: 1 !important;
        margin-bottom: 8px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 5. YAZILAR (Gün/Saat) */
    .time-box p, 
    .time-box .label {
        font-size: 0.95rem !important; /* Biraz daha okunaklı */
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
        opacity: 0.95 !important;
        font-weight: 500 !important;
    }
    
    /* 6. BAŞLIK */
    .counter-section h2 {
        width: 90% !important;
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
        line-height: 1.3 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE VIDEO FIX (ALL THEMES)
   Video alanını ortalar ve boyutunu standartlaştırır.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 1. Video Bölümünü Ortala */
    .video-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 30px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Video Kartı (Wrapper) */
    .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 5px !important; /* Kenar boşluğunu azalttım ki video genişlesin (dolayısıyla uzasın) */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        
        /* Tema stillerini ezmek için */
        float: none !important;
        position: static !important;
    }
    
    /* 3. Başlık */
    .video-wrapper h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    /* 4. Video Oynatıcı (Local & YouTube) */
    .video-wrapper video,
    .video-wrapper iframe,
    .youtube-container {
        width: 100% !important;
        height: auto !important; 
        aspect-ratio: 16 / 9 !important; /* 16:9 oranını koru */
        max-height: 80vh !important; /* 300px sınırını kaldırdım, ekranın %80'ine kadar uzayabilir */
        
        margin: 0 auto !important;
        display: block !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    }
    
    /* YouTube container özel ayarı */
    .youtube-container iframe {
        position: static !important; /* Varsa absolute'u iptal et */
        height: 100% !important; /* Aspect ratio container'dan gelecek */
    }
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE MODE (Video Oynarken Devreye Girer)
   Video kasmasını önlemek için arka planı ve efektleri kapatır.
   ═══════════════════════════════════════════════════════════════ */
body.video-playing #particles-js {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
    pointer-events: none !important;
}

body.video-playing video,
body.video-playing iframe {
    filter: none !important; /* Sepia vb. ağır filtreleri kaldır */
    box-shadow: none !important; /* Gölgeleri kaldır (render yükünü azalt) */
    transform: none !important;
}

body.video-playing .video-wrapper {
    /* Wrapper üzerindeki efektleri de hafiflet */
    transform: none !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP VIDEO STANDARD (ALL THEMES)
   Masaüstü görünümde tüm temalarda video boyutunu eşitler.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* Video Kapsayıcısı */
    .video-section .glass-card, 
    .video-wrapper {
        width: 100% !important;
        max-width: 800px !important; /* Standart: 800px genişlik */
        margin: 0 auto !important;     /* Ortala */
        padding: 30px !important;      /* İç boşluk */
        box-sizing: border-box !important;
        
        /* Temalardan gelen farklı hizalamaları sıfırla */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Video Player (Dosya ve YouTube) */
    .video-wrapper video,
    .youtube-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important; /* Sinema oranı */
        box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
        border-radius: 15px !important;
        max-height: 70vh !important; /* Dikeyde ekranı taşmasın */
    }

    /* YouTube Iframe Düzeltmesi */
    .youtube-container iframe {
        width: 100% !important;
        height: 100% !important;
        border-radius: 15px !important;
    }
    
    /* Başlık */
    .video-wrapper h2 {
        font-size: 2.2rem !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: REDUCED MOTION SUPPORT
   Windows animasyon ayarları kapalı olan kullanıcılar için
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Tüm AOS animasyonlarını devre dışı bırak */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Kalp animasyonlarını basitleştir */
    .floating-heart,
    .floating-star {
        animation: none !important;
        opacity: 0.8 !important;
    }
    
    /* Diğer animasyonları da devre dışı bırak */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}