/* Otechsoft landing page: a single-screen, no-scroll experience. */
*{box-sizing:border-box}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: tek ekran, kaydırma yok. Derin okyanus laciverti + logodaki altın. Solda başlık, sağda denizatı logolu merkez ve dönen hizmetler. Logoya basınca merkez baloncuklarla açılır, 4 adım baloncuk içinde salınır. Buton, yine aynı ekranda bir proje formu açar. */
:root{
  --bg:#06101f;
  --deep:#0a1b36;
  --sea:#0b4a57;
  --sea-2:#13707a;
  --fg:#edf1f7;
  --muted:#9fb0c8;
  --gold:#d3ae72;
  --gold-l:#edd9b4;
  --gold-d:#9c7442;
  --glass:rgba(10,24,48,.78);
  --line:rgba(211,174,114,.38);
  --ink:#08142a;
  --danger:#ff9b8a;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box;overflow:hidden;background:var(--bg)}
body{height:100%;overflow:hidden;background-color:var(--bg);color:var(--fg);font-family:var(--font-body);overscroll-behavior:none}

/* Okyanus zemini */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(105deg,rgba(6,16,31,.9),rgba(6,16,31,.38)),url('../img/otechsoft-workshop.png') center/cover no-repeat}
.sky b{position:absolute;border-radius:50%;filter:blur(80px)}
.sky .b1{width:58vmax;height:58vmax;left:-18vmax;top:-22vmax;background:var(--sea);opacity:.55;animation:float1 26s ease-in-out infinite alternate}
.sky .b2{width:46vmax;height:46vmax;right:-16vmax;bottom:-22vmax;background:var(--sea-2);opacity:.28;animation:float2 30s ease-in-out infinite alternate}
.sky .b3{width:30vmax;height:30vmax;right:14vmax;top:8vmax;background:var(--gold-d);opacity:.12;animation:float3 34s ease-in-out infinite alternate}
.sky::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(0,0,0,.45),transparent 60%)}
@keyframes float1{to{transform:translate(16vmax,12vmax) scale(1.08)}}
@keyframes float2{to{transform:translate(-14vmax,-10vmax) scale(1.12)}}
@keyframes float3{to{transform:translate(-18vmax,16vmax) scale(.9)}}
#net{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}

/* ---------- GİRİŞ ---------- */
#loader{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--bg);transition:opacity .7s ease,visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.l-wrap{position:relative;width:132px;height:132px}
.l-wrap svg.l-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:302;stroke-dashoffset:302;animation:drawRing 1.2s cubic-bezier(.6,0,.3,1) forwards}
.pearl{fill:var(--gold-l);filter:drop-shadow(0 0 4px var(--gold-l));transform-origin:60px 60px;animation:spin 1.6s linear 1s infinite;opacity:0;animation-fill-mode:both}
.l-logo{position:absolute;left:50%;top:50%;width:44%;height:66%;transform:translate(-50%,-50%) scale(.85);opacity:0;animation:logoIn .8s ease .55s forwards}
@keyframes logoIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes drawRing{to{stroke-dashoffset:0}}
@keyframes spin{from{opacity:1;transform:rotate(0)}to{opacity:1;transform:rotate(360deg)}}
.loader-text{position:absolute;top:calc(50% + 92px);width:100%;text-align:center;font-family:var(--font-display);font-weight:500;letter-spacing:.42em;font-size:.82rem;color:var(--gold-l)}
.loader-text span{display:inline-block;opacity:0;transform:translateY(6px);animation:letter .5s ease forwards}
@keyframes letter{to{opacity:1;transform:none}}

/* ---------- SAYFA (tek ekran) ---------- */
.page{
  position:relative;z-index:1;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;gap:clamp(8px,2vh,20px);
  max-width:1220px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:clamp(10px,2.4vh,22px);
}
header{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.page > header{justify-content:flex-end}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:.01em;color:var(--fg);text-shadow:0 1px 14px rgba(0,0,0,.22)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:.01em}
.logo svg{width:22px;height:34px;flex:none}
.contact{font:600 .88rem/1 var(--font-body);letter-spacing:.02em;color:var(--fg);background:transparent;cursor:pointer;padding:9px 18px;border:1px solid var(--line);border-radius:999px;transition:border-color .2s,color .2s}
.contact:hover,.contact:focus-visible{border-color:var(--gold);color:var(--gold-l);outline:none}

