fix(program-ayrinti): tek durak + sabit iskelet boyu (açılış sıçraması), "Yıllara göre" kaldırıldı, logo→içerik açılışı; DESIGN §4.19

Çekmece varsayılan tek durakta (0,92) açılır; duraklar/ilkDurak kaldırıldı
(kısık durakta gövde kaydırılamıyordu, veri gelince boy değişince konum
sıçrıyordu). İskelet min-h-[70dvh] sarmalda. Yıl tablosu silindi (API
`gecmis` alanı duruyor; backlog). Bölümler data-sonra, başlık altında
data-logo kabı; AcilisSahnesi hazir={durum === "hazir"}. DESIGN.md §4.19
ve §4.10 durak atfı güncellendi.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/features/katalog/components/program-ayrinti.tsx

@@ -3,13 +3,18 @@
 // Program satırındaki "ayrıntı" düğmesi: programın tüm açık verisini alttan
 // açılan sayfada gösterir (DESIGN.md §4.10 çekmece, §4.19 program ayrıntı
 // çekmecesi). Veri /api/program-ayrinti'den gelir: künye (dil, öğretim türü,
-// burs/ücret, akreditasyon, baraj, kadro, kampüs, cinsiyet koşulu), yıllara
-// göre sıra/puan/kontenjan/yerleşen, kontenjan türleri, son yerleşenin
-// netleri, yerleşme koşulları, TÜİK mezun istihdamı, üniversite özeti.
+// burs/ücret, akreditasyon, baraj, kadro, kampüs, cinsiyet koşulu), kontenjan
+// türleri, son yerleşenin netleri, yerleşme koşulları, TÜİK mezun istihdamı,
+// üniversite özeti. API'nin `gecmis` (yıllara göre sıra/puan/kontenjan)
+// alanı burada gösterilmez (Bilal, 7 Eki 2026: yıl tablosu kaldırıldı;
+// backlog). Açılış: veri gelince logo kareleri belirir, söner, içerik
+// bloklar hâlinde netleşir (AcilisSahnesi kartsız modu).
 // Kadın-erkek dağılımı program düzeyinde bilinçli olarak yok: YÖK Atlas 2026
 // SPA'sına geçerken cinsiyet panelini yayından kaldırdı (bkz. scripts/detay.ts).
 // Çekmece içerik ağırlıklı olduğu için liste çekmecesi gibi kaydırılır (§4.10
-// tek ekran kuralının ikinci istisnası).
+// tek ekran kuralının ikinci istisnası). Tek durak (varsayılan 0,92): çift
+// durakla açılış, kısık durakta gövde kaydırılamadığı ve veri gelince boy
+// değiştiği için takılmış görünüyordu (7 Eki 2026).
 
 import { SATIR_BASLIK, SATIR_DUGME_BOYU } from "@/components/liste-satiri";
 import { useState } from "react";
@@ -45,6 +50,11 @@ import {
   AltSayfaBaslik,
   AltSayfaTetik,
 } from "@/components/ui/alt-sayfa";
+import {
+  AcilisSahnesi,
+  LOGO_SLOTLARI,
+  logoKareStili,
+} from "@/components/ui/acilis-sahnesi";
 import {
   Table,
   TableBody,
@@ -163,13 +173,10 @@ export function ProgramAyrintiButonu({
         )}
       </AltSayfaTetik>
       {/* Alt sayfa kabı tek kaynak (alt-sayfa.tsx), çarpı §4.3. İçerik uzun:
-          sayfa ekranın %60'ında açılır (başlık + künye), yukarı çekince ya da
-          kaydırınca tam boya çıkar (§4.19). */}
-      <AltSayfaIcerik
-        duraklar={[0.6, 0.92]}
-        ilkDurak={0}
-        onClick={(e) => e.stopPropagation()}
-      >
+          tek durakta tam boya açılır, gövde kaydırılır (§4.19). İskelet
+          min-h-[70dvh] ile açılır ki veri gelince sayfa yalnız büyüsün,
+          konum sıçramasın (alt-sayfa.tsx ResizeObserver). */}
+      <AltSayfaIcerik onClick={(e) => e.stopPropagation()}>
         <AltSayfaKapat className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
           <X className="size-4" aria-hidden />
           <span className="sr-only">Kapat</span>
