/* ==========================================================================
   5. PORTAL PENCERESİ
   ========================================================================== */
/* ÖNEMLİ — ANİMASYON MİMARİSİ
   Pencere HER ZAMAN tam ekran boyutunda duruyor. Önizleme kartı, aynı
   kutunun `transform: translate() scale()` ile küçültülmüş hali.
   Böylece açılış/kapanış boyunca:
     • width/height/top/left hiç değişmiyor  → layout tetiklenmiyor
     • içerik bir kez ölçülüyor              → 1000px'lik CV yeniden akmıyor
     • değişen tek şey transform + opacity   → yeniden boyama yok

   Transform'un kendisi geçiş listesinde değil, dört değişkenden her kare
   yeniden hesaplanıyor (sebebi hemen aşağıda). Yani kare başına ufak bir
   stil hesabı var; boyama ve yerleşim yine yok, uygulanan şey hâlâ tek bir
   transform. `--c` zaten böyle çalışıyordu, ona üç değişken daha katıldı. */
/* ANİMASYONUN NEYE BAĞLI OLDUĞU — VE NEDEN `transform` DEĞİL
   Dördü de KAYITLI: kayıtsız bir özel değişken iki değer arasında
   yumuşak geçemez, sadece sıçrar.

   Ama asıl sebep bu değil. Geçiş listesinde `transform` yazsaydı tarayıcı
   onu MATRİS olarak ara değerliyor, `--c`yi ise ayrıca sayı olarak; ikisi
   yalnızca başlangıçta ve sonda birbirini tutuyor, arada tutmuyor. İçeriğin
   iptal çarpanı `--c`ye bağlı olduğu için tam ortada telafi eksik kalıyor
   ve görsel yanlara doğru geriliyordu — şeritten açılan dar bir baskıda
   ölçtüğümüzde %45'e varıyordu.
   Transform artık geçiş listesinde değil; bu dört değişkenden HER KARE
   yeniden hesaplanıyor. Pencere yatayda `k/c`, dikeyde `k`; içerik dikeyde
   `1/c` ile telafi ediliyor, yani net ölçek her karede tam olarak `k/c` —
   iki eksende de aynı. Gerilme artık yapısal olarak imkânsız. */
