/* Stüdyo (kurumsal/index) — tasarım: <sc-if isStudio>. Sahne animasyonları helmet'teki pkStudio* kurallarından;
   scroll-timeline desteklemeyen tarayıcılarda studio.js aynı keyframe'leri kaydırmaya göre oynatır. */

#page-studio { position: relative; width: 100%; overflow-x: clip; background: rgb(21,21,21); color: #ffffff; }

/* ---------- Hero ---------- */
#page-studio .hero-area { position: relative; padding: 150px 7.002% 0; }
#page-studio .crumb { font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: rgba(255,255,255,0.55); }
#page-studio .crumb a { color: inherit; }
#page-studio .title { margin: 86px auto 0; max-width: 820px; text-align: center; font-weight: 700; font-size: clamp(30px, 2.55vw, 44px); line-height: 1.16; letter-spacing: -0.02em; color: #ffffff; text-wrap: pretty; }
#page-studio .star { position: relative; margin: 76px auto 0; width: clamp(220px, 30vw, 520px); aspect-ratio: 742 / 436; }
#page-studio .star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#page-studio .star video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; clip-path: url(#pkStarClip); }

/* ---------- Ekip ---------- */
#page-studio .team-area { position: relative; padding: clamp(90px, 10vw, 180px) 7.002% 0; }
#page-studio .label { font-weight: 700; font-size: 12px; line-height: 12px; color: rgba(255,255,255,0.55); }
#page-studio .team-area .texts { margin: 26px 0 0; max-width: 430px; font-weight: 400; font-size: clamp(20px, 1.5vw, 25px); line-height: 1.34; color: #ffffff; text-wrap: pretty; }
#page-studio .team { margin-top: clamp(50px, 6vw, 90px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: clamp(16px, 2vw, 34px); align-items: end; }
#page-studio .team .photo { aspect-ratio: 351 / 468; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; will-change: transform; }
#page-studio .team .photo.slow { margin-bottom: clamp(30px, 5vw, 90px); }

@media (max-width: 760px) {
    #page-studio .team { display: flex !important; gap: 10px !important; align-items: flex-end !important; overflow: visible; will-change: transform; }
    #page-studio .team::-webkit-scrollbar { display: none; }
    #page-studio .team > div { flex: 0 0 calc((100vw - 15vw - 10px) / 2.4); margin-bottom: 0 !important; transform: none !important; }
    #page-studio .team > div:nth-child(even) { margin-bottom: 18px !important; }
}

/* ---------- Kaydırma sahnesi ---------- */
#page-studio .scene-area { position: relative; height: 520vh; }
#page-studio .stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Satır yüksekliği 1.3: y/ğ/ş kuyrukları ve İ noktası kırpılmasın. Kutu 0.3em büyüdüğü için
   kapsayıcı 0.15em yukarı alınır; yazının ekrandaki yeri tasarımdaki gibi kalır. */
#page-studio .track-wrap { position: absolute; left: 0; right: 0; top: calc(65% - 0.15 * clamp(30px, 3.4vw, 58px)); overflow: hidden; }
#page-studio .track { position: relative; white-space: nowrap; text-align: center; will-change: transform; }
#page-studio .track .dim { font-weight: 700; font-size: clamp(30px, 3.4vw, 58px); line-height: 1.3; letter-spacing: -0.02em; color: rgba(255,255,255,0.14); }
#page-studio .track .burn { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-weight: 700; font-size: clamp(30px, 3.4vw, 58px); line-height: 1.3; letter-spacing: -0.02em; color: #ffffff; clip-path: inset(0 100% 0 0); will-change: clip-path; }

#page-studio .shrink { position: absolute; inset: 0; will-change: transform; }
#page-studio .catcher { position: absolute; left: 49%; top: 60%; width: clamp(150px, 16vw, 260px); margin-left: calc(clamp(150px, 16vw, 260px) / -2); opacity: 0; will-change: transform, opacity; }
#page-studio .catcher img,
#page-studio .ball img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 0 0 #151515) drop-shadow(-1px 0 0 #151515) drop-shadow(0 1px 0 #151515) drop-shadow(0 -1px 0 #151515); }
#page-studio .spark { position: absolute; height: auto; opacity: 0; }
#page-studio .spark.s1 { right: -26%; top: -14%; width: 26%; }
#page-studio .spark.s2 { left: -24%; top: 22%; width: 18%; animation-delay: -.04s; }

#page-studio .guide { position: absolute; top: 0; width: 1px; background: #ffffff; opacity: 0; transform-origin: 50% 0; }
#page-studio .guide.g1 { left: calc(50% - 16px); height: 30vh; }
#page-studio .guide.g2 { left: calc(50% + 10px); height: 24vh; animation-delay: -.04s; }

#page-studio .ball { position: absolute; left: 50%; top: 67%; width: clamp(120px, 13vw, 210px); margin-left: calc(clamp(120px, 13vw, 210px) / -2); margin-top: calc(clamp(120px, 13vw, 210px) * -1); will-change: transform; }
#page-studio .ball img.tint { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; pointer-events: none; }

