/* EB Custom Slider - Frontend */

/* Ana wrapper */
.eb-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: var(--eb-height, 80vh);
    box-sizing: border-box;
}

/* Overlay (renk + isteğe bağlı GIF/PNG) */
.eb-slider-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Renk ve görsel PHP içinden inline style ile geliyor */
    opacity: var(--eb-overlay-opacity, 0.4);
    transition: opacity 0.3s ease;
}

/* Aktif slide video olduğunda overlay opaklığını ayrı kontrol */
.eb-slider-wrapper.eb-video-active .eb-slider-overlay {
    opacity: var(--eb-overlay-video-opacity, var(--eb-overlay-opacity, 0.4));
}

/* Slider track */
.eb-slider {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Ortak slide stilleri */
.eb-slide {
    height: 100%;
}

/* Fade efekti */
.eb-slider.eb-effect-fade {
    position: relative;
}
.eb-slider.eb-effect-fade .eb-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.eb-slider.eb-effect-fade .eb-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Slide (kayma) efekti */
.eb-slider.eb-effect-slide {
    position: relative;
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}
.eb-slider.eb-effect-slide .eb-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
    opacity: 1;
}

/* Medya (görsel / video) */
.eb-slide-media,
.eb-slide-media img,
.eb-slide-video-inner,
.eb-slide-video-inner iframe,
.eb-slide-video-inner video {
    width: 100%;
    height: 100%;
}

.eb-slide-media img,
.eb-slide-video-inner iframe,
.eb-slide-video-inner video {
    object-fit: cover;
    display: block;
}

/* Ken Burns efektleri (sadece görselde anlamlı) */
.eb-kb-zoom-in .eb-slide-media img {
    animation: ebKenZoomIn 18s linear infinite;
}
.eb-kb-zoom-out .eb-slide-media img {
    animation: ebKenZoomOut 18s linear infinite;
}
.eb-kb-pan-left .eb-slide-media img {
    animation: ebKenPanLeft 18s linear infinite;
}
.eb-kb-pan-right .eb-slide-media img {
    animation: ebKenPanRight 18s linear infinite;
}

@keyframes ebKenZoomIn {
    from { transform: scale(1.05); }
    to   { transform: scale(1.25); }
}
@keyframes ebKenZoomOut {
    from { transform: scale(1.2); }
    to   { transform: scale(1.0); }
}
@keyframes ebKenPanLeft {
    from { transform: scale(1.1) translateX(5%); }
    to   { transform: scale(1.1) translateX(-5%); }
}
@keyframes ebKenPanRight {
    from { transform: scale(1.1) translateX(-5%); }
    to   { transform: scale(1.1) translateX(5%); }
}

/* Caption (metin kutusu) */
.eb-slide-caption {
    position: absolute;
    z-index: 2;
    max-width: var(--eb-content-max-width, 600px);
    padding: 20px 24px;
    box-sizing: border-box;
}

/* Konumlar */
.eb-pos-top-left      { top: 10%; left: 10%; transform: translate(0, 0); }
.eb-pos-top-center    { top: 10%; left: 50%; transform: translate(-50%, 0); }
.eb-pos-top-right     { top: 10%; right: 10%; transform: translate(0, 0); }
.eb-pos-middle-left   { top: 50%; left: 10%; transform: translate(0, -50%); }
.eb-pos-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.eb-pos-middle-right  { top: 50%; right: 10%; transform: translate(0, -50%); }
.eb-pos-bottom-left   { bottom: 10%; left: 10%; transform: translate(0, 0); }
.eb-pos-bottom-center { bottom: 10%; left: 50%; transform: translate(-50%, 0); }
.eb-pos-bottom-right  { bottom: 10%; right: 10%; transform: translate(0, 0); }

/* Başlık & açıklama */
.eb-slide-title {
    margin: 0 0 10px;
    font-weight: 700;
    color: var(--eb-title-color, #ffffff);
    font-size: var(--eb-title-size, 42px);
}

.eb-slide-text {
    margin: 0 0 20px;
    color: var(--eb-subtitle-color, #ffffff);
    font-size: var(--eb-subtitle-size, 18px);
    line-height: 1.5;
}

/* Button */
.eb-slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--eb-btn-bg, #ff0077);
    color: var(--eb-btn-text, #ffffff);
    border: 1px solid var(--eb-btn-border, #ff0077);
    border-radius: var(--eb-btn-radius, 30px);
    padding: var(--eb-btn-pad-v, 12px) var(--eb-btn-pad-h, 32px);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.eb-slide-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Oklar */
.eb-slider-prev,
.eb-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--eb-arrow-bg, #000000);
    color: var(--eb-arrow-color, #ffffff);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.eb-slider-prev { left: 20px; }
.eb-slider-next { right: 20px; }

.eb-slider-prev:hover,
.eb-slider-next:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Noktalar */
.eb-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.eb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--eb-dot-color, #cccccc);
    border: none;
    padding: 0;
    cursor: pointer;
}
.eb-dot.active {
    background: var(--eb-dot-active-color, #ffffff);
    transform: scale(1.1);
}

/* Basit animasyonlar (caption için) */
.eb-anim-fade-in {
    animation: ebFadeIn 0.7s ease forwards;
}
.eb-anim-fade-up {
    animation: ebFadeUp 0.7s ease forwards;
}
.eb-anim-fade-left {
    animation: ebFadeLeft 0.7s ease forwards;
}
.eb-anim-fade-right {
    animation: ebFadeRight 0.7s ease forwards;
}
.eb-anim-zoom-in {
    animation: ebZoomIn 0.6s ease forwards;
}

@keyframes ebFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ebFadeUp {
    from { opacity: 0; transform: translate(-50%, 10%); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ebFadeLeft {
    from { opacity: 0; transform: translate(20px, 0); }
    to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes ebFadeRight {
    from { opacity: 0; transform: translate(-20px, 0); }
    to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes ebZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
    .eb-slide-caption {
        max-width: 90%;
        padding: 15px;
    }

    .eb-pos-top-left,
    .eb-pos-top-right,
    .eb-pos-top-center {
        top: 15%;
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        text-align: center;
    }
    .eb-pos-middle-left,
    .eb-pos-middle-right,
    .eb-pos-middle-center {
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .eb-pos-bottom-left,
    .eb-pos-bottom-right,
    .eb-pos-bottom-center {
        bottom: 15%;
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        text-align: center;
    }

    .eb-slide-title {
        font-size: calc(var(--eb-title-size, 42px) * 0.6);
    }
    .eb-slide-text {
        font-size: calc(var(--eb-subtitle-size, 18px) * 0.9);
    }

    .eb-slider-prev { left: 10px; }
    .eb-slider-next { right: 10px; }
}