/* =====================================================
   EMIRHAN BILGIN — PORTFOLIO
   Design language: "Cartridge / Level Select"
   A pixel-cornered, arcade-cabinet system built from
   the red / bone / ink checker identity already used
   in the owner's print portfolio.
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:      #17140f;
  --paper:    #f1ead9;
  --paper-2:  #e7dcc3;
  --blood:    #c1332b;
  --blood-d:  #8f2620;
  --brass:    #dba233;
  --pine:     #2f5233;
  --pine-l:   #4d7a52;
  --line:     rgba(23,20,15,0.14);
  --shadow:   rgba(23,20,15,0.35);

  --font-pixel: 'Press Start 2P', monospace;
  --font-body:  'Space Grotesk', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  --step: 10px; /* pixel-corner cut size */
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.no-scroll{ overflow:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

:focus-visible{
  outline: 3px solid var(--blood);
  outline-offset: 3px;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- pixel corner utility ---------- */
.pixel-frame{
  clip-path: polygon(
    var(--step) 0, calc(100% - var(--step)) 0, 100% var(--step),
    100% calc(100% - var(--step)), calc(100% - var(--step)) 100%,
    var(--step) 100%, 0 calc(100% - var(--step)), 0 var(--step)
  );
  position:relative;
}
.pixel-frame::after{
  content:"";
  position:absolute; inset:0;
  clip-path: polygon(
    var(--step) 0, calc(100% - var(--step)) 0, 100% var(--step),
    100% calc(100% - var(--step)), calc(100% - var(--step)) 100%,
    var(--step) 100%, 0 calc(100% - var(--step)), 0 var(--step)
  );
  box-shadow: inset 0 0 0 3px var(--ink);
  pointer-events:none;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blood-d);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--blood);
  display:inline-block;
  animation: blink 1.4s steps(2,jump-none) infinite;
}
@keyframes blink{ 50%{ opacity:0.15; } }

.pixel-btn{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--paper);
  background:var(--ink);
  border:none;
  padding:14px 22px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition: transform .15s ease, background .15s ease;
}
.pixel-btn:hover{ background:var(--blood); transform:translate(-2px,-2px); }
.pixel-btn:active{ transform:translate(0,0); }
.pixel-btn.ghost{
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink);
}
.pixel-btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.pixel-btn.on-dark{ background:var(--brass); color:var(--ink); }
.pixel-btn.on-dark:hover{ background:var(--paper); }
.pixel-btn svg{ width:16px; height:16px; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(241,234,217,0.9);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--ink);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
}
.brand{
  font-family:var(--font-pixel);
  font-size:13px;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap;
}
.brand .dot{ width:10px; height:10px; background:var(--blood); }
.nav-links{
  display:flex; align-items:center; gap:30px;
}
.nav-links a{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  position:relative;
  padding:6px 2px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--blood); transition:width .2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--blood-d); }

.lang-switch{
  display:flex; border:2px solid var(--ink);
  font-family:var(--font-mono); font-size:12px; font-weight:700;
}
.lang-switch button{
  padding:7px 12px; background:transparent; border:none; cursor:pointer;
  color:var(--ink); letter-spacing:.05em;
}
.lang-switch button.active{ background:var(--ink); color:var(--paper); }

.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:24px; height:3px; background:var(--ink); }

