section {
    padding: 2% 15%;
}


.blogDetailContainer {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2%;
}

.contentContainer {
    display: flex;
    flex-direction: column;
    border-right: 2px solid var(--lmc-soft-orange);
    padding-right: 15px;
    margin-bottom: 5%;
}

    .contentContainer img {
        max-width: 100%;
        height: auto;
    }

    .contentContainer > h1 {
        margin: 3% 0;
        text-align: center;
    }

/* CKEditor hizalama sınıfları için özel stiller */
.image-style-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image-style-align-left {
    float: left;
    margin-right: 1em;
}

.image-style-align-right {
    float: right;
    margin-left: 1em;
}

.relevantContainer {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20%;
}

    .relevantContainer > a {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 10px 5px;
        ;
        background-color: white;
        transition: transform 0.4s ease;
        border-bottom: 2px solid var(--lmc-soft-orange);
    }

        .relevantContainer > a:hover {
            transform: scale(1.05);
        }

        .relevantContainer > a > img {
            width: 100%;
            height: auto;
            object-fit: cover;
            box-shadow: 0 5px 20px 5px gray;
        }

        .relevantContainer > a > h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .relevantContainer > a > p {
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 0.95rem;
            color: #444;
            flex-grow: 1;
        }

/*#region Container animations */
.animationBox {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

    .animationBox.show {
        opacity: 1 !important;
        transform: translateY(0);
    }
/*#endregion*/
/*#region Responsive*/
@media (max-width: 480px) {
    .blogDetailContainer {
        display: flex !important;
        flex-direction: column !important;
        gap: 2% !important;
    }

    .contentContainer {
        border-right: none !important;
        padding-right: 0 !important;
    }

    section {
        padding: 2% 4% !important;
    }

    .headreContainer > h1 {
        position: absolute !important;
        font-size: medium !important;
        border-radius: 20px !important;
        padding: 3% !important;
        background-color: #ebe7da99 !important;
        font-weight: bold !important;
        width: 60% !important;
    }
}

@media (max-width: 820px) {
    .blogDetailContainer {
        display: flex;
        flex-direction: column;
        gap: 2%;
    }
    .contentContainer {
        border-right: none !important;
        padding-right: 0 !important;
    }
    .relevantContainer {
        padding: 0 15%;
    }
}
@media (max-width: 1024px) {
    section {
        padding: 2% 5%;
    }   
}
/*#endregion*/