:root { 
    --primary-color: #ff0055; 
    --secondary-color: #1a1a2e; 
    --accent-color: #00d2ff; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

.bg-dark { 
    background-color: #0f0f1a !important; 
}

.navbar { 
    background: rgba(0,0,0,0.8); 
    backdrop-filter: blur(10px); 
}

.hero-section { 
    padding-top: 10px; 
    padding-bottom: 50px; 
}

/* Haber Slider */
.swiper { 
    width: 100%; 
    height: 450px; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.swiper-slide { 
    position: relative; 
}

.swiper-slide img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.slide-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 40px 20px 20px; 
    background: linear-gradient(transparent, rgba(0,0,0,0.9)); 
    color: white; 
}

.slide-number { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    background: var(--primary-color); 
    color: white; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 1.2rem; 
    z-index: 10; 
    box-shadow: 0 0 15px rgba(255,0,85,0.5); 
}

/* Profesyonel Giriş Kutusu */
.login-box { 
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); 
    padding: 30px; 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.1); 
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.login-box h4 { 
    font-size: 1.5rem; 
    letter-spacing: 1px; 
}

.benefit-item { 
    font-size: 0.85rem; 
    color: #aaa; 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
}

.benefit-item i { 
    color: var(--accent-color); 
    font-size: 0.75rem; 
}

.btn-premium { 
    background: linear-gradient(45deg, #ff0055, #ff5500); 
    border: none; 
    color: white; 
    transition: 0.3s; 
    font-weight: 700; 
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255,0,85,0.3);
}

.btn-premium:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(255,0,85,0.5); 
    color: white; 
}

/* Spotify Listesi */
.spotify-card { 
    background: #181818; 
    border-radius: 15px; 
    padding: 20px; 
    height: 450px; 
    overflow-y: auto; 
}

.track-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 10px; 
    border-bottom: 1px solid #282828; 
    transition: 0.2s; 
    cursor: pointer; 
    text-decoration: none; 
    color: inherit; 
}

.track-item:hover { 
    background: #282828; 
    border-radius: 8px; 
}

.track-img { 
    width: 50px; 
    height: 50px; 
    border-radius: 5px; 
}

/* DJ Listesi */
.dj-avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    border: 3px solid var(--primary-color); 
    padding: 3px; 
    object-fit: cover; 
}

/* Video Grid */
.video-box { 
    position: relative; 
    border-radius: 10px; 
    overflow: hidden; 
}

.video-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.4); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    transition: 0.3s; 
}

.video-box:hover .video-overlay { 
    opacity: 1; 
}

/* Radyo Bar Modern Tasarım */
.radio-bar { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(15, 15, 26, 0.95); 
    backdrop-filter: blur(20px); 
    padding: 10px 0; 
    z-index: 1001; 
    border-top: 3px solid var(--primary-color);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.5);
}

.player-art { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 2px solid rgba(255,255,255,0.1); }
.dj-mini-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--primary-color); }

.play-btn-main { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background: var(--primary-color); 
    border: none; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.2rem; 
    transition: 0.3s;
    box-shadow: 0 0 15px rgba(255,0,85,0.4);
}

.play-btn-main:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,0,85,0.6); }

.pulse-animation { animation: pulse-red 2s infinite; }
@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 0, 85, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

.radio-info-text { overflow: hidden; }
.radio-title-scroll { white-space: nowrap; font-weight: 700; color: #fff; font-size: 0.95rem; }
.radio-dj-name { color: var(--accent-color); font-size: 0.8rem; font-weight: 600; }

/* Ses Kontrolü (Volume Slider) */
.volume-container { display: flex; align-items: center; gap: 10px; min-width: 120px; }
.volume-slider { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 4px; 
    border-radius: 5px; 
    background: rgba(255,255,255,0.1); 
    outline: none; 
    cursor: pointer;
}
.volume-slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background: var(--primary-color); 
    box-shadow: 0 0 10px rgba(255,0,85,0.5);
}
.volume-icon { color: rgba(255,255,255,0.5); font-size: 0.9rem; }

/* Renk Özelleştirmeleri (Sadece Ana Sayfa İçin) */
body:not(.modal-open) .text-muted { color: #ffffff !important; opacity: 0.8; }
body:not(.modal-open) .text-white-50 { color: #c8a2c8 !important; }

/* Modal içindeki metinlerin sistem varsayılanında kalmasını sağla */
.modal .text-muted, #container_modal .text-muted { color: inherit !important; opacity: 0.6; }
.modal .text-white-50, #container_modal .text-white-50 { color: inherit !important; }

/* DJ ve Başlık İyileştirmeleri */
.dj-item h6, #djs h6 { color: #ffffff !important; font-weight: 800 !important; }

/* Yardımcı Sınıflar */
.pointer { 
    cursor: pointer; 
}

.hover-scale { 
    transition: transform 0.3s; 
}

.hover-scale:hover { 
    transform: translateY(-5px); 
}

.transition-all { 
    transition: all 0.3s ease; 
}

/* Özel Scrollbar */
::-webkit-scrollbar { 
    width: 6px; 
}

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background: var(--primary-color); 
    border-radius: 10px; 
}

/* VIP GOLD PROMO CARD */
.vip-promo-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.vip-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.vip-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.text-gold { color: #d4af37 !important; }
.pulsate-gold {
    animation: pulsateGold 2s infinite ease-in-out;
}
@keyframes pulsateGold {
    0% { transform: scale(1); text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
    50% { transform: scale(1.1); text-shadow: 0 0 25px rgba(212, 175, 55, 0.8); }
    100% { transform: scale(1); text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
}
.feature-item-small {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #eee;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}
.feature-item-small:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}
.feature-item-small i {
    color: #d4af37;
    margin-right: 5px;
}
.btn-gold {
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border: none;
    color: #000 !important;
    font-weight: 800 !important;
    transition: 0.3s;
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
    opacity: 0.9;
}
/* Giriş kutusundaki Kullanıcı Adı ve Şifre ipucu metinleri (Yumuşak Görünürlük) */
#user_username::placeholder, 
#user_password::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Beyazın %60 görünür hali - Daha yumuşak */
    font-size: 0.85rem;
    font-weight: 400;
}

/* Input odaklandığında ipucu rengi */
#user_username:focus::placeholder, 
#user_password:focus::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.z-1 { z-index: 1; }