@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@600;700&display=swap');

        /* Dashboard çakışmasını önlemek için kapsayıcıya özel değişkenler */
        #melodyaz_dj_section {
            --melodyazdjclub_neon: #00f2ff; 
            --melodyazdjclub_pink: #ff007a; 
            --melodyazdjclub_green: #39ff14; 
            --melodyazdjclub_gold: #ffaa00; 
            --melodyazdjclub_panel: #121212;
            background: #050505; 
            color: #fff; 
            font-family: 'Rajdhani', sans-serif; 
            margin: 0; 
            padding: 0;
            overflow-x: hidden;
            user-select: none;
            position: relative;
            border-radius: 15px; /* Dashboard uyumu için opsiyonel */
        }

        /* Sadece bu bölüme özel temel ayarlar */
        #melodyaz_dj_section * { box-sizing: border-box; }

        /* HEADER */
.melodyazdjclub_header {
    background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
    padding: 10px 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    /* border-bottom: 2px solid var(--melodyazdjclub_neon); */
    
    /* ÖNEMLİ AYARLAR */
    position: relative !important; 
    z-index: 1 !important; /* En alt katmana indirdik */
}
        .melodyazdjclub_logo { font-family: 'Orbitron'; font-size: clamp(14px, 4vw, 22px); color: var(--melodyazdjclub_neon); text-shadow: 0 0 10px var(--melodyazdjclub_neon); }

        .melodyazdjclub_master-controls {
    display: flex;
    align-items: center;
    gap: 12px; /* Butonlar ve göstergeler arası nefes alsın */
    flex-wrap: wrap;
}

        .melodyazdjclub_btn-status { 
            font-family: 'Orbitron'; font-size: 10px; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; white-space: nowrap;
        }

      /*  #melodyazdjclub_boot-btn { background: var(--melodyazdjclub_neon); color: #000; box-shadow: 0 0 15px var(--melodyazdjclub_neon); } */

#melodyazdjclub_boot-btn { 
    background: #4caf50 !important; /* Material Design Yeşil */
    color: #ffffff !important;      /* Net Beyaz Yazı */
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); /* Yumuşak yeşil gölge */
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Butona tıklandığında veya üzerine gelindiğinde tepki vermesi için: */
#melodyazdjclub_boot-btn:hover {
    background: #43a047 !important; /* Biraz daha koyu yeşil */
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
    cursor: pointer;
    transform: translateY(-1px); /* Hafif yukarı kalkma efekti */
}

