/* ==========================================
   PROJE SAYFALARI (neostil, baslik-kartlari, making-of, bluzone, labiratuvar)
   Solda sabit kalan proje bilgisi, sağda sayfayla birlikte kayan görseller
   (Sayfa geçiş perdesi: gecis.css / gecis.js)
   ========================================== */

/* ==========================================
   1. NAVBAR YAZILARI: perde kalkarken alttan maskeli yükselir (index.html ile aynı hareket)
   Kayma ile aynı oranda alt kenardan kırpılır, böylece yazı kendi satır çizgisinin altında görünmez
   ========================================== */
@keyframes navRise {
    from {
        transform: translateY(120%);
        clip-path: inset(0 0 120% 0);
    }
    to {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

.navbar .logo,
.navbar .lang-switcher,
.navbar .nav-links a {
    animation: navRise 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
}

.navbar .lang-switcher { animation-delay: 0.52s; }
.navbar .nav-links a:nth-child(1) { animation-delay: 0.59s; }
.navbar .nav-links a:nth-child(2) { animation-delay: 0.66s; }
.navbar .nav-links a:nth-child(3) { animation-delay: 0.73s; }

@media (prefers-reduced-motion: reduce) {
    .navbar .logo,
    .navbar .lang-switcher,
    .navbar .nav-links a {
        animation: none;
    }
}

/* ==========================================
   2. İKİ SÜTUNLU DÜZEN
   ========================================== */
.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 2rem;
    align-items: start;
    padding: 0 3rem;
}

/* ==========================================
   3. SOL SÜTUN: SABİT PROJE BİLGİSİ
   ========================================== */
.project-info {
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0 2rem 0;
}

.project-info .text-reveal-mask {
    padding-top: 0.25em; /* İ'nin noktasına üstten alan açar */
    margin-top: -0.25em;
}

.project-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    font-size: clamp(2rem, 3.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--c-black);
    margin: 0;
}

/* Numara, başlık, kategori ve açıklama tek blok: hepsi sola hizalı, aralar dar */
.project-info .project-title-mask {
    margin-top: 0.35rem;
}

.project-info .project-tags-mask {
    margin-top: 1.1rem;
}

.project-info .project-desc-mask {
    margin-top: 0.6rem;
    max-width: 26rem;
}

.project-index,
.project-tags,
.project-desc,
.project-next {
    font-family: var(--font-sf);
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--c-black);
}

.project-index {
    font-weight: 500;
}

.project-tags {
    font-weight: 500;
    margin: 0;
}

.project-desc {
    font-weight: 400;
    margin: 0;
}

.project-next-mask {
    margin-top: auto !important;
    align-self: flex-start;
}

.project-next {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.project-next span[aria-hidden] {
    display: inline-block;
    margin-right: 0.35em;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-next:hover span[aria-hidden] {
    transform: translateX(0.35em);
}

.project-next-mobile {
    display: none;
}

/* ==========================================
   4. SAĞ SÜTUN: KAYAN GÖRSELLER
   Yatay görseller tam genişlik, dikey/kare olanlar ikişerli
   ========================================== */
.project-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start; /* yan yana gelen farklı boydaki görseller kendi oranını korur */
    padding-bottom: 2rem;
}

.gallery-item {
    margin: 0;
    overflow: hidden;
    /* Ekrana girince olduğu yerde belirir (fade in) */
    opacity: 0;
    transition: opacity 1.2s ease;
    will-change: opacity;
}

.gallery-item.is-wide {
    grid-column: 1 / -1;
}

/* Yanındaki 3:4 görselle aynı boya gelsin diye görseli 3:4'e kırpar (üstten ve alttan eşit) */
.gallery-item.ratio-3x4 img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Yanındaki 4:5 postla aynı boya gelsin diye görseli 4:5'e kırpar */
.gallery-item.ratio-4x5 img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Sütunu elle sabitler: is-left her zaman yeni satır başlatır, is-right sağ yarıda durur.
   Eşi olmayan görselin yanı boş kalır. */
.gallery-item.is-left {
    grid-column: 1;
}

.gallery-item.is-right {
    grid-column: 2;
}

.gallery-item img,
.gallery-item video {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-item.is-revealed {
    opacity: 1;
}

/* ==========================================
   5. MOBİL: TEK SÜTUN, BİLGİ ÜSTTE
   ========================================== */
@media (max-width: 768px) {
    .project-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 1rem;
    }

    .project-info {
        position: static;
        height: auto;
        padding: 1.25rem 0 2rem 0;
    }

    .project-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .project-next-mask {
        display: none !important;
    }

    .project-gallery {
        gap: 0.4rem;
    }

    .project-next-mobile {
        display: inline-block;
        padding: 0.5rem 0 2.5rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item {
        transition: none;
    }
}