:root {
        --primary-color: #00aaff;
        --primary-hover: #0099e6;
        --primary-light: rgba(0, 170, 255, 0.2);
        --primary-transparent: rgba(0, 170, 255, 0.15);

        --dark-bg: #0a0a0a;
        --secondary-bg: #101010;
        --card-bg: #1a1a1a;

        --text-color: #e0e0e0;
        --text-muted: #888;
        --border-color: rgba(255, 255, 255, 0.1);

        --glow-color: var(--primary-transparent);
        --glow-color-strong: rgba(0, 170, 255, 0.4);
        --aurora-color-1: rgba(0, 170, 255, 0.3);
        --aurora-color-2: rgba(88, 0, 255, 0.3);

        --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-size-base: clamp(0.9rem, 1.5vw + 0.5rem, 1rem);
        --line-height-base: 1.7;

        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2.5rem;

        --border-radius: 8px;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

        --transition-base: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        --transition-fast: 0.2s ease-out;
        --transition-slow: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }


    * { box-sizing: border-box; }
    .container { width: 100%; max-width: 1200px; padding: 0 clamp(1rem, 5vw, 1.5rem); margin: 0 auto; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body { background-color: var(--dark-bg); color: var(--text-color); font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height-base); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-fast); }
    a:hover { color: var(--primary-hover); }
    .navbar { background-color: rgba(16, 16, 16, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-color); padding: var(--spacing-sm) 0; position: sticky; top: 0; z-index: 1030; }
    .navbar-brand { color: var(--primary-color) !important; font-weight: 700; font-size: clamp(1.5rem, 4vw, 1.75rem); }
    .nav-link { color: var(--text-muted) !important; font-weight: 500; transition: all var(--transition-fast); margin: 0 var(--spacing-xs); position: relative; padding: var(--spacing-sm) 0; }
    .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width var(--transition-fast); }
    .nav-link:hover, .nav-link.active { color: var(--text-color) !important; }
    .nav-link:hover::after, .nav-link.active::after { width: 100%; }
    .hero-section { background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--dark-bg) 100%); padding: var(--spacing-xl) var(--spacing-md); margin-bottom: var(--spacing-xl); text-align: center; border-radius: 0 0 var(--border-radius) var(--border-radius); position: relative; overflow: hidden; } /* Added position/overflow for aurora */
    footer { background-color: var(--secondary-bg); border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.9rem; padding: var(--spacing-xl) 0; margin-top: auto; }
    footer a { color: var(--text-muted); transition: color var(--transition-fast), opacity var(--transition-fast); opacity: 0.8; }
    footer a:hover { color: var(--primary-color); opacity: 1; text-decoration: underline; }
    .footer-links { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); justify-content: center; align-items: center; }
    .footer-copyright { border-top: 1px solid var(--border-color); padding-top: var(--spacing-lg); margin-top: var(--spacing-lg); }
    .movie-card { display: block; border-radius: var(--border-radius); overflow: hidden; position: relative; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow); border: 1px solid var(--border-color); height: 100%; }
    .movie-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--primary-color); }
    .movie-card .poster-container { position: relative; padding-top: 150%; background-color: var(--card-bg); }
    .movie-card .movie-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .movie-card:hover .movie-poster { transform: scale(1.1); }
    .movie-card .view-count-badge { position: absolute; top: 8px; right: 8px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; backdrop-filter: blur(5px); display: flex; align-items: center; gap: 0.25rem; z-index: 3; border: 1px solid rgba(255, 255, 255, 0.1); }
    .movie-card .movie-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%); z-index: 2; color: #fff; }
    .movie-card .movie-title { color: #fff; font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .movie-card .movie-date { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; display: block; }
    .movie-card .poster-container::before { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.6); opacity: 0; transition: opacity var(--transition-base); z-index: 1; }
    .movie-card .poster-container::after { content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); font-size: 3rem; color: white; opacity: 0; transition: all var(--transition-base); z-index: 2; text-shadow: 0 0 15px rgba(0,0,0,0.5); }
    .movie-card:hover .poster-container::before, .movie-card:hover .poster-container::after { opacity: 1; }
    .movie-card:hover .poster-container::after { transform: translate(-50%, -50%) scale(1); }
    .detail-section { background-color: var(--secondary-bg); padding: 1.5rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
    .section-title { font-size: clamp(1.25rem, 5vw, 1.75rem); font-weight: 600; margin-bottom: 1.5rem; color: var(--text-color); display: flex; align-items: center; gap: .75rem; }
    .section-title i { color: var(--primary-color); }
    .advanced-search-form { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 2.5rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all var(--transition-base); }
    .advanced-search-form:hover { box-shadow: var(--shadow-md); border-color: var(--primary-light); }
    .form-control, .form-select { background-color: var(--secondary-bg); border: 1px solid var(--border-color); color: var(--text-color); transition: all var(--transition-base); height: 50px; border-radius: var(--border-radius); }
    .form-control:focus, .form-select:focus { background-color: var(--secondary-bg); border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-transparent); color: var(--text-color); outline: none; }
    .form-control::placeholder { color: var(--text-muted); opacity: 0.7; }
    .btn-primary { background-color: var(--primary-color); border: none; padding: 0.75rem 2rem; font-weight: 600; transition: all var(--transition-base); height: 50px; border-radius: var(--border-radius); }
    .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px var(--primary-transparent); }
    .timeframe-selector .btn-group, .share-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .timeframe-selector .btn-group .btn { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-color); transition: all var(--transition-base); }
    .timeframe-selector .btn-group .btn.active, .timeframe-selector .btn-group .btn:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: white; transform: translateY(-2px); }
    .pagination-wrapper { margin: 3rem 0; }
    .page-link { background-color: var(--secondary-bg); border-color: var(--border-color); color: var(--text-color); margin: 0 3px; border-radius: var(--border-radius) !important; min-width: 44px; height: 44px; text-align: center; transition: all var(--transition-base); }
    .page-link:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: white; transform: translateY(-2px); }
    .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); font-weight: 600; }
    .page-item.disabled .page-link { background-color: var(--card-bg); border-color: var(--border-color); opacity: 0.6; }
    .horizontal-scroll-container { display: flex; overflow-x: auto; gap: 1.25rem; padding: 0.5rem 0 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .horizontal-scroll-container::-webkit-scrollbar { display: none; }
    .horizontal-scroll-container .movie-card { flex: 0 0 calc((100% / 6) - 1.25rem); min-width: 160px; }
    .share-buttons-container { margin-top: 1.5rem; }
    .share-buttons-container .section-title { font-size: clamp(1rem, 4vw, 1.2rem); margin-bottom: 1rem; }
    .share-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem clamp(0.8rem, 3vw, 1.2rem); min-width: 44px; min-height: 44px; border-radius: var(--border-radius); color: #fff !important; background-color: var(--btn-bg-color, #555); text-decoration: none; font-weight: 500; font-size: clamp(0.9rem, 3.5vw, 1rem); transition: transform 0.2s, filter 0.2s; border: none; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1 1 calc(50% - 0.75rem); }
	.hero-ads-container{display:flex;justify-content:space-between;gap:20px;margin-top:20px;padding:0;min-height:80px}.hero-ads-column{display:flex;flex-direction:column;gap:8px;width:49%}.hero-ad-banner{width:100%;min-height:40px;aspect-ratio:540/60}.hero-ad-banner img{width:100%;height:auto;display:block}.floating-ad-content,.hero-ad-banner{display:block;overflow:hidden;line-height:0;background-color:#1a1a1a;border-radius:4px;position:relative}.hero-ad-banner video{autoplay:true;muted:true;loop:true;playsinline:true}.ad-media,.ad-media img,.ad-media picture,.ad-media video{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover}#floating-footer-ad{position:fixed;bottom:0;left:0;right:0;margin:0 auto;width:100%;background-color:#1f1f1f;box-shadow:0 -4px 10px rgba(0,0,0,.3);z-index:1000;display:flex;justify-content:center;align-items:center;padding:8px 40px 8px 8px;transition:transform .3s ease-in-out;max-width:728px;aspect-ratio:728/90}.floating-ad-content{aspect-ratio:728/90;width:100%;height:auto}.floating-ad-content>*{width:100%;height:100%;object-fit:contain}.close-ad-btn{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;width:28px;height:28px;font-size:22px;line-height:26px;cursor:pointer;font-weight:700;text-align:center}.close-ad-btn:hover{background:rgba(255,0,0,.7)}@media (max-width:1200px){.hero-ads-container{flex-direction:column;align-items:center;gap:8px}.hero-ads-column{width:100%;max-width:540px}}

    @keyframes aurora-shift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .hero-aurora::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(ellipse at 20% 80%, var(--aurora-color-1), transparent 70%),
                    radial-gradient(ellipse at 80% 30%, var(--aurora-color-2), transparent 70%);
        background-size: 200% 200%;
        z-index: 0;
        opacity: 0.5;
        filter: blur(80px);
        animation: aurora-shift 20s ease infinite;
    }
    .hero-aurora > * { 
        position: relative;
        z-index: 1;
    }

    .grid-3d-tilt {
        perspective: 1500px;
    }
    .grid-3d-tilt .movie-card {
        transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    .grid-3d-tilt .movie-card:hover {
        transform: translateY(-10px) rotateX(10deg) rotateY(-5deg) scale(1.05);
        box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    }

    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 8px 3px var(--glow-color); }
      50% { box-shadow: 0 0 12px 5px var(--glow-color-strong); }
    }
    .form-control:focus, .form-select:focus {
        animation: pulse-glow 2s infinite;
    }
    .btn-primary:hover {
        box-shadow: 0 0 20px 5px var(--glow-color);
    }

    @keyframes animate-in {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    .reveal-on-scroll {
        opacity: 0;
        animation: animate-in var(--transition-slow) forwards;
        animation-play-state: paused;
    }

    .reveal-on-scroll.stagger-1 { animation-delay: 0.1s; }
    .reveal-on-scroll.stagger-2 { animation-delay: 0.2s; }
    .reveal-on-scroll.stagger-3 { animation-delay: 0.3s; }
    .reveal-on-scroll.stagger-4 { animation-delay: 0.4s; }

    .reveal-on-scroll.in-view {
        animation-play-state: running;
    }
	
	@media (max-width:768px)  { .hero-section{padding-bottom:20px}}
    @media (max-width: 992px) { .navbar-collapse { padding-top: 1rem; } }
    @media (max-width: 768px) { .horizontal-scroll-container .movie-card { flex-basis: calc((100% / 3) - 1rem); min-width: 150px; } }
    @media (max-width: 576px) { .container { padding: 0 var(--spacing-md); } .advanced-search-form { padding: 1.5rem; } .horizontal-scroll-container .movie-card { flex-basis: calc((100% / 2.2) - 1rem); min-width: 140px; } }
    @media (min-width: 600px) { .share-btn { flex: 0 1 auto; padding: 0.6rem 1.2rem; } }
    @media (max-width: 1400px) { .container { max-width: 1140px; } }
    @media (max-width: 1200px) { .container { max-width: 960px; } }