/* CSS Document */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'DancingScript';
    src: url('fonts/DancingScript-VariableFont_wght.ttf') format('truetype');
}
/* --- GENEL INTRO AYARLARI --- */
/* --- GENEL INTRO AYARLARI --- */
.intro-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	
	display: grid;
	place-items: center;
	
	visibility: visible;
	opacity: 1;
	transition: visibility 0s 2s, opacity 1s 1.5s;
  }
  
  /* --- KAPI (GATE) STİLLERİ --- */
  .intro-overlay .gate {
	position: absolute;
	top: 0;
	width: 50.5%; 
	height: 100%;
	background-color: black;
	transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: 0.8s;
  }
  
  /* === DÜZELTME BURADA BAŞLIYOR === */
  .intro-overlay .gate:nth-of-type(1) { /* :first-child yerine :nth-of-type(1) kullanıldı */
	left: 0;
	background-color: #149eda;
  }
  .intro-overlay .gate:nth-of-type(2) { /* :last-child yerine :nth-of-type(2) kullanıldı */
	right: 0;
	background-color: #90af3d;
  }
  
  /* --- LOGO STİLİ VE ANİMASYONU --- */
  .intro-logo {
	position: relative; 
	z-index: 10; 
	max-width: 550px;
	
	opacity: 0;
	transform: scale(0.9);
	
	animation: logo-giris 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  }
  
  @keyframes logo-giris {
	to {
	  opacity: 1;
	  transform: scale(1);
	}
  }
  
  /* ============================================== */
  /* === ANİMASYONU TETİKLEYEN SINIF === */
  /* ============================================== */
  
  .animasyon-basladi.intro-overlay {
	opacity: 0;
	visibility: hidden;
  }
  
  /* === DÜZELTME BURADA DA YAPILDI === */
  .animasyon-basladi .gate:nth-of-type(1) { /* :first-child yerine */
	transform: translateX(-100%);
  }
  
  .animasyon-basladi .gate:nth-of-type(2) { /* :last-child yerine */
	transform: translateX(100%);
  }







.container-fluid {
	overflow: hidden;
    padding-left: 0 !important;
    margin-left: 0 !important;
	padding-right: 0 !important;
    margin-right: 0 !important;
}

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

        body {
			font-family: var(--font-body);
  			font-size: var(--base-size);
  			line-height: 1.6;
  			color: #333;
			font-weight: 400; /* Regular */
            /*font-family: Arial, sans-serif;*/
			margin: 0;
			overflow-x: hidden;
			
        }


	

        

.swiper-div {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
    will-change: transform;
}

.swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 200px;
    height: 200px;
    border-radius: 65px;
    overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
    contain: content;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
}

/* Swiper lazy loading için stil */
.swiper-lazy-preloader {
    display: none;
}

.yesil-zeytin-div{
	padding: 0;
	justify-content:center;
	display: flex;
}
#yesil-zeytin{
	display: flex;
	transform: rotateY(-30px) !important;
	margin: 0;
	padding: 0;
	height: 200px;
	width: 210px;
}
.mondaliva-div-main{
	padding: 0;
	justify-content:center;
	display: flex;
}
#mondaliva-logo{
	display: flex;
	transform: rotateY(-30px) !important;
	margin: 0;
	padding: 0;
	height: 200px;
	width: auto;
}
.ansiklopedi-baslik h2{
	font-family: 'DancingScript', sans-serif;
	font-style: normal;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 60px;
}
.ansiklopedi-div{
	display: flex;
    flex-direction: column; /* İçeriği dikey olarak hizala */
    align-items: center; /* İçeriği yatayda ortala */
    justify-content: flex-end; /* İçeriği alt kısma yerleştir */
    position: relative;
	margin-bottom: 0px;
}
.main-ans-photo{
	resize: both;
	border-radius: 40px;
	width: 60%;
	height: auto;
	object-fit: scale-down;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.main-ans-photo:hover{
	 transform: translateY(-5px); /* Hafifçe yukarı kaldır */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); /* Hover durumunda gölgeyi artır */
}
.main-ans-photo:hover + .main-ans-baslik-div {
	transform: translateY(-5px);
    background: rgba(0, 0, 0, 0.5); /* Arka plan rengi (siyah, %50 opak) */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4); /* Hover durumunda gölgeyi artır */
}

