/* Top İmage */

    .top-image-general {
        padding: 0 22px;
    }
    .top-image {
        margin-top: 80px;
        padding: 10px 10px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        border-radius: 8px;
    }
    .top-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-height: 500px;
        border-radius: 8px;
    }
    
    /* Article Section */

    :root {
        --item-spacing: 2vh;
        --line-color: rgba(0, 0, 0, 0.1);
        --transition-timing: 0.25s;
    }
    .article-container {
        width: 100%;
        max-width: 800px;
        margin: 2rem auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        margin-top: 40px;
    }

    .article-content {
        padding: 2rem;
    }
    .article-content h2 {
        color: #e50040;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
    }
    .compact-accordion {
        width: 100%;
        max-width: 800px;
        margin: 1rem auto;
    }

    .accordion-item {
        margin-bottom: var(--item-spacing);
        position: relative;
        transition: all var(--transition-timing) ease;
    }

    .accordion-header {
        padding: 0.75rem 2rem;
        cursor: pointer;
        position: relative;
    }

    .accordion-header::before,
    .accordion-header::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        transition: opacity var(--transition-timing);
    }


    .header-line {
        border: 0;
        border-top: 2px solid black;
        opacity: 0.4;
        margin: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        pointer-events: none;
    }

    .header-line:last-child {
        top: auto;
        bottom: 0;
    }

    .accordion-header::before {
        top: 0;
    }

    .accordion-header::after {
        bottom: 0;
    }

    .accordion-item.active .accordion-header::after {
        opacity: 0;
    }

    .accordion-title {
        margin: 0;
        font-weight: 600;
        position: relative;
        padding-right: 30px;
        font-size: 18px;
    }
    .accordion-title:hover {
        color: #e50040;
    }

    .toggle-icon {
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        transition: transform var(--transition-timing);
    }

    .accordion-item.active .toggle-icon {
        transform: translateY(-50%) rotate(45deg);
    }

    .accordion-content {
        padding: 0 2rem;
        max-height: 0;
        overflow: hidden;
        transition: 
            max-height var(--transition-timing),
            padding var(--transition-timing);
    }

    .accordion-item.active .accordion-content {
        max-height: 2000px;
        padding: 0.75rem 2rem 1.5rem;
    }
    .accordion-content img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding: 15px 0;
    }
    .accordion-content p {
        text-align: justify;
    }

    @media (max-width: 768px) {
        .article-container,
        .compact-accordion {
            width: calc(100% - 2rem);
        }

        .accordion-header {
            padding: 0.75rem 1.5rem;
        }

        .accordion-content {
            padding: 0 1.5rem;
        }

        .accordion-item.active .accordion-content {
            padding: 0.75rem 1.5rem 1.25rem;
        }
    }