@media screen and (min-width: 2000px) { html { font-size: 1.4px; } }
@media screen and (min-width: 1500px) and (max-width: 2000px) { html { font-size: 1.3px; } }
@media screen and (min-width: 1100px) and (max-width: 1500px) { html { font-size: 1.2px; } }
@media screen and (min-width: 700px) and (max-width: 1100px) { html { font-size: 1.1px; } }
@media screen and (min-width: 350px) and (max-width: 700px) { html { font-size: 1px; } }
@media screen and (min-width: 226px) and (max-width: 350px) { html { font-size: 0.7px; } }
@media screen and (min-width: 0px) and (max-width: 226px) { html { font-size: 0.3px; } }


* { margin: 0; box-sizing: border-box; color: white; text-decoration: none;}

body { margin: 0 auto;font-family: "Roboto", sans-serif; font-weight: 400;width: 100%;}

.ust-alt-header{
height:60rem;
}

.header-ici{
display:flex;
justify-content:space-between;
max-width:650rem;
width:100%;
padding-left:10rem;
padding-right:10rem;
align-items:center;
}

.ust-header{
position:fixed;
background: #142952;
display: flex;
align-items: center;
justify-content:center;
left: 0;
height: 60rem;
width: 100%;
z-index: 1;}

.kitap-adi{

display: -webkit-box; 
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;
overflow: hidden; 
text-overflow: ellipsis; 
font-size: 15rem; 
line-height: 25rem;
margin-right:30rem;
}


.alt-header{
position:fixed;
background: #142952;
display: flex;
align-items: center;
justify-content:center;
left: 0;
bottom:0;
height: 60rem;
width: 100vw;
z-index: 1000;}


.alt-header-button{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background: none;
border: none;
padding: 0;
box-shadow: none;
width:50rem;
height:60rem;

}

#alt-header-button-kitaplarim{
background: rgb(10,33,54);
width:100rem;
height:60rem;
border: 0.1rem solid gray;
border-bottom:0;
}

#kitaplarimbutonadi{
position:fixed;
bottom:60rem;
height:20rem;
font-size:8rem;
color:white;
border: 0.1rem solid gray;
border-bottom:0;
width:100rem;
background: rgb(10,33,54);
display:flex;
justify-content:center;
align-items:center;
z-index:2;
}

.alt-header-button-alti-span{
white-space:nowrap;
display:flex;
width:50rem;
height:60rem;
align-items:center;
justify-content:center;
flex-direction:column;
}

.alt-header-button-alti-yazi{
    font-size:8rem;
    margin-top:5rem;
}

.alt-header-icon{
height:30rem;
width:30rem;
}

.alt-header-icon-a{
height:30rem;
width:30rem;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

.alt-header-icon-span{
    
    display:flex;
    flex-direction:column;
}







.menu-div-ici-link-foto-span{
    height:45rem;
    width:45rem;
    display:flex;
    align-items:center;
    justify-content:center;
    
}

    
   .menu-ici-kitap-kapak-fotografi-span{
       height:150rem;
       width:102rem;
       border:0.1rem solid gray;
    display:flex;
    align-items:center;
    justify-content:center;
       
       
   }
   
   .alt-header-icon-span{
     height:30rem;
    width:30rem;
    display:flex;
    align-items:center;
    justify-content:center;
   }
   
   .ust-header-icon-span{
       height:40rem;
       display:flex;
       align-items:center;
       
       
   }
   
   
      .ust-header-icon-span-a{
       height:40rem;
       display:flex;
       align-items:center;
       gap:10rem;
       
       
   }
   
   
    .spin-effect{
       border:0.1rem gray solid;
   }
   
   
   
.spin-effect:after{
content: "";
  position: absolute;
  border: 2rem solid rgba(0,0,0,.2);
  border-top-color: white;
  border-radius: 50%;
color:white;
  width: 20rem;
  height: 20rem;
animation: spin 1s linear infinite;
   }
   
   
@keyframes spin {
  to { transform: rotate(360deg); }
}



.spin-effect.loaded::after {
  display: none;
}



   
   .hktnerdgncm-span{
       height:60rem;
       width:120rem;
       display:flex;
       align-items:center;
       justify-content:center;
   
   }
   
   
   .menu-div-ici-sosyal-medya-ikon-span{
       
       
   }
    
    
    
    
.fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}

.fade.is-visible {
  opacity: 1;
  visibility: visible;
}





#sayfanumarasi { font-size: 20rem; height:30rem; position: relative; font-weight:200; display: flex;align-items: center;justify-content: center;min-width:40rem;background:white;color: black;}

#toplam-sayfa{
    font-size:8rem;
    margin-top:5rem;
}

.count2{
    font-size:8rem;
}

