/* Theme Name: Sblues
Theme URI: Sohbet Teması
Author: S4S
Author URI: #
Description: Sohbet teması
Version: 1.0 */

.song-info {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================== */
        /* ÖZEL CSS: Bootstrap Sınıflarıyla Yapılamayan İnce Ayarlar */
        /* ========================================================== */

        /* Değişkenler (Bootstrap temasına yakın ayar) - KOYU TEMA İÇİN GÜNCELLENDİ */
        :root {
            --bs-indigo: #4338ca;
            --bs-amber: #f59e0b;
            --bs-indigo-gradient-start: #4338ca;
            --bs-primary: #4338ca; /* Yeni deÄŸiÅŸken ekledik */
            --bs-indigo-gradient-end: #6366f1; /* Primary Link Rengi */
            --bs-soft-bg-color: #0f172a; /* KOYU ARKA PLAN: Dark Blue-Gray */
            --bs-input-bg-color: #e2e8f0;
            --bs-warning: #f59e0b;
            --bs-secondary: #94a3b8;
        }

        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            color: #f1f5f9; /* Sayfanın genel metin rengini beyaza çektik */
            overflow-x: hidden; /* X eksenindeki (yatay) kaydırmayı gizler */
        }
        
        /* Arka Plan Efekti (soft-bg) - KOYU TEMA İÇİN GÜNCELLENDİ */
        .soft-bg {
            background-color: var(--bs-soft-bg-color);
            /* Çok ince bir desen/noise ekleyelim */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23273145' fill-opacity='0.2' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
            min-height: 100vh;
        }

        /* Header Arka Planı - Site Uyumu İçin Koyu Gradient */
        .header-soft-dark {
            /* Koyu indigo tonlarından yumuşak bir geçiş */
            background: linear-gradient(to right, #0f172a, #080f1f); 
       
            /* Hafif bir gölge efekti */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); 
            padding-bottom: 4rem; 
            position: relative; 
            z-index: 50; 
            border-bottom: 1px solid rgba(67, 56, 202, 0.3); /* Mor aksanlı ince çizgi */
        }

        .script-logo {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1;
            color: white;
        }
        
        /* HEADER NAV LİNK DÜZELTMESİ (Görünürlük ve Hover) */
        .navbar-nav .nav-link {
            transition: color 0.3s ease; 
            color: rgba(255, 255, 255, 0.75) !important; /* Başlangıçta hafif soluk beyaz */
        }
        .navbar-nav .nav-link:hover {
            color: white !important; /* Hover'da tamamen beyaz olsun */
        }
        
        /* Giriş Çubuğu (login-bar-v5) arkaplan rengi düzeltmesi */
        .login-bar-v5 {
            background: #1e293b; /* Koyu temaya uygun arka plan */
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 15px rgba(3, 3, 3, 0.5); /* Gölgeyi belirginleştirdik */
            width: 100%;
            align-items: stretch; 
        }

        /* Modern Kart Gölgesi (modern-shadow) - Koyu Tema Kontrastı */
        .modern-shadow {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 10px 15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(67, 56, 202, 0.3); /* Açık çerçeveyi koyu ve primary renge çevirdik */
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        /* Yarı Dışarıda Görünüm İçin Negatif Marj (GİRİŞ ÇUBUĞU ÜST BOŞLUK AYARI) */
        .mt-negative-1 {
            margin-top: -2rem !important; 
        }

        /* Görünürlüğü garanti eden z-index */
        .z-top-level {
            z-index: 51 !important;
        }

        /* Giriş Alanı Stili (input-field-v5) */
        .input-field-v5 {
            background-color: var(--bs-input-bg-color);
            border: none;
            border-radius: 8px;
            color: #1f2937;
            padding: 1rem 1rem; 
            font-weight: 500;
            transition: all 0.3s ease;
            height: 100%; 
            display: flex; 
            align-items: center;
        }
        
        /* ======================================= */
        /* BUTONLAR: Bağlan (Mor) ve Eski Sürüm (Turuncu) Ayrıldı - KULLANICI İSTEĞİNE GÖRE GÜNCELLENDİ */
        /* ======================================= */

        /* BAÄžLAN Butonu Stili (Temel Mor Renk: --bs-primary) */
        .btn-amber {
            background-color: var(--bs-primary); /* Mor */
            color: white;
            font-weight: 700;
            /* YENİ: Modern Asimetrik Radius ve Gölge */
            border-radius: 1rem 3rem 1rem 3rem !important; /* Dış Köşegen Vurgu */
            box-shadow: 0 4px 15px rgba(67, 56, 202, 0.5); /* Mor Gölge */
            border: none;
            text-transform: uppercase;
            transition: none; /* Hover olmasın isteği için tüm geçişleri kaldırıldı */
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* YENİ: Hover Efektini Kaldır */
        .btn-amber:hover {
            background-color: var(--bs-primary) !important; /* Mor Rengi Sabit Tut */
            transform: none !important; /* Kalkma efekti kaldırıldı */
            box-shadow: 0 4px 15px rgba(67, 56, 202, 0.5) !important; /* Gölgeyi Sabit Tut */
        }

        /* ESKİ SÜRÜM Butonu Stili (Farklı Renk: --bs-amber) */
        .btn-old-version {
            background-color: var(--bs-amber); /* Turuncu */
            color: #1f2937; /* Koyu metin rengi */
            font-weight: 700;
            /* YENİ: Ters Asimetrik Radius ve Belirgin Turuncu Gölge */
            border-radius: 3rem 1rem 3rem 1rem !important; /* İç Köşegen Vurgu */
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.7);
            border: 1px solid var(--bs-amber);
            transition: none; /* Hover olmasın isteği için tüm geçişleri kaldırıldı */
        }

        /* YENİ: Hover Efektini Kaldır */
        .btn-old-version:hover {
            background-color: var(--bs-amber) !important; /* Turuncu Rengi Sabit Tut */
            color: #1f2937 !important; /* Metin rengi sabit */
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.7) !important; /* Gölgeyi Sabit Tut */
            transform: none !important;
        }
        
        /* ======================================= */
        /* AKTÄ°VÄ°TE LOG TASARIMI (SOL KART) */
        /* ======================================= */

        /* Aktivite Kartı */
        .activity-card { 
            background: linear-gradient(145deg, #1f2937, #111827);
            border-radius: 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            color: white;
            min-height: 480px;
            position: relative; 
        }

        /* Aktivite Başlığı Alt Çizgisi */
        .activity-header-divider {
            height: 3px;
            background: linear-gradient(to right, var(--bs-warning), transparent);
            width: 80px;
            margin-top: 5px;
            border-radius: 999px;
        }

        /* Aktivite Listesi Konteyneri (Dikey Çizgi) */
        #activity-list {
            position: relative;
            border-left: 1px dashed rgba(255, 255, 255, 0.2); 
            padding-left: 1.5rem !important; 
        }

        /* Aktivite Öğesi Stili */
        .activity-item {
            position: relative;
            padding: 0.5rem 0; 
            border-radius: 8px;
            transition: all 0.5s ease-out;
            line-height: 1.2; 
        }

        /* Aktivite Noktası (Çizgi Üzerinde) */
        .activity-point {
            position: absolute;
            left: -8px; 
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid #1f2937; 
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        }
        
        /* ======================================= */
        /* METRÄ°K KARTI STÄ°LÄ° */
        /* ======================================= */
        .stats-card-container {
            background-color: #1e293b; /* Koyu Temanın Bir Ton Açığı */
            border-radius: 1.5rem;
            padding: 1.5rem;
            margin-top: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stats-header {
            color: var(--bs-warning);
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 0.5rem;
        }

        .stat-item {
            text-align: center;
            padding: 0.5rem 0.2rem;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1;
            color: var(--bs-primary); /* Primary Mor */
            text-shadow: 1px 1px 5px rgba(67, 56, 202, 0.5);
            margin-bottom: 0.2rem;
        }

        .stat-label {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--bs-secondary);
            text-transform: uppercase;
            white-space: nowrap; /* Metinlerin alt alta kaymasını engeller */
        }
        
        /* Mobil için dikey ayırıcı */
        @media (max-width: 767.98px) {
            .stat-item:nth-child(odd) {
                border-right: 1px dashed rgba(255, 255, 255, 0.1);
            }
            .stat-item:nth-child(1), .stat-item:nth-child(2) {
                border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
            }
        }

        /* Masaüstü için dikey ayırıcı */
        @media (min-width: 768px) {
            .stat-item:not(:last-child) {
                border-right: 1px dashed rgba(255, 255, 255, 0.1);
            }
        }

        /* ======================================= */
        /* RADYO PLAYER STÄ°LÄ° */
        /* ======================================= */
        .radio-player-card {
            background: linear-gradient(135deg, #111827, #0f172a); 
            border-radius: 1rem;
            padding: 1rem;
            margin-top: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
            border: 1px solid rgba(245, 158, 11, 0.4); /* Amber çerçeve */
        }

        .player-cover {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            background-color: #334155; /* Placeholder color */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .player-info {
            flex-grow: 1;
            padding-left: 1rem;
        }

        .player-control-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: var(--bs-primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s, transform 0.1s;
            border: none;
            box-shadow: 0 2px 10px rgba(67, 56, 202, 0.8);
        }

        .player-control-btn:hover {
            background-color: #6366f1;
            transform: translateY(-1px);
        }

        /* Volume Slider Styling (For a cleaner look) */
        .volume-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 5px;
            background: #475569;
            outline: none;
            opacity: 0.8;
            transition: opacity .2s;
            border-radius: 2.5px;
        }

        .volume-slider:hover {
            opacity: 1;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%; 
            background: var(--bs-warning);
            cursor: pointer;
        }
        
        /* ======================================= */
        /* RADYO YAYIN AKIÅžI KARTI STÄ°LÄ° (SAÄž KART) */
        /* ======================================= */
        .schedule-card-container {
            background: linear-gradient(135deg, #1e293b, #111827); /* Koyu Arka Plan */
            border-radius: 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            color: white;
            min-height: 480px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(67, 56, 202, 0.5); /* Primary (Mor) çerçeve */
        }
        
        /* CANLI YAYIN VURGUSU */
        .current-broadcast {
            border: 2px solid var(--bs-primary);
            background-color: #1e293b;
            border-radius: 1rem;
            padding: 1rem;
            box-shadow: 0 0 15px rgba(67, 56, 202, 0.7);
        }

        .dj-title {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }
        
        /* AKIÅž LÄ°STESÄ° */
        .schedule-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0.6rem 0;
            transition: background-color 0.3s;
        }
        .schedule-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
        .schedule-item:last-child {
            border-bottom: none;
        }

        /* CANLI YAYIN PULSE EFEKTÄ° */
        .pulse-effect {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); /* YeÅŸil Ton */
            }
            70% {
                box-shadow: 0 0 0 10px rgba(25, 135, 84, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
            }
        }
        
        /* ======================================= */
        /* YENİ FOOTER TASARIMI: İÇE ÇÖKÜK (CONCAVE CURVE) - DÜZELTİLDİ */
        /* ======================================= */
        .footer-concave {
            margin-top: 0 !important; /* Negatif marjı kaldırarak bozulmayı düzelttik. */
            background-color: #1e293b !important; 
            
            /* Üst köşelere devasa yuvarlaklık vererek içe çökük curve efekti yarat */
            border-top-left-radius: 300px 30px; 
            border-top-right-radius: 300px 30px; 

            padding-top: 4rem; /* Kavis için yeterli dolgu */
            padding-bottom: 2rem; 
            
            /* Mor aksanlı yumuşak üst gölgeyi koruduk */
            
            border-top: none !important; 
            position: relative; 
            z-index: 10; 
        }

        /* Footer'a yaklaşması için son blog bölümünün altındaki boşluğu sıfırlayalım */
        #latest-blog {
            padding-bottom: 5rem; 
        }
        
        /* ======================================= */
        /* Neden Biz? Bölümü: MODERN KART TASARIMI */
        /* ======================================= */
        .feature-card-v2 {
            background: linear-gradient(135deg, #1f2937, #111827) !important; /* Koyu Gradient */
            transition: all 0.3s ease;
            border: 1px solid rgba(67, 56, 202, 0.3); /* Mor çizgi - Kart 1 default */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        }
        .feature-card-v2:hover {
            transform: translateY(-5px) scale(1.02);
            /* Hover gölgesini kartın --bs-primary değişkenini kullanarak dinamikleştirdik */
            box-shadow: 0 10px 30px rgba(67, 56, 202, 0.4), 0 0 15px rgba(67, 56, 202, 0.6);
        }
        /* Dinamik Hover Renkleri */
        .feature-card-v2:hover[style*="--bs-primary: #f59e0b;"] {
            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4), 0 0 15px rgba(245, 158, 11, 0.6);
        }
        .feature-card-v2:hover[style*="--bs-primary: #10b981;"] {
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4), 0 0 15px rgba(16, 185, 129, 0.6);
        }
        .feature-card-v2:hover[style*="--bs-primary: #0ea5e9;"] {
            box-shadow: 0 10px 30px rgba(14, 165, 233, 0.4), 0 0 15px rgba(14, 165, 233, 0.6);
        }
        
        /* FARKLI RADÄ°US STÄ°LLERÄ° (ASÄ°METRÄ°K) */
        .radius-style-1 {
            border-radius: 2.5rem 0.5rem 2.5rem 0.5rem !important; /* Köşegen Asimetri */
        }
        .radius-style-2 {
            border-radius: 0.5rem 2.5rem 0.5rem 2.5rem !important; /* Ters Köşegen Asimetri */
        }
        .radius-style-3 {
            border-radius: 2.5rem 0.5rem 0.5rem 2.5rem !important; /* Sol Taraf Büyük */
        }
        .radius-style-4 {
            border-radius: 0.5rem 2.5rem 2.5rem 0.5rem !important; /* Sağ Taraf Büyük */
        }
        
        /* ======================================= */
        /* YENÄ° BLOG KARTLARI (SadeleÅŸtirilmiÅŸ) */
        /* ======================================= */
        .blog-image-wrap {
            height: 200px;
            overflow: hidden;
            position: relative;
            border-bottom: 3px solid rgba(255, 255, 255, 0.1);
        }

        .blog-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .blog-meta {
            font-size: 0.85rem;
            color: var(--bs-secondary);
        }

        /* Kategori etiketi */
        .blog-category-tag {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background-color: var(--bs-warning);
            color: #1f2937;
            padding: 0.3rem 0.8rem;
            /* Ä°stenen 6px radius deÄŸeri */
            border-radius: 6px; 
            font-weight: 700;
            z-index: 10;
        }
        
        /* ======================================= */
        /* DÄ°ÄžER STÄ°LLER (Koyu Tema Uyumu) */
        /* ======================================= */
        
        /* Genel renk düzeltmeleri */
        .bg-white, .card {
            background-color: #1e293b !important; 
            color: white;
        }

        .text-dark {
            color: #f1f5f9 !important; 
        }
        .text-secondary {
            color: #94a3b8 !important; 
        }
        footer a.text-primary {
             color: var(--bs-indigo-gradient-end) !important;
        }
        
        /* Ek Stiller */
        .fw-ultra-bold { font-weight: 900 !important; }
        
        .text-shadow-md { text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
        .text-warning.text-shadow-md { text-shadow: 1px 1px 5px rgba(245, 158, 11, 0.8), 0 0 15px rgba(245, 158, 11, 0.5); }
        .text-primary.text-shadow-md { text-shadow: 1px 1px 5px rgba(67, 56, 202, 0.8), 0 0 15px rgba(67, 56, 202, 0.5); }
      
.modal-close-btn {
  background-color: #87CEFA;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}


/* === DJ Modal Genel === */
.dj-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.70);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

/* Kutu */
.dj-modal-box {
    background: #0a0f1f;
    width: 92%;
    max-width: 600px;
    border-radius: 18px;
    padding: 20px;
    position: relative;
    box-shadow: 
        0 0 25px #00aaff, 
        0 0 50px #00aaff, 
        0 0 100px #00aaff, 
        0 0 200px #00aaff; /* Parýltý sabit */
    overflow: hidden;
}

/* Neon Kenar (sabit parýltý) */
.dj-modal-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(90deg, #00eaff, #00ffae, #009dff);
    z-index: -1;
    filter: blur(18px);
    pointer-events: none;
}
/* Kapatma Tuþu */
.dj-close {
    position: absolute;
    right: 15px;
    top: 5px;
    font-size: 32px;
    color: #00eaff;
    cursor: pointer;
}

/* Üst Alan: Resim + Bilgiler */
.dj-top-area {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

/* DJ Resmi (Yuvarlak + Neon Glow) */
.dj-modal-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00eaff;
    box-shadow: 
        0 0 10px #00eaff,
        0 0 20px #00eaff,
        0 0 40px #00eaff;
    transition: 0.3s ease;

    margin-right: 30px;   /* >>> Resmin SAÐ tarafýna boþluk */
}

/* Hover efekti (istersen ekleriz) */
.dj-modal-img:hover {
    box-shadow:
        0 0 15px #00eaff,
        0 0 30px #00eaff,
        0 0 60px #00eaff;
    transform: scale(1.05);
}

/* DJ Adý */
.dj-title {
    font-size: 26px;
    font-weight: bold;
    color: #00eaff;
    margin-bottom: 5px;
}

/* Yayýn Saati */
.dj-time-info {
    font-size: 16px;
    margin-bottom: 5px;
    color: #c7fff8;
}

/* Slogan */
.dj-slogan-info {
    font-size: 14px;
    color: #00aaff;
}

/* Kartlar */
.info-card {
    background: #0d1a2d;
    border-left: 4px solid #00eaff;
    color: #00aaff;
    padding: 12px;
    border-radius: 10px;
    margin-top: 12px;
    box-shadow: 0 0 15px rgba(0,255,255,0.15);
}

/* Baþlýk */
.info-card h4 {
    color: #00aaff;
    margin-bottom: 6px;
}

/* DJ Bilgi */
.dj-bilgi-text {
    color: #00aaff;
    line-height: 1.6;
    font-size: 15px;
}

/* Mobil uyum */
@media(max-width: 600px) {
    .dj-top-area {
        flex-direction: column;
        text-align: center;
    }
    .dj-modal-img {
        width: 100px;
        height: 100px;
    }
}
@media (max-width: 768px) {
    .info-card {
        text-align: left !important;
    }
}

@keyframes popup {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.dj-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 
        0 0 10px rgba(0,0,0,0.15),
        0 0 15px #00aaff,
        0 0 25px #00aaff50;
    display: block;          /* üstte boþluk için block */
    margin: 0 0 10px 0;      /* üst boþluðu kaldýr, alt boþluk býrak */
    transition: box-shadow 0.3s ease;
    vertical-align: top;     /* inline-block ise hizalama için */
}

/* Hoverda glow efektini artýr */
.dj-thumb:hover {
    box-shadow:
        0 0 15px rgba(0,0,0,0.2),
        0 0 25px #00aaff,
        0 0 50px #00aaff70;
}
.modal-body {
    padding-top: 0;              /* üst padding kaldýr */
    display: flex;
    flex-direction: column;       /* vertical alignment */
    align-items: center;          /* fotoðraf ortalanýr */
}

/* Modal Body Düzeni */
.modal-body {
    padding-top: 0;
    display: flex;
    flex-direction: row;       /* resim ve bilgiler yan yana */
    align-items: flex-start;   /* üstten hizala */
    gap: 20px;                 /* resim ile bilgiler arasý boþluk */
}

/* DJ Resmi */
.dj-thumb {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;           /* resmi küçültme */
}

/* DJ Bilgileri Kutusu */
.dj-info {
    display: flex;
    flex-direction: column;
    gap: 10px;                 /* her bilgi kutusu arasý boþluk */
    flex: 1;                   /* saða doðru esnek büyüme */
}

/* Bilgi Satýrlarý (Ýkon + Metin) */
.dj-info .modal-contentin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 10px;
    background: #f5f5f5;       /* hafif kutu arka planý */
    border-radius: 8px;
    font-size: 1em;
}

