/* Hero Kısmı */
        .hero {
            position: relative;
            width: 100%;
            height: 380px;
        }

        
        .hero .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../img/c.webp') no-repeat center center/cover;
            background-size: cover;
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
            z-index: 0; /* Arka planda kalır */
        }

        .hero .foreground {
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../img/b.webp') no-repeat center center/contain;
            background-size: contain;
            z-index: 1; /* Ön planda kalır */
        }

        .hero img {
            max-width: 100px;
            height: auto;
        }
        body {
            background-color: #f4eef0; /* Arka plan rengini değiştir */
            font-family: 'Nunito', sans-serif;
        }
        .icon {
            width: 60px; /* İkon boyutu */
            height:60px; /* İkon boyutu */
            margin-right: 10px; /* Başlık ile ikon arasındaki mesafe */
        }

        .card-body {
            display: flex;
            align-items: center;
        }

        .card-title, .card-text {
            text-align: left; /* Başlık ve metni sola hizala */
        }

        .content-wrapper {
            display: flex;
            align-items: center;
        }

        .content-wrapper .icon {
            margin-right: 15px; /* İkon ile başlık arasındaki mesafe */
        }
        .social-media-buttons {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 2; /* Sosyal medya butonları ön planda */
        }

        .social-media-buttons a {
            width: 50px;
            font-size: 1.5rem;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            transition: background-color 0.3s;
        }

        .social-media-buttons a:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Center the book */
.panel__image.panel__image--book {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left:-60px;
}
.border-right-4 {
    border-right: 5px solid #000 !important; /* Sağ kenara 4px kalınlığında siyah sınır */
}

.border-bottom-4 {
    border-bottom: 5px solid #000 !important; /* Alt kenara 4px kalınlığında siyah sınır */
}

/* .product-panel--book .panel__image--book {
	position: absolute;
	max-width: 500px;
	top: calc(-5em - 5vw);
	right: 0;
}

.product-panel .panel__image {
	width: calc(30% + 2vw);
	-ms-flex-order: 1;
	order: 1;
} */

.article__content a:not(.btn):not(.toolbar-item) {
	color: #006fc6;
}

.product-panel--book .panel__image--book img {
	width: 100% !important;
}

.books__book__img {
	width: 100%;
	max-width: 20px;
	will-change: transform;
	transform-origin: 0 100%;
	transform: rotate(-10deg);
	transition: transform 0.3s ease-out;
}

.books__book__img:hover {
    transform: rotate(0);
}

.author__image-wrapper::before,
.books__book__image::before {
    display: block;
    content: "";
    height: 20%;
    width: 1000%;
    position: absolute;
    background-image: url('../img/5udcDlp.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 245px;
    left: 30%;
    right: 0;
    transition: all 0.2s ease-out;
    transform-origin: 30% 50%;
    pointer-events: none;
}

.books__book__image:hover {
    position: relative;
}
.btn-close {
z-index: 1060;
}
    .btn-number {
      margin: 5px;
      width: 60px;
    }

    /* Görsel koruma */
    .modal-img-wrapper {
      position: relative;
    }

    .modal-img {
      width: 100%;
      user-select: none;
      pointer-events: none;
    }

    .protect-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .modal-dialog {
      max-width: 600px;
    }

    /* Sağ tıklama engeli genel */
    .modal-content {
      user-select: none;
    }