.ust-header-button{
display:flex;
align-items:center;
justify-content:center;
background: none;
padding: 0;
box-shadow: none;
width:90rem;
height:40rem;
border:0;
}

.ust-header-button-span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}



.neon-btn{
position: relative; 
font-weight: bold; 
text-transform: uppercase;
color: white; 
text-decoration: none; 
background: black;
border-radius: 10rem; overflow: hidden;
display: flex;
align-items: center;
z-index: 40000000000;
min-width:max-content;
padding-left:10rem;
padding-right:10rem;
}

.neon-btn::before {
    content: ""; position: absolute; inset: -2rem;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffff, #0000ff, #7a00ff, #ff00ff, #ff0000);
    background-size: 400%; border-radius: 12rem; z-index: -1;
    animation: borderAnimation 7s linear infinite;

}




.neon-btn::after {
    content: ""; position: absolute; inset: 2rem;
    background: black; border-radius: 8rem; z-index: -1;
   
}
@keyframes borderAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
























#ust-icon {height:25rem;width:25rem;border-radius:30rem;flex: initial;} 


#mesajat724{
font-size:10rem;
    height:auto;
    white-space:nowrap;
    width:45rem;
}


.kitaplarim{
    padding:0;
    width:100%;
}



.hidden-div { position: fixed; height: calc(100% - 60rem); width: 100%; display: none; background: black; justify-content: center; align-items: center; top: 0; left: 0; z-index: 5000; box-sizing: border-box; overflow: scroll;overflow-x: hidden;
}

.divici { height: 100%; width: 100%; max-width: 650rem; padding: 0 10rem;  margin: 0 auto;  }

#div3{
    z-index:1;
}

.divici-div3{
    
min-height: 100%; width: 100%; max-width: 650rem; display: flex; flex-direction: column; padding: 0 10rem; position: absolute; margin: 0 auto; left: 0; right: 0; align-items:center;
    
    
}




#kitabin-konusu { display: flex; line-height: 80rem;background: #142952; align-items: center; justify-content: center; margin: 10rem 0 30rem; padding: 0;}
.yazi{
    
     font-size: 16rem; font-weight: 500; line-height: 180%;
}



.menu-div-ici-sosyal-medya-ikon{
    height:35rem;
    width:35rem;
    
    
}

.menu-div-ici-link-foto{
    height:45rem;
    width:45rem;
    
    
}


.menudiviciust { display: flex; flex-direction: column; min-height: 130rem; justify-content: space-between; border-bottom: 0.1rem solid gray; padding: 5rem 0 5rem;width:100%;max-width:650rem; gap:20rem;}
.menudivici { display: flex; height: 60rem; justify-content: space-between; align-items: center; }
.menudivici a { font-size: 8rem; display: flex; flex-direction: column; align-items: center; color: white; text-decoration: none; width:50rem;height: 60rem;}

#hktnerdgncm { width: 120rem; height: 60rem; }

.ikonlar-div{
    width:100%;
    height:60rem;
    display:flex;
    align-items:center;
    justify-content:center;
    
    
}

.menu-ici-kitap-kapak-fotografi{
    width: 102rem; height: 150rem; border: 0.1rem solid gray;
    
    
}



#bilgilendirme { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bilgilendirme{
display: flex; align-items: center; justify-content: space-between; width: 100%}




.kitap-container{
    margin-top:20rem;
    display:flex;
    flex-direction:column;
    row-gap:10rem;
}

.kitap-container-span{
    min-height:250rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.kitap-container-span-alti{
display:flex;
flex-direction:column;
width:100%;
}


.kitap-container-ust{
    display:flex;
    justify-content:space-between;
    align-items:center;
      flex-wrap: wrap;
  column-gap: 5rem;
  row-gap: 0;       
}



.kitap-adi-gizli-div{
font-size:17rem;
line-height:25rem;
display:flex;
align-items:center;
max-width:50%;
min-width:30%;
color:dodgerblue;
}


.bilgi-kutu { display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: 10rem; min-height: 50rem; width:30rem; color: white; text-align: center; row-gap:8rem;}
.bilgi-kutu span:first-of-type { color: white; display: flex; align-items: center; border: 1rem solid gray; justify-content: center; background: gray; height: 35rem; min-width: 35rem; font-size: 15rem; font-weight: 700; }











.kitap-container-alt{
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    align-items:center;
     row-gap:10rem;
     margin-top:10rem;
    
}

.kitap-container-yazi{
    color:white;
    font-size:15rem;
    line-height:180%;

}



.btn { background-color: #007BFF; color: white; border: none; cursor: pointer; height: 50rem; width: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15rem; font-weight: 500; border: 1rem solid gray; margin:0 auto;}





#btnbb{background: red;}

.telif-hakki-blok{
    
    display:flex;
    align-items:center;
    row-gap:10rem;
    flex-direction:column;
    margin-top:30rem;
    width:100%;
    min-height:50rem;
}

#telif-ustu{
    color:red;
}
#telif{
display: flex;
justify-content: center;
color:#478ac9; 
}


