:root{
    --marka-blue:#3B4EFF;
    --marka-bg:#000;
    --marka-text:#fff;
    --marka-soft:rgba(255,255,255,.10);
    --marka-soft-2:rgba(255,255,255,.18);
    --marka-shadow:0 10px 30px rgba(0,0,0,.22);
}

/* CONTENEDOR */

.marka-player{

    position:relative;

    width:80%;
    max-width:1100px;
    min-width:280px;

    margin:40px auto;

    background:var(--marka-bg);
    color:var(--marka-text);

    overflow:hidden;

    border-radius:18px;
    box-shadow:var(--marka-shadow);

    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

    isolation:isolate;

    transition:transform .25s ease, box-shadow .25s ease;
}

.marka-player:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 50px rgba(0,0,0,.35);
}

/* FULLSCREEN */

.marka-player:fullscreen,
.marka-player.is-fullscreen{

    width:100vw;
    height:100vh;

    max-width:none;

    border-radius:0;
}

/* VIDEO WRAPPER (FIX IMPORTANTE) */

.marka-video-wrapper{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    background:#000;

}

/* VIDEO */

.marka-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    border:none;
    display:block;

    background:#000;

}

/* CAPA INTERACCIÓN */

.marka-video-hitarea{
    position:absolute;
    inset:0;
    z-index:2;
    background:transparent;
    cursor:pointer;
}

/* PLAY CENTRAL */

.marka-center-play{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:74px;
    height:74px;

    border:none;

    border-radius:999px;

    background:rgba(0,0,0,.42);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:8;

    opacity:0;
    pointer-events:none;

    transition:opacity .2s ease, transform .2s ease, background .2s ease;

    backdrop-filter:blur(6px);

}

.marka-center-play.is-visible{
    opacity:1;
    pointer-events:auto;
}

.marka-center-play:hover{
    background:rgba(14,0,248,.75);
}

.marka-center-play-icon{
    font-size:28px;
    line-height:1;
    transform:translateX(2px);
}

/* EXIT FULLSCREEN */

.marka-exit-fs{

    position:absolute;

    top:14px;
    right:14px;

    z-index:20;

    width:42px;
    height:42px;

    border:none;

    border-radius:999px;

    background:rgba(0,0,0,.5);

    color:#fff;

    display:none;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    backdrop-filter:blur(8px);

}

.marka-exit-fs:hover{
    background:rgba(14,0,248,.82);
}

.marka-player:fullscreen .marka-exit-fs,
.marka-player.is-fullscreen .marka-exit-fs{
    display:flex;
}

/* CONTROLES */

.marka-controls-shell{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:10;

    padding:0 14px 14px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.80) 30%,
        rgba(0,0,0,.60) 50%,
        rgba(0,0,0,.40) 70%,
        rgba(0,0,0,0) 100%
    );

    transition:opacity .3s ease;

}

/* LOOP A B */

.marka-ab-wrap{
    margin-bottom:12px;
}

.marka-ab-wrap.is-hidden{
    display:none !important;
}

.marka-ab-track{

    position:relative;

    height:8px;
    width:100%;

    border-radius:999px;

    background:rgba(255,255,255,.13);

}

.marka-ab-selection{

    position:absolute;

    top:0;

    height:100%;

    border-radius:999px;

    background:var(--marka-blue);

}

.marka-ab-handle{

    position:absolute;

    top:50%;

    width:18px;
    height:18px;

    transform:translate(-50%,-50%);

    border:none;

    border-radius:999px;

    background:var(--marka-blue);

    cursor:ew-resize;

    box-shadow:0 0 0 3px rgba(255,255,255,.22);

}

.marka-ab-handle::before{

    content:"";

    position:absolute;

    inset:5px;

    border-radius:999px;

    background:#fff;

}

/* PROGRESS */

.marka-progress-wrap{
    margin-bottom:12px;
}

.marka-progress{

    width:100%;

    appearance:none;
    -webkit-appearance:none;

    background:transparent;

}

.marka-progress::-webkit-slider-runnable-track{
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.22);
}

.marka-progress::-webkit-slider-thumb{

    -webkit-appearance:none;

    margin-top:-4px;

    width:12px;
    height:12px;

    border-radius:999px;

    background:#fff;

}

/* CONTROLES FILA */

.marka-controls{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

}

.marka-controls-left,
.marka-controls-right{

    display:flex;

    align-items:center;

    gap:10px;

}

.marka-time{

    font-size:12px;

    color:rgba(255,255,255,.86);

}

/* BOTONES */

.marka-btn{

    min-width:38px;

    height:38px;

    padding:0 12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    color:#fff;

    cursor:pointer;

    backdrop-filter:blur(6px);

}

.marka-btn:hover{
    background:rgba(14,0,248,.82);
}

/* SPEED MENU */

.marka-speed{
    position:relative;
}

.marka-speed-menu{

    position:absolute;

    right:0;

    bottom:calc(100% + 10px);

    min-width:88px;

    padding:8px;

    border-radius:12px;

    background:rgba(8,8,8,.92);

    display:flex;

    flex-direction:column;

    gap:4px;

}

.marka-speed-menu.is-hidden{
    display:none !important;
}

.marka-speed-option{

    border:none;

    border-radius:9px;

    background:transparent;

    color:#fff;

    padding:8px 10px;

    cursor:pointer;

}

.marka-speed-option:hover,
.marka-speed-option.is-active{

    background:rgba(14,0,248,.82);

}

/* RESPONSIVE */

@media (max-width:768px){

    .marka-player{
        width:92%;
        border-radius:14px;
    }

}

@media (max-width:600px){

    .marka-player{
        width:96%;
    }

}