:root{
  --crm-ink:#182034;--crm-muted:#6f7890;--crm-canvas:#f4f6fb;--crm-paper:#fff;
  --crm-line:#e7eaf2;--crm-soft:#f7f8fc;--crm-navy:#13192b;--crm-navy-2:#1c2440;
  --crm-blue:#4776f6;--crm-blue-2:#315fdc;--crm-violet:#8257e6;--crm-pink:#e94f86;
  --crm-coral:#ff735f;--crm-amber:#f5a524;--crm-emerald:#18a77b;--crm-cyan:#18a6c9;
  --crm-shadow:0 16px 44px rgba(34,45,82,.09);--crm-shadow-sm:0 6px 20px rgba(34,45,82,.07);
  --crm-radius:18px;--sidebar-w:252px;
}
html{background:var(--crm-canvas)}
body{background:
  radial-gradient(circle at 92% 0,rgba(130,87,230,.07),transparent 30rem),
  var(--crm-canvas);color:var(--crm-ink);padding-bottom:0}
button,input,select,textarea{font-family:inherit}
input,select,textarea{border-color:#dfe4ef;border-radius:11px;background:#fff}
input:focus,select:focus,textarea:focus{border-color:#9bb1f8;box-shadow:0 0 0 4px rgba(71,118,246,.12)}
.primary{background:linear-gradient(135deg,var(--crm-blue),var(--crm-violet));border:0;color:#fff;border-radius:11px;box-shadow:0 8px 18px rgba(71,118,246,.2)}
.primary:hover{background:linear-gradient(135deg,var(--crm-blue-2),#7145d7);transform:translateY(-1px)}
.badge.green{background:#e4f8f1;color:#087b5a}.badge.coral{background:#fff0e6;color:#bd5f1e}
.panel,.card,.metric,.table-wrap{border-color:var(--crm-line);border-radius:var(--crm-radius);box-shadow:var(--crm-shadow-sm)}

/* Desktop navigation */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);height:100vh;padding:24px 14px 18px;
  display:flex;flex-direction:column;gap:10px;background:
  radial-gradient(circle at 10% 0,rgba(130,87,230,.26),transparent 15rem),
  linear-gradient(180deg,var(--crm-navy-2),var(--crm-navy));
  color:#fff;border:0;box-shadow:18px 0 48px rgba(21,26,50,.1);z-index:20;overflow:hidden
}
.sidebar:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--crm-blue),var(--crm-violet),var(--crm-pink),var(--crm-amber))}
.brand{height:auto;min-width:0;padding:4px 13px 22px;border:0;display:flex;align-items:center}
.brand-logo{display:block;max-width:126px;max-height:42px;object-fit:contain;filter:brightness(0) invert(1)}
#navigation{height:auto;display:grid;align-content:start;gap:14px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;flex:1;padding:0 2px}
#navigation::-webkit-scrollbar{display:none}.nav-group{display:grid;gap:4px}
.nav-section-label{display:block;padding:0 13px 5px;color:#76809d;font-size:12px;letter-spacing:.16em;font-weight:800}
#navigation button{width:100%;min-width:0;min-height:44px;padding:10px 13px;gap:12px;border-radius:12px;color:#aeb7ce;font-size:12px}
#navigation button svg{display:block;width:18px;height:18px}
#navigation button:hover{background:rgba(255,255,255,.07);color:#fff}
#navigation button.active{background:linear-gradient(135deg,rgba(71,118,246,.95),rgba(130,87,230,.9));color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(50,64,150,.28)}
#navigation button.active:before{display:none}#navigation button.active svg{color:#fff}
.sidebar-bottom{display:block;margin-top:auto}.help-card{display:flex;margin:8px 3px 12px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.05);gap:10px}
.help-mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--crm-pink),var(--crm-coral));display:grid;place-items:center;font-weight:900}
.help-card b{display:block;font-size:12px}.help-card small{display:block;color:#8f99b5;font-size:12px;margin-top:3px}
.user-row{border-top:1px solid rgba(255,255,255,.08);margin:0 3px;padding:14px 5px 0}.user-avatar{background:linear-gradient(135deg,var(--crm-pink),var(--crm-violet));color:#fff}
.logout-button:hover{color:#fff}
.main{margin-left:var(--sidebar-w);padding-top:0;min-height:100vh}
.topbar{top:0;height:74px;padding:0 30px;background:rgba(255,255,255,.88);border-color:var(--crm-line);backdrop-filter:blur(18px);z-index:12}
.breadcrumbs{font-size:12px}.breadcrumbs strong{font-size:12px;color:var(--crm-ink)}
.global-search{max-width:460px;flex:1;margin:0 28px}.global-search input{height:43px;background:#f2f4f9;border:1px solid transparent;border-radius:13px;padding-left:42px}
.global-search input:focus{background:#fff;border-color:#ccd6f4}.global-search span{left:15px;color:#8290ad}
.notification-button{background:#f1f4fb;color:#52617f;border-radius:12px}.top-profile-avatar{background:linear-gradient(135deg,var(--crm-blue),var(--crm-violet));color:#fff}
.connection i{background:var(--crm-emerald)}.content{max-width:1640px;padding:28px 30px 50px}
.page-head{align-items:center;margin-bottom:22px}.page-head h2{font-size:28px;color:var(--crm-ink)}.page-head p{font-size:12px;color:var(--crm-muted)}
.toolbar{gap:10px}.toolbar input,.toolbar select{min-height:42px;background:#fff}
.table-wrap{background:#fff;overflow:auto}th{background:#f7f8fc;color:#75809a}th,td{padding:14px 16px;border-color:#edf0f6}tbody tr:hover{background:#f8f9fe}

/* Dashboard */
.dashboard-hero{position:relative;overflow:hidden;margin:0 0 18px;padding:24px 27px;border:0;border-radius:22px;background:
  radial-gradient(circle at 86% 30%,rgba(255,255,255,.2),transparent 11rem),
  linear-gradient(118deg,#315fdc 0%,#7554dd 48%,#db4e8c 100%);color:#fff;box-shadow:0 20px 46px rgba(91,75,190,.2)}
.dashboard-hero:after{content:"";position:absolute;width:220px;height:220px;right:-72px;top:-110px;border:38px solid rgba(255,255,255,.09);border-radius:50%}
.dashboard-hero h1,.dashboard-hero p{color:#fff}.dashboard-hero p{opacity:.82}.greeting-sun{color:#ffd36c}
.quick-button{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px)}
.quick-button:hover{background:#fff;color:var(--crm-blue)}
.dashboard-metrics,.metrics{gap:14px}.dashboard-metric,.metric{border:0;border-radius:18px;background:#fff;box-shadow:var(--crm-shadow-sm);overflow:hidden}
.dashboard-metric{position:relative}.dashboard-metric:after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--metric-accent,var(--crm-blue))}
.dashboard-metric.berry{--metric-accent:var(--crm-pink)}.dashboard-metric.amber{--metric-accent:var(--crm-amber)}.dashboard-metric.sage{--metric-accent:var(--crm-emerald)}.dashboard-metric.navy{--metric-accent:var(--crm-violet)}
.dashboard-metric .metric-icon,.metric-icon{border-radius:12px;background:#edf1ff;color:var(--crm-blue)}
.dashboard-metric.berry .metric-icon{background:#ffe8f1;color:var(--crm-pink)}.dashboard-metric.amber .metric-icon{background:#fff2d8;color:#cb7b00}
.dashboard-metric.sage .metric-icon{background:#e1f8f0;color:var(--crm-emerald)}.dashboard-metric.navy .metric-icon{background:#efeaff;color:var(--crm-violet)}
.analytics-grid,.lower-grid{gap:14px}.analytics-grid .panel,.lower-grid .panel{border:0;box-shadow:var(--crm-shadow-sm)}
.bar-chart{background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#eef1f7 45px)}
.sales-bar i{background:linear-gradient(180deg,#8b6bf0,#4776f6)}
.source-donut{background:radial-gradient(circle at center,#fff 0 48%,transparent 49%),conic-gradient(var(--crm-blue) 0 38%,var(--crm-emerald) 38% 62%,var(--crm-amber) 62% 80%,var(--crm-violet) 80% 92%,var(--crm-pink) 92% 100%)}
.mobile-quick-grid button{border-radius:14px!important;box-shadow:0 10px 22px rgba(39,56,105,.13)!important}

/* Inbox */
.content[data-page="inbox"]{padding:0;max-width:none}
.inbox-shell{grid-template-columns:minmax(290px,22vw) minmax(480px,1fr) minmax(320px,24vw);height:calc(100vh - 74px);min-height:620px;margin:0;border:0;border-radius:0;overflow:hidden;background:#fff;box-shadow:none}
.conversation-pane{background:#fbfcff;border-color:var(--crm-line)}.inbox-pane-head{padding:22px 18px 14px;background:#fff;border-color:var(--crm-line)}
.inbox-pane-head h2{font-size:23px;color:var(--crm-ink)}.inbox-total{background:#edf1ff;color:var(--crm-blue);border:0}
.channel-tabs{gap:5px;margin-top:15px;padding:4px;background:#f1f3f8;border-radius:11px}.channel-tabs button{border:0;border-radius:8px;padding:8px;background:transparent;color:#78839c}
.channel-tabs button.active{background:#fff;color:var(--crm-blue);box-shadow:0 3px 10px rgba(39,54,91,.08)}
.inbox-search input{height:42px;background:#f3f5fa;border:1px solid transparent;border-radius:11px}.conversation-list{padding:8px}
.conversation{margin:3px 0;padding:13px 11px;border:1px solid transparent;border-radius:13px;background:transparent}
.conversation:hover{background:#fff;border-color:var(--crm-line)}.conversation.selected{background:#edf1ff;border-color:#dce4ff;box-shadow:none}
.conversation.selected:before{display:none}.conversation .avatar{background:#fff;color:var(--crm-blue);border:1px solid #e0e4ee}.conversation.selected .avatar{background:linear-gradient(135deg,var(--crm-blue),var(--crm-violet));color:#fff;border:0}
.channel-badge.whatsapp{background:#e3f8ef;color:#087957}.channel-badge.instagram{background:#ffe8f2;color:#ad3e72}.unread{background:var(--crm-pink);color:#fff}
.thread{background:#f5f7fc}.thread-head{min-height:78px;padding:13px 20px;background:#fff;border-color:var(--crm-line)}
.thread-head>.avatar{width:42px;height:42px;background:linear-gradient(135deg,var(--crm-blue),var(--crm-violet));color:#fff}.thread-title strong{font-size:15px}
.assign-bar select{border-radius:10px;background:#f5f7fb}.messages{padding:26px clamp(18px,3vw,48px);gap:12px;background:radial-gradient(circle at 50% 0,rgba(130,87,230,.05),transparent 32rem),#f5f7fb}
.bubble{max-width:76%;padding:11px 14px;border-radius:15px 15px 15px 5px;background:#fff;border-color:#e1e5ef;box-shadow:0 5px 14px rgba(40,52,90,.06);font-size:12px}
.bubble.out{background:linear-gradient(135deg,var(--crm-blue),var(--crm-violet));border:0;color:#fff;border-radius:15px 15px 5px 15px}
.bubble.out .message-time,.bubble.out small{color:rgba(255,255,255,.72)}.compose{padding:13px 18px;background:#fff;border-color:var(--crm-line)}
.compose input{height:46px;border-radius:13px;background:#f4f6fa}.compose-icon{border:0;background:#f0f2f8;border-radius:11px;width:44px;color:var(--crm-violet)}
.compose .primary{border-radius:12px;padding-inline:20px}.compose-notice{background:#fff7e6;border-color:#f4dfb1;color:#78561c}
.customer-context{border-color:var(--crm-line);background:#fff}.customer-head{padding:20px;border-color:var(--crm-line)}.customer-identity .avatar{background:#ffe8f2;color:var(--crm-pink)}
.customer-status{display:flex;align-items:center;gap:7px;margin-top:14px;padding:9px 10px;border-radius:10px;background:#e3f8ef;color:#087957;font-size:12px;font-weight:800}
.customer-status:before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--crm-emerald);color:#fff;font-size:12px}.customer-status.is-guest{background:#fff2db;color:#8c5c0d}.customer-status.is-guest:before{content:"!";background:var(--crm-amber)}
.context-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 16px;padding:5px;background:#f2f4f8;border-radius:11px}.context-tabs button{border:0;background:transparent;color:#75809a;border-radius:8px;padding:8px 5px;font-size:12px;font-weight:700}.context-tabs button.active{background:#fff;color:var(--crm-violet);box-shadow:0 3px 10px rgba(39,54,91,.08)}
.context-section{padding:17px 20px;border-color:var(--crm-line)}.sales-card{border:1px solid var(--crm-line);border-radius:15px;box-shadow:var(--crm-shadow-sm)}.sales-card-head span{background:#fff0da;color:#986110}.sales-product-search input{background:#f5f7fb}.sales-create{border-radius:11px}

/* Other work surfaces */
.kanban-card,.mobile-task-card,.customer-card,.opportunity-card{border-radius:14px!important;border-color:var(--crm-line)!important;box-shadow:var(--crm-shadow-sm)!important}
.progress i{background:linear-gradient(90deg,var(--crm-blue),var(--crm-violet))}
.priority-pill.yuksek,.priority-pill.acil{background:#ffe5ed;color:#c63765}.priority-pill.normal{background:#fff0d2;color:#9a6307}.priority-pill.dusuk{background:#def7ee;color:#087957}
.text-button{color:var(--crm-blue)}.message-waiting{background:#ffe8f0;color:#c43d69}.message-done{background:#e0f7ef;color:#087957}

/* Mobile drawer */
.mobile-menu-button,.mobile-nav-scrim{display:none}
@media(max-width:1180px){
  .inbox-shell{grid-template-columns:290px minmax(430px,1fr)}.customer-context{position:fixed;right:0;top:74px;bottom:0;width:350px;z-index:18;box-shadow:-18px 0 45px rgba(20,28,60,.14);transform:translateX(calc(100% - 5px));transition:transform .22s}.customer-context:focus-within,.customer-context:hover{transform:translateX(0)}
}
@media(max-width:820px){
  :root{--sidebar-w:min(84vw,310px)}
  body{padding-bottom:0}.sidebar{width:var(--sidebar-w);height:100svh;padding:20px 14px 16px;transform:translateX(-105%);transition:transform .24s cubic-bezier(.2,.8,.2,1);box-shadow:24px 0 60px rgba(15,22,48,.25);z-index:40}
  body.mobile-nav-open{overflow:hidden}.mobile-nav-open .sidebar{transform:translateX(0)}
  .brand{height:auto;min-width:0;padding:4px 13px 20px}.brand-logo{max-width:120px}
  #navigation{height:auto;display:grid;overflow-y:auto}#navigation button{min-height:46px;padding:11px 13px}#navigation button svg{display:block}
  .main{margin-left:0;padding-top:0}.topbar{top:0;height:64px;padding:0 13px 0 10px;display:flex;gap:8px}
  .mobile-menu-button{display:grid;place-items:center;flex:none;width:42px;height:42px;border:0;border-radius:12px;background:#eef1f8;color:var(--crm-ink)}
  .mobile-menu-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .mobile-nav-scrim{display:block;position:fixed;inset:0;background:rgba(12,17,34,.48);backdrop-filter:blur(3px);z-index:35;opacity:0;pointer-events:none;transition:opacity .2s}
  .mobile-nav-open .mobile-nav-scrim{opacity:1;pointer-events:auto}
  .breadcrumbs,.connection,.top-divider{display:none}.global-search{margin:0;max-width:none;flex:1}.global-search input{height:42px;padding-right:10px}.top-actions{gap:7px}.top-profile span:last-child{display:none}.notification-button{width:40px;height:40px}.top-profile-avatar{width:36px;height:36px}
  .content{padding:16px 14px 32px}.page-head{align-items:flex-start;margin-bottom:15px}.page-head h2{font-size:23px}.page-head p{font-size:12px}
  .dashboard-hero{padding:20px 18px;border-radius:18px;margin-bottom:12px}.dashboard-hero h1{font-size:24px}.dashboard-hero p{font-size:12px}.quick-button{display:none}
  .mobile-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.mobile-quick-grid button{min-height:76px}
  .dashboard-metrics,.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dashboard-metric,.metric{min-height:105px;padding:13px}.dashboard-metric strong,.metric strong{font-size:22px}
  .analytics-grid,.lower-grid,.columns{grid-template-columns:1fr;display:grid}.analytics-grid .source-panel,.analytics-grid .workload-panel{display:none}
  .toolbar{display:grid;grid-template-columns:1fr 1fr}.toolbar input{grid-column:1/-1;max-width:none}.toolbar select{max-width:none}
  .table-wrap{border-radius:14px}th,td{padding:12px 13px}.panel,.card{border-radius:16px}
  .content[data-page="inbox"]{padding:0}.inbox-shell{display:block;height:calc(100svh - 64px);min-height:0;margin:0;border:0;overflow:hidden}.conversation-pane,.thread{height:100%}
  .inbox-shell:not(.thread-open) .thread{display:none}.inbox-shell.thread-open .conversation-pane{display:none}.conversation-list{max-height:none;flex:1}.inbox-pane-head{padding:17px 14px 12px}.thread-head{position:sticky;top:0;z-index:2;min-height:66px;padding:10px 12px}.messages{padding:15px 10px}.bubble{max-width:90%;font-size:12px}.compose{position:sticky;bottom:0;z-index:3;padding:9px}.customer-context{top:64px;width:min(92vw,350px)}
  .task-tabs{display:grid}.mobile-kanban{gap:6px}.mobile-task-fab{bottom:18px}
}
@media(max-width:480px){
  .top-profile{display:none}.global-search input{font-size:12px}.content{padding-inline:11px}
  .dashboard-metrics,.metrics{grid-template-columns:1fr 1fr}.dashboard-metric,.metric{padding:12px;min-height:98px}.dashboard-metric strong,.metric strong{font-size:20px}
  .mobile-quick-grid{grid-template-columns:repeat(3,1fr)}.toolbar{grid-template-columns:1fr}.toolbar input,.toolbar select{grid-column:auto}
  .page-head{gap:9px}.page-head .primary{padding:10px 12px;font-size:12px}.bubble{max-width:94%}
}

/* Login */
.login-wrap{background:#f4f6fb}.login-visual{background:var(--crm-navy);box-shadow:inset 6px 0 0 var(--crm-pink)}
.login-visual:after{background:linear-gradient(180deg,rgba(16,20,37,.22),rgba(16,20,37,.9))}
.login-message .eyebrow{color:#ffbdcf}.login-message h2{font-weight:750}.login-card h1{color:var(--crm-ink)}
.login-card .eyebrow{color:var(--crm-pink)}.login-link{color:var(--crm-violet)}
.login-dot{background:var(--crm-pink);box-shadow:0 0 0 5px rgba(233,79,134,.18)}
@media(max-width:760px){.login-wrap{grid-template-columns:1fr}.login-visual{display:none}.login-form-wrap{min-height:100svh;padding:28px 22px}.login-card{padding:18px 0}.login-mobile-brand{display:flex;margin-bottom:28px}.login-mobile-brand .brand-logo{filter:none;max-width:120px}.login-card h1{font-size:30px}}

.inbox-mobile-back{display:none}
@media(max-width:820px){.inbox-mobile-back{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;border-radius:11px;background:#eef1f8;color:var(--crm-ink);font-size:27px;line-height:1}.thread-head{gap:9px}}