/* Innovex · manifesto — "Kreatif ile performans toplanmaz, çarpılır."
   Krem zeminde "+" iki çizgi olarak başlar, dönerek Innovex X'inin eksenlerine
   oturur; X'in üç parçası bu eksenler boyunca gelip kilitlenir. Formül şeridi
   (Strateji × Kreatif × Performans = Büyüme) X'in parçalarını sırayla okur.
   Hareketi innovex-manifesto.js başlatır; betik yoksa her şey son hâlinde durur.
   Sahne koordinatları: SVG viewBox "100 98 800 800"; eksenlerin kesişimi
   (458,434) → sahnede %44.75 / %42, X'in görsel merkezi (500,488) → %50 / %48.75. */
.ixm{
  --ixm-k:#FC2B4A;
  --ixm-krem:#F4EEE6;
  --ixm-yazi:#16161C;
  --ixm-yazi2:#5E5A57;
  --ixm-ease:cubic-bezier(.16,1,.3,1);
  --ixm-kx:44.75%;
  --ixm-ky:42%;
}
.ixm *,.ixm *::before,.ixm *::after{box-sizing:border-box}
.innovex-page .ixm{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:140px 0;background:var(--ixm-krem);color:var(--ixm-yazi);font-family:var(--font);-webkit-font-smoothing:antialiased}

/* kâğıt dokusu: çok hafif gren */
.ixm::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.ixm-kap{position:relative;width:min(1168px,100% - 48px);margin-inline:auto}
.ixm-ust{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:72px}

/* =========================================================
   SAHNE
   ========================================================= */
.ixm-sekil{position:relative;z-index:0;min-width:0;margin:0}
.ixm-sahne{position:relative;aspect-ratio:1/1}
.ixm-hale{position:absolute;left:50%;top:48.75%;width:118%;aspect-ratio:1/1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(252,43,74,.16),rgba(252,43,74,.115) 22%,rgba(252,43,74,.07) 42%,rgba(252,43,74,.035) 62%,rgba(252,43,74,.012) 82%,rgba(252,43,74,0));opacity:.7}

/* eksenler: kesişimden iki yöne uzanan ince çizgi; ortadaki kalın parça "+" işaretidir.
   --sol / --sag: çizginin iki kolunun sönme uzunluğu. Metne doğru giden kol kısa tutulur. */
.ixm-eksen{position:absolute;left:var(--ixm-kx);top:var(--ixm-ky);width:2800px;height:9px;margin:-4.5px 0 0 -1400px;pointer-events:none;transform:rotate(var(--a1))}
.ixm-eksen--serit{--a0:90deg;--a1:52.99deg;--sol:1150px;--sag:430px}   /* sol kol yukarı-sola, sağ kol aşağı-sağa */
.ixm-eksen--cip{--a0:0deg;--a1:-51.31deg;--sol:430px;--sag:1000px}     /* sol kol aşağı-sola, sağ kol yukarı-sağa */
.ixm-eksen i{position:absolute;left:0;right:0;top:4px;height:1px;
  background:linear-gradient(90deg,rgba(22,22,28,0) calc(50% - var(--sol)),rgba(22,22,28,.075) calc(50% - var(--sol) * .55),rgba(22,22,28,.2) 50%,rgba(22,22,28,.075) calc(50% + var(--sag) * .55),rgba(22,22,28,0) calc(50% + var(--sag)))}
.ixm-eksen i::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background:linear-gradient(90deg,rgba(252,43,74,0) calc(50% - var(--sol) * .8),rgba(252,43,74,.55) 50%,rgba(252,43,74,0) calc(50% + var(--sag) * .8))}
.ixm-eksen b{position:absolute;left:50%;top:50%;width:132px;height:2px;margin:-1px 0 0 -66px;border-radius:2px;background:var(--ixm-yazi);opacity:0}
/* kilitlenme anında eksenler boyunca dışa koşan ışık */
.ixm-eksen::before,.ixm-eksen::after{content:"";position:absolute;top:4px;left:50%;width:240px;height:1px;opacity:0;
  background:linear-gradient(90deg,rgba(252,43,74,0),rgba(252,43,74,.9))}
