/* Genel sayfa tasarımı*/
html, body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; 
    -webkit-font-smoothing:antialiased;
}

body.genel {
    background-color: #000000;
    background-image: url(../img/desen.png);
    background-size: 14%;
}

@font-face {
    font-family: Boogaloo;
    src: url(../font/Boogaloo-Regular.ttf);
}

@font-face {
    font-family: Berkshire Swash;
    src: url(../font/BerkshireSwash-Regular.ttf);
}

@font-face {
    font-family: Black Ops One;
    src: url(../font/BlackOpsOne-Regular.ttf);
}

@font-face {
    font-family: Dynalight;
    src: url(../font/Dynalight-Regular.ttf);
}

@font-face {
    font-family: Audiowide;
    src: url(../font/Audiowide-Regular.ttf);
}

::-webkit-scrollbar {
    width: 1.3vh;
}

::-webkit-scrollbar-track {
    background-color: rgba(230, 230, 230, 0.2);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(170, 170, 170, 0.5);  
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(160, 160, 160);
}

h1 {
    font-family: 'Berkshire Swash', cursive;
    font-weight: bold;
    color: hsl(40, 43%, 54%);
    font-size: 3.672vh;
}

h2 {
    font-family: 'Boogaloo', cursive;
    color: hsl(40, 43%, 54%);
    font-size: 2.916vh;
}

h3 {
    font-family: 'Boogaloo', cursive;
    color: hsl(40, 43%, 54%);
    font-size: 2.592vh;
}

p {
    font-family: 'Boogaloo', cursive;
    color: #f0f0f0;
    font-size: 2.16vh;
}

.ekran {
    position: relative;
    display: grid;
    grid-template-columns: 18% 78% 4%;
    grid-template-rows: 7% 44% 44% 5%;
    grid-template-areas: 
                'sol_menu baslik baslik'
                'sol_menu icerik medya'
                'sol_menu icerik ayarlar'
                'sol_menu telif telif';
    height: 100vh;
    overflow: hidden;
}

li.m_aktif, li.aktif {
    transform: scale(1.15);
}


/* Giriş sayfa tasarımı*/
body.giris {
    background-color: #000000;
    background-image: radial-gradient(
        circle,
        #353535,
        #000000);
    overflow: hidden;
}

section#giris {
    height: 100vh;
}

section#giris > span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #be9754;
    mix-blend-mode: color;
    pointer-events: none;
}

#giris > span {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color:#000000;
    animation: video 5s linear forwards; 
}

@keyframes video {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

video {
    width: 90vw;
    height: 100vh;
}

#giris > div {
    position: absolute;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100vw; 
}

#giris > div.yazi {
    transform: translateY(-50%);
    top: 50%;
    color: #f0f0f0;
    font-size: 5vw;
    font-family: 'Black Ops One', cursive;
    animation: cikis 5s linear forwards;
}

@keyframes cikis {
    0% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#giris > div > span {
    opacity: 0;
    display: inline-block;
    animation: eckhart 1s linear forwards;
}

@keyframes eckhart {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#giris > div > span:nth-child(1) {
    animation-delay: 0.5s;
}

#giris > div > span:nth-child(2) {
    animation-delay: 0.65s;
}

#giris > div > span:nth-child(3) {
    animation-delay: 0.8s;
}

#giris > div > span:nth-child(4) {
    animation-delay: 0.95s;
}

#giris > div > span:nth-child(5) {
    animation-delay: 1.1s;
}

#giris > div > span:nth-child(6) {
    animation-delay: 1.25s;
}

#giris > div > span:nth-child(7) {
    animation-delay: 1.4s;
}

#giris > div > span:nth-child(8) {
    animation-delay: 1.55s;
}

#giris > div > span:nth-child(9) {
    animation-delay: 1.7s;
}

#giris > div > span:nth-child(10) {
    animation-delay: 1.85s;
}

#giris > div > span:nth-child(11) {
    animation-delay: 2s;
}

#giris > div > span:nth-child(12) {
    animation-delay: 2.15s;
}

#giris > div > span:nth-child(13) {
    animation-delay: 2.3s;
}

#giris > div > span:nth-child(14) {
    animation-delay: 2.45s;
}

.arma {
    opacity: 0;
    width: 100vw;
    height: 60vh;
    animation: eckhart 1s linear 5s forwards;
}

.arma > img {
    height: 100%;
    margin-top: 7vh;
    
}

#dil {
    opacity: 0;
    width: 100vw;
    animation: eckhart 1s linear 5.5s forwards;
}

#dil > div {
    height: 9vh;
    margin-top: 75vh;
    padding: 0.1vh 0;
    background-image: linear-gradient(
        to right,
         rgb(0, 0, 0),
         rgb(217, 186, 122),
         rgb(0, 0, 0));
}

#dil > div > div {
    width: 100vw;
    height: 7.5vh;
    padding: 1.5vh 0 0;
    background-image: linear-gradient(
        to right,
         rgb(0, 0, 0),
         rgb(72, 47, 82),
         rgb(0, 0, 0) );
}

#dil > div > div > a {
    margin: 0 5vh;
    text-decoration: none;
    font-family: 'Dynalight', cursive;
    font-size: 5vh;
    color: #f0f0f0;
}


/* Mobil menü tasarımı */
.mobil_menu {
    grid-area: mobil_menu;
}

#hamburger {
    position: absolute;
    color: #f0f0f0;
    font-size: 5vh;
    margin: 1.1vh 2.3vh;
}

#menu_kapat {
    position: absolute;
    color:#f0f0f0;
    font-size: 7vh;
    margin: 0.7vh 2.1vh;
    opacity: 0;
}

input.ac_kapa {
    display: none;
    position: absolute;
    margin: 0vh;
    padding: 0vh;
    width: 9.5vh;
    height: 7vh;
    outline: none;
    opacity: 0;
    z-index: 10;
}

input.ac_kapa:checked ~ .ekran {
    grid-template-columns: 30% 63% 7%;
    grid-template-areas: 
            'mobil_menu baslik baslik'
            'mobil_menu icerik medya'
            'mobil_menu icerik ayarlar'
            'mobil_menu telif telif';
}

input.ac_kapa:checked ~ .ekran > .mobil_menu {
    background-image: linear-gradient(
        to right,
         hsl(38, 60%, 66%),
         hsl(38, 60%, 15%) );
}

input.ac_kapa:checked ~ .ekran > .mobil_menu > #hamburger {
    opacity: 0;
}

input.ac_kapa:checked ~ .ekran > .mobil_menu > #menu_kapat {
    opacity: 1;
}

input.ac_kapa:checked ~ .ekran > .ayarlar > input {
    width: 5vh;
    height: 5vh;
    margin: 1.2vh 0.5vh;
}

input.ac_kapa:checked ~ .ekran > .mobil_menu > nav {
    display: table;
}

.mobil_menu > nav {
    display: none;
    width: 100%;
    height: 100%;
    margin: 7vh 0vh;
    padding: 0vh;
}

.mobil_menu > nav > ul {
    list-style-type: none;
    display: table-cell;
    margin: 0vh;
    padding: 0vh;
}

.mobil_menu > nav > ul > li {
    padding: 0vh;
    width: 80%;
    margin: 7% 0%;
    background-color: #000000;
    box-shadow: 0.2vh 0.2vh 1vh black;
    cursor: pointer;
}

