body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1.5rem 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

header p {
    font-size: 1.1rem;
}

main {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.project {
    border-bottom: 1px solid #eee;
    padding: 2rem 1rem; /* Adjusted padding */
    margin-bottom: 2rem;
    /* text-align: center;  Remove general text-align */
    display: flex; /* Enable Flexbox */
    align-items: center; /* Vertically align items in the middle */
    gap: 2rem; /* Add space between image and content */
}

/* Alternate layout for even numbered projects */
.project:nth-child(even) {
    flex-direction: row-reverse; /* Reverse the order for even items */
}

.project:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.project-image {
    flex: 1; /* Assign flex space */
    text-align: center; /* Center image within its container */
    position: relative; /* Needed for absolute positioning of child */
    overflow: hidden; /* Hide overflowing parts of the text span */
}

/* Style for the 'Click to enlarge' text */
.enlarge-text {
    position: absolute;
    bottom: 5px; /* Position near the bottom (adjust as needed) */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: #fff;
    text-align: center;
    padding: 8px 5px;
    font-size: 0.9rem;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition */
    pointer-events: none; /* Prevent text from interfering with image click */
}

/* Show text on hover over the image container (link) */
.project-image a:hover .enlarge-text {
    opacity: 1;
}

.project-content {
    flex: 1; /* Assign flex space */
    text-align: left; /* Align text content to the left */
}

.project h2 {
    color: #333;
    margin-top: 0;
    text-align: center; /* Center the heading specifically */
}

.project img {
    max-width: 100%; /* Max width relative to its container */
    /* height: auto; Already default */
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* display: block; Not needed with flex parent */
    /* margin-left: auto; Not needed */
    /* margin-right: auto; Not needed */
}

.project p {
    line-height: 1.6; /* Adjusted back slightly */
    margin-bottom: 0.8rem; /* Smaller margin between paragraphs */
    padding: 10px 15px; /* Adjusted padding */
    /* text-align: left; Set on project-content */
    background-color: #f9f9f9;
    border-left: 4px solid #007bff;
    max-width: none; /* Remove max-width constraint here */
    margin-left: 0; /* Remove auto margin */
    margin-right: 0; /* Remove auto margin */
    font-size: 1rem; /* Adjusted font size */
}

.links {
    margin-top: 1.5rem; /* Increased top margin */
    text-align: center; /* Center the buttons */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px 10px; /* Adjusted margin */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.project-price {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.4rem; /* Larger font for price */
    font-weight: bold;
    color: #dc3545; /* Red color for price */
}

.demo-link {
    background-color: #28a745; /* Green */
}

.demo-link:hover {
    background-color: #218838;
}

.admin-link {
    background-color: #007bff; /* Blue */
}

.admin-link:hover {
    background-color: #0056b3;
}

footer {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
    background-color: #333;
    color: #aaa;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    .project {
        flex-direction: column; /* Stack items vertically on small screens */
        text-align: center; /* Center text when stacked */
    }

    /* Ensure correct order regardless of original direction */
    .project:nth-child(even) {
        flex-direction: column;
    }

    .project-content {
        text-align: center; /* Center content text on small screens */
    }

    .project p {
        text-align: left; /* Keep description text left-aligned */
        margin-left: auto;
        margin-right: auto;
        max-width: 90%; /* Limit width slightly */
    }

    .project img {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .btn {
        display: inline-block; /* Adjust back for better centering */
        margin: 10px 5px;
        /* width: fit-content; Not needed with inline-block */
    }

    .project-price {
        font-size: 1.3rem;
    }
}

/* WhatsApp Button Styles */
/* Sabit buton stilleri kaldırıldı */

/* Styles for the inline WhatsApp link/button */
.whatsapp-link-inline {
    background-color: #25D366; /* WhatsApp Green */
    color: #fff;
}

.whatsapp-link-inline:hover {
    background-color: #128C7E; /* Darker WhatsApp Green on hover */
    color: #fff;
}

/* Optional: Adjust icon size and spacing if needed */
.whatsapp-link-inline i {
    margin-right: 5px; /* Add space between icon and text */
    font-size: 1.1em; /* Slightly larger icon */
    vertical-align: middle; /* Align icon vertically */
}

/* View Counter Styling */
.view-counter {
    text-align: center;
    margin-bottom: 10px;
    color: #ddd;
}

.view-counter p {
    font-size: 0.9rem;
    margin: 5px 0;
}

.view-counter i {
    margin-right: 5px;
    color: #4a90e2;
}

#canli_demo_count, #admin_demo_count {
    font-weight: bold;
    color: #fff;
}

.stats-link {
    color: #4a90e2;
    text-decoration: none;
    font-size: 0.9rem;
}

.stats-link:hover {
    text-decoration: underline;
}