/* ===== HERO STYLES (Mostly Unchanged) ===== */
.tfk-hero { background:#000; color:#fff; padding:2.5rem 4vw; font-family:'Poppins','Roboto',sans-serif; }
.tfk-hero-inner { display:flex; gap:2rem; max-width:1200px; margin:0 auto; }
.tfk-hero-main { position:relative; flex:3; border-radius:14px; overflow:hidden; min-height:380px; aspect-ratio:16/9; background:#111; }
.tfk-hero-slide { position:relative; width:100%; height:100%; display:none; }
.tfk-hero-slide.active { display:block; }
.tfk-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:var(--bg); filter:brightness(0.75); }
.tfk-hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0) 100%); }
.tfk-hero-content { position:absolute; bottom:1.8rem; left:1.8rem; right:1.8rem; z-index:2; display:flex; flex-direction:column; gap:1.2rem; transition:opacity 0.4s; }
.tfk-hero-meta { display:flex; align-items:flex-start; gap:1.2rem; }
.tfk-hero-play { width:66px; height:66px; border-radius:50%; border:none; background:#f5c518; font-size:1.6rem; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.tfk-hero-meta h2 { font-size:2rem; font-weight:600; margin-bottom:.35rem; letter-spacing:0.3px; line-height:1.2; }
.tfk-hero-meta p { font-size:1rem; font-weight:400; opacity:.92; line-height:1.4; margin:0; }
.tfk-hero-time { font-size:.9rem; opacity:.8; display:inline-block; margin-top:.3rem; }
.tfk-hero-stats { display:flex; gap:1.3rem; font-size:1rem; opacity:.92; font-weight:500; }
.tfk-hero-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.55); border:none; color:#fff; font-size:1.8rem; width:44px; height:60px; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:6px; z-index:10; transition:background .2s; }
.tfk-hero-arrow:hover { background:rgba(0,0,0,0.7); }
.tfk-hero-arrow.prev { left:10px; }
.tfk-hero-arrow.next { right:10px; }
.tfk-hero-side { flex:1.3; display:flex; flex-direction:column; gap:1rem; }
.tfk-hero-side h3 { font-size:1.2rem; font-weight:600; margin-bottom:.3rem; }
.tfk-hero-list { display:flex; flex-direction:column; gap:1rem; max-height:380px; overflow-y:auto; padding-right:6px; }
.tfk-hero-item { display:flex; gap:1rem; padding:.75rem; border-radius:10px; cursor:pointer; background:transparent; transition:background .25s, transform .2s; border:1px solid transparent; }
.tfk-hero-item:hover { background:#151515; border-color:#272727; transform:translateY(-2px); }
.tfk-hero-item.active { background:#1c1c1c; border-color:#2a2a2a; }
.tfk-hero-item .thumb { position:relative; width:120px; height:75px; flex-shrink:0; border-radius:8px; overflow:hidden; }
.tfk-hero-item .thumb img { width:100%; height:100%; object-fit:cover; }
.tfk-hero-item .duration { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,0.85); padding:2px 6px; font-size:.75rem; border-radius:4px; }
.tfk-hero-item .info { display:flex; flex-direction:column; gap:3px; }
.tfk-hero-item .section { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.tfk-hero-item h4 { font-size:1rem; font-weight:600; }
.tfk-hero-item .desc { font-size:.85rem; opacity:.82; line-height:1.3; }
.mini-stats { display:flex; gap:1rem; font-size:.8rem; opacity:.9; }
.tfk-hero-browse { font-size:1rem; margin-top:.3rem; opacity:.88; text-decoration:none; color:#fff; }

/* ===== IN-PLACE VIDEO STYLES (Unchanged) ===== */
.tfk-video-player {
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0;
    transition:opacity 0.5s ease;
}
.tfk-video-player .tfk-main-video {
    width:100%;
    height:100%;
    object-fit:cover; 
}

/* Class applied to the slide when video is active */
.tfk-hero-slide.video-playing .tfk-hero-bg {
    display:none; /* Hide background image/overlay */
}
.tfk-hero-slide.video-playing .tfk-hero-content {
    opacity:0; /* Hide metadata overlay */
    pointer-events:none; /* Disable clicks on overlay */
}
.tfk-hero-slide.video-playing .tfk-video-player {
    opacity:1; /* Show video player */
    z-index:3; /* Bring player to front */
}


@media (max-width:1024px) {
    .tfk-hero-inner { flex-direction:column; max-width:100%; }
    .tfk-hero-side { display:none; }
    .tfk-hero-main { width:100%; aspect-ratio:16/9; min-height:260px; }
    .tfk-hero-content { left:1.2rem; right:1.2rem; bottom:1.2rem; }
    .tfk-hero-meta h2 { font-size:1.6rem; }
    .tfk-hero-meta p { font-size:.85rem; }
}
@media (max-width:480px) {
    .tfk-hero { padding:1rem 3vw; }
    .tfk-hero-meta h2 { font-size:1.35rem; }
    .tfk-hero-meta p { font-size:.85rem; }
}