body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
    font-family: Arial, sans-serif; /* Yazı tipi */
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Arka plana almak için */
}

audio {
    display: none; /* Ses kontrolü için gizle */
}

.overlay-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Yarı saydam arka plan */
    color: white; /* Yazı rengi */
    display: flex;
    flex-direction: column; /* Dikey hizalama için */
    justify-content: center; /* Ortalamak için */
    align-items: center; /* Ortalamak için */
    font-size: 2em; /* Yazı boyutu */
    z-index: 3; /* Diğerlerinden üstte görünmesi için */
    transition: opacity 0.5s ease; /* Opaklık animasyonu */
}

.overlay-screen.hide {
    opacity: 0; /* Görünmez hale getir */
    pointer-events: none; /* Tıklanabilirliği devre dışı bırak */
}

#overlay-text {
    font-size: 1.5em; /* Yazı boyutunu küçült */
    transition: transform 0.5s ease; /* Büyütme animasyonu */
}

#overlay-subtext {
    font-size: 1.2em; /* Alt yazı boyutu */
    margin-top: 10px; /* Üstten boşluk */
    text-align: center; /* Ortala */
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Aşağıdan yukarı hareket */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animasyon geçişi */
}

.overlay-screen.visible #overlay-subtext {
    opacity: 1; /* Görünür hale getir */
    transform: translateY(0); /* Yukarı hareket */
}

.overlay {
    position: absolute; /* Değiştirildi */
    top: 50%; /* Ekranın ortası */
    left: 50%; /* Ekranın ortası */
    transform: translate(-50%, -50%); /* Ortalamak için */
    z-index: 1; /* Üstte görünmesi için */
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Dikey hizalama için */
    align-items: center; /* Ortalamak için */
    background: rgba(0, 0, 0, 0.7); /* Yarı saydam arka plan */
    border-radius: 10px; /* Kenarları yuvarlat */
}

.profile {
    width: 180px; /* Profilin genişliği */
    height: 180px; /* Profilin yüksekliği */
    border-radius: 50%; /* Yuvarlak görünüm */
    background: url('../imagesong/eds.png') no-repeat center center; /* Varsayılan profil resmi */
    background-size: cover; /* Resmi kapsama */
    margin-bottom: 20px; /* Yazı ile aralık için */
    transition: transform 0.3s, background 0.3s; /* Geçiş efekti */
    position: relative;
    z-index: 2; /* Üstte görünmesi için */
}

.profile:hover {
    transform: scale(1.1); /* Fare geldiğinde büyütme efekti */
    background: url('../imagesong/sssa.png') no-repeat center center; /* Üzerine gelindiğinde değişen profil resmi */
    background-size: cover; /* Resmi kapsama */
}



h1 {
    font-size: 2.5em; /* Başlık boyutu */
    margin: 10px 0; /* Üst ve alt boşluk */
    color: #FFFFFF; /* Başlık rengi (beyaz) */
    text-shadow: 4px 0 rgba(0, 0, 0, 0.7), -4px 0 rgba(0, 0, 0, 0.7); /* Gölge efekti uzatıldı */
}

p {
    font-size: 1.2em; /* Açıklama boyutu */
    margin: 0; /* Varsayılan margin'i kaldır */
    opacity: 0.9; /* Saydamlık */
    color: #FFFFFF; /* Açıklama rengi (beyaz) */
}

.corner-container {
    position: absolute;
    top: 20px; /* Üstten mesafe */
    right: 20px; /* Sağdan mesafe */
    display: flex;
    justify-content: center; /* Ortalamak için */
    align-items: center; /* Ortalamak için */
    width: 70px; /* Kapsayıcı div genişliği */
    height: 70px; /* Kapsayıcı div yüksekliği */
}

.corner-image {
    width: 70px; /* Küçültülen resim genişliği */
    height: 70px; /* Küçültülen resim yüksekliği */
    background: url('../imagesong/indirds.png') no-repeat center center; /* Resim URL'si */
    background-size: cover; /* Resmi kapsama */
    transition: transform 0.3s; /* Büyütme geçiş efekti */
    cursor: pointer; /* İmleci tıklanabilir göster */
    border-radius: 10%; /* Kenarları yuvarlat */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Gölge efekti */
}

.corner-image:hover {
    transform: scale(1.2); /* Fare geldiğinde büyütme efekti */
}

.transparent-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Yarı saydam arka plan */
    pointer-events: none; /* Tıklanabilirliği devre dışı bırak */
}