/* DJ Bilgi Açýklama */
.dj-info p:last-child {
    background: transparent;
    padding: 0;
    margin-top: 5px;
    font-style: italic;
}

@media (max-width: 768px) { /* 768px altý mobil kabul ediliyor */
  .dj-thumb {
    margin-top: 0;       /* üst boþluðu kaldýr */
    display: block;
    vertical-align: top; /* inline-block varsa hizalama */
  }

  .modal-body {
    padding-top: 0;      /* modal-body üst padding mobilde kaldýr */
  }
}

/* ===== Modal içerik ===== */
[id^="djModal"] .modal-contentin {
    background: linear-gradient(135deg, #1e293b, #002f66);
    color: #fff;
    border-radius: 15px;
    border: 1px solid #00aaff;
    border-left: 5px solid #00aaff; /* Neon mavi çubuk */
    overflow: visible !important;
    transition: 0.3s ease, box-shadow 0.5s ease;
    padding: 10px;
    position: relative;
}
/* Modal içerik sabit neon parýltý */
[id^="djModal"] .modal-content {
    background: linear-gradient(135deg, #1e293b, #0c1222);
    color: #fff;
    border-radius: 15px;
    border: 1px solid #00aaff;
    overflow: visible !important;
    box-shadow: 
        0 0 25px #00aaff, 
        0 0 50px #00aaff, 
        0 0 100px #00aaff, 
        0 0 200px #00aaff; /* Parýltý sabit */
    transition: 0.3s ease, box-shadow 0.5s ease;
    padding: 10px;
    position: relative;
    transform: scale(1); /* Hover efekti kaldýrýldý */
}


/* ===== Modal header ===== */
[id^="djModal"] .modal-header {
    background: transparent;
    border-bottom: 1px solid #00aaff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
    color: #00aaff;
    overflow: hidden;
    white-space: nowrap;
}

/* Baþlýk yazýsý */
[id^="djModal"] .modal-header .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #00aaff;
    text-shadow: none;
}

/* Kapatma butonu */
[id^="djModal"] .modal-header .btn-close {
    width: 15px;
    height: 15px;
    filter: invert(1);
    opacity: 0.8;
    color: #00aaff;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, box-shadow 0.3s;
}
[id^="djModal"] .modal-header .btn-close:hover {
    opacity: 1;
    box-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff;
}

/* Modal body */
[id^="djModal"] .modal-body {
    overflow: hidden;
    padding-top: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #e0eaff;
    text-align: left;
}
[id^="djModal"] .modal-body p strong {
    font-weight: 700;
    margin-bottom: 6px;
    display: inline-block;
}
[id^="djModal"] .modal-body p {
    overflow: hidden;
    margin-bottom: 10px;
}

/* Sosyal medya ikonlarý */
[id^="djModal"] .modal-body .d-flex.gap-3 {
    margin-top: 15px;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    [id^="djModal"] .dj-thumb {
        float: none !important;
        display: block;
        margin: 5px auto 15px auto; /* üst boþluk 5px, alt boþluk 15px, ortalanmýþ */
        width: 100px;
        height: 100px;
    }

    [id^="djModal"] .modal-body {
        padding-top: 5px !important; /* modal-body üst padding mobilde minik boþluk */
    }
}
.dj-thumb:hover {
    box-shadow:
        0 0 15px rgba(0,0,0,0.2),
        0 0 25px #00aaff,
        0 0 50px #00aaff70;
}

    [id^="djModal"] .modal-body {
        text-align: center;
    }
    [id^="djModal"] .modal-body p {
        text-align: center;
    }
    [id^="djModal"] .modal-body .d-flex.gap-3 {
        justify-content: center;
    }
    [id^="djModal"] .modal-header {
        font-size: 25px;
        justify-content: space-between;
    }
    [id^="djModal"] .modal-header .modal-title {
        font-size: 20px;
    }
    [id^="djModal"] .modal-header .btn-close {
        width: 10px;
        height: 10px;
    }
}

