/* MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY*/
/* MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY*/
/* MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY*/
/* MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY - MEDIA QUERIES FOR COMPATIBILITY*/

.bookTitle-mobile, .hrStyle2, .spellPotionChar-mobile{display: none;}
.bookContent .bookTitle {text-align: left;} 
.headerSearchBar {justify-content: space-between; gap: 0rem;}
.footerSocialSearchBar {display: none;}
.onlyIndexBody {justify-content: space-between;}

.characterContent .spellPotionChar-wide {font-size: 1.8rem; text-align: left;}
.spellPotionCharDetailTitle .spellPotionChar-mobile {font-size: 1.8rem;}

.characterDetailDiv {width: 55%; justify-content: space-evenly;}

.spellPotionCharDetailTitle {display: flex; flex-direction: column; justify-content: center; align-items: center;}

.spellPotionImg {width: 100%; min-height: 15rem; max-width: 25rem;}
.onlyCharacterImg {width: fit-content; min-height: 15rem; max-width: 25rem;}

.allCharacterDiv {
    gap: 2.5rem; padding: 1rem;
    width: calc(5 * 190px + 2 * 1rem + 2 * 6rem); /* 3 kart + 2 boşluk + padding */
    /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
    /* Bu sayede sadece 3 kart görünür */
    border: 2px solid rgba(207, 167, 108, 0.532);
}
.allCharacterContainer{
    grid-template-columns: repeat(5, 180px);
    grid-template-rows: repeat(2, 300px);
    grid-auto-rows: 300px;
    grid-auto-columns: 190px;
    gap: 2.5rem;
}

.footerLinks div {display: flex; flex-direction: column; gap: 0.6rem;}

