Zengin Metin Editörü Nedir?

Zengin metin editörü, kullanıcıların metinleri daha görsel ve etkili bir şekilde düzenlemelerini sağlayan bir yazılım aracıdır. Bu araç, yazılı içerik oluştururken kullanıcılara bold, italik, altı çizili gibi temel biçimlendirme seçenekleri sunar. Aynı zamanda, bağlantılar ekleme, liste oluşturma ve resim yerleştirme gibi daha zengin düzenleme imkânları da tanır. Zengin metin editörleri, özellikle blog yazarı, yazar ve içerik üreticileri gibi kullanıcılar için son derece faydalıdır. JavaScript ile entegre edildiğinde, bu tür editörler özellikle dinamik ve etkileşimli hale gelir. Kullanıcılar metinlerini anlık olarak düzenleyebilir, değişiklikleri hızlı bir şekilde görebilir ve zengin bir kullanıcı deneyimi yaşayabilir. Zengin metin editörü JavaScript ile nasıl yapılır? sorusuna yanıt ararken, bu bileşenlerin hem görsel hem de işlevsel açıdan nasıl geliştirileceğini anlamak önemlidir. Bu tür editörler, modern web uygulamalarında sıkça kullanılan ve kullanıcı etkileşimini artıran önemli araçlardır.

JavaScript ile Zengin Metin Editörü Geliştirme

Zengin metin editörü, kullanıcıların metinlerini biçimlendirmesine ve zengin içerikler oluşturmasına olanak tanıyan güçlü bir araçtır. Peki, Zengin metin editörü JavaScript ile nasıl yapılır? İşte bu sorunun cevabı, özelleştirilmiş bir zengin metin editörü geliştirme sürecinin temel aşamalarında yatmaktadır. Öncelikle, HTML ve CSS ile temel bir yapı oluşturmakla işe başlayabilirsiniz. Bu yapı, editörün görsel arayüzünü belirleyecektir. Kullanıcıların metinlerini girmesi için bir alan oluşturduktan sonra, bu alanın içeriklerini dinamik bir şekilde işlemek için JavaScript’i devreye alabilirsiniz. JavaScript, zengin metin editörünüzü daha etkileşimli hale getirecek çeşitli özellikler eklemenizi sağlar. Örneğin, biçimlendirme araçları eklemek için butonlar oluşturabilirsiniz. Kullanıcılar bu butonlara tıkladığında, metinlerine kalın, italik, altı çizili gibi biçimlendirmeler uygulamak için ilgili JavaScript fonksiyonlarını çağırmanız gerekecek. Ayrıca, kullanıcıların başlık, liste veya bağlantı gibi farklı metin stilleri eklemelerine de imkan tanımalısınız. Zengin metin editörü JavaScript ile nasıl yapılır? sorusunun bir diğer önemli yönü, içerik etiketlerini işlemek ve biçimlendirilmiş metni HTML formatında kaydetmektir. Bu aşamada, kullanıcıların oluşturduğu içerikleri düzgün bir şekilde yönetebilmek için uygun veri yapıları kullanmalısınız. Son olarak, kullanıcılara oluşturdukları içeriği kaydetme veya paylaşma imkanı sunarak zengin metin editörünüzün işlevselliğini artırabilirsiniz. Tüm bu adımlar neticesinde kullanıcı dostu, işlevsel ve etkileyici bir zengin metin editörü geliştirmiş olacaksınız. Sonuç olarak, Zengin metin editörü JavaScript ile nasıl yapılır? sorusuna cevap arayan herkes için bu basamaklar yol gösterici olacaktır.

HTML ile Temel Yapının Oluşturulması

Zengin metin editörü JavaScript ile nasıl yapılır? sorusunun yanıtını ararken, öncelikle temel bir HTML yapısına ihtiyaç duyduğumuzu unutmamalıyız. HTML, web sayfalarının temel taşlarını oluşturan, yapısal bir dil olarak oldukça önemlidir. İyi bir zengin metin editörü oluşturmak için, birkaç temel bileşeni HTML ile inşa etmemiz gerekecek. Öncelikle, editörümüz için bir

elementi yaratmalıyız. Bu

