/* ==========================================================
   STUDIO 1 VIDEO SHOWCASE PREMIUM
   PART 1 : SECTION • PLAYER • INFO • PROGRESS
========================================================== */

:root{

    --video-radius:28px;

    --video-gold:#D4AF37;

    --video-dark:#111;

    --video-shadow:
        0 25px 70px rgba(0,0,0,.18);

    --video-transition:.35s ease;

}

/* ==========================================================
SECTION
========================================================== */

.video-showcase{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:

    radial-gradient(circle at top left,
    rgba(212,175,55,.08),
    transparent 38%),

    radial-gradient(circle at bottom right,
    rgba(0,0,0,.05),
    transparent 45%),

    #fafafa;

}

.video-showcase .container{

    position:relative;

    z-index:2;

}

.video-showcase .section-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

/* ==========================================================
PLAYER WRAPPER
========================================================== */

.video-player-wrapper{

    max-width:1180px;

    margin:0 auto;

}

/* ==========================================================
PLAYER
========================================================== */

.video-player{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:var(--video-radius);

    background:#000;

    box-shadow:var(--video-shadow);

}

.video-player-frame{

    width:100%;

    height:100%;

}

/* iframe dibuat oleh YouTube API */

.video-player iframe{

    width:100%;

    height:100%;

    border:none;

}

/* ==========================================================
LOADING
========================================================== */

.video-loading{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:30;

}

.video-loading.show{

    opacity:1;

    visibility:visible;

}

.video-spinner{

    width:58px;

    height:58px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.15);

    border-top-color:var(--video-gold);

    animation:videoSpin 1s linear infinite;

}

@keyframes videoSpin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
PROGRESS BAR
========================================================== */

.video-progress{

    position:relative;

    margin-top:18px;

    width:100%;

    height:5px;

    overflow:hidden;

    border-radius:30px;

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

}

.video-progress-bar{

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #D4AF37,
        #F4D76A
    );

    transition:width .15s linear;

}

/* ==========================================================
VIDEO INFO
========================================================== */

.video-info{

    max-width:1180px;

    margin:26px auto 0;

    text-align:center;

}

.video-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(212,175,55,.12);

    color:var(--video-gold);

    font-size:1.5rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.video-info h3{

    margin-top:16px;

    font-size:2rem;

    font-weight:800;

    line-height:1.35;

    color:#222;

}

/* ==========================================================
PLAYER HOVER
========================================================== */

.video-player::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.08);

}

.video-player:hover{

    transform:translateY(-2px);

    transition:var(--video-transition);

    box-shadow:

    0 40px 90px rgba(0,0,0,.22),

    0 0 0 1px rgba(212,175,55,.18);

}

/* ==========================================================
   PART 2 : PLAYLIST • THUMBNAIL • FILM STRIP
========================================================== */

/* ==========================================================
PLAYLIST
========================================================== */

.video-playlist{

    margin-top:42px;

    display:flex;

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:8px 6px 16px;

}

.video-playlist::-webkit-scrollbar{

    display:none;

}

/* ==========================================================
THUMB
========================================================== */

.video-thumb{

    position:relative;

    flex:0 0 250px;

    background:#fff;

    border:none;

    padding:0;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    text-align:left;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

}

/* ==========================================================
IMAGE
========================================================== */

.video-thumb-image{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#111;

}

.video-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .7s ease;

}

/* ==========================================================
OVERLAY
========================================================== */

.thumb-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.55),

        rgba(0,0,0,.15),

        transparent

    );

    transition:.35s;

}

/* ==========================================================
PLAY BUTTON
========================================================== */

.thumb-play{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    backdrop-filter:blur(14px);

    background:

    rgba(255,255,255,.18);

    color:#fff;

    transition:.35s;

    box-shadow:

    0 8px 20px rgba(0,0,0,.25);

}

.thumb-play svg{

    width:24px;

    height:24px;

}

/* ==========================================================
CONTENT
========================================================== */

.video-thumb-content{

    padding:18px 18px 20px;

}

