/* ==========================================================================
   Yazı tipleri — kendi sunucumuzdan.
   Google Fonts'tan yüklenirken üçüncü taraf bir CSS isteği ilk boyamayı
   engelliyordu (Lighthouse: ~840 ms). Dosyalar aynı fontların Google'ın
   sunduğu woff2 alt kümeleri (latin + latin-ext; Türkçe için ikincisi şart).
   Yalnız kullanılan ağırlıklar: Nunito Sans değişken (400-900), Plex Mono 400/500.
   İtalik yok — sayfada italik metin kullanılmıyor.
   ========================================================================== */
@font-face{font-family:"Nunito Sans"; font-style:normal; font-weight:400 900; font-display:swap; src:url("/fonts/nunito-sans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"Nunito Sans"; font-style:normal; font-weight:400 900; font-display:swap; src:url("/fonts/nunito-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/plex-mono-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/plex-mono-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   StepMotion tanıtım sitesi
   Tasarım dili: "bant ve panel", açık tema, turuncu marka vurgusu
   ========================================================================== */

:root{
  --f-head:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --surface:#FFFFFF;
  --ground:#F7F6F4;
  --tint:#FDF3EA;
  --tint-rule:#F0DFCC;

  --ink:#14181C;
  --ink-soft:#55606B;
  --ink-faint:#8A949D;
  --rule:#E6E5E2;
  --rule-strong:#CFCECA;

  --brand:#C2570A;
  --brand-hover:#A6490A;
  --brand-bg:#FCEADA;
  --brand-soft:#F4C79E;

  --ok:#00786A;
  --ok-bg:#D9EBE8;


  --shadow:0 1px 2px rgba(20,24,28,.05), 0 16px 38px -26px rgba(20,24,28,.4);
  --shadow-lift:0 2px 5px rgba(20,24,28,.07), 0 26px 50px -28px rgba(20,24,28,.5);

  --ease:cubic-bezier(.2,.7,.3,1);
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--f-body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.hl{color:var(--brand)}
.hl--nw{white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; font-weight:700; text-decoration:none}
.skip:focus{left:0}

/* ---------- Tipografi ---------- */
.h1{font-family:var(--f-head); font-weight:900; font-size:clamp(2.5rem,6vw,4.7rem); line-height:1.02; letter-spacing:-.028em; margin:.2em 0 0}
.h2{font-family:var(--f-head); font-weight:800; font-size:clamp(1.95rem,3.5vw,2.7rem); line-height:1.14; letter-spacing:-.02em; margin:0; max-width:26ch}
.h3{font-family:var(--f-head); font-weight:800; font-size:1.3rem; line-height:1.26; letter-spacing:-.012em; margin:0}
.lead{font-size:clamp(1.05rem,1.35vw,1.26rem); line-height:1.62; color:var(--ink-soft); max-width:56ch}
.label{font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0}

/* ---------- Bantlar ---------- */
.band{padding:120px 0; position:relative}
.band--surface{background:var(--surface)}
.band--light{background:var(--ground)}
.band--tint{background:var(--tint)}
.head{margin-bottom:56px}
.head .label{margin-bottom:16px}
.head .lead{margin-top:18px}

/* ---------- Panel ---------- */
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow); padding:30px}
.panel--hover{transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease)}
.panel--hover:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--brand-soft)}

/* ---------- İkon kutusu ---------- */
.tile{width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center}
.tile svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mega__item .tile{width:38px;height:38px;flex-basis:38px;border-radius:11px}
.mega__item .tile svg{width:18px;height:18px}

/* canlı ikonlar */
.js .ic-hand{transform-origin:12px 12px; animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.js .ic-bell{transform-origin:12px 4px; animation:swing 3.4s ease-in-out infinite}
@keyframes swing{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(9deg)}86%{transform:rotate(-7deg)}93%{transform:rotate(3deg)}}
.js .ic-ping{animation:ping 3.4s ease-out infinite}
@keyframes ping{0%,72%{opacity:0; r:2}80%{opacity:.9; r:3}100%{opacity:0; r:7}}
.js .ic-line{stroke-dasharray:14; stroke-dashoffset:14; animation:write 5.4s var(--ease) infinite}
.js .ic-line.b{animation-delay:.35s}
.js .ic-line.c{animation-delay:.7s}
@keyframes write{0%{stroke-dashoffset:14}14%,93%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}