elementi, metin alanımızın ana gövdesini temsil edecek. Ardından, metin düzenleme özelliklerimizi sağlayacak bir

elementi eklemeliyiz. Kullanıcılar, bu alanda metinlerini girip düzenleyebilecekler. Son olarak, formatlama seçeneklerini sunmak için bazı butonlar eklememiz faydalı olacaktır. Örneğin, kalın, italik ve altı çizili metin gibi stilleri uygulamak için birkaç buton yerleştirebiliriz.

Tüm bu bileşenleri bir araya getirerek, kullanıcı dostu bir arayüz tasarlamak mümkün hale gelecektir. HTML yapısı tamamlandıktan sonra, <b>Zengin metin editörü JavaScript ile nasıl yapılır?</b> sorusunun kalan kısmını yazılım kodlarıyla destekleyerek zenginleştirebiliriz. Bu aşamada, JavaScript’in sağladığı dinamik özellikler sayesinde kullanıcı etkileşimlerini yönetebilir ve editörümüzü daha işlevsel hale getirebiliriz.<h2>JavaScript ile Metin İşleme Fonksiyonları</h2>
<p>Günümüzde, zengin metin editörleri, kullanıcıların metinleri daha etkili bir şekilde düzenlemelerine olanak tanıyan güçlü araçlardır. Bu editörlerin temelinde ise metin işleme fonksiyonları yatmaktadır. <b><b>Zengin metin editörü JavaScript ile nasıl yapılır?</b></b> sorusu, birçok geliştiricinin ilgisini çeken ve üzerinde düşünülmesi gereken bir konudur. JavaScript’in sağladığı çeşitli metin işleme fonksiyonları, kullanıcıların metinlerine biçim verme, stil ekleme ve karmaşık içerikler oluşturma gibi pek çok olanak sunar.</p>

<p>Örneğin, string manipülasyonu ile ilgili fonksiyonlar, editör içerisinde yazılan metinlerin dinamik olarak değiştirilmesini sağlar. 'replace', 'substring' ve 'trim' gibi fonksiyonlar, metin üzerinde kolayca işlem yapmamıza yardımcı olur. Aynı zamanda, kullanıcıların ihtiyaçlarına göre özelleştirilebilir bir yapı sunmanın yanı sıra, kullanıcı dostu bir deneyim oluşturur.</p>

<p>Bir diğer önemli metin işleme fonksiyonu ise düzenleme yetenekleridir. Metinleri kelime, cümle veya paragraf düzeyinde işleme gibi fonksiyonlar, kullanıcıların metinlerini istedikleri gibi şekillendirmelerine olanak tanır. Örneğin, 'split' fonksiyonu, bir metni belirli bir ayırıcıya göre bölerek düzenlemeyi kolaylaştırır. Böylece kullanıcılar, metinlerini daha anlaşılır ve okunabilir hale getirebilirler.</p>

<p>Tüm bunların yanı sıra, JavaScript içerisinde kullanılan regex (düzenli ifadeler) gibi güçlü araçlar da, metinlerin belirli kalıplarla eşleşmesini sağlarken, karmaşık sorgularla kullanıcıların işini kolaylaştırır. Sonuç olarak, <b><b>Zengin metin editörü JavaScript ile nasıl yapılır?</b></b> sorusunun cevabı, bu güçlü metin işleme fonksiyonları ve araçlarını etkili bir şekilde kullanmakla mümkündür.</p><h2>Kullanıcı Arayüzü Tasarımı ve UX</h2>
<b>Zengin metin editörü JavaScript ile nasıl yapılır?</b> sorusuna cevap verirken, kullanıcı arayüzü tasarımı ve kullanıcı deneyiminin (UX) önemini unutmamak gerekir. Kullanıcıların bu tip araçlarla etkileşimde bulunurken rahat ve sezgisel bir deneyim yaşaması hedeflenmelidir.

Zengin metin editörleri, metin formatlama, stil uygulama ve içerik yönetimi gibi işlevsellikler sunarak kullanıcıların çalışmalarını daha verimli hale getirir. Kullanıcı arayüzü tasarımında, düzenli ve çekici bir görünüm sağlamak kritik öneme sahiptir. Kullanıcıların ihtiyaçlarına hitap eden anlaşılır ikonlar ve basit menü yapılandırmaları, editörün erişilebilirliğini artırır.

