PHP Dosya Yöneticisi

/*
    Template name : Jojo
    Version : 1.0
    Author : Salih Unal - salhunl@yandex.com
    Designer : Metehan Akdeniz - metebu@yandex.com - www.metbi.net
*/

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

// Font

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&display=swap');

// Colors

$backgroundColor: #F4F6FB;

/*
    RESET
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    background-color: $backgroundColor;
    font-family: 'Jost', sans-serif !important;
    overflow-x: hidden;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    text-decoration: none !important;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@keyframes movedelement {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
}
    25% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
        -moz-transform: translate(10px, 10px);
        -ms-transform: translate(10px, 10px);
        -o-transform: translate(10px, 10px);
}
    50% {
        -webkit-transform: translate(5px, 5px);
        transform: translate(5px, 5px);
        -moz-transform: translate(5px, 5px);
        -ms-transform: translate(5px, 5px);
        -o-transform: translate(5px, 5px);
}
    75% {
        -webkit-transform: translate(10px, -5px);
        transform: translate(10px, -5px);
        -moz-transform: translate(10px, -5px);
        -ms-transform: translate(10px, -5px);
        -o-transform: translate(10px, -5px);
}
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
}
}

@keyframes movedelement2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(-10px, -10px);
        transform: translate(-10px, -10px);
    }
    50% {
        -webkit-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px);
    }
    75% {
        -webkit-transform: translate(-10px, 5px);
        transform: translate(-10px, 5px);
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes movedelement3 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(15px, 15px);
        transform: translate(15px, 15px);
    }
    50% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
    }
    75% {
        -webkit-transform: translate(15px, -8px);
        transform: translate(15px, -8px);
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes movedelement4 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(-15px, -15px);
        transform: translate(-15px, -15px);
    }
    50% {
        -webkit-transform: translate(-8px, -8px);
        transform: translate(-8px, -8px);
    }
    75% {
        -webkit-transform: translate(-15px, 8px);
        transform: translate(-15px, 8px);
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

/*==============================================*/
/*                     Popup
/*==============================================*/

.mfp-bg {
    background: rgba(90, 88, 88, 0.8) !important;
    opacity: 1 !important;
}
  
.mfp-content {
    padding: 0 15px;
    .order-popup {
      position: relative;
      margin: 0 auto;
      max-width: 600px;
      max-height: 225px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      .popup-container{
          position: relative;
          overflow: hidden;
          max-height: 225px;
          background-color: rgba(237, 137, 0, 0.9);
          border-radius: 5px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          -ms-border-radius: 5px;
          -o-border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          .popup-bg{
                z-index: -1;
            img {
                width: 100%;
                height: 100%;
                min-height: 225px;
                object-fit: cover;
            }
        }
        .popup-detail {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .form-box {
                .form-text {
                    margin-bottom: 20px;
                    h2 {
                        font-size: 31px;
                        font-weight: 700;
                        color: #fff;
                        margin-bottom: 10px;
                    }
                    p {
                        font-size: 13px;
                        font-weight: 600;
                        color: #fff;
                    }
                }
            }
            .form-container {
                position: relative;
                width: 100%;
                input {
                    background: #ffffff;
                    width: 351px;
                    border-radius: 100px;
                    border: none;
                    outline: none;
                    padding: 10px 20px 10px 15px;
                    font-size: 15px;
                    color: #777777;
                    -webkit-border-radius: 100px;
                }
                button {
                    position: absolute;
                    top: 5px;
                    right: 10px;
                }
                .sec-btn {
                    padding: 8px 15px;
                    background-color: #FDA423;
                    border: none;
                    border-radius: 100px;
                    -webkit-border-radius: 100px;
                    -moz-border-radius: 100px;
                    -ms-border-radius: 100px;
                    -o-border-radius: 100px;
                    span {
                        font-size: 12px;
                        font-weight: 700;
                        color: #fff;
                    }
                }
            }
        }
      }
      .mfp-close {
        width: 33px !important;
        height: 33px !important;
        top: -55px !important;
        background-color: #fff !important;
        color: rgba(90, 88, 88, 0.8) !important;
        font-weight: 600;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        opacity: 1 !important;
        font-family: 'Jost';
  }
    }
}

/*==============================================*/
/*                     Header                             
/*==============================================*/

