/* UI3: shared cards, actions and guide pages. Keep root overflow untouched. */
:root{--card-surface:#111516;--card-radius:24px;--card-ease:cubic-bezier(.2,.7,.2,1)}
.ks-brand{position:relative;isolation:isolate;border-radius:var(--card-radius);overflow:hidden;background:linear-gradient(145deg,#161b1c,#0c1011 70%);transition:transform .35s var(--card-ease),border-color .35s,box-shadow .35s}
.ks-brand>img{transition:transform .7s var(--card-ease);border-bottom:1px solid var(--line)}
.ks-brand-copy{position:relative;padding:28px;gap:4px}
.ks-brand h3{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.15;letter-spacing:-.04em}
.ks-brand p{line-height:1.7;max-width:55ch}
.ks-brand .ks-brand-services{font-size:.8rem;line-height:1.7;padding:12px 0 20px;border-top:1px solid var(--line);color:var(--lilac)}
.ks-brand-copy>a,.studio-evidence-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;align-self:flex-start;min-height:52px;padding:10px 12px 10px 20px;border:1px solid #626866;border-radius:999px;color:var(--ink,#f4f4f0);text-decoration:none;font:500 .9rem/1.3 "Space Grotesk",sans-serif;letter-spacing:-.01em;transition:color .25s,background .25s,border-color .25s,transform .25s}
.ks-brand-copy>a{margin-top:auto}
.ks-brand-copy>a span[aria-hidden],.studio-evidence-link span[aria-hidden]{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:var(--hizmet-renk,var(--acid,#b9ff00));color:#080a0b;border-radius:50%;font-size:1.2rem;transition:transform .3s}
.ks-hizmet{border-top:1px solid var(--line)}
.ks-hizmet::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 100% 0%,var(--hizmet-renk),transparent 65%);opacity:.09;transition:opacity .35s}
.ks-hizmet .ks-brand-copy>a{color:var(--ink)}
.card-index{display:block;font:500 .7rem/1.4 "Space Grotesk",sans-serif;letter-spacing:.12em;color:var(--hizmet-renk,var(--acid));margin:0 0 28px}
.ks-hizmet-kapsam{padding:20px 0 24px;border-top:1px solid var(--line);margin:12px 0 18px;gap:12px}
.ks-hizmet-kapsam li{font-size:.88rem;padding-left:20px}
.ks-hizmet-kapsam li::before{width:6px;height:6px;border-radius:50%;top:.55em}
/* Semantic list reset: badges should wrap to their content, not become full-width rows. */
.studio-evidence-services{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 30px}
.studio-evidence-services li{display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;padding:9px 14px;border-color:#39413d;background:#141a16;font-size:.78rem;font-weight:500;line-height:1.4}
.studio-evidence-services li::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--acid,#b9ff00)}
.studio-evidence-link:hover{opacity:1;gap:24px}
.ks-resources{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding:48px max(3.5vw,28px);border-top:1px solid var(--line)}
.ks-resources>a{position:relative;display:flex;flex-direction:column;align-items:start;gap:16px;min-width:0;min-height:240px;padding:26px;border-radius:20px;background:linear-gradient(145deg,#15191b,#0b0e0f);border:1px solid var(--line);overflow:hidden;transition:transform .3s var(--card-ease),border-color .3s,background .3s}
.ks-resources>a{grid-column:span 2}
.ks-resources>a:nth-child(-n+2){grid-column:span 3}
.ks-resources>a small{font-size:.65rem;letter-spacing:.1em;color:var(--lilac);line-height:1.5}
.ks-resources>a strong{font:500 clamp(1.3rem,2vw,1.75rem)/1.2 "Space Grotesk",sans-serif;letter-spacing:-.03em;max-width:18ch}
.ks-resources>a p{font:400 .85rem/1.6 "DM Sans",sans-serif;color:var(--muted);margin:0 0 36px;max-width:30ch}
.tile-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #4b5252;position:absolute;bottom:22px;right:22px;color:var(--acid);transition:background .3s,color .3s,transform .3s}
.ks-resources>a:hover{color:var(--ink);background:#171d19;border-color:var(--acid)}
.process-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:none;border:0}
.process-card{position:relative;isolation:isolate;min-width:0;min-height:310px;border:1px solid var(--line);border-radius:20px;padding:24px;background:linear-gradient(145deg,#171822,#0c1011 65%);text-decoration:none;color:var(--ink);gap:60px;overflow:hidden;transition:transform .35s var(--card-ease),border-color .35s}
.process-card::before{content:attr(data-step);position:absolute;right:18px;top:30px;z-index:-1;font:700 6rem/1 "Space Grotesk",sans-serif;letter-spacing:-.08em;color:#a78bfa12;transition:transform .4s,color .4s}
.process-card b,.process-card h3{font-family:"Space Grotesk","DM Sans",Arial,sans-serif}
.process-card b{font-size:.7rem;letter-spacing:.08em}
.process-card h3{font-size:1.5rem;letter-spacing:-.04em;line-height:1.15}
.process-card p{font-size:.9rem;line-height:1.6;margin-bottom:52px}
.process-card .tile-arrow{color:var(--lilac)}
.process-detail .page-hero{min-height:auto;padding-bottom:60px}
.process-detail .page-hero h1{font-size:clamp(3rem,8vw,8rem);line-height:1.05;max-width:16ch}
.process-reading{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.5fr);gap:8vw}
.process-reading aside{align-self:start;position:sticky;top:110px;display:grid;gap:12px}
.process-reading aside a{font-size:.85rem;line-height:1.5;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--muted)}
.process-reading article{min-width:0;max-width:70ch}
.process-reading article section{scroll-margin-top:110px;margin-bottom:48px}
.process-reading h2{font:500 clamp(1.8rem,3vw,2.8rem)/1.15 "Space Grotesk",sans-serif;letter-spacing:-.04em;margin:0 0 22px}
.process-reading p,.process-reading li{font-size:1.05rem;line-height:1.8;color:var(--muted)}
.process-reading ol{padding-left:24px}.process-reading li{padding-left:8px;margin-bottom:16px}
.process-output{padding:28px;border:1px solid #b9ff0040;border-radius:20px;background:#b9ff0008}
.process-next{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px;margin-top:40px}
.process-next a{color:var(--acid);min-height:44px;display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.ks-brand:focus-within,.process-card:focus-visible,.ks-resources>a:focus-visible{border-color:var(--acid);outline:2px solid var(--acid);outline-offset:4px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .ks-brand:hover,.process-card:hover,.ks-resources>a:hover{transform:translateY(-6px);border-color:#6a786c;box-shadow:0 20px 50px #0004}
 .ks-brand:hover>img{transform:scale(1.04)}.ks-hizmet:hover::before{opacity:.18}
 .process-card:hover::before{transform:translateY(-6px);color:#a78bfa24}
 .ks-brand-copy>a:hover,.studio-evidence-link:hover{background:var(--ink,#f4f4f0);color:#080a0b;border-color:var(--ink,#f4f4f0)}
 .ks-brand-copy>a:hover span[aria-hidden],.studio-evidence-link:hover span[aria-hidden]{transform:rotate(45deg)}
 .process-card:hover .tile-arrow,.ks-resources>a:hover .tile-arrow{transform:rotate(45deg);background:var(--acid);color:#080a0b;border-color:var(--acid)}
}
@media(max-width:1100px){.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ks-resources{grid-template-columns:repeat(2,minmax(0,1fr))}.ks-resources>a,.ks-resources>a:nth-child(-n+2){grid-column:auto}.ks-resources>a:last-child{grid-column:1/-1}}
@media(max-width:639.98px){.ks-brand-copy{padding:24px}.ks-resources{grid-template-columns:1fr;padding:32px 18px}.ks-resources>a{min-height:210px}.process-grid{grid-template-columns:1fr}.process-card{min-height:260px;gap:44px}.process-reading{grid-template-columns:1fr;gap:32px}.process-reading aside{position:static}.process-output{padding:22px}.process-detail .page-hero{padding-bottom:40px}.studio-evidence-link,.ks-brand-copy>a{max-width:100%;font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.ks-brand,.ks-brand>img,.ks-brand::before,.ks-brand-copy>a,.ks-brand-copy>a span,.ks-resources>a,.tile-arrow,.process-card,.process-card::before,.studio-evidence-link,.studio-evidence-link span{transition:none;animation:none}}

.ks-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:639.98px){.ks-service-grid{grid-template-columns:1fr}}

/* In-place mini game in the home motion reel. */
.reel-play{border:0;cursor:pointer}
.reel-play span{display:inline-block;margin-left:6px;transition:transform .25s}
.reel-play:hover span{transform:translate(3px,-3px)}
.grow-game{position:absolute;z-index:10;inset:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:radial-gradient(ellipse at 50% 60%,#17152d 0,#090b12 68%);color:var(--ink);cursor:crosshair;touch-action:none;overflow:hidden}
.grow-game[hidden]{display:none}
.grow-game-hud{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(14px,3vw,34px);font:600 .75rem/1.4 "Space Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.grow-game-hud>div{display:flex;gap:clamp(14px,3vw,32px);align-items:center}
.grow-game-hud strong{color:var(--acid);font-size:1rem}
.grow-game-collection{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:0 clamp(14px,3vw,34px) 12px;font:600 .66rem/1.2 "Space Grotesk",sans-serif;letter-spacing:.08em}
.grow-game-collection[hidden]{display:none}
.grow-game-collection-title{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#d0d2d7}
.grow-game-collection-title strong{color:var(--acid);font-size:.8rem}
.grow-game-collection-items{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.grow-game-collection-chip{padding:6px 9px;border:1px solid #ffffff36;border-radius:999px;color:#aeb0bb;background:#ffffff08;transition:color .25s,border-color .25s,background .25s,transform .25s}
.grow-game-collection-chip.is-collected{border-color:var(--acid);color:#090b0b;background:var(--acid);transform:translateY(-1px)}
.grow-game-close{width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#080a0bcc;color:var(--ink);font-size:1.3rem;cursor:pointer!important}
.grow-game-canvas{width:100%;height:100%;min-height:0;touch-action:none}
.grow-game-footer{z-index:2;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px clamp(14px,3vw,34px) max(20px,env(safe-area-inset-bottom));font-size:.8rem;color:#d0d2d7;background:linear-gradient(transparent,#080a0bcc)}
.grow-game-footer strong{color:var(--acid);font-family:"Space Grotesk",sans-serif}
.grow-game button:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
@media(max-width:600px){.grow-game-hud{align-items:flex-start}.grow-game-hud>div{gap:10px;flex-wrap:wrap}.grow-game-collection{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:8px}.grow-game-collection-items{gap:4px}.grow-game-collection-chip{padding:5px 7px;font-size:.58rem}.grow-game-footer{align-items:flex-end;font-size:.7rem}.grow-game-footer span:first-child{max-width:24ch}}
@media(prefers-reduced-motion:reduce){.reel-play span{transition:none}}
.grow-game-restart{min-height:44px;padding:10px 16px;border:1px solid var(--acid);border-radius:999px;background:var(--acid);color:#080a0b;font:600 .8rem/1.2 "Space Grotesk",sans-serif;cursor:pointer!important}
.grow-game-restart[hidden]{display:none}
.grow-game-victory{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;text-align:center;background:radial-gradient(ellipse at center,rgba(185,255,0,.18),transparent 58%);animation:grow-victory-glow 2.8s ease-out both}
.grow-game-victory[hidden]{display:none}
.grow-game-victory::before{position:absolute;inset:0;content:"";opacity:.8;background-image:radial-gradient(circle,#b9ff00 0 2px,transparent 3px),radial-gradient(circle,#a98df2 0 3px,transparent 4px),radial-gradient(circle,#f4f4f0 0 2px,transparent 3px);background-size:73px 91px,101px 83px,127px 109px;background-position:4px -130px,31px -170px,65px -100px;animation:grow-confetti-fall 2.8s ease-out both}
.grow-game-victory span,.grow-game-victory strong,.grow-game-victory small{position:relative;z-index:1}
.grow-game-victory span{color:var(--acid);font:700 clamp(3rem,10vw,7rem)/.9 "Space Grotesk",sans-serif;letter-spacing:-.07em;text-shadow:0 0 34px #b9ff0077;animation:grow-victory-pop .65s cubic-bezier(.2,.8,.2,1.1) both}
.grow-game-victory strong{font:700 clamp(.95rem,2.2vw,1.4rem)/1.2 "Space Grotesk",sans-serif;letter-spacing:.12em}
.grow-game-victory small{color:#d0d2d7;font-size:.9rem}
.grow-game-victory-link{position:relative;z-index:2;pointer-events:auto;display:inline-flex;align-items:center;gap:24px;min-height:48px;margin-top:10px;padding:10px 16px;border:1px solid var(--acid);border-radius:999px;background:var(--acid);color:#080a0b;font:600 .82rem "Space Grotesk",sans-serif;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.grow-game-victory-link:hover{transform:translateY(-3px);background:#f4f4f0;border-color:#f4f4f0}
@keyframes grow-victory-glow{0%{opacity:0}15%{opacity:1}100%{opacity:1}}
@keyframes grow-victory-pop{0%{opacity:0;transform:scale(.55) translateY(20px)}75%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes grow-confetti-fall{0%{opacity:0;background-position:4px -130px,31px -170px,65px -100px}15%{opacity:1}100%{opacity:.75;background-position:18px 110%,10px 120%,87px 105%}}
@media(prefers-reduced-motion:reduce){.grow-game-victory,.grow-game-victory::before,.grow-game-victory span{animation:none}}

/* Ortak reels bileşeninin UI3 teması. */
.reels--ui3{--reels-zemin:#0b0b12;--reels-yazi:#f4f1ff;--reels-vurgu:var(--lilac);--reels-yaricap:22px;--reels-font:"Space Grotesk";min-width:0;max-width:100%;padding:32px clamp(20px,3.5vw,56px)}
.reels--ui3 .reels-kart{transition:transform .25s,box-shadow .25s}
.reels--ui3 .reels-kart:hover{transform:translateY(-4px);box-shadow:0 0 18px #c8a2ff40}
#reels{scroll-margin-top:100px;min-width:0}
.work-card .reels-rozet{position:relative;z-index:2}

/* SEO (2026-10-20): sayfa basina tek H1. Masaustu/atolye arayuzunde gorunur bir
   baslik yok; H1 ekran okuyucuya ve arama motoruna acik, gorsel olarak gizli.
   Icerigi sayfada gorunen marka adi ve konumlandirmayla ayni (gizli metin hilesi degil). */
.seo-baslik{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