/* ---------- Düğmeler ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-head); font-weight:800; font-size:16px; padding:15px 28px; border-radius:11px; border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease)}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-hover); transform:translateY(-1px)}
.btn--ghost{border-color:var(--rule-strong); color:var(--ink); background:var(--surface)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{font-size:15px; padding:11px 20px}
.btn--lg{font-size:17px; padding:17px 34px}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}

/* ---------- Üst menü ---------- */
.nav{position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background .2s var(--ease), border-color .2s var(--ease)}
.nav.is-stuck{background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom-color:var(--rule)}
.nav__in{max-width:var(--wrap); margin:0 auto; padding:0 24px; height:74px; display:flex; align-items:center; gap:30px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--f-head); font-weight:900; font-size:20px; letter-spacing:-.03em}
.brand svg{width:26px;height:26px;display:block}
.brand__m{color:var(--ink-soft)}
.nav__links{display:flex; align-items:center; gap:2px; margin-left:6px}
.nav__link{font-family:var(--f-head); font-weight:700; font-size:16px; color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:9px 14px; border-radius:9px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:color .16s var(--ease), background .16s var(--ease)}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--ink); background:var(--ground)}
.nav__link .chev{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .16s var(--ease)}
.nav__link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav__end{margin-left:auto; display:flex; align-items:center; gap:10px}
.burger{display:none; background:var(--surface); border:1px solid var(--rule-strong); border-radius:10px; padding:9px 11px; cursor:pointer; color:var(--ink)}
.burger svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.mega{position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--rule); box-shadow:var(--shadow); display:none}
.mega[data-open="true"]{display:block}
.mega__in{max-width:var(--wrap); margin:0 auto; padding:28px 24px 34px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 40px}
.mega__item{display:flex; gap:14px; padding:14px; border-radius:12px; text-decoration:none; transition:background .16s var(--ease)}
.mega__item:hover{background:var(--ground)}
.mega__item b{display:block; font-family:var(--f-head); font-weight:800; font-size:16px; margin-bottom:2px}
.mega__item span{font-size:15px; color:var(--ink-soft); line-height:1.45}

/* ---------- Açılış ---------- */
.hero{padding:76px 0 118px}
.hero .h1{font-size:clamp(2.1rem,5.5vw,5.1rem); letter-spacing:-.03em; line-height:1.04}
.hero .h1 .l{display:block}
.hero__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:60px 56px; align-items:center; margin-top:46px}
.hero__sub{margin:0 0 18px; max-width:none}
/* Dar ekranda `.h1` ve `.h2` alt sınırları birbirine çok yakın (33.6px / 31.2px);
   yan yana gelince hiyerarşi kayboluyordu. Masaüstünde ölçü diğer bant
   başlıklarıyla birebir aynı, yalnız telefonda bir kademe küçülüyor. */
@media (max-width:640px){ .hero__sub{font-size:1.55rem} }
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* halka görseli */
.ring{position:relative; width:100%; max-width:470px; margin-left:auto; aspect-ratio:1}
.ring__glow{position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle at 50% 45%, var(--brand-bg), rgba(255,255,255,0) 68%)}
.ring svg{position:relative; display:block; width:100%; height:100%}
.ring .track{fill:none; stroke:var(--rule); stroke-width:2}
.ring .prog{fill:none; stroke:var(--brand); stroke-width:4; stroke-linecap:round; stroke-dasharray:880; stroke-dashoffset:880; transform:rotate(-90deg); transform-origin:240px 240px}
.js .ring .prog{animation:draw 7s var(--ease) infinite}
@keyframes draw{0%{stroke-dashoffset:880}55%{stroke-dashoffset:440}100%{stroke-dashoffset:440}}
.ring .node{fill:var(--surface); stroke:var(--rule-strong); stroke-width:1.6}
.ring .node-done{fill:var(--ok-bg); stroke:var(--ok); stroke-width:1.6}
.ring .node-late{fill:var(--brand); stroke:var(--brand); stroke-width:2}
.ring .ico{stroke:var(--ink-soft); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}
.ring .ico-done{stroke:var(--ok)}
.ring .halo{fill:none; stroke:var(--brand); stroke-width:2; opacity:0}
.js .ring .halo{animation:pulse 2.6s ease-out infinite}
.js .ring .halo.b{animation-delay:1.3s}
@keyframes pulse{0%{r:26px; opacity:.55}100%{r:56px; opacity:0}}
.ring .cap{font-family:var(--f-mono); font-size:12px; fill:var(--ink-faint); letter-spacing:.06em}
.ring__chip{position:absolute; display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:10px 14px; font-family:var(--f-head); font-weight:700; font-size:13.5px; white-space:nowrap}
.ring__chip i{width:8px;height:8px;border-radius:50%;display:block}
.ring__chip--late{right:-6px; bottom:16%; border-color:var(--brand-soft)}
.ring__chip--late i{background:var(--brand)}
.js .ring__chip--late{animation:chipin 7s var(--ease) infinite}
@keyframes chipin{0%,48%{opacity:0; transform:translateY(6px)}58%,100%{opacity:1; transform:none}}
.ring__chip--ok{left:-6px; top:14%}
.ring__chip--ok i{background:var(--ok)}

