/* Genel Stil Resetleme ve Temel Ayarlar */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #f0f4f8 0%, #d8e2ed 100%); /* Hafif degrade arka plan */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px; /* Daha yuvarlak köşeler */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Daha belirgin gölge */
    width: 100%;
    max-width: 850px; /* Daha geniş bir konteyner */
    text-align: center;
    position: relative;
    overflow: hidden; /* Taşmaları engelle */
}

/* Küçük bir arka plan deseni veya illüzyon */
.container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background-color: rgba(100, 181, 246, 0.1); /* Açık mavi */
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
}

.container::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 160, 0, 0.1); /* Açık turuncu */
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
}

h2 {
	font-family: 'Anton';
    font-weight: 400;
}
	
h1 {
    color: #2c3e50;
    margin-bottom: 25px;
    position: relative;
    z-index: 1; 
    
    font-family: 'Anton';
    font-weight: 400;
    font-size: 5rem;
}

.video-player {
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

video {
    width: 100%;
    display: block;
}

.navigation-controls {
    display: flex;
    justify-content: center; /* Ortaya hizala */
    align-items: center;
    gap: 20px; /* Butonlar ve sayaç arası boşluk */
    margin-top: 15px; /* Video ile kontroller arası boşluk */
    position: relative;
    z-index: 1;
}

.nav-btn {
    background-color: #4CAF50; /* Yeşil ton */
    color: white;
    border: none;
    padding: 15px 20px; /* Buton padding'i */
    border-radius: 8px; /* Daha yuvarlak butonlar */
    font-size: 1.2rem; /* İkon boyutu */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex; /* İkonu ortalamak için */
    justify-content: center;
    align-items: center;
    min-width: 60px; /* Butonların minimum genişliği */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover {
    background-color: #43A047; /* Daha koyu yeşil */
    transform: translateY(-2px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.nav-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nav-btn i {
    font-size: 1.2em; /* İkonun buton boyutuna göre ayarı */
}

#video-counter {
    font-size: 1.1rem; /* Sayaç metin boyutu */
    font-weight: 600;
    color: #555;
    margin: 0;
    min-width: 100px; /* Sayacın sabit genişliği */
}

/* ... (Mevcut stilleriniz) ... */


/* ------------------------------------ */
/* --- UTKU PHOTO                   --- */
/* ------------------------------------ */

.birthday-photo-container {
    /* Müzik çaları ayırdığımız gibi ince bir çizgi ekliyoruz */
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid #eee;
    
    /* Yazıyı üzerine bindirmek için 'relative' şart */
    position: relative; 
    
    /* Tasarımla uyumlu olması için kenarları yuvarla */
    border-radius: 10px;
    overflow: hidden; /* Taşmaları engelle ve köşeleri uygula */
    
    /* Gölge (Video oynatıcıyla aynı) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.birthday-photo {
    width: 100%;       /* Konteynerin tamamını kapla (responsive) */
    display: block;    /* Resim altındaki gereksiz boşluğu kaldır */
    filter: brightness(0.8); /* Yazının daha iyi okunması için resmi hafif karart */
}

.photo-message {
    /* Yazıyı resmin üzerine bindir */
    position: absolute;
    bottom: 20px; /* Alttan 20px yukarıda */
    left: 50%;
    transform: translateX(-50%); /* Tam olarak yatayda ortala */
    
    /* Başlıkta kullandığımız aynı güzel font */
    font-family: 'Pacifico', cursive;
    font-size: 2.5rem; /* (40px) */
    color: white;
    
    /* Yazının her fotoğrafta okunabilmesi için gölge */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    
    /* Taşmaları engelle */
    width: 90%;
    text-align: center;
}

/* ------------------------------------ */
/* --- UTKU PLAYER                  --- */
/* ------------------------------------ */

.utku-container {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #eee; /* Video oynatıcıdan ayırmak için ince bir çizgi */
    position: relative;
    z-index: 1;
}

/* ------------------------------------ */
/* --- DUMAN PLAYER                 --- */
/* ------------------------------------ */

.music-player-container {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #eee; /* Video oynatıcıdan ayırmak için ince bir çizgi */
    position: relative;
    z-index: 1;
}

.music-player-container h2 {
    font-family: 'Anton', Roboto, sans-serif; /* Başlık fontunu sıfırla */
    font-size: 3rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px;
}

.music-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* YouTube oynatıcısını gizle, çünkü sadece sesini istiyoruz */
#youtube-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    visibility: hidden;
}

/* Müzik butonlarına farklı bir renk verelim */
.music-btn {
    background-color: #8e44ad; /* Mor bir ton */
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3);
}

.music-btn:hover {
    background-color: #9b59b6; /* Daha açık mor */
    box-shadow: 0 6px 15px rgba(142, 68, 173, 0.4);
}

.music-btn:active {
    box-shadow: 0 2px 5px rgba(142, 68, 173, 0.3);
}

/* Oynat/Durdur butonu ortada daha büyük olabilir (Opsiyonel) */
#play-pause-song {
    transform: scale(1.1);
}
#play-pause-song:hover {
    transform: scale(1.15) translateY(-2px);
}
#play-pause-song:active {
    transform: scale(1.05);
}

/* ------------------------------------ */
/* --- MOBİL UYUMLULUK KODLARI      --- */
/* ------------------------------------ */

@media (max-width: 768px) { /* Tabletler ve telefonlar için */
    body {
        padding: 15px;
        min-height: auto;
    }

    .container {
        padding: 25px 20px;
        border-radius: 12px;
    }

    h1 {
        font-size: 2rem; /* Telefondaki başlığı biraz daha küçült */
        margin-bottom: 20px;
    }

    .nav-btn {
        padding: 12px 18px;
        font-size: 1rem;
        min-width: 50px;
    }

    .nav-btn i {
        font-size: 1em;
    }

    #video-counter {
        font-size: 1rem;
        min-width: 80px;
    }
	
    .music-player-container h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) { /* Küçük telefonlar için daha fazla optimizasyon */
    .container {
        padding: 20px 15px;
    }

    h1 {
        font-size: 3rem; /* Daha küçük telefonlarda başlık */
        /* Gerekirse yazı tipi fontunu da küçültebiliriz */
        /* font-size: 2.4rem; */
    }

    /* Navigasyon kontrollerini yatay tutmak için
      flex-direction: column; satırını kaldırdık.
      'space-between' ile butonları iki yana yaslıyoruz.
    */
    .navigation-controls {
        justify-content: space-between; /* Kenarlara yasla */
        gap: 10px; /* Öğeler arası minimum boşluk */
    }

    /* Butonların 100% genişlik kaplamasını engelliyoruz
      ve sığabilmeleri için iç boşluklarını (padding) azaltıyoruz.
    */
    .nav-btn {
        padding: 12px 14px; /* Buton iç boşluğunu azalt */
        font-size: 1rem;
        min-width: 45px; /* Butonun minimum genişliğini azalt */
    }
    
    .nav-btn i {
        font-size: 1em;
    }

    /* Sayacın üste çıkmasını (order: -1) engelliyoruz
      ve sığması için metni/min-genişliği küçültüyoruz.
    */
    #video-counter {
        font-size: 0.9rem; /* Sayaç metnini küçült */
        min-width: 60px; /* Minimum genişliği azalt */
        flex-shrink: 0; /* Sıkışıp küçülmesin */
    }
	
	.music-controls {
        justify-content: space-between;
        gap: 10px;
    }
}