/* =========================================================
   yusufkansiz.com — tasarım sistemi (PIXEL / 8-bit)
   Tek dosya. Renkleri değiştirmek istersen sadece :root
   bloğundaki değişkenleri değiştir, tüm site güncellenir.
   Görsel dil: retro oyun arayüzü — kalın pixel çerçeveler,
   sert gölgeler (bulanıklık yok), bitmap fontlar, HUD öğeleri.
   ========================================================= */

:root{
  /* Palet: pixel göl manzarası — gece gölü zemin, gök mavisi, çam yeşili, kulübe turuncusu */
  --bg:            #070b10;
  --bg-soft:       #0b1118;
  --surface:       #0f1822;
  --surface-2:     #16243a;
  --line:          #2a3b52;
  --line-soft:     #1a2636;
  --line-hover:    #4fa9f0;
  --shadow:        #000000;

  --text:          #eef4fb;
  --text-muted:    #a9bacb;
  --text-dim:      #6f8398;
  --ink:           #061018;   /* vurgulu zemin üstündeki koyu yazı */
  --hi:            #ffffff;   /* pixel parlama */

  --accent:        #4fa9f0;   /* gök / göl mavisi */
  --accent-2:      #f59a4a;   /* turuncu */
  --accent-3:      #7ccf5b;   /* çam yeşili */
  --warn:          #f2d15c;   /* altın / coin */
  --danger:        #e5534b;   /* kalp */
  --grad: linear-gradient(90deg, var(--accent) 0 33%, var(--accent-3) 33% 66%, var(--warn) 66%);

  --b:             4px;       /* pixel çerçeve kalınlığı */
  --maxw:          1180px;

  --ease: steps(6, end);      /* pixel hissi: kademeli geçişler */
  --ease-soft: cubic-bezier(.22,.68,0,1);

  --font:  "Pixelify Sans", "VT323", ui-monospace, monospace;
  --pixel: "Press Start 2P", "VT323", ui-monospace, monospace;
  --mono:  "VT323", ui-monospace, SFMono-Regular, Menlo, monospace;
  --read:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* pixel imleç (8×8 ok) */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' d='M0 0h1v7H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM1 6h1v1H1zM2 5h2v1H2zM3 6h1v2H3zM4 5h1v1H4z'/%3E%3Cpath fill='%23fff' d='M1 2h1v4H1zM2 3h1v2H2zM3 4h1v1H3z'/%3E%3C/svg%3E") 0 0, auto;
  --sprite-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e5534b' d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3Cpath fill='%23fff' d='M1 1h1v1H1z'/%3E%3C/svg%3E");
  --sprite-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 0h4v1H2zM2 7h4v1H2zM0 2h1v4H0zM7 2h1v4H7zM1 1h1v1H1zM6 1h1v1H6zM1 6h1v1H1zM6 6h1v1H6z'/%3E%3Cpath fill='%23f2d15c' d='M2 1h4v6H2zM1 2h6v4H1z'/%3E%3Cpath fill='%23b8860b' d='M4 2h1v4H4z'/%3E%3Cpath fill='%23fff' d='M2 2h1v2H2z'/%3E%3C/svg%3E");
  --sprite-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23f2d15c' d='M0 0h5v1H4v1H3v1H2V2H1V1H0z'/%3E%3C/svg%3E");
  --sprite-ship: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h1v1H5zM4 1h1v2H4zM6 1h1v2H6zM3 3h1v3H3zM7 3h1v3H7zM2 6h1v2H2zM8 6h1v2H8zM1 7h1v3H1zM9 7h1v3H9zM0 9h1v2H0zM10 9h1v2H10zM2 10h2v1H2zM7 10h2v1H7zM4 9h3v1H4z'/%3E%3Cpath fill='%23eef4fb' d='M5 1h1v8H5zM4 3h3v6H4zM3 6h5v3H3zM2 8h1v2H2zM8 8h1v2H8zM1 10h1v1H1zM9 10h1v1H9z'/%3E%3Cpath fill='%234fa9f0' d='M5 3h1v2H5z'/%3E%3Cpath fill='%23e5534b' d='M1 9h1v1H1zM9 9h1v1H9zM3 7h1v1H3zM7 7h1v1H7z'/%3E%3Cpath fill='%23f59a4a' d='M4 10h1v1H4zM6 10h1v1H6z'/%3E%3C/svg%3E");
  --sprite-enemy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23e5534b' d='M2 0h1v1H2zM8 0h1v1H8zM3 1h1v1H3zM7 1h1v1H7zM2 2h7v1H2zM1 3h2v1H1zM4 3h3v1H4zM8 3h2v1H8zM0 4h11v1H0zM0 5h1v2H0zM2 5h7v1H2zM10 5h1v2H10zM2 6h1v1H2zM8 6h1v1H8zM3 7h2v1H3zM6 7h2v1H6z'/%3E%3Cpath fill='%23f2d15c' d='M3 3h1v1H3zM7 3h1v1H7z'/%3E%3C/svg%3E");
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' d='M0 0h1v7H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM1 6h1v1H1zM2 5h2v1H2zM3 6h1v2H3zM4 5h1v1H4z'/%3E%3Cpath fill='%23f2d15c' d='M1 2h1v4H1zM2 3h1v2H2zM3 4h1v1H3z'/%3E%3C/svg%3E") 0 0, pointer;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; cursor:var(--cursor); }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a, button, .chip, .card, [data-coin]{ cursor:var(--cursor-hand); }
:focus-visible{ outline:var(--b) solid var(--warn); outline-offset:3px; }

::selection{ background:var(--warn); color:var(--ink); }

/* ---------- Yardımcılar ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.grad-text{ color:var(--warn); text-shadow:4px 4px 0 var(--danger); }
.mono{ font-family:var(--mono); font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; }

/* Pixel çerçeve: 4 yönlü box-shadow ile basamaklı köşe + sert alt-sağ gölge.
   --bc = çerçeve rengi, --sc = gölge rengi */
.btn, .card, .studio, .player, .stat, .hero-badge, .lang, .mark, .policy-item, .callout, .chip, .table-wrap, .doc-meta span{
  --bc:var(--line); --sc:var(--shadow);
  border:0;
  margin:var(--b);
  box-shadow:
    0 calc(-1 * var(--b)) 0 0 var(--bc),
    0 var(--b) 0 0 var(--bc),
    calc(-1 * var(--b)) 0 0 0 var(--bc),
    var(--b) 0 0 0 var(--bc),
    var(--b) calc(var(--b) * 2) 0 0 var(--sc),
    calc(var(--b) * 2) var(--b) 0 0 var(--sc);
}
.chip, .hero-badge, .lang, .doc-meta span{ --b:3px; }

/* ---------- Okuma çubuğu: pixel dolum ---------- */
#progress{
  position:fixed; inset:0 auto auto 0; height:6px; width:0;
  background:var(--grad); z-index:120;
  box-shadow:0 2px 0 var(--shadow);
}

