/* Dark Theme for Private Projects Page */
.private-projects-page {
    background-color: var(--color-bg-dark);
}

/* Private Projects Masonry (Flex Z-Pattern) Layout */
.projects-grid-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: var(--header-height);
    padding-bottom: 0;
    background-color: var(--color-bg-dark);
}

.masonry-column {
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: stretch;
    background-color: var(--color-bg-dark);
}

.projects-grid-section+.footer-section {
    padding-top: 0;
}

.grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 250px;
    height: auto;
    margin-bottom: 0;
    overflow: hidden;
    color: var(--color-text-light);
    text-decoration: none;
    background-color: var(--color-bg-dark);
}

.grid-image {
    display: block;
    width: 100%;
    flex: 1;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    /* Görsel kendi orijinal oranında büyür veya küçülür, kesilmez */
    transform: scale(1);
    transition: transform var(--transition-slow);
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, var(--color-overlay-dark), var(--color-overlay-dark));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    /* Keeping specific transition as it was different in original */
}

.grid-item:hover .grid-overlay {
    opacity: 0.9;
}

.grid-content {
    position: absolute;
    /* Görsel alanın (flow) dışına çıkar, böylece ekstra boşluk veya çökme yaratmaz */
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(calc(-50% + 20px));
    /* Dikey eksende kusursuz merkezleme ve baştaki hafif aşağı kayma animasyonu */
    z-index: 10;
    padding: 0 20px;
    opacity: 0;
    text-align: center;
    text-shadow: var(--shadow-text);
    cursor: text;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    transition: all 0.4s ease;
}

.grid-title {
    margin-bottom: var(--spacing-xxs);
    font-family: var(--font-primary);
    font-size: clamp(24px, 2.5vw, var(--font-size-display));
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

.grid-subtitle {
    opacity: 0.8;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
}

/* Hover Effects */
.grid-item:hover .grid-image {
    transform: scale(1.05);
    /* Hover animasyonu IMG etiketi üzerinde çalışır */
}

.grid-item:hover .grid-overlay {
    opacity: 1;
}

.grid-item:hover .grid-content {
    opacity: 1;
    transform: translateY(-50%);
    /* Hover olduğunda yine tam merkezde kalır */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .projects-grid-section {
        flex-direction: column;
        /* Mobilde kolonlar alt alta geçer */
    }

    .masonry-column {
        width: 100%;
        display: contents;
    }

    .grid-item {
        /* Yükseklik auto olduğu için burada ekstra ayara gerek kalmaz */
        margin-bottom: 0;
    }

    .grid-content {
        opacity: 1;
        /* Always show text on mobile since hover isn't reliable */
        transform: translateY(-50%);
    }

    .grid-overlay {
        opacity: 0.3;
        /* Slight overlay by default for contrast */
    }
}