Akademik göstergeler çekmecesine açılış koreografisi

Kareler önce logonun üç karesi gibi belirir, sonra yerlerine büyür;
içerik satır satır netleşir. Hareketi azalt'ta yalnız kısa belirme.

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

src/features/katalog/components/universite-icerik.tsx

@@ -190,6 +190,8 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
   // sütun, sağdaki aşağı kaymış, kare boyları farklı — ne tepeler ne
   // bitişler hizalı (masonry). Renk sempati katar, anlamı etiket taşır;
   // yazı beyaz (turuncu/mavi zeminde sitenin CTA'larıyla aynı ikili).
+  // data-* işaretleri açılış koreografisinin sözleşmesi (akademik-ayrinti.tsx,
+  // AcilisSahnesi).
   const kare =
     "flex flex-col items-center justify-center rounded-3xl px-3 text-white";
   const etiket = "text-sm font-bold text-white/90";
@@ -198,7 +200,7 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
   const orta = "font-heading text-3xl font-bold leading-none";
 
   const siraKaresi = urap ? (
-    <div className={`${kare} min-h-40 bg-orange-500 py-4`}>
+    <div data-kare="sol" className={`${kare} min-h-40 bg-orange-500 py-4`}>
       <dt className={etiket}>Türkiye sırası</dt>
       <dd className="mt-3 flex items-baseline justify-center gap-1">
         <span className={devSayi}>{sayi(urap.sira)}.</span>
@@ -225,7 +227,7 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
   // yapılmaz. Bu yüzden ayrı kare değil, öğrenci karesinin alt satırı.
   const kadin = i ? kadinYuzdesi(i) : null;
   const ogrenciKaresi = oranVar ? (
-    <div className={`${kare} min-h-24 bg-indigo-500 py-3`}>
+    <div data-kare="sol" className={`${kare} min-h-24 bg-indigo-500 py-3`}>
       <dd className={orta}>{sayi(i.ogrenci)}</dd>
       <dt className={`mt-1.5 ${etiket}`}>Örgün öğrenci</dt>
       {kadin != null ? (
@@ -236,7 +238,7 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
     </div>
   ) : null;
   const oranKaresi = oranVar ? (
-    <div className={`${kare} min-h-32 bg-primary py-4`}>
+    <div data-kare="sag-ust" className={`${kare} min-h-32 bg-primary py-4`}>
       <dt className={etiket}>Hoca başına öğrenci</dt>
       <dd className={`mt-3 ${devSayi}`}>{sayi(oran)}</dd>
       <dd className="mt-2 text-base font-bold text-white/90">
@@ -245,7 +247,7 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
     </div>
   ) : null;
   const uyeKaresi = oranVar ? (
-    <div className={`${kare} bg-green-600 py-5`}>
+    <div data-kare="sag-alt" className={`${kare} bg-green-600 py-5`}>
       <dd className={orta}>{sayi(i.ogretimUyesi)}</dd>
       <dt className={`mt-1.5 ${etiket}`}>Öğretim üyesi</dt>
     </div>
@@ -254,7 +256,10 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
 
   return (
     <div className="flex flex-col items-center text-center">
-      <dl className="flex w-full max-w-md items-start gap-3">
+      <dl
+        data-sahne
+        className="relative flex w-full max-w-md items-start gap-3"
+      >
         <div className="flex flex-1 flex-col gap-3">
           {siraKaresi}
           {ogrenciKaresi}
@@ -269,7 +274,10 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
 
       {urap ? (
         <>
-          <p className="mt-4 max-w-md text-sm leading-relaxed text-slate-500">
+          <p
+            data-sonra
+            className="mt-4 max-w-md text-sm leading-relaxed text-slate-500"
+          >
             Türkiye sırası araştırma performansını ölçer; eğitim kalitesini
             ya da iş bulma oranını ölçmez.
           </p>
@@ -277,6 +285,7 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
             asChild
             size="lg"
             variant="outline"
+            data-sonra
             className="mt-4 cursor-pointer px-6 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
           >
             <Link href="/universite-siralamasi">
@@ -287,7 +296,10 @@ function AkademikGostergeler({ uni }: { uni: UniDetay }) {
         </>
       ) : null}
 
-      <div className="mt-5 flex w-full max-w-md items-center justify-center gap-3 border-t border-slate-100 pt-4 text-left text-xs leading-5 text-slate-500">
+      <div
+        data-sonra
+        className="mt-5 flex w-full max-w-md items-center justify-center gap-3 border-t border-slate-100 pt-4 text-left text-xs leading-5 text-slate-500"
+      >
         {urap ? <UrapLogo className="h-7 shrink-0" /> : null}
         <div>
           {urap ? (