/* ── İMİTA TREND — Kedi Animasyonları ── */

.it-cat {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.it-eyes {
    transform-box: fill-box;
    transform-origin: center center;
}

@keyframes itBlink {
    0%   { transform: scaleY(1); }
    90%  { transform: scaleY(1); }
    93%  { transform: scaleY(0.05); }
    96%  { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}

.it-pose-idle .it-eyes,
.it-transitioning .it-eyes { animation: itBlink 5s ease-in-out infinite; }

/* ── POZ: Kırpıştır ── */
@keyframes itPoseBlink-eyes {
    0%   { transform: scaleY(1); }
    10%  { transform: scaleY(0.05); }
    20%  { transform: scaleY(1); }
    35%  { transform: scaleY(0.05); }
    45%  { transform: scaleY(1); }
    60%  { transform: scaleY(0.05); }
    70%  { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}
.it-pose-blink .it-eyes { animation: itPoseBlink-eyes var(--pose-dur, 1s) ease-in-out forwards; }

.it-tail {
    transform-box: view-box;
    transform-origin: 13.868px 19.286px;
}

.it-head {
    transform-box: view-box;
    transform-origin: 12px 17px;
}

.it-body-gpu {
    will-change: transform;
    animation: itBodyGpu 8s ease-in-out infinite;
}

@keyframes itBodyGpu {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(0.08px); }
    100% { transform: translateY(0px); }
}

.it-transitioning .it-tail,
.it-transitioning .it-head {
    animation: none !important;
    transform: rotate(0deg) scale(1) translateY(0) !important;
    transition: transform 0.42s ease-in-out;
}

/* ── İDLE ── */
.it-pose-idle .it-tail { animation: itTailIdle 1.6s linear infinite; }
.it-pose-idle .it-head { animation: itHeadIdle 2.4s linear infinite; }

@keyframes itTailIdle {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

@keyframes itHeadIdle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(3deg); }
    75%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

/* ── POZ: Kafa Sağa ── */
@keyframes itPoseHeadRight-tail {
    0%   { transform: rotate(0deg); }
    13%  { transform: rotate(33deg); }
    20%  { transform: rotate(22deg); }
    33%  { transform: rotate(32deg); }
    73%  { transform: rotate(29deg); }
    100% { transform: rotate(0deg); }
}
@keyframes itPoseHeadRight-head {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(30deg); }
    60%  { transform: rotate(30deg); }
    100% { transform: rotate(0deg); }
}
.it-pose-head-right .it-tail { animation: itPoseHeadRight-tail var(--pose-dur, 1s) ease-in-out forwards; }
.it-pose-head-right .it-head { animation: itPoseHeadRight-head var(--pose-dur, 1s) ease-in-out forwards; }

/* ── POZ: Kafa Sola ── */
@keyframes itPoseHeadLeft-tail {
    0%   { transform: rotate(0deg); }
    13%  { transform: rotate(-10deg); }
    20%  { transform: rotate(-5deg); }
    33%  { transform: rotate(-13deg); }
    73%  { transform: rotate(-7deg); }
    100% { transform: rotate(0deg); }
}
@keyframes itPoseHeadLeft-head {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-30deg); }
    60%  { transform: rotate(-30deg); }
    100% { transform: rotate(0deg); }
}
.it-pose-head-left .it-tail { animation: itPoseHeadLeft-tail var(--pose-dur, 1s) ease-in-out forwards; }
.it-pose-head-left .it-head { animation: itPoseHeadLeft-head var(--pose-dur, 1s) ease-in-out forwards; }

/* ── POZ: Kuyruk Titret ── */
@keyframes itPoseTailShake-tail {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(15deg); }
    20%  { transform: rotate(-5deg); }
    30%  { transform: rotate(15deg); }
    40%  { transform: rotate(-8deg); }
    50%  { transform: rotate(15deg); }
    60%  { transform: rotate(-8deg); }
    70%  { transform: rotate(11deg); }
    80%  { transform: rotate(-5deg); }
    90%  { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}
.it-pose-tail-shake .it-tail { animation: itPoseTailShake-tail var(--pose-dur, 1s) ease-in-out forwards; }
.it-pose-tail-shake .it-head { animation: none; }

/* ── POZ: Yaklaş ── */
@keyframes itPoseZoom-head {
    0%   { transform: scale(1) translateY(0); }
    13%  { transform: scale(1.6) translateY(5px); }
    80%  { transform: scale(1.6) translateY(5px); }
    93%  { transform: scale(1.1) translateY(1px); }
    100% { transform: scale(1) translateY(0); }
}
.it-pose-zoom .it-tail { animation: none; }
.it-pose-zoom .it-head { animation: itPoseZoom-head var(--pose-dur, 1s) ease-in-out forwards; }

/* ── OYUN UI ── */
.it-game-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.it-cat-wrap {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1;
    max-height: 100%;
}

.it-status {
    color: #c8b89a;
    font-family: monospace;
    font-size: 12px;
    min-height: 18px;
    flex-shrink: 1;
}

.it-pose-btn {
    padding: 7px 4px;
    border: 1px solid #3e3228;
    border-radius: 6px;
    flex-shrink: 1;
    width: 100%;
    background: none;
    color: #c8b89a;
    font-family: monospace;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.it-pose-btn:hover:not(:disabled) { background: #3e3228; }
.it-pose-btn:disabled { opacity: 0.3; cursor: default; }
.it-pose-btn.correct { border-color: #6a9a6a; color: #6a9a6a; }
.it-pose-btn.wrong   { border-color: #e04a2c; color: #e04a2c; }

.it-start-btn {
    padding: 7px 18px;
    border: 1px solid #c8b89a;
    border-radius: 6px;
    flex-shrink: 1;
    background: none;
    color: #c8b89a;
    font-family: monospace;
    font-size: 12px;
    cursor: pointer;
}
.it-start-btn:hover { background: #3e3228; }