/* RSI tarzı köşeli/teknolojik yazı tipi (Türkçe karakter destekli).
   @import her zaman dosyanın en üstünde kalmalı. */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&display=swap");

body {
  margin: 0; /* tarayıcı varsayılan boşluğunu sıfırla — bar ve hero kenardan kenara uzansın */
  font-family:
    "Chakra Petch", "Franklin Gothic Medium", "Arial Narrow", Arial,
    sans-serif;
  background-color: #0d1c2e; /* RSI tarzı koyu lacivert zemin */
  color: #ffffff;
  padding-top: 0; /* üst bar artık yapışkan, boşluğa gerek yok */
  text-align: center;
}

.uzaybakgroundresmi {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* diğer her şeyin arkasında kalsın */
  margin: 0;
}

.uzaybakgroundresmi img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* resmi bozmadan ekranı kaplar */
}

/* !ANA SAYFA ARKAPLAN VİDEOSU */
.arkaplan-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* videoyu bozmadan ekranı kaplar */
  z-index: -1; /* diğer her şeyin arkasında kalsın */
}

/* !HERO: ekranı kaplayan video bölümü (RSI tarzı) */
.hero {
  text-align: left;
}

/* Sahne: video + üzerindeki yazılar. Kart şeridi sahnenin dışında,
   videonun ALTINDA kendi bandında durur (videoyu örtmez). */
.hero-sahne {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease; /* video geçişlerinde yumuşak kararma */
}

/* Videonun üstüne, yazılar okunsun diye alttan koyulaşan bir perde */
.hero-sahne::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(11, 15, 22, 0) 40%,
    rgba(11, 15, 22, 0.95) 100%
  );
}

.hero-icerik {
  position: absolute;
  left: 6%;
  bottom: 70px;
  z-index: 1; /* perdenin üstünde dursun */
}

.hero-baslik {
  margin: 0;
  font-size: 76px;
  letter-spacing: 8px;
  /* Üst bardaki AVP GAMES ile aynı fırçalanmış çelik görünümü, ama
     video üzerinde daha okunaklı olsun diye tonlar koyulaştırıldı */
  background: linear-gradient(
    180deg,
    #cbd0d4 0%,
    #8b9298 30%,
    #454b51 50%,
    #7e858b 62%,
    #2c3238 85%,
    #626970 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none; /* şeffaf yazının arkasında görünüp efekti bozar */
  /* video üzerinde okunaklı kalması için güçlü gölge */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.95));
}

.hero-alt {
  margin: 8px 0 22px;
  font-size: 24px;
  color: #cfeeff;
  letter-spacing: 2px;
}

.hero-buton {
  display: inline-block;
  padding: 14px 28px;
  background-color: #00bdff;
  color: #06121f;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.hero-buton:hover {
  background-color: #6fd7ff;
}

/* Hero'nun altındaki küçük kart şeridi */
/* !SAYFA BÖLÜMLERİ */
.bolum {
  max-width: 1160px;
  margin: 70px auto 0;
  padding: 0 20px;
  text-align: left;
}

.son-bolum {
  padding-bottom: 80px;
}

/* RSI tarzı geniş bölüm: paneller ekrana yayılsın */
.genis-bolum {
  max-width: 1680px;
}