/* ---------- Ekran ---------- */
.stage{position:relative}
.stage::before{content:""; position:absolute; inset:22px -18px -18px 22px; background:var(--brand-bg); border-radius:20px; z-index:0}
.screen{position:relative; z-index:1; background:var(--surface); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.screen__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--rule); background:var(--ground)}
.screen__title{font-family:var(--f-head); font-weight:800; font-size:15px}
.stamp{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--rule-strong); border-radius:6px; padding:3px 7px; white-space:nowrap}
.screen__body{padding:20px}
.callout{position:absolute; z-index:2; right:-14px; bottom:-16px; display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff; border-radius:12px; padding:11px 16px; font-family:var(--f-head); font-weight:700; font-size:13.5px; white-space:nowrap; box-shadow:var(--shadow-lift)}
.callout i{width:8px;height:8px;border-radius:50%;background:var(--brand);display:block}
.pill{font-family:var(--f-mono); font-size:11.5px; font-variant-numeric:tabular-nums; padding:4px 9px; border-radius:7px; text-align:center; white-space:nowrap}
.pill--ok{background:var(--ok-bg); color:var(--ok)}
.pill--late{background:var(--brand-bg); color:var(--brand)}
.rowhead,.row{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.85fr) 106px; gap:12px; align-items:center; padding:11px 4px}
.rowhead{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--rule); padding-top:0}
.row + .row{border-top:1px solid var(--rule)}
.row b{font-family:var(--f-head); font-weight:800; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row span{font-size:14px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row span.pill{overflow:visible}

/* ---------- Üç iş ---------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.trio .panel{display:flex; flex-direction:column; gap:18px}
.trio p{font-size:16.5px; color:var(--ink-soft); margin:0}
.trio .num{font-family:var(--f-mono); font-size:12px; color:var(--brand); letter-spacing:.1em}

/* ---------- Nasıl çalışır ---------- */
.steps{display:flex; flex-direction:column}
.step{display:grid; grid-template-columns:66px minmax(0,1fr) minmax(0,1.05fr); gap:28px; align-items:center; padding:36px 0; border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step__no{font-family:var(--f-mono); font-size:15px; color:var(--brand)}
.step__txt h3{margin-bottom:8px}
.step__txt p{font-size:16.5px; color:var(--ink-soft); margin:0}
.step__fig{border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:18px; min-height:98px; display:flex; align-items:center; box-shadow:var(--shadow)}
.mini{display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap}
.chip{font-family:var(--f-head); font-weight:700; font-size:13px; border:1px solid var(--rule); border-radius:10px; padding:8px 12px; background:var(--surface); white-space:nowrap}
.chip--ok{border-color:var(--ok); color:var(--ok); background:var(--ok-bg)}
.chip--late{border-color:var(--brand-soft); color:var(--brand); background:var(--brand-bg)}
.arrow{width:16px;height:10px;flex:0 0 16px;stroke:var(--rule-strong);stroke-width:1.7;fill:none}

/* ---------- Sekmeli gezgin ---------- */
.tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:34px; padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--f-head); font-weight:700; font-size:15.5px; background:var(--surface); border:1px solid var(--rule); border-radius:999px; color:var(--ink-soft); padding:11px 20px; cursor:pointer; white-space:nowrap; transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease)}
.tab:hover{color:var(--ink); border-color:var(--rule-strong)}
.tab[aria-selected="true"]{color:#fff; background:var(--brand); border-color:var(--brand)}
.viewgrid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:52px; align-items:center}
.view__copy h3{margin-bottom:12px}
.view__copy p{font-size:16.5px; color:var(--ink-soft)}
.view{opacity:0; transform:translateY(10px) scale(.995)}
.view[hidden]{display:none}
.view[data-on="true"]{opacity:1; transform:none; transition:opacity .24s var(--ease), transform .24s var(--ease)}

