/* App Store bölümü. Başlık ana sayfadakiyle aynı konum ve ölçüde; altında iki uygulama. Boşluklar φ / Fibonacci */
.page[data-page="app-store"]{--D:clamp(150px,24vh,230px)}
.as{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4vw var(--D)}
.as-sp{flex:none;height:120px;margin-top:clamp(14px,3.5vh,34px)}

/* Başlık: harfler ayrı, "İ"nin noktası ayrı bir karakter gibi davranır */
#asH{position:relative}
/* ikinci satır sabit durur, hiç kaymaz: sondaki ? ve ! işaretlerinin ortalama yarı genişliği kadar baştan solda */
#asH .l2{position:relative;left:-.1875em}
#asH .ls{position:relative;display:inline-block;transform-origin:50% 85%}
#asH.pre .ls{opacity:0}
.as-mk{position:absolute;left:100%;bottom:0;margin-left:.03em;display:inline-block;text-align:left;transform-origin:30% 60%}
.as-dot{position:absolute;left:0;top:0;display:block;opacity:0;pointer-events:none}
.as-dot b{display:block;width:100%;height:100%;border-radius:50%;background:#000}
.as-ray{position:absolute;left:0;top:0;width:.03em;height:.14em;margin:-.07em 0 0 -.015em;border-radius:1em;background:#000;pointer-events:none}

/* Uygulamalar */
.as-apps{--s:clamp(89px,19vh,178px);position:absolute;left:0;right:0;bottom:clamp(89px,13.5vh,144px);display:flex;justify-content:center;gap:clamp(21px,3.8vw,55px);padding:0 4vw}
.as-app{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(21px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.as-app:last-child{transition-delay:.13s}
.as.apps .as-app{opacity:1;transform:none}
/* İkon: Web Oyunlar kapaklarıyla aynı his. İmlecin altında siyah-beyaz yer değiştirir, basınca tamamı döner */
.as-ic{position:relative;display:block;width:var(--s);height:var(--s)}
.as-os{position:absolute;left:50%;bottom:100%;margin-bottom:13px;transform:translateX(-50%);font-size:11px;font-weight:300;font-style:normal;line-height:1;letter-spacing:.3em;margin-right:-.3em;white-space:nowrap}
.as-sh{position:absolute;inset:0;background:#000;border-radius:22.37%;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.as-lf{position:relative;display:block;width:100%;height:100%;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.as-cv{position:relative;display:block;isolation:isolate;width:100%;height:100%;border-radius:22.37%;overflow:hidden;background:#fff;transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.as-cv::after{content:"";position:absolute;inset:0;z-index:2;border:2px solid #000;border-radius:inherit;pointer-events:none}
.as-cv img{position:absolute;inset:0;width:100%;height:100%;display:block}
.as-spot{position:absolute;left:0;top:0;z-index:1;width:0;height:0;mix-blend-mode:difference;transform:translate(var(--mx,0),var(--my,0));pointer-events:none}
.as-spot::before{content:"";position:absolute;left:calc(var(--s)*-.382);top:calc(var(--s)*-.382);width:calc(var(--s)*.764);height:calc(var(--s)*.764);border-radius:50%;background:#fff;transform:scale(0);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.as-ic.hot .as-spot::before{transform:scale(1)}
.as-ic:active .as-spot::before{transform:scale(3.4)}
.as-ic.hot .as-sh{transform:translate(5px,5px)}
.as-ic.hot .as-lf{transform:translate(-3px,-3px)}
.as-ic:active .as-lf{transform:translate(5px,5px);transition-duration:.08s}
.as-app h2{margin-top:13px;font:500 clamp(14px,2.1vh,18px)/1 Fredoka,Montserrat,system-ui,sans-serif;letter-spacing:.01em}
.as-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}
.as-b{position:relative;display:block;overflow:hidden;isolation:isolate;padding:.72em .6em;text-align:center;border:2px solid #000;border-radius:10px;color:#000;font:500 clamp(10.5px,.87vw,12.5px)/1 Montserrat,system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:color .25s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.as-b::before{content:"";position:absolute;z-index:-1;inset:0;background:#000;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.as-b:hover{color:#fff}
.as-b:hover::before{transform:none}
.as-b:active{transform:scale(.95)}

/* Ortadaki yükleme göstergesi: ikonla aynı yükseklikte, dikeyde ortalı */
.as-wip{flex:none;width:clamp(144px,16.2vw,233px);height:var(--s);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;opacity:0;transform:translateY(21px);transition:opacity .6s ease .07s,transform .8s cubic-bezier(.2,.8,.2,1) .07s}
.as.apps .as-wip{opacity:1;transform:none}
.as-pc{display:block;font:800 clamp(26px,4.2vh,34px)/1 Montserrat,system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.as-bar{display:block;width:100%;height:13px;padding:2px;border:2px solid #000;border-radius:10px}
.as-bar i{display:block;width:100%;height:100%;background:#000;border-radius:5px;transform:scaleX(.66);transform-origin:0 50%}
.as-wip p{margin:0;font-weight:300;font-size:13px;line-height:1.382}