.bolum-baslik {
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.bolum-aciklama {
  margin: -10px 0 24px;
  color: #a5c9dd;
  font-size: 16px;
}

/* !OYUN PANELLERİ (RSI "Our Games" tarzı iki büyük kart) */
.oyun-panelleri {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.oyun-panel {
  position: relative;
  flex: 1 1 420px;
  min-height: 660px; /* RSI'daki gibi ekrana yayılan büyük panel */
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(0, 189, 255, 0.3);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Yazılar okunsun diye panelin altını karartan perde */
.oyun-panel::before {
  content: "";
  position: absolute;
  z-index: 1; /* görsel katmanının üstünde, yazıların altında */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(4, 10, 18, 0) 45%,
    rgba(4, 10, 18, 0.95) 100%
  );
}

.panel-rozet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 8px 16px;
  background-color: #0b84c4;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Altın rozet: gelecek oyunlar için (RSI "IN DEVELOPMENT" gibi) */
.panel-rozet.altin {
  background-color: #c58a1b;
  color: #ffffff;
}

/* Tam genişlik panel: ekrana yayılan büyük vitrin (gelecek oyunlar) */
.oyun-panel.tam-genis {
  flex: 1 1 100%;
  min-height: 78vh;
}

/* Kırpma yok modu: görselin tamamı panelin ortasında görünür
   (dikey posterler ve kırpılması istenmeyen kapaklar için) */
.panel-arkaplan.kirpma-yok {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #04101c;
}

/* Panelin altındaki yapımcı şeridi: Unreal amblemi + ortak yapım yazısı */
.panel-yapim {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -4px 0 26px;
  color: #9fb6c6;
  font-size: 16px;
  letter-spacing: 1px;
}

.panel-yapim .unreal-logo {
  height: 46px;
  width: auto;
}

.panel-icerik {
  position: relative;
  z-index: 1;
  padding: 0 24px 28px;
  text-align: center;
}

.panel-ad {
  font-size: 38px;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.panel-metin {
  margin: 8px 0 16px;
  color: #cfe6f5;
  font-size: 18px;
}

/* !ANA SAYFA VİDEO VİTRİNİ (RSI tarzı) */
.video-vitrini {
  max-width: 1160px;
  margin: 40px auto 60px;
  padding: 0 20px;
}

.video-cerceve {
  position: relative;
  background-color: rgba(6, 18, 31, 0.85);
  border: 2px solid rgba(0, 189, 255, 0.4);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0, 189, 255, 0.15);
  overflow: hidden;
}

.video-cerceve video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* çerçeve hep sinema oranında kalır */
  object-fit: cover;
  background-color: #04101c;
}

/* Video eklenene kadar çerçevenin ortasında duran yazı */
.video-etiketi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #6fd7ff;
  letter-spacing: 4px;
  font-weight: bold;
  text-transform: uppercase;
  pointer-events: none; /* alttaki videoya tıklamayı engellemesin */
}

.video-baslik {
  padding: 12px 16px;
  text-align: left;
  font-size: 16px;
  color: #cfeeff;
  letter-spacing: 2px;
  font-weight: bold;
  border-top: 1px solid rgba(0, 189, 255, 0.25);
}

.kucuk-videolar {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap; /* dar ekranda alt alta iner */
  justify-content: center;
}

.kucuk-videolar .video-cerceve {
  flex: 1 1 300px;
  max-width: 360px;
}

/* Kocaman çerçeveli "Neden mi Star Station?" videosu:
   kendiliğinden oynar, alt kenarında karartma + slogan taşır */
.buyuk-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 12, 22, 0.85), transparent 45%);
  pointer-events: none;
  z-index: 1;
}