.hero{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:28px}
.copy{display:flex;flex-direction:column;gap:clamp(8px,1.7vh,16px);min-width:0;transition:opacity .6s,filter .6s}
body.steps-open .copy{opacity:.22;filter:blur(1px)}
.badge{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.badge::before{content:"";width:28px;height:1px;background:var(--gold)}
h1{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,min(4.8vw,7vh),3.7rem);line-height:1.04;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1 em{font-style:italic;font-weight:500;color:var(--gold-l)}
.typer{margin:-1px 0 0;font-size:clamp(.9rem,min(1.9vw,2.8vh),1.16rem);font-weight:500;line-height:1.3;color:var(--muted);min-height:1.3em}
.typer #word{color:var(--fg);font-weight:700}
.caret{display:inline-block;width:2px;height:1em;background:var(--gold);margin-left:3px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lead{font-size:clamp(.84rem,min(1.5vw,2.1vh),.98rem);line-height:1.55;color:var(--muted);max-width:48ch;margin:0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:0;border-radius:999px;cursor:pointer;background:linear-gradient(135deg,var(--gold-l),var(--gold) 60%,var(--gold-d));color:var(--ink);font:700 .9rem/1 var(--font-body);letter-spacing:.01em;text-decoration:none;transition:box-shadow .25s,transform .25s}
.cta:hover,.cta:focus-visible{box-shadow:0 0 0 1px var(--gold-l),0 10px 30px -8px rgba(211,174,114,.6);transform:translateY(-1px);outline:none}
.cta span{transition:transform .25s}.cta:hover span{transform:translateX(4px)}

/* Yörünge */
.slot{min-width:0;min-height:0;height:100%;display:grid;place-items:center}
.orbit{position:relative;width:var(--size,300px);height:var(--size,300px)}
.orbit svg.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .6s}
.rings circle{fill:none;stroke:var(--gold);stroke-opacity:.22;stroke-width:.25}
.rings circle.dash{stroke-dasharray:.6 1.8;stroke-opacity:.45;animation:spin2 90s linear infinite;transform-origin:50% 50%}
.rings path.spiral{fill:none;stroke:var(--gold);stroke-width:.3;stroke-opacity:.16;transform-origin:50% 50%;animation:spin2 140s linear infinite reverse}
@keyframes spin2{to{transform:rotate(360deg)}}
.hub{position:absolute;left:50%;top:50%;z-index:3;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#12284d,var(--ink) 75%);display:grid;place-items:center;
  box-shadow:0 0 0 1px var(--gold),0 0 0 calc(var(--size,300px)*.022) rgba(211,174,114,.08),0 0 50px rgba(211,174,114,.22);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.hub{perspective:520px}
.h3w{position:relative;width:46%;height:68%;transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
.h3d{position:absolute;inset:0;transform-style:preserve-3d;animation:spinY 18s linear infinite}
.h3d svg{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(var(--z,0px));backface-visibility:visible}
.h3d svg.back{filter:brightness(.42) saturate(.8)}
.h3d svg.front{filter:drop-shadow(0 0 6px rgba(237,217,180,.25))}
@keyframes spinY{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.hub:hover,.hub:focus-visible{outline:none;box-shadow:0 0 0 1px var(--gold-l),0 0 0 calc(var(--size,300px)*.03) rgba(211,174,114,.12),0 0 70px rgba(211,174,114,.35)}
.hub::after{content:"";position:absolute;inset:-18%;border-radius:50%;border:1px solid var(--gold);opacity:0;animation:pulse 3.4s ease-out infinite;pointer-events:none}
.hub::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold-l);opacity:0;pointer-events:none}
.hub.crack::before{animation:crack .9s ease-out}
.hub.crack .h3w{transform:scale(1.14)}
body.steps-open .h3w{transform:scale(1.06)}
@keyframes crack{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes pulse{0%{transform:scale(.82);opacity:.5}100%{transform:scale(1.22);opacity:0}}
.hub-cap{position:absolute;left:50%;top:calc(50% + var(--size,300px)*.15);z-index:1;transform:translateX(-50%);font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap;pointer-events:none;opacity:.85;transition:opacity .3s}
.chip{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:.56em .9em;font:600 var(--cf,.76rem)/1 var(--font-body);letter-spacing:.01em;display:flex;align-items:center;gap:.5em;cursor:pointer;transition:background .3s,color .3s,border-color .3s,opacity .5s;z-index:2}
.chip i{width:.42em;height:.42em;border-radius:50%;background:var(--gold)}
.chip.on{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--ink);border-color:var(--gold-l);z-index:3}
.chip.on i{background:var(--ink)}
.chip::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--gold-l);opacity:0;pointer-events:none}
.chip.poked::after{animation:ripple .7s ease-out}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.8)}}
.chip:focus-visible{outline:1px solid var(--gold-l);outline-offset:3px}
#links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .5s}
body.steps-open .chip{opacity:0;pointer-events:none}
body.steps-open .rings,body.steps-open #links{opacity:.25}

