/* ==== Theme ==== */
:root{
  --bg:#181818;
  --ink:#ecebe7;      /* off-white */
  --muted:#bdbbb3;    /* secondary text */
  --line:#262626;     /* separators */
  --accent:#b6f381;   /* soft green accent */
  --card:#1f1f1f;
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink); }
html{ scroll-behavior:smooth; }
body{ font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif; }

/* ==== Layout ==== */
.container{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ==== Header & Nav ==== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#181818cc; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition: box-shadow .15s ease;
}
.site-header.with-shadow{ box-shadow:0 10px 24px rgba(0,0,0,.28); }

.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:0px 0;     
}

.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.2px; }
.brand img{
  height: 180px;      
  width: auto;
  display: block;
  image-rendering: pixelated;
}

@media (max-width:560px){
  .brand img{ height: 120px; }
}

.main-nav{ display:flex; gap:18px; }
.main-nav a{
  color:var(--ink); text-decoration:none;
  padding:10px 4px; border-bottom:2px solid transparent;
  font-weight:600; letter-spacing:.2px;
}
.main-nav a:hover{ border-color:var(--accent); color:#f4f3ef; }

/* ==== Sections ==== */
.section{ padding:56px 0; border-bottom:1px solid var(--line); }
.section:last-of-type{ border-bottom:0; }
.muted{ color:var(--muted); }

.about h2,
.games h2,
.contact h2{ font-size:clamp(22px,4vw,32px); margin:0 0 12px; }

/* ==== Games grid ==== */
.games-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:980px){ .games-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .games-grid{ grid-template-columns:1fr; } }

.game-card{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  color:var(--ink);
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.game-card:hover{
  transform:translateY(-4px);
  border-color:#334533;
  box-shadow:0 14px 28px rgba(0,0,0,.32);
}

.game-card .thumb{
  aspect-ratio:1/1;
  background:linear-gradient(135deg,#273027,#1b241b);
  border-bottom:1px solid var(--line);
}

.game-card .meta{
  padding:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:64px; /* room for 2-line titles */
}
.game-card h3{
  font-size:clamp(14px,1.9vw,16px);
  line-height:1.25;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tag{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid #2e442e;
  background:linear-gradient(180deg,#223922,#1a2b1a);
  color:#d9f6d9;
}

/* ==== About readability ==== */
.about .container p{ max-width:900px; }

/* ==== Contact ==== */
.contact .lead a{ color:var(--ink); }

/* ==== Footer ==== */
.site-footer{ border-top:1px solid var(--line); padding:20px 0; color:var(--muted); }

/* Anchor offset so header doesn't cover targets (logo büyüdüğü için arttı) */
#about, #games, #contact{ scroll-margin-top: 200px; }