@media (max-width: 768px) {
    .main-ans-photo {
        width: 100%; /* Mobilde fotoğrafın genişliğini tam ekran yap */
		height: auto;
        border-radius: 20px; /* Köşeleri daha küçük yap */
    }
    .main-ans-photo:hover + .main-ans-baslik-div {
        transform: translateY(-3px); /* Mobilde daha küçük bir hareket */
    }
	.main-ans-baslik-div h2{
	font-weight: 400;
	font-size: 35px !important;
}
}
.main-ans-baslik-div h2{
	font-family: 'DancingScript', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 50px;
}
.ansiklopedi-row h2{
	margin-top: 20px;
	
	font-family: 'BebasNeue', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 50px;
	color: #157805;
	letter-spacing: 5px;
}
.ansiklopedi-row h4{
	margin: 20px;
	font-family: 'BebasNeue', sans-serif;
	font-weight: 500;
	font-size: 40px;
	color: black;
	letter-spacing: 2px;
}
.img-container{
	display: flex;
	align-items: center;
	align-content: center;
	margin: 0 !important;
	padding: 0 !important;
}
.bigger-img-container{
	width: 100vw;
	height: auto;
}
.img-div img{
	overflow: hidden;
	transform: translateY(-61vw);
	width: 100%;
	position: absolute;
	mix-blend-mode: multiply;
	opacity: 0.2;
	
}
.bg-image{
	position: absolute;
	opacity: 0.2;
	left: 50%; /* Yatayda ortala */
    transform: translate(-50%, 10vw); /* Elementin genişliğinin yarısı kadar sola kaydır */
}
.bg-image img{
	max-width: 100%;
	height: auto;
}
.img-div-mobile{
	transform: translateY(31vw);
	position: absolute;
	width: 100%;
	height: auto;
}
.mobile-image {
    
    opacity: 0;
	
}
.property {
	justify-content: center;
    display: flex; /* Özellik ve değer çiftini yan yana getirir */
    margin-bottom: 10px; /* Her özellik-değer çifti arasına boşluk ekler */
}

.property p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	
    margin: 0; /* Paragrafların varsayılan margin'ini sıfırla */
    padding: 0 5px; /* Paragraflar arasına biraz boşluk ekler */
}

.property p:first-child {
    font-weight: bold; /* Özellik adını kalın yapar */
    min-width: 150px; /* Özellik adı için sabit genişlik belirler */
}
		h1, h2, h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

.smart-logo {
    position: absolute; /* Navbar'ın üstüne çıkart */
    top: 160px; /* Yukarı taşı (değer ayarlanabilir) */
    left: 50%; /* Yatayda ortala */
    transform: translateX(-50%); /* Tam ortalamak için */
}

.logo-img {
	height: 250px;
	/* BAŞLANGIÇ DURUMU: Görünmez ve hafifçe aşağıda */
	opacity: 0;
	transform: translateY(20px); /* Hafifçe aşağıdan yukarı gelme efekti için */
	
	/* ANİMASYON: Görünür hale gelirken 1.5 saniye sürsün */
	transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  }
  
  .logo-img.is-visible {
	/* BİTİŞ DURUMU: Tamamen görünür ve orijinal konumunda */
	opacity: 1;
	transform: translateY(0);
  }
.language-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-toggle a {
    text-decoration: none;
    font-size: 16px;
    color: #2a6476;
    padding: 5px 10px;
    border-radius: 15px;
    transition: background-color 0.3s ease;
}

.language-toggle a.active {
    background-color: #90af3d;
    color: #fff;
}

.language-toggle a:hover {
    background-color: #90af3d;
    color: #fff;
}

.language-toggle .separator {
    color: #2a6476;
    font-size: 16px;
}
									.navbar {	
			padding: 0;
			border-radius: 0px 0px 40px 40px;
			z-index: 10;
			top: 0;
			overflow: hidden;
			box-sizing: border-box;
            position: sticky;
            width: 100% !important;
            background: rgba(255, 255, 255, 1); /* Yarı saydam beyaz */
            backdrop-filter: blur(10px); /* Blur efekti */
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
		.nav-logo{
			align-items: center;
			display: flex;
			padding: 0px !important;
			margin: 0px !important;
			 width: 200px; /* Daha uygun bir genişlik */
			height: auto; /* Oranları koru */
			transition: transform 0.3s ease; /* Hover efekti için geçiş */
		}
		.nav-logo:hover {
			transform: scale(1.1); /* Hafif büyütme efekti */
		}

        .navbar ul {
			margin-bottom: 0;
            list-style: none;
            display: flex;
        }

        .navbar ul li {
            margin: 0 15px; 
        }

        .navbar ul li a {
			display: inline-block;
			font-family: 'Poppins', sans-serif;
			font-weight: 500;
			letter-spacing: 2px;
            text-decoration: none;
            font-size: 15px;
            color: black;
			background-color: #E1E1E1;
			border-radius: 15px;
            padding: 10px 20px;
            transition: 0.6s;
			overflow: hidden; /* hover.css ile border-radius kullanıyorken bu özellik bozulmayı engelliyor */
        }

        .navbar ul li a:hover {
            background-color: #149eda;			
            color: #fff;
        }
/* Mobile Navbar */
.mobile-navbar {
	overflow-y: visible;
	margin: 0 !important;
	z-index: 10;
	width: 100%;
	background-color: white;
	border-radius: 20px;
    display: none;
	visibility: hidden;/* Başlangıçta gizli */
    position: relative;
}
.mobile-navbar img{
	visibility: hidden;
	position: inherit;
	overflow: visible;
	z-index: 999;
	transform: translateY(5px);
	height: 20px;
}

/* Hamburger Menü */
.hamburger-menu {
	display: flex; /* Flexbox kullan */
    justify-content: space-between; /* Menü simgesini sola, dil seçimini sağa hizala */
    align-items: center; /* Dikeyde ortala */
	position: relative;
    background-color: white;
    color: black;
    font-size: 24px;
    padding: 5px 20px 20px;
    cursor: pointer;
    text-align: left;
}
.menu-icon{
	margin-left: 10px;
}
/* Açılır Menü */
.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: white;
    display: none; /* Başlangıçta gizli */
    position: absolute;
    width: 100%;
    left: 0;
}

