@black: #000;
@green: #34784C;
@lightGray: #FBF9F6;
@white: #fff;
@gray: #919191;
@images: "../images";


::placeholder {
    font-size: 12px;
}

/* Easing kısayolu */
.easeOutCubic () {
    -webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
         transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
 -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
         transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
}
/* Eğimli backgroundlar için ::before kısayolu*/
.skewBackground () {
        content:"";
        position: absolute;
        width:100%;
        height: 90%;
        top:5%;
        left:0%;
        background:@lightGray;
        -webkit-transform: skewY(-3deg);
                transform: skewY(-3deg);
        margin:0 auto;
}


.font() {
    font-family:"TTN", Arial, Helvetica, sans-serif
} 
a {
    color:@black;
    &:hover {
        color: @gray;
    }
    .easeOutCubic
}
body {
    background:white;
    font-variant-ligatures: no-common-ligatures;
    .font
}
h1 {
    font-size:2rem;
    letter-spacing: .1rem;
    @media only screen and (max-width : 768px) { 
        font-size:1.5rem;
        letter-spacing: 0;
      } 
}
h2 {
    letter-spacing: .1rem;
    font-size:1.3rem;
    @media only screen and (max-width : 768px) { 
        letter-spacing: 0;
        font-size:1.1rem;
      } 
}
.btn-bordered {
    background:none;
    border:1px solid @black;
    border-radius: 0;
    letter-spacing: 1px;
    font-size:.8em;
    font-weight: 600;
    padding:2% 10%;
    
}
.btn-dark {
    background:@black;
    border:1px solid @black;
    border-radius: 0;
    letter-spacing: 1px;
    font-size:.8em;
    font-weight: 600;
    padding:2% 10%;
    color:white;
    
}
.header--fixed {
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0
}
.headroom {
    -webkit-transition: -webkit-transform .25s ease-in-out;
    transition: -webkit-transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
    will-change: transform
}

.headroom--pinned {
    -webkit-transform: translateY(0);
            transform: translateY(0)
}

