\u00c7al\u0131\u015fmalar\u0131m\u0131z - Ayka Baca Temizleme<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: #ffffff;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n padding: 40px 0;\r\n }\r\n\r\n .header h1 {\r\n font-size: 3.5rem;\r\n font-weight: 800;\r\n background: linear-gradient(45deg, #ffffff, #e8f4fd, #ffffff);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: gradientAnimation 3s ease infinite;\r\n margin-bottom: 20px;\r\n text-shadow: 0 4px 20px rgba(255,255,255,0.3);\r\n }\r\n\r\n .header p {\r\n font-size: 1.3rem;\r\n color: rgba(255,255,255,0.9);\r\n max-width: 700px;\r\n margin: 0 auto;\r\n font-weight: 300;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n @keyframes gradientAnimation {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n \/* Gallery Grid Styles *\/\r\n .gallery-container {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 80px auto;\r\n padding: 0 20px;\r\n }\r\n\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 25px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .gallery-item {\r\n position: relative;\r\n aspect-ratio: 4\/5;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\r\n backdrop-filter: blur(10px);\r\n box-shadow: \r\n 0 10px 30px rgba(0, 0, 0, 0.2),\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .gallery-item:hover {\r\n transform: scale(1.05) translateY(-10px);\r\n box-shadow: \r\n 0 30px 60px rgba(0, 0, 0, 0.4),\r\n 0 0 0 1px rgba(255, 255, 255, 0.2);\r\n z-index: 10;\r\n }\r\n\r\n .gallery-item.fullscreen {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: 1000;\r\n border-radius: 0;\r\n transform: none;\r\n background: rgba(0, 0, 0, 0.95);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .gallery-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 20px;\r\n transition: all 0.6s ease;\r\n }\r\n\r\n .gallery-item.fullscreen img {\r\n width: auto;\r\n height: auto;\r\n max-width: 90vw;\r\n max-height: 90vh;\r\n object-fit: contain;\r\n border-radius: 15px;\r\n box-shadow: 0 0 100px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .gallery-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));\r\n color: white;\r\n padding: 25px;\r\n transform: translateY(100%);\r\n transition: all 0.6s ease;\r\n backdrop-filter: blur(15px);\r\n }\r\n\r\n .gallery-item:hover .gallery-overlay {\r\n transform: translateY(0);\r\n }\r\n\r\n .gallery-item.fullscreen .gallery-overlay {\r\n position: fixed;\r\n bottom: 50px;\r\n left: 50%;\r\n right: auto;\r\n width: 400px;\r\n transform: translateX(-50%);\r\n background: rgba(0, 0, 0, 0.8);\r\n border-radius: 15px;\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .gallery-overlay h3 {\r\n margin-bottom: 12px;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .gallery-overlay p {\r\n font-size: 0.95rem;\r\n color: rgba(255,255,255,0.9);\r\n line-height: 1.5;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Close Button for Fullscreen *\/\r\n .close-btn {\r\n position: fixed;\r\n top: 30px;\r\n right: 30px;\r\n width: 50px;\r\n height: 50px;\r\n background: rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50%;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 1.5rem;\r\n color: white;\r\n font-weight: bold;\r\n z-index: 1001;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .close-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: scale(1.1);\r\n }\r\n\r\n .gallery-item.fullscreen ~ .close-btn {\r\n display: flex;\r\n }\r\n\r\n \/* Controls *\/\r\n .controls {\r\n text-align: center;\r\n margin-top: 50px;\r\n }\r\n\r\n .control-hint {\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(15px);\r\n border-radius: 30px;\r\n padding: 18px 35px;\r\n display: inline-block;\r\n margin: 12px;\r\n font-size: 1rem;\r\n color: rgba(255,255,255,0.95);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n font-weight: 400;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Loading animation *\/\r\n .loading-animation {\r\n text-align: center;\r\n padding: 50px;\r\n }\r\n\r\n .loader {\r\n width: 60px;\r\n height: 60px;\r\n border: 4px solid rgba(255, 107, 107, 0.3);\r\n border-top: 4px solid #ff6b6b;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 20px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .gallery-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .control-hint {\r\n font-size: 0.9rem;\r\n padding: 15px 25px;\r\n margin: 8px;\r\n }\r\n\r\n .gallery-item.fullscreen .gallery-overlay {\r\n width: 90%;\r\n max-width: 350px;\r\n }\r\n\r\n .close-btn {\r\n top: 20px;\r\n right: 20px;\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .gallery-grid {\r\n grid-template-columns: 1fr;\r\n gap: 15px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .control-hint {\r\n display: block;\r\n margin: 8px auto;\r\n font-size: 0.85rem;\r\n padding: 12px 20px;\r\n }\r\n\r\n .gallery-item.fullscreen .gallery-overlay {\r\n bottom: 30px;\r\n width: 90%;\r\n max-width: 300px;\r\n }\r\n\r\n .close-btn {\r\n top: 15px;\r\n right: 15px;\r\n width: 35px;\r\n height: 35px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n \/* Fade in animation *\/\r\n .fade-in {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .fade-in.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header fade-in\">\r\n <h1>\u00c7al\u0131\u015fmalar\u0131m\u0131z<\/h1>\r\n <p>Profesyonel baca temizleme hizmetlerimizden \u00f6rnekler. 3D galeriyi ke\u015ffedin!<\/p>\r\n <\/div>\r\n\r\n <div class=\"loading-animation\" id=\"loading\">\r\n <div class=\"loader\"><\/div>\r\n <p>3D Galeri y\u00fckleniyor...<\/p>\r\n <\/div>\r\n\r\n <div class=\"gallery-container\" id=\"galleryContainer\" style=\"display: none;\">\r\n <div class=\"gallery-grid\" id=\"galleryGrid\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"close-btn\" id=\"closeBtn\">\u00d7<\/div>\r\n\r\n <div class=\"controls fade-in\">\r\n <div class=\"control-hint\">\ud83d\uddb1\ufe0f Resmin \u00fczerine gelip t\u0131klay\u0131n<\/div>\r\n <div class=\"control-hint\">\ud83d\udd0d Tam ekran g\u00f6r\u00fcnt\u00fcleme<\/div>\r\n <div class=\"control-hint\">\u274c ESC veya X ile kapat\u0131n<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Gallery data\r\n const galleryData = [\r\n {\r\n id: 1,\r\n image: \"1.jpg\",\r\n title: \"Baca Temizlik Projesi #1\",\r\n description: \"Profesyonel ekipmanlarla detayl\u0131 baca temizli\u011fi ve g\u00fcvenli hizmet anlay\u0131\u015f\u0131\"\r\n },\r\n {\r\n id: 2,\r\n image: \"2.jpg\",\r\n title: \"Baca Temizlik Projesi #2\",\r\n description: \"G\u00fcvenli ve etkili temizlik hizmeti ile m\u00fckemmel sonu\u00e7lar\"\r\n },\r\n {\r\n id: 3,\r\n image: \"3.jpg\",\r\n title: \"Baca Temizlik Projesi #3\",\r\n description: \"Uzman ekibimizle kaliteli hizmet ve titiz \u00e7al\u0131\u015fma anlay\u0131\u015f\u0131\"\r\n },\r\n {\r\n id: 4,\r\n image: \"4.webp\",\r\n title: \"Baca Temizlik Projesi #4\",\r\n description: \"Modern tekniklerle m\u00fckemmel sonu\u00e7lar ve m\u00fc\u015fteri memnuniyeti\"\r\n },\r\n {\r\n id: 5,\r\n image: \"5.jpg\",\r\n title: \"Baca Temizlik Projesi #5\",\r\n description: \"Titiz \u00e7al\u0131\u015fma ve \u00f6zenli hizmet ile g\u00fcvenilir yakla\u015f\u0131m\"\r\n },\r\n {\r\n id: 6,\r\n image: \"6.jpg\",\r\n title: \"Baca Temizlik Projesi #6\",\r\n description: \"G\u00fcvenilir ve profesyonel yakla\u015f\u0131m ile kaliteli sonu\u00e7lar\"\r\n },\r\n {\r\n id: 7,\r\n image: \"7.jpg\",\r\n title: \"Baca Temizlik Projesi #7\",\r\n description: \"Detayl\u0131 inceleme ve temizlik ile m\u00fckemmel hizmet kalitesi\"\r\n },\r\n {\r\n id: 8,\r\n image: \"8.jpg\",\r\n title: \"Baca Temizlik Projesi #8\",\r\n description: \"Kaliteli hizmet anlay\u0131\u015f\u0131 ve profesyonel ekipman kullan\u0131m\u0131\"\r\n },\r\n {\r\n id: 9,\r\n image: \"9.jpg\",\r\n title: \"Baca Temizlik Projesi #9\",\r\n description: \"M\u00fckemmel sonu\u00e7lar ve m\u00fc\u015fteri memnuniyeti \u00f6nceli\u011fimiz\"\r\n }\r\n ];\r\n\r\n \/\/ Base URL for images\r\n const baseImageURL = \"https:\/\/aykabacatemizleme.com.tr\/galeri\/\";\r\n \r\n \/\/ Gallery variables\r\n let currentFullscreenItem = null;\r\n\r\n \/\/ Initialize Gallery\r\n function initGallery() {\r\n const loading = document.getElementById('loading');\r\n const galleryContainer = document.getElementById('galleryContainer');\r\n \r\n setTimeout(() => {\r\n loading.style.display = 'none';\r\n galleryContainer.style.display = 'block';\r\n \r\n const galleryGrid = document.getElementById('galleryGrid');\r\n \r\n \/\/ Create gallery items\r\n galleryData.forEach((item, index) => {\r\n const galleryItem = createGalleryItem(item, index);\r\n galleryGrid.appendChild(galleryItem);\r\n });\r\n \r\n \/\/ Add event listeners\r\n addEventListeners();\r\n \r\n \/\/ Trigger animations\r\n setTimeout(() => {\r\n document.querySelector('.header').classList.add('visible');\r\n document.querySelector('.controls').classList.add('visible');\r\n \r\n \/\/ Animate gallery items with stagger\r\n const items = document.querySelectorAll('.gallery-item');\r\n items.forEach((item, index) => {\r\n setTimeout(() => {\r\n item.style.opacity = '1';\r\n item.style.transform = 'translateY(0)';\r\n }, index * 100);\r\n });\r\n }, 200);\r\n \r\n }, 1500);\r\n }\r\n\r\n \/\/ Create gallery item\r\n function createGalleryItem(data, index) {\r\n const item = document.createElement('div');\r\n item.className = 'gallery-item fade-in';\r\n item.dataset.index = index;\r\n item.style.opacity = '0';\r\n item.style.transform = 'translateY(30px)';\r\n item.style.transition = 'all 0.6s ease';\r\n \r\n item.innerHTML = `\r\n <img decoding=\"async\" src=\"${baseImageURL + data.image}\" alt=\"${data.title}\" loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <h3>${data.title}<\/h3>\r\n <p>${data.description}<\/p>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Add click event for fullscreen\r\n item.addEventListener('click', () => openFullscreen(item));\r\n \r\n return item;\r\n }\r\n\r\n \/\/ Add event listeners\r\n function addEventListeners() {\r\n \/\/ Close button\r\n const closeBtn = document.getElementById('closeBtn');\r\n closeBtn.addEventListener('click', closeFullscreen);\r\n \r\n \/\/ Keyboard events\r\n document.addEventListener('keydown', handleKeyDown);\r\n \r\n \/\/ Click outside to close\r\n document.addEventListener('click', handleOutsideClick);\r\n }\r\n\r\n \/\/ Open fullscreen\r\n function openFullscreen(item) {\r\n if (currentFullscreenItem) return;\r\n \r\n currentFullscreenItem = item;\r\n item.classList.add('fullscreen');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Show close button\r\n const closeBtn = document.getElementById('closeBtn');\r\n closeBtn.style.display = 'flex';\r\n \r\n \/\/ Prevent body scroll\r\n document.addEventListener('wheel', preventScroll, { passive: false });\r\n document.addEventListener('touchmove', preventScroll, { passive: false });\r\n }\r\n\r\n \/\/ Close fullscreen\r\n function closeFullscreen() {\r\n if (!currentFullscreenItem) return;\r\n \r\n currentFullscreenItem.classList.remove('fullscreen');\r\n currentFullscreenItem = null;\r\n document.body.style.overflow = 'auto';\r\n \r\n \/\/ Hide close button\r\n const closeBtn = document.getElementById('closeBtn');\r\n closeBtn.style.display = 'none';\r\n \r\n \/\/ Re-enable body scroll\r\n document.removeEventListener('wheel', preventScroll);\r\n document.removeEventListener('touchmove', preventScroll);\r\n }\r\n\r\n \/\/ Prevent scroll when fullscreen is open\r\n function preventScroll(e) {\r\n if (currentFullscreenItem) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n \/\/ Handle keyboard events\r\n function handleKeyDown(e) {\r\n if (e.key === 'Escape' && currentFullscreenItem) {\r\n closeFullscreen();\r\n }\r\n }\r\n\r\n \/\/ Handle click outside\r\n function handleOutsideClick(e) {\r\n if (currentFullscreenItem && \r\n e.target === currentFullscreenItem && \r\n !e.target.querySelector('img').contains(e.target)) {\r\n closeFullscreen();\r\n }\r\n }\r\n\r\n \/\/ Scroll animations\r\n function handleScrollAnimations() {\r\n const elements = document.querySelectorAll('.fade-in');\r\n elements.forEach(element => {\r\n const elementTop = element.getBoundingClientRect().top;\r\n const elementVisible = 150;\r\n \r\n if (elementTop < window.innerHeight - elementVisible) {\r\n element.classList.add('visible');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Auto-rotate (optional)\r\n function startAutoRotate() {\r\n setInterval(() => {\r\n if (!isMouseDown && !carousel.classList.contains('dragging')) {\r\n goToNextSlide();\r\n }\r\n }, 5000);\r\n }\r\n\r\n \/\/ Event listeners\r\n window.addEventListener('scroll', handleScrollAnimations);\r\n window.addEventListener('resize', handleScrollAnimations);\r\n\r\n \/\/ Initialize when page loads\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initGallery();\r\n handleScrollAnimations();\r\n });\r\n\r\n \/\/ Error handling for images\r\n document.addEventListener('error', function(e) {\r\n if (e.target.tagName === 'IMG') {\r\n console.log('Resim y\u00fcklenemedi:', e.target.src);\r\n e.target.style.opacity = '0.3';\r\n }\r\n }, true);\r\n <\/script>\r\n<\/body>\r\n<\/html> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00c7al\u0131\u015fmalar\u0131m\u0131z – Ayka Baca Temizleme \u00c7al\u0131\u015fmalar\u0131m\u0131z Profesyonel baca temizleme hizmetlerimizden \u00f6rnekler. 3D galeriyi ke\u015ffedin! 3D Galeri y\u00fckleniyor… \u00d7 \ud83d\uddb1\ufe0f Resmin \u00fczerine gelip t\u0131klay\u0131n \ud83d\udd0d Tam ekran g\u00f6r\u00fcnt\u00fcleme \u274c ESC veya X ile kapat\u0131n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":22,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/415\/revisions"}],"predecessor-version":[{"id":2054,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/415\/revisions\/2054"}],"wp:attachment":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/media?parent=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u00c7al\u0131\u015fmalar\u0131m\u0131z - Ayka Baca Temizleme<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: #ffffff;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n padding: 40px 0;\r\n }\r\n\r\n .header h1 {\r\n font-size: 3.5rem;\r\n font-weight: 800;\r\n background: linear-gradient(45deg, #ffffff, #e8f4fd, #ffffff);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: gradientAnimation 3s ease infinite;\r\n margin-bottom: 20px;\r\n text-shadow: 0 4px 20px rgba(255,255,255,0.3);\r\n }\r\n\r\n .header p {\r\n font-size: 1.3rem;\r\n color: rgba(255,255,255,0.9);\r\n max-width: 700px;\r\n margin: 0 auto;\r\n font-weight: 300;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n @keyframes gradientAnimation {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n \/* Gallery Grid Styles *\/\r\n .gallery-container {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 80px auto;\r\n padding: 0 20px;\r\n }\r\n\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 25px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .gallery-item {\r\n position: relative;\r\n aspect-ratio: 4\/5;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\r\n backdrop-filter: blur(10px);\r\n box-shadow: \r\n 0 10px 30px rgba(0, 0, 0, 0.2),\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .gallery-item:hover {\r\n transform: scale(1.05) translateY(-10px);\r\n box-shadow: \r\n 0 30px 60px rgba(0, 0, 0, 0.4),\r\n 0 0 0 1px rgba(255, 255, 255, 0.2);\r\n z-index: 10;\r\n }\r\n\r\n .gallery-item.fullscreen {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: 1000;\r\n border-radius: 0;\r\n transform: none;\r\n background: rgba(0, 0, 0, 0.95);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .gallery-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 20px;\r\n transition: all 0.6s ease;\r\n }\r\n\r\n .gallery-item.fullscreen img {\r\n width: auto;\r\n height: auto;\r\n max-width: 90vw;\r\n max-height: 90vh;\r\n object-fit: contain;\r\n border-radius: 15px;\r\n box-shadow: 0 0 100px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .gallery-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));\r\n color: white;\r\n padding: 25px;\r\n transform: translateY(100%);\r\n transition: all 0.6s ease;\r\n backdrop-filter: blur(15px);\r\n }\r\n\r\n .gallery-item:hover .gallery-overlay {\r\n transform: translateY(0);\r\n }\r\n\r\n .gallery-item.fullscreen .gallery-overlay {\r\n position: fixed;\r\n bottom: 50px;\r\n left: 50%;\r\n right: auto;\r\n width: 400px;\r\n transform: translateX(-50%);\r\n background: rgba(0, 0, 0, 0.8);\r\n border-radius: 15px;\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .gallery-overlay h3 {\r\n margin-bottom: 12px;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .gallery-overlay p {\r\n font-size: 0.95rem;\r\n color: rgba(255,255,255,0.9);\r\n line-height: 1.5;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Close Button for Fullscreen *\/\r\n .close-btn {\r\n position: fixed;\r\n top: 30px;\r\n right: 30px;\r\n width: 50px;\r\n height: 50px;\r\n background: rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50%;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 1.5rem;\r\n color: white;\r\n font-weight: bold;\r\n z-index: 1001;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .close-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: scale(1.1);\r\n }\r\n\r\n .gallery-item.fullscreen ~ .close-btn {\r\n display: flex;\r\n }\r\n\r\n \/* Controls *\/\r\n .controls {\r\n text-align: center;\r\n margin-top: 50px;\r\n }\r\n\r\n .control-hint {\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(15px);\r\n border-radius: 30px;\r\n padding: 18px 35px;\r\n display: inline-block;\r\n margin: 12px;\r\n font-size: 1rem;\r\n color: rgba(255,255,255,0.95);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n font-weight: 400;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Loading animation *\/\r\n .loading-animation {\r\n text-align: center;\r\n padding: 50px;\r\n }\r\n\r\n .loader {\r\n width: 60px;\r\n height: 60px;\r\n border: 4px solid rgba(255, 107, 107, 0.3);\r\n border-top: 4px solid #ff6b6b;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 20px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .gallery-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .control-hint {\r\n font-size: 0.9rem;\r\n padding: 15px 25px;\r\n margin: 8px;\r\n }\r\n\r\n .gallery-item.fullscreen .gallery-overlay {\r\n width: 90%;\r\n max-width: 350px;\r\n }\r\n\r\n .close-btn {\r\n top: 20px;\r\n right: 20px;\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .gallery-grid {\r\n grid-template-columns: 1fr;\r\n gap: 15px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .control-hint {\r\n display: block;\r\n margin: 8px auto;\r\n font-size: 0.85rem;\r\n padding: 12px 20px;\r\n }\r\n\r\n .gallery-item.fullscreen .gallery-overlay {\r\n bottom: 30px;\r\n width: 90%;\r\n max-width: 300px;\r\n }\r\n\r\n .close-btn {\r\n top: 15px;\r\n right: 15px;\r\n width: 35px;\r\n height: 35px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n \/* Fade in animation *\/\r\n .fade-in {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .fade-in.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header fade-in\">\r\n <h1>\u00c7al\u0131\u015fmalar\u0131m\u0131z<\/h1>\r\n <p>Profesyonel baca temizleme hizmetlerimizden \u00f6rnekler. 3D galeriyi ke\u015ffedin!<\/p>\r\n <\/div>\r\n\r\n <div class=\"loading-animation\" id=\"loading\">\r\n <div class=\"loader\"><\/div>\r\n <p>3D Galeri y\u00fckleniyor...<\/p>\r\n <\/div>\r\n\r\n <div class=\"gallery-container\" id=\"galleryContainer\" style=\"display: none;\">\r\n <div class=\"gallery-grid\" id=\"galleryGrid\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"close-btn\" id=\"closeBtn\">\u00d7<\/div>\r\n\r\n <div class=\"controls fade-in\">\r\n <div class=\"control-hint\">\ud83d\uddb1\ufe0f Resmin \u00fczerine gelip t\u0131klay\u0131n<\/div>\r\n <div class=\"control-hint\">\ud83d\udd0d Tam ekran g\u00f6r\u00fcnt\u00fcleme<\/div>\r\n <div class=\"control-hint\">\u274c ESC veya X ile kapat\u0131n<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Gallery data\r\n const galleryData = [\r\n {\r\n id: 1,\r\n image: \"1.jpg\",\r\n title: \"Baca Temizlik Projesi #1\",\r\n description: \"Profesyonel ekipmanlarla detayl\u0131 baca temizli\u011fi ve g\u00fcvenli hizmet anlay\u0131\u015f\u0131\"\r\n },\r\n {\r\n id: 2,\r\n image: \"2.jpg\",\r\n title: \"Baca Temizlik Projesi #2\",\r\n description: \"G\u00fcvenli ve etkili temizlik hizmeti ile m\u00fckemmel sonu\u00e7lar\"\r\n },\r\n {\r\n id: 3,\r\n image: \"3.jpg\",\r\n title: \"Baca Temizlik Projesi #3\",\r\n description: \"Uzman ekibimizle kaliteli hizmet ve titiz \u00e7al\u0131\u015fma anlay\u0131\u015f\u0131\"\r\n },\r\n {\r\n id: 4,\r\n image: \"4.webp\",\r\n title: \"Baca Temizlik Projesi #4\",\r\n description: \"Modern tekniklerle m\u00fckemmel sonu\u00e7lar ve m\u00fc\u015fteri memnuniyeti\"\r\n },\r\n {\r\n id: 5,\r\n image: \"5.jpg\",\r\n title: \"Baca Temizlik Projesi #5\",\r\n description: \"Titiz \u00e7al\u0131\u015fma ve \u00f6zenli hizmet ile g\u00fcvenilir yakla\u015f\u0131m\"\r\n },\r\n {\r\n id: 6,\r\n image: \"6.jpg\",\r\n title: \"Baca Temizlik Projesi #6\",\r\n description: \"G\u00fcvenilir ve profesyonel yakla\u015f\u0131m ile kaliteli sonu\u00e7lar\"\r\n },\r\n {\r\n id: 7,\r\n image: \"7.jpg\",\r\n title: \"Baca Temizlik Projesi #7\",\r\n description: \"Detayl\u0131 inceleme ve temizlik ile m\u00fckemmel hizmet kalitesi\"\r\n },\r\n {\r\n id: 8,\r\n image: \"8.jpg\",\r\n title: \"Baca Temizlik Projesi #8\",\r\n description: \"Kaliteli hizmet anlay\u0131\u015f\u0131 ve profesyonel ekipman kullan\u0131m\u0131\"\r\n },\r\n {\r\n id: 9,\r\n image: \"9.jpg\",\r\n title: \"Baca Temizlik Projesi #9\",\r\n description: \"M\u00fckemmel sonu\u00e7lar ve m\u00fc\u015fteri memnuniyeti \u00f6nceli\u011fimiz\"\r\n }\r\n ];\r\n\r\n \/\/ Base URL for images\r\n const baseImageURL = \"https:\/\/aykabacatemizleme.com.tr\/galeri\/\";\r\n \r\n \/\/ Gallery variables\r\n let currentFullscreenItem = null;\r\n\r\n \/\/ Initialize Gallery\r\n function initGallery() {\r\n const loading = document.getElementById('loading');\r\n const galleryContainer = document.getElementById('galleryContainer');\r\n \r\n setTimeout(() => {\r\n loading.style.display = 'none';\r\n galleryContainer.style.display = 'block';\r\n \r\n const galleryGrid = document.getElementById('galleryGrid');\r\n \r\n \/\/ Create gallery items\r\n galleryData.forEach((item, index) => {\r\n const galleryItem = createGalleryItem(item, index);\r\n galleryGrid.appendChild(galleryItem);\r\n });\r\n \r\n \/\/ Add event listeners\r\n addEventListeners();\r\n \r\n \/\/ Trigger animations\r\n setTimeout(() => {\r\n document.querySelector('.header').classList.add('visible');\r\n document.querySelector('.controls').classList.add('visible');\r\n \r\n \/\/ Animate gallery items with stagger\r\n const items = document.querySelectorAll('.gallery-item');\r\n items.forEach((item, index) => {\r\n setTimeout(() => {\r\n item.style.opacity = '1';\r\n item.style.transform = 'translateY(0)';\r\n }, index * 100);\r\n });\r\n }, 200);\r\n \r\n }, 1500);\r\n }\r\n\r\n \/\/ Create gallery item\r\n function createGalleryItem(data, index) {\r\n const item = document.createElement('div');\r\n item.className = 'gallery-item fade-in';\r\n item.dataset.index = index;\r\n item.style.opacity = '0';\r\n item.style.transform = 'translateY(30px)';\r\n item.style.transition = 'all 0.6s ease';\r\n \r\n item.innerHTML = `\r\n <img decoding=\"async\" src=\"${baseImageURL + data.image}\" alt=\"${data.title}\" loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <h3>${data.title}<\/h3>\r\n <p>${data.description}<\/p>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Add click event for fullscreen\r\n item.addEventListener('click', () => openFullscreen(item));\r\n \r\n return item;\r\n }\r\n\r\n \/\/ Add event listeners\r\n function addEventListeners() {\r\n \/\/ Close button\r\n const closeBtn = document.getElementById('closeBtn');\r\n closeBtn.addEventListener('click', closeFullscreen);\r\n \r\n \/\/ Keyboard events\r\n document.addEventListener('keydown', handleKeyDown);\r\n \r\n \/\/ Click outside to close\r\n document.addEventListener('click', handleOutsideClick);\r\n }\r\n\r\n \/\/ Open fullscreen\r\n function openFullscreen(item) {\r\n if (currentFullscreenItem) return;\r\n \r\n currentFullscreenItem = item;\r\n item.classList.add('fullscreen');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Show close button\r\n const closeBtn = document.getElementById('closeBtn');\r\n closeBtn.style.display = 'flex';\r\n \r\n \/\/ Prevent body scroll\r\n document.addEventListener('wheel', preventScroll, { passive: false });\r\n document.addEventListener('touchmove', preventScroll, { passive: false });\r\n }\r\n\r\n \/\/ Close fullscreen\r\n function closeFullscreen() {\r\n if (!currentFullscreenItem) return;\r\n \r\n currentFullscreenItem.classList.remove('fullscreen');\r\n currentFullscreenItem = null;\r\n document.body.style.overflow = 'auto';\r\n \r\n \/\/ Hide close button\r\n const closeBtn = document.getElementById('closeBtn');\r\n closeBtn.style.display = 'none';\r\n \r\n \/\/ Re-enable body scroll\r\n document.removeEventListener('wheel', preventScroll);\r\n document.removeEventListener('touchmove', preventScroll);\r\n }\r\n\r\n \/\/ Prevent scroll when fullscreen is open\r\n function preventScroll(e) {\r\n if (currentFullscreenItem) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n \/\/ Handle keyboard events\r\n function handleKeyDown(e) {\r\n if (e.key === 'Escape' && currentFullscreenItem) {\r\n closeFullscreen();\r\n }\r\n }\r\n\r\n \/\/ Handle click outside\r\n function handleOutsideClick(e) {\r\n if (currentFullscreenItem && \r\n e.target === currentFullscreenItem && \r\n !e.target.querySelector('img').contains(e.target)) {\r\n closeFullscreen();\r\n }\r\n }\r\n\r\n \/\/ Scroll animations\r\n function handleScrollAnimations() {\r\n const elements = document.querySelectorAll('.fade-in');\r\n elements.forEach(element => {\r\n const elementTop = element.getBoundingClientRect().top;\r\n const elementVisible = 150;\r\n \r\n if (elementTop < window.innerHeight - elementVisible) {\r\n element.classList.add('visible');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Auto-rotate (optional)\r\n function startAutoRotate() {\r\n setInterval(() => {\r\n if (!isMouseDown && !carousel.classList.contains('dragging')) {\r\n goToNextSlide();\r\n }\r\n }, 5000);\r\n }\r\n\r\n \/\/ Event listeners\r\n window.addEventListener('scroll', handleScrollAnimations);\r\n window.addEventListener('resize', handleScrollAnimations);\r\n\r\n \/\/ Initialize when page loads\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initGallery();\r\n handleScrollAnimations();\r\n });\r\n\r\n \/\/ Error handling for images\r\n document.addEventListener('error', function(e) {\r\n if (e.target.tagName === 'IMG') {\r\n console.log('Resim y\u00fcklenemedi:', e.target.src);\r\n e.target.style.opacity = '0.3';\r\n }\r\n }, true);\r\n <\/script>\r\n<\/body>\r\n<\/html> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00c7al\u0131\u015fmalar\u0131m\u0131z – Ayka Baca Temizleme \u00c7al\u0131\u015fmalar\u0131m\u0131z Profesyonel baca temizleme hizmetlerimizden \u00f6rnekler. 3D galeriyi ke\u015ffedin! 3D Galeri y\u00fckleniyor… \u00d7 \ud83d\uddb1\ufe0f Resmin \u00fczerine gelip t\u0131klay\u0131n \ud83d\udd0d Tam ekran g\u00f6r\u00fcnt\u00fcleme \u274c ESC veya X ile kapat\u0131n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":22,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/415\/revisions"}],"predecessor-version":[{"id":2054,"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/415\/revisions\/2054"}],"wp:attachment":[{"href":"https:\/\/aykabacatemizleme.com.tr\/index.php\/wp-json\/wp\/v2\/media?parent=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}