/* "Bir siparişin anatomisi": one blueprint-style 3D warehouse (shelf, packing desk, monitor + USB webcam, box, cargo pile).
   Scroll (or autoplay) moves a cinematic camera through 6 chapters; anatomy callouts are anchored to 3D points. */
:root{
  --bg:#0a1216; --bg2:#0f1c21; --ink:#eaf3f0; --muted:#9fb3ae; --teal:#3fc1b0; --teal2:#0f6a6e; --yellow:#ffd27a; --red:#ff4d55;
  --glass:rgba(14,25,29,.94); --gline:rgba(255,255,255,.12);
  --f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:8px}
#nav{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;gap:8px;padding:14px max(20px,4vw)}
#nav{transition:background .3s}
#nav.solid{background:rgba(10,18,22,.96);border-bottom:1px solid var(--gline)}
#nav .logo{font:900 21px var(--f);letter-spacing:-.05em;text-decoration:none;flex:1}
#nav .logo i{font-style:normal;color:var(--yellow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:700 15px var(--f);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn.y{background:var(--yellow);color:#14201d}
.btn.y:hover{transform:translateY(-1px)}
.btn.g{color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--gline)}
.btn.g:hover{background:rgba(255,255,255,.12)}
.btn.lg{min-height:52px;padding:0 24px;font-size:16px}
.btn svg{width:16px;height:16px}

#track{height:680vh;position:relative}
#stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  background:radial-gradient(70% 60% at 55% 42%,#13262c 0,var(--bg) 70%)}
#view{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 40%}
#world{position:absolute;left:50%;top:55%;width:0;height:0;transform-style:preserve-3d}
.n{position:absolute;left:0;top:0;transform-style:preserve-3d}
.f{position:absolute;backface-visibility:hidden}
.f.both{backface-visibility:visible}
.floor{background:radial-gradient(closest-side,transparent 35%,var(--bg) 100%),
  linear-gradient(rgba(63,193,176,.16) 1px,transparent 1px) 0 0/200px 200px,
  linear-gradient(90deg,rgba(63,193,176,.16) 1px,transparent 1px) 0 0/200px 200px,
  linear-gradient(rgba(63,193,176,.07) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(63,193,176,.07) 1px,transparent 1px) 0 0/40px 40px;
}
.shadow{background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);backface-visibility:visible}
.cb{background-color:#c9944f;background-image:linear-gradient(160deg,rgba(255,255,255,.1),rgba(0,0,0,.06)),repeating-linear-gradient(90deg,rgba(80,45,10,.04) 0 2px,transparent 2px 7px);
  box-shadow:inset 0 0 0 1px rgba(110,66,24,.3),inset 0 0 30px rgba(110,66,24,.14)}
