/* ==========================================================================
   3. HERO — İŞ ŞERİDİ
   Navigasyonun altındaki boşluk artık boş değil: gerçek işler soldan sağa
   akıyor.
   Döngü şu sayede dikişsiz: şerit listeyi İKİ KEZ içeriyor ve tam bir
   kopya genişliği kadar kaydırıldığında başa sarıyor. Aradaki boşluk `gap`
   ile değil kartların kendi sağ marjıyla verildi — `gap` kullanılsaydı iki
   kopya arasında fazladan bir boşluk kalır, sarma noktası tam bir kopyaya
   denk gelmez ve her turda görünür bir sıçrama olurdu.
   Hareket saf `transform`: layout'a dokunmuyor, kompozitörde dönüyor.
   ========================================================================== */
#hero {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Kartlar kenarlarda sert kesilmesin, zemine karışsın. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Konum artık CSS animasyonuyla değil JS ile sürülüyor: kullanıcı araya
   girip şeridi tutabilsin, bir işi ortaya çekebilsin, savurup yönü
   çevirebilsin diye. Bir `@keyframes` bunların hiçbirine izin vermiyordu. */
.reel {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* JEST TAMAMEN BİZİM — eskiden `pan-y` yazıyordu, yani dikey jest
       tarayıcıya bırakılıyordu. Ama ana sayfada kaydırılacak bir şey yok
       (`body` zaten `overflow: hidden`). Sonuç: tarayıcı hiçbir işe
       yaramayacak bir jesti bekliyor, parmak birazcık dikey kayınca da
       yatay sürüklemeyi ondan alıyordu — telefonda şeridi çekmek bu yüzden
       tutuk hissettiriyordu. `none` ile her dokunuş doğrudan şeride gidiyor. */
    touch-action: none;
    /* Görsellerin hepsi hazır olana kadar şerit görünmüyor: eksik kartla
       dönmeye başlamasın diye. */
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
}

.reel.ready { opacity: 1; }
.reel.dragging { cursor: grabbing; }

/* Sürüklerken kartın hover'da zıplaması jesti bozuyordu. */
.reel.dragging .reel-item:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: var(--reel-glow);
}
.reel.dragging .reel-item:hover img { filter: var(--reel-vivid); }

/* Kart artık sabit oranda değil: yükseklik ortak, genişliği her işin kendi
   oranı belirliyor. Böylece hiçbir baskı kırpılmıyor — bir tasarımcının
   şeridinde işin oranı da işin parçası. */
.reel-item {
    flex: 0 0 auto;
    height: clamp(205px, 46vh, 460px);
    margin-right: clamp(14px, 2vw, 30px);
    border: var(--hair) solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* İşler tam renginde duruyor: soluklaştırma yok. Şeridin zemine
       karışması yalnızca kenarlardaki maskeye bırakıldı. */
    cursor: pointer;
    box-shadow: var(--reel-glow);
    transition: border-color 0.3s var(--ease-out),
                transform 0.3s var(--ease-out),
                box-shadow 0.3s var(--ease-out);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.reel-item img {
    display: block;
    height: 100%;
    width: auto;
    /* Renk buradan geliyor. Filtre sabit olduğu için tarayıcı görseli bir kez
       süzüp saklıyor — her karede yeniden hesaplanmıyor, yani şeridin akışına
       maliyeti yok. */
    filter: var(--reel-vivid);
    transition: filter 0.3s var(--ease-out);
    /* Kaydırma sırasında görselin sürüklenmeye kalkışması engelleniyor. */
    -webkit-user-drag: none;
    user-select: none;
    /* iOS'ta bir görsele uzun basmak "Paylaş / Kaydet" menüsünü açıyor ve
       sürüklemeyi tam ortasında kesiyordu. Şerit zaten sürüklenmek için
       var; menü burada yalnızca engel. */
    -webkit-touch-callout: none;
}

.reel-item:hover {
    border-color: var(--text);
    transform: translateY(-4px);
    box-shadow: var(--reel-glow-hover);
}

/* ==========================================================================
   BÜYÜTEÇ AÇIKKEN — VE HOVER'IN NEDEN SUSTUĞU
   Kartın konumunu ve ölçeğini artık JS her karede kendisi yazıyor
   (bkz. reel.js). Buradaki kurallar onun önünü açıyor.

   1. `transform` geçişten çıkıyor. Kalsaydı her karede yazılan yeni değer
      0.3 sn'lik bir yumuşamayı baştan başlatır, kart imlecin görünür şekilde
      gerisinde kalırdı.

   2. GÖLGE VE DOYGUNLUK ARTIK HOVER'DA DEĞİŞMİYOR. Sebebi görsel değil,
      tamamen maliyet: şerit KENDİ KENDİNE akıyor, yani imleç hiç
      kıpırdamasa bile kartlar sırayla altından geçiyor ve her geçen kart
      `:hover`a girip çıkıyor. Her giriş üç geçiş başlatıyordu —
      `box-shadow` (38 piksellik bulanıklık) ve `filter` (bütün görselin
      yeniden süzülmesi) ikisi de BOYAMA işi, yani her karede yeniden
      çiziliyorlar. Saniyede birkaç kart × 0,3 saniye × 60 kare, hiç
      dinmeyen bir boyama yükü demekti; şeridin takılmasının sebebi buydu.
      Kartın büyümesi zaten hover'ın çok daha güçlü bir işareti; kenar
      rengi de duruyor (ince bir çizgi, boyaması ucuz). Kaybedilen tek şey
      gölgenin ve doygunluğun bir tık artması — hareket hâlindeki bir
      şeritte zaten fark edilmiyordu.

   3. Kenar rengi geçişsiz. Aynı sebep: geçiş, kart altından her geçtiğinde
      0,3 saniyelik bir animasyona dönüşüyordu.
   ========================================================================== */
.reel.magnify .reel-item {
    transition: none;
}

.reel.magnify .reel-item:hover {
    transform: none;
    box-shadow: var(--reel-glow);      /* değişmiyor → yeniden boyama yok */
}

.reel.magnify .reel-item img,
.reel.magnify .reel-item:hover img {
    filter: var(--reel-vivid);         /* sabit: bir kez süzülüp saklanıyor */
    transition: none;
}

/* Büyüteç fiilen çalışırken kartlar kendi katmanlarına alınıyor.
   Ölçek her karede değiştiği için, katmanı olmayan bir kart her karede
   YENİDEN RASTERİZE ediliyor — üstelik üzerinde bir `filter` varken.
   Katmana alınınca ölçekleme hazır dokunun üstünde, kompozitörde oluyor.

   Sınıf yalnızca imleç şeridin üstündeyken duruyor (bkz. reel.js): on altı
   katman sürekli açık kalsın istemiyoruz, bellek boşuna dolar. */
.reel.lifting .reel-item { will-change: transform; }

.reel-item:hover img { filter: var(--reel-vivid-hover); }