/* Progressive enhancement for the three homepage example workflows. */
.workflow-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;padding-block:16px;border-block:1px solid var(--linen)}
.workflow-controls[hidden]{display:none}
.workflow-controls-note{font-size:13px;color:var(--graphite);display:flex;align-items:center;gap:10px}
.workflow-controls-note::before{content:"";width:7px;height:7px;background:var(--safety-orange);border-radius:50%}
.workflow-toggle{font:500 13px var(--font-ui);color:var(--carbon);background:var(--paper);border:1px solid var(--linen);border-radius:99px;padding:10px 16px;cursor:pointer;min-height:42px}
.workflow-toggle:hover{border-color:var(--accent-text)}
.workflow-toggle:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
.workflow-motion .yigin-govde{position:relative;isolation:isolate;transition:border-color .6s,box-shadow .6s;background:var(--cream);overflow:hidden}
.workflow-motion .yigin-govde::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 92% 10%,rgba(255,100,40,.10),transparent 60%);opacity:0;transition:opacity .8s;pointer-events:none}
.workflow-motion .is-active .yigin-govde{border-color:color-mix(in srgb,var(--safety-orange) 28%,var(--linen));box-shadow:0 18px 50px -38px rgba(80,40,10,.28)}
.workflow-motion .is-active .yigin-govde::before{opacity:1}
.workflow-motion .yigin-sekme{transition:color .5s,border-color .5s}
.workflow-motion .is-active .yigin-sekme{border-color:color-mix(in srgb,var(--safety-orange) 28%,var(--linen))}
.workflow-motion .is-active .yigin-sekme b{color:var(--accent-text)}
.workflow-motion .workflow-steps{gap:8px}
.workflow-motion .workflow-steps li{padding:8px 12px 8px 42px;border-radius:10px;transition:background .4s,transform .4s}
.workflow-motion .workflow-steps li::before{left:10px;top:10px}
.workflow-motion .workflow-steps li.is-current{background:color-mix(in srgb,var(--safety-orange) 8%,var(--cream));transform:translateX(4px)}
.workflow-motion .workflow-steps li.is-current b{color:var(--accent-text)}
/* Four generated scenes share a single atlas, with exact quadrant crops. */
.workflow-art{align-self:center;width:100%;max-width:460px;margin-inline:auto}
.workflow-stage{position:relative;aspect-ratio:1;background:#fdfef8;border:1px solid var(--linen);border-radius:30px;overflow:hidden;isolation:isolate}
.workflow-scene{position:absolute;inset:0;overflow:hidden;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .65s ease,transform .85s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.workflow-scene.is-shown{opacity:1;transform:none;z-index:1}
.workflow-scene img{position:absolute;width:200%;height:200%;max-width:none;left:0;top:0;object-fit:fill}
.workflow-scene[data-scene="1"] img,.workflow-scene[data-scene="3"] img{left:-100%}
.workflow-scene[data-scene="2"] img,.workflow-scene[data-scene="3"] img{top:-100%}
.workflow-step-button{font:600 15px var(--font-ui);line-height:1.5;padding:0;border:0;background:none;color:var(--carbon);cursor:pointer;text-align:left;min-height:26px}
.workflow-step-button:hover{color:var(--accent-text)}
.workflow-step-button:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:2px}
.workflow-motion .workflow-steps li.is-current .workflow-step-button{color:var(--accent-text)}
/* Ilerleme cubugu AKISTA, sahnenin ALTINDA. Bir sure sahnenin USTUNE mutlak
   konumlandirilmisti; gerekcesi "gorselin alt kismi bos, cubuk oraya oturur"
   idi. O VARSAYIM YANLISTI -- olculdu:
     Cubuk her ekranda SABIT 82.5px ortuyordu (69px kutu + 14px alt bosluk),
     sahne ise kuculuyor: 540px'te %15.4, 296px'te %27.9, 266px'te %31.
     Atlaslarin GERCEK alt boslugu (zemin ornekleyip -fuzz 3% -trim):
       conversation %17.5 · prospecting %12.6 · quote %8.3
     Yani quote'ta MASAUSTUNDE bile tepsinin tabani ve golgesi ortuluyordu.
     Varsayim yalnizca conversation atlasi icin, yalnizca en buyuk boyutta
     dogruymus.
   KURAL: cubuk sahneyi ASLA ortmez. Yeni atlas eklenirse alt bosluk olcmeye
   gerek kalmaz, kural kendiliginden gecerli.
   Yigin sigmasi max-width ile korunuyor: sanat sutunu = sahne + 12 + 69 ve bu
   METIN SUTUNUNUN ALTINDA kalmali (544 / kisa masaustunde 511). Govde
   yuksekligini metin sutunu belirliyor, o yuzden workflow-motion.js'teki
   'required' hesabi ve workflow-flat esigi DEGISMIYOR.
   Zemin OPAK kaliyor (--paper + --linen kenarlik). */
.workflow-monitor{margin:12px 0 0;padding:16px 18px;background:var(--paper);
  border:1px solid var(--linen);border-radius:16px;min-height:0}
.workflow-monitor-label{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--graphite)}
.workflow-monitor-label b{color:var(--carbon);font-weight:500}
.workflow-monitor-number{font-variant-numeric:tabular-nums;color:var(--accent-text)}
.workflow-monitor-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.workflow-monitor-track i{display:block;height:3px;background:var(--linen);overflow:hidden;border-radius:4px}
.workflow-monitor-track i::after{content:"";display:block;height:100%;background:var(--safety-orange);transform:scaleX(0);transform-origin:left}
.workflow-monitor-track i.is-done::after{transform:scaleX(1)}
.workflow-monitor-track i.is-current::after{transform:scaleX(var(--step-progress,0))}
@media(max-width:900px){
 .workflow-controls{align-items:flex-start;gap:12px}
 .workflow-controls-note{max-width:19ch;line-height:1.5}
 .workflow-toggle{flex-shrink:0}
 .workflow-monitor{margin-inline:0;padding-inline:12px}
 .workflow-motion .workflow-steps li.is-current{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .workflow-controls{display:none}
 .workflow-motion *, .workflow-motion *::before,.workflow-motion *::after{animation:none!important;transition:none!important}
 .workflow-monitor{display:none!important}
}
/* Kisa masaustu ekranda yigin acik kalsin diye adim listesi ve sahne biraz
   sikisiyor. Kazanc olculdu: gap 8->5 (3x9px) + li dikey padding 8->5
   (2x4x3=24px) = 33px, metin 544->511. Sahne 480. Gereken 807.5, JS esigi
   831.5. Uzun ekranda hicbir sey degismiyor. */
@media (min-width:901px) and (max-height:900px){
 .workflow-motion .workflow-steps{gap:5px}
 .workflow-motion .workflow-steps li{padding-block:5px}
 .workflow-motion .yigin-govde{padding-block:28px}
 .workflow-art{max-width:425px}
}
.workflow-motion.workflow-flat .yigin-kart{position:static;padding-bottom:32px}
.workflow-motion.workflow-flat .yigin::after{display:none}

@media(prefers-reduced-motion:reduce){.workflow-scene{transition:none;transform:none}}