:root { 
    --bg: #050507; 
    --card: rgba(20, 20, 25, 0.75); 
    --border: rgba(255, 255, 255, 0.1); 
    --p: #e0a3c8; 
    --text: #ffffff; 
    --muted: #a1a1aa; 
    --success: #10b981; 
    --danger: #ef4444; 
    --blue: #3b82f6; 
}

body { background: var(--bg); background-image: radial-gradient(circle at 15% 50%, rgba(186, 133, 166, 0.04), transparent 25%), radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.04), transparent 25%); color: var(--text); font-family: 'Montserrat', sans-serif; margin: 0; display: flex; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 6px; height: 6px; } 
::-webkit-scrollbar-track { background: transparent; } 
::-webkit-scrollbar-thumb { background: rgba(186, 133, 166, 0.3); border-radius: 10px; } 
::-webkit-scrollbar-thumb:hover { background: var(--p); }

.hidden { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }

/* Soft & Hızlı Geçişler */
#appLoader { position:fixed; inset:0; background:var(--bg); z-index:999999; display:flex; justify-content:center; align-items:center; flex-direction:column; transition: opacity 0.3s ease; }
.spinner { width: 50px; height: 50px; border: 4px solid rgba(186,133,166,0.1); border-top-color: var(--p); border-radius: 50%; animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton Loader */
.skeleton-box { display: inline-block; background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%); background-size: 200% 100%; animation: shimmer 1s infinite linear; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.skeleton-text { width: 100%; height: 14px; margin-bottom: 8px; }
.skeleton-title { width: 60%; height: 24px; margin-bottom: 15px; }
.skeleton-card { width: 100%; height: 150px; border-radius: 12px; margin-bottom: 20px; }

/* Login Ekranı */
#login-overlay { position: fixed; inset: 0; background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 99999; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s ease; }
.login-box { background: var(--card); padding: 50px 40px; border-radius: 16px; border: 1px solid var(--p); text-align: center; width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); animation: softFade 0.3s ease forwards; }

/* 🚀 RESPONSIVE SIDEBAR VE HEADER */
.mobile-header { display: none; padding: 15px 20px; background: var(--card); border-bottom: 1px solid var(--border); align-items: center; justify-content: space-between; z-index: 20000; width: 100%; box-sizing: border-box; }
.sidebar { width: 260px; background: rgba(10, 10, 12, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-right: 1px solid var(--border); padding: 30px 20px; display: flex; flex-direction: column; z-index: 10000; overflow-y: auto; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s ease; }
.sidebar.collapsed { width: 80px; padding: 30px 10px; } 
.sidebar.collapsed .nav-text, .sidebar.collapsed #sidebarLogo, .sidebar.collapsed .nav-badge, .sidebar.collapsed .desktop-menu-btn { display: none; } 
.sidebar.collapsed .nav-item { justify-content: center; padding: 15px 0; }

.nav-item { position: relative; padding: 12px 18px; color: var(--muted); border-radius: 10px; margin-bottom: 6px; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; border-right: 4px solid transparent; }
.nav-item:hover { background: rgba(186, 133, 166, 0.05); color: #fff; }
.nav-item.active { background: rgba(186, 133, 166, 0.15) !important; color: var(--p) !important; font-weight: 700; border-right: 4px solid var(--p); }
.nav-badge { background: var(--p); color: #000; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 12px; margin-left: auto; }

.main-content { flex: 1; padding: 50px 40px 40px 40px; overflow-y: auto; background: #050505; position: relative; scroll-behavior: smooth; }
.page-header { margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; animation: softFade 0.2s ease forwards; }
.page-header h1 { font-family: 'Unbounded', sans-serif; font-size: 26px; margin: 0; color: #fff; }

.section-card { background: var(--card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); animation: softFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: transform 0.3s ease, border-color 0.3s ease; }
.section-card:hover { border-color: rgba(255,255,255,0.15); }
.section-title { font-family: 'Unbounded', sans-serif; font-size: 14px; color: var(--p); margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }

/* Grid Sistemleri */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; align-items: stretch;} 
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } 
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px; }

/* Tab ve Modallar */
.tab-content { display: none; animation: softFade 0.2s ease forwards; }
.tab-content.active { display: block; }
@keyframes softFade { from { opacity: 0; } to { opacity: 1; } }

#cmd-palette { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100000; align-items: flex-start; justify-content: center; padding-top: 15vh; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmd-box { background: var(--card); border: 1px solid var(--p); border-radius: 16px; width: 100%; max-width: 600px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }

/* ==========================================================================
   🚀 KUSURSUZ ZIRH BÖLÜMÜ (LAYOUT SHIFT FİXİ & Z-INDEX)
   ========================================================================== */

/* 1. TOAST (BİLDİRİM) ZIRHI - Ekranı Sola İtmesini Kesinlikle Engeller */
#toast {
    position: fixed !important;
    top: 20px !important;
    right: -350px !important; /* Ekranın dışında başlar */
    opacity: 0 !important;
    background: #111 !important;
    color: #fff !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--success) !important;
    z-index: 2147483647 !important; /* BÜTÜN MODALLARIN VE EKRANLARIN ÜSTÜNDE (MAX DEĞER) */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    transition: right 0.4s ease, opacity 0.4s ease !important;
    pointer-events: none !important;
    transform: none !important; /* Ekran kaymasını önler */
}

/* 🚀 FIX: '#toast-show' yerine '.toast-show' (Class Seçici) kullanıldı */
#toast.toast-show {
    right: 20px !important;
    opacity: 1 !important;
}

/* 2. MODAL ZIRHI - Arka Plan Titremesini Önler ve Üstte Kalır */
.modal-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.85) !important;
    z-index: 999999 !important; /* Sol menünün üstünde kalır */
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    backdrop-filter: blur(8px) !important;
}

/* Eğer JS bloğu display:block yaparsa düzen bozulmasın diye flex'e zorla */
.modal-overlay[style*="display: block"] {
    display: flex !important;
}

.modal-content {
    background: var(--card) !important;
    border: 1px solid #333 !important;
    border-radius: 16px !important;
    padding: 40px !important;
    width: 100% !important;
    position: relative !important;
    margin: auto !important;
    box-shadow: 0 30px 100px rgba(0,0,0,0.9) !important;
    z-index: 1000000 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Modal İçinde Modal (Confirm/Alert) çıkarsa ezilmesin diye ekstra z-index */
#sysAlertModal, #sysConfirmModal {
    z-index: 1000001 !important; 
}