.mobile-menu li {
    padding: 10px;
    text-align: center;
}

.mobile-menu li a {
    color: black;
    text-decoration: none;
    display: block;
}

/* Sadece Mobilde Göster */
@media (max-width: 768px) {
    .navbar {
        display: none;
    }
    .mobile-navbar {
        display: block;
		visibility: visible;
    }
}
.col-12.col-md-5.eynak-text-div .quality-section p {
	font-size: 18px;
	margin: 10px;
}
.quality-section h3 {
	margin: 20px;
}
.quality-section p{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 18px;
}
.main-smart {
    display: block;
    width: 100vw; /* Ekranı tamamen kaplasın */
    height: auto;  /* Orijinal yüksekliği korusun */
    object-fit: cover; /* İçeriğin taşmasını önler */
}
.full-bg-beyaz{
	/*background-color: #E0F3FC;*/ /*#E0F3FC; gri */
	position: relative;
	overflow: visible;
	width: 100vw;
	min-height: 100vh;
	padding: 0px 30px 30px;
	background: linear-gradient(45deg,#149EDA, #90AF3D, #149EDA, #90AF3D ); /* Renk geçişi */ /*#FFD700, #FF4500, #FFD700, #FF4500*/
    background-size: 400% 400%; /* Arka planı büyüt */
    animation: gradientAnimation 10s ease infinite; /* Animasyon */
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.full-bg-bej{
	width: 100%;
	background-color: #FBF1E3; /* az daha açık hali #f8f1e7 */
	padding-bottom: 0px;
}
.full-bg-white{
	width: 100%;
	background-color: white; 
	padding-bottom: 0px;
}
.bigger-icon{
	height: 150px;
	width: 150px;
}
.big-icon{
	margin: 30px;
	height: 100px;
}
.icons-row{
	padding: 10px;
	margin-bottom: 50px;
	margin-top: 50px;
	justify-content: center;
}
.div-main{
	border-radius: 40px;
	background-color: white;
	border: 6px solid #d1d2d4; 
    box-shadow: 0 0 0 4px black;
	padding: 30px;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-left: 40px;
	padding-right: 40px;
}
.emote-div h3 {
	margin: 15px;
}
.emote-div p{
	margin: 15px;
	font-size: 20px;
}
.logo-png{
	width: 520px;
	
}
.logos-row-main {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 70px; /* Görseller arası boşluk */
  justify-content: center;
}
.logos-row-main img{
	height: 120px;
	object-fit: contain;
	display: flex;
}

.row .col-sm-12.col-md-5.eynak-text-div a{
	font-size: 20px;
}

.colored-line {
	display: flex;
  width: 100% !important;
  height: 15px; /* Çizginin kalınlığını ayarla */
  
}

.blue-line {
  background-color: #149eda;
	
}

.green-line {
  background-color: #90af3d;
}
.button-design{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	display: inline-block;
    text-align: center;
	background-color: #E1E1E1;
	border-radius: 20px;
	cursor: pointer;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.6s ease, background-color 0.9s ease;
}
.animated1, .animated2,.animated3, .animated4, .animated5{
	opacity: 0;
}
.animated1.visible , .animated2.visible, .animated3.visible , .animated4.visible , .animated5.visible{
	opacity: 1;
}

.image-video-container {
    display: inline-block;
}

.image-video-container img {
    display: block; /* Resmi blok element yap */
    transition: opacity 0.3s ease; /* Geçiş efekti */
}

.image-video-container .hover-video {
	border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Videoyu container'a sığdır */
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.3s ease; /* Geçiş efekti */
}

.image-video-container:hover img {
    opacity: 0; /* Resmi görünmez yap */
}

.image-video-container:hover .hover-video {
    opacity: 1; /* Videoyu görünür yap */
}


	.list-item {
	list-style: none;
	
}
.footer-logo{
	padding-top: 30px; 
}
.footer-list-quick .list-item{
	margin: 15px;
}
.footer-list-quick .list-item a {
	color: black;
	text-decoration: none;
	text-decoration-color: none;
	
}
.footer-text a p {
	color: black;
}
.footer-parts{
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	padding: 15px;
	background-color: white;
}
.copyright{
	align-content: center;
	justify-content: center;
	align-items: center;
	
}
.mobile-swiper-div{
	display: none;
}
			/*----------------------- Anasayfa Mobil Uyarlamalar -----------------*/
@media (max-width: 768px) {
	.container-fluid{
		overflow: hidden !important;
	}
	#main-content{
		overflow: hidden;
	}
	.swiper-div {
			display: none;
            width: 100%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .swiper {
            width: 100%;
            height: auto;
            overflow: visible; /* Swiper'ın overflow'unu visible yap */
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 100% !important; /* Slide genişliği */
            height: 100% !important; /* Slide yüksekliği */
            border-radius: 35px; /* Köşeleri yuvarla */
            overflow: hidden; /* İçeriklerin köşeleri kesmesini önler */
            transform: translateZ(0); /* GPU hızlandırma */
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Resimlerin boyutlandırılması */
        }
	.mobile-swiper-div{
		margin-top: 25px;
		display: block;
	}
    .smart-logo {
        top: 20px !important;/* Mobilde daha az yukarı taşı */
    }

    .logo-img {
        height: 100px !important; /* Mobilde logo boyutunu küçült */
    }
	.slogan-img{
		height: 50px;
	}
	.full-bg-beyaz{
		padding: 10px !important;
	}
	.colored-line{
		height: 10px;
	}
	
	.div-main{
	border-radius: 20px;
	background-color: white;
	border: 6px solid #d1d2d4; 
    box-shadow: 0 0 0 4px black;
	padding: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
}
 .quality-section h3{
		font-size: 25px;
	}
.emote-div h3 {
	font-size: 25px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.emote-div p{
	margin: 0;
	font-size: 20px;
}
	.quality-section img{
		height: 80px;
	}
	.button-design{
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	display: inline-block;
    text-align: center;
	background-color: #E1E1E1;
	border-radius: 15px;
	cursor: pointer;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.6s ease, background-color 0.9s ease;
	}
	
	#yesil-zeytin{
		margin: 0;
		padding: 0;
		height: 150px;
		width: 150px;
	}
	.ansiklopedi-div{
		margin: 0 auto;
		overflow: hidden;
		border-radius: 0 0 20px 20px;
		width: 95%;
	}
	.main-ans-photo{
		background-position: center;
		background-size: auto;
		transform: scale(1.2);
	}
	.ansiklopedi-row h2{
		margin: 25px 0 0 !important;
		font-size: 35px;
	}
	.ansiklopedi-row h4{
		margin-top: 20px !important;
		font-size: 30px;
	}
	.bg-image{
		transform: translate(-50%, 60vw);
		width: 120vw;
		height: auto;
	}
	#sikintili-bg{
		display: none;
	}
	.img-div img{
		transform: translateY(-80%);
		width: 100%;
		height: auto;
	}
	.mobile-image {
		width: 100%;
		height: auto;
        opacity: 0.2 !important; /* Mobilde görselleri göster */
    }
	
} /* Mobil sonu */
		/*-------------------------------------------------   ÜRÜNLER CSS ----------------------------------------*/
#urunler-content{
	overflow: visible;
}
   		/*--------------------------------------------------   İLETİSİM CSS -------------------------------------- */
