<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atolye F&O Mimarlık - Anasayfa</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=AFACUD+FLUX:wght@200;400&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="https://abass.online/mainpage/images/favicon.png">

    <!-- Animasyon CSS Kodu -->
    <style>
    /* Nokta overlay için stil */
.slider__overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(black 1px, transparent 1px);
  background-size: 3px 3px; /* Noktalar arası mesafe */
  opacity: 1; /* Saydamlık seviyesi */
  pointer-events: none; /* Tıklamayı engelle */
  z-index: 2; /* Overlay'i üstte tut */
}
.slider__overlay{
    background:linear-gradient(to bottom, transparent 0%, black 100%)!important;
}

        /* Animasyon için başlangıç durumları */
        .section_ {
            opacity: 0;
            transform: translateY(50px); /* Yavaşça yukarı kayma */
            transition: opacity 0.9s ease-out, transform 0.9s ease-out;
        }

        /* Animasyon sırasında görünür hale gelmesi */
        .fade-in {
            opacity: 1;
            transform: translateY(0);
        }
     
    </style>

</head>

<body>
     
<header id="main-header">

    
    <div class="header-container">
        <div class="logo">
            <a href="/"><img src="https://abass.online/logo.png" alt="Logo"></a>
            <!--<H2>ATOLYE F&O MİMARLIK</H2>-->
        </div>
        <div class="icons">
            <a  onclick="menuSearch()" class="icon-container">
                <img src="https://abass.online/svg/magnifying-glass-solid.svg" alt="Icon">
            </a>
            <a onclick="menu()" class="icon-container">
                <img src="https://abass.online/svg/bars-solid.svg" alt="Icon">
            </a>
        </div>
    </div>
</header>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <link rel="icon" type="image/png" href="https://abass.online/mainpage/images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Oregano:ital@0;1&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=AFACUD+FLUX:wght@200;400&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/a-cursive" rel="stylesheet">
</head>
   
<div class="cursor-icon"></div>




<style>
.atolyede-hayat:hover{
    color:#fff!important;
}

.search-area{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}
    .recommended-searches {
            width: 100%;
        max-width:400px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }

        .recommended-searches h2 {
            font-size: 16px;
            color: #fff;
            margin-bottom: 15px;
            font-weight: normal;
        }

        .recommended-searches ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .recommended-searches ul li {
            margin-bottom: 8px;
        }

        .recommended-searches ul li a {
            text-decoration: none;
            color: lightgray;
            font-size: 18px;
        }

        .recommended-searches ul li a:hover {
            text-decoration: underline;
        }
        .content_search_input {
    width: 600px;
    padding:20px;
    border-radius:10px;
    height: 30px;
    padding: 10px;
    background-color: #ececec;
    text-decoration: none;
}
</style>
<script>
    let lastScrollTop = 0;

    window.addEventListener('scroll', function () {
        const header = document.getElementById('main-header');
        let currentScroll = window.pageYOffset || document.documentElement.scrollTop;

        if (currentScroll > lastScrollTop) {
            header.classList.add('hide');
        } else {
            header.classList.remove('hide');
        }

        lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
    });
</script>
<script>
const cursor = document.createElement('div');
cursor.style.width = '20px'; // Cursor genişliği
cursor.style.height = '20px'; // Cursor yüksekliği

document.body.appendChild(cursor);

document.addEventListener('mousemove', function(event) {
    cursor.style.left = event.pageX + 'px';
    cursor.style.top = event.pageY + 'px';
});

</script>


