{"id":195,"date":"2018-12-27T11:20:22","date_gmt":"2018-12-27T08:20:22","guid":{"rendered":"http:\/\/www.ruyaokulu.com.tr\/?page_id=195"},"modified":"2025-12-16T10:30:28","modified_gmt":"2025-12-16T10:30:28","slug":"haydi-cizelim","status":"publish","type":"page","link":"https:\/\/ruyaokulu.com.tr\/?page_id=195","title":{"rendered":"HAYD\u0130 \u00c7\u0130ZEL\u0130M"},"content":{"rendered":"\n<style>\n    \/* TEMEL AYARLAR & TRANSPARANLIK *\/\n    \/* Body ve Html \u015feffaf yap\u0131ld\u0131 ki sitenin kendi rengi alttan g\u00f6r\u00fcns\u00fcn *\/\n    body, html { \n        margin: 0; \n        padding: 0; \n        width: 100%; \n        height: 100%; \n        background: transparent !important; \/* Zorunlu \u015feffafl\u0131k *\/\n        overflow-x: hidden; \n    }\n\n    \/* KAPSAYICI *\/\n    #ultimate-gallery-wrapper {\n        width: 100%;\n        position: relative;\n        display: flex;\n        justify-content: center;\n        background: transparent; \/* Siyah renk kald\u0131r\u0131ld\u0131 *\/\n        scrollbar-width: none; \n    }\n    #ultimate-gallery-wrapper::-webkit-scrollbar { display: none; }\n\n    \/* GRID YAPISI *\/\n    #seamless-grid {\n        display: grid;\n        width: 100%;\n        grid-template-columns: repeat(6, 1fr); \/* Masa\u00fcst\u00fc 6 s\u00fctun *\/\n        grid-auto-rows: min-content; \n        grid-auto-flow: dense; \n        gap: 4px;\n        padding: 4px;\n        box-sizing: border-box;\n        align-content: start; \n    }\n\n    \/* V\u0130DEO KUTUSU (1x1) *\/\n    .grid-tile {\n        position: relative;\n        width: 100%;\n        aspect-ratio: 16 \/ 9;\n        overflow: hidden;\n        cursor: pointer;\n        \/* Y\u00fcklenirken simsiyah kutu yerine hafif transparan dolgu *\/\n        background: rgba(0,0,0,0.1); \n        opacity: 0;\n        animation: fadeIn 0.6s forwards;\n        border-radius: 4px; \/* Hafif yumu\u015fak k\u00f6\u015fe (Opsiyonel) *\/\n    }\n\n    @keyframes fadeIn { to { opacity: 1; } }\n\n    .grid-tile img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        transition: transform 0.4s ease, filter 0.4s ease;\n        opacity: 0.95;\n    }\n\n    \/* Mouse \u00fczerine gelince efekt *\/\n    .grid-tile:hover img {\n        transform: scale(1.05);\n        filter: brightness(1.1); \/* \u00c7ok parlamas\u0131n, do\u011fal dursun *\/\n        opacity: 1;\n        z-index: 2;\n    }\n\n    \/* B\u00dcY\u00dcK KUTU (2x2) *\/\n    .tile-big { \n        grid-column: span 2; \n        grid-row: span 2; \n    }\n\n    \/* OYNATMA \u0130KONU *\/\n    .play-overlay {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 50px;\n        height: 50px;\n        background: rgba(0,0,0,0.4); \/* Yar\u0131 \u015feffaf koyu *\/\n        border: 1px solid rgba(255,255,255,0.6);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-size: 24px;\n        pointer-events: none;\n        backdrop-filter: blur(2px);\n        transition: all 0.3s;\n    }\n\n    .grid-tile:hover .play-overlay {\n        background: #f00; \/* Youtube K\u0131rm\u0131z\u0131s\u0131 *\/\n        border-color: #f00;\n        transform: translate(-50%, -50%) scale(1.1);\n    }\n\n    \/* RESPONSIVE AYARLAR *\/\n    @media (max-width: 1200px) { #seamless-grid { grid-template-columns: repeat(4, 1fr); } }\n    @media (max-width: 768px) { #seamless-grid { grid-template-columns: repeat(3, 1fr); } }\n    @media (max-width: 480px) { \n        #seamless-grid { grid-template-columns: repeat(2, 1fr); } \n        .tile-big { grid-column: span 2; grid-row: span 2; }\n    }\n\n    \/* MODAL (POPUP) - Buras\u0131 hala koyu kalmal\u0131 ki video izlensin *\/\n    #vid-modal {\n        display: none;\n        position: fixed;\n        z-index: 10000;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0,0,0,0.9); \/* Arka plan\u0131 hafif g\u00f6steren koyu perde *\/\n        align-items: center;\n        justify-content: center;\n        backdrop-filter: blur(5px); \/* Arka plan\u0131 flula\u015ft\u0131r\u0131r *\/\n    }\n    \n    .modal-wrap {\n        position: relative;\n        width: 100%;\n        max-width: 1200px;\n        aspect-ratio: 16\/9;\n        background: transparent;\n        box-shadow: 0 0 30px rgba(0,0,0,0.5);\n    }\n    \n    .close-vid {\n        position: absolute;\n        top: -50px;\n        right: 10px;\n        color: #fff;\n        font-size: 40px;\n        cursor: pointer;\n        z-index: 10001;\n        font-family: sans-serif;\n        text-shadow: 0 2px 5px rgba(0,0,0,0.8);\n    }\n<\/style>\n\n<div id=\"ultimate-gallery-wrapper\">\n    <div id=\"seamless-grid\">\n        <p id=\"loading-msg\" style=\"color: inherit; opacity:0.7; padding:40px; font-family:sans-serif; font-weight:bold;\">Y\u00fckleniyor&#8230;<\/p>\n    <\/div>\n<\/div>\n\n<div id=\"vid-modal\">\n    <div class=\"close-vid\">&times;<\/div>\n    <div class=\"modal-wrap\">\n        <iframe loading=\"lazy\" id=\"vid-frame\" width=\"100%\" height=\"100%\" src=\"\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ --- AYARLAR ---\n    const API_KEY = 'AIzaSyAxLdOqVwONdroSgDZHHS4lmjw07i0-r8M'; \n    const PLAYLIST_ID = 'PLdWh_djmsRWLj_mJxPqPsrzuc5m0k91HR';\n    \n    const TARGET_WALL_SIZE = 60; \/\/ Hedef duvar boyutu (Loop i\u00e7in)\n    const MIN_CLONE_THRESHOLD = 20; \/\/ 20'den azsa loop yapma\n    \/\/ ---------------\n\n    const grid = document.getElementById('seamless-grid');\n    const modal = document.getElementById('vid-modal');\n    const iframe = document.getElementById('vid-frame');\n    const closeBtn = document.querySelector('.close-vid');\n\n    \/\/ YouTube API: Pagination ile max 150 video\n    async function fetchAllVideos() {\n        let videos = [];\n        let nextPageToken = '';\n        \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                \n                if (!data.items) break;\n\n                videos = videos.concat(data.items);\n                nextPageToken = data.nextPageToken;\n\n            } while (nextPageToken && videos.length < 150);\n            \n            return videos;\n        } catch (error) {\n            console.error(\"API Hatas\u0131:\", error);\n            grid.innerHTML = '<p style=\"opacity:0.7; text-align:center\">Liste y\u00fcklenemedi.<\/p>';\n            return [];\n        }\n    }\n\n    fetchAllVideos().then(rawItems => {\n        grid.innerHTML = ''; \n\n        if (!rawItems || rawItems.length === 0) return;\n\n        \/\/ 1. Temizle\n        let cleanVideos = rawItems.filter(item => {\n            const t = item.snippet.title;\n            return t !== \"Private video\" && t !== \"Deleted video\";\n        });\n\n        const totalVideos = cleanVideos.length;\n        let finalDisplayList = [];\n\n        \/\/ 2. MANTIK (20 alt\u0131 \/ 20-60 aras\u0131 \/ 60 \u00fcst\u00fc)\n        \n        if (totalVideos < MIN_CLONE_THRESHOLD) {\n            \/\/ < 20 Video: Kopyalama YAPMA.\n            finalDisplayList = [...cleanVideos];\n        } \n        else if (totalVideos < TARGET_WALL_SIZE) {\n            \/\/ 20 - 60 Video: Kopyalama YAP (Duvar\u0131 doldur).\n            finalDisplayList = [...cleanVideos];\n            while (finalDisplayList.length < TARGET_WALL_SIZE) {\n                finalDisplayList = finalDisplayList.concat(cleanVideos);\n            }\n            finalDisplayList = finalDisplayList.slice(0, TARGET_WALL_SIZE);\n        } \n        else {\n            \/\/ > 60 Video: Hepsini g\u00f6ster.\n            finalDisplayList = [...cleanVideos];\n        }\n\n        \/\/ 3. Kar\u0131\u015ft\u0131r\n        finalDisplayList.sort(() => Math.random() - 0.5);\n\n        \/\/ 4. Bas\n        finalDisplayList.forEach(video => createTile(video));\n    });\n\n    function createTile(video) {\n        const snip = video.snippet;\n        const vidId = snip.resourceId.videoId;\n        const imgUrl = snip.thumbnails.maxres?.url || snip.thumbnails.high?.url || snip.thumbnails.medium?.url;\n\n        const div = document.createElement('div');\n        \n        \/\/ %20 \u0130htimalle B\u00fcy\u00fck Kutu\n        const isBig = Math.random() < 0.20; \n        div.className = `grid-tile ${isBig ? 'tile-big' : ''}`;\n\n        div.innerHTML = `\n            <img decoding=\"async\" src=\"${imgUrl}\" loading=\"lazy\" alt=\"Video\">\n            <div class=\"play-overlay\">&#9658;<\/div>\n        `;\n\n        div.onclick = () => {\n            modal.style.display = 'flex';\n            iframe.src = `https:\/\/www.youtube.com\/embed\/${vidId}?autoplay=1&rel=0`;\n        };\n\n        grid.appendChild(div);\n    }\n\n    \/\/ Modal Kapatma\n    const closeModal = () => { modal.style.display = 'none'; iframe.src = ''; };\n    closeBtn.onclick = closeModal;\n    modal.onclick = (e) => { if(e.target === modal) closeModal(); };\n    document.addEventListener('keydown', (e) => { if(e.key === \"Escape\") closeModal(); });\n\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-195","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/195","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=195"}],"version-history":[{"count":8,"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/195\/revisions"}],"predecessor-version":[{"id":577,"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/195\/revisions\/577"}],"wp:attachment":[{"href":"https:\/\/ruyaokulu.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}