#main-content-iletisim{
	background-color: #73B8D6;
}
#main-content-iletisim h2{
	font-family: 'BebasNeue', sans-serif;
	letter-spacing: 4px;
    font-weight: 400;
	font-style: normal;
	font-size: 60px;
	margin-bottom: 30px;
}
#main-content-iletisim p{
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	font-weight: 500;
	word-spacing: 5px;
	padding: 10px 20px;
}
.navbar-fix-iletisim{
	z-index: 999;
}
.full-bg-iletisim-mavi{
	background-color: #73B8D6;
	min-height: 60vw;
	width: 100vw;
}
.full-bg-iletisim-yesil{
	background-color: #B3CC6E;
	min-height: 65vw;
	width: 100vw;
	position: relative;
	z-index: 6;
}
.z-index-15{
	position: relative;
	z-index: 15;
}
.z-index-10{
	position: relative;
	z-index: 10;
}
.z-index-5{
	position: relative;
	z-index: 5;
}
.eynak-phone-design{
	margin: 0px 10px;
	transform: translateY(-150px);
}
#iletisim-logo{
	margin-top: 60px;
	height: 400px;
}
.iletisim-bilgileri-div{
	background-color: white;
	border-radius: 35px;
	padding: 30px 60px;
	margin: 150px 50px 60px;
	height: auto;
	min-height: 500px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	
}
.iletisim-bilgileri-div h3{
	margin: 10px 10px 40px;
}
.iletisim-row{
	display: flex;
	justify-content: center;
	align-content: center;
	align-self: center;
}
.google-iframe-div{
	background-color: white;
	border-radius: 35px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	margin: 50px 100px;
	overflow: hidden;
}
.iletisim-icon{
	height: 70px;
}
#iframe-mobil{
	display: none;
}
/*--------------------------------------------- İLETİSİM MOBİL TASARIM ------------------------------------------*/
@media (max-width: 768px) {
	.eynak-phone-design{
		height: 500px;
		transform: translateY(-90px);
	}
	.iletisim-design-div{
		z-index: 5 !important;
	}
	#mobil-fix-row-iletisim{
		transform: translateY(-100px);
	}
	#main-content-iletisim h2{
		font-family: 'BebasNeue', sans-serif;
		letter-spacing: 2px;
		font-weight: 300;
		font-style: normal;
		font-size: 50px;
		margin-bottom: 0px;
	}
	#main-content-iletisim p{
		font-family: 'Montserrat', sans-serif;
		font-size: 20px;
		font-weight: 500;
		word-spacing: 4px;
		padding: 10px 20px 0px;
	}
	#iletisim-logo{
		margin-top: 0;
		height: 200px;
	}
	.iletisim-bilgileri-div{
		background-color: white;
		border-radius: 20px;
		padding: 15px 30px;
		margin: 50px 20px 30px;
		height: auto;
		min-height: 500px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	}
	.iletisim-bilgileri-div h3{
	margin: 5px 10px 20px;
	}
	.iletisim-bilgileri-div p{
		font-family: 'Montserrat', sans-serif;
		font-size: 20px;
		font-weight: 500;
		word-spacing: 4px;
	}
	.iletisim-icon{
	height: 50px;
	}
	.google-iframe-div{
	overflow: hidden;
	background-color: white;
	border-radius: 20px;
	padding: 0px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	margin: 20px 30px;	
	}
	#iframe-desktop{
		display: none;
	}
	#iframe-mobil{
		display: block;
		transform: translateX(5%);
	}
				} /*iletisim mobil tasarım sonu*/
      /*-------------------------------------------------- ÜRÜNLER CSS----------------------------------------*/
