:root{
  color-scheme:dark;
  /* KOYU TEMA (varsayılan): mavimsi grafit zemin, soğuk beyaz yazı, limon vurgu */
  --bg:#0b0e13;        /* sayfa zemini */
  --surface:#131920;   /* kart zemini */
  --text:#e7edf3;      /* ana yazı */
  --muted:#8d9aab;     /* ikincil yazı */
  --edge:#28323f;      /* çerçeveler */
  --line:rgba(231,237,243,.07);
  --accent:#c6f23f;    /* ana vurgu: limon */
  --hot:#ff6a4d;       /* oyuncu, sayaç: mercan */
  --gold:#f2b84b;      /* madeni para */
  --teal:#3fc7a8;      /* madde işaretleri, canlı rozet */
  --pad:clamp(18px,5vw,64px);
  --max:1180px;
}
/* AÇIK TEMA: kâğıt zemin, mürekkep yazı, kırmızı vurgu */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#e8e2cf;
  --surface:#eee9d8;
  --text:#15130f;
  --muted:#5b5646;
  --edge:#15130f;
  --line:rgba(21,19,15,.22);
  --accent:#e8432a;
  --hot:#e8432a;
  --gold:#c8962e;
  --teal:#2f5d4a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 clamp(16px,1.05vw + 12px,18px)/1.6 'Instrument Sans',system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--text);color:var(--bg)}

/* üst çubuk */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--pad);background:var(--bg);border-bottom:2px solid var(--edge)}
.mark{font:900 1.7rem/1 'Big Shoulders Display',sans-serif;text-decoration:none;display:flex;align-items:flex-end;gap:3px}
.mark i{width:9px;height:9px;background:var(--accent);margin-bottom:3px}
.bar nav{min-width:0;margin-left:auto;display:flex;gap:clamp(10px,2vw,26px);overflow-x:auto;scrollbar-width:none}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{font-size:.92rem;text-decoration:none;white-space:nowrap;padding:6px 0;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 3px no-repeat;transition:background-size .2s}
.bar nav a:hover{background-size:100% 3px}
.bar nav a.nav-cta{background:var(--text);color:var(--bg);padding:6px 14px;border:2px solid var(--text)}
.bar nav a.nav-cta:hover{background:var(--accent);border-color:var(--accent)}

/* tema düğmesi */
.theme-toggle{flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--bg);border:2px solid var(--text);cursor:pointer;padding:0}
.theme-toggle span{width:16px;height:16px;border:2px solid var(--text);background:linear-gradient(135deg,var(--text) 50%,transparent 50%)}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle:hover span{border-color:var(--accent);background:linear-gradient(135deg,var(--accent) 50%,transparent 50%)}

/* hero */
.hero{position:relative;min-height:min(80svh,760px);display:flex;align-items:flex-end;padding:96px var(--pad) clamp(28px,6vh,56px);border-bottom:2px solid var(--edge);overflow:hidden;touch-action:pan-y}
.tiles{position:absolute;inset:0;display:grid;background:var(--bg)}
.tiles div{border:1px solid var(--line);margin:-1px 0 0 -1px;transition:background-color 1.4s ease-out}
.tiles div.on{background:var(--c);transition:none}
.hero-text{position:relative;max-width:var(--max);width:100%;margin:0 auto;pointer-events:none}
.hero-text a{pointer-events:auto}
.status{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:var(--bg);padding:7px 12px;margin-bottom:22px}
.blink{width:9px;height:9px;background:var(--hot);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
h1{font:900 clamp(3.8rem,15vw,10.5rem)/.82 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin-left:-.04em}
.role{font:700 clamp(1.5rem,4vw,2.6rem)/1.1 'Big Shoulders Display',sans-serif;text-transform:uppercase;margin:20px 0 12px}
.sub{max-width:34em;color:var(--muted);background:var(--bg);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 6px 2px 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-block;padding:13px 22px;border:2px solid var(--text);background:var(--text);color:var(--bg);text-decoration:none;font-weight:600;box-shadow:5px 5px 0 var(--accent);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--accent)}
.btn.line{background:var(--bg);color:var(--text)}
.hint{margin-top:14px;color:var(--muted);text-transform:none}
.hint-touch{display:none}
@media (hover:none){.hint-key{display:none}.hint-touch{display:inline}}
.quick{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px}
.quick a{text-decoration:none;border-bottom:2px solid var(--edge)}
.quick a:hover{background:var(--text);color:var(--bg)}

/* oyun öğeleri */
.tiles div.pl{background:var(--hot);box-shadow:inset 0 0 0 5px var(--bg);transition:none}
.tiles div.coin{background:linear-gradient(var(--gold),var(--gold)) center/36% 36% no-repeat,linear-gradient(var(--text),var(--text)) center/50% 50% no-repeat,var(--bg)}
.hud{position:absolute;z-index:2;top:84px;right:var(--pad);display:flex;gap:12px;align-items:center;font:700 .8rem 'Silkscreen','JetBrains Mono',monospace;letter-spacing:.06em;pointer-events:none}
.hud-score{background:var(--text);color:var(--bg);padding:6px 10px}
.hud-score b{color:var(--hot);font-weight:700}
.hud-msg{color:var(--accent);background:var(--bg);padding:6px 0}
.hud-msg:empty{display:none}
.proj .lv{font:700 .8rem 'Silkscreen','JetBrains Mono',monospace;letter-spacing:.06em}

/* kanıt şeridi */
.proof{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid var(--edge)}
.proof div{padding:clamp(18px,2.6vw,30px) var(--pad);border-right:2px solid var(--edge)}
.proof div:last-child{border-right:0}
.proof b{display:block;font:900 clamp(2.6rem,6vw,4.4rem)/.9 'Big Shoulders Display',sans-serif;color:var(--accent)}
.proof span{font-size:.92rem;color:var(--muted);display:block;margin-top:4px}