/* ---------- Yükleme ekranı ---------- */
.boot{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:grid; place-items:center; align-content:center; gap:22px;
  font-family:var(--pixel); font-size:.8rem; color:var(--text);
  transition:opacity .35s steps(4, end), visibility 0s .35s;
}
.boot i{
  display:block; width:220px; height:18px; padding:3px;
  box-shadow:0 -3px 0 var(--text), 0 3px 0 var(--text), -3px 0 0 var(--text), 3px 0 0 var(--text);
}
.boot i::before{
  content:""; display:block; height:100%; width:0;
  background:repeating-linear-gradient(90deg, var(--accent-3) 0 10px, transparent 10px 12px);
  animation:boot .7s steps(10, end) forwards;
}
.boot small{ font-family:var(--mono); font-size:1.1rem; color:var(--text-dim); letter-spacing:.1em; }
@keyframes boot{ to{ width:100%; } }
body.ready .boot{ opacity:0; visibility:hidden; }

/* ---------- Navigasyon ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px 24px;
  border-bottom:var(--b) solid transparent;
}
.nav.scrolled{
  background:var(--bg);
  border-bottom-color:var(--line);
  box-shadow:0 var(--b) 0 var(--shadow);
  padding-block:10px;
}
.nav-logo{
  font-family:var(--pixel); font-size:.7rem; line-height:1;
  display:flex; align-items:center; gap:12px;
}
.nav-tag{
  font-family:var(--mono); font-size:1rem; letter-spacing:.1em; color:var(--ink);
  padding:1px 6px; background:var(--warn);
}
/* pixel kalp */
.nav-dot{
  width:14px; height:12px; flex:0 0 auto;
  background:var(--sprite-heart) center / contain no-repeat;
  animation:beat 1.2s steps(2, end) infinite;
}
@keyframes beat{ 50%{ transform:scale(1.25); } }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  position:relative; padding:6px 10px;
  font-family:var(--mono); font-size:1.25rem; line-height:1; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.nav-links a::before{ content:"▸"; color:var(--warn); margin-right:4px; visibility:hidden; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::before{ visibility:visible; animation:blink .5s steps(1) infinite; }
.hud-score{
  font-family:var(--pixel); font-size:.55rem; color:var(--text-dim);
  margin:0 8px; white-space:nowrap; display:flex; align-items:center; gap:8px;
}
.hud-score b{ color:var(--warn); font-weight:400; }
.hud-score .coin{ width:12px; height:12px; }
.lang{
  margin-left:10px; display:flex; padding:2px; gap:2px;
  background:var(--surface);
}
.lang button{
  border:0; background:transparent; color:var(--text-dim);
  font-family:var(--pixel); font-size:.55rem;
  padding:6px 8px; cursor:var(--cursor-hand);
}
.lang button:hover{ color:var(--text); }
.lang button.on{ color:var(--ink); background:var(--warn); }

@media (max-width:900px){ .hud-score{ display:none; } }
@media (max-width:760px){
  .nav-links a{ display:none; }
  .nav-links .lang{ display:flex; margin:0; }
  .nav-tag{ display:none; }
}

/* pixel coin (içerikte ve HUD'da) */
.coin{
  display:inline-block; width:16px; height:16px; flex:0 0 auto;
  background:var(--sprite-coin) center / contain no-repeat;
  animation:spin 1s steps(4, end) infinite;
}
@keyframes spin{ 0%,100%{ transform:scaleX(1); } 25%{ transform:scaleX(.5); } 50%{ transform:scaleX(.15); } 75%{ transform:scaleX(.5); } }

/* "+100" sayı fırlaması */
.pop{
  position:absolute; z-index:150; pointer-events:none;
  font-family:var(--pixel); font-size:.7rem; color:var(--warn);
  text-shadow:2px 2px 0 var(--shadow);
  animation:pop .9s steps(9, end) forwards;
}
@keyframes pop{ 0%{ transform:translate(-50%,0); opacity:1; } 100%{ transform:translate(-50%,-48px); opacity:0; } }

/* ---------- Arkaplan: pixel yıldızlar + tarama çizgisi ---------- */
.aurora{ display:none; }
.stars{
  position:fixed; top:0; left:0; width:3px; height:3px; z-index:-2; pointer-events:none;
  background:transparent;
  animation:twinkle 3.2s steps(2, end) infinite;
}
.stars.s2{ width:2px; height:2px; animation-duration:2.1s; animation-delay:-1s; }
@keyframes twinkle{ 50%{ opacity:.35; } }

.grid-overlay{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size:32px 32px;
}
/* CRT tarama çizgileri + köşe kararması */
.grid-overlay::after{
  content:""; position:fixed; inset:0; z-index:130; pointer-events:none;
  background:
    linear-gradient(transparent 50%, color-mix(in srgb, var(--shadow) 18%, transparent) 50%) 0 0 / 100% 4px,
    radial-gradient(ellipse at center, transparent 60%, color-mix(in srgb, var(--shadow) 45%, transparent) 100%);
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 64px;
  position:relative; isolation:isolate;
}
/* Pixel manzara arka planı: 2752×1536 WebP. */
.hero::before,
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero::before{
  background:url("/assets/img/manzara.webp") 62% bottom / cover no-repeat;
  image-rendering:pixelated;
}
.hero::after{
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 65%, transparent) 0, transparent 180px),
    linear-gradient(to bottom, transparent 70%, var(--bg) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg) 78%, transparent) 42%,
      color-mix(in srgb, var(--bg) 12%, transparent) 72%,
      transparent 100%);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px;
  background:var(--surface);
  font-family:var(--mono); font-size:1.1rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
  color:var(--text);
  width:fit-content;
}
.hero-badge .dot{
  width:8px; height:8px; background:var(--accent-3);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero h1{
  font-family:var(--pixel); font-weight:400;
  font-size:clamp(1.25rem, 4.4vw, 3.3rem);
  line-height:1.35; letter-spacing:0;
  margin:30px 0 0;
  text-shadow:4px 4px 0 var(--shadow);
}
.hero h1 .grad-text{ text-shadow:4px 4px 0 var(--danger), 8px 8px 0 var(--shadow); }
.hero h1 .line{ display:block; overflow:hidden; padding:0 8px 8px 0; }
.hero h1 .line > span{ display:block; }
.hero h1 .line:last-child > span::after{
  content:""; display:inline-block; width:.6em; height:.9em; margin-left:.25em; vertical-align:-.1em;
  background:var(--accent-3);
  animation:blink 1s steps(1) infinite;
}
.hero-sub{
  margin:22px 0 0; max-width:54ch;
  font-size:clamp(1.05rem, 2.4vw, 1.22rem);
  color:var(--text-muted);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:34px; align-items:center; }
.press-start{
  font-family:var(--pixel); font-size:.62rem; color:var(--warn);
  margin-top:28px; letter-spacing:.06em;
  animation:blink 1.1s steps(1) infinite;
}

/* ---------- Butonlar: basılabilir 8-bit tuşlar ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px;
  font-family:var(--pixel); font-size:.62rem; line-height:1.4;
  background:var(--surface); color:var(--text);
  position:relative;
  transition:transform .08s steps(1), box-shadow .08s steps(1);
}
.btn::before{ content:"▸"; color:var(--warn); }
.btn:hover{ --bc:var(--hi); background:var(--surface-2); }
.btn:hover::before{ animation:blink .5s steps(1) infinite; }
.btn:active{
  transform:translate(var(--b), var(--b));
  box-shadow:
    0 calc(-1 * var(--b)) 0 0 var(--bc), 0 var(--b) 0 0 var(--bc),
    calc(-1 * var(--b)) 0 0 0 var(--bc), var(--b) 0 0 0 var(--bc);
}
.btn-primary{
  --bc:var(--ink);
  color:var(--ink); background:var(--accent-3);
  background-image:linear-gradient(to bottom, color-mix(in srgb, var(--hi) 35%, transparent) 0 4px, transparent 4px calc(100% - 4px), color-mix(in srgb, var(--ink) 30%, transparent) calc(100% - 4px));
}
.btn-primary::before{ color:var(--ink); }
.btn-primary:hover{ --bc:var(--hi); background-color:var(--warn); }
.btn svg{ shape-rendering:crispEdges; }

/* ---------- Hero HUD istatistikleri ---------- */
.hero-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
  margin-top:56px;
}
/* Açıklamaya display verilmez — yoksa dil gizleme kuralını ezer. */
.stat{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-content:start;
  padding:14px 16px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
}
.stat::before{
  content:attr(data-k); grid-row:1 / span 3;
  font-family:var(--pixel); font-size:.55rem; color:var(--ink);
  background:var(--c, var(--accent)); padding:6px 5px; align-self:start;
}
.stat > *{ grid-column:2; }
.stat:nth-child(2){ --c:var(--accent-3); }
.stat:nth-child(3){ --c:var(--accent-2); }
.stat b{ font-family:var(--pixel); font-size:.72rem; font-weight:400; line-height:1.6; }
.stat span{ font-family:var(--mono); font-size:1.05rem; line-height:1.2; color:var(--text-dim); }
.bar{
  display:block; height:10px; margin-top:8px; padding:2px;
  background:var(--bg); box-shadow:0 0 0 2px var(--line);
}
.bar::before{
  content:""; display:block; height:100%; width:0;
  background:repeating-linear-gradient(90deg, var(--c, var(--accent)) 0 6px, transparent 6px 8px);
  transition:width 1.2s steps(12, end) .4s;
}
.in .bar::before{ width:var(--v, 50%); }

