/* forum JUGEND! 2.2 "Offenes Netz" hareket katmanı */
html{--scroll:0;--mx:0;--my:0}

/* Sayfa geçişi yalnız transform ve opacity kullanır. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fj-vt-out .24s var(--fj-ease,ease) both}
  ::view-transition-new(root){animation:fj-vt-in .46s var(--fj-ease,ease) both}
  .fj-header{view-transition-name:fj-header}
}
@keyframes fj-vt-out{to{opacity:0;transform:translateY(-18px) scale(.992)}}
@keyframes fj-vt-in{from{opacity:0;transform:translateY(24px) scale(1.006)}}

/* Eski deste ve pinned şerit durumları güvenli biçimde etkisizdir. */
.js .kreatus-page-content>.kreatus-component-wrapper,
.js .kreatus-page-content>.kreatus-component-wrapper.is-pinned{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  z-index:auto!important;
}
.js .kreatus-page-content>.kreatus-component-wrapper>*{transform:none}
.js .is-pinned .fj-strip-section{position:relative;top:auto;height:auto;display:block;overflow:clip}
.js .is-pinned .fj-strip{overflow-x:auto;cursor:grab;scroll-snap-type:x mandatory}
.js .is-pinned .fj-strip__track{transform:none}

/* Hero içindeki renk alanı büyük filtreler kullanmaz. */
.fj-mesh{position:absolute;inset:-18%;z-index:0;pointer-events:none;overflow:hidden;transform:translate3d(calc(var(--mx)*-18px),calc(var(--my)*-12px),0)}
.fj-mesh::before{
  content:"";
  position:absolute;
  inset:-22%;
  background:
    radial-gradient(38% 44% at 18% 24%,rgba(29,95,209,.2),transparent 74%),
    radial-gradient(34% 42% at 82% 20%,rgba(232,49,126,.18),transparent 72%),
    radial-gradient(46% 54% at 67% 88%,rgba(255,212,0,.22),transparent 72%),
    radial-gradient(32% 40% at 12% 84%,rgba(23,163,154,.16),transparent 74%);
  animation:fj-mesh-turn 72s linear infinite;
  transform-origin:center;
}
.fj-mesh.is-off::before{animation-play-state:paused}
@keyframes fj-mesh-turn{to{transform:rotate(360deg)}}
.fj-hero>.fj-container{position:relative;z-index:2}

/* Her bölüm erişilebilirlik ağacından gizli bir sinyal alanı taşır. */
.fj-stage>section{--fj-local:0;--node-color:var(--fj-blau);position:relative;isolation:isolate}
.fj-stage:nth-child(8n+2)>section{--node-color:var(--fj-pink)}
.fj-stage:nth-child(8n+3)>section{--node-color:var(--fj-gelb)}
.fj-stage:nth-child(8n+4)>section{--node-color:var(--fj-tuerkis)}
.fj-stage:nth-child(8n+5)>section{--node-color:var(--fj-orange)}
.fj-stage:nth-child(8n+6)>section{--node-color:var(--fj-gruen)}
.fj-stage:nth-child(8n+7)>section{--node-color:var(--fj-rot)}
.fj-stage:nth-child(8n)>section{--node-color:var(--fj-lime)}
.fj-signal{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:var(--node-color)}
.fj-stage>section>.fj-container,.fj-stage>section>.fj-marquee__track,.fj-stage>section>.fj-marquee__inner{position:relative;z-index:1}
.fj-signal__id{
  position:absolute;
  top:16px;
  right:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  height:28px;
  padding:0 9px;
  border:1px solid rgba(15,30,60,.22);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:var(--fj-ink);
  font-family:var(--fj-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
}
.fj-on-dark .fj-signal__id{border-color:rgba(255,255,255,.36);background:rgba(9,21,48,.48);color:#fff}
.fj-signal__orbit{
  position:absolute;
  right:clamp(-112px,-7vw,-42px);
  top:clamp(70px,16%,170px);
  width:clamp(190px,26vw,380px);
  aspect-ratio:1;
  border:1px solid rgba(15,30,60,.1);
  border-radius:50%;
  opacity:.72;
  translate:calc((var(--fj-local) - .5)*22px) calc((var(--fj-local) - .5)*-34px);
  rotate:calc((var(--fj-local) - .5)*18deg);
}
.fj-on-dark .fj-signal__orbit{border-color:rgba(255,255,255,.16)}
.fj-signal__dot{position:absolute;width:var(--d,10px);height:var(--d,10px);border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(255,255,255,.52)}
.fj-on-dark .fj-signal__dot{box-shadow:0 0 0 5px rgba(9,21,48,.4)}
.fj-signal__dot:nth-child(1){--d:13px;--c:var(--fj-blau);left:7%;top:45%}
.fj-signal__dot:nth-child(2){--d:9px;--c:var(--fj-pink);left:42%;top:-5px}
.fj-signal__dot:nth-child(3){--d:15px;--c:var(--fj-gelb);right:-7px;top:38%}
.fj-signal__dot:nth-child(4){--d:8px;--c:var(--fj-gruen);left:27%;bottom:5%}
.fj-signal__dot:nth-child(5){--d:11px;--c:var(--fj-orange);right:18%;bottom:14%}
.fj-signal__dot:nth-child(6){--d:7px;--c:var(--fj-tuerkis);left:50%;top:48%}

@supports(animation-timeline:view()){
  .fj-signal__orbit{animation:fj-orbit-view linear both;animation-timeline:view(block);animation-range:entry 0% exit 100%}
}
@keyframes fj-orbit-view{0%,100%{scale:.86;opacity:.34}45%,55%{scale:1;opacity:.78}}

/* İçerik bir defa açılır, geometri ve satır kırılması değişmez. */
.fj-rotor__word{visibility:hidden}
.fj-rotor__word.is-in{visibility:visible}
.fj-rotor__word.is-out{visibility:hidden}
.js .fj-reveal{opacity:0;transform:translateY(22px);clip-path:inset(0 0 16px 0 round 16px);transition:opacity .7s var(--fj-ease),transform .76s var(--fj-ease),clip-path .76s var(--fj-ease);transition-delay:calc(var(--i,0)*65ms)}
.js .fj-reveal.is-in,.js.no-reveal .fj-reveal{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}
.js .fj-dev img{opacity:1;transform:scale(1);clip-path:inset(0 round 0);transition:opacity .72s var(--fj-ease),transform 1s var(--fj-ease),clip-path .9s var(--fj-ease)}
.js .fj-dev:not(.is-in) img{opacity:.58;transform:scale(1.045);clip-path:inset(8% round 22px)}

/* Hero metni kaybolmaz. Fotoğraflar sınırlı bir derinlik hareketi alır. */
.js .fj-hero__text{transform:translate3d(0,calc(var(--hp,0)*-18px),0)}
@media(min-width:901px){
  .js .fj-hero .fj-pile{transform:translate3d(0,calc(var(--hp,0)*22px),0);transition:transform .12s linear}
  .js .fj-hero .fj-polaroid{transform:rotate(var(--r)) translate3d(0,var(--hero-y,0px),0)}
  .js .fj-hero .fj-polaroid:hover{transform:rotate(0deg) translate3d(0,calc(var(--hero-y,0px) - 12px),0) scale(1.035)}
}

/* Masaüstü eğim ve imleç dokunmatik ortamlara kurulmaz. */
@media(hover:hover) and (pointer:fine){
  .js .fj-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .28s var(--fj-ease),box-shadow .3s}
  .js .fj-mag{transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .3s var(--fj-spring)}
  .js.fj-cursor-on body,.js.fj-cursor-on a,.js.fj-cursor-on button{cursor:none}
  .js.fj-cursor-on :is(input,textarea,select,iframe){cursor:auto}
  .fj-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--fj-pink);will-change:transform}
  .fj-cursor__ring{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--fj-ink);border-radius:50%;will-change:transform;transition:width .2s,height .2s,margin .2s,border-color .2s}
  .fj-cursor-hover .fj-cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--fj-pink)}
  .fj-cursor-down .fj-cursor__ring{width:26px;height:26px;margin:-13px 0 0 -13px}
  .fj-cursor-dark .fj-cursor{background:var(--fj-gelb)}
  .fj-cursor-dark .fj-cursor__ring{border-color:#fff}
}

