/* Oyunlar (oyunlar.html) */
.oy-kap { margin-top: 32px; margin-bottom: 48px; display: grid; gap: 18px; }
.oy-one { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; overflow: hidden; color: inherit; transition: transform .15s, border-color .15s; }
.oy-one:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }
.oy-one-gorsel { position: relative; min-height: 260px; background: radial-gradient(circle at 50% 35%, #3a2a1c, #0f0c0a 70%); }
.oy-one-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.oy-one-metin { padding: 28px; display: grid; gap: 12px; align-content: center; justify-items: start; }
.oy-one-metin h2 { margin: 0; font-size: 48px; }
.oy-one-metin p { margin: 0; color: var(--krem-2); max-width: 620px; line-height: 1.6; }
.oy-modlar { display: flex; gap: 8px; flex-wrap: wrap; }
.oy-mod { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(247, 233, 213, .05); color: var(--krem-3); font: 600 13px/1 var(--f-arayuz); }
.oy-mod svg { width: 15px; height: 15px; }
.oy-mod.bitti { background: rgba(151, 218, 121, .12); color: var(--yesil); }
.oy-mod.pes { background: rgba(255, 90, 78, .1); color: var(--kirmizi); }

.oy-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.oy-kart { display: grid; grid-template-rows: 140px 1fr; overflow: hidden; color: inherit; transition: transform .15s, border-color .15s; }
a.oy-kart:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }
.oy-gorsel { background-size: cover; background-position: center 30%; }
.oy-kart.yakinda .oy-gorsel { filter: grayscale(.6) brightness(.7); }
/* Neredeyim? kartı: oyunun mini haritasından bir dilim (zemin saydam; binalar zemin renginde görünür) */
.oy-gorsel-harita { background-color: #4a4136; background-size: 180%; background-position: 46% 52%; background-repeat: no-repeat; transition: background-size .5s cubic-bezier(.2, .8, .2, 1); }
a.oy-kart:hover .oy-gorsel-harita { background-size: 200%; }
.oy-metin { padding: 18px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.oy-metin h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 18px/1.2 var(--f-arayuz); }
.oy-metin h3 svg { width: 18px; height: 18px; color: var(--turuncu); }
.oy-metin p { margin: 0; color: var(--krem-2); font-size: 14px; line-height: 1.55; }
.oy-git { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 14px/1 var(--f-arayuz); color: var(--krem); }
.oy-git svg { width: 16px; height: 16px; }

@media (max-width: 1020px) { .oy-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .oy-one { grid-template-columns: 1fr; }
  .oy-one-gorsel { min-height: 200px; }
  .oy-one-metin { padding: 20px; }
  .oy-one-metin h2 { font-size: 36px; }
  .oy-izgara { grid-template-columns: 1fr; }
}