/* Arka Plan Videosu için CSS */

.video-bg-container {
    position: relative;
    overflow: hidden;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Arka planda kalır */
    filter: brightness(0.5); /* Videoyu biraz karartır */
    transition: opacity 1s, filter 1s; /* Geçiş efekti için süre */
}

/* Geçiş Efekti */
.video-bg.fade-out {
    opacity: 0; /* Yavaşça kaybolur */
    filter: brightness(0); /* Karartılır */
}

.video-content {
    position: relative;
    z-index: 1; /* İçerik videonun üstünde olur */
}

#videos{

    background: rgba(0, 0, 0, 10); /* Transparent overlay for content readability */
    
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#videofooter{

    background: rgba(0, 0, 0, 10); /* Transparent overlay for content readability */
    
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}

/* Yuvarlak buton stili */
.mute-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 20px;
    transition: background-color 0.3s, color 0.3s;
}

/* Buton aktifken stil */
.mute-button:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
}