.headroom--unpinned {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%)
}
.header {
    border-bottom:1px solid @black;
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    z-index: 10;
    background:white;
    border-top:7px solid black;
   
    .logo {
         margin:0 auto;
         display:block;
         width:150px;
         @media only screen and (max-width : 768px) { 
            width:100px;
            margin: 5px auto -25px auto;
          } 
         
    }
    a {
        font-size:12px;
        font-weight: 500;
        &.nav-link {
           margin:0 1em;
        }
    }
    .social {
        width:120px;
        @media only screen and (max-width : 768px) { 
           
            margin:5px auto;
          } 
        a {
            font-size:1em;
            margin:0 5px;
        }
    }
    .menu {
        margin:0 -30px;
        .mobileMenu {
            display:none;
            ul{
                @media only screen and (max-width : 768px) { 
                    display:none;
                    position: absolute;
                    background: white;
                    width: 100%;
                    left: 0px;
                    right: 0px;
                    text-align: center;
                    margin: 0;
                    padding: 0;
                  } 
            }
            @media only screen and (max-width : 768px) { 
                display:block;
              } 
        }
        .navbar-nav {
            @media only screen and (max-width : 768px) { 
               display:none;
             } 
             

        }
    }
    .search {
        width:120px;
        text-align: right;
        white-space: nowrap;
        position: relative;
	@media only screen and (max-width : 768px) {
		width: 20px;
		left: 39%;
	}
        
        button {
            background:none;
            border:0;
            padding:3px;
            outline:none;
            cursor: pointer;
            :hover {
                opacity:.5;
            }
            .easeOutCubic

            
        }
        .area {
          opacity:0;
            right: 0;
            padding:4px;
            background: white;
            top: 10px;
           position: absolute;
           -webkit-transition: ease 1s;
           transition:ease 1s;
           overflow: hidden;
           border-radius: 0 0 2px 2px;
           -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
                   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
           visibility: hidden;
           @media only screen and (max-width : 768px) { 
            
          } 
           button {
            background:@black;
            border-radius: 2px;
            outline: none;
            padding: 10px 15px;
            margin: -4px 0 0 0;
            color:white;

           }
           
           input {
            border:1px solid @gray;
            border-radius: 2px;
            outline:none;
            padding: 7px 15px;

           }
            input[type=text] {
            width: 73%;
            padding: 4px;
            float: left;
            font-size: 12px;
            }
            input[type=submit] {
                width: 25%;
                padding: 4px 0px;
                text-transform: uppercase;
                font-size: 12px;
                background-color: #000;
            }
           .easeOutCubic
          
           
        }
        .area.open {
            opacity: 1;
            overflow: hidden;
            top:32px;
            visibility: visible;
            right: 0;
                width: 250px;
            

          
            .easeOutCubic
         }
        
    }
    .navbar  {
        padding:0 1rem;

    }



.navbar .nav-item{
 
  overflow: hidden;
  margin:5px auto;
}
.navbar .nav-item a{
  display: inline-block;
  position:relative;
  padding: 0.2rem 0.3rem;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  -webkit-transition: -webkit-transform 300ms;
  -moz-transition: transform 300ms;
  .easeOutCubic
  
}
.navbar .nav-item a:after{
  content: attr(data-hover);
  position: absolute;
  padding: 0.2rem 0.3rem;
  top: -30px;
  left:0;
  transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
.navbar .nav-item:hover a,
.navbar .nav-item:focus a {
	transform: translateY(30px);
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
}

}

.headroom {
    will-change: transform;
    -webkit-transition: -webkit-transform 200ms linear;
    transition: -webkit-transform 200ms linear;
    transition: transform 200ms linear;
    transition: transform 200ms linear, -webkit-transform 200ms linear;
}
.headroom--pinned {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
}
.headroom--unpinned {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
}
.mainTop {
    @media only screen and (max-width : 768px) { 
     } 
   
    .owl-carousel {
       .item {
        height:420px;
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center center; 
        @media only screen and (max-width : 768px) { 
            height: 200px;
         } 
       }
        
        .caption {
            position: absolute;
            bottom: 10%;
            background: #040404;
            color: white;
            padding: 5px;
            letter-spacing: 2px;
            font-size: 1.5em;
            font-weight: 700;
            max-width: 90%;
            @media only screen and (max-width : 768px) { 
                font-size: 1em;
                letter-spacing: 1px;
             } 
        }
        .owl-nav {
            
            position:absolute;
            right:1%;
            bottom:1%;
            background:rgba(0, 0, 0, 0.1);
            @media only screen and (max-width : 768px) { 
                background:rgba(0, 0, 0, 0.5);
                color:white;
             } 
            button {
                width: 30px;
                height: 30px;
                font-size: 20px;
                line-height: 0;
                color:white;
                outline:none;
                @media only screen and (max-width : 768px) { 
                   margin:2px;
                   font-size: 2em;
                 } 
                &:hover {
                    background:white;
                    color:black;
                }
            }
        }
        
    }

    .right {
        @media only screen and (max-width : 768px) { 
            margin:.5em auto 0 auto;
         } 
	a:first-child
        {
            margin-left: 0;
        }
        a:last-child
        {
            margin-right: 0;
        }
        a {
            
            display: block;
            position: relative;
            height: 200px;
            font-weight: 700;
            color:black;
            background-color:white;
            margin: 0 0 20px 0;
            text-decoration: none;
            background-repeat: no-repeat;
            background-size:cover;
            background-position: center center;
            @media only screen and (max-width : 768px) { 
                height: 130px;
                margin: 15px auto;
		width: 48%;
		float: left;
		margin: 0 6px;
             } 
            &:hover .overlay {
                outline-offset: -15px;
                background:rgba(255, 255, 255, 0.75);

            }
            .overlay {
                background:rgba(255, 255, 255, 0.8);
                position:absolute;
                height:100%;
                width:100%;
                top:0;
                left:0;
                z-index:1;
                outline: 2px solid @gray;
                outline-offset: -25px;
                .easeOutCubic

            }
             p {
                   z-index: 2;
                    position: relative;
                    width: 70%;
                    text-align: center;
                    margin: 0 auto;
                    font-style: italic;
                    font-size: 0.9em;
                    font-weight: 300;
                    line-height: 1.3em;
             }
             
            
            
        }
    }
}

.youtubeSection {
    padding-right:0;
    padding-left:0;
    padding: 10% 0;
    position: relative;
    background:@lightGray;
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    @media only screen and (max-width : 768px) { 
        -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
        clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
        padding:20% 0;
     } 
  
    h2 {
        font-size:1em;
        font-weight: 700;
        letter-spacing: .4em;
        line-height: 2em;
    }
    .youtubeLink {
        background:url("@{images}/youtube-bg.svg") no-repeat center center;
        padding: 15% 100px;
        @media only screen and (max-width : 768px) { 
           padding:10% 0;
         } 
    }
    .youtubeFrame {
        background:url("@{images}/youtube-cover-bg.svg") no-repeat center center;
        padding: 0px;
        width:100%;
        iframe {
            width: 100%;
        }
    }
}
.blog {
    margin:40px 0 0 0;
    position: relative;
    .blog-hero-image {
        height: 400px;
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        margin-bottom:25px;
        h1 {
            position: absolute;
            bottom:10px;
            right: 0;
            padding: inherit 30px !important;
        }
    }
    .blog-content {
        img {
            width:100%;
            height: 300px;
            object-fit: cover;
        }
        h3 {
            font-size:16px;
            font-weight: 600;
            letter-spacing: 0;
            margin:20px 0 10px 0;
        }
        .related {
            h1 {
                color:@black;
                margin:20px 0;
                font-size:1.5em;
                font-weight: 700;
                position: relative;
                &:before {
                    content:"";
                    position: absolute;
                    height: 2px;
                    width:30%;
                    top:50%;
                    right:0;
                    background:@black;

                }
            }
        }
        .related h1:before{
            width: 25%
        }
    }
    .item {
        height: 200px;
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center center;
        margin: 15px auto;
        text-decoration: none;
        
        &:hover .overlay {
            outline-offset: -15px;
            background:rgba(255, 255, 255, 0.75);

        }
        .overlay {
            position:absolute;
            height:100%;
            width:100%;
            top:0;
            left:0;
            z-index:1;
            outline: 2px solid @white;
            outline-offset: -25px;
            .easeOutCubic

        }
            .caption {
                background:@lightGray;
                width:50%;
                margin: 0 auto;
                padding: 10px;
                position: relative;
                bottom:-10%;
                text-align:center;
                z-index: 2;
                @media only screen and (max-width : 768px) { 
                   width:85%;
                 } 
                p {
                    background: white;
                    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                    font-size: 0.7em;
                    padding: 10px 0;
                    margin: 0;
                    letter-spacing: 2px;
                    font-weight: 600;
                }
                
            }
            
    }
    .right-image {
        height: 300px;
        width: 100%;
        background-size: cover;
        @media only screen and (max-width : 768px) { 
            margin-top:30px;
            height: 200px;
         } 
    }
}

.kitaplar {
    padding-right:0;
    padding-left:0;
    height:500px;
    position: relative;
    @media only screen and (max-width : 768px) { 
       height: auto;
      } 

      div[class*="col"] a {
          margin:10px 0;
          display: block;
          -webkit-box-shadow: 0px 0px 0 1px @black;
                box-shadow: 0px 0px 0 1px @black;
        display: block;
        .easeOutCubic
      }
   
   
    
    .col-2 a:hover{
        opacity: .7;
        -webkit-box-shadow:none;
                box-shadow:none;
    }
    .content {
        position: relative;
        z-index:2;
        text-align: right;
        top:15%;
        & .btn-bordered {
            margin:1em auto;
            display: block;
            width: 33%;
            @media only screen and (max-width : 768px) { 
               width:100%;
               margin:2em auto;
             } 


        }
    }
}
.kimdir {
    margin:60px 0 0 0;
    position: relative;
    padding:10% 0 5% 0;
    background:@lightGray;
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    @media only screen and (max-width : 768px) { 
        -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
        clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
        padding:30% 0;
     } 
    .box {
        border:1px solid @black;
        height: 100px;
        margin:1em auto;
        @media only screen and (max-width : 768px) { 
         width:50%;
         float: left;
         } 
        img {
            height:60px;
            margin:0 auto;
        }
        &:first-child {
            img {
                height: 25px;;
            }
        }
        
    }
    .photo {
        background-image: url('/wp-content/uploads/2019/01/anasayfa-icon.png');
        background-repeat: no-repeat;
        background-size:contain;
        background-position: top center;
        img {
            @media only screen and (max-width : 768px) { 
                margin-bottom:-35%;
             } 
        }
       
    }
    .col-3 > img {
        width: 77%;
        position: absolute;
        bottom: -4%;
    }
    
}

.footer {
    text-align:center;
    border-top:1px solid @white;
    padding:10px 0 0 0;
    font-size:90%;
    margin:3% 0 0 0;
    .instagram {
        position: relative;
        background-image: url('@{images}/instagram.svg');
        background-repeat: no-repeat;
        background-size: 30%;
        background-position: 99% 12%;
        background-color:@lightGray;
        -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
        padding: 8% 0 5% 0;
        @media only screen and (max-width : 768px) { 
            -webkit-clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%);
          } 
       
    
        .content {
            position: relative;
            z-index: 2;
            margin-top: 60px;
            background: transparent;
        }
        img {
            margin: 10px 0;
        }
        h2 {
            letter-spacing: 0.3rem;
            text-align: center;
            margin-bottom: 40px;
        }
    }
    a {
        letter-spacing: 2px;
        font-size:.8em;
        margin:0 5px;
        font-weight: 500;
    }
    ul {
        margin-bottom:0;
        padding:0 0 10px 0;
    }
    .container {
        background:@lightGray;

    }
}
.page-wrapper {
    margin:9em auto 0 auto;
    @media only screen and (max-width : 768px) { 
        margin:5em auto 0 auto;
     } 

}
.share-buttons {
    position:fixed;
    left:0;
    width:40px;
    text-align: center;
    z-index: 1;
    a {
        background:black;
        color:white;
        display: block;
        padding:10px;
        margin:1px 0;
        .easeOutCubic;
        &:hover {
            color:@gray;
        }
    }

}
.sidebar {
    border-left:1px solid @gray;
    padding:0 10px;
    .follow-us {
        text-align:center;
        margin:0 0 50px 0;
        a {
            margin:5px;
        }
    }
    .measuring {
        float: none;
        clear: both;
        display: block;
        margin:0 0 30px 0;
       .items {
        a {
            width:50%;
            height: 200px;
            background:#e0e0e0;
            margin:0;
            box-shadow: inset 0px 0px 0px 2px white;
            display: inline-block;
            align-items: center;
            position: relative;
            margin:-1px;
            &:hover  img{
                width:40%;
                
            }
            img {
                margin: 0 auto;
                width: 50%;
                position: absolute;
    right: 0;
    left: 0;
    top: 10%;
                .easeOutCubic
            }
            p {
               position: absolute;
               color:#000;
               bottom:15px;
               text-align: center;
               line-height: 13px;
               font-size:13px;
               right: 0;
               left:0;
               width:90%;
               margin:0 auto;
            }
        }
       }
    }
    .book {
        clear: both; 
        text-align: center;
        margin-bottom:20px;
        a {

            img {
                width:77%;
                margin:0 auto;
            }    
        }
       
    }
    .last-video {
        clear: both; 
        text-align: center;
        margin-bottom:20px;
        a {
            
            img {
                width:100%;
                margin:0 auto;
            }    
        }
       
    }
    .subscribe {
        text-align: center;
        input {
            width:100%;
            margin:10px 0;
        }
        .box {
            padding:10px;
            border:1px solid @black;
        }
        .btn {
            margin:0 auto;
        }
    }
    h2 {
        text-align: center;
        font-size:1em;
        letter-spacing: 0;
        border-bottom:1px solid @gray;
        padding:0 0 15px 0;
        font-weight: 600;
    }
}



  .header--fixed {
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0
}