.cb.r{filter:brightness(.8)} .cb.t{background-color:#dcab68} .cb.in{background-color:#94622f;background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.05))}
.bin{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bin.hot{box-shadow:inset 0 0 0 2px var(--yellow),0 0 40px rgba(255,210,122,.55)}
.binlbl{display:flex;align-items:center;justify-content:center;font:700 13px var(--mono);color:#0d1a20;background:#e9eef0;border-radius:3px}
.binlbl.hot{background:var(--yellow)}
.label{background:#fbfaf7;border-radius:3px;padding:7px 8px;font:700 8.5px/1.3 var(--f);color:#14201d}
.label b{display:block;font:800 10px var(--f)}
.label .bc{height:20px;margin-top:5px;background:repeating-linear-gradient(90deg,#14201d 0 2px,transparent 2px 4px,#14201d 4px 5px,transparent 5px 8px,#14201d 8px 11px,transparent 11px 12px)}
.tape{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25) 40%,rgba(255,255,255,0)),#d9c9a8}
.screen{background:#0c1417;border-radius:4px;overflow:hidden;position:relative;font-family:var(--f)}
.screen .lay{position:absolute;inset:0;transition:opacity .4s}
.feed{background:radial-gradient(60% 70% at 50% 60%,#5b4a36,#2a2520 70%,#171513);}
.feed .bx{position:absolute;left:34%;top:34%;width:32%;height:44%;background:linear-gradient(160deg,#d6a462,#a87538);border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.feed .bx:before{content:"";position:absolute;inset:16% 12%;background:#6e4a22}
.feed .it{position:absolute;left:44%;top:46%;width:14%;height:14%;background:#2c4372;border-radius:2px;opacity:0;transition:opacity .3s}
.feed .it2{left:40%;top:52%;background:#e9e4d6}
.feed .tl,.feed .tr,.feed .bl{position:absolute;font:700 9px var(--mono);color:#fff;text-shadow:0 1px 2px #000}
.feed .tl{left:8px;top:7px}.feed .tr{right:8px;top:7px;color:#fff;background:var(--red);padding:2px 6px;border-radius:999px;text-shadow:none}
.feed .bl{left:8px;bottom:7px;right:8px;display:flex;justify-content:space-between}
.app{background:#eef3f0;color:#14201d;padding:10px 12px;font-size:9px}
.app h6{margin:0 0 6px;font:900 13px var(--f);letter-spacing:-.04em}
.app h6 i{font-style:normal;color:#0f6a6e}
.app .r{display:flex;justify-content:space-between;background:#fff;border-radius:5px;padding:5px 7px;margin-top:4px;font-weight:700}
.app .r em{font-style:normal;color:#0f6a6e}
.cone{background:linear-gradient(rgba(255,77,85,.4),rgba(255,77,85,.03));clip-path:polygon(50% 0,0 100%,100% 100%);backface-visibility:visible}
.zone{border:2px dashed rgba(255,77,85,.85);border-radius:10px;backface-visibility:visible}
.led{border-radius:50%;background:var(--red);box-shadow:0 0 12px 3px rgba(255,77,85,.9)}
.lens{border-radius:50%;background:radial-gradient(circle at 40% 35%,#6c8a99,#14232b 45%,#05090b 70%);box-shadow:0 0 0 3px #222c30}
.laser{background:linear-gradient(90deg,transparent,rgba(255,77,85,.95),transparent);height:3px;box-shadow:0 0 14px 3px rgba(255,77,85,.7);backface-visibility:visible}

/* overlay */
#ov{position:absolute;inset:0;pointer-events:none;z-index:5}
#ov:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,22,.85) 0,rgba(10,18,22,.45) 32%,rgba(10,18,22,0) 55%),linear-gradient(rgba(10,18,22,.7),rgba(10,18,22,0) 30%)}
#txt{position:absolute;left:max(20px,4vw);top:calc(84px + env(safe-area-inset-top,0px));max-width:min(560px,90vw)}
.kick{font:700 12px var(--mono);letter-spacing:.12em;color:var(--teal);text-transform:uppercase;display:flex;gap:10px;align-items:center}
.kick b{color:var(--yellow);font-weight:700}
#title{margin:12px 0 0;font:900 clamp(40px,5.6vw,84px)/.98 var(--f);letter-spacing:-.05em;text-shadow:0 6px 40px rgba(0,0,0,.5)}
#title span{display:inline-block;will-change:transform}
#title em{font-style:normal;color:var(--yellow)}
#sub{margin:16px 0 0;font:500 clamp(16px,1.35vw,19px)/1.5 var(--f);color:var(--muted);max-width:460px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
#heroCta{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;pointer-events:auto}
#chap{position:absolute;left:max(20px,4vw);bottom:max(26px,5vh);display:flex;flex-direction:column;gap:2px;pointer-events:auto}
#chap button{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 13px var(--f);color:rgba(234,243,240,.6);padding:5px 0;transition:color .3s}
#chap button i{font:700 11px var(--mono);font-style:normal;width:22px}
#chap button s{display:block;height:2px;width:18px;background:currentColor;text-decoration:none;transition:width .4s}
#chap button.on{color:var(--ink)} #chap button.on s{width:42px;background:var(--yellow)}
#chap button.done{color:rgba(234,243,240,.7)}
/* app window */
#win{position:absolute;right:max(20px,4vw);bottom:max(26px,5vh);width:340px;background:var(--glass);
  border:1px solid var(--gline);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden;pointer-events:auto;transition:opacity .4s}
#win .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--gline);font:700 12px var(--f);color:var(--muted)}
#win .bar i{width:9px;height:9px;border-radius:50%;background:#3a4a4f}
#win .bar span{margin-left:8px}
#win .bar b{margin-left:auto;font:700 11px var(--mono);color:var(--teal)}
#panes{position:relative;height:208px}
.pane{position:absolute;inset:0;padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;font:600 13px var(--f);color:var(--muted)}
.pane.on{opacity:1;transform:none}
.pane h4{margin:0 0 10px;font:800 16px var(--f);color:var(--ink);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center}
.pane .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--gline);color:var(--ink);font-weight:600}
.pane .r:first-of-type{border-top:0}
.pane .r small{display:block;font:600 11px var(--f);color:var(--muted)}
.pane .num{font:800 15px var(--f);font-variant-numeric:tabular-nums}
.tag{font:700 10.5px var(--f);border-radius:999px;padding:3px 8px;background:rgba(63,193,176,.16);color:var(--teal);white-space:nowrap}
.tag.y{background:rgba(255,210,122,.16);color:var(--yellow)} .tag.r{background:rgba(255,77,85,.18);color:#ff8a8f}
.search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid var(--gline);border-radius:12px;padding:9px 12px;color:var(--ink);font:600 14px var(--f);margin-bottom:6px}
.search svg{width:16px;height:16px;color:var(--muted)}
.caret{display:inline-block;width:2px;height:16px;background:var(--yellow);margin-left:1px;animation:car 1s steps(1) infinite;vertical-align:-3px}
@keyframes car{50%{opacity:0}}
.rec{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--mono);color:#ff8a8f}
.rec:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:car 1.1s steps(1) infinite}
.ok{color:var(--teal)}
.big{font:900 30px var(--f);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
/* callouts */
#co{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#co line{stroke:var(--yellow);stroke-width:1.2}
#co circle.a{fill:var(--yellow)}
#co circle.p{fill:none;stroke:var(--yellow);stroke-width:1.2;animation:ping 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{from{transform:scale(1);opacity:1}to{transform:scale(3.2);opacity:0}}
.cl{position:absolute;left:0;top:0;padding:7px 11px;border:1px solid rgba(255,210,122,.6);border-radius:10px;background:rgba(10,18,22,.92);
  font:700 11px var(--mono);color:var(--yellow);letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .3s}
.cl small{display:block;font:600 11px var(--f);letter-spacing:0;color:var(--ink);margin-top:2px}
#prog{position:absolute;left:0;top:0;height:3px;background:var(--yellow);width:0;z-index:31}
#hint{position:absolute;left:50%;bottom:max(26px,5vh);transform:translateX(-50%);font:700 11px var(--mono);letter-spacing:.18em;color:var(--muted)}

#end{position:relative;padding:110px max(20px,6vw) 40px;text-align:center;background:linear-gradient(180deg,var(--bg),#071013)}
#end h2{margin:0 auto;max-width:900px;font:900 clamp(40px,6vw,88px)/.98 var(--f);letter-spacing:-.05em}
#end h2 em{font-style:normal;color:var(--yellow)}
#end p{color:var(--muted);font:500 18px/1.5 var(--f);margin:18px auto 0;max-width:560px}
#end .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:28px}
#end ul{list-style:none;padding:0;margin:56px auto 0;max-width:900px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#end li{font:600 13px var(--f);border:1px solid var(--gline);border-radius:999px;padding:8px 14px;color:var(--ink)}
footer{margin-top:72px;padding-top:24px;border-top:1px solid var(--gline);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font:500 13px var(--f);color:var(--muted)}
footer a{text-decoration:none;color:var(--ink);opacity:.8}

@media (max-width:820px){
  #txt{left:20px;right:20px;top:calc(70px + env(safe-area-inset-top,0px))}
  #title{font-size:clamp(34px,10vw,46px)}
  #sub{font-size:15px;margin-top:10px}
  #heroCta{margin-top:16px}
  #chap{display:none}
  #win{left:16px;right:16px;width:auto;bottom:16px;border-radius:16px}
  #panes{height:150px}
  .pane{padding:10px 14px;font-size:12px} .pane h4{font-size:14px;margin-bottom:4px} .pane .r{padding:5px 0} .big{font-size:24px}
  .pane .hm{display:none}
  .cl{font-size:10px;padding:5px 8px} .cl small{font-size:10px}
  #hint{display:none}
}
@media (max-width:380px){#heroCta .btn.lg{min-height:46px;padding:0 16px;font-size:15px}#heroCta{gap:6px}.kick{font-size:11px;letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){.caret,.rec:before,#co circle.p{animation:none}}

/* Production semantics and keyboard/touch targets. */
#nav .logo { display: inline-flex; align-items: center; min-height: 44px; }
#chap button { border: 0; background: none; cursor: pointer; text-align: left; min-width: 44px; min-height: 44px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.shelf-name { font: 800 26px var(--mono); color: #fff; text-align: center; line-height: 50px; }
.screen-orders { color: #53635f; font-weight: 700; }
.feed-hidden { opacity: 0; }
/* Without scripting, show the introduction, initial panel and closing content. */
.no-js #track { height: auto; }
.no-js #stage { position: relative; height: auto; min-height: 0; }
.no-js #view, .no-js #co, .no-js #chap, .no-js #hint, .no-js #prog, .no-js #play { display: none; }
.no-js #ov { position: relative; padding: 100px max(20px,4vw) 36px; }
.no-js #ov::before { display: none; }
.no-js #txt { position: relative; top: auto; left: auto; right: auto; max-width: 560px; }
.no-js #win { position: relative; inset: auto; width: min(340px,100%); margin-top: 32px; }
@media (prefers-reduced-motion: reduce) {
  #play { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}