/* ═══════════════════════════════════════════════════════════════════════════
   petPal — canlı sanal dost (SVG karakter + davranış)
   Ne yapar: Ekranın altında gerçek bir kedi gibi yürüyen, üzerine gelince mırlayıp
   sevilen, dokunulmayınca ruh hâline göre gezen/uyuyan bir karakteri biçimler.
   Neden var: Emoji/gif değil — kendi çizdiğimiz, ölçeklenebilir, sunucu yükü sıfır bir
   SVG karakter. Bağımlılık kancası: karakter "canlı" hissettiği ölçüde geri getirir.
   NEDEN SVG (gif/görsel değil): keskin, her ölçekte net, tek istek bile değil (satır içi),
   ruh hâline göre parçaları ayrı ayrı canlandırılabiliyor (bacak/kuyruk/göz).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kapsayıcı: görünüm penceresinin altına sabit; JS `left` ile yürütür.
   NEDEN pointer-events:none kapsayıcıda: kedi sayfanın altında dolaşırken altındaki
   bağlantı/butonların tıklanmasını engellememeli. Yalnız kedinin kendisi tıklanabilir. */
.petPal {
    position: fixed;
    top: 0;
    left: 0;
    width: 124px;
    height: 114px;
    z-index: 60;
    pointer-events: none;
    /* Varsayılan kaplama: marka maskotu (mor/beyaz iki renkli). coat-* ile değişir. */
    --ppMain: #8B6FC9; --ppDark: #6B4FA6; --ppWhite: #EDE9F5; --ppBelly: #F4F1FA;
    --ppInner: #F3B9CE; --ppNose: #E888A8; --ppEye: #2A1E3D; --ppIris: #5B3FA0;
    transform: translate(-200px, 0);         /* JS gerçek konumu verene dek ekran dışı */
    will-change: transform;
    /* yürüyüş: konum geçişi JS'in verdiği süreyle yumuşasın. NEDEN ease-in-out (linear değil):
       linear = robotik "pacman" hissi; ease-in-out kediyi hızlanıp yavaşlayan doğal adımlarla yürütür. */
    transition: transform var(--ppMove, 0s) cubic-bezier(.45,.05,.55,.95);
}
.petPal.is-hidden { display: none; }

/* NEDEN .petRoom .petPal { position: absolute } (13 Eylül 2026 düzeltmesi, sahip bulgusu —
   petHata2.png, GERÇEK kök neden): `.petPal`in temel `position:fixed`i, kedinin herhangi bir
   ODA olmadan TÜM görünüm penceresinde dolaştığı ekranlar (anasayfa, /sanal-dost vb.) için
   doğru — orada `petPal.js`teki `room` değişkeni null, `areaRect()` de `{left:0,top:0}`
   döner, yani viewport-mutlak konum = oda-göreli konum (fark yok).
   AMA `/account/pet` (tam ekran oyun) sayfasında kedi bir `.petRoom` İÇİNDE render ediliyor
   ve `petPal.js`teki TÜM konum matematiği (yürüme sınırları, yatağa gitme) ODANIN kendi
   `clientWidth/clientHeight`ine ve `bed.getBoundingClientRect() - room.getBoundingClientRect()`
   FARKINA göre hesaplanıyor — yani ODAYA GÖRE. `position:fixed` (viewport-göreli) bir
   elemente bu oda-göreli sayıları doğrudan `transform:translate()` ile vermek, odanın
   kendisinin viewport içindeki (üst bar + sol menü yüzünden sıfır olmayan) konumunu
   ATLIYORDU — kedi hep GERÇEK hedefinden (ör. yatak) tam odanın kendi sol-üst ofseti kadar
   (üst bar+menü yüksekliği/genişliği) kaymış görünüyordu; sonuç: "uyuyan" kedi yatakta değil
   ekranın sol-üst köşesinde, üstteki durum metniyle üst üste biniyordu. `.petRoom` zaten
   `position:relative` olan `.petStage`ye göre `position:absolute` — içindeki `.petPal`i de
   `position:absolute` yapmak, JS'in ürettiği oda-göreli x/y'yi DOĞRU şekilde `.petRoom`un
   kendi sol-üst köşesine göre uygular; başka hiçbir JS değişikliği gerekmiyor. */
