/* RAY hareket katmani - tum sayfalar. Hareket azaltma tercihinde hepsi kapanir. */

/* 3) sayfa gecisi: tarayicinin kendi capraz gecisi (JS yok) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* 1) acilis: gunun ilk girisinde RAY + isin, sonra perde ikiye ayrilir */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none}
.no-intro .intro{display:none}
.intro-half{position:absolute;top:0;bottom:0;width:50.5%;background:#fff;animation:intro-open .75s cubic-bezier(.7,0,.2,1) 1.25s forwards}
.intro-half.l{left:0;--x:-100%}
.intro-half.r{right:0;--x:100%;background:#f4f6f2}
.intro-mark{position:absolute;left:50%;top:50%;width:clamp(170px,30vw,330px);aspect-ratio:533/206;transform:translate(-50%,-50%);animation:intro-mark-out .5s ease 1.1s forwards}
.intro-mark img{width:100%;height:100%;display:block;clip-path:inset(0 100% 0 0);animation:intro-write .7s cubic-bezier(.6,0,.2,1) .1s forwards}
.intro-ray{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#f3c86a 47%,#fff4d6 50%,#f3c86a 53%,transparent 65%) 130% 0/250% 100% no-repeat;-webkit-mask:url(/img/ray_mark.png) center/contain no-repeat;mask:url(/img/ray_mark.png) center/contain no-repeat;animation:intro-sweep .75s ease-in-out .55s forwards}
.intro-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#e7e7e7;transform:scaleY(0);animation:intro-line .5s ease .85s forwards,intro-fade .3s ease 1.3s forwards}
@keyframes intro-fade{to{opacity:0}}
@keyframes intro-write{to{clip-path:inset(0 0 0 0)}}
@keyframes intro-sweep{to{background-position:-30% 0}}
@keyframes intro-mark-out{to{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes intro-line{to{transform:scaleY(1)}}
@keyframes intro-open{to{transform:translateX(var(--x))}}
.intro.done{display:none}

/* 2) ana sayfa: iki dunya canlanir, tiklaninca secilen taraf ekrani doldurur */
.world-games .terrain{transition:opacity .8s,transform 6s ease-out,filter .8s}
.world-games:hover .terrain{opacity:.55;filter:grayscale(.15);transform:scale(1.12) translate(-1.5%,-1%)}
.world-software .orbit,.world-software .orbit:before,.world-software .orbit:after{transition:border-color .6s,transform .8s}
.world-software:hover .orbit{border-color:#9fb596}
.world-software:hover .orbit:before,.world-software:hover .orbit:after{border-color:#9fb596}
.world-software:hover .orbit:before{transform:rotate(55deg)}
.world-software:hover .orbit:after{transform:rotate(-55deg)}
.fx-wipe{position:fixed;z-index:90;pointer-events:none;transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.split.leaving .world{transition:opacity .3s}
.split.leaving .world:not(.chosen){opacity:.25}

/* 4-5-6) kaydirinca beliren ogeler */
.fx-up{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.fx-up.in{opacity:1;transform:none}

/* 4) Games: CWT kartinda sessiz onizleme */
.fx-media{position:relative;display:block;overflow:hidden}
.fx-media img{display:block;width:100%}
.fx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.fx-media.playing video{opacity:1}

/* 5) Software: miknatisli dugme */
.button.fx-mag{transition:background .2s,transform .25s cubic-bezier(.2,.7,.2,1)}

/* 6) Blog: okuma cubugu, kapak yakinlasmasi, icindekiler, ilgili yazilar */
.read-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:#355e42;transform-origin:0 50%;transform:scaleX(0);z-index:50}
.post-card{display:block}
.post-card .post-cover,.related-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.post-card{overflow:hidden}
.post-card:hover .post-cover{transform:scale(1.035)}
.toc{border-left:2px solid #dfe5da;padding:4px 0 4px 18px;margin:28px 0}
.toc ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:15px}
.toc .toc-l3{padding-left:16px;font-size:14px}
.toc a{color:#355e42}
.article-body h2[id],.article-body h3[id]{scroll-margin-top:24px}
.related{margin:56px 0 8px;padding-top:32px;border-top:1px solid #e9e9e9}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.related-card{display:block;padding:20px;background:#f4f6f2;border-radius:6px}
.related-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(30,50,35,.08)}
.related-card h3{margin:6px 0 8px;font-size:19px}
.related-card p.muted{font-size:14px;margin:0}

@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .fx-up{opacity:1;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}