/* 1. RENK VE TEMA DEĞİŞKENLERİ */
:root {
    --primary-brand: rgb(20, 24, 36);
    --bg-panel: #ffffff;
    --bg-header: #f1f3f4;
    --bg-list-hover: #f8f9fa;
    --text-main: #333333;
    --text-sub: #666666;
    --border-color: #eeeeee;
    --accent-color: rgb(20, 24, 36);
    --wave-color: rgba(0, 140, 255, 0.6);
}


/* 2. ANA BUTON (NEON VE GECİKMESİZ) */
#music-floating-btn {
    position: fixed;
    width: 65px;
    height: 65px;
    background-color: rgb(35, 45, 70);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    z-index: 10000;
    touch-action: none;
    user-select: none;
    bottom: 70px;
    right: 20px;
    box-shadow: 0 0 15px 2px rgba(0, 140, 255, 0.6), 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 160, 255, 0.8);
    /* Sadece görsel öğeler için transition - sürükleme gecikmesini önler */
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

    #music-floating-btn:hover {
        transform: scale(1.05);
        background-color: rgb(45, 55, 85);
    }

.icon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Ana Kulaklık İkonu */
.main-icon svg.svg-inline--fa {
    width: 28px !important; /* Boyutu buradan ayarla */
    height: 28px !important;
    color: #ffffff;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* PDF İkonu (Sağ Alt Köşe) */
.sub-icon {
    position: absolute;
    bottom: 10px; /* Butonun içine doğru konum */
    right: 10px;
    background-color: rgb(35, 45, 70); /* Arka planı temizlemek için */
    border-radius: 4px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.4s ease;
}

    .sub-icon svg.svg-inline--fa {
        width: 14px !important; /* Küçük badge boyutu */
        height: 14px !important;
        color: #ff4d4d; /* PDF kırmızısı */
    }

#btn-music-icon {
    font-size: 1.3em;
    color: #ffffff;
    z-index: 2;
    transition: all 0.4s;
}

/* --- MÜZİK ÇALARKENKİ ANİMASYON DURUMLARI --- */

/* Çalarken Kulaklık Dans Etsin */
.is-playing .main-icon svg.svg-inline--fa {
    animation: pulse-headphones 1.2s infinite alternate ease-in-out;
    color: #008cff; /* Çalarken maviye dönebilir */
}

/* Çalarken PDF İkonu Gizlensin veya Küçülsün */
.is-playing .sub-icon {
    opacity: 0;
    transform: scale(0.5) translate(10px, 10px);
    pointer-events: none;
}

@keyframes pulse-headphones {
    0% {
        transform: scale(1) rotate(-10deg);
    }

    100% {
        transform: scale(1.2) rotate(10deg);
    }
}
#btn-pdf-icon {
    font-size: 1em;
    color: #ff4d4d;
    position: absolute;
    transform: translate(10px, 10px);
    z-index: 1;
    transition: 0.4s;
}

/* Müzik Çalma Animasyonları */
.is-playing #btn-pdf-icon {
    opacity: 0.2;
    transform: translate(18px, 18px) scale(0.6);
}

.is-playing #btn-music-icon {
    animation: music-dance 1s infinite alternate ease-in-out;
}

@keyframes music-dance {
    0% {
        transform: rotate(-10deg) scale(1.1);
    }

    100% {
        transform: rotate(10deg) scale(1.2);
    }
}

.playing-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--wave-color);
    animation: pulse 1.8s infinite;
    opacity: 0;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* 3. PANEL */
#music-container {
    position: fixed;
    width: 330px;
    background: var(--bg-panel);
    color: var(--text-main);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    z-index: 9999;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.panel-top-bar {
    display: flex;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.tab-item {
    flex: 1;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    color: var(--text-sub);
    font-weight: 600;
    font-size: 13px;
}

    .tab-item.active {
        color: var(--accent-color);
        border-bottom: 3px solid var(--accent-color);
        background: var(--bg-panel);
    }

#theme-toggle {
    padding: 0 15px;
    cursor: pointer;
    color: var(--text-main);
}

.list-container {
    max-height: 250px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .list-container li {
        padding: 12px 18px;
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--text-main);
    }

        .list-container li:hover {
            background: var(--bg-list-hover);
        }

        .list-container li.active {
            background: rgba(255, 255, 255, 0.1);
            color: var(--accent-color);
            font-weight: bold;
        }

[data-theme="light"] .list-container li.active {
    background: rgba(20, 24, 36, 0.05);
}

.player-controls {
    padding: 18px;
    background: var(--bg-header);
    border-top: 1px solid var(--border-color);
}

