* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* ÖZEL MOUSE: cursor.png dosyasını htdocs'a atmayı unutma */
    cursor: url('star-cursor.png'), auto;
}
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Resmi %30 oranında karartır */
    z-index: -1; /* Resmin önünde ama yazıların arkasında kalır */
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('arkaplan.jpg') no-repeat center center fixed;
    background-size: cover;
    color: white;
    font-family: 'Segoe UI', sans-serif;
}

/* Griliği tamamen kaldıran saydam kart */
.profile-card {
    background: transparent !important; /* Arka planı tamamen yok eder */
    background-color: transparent !important;
    backdrop-filter: none !important;  /* Bulanıklık efektini kapatır */
    -webkit-backdrop-filter: none !important;
    border: none !important;           /* Varsa kenarlıkları siler */
    box-shadow: none !important;       /* Varsa gölgeleri siler */
    padding: 80px;
    text-align: center;
    width: 100%;
    max-width: 800px;
}
/* Kapsayıcının da saydam olduğundan emin olalım */
.main-container {
    background: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

/* Eğer sosyal medya ikonlarının arkasında da bir renk varsa onları da sıfırlayalım */
.social-icons a {
    background: transparent; 
    color: white;
    font-size: 24px;
    text-decoration: none;
    transition: transform 0.3s ease;
    display: inline-block;
}

.social-icons a:hover {
    transform: scale(1.2); /* Üzerine gelince hafif büyüme efekti */
}

/* Ses Paneli Konumu */
.audio-wrapper {
    position: fixed;
    top: 20px;    /* 20px'den 60px'e çıkarıldı, yukarıdan daha fazla boşluk sağlandı */
    left: 20px;   /* Soldan da biraz daha içeri aldık */
    z-index: 1000;
}

/* Kutu içindeki elemanların (ikon ve sürgü) daha ferah durması için */
.audio-container {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* Şeffaf siyah arka plan */
    padding: 12px 18px; /* İç boşluğu (padding) artırarak kutuyu ferahlattık */
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    width: 65px; /* Başlangıç genişliği */
    overflow: hidden;
}

/* Mouse üzerine gelince açılan genişlik */
.audio-container:hover {
    width: 170px; 
}

#play-pause {
    background: none;
    border: none;
    color: #E0B0FF !important; /* Parlak Leylak Rengi */
    text-shadow: 0 0 10px rgba(224, 176, 255, 0.5);
    cursor: pointer;
    font-size: 18px;
    min-width: 25px;
}

.volume-slider-con {
    margin-left: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hover olunca barı göster */
.audio-container:hover .volume-slider-con {
    opacity: 1;
}

#volume {
    -webkit-appearance: none; /* Varsayılan siyah sürgüyü siler */
    appearance: none;
    width: 90px;
    height: 15px; /* Barın kalınlığı */
    background: rgba(224, 176, 255, 0.2); /* Barın arkasındaki sönük renk */
    border-radius: 10px; /* Barı kavisli yapar */
    outline: none;
    cursor: pointer;
}
/* Sürgü (Yuvarlak Hareket Ettirici) - Chrome, Safari, Edge ve Opera */
#volume::-webkit-slider-thumb {
    -webkit-appearance: none; /* Standart görünümü siler */
    appearance: none;
    width: 15px;
    height: 15px;
    background: #E0B0FF; /* Kaydıran yuvarlak buton */
    box-shadow: 0 0 10px #E0B0FF; /* Parlama efekti */ /* Senin seçtiğin lila/mavi renk */
    border-radius: 50%; /* Tam yuvarlak yapar */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border: none;
}

/* Sürgü (Yuvarlak Hareket Ettirici) - Firefox */
#volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #97A6E8;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Hover olduğunda barın arkasının hafif parlaması (isteğe bağlı) */
#volume:hover {
    background: rgba(151, 166, 232, 0.5);
}
#mute-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

#mute-icon {
    color: #E0B0FF !important; /* Parlak Leylak Rengi */
    text-shadow: 0 0 10px rgba(224, 176, 255, 0.5);
    font-size: 18px;
    width: 25px; /* İkonun kapladığı alanı sabitledik */
    text-align: center;
    display: inline-block;
}
/*avatar*/
/* Profil Fotoğrafı Boyutu */
.avatar {
    width: 180px;            /* 160px'den 180px'e çıkardık, orta kısmı doldursun */
    height: 180px;           /* Kare bir alan belirledik */
    border-radius: 50%;      /* Tam yuvarlak yapar */
    object-fit: cover;       /* Resmin yamulmasını engeller, içine sığdırır */
    margin-bottom: 35px;     /* Altındaki isimle arayı açar */
    transition: all 0.4s ease-in-out; 
    border: 2px solid transparent; /* Parlama için yer ayırıyoruz */
    /* Estetik Dokunuşlar */
    border: 4px solid rgba(151, 166, 232, 0.4); /* Lila şeffaf çerçeve */
    box-shadow: 0 0 25px rgba(151, 166, 232, 0.3); /* Etrafına hafif bir parlama */
    transition: transform 0.4s ease; /* Üzerine gelince hareket etmesi için */
}
.avatar:hover {
    transform: scale(1.05); /* %5 oranında büyüme */
    border-color: white; /* Lila çerçeve belirir */
    
    /* Neon Parlama Efekti */
    box-shadow: 0 0 20px white, 
                0 0 40px white; 
    
    cursor: pointer;
}

