:root { --primary: #dca73a; --bg-dark: #000000; --text-light: #f5f5f5;}
.film-hero { position: relative; width: 100%; height: calc(100vh - 105px); background: #000; overflow: hidden; display: flex; flex-direction: column; color: var(--text-light); font-family: "Inter", "Segoe UI", sans-serif;}
.hero-nav {position: absolute;top: 20px;left: 20px;z-index: 10;}
.return-link {color: white;text-decoration: none;font-size: 14px;display: flex;align-items: center;gap: 8px;background: rgba(0, 0, 0, 0.5);padding: 8px 16px;border-radius: 20px;backdrop-filter: blur(5px);transition: background 0.3s;}
.return-link:hover { background: rgba(0, 0, 0, 0.8); color: white;}
.hero-video-container {width: 100%;height: 100%;position: relative;}
.hero-video-container video,
.hero-video-container .plyr {width: 100%;height: 100%;object-fit: contain;}
.hero-video-container .plyr--video {height: 100%;}
.film-hero:not(.is-playing) .plyr__controls,
.film-hero:not(.is-playing) .plyr__control--overlaid {display: none !important;opacity: 0 !important;visibility: hidden !important;pointer-events: none !important;}
.hero-close-player { position: absolute; top: 20px; right: 20px; z-index: 20; background: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 16px; font-size: 14px; cursor: pointer; border-radius: 4px; display: none; text-decoration: none; transition: opacity 0.4s ease, background 0.3s ease;}
.hero-close-player:hover {background: rgba(0, 0, 0, 0.9);}
.film-hero.is-playing .hero-close-player {display: block;}
.plyr--hide-controls .hero-close-player {opacity: 0;pointer-events: none;}
.hero-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; box-sizing: border-box; transition: opacity 0.5s ease; z-index: 5;}
.hero-overlay.hidden {opacity: 0;pointer-events: none;}
.film-title {font-size: 2.5rem;margin: 0 0 10px 0;font-weight: 700;color: white;}
.action-buttons {display: flex;gap: 15px;flex-wrap: wrap;margin-top: 20px;}
.hero-btn {padding: 12px 24px;border-radius: 6px;font-size: 16px;font-weight: 600;cursor: pointer;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;transition: all 0.2s;border: none;}
.btn-primary {background-color: var(--primary);color: #000;}
.btn-primary:hover { background-color: #e5b854; transform: scale(1.02); color: #000;}
.btn-secondary {background-color: rgba(255, 255, 255, 0.15);color: white;backdrop-filter: blur(10px);}
.btn-secondary:hover {background-color: rgba(255, 255, 255, 0.25);color: white;}
.btn-icon { margin-right: 8px; font-size: 1.2em;}
@media (max-width: 768px) {
  .hero-overlay { background: linear-gradient( to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.3) 100%); backdrop-filter: blur(1px); padding: 20px;}
  .film-title {font-size: 2rem;}
  .action-buttons {flex-direction: column;}
  .hero-btn {width: 100%;}
  .action-buttons {align-items: start !important;}
  .action-buttons a {width: 100% !important;}
  .action-buttons {width: 100% !important;}
  .action-buttons #accessDropdown {width: 100% !important;}
  .action-buttons a:hover {color: black !important;}
}