.ixm-eksen::after{left:auto;right:50%;background:linear-gradient(270deg,rgba(252,43,74,0),rgba(252,43,74,.9))}

.ixm-x-kap{position:absolute;inset:0;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ixm-x{display:block;width:100%;height:100%;overflow:visible}
.ixm-x-ic{transform-origin:458px 434px}
.ixm-p{transform-box:view-box}
.ixm-pd{transition:opacity .6s ease}
.ixm-p path{cursor:default}
.ixm-isilti-kap{transition:opacity .5s ease}
.ixm-isilti{transform:translateX(0) skewX(-24deg);opacity:0}
.ixm-yanki{opacity:0;transform-origin:458px 434px}
.ixm-taslak{opacity:0}

/* odak: formülün bir terimi okunurken X'in yalnız o parçası yanar */
.ixm[data-odak="serit"] .ixm-p:not(.ixm-p--serit) .ixm-pd,
.ixm[data-odak="sol"] .ixm-p:not(.ixm-p--sol) .ixm-pd,
.ixm[data-odak="sag"] .ixm-p:not(.ixm-p--sag) .ixm-pd{opacity:.15}
.ixm[data-odak="serit"] .ixm-isilti-kap,.ixm[data-odak="sol"] .ixm-isilti-kap,.ixm[data-odak="sag"] .ixm-isilti-kap{opacity:0}
.ixm[data-odak="serit"] .ixm-eksen--serit i::after,
.ixm[data-odak="sol"] .ixm-eksen--cip i::after,
.ixm[data-odak="sag"] .ixm-eksen--cip i::after,
.ixm[data-odak="tum"] .ixm-eksen i::after{opacity:1}

/* =========================================================
   METİN
   ========================================================= */
.ixm-metin{position:relative;z-index:1;min-width:0}
.innovex-page .ixm-etiket{margin:0;font-size:12.5px;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ixm-k)}
.innovex-page .ixm-baslik{margin:22px 0 0;font-size:clamp(40px,4.6vw,64px);line-height:1.02;font-weight:760;letter-spacing:-.035em;font-variation-settings:"opsz" 32;color:var(--ixm-yazi)}
.ixm-baslik .ixm-s{display:block;overflow:hidden;padding:0 .08em .16em 0;margin-bottom:-.16em}
.ixm-baslik .ixm-s>span{display:block}
.ixm-baslik .ixm-s--k{color:var(--ixm-k)}
.innovex-page .ixm-giris{margin:32px 0 0;max-width:29em;font-size:18px;line-height:1.6;color:var(--ixm-yazi2)}
.innovex-page .ixm-vurgu{margin:18px 0 0;max-width:24em;font-size:20px;line-height:1.5;font-weight:620;letter-spacing:-.012em;color:var(--ixm-yazi)}

/* =========================================================
   FORMÜL ŞERİDİ
   ========================================================= */
.ixm-formul{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px;margin:100px -24px 0;padding:0;list-style:none}
.ixm-terim{position:relative;min-width:0;padding:26px 24px 28px;border-radius:20px;background-color:rgba(255,255,255,0);
  transition:background-color .55s ease,box-shadow .55s ease,transform .7s var(--ixm-ease)}
/* aktif terim: kendi renginde köşeden yayılan aydınlık + mercan hale + hafif büyüme */
.ixm-terim::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(120% 90% at 0% 0%,rgba(252,43,74,.13),rgba(252,43,74,0) 62%)}
.ixm-terim.aktif{background-color:rgba(255,255,255,.74);box-shadow:0 26px 50px -30px rgba(252,43,74,.55),0 10px 24px -18px rgba(90,30,30,.25);transform:translateY(-4px) scale(1.015)}
.ixm-terim.aktif::before{opacity:1}