.mobil_menu > nav > ul > li > a {
    display: block;
    text-decoration: none;
    font-family: 'Berkshire Swash', cursive;
    font-size: 2vh;
    font-weight: bold;
    text-align: right;
    width: 80%;
    padding: 12% 7%;
    color: #be9754;
    background-image: linear-gradient( #070707, #252525, #070707 );
}

.mobil_menu > nav > ul > li > a:hover {
    background-image: linear-gradient( #151515, #404040, #151515 );
    color: #d9ba7a;
}

.mobil_menu > nav > ul > li.m_aktif > a {
    background-image: linear-gradient( #151515, #404040, #151515 );
    color: #d9ba7a;
}

.mobil_menu > nav > ul > li.m_aktif {
    background-color: #151515;
}


/* Sol menü tasarımı */
.menu {
    background-image: url(../img/sol-menu.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    grid-area: sol_menu;
}

.menu > nav {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0vh;
    padding: 0vh;
}

.menu > nav > ul {
    list-style-type: none;
    display: table-cell;
    vertical-align: middle;
    margin: 0vh;
    padding: 5vh;
}

.menu > nav > ul > li {
    position: relative;
    width: 80%;
    margin: 7% 0%;
    padding: 0%;
    background-color: #000000;
    box-shadow: 0.7vh 0.7vh 1vh black;
    cursor: pointer;
}

.menu > nav > ul > li > a {
    display: block;
    text-decoration: none;
    font-family: 'Berkshire Swash', cursive;
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
    padding: 12% 7%;
    color: #be9754;
    background-image: url(../img/kenarlik-sekme.png),
                      linear-gradient( #070707, #252525, #070707 );
    background-size: 100% 100%; 
}

.menu > nav > ul > li > a:hover {
    color: #d9ba7a;
    background-image: url(../img/kenarlik-sekme.png), 
                      linear-gradient( #151515, #404040, #151515 );
    background-size: 100% 100%; 
    transition-timing-function: ease-in;
    transition-duration: 0.1s;
}

.menu > nav > ul > li.aktif > a {
    background-image: url(../img/kenarlik-sekme.png), 
                      linear-gradient( #151515, #404040, #151515 );
    color: #d9ba7a;
    margin: 12% 0%;
}


/* Başlık tasarımı */
.baslik {
    background-image: linear-gradient(
        to right,
         rgba(140, 110, 60, 0),
         rgba(190, 151, 84, 0.7),
         rgba(217, 186, 122, 1),
         rgba(190, 151, 84, 0.7),
         rgba(140, 110, 60, 0));
    margin: 0.5vh;
    padding: 0.2vh 0vh;
    grid-area: baslik;
}

.baslik > h1 {
    color: #070707;
    font-family: 'Black Ops One', cursive;
    text-align: center;
    font-size: 3vh;
    margin: 0.1vh;
    padding: 0.9vh;
}


/* Genel içerik tasarımı*/
.icerik {
    margin: 2%;
    padding: 0%;
    overflow-y: auto;
    grid-area: icerik;
}

#genel {
    margin: 3% 3% 0%;
    padding: 0%;
    text-align: justify;
}


    /* Ana sayfa tasarımı */
    .ana_sayfa > div > p {
        text-align: center;
        font-size: 4.32vh;
        width: 70%;
        margin: 12vh auto auto;
    }

    .cizgi {
        font-size: 0.54vh;
        background-image: linear-gradient(
        to right,
         rgba(140, 110, 60, 0),
         rgba(190, 151, 84, 0.7),
         rgba(217, 186, 122, 1),
         rgba(190, 151, 84, 0.7),
         rgba(140, 110, 60, 0));
    }

    .ana_sayfa > div:nth-child(1) > p {
        font-family: 'Dynalight', cursive;
    }

    .ana_sayfa > div > span {
        display: block;
        text-align: right;
        color: #f0f0f0;
        font-family: 'Dynalight', cursive;
        font-size: 4.32vh;
        width: 60%;
        margin: 5vh auto;
    }

    .ana_sayfa > div:nth-child(3) > p {
        font-size: 3.78vh;
    }
    

    /* Seri sayfa tasarımı */
    .seri {
        margin: 2% 3% 0%;
        padding: 0%;
        text-align: justify;
        overflow: hidden;
    }

    .kitaplar {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 2% 0% 0%;
        width: 60%;
    }

    .kitap {
        margin: 0%;
    }

    .kitap > a > img {
        color: #f0f0f0;
        width: 50%;
        height: 50%;
    }

    .kitap > a:last-child {
        text-decoration: none;
        display: inline-block;
        margin: 3% 0%;
        font-family: 'Boogaloo', cursive;
        color: #f0f0f0;
        font-size: 2.16vh;
    }

    .kitaplar .kitap:nth-child(2) > a {
        cursor: not-allowed;
    }


        /* Ufkun ötesi sayfa tasarımı */
        .ufkun_otesi {
            display: flex;
            justify-content: flex-start;
        }

        .ufkun_otesi > div:nth-child(1) {
            width: 60%;
        }

        .ufkun_otesi > div:nth-child(2).alan {
            position: relative;
            perspective: 1000px;
            max-width: 355px;
            max-height: 532px;
            min-width: 355px;
            min-height: 532px;
            margin: 5vh 10%;
        }

        .donen_kitap {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;   
            transition: 1.5s linear 0s;
            animation: donme 4s linear 0.5s;
        }

        @keyframes donme {
            0% {
                transform: rotateY(0deg);
            }

            48% {
                transform: rotateY(180deg);
            }

            52% {
                transform: rotateY(180deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }
        
        .donen_kitap:hover {
            transform: rotateY(180deg);
        }
        
        .donen_kitap > img {
            position: absolute;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            backface-visibility: hidden;
            object-fit: contain;
        }
        
        .on {
            transform: translateZ(87px);
        }
        
        .yan {
            transform: rotateY(-90deg) translateX(-134px);
            transform-origin: left;
        }
        
        .arka {
            transform: translateZ(108px);
            transform: rotateY(-180deg);
        }

    
    /* Aileler sayfa tasarımı */
    .aileler {
        font-family: 'Berkshire Swash', cursive;
        margin: 0%;
        padding: 0%;
    }

    .aileler > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .aileler > div:nth-child(1) {
        margin-top: 4vh;
    }

    .aileler > div > a {
        align-self: center;
        text-decoration: none;
        color: #f0f0f0;
        margin: 1.5vh 0.5vw;
        font-size: 2.4vh;
        padding:3.4vh 5vh;
        width: 13vh;
        border: 0.1vh solid #acabab;
        background-image: linear-gradient(
            to right,
             rgba(0, 0, 0, 0.4),
             rgb(36, 36, 36),
             rgba(0, 0, 0, 0.4));
        cursor: pointer;
    }
    
    .aileler > div:nth-child(3) > a:hover,
    .aileler > div:nth-child(4) > a:nth-child(4):hover {
        background-image: linear-gradient(
            to right,
             rgba(33, 19, 39, 0.7),
             rgb(75, 43, 88),
             rgba(33, 19, 39, 0.7));
    }

    .aileler > div:nth-child(1) > a {
        font-size: 5vh;
        width: 20vh;
    }

    .aileler > div:nth-child(1) > a:hover,
    .aileler > div:nth-child(5) > a:hover {
        background-image: linear-gradient(
            to right,
             rgba(190, 151, 84, 0.6),
             rgba(217, 186, 122),
             rgba(190, 151, 84, 0.6));
    }

    .aileler > div:nth-child(2) > a {
        margin: 1.5vh 10vh;
        width: 15vh;
        font-size: 3.5vh;
    }

    .aileler > div:nth-child(2) > a:nth-child(1):hover {
        background-image: linear-gradient(
            to right,
             rgba(65, 26, 26, 0.6),
             rgb(88, 16, 16),
             rgba(65, 26, 26, 0.6));
    }

    .aileler > div:nth-child(2) > a:nth-child(2):hover {
        background-image: linear-gradient(
            to right,
             rgba(35, 80, 63, 0.6),
             rgb(46, 107, 84),
             rgba(35, 80, 63, 0.6));
    }

    .aileler > div:nth-child(3) > a:nth-child(2) {
        padding: 1.95vh 5vh;
    }

    .aileler > div:nth-child(4) > a:nth-child(1),
    .aileler > div:nth-child(4) > a:nth-child(2),
    .aileler > div:nth-child(4) > a:nth-child(3),
    .aileler > div:nth-child(4) > a:nth-child(5) {
        cursor: not-allowed;
    }

    .aileler > div:nth-child(4) > a:nth-child(1):hover ,
    .aileler > div:nth-child(4) > a:nth-child(2):hover ,
    .aileler > div:nth-child(4) > a:nth-child(3):hover ,
    .aileler > div:nth-child(4) > a:nth-child(5):hover {
        background-image: linear-gradient(
            to right,
             rgba(50, 50, 50, 0.4),
             rgb(86, 86, 86),
             rgba(50, 50, 50, 0.4));
    }

    .aileler > div:nth-child(5) > a {
        font-size: 1.7vh;
        padding: 2vh 5vh;
    }

    #uyari_edgar,
    #uyari_stokes {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.7);
        transition: opacity 0.5s;
        visibility: hidden;
    }

    #uyari_edgar:target,
    #uyari_stokes:target {
        visibility: visible;
    }

    .uyari {
        padding: 0.5vh 3vh 1vh;
        width: 25%;
        background-color: #000000;
        border: 2px solid #be9754;
        outline: solid 5px #000000;
    }

    .uyari > p:nth-child(1) {
        text-align: center;
        font-size: 2.916vh;
    }

    .uyari > p:nth-child(2) {
        text-align: justify;
        font-size: 1.944vh;
    }

    .uyari > p:nth-child(3) {
        text-align: center;
        font-size: 2.16vh;
        margin-top: 3vh;
    }

    .uyari > p > a {
        text-decoration: none;
        color: #f0f0f0;
        margin: 1vh 5vh;
        padding: 0.7vh 1.5vh;
    }

    .uyari > p > a:hover {
        color: #be9754;
    }


        /* Aile bilgiler sayfa tasarımı */
        .baslik_inline {
            display: inline;
        }

        .degisim {
            float: right;
        }

        .degisim,
        .degisim_satin_al {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            margin: -1vh 0 0;
            padding: 0;
        }

        .degisim > a {
            width: 2.5vh;
            padding: 1vh 2vh;
        }

        .degisim > a,
        .degisim_satin_al > a {
            font-size: 2.592vh;
            text-align: center;
            text-decoration: none;
            background-image: linear-gradient( 
                to right, 
                #171717, 
                #303030, 
                #171717 );
            clip-path: polygon(10% 0, 75% 0, 90% 100%, 25% 100%);
        }

        .degisim > a.bakilan,
        .degisim_satin_al > a.bakilan {
            font-weight: 900;
            color: #000000;
            background-image: linear-gradient(
            to right,
             rgba(190, 151, 84, 0.6),
             rgba(217, 186, 122),
             rgba(190, 151, 84, 0.6));
        }

        .degisim > a.olan,
        .degisim_satin_al > a.olan {
            background-image: linear-gradient(
            to right,
             rgba(60, 60, 60, 0.4),
             rgb(100, 100, 100),
             rgba(60, 60, 60, 0.4));
        }

        #boyut_kucuk_w_h {
            height: 27vh;
        }

        .boyut_kucuk {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5% 0% 0%;
            padding: 0%;
            height: 30vh;
        }
        
        .boyut_orta {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 3% 0% 0%;
            padding: 0%;
            height: 45vh;
        }

        #boyut_buyuk {
            height: 37vw;
        }

        .boyut_buyuk {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 3% 0% 0%;
            padding: 0%;
            height: 22.5vw;
        }

        #boyut_buyuk_hiyerarsi {
            height: 30vw;
        }

        .soy, .hiyerarsi {
            width: auto;
            height: 100%;
            margin: 0%;
            padding: 0%;
        }

        .soy > img,
        .hiyerarsi > img {
            position: relative;
            height: 100%;
            width: auto;
        }

        .buyuk_resim {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            transition: opacity 0.5s;
            visibility: hidden;
        }

        .buyuk_resim:target {
            visibility: visible;
        }

        .soy_tam_ekran,
        .hiyerarsi_tam_ekran {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0vh;
            margin: 10vh 5vw;
            height: 80vh;
        }

        .soy_tam_ekran > div,
        .hiyerarsi_tam_ekran > div {
            position: relative;
        }

        #pencere_kapat {
            position: absolute;
            top: 1vh;
            text-decoration: none;
            font-family: 'Boogaloo', cursive;
            font-size: 2vw;
            color: #f0f0f0;
            z-index: 1;
        }

        .soy_kucuk {
            width: 70%;
        }

        .soy_orta {
            width: 80%;
        }

        .soy_buyuk, .hiyerarsi_buyuk {
            width: 100%;
        }

        #pencere_kapat.kapat_kucuk {
            right: calc( 1vw + 15% );
        }

        #pencere_kapat.kapat_orta {
            right: calc( 1vw + 10% );
        }

        #pencere_kapat.kapat_buyuk {
            right: 1vw;
        }


        /* Eckhart sayfa tasarımı */
        .marka {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .marka > p {
            width: 28vh;
            text-align: center;
            margin: 1vh 1vh;
            padding: 0.5vh 1vh;
        }

        .marka > p > span:nth-child(1) {
            display: block;
            padding: 3vh 0vh;
            background-image: linear-gradient(
            to right,
             rgba(50, 50, 50, 0.4),
             rgb(86, 86, 86),
             rgba(50, 50, 50, 0.4)); 
        }

        .marka > p > span:nth-child(2) {
            display: block;
            margin: 1.5vh 0vh 1vh;
            color: #be9754;
        }

        .okul {
            text-align: center;
        }


        /* Haski sayfa tasarımı */
        .haski {
            display: flex;
            justify-content: flex-start;
        }

        .haski > div:nth-child(1) {
            width: 50%;
            margin: 0%;
            padding: 0%;
        }

        .haski > div:nth-child(2) {
            width: 50%;
            margin: 4vh 5vh 0vh;
        }
        
        .haski > div:nth-child(2) > img {
            width: 100%;
            height: auto;
        }

    
    /* Özel Kuvvetler sayfa tasarımı */
    .ozel_kuvvetler {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 75vh;
    }

    .ozel_kuvvetler > div {
        position: absolute;
        transform: scale(1.5);
    }

    .ozel_kuvvetler > div:nth-child(1) {
        clip-path: polygon(0% 0%, 98.7% 0%, 0% 98.7%);
    }

    .ozel_kuvvetler > div:nth-child(2) {
        clip-path: polygon(100% 1.3%, 100% 100%, 1.3% 100%);
    }
    
    .ozel_kuvvetler > div > a {
        position: absolute;
        text-decoration: none;
        font-family: 'Audiowide', cursive;
        color: #f0f0f0;
        font-size:3.8vh;
        top: 25%;
        left: 27%;
        z-index: 10;
    }
    
    .ozel_kuvvetler > div:nth-child(2) > a {
        top: 58%;
        left: 50%;
    }

    .ozel_kuvvetler > div > img {
        opacity: 0;
    }
    
    .ozel_kuvvetler > div > map:hover ~ a,
    .ozel_kuvvetler > div > a:hover {
        color: #000000;
        transition-duration: 0.5s;
    }

    .ozel_kuvvetler > div > map:hover ~ img,
    .ozel_kuvvetler > div > a:hover ~ img {
        opacity: 1;
        transition-duration: 0.5s;
    }

    .ozel_kuvvetler > div > div {
        position: absolute;
        display: inline-block;
    }

    .ozel_kuvvetler > div > map:hover ~ div > img,
    .ozel_kuvvetler > div > a:hover ~ div > img {
        opacity: 0;
        transition-duration: 0.5s;
    }


        /* ESF sayfa tasarımı */
        .esf > p > span {
            color: #acabab;
        }

        .siniflar {
            position: relative;
        }

        .rozetler,
        .aciklama {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            position: absolute;
            margin: 2vw 0;
            padding: 0;
            width: 70vw;
        }

        .rozetler > div {
            width: 10vw;
            height: 10vw;
            margin: 0;
            padding: 2vw 1vw 2vw 3vw;;
        }

        .siniflar > div.rozetler > div:nth-child(1) {
            background-image: radial-gradient( circle,
                rgb(90, 90, 90) 40%,
                rgba(90, 90, 90, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(2) {
            background-image: radial-gradient( circle,
                rgb(50, 50, 50) 40%,
                rgba(50, 50, 50, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(3) {
            background-image: radial-gradient( circle,
                rgba(230, 230, 230, 0.8) 40%,
                rgba(230, 230, 230, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(4) {
            background-image: radial-gradient( circle,
                rgb(32, 51, 78) 40%,
                rgba(32, 51, 78, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(5) {
            background-image: radial-gradient( circle,
                rgb(144, 144, 144) 40%,
                rgba(154, 154, 154, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(6) {
            background-image: radial-gradient( circle,
                rgb(92, 95, 67) 40%,
                rgba(92, 95, 67, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(7) {
            background-image: radial-gradient( circle,
                rgb(109, 93, 80) 40%,
                rgba(109, 93, 80, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(8) {
            background-image: radial-gradient( circle,
                rgb(48, 76, 104) 40%,
                rgba(48, 76, 104, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(9) {
            background-image: radial-gradient( circle,
                rgb(97, 54, 54) 40%,
                rgba(97, 54, 54, 0) 70%);
        }

        .siniflar > div.rozetler > div:nth-child(10) {
            background-image: radial-gradient( circle,
                rgb(68, 101, 105) 40%,
                rgba(68, 101, 105, 0) 70%);
        }

        .rozetler > div > img {
            width: 80%;
        }

        .aciklama > input {
            width: 10vw;
            height: 10vw;
            margin: 2.4vw 2vw 1.6vw;
            cursor: pointer;
            opacity: 0;
        }

        .aciklama > #sinif {
            display: none;
            padding: 2px 0;
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(190, 151, 84) 5%,
                rgb(190, 151, 84) 95%,
                rgb(00, 00, 00));
        }

        .aciklama > #sinif > div {
            padding: 0.1vw 5vw 2vw;
        }

        .aciklama > input:nth-child(1):checked ~ div#sinif.praefectus,
        .aciklama > input:nth-child(2):checked ~ div#sinif.nigrus,
        .aciklama > input:nth-child(3):checked ~ div#sinif.albus,
        .aciklama > input:nth-child(4):checked ~ div#sinif.sapphirus,
        .aciklama > input:nth-child(5):checked ~ div#sinif.cinereus,
        .aciklama > input:nth-child(6):checked ~ div#sinif.viridus,
        .aciklama > input:nth-child(7):checked ~ div#sinif.brunneus,
        .aciklama > input:nth-child(8):checked ~ div#sinif.caeruleus,
        .aciklama > input:nth-child(9):checked ~ div#sinif.rubeus,
        .aciklama > input:nth-child(10):checked ~ div#sinif.cyaneus {
            display: block;
        }
        
        .praefectus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(60, 60, 60) 5%,
                rgb(60, 60, 60) 95%,
                rgb(00, 00, 00));
        }

        .nigrus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(22, 22, 22) 5%,
                rgb(22, 22, 22) 95%,
                rgb(00, 00, 00));
        }

        .albus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(230, 230, 230) 5%,
                rgb(230, 230, 230) 95%,
                rgb(00, 00, 00));
        }

        .sapphirus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(24, 34, 52) 5%,
                rgb(21, 34, 52) 95%,
                rgb(00, 00, 00));
        }

        .cinereus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(170, 170, 170) 5%,
                rgb(170, 170, 170) 95%,
                rgb(00, 00, 00));
        }

        .viridus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(68, 70, 49) 5%,
                rgb(68, 70, 49) 95%,
                rgb(00, 00, 00));
        }

        .brunneus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(82, 70, 61) 5%,
                rgb(82, 70, 61) 95%,
                rgb(00, 00, 00));
        }

        .caeruleus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(42, 66, 90) 5%,
                rgb(42, 66, 90) 95%,
                rgb(00, 00, 00));
        }

        .rubeus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(74, 41, 41) 5%,
                rgb(74, 41, 41) 95%,
                rgb(00, 00, 00));
        }

        .cyaneus > div {
            background-image: linear-gradient(
                to right,
                rgb(00, 00, 00),
                rgb(68, 101, 105) 5%,
                rgb(68, 101, 105) 95%,
                rgb(00, 00, 00));
        }

        .aciklama > #sinif.cinereus > div > h3 {
            color: #af8d51;
        }

        .aciklama > #sinif > div > span {
            display: block;
            font-family: 'Boogaloo', cursive;
            color: #f0f0f0;
            font-size: 1.944vh;
        }

        .aciklama > #sinif.albus > div > span,
        .aciklama > #sinif.cinereus > div > span {
            color: #000000;
        }


    /* İletişim sayfa tasarımı */
    .iletisim {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0%;
        padding: 0%;
    }

    .mesaj_paneli {
        position: relative;
        display: block;
        margin: 2% 2% 0%;
        width: 50%;
        height: 50%;
    }

    .mesaj_paneli > span {
        position: relative;
        display: block;
        width: 100%;
    }

    .mesaj_paneli > span > p {
        color: #be9754;
    }

    .mesaj_paneli > span > .metin_alani {
        position: relative;
        display: block;
        width: 100%;        
        padding: 2px 0px;
        color: #000000;
        background-color: #f0f0f0;
        font-family: 'Boogaloo', cursive;
        font-weight: 400;
        font-size: 1.944vh;        
        border-bottom: 3px solid #d9ba7a;
    }

    .mesaj_paneli > span > textarea.metin_alani {
        height: 15vh;
    }

    .buton {
        position: relative;
        text-align: center;
        width: 25%;        
        padding: 0.75%;
        margin: 3% 3% 0%;
        color: white;
        background-color: #383838;
        font-family: 'Boogaloo', cursive;
        font-size: 3vh;
        border: 0.1vh solid #acabab;
        border-radius: 10%;
    }

    .buton:hover {
        background-image: linear-gradient(
        to right,
         rgb(140, 110, 60),
         rgb(190, 151, 84),
         rgb(217, 186, 122),
         rgb(190, 151, 84),
         rgb(140, 110, 60));
    }


    /* Satın al sayfa tasarımı */
    .degisim_satin_al > a {
        width: 25vh;
        padding: 1vh 0;
        margin: 0 -1.7vw;
        color: #f0f0f0;
    }

    .degisim_satin_al > a:nth-child(2) {
        margin: 0 25vw 0 -1.7vw;
    }

    .degisim_satin_al > a:nth-child(4) {
        margin: 0 1vw 0 -1.7vw;
    }

    .satin_al > div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4vh 0;
    }

    .satin_al > div > img {
        color: #f0f0f0;
        width: 22vh;
        margin-left: 3vw;
    }

    .satin_al > div > div {
        font-family: 'Boogaloo', cursive;
        text-align: center;
        margin: 0 0 0 3vw;
        width: 35vw;
    }

    .satin_al > div > div > span {
        color: #f0f0f0;
        font-size: 3.78vh;
        font-family: 'Berkshire Swash', cursive;
    }

    .satin_al > div > div > p {
        font-size: 2.7vh;
    }

    .satin_al > div > div > div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .satin_al > div > div > div > div {
        width: 7vw;
        height: 1.7vw;
        margin: 0.5vw;
        padding: 1.5vh 0;
        background-color: #383838;
        border: 1px solid #acabab;
    }

    .satin_al > div > div > div > div:hover {
        background-image: linear-gradient(
            to right,
             rgba(190, 151, 84, 0.6),
             rgba(217, 186, 122),
             rgba(190, 151, 84, 0.6));
    }

    .rakuten_kobo > a {
        padding: 1.8vw 2.5vw 0.5vw 2.4vw;
    }

    .d_r > a {
        padding: 1.8vw 2.1vw 0.5vw;
    }

    .idefix > a,
    .amazon > a {
        padding: 1.6vw 1.1vw 1vw;
    }

    .rakuten_kobo > a > img {
        width: 35%;
    }

    .d_r > a > img {
        width: 42%;
        margin-top: -0.2vw;
    }

    .idefix > a > img,
    .amazon > a > img {
        width: 70%;
        margin-top: 0.3vw;
    }