/* Hizmet bilgi kartı */
.bubble{position:absolute;left:0;top:0;z-index:5;width:min(260px,80vw);box-sizing:border-box;background:rgba(12,28,56,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:14px 16px 15px;box-shadow:0 18px 50px -12px rgba(0,0,0,.7);opacity:0;transform:translateY(4px) scale(.96);transform-origin:var(--ox,50%) var(--oy,100%);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.bubble.show{opacity:1;transform:none;pointer-events:auto}
.bubble h3{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--gold-l);padding-right:26px}
.bubble p{margin:0;font-size:.87rem;line-height:1.55;color:#c6d2e4}
.x{position:absolute;top:9px;right:9px;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg);font-size:1rem;line-height:1;cursor:pointer}
.x:hover,.x:focus-visible{border-color:var(--gold);color:var(--gold-l);outline:none}
.bubble .tip{position:absolute;width:12px;height:12px;background:rgba(12,28,56,.94);transform:rotate(45deg);left:var(--tx,50%);margin-left:-6px}
.bubble.below .tip{top:-7px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.bubble.above .tip{bottom:-7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

footer{flex:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;font-size:.68rem;color:var(--muted)}
.hint{color:var(--gold)}

/* ---------- SÜREÇ: SU ALTI KATMANI (aynı ekranda) ---------- */
#sea{position:fixed;inset:0;z-index:6;visibility:hidden;overflow:hidden;
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  background:linear-gradient(180deg,rgba(14,62,92,.62) 0%,rgba(6,30,58,.72) 45%,rgba(3,10,24,.9) 100%);
  clip-path:circle(0px at var(--cx,50%) var(--cy,50%));
  transition:clip-path .8s cubic-bezier(.7,0,.25,1),visibility 0s linear .8s}
#sea.on{visibility:visible;clip-path:circle(var(--cr,150vmax) at var(--cx,50%) var(--cy,50%));transition:clip-path 1s cubic-bezier(.65,0,.2,1)}
/* Yukarıdan süzülen ışık huzmeleri */
.rays{position:absolute;inset:-10% -20% 0;pointer-events:none;mix-blend-mode:screen}
.rays i{position:absolute;top:-10%;width:14vw;min-width:70px;height:120%;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(190,235,240,.20),rgba(190,235,240,.05) 55%,transparent 80%);filter:blur(6px);animation:ray 9s ease-in-out infinite alternate}
.rays i:nth-child(1){left:12%;transform:rotate(14deg);animation-duration:8s}
.rays i:nth-child(2){left:32%;transform:rotate(8deg);width:9vw;animation-duration:11s;animation-delay:-3s}
.rays i:nth-child(3){left:54%;transform:rotate(-4deg);animation-duration:10s;animation-delay:-6s}
.rays i:nth-child(4){left:74%;transform:rotate(-12deg);width:8vw;animation-duration:12s;animation-delay:-2s}
@keyframes ray{0%{opacity:.35;translate:-2vw 0}50%{opacity:.9}100%{opacity:.45;translate:2vw 0}}
/* Yüzeyden yansıyan dalgalı ışık */
.caustic{position:absolute;left:-20%;right:-20%;top:-30%;height:60%;pointer-events:none;opacity:.35;
  background:radial-gradient(ellipse 22% 9% at 20% 60%,rgba(170,230,235,.35),transparent 70%),radial-gradient(ellipse 18% 7% at 55% 40%,rgba(170,230,235,.3),transparent 70%),radial-gradient(ellipse 25% 8% at 80% 65%,rgba(170,230,235,.28),transparent 70%);
  filter:blur(14px);animation:caustic 14s ease-in-out infinite alternate}
@keyframes caustic{to{transform:translateX(8%) scaleY(1.2)}}
.sea-fx{position:absolute;inset:0;pointer-events:none}

.s-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(env(safe-area-inset-top,0px) + clamp(56px,9vh,84px)) calc(env(safe-area-inset-bottom,0px) + clamp(16px,3vh,32px));box-sizing:border-box}
.s-col{position:relative;width:min(720px,100%);display:flex;flex-direction:column;gap:clamp(14px,3.2vh,30px)}
#sPath{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#sPath path{fill:none;stroke:var(--gold-l);stroke-width:1.2;stroke-opacity:.55;stroke-dasharray:2 6;stroke-linecap:round}
.s-head{align-self:center;text-align:center;margin-bottom:clamp(0px,.6vh,6px);display:flex;flex-direction:column;align-items:center}
.s-horse{position:relative;display:block;width:clamp(30px,5vh,42px);aspect-ratio:156.87/233.81;margin-bottom:clamp(6px,1.4vh,12px);perspective:420px;filter:drop-shadow(0 0 12px rgba(211,174,114,.35))}
.s-head .ey{display:block;font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.s-head h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,min(4.2vw,5vh),2.6rem);line-height:1.05;letter-spacing:-.01em}
.s-head h2 em{font-style:italic;color:var(--gold-l)}
.s-card{position:relative;width:min(392px,84%);opacity:0;will-change:transform}
.s-card{align-self:flex-start}
.s-card.rev{align-self:flex-end}
.s-in{display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:999px;
  background:linear-gradient(135deg,rgba(24,52,94,.94),rgba(10,26,52,.94));
  border:1px solid rgba(237,217,180,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -12px 24px rgba(0,0,0,.18),0 18px 40px -18px rgba(0,0,0,.85),0 0 0 5px rgba(6,22,44,.35);
  animation:drift var(--sw,6s) ease-in-out var(--sd,0s) infinite}
.s-card.rev .s-in{flex-direction:row-reverse;padding:8px 8px 8px 20px;text-align:right}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(2px,-4px)}66%{transform:translate(-2px,-2px)}}
.medal{position:relative;flex:none;width:clamp(44px,6vh,54px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,.08) 28%,transparent 42%),radial-gradient(circle at 50% 60%,#1a3a6c,#0b1e3e 75%);
  border:1px solid var(--gold-l);box-shadow:0 0 0 3px rgba(211,174,114,.14),0 0 18px rgba(211,174,114,.3)}
