/* ==========================================================================
   Akadverse Pro — Image Slider  v5
   Prinsip: foto SELALU dipaksa mengisi 100% slider (object-fit:cover).
   Tinggi slider ditentukan oleh aspect-ratio atau nilai tetap dari Elementor.
   Tidak ada ruang kosong, tidak ada warna hitam/putih bocor.
   ========================================================================== */

/* ── Reset celah Elementor ───────────────────────────────────────────── */
/*  Widget container, section, dan column kadang punya padding/line-height
    yang membuat gap kecil di bawah slider. Reset semua di sini.        */
.elementor-widget-akadverse_pro_slider,
.elementor-widget-akadverse_pro_slider .elementor-widget-container {
    display: block !important;
    padding: 0 !important;
    margin:  0 !important;
    line-height: 0 !important;
    font-size:   0 !important;
}

/* Column / Flexbox container Elementor yang membungkus slider —
   :has() selector: didukung semua browser modern 2023+            */
.elementor-column:has( .akv-slider-wrapper ),
.elementor-column:has( .akv-slider-wrapper ) > .elementor-widget-wrap,
.e-con:has( .akv-slider-wrapper ),
.e-con:has( .akv-slider-wrapper ) > .e-con-inner,
.elementor-container:has( .akv-slider-wrapper ) {
    padding: 0 !important;
    gap:     0 !important;
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.akv-slider-wrapper {
    display: block;
    width:   100%;
    margin:  0;
    padding: 0;
    line-height: 0;
    font-size:   0;
}

/* ── Slider Stage ────────────────────────────────────────────────────── */
.akv-slider {
    display:  block;
    position: relative;
    width:    100%;
    margin:   0;
    padding:  0;
    overflow: hidden;
    /* Tinggi diset via inline style (padding-bottom trick atau height tetap) */
    background: none;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Track — mengisi .akv-slider sepenuhnya ──────────────────────────── */
/* Karena .akv-slider bisa pakai padding-bottom (height: 0),
   track harus position:absolute agar mengisi area padding juga */
.akv-slider-track {
    position: absolute;
    top:    0;
    left:   0;
    right:  0;
    bottom: 0;
    width:  100%;
    height: 100%;
}

/* ── Slide individual ────────────────────────────────────────────────── */
.akv-slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* eksplisit, bukan inset */
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transform-origin: center center;
    will-change: opacity, transform;
    transition:
        opacity   var(--akv-dur, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--akv-dur, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
    /* Background-image cover — selalu fill frame */
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
}
.akv-slide.is-active  { opacity: 1; z-index: 2; pointer-events: auto; }
.akv-slide.is-leaving { z-index: 1; pointer-events: none; }

/* ── Foto — sembunyikan <img> tag, gambar pakai background di .akv-slide */
.akv-slide-img {
    display: none; /* Tidak dipakai untuk render — hanya ada di DOM untuk SEO/alt */
}

/* ── Ken Burns ───────────────────────────────────────────────────────── */
@keyframes akvKenBurns {
    0%   { background-size: 100% auto; background-position: 50% 50%; }
    35%  { background-size: 108% auto; background-position: 48% 49%; }
    70%  { background-size: 106% auto; background-position: 52% 51%; }
    100% { background-size: 100% auto; background-position: 50% 50%; }
}
.akv-slide.is-active.akv-ken-burns {
    animation: akvKenBurns calc(var(--akv-interval, 4000ms) * 1.5) ease-in-out infinite;
}

/* ── Overlay & Vignette ──────────────────────────────────────────────── */
/* Absolute inset 0, z-index 3 = di atas slide (z:2), di bawah UI (z:10) */
.akv-overlay-color,
.akv-overlay-vignette {
    position:       absolute;
    inset:          0;
    z-index:        3;
    pointer-events: none;
    /* background di-set inline dari PHP */
}

/* ==========================================================================
   TRANSISI
   ========================================================================== */

/* FADE */
.akv-slider--fade .akv-slide             { opacity: 0; transform: none; }
.akv-slider--fade .akv-slide.is-active  { opacity: 1; }
.akv-slider--fade .akv-slide.is-leaving { opacity: 0; }

/* SLIDE */
.akv-slider--slide .akv-slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--akv-dur, 900ms) cubic-bezier(0.77, 0, 0.175, 1);
}
.akv-slider--slide .akv-slide.is-active               { transform: translateX(0);     }
.akv-slider--slide .akv-slide.is-leaving              { transform: translateX(-100%); opacity: 1; }
.akv-slider--slide .akv-slide.akv-from-left           { transform: translateX(-100%); }
.akv-slider--slide .akv-slide.is-leaving.akv-to-right { transform: translateX(100%);  opacity: 1; }

