/*
 * Slider HA 2 — Frontend Styles
 * Hakan Aydemir · Rafue.com
 */

.sha2-wrap *,
.sha2-wrap *::before,
.sha2-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sha2-wrap {
    --accent:      #e8173a;
    --accent-glow: rgba(232,23,58,0.35);
    --bg:          #0e1017;

    --slide-w: 1000px;
    --slide-h: 430px;
    --radius:  14px;
    --peek:    440px;
    --gap:     18px;
    --nav-size: 44px;

    /* Buton 1 */
    --btn1-bg:          #e8173a;
    --btn1-color:       #ffffff;
    --btn1-font-size:   13px;
    --btn1-font-weight: 600;
    --btn1-font-family: 'Outfit', sans-serif;
    --btn1-radius:      8px;
    --btn1-padding-y:   11px;
    --btn1-padding-x:   26px;

    /* Buton 2 */
    --btn2-bg:          rgba(240,242,247,0.10);
    --btn2-color:       #f0f2f7;
    --btn2-font-size:   13px;
    --btn2-font-weight: 600;
    --btn2-font-family: 'Outfit', sans-serif;
    --btn2-radius:      8px;
    --btn2-padding-y:   11px;
    --btn2-padding-x:   26px;

    /* Nav */
    --nav-bg:       rgba(12,14,22,0.75);
    --nav-color:    #f0f2f7;
    --nav-hover-bg: #e8173a;

    width: 100%;
    max-width: calc(var(--slide-w) + (var(--peek) + var(--gap)) * 2);
    position: relative;
    font-family: var(--title-font-family, 'Outfit', sans-serif);
    color: #f0f2f7;
}

/* ── Stage ── */
.sha2-wrap .sha2-stage {
    position: relative;
    width: 100%;
    height: var(--slide-h);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Track ── */
.sha2-wrap .sha2-track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Slide ── */
.sha2-wrap .sha2-slide {
    position: absolute;
    width:  var(--slide-w);
    height: var(--slide-h);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.62s cubic-bezier(0.65,0,0.35,1), opacity 0.5s ease;
}

.sha2-wrap .sha2-slide img,
.sha2-wrap .sha2-slide video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 9s ease;
    transform: scale(1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.sha2-wrap .sha2-slide.is-active img,
.sha2-wrap .sha2-slide.is-active video {
    transform: scale(1.04);
}

.sha2-wrap .sha2-slide video {
    position: absolute;
    inset: 0;
}

/* ── Video play icon ── */
.sha2-wrap .sha2-play-icon {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.sha2-wrap .sha2-play-icon span {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(232,23,58,0.85);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px rgba(232,23,58,0.22), 0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease;
}
.sha2-wrap .sha2-play-icon svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.sha2-wrap .sha2-slide.is-active .sha2-play-icon     { opacity: 0; }
.sha2-wrap .sha2-slide:not(.is-active) .sha2-play-icon { opacity: 1; }

/* ── Gradient ── */
.sha2-wrap .sha2-grad {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(
        120deg,
        rgba(8,10,16,0.92) 0%,
        rgba(8,10,16,0.60) 30%,
        rgba(8,10,16,0.08) 60%,
        transparent 100%
    );
    transition: opacity 0.5s ease;
}
.sha2-wrap .sha2-slide:not(.is-active) .sha2-grad { opacity: 0.45; }

/* ── Badge ── */
.sha2-wrap .sha2-badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 3;
    font-family: var(--badge-font-family, 'Outfit', sans-serif);
    font-size: var(--badge-font-size, 0.56rem);
    font-weight: var(--badge-font-weight, 700);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease 0.22s, transform 0.4s ease 0.22s;
    pointer-events: none;
}
.sha2-wrap .sha2-slide.is-active .sha2-badge {
    opacity: 1;
    transform: translateY(0);
}

/* ── İçerik ── */
.sha2-wrap .sha2-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 40px 34px;
    z-index: 2;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.42s ease 0.18s,
                transform 0.42s cubic-bezier(0.65,0,0.35,1) 0.18s;
}
.sha2-wrap .sha2-slide.is-active .sha2-info {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sha2-wrap .sha2-cat {
    font-family: var(--cat-font-family, 'Outfit', sans-serif);
    font-size: var(--cat-font-size, 0.67rem);
    font-weight: var(--cat-font-weight, 400);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(240,242,247,0.45);
    margin-bottom: 8px;
    display: block;
}

.sha2-wrap .sha2-title {
    font-family: var(--title-font-family, 'Outfit', sans-serif);
    font-size: var(--title-font-size, clamp(1.8rem, 3vw, 2.7rem));
    font-weight: var(--title-font-weight, 700);
    line-height: 1.0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 11px;
    text-shadow: 0 2px 22px rgba(0,0,0,0.55);
    color: #f0f2f7;
}

.sha2-wrap .sha2-desc {
    font-family: var(--desc-font-family, 'Outfit', sans-serif);
    font-size: var(--desc-font-size, 0.82rem);
    font-weight: var(--desc-font-weight, 300);
    color: rgba(240,242,247,0.62);
    line-height: 1.62;
    max-width: 400px;
    margin-bottom: 22px;
}

.sha2-wrap .sha2-actions { display: flex; gap: 10px; }

.sha2-wrap .sha2-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; cursor: pointer; text-decoration: none;
    letter-spacing: 0.03em;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.sha2-wrap .sha2-btn:hover { transform: translateY(-2px) scale(1.03); text-decoration: none; }

.sha2-wrap .sha2-btn-play {
    background:    var(--btn1-bg);
    color:         var(--btn1-color);
    font-size:     var(--btn1-font-size);
    font-weight:   var(--btn1-font-weight);
    font-family:   var(--btn1-font-family);
    border-radius: var(--btn1-radius);
    padding: var(--btn1-padding-y) var(--btn1-padding-x);
    box-shadow: 0 8px 28px rgba(232,23,58,0.38);
}
.sha2-wrap .sha2-btn-play:hover { filter: brightness(1.12); color: var(--btn1-color); }

.sha2-wrap .sha2-btn-info {
    background:    var(--btn2-bg);
    color:         var(--btn2-color);
    font-size:     var(--btn2-font-size);
    font-weight:   var(--btn2-font-weight);
    font-family:   var(--btn2-font-family);
    border-radius: var(--btn2-radius);
    padding: var(--btn2-padding-y) var(--btn2-padding-x);
    border: 1px solid rgba(240,242,247,0.14);
    backdrop-filter: blur(10px);
}
.sha2-wrap .sha2-btn-info:hover { filter: brightness(1.25); color: var(--btn2-color); }

/* ── Nav okları ── */
.sha2-wrap .sha2-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width:  var(--nav-size);
    height: var(--nav-size);
    border-radius: 50%;
    background: var(--nav-bg);
    border: 1px solid rgba(240,242,247,0.14);
    color: var(--nav-color);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);
    opacity: 0.75;
    transition: background 0.22s, border-color 0.22s, opacity 0.2s,
                transform 0.22s cubic-bezier(0.65,0,0.35,1), box-shadow 0.22s;
}
.sha2-wrap .sha2-stage:hover .sha2-nav { opacity: 1; }
.sha2-wrap .sha2-nav:hover {
    background: var(--nav-hover-bg);
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 28px var(--accent-glow);
}
.sha2-wrap .sha2-nav svg { width: 17px; height: 17px; pointer-events: none; }