.main-blok{
display:flex;
width:100%;
max-width:650rem;
margin: 0 auto;
justify-content:center;
padding-right:10rem;
padding-left:10rem;
}

.icerik-div{
    
    min-height:400rem;
}



/* Yükleme başladığında eklenecek sınıf */
.icerik-div.is-loading {
    min-height: 150px; /* İçerik gelene kadar alanın çökmemesi için */
    background: linear-gradient(90deg, #f9f9f9 25%, #ececec 50%, #f9f9f9 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}











.icerik-article{
width:650rem;
max-width:100%;
display:flex;
flex-direction:column;
margin-bottom:80rem;
    
}

.h1-kitap{
font-size: 50rem; 
color: black;
margin-top:10rem;
margin-bottom:10rem;
}

.h1-kitap-alti-yazi{
font-size: 25rem;
margin-top: 15rem;
margin-bottom: 15rem;
color:black;
line-height:150%;
    
}

.h1-kitap-alti-foto{
height:400rem;
width:300rem; 
border:1.5rem solid gray;
}

.h1-kitap-alti-foto-ustu-kitap-adi{
font-size:16rem;
margin-top:10rem;
margin-bottom:10rem;
color:black;
line-height:150%;
}

.h2-kitap{
font-size: 25rem;
border-bottom: 2rem solid #8B0000;
padding-bottom: 10rem;
margin-top: 25rem;
margin-bottom: 25rem;
color:black;
}

.h2-kitap-alti-yazi{
font-size: 15rem;
color:black;
font-weight:500;
line-height:150%;
    
}




#kitap {color: black; display: block; flex-direction: column; align-items: center;margin-top:22rem;margin-bottom:22rem;}



.baslangic-noktasi-div{
font-size: 25rem;
padding-bottom: 10rem;
padding-top:10rem;
margin-top: 25rem;
background-color:black;
display:flex;
align-items:center;
justify-content:center;
width:100%;

}

.baslangic-noktasi{
    
color: white; 
font-size: 25rem;
margin-top: 25rem;
margin-bottom: 25rem;
background-color:black;
display:flex;
align-items:center;
justify-content:center;

}

.icerik-article-ust{
    
    display:flex;
    flex-direction:column;
    align-items:center;
}

.yazi-strong{
    
    color:black;
}


.ilkreklam {display:block;height: auto; max-height:428rem;margin: 35rem 0 35rem 0;width:100%;max-width:100%;overflow:hidden;border:0.1rem solid gray;} 




.kitap-ici-kapak-fotosu{width:300rem;height:500rem;max-width:100%;}
#kader-seni-cagiriyor{color:red;text-align:center;}
.he-kitap-ici{display:grid;color:black;}
.sunar-sundu{color:red;text-align:start;}
.kitapicispanayraci{color:red;display:block;text-align:center;margin:15rem 0 15rem 0;}
.kitapiciyazirenkli{color:red;}
.summary-baslik{color:black;font-size:16rem;}


#kdggblok {height: 35%; max-height: 250rem; min-height: 200rem; justify-content: space-between; z-index: 1;} 
.buton-yazi {min-height: 100rem; width: 70%; max-width: 600rem; border: 1rem solid gray; background: black; display: flex; align-items: center; justify-content: center; letter-spacing: 5rem; font-size: 25rem; font-weight: 200;} 
#anasayfavideo {width: 100%; min-height: 300rem; height: calc(100vh - 120rem); opacity: 0.6; background: black; object-fit: fill; position: absolute;} 
#kdgg {font-size: 25rem; text-align: center;} 
.vh100yazi {font-size: 40rem; line-height: 150%; font-weight: 300; flex-direction: column; height: calc(100vh - 120rem); color: black; display: flex; justify-content: center; align-items: center; text-align:center;} 
#sunar {color: red; margin-right: auto;} 



.menu-div-ici-ust-a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.menu-div-ici-ust-a-alti-span{
    
    display:flex;
     flex-direction:column;
    align-items:center;
    justify-content:center;
}

.menu-div-ici-ust-a-alti-yazi{
    
    height:15rem;
    display:flex;
    align-items:center;
}


.menu-div-ici-ust-ikonlar-div-span{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
}


.hidden-div-2-span{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:20%;
}

.hidden-div-2-span-alti{
    display:flex;
    width:100%;
    margin-bottom:auto;
    -content:center;
    flex-direction:column;
    
}

.menu-ici-telif-a{
    
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:20rem;
    margin-top:50rem;
    margin-bottom:70rem;
}