ATF \u015eehir Afi\u015fi Olu\u015fturucu<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700;900&family=Outfit:wght@200;300;400;500;600;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n :root {\n --atf-bg: #f5f7fa;\n --atf-surface: #ffffff;\n --atf-red: #e30613;\n --text-main: #1a1a1a;\n --text-muted: #4b5563;\n --border-color: rgba(0, 0, 0, 0.1);\n --transition: 0.3s ease;\n }\n\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\n \n \/* Sa\u011fa sola kaymay\u0131 k\u00f6kten engellemek i\u00e7in *\/\n html, body {\n overflow-x: hidden !important;\n max-width: 100vw;\n }\n\n body {\n background-color: var(--atf-bg);\n color: var(--text-main);\n font-family: 'Outfit', sans-serif;\n margin: 0;\n padding: 0;\n min-height: 100vh;\n }\n\n h1, h2, .serif { \n font-family: 'Cinzel', serif; \n letter-spacing: 0.05em; \n text-align: center;\n margin: 0;\n }\n\n .header {\n padding: 50px 20px 30px;\n text-align: center;\n width: 100%;\n }\n\n .header h1 {\n font-size: clamp(1.6rem, 5vw, 2.8rem);\n line-height: 1.2;\n }\n\n .header h1 span { color: var(--atf-red); }\n\n .divider { \n width: 60px; height: 3px; background: var(--atf-red); margin: 20px auto; \n }\n\n .header p {\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n font-size: clamp(14px, 3vw, 16px);\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500 GALLERY SECTION \u2500\u2500\u2500\u2500\u2500 *\/\n .gallery-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px 5% 80px;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));\n gap: 25px;\n }\n\n .gallery-card {\n background: var(--atf-surface);\n border: 1px solid var(--border-color);\n padding: 15px;\n text-align: center;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n cursor: pointer;\n }\n\n .gallery-card:hover {\n border-color: var(--atf-red);\n box-shadow: 0 10px 30px rgba(227, 6, 19, 0.08);\n transform: translateY(-5px);\n }\n\n .card-image {\n width: 100%;\n aspect-ratio: 1 \/ 1;\n background: #e5e7eb;\n margin-bottom: 15px;\n overflow: hidden;\n }\n\n .card-image img {\n width: 100%;\n height: 100%;\n object-fit: contain; \n transition: transform 0.6s ease;\n }\n\n .gallery-card:hover .card-image img {\n transform: scale(1.03);\n }\n\n .gallery-card h3 {\n font-size: 1.2rem;\n margin-bottom: 15px;\n letter-spacing: 2px;\n }\n\n .btn-edit {\n background: transparent;\n color: var(--text-main);\n border: 1px solid var(--border-color);\n padding: 12px 0;\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--transition);\n width: 100%;\n cursor: pointer;\n }\n\n .gallery-card:hover .btn-edit {\n background: var(--atf-red);\n color: #fff;\n border-color: var(--atf-red);\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500 EDITOR MODAL \u2500\u2500\u2500\u2500\u2500 *\/\n .editor-overlay {\n position: fixed;\n top: 0; left: 0; width: 100vw; height: 100vh;\n background: rgba(0,0,0,0.85);\n backdrop-filter: blur(5px);\n z-index: 999999 !important; \/* WP Men\u00fcs\u00fcn\u00fcn \u00fcst\u00fcne \u00e7\u0131kmas\u0131 i\u00e7in *\/\n display: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n }\n\n .editor-overlay.active {\n display: flex;\n align-items: flex-start; \n justify-content: center;\n opacity: 1;\n padding: 20px; \n }\n\n .editor-modal {\n background: var(--atf-bg);\n width: 100%;\n max-width: 1200px;\n overflow-x: hidden;\n margin: auto;\n border-radius: 4px;\n display: flex;\n flex-wrap: wrap;\n box-shadow: 0 25px 50px rgba(0,0,0,0.5);\n position: relative;\n }\n\n \/* Kapatma Butonu *\/\n .btn-close {\n position: fixed;\n top: 25px;\n right: 35px;\n background: var(--atf-red);\n color: #fff;\n border: none;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n font-size: 24px;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000000;\n transition: transform 0.2s;\n }\n .btn-close:hover { transform: scale(1.1); background: #b5050f; }\n\n \/* Sol: Canvas\/Workspace *\/\n .editor-workspace {\n flex: 1.5;\n min-width: 300px;\n background: #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 30px;\n border-right: 1px solid var(--border-color);\n }\n\n .workspace-container {\n position: relative;\n width: 100%;\n max-width: 550px;\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n overflow: hidden;\n background: #fff;\n }\n\n .workspace-container img.bg-image {\n width: 100%;\n display: block;\n pointer-events: none; \n }\n\n .draggable-item {\n position: absolute;\n cursor: move;\n touch-action: none; \n border: 2px dashed transparent;\n transition: border 0.2s;\n user-select: none;\n }\n\n .draggable-item:hover, .draggable-item:active {\n border: 2px dashed rgba(255,255,255,0.8);\n box-shadow: 0 0 10px rgba(0,0,0,0.5);\n }\n\n #dragText {\n color: #fff;\n font-family: 'Outfit', sans-serif;\n font-weight: 800;\n text-shadow: 2px 2px 8px rgba(0,0,0,0.9);\n white-space: nowrap;\n top: 10%;\n left: 5%;\n padding: 5px;\n font-size: 24px;\n }\n\n #dragLogo {\n width: 120px;\n top: 75%;\n left: 75%;\n display: none;\n }\n\n \/* Sa\u011f: Ara\u00e7lar *\/\n .editor-tools {\n flex: 1;\n min-width: 300px;\n padding: 40px 30px;\n background: var(--atf-surface);\n display: flex;\n flex-direction: column;\n gap: 25px;\n }\n\n .tool-group label {\n display: block;\n font-weight: 700;\n font-size: 13px;\n text-transform: uppercase;\n margin-bottom: 10px;\n color: var(--text-main);\n }\n\n .tool-group input[type=\"text\"] {\n width: 100%;\n padding: 12px 15px;\n border: 1px solid var(--border-color);\n background: var(--atf-bg);\n font-family: 'Outfit', sans-serif;\n font-size: 16px; \n outline: none;\n border-radius: 0;\n transition: 0.3s;\n }\n .tool-group input[type=\"text\"]:focus { border-color: var(--atf-red); }\n\n .tool-group input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n accent-color: var(--atf-red);\n }\n\n .file-upload {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 15px;\n border: 2px dashed var(--border-color);\n background: var(--atf-bg);\n cursor: pointer;\n text-align: center;\n transition: 0.3s;\n }\n .file-upload:hover { border-color: var(--atf-red); }\n .file-upload input[type=\"file\"] {\n position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer;\n }\n .file-upload-text { font-size: 13px; font-weight: 500; color: var(--text-muted); pointer-events: none; }\n\n .action-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }\n\n .btn {\n padding: 15px;\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n }\n\n .btn-dl { background: var(--atf-bg); color: var(--text-main); border: 1px solid var(--text-main); }\n .btn-dl:hover { background: var(--text-main); color: #fff; }\n .btn-share { background: var(--atf-red); color: #fff; }\n .btn-share:hover { background: #b5050f; }\n\n .loading-text {\n text-align: center; color: var(--atf-red); font-weight: bold; margin-top: 10px; display: none;\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500 MOB\u0130L RESPONSIVE (G\u00dc\u00c7LEND\u0130R\u0130LD\u0130) \u2500\u2500\u2500\u2500\u2500 *\/\n @media (max-width: 768px) {\n .editor-overlay.active {\n padding: 0; \n display: block; \/* Mobilde scroll sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in flex'i iptal edip block'a ge\u00e7tik *\/\n }\n .editor-modal { \n margin: 0; \n width: 100vw; \n height: auto;\n min-height: 100vh;\n border-radius: 0;\n display: flex;\n flex-direction: column !important; \/* Yanyana gelmesini kesinlikle engeller, alt alta koyar *\/\n flex-wrap: nowrap;\n }\n .btn-close {\n top: 15px;\n right: 15px;\n width: 45px;\n height: 45px;\n font-size: 20px;\n }\n .editor-workspace {\n width: 100% !important;\n flex: none;\n padding: 70px 15px 20px; \n border-right: none;\n border-bottom: 1px solid var(--border-color);\n }\n .editor-tools {\n width: 100% !important;\n flex: none;\n padding: 25px 20px 40px; \n }\n .action-buttons {\n margin-top: 25px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"header\">\n <h1>ATF <span>SOSYAL MEDYA<\/span> OLU\u015eTURUCU<\/h1>\n <div class=\"divider\"><\/div>\n <p>Afi\u015fini haz\u0131rlamak istedi\u011finiz \u015fehri se\u00e7in. Kendi metninizi yaz\u0131p logonuzu y\u00fckleyin; g\u00f6rselleri s\u00fcr\u00fckleyerek istedi\u011finiz konuma yerle\u015ftirin.<\/p>\n <\/div>\n\n \n <div class=\"gallery-container\">\n <div class=\"gallery-grid\" id=\"galleryGrid\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"editor-overlay\" id=\"editorOverlay\">\n <button class=\"btn-close\" onclick=\"closeEditor()\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"editor-modal\">\n \n \n <div class=\"editor-workspace\">\n <div class=\"workspace-container\" id=\"workspace\">\n <img decoding=\"async\" id=\"bgImg\" class=\"bg-image\" src=\"\" crossorigin=\"anonymous\">\n \n \n <div id=\"dragText\" class=\"draggable-item\">\u00d6ZEL MESAJINIZ<\/div>\n \n \n <img decoding=\"async\" id=\"dragLogo\" class=\"draggable-item\" src=\"\">\n <\/div>\n <\/div>\n\n \n <div class=\"editor-tools\">\n <h2 class=\"serif\" style=\"text-align:left; font-size: 1.5rem; color: var(--atf-red);\">D\u00fczenleyici<\/h2>\n \n <div class=\"tool-group\">\n <label><i class=\"fas fa-font\"><\/i> Afi\u015f Metni<\/label>\n <input type=\"text\" id=\"customTextInput\" placeholder=\"Fuar mesaj\u0131n\u0131z\u0131 buraya yaz\u0131n...\" maxlength=\"50\" oninput=\"updateText()\">\n <\/div>\n\n <div class=\"tool-group\">\n <label>Metin Boyutu<\/label>\n <input type=\"range\" id=\"textSizeSlider\" min=\"12\" max=\"60\" value=\"24\" oninput=\"updateTextSize()\">\n <\/div>\n\n <div class=\"tool-group\" style=\"margin-top:10px;\">\n <label><i class=\"fas fa-image\"><\/i> Kurumsal Logo Y\u00fckle (PNG \u00f6nerilir)<\/label>\n <div class=\"file-upload\">\n <input type=\"file\" id=\"logoUploadInput\" accept=\"image\/png, image\/jpeg, image\/webp\">\n <div class=\"file-upload-text\" id=\"fileNameDisplay\">\n T\u0131klay\u0131n veya s\u00fcr\u00fckleyin\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"tool-group\" id=\"logoSizeGroup\" style=\"display:none;\">\n <label>Logo Boyutu<\/label>\n <input type=\"range\" id=\"logoSizeSlider\" min=\"50\" max=\"300\" value=\"120\" oninput=\"updateLogoSize()\">\n <\/div>\n\n <p style=\"font-size: 11px; color: var(--text-muted); line-height: 1.5;\">\n <i class=\"fas fa-info-circle\"><\/i> Ekranda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz yaz\u0131ya ve logoya bas\u0131l\u0131 tutarak <b>s\u00fcr\u00fckleyip istedi\u011finiz yere b\u0131rakabilirsiniz.<\/b>\n <\/p>\n\n <div class=\"action-buttons\">\n <div class=\"loading-text\" id=\"loadingIndicator\">HD G\u00f6r\u00fcnt\u00fc Olu\u015fturuluyor, Bekleyin...<\/div>\n <button class=\"btn btn-dl\" onclick=\"exportPoster('download')\">\n <i class=\"fas fa-download\"><\/i> Cihaz\u0131ma Y\u00fcksek Kalitede \u0130ndir\n <\/button>\n <button class=\"btn btn-share\" onclick=\"exportPoster('share')\">\n <i class=\"fab fa-instagram\"><\/i> Instagram \/ WhatsApp Payla\u015f\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const baseUrl = \"https:\/\/antalyaturizmfuari.com\/wp-content\/uploads\/2026\/05\/\";\n const cities = [\n { name: \"ADANA\", file: \"ADANA.jpg\" },\n { name: \"ALA\u00c7ATI\", file: \"ALACATI-scaled.jpg\" },\n { name: \"ALANYA\", file: \"ALANYA.jpg\" },\n { name: \"ANTALYA\", file: \"ANTALYA.jpg\" },\n { name: \"BALIKES\u0130R\", file: \"BALIKESIR.jpg\" },\n { name: \"BODRUM\", file: \"BODRUM-scaled.jpg\" },\n { name: \"DAT\u00c7A\", file: \"DATCA.jpg\" },\n { name: \"DEN\u0130ZL\u0130\", file: \"DENIZLI.jpg\" },\n { name: \"D\u0130D\u0130M\", file: \"DIDIM.jpg\" },\n { name: \"FETH\u0130YE\", file: \"FETHIYE.jpg\" },\n { name: \"KAPADOKYA\", file: \"KAPADOKYA.jpg\" },\n { name: \"KEMER\", file: \"KEMER.jpg\" },\n { name: \"KONYA\", file: \"KONYA.jpg\" },\n { name: \"MANAVGAT\", file: \"MANAVGAT.jpg\" },\n { name: \"MAN\u0130SA\", file: \"MANISA.jpg\" },\n { name: \"MARMAR\u0130S\", file: \"MARMARIS.jpg\" },\n { name: \"R\u0130ZE\", file: \"RIZE.jpg\" },\n { name: \"S\u0130DE\", file: \"SIDE.jpg\" },\n { name: \"TRABZON\", file: \"TRABZON.jpg\" }\n ];\n\n let selectedCityName = \"\";\n\n const galleryGrid = document.getElementById('galleryGrid');\n cities.forEach(city => {\n const card = document.createElement('div');\n card.className = 'gallery-card';\n card.onclick = () => openEditor(city);\n card.innerHTML = `\n <div class=\"card-image\">\n <img decoding=\"async\" src=\"${baseUrl}${city.file}\" alt=\"${city.name}\" loading=\"lazy\">\n <\/div>\n <h3>${city.name}<\/h3>\n <button class=\"btn-edit\"><i class=\"fas fa-pencil-alt\"><\/i> D\u00fczenle \/ Payla\u015f<\/button>\n `;\n galleryGrid.appendChild(card);\n });\n\n const overlay = document.getElementById('editorOverlay');\n const bgImg = document.getElementById('bgImg');\n const dragText = document.getElementById('dragText');\n const dragLogo = document.getElementById('dragLogo');\n\n function openEditor(city) {\n selectedCityName = city.name.replace(\/ \/g, '_');\n bgImg.src = baseUrl + city.file;\n \n document.getElementById('customTextInput').value = \"\";\n dragText.textContent = \"\";\n document.getElementById('textSizeSlider').value = 24;\n dragText.style.fontSize = \"24px\";\n dragText.style.left = \"5%\"; dragText.style.top = \"10%\";\n\n document.getElementById('logoUploadInput').value = \"\";\n dragLogo.src = \"\";\n dragLogo.style.display = \"none\";\n document.getElementById('logoSizeGroup').style.display = \"none\";\n document.getElementById('fileNameDisplay').textContent = \"T\u0131klay\u0131n veya s\u00fcr\u00fckleyin\";\n dragLogo.style.left = \"75%\"; dragLogo.style.top = \"75%\";\n\n overlay.classList.add('active');\n document.body.style.overflow = \"hidden\"; \/\/ Alt katman scroll olmas\u0131n\n }\n\n function closeEditor() {\n overlay.classList.remove('active');\n document.body.style.overflow = \"auto\";\n }\n\n \/\/ D\u0131\u015f\u0131na t\u0131klay\u0131nca kapans\u0131n (Masa\u00fcst\u00fc i\u00e7in)\n overlay.addEventListener('click', function(e) {\n if (e.target === overlay) {\n closeEditor();\n }\n });\n\n function updateText() {\n dragText.textContent = document.getElementById('customTextInput').value;\n }\n\n function updateTextSize() {\n dragText.style.fontSize = document.getElementById('textSizeSlider').value + \"px\";\n }\n\n function updateLogoSize() {\n dragLogo.style.width = document.getElementById('logoSizeSlider').value + \"px\";\n }\n\n document.getElementById('logoUploadInput').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if (file) {\n document.getElementById('fileNameDisplay').textContent = file.name;\n const reader = new FileReader();\n reader.onload = function(event) {\n dragLogo.src = event.target.result;\n dragLogo.style.display = \"block\";\n document.getElementById('logoSizeGroup').style.display = \"block\";\n }\n reader.readAsDataURL(file);\n }\n });\n\n \/\/ S\u00fcr\u00fckle b\u0131rak mant\u0131\u011f\u0131\n function makeDraggable(element) {\n let isDragging = false;\n let startX, startY, initialLeft, initialTop;\n\n element.addEventListener('pointerdown', (e) => {\n isDragging = true;\n startX = e.clientX;\n startY = e.clientY;\n \n const rect = element.getBoundingClientRect();\n const parentRect = element.parentElement.getBoundingClientRect();\n initialLeft = rect.left - parentRect.left;\n initialTop = rect.top - parentRect.top;\n \n element.setPointerCapture(e.pointerId);\n e.preventDefault();\n });\n\n element.addEventListener('pointermove', (e) => {\n if (!isDragging) return;\n const dx = e.clientX - startX;\n const dy = e.clientY - startY;\n const parentRect = element.parentElement.getBoundingClientRect();\n\n let newLeft = initialLeft + dx;\n let newTop = initialTop + dy;\n\n newLeft = Math.max(0, Math.min(newLeft, parentRect.width - element.offsetWidth));\n newTop = Math.max(0, Math.min(newTop, parentRect.height - element.offsetHeight));\n\n element.style.left = (newLeft \/ parentRect.width * 100) + '%';\n element.style.top = (newTop \/ parentRect.height * 100) + '%';\n });\n\n element.addEventListener('pointerup', (e) => {\n isDragging = false;\n element.releasePointerCapture(e.pointerId);\n });\n }\n\n makeDraggable(dragText);\n makeDraggable(dragLogo);\n\n \/\/ HD Resim \u00c7\u0131kt\u0131s\u0131 Alma\n async function exportPoster(action) {\n const indicator = document.getElementById('loadingIndicator');\n indicator.style.display = 'block';\n \n await new Promise(r => setTimeout(r, 100));\n\n try {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const workspace = document.getElementById('workspace');\n\n canvas.width = bgImg.naturalWidth;\n canvas.height = bgImg.naturalHeight;\n\n const wsRect = workspace.getBoundingClientRect();\n const scaleX = canvas.width \/ wsRect.width;\n const scaleY = canvas.height \/ wsRect.height;\n\n ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);\n\n if (dragLogo.style.display !== \"none\" && dragLogo.src) {\n const logoRect = dragLogo.getBoundingClientRect();\n const lx = (logoRect.left - wsRect.left) * scaleX;\n const ly = (logoRect.top - wsRect.top) * scaleY;\n const lw = logoRect.width * scaleX;\n const lh = logoRect.height * scaleY;\n ctx.drawImage(dragLogo, lx, ly, lw, lh);\n }\n\n if (dragText.textContent.trim() !== \"\") {\n const textRect = dragText.getBoundingClientRect();\n const tx = (textRect.left - wsRect.left) * scaleX;\n const ty = (textRect.top - wsRect.top) * scaleY;\n\n const computedStyle = window.getComputedStyle(dragText);\n const fontSizePx = parseFloat(computedStyle.fontSize);\n const canvasFontSize = fontSizePx * scaleY;\n\n ctx.font = `800 ${canvasFontSize}px 'Outfit', sans-serif`;\n ctx.fillStyle = \"#ffffff\";\n ctx.textBaseline = \"top\";\n \n ctx.shadowColor = \"rgba(0, 0, 0, 0.9)\";\n ctx.shadowBlur = 15 * scaleY;\n ctx.shadowOffsetX = 3 * scaleX;\n ctx.shadowOffsetY = 3 * scaleY;\n\n ctx.fillText(dragText.textContent, tx, ty);\n ctx.shadowColor = \"transparent\";\n }\n\n canvas.toBlob(async (blob) => {\n if(!blob) throw new Error(\"Blob olu\u015fturulamad\u0131.\");\n \n const fileName = `ATF_${selectedCityName}_Afis.jpg`;\n\n if (action === 'share') {\n const file = new File([blob], fileName, { type: 'image\/jpeg' });\n if (navigator.canShare && navigator.canShare({ files: [file] })) {\n try {\n await navigator.share({\n files: [file],\n title: 'ATF Afi\u015f',\n text: 'Antalya Ticaret Fuar\u0131 Afi\u015fim'\n });\n } catch (e) {\n console.log(\"Payla\u015f\u0131m iptal edildi.\");\n }\n } else {\n alert(\"Cihaz\u0131n\u0131z do\u011frudan payla\u015f\u0131ma izin vermiyor. G\u00f6rsel indiriliyor...\");\n triggerDownload(blob, fileName);\n }\n } else {\n triggerDownload(blob, fileName);\n }\n indicator.style.display = 'none';\n }, 'image\/jpeg', 0.95);\n\n } catch (err) {\n console.error(err);\n alert(\"G\u00fcvenlik duvar\u0131 (CORS) nedeniyle g\u00f6rsel olu\u015fturulamad\u0131.\");\n indicator.style.display = 'none';\n }\n }\n\n function triggerDownload(blob, filename) {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n <\/script>\n<\/body>\n<\/html>\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>ATF \u015eehir Afi\u015fi Olu\u015fturucu ATF SOSYAL MEDYA OLU\u015eTURUCU Afi\u015fini haz\u0131rlamak istedi\u011finiz \u015fehri se\u00e7in. Kendi metninizi yaz\u0131p logonuzu y\u00fckleyin; g\u00f6rselleri s\u00fcr\u00fckleyerek istedi\u011finiz konuma yerle\u015ftirin. \u00d6ZEL MESAJINIZ D\u00fczenleyici Afi\u015f Metni Metin Boyutu Kurumsal Logo Y\u00fckle (PNG \u00f6nerilir) T\u0131klay\u0131n veya s\u00fcr\u00fckleyin Logo Boyutu Ekranda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz yaz\u0131ya ve logoya bas\u0131l\u0131 tutarak s\u00fcr\u00fckleyip istedi\u011finiz yere b\u0131rakabilirsiniz. HD G\u00f6r\u00fcnt\u00fc Olu\u015fturuluyor, Bekleyin… […]<\/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-2595","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages\/2595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/comments?post=2595"}],"version-history":[{"count":30,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages\/2595\/revisions"}],"predecessor-version":[{"id":2689,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages\/2595\/revisions\/2689"}],"wp:attachment":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/media?parent=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n ATF \u015eehir Afi\u015fi Olu\u015fturucu<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700;900&family=Outfit:wght@200;300;400;500;600;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n :root {\n --atf-bg: #f5f7fa;\n --atf-surface: #ffffff;\n --atf-red: #e30613;\n --text-main: #1a1a1a;\n --text-muted: #4b5563;\n --border-color: rgba(0, 0, 0, 0.1);\n --transition: 0.3s ease;\n }\n\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\n \n \/* Sa\u011fa sola kaymay\u0131 k\u00f6kten engellemek i\u00e7in *\/\n html, body {\n overflow-x: hidden !important;\n max-width: 100vw;\n }\n\n body {\n background-color: var(--atf-bg);\n color: var(--text-main);\n font-family: 'Outfit', sans-serif;\n margin: 0;\n padding: 0;\n min-height: 100vh;\n }\n\n h1, h2, .serif { \n font-family: 'Cinzel', serif; \n letter-spacing: 0.05em; \n text-align: center;\n margin: 0;\n }\n\n .header {\n padding: 50px 20px 30px;\n text-align: center;\n width: 100%;\n }\n\n .header h1 {\n font-size: clamp(1.6rem, 5vw, 2.8rem);\n line-height: 1.2;\n }\n\n .header h1 span { color: var(--atf-red); }\n\n .divider { \n width: 60px; height: 3px; background: var(--atf-red); margin: 20px auto; \n }\n\n .header p {\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n font-size: clamp(14px, 3vw, 16px);\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500 GALLERY SECTION \u2500\u2500\u2500\u2500\u2500 *\/\n .gallery-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px 5% 80px;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));\n gap: 25px;\n }\n\n .gallery-card {\n background: var(--atf-surface);\n border: 1px solid var(--border-color);\n padding: 15px;\n text-align: center;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n cursor: pointer;\n }\n\n .gallery-card:hover {\n border-color: var(--atf-red);\n box-shadow: 0 10px 30px rgba(227, 6, 19, 0.08);\n transform: translateY(-5px);\n }\n\n .card-image {\n width: 100%;\n aspect-ratio: 1 \/ 1;\n background: #e5e7eb;\n margin-bottom: 15px;\n overflow: hidden;\n }\n\n .card-image img {\n width: 100%;\n height: 100%;\n object-fit: contain; \n transition: transform 0.6s ease;\n }\n\n .gallery-card:hover .card-image img {\n transform: scale(1.03);\n }\n\n .gallery-card h3 {\n font-size: 1.2rem;\n margin-bottom: 15px;\n letter-spacing: 2px;\n }\n\n .btn-edit {\n background: transparent;\n color: var(--text-main);\n border: 1px solid var(--border-color);\n padding: 12px 0;\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--transition);\n width: 100%;\n cursor: pointer;\n }\n\n .gallery-card:hover .btn-edit {\n background: var(--atf-red);\n color: #fff;\n border-color: var(--atf-red);\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500 EDITOR MODAL \u2500\u2500\u2500\u2500\u2500 *\/\n .editor-overlay {\n position: fixed;\n top: 0; left: 0; width: 100vw; height: 100vh;\n background: rgba(0,0,0,0.85);\n backdrop-filter: blur(5px);\n z-index: 999999 !important; \/* WP Men\u00fcs\u00fcn\u00fcn \u00fcst\u00fcne \u00e7\u0131kmas\u0131 i\u00e7in *\/\n display: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n }\n\n .editor-overlay.active {\n display: flex;\n align-items: flex-start; \n justify-content: center;\n opacity: 1;\n padding: 20px; \n }\n\n .editor-modal {\n background: var(--atf-bg);\n width: 100%;\n max-width: 1200px;\n overflow-x: hidden;\n margin: auto;\n border-radius: 4px;\n display: flex;\n flex-wrap: wrap;\n box-shadow: 0 25px 50px rgba(0,0,0,0.5);\n position: relative;\n }\n\n \/* Kapatma Butonu *\/\n .btn-close {\n position: fixed;\n top: 25px;\n right: 35px;\n background: var(--atf-red);\n color: #fff;\n border: none;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n font-size: 24px;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000000;\n transition: transform 0.2s;\n }\n .btn-close:hover { transform: scale(1.1); background: #b5050f; }\n\n \/* Sol: Canvas\/Workspace *\/\n .editor-workspace {\n flex: 1.5;\n min-width: 300px;\n background: #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 30px;\n border-right: 1px solid var(--border-color);\n }\n\n .workspace-container {\n position: relative;\n width: 100%;\n max-width: 550px;\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n overflow: hidden;\n background: #fff;\n }\n\n .workspace-container img.bg-image {\n width: 100%;\n display: block;\n pointer-events: none; \n }\n\n .draggable-item {\n position: absolute;\n cursor: move;\n touch-action: none; \n border: 2px dashed transparent;\n transition: border 0.2s;\n user-select: none;\n }\n\n .draggable-item:hover, .draggable-item:active {\n border: 2px dashed rgba(255,255,255,0.8);\n box-shadow: 0 0 10px rgba(0,0,0,0.5);\n }\n\n #dragText {\n color: #fff;\n font-family: 'Outfit', sans-serif;\n font-weight: 800;\n text-shadow: 2px 2px 8px rgba(0,0,0,0.9);\n white-space: nowrap;\n top: 10%;\n left: 5%;\n padding: 5px;\n font-size: 24px;\n }\n\n #dragLogo {\n width: 120px;\n top: 75%;\n left: 75%;\n display: none;\n }\n\n \/* Sa\u011f: Ara\u00e7lar *\/\n .editor-tools {\n flex: 1;\n min-width: 300px;\n padding: 40px 30px;\n background: var(--atf-surface);\n display: flex;\n flex-direction: column;\n gap: 25px;\n }\n\n .tool-group label {\n display: block;\n font-weight: 700;\n font-size: 13px;\n text-transform: uppercase;\n margin-bottom: 10px;\n color: var(--text-main);\n }\n\n .tool-group input[type=\"text\"] {\n width: 100%;\n padding: 12px 15px;\n border: 1px solid var(--border-color);\n background: var(--atf-bg);\n font-family: 'Outfit', sans-serif;\n font-size: 16px; \n outline: none;\n border-radius: 0;\n transition: 0.3s;\n }\n .tool-group input[type=\"text\"]:focus { border-color: var(--atf-red); }\n\n .tool-group input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n accent-color: var(--atf-red);\n }\n\n .file-upload {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 15px;\n border: 2px dashed var(--border-color);\n background: var(--atf-bg);\n cursor: pointer;\n text-align: center;\n transition: 0.3s;\n }\n .file-upload:hover { border-color: var(--atf-red); }\n .file-upload input[type=\"file\"] {\n position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer;\n }\n .file-upload-text { font-size: 13px; font-weight: 500; color: var(--text-muted); pointer-events: none; }\n\n .action-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }\n\n .btn {\n padding: 15px;\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n }\n\n .btn-dl { background: var(--atf-bg); color: var(--text-main); border: 1px solid var(--text-main); }\n .btn-dl:hover { background: var(--text-main); color: #fff; }\n .btn-share { background: var(--atf-red); color: #fff; }\n .btn-share:hover { background: #b5050f; }\n\n .loading-text {\n text-align: center; color: var(--atf-red); font-weight: bold; margin-top: 10px; display: none;\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500 MOB\u0130L RESPONSIVE (G\u00dc\u00c7LEND\u0130R\u0130LD\u0130) \u2500\u2500\u2500\u2500\u2500 *\/\n @media (max-width: 768px) {\n .editor-overlay.active {\n padding: 0; \n display: block; \/* Mobilde scroll sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in flex'i iptal edip block'a ge\u00e7tik *\/\n }\n .editor-modal { \n margin: 0; \n width: 100vw; \n height: auto;\n min-height: 100vh;\n border-radius: 0;\n display: flex;\n flex-direction: column !important; \/* Yanyana gelmesini kesinlikle engeller, alt alta koyar *\/\n flex-wrap: nowrap;\n }\n .btn-close {\n top: 15px;\n right: 15px;\n width: 45px;\n height: 45px;\n font-size: 20px;\n }\n .editor-workspace {\n width: 100% !important;\n flex: none;\n padding: 70px 15px 20px; \n border-right: none;\n border-bottom: 1px solid var(--border-color);\n }\n .editor-tools {\n width: 100% !important;\n flex: none;\n padding: 25px 20px 40px; \n }\n .action-buttons {\n margin-top: 25px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"header\">\n <h1>ATF <span>SOSYAL MEDYA<\/span> OLU\u015eTURUCU<\/h1>\n <div class=\"divider\"><\/div>\n <p>Afi\u015fini haz\u0131rlamak istedi\u011finiz \u015fehri se\u00e7in. Kendi metninizi yaz\u0131p logonuzu y\u00fckleyin; g\u00f6rselleri s\u00fcr\u00fckleyerek istedi\u011finiz konuma yerle\u015ftirin.<\/p>\n <\/div>\n\n \n <div class=\"gallery-container\">\n <div class=\"gallery-grid\" id=\"galleryGrid\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"editor-overlay\" id=\"editorOverlay\">\n <button class=\"btn-close\" onclick=\"closeEditor()\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"editor-modal\">\n \n \n <div class=\"editor-workspace\">\n <div class=\"workspace-container\" id=\"workspace\">\n <img decoding=\"async\" id=\"bgImg\" class=\"bg-image\" src=\"\" crossorigin=\"anonymous\">\n \n \n <div id=\"dragText\" class=\"draggable-item\">\u00d6ZEL MESAJINIZ<\/div>\n \n \n <img decoding=\"async\" id=\"dragLogo\" class=\"draggable-item\" src=\"\">\n <\/div>\n <\/div>\n\n \n <div class=\"editor-tools\">\n <h2 class=\"serif\" style=\"text-align:left; font-size: 1.5rem; color: var(--atf-red);\">D\u00fczenleyici<\/h2>\n \n <div class=\"tool-group\">\n <label><i class=\"fas fa-font\"><\/i> Afi\u015f Metni<\/label>\n <input type=\"text\" id=\"customTextInput\" placeholder=\"Fuar mesaj\u0131n\u0131z\u0131 buraya yaz\u0131n...\" maxlength=\"50\" oninput=\"updateText()\">\n <\/div>\n\n <div class=\"tool-group\">\n <label>Metin Boyutu<\/label>\n <input type=\"range\" id=\"textSizeSlider\" min=\"12\" max=\"60\" value=\"24\" oninput=\"updateTextSize()\">\n <\/div>\n\n <div class=\"tool-group\" style=\"margin-top:10px;\">\n <label><i class=\"fas fa-image\"><\/i> Kurumsal Logo Y\u00fckle (PNG \u00f6nerilir)<\/label>\n <div class=\"file-upload\">\n <input type=\"file\" id=\"logoUploadInput\" accept=\"image\/png, image\/jpeg, image\/webp\">\n <div class=\"file-upload-text\" id=\"fileNameDisplay\">\n T\u0131klay\u0131n veya s\u00fcr\u00fckleyin\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"tool-group\" id=\"logoSizeGroup\" style=\"display:none;\">\n <label>Logo Boyutu<\/label>\n <input type=\"range\" id=\"logoSizeSlider\" min=\"50\" max=\"300\" value=\"120\" oninput=\"updateLogoSize()\">\n <\/div>\n\n <p style=\"font-size: 11px; color: var(--text-muted); line-height: 1.5;\">\n <i class=\"fas fa-info-circle\"><\/i> Ekranda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz yaz\u0131ya ve logoya bas\u0131l\u0131 tutarak <b>s\u00fcr\u00fckleyip istedi\u011finiz yere b\u0131rakabilirsiniz.<\/b>\n <\/p>\n\n <div class=\"action-buttons\">\n <div class=\"loading-text\" id=\"loadingIndicator\">HD G\u00f6r\u00fcnt\u00fc Olu\u015fturuluyor, Bekleyin...<\/div>\n <button class=\"btn btn-dl\" onclick=\"exportPoster('download')\">\n <i class=\"fas fa-download\"><\/i> Cihaz\u0131ma Y\u00fcksek Kalitede \u0130ndir\n <\/button>\n <button class=\"btn btn-share\" onclick=\"exportPoster('share')\">\n <i class=\"fab fa-instagram\"><\/i> Instagram \/ WhatsApp Payla\u015f\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const baseUrl = \"https:\/\/antalyaturizmfuari.com\/wp-content\/uploads\/2026\/05\/\";\n const cities = [\n { name: \"ADANA\", file: \"ADANA.jpg\" },\n { name: \"ALA\u00c7ATI\", file: \"ALACATI-scaled.jpg\" },\n { name: \"ALANYA\", file: \"ALANYA.jpg\" },\n { name: \"ANTALYA\", file: \"ANTALYA.jpg\" },\n { name: \"BALIKES\u0130R\", file: \"BALIKESIR.jpg\" },\n { name: \"BODRUM\", file: \"BODRUM-scaled.jpg\" },\n { name: \"DAT\u00c7A\", file: \"DATCA.jpg\" },\n { name: \"DEN\u0130ZL\u0130\", file: \"DENIZLI.jpg\" },\n { name: \"D\u0130D\u0130M\", file: \"DIDIM.jpg\" },\n { name: \"FETH\u0130YE\", file: \"FETHIYE.jpg\" },\n { name: \"KAPADOKYA\", file: \"KAPADOKYA.jpg\" },\n { name: \"KEMER\", file: \"KEMER.jpg\" },\n { name: \"KONYA\", file: \"KONYA.jpg\" },\n { name: \"MANAVGAT\", file: \"MANAVGAT.jpg\" },\n { name: \"MAN\u0130SA\", file: \"MANISA.jpg\" },\n { name: \"MARMAR\u0130S\", file: \"MARMARIS.jpg\" },\n { name: \"R\u0130ZE\", file: \"RIZE.jpg\" },\n { name: \"S\u0130DE\", file: \"SIDE.jpg\" },\n { name: \"TRABZON\", file: \"TRABZON.jpg\" }\n ];\n\n let selectedCityName = \"\";\n\n const galleryGrid = document.getElementById('galleryGrid');\n cities.forEach(city => {\n const card = document.createElement('div');\n card.className = 'gallery-card';\n card.onclick = () => openEditor(city);\n card.innerHTML = `\n <div class=\"card-image\">\n <img decoding=\"async\" src=\"${baseUrl}${city.file}\" alt=\"${city.name}\" loading=\"lazy\">\n <\/div>\n <h3>${city.name}<\/h3>\n <button class=\"btn-edit\"><i class=\"fas fa-pencil-alt\"><\/i> D\u00fczenle \/ Payla\u015f<\/button>\n `;\n galleryGrid.appendChild(card);\n });\n\n const overlay = document.getElementById('editorOverlay');\n const bgImg = document.getElementById('bgImg');\n const dragText = document.getElementById('dragText');\n const dragLogo = document.getElementById('dragLogo');\n\n function openEditor(city) {\n selectedCityName = city.name.replace(\/ \/g, '_');\n bgImg.src = baseUrl + city.file;\n \n document.getElementById('customTextInput').value = \"\";\n dragText.textContent = \"\";\n document.getElementById('textSizeSlider').value = 24;\n dragText.style.fontSize = \"24px\";\n dragText.style.left = \"5%\"; dragText.style.top = \"10%\";\n\n document.getElementById('logoUploadInput').value = \"\";\n dragLogo.src = \"\";\n dragLogo.style.display = \"none\";\n document.getElementById('logoSizeGroup').style.display = \"none\";\n document.getElementById('fileNameDisplay').textContent = \"T\u0131klay\u0131n veya s\u00fcr\u00fckleyin\";\n dragLogo.style.left = \"75%\"; dragLogo.style.top = \"75%\";\n\n overlay.classList.add('active');\n document.body.style.overflow = \"hidden\"; \/\/ Alt katman scroll olmas\u0131n\n }\n\n function closeEditor() {\n overlay.classList.remove('active');\n document.body.style.overflow = \"auto\";\n }\n\n \/\/ D\u0131\u015f\u0131na t\u0131klay\u0131nca kapans\u0131n (Masa\u00fcst\u00fc i\u00e7in)\n overlay.addEventListener('click', function(e) {\n if (e.target === overlay) {\n closeEditor();\n }\n });\n\n function updateText() {\n dragText.textContent = document.getElementById('customTextInput').value;\n }\n\n function updateTextSize() {\n dragText.style.fontSize = document.getElementById('textSizeSlider').value + \"px\";\n }\n\n function updateLogoSize() {\n dragLogo.style.width = document.getElementById('logoSizeSlider').value + \"px\";\n }\n\n document.getElementById('logoUploadInput').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if (file) {\n document.getElementById('fileNameDisplay').textContent = file.name;\n const reader = new FileReader();\n reader.onload = function(event) {\n dragLogo.src = event.target.result;\n dragLogo.style.display = \"block\";\n document.getElementById('logoSizeGroup').style.display = \"block\";\n }\n reader.readAsDataURL(file);\n }\n });\n\n \/\/ S\u00fcr\u00fckle b\u0131rak mant\u0131\u011f\u0131\n function makeDraggable(element) {\n let isDragging = false;\n let startX, startY, initialLeft, initialTop;\n\n element.addEventListener('pointerdown', (e) => {\n isDragging = true;\n startX = e.clientX;\n startY = e.clientY;\n \n const rect = element.getBoundingClientRect();\n const parentRect = element.parentElement.getBoundingClientRect();\n initialLeft = rect.left - parentRect.left;\n initialTop = rect.top - parentRect.top;\n \n element.setPointerCapture(e.pointerId);\n e.preventDefault();\n });\n\n element.addEventListener('pointermove', (e) => {\n if (!isDragging) return;\n const dx = e.clientX - startX;\n const dy = e.clientY - startY;\n const parentRect = element.parentElement.getBoundingClientRect();\n\n let newLeft = initialLeft + dx;\n let newTop = initialTop + dy;\n\n newLeft = Math.max(0, Math.min(newLeft, parentRect.width - element.offsetWidth));\n newTop = Math.max(0, Math.min(newTop, parentRect.height - element.offsetHeight));\n\n element.style.left = (newLeft \/ parentRect.width * 100) + '%';\n element.style.top = (newTop \/ parentRect.height * 100) + '%';\n });\n\n element.addEventListener('pointerup', (e) => {\n isDragging = false;\n element.releasePointerCapture(e.pointerId);\n });\n }\n\n makeDraggable(dragText);\n makeDraggable(dragLogo);\n\n \/\/ HD Resim \u00c7\u0131kt\u0131s\u0131 Alma\n async function exportPoster(action) {\n const indicator = document.getElementById('loadingIndicator');\n indicator.style.display = 'block';\n \n await new Promise(r => setTimeout(r, 100));\n\n try {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const workspace = document.getElementById('workspace');\n\n canvas.width = bgImg.naturalWidth;\n canvas.height = bgImg.naturalHeight;\n\n const wsRect = workspace.getBoundingClientRect();\n const scaleX = canvas.width \/ wsRect.width;\n const scaleY = canvas.height \/ wsRect.height;\n\n ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);\n\n if (dragLogo.style.display !== \"none\" && dragLogo.src) {\n const logoRect = dragLogo.getBoundingClientRect();\n const lx = (logoRect.left - wsRect.left) * scaleX;\n const ly = (logoRect.top - wsRect.top) * scaleY;\n const lw = logoRect.width * scaleX;\n const lh = logoRect.height * scaleY;\n ctx.drawImage(dragLogo, lx, ly, lw, lh);\n }\n\n if (dragText.textContent.trim() !== \"\") {\n const textRect = dragText.getBoundingClientRect();\n const tx = (textRect.left - wsRect.left) * scaleX;\n const ty = (textRect.top - wsRect.top) * scaleY;\n\n const computedStyle = window.getComputedStyle(dragText);\n const fontSizePx = parseFloat(computedStyle.fontSize);\n const canvasFontSize = fontSizePx * scaleY;\n\n ctx.font = `800 ${canvasFontSize}px 'Outfit', sans-serif`;\n ctx.fillStyle = \"#ffffff\";\n ctx.textBaseline = \"top\";\n \n ctx.shadowColor = \"rgba(0, 0, 0, 0.9)\";\n ctx.shadowBlur = 15 * scaleY;\n ctx.shadowOffsetX = 3 * scaleX;\n ctx.shadowOffsetY = 3 * scaleY;\n\n ctx.fillText(dragText.textContent, tx, ty);\n ctx.shadowColor = \"transparent\";\n }\n\n canvas.toBlob(async (blob) => {\n if(!blob) throw new Error(\"Blob olu\u015fturulamad\u0131.\");\n \n const fileName = `ATF_${selectedCityName}_Afis.jpg`;\n\n if (action === 'share') {\n const file = new File([blob], fileName, { type: 'image\/jpeg' });\n if (navigator.canShare && navigator.canShare({ files: [file] })) {\n try {\n await navigator.share({\n files: [file],\n title: 'ATF Afi\u015f',\n text: 'Antalya Ticaret Fuar\u0131 Afi\u015fim'\n });\n } catch (e) {\n console.log(\"Payla\u015f\u0131m iptal edildi.\");\n }\n } else {\n alert(\"Cihaz\u0131n\u0131z do\u011frudan payla\u015f\u0131ma izin vermiyor. G\u00f6rsel indiriliyor...\");\n triggerDownload(blob, fileName);\n }\n } else {\n triggerDownload(blob, fileName);\n }\n indicator.style.display = 'none';\n }, 'image\/jpeg', 0.95);\n\n } catch (err) {\n console.error(err);\n alert(\"G\u00fcvenlik duvar\u0131 (CORS) nedeniyle g\u00f6rsel olu\u015fturulamad\u0131.\");\n indicator.style.display = 'none';\n }\n }\n\n function triggerDownload(blob, filename) {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n <\/script>\n<\/body>\n<\/html>\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>ATF \u015eehir Afi\u015fi Olu\u015fturucu ATF SOSYAL MEDYA OLU\u015eTURUCU Afi\u015fini haz\u0131rlamak istedi\u011finiz \u015fehri se\u00e7in. Kendi metninizi yaz\u0131p logonuzu y\u00fckleyin; g\u00f6rselleri s\u00fcr\u00fckleyerek istedi\u011finiz konuma yerle\u015ftirin. \u00d6ZEL MESAJINIZ D\u00fczenleyici Afi\u015f Metni Metin Boyutu Kurumsal Logo Y\u00fckle (PNG \u00f6nerilir) T\u0131klay\u0131n veya s\u00fcr\u00fckleyin Logo Boyutu Ekranda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz yaz\u0131ya ve logoya bas\u0131l\u0131 tutarak s\u00fcr\u00fckleyip istedi\u011finiz yere b\u0131rakabilirsiniz. HD G\u00f6r\u00fcnt\u00fc Olu\u015fturuluyor, Bekleyin… […]<\/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-2595","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages\/2595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/comments?post=2595"}],"version-history":[{"count":30,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages\/2595\/revisions"}],"predecessor-version":[{"id":2689,"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/pages\/2595\/revisions\/2689"}],"wp:attachment":[{"href":"https:\/\/www.atfturkiye.com\/it\/wp-json\/wp\/v2\/media?parent=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}