.medal b{font:italic 600 clamp(.95rem,2.3vh,1.15rem)/1 var(--font-display);color:var(--gold-l)}
.s-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.s-txt h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(.92rem,min(2vw,2.3vh),1.05rem);color:var(--fg)}
.s-txt p{margin:0;font-size:clamp(.74rem,min(1.6vw,1.8vh),.82rem);line-height:1.42;color:#b9c7da}
.s-go{align-self:center;margin-top:clamp(6px,1.6vh,16px);opacity:0;position:relative;overflow:hidden;
  box-shadow:0 0 0 5px rgba(211,174,114,.12),0 14px 36px -12px rgba(211,174,114,.55)}
.s-go::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.55),transparent 40%);pointer-events:none}
.s-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:max(14px,env(safe-area-inset-right,0px));z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(8,22,44,.6);color:var(--fg);font-size:1.1rem;cursor:pointer;opacity:0;transition:opacity .4s}
#sea.on .s-x{opacity:1;transition-delay:.6s}
.s-x:hover,.s-x:focus-visible{border-color:var(--gold);color:var(--gold-l);outline:none}
@media (max-width:620px){
  .s-card{width:86%}
  .s-in{gap:10px;padding:7px 14px 7px 7px}
  .s-card.rev .s-in{padding:7px 7px 7px 14px}
}
@media (max-height:600px){.s-txt p{display:none}}

/* Baloncuk patlaması */
#fx{position:fixed;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.bb{position:absolute;left:0;top:0;border-radius:50%;border:1px solid rgba(237,217,180,.65);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,.05) 35%,rgba(211,174,114,.06) 70%);box-shadow:0 0 8px rgba(211,174,114,.25)}