.flowfig{width:100%; height:auto; display:block}
.flowfig .nd{fill:var(--surface); stroke:var(--rule-strong); stroke-width:1.5}
.flowfig .nd-late{fill:var(--brand-bg); stroke:var(--brand); stroke-width:2}
.flowfig .lk{stroke:var(--rule-strong); stroke-width:1.6; fill:none}
.flowfig .tx{font-family:var(--f-head); font-size:13px; font-weight:800; fill:var(--ink)}
.flowfig .tm{font-family:var(--f-mono); font-size:11px; fill:var(--ink-faint)}
.flowfig .tm-late{font-family:var(--f-mono); font-size:11px; fill:var(--brand)}

.gantt{position:relative; --namew:146px; --slax:.72}
.gantt__row{display:grid; grid-template-columns:132px minmax(0,1fr); gap:14px; align-items:center; padding:10px 0}
.gantt__row + .gantt__row{border-top:1px solid var(--rule)}
.gantt__name{font-family:var(--f-head); font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gantt__track{display:flex; gap:3px; height:20px; min-width:0}
.seg{border-radius:5px; background:var(--ok-bg); border:1px solid rgba(0,120,106,.3); min-width:8px}
.seg--late{background:var(--brand-bg); border-color:var(--brand-soft)}
.gantt__sla{position:absolute; top:0; bottom:26px; width:0; border-left:1.6px dashed var(--brand); left:calc(var(--namew) + (100% - var(--namew)) * var(--slax))}
.gantt__slatx{position:absolute; bottom:0; left:calc(var(--namew) + (100% - var(--namew)) * var(--slax)); transform:translateX(-50%); font-family:var(--f-mono); font-size:10.5px; color:var(--brand); white-space:nowrap}
.gantt__foot{height:26px}

.heat{display:grid; grid-template-columns:132px repeat(6,minmax(0,1fr)); gap:6px; align-items:center}
.heat__lbl{font-family:var(--f-head); font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.heat__col{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-faint); text-align:center}
.cell{height:36px; border-radius:8px; border:1px solid var(--rule)}
.legend{display:flex; align-items:center; gap:10px; margin-top:18px; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-faint)}
.legend i{width:28px;height:11px;border-radius:5px;display:block;border:1px solid var(--rule)}

