.social-hero {
    background: #000;
    position: relative;
    height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Arka Plan Video Efekti (Gradient Mesh) */
.gradient-mesh {
    position: absolute; inset: 0;
    background: 
        radial-gradient(at 0% 0%, rgba(255, 0, 150, 0.4) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 200, 255, 0.4) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 200, 0, 0.2) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(100, 50, 255, 0.4) 0px, transparent 50%);
    filter: blur(60px);
    animation: mesh-move 10s infinite alternate;
    opacity: 0.6;
}
@keyframes mesh-move { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }

/* Yüzen Emoji/İkonlar */
.floating-reaction {
    position: absolute; bottom: -50px;
    font-size: 2rem;
    animation: float-up 4s linear infinite;
    opacity: 0;
}
@keyframes float-up {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-800px) scale(1.5); opacity: 0; }
}

/* Live Badge */
.live-badge {
    background: #ef4444; color: white;
    padding: 5px 15px; border-radius: 5px;
    font-weight: 800; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 1px;
    animation: pulse-red 1.5s infinite;
    display: inline-flex; align-items: center; gap: 8px;
}
.live-badge::before { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; }
@keyframes pulse-red { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

/* 2. Platform Grid (Renkli) */
.platform-card {
    background: white; border-radius: 20px;
    padding: 30px; position: relative; overflow: hidden;
    transition: all 0.4s ease; border: 1px solid #f1f5f9;
}
.platform-card:hover { transform: translateY(-10px); }

.p-instagram:hover { box-shadow: 0 20px 40px rgba(225, 48, 108, 0.2); border-color: #e1306c; }
.p-linkedin:hover { box-shadow: 0 20px 40px rgba(10, 102, 194, 0.2); border-color: #0a66c2; }
.p-tiktok:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); border-color: #000; }
.p-youtube:hover { box-shadow: 0 20px 40px rgba(255, 0, 0, 0.2); border-color: #ff0000; }

.platform-icon {
    font-size: 3rem; margin-bottom: 1rem; transition: all 0.3s;
}
.p-instagram .platform-icon { background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.p-linkedin .platform-icon { color: #0a66c2; }
.p-tiktok .platform-icon { color: #000; filter: drop-shadow(2px 2px 0px #ff0050) drop-shadow(-2px -2px 0px #00f2ea); }
.p-youtube .platform-icon { color: #ff0000; }

/* 3. Phone Mockup & Feed */
.phone-frame {
    border: 12px solid #333; border-radius: 40px; overflow: hidden;
    background: #fff; position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
.insta-post { padding: 15px; border-bottom: 1px solid #eee; }
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar { width: 30px; height: 30px; border-radius: 50%; background: #eee; }
.post-image { width: 100%; height: 250px; background: #f1f5f9; border-radius: 10px; object-fit: cover; }
.post-actions { display: flex; gap: 15px; margin-top: 10px; font-size: 1.2rem; }

/* Like Animasyonu */
.heart-blast {
    position: absolute; pointer-events: none;
    animation: blast-out 0.8s ease-out forwards;
    font-size: 1.5rem; color: #ef4444;
}
@keyframes blast-out {
    0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1.2); opacity: 0; }
}

/* 4. İstatistik Sayacı (Glassmorphism) */
.stat-glass {
    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 20px; border-radius: 15px; text-align: center; color: white;
}
.stat-number { font-size: 2.5rem; font-weight: 900; margin-bottom: 5px; }
@media (max-width: 1024px) {
    .social-hero {
        height: auto;
        padding: 100px 0px 40px 0;
    }
}