/* ---------- PROJE FORMU ---------- */
#brief{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-block:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 14px);box-sizing:border-box;visibility:hidden}
#brief.on{visibility:visible}
.b-back{position:absolute;inset:0;background:rgba(3,9,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
#brief.on .b-back{opacity:1}
.b-card{position:relative;width:100%;max-width:540px;max-height:100%;overflow:auto;box-sizing:border-box;border-radius:24px;padding:clamp(18px,3.4vh,30px) clamp(18px,4vw,30px);
  background:radial-gradient(120% 70% at 20% 0%,rgba(237,217,180,.08),transparent 50%),rgba(10,24,48,.97);border:1px solid var(--line);box-shadow:0 30px 80px -20px rgba(0,0,0,.85);
  opacity:0;transform:scale(.6);border-radius:50%;transform-origin:var(--bx,50%) var(--by,100%);
  transition:opacity .35s,transform .55s cubic-bezier(.2,1.25,.35,1),border-radius .55s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin}
#brief.on .b-card{opacity:1;transform:none;border-radius:24px}
.b-card h2{margin:0 0 4px;font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,min(4vw,4vh),1.9rem);line-height:1.1;padding-right:34px}
.b-card h2 em{font-style:italic;color:var(--gold-l)}
.b-sub{margin:0 0 clamp(12px,2.4vh,20px);color:var(--muted);font-size:.9rem;line-height:1.5}
.b-card .x{top:14px;right:14px;width:34px;height:34px}
form{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,14px)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f label,.f .lbl{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.f input,.f select,.f textarea{width:100%;box-sizing:border-box;font:500 .95rem/1.3 var(--font-body);color:var(--fg);background:rgba(4,12,26,.6);border:1px solid rgba(159,176,200,.25);border-radius:12px;padding:11px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
.f textarea{resize:none;min-height:70px}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.f select option{background:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:rgba(159,176,200,.55)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(211,174,114,.15)}
.f.err input{border-color:var(--danger)}
.f .msg{font-size:.76rem;color:var(--danger);min-height:0}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font:600 .8rem/1 var(--font-body);color:var(--fg);background:transparent;border:1px solid rgba(159,176,200,.3);border-radius:999px;padding:8px 11px;cursor:pointer;transition:all .2s}
.pill[aria-pressed="true"]{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--ink);border-color:var(--gold-l)}
.pill:focus-visible{outline:1px solid var(--gold-l);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--muted);cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--gold)}
.consent.err{color:var(--danger)}
.b-actions{display:flex;justify-content:flex-end;padding-top:4px}
.done[hidden]{display:none}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 0 6px}
.done svg{width:64px;height:64px}
.done circle{fill:none;stroke:var(--gold);stroke-width:1.5}
.done path{fill:none;stroke:var(--gold-l);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:tick .6s .25s ease forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.done h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.6rem}
.done p{margin:0;color:var(--muted);max-width:36ch;line-height:1.55}
.done .note{font-size:.74rem;color:rgba(159,176,200,.6)}

/* ---------- SÜZÜLEN İNCİ ---------- */
.pet{position:fixed;left:0;top:0;z-index:8;width:30px;height:30px;margin:-15px 0 0 -15px;cursor:grab;touch-action:none;opacity:0;transition:opacity .6s;will-change:transform}
.pet.live{opacity:1}
.pet .core{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--gold-l) 40%,var(--gold) 80%,var(--gold-d) 100%);
  box-shadow:0 0 14px 4px rgba(237,217,180,.5),0 0 34px 10px rgba(211,174,114,.18);transition:transform .4s,box-shadow .4s,filter .4s}
