/* ============================================================
   ALT BARLI SLIDER (csf-alt-barli-slider.php)
   ============================================================ */
.swiper.alt_barli {
    width: 100%;
    height: 100%;

    & .swiper-wrapper {
        height: 100%;
    }

    & .swiper-slide {
        height: 100%;
        background: transparent;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    & .swiper-slide > a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    & .swiper-pagination {
        margin-left: 4px;
        position: absolute;
        inset: 0;
        top: auto;
        bottom: 80px;
        gap: 12px;
        z-index: 20;
        justify-content: center;
        padding: 0 12px;

        & .swiper-pagination-bullet {
            border: 1px solid #FFFFFF59;
            background: #FFFFFF1A;
            border-radius: var(--global-radius, 4px);
            width: 32px;
            height: 4px;

            &.swiper-pagination-bullet-active {
                border-color: transparent;
                background: rgb(var(--primary));
            }
        }

        @media screen and (max-width: 768px) {
            gap: 6px;

            & {
                bottom: 152px;
            }
        }
    }

    & .pagination-and-all-link {
        z-index: 20;
        display: flex;
        justify-content: space-between;
        align-items: center;
        right: 16px;
        bottom: 16px;
        top: auto;
        left: auto;
        position: absolute;
        gap: 20px;

        & a {
            padding: 0 12px;
            font-size: 12px;
            font-weight: 600;
            height: 40px;
            background: rgb(var(--primary));
            color: #fff;
            display: grid;
            place-items: center;
            transition: filter 0.1s;

            &:hover {
                filter: brightness(1.1);
            }
        }

        @media screen and (max-width: 768px) {
            & {
                left: 12px;
                bottom: 12px;

                & a {
                    height: auto;
                    width: 32px;
                    aspect-ratio: 1;
                    padding: 0;
                }
            }
        }

        & .swiper-buttons {
            display: flex;
            align-items: center;
            gap: 10px;

            @media screen and (max-width: 768px) {
                gap: 6px;
            }

            & > button {
                appearance: none;
                border: 0;
                display: grid;
                place-items: center;
                position: relative;
                inset: 0;
                width: 33px;
                height: 33px;
                margin: 0;
                padding: 0;
                cursor: pointer;
                border-radius: var(--global-radius, 4px);
                background: #fff;
                color: #000;
                box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
                transition: box-shadow 0.15s ease, background-color 0.15s ease;

                &:hover {
                    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.24);

                    & svg {
                        opacity: 1;
                    }
                }

                & svg {
                    width: 8px;
                    height: 13px;
                    opacity: 0.4;
                    transition: opacity 0.15s ease;
                }

                &:after {
                    display: none;
                }

                @media screen and (max-width: 768px) {
                    width: 24px;
                    height: 24px;
                    border-radius: var(--global-radius, 4px);

                    & svg {
                        width: 6px;
                        height: 10px;
                    }
                }
            }

            & > .swiper-button-prev svg {
                position: relative;
                left: -1px;
            }

            & > .swiper-button-next svg {
                position: relative;
                right: -1px;
            }
        }
    }
}

/* ============================================================
   IKILI SLIDER (csf-ikili-slider.php) — v1 / v2 / v3 / v4
   ============================================================ */