.kanban{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kcol{background:var(--ground); border:1px solid var(--rule); border-radius:13px; padding:12px; display:flex; flex-direction:column; gap:9px}
.kcol h4{font-family:var(--f-head); font-weight:800; font-size:12.5px; margin:0; color:var(--ink-soft); display:flex; justify-content:space-between; gap:6px}
.kcol h4 em{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--ink-faint)}
.kcol--hot{background:var(--brand-bg); border-color:var(--brand-soft)}
.kcard{background:var(--surface); border:1px solid var(--rule); border-radius:11px; padding:11px; font-family:var(--f-head); font-weight:700; font-size:12.5px; line-height:1.3}
.kcard .pill{display:inline-block; margin-top:8px; font-size:10.5px; padding:3px 7px}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:18px}
.kpi{border:1px solid var(--rule); border-radius:13px; padding:13px; background:var(--ground)}
.kpi small{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px; line-height:1.3}
.kpi b{font-family:var(--f-head); font-weight:900; font-size:26px; letter-spacing:-.03em; line-height:1}
.kpi--hot{background:var(--brand-bg); border-color:var(--brand-soft)}
.dashsplit{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
.funnel{display:flex; flex-direction:column; gap:8px}
.funnel__row{display:grid; grid-template-columns:96px minmax(0,1fr) 40px; gap:9px; align-items:center; font-size:12.5px}
.funnel__row span{font-family:var(--f-head); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.funnel__bar{height:17px; border-radius:5px; background:var(--ok-bg); border:1px solid rgba(0,120,106,.28)}
.funnel__row em{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); text-align:right}
.spark{border:1px solid var(--rule); border-radius:13px; padding:13px; background:var(--ground)}
.spark small{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px}

/* ---------- Saat ---------- */
.clockwrap{display:flex; flex-direction:column; align-items:center; gap:38px; background:var(--surface); border:1px solid var(--tint-rule); border-radius:20px; box-shadow:var(--shadow); padding:48px 40px}
.clock{width:100%; max-width:280px; display:block}
.clock .face{fill:var(--ground); stroke:var(--rule); stroke-width:2}
.clock .tick{stroke:var(--rule-strong); stroke-width:2; stroke-linecap:round}
.clock .mark{fill:var(--brand); opacity:.28}
.clock .hand{stroke:var(--brand); stroke-width:4; stroke-linecap:round; transform-origin:120px 120px}
.js .clock .hand{animation:sweep 20s ease-in-out infinite}
@keyframes sweep{
  0%,9%{transform:rotate(0deg)}
  21%,34%{transform:rotate(120deg)}
  43%,56%{transform:rotate(180deg)}
  71%,89%{transform:rotate(300deg)}
  100%{transform:rotate(360deg)}
}
.clock .hub{fill:var(--ink)}
.clockrows{list-style:none; margin:0; padding:0; width:100%; max-width:560px; display:flex; flex-direction:column}
.clockrows li{display:grid; grid-template-columns:82px 1fr; gap:16px; align-items:center; padding:16px 0; opacity:.32}
.clockrows li + li{border-top:1px solid var(--rule)}
.clockrows .ct{font-family:var(--f-mono); font-size:13px; color:var(--brand)}
.clockrows .cw{font-family:var(--f-head); font-weight:800; font-size:17px; display:flex; align-items:center; gap:10px}
.clockrows .cw::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--brand); flex:0 0 9px}
.js .clockrows li:nth-child(1){animation:r1 20s linear infinite}
.js .clockrows li:nth-child(2){animation:r2 20s linear infinite}
.js .clockrows li:nth-child(3){animation:r3 20s linear infinite}
.js .clockrows li:nth-child(4){animation:r4 20s linear infinite}
.js .clock .mark.m1{animation:m1 20s linear infinite}
.js .clock .mark.m2{animation:m2 20s linear infinite}
.js .clock .mark.m3{animation:m3 20s linear infinite}
.js .clock .mark.m4{animation:m4 20s linear infinite}
@keyframes r1{0%{opacity:.32; transform:translateY(5px)}4%,100%{opacity:1; transform:none}}
@keyframes r2{0%,19%{opacity:.32; transform:translateY(5px)}24%,100%{opacity:1; transform:none}}
@keyframes r3{0%,41%{opacity:.32; transform:translateY(5px)}46%,100%{opacity:1; transform:none}}
@keyframes r4{0%,69%{opacity:.32; transform:translateY(5px)}74%,100%{opacity:1; transform:none}}
@keyframes m1{0%{opacity:.28}4%,100%{opacity:1}}
@keyframes m2{0%,19%{opacity:.28}24%,100%{opacity:1}}
@keyframes m3{0%,41%{opacity:.28}46%,100%{opacity:1}}
@keyframes m4{0%,69%{opacity:.28}74%,100%{opacity:1}}

/* ---------- Uyum ---------- */
.adapt{background:var(--surface); border:1px solid var(--rule); border-radius:20px; box-shadow:var(--shadow); padding:38px; text-align:center}
.adapt__ctx{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 24px}
.adapt__ctx b{color:var(--brand); font-weight:500}
.adapt__flow{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; min-height:52px; transition:opacity .3s var(--ease), transform .3s var(--ease)}
.adapt__flow.out{opacity:0; transform:translateY(8px)}
.node{font-family:var(--f-head); font-weight:700; font-size:14.5px; border:1px solid var(--rule); background:var(--ground); border-radius:12px; padding:13px 17px; white-space:nowrap}
.adapt__note{margin:28px 0 0; padding-top:24px; border-top:1px solid var(--rule); font-size:16px; color:var(--ink-soft)}
.tags{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:22px}
.tags span{font-family:var(--f-head); font-weight:700; font-size:13.5px; color:var(--ink-soft); background:var(--ground); border:1px solid var(--rule); border-radius:999px; padding:8px 15px}
.tags span:last-child{color:var(--brand); background:var(--brand-bg); border-color:var(--brand-soft)}