Ayrıca, UX tasarımında kullanıcı geribildirimine dikkat etmek, kullanıcıların bu editörle olan deneyimini pozitif yönde etkileyecektir. Hızlı tepki veren bir arayüz, kullanıcının aradığını kolayca bulmasını sağlar. Dolayısıyla, <b>Zengin metin editörü JavaScript ile nasıl yapılır?</b> konusundaki başarı, kullanıcı arayüzü tasarımı ve kullanıcı deneyiminde saklıdır. Bu nedenle, kullanıcı odaklı bir yaklaşım benimsemek, başarılı bir zengin metin editörü oluşturmanın anahtarıdır.<h2>Veritabanı Entegrasyonu ve Veri Yönetimi</h2>

Zengin metin editörü <b>JavaScript ile nasıl yapılır?</b> sorusu, günümüzde web geliştiricileri için sıkça karşılaşılan ve önem arz eden bir konudur. Veritabanı entegrasyonu, bu editörlerin işlevselliğini arttırmak ve kullanıcı deneyimini geliştirmek için hayati bir role sahiptir. Kullanıcıların metin içeriklerini depolamak, düzenlemek ve yönetmek için güvenilir bir veritabanı sistemine ihtiyaçları vardır.

Veri yönetimi, verilerin organize bir şekilde tutulmasını sağlarken, aynı zamanda bu verilere hızlı bir erişim imkanı sunar. Bu aşamada, veritabanı ile zengin metin editörü arasında bir köprü kurmak gerekmektedir. Örneğin, bir kullanıcı metin editöründe bir makale yazdığında, bu metin anında veritabanına kaydedilmeli ve gerektiğinde bu verilere ulaşılabilmelidir.

Zengin metin editörünün arka planda çalışabilmesi için bir API üzerinden bu entegrasyonun gerçekleştirilmesi, hem veri akışının sağlıklı bir şekilde devam etmesine olanak tanır hem de veri bütünlüğünü korur. Bu sayede, kullanıcılar yalnızca metin üzerinde çalışmakla kalmaz, aynı zamanda verilerini güvenli bir şekilde yönetebilirler.

Sonuç olarak, zengin metin editörü <b>JavaScript ile nasıl yapılır?</b> sorusunun cevabında, veritabanı entegrasyonu ve veri yönetimi konularının önemi büyüktür. Doğru bir entegre yapı, kullanıcıların deneyimlerini olumlu yönde etkilemekte ve uygulamanın genel performansını artırmaktadır.<h2>Taşınabilirlik ve Çoklu Tarayıcı Desteği</h2>

Zengin metin editörü <b>JavaScript ile nasıl yapılır?</b> sorusu, modern web geliştirme dünyasında oldukça önemli bir konudur. Bu tür bir editörün en yaygın ve etkili şekilde çalışabilmesi için, taşınabilirlik ve çoklu tarayıcı desteği gibi temel özellikler gereklidir. Taşınabilirlik, kullanıcıların farklı cihazlarda ve platformlarda kesintisiz bir deneyim yaşamasını sağlar. Kullanıcılar, bir masaüstü bilgisayardan, bir tablet veya akıllı telefona geçiş yaptıklarında, editörün işlevselliğinin kaybolmaması kritik öneme sahiptir.

Aynı zamanda, <b>JavaScript ile nasıl yapılır?</b> sorusunun yanıtını ararken, farklı web tarayıcılarının sağlayacağı desteği de göz önünde bulundurmak önemlidir. Örneğin, Chrome, Firefox, Safari ve Edge gibi popüler tarayıcıların, zengin metin editörünün tüm özelliklerini tutarlı bir şekilde desteklemesi, kullanıcı deneyimini doğrudan etkileyen bir faktördür. Bu yüzden, editör geliştirilirken, geniş bir tarayıcı yelpazesi üzerinde test edilmesi ve uyumluluk sorunlarının giderilmesi gerekmektedir.

