/* Material icon ayarı */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* İstersen buraya genel body ayarları vs. ekleyebilirsin */
<style>
    /* HERO SLIDER ORANI – Vivense tarzı mobil görünüm */
    #hero-slider {
        background-color: #000; /* Banner’ın siyah zemini bozulmasın */
    }

    #hero-slider .hero-slide-inner {
        position: relative;
        width: 100%;
        /* Mobilde 16:9 oran */
        padding-top: 56.25%;
        overflow: hidden;
    }

    #hero-slider .hero-slide-inner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;       /* Görseli kırpar, taşırmaz */
        display: block;
    }

    /* Daha geniş ekranlarda slider çok yüksek olmasın */
    @media (min-width: 768px) {
        #hero-slider .hero-slide-inner {
            padding-top: 35%;    /* 16:9’dan biraz daha yatay */
        }
    }
</style>