.ixm-ikon{display:block;width:34px;height:auto;overflow:visible;transition:transform .7s var(--ixm-ease),filter .55s ease}
.ixm-ikon path{fill:rgba(252,43,74,.17)}
.ixm-ikon path.yak{fill:var(--ixm-k)}
.ixm-terim.aktif .ixm-ikon{transform:scale(1.08);filter:drop-shadow(0 6px 10px rgba(252,43,74,.4))}

.innovex-page .ixm-ad{margin:20px 0 0;font-size:22px;line-height:1.2;font-weight:720;letter-spacing:-.022em;font-variation-settings:"opsz" 32;color:var(--ixm-yazi);transition:color .45s ease}
.ixm-terim.aktif .ixm-ad,.ixm-terim--sonuc .ixm-ad{color:var(--ixm-k)}
.innovex-page .ixm-ac{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--ixm-yazi2)}

/* işlemciler: × ve = terimlerin arasındaki boşlukta, ikonla aynı hizada */
.ixm-op{position:absolute;left:-18px;top:43px;transform:translate(-50%,-50%);font-size:30px;line-height:1;font-weight:300;color:var(--ixm-k);pointer-events:none}
.ixm-op--esit{color:var(--ixm-yazi2)}

/* =========================================================
   HAREKET (yalnız betik sahneyi hazırladıysa ve hareket serbestse)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  /* başlangıç: "+" ve X henüz yok */
  .ixm.hazir:not(.oynat) .ixm-eksen{transform:rotate(var(--a0))}
  .ixm.hazir:not(.oynat) .ixm-eksen i{clip-path:inset(0 50% 0 50%)}
  .ixm.hazir:not(.oynat) .ixm-p,
  .ixm.hazir:not(.oynat) .ixm-hale{opacity:0}
  .ixm.hazir:not(.oynat) .ixm-baslik .ixm-s>span{transform:translateY(112%)}
  .ixm.hazir:not(.oynat) .ixm-etiket,
  .ixm.hazir:not(.oynat) .ixm-giris,
  .ixm.hazir:not(.oynat) .ixm-vurgu{opacity:0;transform:translateY(14px)}
  .ixm.hazir:not(.formul) .ixm-terim{opacity:0;transform:translateY(18px)}
  .ixm.hazir:not(.formul) .ixm-op{opacity:0}

  /* 1 · "+" belirir (0–0,5 sn), 2 · döner ve "×" olur (0,55–1,35 sn), 3 · çizgiler kenarlara uzar */
  .ixm.oynat .ixm-eksen{animation:ixm-don .8s cubic-bezier(.7,0,.2,1) .55s both}
  .ixm.oynat .ixm-eksen b{animation:ixm-arti 1.6s ease both}
  .ixm.oynat .ixm-eksen i{animation:ixm-uza 1.2s cubic-bezier(.2,.7,.1,1) 1s both}
  .ixm.oynat .ixm-eksen::before{animation:ixm-kos-sag 1.3s cubic-bezier(.2,.6,.3,1) 1.62s both}
  .ixm.oynat .ixm-eksen::after{animation:ixm-kos-sol 1.3s cubic-bezier(.2,.6,.3,1) 1.62s both}

  /* 4 · parçalar eksenler boyunca gelir ve kilitlenir (~1,62 sn) */
  .ixm.oynat .ixm-p--serit{animation:ixm-serit .72s cubic-bezier(.55,0,.12,1) .92s both,ixm-gor .25s linear .92s both}
  .ixm.oynat .ixm-p--sag{animation:ixm-sag .62s cubic-bezier(.55,0,.12,1) 1.02s both,ixm-gor .25s linear 1.02s both}
  .ixm.oynat .ixm-p--sol{animation:ixm-sol .62s cubic-bezier(.55,0,.12,1) 1.02s both,ixm-gor .25s linear 1.02s both}
  .ixm.oynat .ixm-x-ic{animation:ixm-vurus .8s cubic-bezier(.2,.7,.3,1) 1.6s both}
  .ixm.oynat .ixm-hale{animation:ixm-hale 1.8s ease-out 1.5s both}
  /* taslak: X'in ince çizgisi önce belirir, "+" onun eksenlerine döner, parçalar onu doldurur */
  .ixm.oynat .ixm-taslak{animation:ixm-taslak 1.95s ease}
  /* yankılar dolgusuz: gecikme sırasında görünmesinler */
  .ixm.oynat .ixm-yanki--1{animation:ixm-yanki 1.3s cubic-bezier(.15,.7,.3,1) 1.62s}
  .ixm.oynat .ixm-yanki--2{animation:ixm-yanki2 1.3s cubic-bezier(.15,.7,.3,1) 1.8s}

  /* metin: ilk üç satır hemen, "çarpılır." X kilitlendiği anda */
  .ixm.oynat .ixm-baslik .ixm-s>span{animation:ixm-yuksel 1.1s var(--ixm-ease) .1s both}
  .ixm.oynat .ixm-baslik .ixm-s:nth-child(2)>span{animation-delay:.18s}
  .ixm.oynat .ixm-baslik .ixm-s:nth-child(3)>span{animation-delay:.26s}
  .ixm.oynat .ixm-baslik .ixm-s:nth-child(4)>span{animation-delay:1.58s}
  .ixm.oynat .ixm-etiket{animation:ixm-belir .9s var(--ixm-ease) 0s both}
  .ixm.oynat .ixm-giris{animation:ixm-belir 1s var(--ixm-ease) .42s both}
  .ixm.oynat .ixm-vurgu{animation:ixm-belir 1s var(--ixm-ease) .56s both}

  /* formül şeridi: kendi görünürlüğüyle, X kilitlendikten sonra */
  /* "backwards": bitince aktif terimin büyüme/aydınlık geçişleri serbest kalsın */
  .ixm.formul .ixm-terim{animation:ixm-belir .9s var(--ixm-ease) backwards}
  .ixm.formul .ixm-terim:nth-child(2){animation-delay:.12s}
  .ixm.formul .ixm-terim:nth-child(3){animation-delay:.24s}
  .ixm.formul .ixm-terim:nth-child(4){animation-delay:.36s}
  .ixm.formul .ixm-op{animation:ixm-op .7s cubic-bezier(.2,.9,.25,1.3) both}
  .ixm.formul .ixm-terim:nth-child(2) .ixm-op{animation-delay:.2s}
  .ixm.formul .ixm-terim:nth-child(3) .ixm-op{animation-delay:.32s}
  .ixm.formul .ixm-terim:nth-child(4) .ixm-op{animation-delay:.44s}

  /* (sonuç anındaki nabız betikte, Web Animations ile) */

  /* boşta: X'in üstünden ara sıra geçen ince ışıltı */
  .ixm.canli .ixm-isilti{animation:ixm-isilti 9s cubic-bezier(.45,0,.25,1) .4s infinite}
  .ixm.durak .ixm-isilti{animation-play-state:paused}
}