.pet .halo{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(237,217,180,.55);opacity:0}
.pet.live .halo{animation:halo 2.8s ease-out infinite}
@keyframes halo{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.pet.grab{cursor:grabbing}
.pet.grab .core{transform:scale(1.3);box-shadow:0 0 22px 8px rgba(237,217,180,.7),0 0 50px 16px rgba(211,174,114,.3)}
.pet.sleep .core{transform:scale(.7);filter:saturate(.6) brightness(.8);box-shadow:0 0 8px 2px rgba(237,217,180,.25);animation:breathe 4s ease-in-out infinite}
.pet.sleep .halo{animation:none;opacity:0}
.pet .moon{position:absolute;left:62%;bottom:62%;width:10px;height:10px;opacity:0;transition:opacity .5s}
.pet.sleep .moon{opacity:.75}
@keyframes breathe{50%{box-shadow:0 0 14px 4px rgba(237,217,180,.45)}}
.trail{position:fixed;left:0;top:0;z-index:7;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 6px var(--gold);pointer-events:none;opacity:0;will-change:transform}
body.steps-open .pet,body.steps-open .trail,body.brief-open .pet,body.brief-open .trail{opacity:0!important;pointer-events:none}

.say{position:fixed;left:0;top:0;z-index:9;max-width:min(230px,70vw);box-sizing:border-box;padding:9px 13px;border-radius:14px;background:rgba(12,28,56,.97);border:1px solid var(--line);color:var(--fg);font:600 .82rem/1.38 var(--font-body);box-shadow:0 12px 30px -10px rgba(0,0,0,.75);opacity:0;pointer-events:none;transition:opacity .2s;will-change:transform}
.say.show{opacity:1}
.say.act{pointer-events:auto;cursor:pointer}
.say.act::after{content:" →";color:var(--gold)}
.say.act:hover{border-color:var(--gold)}
body.steps-open .say,body.brief-open .say{opacity:0!important;pointer-events:none}
#edge{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s;box-shadow:inset 0 0 0 1px rgba(211,174,114,.4),inset 0 0 60px rgba(211,174,114,.12)}
#edge.show{opacity:1}
#edge.near{box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 90px rgba(211,174,114,.3)}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:30;transform:translate(-50%,10px);background:rgba(12,28,56,.95);border:1px solid var(--line);color:var(--gold-l);font-weight:600;font-size:.84rem;padding:9px 16px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
#toast.show{opacity:1;transform:translate(-50%,0)}

.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-play-state:paused}
body.ready .rise{animation-play-state:running}
@keyframes rise{from{transform:translateY(14px);opacity:.001}to{transform:none;opacity:1}}
.copy>.rise:nth-child(2){animation-delay:.08s}.copy>.rise:nth-child(3){animation-delay:.16s}.copy>.rise:nth-child(4){animation-delay:.24s}.copy>.rise:nth-child(5){animation-delay:.32s}
.slot.rise{animation-delay:.12s}

@media (max-width:820px){
  .hero{display:flex;flex-direction:column;gap:clamp(4px,1.4vh,14px)}
  .slot{order:-1;flex:1;width:100%;height:auto}
  .copy{flex:none;gap:clamp(6px,1.4vh,14px)}
  .badge{display:none}
  h1{font-size:clamp(1.6rem,min(8.2vw,4.5vh),2.6rem)}
  .typer{margin:0;font-size:clamp(.95rem,min(4.3vw,2.6vh),1.25rem)}
  .lead{font-size:clamp(.82rem,min(3.7vw,2vh),1rem);line-height:1.5}
  .cta{padding:12px 20px;font-size:.92rem}
  .contact{padding:7px 14px;font-size:.82rem}
  .logo{font-size:1.05rem}.logo svg{width:18px;height:28px}
  footer{font-size:.7rem}
}
@media (max-width:340px){ .row{grid-template-columns:1fr} }
@media (max-width:520px){
  .b-card{padding:18px 16px}
  .f input,.f select,.f textarea{padding:9px 10px;font-size:.92rem}
  .f textarea{min-height:56px}
  .b-sub{font-size:.84rem}
  .pill{padding:7px 9px;font-size:.76rem}
}
@media (max-width:820px) and (max-height:640px){ .lead{display:none} }
@media (max-height:520px){ .lead,.badge{display:none} }
@media (prefers-reduced-motion:reduce){
  .sky b,.ring,.pearl,.l-logo,.loader-text span,.rise,.hub::after,.rings circle.dash,.rings path.spiral,.caret,.s-in,.rays i,.caustic,.h3d,.pet .halo,.pet.sleep .core{animation:none!important}
  #sea,#sea.on{transition:none!important}
  .ring{stroke-dashoffset:0}.l-logo{opacity:1;transform:translate(-50%,-50%)}.loader-text span{opacity:1;transform:none}
  .b-card{transition:opacity .2s!important}
}

/* ---------- Page composition ---------- */

