<style>:root{--accent-color:#FF0000;--panel-bg:rgba(18, 18, 18, 0.95);--border-color:rgba(255, 255, 255, 0.1)}body{margin:0;padding:0;background:#000;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1;transition:opacity .5s ease}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px;width:240px}.neon-text{width:240px;height:100px}.text-main{fill:none;stroke:#ec4899;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 8px #ec4899)}.text-trace{fill:none;stroke:url(#trace-gradient);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10,1000;stroke-dashoffset:1000;animation:trace 3s linear infinite;filter:url(#neon-filter)}@keyframes hue-rotate{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}.designer-text{fill:rgba(255,255,255,.6);font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;letter-spacing:4px}@keyframes trace{0%{stroke-dashoffset:1000}100%{stroke-dashoffset:-1000}}.progress-container{width:240px;background:rgba(255,255,255,.1);height:4px;border-radius:2px;overflow:hidden}.progress-bar{width:0%;height:100%;background:#ec4899;transition:width .3s ease}.progress-text{color:#666;font-size:14px;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.preview-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-size:20px 20px;background-image:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px)}.neon-svg{width:90%;height:100vh;display:flex;align-items:center;justify-content:center}.neon-svg svg{max-width:100%;max-height:100%}.neon-text-path{stroke:none}@supports not (-webkit-touch-callout:none){.neon-text-path{filter:drop-shadow(0 0 2px var(--accent-color)) drop-shadow(0 0 4px var(--accent-color)) drop-shadow(0 0 6px var(--accent-color))}.neon-text-path[data-line-index]{filter:drop-shadow(0 0 2px var(--accent-color)) drop-shadow(0 0 4px var(--accent-color)) drop-shadow(0 0 6px var(--accent-color))}}.dimension-line{stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:4 2}.dimension-text{fill:rgba(255,255,255,.6);font-size:9px;font-family:system-ui,-apple-system,sans-serif}.toolbar{position:fixed;top:.8rem;right:1rem;z-index:100;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:1rem;padding:.5rem;backdrop-filter:blur(10px);display:flex;gap:.25rem}.toolbar button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:.75rem;background:rgba(255,255,255,.03);transition:all .2s ease;position:relative}.toolbar button:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}.toolbar button.active{background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.2)}.toolbar button .material-icons{font-size:20px;padding:0;color:rgba(255,255,255,.8);transition:color .2s ease}.toolbar button:hover .material-icons{color:#ec4899}.side-panel{position:fixed;top:0;right:-100%;width:min(400px,100%);height:100vh;background:var(--panel-bg);border-left:1px solid var(--border-color);transition:right .3s ease;z-index:90;backdrop-filter:blur(10px);overflow-y:auto;padding-top:70px}.side-panel.active{right:0}.font-preview{position:relative;padding:1rem;padding-top:5px;padding-bottom:5px;border-radius:.5rem;margin-bottom:.5rem;cursor:pointer;border:1px solid var(--border-color);transition:all .2s ease}.font-preview:hover{background:rgba(255,255,255,.1);transform:translateX(10px)}.font-preview.active{border-left:3px solid var(--accent-color);background:rgba(255,255,255,.05)}.font-preview .font-name{font-size:.875rem;color:rgba(255,255,255,.3);margin-bottom:.5rem;font-family:system-ui,-apple-system,sans-serif}.font-preview .font-sample{font-size:1.5rem;color:#fff}textarea#textInput{line-height:1.5;white-space:pre;overflow-wrap:normal;overflow-x:auto;height:140px}.positions-preview{border-radius:.5rem;margin-bottom:.5rem;border:1px solid var(--border-color);padding:15px}.neontext{border-radius:.5rem;border:1px solid var(--border-color);padding:5px}#wordColorList{margin-bottom:1rem}.hint-container{position:absolute;left:-20px;bottom:-20px;display:flex;align-items:center;gap:2px;pointer-events:none;opacity:0;animation:moveToWord 2s ease-in-out infinite}.hint-cursor{width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(255,255,255,0.8)' d='M16 0l-14 5l3 3l-4 4l2 2l4-4l3 3z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.hint-dot{width:10px;height:10px;border-radius:50%;animation:changeDotColor 1s infinite}@keyframes moveToWord{0%{opacity:0;transform:translate(0,0)}15%{opacity:0;transform:translate(0,0)}30%{opacity:1;transform:translate(20px,-10px)}45%{opacity:1;transform:translate(0,0)}60%{opacity:1;transform:translate(20px,-10px)}75%{opacity:0;transform:translate(0,0)}}@keyframes changeDotColor{0%{background-color:red}33%{background-color:#0f0}66%{background-color:#00f}100%{background-color:red}}.hints-hidden .hint-container{display:none!important}.word-item{position:relative;display:inline-block;padding:.5rem .75rem;margin:0 .5rem .5rem 0;border-radius:.5rem;background:rgba(255,255,255,.05);border:1px solid transparent;transition:all .2s ease}.word-item span{color:#fff;font-size:.875rem;vertical-align:middle}.word-item .color-dot{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;margin-left:.5rem;vertical-align:middle}.word-item:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}.word-item.selected{border-color:var(--accent-color);background:rgba(255,45,149,.1)}.word-item .selected-badge{position:absolute;right:-2px;top:-2px;background:var(--accent-color);color:#fff;font-size:.6rem;padding:2px 4px;border-radius:3px;opacity:0;transform:translateY(-5px);transition:all .2s ease}.word-item.selected .selected-badge{opacity:1;transform:translateY(0)}.path-length-info{position:fixed;bottom:1rem;left:1rem;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:.5rem;padding:.75rem 1rem;color:#fff;font-size:.875rem;backdrop-filter:blur(10px);z-index:100}.copyright{position:fixed;bottom:1rem;color:grey;font-size:.8rem;backdrop-filter:blur(10px);z-index:100}.price-panel-button{display:none}.price-display{position:fixed;top:1rem;left:50%;transform:translateX(-50%);background:var(--panel-bg);border:1px solid var(--border-color);border-radius:.5rem;padding:.75rem 1.5rem;color:#fff;backdrop-filter:blur(10px);z-index:100;display:flex;flex-direction:column;align-items:center;gap:.25rem}.price-display .main-price{font-size:1.25rem;font-weight:700}.price-display .transformer-note{font-size:.75rem;color:rgba(255,255,255,.7)}.light-beam{position:fixed;width:150px;height:150px;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle at center,rgba(255,255,255,.2) 0,rgba(255,255,255,.1) 30%,rgba(255,255,255,.05) 60%,transparent 100%);border-radius:50%;filter:blur(5px);mix-blend-mode:screen;z-index:1000;opacity:0;transition:opacity .5s ease}.renkler{height:30px}.material-icons{padding:5px}.fullscreen-button{filter:drop-shadow(0 2px 4px rgba(0, 0, 0, .3))}@media (max-width:768px){.preview-container{position:fixed;top:0;left:0;width:100%;height:30vh;overflow:hidden;border-bottom:1px solid var(--border-color)}.side-panel{position:fixed;top:30vh;right:0!important;width:100%;height:70vh;padding-bottom:100px;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:25px}.side-panel .flex.justify-between button{display:none}.toolbar{position:fixed;top:calc(30vh - 10px);left:50%;transform:translateX(-50%);z-index:100;background:var(--panel-bg);border-radius:20px;padding:4px;width:100%;white-space:nowrap;max-width:90vw;overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex;gap:4px;justify-content:center}.toolbar button{padding:12px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);flex:0 0 auto}.toolbar button:hover{background:rgba(255,255,255,.1)}.price-panel-button{display:flex}.price-display{display:none}.side-panel .flex.justify-between{top:0;background:var(--panel-bg);padding:1rem;z-index:10;border-bottom:1px solid var(--border-color)}#savedDesignsList .bg-gray-800{margin-bottom:1rem}#savedDesignsList button{padding:8px;display:flex;align-items:center;justify-content:center}#savedDesignsList button .material-icons{font-size:20px}.side-panel .content-wrapper{padding:1.5rem;padding-bottom:120px}.toolbar button{flex-shrink:0;width:48px;height:48px}.preview-container .neon-svg svg{transform:scale(2);transform-origin:center center}.neon-svg{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.fullscreen-button{z-index:80}}.info-panel.active{transform:translateX(0)}@keyframes pulse-ring{0%{transform:scale(.2);opacity:0}50%{transform:scale(.7);opacity:.4}100%{transform:scale(1.5);opacity:0}}.pulse-animation::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;border-radius:50%;background-color:#ec4899;animation:pulse-ring 1.5s cubic-bezier(.215,.61,.355,1) infinite;z-index:-1}.p-3{padding:5px}</style><div class=loading-screen><div class=loading-content><svg class=neon-text viewBox="0 0 240 100"><defs><linearGradient y1=0% y1=0% id=trace-gradient x1=0% x2=100%><stop offset=0% stop-color=#FF0080><animate attributeName=stop-color dur=2s repeatCount=indefinite values="#FF0080; #FF00FF; #00FFFF; #80FF00; #FF0080"/></stop><stop offset=100% stop-color=#FF00FF><animate attributeName=stop-color dur=2s repeatCount=indefinite values="#FF00FF; #00FFFF; #80FF00; #FF0080; #FF00FF"/></stop></linearGradient><filter id=neon-filter><feGaussianBlur in=SourceGraphic result=blur stdDeviation=2 /><feComposite in=blur in2=SourceGraphic operator=over /></filter></defs><path class=text-main d="M54,20 L54,60 M54,20 L79,60 M79,20 L79,60"/><path class=text-main d="M84,20 L84,60 M84,20 L109,20 M84,40 L104,40 M84,60 L109,60"/><path class=text-main d="M129,20 A20,20 0 1,1 129,60 A20,20 0 1,1 129,20"/><path class=text-main d="M154,20 L154,60 M154,20 L179,60 M179,20 L179,60"/><path class=text-trace d="M54,20 L54,60 M54,20 L79,60 L79,20 L84,20 L84,60 L109,60 L84,40 L104,40 L84,20 L109,20 L129,20 A20,20 0 1,1 129,60 A20,20 0 1,1 129,20 L154,20 L154,60 L154,20 L179,60 L179,20"/><text class=designer-text text-anchor=middle x=120 y=85>DESIGNER</text></svg><div class=progress-container><div class=progress-bar></div></div><div class=progress-text><span id=loadedFonts>0</span>/<span id=totalFonts>0</span> Fontlar Yükleniyor</div></div></div><div class=light-beam></div><div class="hidden fixed left-4 md:block z-50 top-4"><button class="flex items-center gap-2 cursor-pointer group backdrop-blur-sm bg-gray-900/80 hover:bg-gray-800/80 info-button p-2 pulse-animation rounded-full transition-colors"><span class="text-white material-icons text-xl">info_outline</span> <span class="text-white bg-gray-900/80 absolute group-hover:opacity-100 left-full ml-2 opacity-0 px-2 py-1 rounded text-xs tooltip transition-opacity whitespace-nowrap">Detaylar ve Kısayollar</span></button></div><div class="hidden fixed left-4 md:block z-50 -translate-x-96 backdrop-blur-lg bg-gradient-to-b border border-white/5 duration-300 from-gray-900/95 info-panel p-4 rounded-lg shadow-xl to-gray-800/95 top-16 transform transition-transform w-72"><div class="text-white font-medium mb-4">Detaylar ve Kısayollar</div><div class="mb-6 space-y-3"><div class="text-sm flex items-center text-gray-300"><span class="material-icons text-pink-500 mr-2">arrow_upward arrow_downward</span> <span>Yukarı/Aşağı Tuşları:<br><b>Font Değiştirme</b></span></div><div class="text-sm flex items-center text-gray-300"><span class="material-icons text-pink-500 mr-2">arrow_back arrow_forward</span> <span>Sol/Sağ Tuşları:<br><b>Genişlik Ayarlama</b></span></div><div class="text-sm flex items-center text-gray-300"><span class="material-icons text-pink-500 mr-2">keyboard</span> <span>CTRL + B:<br><b>Neon Uzunluk Bilgisi</b></span></div><div class="text-sm flex items-center text-gray-300"><span class="material-icons text-pink-500 mr-2">zoom_in</span> <span>Fare Tekerleği:<br><b>Yakınlaştırma/Uzaklaştırma</b></span></div></div><div class="border-gray-700 border-t pt-4"><label class="flex items-center gap-2 cursor-pointer group"><input class=hidden id=detailsToggleCheckbox type=checkbox checked><div class="flex items-center justify-center border-2 border-white/50 h-4 rounded transition-colors w-4"><span class="text-white text-sm material-icons scale-75">check</span></div><span class="text-white text-sm">Ölçü Detaylarını Göster/Gizle</span></label></div></div><div class=preview-container><div class=path-length-info id=pathLengthInfo style=display:none>Toplam Neon Uzunluğu: <span id=pathLengthValue>0</span> m</div><div class=copyright>Neon Tasarım Aracı - Şimşek Reklamcılık | 2025</div><div class=neon-svg id=svgPreview></div></div><div class=toolbar><button class="text-white hover:text-pink-500 transition-colors"onclick='togglePanel("text")'title="Yazı ve Renk Seçenekleri"><span class=material-icons>edit</span></button> <button class="text-white hover:text-pink-500 transition-colors"onclick='togglePanel("font")'title="Font Seçenekleri"><span class=material-icons>font_download</span></button> <button class="text-white hover:text-pink-500 transition-colors"onclick='togglePanel("size")'title=Ölçülendirme><span class=material-icons>straighten</span></button> <button class="text-white hover:text-pink-500 transition-colors price-panel-button"onclick='togglePanel("price")'title="Fiyat Bilgisi"><span class=material-icons>attach_money</span></button> <button class="text-white hover:text-pink-500 transition-colors"onclick='togglePanel("saved")'title="Kaydet & Paylaş"><span class=material-icons>save</span></button></div><div class="p-6 side-panel"id=pricePanel><div class="flex items-center justify-between mb-6"><h3 class="text-white text-lg">Fiyat Bilgisi</h3><button class="text-white hover:text-pink-500"onclick='togglePanel("price")'><span class=material-icons>close</span></button></div><div class="content-wrapper space-y-6"><div class="p-6 backdrop-blur bg-gray-800/30 rounded-2xl"><div class="flex items-center mb-4 gap-3"><span class="material-icons text-pink-500">payments</span><h4 class="text-white font-medium text-lg">Toplam Tutar</h4></div><div class="text-white mb-2 font-bold text-3xl"><span id=mobilePriceDisplay>0 ₺</span></div><div class="text-sm text-gray-400">Tüm vergiler dahildir</div></div><div class="grid gap-4 grid-cols-1 md:grid-cols-3"><div class="backdrop-blur bg-gray-800/20 p-4 rounded-xl"><div class="flex items-center gap-2 mb-2"><span class="material-icons text-pink-500">power</span> <span class=text-white>Trafo</span></div><p class="text-sm text-gray-400">Profesyonel trafo sistemi dahildir</div><div class="backdrop-blur bg-gray-800/20 p-4 rounded-xl"><div class="flex items-center gap-2 mb-2"><span class="material-icons text-pink-500">receipt_long</span> <span class=text-white>KDV</span></div><p class="text-sm text-gray-400">%20 KDV dahildir</div><div class="backdrop-blur bg-gray-800/20 p-4 rounded-xl"><div class="flex items-center gap-2 mb-2"><span class="material-icons text-pink-500">local_shipping</span> <span class=text-white>Kargo</span></div><p class="text-sm text-gray-400">Türkiye geneli ücretsiz kargo</div></div><div class="p-6 backdrop-blur bg-gray-800/30 rounded-2xl"><div class="flex items-center mb-4 gap-3"><span class="material-icons text-pink-500">credit_card</span><h4 class="text-white font-medium text-lg">Ödeme Seçenekleri</h4></div><ul class="space-y-3 text-gray-300"><li class="flex items-center gap-2"><span class="text-sm material-icons text-green-500">check_circle</span> Kredi/Banka Kartı ile Ödeme<li class="flex items-center gap-2"><span class="text-sm material-icons text-green-500">check_circle</span> Havale/EFT ile Ödeme</ul></div></div></div><div class="p-6 side-panel"id=textPanel><div class="flex items-center justify-between mb-6"><h3 class="text-white text-lg">Metin</h3><button class="text-white hover:text-pink-500"onclick='togglePanel("text")'><span class=material-icons>close</span></button></div><textarea class="text-white rounded-lg bg-transparent border border-gray-800 focus:border-pink-500 focus:outline-none p-4 resize-none text-2xl w-full"id=textInput placeholder="Neon metninizi yazın...">Neon Yazı</textarea><div class=space-y-4><div class="mb-4 space-y-4"id=wordColorList></div><div class=hidden id=colorPicker><label class="text-white text-sm block mb-2">Seçilen Kelime: <span class=font-medium id=selectedWordLabel></span></label><div class="grid gap-2 grid-cols-3 mt-2"><button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black bg-white"data-color=#FFFFFF>White</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black"data-color=#FFE5CC style=background-color:#ffe5cc>Warm White</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black bg-yellow-300"data-color=#FFFF00>Lemon Yellow</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black bg-yellow-500"data-color=#FFD700>Golden Yellow</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black"data-color=#FFA500 style=background-color:orange>Orange</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black bg-pink-200"data-color=#FFB6C1>Light Pink</button> <button class="text-white text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all bg-pink-500"data-color=#FF69B4>Pink</button> <button class="text-white text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all bg-purple-800"data-color=#800080>Purple</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black"data-color=#80e5ff style=background-color:#80e5ff>Ice Blue</button> <button class="text-white text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all bg-blue-600"data-color=#0000FF>Blue</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black bg-green-400"data-color=#00FF00>Green</button> <button class="text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all text-black"data-color=#80ffe1 style=background-color:#80ffe1>Maldiv Green</button> <button class="text-white text-sm cursor-pointer font-medium h-12 hover:opacity-90 px-3 renkler rounded transition-all bg-red-600"data-color=#FF0000>Red</button></div></div></div></div><div class="p-6 side-panel"id=fontPanel><div class="flex items-center justify-between mb-6"><h3 class="text-white text-lg">Font Seç</h3><button class="text-white hover:text-pink-500"onclick='togglePanel("font")'><span class=material-icons>close</span></button></div><div class=space-y-4 id=fontList></div></div><div class="p-6 side-panel"id=sizePanel><div class="flex items-center justify-between mb-6"><h3 class="text-white text-lg">Ölçü</h3><button class="text-white hover:text-pink-500"onclick='togglePanel("size")'><span class=material-icons>close</span></button></div><div class=space-y-4><div class=mb-4><label class="text-white text-sm block mb-2">Genişlik (cm)</label> <input class=w-full id=widthSlider type=range max=300 min=10 step=1 value=100><div class="text-white mt-2"><span id=widthValue>100</span> cm</div><div class="text-pink-500 hidden mt-2 text-xs"id=minSizeNote>En küçük harfi 7cm olacak şekilde sınırlandırılmıştır</div></div></div><div class="hidden mt-6 positions-preview"id=linePositionsSection><div class="flex items-center justify-between mb-4"><h4 class="text-white text-sm">Satır Pozisyonları</h4><button class="text-white transition-colors bg-pink-500 hover:bg-pink-600 px-2 py-1 rounded text-xs"onclick=resetLinePositions() id=resetPositionsBtn>Pozisyonları Sıfırla</button></div><div class=space-y-4 id=linePositionControls></div></div></div><div class="p-6 side-panel"id=savedPanel><div class="flex items-center justify-between mb-6"><h3 class="text-white text-lg">Kaydedilen Tasarımlar</h3><button class="text-white hover:text-pink-500"onclick='togglePanel("saved")'><span class=material-icons>close</span></button></div><div class="flex mb-6 gap-4"><button class="text-white bg-pink-500 hover:bg-pink-600 flex flex-1 gap-2 items-center justify-center p-3 rounded-lg"onclick=saveCurrentDesign()><span class=material-icons>save</span> Tasarımı Kaydet</button> <button class="text-white bg-pink-500 hover:bg-pink-600 flex flex-1 gap-2 items-center justify-center p-3 rounded-lg"onclick=shareDesign()><span class=material-icons>share</span> Paylaş</button></div><div class=space-y-4 id=savedDesignsList></div></div><div class="z-50 fixed top-4 fullscreen-button md:hidden right-4"><button class="text-white transition-colors backdrop-blur-sm bg-gray-900/80 hover:bg-gray-800 p-2 rounded-full"onclick=toggleFullscreen()><span class=material-icons>fullscreen</span></button></div><div class="flex justify-center bg-black/50 fixed hidden inset-0 items-start z-[9999]"id=shareModal><div class="w-full rounded-lg bg-gray-900 max-w-md mt-[35vh] mx-4 overflow-hidden shadow-xl"></div></div>
