:root{color-scheme:light;--ink:#000;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0}
html{height:100dvh}
body{height:100%;display:flex;flex-direction:column;overflow:hidden;background:#fff;color:var(--ink);font-family:Montserrat,system-ui,Arial,sans-serif}
header{position:relative;flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(12px,2.6vh,26px) 4vw}
.logo{display:inline-flex;align-items:center;gap:14px}
.logo-box{width:76px;height:40px;display:block;flex:none}
.logo span{display:inline-block;font-weight:300;font-size:15px;line-height:1;letter-spacing:.5em;margin-right:-.5em;transform:translateY(.8px)}
nav{position:relative;display:flex;gap:2px;padding:5px;border:2px solid var(--ink);border-radius:10px}
header nav{position:absolute;left:50%;transform:translateX(-50%)}
nav a{position:relative;z-index:1;color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;padding:9px 16px;border-radius:6px;transition:color .25s;white-space:nowrap}
nav a.hot{color:#fff}
.pill{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;background:var(--ink);border-radius:6px;transition:left .3s cubic-bezier(.3,1.4,.5,1),width .3s}
.hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3.5vh,34px);text-align:center;padding:0 4vw}
h1{font-size:clamp(27.6px,min(7.36vw,10.58vh),92px);line-height:1.1;letter-spacing:-.03em}
h1 .l1{display:block;font-weight:800}
h1 .l2{display:block;font-weight:300}
.w{display:inline-block;white-space:nowrap}
.c{position:relative;display:inline-block;text-align:center;will-change:transform,opacity;animation:drop .5s steps(5) backwards;animation-delay:calc(var(--i)*60ms + .2s)}
.c::after{content:"";position:absolute;inset:.1em 0 .05em;background:var(--ink);transform:scaleY(0);transform-origin:0 100%;will-change:transform;animation:blk .6s steps(5) backwards;animation-delay:calc(var(--i)*60ms + .2s)}
@keyframes drop{from{opacity:0;transform:translateY(-.5em)}to{opacity:1;transform:none}}
@keyframes blk{0%{transform:scaleY(0);transform-origin:0 0}40%{transform:scaleY(1);transform-origin:0 0}40.1%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}
h1.done .c{transition:transform .2s steps(3);will-change:auto}
h1.done .c::after{will-change:auto}
h1.done .c:hover{transform:translateY(-.14em)}
.cur{display:inline-block;width:.3em;height:.3em;margin-left:.14em;background:var(--ink);animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}

.stage{position:relative;flex:none;width:162px;height:100px;margin-top:clamp(10px,2.5vh,26px)}
.stage .ico{position:absolute;inset:0;margin:auto;width:88px;height:88px;z-index:3}
.ico svg{width:100%;height:100%;display:block;fill:var(--ink)}
.ico.in{animation:pop .48s cubic-bezier(.22,1.4,.36,1) both}
.ico.out{animation:away .24s ease-in both}
@keyframes pop{from{opacity:0;transform:scale(.38) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes away{to{opacity:0;transform:scale(1.26) rotate(10deg)}}

/* Minimalist, uzun soluklu ve tatlı yan/çevre animasyonu (320x160 sahne, merkeze kilitli) */
.playfield{position:absolute;left:50%;top:50%;width:320px;height:160px;margin:-80px 0 0 -160px;pointer-events:none;z-index:1;overflow:visible}

/* Yavaş nefes alan ve dönen zarif noktalı iç hale */
.halo-spin{transform-origin:160px 80px;animation:haloTurn 18s linear infinite}
@keyframes haloTurn{
  0%{transform:rotate(0deg) scale(.96)}
  50%{transform:rotate(180deg) scale(1.05)}
  100%{transform:rotate(360deg) scale(.96)}
}

/* Uzun süreli (9sn ve 12sn) süzülen kuyruklu yıldız izleri */
.trail-1{stroke-dasharray:55 495;animation: dashGlide1 9s linear infinite}
.trail-2{stroke-dasharray:40 510;animation: dashGlide2 12s linear infinite}
@keyframes dashGlide1{from{stroke-dashoffset:550}to{stroke-dashoffset:0}}
@keyframes dashGlide2{from{stroke-dashoffset:0}to{stroke-dashoffset:550}}

/* Yanlarda uzun ve tatlı bir dalga rotasında (8-10sn) süzülen minimalist semboller */
.float-a{animation:driftA 8.5s ease-in-out infinite}
.float-b{animation:driftB 9.5s ease-in-out infinite}
.float-c{animation:driftC 10.5s ease-in-out infinite}
.float-d{animation:driftD 9s ease-in-out infinite}

@keyframes driftA{
  0%,100%{transform:translate(0,0) rotate(-12deg) scale(.85);opacity:.45}
  25%{transform:translate(-10px,-14px) rotate(15deg) scale(1.12);opacity:.95}
  50%{transform:translate(6px,-24px) rotate(-8deg) scale(.95);opacity:.7}
  75%{transform:translate(12px,-10px) rotate(18deg) scale(1.08);opacity:.9}
}
@keyframes driftB{
  0%,100%{transform:translate(0,0) rotate(10deg) scale(.9);opacity:.5}
  33%{transform:translate(12px,14px) rotate(-18deg) scale(1.15);opacity:.95}
  66%{transform:translate(-8px,22px) rotate(14deg) scale(.85);opacity:.65}
}
@keyframes driftC{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(.85);opacity:.45}
  30%{transform:translate(-12px,12px) rotate(45deg) scale(1.1);opacity:.9}
  65%{transform:translate(8px,-14px) rotate(90deg) scale(.92);opacity:.75}
}
@keyframes driftD{
  0%,100%{transform:translate(0,0) scale(.8);opacity:.4}
  40%{transform:translate(10px,-16px) scale(1.15);opacity:.9}
  75%{transform:translate(-8px,10px) scale(.95);opacity:.65}
}

/* Her ikon değişiminde tatlı ve sade tekli dalga halkası */
.puff{position:absolute;left:50%;top:50%;width:94px;height:94px;margin:-47px 0 0 -47px;border:1.8px solid var(--ink);border-radius:50%;pointer-events:none;z-index:2;animation:puffOut .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes puffOut{
  0%{opacity:.28;transform:scale(.76)}
  100%{opacity:0;transform:scale(1.32)}
}

.dome{position:relative;flex:none;width:130vw;margin:0 -15vw;height:clamp(150px,24vh,230px);overflow:hidden;background:#000;color:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.6vh,24px);padding-top:3vh;transform:translateY(50px);opacity:0;animation:rise 1s .4s cubic-bezier(.2,.8,.2,1) forwards}
.dome-game-slot{position:absolute;z-index:1;inset:0 15vw}
.dome-game-slot iframe{display:block;width:100%;height:100%;border:0;background:#000}
.dome-controls{position:absolute;inset:0;pointer-events:none}
.dome-step{position:absolute;z-index:2;top:calc(63% - 23px);width:46px;height:46px;padding:7.2px;border:0;background:transparent;color:#fff;opacity:.82;cursor:pointer;pointer-events:auto;transition:opacity .2s,transform .2s}
.dome-step svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.dome-step:hover{opacity:1}
.dome-step:disabled{opacity:.35;cursor:default}
.dome-step.back{left:calc(15vw + clamp(26px,7vw,78px))}
.dome-step.forward{right:calc(15vw + clamp(26px,7vw,78px))}
@keyframes rise{to{transform:none;opacity:1}}
@media(max-width:700px){.logo span{display:none}nav a{padding:8px 9px;font-size:11.5px}header{gap:6px}header nav{position:relative;left:auto;transform:none}.stage{transform:scale(.8)}.dome{margin:0 -30vw;width:160vw}.dome-game-slot{left:30vw;right:30vw}.dome-step.back{left:calc(30vw + 12px)}.dome-step.forward{right:calc(30vw + 12px)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important}}

/* Sayfa sistemi: üst bar hep sabit, altı bölümlere göre değişir */
#pages{position:relative;flex:1;min-height:0;overflow:hidden}
.page{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(var(--from,24px));transition:opacity .16s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s}
.page.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .16s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s}
.pg-body{margin:auto;width:100%;padding:0 6vw;text-align:center}
.pg-body h2{font-size:clamp(28px,6vw,64px);font-weight:800;letter-spacing:-.03em}
.pg-body p{margin-top:12px;font-weight:300;font-size:clamp(14px,2vw,18px)}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px auto 0;max-width:560px}
.pg-grid i{aspect-ratio:1.618;border:2px solid var(--ink);border-radius:10px}

/* Menü tıklaması: kutu hafifçe basılır, çevresinde ince bir halka yayılıp söner */
.pill::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);border-radius:6px;opacity:0;pointer-events:none}
.pill.tap{animation:pillTap .36s cubic-bezier(.3,1.5,.5,1)}
.pill.tap::after{animation:pillRing .55s ease-out}
@keyframes pillTap{0%{transform:scale(1)}30%{transform:scale(.9,.84)}100%{transform:scale(1)}}
@keyframes pillRing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.28,1.7)}}