.lyra-hero-slides { position: relative; min-height: 320px; }
.lyra-hero-slide {
    display: none;
    animation: lyraHeroFade 0.5s ease;
}
.lyra-hero-slide-active { display: block; }
@keyframes lyraHeroFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.lyra-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #c2c6d8;
    cursor: pointer;
    padding: 0;
}
.lyra-hero-dot-active { background: #0057cd; width: 28px; border-radius: 5px; }

/* Hero görseli: 750x550 oranında, yüklenene kadar yumuşak geçiş */
.lyra-hero-visual-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    aspect-ratio: 750 / 550;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 1rem;
}

.lyra-hero-visual-wrap .lyra-hero-visual {
    width: 100%;
    height: 100%;
    max-width: 750px;
    aspect-ratio: 750 / 550;
    object-fit: contain;
    object-position: center;
    margin-left: auto;
    opacity: 1;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(226, 232, 240, 0.5);
    background: #fff;
}

.lyra-hero-visual-wrap .lyra-hero-visual.is-visible {
    opacity: 1;
}

@media (min-width: 1024px) {
    .lyra-hero-grid {
        grid-template-columns: minmax(0, 1fr) 750px !important;
    }
}