My Example<\/title>\n\n\n<style>\n :root {\n \/* \n Demonstration image from Unsplash by Paul Gilmore. \n For best results, replace this URL with your own high-quality background image.\n *\/\n --fsi-bg-image: url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM4.png');\n --fsi-min-height: 100vh;\n --fsi-padding: 2rem 1.5rem;\n --fsi-text-color: #ffffff;\n --fsi-overlay-color: rgba(0, 0, 0, 0.4);\n --fsi-cta-border-color: #ffffff;\n }\n .fsi-hero {\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n position: relative;\n width: 100%;\n min-height: var(--fsi-min-height);\n padding: var(--fsi-padding);\n \n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n background-image: var(--fsi-bg-image);\n background-attachment: fixed;\n background-size: cover;\n background-position: center;\n }\n .fsi-hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--fsi-overlay-color);\n z-index: 1;\n }\n .fsi-hero * {\n box-sizing: border-box;\n }\n .fsi-hero-content {\n position: relative;\n z-index: 2;\n max-width: 700px;\n }\n .fsi-hero-title {\n color: var(--fsi-text-color);\n margin: 0 0 0.5rem 0;\n font-size: clamp(3rem, 8vw, 5.5rem);\n font-weight: 700;\n line-height: 1.1;\n }\n .fsi-hero-tagline {\n color: var(--fsi-text-color);\n margin: 0 0 2.5rem 0;\n font-size: clamp(1.2rem, 3vw, 1.5rem);\n opacity: 0.9;\n font-weight: 300;\n letter-spacing: 1px;\n }\n .fsi-hero-cta {\n display: inline-block;\n background: transparent;\n color: var(--fsi-text-color);\n border: 2px solid var(--fsi-cta-border-color);\n padding: 0.8rem 2.2rem;\n font-size: 1rem;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 0.3s ease, color 0.3s ease;\n text-transform: uppercase;\n }\n .fsi-hero-cta:hover {\n background-color: var(--fsi-cta-border-color);\n color: #000000;\n }\n<\/style>\n\n\n<section class=\"fsi-hero\">\n <div class=\"fsi-hero-content\">\n <h1 class=\"fsi-hero-title\">Elara Vance<\/h1>\n <p class=\"fsi-hero-tagline\">Visual Artist & Designer<\/p>\n <a href=\"#\" role=\"button\" class=\"fsi-hero-cta\">ADA ETK\u0130NL\u0130K<\/a>\n <\/div>\n<\/section>\n\n\n\n<!DOCTYPE html>\n<title>My Example<\/title>\n\n\n<style>\n :root {\n --cph-padding: 3rem 1.5rem;\n --cph-bg-color: #f3f4f6;\n --cph-slide-text-color: #ffffff;\n --cph-nav-color: #1f2937;\n --cph-nav-hover-color: #000000;\n --cph-dots-color: #d1d5db;\n --cph-dots-active-color: #1f2937;\n }\n .carousel-hero {\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n background-color: var(--cph-bg-color);\n padding: var(--cph-padding);\n width: 100%;\n }\n .carousel-hero * {\n box-sizing: border-box;\n }\n .carousel-hero-container {\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n }\n .carousel-hero .carousel-track-container {\n overflow: hidden;\n border-radius: 8px;\n }\n .carousel-hero .carousel-track {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n .carousel-hero .carousel-slide {\n flex: 0 0 100%;\n min-height: 450px;\n width: 100%;\n position: relative;\n display: flex;\n align-items: flex-end;\n padding: 2.5rem;\n background-size: cover;\n background-position: center;\n color: var(--cph-slide-text-color);\n }\n .carousel-hero .carousel-slide::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.0) 100%);\n }\n .carousel-hero .slide-content {\n position: relative;\n z-index: 2;\n max-width: 600px;\n }\n .carousel-hero .slide-content h2 {\n font-size: clamp(1.75rem, 5vw, 2.5rem);\n margin-top: 0;\n margin-bottom: 0.5rem;\n font-weight: 700;\n line-height: 1.2;\n }\n .carousel-hero .slide-content p {\n margin: 0;\n line-height: 1.5;\n font-size: 1rem;\n }\n \/* Buttons *\/\n .carousel-hero .carousel-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(255,255,255,0.8);\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease;\n z-index: 10;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n }\n .carousel-hero .carousel-button:hover {\n background-color: #fff;\n }\n .carousel-hero .carousel-button.prev {\n left: 1rem;\n }\n .carousel-hero .carousel-button.next {\n right: 1rem;\n }\n .carousel-hero .carousel-button svg {\n width: 24px;\n height: 24px;\n stroke: var(--cph-nav-color);\n }\n \/* Dots *\/\n .carousel-hero .carousel-nav {\n display: flex;\n justify-content: center;\n gap: 0.75rem;\n margin-top: 1.5rem;\n }\n .carousel-hero .carousel-dot {\n border: none;\n background-color: var(--cph-dots-color);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n padding: 0;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .carousel-hero .carousel-dot.active {\n background-color: var(--cph-dots-active-color);\n }\n<\/style>\n\n\n<section class=\"carousel-hero\">\n <div class=\"carousel-hero-container\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Featured Projects\">\n\n <div class=\"carousel-track-container\">\n <div class=\"carousel-track\">\n \n <div class=\"carousel-slide\" \n role=\"group\" \n aria-roledescription=\"slide\"\n aria-label=\"1 of 3\"\n style=\"background-image:url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM5-1.png')\">\n <div class=\"slide-content\">\n <h2>Project Zenith: Enterprise SaaS<\/h2>\n <p>A comprehensive cloud-based solution for managing corporate logistics.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"carousel-slide\"\n role=\"group\" \n aria-roledescription=\"slide\"\n aria-label=\"2 of 3\"\n style=\"background-image:url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM3.png')\">\n <div class=\"slide-content\">\n <h2>Aura Health: Mobile Wellness App<\/h2>\n <p>An intuitive mobile app designed for tracking fitness and mental wellbeing.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"carousel-slide\"\n role=\"group\" \n aria-roledescription=\"slide\"\n aria-label=\"3 of 3\"\n style=\"background-image:url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM2.png')\">\n <div class=\"slide-content\">\n <h2>Nomad Creative: Brand Website<\/h2>\n <p>A portfolio website for a digital creative agency focused on user engagement.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <button class=\"carousel-button prev\" aria-label=\"Previous slide\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M15 18L9 12L15 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <button class=\"carousel-button next\" aria-label=\"Next slide\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 18L15 12L9 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n <div class=\"carousel-nav\" aria-label=\"Slide navigation\">\n \n <\/div>\n\n <\/div>\n<\/section>\n\n\n<script>\n(function(){\n const carouselContainer = document.querySelector('.carousel-hero-container');\n if (!carouselContainer) return;\n\n const track = carouselContainer.querySelector('.carousel-track');\n const slides = Array.from(track.children);\n const nextButton = carouselContainer.querySelector('.carousel-button.next');\n const prevButton = carouselContainer.querySelector('.carousel-button.prev');\n const nav = carouselContainer.querySelector('.carousel-nav');\n \n \/\/ Create nav dots\n slides.forEach((slide, i) => {\n const dot = document.createElement('button');\n dot.classList.add('carousel-dot');\n dot.setAttribute('aria-label', `Go to slide ${i + 1}`);\n if (i === 0) dot.classList.add('active');\n nav.appendChild(dot);\n \n dot.addEventListener('click', e => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n moveToSlide(currentIndex, i);\n });\n });\n\n const dots = Array.from(nav.children);\n const slideWidth = slides[0].getBoundingClientRect().width;\n\n const setSlidePosition = (slide, index) => {\n slide.style.left = slideWidth * index + 'px';\n };\n \/\/ Initially arrange slides side-by-side, but this is handled by Flexbox\n \/\/ slides.forEach(setSlidePosition);\n\n \/\/ Initial setup\n slides[0].classList.add('is-selected');\n\n const moveToSlide = (current, target) => {\n const targetSlide = slides[target];\n const currentSlide = slides[current];\n \n track.style.transform = `translateX(-${targetSlide.style.left || (target * slideWidth)}px)`;\n currentSlide.classList.remove('is-selected');\n targetSlide.classList.add('is-selected');\n\n const currentDot = nav.querySelector('.active');\n currentDot.classList.remove('active');\n dots[target].classList.add('active');\n\n \/\/ Show\/hide prev\/next buttons at ends\n if (target === 0) {\n prevButton.style.display = 'none';\n nextButton.style.display = 'block';\n } else if (target === slides.length - 1) {\n prevButton.style.display = 'block';\n nextButton.style.display = 'none';\n } else {\n prevButton.style.display = 'block';\n nextButton.style.display = 'block';\n }\n };\n \n \/\/ Initial button state\n prevButton.style.display = 'none';\n \n prevButton.addEventListener('click', e => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n const prevIndex = currentIndex - 1;\n moveToSlide(currentIndex, prevIndex);\n });\n \n nextButton.addEventListener('click', e => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n const nextIndex = currentIndex + 1;\n moveToSlide(currentIndex, nextIndex);\n });\n\n \/\/ Recalculate width on resize to be robust\n window.addEventListener('resize', () => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n const newSlideWidth = slides[0].getBoundingClientRect().width;\n track.style.transition = 'none'; \/\/ Disable transition for instant adjustment\n track.style.transform = `translateX(-${currentIndex * newSlideWidth}px)`;\n setTimeout(() => {\n track.style.transition = 'transform 0.5s ease-in-out';\n }, 10);\n });\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>My Example Elara Vance Visual Artist & Designer ADA ETK\u0130NL\u0130K My Example Project Zenith: Enterprise SaaS A comprehensive cloud-based solution for managing corporate logistics. Aura Health: Mobile Wellness App An intuitive mobile app designed for tracking fitness and mental wellbeing. Nomad Creative: Brand Website A portfolio website for a digital creative agency focused on user […]<\/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-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=69"}],"version-history":[{"count":17,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/69\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":69,"date":"2025-08-26T23:55:13","date_gmt":"2025-08-26T23:55:13","guid":{"rendered":"https:\/\/adaetkinlik.com.tr\/?page_id=69"},"modified":"2025-11-01T23:41:49","modified_gmt":"2025-11-01T23:41:49","slug":"galeri","status":"publish","type":"page","link":"https:\/\/adaetkinlik.com.tr\/?page_id=69","title":{"rendered":"Galeri"},"content":{"rendered":"\n

<\/p>\n\n\n\n\nMy Example<\/title>\n\n\n<style>\n :root {\n \/* \n Demonstration image from Unsplash by Paul Gilmore. \n For best results, replace this URL with your own high-quality background image.\n *\/\n --fsi-bg-image: url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM4.png');\n --fsi-min-height: 100vh;\n --fsi-padding: 2rem 1.5rem;\n --fsi-text-color: #ffffff;\n --fsi-overlay-color: rgba(0, 0, 0, 0.4);\n --fsi-cta-border-color: #ffffff;\n }\n .fsi-hero {\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n position: relative;\n width: 100%;\n min-height: var(--fsi-min-height);\n padding: var(--fsi-padding);\n \n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n background-image: var(--fsi-bg-image);\n background-attachment: fixed;\n background-size: cover;\n background-position: center;\n }\n .fsi-hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--fsi-overlay-color);\n z-index: 1;\n }\n .fsi-hero * {\n box-sizing: border-box;\n }\n .fsi-hero-content {\n position: relative;\n z-index: 2;\n max-width: 700px;\n }\n .fsi-hero-title {\n color: var(--fsi-text-color);\n margin: 0 0 0.5rem 0;\n font-size: clamp(3rem, 8vw, 5.5rem);\n font-weight: 700;\n line-height: 1.1;\n }\n .fsi-hero-tagline {\n color: var(--fsi-text-color);\n margin: 0 0 2.5rem 0;\n font-size: clamp(1.2rem, 3vw, 1.5rem);\n opacity: 0.9;\n font-weight: 300;\n letter-spacing: 1px;\n }\n .fsi-hero-cta {\n display: inline-block;\n background: transparent;\n color: var(--fsi-text-color);\n border: 2px solid var(--fsi-cta-border-color);\n padding: 0.8rem 2.2rem;\n font-size: 1rem;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 0.3s ease, color 0.3s ease;\n text-transform: uppercase;\n }\n .fsi-hero-cta:hover {\n background-color: var(--fsi-cta-border-color);\n color: #000000;\n }\n<\/style>\n\n\n<section class=\"fsi-hero\">\n <div class=\"fsi-hero-content\">\n <h1 class=\"fsi-hero-title\">Elara Vance<\/h1>\n <p class=\"fsi-hero-tagline\">Visual Artist & Designer<\/p>\n <a href=\"#\" role=\"button\" class=\"fsi-hero-cta\">ADA ETK\u0130NL\u0130K<\/a>\n <\/div>\n<\/section>\n\n\n\n<!DOCTYPE html>\n<title>My Example<\/title>\n\n\n<style>\n :root {\n --cph-padding: 3rem 1.5rem;\n --cph-bg-color: #f3f4f6;\n --cph-slide-text-color: #ffffff;\n --cph-nav-color: #1f2937;\n --cph-nav-hover-color: #000000;\n --cph-dots-color: #d1d5db;\n --cph-dots-active-color: #1f2937;\n }\n .carousel-hero {\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n background-color: var(--cph-bg-color);\n padding: var(--cph-padding);\n width: 100%;\n }\n .carousel-hero * {\n box-sizing: border-box;\n }\n .carousel-hero-container {\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n }\n .carousel-hero .carousel-track-container {\n overflow: hidden;\n border-radius: 8px;\n }\n .carousel-hero .carousel-track {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n .carousel-hero .carousel-slide {\n flex: 0 0 100%;\n min-height: 450px;\n width: 100%;\n position: relative;\n display: flex;\n align-items: flex-end;\n padding: 2.5rem;\n background-size: cover;\n background-position: center;\n color: var(--cph-slide-text-color);\n }\n .carousel-hero .carousel-slide::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.0) 100%);\n }\n .carousel-hero .slide-content {\n position: relative;\n z-index: 2;\n max-width: 600px;\n }\n .carousel-hero .slide-content h2 {\n font-size: clamp(1.75rem, 5vw, 2.5rem);\n margin-top: 0;\n margin-bottom: 0.5rem;\n font-weight: 700;\n line-height: 1.2;\n }\n .carousel-hero .slide-content p {\n margin: 0;\n line-height: 1.5;\n font-size: 1rem;\n }\n \/* Buttons *\/\n .carousel-hero .carousel-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(255,255,255,0.8);\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease;\n z-index: 10;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n }\n .carousel-hero .carousel-button:hover {\n background-color: #fff;\n }\n .carousel-hero .carousel-button.prev {\n left: 1rem;\n }\n .carousel-hero .carousel-button.next {\n right: 1rem;\n }\n .carousel-hero .carousel-button svg {\n width: 24px;\n height: 24px;\n stroke: var(--cph-nav-color);\n }\n \/* Dots *\/\n .carousel-hero .carousel-nav {\n display: flex;\n justify-content: center;\n gap: 0.75rem;\n margin-top: 1.5rem;\n }\n .carousel-hero .carousel-dot {\n border: none;\n background-color: var(--cph-dots-color);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n padding: 0;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .carousel-hero .carousel-dot.active {\n background-color: var(--cph-dots-active-color);\n }\n<\/style>\n\n\n<section class=\"carousel-hero\">\n <div class=\"carousel-hero-container\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Featured Projects\">\n\n <div class=\"carousel-track-container\">\n <div class=\"carousel-track\">\n \n <div class=\"carousel-slide\" \n role=\"group\" \n aria-roledescription=\"slide\"\n aria-label=\"1 of 3\"\n style=\"background-image:url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM5-1.png')\">\n <div class=\"slide-content\">\n <h2>Project Zenith: Enterprise SaaS<\/h2>\n <p>A comprehensive cloud-based solution for managing corporate logistics.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"carousel-slide\"\n role=\"group\" \n aria-roledescription=\"slide\"\n aria-label=\"2 of 3\"\n style=\"background-image:url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM3.png')\">\n <div class=\"slide-content\">\n <h2>Aura Health: Mobile Wellness App<\/h2>\n <p>An intuitive mobile app designed for tracking fitness and mental wellbeing.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"carousel-slide\"\n role=\"group\" \n aria-roledescription=\"slide\"\n aria-label=\"3 of 3\"\n style=\"background-image:url('https:\/\/adaetkinlik.com.tr\/wp-content\/uploads\/2025\/10\/RESIM2.png')\">\n <div class=\"slide-content\">\n <h2>Nomad Creative: Brand Website<\/h2>\n <p>A portfolio website for a digital creative agency focused on user engagement.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <button class=\"carousel-button prev\" aria-label=\"Previous slide\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M15 18L9 12L15 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <button class=\"carousel-button next\" aria-label=\"Next slide\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 18L15 12L9 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n <div class=\"carousel-nav\" aria-label=\"Slide navigation\">\n \n <\/div>\n\n <\/div>\n<\/section>\n\n\n<script>\n(function(){\n const carouselContainer = document.querySelector('.carousel-hero-container');\n if (!carouselContainer) return;\n\n const track = carouselContainer.querySelector('.carousel-track');\n const slides = Array.from(track.children);\n const nextButton = carouselContainer.querySelector('.carousel-button.next');\n const prevButton = carouselContainer.querySelector('.carousel-button.prev');\n const nav = carouselContainer.querySelector('.carousel-nav');\n \n \/\/ Create nav dots\n slides.forEach((slide, i) => {\n const dot = document.createElement('button');\n dot.classList.add('carousel-dot');\n dot.setAttribute('aria-label', `Go to slide ${i + 1}`);\n if (i === 0) dot.classList.add('active');\n nav.appendChild(dot);\n \n dot.addEventListener('click', e => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n moveToSlide(currentIndex, i);\n });\n });\n\n const dots = Array.from(nav.children);\n const slideWidth = slides[0].getBoundingClientRect().width;\n\n const setSlidePosition = (slide, index) => {\n slide.style.left = slideWidth * index + 'px';\n };\n \/\/ Initially arrange slides side-by-side, but this is handled by Flexbox\n \/\/ slides.forEach(setSlidePosition);\n\n \/\/ Initial setup\n slides[0].classList.add('is-selected');\n\n const moveToSlide = (current, target) => {\n const targetSlide = slides[target];\n const currentSlide = slides[current];\n \n track.style.transform = `translateX(-${targetSlide.style.left || (target * slideWidth)}px)`;\n currentSlide.classList.remove('is-selected');\n targetSlide.classList.add('is-selected');\n\n const currentDot = nav.querySelector('.active');\n currentDot.classList.remove('active');\n dots[target].classList.add('active');\n\n \/\/ Show\/hide prev\/next buttons at ends\n if (target === 0) {\n prevButton.style.display = 'none';\n nextButton.style.display = 'block';\n } else if (target === slides.length - 1) {\n prevButton.style.display = 'block';\n nextButton.style.display = 'none';\n } else {\n prevButton.style.display = 'block';\n nextButton.style.display = 'block';\n }\n };\n \n \/\/ Initial button state\n prevButton.style.display = 'none';\n \n prevButton.addEventListener('click', e => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n const prevIndex = currentIndex - 1;\n moveToSlide(currentIndex, prevIndex);\n });\n \n nextButton.addEventListener('click', e => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n const nextIndex = currentIndex + 1;\n moveToSlide(currentIndex, nextIndex);\n });\n\n \/\/ Recalculate width on resize to be robust\n window.addEventListener('resize', () => {\n const currentSlide = track.querySelector('.is-selected');\n const currentIndex = slides.findIndex(slide => slide === currentSlide);\n const newSlideWidth = slides[0].getBoundingClientRect().width;\n track.style.transition = 'none'; \/\/ Disable transition for instant adjustment\n track.style.transform = `translateX(-${currentIndex * newSlideWidth}px)`;\n setTimeout(() => {\n track.style.transition = 'transform 0.5s ease-in-out';\n }, 10);\n });\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>My Example Elara Vance Visual Artist & Designer ADA ETK\u0130NL\u0130K My Example Project Zenith: Enterprise SaaS A comprehensive cloud-based solution for managing corporate logistics. Aura Health: Mobile Wellness App An intuitive mobile app designed for tracking fitness and mental wellbeing. Nomad Creative: Brand Website A portfolio website for a digital creative agency focused on user […]<\/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-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=69"}],"version-history":[{"count":17,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=\/wp\/v2\/pages\/69\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/adaetkinlik.com.tr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}