#dj_panel_wrap { font-family:inherit; width:340px; }
.djp-search-row { display:flex;gap:6px;padding:12px 12px 0; }
.djp-search-input { flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--bborder,#ddd);background:var(--bback,#f6f6f6);color:var(--btext,#333);font-size:13px;outline:none; }
.djp-search-input:focus { border-color:var(--btheme,#3498db); }
.djp-search-btn { padding:9px 14px;border-radius:8px;border:none;background:var(--btheme,#667eea);color:#fff;cursor:pointer;font-size:13px;flex-shrink:0; }
.djp-msg { font-size:12px;min-height:14px;margin:4px 12px 0; }
.djp-onair-card { display:flex;align-items:center;gap:10px;margin:10px 12px 0;padding:10px 12px;background:linear-gradient(135deg,rgba(231,76,60,.08),rgba(192,57,43,.04));border:1px solid rgba(231,76,60,.2);border-radius:12px; }
.djp-onair-av-wrap { position:relative;flex-shrink:0; }
.djp-onair-av { width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #e74c3c; }
.djp-onair-dot { position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#2ecc71;border:2px solid var(--bback,#fff); }
.djp-onair-info { flex:1;overflow:hidden; }
.djp-onair-name { font-size:13px;font-weight:800;color:var(--btext,#333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.djp-onair-sub { font-size:11px;color:#e74c3c;font-weight:600;margin-top:2px;display:flex;align-items:center;gap:4px; }
.djp-onair-live-icon { font-size:7px;animation:djp-blink 1.2s infinite; }
@keyframes djp-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.djp-onair-badge { font-size:9px;font-weight:900;letter-spacing:.5px;background:#e74c3c;color:#fff;border-radius:5px;padding:3px 7px;flex-shrink:0; }
.rp_dj_right { display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0; }
.rp_dj_time_box { display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--bsubtext,#888); }
.djp-tabs { display:flex;padding:10px 12px 0;border-bottom:2px solid var(--bborder,#eee);margin-top:6px;overflow-x:auto; }
.djp-tab { padding:7px 10px;border:none;background:transparent;color:var(--bsubtext,#888);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;display:flex;align-items:center;gap:4px; }
.djp-tab-active { color:var(--btheme,#3498db);border-bottom-color:var(--btheme,#3498db); }
.djp-tab-badge { background:#e74c3c;color:#fff;font-size:10px;font-weight:800;border-radius:20px;padding:1px 6px; }
.djp-tabcontent { padding:10px 12px; }
.djp-toggle-row { display:flex;align-items:center;justify-content:space-between;background:var(--bback,#f9f9f9);border:1px solid var(--bborder,#e8e8e8);border-radius:10px;padding:10px 12px;margin-bottom:10px; }
.djp-toggle-label { display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--btext,#333); }
.djp-badge { font-size:10px;font-weight:800;border-radius:20px;padding:2px 9px; }
.djp-badge-open { background:#d5f5e3;color:#1a8c4a; }
.djp-badge-closed { background:#fde8e8;color:#c0392b; }
.djp-switch { position:relative;display:inline-block;width:44px;height:24px;cursor:pointer; }
.djp-switch input { display:none; }
.djp-switch-track { position:absolute;inset:0;border-radius:24px;background:#ccc;transition:.25s; }
.djp-switch-track:before { content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.25s; }
.djp-switch input:checked + .djp-switch-track { background:#2ecc71; }
.djp-switch input:checked + .djp-switch-track:before { transform:translateX(20px); }
.djp-empty { text-align:center;padding:22px 0;color:var(--bsubtext,#bbb);font-size:12px; }
.djp-empty-face { font-size:38px;display:block;margin-bottom:8px;filter:grayscale(1);opacity:.35; }
.djp-istek-item { display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--bborder,#f0f0f0); }
.djp-istek-item:last-child { border-bottom:none; }
.djp-istek-av { width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.djp-istek-body { flex:1;overflow:hidden; }
.djp-istek-name { font-size:12px;font-weight:700;color:var(--btext,#333); }
.djp-istek-text { font-size:12px;color:var(--bsubtext,#888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.djp-istek-time { font-size:11px;color:var(--bsubtext,#bbb);flex-shrink:0; }
.djp-istek-done { background:none;border:none;cursor:pointer;flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2ecc71;font-size:18px; }
.djp-istek-done:hover { background:rgba(46,204,113,.12); }
.djp-istek-playing { background:linear-gradient(135deg,#eafaf1 0%,#d5f5e3 100%)!important;border-color:#82e0aa!important; }
.djp-istek-play { background:none;border:none;cursor:pointer;flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#6366f1;font-size:13px; }
.djp-istek-play:hover { background:rgba(99,102,241,.12); }
.djp-istek-canliyor { font-size:11px;font-weight:700;color:#1a8a45;display:flex;align-items:center;gap:4px;flex-shrink:0;animation:djp-canli-pulse 1.2s infinite; }
@keyframes djp-canli-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.iq-playing { background:#d5f5e3;color:#1a8a45;border:1px solid #82e0aa; }
.iq-state-playing { background:linear-gradient(135deg,#eafaf1 0%,#d5f5e3 100%)!important;border-color:#82e0aa!important;box-shadow:0 2px 10px rgba(39,174,96,.15)!important; }
.dot-playing { background:#27ae60;animation:iq-pulse-green 1s infinite; }
@keyframes iq-pulse-green { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
.djp-filter-row { display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap; }
.djp-filter-btn { padding:5px 14px;border-radius:20px;border:1px solid var(--bborder,#ddd);background:transparent;color:var(--bsubtext,#888);font-size:12px;font-weight:700;cursor:pointer; }
.djp-filter-active { background:var(--btheme,#667eea);color:#fff;border-color:var(--btheme,#3498db); }
.djp-gecmis-table-head { display:grid;grid-template-columns:36px 1fr 90px 44px;padding:6px 4px;font-size:11px;font-weight:700;color:var(--bsubtext,#aaa);border-bottom:1px solid var(--bborder,#eee);margin-bottom:4px; }
.djp-gecmis-row { display:grid;grid-template-columns:36px 1fr 90px 44px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--bborder,#f5f5f5); }
.djp-gecmis-row:last-child { border-bottom:none; }
.djp-gecmis-live { background:rgba(46,204,113,.07);border-radius:8px; }
.djp-gecmis-dj { display:flex;align-items:center;gap:7px;overflow:hidden; }
.djp-gecmis-av { width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.djp-gecmis-name { font-size:13px;font-weight:700;color:var(--btext,#333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.djp-gecmis-sure { font-size:12px;font-weight:700;color:var(--btheme,#3498db); }
.djp-gecmis-yayin { font-size:12px;color:var(--bsubtext,#888); }
.djp-medal { font-size:17px;display:flex;align-items:center;justify-content:center; }
.djp-canli-badge { font-size:9px;font-weight:800;background:#e74c3c;color:#fff;border-radius:4px;padding:1px 5px;flex-shrink:0; }
.rp-off { display:flex;align-items:center;gap:8px;padding:12px 14px;color:var(--bsubtext,#aaa);font-size:13px; }
.rp-warn { display:flex;align-items:center;gap:6px;padding:10px 14px;color:#e67e22;font-size:12px; }
.iq-item { border:1px solid var(--bborder,#eee);border-radius:10px;padding:9px 10px;margin-bottom:7px;background:var(--bback,#fff);transition:.15s; }
.iq-item:last-child { margin-bottom:0; }
.iq-item:hover { border-color:var(--btheme,#3498db);box-shadow:0 2px 8px rgba(52,152,219,.08); }
.iq-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px; }
.iq-left { display:flex;align-items:center;gap:8px;overflow:hidden; }
.iq-av { width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.iq-meta { display:flex;flex-direction:column;overflow:hidden; }
.iq-name { font-size:12px;font-weight:700;color:var(--btext,#333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.iq-date { font-size:10px;color:var(--bsubtext,#aaa);margin-top:1px; }
.iq-right { display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:6px; }
.iq-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.dot-wait { background:#f39c12;animation:iq-pulse 1.6s infinite; }
@keyframes iq-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
.iq-badge { font-size:10px;font-weight:700;border-radius:20px;padding:2px 8px;white-space:nowrap; }
.iq-wait { background:#fef5e7;color:#e67e22;border:1px solid #f8c471; }
.iq-msg { font-size:11px;color:var(--bsubtext,#666);line-height:1.5;word-break:break-word;padding-top:5px;border-top:1px solid var(--bborder,#f0f0f0); }

.yg-wrap { font-family:inherit; min-width:360px; }

.yg-header {
	display:flex;align-items:center;justify-content:space-between;
	padding:14px 16px 12px;
	border-bottom:1px solid var(--bborder,#eee);
}
.yg-header-left { display:flex;align-items:center;gap:10px; }
.yg-header-icon { font-size:20px;color:#f1c40f; }
.yg-title { font-size:15px;font-weight:800;color:var(--btext,#333);margin:0; }
.yg-sub { font-size:12px;color:var(--bsubtext,#999); }
.yg-close {
	width:30px;height:30px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;color:var(--bsubtext,#aaa);font-size:14px;
}
.yg-close:hover { background:var(--bborder,#eee);color:var(--btext,#555); }

.yg-filter {
	display:flex;gap:6px;padding:12px 16px 8px;
	border-bottom:1px solid var(--bborder,#f0f0f0);
}
.yg-filter-btn {
	padding:5px 14px;border-radius:20px;
	border:1px solid var(--bborder,#ddd);
	background:transparent;color:var(--bsubtext,#888);
	font-size:12px;font-weight:700;cursor:pointer;
	transition:.15s;
}
.yg-filter-btn.active { background:var(--btheme,#3498db);color:#fff;border-color:var(--btheme,#3498db); }
.yg-filter-btn:hover:not(.active) { background:var(--bborder,#eee); }

.yg-list { padding:8px 16px 16px;max-height:400px;overflow-y:auto; }

.yg-empty { text-align:center;padding:30px 0;color:var(--bsubtext,#bbb); }
.yg-empty i { font-size:32px;display:block;margin-bottom:10px;opacity:.3; }
.yg-empty p { font-size:13px; }

.yg-row {
	display:grid;grid-template-columns:36px 1fr 100px 70px;
	align-items:center;padding:10px 6px;
	border-bottom:1px solid var(--bborder,#f5f5f5);
	transition:.15s;
}
.yg-row:last-child { border-bottom:none; }
.yg-row:hover { background:var(--bback,#fafafa);border-radius:8px; }
.yg-live { background:rgba(46,204,113,.07)!important;border-radius:8px; }

.yg-num { display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--bsubtext,#aaa); }
.yg-dj { display:flex;align-items:center;gap:8px;overflow:hidden; }
.yg-av { width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.yg-dj-info { display:flex;flex-direction:column;overflow:hidden; }
.yg-nick { font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.yg-canli { font-size:10px;font-weight:700;color:#e74c3c;margin-top:2px; }
.yg-sure { font-size:12px;font-weight:700;color:var(--btheme,#3498db); }
.yg-sayi { font-size:12px;color:var(--bsubtext,#999); }

/* Bekleyen / Geçmiş istek item */
.istek-empty { text-align:center;padding:20px;color:var(--bsubtext,#bbb);font-size:13px; }
.dim-istek-item { display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--bborder,#f0f0f0); }
.dim-istek-item:last-child { border-bottom:none; }
.dim-istek-av { width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.dim-istek-body { flex:1;overflow:hidden; }
.dim-istek-name { font-size:12px;font-weight:700;color:var(--btext,#333); }
.dim-istek-text { font-size:12px;color:var(--bsubtext,#888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dim-istek-time { font-size:11px;color:var(--bsubtext,#bbb);flex-shrink:0; }
.dim-istek-done { background:none;border:none;cursor:pointer;flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2ecc71;font-size:18px; }
.dim-istek-done:hover { background:rgba(46,204,113,.12); }
.djp-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Arama Alanı */
.djp-search-row {
    display: flex;
    gap: 10px;
    padding: 16px;
}

.djp-search-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #eee;
    background: #f8f9fa;
    color: #333;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.djp-search-input:focus {
    border-color: #3498db;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.djp-search-btn {
    padding: 0 18px;
    border-radius: 10px;
    border: none;
    background: #3498db;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.djp-search-btn:hover {
    opacity: 0.9;
}

/* Yayında Kartı */
.djp-onair-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 16px 16px;
    padding: 14px;
    background: #fffafa;
    border: 1px solid #ffebeb;
    border-radius: 14px;
}

.djp-onair-av-wrap {
    position: relative;
    flex-shrink: 0;
}

.djp-onair-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #ff4757;
    background: #f1f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ff4757;
    font-size: 14px;
}

/* Canlı Yayında Pulse Efekti */
.djp-onair-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2ed573;
    border: 2px solid #ffffff;
}

.djp-onair-dot::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: #2ed573;
    animation: broadcast 1.5s infinite ease-out;
    z-index: -1;
}

@keyframes broadcast {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.djp-onair-info {
    flex: 1;
    min-width: 0;
}

.djp-onair-name {
    font-size: 14px;
    font-weight: 700;
    color: #2f3542;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.djp-onair-sub {
    font-size: 10px;
    color: #ff4757;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 2px;
}

/* Mobil Uyumluluk */
@media (max-width: 400px) {
    .djp-wrap {
        border-radius: 0;
        max-width: 100%;
    }
    
    .djp-search-row {
        flex-direction: column;
    }
    
    .djp-search-btn {
        padding: 10px;
    }
}
/* --- GENEL AYARLAR VE PANEL --- */
.djp-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* --- CANLI YAYIN ICON & BADGE --- */
@keyframes djp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.djp-onair-live-icon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    animation: djp-blink 1.2s infinite;
    flex-shrink: 0;
}

.djp-onair-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    background: #e74c3c;
    color: #ffffff;
    border-radius: 5px;
    padding: 3px 8px;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* --- TAB (SEKME) YAPISI --- */
.djp-tabs {
    display: flex;
    padding: 12px 14px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.djp-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.djp-tab {
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #7f8c8d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.djp-tab:hover {
    color: #2c3e50;
}

.djp-tab-active {
    color: #3498db;
    border-bottom-color: #3498db;
}

.djp-tab-badge {
    background: #e74c3c;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 6px;
}

.djp-tabcontent {
    padding: 16px 14px;
}

/* --- TOGGLE (AÇ-KAPAT) SIRASI --- */
.djp-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.djp-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.djp-badge-open {
    background: #e8f5e9;
    color: #2ecc71;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 10px;
}

/* --- MODERN SWITCH BUTON --- */
.djp-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    cursor: pointer;
}

.djp-switch input {
    display: none;
}

.djp-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #dfe6e9;
    transition: background 0.3s ease;
}

.djp-switch-track:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.djp-switch input:checked + .djp-switch-track {
    background: #2ecc71;
}

.djp-switch input:checked + .djp-switch-track:before {
    transform: translateX(20px);
}

/* --- RESPONSIVE --- */
@media (max-width: 480px) {
    .djp-wrap {
        border-radius: 0;
        border: none;
    }
    
    .djp-tab {
        padding: 8px 10px;
        font-size: 12px;
    }
}
.djp-container {
            width: 100%;
            max-width: 450px;
            background: var(--color-card);
            backdrop-filter: blur(12px);
            border: 1px solid var(--color-border-tertiary);
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        }

        .djp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding: 0 4px;
        }

        .djp-header h2 {
            color: var(--color-text-primary);
            font-size: 16px;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Canlı İkonu */
        .djp-live-dot {
            width: 8px;
            height: 8px;
            background: #ef4444;
            border-radius: 50%;
            animation: djp-canli-pulse 1.5s infinite;
        }

        /* Liste Yapısı */
        .djp-istek-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .djp-istek-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            transition: all 0.2s ease;
            border-bottom: 1px solid var(--color-border-tertiary);
        }

        .djp-istek-item:hover {
            background: rgba(255, 255, 255, 0.03);
            transform: translateX(4px);
        }

        .djp-istek-item:last-child {
            border-bottom: none;
        }

        /* Avatar */
        .djp-istek-av {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: var(--accent-gradient);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        .djp-istek-body {
            flex: 1;
            min-width: 0; /* Ellipsis için gerekli */
        }

        .djp-istek-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-text-primary);
            margin-bottom: 2px;
        }

        .djp-istek-text {
            font-size: 13px;
            color: var(--color-text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .djp-istek-time {
            font-size: 11px;
            color: var(--color-text-tertiary);
            margin-top: 2px;
        }

        /* Onay Butonu */
        .djp-istek-done {
            background: transparent;
            border: 1px solid rgba(46, 204, 113, 0.3);
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2ecc71;
            font-size: 16px;
            flex-shrink: 0;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .djp-istek-done:hover {
            background: #2ecc71;
            color: white;
            border-color: #2ecc71;
            transform: scale(1.1);
        }

        @keyframes djp-canli-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        /* Responsive Ayar */
        @media (max-width: 480px) {
            .djp-container {
                max-width: 100%;
                border-radius: 0;
                border: none;
            }
        }
/* Buton Konteynırı */
.rp-btns-top {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: var(--color-background-secondary);
    border-radius: 12px;
    justify-content: center;
}

/* Genel Buton Yapısı */
.djp-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* DJ Paneli Butonu (Mavi/İndigo) */
.djp-btn-action:nth-child(1) {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* Yayın Geçmişi Butonu (Altın/Turuncu) */
.djp-btn-action:nth-child(2) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Hover Efektleri */
.djp-btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.djp-btn-action:active {
    transform: translateY(0);
}

.djp-btn-action i {
    font-size: 14px;
}



/* Modern & Sleek Radio Dashboard Interface */
:root {
  --djp-bg-blur: blur(10px);
  --djp-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --djp-shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
}

/* Base Animations */
@keyframes djp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } }
@keyframes djp-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Table & Row Layouts */
.djp-gecmis-table-head, .djp-gecmis-row {
  display: grid;
  grid-template-columns: 45px 1fr 90px 50px;
  align-items: center;
  padding: 12px 10px;
  gap: 12px;
  transition: var(--djp-transition);
}

.djp-gecmis-table-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border-tertiary);
  font-weight: 700;
}

.djp-gecmis-row {
  border-bottom: 1px solid var(--color-border-tertiary);
  animation: djp-slide-in 0.3s ease-out;
}

.djp-gecmis-row:hover {
  background: var(--color-background-secondary);
  border-radius: 8px;
}

.djp-gecmis-live {
  background: linear-gradient(90deg, var(--color-background-success), transparent);
  border-left: 3px solid #2ecc71;
  border-radius: 4px 12px 12px 4px;
}

/* Avatars & Badges */
.djp-gecmis-av, .iq-av {
  width: 36px;
  height: 36px;
  border-radius: 10px; /* Modern rounded look */
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: var(--djp-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.djp-canli-badge {
  font-size: 10px;
  font-weight: 800;
  background: #ff4757;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3);
}

/* Request Items (IQ) */
.iq-item {
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--color-background-primary);
  box-shadow: var(--djp-shadow-sm);
  transition: var(--djp-transition);
}

.iq-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-secondary);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.iq-msg {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 10px;
  margin-top: 10px;
  background: var(--color-background-secondary);
  border-radius: 8px;
  line-height: 1.6;
  font-style: italic;
}

/* Status Indicators */
.dot-wait {
  width: 8px;
  height: 8px;
  background: #f1c40f;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
  animation: djp-pulse 1.5s infinite;
}

/* Tab Panels */
.djp-tab-panels > div { display: none; opacity: 0; }
.djp-tab-panels > div.active { 
  display: block; 
  animation: djp-slide-in 0.4s forwards; 
}

/* Responsive Optimization */
@media (max-width: 480px) {
  .djp-gecmis-table-head, .djp-gecmis-row {
    grid-template-columns: 40px 1fr 40px;
  }
  .djp-gecmis-sure { display: none; }
  .iq-date { font-size: 9px; }
}






























.istek_content{
    color:#e1e1e1;
    padding:20px 15px;
    overflow:visible;
    margin-top:15px;
    position:relative;
    border-radius:.4em
}
.istek_caliyorkutu{
    background:#4caf50!important
}
.istek_siradakutu{
    background:#673ab7!important
}
.istek_beklemekutu{
    background:#607d8b!important
}
.istek_durumm{
    display:table-cell;
    right:10px;
    top:45%;
    position:absolute;
    color:#fff;
    font-weight:700!important;
    opacity:.15
}
.rp{font-size:13px;padding-bottom:8px}
.rp-live{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;position:relative;overflow:hidden;margin-bottom:4px}
.live-dot{width:8px;height:8px;background:#4ade80;border-radius:50%;animation:rpblink 1s infinite;box-shadow:0 0 8px #4ade80;flex-shrink:0}
@keyframes rpblink{50%{opacity:.3}}
.live-av-wrap{position:relative;width:38px;height:38px;flex-shrink:0}
.live-av{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.5);object-fit:cover}
.wave-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.3);border-radius:50%;animation:rpwave 2s ease-out infinite}
.wave-ring.r1{width:48px;height:48px}.wave-ring.r2{width:56px;height:56px;animation-delay:.4s}
@keyframes rpwave{0%{transform:translate(-50%,-50%) scale(.85);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2);opacity:0}}
.live-info{flex:1;min-width:0}
.live-info .dj-nick{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-info .live-text{font-size:10px;opacity:.85;letter-spacing:.3px}
.live-stats{display:flex;gap:10px;font-size:11px;flex-shrink:0}
.live-stats i{font-size:9px;opacity:.7;margin-right:2px}
.rp-off{display:flex;align-items:center;gap:10px;padding:16px 14px;color:#94a3b8}
.rp-off i{font-size:16px;opacity:.4}
.rp-off span{font-size:12px}
.rp.boom_keep{overflow-y:auto}
.rp-btns{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;position:sticky;bottom:0;background:#fff;z-index:10;border-top:1px solid #e2e8f0;box-shadow:0 -2px 8px rgba(0,0,0,0.06)}
.rp-btns a{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:#f1f5f9;color:#475569;border-radius:20px;cursor:pointer;font-size:11px;font-weight:500;transition:all .15s;border:1px solid #e2e8f0}
.rp-btns a:hover{background:#e2e8f0;border-color:#cbd5e1}
.rp-btns a i{font-size:10px}
.rp-btns a.go{background:#7c3aed;color:#fff;border-color:#7c3aed}
.rp-btns a.go:hover{background:#6d28d9}
.rp-req{margin:6px 10px;border-radius:8px;overflow:hidden;border:1px solid #e2e8f0}
.req-head{padding:8px 12px;background:#f8fafc;font-size:11px;color:#64748b;font-weight:600;border-bottom:1px solid #e2e8f0}
.req-head i{margin-right:6px;color:#667eea;font-size:10px}
.req-body{display:flex;gap:8px;padding:8px 10px;background:#fff}
.req-body textarea{flex:1;border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;font-size:12px;resize:none;min-height:34px;outline:none;font-family:inherit}
.req-body textarea:focus{border-color:#667eea}
.req-body button{width:34px;height:34px;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;flex-shrink:0}
.req-body button i{font-size:12px}
.rp-warn{display:flex;align-items:center;gap:8px;margin:6px 10px;padding:8px 12px;background:#fef3c7;color:#92400e;border-radius:6px;font-size:11px;border:1px solid #fde68a}
.rp-queue{margin:6px 10px;border-radius:8px;overflow:visible;border:1px solid #e2e8f0}
.q-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.q-head>span{color:#64748b;font-size:11px;font-weight:600}
.q-head i{font-size:9px;margin-right:5px}
.q-tabs{display:flex;gap:3px}
.q-tabs em{padding:3px 8px;font-size:10px;color:#94a3b8;background:#f1f5f9;border-radius:10px;cursor:pointer;font-style:normal}
.q-tabs em.active{background:#667eea;color:#fff}
.q-list{background:#fff;min-height:40px;overflow:visible;position:relative}
.q-list:empty::after{content:Henuz istek yok;display:block;padding:20px;text-align:center;color:#cbd5e1;font-size:11px}
.dim-send-wrap {
    padding: 0 0 12px;
    position: relative;
}
.dim-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.dim-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.dim-input:focus {
    border-color: #6366f1;
}
.dim-send-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dim-send-btn:hover {
    background: #4f46e5;
}
.dim-oneri-list {
    position: absolute;
    top: 42px;
    left: 0;
    right: 42px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}
.dim-oneri-item {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.dim-oneri-item:last-child {
    border-bottom: none;
}
.dim-oneri-item:hover {
    background: #f1f5f9;
}
.dim-tabs {
    display: flex;
    border-bottom: 2px solid #f1f5f9;
    gap: 0;
}
.dim-tab {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.dim-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
}
.dim-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 4px;
}
.dim-tab-count:empty {
    display: none;
}
.dim-content {
    max-height: none;
}
.dim-tab-content {
    display: none;
}
.dim-tab-content.active {
    display: block;
}
.dim-temizle-wrap {
    padding: 10px 14px;
    text-align: right;
    border-top: 1px solid #f1f5f9;
}
.dim-temizle-btn {
    padding: 6px 14px;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #dc2626;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.dim-temizle-btn:hover {
    background: #fef2f2;
}
.istek-empty {
    padding: 30px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}
.dim-badge {
    position: absolute;
    top: -2px;
    right: -6px;
    writing-mode: horizontal-tb;
    background: #ef4444;
    color: #fff;
    font-size: 8px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.dark .dim-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.dark .dim-oneri-list {
    background: #1e293b;
    border-color: #334155;
}
.dark .dim-oneri-item:hover {
    background: #334155;
}
.dark .dim-tabs {
    border-bottom-color: #334155;
}
.dark .dim-tab.active {
    color: #818cf8;
    border-bottom-color: #818cf8;
}
.dark .dim-temizle-wrap {
    border-top-color: #334155;
}
.dark .istek-empty {
    color: #64748b;
}

/* DJ Not */
.dim-dj-not-wrap {
    padding: 0 0 10px;
}
.dim-dj-not-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
}
.dim-dj-not-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    outline: none;
    color: #334155;
}
.dim-dj-not-btn {
    padding: 4px 12px;
    border: none;
    background: #6366f1;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.dim-dj-not-btn:hover {
    background: #4f46e5;
}
.dim-dj-not-show {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dim-dj-not-show i {
    font-size: 11px;
    opacity: 0.8;
}

/* Tab Frames */
.dim-tab-frame {
    border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    border-top: none;
    margin: 0 0 8px;
}
.dark .dim-tab-frame {
    border-color: #334155;
}
.dark .dim-dj-not-bar {
    background: #1e293b;
    border-color: #475569;
}
.dark .dim-dj-not-input {
    color: #e2e8f0;
}

/* DJ Istek - Tamamlandi (Finished) State */
.iq-done{background:#f0fdf4;color:#16a34a}
.dot-done{background:#16a34a}
.iq-item.iq-state-done{background:linear-gradient(90deg,rgba(22,163,74,.04),transparent)}

/* DJ Istek - Closed full screen */
.dim-closed-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:14px}
.dim-closed-screen i{font-size:42px;color:#d1d5db}
.dim-closed-screen span{font-size:14px;font-weight:600;color:#9ca3af}
.istek-closed-full{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:#9ca3af}
.istek-closed-full i{font-size:36px;color:#d1d5db}
.istek-closed-full span{font-size:13px;font-weight:600;color:#9ca3af}
/* ===== DJ ISTEK - IQ ITEMS (system/element/istek.php'den taşındı) ===== */
.iq-item{padding:0 14px;border-bottom:1px solid #f0f0f0;transition:background .15s}
.iq-item:last-child{border-bottom:none}
.iq-item:hover{background:#fafbfc}
.iq-item.iq-state-play{background:linear-gradient(90deg,rgba(16,185,129,.04),transparent)}
.iq-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0 4px}
.iq-left{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0;flex:1}
.iq-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid #eee}
.iq-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.iq-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-date{font-size:10px;color:#aaa;letter-spacing:.2px}
.iq-right{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative}
.iq-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot-wait{background:#f59e0b}
.dot-queue{background:#3b82f6}
.dot-play{background:#10b981;animation:iqPulse 1.5s infinite}
.dot-done{background:#16a34a}
@keyframes iqPulse{50%{opacity:.4}}
.iq-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:10px;white-space:nowrap}
.iq-badge i{font-size:8px;margin-right:2px}
.iq-wait{background:#fef9ee;color:#b45309}
.iq-queue{background:#eff6ff;color:#2563eb}
.iq-play{background:#ecfdf5;color:#059669}
.iq-done{background:#f0fdf4;color:#16a34a}
.iq-msg{padding:2px 0 8px 44px;font-size:13px;line-height:1.5;color:#444;word-break:break-word}
.iq-menu-wrap{position:relative}
.iq-dots-btn{background:none;border:none;cursor:pointer;padding:4px 6px;font-size:14px;color:#999;border-radius:4px;transition:all .15s}
.iq-dots-btn:hover{background:#f0f0f0;color:#555}
.iq-dropdown{display:none;position:absolute;right:0;top:100%;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);min-width:130px;z-index:100;overflow:hidden;border:1px solid #eee}
.iq-menu-wrap.open .iq-dropdown{display:block}
.iq-drop-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:500;cursor:pointer;transition:background .12s;color:#444}
.iq-drop-item:hover{background:#f5f5f5}
.iq-drop-item i{width:14px;text-align:center;font-size:11px}
.iq-drop-red{color:#d97706}
.iq-drop-red:hover{background:#fffbeb}
.iq-drop-del{color:#dc2626}
.iq-drop-del:hover{background:#fef2f2}
@media(max-width:480px){.iq-msg{padding-left:0}}
.dj-istek-btn {
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: #e0e0e0;
    color: #333;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 0 4px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.dj-istek-btn:hover {
    background: #d0d0d0;
    color: #111;
}

/* DJ Istek Modal */
.dj-istek-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.dj-istek-modal-overlay.active {
    display: flex;
}
.dj-istek-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: djModalIn 0.25s ease-out;
}
.dj-istek-modal-body {
    flex: 1;
    overflow-y: auto;
}
@keyframes djModalIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media(max-width:768px){
    .dj-istek-modal-overlay.active{align-items:flex-end}
    .dj-istek-modal{width:100%;max-width:100%;height:95vh;border-radius:16px 16px 0 0;animation:djModalSlideUp .25s ease-out;overflow:hidden;display:flex;flex-direction:column}
    .dj-istek-modal .dj-istek-modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
    @keyframes djModalSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
.dj-istek-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
}
.dj-istek-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}
.dj-istek-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    transition: all 0.15s;
}
.dj-istek-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.dj-istek-modal-body {
    padding: 20px 18px;
    min-height: 150px;
    color: #475569;
    font-size: 13px;
}
.dark .dj-istek-modal {
    background: #1e293b;
}
.dark .dj-istek-modal-header {
    border-bottom-color: #334155;
}
.dark .dj-istek-modal-header h3 {
    color: #e2e8f0;
}
.dark .dj-istek-modal-close {
    background: #334155;
    color: #94a3b8;
}
.dark .dj-istek-modal-body {
    color: #cbd5e1;
}

.rp-actions {
    gap: 5px;
    padding: 10px 10px;
}
.rp-actions a {
    padding: 6px 10px;
    font-size: 11px;
    gap: 4px;
}
.rp-actions a i {
    font-size: 10px;
}
.rp-live {
    gap: 10px;
    padding: 12px 12px;
}
.rp-live .live-info .dj-nick {
    font-size: 15px;
}
.rp-req {
    margin: 10px 8px;
}
.rp-queue {
    margin: 10px 8px;
}
.q-tabs em {
    padding: 3px 6px;
    font-size: 10px;
}
.dj-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* DJ Card */
.dj-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dj-card:hover {
    border-color: #c7d2fe;
    background: #fafaff;
}

.dj-card.live {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-color: #86efac;
}

.card-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dj-card.live .avatar {
    border-color: #22c55e;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.status {
    font-size: 12px;
    color: #64748b;
}

.status.live {
    color: #22c55e;
}

.status.live i {
    font-size: 8px;
    animation: pulse 1.5s infinite;
}

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

/* Action Buttons */
.card-actions {
    display: flex;
    gap: 6px;
}

.action-btn {
    height: 30px;
    padding: 0 10px;
    border: none;
    background: #fff;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.action-btn:hover { background: #f1f5f9; }

.action-btn.success {
    background: #dcfce7;
    color: #22c55e;
    border-color: #bbf7d0;
}

.action-btn.success:hover {
    background: #22c55e;
    color: #fff;
}

.action-btn.warning {
    background: #fef3c7;
    color: #f59e0b;
    border-color: #fde68a;
}

.action-btn.warning:hover {
    background: #f59e0b;
    color: #fff;
}

.action-btn.danger {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fecaca;
}

.action-btn.danger:hover {
    background: #ef4444;
    color: #fff;
}
.rp_dj_section {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.rp_dj_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rp_dj_left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rp_dj_mic {
    color: #667eea;
    font-size: 16px;
}
.rp_dj_label {
    font-size: 13px;
    color: #333;
    font-weight: 700;
}
.rp_dj_name_box {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
}
.esunus_djismi2 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #333 !important;
}
.rp_dj_time_box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rp_dj_time_box i {
    font-size: 10px;
}
.rp_dj_right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rp_dj_time {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}
.rp_listener_box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f4ff;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #dce3f5;
    color: #4f5ebd;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.rp_listener_box:hover { background: #e0e7ff; }
.rp_listener_box i { font-size: 11px; }
.dj-panel {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.rp_dj_widget {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.rp_dj_iframe {
    width: 100%;
    height: 120px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}
.esunusdjx {
    max-width: 40px;
    max-height: 40px;
    width: 45px !important;
    height: 45px !important;
    border-radius: 8px;
    object-fit: cover;
    position: relative;
    left: 0;
    margin-top: 6px;
    margin-right: 7px;
    float: left;
}
.bordox_dj { 
	left: 0;
    right: 0;   
    margin-left: auto;
    margin-right: auto;
    width: 260px;
	position: absolute;	
	z-index: 19;	
	border-radius: 10px;	
    background: #e0e0e0;
}
.dj-drawer{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .5s ease;opacity:0;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%);border-radius:0 0 10px 10px;margin-top:-1px;box-shadow:0 4px 15px rgba(99,102,241,.15)}
.djg-period-filter{display:flex;gap:6px;padding:10px 12px;background:rgba(0,0,0,0.02);border-radius:8px;margin-bottom:10px}
.djg-period-btn{background:#fff;border:1px solid #e0e0e0;color:#888;padding:5px 14px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s}
.djg-period-btn:hover{border-color:#7c6bf5;color:#7c6bf5}
.djg-period-btn.active{background:#7c6bf5;color:#fff;border-color:#7c6bf5}

.djg-section-title{font-size:12px;font-weight:700;color:#555;padding:8px 12px 6px;display:flex;align-items:center;gap:6px}

.djg-table{width:100%;border-collapse:collapse}
.djg-table thead th{text-align:left;padding:8px 12px;font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.8px;border-bottom:2px solid #eee;background:#fafafa}
.djg-th-dj{width:50%}
.djg-th-time{width:25%}
.djg-th-date,.djg-th-count{width:25%}

.djg-tr td{padding:10px 12px;border-bottom:1px solid #eee;vertical-align:middle}
.djg-tr:last-child td{border-bottom:none}
.djg-tr:hover td{background:#f8f7ff}

.djg-tr-live td{background:#f0fdf4;border-bottom-color:#d1fae5}
.djg-tr-live:hover td{background:#e8fce8}

.djg-dj-cell{display:flex;align-items:center;gap:10px}
.djg-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #eee}
.djg-tr-live .djg-av{border-color:#86efac}

.djg-dj-info{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.djg-nick{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.djg-rank-icon{height:14px;flex-shrink:0}
.djg-rank-text{font-size:10px;font-weight:500}

.djg-live-badge{display:inline-block;background:#ef4444;color:#fff;font-size:8px;font-weight:800;padding:2px 7px;border-radius:3px;margin-left:4px;animation:djgPulse 1.5s infinite;letter-spacing:1px}
@keyframes djgPulse{0%,100%{opacity:1}50%{opacity:.5}}

.djg-td-time{font-weight:700;font-size:12px;color:#7c6bf5;white-space:nowrap}
.djg-td-date{font-size:11px;color:#999;white-space:nowrap}
.djg-td-count{font-size:11px;color:#999;text-align:center}
.djg-th-num{width:30px;text-align:center}
.djg-td-num{font-weight:700;font-size:13px;color:#7c6bf5;text-align:center}
.wallet-share-btn:hover{opacity:.9;transform:scale(1.02)}
.wallet-share-btn:active{transform:scale(.98)}
#wallet_user_search:focus{border-color:rgba(99,102,241,0.5)}
.dj-drawer.dj-drawer-open{max-height:42px !important;opacity:1}
.dj-drawer { width: 266px !important; }
.dj-drawer-inner{display:flex;align-items:center;gap:8px;padding:7px 10px;position:relative;overflow:hidden}
.dj-drawer-inner::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(139,92,246,.08),transparent);animation:djDrawerShine 3s ease-in-out infinite}
@keyframes djDrawerShine{0%{left:-100%}100%{left:200%}}
.dj-drawer-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:djDrawerPulse 1.5s ease-in-out infinite;box-shadow:0 0 6px rgba(34,197,94,.5)}
@keyframes djDrawerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.dj-drawer-text{flex:1;min-width:0;font-size:11px;color:rgba(255,255,255,.75);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.dj-drawer-text strong{color:#c4b5fd;font-weight:700}
.dj-drawer-btn{padding:5px 14px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:16px;font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:5px;transition:all .2s;flex-shrink:0;position:relative;z-index:1;box-shadow:0 2px 8px rgba(124,58,237,.3)}
.dj-drawer-btn:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed);transform:scale(1.04);box-shadow:0 3px 12px rgba(124,58,237,.4)}
.dj-drawer-btn i{font-size:12px}
.rp{background:#f5f6fa;font-size:13px}
.rp-live{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:#fff;position:relative;overflow:hidden}
.rp-live::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:rgba(255,255,255,.1);border-radius:50%}
.rp-live::after{content:'';position:absolute;bottom:-40px;left:20px;width:80px;height:80px;background:rgba(255,255,255,.05);border-radius:50%}
.live-dot{width:10px;height:10px;background:#4ade80;border-radius:50%;animation:blink 1s infinite;box-shadow:0 0 10px #4ade80}
@keyframes blink{50%{opacity:.4}}
.live-av-wrap{position:relative;width:44px;height:44px;flex-shrink:0}
.live-av{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.4);box-shadow:0 2px 12px rgba(0,0,0,.3);position:relative;z-index:2}
.wave-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.4);border-radius:50%;animation:wave-pulse 2s ease-out infinite}
.wave-ring.r1{width:54px;height:54px;animation-delay:0s}
.wave-ring.r2{width:64px;height:64px;animation-delay:.4s}
.wave-ring.r3{width:74px;height:74px;animation-delay:.8s}
@keyframes wave-pulse{0%{transform:translate(-50%,-50%) scale(.8);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.live-info{flex:1;position:relative;z-index:1}
.live-info .dj-nick{display:block;font-size:18px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.live-info .live-text{display:inline-block;opacity:.95;font-size:11px;font-weight:600;animation:pulse-text 2s ease-in-out infinite;letter-spacing:.5px}
@keyframes pulse-text{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
.live-stats{display:flex;gap:12px;font-size:12px}
.live-stats i{font-size:10px;opacity:.7;margin-right:3px}
.rp-off{display:flex;align-items:center;gap:12px;padding:20px 16px;color:#94a3b8;background:#fff}
.rp-off i{font-size:20px;opacity:.5}
.rp-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;background:#fff;border-bottom:1px solid #eee}
.rp-actions a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#f1f5f9;color:#475569;border-radius:8px;cursor:pointer;font-size:12px;transition:all .2s;font-weight:500}
.rp-actions a:hover{background:#e2e8f0;transform:translateY(-1px)}
.rp-actions a i{font-size:11px;opacity:.8}
.rp-actions a.go{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;box-shadow:0 2px 10px rgba(139,92,246,.3)}
.rp-actions a.go:hover{box-shadow:0 4px 15px rgba(139,92,246,.4)}
.rp-req{background:#fff;margin:12px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.req-head{padding:12px 14px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-bottom:1px solid #e2e8f0;font-size:12px;color:#64748b;font-weight:600}
.req-head i{margin-right:8px;font-size:11px;color:#667eea}
.req-body{display:flex;gap:10px;padding:12px}
.req-body textarea{flex:1;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;font-size:13px;resize:none;min-height:40px;outline:none;transition:border .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.req-body textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}
.req-body button{width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.req-body button:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(102,126,234,.3)}
.req-body button i{font-size:13px}
.rp-warn{display:flex;align-items:center;gap:10px;margin:0 12px 12px;padding:12px 14px;background:linear-gradient(135deg,#fef3c7,#fef9c3);color:#92400e;border-radius:8px;font-size:12px;border:1px solid #fde68a}
.rp-warn i{font-size:12px}
.rp-queue{background:#fff;margin:12px;border-radius:10px;overflow:visible;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.q-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #eee;background:#fafbfc}
.q-head>span{color:#64748b;font-size:12px;font-weight:600}
.q-head i{font-size:10px;margin-right:6px}
.q-tabs{display:flex;gap:4px}
.q-tabs em{padding:4px 8px;font-size:11px;color:#94a3b8;background:#f1f5f9;border-radius:4px;cursor:pointer;font-style:normal}
.q-tabs em:hover{color:#64748b}
.q-tabs em.active{background:#667eea;color:#fff}
.q-list{}
.q-list:empty::after{content:"Henuz istek yok";display:block;padding:24px;text-align:center;color:#cbd5e1;font-size:12px}

/* ========== Yayin Program Modal ========== */
.yayin-program-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;display:none;justify-content:center;align-items:center;backdrop-filter:blur(4px)}
.yayin-program-modal.active{display:flex}
.yayin-program-modal.fullscreen .yp-content{width:100%;height:100%;border-radius:0;max-height:100%}

@keyframes yp-slide-up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.yp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.yp-header span{font-weight:700;font-size:15px}
.yp-header-btns{display:flex;gap:8px}
.yp-header-btns i{cursor:pointer;font-size:16px;opacity:.8;transition:opacity .2s}
.yp-header-btns i:hover{opacity:1}
.yp-body{padding:30px 24px;text-align:center}
.yp-body .yp-icon{font-size:48px;color:#667eea;margin-bottom:16px}
.yp-body h3{font-size:18px;color:#1e293b;margin-bottom:10px;font-weight:700}
.yp-body p{font-size:13px;color:#64748b;line-height:1.6}

/* Yayin Program Mini Avatar */
.yp-mini{position:fixed;bottom:68px;right:14px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:999;box-shadow:0 4px 15px rgba(102,126,234,.5);animation:yp-pulse 1.5s ease-in-out infinite}
.yp-mini.active{display:flex}
.yp-mini i{color:#fff;font-size:18px}
@keyframes yp-pulse{0%,100%{box-shadow:0 4px 15px rgba(102,126,234,.5);transform:scale(1)}50%{box-shadow:0 4px 25px rgba(102,126,234,.8);transform:scale(1.08)}}

/* Modal içindeki kullanıcı listesi düzeltmesi */
.modal_zone .ulist_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.modal_zone .ulist_avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_zone .ulist_avatar .ulist_avatar_img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.modal_zone .ulist_name {
    flex: 1;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.modal_zone .ulist_name p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}
.panel-covering .topdjwraper,
.panel-covering .topdjcontrol::before,
.panel-covering .topdjwraper * {
    animation-play-state: paused !important;
}
.hc-wrap {
    background: linear-gradient(145deg,#0f172a,#020617);
    padding: 2px;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* INNER GLASS */
.hc-inner {
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

/* WALLET */
.hc-wallet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hc-wallet-item {
    padding: 14px 5px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.05);
    transition: 0.3s;
}

.hc-wallet-item:hover {
    background: rgba(255,255,255,0.03);
}

.hc-wallet-item:last-child {
    border-right: none;
}

.hc-wallet-item i {
    font-size: 20px;
    margin-bottom: 6px;
    display: block;
}

.hc-wallet-item span {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
}

.hc-wallet-item b {
    font-size: 15px;
    color: #fff;
    display: block;
    margin-top: 3px;
}

/* ICON COLORS */
.hc-wallet-item:nth-child(1) i { color: #fbbf24; }
.hc-wallet-item:nth-child(2) i { color: #fb7185; }
.hc-wallet-item:nth-child(3) i { color: #22d3ee; }

/* CANVAS */
.hc-canvas-area {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

/* WHEEL */
#wheelCanvas { 
    width: 100% !important; 
    height: 100% !important; 
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

#indicator { 
    display: none; 
}
/* PLAY BUTTON */
.hc-play-btn { 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    background: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #111827; 
    font-weight: 800; 
    font-size: 14px;
    z-index: 20; 
    box-shadow: 0 0 20px rgba(255,255,255,0.4), inset 0 0 10px rgba(0,0,0,0.1);
    border: 4px solid #111827;
    cursor: pointer;
    transition: transform 0.2s;
}


.hc-play-btn:hover {
    transform: scale(1.1) rotate(10deg);
}

.hc-play-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* FREE SPIN EFFECT */
.free-spin {
    box-shadow: 0 0 35px #fbbf24;
    animation: pulse 1.2s infinite;
    background: radial-gradient(circle,#fbbf24,#d97706) !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.hc-play-btn:active {
    transform: scale(0.9);
}