/* ---------- hero ---------- */
.hero{
  padding:64px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.hero-copy h1{
  font-family:var(--font-pixel);
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.5;
  margin:18px 0 22px;
}
.hero-copy h1 span.accent{ color:var(--blood); }
.hero-copy p.lead{
  font-size:18px;
  max-width:52ch;
  color:#3a3327;
  margin-bottom:28px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }

.hero-meta{
  display:flex; gap:22px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:13px;
}
.hero-meta a{ border-bottom:1px dashed var(--ink); padding-bottom:2px; }
.hero-meta a:hover{ color:var(--blood); border-color:var(--blood); }

.portrait-wrap{
  position:relative;
  justify-self:center;
  width:min(340px,90%);
}
.portrait-frame{
  background:var(--ink);
  padding:10px;
}
.portrait-frame img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.portrait-tag{
  position:absolute; bottom:-16px; left:-16px;
  background:var(--brass);
  font-family:var(--font-mono); font-weight:700; font-size:12px;
  padding:8px 12px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-3deg);
}
.scanline{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(23,20,15,0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* ---------- sections ---------- */
section{ padding:76px 0; }
.section-head{
    display:block;
    margin-bottom:40px;
}

.section-head h2{
    margin:12px 0 24px;
}

.section-head p{
    max-width:none;   /* tüm satırı kullansın */
    width:100%;
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- HUD panel (about / skills) ---------- */
.hud-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:22px;
}
.hud-card{
  background:var(--paper);
  border:3px solid var(--ink);
  padding:22px;
  position:relative;
}
.hud-card .num{
  font-family:var(--font-mono); font-size:12px; color:var(--blood-d);
  position:absolute; top:12px; right:14px;
}
.hud-card h3{ font-family:var(--font-mono); font-size:16px; margin-bottom:10px; }
.hud-card p{ font-size:14.5px; color:#40392c; }

.timeline{ margin-top:16px; }
.timeline li{
  display:grid; grid-template-columns:120px 1fr; gap:18px;
  padding:16px 0; border-top:1px solid var(--line);
}
.timeline li:first-child{ border-top:none; }
.timeline .when{ font-family:var(--font-mono); font-size:13px; color:var(--blood-d); }
.timeline .what b{ font-size:15.5px; }
.timeline .what span{ display:block; font-size:14px; color:#4a4335; margin-top:4px; }

.skill-bars{ display:flex; flex-direction:column; gap:14px; margin-top:8px;}
.skill-bar-row{ display:grid; grid-template-columns:130px 1fr; align-items:center; gap:14px; }
.skill-bar-row .label{ font-family:var(--font-mono); font-size:13px; }
.skill-bar-track{ height:14px; background:var(--paper-2); border:2px solid var(--ink); position:relative; overflow:hidden; }
.skill-bar-fill{
  height:100%;
  background:repeating-linear-gradient(90deg, var(--pine) 0 8px, var(--pine-l) 8px 16px);
  width:0%;
  transition:width 1.1s steps(12,end);
}

/* ---------- project cards (level select) ---------- */
.cart-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px;
}
.cart-card{
  background:var(--ink);
  color:var(--paper);
  display:block;
  overflow:hidden;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:6px 6px 0 var(--line);
}
.cart-card:hover{ transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--blood); }
.cart-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:grayscale(35%) contrast(1.05); }
.cart-card:hover .cart-thumb img{ transform:scale(1.08); filter:grayscale(0%) contrast(1.05); }
.cart-thumb::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(23,20,15,0.85) 100%);
}
.cart-index{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  background:var(--blood); color:var(--paper); padding:3px 8px;
}
.cart-body{ padding:18px 20px 22px; }
.cart-body h3{ font-family:var(--font-mono); font-size:16px; margin-bottom:8px; }
.cart-body p{ font-size:13.5px; color:#cfc6b3; margin-bottom:14px; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.03em;
  border:1px solid rgba(241,234,217,0.4);
  padding:3px 8px;
  color:var(--paper);
}
.cart-cta{
  margin-top:16px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  color:var(--brass);
}
.cart-cta svg{ width:14px; height:14px; transition:transform .2s ease; }
.cart-card:hover .cart-cta svg{ transform:translateX(4px); }

