.alkom-slider {
    position: relative;
    width: 100%;
    max-width: var(--alkom-w, 100%);
    height: var(--alkom-h, 505px);
    overflow: hidden;
    background: #000;
    margin-left: auto;
    margin-right: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Responsive mod: JS postavlja exact height = scale * canvas_h. Fallback
   height ostaje --alkom-h dok JS ne učita (canvas_h u px). Ne koristimo
   CSS aspect-ratio sa CSS vars jer ne radi pouzdano u svim browserima. */
.alkom-slider--responsive {
    /* visinu postavlja JS u updateScale() */
}

.alkom-slider__stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
}

.alkom-slider--responsive .alkom-slider__stage {
    width: calc(var(--alkom-canvas-w) * 1px);
    height: calc(var(--alkom-canvas-h) * 1px);
    /* transform: scale() postavlja JS na osnovu stvarne širine slidera */
}

/* Device visibility — breakpoint 600px (LayerSlider konvencija) */
.alkom-slider--desktop-only { display: block; }
.alkom-slider--mobile-only  { display: none; }

@media (max-width: 600px) {
    .alkom-slider--desktop-only { display: none; }
    .alkom-slider--mobile-only  { display: block; }
}

.alkom-slider__track { position: relative; width: 100%; height: 100%; }

/* Base slide — opacity:0, no transform. Per-transition CSS niže override-uje
   pozicije/efekte za .is-active (final), .is-leaving (odlazi) i idle (čeka da uđe).
   Smer je upravljan preko track[data-direction="next|prev"] na efektima koji ga koriste. */
.alkom-slider__slide {
    position: absolute; inset: 0;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    display: block;
    z-index: 0;
    transition:
        transform .9s cubic-bezier(.4, 0, .2, 1),
        opacity   .9s cubic-bezier(.4, 0, .2, 1),
        filter    .9s ease,
        clip-path .9s cubic-bezier(.4, 0, .2, 1);
}

.alkom-slider__slide.is-active {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0);
    pointer-events: auto;
    z-index: 2;
}

.alkom-slider__slide.is-leaving {
    z-index: 1;
}

/* Sprečava flicker pri prvom paint-u — JS dodaje .alkom-slider--ready posle init-a */
.alkom-slider:not(.alkom-slider--ready) .alkom-slider__slide {
    transition: none !important;
}

.alkom-slider__slide--linked { cursor: pointer; }

/* Transparentni overlay link na ceo slajd — sedi iznad bg/overlay, ispod
   layera. Tako mozemo da imamo i 'klikabilan ceo slajd' i layer dugmad
   sa svojim sopstvenim linkovima (bez nested <a> HTML violation). */
.alkom-slider__slide-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent;
}

.alkom-slider__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

.alkom-slider__overlay { position: absolute; inset: 0; }

/* ===== Layers ===== */
.alkom-slider__layer {
    position: absolute;
    transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%));
    opacity: 0;
    will-change: transform, opacity;
}

.alkom-slider__layer--text {
    max-width: 90%;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    white-space: pre-wrap;
}

.alkom-slider__layer--button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

.alkom-slider__layer--button:hover {
    transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)) scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.alkom-slider__layer--button .alkom-btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.alkom-slider__layer--button .alkom-btn-icon--left  { margin-right: .45em; }
.alkom-slider__layer--button .alkom-btn-icon--right { margin-left:  .45em; }

.alkom-slider__layer--button .alkom-btn-icon svg { display: block; }

.alkom-slider__layer--image img { display: block; }

/* ===== Layer animacije (triggered by .is-revealing on slide) ===== */
.alkom-slider__slide.is-revealing .alkom-slider__layer {
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.alkom-slider__slide.is-revealing .alkom-slider__layer.alkom-anim--none {
    opacity: 1;
    animation: none;
}

.alkom-slider__slide.is-revealing .alkom-anim--fade        { animation-name: alkom-fade; }
.alkom-slider__slide.is-revealing .alkom-anim--slide-up    { animation-name: alkom-slide-up; }
.alkom-slider__slide.is-revealing .alkom-anim--slide-down  { animation-name: alkom-slide-down; }
.alkom-slider__slide.is-revealing .alkom-anim--slide-left  { animation-name: alkom-slide-left; }
.alkom-slider__slide.is-revealing .alkom-anim--slide-right { animation-name: alkom-slide-right; }
.alkom-slider__slide.is-revealing .alkom-anim--zoom-in     { animation-name: alkom-zoom-in; }
.alkom-slider__slide.is-revealing .alkom-anim--zoom-out    { animation-name: alkom-zoom-out; }

@keyframes alkom-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes alkom-slide-up {
    from { opacity: 0; transform: translate(var(--alkom-tx, -50%), calc(var(--alkom-ty, -50%) + 30px)); }
    to   { opacity: 1; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)); }
}
@keyframes alkom-slide-down {
    from { opacity: 0; transform: translate(var(--alkom-tx, -50%), calc(var(--alkom-ty, -50%) - 30px)); }
    to   { opacity: 1; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)); }
}
@keyframes alkom-slide-left {
    from { opacity: 0; transform: translate(calc(var(--alkom-tx, -50%) + 40px), var(--alkom-ty, -50%)); }
    to   { opacity: 1; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)); }
}
@keyframes alkom-slide-right {
    from { opacity: 0; transform: translate(calc(var(--alkom-tx, -50%) - 40px), var(--alkom-ty, -50%)); }
    to   { opacity: 1; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)); }
}
@keyframes alkom-zoom-in {
    from { opacity: 0; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)) scale(.7); }
    to   { opacity: 1; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)) scale(1); }
}
@keyframes alkom-zoom-out {
    from { opacity: 0; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)) scale(1.3); }
    to   { opacity: 1; transform: translate(var(--alkom-tx, -50%), var(--alkom-ty, -50%)) scale(1); }
}

