/* Hakkımızda — "Oyun Dünyasına Renk Katıyoruz" (harf animasyonu css/style.css'teki .c/.w ile ortak) */
/* Ana sayfadaki .hero + kubbe düzeniyle aynı yerleşim: altta kubbe kadar boşluk, başlığın altında sahne kadar boşluk */
.ab{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4vw var(--D)}
.ab-wrap{--u:clamp(27.6px,min(7.36vw,10.58vh),92px);position:relative;font-size:var(--u);text-align:center}
.ab-wrap h1{font-size:1em}
.ab-sp{flex:none;height:100px;margin-top:calc(clamp(14px,3.5vh,34px) + clamp(10px,2.5vh,26px))}

/* "Renk": hep renkli; harfler dalga gibi zıplar, gradyan hızla akar, renk tonu döner, konfeti patlar */
.rk{position:relative;animation:rkHue 7s linear infinite}
@keyframes rkHue{to{filter:hue-rotate(360deg)}}
.rk .c{color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(100deg,#ff3d81 0%,#ff9a1f 20%,#ffd23f 38%,#2fd47a 54%,#2fc4ff 70%,#8b5cff 86%,#ff3d81 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;
  animation:drop .5s steps(5) backwards,rkShine 1.6s linear infinite,rkHop 1.9s cubic-bezier(.3,0,.3,1) infinite;
  animation-delay:calc(var(--i)*60ms + .2s),calc(var(--k)*-.16s),calc(2.4s + var(--k)*.14s)}
.rk .c::after{display:none}
@keyframes rkShine{to{background-position:-300% 0}}
@keyframes rkHop{0%,55%,100%{transform:none}18%{transform:translateY(-.2em) scale(1.08,.94) rotate(-4deg)}34%{transform:translateY(0) scale(.96,1.05) rotate(3deg)}44%{transform:translateY(-.06em) rotate(-1deg)}}
.rk-dot{position:absolute;left:var(--x);top:.25em;width:.09em;height:.09em;margin:-.045em;border-radius:50%;background:var(--c);opacity:0;pointer-events:none;animation:rkPop 2.4s var(--t) ease-out infinite}
.rk-dot:nth-of-type(3n){border-radius:0;transform:rotate(45deg)}
@keyframes rkPop{0%{opacity:0;transform:translate(0,.2em) scale(.3)}8%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(200deg)}}

