/* ============================================================
   Techify Boost — CANLI SİMÜLATÖR (interaktif slider paneli)
   Kullanıcı kendi rakamlarıyla oynar; çıktılar anlık hesaplanır.
   ============================================================ */
.sim-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: start; }
@media (max-width: 920px) { .sim-wrap { grid-template-columns: 1fr; } }

.sim-controls, .sim-output {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 26px; box-shadow: 0 14px 40px rgba(0,128,96,0.06);
}
.sim-panel-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--headline); margin-bottom: 4px; }
.sim-panel-title .lucide { width: 18px; height: 18px; color: var(--violet); }
[data-theme="dark"] .sim-panel-title .lucide { color: var(--green); }
.sim-panel-sub { font-size: 12.5px; color: var(--mute); margin-bottom: 18px; }

/* slider grid: 2 kolon (10 slider) */
.sim-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
@media (max-width: 560px) { .sim-sliders { grid-template-columns: 1fr; } }
.sim-field { display: flex; flex-direction: column; gap: 7px; }
.sim-field .sf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sim-field .sf-l { font-size: 12.5px; color: var(--dim); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.sim-field .sf-l .lucide { width: 14px; height: 14px; color: var(--violet); opacity: .8; }
[data-theme="dark"] .sim-field .sf-l .lucide { color: var(--green); }
.sim-field .sf-v { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; color: var(--violet); white-space: nowrap; }
[data-theme="dark"] .sim-field .sf-v { color: var(--green); }

/* range input */
.sim-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--bg-3); outline: none; cursor: pointer; }
.sim-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--violet) var(--p,50%), var(--bg-3) var(--p,50%)); }
.sim-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--bg-3); }
.sim-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--violet); }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--violet); margin-top: -6px; box-shadow: 0 2px 8px rgba(0,128,96,0.3); transition: transform .1s; }
.sim-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--violet); box-shadow: 0 2px 8px rgba(0,128,96,0.3); }
.sim-range:active::-webkit-slider-thumb { transform: scale(1.18); }
[data-theme="dark"] .sim-range::-webkit-slider-thumb, [data-theme="dark"] .sim-range::-moz-range-thumb { border-color: var(--green); }
[data-theme="dark"] .sim-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--green) var(--p,50%), var(--bg-3) var(--p,50%)); }

/* output cards */
.sim-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sim-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 13px; padding: 16px 16px; position: relative; overflow: hidden; }
.sim-card.hero { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(0,128,96,0.12), rgba(94,142,62,0.10)); }
.sim-card .sc-l { font-size: 11.5px; color: var(--mute); letter-spacing: .4px; }
.sim-card .sc-v { font-family: var(--font-display); font-weight: 800; color: var(--headline); line-height: 1; margin-top: 6px; font-size: 26px; }
.sim-card.hero .sc-v { font-size: 40px; }
.sim-card .sc-v .u { font-size: .55em; color: var(--violet); font-weight: 700; }
[data-theme="dark"] .sim-card .sc-v .u { color: var(--green); }
.sim-card .sc-d { font-size: 11px; margin-top: 6px; color: var(--mute); }

/* live bars */
.sim-bars { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.sim-bar-row .sbr-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.sim-bar-row .sbr-top b { color: var(--headline); font-weight: 600; }
.sim-bar-row .sbr-top span { font-family: ui-monospace, monospace; color: var(--dim); }
.sim-bar-track { height: 12px; border-radius: 7px; background: var(--bg-3); overflow: hidden; }
.sim-bar-fill { height: 100%; border-radius: 7px; width: 0; transition: width .35s cubic-bezier(.22,1,.36,1); }
.sim-bar-fill.spend { background: linear-gradient(90deg,#94a3b8,#64748b); }
.sim-bar-fill.rev { background: linear-gradient(90deg, var(--violet), var(--green-2)); }
.sim-bar-fill.profit { background: linear-gradient(90deg,#16a34a,#5e8e3e); }

/* verdict */
.sim-verdict { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(0,128,96,0.08); border: 1px solid var(--line); font-size: 13.5px; color: var(--text); line-height: 1.55; }
.sim-verdict b { color: var(--violet); font-family: var(--font-display); }
[data-theme="dark"] .sim-verdict b { color: var(--green); }
.sim-reset { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: all .18s; }
.sim-reset:hover { color: var(--violet); border-color: var(--violet); }
.sim-reset .lucide { width: 14px; height: 14px; }