/*
  ======================================================================
  SENKRO ANA ARAYÜZ STİLLERİ (senkro-style.css)
  Geliştirici Notu: Bu dosya grid yapısını, kenar çubuklarını (sidebar),
  dosya sürükle-bırak alanlarını, taslakları ve genel UI kartlarını içerir.
  ======================================================================
*/

:root {
    --snk-bg-page: #f1f5f9; 
    --snk-bg-card: #ffffff;
    --snk-text-main: #0f172a; 
    --snk-text-muted: #64748b; 
    --snk-primary: #890000; 
    --snk-primary-hover: #6b0000; 
    --snk-border: #e2e8f0;
    --snk-success-bg: #ecfdf5;
    --snk-success-text: #059669;
    --snk-success-border: #a7f3d0;
    --snk-danger-bg: #fef2f2;
    --snk-danger-text: #e11d48;
}

/* =========================================================
   1. GENEL KAPSAYICILAR VE GRID MİMARİSİ
   ========================================================= */
.senkro-saas-wrapper {
     display: flex !important; flex-direction: column !important;
     width: 100% !important; max-width: 100% !important; 
     margin: 0 !important; padding: 0 !important; 
     background-color: transparent !important; 
     font-family: 'Inter', sans-serif !important;
     box-sizing: border-box !important; color: var(--snk-text-main) !important;
}
.senkro-saas-wrapper * { box-sizing: border-box !important; }

.senkro-app-container {
     background: transparent !important; border: none !important; border-radius: 0 !important;
     padding: 10px 0 !important; display: flex !important; flex-direction: column !important;
     gap: 24px !important; width: 100% !important;
}

#senkro-setup-view[style*="display: none"], 
#senkro-active-view[style*="display: none"] { 
    display: none !important; 
}

/* %65 Sol Editör - %35 Sağ Araçlar Grid Yapısı */
.senkro-workspace-grid {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; 
    gap: 16px !important; align-items: stretch !important; width: 100% !important;
}
.senkro-workspace-grid > .snk-editor-card {
    grid-column: span 2 !important; height: 100% !important; min-width: 0 !important; 
}
.senkro-workspace-grid > .senkro-sidebar-column {
    grid-column: span 1 !important; height: 0 !important; min-height: 100% !important;
    display: flex !important; flex-direction: column !important; gap: 24px !important;
    width: 100% !important; min-width: 0 !important; 
}

@media (max-width: 1100px) {
    .senkro-workspace-grid { grid-template-columns: 1fr !important; }
    .senkro-workspace-grid > .snk-editor-card, .senkro-workspace-grid > .senkro-sidebar-column {
        grid-column: span 1 !important; height: auto !important;
    }
    .senkro-sidebar-card { flex: none !important; min-height: 420px !important; height: auto !important; }
    .snk-file-list-container, #snk-draft-list, .snk-tab-content { min-height: 150px !important; flex-basis: auto !important; }
}

/* =========================================================
   2. ORTAK ARAYÜZ KARTLARI (Editör Dışı, Sidebar İçi)
   ========================================================= */
