:root{
  --paper:#f2f0eb; --white:#fbfaf7; --ink:#121314; --ink2:#4b4e52; --ink3:#8a8d90;
  --rule:#dad7cf; --rule2:#c4c0b6; --scan:#0e1112; --scan2:#171c1d;
  --amber:#e9a23b; --acc:#1f4f73; --acc-bg:#e6edf2;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
h1,h2{margin:0;font-weight:500}
p{margin:0}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.mono{font:500 11px/1 var(--mono);letter-spacing:.08em;color:#8f989b}
.later{font-size:13px;color:var(--ink3)}

/* ───── üst çubuk ───── */
.bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.bar__in{display:flex;align-items:center;gap:40px;height:64px;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;letter-spacing:-.01em}
.logo svg{width:24px;height:24px}
.tabs{display:flex;gap:28px}
.tabs a{position:relative;color:var(--ink2);text-decoration:none;font-size:14px;padding:6px 0}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.tabs a:hover{color:var(--ink)}
.tabs a:hover::after,.tabs a.on::after{transform:scaleX(1);transform-origin:left}
.tabs a.on{color:var(--ink)}
.burger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative;color:var(--ink)}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}

/* ───── telefon menüsü ───── */
.menu{position:fixed;inset:0;z-index:30;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:100px var(--pad) 32px;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease),visibility 0s .6s;visibility:hidden}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid #2a2c2e;color:var(--paper);text-decoration:none;font:400 clamp(34px,10vw,48px)/1.05 var(--serif);letter-spacing:-.01em;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease),color .2s}
.menu__nav a i{font:500 11px var(--mono);font-style:normal;letter-spacing:.08em;color:#777b7f;width:22px}
.menu__nav a.on{color:var(--amber)}
.menu__foot{font-size:13px;color:#8d9195;opacity:0;transition:opacity .5s .35s}
body.menu-open{overflow:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease),visibility 0s}
body.menu-open .menu__nav a{opacity:1;transform:none}
body.menu-open .menu__nav a:nth-child(1){transition-delay:.12s}
body.menu-open .menu__nav a:nth-child(2){transition-delay:.17s}
body.menu-open .menu__nav a:nth-child(3){transition-delay:.22s}
body.menu-open .menu__nav a:nth-child(4){transition-delay:.27s}
body.menu-open .menu__nav a:nth-child(5){transition-delay:.32s}
body.menu-open .menu__foot{opacity:1}
body.menu-open .bar{background:var(--ink);border-bottom-color:#2a2c2e;backdrop-filter:none}
body.menu-open .logo,body.menu-open .burger{color:var(--paper)}
body.menu-open .burger span:first-child{top:21.5px;transform:rotate(45deg)}
body.menu-open .burger span:last-child{top:21.5px;transform:rotate(-45deg)}

/* ───── ana sayfa ───── */
.home{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,112px);align-items:center;min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);padding:clamp(24px,5vh,56px) 0}
.display{font:400 clamp(40px,min(5.6vw,10vh),92px)/1 var(--serif);letter-spacing:-.022em;text-wrap:balance;max-width:18ch}
.display em{font-style:italic;color:var(--acc)}
.hero__sub{display:flex;flex-direction:column;gap:clamp(20px,3.4vh,32px);margin-top:clamp(24px,4.5vh,44px);padding-top:clamp(18px,3vh,26px);border-top:1px solid var(--rule);max-width:600px}
.hero__sub p{font-size:clamp(15px,2.1vh,18px);color:var(--ink2);max-width:52ch}
.hero__cta{display:flex;align-items:center;gap:24px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:13px 22px;font-weight:500;font-size:14px;text-decoration:none;cursor:pointer;transition:background .2s}
.btn:hover{background:#000}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.btn--arrow:hover svg{transform:translateX(4px)}
.ulink{position:relative;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;justify-self:start}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform-origin:left;transition:transform .35s var(--ease)}
.ulink:hover::after{transform:scaleX(.35)}

