/* TENARCH scrollfx — sahne stilleri
   Palet: #F2EDE4 / #16241E / #C3A98E / #A18B73 / #DDC7AF / #56655D
   Kural: yalniz transform + opacity animlenir (layout tetikleyen yok). */

/* ============ PINNED HERO (kare dizisi) ============ */
.sfx-hero{
  position:relative;
  height:var(--sfx-h,300vh);
  background:#16241E;
}
@media (max-width:767px){
  .sfx-hero{ height:var(--sfx-h-m,180vh); } /* mobilde pin %60 */
}
.sfx-hero__stage{
  position:sticky; top:0;
  height:100svh; width:100%;
  overflow:hidden;
}
.sfx-hero__canvas{
  display:block; width:100%; height:100%;
}
.sfx-hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,26,22,.55) 0%, rgba(15,26,22,.15) 32%,
    rgba(15,26,22,.15) 62%, rgba(15,26,22,.72) 100%);
}

/* ince yukleme/scroll cubugu (once preload, sonra scroll ilerlemesi) */
.sfx-hero__bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(195,169,142,.18); pointer-events:none;
}
.sfx-hero__bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#A18B73,#DDC7AF);
  transform:scaleX(var(--p,0)); transform-origin:left;
}

/* hero bitis perdesi: --pend (son %15) ile yukaridan iner */
.sfx-hero__curtain{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#16241E 0%,rgba(22,36,30,.85) 55%,rgba(22,36,30,0) 100%);
  transform:translateY(calc(-100% + var(--pend,0) * 100%));
  will-change:transform;
}