<div id="menu" class="menu">
    <div class="icons">
        <a href="#" onclick="menu(),menuSearch()" class="icon-container-search">
            <img src="https://abass.online/svg/magnifying-glass-solid.svg" alt="Icon">
        </a>
        <a href="#" onclick="menu()" class="icon-container-exit">
            <img src="https://abass.online/svg/xmark-white.svg" alt="Icon">
        </a>
    </div>
    <div class="menu_content_container">
        <div class="menu_content_columns">
            <!-- Sol sütun: Başlık ve bağlantılar -->
            <div class="menu_content_column">
                <a href="/" class="menu_content_link menu_content_selected " contentid="index" data-bg="insaat1.jpeg">Anasayfa</a>
                <a href="/biz-kimiz" class="menu_content_link " contentid="whoweare" data-bg="insaat2.jpeg">Biz Kimiz</a>
                <a href="/ekibimiz" class="menu_content_link " contentid="teams" data-bg="insaat3.jpeg">Ekibimiz</a>
                <a href="/projeler" class="menu_content_link " contentid="projects" data-bg="insaat3.jpeg">Mimari Tasarım</a>
                <a href="/proje-musavirligi" class="menu_content_link " contentid="projects" data-bg="insaat3.jpeg">Proje Müşavirliği</a>
                <a href="/ebulten" class="menu_content_link " contentid="projects" data-bg="insaat3.jpeg">E-Bülten</a>
                <a href="/kariyer" class="menu_content_link " contentid="career" data-bg="insaat3.jpeg">Kariyer</a>
                <a href="/iletisim" class="menu_content_link " contentid="contact" data-bg="insaat3.jpeg">İletişim</a>
                <!--<a href="expertise.php" class="menu_content_link" contentid="expertise">Uzmanlık</a>
                <a href="#" class="menu_content_link" contentid="studio">Stüdyo</a>
                <a href="#" class="menu_content_link" contentid="people">İnsanlar</a>
                <a href="#" class="menu_content_link" contentid="news">Haberler</a>
                <a href="#" class="menu_content_link" contentid="insights">Görüşler</a>
                <a href="#" class="menu_content_link" contentid="careers" data-bg="insaat3.jpeg">Kariyer</a>
                <a href="contact.php" class="menu_content_link" contentid="contact" data-bg="insaat3.jpeg">İletişim</a>-->
            </div>

            <!-- Sağ sütun: Başlık, bağlantılar ve resim 
            <div class="menu_content_column hiddenContent  column_whoweare">
            <!--
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Hakkımızda</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Misyonumuz</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Vizyonumuz</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Neler Yapıyoruz</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent  column_teams">
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Kurucu Ekip</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Mimari Tasarım</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Saha Uygulama</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_projects">
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Bütün Projeler</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Kentsel Tasarım</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Ulaşım ve Altyapı</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Sağlık ve Eğitim</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Konut</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Kamu</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Ofis</a>
                </div>
            </div>
            <!--
            <div class="menu_content_column hiddenContent column_expertise">
                <h2 class="menu_content_title">Başlık 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Link 4</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Link 5</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">Link 6</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_studio">
                <h2 class="menu_content_title">asdasd 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">sssss</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">dddddd</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">aaaaa</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_people">
                <h2 class="menu_content_title">asdasd 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">sssss</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">dddddd</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">aaaaa</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_news">
                <h2 class="menu_content_title">asdasd 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">sssss</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">dddddd</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">aaaaa</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_insights">
                <h2 class="menu_content_title">asdasd 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">sssss</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">dddddd</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">aaaaa</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_careers">
                <h2 class="menu_content_title">asdasd 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">sssss</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">dddddd</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">aaaaa</a>
                </div>
            </div>
            <div class="menu_content_column hiddenContent column_contact">
                <h2 class="menu_content_title">asdasd 2</h2>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">sssss</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">dddddd</a>
                </div>
                <div class="menu_content_link_with_img">
                    <img src="svg/arrow-up.svg" alt="Icon" class="menu_content_img">
                    <a href="#" class="menu_content_linkRight">aaaaa</a>
                </div>
            </div>-->
        </div>
    </div>
    <div class="round-container">
        <a href="https://www.facebook.com/atolyefomimarlik?mibextid=LQQJ4d" class="round">
            <img src="https://abass.online/svg/facebook.svg" alt="Icon 1">
        </a>
        <a href="https://www.instagram.com/atolyefomimarlik?igsh=dnlxMDZscGh6MGU5" class="round">
            <img src="https://abass.online/svg/instagram.svg" alt="Icon 2">
        </a>
        <a href="https://www.linkedin.com/company/at%C3%B6lye89-mimarlik/" class="round">
            <img src="https://abass.online/svg/linkedin.svg" alt="Icon 2">
        </a>
      
        <a href="#" class="round">
            <img src="https://abass.online/svg/youtube.svg" alt="Icon 2">
        </a> 
       
    </div>
    <div class="round-right-container">
    <a href="https://abass.online/atolyede-hayat" style=" text-decoration:none!important;margin-right:70px;">
           <span  class=" opacity-75 atolyede-hayat" style="color:#fff;font-family: 'Oregano', regular;font-size:60px;transform:rotateZ(-7deg);color:#9E1C1F"> Atolyede Hayat...</span>
        </a>
    </div>
</div>
<div id="menuSrc" class="menuSrc">
    <div class="icons">
        <a href="#" onclick="menuSearch()" class="icon-container-exit">
            <img src="https://abass.online/svg/xmark-white.svg" alt="Icon">
        </a>
        <a href="#" onclick="menuSearch(),menu()" class="icon-container-search">
            <img src="https://abass.online/svg/bars-solid.svg" alt="Icon">
        </a>
    </div>
<!-- header.php -->
<div class="search-area"> 
<div class="content_search_container">
    <input class="content_search_input" type="text" placeholder="Arama Kelimesi">
    <button class="content_search_button"  style="display:none;" type="button">Ara</button>
</div>

       <div class="recommended-searches">
        <h2></h2>
        <ul>
            <li><a href="/projeler/royal-garden-villalari">Royal Garden Villaları</a></li>
            <li><a href="/projeler/mahmut-tazecioglu-villasi">Mahmut Tazecioğlu Villası</a></li>
            <li><a href="/projeler/royal-garden-villalari">Royal Garden Villaları</a></li>
            <li><a href="/projeler/pearl-of-nature-viillalari">Pearl Of Nature Villaları</a></li>
            <li><a href="/projeler/melek-enterili-tural-villasi">Melek Enterili Tural Villası</a></li>
            <li><a href="/projeler/hava-kose-villasi">Hava Köse Villası</a></li>
            <li><a href="/projeler/becen-panaroma-villalari">Becen Panaroma Villaları</a></li>
            
        </ul>
    </div>
