/* ---------- Base ---------- */
:root{
  --bg:#0b1119;
  --panel:#101826;
  --panel-2:#0f1622;
  --text:#e9f1ff;
  --muted:#9bb3d3;
  --line:rgba(255,255,255,.06);
  --accent:#3ea6ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:14.5px/1.5 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Layout ---------- */
.container{max-width:1200px;margin:0 auto;padding:20px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(11,17,25,.75);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.topbar .flex{display:flex;align-items:center;gap:18px}
.brand{display:inline-block;font-weight:700;color:var(--text);text-decoration:none;padding:10px 0}
.nav a{color:var(--muted);text-decoration:none;margin-left:14px}
.nav a:hover{color:#fff}

.footer{border-top:1px solid var(--line);margin-top:32px;color:var(--muted);font-size:12.5px}
.footer .container{padding:18px 20px}

/* ---------- Grids ---------- */
.grid-7, .grid-5{
  display:grid; gap:14px;
}
.grid-7{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid-5{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

@media (max-width:720px){
  .grid-7{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .grid-5{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ---------- Card ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.card .thumb{
  position:relative; display:block; background:var(--panel-2);
  aspect-ratio:16/9; /* modern tarayıcılarda en temiz çözüm */
  overflow:hidden;
}
.card .thumb img, .card .thumb .ph{
  width:100%; height:100%; display:block; object-fit:cover;
}
.card .thumb img{transition:transform .35s ease}
.card:hover .thumb img{transform:scale(1.05)}

/* alt köşeleri temiz tutsun diye içten çizgi */
.card .thumb:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

/* başlık etiketi (görsel üstü) */
.card .thumb .label{
  position:absolute; left:8px; right:8px; bottom:8px;
  padding:6px 10px; border-radius:10px;
  background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.25));
  color:#fff; font-weight:600; font-size:13px; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* kart altı metinleri (liste sayfası için) */
.card header{padding:8px 10px 2px}
.card header h2{
  margin:0; font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card header a{color:var(--text);text-decoration:none}
.card header a:hover{color:#fff}

/* buton */
.btn{
  display:inline-block; padding:8px 14px; border-radius:10px;
  background:linear-gradient(180deg,#1f86ff,#0a6ae6);
  color:#fff; text-decoration:none; font-weight:700; font-size:13px;
  border:0; transition:filter .15s ease, transform .1s ease; margin:8px 10px 10px
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

/* ---------- Player ---------- */
.player{margin:10px 0 22px}
.player iframe{
  width:100%; border:1px solid var(--line); border-radius:14px;
  aspect-ratio:16/9; background:#000;
}

/* ---------- Article & headings ---------- */
.article h1{margin:0 0 4px; font-size:30px}
.article .muted{margin:0 0 16px; color:var(--muted)}

/* ---------- Placeholder ---------- */
.ph{
  display:block; background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.03)),
    linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));
  background-size:100% 100%, 200% 100%;
  animation:ph 2s linear infinite;
  border-radius:0;
}
@keyframes ph{
  0%{background-position:0 0,0 0}
  100%{background-position:0 0,200% 0}
}

/* --------- Similar games tweaks --------- */
.related h2{margin:22px 0 10px}
.related .card{background:var(--panel-2)}
.related .card header{display:none} /* başlık artık görsel üzerinde label olarak */
/* === Similar games: cinematic tile style === */
.related .card{
  background:#0f1622;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.related .card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.38);
}
.related .card a{ text-decoration:none; color:inherit; }

.related .card .thumb{
  position:relative; display:block;
  aspect-ratio:16/9;            /* görseller eşit oranlı */
  background:#0b1119; overflow:hidden;
}
.related .card .thumb img,
.related .card .thumb .ph{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
}
.related .card .thumb img{ transition:transform .35s ease, filter .35s ease; }
.related .card:hover .thumb img{ transform:scale(1.05); }

/* alttan koyu bir film şeridi */
.related .card .thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65));
}

/* başlık overlay */
.related .card .thumb .label{
  position:absolute; left:10px; right:10px; bottom:8px;
  padding:6px 10px; border-radius:10px;
  color:#fff; font-weight:700; font-size:13px; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  background:rgba(0,0,0,.0);   /* arka plan istemezsek şeffaf */
}

/* resmin altında eski başlık varsa gizle */
.related .card header{ display:none; }

/* grid boşluk + kart genişlikleri */
.grid-5{ gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
@media (max-width:720px){
  .grid-5{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
/* ===== Player & Fullscreen ===== */
.player { margin: 10px 0 22px; }
.player-wrap{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.player-wrap iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  display: block;
}

/* FS düğmesi */
.fs-btn{
  position:absolute; top:10px; right:10px;
  padding:8px 10px; border-radius:10px;
  background:rgba(0,0,0,.45);
  color:#fff; border:1px solid rgba(255,255,255,.2);
  font-weight:700; cursor:pointer; user-select:none;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.fs-btn:hover{ background:rgba(0,0,0,.65); }
.fs-btn:active{ transform:translateY(1px); }
.fs-btn.active{ background:rgba(62,166,255,.85); border-color:rgba(62,166,255,.9); }

/* Fullscreen boyutlama (Chrome/Firefox/Safari) */
.player-wrap:fullscreen,
.player-wrap:-webkit-full-screen{
  width:100vw; height:100vh; margin:0; border-radius:0;
}
.player-wrap:fullscreen iframe,
.player-wrap:-webkit-full-screen iframe{
  width:100vw; height:100vh; aspect-ratio:auto;
}