/* "Nasıl çalışır" sayfasındaki sistem simülasyonu.
   Şema beş adımda ilerliyor: hangi parçanın konuştuğu `data-step` ile
   belirleniyor, gerisi sönük kalıyor. Hareketin tamamı bu dosyada; betik
   yalnızca adımı, oranları ve karışım rengini veriyor. */

#simulation { background: var(--paper); border-block: 1px solid var(--line) }

.sim {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr); gap: 28px;
  align-items: start;
}
@media(max-width:940px) { .sim { grid-template-columns: 1fr } }

/* ---- hedef renk seçimi ---- */
.sim-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px }
.sim-pick-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.sim-targets { display: flex; flex-wrap: wrap; gap: 7px }
.sim-target {
  width: 30px; height: 26px; border-radius: 7px; background: var(--swatch);
  border: 1px solid rgba(10,42,87,.18); transition: transform .16s, outline-color .16s;
}
.sim-target:hover { transform: translateY(-2px) }
.sim-target[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px }

/* ---- şema ---- */
.sim-stage {
  --mixed: #00AEEF;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: 10px; overflow: hidden;
}
.sim-stage svg { width: 100%; height: auto; display: block }
.sim-stage :is(path, rect, circle) { transition: opacity .45s, fill .5s, stroke .45s }

/* Durgun hâl: her şey soluk çizim. Etkin adım kendi grubunu öne çıkarır. */
.sim-stage g { opacity: .34; transition: opacity .45s }
#sim[data-step="0"] .sim-feed,
#sim[data-step="1"] .sim-dose, #sim[data-step="1"] .sim-feed,
#sim[data-step="2"] .sim-dose,
#sim[data-step="3"] .sim-melt, #sim[data-step="3"] .sim-dose,
#sim[data-step="4"] .sim-out, #sim[data-step="4"] .sim-melt { opacity: 1 }

.sim-spool-rim, .sim-spool-coil { fill: none; stroke: var(--ink-3); stroke-width: 3 }
.sim-spool-coil { stroke: var(--blue-light); stroke-width: 9; stroke-dasharray: 9 7 }
.sim-spool-hub { fill: var(--ink-3) }
.sim-feed-line { fill: none; stroke: var(--line); stroke-width: 7; stroke-linecap: round }
.sim-feed-dash { fill: none; stroke: var(--blue-light); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; opacity: 0 }
#sim[data-step="0"] .sim-feed-dash, #sim[data-step="4"] .sim-feed-dash { opacity: .9; animation: sim-flow 1.1s linear infinite }
@keyframes sim-flow { to { stroke-dashoffset: -24 } }
.sim-inlet { fill: var(--ink-3) }

.sim-bank { fill: var(--blue-soft); stroke: var(--line); stroke-width: 1.5 }
.sim-tube { fill: var(--card); stroke: var(--line); stroke-width: 1.5 }
.sim-fill { transition: height .5s cubic-bezier(.2,.7,.2,1), y .5s cubic-bezier(.2,.7,.2,1) }
.sim-beads { opacity: 0 }
#sim[data-step="2"] .sim-beads, #sim[data-step="3"] .sim-beads { opacity: 1 }
.sim-bead { opacity: 0 }
#sim[data-step="2"] .sim-bead { animation: sim-drop 1.5s ease-in infinite }
.sim-bead-2 { animation-delay: .35s }
.sim-bead-3 { animation-delay: .7s }
.sim-bead-4 { animation-delay: 1.05s }
@keyframes sim-drop {
  0% { opacity: 0; transform: translateY(-6px) }
  22% { opacity: 1 }
  100% { opacity: 0; transform: translate(0, 84px) }
}
.sim-beads circle { transform-box: fill-box; transform-origin: center }

.sim-disc-body { fill: var(--card); stroke: var(--ink-3); stroke-width: 2.5 }
.sim-disc-mark { stroke: var(--blue); stroke-width: 3; stroke-linecap: round }
.sim-disc-hub { fill: var(--navy) }
.sim-disc { transform-box: view-box; transform-origin: 340px 126px }
#sim[data-step="2"] .sim-disc { animation: sim-spin 2.4s linear infinite }
@keyframes sim-spin { to { transform: rotate(360deg) } }
.sim-duct { stroke: var(--line); stroke-width: 7; stroke-linecap: round }

.sim-chamber { fill: var(--card); stroke: var(--ink-3); stroke-width: 2.5 }
.sim-chamber-fill { fill: var(--mixed); opacity: 0 }
#sim[data-step="3"] .sim-chamber-fill { opacity: .5 }
#sim[data-step="4"] .sim-chamber-fill { opacity: .85 }
.sim-swirl { fill: none; stroke: var(--card); stroke-width: 3; stroke-linecap: round; opacity: 0 }
#sim[data-step="3"] .sim-swirl { opacity: .8; animation: sim-swirl 2.2s ease-in-out infinite }
.sim-swirl-2 { animation-delay: .6s !important }
@keyframes sim-swirl { 0%, 100% { transform: translateX(-6px) } 50% { transform: translateX(6px) } }
.sim-melt .sim-swirl { transform-box: view-box }