@keyframes ixm-don{from{transform:rotate(var(--a0))}to{transform:rotate(var(--a1))}}
@keyframes ixm-arti{0%{opacity:0;transform:scaleX(.2)}22%{opacity:1;transform:none}68%{opacity:1}100%{opacity:0;transform:scaleX(1.25)}}
@keyframes ixm-uza{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ixm-kos-sag{0%{opacity:0;transform:translateX(-120px)}12%{opacity:1}100%{opacity:0;transform:translateX(1000px)}}
@keyframes ixm-kos-sol{0%{opacity:0;transform:translateX(120px)}12%{opacity:1}100%{opacity:0;transform:translateX(-1000px)}}
@keyframes ixm-gor{from{opacity:0}to{opacity:1}}
@keyframes ixm-taslak{0%{opacity:0}20%{opacity:.42}74%{opacity:.42}100%{opacity:0}}
@keyframes ixm-serit{from{transform:translate(-217px,-287px)}to{transform:none}}
@keyframes ixm-sag{from{transform:translate(212px,-265px)}to{transform:none}}
@keyframes ixm-sol{from{transform:translate(-212px,265px)}to{transform:none}}
@keyframes ixm-vurus{0%{transform:scale(1)}22%{transform:scale(1.032)}100%{transform:scale(1)}}
@keyframes ixm-hale{0%{opacity:0}18%{opacity:1}100%{opacity:.7}}
@keyframes ixm-yanki{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.42)}}
@keyframes ixm-yanki2{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(1.24)}}
@keyframes ixm-yuksel{from{transform:translateY(112%)}to{transform:none}}
@keyframes ixm-belir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ixm-op{from{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-45deg)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes ixm-isilti{0%{opacity:1;transform:translateX(0) skewX(-24deg)}17%{opacity:1;transform:translateX(1800px) skewX(-24deg)}17.01%,100%{opacity:0;transform:translateX(1800px) skewX(-24deg)}}

/* =========================================================
   DUYARLI
   ========================================================= */
@media (max-width:1199px){
  /* dar kenar boşluğunda aktif kart ekran kenarına yapışmasın */
  .ixm-formul{margin-inline:-14px;gap:0 30px}
  .ixm-terim{padding:24px 14px 26px}
  .ixm-op{left:-15px}
}
@media (max-width:1099px){
  .innovex-page .ixm{padding:112px 0}
  .ixm-ust{gap:48px}
  .ixm-eksen--serit{--sag:330px}
  .ixm-eksen--cip{--sol:330px}
  .innovex-page .ixm-giris{font-size:17px}
  .innovex-page .ixm-vurgu{font-size:18.5px}
  .ixm-formul{margin-top:84px;gap:0 26px}
  .ixm-terim{padding:22px 14px 24px}
  .ixm-op{left:-13px;top:39px;font-size:26px}
  .innovex-page .ixm-ad{font-size:20px}
  .innovex-page .ixm-ac{font-size:14.5px}
}
@media (max-width:899px){
  .ixm-ust{grid-template-columns:1fr;gap:44px}
  .ixm-sekil{width:min(100%,420px);margin-inline:auto}
  .ixm-eksen--serit{--sol:700px;--sag:250px}
  .ixm-eksen--cip{--sol:250px;--sag:700px}
  .ixm-formul{grid-template-columns:1fr;gap:28px;margin-top:64px;margin-inline:-14px}
  .ixm-terim{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;align-items:start;padding:20px 14px}
  .ixm-ikon{grid-row:1/span 2;width:36px;margin-top:2px}
  .innovex-page .ixm-ad{margin:0}
  .innovex-page .ixm-ac{margin-top:6px}
  .ixm-op{left:32px;top:-14px;font-size:24px}
}
@media (max-width:699px){
  .innovex-page .ixm{padding:88px 0}
  .ixm-kap{width:calc(100% - 32px)}
  .ixm-sekil{width:min(100%,330px)}
  .ixm-eksen--serit{--sol:420px;--sag:200px}
  .ixm-eksen--cip{--sol:200px;--sag:420px}
  .innovex-page .ixm-baslik{margin-top:16px}
  .innovex-page .ixm-giris{margin-top:24px;font-size:16.5px}
  .innovex-page .ixm-vurgu{font-size:17.5px}
  .ixm-formul{margin-top:52px;gap:22px;margin-inline:-8px}
  .ixm-terim{grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:18px 8px;border-radius:16px}
  .ixm-ikon{width:30px}
  .ixm-op{left:23px;top:-11px;font-size:22px}
  .innovex-page .ixm-ad{font-size:19px}
  .innovex-page .ixm-ac{font-size:14.5px}
  .ixm-terim.aktif{transform:none}
}

/* hareket azaltılmış: geçişler de kapalı, tek ve tam kare */
@media (prefers-reduced-motion:reduce){
  .ixm *,.ixm *::before,.ixm *::after{transition:none!important;animation:none!important}
  .ixm-x-kap{transform:none}
}