header {
    padding: 50px 0;
    background-color: #ED8900;
    .navbar-collapse {
        z-index: 1;
        .navbar-nav {
            li {
                line-height: 30px;
                a {
                    font-size: 18px;
                    font-weight:500;
                    color:#fff;
                    &:hover {
                        color: #5A5858;
                    }
                }
            }
            .dropdown-toggle{
                &:focus {
                    outline: none;
                    box-shadow: none;
                }
                &::after {
                    display: none;
                }
            }
            .dropdown-menu {
                z-index: 1;
                min-width: 240px;
                padding: 15px;
                border: none;
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                li {
                    
                    &:not(:last-child) {
                        border-bottom: 1px solid #F6F6F6;
                        padding-bottom: 13px;
                        margin-bottom: 14px;
                    }
                }
                .dropdown-item {
                    padding: 0;
                    font-size: 16px;
                    font-weight: 700;
                    color: #ED8900;
                    &:hover {
                        background-color: transparent;
                    }
                }
            }
            .dropdown-menu-tip-nw {
                &::after {
                  content: '';
                  position: absolute;
                  width: 16px;
                  height: 13px;
                  background-color: #fff;
                  border: solid 1px #fff;
                  border-bottom: none;
                  border-left: none;
                }
            }
            .dropdown-menu-tip-nw::after {
                top: calc(-.25rem - 1px);
                left: 40px;
                transform: rotate(-45deg);
            }
        }
        .header-buttons {
            display: flex;
            align-items: center;
            .whatsapp-btn{
                a {
                    span {
                        font-size: 16px;
                        font-weight: 500;
                        color: #fff;
                    }
                    line-height: 55px;
                    display: inline-flex;
                    width: 180px;
                    justify-content: center;               
                    align-items: center;
                    background-color: #FDA423;
                    border-radius: 5px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    -ms-border-radius: 5px;
                    -o-border-radius: 5px;
                    img{
                        margin-right: 7px;
                    }
                }
            }
            a.work-content {
                display: flex;
                align-items: center;
                width: 180px;
                justify-content: center;
                line-height: 55px;
                background-color: #fff;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                margin-left: 30px;
                span {
                    font-size: 16px;
                    font-weight: 500;
                    color: #ED8900;
                }
                img{
                    margin-right: 7px;
                }
                &:focus {
                    outline: none;
                    box-shadow: none;
                }
            }
        }
        .offcanvas-header{ 
            display:none; 
            i.fa {
                font-size: 25px;
                color: #fff;
                margin-top: 10px;
            }
        }
    }
    .navbar-toggler {
        padding: 0;
    }
    .navbar {
        .navbar-brand {
            padding: 0;
            margin: 0;
            img.mobile-logo {
                display: none;
            }
        }
    }
}

/*==============================================*/
/*                     Main Home                              
/*==============================================*/

