/* ---------- 03 How it works ----------
   The heading and the list of steps stay in place on the left; the steps scroll normally on the right, each with its
   product pieces at full size on dark panels (1-3 per step, a different kind each step). The step whose block crosses
   the middle of the window lights its item in the list (js/how.js). The tablet appears only in the hero. */
.how{background:var(--cream);color:var(--text);padding:clamp(96px,14vh,128px) 24px 64px}
.how :focus-visible{outline-color:var(--ink)}
.how-inner{max-width:1200px;margin:0 auto}
.how-title{margin:0;max-width:14em;font-size:clamp(34px,3.9vw,56px);line-height:1.05;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.how-n{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(20,15,21,.18);font-size:13px;font-weight:600;letter-spacing:0;transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease)}

.how-grid{display:grid;grid-template-columns:clamp(260px,26vw,340px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}

/* left: heading + the list of steps, sticky under the nav */
.how-left{position:sticky;top:calc(96px + 24px)}
.how-list{position:relative;list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.how-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(20,15,21,.08)}
.how-item{position:relative;width:100%;display:flex;align-items:center;gap:14px;padding:9px 0 9px 22px;border:0;background:none;
  font:600 22px/1.2 var(--font);letter-spacing:-.015em;color:var(--text-muted);text-align:left;cursor:pointer;transition:color .24s var(--ease)}
.how-item::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--ink);transform:scaleY(0);transition:transform .48s var(--ease-expo)}
.how-item:hover,.how-item.is-active{color:var(--text)}
.how-item.is-active::before{transform:none}
.how-item.is-active .how-n,.how-name .how-n{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.how-item:focus-visible{outline-offset:2px;border-radius:8px}

/* right: one block per step; the step whose block crosses the middle of the window is active */
.how-right{padding-bottom:16vh}
.how-step{min-height:72vh;padding:56px 0;display:flex;flex-direction:column;justify-content:center;gap:28px}
.how-step+.how-step{border-top:1px solid rgba(20,15,21,.08)}
.how-name{display:none;margin:0;align-items:center;gap:12px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.how-line{margin:0;max-width:24em;font-size:clamp(22px,1.9vw,28px);line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.how-sub{margin:-14px 0 0;max-width:36em;font-size:17px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}

/* visuals: product pieces at full size on dark panels, one to three per step, a different kind each step */
.how-visuals{display:grid;gap:16px;align-items:start}
.how-two{grid-template-columns:1fr 1fr}
.how-wide,.how-strip{grid-column:1/-1}
.how-panel{padding:18px 20px;border-radius:20px;background:var(--ink-2);border:1px solid var(--ink-3);color:var(--cream);font-family:var(--font);
  box-shadow:0 36px 60px -44px rgba(20,15,21,.6)}
.how-narrow{max-width:560px}
.how-panel h4{margin:0 0 8px;font-size:14px;font-weight:600}
.how-panel .hot{color:var(--red-on-dark)}
.how-panel .view-badge.hot{color:var(--red-on-tint)}
.how-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.how-head>div{display:flex;flex-direction:column;gap:3px}
.how-head b{font-size:16px;font-weight:600}.how-head div span{font-size:12px;color:var(--text-inv-muted)}
.how-panel .src-list{border:0;padding:0}
.how-panel .tiles{grid-auto-rows:auto}
.how-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--text-inv-muted)}
.how .how-strip span{background:rgba(20,15,21,.06);color:var(--text)}
.how-step>.how-strip{margin-top:-12px} /* a sibling of the panels (so phones can swipe the panels alone): 16 px under them, like the panel gap */

/* ---------- product pieces (dark panels) ---------- */
/* 1 connect */
.src-list{display:flex;flex-direction:column;padding:4px 16px;border:1px solid var(--line-dark-soft);border-radius:14px}
.src-row{height:58px;display:flex;align-items:center;gap:12px;border-top:1px solid rgba(251,247,242,.06)}
.src-row:first-child{border-top:0}
.src-row .channel-mark{width:32px;height:32px;flex:none;border-radius:9px;font-size:12px}
.src-row .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.src-row .m b{font-size:14px;font-weight:600}.src-row .m span{font-size:12px;color:var(--text-inv-muted)}
.ok{height:22px;padding:0 9px;display:inline-flex;align-items:center;gap:6px;flex:none;border-radius:999px;background:rgba(131,208,160,.10);color:var(--pos);font-size:12px;font-weight:600;white-space:nowrap}
.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* 2 see: one KPI definition, applied the same way in every channel */
.f-row{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(251,247,242,.06);font-size:13px}
.f-row .k{font-size:12px;color:var(--text-inv-muted)}
.f-row>span:last-child{font-weight:600;text-align:right}
.s-row{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(251,247,242,.06);font-size:12px;color:var(--text-inv-muted);font-variant-numeric:tabular-nums}
.s-row>span{display:flex;flex-direction:column;gap:2px}
.s-row>span b{font-size:13px;font-weight:600;color:var(--cream)}
.s-row>b{font-size:15px;font-weight:600;color:var(--cream)}
.s-total{border-top-color:rgba(251,247,242,.16)}
.s-target{display:flex;align-items:center;justify-content:space-between;padding-top:4px;font-size:12px;color:var(--text-inv-muted)}
.watch-strip{display:flex;flex-wrap:wrap;gap:8px}
.watch-strip span{height:26px;padding:0 10px;display:flex;align-items:center;border-radius:999px;background:rgba(251,247,242,.07);font-size:12px;font-weight:500;color:var(--text-inv-2)}

/* 3 detect: four watched KPIs, each with its own band; past excursions that came back are muted dots */
.tiles{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px}
.tile{padding:13px 14px;border:1px solid var(--line-dark-soft);border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;transition:border-color .3s var(--ease) .6s}
.is-alert .tile.t-hot{border-color:rgba(232,96,108,.38)}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.t-head>div{display:flex;flex-direction:column;gap:2px}
.t-head b{font-size:13px;font-weight:600}.t-head div span{font-size:12px;color:var(--text-inv-muted)}
.chart.mini{width:100%;height:auto}
.chart.mini .line,.chart.mini .jump{stroke-width:1.6}
.chart.mini .past{fill:rgba(251,247,242,.45)}
.chart.mini .now{fill:var(--cream)}
.t-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.t-foot b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.t-foot span{font-size:12px;color:var(--text-inv-muted);text-align:right}
.st-hot{height:22px;padding:0 9px;display:flex;align-items:center;flex:none;border-radius:999px;background:rgba(232,96,108,.16);color:var(--red-on-tint);font-size:12px;font-weight:600}

/* 4 understand: the evidence behind the hero's alert card (auction insights) */
.sh-row{padding:9px 0;border-top:1px solid rgba(251,247,242,.06);display:flex;flex-direction:column;gap:7px}
.sh-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.sh-top b{font-weight:600}
.sh-top span{font-size:12px;font-variant-numeric:tabular-nums}
.sh-top s{color:var(--text-inv-muted)}.sh-top em{font-style:normal;font-weight:600}
.sh-bar{position:relative;height:6px;border-radius:99px;background:rgba(251,247,242,.06);overflow:hidden}
.sh-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;background:rgba(251,247,242,.72)}
.sh-bar i.was{background:rgba(251,247,242,.16)}
.q-row{min-height:38px;display:grid;grid-template-columns:1.6fr .7fr .7fr;gap:8px;align-items:center;border-top:1px solid rgba(251,247,242,.06);font-size:13px;font-variant-numeric:tabular-nums}
.q-row>span{text-align:right}
.q-head>span:first-child{text-align:left}
.q-head>span:not(:first-child){display:flex;justify-content:flex-end;white-space:nowrap} /* a longer label (TR "Geçen hafta") stays on one line and grows to the left */
.q-row b,.q-row .hot{font-weight:600}
.q-head{min-height:28px;border-top:0;font-size:12px;color:var(--text-inv-muted)}
.q-span{grid-column:span 2;font-size:12px;color:var(--text-inv-muted)}
.q-note{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text-inv-2)}