/* Sosyal medya tasarımı */
.medya {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    grid-area: medya;
}

#simge_f {
    border: 0.1vh solid #acabab;
    color: white;
    background-color: #383838;
    text-align: center;
    font-size: 2.7vh;
    border-radius: 20%;
    margin: 5% 15%;
    padding: 10% 10% 8%;
}

#simge_f:hover {
    background-color: #395692;
}

#simge_t {
    border: 0.1vh solid #acabab;
    color: white;
    background-color: #383838;
    text-align: center;
    font-size: 2.5vh;
    border-radius: 20%;
    margin: 5% 15%;
    padding: 12% 10% 8%;
}

#simge_t:hover {
    background-color: #01aaeb;
}

#simge_i {
    border: 0.1vh solid #acabab;
    color: white;
    background-color: #383838;
    text-align: center;
    font-size: 3vh;
    border-radius: 20%;
    margin: 5% 15%;
    padding: 10% 10% 7%;
}

#simge_i:hover {
    background-image: linear-gradient(to left bottom,#7665ac,#d52d7a,#f36f2e,#f7c265);
}

#simge_y {
    border: 0.1vh solid #acabab;
    color: white;
    background-color: #383838;
    text-align: center;
    font-size: 2.3vh;
    border-radius: 20%;
    margin: 5% 15%;
    padding: 12% 10% 8%;
    cursor: not-allowed;
}