</div>
    <!--<div class="content_search_text_group">
        <a href="#">Text 1</a>
        <a href="#">Text 2</a>
        <a href="#">Text 3</a>
        <a href="#">Text 4</a>
        <a href="#">Text 5</a>
        <a href="#">Text 6</a>
        <a href="#">Text 7</a>
        <a href="#">Text 8</a>
    </div>
    <div class="content_search_div_group">
        <h4>Recommended searches</h4>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 9
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 10
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 11
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 12
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 13
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 14
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 15
        </div>
        <div class="content_search_div">
            <img src="svg/arrow-up.svg" alt="Icon">
            Text 16
        </div>
    </div>-->
</div>
<!--
<div id="photo-panel" class="photo-panel"></div> -->
<script>
    const menuLinks = document.querySelectorAll('.menu_content_link');

    // Photo-panel div'ini seçiyoruz
    const photoPanel = document.getElementById('photo-panel');

    // Mouse ile menü linklerinin üzerine geldiğimizde arka planı değiştiriyoruz
    menuLinks.forEach(link => {
        link.addEventListener('mouseenter', () => {
            // Her bir linkin 'data-bg' özelliğinde belirttiğimiz resmi arkaplan olarak ayarlıyoruz
            const backgroundImage = link.getAttribute('data-bg');
            photoPanel.style.backgroundImage = `url(${backgroundImage})`;
        });

        // Fareyi çektiğimizde varsayılan bir arkaplan resmine geri dönebiliriz veya bırakabiliriz
        link.addEventListener('mouseleave', () => {
            // Opsiyonel: Fare çıkınca boşaltmak yerine bir varsayılan resim ekleyebilirsiniz
            photoPanel.style.backgroundColor = 'rgba(54, 100, 139, 0.2);';
        });
    });
    function menu() {
        var cartPanel = document.getElementById('menu');
        if (cartPanel.classList.contains('open')) {
            cartPanel.classList.remove('open');
        } else {
            cartPanel.classList.add('open');
        }
    }
    function menuSearch() {
        setPhotoBackground("insaat1");
        var cartPanel = document.getElementById('menuSrc');
        if (cartPanel.classList.contains('open')) {
            cartPanel.classList.remove('open');
        } else {
            cartPanel.classList.add('open');
        }
    }

    // Arka plan fotoğrafını değiştirme işlevi
    function setPhotoBackground(columnText) {
        const formats = ['jpg', 'jpeg', 'png'];
        let found = false;

        for (const format of formats) {
            const imageUrl = `${columnText}.${format}`;
            const img = new Image();

            img.onload = () => {
                if (!found) {
                    found = true;
                    document.getElementById('photo-panel').style.backgroundImage = `url(${imageUrl})`;
                }
            };
            img.onerror = () => { }; // Resim bulunamazsa hiçbir şey yapma
            img.src = imageUrl;
        }
    }

    // Örnek kullanım: setPhotoBackground('path/to/your-photo.jpg');
    document.addEventListener('DOMContentLoaded', function () {
    const leftLinks = document.querySelectorAll('.menu_content_link');
    const rightColumns = document.querySelectorAll('.menu_content_column');

    let lastSelectedContentId = null;

    leftLinks.forEach(link => {
        link.addEventListener('mouseover', function (e) {
            e.preventDefault(e)

            // Önceki seçili butondan `menu_content_selected` sınıfını kaldır
            leftLinks.forEach(l => l.classList.remove('menu_content_selected'));
            this.classList.add('menu_content_selected');

            // Seçili butonun içindeki contentid değerini al
            lastSelectedContentId = this.getAttribute('contentid');

            // Gizli içerik div'lerini güncelle
            updateHiddenContents();
        });
    });

    function updateHiddenContents() {
        rightColumns.forEach(column => {
            const className = column.className;
            const regex = /column_(\w+)/;
            const match = className.match(regex);

            if (match) {
                const columnId = match[1];

                if (columnId === lastSelectedContentId) {
                    // Seçili olan başlığa karşılık gelen div varsa ve `hiddenContent` sınıfına sahipse kaldır
                    column.classList.remove('hiddenContent');
                } else {
                    // Diğer div'ler gizli olacak
                    column.classList.add('hiddenContent');
                }
            }
        });

        // Tüm `menu_content_column` div'lerini kontrol et ve uygun içeriği ekle
        rightColumns.forEach(column => {
            const className = column.className;
            const regex = /column_(\w+)/;
            const match = className.match(regex);

            if (match) {
                const columnId = match[1];

                if (columnId === lastSelectedContentId) {
                    // Seçili olan başlığa karşılık gelen div varsa, `hiddenContent` sınıfını kaldır
                    column.classList.remove('hiddenContent');
                    setPhotoBackground(columnId);
                } else {
                    // Diğer div'lere `hiddenContent` sınıfını ekle
                    column.classList.add('hiddenContent');
                }
            }
        });
    }
});

function searchProjects() {
    const searchQuery = document.querySelector(".content_search_input").value.trim();
    if (searchQuery) {
        window.location.href = `https://abass.online/projects.php?search=${encodeURIComponent(searchQuery)}`;
    }
}

document.addEventListener("DOMContentLoaded", function () {
    const searchButton = document.querySelector(".content_search_button");
    const searchInput = document.querySelector(".content_search_input");

    searchButton.addEventListener("click", searchProjects);
    searchInput.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            searchProjects();
        }
    });
});