section#main-home {
    padding: 60px 0 65px 0;
    .home-bg {
        position: absolute;
        background-color: #ED8900;
        width: 100%;
        height: 943px;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
    }
    .home-left-container {
        .left-top-text {
            h2 {
                font-size: 45px;
                font-weight: 600;
                color: #fff;
                line-height: 60px;
                 span {
                     font-size: 50px;
                     color: #fff;
                     font-weight: 700;
                 }
            }
        }
        .left-info-text {
            padding: 29px 0;
            p {
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                line-height: 23px;
            }
        }
        .info-box {
            .home-box {
                display: flex;
                height: 50px;
                min-width: 180px;
                align-items: center;
                justify-content: center;
                padding: 7px 0;
                background-color: #FDA423;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                cursor: default;
                .home-box-text {
                    h4 {
                        font-size: 13px;
                        font-weight: 500;
                        color: #fff;
                        margin-bottom: 5px;
                    }
                    p {
                        font-size: 15px;
                        font-weight: 700;
                        color: #fff;
                    }
                }
            }
        }
    }
    .home-right {
        position: relative;      
        .right-img {
            margin-left: auto;
            max-width: 600px;
            max-height: 641px;
            z-index: 3;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .right-boxes {
            display: flex;
            position: absolute;
            top: 73%;
            left: 12%;
            .box {
                width: 140px;
                padding: 17px 20px;
                text-align: center;
                cursor: default;
                background-color: #fff;
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                transition: all 0.5s ease-in-out;
                -webkit-transition: all 0.5s ease-in-out;
                -moz-transition: all 0.5s ease-in-out;
                -ms-transition: all 0.5s ease-in-out;
                -o-transition: all 0.5s ease-in-out;
                p {
                    font-size: 20px;
                    font-weight: 600;
                    color: #ED8900;
                    padding: 3px 0;
                }
                p.box-info {
                    font-size: 10px;
                    font-weight: 500;
                    color: #5A5858;
                }
                &.center {
                    margin: 0 10px;
                }
                &:hover {
                    transform: scale(1.1);
                    -webkit-transform: scale(1.1);
                    -moz-transform: scale(1.1);
                    -ms-transform: scale(1.1);
                    -o-transform: scale(1.1);
                }
            }
        }
        .right-icons {            
            span.t-icn1 {
                position: absolute;
                left: 0;
                top: 10%;
                z-index: -1;
                img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                    -webkit-animation: movedelement2 5s linear infinite;
                    animation: movedelement2 5s linear infinite;
                }
            }            
            span.t-icn2 {
                position: absolute;
                top: 10%;
                left: 62%;
                img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                    -webkit-animation: movedelement3 5s linear infinite;
                    animation: movedelement3 5s linear infinite;
                }
            }
            span.t-icn3 {
                position: absolute;
                top: 76%;
                z-index: -1;
                img {
                    -webkit-animation: movedelement4 5s linear infinite;
                    animation: movedelement4 5s linear infinite;
                }
            }
            span.t-icn4 {
                position: absolute;
                top: 80%;
                left: 80%;
                z-index: -1;
                img {
                    -webkit-animation: movedelement 5s linear infinite;
                    animation: movedelement 5s linear infinite;
}
            }
        }
    }
}

/*==============================================*/
/*                     All Services                            
/*==============================================*/

section#all-services {
    background-color: #EFF1F6;
    padding: 50px 0;
    .title {
        text-align: center;
        padding-bottom: 50px;
        h3 {
            font-size: 35px;
            font-weight: 600;
            color: #ED8900;
            margin-bottom: 10px;
        }
        p {
            font-size: 17px;
            color: #5A5858;
            font-weight: 500;
        }
    }
    .services-container {
        .slider-item {
            transition: 400ms;
            -webkit-transition: 400ms;
            -moz-transition: 400ms;
            -ms-transition: 400ms;
            -o-transition: 400ms;
            .item-detail{
                padding: 42px 20px;
                background-color: #fff;
                text-align: center;
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                transition: all 5s ease-in-out;
                -webkit-transition: all 5s ease-in-out;
                -moz-transition: all 5s ease-in-out;
                -ms-transition: all 5s ease-in-out;
                -o-transition: all 5s ease-in-out;
                .slider-img{
                    max-width: 70px;
                    max-height: 70px;
                    margin: 0 auto;
                    img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
                .slider-title {
                    font-size: 25px;
                    font-weight: 600;
                    color: #5A5858;
                    margin-bottom: 8px;
                    margin-top: 18px;
                }
                .slider-info  {
                    font-size: 15px;
                    line-height: 21px;
                    color: #5A5858;
                    font-weight: 400;
                    margin-bottom: 18px;
                }
                .slider-icn {
                    svg {
                        circle {
                            transition: all 0.3s ease-in-out;
                            fill: #F3F5F7;
                            -webkit-transition: all 0.3s ease-in-out;
                            -moz-transition: all 0.3s ease-in-out;
                            -ms-transition: all 0.3s ease-in-out;
                            -o-transition: all 0.3s ease-in-out;
                        }
                        path {
                            transition: all 0.3s ease-in-out;
                            -webkit-transition: all 0.3s ease-in-out;
                            -moz-transition: all 0.3s ease-in-out;
                            -ms-transition: all 0.3s ease-in-out;
                            -o-transition: all 0.3s ease-in-out;
                        }
                    }
                }
            }
            &:hover {
                transform: scale(1.05);
                -webkit-transform: scale(1.05);
                -moz-transform: scale(1.05);
                -ms-transform: scale(1.05);
                -o-transform: scale(1.05);
                .slider-icn {
                    svg {
                        circle {
                            fill: #ED8900;
                        }
                        path {
                            fill: #fff;
                        }
                    }
                }
            }
        }
    }
    .services-btn {
        margin-top: 50px;
        a.all-services {
            max-width: 223px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            background-color: #ED8900;
            line-height: 55px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            img{
                margin-right: 7.5px;
            }
        }
    }
}