/* ---------- filter chips (projects page) ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filter-chip{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  padding:8px 14px; border:2px solid var(--ink); background:transparent; cursor:pointer;
}
.filter-chip.active,.filter-chip:hover{ background:var(--ink); color:var(--paper); }

/* ---------- project detail page ---------- */
.stage-header{
  padding:52px 0 40px;
  border-bottom:3px solid var(--ink);
}
.breadcrumb{ font-family:var(--font-mono); font-size:12.5px; margin-bottom:22px; display:flex; gap:8px; align-items:center; color:#5c5445; }
.breadcrumb a:hover{ color:var(--blood); }
.stage-header h1{ font-family:var(--font-pixel); font-size:clamp(22px,3vw,34px); line-height:1.6; margin-bottom:16px; }
.stage-header .desc{ max-width:70ch; font-size:16.5px; color:#3a3327; margin-bottom:26px; }
.stat-row{ display:flex; gap:34px; flex-wrap:wrap; }
.stat-block .k{ font-family:var(--font-mono); font-size:11px; color:var(--blood-d); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.stat-block .v{ font-family:var(--font-mono); font-size:14px; font-weight:600; }
.stage-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.build-screen{
  margin:0 0 20px;
  background:var(--ink);
  border:4px solid var(--ink);
  aspect-ratio:16/9;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.build-screen iframe{ width:100%; height:100%; border:0; }
.build-placeholder{
  color:var(--paper); text-align:center; padding:30px;
  font-family:var(--font-mono);
}
.build-placeholder .icon{ font-size:34px; margin-bottom:14px; }
.build-placeholder code{
  display:block; margin-top:14px; font-size:11.5px; color:var(--brass);
  background:rgba(241,234,217,0.08); padding:10px 14px; text-align:left;
  overflow-x:auto;
}

.gallery{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.gallery img{ aspect-ratio:16/10; object-fit:cover; border:3px solid var(--ink); cursor:zoom-in; transition:transform .3s ease; }
.gallery img:hover{ transform:scale(1.02); }

.video-slot{
  aspect-ratio:16/9; background:var(--paper-2); border:3px dashed var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-mono); font-size:13px; color:#5c5445; padding:20px;
}

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }

.role-list li{
  display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px;
}
.role-list li:first-child{ border-top:none; }
.role-list li::before{ content:"▸"; color:var(--blood); flex-shrink:0; }

.other-projects{ margin-top:12px; }
.pager{ display:flex; justify-content:space-between; border-top:3px solid var(--ink); padding-top:28px; margin-top:20px; gap:20px; flex-wrap:wrap; }
.pager a{ font-family:var(--font-mono); font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; }
.pager a:hover{ color:var(--blood); }

/* ---------- mechanics page ---------- */
.mech-entry{
  border:3px solid var(--ink);
  margin-bottom:26px;
  overflow:hidden;
}
.mech-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:var(--ink); color:var(--paper); padding:16px 22px; cursor:pointer;
  flex-wrap:wrap;
}
.mech-head h3{ font-family:var(--font-mono); font-size:15px; display:flex; align-items:center; gap:12px; }
.mech-head .from{ font-size:12px; color:var(--brass); font-family:var(--font-mono); }
.mech-head .chevron{ transition:transform .25s ease; }
.mech-entry.open .mech-head .chevron{ transform:rotate(180deg); }
.mech-body{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  background:var(--paper);
}
.mech-entry.open .mech-body{ max-height:900px; }
.mech-body-inner{ padding:24px 22px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.mech-desc p{ font-size:14.5px; color:#3a3327; margin-bottom:14px; }
.code-panel{
  background:var(--ink); color:#c7f0c9;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
  padding:18px; overflow-x:auto; white-space:pre;
}
.code-panel .cm{ color:#7c8f7f; }
.code-panel .kw{ color:#e8b23d; }
.code-panel .str{ color:#e08a8a; }
.mech-links{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }

/* ---------- contact / footer ---------- */
.contact-cta{
  background:var(--ink); color:var(--paper);
  padding:70px 0; text-align:center;
}
.contact-cta h2{ font-family:var(--font-pixel); font-size:clamp(20px,2.6vw,30px); margin-bottom:18px; line-height:1.6; }
.contact-cta p{ color:#cfc6b3; max-width:52ch; margin:0 auto 30px; }
.contact-links{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

footer{
  padding:30px 0; border-top:3px solid var(--ink);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:12px; color:#5c5445;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(23,20,15,0.92);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border:4px solid var(--paper); }
.lightbox-close{
  position:absolute; top:24px; right:28px; color:var(--paper);
  font-family:var(--font-mono); font-size:14px; background:none; border:2px solid var(--paper); padding:8px 14px; cursor:pointer;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; }
  .portrait-wrap{ order:-1; width:220px; }
  .hud-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
  .mech-body-inner{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav-links{
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:30px 28px; gap:22px; transform:translateX(100%); transition:transform .3s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .hud-grid{ grid-template-columns:1fr; }
  .stat-row{ gap:20px; }
}