</script>


    <div class="slider_" id="mainpagevideoplayer">
    <div class="slider__slide" id="mainpagevideoplayer"><video src="mainpage/videos/video9.mp4" id="video9" muted autoplay playsinline onended='nextSlide()'></video><div class="slider__overlay"><!--<div class="slider__text"><h3>News</h3><h2>Video Title 9</h2></div>--></div></div><div class="slider__slide" id="mainpagevideoplayer"><video src="mainpage/videos/video10.mp4" id="video10" muted autoplay playsinline onended='nextSlide()'></video><div class="slider__overlay"><!--<div class="slider__text"><h3>News</h3><h2>Video Title 10</h2></div>--></div></div><div class="slider__slide" id="mainpagevideoplayer"><video src="mainpage/videos/video11.mp4" id="video11" muted autoplay playsinline onended='nextSlide()'></video><div class="slider__overlay"><!--<div class="slider__text"><h3>News</h3><h2>Video Title 11</h2></div>--></div></div><div class="slider__slide" id="mainpagevideoplayer"><video src="mainpage/videos/video12.mp4" id="video12" muted autoplay playsinline onended='nextSlide()'></video><div class="slider__overlay"><!--<div class="slider__text"><h3>News</h3><h2>Video Title 12</h2></div>--></div></div><div class="slider__slide" id="mainpagevideoplayer"><video src="mainpage/videos/video13.mp4" id="video13" muted autoplay playsinline onended='nextSlide()'></video><div class="slider__overlay"><!--<div class="slider__text"><h3>News</h3><h2>Video Title 13</h2></div>--></div></div>
        <!-- <div class="slider__slide">
                <video src="video2.mp4" id="video2" muted></video>
                <div class="slider__overlay">
                    <div class="slider__text">
                        <h3>News</h3>
                        <h2>Second Video Title</h2>
                    </div>
                </div>
            </div>
            <div class="slider__slide">
                <video src="video3.mp4" id="video3" muted></video>
                <div class="slider__overlay">
                    <div class="slider__text">
                        <h3>News</h3>
                        <h2>Third Video Title</h2>
                    </div>
                </div>
            </div>>-->
    </div>

 <div class="slider__dots">
    <div class='slider__dot' id='dot9' onclick='setCurrentSlide(9)'><svg class='progress-ring' width='18' height='18'><circle class='progress-ring__circle' stroke='white' stroke-width='2' fill='transparent' r='7' cx='9' cy='9'/></svg></div><div class='slider__dot' id='dot10' onclick='setCurrentSlide(10)'><svg class='progress-ring' width='18' height='18'><circle class='progress-ring__circle' stroke='white' stroke-width='2' fill='transparent' r='7' cx='9' cy='9'/></svg></div><div class='slider__dot' id='dot11' onclick='setCurrentSlide(11)'><svg class='progress-ring' width='18' height='18'><circle class='progress-ring__circle' stroke='white' stroke-width='2' fill='transparent' r='7' cx='9' cy='9'/></svg></div><div class='slider__dot' id='dot12' onclick='setCurrentSlide(12)'><svg class='progress-ring' width='18' height='18'><circle class='progress-ring__circle' stroke='white' stroke-width='2' fill='transparent' r='7' cx='9' cy='9'/></svg></div><div class='slider__dot' id='dot13' onclick='setCurrentSlide(13)'><svg class='progress-ring' width='18' height='18'><circle class='progress-ring__circle' stroke='white' stroke-width='2' fill='transparent' r='7' cx='9' cy='9'/></svg></div></div>

    <div class="section2_ section_">
    <h1 class="section_Text" id="section2_name">Hakkımızda</h1>
    <div class="section2_container">
        <a href="/biz-kimiz" class="column column-left" id="section2_link">
            <img src="mainpage/images/mainpage_section1image.jpg" alt="image">
        </a>
        <div class="column column-right">
           <p id="section2_description" data-content="Kuruluşumuzdan bu yana, yaratıcılık, sürdürülebilirlik ve mimari mükemmeliyet ilkelerine bağlı kaldık. Yerel kültürel değerleri modern tasarım prensipleriyle uyum içinde birleştirerek, her projenin çevresini zenginleştirmesi ve insanlar için anlamlı alanlar sunması gerektiğine inanıyoruz. Her zorluğu bir yenilik fırsatı olarak görüyor ve çevreye duyarlı, ilham verici yapılar inşa etme kararlılığımızı sürdürüyoruz. "></p>


        </div>
    </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    let sectionDescription = document.getElementById('section2_description');

    // PHP'den gelen içeriği alıyoruz
    let content = sectionDescription.getAttribute('data-content');

    // Sectionu görünce çalışacak observer
    let observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Daktilo yazı animasyonunu başlat
                typeWriter(sectionDescription, content);
                observer.unobserve(entry.target); // Tekrar yüklenmesini önlemek için
            }
        });
    }, { threshold: 0.5 }); // Section'un yarısı göründüğünde tetiklenir

    observer.observe(sectionDescription);
});