/* 3. PDF GHOST ZIRHI - Görünmez Şablonların Ekranı Patlatmasını Engeller */
#invoiceTemplate, #pdfTemplate, .pdf-ghost-container {
    position: absolute !important;
    top: -15000px !important;
    left: -15000px !important;
    width: 850px !important;
    z-index: -9999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 🚀 SABİT OK (DROPDOWN) VE İNPUT ZIRHI (Madde 4) */
select { 
    appearance: none; 
    -webkit-appearance: none; 
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ba85a6' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); 
    background-repeat: no-repeat; 
    background-position: right 15px center; /* Oku sağa sabitledik */
    cursor: pointer; 
    padding-right: 40px !important; 
    background-color: #09090b;
}

input, textarea, select {
    border: 1px solid #27272a;
    transition: all 0.3s ease;
    width: 100%; 
    padding: 15px; 
    background: #09090b; 
    color: #fff; 
    border-radius: 10px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 14px;
}

input:focus, textarea:focus, select:focus { 
    border-color: var(--p) !important; 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(186, 133, 166, 0.15) !important; 
    background-color: #0a0a0c !important;
}

/* 🚀 APPLE STYLE SKELETON (SHIMMER) ANİMASYONU */
.shimmer-box::after {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.02) 20%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
    animation: shimmer 1.5s infinite; content: '';
}

/* ==========================================================================
   FORMLAR, BUTONLAR VE ETİKETLER (COMPONENTS)
   ========================================================================== */
label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.btn { background: var(--p); color: #000; padding: 16px 24px; border: none; border-radius: 10px; cursor: pointer; font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px; transition: all 0.3s ease; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; gap: 8px; }
.btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(186,133,166,0.3); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sec { background: transparent; border: 1px solid var(--muted); color: var(--text); } 
.btn-sec:hover { border-color: var(--p); color: var(--p); background: rgba(186,133,166,0.05); }
.btn-add { background: transparent; border: 1px dashed var(--p); color: var(--p); padding: 15px; border-radius: 10px; width: 100%; cursor: pointer; font-weight: 600; margin-bottom: 15px; transition: all 0.3s ease; } 
.btn-add:hover { background: rgba(186,133,166,0.05); }

/* ==========================================================================
   TABLOLAR VE KARTLAR
   ========================================================================== */
.stat-card { background: var(--card); border: 1px solid var(--border); padding: 25px; border-radius: 16px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } 
.stat-card:hover { border-color: var(--p); transform: translateY(0); box-shadow: 0 10px 25px rgba(186,133,166,0.2); }
.stat-value { font-family: 'Unbounded', sans-serif; font-size: 28px; color: #fff; margin: 10px 0 5px 0; }

.data-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 15px; 
}
.data-table th { text-align: left; padding: 15px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; text-transform: uppercase; cursor: pointer; transition: color 0.3s ease; } 
.data-table th:hover { color: var(--p); }
.data-table td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.02); font-size: 14px; vertical-align: middle; } 
.data-table tbody tr { transition: background-color 0.2s ease; cursor: pointer; } 
.data-table tbody tr:hover td { background: rgba(255,255,255,0.03); }