.scroll-hint{
  position:absolute; bottom:26px; right:24px;
  font-family:var(--pixel); font-size:.5rem; color:var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-hint i{
  width:12px; height:12px;
  background:var(--sprite-arrow) center / contain no-repeat;
  animation:hint 1s steps(2, end) infinite;
}
@keyframes hint{ 50%{ transform:translateY(6px); } }
@media (max-height:940px), (max-width:860px){ .scroll-hint{ display:none; } }

@media (max-height:920px) and (min-width:861px){
  .hero{ padding:104px 0 48px; }
  .hero-sub{ margin-top:16px; }
  .hero-cta{ margin-top:26px; }
  .press-start{ margin-top:20px; }
  .hero-stats{ margin-top:34px; }
}
@media (max-width:760px){
  .hero-stats{ grid-template-columns:1fr; gap:14px; margin-top:40px; }
}
@media (max-width:640px){
  .hero{ padding:104px 0 56px; }
  section{ padding:80px 0; }
  .card{ padding:20px; }
  .btn{ padding:13px 16px; font-size:.56rem; }
}

/* ---------- Bölümler ---------- */
section{ padding:110px 0; position:relative; }
.sec-head{ margin-bottom:52px; max-width:62ch; }
.sec-head-split{
  max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:24px 56px; align-items:end;
}
.sec-head-split p{ margin:0; }
@media (max-width:860px){ .sec-head-split{ grid-template-columns:1fr; } }
.sec-kicker{
  display:flex; align-items:center; gap:.6em;
  color:var(--accent-3); margin-bottom:18px;
}
.sec-kicker::before{
  content:"LVL " attr(data-level);
  font-family:var(--pixel); font-size:.55rem; letter-spacing:0;
  color:var(--ink); background:var(--accent-3); padding:5px 7px 4px;
}
.sec-kicker:not([data-level])::before{ content:"▸"; background:none; color:var(--warn); padding:0; }
.sec-head h2, .doc-head h1{
  font-family:var(--pixel); font-weight:400;
  font-size:clamp(1.05rem, 3vw, 1.9rem);
  line-height:1.5; letter-spacing:0; margin:0;
  text-shadow:3px 3px 0 var(--shadow);
}
.sec-head p{ color:var(--text-muted); margin:16px 0 0; }

/* ---------- Hakkımda ---------- */
.about{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:64px; align-items:start; }
@media (max-width:900px){ .about{ grid-template-columns:1fr; gap:40px; } .player{ max-width:380px; } }

.about p{ color:var(--text-muted); margin:0 0 18px; font-size:1.12rem; }
.about p strong{ color:var(--warn); font-weight:600; }
.about p a{ color:var(--accent); border-bottom:3px solid currentColor; }
.about p a:hover{ color:var(--ink); background:var(--accent); }
.stack-label{ margin:34px 0 12px; color:var(--text-dim); }

/* Oyuncu kartı: karakter seçim ekranı */
.player{
  --bc:var(--accent); --b:5px;
  padding:20px;
  background:var(--surface);
}
.player-head{
  display:flex; justify-content:space-between; gap:12px;
  padding-bottom:12px; margin-bottom:16px; border-bottom:var(--b) solid var(--line);
  font-size:1.05rem;
}
.player-head b{ color:var(--warn); font-weight:400; }
.player-head .status{ color:var(--accent-3); display:inline-flex; align-items:center; gap:7px; }
.player-head .status::before{ content:""; width:8px; height:8px; background:var(--accent-3); animation:blink 1s steps(1) infinite; }

.portrait-frame{
  position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--bg-soft);
  box-shadow:
    0 -4px 0 0 var(--line), 0 4px 0 0 var(--line),
    -4px 0 0 0 var(--line), 4px 0 0 0 var(--line);
  margin:4px;
}
.portrait-frame img{
  display:block; width:100%; height:100%;
  image-rendering:pixelated; image-rendering:crisp-edges;
  animation:idle 1.4s steps(2, end) infinite;
}
@keyframes idle{ 50%{ transform:translateY(4px); } }
/* seçim köşeli ayraçları */
.portrait-frame::before, .portrait-frame::after{
  content:""; position:absolute; width:22px; height:22px; z-index:1;
  border:4px solid var(--warn);
  animation:blink 1s steps(1) infinite;
}
.portrait-frame::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.portrait-frame::after{ bottom:8px; right:8px; border-left:0; border-top:0; }

