{"id":59,"date":"2018-12-20T22:35:27","date_gmt":"2018-12-20T19:35:27","guid":{"rendered":"http:\/\/www.ruyaokulu.com.tr\/?page_id=2"},"modified":"2025-12-17T10:21:26","modified_gmt":"2025-12-17T10:21:26","slug":"ornek-sayfa","status":"publish","type":"page","link":"https:\/\/ruyaokulu.com.tr\/","title":{"rendered":"HO\u015e GELD\u0130N\u0130Z&#8230;"},"content":{"rendered":"\n<style>\n    \/* --- TEMEL AYARLAR (D\u00dcZELT\u0130LD\u0130: \u00dcstten Ba\u015flama) --- *\/\n    #puzzle-gallery-wrapper {\n        display: flex;\n        justify-content: center;\n        \n        \/* \u00d6NEML\u0130 DE\u011e\u0130\u015e\u0130KL\u0130K: 'center' yerine 'flex-start' yapt\u0131k. \n           B\u00f6ylece galeri dikey olarak ortalanmaz, en \u00fcstten ba\u015flar. *\/\n        align-items: flex-start; \n        \n        width: 100%;\n        \n        \/* \u00dcst bo\u015flu\u011fu kald\u0131rd\u0131k, sadece alta biraz pay b\u0131rakt\u0131k *\/\n        padding: 0 0 40px 0; \n        \n        box-sizing: border-box;\n        min-height: 50vh; \n    }\n\n    \/* GRID YAPISI *\/\n    #puzzle-grid {\n        display: grid;\n        width: 95%; \/* Geni\u015flik %95 *\/\n        \n        \/* Y\u00fcksekli\u011fi s\u0131n\u0131rlayan ayar (16:9 oran\u0131n\u0131 korur) *\/\n        max-width: 160vh; \n        \n        aspect-ratio: 16 \/ 9;\n        \n        margin: 0 auto;\n        grid-template-columns: repeat(6, 1fr);\n        grid-template-rows: repeat(6, 1fr);\n        gap: 0.8%; \n    }\n\n    \/* KART TASARIMI *\/\n    .puzzle-tile {\n        position: relative;\n        width: 100%;\n        height: 100%; \n        background: #000; \n        border-radius: 12px;\n        overflow: hidden; \n        cursor: pointer;\n        box-shadow: none;\n        transition: transform 0.3s ease;\n        isolation: isolate; \n    }\n    \n    .puzzle-tile img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        z-index: 1;\n        position: relative;\n        transition: filter 0.3s;\n    }\n\n    \/* --- KATMAN 1: BEYAZ FLASH (::after) --- *\/\n    .puzzle-tile::after {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-color: #fff;\n        opacity: 0;\n        pointer-events: none;\n        z-index: 10; \n        transition: opacity 0.2s ease-in-out;\n    }\n\n    \/* --- KATMAN 2: KIRMIZI \u00c7ER\u00c7EVE (::before) --- *\/\n    .puzzle-tile::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; \n        width: 100%; height: 100%;\n        border: 3px solid #ff0000; \n        box-sizing: border-box; \n        border-radius: 12px; \n        opacity: 0; \n        z-index: 20; \n        pointer-events: none; \n        transition: opacity 0.5s ease;\n    }\n\n    \/* --- AN\u0130MASYON SINIFLARI --- *\/\n    .puzzle-tile.border-mode::before { opacity: 1; }\n    .puzzle-tile.flash-mode::after { opacity: 1; }\n\n    \/* HOVER EFEKT\u0130 *\/\n    .puzzle-tile:hover {\n        transform: scale(1.05);\n        z-index: 30;\n        box-shadow: 0 10px 20px rgba(0,0,0,0.3);\n    }\n    \n    .puzzle-tile:hover img {\n        filter: brightness(0.8);\n    }\n    \n    .puzzle-tile:hover::before {\n        border-color: #FFD700;\n        opacity: 1;\n        transition: border-color 0.3s, opacity 0.3s;\n    }\n\n    \/* --- OYNAT BUTONU --- *\/\n    .play-icon {\n        position: absolute;\n        top: 50%; left: 50%;\n        transform: translate(-50%, -50%);\n        width: 48px; \n        height: 48px;\n        background: rgba(255, 0, 0, 0.2); \n        box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);\n        border-radius: 50%;\n        display: flex;\n        align-items: center; justify-content: center;\n        z-index: 40; \n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); \n    }\n\n    .play-icon svg {\n        width: 34px;\n        height: 34px;\n        fill: white;\n        margin-left: 0px; \n    }\n\n    .puzzle-tile:hover .play-icon {\n        transform: translate(-50%, -50%) scale(1.2); \n        background: #fff; \n        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5); \n    }\n    \n    .puzzle-tile:hover .play-icon svg {\n        fill: #ff0000;\n    }\n\n    \/* --- RESPONSIVE AYARLAR --- *\/\n    @media (min-width: 768px) {\n        .puzzle-tile:nth-child(1) { grid-area: 1 \/ 1 \/ 3 \/ 3; }\n        .puzzle-tile:nth-child(2) { grid-area: 1 \/ 3 \/ 2 \/ 4; }\n        .puzzle-tile:nth-child(3) { grid-area: 1 \/ 4 \/ 2 \/ 5; }\n        .puzzle-tile:nth-child(4) { grid-area: 1 \/ 5 \/ 2 \/ 6; }\n        .puzzle-tile:nth-child(5) { grid-area: 1 \/ 6 \/ 2 \/ 7; }\n        .puzzle-tile:nth-child(6) { grid-area: 2 \/ 3 \/ 3 \/ 4; }\n        .puzzle-tile:nth-child(7) { grid-area: 2 \/ 4 \/ 4 \/ 6; }\n        .puzzle-tile:nth-child(8) { grid-area: 2 \/ 6 \/ 3 \/ 7; }\n        .puzzle-tile:nth-child(9) { grid-area: 3 \/ 1 \/ 4 \/ 2; }\n        .puzzle-tile:nth-child(10) { grid-area: 3 \/ 2 \/ 5 \/ 4; }\n        .puzzle-tile:nth-child(11) { grid-area: 3 \/ 6 \/ 4 \/ 7; }\n        .puzzle-tile:nth-child(12) { grid-area: 4 \/ 1 \/ 5 \/ 2; }\n        .puzzle-tile:nth-child(13) { grid-area: 4 \/ 4 \/ 5 \/ 5; }\n        .puzzle-tile:nth-child(14) { grid-area: 4 \/ 5 \/ 5 \/ 6; }\n        .puzzle-tile:nth-child(15) { grid-area: 4 \/ 6 \/ 5 \/ 7; }\n        .puzzle-tile:nth-child(16) { grid-area: 5 \/ 1 \/ 7 \/ 3; }\n        .puzzle-tile:nth-child(17) { grid-area: 5 \/ 3 \/ 6 \/ 4; }\n        .puzzle-tile:nth-child(18) { grid-area: 5 \/ 4 \/ 6 \/ 5; }\n        .puzzle-tile:nth-child(19) { grid-area: 5 \/ 5 \/ 7 \/ 7; }\n        .puzzle-tile:nth-child(20) { grid-area: 6 \/ 3 \/ 7 \/ 4; }\n        .puzzle-tile:nth-child(21) { grid-area: 6 \/ 4 \/ 7 \/ 5; }\n    }\n\n    @media (max-width: 767px) {\n        #puzzle-grid { \n            aspect-ratio: auto; \n            max-width: 100%;\n            grid-template-columns: repeat(2, 1fr); \n            grid-template-rows: auto;\n            gap: 8px; \n        }\n        \n        .puzzle-tile { \n            aspect-ratio: 16\/9; \n            grid-area: auto !important; \n        }\n\n        .puzzle-tile:nth-child(1), .puzzle-tile:nth-child(7),\n        .puzzle-tile:nth-child(10), .puzzle-tile:nth-child(16),\n        .puzzle-tile:nth-child(19) { grid-column: span 2; }\n        \n        .play-icon { width: 40px; height: 40px; }\n        .play-icon svg { width: 26px; height: 26px; margin-left: 0px; }\n    }\n\n    #puz-modal {\n        display: none; position: fixed; z-index: 99999;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(0,0,0,0.95);\n        justify-content: center; align-items: center;\n    }\n    .modal-content {\n        position: relative; width: 95%; max-width: 1000px;\n        aspect-ratio: 16\/9; background: #000;\n        box-shadow: 0 0 30px rgba(255,255,255,0.2);\n        border-radius: 12px; overflow: hidden;\n    }\n    .close-puz {\n        position: absolute; top: -50px; right: 0;\n        color: white; font-size: 40px; cursor: pointer;\n    }\n<\/style>\n\n<div id=\"puzzle-gallery-wrapper\">\n    <div id=\"puzzle-grid\">\n        <p style=\"grid-column: 1\/-1; text-align:center; padding:50px;\">Galeri Y\u00fckleniyor&#8230;<\/p>\n    <\/div>\n<\/div>\n\n<div id=\"puz-modal\">\n    <div class=\"modal-content\">\n        <div class=\"close-puz\">&times;<\/div>\n        <iframe loading=\"lazy\" id=\"puz-frame\" width=\"100%\" height=\"100%\" src=\"\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen><\/iframe>\n    <\/div>\n<\/div>\n\n<script>\n    const API_KEY = 'AIzaSyAxLdOqVwONdroSgDZHHS4lmjw07i0-r8M'; \n    const PLAYLIST_ID = 'PLdWh_djmsRWLj_mJxPqPsrzuc5m0k91HR';\n    const FIXED_SLOTS = 21; \n    const SWAP_INTERVAL = 1000; \n\n    let allVideos = [], visibleVideos = [], poolVideos = [];    \n    const grid = document.getElementById('puzzle-grid');\n    const modal = document.getElementById('puz-modal');\n    const iframe = document.getElementById('puz-frame');\n    const closeBtn = document.querySelector('.close-puz');\n\n    async function initGallery() {\n        let nextPageToken = '';\n        try {\n            do {\n                const url = `https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems?part=snippet&maxResults=50&playlistId=${PLAYLIST_ID}&key=${API_KEY}&pageToken=${nextPageToken || ''}`;\n                const response = await fetch(url);\n                const data = await response.json();\n                if (data.items) {\n                    const valid = data.items.filter(i => {\n                        const t = i.snippet.title;\n                        return t !== \"Private video\" && t !== \"Deleted video\";\n                    });\n                    allVideos = allVideos.concat(valid);\n                }\n                nextPageToken = data.nextPageToken;\n            } while (nextPageToken && allVideos.length < 108);\n            setupGrid();\n        } catch (error) { grid.innerHTML = '<p style=\"text-align:center\">Y\u00fcklenemedi<\/p>'; }\n    }\n\n    function setupGrid() {\n        grid.innerHTML = '';\n        if (allVideos.length === 0) return;\n        visibleVideos = allVideos.slice(0, FIXED_SLOTS);\n        poolVideos = allVideos.slice(FIXED_SLOTS);\n        const slotsToCreate = Math.min(visibleVideos.length, FIXED_SLOTS);\n\n        for (let i = 0; i < slotsToCreate; i++) createTileElement(visibleVideos[i], i);\n        if (poolVideos.length > 0) setInterval(swapRandomTile, SWAP_INTERVAL);\n    }\n\n    function createTileElement(video, index) {\n        const div = document.createElement('div');\n        div.className = 'puzzle-tile';\n        div.dataset.index = index; \n        updateTileContent(div, video);\n        div.onclick = () => openModal(div.dataset.vidId);\n        grid.appendChild(div);\n    }\n\n    function updateTileContent(divElement, videoData) {\n        const snip = videoData.snippet;\n        const img = snip.thumbnails.maxres?.url || snip.thumbnails.high?.url || snip.thumbnails.medium?.url;\n        divElement.dataset.vidId = snip.resourceId.videoId;\n        \n        divElement.innerHTML = `\n            <img decoding=\"async\" src=\"${img}\" alt=\"Video\" loading=\"lazy\">\n            <div class=\"play-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M8 5v14l11-7z\"\/>\n                <\/svg>\n            <\/div>\n        `;\n    }\n\n    function swapRandomTile() {\n        if (poolVideos.length === 0) return;\n        const randomSlotIndex = Math.floor(Math.random() * visibleVideos.length);\n        const tileDiv = grid.children[randomSlotIndex];\n        if (tileDiv.matches(':hover')) return; \n\n        const newVideo = poolVideos.shift(); \n        const oldVideo = visibleVideos[randomSlotIndex]; \n        visibleVideos[randomSlotIndex] = newVideo; \n        poolVideos.push(oldVideo); \n\n        \/\/ Animasyonlar\n        tileDiv.classList.add('border-mode');\n        setTimeout(() => { tileDiv.classList.add('flash-mode'); }, 600);\n        setTimeout(() => { updateTileContent(tileDiv, newVideo); }, 800);\n        setTimeout(() => { tileDiv.classList.remove('flash-mode'); }, 1100);\n        setTimeout(() => { tileDiv.classList.remove('border-mode'); }, 1500);\n    }\n\n    function openModal(vidId) {\n        modal.style.display = 'flex';\n        iframe.src = `https:\/\/www.youtube.com\/embed\/${vidId}?autoplay=1`;\n    }\n    const closeModal = () => { modal.style.display = 'none'; iframe.src = ''; };\n    closeBtn.onclick = closeModal;\n    modal.onclick = (e) => { if (e.target === modal) closeModal(); };\n\n    initGallery();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Galeri Y\u00fckleniyor&#8230; &times;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"yeni-bos","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"default","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-59","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=59"}],"version-history":[{"count":132,"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/59\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/59\/revisions\/639"}],"wp:attachment":[{"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}