body {
    height: 0%;
    display: flex;
    flex-direction: column;
    gap: 4.24rem;
}

#characterBody {
    gap: 6.4rem;
}

#onlyCharacterFamily {
    gap: 5.5rem;
}

.topTitleVertically {
    gap: 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.topTitleVertically p {margin: 0px;top: 0px;}
.topTitleVertically .potterTyping {font-size: 3.5rem;}        /*BURAYI MEDIA QUERY E EKLEYECEKSIN*/

.categoryCard {
    width: 300px;
    height: 450px;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    gap: 0.6rem;
    align-items: start;
    text-decoration: none;
}

.categoryCard img {
    min-height: 50%;
    align-self: center;
}

.bookTitle, .onlyContent .bookTitle{
    font-weight: 800;
}

.bookParts{
    display: flex;
    justify-content: start;
    gap: 0.5rem;
    align-items: center;
    text-wrap: wrap;
}

.bookParts p, .bookSummarySpan, .gender, .characterParts{
    font-size: 1.35rem;
    font-weight: 800;
}

.characterContent .characterParts {
    text-align: left;
    font-size: 1.35rem;
    font-weight: 900;
}

.characterContent .characterPartsMini {
    font-size: 1.25rem;
    font-weight: 500;
    color: white;
}

.iconPng {
    width: 25px;
}

.categoryDiv {
    width: 85%;
    overflow: hidden;
}

#bookContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    animation: scroll 30s linear infinite; /* Sonsuz kaydırma animasyonu */
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Tüm butonların toplam genişliği kadar sola kaydır */
        transform: translateX(-100%);
    }
}

@keyframes scrollUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

.bookDetailDiv {
    gap: 6rem;
    padding: 1.5rem 2.5rem;
}

.bookContent, .characterContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: start;
    gap: 0.8rem;
}

.bookCover, .characterImg{
    width: 300px;
    box-shadow: 0px 0px 15px white;
    border-radius: 10px;
}

.bookTitle, .onlyContent .bookTitle {
    font-size: 1.7rem;
    text-align: start;
}

#bookSummary{
    text-align: start;
    font-size: 1.15rem;
}

.backButton {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    background: transparent;    
    width: 80px;
    padding: 0.5rem 2.1rem;
    box-shadow: 0px 0px 15px white;
    border-radius: 10px;
    cursor: pointer;
}

#curve-arrow {
    width: 30px;
}


.camClock {width: 31px;}

.trailerDiv {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.3rem;
    padding: 1.3rem 0rem;
    border: 3px solid rgba(207, 167, 108, 0.532);
    background: transparent;
    backdrop-filter: blur(8px);
}

.movieTrailer {
    right: 0;
    bottom: 0;
    z-index: 20;
    object-fit: cover;
    width: 90%;
    height: auto; /* Yüksekliğin otomatik ayarlanmasını sağlar */
    aspect-ratio: 16 / 9; /* 16:9 en-boy oranını korur */
    border-radius: 10px;
    box-shadow: 0px 0px 30px white;
}

.movieDetailDiv {
    width: 70%;
}
.trailerTitleDiv {display: flex; justify-content: center; align-items: center; width: 100%; gap: 0.6rem;}
.trailerTitleDiv > img {width: 70px;}
.trailerTitle {
    font-family: 'Harry P';
    font-size: 4rem;
    font-weight: 500;
    color: white;
    margin: 0px;
}

/*character.ejs css below - character.ejs css below - character.ejs css below - character.ejs css below - character.ejs css below -*/

.characterDiv {width: 50%;}

.characterDiv > #bookContainer {
    animation: scroll 10s linear infinite; /* Sonsuz kaydırma animasyonu */
}

.characterCardImg {height: 80%; width: 90%;}

.characterCard {align-items: center; width: 230px; height: 400px;}

.characterCard p {
    font-size: 1.4rem;
    font-weight: 600;
}

.allCharacterCard {
     /* Sonsuz kaydırma animasyonu */
    width: 180px; height: 300px;
    
} 

.allCharacterContainer {
    display: grid;
    grid-template-columns: repeat(5, 200px);
    grid-template-rows: repeat(2, 300px);
    grid-auto-rows: 300px;
    grid-auto-columns: 200px;
    gap: 2.5rem;
}

.allCharacterDiv {width:max-content;}
    
