Sci-Fi Trailers | Metaverse Planet<\/title>\n<\/head>\n<body>\n\n<div id=\"scifi-app-container\">\n \n <div id=\"scifi-hero\" class=\"scifi-hero\">\n <div class=\"scifi-hero-overlay\"><\/div>\n <div class=\"scifi-hero-content\" id=\"scifi-hero-content\">\n <\/div>\n <\/div>\n\n <div id=\"scifi-rows-container\"><\/div>\n\n <div class=\"scifi-all-movies-section\">\n <h2 class=\"scifi-row-title\" style=\"padding-left: 40px; margin-top: 40px; border-left: 4px solid #e50914;\">Explore More Sci-Fi<\/h2>\n <div id=\"scifi-movie-grid\" class=\"scifi-movie-grid\"><\/div>\n \n <div class=\"scifi-load-more-container\">\n <button id=\"scifi-load-more-btn\" class=\"scifi-load-more-btn\">Load More<\/button>\n <\/div>\n <\/div>\n\n <div id=\"scifi-trailer-modal\" class=\"scifi-modal\">\n <span class=\"scifi-close-btn\" id=\"scifi-close-modal\">×<\/span>\n <div class=\"scifi-modal-content\">\n <div id=\"scifi-video-container\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n \/* \u0130zole Tasar\u0131m Kurallar\u0131 *\/\n #scifi-app-container {\n background-color: #141414;\n color: #ffffff;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n padding-bottom: 50px;\n box-sizing: border-box;\n width: 100%;\n overflow-x: hidden;\n }\n\n \/* Vitrin (Hero Section) *\/\n #scifi-app-container .scifi-hero {\n position: relative;\n width: 100%;\n height: 70vh;\n min-height: 500px;\n background-color: #000;\n background-size: cover;\n background-position: top center;\n margin-bottom: -30px;\n display: flex;\n align-items: flex-end;\n }\n\n #scifi-app-container .scifi-hero-overlay {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: linear-gradient(to top, #141414 0%, rgba(20,20,20,0.5) 40%, rgba(0,0,0,0.1) 100%);\n }\n\n #scifi-app-container .scifi-hero-content {\n position: relative;\n z-index: 2;\n padding: 0 40px 100px 40px;\n max-width: 800px;\n }\n\n \/* Vitrin Puan Rozeti *\/\n #scifi-app-container .scifi-hero-rating {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: rgba(0,0,0,0.6);\n color: #ffd700;\n padding: 5px 12px;\n border-radius: 4px;\n font-size: 1.1rem;\n font-weight: bold;\n margin-bottom: 15px;\n border: 1px solid rgba(255, 215, 0, 0.3);\n }\n\n #scifi-app-container .scifi-hero-rating span { color: #fff; }\n\n #scifi-app-container .scifi-hero-title {\n font-size: 3.5rem;\n margin: 0 0 15px 0;\n font-weight: 800;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container .scifi-hero-overview {\n font-size: 1.1rem;\n line-height: 1.5;\n margin-bottom: 25px;\n color: #fff;\n text-shadow: 1px 1px 3px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container .scifi-hero-play-btn {\n background-color: #fff;\n color: #000;\n border: none;\n padding: 10px 30px;\n font-size: 1.2rem;\n font-weight: bold;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n #scifi-app-container .scifi-hero-play-btn:hover { background-color: rgba(255,255,255,0.7); }\n\n \/* Sat\u0131r Ba\u015fl\u0131klar\u0131 *\/\n #scifi-app-container .scifi-row-title {\n font-size: 1.4rem;\n margin: 0 0 15px 0;\n font-weight: bold;\n color: #e5e5e5;\n padding-left: 10px;\n }\n\n \/* Kategori Sat\u0131rlar\u0131 *\/\n #scifi-app-container .scifi-row {\n position: relative;\n z-index: 3;\n margin-bottom: 40px;\n padding-left: 30px;\n }\n\n #scifi-app-container .scifi-row-posters {\n display: flex;\n gap: 15px;\n overflow-y: hidden;\n overflow-x: auto;\n padding: 10px 0 20px 10px;\n scroll-behavior: smooth;\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n #scifi-app-container .scifi-row-posters::-webkit-scrollbar { display: none; }\n\n \/* Grid Alan\u0131 *\/\n #scifi-app-container .scifi-all-movies-section {\n position: relative;\n z-index: 3;\n }\n\n #scifi-app-container .scifi-movie-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 20px;\n padding: 0 40px;\n }\n\n \/* Film Kartlar\u0131 (Ortak) *\/\n #scifi-app-container .scifi-movie-card,\n #scifi-app-container .scifi-grid-card {\n flex: 0 0 auto;\n width: 200px;\n position: relative;\n border-radius: 5px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.3s ease;\n background: #222;\n aspect-ratio: 2 \/ 3;\n }\n\n #scifi-app-container .scifi-grid-card { width: 100%; }\n\n #scifi-app-container .scifi-movie-card:hover,\n #scifi-app-container .scifi-grid-card:hover {\n transform: scale(1.08);\n z-index: 10;\n box-shadow: 0 5px 15px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container .scifi-movie-poster {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* Afi\u015f \u00dczerindeki Puan Rozeti *\/\n #scifi-app-container .scifi-card-rating {\n position: absolute;\n top: 8px; right: 8px;\n background: rgba(0, 0, 0, 0.75);\n color: #fff;\n padding: 4px 6px;\n border-radius: 4px;\n font-size: 0.85rem;\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 3px;\n z-index: 5;\n backdrop-filter: blur(2px);\n }\n\n #scifi-app-container .scifi-card-rating i {\n color: #ffd700; font-style: normal;\n }\n\n \/* Hover Play \u0130konu *\/\n #scifi-app-container .scifi-play-overlay {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0, 0, 0, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 4;\n }\n\n #scifi-app-container .scifi-movie-card:hover .scifi-play-overlay,\n #scifi-app-container .scifi-grid-card:hover .scifi-play-overlay { opacity: 1; }\n\n #scifi-app-container .scifi-play-icon {\n width: 45px; height: 45px;\n border: 2px solid white; border-radius: 50%;\n display: flex; justify-content: center; align-items: center;\n background: rgba(0,0,0,0.5);\n }\n\n #scifi-app-container .scifi-play-icon::after {\n content: ''; display: block;\n border-style: solid; border-width: 8px 0 8px 14px;\n border-color: transparent transparent transparent #fff; margin-left: 4px;\n }\n\n \/* Load More Butonu *\/\n #scifi-app-container .scifi-load-more-container {\n text-align: center; margin-top: 40px; padding-bottom: 20px;\n }\n\n #scifi-app-container .scifi-load-more-btn {\n background-color: transparent; color: #fff;\n border: 2px solid #555; padding: 12px 40px;\n font-size: 1.1rem; border-radius: 30px;\n cursor: pointer; transition: all 0.3s ease;\n }\n\n #scifi-app-container .scifi-load-more-btn:hover {\n border-color: #fff; background-color: rgba(255,255,255,0.1);\n }\n\n \/* Modal (Popup) Tasar\u0131m\u0131 *\/\n #scifi-app-container .scifi-modal {\n display: none; position: fixed; z-index: 999999;\n left: 0; top: 0; width: 100%; height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n justify-content: center; align-items: center;\n }\n\n #scifi-app-container .scifi-modal-content {\n position: relative; width: 90%; max-width: 1000px;\n aspect-ratio: 16 \/ 9; background-color: #000;\n border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container #scifi-video-container { width: 100%; height: 100%; }\n\n #scifi-app-container .scifi-close-btn {\n position: absolute; top: 20px; right: 40px;\n color: #fff; font-size: 50px; font-weight: bold;\n cursor: pointer; z-index: 1000000; transition: color 0.3s;\n }\n\n #scifi-app-container .scifi-close-btn:hover { color: #e50914; }\n #scifi-app-container iframe { width: 100%; height: 100%; border: none; border-radius: 8px; }\n<\/style>\n\n<script>\n (function() {\n const API_KEY = 'acf82a9ff23ceffb8be4567f0a4803d1'; \n const BASE_URL = 'https:\/\/api.themoviedb.org\/3';\n const IMG_URL_POSTER = 'https:\/\/image.tmdb.org\/t\/p\/w300'; \n const IMG_URL_BACKDROP = 'https:\/\/image.tmdb.org\/t\/p\/original';\n\n \/\/ G\u00f6sterilen filmlerin haf\u0131zada tutuldu\u011fu havuz (Tekrarlar\u0131 \u00f6nlemek i\u00e7in)\n const globalMovieIds = new Set();\n\n \/\/ Kategoriler ve Sayfa Y\u00fckleme Durumlar\u0131\n const categories = [\n { id: 'trending', title: \"Trending Sci-Fi\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },\n { id: 'top_rated', title: \"Top Rated Sci-Fi\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_average.desc&vote_count.gte=1000`, page: 1, isLoading: false, hasMore: true },\n { id: 'space', title: \"Space & Aliens\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&with_keywords=3386|9882|9951&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },\n { id: 'ai', title: \"A.I. & Robots\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&with_keywords=310|4183|14544&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },\n { id: 'cyberpunk', title: \"Cyberpunk & Dystopia\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&with_keywords=2095|4565&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true }\n ];\n\n let isHeroSet = false;\n let gridCurrentPage = 1;\n let gridIsLoading = false;\n\n const heroElement = document.getElementById('scifi-hero');\n const heroContent = document.getElementById('scifi-hero-content');\n const rowsContainer = document.getElementById('scifi-rows-container');\n const gridElement = document.getElementById('scifi-movie-grid');\n const modal = document.getElementById('scifi-trailer-modal');\n const videoContainer = document.getElementById('scifi-video-container');\n const closeModalBtn = document.getElementById('scifi-close-modal');\n const loadMoreBtn = document.getElementById('scifi-load-more-btn');\n\n async function initApp() {\n \/\/ Kategoriler i\u00e7in DOM elementlerini olu\u015ftur ve ilk verileri \u00e7ek\n categories.forEach(category => buildRowContainer(category));\n \/\/ Alttaki Grid'i ba\u015flat\n await fetchGridMovies(gridCurrentPage);\n }\n\n \/\/ Kategori Sat\u0131r\u0131n\u0131 ve Scroll Olay\u0131n\u0131 Haz\u0131rla\n function buildRowContainer(category) {\n const rowDiv = document.createElement('div');\n rowDiv.classList.add('scifi-row');\n\n const titleObj = document.createElement('h2');\n titleObj.classList.add('scifi-row-title');\n titleObj.innerText = category.title;\n\n const postersDiv = document.createElement('div');\n postersDiv.classList.add('scifi-row-posters');\n\n \/\/ Yatay Sonsuz Kayd\u0131rma Tetikleyicisi\n postersDiv.addEventListener('scroll', () => {\n const { scrollLeft, scrollWidth, clientWidth } = postersDiv;\n if (scrollLeft + clientWidth >= scrollWidth - 400) { \/\/ Sona yakla\u015f\u0131nca tetikle\n fetchCategoryData(category, postersDiv);\n }\n });\n\n rowDiv.appendChild(titleObj);\n rowDiv.appendChild(postersDiv);\n rowsContainer.appendChild(rowDiv);\n\n \/\/ \u0130lk sayfay\u0131 \u00e7ek\n fetchCategoryData(category, postersDiv);\n }\n\n \/\/ Yatay Kategoriler \u0130\u00e7in Veri \u00c7ekme (Tekrars\u0131z)\n async function fetchCategoryData(category, container) {\n if (category.isLoading || !category.hasMore) return;\n category.isLoading = true;\n\n try {\n const response = await fetch(`${BASE_URL}${category.query}&page=${category.page}`);\n const data = await response.json();\n \n if (data.results.length === 0 || category.page >= data.total_pages) {\n category.hasMore = false;\n }\n\n let movies = data.results;\n\n \/\/ Hero Alan\u0131 (Sadece ilk filmi al ve havuzdan d\u00fc\u015f)\n if (!isHeroSet && category.id === 'trending' && movies.length > 0) {\n setHeroSection(movies[0]);\n globalMovieIds.add(movies[0].id);\n movies = movies.slice(1);\n isHeroSet = true;\n }\n\n \/\/ Sadece daha \u00f6nce g\u00f6sterilmeyen filmleri filtrele\n const uniqueMovies = movies.filter(movie => !globalMovieIds.has(movie.id));\n\n uniqueMovies.forEach(movie => {\n globalMovieIds.add(movie.id); \/\/ Havuza ekle\n if (!movie.poster_path) return;\n const card = createMovieCard(movie, 'scifi-movie-card');\n container.appendChild(card);\n });\n\n category.page++;\n } catch (error) {\n console.error(`Error fetching category ${category.title}:`, error);\n } finally {\n category.isLoading = false;\n }\n }\n\n \/\/ T\u00fcm Filmler (Grid) Alan\u0131 \u0130\u00e7in Veri \u00c7ekme (Tekrars\u0131z)\n async function fetchGridMovies(page) {\n if (gridIsLoading) return;\n gridIsLoading = true;\n loadMoreBtn.innerText = 'Loading...';\n loadMoreBtn.disabled = true;\n\n try {\n const response = await fetch(`${BASE_URL}\/discover\/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_count.desc&page=${page}`);\n const data = await response.json();\n \n const uniqueMovies = data.results.filter(movie => !globalMovieIds.has(movie.id));\n\n uniqueMovies.forEach(movie => {\n globalMovieIds.add(movie.id);\n if (!movie.poster_path) return;\n const card = createMovieCard(movie, 'scifi-grid-card');\n gridElement.appendChild(card);\n });\n\n \/\/ E\u011fer gelen 20 filmin hepsi zaten yatay kategorilerde g\u00f6sterilmi\u015fse, otomatik sonraki sayfay\u0131 \u00e7ek\n if (uniqueMovies.length === 0 && data.results.length > 0) {\n gridCurrentPage++;\n gridIsLoading = false;\n return fetchGridMovies(gridCurrentPage);\n }\n\n loadMoreBtn.innerText = 'Load More';\n loadMoreBtn.disabled = false;\n } catch (error) {\n console.error('Error fetching grid movies:', error);\n loadMoreBtn.innerText = 'Error Loading Data';\n } finally {\n gridIsLoading = false;\n }\n }\n\n function createMovieCard(movie, className) {\n const card = document.createElement('div');\n card.classList.add(className);\n \n const rating = movie.vote_average ? movie.vote_average.toFixed(1) : 'N\/A';\n\n card.innerHTML = `\n <div class=\"scifi-card-rating\"><i>\u2b50<\/i> ${rating}<\/div>\n <img decoding=\"async\" src=\"${IMG_URL_POSTER + movie.poster_path}\" alt=\"${movie.title}\" class=\"scifi-movie-poster\" loading=\"lazy\">\n <div class=\"scifi-play-overlay\">\n <div class=\"scifi-play-icon\"><\/div>\n <\/div>\n `;\n card.addEventListener('click', () => fetchTrailer(movie.id));\n return card;\n }\n\n async function fetchTrailer(movieId) {\n try {\n const response = await fetch(`${BASE_URL}\/movie\/${movieId}\/videos?api_key=${API_KEY}&language=en-US`);\n const data = await response.json();\n const trailer = data.results.find(video => video.type === 'Trailer' && video.site === 'YouTube');\n \n if (trailer) {\n openModal(trailer.key);\n } else {\n alert('Trailer not found for this movie.');\n }\n } catch (error) {\n console.error('Error fetching trailer:', error);\n }\n }\n\n function setHeroSection(movie) {\n if (!movie.backdrop_path) return;\n \n const rating = movie.vote_average ? movie.vote_average.toFixed(1) : 'N\/A';\n \n heroElement.style.backgroundImage = `url('${IMG_URL_BACKDROP + movie.backdrop_path}')`;\n heroContent.innerHTML = `\n <div class=\"scifi-hero-rating\">\u2b50 ${rating} <span>\/ 10<\/span><\/div>\n <h1 class=\"scifi-hero-title\">${movie.title}<\/h1>\n <p class=\"scifi-hero-overview\">${movie.overview.substring(0, 180)}...<\/p>\n <button class=\"scifi-hero-play-btn\" id=\"hero-play-btn\">\n <span>\u25b6<\/span> Play Trailer\n <\/button>\n `;\n\n document.getElementById('hero-play-btn').addEventListener('click', () => fetchTrailer(movie.id));\n }\n\n function openModal(videoKey) {\n videoContainer.innerHTML = `<iframe src=\"https:\/\/www.youtube.com\/embed\/${videoKey}?autoplay=1\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe>`;\n modal.style.display = 'flex';\n }\n\n function closeModal() {\n modal.style.display = 'none';\n videoContainer.innerHTML = ''; \n }\n\n closeModalBtn.addEventListener('click', closeModal);\n window.addEventListener('click', (event) => {\n if (event.target === modal) closeModal();\n });\n\n loadMoreBtn.addEventListener('click', () => {\n gridCurrentPage++;\n fetchGridMovies(gridCurrentPage);\n });\n\n initApp();\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sci-Fi Trailers | Metaverse Planet Explore More Sci-Fi Load More ×<\/p>\n","protected":false},"author":1,"featured_media":40259,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAown96uCw:productID":"","footnotes":""},"categories":[323],"tags":[206,330],"class_list":["post-43047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cyberculture","tag-movie-lists","tag-movies"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/43047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/comments?post=43047"}],"version-history":[{"count":10,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/43047\/revisions"}],"predecessor-version":[{"id":43057,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/43047\/revisions\/43057"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media\/40259"}],"wp:attachment":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media?parent=43047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/categories?post=43047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/tags?post=43047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43047,"date":"2026-03-20T06:38:46","date_gmt":"2026-03-20T06:38:46","guid":{"rendered":"https:\/\/metaverseplanet.net\/blog\/?p=43047"},"modified":"2026-03-20T06:38:47","modified_gmt":"2026-03-20T06:38:47","slug":"watch-the-best-sci-fi-movie-trailers","status":"publish","type":"post","link":"https:\/\/metaverseplanet.net\/blog\/watch-the-best-sci-fi-movie-trailers\/","title":{"rendered":"Watch the Best Sci-Fi Movie Trailers"},"content":{"rendered":"\n\n\n\n \n \n Sci-Fi Trailers | Metaverse Planet<\/title>\n<\/head>\n<body>\n\n<div id=\"scifi-app-container\">\n \n <div id=\"scifi-hero\" class=\"scifi-hero\">\n <div class=\"scifi-hero-overlay\"><\/div>\n <div class=\"scifi-hero-content\" id=\"scifi-hero-content\">\n <\/div>\n <\/div>\n\n <div id=\"scifi-rows-container\"><\/div>\n\n <div class=\"scifi-all-movies-section\">\n <h2 class=\"scifi-row-title\" style=\"padding-left: 40px; margin-top: 40px; border-left: 4px solid #e50914;\">Explore More Sci-Fi<\/h2>\n <div id=\"scifi-movie-grid\" class=\"scifi-movie-grid\"><\/div>\n \n <div class=\"scifi-load-more-container\">\n <button id=\"scifi-load-more-btn\" class=\"scifi-load-more-btn\">Load More<\/button>\n <\/div>\n <\/div>\n\n <div id=\"scifi-trailer-modal\" class=\"scifi-modal\">\n <span class=\"scifi-close-btn\" id=\"scifi-close-modal\">×<\/span>\n <div class=\"scifi-modal-content\">\n <div id=\"scifi-video-container\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n \/* \u0130zole Tasar\u0131m Kurallar\u0131 *\/\n #scifi-app-container {\n background-color: #141414;\n color: #ffffff;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n padding-bottom: 50px;\n box-sizing: border-box;\n width: 100%;\n overflow-x: hidden;\n }\n\n \/* Vitrin (Hero Section) *\/\n #scifi-app-container .scifi-hero {\n position: relative;\n width: 100%;\n height: 70vh;\n min-height: 500px;\n background-color: #000;\n background-size: cover;\n background-position: top center;\n margin-bottom: -30px;\n display: flex;\n align-items: flex-end;\n }\n\n #scifi-app-container .scifi-hero-overlay {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: linear-gradient(to top, #141414 0%, rgba(20,20,20,0.5) 40%, rgba(0,0,0,0.1) 100%);\n }\n\n #scifi-app-container .scifi-hero-content {\n position: relative;\n z-index: 2;\n padding: 0 40px 100px 40px;\n max-width: 800px;\n }\n\n \/* Vitrin Puan Rozeti *\/\n #scifi-app-container .scifi-hero-rating {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: rgba(0,0,0,0.6);\n color: #ffd700;\n padding: 5px 12px;\n border-radius: 4px;\n font-size: 1.1rem;\n font-weight: bold;\n margin-bottom: 15px;\n border: 1px solid rgba(255, 215, 0, 0.3);\n }\n\n #scifi-app-container .scifi-hero-rating span { color: #fff; }\n\n #scifi-app-container .scifi-hero-title {\n font-size: 3.5rem;\n margin: 0 0 15px 0;\n font-weight: 800;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container .scifi-hero-overview {\n font-size: 1.1rem;\n line-height: 1.5;\n margin-bottom: 25px;\n color: #fff;\n text-shadow: 1px 1px 3px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container .scifi-hero-play-btn {\n background-color: #fff;\n color: #000;\n border: none;\n padding: 10px 30px;\n font-size: 1.2rem;\n font-weight: bold;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n #scifi-app-container .scifi-hero-play-btn:hover { background-color: rgba(255,255,255,0.7); }\n\n \/* Sat\u0131r Ba\u015fl\u0131klar\u0131 *\/\n #scifi-app-container .scifi-row-title {\n font-size: 1.4rem;\n margin: 0 0 15px 0;\n font-weight: bold;\n color: #e5e5e5;\n padding-left: 10px;\n }\n\n \/* Kategori Sat\u0131rlar\u0131 *\/\n #scifi-app-container .scifi-row {\n position: relative;\n z-index: 3;\n margin-bottom: 40px;\n padding-left: 30px;\n }\n\n #scifi-app-container .scifi-row-posters {\n display: flex;\n gap: 15px;\n overflow-y: hidden;\n overflow-x: auto;\n padding: 10px 0 20px 10px;\n scroll-behavior: smooth;\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n #scifi-app-container .scifi-row-posters::-webkit-scrollbar { display: none; }\n\n \/* Grid Alan\u0131 *\/\n #scifi-app-container .scifi-all-movies-section {\n position: relative;\n z-index: 3;\n }\n\n #scifi-app-container .scifi-movie-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 20px;\n padding: 0 40px;\n }\n\n \/* Film Kartlar\u0131 (Ortak) *\/\n #scifi-app-container .scifi-movie-card,\n #scifi-app-container .scifi-grid-card {\n flex: 0 0 auto;\n width: 200px;\n position: relative;\n border-radius: 5px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.3s ease;\n background: #222;\n aspect-ratio: 2 \/ 3;\n }\n\n #scifi-app-container .scifi-grid-card { width: 100%; }\n\n #scifi-app-container .scifi-movie-card:hover,\n #scifi-app-container .scifi-grid-card:hover {\n transform: scale(1.08);\n z-index: 10;\n box-shadow: 0 5px 15px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container .scifi-movie-poster {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* Afi\u015f \u00dczerindeki Puan Rozeti *\/\n #scifi-app-container .scifi-card-rating {\n position: absolute;\n top: 8px; right: 8px;\n background: rgba(0, 0, 0, 0.75);\n color: #fff;\n padding: 4px 6px;\n border-radius: 4px;\n font-size: 0.85rem;\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 3px;\n z-index: 5;\n backdrop-filter: blur(2px);\n }\n\n #scifi-app-container .scifi-card-rating i {\n color: #ffd700; font-style: normal;\n }\n\n \/* Hover Play \u0130konu *\/\n #scifi-app-container .scifi-play-overlay {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0, 0, 0, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 4;\n }\n\n #scifi-app-container .scifi-movie-card:hover .scifi-play-overlay,\n #scifi-app-container .scifi-grid-card:hover .scifi-play-overlay { opacity: 1; }\n\n #scifi-app-container .scifi-play-icon {\n width: 45px; height: 45px;\n border: 2px solid white; border-radius: 50%;\n display: flex; justify-content: center; align-items: center;\n background: rgba(0,0,0,0.5);\n }\n\n #scifi-app-container .scifi-play-icon::after {\n content: ''; display: block;\n border-style: solid; border-width: 8px 0 8px 14px;\n border-color: transparent transparent transparent #fff; margin-left: 4px;\n }\n\n \/* Load More Butonu *\/\n #scifi-app-container .scifi-load-more-container {\n text-align: center; margin-top: 40px; padding-bottom: 20px;\n }\n\n #scifi-app-container .scifi-load-more-btn {\n background-color: transparent; color: #fff;\n border: 2px solid #555; padding: 12px 40px;\n font-size: 1.1rem; border-radius: 30px;\n cursor: pointer; transition: all 0.3s ease;\n }\n\n #scifi-app-container .scifi-load-more-btn:hover {\n border-color: #fff; background-color: rgba(255,255,255,0.1);\n }\n\n \/* Modal (Popup) Tasar\u0131m\u0131 *\/\n #scifi-app-container .scifi-modal {\n display: none; position: fixed; z-index: 999999;\n left: 0; top: 0; width: 100%; height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n justify-content: center; align-items: center;\n }\n\n #scifi-app-container .scifi-modal-content {\n position: relative; width: 90%; max-width: 1000px;\n aspect-ratio: 16 \/ 9; background-color: #000;\n border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.8);\n }\n\n #scifi-app-container #scifi-video-container { width: 100%; height: 100%; }\n\n #scifi-app-container .scifi-close-btn {\n position: absolute; top: 20px; right: 40px;\n color: #fff; font-size: 50px; font-weight: bold;\n cursor: pointer; z-index: 1000000; transition: color 0.3s;\n }\n\n #scifi-app-container .scifi-close-btn:hover { color: #e50914; }\n #scifi-app-container iframe { width: 100%; height: 100%; border: none; border-radius: 8px; }\n<\/style>\n\n<script>\n (function() {\n const API_KEY = 'acf82a9ff23ceffb8be4567f0a4803d1'; \n const BASE_URL = 'https:\/\/api.themoviedb.org\/3';\n const IMG_URL_POSTER = 'https:\/\/image.tmdb.org\/t\/p\/w300'; \n const IMG_URL_BACKDROP = 'https:\/\/image.tmdb.org\/t\/p\/original';\n\n \/\/ G\u00f6sterilen filmlerin haf\u0131zada tutuldu\u011fu havuz (Tekrarlar\u0131 \u00f6nlemek i\u00e7in)\n const globalMovieIds = new Set();\n\n \/\/ Kategoriler ve Sayfa Y\u00fckleme Durumlar\u0131\n const categories = [\n { id: 'trending', title: \"Trending Sci-Fi\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },\n { id: 'top_rated', title: \"Top Rated Sci-Fi\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_average.desc&vote_count.gte=1000`, page: 1, isLoading: false, hasMore: true },\n { id: 'space', title: \"Space & Aliens\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&with_keywords=3386|9882|9951&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },\n { id: 'ai', title: \"A.I. & Robots\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&with_keywords=310|4183|14544&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },\n { id: 'cyberpunk', title: \"Cyberpunk & Dystopia\", query: `\/discover\/movie?api_key=${API_KEY}&with_genres=878&with_keywords=2095|4565&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true }\n ];\n\n let isHeroSet = false;\n let gridCurrentPage = 1;\n let gridIsLoading = false;\n\n const heroElement = document.getElementById('scifi-hero');\n const heroContent = document.getElementById('scifi-hero-content');\n const rowsContainer = document.getElementById('scifi-rows-container');\n const gridElement = document.getElementById('scifi-movie-grid');\n const modal = document.getElementById('scifi-trailer-modal');\n const videoContainer = document.getElementById('scifi-video-container');\n const closeModalBtn = document.getElementById('scifi-close-modal');\n const loadMoreBtn = document.getElementById('scifi-load-more-btn');\n\n async function initApp() {\n \/\/ Kategoriler i\u00e7in DOM elementlerini olu\u015ftur ve ilk verileri \u00e7ek\n categories.forEach(category => buildRowContainer(category));\n \/\/ Alttaki Grid'i ba\u015flat\n await fetchGridMovies(gridCurrentPage);\n }\n\n \/\/ Kategori Sat\u0131r\u0131n\u0131 ve Scroll Olay\u0131n\u0131 Haz\u0131rla\n function buildRowContainer(category) {\n const rowDiv = document.createElement('div');\n rowDiv.classList.add('scifi-row');\n\n const titleObj = document.createElement('h2');\n titleObj.classList.add('scifi-row-title');\n titleObj.innerText = category.title;\n\n const postersDiv = document.createElement('div');\n postersDiv.classList.add('scifi-row-posters');\n\n \/\/ Yatay Sonsuz Kayd\u0131rma Tetikleyicisi\n postersDiv.addEventListener('scroll', () => {\n const { scrollLeft, scrollWidth, clientWidth } = postersDiv;\n if (scrollLeft + clientWidth >= scrollWidth - 400) { \/\/ Sona yakla\u015f\u0131nca tetikle\n fetchCategoryData(category, postersDiv);\n }\n });\n\n rowDiv.appendChild(titleObj);\n rowDiv.appendChild(postersDiv);\n rowsContainer.appendChild(rowDiv);\n\n \/\/ \u0130lk sayfay\u0131 \u00e7ek\n fetchCategoryData(category, postersDiv);\n }\n\n \/\/ Yatay Kategoriler \u0130\u00e7in Veri \u00c7ekme (Tekrars\u0131z)\n async function fetchCategoryData(category, container) {\n if (category.isLoading || !category.hasMore) return;\n category.isLoading = true;\n\n try {\n const response = await fetch(`${BASE_URL}${category.query}&page=${category.page}`);\n const data = await response.json();\n \n if (data.results.length === 0 || category.page >= data.total_pages) {\n category.hasMore = false;\n }\n\n let movies = data.results;\n\n \/\/ Hero Alan\u0131 (Sadece ilk filmi al ve havuzdan d\u00fc\u015f)\n if (!isHeroSet && category.id === 'trending' && movies.length > 0) {\n setHeroSection(movies[0]);\n globalMovieIds.add(movies[0].id);\n movies = movies.slice(1);\n isHeroSet = true;\n }\n\n \/\/ Sadece daha \u00f6nce g\u00f6sterilmeyen filmleri filtrele\n const uniqueMovies = movies.filter(movie => !globalMovieIds.has(movie.id));\n\n uniqueMovies.forEach(movie => {\n globalMovieIds.add(movie.id); \/\/ Havuza ekle\n if (!movie.poster_path) return;\n const card = createMovieCard(movie, 'scifi-movie-card');\n container.appendChild(card);\n });\n\n category.page++;\n } catch (error) {\n console.error(`Error fetching category ${category.title}:`, error);\n } finally {\n category.isLoading = false;\n }\n }\n\n \/\/ T\u00fcm Filmler (Grid) Alan\u0131 \u0130\u00e7in Veri \u00c7ekme (Tekrars\u0131z)\n async function fetchGridMovies(page) {\n if (gridIsLoading) return;\n gridIsLoading = true;\n loadMoreBtn.innerText = 'Loading...';\n loadMoreBtn.disabled = true;\n\n try {\n const response = await fetch(`${BASE_URL}\/discover\/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_count.desc&page=${page}`);\n const data = await response.json();\n \n const uniqueMovies = data.results.filter(movie => !globalMovieIds.has(movie.id));\n\n uniqueMovies.forEach(movie => {\n globalMovieIds.add(movie.id);\n if (!movie.poster_path) return;\n const card = createMovieCard(movie, 'scifi-grid-card');\n gridElement.appendChild(card);\n });\n\n \/\/ E\u011fer gelen 20 filmin hepsi zaten yatay kategorilerde g\u00f6sterilmi\u015fse, otomatik sonraki sayfay\u0131 \u00e7ek\n if (uniqueMovies.length === 0 && data.results.length > 0) {\n gridCurrentPage++;\n gridIsLoading = false;\n return fetchGridMovies(gridCurrentPage);\n }\n\n loadMoreBtn.innerText = 'Load More';\n loadMoreBtn.disabled = false;\n } catch (error) {\n console.error('Error fetching grid movies:', error);\n loadMoreBtn.innerText = 'Error Loading Data';\n } finally {\n gridIsLoading = false;\n }\n }\n\n function createMovieCard(movie, className) {\n const card = document.createElement('div');\n card.classList.add(className);\n \n const rating = movie.vote_average ? movie.vote_average.toFixed(1) : 'N\/A';\n\n card.innerHTML = `\n <div class=\"scifi-card-rating\"><i>\u2b50<\/i> ${rating}<\/div>\n <img decoding=\"async\" src=\"${IMG_URL_POSTER + movie.poster_path}\" alt=\"${movie.title}\" class=\"scifi-movie-poster\" loading=\"lazy\">\n <div class=\"scifi-play-overlay\">\n <div class=\"scifi-play-icon\"><\/div>\n <\/div>\n `;\n card.addEventListener('click', () => fetchTrailer(movie.id));\n return card;\n }\n\n async function fetchTrailer(movieId) {\n try {\n const response = await fetch(`${BASE_URL}\/movie\/${movieId}\/videos?api_key=${API_KEY}&language=en-US`);\n const data = await response.json();\n const trailer = data.results.find(video => video.type === 'Trailer' && video.site === 'YouTube');\n \n if (trailer) {\n openModal(trailer.key);\n } else {\n alert('Trailer not found for this movie.');\n }\n } catch (error) {\n console.error('Error fetching trailer:', error);\n }\n }\n\n function setHeroSection(movie) {\n if (!movie.backdrop_path) return;\n \n const rating = movie.vote_average ? movie.vote_average.toFixed(1) : 'N\/A';\n \n heroElement.style.backgroundImage = `url('${IMG_URL_BACKDROP + movie.backdrop_path}')`;\n heroContent.innerHTML = `\n <div class=\"scifi-hero-rating\">\u2b50 ${rating} <span>\/ 10<\/span><\/div>\n <h1 class=\"scifi-hero-title\">${movie.title}<\/h1>\n <p class=\"scifi-hero-overview\">${movie.overview.substring(0, 180)}...<\/p>\n <button class=\"scifi-hero-play-btn\" id=\"hero-play-btn\">\n <span>\u25b6<\/span> Play Trailer\n <\/button>\n `;\n\n document.getElementById('hero-play-btn').addEventListener('click', () => fetchTrailer(movie.id));\n }\n\n function openModal(videoKey) {\n videoContainer.innerHTML = `<iframe src=\"https:\/\/www.youtube.com\/embed\/${videoKey}?autoplay=1\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe>`;\n modal.style.display = 'flex';\n }\n\n function closeModal() {\n modal.style.display = 'none';\n videoContainer.innerHTML = ''; \n }\n\n closeModalBtn.addEventListener('click', closeModal);\n window.addEventListener('click', (event) => {\n if (event.target === modal) closeModal();\n });\n\n loadMoreBtn.addEventListener('click', () => {\n gridCurrentPage++;\n fetchGridMovies(gridCurrentPage);\n });\n\n initApp();\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sci-Fi Trailers | Metaverse Planet Explore More Sci-Fi Load More ×<\/p>\n","protected":false},"author":1,"featured_media":40259,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAown96uCw:productID":"","footnotes":""},"categories":[323],"tags":[206,330],"class_list":["post-43047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cyberculture","tag-movie-lists","tag-movies"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/43047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/comments?post=43047"}],"version-history":[{"count":10,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/43047\/revisions"}],"predecessor-version":[{"id":43057,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/43047\/revisions\/43057"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media\/40259"}],"wp:attachment":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media?parent=43047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/categories?post=43047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/tags?post=43047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}