@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Orbitron', sans-serif;
  text-decoration: none !important;
}

body {
  background-color: #0a0c14; /* Varsayılan koyu arka plan */
  color: #fff;
  min-height: 100vh;
  transition: background-color 0.5s ease; /* Renk geçişi yumuşak olsun */
}

.container {
  width: 85%;
  margin: auto;
  padding: 10px;
}

.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.col-2 { width: 20%;}
.col-8 { width: 80%;}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

#menu {
  padding: 20px 0;
  border-bottom: 1px solid #f2f2f27a;
}

h1 {
  text-align: center;
  color: rgb(255, 238, 238);
  margin-top: 40px;
}

/* Text */
nav a {
  font-size: 16px;
  font-weight: 500;
  color: rgb(255, 238, 238);
  white-space: nowrap;
}

/* Logo */

.logo {
  width: 180px;
  height: auto;
  display: block;
}

#kutu img{
  width: 100px;
  height: 100px;
}

#kutu:hover {
  transform: translateY(-8px);
  top: 0; /* Eski top değerini sıfırlıyoruz ki çakışmasın */
}

/* Menu Kutu Özelliği */

/* Menüdeki ikon butonlarının genel hali */
.icon-button {
  position: relative;
  width: 80px; 
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

/* Menü butonlarına hover yapıldığında */
.icon-button:hover {
  transform: translateY(-8px); /* Yukarı kayma efekti */
}

.icon-button img {
  width: 100%;
  height: auto;
}

.button-bg {
  width: 100%;
  height: auto;
  display: block;
}

#metin{
  position: absolute;
  word-spacing: 48px;
  top: 80px;
}

/* Element */

.element-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}


/* Karakterleri kapsayan ana dış alan - Artık görsel bir kutu değil, sadece yerleşim yeri */
.glass-container {
  width: 95%;          /* Ekranın çoğunu kaplasın */
  max-width: 1400px;   /* Çok geniş ekranlarda aşırı yayılmasın */
  margin: 40px auto;   /* Üstten boşluk ve yatayda ortalama */
  display: block;      /* Esnek yükseklik için */
  min-height: auto;    /* İçerik kadar uzasın */
}

/* Karakterlerin dizildiği esnek kutu */
#char-container {
  display: flex;
  flex-wrap: wrap;     /* Sığmayanlar alt satıra geçer */
  justify-content: center; /* Satırları ortalar */
  gap: 15px;           /* Kartlar arasındaki boşluk */
  padding: 10px;
  width: 100%;
}

/* Tekil Karakter Kartları (Cam efekti burada kalıyor) */
.char-box {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  padding: 10px; /* İç boşluğu biraz azalttık */
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, background 0.3s ease;

  /* 8'li Dizilim İçin Kesin Çözüm */
  width: calc(12.5% - 20px); 
  /* min-width değerini sildik çünkü 8'li dizilimi bozuyor */
    
  display: flex;
  flex-direction: column;
  align-items: center; /* Yatayda ortalar */
  justify-content: space-between; /* Resim ve isim arasını açar */
  overflow: hidden; /* İçerik taşarsa kutuyu büyütmesin */
}

.char-box:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.3);
}

/* Resim Düzenlemesi */
.char-box img {
  width: 100%;
  max-width: 100px; /* İkonların aşırı büyümesini engeller */
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); /* Genel parlama */
}

/* İsim Düzenlemesi */
.char-box p {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* Uzun isimlerin kartı bozmaması için: */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.1;
}