/* /desteklerimiz/desteklerimiz.css */

/* General styles for the page content */
.destek-gallery {
    max-width: 1200px; /* Adjust as needed */
    margin: 2rem auto; /* Center the content with space top/bottom */
    padding: 1rem 1.5rem; /* Padding inside the container */
    box-sizing: border-box; /* Include padding in width calculation */
}

.destek-gallery h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: #333; /* Dark grey color */
    font-size: 2em; /* Adjust size */
}

/* Style for the new slogan text */
.destek-gallery .slogan-text {
    text-align: center;
    margin-bottom: 1.5rem; /* Space below slogan */
    color: #555; /* Slightly darker than intro text */
    font-size: 1.2em; /* Slightly larger */
    font-weight: 500; /* Medium weight */
    line-height: 1.6;
    max-width: 700px; /* Limit width */
    margin-left: auto;
    margin-right: auto;
}

/* Style for the main introductory text */
.destek-gallery .intro-text {
    text-align: center;
    margin-bottom: 2.5rem; /* Space below intro */
    color: #666; /* Lighter grey */
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 800px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
}

/* Video grid container */
.video-container {
    display: grid;
    /* Creates columns that are at least 300px wide, fitting as many as possible */
    /* Adjust minmax if 3 columns feel too tight for 6 videos */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem; /* Space between grid items */
}

/* Individual video item styling */
.video-item {
    background-color: #ffffff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow: hidden; /* Keep video corners rounded */
    display: flex;
    flex-direction: column; /* Stack video and description */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.video-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Styling the HTML5 video player */
.video-item video {
    display: block; /* Remove extra space below */
    width: 100%; /* Make video fill container width */
    height: auto; /* Maintain aspect ratio */
    background-color: #000; /* Black background for loading/controls */
    border-bottom: 1px solid #eee; /* Add a subtle line if description is hidden */
}

/* Video description area */
.video-item-description {
    padding: 1rem 1.2rem; /* Padding inside the description box */
    text-align: left; /* Align text to the left */
    flex-grow: 1; /* Allow description to take remaining space if needed */
    background-color: #f9f9f9; /* Very light grey background for description */
    border-top: 1px solid #eee; /* Line separating video from text */
}

/* Only add border-top if the description exists */
.video-item video + .video-item-description {
    border-top: 1px solid #eee;
}
/* Remove bottom border from video if description exists */
.video-item video:has(+ .video-item-description) {
    border-bottom: none;
}


.video-item-description h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.15em; /* Adjusted Title size */
    color: #444;
    font-weight: 600;
}

.video-item-description p {
    font-size: 0.9em; /* Adjusted Description text size */
    color: #777; /* Grey text color */
    line-height: 1.5;
    margin-bottom: 0; /* Remove default bottom margin */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .video-container {
        /* Maybe force 2 columns on tablets */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}


@media (max-width: 768px) {
    .destek-gallery {
        padding: 1rem;
    }

    .destek-gallery h1 {
        font-size: 1.8em;
    }

     .destek-gallery .slogan-text {
        font-size: 1.1em;
    }

    .destek-gallery .intro-text {
        font-size: 1em;
        margin-bottom: 2rem;
    }

    .video-container {
        /* Adjust minmax for smaller screens if needed, or keep as is */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .video-container {
        /* Stack videos in a single column on very small screens */
        grid-template-columns: 1fr;
    }

     .destek-gallery .slogan-text {
        font-size: 1em;
    }

    .video-item-description h3 {
        font-size: 1.1em;
    }

    .video-item-description p {
        font-size: 0.9em;
    }
}

/* Styling for the shopping button container */
.shop-button-container {
    margin: 2rem auto;
    text-align: center;
    }
    
    
    .shop-button {
    display: inline-block;
    background-color: #ff6b6b; 
    color: #fff;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    }
    
    .shop-button:hover,
    .shop-button:focus {
    background-color: #ff4c4c; /* Slightly darker for hover effect */
    transform: translateY(-3px);
    }