.player-stats{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.player-stats li{
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:1.1rem; line-height:1.2;
  padding-bottom:10px; border-bottom:2px dashed var(--line-soft);
}
.player-stats li:last-child{ border-bottom:0; padding-bottom:0; }
.player-stats li > span{ color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.player-stats li > b{ color:var(--text); font-weight:400; text-align:right; }
.player-foot{
  margin-top:16px; padding-top:12px; border-top:var(--b) solid var(--line);
  font-size:1.05rem; color:var(--text-dim);
}
.player-foot b{ color:var(--accent-2); font-weight:400; }

/* ---------- Envanter etiketleri ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chip{
  padding:3px 10px; font-family:var(--mono); font-size:1.1rem; line-height:1.3;
  background:var(--surface); color:var(--text-muted);
}
.chip:hover{ --bc:var(--warn); color:var(--ink); background:var(--warn); transform:translateY(-3px); }

/* ---------- Görev (proje) kartları ---------- */
.projects{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; }
.card.featured{ grid-column:span 2; }
@media (max-width:980px){ .projects{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:680px){
  .projects{ grid-template-columns:1fr; }
  .card.featured{ grid-column:auto; }
}
.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  padding:26px;
  transition:transform .15s steps(2, end);
}
/* kartuş üst şeridi */
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--c, var(--accent)) 0 12px, transparent 12px 16px);
}
.card:hover{ --bc:var(--c, var(--accent)); transform:translate(-3px,-3px); background:var(--surface-2); }
.card:hover .card-icon{ animation:hop .4s steps(2, end) infinite; }
@keyframes hop{ 50%{ transform:translateY(-4px); } }
.card-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:3px solid var(--line-soft);
}
.card-kind{ display:flex; align-items:center; gap:12px; min-width:0; }
.card-kind .mono{ font-size:1.05rem; color:var(--text-muted); }
.card-icon{
  width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--c, var(--accent)); color:var(--ink);
  font-family:var(--pixel); font-size:.85rem;
  box-shadow:inset -4px -4px 0 color-mix(in srgb, var(--ink) 35%, transparent),
             inset 4px 4px 0 color-mix(in srgb, var(--hi) 40%, transparent),
             0 0 0 3px var(--ink);
}
.card:nth-child(2){ --c:var(--accent-2); }
.card:nth-child(3){ --c:var(--accent-3); }
.card:nth-child(4){ --c:var(--warn); }
.card:nth-child(5){ --c:var(--danger); }
.tag{
  flex:0 0 auto;
  font-family:var(--pixel); font-size:.48rem; line-height:1.4;
  padding:6px 7px 5px; white-space:nowrap;
  background:var(--accent-3); color:var(--ink);
}
.tag.wip{ background:var(--warn); }
.tag.live{ background:var(--accent); }
.card h3{
  margin:0 0 12px; font-family:var(--pixel); font-weight:400;
  font-size:.9rem; line-height:1.5;
}
.card.featured h3{ font-size:1.35rem; color:var(--warn); text-shadow:3px 3px 0 var(--shadow); }
.card p{ margin:0 0 22px; color:var(--text-muted); font-size:1.05rem; }
.card.featured p{ font-size:1.15rem; max-width:58ch; }
.card .chips{ margin-top:auto; padding-top:16px; border-top:3px solid var(--line-soft); }
.card .chips .chip{ font-size:1rem; padding:1px 8px; }

