*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#d6d6da; --body:rgba(214,214,218,.74); --dim:rgba(214,214,218,.5); --grad:linear-gradient(180deg,#dcdce0 8%,#7b7b84 92%);
  color-scheme:dark; --line:rgba(255,255,255,.14); --ground:#0b0b0c;
  --pad:clamp(24px,8vw,128px);
  --display:'Syne',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
}
html{scrollbar-width:none;background:var(--ground);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:var(--mono);font-weight:300;color:var(--body);font-size:15px;line-height:1.75;background:var(--ground);min-height:100svh;overflow-x:hidden}
img,svg{-webkit-user-drag:none}
::selection{background:var(--ink);color:#000}
#shader-canvas{position:fixed;top:0;left:0;width:100%;height:100%;height:100lvh;z-index:0;transform:translateZ(0)}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 50%,transparent 85%)}
a,button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px;border-radius:2px}

/* page */
#page{position:relative;z-index:2;padding:0 var(--pad)}
.controls{position:fixed;z-index:10;top:max(18px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));display:flex;gap:8px;font-size:12px;color:var(--dim)}
.controls button{height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(8,8,10,.55);transition:color .2s,border-color .2s,background .2s}
.controls button:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}
.controls button:hover,.controls button[aria-pressed="false"]{color:var(--ink)}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px 0 clamp(40px,9vh,88px)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(96px,26vw,340px);line-height:.78;letter-spacing:.025em;margin:0 0 clamp(68px,14vh,136px) -.04em;padding-bottom:.12em;color:var(--ink);transform-origin:left bottom;will-change:transform,opacity}
.l{display:inline-block;line-height:1.3;margin:-.26em -.14em;padding:0 .14em;background:linear-gradient(180deg,#e8e8ec 24%,#80808a 90%);-webkit-background-clip:text;background-clip:text;color:transparent;transform-origin:50% 72%;will-change:transform}
.l{animation:lt 1.5s cubic-bezier(.16,1,.3,1) calc(.35s + var(--i)*.09s) backwards}
@keyframes lt{from{opacity:0;transform:translateY(.3em) skewX(-14deg) scale(1.06,1.3);filter:blur(16px)}to{opacity:1;transform:none;filter:blur(0)}}
.lede{max-width:42ch;margin-top:0;font-size:clamp(16px,2vw,19px);color:var(--ink);line-height:1.55}
.live{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:32px}
.live dt{font-size:12px;color:var(--dim)}
.live dd{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;transition:opacity .2s}
section:not(.hero){max-width:640px;padding:clamp(48px,9vh,88px) 0}
h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:-.03em;color:var(--ink);margin-bottom:28px}
section p+p{margin-top:1.1em}
.rv{opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.rv.show{opacity:1;transform:none}
.quiet{color:var(--dim)}
section p{max-width:62ch}
.rows{list-style:none;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:24px;background:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.08),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(8,8,10,.5)}
.rows li+li{border-top:1px solid var(--line)}
.rows li{transition:background .25s}
.rows li:hover{background:rgba(255,255,255,.04)}
.rows li,.links li>*{display:grid;grid-template-columns:minmax(0,12rem) 1fr;gap:6px 24px;padding:16px 22px;width:100%}
.links li{display:block;padding:0}
#projects,#elsewhere{max-width:760px}
.rows .name{color:var(--ink);font-weight:400}
.rows .desc{color:var(--dim)}
.links a .name,.links button .name{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.links a:hover .name,.links button:hover .name{transform:translateX(6px)}
.links :focus-visible{outline-offset:-3px;border-radius:18px}
.links a:hover .desc,.links button:hover .desc{color:var(--ink)}
.copied .name{color:var(--ink)}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:2;padding:48px var(--pad) max(40px,env(safe-area-inset-bottom));font-size:12px;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:560px){
  .rows li,.links li>*{grid-template-columns:1fr}
  .scrim{background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.45))}
}
@media (pointer:fine){
  *{cursor:none!important}
  #dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:rgba(235,235,235,.92);pointer-events:none;z-index:9999;
    transform:translate3d(-50px,-50px,0);box-shadow:0 0 6px 2px rgba(200,200,200,.2);transition:width .15s,height .15s,margin .15s,background .15s;will-change:transform}
  #dot.hot{width:20px;height:20px;margin:-7px 0 0 -7px;background:rgba(235,235,235,.14);box-shadow:0 0 0 1px rgba(235,235,235,.65)}
  #dot.down{width:4px;height:4px;margin:1px 0 0 1px}
}
@media (pointer:coarse){#dot{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .hint span,.hint i,.caret{animation:none!important}
}

::-webkit-scrollbar{display:none}