/*==============================================*/
/*                     Main Text                          
/*==============================================*/

section#main-text {
    padding: 60px 0;
    .main-img {
        overflow: hidden;
        .text-img {
            max-width: 600px;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                overflow: hidden;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
            }
        }
    }
    .text-container {
        .disabled-btn {
            button {
                display: flex;
                align-items: center;
                color: #fff;
                background-color: #5A5858;
                line-height: 35px;
                padding: 0 28px;
                border: none;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                img{
                    margin-right: 6.1px;
                }  
            }    
        }
        .text-title {
            padding: 27px 0;
            h1 {
                font-size: 35px;
                font-weight: 600;
                color: #ED8900;
                line-height: 46px;
            }
        }
        .text-info {
            padding-bottom: 19px;
            p {
                font-size: 15px;
                color: #5A5858;
                line-height: 21px;
                font-weight: 400;
            }
        }
        .services-btn {
            a.all-services {
                max-width: 223px;
                width: 100%;
                justify-content: center;
                display: inline-flex;
                align-items: center;
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                background-color: #ED8900;
                line-height: 55px;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                img {
                    margin-right: 7.5px;
                }
            }
        }
    }
}

/*==============================================*/
/*                     Custom Comment                          
/*==============================================*/

section#custom-comments {
    background-color: #EFF1F6;
    padding: 50px 0;
    .title {
        text-align: center;
        padding-bottom: 50px;
        h3 {
            font-size: 35px;
            font-weight: 600;
            color: #ED8900;
            margin-bottom: 10px;
        }
        p {
            font-size: 17px;
            color: #5A5858;
            font-weight: 500;
        }
    }
    .comment-slider {
        padding: 20px 0;
        .comment-box {
            margin: 0 15px;
            text-align: center;
            background-color: #fff;
            padding: 31px 16px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            transition: 400ms;
            -webkit-transition: 400ms;
            -moz-transition: 400ms;
            -ms-transition: 400ms;
            -o-transition: 400ms;
            .comment-profile{
                margin: 0 auto;
                width: 88px;
                height: 88px;
                overflow: hidden;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .comment-name {
                padding: 6px 0;
                span  {
                    font-size: 17px;
                    font-weight: 600;
                    color: #5A5858;
                    line-height: 20px;
                }
            }
            .comment-text {
                p {
                    font-size: 15px;
                    color: #5A5858;
                    line-height: 19px;
                }
            }
            opacity: 0.4;
            &.slick-center {
                opacity: 1;
            }
            &:hover {
                opacity: 1;
            }
        }
    }
    .carousel-nav {
        display: flex;
        justify-content: center;        
        button {
            margin: 0 10px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ED8900;
            border: none;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }
    }
}

/*==============================================*/
/*                     Accordion                       
/*==============================================*/

section#accordion {
    padding: 50px 0 0 0;
    margin-bottom: 100px;
    .title {
        text-align: center;
        margin-bottom: 30px;
        h3 {
            font-size: 40px;
            color: #ED8900;
            font-weight: 600;
            margin-bottom: 15px;
        }
        p {
            font-size: 15px;
            color: #5A5858;
            font-weight: 400;
        }
    }
    .accordion-wrapper {
        .accordion {
            width: 100%;
            margin-top: 20px;
            .accordion-title {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                width: 100%;
                height: 45px;
                background-color: #5a5858;
                color: #fff;
                cursor: pointer;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                p {
                    padding-left: 20px;
                    font-size: 15px;
                    font-weight: 400;
                }
                span {
                    width: 60px;
                    font-size: 16px;
                    background-color: #4A4747;
                    height: 45px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    .fa-angle-up{
                        display: none;
                        font-size: 27px;
                    }
                    .fa-angle-down {
                        font-size: 27px;
                    }
                }
                &.active {
                    background-color: #ed8900;
                    span {
                        background-color: #CE7A07;
                    }
                  }
            }
            .panel {
                padding: 20px 0 0 0;
                display: none;
                p {
                    font-size: 15px;
                    font-weight: 400;
                    color: #5A5858;
                    line-height: 21px;
                }
            }
        }
    }
}
      
/*==============================================*/
/*                     Urun Kategory Page                       
/*==============================================*/

