/* temsor.com stüdyo dili — game.temsor.com hub + oyun menü kabukları.
   Kaynak kanon: temsor-shared/gen-home.mjs CSS.
   Masa çuha/ceviz (ortak/masa/tema.css) buradan EZİLMEZ. */
@import url('/ortak/fonts/fonts.css');

/* Jetonlar :root'ta DEĞİL — pisti/okey/batak masa --ink/--felt ezilmesin.
   Yalnız stüdyo kabuğu (hub body, kosu #scr-menu). */
.studiyo, body.studiyo, #scr-menu.studiyo{
  --ivory:#F3EBD9; --ivory-2:#E6DCC4; --ivory-3:#D9CDB0;
  --red:#D6332B; --blue:#1F4FB5; --yellow:#E9B321;
  --ink:#0A1416; --ink-2:#121B1F; --ink-3:#1B262B;
  --void:#0A1416; /* koyu yüzey — hub --ink'i zemin yaptığı için burası sabit */
  --amber:#FFB454; --amber-2:#C98A3A; --amber-dim:rgba(255,180,84,.55);
  --line:rgba(10,20,22,.16); --line-lt:rgba(243,235,217,.16);
  --display:"Bricolage Grotesque","Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:44px;
  /* hub kontrast kapısı (olc-hub-hareket) — eski adlar, yeni değerler.
     --ink orada ZEMİN sanılıyordu; test --ink/--text/--amber-ink okur.
     Hub sayfası kendi :root'unda bu üçlüyü ivory zeminle yeniden bağlar. */
  --text:#0A1416;
  --muted:#3A4548;
  --soft:#5A6860;
  --amber-ink:#9A1E18;
  --kart:#F3EBD9;
  --chip:rgba(10,20,22,.04);
  --btn-ink:#0A1416;
  --green:#2F6A58;
  --felt:#3D7565;
  --radius:4px;
  color-scheme: light;
}

.studiyo,body.studiyo{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.studiyo a{color:inherit}
.studiyo h1,.studiyo h2,.studiyo h3,.studiyo p{margin:0}
.studiyo :focus-visible{outline:3px solid var(--red);outline-offset:3px}
.studiyo .k{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7;display:block;
}
.studiyo .go{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:14px;width:max-content;
  border-bottom:1.5px solid currentColor;padding-bottom:2px;text-decoration:none;
}
.studiyo .go i{font-style:normal;transition:transform .25s}
.studiyo a:hover .go i,.studiyo .go:hover i{transform:translateX(6px)}

.studiyo .top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);position:relative;z-index:20;gap:12px;flex-wrap:wrap;
}
.studiyo .top .brand{
  font-family:var(--display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;text-decoration:none;font-variation-settings:"opsz" 12;
  color:var(--text);
}
.studiyo .top .brand em{font-style:normal;color:var(--red)}
.studiyo .top nav,.studiyo .top .nav{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;flex-wrap:wrap;
}
.studiyo .top nav a,.studiyo .top .out{
  text-decoration:none;opacity:.85;color:inherit;background:none;
  border:0;border-bottom:1.5px solid transparent;padding:6px 0;cursor:pointer;
  font:inherit;min-height:44px;display:inline-flex;align-items:center;
}
.studiyo .top nav a:hover,.studiyo .top .out:hover{opacity:1;border-bottom-color:currentColor}

.studiyo .hero-studio{
  min-height:calc(72svh - 72px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:48px var(--pad);padding:24px var(--pad) 56px;align-items:end;
}
.studiyo .word{
  font-family:var(--display);font-weight:800;
  font-size:clamp(88px,16vw,240px);line-height:.82;letter-spacing:-.05em;
  font-variation-settings:"opsz" 96;margin:20px 0 24px;
}
.studiyo .word em{font-style:normal;color:var(--red)}
.studiyo .lead{
  font-size:clamp(17px,1.5vw,22px);line-height:1.45;max-width:46ch;text-wrap:pretty;
}
.studiyo .lead .hl,.studiyo h1 .hl{color:var(--red);font-style:normal;font-weight:700}

.studiyo .index{list-style:none;margin:0;padding:0;border-top:2px solid var(--text)}
.studiyo .index li{border-bottom:1px solid var(--line)}
.studiyo .index a{
  display:grid;grid-template-columns:3ch 1fr auto;gap:18px;align-items:baseline;
  padding:18px 0;text-decoration:none;
}
.studiyo .index .n{font-family:var(--mono);font-size:12px;opacity:.55}
.studiyo .index .v{
  font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-.035em;line-height:1;font-variation-settings:"opsz" 48;
  transition:color .2s;
}
.studiyo .index .h{font-family:var(--mono);font-size:13px;opacity:.7}
.studiyo .index a:hover .v{color:var(--accent,var(--red))}
.studiyo .index a:hover .h{opacity:1}

.studiyo .ticker{
  border-top:2px solid var(--text);border-bottom:2px solid var(--text);
  background:var(--ivory);overflow:hidden;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,40px);
  letter-spacing:-.02em;line-height:1;padding:14px 0;font-variation-settings:"opsz" 40;
}
.studiyo .ticker .rail{display:inline-block;animation:studiyo-slide 48s linear infinite}
.studiyo .ticker span{display:inline-block;padding:0 .55em}
.studiyo .ticker span:nth-child(odd)::after{
  content:"·";display:inline-block;margin-left:1.1em;color:var(--red);
}
.studiyo .ticker span:nth-child(even)::after{
  content:"·";display:inline-block;margin-left:1.1em;color:var(--amber-2);
}
@keyframes studiyo-slide{to{transform:translateX(-50%)}}

.studiyo .band{position:relative;scroll-margin-top:16px}
.studiyo .band.light{background:var(--ivory);color:var(--text);--line-c:var(--line)}
.studiyo .band.dark{background:var(--void);color:var(--ivory);--line-c:var(--line-lt)}
.studiyo .band+.band{border-top:2px solid var(--text)}
.studiyo .cover{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:58svh;text-decoration:none;color:inherit;position:relative;overflow:hidden;
}
.studiyo .cover .in{
  padding:64px var(--pad) 44px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:16px;min-width:0;
}
.studiyo .cover .vis{
  position:relative;min-height:280px;display:flex;align-items:center;
  justify-content:center;padding:40px var(--pad) 40px 0;
}
.studiyo .cover h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(64px,11vw,160px);line-height:.86;letter-spacing:-.045em;
  font-variation-settings:"opsz" 96;color:var(--accent,var(--red));text-wrap:balance;
}
.studiyo .cover p{font-size:clamp(16px,1.35vw,19px);max-width:38ch;line-height:1.45}
.studiyo .band.dark .cover p{color:rgba(243,235,217,.82)}
.studiyo .label{font-family:var(--mono);font-size:13px;letter-spacing:.04em;opacity:.7;display:flex;gap:14px}