/* "Renk"e laf atan minik balon: "gerçekten mi?" yazılır, sonra kahkaha ("hahaha"), balon patlar; 10 sn döngü */
.rk-say{position:absolute;left:0;right:0;top:1.02em;display:flex;justify-content:center;pointer-events:none}
.bub{position:relative;display:grid;align-items:center;justify-items:center;padding:.5em .6em;border:1.5px solid #000;border-radius:.9em;background:#fff;font-size:.12em;line-height:1;white-space:nowrap;transform-origin:30% 0;animation:bubLife 10s 3.4s infinite backwards}
.bub::before,.bub::after{content:"";position:absolute;left:18%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.bub::before{top:calc(-.7em - 1.5px);width:1.3em;height:calc(.7em + 1.5px);background:#000}
.bub::after{top:calc(-.7em - 1.5px + 2.2px);margin-left:1.8px;width:calc(1.3em - 3.6px);height:calc(.7em + 1.5px - 2.2px + .5px);background:#fff}
.bub b{grid-area:1/1;font-weight:500;letter-spacing:.03em}
.b1{animation:bubType 10s steps(13) 3.4s infinite backwards}
.b2{font-weight:800;letter-spacing:.14em;opacity:0;animation:bubLaugh 10s 3.4s infinite backwards}
@keyframes bubLife{
  0%,3%{opacity:0;transform:scale(0)}
  7%{opacity:1;transform:scale(1.12)}
  10%,45%{opacity:1;transform:scale(1)}
  47%{transform:scale(1.05,.92)}
  50%{transform:rotate(-3deg) scale(1.08)}53%{transform:rotate(3deg) scale(1.1)}56%{transform:rotate(-3deg) scale(1.08)}59%{transform:rotate(2deg) scale(1.06)}62%,68%{opacity:1;transform:none}
  72%{opacity:0;transform:scale(1.3)}
  100%{opacity:0;transform:scale(1.3)}}
@keyframes bubType{0%,9%{clip-path:inset(-.4em 100% -.4em 0)}20%,44%{clip-path:inset(-.4em -.2em -.4em 0);opacity:1}46%,100%{opacity:0;clip-path:inset(-.4em -.2em -.4em 0)}}
@keyframes bubLaugh{0%,45%{opacity:0;transform:translateY(.4em)}48%{opacity:1;transform:none}50%{transform:translateY(-.12em)}52%{transform:translateY(.1em)}54%{transform:translateY(-.12em)}56%{transform:translateY(.1em)}58%{transform:translateY(-.08em)}60%,68%{opacity:1;transform:none}71%,100%{opacity:0}}

/* Çıkartmalar: başlığa yakın, büyük, monokrom; her biri kendi karakterinde oynar */
.st{position:absolute;z-index:2;display:block;font-style:normal;pointer-events:none;opacity:0;scale:.7}
.st .in{display:block}
.page[data-page="hakkimizda"].seen .st{animation:stPop .7s var(--d) cubic-bezier(.3,1.7,.5,1) both}
@keyframes stPop{0%{opacity:0;transform:scale(.2) rotate(calc(var(--r,0deg) - 40deg))}100%{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
.st svg{display:block;width:100%;height:100%;overflow:visible}

/* gülen yüz: göz kırpar, hafifçe sallanır */
.s-face{width:.66em;height:.66em;left:calc(var(--u)*.03);top:calc(var(--u)*-.74)}
.s-face .in{width:100%;height:100%;animation:stJit 1.5s linear infinite}
.s-face .f{fill:#fff;stroke:#000;stroke-width:3}
.s-face .k{fill:#000}
.s-face .l{fill:none;stroke:#000;stroke-width:3.2;stroke-linecap:round}
.s-face .eye{transform-box:fill-box;transform-origin:center;animation:stWink 3.6s infinite}
@keyframes stWink{0%,86%,100%{transform:scaleY(1)}90%{transform:scaleY(.12)}}
@keyframes stBob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(calc(var(--u)*-.07)) rotate(5deg)}}
@keyframes stJit{0%,40%,100%{transform:none}8%{transform:translate(-1.5px,0) rotate(-3deg)}16%{transform:translate(1.5px,-1px) rotate(3deg)}24%{transform:translate(-1px,1px) rotate(-2deg)}32%{transform:translate(1px,0) rotate(2deg)}}

/* HAHA balonu: kahkaha atar gibi sarsılır */
.s-haha{scale:1;right:calc(var(--u)*-.06);top:calc(var(--u)*-.58)}
.s-haha .in{position:relative;padding:.1em .3em;background:#000;color:#fff;border-radius:.2em;font-size:.36em;font-weight:800;letter-spacing:.08em;line-height:1;animation:stLaugh 3s ease-in-out infinite}
.s-haha .in::after{content:"";position:absolute;left:.4em;bottom:-.22em;border:.2em solid transparent;border-top-color:#000;border-bottom:0;border-left-width:.05em}
@keyframes stLaugh{0%,52%,100%{transform:none}6%{transform:rotate(-6deg) scale(1.08)}12%{transform:rotate(6deg) scale(1.1)}18%{transform:rotate(-6deg) scale(1.08)}24%{transform:rotate(5deg) scale(1.1)}30%{transform:rotate(-3deg) scale(1.04)}36%{transform:rotate(2deg)}}

/* ? ve ! : sarkaç gibi sallanır */
.s-q,.s-x{font-weight:800;line-height:.8;color:#000}
.s-q{font-size:.9em;left:calc(var(--u)*-.72);top:calc(var(--u)*-.05)}
.s-x{font-size:.9em;right:calc(var(--u)*-.55);top:calc(var(--u)*.02)}
.s-q .in,.s-x .in{transform-origin:50% 100%;animation:stSwing 2.2s ease-in-out infinite alternate}
.s-x .in{animation-delay:-1.1s}
@keyframes stSwing{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}

/* :D rozeti: logo kutusu gibi, zıplayıp ezilir */
.s-chip{left:calc(var(--u)*-.62);top:calc(var(--u)*1.55)}
.s-chip .in{padding:.14em .34em;background:#000;color:#fff;border-radius:.2em;font-size:.46em;font-weight:800;line-height:1;transform-origin:50% 100%;animation:stSquash 1.5s cubic-bezier(.3,0,.4,1) infinite}
@keyframes stSquash{0%,100%{transform:translateY(0) scale(1.1,.86)}45%{transform:translateY(calc(var(--u)*-.2)) scale(.92,1.1)}}

/* kalp: atar */
.s-heart{width:.4em;height:.4em;right:calc(var(--u)*-.34);top:calc(var(--u)*1.45)}
.s-heart .in{width:100%;height:100%;animation:stBeat 1.3s ease-in-out infinite}
.s-heart path{fill:#000}
@keyframes stBeat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.28)}28%{transform:scale(1.08)}}

/* parıltılar: yanıp söner, döner */
.s-sp{width:.3em;height:.3em}
.s-sp .in{width:100%;height:100%;animation:stTwinkle 2.2s ease-in-out infinite}
.s-sp path{fill:#000}
.sp1{left:calc(var(--u)*.86);top:calc(var(--u)*-.62)}
.sp3{left:calc(var(--u)*-.5);top:calc(var(--u)*.78);width:.22em;height:.22em}
.sp4{right:calc(var(--u)*-.34);bottom:calc(var(--u)*-.3);width:.34em;height:.34em}
.sp3 .in{animation-delay:-1.3s}.sp4 .in{animation-delay:-1.8s}
@keyframes stTwinkle{0%,100%{transform:scale(.25) rotate(0)}50%{transform:scale(1) rotate(90deg)}}

@media(max-width:700px){.s-q,.s-x,.sp3,.sp4,.rk-say{display:none}}

/* Başka sayfaya geçince döngüler durur (ilk giriş bir kez oynar, geri dönünce kaldığı yerden sürer) */
.page[data-page="hakkimizda"]:not(.on) *,.page[data-page="hakkimizda"]:not(.on) *::before,.page[data-page="hakkimizda"]:not(.on) *::after{animation-play-state:paused!important}

/* Kartlar: üstte başlık/çıkartmalar, altta kubbe arasındaki güvenli alana sabitlenir (kubbenin hemen üstü) */
.page[data-page="hakkimizda"]{--D:clamp(150px,24vh,230px);--f:clamp(11px,calc(var(--D)*.06),15px);--ch:clamp(106px,15.9vh,159px);--gap:clamp(10px,1.6vw,22px)}
.ab-cards{position:absolute;left:0;right:0;bottom:calc(var(--D) + clamp(22px,3.4vh,34px));display:flex;justify-content:center;gap:var(--gap);padding:0 4vw}
.ab-card{width:min(calc(var(--ch)*2.025),calc((92vw - 2*var(--gap))/3));min-height:calc(var(--ch)*1.19);padding:calc(var(--ch)*.115);border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);display:flex;flex-direction:column;gap:calc(var(--ch)*.07);transition:background .3s,color .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.ab-head{display:flex;align-items:center;gap:calc(var(--ch)*.07)}
.ab-ico{flex:none;width:calc(var(--ch)*.32);height:calc(var(--ch)*.2);border-radius:calc(var(--ch)*.045);background:var(--ink);display:grid;place-items:center;transition:background .3s;animation:icoFloat 3.2s ease-in-out infinite alternate}
.ab-card:nth-child(2) .ab-ico{animation-delay:-1s}.ab-card:nth-child(3) .ab-ico{animation-delay:-2s}
.ab-ico svg{width:calc(var(--ch)*.14);height:calc(var(--ch)*.14);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke .3s}
.ab-card h3{font-size:clamp(12px,calc(var(--ch)*.118),19px);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.ab-card p{font-size:clamp(11px,calc(var(--ch)*.092),15px);font-weight:300;line-height:1.45}
.ab-card:hover{background:var(--ink);color:#fff;transform:translateY(-5px)}
.ab-card:hover .ab-ico{background:#fff}
.ab-card:hover .ab-ico svg{stroke:var(--ink)}
@keyframes icoFloat{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}
/* ikonların kendi hafif hareketleri */
.gl-phone{transform-box:fill-box;transform-origin:50% 100%;animation:phTilt 2.6s ease-in-out infinite alternate}
@keyframes phTilt{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.ab-ico .eye{transform-box:fill-box;transform-origin:center;animation:stWink 3.6s infinite}
.gl-spark{transform-box:fill-box;transform-origin:center;animation:spark 2.4s ease-in-out infinite}
@keyframes spark{0%,100%{transform:scale(.8) rotate(0)}50%{transform:scale(1.12) rotate(45deg)}}
/* giriş: başlık ve çıkartmalardan sonra tek tek yükselir (bir kez) */
.page[data-page="hakkimizda"].seen .ab-card{animation:cardIn .7s var(--cd,2.9s) cubic-bezier(.2,.8,.2,1) backwards}
.page[data-page="hakkimizda"].seen .ab-card:nth-child(2){--cd:3.0618s}
.page[data-page="hakkimizda"].seen .ab-card:nth-child(3){--cd:3.2236s}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:none}}

/* Kubbe: ana sayfadakiyle aynı yay */
.ab-dome{position:absolute;left:-15vw;bottom:0;width:130vw;height:var(--D);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:calc(var(--f)*1.618)}
.page[data-page="hakkimizda"].seen .ab-dome{animation:abDome .9s .9s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes abDome{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:700px){.ab-card p{display:none}.ab-card{min-height:0}.ab-cards{bottom:calc(var(--D) + 12px)}}

/* ortadaki kart siyah dolgulu */
.ab-card:nth-child(2){background:var(--ink);color:#fff}
.ab-card:nth-child(2) .ab-ico{background:#fff}
.ab-card:nth-child(2) .ab-ico svg{stroke:var(--ink)}
.ab-card:nth-child(2):hover{background:#fff;color:var(--ink)}
.ab-card:nth-child(2):hover .ab-ico{background:var(--ink)}
.ab-card:nth-child(2):hover .ab-ico svg{stroke:#fff}

.ab-card p.sub{margin-top:calc(var(--ch)*.045);font-size:clamp(10px,calc(var(--ch)*.08),13px);opacity:.72}

/* Çarpraz hover: ortadaki kart beyaza dönerken yanındaki ikisi siyaha döner */
.ab-cards:has(.ab-card:nth-child(2):hover) .ab-card:nth-child(odd){background:var(--ink);color:#fff}
.ab-cards:has(.ab-card:nth-child(2):hover) .ab-card:nth-child(odd) .ab-ico{background:#fff}
.ab-cards:has(.ab-card:nth-child(2):hover) .ab-card:nth-child(odd) .ab-ico svg{stroke:var(--ink)}

/* Kubbe içi: tüm ölçüler dome yüksekliği --D ve yazı birimi --f üzerinden altın oranla */
.ft{display:flex;flex-direction:column;align-items:center;gap:calc(var(--f)*1.618);text-align:center}
.ft-p{margin:0;max-width:none;font-weight:300;letter-spacing:.005em;color:rgba(255,255,255,.74)}
/* Altın oran ölçeği: f × φ² (üst) → f × φ (alt), satırlar φ⁻¹ oranında */
.ft-hi{display:block;position:relative;top:calc(var(--f)*.5);font-size:calc(var(--f)*2.618);font-weight:300;line-height:1;letter-spacing:-.01em;color:#fff}
.ft-lo{display:block;margin-top:calc(var(--f)*1.618);font-size:calc(var(--f)*1.618);line-height:1}
/* "merhaba" el sallar gibi selam verir */
.ft-wave{display:inline-block;font-style:normal;font-weight:300;color:#fff;transform-origin:50% 90%;animation:ftWave 4.236s ease-in-out 3s infinite}
@keyframes ftWave{0%,61.8%,100%{transform:none}67%{transform:rotate(-7deg)}73%{transform:rotate(6deg)}79%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
/* "döneriz!": ünlem gerçekten dönüp geri gelir */
.ft-bang{display:inline-block;font-weight:800;color:#fff;transform-origin:50% 62%;animation:ftBang 4.236s cubic-bezier(.62,0,.2,1) 3.618s infinite}
@keyframes ftBang{0%,61.8%{transform:none}85%,100%{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ft-wave,.ft-bang{animation:none}}
.ft-p strong{position:relative;font-weight:800;color:#fff;white-space:nowrap;background:linear-gradient(100deg,#fff 40%,rgba(255,255,255,.4) 50%,#fff 60%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ftShine 4.6s ease-in-out 3.6s infinite}
@keyframes ftShine{0%,55%{background-position:100% 0}100%{background-position:-60% 0}}
@keyframes ftLine{to{transform:scaleX(1)}}
.ft-mail{display:inline-flex;align-items:center;height:calc(var(--f)*2.618);padding:0 calc(var(--f)*1.618);font-size:var(--f);font-weight:600;letter-spacing:.1em;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;transition:background .3s,color .3s,border-color .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.ft-mail:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.ft-r{display:block;line-height:1;text-align:center;font-size:calc(var(--f)*.773);font-weight:300;letter-spacing:.22em;color:rgba(255,255,255,.4)}
.page[data-page="hakkimizda"].seen .ft-p,.page[data-page="hakkimizda"].seen .ft-mail,.page[data-page="hakkimizda"].seen .ft-r{animation:ftIn .8s cubic-bezier(.2,.8,.2,1) backwards}
.page[data-page="hakkimizda"].seen .ft-p{animation-delay:1.9s}
.page[data-page="hakkimizda"].seen .ft-mail{animation-delay:2.4s}
.page[data-page="hakkimizda"].seen .ft-r{animation-delay:2.8s}
@keyframes ftIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}