/* ==========================================================================
   9. PORTFOLYO
   ========================================================================== */
.portfolio-index {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0 0 60px;
}
.portfolio-index a { text-decoration: none; color: inherit; }

.portfolio-item-row {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 30px 16px;
    border-bottom: var(--hair) solid var(--line);
    cursor: pointer;
    transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.portfolio-item-row:first-child { border-top: var(--hair) solid var(--line); }
.portfolio-item-row:hover, .portfolio-item-row:focus-visible {
    background: var(--hover-bg);
    color: var(--hover-text);
    transform: translateX(14px);
}
.portfolio-item-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

.portfolio-item-index { font-size: 0.85rem; font-weight: 700; opacity: var(--muted); min-width: 34px; letter-spacing: 0.05em; flex-shrink: 0; }
.portfolio-item-title { font-size: clamp(1.4rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; flex: 1; }
.portfolio-item-arrow { font-size: 1.3rem; opacity: 0; transform: translateY(-5px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); flex-shrink: 0; }
.portfolio-item-row:hover .portfolio-item-arrow,
.portfolio-item-row:focus-visible .portfolio-item-arrow { opacity: 0.8; transform: translateY(0); }

.wrap--portfolio { text-align: left; }

.portfolio-sections { display: flex; flex-direction: column; gap: 80px; }
/* Bölüm başlıkları ve dizin satırları aynı sol rayda buluşsun diye iki
   tarafta da 16px'lik ortak iç boşluk. */
.portfolio-section { padding: 40px 16px 0; border-top: 2px solid var(--text); scroll-margin-top: 60px; }
.portfolio-section h3 { font-size: 2.5rem; margin-bottom: 30px; font-weight: 700; letter-spacing: -0.02em; text-align: left; }

.coming-soon { opacity: var(--muted); }

/* Yer tutucular — henüz görseli olmayan bölümler için duruyor. */
.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* GERÇEK İŞLER
   Sabit `aspect-ratio` yok: her baskı kendi oranında duruyor, hiçbiri
   kırpılmıyor. Üç sütun, iş sayısı arttıkça sayfayı uzatmadan büyüyen bir
   ızgara veriyor. `align-items: start` olmasa farklı oranlardaki işler
   satırın en uzununa göre gerilirdi. */
/* Boşluk 22px'ten büyütüldü. Sebebi aralık değil ÇAKIŞMA: çok parçalı bir
   işin arkadaki sayfası kartın dışına taşıyor ve o taşma buradaki oluğun
   içinde kalmak zorunda (bkz. `.img-card-back`). 26px, iki ve üç sütunlu
   yerleşimin ikisinde de taşmayı komşu karta değdirmeden karşılıyor. */
.image-grid--works {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: start;
}

/* Kart artık bir buton: tıklanabilir olduğu için klavyeyle de gezilebilmeli.
   Butonun varsayılan görünümü tamamen sıfırlanıyor. */
.img-card {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* Görsel inene kadar kart yok; `revealCards()` sınıfı ekleyince
       sönümlenerek geliyor. Yalnızca opaklık: kompozitörde dönüyor,
       ızgaranın yerleşimini hiç rahatsız etmiyor. */
    opacity: 0;
    transition: opacity 0.55s var(--ease-out);
}

.img-card.is-loaded { opacity: 1; }

.img-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    /* Görsel yüklenene kadar kutu boş bir beyazlık olmasın. */
    background: var(--line);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.img-card:hover img,
.img-card:focus-visible img {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.img-card:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }

/* VİDEO KARTI
   Motion işleri ızgarada da hareketli bir şey olduğunu belli etmeli. Poster
   verilmişse o basılıyor; verilmemişse `<video>`nun kendisi duruyor ve
   `#t=0.1` ile ilk kare zorlanıyor — aksi halde Safari siyah kutu gösterir.
   Izgaradaki video hiç oynamıyor, sadece bir kare: `preload="metadata"`
   dosyanın tamamını indirmiyor. */
.img-card-video {
    position: relative;
    display: block;
    line-height: 0;
    transition: transform 0.35s var(--ease-out);
}

.img-card-video > img,
.img-card-video > video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    /* Bu videoların ilk karesi neredeyse tamamen beyaz. Poster olmadığı
       için kart o kareyi gösteriyor ve beyaz bir kutu, panelin krem
       zemininde kenarsız kalıyordu. İnce çerçeve kartı geri getiriyor. */
    background: #fff;
    box-shadow: inset 0 0 0 var(--hair) var(--line);
    object-fit: cover;
    transition: box-shadow 0.35s var(--ease-out);
}

.img-card:hover .img-card-video,
.img-card:focus-visible .img-card-video { transform: translateY(-5px); }

.img-card:hover .img-card-video > img,
.img-card:hover .img-card-video > video,
.img-card:focus-visible .img-card-video > img,
.img-card:focus-visible .img-card-video > video {
    box-shadow: inset 0 0 0 var(--hair) var(--line), 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Oynat rozeti. Üçgen `border` hilesiyle: fazladan dosya yok.
   Beyaz halka şart: rozet kareye göre bazen boş bir zeminin, bazen de
   detaylı bir arayüz görüntüsünün üstüne düşüyor. Tek başına koyu bir
   daire ikincisinde okunmuyordu. */
.play-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(10, 8, 4, 0.62);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 6px 18px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s var(--ease-out), background 0.3s var(--ease-out);
    pointer-events: none;
}

.play-badge::after {
    content: '';
    margin-left: 4px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.img-card:hover .play-badge,
.img-card:focus-visible .play-badge {
    transform: scale(1.09);
    background: rgba(10, 8, 4, 0.74);
}

/* Izgarada iki parçalı iş: arkadaki İŞİN KENDİSİ duruyor, dekoratif bir
   çerçeve değil. Önceki hali ince bir çizgi gibi görünüyordu ve "yüklenmemiş
   görsel" izlenimi veriyordu.
   Yükseklik öndeki görselin kendi oranından geldiği için sarmalayıcı şart:
   arkadakinin `inset: 0` alabileceği bir kutu lazım. */
.img-card-stack {
    /* YATIŞ YÖNÜ
       -1 sola, 1 sağa. Hem ızgara kartı hem detaydaki yığın aynı sayıyı
       okuyor, yani bir iş her yerde aynı tarafa yatıyor.
       Artık yalnızca bir tercih: çakışmayı önleme işi yatış yönünden
       alınıp taşmanın kendi ölçüsüne verildi (bkz. `.img-card-back`),
       çünkü orta sütuna düşen bir işi hiçbir yön kurtarmıyordu. */
    --lean: 1;
    position: relative;
    /* Blok olmak ZORUNDA: `<span>` satır içi kaldığında mutlak konumlu
       çocuk kendini satır kutusuna göre ölçüyor ve yamuk çıkıyor. */
    display: block;
    line-height: 0;   /* img'nin altındaki satır boşluğu hizayı kaydırıyordu */
}

.img-card-stack > img { position: relative; z-index: 1; }

/* ==========================================================================
   TAŞMA OLUĞUN İÇİNDE KALMAK ZORUNDA
   Arkadaki sayfa kartın kutusundan dışarı çıkıyor; çıktığı yer ızgaranın
   sütunlar arası oluğu. Eski değerler (7% / 5°, hover'da 9.5% / 7°) oluğu
   aşıyordu: taşma dururken 32, hover'da 46 piksele çıkıyor, oluk ise 22'ydi.
   Sonuç, Otoportre'nin arkadaki parçasının yanındaki işin ÜSTÜNE binmesiydi —
   üstelik konumlandırılmış öğe olduğu için komşunun görselinin ÖNÜNE.

   `lean` bunu çözemiyor: hangi yöne yatırılırsa yatırılsın, üç sütunlu
   ızgarada ORTA sütuna düşen bir işin iki yanında da komşu var. Yatış yönü
   yalnızca kenardaki sütunlarda (sayfanın kendi payına doğru) işe yarıyor.
   Üstelik iş sayısı arttıkça her işin hangi sütuna düşeceği de değişiyor.

   O yüzden çözüm ölçüde: taşma, en geniş kartın çıktığı durumda bile
   (900px'te iki sütun) oluğun altında kalıyor. Hover yine belirgin — taşma
   neredeyse ikiye katlanıyor — ama komşuya değmiyor. */
.img-card-stack .img-card-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: translate(calc(3% * var(--lean)), 2%) rotate(calc(2deg * var(--lean))) scale(0.96);
    transform-origin: center;
    opacity: 0.85;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}

.img-card:hover .img-card-stack .img-card-back,
.img-card:focus-visible .img-card-stack .img-card-back {
    transform: translate(calc(4% * var(--lean)), 2.8%) rotate(calc(2.8deg * var(--lean))) scale(0.96);
    opacity: 1;
}

.img-card-caption {
    display: block;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: var(--muted);
}