/* Tezgâhtar Kedi'nin hareketi: göz, kulak, kuyruk, tutup sürükleme, kalp ve uyku parçacıkları (static/js/kedi-hareket.js).
   Sohbet penceresinin görünümü asistan.css'te; burası topun ve kedinin canlılığı. JS yoksa kedi olduğu gibi durur. */

/* kutunun kendisi tıklamayı tutmaz; yalnız görünen top ve sohbet penceresi tutar (top yumak olup küçülünce çevresi boş kalır) */
.kedi-asistan { -webkit-tap-highlight-color: transparent; pointer-events: none; }
.kedi-balon, .kedi-pencere { pointer-events: auto; }
.kedi-balon { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kedi-canli { overflow: visible; -webkit-user-drag: none; }
.kedi-canli .k-goz { fill: var(--kedi-goz, #206bc4); }
.kedi-canli .k-burun { fill: var(--kedi-goz, #206bc4); }

/* hareket motoru çalışırken geçiş ve giriş animasyonunu JS yönetir (aynı özelliğe iki taraf yazmasın) */
.kedi-asistan.kedi-canli-aktif .kedi-top { animation: none !important; transition: none; will-change: transform; }
.kedi-asistan.kedi-canli-aktif .kedi-balon:hover .kedi-top { transform: none; }
.kedi-asistan.kedi-canli-aktif.dosya-geliyor:not(.acik) .kedi-top { animation: none; }
.kedi-asistan.tasiniyor .kedi-balon, .kedi-asistan.tasiniyor .kedi-balon * { cursor: grabbing; }
.kedi-asistan.tasiniyor .kedi-ipucu { display: none; }

/* kaydedilmiş konum: JS gelmeden ilk çizimde doğru yerde dursun (satır içi küçük betik --kedi-fx/--kedi-fy yazar) */
.kedi-asistan.kedi-konumlu { right: auto; bottom: auto;
  left: calc(8px + (100% - 62px - 16px) * var(--kedi-fx, 1)); top: calc(8px + (100% - 62px - 16px) * var(--kedi-fy, 1)); }

/* tutulunca zeminde gölge: kedi havada */
.kedi-gol { position: absolute; left: 50%; bottom: -9px; width: 46px; height: 11px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 44, 100, .42), rgba(12, 44, 100, 0)); pointer-events: none;
  opacity: var(--kedi-gol, 0); transform: translateY(calc(var(--kedi-gol, 0) * 8px)) scale(calc(1 - var(--kedi-gol, 0) * .2)); }

/* ipucu: iki satır; ikinci satır sürükleme ipucu, kedi bir kez taşınınca kaybolur */
.kedi-ipucu { display: flex; flex-direction: column; gap: 1px; }
.kedi-ipucu-alt { font-weight: 500; font-size: .72rem; color: var(--kedi-soluk); }
.kedi-asistan.kedi-tasindi .kedi-ipucu-alt { display: none; }
.kedi-asistan.selam .kedi-ipucu { opacity: 1; }
.kedi-asistan.ipucu-sag .kedi-ipucu { right: auto; left: 74px; }

/* sohbet penceresi kedinin nerede durduğuna göre açılır (kedi-hareket.js sınıfları ve yüksekliği yazar) */
.kedi-asistan .kedi-pencere { height: var(--kedi-pencere-yuk, min(600px, calc(100vh - 120px))); }
.kedi-asistan.pencere-sol .kedi-pencere { right: auto; left: 0; }
.kedi-asistan.pencere-alta .kedi-pencere { bottom: auto; top: 76px; }
.kedi-yerine[hidden] { display: none; }
.kedi-ust .kedi-top.kucuk .kedi-isaret { width: 78%; height: 78%; margin-top: 0; }
@media (max-width: 575.98px) {
  /* telefonda pencere ekrana yaslı açılır; kedi nereye taşınırsa taşınsın */
  .kedi-asistan .kedi-pencere { position: fixed; left: 10px; right: 10px; top: auto; bottom: 96px; width: auto;
    height: calc(100vh - 170px); height: calc(100dvh - 170px); }
  .kedi-asistan[data-yer="panel"] .kedi-pencere { bottom: calc(76px + 4.9rem + env(safe-area-inset-bottom)); }
}

/* boşta oyun (kedi topunun dışına çıkınca): boş top, ipli yumak ve dışarıdaki kedi */
.kedi-top { position: relative; }
.kedi-asistan.kedi-disarida .kedi-ipucu, .kedi-asistan.oyuncak .kedi-ipucu, .kedi-asistan.oyuncak .kedi-gol { display: none; }
/* yumak: top küçülüp ipli bir topağa döner, iplerin çizgileri yuvarlanırken döner */
.kedi-cizgi { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .25s; }
.kedi-cizgi svg { display: block; width: 100%; height: 100%; }
.kedi-asistan.oyuncak .kedi-cizgi { opacity: 1; }
/* yumağın ucundan sarkan ip: yuvarlanırken hareketin tersine uzanır (yumağın ortasından başlar, topun gövdesi başını örter) */
.kedi-ip { position: absolute; left: 31px; top: 15px; width: 96px; height: 32px; transform-origin: 0 16px; opacity: 0; pointer-events: none;
  transition: opacity .25s; }
.kedi-ip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kedi-asistan.oyuncak .kedi-ip { opacity: 1; }
.kedi-asistan.oyuncak .kedi-isaret { opacity: 0; transition: opacity .18s; }
/* dışarıdaki dört ayaklı kedi (çizimi kedi-pet.js'te; dış çizgisi çizimin içinde): ekrana sabittir ve tıklamayı engellemez.
   Kutusunun boyutu ve yer noktası betikten yazılır (KediPet.VIEWBOX / ANCHOR). */
.kedi-gezgin { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.kedi-gezgin[hidden] { display: none; }
.kedi-gezgin-gol { position: absolute; left: -30px; top: -5px; width: 60px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 44, 100, .36), rgba(12, 44, 100, 0)); }
.kedi-gezgin-kap { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.kedi-gezgin-ic { position: absolute; will-change: transform; }
.kedi-gezgin-ic svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kedi-gezgin-parca { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
.kedi-gezgin-toz { position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(22, 104, 227, .28); opacity: 0; animation: kedi-toz .55s ease-out forwards; }
/* kedinin okuduğu satırın altında burnuna kadar uzayan çizgi */
.kedi-okunan { position: absolute; height: 2px; border-radius: 2px; background: #1668e3; opacity: 0; transition: opacity .5s; }
.kedi-okunan.acik { opacity: .55; transition: opacity .2s; }
/* başının üstünde beliren küçük işaret: ! ? ♪ */
.kedi-isaret-balon { position: absolute; left: 0; top: 0; min-width: 16px; height: 16px; margin: -12px 0 0 2px; padding: 0 4px; border-radius: 9px;
  font: 800 11px/16px system-ui, sans-serif; text-align: center; color: #fff; background: #1668e3; box-shadow: 0 2px 6px -2px rgba(15, 42, 88, .5);
  opacity: 0; animation: kedi-isaret 1.5s ease-out forwards; }
@keyframes kedi-isaret {
  0% { transform: translate(0, 6px) scale(.3); opacity: 0; }
  14% { transform: translate(0, -5px) scale(1.12); opacity: 1; }
  24% { transform: translate(0, -4px) scale(1); opacity: 1; }
  78% { transform: translate(0, -7px) scale(1); opacity: 1; }
  100% { transform: translate(0, -14px) scale(.9); opacity: 0; }
}

/* kalpler ve uyku "z"leri: topun üstünden yükselir */
.kedi-parcaciklar { position: absolute; left: 50%; top: 4px; width: 0; height: 0; pointer-events: none; overflow: visible; }
.kedi-kalp { position: absolute; left: var(--x, 0px); top: 0; width: 15px; height: 15px; margin: -8px 0 0 -8px; color: #ff5c85;
  opacity: 0; animation: kedi-kalp 1.6s ease-out forwards; }
.kedi-kalp svg { display: block; width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(15, 42, 88, .28)); }
@keyframes kedi-kalp {
  0% { transform: translate(0, 6px) scale(.3); opacity: 0; }
  16% { transform: translate(0, -6px) scale(1.08); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), -50px) scale(.8) rotate(var(--r, 0deg)); opacity: 0; }
}
.kedi-z { position: absolute; left: var(--x, 12px); top: 0; margin-left: -4px; font-weight: 800; font-size: 14px; line-height: 1; color: #1668e3;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 3px rgba(15, 42, 88, .35); opacity: 0; animation: kedi-z 2.8s ease-out forwards; }
@keyframes kedi-z {
  0% { transform: translate(0, 12px) scale(.55); opacity: 0; }
  22% { opacity: .95; }
  100% { transform: translate(16px, -40px) scale(1.3); opacity: 0; }
}
.kedi-toz { position: absolute; top: 60px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(22, 104, 227, .18); opacity: 0;
  animation: kedi-toz .55s ease-out forwards; }
@keyframes kedi-toz { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(var(--dx, 0px), 6px) scale(1.7); opacity: 0; } }