#simge_y:hover {
    background-color: #bc2e2a;
}


/* Ayarlar tasarımı */
.ayarlar {
    grid-area: ayarlar;
}

.ayarlar > input {
    display: flex;
    position: absolute;
    width: 3vw;
    height: 3vw;
    margin: 1vw 0.5vw;
    outline: none;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    z-index: 10;
}

#ayar {
    display: flex;
    border: 0.1vh solid #d9ba7a;
    color: white;
    background-image: linear-gradient(
        to right,
         rgb(140, 110, 60),
         rgb(190, 151, 84),
         rgb(217, 186, 122),
         rgb(190, 151, 84),
         rgb(140, 110, 60));
    text-align: center;
    justify-content: center;
    font-size: 3vh;
    border-radius: 20%;
    margin: 25% 16% -10%;
    padding: 15%;
}

.ayarlar > input:checked ~ .dil, .ayarlar > input:checked ~ .tema {
    opacity: 1;
}

.ayarlar > input:checked ~ #ayar {
    border-bottom: none;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
}

#ayrac {
    text-align: center;
    font-size: 1.5vh;
    transform: scaleX(2.2);
    margin-top: 0.3vh;
}

.dil, .tema {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0% -10% 0% 0%;
    width: 66%;
    left: 16%;
    background-image: linear-gradient(
        to right,
         rgb(140, 110, 60),
         rgb(190, 151, 84),
         rgb(217, 186, 122),
         rgb(190, 151, 84),
         rgb(140, 110, 60));
    border: 0.1vh solid #d9ba7a;
    border-style: none solid;
    opacity: 0;
}

.tema {
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%; 
}

.dil :nth-child(2) {
    margin-top: 0.8vh;
    font-family: 'Berkshire Swash', cursive;
    font-weight: bold;
    text-align: center;
    font-size: 1.5vh;
}

#dil_tur {
    width: 3vh;
    height: 2.2vh;
    margin: 10% 30%;
    background-image: url(../img/turkce.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0.1vh solid #d9ba7a;
    border-radius: 20%;
}

#dil_ing {
    width: 3vh;
    height: 2.2vh;
    margin: 10% 30%;
    background-image: url(../img/english.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0.1vh solid #d9ba7a;
    border-radius: 20%;
    margin-bottom: 0.8vh;
}

#dil_tur > a > img,
#dil_ing > a > img {
    display: block;
    width: 100%;
    height: 100%;
}

.tema :nth-child(2) {
    margin-top: 0.8vh;
    font-family: 'Berkshire Swash', cursive;
    font-weight: bold;
    text-align: center;
    font-size: 1.5vh;
}

#tema_eck {
    width: 3vh;
    height: 2.2vh;
    margin: 10% 30%;
    background-color: #000000;
    border: 0.1vh solid #d9ba7a;
    border-radius: 20%;
}

#tema_age {
    width: 3vh;
    height: 2.2vh;
    margin: 10% 30%;
    background-color: #f0f0f0;
    border: 0.1vh solid #d9ba7a;
    border-radius: 20%;
    margin-bottom: 1.2vh;
    cursor: not-allowed;
}

#dil_tur.secili,
#dil_ing.secili,
#tema_eck.secili,
#tema_age.secili {
    border: 0.5vh solid #d9ba7a;
}


/* Telif tasarımı */
.telif {
    grid-area: telif;
}

.telif > p {
    color: white;
    font-family: 'Berkshire Swash', cursive;
    text-align: center;
    font-size: 2vh;
    margin: -0.08%;
}








/* Medya sorguları */

/* 21:9 ve üstündeki ayarlar */
@media screen and (min-aspect-ratio: 21/9) {
    video {
        width: 95vw;
    }

    #giris > div > span:nth-child(1) {
        animation-delay: 0.3s;
    }
    
    #giris > div > span:nth-child(2) {
        animation-delay: 0.5s;
    }
    
    #giris > div > span:nth-child(3) {
        animation-delay: 0.7s;
    }
    
    #giris > div > span:nth-child(4) {
        animation-delay: 0.8s;
    }

    #giris > div > span:nth-child(5) {
        animation-delay: 0.9s;
    }
    
    #giris > div > span:nth-child(6) {
        animation-delay: 1s;
    }

    #giris > div > span:nth-child(11) {
        animation-delay: 2.25s;
    }
    
    #giris > div > span:nth-child(12) {
        animation-delay: 2.45s;
    }
    
    #giris > div > span:nth-child(13) {
        animation-delay: 2.75s;
    }
    
    #giris > div > span:nth-child(14) {
        animation-delay: 2.9s;
    }

    #dil > div {
        padding: 0.2vh 0;
    }

    .ekran {
        grid-template-columns: 15% 82% 3%;
    }
    
    .ana_sayfa > div > p {
        font-size: 4.86vh;
    }

    .ana_sayfa > div > span {
        font-size: 4.86vh;
    }

    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.32vh;
    }

    .kitap > a > img {
        width: 45%;
        height: 45%;        
    }

    .ufkun_otesi > div:nth-child(1) {
        width: 50%;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        margin: 2% 15%;
    }

    #boyut_kucuk_w_h {
        height: 30vh;
    }

    .boyut_kucuk {
        margin: 4% 0% 0%;
        height: 33vh;
    }

    .boyut_orta {
        margin: 2% 0% 0%;
        height: 47vh;
    }

    .boyut_buyuk {
        margin: 2% 0% 0%;
        height: 57vh;
    }

    .eckhart .soy_orta {
        width: 70%;
    }

    .eckhart #pencere_kapat.kapat_orta {
        right: calc( 1vw + 15% );
    }

    .haski > div:nth-last-child(2) {
        margin: 0% 2%;
    }

    .ozel_kuvvetler {
        height: 68vh;
    }

    .rozetler,
    .aciklama {
        width: 72vw;
    }

    .aciklama > #sinif {
        margin: 0 2vw;
    }

    .mesaj_paneli {
        margin: 0%;
    }

    .degisim_satin_al > a {
        margin: 0 -1.3vw;
    }

    .degisim_satin_al > a:nth-child(2) {
        margin: 0 35vw 0 -1.3vw;
    }

    .degisim_satin_al > a:nth-child(4) {
        margin: 0 5vw 0 -1.3vw;
    }

    .satin_al > div > img {
        width: 25vh;
    }

    .satin_al > div > div {
        margin: 0 0 0 3vw;
    }

    .satin_al > div > div > span {
        font-size: 4.32vh;
    }

    .satin_al > div > div > p {
        font-size: 3.24vh;
    }

    .satin_al > div > div > div > div {
        width: 6vw;
        height: 1.5vw;
    }

    .rakuten_kobo > a {
        padding: 1.8vw 2vw 0.5vw 2.1vw;
    }

    .d_r > a {
        padding: 1.8vw 1.8vw 0.5vw;
    }

    .idefix > a {
        padding: 1.6vw 0.9vw 1vw;
    }

    .d_r > a > img {
        margin-top: -0.15vw;
    }

    .idefix > a > img {
        margin-top: 0.25vw;
    }

    .ayarlar > input {
        width: 2.5vw;
        height: 2.5vw;
        margin: 0.8vw 0.4vw;
    }
}


/* 16:11 ve altındaki ayarlar */
@media screen and (max-aspect-ratio: 16/11) {
    .ekran {
        grid-template-columns: 23% 72% 5%;
    }

    .menu > nav > ul > li {
        margin: 10% 0%;
    }

    .menu > nav > ul > li > a {
        font-size: 2vh;
        padding: 15% 7%;
    }
    
    .ana_sayfa > div > p {
        font-size: 3.78vh;
    }

    .ana_sayfa > div > span {
        font-size: 3.78vh;
    }

    .ana_sayfa > div:nth-child(3) > p {
        font-size: 3.24vh;
    }

    .kitaplar {
        width: 90%;
    }

    .kitap > a > img {
        width: 65%;
        height: 65%;
    }

    .ufkun_otesi {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ufkun_otesi > div:nth-child(1) {
        width: 100%;
    }

    .donen_kitap {
        margin: 5% 0% 30%;
    }

    .uyari {
        width: 40%;
    }

    .baslik_inline {
        display: block;
    }

    .degisim {
        float: none;
    }

    .degisim {
        margin: -0.7vh 0 0;
    }

    .degisim > span {
        font-size: 2.376vh;
        width: 2vh;
        padding: 1vh 1.3vh;
    }

    #boyut_kucuk_w_h {
        height: 15vw;
    }

    .boyut_kucuk {
        margin: 7% 0% 0%;
        height: 23vw;
    }

    .boyut_orta {
        margin: 5% 0% 0%; 
        height: 30vw;
    }

    .boyut_buyuk {
        margin: 8% 0% 0%;
        height: 21vw;
    }

    #boyut_buyuk {
        height: 33vw;
    }

    #boyut_buyuk_hiyerarsi {
        height: 28vw;
    }

    .haski {
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        padding: 0%;
    }

    .haski > div:nth-child(1) {
        width: 75%;
        margin: 0%;
        padding: 0%;
    }

    .haski > div:nth-child(2) {
        width: 75%;
        margin: 0%;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.3);
    }

    .rozetler,
    .aciklama {
        width: 64vw;
    }

    .rozetler > div {
        width: 11vw;
        height: 11vw;
    }

    .aciklama > input {
        width: 11vw;
        height: 11vw;
    }

    .mesaj_paneli {
        width: 60%;
        margin: 4% 2% 0%;
    }

    .degisim_satin_al {
        margin-left: 1vw;
    }

    .degisim_satin_al > a {
        width: 30vh;
        margin: 0 -2vw;
    }

    .degisim_satin_al > a:nth-child(2) {
        margin: 0 15vw 0 -2vw;
    }

    .degisim_satin_al > a {
        font-size: 2.376vh;
    }

    .satin_al > div > img {
        margin-left: 4vw;
    }

    .satin_al > div > div {
        margin: 0 2vw 0 3vw;
    }

    .satin_al > div > div > span {
        font-size: 3.564vh;
    }

    .satin_al > div > div > p {
        font-size: 2.484vh;
    }

    .satin_al > div > div > div > div {
        width: 8.5vw;
        height: 2.2vw;
        margin: 0.65vw;
    }

    .rakuten_kobo > a {
        padding: 2.4vw 3.2vw 0.6vw 2.4vw;
    }

    .d_r > a {
        padding: 2.5vw 2.5vw 0.6vw;
    }

    .idefix > a {
        padding: 1.9vw 1.2vw 1.1vw;
    }

    .rakuten_kobo > a > img {
        width: 39%;
    }

    .d_r > a > img {
        width: 45%;
    }

    .idefix > a > img {
        width: 75%;
        margin-top: 0.4vw;
    }

    .ayarlar > input {
        width: 3.8vw;
        height: 3.8vw;
        margin: 1.4vw 0.8vw;
    }
}