function typeWriter(element, text) {
    let i = 0;
    element.style.animation = "none"; // Yanıp sönen imleci gizle
    element.style.width = "fit-content"; // Animasyon sırasında metin genişliyor
    element.innerHTML = ""; // Mevcut içeriği temizler

    function type() {
        if (i < text.length) {
            element.innerHTML += text.charAt(i);
            i++;
            setTimeout(type, 35); // Harfler arasında gecikme (hızı ayarlayabilirsiniz)
        } else {
            element.style.borderRight = "none"; // Animasyon bittiğinde imleci gizle
        }
    }
    type();
}

</script>
    
<script>
const cursor = document.querySelector('.custom-cursor');

// Fare hareketini takip et
document.addEventListener('mousemove', (e) => {
    cursor.style.top = `${e.clientY}px`;
    cursor.style.left = `${e.clientX}px`;
});

// Linklerin ve diğer etkileşimli öğelerin üzerinde hover efekti
document.querySelectorAll('a, button, input, textarea').forEach(element => {
    element.addEventListener('mouseenter', () => {
        cursor.classList.add('hover');
    });
    element.addEventListener('mouseleave', () => {
        cursor.classList.remove('hover');
    });
});
  
// Fare tıklaması sırasında animasyon
document.addEventListener('mousedown', () => {
    cursor.classList.add('hover');
});
document.addEventListener('mouseup', () => {
    cursor.classList.remove('hover');
});

</script>
    <script>
        // JSON dosyasını çekiyoruz
        fetch('database/mainpage.json')
            .then(response => response.json())
            .then(data => {
                // section2_ id'leri olan elementlere JSON verilerini atıyoruz
                document.getElementById('section2_name').textContent = data.section1.name;
                document.getElementById('section2_description').textContent = data.section1.description;
                document.getElementById('section2_link').href = data.section1.link;
            })
            .catch(error => console.error('JSON verisi alınamadı:', error));
    </script>
<a href="/projeler">
    <div class="scroll-container">
        <div class=" image image-1">
            <div class="image-text">Konut</div>
        </div>
        <div class="image image-2">
            <div class="image-text">İç Mimari</div>
        </div>
        <div class="image image-3">
            <div class="image-text">Villa</div>
        </div>
    </div> </a>
  <script>
    // JSON dosyasını çekiyoruz
    fetch('database/mainpage.json')
        .then(response => response.json())
        .then(data => {
            // scroll-container içindeki slide sınıfına sahip divleri seçiyoruz
            const slides = document.querySelectorAll('.slide');

            // Her bir slide div'ini güncelliyoruz
            slides.forEach((slide, index) => {
                if (data.section2[index]) {
                    const slideData = data.section2[index];
                    // name bilgisini slide-text div'ine ekle
                    slide.querySelector('.slide-text').textContent = slideData.name;
                    // background-image stilini ayarla
                    slide.style.backgroundImage = `url('mainpage/images/${slideData.image}')`;
                }
            });
        })
        .catch(error => console.error('JSON verisi alınamadı:', error));
</script>
    <script>
        window.addEventListener('scroll', function () {
            let scrollTop = window.pageYOffset;

            document.querySelectorAll('.image').forEach((image, index) => {
                let direction = index % 2 === 0 ? 'right' : 'left';
                let moveAmount = scrollTop * 0.1; // Scroll'a göre hareket hızı

                image.style.backgroundPosition = `${direction === 'right' ? moveAmount : -moveAmount}px center`;
            });
        });
    </script>
    <div class="section3 section_">
        <h1 class="section_Text">Mimari Tasarım</h1>

        <div class="row">
    <div class="column" id="project-column">
        <a href="#">
            <div class="photo-overlay">
                <img src="insaat1.jpeg" alt="Image 1">
                <h4>GK İnşaat</h4>
            </div>
        </a>
        <a href="#">
            <div class="photo-overlay">
                <img src="insaat2.jpeg" alt="Image 2">
                <h4>Almila Villa</h4>
            </div>
        </a>
        <a href="#">
            <div class="photo-overlay">
                <img src="insaat3.jpeg" alt="Image 3">
                <h4>Talas Belediyesi</h4>
            </div>
        </a>
    </div>