#page-studio .copy { position: absolute; left: 0; right: 0; bottom: max(28px, 5%); padding: 0 7.002%; text-align: center; opacity: 0; will-change: transform, opacity; }
#page-studio .copy p { margin: 0 auto; padding-bottom: 4px; max-width: 640px; font-weight: 400; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4; color: #ffffff; text-wrap: pretty; }
#page-studio .copy p span { color: rgb(236,255,93); }
#page-studio .copy .btn { margin: 30px auto 0; width: 231px; height: 60px; border-radius: 50px; box-shadow: inset 0 0 0 1px #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 17px; line-height: 20px; color: #ffffff; transition: background-color .45s cubic-bezier(.16,1,.3,1), color .45s cubic-bezier(.16,1,.3,1); }
#page-studio .copy .btn:hover { background-color: #ffffff; color: #151515; }
#page-studio .copy .areas { margin-top: clamp(24px, 2.6vw, 40px); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
#page-studio .copy .area { height: 40px; border-radius: 50px; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); padding: 0 18px; display: flex; align-items: center; white-space: nowrap; }
#page-studio .copy .area span { font-weight: 400; font-size: 14px; line-height: 14px; color: #ffffff; }

/* ---------- Değerler ---------- */
#page-studio .values-area { position: relative; padding: clamp(100px, 12vw, 200px) 7.002% 0; }
#page-studio .values-area .cards { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
#page-studio .values-area .card { position: relative; overflow: hidden; min-height: clamp(260px, 22vw, 330px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); padding: clamp(24px, 2.4vw, 40px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; transition: background-color .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
#page-studio .values-area .card:hover { background-color: rgba(255,255,255,0.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
#page-studio .values-area .icon { display: block; width: 48px; height: 48px; }
#page-studio .values-area [data-vpart] { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.16,1,.3,1); }
#page-studio .values-area [data-vmode="4"] [data-vpart]:nth-of-type(1) { transform: rotate(0deg); }
#page-studio .values-area [data-vmode="4"] [data-vpart]:nth-of-type(2) { transform: rotate(90deg); }
#page-studio .values-area [data-vmode="4"] [data-vpart]:nth-of-type(3) { transform: rotate(45deg); }
#page-studio .values-area [data-vmode="4"] [data-vpart]:nth-of-type(4) { transform: rotate(135deg); }
#page-studio .values-area .t { margin-top: 26px; max-width: 260px; font-weight: 400; font-size: clamp(19px, 1.35vw, 22px); line-height: 1.28; color: #ffffff; text-wrap: pretty; }
#page-studio .values-area .tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; transition: opacity .45s ease; }
#page-studio .values-area .tag { height: 32px; border-radius: 50px; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); padding: 0 14px; display: flex; align-items: center; white-space: nowrap; }
#page-studio .values-area .tag span { font-weight: 400; font-size: 13px; line-height: 13px; color: rgba(255,255,255,0.86); }
#page-studio .values-area .ghost { position: absolute; left: clamp(24px, 2.4vw, 40px); bottom: -0.16em; font-weight: 400; font-size: clamp(64px, 7.4vw, 120px); line-height: .9; letter-spacing: -0.03em; white-space: nowrap; color: #ffffff; opacity: 0; transform: translate(0, 100%); transition: transform .75s cubic-bezier(.16,1,.3,1), opacity .5s ease; pointer-events: none; }

#page-studio .spacer { height: clamp(60px, 8vw, 130px); }