/* 4:3 ve altındaki ayarlar */
@media screen and (max-aspect-ratio: 4/3) {
    .ekran {
        grid-template-columns: 25% 70% 5%;
    }

    .menu > nav > ul > li {
        margin: 10% 0%;
    }

    .menu > nav > ul > li > a {
        font-size: 2vh;
        padding: 15% 7%;
    }
    
    .ana_sayfa > div > p {
        font-size: 3.78vh;
    }

    .ana_sayfa > div > span {
        font-size: 3.78vh;
    }

    .ana_sayfa > div:nth-child(3) > p {
        font-size: 3.24vh;
    }

    .kitap > a > img {
        width: 55%;
        height: 55%;
    }

    .ufkun_otesi {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ufkun_otesi > div:nth-child(1) {
        width: 80%;
    }

    .donen_kitap {
        margin: 15% 0% 30%;
    }

    .uyari {
        width: 40%;
    }

    .baslik_inline {
        display: block;
    }

    .degisim {
        float: none;
    }

    .degisim {
        margin: -0.7vh 0 0;
    }

    .degisim > span {
        font-size: 2.376vh;
        width: 2vh;
        padding: 1vh 1.3vh;
    }

    #boyut_kucuk_w_h {
        height: 15vw;
    }

    .boyut_kucuk {
        margin: 7% 0% 0%;
        height: 23vw;
    }

    .boyut_orta {
        margin: 5% 0% 0%; 
        height: 30vw;
    }

    .boyut_buyuk {
        margin: 8% 0% 0%;
        height: 21vw;
    }

    #boyut_buyuk {
        height: 33vw;
    }

    #boyut_buyuk_hiyerarsi {
        height: 28vw;
    }

    .haski {
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        padding: 0%;
    }

    .haski > div:nth-child(1) {
        width: 75%;
        margin: 0%;
        padding: 0%;
    }

    .haski > div:nth-child(2) {
        width: 75%;
        margin: 0%;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.3);
    }

    .rozetler,
    .aciklama {
        width: 64vw;
    }

    .rozetler > div {
        width: 11vw;
        height: 11vw;
    }

    .aciklama > input {
        width: 11vw;
        height: 11vw;
    }

    .mesaj_paneli {
        width: 60%;
        margin: 4% 2% 0%;
    }

    .degisim_satin_al {
        margin-left: 1vw;
    }

    .degisim_satin_al > a {
        width: 30vh;
        margin: 0 -2vw;
    }

    .degisim_satin_al > a:nth-child(2) {
        margin: 0 15vw 0 -2vw;
    }

    .degisim_satin_al > a {
        font-size: 2.376vh;
    }

    .satin_al > div > img {
        margin-left: 4vw;
    }

    .satin_al > div > div {
        margin: 0 2vw 0 3vw;
    }

    .satin_al > div > div > span {
        font-size: 3.564vh;
    }

    .satin_al > div > div > p {
        font-size: 2.484vh;
    }

    .satin_al > div > div > div > div {
        width: 8.5vw;
        height: 2.2vw;
        margin: 0.65vw;
    }

    .rakuten_kobo > a {
        padding: 2.4vw 3.2vw 0.6vw 2.4vw;
    }

    .d_r > a {
        padding: 2.5vw 2.5vw 0.6vw;
    }

    .idefix > a {
        padding: 1.9vw 1.2vw 1.1vw;
    }

    .rakuten_kobo > a > img {
        width: 39%;
    }

    .d_r > a > img {
        width: 45%;
    }

    .idefix > a > img {
        width: 75%;
        margin-top: 0.4vw;
    }

    .ayarlar > input {
        width: 3.8vw;
        height: 3.8vw;
        margin: 1.4vw 0.8vw;
    }
}


/* Ekranı dikey kullanırkenki ayarlar */
@media screen and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.8vw;
    }
    
    h1 {
        font-size: 5.1vw;
    }
    
    h2 {
        font-size: 4.05vw;
    }
    
    h3 {
        font-size: 3.6vw;
    }
    
    p {
        font-size: 3vw;
    }

    video {
        margin-top: -3vh;
    }
    
    .arma {
        height: 40vh;
    }

    .arma > img {
        width: 100%;
        margin-top: 15vh;
        
    }

    #dil > div {
        height: 7vh;
        margin-top: 67vh;
        padding: 0.15vh 0;
    }
    
    #dil > div > div {
        height: 5.8vh;
        padding: 1.2vh 0 0;

    }
    
    #dil > div > div > a {
        margin: 0 4vh;
        font-size: 4vh;
    }
    
    
    input.ac_kapa {
        display: block;
    }

    .ekran {
        grid-template-columns: 10% 80% 10%;
        grid-template-areas: 
                'mobil_menu baslik baslik'
                'icerik icerik medya'
                'icerik icerik ayarlar'
                'telif telif telif';
    }
    
    .menu {
        display: none;
    }

    .ana_sayfa > div > p {
        font-size: 5.25vw;
    }

    .ana_sayfa > div > span {
        font-size: 5.25vw;
    }

    .cizgi {
        font-size: 0.75vw;
    }

    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.35vw;
    }
    
    .kitaplar {
        width: 75%;
    }

    .kitap > a > img {
        width: 65%;
        height: 65%;        
    }

    .kitap > a:last-child {
        font-size: 3vw;
    }    

    .ufkun_otesi {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ufkun_otesi > div:nth-child(1) {
        width: 80%;
    }

    .donen_kitap {
        margin: 15% 0% 30%;
    }

    .aileler > div > a {
        margin: 1.5vh 1vw;
        width: 11vh;
    }

    .uyari {
        width: 70%;
    }

    .uyari > p:nth-child(1) {
        font-size: 4.05vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vw;
    }    

    .uyari > p > a {
        margin: 1vh 3.2vh;
    }

    .baslik_inline {
        display: block;
    }

    .w_h .baslik_inline {
        text-align: left;
    }

    .degisim {
        float: none;
    }

    .degisim {
        margin: -0.5vh 0 0;
    }

    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vw;
    }

    #boyut_buyuk {
        height: 42vw;
    }

    #boyut_kucuk_w_h {
        height: 19vw;
    }

    .boyut_kucuk {
        margin: 7% 0% 0%;
        height: 30vw;
    }

    .boyut_orta {
        margin: 5% 0% 0%;
        height: 40vw;
    }

    .boyut_buyuk {
        margin: 8% 0% 0%;
        height: 27vw;
    }

    .edgar .soy_kucuk,
    .stokes .soy_kucuk,
    .assante .soy_orta,
    .christie .soy_orta,
    .eckhart .soy_orta,
    .w_h .soy_orta {
        width: 100%;
    }

    #pencere_kapat {
        font-size: 3vw;
    }

    .edgar #pencere_kapat.kapat_kucuk,
    .stokes #pencere_kapat.kapat_kucuk,
    .assante #pencere_kapat.kapat_orta,
    .christie #pencere_kapat.kapat_orta,
    .eckhart #pencere_kapat.kapat_orta,
    .w_h #pencere_kapat.kapat_orta {
        right: 1vw;
    }
    
    #boyut_buyuk_hiyerarsi {
        height: 36vw;
    }

    .haski {
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        padding: 0%;
    }

    .haski > div:nth-child(1) {
        width: 75%;
        margin: 0%;
        padding: 0%;
    }

    .haski > div:nth-child(2) {
        width: 75%;
        margin: 5% 0;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.1);
    }

    .ozel_kuvvetler > div > a {
        font-size: 3.3vh
    }

    .rozetler,
    .aciklama {
        margin: 2vw 0 2vw -2vw;
        width: 82vw;
    }

    .rozetler > div {
        width: 20vw;
        height: 20vw;
    }

    .rozetler > div > img {
        margin-left: 1vw;
    }

    .aciklama > input {
        width: 20vw;
        height: 20vw;
    }

    .aciklama > #sinif > div {
        padding: 0.1vw 5vw 3vw;
    }

    .aciklama > #sinif > div > span {
        font-size: 2.7vw;
    }

    .mesaj_paneli {
        width: 70%;
        margin: 6% 0% 0%;
    }

    .mesaj_paneli > span > .metin_alani {
        font-size: 2.7vw;
    }

    .buton {
        width: 30%;
        padding: 2%;
        margin: 7% 3% 0%;
        font-size: 3.5vw;
        border: 0.1vh solid #acabab;
    }

    .degisim_satin_al {
        margin-left: 3vw;
    }

    .degisim_satin_al > a {
        width: 30vh;
        margin: 0 -3vw;
    }

    .degisim_satin_al > a:nth-child(2) {
        margin: 0 15vw 0 -2vw;
    }

    .satin_al > div > div {
        margin: 0 2vw 0 5vw;
    }

    .satin_al > div > img {
        width: 27vw;
        margin-left: 5vw;
    }

    .satin_al > div > div {
        width: 40vw;
    }

    .satin_al > div > div > span {
        font-size: 5.7vw;
    }

    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div {
        flex-wrap: wrap;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 0.7vw;
        padding: 1.2vw 0;
    }

    .rakuten_kobo > a {
        margin-left: -0.5vw;
        padding: 2.5vw 2.5vw 0.6vw;
    }

    .d_r > a {
        margin-left: -0.2vw;
        padding: 2.5vw 2vw 0.6vw;
    }

    .amazon > a,
    .idefix > a {
        margin-left: -0.3vw;
        padding: 2.5vw 1vw 0.6vw;
    }

    .rakuten_kobo > a > img {
        width: 42%;
    }

    .d_r > a > img {
        width: 52%;
        margin-top: -0.5vw;
    }

    .amazon > a > img,
    .idefix > a > img {
        width: 80%;
        margin-top: 0.45vw;
    }

    .ayarlar > input {
        width: 7vw;
        height: 7vw;
        margin: 1.7vh 1.1vh;
    }
}