/* DJ info kutularý (Yayýn Saatleri ve Format) */
.dj-info-box {
    display: inline-block;
    background: linear-gradient(135deg, #1e293b, #310033);
    border-left: 3px solid #00aaff; /* Neon mavi çubuk */
    color: #00aaff;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.3s ease;
}

.pagination-box {
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda satýr taþmasýný önler */
    justify-content: center;
    padding: 10px 15px;
    background-color: #0f172a;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2), 0 0 20px #3b82f6, 0 0 30px #3b82f6;
    margin-top: 20px;
    transition: box-shadow 0.3s ease;
}

.pagination-box:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.2), 0 0 25px #3b82f6, 0 0 40px #3b82f6;
}

.pagination-box a,
.pagination-box span {
    display: inline-block;
    color: #fff;
    padding: 8px 12px;
    margin: 4px 4px; /* Küçük ekranlarda kutular birbirine yaklaþýr */
    border-radius: 5px;
    text-decoration: none;
    background-color: #1e293b;
    transition: all 0.3s ease;
    font-size: 16px;
    white-space: nowrap; /* Metin kutu taþmasýný önler */
}

.pagination-box a:hover {
    background-color: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
}

/* Mobil uyumlu ayarlar */
@media screen and (max-width: 480px) {
    .pagination-box {
        padding: 8px 10px;
    }
    .pagination-box a,
    .pagination-box span {
        padding: 6px 10px;
        font-size: 14px; /* Küçük ekranlarda yazý boyutunu küçült */
        margin: 3px 3px;
    }
}
 