/* ===== Strelice (FontAwesome thin angle-right stil) ===== */
.alkom-slider__arrow,
.alkom-slider__arrow:focus,
.alkom-slider__arrow:focus-visible,
.alkom-slider__arrow:active,
.alkom-slider__arrow:hover {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
}

.alkom-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 80px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease;
}

.alkom-slider__arrow:hover {
    color: #fff;
}

.alkom-slider__arrow svg {
    width: 42px;
    height: 42px;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

.alkom-slider__arrow--prev { left: 16px; }
.alkom-slider__arrow--next { right: 16px; }

/* ===== Dots ===== */
.alkom-slider__dots {
    position: absolute; bottom: 18px; left: 50%;
    transform: translateX(-50%); z-index: 10;
    display: flex; gap: 8px;
}
.alkom-slider__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, .5); border: none;
    cursor: pointer; padding: 0;
    transition: background .2s ease, transform .2s ease;
}
.alkom-slider__dot.is-active { background: #fff; transform: scale(1.3); }

/* ============================================================
   Transitions slajd-do-slajd (16 efekata, LayerSlider-style)
   ------------------------------------------------------------
   Konvencija:
   - Idle (non-active, non-leaving) = "ulazni" state (slajd čeka da uđe)
   - .is-active                     = krajnja pozicija (opacity:1, transform:none)
   - .is-leaving                    = "izlazni" state (slajd ide napolje)

   Auto-direction efekti čitaju track[data-direction="next|prev"]
   da odluče sa koje strane novi slajd ulazi i u koju stranu stari izlazi.
   ============================================================ */

/* --- 1. fade — čisti crossfade (opacity-only) --- */
.alkom-slider__track--fade .alkom-slider__slide:not(.is-active) { opacity: 0; }

/* --- 2. slide-horizontal — auto smer (next: ulaz zdesna, prev: ulaz sleva) --- */
.alkom-slider__track--slide-horizontal .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--slide-horizontal .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateX(100%); }
.alkom-slider__track--slide-horizontal .alkom-slider__slide.is-leaving { transform: translateX(-100%); }
.alkom-slider__track--slide-horizontal[data-direction="prev"] .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateX(-100%); }
.alkom-slider__track--slide-horizontal[data-direction="prev"] .alkom-slider__slide.is-leaving { transform: translateX(100%); }

/* --- 3. slide-vertical — auto smer (next: ulaz odozdo, prev: ulaz odozgo) --- */
.alkom-slider__track--slide-vertical .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--slide-vertical .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateY(100%); }
.alkom-slider__track--slide-vertical .alkom-slider__slide.is-leaving { transform: translateY(-100%); }
.alkom-slider__track--slide-vertical[data-direction="prev"] .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateY(-100%); }
.alkom-slider__track--slide-vertical[data-direction="prev"] .alkom-slider__slide.is-leaving { transform: translateY(100%); }

/* --- 4-7. slide-left/right/up/down — forced smer (uvek isti) --- */
.alkom-slider__track--slide-left .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--slide-left .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateX(100%); }
.alkom-slider__track--slide-left .alkom-slider__slide.is-leaving { transform: translateX(-100%); }

.alkom-slider__track--slide-right .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--slide-right .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateX(-100%); }
.alkom-slider__track--slide-right .alkom-slider__slide.is-leaving { transform: translateX(100%); }

.alkom-slider__track--slide-up .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--slide-up .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateY(100%); }
.alkom-slider__track--slide-up .alkom-slider__slide.is-leaving { transform: translateY(-100%); }

.alkom-slider__track--slide-down .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--slide-down .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: translateY(-100%); }
.alkom-slider__track--slide-down .alkom-slider__slide.is-leaving { transform: translateY(100%); }

