/* ═══ PROJE @v3 · KESİT SÜTUNLARI ══════════════════════════════════════
   REVİZE · Beyefendi: "bu kadar uzun olamaz, tek ekrana sığmalı".

   Alt alta üç bant 2213 px ediyordu (ölçüldü). Aynı içerik YAN YANA üç
   kesite alındı: her sütunda bir render, altında numara, başlık ve künye.
   Bölüm 1440x900'de tek ekranda bitiyor.

   Hareket duruyor ama kısaldı: sütunlar sırayla yükselir, render geri
   çekilir. Tamamı CSS kaydırma çizelgesiyle (view()) — betik yok. */
.prj3{padding-block:var(--blm-pd);background:var(--z1);overflow:clip;--prj3-yon:1}
[dir="rtl"] .prj3{--prj3-yon:-1}
.prj3-iz{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--bo-3);align-items:stretch;
}
/* Sütunlarda metin uzunluğu eşit değil; künye satırları serbest bırakılsa
   üç sütunda üç ayrı yükseklikten başlıyor (01'de fazladan soru satırı var).
   Gövde esnek kolon, künye alta itiliyor: üç sütunda da aynı hizada bitiyor. */
.prj3-satir{display:grid;grid-template-rows:auto 1fr}
.prj3-ic{display:flex;flex-direction:column}
/* Oran ÇERÇEVEDE, görsel içeride taşkın: parallax'ın oynayacağı pay bu.
   overflow CLIP — hidden olsaydı çerçeve kaydırma kabı olur ve view()
   çizelgesi donardı. */
.prj3-cerceve{position:relative;margin:0 0 clamp(.9rem,1.5vw,1.25rem);
  aspect-ratio:16 / 9;border-radius:var(--yr-m);overflow:clip;background:var(--z2)}
.prj3-cerceve picture{display:contents}
.prj3-gorsel{
  position:absolute;inset-inline:0;inset-block-start:-9%;
  inline-size:100%;block-size:118%;object-fit:cover;display:block;
  scale:1.06;                                  /* YAKIN başlar */
  transition:scale 760ms var(--egri);
}
.prj3-satir:hover .prj3-gorsel{scale:1}        /* imleç gelince UZAKLAŞIR */
.prj3-bsl{
  margin:0;font-family:"Manrope",ui-sans-serif,sans-serif;font-weight:800;
  /* 25 Ağu 2026: kart başlıkları da bölüm başlığıyla AYNI ölçekte.
     Sitede tek bir başlık boyu var; kart içi diye küçültmek
     yeniden iki ayrı ölçek doğuruyordu. */
  font-size:var(--blm-bsl);line-height:var(--sy-bsl);letter-spacing:-.03em;color:var(--mrk);
}
.prj3-soru{
  margin:0;margin-block-start:.7rem;font-size:var(--yz-gvd);font-weight:600;
  line-height:1.4;letter-spacing:-.012em;color:var(--mrk);text-wrap:pretty;
}
.prj3-gvd{
  margin:0;margin-block-start:.6rem;font-size:var(--yz-gvd);line-height:var(--sy-gvd);
  color:var(--mrk);text-wrap:pretty;
}
/* Künye: kutu değil, saç teli üstünde satır. Küçük puntoda --mrk3 açık
   temada AA altına düşüyor (ölçüldü) — --mrk2 kullanılır. */

/* ── kaydırma çizelgesi ───────────────────────────────────────────────
   Sütunlar aynı anda ekrana girer; sırayı ARALIK kaydırarak veriyoruz
   (gecikme değil — çizelgeli animasyonda delay ilerlemeyi değil eşlemeyi
   bozar). Süre auto olmalı. */
@supports (animation-timeline:view()){
  @keyframes prj3-cerceveAc{
    from{opacity:0;transform:translate3d(calc(var(--prj3-yon) * 3%),0,0) scale(1.1)}
    to  {opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  @keyframes prj3-yuksel{from{opacity:0;transform:translate3d(0,1rem,0)}
                         to  {opacity:1;transform:translate3d(0,0,0)}}
  @keyframes prj3-cizil{from{scale:0 1}to{scale:1 1}}
  .prj3-cerceve,.prj3-ic{animation-timeline:view();animation-fill-mode:both}
  .prj3-cerceve{animation-name:prj3-cerceveAc;animation-duration:auto;
    animation-range:entry 8% entry 62%}
  .prj3-ic{animation-name:prj3-yuksel;animation-duration:auto;
    animation-range:entry 18% entry 72%}
    .prj3-satir:nth-of-type(2) .prj3-cerceve{animation-range:entry 14% entry 68%}
  .prj3-satir:nth-of-type(2) .prj3-ic     {animation-range:entry 24% entry 78%}
  .prj3-satir:nth-of-type(3) .prj3-cerceve{animation-range:entry 20% entry 74%}
  .prj3-satir:nth-of-type(3) .prj3-ic     {animation-range:entry 30% entry 84%}
}
/* Hareket azaltma: ortak taban süreleri kısaltır, çizelgeli animasyonda bu
   yeterli değil — animasyon tümden kalkar, bitiş durumu kalır. */
@media (prefers-reduced-motion:reduce){
  .prj3-cerceve,.prj3-ic,}
@media (max-width:64rem){
  .prj3-iz{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bo-3)}
  .prj3-satir:nth-of-type(3){grid-column:1 / -1}
  .prj3-satir:nth-of-type(3) .prj3-cerceve{aspect-ratio:21 / 9}
}
@media (max-width:40rem){
  .prj3-iz{grid-template-columns:1fr;gap:var(--bo-3)}
  .prj3-satir:nth-of-type(3){grid-column:auto}
  .prj3-satir:nth-of-type(3) .prj3-cerceve{aspect-ratio:16 / 9}
  }
html[lang="ar"] .prj3-bsl{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0;line-height:1.4}


/* ── HAFİF PARALLAX · avantaj görselleri ────────────────────────
   Betiksiz. `translate` özelliği kullanılır; `scale` ayrı özellik
   olduğu için hover büyütmesiyle çakışmaz. Görsel %112 yüksekliğinde
   ve %6 yukarıdan başlıyor: ±%3 hareket o payın içinde kalır. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .prj3-gorsel{
      animation-name:prj3-par;animation-duration:auto;
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:view();animation-range:cover 0% cover 100%;
    }
    @keyframes prj3-par{ from{translate:0 -4.8%} to{translate:0 4.8%} }
  }
}
@media (prefers-reduced-motion:reduce){ .prj3-gorsel{scale:1;transition:none} }