.pagination-box .dots {
    display: none;
}

/* Makale içi resimler ve container mobil uyumlu */
.post-content-body,
.entry-content {
    max-width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
}

/* Makale içi resimler */
.post-content-body img,
.entry-content img {
    max-width: 100% !important;   /* ekraný aþmaz */
    height: auto !important;      /* oraný korur */
    display: block !important;    /* block element */
    margin-left: auto !important; /* ortala */
    margin-right: auto !important;
    float: none !important;       /* sola/saða yaslamayý engelle */
}

/* Sadece mobilde sað boþluk sorununu engelle */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
    }

    .post-content-body,
    .entry-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .post-content-body img,
    .entry-content img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
}

/* Makale içi resimler */
.entry-content img,
.post-content-body img,
.wp-caption img,
img.wp-post-image {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Caption kapsayýcýlarý ortala */
.wp-caption.aligncenter {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Öne çýkan görsel kapsayýcýlarý */
.post-thumbnail,
.single-post-thumbnail {
    text-align: center !important;
}

/* Öne çýkan görselin kendisi */
.post-thumbnail img,
.single-post-thumbnail img {
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    max-width: 100% !important;
    height: auto !important;
}


/* Ortalayýcý kapsayýcý */
.guzel-soz-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Güzel söz kutusu */
.guzel-soz-kutu {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(12, 18, 34, 0.7));
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 22px;
    border-radius: 50px;

    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);

    max-width: 95%;
    width: fit-content;

    font-size: 16px;
    line-height: 1.5;
    text-align: center;

    transition: all 0.3s ease;
}