/*#main-content-urunler {
  position: relative;
  color: white;
  background-color: #fbf1e3;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 500px;
  z-index: -2;
  display: flex;
  justify-content: center; 
  align-items: center; 
}*/
:root {
	/* Font tanımları */
	--font-heading: 'BebasNeue', sans-serif;
	--font-subheading: 'Montserrat', sans-serif;
	--font-body: 'Poppins', sans-serif;
	--font-accent: 'DancingScript', cursive;
	
	/* Temel ölçü birimi */
	--base-size: 1rem;
	--scale: 1.25;
  }

#main-content-urunler{
	margin: 0;
	padding: 0;
	background-color: white;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#main-content-urunler .h1 {
	font-family: var(--font-heading);
	font-size: calc(var(--base-size) * 3.052); /* ~48.83px */
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0 0 0.5em;
	color: #222;
  }
  
  /* Özel vurgu başlıklar için */
  h1.accent {
	font-family: var(--font-accent);
	font-size: calc(var(--base-size) * 3.5);
	font-weight: 700;
  }
  #main-content-urunler .h2 {
	font-family: var(--font-subheading);
	font-size: calc(var(--base-size) * 2.441); /* ~39.06px */
	line-height: 1.3;
	font-weight: 600;
	margin: 1.5em 0 0.5em;
	color: #2a2a2a;
  }
#main-content-urunler .h3 {
	font-family: var(--font-subheading);
	font-size: calc(var(--base-size) * 1.953); /* ~31.25px */
	line-height: 1.4;
	font-weight: 500;
	margin: 1.3em 0 0.4em;
  }
#main-content-urunler .h4 {
	font-family: var(--font-subheading);
	font-size: calc(var(--base-size) * 1.563); /* ~25px */
	line-height: 1.4;
	font-weight: 500;
	margin: 1em 0 0.3em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #444;
  }
#main-content-urunler p {
	font-size: var(--base-size);
	margin-bottom: 1.2em;
	max-width: 65ch; /* Okunabilirlik için optimal satır uzunluğu */
  }
.story-animation{
	position: relative;
	overflow: hidden;
	padding: 0 50px;
	height: 100vh;
	background-color: #FBF1E3;
	/* background-image: -webkit-linear-gradient(120deg,#f6d365, #fda085, #f6d365, #fda085 );
	background-size: 400% 400%;
	animation: gradientAnimation 10s ease infinite; */
}
/* @keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
} */
.story-text {
	font-family:'Montserrat', sans-serif;
	font-size: 30px;
	font-style: italic;
	font-weight: 500;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	color: black;
	text-shadow: 0 2px 5px rgb(255, 255, 255);
	transition: opacity 0.5s;
	width: 80%;
	text-align: center;
  }

.eynak-zeytin-urunler-div{
	min-height: 70vh;
	background-color: #f8f9fa;
}
.story-animation h2{
	word-spacing: 10px;
	font-family:'Montserrat', sans-serif;
	font-size: 40px;
	font-style: italic;
	text-shadow: 0 2px 5px rgb(255, 255, 255);
}
.story-animation img {
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	position: absolute; /* Fotoğrafları üst üste bindirmek için */
	width: 60%; /* Sabit genişlik verin veya ihtiyaca göre ayarlayın */
	left: 50%; /* Yatayda ortala */
	transform: translateX(-50%); /* Yatayda tam ortalamak için */
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
	will-change: transform, opacity;
  }
  .story-animation .no-animation{
	width: 100%;
	height: auto;
  }
  .st-img1 {
	top: 25vh; /* margin-top yerine top kullanın (absolute için) */
	z-index: 60;
  }
  
  .st-img2 {
	top: calc(25vh + 20px); /* translateY yerine top ile offset ekleyin */
	z-index: 50;
  }
  .st-img3 {
	top: calc(25vh + 40px); /* translateY yerine top ile offset ekleyin */
	z-index: 40;
  }
  .st-img4 {
	top: calc(25vh + 60px); /* translateY yerine top ile offset ekleyin */
	z-index: 30;
  }
  .st-img5 {
	top: calc(25vh + 80px); /* translateY yerine top ile offset ekleyin */
	z-index: 20;
  }
  .bonus-img6{
	z-index: 10;
	top: calc(25vh + 80px);
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	position: absolute; /* Fotoğrafları üst üste bindirmek için */
	width: 60%; /* Sabit genişlik verin veya ihtiyaca göre ayarlayın */
	left: 50%; /* Yatayda ortala */
	transform: translateX(-50%); /* Yatayda tam ortalamak için */
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
  }
  .urunler-bg-bej{
	display: block;
	min-height: 60vh;
	height: auto;
	background-color: #f8f9fa;
  }
  .urunler-row1{
	width: 75%;
	z-index: 10;
	position: relative;
	padding-top: 80px;
	padding-bottom: 40px;
	border-radius: 40px;
	background-color: white;
	border: 6px solid #d1d2d4; 
    box-shadow: 0 0 0 4px black;
	margin-top: 250px;

	
	justify-content: center;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
  }
  .urunler-row1 h1{
	margin-right: 10px;
  }
  .urunler-row1 h2{
	margin-top: 10px;
	margin-right: 10px;
  }
  .urunler-row1 h4{
	margin-top: 25px;
  }
  .urunler-row1 .col-p1{
	left: 0px;
  }
  .urunler-row1 .col-p2{
	margin: 50px 0px 0px 0px;
	text-align: end;
  }
  .urunler-row1 .scroll-arrow{
    display: inline-block;
    align-items: end;
    justify-content: end;
    position: absolute;
    bottom: 5px;
    right: 5px;
    gap: 25px;
  }
  .urunler-row1 .scroll-arrow i{
	font-size: 36px;
  }
  .urunler-row1 .scroll-arrow span{
	font-size: 21px;
	font-family: var(--font-subheading);
  }