.characterDetailDiv {
    gap: 4.5rem;
    padding: 2.5rem 3rem;
}

.characterParts {
    width: 100%;
}


.characterImg {
    height: 400px;
}

.characterInformationDiv {
    box-shadow: 0px 0px 30px white;
    border: 3px solid rgba(207, 167, 108, 0.532);
    background: transparent;
    backdrop-filter: blur(8px);
    padding: 2.5rem 3rem ;
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.characterInfoDiv {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    color: white;
}

.characterInfoDiv hr {
    color: white;
    width: 35%;
    margin: 0px;
}

.characterHor {display: flex; gap: 1rem; padding-bottom: 0.2rem;} .charPng {width: 50px;}

.characterHor p {font-size: 2.3rem; font-family: "Harry p"; margin: 0px; display: flex; align-items: center;}

.characterHor img {width: 45px;}

.characterInfo {
    display: flex; /* Liste elemanlarını yan yana dizer */
    flex-wrap: wrap; /* Alan dolunca alt satıra geçmeyi sağlar */
    font-size: 1.3rem; font-weight: 500;
}

.characterInfo li {padding: 0.1rem 2.5rem; padding-left: 0; 
    font-size: 1.3rem; font-weight: 500;
}

.onlyCharacterImg {width: fit-content; height: fit-content; max-height: 400px;}

/* spells and potions css*/

.spellpotionContent{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.spellsContentIn {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spellPotionImg {
    box-shadow: 0px 0px 30px 10px white;
    border-radius: 10px;
    max-height: 400px;
}

.potionInfoDiv {
    background: transparent;
    backdrop-filter: blur(8px);
    border: 3px solid rgba(207, 167, 108, 0.532);
    padding: 2.5rem 3rem;
    width: 60%;
}

.spellBody {
    gap: 10rem;
}

.allSpellDiv {
    display: flex;
}

/* Geri dönme butonunun her zaman ekranda kalmasını sağlar */
.sideDiv {
    position: fixed; /* Sabit konumlandırma */
    top: 42%; /* Dikey olarak ekranın ortasına getirir */
    transform: translateY(-50%); /* Kendi yüksekliğinin yarısı kadar yukarı kaydırarak tam ortalar */
    right: 2rem; /* Ekranın sağ tarafından 2rem uzakta konumlandırır */
    z-index: 1000; /* Diğer elemanların üzerinde görünmesini sağlar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.onlyCharacter>#bookContainer{
    animation: scroll-seamless 10s linear infinite; /* Kesintisiz kaydırma animasyonu */
}
.onlyMovies>#bookContainer{
    animation: scroll-seamless 30s linear infinite; /* Kesintisiz kaydırma animasyonu */
}
.onlyBooks>#bookContainer{
    animation: scroll-seamless 20s linear infinite; /* Kesintisiz kaydırma animasyonu */
}
.onlyCharacterFamilies>#bookContainer{
    animation: scroll-seamless 12s linear infinite; /* Kesintisiz kaydırma animasyonu */
}

@keyframes scroll-seamless {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%); /* İçeriği %50 kaydırarak sonsuz döngü sağlar */
    }
}

.inputForm{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    gap: 0.4rem; 
}


/*SEARCH BUTTON INPUT CSS - SEARCH BUTTON INPUT CSS - SEARCH BUTTON INPUT CSS - SEARCH BUTTON INPUT CSS - SEARCH BUTTON INPUT CSS*/
.searchBar {
    width: 33%;
    display: flex;
    justify-content: center;
}

.searchBar form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
}
.searchInput {
    width: 80%;
    height: 100%;
    padding: 0.3rem 0.7rem;
    font-size: 1.95rem;
    font-family: 'Harry p';
    border: 2px solid black;
    border-radius: 7px;
    padding-top: 0.45rem;
}
.searchButton {
    border: 2px solid white;
    border-radius: 5px;
    width: 20%;
    height: 100%;
    font-size: 1.75rem;
    background: transparent;
    font-family: 'Harry p';
    color: white;
    padding-top: 0.45rem;
    cursor: pointer;
}

.topTitleSearchBar {width: 33%; align-items: start;  padding-left: 2rem;}
.socialSearchBar {width: 33%;}

.searchButton:hover, .searchInput:hover {transform: scale(1.025);}