body {
    background: radial-gradient(circle, #0a1931 0%, #000 100%);
    margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden;
}

.robot-head {
    width: 280px; height: 240px; background: #fff; border-radius: 80px;
    border: 8px solid #0066ff; position: relative;
    animation: floating 4s ease-in-out infinite;
    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.4);
    cursor: pointer; z-index: 999;
}

@keyframes floating {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.screen {
    width: 85%; height: 140px; background: #000; margin: 35px auto;
    border-radius: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.eye {
    width: 45px; height: 18px; background: #00e5ff; border-radius: 10px;
    box-shadow: 0 0 20px #00e5ff; margin: 0 20px; display: inline-block;
    animation: blink 5s infinite;
}

@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.dotted-mouth span {
    transition: all 0.1s ease-in-out; /* Kelime geçişleri daha yumuşak olur */
}
.dotted-mouth { margin-top: 15px; display: none; gap: 5px; }
.dotted-mouth span { color: #00fbff; font-size: 30px; animation: wave 0.3s infinite alternate; }
.talking { display: flex !important; }

@keyframes wave { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.status-light {
    width: 25px; height: 25px; background: #333; border-radius: 50%;
    margin: 25px auto; transition: 0.3s;
}
.status-light.active { background: #ff3b3b; box-shadow: 0 0 20px #ff3b3b; }