@property --c {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

@property --k {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.3;
}

@property --px {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --py {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* Yığındaki bir parçanın derinliği: öndeki 0, arkasındaki 1, onun arkasındaki
   2… `--c` gibi bunun da KAYITLI olması şart, yoksa sıra değişimi iki değer
   arasında yumuşak geçmez, sıçrar. */
@property --d {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.portal-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--surface);
    border: none;
    border-radius: 18px;   /* önizlemede ölçekle çarpılıp ~4px görünür */
    box-shadow: var(--card-shadow);
    pointer-events: none;
    opacity: 0;
    /* KAPALIYKEN GERÇEKTEN YOK — `opacity: 0` YETMİYOR
       Bu kutu tam ekran, zemini KREM (`--surface`) ve üstünde hem bir
       `transform` hem de `backface-visibility: hidden` var. İkisi birden
       onu kalıcı olarak kendi GPU katmanına alıyor. `opacity: 0` o katmanı
       yok etmiyor, yalnızca saydam yapıyor: krem bir yüzey sayfanın üstünde
       durmaya devam ediyor.

       iOS Safari üst/alt çubuklarının rengini bileşik katmanlardan
       örneklüyor. Panel bir kez açılıp katman KREM olarak boyandıktan sonra,
       kapanışta katman saydamlaşıyor ama yeniden boyanmıyor — Safari da
       örneklediği kremde kalıyor. Telefonda görülen tam olarak buydu:
       ortası hardal, üstü ve altı krem bir ekran, ve `theme-color`a ne
       yazılırsa yazılsın geri dönmüyordu (denendi, bkz. theme.js).

       `visibility: hidden` katmanı boyama ağacından tamamen çıkarıyor:
       örneklenecek krem kalmıyor. Gizlenme, sönümleme BİTTİKTEN sonraya
       erteleniyor (`visibility 0s linear 0.2s`), yoksa fare karttan
       ayrıldığında kart solmak yerine bir anda kayboluyordu. Açılışta ise
       gecikme yok — `.active` kuralı kendi geçiş listesini yazıyor. */
    visibility: hidden;
    /* KART GEOMETRİSİ
       Kutu her zaman tam ekran; kart bunun küçültülmüş hali. Ama artık
       ölçek tek yönlü değil: yatayda ayrıca `--c` kadar daraltılıyor, ki
       kart 16:9 bir dikdörtgen değil kareye yakın dursun.
       Daraltmanın içeriği ezmemesi için `.wrap` yatayda tam olarak `--c`
       kadar GERİ geriliyor (aşağıda). İki çarpan birbirini yapısal olarak
       götürdüğü için içeriğin toplam ölçeği her an tam olarak `--k` — yani
       animasyonun HİÇBİR karesinde harfler yamulmuyor.
       Kart kısaldığı için `--k` de büyüdü: önizleme artık ne barındırdığını
       eskisinden belirgin biçimde daha fazla gösteriyor. */
    --px: 0px;
    --py: 0px;
    --k: 0.3;
    --c: 1;
    transform: translate(var(--px), var(--py)) scale(calc(var(--k) / var(--c)), var(--k));
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Önizleme (hover) modu: hızlı geçiş. Geçen `transform` değil, onu
       besleyen dört değişken (bkz. yukarıdaki @property notu). */
    transition: --px 0.25s var(--ease-out),
                --py 0.25s var(--ease-out),
                --k 0.25s var(--ease-out),
                --c 0.25s var(--ease-out),
                opacity 0.2s var(--ease-out),
                visibility 0s linear 0.2s;
}

/* `will-change` yalnızca kart görünürken devrede: boşta duran, tam ekran
   boyutunda ve tüm portfolyoyu taşıyan bir katmanı sürekli GPU belleğinde
   tutmanın anlamı yok — şerit dönerken bile orada duruyordu. `.active` her
   zaman `.expanded`ten önce eklendiği için tarayıcı hazırlanacak zamanı
   fazlasıyla buluyor. */
/* Geçiş listesi burada TEKRAR yazılıyor: tek fark, gizlenmeyi sona erteleyen
   gecikmenin olmaması. Açılırken kutu ANINDA görünür olmalı, yoksa sönümleme
   ilk 0,2 saniyesini görünmez geçirirdi. */
.portal-window.active {
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity;
    transition: --px 0.25s var(--ease-out),
                --py 0.25s var(--ease-out),
                --k 0.25s var(--ease-out),
                --c 0.25s var(--ease-out),
                opacity 0.2s var(--ease-out),
                visibility 0s;
}

/* ÖNİZLEME KARTI FAREYE AÇIK
   Kart eskiden `pointer-events: none` ile duruyordu: üstüne gelmek onu
   kapatıyordu, çünkü fare butondan ayrılınca kartın kendisi hiçbir olay
   almıyordu — JS'teki `mouseenter`/`mouseleave` dinleyicileri hiç
   çalışmıyordu. Artık kart bir düğme gibi davranıyor: üstünde durmak açık
   tutuyor, tıklamak tam ekrana açıyor.
   Hedef YALNIZCA kartın kendisi. İçerik `#portal-main` üzerinden kapalı
   tutuluyor (aşağıda): minyatürdeki satırların ve kartların kendi hover
   durumlarını tetiklemesi, 0.3 ölçekte titrek ve yanıltıcı olurdu — orada
   ayrı ayrı nişan alınacak bir şey yok, kartın tamamı tek bir hedef. */
.portal-window.active:not(.expanded) { pointer-events: auto; cursor: pointer; }

/* Kart çerçevesi ayrı bir katmanda: `border` kullanmak, açılırken içerik
   kutusunun genişliğini değiştirip yeniden akışa sebep olurdu. */
.portal-window::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 4px var(--card-ring);
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.3s var(--ease-out);
}

.portal-window.expanded {
    border-radius: 0;
    z-index: 100;
    pointer-events: all;

    /* border-radius kompozitörde çalışmaz, boyama gerektirir; bu yüzden kutu
       HÂLÂ KÜÇÜKKEN, ilk 0.22 saniyede bitiriliyor.
       Gölge ise artık hiç animasyona girmiyor: tam ekran bir kutunun bulanık
       gölgesini kare kare yeniden boyamak açılışın en pahalı işiydi. Sınıf
       eklendiği anda tek seferde kayboluyor — kart o sırada küçük olduğu için
       gözle fark edilmiyor. */
    transition: --px var(--anim-duration) var(--ease-panel),
                --py var(--anim-duration) var(--ease-panel),
                --k var(--anim-duration) var(--ease-panel),
                --c var(--anim-duration) var(--ease-panel),
                border-radius 0.22s ease-out,
                opacity 0.3s var(--ease-out);
    box-shadow: none;
}

.portal-window.expanded::before { opacity: 0; }

.portal-window.closing {
    opacity: 0;
    transform: scale(0.985);
    transition: transform 0.32s var(--ease-out), opacity 0.28s ease-out;
    pointer-events: none;
}

.close-btn {
    position: fixed;
    top: max(40px, calc(env(safe-area-inset-top) + 20px));
    right: max(40px, calc(env(safe-area-inset-right) + 20px));
    background: var(--text);
    color: var(--surface);
    border: none;
    padding: 12px 24px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.4s var(--ease-out),
                transform 0.4s var(--ease-out),
                background 0.3s var(--ease-out), color 0.3s var(--ease-out);
    z-index: 200;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.portal-window.expanded .close-btn {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.close-btn:hover { background: var(--hover-bg); color: var(--hover-text); transform: scale(1.05); }

/* Buton koyu, portal arka planı açık: tek renkli bir halka her iki zeminde
   birden görünemiyordu. İçeride açık, dışarıda koyu çift halka. */
.close-btn:focus-visible {
    outline: 2px solid var(--surface);
    outline-offset: -5px;
    box-shadow: 0 0 0 2px var(--text);
}

/* ==========================================================================
   6. İÇERİK KABI
   ========================================================================== */
#portal-main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.portal-window.is-contact #portal-main { align-items: center; }

/* Minyatürdeyken içerik değil, kartın kendisi tıklanıyor: tıklama `.portal-window`
   üzerinde toplanıyor ve paneli açıyor. Bu olmasaydı minyatürdeki bir ızgara
   kartına denk gelen tıklama doğrudan iş detayını açardı — 4 piksellik bir
   hedefe kazara basmak. */
.portal-window:not(.expanded) #portal-main { pointer-events: none; }

#portal-main::-webkit-scrollbar { width: 6px; }
#portal-main::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-md); }
/* Minyatürde çubuk görünmesin — yalnızca renk değişiyor, genişlik sabit. */
.portal-window:not(.expanded) #portal-main::-webkit-scrollbar-thumb { background: transparent; }

.wrap {
    /* Kartın yatay daraltmasının tam tersi. Pencerenin `k/c` yatay ölçeğiyle
       çarpıldığında `c` sadeleşiyor ve içerik her an düzgün `k` ölçeğinde
       kalıyor. Bu iptal cebirsel, zamana bağlı değil — yani geçiş sırasında
       da geçerli. */
    transform: scaleX(var(--c));
    transform-origin: center top;
    width: min(1000px, 92vw);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Üstte fazladan pay: `.close-btn` 40px'ten başlıyor ve sabit konumlu.
       60px'te portfolyo dizininin ilk satırı butonun altına giriyordu. */
    padding: 104px 0 60px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.wrap--cv { gap: 40px; }

.wrap--contact {
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 60px;
    padding: 0;
}