.headroom {
    -webkit-transition: -webkit-transform .25s ease-in-out;
    transition: -webkit-transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
    will-change: transform
}

.headroom--pinned {
    -webkit-transform: translateY(0);
            transform: translateY(0)
}

.headroom--unpinned {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%)
}

 h1.dark {
    background:black;
    color:white;
    display: table;
    padding:10px;
    margin-bottom:20px;
    letter-spacing: .2em;
    font-size:1.5em;
}
#hesaplamalar {
        margin: 5% 0px 0px;
        padding: 5% 0 10px;
        background-size: 30%;
        background-position: 99% 12%;
        background-color: #ffffff;
    .items {

        div {
            padding: 0px 5px;
            a {
                width: 100%;
                height: 200px;
                background: #e0e0e0;
                margin: 0;
                box-shadow: inset 0px 0px 0px 2px white;
                display: inline-block;
                align-items: center;
                position: relative;
                margin: -1px;
            }
            a img {
                margin: 0 auto;
                width: 50%;
                position: absolute;
                right: 0;
                left: 0;
                top: 10%;
                -webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
                transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            }
            a:hover img {
                width: 40%;
            }
            a p {
                position: absolute;
                color: #000;
                bottom: 15px;
                text-align: center;
                line-height: 14px;
                font-size: 13px;
                right: 0;
                left: 0;
                width: 90%;
                margin: 0 auto;
            }
        }
    }
}