.eq{display:flex;align-items:center;gap:2px;height:16px}
.eq i{display:block;width:2px;height:16px;border-radius:2px;background:var(--ink);transform:scaleY(.16);will-change:transform;transition:opacity .3s}
#sound[aria-pressed="false"] .eq i{opacity:.4}
.links .name{display:flex;align-items:center;gap:14px}
.ic{width:18px;height:18px;fill:currentColor;flex:none;opacity:.7;transition:opacity .25s}
.links a:hover .ic,.links button:hover .ic{opacity:1}
.hint{position:fixed;z-index:9;right:var(--pad);bottom:clamp(28px,6vh,56px);display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--dim);opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hint.on{opacity:1;transform:none}
.hint i{display:block;width:1px;height:46px;margin-top:10px;background:linear-gradient(180deg,transparent,#fff 50%,transparent);opacity:.3}
.hint.on span{animation:glowT 4.5s ease-in-out .9s infinite}
.hint.on i{animation:glowL 4.5s ease-in-out .9s infinite}
@keyframes glowT{0%,13.3%,20%,33.3%,100%{color:var(--dim);text-shadow:none}6.7%,26.7%{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.55)}}
@keyframes glowL{0%,13.3%,20%,33.3%,100%{opacity:.3}6.7%,26.7%{opacity:1}}
#sbar{position:fixed;z-index:20;top:14px;bottom:14px;right:4px;width:16px;opacity:0;pointer-events:none;transform:translateX(12px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
#sbar.on{opacity:1;transform:none;pointer-events:auto}
#sthumb{position:absolute;top:0;right:4px;width:5px;border-radius:999px;background:linear-gradient(180deg,rgba(226,226,230,.55),rgba(150,150,158,.4));transition:width .25s,right .25s}
#sbar:hover #sthumb,#sbar.drag #sthumb{width:8px;right:3px}

/* language button + switch fx */
#lang{position:relative;width:36px;padding:0}
#lang .f{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.4) rotate(-140deg);transition:opacity .4s ease,transform .7s cubic-bezier(.16,1,.3,1)}
#lang .f svg{display:block;width:100%;height:100%}
#lang[data-lang="en"] .f-en,#lang[data-lang="tr"] .f-tr{opacity:1;transform:none}
#lang:hover .f{filter:brightness(1.15)}
body.langfx [data-i]{transition:opacity .18s ease!important;transition-delay:0s!important}
body.lang-out [data-i]{opacity:0!important}
/* polish */
.pre{white-space:pre-line}
.stat{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--ink);margin-top:2em}
p,.lede{text-wrap:pretty}
h1,h2{text-wrap:balance}
#top{color:var(--dim);transition:color .2s}
#top:hover{color:var(--ink)}

/* entrance gate: solid black, blocks everything, opens like a curtain */
html.lock{overflow:hidden}
#gate{position:fixed;inset:0;z-index:2}
.gp{position:absolute;left:0;right:0;background:#000;transition:transform 1.05s cubic-bezier(.76,0,.24,1) .3s}
.gate-a{top:0;height:50.5%}
.gate-b{bottom:0;height:50.5%}
#gate.out{pointer-events:none}
#gate.out .gate-a{transform:translateY(-101%)}
#gate.out .gate-b{transform:translateY(101%)}
#enter{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding:0 var(--pad) clamp(40px,9vh,88px);text-align:left}
#enter:focus-visible{outline:none}
.g-t{display:inline-flex;align-items:center;gap:10px;font-size:clamp(16px,2vw,19px);color:var(--ink);transition:color .3s ease;animation:gin .9s cubic-bezier(.16,1,.3,1) 1.5s backwards}
#enter:hover .g-t,#enter:focus-visible .g-t{color:#fff}
#enter:hover .caret{animation-duration:.6s}
.caret{display:block;width:.55em;height:1.1em;background:var(--ink);animation:blink 1.1s steps(1) infinite}
#gate.out .g-t{animation:gout .45s ease forwards}
@keyframes blink{50%{opacity:0}}
@keyframes gin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gout{to{opacity:0;transform:translateY(-6px)}}
.controls{opacity:0;transition:opacity .9s ease .9s}
body.in .controls{opacity:1}

h1:not([aria-label]){visibility:hidden}
/* volume: the sound pill grows to the left and reveals the slider */
.sndwrap{position:relative;display:inline-flex;align-items:center;height:32px;border:1px solid var(--line);border-radius:999px;background:rgba(8,8,10,.55);transition:border-color .25s,background .25s}
.sndwrap:hover,.sndwrap.open{border-color:rgba(255,255,255,.3);background:rgba(30,30,34,.72)}
.controls .sndwrap #sound{border:0;background:none;border-radius:999px}
.vol{display:flex;align-items:center;gap:12px;height:100%;max-width:0;padding-left:0;opacity:0;overflow:hidden;pointer-events:none;white-space:nowrap;transition:max-width .55s cubic-bezier(.16,1,.3,1),padding .55s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.sndwrap.open .vol,.sndwrap:has(:focus-visible) .vol{max-width:180px;padding-left:18px;opacity:1;pointer-events:auto}
.vol output{width:3ch;min-width:3ch;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
#vol{-webkit-appearance:none;appearance:none;flex:none;width:100px;height:4px;margin:0;border-radius:999px;background:linear-gradient(90deg,var(--ink) var(--v,32%),rgba(255,255,255,.2) var(--v,32%));outline:none}
#vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 0 0 4px rgba(255,255,255,.08);transition:transform .2s}
#vol:hover::-webkit-slider-thumb,#vol:active::-webkit-slider-thumb{transform:scale(1.25)}
#vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
#vol::-moz-range-track{background:transparent}
#vol:focus-visible{outline:1px solid var(--ink);outline-offset:6px}

.rows{border-radius:14px;background:rgba(255,255,255,.022)}
.rows li:hover{background:rgba(255,255,255,.035)}
.links{width:fit-content;min-width:min(100%,330px);justify-self:start}
@media (min-width:561px){.links li>*{grid-template-columns:9rem auto}}
/* mobile */
@media (max-width:560px){
  body{font-size:14.5px}
  .hero{padding-top:88px}
  h1{font-size:31vw;margin-bottom:clamp(48px,10vh,84px)}
  .live{gap:10px 28px;margin-top:26px}
  .hint{left:0;right:0;bottom:12px;align-items:center}
  .hint i{height:24px;margin-top:6px}
  .rows li,.links li>*{padding:14px 18px;row-gap:2px}
  .links{width:100%}
  footer{padding-top:24px}
}
@media (pointer:coarse){
  .controls button,.sndwrap{height:40px}
  .controls .sndwrap #sound{height:100%}
  #lang{width:42px}
  #lang .f{width:20px;height:20px;margin:-10px 0 0 -10px}
  #top{padding:10px 0}
}