.sim-nozzle { fill: var(--ink-3) }
.sim-extrude { fill: var(--mixed); opacity: 0 }
#sim[data-step="4"] .sim-extrude { opacity: 1; animation: sim-extrude 1.3s ease-in infinite }
@keyframes sim-extrude { 0% { transform: translateY(-10px); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(16px); opacity: 0 } }
.sim-extrude { transform-box: fill-box }
.sim-layer { fill: var(--line) }
#sim[data-step="4"] .sim-layer-1, #sim[data-step="4"] .sim-layer-2 { fill: var(--mixed) }
#sim[data-step="4"] .sim-layer-3 { fill: var(--mixed); opacity: .55 }
.sim-plate { fill: var(--ink-3) }

/* ---- adımlar ---- */
/* Kendi "01" numaralarımız var; tarayıcının sayacı ikinci bir numara basardı. */
.sim-steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none }
.sim-steps > li::marker { content: "" }
.sim-step > button {
  display: flex; gap: 14px; width: 100%; text-align: start; align-items: flex-start;
  padding: 13px 14px; border-radius: 11px; color: inherit;
  transition: background .18s, opacity .18s; opacity: .55;
}
.sim-step > button:hover { background: var(--blue-soft); opacity: .9 }
.sim-step-on > button { background: var(--card); opacity: 1; box-shadow: 0 10px 26px -20px rgba(var(--shadow), .5) }
.sim-step-n { font-family: var(--mono); font-size: 12px; color: var(--blue); padding-top: 2px; flex: 0 0 auto }
.sim-step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.sim-step-body strong { font-size: 15px; font-weight: 700 }
.sim-step-body span { font-size: 13.5px; line-height: 1.6; color: var(--ink-3) }

/* ---- kanal okumaları ---- */
.sim-readout { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card) }
.sim-readout-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 13px }
.sim-readout-head > span:first-child { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.sim-output { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.sim-output b { font-size: 14px }
.sim-output em { font-family: var(--mono); font-style: normal; font-size: 11.5px; color: var(--ink-3) }
.sim-channels { display: grid; gap: 8px }
.sim-channel { display: grid; grid-template-columns: 16px 1fr 40px; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; transition: opacity .3s }
.sim-channel-idle { opacity: .35 }
.sim-channel i { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden }
.sim-channel b { display: block; height: 100%; width: 0; background: var(--channel); transition: width .5s cubic-bezier(.2,.7,.2,1) }
.sim-channel output { text-align: end; color: var(--ink-3) }

/* ---- denetimler ---- */
.sim-controls { display: flex; align-items: center; gap: 9px; margin-top: 16px }
.sim-ctl {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color .16s, transform .16s;
}
.sim-ctl:hover { border-color: var(--blue); transform: translateY(-1px) }
.sim-ctl svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.sim-ctl-play { background: var(--ink); color: #fff; border-color: var(--ink) }
.sim-ctl-play .sim-icon-play { fill: currentColor; stroke: none }
.sim-ctl-play[aria-pressed="true"] .sim-icon-play,
.sim-ctl-play[aria-pressed="false"] .sim-icon-pause { display: none }
.sim-counter { margin-inline-start: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-3) }
.sim-note { margin-top: 20px; font-size: 13px; line-height: 1.7; color: var(--ink-3); max-width: 78ch }

@media(max-width:620px) {
  .sim-target { width: 27px; height: 24px }
  .sim-step > button { padding: 11px 12px; gap: 11px }
  .sim-step-body strong { font-size: 14px }
  .sim-step-body span { font-size: 12.5px }
}

/* Hareket azaltıldığında şema durur; adımlar yine elle gezilebilir. */
@media(prefers-reduced-motion:reduce) {
  .sim-stage :is(path, rect, circle, g) { animation: none !important; transition: none }
}

/* ===================== Çalışma mantığı ================================= */
#mantik { background: var(--card); border-bottom: 1px solid var(--line) }

/* Eski yöntem ile yeni yöntem yan yana: fark tek bakışta görünsün. */
.logic-problem { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 44px }
.logic-problem > div:not(.logic-arrow) { padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper) }
.logic-problem h3 { font-size: 18px; margin-bottom: 10px }
.logic-problem p { font-size: 14.5px; line-height: 1.7; color: var(--ink-3) }
.logic-new { border-color: var(--blue) !important; background: var(--blue-soft) !important }
.logic-new p { color: var(--ink-2) }
.logic-arrow { font-size: 26px; color: var(--ink-3); text-align: center }
@media(max-width:800px) {
  .logic-problem { grid-template-columns: 1fr; gap: 12px }
  .logic-arrow { transform: rotate(90deg) }
}

.logic-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; margin: 0; padding: 0; list-style: none }
.logic-steps > li::marker { content: "" }
@media(max-width:820px) { .logic-steps { grid-template-columns: 1fr } }
.logic-step { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line) }
.logic-n { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--blue); padding-top: 3px }
.logic-step h4 { font-size: 16px; margin-bottom: 6px }
.logic-step p { font-size: 14px; line-height: 1.7; color: var(--ink-3) }

.logic-why { margin-top: 46px }
.logic-why > h3 { font-size: clamp(20px, 2.3vw, 26px); letter-spacing: -.01em; margin-bottom: 20px }
.logic-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.logic-card { padding: 22px 24px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line) }
.logic-card h4 { font-size: 16px; margin-bottom: 8px }
.logic-card p { font-size: 14px; line-height: 1.65; color: var(--ink-3) }
.logic-note { margin-top: 30px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); max-width: 80ch }