/* ═══════════════════════════════════════════════════════════
   ASK Rolly ERP — ortak stil (MSP/Nevsac tasarım dili, ASK kırmızısı)
     Sidebar  : #0E1116   Marka : #E30613   Sayfa : #F6F7F9
   ═══════════════════════════════════════════════════════════ */
* { font-family: 'Inter', system-ui, sans-serif; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Sidebar ─────────────────────────────────────────────── */
#mainSidebar { transform: translateX(-100%); transition: transform .32s cubic-bezier(.4,0,.2,1); }
#mainSidebar.open { transform: translateX(0); }
@media (min-width:1024px){ #mainSidebar{ transform: translateX(0) !important; } .main-content{ margin-left:248px; } }
.sidebar-section-label { display:block; font-size:9.5px; letter-spacing:.11em; font-weight:700; color:#4B5563; text-transform:uppercase; padding:12px 14px 5px; user-select:none; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8.5px 12px; border-radius:9px; transition:background .14s; border-left:2px solid transparent; text-decoration:none; }
.nav-item:hover { background:rgba(255,255,255,.055); }
.nav-item:hover .nav-label { color:#fff; }
.nav-item:hover .nav-icon { color:#e2e8f0; }
.nav-active { background:linear-gradient(135deg,rgba(227,6,19,.24) 0%,rgba(227,6,19,.06) 100%) !important; border-left-color:#E30613 !important; }
.nav-active .nav-label { color:#fff !important; font-weight:600; }
.nav-active .nav-icon { color:#FCA5A5 !important; }
.nav-label { font-size:13px; font-weight:500; color:#9CA3AF; white-space:nowrap; flex:1; transition:color .14s; }
.nav-icon { width:16px; height:16px; flex-shrink:0; color:#6B7280; transition:color .14s; }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar-shadow { box-shadow:0 1px 0 0 #E5E7EB, 0 2px 14px -4px rgba(15,23,42,.07); }
.ai-trigger-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9999px; background:linear-gradient(135deg,#E30613 0%,#7C3AED 100%); color:#fff; font-size:12.5px; font-weight:700; border:none; cursor:pointer; white-space:nowrap; box-shadow:0 2px 10px -2px rgba(227,6,19,.4); transition:transform .15s, box-shadow .15s; }
.ai-trigger-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px -3px rgba(124,58,237,.5); }
.help-mode-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 11px; border-radius:10px; border:1px solid #FDE68A; background:#FFFBEB; color:#B45309; font-size:12px; font-weight:700; cursor:pointer; }
.help-mode-state::before { content:'AÇIK'; font-size:9px; background:#F59E0B; color:#fff; padding:1px 5px; border-radius:99px; }
.help-off .help-mode-btn { border-color:#E5E7EB; background:#fff; color:#64748B; }
.help-off .help-mode-state::before { content:'KAPALI'; background:#CBD5E1; }

/* ── Rehber kutusu ───────────────────────────────────────── */
.help-box { background:linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%); border:1px solid #FDE68A; border-radius:16px; padding:14px 16px; }
.help-off .help-box { display:none; }
.help-box .help-toggle-btn::before { content:'Gizle ▴'; }
.help-box.collapsed .help-toggle-btn::before { content:'Göster ▾'; }
.help-box.collapsed .help-body { display:none; }

/* ── AI drawer ───────────────────────────────────────────── */
.ai-drawer { transform:translateX(100%); visibility:hidden; transition:transform .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s; }
.ai-drawer.open { transform:translateX(0); visibility:visible; transition:transform .38s cubic-bezier(.16,1,.3,1), visibility 0s; }
.drawer-shadow { box-shadow:-10px 0 44px -4px rgba(15,23,42,.14); }
.backdrop { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s, visibility 0s linear .28s; }
.backdrop.open { opacity:1; visibility:visible; pointer-events:all; transition:opacity .28s, visibility 0s; }
.mob-overlay { opacity:0; pointer-events:none; transition:opacity .28s; }
.mob-overlay.open { opacity:1; pointer-events:all; }
.ai-avatar { width:30px; height:30px; background:linear-gradient(135deg,#E30613,#7C3AED); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-bubble-user { background:#0E1116; color:#fff; border-radius:18px 18px 4px 18px; padding:10px 14px; font-size:13px; max-width:85%; margin-left:auto; }
.ai-bubble-ai { background:#F8FAFC; border:1px solid #E2E8F0; border-radius:4px 18px 18px 18px; padding:11px 14px; font-size:13px; line-height:1.55; color:#334155; max-width:88%; }
.ai-bubble-ai b, .ai-bubble-ai strong { color:#0F172A; }
.ai-chat-input { border:1.5px solid #E2E8F0; border-radius:14px; padding:10px 14px; font-size:13px; color:#334155; outline:none; width:100%; background:#fff; transition:border-color .2s; }
.ai-chat-input:focus { border-color:#E30613; box-shadow:0 0 0 3px rgba(227,6,19,.1); }
.ai-quick { border:1px solid #E2E8F0; border-radius:12px; padding:9px 11px; text-align:left; background:#fff; cursor:pointer; transition:all .14s; }
.ai-quick:hover { border-color:#E30613; background:#FFF5F5; transform:translateY(-1px); }
.ai-typing-dot { width:6px; height:6px; border-radius:50%; background:#94A3B8; display:inline-block; animation:ai-typing 1.2s ease-in-out infinite; }
.ai-typing-dot:nth-child(2){ animation-delay:.2s; } .ai-typing-dot:nth-child(3){ animation-delay:.4s; }
@keyframes ai-typing { 0%,60%,100%{opacity:1} 30%{opacity:.35} }
.ai-caret { display:inline-block; width:2px; height:1em; background:#E30613; margin-left:1px; vertical-align:-2px; animation:caret .8s step-end infinite; }
@keyframes caret { 50%{opacity:0} }
.ai-mini-table { width:100%; margin-top:6px; font-size:11.5px; border-collapse:collapse; }
.ai-mini-table td, .ai-mini-table th { padding:4px 6px; border-bottom:1px solid #EEF2F6; text-align:left; }
.ai-mini-table th { color:#94A3B8; font-weight:600; font-size:10.5px; text-transform:uppercase; }

/* ── Animasyon / tipografi ───────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.da { animation:fadeUp .38s ease-out both; }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.live-dot { animation:livePulse 1.5s ease-in-out infinite; }
@keyframes spinSlow { to { transform:rotate(360deg); } }
.spin-slow { animation:spinSlow 6s linear infinite; transform-origin:50% 50%; }
.speedmono { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mono { font-family:'JetBrains Mono',monospace; }

/* ── Rozetler ────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:9999px; font-size:10.5px; font-weight:700; line-height:1.5; white-space:nowrap; }
.badge-green{background:#D1FAE5;color:#065F46} .badge-yellow{background:#FEF3C7;color:#92400E} .badge-red{background:#FEE2E2;color:#991B1B}
.badge-blue{background:#DBEAFE;color:#1E40AF} .badge-gray{background:#F1F5F9;color:#475569} .badge-purple{background:#EDE9FE;color:#5B21B6}
.badge-orange{background:#FFEDD5;color:#9A3412} .badge-teal{background:#CCFBF1;color:#0F766E} .badge-dark{background:#0E1116;color:#fff}

/* ── Kart / tablo / form ─────────────────────────────────── */
.ask-card { background:#fff; border-radius:16px; border:1px solid rgba(226,232,240,.8); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.ask-card-hover { transition:transform .2s, box-shadow .2s, border-color .2s; }
.ask-card-hover:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.08); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #F1F5F9; }
.card-title { font-size:14px; font-weight:700; color:#1E293B; letter-spacing:-.01em; }
.ask-table { width:100%; border-collapse:collapse; }
.ask-table thead th { text-align:left; padding:10px 14px; font-size:10.5px; font-weight:600; color:#94A3B8; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid #F1F5F9; background:#F8FAFC; white-space:nowrap; }
.ask-table tbody td { padding:10px 14px; font-size:13px; color:#334155; border-bottom:1px solid #F4F6F8; vertical-align:middle; }
.ask-table tbody tr:hover td { background:#FAFBFC; }
.ask-table tbody tr:last-child td { border-bottom:none; }
.ask-input, .ask-select { height:38px; border:1px solid #E2E8F0; border-radius:10px; padding:0 12px; font-size:13px; color:#1E293B; background:#fff; outline:none; width:100%; transition:border-color .15s, box-shadow .15s; }
.ask-textarea { border:1px solid #E2E8F0; border-radius:10px; padding:10px 12px; font-size:13px; width:100%; outline:none; resize:vertical; }
.ask-input:focus, .ask-select:focus, .ask-textarea:focus { border-color:#E30613; box-shadow:0 0 0 3px rgba(227,6,19,.1); }
.ask-label { display:block; font-size:11px; font-weight:600; color:#64748B; margin-bottom:5px; }

/* ── Butonlar ────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-dark, .btn-success, .btn-danger { display:inline-flex; align-items:center; gap:7px; padding:8.5px 15px; border-radius:10px; font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, transform .1s; border:none; }
.btn-primary { background:#E30613; color:#fff; } .btn-primary:hover { background:#B80510; }
.btn-dark { background:#0E1116; color:#fff; } .btn-dark:hover { background:#1F242C; }
.btn-secondary { background:#fff; color:#475569; border:1px solid #E2E8F0; font-weight:600; } .btn-secondary:hover { background:#F8FAFC; border-color:#CBD5E1; }
.btn-success { background:#059669; color:#fff; } .btn-success:hover { background:#047857; }
.btn-danger { background:#FEE2E2; color:#B91C1C; } .btn-danger:hover { background:#FECACA; }
.btn-primary:active, .btn-dark:active, .btn-secondary:active { transform:scale(.98); }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:#F1F5F9; color:#64748B; border:none; cursor:pointer; transition:background .14s, color .14s; }
.btn-icon:hover { background:#E2E8F0; color:#334155; }
.btn-icon-view{background:#DBEAFE;color:#1D4ED8} .btn-icon-edit{background:#FEF3C7;color:#B45309} .btn-icon-delete{background:#FEE2E2;color:#B91C1C}

/* ── Sekmeler / segment ──────────────────────────────────── */
.seg { display:inline-flex; background:#F1F5F9; border-radius:11px; padding:3px; gap:2px; }
.seg button { padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700; color:#64748B; display:inline-flex; align-items:center; gap:6px; transition:all .14s; }
.seg button.active { background:#fff; color:#0E1116; box-shadow:0 1px 3px rgba(15,23,42,.1); }
.tab-btn { padding:10px 2px; font-size:13px; font-weight:700; color:#94A3B8; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:6px; }
.tab-btn.active { color:#E30613; border-bottom-color:#E30613; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:99px; border:1px solid #E2E8F0; background:#fff; font-size:12px; font-weight:600; color:#475569; cursor:pointer; transition:all .14s; }
.chip:hover { border-color:#CBD5E1; }
.chip.active { background:#0E1116; border-color:#0E1116; color:#fff; }

/* ── İlerleme / nokta ────────────────────────────────────── */
.progress-bar { border-radius:99px; background:#EEF2F6; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; transition:width .6s ease; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Rulo kartları ───────────────────────────────────────── */
.coil-card { position:relative; background:#fff; border:1px solid #E8ECF1; border-radius:18px; padding:14px; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s; }
.coil-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px -8px rgba(15,23,42,.16); border-color:#CBD5E1; }
.coil-card.is-crit { border-color:#FECACA; background:linear-gradient(180deg,#FFF5F5,#fff 45%); }
.coil-card.is-line::after { content:''; position:absolute; top:12px; right:12px; width:9px; height:9px; border-radius:50%; background:#2563EB; box-shadow:0 0 0 4px rgba(37,99,235,.18); animation:livePulse 1.5s infinite; }
.yard-cell { aspect-ratio:1; border-radius:14px; border:1.5px dashed #E2E8F0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; transition:all .15s; background:#FBFCFD; }
.yard-cell.filled { border-style:solid; background:#fff; border-color:#E2E8F0; cursor:pointer; }
.yard-cell.filled:hover { border-color:#E30613; box-shadow:0 6px 18px -6px rgba(227,6,19,.35); transform:translateY(-1px); }
.yard-cell.dim { opacity:.18; }

/* ── Akış diyagramı (rehber) ─────────────────────────────── */
.flow-step { position:relative; background:#fff; border:1.5px solid #E5E7EB; border-radius:16px; padding:14px; cursor:pointer; transition:all .16s; }
.flow-step:hover { border-color:#E30613; transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(227,6,19,.35); }
.flow-step.active { border-color:#E30613; background:#FFF5F5; box-shadow:0 0 0 4px rgba(227,6,19,.08); }
.flow-num { width:26px; height:26px; border-radius:9px; background:#0E1116; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.flow-step.active .flow-num { background:#E30613; }

/* ── Kanban ──────────────────────────────────────────────── */
.kanban-col { background:#F1F4F7; border-radius:16px; padding:10px; min-height:300px; }
.kanban-card { background:#fff; border-radius:12px; border:1px solid #E5E7EB; padding:11px 12px; margin-bottom:8px; cursor:grab; transition:box-shadow .15s, transform .15s; }
.kanban-card:hover { box-shadow:0 6px 16px rgba(15,23,42,.09); transform:translateY(-1px); }
.kanban-card.dragging { opacity:.5; }
.kanban-col.drag-over { outline:2px dashed #E30613; outline-offset:-4px; background:#FFF5F5; }

/* ── Modal ───────────────────────────────────────────────── */
.ask-modal-wrap { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,42,.42); backdrop-filter:blur(2px); }
.ask-modal-wrap.hidden { display:none; }
.ask-modal { background:#fff; border-radius:20px; box-shadow:0 25px 60px rgba(15,23,42,.25); max-height:92vh; overflow-y:auto; width:100%; animation:fadeUp .25s ease-out; }

/* ── Toast ───────────────────────────────────────────────── */
#toast-wrap { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast-msg { padding:10px 15px; border-radius:11px; font-size:12.5px; font-weight:600; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.18); animation:fadeUp .25s ease; pointer-events:all; max-width:360px; }

/* ── SweetAlert teması ───────────────────────────────────── */
.swal2-popup { border-radius:20px !important; font-family:'Inter',sans-serif !important; }
.swal2-title { font-size:18px !important; font-weight:800 !important; color:#1E293B !important; }
.swal2-html-container { font-size:13.5px !important; color:#64748B !important; }
.swal2-confirm { background:#E30613 !important; border-radius:10px !important; font-weight:700 !important; font-size:13px !important; }
.swal2-cancel { background:#F1F5F9 !important; color:#475569 !important; border-radius:10px !important; font-weight:700 !important; font-size:13px !important; }

/* ── Etiket önizleme ─────────────────────────────────────── */
.label-paper { background:#fff; border:1px solid #CBD5E1; border-radius:6px; box-shadow:0 8px 24px -10px rgba(15,23,42,.25); color:#0F172A; }

/* ── Sunum modu ──────────────────────────────────────────── */
.present-wrap { position:fixed; inset:0; z-index:80; background:#0E1116; color:#fff; display:flex; flex-direction:column; }
.present-wrap.hidden { display:none; }

@media print {
    #mainSidebar, #topbar, .no-print, #aiDrawer, .help-box { display:none !important; }
    .main-content { margin-left:0 !important; }
    main { overflow:visible !important; }
    body { overflow:visible !important; height:auto !important; }
}