/* ---------- Scroll-timeline (helmet'ten birebir) ---------- */
@keyframes pkStudioBall {
    0%   { transform: translate(0, -78vh) rotate(0deg); }
    16%  { transform: translate(0, 0) rotate(0deg); }
    38%  { transform: translate(0, -1vh) rotate(680deg); }
    46%  { transform: translate(0, 0) rotate(800deg); }
    54%  { transform: translate(0, 0) rotate(900deg); }
    62%  { transform: translate(0, 0) rotate(1010deg); }
    76%  { transform: translate(0, 0) rotate(1090deg); }
    100% { transform: translate(0, 0) rotate(1180deg); }
}
@keyframes pkStudioTrack {
    0%   { transform: translateX(26%); opacity: 1; }
    16%  { transform: translateX(26%); opacity: 1; }
    54%  { transform: translateX(-30%); opacity: 1; }
    62%  { transform: translateX(-38%); opacity: 1; }
    70%  { transform: translateX(-42%); opacity: 0; }
    100% { transform: translateX(-42%); opacity: 0; }
}
@keyframes pkStudioBurn {
    0%   { clip-path: inset(0 100% 0 0); }
    18%  { clip-path: inset(0 100% 0 0); }
    54%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
@keyframes pkStudioCatcher {
    0%   { opacity: 0; transform: translateY(46vh); }
    80%  { opacity: 0; transform: translateY(46vh); }
    85%  { opacity: 1; transform: translateY(18vh); }
    92%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes pkStudioTint {
    0%   { opacity: 0; }
    14%  { opacity: 0; }
    18%  { opacity: 1; }
    90%  { opacity: 1; }
    95%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes pkStudioGuide {
    0%   { opacity: 0; transform: scaleY(0); }
    62%  { opacity: 0; transform: scaleY(0); }
    70%  { opacity: .22; transform: scaleY(1); }
    100% { opacity: .22; transform: scaleY(1); }
}
@keyframes pkStudioTick {
    0%   { opacity: 0; transform: translateX(14px); }
    80%  { opacity: 0; transform: translateY(10px); }
    86%  { opacity: 1; transform: translateY(0); }
    92%  { opacity: 1; transform: translateY(-8px); }
    96%  { opacity: 0; transform: translateY(-14px); }
    100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes pkStudioCopy { 0% { opacity: 0; transform: translateY(40px); } 90% { opacity: 0; transform: translateY(40px); } 99% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes pkStudioShrink {
    0%   { transform: translateY(0) scale(1); }
    93%  { transform: translateY(0) scale(1); }
    100% { transform: translateY(-12vh) scale(.62); }
}
@keyframes pkStudioSpark { 0% { opacity: 0; transform: scale(.4); } 90% { opacity: 0; transform: scale(.4); } 98% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pkStudioPara { from { transform: translateY(46px); } to { transform: translateY(-46px); } }
@keyframes pkStudioParaSlow { from { transform: translateY(24px); } to { transform: translateY(-24px); } }

@supports (animation-timeline: view()) {
    #page-studio [data-studio-scene] { view-timeline-name: --pkStudio; }
    #page-studio [data-studio-ball], #page-studio [data-studio-track], #page-studio [data-studio-burn], #page-studio [data-studio-catcher], #page-studio [data-studio-copy], #page-studio [data-studio-spark], #page-studio [data-studio-tick], #page-studio [data-studio-tint], #page-studio [data-studio-guide], #page-studio [data-studio-shrink] { animation-timeline: --pkStudio; animation-range: contain 0% contain 100%; animation-fill-mode: both; animation-timing-function: linear; }
    #page-studio [data-studio-ball] { animation-name: pkStudioBall; }
    #page-studio [data-studio-track] { animation-name: pkStudioTrack; }
    #page-studio [data-studio-burn] { animation-name: pkStudioBurn; }
    #page-studio [data-studio-catcher] { animation-name: pkStudioCatcher; }
    #page-studio [data-studio-copy] { animation-name: pkStudioCopy; }
    #page-studio [data-studio-spark] { animation-name: pkStudioSpark; }
    #page-studio [data-studio-tick] { animation-name: pkStudioTick; }
    #page-studio [data-studio-tint] { animation-name: pkStudioTint; }
    #page-studio [data-studio-guide] { animation-name: pkStudioGuide; }
    #page-studio [data-studio-shrink] { animation-name: pkStudioShrink; }
    /* Tasarımda ekip fotoğraflarında data-reveal da var ve helmet'te pkReveal kuralı sonra geldiği için
       paralaks onlarda ezilir; aynı öncelik korunur. */
    #page-studio [data-studio-para]:not([data-reveal]) { animation: pkStudioPara linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    #page-studio [data-studio-para-slow]:not([data-reveal]) { animation: pkStudioParaSlow linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* Yedek (scroll-timeline yok): studio.js aynı keyframe'leri duraklatılmış 1s'lik animasyon olarak
   oynatır ve animation-delay'i kaydırma ilerlemesine göre günceller. */
.no-sda #page-studio [data-studio-ball], .no-sda #page-studio [data-studio-track], .no-sda #page-studio [data-studio-burn], .no-sda #page-studio [data-studio-catcher], .no-sda #page-studio [data-studio-copy], .no-sda #page-studio [data-studio-spark], .no-sda #page-studio [data-studio-tint], .no-sda #page-studio [data-studio-guide], .no-sda #page-studio [data-studio-shrink] { animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; animation-delay: 0s; }
.no-sda #page-studio [data-studio-ball] { animation-name: pkStudioBall; }
.no-sda #page-studio [data-studio-track] { animation-name: pkStudioTrack; }
.no-sda #page-studio [data-studio-burn] { animation-name: pkStudioBurn; }
.no-sda #page-studio [data-studio-catcher] { animation-name: pkStudioCatcher; }
.no-sda #page-studio [data-studio-copy] { animation-name: pkStudioCopy; }
.no-sda #page-studio [data-studio-spark] { animation-name: pkStudioSpark; }
.no-sda #page-studio [data-studio-tint] { animation-name: pkStudioTint; }
.no-sda #page-studio [data-studio-guide] { animation-name: pkStudioGuide; }
.no-sda #page-studio [data-studio-shrink] { animation-name: pkStudioShrink; }