/* Explainer stories (assets/anlatim.js). Shares the process run's stage, step list and replay button
   (.proc, .pc-stage, .pc-steps, .pc-replay in ud.css). Entrances ease out, moves on screen ease in-out,
   with the site's own --ease-out and --ease-io. Reduced motion lands on the last frame (anlatim.js), and
   ud.css already zeroes every duration under prefers-reduced-motion. */
.ph-art.anl{padding:0;align-self:center}
.anl .pc-stage{aspect-ratio:4/3}
.anl-cizim{position:absolute;inset:0;display:grid;place-items:center;padding:4% 3% 9%}
.anl-cizim svg{width:100%;height:100%;overflow:visible}
.anl svg text{font-family:var(--f-mono);font-size:9px;fill:var(--ink-2);letter-spacing:.02em}

/* ---------- the step grammar */
.anl [data-a],.anl [data-x]{transition:opacity 420ms var(--ease-out),transform 560ms var(--ease-out)}
.anl [data-a]{opacity:0}
.anl.a1 [data-a="1"],.anl.a2 [data-a="2"],.anl.a3 [data-a="3"],.anl.a4 [data-a="4"],.anl.a5 [data-a="5"],.anl.a6 [data-a="6"]{opacity:1}
.anl.a1 [data-x="1"],.anl.a2 [data-x="2"],.anl.a3 [data-x="3"],.anl.a4 [data-x="4"],.anl.a5 [data-x="5"],.anl.a6 [data-x="6"]{opacity:0;transition-delay:0ms}
.anl [data-d]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease-io)}
.anl.a1 [data-d="1"],.anl.a2 [data-d="2"],.anl.a3 [data-d="3"],.anl.a4 [data-d="4"],.anl.a5 [data-d="5"],.anl.a6 [data-d="6"]{stroke-dashoffset:0}