.transport-controls {
    display: flex;
    justify-content: center; /* Butonları ortalar */
    align-items: center; /* Dikeyde hizalar */
    gap: 30px; /* Butonlar arasındaki boşluğu (mesafeyi) ayarlar */
    margin-bottom: 15px; /* Alt kısımla mesafe bırakır */
    padding: 10px 0;
}

    /* Her bir butonun kapsayıcısı için */
    .transport-controls div {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        width: 40px; /* Tıklama alanını genişletmek için */
        height: 40px;
        border-radius: 50%;
    }

        /* Hover (Üzerine gelince) efekti */
        .transport-controls div:hover {
            background-color: rgba(0, 140, 255, 0.1); /* Hafif mavi bir arka plan */
            transform: scale(1.15); /* Hafif büyüme */
        }

    /* SVG İkonlarının boyutlarını sabitleyelim (Önceki hatayı önlemek için) */
    .transport-controls svg.svg-inline--fa {
        width: 22px !important; /* İleri-Geri butonları için boyut */
        height: 22px !important;
        color: var(--text-main);
    }

/* Play/Pause butonu biraz daha büyük ve belirgin olsun */
#play-pause-btn svg.svg-inline--fa {
    width: 30px !important;
    height: 30px !important;
    color: var(--accent-color); /* Vurgu rengi (Lacivert veya Beyaz) */
}

.player-btn {
    font-size: 1.5em;
    cursor: pointer;
    margin: 0 15px;
    color: var(--text-main);
}

audio {
    width: 100%;
    height: 32px;
}

[data-theme="dark"] audio {
    filter: invert(1) brightness(1.3);
}

/* Liste içindeki ikonların boyutunu sabitle */
.list-container svg,
.list-container i {
    width: 16px !important; /* Genişliği sabitle */
    height: 16px !important;
    margin-right: 12px;
    vertical-align: middle;
}

/* Ana yüzen butondaki ikonların boyutunu sabitle */
#music-floating-btn svg,
#music-floating-btn i {
    width: 24px !important;
    height: 24px !important;
}
/* Player kontrollerindeki ikonlar */
.transport-controls svg,
.transport-controls i {
    width: 28px !important;
    height: 28px !important;
}
/* Font Awesome 6.7.2 SVG Genel Boyut Ayarları */
svg.svg-inline--fa {
    display: inline-block;
    height: 1em; /* Metin boyutuyla orantılı kalmasını sağlar */
    vertical-align: -0.125em;
    overflow: visible;
}

/* Liste içindeki ikonlar (Play ve Volume) */
.list-container svg.svg-inline--fa {
    width: 1.2em !important;
    height: 1.2em !important;
    margin-right: 12px;
}

/* Ana yüzen butondaki ikonlar (Kulaklık ve PDF) */
#music-floating-btn svg.svg-inline--fa {
    width: 20px !important;
    height: 20px !important;
    /* Neon mavi ışıltı için filtre (isteğe bağlı) */
    filter: drop-shadow(0 0 2px rgba(0, 160, 255, 0.5));
}

/* Player kontrolleri (Play/Pause/Next/Prev) */
.transport-controls svg.svg-inline--fa {
    width: 28px !important;
    height: 28px !important;
    cursor: pointer;
    transition: transform 0.2s;
}

    .transport-controls svg.svg-inline--fa:hover {
        transform: scale(1.2);
        color: #008cff;
    }
@media screen and (max-width: 768px) {
    /* Buton boyutunu mobil için biraz küçültüyoruz */
    #music-floating-btn {
        width: 55px;
        height: 55px;
        bottom: 20px; /* Kenarlara daha yakın */
        right: 20px;
    }

    /* İkon boyutlarını mobil için ölçeklendiriyoruz */
    .headphone-icon svg.svg-inline--fa {
        width: 18px !important;
        height: 18px !important;
    }

    .pdf-icon svg.svg-inline--fa {
        width: 20px !important;
        height: 20px !important;
    }

    /* Panel (Popup) mobilde ekranı daha çok kaplamalı */
    #music-container {
        width: 75%; /* Mobilde çok dar kalmasın */
        left: 5% !important; /* Ortalamak için */
        right: 5% !important;
        bottom: 85px !important; /* Butonun üstünde dursun */
        top: auto !important; /* Yukarı açılmasını garanti et */
    }
}
/* TAB GRUP (SESLER + LİSTE BUTONU) */
.tab-group {
    display: flex;
    align-items: stretch;
}

/* Liste butonu özel davranış */
.tab-list-btn {
    flex: 0 0 auto; /* SESLER gibi esnemesin */
    padding: 14px 14px;
    border-left: 1px solid var(--border-color);
    color: var(--text-sub);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Hover efekti (senin temaya uygun) */
    .tab-list-btn:hover {
        background: var(--bg-panel);
        color: var(--accent-color);
    }

    /* Liste ikon boyutu */
    .tab-list-btn svg.svg-inline--fa,
    .tab-list-btn i {
        width: 14px !important;
        height: 14px !important;
    }