/* İlerleme ve bölüm düğümü */
.fj-progress{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:60px;height:60px;z-index:801;pointer-events:none;opacity:0;transition:opacity .25s}
.fj-progress.is-on{opacity:1}
.fj-progress circle{fill:none;stroke-width:3.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.fj-progress__track{stroke:rgba(15,30,60,.16)}
.fj-progress__bar{stroke:var(--fj-pink);stroke-dasharray:163.4;stroke-dashoffset:calc(163.4*(1 - var(--scroll)))}
.fj-chapter{position:fixed;left:18px;top:50%;z-index:800;pointer-events:none;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--fj-body);font-weight:700;font-size:12px;letter-spacing:.07em;color:var(--fj-ink);display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .3s}
.fj-chapter.is-on{opacity:.82}
.fj-chapter i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--fj-pink))}
.fj-chapter span{display:inline-block;transition:transform .24s var(--fj-ease),opacity .2s}
.fj-chapter.is-flip span{transform:translateX(10px);opacity:0}
.fj-cursor-dark .fj-chapter{color:#fff}
@media(max-width:1280px){.fj-chapter{display:none}}

/* Sayaç rulosu kendi genişliğini korur. */
.fj-odo{display:inline-flex;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.fj-odo__d{display:inline-block;position:relative;height:1em;width:.6em;text-align:center}
.fj-odo__d>span{display:block;transform:translateY(calc(var(--v,0)*-1em));transition:transform 1.25s cubic-bezier(.18,.9,.2,1);transition-delay:calc(var(--k,0)*75ms)}
.fj-odo__d>span>i{display:block;height:1em;font-style:normal}
.fj-odo__s{display:inline-block}

@media(max-width:700px){
  .fj-signal__id{top:12px;right:12px;min-width:54px;height:26px;font-size:10px}
  .fj-signal__orbit{right:-92px;top:80px;width:210px;opacity:.5}
  .fj-progress{right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
  .js .fj-hero__text{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .fj-mesh{transform:none}
  .fj-mesh::before{animation:none}
  .fj-signal__orbit{translate:none;rotate:none;animation:none}
  .fj-cursor,.fj-cursor__ring,.fj-chapter{display:none!important}
  .js .fj-reveal,.js .fj-dev img,.js .fj-dev:not(.is-in) img{opacity:1;transform:none;clip-path:none}
  .js .fj-hero__text,.js .fj-hero .fj-pile,.js .fj-hero .fj-polaroid{transform:none}
  .fj-odo__d>span{transition:none}
}