/* ---------- Stüdyo / lonca ---------- */
.studio{
  --b:6px; --bc:var(--accent-2);
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-2) 5%, transparent) 0 12px, transparent 12px 24px),
    var(--surface);
  padding:56px 48px;
}
.studio-inner{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.studio-badge{
  display:inline-block; margin:6px 0 0; padding:3px 10px;
  background:var(--accent-2); color:var(--ink); font-size:1.05rem;
}
.studio h2{
  font-family:var(--pixel); font-weight:400;
  font-size:clamp(1.05rem,3vw,1.8rem); line-height:1.4; margin:18px 0 16px;
  color:var(--accent-2); text-shadow:4px 4px 0 var(--shadow);
}
.studio p{ color:var(--text-muted); margin:0 0 26px; font-size:1.1rem; }
.studio-marks{ display:grid; gap:18px; }
.mark{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 18px;
  background:var(--bg-soft);
  transition:transform .15s steps(2, end);
}
.mark:hover{ --bc:var(--c, var(--accent-3)); transform:translateX(6px); }
.mark b{ display:block; font-family:var(--pixel); font-weight:400; font-size:.62rem; line-height:1.6; margin-bottom:6px; }
.mark span{ font-size:1.02rem; color:var(--text-muted); }
.mark-icon{
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px;
  background:var(--surface-2);
  box-shadow:0 0 0 3px var(--line);
}
.mark-icon svg{ width:24px; height:24px; color:var(--c, var(--accent-3)); shape-rendering:crispEdges; }
.mark:nth-child(2){ --c:var(--accent); }
.mark:nth-child(3){ --c:var(--accent-2); }
@media (max-width:860px){ .studio{ padding:38px 22px; } .studio-inner{ grid-template-columns:1fr; gap:30px; } }

/* ---------- İletişim: "continue?" ekranı ---------- */
.contact{ text-align:center; padding-bottom:80px; }
.contact .sec-kicker{ justify-content:center; }
.contact h2{
  font-family:var(--pixel); font-weight:400;
  font-size:clamp(1.2rem,4.4vw,2.6rem); line-height:1.4; margin:0 0 20px;
  color:var(--warn); text-shadow:4px 4px 0 var(--danger), 8px 8px 0 var(--shadow);
}
.contact p{ color:var(--text-muted); max-width:52ch; margin:0 auto 34px; font-size:1.12rem; }
.contact-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.contact .btn{ padding:18px 28px; font-size:.7rem; }
.credits{
  margin-top:30px; font-family:var(--pixel); font-size:.55rem; color:var(--text-dim);
  display:flex; justify-content:center; align-items:center; gap:10px;
}

/* ---------- Alt bilgi ---------- */
footer{
  border-top:var(--b) solid var(--line); padding:30px 0;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:1.1rem; color:var(--text-dim);
}
footer a{ color:var(--text-muted); }
footer a:hover{ color:var(--ink); background:var(--warn); }
.footer-links{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.sys-status{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent-3); text-transform:uppercase; letter-spacing:.06em;
}
.sys-status::before{ content:""; width:8px; height:8px; background:currentColor; animation:blink 1.4s steps(1) infinite; }

/* ---------- Hile kodu (↑↑↓↓←→←→BA) ---------- */
.toast{
  position:fixed; left:50%; bottom:32px; z-index:160; transform:translateX(-50%);
  font-family:var(--pixel); font-size:.6rem; line-height:1.6; text-align:center;
  padding:14px 18px; background:var(--ink); color:var(--warn);
  box-shadow:0 0 0 4px var(--warn), 6px 6px 0 4px var(--shadow);
  animation:toast 2.6s steps(1) forwards;
}
@keyframes toast{ 0%{ opacity:1; } 92%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }
body.cheat .hero h1, body.cheat .sec-head h2{ animation:rainbow 1.2s steps(6) infinite; }
@keyframes rainbow{ to{ filter:hue-rotate(360deg); } }

/* ---------- Animasyon: scroll reveal (pixel adımlı) ---------- */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .5s steps(5, end), transform .5s steps(5, end);
  transition-delay:var(--delay, 0s);
}
[data-reveal].in{ opacity:1; transform:none; }
/* Kartların hover geçişi reveal gecikmesini miras almasın */
.card.in, .mark.in{ transition-delay:0s; }

