.morphing-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: linear-gradient(45deg, #06b6d4, #3b82f6);
    filter: blur(100px);
    opacity: 0.3;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morphing 10s ease-in-out infinite;
    z-index: 0;
}
@keyframes morphing {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
    75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

/* 2. Resizable Screen Animation (Genişleyen/Daralan Ekran) */
.resizable-screen {
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    animation: resize-anim 6s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.resize-handle {
    position: absolute;
    right: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 40px;
    background: #38bdf8;
    border-radius: 2px;
    box-shadow: 0 0 10px #38bdf8;
}
@keyframes resize-anim {
    0% { width: 100%; height: 300px; } /* Desktop */
    33% { width: 60%; height: 300px; } /* Tablet */
    66% { width: 30%; height: 400px; } /* Mobile */
    100% { width: 100%; height: 300px; } /* Back to Desktop */
}

/* 3. Grid İçerik Simülasyonu */
.content-block {
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    height: 100%;
    width: 100%;
}
.grid-sim {
    display: grid;
    gap: 10px;
    height: 100%;
    padding: 10px;
    transition: all 0.5s ease;
}
/* Animasyon adımlarına göre grid değişimi */
.resizable-screen[style*="width: 100%"] .grid-sim { grid-template-columns: repeat(3, 1fr); }

/* 4. Cihaz İkonları (Parallax) */
.floating-device {
    animation: float-device 4s ease-in-out infinite;
}
.device-delay-1 { animation-delay: 1s; }
.device-delay-2 { animation-delay: 2s; }

@keyframes float-device {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}