﻿@media (max-width: 768px) {
    .cd-slider-nav nav ul {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        justify-content: space-evenly !important; /* ikonlar eşit aralıkta */
        align-items: center !important;
        flex-wrap: nowrap !important; /* tek satır */
        list-style: none !important;
        margin: 0 !important;
        padding: 4px 0 !important; /* minimum padding */
        background: transparent !important; 
        z-index: 9999 !important;
    }

        .cd-slider-nav nav ul li {
            flex: 1 1 auto !important; /* otomatik küçülme */
            text-align: center !important;
            margin: 0 !important;
        }

            .cd-slider-nav nav ul li a {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-decoration: none !important;
                color: #fff !important;
                font-size: clamp(8px, 2vw, 10px) !important; /* çok dar ekranda küçülür */
                padding: 2px 0 !important;
                position: relative !important;
                transition: color 0.3s ease !important;
            }

                .cd-slider-nav nav ul li a .image-icon img {
                    width: clamp(16px, 10vw, 24px) !important; /* ikon küçülür */
                    height: auto !important;
                    margin-bottom: 2px !important;
                    transition: transform 0.3s ease !important;
                }

                .cd-slider-nav nav ul li a:hover,
                .cd-slider-nav nav ul li.active a {
                    color: #ffcc00 !important;
                }

                    .cd-slider-nav nav ul li a:hover .image-icon img,
                    .cd-slider-nav nav ul li.active a .image-icon img {
                        transform: scale(1.1) !important;
                    }

                    .cd-slider-nav nav ul li.active a::after {
                        content: "" !important;
                        position: absolute !important;
                        bottom: -4px !important;
                        left: 50% !important;
                        transform: translateX(-50%) !important;
                        width: 0 !important;
                        height: 0 !important;
                        border-left: 5px solid transparent !important;
                        border-right: 5px solid transparent !important;
                        border-top: 5px solid #ffcc00 !important;
                    }

    body {
        padding-top: 65px !important; /* Menü sabit, içerik altına geçsin */
    }
}