.buyuk-video-yazi {
  position: absolute;
  left: 40px;
  bottom: 30px;
  z-index: 2;
  text-align: left;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* !STAR STATION VİTRİNİ (RSI ana sayfa tarzı):
   ekranı kaplayan video + altta 6 kartlık şerit */
.vitrin {
  margin-top: 70px;
  background-color: #04101c;
}

.vitrin-video {
  display: block;
  width: 100%;
  height: 82vh;
  object-fit: cover;
  background-color: #04101c;
}

/* Videonun ALTINDAKİ kart şeridi: videoyu örtmez, kendi bandında durur.
   (Hero'daki vd kartları da aynı şeridi kullanır.) */
.vitrin-serit {
  display: flex;
  gap: 10px;
  padding: 12px 40px 16px;
  background-color: #04101c;
}

.vitrin-kart {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background-color: rgba(6, 18, 31, 0.75);
  border: 1px solid rgba(0, 189, 255, 0.35);
  border-radius: 6px;
  color: #cfeeff;
  font-family: inherit;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.vitrin-kart:hover {
  border-color: #00d1ff;
}

/* Ana ekranda o an oynayan videonun kartı */
.vitrin-kart.aktif {
  border-color: #ffffff;
  background-color: rgba(10, 30, 48, 0.9);
}

.kart-resim {
  flex: 0 0 96px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
}

.kart-resim video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kart-ad {
  font-size: 14px;
  font-weight: bold;
}

/* Aktif kartın altında videoyla birlikte dolan ince çizgi */
.kart-ilerleme {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: #00d1ff;
  transition: width 0.25s linear;
}

.buyuk-soru {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #ffffff;
}

.buyuk-meydan {
  margin: 10px 0 0;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #00d1ff;
}

/* !MARKET BANDI (ana sayfadaki "Markete Git" şeridi) */
.market-banner {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 34px 40px;
  background-color: rgba(6, 18, 31, 0.9);
  border: 1px solid rgba(0, 189, 255, 0.35);
  border-radius: 10px;
}

.banner-yazi {
  flex: 1 1 300px;
}

.banner-baslik {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 2px;
}

.banner-metin {
  margin: 10px 0 20px;
  color: #a5c9dd;
  font-size: 16px;
}

.banner-kolaj {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.banner-kolaj img {
  width: 150px;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0, 189, 255, 0.3);
}

/* !BİLGİ KARTLARI (ana sayfanın en altı) */
.bilgi-kartlari {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.bilgi-kart {
  flex: 1 1 260px;
  padding: 24px;
  background-color: rgba(6, 18, 31, 0.85);
  border: 2px solid rgba(0, 189, 255, 0.35);
  border-radius: 10px;
}

.bilgi-baslik {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.bilgi-kart p {
  margin: 0 0 14px;
  color: #a5c9dd;
  font-size: 16px;
}

.bilgi-kart a {
  color: #00d1ff;
  font-weight: bold;
  text-decoration: none;
}

.bilgi-kart a:hover {
  color: #6fd7ff;
}

/* !DİL MENÜSÜ (dil.js menüye otomatik ekler) */
.dil-secici {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.dil-buton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 10px;
  background: none;
  border: 1px solid rgba(0, 189, 255, 0.5);
  border-radius: 10px;
  color: #00d1ff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.dil-buton:hover {
  background-color: #00bdff;
  color: #06121f;
}

.dil-buton img,
.dil-secenek img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

.dil-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  padding: 6px;
  background-color: rgba(6, 18, 31, 0.97);
  border: 1px solid rgba(0, 189, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: none; /* kapalı başlar, .acik sınıfı gelince görünür */
  z-index: 50;
}

.dil-menu.acik {
  display: block;
}

.dil-secenek {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: #cfeeff;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.dil-secenek:hover {
  background-color: rgba(0, 189, 255, 0.2);
}

.dil-secenek.aktif-dil {
  color: #00d1ff;
  font-weight: bold;
}

/* !MAĞAZA (RSI Pledge tarzı market sayfası) */
.magaza {
  max-width: 1160px;
  margin: 30px auto 0;
  padding: 0 20px;
  text-align: left;
}

.magaza-vitrin {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.one-cikan {
  position: relative;
  flex: 1 1 620px;
  min-height: 460px;
  background-color: #08131f;
  border: 2px solid rgba(0, 189, 255, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

/* Ürün görseli: src doluysa çerçeveyi kaplar, boşsa gizlenir */
.urun-gorsel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.urun-gorsel[src=""] {
  display: none;
}

.urun-yer-tutucu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #41586b;
  letter-spacing: 3px;
  font-weight: bold;
  text-transform: uppercase;
  pointer-events: none;
}

.magaza-rozet {
  position: absolute;
  top: 14px;
  left: 0;
  z-index: 2;
  padding: 7px 14px;
  background-color: #0b84c4;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
}

.etiket-grubu {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.etiket {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
}

.etiket.turuncu {
  background-color: #f0810f;
  color: #ffffff;
}

.etiket.mavi {
  background-color: #bfe9ff;
  color: #06121f;
}

/* Yazılar okunsun diye alt kısmı karartan perde */
.one-cikan::after,
.urun-kart::after,
.magaza-tanitim::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(4, 10, 18, 0.95),
    rgba(4, 10, 18, 0)
  );
  z-index: 1;
}

.urun-bilgi {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
}

.urun-kategori {
  color: #9fb6c6;
  font-size: 13px;
  letter-spacing: 1px;
}

.urun-ad {
  margin-top: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.urun-fiyat {
  margin-top: 4px;
  color: #cfeeff;
  font-size: 16px;
  font-weight: bold;
}

.sepet-buton {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 52px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0810f;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sepet-buton:hover {
  background-color: #ff9c33;
}

/* Vitrinin sağındaki küçük ürün listesi */
.magaza-yan {
  flex: 1 1 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yan-kart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background-color: #08131f;
  border: 1px solid rgba(0, 189, 255, 0.25);
  border-radius: 6px;
  color: #cfeeff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  transition: border-color 0.3s;
}

.yan-kart:hover,
.yan-kart.aktif {
  border-color: #00bdff;
  background-color: #0b1d2e;
}

.yan-resim {
  position: relative;
  width: 96px;
  height: 54px;
  flex-shrink: 0;
  background-color: #04101c;
  border-radius: 4px;
  overflow: hidden;
}

/* Ürün kartları ızgarası */
.urun-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.urun-kart {
  position: relative;
  min-height: 280px;
  background-color: #08131f;
  border: 2px solid rgba(0, 189, 255, 0.25);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s;
}

.urun-kart:hover {
  border-color: #00bdff;
}

.urun-kart .urun-ad {
  font-size: 24px;
}

.magaza-bolum-baslik {
  margin: 60px 0 6px;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.magaza-bolum-alt {
  margin: 0 0 22px;
  color: #9fb6c6;
}

/* Sayfa sonundaki büyük tanıtım bandı */
.magaza-tanitim {
  position: relative;
  margin: 60px 0 0;
  min-height: 300px;
  background: linear-gradient(115deg, #0b2135, #0a1420);
  border: 1px solid rgba(0, 189, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tanitim-icerik {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: 40px;
}

.tanitim-baslik {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
}

.tanitim-metin {
  margin: 12px 0 22px;
  color: #a5c9dd;
  font-size: 16px;
}

/* !ALT BİLGİ (footer — altbilgi.js her sayfaya ekler) */
.alt-bilgi {
  margin-top: 80px;
  padding: 30px 20px 24px;
  background-color: #08152a;
  border-top: 1px solid rgba(0, 189, 255, 0.25);
}

.alt-ust {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.alt-marka {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #ffffff;
}

.alt-sosyal {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #a5c9dd;
  font-size: 15px;
}

.alt-sosyal a {
  display: inline-flex;
  color: #cfeeff;
  transition: color 0.3s;
}

.alt-sosyal a:hover {
  color: #00d1ff;
}

.alt-sosyal svg {
  width: 24px;
  height: 24px;
}

.alt-launcher {
  font-size: 14px;
  padding: 12px 20px;
}

.alt-motorlar {
  max-width: 1160px;
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.motor-logo {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #9fb6c6;
}

/* Star Station oyun logosu (footer'da Unreal logosunun yanında) */
.star-logo {
  height: 64px;
  width: auto;
  border-radius: 6px;
  opacity: 0.95;
}

.unreal-logo {
  height: 64px;
  width: auto;
  /* Siyah logoyu koyu zeminde beyaza çevirir (beyaz arka planı da
     footer'ın koyuluğuna döner) */
  filter: invert(1);
  opacity: 0.9;
}

.alt-haklar {
  margin-top: 16px;
  text-align: center;
  color: #5f7688;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Market politika notu */
.market-politika {
  margin: 0 0 20px;
  padding: 10px 14px;
  background-color: rgba(240, 129, 15, 0.12);
  border: 1px solid rgba(240, 129, 15, 0.4);
  border-radius: 6px;
  color: #ffd9ad;
  font-size: 14px;
  text-align: left;
}

/* !MARKET (yakında sayfası) */
.market-kutusu {
  max-width: 640px;
  margin: 90px auto 0;
  padding: 50px 40px;
  background-color: rgba(6, 18, 31, 0.85);
  border: 1px solid rgba(0, 189, 255, 0.4);
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 189, 255, 0.2);
}

.market-baslik {
  margin: 0;
  color: #00d1ff;
  font-size: 42px;
  letter-spacing: 10px;
  text-transform: uppercase;
}

.market-aciklama {
  margin: 18px 0 0;
  color: #a5c9dd;
  font-size: 17px;
  letter-spacing: 1px;
}

/* Logonun kapsayıcısı için */
.logo-container {
  width: 100%;
  height: 50px; /* Sayfa genişliğini kaplar */
  background-color: rgba(0, 119, 190, 0.22);
  display: flex; /* İçindeki elemanı hizalamak için gerekli */
  align-items: center; /* Logonun dikeyde tam ortada durmasını sağlar */
  padding: 1px 0;
}

/* Logonun kendisi için */
.logo {
  width: 250px; /* Logoyu küçültmek için değeri buraya yaz */
  /* Yeşil logoyu görsele dokunmadan mavi tona çevirir;
     geri almak için bu satırı silmen yeterli */
  filter: hue-rotate(85deg) saturate(1.15);
}

h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  /* Metalik Gri Renk */
  color: #a5a9b4;

  /* Metalik derinliği artırmak için hafif bir gölge ve parıltı */
  text-shadow:
    1px 1px 0px rgba(255, 255, 255, 0.1),
    -1px -1px 0px rgba(0, 0, 0, 0.3);

  margin: 0;
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 8px; /* Harf aralığını biraz daha açtık */
}

nav a {
  display: inline-block;
  min-width: 100px; /* uzun çevirilerde buton kendini genişletir */
  padding: 20px;
  border-radius: 10px;
  text-decoration: none;
  color: #cfeeff;
  margin: 10px;
  background-color: rgba(10, 46, 78, 0.85);
  border: 1px solid rgba(0, 189, 255, 0.35);
  transition:
    background-color 0.3s,
    color 0.3s;
  font-weight: bold;
  font-size: 22px;
}

nav a:hover {
  background-color: #00bdff;
  color: #06121f;
}

/* Giriş yapılınca menüye eklenen hoş geldin yazısı ve çıkış butonu */
.kullanici-alani {
  display: inline-block;
  margin: 10px;
  color: #00d1ff;
  font-size: 18px;
  font-weight: bold;
}

.cikis-buton {
  display: inline-block;
  padding: 10px 16px;
  margin: 10px;
  background-color: rgba(139, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cikis-buton:hover {
  background-color: coral;
}

/* Karşılama yazısı artık profil sayfası linki */
a.kullanici-alani {
  text-decoration: none;
}

a.kullanici-alani:hover {
  color: #7fe3ff;
}

/* Menüdeki küçük yuvarlak avatar */
.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid rgba(0, 189, 255, 0.6);
}

/* Footer'daki Destek linki */
.alt-destek {
  color: #9fd8ff;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
}

.alt-destek:hover {
  color: #ffffff;
}

/* YENİ SÜTUN YAPISI */
.ana-kapsayici {
  display: flex;
  justify-content: center;
  gap: 30px; /* İki sütun arasındaki boşluk */
  margin-top: 30px;
  flex-wrap: wrap;
}

.sutun {
  display: flex;
  flex-direction: column; /* İçindekileri alt alta dizer */
  gap: 30px; /* Resimlerin arasındaki dikey boşluk */
}

.resim-alani {
  width: 640px;
  text-align: center;
}

.oyun-adi {
  margin: 14px 0 0;
  font-size: 30px;
  letter-spacing: 2px;
}

.oyun-gelistirici {
  margin: 4px 0 0;
  color: #00d1ff;
  font-size: 13px;
  letter-spacing: 1px;
}

.oyun-aciklama {
  margin: 6px 0 0;
  color: #a5c9dd;
  font-size: 15px;
}

.oyun-kart-fiyat {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: bold;
  color: #6fdfa8;
  letter-spacing: 0.5px;
}

.oyun-kart-fiyat.ucretsiz {
  color: #9fc3d8;
}

/* Geliştirici Oyunları sayfası: karttaki stüdyo adı
   (tıklanınca stüdyonun kendi sayfası açılır) */
.kart-studyo {
  margin: 4px 0 0;
  font-size: 13px;
  color: #7fd8ff;
  letter-spacing: 1px;
  text-decoration: underline dotted;
}

.kart-studyo:hover {
  color: #ffffff;
}

/* Her sayfada kullanılabilen gizleme aracı (kaydol.css'tekiyle aynı) */
.gizli {
  display: none;
}

/* !STÜDYO SAYFASI (studyo.html — geliştirici vitrini) */
.studyo-baslik-alani {
  display: flex;
  align-items: center;
  gap: 22px;
}

.studyo-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 189, 255, 0.5);
  background-color: #04101c;
}

.studyo-ad {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.studyo-alt {
  margin-top: 4px;
  color: #9fb6c6;
  font-size: 14px;
}

.studyo-kopyala {
  margin-top: 10px;
  padding: 7px 14px;
  background-color: #123249;
  color: #cfeeff;
  border: 1px solid rgba(0, 189, 255, 0.4);
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.3s;
}

.studyo-kopyala:hover {
  border-color: #00d1ff;
}

/* Oyun sayfasındaki geliştirici adı: stüdyo vitrinine link */
.studyo-git {
  color: #7fd8ff;
  text-decoration: underline dotted;
}

.studyo-git:hover {
  color: #ffffff;
}

.oyunlar-mesaj {
  margin-top: 40px;
  color: #9fb6c6;
  font-size: 18px;
}

.resim-alani img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 10px;
  border: 4px solid #ffffff;
  /* Box-shadow'ları birleştirdim */
  box-shadow:
    0 0 15px rgba(255, 255, 255, 0.2),
    0 5px 15px rgba(0, 0, 0, 0.3);
  display: block;
}

.steam-buton {
  display: inline-block;
  margin-top: 20px; /* Resimle buton arasındaki boşluğu kısalttık */
  padding: 10px 20px;
  background-color: #1b2838;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.steam-buton:hover {
  background-color: #66c0f4;
}

/* !VİZYONUMUZ*/
.vizyonumuz-box {
  margin-bottom: 60px;
  padding: 30px 24px;
  background-color: rgba(52, 58, 70, 0.92); /* soldan sağa tam genişlik gri bant */
  color: #ffffff;
  font-size: 30px;
  line-height: 1.6;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

/*!BİZ KİMİZ*/

.ikili-kapsayici {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* dar ekranda alt alta iner */
}

.evren,
.erdem {
  width: 640px;
  height: 480px;
}

.evren img,
.erdem img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 20px;
  border: 4px solid #161523;
  box-shadow:
    0 0 15px rgba(24, 28, 36, 0.2),
    0 5px 15px rgba(0, 0, 0, 0.3);
  display: block;
}

.BizKimiz {
  margin: 40px 0 60px;
  padding: 30px 24px;
  background-color: rgba(52, 58, 70, 0.92); /* soldan sağa tam genişlik gri bant */
  color: #ffffff;
  line-height: 1.7;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 18px;
}

/* !ÜST BAR (RSI tarzı ince, yapışkan menü çubuğu)
   Not: Bu blok, dosyanın sonundaki eski logo/nav kurallarını
   ezebilmek için mobil bloğun hemen üstünde durmalı. */
.ust-bar {
  position: sticky; /* sayfa kaysa da üstte sabit kalır */
  top: 0;
  z-index: 100;
  background-color: #0d1f31;
  border-bottom: 1px solid rgba(0, 189, 255, 0.25);
}

.ust-serit {
  padding: 7px 24px;
  background-color: #081420;
  color: #8fa9bb;
  font-size: 12px;
  letter-spacing: 3px;
  text-align: left;
  /* Soldan sağa uzanan ayırıcı şerit çizgisi (RSI tarzı) */
  border-bottom: 2px solid rgba(0, 189, 255, 0.45);
}

.ust-bar-ic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 24px;
}

.logo-link {
  display: inline-flex;
  flex-shrink: 0;
}

.ust-bar .logo {
  width: 110px;
}

/* Ortadaki marka yazısı: fırçalanmış çelik görünümü.
   Yazının içi metal gradyanıyla boyanır (background-clip: text). */
.marka-yazi {
  top: 8px; /* yazıyı yukarı al: nav ile çakışmasın */
  transform: translateX(-50%);
  font-size: 1.45rem;
  letter-spacing: 4px;
  pointer-events: none; /* menü tıklamalarını engellemesin */
  /* Hero başlığıyla aynı koyu çelik gradyan */
  background: linear-gradient(
    180deg,
    #cbd0d4 0%,
    #8b9298 30%,
    #454b51 50%,
    #7e858b 62%,
    #2c3238 85%,
    #626970 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none; /* eski gölge şeffaf yazının arkasında görünüp efekti bozar */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.ust-bar nav {
  margin: 0 auto; /* nav'ı sayfanın ortasına doğru çek */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.ust-bar nav a {
  min-width: 0;
  padding: 8px 14px;
  margin: 2px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #cfeeff;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ust-bar nav a:hover {
  background-color: rgba(0, 189, 255, 0.15);
  color: #00d1ff;
}

/* Kaydol linki vurgulu buton (RSI'daki PLAY NOW gibi) */
.ust-bar nav a[href="kaydol.html"] {
  background-color: #00bdff;
  color: #06121f;
  font-weight: bold;
}

.ust-bar nav a[href="kaydol.html"]:hover {
  background-color: #6fd7ff;
  color: #06121f;
}

.ust-bar .dil-buton {
  margin: 2px;
  padding: 6px 10px;
  font-size: 13px;
}

/* !NAV AÇILIR MENÜSÜ (Oyunlar sekmesi — RSI GAMES menüsü gibi) */
.menu-grup {
  position: relative;
  display: inline-block;
}

.menu-acilir-buton {
  padding: 8px 14px;
  margin: 2px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #cfeeff;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
}

/* Butonun yanında küçük ok: kapalıyken aşağı, açıkken yukarı */
.menu-acilir-buton::after {
  content: " ▾";
  font-size: 12px;
}

.menu-grup.acik .menu-acilir-buton::after {
  content: " ▴";
}

.menu-acilir-buton:hover,
.menu-grup.acik .menu-acilir-buton {
  background-color: rgba(0, 189, 255, 0.15);
  color: #00d1ff;
}

.menu-acilir {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  padding: 6px;
  background-color: rgba(6, 18, 31, 0.97);
  border: 2px solid rgba(0, 189, 255, 0.4);
  border-radius: 8px;
  display: none; /* kapalı başlar, .acik gelince görünür */
  z-index: 60;
}

.menu-grup.acik .menu-acilir {
  display: block;
}

.ust-bar nav .menu-acilir a {
  display: block;
  margin: 0;
  padding: 10px 14px;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}

.ust-bar .kullanici-alani {
  margin: 2px 6px;
  font-size: 14px;
}

.ust-bar .cikis-buton {
  margin: 2px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Üst bar geçişi sonrası içeriklere nefes payı */
.vizyonumuz-box,
.ikili-kapsayici {
  margin-top: 40px;
}

/* !TIKLANABİLİR KARTLAR ve KIRPMA KUTULARI
   Kartların tamamı link; görseller taşmasın diye kırpma
   kutularının içinde durur (hover'da çerçeve sabit kalır). */
a.urun-kart,
a.one-cikan,
a.resim-alani {
  display: block;
}

a.oyun-panel,
a.urun-kart,
a.one-cikan,
a.resim-alani {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Panelin görseli ayrı katmanda: hover'da sadece bu katman büyür */
.panel-arkaplan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Oyunlar sayfası kartının görsel çerçevesi */
.kart-gorsel-kutu {
  overflow: hidden;
  border: 4px solid #ffffff;
  border-radius: 10px;
  box-shadow:
    0 0 15px rgba(255, 255, 255, 0.2),
    0 5px 15px rgba(0, 0, 0, 0.3);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.kart-gorsel-kutu img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Hero şeridi görsel kutusu */
/* Market bandı kolaj kutuları */
.kolaj-kutu {
  display: block;
  width: 150px;
  height: 88px;
  border-radius: 6px;
  border: 2px solid rgba(0, 189, 255, 0.3);
  overflow: hidden;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.kolaj-kutu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
}

.kolaj-kutu:hover {
  border-color: #00d1ff;
}

/* !HOVER EFEKTLERİ (RSI tarzı: mouse gelince görsele yaklaşma
   + çerçevenin ışıması) */
.urun-kart .urun-gorsel,
.one-cikan .urun-gorsel,
.yan-resim .urun-gorsel,
.banner-kolaj img,
.panel-arkaplan,
.resim-alani img {
  transition:
    transform 0.5s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Kartın içindeki görsel hafifçe yakınlaşır (çerçeve sabit kalır) */
.urun-kart:hover .urun-gorsel,
.one-cikan:hover .urun-gorsel,
.yan-kart:hover .urun-gorsel {
  transform: scale(1.06);
}

.kolaj-kutu:hover img {
  transform: scale(1.08);
}

/* Oyunlar sayfası kartları: çerçeve sabit kalır ve ışıldar,
   içindeki görsel yakınlaşır */
.resim-alani:hover .kart-gorsel-kutu {
  border-color: #00d1ff;
}

.resim-alani:hover .kart-gorsel-kutu img {
  transform: scale(1.06);
}

.urun-kart,
.one-cikan,
.video-cerceve,
.bilgi-kart,
.oyun-panel {
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

/* RSI tarzı: dışa taşan parıltı yok, sadece çerçeve kenarı aydınlanır */
.urun-kart:hover,
.one-cikan:hover,
.video-cerceve:hover,
.bilgi-kart:hover {
  border-color: #00d1ff;
}

/* Ana sayfa oyun panelleri: sadece çerçeve kenarı aydınlanır,
   arkadaki görsel yakınlaşır */
.oyun-panel:hover {
  border-color: #00d1ff;
}

/* Slayt geçişi için görsel katmanı hem zoom hem opaklık animasyonu yapar */
.panel-arkaplan {
  transition:
    transform 0.5s ease,
    opacity 1s ease;
}

.oyun-panel:hover .panel-arkaplan {
  transform: scale(1.06);
}

/* !MOBİL UYUM (dar ekranlar — telefonlar)
   ÖNEMLİ: Bu blok her zaman dosyanın EN SONUNDA kalmalı;
   CSS'te sonra gelen kural kazandığı için ancak burada
   yukarıdaki tüm kuralları ezebilir. */
@media (max-width: 760px) {
  .ust-serit {
    display: none; /* telefonda yer kazanmak için ince şerit gizlenir */
  }

  .ust-bar .logo {
    width: 85px;
  }

  .marka-yazi {
    display: none; /* dar ekranda ortadaki yazıya yer kalmıyor */
  }

  .ust-bar nav a {
    padding: 6px 8px;
    font-size: 12px;
  }

  .logo {
    width: 150px;
  }

  h2 {
    font-size: 1.3rem;
    letter-spacing: 3px;
  }

  nav a {
    min-width: 0;
    padding: 10px 12px;
    margin: 4px;
    font-size: 14px;
    border-radius: 6px;
  }

  .kullanici-alani {
    margin: 6px;
    font-size: 14px;
  }

  .cikis-buton {
    padding: 8px 12px;
    margin: 6px;
    font-size: 13px;
  }

  .dil-buton {
    padding: 8px 10px;
    margin: 6px;
    font-size: 14px;
  }

  .hero-sahne {
    height: 58vh;
  }

  .hero-icerik {
    left: 20px;
    right: 20px;
    bottom: 40px;
  }

  .hero-baslik {
    font-size: 34px;
    letter-spacing: 4px;
  }

  .hero-alt {
    font-size: 15px;
  }

  .bolum {
    margin-top: 50px;
  }

  .bolum-baslik {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .buyuk-video-yazi {
    left: 14px;
    bottom: 12px;
  }

  .vitrin-video {
    height: 52vh;
  }

  /* Dar ekranda kartlar yana kaydırılabilir şerit olur */
  .vitrin-serit {
    padding: 10px 14px 12px;
    overflow-x: auto;
  }

  .vitrin-kart {
    flex: 0 0 150px;
  }

  .kart-resim {
    flex-basis: 64px;
  }

  .kart-ad {
    font-size: 11px;
  }

  .buyuk-soru {
    font-size: 17px;
    letter-spacing: 3px;
  }

  .buyuk-meydan {
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 1px;
  }

  .oyun-panel {
    min-height: 420px;
  }

  .oyun-panel.tam-genis {
    min-height: 46vh;
  }

  .panel-yapim {
    font-size: 13px;
  }

  .panel-yapim .unreal-logo {
    height: 34px;
  }

  .panel-ad {
    font-size: 22px;
  }

  .resim-alani {
    width: 100%;
  }

  .resim-alani img {
    height: auto;
  }

  .evren,
  .erdem {
    width: 100%;
    height: auto;
  }

  .evren img,
  .erdem img {
    height: auto;
  }

  .vizyonumuz-box {
    padding: 18px 16px;
    font-size: 18px;
  }

  .BizKimiz {
    margin: 30px 0 40px;
    padding: 18px 16px;
  }

  .magaza-bolum-baslik {
    font-size: 22px;
  }

  .one-cikan {
    min-height: 320px;
  }

  .one-cikan .urun-ad {
    font-size: 22px;
  }

  .magaza-yan {
    max-width: none;
  }

  .tanitim-icerik {
    padding: 24px;
  }

  .tanitim-baslik {
    font-size: 24px;
  }

  .market-kutusu {
    margin: 40px 16px 0;
    padding: 30px 20px;
  }

  .market-baslik {
    font-size: 30px;
    letter-spacing: 6px;
  }
}