/* Yükseliği 399p nin altında olan ekranlardaki ayarlar*/
@media screen and (max-height: 399px) {
    ::-webkit-scrollbar {
        width: 1.8vh;
    }
    
    h1 {
        font-size: 5.1vh;
    }
    
    h2 {
        font-size: 4.05vh;
    }
    
    h3 {
        font-size: 3.6vh;
    }
    
    p {
        font-size: 3vh;
    }

    #dil > div {
        padding: 0.2vh 0;
    }
   
    .ana_sayfa > div > p {
        font-size: 5.5vh;
    }
    
    .ana_sayfa > div > span {
        font-size: 5.5vh;
    }
    
    .cizgi {
        font-size: 0.75vh;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.5vh;
    }
    
    .kitaplar {
        width: 75%;
    }

    .kitap {
        margin: 0.5% 0% 0%;
    }

    .kitap > a > img {
        width: 60%;
        height: 60%;
        margin-bottom: -2%;
    }

    .kitap > a:last-child {
        margin: 0% 0%;
        font-size: 3vh;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 144px;
        max-height: 230px;
        min-width: 144px;
        min-height: 230px;
        margin: 7vh 5%;
    }

    .on {
        transform: translateZ(35px);
    }

    .donen_kitap {
        margin-left: 10%;
    }

    .donen_kitap > img.on,
    .donen_kitap > img.arka {
        width: 99.2%;
    }

    .donen_kitap > img.yan {
        width: 93%;
        height: 93%;
        margin-top: 8px; 
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-49px);
        transform-origin: left;
    }

    .uyari {
        width: 40%;
    }
    
    .uyari > p:nth-child(1) {
        font-size: 4.05vh;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vh;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vh;
    }
    
    .ozel_kuvvetler {
        height: 72vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(0.55);
    }

    .ozel_kuvvetler > div > a {
        font-size: 8vh;
        left: 28%;
    }

    .ozel_kuvvetler > div:nth-child(2) > a {
        top: 60%;
        left: 55%;
    }
    
    .hiyerarsi > img {
        height: 98%;
        width: 98%;
    }
    
    .aciklama > #sinif > div > span {
        font-size: 2.7vh;
    }

    .mesaj_paneli > span > .metin_alani {     
        font-size: 2.7vh;
        border-bottom: 2px solid #d9ba7a;
    }

    .satin_al > div > div > span {
        font-size: 5.25vh;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vh;
    }

    .buton,
    #simge_f,
    #simge_t,
    #simge_i,
    #simge_y {
        border: 0.2vh solid #acabab;
    }

    #ayar,
    #dil_tur,
    #dil_ing,
    #tema_eck,
    #tema_age {
        border: 0.2vh solid #d9ba7a;
    }

    .dil,
    .tema {
        border-left: 0.12vh solid #d9ba7a;
        border-right: 0.2vh solid #d9ba7a;
    }

    .tema {
        margin-top: -0.3vh;
    }
}


/* Yükseliği 599p ile 400p arasında olan ekranlardaki ayarlar*/
@media screen and (max-height: 599px) and (min-height: 400px) {
    ::-webkit-scrollbar {
        width: 1.8vh;
    }
    
    h1 {
        font-size: 5.1vh;
    }
    
    h2 {
        font-size: 4.05vh;
    }
    
    h3 {
        font-size: 3.6vh;
    }
    
    p {
        font-size: 3vh;
    }

    #dil > div {
        padding: 0.2vh 0;
    }
    
    .ana_sayfa > div > p {
        font-size: 5.5vh;
    }
    
    .ana_sayfa > div > span {
        font-size: 5.5vh;
    }
    
    .cizgi {
        font-size: 0.75vh;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.5vh;
    }

    .kitaplar {
        width: 75%;
    }

    .kitap {
        margin: 1% 0%;
    }

    .kitap > a > img {
        width: 55%;
        height: 55%;
    }

    .kitap > a:last-child {
        margin: 1% 0%;
        font-size: 3vh;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 189px;
        max-height: 300px;
        min-width: 189px;
        min-height: 300px;
        margin: 10vh 5%;
    }

    .donen_kitap {
        margin-left: 10%;
    }

    .on {
        transform: translateZ(41px);
    }

    .donen_kitap > img.on,
    .donen_kitap > img.arka {
        width: 99.2%;
    }

    .donen_kitap > img.yan {
        width: 93%;
        height: 93%;
        margin-top: 10px; 
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-69px);
        transform-origin: left;
    }

    .uyari {
        width: 40%;
    }
    
    .uyari > p:nth-child(1) {
        font-size: 4.05vh;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vh;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vh;
    }
    
    .ozel_kuvvetler {
        height: 72vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(0.8);
    }

    .ozel_kuvvetler > div > a {
        font-size: 6vh;
        left: 28%;
    }

    .ozel_kuvvetler > div:nth-child(2) > a {
        top: 60%;
        left: 57%;
    }
    
    .hiyerarsi > img {
        height: 98%;
        width: 98%;
    }

    .aciklama > #sinif > div > span {
        font-size: 2.7vh;
    }
    
    .mesaj_paneli > span > .metin_alani {      
        font-size: 2.7vh;
        border-bottom: 2px solid #d9ba7a;
    }

    .satin_al > div > div > span {
        font-size: 5.25vh;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vh;
    }

    .buton,
    #simge_f,
    #simge_t,
    #simge_i,
    #simge_y {
        border: 0.2vh solid #acabab;
    }

    #ayar,
    #dil_tur,
    #dil_ing,
    #tema_eck,
    #tema_age {
        border: 0.2vh solid #d9ba7a;
    }

    .dil,
    .tema {
        border-left: 0.12vh solid #d9ba7a;
        border-right: 0.2vh solid #d9ba7a;
    }

    .tema {
        margin-top: -0.3vh;
    }
}


/* Yükseliği 799p ile 600p arasında olan ekranlardaki ayarlar*/
@media screen and (max-height: 799px) and (min-height: 600px) {
    ::-webkit-scrollbar {
        width: 1.56vh;
    }
    
    h1 {
        font-size: 4.42vh;
    }
    
    h2 {
        font-size: 3.51vh;
    }
    
    h3 {
        font-size: 3.12vh;
    }
    
    p {
        font-size: 2.6vh;
    }

    #dil > div {
        padding: 0.15vh 0;
    }
    
    .ana_sayfa > div > p {
        font-size: 4.8vh;
    }
    
    .ana_sayfa > div > span {
        font-size: 4.8vh;
    }
    
    .cizgi {
        font-size: 0.6vh;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.2vh;
    }
    
    .kitaplar {
        width: 65%;
    }
    
    .kitap {
        margin: 1% 0%;
    }

    .kitap > a > img {
        width: 57%;
        height: 57%;
    }

    .kitap > a:last-child {
        margin: 2% 0%;
        font-size: 2.6vh;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 270px;
        max-height: 430px;
        min-width: 270px;
        min-height: 430px;
    }

    .on {
        transform: translateZ(65px);
    }

    .donen_kitap > img.on,
    .donen_kitap > img.arka {
        width: 99%;
    }

    .donen_kitap > img.yan {
        width: 93%;
        height: 93%;
        margin-top: 15px;
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-93px);
        transform-origin: left;
    }

    .uyari {
        width: 35%;
    }
    
    .uyari > p:nth-child(1) {
        font-size: 3.51vh;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.34vh;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 2.6vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.12vh;
    }

    .ozel_kuvvetler {
        height: 72vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.1);
    }

    .ozel_kuvvetler > div > a {
        font-size: 4.5vh;
        left: 27%;
    }

    .ozel_kuvvetler > div:nth-child(2) > a {
        top: 60%;
        left: 53%;
    }
    
    .hiyerarsi > img {
        height: 99%;
        width: 99%;
    }
    
    .aciklama > #sinif > div > span {
        font-size: 2.34vh;
    }

    .mesaj_paneli > span > .metin_alani {      
        font-size: 2.34vh;
        border-bottom: 3px solid #d9ba7a;
    }

    .satin_al > div > div > span {
        font-size: 4.2vh;
    }
    
    .satin_al > div > div > p {
        font-size: 3vh;
    }
    
    .buton,
    #simge_f,
    #simge_t,
    #simge_i,
    #simge_y {
        border: 0.2vh solid #acabab;
    }

    #ayar,
    #dil_tur,
    #dil_ing,
    #tema_eck,
    #tema_age {
        border: 0.2vh solid #d9ba7a;
    }

    .dil,
    .tema {
        border-left: 0.12vh solid #d9ba7a;
        border-right: 0.2vh solid #d9ba7a;
    }

    .tema {
        margin-top: -0.3vh;
    }
}


