/* ==========================================================================
   Mycb — görsel efekt katmanı (3D sahneler, videolar, geçişler)
   Sayfaların kendi inline stillerinin ÜZERİNE ince dokunuşlar ekler.
   JS yüklenmezse veya "hareketi azalt" açıksa site eski haliyle çalışır.
   ========================================================================== */

/* ---------- Sayfa geçişleri (Chrome/Edge: çapraz belge View Transitions) ---------- */
@view-transition{navigation:auto}
nav{view-transition-name:site-nav}
::view-transition-old(root){animation:fx-out .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:fx-in .45s cubic-bezier(0,0,.2,1) both}
@keyframes fx-out{to{opacity:0;transform:translateY(-10px) scale(.992)}}
@keyframes fx-in{from{opacity:0;transform:translateY(14px) scale(1.006)}}

/* View Transitions desteklemeyen tarayıcılar için perde */
.fx-curtain{position:fixed;inset:66px 0 0;z-index:290;background:var(--dk,#1A1A1A);opacity:0;pointer-events:none;transition:opacity .22s ease}
html.fx-leaving .fx-curtain{opacity:1}

/* ---------- Kaydırma ilerleme çizgisi ---------- */
.fx-progress{position:fixed;top:65px;left:0;height:2px;width:100%;z-index:301;background:linear-gradient(90deg,var(--red,#C13535),#E07070);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- 3D sahne tuvalleri ---------- */
.fx3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.fx3d.on{opacity:1}
.hero .fx3d{z-index:0}
.hero .hcnt,.hero .sind{z-index:1}
.phero .fx3d{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 70%)}
.phero .ph-in{z-index:1}
/* fare ile hafifçe kayan kırmızı hale */
html.fx .hero .hglow{transform:translate(calc(-50% + var(--mx,0) * 60px),calc(var(--my,0) * 40px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
html.fx .hero .hgrid{transform:translateY(calc(var(--sy,0) * 1px));will-change:transform}
/* başlık okunurluğu için metnin arkasına yumuşak koyu hale */
.hero .hcnt::before{content:'';position:absolute;inset:-8% -12% 10%;background:radial-gradient(ellipse at 50% 40%,rgba(26,26,26,.72) 0%,rgba(26,26,26,.35) 45%,transparent 70%);z-index:-1;pointer-events:none}

/* ---------- 3D açılış animasyonu (mevcut .rv sınıfını zenginleştirir) ---------- */
html.fx .rv{transform:perspective(900px) translateY(28px) rotateX(10deg);transform-origin:50% 100%;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rvd,0s)}
html.fx .rv.vis{transform:none}

/* ---------- Kartlarda 3D eğim + parıltı ---------- */
html.fx .tilt-on{position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .35s cubic-bezier(.2,.7,.2,1),background .22s,border-color .2s,box-shadow .3s;transition-delay:0s;will-change:transform}
html.fx .tilt-on.tilting{transition:transform .08s linear,background .22s,border-color .2s,box-shadow .3s}
html.fx .fc.tilt-on:hover,html.fx .wc.tilt-on:hover{--lift:-4px}
html.fx .kc.tilt-on:hover{--lift:-3px}
html.fx .kc-feat.tilt-on:hover{--lift:0px}
.fx-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),transparent 45%);z-index:3;mix-blend-mode:screen}
.tilting>.fx-glare{opacity:1}
.fc>.fx-glare,.wc>.fx-glare,.kc:not(.kc-feat)>.fx-glare,.tst>.fx-glare{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(193,53,53,.08),transparent 45%);mix-blend-mode:normal}

/* sayılar sayarken genişlik zıplamasın */
.hsin,.ssin,.phsn,.kc-num,.icn,.tn{font-variant-numeric:tabular-nums}

/* ---------- Video kareleri ---------- */
.fxv{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#111}
.fx-frame{position:relative;border-radius:6px;overflow:hidden;background:#0d0d0d;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 0 1px rgba(193,53,53,.08),0 0 60px -10px rgba(193,53,53,.25)}
.fx-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 28%);border-radius:inherit}
.fx-live{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(10,10,10,.72);backdrop-filter:blur(6px);padding:5px 10px;border-radius:2px;border:1px solid rgba(255,255,255,.08)}
.fx-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red-l,#DC4848);box-shadow:0 0 0 0 rgba(220,72,72,.6);animation:fx-ping 1.6s infinite}
@keyframes fx-ping{70%{box-shadow:0 0 0 7px rgba(220,72,72,0)}100%{box-shadow:0 0 0 0 rgba(220,72,72,0)}}
.fx-play{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}
.fx-play::before{content:'';width:64px;height:64px;border-radius:50%;background:rgba(193,53,53,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.fx-frame.paused .fx-play{display:flex}

/* Alt sayfa hero: sağda eğik video ekranı */
.phmedia{margin:36px 0 0}
.phmedia figcaption{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:12px}
@media(min-width:1100px){
  .phero.has-media{padding-top:72px;padding-bottom:72px}
  .phero.has-media .ph-in{min-height:360px}
  .phero.has-media .ph-in>:not(.phmedia){max-width:calc(100% - min(46%,540px) - 48px)}
  .phmedia{position:absolute;right:0;top:50%;width:min(46%,540px);margin:0;transform:translateY(-50%) perspective(1400px) rotateY(-16deg) rotateX(5deg);transform-origin:100% 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .phmedia:hover{transform:translateY(-50%) perspective(1400px) rotateY(-6deg) rotateX(2deg)}
  .phmedia figcaption{text-align:right}
}

/* Ana sayfa: "Sahada Nasıl Çalışır?" video vitrini */
.fxshow{background:var(--dk,#1A1A1A);color:#fff;position:relative;overflow:hidden}
.fxshow::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(193,53,53,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(193,53,53,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 70%)}
.fxshow .mw{position:relative}
.fxs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
@media(max-width:960px){.fxs-grid{grid-template-columns:1fr;gap:32px}}
.fxs-tabs{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.fxs-tab{display:block;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-left:3px solid transparent;padding:18px 20px;cursor:pointer;font-family:var(--fb);color:#fff;transition:background .25s,border-color .25s;position:relative;overflow:hidden}
.fxs-tab:hover{background:rgba(255,255,255,.06)}
.fxs-tab[aria-selected="true"]{background:rgba(193,53,53,.1);border-left-color:var(--red,#C13535)}
.fxs-tab b{display:block;font-family:var(--fd);font-size:19px;font-weight:700;margin-bottom:4px}
.fxs-tab span{display:block;font-size:13px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.5)}
.fxs-tab i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red,#C13535);transform-origin:0 50%;transform:scaleX(0)}
.fxs-tab[aria-selected="true"] i{animation:fx-bar var(--dur,10s) linear forwards}
.fxshow.hold .fxs-tab i{animation-play-state:paused}
@keyframes fx-bar{to{transform:scaleX(1)}}
.fxs-stage{perspective:1600px}
.fxs-screen{position:relative;transform:rotateY(-10deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fxs-stage:hover .fxs-screen{transform:rotateY(-3deg) rotateX(1deg)}
.fxs-screen .fx-frame{aspect-ratio:16/9}
.fxs-screen .fxv{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .6s ease}
.fxs-screen .fxv.act{opacity:1}
.fxs-screen::after{content:'';position:absolute;left:8%;right:8%;bottom:-38px;height:40px;background:radial-gradient(ellipse at 50% 0,rgba(193,53,53,.35),transparent 70%);filter:blur(8px);transform:translateZ(-40px)}
.fxs-link{display:inline-flex;margin-top:22px}
@media(max-width:960px){.fxs-screen,.fxs-stage:hover .fxs-screen{transform:none}}

/* ---------- Hareketi azalt tercihi ---------- */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.fx .rv{transform:none;transition:opacity .3s}
  .fx3d{display:none}
  .phmedia,.phmedia:hover,.fxs-screen,.fxs-stage:hover .fxs-screen{transform:none}
  @media(min-width:1100px){.phmedia,.phmedia:hover{transform:translateY(-50%)}}
  .fxs-tab i{display:none}
}