/* ==========================================================================
   Ana sayfa — kaydırmaya bağlı sahneler
   Her sahnenin yüksekliği, animasyonun "süresi"dir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Açılış
   -------------------------------------------------------------------------- */
.hero{ height:230svh; background:var(--paper) }
.hero__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; text-align:center;
}
.hero__aura{
  position:absolute; width:min(120vw,1100px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(94,92,230,.22), rgba(62,199,224,.16) 38%, transparent 68%);
  filter:blur(30px);
  transform:scale(calc(.55 + var(--p,0) * .85));
  opacity:calc(.35 + var(--p,0) * .65);
}
.hero__mesh{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--hair) 1px, transparent 1px),
                   linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  transform:scale(calc(1 + var(--p,0) * .5));
  opacity:calc(1 - var(--p,0) * .75);
}
.hero__inner{
  position:relative; width:min(1120px,90%);
  transform:translateY(calc(var(--ty,0) * 1px)) scale(var(--sc,1));
  opacity:var(--op,1);
  will-change:transform;
}
.hero__kicker{ font-size:19px; color:var(--ink-2); margin-bottom:14px; opacity:calc(1 - var(--p,0) * 2.6) }
.hero__title{ font-size:clamp(46px,7.6vw,112px); font-weight:700; line-height:.98; letter-spacing:-.042em; text-wrap:balance }
.hero__title em{ font-style:normal; display:block }
.hero__sub{ margin:26px auto 0; max-width:560px; opacity:calc(1 - var(--p,0) * 3.2) }
.hero__actions{ margin-top:30px; opacity:calc(1 - var(--p,0) * 3.2) }
.hero__hint{
  position:absolute; bottom:26px; left:50%; translate:-50% 0;
  font-size:12px; color:var(--ink-3); display:flex; flex-direction:column; align-items:center; gap:7px;
  opacity:calc(1 - var(--p,0) * 6);
}
.hero__hint i{ width:1px; height:26px; background:linear-gradient(var(--ink-3), transparent) }

/* --------------------------------------------------------------------------
   2. Kurulum sahnesi — canvas kaydırmayla kare kare çizilir
   -------------------------------------------------------------------------- */
.build{ height:520svh; background:var(--void); color:var(--void-ink) }
.build__pin{ position:sticky; top:0; height:100svh; overflow:hidden }
.build__canvas{ position:absolute; inset:0; width:100%; height:100% }
.build__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.85) 0%, transparent 26%, transparent 62%, rgba(0,0,0,.92) 100%);
}
.build__cap{
  position:absolute; left:50%; translate:-50% 0; bottom:clamp(48px,9vh,110px);
  width:min(700px,86%); text-align:center; pointer-events:none;
}
.build__step{
  position:absolute; inset:auto 0 0; opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.build__step.on{ opacity:1; transform:none; position:relative }
.build__step b{ display:block; font-size:clamp(24px,3.4vw,38px); font-weight:700; letter-spacing:-.024em; margin-bottom:8px }
.build__step span{ color:var(--void-ink-2); font-size:17px }
.build__head{
  position:absolute; left:50%; translate:-50% 0; top:clamp(56px,10vh,116px);
  width:min(760px,86%); text-align:center; pointer-events:none;
  opacity:calc(1 - var(--p,0) * 4);
}
.build__ticks{
  position:absolute; left:50%; translate:-50% 0; bottom:22px;
  display:flex; gap:7px;
}
.build__ticks i{
  width:26px; height:2px; border-radius:2px; background:rgba(255,255,255,.22);
  transition:background .35s var(--ease), width .35s var(--ease);
}
.build__ticks i.on{ background:var(--void-ink); width:40px }

/* --------------------------------------------------------------------------
   3. Kelime kelime açılan cümle
   -------------------------------------------------------------------------- */
.say{ background:var(--paper); height:270svh }
.say__pin{ position:sticky; top:0; height:100svh; display:grid; place-items:center }
.say .wordflow{
  --flow-on:#1d1d1f; --flow-off:rgba(0,0,0,.14);
  max-width:900px; margin-inline:auto;
}
.wordflow w{ color:color-mix(in srgb, var(--flow-on) calc(var(--wp,0) * 100%), var(--flow-off)) }
.say__foot{ margin-top:36px; text-align:center }

/* --------------------------------------------------------------------------
   4. Yatay galeri — dikey kaydırma yatay harekete çevrilir
   -------------------------------------------------------------------------- */
.hgal{ height:420svh; background:var(--paper-2) }
.hgal__pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center }
.hgal__head{ width:min(var(--wrap),87.5%); margin:0 auto clamp(24px,4vh,44px) }
.hgal__viewport{ overflow:hidden }
.hgal__track{
  display:flex; gap:20px; padding-inline:max(6vw, calc((100% - var(--wrap)) / 2));
  transform:translate3d(calc(var(--x,0) * 1px), 0, 0); will-change:transform;
}
.hcard{
  flex:none; width:min(340px,74vw); min-height:min(420px,52vh);
  background:var(--paper); border-radius:22px; padding:28px;
  display:flex; flex-direction:column; border:1px solid var(--hair);
}
.hcard__no{ font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.hcard h3{ margin:14px 0 10px; font-size:26px; font-weight:700; letter-spacing:-.022em }
.hcard p{ color:var(--ink-2); font-size:16px }
.hcard ul{ margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:7px }
.hcard li{ font-size:12px; padding:5px 10px; border-radius:980px; background:var(--paper-2); color:var(--ink-2) }
.hgal__rail{ width:min(var(--wrap),87.5%); margin:clamp(20px,3vh,36px) auto 0; height:2px; background:var(--hair); border-radius:2px }
.hgal__rail i{ display:block; height:100%; border-radius:2px; background:var(--ink); width:calc(18% + var(--p,0) * 82%) }

/* --------------------------------------------------------------------------
   5. Önce / sonra — kaydırma perdeyi açar
   -------------------------------------------------------------------------- */
.wipe{ height:320svh; background:var(--void); color:var(--void-ink) }
.wipe__pin{ position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden }
.wipe__stage{ position:relative; width:min(var(--wrap),88%); aspect-ratio:16/9.4; max-height:64vh; border-radius:24px; overflow:hidden; border:1px solid var(--void-hair) }
.wipe__side{ position:absolute; inset:0; padding:clamp(22px,4vw,44px); display:flex; flex-direction:column; justify-content:center }
.wipe__side--a{ background:#111114 }
.wipe__side--b{
  background:linear-gradient(122deg,#1a1a4d,#123f4f 52%,#3b1a4d);
  clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0);
}
.wipe__tag{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--void-ink-2); margin-bottom:14px }
.wipe__side h3{ font-size:clamp(24px,3.6vw,42px); font-weight:700; letter-spacing:-.026em; margin-bottom:18px; max-width:15ch }
.wipe__list li{ display:flex; gap:10px; align-items:baseline; padding:5px 0; color:var(--void-ink-2); font-size:16px }
.wipe__list li::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; translate:0 -3px }
.wipe__seam{
  position:absolute; top:0; bottom:0; width:2px; background:var(--void-ink);
  left:calc(var(--p,0) * 100%); translate:-1px 0; opacity:calc(1 - var(--p,0) * .9);
}
.wipe__seam::after{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:38px; height:38px; border-radius:50%; background:var(--void-ink);
}
.wipe__cap{ width:min(var(--wrap),88%); margin:0 auto; position:absolute; top:clamp(40px,7vh,80px); left:50%; translate:-50% 0; text-align:center }

