* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; background-color: #141414; color: #ffffff; overflow-x: hidden; width: 100%; position: relative; }
        
        /* Common Styles */
        .page { display: none; animation: fadeIn 0.4s ease; min-height: 100vh; padding-bottom: 50px; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Navigation */
        .navbar { position: fixed; top: 0; width: 100%; height: 68px; padding: 0 4%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; background: linear-gradient(180deg, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0) 100%); transition: background-color 0.4s; }
        .navbar.scrolled { background-color: #141414; }
        .logo { font-size: 25px; font-weight: 700; color: #E50914; text-decoration: none; margin-right: 25px; cursor: pointer; }
        
        .nav-links { display: flex; gap: 20px; list-style: none; align-items: center; }
        .nav-links a { color: #e5e5e5; text-decoration: none; font-size: 14px; transition: color 0.3s; cursor: pointer; }
        .nav-links a:hover, .nav-links a.active { color: #ffffff; font-weight: 500; }
        
        .nav-right { display: flex; align-items: center; gap: 20px; margin-left: auto; }
        
        /* Search Box Animation */
        .search-box-container { display: flex; align-items: center; background: transparent; border: 1px solid transparent; padding: 5px; transition: all 0.3s ease; }
        .search-box-container.active { background: rgba(0,0,0,0.8); border: 1px solid #fff; }
        .search-input { background: transparent; border: none; color: white; padding: 0; font-size: 14px; outline: none; width: 0; transition: all 0.3s; opacity: 0; }
        .search-box-container.active .search-input { width: 200px; padding-left: 10px; opacity: 1; }
        .icon-nav { color: white; font-size: 1.2rem; cursor: pointer; }

        /* Hero Section (Billboard) - DÜZELTİLDİ */
        .hero { 
            position: relative; 
            height: 95vh; /* Yükseklik artırıldı */
            width: 100%; 
            background-size: cover; 
            background-position: center top; 
            margin-bottom: 0; /* Negatif margin kaldırıldı */
        }
        .hero::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 250px; background: linear-gradient(180deg, transparent, #141414); }
        .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(20,20,20,0.8) 0%, transparent 60%); }
        
        /* İçerik Yukarı Taşındı */
        .hero-content { position: absolute; top: 25%; left: 4%; width: 40%; z-index: 10; }
        
        .hero-badge { display: inline-block; background: rgba(229, 9, 20, 0.6); padding: 5px 10px; border-radius: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; }
        .hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.1; text-shadow: 2px 2px 4px rgba(0,0,0,0.45); }
        .hero-stats { display: flex; gap: 15px; margin-bottom: 20px; font-size: 16px; font-weight: bold; align-items: center; }
        .match-score { color: #46d369; }
        .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; line-height: 1.5; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); max-width: 600px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .hero-buttons { display: flex; gap: 10px; }
        
        .btn { border: none; border-radius: 4px; padding: 0.8rem 2rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: opacity 0.2s; }
        .btn-play { background: white; color: black; }
        .btn-play:hover { opacity: 0.8; }
        .btn-info { background: rgba(109, 109, 110, 0.7); color: white; }
        .btn-info:hover { background: rgba(109, 109, 110, 0.4); }
        
        /* Content Section & Rows - DÜZELTİLDİ */
        .content-section { 
            position: relative; 
            z-index: 20; 
            margin-top: -150px; /* Hafif bindirme */
            padding-bottom: 50px; 
            background: linear-gradient(to bottom, transparent, #141414 150px); /* Geçiş yumuşatma */
        }
        .movie-row { margin-bottom: 40px; position: relative; padding: 0 4%; }
        .row-header { margin-bottom: 10px; display: flex; align-items: center; }
        .category-title { font-size: 1.2rem; font-weight: 600; color: #e5e5e5; text-decoration: none; display: flex; align-items: center; }
        .category-title:hover { color: #fff; }
        
        /* Carousel */
        .movie-container { display: flex; gap: 10px; overflow-x: auto; padding-top: 10px; padding-bottom: 30px; scroll-behavior: smooth; scrollbar-width: none; }
        .movie-container::-webkit-scrollbar { display: none; }
        
        /* Movie Cards (Netflix Style) */
        .movie-card {
            flex: 0 0 auto;
            width: 160px; /* Masaüstü boyutu */
            aspect-ratio: 2/3; /* Dikey Poster */
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease, z-index 0s 0.3s;
            z-index: 1;
            background: #181818;
        }

        .movie-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

        .movie-card:hover {
            transform: scale(1.2);
            z-index: 100;
            box-shadow: 0 0 20px rgba(0,0,0,0.7);
            transition-delay: 0.3s;
        }

        /* Card Detail on Hover */
        .card-info {
            position: absolute;
            top: 98%;
            left: 0;
            right: 0;
            background: #181818;
            padding: 10px;
            border-radius: 0 0 4px 4px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease 0.3s;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        }

        .movie-card:hover .card-info { opacity: 1; visibility: visible; }

        .action-buttons { display: flex; gap: 8px; margin-bottom: 10px; justify-content: space-between; }
        .icon-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: #2a2a2a; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: 0.2s; }
        .icon-btn:hover { border-color: white; background: #444; }
        .icon-btn.play-mini { background: white; color: black; border-color: white; }
        
        .meta-tags { font-size: 10px; color: #fff; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
        .match-text { color: #46d369; font-weight: bold; }
        .age-rating { border: 1px solid #666; padding: 0 3px; font-size: 9px; }

        /* Grid Pages */
        .grid-page-header { padding-top: 100px; padding-left: 4%; padding-right: 4%; margin-bottom: 20px; }
        .grid-page-title { font-size: 2rem; font-weight: bold; margin-bottom: 10px; }
        .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; padding: 0 4%; }
        
        /* Scroll Arrows */
        .scroll-btn { position: absolute; top: 0; bottom: 0; width: 4%; background: rgba(0,0,0,0.5); border: none; color: white; font-size: 2rem; cursor: pointer; opacity: 0; transition: opacity 0.2s; z-index: 5; display: flex; align-items: center; justify-content: center; height: 100%; }
        .movie-row:hover .scroll-btn { opacity: 1; }
        .scroll-btn.left { left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
        .scroll-btn.right { right: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

        /* Watch Page */
        .watch-page { padding-top: 0; background: #000; display: flex; justify-content: center; align-items: center; }
        .video-player { width: 100%; height: 100vh; background: #000; }
        .back-button { position: absolute; top: 20px; left: 20px; z-index: 50; background: transparent; color: white; font-size: 1.5rem; border: none; cursor: pointer; }
        .plyr { width: 100%; height: 100%; }
        
        /* Modal */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
        .modal.active { display: flex; }
        .modal-content { background: #181818; width: 850px; max-width: 95%; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.5); animation: slideUp 0.3s; max-height: 90vh; overflow-y: auto; }
        @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-header { height: 450px; background-size: cover; background-position: center; position: relative; }
        .modal-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, #181818, transparent); }
        .modal-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: #181818; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; border: 2px solid rgba(255,255,255,0.1); }
        .modal-play-btn { position: absolute; bottom: 40px; left: 40px; padding: 10px 30px; font-size: 18px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 10px; background: white; color: black; z-index: 5; }
        .modal-body { padding: 30px 40px; display: flex; gap: 30px; flex-wrap: wrap; }
        .modal-left { flex: 2; min-width: 300px; }
        .modal-right { flex: 1; font-size: 14px; line-height: 1.6; min-width: 200px; }
        .modal-info { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; font-weight: bold; }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .movie-card { width: 140px; }
            .hero-content h1 { font-size: 3rem; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; } 
            .navbar { background: #141414; padding: 10px 4%; }
            .hero { height: 60vh; }
            .hero-content { width: 90%; top: auto; bottom: 20%; }
            .hero-content h1 { font-size: 2rem; }
            .hero-buttons .btn { padding: 0.5rem 1rem; font-size: 1rem; }
            
            /* Mobil Düzeltme: Bindirmeyi kaldır */
            .content-section { margin-top: 0; padding-top: 20px; }
            
            .movie-card { width: 110px; } 
            .movie-card:hover { transform: none; z-index: 1; }
            .card-info { display: none !important; }
            .scroll-btn { display: none; }
            .modal-body { flex-direction: column; }
            .modal-header { height: 250px; }
            .grid-container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
        }