/* Panelin genel stili */
.heroes-panel {
    position: absolute;    /* Eğer panel sabitse absolute olabilir */
    /*top: 50%;             !* Paneli sayfanın tepesinden 10px aşağıya yerleştir *!*/
    /*left: 50%;*/
    /*display: grid;                     !* Grid yapısı oluştur *!*/
    /*grid-template-columns: repeat(3, 1fr); !* Her satırda 3 kolon *!*/
    /*gap: 20px;                         !* Karakterler arası boşluk *!*/
    /*padding: 10px;                     !* Panel içi boşluk *!*/
    /*background-color: #f9f9f9;         !* Arka plan rengi *!*/
    /*max-width: 100%;                   !* Panelin genişliği *!*/
    /*overflow-y: auto;                  !* Kaydırma çubuğu ekle *!*/
    /*width: 60vw;*/
    /*height: calc(60vw * 0.66);*/
    /*!*height: 400px;                     !* Panel yüksekliği *!*!*/
    /*transform: translateX(-50%) translateY(-50%);*/

    background-color: rgba(5, 6, 34, 0.7);
    width: 100vw;
    height: 100vh;
}

.heroes-panel-container {
    position: absolute;    /* Eğer panel sabitse absolute olabilir */
    top: 50%;             /* Paneli sayfanın tepesinden 10px aşağıya yerleştir */
    left: 50%;
    display: grid;                     /* Grid yapısı oluştur */
    /* grid-auto-rows: 10vw;
    grid-auto-columns: calc(10vw * 1.33); */
    /*grid-auto-rows: 150px;*/
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*grid-template-columns: repeat(3, 1fr);  !* Her satırda 3 sütun sabit *!*/
    gap: 12vw;                         /* Karakterler arası boşluk */
    padding: 10px;                     /* Panel içi boşluk */
    background-color: #f9f9f9;         /* Arka plan rengi */
    max-width: 100%;                   /* Panelin genişliği */
    overflow-y: auto;                  /* Kaydırma çubuğu ekle */
    overflow-x: hidden;                /* Yatay kaydırmayı devre dışı bırak */
    width: 60vw;
    height: calc(60vw * 0.75);
    /*height: 400px;                     !* Panel yüksekliği *!*/
    transform: translateX(-50%) translateY(-50%);
    
    max-height: 400px;                 /* Panel yüksekliği, taşarsa scroll olur */
    border: 1px solid #ccc;            /* Panel kenarlığı */

    background-color: transparent;
    border: none;
}

.heroes-panel-container-bg {
    position: absolute;
    width: 60vw;
    height: calc(60vw * 0.75);
    transform: translateX(50%) translateY(50%);
}

/* Karakter Elemanlarının Stili */
.character {
    display: flex;                     /* İçerik hizalama için Flexbox */
    align-items: center;               /* Dikeyde ortala */
    justify-content: center;           /* Yatayda ortala */
    background-color: #e5e5e5;         /* Karakter kutusunun arka planı */
    border-radius: 8px;                /* Yuvarlatılmış köşeler */
    text-align: center;                /* Metni ortala */
    font-size: 18px;                   /* Yazı boyutu */
    font-family: english_font, serif;  /* Yazı tipi */
    transition: all 0.3s ease;              /* Boyutlar arası geçişi pürüzsüz yap */
    
    width: 15vw;
    height: calc(15vw * 1.33);
}

/* Karakter resmi */
.character img {
    /* width: 80px;
    height: 80px; */
    width: 5vw;
    /* height: auto; */
    margin-bottom: 10px;               /* Resim ile metin arasındaki boşluk */
}

/* Karakter metni */
.character p {
    margin: 0;                         /* Paragrafın dış boşluğunu kaldır */
    font-size: 16px;                   /* Yazı boyutu */
    color: #333;                       /* Yazı rengi */
}

.character:hover {
    background-color: #d5d5d5;
    transform: scale(1.05);
}