.guzel-soz-kutu:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(255,65,108,0.35);
}

.guzel-soz-ikon {
    font-size: 22px;
    flex-shrink: 0;
}

.guzel-soz-icerik {
    word-break: break-word;
}

/* Mobil */
@media (max-width: 768px) {
    .guzel-soz-kutu {
        font-size: 15px;
        padding: 12px 18px;
        border-radius: 30px;
    }
}
/* Kayarak giriþ animasyonu */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guzel-soz-kutu {
    animation: slideDownFade 0.6s ease-out forwards;
}

/* ====== AKILLI OVAL REKLAM ALANI ====== */

.reklam-wrap {
    width: 100%;
    margin: 25px 0;
}

.reklam-alan {
    display: inline-flex;              /* Ýçeriðe göre davranýr */
    align-items: center;
    justify-content: center;

    max-width: 970px;
    min-width: 280px;                  /* Çok küçülmesin */
    padding: 18px 36px;

    background: linear-gradient(
        135deg,
        rgba(30, 41, 59, 0.6),
        rgba(12, 18, 34, 0.75)
    );

    border-radius: 999px;              /* Tam oval */
    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: all 0.3s ease;
}

/* Hover (isteðe baðlý) */
.reklam-alan:hover {
    transform: scale(1.03);
}