Sonuç olarak, zengin metin editörleri, <b>JavaScript ile nasıl yapılır?</b> sorusunun yanıtı sadece teknik bilgi değil, aynı zamanda kullanıcı dostu bir deneyim sunma çabasını da içerir. Taşınabilirlik ve çoklu tarayıcı desteği, bu çabanın en önemli bileşenlerindendir ve başarılı bir editör geliştirmek isteyen her geliştiricinin mutlaka dikkate alması gereken unsurlardır.<h2>Hata Ayıklama ve Performans İyileştirme</h2>

Zengin metin editörü <b>JavaScript ile nasıl yapılır?</b> sorusu, yazılımcıların karşılaştığı yaygın bir konu olmuştur. Ancak bu sürecin en kritik aşamalarından biri, hata ayıklama ve performans iyileştirme süreçleridir. Zengin metin editörleri genellikle kullanıcı etkileşimi açısından yoğun bir şekilde kullanılır, bu nedenle performansın yüksek tutulması oldukça önemlidir.

Hata ayıklama süreci, kodun beklenmeyen bir şekilde çalıştığında devreye girer. JavasScript geliştiricileri, tarayıcı konsolunu kullanarak hataları bulabilir ve düzeltebilir. Konsoldan alınan hata mesajları, geliştiricilerin problemi anlamalarına ve çözüm geliştirmelerine yardımcı olur. Geliştiricilerin, dikkatli bir şekilde kodlarını incelemesi ve gerekirse adım adım çalışma yöntemi ile hata ayıklaması, sürecin başarısını artırır.

Performans iyileştirmeleri, zengin metin editörü uygulamaları için önemli bir diğer konudur. Kullanıcı deneyimini artırmak için yükleme süreleri, bellekteki kayıtlar ve işleme süreleri gibi bazı temel bileşenlere odaklanmak gerekiyor. Öncelikle, gereksiz DOM güncellemelerini en aza indirmek, uygulamanın hızını artırmada etkili bir yöntemdir. Ayrıca, aşırı ani animasyonlardan kaçınmak ve verimli olay dinleyicileri kullanmak, genel performansı ciddi şekilde iyileştirebilir.

Sonuç olarak, zengin metin editörü <b>JavaScript ile nasıl yapılır?</b> sorusunu cevaplamak için yalnızca iyi bir plan değil, aynı zamanda etkili hata ayıklama ve performans iyileştirme stratejileri de gereklidir. Bu alanlarda yapılan başarılar, kullanıcıların deneyimini doğrudan etkileyerek, onların uygulamayı daha etkin bir şekilde kullanmalarını sağlar.<h2>Zengin Metin Editörü Örnek Projeleri</h2>

Zengin metin editörü, kullanıcıların metin formatlaması yapmasına olanak sağlayan kullanışlı ve pratik bir araçtır. Bu tür projeler genellikle JavaScript kullanılarak geliştirilir. <b><b>Zengin metin editörü JavaScript ile nasıl yapılır?</b></b> sorusu, yazılımcıların bu alanda nasıl ilerleyeceklerini anlamalarına yardımcı olabilir.

Örneğin, basit bir zengin metin editörü prototipi oluşturmak isteyen geliştiriciler, HTML5 ve CSS3 ile desteklenen JavaScript kütüphanelerini kullanabilirler. Bu tür projelerde, metin stillerinin (kalın, italik, altı çizili) değiştirilmesi gibi temel işlevler ön plandadır. Ayrıca, kullanıcı deneyimini artırmak için sürükleyici ve etkileşimli özellikler eklemek de önemlidir.

Farklı zengin metin editörü örnek projeleri, metin renklerini değiştirme, madde işaretli ve numaralı listeler oluşturma gibi özellikler sunarak kullanıcıların ihtiyaçlarını karşılayabilir. Bu projeler, hem kullanıcı dostu arayüzleri hem de fonksiyonel yapıları ile dikkat çeker.

Sonuç olarak, <b><b>Zengin metin editörü JavaScript ile nasıl yapılır?</b></b> sorusu, geliştiricilerin farklı platformlarda kullanabileceği yaratıcı projeler için iyi bir başlangıç noktasıdır. Öğrenme süreci içerisinde bu tür örnek projelere göz atmak, yeni ve heyecan verici fikirler edinmeyi sağlar.<h2>Kullanım ve Destek Kaynakları</h2>

