@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black-ext.woff2) format("woff2");font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/fonts/inter-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@property --bg{syntax:"<color>";inherits:true;initial-value:#0A0A0C}
@property --fg{syntax:"<color>";inherits:true;initial-value:#F4F1EA}

:root{
  --ink:#0A0A0C; --ink-2:#131317; --ink-3:#1C1C21; --bone:#F4F1EA; --bone-2:#E6E2D8; --lime:#D4FF3A; --red:#E5352B;
  --display:"Archivo Black","Arial Black",sans-serif; --text:Inter,system-ui,sans-serif;
  --gut:clamp(16px,2.6vw,40px);
  --spring:cubic-bezier(.32,.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{--bg:var(--ink);--fg:var(--bone);--card:var(--ink-3);background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased;
  transition:--bg .8s var(--spring),--fg .8s var(--spring)}
body[data-theme=lime]{--bg:var(--lime);--fg:var(--ink);--card:#C2EC2C}
body[data-theme=bone]{--bg:var(--bone);--fg:var(--ink);--card:var(--bone-2)}
body[data-theme=ink2]{--bg:var(--ink-2);--fg:var(--bone);--card:#202026}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
body[data-theme=lime] :focus-visible{outline-color:var(--ink)}
::selection{background:var(--lime);color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.035em;line-height:.9}
h2{font-size:clamp(40px,6.4vw,112px)}
h3{font-size:clamp(26px,2.6vw,40px)}
.price{font:800 clamp(20px,1.8vw,26px)/1.2 var(--text);margin-top:14px}

#oz3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s var(--spring);pointer-events:none}
.gl #oz3d{opacity:1}
main{position:relative;z-index:1}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:28px;padding:14px var(--gut);background:var(--bg);color:var(--fg)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark b{font:400 26px/1 var(--display);letter-spacing:-.04em}
.mark span{display:flex;align-items:center;gap:6px;font:800 11px/1 var(--text);letter-spacing:.3em}
.mark i{display:block;width:14px;height:2px;background:var(--lime)}
body[data-theme=lime] .mark i{background:var(--ink)}
.bar nav{display:flex;gap:26px;margin-left:auto}
.bar nav a{font:600 15px/1 var(--text);text-decoration:none;opacity:.75;transition:opacity .3s var(--spring)}
.bar nav a:hover{opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:18px 28px;font:800 16px/1 var(--text);text-decoration:none;
  transition:transform .5s var(--spring),background-color .3s var(--spring),color .3s var(--spring)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--lime);color:var(--ink)}
body[data-theme=lime] .btn-lime{background:var(--ink);color:var(--lime)}
.btn-ghost{background:var(--ink-3);color:var(--bone)}
.btn-ink{background:var(--ink);color:var(--lime)}
.btn-line{background:#C2EC2C;color:var(--ink)}
.btn-sm{padding:11px 18px;font-size:14px}

.stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:84px var(--gut) 40px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.copy p{max-width:44ch;margin-top:24px;font-size:clamp(17px,1.25vw,20px)}

/* entrances */
.js [data-rise]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--spring),transform 1.1s var(--spring)}
.js [data-rise].in{opacity:1;transform:none}

/* HERO */
.hero{height:200svh}
.hero .stage{padding:0}
.poster{position:absolute;inset:0;display:grid;place-items:center end;padding-right:8vw;transition:opacity .8s var(--spring)}
.gl .poster{opacity:0}
.poster span{font:400 min(30vw,46svh)/1 var(--display);letter-spacing:-.05em;color:transparent;
  background:linear-gradient(180deg,#fff 0%,#F2F4F6 22%,#B9BEC5 44%,#5D626A 50%,#DDE1E5 60%,#fff 78%,#C5CAD0 100%);-webkit-background-clip:text;background-clip:text}
.hero-copy{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(36px,9svh,96px);
  opacity:calc(1 - var(--p,0)*2.4);transform:translate3d(0,calc(var(--p,0)*-14svh),0)}
.hero h1{font-size:clamp(44px,6.3vw,120px);white-space:nowrap}
.lede{max-width:36ch;margin-top:26px;font-size:clamp(17px,1.35vw,21px)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.cue{position:absolute;right:var(--gut);bottom:clamp(36px,9svh,96px);font:600 14px/1 var(--text);opacity:calc(.7 - var(--p,0)*3)}
.cue::after{content:"";display:block;width:2px;height:48px;background:var(--lime);margin:14px auto 0;animation:cue 1.8s var(--spring) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.bubble{position:absolute;left:47%;top:16%;max-width:270px;padding:14px 16px 10px;background:var(--bone);color:var(--ink);border-radius:18px 18px 18px 4px;
  transform-origin:0 100%;
  transform:translate3d(calc(var(--p,0)*-10vw),calc(var(--p,0)*40svh),0) scale(calc(1 - min(1,var(--p,0)*2.2)*.95));
  animation:pop 1s .5s var(--spring) both}
@keyframes pop{from{opacity:0;translate:0 20px}}
.bubble p{font:600 17px/1.3 var(--text)}
.bubble small{display:block;text-align:right;font:600 12px/1 var(--text);opacity:.55;margin-top:4px}
.bubble::after{content:"";position:absolute;left:-2px;bottom:-2px;width:16px;height:16px;background:var(--lime);border-radius:50%;opacity:min(1,calc(var(--p,0)*2.4))}

/* KAYIP */
.kayip{height:240svh}
.kayip h2,.zincir h2{font-size:clamp(36px,4.6vw,84px)}
.lock{justify-self:center;width:min(380px,88vw);padding:26px 18px;background:var(--ink);color:var(--bone);border-radius:36px;
  transform:perspective(1200px) rotateY(calc(-14deg + var(--p,0)*14deg)) rotateX(calc(8deg - var(--p,0)*8deg))}
.clock{font:400 64px/1 var(--display);text-align:center;margin:8px 0 22px;letter-spacing:-.03em}
.lock ul{list-style:none;display:grid;gap:10px}
.lock li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-radius:18px;background:var(--ink-3);
  --s:clamp(0,calc(var(--p,0)*6 - var(--i)),1);opacity:var(--s);transform:translate3d(0,calc((1 - var(--s))*24px),0) scale(calc(.94 + var(--s)*.06))}
.lock li b{font:800 13px/1.2 var(--text)}
.lock li span{grid-column:1;font-size:15px;line-height:1.3}
.lock li em{grid-row:1;grid-column:2;font:600 12px/1.2 var(--text);font-style:normal;opacity:.6}
.lock li.lost{background:var(--red);color:var(--ink)}

/* BUGÜN: horizontal track driven by vertical scroll */
.bugun{height:290svh;--S:min(80vw,1100px);--G:4vw}
.track{display:flex;gap:var(--G);margin-top:clamp(20px,4svh,48px);width:max-content;
  transform:translate3d(calc(var(--p,0) * -1 * (3 * var(--S) + 2 * var(--G) - 100vw + 2 * var(--gut))),0,0)}
.slide{width:var(--S);display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;align-items:center;padding:clamp(24px,3vw,48px);background:var(--card);border-radius:28px}
.slide-copy p:not(.price){margin-top:18px;max-width:40ch}
.track-note{position:absolute;left:var(--gut);right:var(--gut);bottom:28px;font:600 15px/1.45 var(--text);max-width:70ch}
.phone{justify-self:center;width:min(250px,60vw);aspect-ratio:9/17;background:var(--bone);color:var(--ink);border-radius:30px;padding:18px 14px;display:flex;flex-direction:column;gap:12px}
.ph-top b{display:block;font:800 17px/1.2 var(--text)}
.ph-top small{font-size:12px;opacity:.65}
.ph-btn{display:block;text-align:center;padding:12px;border-radius:999px;background:var(--ink);color:var(--lime);font:800 13px/1 var(--text)}
.days,.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.slots{grid-template-columns:repeat(2,1fr);flex:1;align-content:start}
.days i,.slots i,.cal-day i{font:600 12px/1 var(--text);font-style:normal;text-align:center;padding:10px 4px;border-radius:10px;background:var(--bone-2)}
.days i.on,.slots i.on,.cal-day i.on{background:var(--lime)}
.cal-day{display:grid;gap:8px}
.cal-day i{text-align:left;padding:14px 10px}

/* KLİNİK */
.klinik{height:280svh}
.rev .copy{order:2}
.timeline{list-style:none;position:relative;display:grid;gap:clamp(6px,1.4svh,14px);padding-left:34px}
.timeline::before,.timeline::after{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--bone-2)}
.timeline::after{background:var(--ink);transform-origin:top;transform:scaleY(var(--p,0))}
.timeline li{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  --s:clamp(0,calc(var(--p,0)*8.4 - var(--i)),1);opacity:calc(.28 + var(--s)*.72);transform:translate3d(calc((1 - var(--s))*14px),0,0)}
.timeline li::before{content:"";position:absolute;left:-32px;top:.35em;width:16px;height:16px;border-radius:50%;
  background:color-mix(in srgb,var(--lime) calc(var(--s)*100%),var(--bone-2))}
.timeline li b{font:400 clamp(20px,2.1vw,32px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.timeline li span{font-size:15px}

/* ZİNCİR */
.zincir{height:240svh}
.menu{list-style:none;margin-top:30px;display:grid;gap:18px;max-width:560px}
.menu li{display:grid;grid-template-columns:1fr auto;gap:4px 18px}
.menu b{font:800 18px/1.3 var(--text)}
.menu em{grid-row:1;grid-column:2;font:800 15px/1.3 var(--text);font-style:normal;color:var(--lime);white-space:nowrap}
.menu span{grid-column:1 / -1;font-size:16px;opacity:.85}
.layers{position:relative;height:min(60svh,520px);perspective:1400px;transform-style:preserve-3d}
.layer{position:absolute;left:10%;right:10%;top:30%;padding:22px;border-radius:22px;display:grid;gap:8px;
  transform:rotateX(58deg) rotateZ(-32deg) translateZ(calc(var(--z) * (20px + var(--p,0) * 120px)))}
.layer b{font:800 14px/1 var(--text)}
.layer i{font:600 14px/1.2 var(--text);font-style:normal;padding:9px 10px;border-radius:10px;background:rgba(10,10,12,.07)}
.l1{--z:2;background:var(--bone);color:var(--ink)}
.l2{--z:1;background:#2A2A31;color:var(--bone)}
.l2 i{background:rgba(244,241,234,.08)}
.l3{--z:0;background:var(--lime);color:var(--ink)}
.dot{position:absolute;left:50%;top:calc(12% + var(--p,0)*60%);width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--lime);transform:translateZ(300px)}

/* İNŞAAT: card stack peels away */
.insaat{height:320svh}
.copy.top{display:grid;grid-template-columns:auto 1fr;gap:4vw;align-items:end}
.copy.top p{margin:0}
.stack{position:relative;height:min(52svh,440px);margin-top:clamp(24px,5svh,60px);max-width:760px;margin-inline:auto}
.stack article{position:absolute;inset:0;padding:clamp(26px,4vw,56px);border-radius:28px;background:var(--bone);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  z-index:calc(10 - var(--i));
  --s:clamp(0,calc(var(--p,0)*5.2 - var(--i) - .3),1);
  transform:translate3d(0,calc(var(--i)*-16px + var(--s)*-120svh),0) rotate(calc(var(--s)*-8deg)) scale(calc(1 - var(--i)*.035))}
.stack article:nth-child(even){background:var(--lime)}
.stack article:last-child{--s:0}
.stack h3{font-size:clamp(34px,4.4vw,72px)}
.stack p{font-size:clamp(17px,1.4vw,22px);max-width:34ch}

/* DENE */
.wrap{padding:clamp(110px,16svh,180px) var(--gut)}
.sub{max-width:52ch;margin-top:22px;font-size:clamp(17px,1.3vw,20px)}
.demo{margin-top:40px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{font:800 16px/1 var(--text);padding:15px 24px;border-radius:999px;border:0;background:var(--ink-3);color:var(--bone);cursor:pointer;transition:transform .4s var(--spring),background-color .3s}
.chips button[aria-pressed=true]{background:var(--lime);color:var(--ink)}
.chips button:active{transform:scale(.96)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;margin-top:24px;align-items:start}
.chat{background:#0F1512;border-radius:28px;padding:18px;min-height:470px}
.chat-top{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 14px}
.chat-top b{font:800 16px/1 var(--text)}
.chat-top small{font:600 13px/1 var(--text);color:var(--lime)}
.thread{display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:15.5px;line-height:1.4;opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s var(--spring),transform .6s var(--spring)}
.msg.on{opacity:1;transform:none}
.msg.in{align-self:flex-start;background:var(--ink-3);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--bone);color:var(--ink);border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:none;font:600 13px/1 var(--text);padding:6px}
.msg.sys.on{opacity:.6}
.outs{display:grid;gap:14px}
.out-card{padding:20px;border-radius:22px;background:var(--ink-3);display:grid;gap:8px;transition:background-color .5s var(--spring),transform .6s var(--spring)}
.out-card.on{background:var(--lime);color:var(--ink);transform:translateY(-3px)}
.out-card small{font:600 13px/1 var(--text);opacity:.7}
.out-card b{font:800 18px/1.3 var(--text)}
.row p{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.row span{font:600 14px/1.3 var(--text);padding:8px 10px;border-radius:10px;background:rgba(10,10,12,.08)}

/* NASIL */
.how{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;margin-top:48px}
.steps{list-style:none;display:grid;gap:28px}
.steps li{display:grid;grid-template-columns:minmax(0,15ch) 1fr;gap:6px 30px}
.steps b{font:400 clamp(20px,1.8vw,28px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.steps span{font-size:17px}
.nope{background:var(--ink);color:var(--bone);border-radius:28px;padding:clamp(26px,3vw,40px);align-self:start}
.nope ul{list-style:none;margin:20px 0;display:grid;gap:10px}
.nope li{font:700 18px/1.3 var(--text);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.nope p{font-size:16px}

/* SON */
.son .wrap{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:60px}
.son h2{font-size:clamp(44px,8vw,150px)}
.foot{padding:0 var(--gut) 40px}
.foot .big{font:400 clamp(60px,15.5vw,300px)/.82 var(--display);letter-spacing:-.05em;margin:48px 0 0;white-space:nowrap}
.foot p:not(.big){max-width:68ch;font-size:14px;line-height:1.5;margin-top:8px}

.dock{display:none}

@media (max-width:900px){
  .split,.how,.demo-grid{grid-template-columns:1fr}
  .rev .copy{order:0}
  .slide{grid-template-columns:1fr}
}
@media (max-width:767px){
  body{font-size:16px}
  .bar nav{display:none}
  .bar .btn{margin-left:auto}
  .stage{padding:74px var(--gut) 24px}
  body:not([data-at=top]):not([data-at=son]) #oz3d{opacity:.3}
  .hero h1{font-size:clamp(40px,11.6vw,64px)}
  .hero-copy{bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero-copy .acts{display:none}
  .lede{margin-top:16px;font-size:16px}
  .cue{display:none}
  .poster{place-items:start center;padding:16svh 0 0}
  .poster span{font-size:56vw}
  .bubble{left:auto;right:var(--gut);top:38svh;max-width:230px}
  .split{gap:22px;align-content:start}
  .copy p{margin-top:14px;font-size:16px}
  h2,.kayip h2,.zincir h2,.son h2{font-size:clamp(30px,8.6vw,56px)}
  .lock{width:min(330px,100%);padding:16px 12px;border-radius:28px}
  .clock{font-size:40px;margin:2px 0 12px}
  .lock li{padding:9px 12px}
  .bugun{--S:86vw;--G:4vw}
  .slide{padding:20px;gap:16px}
  .slide-copy p:not(.price){margin-top:10px;font-size:15px}
  .phone{width:150px;padding:12px 10px;gap:8px;border-radius:22px}
  .track-note{font-size:13px;bottom:84px}
  .timeline{padding-left:30px;gap:8px}
  .timeline li span{font-size:13px}
  .layers{height:34svh}
  .layer{padding:14px;left:6%;right:6%;top:24%}
  .menu{gap:12px;margin-top:18px}
  .menu span{font-size:14px}
  .menu b{font-size:16px}
  .copy.top{grid-template-columns:1fr;gap:12px}
  .stack{height:46svh}
  .steps li{grid-template-columns:1fr}
  .chat{min-height:420px}
  .foot{padding-bottom:110px}
  .dock{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:10}
  .dock a{text-align:center;padding:15px;border-radius:999px;font:800 15px/1 var(--text);text-decoration:none;background:var(--lime);color:var(--ink)}
  .dock a+a{background:var(--ink);color:var(--bone)}
  body[data-theme=lime] .dock a:first-child{background:var(--ink);color:var(--lime)}
  body[data-theme=lime] .dock a+a{background:var(--bone);color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  .hero,.kayip,.bugun,.klinik,.zincir,.insaat{height:auto}
  .stage{position:relative;height:auto;min-height:100svh}
  [data-scene]{--p:1 !important}
  .hero-copy,.bubble{position:relative;inset:auto;transform:none;opacity:1;animation:none}
  .hero .stage{display:flex;flex-direction:column;justify-content:flex-end;padding:90px var(--gut) 40px;gap:30px}
  .bubble::after{opacity:0}
  .track{transform:none;flex-direction:column;width:auto}
  .slide{width:auto}
  .track-note{position:static;margin-top:20px}
  .stack{height:auto;display:grid;gap:14px}
  .stack article{position:relative;transform:none;--s:0}
  .js [data-rise]{opacity:1;transform:none}
  .cue::after{animation:none}
}