/* contact */
.bold_title{
    font-size: 18px;
    margin-bottom: 10px;
    font-family: "OpenSans-Bold" , sans-serif
}
.big_size{
    font-size: 14px;
    margin-right: 10px;
}
.sosyal ul li{
    list-style: none;
    float: left;
}
.sosyal ul li a{
    color: black;
    padding: 10px 15px;
    border: 1px solid #3339;
    border-radius: 5px;
    margin-right: 15px;
    transition: all 0.5s;
}
.sosyal ul li a:hover{
    background: #3339;
    transition: all 0.5s;
    color: #1e1e1c;
}
.b_bold_title{
    font-family: "OpenSans-Bold" , sans-serif;
    font-size: 30px;
}
.contact_page .form {
    width: 100%;
    position: relative;
    height: 70px;
    overflow: hidden;
    font-family: "OpenSans-Bold" , sans-serif;
  }
.width_8 .form{
  width: 80%;
}
  
  .contact_page .form input, .contact_page .form textarea ,
  .js-fileName{
    width: 100%;
    height: 100%;
    color: #1e1e1c;
    padding: 15px 0px 0;
    border: none;
    font-family: "OpenSans-Bold" , sans-serif;
  }
  .contact_page .form label {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-weight: 700;
    border-bottom: 1px solid #3339;
  }
  .contact_page .form label::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-bottom: 3px solid #1e1e1c;
    transform: translateX(-100%);
    transition: all 0.3s ease;
  }
  
  .contact_page .content-name {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 5px;
    transition: all 0.3s ease;
  }
  .contact_page .form input:focus, 
  .contact_page .form textarea:focus {
    outline: none;
  }
  .contact_page .form textarea:focus + .label-name .content-name,
  .contact_page .form textarea:valid + .label-name .content-name ,
  .contact_page .form input:focus + .label-name .content-name,
  .contact_page .form input:valid + .label-name .content-name {
    transform: translateY(-150%);
    font-size: 14px;
    left: 0px;
    color: #3339;
  }
  .contact_page .form textarea:focus + .label-name::after,
  .contact_page .form textarea:valid + .label-name::after,
  .contact_page .form input:focus + .label-name::after,
  .contact_page .form input:valid + .label-name::after {
    transform: translateX(0%);
  }

.send_mess{
    padding: 10px 20px;
    background: #1e1e1c;
    color: #fff;
    font-size: 14px;
    font-family: "OpenSans-Regular" , sans-serif;
    border: 1px solid #1e1e1c;
    transition: all 0.3s ease;
    width: 150px;
    float: right;
}
.send_mess:hover{
    padding: 10px 20px;
    background: #fff;
    color: #1e1e1c;
    font-family: "OpenSans-Bold" , sans-serif;
    transition: all 0.3s ease;
    width: 150px;
}
/* haqqimizda */
.company_2{
    margin-right: 80px;
}
.company_2 img {
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-box-shadow: 0px 2px 6px 2px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 6px 2px rgb(0 0 0 / 75%);
}
.company_2 img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
/* blog */
.blog_page .c-preview {
    background: #000;
    background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #ffffc1 50%, #1e1e1c 75%, #9a6d32 100%);
    background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #ffffc1 50%, #1e1e1c 75%, #9a6d32 100%);
    background: linear-gradient(135deg, #000000 0%, #000000 25%, #ffffc1 50%, #1e1e1c 75%, #9a6d32 100%);
    background-size: 400% 400%;
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    justify-content: left;
    align-items: self-end;
    color: #fff;
    position: relative;
    padding-left: 15px;
    padding-bottom: 15px;
    transition: .5s all;
  }
  .blog_page .c-preview__img {
    position: absolute;
    left: 0;
    top: 0;
    background: #000 url(https://www.w3schools.com/w3images/rocks.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    z-index: 1;
    opacity: .5;
    mix-blend-mode: screen;
  }
  .blog_page .c-preview__title {
    position: relative;
    z-index: 10;
    letter-spacing: .05em;
  }
  .blog_page .c-preview:hover {
    background-position: 100% 100%;
  }
  .blog_page .c-preview:hover__title {
    text-shadow: 0 0 20px black;
  }
  .he_400 .c-preview {
      width: calc(100% - 15px);

  }
  .he_400 .c-preview .rig_preview{
      width: calc(100% - 15px);

  }
  .he_400 .c-preview, .he_400 .c-preview .c-preview__img{
      height: 415px;
      margin-right: 15px;
  }
  .rig_preview .c-preview{
      margin-left: 15px;
  }
  .he_200 .c-preview, .he_200 .c-preview .c-preview__img{
      height: 200px;
      margin-bottom: 15px;
  }
  .blog_page_a a{
    text-decoration: none;
    background: #f6224c;
    padding: 10px 15px;
    color: #fff;
    border: 1px solid #f6224c;
    transition: .5s all;
  }
  .blog_page_a {
    margin-bottom: 15px;
  }
  .blog_page_a a:hover{
    transition: .5s all;
    background:transparent ;
  }
  .blog_page_sosyal{
      font-size: 12px;
  }
  .blog_h{
      height: 420px;
      float: left;      
      width: 50%;
      margin-bottom: 10px;
  }
 /* blog ici */
 .blog_page_in .new{
  border-left: 4px solid #000;
  padding: 10px;
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
  margin-bottom: 30px;
 }
 .blog_page_in .blog_h{
  width: 100%;
 }
 .blog_page_in .new_title{
  border-left: 4px solid #000;
  padding: 10px;
  margin-bottom: 24px;
  font-size: 17px;
  font-family: "OpenSans-Bold" , sans-serif;
 }

 .zoomEffect_1 {
  position: relative;
  overflow: hidden;
}
.zoomEffect_1 img {
  max-width: 100%;
  height:auto;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.zoomEffect_1:hover img {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.zoomeffects{
	clear:both;	
}
.zoomeffects .half {
    float: left;
    margin: 1%;
    width: 100%;
}
.blog_page_in .owl-carousel .owl-nav button.owl-next, 
.blog_page_in .owl-carousel .owl-nav button.owl-prev{
    background: #f6224c;
    color: #fff;
    padding: 0px 10px !important;
}

/* index ::shadow */
:root {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 1em;
	--numcards: 4;
	--outline-width: 0px;
}

#cards {
}

#card_1 {
	--index: 6;
}

#card_2 {
	--index: 6;
}

