* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden; /* Yatay kaydırmayı kaldır */
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff; /* Resim yüklenmezse gri yer tutucu */
}

/* Menü İkonu */
.menu-toggle {
    position: fixed;
    bottom: 50px;
    left: 30px;
    z-index: 2000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);    
    transition: opacity 0.3s ease; /* Görünmezlik geçişi */
}

.menu-toggle .menu-text {
    transition: opacity 0.3s ease; /* "f" geçiş efekti */
}

.menu-toggle.active .menu-text {
    opacity: 0; /* Menü açıldığında "f" kaybolur */
}

/* Yan Menü */
.sidebar {
    position: fixed;
    top: 70vh;
    left: -300px;
    width: 200px;
    height: 50%;
    transition: left 0.3s ease;
    z-index: 1500;
    display: flex;
    flex-direction: column;
}

.sidebar.active {
    left: 15vh;
    bottom:0;
}

.sidebar-header {
    padding: 0px;
    text-align: right;
}

.sidebar-header h2 {
    font-size: 20px;
    font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color:#fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.sidebar ul {
    list-style: none;
    padding: 20px;
    flex-grow: 1;
}

.sidebar li {
    margin: 00px 0;
}

.sidebar a {
    font-size: 20px;
    font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color:#fff;
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 1px 1px 0px #000;
}

.sidebar a:hover {
    color: #d82424;
}

/* Arka Plan Konteyneri */
.background-container {
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Tam ekran yükseklik */
    z-index: -1;
    background:url(images/homepage-bg1-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.background-container2 {
    
    top:0;
    left: 0;
    width: 100%;
    height: 45vh; /* Tam ekran yükseklik */
    z-index: -1;
    opacity: 1;
    background:url(images/homepage-bg2.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    background-attachment: fixed;
}


.main-alt-yazi {
  position: absolute;
  bottom: 10px;        /* divin en altından 10px yukarı */
  left: 50%;           /* yatay ortalama için */
  transform: translateX(-50%); /* tam ortalatma */
  
  padding: 5px 10px;
  border-radius: 6px;
  color:#fff;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    text-shadow:
    -2px -2px 0 #200,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 #200;
    
}

/* Bölümler */


#hero {
    background: none;
    min-height: 100vh;
    display: flex;
            align-items: center;
            justify-content: center;
}

#hero .hero-text {
    font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 1s ease;
}


#hero2 {
    background: none;
    max-height: 30vh;
    display: flex;
}



#hero2 .adam {
    font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 1s ease;
    width:1000px;
}


#hero .logo-div{
    

}

#bant1 {
    padding-bottom:5vh;
    background-image: url(images/bant1-bg.jpg);
}

#bant1 .bant1-text{
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    color: #000;
    text-align:left;
    margin-bottom:6vh;
    padding-top:12vh;
    width:1000px;
    margin:auto;
    z-index: 99999;
}

#bant1::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:60px;
    background:#fff;
    transform:skewY(-1.5deg);
    margin-top:1vh;
}



#yapimlarimiz {
    background-image:url(images/yapimlar-bg.jpg);
    background-position: left top;
    background-size: cover;
    min-height:80vh;
    padding:5%;
    margin-top:1vh;
}

#yapimlarimiz .yapimlarimiz-wrapper {
    border:1px solid #fff;
    height:100vh;
    width:75%;
    margin:auto;
}


#yapimlarimiz::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:150px;
    background:#000;
    transform:skewY(2deg);
    z-index:30;
}











#yapimlarimiz2 {
    background-image:url(images/yapimlar-bg.jpg);
    background-position: left top;
    background-size: cover;
    min-height:80vh;
    padding:5%;
}

#yapimlarimiz2 .yapimlarimiz2-wrapper {
    border:1px solid #fff;
    height:100vh;
    width:75%;
    margin:auto;
}


#yapimlarimiz2::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:150px;
    background:#000;
    transform:skewY(2deg);
    z-index:30;
}











#about {
    min-height:50vh;
}


#about .about-text{
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    color: #000;
    text-align:left;
    line-height:2.5;
    padding-bottom:10vh;
    padding-top:15vh;
    width:1000px;
    margin:auto
}





#contact {
    background:#fff;
    min-height:500px; 
    text-align:left;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    
    
}

#contact a{
    color:#000;
    text-decoration: none;;
}


footer {
    width:100%;
    background:#000;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    color:#fff;
    padding-top:20px;
    padding-bottom:20px;
}

