Sci-Fi Wars Component<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* Scoped CSS: Sadece bu bile\u015feni etkiler *\/\n #scifi-wrapper {\n --sf-primary: #e50914; \n --sf-secondary: #007bff;\n --sf-dark-bg: #0a0a0a;\n --sf-card-bg: #141414;\n \n font-family: 'Montserrat', sans-serif;\n background-color: var(--sf-dark-bg);\n color: #fff;\n position: relative;\n width: 100%;\n padding: 50px 0;\n box-sizing: border-box;\n overflow: hidden;\n background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);\n }\n\n #scifi-wrapper * { box-sizing: border-box; }\n\n \/* HEADER *\/\n #scifi-wrapper .sf-header { text-align: center; margin-bottom: 40px; }\n \n #scifi-wrapper .sf-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 3.5rem;\n background: linear-gradient(to right, var(--sf-secondary), #fff, var(--sf-primary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n letter-spacing: 4px;\n display: inline-block;\n filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));\n }\n\n #scifi-wrapper .sf-subtitle { \n color: #aaa; \n font-size: 0.9rem; \n letter-spacing: 1.5px; \n margin-top: 5px;\n font-weight: 300;\n }\n #scifi-wrapper .sf-subtitle strong { color: #fff; font-weight: 700; }\n\n \/* ARENA *\/\n #scifi-wrapper .arena-container {\n display: flex;\n justify-content: center;\n align-items: stretch;\n width: 95%;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n gap: 20px;\n }\n\n \/* CARDS *\/\n #scifi-wrapper .fighter-side {\n flex: 1;\n background: var(--sf-card-bg);\n border-radius: 12px;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 600px; \/* \u0130\u00e7erik artt\u0131\u011f\u0131 i\u00e7in biraz uzatt\u0131m *\/\n position: relative;\n transition: all 0.5s ease;\n border: 1px solid #333;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n overflow: hidden;\n }\n\n #scifi-wrapper .fighter-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n \/* PLACEHOLDER *\/\n #scifi-wrapper .placeholder-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n padding: 40px;\n color: rgba(255,255,255,0.3);\n text-align: center;\n }\n\n #scifi-wrapper .placeholder-icon {\n font-size: 4rem;\n margin-bottom: 20px;\n border: 3px dashed rgba(255,255,255,0.2);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* VS BUTTON *\/\n #scifi-wrapper .vs-container {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 50;\n }\n\n #scifi-wrapper .vs-btn {\n width: 100px;\n height: 100px;\n background: #000;\n color: #fff;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 3.5rem;\n cursor: pointer;\n border: 4px solid #fff;\n animation: sf-pulse 2s infinite;\n transition: all 0.3s ease;\n outline: none;\n }\n\n #scifi-wrapper .vs-btn:hover {\n transform: scale(1.1);\n background: #fff;\n color: #000;\n box-shadow: 0 0 30px rgba(255,255,255,0.6);\n animation: none;\n }\n\n @keyframes sf-pulse {\n 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }\n 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }\n }\n\n \/* MOVIE INFO STYLES *\/\n #scifi-wrapper .poster-container {\n width: 100%;\n aspect-ratio: 2 \/ 3; \n overflow: hidden;\n position: relative;\n border-bottom: 1px solid #333;\n }\n\n #scifi-wrapper .poster-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n #scifi-wrapper .movie-details {\n padding: 20px;\n text-align: center;\n width: 100%;\n background: linear-gradient(to top, rgba(0,0,0,1), rgba(20,20,20,0));\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n #scifi-wrapper .movie-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem;\n margin: 5px 0;\n line-height: 1;\n color: #fff;\n }\n\n #scifi-wrapper .movie-meta {\n color: #aaa;\n font-size: 0.8rem;\n margin-bottom: 10px;\n font-weight: bold;\n }\n\n \/* Yeni Eklenen A\u00e7\u0131klama ve Cast Stilleri *\/\n #scifi-wrapper .movie-overview {\n font-size: 0.85rem;\n color: #ddd;\n line-height: 1.4;\n margin: 10px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3; \/* 3 sat\u0131rda kes *\/\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n #scifi-wrapper .movie-cast-info {\n font-size: 0.75rem;\n color: #888;\n margin-bottom: 15px;\n text-align: center;\n line-height: 1.4;\n }\n #scifi-wrapper .movie-cast-info strong { color: #fff; }\n\n #scifi-wrapper .score-display {\n font-size: 3.5rem;\n font-family: 'Bebas Neue', sans-serif;\n font-weight: bold;\n margin: 5px 0 15px 0;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n text-shadow: 0 0 20px currentColor;\n }\n\n #scifi-wrapper .trailer-btn {\n background: transparent;\n border: 1px solid rgba(255,255,255,0.4);\n color: #fff;\n padding: 8px 25px;\n font-size: 0.75rem;\n cursor: pointer;\n font-family: 'Montserrat', sans-serif;\n text-transform: uppercase;\n margin-top: auto;\n transition: 0.3s;\n letter-spacing: 1px;\n }\n #scifi-wrapper .trailer-btn:hover { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,0.5); }\n\n \/* WINNER \/ LOSER Logic *\/\n #scifi-wrapper .winner-active {\n border: 2px solid #ffd700;\n box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);\n z-index: 10;\n }\n #scifi-wrapper .winner-active .score-display { color: #ffd700; opacity: 1; transform: scale(1); }\n\n #scifi-wrapper .loser-active {\n filter: grayscale(100%) opacity(0.5);\n transform: scale(0.98);\n }\n #scifi-wrapper .loser-active .score-display { opacity: 1; transform: scale(1); }\n\n #scifi-wrapper .winner-badge {\n position: absolute;\n top: 20px;\n right: 20px;\n background: #ffd700;\n color: #000;\n padding: 5px 15px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 1.5rem;\n transform: rotate(10deg);\n box-shadow: 0 5px 15px rgba(0,0,0,0.5);\n z-index: 20;\n animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n @keyframes popIn { from { transform: scale(0) rotate(0deg); } to { transform: scale(1) rotate(10deg); } }\n\n \/* MODAL *\/\n #scifi-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }\n #scifi-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 900px; aspect-ratio: 16\/9; background: #000; box-shadow: 0 0 50px rgba(255,255,255,0.1); }\n #scifi-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; }\n\n @media (max-width: 768px) {\n #scifi-wrapper .arena-container { flex-direction: column; gap: 40px; }\n #scifi-wrapper .vs-container { position: relative; top: auto; left: auto; transform: none; margin: -20px auto; }\n #scifi-wrapper .fighter-side { width: 100%; min-height: auto; }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"scifi-wrapper\">\n <div class=\"sf-header\">\n <div class=\"sf-logo\">SCI-FI WARS<\/div>\n <div class=\"sf-subtitle\">Press <strong>VS<\/strong> to initiate the Ultimate Sci-Fi Battle<\/div>\n <\/div>\n\n <div class=\"arena-container\">\n \n <div class=\"fighter-side\" id=\"sf-left\" style=\"border-top: 4px solid var(--sf-secondary);\">\n <div class=\"fighter-content\" id=\"content-left\">\n <div class=\"placeholder-state\">\n <div class=\"placeholder-icon\">?<\/div>\n <h3>FIGHTER 1<\/h3>\n <p>Waiting for data…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"vs-container\">\n <button class=\"vs-btn\" id=\"sf-vs-btn\" onclick=\"startSciFiWar()\">VS<\/button>\n <\/div>\n\n <div class=\"fighter-side\" id=\"sf-right\" style=\"border-top: 4px solid var(--sf-primary);\">\n <div class=\"fighter-content\" id=\"content-right\">\n <div class=\"placeholder-state\">\n <div class=\"placeholder-icon\">?<\/div>\n <h3>FIGHTER 2<\/h3>\n <p>Waiting for data…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <div id=\"scifi-modal\">\n <span id=\"scifi-close\" onclick=\"closeSfTrailer()\">×<\/span>\n <div id=\"scifi-modal-content\"><\/div>\n <\/div>\n\n <script>\n const sfApiKey = '25ec2c68c8aa9357786e0be45ac80de3'; \n let sfIsBattling = false;\n\n async function startSciFiWar() {\n if (sfIsBattling) return; \n sfIsBattling = true;\n\n const btn = document.getElementById('sf-vs-btn');\n const leftSide = document.getElementById('sf-left');\n const rightSide = document.getElementById('sf-right');\n const leftContent = document.getElementById('content-left');\n const rightContent = document.getElementById('content-right');\n\n \/\/ RESETLEME\n btn.style.transform = \"scale(0.8) rotate(360deg)\";\n btn.disabled = true;\n btn.style.opacity = \"0.7\";\n\n leftSide.classList.remove('winner-active', 'loser-active');\n rightSide.classList.remove('winner-active', 'loser-active');\n document.querySelectorAll('.winner-badge').forEach(el => el.remove());\n\n leftContent.innerHTML = getLoadingHTML(\"Scanning Sector 1...\");\n rightContent.innerHTML = getLoadingHTML(\"Scanning Sector 2...\");\n\n try {\n setTimeout(async () => {\n let m1, m2;\n do {\n m1 = await getSfMovie();\n m2 = await getSfMovie();\n } while (m1.id === m2.id);\n\n renderSfFighter(m1, 'left', leftContent);\n renderSfFighter(m2, 'right', rightContent);\n\n btn.innerText = \"VS\";\n btn.style.transform = \"scale(1)\";\n btn.style.opacity = \"1\";\n\n setTimeout(() => {\n decideSfWinner(m1, m2);\n sfIsBattling = false;\n btn.disabled = false;\n btn.innerText = \"AGAIN\"; \n btn.style.fontSize = \"1.5rem\";\n }, 800);\n }, 500);\n\n } catch (err) {\n console.error(err);\n leftContent.innerHTML = `<div style=\"padding:20px;\">Error<\/div>`;\n rightContent.innerHTML = `<div style=\"padding:20px;\">Error<\/div>`;\n sfIsBattling = false;\n btn.disabled = false;\n }\n }\n\n function getLoadingHTML(text) {\n return `\n <div class=\"placeholder-state\">\n <div class=\"placeholder-icon\" style=\"border-style:solid; border-top-color:transparent; animation:spin 1s infinite linear;\"><\/div>\n <p>${text}<\/p>\n <\/div>\n <style>@keyframes spin { 100% { transform:rotate(360deg); } }<\/style>\n `;\n }\n\n async function getSfMovie() {\n const page = Math.floor(Math.random() * 40) + 1;\n const url = `https:\/\/api.themoviedb.org\/3\/discover\/movie?api_key=${sfApiKey}&with_genres=878&vote_average.gte=6.5&vote_count.gte=500&include_adult=false&page=${page}`;\n const res = await fetch(url);\n const data = await res.json();\n \n if (!data.results || data.results.length === 0) return getSfMovie();\n\n const movie = data.results[Math.floor(Math.random() * data.results.length)];\n \/\/ cast ve videos i\u00e7in detay \u00e7ekiyoruz\n const detail = await fetch(`https:\/\/api.themoviedb.org\/3\/movie\/${movie.id}?api_key=${sfApiKey}&append_to_response=videos,credits`).then(r=>r.json());\n return detail;\n }\n\n function renderSfFighter(movie, side, container) {\n const year = movie.release_date ? movie.release_date.split('-')[0] : '';\n const director = movie.credits.crew.find(c => c.job === 'Director')?.name || 'Unknown';\n const trailer = movie.videos.results.find(v => v.site === 'YouTube' && v.type === 'Trailer');\n \n \/\/ G\u00dcNCELLEME 2: Oyuncu listesini al (ilk 3 ki\u015fi)\n const cast = movie.credits.cast.slice(0, 3).map(c => c.name).join(', ');\n\n const trailerHtml = trailer \n ? `<button class=\"trailer-btn\" onclick=\"openSfTrailer('${trailer.key}')\">Watch Trailer<\/button>`\n : `<button class=\"trailer-btn\" style=\"opacity:0.3; pointer-events:none;\">No Trailer<\/button>`;\n\n const posterSrc = movie.poster_path \n ? `https:\/\/image.tmdb.org\/t\/p\/w780${movie.poster_path}` \n : 'https:\/\/via.placeholder.com\/500x750?text=No+Image';\n\n \/\/ G\u00dcNCELLEME 3: Yeni HTML Yap\u0131s\u0131 (\u00d6zet ve Cast ile)\n container.innerHTML = `\n <div class=\"poster-container\">\n <img decoding=\"async\" src=\"${posterSrc}\" alt=\"${movie.title}\">\n <\/div>\n <div class=\"movie-details\">\n <h2 class=\"movie-title\">${movie.title}<\/h2>\n <div class=\"movie-meta\">${year} \u2022 ${movie.runtime}m<\/div>\n \n <div class=\"score-display\" id=\"sf-score-${side}\">\n ${movie.vote_average.toFixed(1)}\n <\/div>\n \n <p class=\"movie-overview\">${movie.overview}<\/p>\n\n <div class=\"movie-cast-info\">\n <strong>Director:<\/strong> ${director}<br>\n <strong>Stars:<\/strong> ${cast}\n <\/div>\n\n ${trailerHtml}\n <\/div>\n `;\n }\n\n function decideSfWinner(m1, m2) {\n const leftSide = document.getElementById('sf-left');\n const rightSide = document.getElementById('sf-right');\n\n document.getElementById('sf-score-left').style.opacity = '1';\n document.getElementById('sf-score-left').style.transform = 'scale(1)';\n document.getElementById('sf-score-right').style.opacity = '1';\n document.getElementById('sf-score-right').style.transform = 'scale(1)';\n\n if (m1.vote_average > m2.vote_average) {\n leftSide.classList.add('winner-active');\n rightSide.classList.add('loser-active');\n addSfBadge(leftSide);\n } else if (m2.vote_average > m1.vote_average) {\n rightSide.classList.add('winner-active');\n leftSide.classList.add('loser-active');\n addSfBadge(rightSide);\n }\n }\n\n function addSfBadge(element) {\n const badge = document.createElement('div');\n badge.className = 'winner-badge';\n badge.innerText = 'WINNER';\n element.appendChild(badge);\n }\n\n function openSfTrailer(key) {\n const modal = document.getElementById('scifi-modal');\n const content = document.getElementById('scifi-modal-content');\n content.innerHTML = `<iframe width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/${key}?autoplay=1\" frameborder=\"0\" allowfullscreen><\/iframe>`;\n modal.style.display = 'block';\n }\n function closeSfTrailer() {\n const modal = document.getElementById('scifi-modal');\n document.getElementById('scifi-modal-content').innerHTML = '';\n modal.style.display = 'none';\n }\n document.getElementById('scifi-modal').onclick = function(e) {\n if(e.target === this) closeSfTrailer();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sci-Fi Wars Component SCI-FI WARS Press VS to initiate the Ultimate Sci-Fi Battle ? FIGHTER 1 Waiting for data… VS ? FIGHTER 2 Waiting for data… ×<\/p>\n","protected":false},"author":1,"featured_media":36248,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAown96uCw:productID":"","footnotes":""},"categories":[323],"tags":[206,330,307],"class_list":["post-36240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cyberculture","tag-movie-lists","tag-movies","tag-tools"],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/36240","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=36240"}],"version-history":[{"count":0,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/36240\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media\/36248"}],"wp:attachment":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media?parent=36240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/categories?post=36240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/tags?post=36240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":36240,"date":"2025-12-11T13:52:29","date_gmt":"2025-12-11T13:52:29","guid":{"rendered":"https:\/\/metaverseplanet.net\/blog\/?p=36240"},"modified":"2025-12-31T07:15:15","modified_gmt":"2025-12-31T07:15:15","slug":"random-sci-fi-movie-battle-generato","status":"publish","type":"post","link":"https:\/\/metaverseplanet.net\/blog\/random-sci-fi-movie-battle-generato\/","title":{"rendered":"Sci-Fi Wars | Random Sci-Fi Movie Battle & Generator"},"content":{"rendered":"\n\n\n\n \n \n Sci-Fi Wars Component<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* Scoped CSS: Sadece bu bile\u015feni etkiler *\/\n #scifi-wrapper {\n --sf-primary: #e50914; \n --sf-secondary: #007bff;\n --sf-dark-bg: #0a0a0a;\n --sf-card-bg: #141414;\n \n font-family: 'Montserrat', sans-serif;\n background-color: var(--sf-dark-bg);\n color: #fff;\n position: relative;\n width: 100%;\n padding: 50px 0;\n box-sizing: border-box;\n overflow: hidden;\n background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);\n }\n\n #scifi-wrapper * { box-sizing: border-box; }\n\n \/* HEADER *\/\n #scifi-wrapper .sf-header { text-align: center; margin-bottom: 40px; }\n \n #scifi-wrapper .sf-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 3.5rem;\n background: linear-gradient(to right, var(--sf-secondary), #fff, var(--sf-primary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n letter-spacing: 4px;\n display: inline-block;\n filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));\n }\n\n #scifi-wrapper .sf-subtitle { \n color: #aaa; \n font-size: 0.9rem; \n letter-spacing: 1.5px; \n margin-top: 5px;\n font-weight: 300;\n }\n #scifi-wrapper .sf-subtitle strong { color: #fff; font-weight: 700; }\n\n \/* ARENA *\/\n #scifi-wrapper .arena-container {\n display: flex;\n justify-content: center;\n align-items: stretch;\n width: 95%;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n gap: 20px;\n }\n\n \/* CARDS *\/\n #scifi-wrapper .fighter-side {\n flex: 1;\n background: var(--sf-card-bg);\n border-radius: 12px;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 600px; \/* \u0130\u00e7erik artt\u0131\u011f\u0131 i\u00e7in biraz uzatt\u0131m *\/\n position: relative;\n transition: all 0.5s ease;\n border: 1px solid #333;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n overflow: hidden;\n }\n\n #scifi-wrapper .fighter-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n \/* PLACEHOLDER *\/\n #scifi-wrapper .placeholder-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n padding: 40px;\n color: rgba(255,255,255,0.3);\n text-align: center;\n }\n\n #scifi-wrapper .placeholder-icon {\n font-size: 4rem;\n margin-bottom: 20px;\n border: 3px dashed rgba(255,255,255,0.2);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* VS BUTTON *\/\n #scifi-wrapper .vs-container {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 50;\n }\n\n #scifi-wrapper .vs-btn {\n width: 100px;\n height: 100px;\n background: #000;\n color: #fff;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 3.5rem;\n cursor: pointer;\n border: 4px solid #fff;\n animation: sf-pulse 2s infinite;\n transition: all 0.3s ease;\n outline: none;\n }\n\n #scifi-wrapper .vs-btn:hover {\n transform: scale(1.1);\n background: #fff;\n color: #000;\n box-shadow: 0 0 30px rgba(255,255,255,0.6);\n animation: none;\n }\n\n @keyframes sf-pulse {\n 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }\n 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }\n }\n\n \/* MOVIE INFO STYLES *\/\n #scifi-wrapper .poster-container {\n width: 100%;\n aspect-ratio: 2 \/ 3; \n overflow: hidden;\n position: relative;\n border-bottom: 1px solid #333;\n }\n\n #scifi-wrapper .poster-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n #scifi-wrapper .movie-details {\n padding: 20px;\n text-align: center;\n width: 100%;\n background: linear-gradient(to top, rgba(0,0,0,1), rgba(20,20,20,0));\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n #scifi-wrapper .movie-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem;\n margin: 5px 0;\n line-height: 1;\n color: #fff;\n }\n\n #scifi-wrapper .movie-meta {\n color: #aaa;\n font-size: 0.8rem;\n margin-bottom: 10px;\n font-weight: bold;\n }\n\n \/* Yeni Eklenen A\u00e7\u0131klama ve Cast Stilleri *\/\n #scifi-wrapper .movie-overview {\n font-size: 0.85rem;\n color: #ddd;\n line-height: 1.4;\n margin: 10px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3; \/* 3 sat\u0131rda kes *\/\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n #scifi-wrapper .movie-cast-info {\n font-size: 0.75rem;\n color: #888;\n margin-bottom: 15px;\n text-align: center;\n line-height: 1.4;\n }\n #scifi-wrapper .movie-cast-info strong { color: #fff; }\n\n #scifi-wrapper .score-display {\n font-size: 3.5rem;\n font-family: 'Bebas Neue', sans-serif;\n font-weight: bold;\n margin: 5px 0 15px 0;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n text-shadow: 0 0 20px currentColor;\n }\n\n #scifi-wrapper .trailer-btn {\n background: transparent;\n border: 1px solid rgba(255,255,255,0.4);\n color: #fff;\n padding: 8px 25px;\n font-size: 0.75rem;\n cursor: pointer;\n font-family: 'Montserrat', sans-serif;\n text-transform: uppercase;\n margin-top: auto;\n transition: 0.3s;\n letter-spacing: 1px;\n }\n #scifi-wrapper .trailer-btn:hover { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,0.5); }\n\n \/* WINNER \/ LOSER Logic *\/\n #scifi-wrapper .winner-active {\n border: 2px solid #ffd700;\n box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);\n z-index: 10;\n }\n #scifi-wrapper .winner-active .score-display { color: #ffd700; opacity: 1; transform: scale(1); }\n\n #scifi-wrapper .loser-active {\n filter: grayscale(100%) opacity(0.5);\n transform: scale(0.98);\n }\n #scifi-wrapper .loser-active .score-display { opacity: 1; transform: scale(1); }\n\n #scifi-wrapper .winner-badge {\n position: absolute;\n top: 20px;\n right: 20px;\n background: #ffd700;\n color: #000;\n padding: 5px 15px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 1.5rem;\n transform: rotate(10deg);\n box-shadow: 0 5px 15px rgba(0,0,0,0.5);\n z-index: 20;\n animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n @keyframes popIn { from { transform: scale(0) rotate(0deg); } to { transform: scale(1) rotate(10deg); } }\n\n \/* MODAL *\/\n #scifi-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }\n #scifi-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 900px; aspect-ratio: 16\/9; background: #000; box-shadow: 0 0 50px rgba(255,255,255,0.1); }\n #scifi-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; }\n\n @media (max-width: 768px) {\n #scifi-wrapper .arena-container { flex-direction: column; gap: 40px; }\n #scifi-wrapper .vs-container { position: relative; top: auto; left: auto; transform: none; margin: -20px auto; }\n #scifi-wrapper .fighter-side { width: 100%; min-height: auto; }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"scifi-wrapper\">\n <div class=\"sf-header\">\n <div class=\"sf-logo\">SCI-FI WARS<\/div>\n <div class=\"sf-subtitle\">Press <strong>VS<\/strong> to initiate the Ultimate Sci-Fi Battle<\/div>\n <\/div>\n\n <div class=\"arena-container\">\n \n <div class=\"fighter-side\" id=\"sf-left\" style=\"border-top: 4px solid var(--sf-secondary);\">\n <div class=\"fighter-content\" id=\"content-left\">\n <div class=\"placeholder-state\">\n <div class=\"placeholder-icon\">?<\/div>\n <h3>FIGHTER 1<\/h3>\n <p>Waiting for data…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"vs-container\">\n <button class=\"vs-btn\" id=\"sf-vs-btn\" onclick=\"startSciFiWar()\">VS<\/button>\n <\/div>\n\n <div class=\"fighter-side\" id=\"sf-right\" style=\"border-top: 4px solid var(--sf-primary);\">\n <div class=\"fighter-content\" id=\"content-right\">\n <div class=\"placeholder-state\">\n <div class=\"placeholder-icon\">?<\/div>\n <h3>FIGHTER 2<\/h3>\n <p>Waiting for data…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <div id=\"scifi-modal\">\n <span id=\"scifi-close\" onclick=\"closeSfTrailer()\">×<\/span>\n <div id=\"scifi-modal-content\"><\/div>\n <\/div>\n\n <script>\n const sfApiKey = '25ec2c68c8aa9357786e0be45ac80de3'; \n let sfIsBattling = false;\n\n async function startSciFiWar() {\n if (sfIsBattling) return; \n sfIsBattling = true;\n\n const btn = document.getElementById('sf-vs-btn');\n const leftSide = document.getElementById('sf-left');\n const rightSide = document.getElementById('sf-right');\n const leftContent = document.getElementById('content-left');\n const rightContent = document.getElementById('content-right');\n\n \/\/ RESETLEME\n btn.style.transform = \"scale(0.8) rotate(360deg)\";\n btn.disabled = true;\n btn.style.opacity = \"0.7\";\n\n leftSide.classList.remove('winner-active', 'loser-active');\n rightSide.classList.remove('winner-active', 'loser-active');\n document.querySelectorAll('.winner-badge').forEach(el => el.remove());\n\n leftContent.innerHTML = getLoadingHTML(\"Scanning Sector 1...\");\n rightContent.innerHTML = getLoadingHTML(\"Scanning Sector 2...\");\n\n try {\n setTimeout(async () => {\n let m1, m2;\n do {\n m1 = await getSfMovie();\n m2 = await getSfMovie();\n } while (m1.id === m2.id);\n\n renderSfFighter(m1, 'left', leftContent);\n renderSfFighter(m2, 'right', rightContent);\n\n btn.innerText = \"VS\";\n btn.style.transform = \"scale(1)\";\n btn.style.opacity = \"1\";\n\n setTimeout(() => {\n decideSfWinner(m1, m2);\n sfIsBattling = false;\n btn.disabled = false;\n btn.innerText = \"AGAIN\"; \n btn.style.fontSize = \"1.5rem\";\n }, 800);\n }, 500);\n\n } catch (err) {\n console.error(err);\n leftContent.innerHTML = `<div style=\"padding:20px;\">Error<\/div>`;\n rightContent.innerHTML = `<div style=\"padding:20px;\">Error<\/div>`;\n sfIsBattling = false;\n btn.disabled = false;\n }\n }\n\n function getLoadingHTML(text) {\n return `\n <div class=\"placeholder-state\">\n <div class=\"placeholder-icon\" style=\"border-style:solid; border-top-color:transparent; animation:spin 1s infinite linear;\"><\/div>\n <p>${text}<\/p>\n <\/div>\n <style>@keyframes spin { 100% { transform:rotate(360deg); } }<\/style>\n `;\n }\n\n async function getSfMovie() {\n const page = Math.floor(Math.random() * 40) + 1;\n const url = `https:\/\/api.themoviedb.org\/3\/discover\/movie?api_key=${sfApiKey}&with_genres=878&vote_average.gte=6.5&vote_count.gte=500&include_adult=false&page=${page}`;\n const res = await fetch(url);\n const data = await res.json();\n \n if (!data.results || data.results.length === 0) return getSfMovie();\n\n const movie = data.results[Math.floor(Math.random() * data.results.length)];\n \/\/ cast ve videos i\u00e7in detay \u00e7ekiyoruz\n const detail = await fetch(`https:\/\/api.themoviedb.org\/3\/movie\/${movie.id}?api_key=${sfApiKey}&append_to_response=videos,credits`).then(r=>r.json());\n return detail;\n }\n\n function renderSfFighter(movie, side, container) {\n const year = movie.release_date ? movie.release_date.split('-')[0] : '';\n const director = movie.credits.crew.find(c => c.job === 'Director')?.name || 'Unknown';\n const trailer = movie.videos.results.find(v => v.site === 'YouTube' && v.type === 'Trailer');\n \n \/\/ G\u00dcNCELLEME 2: Oyuncu listesini al (ilk 3 ki\u015fi)\n const cast = movie.credits.cast.slice(0, 3).map(c => c.name).join(', ');\n\n const trailerHtml = trailer \n ? `<button class=\"trailer-btn\" onclick=\"openSfTrailer('${trailer.key}')\">Watch Trailer<\/button>`\n : `<button class=\"trailer-btn\" style=\"opacity:0.3; pointer-events:none;\">No Trailer<\/button>`;\n\n const posterSrc = movie.poster_path \n ? `https:\/\/image.tmdb.org\/t\/p\/w780${movie.poster_path}` \n : 'https:\/\/via.placeholder.com\/500x750?text=No+Image';\n\n \/\/ G\u00dcNCELLEME 3: Yeni HTML Yap\u0131s\u0131 (\u00d6zet ve Cast ile)\n container.innerHTML = `\n <div class=\"poster-container\">\n <img decoding=\"async\" src=\"${posterSrc}\" alt=\"${movie.title}\">\n <\/div>\n <div class=\"movie-details\">\n <h2 class=\"movie-title\">${movie.title}<\/h2>\n <div class=\"movie-meta\">${year} \u2022 ${movie.runtime}m<\/div>\n \n <div class=\"score-display\" id=\"sf-score-${side}\">\n ${movie.vote_average.toFixed(1)}\n <\/div>\n \n <p class=\"movie-overview\">${movie.overview}<\/p>\n\n <div class=\"movie-cast-info\">\n <strong>Director:<\/strong> ${director}<br>\n <strong>Stars:<\/strong> ${cast}\n <\/div>\n\n ${trailerHtml}\n <\/div>\n `;\n }\n\n function decideSfWinner(m1, m2) {\n const leftSide = document.getElementById('sf-left');\n const rightSide = document.getElementById('sf-right');\n\n document.getElementById('sf-score-left').style.opacity = '1';\n document.getElementById('sf-score-left').style.transform = 'scale(1)';\n document.getElementById('sf-score-right').style.opacity = '1';\n document.getElementById('sf-score-right').style.transform = 'scale(1)';\n\n if (m1.vote_average > m2.vote_average) {\n leftSide.classList.add('winner-active');\n rightSide.classList.add('loser-active');\n addSfBadge(leftSide);\n } else if (m2.vote_average > m1.vote_average) {\n rightSide.classList.add('winner-active');\n leftSide.classList.add('loser-active');\n addSfBadge(rightSide);\n }\n }\n\n function addSfBadge(element) {\n const badge = document.createElement('div');\n badge.className = 'winner-badge';\n badge.innerText = 'WINNER';\n element.appendChild(badge);\n }\n\n function openSfTrailer(key) {\n const modal = document.getElementById('scifi-modal');\n const content = document.getElementById('scifi-modal-content');\n content.innerHTML = `<iframe width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/${key}?autoplay=1\" frameborder=\"0\" allowfullscreen><\/iframe>`;\n modal.style.display = 'block';\n }\n function closeSfTrailer() {\n const modal = document.getElementById('scifi-modal');\n document.getElementById('scifi-modal-content').innerHTML = '';\n modal.style.display = 'none';\n }\n document.getElementById('scifi-modal').onclick = function(e) {\n if(e.target === this) closeSfTrailer();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sci-Fi Wars Component SCI-FI WARS Press VS to initiate the Ultimate Sci-Fi Battle ? FIGHTER 1 Waiting for data… VS ? FIGHTER 2 Waiting for data… ×<\/p>\n","protected":false},"author":1,"featured_media":36248,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAown96uCw:productID":"","footnotes":""},"categories":[323],"tags":[206,330,307],"class_list":["post-36240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cyberculture","tag-movie-lists","tag-movies","tag-tools"],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/36240","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=36240"}],"version-history":[{"count":0,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/posts\/36240\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media\/36248"}],"wp:attachment":[{"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/media?parent=36240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/categories?post=36240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaverseplanet.net\/blog\/wp-json\/wp\/v2\/tags?post=36240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}