/* bölümler */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(56px,10vw,120px) var(--pad)}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(28px,5vw,56px)}
.sec-head .mono{color:var(--accent)}
h2{font:900 clamp(2.6rem,8vw,5.5rem)/.9 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px)}
.big{font:500 clamp(1.3rem,2.6vw,2rem)/1.3 'Instrument Sans',sans-serif}
.body p+p{margin-top:1em}
.body{color:var(--muted)}

/* projeler: büyük kartlar */
.lv{color:var(--accent)}
ul{list-style:none}
.lead{font-weight:500;margin-bottom:12px}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(22px,3.5vw,40px)}
.proj{position:relative;display:flex;flex-direction:column;border:2px solid var(--edge);background:var(--surface);box-shadow:6px 6px 0 var(--edge);transition:transform .18s,box-shadow .18s}
.proj:hover,.proj:focus-within{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--accent)}
.proj-cover{aspect-ratio:16/9;border-bottom:2px solid var(--edge);overflow:hidden;background:var(--surface)}
.proj-cover img,.proj-cover canvas{display:block;width:100%;height:100%;object-fit:cover}
.proj-cover canvas{image-rendering:pixelated}
.proj-body{padding:clamp(16px,2.4vw,24px);display:flex;flex-direction:column;flex:1}
.proj-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.badge{border:1.5px solid var(--text);padding:2px 8px;font-size:.7rem}
.badge.live{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.proj h3{font-size:clamp(2rem,4.5vw,3rem);line-height:.95;margin-bottom:10px}
.proj h3 a{text-decoration:none}
.proj h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.proj-body>p:not(.proj-top):not(.proj-foot){color:var(--muted)}
.stat{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin-top:14px;border:2px solid var(--edge)}
.stat div{padding:6px 12px;border-right:2px solid var(--edge);min-width:0}
.stat div:last-child{border-right:0}
.stat dt{color:var(--accent);font-size:.66rem}
.stat dd{font-weight:600;font-size:.92rem;line-height:1.3}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font:500 .72rem 'JetBrains Mono',monospace;padding:4px 8px;border:1.5px solid var(--edge)}
.proj-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:auto;padding-top:18px;font-weight:600}
.proj:hover .more{color:var(--accent)}
.play{position:relative;z-index:2;text-decoration:none;border-bottom:3px solid var(--accent)}
.play:hover{background:var(--accent);color:var(--bg)}
.out{display:inline-block;margin-top:14px;font-weight:600;text-decoration:none;border-bottom:3px solid var(--accent)}
.out:hover{background:var(--accent);color:var(--bg)}
.out+.out{margin-left:20px}
.out.page{display:table;margin-left:0;margin-top:18px}

/* özgeçmiş */
.bio{max-width:40em;font-size:1.08rem;color:var(--muted);margin-bottom:clamp(28px,5vw,48px)}
.cv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.sub-h{margin:0 0 12px;color:var(--accent)}
.cv .block+.block{margin-top:0}
.rows article{padding:20px 0;border-top:2px solid var(--edge)}
.rows article:last-child{border-bottom:2px solid var(--edge)}
.when{color:var(--muted);margin-bottom:4px}
h3{font:900 clamp(1.5rem,3vw,2.2rem)/1.05 'Big Shoulders Display',sans-serif;text-transform:uppercase}
h4{font:900 clamp(1.4rem,2.4vw,1.8rem)/1.05 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.where{color:var(--teal);font-weight:600;margin:2px 0 8px}
.rows li{position:relative;padding-left:22px;margin:7px 0;color:var(--muted)}
.rows li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--teal)}
.skills div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-top:2px solid var(--edge)}
.skills div:last-child{border-bottom:2px solid var(--edge)}
.skills dt{color:var(--muted);padding-top:.25em}
.skills dd{font-weight:500}
.skills+.sub-h{margin-top:36px}
.certs li{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.certs em{font-style:normal;color:var(--muted);font-size:.72rem;text-transform:none}

/* iletişim */
.contact{text-align:left}
.reach{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:28px 0 32px}
.tel{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;font-weight:500;color:var(--muted)}
.tel .mono{color:var(--accent)}
.tel:hover{color:var(--text)}
.mail{display:inline-block;font:900 clamp(1.7rem,6.5vw,4.6rem)/1 'Big Shoulders Display',sans-serif;text-decoration:none;overflow-wrap:anywhere;border-bottom:6px solid var(--accent)}
.mail:hover{background:var(--accent);color:var(--bg)}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{display:inline-block;padding:10px 18px;border:2px solid var(--edge);text-decoration:none;font-weight:600}
.links a:hover{background:var(--text);color:var(--bg)}
footer{padding:24px var(--pad);border-top:2px solid var(--edge);color:var(--muted)}

/* kaydırınca gelme */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.rv.in{opacity:1;transform:none}

@media (max-width:820px){
  .cv{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .proof div{display:flex;align-items:center;gap:16px;border-right:0;border-bottom:2px solid var(--edge);padding:14px var(--pad)}
  .proof div:last-child{border-bottom:0}
  .proof b{font-size:2.6rem;min-width:3.2ch}
  .proof span{margin:0}
}
@media (max-width:560px){
  .skills div{grid-template-columns:1fr;gap:2px}
  .stat{grid-template-columns:1fr 1fr 1fr;width:100%}
  .stat div{padding:6px 8px}
  .hud{top:76px}
}
@media (max-width:420px){
  .bar nav{gap:12px}
  .bar nav a{font-size:.82rem}
  .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .blink{animation:none}
}