#card_3 {
	--index: 6;
}

.card {
	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--card-top-offset));
}

@supports (animation-timeline: works) {

	@scroll-timeline cards-element-scrolls-in-body {
		source: selector(body);
		scroll-offsets:
			/* Start when the start edge touches the top of the scrollport */
			selector(#cards) start 1,
			/* End when the start edge touches the start of the scrollport */
			selector(#cards) start 0
		;
		start: selector(#cards) start 1; /* Start when the start edge touches the top of the scrollport */
		end: selector(#cards) start 0; /* End when the start edge touches the start of the scrollport */
		time-range: 4s;
	}

	.card {
		--index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
		--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
	}
	
	.card__content {
		transform-origin: 50% 0%;
		will-change: transform;

		--duration: calc(var(--reverse-index0) * 1s);
		--delay: calc(var(--index0) * 1s);

		animation: var(--duration) linear scale var(--delay) forwards;
		animation-timeline: cards-element-scrolls-in-body;
	}

	@keyframes scale {
		to {
			transform:
				scale(calc(
					1.1
					-
					calc(0.1 * var(--reverse-index))
				));
		}
	}
}

/** DEBUG **/

#debug {
  position: fixed;
  top: 1em;
  left: 1em;
}
#debug::after {
  content: " Show Debug";
  margin-left: 1.5em;
  color: white;
  white-space: nowrap;
}

#debug:checked ~ main {
  --outline-width: 1px;
}

#cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
  margin-top: -48px;
}

.card {
	outline: var(--outline-width) solid hotpink;
  border: unset;
  border-radius: unset;
}

.card__content {
	box-shadow: unset;
	border-radius: unset;
	overflow: hidden;

	display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 2fr 3fr;
	grid-template-rows: auto;

	align-items: stretch;
	outline: var(--outline-width) solid lime;
}

.card__content > div {
	grid-area: text;
	width: 90%;
	place-self: left;
	text-align: left;

	display: grid;
	gap: 1em;
	place-items: start;
}

.card__content > figure {
	grid-area: img;
	overflow: hidden;
}

.card__content > figure > img {
	width: 100%;
	height: 355px;
	object-fit: cover;
  border-radius: 15px;
}
.trans
{
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.top
{
  display: contents;
  margin-left: auto;
  margin-right: auto;
}
.top .top_in
{
  position: relative;
  overflow: hidden;
}

.top .top_in::before
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  color: white;
  opacity: 0.4;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.top .top_in img
{
  width: 100%;
  height: auto;
    padding: 0px 15px;
  overflow: hidden;
}
.lightbox
{
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.75);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}
.lightbox img
{
  max-width: 90%;
  max-height: 80%;
  position: relative;
  top: -100%;
  /* Transition */
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.lightbox:target
{
  outline: none;
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  -webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}