/* Ýçerik ortalama */
.reklam-wrap {
    text-align: center;
}

/* Google Ads / iframe uyumu */
.reklam-alan ins,
.reklam-alan iframe {
    display: block !important;
    margin: 0 auto !important;
}

/* Mobil */
@media (max-width: 768px) {
    .reklam-alan {
        min-width: 90%;
        padding: 16px 22px;
        border-radius: 26px;
    }
}
/* FAQ */
.faq-item {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(12, 18, 34, 0.7));
	backdrop-filter: blur(30px);
	border: 2px solid rgba(30, 58, 138, 0.4);
	border-radius: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: all 0.4s;
}

.faq-item:hover {
	border-color: #1e3a8a;
	box-shadow: 0 15px 40px rgba(30, 58, 138, 0.3);
}

.faq-question {
	padding: 30px 40px;
	cursor: pointer;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.15rem;
}

.faq-question::after {
	content: '+';
	font-size: 2rem;
	color: #1e3a8a;
	transition: all 0.4s;
	font-weight: 300;
}

.faq-question.active::after {
	transform: rotate(45deg);
	color: #ea580c;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s;
	padding: 0 40px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.9;
}

.faq-answer.open {
	max-height: 800px;
	padding: 0 40px 30px 40px;
}

.section-heading {
	text-align: center;
	margin-bottom: 80px;
}

.section-heading .baslik {
	font-size: 3.5rem;
	font-weight: 900;
	background: linear-gradient(135deg, #fff, #60a5fa, #fb923c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 20px;
	letter-spacing: -1px;
}

.section-heading p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.3rem;
	font-weight: 500;
}

.badge {
	padding: 12px 24px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
	.hero-section {
		grid-template-columns: 1fr;
		gap: 60px;
		padding: 80px 0;
	}

	.hero-content .baslik {
		font-size: 2rem;
	}

	.features-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.hero-content .baslik {
		font-size: 2.5rem;
	}

	.connect-card {
		padding: 35px;
		order: -1;
	}

	.device-grid {
		grid-template-columns: 1fr;
	}

	.stat-number {
		font-size: 2rem;
	}

	.section-heading .baslik {
		font-size: 2.5rem;
	}
}