/* --- 8. zoom-in — novi slajd kreće veliki, izlazi normalan --- */
.alkom-slider__track--zoom-in .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: scale(1.25); opacity: 0; }
.alkom-slider__track--zoom-in .alkom-slider__slide.is-leaving { transform: scale(1); opacity: 0; }

/* --- 9. zoom-out — novi slajd kreće mali, stari odlazi narastao --- */
.alkom-slider__track--zoom-out .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: scale(0.8); opacity: 0; }
.alkom-slider__track--zoom-out .alkom-slider__slide.is-leaving { transform: scale(1.1); opacity: 0; }

/* --- 10. zoom-fade — suptilan parallax-style zoom + fade --- */
.alkom-slider__track--zoom-fade .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: scale(1.08); opacity: 0; }
.alkom-slider__track--zoom-fade .alkom-slider__slide.is-leaving { transform: scale(0.94); opacity: 0; }

/* --- 11. blur — non-active blur + fade --- */
.alkom-slider__track--blur .alkom-slider__slide:not(.is-active) { filter: blur(14px); opacity: 0; }

/* --- 12. rotate — blaga 2D rotacija (novi rotira ka 0, stari rotira u suprotnu) --- */
.alkom-slider__track--rotate .alkom-slider__slide { transform-origin: center center; }
.alkom-slider__track--rotate .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: rotate(8deg) scale(0.9); opacity: 0; }
.alkom-slider__track--rotate .alkom-slider__slide.is-leaving { transform: rotate(-8deg) scale(0.9); opacity: 0; }

/* --- 13. flip-horizontal — 3D rotacija oko Y ose --- */
.alkom-slider__track--flip-horizontal { perspective: 1600px; }
.alkom-slider__track--flip-horizontal .alkom-slider__slide { backface-visibility: hidden; transform-style: preserve-3d; transform-origin: center center; }
.alkom-slider__track--flip-horizontal .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: rotateY(90deg); opacity: 0; }
.alkom-slider__track--flip-horizontal .alkom-slider__slide.is-leaving { transform: rotateY(-90deg); opacity: 0; }

/* --- 14. flip-vertical — 3D rotacija oko X ose --- */
.alkom-slider__track--flip-vertical { perspective: 1600px; }
.alkom-slider__track--flip-vertical .alkom-slider__slide { backface-visibility: hidden; transform-style: preserve-3d; transform-origin: center center; }
.alkom-slider__track--flip-vertical .alkom-slider__slide:not(.is-active):not(.is-leaving) { transform: rotateX(-90deg); opacity: 0; }
.alkom-slider__track--flip-vertical .alkom-slider__slide.is-leaving { transform: rotateX(90deg); opacity: 0; }

/* --- 15. reveal-horizontal — clip-path wipe sleva nadesno (auto smer) --- */
.alkom-slider__track--reveal-horizontal .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--reveal-horizontal .alkom-slider__slide:not(.is-active):not(.is-leaving) { clip-path: inset(0 0 0 100%); }
.alkom-slider__track--reveal-horizontal .alkom-slider__slide.is-leaving { clip-path: inset(0 100% 0 0); }
.alkom-slider__track--reveal-horizontal[data-direction="prev"] .alkom-slider__slide:not(.is-active):not(.is-leaving) { clip-path: inset(0 100% 0 0); }
.alkom-slider__track--reveal-horizontal[data-direction="prev"] .alkom-slider__slide.is-leaving { clip-path: inset(0 0 0 100%); }

/* --- 16. reveal-vertical — clip-path wipe odozdo nagore (auto smer) --- */
.alkom-slider__track--reveal-vertical .alkom-slider__slide { opacity: 1; }
.alkom-slider__track--reveal-vertical .alkom-slider__slide:not(.is-active):not(.is-leaving) { clip-path: inset(100% 0 0 0); }
.alkom-slider__track--reveal-vertical .alkom-slider__slide.is-leaving { clip-path: inset(0 0 100% 0); }
.alkom-slider__track--reveal-vertical[data-direction="prev"] .alkom-slider__slide:not(.is-active):not(.is-leaving) { clip-path: inset(0 0 100% 0); }
.alkom-slider__track--reveal-vertical[data-direction="prev"] .alkom-slider__slide.is-leaving { clip-path: inset(100% 0 0 0); }

@media (max-width: 768px) {
    .alkom-slider__arrow { width: 36px; height: 56px; }
    .alkom-slider__arrow svg { width: 28px; height: 28px; }
    .alkom-slider__arrow--prev { left: 8px; }
    .alkom-slider__arrow--next { right: 8px; }
    .alkom-slider__layer { transform-origin: center center; }
    .alkom-hide-mobile { display: none !important; }
}