.studiyo .facts{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0;border-top:1px solid var(--line-c,var(--line));
}
.studiyo .facts>div{padding:28px var(--pad) 40px 24px;border-left:1px solid var(--line-c,var(--line))}
.studiyo .facts>div:first-child{border-left:0;padding-left:var(--pad)}
.studiyo .facts dt{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,1.8vw,26px);
  letter-spacing:-.03em;line-height:1.08;font-variation-settings:"opsz" 48;
  color:var(--accent,var(--red));
}
.studiyo .facts dd{margin:8px 0 0;font-size:15px;line-height:1.5;opacity:.86}

.studiyo .foot{
  background:var(--void);color:var(--ivory);padding:26px var(--pad);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:13px;
}
.studiyo .foot a{text-decoration:none;opacity:.8}
.studiyo .foot a:hover{opacity:1;color:var(--amber)}

.studiyo .langsw{display:inline-flex;gap:12px;border-bottom:0}
.studiyo .langsw a{
  padding:7px 8px;text-decoration:none;opacity:.65;font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;font-weight:700;min-height:44px;
  display:inline-flex;align-items:center;border-bottom:1.5px solid transparent;
}
.studiyo .langsw a.on{opacity:1;color:var(--red)}

@media(max-width:820px){
  .studiyo, body.studiyo, #scr-menu.studiyo{--pad:20px}
  .studiyo .hero-studio{grid-template-columns:1fr;min-height:0;gap:36px;padding-bottom:40px;align-items:start}
  .studiyo .word{font-size:clamp(80px,24vw,140px);margin:16px 0 22px}
  .studiyo .index .v{font-size:clamp(28px,8vw,40px)}
  .studiyo .index a{grid-template-columns:3ch 1fr;gap:8px 14px}
  .studiyo .index .h{grid-column:2}
  .studiyo .cover{grid-template-columns:1fr;min-height:0}
  .studiyo .cover .vis{order:-1;min-height:0;padding:28px var(--pad) 0;justify-content:flex-start}
  .studiyo .cover .in{padding:28px var(--pad) 36px}
  .studiyo .cover h2{font-size:clamp(72px,22vw,140px)}
  .studiyo .facts{grid-template-columns:1fr}
  .studiyo .facts>div{border-left:0;border-top:1px solid var(--line-c,var(--line));padding:26px var(--pad) 30px}
  .studiyo .facts>div:first-child{border-top:0}
}
@media(prefers-reduced-motion:reduce){
  .studiyo .ticker .rail{animation:none}
  .studiyo .go i,.studiyo .index .v{transition:none}
}