<b>Zengin metin editörü JavaScript ile nasıl yapılır?</b> sorusunu yanıtlamak için önce birkaç temel kavramı anlamak önemlidir. Kullanımı kolay ve etkili bir zengin metin editörü oluşturmak için, HTML, CSS ve JavaScript gibi temel web teknolojilerine hakim olmanız gerekmektedir. JavaScript kullanarak bu editörün arka ucunu güçlendirebilir ve kullanıcılara metinlerini iç tasarım özellikleriyle düzenleme imkanı sunabilirsiniz.

Zengin metin editörleri genellikle içerik düzenleme ile ilgili durumlarda kullanılmaktadır ve bu nedenle kullanıcı dostu bir arayüz tasarlamak önemlidir. Nitelikli bir zengin metin editörü, kullanıcıların metinlerini zenginleştirmek için biçimlendirme, yazı tipi, renk ve diğer tasarım özelliklerini kolayca kullanmalarını sağlamalıdır. Bu konuda birçok açık kaynaklı kütüphane ve ortam mevcuttur.

Bu tür bir editör geliştirirken, ilgili dokümantasyon ve topluluk forumları, destek kaynakları arasında en önemli yerleri alır. Örneğin, [Quill](https://quilljs.com/), [TinyMCE](https://www.tiny.cloud/) veya [CKEditor](https://ckeditor.com/) gibi popüler JavaScript kütüphanelerini kullanarak ilham alabilir ve projelerinizi daha hızlı bir şekilde geliştirip, daha işlevsel hale getirebilirsiniz.

Sonuç olarak, <b><b>Zengin metin editörü JavaScript ile nasıl yapılır?</b></b> sorusunun cevabı, doğru kaynakları ve topluluk desteğini kullanarak daha kolay hale gelebilir. Kendi projenizde bu kaynakları değerlendirerek işlevsel ve etkili bir çözüm elde edebilirsiniz.
        </div>

<div class="mt-12 pt-8 border-t border-ek-border">
                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Etiketler</h3>
                <div class="flex flex-wrap gap-2">
                        <a href="/tr/blog?tag=Web Uygulamaları" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
                            Web Uygulamaları
                        </a>
                        <a href="/tr/blog?tag=JavaScript" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
                            JavaScript
                        </a>
                        <a href="/tr/blog?tag=Kullanıcı Arayüzü" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
                            Kullanıcı Arayüzü
                        </a>
                        <a href="/tr/blog?tag=Zengin Metin Editörü" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
                            Zengin Metin Editörü
                        </a>
                        <a href="/tr/blog?tag=Metin Biçimlendirme" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
                            Metin Biçimlendirme
                        </a>
                </div>
            </div>

<div class="mt-8 pt-8 border-t border-ek-border">
            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Bu yazıyı paylaş</h3>
            <div class="flex gap-3">
                <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fzengin-metin-editoru-javascript-ile-nasil-yapilir&text=Zengin%20metin%20edit%C3%B6r%C3%BC%20JavaScript%20ile%20nas%C4%B1l%20yap%C4%B1l%C4%B1r%3F" target="_blank" rel="noopener noreferrer" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors">
                    <i class="fab fa-x-twitter"></i>
                </a>
                <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fzengin-metin-editoru-javascript-ile-nasil-yapilir" target="_blank" rel="noopener noreferrer" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fzengin-metin-editoru-javascript-ile-nasil-yapilir" target="_blank" rel="noopener noreferrer" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="mailto:?subject=Zengin%20metin%20edit%C3%B6r%C3%BC%20JavaScript%20ile%20nas%C4%B1l%20yap%C4%B1l%C4%B1r%3F&body=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fzengin-metin-editoru-javascript-ile-nasil-yapilir" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors">
                    <i class="fas fa-envelope"></i>
                </a>
            </div>
        </div>
    </div>
</article>

<section class="pb-24 px-4 bg-ek-darker">
        <div class="max-w-7xl mx-auto py-16">
            <h2 class="section-title text-center mb-12">İlgili Yazılar</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <a href="/tr/b/web3-gelistirme-rehberi-akilli-kontratlar-defi" class="glass-card overflow-hidden group hover:border-ek-accent/30 transition-all duration-300">
                            <img data-src="/img/blog/1sg0qi1e.webp" alt="Web3 ve blockchain geliştirme görseli" class="lazyload w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold group-hover:text-ek-accent-light transition-colors">Web3 Geliştirme Rehberi: Akıllı Kontratlardan DeFi'ye Kapsamlı Kılavuz</h3>
                            <p class="text-gray-500 text-sm mt-2">Mar 29, 2026</p>
                        </div>
                    </a>
                    <a href="/tr/b/yesil-bt-surdurulebilir-yazilim-cevre-duyarli-teknoloji" class="glass-card overflow-hidden group hover:border-ek-accent/30 transition-all duration-300">
                            <img data-src="/img/blog/yji3szmz.webp" alt="Yeşil BT ve sürdürülebilir yazılım geliştirme" class="lazyload w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold group-hover:text-ek-accent-light transition-colors">Yeşil BT ve Sürdürülebilir Yazılım: Çevreye Duyarlı Teknoloji Geliştirme Rehberi</h3>
                            <p class="text-gray-500 text-sm mt-2">Mar 29, 2026</p>
                        </div>
                    </a>
                    <a href="/tr/b/github-actions-ci-cd-rehberi-workflow-matrix-build" class="glass-card overflow-hidden group hover:border-ek-accent/30 transition-all duration-300">
                            <img data-src="/img/blog/wrncohrs.webp" alt="GitHub Actions CI/CD otomasyon ve DevOps" class="lazyload w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold group-hover:text-ek-accent-light transition-colors">GitHub Actions ile CI/CD Rehberi: Workflow, Matrix Build ve Deployment</h3>
                            <p class="text-gray-500 text-sm mt-2">Mar 29, 2026</p>
                        </div>
                    </a>
            </div>
        </div>
    </section>

</main>

<footer class="bg-ek-darker border-t border-ek-border">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
            <div class="lg:col-span-1">
                <a href="/" class="flex items-center gap-2 text-2xl font-bold gradient-text">
                    <img src="/img/favicon-96x96.png" alt="Ekolsoft" style="height: 1.75em; width: 1.75em;">
                    Ekolsoft
                </a>
                <p class="mt-4 text-gray-400 text-sm leading-relaxed">
                    Web ve mobil uygulamalardan yapay zekâ destekli sistemlere kadar akıllı yazılım çözümleri geliştiriyoruz. Büyümeye hazır işletmeler için tam kapsamlı geliştirme.
                </p>
                <div class="flex space-x-4 mt-6">
                    <a href="https://www.linkedin.com/company/ekolsoft" target="_blank" rel="noopener noreferrer"
                       class="text-gray-500 hover:text-ek-accent-light transition-colors duration-200">
                        <i class="fa-brands fa-linkedin-in text-lg"></i>
                    </a>
                    <a href="https://github.com/msanlisavas" target="_blank" rel="noopener noreferrer"
                       class="text-gray-500 hover:text-ek-accent-light transition-colors duration-200">
                        <i class="fa-brands fa-github text-lg"></i>
                    </a>
                    <a href="https://instagram.com/ekolsoft" target="_blank" rel="noopener noreferrer"
                       class="text-gray-500 hover:text-ek-accent-light transition-colors duration-200">
                        <i class="fa-brands fa-instagram text-lg"></i>
                    </a>
                </div>
            </div>

<div>
                <h3 class="text-white font-semibold mb-4">Hizmetler</h3>
                <ul class="space-y-3">
                    <li><a href="/tr/services/software-solutions/web-development" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Web Geliştirme</a></li>
                    <li><a href="/tr/services/software-solutions/mobile-development" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Mobil Geliştirme</a></li>
                    <li><a href="/tr/services/ai-solutions" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Yapay Zekâ Çözümleri</a></li>
                    <li><a href="/tr/services/ai-content-solutions" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Yapay Zekâ İçerik Çözümleri</a></li>
                    <li><a href="/tr/services/infrastructure" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Altyapı</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-white font-semibold mb-4">Çocuk Zeka Oyunları</h3>
                <ul class="space-y-3">
                    <li><a href="/Sudoku" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Sudoku</a></li>
                    <li><a href="/Maze" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Labirent</a></li>
                    <li><a href="/BlockBuilding" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Blok Yapı</a></li>
                    <li><a href="/robotik-kodlama" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Robotik Kodlama</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-white font-semibold mb-4">Şirket</h3>
                <ul class="space-y-3">
                    <li><a href="/#about" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Hakkımızda</a></li>
                    <li><a href="/tr/blog" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Blog</a></li>
                    <li><a href="/portfolio" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Portföy</a></li>
                    <li><button type="button" onclick="openContactModal()" class="text-gray-400 hover:text-white text-sm transition-colors duration-200 bg-transparent border-0 p-0 cursor-pointer">İletişim</button></li>
                    <li><a href="/tr/p/gizlilik-sozlesmesi" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Gizlilik Politikası</a></li>
                    <li><a href="/tr/p/cerez-politikasi" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Çerez Politikası</a></li>
                    <li><a href="/tr/p/kisisel-verilerin-korunmasi" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Kişisel Verilerin Korunması</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-white font-semibold mb-4">Bize Ulaşın</h3>
                <ul class="space-y-3">
                    <li class="flex items-center space-x-3 text-gray-400 text-sm">
                        <i class="fa-solid fa-envelope text-ek-accent-light"></i>
                        <span>info@ekolsoft.com</span>
                    </li>
                        <li>
                            <a href="https://wa.me/+905334049799?text=Merhaba%2C+Ekolsoft+websitesinden+geliyorum+ve+bilgi+almak+istiyorum." target="_blank" rel="noopener noreferrer"
                               class="flex items-center space-x-3 text-gray-400 hover:text-green-400 text-sm transition-colors duration-200">
                                <i class="fa-brands fa-whatsapp text-green-400"></i>
                                <span>WhatsApp</span>
                            </a>
                        </li>
                </ul>
            </div>
        </div>
    </div>

<div class="border-t border-ek-border">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <p class="text-center text-gray-500 text-sm">
                © 2026 Ekolsoft. Tüm hakları saklıdır.
            </p>
        </div>
    </div>
</footer>

<div class="cookieDialog fixed inset-0 z-[1010] flex items-center justify-center p-4 hidden">
        <div class="cookieBox relative w-full max-w-lg bg-ek-darker/95 backdrop-blur-lg border border-ek-border rounded-2xl p-6 sm:p-8 shadow-2xl shadow-ek-accent/10 text-gray-300">
            
            <a href="#" class="cookieClose absolute top-4 right-4 text-gray-500 hover:text-white transition-colors text-xl leading-none" title="close">✖</a>

<h2 class="text-lg sm:text-xl font-bold text-white mb-3">Çerez Onayı</h2>
            <p class="text-sm text-gray-400 mb-5 leading-relaxed">Bu web sitesi, içeriği kişiselleştirmek ve trafiğimizi analiz etmek için çerezler kullanır.</p>

<div class="space-y-4 mb-5">
                <div class="flex items-center justify-between gap-4 bg-white/5 rounded-xl px-4 py-3">
                    <div>
                        <span class="block text-sm font-semibold text-white">Gerekli</span>
                        <span class="block text-xs text-gray-500 mt-0.5">Gerekli çerezler, temel işlevleri etkinleştirerek bir web sitesini kullanılabilir hale getirmek için gereklidir. Bu çerezler olmadan web sitesi düzgün çalışamaz. (her zaman aktif)</span>
                    </div>
                    <label class="relative inline-flex items-center cursor-not-allowed">
                        <input type="checkbox" name="necessaryCookiesConsent" id="necessaryCookiesConsent_input" disabled="disabled" checked="checked" class="sr-only peer">
                        <div class="w-11 h-6 bg-ek-accent rounded-full peer-checked:bg-ek-accent"></div>
                        <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"></div>
                    </label>
                </div>
                <div class="flex items-center justify-between gap-4 bg-white/5 rounded-xl px-4 py-3">
                    <div>
                        <span class="block text-sm font-semibold text-white">Pazarlama</span>
                        <span class="block text-xs text-gray-500 mt-0.5">Pazarlama çerezleri, ziyaretçileri web siteleri arasında izlemek için kullanılır.</span>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="marketingCookiesConsent" id="marketingCookiesConsent_input" class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-600 rounded-full peer-checked:bg-ek-accent transition-colors"></div>
                        <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"></div>
                    </label>
                </div>
            </div>

<p class="text-xs text-gray-500 mb-5">
                Çerezler hakkında bilgi edinebilir ve çerez onayı ayarlarınızı değiştirebilirsiniz
                <a href="/tr/p/cerez-politikasi" class="text-ek-accent-light hover:text-white transition-colors underline underline-offset-2">Çerez Politikası sayfası</a>
            </p>

<div id="cookieDialog_buttonbar" class="flex flex-col sm:flex-row gap-3">
                <input type="submit" name="" value="Tercihleri kaydet" id="coookieDialog_save_button"
                       class="cookieNoticeButton flex-1 px-5 py-2.5 border border-ek-border text-white text-sm font-medium rounded-xl cursor-pointer bg-transparent hover:border-ek-accent hover:text-ek-accent-light transition-all" title="">
                <input type="submit" name="" value="Tümüne izin ver" id="coookieDialog_acceptAll_button"
                       class="cookieNoticeButton flex-1 px-5 py-2.5 bg-gradient-to-r from-ek-accent to-purple-600 text-white text-sm font-medium rounded-xl cursor-pointer border-0 hover:shadow-[0_0_20px_rgba(99,102,241,0.4)] transition-all" title="">
            </div>
        </div>
    </div>
</div>

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Ekolsoft",
        "url": "https://ekolsoft.com",
        "description": "AI Solutions & Software Development",
        "sameAs": [
            "https://www.linkedin.com/company/ekolsoft",
            "https://github.com/msanlisavas",
            "https://instagram.com/ekolsoft"
        ]
    }
    </script>