/* --------------------------------------------------------------------------
   6. Sayılar
   -------------------------------------------------------------------------- */
.figs{ background:var(--paper); padding:clamp(70px,10vw,130px) 0 }
.figs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,5vw,56px); text-align:center }
@media (max-width:820px){ .figs__grid{ grid-template-columns:repeat(2,1fr) } }
.fig b{
  display:block; font-size:clamp(44px,6.4vw,80px); font-weight:700; letter-spacing:-.04em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.fig span{ display:block; margin-top:10px; color:var(--ink-2); font-size:16px }

/* --------------------------------------------------------------------------
   7. Sayfa yönlendirme kartları
   -------------------------------------------------------------------------- */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:900px){ .doors{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .doors{ grid-template-columns:1fr } }
.door{
  position:relative; display:flex; flex-direction:column; min-height:210px;
  padding:26px; border-radius:20px; background:var(--paper-2); overflow:hidden;
  transition:transform var(--slow) var(--ease), background var(--fast) var(--ease);
}
.door:hover{ transform:translateY(-4px); background:#ececf0 }
.door h3{ font-size:22px; font-weight:700; letter-spacing:-.02em }
.door p{ margin-top:8px; color:var(--ink-2); font-size:15px }
.door .link{ margin-top:auto; padding-top:18px; font-size:15px }
.door__ix{ font-size:12px; color:var(--ink-3); margin-bottom:12px; font-variant-numeric:tabular-nums }

/* --------------------------------------------------------------------------
   Kapanış
   -------------------------------------------------------------------------- */
.close{ background:var(--void); color:var(--void-ink); padding:clamp(90px,14vw,180px) 0; text-align:center }
.close .display{ max-width:16ch; margin-inline:auto }
.close .lead{ color:var(--void-ink-2); margin:24px auto 34px; max-width:520px }

/* --------------------------------------------------------------------------
   Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .hero{ height:200svh }
  .build{ height:420svh }
  .hgal{ height:360svh }
  .wipe{ height:280svh }
  .wipe__stage{ aspect-ratio:auto; height:62vh }
  .wipe__side{ padding:20px }
}

@media (prefers-reduced-motion:reduce){
  .hero,.build,.hgal,.wipe,.say{ height:auto }
  .hero__pin,.build__pin,.hgal__pin,.wipe__pin,.say__pin{ position:relative; height:auto; padding:70px 0; display:block }
  .hero__inner{ transform:none; opacity:1 }
  .hero__kicker,.hero__sub,.hero__actions,.build__head{ opacity:1 }
  .hero__hint{ display:none }
  .build__canvas{ position:relative; height:60vh }
  .build__step{ position:relative; opacity:1; transform:none; margin-bottom:20px }
  .build__veil,.build__ticks{ display:none }
  .build__cap{ position:relative; left:auto; translate:none; bottom:auto; margin:30px auto 0 }
  .build__head{ position:relative; left:auto; translate:none; top:auto; margin:0 auto 24px }
  .hgal__track{ transform:none; flex-wrap:wrap; justify-content:center; padding-inline:6vw }
  .hgal__viewport{ overflow:visible }
  .wipe__side--b{ clip-path:none; position:relative; margin-top:16px }
  .wipe__side--a{ position:relative }
  .wipe__stage{ aspect-ratio:auto; max-height:none; height:auto; display:grid }
  .wipe__seam{ display:none }
  .wipe__cap{ position:relative; left:auto; translate:none; top:auto; margin-bottom:24px }
}

/* --------------------------------------------------------------------------
   Sektör şeridi — "her sektörden şirket" mesajını taşır
   -------------------------------------------------------------------------- */
.sectors{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.sectors li{
  font-size:14px; color:var(--ink-2); padding:7px 15px; border-radius:980px;
  border:1px solid var(--hair); background:var(--paper);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sectors li:hover{ border-color:var(--accent); color:var(--ink) }