.video-thumb-content span{

    display:block;

    color:var(--video-gold);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.video-thumb-content h4{

    margin-top:10px;

    font-size:1rem;

    line-height:1.55;

    color:#222;

    font-weight:700;

}

/* ==========================================================
HOVER
========================================================== */

.video-thumb:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 24px 55px rgba(0,0,0,.16);

}

.video-thumb:hover img{

    transform:scale(1.08);

}

.video-thumb:hover .thumb-play{

    background:var(--video-gold);

    color:#111;

    transform:scale(1.08);

}

.video-thumb:hover .thumb-overlay{

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.40),

        rgba(0,0,0,.10),

        transparent

    );

}

/* ==========================================================
ACTIVE
========================================================== */

.video-thumb.active{

    transform:

        translateY(-10px);

    box-shadow:

        0 20px 50px rgba(212,175,55,.28);

}

.video-thumb.active::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:3px solid var(--video-gold);

    pointer-events:none;

}

.video-thumb.active .thumb-play{

    background:var(--video-gold);

    color:#111;

}

.video-thumb.active img{

    transform:scale(1.05);

}

/* ==========================================================
FOCUS
========================================================== */

.video-thumb:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(212,175,55,.35);

}

/* ==========================================================
   PART 3 : FOOTER • ANIMATION • RESPONSIVE
========================================================== */

/* ==========================================================
YOUTUBE BUTTON
========================================================== */

.video-footer{

    margin-top:55px;

    text-align:center;

}

.btn-youtube{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #F4D76A
    );

    color:#111;

    font-weight:700;

    font-size:1rem;

    letter-spacing:.3px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 14px 35px rgba(212,175,55,.28);

}

.btn-youtube svg{

    width:22px;

    height:22px;

}

.btn-youtube:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 22px 45px rgba(212,175,55,.40);

}

.btn-youtube:active{

    transform:scale(.98);

}

/* ==========================================================
FADE EFFECT
========================================================== */

.video-player iframe{

    opacity:1;

    transition:
        opacity .35s ease;

}

.video-player.loading iframe{

    opacity:.25;

}

/* ==========================================================
PLAYER GLOW
========================================================== */

.video-player{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.video-player:hover{

    transform:translateY(-4px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.22),

        0 0 0 1px rgba(212,175,55,.20),

        0 0 45px rgba(212,175,55,.12);

}

/* ==========================================================
SCROLL SNAP
========================================================== */

.video-playlist{

    scroll-snap-type:x proximity;

}

.video-thumb{

    scroll-snap-align:center;

}

/* ==========================================================
TABLET
========================================================== */

@media (max-width:991px){

.video-showcase{

    padding:95px 0;

}

.video-player-wrapper{

    max-width:100%;

}

.video-info h3{

    font-size:1.7rem;

}

.video-thumb{

    flex:0 0 220px;

}

.video-thumb-content{

    padding:16px;

}

}

/* ==========================================================
MOBILE
========================================================== */

@media (max-width:768px){

.video-showcase{

    padding:80px 0;

}

.video-player{

    border-radius:20px;

}

.video-progress{

    margin-top:14px;

}

.video-info{

    margin-top:20px;

}

.video-info h3{

    font-size:1.35rem;

    line-height:1.5;

    padding:0 12px;

}

.video-category{

    font-size:.72rem;

    padding:7px 16px;

}

.video-playlist{

    gap:16px;

    padding:8px 4px 14px;

}

.video-thumb{

    flex:0 0 250px;

    border-radius:18px;

}

.thumb-play{

    width:54px;

    height:54px;

}

.thumb-play svg{

    width:20px;

    height:20px;

}

.video-thumb-content{

    padding:15px;

}

.video-thumb-content h4{

    font-size:.95rem;

}

.btn-youtube{

    width:100%;

    max-width:320px;

    justify-content:center;

}

}

/* HP */
@media (max-width:767px){

    .section-heading h2{
        font-size:18px;
        line-height:1.35;
    }

}

/* ==========================================================
SMALL MOBILE
========================================================== */

@media (max-width:480px){

.video-thumb{

    flex:0 0 220px;

}

.video-info h3{

    font-size:1.2rem;

}

.video-category{

    letter-spacing:1px;

}

}

/* ==========================================================
REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}