.scroll-arrow i {
    font-size: 24px;
    display: block;
    margin-bottom: 5px;
}

.scroll-arrow span {
    font-size: 14px;
    font-family: var(--font-subheading);
}
.wave-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    background: transparent;
    overflow: hidden;
}

.wave-svg {
    display: block;
    width: 100%;
    height: 150px;
    transform: scale(1.1);
}

  .urunler-row1 img{
	left: 0;
	width: 70%;
	height: auto;
  }
  #main-content-urunler .colored-line{
	opacity: 0.5;
  }
  #zeytindali1{
	transform: translateY(-300px) translateX(-50%);
	left: 50%;
	margin-top: 0;
	position: absolute;
	top: 0;
	width: 70vw;
	height: auto;
}
/* .banner {
	margin: 0;
	padding: 0;
  	display: block;
  	height: 100vh;
  	background-image: url("assets/photos/story/Unknown-13.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  
} */
/* .story-row{
	margin: 50px 50px;
	height: 100%;
}
.story-col{
	display: block;
	align-content: center;
	align-items: center;
	align-self: center;
	justify-content: center;
} */

/* .banner::before {
	transform: translateY(-200px);
	width: 70% !important;
	height: 80% !important;
	opacity: 0.7;

	content: '';
	position: absolute;
	inset: 0;
	background-image: url("assets/photos/story/Unknown-13.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	z-index: -1;
		
	-webkit-mask-image: url("assets/photos/story/ink.gif");
	-webkit-mask-size: cover;
	-webkit-mask-position: center;
	
  	mask-image: url("assets/photos/story/ink.gif");
	mask-size: cover;
	mask-position: center;
}
*/
    /*.story-section {
      display: flex;
      flex-direction: column;
      gap: 50px;
      padding: 50px 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    .story-section .step {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.5s, transform 0.5s;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    .story-section .step.active {
      opacity: 1;
      transform: translateY(0);
    }
    .story-section img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }
    .story-section h3 {
      margin-top: 20px;
      font-size: 24px;
      color: #333;
    }
    .story-section p {
      font-size: 16px;
      color: #666;
    }*/ 
	.katalog-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}
	
	#dijital-katalog {
		/* Yatay A4 Oranı (297/210 ≈ 1.41) */
		aspect-ratio: 297 / 210;
		max-width: 900px;
		width: 90%;
		max-height: 90vh;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		border-radius: 6px;
	}
	
	/* Her bir sayfanın içindeki görsel */
	.page img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Görseli sayfaya tam sığdırır */
		display: block;
	}
	
	/* Navigasyon stilleri */
	.katalog-nav {
		margin-top: 25px;
		display: flex;
		align-items: center;
		gap: 20px;
	}
	
	.katalog-nav button {
		background-color: #007bff;
		color: white;
		border: none;
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	
	.katalog-nav button:hover {
		background-color: #0056b3;
	}
	
	.katalog-nav #page-counter {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		min-width: 100px;
		text-align: center;
	}
		/*--------------------------------------------------  ÜRÜNLER MOBİL CSS -------------------------------*/
		@media (max-width: 768px){
			#main-content-urunler .h1 {
				font-size: calc(var(--base-size) * 2.3); /* ~36.8px */
				letter-spacing: 0.5px;
			  }
			
			  h1.accent {
				font-size: calc(var(--base-size) * 2.6); /* ~41.6px */
			  }
			
			  #main-content-urunler .h2 {
				font-size: calc(var(--base-size) * 1.85); /* ~29.6px */
				margin-top: 1.2em;
			  }
			
			  #main-content-urunler .h3 {
				font-size: calc(var(--base-size) * 1.5); /* ~24px */
				margin-top: 1em;
			  }
			
			  #main-content-urunler .h4 {
				font-size: calc(var(--base-size) * 1.3); /* ~20.8px */
			  }

			  #main-content-urunler p {
				font-size: calc(var(--base-size) * 0.95); /* ~15.2px - İsteğe bağlı */
				max-width: 100%; /* Satırların mobilde taşmasını engeller */
			  }
			.urunler-row1{
				width: 90%;
				z-index: 10;
				position: relative;
				padding-top: 40px;
				padding-bottom: 40px;
				border-radius: 20px;
				background-color: white;
				border: 6px solid #d1d2d4; 
				box-shadow: 0 0 0 4px black;
				margin-top: 50px;
				justify-content: center;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
			  }
			  .urunler-row1 img{
				height: 230px;
				width: auto;
			  }
			  .urunler-row1 h1{
				margin-right: 10px;
			  }
			  .urunler-row1 h2{
				margin-top: 10px;
				margin-right: 10px;
			  }
			  .urunler-row1 h4{
				margin-top: 25px;
			  }
			  .urunler-row1 .col-p1{
				left: 0px;
			  }
			  .urunler-row1 .col-p2{
				margin: 50px 0px 0px 0px;
				text-align: center;
			  }
			  .urunler-row1 .scroll-arrow{
				display: block;
				align-items: center;
				justify-content: center;
				position: relative;
				bottom: 0px;
				right: 0px;
				gap: 25px;
			  }
			  .urunler-row1 .scroll-arrow i{
				font-size: 36px;
			  }
			  .urunler-row1 .scroll-arrow span{
				font-size: 21px;
				font-family: var(--font-subheading);
			  }
			.scroll-arrow i {
				font-size: 24px;
				display: block;
				margin-bottom: 5px;
			}
			
			.scroll-arrow span {
				font-size: 14px;
				font-family: var(--font-subheading);
			}
			.story-text{
				margin-top: 30px;
				margin-bottom: 40px;
				font-size: 20px;
			}
			.story-animation h2{
				word-spacing: 5px;
				font-family:'Montserrat', sans-serif;
				font-size: 30px;
				font-style: italic;
				text-shadow: 0 2px 5px rgb(255, 255, 255);
			}
			.story-animation img {
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 0px;
				position: absolute; /* Fotoğrafları üst üste bindirmek için */
				width: 90%; /* Sabit genişlik verin veya ihtiyaca göre ayarlayın */
				left: 50%; /* Yatayda ortala */
				transform: translateX(-50%); /* Yatayda tam ortalamak için */
				box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
				will-change: transform, opacity;
			  }
			  .story-animation .no-animation{
				width: 180%;
				height: auto;
			  }
			  .st-img1 {
				top: 25vh; /* margin-top yerine top kullanın (absolute için) */
				z-index: 60;
			  }
			  
			  .st-img2 {
				top: calc(25vh + 30px); /* translateY yerine top ile offset ekleyin */
				z-index: 50;
			  }
			  .st-img3 {
				top: calc(25vh + 60px); /* translateY yerine top ile offset ekleyin */
				z-index: 40;
			  }
			  .st-img4 {
				top: calc(25vh + 90px); /* translateY yerine top ile offset ekleyin */
				z-index: 30;
			  }
			  .st-img5 {
				top: calc(25vh + 120px); /* translateY yerine top ile offset ekleyin */
				z-index: 20;
			  }
			  .bonus-img6{
				z-index: 10;
				top: calc(25vh + 150px);
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 0px;
				position: absolute; /* Fotoğrafları üst üste bindirmek için */
				width: 90%; /* Sabit genişlik verin veya ihtiyaca göre ayarlayın */
				left: 50%; /* Yatayda ortala */
				transform: translateX(-50%); /* Yatayda tam ortalamak için */
				box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
			  }
			  .urunler-bg-bej{
				display: block;
				min-height: 30vh;
				height: auto;
				background-color: #f8f9fa;
			  }		
			#bg-2-urunler{
				height: auto;
			}
		}
		/*--------------------------------------------------   HAKKİNDA CSS -------------------------------------- */
		#main-content-hakkinda .h1 {
			font-family: var(--font-heading);
			font-size: calc(var(--base-size) * 3.052); /* ~48.83px */
			line-height: 1.2;
			font-weight: 400;
			letter-spacing: 1px;
			margin: 0 0 0.5em;
			color: #222;
		  }
		  
		  /* Özel vurgu başlıklar için */
		  h1.accent {
			font-family: var(--font-accent);
			font-size: calc(var(--base-size) * 3.5);
			font-weight: 700;
		  }
		  #main-content-hakkinda .h2 {
			font-family: 'DancingScript', sans-serif;
			font-style: normal;
			font-size: calc(var(--base-size) * 2.441); /* ~39.06px */
			line-height: 1.3;
			font-weight: 600;
			margin: 1.5em 0 0.5em;
			color: #2a2a2a;
		  }
		#main-content-hakkinda .h3 {
			font-family: var(--font-subheading);
			font-size: calc(var(--base-size) * 1.953); /* ~31.25px */
			line-height: 1.4;
			font-weight: 500;
			margin: 1.3em 0 0.4em;
		  }
		#main-content-hakkinda .h4 {
			font-family: var(--font-subheading);
			font-size: calc(var(--base-size) * 1.563); /* ~25px */
			line-height: 1.4;
			font-weight: 500;
			margin: 1em 0 0.3em;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: #444;
		  }
		#main-content-hakkinda p {
			font-family: 'Montserrat', sans-serif;
			font-size: var(--base-size);
			margin-bottom: 1.2em;
			max-width: 65ch; /* Okunabilirlik için optimal satır uzunluğu */
		  }
	#main-content-hakkinda{
		background-color: #FBF1E3;
	}

	.hakkinda-entrance-img{
		width: 100%;
		background-image: url(assets/photos/eynak-hakkinda-img.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-position-y: -50px;
		min-height: 800px;

	}
	.hakkinda-div{
		padding: 0;
		min-width: 100%;
		background-color: #f0f0f0;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.hakkinda-baslik{
		padding-bottom: 30px !important;
		display: flex;
		justify-content: center;
	}
	.hakkinda-text{
		display: flex;
		justify-content: center;
		padding: 10px;
	}
	.hakkinda-text p{
		font-family: 'Montserrat', sans-serif;

		font-size: 20px !important;
		margin-bottom: 40px !important;
	}
				/* deniyoruz bir şeyler kısmı */
				.scroll-space {
					height: 90vh;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #7f8c8d;
					font-size: 24px;
				}

				.a4-page {
					width: 210mm;
					min-height: 200mm;
					background: white;
					margin: 20px auto;
					padding: 30mm;
					border-radius: 25px;
					box-shadow: 0 0 10px rgba(0,0,0,0.1);
					position: relative;
					opacity: 0;
					transform: translateY(50px);
				}
				.a4-page.active {
					transform: translateY(0) scale(1);
					opacity: 1;
				}
				.zeytin {
					position: absolute;
					width: 30px;
					height: 30px;
					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><ellipse cx="50" cy="50" rx="40" ry="25" fill="%236b8e23"/><ellipse cx="50" cy="45" rx="30" ry="15" fill="%23557a1b"/></svg>');
					background-size: contain;
					z-index: 1;
					pointer-events: none;
				}
				
				.zeytin-container {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					pointer-events: none;
					overflow: hidden;
					z-index: 1;
				}
				.bg-div-hakkinda img{
					overflow: hidden;
					pointer-events: none;
					width: 100%;
					position: absolute;
					mix-blend-mode: multiply;
					opacity: 0.8;
					
				}		
				.bg-div-hakkinda-2{
					position: absolute;
					width: 100%;
					height: 100vh; /* Ekran yüksekliği kadar veya istediğiniz değer */
					overflow: hidden;
				}	
				.bg-div-hakkinda-2 img {
					width: 100%;
					height: 100%;
					object-fit: cover; /* Görseli tam sığdırır, oranı bozmadan */
					object-position: center; /* Görseli ortalar (opsiyonel) */
					pointer-events: none;
					mix-blend-mode: multiply;
					opacity: 0.8;
				  }
				.translatey--30{
					transform: translateY(-30px);
				}
				#hakkinda-bg2 img{
					overflow: hidden;
					pointer-events: none;
					width: 100%;
					position: absolute;
					transform: translateY(200vh);
					right: -50;
					mix-blend-mode: multiply;
					opacity: 0.8;
					
				} 
				  .bg-left, .bg-right {
					position: absolute;
					height: 100%;
					pointer-events: none;
					mix-blend-mode: multiply;
					opacity: 0.6;
				  }
				  
				  .bg-left {
					left: -30%;
					transform: translateY(160vh);
				  }
				  
				  .bg-right {
					right: -30%;
				  }
				  
				  .bg-left img, .bg-right img {
					height: 100%;
					width: auto;
					max-width: none;
				  }	
			/*--------------------------------------------------   HAKKİNDA MOBİL CSS -------------------------------------- */
			@media (max-width: 768px) {
				/* Hakkında ana container */
				.hakkinda-div {
				  padding: 0 5px;
				  min-width: 100vw;
				  background: #f0f0f0;
				  text-align: center;
				}
				.a4-container {
				  padding: 0;
				}
				.a4-page {
				  width: 85vw;
				  min-height: unset;
				  padding: 15px 5px;
				  border-radius: 12px;
				  box-shadow: 0 0 6px rgba(0,0,0,0.08);
				  margin: 10px auto;
				  font-size: 1rem;
				}
				.hakkinda-baslik h2 {
				  font-size: 1.5rem !important;
				  margin: 10px 0;
				}
				.hakkinda-text p {
				  font-size: 1rem !important;
				  margin-bottom: 18px !important;
				  padding: 0 2px;
				}
				.scroll-space {
				  font-size: 1.1rem;
				  height: 40vh;
				  padding: 10px 0;
				}
				.bg-div-hakkinda-2 {
				  position: relative;
				  height: 30vw;
				  min-height: 120px;
				  max-height: 180px;
				  overflow: hidden;
				  margin-bottom: 10px;
				}
				.bg-div-hakkinda-2 img {
				  width: 100vw;
				  height: 100%;
				  object-fit: cover;
				  object-position: center;
				}
				
			  }
			  
			/*--------------------------------------------------   HİZMETLER CSS -------------------------------------- */
			.card-hizmetler:hover{
				transform: translateY(-5px); /* Hafifçe yukarı kaldır */
				box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
			}
			.card-hizmetler{
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}
			.video-wrapper {
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				border-radius: 15px;
				overflow: hidden;
				box-shadow: 0 8px 25px rgba(0,0,0,0.8);
			}
			.service-video {
				width: 100%;
				height: auto;
				display: block;
			}
			.service-container {
				position: relative;
				z-index: 1;
			}
			
			.service-bg-logo {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				background-image: url('assets/Logo/eynak-logo-slogansiz.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				opacity: 0.3;
				filter: grayscale(100%);
				z-index: -1;
				pointer-events: none;
			}
			
			.card-hizmetler {
				background-color: rgba(255, 255, 255, 0.9);
				backdrop-filter: blur(5px);
			}