/* ===== ONARSOFT INFOGRAPHIC WIDGET SYSTEM ===== */

/* Base widget */
.infographic-widget { width:100%; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden; }
.ig-window { background:rgba(13,13,13,0.85); border:1px solid rgba(251,191,36,0.15); border-radius:14px; width:100%; max-width:420px; backdrop-filter:blur(10px); box-shadow:0 16px 48px rgba(0,0,0,0.4); transition:transform 0.4s ease, box-shadow 0.4s ease; }
.ig-window:hover { transform:translateY(-4px); box-shadow:0 24px 64px rgba(0,0,0,0.5), 0 0 20px rgba(251,191,36,0.08); }
.ig-window-bar { display:flex; align-items:center; gap:5px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.ig-window-bar .dot { width:7px; height:7px; border-radius:50%; }
.ig-window-bar .dot-r { background:#ef4444; }
.ig-window-bar .dot-y { background:#eab308; }
.ig-window-bar .dot-g { background:#22c55e; }
.ig-window-bar .title { font-size:10px; color:rgba(255,255,255,0.5); margin-left:6px; }
.ig-body { padding:16px; }

/* Code editor */
.ig-code-line { font-family:'Courier New', monospace; font-size:12px; line-height:1.7; color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; }
.ig-code-line .kw { color:#c084fc; }
.ig-code-line .fn { color:#60a5fa; }
.ig-code-line .str { color:#34d399; }
.ig-code-line .cm { color:rgba(255,255,255,0.3); font-style:italic; }
.ig-code-line .var { color:#fbbf24; }
.ig-code-anim { animation:igTypeIn 0.6s ease forwards; opacity:0; }
@keyframes igTypeIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.ig-cursor { display:inline-block; width:2px; height:14px; background:#fbbf24; animation:igBlink 1s infinite; vertical-align:middle; margin-left:2px; }
@keyframes igBlink { 0%,50% { opacity:1; } 51%,100% { opacity:0; } }

/* Stat cards */
.ig-stats { display:flex; gap:8px; margin-bottom:10px; }
.ig-stat { flex:1; background:rgba(255,255,255,0.04); border-radius:8px; padding:10px; text-align:center; transition:background 0.3s; }
.ig-stat:hover { background:rgba(255,255,255,0.08); }
.ig-stat-icon { font-size:16px; margin-bottom:4px; }
.ig-stat-icon.blue { color:#60a5fa; }
.ig-stat-icon.green { color:#34d399; }
.ig-stat-icon.amber { color:#fbbf24; }
.ig-stat-icon.purple { color:#c084fc; }
.ig-stat-icon.red { color:#f87171; }
.ig-stat-val { font-size:18px; font-weight:700; color:#fff; display:inline-block; transition:transform 0.25s ease; }
.ig-stat-lbl { font-size:9px; color:rgba(255,255,255,0.45); text-transform:uppercase; }
.ig-stat:hover .ig-stat-val { transform:scale(1.12); transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }

/* Progress bars */
.ig-progress { margin-bottom:10px; }
.ig-progress-label { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.6); margin-bottom:4px; }
.ig-progress-track { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.ig-progress-fill { height:100%; border-radius:3px; animation:igFillBar 2s ease forwards; position:relative; overflow:hidden; }
@keyframes igFillBar { from { width:0; } }
.ig-fill-green { background:linear-gradient(90deg, #10b981, #34d399); }
.ig-fill-amber { background:linear-gradient(90deg, #f59e0b, #fbbf24); }
.ig-fill-blue { background:linear-gradient(90deg, #3b82f6, #60a5fa); }
.ig-fill-red { background:linear-gradient(90deg, #ef4444, #f87171); }
.ig-fill-purple { background:linear-gradient(90deg, #8b5cf6, #a78bfa); }
.ig-progress-fill::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation:igShimmer 3s infinite; }
@keyframes igShimmer { 0% { left:-100%; } 50% { left:100%; } 100% { left:100%; } }

/* Checklist */
.ig-checklist { list-style:none; padding:0; margin:0; }
.ig-checklist li { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; color:rgba(255,255,255,0.6); border-bottom:1px solid rgba(255,255,255,0.04); transition:background 0.2s; }
.ig-checklist li:hover { background:rgba(255,255,255,0.02); }
.ig-checklist li:last-child { border:none; }
.ig-check { width:16px; height:16px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:8px; flex-shrink:0; }
.ig-check.done { background:rgba(16,185,129,0.2); color:#34d399; }
.ig-check.active { background:rgba(251,191,36,0.2); color:#fbbf24; animation:igPulse 1.5s infinite; }
.ig-check.wait { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.25); }
@keyframes igPulse { 0%,100% { box-shadow:0 0 0 0 rgba(251,191,36,0.3); } 50% { box-shadow:0 0 0 6px rgba(251,191,36,0); } }
.ig-badge { margin-left:auto; font-size:10px; padding:2px 8px; border-radius:10px; }
.ig-badge.pass { background:rgba(16,185,129,0.15); color:#34d399; }
.ig-badge.pending { background:rgba(251,191,36,0.15); color:#fbbf24; }
.ig-badge.fail { background:rgba(239,68,68,0.15); color:#f87171; }

/* Gauge SVG */
.ig-gauge-wrap { text-align:center; margin-bottom:6px; }
.ig-gauge-wrap svg { width:130px; }
.ig-gauge-text { font-size:20px; font-weight:700; color:#fff; margin-top:-18px; display:block; }
.ig-gauge-sub { font-size:10px; color:rgba(255,255,255,0.45); }
.ig-gauge-fill { animation:igGaugeDraw 2s ease forwards; }
@keyframes igGaugeDraw { from { stroke-dashoffset:141; } }

/* Gantt bars */
.ig-gantt { margin-top:8px; }
.ig-gantt-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ig-gantt-label { font-size:10px; color:rgba(255,255,255,0.5); width:65px; flex-shrink:0; }
.ig-gantt-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; position:relative; overflow:hidden; }
.ig-gantt-bar { height:100%; border-radius:4px; position:absolute; top:0; animation:igGanttGrow 1.2s ease both; }
.ig-gantt-row:nth-child(1) .ig-gantt-bar { animation-delay:0.2s; }
.ig-gantt-row:nth-child(2) .ig-gantt-bar { animation-delay:0.4s; }
.ig-gantt-row:nth-child(3) .ig-gantt-bar { animation-delay:0.6s; }
.ig-gantt-row:nth-child(4) .ig-gantt-bar { animation-delay:0.8s; }
@keyframes igGanttGrow { from { width:0; } }

/* Floating notifications */
.ig-float { position:absolute; background:rgba(13,13,13,0.9); border:1px solid rgba(251,191,36,0.12); border-radius:10px; padding:8px 14px; display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,0.7); backdrop-filter:blur(8px); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.ig-float-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.ig-float-icon.success { background:rgba(16,185,129,0.2); color:#34d399; }
.ig-float-icon.warning { background:rgba(245,158,11,0.2); color:#fbbf24; }
.ig-float-icon.info { background:rgba(96,165,250,0.2); color:#60a5fa; }
.ig-float.f1 { top:15px; right:10px; animation:igFloatIn1 1s 0.5s ease both; }
.ig-float.f2 { bottom:20px; left:10px; animation:igFloatIn2 1s 1s ease both; }
.ig-float.f3 { bottom:70px; right:15px; animation:igFloatIn3 1s 1.5s ease both; }
@keyframes igFloatIn1 { from { opacity:0; transform:translateY(-15px); } to { opacity:1; transform:translateY(0); } }
@keyframes igFloatIn2 { from { opacity:0; transform:translateX(-15px); } to { opacity:1; transform:translateX(0); } }
@keyframes igFloatIn3 { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }

/* Connected nodes */
.ig-nodes { display:flex; align-items:center; justify-content:center; gap:4px; padding:15px 0; }
.ig-node { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform 0.3s; }
.ig-node:hover { transform:scale(1.1); }
.ig-node-line { width:20px; height:2px; position:relative; overflow:hidden; }
.ig-node-line::after { content:''; position:absolute; width:8px; height:2px; background:#fbbf24; border-radius:1px; animation:igDataFlow 1.5s infinite; }
@keyframes igDataFlow { 0% { left:-8px; } 100% { left:100%; } }

/* Ticket list */
.ig-ticket { display:flex; align-items:center; gap:8px; padding:8px; background:rgba(255,255,255,0.03); border-radius:8px; margin-bottom:5px; transition:background 0.2s; animation:igSlideIn 0.4s ease both; }
.ig-ticket:hover { background:rgba(255,255,255,0.06); }
.ig-ticket:nth-child(1) { animation-delay:0.1s; }
.ig-ticket:nth-child(2) { animation-delay:0.2s; }
.ig-ticket:nth-child(3) { animation-delay:0.3s; }
@keyframes igSlideIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
.ig-ticket-priority { width:3px; height:24px; border-radius:2px; flex-shrink:0; }
.ig-ticket-priority.high { background:#ef4444; animation:igPriPulse 2s ease infinite; }
.ig-ticket-priority.mid { background:#f59e0b; }
.ig-ticket-priority.low { background:#22c55e; }
.ig-ticket-info { flex:1; }
.ig-ticket-title { font-size:11px; color:rgba(255,255,255,0.75); display:block; }
.ig-ticket-meta { font-size:9px; color:rgba(255,255,255,0.35); }
.ig-ticket-status { font-size:9px; padding:2px 6px; border-radius:8px; white-space:nowrap; }
.ig-ticket-status.open { background:rgba(59,130,246,0.15); color:#60a5fa; }
.ig-ticket-status.progress { background:rgba(251,191,36,0.15); color:#fbbf24; }
.ig-ticket-status.done { background:rgba(16,185,129,0.15); color:#34d399; }

/* Pulse dot */
.ig-pulse-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; animation:igPulseDot 2s infinite; }
@keyframes igPulseDot { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* RPA Process flow */
.ig-flow { display:flex; align-items:center; justify-content:center; gap:6px; padding:15px 0; flex-wrap:wrap; }
.ig-flow-step { display:flex; flex-direction:column; align-items:center; gap:5px; }
.ig-flow-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.ig-flow-label { font-size:9px; color:rgba(255,255,255,0.45); text-align:center; }
.ig-flow-arrow { color:rgba(251,191,36,0.5); font-size:12px; }
.ig-flow-step.done .ig-flow-icon { border:1px solid rgba(34,197,94,0.3); animation:igFlowDone 3s ease infinite; }
.ig-flow-step.active .ig-flow-icon { border:1px solid rgba(251,191,36,0.4); animation:igPulse 1.5s infinite; }
@keyframes igFlowDone { 0%, 100% { box-shadow:0 0 0 0 rgba(34,197,94,0.15); } 50% { box-shadow:0 0 8px 2px rgba(34,197,94,0.1); } }
@keyframes igPriPulse { 0%, 100% { opacity:1; } 50% { opacity:0.4; } }

/* Live animation classes */
@keyframes igBarLive { 0%, 100% { transform:scaleY(1); transform-origin:bottom; } 50% { transform:scaleY(0.88); transform-origin:bottom; } }
@keyframes igBarLive2 { 0%, 100% { transform:scaleY(0.9); transform-origin:bottom; } 50% { transform:scaleY(1.05); transform-origin:bottom; } }
@keyframes igRowGlow { 0%, 100% { background:rgba(16,185,129,0.06); } 50% { background:rgba(16,185,129,0.14); } }
@keyframes igRowGlowRed { 0%, 100% { background:rgba(239,68,68,0.04); } 50% { background:rgba(239,68,68,0.10); } }
@keyframes igCountUp { 0%, 100% { transform:translateY(0); } 25% { transform:translateY(-2px); } 75% { transform:translateY(1px); } }
@keyframes igTabPulse { 0%, 100% { box-shadow:0 0 0 0 rgba(245,158,11,0.3); } 50% { box-shadow:0 0 8px 2px rgba(245,158,11,0.15); } }
.bar-live { animation:igBarLive 3s ease-in-out infinite; }
.bar-live-2 { animation:igBarLive2 3.5s ease-in-out infinite; }
.bar-live-3 { animation:igBarLive 4s ease-in-out infinite; }
.row-glow { animation:igRowGlow 4s ease infinite; }
.row-glow-red { animation:igRowGlowRed 4s ease infinite; }
.count-live { animation:igCountUp 2s ease infinite; }
.tab-pulse { animation:igTabPulse 2s ease infinite; }

/* Gauge breathing */
.gauge-live { animation:igGaugeDraw 2s ease forwards, igGaugeBreath 4s 2.5s ease-in-out infinite; }
@keyframes igGaugeBreath { 0%, 100% { stroke-dashoffset:14; } 50% { stroke-dashoffset:22; } }
/* KPI pulse */
.kpi-live { animation:igKpiPulse 3s ease-in-out infinite; }
@keyframes igKpiPulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.015); } }
/* Checklist glow */
.cl-glow { animation:igCheckGlow 3s ease infinite; }
@keyframes igCheckGlow { 0%, 100% { background:transparent; } 50% { background:rgba(251,191,36,0.04); } }
.cl-glow:nth-child(2) { animation-delay:0.5s; }
.cl-glow:nth-child(3) { animation-delay:1s; }
.cl-glow:nth-child(4) { animation-delay:1.5s; }
/* Code glow */
.code-glow { animation:igCodeGlow 4s ease-in-out infinite; }
/* Fix: ig-code-anim + code-glow birlikte kullanildiginda her iki animasyon da calissin */
.ig-code-anim.code-glow { animation:igTypeIn 0.6s ease forwards, igCodeGlow 4s 1s ease-in-out infinite; opacity:0; }
@keyframes igCodeGlow { 0%, 100% { text-shadow:0 0 0 transparent; } 50% { text-shadow:0 0 8px rgba(251,191,36,0.12); } }
.code-glow:nth-child(2) { animation-delay:0.3s; }
.code-glow:nth-child(3) { animation-delay:0.6s; }
.code-glow:nth-child(4) { animation-delay:0.9s; }
.code-glow:nth-child(5) { animation-delay:1.2s; }
.code-glow:nth-child(6) { animation-delay:1.5s; }
.code-glow:nth-child(7) { animation-delay:1.8s; }
/* Node glow */
.node-glow { animation:igNodeGlow 3s ease infinite; }
@keyframes igNodeGlow { 0%, 100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 12px rgba(251,191,36,0.15); } }
.node-glow:nth-child(3) { animation-delay:0.5s; }
.node-glow:nth-child(5) { animation-delay:1s; }

/* Detail page layout */
.detail-widget-wrap { display:flex; align-items:flex-start; justify-content:center; padding:30px 0; position:sticky; top:120px; }
.detail-widget-wrap .ig-window { max-width:420px; width:100%; }
.detail-widget-wrap .infographic-widget { min-height:auto; padding:0; }
@media (max-width:991px) { .detail-widget-wrap { position:static; padding:20px 0; } }

/* Detail page feature cards */
.detail-feature { padding:25px; border-radius:16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); margin-bottom:20px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.detail-feature:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.15); }
.detail-feature i { font-size:28px; color:#d97706; margin-bottom:12px; display:block; }
.detail-feature h5 { margin-bottom:10px; font-size:18px; }
.detail-feature p { font-size:14px; color:rgba(255,255,255,0.6); margin:0; }

/* Detail page stats row */
.detail-stats-row { display:flex; gap:20px; margin:40px 0; flex-wrap:wrap; }
.detail-stat-card { flex:1; min-width:150px; padding:25px; border-radius:16px; background:rgba(245,158,11,0.06); border:1px solid rgba(245,158,11,0.12); text-align:center; }
.detail-stat-card .val { font-size:36px; font-weight:700; color:#f59e0b; display:block; }
.detail-stat-card .lbl { font-size:13px; color:rgba(255,255,255,0.5); margin-top:5px; }