/* ================= Ana sayfa: hareketli giriş (From Infrastructure to Intelligence) =================
   Bu dosyadaki kurallar sahnenin SON karesini tanımlar; sayfa JS olmadan da bu hâliyle görünür.
   Hareket assets/intro.js tarafından Web Animations API ile, bu son kareye varacak şekilde oynatılır. */
.mhero{--mh-blue:#0f62fe;--mh-navy:#0b1f3a;--mh-bg:#f5f8fc;--mh-sky:#78a9ff;--mh-ink:#161616;--mh-line:#d6e0ee;
  position:relative;overflow:hidden;isolation:isolate;background:var(--mh-bg);border-bottom:1px solid #e1e8f2}

/* Arka plan: teknik grid, ışık ve (yalnızca giriş sırasında) çizim çizgileri */
.mh-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 95% at 66% 44%,#000 30%,transparent 78%);mask-image:radial-gradient(120% 95% at 66% 44%,#000 30%,transparent 78%)}
.mh-gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(15,98,254,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(15,98,254,.07) 1px,transparent 1px);background-size:48px 48px}
.mh-glow{position:absolute;top:-10%;bottom:-10%;right:-8%;width:70%;background:radial-gradient(closest-side,rgba(15,98,254,.09),transparent)}
.mh-sw{position:absolute;top:-25%;bottom:-25%;left:-15%;width:60%;background:radial-gradient(closest-side,rgba(120,169,255,.24),transparent);opacity:0}
.mh-bl{position:absolute;opacity:0;background:linear-gradient(90deg,rgba(15,98,254,0),rgba(15,98,254,.42) 18%,rgba(15,98,254,.42) 82%,rgba(15,98,254,0))}
.mh-bl.h{left:0;right:0;height:1px}
.mh-bl.v{top:0;bottom:0;width:1px;background:linear-gradient(rgba(15,98,254,0),rgba(15,98,254,.42) 18%,rgba(15,98,254,.42) 82%,rgba(15,98,254,0))}
.mh-mk{position:absolute;width:11px;height:11px;margin:-5px 0 0 -5px;opacity:0}
.mh-mk::before,.mh-mk::after{content:"";position:absolute;background:var(--mh-blue)}
.mh-mk::before{left:5px;top:0;width:1px;height:11px}.mh-mk::after{top:5px;left:0;height:1px;width:11px}

/* Yerleşim */
.mh-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:56px;
  min-height:clamp(620px,calc(100vh - 48px),940px);padding-block:48px}
@supports (height:100svh){.mh-grid{min-height:clamp(620px,calc(100svh - 48px),940px)}}
.mh-copy{padding-block:24px;max-width:640px}
.mh-visual{position:relative;width:100%;aspect-ratio:800/720;max-height:calc(100vh - 120px);transform-origin:0 0}
.mh-stage{display:block;width:100%;height:100%;overflow:visible}
.mh-playing .mh-visual{will-change:transform}

