:root{--ink:#071d4b;--green:#3d7c59;--muted:#708097;--line:#dfe7e3;--soft:#f4f8f5}.how-page{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff 64%,#f8faf9 100%)}.ml-header nav .active-page{color:var(--green);position:relative}.ml-header nav .active-page:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--green);border-radius:3px}.how-hero{display:grid;grid-template-columns:35% 62%;gap:3%;align-items:center;min-height:690px;padding:58px 5vw 36px;background:radial-gradient(circle at 20% 57%,rgba(71,132,92,.08),transparent 28%)}.how-copy{max-width:590px}.eyebrow{font:600 12px Manrope;letter-spacing:.28em;color:var(--green)}.how-copy h1{font:200 clamp(50px,4vw,76px)/1.12 Manrope;letter-spacing:-.05em;color:var(--ink);margin:16px 0 22px}.how-copy h1 span{color:#5f8f73}.how-copy p{font:400 17px/1.75 DM Sans;color:#66758b;max-width:560px}.storyboard{display:grid;grid-template-columns:1.1fr 50px .88fr 50px 1fr 50px .86fr;align-items:stretch;min-height:420px;border:1px solid #e0e7e3;border-radius:22px;background:#fff;box-shadow:0 25px 70px rgba(25,51,67,.08);padding:22px}.story-step{padding:0 8px;opacity:.46;filter:saturate(.55);transition:opacity .45s ease,filter .45s ease,transform .45s ease}.story-step.active{opacity:1;filter:none;transform:translateY(-3px)}.story-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;min-height:55px}.story-heading>span{width:32px;height:32px;border-radius:50%;background:#edf5ef;color:#47775a;display:grid;place-items:center;font:500 15px Manrope}.story-heading strong,.story-heading small{display:block}.story-heading strong{font:500 14px Manrope;color:var(--ink)}.story-heading small{font:400 10px DM Sans;color:#8a96a4;margin-top:4px}.signal-arrow{display:flex;align-items:center;justify-content:center;position:relative;color:#628a70}.signal-arrow span{position:absolute;width:70%;height:1px;background:#cfdcd3}.signal-arrow i{font-style:normal;background:#fff;padding:0 5px;position:relative;font-size:24px;animation:arrowPulse 1.8s ease-in-out infinite}@keyframes arrowPulse{0%,100%{transform:translateX(-3px);opacity:.45}50%{transform:translateX(4px);opacity:1}}.phone-shell{border:1px solid #dfe6e3;border-radius:22px;background:#fbfcfc;padding:12px;height:300px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 5px #f7f9f8}.phone-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#5f6f80;border-bottom:1px solid #edf1ef;padding:2px 4px 10px}.phone-top i{width:28px;height:5px;border-radius:6px;background:#d5dcda}.phone-tabs{display:flex;gap:5px;padding:10px 0}.phone-tabs span{padding:5px 7px;border-radius:9px;background:#f4f6f5;font-size:8px;color:#718091}.phone-tabs .active{background:#e8f1ea;color:#447258}.menu-item{display:grid;grid-template-columns:46px 1fr 24px;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid #eef1f0;position:relative}.menu-item b,.menu-item small{display:block}.menu-item b{font:500 10px Manrope;color:#203558}.menu-item small{font-size:9px;color:#7e8998;margin-top:2px}.menu-item button{border:1px solid #d7e1dc;border-radius:50%;width:23px;height:23px;background:#fff;color:#4d7a5d}.food{width:42px;height:38px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#ede4d8,#c9a87e);font-size:20px}.food.cake{background:linear-gradient(145deg,#f0d9d2,#b87e67)}.food.toast{background:linear-gradient(145deg,#d9c9a1,#7fa06e)}.highlighted{background:linear-gradient(90deg,rgba(67,127,88,.08),transparent);border-radius:11px}.tap-ring{position:absolute;right:19px;top:112px;width:28px;height:28px;border:1px solid rgba(58,123,84,.65);border-radius:50%;animation:tap 2.4s infinite}@keyframes tap{0%{transform:scale(.4);opacity:0}35%{opacity:1}100%{transform:scale(1.6);opacity:0}}.signal-network{height:300px;position:relative}.signal-network svg{position:absolute;inset:22px 0 0;width:100%;height:250px}.signal-network line{stroke:#8fb19c;stroke-width:1.4;stroke-dasharray:5 5}.node{position:absolute;width:45px;height:45px;border:1px solid #d7e2dc;border-radius:50%;background:#fff;display:grid;place-items:center;color:#4b7e5d;z-index:2}.node.center{width:62px;height:62px;left:50%;top:50%;transform:translate(-50%,-50%);background:#5c896c;color:#fff;box-shadow:0 12px 25px rgba(67,115,82,.22)}.n1{left:4%;top:12%}.n2{left:42%;top:0}.n3{right:2%;top:13%}.n4{left:8%;bottom:8%}.n5{right:5%;bottom:9%}.pulse{position:absolute;width:8px;height:8px;border-radius:50%;background:#4b805e;box-shadow:0 0 0 0 rgba(74,130,93,.4);animation:signal 2.4s infinite}.p1{left:31%;top:35%}.p2{left:62%;top:30%;animation-delay:.8s}.p3{left:64%;top:68%;animation-delay:1.5s}@keyframes signal{0%{opacity:0;box-shadow:0 0 0 0 rgba(74,130,93,.3)}30%{opacity:1}100%{opacity:0;box-shadow:0 0 0 11px rgba(74,130,93,0)}}.analysis-card{border:1px solid #e1e8e4;border-radius:15px;padding:15px;height:300px;background:#fbfcfc}.chart-legend{display:flex;gap:14px;font-size:9px;color:#7f8b99}.chart-legend i{display:inline-block;width:14px;height:2px;background:#5d956d;margin-right:4px}.chart-legend span:last-child i{background:#9db1d0}.line-chart{width:100%;height:115px;margin:8px 0}.chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600}.story-step.active .chart-line{animation:draw 2s ease forwards}.chart-line.primary{stroke:#5c966d}.chart-line.secondary{stroke:#9eb1d0;animation-delay:.25s}@keyframes draw{to{stroke-dashoffset:0}}.bar-title{font:500 11px Manrope;color:#5d6d7e;margin-bottom:10px}.metric-bar{display:grid;grid-template-columns:12px 1fr;gap:8px;align-items:center;margin:11px 0}.metric-bar span{height:3px;background:#6c9b77}.metric-bar i{height:8px;background:#e8eeeb;border-radius:10px;position:relative;overflow:hidden}.metric-bar i:before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:#659273;border-radius:10px}.story-step.active .metric-bar i:before{animation:barGrow 1.2s ease forwards;width:var(--w)}@keyframes barGrow{from{width:0}}.insight-card{height:300px;border:1px solid #dfe8e2;border-radius:16px;background:linear-gradient(145deg,#f5faf6,#edf4ef);padding:22px;display:flex;flex-direction:column}.insight-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e0eee4;color:#4a805d;font-size:22px;margin-bottom:18px}.insight-card small{font-size:9px;letter-spacing:.16em;color:#7b8b82}.insight-card h3{font:500 20px/1.25 Manrope;color:var(--ink);margin:11px 0}.insight-card p{font:400 11px/1.6 DM Sans;color:#718092}.insight-card button{margin-top:auto;border:1px solid #cbdad1;background:#fff;border-radius:8px;padding:10px 12px;color:#244267;font:500 10px Manrope;display:flex;justify-content:space-between}.step-strip{margin:6px 4.5vw 48px;border:1px solid #e0e7e3;border-radius:16px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff}.step-strip button{border:0;border-right:1px solid #e8ecea;background:#fff;padding:20px;display:grid;grid-template-columns:auto 52px 1fr;gap:12px;text-align:left;cursor:pointer;transition:background .25s ease,transform .25s ease}.step-strip button:last-child{border-right:0}.step-strip button:hover,.step-strip button.active{background:#f5f9f6}.step-strip button:hover{transform:translateY(-3px)}.step-strip>button>span{font:300 28px Manrope;color:#6f879f}.step-strip i{width:46px;height:46px;border-radius:50%;background:#edf5ef;color:#4d7e5f;display:grid;place-items:center;font-style:normal;font-size:20px}.step-strip strong,.step-strip small{display:block}.step-strip strong{font:500 14px Manrope;color:#18345a}.step-strip small{font:400 11px/1.45 DM Sans;color:#758397;margin-top:5px}.data-section,.screen-section{padding:20px 4.5vw 0}.data-section h2,.screen-section h2{font:400 20px Manrope;color:#18345a;margin:0 0 14px}.data-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.data-grid article{border:1px solid #e1e7e4;border-radius:13px;padding:17px;display:flex;gap:13px;align-items:flex-start;background:#fff}.data-grid span{font-size:26px;color:#4f805f}.data-grid h3{font:500 12px Manrope;margin:0 0 5px;color:#244267}.data-grid p{font:400 10px/1.45 DM Sans;color:#7b8898;margin:0}.screen-section{padding-top:36px;padding-bottom:40px}.screen-grid{display:grid;grid-template-columns:1.25fr .75fr 1.05fr;gap:16px}.screen-grid>article{border:1px solid #e0e7e3;border-radius:16px;background:#fff;padding:18px}.screen-grid h3{font:500 14px Manrope;margin:0 0 14px;color:#244267}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi-row>div{border:1px solid #e6ebe8;border-radius:11px;padding:12px}.kpi-row small,.kpi-row strong,.kpi-row span{display:block}.kpi-row small{font-size:8px;color:#8490a0}.kpi-row strong{font:500 18px Manrope;color:#17335b;margin:10px 0}.kpi-row span{font-size:9px;color:#4c8c60}.kpi-row .down{color:#d15a5a}.mini-insight>div{display:flex;gap:12px;padding:17px;border-radius:13px;background:linear-gradient(145deg,#f4f8f5,#ebf3ed)}.mini-insight span{font-size:26px;color:#4a805d}.mini-insight p{font:400 11px/1.55 DM Sans;color:#66758a;margin:0}.funnel-demo>div{display:grid;grid-template-columns:repeat(4,1fr)}.funnel-demo span{padding:16px 10px;background:#f0f5f1;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%,10% 50%);font:500 14px Manrope;color:#17345a}.funnel-demo span:first-child{clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)}.funnel-demo span:last-child{clip-path:none;background:#fff;border:1px solid #e3e9e5;border-radius:10px}.funnel-demo small{display:block;font:400 8px DM Sans;color:#7d8a99;margin-top:6px}.panel-note{margin:25px 4.5vw 60px;text-align:center;color:#96a0aa;font:400 11px/1.6 DM Sans}.panel-note a{color:#718a7a;text-decoration:none}.lift-link{transition:transform .2s ease,box-shadow .2s ease}.lift-link:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(15,42,66,.13)}a{text-decoration:none}@media(max-width:1250px){.how-hero{grid-template-columns:1fr;padding-top:40px}.how-copy{max-width:760px}.storyboard{margin-top:15px}.data-grid{grid-template-columns:repeat(3,1fr)}.screen-grid{grid-template-columns:1fr}.storyboard{grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr}}@media(max-width:850px){.storyboard{grid-template-columns:1fr;gap:18px}.signal-arrow{height:34px;transform:rotate(90deg)}.story-step{opacity:1;filter:none}.step-strip{grid-template-columns:1fr 1fr}.step-strip button:nth-child(2){border-right:0}.data-grid{grid-template-columns:1fr 1fr}.kpi-row{grid-template-columns:1fr 1fr}}@media(max-width:600px){.how-hero{padding:36px 18px}.how-copy h1{font-size:44px}.storyboard{padding:15px}.step-strip{margin-inline:18px;grid-template-columns:1fr}.step-strip button{border-right:0;border-bottom:1px solid #e7ece9}.data-section,.screen-section{padding-inline:18px}.data-grid{grid-template-columns:1fr}.kpi-row{grid-template-columns:1fr}.funnel-demo>div{grid-template-columns:1fr}.funnel-demo span,.funnel-demo span:first-child{clip-path:none;border-radius:8px;margin-bottom:6px}.panel-note{margin-inline:18px}}

/* Premium storyboard revision — four-column product narrative */
.premium-board{
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr);
  min-height:500px;
  padding:0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 65px rgba(19,42,60,.075);
}
.premium-board .story-step{
  padding:28px 22px 24px;
  border-right:1px solid #e7ece9;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.premium-board .story-step:last-child{border-right:0}
.premium-heading{min-height:108px;margin:0 0 8px;gap:12px}
.premium-heading>span{width:34px;height:34px;flex:0 0 34px;font-size:16px}
.premium-heading strong{font-size:13px;line-height:1.35}
.premium-heading small{font-size:10px;line-height:1.55;margin-top:10px;color:#7c8999}
.visual-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:320px}
.flow-arrow{display:flex;align-items:center;justify-content:center;position:relative;color:#558363;background:#fff}
.flow-arrow span{position:absolute;width:70%;height:1px;background:#d6e1da}
.flow-arrow i{position:relative;background:#fff;padding:0 7px;font-style:normal;font-size:24px;animation:arrowPulse 1.8s ease-in-out infinite}
.premium-phone{width:152px;height:302px;border-radius:24px;padding:13px 10px 10px;box-shadow:0 12px 24px rgba(29,49,61,.07);background:#fff}
.phone-notch{width:54px;height:6px;border-radius:0 0 6px 6px;background:#eef2f0;margin:-13px auto 9px}
.premium-phone .phone-top{padding:2px 2px 9px;font-size:9px}
.premium-phone .phone-tabs{gap:4px;white-space:nowrap;overflow:hidden}
.premium-phone .phone-tabs span{font-size:6.5px;padding:4px 5px}
.premium-phone .menu-item{grid-template-columns:34px 1fr 20px;gap:7px;padding:7px 2px}
.premium-phone .menu-item b{font-size:8px}.premium-phone .menu-item small{font-size:7px}.premium-phone .menu-item button{width:19px;height:19px;font-size:10px}
.image-placeholder{width:32px;height:29px;border-radius:7px;background:linear-gradient(135deg,#eef1ef,#d8dedb);border:1px solid #e0e5e2}
.premium-network{width:210px;height:280px}.premium-network svg{height:220px;top:30px}.premium-network .node{width:38px;height:38px;background:#fff}.premium-network .node.center{width:56px;height:56px;background:#5c896c}.premium-network .node.center span{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.9)}
.premium-analysis{width:210px;height:280px;padding:13px;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(35,58,70,.04)}
.premium-analysis .line-chart{height:104px}.premium-analysis .bar-title{margin-top:6px}
.premium-insight{width:190px;height:280px;padding:18px;border-radius:13px;background:linear-gradient(145deg,#f5f8f6,#eef3ef)}
.empty-icon-slot{width:40px;height:40px;border-radius:50%;border:1px dashed #ccd8d1;background:#f8faf9;margin-bottom:18px}
.premium-insight p{font:500 14px/1.55 Manrope;color:#314b6c;margin:16px 0 0}
.premium-insight button{margin-top:auto}
@media(max-width:1250px){.premium-board{grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr}.premium-board .story-step{padding:22px 14px}.premium-heading{min-height:118px}.premium-phone{width:140px}.premium-analysis{width:190px}.premium-insight{width:170px}}
@media(max-width:850px){.premium-board{grid-template-columns:1fr;gap:0}.premium-board .story-step{border-right:0;border-bottom:1px solid #e7ece9;opacity:1;filter:none}.flow-arrow{height:40px;transform:rotate(90deg)}}

/* Final layout refinement */
#dot-animation{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.72}
.ml-header,.how-page{position:relative;z-index:1}
.how-page{background:transparent}
.how-hero{background:rgba(255,255,255,.78)}
.ml-header{background:rgba(255,255,255,.88);backdrop-filter:blur(14px)}
.ml-header nav a:not(.pilot-button){transition:color .2s ease}
.ml-header nav a:not(.pilot-button):hover{color:var(--green)}
.ml-header nav .pilot-button{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important;box-shadow:0 10px 24px rgba(61,124,89,.16)}
.ml-header nav .pilot-button:hover{background:#326d4d!important;color:#fff!important;transform:translateY(-3px)}
.ml-actions{grid-template-columns:auto!important;width:max-content}
.moved-note{margin:32px auto 28px;max-width:760px;padding:0 24px}
.data-section{padding-top:0}
.data-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.data-grid article{min-height:122px;padding:24px 22px;border-radius:17px;align-items:center;box-shadow:0 10px 28px rgba(23,51,75,.035);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.data-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(23,51,75,.08);border-color:#cfdbd4}
.data-grid span{font-size:32px;min-width:38px}
.data-grid h3{font-size:14px;margin-bottom:7px}
.data-grid p{font-size:11px;line-height:1.55}
.screen-section{padding-top:48px;padding-bottom:70px}
.screen-grid{grid-template-columns:1.15fr .85fr;gap:22px}
.screen-grid>article{min-height:250px;padding:26px;border-radius:20px;box-shadow:0 12px 32px rgba(23,51,75,.04)}
.screen-grid h3{font-size:16px;margin-bottom:22px}
.kpi-row{gap:14px;height:170px}
.kpi-row>div{padding:18px 16px;border-radius:14px;display:flex;flex-direction:column;justify-content:center}
.kpi-row small{font-size:9px}.kpi-row strong{font-size:22px}.kpi-row span{font-size:10px}
.funnel-demo>div{height:170px;align-items:stretch}
.funnel-demo span{display:flex;flex-direction:column;justify-content:center;padding:18px 14px;font-size:16px}
.funnel-demo small{font-size:9px;margin-top:9px}
@media(max-width:1000px){.data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-grid{grid-template-columns:1fr}.screen-grid>article{min-height:220px}}
@media(max-width:620px){.data-grid{grid-template-columns:1fr}.data-grid article{min-height:108px}.screen-grid>article{min-height:unset}.kpi-row{height:auto}.funnel-demo>div{height:auto}}


/* Shared, lightweight page transition */
html:not(.page-ready) body{opacity:0;transform:translateY(-18px)}
html.page-ready body{opacity:1;transform:translateY(0);transition:opacity .52s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1)}
html.page-leaving body{opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease}
@media (prefers-reduced-motion:reduce){html:not(.page-ready) body,html.page-ready body,html.page-leaving body{opacity:1;transform:none;transition:none!important}}


.pilot-button,.how-copy .dark{position:relative;isolation:isolate;overflow:hidden}
.pilot-button::before,.how-copy .dark::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.18) 77%,rgba(224,255,235,.95) 84%,#fff 88%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:pilotBorderOrbit 2.8s linear infinite;will-change:transform;z-index:2}
@keyframes pilotBorderOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pilot-button::before,.how-copy .dark::before{animation:none;opacity:.45}}


/* Final media and icon integration */
.premium-phone .menu-thumb{
  width:32px;height:29px;display:block;object-fit:cover;border-radius:7px;
  border:1px solid #dce4df;box-shadow:0 2px 7px rgba(10,35,55,.08);
}
.premium-network .node{display:flex;align-items:center;justify-content:center;overflow:hidden}
.premium-network .node img{width:60%;height:60%;object-fit:contain;display:block}
.premium-network .node.center img{width:68%;height:68%;filter:brightness(0) invert(1);opacity:.96}
.premium-network .node.n1 img{width:58%;height:58%}
.premium-network .node.n2 img{width:55%;height:55%}
.premium-network .node.n3 img{width:54%;height:54%}
.premium-network .node.n4 img{width:58%;height:58%}
.premium-network .node.n5 img{width:58%;height:58%}
.insight-icon{width:44px;height:44px;border-radius:50%;background:rgba(61,124,89,.08);border:1px solid rgba(61,124,89,.15);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.insight-icon img{width:27px;height:27px;object-fit:contain}
@media(max-width:850px){
  .premium-phone .menu-thumb{width:36px;height:33px}
  .premium-network .node img{width:56%;height:56%}
}


/* Unified MENULYTICS desktop header dimensions — matches Kimler İçin */
@media(min-width:761px){
  .ml-header{height:86px;padding-inline:max(36px,calc((100vw - 1420px)/2));background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}
  .ml-brand{gap:18px}
  .ml-brand img{width:58px;height:58px}
  .ml-brand b{font-family:Manrope,sans-serif;font-size:25px;letter-spacing:.28em;font-weight:500}
  .ml-brand small{font-size:12px;letter-spacing:.28em;margin-top:6px}
  .ml-header nav{gap:40px;font-size:15px}
  .ml-header nav>a:not(.pilot-button){position:relative;padding:31px 0 27px}
  .ml-header nav>a.active-page::after{bottom:14px}
  .ml-header nav .pilot-button{padding:14px 25px;border-radius:7px}
}