@@ -189,9 +196,12 @@ export function ProgramAyrintiButonu({
                   .join(" · ")
               : (universite ?? "Programın tüm açık verisi")}
           </AltSayfaAciklama>
-          <div className="mt-5">
+          <AcilisSahnesi
+            hazir={durum === "hazir"}
+            className={cn("mt-5", durum !== "hazir" && "min-h-[70dvh]")}
+          >
             <AyrintiIcerik durum={durum} veri={veri} />
-          </div>
+          </AcilisSahnesi>
         </AltSayfaGovde>
       </AltSayfaIcerik>
     </AltSayfa>
@@ -215,22 +225,31 @@ function AyrintiIcerik({ durum, veri }: { durum: Durum; veri: ProgramAyrintisi |
       </p>
     );
   }
+  // Sıra = AcilisSahnesi'nin `data-sonra` sırası: logo söner, bloklar
+  // yukarıdan aşağıya 0,08 s arayla netleşir.
   return (
     <>
+      {/* Logo kareleri: sahne sırasında görünür, sönünce kap sıfır boya iner. */}
+      <div data-logo className="relative mx-auto h-16 w-16" aria-hidden>
+        {LOGO_SLOTLARI.map((slot) => (
+          <span key={slot} data-logo-kare={slot} className="absolute" style={logoKareStili(slot)} />
+        ))}
+      </div>
       <Kunye veri={veri} />
-      <YillaraGore veri={veri} />
       <KontenjanTurleriBolumu veri={veri} />
-      <h3 className={BOLUM_BASLIK}>Son yerleşenin netleri</h3>
-      <p className={NOT}>
-        Bölüme en düşük puanla yerleşen adayın sınav netleri (YÖK Atlas).
-      </p>
-      <div className="mt-3">
-        <NetlerIcerik netler={veri.netler} />
+      <div data-sonra>
+        <h3 className={BOLUM_BASLIK}>Son yerleşenin netleri</h3>
+        <p className={NOT}>
+          Bölüme en düşük puanla yerleşen adayın sınav netleri (YÖK Atlas).
+        </p>
+        <div className="mt-3">
+          <NetlerIcerik netler={veri.netler} />
+        </div>
       </div>
       <Kosullar veri={veri} />
       <Istihdam veri={veri} />
       <UniversiteOzeti veri={veri} />
-      <p className="mt-7 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">
+      <p data-sonra className="mt-7 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">
         Kaynaklar: YÖK Atlas (yerleştirme, kontenjan, netler, koşullar; {SON_YIL}{" "}
         yerleştirmesi), TÜİK (mezun istihdamı), URAP ve YÖK İstatistik (üniversite).
       </p>
@@ -270,7 +289,7 @@ function Kunye({ veri }: { veri: ProgramAyrintisi }) {
   if (o?.ilce) haplar.push({ ikon: MapPin, metin: `${trBaslikDuzeni(o.ilce)} kampüsü` });
   if (haplar.length === 0) return null;
   return (
-    <ul className="flex flex-wrap justify-center gap-2">
+    <ul data-sonra className="flex flex-wrap justify-center gap-2">
       {haplar.map((h) => (
         <li key={h.metin} className={HAP}>
           <h.ikon className={HAP_IKON} aria-hidden />
@@ -281,59 +300,6 @@ function Kunye({ veri }: { veri: ProgramAyrintisi }) {
   );
 }
 
-function YillaraGore({ veri }: { veri: ProgramAyrintisi }) {
-  const satirlar = veri.gecmis.filter(
-    (g) => g.sira != null || g.puan != null || g.kontenjan != null || g.yerlesen != null,
-  );
-  if (satirlar.length === 0) return null;
-  const sonYil = satirlar[0].yil;
-  const hucre = (yil: number) =>
-    cn(
-      "py-2.5 text-right text-sm tabular-nums",
-      yil === sonYil ? "font-semibold text-slate-800" : "text-slate-500",
-    );
-  return (
-    <>
-      <h3 className={BOLUM_BASLIK}>Yıllara göre</h3>
-      <p className={NOT}>
-        Taban sırası (ve geniş ekranda puanı) o yıl yerleşen son adayınki;
-        kontenjan ve yerleşen o yılın yerleştirmesi. Sırası boş yıl: program o
-        yıl dolmadı ya da yoktu.
-      </p>
-      <Table className="mt-3">
-        <TableHeader>
-          <TableRow>
-            <TableHead className={cn(SATIR_BASLIK, "pl-0")}>Yıl</TableHead>
-            <TableHead className={cn(SATIR_BASLIK, "text-right")}>Taban sıra</TableHead>
-            {/* Telefonda beş sütun 375 px'e sığmıyor (yatay kaydırma yok, §5.2.3): puan sm'den itibaren */}
-            <TableHead className={cn(SATIR_BASLIK, "hidden text-right sm:table-cell")}>Puan</TableHead>
-            <TableHead className={cn(SATIR_BASLIK, "text-right")}>Kontenjan</TableHead>
-            <TableHead className={cn(SATIR_BASLIK, "text-right")}>Yerleşen</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {satirlar.map((g) => (
-            <TableRow key={g.yil}>
-              <TableCell
-                className={cn(
-                  "py-2.5 pl-0 text-sm tabular-nums",
-                  g.yil === sonYil ? "font-semibold text-slate-900" : "text-slate-700",
-                )}
-              >
-                {g.yil}
-              </TableCell>
-              <TableCell className={hucre(g.yil)}>{g.sira != null ? sayi(g.sira) : "—"}</TableCell>
-              <TableCell className={cn(hucre(g.yil), "hidden sm:table-cell")}>{g.puan != null ? ondalik(g.puan) : "—"}</TableCell>
-              <TableCell className={hucre(g.yil)}>{g.kontenjan != null ? sayi(g.kontenjan) : "—"}</TableCell>
-              <TableCell className={hucre(g.yil)}>{g.yerlesen != null ? sayi(g.yerlesen) : "—"}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </>
-  );
-}
-
 function KontenjanTurleriBolumu({ veri }: { veri: ProgramAyrintisi }) {
   const k = veri.kontenjanTurleri;
   if (!k) return null;
@@ -341,7 +307,7 @@ function KontenjanTurleriBolumu({ veri }: { veri: ProgramAyrintisi }) {
   if (satirlar.length === 0) return null;
   const ozelVar = satirlar.some((t) => t !== "genel");
   return (
-    <>
+    <div data-sonra>
       <h3 className={BOLUM_BASLIK}>Kontenjan türleri ({k.yil})</h3>
       <p className={NOT}>
         {ozelVar
@@ -362,7 +328,7 @@ function KontenjanTurleriBolumu({ veri }: { veri: ProgramAyrintisi }) {
           </div>
         ))}
       </dl>
-    </>
+    </div>
   );
 }
 
@@ -476,7 +442,7 @@ function NetlerIcerik({ netler }: { netler: ProgramNetSatiri[] }) {
 function Kosullar({ veri }: { veri: ProgramAyrintisi }) {
   if (veri.kosullar.length === 0) return null;
   return (
-    <details className="group mt-7">
+    <details data-sonra className="group mt-7">
       <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 font-heading text-base font-bold text-slate-900 transition-colors hover:text-orange-500 [&::-webkit-details-marker]:hidden">
         Yerleşme koşulları ({veri.kosullar.length})
         <span className="text-sm font-semibold text-slate-500 group-open:hidden">Göster</span>
@@ -509,13 +475,13 @@ function Istihdam({ veri }: { veri: ProgramAyrintisi }) {
   if (parcalar.length === 0) return null;
   const ort = v.ortalama.istihdam != null ? ` Türkiye ortalaması %${ondalik(v.ortalama.istihdam)}.` : "";
   return (
-    <>
+    <div data-sonra>
       <h3 className={BOLUM_BASLIK}>Mezun istihdamı</h3>
       <p className={NOT}>
         {parcalar.join(", ")} (TÜİK {v.yil}, ülke geneli, {v.duzey === "lisans" ? "lisans" : "ön lisans"}{" "}
         mezunları; üniversiteye göre değişir, kırılım yok).{ort}
       </p>
-    </>
+    </div>
   );
 }
 
@@ -529,7 +495,7 @@ function UniversiteOzeti({ veri }: { veri: ProgramAyrintisi }) {
       : null,
   ].filter(Boolean);
   return (
-    <>
+    <div data-sonra>
       <h3 className={BOLUM_BASLIK}>Üniversite</h3>
       <p className={NOT}>
         {parcalar.join(" · ")}.{" "}
@@ -540,6 +506,6 @@ function UniversiteOzeti({ veri }: { veri: ProgramAyrintisi }) {
           Üniversite sayfası
         </a>
       </p>
-    </>
+    </div>
   );
 }