/* 5 act */
.a-row{padding:8px 0;border-top:1px solid rgba(251,247,242,.06);display:flex;align-items:flex-start;gap:10px}
.a-row .avatar{flex:none}
.a-row .avatar.ece{background:var(--ink-4)}
.a-row .avatar.sys{background:rgba(251,247,242,.08)}
.a-row b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.a-row div span{display:block;margin-top:2px;font-size:12px;color:var(--text-inv-muted)}
.track-st{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;color:var(--text-inv-muted)}
.mo-row{min-height:32px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;align-items:center;border-top:1px solid rgba(251,247,242,.06);font-size:12px}
.mo-row b{font-weight:600}.mo-row span:not(.ok){color:var(--text-inv-muted)}
.month{gap:4px;padding-bottom:8px}

/* touch: a tapped step must not keep its hover colour once another step is the current one */
@media (hover: none){
  .how-item:hover{color:var(--text-muted)}
  .how-item.is-active{color:var(--text)}
}
/* below 960 px: no sticky column; each step shows its name above its line */
@media (max-width: 959px){
  .how-grid{display:block}
  .how-left{position:static}
  .how-step{min-height:0;padding:40px 0 0;gap:16px}
  .how-step+.how-step{border-top:0}
  .how-name{display:flex}
  .how-sub{margin-top:-6px}
  .how-line{font-size:17px;font-weight:400;line-height:1.55;color:var(--text-muted)}
  .how-two{grid-template-columns:1fr}
  .how-panel{padding:16px;border-radius:22px}
  .how-panel .tiles{gap:8px}
  .how-panel .tile{padding:10px 11px}
  .how-right{padding-bottom:0}
}
/* small tablets: no step list, and each step shows its main piece only */
@media (min-width: 720px) and (max-width: 959px){
  .how-list,.how-x{display:none}
  .how-panel .t-foot span,.how-panel .t-head .st,.how-panel .t-head .st-hot{display:none}
}
/* phones: the step list becomes a strip stuck under the nav (the same five steps in the same order; js/how.js marks the
   current one and jumps on tap), and every piece of a step sits in a swipe row with the next one peeking, so the content
   equals desktop */
