main.book-main{
    width: 70%;
    min-height: 100vh;
    margin:  auto;
		display: flex;
		flex-direction: column;
		padding: 40px 0;
}

p.book-title{
padding: 30px;
border: 2px solid var(--line-color);
border-radius: 5px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
margin-bottom:20px;
	text-align: center;
}

section.library{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

ul.book{
    width: 65%;
    height: 35vh;
  	margin-right: 10px;
		display: flex;
		flex-direction: column;
}

.book-content{
    width: 100%;
    height: 30vh;
    display: flex;
    gap: 10px;
}

img.cover{
	height: 30vh;
  border-radius: 5px;
}

.book-text{
    width: 80%;
    height: 30vh;
}

.book-btns{
    width: 100%;
    display: flex;
    justify-content: flex-end;
		gap: 10px;
	border-bottom: 1px solid black;
}

.book-btn{
		border-radius: 5px;
		background-color: var(--box-color);
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    transition: 100ms;
    color: var(--text-color);
		padding: 5px 20px;
}



























/* kitap menüsü */

ul.book-menu{
    text-align: center;
    width: 35%;
    padding: 20px;
    border-radius: 10px;
		background-color: var(--box-color);
		box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

ul.book-menu  li{
padding: 10px;
}

ul.book-menu li a{
display: block;
}

ul.book-menu li:hover{
background-color: var(--main-color);
}

ul.book-menu .title-sm{
text-align: center;
}

/* kitap menüsü */ 







@media (min-width: 1024px) {
        main.book-main {
            width: 100%; /* Genişliği ekranın %90'ı yap */
            max-width: 1200px; /* İsteğe bağlı maksimum genişlik (örneğin) */
        }
    }
@media(max-width:600px){
	main.book-main{
		width:100%;
		padding: 10px;
	}
	section.library{
		flex-direction: column-reverse;
	}
	ul.book{
		width: 100%;
	}
	ul.book-menu{
		width:100%;
		margin-bottom: 40px;
	}
	.book-text{
		overflow: scroll;
	}
}