feat(ui): 11 Ekim gece işi — program ayrıntıda açılan gösterge kareleri, veri akışı sahnesi, haritada kenar eritme
- program-ayrinti: kontenjan türleri, netler ve mezun istihdamı kapalıyken gösterge karesi; dokununca kare panele dönüşüp bölümün tamamını açar. Kontenjan türü satırlarına "kime açık" alt satırı (KONTENJAN_TURU_KIME). - veri-akisi: üstte öğrencinin üç seçimi, altta YÖK Atlas'ın üç verisi, ortada DanışmanlaKonuş çekirdeği; kayıtlar kıvrımlı yollardan çekirdeğe akar (kt-akis-* kuralları globals.css'te). - tercih-haritasi: il'e yakınlaşınca kenarlar iki katlı mask'la erir; tam görünümde mask yok, ülke uçları solmaz. - DESIGN.md: ilgili bölümler güncellendi (§4.19, §4.28). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
@@ -668,8 +668,9 @@ sihirbaz modalı içindir; yeni bir ayrıntı için `Dialog` açılmaz.
|
||||
tek çekmece açar; veri `/api/program-ayrinti`. Sıra: başlık = program adı, bağlam =
|
||||
üniversite · il · fakülte; **künye hapları** (§4.12 ölçüsü, link değil: süre + tür, dil,
|
||||
öğretim türü (örgün değilse), burs/ücret, akreditasyon, baraj, öğretim üyesi sayısı,
|
||||
yalnız kız/erkek koşulu, kampüs ilçesi — yalnız verisi olanlar); "Kontenjan türleri (yıl)" `dl` satırları
|
||||
(yalnız >0 olanlar; özel kontenjanın ayrı taban sırasının elimizde olmadığı notu);
|
||||
yalnız kız/erkek koşulu, kampüs ilçesi — yalnız verisi olanlar); "Kontenjan türleri (yıl)" satırları
|
||||
(yalnız >0 olanlar; özel kontenjanın ayrı taban sırasının elimizde olmadığı notu; güncel
|
||||
düzen aşağıda, 11 Eki 2026);
|
||||
"Son yerleşenin netleri" (eski tablo + OBP katsayısı satırı; 0,18 = meslek lisesi ek
|
||||
puanı notu); "Yerleşme koşulları (N)" yerel `details` ile kapalı başlar; "Mezun
|
||||
istihdamı" ve "Üniversite" tek paragraf; en altta kaynak satırı `border-t border-slate-100
|
||||
@@ -693,6 +694,37 @@ sihirbaz modalı içindir; yeni bir ayrıntı için `Dialog` açılmaz.
|
||||
göstergeler çekmecesi (§4.9) aynı bileşenin kartlı modunu kullanır (her açılışta oynar).
|
||||
Gövde kaydırılınca içerik tutamaç ve çarpının altına maskesiz girmesin diye `AltSayfaGovde`
|
||||
üst kenarında 20 px saydam → dolu `mask-image` var (§4.10; tüm çekmeceler).
|
||||
- **11 Eki 2026 — kontenjan türleri (açık panelin içi): önce bütün, sonra parçalar:** Bilal: "daha anlaşılabilir
|
||||
bir UI." Eski hâl (uzun açıklama paragrafı + iki sütunlu `dl`, "70 kontenjan · 72 yerleşen")
|
||||
kimin hangi yere girebildiğini söylemiyordu. Yeni sıra: tek cümle toplam (`text-base
|
||||
text-slate-600`, sayı `font-semibold text-slate-900`: "Toplam 81 kişilik yer açıldı: 70 herkese
|
||||
açık, 11 yalnız şartı taşıyan adaylara") → oran çubuğu (`flex h-3 gap-0.5 rounded-full`,
|
||||
dilim genişliği kontenjanla orantılı, `min-w-1.5`; genel `bg-primary`, özel `bg-slate-300`,
|
||||
`aria-hidden`) → iki grup: "Herkese açık" ve "Yalnız şartı taşıyan adaylara" (grup etiketi
|
||||
`text-sm font-semibold text-slate-500` + çubukla aynı renkte `size-2.5` nokta). Satır tek
|
||||
sütun, `border-b border-slate-100 py-3`: solda ad (`text-base font-semibold`) ve altında
|
||||
kimin girebildiği (`KONTENJAN_TURU_KIME`, `src/lib/ozel-durum.ts`); sağda sayı (`font-heading
|
||||
text-xl font-bold` + `kişi` birimi) ve altında "N yerleşti · M boş kaldı". Renk yalnız
|
||||
açık/şartlı ayrımını taşır, türün adı her satırda yazılıdır. Altta not: özel taban sırası
|
||||
bizde yok; genelde yerleşen kontenjanı aşıyorsa aktarım cümlesi eklenir. Yalnız genel
|
||||
kontenjan varsa çubuk ve grup yok, tek satır. Kart yok kuralı duruyor.
|
||||
- **11 Eki 2026 — üç bölüm dönüşen gösterge karesi:** Bilal: "Kontenjan türleri, son
|
||||
yerleşenin netleri, mezun istihdamı akademik göstergelerdeki gibi kutu olsun; tıklanınca o
|
||||
kutu morph olarak genişlesin ve içeriğin tam hâli gözüksün." Bu üç bölüm artık künye
|
||||
haplarının altında §4.11 gösterge kareleridir (`BolumKutulari`; sınıflar §4.11 ile birebir,
|
||||
masonry: sol sütun Kontenjan `bg-orange-500 min-h-40` + İstihdam `bg-indigo-500 min-h-28`,
|
||||
sağ sütun `mt-12` Son yerleşen `bg-primary min-h-40`). Kare bir düğmedir: etiket + sayı +
|
||||
vurgu satırı, sağ üstte `Maximize2 size-4 text-white/80`, `active:scale-[0.97]`. Dokununca
|
||||
kare **tam genişlikte panele dönüşür** (`motion` `layoutId`, yay `YAY.donusum`; köşe 24 px
|
||||
stilde ki ölçeklenirken bozulmasın): panel `rounded-3xl bg-slate-50 p-4 sm:p-5`, kenarlıksız;
|
||||
karenin rengi panelin üstünde `SURE.standart`'ta söner, içerik 0,14 s gecikmeyle belirir.
|
||||
Panel başlığı: karenin renginde `size-3 rounded-[4px]` kare + `font-heading text-base
|
||||
font-bold` başlık + §4.3 çarpısı ("küçült"). Aynı anda tek panel açık; kalan iki kare panelin
|
||||
altında yan yana durur, dokununca yer değiştirir. Odak dönüşen öğeyle gider (açılınca çarpı,
|
||||
kapanınca kare). "Hareketi azalt"ta dönüşüm yok (`MotionConfig reducedMotion="user"`). Verisi
|
||||
olmayan bölümün karesi çizilmez. 10 Ekim'deki "bu çekmecede kart yok" kuralı bu üç bölüm için
|
||||
kalktı; koşullar, üniversite ve kaynak satırı kartsız kalır. Açılış sahnesi değişmedi (logo →
|
||||
başlık); kareler tek `data-sonra` bloğu olarak netleşir.
|
||||
- **10 Eki 2026 — büyük logo, logo → başlık (morph):** Bilal: "logo küçücük kalmış; logolar
|
||||
küçülürken başlıktaki yazıya morph olsun." Logo kabı `size-44` (akademik göstergelerdeki
|
||||
logoyla aynı ölçek). Kareler sönmek yerine küçülerek (scale 0.2) başlık yazısının üç eşit
|
||||
@@ -890,43 +922,58 @@ dilindedir, burada kullanılmaz). Kaynak Arc UI "Card stack".
|
||||
kullanacağız". Dosyalar duruyor; şu an hiçbir sayfada çizilmiyor.
|
||||
|
||||
### 4.28 Veri akışı — `VeriAkisi`, `src/features/pazarlama/components/veri-akisi.tsx`
|
||||
Ana sayfa "Nasıl çalışır" bölümünde, üç adımın (§4.32) altında: ortada KolayTercih işareti,
|
||||
çevresinde altı girdi; her girdiden merkeze **düz çizgi** iner, üzerinde piksel kare akar. **Solda
|
||||
öğrencinin üç seçimi** (turuncu ikon ve kare), **sağda YÖK Atlas'ın üç verisi** (mavi ikon ve
|
||||
kare); ayrımı etiket ve yan taşır, renk eşlik eder (§2.2). Akış CSS'tir (`kt-akis`, globals.css),
|
||||
yalnız ekrandayken oynar; hareketi azalt'ta kareler durur. Esin React Bits "Center Flow"; kod
|
||||
bizim — parlama ve bulanıklık yok, akış içeri doğru. Yeni bir girdi eklenirse sihirbaz/havuz
|
||||
kurallarıyla aynı olmalı (`/meraklisina` şemasıyla çelişmez).
|
||||
- **Çizgi düz, karolar beyaz** (Bilal, 7 Eki 2026: "aradaki yerler solid çizgi olsun, etrafındaki
|
||||
kartların bg'si ve görünümü daha iyi olabilir"). Çizgi `var(--color-slate-300)`, 1,5 px
|
||||
(`vectorEffect="non-scaling-stroke"`), karonun merkezinden işaretin merkezine çekilir ve
|
||||
karoların **altında** kalır; kesik/noktalı çizgi yazılmaz. Girdi karosu
|
||||
`size-14 rounded-2xl border border-slate-200 bg-card` + `size-6` ikon; ortadaki karo
|
||||
`size-24 rounded-3xl border border-slate-200 bg-card`. Renkli soluk zemin (`bg-orange-50/60`,
|
||||
`bg-primary/10`) kaldırıldı: karo dolu olmalı ki çizgi içinden görünmesin. Gölge yok (§6).
|
||||
Ana sayfa "Nasıl çalışır" bölümünde, üç adımın (§4.32) altında. **Üstte öğrencinin üç seçimi**
|
||||
(turuncu ikon ve kayıt), **altta YÖK Atlas'ın üç verisi** (mavi ikon ve kayıt), **ortada
|
||||
danışman**: "DanışmanlaKonuş" çekirdeği. Her kutudan çekirdeğe kıvrımlı bir yol iner, üzerinde
|
||||
kayıt akar; ayrımı etiket ve sıra taşır, renk eşlik eder (§2.2). Akış CSS'tir (`kt-akis-*`,
|
||||
globals.css), yalnız ekrandayken oynar; hareketi azalt'ta her yolda bir ham kayıt durağan durur.
|
||||
Yerleşim ve kaydın yaşam döngüsü Arc UI "Data flow"dan (Bilal, 11 Eki 2026: önce "logoya kareler
|
||||
gelen kısım bunun gibi gözükmeli", sonra "ortadaki kısmı dikdörtgen formuna sokup DanışmanlaKonuş
|
||||
yazsak, kutular attığım örnekteki gibi"). Arc'ın bileşeni Pro'dur, kaynağı alınmadı (§11.3
|
||||
md. 7); önizlemedeki davranış DOM kaydıyla ölçülüp bizim dille yeniden yazıldı — parlama ve
|
||||
bulanıklık yok. Yeni bir girdi eklenirse sihirbaz/havuz kurallarıyla aynı olmalı
|
||||
(`/meraklisina` şemasıyla çelişmez). Eski altıgen yerleşim (ortada kare logo karosu, çevresinde
|
||||
altı karo, düz çizgiler) kaldırıldı.
|
||||
- **Kutu:** `h-20 w-[30%] rounded-2xl border border-slate-200 bg-card`, ikon üstte (`size-5`,
|
||||
yanın renginde), etiket altta (`text-xs font-semibold leading-tight text-balance
|
||||
text-slate-700`, en çok iki satır). Etiket kutunun **içindedir**; dışarıda yüzen etiket yok.
|
||||
Üç kutu sütunları kabın %16,7 / %50 / %83,3'ünde. Gölge yok (§6).
|
||||
- **Çekirdek:** `h-16 rounded-2xl border border-slate-200 bg-card`, içinde danışman panelinin
|
||||
başlığı (`DanismanBaslik` deseni, `sohbet-client.tsx`): turuncu `AnimasyonluMark`
|
||||
(`varyant="nabiz" renk="turuncu"`, `size-7`) + `font-bricolage text-xl tracking-tighter`
|
||||
"Danışmanla" (`font-light`) "Konuş" (`font-semibold`), boşluksuz. İşaret ≈3 sn nabız atar,
|
||||
sonra girdilerden çıkana dönüşür (liste → trend → sohbet, `bicimler`, §4.34) ve toplanır.
|
||||
- **Yol:** `var(--color-slate-300)`, 1,5 px, kesiksiz; iki ucu dikey çıkan S kıvrımı
|
||||
(`C x0 ym, x1 ym`). Yollar çekirdeğin kenarına ortadan 4'er birim açılarak varır. Kutudan
|
||||
çıktığı yerde 7 px'lik **port** halkası durur.
|
||||
- **Kayıt ham çıkar, işlenmiş varır.** Ömrü 1,4 sn: porttan küçük ve soluk doğar (ölçek
|
||||
0,6 → 1), arkasında iki küçük noktadan bir **iz** taşır; yol boyunca **içi boş nokta**dır (ham
|
||||
girdi: `bg-card` dolgu, 1,5 px renkli çerçeve). Çekirdeğe yaklaşınca hafifçe şişer (1,2),
|
||||
**dolar ve piksel kareye döner** (işlenmiş), kenarda sönerek içeri alınır. O an **çekirdeğin
|
||||
çerçevesi** kaydın renginde yanar, genişleyip söner; kalkışta da kutunun çerçevesi ve portu
|
||||
kısa bir an yanar (tepe %50). Ham ile işlenmiş yalnız renkle değil **biçimle** ayrılır.
|
||||
- **Ritim:** 6 sn'lik döngüde altı kayıt, 1 sn arayla, bir üstten bir alttan kalkar; yol 1,2 sn
|
||||
sürdüğü için biri varırken sıradaki yola çıkmıştır, akış hiç durmaz.
|
||||
- **Kayıt eğriyi JS'siz izler.** Bu S kıvrımında parametre zamanla doğrusal ilerlerken x tam
|
||||
olarak `cubic-bezier(1/3, 0, 2/3, 1)`, y tam olarak `cubic-bezier(1/3, .5, 2/3, .5)` izler;
|
||||
kayıt iç içe iki öğedir (dıştaki yatay, içteki dikey kayar) ve çizginin tam üstünde yürür. Bu
|
||||
iki eğri hareket zevki değil yolun geometrisidir (`--akis-x`, `--akis-y`); `hareket.ts`'e
|
||||
girmez, yol değişirse onlar da değişir. İz noktaları aynı iki kaymayı 70 ve 140 ms gecikmeyle
|
||||
yapar. Yatay eksen kabın yüzdesidir (kap `@container`, x'ler `cqw`), dikey eksen rem; ölçüm
|
||||
ya da `ResizeObserver` yok. Eğri öğenin `animation` kısayolundadır: tarayıcı `@keyframes`
|
||||
içindeki `animation-timing-function: var(--…)` değerini çözmez, doğrusala düşer.
|
||||
- **Kartsız, zeminsiz; bilgiler iki yanında, onlar da kartsız** (Bilal, 7 Eki 2026: "kartın
|
||||
dışında, arka plansız, sağında solunda da alttaki bilgiler olacak şekilde"; aynı gün: "hero'daki
|
||||
gibi ferah"). Geniş ekranda (lg+) üç sütun (`lg:grid-cols-[minmax(0,1fr)_22rem_minmax(0,1fr)]`,
|
||||
xl'de orta 24rem, dikeyde ortalı): **solda dürüstlük notu** — `SectionEyebrow` + `h3`
|
||||
(`font-heading text-2xl font-bold text-balance`, ikinci yarısı hero başlığındaki vurgu:
|
||||
`font-bricolage font-bold tracking-tighter text-primary italic`) + `text-base` paragraf, sola
|
||||
yaslı, `max-w-xs`; **ortada animasyon**; **sağda üç sayı** alt alta, sağa yaslı (YÖK Atlas
|
||||
girdilerinin yanında — sayılar o verinin sayılarıdır). Sayı §1.1: `font-heading text-4xl
|
||||
yaslı, `max-w-xs`; **ortada animasyon**; **sağda üç sayı** alt alta, sağa yaslı (sayılar
|
||||
alt sıradaki YÖK Atlas verisinin sayılarıdır). Sayı §1.1: `font-heading text-4xl
|
||||
font-bold leading-none tracking-tight text-primary sm:text-5xl`, birim ("yıl") §3'teki gibi
|
||||
`font-sans text-base font-semibold text-slate-400`, etiket `text-sm font-semibold
|
||||
text-slate-500`. Çerçeve, zemin, ayırıcı çizgi ve sayının yanında piksel süs **yok**.
|
||||
lg altında tek sütun, her şey ortalı: animasyon → sayılar (sm'de üçü yan yana) → dürüstlük notu.
|
||||
- **Ortadaki işaret danışmandır: nabız atar, sonra çıktıya dönüşür** (Bilal, 11 Eki 2026:
|
||||
"logo morph ile ikonlara dönüşsün; belirli süre DanışmanlaKonuş'un animasyonu oynayıp morph
|
||||
olsun, şu ankini kaldır"). İşaret ≈3 sn DanışmanlaKonuş başlığındaki gibi yerinde nabız atar
|
||||
(`varyant="nabiz"`: danışman düşünüyor), sonra üç kare girdilerden çıkan şeye dönüşür, ≈1,3 sn
|
||||
durur ve logoya toplanır (toplam 2,5 sn); nabız yerinden sürer, sıra bir sonraki biçime
|
||||
geçer. Sıra paketin verdiğidir: **liste** (deste) → **trend** (yükselen üç çubuk) → **sohbet**
|
||||
(iki balon). Biçimler §4.34'tekilerle aynı dilde, üç kareden ve logonun üç renginden
|
||||
(`AnimasyonluMark` `bicimler`). Yalnız ekrandayken oynar; ekrandan çıkınca kareler yerine
|
||||
oturur. Hareketi azalt'ta durağan logo. Eski "rota" (kareler birbirinin yerine süzülür) bu
|
||||
karodan kaldırıldı; ondan önceki nabız + tüm karoyu döndüren hâl (`kt-akis-donus`) de yanlıştı
|
||||
(Bilal, 7 Eki 2026).
|
||||
|
||||
### 4.29 Program duvarı — `ProgramDuvari`, `src/features/pazarlama/components/program-duvari.tsx`
|
||||
**Şu an sayfada kullanılmıyor:** ana sayfa "Sorun" bölümünden 7 Eki 2026'da çıkarıldı (Bilal:
|
||||
|
||||
@@ -455,39 +455,277 @@
|
||||
}
|
||||
|
||||
|
||||
/* Veri akışı (veri-akisi.tsx, DESIGN.md §4.28): kare, çizgi boyunca karodan
|
||||
merkeze akar. Uç noktalar satır içi --x1/--y1/--x2/--y2 ile gelir (SVG
|
||||
içinde px = viewBox birimi). Yalnız ekrandayken oynar. */
|
||||
@keyframes kt-akis {
|
||||
/* Veri akışı (veri-akisi.tsx, DESIGN.md §4.28). Üstte üç kutu, ortada
|
||||
çekirdek, altta üç kutu; yollar SVG, kayıtlar HTML (yalnız translate /
|
||||
scale / opacity oynar).
|
||||
|
||||
Geometri: yatay eksen kabın eninin yüzdesi (kap `@container`, x'ler cqw),
|
||||
dikey eksen rem: kutular 5rem, çekirdek 10,5–14,5rem arası, sahne 25rem.
|
||||
Kaydın iki ucu satır içi gelir (--x0/--y0 port, --x1/--y1 çekirdek kenarı).
|
||||
|
||||
Eğri: yol, iki ucu dikey çıkan S kıvrımıdır — C(x0 ym, x1 ym), ym orta
|
||||
yükseklik. Bu eğride parametre zamanla doğrusal ilerlerken x tam olarak
|
||||
cubic-bezier(1/3, 0, 2/3, 1), y tam olarak cubic-bezier(1/3, .5, 2/3, .5)
|
||||
izler. Kayıt bu yüzden iç içe iki öğedir: dıştaki yatay, içteki dikey
|
||||
kayar; ikisi birlikte çizginin tam üstünde yürür, ölçüm ya da JS gerekmez.
|
||||
Bu iki eğri hareket zevki değil yolun geometrisidir (--akis-x / --akis-y);
|
||||
yol değişirse onlar da değişir. İz, aynı iki kaymayı --ek kadar gecikmeyle
|
||||
yapan iki küçük noktadır; böylece o da çizginin üstünde kalır.
|
||||
|
||||
Döngü 6 sn, altı kayıt 1 sn arayla (--g satır içi gecikme). Bir kaydın ömrü:
|
||||
0 → 20 % yol (1,2 sn)
|
||||
0 → 4 % kalkış: porttan küçük ve soluk çıkar (ölçek 0,6 → 1)
|
||||
13 → 17 % işlenir: içi boş nokta şişer (1 → 1,2), dolar ve piksel kareye döner
|
||||
15 → 19 % iz çekirdek kenarına varmadan söner
|
||||
20 → 23 % kayıt kenarda sönerek içeri alınır
|
||||
20 → 32 % çekirdek nabzı: çerçeve kaydın renginde yanar, genişleyip söner
|
||||
0 → 10 % kaynak vurgusu: kutunun çerçevesi ve port kısa bir an yanar
|
||||
Eğri öğenin `animation` kısayolundadır, keyframe'in içinde değil: tarayıcı
|
||||
`@keyframes` içindeki `animation-timing-function: var(--…)` değerini çözmez
|
||||
(doğrusala düşer). Kısayoldaki eğri her durak aralığına ayrı ayrı uygulanır.
|
||||
Yalnız ekrandayken oynar (data-oynuyor). Hareketi azalt'ta her yolda bir
|
||||
ham kayıt durağan durur. */
|
||||
.kt-akis-sahne {
|
||||
height: 25rem;
|
||||
--akis-x: cubic-bezier(0.3333, 0, 0.6667, 1);
|
||||
--akis-y: cubic-bezier(0.3333, 0.5, 0.6667, 0.5);
|
||||
}
|
||||
|
||||
.kt-akis-kayit-kap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Port: yolun kutudan çıktığı nokta; kayıt buradan doğar. */
|
||||
.kt-akis-port {
|
||||
position: absolute;
|
||||
top: -3.5px;
|
||||
left: -3.5px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid var(--color-slate-300);
|
||||
border-radius: 9999px;
|
||||
background: var(--card);
|
||||
translate: var(--x0) var(--y0);
|
||||
}
|
||||
|
||||
.kt-akis-port > .kt-akis-vurgu {
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: inherit;
|
||||
background: var(--renk);
|
||||
}
|
||||
|
||||
.kt-akis-x,
|
||||
.kt-akis-y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.kt-akis-x {
|
||||
translate: var(--x0) 0;
|
||||
animation: kt-akis-x 6s var(--akis-x) calc(var(--g, 0s) + var(--ek, 0s)) infinite;
|
||||
}
|
||||
|
||||
.kt-akis-y {
|
||||
translate: 0 var(--y0);
|
||||
animation: kt-akis-y 6s var(--akis-y) calc(var(--g, 0s) + var(--ek, 0s)) infinite;
|
||||
}
|
||||
|
||||
/* İz noktası: kayıttan küçük, dolu ve soluk. */
|
||||
.kt-akis-iz {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 9999px;
|
||||
background: var(--renk);
|
||||
opacity: 0;
|
||||
animation: kt-akis-iz 6s var(--egri-standart) calc(var(--g, 0s) + var(--ek, 0s)) infinite;
|
||||
}
|
||||
|
||||
/* Ham kayıt: içi boş nokta. */
|
||||
.kt-akis-kare {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
box-sizing: border-box;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1.5px solid var(--renk);
|
||||
border-radius: 50%;
|
||||
background: var(--card);
|
||||
opacity: 0;
|
||||
scale: 0.6;
|
||||
animation: kt-akis-kare 6s var(--egri-standart) var(--g, 0s) infinite;
|
||||
}
|
||||
|
||||
/* İşlenmiş kayıt: aynı kutunun dolusu, üstüne solarak gelir. */
|
||||
.kt-akis-dolgu {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: var(--renk);
|
||||
opacity: 0;
|
||||
animation: kt-akis-dolgu 6s var(--egri-standart) var(--g, 0s) infinite;
|
||||
}
|
||||
|
||||
.kt-akis-nabiz,
|
||||
.kt-akis-vurgu {
|
||||
border-color: var(--renk);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.kt-akis-nabiz {
|
||||
animation: kt-akis-nabiz 6s var(--egri-guclu-cikis) var(--g, 0s) infinite;
|
||||
}
|
||||
|
||||
.kt-akis-vurgu {
|
||||
animation: kt-akis-vurgu 6s var(--egri-standart) var(--g, 0s) infinite;
|
||||
}
|
||||
|
||||
@keyframes kt-akis-x {
|
||||
0% {
|
||||
translate: var(--x1) var(--y1);
|
||||
translate: var(--x0) 0;
|
||||
}
|
||||
20%,
|
||||
100% {
|
||||
translate: var(--x1) 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kt-akis-y {
|
||||
0% {
|
||||
translate: 0 var(--y0);
|
||||
}
|
||||
20%,
|
||||
100% {
|
||||
translate: 0 var(--y1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kt-akis-iz {
|
||||
0%,
|
||||
3% {
|
||||
opacity: 0;
|
||||
}
|
||||
12%,
|
||||
82% {
|
||||
opacity: 1;
|
||||
7%,
|
||||
15% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
19%,
|
||||
100% {
|
||||
translate: var(--x2) var(--y2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kt-akis-kare {
|
||||
translate: var(--x1) var(--y1);
|
||||
@keyframes kt-akis-kare {
|
||||
0% {
|
||||
scale: 0.6;
|
||||
opacity: 0;
|
||||
animation: kt-akis 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
|
||||
border-radius: 50%;
|
||||
}
|
||||
4%,
|
||||
13% {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
17% {
|
||||
scale: 1.2;
|
||||
opacity: 1;
|
||||
border-radius: 25%;
|
||||
}
|
||||
20% {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
border-radius: 25%;
|
||||
}
|
||||
23%,
|
||||
100% {
|
||||
scale: 0.8;
|
||||
opacity: 0;
|
||||
border-radius: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kt-akis-dolgu {
|
||||
0%,
|
||||
13% {
|
||||
opacity: 0;
|
||||
}
|
||||
17%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Çekirdek geniş bir dikdörtgen: yatayda az, dikeyde çok büyür ki halka her
|
||||
yanda aynı kadar (≈6 px) açılsın. */
|
||||
@keyframes kt-akis-nabiz {
|
||||
0%,
|
||||
19.9% {
|
||||
scale: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
scale: 1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
32%,
|
||||
100% {
|
||||
scale: 1.06 1.2;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kt-akis-vurgu {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
2% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
10%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Oynatma durumu `animation` kısayolundan sonra gelmeli (kısayol sıfırlar). */
|
||||
:is(.kt-akis-x, .kt-akis-y, .kt-akis-iz, .kt-akis-kare, .kt-akis-dolgu, .kt-akis-nabiz, .kt-akis-vurgu) {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
[data-oynuyor] .kt-akis-kare {
|
||||
[data-oynuyor]
|
||||
:is(.kt-akis-x, .kt-akis-y, .kt-akis-iz, .kt-akis-kare, .kt-akis-dolgu, .kt-akis-nabiz, .kt-akis-vurgu) {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kt-akis-kare {
|
||||
:is(.kt-akis-x, .kt-akis-y, .kt-akis-iz, .kt-akis-kare, .kt-akis-dolgu, .kt-akis-nabiz, .kt-akis-vurgu) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Durağan kare: yolun ortasında ham kayıt — bilgi eksilmez. */
|
||||
.kt-akis-x {
|
||||
translate: calc((var(--x0) + var(--x1)) / 2) 0;
|
||||
}
|
||||
|
||||
.kt-akis-y {
|
||||
translate: 0 calc((var(--y0) + var(--y1)) / 2);
|
||||
}
|
||||
|
||||
.kt-akis-kare {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tema geçişi (DESIGN.md §2.3, lib/tema-gecisi.ts): yeni tema header'daki
|
||||
|
||||
@@ -7,7 +7,9 @@
|
||||
// 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 ilk gelince logo kareleri belirir, söner, içerik
|
||||
// backlog). Kontenjan türleri, netler ve mezun istihdamı kapalıyken gösterge
|
||||
// karesidir; dokununca kare panele dönüşüp bölümün tamamını açar
|
||||
// (BolumKutulari; Bilal, 11 Eki 2026). Açılış: veri ilk gelince logo kareleri belirir, söner, içerik
|
||||
// bloklar hâlinde netleşir (AcilisSahnesi kartsız modu); veri önbellekteyken
|
||||
// (çekmece yeniden açıldı) sahne yok, içerik 0,25 s solmayla gelir.
|
||||
// Kadın-erkek dağılımı program düzeyinde bilinçli olarak yok: YÖK Atlas 2026
|
||||
@@ -18,7 +20,8 @@
|
||||
// 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";
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { LayoutGroup, MotionConfig, motion } from "motion/react";
|
||||
import {
|
||||
BadgeCheck,
|
||||
Clock,
|
||||
@@ -27,17 +30,27 @@ import {
|
||||
Info,
|
||||
Languages,
|
||||
MapPin,
|
||||
Maximize2,
|
||||
Monitor,
|
||||
Users,
|
||||
Wallet,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { ProgramAyrintisi } from "@/app/api/program-ayrinti/route";
|
||||
import type { KontenjanTuruAnahtari, ProgramNetSatiri } from "@/types/yokatlas";
|
||||
import type {
|
||||
KontenjanTuruAnahtari,
|
||||
KontenjanTurleri,
|
||||
ProgramNetSatiri,
|
||||
} from "@/types/yokatlas";
|
||||
import { olay } from "@/lib/analitik";
|
||||
import { SURE, YAY } from "@/lib/hareket";
|
||||
// Yalnız saf modüller: bu bileşen istemcide çalışır, db'ye dokunan
|
||||
// program-ozellik.ts import EDİLMEZ (kadro toplamı API'den gelir)
|
||||
import { CINSIYET_KOSULU_METNI, KONTENJAN_TURU_ADI } from "@/lib/ozel-durum";
|
||||
import {
|
||||
CINSIYET_KOSULU_METNI,
|
||||
KONTENJAN_TURU_ADI,
|
||||
KONTENJAN_TURU_KIME,
|
||||
} from "@/lib/ozel-durum";
|
||||
import { trBaslikDuzeni } from "@/lib/slug";
|
||||
import { UNITUR_ETIKET } from "@/lib/unitur";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -252,18 +265,8 @@ function AyrintiIcerik({ durum, veri }: { durum: Durum; veri: ProgramAyrintisi |
|
||||
))}
|
||||
</div>
|
||||
<Kunye veri={veri} />
|
||||
<KontenjanTurleriBolumu veri={veri} />
|
||||
<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>
|
||||
<BolumKutulari veri={veri} />
|
||||
<Kosullar veri={veri} />
|
||||
<Istihdam veri={veri} />
|
||||
<UniversiteOzeti veri={veri} />
|
||||
<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}{" "}
|
||||
@@ -316,35 +319,364 @@ function Kunye({ veri }: { veri: ProgramAyrintisi }) {
|
||||
);
|
||||
}
|
||||
|
||||
function KontenjanTurleriBolumu({ veri }: { veri: ProgramAyrintisi }) {
|
||||
const k = veri.kontenjanTurleri;
|
||||
if (!k) return null;
|
||||
const satirlar = KONTENJAN_TURU_SIRASI.filter((t) => (k[t].kontenjan ?? 0) > 0);
|
||||
if (satirlar.length === 0) return null;
|
||||
const ozelVar = satirlar.some((t) => t !== "genel");
|
||||
/** "2 yerleşti · 1 boş kaldı" — yerleşen kontenjanı aşabilir (aktarım), o zaman yalnız sayı. */
|
||||
function yerlesenMetni(kontenjan: number, yerlesen: number | null): string {
|
||||
if (yerlesen == null) return "Yerleşen verisi yok";
|
||||
if (yerlesen === 0) return "Yerleşen olmadı";
|
||||
const bos = kontenjan - yerlesen;
|
||||
return bos > 0 ? `${sayi(yerlesen)} yerleşti · ${sayi(bos)} boş kaldı` : `${sayi(yerlesen)} yerleşti`;
|
||||
}
|
||||
|
||||
function KontenjanSatiri({ tur, k }: { tur: KontenjanTuruAnahtari; k: KontenjanTurleri }) {
|
||||
const kontenjan = k[tur].kontenjan ?? 0;
|
||||
return (
|
||||
<div data-sonra>
|
||||
<h3 className={BOLUM_BASLIK}>Kontenjan türleri ({k.yil})</h3>
|
||||
<p className={NOT}>
|
||||
{ozelVar
|
||||
? "ÖSYM okul birincileri, şehit ve gazi yakınları, depremzedeler ve 34 yaş üstü kadınlar için ayrı kontenjan ayırır; bu kontenjanlar yalnız o durumdaki adaylara açıktır ve her birinin taban sırası ayrı yayımlanır — o sıra burada yok."
|
||||
: "Bu programda yalnız genel kontenjan var."}
|
||||
<li className="flex items-start justify-between gap-4 border-b border-slate-100 py-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-base font-semibold text-slate-900">{KONTENJAN_TURU_ADI[tur]}</p>
|
||||
<p className="text-sm leading-snug text-slate-500">{KONTENJAN_TURU_KIME[tur]}</p>
|
||||
</div>
|
||||
<div className="shrink-0 text-right">
|
||||
<p className="font-heading text-xl font-bold leading-6 text-slate-900">
|
||||
{sayi(kontenjan)}
|
||||
<span className="font-sans text-sm font-semibold text-slate-400"> kişi</span>
|
||||
</p>
|
||||
<p className="text-sm leading-snug tabular-nums text-slate-500">
|
||||
{yerlesenMetni(kontenjan, k[tur].yerlesen)}
|
||||
</p>
|
||||
<dl className="mt-3 grid gap-x-6 gap-y-2 sm:grid-cols-2">
|
||||
{satirlar.map((t) => (
|
||||
<div key={t} className="flex items-baseline justify-between gap-3 border-b border-slate-100 py-2">
|
||||
<dt className="text-sm text-slate-700">{KONTENJAN_TURU_ADI[t]}</dt>
|
||||
<dd className="text-right text-sm tabular-nums text-slate-900">
|
||||
<span className="font-semibold">{sayi(k[t].kontenjan ?? 0)}</span>
|
||||
<span className="text-slate-500">
|
||||
{" "}
|
||||
kontenjan · {k[t].yerlesen != null ? sayi(k[t].yerlesen) : "—"} yerleşen
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
const GRUP_ETIKET = "flex items-center gap-2 text-sm font-semibold text-slate-500";
|
||||
|
||||
/** Kontenjan kırılımının özeti: kutudaki sayı ve açık paneldeki satırlar aynı hesaptan. */
|
||||
function kontenjanOzeti(k: KontenjanTurleri) {
|
||||
const satirlar = KONTENJAN_TURU_SIRASI.filter((t) => (k[t].kontenjan ?? 0) > 0);
|
||||
const adet = (t: KontenjanTuruAnahtari) => k[t].kontenjan ?? 0;
|
||||
const ozel = satirlar.filter((t) => t !== "genel");
|
||||
const genelVar = satirlar.includes("genel");
|
||||
const genel = genelVar ? adet("genel") : 0;
|
||||
const ozelToplam = ozel.reduce((a, t) => a + adet(t), 0);
|
||||
return {
|
||||
satirlar,
|
||||
ozel,
|
||||
genelVar,
|
||||
genel,
|
||||
ozelToplam,
|
||||
toplam: genel + ozelToplam,
|
||||
// Dolmayan özel kontenjan genele aktarılır: genelde yerleşen kontenjanı aşar.
|
||||
aktarim: genelVar && (k.genel.yerlesen ?? 0) > genel,
|
||||
};
|
||||
}
|
||||
|
||||
// Önce bütün (toplam + oran çubuğu), sonra parçalar: herkese açık yer ile
|
||||
// yalnız şartı taşıyana açık yer iki ayrı grup. Çubukta yalnız bu ikili ayrım
|
||||
// renklidir (mavi / nötr); türün adı her satırda yazılı, renk tek başına
|
||||
// anlam taşımaz.
|
||||
function KontenjanGovde({ k }: { k: KontenjanTurleri }) {
|
||||
const o = kontenjanOzeti(k);
|
||||
if (o.ozel.length === 0) {
|
||||
return (
|
||||
<>
|
||||
<p className={NOT}>
|
||||
Bu programda yalnız genel kontenjan var; özel durumlar için ayrı yer ayrılmamış.
|
||||
</p>
|
||||
<ul className="mt-1">
|
||||
<KontenjanSatiri tur="genel" k={k} />
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-600">
|
||||
Toplam <span className="font-semibold text-slate-900">{sayi(o.toplam)} kişilik</span> yer
|
||||
açıldı
|
||||
{o.genelVar
|
||||
? `: ${sayi(o.genel)} herkese açık, ${sayi(o.ozelToplam)} yalnız şartı taşıyan adaylara.`
|
||||
: "; tamamı yalnız şartı taşıyan adaylara."}
|
||||
</p>
|
||||
<div className="mt-3 flex h-3 gap-0.5 overflow-hidden rounded-full" aria-hidden>
|
||||
{o.satirlar.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className={cn("min-w-1.5", t === "genel" ? "bg-primary" : "bg-slate-300")}
|
||||
style={{ flexGrow: k[t].kontenjan ?? 0, flexBasis: 0 }}
|
||||
/>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
{o.genelVar ? (
|
||||
<>
|
||||
<p className={cn(GRUP_ETIKET, "mt-5")}>
|
||||
<span className="size-2.5 rounded-full bg-primary" aria-hidden />
|
||||
Herkese açık
|
||||
</p>
|
||||
<ul>
|
||||
<KontenjanSatiri tur="genel" k={k} />
|
||||
</ul>
|
||||
</>
|
||||
) : null}
|
||||
<p className={cn(GRUP_ETIKET, "mt-5")}>
|
||||
<span className="size-2.5 rounded-full bg-slate-300" aria-hidden />
|
||||
Yalnız şartı taşıyan adaylara
|
||||
</p>
|
||||
<ul>
|
||||
{o.ozel.map((t) => (
|
||||
<KontenjanSatiri key={t} tur={t} k={k} />
|
||||
))}
|
||||
</ul>
|
||||
<p className={cn(NOT, "mt-3")}>
|
||||
Özel kontenjanların taban sırası ayrı yayımlanır; o sıra burada yok.
|
||||
{o.aktarim
|
||||
? " Dolmayan özel kontenjan genele aktarılır; genel kontenjanda yerleşenin kontenjanı aşması bundandır."
|
||||
: ""}
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Gösterge karesi (DESIGN.md §4.11) — akademik göstergelerdeki karelerle aynı
|
||||
// sınıf seti; burada kare bir düğmedir.
|
||||
const KARE = "flex flex-col items-center justify-center rounded-3xl px-3 text-white";
|
||||
const KARE_ETIKET = "text-sm font-bold text-white/90";
|
||||
const KARE_DEV_SAYI = "font-heading text-5xl font-bold leading-none tracking-tight";
|
||||
const KARE_ORTA_SAYI = "font-heading text-3xl font-bold leading-none";
|
||||
const KARE_VURGU = "text-base font-bold text-white/90";
|
||||
const KOSE = 24; // rounded-3xl; motion köşeyi ölçek sırasında düzeltsin diye stilde
|
||||
|
||||
type KutuAnahtari = "kontenjan" | "netler" | "istihdam";
|
||||
type Kutu = {
|
||||
anahtar: KutuAnahtari;
|
||||
baslik: string;
|
||||
/** Karenin zemini (§2 "Gösterge karesi"); anlam taşımaz, etiket yazılı */
|
||||
renk: string;
|
||||
boy: string;
|
||||
ozet: ReactNode;
|
||||
icerik: ReactNode;
|
||||
};
|
||||
|
||||
function kutulariKur(veri: ProgramAyrintisi): Kutu[] {
|
||||
const kutular: Kutu[] = [];
|
||||
const k = veri.kontenjanTurleri;
|
||||
const o = k ? kontenjanOzeti(k) : null;
|
||||
if (k && o && o.satirlar.length > 0) {
|
||||
kutular.push({
|
||||
anahtar: "kontenjan",
|
||||
baslik: `Kontenjan türleri (${k.yil})`,
|
||||
renk: "bg-orange-500",
|
||||
boy: "min-h-40 py-4",
|
||||
ozet: (
|
||||
<>
|
||||
<span className={KARE_ETIKET}>Kontenjan</span>
|
||||
<span className={cn("mt-3", KARE_DEV_SAYI)}>{sayi(o.toplam)}</span>
|
||||
<span className={cn("mt-2", KARE_VURGU)}>
|
||||
{o.ozel.length === 0
|
||||
? "Tamamı genel"
|
||||
: o.genelVar
|
||||
? `${sayi(o.genel)} genel · ${sayi(o.ozelToplam)} özel`
|
||||
: "Tamamı özel"}
|
||||
</span>
|
||||
</>
|
||||
),
|
||||
icerik: <KontenjanGovde k={k} />,
|
||||
});
|
||||
}
|
||||
if (veri.netler.length > 0) {
|
||||
const son = veri.netler.reduce((a, b) => (b.yil > a.yil ? b : a));
|
||||
kutular.push({
|
||||
anahtar: "netler",
|
||||
baslik: "Son yerleşenin netleri",
|
||||
renk: "bg-primary",
|
||||
boy: "min-h-40 py-4",
|
||||
ozet:
|
||||
son.tabanPuan != null ? (
|
||||
<>
|
||||
<span className={KARE_ETIKET}>Son yerleşen</span>
|
||||
<span className={cn("mt-3", KARE_ORTA_SAYI)}>{ondalik(son.tabanPuan)}</span>
|
||||
<span className={cn("mt-2", KARE_VURGU)}>Puan ve netler</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className={KARE_ORTA_SAYI}>{son.yil}</span>
|
||||
<span className={cn("mt-1.5", KARE_ETIKET)}>Son yerleşenin netleri</span>
|
||||
</>
|
||||
),
|
||||
icerik: (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
),
|
||||
});
|
||||
}
|
||||
const istihdamCumlesi = istihdamMetni(veri);
|
||||
const v = veri.istihdam;
|
||||
if (v && istihdamCumlesi) {
|
||||
kutular.push({
|
||||
anahtar: "istihdam",
|
||||
baslik: "Mezun istihdamı",
|
||||
renk: "bg-indigo-500",
|
||||
boy: "min-h-28 py-3",
|
||||
ozet:
|
||||
v.istihdam != null ? (
|
||||
<>
|
||||
<span className={KARE_ORTA_SAYI}>%{ondalik(v.istihdam)}</span>
|
||||
<span className={cn("mt-1.5", KARE_ETIKET)}>İşe yerleşen mezun</span>
|
||||
</>
|
||||
) : v.isBulmaAy != null ? (
|
||||
<>
|
||||
<span className={KARE_ORTA_SAYI}>{ondalik(v.isBulmaAy)} ay</span>
|
||||
<span className={cn("mt-1.5", KARE_ETIKET)}>İlk işi bulma</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className={KARE_ORTA_SAYI}>{v.kazanc}</span>
|
||||
<span className={cn("mt-1.5", KARE_ETIKET)}>Kazanç grubu</span>
|
||||
</>
|
||||
),
|
||||
icerik: <p className={NOT}>{istihdamCumlesi}</p>,
|
||||
});
|
||||
}
|
||||
return kutular;
|
||||
}
|
||||
|
||||
/**
|
||||
* Kontenjan türleri · Son yerleşenin netleri · Mezun istihdamı: kapalıyken
|
||||
* gösterge kareleri (§4.11 masonry), dokununca kare tam genişlikte panele
|
||||
* dönüşür ve bölümün tamamı açılır (Bilal, 11 Eki 2026). Aynı anda tek panel
|
||||
* açıktır; öbür kareler panelin altında yan yana kalır ve dokununca yer
|
||||
* değiştirir. Dönüşüm `layoutId` ile (kare → panel aynı öğe sayılır), yay
|
||||
* `YAY.donusum`; "hareketi azalt"ta dönüşüm yok, içerik doğrudan değişir.
|
||||
*/
|
||||
function BolumKutulari({ veri }: { veri: ProgramAyrintisi }) {
|
||||
const [acik, setAcik] = useState<KutuAnahtari | null>(null);
|
||||
// Az önce kapanan kare: panelden küçülürken içi ezik görünmesin diye solarak gelir.
|
||||
const [kapanan, setKapanan] = useState<KutuAnahtari | null>(null);
|
||||
const kapatRef = useRef<HTMLButtonElement>(null);
|
||||
const kareRef = useRef<Partial<Record<KutuAnahtari, HTMLButtonElement | null>>>({});
|
||||
const ilk = useRef(true);
|
||||
|
||||
// Odak dönüşen öğeyle birlikte gider: açılınca çarpıya, kapanınca kareye.
|
||||
useEffect(() => {
|
||||
if (ilk.current) {
|
||||
ilk.current = false;
|
||||
return;
|
||||
}
|
||||
if (acik) kapatRef.current?.focus({ preventScroll: true });
|
||||
else if (kapanan) kareRef.current[kapanan]?.focus({ preventScroll: true });
|
||||
}, [acik, kapanan]);
|
||||
|
||||
const kutular = kutulariKur(veri);
|
||||
if (kutular.length === 0) return null;
|
||||
const acikKutu = kutular.find((x) => x.anahtar === acik) ?? null;
|
||||
const kapali = kutular.filter((x) => x.anahtar !== acik);
|
||||
// Kapalıyken masonry (sol: 1. ve 3., sağ: 2., aşağı kaymış); panel açıkken
|
||||
// kalan kareler yan yana.
|
||||
const sol = kapali.filter((_, i) => i % 2 === 0);
|
||||
const sag = kapali.filter((_, i) => i % 2 === 1);
|
||||
|
||||
function ac(anahtar: KutuAnahtari) {
|
||||
setKapanan(acik);
|
||||
setAcik(anahtar);
|
||||
}
|
||||
function kapat() {
|
||||
setKapanan(acik);
|
||||
setAcik(null);
|
||||
}
|
||||
|
||||
const kare = (x: Kutu) => (
|
||||
<motion.button
|
||||
key={x.anahtar}
|
||||
ref={(el) => {
|
||||
kareRef.current[x.anahtar] = el;
|
||||
}}
|
||||
layoutId={`ayrinti-kutu-${x.anahtar}`}
|
||||
type="button"
|
||||
aria-expanded={false}
|
||||
onClick={() => ac(x.anahtar)}
|
||||
style={{ borderRadius: KOSE }}
|
||||
className={cn(
|
||||
KARE,
|
||||
"relative w-full cursor-pointer transition-[scale] duration-150 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
x.renk,
|
||||
x.boy,
|
||||
)}
|
||||
>
|
||||
<motion.span
|
||||
className="flex flex-col items-center"
|
||||
initial={kapanan === x.anahtar ? { opacity: 0 } : false}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: SURE.standart, delay: 0.1 }}
|
||||
>
|
||||
{x.ozet}
|
||||
</motion.span>
|
||||
<Maximize2 className="absolute top-3 right-3 size-4 text-white/80" aria-hidden />
|
||||
<span className="sr-only"> — {x.baslik}, tamamını göster</span>
|
||||
</motion.button>
|
||||
);
|
||||
|
||||
return (
|
||||
<MotionConfig reducedMotion="user" transition={YAY.donusum}>
|
||||
<LayoutGroup>
|
||||
<div data-sonra className="mt-7">
|
||||
{acikKutu ? (
|
||||
<motion.section
|
||||
key={acikKutu.anahtar}
|
||||
layoutId={`ayrinti-kutu-${acikKutu.anahtar}`}
|
||||
aria-label={acikKutu.baslik}
|
||||
style={{ borderRadius: KOSE }}
|
||||
className="relative overflow-hidden bg-slate-50 p-4 sm:p-5"
|
||||
>
|
||||
{/* Karenin rengi panelin üstünde söner: renk de biçimle birlikte dönüşür. */}
|
||||
<motion.span
|
||||
aria-hidden
|
||||
className={cn("pointer-events-none absolute inset-0", acikKutu.renk)}
|
||||
initial={{ opacity: 1 }}
|
||||
animate={{ opacity: 0 }}
|
||||
transition={{ duration: SURE.standart, ease: "easeOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: SURE.standart, delay: 0.14 }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className="flex items-center gap-2.5 font-heading text-base font-bold text-slate-900">
|
||||
<span className={cn("size-3 shrink-0 rounded-[4px]", acikKutu.renk)} aria-hidden />
|
||||
{acikKutu.baslik}
|
||||
</h3>
|
||||
<button
|
||||
ref={kapatRef}
|
||||
type="button"
|
||||
onClick={kapat}
|
||||
className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-card text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<X className="size-4" aria-hidden />
|
||||
<span className="sr-only">{acikKutu.baslik} bölümünü küçült</span>
|
||||
</button>
|
||||
</div>
|
||||
{acikKutu.icerik}
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
) : null}
|
||||
{kapali.length > 0 ? (
|
||||
<div className={cn("flex items-start gap-3", acikKutu && "mt-3")}>
|
||||
<div className="flex flex-1 flex-col gap-3">{sol.map(kare)}</div>
|
||||
{sag.length > 0 ? (
|
||||
<div className={cn("flex flex-1 flex-col gap-3", !acikKutu && sol.length > 0 && "mt-12")}>
|
||||
{sag.map(kare)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</LayoutGroup>
|
||||
</MotionConfig>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -480,7 +812,8 @@ function Kosullar({ veri }: { veri: ProgramAyrintisi }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Istihdam({ veri }: { veri: ProgramAyrintisi }) {
|
||||
/** Mezun istihdamı cümlesi (TÜİK); gösterecek değer yoksa null. */
|
||||
function istihdamMetni(veri: ProgramAyrintisi): string | null {
|
||||
const v = veri.istihdam;
|
||||
if (!v) return null;
|
||||
const parcalar = [
|
||||
@@ -493,15 +826,8 @@ function Istihdam({ veri }: { veri: ProgramAyrintisi }) {
|
||||
const birlesik = parcalar.join(", ");
|
||||
const cumle = birlesik.charAt(0).toLocaleUpperCase("tr-TR") + birlesik.slice(1);
|
||||
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}>
|
||||
{cumle} (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>
|
||||
);
|
||||
const duzey = v.duzey === "lisans" ? "lisans" : "ön lisans";
|
||||
return `${cumle} (TÜİK ${v.yil}, ülke geneli, ${duzey} mezunları; üniversiteye göre değişir, kırılım yok).${ort}`;
|
||||
}
|
||||
|
||||
function UniversiteOzeti({ veri }: { veri: ProgramAyrintisi }) {
|
||||
|
||||
@@ -162,6 +162,15 @@ export function TercihHaritasi({
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Kenar eritme mask'ı yalnızca yakınlaşmış hâlde: tam görünümde Türkiye'nin
|
||||
// uçları (Edirne, Hakkari) rampaya giriyor ve harita kırpılmış gibi
|
||||
// okunuyordu (Bilal, 11 Eki 2026). Yakınlaşırken hemen açılır (ilk karede
|
||||
// kenarlar boş, geçiş görünmez); uzaklaşırken animasyon bitene kadar kalır
|
||||
// ki komşu iller sert kenarla kırpılmış görünmesin.
|
||||
// Uzaklaşma animasyonu sürerken true; rAF içinde yazılır (effect'te senkron
|
||||
// setState değil), bitince düşer.
|
||||
const [uzaklasiyor, setUzaklasiyor] = useState(false);
|
||||
|
||||
const animateTo = useCallback((hedef: ViewBox) => {
|
||||
cancelAnimationFrame(animRef.current);
|
||||
const kaynak = { ...vbRef.current };
|
||||
@@ -175,6 +184,8 @@ export function TercihHaritasi({
|
||||
// sf'e bağlı ölçüler tek render'da nihai değere oturur; rAF içinde
|
||||
// (asenkron) çağrıldığı için effect'te senkron setState sayılmaz.
|
||||
setVb(hedef);
|
||||
// Mount'taki tam görünüm → tam görünüm çağrısında açılmasın
|
||||
setUzaklasiyor(hedef === TAM_GORUNUM && kaynak.w !== hedef.w);
|
||||
}
|
||||
const t = Math.min(1, (now - t0) / SURE);
|
||||
const k = ease(t);
|
||||
@@ -190,6 +201,7 @@ export function TercihHaritasi({
|
||||
`${sonraki.x} ${sonraki.y} ${sonraki.w} ${sonraki.h}`,
|
||||
);
|
||||
if (t < 1) animRef.current = requestAnimationFrame(adim);
|
||||
else setUzaklasiyor(false);
|
||||
};
|
||||
animRef.current = requestAnimationFrame(adim);
|
||||
}, []);
|
||||
@@ -239,6 +251,7 @@ export function TercihHaritasi({
|
||||
// Ekran boyutu sabit kalsın diye SVG içi ölçüler zoom oranıyla çarpılır
|
||||
const sf = vb.w / HARITA_GENISLIK;
|
||||
const zoomda = Boolean(seciliIl);
|
||||
const kenarErit = zoomda || uzaklasiyor;
|
||||
const seciliPinler = useMemo(
|
||||
() => (seciliIl ? (ilPinleri.get(seciliIl) ?? []) : []),
|
||||
[ilPinleri, seciliIl],
|
||||
@@ -297,6 +310,28 @@ export function TercihHaritasi({
|
||||
return (
|
||||
<div>
|
||||
<div className="relative">
|
||||
{/* Harita arka plandır, kesilmez (DESIGN.md §4.17): il'e yakınlaşınca
|
||||
viewBox komşu illeri dikdörtgenle kırpıyor ve sert kenarlı bir
|
||||
kanvas görünüyordu (Bilal, 11 Eki 2026: "canvas çok keskin").
|
||||
Şehir/üniversite sayfalarındaki piksel haritayla aynı iki katlı
|
||||
mask: dış kat üst-alt, iç kat sol-sağ kenarı eritir; hiçbir
|
||||
kenarda yarım kesilmiş il kalmaz. Yalnız yakınlaşmışken (kenarErit);
|
||||
tam görünümde mask yok, ülke uçları solmaz. "Türkiye" düğmesi
|
||||
mask'ın dışında, erimez. */}
|
||||
<div
|
||||
className={
|
||||
kenarErit
|
||||
? "[mask-image:linear-gradient(to_bottom,transparent_0%,rgba(0,0,0,0.35)_7%,black_16%,black_84%,rgba(0,0,0,0.35)_93%,transparent_100%)]"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
kenarErit
|
||||
? "[mask-image:linear-gradient(to_right,transparent_0%,rgba(0,0,0,0.35)_5%,black_12%,black_88%,rgba(0,0,0,0.35)_95%,transparent_100%)]"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<svg
|
||||
ref={svgMount}
|
||||
className="h-auto w-full"
|
||||
@@ -485,6 +520,8 @@ export function TercihHaritasi({
|
||||
})
|
||||
: null}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{zoomda ? (
|
||||
<Button
|
||||
|
||||
@@ -1,24 +1,33 @@
|
||||
"use client";
|
||||
|
||||
// Veri akışı (DESIGN.md §4.28): listenin neyle kurulduğunu tek bakışta
|
||||
// gösterir. Ortada KolayTercih işareti, çevresinde altı girdi; her girdiden
|
||||
// merkeze düz bir çizgi iner, üzerinde piksel kare akar. Soldaki üçü
|
||||
// öğrencinin seçimi (turuncu), sağdaki üçü YÖK Atlas verisi (mavi) — ayrımı
|
||||
// renk değil, etiket ve yan taşır; renk yalnız eşlik eder (§2.2).
|
||||
// gösterir. Üstte öğrencinin üç seçimi (turuncu), altta YÖK Atlas'ın üç
|
||||
// verisi (mavi), ortada danışman: "DanışmanlaKonuş" çekirdeği. Her kutudan
|
||||
// çekirdeğe kıvrımlı bir yol iner, üzerinde kayıt akar. Ayrımı renk değil,
|
||||
// etiket ve sıra taşır; renk yalnız eşlik eder (§2.2).
|
||||
//
|
||||
// Kartsız ve zeminsizdir (Bilal, 7 Eki 2026): sayfa zemininde açıkta durur,
|
||||
// eskiden altında duran sayılar ve dürüstlük notu geniş ekranda iki yanına
|
||||
// dizilir (yerleşim app/page.tsx'te).
|
||||
// sayılar ve dürüstlük notu geniş ekranda iki yanına dizilir (app/page.tsx).
|
||||
//
|
||||
// Ortadaki işaret danışmanın kendisidir (Bilal, 11 Eki 2026): bir süre
|
||||
// DanışmanlaKonuş başlığındaki gibi nabız atar (danışman düşünüyor), sonra
|
||||
// üç kare girdilerden çıkan şeye dönüşür, durur ve logoya toplanır — sırayla
|
||||
// liste, trend çubukları, sohbet balonları (`AnimasyonluMark` `bicimler`,
|
||||
// §4.34). Eski "rota" (kareler birbirinin yerine süzülür) kaldırıldı.
|
||||
// Yerleşim ve kaydın yaşam döngüsü Arc UI "Data flow" gibidir (Bilal, 11 Eki
|
||||
// 2026: "ortadaki kısmı dikdörtgen formuna sokup DanışmanlaKonuş yazsak,
|
||||
// kutular attığım örnekteki gibi"; uiarc.dev/components/data-flow — Pro
|
||||
// bileşen, kaynağı alınmadı: önizlemedeki davranış DOM kaydıyla ölçülüp bizim
|
||||
// dille yeniden yazıldı, §11.3). Kutu = ikon üstte, etiket altta, tek yüzey.
|
||||
// Kayıt kutunun portundan küçük ve soluk çıkar, arkasında iki noktalık bir iz taşır;
|
||||
// yol boyunca içi boş noktadır (ham girdi). Çekirdeğe yaklaşınca hafifçe
|
||||
// şişer, dolar ve piksel kareye döner (işlenmiş), kenarda sönerek içeri
|
||||
// alınır; o an çekirdeğin çerçevesi kaydın renginde yanıp genişleyerek söner.
|
||||
// Her 1 sn'de bir kayıt kalkar; altı kayıt 6 sn'lik döngüde bir üstten bir
|
||||
// alttan yola çıkar.
|
||||
//
|
||||
// Esin: React Bits "Center Flow" (merkezden çevreye akan çizgiler). Kod bize
|
||||
// ait: parlama/bulanıklık yok (§2.2), akış yönü içeri doğrudur ve yalnız
|
||||
// ekrandayken oynar.
|
||||
// Çekirdek danışman panelinin başlığıdır (`DanismanBaslik`, sohbet-client.tsx
|
||||
// ile aynı desen): turuncu işaret nabız atar, yanında "DanışmanlaKonuş".
|
||||
// İşaret aralıklarla girdilerden çıkana dönüşür (liste → trend → sohbet,
|
||||
// `AnimasyonluMark` `bicimler`, §4.34).
|
||||
//
|
||||
// Geometri ve zamanlama globals.css'teki `kt-akis-*` kurallarındadır; buradan
|
||||
// yalnız kaydın iki ucu (--x0/--x1/--y0/--y1), rengi ve gecikmesi gider.
|
||||
|
||||
import { useEffect, useRef, useState, type CSSProperties } from "react";
|
||||
import { Compass, MapPin, PieChart, TrendingUp, Trophy, Users } from "lucide-react";
|
||||
@@ -30,41 +39,77 @@ import { cn } from "@/lib/utils";
|
||||
// başa döner (animasyonlu-mark.tsx).
|
||||
const CIKTILAR: readonly Bicim[] = ["deste", "trend", "sohbet"];
|
||||
|
||||
// Sağ yarı (−60°, 0°, 60°) veri; sol yarı (120°, 180°, 240°) öğrencinin seçimi.
|
||||
// Üst sıra öğrencinin seçimi, alt sıra veri; `sutun` soldan sağa 0–2.
|
||||
const DUGUMLER = [
|
||||
{ etiket: "Taban sıralamaları", ikon: TrendingUp, aci: -60, kaynak: "veri" },
|
||||
{ etiket: "Kontenjanlar", ikon: Users, aci: 0, kaynak: "veri" },
|
||||
{ etiket: "Doluluk oranları", ikon: PieChart, aci: 60, kaynak: "veri" },
|
||||
{ etiket: "Şehir tercihin", ikon: MapPin, aci: 120, kaynak: "sen" },
|
||||
{ etiket: "Senin sıralaman", ikon: Trophy, aci: 180, kaynak: "sen" },
|
||||
{ etiket: "İlgi alanların", ikon: Compass, aci: 240, kaynak: "sen" },
|
||||
{ etiket: "Senin sıralaman", ikon: Trophy, kaynak: "sen", sutun: 0 },
|
||||
{ etiket: "İlgi alanların", ikon: Compass, kaynak: "sen", sutun: 1 },
|
||||
{ etiket: "Şehir tercihin", ikon: MapPin, kaynak: "sen", sutun: 2 },
|
||||
{ etiket: "Taban sıralamaları", ikon: TrendingUp, kaynak: "veri", sutun: 0 },
|
||||
{ etiket: "Kontenjanlar", ikon: Users, kaynak: "veri", sutun: 1 },
|
||||
{ etiket: "Doluluk oranları", ikon: PieChart, kaynak: "veri", sutun: 2 },
|
||||
] as const;
|
||||
|
||||
/** viewBox 100×100: düğümlerin merkeze uzaklığı. Çizgi merkezden merkeze
|
||||
* çekilir ve karoların altında kalır; akan kare ise karoların dışında
|
||||
* kalan aralıkta yürür (iki uçtaki boşluk). */
|
||||
const YARICAP = 36;
|
||||
const DIS_BOSLUK = 9.5;
|
||||
const IC_BOSLUK = 15.5;
|
||||
/** Akan karenin kenarı (hero noktasının viewBox karşılığı). */
|
||||
const KARE = 2.4;
|
||||
// Kalkış sırası (DUGUMLER indeksleri): bir üstten bir alttan, komşu kutular
|
||||
// art arda kalkmaz; sahne bir yana yığılmaz.
|
||||
const KALKIS_SIRASI: readonly number[] = [0, 5, 1, 3, 2, 4];
|
||||
/** İz noktalarının kayda göre gecikmesi (sn): uzaktaki önce çizilir, küçük ve soluk kalır. */
|
||||
const IZ_GECIKMELERI = [0.14, 0.07] as const;
|
||||
/** İki kalkış arası (sn). Döngü 6 kayıt × 1 sn = 6 sn (globals.css). */
|
||||
const KALKIS_ARALIGI = 1;
|
||||
|
||||
// Üç ondalığa yuvarlanır: sunucu (Node) ile tarayıcının sin/cos'u son
|
||||
// basamakta ayrışıyor, yuvarlanmazsa hidrasyon uyuşmazlığı çıkıyor.
|
||||
const yuvarla = (v: number) => Math.round(v * 1000) / 1000;
|
||||
const nokta = (aci: number, r: number) => {
|
||||
const rad = (aci * Math.PI) / 180;
|
||||
// Sahne ölçüleri. Yatay eksen kabın eninin yüzdesi (SVG viewBox 0–100, CSS'te
|
||||
// cqw), dikey eksen rem'in 16'da biri (viewBox 0–400 = 25rem). globals.css'teki
|
||||
// `.kt-akis-sahne` ile aynı sayılar; biri değişirse öbürü de.
|
||||
const SUTUN_X = [16.667, 50, 83.333] as const;
|
||||
/** Yolların çekirdek kenarına vardığı noktalar: ortadan 4'er birim açılır. */
|
||||
const VARIS_X = [46, 50, 54] as const;
|
||||
const KUTU_BOY = 80;
|
||||
const CEKIRDEK_UST = 168;
|
||||
const CEKIRDEK_ALT = 232;
|
||||
const SAHNE_BOY = 400;
|
||||
|
||||
type Dugum = (typeof DUGUMLER)[number];
|
||||
/** Yolun iki ucu: kutunun çekirdeğe bakan kenarının ortası → çekirdek kenarı. */
|
||||
const uclar = (d: Dugum) => {
|
||||
const ustte = d.kaynak === "sen";
|
||||
return {
|
||||
x: yuvarla(50 + Math.cos(rad) * r),
|
||||
y: yuvarla(50 + Math.sin(rad) * r),
|
||||
x0: SUTUN_X[d.sutun],
|
||||
x1: VARIS_X[d.sutun],
|
||||
y0: ustte ? KUTU_BOY : SAHNE_BOY - KUTU_BOY,
|
||||
y1: ustte ? CEKIRDEK_UST : CEKIRDEK_ALT,
|
||||
};
|
||||
};
|
||||
/** Arc'ın yolu: iki ucu dikey çıkan S kıvrımı (kontrol noktaları orta yükseklikte). */
|
||||
const yol = (d: Dugum) => {
|
||||
const { x0, x1, y0, y1 } = uclar(d);
|
||||
const ym = (y0 + y1) / 2;
|
||||
return `M${x0} ${y0} C${x0} ${ym} ${x1} ${ym} ${x1} ${y1}`;
|
||||
};
|
||||
/** Kaydın rengi: öğrencinin seçimi turuncu, YÖK Atlas verisi mavi (§2.2). */
|
||||
const renk = (kaynak: Dugum["kaynak"]) =>
|
||||
kaynak === "sen" ? "var(--color-orange-500)" : "var(--primary)";
|
||||
/** Renk ve döngüdeki kalkış anı; kayda, kutu vurgusuna ve çekirdek nabzına gider. */
|
||||
const kayitStili = (i: number) =>
|
||||
({
|
||||
"--renk": renk(DUGUMLER[i].kaynak),
|
||||
"--g": `${KALKIS_SIRASI.indexOf(i) * KALKIS_ARALIGI}s`,
|
||||
}) as CSSProperties;
|
||||
/** Kaydın iki ucu CSS'e: x cqw, y rem. */
|
||||
const ucStili = (d: Dugum) => {
|
||||
const { x0, x1, y0, y1 } = uclar(d);
|
||||
return {
|
||||
"--x0": `${x0}cqw`,
|
||||
"--x1": `${x1}cqw`,
|
||||
"--y0": `${y0 / 16}rem`,
|
||||
"--y1": `${y1 / 16}rem`,
|
||||
} as CSSProperties;
|
||||
};
|
||||
|
||||
export function VeriAkisi({ className }: { className?: string }) {
|
||||
const kapRef = useRef<HTMLDivElement>(null);
|
||||
const [oynuyor, setOynuyor] = useState(false);
|
||||
|
||||
// Ekran dışındayken akış da işaret de durur (kareler CSS'te `data-oynuyor`
|
||||
// Ekran dışındayken akış da işaret de durur (kayıtlar CSS'te `data-oynuyor`
|
||||
// ile, işaret `oynat` ile).
|
||||
useEffect(() => {
|
||||
const kap = kapRef.current;
|
||||
@@ -82,94 +127,112 @@ export function VeriAkisi({ className }: { className?: string }) {
|
||||
ref={kapRef}
|
||||
data-oynuyor={oynuyor ? "" : undefined}
|
||||
role="img"
|
||||
aria-label="Listen altı şeyden kurulur: senin sıralaman, ilgi alanların ve şehir tercihin; YÖK Atlas'ın taban sıralamaları, kontenjanları ve doluluk oranları."
|
||||
className="group/akis relative aspect-square w-full"
|
||||
aria-label="Listen altı şeyden kurulur ve danışmanda birleşir: senin sıralaman, ilgi alanların ve şehir tercihin; YÖK Atlas'ın taban sıralamaları, kontenjanları ve doluluk oranları."
|
||||
className="kt-akis-sahne group/akis @container relative w-full"
|
||||
>
|
||||
<svg viewBox="0 0 100 100" className="absolute inset-0 size-full" aria-hidden>
|
||||
{DUGUMLER.map((d, i) => {
|
||||
const dugum = nokta(d.aci, YARICAP);
|
||||
const dis = nokta(d.aci, YARICAP - DIS_BOSLUK);
|
||||
const ic = nokta(d.aci, IC_BOSLUK);
|
||||
return (
|
||||
<g key={d.etiket}>
|
||||
{/* Düz çizgi: karodan merkeze; uçları karoların altında */}
|
||||
<line
|
||||
x1={dugum.x}
|
||||
y1={dugum.y}
|
||||
x2={50}
|
||||
y2={50}
|
||||
{/* Yollar: x kabın yüzdesi, y rem; çizgi kalınlığı ölçeklenmez */}
|
||||
<svg
|
||||
viewBox={`0 0 100 ${SAHNE_BOY}`}
|
||||
preserveAspectRatio="none"
|
||||
className="absolute inset-0 size-full"
|
||||
aria-hidden
|
||||
>
|
||||
{DUGUMLER.map((d) => (
|
||||
<path
|
||||
key={d.etiket}
|
||||
d={yol(d)}
|
||||
fill="none"
|
||||
stroke="var(--color-slate-300)"
|
||||
strokeWidth={1.5}
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
<rect
|
||||
x={-KARE / 2}
|
||||
y={-KARE / 2}
|
||||
width={KARE}
|
||||
height={KARE}
|
||||
rx={0.6}
|
||||
className={cn(
|
||||
"kt-akis-kare",
|
||||
d.kaynak === "sen" ? "fill-orange-500" : "fill-primary",
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--x1": `${dis.x}px`,
|
||||
"--y1": `${dis.y}px`,
|
||||
"--x2": `${ic.x}px`,
|
||||
"--y2": `${ic.y}px`,
|
||||
// Sırayla değil, dağınık kalkış: 0 · 1,1 · 0,5 · 1,6 · 0,3 · 1,3 sn
|
||||
animationDelay: `${[0, 1.1, 0.5, 1.6, 0.3, 1.3][i]}s`,
|
||||
} as CSSProperties
|
||||
}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</svg>
|
||||
|
||||
{DUGUMLER.map((d) => {
|
||||
const p = nokta(d.aci, YARICAP);
|
||||
const ustte = d.aci < 0 || d.aci > 180;
|
||||
return (
|
||||
{DUGUMLER.map((d, i) => (
|
||||
// Kutu (Arc "chip"): ikon üstte, etiket altta, tek beyaz yüzey
|
||||
<div
|
||||
key={d.etiket}
|
||||
className="absolute flex -translate-x-1/2 -translate-y-1/2 flex-col items-center"
|
||||
style={{ left: `${p.x}%`, top: `${p.y}%` }}
|
||||
className={cn(
|
||||
"absolute flex h-20 w-[30%] -translate-x-1/2 flex-col items-center justify-center gap-1.5 rounded-2xl border border-slate-200 bg-card px-1.5",
|
||||
d.kaynak === "sen" ? "top-0" : "bottom-0",
|
||||
)}
|
||||
style={{ left: `${SUTUN_X[d.sutun]}%` }}
|
||||
>
|
||||
{/* Beyaz, dolu karo (çizgi altından geçer); yanı ikonun rengi söyler */}
|
||||
<span className="flex size-14 items-center justify-center rounded-2xl border border-slate-200 bg-card">
|
||||
{/* Kalkış vurgusu: kayıt yola çıkarken çerçeve onun renginde kısa bir an yanar */}
|
||||
<span
|
||||
className="kt-akis-vurgu pointer-events-none absolute -inset-px rounded-2xl border"
|
||||
style={kayitStili(i)}
|
||||
/>
|
||||
<d.ikon
|
||||
className={cn("size-6", d.kaynak === "sen" ? "text-orange-500" : "text-primary")}
|
||||
className={cn(
|
||||
"size-5 shrink-0",
|
||||
d.kaynak === "sen" ? "text-orange-500" : "text-primary",
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
</span>
|
||||
{/* Üstteki iki düğümde etiket karonun üstünde: altında çizgi merkeze iniyor */}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute w-20 text-center text-xs font-semibold leading-tight text-slate-700",
|
||||
ustte ? "bottom-full mb-1.5" : "top-full mt-1.5",
|
||||
)}
|
||||
>
|
||||
<span className="text-center text-xs font-semibold leading-tight text-balance text-slate-700">
|
||||
{d.etiket}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
|
||||
<div className="absolute top-1/2 left-1/2 flex size-24 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-3xl border border-slate-200 bg-card">
|
||||
{/* Danışmanın nabzı, aralıklarla çıktıya dönüşür (liste → trend →
|
||||
sohbet) ve logoya toplanır; yalnız ekrandayken oynar. */}
|
||||
{/* Çekirdek: danışman panelinin başlığı (DanismanBaslik deseni) */}
|
||||
<div className="absolute top-[10.5rem] left-1/2 flex h-16 -translate-x-1/2 items-center gap-1 rounded-2xl border border-slate-200 bg-card pr-5 pl-4">
|
||||
{/* Varış nabzı: kayıt içeri alınınca çerçeve onun renginde yanar,
|
||||
genişleyerek söner. Her kaydın kendi nabzı, aynı gecikmeyle. */}
|
||||
{DUGUMLER.map((d, i) => (
|
||||
<span
|
||||
key={d.etiket}
|
||||
className="kt-akis-nabiz pointer-events-none absolute -inset-px rounded-2xl border"
|
||||
style={kayitStili(i)}
|
||||
/>
|
||||
))}
|
||||
<AnimasyonluMark
|
||||
oynat={oynuyor}
|
||||
varyant="nabiz"
|
||||
renk="turuncu"
|
||||
bicimler={CIKTILAR}
|
||||
className="size-14"
|
||||
className="size-7"
|
||||
/>
|
||||
<span className="font-bricolage text-xl tracking-tighter whitespace-nowrap text-foreground">
|
||||
<span className="font-light">Danışmanla</span>
|
||||
<span className="font-semibold">Konuş</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Kayıtlar kutuların üstünde: porttan doğar, çekirdek kenarında söner.
|
||||
Yatay ve dikey kayma ayrı öğelerde; ikisi birlikte yolun eğrisini çizer. */}
|
||||
{DUGUMLER.map((d, i) => (
|
||||
<span
|
||||
key={d.etiket}
|
||||
aria-hidden
|
||||
className="kt-akis-kayit-kap"
|
||||
style={{ ...kayitStili(i), ...ucStili(d) }}
|
||||
>
|
||||
<span className="kt-akis-port">
|
||||
<span className="kt-akis-vurgu" />
|
||||
</span>
|
||||
{/* İz: kaydın ardından aynı eğriyi biraz gecikmeyle izleyen iki nokta */}
|
||||
{IZ_GECIKMELERI.map((ek) => (
|
||||
<span key={ek} className="kt-akis-x" style={{ "--ek": `${ek}s` } as CSSProperties}>
|
||||
<span className="kt-akis-y">
|
||||
<span className="kt-akis-iz" />
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
<span className="kt-akis-x">
|
||||
<span className="kt-akis-y">
|
||||
<span className="kt-akis-kare">
|
||||
<span className="kt-akis-dolgu" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<figcaption className="mt-8 text-center text-sm leading-relaxed text-slate-500">
|
||||
Solda senin seçimlerin, sağda YÖK Atlas verisi. Yapay zekâ yalnız bu
|
||||
Üstte senin seçimlerin, altta YÖK Atlas verisi. Yapay zekâ yalnız bu
|
||||
ikisinin kesiştiği programlardan seçer.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -68,6 +68,18 @@ export const KONTENJAN_TURU_ADI: Record<KontenjanTuruAnahtari, string> = {
|
||||
kadin34: "34 yaş üstü kadın",
|
||||
};
|
||||
|
||||
/**
|
||||
* Kontenjan türü → kimin başvurabildiği (çekmecedeki satırın alt satırı).
|
||||
* Tam şartlar ÖSYM kılavuzundadır; burası tek satırlık tarif.
|
||||
*/
|
||||
export const KONTENJAN_TURU_KIME: Record<KontenjanTuruAnahtari, string> = {
|
||||
genel: "Sıralaması yeten her aday",
|
||||
okulBirincisi: "Lisesini bu yıl birincilikle bitirenler",
|
||||
sehitGaziYakini: "Şehit yakınları, gaziler ve gazi yakınları",
|
||||
depremzede: "6 Şubat 2023 depremlerinden etkilenen adaylar",
|
||||
kadin34: "34 yaşını doldurmuş kadın adaylar",
|
||||
};
|
||||
|
||||
/** Bilinmeyen değerleri atar, tekrarları birleştirir; sıra sabit listeye göre. */
|
||||
export function ozelDurumDogrula(girdi: unknown): OzelDurum[] {
|
||||
if (!Array.isArray(girdi)) return [];
|
||||
|
||||
Reference in New Issue
Block a user