/* Yükseliği 900p ile 800p arasında olan ekranlardaki ayarlar*/
@media screen and (max-height: 900px) and (min-height: 800px) {
    ::-webkit-scrollbar {
        width: 1.44vh;
    }
    
    h1 {
        font-size: 4.08vh;
    }
    
    h2 {
        font-size: 3.24vh;
    }
    
    h3 {
        font-size: 2.88vh;
    }
    
    p {
        font-size: 2.4vh;
    }

    #dil > div {
        padding: 0.15vh 0;
    }
    
    .ana_sayfa > div > p {
        font-size: 4.6vh;
    }
    
    .ana_sayfa > div > span {
        font-size: 4.6vh;
    }
    
    .cizgi {
        font-size: 0.6vh;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4vh;
    }
    
    .kitap {
        margin: 0% 1%;
    }

    .kitap > a > img {
        width: 57%;
        height: 57%;
    }

    .kitap > a:last-child {
        margin: 2% 0%;
        font-size: 2.4vh;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 283px;
        max-height: 450px;
        min-width: 283px;
        min-height: 450px;
    }

    .on {
        transform: translateZ(67px);
    }

    .donen_kitap > img.on,
    .donen_kitap > img.arka {
        width: 99%;
    }

    .donen_kitap > img.yan {
        width: 93%;
        height: 93%;
        margin-top: 15px; 
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-98px);
        transform-origin: left;
    }

    .uyari {
        width: 35%;
    }
    
    .uyari > p:nth-child(1) {
        font-size: 3.24vh;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.16vh;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 2.4vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 2.88vh;
    }

    .ozel_kuvvetler {
        height: 72vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.3);
    }

    .ozel_kuvvetler > div > a {
        font-size: 3.9vh;
        left: 28%;
    }

    .ozel_kuvvetler > div:nth-child(2) > a {
        top: 60%;
        left: 52%;
    }
    
    .hiyerarsi > img {
        height: 99%;
        width: 99%;
    }

    .aciklama > #sinif > div > span {
        font-size: 2.16vh;
    }

    .mesaj_paneli > span > .metin_alani {
        font-size: 2.16vh;
        border-bottom: 3px solid #d9ba7a;
    }
    
    .satin_al > div > div > span {
        font-size: 4.2vh;
    }
    
    .satin_al > div > div > p {
        font-size: 3vh;
    }
}


/* Yükseliği 1440p ile 1080p arasında olan ekranlardaki ayarlar*/
@media screen and (max-height: 1440px) and (min-height: 1080px) {
    .kitap {
        margin: 0% 1%;
    }

    .kitap > a > img {
        width: 50%;
        height: 50%;
    }

    .kitap > a:last-child {
        margin: 4% 0%;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 440px;
        max-height: 700px;
        min-width: 440px;
        min-height: 700px;
    }

    .on {
        transform: translateZ(108px);
    }

    .donen_kitap > img.yan {
        width: 94.5%;
        height: 94%;
        margin-top:20px; 
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-154px);
        transform-origin: left;
    }

    .aileler > div > a {
        margin-top: 1.2vh;
        margin-bottom: 1.2vh;
    }
    
    .ozel_kuvvetler {
        height: 72vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.9);
    }

    .ozel_kuvvetler > div > a {
        font-size: 2.8vh;
    }
    
    .hiyerarsi > img {
        height: 98%;
        width: 98%;
    }

    .mesaj_paneli > span > .metin_alani {     
        border-bottom: 4px solid #d9ba7a;
    }

    .satin_al > div > div > div > div {
        border: 2px solid #acabab;
    }

    .tema {
        margin-top: -0.1vh;
    }
}


/* Yükseliği 2160p ile 1441p arasında olan ekranlardaki ayarlar*/
@media screen and (max-height: 2160px) and (min-height: 1441px) {
    .kitap {
        margin: 1% 10% 0;
    }

    .kitap > a > img {
        width: 80%;
        height: 80%;
    }

    .kitap > a:last-child {
        margin: 6% 0%;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 585px;
        max-height: 930px;
        min-width: 585px;
        min-height: 930px;
    }

    .on {
        transform: translateZ(141px);
    }

    .donen_kitap > img.on,
    .donen_kitap > img.arka {
        width: 99%;
    }

    .donen_kitap > img.yan {
        width: 94.5%;
        height: 93.5%;
        margin-top:31px; 
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-206px);
        transform-origin: left;
    }
    
    .aileler > div > a {
        margin-top: 1.2vh;
        margin-bottom: 1.2vh;
    }
    
    .ozel_kuvvetler {
        height: 70vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(2.9);
    }

    .ozel_kuvvetler > div > a {
        font-size: 1.8vh;
    }
    
    .hiyerarsi > img {
        height: 97%;
        width: 98%;
    }

    .mesaj_paneli > span > .metin_alani {        
        border-bottom: 5px solid #d9ba7a;
    }

    .satin_al > div > div > div > div {
        border: 3px solid #acabab;
    }

    .tema {
        margin-top: -0.1vh;
    }
}


/* Yükseliği 599p ile 400p arasında olan dikey ekranlardaki ayarlar*/
@media screen and (max-height: 599px) and (min-height: 400px) and (orientation: portrait) {  
    ::-webkit-scrollbar {
        width: 1.5vw;
    }
    
    h1 {
        font-size: 6vw;
    }
    
    h2 {
        font-size: 5vw;
    }
    
    h3 {
        font-size: 4.5vw;
    }
    
    p {
        font-size: 3.5vw;
    }
    
    #dil > div {
        padding: 0.2vh 0;
    }

    .ana_sayfa > div > p {
        font-size: 6vw;
    }

    .ana_sayfa > div > span {
        font-size: 6vw;
    }

    .cizgi {
        font-size: 0.75vw;
    }

    .ana_sayfa > div:nth-child(3) > p {
        font-size: 5vw;
    }

    .kitaplar {
        width: 95%;
    }

    .kitap > a > img {
        width: 60%;
        height: 60%;
    }

    .kitap > a:last-child {
        font-size: 3.5vw;
    }
    
    .ufkun_otesi > div:nth-child(2).alan {
        margin: 0vh 10%;
    }

    .uyari {
        width: 60%;
        border: 1px solid #be9754;
    }

    .uyari > p:nth-child(1) {
        font-size: 5vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 3vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3.5vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 4vw;
    }
    
    #pencere_kapat {
        font-size: 3.5vw;
    }
    
    .ozel_kuvvetler > div {
        transform: scale(0.6);
    }

    .ozel_kuvvetler > div > a {
        font-size: 6vh;
    }
    
    .aciklama > #sinif > div > span {
        font-size: 3vw;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 3vw;
    }

    .buton {
        width: 35%;
        margin: 9% 3% 0%;
        font-size: 4vw;
    }
    
    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -2vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -2vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: -2vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.8vw -2.9vw -0.8vw;
        width: 60%;
    }

    .d_r > a > img {
        width: 70%;
        margin: -0.4vw -2.2vw;
    }

    .amazon > a > img {
        width: 90%;
        margin: -0.4vw -4vw;
    }

    .idefix > a > img {
        width: 90%;
        margin: 0.2vw -4vw;
    }
}


/* Yükseliği 799p ile 600p arasında dikey olan ekranlardaki ayarlar*/
@media screen and (max-height: 799px) and (min-height: 600px) and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.5vw;
    }
    
    h1 {
        font-size: 6vw;
    }
    
    h2 {
        font-size: 5vw;
    }
    
    h3 {
        font-size: 4.5vw;
    }
    
    p {
        font-size: 3.5vw;
    }
    
    .ana_sayfa > div > p {
        font-size: 6vw;
    }
    
    .ana_sayfa > div > span {
        font-size: 6vw;
    }
    
    .cizgi {
        font-size: 0.75vw;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 5vw;
    }
    
    .kitap > a:last-child {
        font-size: 3.5vw;
    }
    
    .kitaplar {
        width: 95%;
    }

    .kitap {
        margin: 1% 0%;
    }

    .kitap > a > img {
        width: 65%;
        height: 65%;
    }

    .kitap > a:last-child {
        margin: 2% 0%;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 220px;
        max-height: 350px;
        min-width: 220px;
        min-height: 350px;
        margin: 0vh 10% 0vh;
    }

    .on {
        transform: translateZ(53px);
    }

    .donen_kitap > img.on,
    .donen_kitap > img.arka {
        width: 98.5%;
    }

    .donen_kitap > img.yan {
        width: 93%;
        height: 93%;
        margin-top: 12px; 
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-76px);
        transform-origin: left;
    }

    .uyari {
        width: 60%;
        border: 1px solid #be9754;
    }

    .uyari > p:nth-child(1) {
        font-size: 5vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 3vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3.5vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 4vw;
    }
    
    #pencere_kapat {
        font-size: 3.5vw;
    }
    
    .ozel_kuvvetler {
        height: 80vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(0.65);
    }

    .ozel_kuvvetler > div > a {
        font-size: 5vh;
    }
    
    .aciklama > #sinif > div > span {
        font-size: 3vw;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 3vw;
    }
    
    .buton {
        width: 35%;
        margin: 9% 3% 0%;
        font-size: 4vw;
    }

    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -1.5vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -1.5vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: -1.5vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.8vw -2.9vw -0.8vw;
        width: 60%;
    }

    .d_r > a > img {
        width: 70%;
        margin: -0.4vw -2.2vw;
    }

    .amazon > a > img {
        width: 90%;
        margin: -0.4vw -4vw;
    }

    .idefix > a > img {
        width: 90%;
        margin: 0.2vw -4vw;
    }

    .buton,
    #simge_f,
    #simge_t,
    #simge_i,
    #simge_y {
        border: 0.2vh solid #acabab;
    }

    #ayar,
    #dil_tur,
    #dil_ing,
    #tema_eck,
    #tema_age {
        border: 0.2vh solid #d9ba7a;
    }

    .dil,
    .tema {
        border-left: 0.12vh solid #d9ba7a;
        border-right: 0.2vh solid #d9ba7a;
    }
}


/* Yükseliği 900p ile 800p arasında dikey olan ekranlardaki ayarlar*/
@media screen and (max-height: 900px) and (min-height: 800px) and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.5vw;
    }
    
    h1 {
        font-size: 6vw;
    }
    
    h2 {
        font-size: 5vw;
    }
    
    h3 {
        font-size: 4.5vw;
    }
    
    p {
        font-size: 3.5vw;
    }
    
    .ana_sayfa > div > p {
        font-size: 6vw;
    }
    
    .ana_sayfa > div > span {
        font-size: 6vw;
    }
    
    .cizgi {
        font-size: 0.75vw;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 5vw;
    }
    
    .kitaplar {
        width: 95%;
    }

    .kitap > a > img {
        width: 60%;
        height: 60%;
    }

    .kitap > a:last-child {
        font-size: 3.5vw;
    }
    
    .ufkun_otesi > div:nth-child(2).alan {
        margin: 0vh 10% 0vh;
    }

    .uyari {
        width: 60%;
        border: 1px solid #be9754;
    }

    .uyari > p:nth-child(1) {
        font-size: 5vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 3vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3.5vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 4vw;
    }
    
    #pencere_kapat {
        font-size: 3.5vw;
    }
    
    .ozel_kuvvetler > div {
        transform: scale(0.8);
    }

    .ozel_kuvvetler > div > a {
        font-size: 3.8vh;
    }

    .aciklama > #sinif > div > span {
        font-size: 3vw;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 3vw;
    }
    
    .buton {
        width: 35%;
        margin: 9% 3% 0%;
        font-size: 4vw;
    }

    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -1.3vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -0.8vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: -0.5vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.8vw -2.9vw -0.8vw;
        width: 60%;
    }

    .d_r > a > img {
        width: 70%;
        margin: -0.4vw -2.2vw;
    }

    .amazon > a > img {
        width: 90%;
        margin: -0.4vw -4vw;
    }

    .idefix > a > img {
        width: 90%;
        margin: 0.2vw -4vw;
    }
}