/* Kullanıcı Adı Boyutu */
.username {
    color: #FFFFFF;
    text-shadow: 0 0 20px rgb(234, 216, 247);
    font-family: 'Caveat', cursive;
    font-size: 55px; /* 28px'den 36px'e çıkarıldı */
    margin-bottom: 30px;
    font-weight: 700;
}

/* Sosyal Medya İkon Boyutları */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 45px;
}

.social-icons i {
    font-size: 32px; /* 24px'den 32px'e çıkarıldı */
    color: #5c5ad4;
    transition: 0.3s;
}
.social-icons a:hover i {
    color: white; /* Üzerine gelince leylak rengine döner */
    filter: drop-shadow(0 0 8px #E0B0FF);
}

.progress-container {
    width: 100%;
    height: 6px; /* Çizgi inceliği */
    background: rgba(255, 255, 255, 0.1);
    margin: 25px 0;
    cursor: pointer;
}

.progress-bar {
    height: 100%;           /* Kapsayıcının tam yüksekliğini alır */
    background: white; 
    box-shadow: 0 0 15px white; /* Kalınlaştığı için parlama etkisini artırdık */
    border-radius: 5px;
    width: 0%; 
    transition: width 0.1s linear;
}

.track-info span {
    font-family: 'Dancing Script', cursive;
    font-size: 35px;       /* Şarkı ismi boyutunu ayarladık */
    font-weight: 500;
    color: #7b0e23;
    text-shadow: 0 0 10px rgba(224, 176, 255, 0.4), 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.track-info .art {
    width: 75px;           /* Genişliği 50px'e sabitledik */
    height: 75px;          /* Yüksekliği 50px'e sabitledik */
    border-radius: 8px;    /* Köşeleri hafif kavisli yaptık */
    object-fit: cover;     /* Resmin kutuya tam sığmasını ve bozulmamasını sağlar */
    margin-right: 25px;    /* Yanındaki şarkı ismiyle arayı açar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Hafif derinlik ekler */
    transition: all 0.4s ease-in-out; 
    border: 2px solid transparent; /* Parlama için yer ayırıyoruz */
}
.track-info .art:hover {
    transform: scale(1.1); /* Hafifçe büyür */
    border-color: #7b0e23; /* Lila çerçeve belirir */
    
    /* Neon Parlama Efekti */
    box-shadow: 0 0 20px #7b0e23, 
                0 0 40px #7b0e23; 
    
    cursor: pointer;
}
.track-info:hover span {
    color: #7b0e23;
    text-shadow: 0 0 15px #7b0e23; /* Yazı da lila parlar */
    transition: 0.4s;
}
.track-info {
    display: flex;         /* Resim ve metni yan yana getirir */
    align-items: center;   /* Dikeyde ortalar */
    justify-content: flex-start; /* Sola yaslar */
    margin-bottom: 15px;   /* Altındaki bar ile arayı açar */
}

/* İkonların içinde bulunduğu kutu */
.controls {
    display: flex;            /* Yan yana dizilmelerini sağlar */
    justify-content: center;  /* Ortalar */
    align-items: center;      /* Dikeyde hizalar */
    gap: 40px;                /* İkonların arasındaki boşluğu artırdık */
    margin-top: 20px;         /* Üstteki bar ile mesafesi */
}

/* İkonların kendisi */
.controls i {
    font-size: 28px;          /* İkon boyutunu 20px'den 28px'e çıkardık */
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s;
}

/* Üzerine gelince parlama efekti */
.controls i:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.star-effect {
    position: absolute;
    background-color: #ffffff;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    pointer-events: none; /* Mouse tıklamalarını engellemez */
    box-shadow: 0 0 5px #E0B0FF;
    animation: fadeOut 1s linear forwards;
    z-index: 9999;
}

@keyframes fadeOut {
    from { opacity: 0.5; transform: scale(1); }
    to { opacity: 0; transform: scale(0); }
}