footer .footer {
    width:1000px;
    margin:auto;
    
    display: flex;
    justify-content: space-between; /* Div'leri yan yana eşit aralıkla */
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçsin */
}




        .footer-split {
            width: 90%; /* %50 - küçük bir boşluk için %48 */
            color: white;
            display: flex;
            text-align:left;
            padding-top:5px;
        }

        /* İkinci div için farklı renk (isteğe bağlı) */
        .footer-split:nth-child(2) {
            width:100px;
            text-align:right;
        }

        /* Responsive tasarım */
        @media (max-width: 768px) {
            .footer-split {
                width: 100%; /* Küçük ekranlarda tam genişlik */
                margin-bottom: 20px; /* Alt alta boÅŸluk */
            }
            .footer-split:last-child {
                margin-bottom: 0; /* Son div için boşluk kaldırma */
            }
        }

footer #footer-ust {
    background:#1d1d1d;
    text-align:center;
    color:#fff;
    padding:20px;
    
}

footer #footer-alt {
    background:#000;
    text-align:center;
    color:#fff;
    padding:20px;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}



















	/* İki divlik alan için stil */
        .split-section {
            width: 70%; /* Sayfanın %80'i genişliğinde, isteğe bağlı */
            margin: 20px auto; /* Üstten ve alttan boşluk, ortalanma */
            display: flex;
            justify-content: space-between; /* Div'leri yan yana eşit aralıkla */
            flex-wrap: wrap; /* Küçük ekranlarda alt alta geçsin */
        }

        .split-div {
            width: 40%; /* %50 - küçük bir boşluk için %48 */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px; /* Köşeleri yuvarlatma, isteğe bağlı */
            text-align:left;
            height:500px;
        }

        /* İkinci div için farklı renk (isteğe bağlı) */
        .split-div:nth-child(2) {
            height:500px;
            width:60%;
        }

        /* Responsive tasarım */
        @media (max-width: 768px) {
            .split-div {
                width: 100%; /* Küçük ekranlarda tam genişlik */
                margin-bottom: 20px; /* Alt alta boşluk */
            }
            .split-div:last-child {
                margin-bottom: 0; /* Son div için boşluk kaldırma */
            }
        }





        .yapimlarimiz-container {
            position: relative;
            width: 1000px;
            height: 564px;
            margin: 0 auto;
        }

        .box {
            position: absolute;
            /* transition: transform 0.3s ease, z-index 0s ease;  Yumuşak geçiş */
            transition: transform 0.3s ease, z-index 0s ease, filter 0.3s ease; /* Sepia geçişi için filter eklendi */
            /* border: 2px solid #fff;  Sınır için */
            box-shadow: 0 4px 100px rgba(0, 0, 0, 0.5);/*Hafif gölge */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            filter: sepia(0); /* Varsayılan olarak hafif sepia efekti */
        }


        /* Her box bir link olacak */
        .box a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: inherit; /* Metin rengini div'den alır */
            z-index: 1; /* Linkin tıklanabilirliğini garanti et */
        }

        /* İçerik metni (linkin dışında kalacak) */
        .box span {
            z-index: 2; /* Metni linkin üzerine çıkar */
            position:absolute;
            bottom:0;
            pointer-events: none; /* Metne tıklama engelle */
        }

        /* Farklı renkler ve pozisyonlar */
        .box:nth-child(1) {
            top: 0;
            left: 0;
            width: 285px;
            height: 180px;
            /* background-color: #3498db; Mavi */
            background:url('images/yapim1.png');
            z-index: 30;
        }
        .box:nth-child(2) {
            top: 0;
            left: 285px;
            width: 496px;
            height: 160px;
            /* background-color: #e74c3c; Kırmızı */
            background:url('images/yapim2.png');
        }
        .box:nth-child(3) {
            top: 0;
            right: 0;
            width: 244px;
            height: 282px;
            /* background-color: #2ecc71; Yeşil */
            background:url('images/yapim3.png');
        }
        .box:nth-child(4) {
            top: 174px;
            left: 0;
            width: 286px;
            height: 390px;
            /* background-color: #f1c40f;  Sarı */
            background:url('images/yapim4.png');
        }
        .box:nth-child(5) {
            top: 160px;
            left: 274px;
            width: 571px;
            height: 166px;
            /* background-color: #9b59b6;  Mor */
            background:url('images/yapim5.png');
            z-index: 20;
        }
        .box:nth-child(6) {
            bottom: 0;
            left: 286px;
            width: 496px;
            height: 296px;
            /* background-color: #e67e22; Turuncu */
            background:url('images/yapim6.png');
        }
        .box:nth-child(7) {
            bottom: 0;
            right: 0;
            width: 223px;
            height: 290px;
            /* background-color: #1abc9c; Turkuaz */
            z-index: 30;
            background:url('images/yapim7.png') bottom;
        }


        
        /* Metin pozisyonları (kafana göre ayarlanabilir) */
        .box:nth-child(1) span { bottom: 0; text-align:left;font-family: "Courier New", Courier, monospace; font-size:12px;font-weight: 900; color:#fff2cc;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);} /* En alta ortalanmış */
        .box:nth-child(2) span { top: 10px; left: 10px; text-align:center;font-family: "Courier New", Courier, monospace; font-size:12px; font-weight: 700; color:#aa0000;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);} /* Sağ alt */
        .box:nth-child(3) span { bottom: 10px; right: 10px; text-align:right;font-family: "Courier New", Courier, monospace; font-size:12px; font-weight: 700; color:#aa0000;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);} /* Ortadan sola */
        .box:nth-child(4) span { top: 20px; right:20px; text-align:right;font-family: "Courier New", Courier, monospace; font-size:12px; font-weight: 700; color:#aa0000;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } /* Alttan ortalanmış */
        .box:nth-child(5) span { top: 5px; right: 10px;text-align:right;font-family: "Courier New", Courier, monospace; font-size:12px; font-weight: 700; color:#fff2cc;text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); } /* Sağ üst */
        .box:nth-child(6) span { top: 70px; font-family: "Courier New", Courier, monospace; font-size:12px; font-weight: 700; color:#ffb300;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);} /* Sol alt */
        .box:nth-child(7) span { top: 20px; right: 25px;text-align:center;font-family: "Courier New", Courier, monospace; font-size:12px; font-weight: 700; color:#ffb300;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);  } /* Üstten %30 sola */





        /* Hover efekti */
        .box:hover {
            transform: scale(1.1); /* Büyütme efekti */
            z-index: 100; /* Diğerlerinin üzerine çıkar */
            filter: sepia(0); /* Hover'da sepia efekti kalkar, orijinal renkler döner */
        }




.vurgulu{
  /* metnin arkasına sadece alt kısımda bir bant */
  display: inline-block; /* istersen block yap, full genişlik için */
  background: rgba(0, 0, 0, 0.5); /* renk + opaklık (0.0 - 1.0 arası) */
  border-radius: 8px; /* köşeleri yuvarlaklaştırmak istersen */
  color: white; /* okunabilirlik için yazı rengini beyaz yaptım */
}










.hidden-content {
  display: none;
}

/* modal arka plan */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* modal kutusu */
.modal-content {
  position: relative;
  margin: auto;
  background: #000;
  width: 50vw;          /* ekran genişliğinin %80’i */
  height: 80vh;         /* ekran yüksekliğinin %80’i */
  border-radius: 12px;
  padding: 20px;
  transform: translateY(50px) scale(0.9);
  opacity: 0;
  transition: all 0.4s ease;
  overflow-y: auto;     /* içerik taşarsa scroll */
  margin: 5vh auto;   /* üst ve alt boşluk bırakır (ekranın %5’i kadar) */
  max-height: 90vh;   /* boşlukla birlikte ekranı taşmaması için */
}

/* aktif olduğunda animasyonlu görünüm */
.modal.show {
  opacity: 1;
}
.modal.show .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* kapatma tuşu */
.close {
  position: absolute;
  top: 10px; right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}






/* Senaryo sayfası görünümü */
#modalBody {
  font-family: "Courier New", monospace; /* senaryo geleneği */
  font-size: 16px;
  color: #111;
  background-image: url(images/paper-texture.jpg);
  padding: 40px;
  max-width: 700px; /* sayfa genişliği */
  margin: 0 auto;   /* ortalanmış */
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow-y: auto;
}

/* başlık (sahne yönergesi) */
#modalBody h2 {
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* diyalog karakter adı */
.character {
  text-align: center;
  font-weight: bold;
  margin-top:15px;
}

/* diyalog satırları */
.dialogue {
  text-align: center;
  margin-bottom: 15px;
  width:70%;
  margin:auto;
}

/* yönergeler (parantezli kısımlar) */
.action {
  text-align: left;
  font-style: italic;  
  margin-top:15px;
}

.anlatan {text-align: left;
    width:100%;  
  margin-top:15px;}




/* Görsel sabit konumda */
.fixed-inside-modal {
  position: absolute;   /* modal-content’e göre konumlanacak */
  top: 5%; 
  left: 10%;
  width: 100px;
  height: 100px;
  z-index: 10;
}








.main-logo {width:305px;}






































        

.map-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
}

.map-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  background: transparent; /* görünmez ama tıklanabilir */
}