/* ---------- Kapanış ---------- */
.closebox{background:var(--tint); border:1px solid var(--tint-rule); border-radius:24px; padding:84px 40px; text-align:center}
.center{display:flex; flex-direction:column; align-items:center; gap:22px}
.closebox .h2{font-size:clamp(2rem,4.2vw,3.2rem); max-width:30ch; margin-inline:auto}
.closebox .lead{max-width:52ch; margin-inline:auto}
.closebox__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.btn svg{width:18px; height:18px; flex:0 0 18px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Alt bilgi ---------- */
.foot{background:var(--surface); border-top:1px solid var(--rule); padding:72px 0 40px}
.foot__cols{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px 32px}
.foot h3{font-family:var(--f-head); font-weight:800; font-size:14px; margin:0 0 16px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.foot a{color:var(--ink-soft); text-decoration:none; font-size:15.5px}
.foot a:hover{color:var(--brand)}
.foot__bar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:56px; padding-top:24px; border-top:1px solid var(--rule); font-size:14.5px; color:var(--ink-soft)}
.lang{display:flex; border:1px solid var(--rule-strong); border-radius:10px; overflow:hidden; background:var(--surface)}
.lang a{font-family:var(--f-mono); font-size:12px; padding:7px 12px; text-decoration:none; color:var(--ink-soft); transition:color .16s var(--ease), background .16s var(--ease)}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="page"]{background:var(--brand-bg); color:var(--brand-hover)} /* 12px metinde --brand 3,8:1 kalıyordu; koyu ton 5:1 */

/* ---------- Giriş hareketi ---------- */
.js .rv{opacity:0; transform:translateY(12px)}
.js .rv.in{opacity:1; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease)}

/* ---------- Duyarlı ---------- */
@media (max-width:1080px){
  .hero__grid,.viewgrid{grid-template-columns:1fr; gap:36px}
  .ring{margin:0 auto}
  .clock{max-width:240px}
  .step{grid-template-columns:52px minmax(0,1fr); gap:18px}
  .step__fig{grid-column:1 / -1}
  .stage::before{inset:16px -12px -12px 16px}
}
@media (max-width:900px){
  .band{padding:88px 0}
  .trio{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr; gap:36px 24px}
  .nav__links{display:none}
  .burger{display:block}
  .nav__end .btn{display:none}
  .mega__in{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashsplit{grid-template-columns:1fr}
  .escal{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .band{padding:72px 0}
  .hero{padding:48px 0 76px}
  .stage::before{display:none}
  .rowhead,.row{grid-template-columns:minmax(0,1fr) 104px}
  .rowhead span:nth-child(2),.row span:nth-child(2),
  .rowhead span:nth-child(3),.row span:nth-child(3){display:none}
  .heat{grid-template-columns:88px repeat(6,minmax(0,1fr)); gap:4px}
  .heat__lbl{font-size:11.5px}
  .cell{height:28px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gantt{--namew:106px}
  .gantt__row{grid-template-columns:92px minmax(0,1fr)}
  .foot__cols{grid-template-columns:1fr}
  .screen__body{padding:15px}
  .panel,.adapt,.clockwrap{padding:24px}
  .closebox{padding:54px 22px}
  .callout{right:auto; left:0; bottom:-18px; font-size:12.5px; padding:9px 13px}
}
/* ---------- Yayın: uygulamaya giriş bağlantısı ---------- */
/* Menüdeki düğmeler 900px altında tamamen gizleniyor (.nav__end .btn).
   Giriş bunun dışında tutuldu: müşteri telefondan da uygulamaya girebilmeli. */
@media (max-width:900px){ .nav__end .btn.nav__login{display:inline-flex} }
@media (max-width:380px){ .nav__end .btn.nav__login{padding:11px 14px} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important; animation:none !important}
  .js .rv{opacity:1 !important; transform:none !important}
  .ring .prog{stroke-dashoffset:440}
  .clockrows li{opacity:1; transform:none}
  .js .ic-line{stroke-dashoffset:0}
}