.snk-editor-card { 
    background: #ffffff; border: 1px solid var(--snk-border); border-radius: 16px; 
    overflow: visible; display: flex; flex-direction: column; box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
    position: relative !important;
}
.snk-editor-header { 
    padding: 12px 20px; background: #f8fafc; border-bottom: 1px solid var(--snk-border); 
    font-size: 11px; font-weight: 700; color: #64748b; display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px; 
}
.snk-editor-footer { 
    padding: 16px 20px; border-top: 1px solid var(--snk-border); background: #ffffff; 
    display: flex; justify-content: space-between; align-items: center; 
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; 
}
.snk-editor-stats { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #64748b; }
.snk-editor-stats strong { color: #0f172a; font-weight: 700; }
.snk-footer-actions { display: flex; gap: 12px; }

.senkro-sidebar-card {
    background: #ffffff !important; border: 1px solid var(--snk-border) !important; border-radius: 16px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important; display: flex !important; flex-direction: column !important;
    overflow: hidden !important; flex: 1 1 0% !important; min-height: 0 !important; min-width: 0 !important; 
}
.senkro-sidebar-header {
    padding: 14px 20px !important; border-bottom: 1px solid var(--snk-border) !important; background: #f8fafc !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; flex-shrink: 0 !important;
}
.senkro-sidebar-title { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.senkro-sidebar-body { padding: 8px 20px 20px 20px !important; display: flex !important; flex-direction: column !important; flex: 1 1 0% !important; min-height: 0 !important; min-width: 0 !important; }

/* =========================================================
   3. GENEL UI BİLEŞENLERİ VE BUTONLAR
   ========================================================= */
.snk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: none; }
.snk-btn-pill-sm { border-radius: 999px; padding: 6px 14px; font-size: 12px; }
.snk-btn-pill-lg { border-radius: 999px; padding: 10px 24px; font-size: 13px; }
.snk-bg-gray { background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0; }
.snk-bg-gray:hover { background: #e2e8f0; }
.snk-btn-outline { background: #ffffff; border: 1px solid var(--snk-border); color: #0f172a; }
.snk-btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }
.snk-btn-primary { background: var(--snk-primary); color: #ffffff !important; border: 1px solid var(--snk-primary); }
.snk-btn-primary:hover { background: #6b0000; transform: translateY(-1px); }

/* Scrollbar'lar (Liste ve Taslaklar İçin) */
#snk-draft-list::-webkit-scrollbar, .snk-file-list-container::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; }
#snk-draft-list::-webkit-scrollbar-track, .snk-file-list-container::-webkit-scrollbar-track { background-color: transparent; }
#snk-draft-list::-webkit-scrollbar-thumb, .snk-file-list-container::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 10px; }
#snk-draft-list:hover::-webkit-scrollbar-thumb, .snk-file-list-container:hover::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.4); }
#snk-draft-list, .snk-file-list-container { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s; }
#snk-draft-list:hover, .snk-file-list-container:hover { scrollbar-color: rgba(148, 163, 184, 0.4) transparent; }

/* =========================================================
   4. ÜST HEADER VE HUB (QR / KOD / CİHAZ) KARTLARI
   ========================================================= */
.snk-top-dashboard-card { background: transparent; border: none; padding: 0; margin-bottom: 24px; }
.snk-active-header-flex { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0; margin-bottom: 24px; gap: 16px; }
.snk-brand-header { display: flex; align-items: center; gap: 12px; }
.snk-brand-icon { width: 40px; height: 40px; background: var(--snk-primary); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(137, 0, 0, 0.2); }
.snk-brand-text { display: flex; align-items: center; gap: 12px; }
.snk-brand-text h2 { margin: 0 !important; font-size: 22px !important; font-weight: 800; color: var(--snk-text-main); line-height: 1 !important; letter-spacing: -0.01em; }

.snk-badge-green { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.snk-dot-pulse { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; display: inline-block; animation: snk-pulse 1.5s infinite; }
@keyframes snk-pulse { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); } 70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

.snk-header-actions-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.snk-action-btn-group { display: flex; gap: 8px; }
.snk-btn-ghost { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; transition: 0.2s !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; }
.snk-btn-ghost:hover { background: #f8fafc !important; border-color: #94a3b8 !important; }
.snk-btn-danger { background: #fef2f2 !important; color: #e11d48 !important; border: 1px solid #fecaca !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; transition: 0.2s !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; }
.snk-btn-danger:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; }

/* Hub Kartları */
.snk-hub-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.snk-hub-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03); transition: all 0.2s ease; }
.snk-hub-box:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.snk-hub-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.snk-col-title { font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 0; }
.snk-code-row { display: flex; align-items: center; justify-content: center; margin: 12px 0 20px 0; }
.snk-code-huge { font-size: 28px; font-weight: 800; color: var(--snk-text-main); letter-spacing: 8px; font-family: 'JetBrains Mono', monospace; margin: 0; line-height: 1; text-indent: 8px; }
.snk-hub-btn-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; border-top: 1px solid #e2e8f0; padding-top: 12px; margin-top: auto; }
.snk-btn-sub { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; font-size: 11px !important; font-weight: 500 !important; border-radius: 8px !important; padding: 6px 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important; cursor: pointer !important; transition: 0.2s !important; }
.snk-btn-sub:hover { background: #f8fafc !important; color: #0f172a !important; border-color: #94a3b8 !important; }

.snk-hub-box-qr { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex: 1 !important; margin-top: 8px !important; }
.snk-qr-text-area { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.snk-qr-subtitle { font-size: 12px; font-weight: 700; color: #0f172a; margin: 6px 0 2px 0 !important; }
.snk-qr-desc { font-size: 11px !important; color: #64748b !important; margin: 0 !important; line-height: 1.4 !important; }
.snk-qr-wrapper { width: 90px !important; height: 90px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; padding: 4px !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important; flex-shrink: 0 !important; box-sizing: border-box !important; }
.snk-qr-wrapper canvas { display: block; width: 100% !important; height: 100% !important; margin: auto !important; }

/* Cihaz Listesi */
.snk-status-message { font-size: 13px; font-weight: 700; color: var(--snk-primary); text-align: center; margin: auto 0; }
.snk-device-list-container { width: 100%; margin-top: 16px !important; display: flex; flex-direction: column; box-sizing: border-box !important; }
.snk-device-wrapper { width: 100%; display: flex; flex-direction: column; margin-top: auto; }
.snk-device-item-borderless { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.snk-device-icon-box { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; }
.snk-device-info-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; overflow: hidden; }
.snk-device-name { font-size: 14px; font-weight: 700; color: var(--snk-text-main); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: left; line-height: 1; }
.snk-device-meta { font-size: 12px; color: #64748b; margin: 0; line-height: 1; }
.snk-device-divider { width: 100%; height: 1px; background: #e2e8f0; margin: 0 0 12px 0; }
.snk-device-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.snk-sync-status { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: color 0.3s; }
.snk-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; transition: background 0.3s; }
.snk-device-btn-text { background: transparent; border: none; cursor: pointer; font-size: 12px; font-weight: 700; padding: 0; transition: 0.2s; font-family: 'Inter', sans-serif; }
.snk-device-btn-text:hover { opacity: 0.7; text-decoration: underline; }

@media (max-width: 900px) { .snk-hub-grid { grid-template-columns: 1fr; } .snk-hub-box-qr { flex-direction: column; text-align: center; } }
@media (max-width: 850px) {
    .snk-active-header-flex { flex-direction: column; align-items: stretch; }
    .snk-header-actions-right { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
    .snk-badge-green { width: 100%; justify-content: center; }
    .snk-action-btn-group { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
    .snk-action-btn-group .snk-btn { width: 100%; justify-content: center; padding: 6px 14px; }
}
@media (max-width: 480px) { .snk-action-btn-group { grid-template-columns: 1fr; } }

/* =========================================================
   5. TASLAKLAR VE DOSYA AKTARIMI
   ========================================================= */
.snk-draft-input-group { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; width: 100% !important; flex-shrink: 0 !important; }
.snk-draft-input-group input { flex: 1 !important; min-width: 0 !important; }
#snk-draft-list { flex: 1 1 0% !important; max-height: none !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding-right: 4px !important; min-height: 0 !important; min-width: 0 !important; scrollbar-gutter: stable !important; }

.snk-draft-name-tooltip[data-tooltip]::after { white-space: normal !important; width: max-content !important; max-width: 220px !important; word-wrap: break-word !important; line-height: 1.4 !important; text-align: left !important; left: 0 !important; transform: none !important; }
.snk-tooltip-up[data-tooltip]::after { top: auto !important; bottom: calc(100% + 6px) !important; }
#snk-draft-list .snk-draft-load[data-tooltip]::after, #snk-draft-list .snk-draft-delete[data-tooltip]::after { top: calc(100% + 6px) !important; bottom: auto !important; left: auto !important; right: 0 !important; transform: none !important; }
#snk-draft-list .snk-draft-load.snk-tooltip-up[data-tooltip]::after, #snk-draft-list .snk-draft-delete.snk-tooltip-up[data-tooltip]::after { top: auto !important; bottom: calc(100% + 6px) !important; }

/* Global Dropzone (Tüm Ekrana Sürükle Bırak) */
.snk-dropzone-overlay {
    position: absolute !important; inset: 0 !important; background: rgba(241, 245, 249, 0.90) !important;
    backdrop-filter: blur(5px) !important; z-index: 9000 !important; display: flex !important;
    align-items: center !important; justify-content: center !important; opacity: 0; visibility: hidden;
    transition: 0.2s ease !important; border: 3px dashed var(--snk-primary) !important; border-radius: inherit !important; pointer-events: none;
}
.snk-dropzone-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }
.snk-dropzone-content { text-align: center !important; color: var(--snk-primary) !important; pointer-events: none !important; }
.snk-dropzone-content svg { margin-bottom: 12px !important; }
.snk-dropzone-content h2 { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; }
.snk-dropzone-content p { margin: 8px 0 0 0 !important; font-size: 14px !important; color: #64748b !important; }

/* Lokal Dosya Aktarım Alanı */
.snk-local-dropzone { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 12px 16px !important; margin-bottom: 10px !important; text-align: center; background: #f8fafc; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.snk-local-dropzone:hover, .snk-local-dropzone.dragover { border-color: var(--snk-primary); background: #fdf2f2; }
.snk-dropzone-icon { width: 32px !important; height: 32px !important; margin-bottom: 6px !important; border-radius: 50%; background: #fee2e2; color: #890000; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.snk-dropzone-icon svg { width: 16px !important; height: 16px !important; }
.snk-local-dropzone:hover .snk-dropzone-icon, .snk-local-dropzone.dragover .snk-dropzone-icon { transform: translateY(-3px); }
.snk-dropzone-title { font-size: 12px !important; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.snk-dropzone-sub { font-size: 10px !important; color: #64748b !important; margin-top: 2px !important; }

/* =========================================================
   6. DOSYA AKTARIMI SEKMELERİ (KAPSÜL VE BUTONLAR)
   Geliştirici Notu: Eski altı çizgili sekmeler yerine modern hap
   (segmented control) tasarımına geçilmiştir.
   ========================================================= */
.snk-tab-header {
    margin-bottom: 12px;
    flex-shrink: 0;
    display: flex;
}

/* Tüm Sekmeleri ve Butonları Saran Kapsül */
.snk-tabs-wrapper {
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #e2e8f0;
    justify-content: space-between;
}

.snk-tabs {
    display: flex;
    gap: 12px; /* Rozetin ezilmesini engeller */
}

/* Sol Sekmeler (Sadece Yazı + Bildirim Rozeti) */
.snk-tab-btn {
    background: transparent;
    border: none;
    padding: 4px 12px;
    font-size: 12px; 
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: 'Inter', sans-serif;
}

/* Sağ Üst Köşedeki Kırmızı Rozet */
.snk-tab-btn span { 
    background: #ef4444; 
    color: #ffffff !important; 
    border-radius: 4px; 
    padding: 2px 5px; 
    font-size: 9px; 
    font-weight: 700; 
    transition: all 0.2s; 
    position: absolute;
    top: -6px;
    right: -8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 10;
}

.snk-tab-btn:hover { color: #0f172a; background: #e2e8f0; }
.snk-tab-btn.active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* Sağ Taraf: Ayırıcı ve İkonik Temizle Butonu */
.snk-actions-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.snk-action-divider {
    width: 1px;
    height: 16px;
    background-color: #cbd5e1;
    margin: 0 4px;
}

.snk-tab-actions {
    display: flex;
    align-items: center;
    padding-right: 4px;
}

.snk-action-btn {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}
.snk-action-btn svg { width: 15px; height: 15px; }
.snk-action-btn:hover { background: #e2e8f0; color: var(--snk-danger-text); }

/* Tooltip'in ekrandan taşmasını engellemek için sola yasla */
.snk-action-btn[data-tooltip]::after {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* Dosya Aktarım Listeleri */
.snk-file-list-container { max-height: none !important; flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; display: flex; flex-direction: column; gap: 8px; }
.snk-empty-state { text-align: center; padding: 30px 20px; font-size: 13px; color: #94a3b8; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; line-height: 1.5; font-weight: 500; }
.snk-file-card { padding: 4px 10px !important; border-bottom: 1px solid var(--snk-border); border-top: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; font-size: 13px; background: #ffffff; }
.snk-file-info-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.snk-file-icon { width: 28px !important; height: 28px !important; border-radius: 6px !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f1f5f9; color: var(--snk-primary); }
.snk-file-icon svg { width: 14px !important; height: 14px !important; }
.snk-file-details { flex: 1; min-width: 0; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; }
.sc-file-name { font-size: 13px !important; font-weight: 600 !important; color: #0f172a; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.sc-file-meta { font-size: 11px !important; color: #64748b !important; white-space: nowrap; flex-shrink: 0; margin-top: 0 !important; }
.snk-file-actions { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }
.snk-circle-prog { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--snk-primary) var(--pct, 0%), #e2e8f0 0); display: flex; align-items: center; justify-content: center; }
.snk-circle-prog-inner { width: 20px; height: 20px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #0f172a; }
.snk-progress-bg { display: none !important; }

/* Turuncu Animasyon */
.snk-pulse-orange { animation: snk-pulse-org 1.5s infinite; }
@keyframes snk-pulse-org { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); } 70% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); } }

/* =========================================================
   7. KARANLIK MOD (SADECE DIŞ ARAYÜZ, DAHİLİ EDİTÖR HARİÇ)
   ========================================================= */
html.dark-mode .senkro-saas-wrapper, html.dark-mode .senkro-app-container { background-color: transparent !important; }

/* Üst Header */
html.dark-mode .snk-brand-text h2 { color: #f9fafb !important; }
html.dark-mode .snk-editor-footer { background-color: #111827 !important; border-top: 1px solid #374151 !important; }
html.dark-mode .snk-editor-stats { color: #9ca3af !important; }
html.dark-mode .snk-editor-stats strong { color: #f9fafb !important; }
html.dark-mode .snk-badge-green { background-color: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
html.dark-mode .snk-btn-ghost { background: #111827 !important; border-color: #374151 !important; color: #d1d5db !important; }
html.dark-mode .snk-btn-ghost:hover { background: #1f2937 !important; border-color: #4b5563 !important; }
html.dark-mode .snk-btn-danger { background: rgba(185, 28, 28, 0.1) !important; border-color: rgba(185, 28, 28, 0.3) !important; color: #fca5a5 !important; }
html.dark-mode .snk-btn-danger:hover { background: rgba(185, 28, 28, 0.2) !important; color: #fecaca !important; }

/* Hub Kartları */
html.dark-mode .snk-hub-box { background-color: #1f2937 !important; border-color: #374151 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; }
html.dark-mode .snk-hub-box:hover { border-color: #4b5563 !important; background-color: #232d3b !important; }
html.dark-mode .snk-col-title { color: #9ca3af !important; }
html.dark-mode .snk-code-huge { color: #f9fafb !important; }
html.dark-mode .snk-btn-sub { background-color: #111827 !important; border-color: #374151 !important; color: #d1d5db !important; }
html.dark-mode .snk-btn-sub:hover { background-color: #1f2937 !important; border-color: #4b5563 !important; color: #f9fafb !important; }
html.dark-mode .snk-qr-subtitle, html.dark-mode .snk-device-name { color: #f9fafb !important; }
html.dark-mode .snk-qr-desc, html.dark-mode .snk-device-meta { color: #9ca3af !important; }
html.dark-mode .snk-qr-wrapper { background-color: #ffffff !important; border-color: #ffffff !important; padding: 8px !important; border-radius: 8px !important; }
html.dark-mode .snk-qr-wrapper canvas, html.dark-mode .snk-qr-wrapper img { background-color: #ffffff !important; display: block; }
html.dark-mode .snk-device-icon-box { background-color: #111827 !important; border-color: #374151 !important; color: #d1d5db !important; }
html.dark-mode .snk-device-divider, html.dark-mode .snk-hub-btn-group { border-color: #374151 !important; }

/* Sidebar Kartları */
html.dark-mode .senkro-sidebar-card, html.dark-mode .snk-editor-card { background-color: #1f2937 !important; border-color: #374151 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; }
html.dark-mode .senkro-sidebar-header, html.dark-mode .snk-editor-header { background-color: #111827 !important; border-color: #374151 !important; }
html.dark-mode .senkro-sidebar-title { color: #f9fafb !important; }
html.dark-mode .senkro-sidebar-title span { color: #f9fafb !important; }
html.dark-mode .senkro-sidebar-title div[style*="#eff6ff"] { background-color: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; }
html.dark-mode .senkro-sidebar-title div[style*="#fdf2f2"] { background-color: rgba(225, 29, 72, 0.1) !important; border-color: rgba(225, 29, 72, 0.2) !important; color: #f43f5e !important; }

/* Taslaklar */
html.dark-mode .snk-draft-input-group input { background-color: #111827 !important; border-color: #374151 !important; color: #f9fafb !important; }
html.dark-mode .snk-draft-input-group input:focus { border-color: #b91c1c !important; }
html.dark-mode .snk-draft-count-badge { background-color: #111827 !important; border-color: #374151 !important; color: #d1d5db !important; }
html.dark-mode #snk-draft-list > div { background-color: #1f2937 !important; border-color: #374151 !important; }
html.dark-mode #snk-draft-list > div:hover { border-color: #4b5563 !important; }
html.dark-mode #snk-draft-list span { color: #d1d5db !important; }
html.dark-mode .snk-truncate-target { color: #f9fafb !important; }
html.dark-mode .snk-draft-load:hover { background-color: #374151 !important; color: #f9fafb !important; }
html.dark-mode .snk-draft-delete:hover { background-color: rgba(185, 28, 28, 0.2) !important; color: #fca5a5 !important; }

/* Dosya Aktarımı */
html.dark-mode .snk-empty-state { background-color: transparent !important; border: 1px dashed #4b5563 !important; color: #9ca3af !important; }
html.dark-mode .snk-local-dropzone { background-color: #111827 !important; border-color: #4b5563 !important; }
html.dark-mode .snk-local-dropzone:hover { background-color: rgba(185, 28, 28, 0.05) !important; border-color: #b91c1c !important; }
html.dark-mode .snk-dropzone-icon { background-color: rgba(185, 28, 28, 0.1) !important; color: #fca5a5 !important; }
html.dark-mode .snk-dropzone-title { color: #f9fafb !important; }
html.dark-mode .snk-dropzone-sub { color: #9ca3af !important; }
html.dark-mode .snk-file-card { background-color: #111827 !important; border-color: #374151 !important; border-radius: 8px !important; margin-bottom: 2px !important; transition: all 0.2s !important; }
html.dark-mode .snk-file-card:hover { border-color: #4b5563 !important; }
html.dark-mode .sc-file-name { color: #f9fafb !important; }
html.dark-mode .sc-file-meta { color: #9ca3af !important; }
html.dark-mode .snk-file-icon { background-color: rgba(59, 130, 246, 0.1) !important; color: #60a5fa !important; }

/* Karanlık Mod Kapsül ve İkonik Butonlar */
html.dark-mode .snk-tabs-wrapper { background: #111827 !important; border-color: #1f2937 !important; }
html.dark-mode .snk-tab-btn { color: #9ca3af !important; background: transparent !important; }
html.dark-mode .snk-tab-btn:hover { background: #1f2937 !important; color: #e5e7eb !important; }

/* Aktif Sekme (Karanlık Mod) - Kesin Beyaz Zorlaması (Kırmızı ezen kural) */
html.dark-mode .snk-tabs-wrapper .snk-tab-btn.active { 
    background-color: #374151 !important; 
    color: #ffffff !important; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; 
}

/* Her ihtimale karşı buton içindeki her türlü alt etiket (span vb.) için de beyazı zorla */
html.dark-mode .snk-tabs-wrapper .snk-tab-btn.active * {
    color: #ffffff !important;
}

/* Sadece Kırmızı Rozetin (Badge) kendi rengini korumasını sağla */
html.dark-mode .snk-tabs-wrapper .snk-tab-btn.active span[id="snk-in-badge"],
html.dark-mode .snk-tabs-wrapper .snk-tab-btn span {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

html.dark-mode .snk-action-divider { background-color: #374151 !important; }
html.dark-mode .snk-action-btn { color: #9ca3af !important; }
html.dark-mode .snk-action-btn:hover { color: #fca5a5 !important; background: rgba(225, 29, 72, 0.1) !important; }