body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #1a202c; /* index.html ile uyumlu koyu arka plan */
    color: #fff;
  }
  header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #111;
  }
  header a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-right: 20px;
  }
  main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
  }
  .game-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-start; /* sola hizala */
  }
  .game-info img {
    width: 160px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-left: 20px;
    border-radius: 8px;
  }
  .game-title {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: center;
  }
  .similar-games {
    margin-top: 20px;
  }
  .similar-games h2 {
    margin-bottom: 15px;
  }
  .similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }

  @media(max-width: 768px){
    .similar-grid{
      grid-template-columns: repeat(3,1fr);
    }
  }

  .similar-grid .card {
    background: #333;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .similar-grid .card:hover {
    transform: translateY(-5px);
  }
  .similar-grid .card img {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .similar-grid .card h4 {
    padding: 10px 0;
    font-size: 14px;
    margin: 0;
    color: #fff;
  }

  /* Responsive */
 /* Oyun alanının doğru aspect ratio ile görünmesi */
 #gameContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1024px;
    margin: 20px auto;
    background: #000;
    border-radius: 8px;
  }
  
  #gameContainer iframe {
    max-width: 100%;
    max-height: 90vh;
    border: none;
    border-radius: 8px;
  }

  @media (max-width: px) {
    #gameContainer iframe {
      width: 90%;
      height: calc(90% * 9 / 16);
    }
  }
  @media (max-width: 600px) {
    .game-info {
      flex-direction: column;
      align-items: flex-start;
    }
    .game-info img {
      margin-left: 0;
      margin-top: 10px;
    }
  }



#gameDescription {
  width: 100%;
  max-width: 1024px;
  margin: 20px auto;
  background: #111827;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  box-sizing: border-box;
  overflow-wrap: break-word; /* Uzun kelimeleri bile alana sığdırır */
  word-break: break-word; /* Çok uzun linklerde kır */
}

#gameDescription p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
  white-space: normal; /* Taşmayı önler */
}

#gameContainer iframe {
  /* Genel ayar */
  display: block;
  margin: 0 auto;
  /* max-width server.js'ten geliyor, burada sadece genel ayar */
  max-width: 100%; 
}

#readMoreButton {
  font-weight: bolder;
  display: none;
  cursor: pointer;
  border: 2px solid white;
  background: #FF6B35;
  color: white;
  padding: 10px;
  transition: 0.3s;
}
#readMoreButton:hover {
  border: 2px solid #FF6B35;
  background: white;
  transition: 0.3s;
  color: #FF6B35;
}

/* Sadece 1024px altındaki mobil cihazlar için (Telefon ve küçük tabletler) */
@media (max-width: 1024px) and (orientation: landscape) {
    
  /* Mobil Uyumlu Olmayan (Yatay) Oyunlar için KRİTİK KURAL */
  /* Bu kural, dikey moddaki oyunlar için verdiğiniz yükseklikle çakışmamalıdır. */
  #gameContainer iframe {
      /*
        aspect-ratio'yu koruyarak iframe'in genişliği artırılmıştı.
        Şimdi yüksekliği, tarayıcının tüm yüksekliğini (100vh) kaplayacak şekilde ayarlıyoruz.
        Bu, tam ekran hissi verecektir.
      */
      height: 100vh !important;
      /* Yüksekliği 100vh yapınca aspect-ratio bozulabilir, ancak oyunlar mobil uyumlu olmadığı için
         içerik (oyun) genellikle kendini ortalayarak ekranı dolduracaktır. */
  }
}

/* Mobil uyumlu oyunlar için (g.mobileFriendly: true) daha önce verdiğimiz kural */
/* Eğer mobil uyumlu oyunlar için server.js'te 80vh verdiyseniz,
 bu kuralı 100vh'ye yükselterek dikey modda da tam ekran hissi verebilirsiniz: */
@media (max-width: 768px) and (orientation: portrait) {
  /* Mobil Uyumlu Oyunlar için Dikey Mod Yüksekliği */
  #gameContainer iframe[style*="height: 80vh"] {
      height: 90vh !important; /* Dikeyde de tam ekran hissi için */
  }
}