/* Metin */
.mh-brand{display:inline-flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.1px;color:var(--mh-navy)}
.mh-brand svg{width:46px;height:25px;flex:none}
.mh-brand b{font-weight:600}.mh-brand span{font-weight:300}
.mh-tag{display:flex;align-items:center;gap:12px;margin:28px 0 20px;font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--mh-blue)}
.mh-tag::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
.mh-title{margin:0;font-weight:300;font-size:clamp(38px,4.2vw,60px);line-height:1.12;letter-spacing:-.005em;color:var(--mh-ink)}
.mh-title:focus{outline:none}
.mh-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mh-line>span{display:block}
.mh-line+.mh-line>span{color:var(--mh-blue)}
.mh-sub{margin:24px 0 0;max-width:520px;font-size:20px;line-height:1.45;color:var(--g70)}
.mh-actions{display:flex;flex-wrap:wrap;gap:1px;margin-top:40px}
.mh-quick{margin:20px 0 0;font-size:14px;color:var(--g70)}
.mh-quick a{color:var(--mh-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(15,98,254,.35);transition:text-decoration-color 150ms}
.mh-quick a:hover{text-decoration-color:currentColor}
.mh-foot{display:flex;flex-wrap:wrap;gap:10px 28px;margin:44px 0 0;padding:20px 0 0;border-top:1px solid #dde5f0;list-style:none;font-size:14px;color:var(--g70)}
.mh-foot li{display:flex;align-items:center;gap:8px}
.mh-foot svg{width:16px;height:16px;color:var(--green);flex:none}
.mh-foot a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c6d4e6;transition:text-decoration-color 150ms,color 150ms}
.mh-foot a:hover{color:var(--mh-navy);text-decoration-color:currentColor}

/* Sahne göstergesi ve "Atla" (yalnızca giriş oynarken) */
/* Ekrana sabit: hero ekrandan uzun olsa da (tablet/mobil) görünür kalır. Atla sağ üstte, destek sekmesinden uzakta. */
.mh-ui{position:fixed;left:0;right:0;top:48px;bottom:0;z-index:45;display:none;pointer-events:none}
.mh-playing .mh-ui{display:block}
.mh-ui .wrap{position:relative;height:100%}
.mh-rail{position:absolute;left:0;bottom:24px;display:flex;gap:24px;margin:0;padding:0;list-style:none;opacity:0}
.mh-skip{position:absolute;right:0;top:16px}
.mh-step{width:176px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mh-navy)}
.mh-step i{display:block;height:2px;margin-bottom:10px;background:var(--mh-line);overflow:hidden}
.mh-step i b{display:block;height:100%;background:var(--mh-blue);transform-origin:0 50%}
.mh-step span{display:block;opacity:.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-skip{display:inline-flex;align-items:center;gap:10px;pointer-events:auto;background:rgba(255,255,255,.7);border:1px solid var(--mh-line);color:var(--mh-navy);font-size:13px;letter-spacing:.16px;padding:10px 14px;cursor:pointer;transition:background 150ms,border-color 150ms}
.mh-skip:hover{background:#fff;border-color:var(--mh-sky)}
.mh-skip kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;color:#6f7f95;border:1px solid var(--mh-line);padding:1px 4px}

/* Giriş başlamadan önceki an: ilk karede son hâlin görünüp kaybolmasını önler.
   JS yüklenmezse içerik 3 sn sonra yine de görünür. */
.mh-pre .mh-copy,.mh-pre .mh-visual{opacity:0;animation:mh-failsafe .4s 3s forwards}
@keyframes mh-failsafe{to{opacity:1}}

/* ---- SVG sahne ---- */
.mh-stage text{font-family:"IBM Plex Mono",monospace}
.mh-tl{font-size:11px;letter-spacing:.06em;fill:var(--mh-navy)}
.mh-tm{font-size:9px;letter-spacing:.04em;fill:#6f7f95}
.mh-card{fill:#fff;stroke:var(--mh-line)}
.mh-sh{fill:rgba(11,31,58,.06)}
.mh-div{fill:none;stroke:#e6ecf4}
.mh-iso path{stroke:var(--mh-sky);stroke-width:.9;stroke-linejoin:round}
.mh-iso .t{fill:#fff}.mh-iso .l{fill:#d0e2ff}.mh-iso .r{fill:#a6c8ff}
.mh-p1 .t{fill:#eef4fd}
.mh-ln{fill:none;stroke:var(--mh-sky);stroke-width:1.25}
.mh-pk{fill:none;stroke:var(--mh-blue);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.05 .95;animation:mh-flow 2.8s linear infinite}
.mh-pk.r{animation-direction:reverse}
@keyframes mh-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
.mh-dc circle{fill:#fff;stroke:var(--mh-blue);stroke-width:1.4}
.mh-dp circle{fill:var(--mh-blue)}
.mh-led{fill:var(--mh-blue);animation:mh-led 2.4s ease-in-out infinite}
@keyframes mh-led{50%{opacity:.3}}
.mh-off .mh-pk,.mh-off .mh-led{animation-play-state:paused}
.mh-tr{opacity:0}
.mh-grow,.mh-flow{transform-box:fill-box;transform-origin:0 50%}
.mh-up,.mh-bc{transform-box:fill-box;transform-origin:50% 100%}
.mh-st{fill:var(--mh-blue);stroke:var(--mh-blue);stroke-width:1.4}
.mh-chip rect{fill:#f5f8fc;stroke:#e1e8f2}.mh-chip text{font-size:8px;fill:#525252}
.mh-scr{fill:#f5f8fc;stroke:var(--mh-navy);stroke-width:1.4;vector-effect:non-scaling-stroke}
.mh-base{fill:#e4ebf5;stroke:var(--mh-navy);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mh-xt{fill:none;stroke:var(--mh-sky);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mh-xp{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:0 1}
#mh-web{transform-origin:155px 146px}#mh-ecom{transform-origin:645px 146px}#mh-inv{transform-origin:155px 568px}
#mh-devcard{transform-origin:645px 568px}#mh-dev{transform-origin:645px 561px}
#mh-plat{transform-origin:400px 410px}.mh-rack{transform-origin:400px 368px}

/* ---- Tablet ---- */
@media(max-width:1056px){
  .mh-grid{grid-template-columns:1fr;min-height:0;padding-block:24px 56px;row-gap:12px}
  .mh-visual{order:-1;justify-self:center;width:min(100%,calc(46vh * 800 / 720));max-height:none}
  @supports (height:100svh){.mh-visual{width:min(100%,calc(46svh * 800 / 720))}}
  .mh-copy{padding-block:0;max-width:680px}
  .mh-bg{-webkit-mask-image:radial-gradient(130% 70% at 50% 25%,#000 30%,transparent 80%);mask-image:radial-gradient(130% 70% at 50% 25%,#000 30%,transparent 80%)}
  .mh-glow{right:auto;left:15%;height:60%;bottom:auto}
}
/* ---- Mobil ---- */
@media(max-width:672px){
  .mh-grid{padding-block:16px 48px}
  .mh-title{font-size:clamp(32px,9vw,40px)}
  .mh-tag{margin:20px 0 14px;font-size:11px}
  .mh-sub{margin-top:18px;font-size:17px}
  .mh-actions{flex-direction:column;margin-top:28px}
  .mh-actions .btn{width:100%}
  .mh-foot{flex-direction:column;gap:8px;margin-top:28px}
  .mh-rail{right:72px;bottom:16px;gap:6px}
  .mh-step{width:auto;flex:1}
  .mh-step span{display:none}
  .mh-step i{margin-bottom:0}
  .mh-skip kbd{display:none}
}

@media(prefers-reduced-motion:reduce){
  .mh-pk{animation:none;opacity:0}
  .mh-led{animation:none}
}
@media print{
  .mh-ui,.mh-bg{display:none!important}
  .mh-copy,.mh-visual{opacity:1!important;animation:none!important;transform:none!important}
}