</div>

        <div class="slider">
            <div class="slider-inner" id="slider-inner">
                <a href="#" class="slide" style="background-image: url('image2.jpeg');">
                    <h4>Title 1</h4>
                </a>
                <a href="#" class="slide" style="background-image: url('image3.jpeg');">
                    <h4>Title 2</h4>
                </a>
                <a href="#" class="slide" style="background-image: url('image4.jpeg');">
                    <h4>Title 3</h4>
                </a>
            </div>
            <!-- Slider kontrol butonları -->
            <button class="prev" onclick="plusSlides(-1)">&#10094;</button>
            <button class="next" onclick="plusSlides(1)">&#10095;</button>
        </div>

        <script>
            let slideIndex = 0;

            function showSlides(n) {
                let slides = document.querySelectorAll(".slide");
                if (n >= slides.length) { slideIndex = 0 }
                if (n < 0) { slideIndex = slides.length - 1 }
                for (let i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                slides[slideIndex].style.display = "flex";
            }

            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            document.addEventListener("DOMContentLoaded", function () {
                fetch('database/mainpage.json')
                    .then(response => response.json())
                    .then(data => {
                        const section4 = data.section4;

                        // Proje Kolonunu Güncelle
                        const projectColumn = document.getElementById('project-column');
                        for (let i = 1; i <= 3; i++) {
                            const anchor = projectColumn.querySelector(`a:nth-child(${i})`);
                            anchor.href = section4[`redirect${i}`];
                            anchor.querySelector('h4').textContent = section4[`name${i}`];
                            anchor.querySelector('img').src = `mainpage/images/${section4[`image${i}`]}`;
                        }

                        // Slider'ı Güncelle
                        const sliderInner = document.getElementById('slider-inner');
                        for (let i = 1; i <= 3; i++) {
                            const slide = sliderInner.querySelector(`.slide:nth-child(${i})`);
                            slide.style.backgroundImage = `url('mainpage/images/${section4[`image${i}`]}')`;
                            slide.href = section4[`redirect${i}`];
                            slide.querySelector('h4').textContent = section4[`name${i}`];
                        }

                        showSlides(slideIndex); // Başlangıçta ilk slaytı göster
                    })
                    .catch(error => console.error('JSON verisi alınamadı:', error));
            });
        </script>
    </div>

    <div class="section3_ section_">
        <h1 class="section_Text" id="section-title">Haberler</h1>
        <div class="section2_container">
   
            <a href="#" class="column column-left" id="news-link">
            <div class="photo-overlay">
                <img src="mainpage/images/mainpage_section3image.jpg" alt="image">
                <h4 id="news-title">Talas Kademeli Meydan Projesine start verildi</h4>
                </div>
            </a>

           <div class="column column-right" style="position: relative; padding: 0px; flex-direction:column; background-color: rgba(54, 100, 139, 0.2); border-radius: 4px; text-align: center; flex-dire">
    <p id="newsletter-description" style="font-size: 18px; color: #fff; margin-bottom: 20px;">
        ATOLYE F&O Mimarlık'ın son projeleri ve haberleri için E-Bülten.
    </p>
    <form id="emailForm" style="width: 100%; max-width: 400px; margin: 0 auto;display: flex;
    flex-direction: column;
    justify-content: end;">
        <div class="input-container" style="margin-bottom: 20px; position: relative;">
            <input type="email" id="email" placeholder="Mailinizi Yazın" style="width: 100%; padding: 15px; border: 1px solid #ccc; background-color:rgba(54, 100, 139, 0.2); border-radius: 30px; font-size: 16px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); margin-bottom: 20px;">
        </div>
        <span class="error-text" id="errorText" style="display: none; color: #e74c3c; font-size: 14px; margin-bottom: 20px;">Geçerli email girin.</span>
        <button type="submit" style="margin:0 auto; max-width:50%;padding: 12px 30px; background-color: rgba(54, 100, 139, 0.2); color: #fff; border: none; border-radius: 30px; font-size: 16px; cursor: pointer; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); transition: background-color 0.3s;">
            Gönder
        </button>
    </form>
</div>

        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            fetch('database/mainpage.json')
                .then(response => response.json())
                .then(data => {
                    const section3 = data.section3;

                    // H1, H4 ve link güncellenmesi
                    document.getElementById('section-title').textContent = section3.name; // H1 güncellenmesi
                    document.getElementById('news-title').textContent = section3.description; // H4 güncellenmesi
                    document.getElementById('news-link').href = section3.link; // Link güncellenmesi
                })
                .catch(error => console.error('JSON verisi alınamadı:', error));
        });
    </script>


   <div class="section4 section_">
    <h1 class="section_Text">Proje Müşavirliği</h1>

    <div class="row">
    
        <div class="column">
       
            <a href="#" class="big" id="project1">
                <div class="photo-overlay">
                    <img src="insaat1.jpeg" alt="Image 1" id="section4_img1">
                    <h4 id="project1-h4">GK İnşaat</h4>
                </div>
            </a>
            
            <a href="#" id="project2">
                <div class="photo-overlay">
                    <img src="insaat2.jpeg" alt="Image 3" id="section4_img2">
                    <h4 id="project2-h4">Almila Villa</h4>
                </div>
            </a>
        </div>
        
        <div class="column">
            <a href="#" id="project3">
                <div class="photo-overlay">
                    <img src="insaat3.jpeg" alt="Image 4" id="section4_img3">
                    <h4 id="project3-h4">Talas Belediyesi</h4>
                </div>
            </a>

            <a href="#" id="project4">
                <div class="photo-overlay">
                    <img src="insaat4.jpeg" alt="Image 5" id="section4_img4">
                    <h4 id="project4-h4">Kentsel Dönüşüm</h4>
                </div>
            </a>

            <a href="#" id="project5">
                <div class="photo-overlay">
                    <img src="insaat5.jpeg" alt="Image 6" id="section4_img5">
                    <h4 id="project5-h4">E-Spor Arena</h4>
                </div>
            </a>
        </div>
    </div>

    <div class="slider">
        <div class="slider-inner">
            <a href="#" class="slide_Section4" style="background-image: url('image2.jpeg');" id="project1-slide">
                <h4 id="project1-h4-slide">Title 1</h4>
            </a>
            <a href="#" class="slide_Section4" style="background-image: url('image3.jpeg');" id="project2-slide">
                <h4 id="project2-h4-slide">Title 2</h4>
            </a>
            <a href="#" class="slide_Section4" style="background-image: url('image4.jpeg');" id="project3-slide">
                <h4 id="project3-h4-slide">Title 3</h4>
            </a>
            <a href="#" class="slide_Section4" style="background-image: url('image1.jpeg');" id="project4-slide">
                <h4 id="project4-h4-slide">Title 4</h4>
            </a>
            <a href="#" class="slide_Section4" style="background-image: url('image2.jpeg');" id="project5-slide">
                <h4 id="project5-h4-slide">Title 5</h4>
            </a>
        </div>
        <!-- Slider kontrol butonları -->
        <button class="prev" onclick="plusSlides_Section4(-1)">&#10094;</button>
        <button class="next" onclick="plusSlides_Section4(1)">&#10095;</button>
        <script>
            let slideIndex_Section4 = 0;

            function showSlides_Section4(n) {
                let slides_Section4 = document.querySelectorAll(".section4 .slider .slider-inner .slide_Section4");
                if (n >= slides_Section4.length) { slideIndex_Section4 = 0 }
                if (n < 0) { slideIndex_Section4 = slides_Section4.length - 1 }
                for (let i = 0; i < slides_Section4.length; i++) {
                    slides_Section4[i].style.display = "none";
                }
                slides_Section4[slideIndex_Section4].style.display = "flex";
            }

            function plusSlides_Section4(n) {
                showSlides_Section4(slideIndex_Section4 += n);
            }

            document.addEventListener("DOMContentLoaded", function () {
                showSlides_Section4(slideIndex_Section4); // Başlangıçta ilk slaytı göster
            });

            showSlides_Section4(slideIndex_Section4);
        </script>
    </div>