@media (min-width: 1200px) and (max-width: 1300px) {
    .bookDetailDiv {width: 90%; padding: 1.35rem 2.25rem;}
    .socialMediaDiv {gap: 1.1rem;}
    .potterTyping {font-size: 3.8rem;} 
    .potterTypingSmall {font-size: 1.8rem;}
    .footerTyping {font-size: 1.75rem;}

    .trailerDiv {width: 90%;}
    .trailerTitle {font-size: 3.4rem}
    .trailerTitleDiv img {width: 59.5px;}

    .searchInput {
        padding: 0.285rem 0.665rem; padding-top: 0.427rem; font-size: 1.85rem;}
    .searchButton {
        font-size: 1.66rem; padding-top: 0.427rem;}

    .topTitleVertically .potterTyping {font-size: 3.8rem;}
    .topTitleVertically .potterTypingSmall {font-size: 1.9rem;}
    .findMe {font-size: 1.71rem;}
    .socialMedias {width: 3.56rem; height: 3.56rem;}


    .allCharacterDiv {
        width: calc(4 * 190px + 2 * 1rem + 2 * 2.5rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
    }
    .allCharacterContainer{
        grid-template-columns: repeat(4, 180px);
        grid-template-rows: repeat(2, 300px);
    }
}

@media (min-width: 1100px) and (max-width: 1200px) {
    .bookDetailDiv {width: 85%; gap: 5.4rem; padding: 1.22rem 2.03rem;}
    .bookContent {gap: 0.6rem;}
    .bookTitle {font-size: 1.53rem;}
    #bookSummary {font-size: 1.04rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.22rem;}
    
    .bookCover {width: 280px;}
    .trailerDiv {width: 90%;}
    .trailerTitle {font-size: 2.89rem}
    .trailerTitleDiv img {width: 50.5px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    .onlyIndexBody {gap: 6rem;}

    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(3 * 200px + 2 * 1rem + 2 * 1rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    

    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite; }

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    .socialMediaDiv {gap: 1rem;}
    .potterTyping {font-size: 3.6rem;} 
    .potterTypingSmall {font-size: 1.8rem;}
    .footerTyping {font-size: 1.5rem;}


    .searchInput {
        padding: 0.27rem 0.63rem; padding-top: 0.4rem; font-size: 1.76rem;}
    .searchButton {
        font-size: 1.58rem; padding-top: 0.4rem;}

    .topTitleVertically .potterTyping {font-size: 3.6rem;}
    .topTitleVertically .potterTypingSmall {font-size: 1.8rem;}
    .findMe {font-size: 1.62rem;}
    .socialMedias {width: 3.41rem; height: 3.41rem;}

    .characterDetailDiv {width: 60%; gap: 4.05rem; padding: 2.25rem 2.7rem;}


    .allCharacterDiv {
        gap: 2.5rem; padding: 1rem;
        width: calc(3 * 190px + 2 * 1rem + 2 * 1.5rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(3, 180px);
        grid-template-rows: repeat(2, 300px);
        grid-auto-rows: 300px;
        grid-auto-columns: 180px;
        gap: 2.5rem;
    }
}


@media (min-width: 1000px) and (max-width: 1100px) {
    .bookDetailDiv {width: 85%; gap: 5.4rem; padding: 1.22rem 2.03rem;}
    .bookContent {gap: 0.6rem;}
    .bookTitle {font-size: 1.53rem;}
    #bookSummary {font-size: 1.04rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.22rem;}
    
    .bookCover {width: 280px;}
    .trailerDiv {width: 90%;}
    .trailerTitle {font-size: 2.89rem}
    .trailerTitleDiv img {width: 50.5px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    .onlyIndexBody {gap: 6rem;}

    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(3 * 200px + 2 * 1rem + 2 * 1rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite; }

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    .socialMediaDiv {gap: 1rem;}
    .potterTyping {font-size: 3.6rem;} 
    .potterTypingSmall {font-size: 1.8rem;}
    .footerTyping {font-size: 1.5rem;}


    .searchInput {
        padding: 0.244rem 0.57rem; padding-top: 0.366rem; font-size: 1.59rem;}
    .searchButton {
        font-size: 1.42rem; padding-top: 0.366rem;}

    .topTitleVertically .potterTyping {font-size: 3.24rem;}
    .topTitleVertically .potterTypingSmall {font-size: 1.62rem;}
    .topTitleSearchBar {padding-left: 1rem;}
    .findMe {font-size: 1.46rem;}
    .socialMedias {width: 3.07rem; height: 3.07rem;}

    .characterDetailDiv {width: 65%; gap: 3.64rem; padding: 2.02rem 2.43rem;}

    .allCharacterDiv {
        width: calc(3 * 190px + 2 * 1rem + 2 * 1.5rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(3, 180px);
        grid-template-rows: repeat(2, 300px);
        grid-auto-rows: 300px;
        grid-auto-columns: 180px;
        gap: 2.5rem;
    }
}

@media (max-width: 1100px) {
    .characterInfo {font-size: 1.23rem;}
    .characterHor p {font-size: 2.18rem;}
    .characterHor img {width: 40.5px;}
    .potionInfoDiv {padding: 1.6rem 2.4rem;}
}

@media (max-width: 1000px) {
    .topTitleSearchBar, .searchBar{width: 50%;}
    .characterDetailDiv {width: 75%; gap: 3.28rem; padding: 1.82rem 2.19rem;}
}

@media (max-width: 800px) {

    .characterDetailDiv {display: flex; flex-direction: column; gap: 2.6rem; padding: 1.47rem 1.77rem;}
    .spellPotionImg {width: 100%; min-height: 15rem; max-width: 25rem;}
    .onlyCharacterImg {min-height: 15rem; max-width: 25rem;}

    .characterDetailDiv {border: 0px; backdrop-filter: blur(0px);}
    .spellPotionCharDetailTitle, .characterContent {border: 2px solid rgba(207, 167, 108, 0.532); 
        background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); padding: 1rem 2rem 1.5rem 2rem; gap: 0.5rem;}
    .spellPotionChar-mobile {display: flex;}
    .spellPotionChar-wide {display: none;}
    .spellPotionImg {box-shadow: 0px 0px 15px 5px white;}


    .characterInfo {font-size: 1.17rem;}
    .characterHor p {font-size: 2.07rem;}
    .characterHor img {width: 36.4px;}
    .potionInfoDiv {padding: 1.28rem 1.92rem;}
    
    .spellBody {gap: 4rem;}

    .potionBody {gap: 3rem;}
}


@media (min-width: 900px) and (max-width: 1000px) {
    .bookDetailDiv {width: 85%; gap: 3.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.6rem;}
    .bookTitle {font-size: 1.53rem;}
    #bookSummary {font-size: 1.04rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.22rem;}
    
    .bookCover {width: 260px;}
    .trailerDiv {width: 90%;}
    .trailerTitle {font-size: 2.45rem}
    .trailerTitleDiv img {width: 43px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    .onlyIndexBody {gap: 6rem;}

    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(3 * 200px + 2 * 1rem + 2 * 1rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite; }

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    .socialMediaDiv {gap: 1rem;}
    .potterTyping {font-size: 3.6rem;} 
    .potterTypingSmall {font-size: 1.8rem;}
    .footerTyping {font-size: 1.5rem;}


    .searchInput {
        padding: 0.244rem 0.57rem; padding-top: 0.366rem; font-size: 1.59rem;}
    .searchButton {
        font-size: 1.42rem; padding-top: 0.366rem;}

    .topTitleVertically .potterTyping {font-size: 3.24rem;}
    .topTitleVertically .potterTypingSmall {font-size: 1.62rem;}
    .findMe {font-size: 1.46rem;}
    .socialMedias {width: 3.07rem; height: 3.07rem;}

    .social-media-wide-searchBar {
        display: none; /* Küçük ekranlarda geniş olanı gizle */
    }
    .social-media-mobile-searchBar {
        display: flex; /* Küçük ekranlarda mobil olanı göster */
        /* Flexbox ayarlarınızı buraya ekleyin */
    }
    
    .footerSocialSearchBar {display: flex;}
    .footerSocialSearchBar, .footerLinksSearchBar, .footerAboutSearchBar{width:30%;}
    

    .allCharacterDiv {
        width: calc(3 * 190px + 1 * 1rem + 0.5rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(3, 160px);
        grid-template-rows: repeat(2, 265px);
        grid-auto-rows: 265px;
        grid-auto-columns: 160px;
    }
    .allCharacterCard {width: 160px; height: 265px;}
}

@media (min-width: 800px) and (max-width: 900px) {
    .bookDetailDiv {width: 85%; gap: 2.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.5rem;}
    .bookTitle {font-size: 1.38rem;}
    #bookSummary {font-size: 0.92rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.1rem;}

    .bookCover {width: 240px;}
    
    .movieContent {background: transparent; backdrop-filter: blur(8px);}
    .movieDetailTitle {background: transparent; backdrop-filter: blur(8px);}

    .trailerDiv {width: 92%;}
    .trailerTitle {font-size: 2.08rem}
    .trailerTitleDiv img {width: 36.5px;}

    .onlyIndexBody .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(3 * 200px + 2 * 1rem + 2 * 1rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite;}

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    .for {display: flex;} 
    .hrStyle {display: block;}

    .socialMediaDiv {gap: 0.85rem;}
    .potterTyping {font-size: 3.1rem;} 
    .potterTypingSmall {font-size: 1.55rem;}
    .footerTyping {font-size: 1.3rem; gap: 0.25rem;}

    .searchInput {
        padding: 0.244rem 0.57rem; padding-top: 0.366rem; font-size: 1.59rem;}
    .searchButton {
        font-size: 1.42rem; padding-top: 0.366rem;}

    .topTitleVertically .potterTyping {font-size: 3.24rem;}
    .topTitleVertically .potterTypingSmall {font-size: 1.62rem;}
    .findMe {font-size: 1.46rem;}
    .socialMedias {width: 3.07rem; height: 3.07rem;}

    .social-media-wide-searchBar {
        display: none; /* Küçük ekranlarda geniş olanı gizle */
    }
    .social-media-mobile-searchBar {
        display: flex; /* Küçük ekranlarda mobil olanı göster */
        /* Flexbox ayarlarınızı buraya ekleyin */
    }

    .footerSocialSearchBar {display: flex;}
    .footerSocialSearchBar, .footerLinksSearchBar, .footerAboutSearchBar{width:30%;}

    .characterDetailDiv {width: 84%;}



    .allCharacterDiv {
        width: calc(3 * 137px + 7rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(3, 137px);
        grid-template-rows: repeat(2, 227px);
        grid-auto-rows: 227px;
        grid-auto-columns: 137px;
    }
    .allCharacterCard {width: 137px; height: 227px;}
}

@media (max-width: 800px) {
    .bookContent, .bookDetailTitle {background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(100px);}

    .social-media-wide {display: none; /* Küçük ekranlarda geniş olanı gizle */}
    .social-media-mobile {display: flex; /* Küçük ekranlarda mobil olanı göster */}

    .searchInput {
        padding: 0.244rem 0.57rem; padding-top: 0.366rem; font-size: 1.59rem;}
    .searchButton {
        font-size: 1.42rem; padding-top: 0.366rem;}

    .topTitleVertically .potterTyping {font-size: 3.24rem;}
    .topTitleVertically .potterTypingSmall {font-size: 1.62rem;}
    .findMe {font-size: 1.46rem;}
    .socialMedias {width: 3.07rem; height: 3.07rem;}

    .social-media-wide-searchBar {
        display: none; /* Küçük ekranlarda geniş olanı gizle */
    }
    .social-media-mobile-searchBar {
        display: flex; /* Küçük ekranlarda mobil olanı göster */
        /* Flexbox ayarlarınızı buraya ekleyin */
    }

    .footerInnerDivSearchBar {display: flex; flex-direction: column; align-items: center; gap: 2rem;}
    .footerSocialSearchBar {display: flex;}
    .footerSocialSearchBar, .footerLinksSearchBar, .footerAboutSearchBar{width:70%;}

    .characterInfoDiv hr {width: 90%;}
}

@media (max-width: 700px) {
    body .headerSearchBar {display: flex; flex-direction: column; align-items: center; gap: 1.5rem;}
    .topTitleSearchBar, .searchBar{width: 92%;}
    .topTitleSearchBar {display: flex; flex-direction: row; align-items: center; padding: 0rem; gap: 0.5rem;}
}

@media (min-width: 704px) and (max-width: 800px) {
    .bookDetailDiv {width: 85%; gap: 2.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.7rem; }
    .bookTitle {font-size: 1.38rem; color: white; font-family:"Montserrat", sans-serif; margin: 0px;}
    #bookSummary {font-size: 0.92rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.1rem;}

    .bookDetailDiv {border: 0px; backdrop-filter: blur(0px); flex-direction: column; align-items: center;}

    .bookContent, .bookDetailTitle {border: 2px solid rgba(207, 167, 108, 0.532); padding: 1rem;}
    .bookDetailTitle {display: flex; flex-direction: column; align-items: center; justify-content: center;}

    .bookTitle-mobile, .hrStyle2{display: flex;}
    .bookTitle-wide {display: none;}
    .bookTitle-mobile {font-size: 1.3rem;}

    .bookCover {width: 240px;}
    .trailerDiv {width: 85%; border: 2px solid rgba(207, 167, 108, 0.532);}
    .trailerTitle {font-size: 2.08rem}
    .trailerTitleDiv img {width: 36.5px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(2 * 200px + 1 * 1rem + 2 * 1rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite;}

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    .footerSocial {display: flex;}
    .footerSocial, .footerLinks, .footerAbout{width:30%;}

    .header{
        display: flex;
        gap: 0.5rem;
    }

    .socialMediaDiv {gap: 0.7rem;}
    .socialMedias {width: 50px; height: 50px;}

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

    .potterTyping {font-size: 3.1rem; margin: 0px;} 
    .potterTypingSmall {font-size: 1.55rem;}

    .horizantalLine {display: flex;}
    .footerTyping {font-size: 1.6rem; gap: 0.55rem;}


    .allCharacterDiv {
        width: calc(2 * 137px + 4.5rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(2, 137px);
        grid-template-rows: repeat(2, 227px);
        grid-auto-rows: 227px;
        grid-auto-columns: 137px;
    }
    .allCharacterCard {width: 137px; height: 227px;}
}


@media (min-width: 550px) and (max-width: 704px) {
    .bookDetailDiv {width: 85%; gap: 2.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.7rem;}
    .bookTitle {font-size: 1.38rem; color: white; font-family:"Montserrat", sans-serif; margin: 0px;}
    #bookSummary {font-size: 0.92rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.1rem;}

    .bookDetailDiv {border: 0px; backdrop-filter: blur(0px); flex-direction: column; align-items: center;}

    .bookContent, .bookDetailTitle {border: 2px solid rgba(207, 167, 108, 0.532); padding: 1rem;}
    .bookDetailTitle {display: flex; flex-direction: column; align-items: center; justify-content: center;}

    .bookTitle-mobile, .hrStyle2{display: flex;}
    .bookTitle-wide {display: none;}
    .bookTitle-mobile {font-size: 1.2rem;}
    .bookCover {width: 220px;}

    .trailerDiv {width: 85%; border: 2px solid rgba(207, 167, 108, 0.532);}
    .trailerTitle {font-size: 1.77rem}
    .trailerTitleDiv img {width: 31px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(2 * 200px + 1 * 1rem + 2 * 1rem); /* 3 kart + 2 boşluk + padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite;}

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    #footer {gap: 2rem;}
    .footerInnerDiv {flex-direction: column; align-items: center; gap: 2rem;}
    .potterTypingSmall{top: 0px;}
    .footerSocial {display: flex;}
    .footerSocial, .footerLinks, .footerAbout{width:70%; gap: 0.5rem;}

    .header{
        display: flex;
        gap: 0.5rem;
    }

    .socialMediaDiv {gap: 0.7rem;}
    .socialMedias {width: 50px; height: 50px;}

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

    .potterTyping {font-size: 3.1rem; margin: 0px;} 
    .potterTypingSmall {font-size: 1.55rem;}

    .horizantalLine {display: flex;}
    .footerTyping {font-size: 1.6rem; gap: 0.55rem;}


    .allCharacterDiv {
        width: calc(2 * 137px + 4.5rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(2, 137px);
        grid-template-rows: repeat(2, 227px);
        grid-auto-rows: 227px;
        grid-auto-columns: 137px;
    }
    .allCharacterCard {width: 137px; height: 227px;}
}

@media (max-width: 650px) {
    .allCharacterDiv {
        width: calc(1 * 197px + 2rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(1, 197px);
        grid-template-rows: repeat(2, 326px);
        grid-auto-rows: 326px;
        grid-auto-columns: 197px;
    }
    .allCharacterCard {width: 197px; height: 326px;}
}


@media (min-width: 500px) and (max-width: 550px) {

    .bookDetailDiv {width: 85%; gap: 2.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.7rem;}
    .bookTitle {font-size: 1.38rem; color: white; font-family:"Montserrat", sans-serif; margin: 0px;}
    #bookSummary {font-size: 0.92rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.1rem;}

    .bookDetailDiv {border: 0px; backdrop-filter: blur(0px); flex-direction: column; align-items: center;}

    .bookContent, .bookDetailTitle {border: 2px solid rgba(207, 167, 108, 0.532); padding: 1rem;}
    .bookDetailTitle {display: flex; flex-direction: column; align-items: center; justify-content: center;}

    .bookTitle-mobile, .hrStyle2{display: flex;}
    .bookTitle-wide {display: none;}

    .bookTitle-mobile {font-size: 1.1rem; text-align: center;}
    .bookCover {width: 200px;}

    .trailerDiv {width: 85%; border: 2px solid rgba(207, 167, 108, 0.532);}
    .trailerTitle {font-size: 1.5rem}
    .trailerTitleDiv img {width: 26.3px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(1 * 200px + 1 * 1rem + 2 * 3rem); /* 1 kart + 2 boşluk + 3padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    .onlyBooks, .onlyMovies{width: calc(1 * 200px + 2 * 1rem + 2 * 4rem);}

    .topTitle {flex-direction: column;}
    .titleSmall {top: 0rem;}
    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite;}

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    #footer {gap: 2rem;}
    .footerInnerDiv {flex-direction: column; align-items: center; gap: 2rem;}
    .potterTypingSmall{top: 0px;}
    .footerSocial {display: flex;}
    .footerSocial, .footerLinks, .footerAbout{width:70%; gap: 0.5rem;}

    .header{
        display: flex;
        gap: 0.5rem;
    }

    .socialMediaDiv {gap: 0.7rem;}
    .socialMedias {width: 50px; height: 50px;}

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

    .potterTyping {font-size: 3.1rem; margin: 0px;} 

    .potterTypingSmall {font-size: 1.55rem;}
    .horizantalLine {display: flex;}

    .footerTyping {font-size: 1.3rem; gap: 0.4rem;}
}


@media (max-width: 550px) {
    .allCharacterDiv {
        width: calc(1 * 164px + 2rem);
        border: 2px solid rgba(207, 167, 108, 0.532);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(1, 164px);
        grid-template-rows: repeat(2, 272px);
        grid-auto-rows: 272px;
        grid-auto-columns: 164px;
    }
    .allCharacterCard {width: 164px; height: 272px;}


    .characterInfo {font-size: 1.11rem;}
    .characterHor p {font-size: 1.97rem;}
    .characterHor img {width: 32.8px;}
    .potionInfoDiv {padding: 0.81rem 1.22rem;}
}


@media (min-width: 400px) and (max-width: 500px) {

    .bookDetailDiv {width: 85%; gap: 2.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.7rem;}
    .bookTitle {font-size: 1.38rem; color: white; font-family:"Montserrat", sans-serif; margin: 0px;}
    #bookSummary {font-size: 0.92rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.1rem;}

    .bookDetailDiv {border: 0px; backdrop-filter: blur(0px); flex-direction: column; align-items: center;}

    .bookContent, .bookDetailTitle {border: 2px solid rgba(207, 167, 108, 0.532); padding: 1rem;}
    .bookDetailTitle {display: flex; flex-direction: column; align-items: center; justify-content: center;}

    .bookTitle-mobile, .hrStyle2{display: flex;}
    .bookTitle-wide {display: none;}

    .bookTitle-mobile {font-size: 1.1rem; text-align: center;}
    .bookCover {width: 200px;}

    .trailerDiv {width: 85%; border: 2px solid rgba(207, 167, 108, 0.532);}
    .trailerTitle {font-size: 1.275rem}
    .trailerTitleDiv img {width: 22.35px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(1 * 200px + 1 * 1rem + 2 * 3rem); /* 1 kart + 2 boşluk + 3padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    .onlyBooks, .onlyMovies{width: calc(1 * 200px + 2 * 1rem + 2 * 3rem);}
    .bookCard, .movieCard {width: 270px; height: 405px;}

    .characterCard {width: 207px; height: 360px;}
    .characterCard p {font-size: 1.26rem;}

    .topTitle {flex-direction: column;}
    .titleSmall {top: 0rem;}
    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite;}

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    #footer {gap: 2rem;}
    .footerInnerDiv {flex-direction: column; align-items: center; gap: 2rem;}
    .potterTypingSmall{top: 0px;}
    .footerSocial {display: flex;}
    .footerSocial, .footerLinks, .footerAbout{width:70%; gap: 0.5rem;}

    .header{
        display: flex;
        gap: 0.5rem;
    }

    .socialMediaDiv {gap: 0.7rem;}
    .socialMedias {width: 50px; height: 50px;}

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

    .potterTyping {font-size: 3.1rem; margin: 0px;} 

    .potterTypingSmall {font-size: 1.55rem;}
    .horizantalLine {display: flex;}

    .footerTyping {font-size: 1.3rem; gap: 0.4rem;}

    .allCharacterDiv {
        width: calc(1 * 137px + 2rem);
    }
    .allCharacterContainer{
        grid-template-columns: repeat(1, 137px);
        grid-template-rows: repeat(2, 227px);
        grid-auto-rows: 227px;
        grid-auto-columns: 137px;
    }
    .allCharacterCard {width: 137px; height: 227px;}
}

@media (max-width: 460px) {
    
    .sideDiv {right: 0.4rem; top: 50%;}
    .backButton {
        width: 70px;
        padding: 0.4rem 1.8rem;
    }
}

@media (max-width: 400px) {

    .bookDetailDiv {width: 85%; gap: 2.4rem; padding: 1.10rem 1.83rem;}
    .bookContent {gap: 0.7rem;}
    .bookTitle {font-size: 1.38rem; color: white; font-family:"Montserrat", sans-serif; margin: 0px;}
    #bookSummary {font-size: 0.92rem;}
    .bookParts p, .bookSummarySpan {font-size: 1.1rem;}

    .bookDetailDiv {border: 0px; backdrop-filter: blur(0px); flex-direction: column; align-items: center;}

    .bookContent, .bookDetailTitle {border: 2px solid rgba(207, 167, 108, 0.532); padding: 1rem;}
    .bookDetailTitle {display: flex; flex-direction: column; align-items: center; justify-content: center;}

    .bookTitle-mobile, .hrStyle2{display: flex;}
    .bookTitle-wide {display: none;}

    .bookTitle-mobile {font-size: 1.1rem; text-align: center;}
    .bookCover {width: 200px;}

    .trailerDiv {width: 85%; border: 2px solid rgba(207, 167, 108, 0.532);}
    .trailerTitle {font-size: 1.08rem}
    .trailerTitleDiv img {width: 19px;}

    .onlyBooksBody, .onlyMoviesBody {gap: 4.5rem;}
    /* categoryDiv'in görünür alanını 3 karta ayarla */
    .categoryDiv {
        gap: 1rem; padding: 1rem;
        width: calc(1 * 200px + 1 * 1rem + 2 * 1rem); /* 1 kart + 2 boşluk + 3padding */
        /* Hesaplama: (3 * kart_genişliği) + (2 * gap) */
        /* Bu sayede sadece 3 kart görünür */
        border: 2px solid rgba(207, 167, 108, 0.532);
    }

    .onlyBooks, .onlyMovies, .onlyCharacterFamilies{
        width: calc(1 * 200px + 2 * 1rem + 2 * 1rem);
    }
    .bookCard, .movieCard {width: 240px; height: 370px;}
    .characterCard {width: 186px; height: 324px;}
    .characterCard p {font-size: 1.14rem;}

    .topTitle {flex-direction: column;}
    .titleSmall {top: 0rem;}
    /* Animasyonu uygulamak için scrolling-wrapper'ı kullan */
    .scrolling-wrapper {animation: scroll 15s linear infinite;}

    /* Animasyonlu kaydırma keyframes'leri */
    @keyframes scroll {
        from {transform: translateX(0);}
        to {
            /* 5 kartın toplam genişliği kadar kaydır */
            /* Hesaplama: 5 * 200px + 4 * 1.5rem (gap) = 1000px + 6rem */
            transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
        }
    }

    #footer {gap: 2rem;}
    .footerInnerDiv {flex-direction: column; align-items: center; gap: 2rem;}
    .potterTypingSmall{top: 0px;}
    .footerSocial {display: flex;}
    .footerSocial, .footerLinks, .footerAbout{width:70%; gap: 0.5rem;}

    .header{
        display: flex;
        gap: 0.5rem;
    }

    .socialMediaDiv {gap: 0.7rem;}
    .socialMedias {width: 50px; height: 50px;}

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

    .potterTyping {font-size: 3.1rem; margin: 0px;} 

    .potterTypingSmall {font-size: 1.55rem;}
    .horizantalLine {display: flex;}

    .footerTyping {font-size: 1.3rem; gap: 0.4rem;}


    .allCharacterDiv {
        width: calc(1 * 137px + 2rem);
        position: relative;
        right: 1.3rem;
    }
    .allCharacterContainer{
        grid-template-columns: repeat(1, 137px);
        grid-template-rows: repeat(2, 227px);
        grid-auto-rows: 227px;
        grid-auto-columns: 137px;
    }
    .allCharacterCard {width: 137px; height: 227px;}
}