section#main-homev2 {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 300px;
    background-color:rgba(237, 137, 0, 0.95); 
    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        background-image: url(../img/home-svg.svg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 126px;
        height: 36px;        
    }
    .homev2-bg {          
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    }
    .home-container {
        text-align: center;
        margin-bottom: 25px;
        .container-icon {
            margin: 0 auto;
            width: 58px;
            height: 58px;
            margin-bottom: 17px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .container-text {
            h4 {
                font-size: 40px;
                font-weight: 600;
                color: #fff;
            }
        }
    }
}

section#packet-boxes {
    position: relative;
    top: -20px;
    padding-bottom: 30px;
    .boxes-container {
        .box-item {
            .box-detail {
                padding: 40px 37px;
                text-align: center;
                background-color: #fff;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                .box-icon {
                    width: 76px;
                    height: 70px;
                    margin: 0 auto;
                    img {
                        width: 100%;
                        height: 100%;                        
                    }
                }
                .box-title {
                    padding: 20px 0;
                    font-size: 25px;
                    font-weight: 600;
                    color: #5A5858;
                }
                .box-info {
                    font-size: 15px;
                    font-weight: 400;
                    color: #5A5858;
                    line-height: 21px;
                }
                .box-btn {
                    a {
                        display: inline-flex;
                        width: 88%;
                        justify-content: center;
                        align-items: center;
                        background-color: #F7F8F9;
                        font-size: 18px;
                        color: #5A5858;
                        font-weight: 600;
                        padding: 15px 0;
                        margin-top: 20px;
                        border-radius: 5px;
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        -ms-border-radius: 5px;
                        -o-border-radius: 5px;
                        transition: 400ms;
                        -webkit-transition: 400ms;
                        -moz-transition: 400ms;
                        -ms-transition: 400ms;
                        -o-transition: 400ms;
                        svg{
                            margin-right: 15px;
                            transition: 400ms;
                            -webkit-transition: 400ms;
                            -moz-transition: 400ms;
                            -ms-transition: 400ms;
                            -o-transition: 400ms;
                        }
                        &:hover {
                            background-color: #ED8900;
                            color: #fff;
                            svg {
                                path {
                                    fill: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

section#text {
    background-color: #EFF1F6;
    padding: 50px 0 135px 0;
    .text-img {
        max-width: 495px;
        max-height: 376px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .top {
        margin-bottom: 50px;
        .img-top {
            z-index: 2;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                border-radius: 5px;
                background-color: #F1E3D3;
                transform: rotate(4deg);
                -webkit-transform: rotate(4deg);
                -moz-transform: rotate(4deg);
                -ms-transform: rotate(4deg);
                -o-transform: rotate(4deg);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
            }
        }
        .text-top {
            padding-left: 45px;
        }
    }
    .bottom {
        .img-bottom {
            z-index: 2;
            position: relative;
            &::after {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                z-index: -1;
                background-color: #F2DBE1;
                transform: rotate(357deg);
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                -webkit-transform: rotate(357deg);
                -moz-transform: rotate(357deg);
                -ms-transform: rotate(357deg);
                -o-transform: rotate(357deg);
    }
        }
        .text-bottom {
            padding-right: 45px;
        }
    }
    .text-title {
        margin-bottom: 20px;
        h1 {
            font-size: 25px;
            font-weight: 800;
            color: #5A5858;
        }
    }
    .text-info {
        p {
            font-size: 15px;
            font-weight: 400;
            color: #5A5858;
            line-height: 22px;
        }
    }
}

/*==============================================*/
/*                     Product Page                       
/*==============================================*/

section#product-boxes {
    position: relative;
    top: -20px;
    padding-bottom: 50px;
    .product-item {
        .product-detail {
            text-align: center;
            background-color: #fff;
            padding: 40px 24px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            .product-icon {
                max-width: 76px;
                max-height: 70px;
                margin: 0 auto;
                margin-bottom: 20px;
            }
            .product-title {
                margin-bottom: 4px;
                h1 {
                    font-size: 25px;
                    font-weight: 600;
                    color: #5A5858;
                }
            }
            .product-text {
                span {
                    font-size: 15px;
                    color: #5A5858;
                }
            }
            .product-info {
                ul {
                    border-bottom: 2px solid #F4F6FB;
                    border-top: 2px solid #F4F6FB;
                    margin: 39px 0;
                    padding: 39px 0;
                    li {
                        &:not(:last-child) {
                            margin-bottom: 20px;
                        }
                        display: flex;
                        align-items: center;
                        cursor: default;
                        img {
                            margin-right: 11px;
                        }
                        span {
                            font-size: 17px;
                            color: #5A5858;
                            font-weight: 600;
                        }
                    }
                }
            }
            .product-btn {
                a {
                    display: inline-flex;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                    background-color: #F7F8F9;
                    font-size: 18px;
                    color: #5A5858;
                    font-weight: 600;
                    padding: 15px 0;
                    border-radius: 5px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    -ms-border-radius: 5px;
                    -o-border-radius: 5px;
                    transition: 400ms;
                    -webkit-transition: 400ms;
                    -moz-transition: 400ms;
                    -ms-transition: 400ms;
                    -o-transition: 400ms;
                    svg{
                        margin-right: 15px;
                        transition: 400ms;
                        -webkit-transition: 400ms;
                        -moz-transition: 400ms;
                        -ms-transition: 400ms;
                        -o-transition: 400ms;
                    }
                    &:hover {
                        background-color: #ED8900;
                        color: #fff;
                        svg {
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

/*==============================================*/
/*                     Sozlesme Page                       
/*==============================================*/

section#sozlesme-text {
    padding: 50px 0;
    .text-container {
        h2 {
            font-size: 25px;
            font-weight: 800;
            color: #5A5858;
        }
        p {
            font-size: 15px;
            font-weight: 400;
            color: #5A5858;
            line-height: 22px;
        }
    }
}

/*==============================================*/
/*                     Contact                       
/*==============================================*/

section#contact-form {
    position: relative;
    top: -20px;
    padding-bottom: 50px;
    .form-container {
        background-color: #fff;
        padding: 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        .form-box {
            margin-bottom: 35px;
            h4 {
                font-size: 14px;
                font-weight:600;
                color: #5A5858;
                margin-bottom: 13px;
            }
            input,
            textarea {
                font-size: 12px;
                font-weight: 500;
                color: #AEA8A8;
                width: 100%;
                padding: 19px 20px;
                border: 1px solid #EFEFEF;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                &::placeholder {
                    font-size: 12px;
                    font-weight: 500;
                    color: #AEA8A8;
                }
                &:focus,
                &:active {
                    outline: none;
                    box-shadow: none;
                }
            }
            textarea  {
                min-height: 135px;
            }
            button.sec-btn {
                display: block;
                width: 100%;
                text-align: center;
                background-color: #ED8900;
                padding: 15px 0;
                font-size: 18px;
                color: #fff;
                font-weight: 600;
                line-height: 17px;
                border: none;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
}
        }
    }
}

section#form-info {
    background-color: #EFF1F6;
    padding: 50px 0 110px 0;
    .info-left {
        h4 {
            display: flex;
            flex-direction: column;
            font-size: 25px;
            color: #5A5858;
            line-height: 36px;
            span {
                font-weight: 600;
            }
        }
    }
    .button-boxes {
        display: flex;
        a {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 285px;
            text-align: center;
            padding: 20px 0;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            img {
                margin-right: 10px;
            }
            &.whatsapp-btn {
                margin-right: 15px;
                background-color: #8DC47D;
            }
            &.contact-btn {
                margin-left: 15px;
                background-color: #5A5858;
            }
        }
    }
}

/*==============================================*/
/*                     Footer                       
/*==============================================*/

footer {
    padding-bottom: 50px;
    background: linear-gradient(91.31deg, #ED8900 21.92%, #5A5858 143.34%);
    font-size: 14px;
    color: #fff;
    .container {
        position: relative;
        .footer-logo {
            position: relative;   
            top: -50px;
            padding: 20px 35px;
            width: 80%;
            margin: 0 auto;
            background-color: #ED8900;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            .logo-container {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            }
        .footer-item {
            text-align: center;
            ul {
                display: flex;
                align-items: center;
                justify-content: center;
                li {
                    margin: 0 40px;
                    a {
                        font-size: 17px;
                        color: #fff;
                        font-weight: 600;
                    }
                }
            }
        }
        .footer-icons {
            span.f-icn1 {
                position: absolute;
                top: 10px;
                img {
                    -webkit-animation: movedelement2 5s linear infinite;
                    animation: movedelement2 5s linear infinite;
                }
            }
            span.f-icn2 {
                position: absolute;
                top: 25px;
                right: 5px;
                img {
                    -webkit-animation: movedelement 5s linear infinite;
                    animation: movedelement 5s linear infinite;
                }
            }
            span.f-icn3 {
                position: absolute;
                bottom: -35px;
                left: 0;
                img {
                    -webkit-animation: movedelement2 5s linear infinite;
                    animation: movedelement2 5s linear infinite;
                }
            }
            span.f-icn4 {
                position: absolute;
                right: 0;
                bottom: -20px;
                img {
                    -webkit-animation: movedelement 5s linear infinite;
                    animation: movedelement 5s linear infinite;
                }
            }
        }
    }
}

/*==============================================*/
/*                     Responsive                       
/*==============================================*/

@media (min-width: 1366px) {
    header .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
    }
    .container {
        max-width: 1230px;
      }

}

@media (max-width: 1200px) {
    .container {
        max-width: 95%;
    }
    header {
        .navbar-collapse {
            .header-buttons {
                .whatsapp-btn {
                    a {
                        padding: 16px 16px;
                        width: 50px;
                        img {
                            margin-right: 0;
                        }
                        span {
                            display: none;
                        }
                    }
                }
            }
            a.work-content {
                    width: 50px !important;
                    margin-left: 15px !important;
                    padding: 15px 15px !important;
                    img {
                        margin-right: 0 !important;
                    }
                    span {
                        display: none;
                    }
                }           
        }
    }
    section#main-home {
        .home-right {
            .right-icons {
                span.t-icn2 {
                    left: 57%;
                }
                span.t-icn4 {
                    left: 77%;
                }
            }
            .right-boxes {
                left: 7%;
            }
        }
    }
    section#all-services {
        .services-container {
            .slider-item {
                margin-bottom: 20px;
            }
        }
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    header {
        .navbar-collapse {
            z-index: 99999;
            .header-buttons {
                a.register-btn {
                    span {
                        display: none;
                    }
                    img {
                        display: block;
                        padding: 7px 15px;
                        background-color: #E89F04;
                        border-radius: 100px;
                        -webkit-border-radius: 100px;
                        -moz-border-radius: 100px;
                        -ms-border-radius: 100px;
                        -o-border-radius: 100px;
                    }
                }
            }
        }
    }
    section#main-home {
        .home-left-container {
            .info-box {
                .home-box {
                    justify-content: flex-start;
                    padding-left: 20px;
                    max-width: 50%;
                }
            }
        }
    }
}

@media (max-width: 992px) {
    header {
        .navbar-collapse {
            .navbar-nav {
                li {
                    &:last-child {
                        border: none;
                    }
                }
                .dropdown-menu-tip-nw::after {
                    top: calc(2.75rem - 1px);
                    left: 25px;
                }
                .dropdown-toggle{
                    position: relative;
                    &::after {
                        display: inline-block;
                        margin-left: .255em;
                        vertical-align: 2px;
                        content: "";
                        padding: 3px;
                        border-width: 0px 0px 0 0;
                        border: solid;
                        border-top: 0 solid;
                        border-left: 0 solid transparent;
                        transform: rotate(45deg);
                        -webkit-transform: rotate(45deg );
                        -moz-transform: rotate(45deg );
                        -ms-transform: rotate(45deg );
                        -o-transform: rotate(45deg );
                    }
                }
            }
            .offcanvas-header {
                display: block;
            }
            .header-buttons {
                margin-left: 0 !important;
                flex-direction: column;
                align-items: flex-start;
                .whatsapp-btn {
                    margin-bottom: 15px;
                    a {
                        padding: 0 37px !important;
                        width: 180px ;

span {
                            display: block;
                        }
                        img {
                            margin-right: 6px !important;
                        }
                    }
                }
                a.work-content {
                    width: 180px !important;
                    padding: 0 20px !important;
                    margin-left: 0 !important;
                    img {
                        margin-right: 6px !important;
                    }
                    span {
                        display: block;
                    }
                }
            }
        }
        .navbar {
            .navbar-brand {
                img.mobile-logo {
                    display: block;
                }
                img.main-logo {
                    display: none;
                }
            }
            .navbar-toggler-icon {
                height: 21px;
            }
        }

}
    .navbar-collapse {
      position: fixed;
      top:0; 
      bottom: 0;
      left: 100%;
      width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
      overflow-y: auto;
      visibility: hidden;
      background-color: #ED8900;
      transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
    }
    .navbar-collapse.show {
      visibility: visible;
      transform: translateX(-100%);
      z-index: 9;
      .navbar-nav {
          padding: 20px 0;
      }
    }
    section#main-home {
        .home-right {
            .right-img {
                display: none;
            }
            .right-icons {
                span.t-icn2 {
                    z-index: -1;
                }
            }
            .right-boxes {
                position: unset;
                margin-top: 50px;
                justify-content: space-around;
                z-index: 1;
                .box {
                    min-width: 220px;
                }
            }
        }
    }
    section#main-text {
        .main-img {
            margin-bottom: 40px;
            .text-img {
                overflow: hidden;
                border-radius: 5px;
                max-width: 100%;
                height: 260px;
                img{
                    object-position: top;
                }
            }
        }
    }
    section#packet-boxes {
        .boxes-container {
            .box-item {
                .box-detail {
                    margin-bottom: 20px;
                }
            }
        }
    }
    section#text {
        .top {
            .text-top {
                padding-top: 20px;
                padding-left: 15px;
            }
        }
        .bottom {
            .text-bottom {
                padding-right: 15px;
                padding-top: 25px;
            }
        }
    }   
    section#product-boxes {
        .product-item {
            .product-detail {
                margin-bottom: 20px;
            }
        }
    } 
    footer {
        .container {
            .footer-item {
                ul {
                   li {
                        margin: 0;
                   }
                }
            }
        }
    }
    section#custom-comments {
        .comment-slider {
            .comment-box {
                opacity: 1;
            }
        }
    }
    section#form-info {
        .info-container {
            text-align: center;
            justify-content: center;
            .button-boxes {
                margin-top: 20px;
                justify-content: center;
            }
        }
    }
}