</div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            fetch('database/mainpage.json')
                .then(response => response.json())
                .then(data => {
                    const section5 = data.section5;

                    // Projelerin güncellenmesi
                    document.getElementById("project1").href = section5.redirect1;
                    document.getElementById("section4_img1").src = `mainpage/images/${section5.image1}`;
                    document.getElementById("project1-h4").textContent = section5.name1;

                    document.getElementById("project2").href = section5.redirect2;
                    document.getElementById("section4_img2").src = `mainpage/images/${section5.image2}`;
                    document.getElementById("project2-h4").textContent = section5.name2;

                    document.getElementById("project3").href = section5.redirect3;
                    document.getElementById("section4_img3").src = `mainpage/images/${section5.image3}`;
                    document.getElementById("project3-h4").textContent = section5.name3;

                    document.getElementById("project4").href = section5.redirect4;
                    document.getElementById("section4_img4").src = `mainpage/images/${section5.image4}`;
                    document.getElementById("project4-h4").textContent = section5.name4;

                    document.getElementById("project5").href = section5.redirect5;
                    document.getElementById("section4_img5").src = `mainpage/images/${section5.image5}`;
                    document.getElementById("project5-h4").textContent = section5.name5;

                    // Slider içeriğinin güncellenmesi
                    document.getElementById("project1-slide").href = section5.redirect1;
                    document.getElementById("project1-slide").style.backgroundImage = `url('mainpage/images/${section5.image1}')`;
                    document.getElementById("project1-h4-slide").textContent = section5.name1;

                    document.getElementById("project2-slide").href = section5.redirect2;
                    document.getElementById("project2-slide").style.backgroundImage = `url('mainpage/images/${section5.image2}')`;
                    document.getElementById("project2-h4-slide").textContent = section5.name2;

                    document.getElementById("project3-slide").href = section5.redirect3;
                    document.getElementById("project3-slide").style.backgroundImage = `url('mainpage/images/${section5.image3}')`;
                    document.getElementById("project3-h4-slide").textContent = section5.name3;

                    document.getElementById("project4-slide").href = section5.redirect4;
                    document.getElementById("project4-slide").style.backgroundImage = `url('mainpage/images/${section5.image4}')`;
                    document.getElementById("project4-h4-slide").textContent = section5.name4;

                    document.getElementById("project5-slide").href = section5.redirect5;
                    document.getElementById("project5-slide").style.backgroundImage = `url('mainpage/images/${section5.image5}')`;
                    document.getElementById("project5-h4-slide").textContent = section5.name5;
                })
                .catch(error => console.error('JSON verisi alınamadı:', error));
        });
    </script>
     