if (headings.length === 0) {
            tocContainer.style.display = "none";
            return;
        }

// Generate TOC
        headings.forEach(function (heading, index) {
            var tocItem = document.createElement("li");
            var tocLink = document.createElement("a");

var headingID = "heading-" + index;
            heading.setAttribute("id", headingID);

tocLink.textContent = heading.textContent;
            tocLink.href = "#" + headingID;
            tocLink.classList.add("toc-link");

// Indent based on heading level
            var level = parseInt(heading.tagName.charAt(1)) - 2;
            if (level > 0) {
                tocLink.style.paddingLeft = (12 + level * 16) + "px";
            }

tocItem.appendChild(tocLink);
            toc.appendChild(tocItem);
        });

// Toggle TOC collapse/expand
        tocToggleButton.addEventListener("click", function () {
            if (tocContainer.classList.contains("collapsed")) {
                tocContainer.classList.remove("collapsed");
                tocToggleButton.textContent = "-";
            } else {
                tocContainer.classList.add("collapsed");
                tocToggleButton.textContent = "+";
            }
        });

// Smooth scrolling with offset for fixed headers
        var offset = 100;
        toc.addEventListener("click", function (e) {
            if (e.target.tagName === "A") {
                e.preventDefault();
                var targetId = e.target.getAttribute("href").substring(1);
                var targetElement = document.getElementById(targetId);
                var elementPosition = targetElement.getBoundingClientRect().top;
                var offsetPosition = elementPosition - offset;

window.scrollTo({
                    top: window.pageYOffset + offsetPosition,
                    behavior: "smooth"
                });
            }
        });

// Highlight active section while scrolling
        window.addEventListener("scroll", function () {
            var currentActive = null;
            headings.forEach(function (heading) {
                var bounding = heading.getBoundingClientRect();
                if (bounding.top <= 100 && bounding.bottom > 100) {
                    currentActive = heading.getAttribute("id");
                }
            });

document.querySelectorAll(".toc-link").forEach(function (link) {
                link.classList.remove("active");
                if (link.getAttribute("href") === "#" + currentActive) {
                    link.classList.add("active");
                }
            });
        });
    });
</script>