/* YouTube Studio Özel Stilleri - Açık & Koyu Tema */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --bg-main: #0f0f0f;
    --bg-card: #1f1f1f;
    --border-color: #2e2e2e;
    --text-main: #f1f1f1;
    --text-sub: #aaaaaa;
    --hover-bg: #282828;
    --input-bg: #0f0f0f;
}

html.light {
    --bg-main: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --text-main: #0f0f0f;
    --text-sub: #6b7280;
    --hover-bg: #f3f4f6;
    --input-bg: #ffffff;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dinamik Renk Sınıfları */
.theme-bg-main { background-color: var(--bg-main); }
.theme-bg-card { background-color: var(--bg-card); }
.theme-border { border-color: var(--border-color); }
.theme-text-main { color: var(--text-main); }
.theme-text-sub { color: var(--text-sub); }
.theme-hover:hover { background-color: var(--hover-bg); }

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Yanıp sönen canlı nokta efekti */
.pulse-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
}
.pulse-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #22c55e;
    opacity: 0.75;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ApexCharts Temaları */
.dark .apexcharts-tooltip {
    background: #1f1f1f !important;
    border-color: #2e2e2e !important;
    color: #f1f1f1 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7) !important;
}
.dark .apexcharts-tooltip-title {
    background: #181818 !important;
    border-bottom: 1px solid #2e2e2e !important;
}

.light .apexcharts-tooltip {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}
.light .apexcharts-tooltip-title {
    background: #f3f4f6 !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #111827 !important;
}

/* Sürükle Bırak Sıralama Efektleri */
.sortable-ghost {
    opacity: 0.4;
    background: #ef444420 !important;
    border: 2px dashed #ef4444 !important;
}
.sortable-chosen {
    cursor: grabbing !important;
}