.probe{margin:0;position:relative;aspect-ratio:4/5;height:min(74vh,720px);height:min(74svh,720px);width:auto;justify-self:end;background:var(--scan);border-radius:2px;overflow:hidden}
.probe svg{position:absolute;inset:0;width:100%;height:100%}
.probe__sweep{animation:sweep 5.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sweep{0%{transform:translateY(-140px)}100%{transform:translateY(520px)}}
.probe__heat{transform-origin:200px 268px;animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.probe__sweep,.probe__heat{animation:none}.menu,.menu__nav a{transition:none}}

.index{list-style:none;margin:0 0 clamp(56px,8vw,120px);padding:0;border-top:1px solid var(--ink)}
.index li{border-bottom:1px solid var(--rule)}
.index a{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr) 200px 32px;gap:24px;align-items:baseline;padding:26px 0;color:var(--ink);text-decoration:none;isolation:isolate}
.index a::before{content:"";position:absolute;inset:0 calc(var(--pad) * -1);background:var(--ink);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.index a:hover::before{transform:scaleY(1)}
.index a:hover{color:var(--paper)}
.index a:hover .index__d,.index a:hover .index__s,.index a:hover .index__n{color:#9da1a4}
.index__n{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink3);transition:color .3s}
.index__t{font:400 clamp(28px,2.8vw,40px)/1.05 var(--serif);letter-spacing:-.015em;transition:transform .5s var(--ease)}
.index a:hover .index__t{transform:translateX(10px)}
.index__d{font-size:14.5px;color:var(--ink2);max-width:42ch;transition:color .3s}
.index__s{font-size:13px;color:var(--ink3);transition:color .3s}
.index__a{font-size:20px;justify-self:end;transition:transform .5s var(--ease)}
.index a:hover .index__a{transform:translateX(4px) rotate(-45deg)}

/* ───── iç sayfalar ───── */
.page{max-width:1440px;margin:0 auto;padding:clamp(32px,5vw,64px) var(--pad) 72px}
.ptitle{font:400 clamp(34px,4vw,52px)/1 var(--serif);letter-spacing:-.02em;margin-bottom:clamp(20px,2.6vw,36px)}
.work{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start}
.work--even{grid-template-columns:minmax(0,1fr) 360px}
.side{background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:20px;display:grid;gap:20px}
.group{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.group legend{font-size:12.5px;font-weight:500;color:var(--ink);padding:0;margin-bottom:8px;letter-spacing:.01em}
.group[disabled]{opacity:.55}
.seg{display:flex;border:1px solid var(--rule2);border-radius:999px;overflow:hidden;padding:3px;gap:3px;background:var(--paper)}
.seg label{flex:1;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:7px 8px;font-size:13.5px;border-radius:999px;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:1px}
.seg .off{cursor:not-allowed}
.seg .off span{color:var(--rule2)}
.seg--col{flex-direction:column;border-radius:12px}
.seg--col span{text-align:left;padding:9px 12px;border-radius:9px}
.drop{position:relative;display:grid;gap:3px;padding:22px 14px;border:1px dashed var(--rule2);border-radius:2px;text-align:center;cursor:pointer;background:var(--paper);transition:background .2s,border-color .2s}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--white)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop__t{font-weight:500;font-size:14px}
.drop__s{font-size:12.5px;color:var(--ink3)}
.drop__name{font:12px var(--mono);color:var(--acc);margin-top:6px;word-break:break-all}
.side .btn{width:100%}
.side .later{margin-top:-10px;text-align:center}
.stage{display:grid;gap:22px;min-width:0}
.viewer{background:var(--scan);border-radius:2px;overflow:hidden}
.viewer__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--scan2);border-bottom:1px solid #000}
.viewer__img{position:relative;aspect-ratio:16/10;max-height:calc(100vh - 300px);min-height:280px;display:grid;place-items:center}
.viewer__img--sq{aspect-ratio:4/3;max-height:calc(100vh - 330px)}
.viewer__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer__ph{font:500 11.5px var(--mono);letter-spacing:.08em;color:#667073;text-align:center;padding:12px}
.switch{display:flex;align-items:center;gap:8px;font-size:12px;color:#9aa3a6}
.switch i{width:26px;height:14px;border-radius:7px;background:#363d40;position:relative}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#78828a}
.switch.off{opacity:.6;cursor:not-allowed}
.res{width:100%;border-collapse:collapse;font-size:14px}
.res caption{text-align:left;font:400 20px/1 var(--serif);padding:0 0 10px}
.res th{text-align:left;font-weight:500;font-size:12px;color:var(--ink3);padding:10px 0;border-bottom:1px solid var(--ink)}
.res td{padding:13px 0;border-bottom:1px solid var(--rule)}
.res .num{text-align:right;font-family:var(--mono);width:90px}
.filters{display:flex;flex-wrap:wrap;gap:14px 36px;padding:0 0 20px;border-bottom:1px solid var(--ink);margin-bottom:28px}
.f{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.f__l{font:500 11px var(--mono);letter-spacing:.08em;color:var(--ink3);margin-right:10px;text-transform:uppercase}
.opt{background:none;border:1px solid transparent;border-radius:999px;padding:6px 13px;font-size:13.5px;color:var(--ink2);cursor:pointer;transition:.2s}
.opt:hover{border-color:var(--rule2)}
.opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt:disabled{color:var(--rule2);cursor:not-allowed;border-color:transparent;background:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 24px}
.card__img{aspect-ratio:4/3;background:var(--scan);border-radius:2px;overflow:hidden}
.card__img svg{width:100%;height:100%;display:block}
.card__b{padding:14px 0 0;display:grid;gap:4px}
.card__b h2{font:400 22px/1.1 var(--serif)}
.card__tags{font:500 11px var(--mono);letter-spacing:.08em;color:var(--ink3)}
.stepper{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.stepper li{display:flex;align-items:center;gap:12px;padding:14px 0;font-size:14px;color:var(--ink3);border-bottom:1px solid var(--rule)}
.stepper b{font:500 11px var(--mono);letter-spacing:.06em}
.stepper .cur{color:var(--ink);border-bottom-color:var(--ink)}
textarea{width:100%;resize:vertical;border:1px solid var(--rule2);border-radius:2px;padding:10px 12px;background:var(--paper)}
.inp{display:grid;gap:6px;font-size:12.5px;color:var(--ink2)}
.inp input{border:1px solid var(--rule2);border-radius:2px;padding:10px 12px;background:var(--paper)}
.login{display:grid;place-items:start center;padding-top:clamp(40px,8vw,96px)}
.login__box{width:100%;max-width:400px;padding:32px 28px}
.login__box .ptitle{font-size:34px;margin-bottom:8px}

/* ───── alt bilgi ───── */
.foot{border-top:1px solid var(--rule)}
.foot__in{max-width:1440px;margin:0 auto;padding:22px var(--pad);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink3)}
.foot__in span:last-child{color:var(--ink);font-weight:500}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font-size:13.5px;z-index:50}

/* ───── duyarlı ───── */
@media (max-width:1100px){
  .index a{grid-template-columns:48px minmax(0,1fr) minmax(0,1.2fr) 32px}
  .index__s{display:none}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;align-items:start}
  .hero{min-height:0;padding:clamp(32px,6vw,56px) 0 clamp(40px,6vw,64px)}
  .probe{aspect-ratio:16/10;height:auto;width:100%;justify-self:stretch}
  .display{max-width:none;font-size:clamp(36px,8vw,64px)}
  .work,.work--even{grid-template-columns:1fr}
}
@media (max-width:820px){
  .tabs{display:none}
  .burger{display:block}
  .index a{grid-template-columns:40px minmax(0,1fr) 24px;row-gap:8px;padding:22px 0}
  .index__n{grid-column:1;grid-row:1}
  .index__t{grid-column:2;grid-row:1}
  .index__d{grid-column:2;grid-row:2}
  .index__s{display:block;grid-column:2;grid-row:3}
  .index__a{grid-column:3;grid-row:1}
  .stepper{grid-template-columns:1fr}
}
@media (min-width:821px){.menu{display:none}}

/* ana sayfa görselinin ekran yazıları */
.hud{position:absolute;display:flex;flex-direction:column;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.09em;color:#a3abae;pointer-events:none}
.hud--tl{top:18px;left:18px}
.hud--tr{top:18px;right:18px;align-items:flex-end}
.hud--bl{bottom:18px;left:18px}
.hud--bl span{display:flex;gap:18px;justify-content:space-between;min-width:150px}
.hud b{font-weight:500;color:#e9eeec}
.legend{display:block;width:96px;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(226,85,58,0),#f08a3c,#ffd27a)}
.ruler{position:absolute;right:16px;top:64px;bottom:64px;display:flex;flex-direction:column;justify-content:space-between;font:500 9.5px var(--mono);color:#6f787b;pointer-events:none}
.ruler span{position:relative;padding-right:10px;text-align:right}
.ruler span::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:#4c5558}

/* analiz: kontroller | görüntü | sonuç */
.work--analiz{grid-template-columns:300px minmax(0,1fr) 280px;grid-template-areas:"ctrl view res"}
.work--analiz>form{grid-area:ctrl}
.work--analiz>.stage{grid-area:view}
.work--analiz>.result{grid-area:res}
.result{align-content:start;gap:16px}
.result .res td{padding:12px 0}
.result__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:12px 14px;border:1px solid var(--rule);border-radius:2px;background:var(--paper)}
.result__row b{font:500 14px var(--mono)}
.result .later{margin:0;text-align:left}
@media (max-width:1200px){
  .work--analiz{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"ctrl view" "res view"}
}
@media (max-width:960px){
  .work--analiz{grid-template-columns:1fr;grid-template-areas:"ctrl" "view" "res"}
}