/* ============ CAPTION'LAR ============ */
.sfx-cap{
  position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(80px,12vh,140px) clamp(20px,6vw,90px) 0;
  opacity:0; transform:translateY(26px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.sfx-cap.is-on{ opacity:1; transform:none; }
.sfx-cap__eyebrow{
  display:flex; align-items:center; gap:13px; margin-bottom:16px;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:#DDC7AF;
}
.sfx-cap__rule{ display:block; width:26px; height:1px; background:#C3A98E; }
.sfx-cap__title{
  margin:0; max-width:20ch; font-weight:600;
  font-size:clamp(28px,3.8vw,52px); line-height:1.14; letter-spacing:-.01em;
  color:#F2EDE4; text-wrap:balance; text-shadow:0 2px 24px rgba(11,18,15,.5);
  min-height:1.2em; /* typewriter yazarken zip yapmasin */
}
.sfx-cap__body{
  margin:18px 0 0; max-width:48ch; font-size:14.5px; line-height:1.8;
  color:rgba(242,237,228,.88); text-wrap:pretty; text-shadow:0 1px 16px rgba(11,18,15,.5);
}
.sfx-cap__cta{
  pointer-events:auto; display:inline-flex; align-items:center; gap:12px;
  margin-top:26px; background:#C3A98E; color:#0F1A16; border-radius:8px;
  padding:15px 28px; font-size:13px; font-weight:600; text-decoration:none;
  transition:background .3s ease, transform .3s ease;
}
.sfx-cap__cta:hover{ background:#DDC7AF; transform:translateY(-2px); }

/* ============ STICKY SPLIT (hizmet kartlari) ============ */
@media (min-width:940px){
  .sfx-split{
    display:grid !important;
    grid-template-columns:minmax(0,36%) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    align-items:start;
  }
  .sfx-split-left{
    position:sticky; top:clamp(110px,14vh,150px);
    text-align:left !important;
  }
  .sfx-split-left > span{ margin-left:0 !important; } /* alt cizgi sola yaslansin */
  .sfx-split-right{
    display:grid !important;
    grid-template-columns:1fr !important;
    max-width:620px;
    gap:clamp(16px,2vh,24px) !important;
  }
}

/* sol basliktaki cizgi, sag sutunun ilerlemesiyle dolar (scrub) */
.sfx-line{
  transform:scaleX(var(--p,0)) !important;
  transform-origin:left !important;
  background:#C3A98E !important;
  height:2px !important;
}

/* kart girisi: sagdan + hafif rotate; ikon 200ms gecikmeli pop
   (reveal.js'in [data-rv="right"] temel davranisinin ustune bindirme) */
.rv-armed .sfx-split-right > [data-rv]{
  --rv-tf:translateX(64px) rotate(2deg);
}
.rv-armed .sfx-split-right > [data-rv] > i:first-child{
  opacity:0; transform:scale(.5);
  transition:opacity .45s cubic-bezier(.22,1,.36,1) .2s,
             transform .45s cubic-bezier(.22,1,.36,1) .2s;
}
.rv-armed .sfx-split-right > [data-rv].rv-in > i:first-child{
  opacity:1; transform:none;
}

/* ============ PIN-FLOW — kurumsal yesil vitrin sahnesi ============
   Ana sayfa bolum diliyle: ustte ortali baslik, altinda dolgun kartlar,
   koyu yesil + bronz izgara, bronz isima, altta adim sayaci. */
.sfx-pinflow{ position:relative; background:#16241E !important; }
.sfx-pinflow .sfx-split{
  position:sticky; top:0;
  min-height:100svh;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(20px,3.4vh,34px);
  padding:clamp(84px,11vh,120px) clamp(16px,3vw,44px) clamp(56px,8vh,80px);
  box-sizing:border-box;
  overflow:hidden;
  max-width:none !important;
}
/* bronz izgara dokusu (ana sayfa CTA bantlariyla ayni dil) */
.sfx-pinflow .sfx-split::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.11;
  background-image:
    linear-gradient(rgba(221,199,175,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221,199,175,.5) 1px, transparent 1px);
  background-size:54px 54px;
}
/* adim sayaci: altta ortada */
.sfx-pinflow .sfx-split::after{
  content:attr(data-flowstep);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(22px,3.4vh,36px);
  font-size:13px; font-weight:600; letter-spacing:.34em; color:#C3A98E;
}

/* baslik blogu: ustte, ortali (ana sayfa bolum basligi dili) */
.sfx-pinflow .sfx-split-left{
  position:relative; z-index:1;
  text-align:center !important;
  display:flex; flex-direction:column; align-items:center;
}
.sfx-pinflow .sfx-split-left > div{
  color:#DDC7AF !important;
  letter-spacing:.26em !important;
}
.sfx-pinflow .sfx-split-left h2{
  color:#F2EDE4 !important;
  font-size:clamp(28px,3.2vw,46px) !important;
  line-height:1.16 !important;
  margin-top:clamp(12px,1.6vh,18px) !important;
}
.sfx-pinflow .sfx-split-left > span{ margin:clamp(14px,2vh,20px) auto 0 !important; }
.sfx-line{
  transform:scaleX(var(--p,0)) !important;
  transform-origin:center !important;
  background:#C3A98E !important;
  height:2px !important;
  width:220px !important;
}

/* panel alani: ortada, arkasinda bronz isima */
.sfx-pinflow .sfx-split-right{
  position:relative; z-index:1;
  flex:1 1 auto;
  display:grid !important;
  grid-template-columns:var(--fcols,1fr) !important;
  gap:clamp(20px,2.4vw,36px) !important;
  max-width:var(--fmax,560px);
  width:100%;
  align-items:center;
  align-content:center;
  counter-reset:svc;
}
.sfx-pinflow .sfx-split-right::before{
  content:""; position:absolute; left:50%; top:50%;
  width:min(720px,80vw); height:min(480px,60vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(195,169,142,.16) 0%, rgba(195,169,142,0) 65%);
  pointer-events:none;
}

/* kartlar: ana sayfa karti zenginliginde, bone zemin, katmanli */
.sfx-pinflow .sfx-split-right > *{
  position:relative !important;
  grid-area:auto;
  will-change:transform,opacity;
  min-height:clamp(280px,40vh,370px) !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  text-align:left !important;
  background:#F2EDE4 !important;
  border:0 !important;
  border-radius:12px !important;
  box-shadow:0 34px 70px rgba(0,0,0,.45) !important;
  padding:clamp(24px,3.4vh,36px) clamp(22px,2vw,32px) !important;
  transition:none !important;
  counter-increment:svc;
  overflow:hidden !important;
}
/* bronz degrade dev numara — sol ust */
.sfx-pinflow .sfx-split-right > *::before{
  content:counter(svc, decimal-leading-zero);
  position:absolute; top:clamp(14px,2vh,22px); left:clamp(20px,1.8vw,30px);
  font-size:clamp(56px,5vw,80px); font-weight:600; line-height:1;
  background:linear-gradient(160deg,#C3A98E 0%,#A18B73 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.01em; pointer-events:none;
}
/* alt bronz serit aksani */
.sfx-pinflow .sfx-split-right > *::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:100%;
  background:linear-gradient(90deg,#C3A98E,#DDC7AF);
}
/* ikon: sag ustte koyu yesil rozet icinde krem */
.sfx-pinflow .sfx-split-right > * > i:first-child{
  position:absolute !important; top:clamp(16px,2.2vh,24px); right:clamp(18px,1.6vw,26px);
  margin:0 !important;
  width:54px; height:54px;
  display:flex !important; align-items:center; justify-content:center;
  background:#16241E; border-radius:50%;
  font-size:24px !important;
  color:#DDC7AF !important;
  box-shadow:0 10px 22px rgba(22,36,30,.35);
}
/* baslik + aciklama: koyu, sola, altta */
.sfx-pinflow .sfx-split-right > * > div{
  margin-top:0 !important;
  font-size:clamp(17px,1.4vw,21px) !important;
  color:#16241E !important;
  text-align:left !important;
}
.sfx-pinflow .sfx-split-right > * > div::before{
  content:""; display:block; width:34px; height:2px;
  background:#C3A98E; margin-bottom:12px;
}
.sfx-pinflow .sfx-split-right > * > p{
  font-size:clamp(13px,1vw,14.5px) !important;
  color:#56655D !important;
  max-width:38ch !important;
  text-align:left !important;
}
/* ok: bronz daire rozet */
.sfx-pinflow .sfx-split-right > * > i:last-child{
  margin-top:clamp(14px,2vh,20px) !important;
  padding-top:0 !important;
  width:38px; height:38px;
  display:flex !important; align-items:center; justify-content:center;
  border:1px solid #C3A98E; border-radius:50%;
  color:#A18B73 !important;
  font-size:16px !important;
}
/* pin-flow kartlari reveal gizlemesinden muaf (JS surer) */
.rv-armed [data-rv="flow"]{
  opacity:1; transform:none; transition:none;
}
.rv-armed .sfx-split-right > [data-rv="flow"] > i:first-child{
  opacity:1; transform:none; transition:none;
}
@media (max-width:939px){
  .sfx-pinflow .sfx-split-right{ max-width:440px; }
  .sfx-pinflow .sfx-split-right > *{ min-height:clamp(230px,30vh,290px) !important; }
}

/* ============ SUREC (01-04) — dev arka plan numaralari + parallax ============ */
.sfx-steps{ counter-reset:sfxstep; }
.sfx-steps [data-step]{ position:relative; counter-increment:sfxstep; }
.sfx-steps [data-step]::before{
  content:"0" counter(sfxstep);
  position:absolute; top:-30px; left:50%;
  font-size:clamp(104px,12vw,176px); font-weight:600; line-height:1;
  background:linear-gradient(180deg,#9DC3AB 0%,#679D7E 55%,rgba(103,157,126,.15) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.55; pointer-events:none; z-index:0;
  transform:translateX(-50%) translateY(calc((.5 - var(--p,.5)) * 34px));
  animation:sfxNumBreathe 4.2s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
.sfx-steps [data-step] > *{ position:relative; z-index:1; }

/* ============ OKUMA CUBUGU (sayfa geneli, blog) ============ */
.sfx-readbar{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  pointer-events:none; background:transparent;
}
.sfx-readbar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#A18B73,#C3A98E);
  transform:scaleX(var(--p,0)); transform-origin:left;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .sfx-hero{ height:100svh !important; }
  .sfx-cap{ opacity:0; transform:none; transition:none; }
  .sfx-cap.is-on{ opacity:1; }
  .sfx-hero__curtain{ display:none; }
  .sfx-line{ transform:scaleX(1) !important; }
  .sfx-steps [data-step]::before{ transform:translateX(-50%); }
}

@keyframes sfxNumBreathe{0%{opacity:.4;scale:1}100%{opacity:.68;scale:1.05}}
@media (prefers-reduced-motion:reduce){ .sfx-steps [data-step]::before{animation:none} }