/* Yükseliği 1440p ile 1080p arasında dikey olan ekranlardaki ayarlar*/
@media screen and (max-height: 1440px) and (min-height: 1080px) and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.8vw;
    }
    
    h1 {
        font-size: 5.1vw;
    }
    
    h2 {
        font-size: 4.05vw;
    }
    
    h3 {
        font-size: 3.6vw;
    }
    
    p {
        font-size: 3vw;
    }
    
    .ana_sayfa > div > p {
        font-size: 5.25vw;
    }
    
    .ana_sayfa > div > span {
        font-size: 5.25vw;
    }
    
    .cizgi {
        font-size: 0.75vw;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.35vw;
    }
    
    .kitaplar {
        width: 95%;
    }

    .kitap > a:last-child {
        font-size: 3vw;
    }
    
    .kitap > a > img {
        width: 60%;
        height: 60%;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 400px;
        max-height: 636px;
        min-width: 400px;
        min-height: 636px;
        margin: 0vh 10%;
    }

    .on {
        transform: translateZ(98px);
    }

    .yan {
        transform: rotateY(-90deg) translateX(-140px);
        transform-origin: left;
    }
    
    .uyari {
        width: 60%;
    }

    .uyari > p:nth-child(1) {
        font-size: 4.05vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vw;
    }
    
    #pencere_kapat {
        font-size: 3vw;
    }
    

    .ozel_kuvvetler {
        height: 72vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.25);
    }
    
    .aciklama > #sinif > div > span {
        font-size: 2.7vw;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 2.7vw;
    }
    
    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -1.2vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -0.2vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: 0.2vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.8vw -2.9vw -0.8vw;
        width: 60%;
    }

    .d_r > a > img {
        width: 90%;
        margin: -0.4vw -2.2vw;
    }

    .amazon > a > img {
        width: 110%;
        margin: -0.4vw -4vw;
    }

    .idefix > a > img {
        width: 110%;
        margin: 0.2vw -4vw;
    }
}


/* Yükseliği 1800p ile 1441p arasında dikey olan ekranlardaki ayarlar*/
@media screen and (max-height: 1800px) and (min-height: 1441px) and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.8vw;
    }
    
    h1 {
        font-size: 5.1vw;
    }
    
    h2 {
        font-size: 4.05vw;
    }
    
    h3 {
        font-size: 3.6vw;
    }
    
    p {
        font-size: 3vw;
    }
    
    .ana_sayfa > div > p {
        font-size: 5.25vw;
    }
    
    .ana_sayfa > div > span {
        font-size: 5.25vw;
    }
    
    .cizgi {
        font-size: 0.75vw;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.35vw;
    }
 
    .kitaplar {
        width: 95%;
    }
    
    .kitap {
        margin: 1% 10% 0;
    }

    .kitap > a > img {
        width: 90%;
        height: 90%;
    }

    .kitap > a:last-child {
        margin: 4% 0%;
        font-size: 3vw;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 500px;
        max-height: 795px;
        min-width: 500px;
        min-height: 795px;
        margin: 0vh 10%;
    }

    .on {
        transform: translateZ(121px);
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-175px);
        transform-origin: left;
    }

    .uyari {
        width: 60%;
    }
   
    .uyari > p:nth-child(1) {
        font-size: 4.05vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vw;
    }
    
    #pencere_kapat {
        font-size: 3vw;
    }
    
    .ozel_kuvvetler {
        height: 70vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.65);
    }

    .ozel_kuvvetler > div > a {
        font-size: 1.9vh;
    }

    
    .ozel_kuvvetler > div:nth-child(2) > a {
        left: 55%;
    }

    .aciklama > #sinif > div > span {
        font-size: 2.7vw;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 2.7vw;
    }
    
    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -1.2vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -0.2vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: 0.2vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.8vw -2.9vw -0.8vw;
        width: 60%;
    }

    .d_r > a > img {
        width: 90%;
        margin: -0.4vw -2.2vw;
    }

    .amazon > a > img {
        width: 110%;
        margin: -0.4vw -4vw;
    }

    .idefix > a > img {
        width: 110%;
        margin: 0.2vw -4vw;
    }
}

/* Yükseliği 2160p ile 1801p arasında dikey olan ekranlardaki ayarlar*/
@media screen and (max-height: 2160px) and (min-height: 1801px) and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.8vw;
    }
    
    h1 {
        font-size: 5.1vw;
    }
    
    h2 {
        font-size: 4.05vw;
    }
    
    h3 {
        font-size: 3.6vw;
    }
    
    p {
        font-size: 3vw;
    }
    
    .ana_sayfa > div > p {
        font-size: 5.25vw;
    }
    
    .ana_sayfa > div > span {
        font-size: 5.25vw;
    }
    
    .cizgi {
        font-size: 0.75vw;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.35vw;
    }
    
    .kitaplar {
        width: 95%;
    }
    
    .kitap {
        margin: 1% 10% 0;
    }

    .kitap > a > img {
        width: 95%;
        height: 95%;
    }

    .kitap > a:last-child {
        margin: 4% 0%;
        font-size: 3vw;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        max-width: 550px;
        max-height: 875px;
        min-width: 550px;
        min-height: 875px;
        margin: 0vh 10%;
    }

    .on {
        transform: translateZ(135px);
    }
    
    .yan {
        transform: rotateY(-90deg) translateX(-192px);
        transform-origin: left;
    }

    .uyari {
        width: 60%;
        border: 3px solid #be9754;
    }
    
    .uyari > p:nth-child(1) {
        font-size: 4.05vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vw;
    }
    
    #pencere_kapat {
        font-size: 3vw;
    }

    .ozel_kuvvetler {
        height: 75vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(1.9);
    }

    .ozel_kuvvetler > div > a {
        font-size: 1.7vh;
    }

    .ozel_kuvvetler > div:nth-child(2) > a {
        left: 52%;
    }

    .aciklama > #sinif > div > span {
        font-size: 2.7vw;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 2.7vw;
    }
    
    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -1.2vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -0.2vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: 0.2vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.5vw -2.9vw -0.8vw;
        width: 70%;
    }

    .d_r > a > img {
        width: 100%;
        margin: -0.7vw -2.2vw;
    }

    .amazon > a > img {
        width: 130%;
        margin: 0vw -4vw;
    }

    .idefix > a > img {
        width: 130%;
        margin: 0vw -4vw;
    }
}


/* Yükseliği 2161p den büyük dikey olan ekranlardaki ayarlar*/
@media screen and (min-height: 2161px) and (orientation: portrait) {
    ::-webkit-scrollbar {
        width: 1.8vw;
    }
    
    h1 {
        font-size: 5.1vw;
    }
    
    h2 {
        font-size: 4.05vw;
    }
    
    h3 {
        font-size: 3.6vw;
    }
    
    p {
        font-size: 3vw;
    }
    
    .ana_sayfa > div > p {
        font-size: 5.25vw;
    }
    
    .ana_sayfa > div > span {
        font-size: 5.25vw;
    }
    
    .cizgi {
        font-size: 0.75vw;
    }
    
    .ana_sayfa > div:nth-child(3) > p {
        font-size: 4.35vw;
    }
    
    .kitaplar {
        width: 95%;
    }

    .kitap {
        margin: 1% 10% 0;
    }

    .kitap > a > img {
        width: 100%;
        height: 100%;
    }

    .kitap > a:last-child {
        margin: 6% 0%;
        font-size: 3vw;
    }

    .ufkun_otesi > div:nth-child(2).alan {
        perspective: 2000px;
        max-width: 1000px;
        max-height: 1590px;
        min-width: 1000px;
        min-height: 1590px;
        margin: 0vh 10%;
    }

    .donen_kitap > img.yan {
        width: 94.5%;
        height: 94%;
        margin-top:42px;
    }

    .on {
        transform: translateZ(240px);
    }

    .yan {
        transform: rotateY(-90deg) translateX(-352px);
        transform-origin: left;
    }

    .uyari {
        width: 60%;
        border: 6px solid #be9754;
    }

    .uyari > p:nth-child(1) {
        font-size: 4.05vw;
    }
    
    .uyari > p:nth-child(2) {
        font-size: 2.7vw;
    }
    
    .uyari > p:nth-child(3) {
        font-size: 3vw;
    }    
    
    .uyari > p > a {
        margin: 1vh 3.2vh;
    }
    
    .degisim > a,
    .degisim_satin_al > a {
        font-size: 3.6vw;
    }
    
    #pencere_kapat {
        font-size: 3vw;
    }
    
    .ozel_kuvvetler {
        height: 77vh;
    }

    .ozel_kuvvetler > div {
        transform: scale(3.8);
    }

    .ozel_kuvvetler > div > a {
        font-size: 0.9vh;
    }

    .aciklama > #sinif > div > span {
        font-size: 2.7vw;
    }

    .mesaj_paneli > span > .metin_alani {     
        border-bottom: 8px solid #d9ba7a;
    }
    
    .mesaj_paneli > span > .metin_alani {
        font-size: 2.7vw;
    }
    
    .satin_al > div > div > span {
        font-size: 5.7vw;
    }
    
    .satin_al > div > div > p {
        font-size: 3.75vw;
    }
    
    .satin_al > div > div > div > div {
        border: 4px solid #acabab;
    }

    .satin_al > div > div > div > div {
        width: 9.5vw;
        height: 2.7vw;
        margin: 1vw;
        padding: 1.5vw 1.5vw;
    }

    .satin_al > div > div > div > div > a {
        display: block;
    }

    .rakuten_kobo > a {
        margin: -1.2vw;
        padding: 0vw 2vw;
    }

    .d_r > a {
        margin: -0.2vw;
        padding: 0vw 2vw;
    }

    .amazon > a,
    .idefix > a {
        margin: 0.2vw;
        padding: 0vw 1vw;
    }

    .rakuten_kobo > a > img {
        margin: 0.5vw -2.9vw -0.8vw;
        width: 70%;
    }

    .d_r > a > img {
        width: 100%;
        margin: -0.7vw -2.2vw;
    }

    .amazon > a > img {
        width: 130%;
        margin: 0vw -4vw;
    }

    .idefix > a > img {
        width: 130%;
        margin: 0vw -4vw;
    }
}