/* Gap alanının tam ortasına — slide dışında */
.sha2-wrap .sha2-prev {
    left: calc(50% - var(--slide-w)/2 - var(--gap) - var(--nav-size)/2 - var(--nav-offset, 0px));
}
.sha2-wrap .sha2-next {
    left: calc(50% + var(--slide-w)/2 + var(--gap) - var(--nav-size)/2 + var(--nav-offset, 0px));
}

/* touch layer */
.sha2-wrap .sha2-touch {
    position: absolute; inset: 0; z-index: 30; pointer-events: none;
}

/* ── Alt kontroller ── */
.sha2-wrap .sha2-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 16px;
    margin-bottom: 4px;
}

.sha2-wrap .sha2-counter {
    font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(240,242,247,0.38); min-width: 36px;
}
.sha2-wrap .sha2-counter strong { color: #f0f2f7; font-weight: 600; }

.sha2-wrap .sha2-dots { display: flex; gap: 6px; align-items: center; }

.sha2-wrap .sha2-dot {
    height: 3px; border-radius: 2px; cursor: pointer;
    background: rgba(240,242,247,0.18); width: 20px;
    transition: width 0.38s cubic-bezier(0.65,0,0.35,1), background 0.38s;
}
.sha2-wrap .sha2-dot.active {
    background: var(--accent); width: 36px;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Progress ring */
.sha2-wrap .sha2-ring {
    position: relative; width: 32px; height: 32px; flex-shrink: 0;
}
.sha2-wrap .sha2-ring > svg {
    position: absolute; inset: 0; transform: rotate(-90deg);
}
.sha2-wrap .sha2-ring circle { fill: none; stroke: rgba(240,242,247,0.10); stroke-width: 2; }
.sha2-wrap .sha2-ring .arc {
    stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 82; stroke-dashoffset: 82; transition: none;
}
.sha2-wrap .sha2-ring .arc.running { transition: stroke-dashoffset linear; }

.sha2-wrap .sha2-ap-btn {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 50%; background: rgba(13,16,24,0.70);
    border: none; color: rgba(240,242,247,0.42); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); transition: background 0.2s, color 0.2s;
}
.sha2-wrap .sha2-ap-btn:hover,
.sha2-wrap .sha2-ap-btn.paused {
    background: rgba(232,23,58,0.18); color: var(--accent);
}
.sha2-wrap .sha2-ap-btn svg { width: 11px; height: 11px; }

/* ── Hint ── */
.sha2-wrap .sha2-hint {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: rgba(240,242,247,0.18);
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin-bottom: 36px;
    background: transparent;
}

/* ── Empty state ── */
.sha2-empty {
    text-align: center; padding: 40px; color: #666; font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .sha2-wrap {
        --slide-w: 800px;
        --slide-h: 380px;
        --peek: 160px;
    }
}
@media (max-width: 900px) {
    .sha2-wrap {
        --slide-w: 90vw;
        --slide-h: 320px;
        --peek: 60px;
        --gap: 10px;
    }
    .sha2-wrap .sha2-title  { font-size: clamp(1.3rem, 5vw, 1.9rem); }
    .sha2-wrap .sha2-desc   { font-size: 0.76rem; max-width: 100%; margin-bottom: 14px; }
    .sha2-wrap .sha2-info   { padding: 0 22px 22px; }
}
@media (max-width: 600px) {
    .sha2-wrap {
        --slide-w: 92vw;
        --slide-h: 260px;
        --peek: 24px;
        --gap: 8px;
        --nav-size: 36px;
    }
    .sha2-wrap .sha2-counter { display: none; }
}

/* Kontrol elemanı gizleme */
.sha-hidden { display: none !important; }