html{overflow:auto;background:#17181a}
body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;background:#17181a;color:var(--fg)}
.sky{background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(10,10,11,.55) 100%),url('../img/otechsoft-bg.jpg') center/cover no-repeat #17181a}
.sky .b1,.sky .b2{opacity:.12}.sky .b1{background:#3a2a14}.sky .b2{background:#222326}.sky .b3{opacity:.1}
.sky::after{inset:0;background:radial-gradient(circle at 50% 50%,rgba(201,150,40,.06),transparent 40%)}
#net{opacity:.9}
.page{min-height:100svh;height:auto;max-width:1480px;padding:clamp(28px,5vw,76px) clamp(22px,6vw,96px) clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:clamp(14px,2.8vh,30px)}
.page>header{position:relative;z-index:4}
.story{width:min(38.2%,520px);margin-left:auto;margin-right:6.18%;color:#d3dbe7;position:relative;z-index:1}
.story p{margin:0;font:500 clamp(.9rem,1.25vw,1.12rem)/1.75 var(--font-body);letter-spacing:.005em}
.story::before{content:"";display:block;width:clamp(30px,4vw,58px);height:1px;background:var(--gold);margin-bottom:clamp(12px,2vh,20px)}
footer{justify-content:flex-end;color:#8f9bad;font-size:.66rem;position:relative;z-index:2}

/* Stage: laptop and button on the left, solutions network on the right */
.desktop-stage{--lw:min(46vw,640px);position:relative;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,72px);min-height:clamp(520px,68vh,720px)}
.desktop-stage .laptop{grid-column:1;grid-row:1;align-self:start;margin-top:clamp(10px,3vh,40px)}
.desktop-stage>.outside-actions{grid-column:1;grid-row:2;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4vh,24px);margin:clamp(34px,5vh,56px) 0 0;position:relative;z-index:3}
.outside-actions .cta{font-size:clamp(.78rem,1vw,.92rem);padding:12px 22px}
.outside-actions .hint{font-size:clamp(.66rem,.8vw,.78rem);letter-spacing:.01em;color:var(--gold-l)}
.desktop-stage .hero{grid-column:2;grid-row:1/-1;position:relative;z-index:2;display:block;min-height:0}
.desktop-stage .slot{height:100%;min-height:clamp(500px,68vh,710px)}

/* MacBook: thin black bezel, notch, silver base. Sizes use cqw so text scales with the laptop. */
.laptop{position:relative;width:100%;container-type:inline-size;z-index:2}
.laptop::after{content:"";position:absolute;left:2%;right:2%;bottom:-3cqw;height:4cqw;background:radial-gradient(ellipse at 50% 30%,rgba(28,22,14,.38),transparent 70%);filter:blur(5px);z-index:-1;pointer-events:none}
.screen-frame{padding:1.1cqw 1.1cqw 1.3cqw;border-radius:2.4cqw 2.4cqw .6cqw .6cqw;background:#0b0c0e;border:1px solid #5b5f65;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px #000}
.screen{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:.9cqw;background:linear-gradient(105deg,rgba(5,14,27,.52),rgba(5,14,27,.18)),url('../img/otechsoft-workshop.png') center/cover no-repeat}
.screen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,16,31,.62),rgba(6,16,31,.08) 72%),radial-gradient(circle at 74% 38%,rgba(255,206,90,.22),transparent 33%)}
.screen-chrome{position:absolute;z-index:4;left:0;right:0;top:0;height:3cqw;display:flex;align-items:center;gap:.9cqw;padding:0 2.2cqw;box-sizing:border-box;background:linear-gradient(180deg,#3a3b40 0%,#242528 55%,#161618 100%);border-bottom:1px solid rgba(201,150,40,.45);box-shadow:0 1px 6px rgba(0,0,0,.5)}
.chrome-dot{width:.8cqw;height:.8cqw;border-radius:50%;background:#77787d}
.chrome-dot.red{background:#a9563f}.chrome-dot.yellow{background:#c99628}.chrome-dot.green{background:#7f8a6a}
.chrome-address{display:flex;align-items:center;height:1.7cqw;margin-left:1cqw;padding:0 1.4cqw;border-radius:999px;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#dccfae;font:600 1cqw/1 var(--font-body);letter-spacing:.02em}
.chrome-line{width:5cqw;height:.5cqw;margin-left:auto;border-radius:999px;background:rgba(220,207,174,.4)}
.chrome-line.short{width:2.6cqw;margin-left:0}
.screen-notch{position:absolute;z-index:5;left:50%;top:0;transform:translateX(-50%);width:11cqw;height:2.4cqw;border-radius:0 0 1.2cqw 1.2cqw;background:#0b0d10}
.screen-notch::after{content:"";position:absolute;left:50%;top:50%;width:.6cqw;height:.6cqw;transform:translate(-50%,-50%);border-radius:50%;background:#1c2530;box-shadow:inset 0 0 0 .1cqw #2d3a4a}
.screen header{position:absolute;top:5cqw;left:4cqw;z-index:6}
.screen .logo{color:#fff7e7;font-size:2.4cqw;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.screen .logo svg{width:2.6cqw;height:4cqw}
.screen-copy{position:absolute;left:4cqw;top:14cqw;width:56%;z-index:4;gap:1.6cqw;color:#f7f1e4;text-shadow:0 2px 8px rgba(0,0,0,.52)}
.screen-copy .badge{font-size:1.35cqw;letter-spacing:.16em;color:#f1d596}
.screen-copy .badge::before{width:4cqw}
.screen-copy h1{font-size:5.6cqw;line-height:1.02;color:#fffaf0}
.screen-copy h1 em{color:#f1d596}
.screen-copy .typer{font-size:2.3cqw;color:#f3dba4}
.screen-copy .lead{font-size:1.9cqw;line-height:1.5;max-width:36ch;color:#fff8eb}
.laptop-base{position:relative;height:2.4cqw;margin:0 -4.5cqw;border-radius:0 0 3cqw 3cqw/0 0 1.4cqw 1.4cqw;background:linear-gradient(180deg,#eceef0 0%,#c9ccd0 35%,#a3a8ae 100%);border:1px solid rgba(60,64,70,.5);border-top:1px solid #8a8f95;box-shadow:inset 0 -2px 3px rgba(0,0,0,.18)}
.laptop-base::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:16cqw;height:.9cqw;border-radius:0 0 1cqw 1cqw;background:linear-gradient(180deg,#8d9298,#b4b8bd);box-shadow:inset 0 -1px 1px rgba(255,255,255,.4)}

@media (max-width:820px){
  .page{gap:26px;padding:34px 24px 28px}
  .story{width:100%;max-width:520px;margin:18px auto}
  .desktop-stage{--lw:min(59vw,380px);display:flex;flex-direction:column;gap:26px;min-height:0}
  .desktop-stage .laptop{width:var(--lw);align-self:center;margin-top:0;margin-bottom:2cqw}
  .desktop-stage>.outside-actions{order:4;width:100%;margin:0;padding:0;align-items:center;text-align:center;gap:14px}
  .outside-actions .cta{font-size:.74rem;padding:8px 16px}
  .outside-actions .hint{display:none}
  .desktop-stage .hero{order:3}
  .desktop-stage .slot{min-height:300px}
  footer{justify-content:center;text-align:center}
  .sky{background:linear-gradient(180deg,#1d1e21 0%,#17181a 55%,#131416 100%)}
}
@media (max-width:560px){
  .page{padding:26px 22px 20px;gap:18px}
  .story p{font-size:.82rem;line-height:1.6}
  .desktop-stage{gap:18px}
  .screen-copy{top:12.5cqw;width:70%;gap:1.4cqw}
  .screen-copy .badge,.screen-copy .lead{display:none}
  .screen-copy h1{font-size:7cqw}
  .screen-copy .typer{font-size:3.2cqw}
  .screen header{top:5.5cqw}
  .screen .logo{font-size:3cqw}
  .desktop-stage .slot{min-height:225px}
  footer{font-size:.6rem;line-height:1.4}
}

/* Desktop and tablet: the whole composition fits the browser window without scrolling */
@media (min-width:821px){
  .page{height:100svh;min-height:0;padding:clamp(14px,3.2vh,44px) clamp(22px,5vw,84px) clamp(10px,2vh,26px);gap:clamp(6px,1.6vh,20px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
  .page>header{grid-column:1;grid-row:1;align-self:start}
  .story{grid-column:2;grid-row:1;justify-self:end;width:100%;max-width:460px;margin:0}
  .story p{font-size:clamp(.74rem,min(1.15vw,2.2vh),1.05rem);line-height:1.6}
  .story::before{margin-bottom:clamp(6px,1.4vh,16px)}
  .desktop-stage{--lw:min(46vw,640px,calc((100svh - 340px)*1.5));grid-column:1/-1;grid-row:2;min-height:0;height:100%;grid-template-columns:var(--lw) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .desktop-stage .laptop{margin-top:clamp(0px,1vh,12px)}
  .desktop-stage>.outside-actions{margin-top:clamp(18px,4vh,40px)}
  .desktop-stage .slot{min-height:0;height:100%}
  footer{grid-column:1/-1;grid-row:3}
}
@media (min-width:821px) and (max-height:560px){
  .outside-actions .hint{display:none}
}