/* ---------- shared drawing kit: ink lines on paper, kraft stock, the brand's boxes */
.anl .zemin{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:1}
.anl .ink,.anl .ince{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}
.anl .ince{stroke:var(--ink-2);stroke-width:.8}
.anl .krf{fill:#E9D2AE;stroke:var(--ink);stroke-width:1.3}
.anl .kagit{fill:var(--bg-2);stroke:var(--ink);stroke-width:1.3}
.anl .raf{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.anl .adet{font-size:10px;fill:var(--ink)}
.anl .toz circle{fill:var(--muted)}
.anl .toz path{fill:none;stroke:var(--muted);stroke-width:.6}
.anl .kutu .on,.anl .h-urun .on{fill:#D8B98C;stroke:var(--ink);stroke-width:1}
.anl .kutu .kapak,.anl .h-urun .kapak{fill:#E5CBA2;stroke:var(--ink);stroke-width:1}
.anl .kutu .yan,.anl .h-urun .yan{fill:#C9A777;stroke:var(--ink);stroke-width:1}

/* ---------- Vakalar: stock -> case -> ideas -> demand -> trial batch -> shelf and payout */
.anl-vaka .v-stok{transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out)}
.anl-vaka.a5 .v-stok{transform:translateY(10px)}
.anl-vaka .v-etiket rect{fill:var(--ink)}
.anl-vaka .v-etiket text{fill:var(--bg-2);font-weight:500}
.anl-vaka .v-etiket{transform:translateY(-6px)}
.anl-vaka.a2 .v-etiket{transform:none}
.anl-vaka .v-fikir{transform:translateX(14px)}
.anl-vaka.a3 .v-fikir{transform:none}
.anl-vaka .bag{fill:none;stroke:var(--ink-2);stroke-width:.8;stroke-dasharray:3 3}
.anl-vaka .baloncuk{fill:var(--bg-2);stroke:var(--ink);stroke-width:1.2;transition:fill 300ms var(--ease-out)}
.anl-vaka .v-talep .iz{fill:var(--line)}
.anl-vaka .v-talep .dolu{fill:var(--ink-2);transform-box:fill-box;transform-origin:left center;transform:scaleX(.05);transition:transform 900ms var(--ease-out)}
.anl-vaka.a4 .v-talep .dolu{transform:none}
.anl-vaka .v-talep .sayi{fill:var(--ink);font-weight:500}
/* the most wanted idea wins: it fills and stays when the others leave */
.anl-vaka.a4 .f2 .baloncuk{fill:var(--accent);transition-delay:900ms}
.anl-vaka.a4 .f2 > text{fill:var(--accent-ink);transition:fill 300ms var(--ease-out) 900ms}
.anl-vaka.a4 .f2 .dolu{fill:var(--accent)}
.anl-vaka.a5 .f2{transform:translateY(-14px)}
.anl-vaka .kutu{opacity:0;transform:translateY(-16px);transition:opacity 380ms var(--ease-out),transform 560ms var(--ease-out)}
.anl-vaka.a5 .kutu{opacity:1;transform:none}
.anl-vaka .v-raf .ince{stroke-width:1}
.anl-vaka .v-pay rect:first-child{fill:var(--bg-2);stroke:var(--ink);stroke-width:1.3}
.anl-vaka .v-pay .buyuk{font-family:var(--f-serif);font-size:24px;fill:var(--ok)}
.anl-vaka .v-pay .p1{fill:var(--ok)}
.anl-vaka .v-pay .p2{fill:var(--ink-2)}
.anl-vaka .v-pay .p3{fill:var(--line-2)}
.anl-vaka .v-pay{transform:translateY(8px)}
.anl-vaka.a6 .v-pay{transform:none}

/* ---------- Fikirler: rows arrive, priced demand lands, the list reorders, the top five go to Thursday */
.anl-fikir .f-satir{transform:translateY(var(--y));transition:transform 900ms var(--ease-io)}
.anl-fikir.a3 .rA{transform:translateY(120px)}
.anl-fikir.a3 .rB{transform:translateY(30px)}
.anl-fikir.a3 .rC{transform:translateY(0)}
.anl-fikir.a3 .rD{transform:translateY(150px)}
.anl-fikir.a3 .rE{transform:translateY(60px)}
.anl-fikir.a3 .rF{transform:translateY(90px)}
.anl-fikir.a3 .rB{transition-delay:80ms}.anl-fikir.a3 .rE{transition-delay:120ms}.anl-fikir.a3 .rF{transition-delay:160ms}.anl-fikir.a3 .rA{transition-delay:200ms}
.anl-fikir .giris{transform:translateX(-14px)}
.anl-fikir.a1 .giris{transform:none}
.anl-fikir .kart{fill:var(--bg-2);stroke:var(--ink);stroke-width:1.2}
.anl-fikir .kart + text{fill:var(--ink);font-size:9.5px}
.anl-fikir .kutu{fill:none;stroke:var(--ink);stroke-width:1}
.anl-fikir .sayi,.anl-fikir .sifir{font-weight:500;fill:var(--accent)}
.anl-fikir .sifir{fill:var(--muted)}
.anl-fikir .f-fiyat rect{fill:var(--bg-2);stroke:var(--ok);stroke-width:1.2}
.anl-fikir .f-fiyat text{fill:var(--ok);font-weight:500}
.anl-fikir .f-fiyat{transform:translate(10px,-8px)}
.anl-fikir.a2 .f-fiyat{transform:none}
.anl-fikir .f-bolge rect{fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.2}
.anl-fikir .f-bolge text{fill:var(--ok);font-weight:500;letter-spacing:.08em}
.anl-fikir .yildiz{fill:var(--ok);font-size:12px}
/* the sixth stays outside the zone and steps back */
.anl-fikir .rD .giris{transition:opacity 420ms var(--ease-out),transform 560ms var(--ease-out)}
.anl-fikir.a4 .rD .giris{opacity:.45}

/* ---------- Hikâye: a dusty notebook, a dusty crate, a cloth, one table, one product on a shelf */
.anl-hikaye .ampul circle,.anl-hikaye .ampul path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-linecap:round}
.anl-hikaye .sablon{font-size:12px;fill:var(--ink);font-weight:500;letter-spacing:.2em}
.anl-hikaye .h-bez rect{fill:var(--bg-2);stroke:var(--ink);stroke-width:1.2}
.anl-hikaye .h-bez{transform:translateX(0);transition:opacity 200ms linear,transform 1200ms var(--ease-io)}
.anl-hikaye.a3 .h-bez{transform:translateX(380px)}
.anl-hikaye.a4 .h-bez{opacity:0}
.anl-hikaye .t1{transition-delay:0ms}
.anl-hikaye.a3 .t1{transition-delay:250ms}
.anl-hikaye.a3 .t2{transition-delay:750ms}
.anl-hikaye .h-ad{font-family:var(--f-serif);font-size:18px;fill:var(--ink);font-weight:800}
.anl-hikaye .h-defter,.anl-hikaye .h-kasa{transition:opacity 420ms var(--ease-out),transform 900ms var(--ease-io)}
.anl-hikaye.a4 .h-defter{transform:translate(34px,8px)}
.anl-hikaye.a4 .h-kasa{transform:translate(-34px,8px)}
.anl-hikaye .h-raf .raf{stroke-width:3.5}
.anl-hikaye .h-raf .ince{stroke-width:1.2}
.anl-hikaye .h-urun{transform:translateY(-14px)}
.anl-hikaye.a5 .h-urun{transform:none}
.anl-hikaye .etk{fill:var(--ink)}
.anl-hikaye .etk-y{font-family:var(--f-serif);font-size:13px;fill:var(--bg-2);font-weight:800}
.anl-hikaye .h-not{fill:var(--muted)}

@media (max-width:640px){
  .anl svg text,.anl-fikir .kart + text,.anl .adet{font-size:11px}
  /* phones: the replay control shrinks to its icon in the top corner, so it never covers the drawing's last line
     (the label stays in the button for screen readers) */
  .anl .pc-replay{top:8px;right:8px;bottom:auto;left:auto;width:34px;padding:0;justify-content:center;gap:0;font-size:0}
}