/* ZOOM-OUT */
.akv-slider--zoom-out .akv-slide {
    opacity: 0; transform: scale(1.14);
    transition:
        opacity   var(--akv-dur, 900ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform var(--akv-dur, 900ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.akv-slider--zoom-out .akv-slide.is-active  { opacity: 1; transform: scale(1); }
.akv-slider--zoom-out .akv-slide.is-leaving {
    opacity: 0; transform: scale(0.9);
    transition:
        opacity   var(--akv-dur, 900ms) cubic-bezier(0.55, 0, 1, 0.45),
        transform var(--akv-dur, 900ms) cubic-bezier(0.55, 0, 1, 0.45);
}

/* ZOOM-IN */
/*
   Dua fase berbeda:
   1. TRANSISI MASUK: slide masuk dengan sedikit scale naik (1.0 → 1.0) — clean
   2. SAAT AKTIF: foto di-zoom perlahan dari 1.0 → 1.18 selama slide tampil
      Durasi animasi = interval autoplay agar zoom selesai tepat saat ganti slide
*/
@keyframes akvZoomInSlow {
    from { transform: scale(1.00); }
    to   { transform: scale(1.18); }
}

.akv-slider--zoom-in .akv-slide {
    opacity: 0;
    transform: scale(1.0);
    transition:
        opacity   var(--akv-dur, 900ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform var(--akv-dur, 900ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.akv-slider--zoom-in .akv-slide.is-active {
    opacity: 1;
    transform: scale(1.0);
    /* Zoom perlahan selama slide ditampilkan */
    animation: akvZoomInSlow var(--akv-interval, 4000ms)
               cubic-bezier(0.0, 0.0, 0.4, 1.0) forwards;
}
.akv-slider--zoom-in .akv-slide.is-leaving {
    opacity: 0;
    transform: scale(1.08); /* sudah agak besar saat keluar */
    animation: none;
    transition:
        opacity   var(--akv-dur, 900ms) cubic-bezier(0.55, 0, 1, 0.45),
        transform var(--akv-dur, 900ms) cubic-bezier(0.55, 0, 1, 0.45);
}

/* FLIP */
@keyframes akvFlipIn  {
    from { opacity:0; transform:perspective(900px) rotateY(-20deg) scale(0.96); }
    to   { opacity:1; transform:perspective(900px) rotateY(0)      scale(1);    }
}
@keyframes akvFlipOut {
    from { opacity:1; transform:perspective(900px) rotateY(0)      scale(1);    }
    to   { opacity:0; transform:perspective(900px) rotateY(20deg)  scale(0.96); }
}
.akv-slider--flip .akv-slide             { opacity: 0; }
.akv-slider--flip .akv-slide.is-active  { animation: akvFlipIn  var(--akv-dur,900ms) cubic-bezier(0.4,0,0.2,1) both; }
.akv-slider--flip .akv-slide.is-leaving { animation: akvFlipOut var(--akv-dur,900ms) cubic-bezier(0.4,0,0.2,1) both; z-index:1; opacity:1; }

/* BLUR */
.akv-slider--blur .akv-slide {
    opacity:0; filter:blur(14px); transform:scale(1.03);
    transition:
        opacity   var(--akv-dur,900ms) cubic-bezier(0.25,0.46,0.45,0.94),
        transform var(--akv-dur,900ms) cubic-bezier(0.25,0.46,0.45,0.94),
        filter    var(--akv-dur,900ms) cubic-bezier(0.25,0.46,0.45,0.94);
}
.akv-slider--blur .akv-slide.is-active  { opacity:1; filter:blur(0); transform:scale(1); }
.akv-slider--blur .akv-slide.is-leaving {
    opacity:0; filter:blur(10px); transform:scale(0.98);
    transition:
        opacity   calc(var(--akv-dur,900ms)*.8) cubic-bezier(0.55,0,1,0.45),
        filter    calc(var(--akv-dur,900ms)*.8) cubic-bezier(0.55,0,1,0.45),
        transform calc(var(--akv-dur,900ms)*.8) ease;
}

/* ==========================================================================
   UI CHROME
   ========================================================================== */

/* Counter */
.akv-slider-counter {
    position:absolute; top:14px; right:16px; z-index:10;
    background:rgba(0,0,0,0.42); color:#fff;
    font-size:.78rem; font-weight:600; letter-spacing:.04em;
    padding:4px 10px; border-radius:50px;
    pointer-events:none;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

/* Arrows */
.akv-slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:10;
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,0.38); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .2s, transform .2s;
    -webkit-tap-highlight-color:transparent;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.akv-slider-arrow:hover,
.akv-slider-arrow:focus-visible { background:rgba(0,0,0,.62); transform:translateY(-50%) scale(1.08); }
.akv-slider-arrow:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.akv-arrow-prev { left:12px; }
.akv-arrow-next { right:12px; }

/* Dots */
.akv-slider-dots {
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:10;
    display:flex; align-items:center; gap:7px; flex-wrap:nowrap; max-width:90%;
}
.akv-slider-dot {
    border:none; cursor:pointer; padding:0; flex-shrink:0;
    transition:background .3s, transform .3s, width .3s;
    -webkit-tap-highlight-color:transparent;
}
.akv-dots--circle .akv-slider-dot           { width:8px;  height:8px;  border-radius:50%; background:rgba(255,255,255,.5); }
.akv-dots--circle .akv-slider-dot.is-active { background:#fff; transform:scale(1.35); }
.akv-dots--line   .akv-slider-dot           { width:20px; height:3px;  border-radius:2px; background:rgba(255,255,255,.45); }
.akv-dots--line   .akv-slider-dot.is-active { width:38px; background:#fff; }
.akv-dots--square .akv-slider-dot           { width:8px;  height:8px;  border-radius:2px; background:rgba(255,255,255,.5); }
.akv-dots--square .akv-slider-dot.is-active { background:#fff; transform:scale(1.3); }

/* Thumbnails */
.akv-slider-thumbs {
    display:flex; align-items:center; justify-content:center;
    gap:6px; margin-top:8px; flex-wrap:wrap; line-height:1; font-size:1rem;
}
.akv-slider-thumb {
    width:64px; height:64px; border-radius:6px;
    background-size:cover; background-position:center;
    border:2px solid transparent;
    cursor:pointer; opacity:.58; flex-shrink:0; padding:0;
    transition:opacity .22s, border-color .22s, transform .22s;
    -webkit-tap-highlight-color:transparent;
}
.akv-slider-thumb:hover     { opacity:.82; transform:scale(1.05); }
.akv-slider-thumb.is-active { opacity:1;   border-color:#fff; transform:scale(1.07); }
.akv-slider-thumb:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Progress bar */
.akv-slider-progress {
    position:absolute; bottom:0; left:0; z-index:10;
    height:3px; width:0%;
    background:rgba(255,255,255,.72);
    pointer-events:none; transition:none;
}
.akv-slider-progress.running { transition:width linear; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:480px) {
    .akv-slider-arrow { width:36px; height:36px; }
    .akv-arrow-prev   { left:6px; }
    .akv-arrow-next   { right:6px; }
    .akv-slider-thumb { width:48px; height:48px; }
}

/* ── Elementor Editor ────────────────────────────────────────────────── */
.elementor-editor-active .akv-slide {
    opacity:0 !important; transform:none !important;
    filter:none !important; animation:none !important; transition:none !important;
}
.elementor-editor-active .akv-slide.is-active {
    opacity:1 !important; transform:none !important;
    filter:none !important; animation:none !important;
}
.elementor-editor-active .akv-slide.akv-ken-burns,
.elementor-editor-active .akv-slider--zoom-in .akv-slide.is-active {
    animation: none !important;
}