.petRoom .petPal { position: absolute; }

/* ── Kaplama renkleri ("renk ayarı") — iki renkli (renkli sırt + beyaz yüz/karın) ── */
.petPal.coat-orange { --ppMain:#E8A05A; --ppDark:#CE7F38; --ppWhite:#F0E7DB; --ppBelly:#F6EFE4; --ppInner:#F2B6B6; --ppNose:#E8788A; --ppEye:#33302E; --ppIris:#7DBE6A; }
.petPal.coat-gray   { --ppMain:#9AA6B4; --ppDark:#727F8E; --ppWhite:#E7ECF1; --ppBelly:#EFF3F7; --ppInner:#F3B9CE; --ppNose:#C98BA0; --ppEye:#2E3138; --ppIris:#6B8CAE; }
.petPal.coat-black  { --ppMain:#4A4A57; --ppDark:#33333D; --ppWhite:#E9E9F0; --ppBelly:#F2F2F7; --ppInner:#E8A7B8; --ppNose:#E888A8; --ppEye:#1C1C22; --ppIris:#8FC46B; }
.petPal.coat-cream  { --ppMain:#E4C68C; --ppDark:#CBA85E; --ppWhite:#EDE3CE; --ppBelly:#F3ECDC; --ppInner:#F2C4B0; --ppNose:#E0A088; --ppEye:#5B4A38; --ppIris:#C79A6A; }

/* Köpek: kulak (sarkık) + kuyruk değişimi. Palet coat-* ile ortak. */
.petPal .ppEarDog { display: none; }
.petPal .ppTailDog { display: none; }
.petPal.ppDog .ppEarCat { display: none; }
.petPal.ppDog .ppTailCat { display: none; }
.petPal.ppDog .ppEarDog { display: inline; }
.petPal.ppDog .ppTailDog { display: inline; }

/* SVG dolgu sınıfları — palet değişkenlerini parçalara bağlar. */
.ppFillMain { fill: var(--ppMain); }
.ppFillDark { fill: var(--ppDark); }
.ppFillWhite { fill: var(--ppWhite); }
.ppFillBelly { fill: var(--ppBelly); }
.ppFillInner { fill: var(--ppInner); }
.ppFillNose { fill: var(--ppNose); }
.ppFillEye { fill: var(--ppEye); }
.ppFillIris { fill: var(--ppIris); }
.ppStrokeMain { stroke: var(--ppMain); }
.ppStrokeWhite { stroke: var(--ppWhite); }
.ppStrokeDark { stroke: var(--ppDark); }

/* Kedi gövdesi — tek tıklanabilir alan. */
.ppCat {
    position: absolute;
    left: 0; top: 0;
    width: 124px; height: 114px;
    pointer-events: auto;
    cursor: pointer;
    overflow: visible;
    /* NEDEN GÖLGE: Kedinin yüz/karnı beyaz; beyaz zeminde "yarım" görünüyordu. Yumuşak gölge
       tüm silueti (beyaz kısımlar dâhil) zeminden ayırır — her arka planda tam görünür. */
    filter: drop-shadow(0 2px 3px rgba(50,30,80,.22));
}
/* Kaçış: irkilir (kulaklar geri, biraz eğilir). */
.petPal.is-fleeing .ppEars { transform: rotate(0) translateY(2px); }
.petPal.is-fleeing .ppShake { transform: scaleY(.94); }

/* Yön: sola giderken tüm çizimi aynala. */
.ppArt { transform-origin: 50% 50%; }
.petPal.face-left .ppArt { transform: scaleX(-1); }

/* Parçaların dönme merkezleri çizimin kendi kutusuna göre. */
.ppLeg, .ppTail, .ppEars, .ppEyes { transform-box: fill-box; }

/* ── Bacaklar: üstten (kalçadan) sallanır. Çapraz yürüyüş: A ve B çifti ters fazda. ── */
.ppLeg { transform-origin: 50% 8%; }
.petPal.is-walking .ppLegA { animation: ppLegA var(--ppStep, .46s) linear infinite; }
.petPal.is-walking .ppLegB { animation: ppLegB var(--ppStep, .46s) linear infinite; }
@keyframes ppLegA { 0%,100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }
@keyframes ppLegB { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }

/* ── Gövde: yürürken hafif zıplama ── */
.ppBody, .ppHead, .ppEars, .ppEyes, .ppFace { transform-box: fill-box; }
.petPal.is-walking .ppBob { animation: ppBob var(--ppStep, .46s) ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ppBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ── Kuyruk: her zaman yavaşça sallanır (canlılık işareti) ── */
.ppTail { transform-origin: 95% 95%; animation: ppTail 2.4s ease-in-out infinite; }
@keyframes ppTail { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(13deg); } }
.petPal.is-purring .ppTail { animation-duration: 1.1s; }   /* mutlu → hızlı sallanır */

/* ── Kulak seğirmesi (ara sıra) ── */
.ppEars { transform-origin: 50% 90%; animation: ppEar 6s ease-in-out infinite; }
@keyframes ppEar { 0%,90%,100% { transform: rotate(0); } 94% { transform: rotate(-9deg); } 97% { transform: rotate(4deg); } }

/* ── Göz kırpma (açık gözde) ── */
.ppEyes { transform-origin: 50% 40%; animation: ppBlink 4.2s ease-in-out infinite; }
@keyframes ppBlink { 0%,95%,100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }

/* Kapalı göz (uyku/mırlama) — açık gözleri gizle, kavisli kapalı gözü göster. */
.ppEyeClosed { opacity: 0; }
.petPal.is-purring .ppEyes,
.petPal.is-sleeping .ppEyes { animation: none; }
.petPal.is-purring .ppEyeOpen,
.petPal.is-sleeping .ppEyeOpen { opacity: 0; }
.petPal.is-purring .ppEyeClosed,
.petPal.is-sleeping .ppEyeClosed { opacity: 1; }

/* ── Mırlama: tüm kedi hafifçe titrer + yanaklar allanır ── */
.petPal.is-purring .ppShake { animation: ppShiver .13s linear infinite; transform-box: fill-box; }
@keyframes ppShiver { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-.7px); } 50% { transform: translateX(.5px); } 75% { transform: translateX(-.4px); } }
.ppBlush { opacity: 0; transition: opacity .2s; }
.petPal.is-purring .ppBlush { opacity: .8; }

/* ── Uyku: gövde biraz çöker, yürüme durur ── */
.petPal.is-sleeping .ppShake { transform: translateY(6px); }
/* Uyurken bacaklar GİZLİ (kedi kıvrılıp minderde yatar; ayakları dışarı çıkmasın — sahibin isteği). */
.petPal.is-sleeping .ppLeg { opacity: 0; }
/* Uyurken gözler kapalı (zaten is-sleeping ile; net olsun). */
.petPal.is-sleeping .ppEyeOpen { opacity: 0; }
.petPal.is-sleeping .ppEyeClosed { opacity: 1; }

/* ── Yükselen kalpler (mırlarken JS üretir) ── */
.ppHeart {
    position: absolute; bottom: 54px; left: 44px;
    font-size: 15px; pointer-events: none; opacity: 0;
    animation: ppHeart 1.1s ease-out forwards;
}
@keyframes ppHeart {
    0% { opacity: 0; transform: translateY(0) scale(.4); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-34px) scale(1.1); }
}

/* ── zzz (uyurken) ── */
.ppZzz {
    position: absolute; bottom: 52px; left: 58px;
    font-size: 13px; font-weight: 700; color: var(--brand, #6B3FA0);
    pointer-events: none; opacity: 0;
}
.petPal.is-sleeping .ppZzz { animation: ppZzz 2.6s ease-out infinite; }
@keyframes ppZzz {
    0% { opacity: 0; transform: translate(0,0) scale(.6); }
    30% { opacity: .9; }
    100% { opacity: 0; transform: translate(10px,-26px) scale(1.1); }
}

/* ── Konuşma balonu (aç/üzgün → "besle beni") ── */
.ppBubble {
    /* NEDEN bottom:100%: balon kedinin BAŞININ ÜSTÜNDE dursun, gövdesinin üstüne binmesin
       (sahibin bildirdiği "yazı kedinin arkasında kalıyor" sorunu). */
    position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; background: #fff; color: var(--slate-900, #1e293b);
    border: 1px solid var(--slate-200, #e2e8f0); border-radius: 12px;
    padding: 5px 10px; font-size: 12px; font-weight: 600; z-index: 3;
    box-shadow: 0 4px 14px rgba(0,0,0,.12); pointer-events: auto;
    opacity: 0; transition: opacity .25s; text-decoration: none;
}
.ppBubble.is-show { opacity: 1; }
.ppBubble::after {
    content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px; background: #fff; border-right: 1px solid var(--slate-200, #e2e8f0); border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.ppBubble b { color: var(--brand-dark, #4c2a80); }

/* Hareketi kısıtlayan kullanıcıya saygı: kedi durur, yalnız hover mırlama kalır. */
@media (prefers-reduced-motion: reduce) {
    .petPal { transition: none; }
    .petPal .ppLeg, .petPal .ppTail, .petPal .ppEars, .petPal .ppEyes, .petPal .ppBob { animation: none !important; }
}

/* ── Durağan portre (hesap sayfası): gezinmez, olduğu yerde canlı (kuyruk/kulak/göz) ── */
.petPal.ppStatic { position: static; transform: none !important; pointer-events: none;
    width: auto; height: auto; display: inline-block; }
.petPal.ppStatic .ppCat { position: static; width: 150px; height: 138px; }

/* ── Oda modu: #petPal bir .petRoom içindeyse görünüm penceresine değil ODAYA sınırlı gezer ── */
.petRoom { position: relative; overflow: hidden; }
.petRoom #petPal { position: absolute; }

/* ── v2 (sanalDostOyun.md): ruh hâli görseli + oyna tepkisi ── */
/* Mutsuz→soluk, hasta→gri. Filtre .ppArt'a (drop-shadow'lu .ppCat'i bozmaz). */
#petPal.mood-mid .ppArt { filter: saturate(.82); }
#petPal.mood-low .ppArt { filter: saturate(.5) brightness(.95); }
#petPal.is-sick  .ppArt { filter: grayscale(.55) brightness(.9); }
/* Oyna: kısa zıplama (.ppCat'e; hareket transform'u üst .petPal'de, çakışmaz). */
#petPal.is-playing .ppCat { animation: ppPlayHop .4s ease-in-out 3; }
@keyframes ppPlayHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { #petPal.is-playing .ppCat { animation: none; } }

/* ── Görünürlük + duygu (anlat.png geri bildirimi) ── */
/* Beyaz karın/bacaklar açık mor odada kaybolmasın: ince mor kontur + patiler biraz koyu. */
.ppCat .ppFillWhite { stroke: rgba(107,79,166,.30); stroke-width: 1.1; paint-order: stroke; }
.ppCat .ppFillMain { stroke: rgba(74,42,128,.22); stroke-width: 1; paint-order: stroke; }
.ppLeg { fill: var(--ppBelly, #F4F1FA) !important; stroke: rgba(107,79,166,.32); stroke-width: 1.1; }
/* Kedi zemine daha net otursun (gölge biraz belirgin). */
.ppCat { filter: drop-shadow(0 3px 4px rgba(50,30,80,.28)); }

/* Üzgün/aç/susuz → belirgin şekilde soluk ve donuk (sahip: "susamış ama mutlu görünüyor"). */
#petPal.mood-mid .ppArt { filter: saturate(.75); }
#petPal.mood-low .ppArt { filter: saturate(.28) brightness(.9) contrast(.95); }
#petPal.is-sick .ppArt { filter: grayscale(.65) brightness(.86); }
/* Mutsuzken kulaklar hafif düşük, baş biraz eğik — "keyifsiz" okunsun. */
#petPal.mood-low .ppEars { transform: translateY(2px) scaleY(.9); }
#petPal.mood-low .ppBob { transform: translateY(1px) rotate(-1.5deg); }