.hero h1 .line > span{
  transform:translateY(110%);
  transition:transform .6s steps(6, end);
  transition-delay:var(--delay,0s);
}
body.ready .hero h1 .line > span{ transform:none; }

/* ---------- Gizlilik / doküman sayfaları ---------- */
.doc{ padding:150px 0 90px; }
.doc-head{ margin-bottom:44px; }
.doc-head h1{ margin:16px 0 12px; }
.doc-meta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.doc-meta span{
  font-family:var(--mono); font-size:1.05rem; padding:2px 10px;
  background:var(--surface); color:var(--text-muted);
}
/* Uzun hukuki metin: okunabilirlik için düz font */
.doc-body{ max-width:76ch; font-family:var(--read); font-size:16px; -webkit-font-smoothing:antialiased; }
.doc-body h2{
  font-family:var(--pixel); font-weight:400; font-size:.85rem; line-height:1.6;
  color:var(--warn); margin:46px 0 16px; scroll-margin-top:100px;
}
.doc-body h3{ font-family:var(--font); font-size:1.15rem; margin:28px 0 10px; color:var(--text); }
.doc-body p, .doc-body li{ color:var(--text-muted); }
.doc-body ul, .doc-body ol{ padding-left:20px; }
.doc-body ul{ list-style:square; }
.doc-body li{ margin:8px 0; }
.doc-body li::marker{ color:var(--accent-3); }
.doc-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.doc-body strong{ color:var(--text); font-weight:600; }
.callout{
  --bc:var(--accent);
  background:var(--surface);
  padding:18px 20px; margin:30px var(--b);
}
.callout p{ margin:0; font-size:.95rem; }
.doc-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.doc-table th, .doc-table td{
  text-align:left; padding:12px 14px; border-bottom:2px solid var(--line-soft); vertical-align:top;
}
.doc-table th{ color:var(--warn); font-family:var(--pixel); font-weight:400; font-size:.5rem; line-height:1.6; background:var(--surface-2); }
.doc-table td{ color:var(--text-muted); }
.doc-table tr:last-child td{ border-bottom:0; }
.table-wrap{ overflow-x:auto; margin:24px var(--b); background:var(--surface); }