@media (min-width: 766px) and (max-width: 992px) {
    footer {
        .container {
            .footer-item {
                a {
                    margin: 0 22px;
                }
            }
        }
    }
    section#main-home {
        .home-right {
            .right-icons {
                span.t-icn4 {
                    top: 63%;
                }
            }
        }
    }

}

@media (max-width: 766px) {
    section#main-home {
        .home-bg {
            height: 1300px;
        }
        .home-right {
            .right-boxes {
                position: unset;
                flex-direction: column;
                display: flex;
                margin-top: 50px;
                justify-content: space-around;
                z-index: 1;
                .box {
                    min-width: 100%;
                    &.center {
                        margin: 15px 0;
                    }
                }
            }
        }
    }
    section#main-homev2 {
        &::after {
            display: none;
        }
    } 
    section#product-boxes {
        .product-item {
            max-width: 400px;
        }
    } 
    footer {
        .container {
            .footer-item {
                ul {
                    flex-direction: column;
                    li {
                        margin-bottom: 15px;
                    }
                }
            }
        }
    }
}

@media (max-width: 574px) {
    section#main-home {
        padding: 20px 0 45px 0;
        .home-right {
            .right-icons {
                display: none;
            }
        }
        .home-left-container {
            .left-top-text {
                h2 {
                    line-height: 50px;
                    font-size: 28px;
                }
            }
        }
    }
    section#main-text {
        .text-container {
            .text-title {
                h1 {
                    font-size: 25px;
                    line-height: 34px;
                }
            }
        }
    }
    footer{
        .container {
            .footer-logo {
                .logo-container {
                    flex-direction: column;
                }
            }   
            .footer-icons {
                display: none;
            }
        }
    }   
    section#main-homev2 {
        .home-container {
            .container-text {
                h4 {
                    font-size: 35px;
                }
            }
        }
    }
    .mfp-content {
        .order-popup {
            .popup-container {
                .popup-detail {
                    .form-container {
                        input {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
    section#form-info {
        .info-container {
            .info-left {
                h4 {
                    font-size: 23px;
                }
            }
            .button-boxes {
                margin-top: 20px;
                justify-content: center;
                flex-direction: column;
                align-items: center;

a {
                    margin: 0;
                    &.whatsapp-btn {
                        margin-bottom: 15px;
                    }
                }
            }
        }
    }
    }

İptal

📁 PHP Dosya Yöneticisi

📝 style.scss

📝 style.scss

📝 Yeniden Adlandır

🔐 Dosya İzinleri (chmod)