.swiper.ikili {
    width: 100%;
    height: 100%;

    & .swiper-wrapper {
        height: 100%;
    }

    & .swiper-slide {
        height: 100%;
        background: transparent;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    & .swiper-slide>a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }


    & .swiper-navigation-icon {
        display: none;
    }

    & .swiper-slide>a>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── V1 ── */
    &.v1 .swiper-pagination {
        position: absolute;
        left: 0;
        top: 0;
        right: auto;
        bottom: auto;
        background: #05081666;
        width: min-content;
        padding: 8px;
        gap: 4px;
        flex-direction: column;

        & .swiper-pagination-bullet {
            aspect-ratio: 1;
            width: 24px;
            height: auto;
            background: #0000004D;
            color: #fff;
            position: relative;
            font-size: 12px;
            font-weight: 700;

            @media screen and (max-width: 768px) {
                aspect-ratio: unset;
                width: 24px;
                height: 24px;
                font-size: 11px;
            }

            &:before {
                content: '';
                position: absolute;
                inset: 0 auto;
                right: -8px;
                width: 4px;
                background: var(--active-color);
                opacity: 0;
                transition: opacity .1s;
            }

            &:hover::before {
                opacity: 1;
            }

            &.swiper-pagination-bullet-active {
                --active-color: rgb(var(--primary));
                background: var(--active-color);
            }
        }
    }

    /* ── V2 ── */
    &.v2 .swiper-pagination {
        position: absolute;
        left: 12px;
        top: auto;
        right: auto;
        bottom: 10px;
        gap: 4px;

        & .swiper-pagination-bullet {
            aspect-ratio: 1;
            width: 24px;
            height: auto;
            background: var(--button-color, #00000080);
            transition: background .2s;
            color: #fff;
            position: relative;
            font-size: 12px;
            font-weight: 700;

            @media screen and (max-width: 768px) {
                aspect-ratio: unset;
                width: 24px;
                height: 24px;
                font-size: 11px;
            }

            &:before {
                content: '';
                position: absolute;
                inset: auto 0;
                bottom: -10px;
                height: 4px;
                background: var(--active-color);
                opacity: 0;
                transition: opacity .1s;
            }

            &:hover::before {
                opacity: 1;
            }

            &.swiper-pagination-bullet-active {
                --active-color: rgb(var(--primary));
                background: var(--active-color);
                box-shadow: 0 2px 0 0 var(--active-color);
            }
        }
    }

    /* ── V3 ── */
    &.v3 .swiper-pagination {
        position: absolute;
        left: 0;
        top: 0;
        right: auto;
        bottom: auto;
        flex-direction: column;

        & .swiper-pagination-bullet {
            aspect-ratio: 1;
            width: 24px;
            height: auto;
            background: #00000080;
            color: #fff;
            position: relative;
            font-size: 12px;
            font-weight: 700;

            @media screen and (max-width: 768px) {
                aspect-ratio: unset;
                width: 24px;
                height: 24px;
                font-size: 11px;
            }

            &.swiper-pagination-bullet-active {
                --active-color: rgb(var(--primary));
                background: var(--active-color);

                &:before {
                    content: '';
                    position: absolute;
                    inset: 0 auto;
                    right: -14px;
                    width: 14px;
                    border-right: 2px solid transparent;
                    background-color: var(--active-color);
                    background-image: url("data:image/svg+xml,%3Csvg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.999994L3.79289 3.29289C4.12623 3.62622 4.29289 3.79289 4.29289 3.99999C4.29289 4.2071 4.12623 4.37377 3.79289 4.7071L1.5 6.99999' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
                    background-repeat: no-repeat;
                    background-position: center;
                    opacity: 0;
                    transition: opacity .1s;
                }

                &:hover::before {
                    opacity: 1;
                }
            }
        }
    }

    &.v3 .swiper-buttons {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        bottom: 0;

        &>div {
            position: relative;
            inset: 0;
            aspect-ratio: 1;
            width: 24px;
            height: auto;
            background: #fff;
            margin: 0;
            display: grid;
            place-items: center;

            &:last-child {
                transform: scaleY(-1);
            }

            &:hover::before {
                background: rgb(var(--primary));
            }

            &::before {
                content: '';
                position: absolute;
                background: rgb(var(--secondary));
                width: 10px;
                height: 6px;
                mask: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L4.29289 1.70711C4.62623 1.37377 4.79289 1.20711 5 1.20711C5.20711 1.20711 5.37377 1.37377 5.70711 1.70711L9 5' stroke='%23090E24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / contain;
            }

            &:after {
                display: none;
            }

            @media screen and (max-width: 768px) {
                & {
                    height: calc((30000vw / 572 - 6 * (24px)) / 2);
                }
            }
        }
    }

    /* ── V4 ── */
    &.v4 .swiper-pagination {
        inset: 0;
        gap: inherit;

        & .swiper-pagination-bullet {
            aspect-ratio: 1;
            width: 24px;
            height: auto;
            background: var(--button-color, #00000080);
            transition: background .2s;
            color: #fff;
            position: relative;
            font-size: 12px;
            font-weight: 700;

            @media screen and (max-width: 768px) {
                aspect-ratio: unset;
                width: 24px;
                height: 24px;
                font-size: 11px;
            }

            &.swiper-pagination-bullet-active {
                --active-color: rgb(var(--primary));
                background: var(--active-color);
                box-shadow: 0 2px 0 0 var(--active-color);

                &:before {
                    content: '';
                    position: absolute;
                    inset: auto 0;
                    bottom: -10px;
                    height: 4px;
                    background: var(--active-color);
                }
            }
        }
    }

}

/* ============================================================
   KARE SLIDER (csf-kare-slider.php)
   ============================================================ */
.swiper.kare {
    width: 100%;
    height: 100%;

    & .swiper-wrapper {
        height: 100%;
    }

    & .swiper-slide {
        height: 100%;
    }

    & .swiper-slide > a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    & .swiper-slide > a > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & .pagination-and-all-link {
        z-index: 20;
        display: flex;
        justify-content: center;
        /*inset: 16px 18px;*/
        inset: 0;
        top: auto !important;
        position: absolute;
        gap: 10px;
        background: rgb(var(--secondary));
        padding: 10px;

        /* &:before {
            content: '';
            position: absolute;
            inset: 0;
            top: -16px;
            background: #FFFFFF1A;
            height: 1px;
        } */

        @media screen and (max-width: 768px) {
            & {
                gap: 7px;
                /*inset: 12px 16px;*/

                &:before {
                    top: -12px;
                }
            }
        }

        & .swiper-pagination {
            position: relative;
            inset: 0;
            gap: inherit;
            justify-content: center;
            max-width: calc(100% - 42px);

            @media screen and (max-width: 768px) {
                max-width: none;
            }
        }

        & .swiper-pagination-bullet, & a {
            display: grid;
            place-items: center;
            aspect-ratio: 1;
            width: 32px;
            height: auto;
            background: rgb(var(--secondary));
            border-radius: var(--global-radius, 4px);
            color: #fff;
            position: relative;
            font-size: 16px;
            font-weight: 700;
            border: 1px solid #FFFFFF26;

            &.swiper-pagination-bullet-active,
            &:hover {
                background: rgb(var(--primary));
                border-color: transparent;
            }

            @media screen and (max-width: 768px) {
                & {
                    width: 20px;
                    font-size: 10px;
                }
            }
        }

        & a {
            flex-shrink: 0;
        }
    }
}