#iletisim { 
    label {
        width: 100%;
        span {
            width: 100%;
            display: flex;
            input {
                width: 100%;
                border: 1px solid #ccc;
            }
            input[type=submit] {
                border: 1px solid #ccc;
                font-size: 14px;
                color: #ccc;
                background: none;
            }
            textarea {
                height: 100px;
                font-size: 12px;
                color: #828282;
                border-color: #cccccc;
                width: 100%;
            }
        }    
    }
}
.woocommerce {
    .woocommerce-input-wrapper {
        width: 100%;
    }
    .woocommerce-loop-product__title {
        text-align: center;
        height: 50px;
    }
    ul.products {
        li.product {
            border: 1px solid #1111110f;
            padding-top: 2.4%;
            .price {
                color: #777;
                display: block;
                font-weight: 400;
                margin-bottom: .5em;
                font-size: .857em;
                text-align: center;
            }
            .button {
                display: block;
                margin: 0px auto;
                margin-top: 1em;
                width: auto;
                text-align: center;
                background: #fbf9f6;
                color: #5e5e5e;
                font-weight: 400;
                font-size: 13px;
                text-transform: uppercase;
            }
            a {
                img {
                    margin: 0 0 0.5em;
                }
            }
        }
    }
    .single-product {
        .posted_in {
            display: none;
        }
    }
    a.button.alt {
        background-color: #5a5a5a!important;
        font-size: 13px!important;
        color: #fff;
        -webkit-font-smoothing: antialiased;
    }
    button.button.alt {
        background-color: #5a5a5a!important;
        font-size: 13px!important;
        color: #fff;
        -webkit-font-smoothing: antialiased;
    }
    input.button.alt {
        background-color: #5a5a5a!important;
        font-size: 13px!important;
        color: #fff;
        -webkit-font-smoothing: antialiased;   
    }
    div.product h1 {
        color: #000000!important;
    }
    div.product p.price {
        color: #000000!important;
        font-weight: 500;
    }
    div.product span.price {
        color: #545454!important;
    }
    div.product form.cart div.quantity{
        width: 44%;
        margin: 0 6% 0 0 !important;
        border: 1px solid #000000;
        box-shadow: none;
    }
    div.product form.cart div.quantity .qty{
        width: 100%;
        height: 37px;
    }
    div.product form.cart .button{
        width: 50%;
        height: 37px;
        background: #000000 !important;
        opacity: 1 !important;
        border-radius: 0 !important;
    }
    div.product form.cart .variations select{
        background: #fff;
        height: 37px;
        width: 100%;
        border-radius: 0 !important;
        color: #000 !important;
    }
    div.product div.images .flex-control-thumbs li{
        width: 23% !important;
        margin: 2.6% 2.6% 0 0 !important;
    }
    
    div.product div.images .flex-control-thumbs li:nth-child(n+4){
        margin-right: 0 !important;
    }
    .col2-set .col-1 {
        float: left;
        width: 48%;
        max-width: 50%;
    }
    .col2-set .col-2 {
        float: left;
        width: 48%;
        max-width: 50%;
    }
    .woocommerce-page .col2-set .col-1 {
        float: left;
        width: 48%;
        max-width: 50%;
    }
    .woocommerce-page .col2-set .col-2 {
        float: left;
        width: 48%;
        max-width: 50%;
    }
    div.product {
       div.images {
           .woocommerce-product-gallery__wrapper {
               .zoomImg {
                    background-color: #fff;
                    opacity: 0;
                    width: 100%!important;
                    height: auto!important;
               }
           }
       }
    }
}
.pagination {
    span {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(130, 130, 130, 1);
        text-align: center;
        font-size: 13px;
        color: rgb(255, 255, 255);
        margin: 5px 5px;
        background-color: rgba(130, 130, 130, 1);
    }
    a {
        width: 20px;
        height: 20px;
        text-align: center;
        font-size: 13px;
        color: rgba(130, 130, 130, 1);
        margin: 5px 2px;
    }
    a.inactive {
        border: 1px solid rgba(130, 130, 130, 1);
        margin: 5px 5px;
    }
}
.woocommerce-Tabs-panel--description {
    h2 {
        display:none;
    }
}