<script>
document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.slider__slide');
    const videos = document.querySelectorAll('.slider__slide video');
    const dots = document.querySelectorAll('.slider__dot');
    let videoIds = Array.from(videos).map(video => parseInt(video.id.replace('video', '')));
    let currentVideoId = videoIds[0];
    let progressInterval;
    let isChanging = false;


    function setProgress(dot, progress) {
        const circle = dot.querySelector('.progress-ring__circle');
        if (circle) {
            const radius = circle.r.baseVal.value;
            const circumference = radius * 2 * Math.PI;
            circle.style.strokeDasharray = `${circumference} ${circumference}`;
            const offset = circumference - progress * circumference;
            circle.style.strokeDashoffset = offset;
        }
    }

    async function changeVideo(videoId) {
        if (isChanging) return;
        isChanging = true;


        clearInterval(progressInterval);
        for (let v of videos) {
            try {
                await v.pause();
                v.currentTime = 0;
            } catch (e) {
                console.error('Error pausing video:', e);
            }
        }
        slides.forEach(s => s.style.display = 'none');
        dots.forEach(d => {
            setProgress(d, 0);
        });

        currentVideoId = videoId;
        const currentVideo = document.getElementById(`video${videoId}`);
        const currentSlide = currentVideo.closest('.slider__slide');
        const currentDot = document.getElementById(`dot${videoId}`);

        if (currentVideo && currentSlide && currentDot) {
            currentSlide.style.display = 'block';
            try {
                await currentVideo.play();
                progressInterval = setInterval(() => {
                    const progress = currentVideo.currentTime / currentVideo.duration;
                    setProgress(currentDot, progress);
                    if (currentVideo.ended) {
                        clearInterval(progressInterval);
                        nextSlide();
                    }
                }, 1000); // Changed to 1 second for less console spam
            } catch (e) {
                console.error('Error playing video:', e);
            }
        }

        isChanging = false;
    }

    function setCurrentSlide(id) {
        if (videoIds.includes(parseInt(id))) {
            changeVideo(parseInt(id));
        }
    }

    function nextSlide() {
        let currentIndex = videoIds.indexOf(currentVideoId);
        let nextIndex = (currentIndex + 1) % videoIds.length;
        let nextVideoId = videoIds[nextIndex];
        console.log('Next video ID:', nextVideoId);
        changeVideo(nextVideoId);
    }

    videos.forEach(video => {
        video.addEventListener('ended', () => {
            nextSlide();
        });
    });

    dots.forEach((dot) => {
        dot.addEventListener('click', () => setCurrentSlide(dot.id.replace('dot', '')));
    });

    // Start with the first video
    if (videoIds.length > 0) {
        changeVideo(videoIds[0]);
    }

    // Make functions global
    window.setCurrentSlide = setCurrentSlide;
    window.nextSlide = nextSlide;
});
</script>

    <script>
        document.getElementById('email').addEventListener('input', function () {
            const emailInput = document.getElementById('email');
            const emailValue = emailInput.value;
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailPattern.test(emailValue)) {
                errorText.style.display = 'block';
                emailInput.parentElement.classList.add('invalid');
            } else {
                errorText.style.display = 'none';
                emailInput.parentElement.classList.remove('invalid');
            }
        });

        document.getElementById('emailForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const emailInput = document.getElementById('email');
        });
    </script>
    <script>


document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer kullanarak section'ları izleyelim
    const observerOptions = {
        root: null, // viewport baz alınarak gözlem yapacak
        rootMargin: '0px', // gözlem bölgesi dışında belli bir alanı da göz önüne alabiliriz
        threshold: 0.2 // elementin %20'si göründüğünde tetiklenecek
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Görünen section için bir "fade-in" sınıfı ekleyelim
                entry.target.classList.add('fade-in');
                observer.unobserve(entry.target); // Bölüm yüklendiğinde gözlemden çıkarıyoruz
            }
        });
    }, observerOptions);

    // Tüm section'ları seçip gözleme ekliyoruz
    const sections = document.querySelectorAll('.section_');
    sections.forEach(section => {
        observer.observe(section);
    });
}); 
</script>
     <link rel="stylesheet" href="styles.css">
 <link href="https://fonts.googleapis.com/css2?family=AFACUD+FLUX:wght@200;400&display=swap" rel="stylesheet">
<footer class="footer">
    <div class="footer-left">
    <div class="logo">
        <img src="https://abass.online/logo.png"> 
        </div>
        <div class="footer-links">
            <a href="/">Anasayfa</a>
            <a href="/biz-kimiz">Biz Kimiz</a>
            <a href="/ekibimiz">Ekibimiz</a>
            <a href="/projeler">Mimari Tasarım</a>
            <a href="/proje-musavirligi">Proje Müşavirliği</a>
            <a href="/kariyer">Kariyer</a>
            <a href="/videolar">Videolar</a>
            <a href="/iletisim">İletişim</a>
        </div>
    </div>

    <div class="footer-right">
        <div class="social-media">
            <a href="https://www.facebook.com/atolyefomimarlik?mibextid=LQQJ4d" class="social-icon"><img src="https://abass.online/svg/facebook.svg" alt="Facebook"></a>
            <a href="https://www.instagram.com/atolyefomimarlik?igsh=dnlxMDZscGh6MGU5" class="social-icon"><img src="https://abass.online/svg/instagram.svg" alt="Instagram"></a>
            <a href="https://www.linkedin.com/company/at%C3%B6lye89-mimarlik/" class="social-icon"><img src="https://abass.online/svg/linkedin.svg" alt="LinkedIn"></a>
            
            <a href="#" class="social-icon"><img src="https://abass.online/svg/youtube.svg" alt="YouTube"></a> 
            <a href="#" class="back-to-top">Yukarıya Dön <i class="arrow-up">↑</i></a>
        </div>
        
        <div class="footer-bottom">
            <a href="https://www.ykbsoft.com">YKB Soft</a>
            <p style="margin:0 auto;">© 2024 ATOLYE F&O MİMARLIK All Rights Reserved.</p>
        </div>
    </div>
</footer>

</body>

</html>