.policy-list{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.policy-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px;
  background:var(--surface);
  transition:transform .15s steps(2, end);
}
.policy-item:hover{ --bc:var(--accent); transform:translate(-3px,-3px); background:var(--surface-2); }
.policy-item b{ display:block; font-family:var(--pixel); font-weight:400; font-size:.75rem; line-height:1.6; margin-bottom:4px; }
.policy-item span{ font-size:1rem; color:var(--text-dim); }
.policy-item i{ font-style:normal; color:var(--warn); font-size:1.4rem; }

/* 404: GAME OVER */
.game-over{ font-family:var(--pixel); color:var(--danger); font-size:.8rem; letter-spacing:.1em; text-shadow:3px 3px 0 var(--shadow); }

/* ---------- Uzay gemisi mini oyunu ---------- */
.ship-dock{
  position:fixed; right:22px; bottom:22px; z-index:140;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 10px 8px; margin:0; border:0;
  background:var(--surface); color:var(--warn);
  font-family:var(--pixel); font-size:.5rem;
  box-shadow:0 0 0 3px var(--warn), 5px 5px 0 3px var(--shadow);
  animation:hop 1.2s steps(2, end) infinite;
}
.ship-dock:hover{ background:var(--surface-2); }
.ship-sprite{
  display:block; width:33px; height:36px;
  background:var(--sprite-ship) center / contain no-repeat;
}
body.flying .ship-dock{ display:none; }