@media (max-width: 719px){
  .how{padding:80px 20px 0}
  .how-left{display:contents}
  .how-title{position:relative;z-index:6;font-size:clamp(28px,7.7vw,32px)}
  .how-name{font-size:22px}
  /* the strip's cream band reaches up behind the nav, so the panels leave under one solid edge. In the flow that band lies
     over the end of the heading above it, which is why the heading paints on top (z-index) */
  .how-list{position:sticky;top:0;z-index:5;flex-direction:row;gap:20px;margin:-48px -20px 0;padding:calc(72px + env(safe-area-inset-top,0px)) 20px 0;
    background:var(--cream);border-bottom:1px solid rgba(20,15,21,.1);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .how-list::-webkit-scrollbar,.how-visuals::-webkit-scrollbar{display:none}
  .how-list::before{display:none}
  .how-list li{flex:none}
  .how-item{width:auto;height:46px;padding:0 2px;gap:8px;font-size:15px;white-space:nowrap}
  .how-item::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0)}
  .how-item .how-n{width:22px;height:22px;font-size:12px}
  .how-step{padding-top:48px}
  /* swipe row: bleeds to the screen edges; the bottom padding leaves room for the panels' shadow inside the scroller */
  .how-visuals{display:flex;gap:12px;align-items:stretch;margin:0 -20px -20px;padding:0 20px 28px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none}
  .how-visuals>.how-panel{flex:0 0 86%;max-width:none;scroll-snap-align:start;box-shadow:0 22px 30px -26px rgba(20,15,21,.55)}
  .how-visuals>.how-panel:only-child{flex-basis:100%}
  .how-step>.how-strip{margin-top:0}
  .mo-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 0}
  .mo-row span:not(.ok){grid-column:1;grid-row:2}
  .mo-row .ok{grid-column:2;grid-row:1/3}
  /* Detect: four tiles at a glance, each with everything it shows on desktop (status under the chart, range on its own line) */
  .how-panel .tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name name" "chart chart" "val st" "range range";grid-template-rows:1fr auto auto auto;gap:8px 6px;align-items:center;align-content:space-between}
  .how-panel .t-head,.how-panel .t-foot{display:contents}
  .how-panel .t-head>div{grid-area:name;align-self:start}
  .how-panel .tile .chart{grid-area:chart}
  .how-panel .t-foot b{grid-area:val}
  .how-panel .t-head .st,.how-panel .t-head .st-hot{grid-area:st;padding:0 8px}
  .how-panel .t-foot span{grid-area:range;text-align:left;text-wrap:balance}
  /* charts draw on entering (js/reveal.js: .m-motion on <html>, .is-in on each chart): the line first, then today's point.
     The red jump and its dot still need the section's alert state; here they also wait for the line (0.85 s). */
  .m-motion .how .chart .line{stroke-dasharray:var(--len);transition:stroke-dashoffset .9s var(--ease-soft)}
  .m-motion .how .chart:not(.is-in) .line{stroke-dashoffset:var(--len)}
  .m-motion .how .chart .now,.m-motion .how .chart .past{transition:opacity .2s var(--ease) .85s}
  .m-motion .how .chart .past{transition-delay:.5s}
  .m-motion .how .chart:not(.is-in) .now,.m-motion .how .chart:not(.is-in) .past,.m-motion .how .chart .end-dot{opacity:0}
  .m-motion .how .chart .jump{transition-delay:.85s}
  .m-motion .how .chart:not(.is-in) .jump{stroke-dashoffset:var(--len,200)}
  .m-motion .how .chart .dot,.m-motion .how .chart .halo{transition-delay:1.45s}
  .m-motion .how .chart:not(.is-in) .dot,.m-motion .how .chart:not(.is-in) .halo{transform:scale(0);animation:none}
  .m-motion .how.is-alert .chart.is-in .halo{animation-delay:1.75s}
  /* Understand: each share bar moves from last week's width (--from, set by js/reveal.js) to today's */
  .m-motion .sh-bar i:not(.was){transform-origin:0 50%;transition:transform .9s var(--ease-soft) .2s}
  .m-motion .sh-bar:not(.is-in) i:not(.was){transform:scaleX(var(--from,1))}
}

/* below the hero, product text is at least 12 px: shared product classes sized for the tablet get one step up here */
.how .st,.how .view-badge,.how .num span,.how .avatar,.how .w-row .m span,.how .stat-card .k,.how .stat-card .d{font-size:12px}