/* BADGES (Rozetler) */
.badge { padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; display: inline-block; } 
.badge.green { background: rgba(16, 185, 129, 0.1); color: var(--success); border: 1px solid var(--success); } 
.badge.yellow { background: rgba(234, 179, 8, 0.1); color: #eab308; border: 1px solid #eab308; } 
.badge.blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid #3b82f6; }
.badge.red { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid var(--danger); }

.contact-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 20px; background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; font-size: 11px; font-weight: 600; transition: all 0.3s ease; margin-right: 5px; border: 1px solid #333; white-space: nowrap !important; }
.contact-btn.mail:hover { background: rgba(186, 133, 166, 0.1); border-color: var(--p); color: var(--p); }
.contact-btn.wa:hover { background: rgba(37, 211, 102, 0.1); border-color: #25D366; color: #25D366; }

/* ==========================================================================
   MODALLAR (POPUPS) & DROPDOWNS
   ========================================================================== */
.btn-close { position: absolute; top: 20px; right: 25px; background: none; border: none; color: var(--muted); font-size: 28px; cursor: pointer; transition: all 0.3s ease; z-index: 100; } 
.btn-close:hover { color: var(--danger); transform: rotate(90deg); }
.modal-tabs { display: flex; gap: 15px; border-bottom: 1px solid #333; margin-bottom: 20px; padding-bottom: 10px; overflow-x: auto; } 
.modal-tab { cursor: pointer; color: #aaa; font-weight: 600; font-size: 13px; padding-bottom: 10px; border-bottom: 2px solid transparent; transition: all 0.3s ease; white-space: nowrap; } 
.modal-tab:hover { color: #fff; } .modal-tab.active { color: var(--p); border-bottom-color: var(--p); } 

.tab-content, .modal-tab-content { display: none; animation: fadeIn 0.4s ease forwards; } 
.tab-content.active, .modal-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   ÖZEL BİLEŞENLER (CHAT, KANBAN, CALENDAR, DRAG & DROP)
   ========================================================================== */
/* Drag & Drop */
.drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 40px; text-align: center; color: var(--muted); cursor: pointer; background: rgba(255,255,255,0.01); margin-bottom: 20px; transition: all 0.3s ease; } 
.drop-zone:hover, .drop-zone.dragover { border-color: var(--p); background: rgba(186,133,166,0.05); color: #fff; }

/* Chat Bubbles */
.chat-msg { margin-bottom: 20px; padding: 15px 20px; border-radius: 16px; max-width: 75%; line-height: 1.6; font-size: 14px; position: relative; }
.chat-msg.client { background: #1f1f22; border: 1px solid #333; margin-right: auto; margin-left: 0; border-bottom-left-radius: 4px; text-align: left; }
/* 🚀 FİX: admin baloncukları artık SOLA yaslı (sağa itmiyor) — kullanıcı sağa-yaslı istemiyor. Ayrım renkle yapılır. */
.chat-msg.admin { background: rgba(186,133,166,0.15); border: 1px solid var(--p); margin-right: auto; margin-left: 0; border-bottom-left-radius: 4px; color: #fff; text-align: left; }
.chat-time { font-size: 10px; opacity: 0.6; position: absolute; bottom: -20px; white-space: nowrap; } 
.chat-msg.client .chat-time { left: 5px; } .chat-msg.admin .chat-time { right: 5px; }

/* Calendar Grid */
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.cal-nav { background: #111; color: #fff; border: 1px solid #333; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; transition: all 0.3s ease; } 
.cal-nav:hover { background: var(--p); color: #000; border-color: var(--p); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; font-size: 12px; margin-bottom: 15px; }
.cal-day { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #222; cursor: pointer; position: relative; font-size: 14px; transition: all 0.3s ease; background: rgba(255,255,255,0.01); }
.cal-day:hover { border-color: var(--p); background: rgba(186, 133, 166, 0.1); }
.cal-day.selected { background: var(--p); color: #000; font-weight: bold; border-color: var(--p); }
.cal-dot { width: 6px; height: 6px; background: var(--p); border-radius: 50%; margin-top: 4px; box-shadow: 0 0 5px var(--p); }

.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 20px; max-height: 200px; overflow-y: auto; padding-right: 5px; }
.time-btn { padding: 10px; background: #111; border: 1px solid #333; color: #fff; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.3s ease; }
.time-btn:hover { border-color: var(--p); color: var(--p); } 
.time-btn.selected { background: var(--p); color: #000; border-color: var(--p); font-weight: bold; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; margin-right: 12px; vertical-align: middle; } 
.toggle-switch input { opacity: 0; width: 0; height: 0; } 
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 34px; } 
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } 
input:checked + .slider { background-color: var(--p); } input:checked + .slider:before { transform: translateX(20px); }

/* Filter & Notification */
.filter-btn { background: #111; border: 1px solid #333; color: #aaa; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 12px; margin-right: 5px; transition: all 0.3s ease; } 
.filter-btn:hover { background: #222; } .filter-btn.active { background: var(--p); color: #000; border-color: var(--p); font-weight: bold; }

.notification-item { padding: 15px; border-bottom: 1px solid #222; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; transition: all 0.3s ease; cursor:pointer;}
.notification-item:hover { background: rgba(255,255,255,0.02); }
.notification-item.unread { border-left: 3px solid var(--p); background: rgba(186,133,166,0.05); }
.n-icon { font-size: 18px; }

/* Rich Text (CMS & Proposal) */
.rt-toolbar { display: flex; gap: 5px; background: #111; padding: 8px; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; }
.rt-btn { background: transparent; border: none; color: #aaa; cursor: pointer; padding: 5px 10px; border-radius: 4px; transition: 0.2s; font-weight: bold; }
.rt-btn:hover { background: #333; color: #fff; }
.rt-editor { width: 100%; min-height: 100px; padding: 15px; background: #09090b; border: 1px solid var(--border); color: #fff; border-radius: 0 0 10px 10px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; overflow-y: auto; }
.rt-editor:focus { border-color: var(--p); outline: none; }

/* Kanban Board */
.kanban-board { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; }
.kanban-col { background: #111; border-radius: 12px; min-width: 250px; flex: 1; padding: 15px; border: 1px solid #222; }
.kanban-title { font-family: 'Unbounded', sans-serif; font-size: 13px; color: var(--muted); margin-bottom: 15px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #333; }
.task-card { background: var(--card); border: 1px solid #333; padding: 15px; border-radius: 8px; margin-bottom: 10px; cursor: grab; transition: border 0.2s; }
.task-card:hover { border-color: var(--p); }

/* Addon & Finans Kartları */
.addon-card { background: #111; border: 1px solid #333; padding: 20px; border-radius: 12px; position: relative; transition: 0.3s; }
.addon-card:hover { border-color: var(--success); transform: translateY(0); }

.fin-row { display: flex; flex-direction: column; gap: 15px; padding: 25px; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid #222; margin-bottom: 20px; transition: all 0.3s ease; }
.fin-row-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.fin-row-actions { display: flex; justify-content: flex-end; gap: 10px; width: 100%; border-top: 1px dashed #333; padding-top: 15px; }
.fin-row:hover { border-color: var(--p); background: rgba(186, 133, 166, 0.05); }

/* Sayfalama */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.page-btn { background: #111; border: 1px solid #333; color: #fff; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: 0.3s; }
.page-btn:hover:not(:disabled) { background: var(--p); color: #000; border-color: var(--p); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.fatal-error-screen { padding: 60px; text-align: center; }
.fatal-error-box { background: #1a0505; border: 2px solid var(--danger); padding: 30px; border-radius: 12px; display: inline-block; text-align: left; max-width: 800px; margin-top: 20px; }

/* Rich Text Editor Placeholder Zırhı */
.rt-editor[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: #555;
    pointer-events: none;
    display: block;
    white-space: pre-wrap;
}
/* =========================================
   🚀 1. AŞAMA DÜZELTMELERİ (PHASE 1 FIXES)
   ========================================= */

/* =========================================
   🚀 KUSURSUZ TAM EKRAN BUZLU CAM (GLASSMORPHISM)
   ========================================= */
#cmd-overlay-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Hafif karanlık */
    backdrop-filter: blur(20px) !important; /* Yoğun cam efekti */
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999999 !important;
    /* display: none; -> JS ile flex yapılacak */
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 15vh !important;
}

#cmd-box {
    width: 90% !important;
    max-width: 650px !important;
    background: rgba(15, 15, 15, 0.85) !important;
    border: 1px solid rgba(186, 133, 166, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    overflow: hidden !important;
    animation: cmdPop 0.2s ease-out;
    display: flex;
    flex-direction: column;
}

@keyframes cmdPop {
    0% { transform: scale(0.96) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

#cmd-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#cmd-results {
    max-height: 400px !important;
    overflow-y: auto !important;
    padding: 10px !important;
}

/* Bulunan Sonuçların Görünümü */
.cmd-res-item {
    padding: 12px 15px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: #d4d4d8 !important;
    transition: all 0.2s !important;
    border: 1px solid transparent !important;
    margin-bottom: 4px !important;
    text-align: left !important;
}

.cmd-res-item:hover {
    background: rgba(186, 133, 166, 0.1) !important;
    border-color: rgba(186, 133, 166, 0.3) !important;
    color: #fff !important;
}

.cmd-badge {
    font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid; margin-left: 8px; vertical-align: middle;
}
/* --- BEMBEYAZ PDF ZIRHI (HTML2PDF İÇİN) --- */
/* Bu sınıf eklendiğinde o div içindeki her şey beyaz arka planlı ve siyah yazılı olur */
.pdf-export-mode {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 20px !important;
}

.pdf-export-mode * {
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* PDF alınırken butonları ve gereksiz UI öğelerini gizle */
.pdf-export-mode button, 
.pdf-export-mode .btn, 
.pdf-export-mode .btn-sec,
.pdf-export-mode .drop-zone {
    display: none !important;
}
/* 🚀 UTOPIA OS GLOBAL PREMIUM UI KIT (BULLETPROOF) */

input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
    border-color: var(--p) !important;
    box-shadow: 0 0 0 2px rgba(186, 133, 166, 0.15) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.smart-dropdown-list {
    display: none; 
    position: absolute; 
    background: #09090b !important; 
    border: 1px solid var(--p) !important; 
    border-radius: 10px !important; 
    max-height: 250px !important; 
    overflow-y: auto !important; 
    z-index: 9999 !important; 
    list-style: none !important; /* 🚀 Noktaları yokedici */
    padding: 0 !important; 
    margin: 2px 0 0 0 !important; /* 🚀 İstenilen 2px mesafe */
    box-shadow: 0 20px 50px rgba(0,0,0,0.9) !important;
}

.smart-dropdown-list li {
    list-style-type: none !important; /* 🚀 Noktaları kesin yokedici */
    display: block !important;
    padding: 12px 18px !important; 
    cursor: pointer !important; 
    border-bottom: 1px solid rgba(255,255,255,0.03) !important; 
    font-size: 13px !important;
    color: #efefef !important;
    margin: 0 !important;
    text-align: left !important;
    background: transparent !important;
    transition: all 0.2s !important;
}

.smart-dropdown-list li:hover {
    background: rgba(186, 133, 166, 0.08) !important; 
    color: var(--p) !important;
    padding-left: 22px !important; 
}

.smart-dropdown-list::-webkit-scrollbar { width: 5px; }
.smart-dropdown-list::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

/* ==========================================================================
   📱 UTOPIA OS: NATIVE MOBILE APP EXPERIENCE (v3 BULLETPROOF)
   ========================================================================== */
@media (max-width: 992px) {
    /* === GLOBAL OVERFLOW KILL === */
    html { overflow-x: hidden !important; }
    body { 
        display: block !important; 
        overflow-x: hidden !important; 
        overflow-y: auto !important; 
        height: auto !important; 
        width: 100% !important;
        background: #050505 !important; 
    }

    /* === MAIN CONTENT === */
    .main-content { 
        width: 100% !important; 
        padding: 80px 15px 100px 15px !important;
        margin: 0 !important; 
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* === MOBILE TOP HEADER (Integrated with Background) === */
    .mobile-header { 
        display: flex !important; 
        position: fixed !important; 
        top: 0 !important; left: 0 !important; right: 0 !important; 
        height: 60px !important; 
        background: var(--bg) !important; 
        backdrop-filter: none !important; 
        -webkit-backdrop-filter: none !important; 
        border-bottom: none !important; 
        z-index: 99995 !important; 
        padding: 0 20px !important; 
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* === NOTIFICATION BELL INSIDE HEADER === */
    #mobileFloatingNotif {
        display: flex !important;
        position: relative !important;
        width: 35px !important;
        height: 35px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(186, 133, 166, 0.2) !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    /* === iOS BOTTOM NAVIGATION BAR (SCROLLABLE) === */
    /* CRITICAL: sidebar has inline style="display: none;" so we MUST override with !important */
    .sidebar, #sidebar { 
        display: flex !important;
        position: fixed !important; 
        bottom: 0 !important; 
        top: auto !important; 
        left: 0 !important; 
        right: 0 !important; 
        width: 100% !important; 
        height: 80px !important;
        max-height: 80px !important;
        min-height: 80px !important;
        flex-direction: row !important; 
        justify-content: flex-start !important; 
        align-items: center !important; 
        background: rgba(10, 10, 12, 0.95) !important; 
        backdrop-filter: blur(30px) !important; 
        -webkit-backdrop-filter: blur(30px) !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important; 
        border-right: none !important;
        border-left: none !important;
        z-index: 99998 !important; 
        padding: 0 15px env(safe-area-inset-bottom, 5px) 15px !important;
        box-sizing: border-box !important;
        transform: none !important;
        transition: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-shadow: 0 -3px 20px rgba(0,0,0,0.6) !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
    }

    /* Hide scrollbar for cleaner look but keep it scrollable */
    .sidebar::-webkit-scrollbar, #sidebar::-webkit-scrollbar {
        height: 0px !important;
        background: transparent !important;
    }

    /* === HIDE DESKTOP SIDEBAR ELEMENTS IN BOTTOM BAR === */
    .sidebar-logo,
    .sidebar .sidebar-logo,
    #sidebarLogo,
    #sidebarIcon,
    #toggleSidebarBtn,
    .desktop-menu-btn,
    .sidebar-footer,
    .sidebar > div[style*="margin-top: auto"] { 
        display: none !important; 
    }

    /* Make sidebar-nav act as transparent container so nav-items flow in bottom bar */
    .sidebar-nav,
    .sidebar nav {
        display: contents !important;
    }

    /* Show ONLY nav-items directly */
    .sidebar .nav-item {
        display: flex !important;
        flex-direction: column !important; 
        padding: 8px 0 !important; 
        margin: 0 !important; 
        border: none !important; 
        border-right: none !important;
        flex: 0 0 75px !important;
        max-width: 75px !important;
        justify-content: center !important; 
        align-items: center !important;
        gap: 6px !important; 
        border-radius: 12px !important;
        background: transparent !important;
        position: relative !important;
        opacity: 0.6 !important;
        transition: 0.2s ease !important;
    }
    .sidebar .nav-item span:first-child { font-size: 22px !important; }
    .sidebar .nav-text { 
        font-size: 10px !important; 
        opacity: 1 !important; 
        white-space: nowrap !important; 
        display: block !important; 
        text-align: center !important;
    }
    .sidebar .nav-item:hover { transform: none !important; background: transparent !important; }
    .sidebar .nav-item.active { 
        background: transparent !important; 
        box-shadow: none !important; 
        border: none !important;
        opacity: 1 !important;
    }
    .sidebar .nav-item.active span { color: var(--p) !important; }
    .sidebar .nav-item.active .nav-text { color: var(--p) !important; font-weight: 600 !important; }
    .sidebar .nav-badge { 
        position: absolute !important; 
        top: 2px !important; right: 15px !important; 
        font-size: 8px !important; padding: 2px 5px !important; 
    }

    /* Custom visual fade indicator for scrolling */
    body::after {
        content: '';
        position: fixed;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 80px;
        background: linear-gradient(to right, transparent, rgba(10, 10, 12, 1));
        z-index: 99999;
        pointer-events: none;
        display: block;
    }

    /* === FIX GRIDS FOR MOBILE === */
    div[style*="display: grid"], 
    div[style*="display:grid"],
    .grid-2, .grid-3, .grid-4, .grid-stats { 
        display: flex !important; 
        flex-direction: column !important; 
        width: 100% !important; 
        box-sizing: border-box !important;
        gap: 15px !important;
    }
    /* Don't break sidebar flex-direction */
    .sidebar, .sidebar.nav-item { flex-direction: row !important; }

    /* === UI COMPONENTS MOBILE POLISH === */
    .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 25px !important; }
    .page-header h1 { font-size: 20px !important; }
    .section-card { padding: 18px 15px !important; border-radius: 18px !important; margin-bottom: 18px !important; width: 100% !important; box-sizing: border-box !important; }
    .stat-card { padding: 18px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 12px !important; }
    .stat-value { font-size: 22px !important; }
    .section-title { font-size: 12px !important; }
    
    .fin-row, .fin-row-header, .task-card { padding: 18px !important; border-radius: 16px !important; width: 100% !important; box-sizing: border-box !important; }
    .fin-row-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

    #dashTopTasks .task-item { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    #dashTopTasks .task-item .task-actions { width: 100% !important; justify-content: space-between !important; }

    /* === AI DRAWER → FULL SCREEN ON MOBILE === */
    .ai-drawer { 
        width: 100% !important; 
        max-width: 100% !important; 
    }
    .ai-drawer.open { right: 0 !important; }

    /* === MODALS → iOS BOTTOM SHEET === */
    .modal-overlay { padding: 0 !important; align-items: flex-start !important; padding-top: 40px !important; }
    .modal-content { 
        padding: 25px 20px !important; 
        width: 100% !important; 
        max-width: 100% !important;
        max-height: 88vh !important; 
        overflow-y: auto !important; 
        border-radius: 24px 24px 0 0 !important; 
        margin: 0 !important; 
        box-sizing: border-box !important; 
    }
    .btn-close { top: 12px !important; right: 12px !important; }

    /* === CANVAS BACKGROUND FIX === */
    #canvas-bg { display: none !important; }
}



/* ======================================================== */
/* 🚀 UTOPIA V6 GLOBAL MOBILE & LTR ALIGNMENT FIXES */
/* ======================================================== */
@media (max-width: 768px) {
    /* Popups always at the top on mobile, not centered */
    .modal-overlay {
        align-items: flex-start !important;
        padding-top: 20px !important;
        overflow-y: auto !important;
    }
    
    /* Enforce left-to-right text alignment everywhere on mobile */
    .modal-content, .client-crm-content, .chat-msg, .ai-insight-content, #trashList, .tickets-area, #msgChatArea, .glass {
        text-align: left !important;
        direction: ltr !important;
    }

    /* Fix Proposal Builder Rich Text overflowing on mobile */
    .ql-editor {
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
    }
    #proposalDesc {
        max-width: 100% !important;
    }
}

/* Enforce Left Alignment Globally for specific modules */
.chat-msg.admin, .chat-msg.client {
    text-align: left !important;
}

#ai_intel_ling, #ai_intel_gaps, #ai_ops_tasks, #trashList, .ticket-msg {
    text-align: left !important;
}


/* ======================================================== */
/* 🚀 GENEL: Panelde HİÇBİR YERDE sağa-yaslı / RTL metin olmasın (kullanıcı talebi) */
/* ======================================================== */
#mainApp, #sidebar, .modal-overlay, .ai-drawer { direction: ltr; }
/* Chat alanlarının ikisi de (tickets + messages) balon hizalamaları (Admin=Sağ, Client=Sol), metin daima sola yaslı */
#tMsgArea .chat-msg.admin, #msgChatArea .chat-msg.admin {
    margin-left: auto !important; margin-right: 0 !important; text-align: left !important; direction: ltr !important; border-bottom-left-radius: 16px !important; border-bottom-right-radius: 4px !important;
}
#tMsgArea .chat-msg.client, #msgChatArea .chat-msg.client {
    margin-left: 0 !important; margin-right: auto !important; text-align: left !important; direction: ltr !important; border-bottom-right-radius: 16px !important; border-bottom-left-radius: 4px !important;
}
/* ======================================================== */
/* 🚀 PROPOSAL BUILDER: Rich-text toolbar'ı kompakt yap (butonlar tek tek tam */
/* genişlik DEĞİL — .btn taban kuralı width:100% olduğu için alt alta diziliyordu). */
/* ======================================================== */
.rt-toolbar { gap: 6px !important; }
.rt-toolbar .btn, .rt-toolbar button, .rt-toolbar select {
    width: auto !important; flex: 0 0 auto !important; min-width: 0 !important;
}
@media (max-width: 768px) {
    .rt-toolbar { padding: 8px !important; gap: 4px !important; }
    .rt-toolbar .btn, .rt-toolbar button { padding: 5px 7px !important; font-size: 11px !important; }

    /* Mobilde içerik metinleri sola — CRM kartları, listeler, tablolar dahil */
    #mainApp p, #mainApp span, #mainApp td, #mainApp th, #mainApp li,
    #mainApp label, #mainApp small, #mainApp h1, #mainApp h2, #mainApp h3, #mainApp h4 {
        text-align: left !important;
    }
    /* CRM liste tablosu mobilde kart gibi: hücreler tam genişlik, sola yaslı */
    #crmBody td { text-align: left !important; }

    /* Kart/footer iki-kolon satırları (kanban, task kartları) mobilde sağa itmesin → dikey istifle */
    #mainApp .task-card div[style*="space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
}

/* ============================================================================
   🚀 UTOPIA DOCK — dikey (desktop) + yatay (mobil), ikon + KÜÇÜK ETİKET her zaman görünür
   NOT: Dikey dock yalnızca ≥993px. 769–992 "ara ölçü" artık alt-bar dock kullanır
   (önceki çakışma overflow-x:hidden yapıp kaydırmayı engelliyordu).
   ============================================================================ */
@media (min-width: 993px) {
  .sidebar {
    width: 104px !important;
    margin: 14px 0 14px 14px !important;
    padding: 16px 8px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(14,14,17,0.74) !important;
    backdrop-filter: blur(26px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(140%) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    gap: 0 !important;
  }
  .sidebar-logo { justify-content: center !important; margin: 4px 0 16px 0 !important; padding: 0 0 14px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; flex-shrink: 0 !important; }
  #sidebarLogo { display: none !important; }
  #sidebarIcon { display: inline-block !important; width: 32px !important; }
  #toggleSidebarBtn { display: none !important; }

  /* nav kaydırılır; üstte/altta nefes payı → ilk öğe logoya girmez, son öğe (Trash) kesilmez */
  .sidebar-nav { gap: 4px !important; overflow-y: auto !important; overflow-x: hidden !important; align-items: stretch !important; padding: 6px 2px 30px 2px !important; flex: 1 1 auto !important; min-height: 0 !important; }
  .sidebar-nav::-webkit-scrollbar { width: 0 !important; }

  /* Menü öğesi: ikon ÜSTTE + küçük etiket ALTTA (her zaman görünür) */
  .nav-item {
    flex-direction: column !important; gap: 4px !important;
    width: 88px !important; min-height: 60px !important; padding: 9px 4px !important; margin: 0 auto !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 16px !important; border-right: none !important; position: relative !important;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease !important;
  }
  .nav-item > span:first-child { font-size: 22px !important; width: auto !important; transition: transform 0.2s ease !important; line-height:1 !important; }
  .nav-text {
    position: static !important; opacity: 1 !important; pointer-events: auto !important;
    font-size: 9.5px !important; font-weight: 600 !important; color: #9a9aa2 !important;
    text-align: center !important; line-height: 1.15 !important; white-space: normal !important;
    max-width: 80px !important; transform: none !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important;
  }
  .nav-text::before { display:none !important; }
  .nav-item:hover { background: rgba(186,133,166,0.12) !important; transform: translateY(0) !important; }
  .nav-item:hover > span:first-child { transform: scale(1) !important; }
  .nav-item:hover .nav-text { color:#fff !important; }
  .nav-item.active { background: rgba(186,133,166,0.18) !important; box-shadow: inset 0 0 0 1px rgba(186,133,166,0.5), 0 8px 22px rgba(186,133,166,0.25) !important; }
  .nav-item.active .nav-text { color: var(--p) !important; }
  .nav-item.active > span:first-child { filter: drop-shadow(0 0 8px rgba(186,133,166,0.7)) !important; }
  /* gösterge çubuğu öğenin İÇİNDE (left:3px) — nav overflow'u tarafından kesilmez */
  .nav-item.active::after { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--p); border-radius:4px; box-shadow:0 0 10px var(--p); }
  .nav-badge { position:absolute !important; right: 10px !important; top: 6px !important; left: auto !important; transform: none !important; margin: 0 !important; }
}

/* 📱 MOBİL + ARA ÖLÇÜ (≤992): aynı dock yatay olarak alt barda — fare ile sürüklenebilir yatay kaydırma */
@media (max-width: 992px) {
  .sidebar {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) 6px !important;
    flex-direction: column !important; justify-content: center !important; border-radius: 22px 22px 0 0 !important;
    border: none !important; border-top: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(12,12,15,0.94) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    transform: none !important; z-index: 100000 !important; box-shadow: 0 -10px 30px rgba(0,0,0,0.5) !important;
  }
  .sidebar .sidebar-logo { display: none !important; }
  /* 🔧 ÖNEMLİ: önceki @media(max-width:992px) bloğu .sidebar-nav'a display:contents veriyordu;
     bu, nav kutusunu yok edip öğeleri dikey istifliyordu (mobil menü "zayıf" görünüyordu).
     Ayrıca o blok .sidebar .nav-item / .sidebar .nav-item.active için daha yüksek specificity
     ile aktif hap'ı "transparent" yapıyordu. Burada AYNI specificity (.sidebar ön ekli) + daha
     sonra geldiği için kazanan, referans dock'una sadık yatay app-dock'u garanti ediyoruz. */
  .sidebar .sidebar-nav, .sidebar nav {
    display: flex !important;
    flex-direction: row !important; gap: 8px !important;
    width: 100% !important; align-items: stretch !important;
    overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; padding: 2px 4px 4px 4px !important;
    scroll-snap-type: x proximity !important;
  }
  .sidebar .sidebar-nav::-webkit-scrollbar { height: 0 !important; }
  .sidebar .nav-item {
    flex: 0 0 auto !important; flex-direction: column !important; gap: 4px !important;
    width: 72px !important; max-width: 72px !important; min-height: 54px !important; padding: 8px 4px !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 16px !important; border-right: none !important; position: relative !important;
    opacity: 0.7 !important; scroll-snap-align: center !important;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, opacity .2s ease !important;
  }
  .sidebar .nav-item > span:first-child { font-size: 21px !important; line-height: 1 !important; transition: transform .2s ease !important; }
  .sidebar .nav-text {
    position: static !important; opacity: 1 !important; pointer-events:auto !important;
    font-size: 9px !important; font-weight: 600 !important; color: #aaa !important; text-align: center !important;
    white-space: normal !important; word-break: break-word !important; line-height: 1.1 !important; max-width: 68px !important;
    background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; transform: none !important; display: block !important;
  }
  .sidebar .nav-text::before { display:none !important; }
  .sidebar .nav-item:active { transform: scale(0.94) !important; }
  /* Aktif öğe: referans dock'taki gibi pembe cam hap + ince çerçeve + hafif parıltı */
  .sidebar .nav-item.active {
    opacity: 1 !important;
    background: rgba(224,163,200,0.16) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(224,163,200,0.45), 0 6px 18px rgba(224,163,200,0.22) !important;
  }
  .sidebar .nav-item.active > span:first-child { transform: scale(1) !important; filter: drop-shadow(0 0 8px rgba(224,163,200,0.7)) !important; }
  .sidebar .nav-item.active .nav-text { color: var(--p) !important; }
  .sidebar .nav-badge { position:absolute !important; right: 8px !important; top: 4px !important; left:auto !important; transform:none !important; }
  /* Ana içerik alt bara çarpmasın */
  .main-content { padding-bottom: 110px !important; }
  #mainApp { padding-bottom: 110px !important; }

  /* 🚀 MOBİL TİPOGRAFİ — büyük başlıklar/sayılar makul boyuta insin (modern, taşma yok) */
  .page-header h1, h1 { font-size: 20px !important; line-height: 1.25 !important; }
  h2 { font-size: 17px !important; } h3 { font-size: 15px !important; }
  .stat-value, .kpi-value { font-size: 22px !important; }
  .stat-card { padding: 16px !important; }
  .section-card { padding: 16px !important; }
  .main-content { padding-left: 14px !important; padding-right: 14px !important; }
  .page-header { gap: 8px !important; margin-bottom: 18px !important; }
  /* Üst sağ aksiyonlar (AI/zil/install/logout) mobilde sığsın */
  #global-top-actions { gap: 6px !important; top: 8px !important; right: 10px !important; }
  #globalAiTrigger { padding: 6px 10px !important; font-size: 11px !important; }
  #pwaInstallBtn { padding: 6px 10px !important; font-size: 11px !important; }
}
/* Tüm dinamik popup'lar aynı zemin/blur/çerçeve dilini kullansın */
.modal-content, .god-modal, .modal-content.glass { border-radius: 16px !important; }

/* GLOBAL LEFT-ALIGN FIX (tüm site, sağa-yaslı görünümü engeller) */
.chat-msg, .chat-msg.admin, .chat-msg.client, .client-crm-content,
.ticket-desc, .ticket-messages, .msg-bubble, .strategy-item {
    text-align: left !important;
    direction: ltr !important;
}

/* ============================================================================
   🚀 UTOPIA v2 POLISH — "utopia-os-next" tasarım dili, MARKAYA SADIK (pembe var(--p),
   Unbounded/Montserrat, mevcut buton stili). Mor/Inter YOK. Yalnızca rafine + akıcı.
   ============================================================================ */
:root { --u-radius: 18px; --u-glass: rgba(20,20,25,0.72); }
.section-card, .stat-card, .glass {
    /* border-radius: var(--u-radius) !important; */
    /* border: 1px solid rgba(255,255,255,0.08) !important; */
    /* background: var(--u-glass) !important; */
    /* backdrop-filter: blur(22px) saturate(130%) !important; */
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
    /* transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease !important; */
}
.stat-card:hover, .section-card:hover { transform: translateY(0); border-color: rgba(224,163,200,0.35) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.4) !important; }
/* 🚫 Hover'da OYNAMA efekti bu iki kutuda gizli (silinmedi): AI Briefing + Ask Utopia sabit dursun (içinde yazı yazılıyor/okunuyor). */
.dash-brief-card:hover, .dash-ask-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--border) !important; }
/* Buton mikro-rafine (mevcut pembe stili korunur, sadece akıcılık) */
.btn { transition: all .22s cubic-bezier(.16,1,.3,1) !important; }
.btn:active { transform: translateY(0) scale(0.98) !important; }
/* Bölüm başlığı — yeni index'teki gibi ince, harf aralıklı */
.section-title > span:first-child, .page-header p { letter-spacing: .3px; }
/* Girişler yumuşak */
input, select, textarea { transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(224,163,200,0.12); }

/* ⌘K KOMUT ÇUBUĞU — yeni index'in imza öğesi (marka renkleriyle) */
.u-cmdbar {
    display: flex; align-items: center; gap: 10px; cursor: text;
    background: var(--u-glass); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 12px 18px; transition: .25s; backdrop-filter: blur(20px);
}
.u-cmdbar:hover { border-color: var(--p); box-shadow: 0 0 28px rgba(224,163,200,0.15); }
.u-cmdbar .u-ph { color: var(--muted); font-size: 14px; flex: 1; }
.u-cmdbar .u-kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; background: rgba(255,255,255,0.04); }
@media (max-width: 768px){ .section-card:hover, .stat-card:hover { transform:none; } }

/* ============================================================================
   🚀 AI COMMAND DASHBOARD — referans "utopia-os-next" düzeni, MARKAYA SADIK
   (pembe var(--p) #e0a3c8, Unbounded/Montserrat, cam yüzeyler). Mor/Inter YOK.
   ============================================================================ */
.dash-hero { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.dash-hero .dash-hi { display:flex; flex-direction:column; }
.dash-hero .dash-hi h1 { font-family:'Unbounded',sans-serif; font-size:clamp(20px,2.2vw,28px); color:#fff; margin:0; line-height:1.15; }
.dash-hero .dash-cmd { flex:1; min-width:240px; max-width:520px; }
.dash-hero .dash-aibtn { width:auto; padding:11px 20px; }

.dash-grid-brief { display:grid; grid-template-columns:1.7fr 1fr; gap:24px; margin-bottom:24px; align-items:stretch; }
.dash-brief-card, .dash-ask-card { margin-bottom:0; }

/* Asistan özet metni — temiz, okunaklı satırlar */
#aiAssistantBrief .ab-line { display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:13px; color:#ddd; line-height:1.5; }
#aiAssistantBrief .ab-line:last-child { border-bottom:none; }
#aiAssistantBrief .ab-ic { width:26px; height:26px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); }
#aiAssistantBrief .ab-line b { color:#fff; font-weight:700; }
#aiAssistantBrief .ab-rec { margin-top:14px; padding:13px 15px; border-radius:12px; background:rgba(224,163,200,0.06); border:1px solid rgba(224,163,200,0.22); font-size:12.5px; line-height:1.55; color:#eee; }
#aiAssistantBrief .ab-rec b { color:var(--p); }

/* KPI çip şeridi */
.dash-chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.dash-chip { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-left:3px solid var(--c,var(--p)); border-radius:14px; padding:13px 15px; cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.dash-chip:hover { transform:translateY(0); background:rgba(255,255,255,0.04); }
.dash-chip .dc-label { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#8a8a93; font-weight:700; }
.dash-chip .dc-value { font-family:'Unbounded',sans-serif; font-size:clamp(13px, 1.15vw, 18px); line-height:1.2; word-break:keep-all; overflow-wrap:normal; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dash-chip .dc-sub { font-size:10px; color:#777; }
.dash-chip .dc-goal { margin-top:6px; }
.dash-chip .dc-bar-track { width:100%; height:5px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.dash-chip .dc-bar-fill { height:100%; width:0%; background:var(--success); border-radius:3px; transition:width 1s ease-out; box-shadow:0 0 8px var(--success); }

/* Ask Utopia */
.dash-ask-card .ask-bubble { font-size:13px; line-height:1.6; color:#ddd; background:rgba(224,163,200,0.06); border:1px solid rgba(224,163,200,0.2); border-radius:12px; padding:14px; margin-bottom:14px; }
.dash-ask-card .ask-input-row { display:flex; gap:8px; margin-bottom:14px; }
.dash-ask-card .ask-input-row input { flex:1; margin:0; padding:12px 14px; background:#09090b; border:1px solid var(--border); color:#fff; border-radius:10px; font-size:13px; }
.dash-ask-card .ask-chips { display:flex; flex-direction:column; gap:8px; }
.dash-ask-card .ask-chips span { font-size:12px; color:#bbb; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:10px 13px; cursor:pointer; transition:.2s; }
.dash-ask-card .ask-chips span:hover { border-color:var(--p); color:#fff; background:rgba(224,163,200,0.08); }

/* Daily Priority */
.dash-priority { display:flex; align-items:center; gap:15px; padding:20px; margin-bottom:24px; border-color:var(--p); background:rgba(224,163,200,0.08); cursor:default; }

/* AI Ajanlar & Otonom Sistem */
.dash-agent-wrap { margin-bottom:30px; padding:22px 24px; border-radius:18px; background:linear-gradient(135deg,#0c0c0e,rgba(16,185,129,0.06)); border:1px solid rgba(16,185,129,0.32); }
.dash-agent-head { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.dash-agent-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-auto-toggle { display:flex; align-items:center; gap:8px; font-size:12px; color:#ccc; cursor:pointer; background:rgba(0,0,0,0.3); border:1px solid #222; border-radius:10px; padding:8px 12px; }
.dash-auto-toggle input { width:auto; margin:0; accent-color:var(--success); }
.dash-auto-toggle small { color:#666; font-size:9px; display:block; }

/* Flow kartları (Collect/Follow-up/Upsell/Win-back) — referans stili */
.flow-card { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-left:3px solid var(--fc,#888); border-radius:14px; padding:16px; margin-bottom:12px; transition:transform .2s ease, border-color .2s ease; }
.flow-card:hover { transform:translateY(0); }
.flow-card .fc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.flow-card .fc-tag { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-flex; gap:5px; align-items:center; border:1px solid var(--fc,#888); color:var(--fc,#888); background:rgba(255,255,255,0.03); }
.flow-card .fc-val { font-family:'Unbounded',sans-serif; color:var(--success); font-size:17px; white-space:nowrap; text-align:right; }
.flow-card .fc-conf { font-size:9px; color:#666; text-align:right; }
.flow-card .fc-desc { margin-top:9px; font-size:13px; color:#ddd; line-height:1.5; }
.flow-card .fc-who { color:#999; font-size:11px; margin-top:4px; }
.flow-card .fc-btns { display:flex; gap:8px; margin-top:13px; }
.flow-card .fc-btns .btn { width:auto; flex:1; padding:9px; font-size:12px; }
.flow-card .fc-btns .btn.fc-skip { flex:0 0 auto; padding:9px 14px; }

/* Mobil uyum */
@media (max-width:980px){ .dash-grid-brief, .dash-charts { grid-template-columns:1fr; } }
@media (max-width:768px){
  .dash-hero { flex-direction:column; align-items:stretch; gap:12px; }
  .dash-hero .dash-cmd { max-width:none; }
  .dash-hero .dash-aibtn { width:100%; }
  .dash-agent-head { flex-direction:column; align-items:stretch; }
  .dash-agent-ctrl { justify-content:space-between; }
  .flow-card:hover, .dash-chip:hover { transform:none; }
}

/* 🚀 Proposal builder ana aksiyon butonları mobilde tam genişlik + dikey */
@media (max-width: 768px){
  #propActionRow { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 24px !important; }
  #propActionRow > .btn, #propActionRow > label { width: 100% !important; padding: 16px !important; box-sizing: border-box !important; justify-content: center !important; font-size: 14px !important; flex: 1 1 auto !important; }
  /* Proposal builder rich-text toolbar'ları mobilde sarsın */
  #mainApp [style*="display: flex"][style*="gap"] > .btn-sec { flex: 0 0 auto !important; }
}

/* 💬 Messages mobil: tıklayınca chat alanı küçük kalıyordu → liste kısalsın, chat büyüsün */
@media (max-width: 768px){
  #msgLayout { height: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
  #msgLayout > div:first-child { max-height: 32vh !important; min-height: 0 !important; overflow-y: auto !important; }
  #msgChatArea { min-height: 58vh !important; padding: 16px !important; justify-content: flex-start !important; }
  #msgLayout > div:last-child { min-height: 66vh !important; }
}

/* 📉 Expenses mobilde sola yaslı (kullanıcı: sağa yaslı görünüyordu) */
@media (max-width: 768px){
  #viewFinExp, #viewFinExp div, #viewFinExp span, #viewFinExp strong, #viewFinExp td, #viewFinExp p, #viewFinExp label { text-align: left !important; }
  #viewFinExp [style*="text-align:right"], #viewFinExp [style*="text-align: right"] { text-align: left !important; }
  #viewFinExp .grid-2, #viewFinExp .grid-3 { display:flex !important; flex-direction:column !important; }
}

/* 🚀 Contenteditable & Rich-text editor text color safety override (Forces white text inside dark background editors, avoiding black copy-paste text) */
#composeBody, #composeBody *, 
#mailBody, #mailBody *, 
#mailReplyBody, #mailReplyBody *, 
.hal-body, .hal-body *, 
#aiDraftBody, #aiDraftBody *,
.rt-editor, .rt-editor * {
    color: #fff !important;
    background-color: transparent !important;
}
/* 🧘 SADE PANO — AI brifing/konsey/ajan/grafik blokları gizli; KPI + bugün seni bekleyen + görevler/toplantılar kalır */
#mainApp.dash-simple .dash-grid-brief .dash-brief-card .section-title span:last-child,
#mainApp.dash-simple #aiAssistantBrief,
#mainApp.dash-simple .dash-ask-card,
#mainApp.dash-simple .jarvis-board,
#mainApp.dash-simple .dash-agent-wrap,
#mainApp.dash-simple .dash-agent-wrap + .section-card,
#mainApp.dash-simple #activityLogSection { display:none !important; }
#mainApp.dash-simple .dash-grid-brief { grid-template-columns: 1fr !important; }
/* 🖱️ Tıklanabilir satırlar/kartlar: imleç ipucu (UX denetimi #17) */
tr[onclick], .data-table tbody tr[onclick], .dash-chip[onclick], .stat-card[onclick], [onclick].glass { cursor: pointer; }