.ship{
  position:fixed; left:0; top:0; z-index:145; width:44px; height:48px; margin:-24px 0 0 -22px;
  pointer-events:none; will-change:transform;
}
.ship .ship-sprite{ width:100%; height:100%; }
/* motor alevi */
.ship::after{
  content:""; position:absolute; left:50%; top:100%; width:12px; height:10px; margin-left:-6px;
  background:linear-gradient(var(--warn) 0 50%, var(--accent-2) 50%);
  animation:blink .12s steps(1) infinite;
  visibility:hidden;
}
.ship.thrust::after{ visibility:visible; }

.enemy{
  position:fixed; left:0; top:0; z-index:144; width:44px; height:32px; margin:-16px 0 0 -22px;
  background:var(--sprite-enemy) center / contain no-repeat;
  pointer-events:none; will-change:transform;
  animation:wobble .5s steps(2, end) infinite;
}
@keyframes wobble{ 50%{ background-position:center 3px; } }
/* hasar alınca gemi yanıp söner */
.ship.hurt{ animation:blink .12s steps(1) 6; }

.laser{
  position:fixed; left:0; top:0; z-index:144; width:4px; height:16px; margin:-8px 0 0 -2px;
  background:var(--accent-3);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-3) 35%, transparent);
  pointer-events:none;
}
.boom{
  position:fixed; z-index:146; width:8px; height:8px; margin:-4px 0 0 -4px; pointer-events:none;
  background:var(--warn);
  box-shadow:
    -12px 0 0 var(--accent-2), 12px 0 0 var(--accent-2), 0 -12px 0 var(--accent-2), 0 12px 0 var(--accent-2),
    -8px -8px 0 var(--danger), 8px 8px 0 var(--danger), 8px -8px 0 var(--danger), -8px 8px 0 var(--danger);
  animation:boom .35s steps(4, end) forwards;
}
@keyframes boom{ from{ transform:scale(.4); } to{ transform:scale(2.2); opacity:0; } }
.hit{ animation:hit .3s steps(3, end); }
@keyframes hit{
  0%{ transform:translate(4px,-2px); filter:brightness(2); }
  50%{ transform:translate(-4px,2px); }
  100%{ transform:none; }
}

.ship-help{
  position:fixed; left:50%; top:78px; z-index:140; transform:translateX(-50%);
  font-family:var(--mono); font-size:1.15rem; white-space:nowrap;
  padding:4px 12px; background:var(--ink); color:var(--text-muted);
  box-shadow:0 0 0 3px var(--line);
  display:none;
}
.ship-help b{ color:var(--warn); font-weight:400; }
body.flying .ship-help{ display:block; }

/* Dokunmatik gamepad */
.pad{
  position:fixed; left:0; right:0; bottom:0; z-index:147;
  display:none; justify-content:space-between; align-items:flex-end;
  padding:0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.pad button{
  pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none;
  border:0; margin:0; padding:0;
  font-family:var(--pixel); font-size:.8rem; color:var(--text);
  background:color-mix(in srgb, var(--surface-2) 85%, transparent);
  box-shadow:0 0 0 3px var(--line), 4px 4px 0 3px var(--shadow);
}
.pad button.on{ background:var(--warn); color:var(--ink); transform:translate(2px,2px); }
.dpad{
  display:grid; grid-template-columns:repeat(3, 52px); grid-template-rows:repeat(3, 52px); gap:4px;
}
.dpad [data-key="w"]{ grid-area:1 / 2; }
.dpad [data-key="a"]{ grid-area:2 / 1; }
.dpad [data-key="d"]{ grid-area:2 / 3; }
.dpad [data-key="s"]{ grid-area:3 / 2; }
.pad-right{ display:flex; align-items:flex-end; gap:18px; }
.pad .pad-fire{
  width:78px; height:78px; font-size:1.2rem;
  background:var(--danger); color:var(--hi);
}
.pad .pad-exit{ width:44px; height:44px; font-size:.7rem; }
@media (hover:none), (pointer:coarse){
  body.flying .pad{ display:flex; }
  body.flying .ship-help{ display:none; }
  .ship-dock{ right:14px; bottom:14px; }
}

/* ---------- Dil değiştirici ---------- */
/* html öneki özgüllüğü artırır: `.mark b{display:block}` gibi kurallar gizlemeyi ezemez */
html:not([lang="en"]) [data-lang-en]{ display:none; }
html[lang="en"] [data-lang-tr]{ display:none; }

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hero h1 .line > span{ transform:none; }
  .boot{ display:none; }
}