#melodyazdjclub_boot-btn:active {
    transform: translateY(1px); /* Basılma hissi */
}


        #melodyazdjclub_mic-toggle { background: #222; color: #fff; border: 1px solid #444; }
        #melodyazdjclub_rec-btn { background: #222; color: #fff; border: 1px solid #444; }

        /* WORKSTATION */
        .melodyazdjclub_workstation { display: grid; grid-template-columns: 1fr 350px 1fr; min-height: 80vh; gap: 10px; padding: 10px; }

        @media (max-width: 1100px) {
            .melodyazdjclub_workstation { grid-template-columns: 1fr 1fr; }
            .melodyazdjclub_mixer { grid-column: span 2; order: 3; }
        }
        @media (max-width: 768px) {
            .melodyazdjclub_workstation { grid-template-columns: 1fr; }
            .melodyazdjclub_mixer { grid-column: span 1; }
            .melodyazdjclub_jog { width: 160px !important; height: 160px !important; }
        }

        .melodyazdjclub_deck { background: var(--melodyazdjclub_panel); border-radius: 25px; padding: 15px; display: flex; flex-direction: column; border: 1px solid #222; }
        .melodyazdjclub_display-box { height: 100px; background: #000; border-radius: 15px; margin-bottom: 10px; border: 1px solid #333; overflow: hidden; position: relative; }
        .melodyazdjclub_canvas { width: 100%; height: 100%; }

.melodyazdjclub_track-info {
    position: absolute; 
    top: 5px; 
    left: 0; 
    width: 100%; 
    font-family: 'Orbitron'; 
    font-size: 10px;
    color: var(--melodyazdjclub_green); 
    white-space: nowrap; 
    overflow: hidden; 
    pointer-events: none;
    
    /* ÖNEMLİ: Bu değeri 1 veya altına indiriyoruz */
    z-index: 1 !important; 
    background: rgba(0,0,0,0.6);
}
        .melodyazdjclub_marquee { display: inline-block; padding-left: 100%; animation: melodyazdjclub_scroll 10s linear infinite; }
        @keyframes melodyazdjclub_scroll { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

        .melodyazdjclub_jog-outer { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 15px 0; }
        .melodyazdjclub_jog { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #222 0%, #050505 70%, #000 100%); border: 8px solid #1a1a1a; position: relative; cursor: pointer; }
        .melodyazdjclub_jog.melodyazdjclub_spinning { animation: melodyazdjclub_spin 3s linear infinite; }
        .melodyazdjclub_jog::after { content: ''; position: absolute; top: 10px; left: 50%; width: 4px; height: 25px; background: var(--melodyazdjclub_neon); transform: translateX(-50%); }

        .melodyazdjclub_sampler-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
        .melodyazdjclub_s-pad { background: #1a1a1a; border: 1px solid #333; height: 40px; border-radius: 6px; color: #666; font-size: 9px; cursor: pointer; font-family: 'Orbitron'; transition: 0.2s; }
        .melodyazdjclub_s-pad:active { background: var(--melodyazdjclub_pink); color: #fff; transform: scale(0.95); }

        .melodyazdjclub_mixer { background: #0a0a0a; border-radius: 25px; padding: 15px; display: flex; flex-direction: column; border: 1px solid #222; }
        .melodyazdjclub_fx-grid, .melodyazdjclub_eq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
        .melodyazdjclub_knob-box { display: flex; flex-direction: column; align-items: center; font-size: 8px; color: #555; font-family: 'Orbitron'; }
        .melodyazdjclub_knob { width: 35px; height: 35px; cursor: pointer; appearance: none; background: #1a1a1a; border-radius: 50%; border: 3px solid #333; }

        .melodyazdjclub_fader-rack { display: flex; justify-content: space-around; height: 110px; margin: 10px 0; }


/* GÜNCELLENMİŞ DİKEY SLIDER (FADER) */
.melodyazdjclub_fader-v {
    writing-mode: vertical-lr; /* Standart dikey mod */
    direction: rtl;            /* Aşağıdan yukarıya doğru çalışması için */
    appearance: none;          /* Varsayılan görünümü temizle */
    -webkit-appearance: none;
    width: 12px;
    height: 100%;
    background: #111;          /* Koyu ray arka planı */
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 10px;
    outline: none;
}

/* Kaydırıcı Kafa (Thumb) - Chrome/Safari */
.melodyazdjclub_fader-v::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 15px;
    background: #444;
    border: 2px solid var(--melodyazdjclub_neon);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
}

/* Kaydırıcı Kafa (Thumb) - Firefox */
.melodyazdjclub_fader-v::-moz-range-thumb {
    width: 30px;
    height: 15px;
    background: #444;
    border: 2px solid var(--melodyazdjclub_neon);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
    border: none;
}

        .melodyazdjclub_vu-meter { width: 8px; background: #000; border-radius: 4px; position: relative; overflow: hidden; }
        .melodyazdjclub_vu-bar { position: absolute; bottom: 0; width: 100%; background: linear-gradient(0deg, var(--melodyazdjclub_green), var(--melodyazdjclub_gold), var(--melodyazdjclub_pink)); height: 0%; transition: height 0.1s; }

        .melodyazdjclub_play-btn { height: 50px; background: #222; color: #555; border: none; border-radius: 12px; font-family: 'Orbitron'; font-weight: 900; cursor: pointer; transition: 0.3s; }
        .melodyazdjclub_play-btn.melodyazdjclub_active { background: var(--melodyazdjclub_green); color: #000; box-shadow: 0 0 10px var(--melodyazdjclub_green); }

        .melodyazdjclub_seek-group { display: flex; gap: 5px; margin: 5px 0; }
        .melodyazdjclub_seek-btn { flex: 1; background: #1a1a1a; color: var(--melodyazdjclub_neon); border: 1px solid #333; padding: 8px; font-family: 'Orbitron'; font-size: 10px; cursor: pointer; border-radius: 6px; }
        
        .melodyazdjclub_backspin-btn { background: #331111; color: #ff4444; border: 1px solid #552222; border-radius: 6px; font-family: 'Orbitron'; font-size: 9px; padding: 5px; cursor: pointer; margin-top: 5px; transition: 0.3s; }
        
        #melodyazdjclub_xfader { width: 100%; height: 30px; margin-top: auto; cursor: pointer; }
        .melodyazdjclub_rec-active { animation: melodyazdjclub_blink 1s infinite; background: #ff0000 !important; color: white !important; }

        @keyframes melodyazdjclub_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes melodyazdjclub_blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

        #melodyazdjclub_strobe-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; z-index: 99; border-radius: 15px; }
        .melodyazdjclub_strobe-active { animation: melodyazdjclub_soft_flash 0.6s infinite alternate; }
        @keyframes melodyazdjclub_soft_flash { 0% { background: rgba(0, 242, 255, 0.0); } 100% { background: rgba(255, 0, 122, 0.15); } }

.melodyazdjclub_upload-container {
    margin-bottom: 5px !important; /* Butonlar arasındaki mesafeyi açar */
}

        .melodyazdjclub_upload-btn { width: 100%; background: #1a1a1a; color: #888; border: 1px solid #333; border-radius: 6px; padding: 8px; font-family: 'Orbitron'; font-size: 10px; cursor: pointer; transition: 0.3s; text-transform: uppercase;  width: 100%; margin-bottom: 5px;}

        .melodyazdjclub_progress-container { width: 100%; height: 8px; background: #222; border-radius: 4px; margin: 5px 0 10px 0; cursor: pointer; position: relative; overflow: hidden; border: 1px solid #333; }
        .melodyazdjclub_progress-bar { height: 100%; background: var(--melodyazdjclub_neon); width: 0%; box-shadow: 0 0 10px var(--melodyazdjclub_neon); transition: width 0.1s linear; }
   

 /* Slider'ın genel kutusu */
#melodyazdjclub_pitch-a, 
#melodyazdjclub_pitch-b {
    -webkit-appearance: none; /* Varsayılan tarayıcı stilini siler */
    appearance: none;
    background: #1a1a1a; /* Beyazlığı burası giderir - koyu gri yaptık */
    height: 4px;
    border-radius: 2px;
    outline: none;
    border: 1px solid #333;
}

/* Slider'ın üzerindeki yuvarlak (Kafa kısmı) - Chrome ve Safari için */
#melodyazdjclub_pitch-a::-webkit-slider-thumb, 
#melodyazdjclub_pitch-b::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--melodyazdjclub_neon); /* Pitch kafasını neon mavi yapalım */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px var(--melodyazdjclub_neon);
}

/* Slider'ın üzerindeki yuvarlak - Firefox için */
#melodyazdjclub_pitch-a::-moz-range-thumb, 
#melodyazdjclub_pitch-b::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: var(--melodyazdjclub_neon);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 5px var(--melodyazdjclub_neon);
}



/* Crossfader'ın arka planı (Rayı) */
#melodyazdjclub_xfader {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px; /* Biraz daha kalın ve belirgin */
    background: #111; /* Koyu siyah arka plan */
    border-radius: 6px;
    outline: none;
    border: 1px solid #333;
    margin-top: 20px;
}

/* Crossfader'ın kayan butonu (Kafa kısmı) - Chrome/Safari */
#melodyazdjclub_xfader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px; /* DJ mikserindeki fader kafası gibi geniş */
    height: 24px;
    background: #444; /* Metalik gri görünüm */
    border: 2px solid var(--melodyazdjclub_neon); /* Kenarları neon mavi */
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
}

/* Crossfader'ın kayan butonu - Firefox */
#melodyazdjclub_xfader::-moz-range-thumb {
    width: 40px;
    height: 24px;
    background: #444;
    border: 2px solid var(--melodyazdjclub_neon);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
}



/* Tam ekran modundayken section ayarları */
#melodyaz_dj_section:fullscreen {
    width: 100vw;
    height: 100vh;
    padding: 20px;
    background: #050505;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Safari uyumu için */
#melodyaz_dj_section:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #050505;
}






.melodyaz_pro_console {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    margin: 20px 0 !important; 
    width: 100% !important;   
    box-sizing: border-box;    
    font-family: 'Rajdhani', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

.console_header {
    background: #111;
    padding: 10px 15px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status_dot {
    width: 8px;
    height: 8px;
    background: #39ff14; /* Direkt Yeşil */
    border-radius: 50%;
    box-shadow: 0 0 8px #39ff14;
    animation: blink 1.5s infinite;
}

.console_header h4 {
    margin: 0;
    font-family: 'Orbitron';
    font-size: 12px;
    color: #888;
    letter-spacing: 1px;
}

.console_body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* BURAYI GÜNCELLEDİM: RENKLERİ SABİTLEDİM */
.console_column h5 {
    color: #00f2ff !important; /* Parlak Neon Mavi */
    font-family: 'Orbitron';
    font-size: 11px;
    margin-bottom: 12px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.console_column h5 i {
    color: #00f2ff !important; /* İkonların rengini zorla mavi yap */
}

.console_column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.console_column ul li {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.4;
}

.console_column ul li span {
    color: #eee;
    font-weight: 600;
    margin-right: 5px;
}

.console_footer {
    background: #000;
    padding: 8px 15px;
    font-size: 10px;
    color: #aaaaaa;
    text-align: center;
    border-top: 1px solid #111;
    font-family: 'Orbitron';
}

/* ALT KISIMDAKİ RENKLERİ DE SABİTLEDİM */
.secure_text { color: #39ff14 !important; } /* Yeşil */
.engine_text { color: #ff0055 !important; } /* Pembe */

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

@media (max-width: 600px) {
    .console_body { grid-template-columns: 1fr; }
}

/* Mikrofon açıkken butona veya yanına eklenecek efekt */
.mic_active_glow {
    color: #ff0000 !important;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    animation: pulse_red 1s infinite;
}

@keyframes pulse_red {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}









.studio_live_status {
    position: fixed;
    bottom: 10px;
    right: 15px;
    background: rgba(0, 0, 0, 0.8); /* Arka planı hafif şeffaf yapalım */
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #222;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(5px); /* Arkasını hafif bulandıralım, şık durur */
}

/* ON AIR Lambası */
.onair_box {
    padding: 2px 8px;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 10px;
    font-family: 'Orbitron';
    color: #444;
    transition: all 0.3s ease;
}

/* Mikrofon veya Kayıt aktifken bu class'ı JS ile ekleyeceğiz */
.onair_active {
    background: #ff0000;
    color: #fff !important;
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
    animation: blinker 1s linear infinite;
}

.system_stats {
    font-family: 'Orbitron';
    font-size: 10px;
    color: #00f2ff; /* Neon Mavi */
    display: flex;
    gap: 10px;
}

@keyframes blinker {
    50% { opacity: 0.5; }
}


.studio_status_bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding: 8px 15px;
    background: #050505; /* Çok koyu siyah, workstation ile bütünleşsin */
    border-top: 1px solid #1a1a1a;
    border-radius: 0 0 12px 12px; /* Sadece alt köşeleri yuvarla */
    font-family: 'Orbitron', sans-serif;
}

.system_stats span {
    color: #444; /* Etiketler gri */
    font-size: 10px;
}

.system_stats strong {
    color: #00f2ff; /* Değerler neon mavi */
    margin-left: 4px;
    text-shadow: 0 0 5px rgba(0, 242, 255, 0.3);
}

.onair_box {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}







/* Kayıt başladığında göstergenin alacağı renk */
/* Kayıt Göstergesi: Mor / Pembe Parlama */
.rec_active {
    background: #e91e63 !important; /* Magenta */
    color: #fff !important;
    border-color: #ff00ff !important;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.8) !important;
    animation: pulse_rec 0.6s infinite !important; /* Daha hızlı yanıp sönme */
}

@keyframes pulse_rec {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}









/* Ana Kapsayıcı */
.djmelodystudio_loop-section {
    /*background: #0d0d0d;*/
    /*border: 1px solid #1a1a1a;*/
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    max-width: 250px;
}

/* Başlık */
.djmelodystudio_loop-header {
    color: #4caf50; 
    font-size: 10px; 
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Izgara Düzeni */
.djmelodystudio_loop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Buton Stilleri */
.djmelodystudio_loop-btn {
    background: #111;
    border: 1px solid #333;
    color: #4caf50;
    padding: 8px 5px;
    font-size: 9px;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    border-radius: 4px;
}

/* Aktif Durum (Neon Yeşil) */
.djmelodystudio_loop_active {
    background: #4caf50 !important;
    color: #000 !important;
    box-shadow: 0 0 15px #4caf50;
    font-weight: bold;
    animation: djmelodystudio_pulse_green 1s infinite;
}

@keyframes djmelodystudio_pulse_green {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1); }
}

/* Hover */
.djmelodystudio_loop-btn:hover:not(.djmelodystudio_loop_active) {
    border-color: #4caf50;
    background: #1a1a1a;
}






.djmelodystudio_loop-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 eşit sütun */
    gap: 5px;
}

.djmelodystudio_loop-btn {
    padding: 10px 2px; /* Daha dar alanlar için padding'i küçülttük */
    font-size: 8px;    /* 5 buton yan yana sığsın diye biraz küçülttük */
    min-width: 0;      /* Esneklik için */
}

/* Deck A için mavi neon, Deck B için pembe neon (Opsiyonel Stil) */
.side-a .djmelodystudio_loop_active { box-shadow: 0 0 15px #00f2ff; background: #00f2ff !important; }
.side-b .djmelodystudio_loop_active { box-shadow: 0 0 15px #ff007a; background: #ff007a !important; }


.melodyazdjclub_btn-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* İkon ile metin arasındaki boşluk */
}











/* Mobil Optimizasyonu (768px ve altı ekranlar için) */
@media (max-width: 768px) {
    .melodyazdjclub_header {
        padding: 5px;
    }

    .melodyazdjclub_master-controls {
        gap: 5px; /* Butonlar arası boşluğu daralt */
        justify-content: center;
        flex-wrap: nowrap; /* Yan yana kalmaya zorla */
        overflow-x: auto; /* Sığmazsa yatayda kaydırılabilir yap (isteğe bağlı) */
    }

    .melodyazdjclub_btn-status {
        padding: 6px 10px; /* İç boşlukları azalt */
        font-size: 10px; /* Yazı boyutunu küçült */
    }

    /* Çok küçük ekranlarda yazıları gizle, sadece ikon kalsın */
    @media (max-width: 480px) {
        .melodyazdjclub_btn-status span {
            display: none; /* Metinleri gizle */
        }
        
        .melodyazdjclub_btn-status {
            min-width: 40px; /* Butonları kareye yakın yap */
            padding: 8px;
        }

        /* START ENGINE yazısı kritik olduğu için onu ikon yerine kısa metin yapabiliriz */
        #melodyazdjclub_boot-btn {
            font-size: 9px;
            padding: 6px;
        }
    }
}