@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic&subset=latin-ext,latin);
:root {
    --primary-color:#455A64;
    --secondary-color:#37474F;
    --third-color:rgba(63,55,124,0.3);
    --primary-text-color:#eee;
    --section1-color:#fcfcfc;
    --section2-color:#f9f9f9;
    --section3-color:#fcfcfc;

    /*Buy Btn*/
    --buyBtnBg: #D32F2F;
    --buyBtnBorder: #B71C1C;
    --buyBtnText: #fff;

    --white:#fff;
}
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, 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;}* {outline: 0;}a {text-decoration: none;color: #333;}a:hover {text-decoration:none;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul, nav {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}h1 { font-size:18px;color:#29607c;}h2 {font-size:15px;color:#3d3d3d;}small {font-size:11px;}p {color:#595959;}strong, b {font-weight:bold;}
body{
	font-family: "Source Sans Pro",Arial,sans-serif;
	background-color: #fff;
	font-size:16px;
	color:#333;
}
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
section{
    position: relative;
}
.d-none{
    display: none !important;
}
.container{
    position: relative;
    display:flex;
    width:1180px;
    max-width: 100%;
    margin:0 auto;
}
.flexspace{
    flex:2;
}
header{
    color:var(--primary-text-color);
}
header .topbar{
    background-color: var(--primary-color);
}
header .topbar .container ul{
    height:40px;
    width:100%;
    line-height: 40px;;
    display:flex;
    justify-content: space-between;
    gap: 1em;
}
header .topbar li i{
    margin-right:6px;
}
header .topbar li a{
    position: relative;
    display: block;
    height:38px;
    color:var(--primary-text-color);
    border-bottom:2px var(--primary-color) solid;
    transition: border-color .3s;
}
header .topbar li a:hover{
    border-color:var(--primary-text-color);
}
header .logo{
    display: flex;
    justify-content: space-between;
    height:80px;
    background-color: var(--secondary-color);
}
header .logo .container{
    justify-content: space-between;
}
header .logo img{
    width:240px;
    height:32px;
    margin:24px 0;
}
header .logo .basket{
    position: relative;
    display:block;
    margin:15px 0;
    width:50px;
    height:50px;
    background-color: var(--primary-color);
    color:var(--primary-text-color);
    border-radius: 10px;
    border:3px var(--secondary-color) solid;
    transition: background-color .3s, border-color .3s;
}
header .logo .basket.mobil{
    position: unset;
    display:none;
}
header .logo .basket:hover{
    background-color: var(--secondary-color);
    border-color:var(--primary-color);
}
header .logo .basket i{
    margin:10px 0 0 10px;
    width:40px;
    line-height: 40px;
    font-size:20px;
    text-align: center;
    transition: width .3s, line-height .3s, margin .3s, font-size .3s;
}
header .logo .basket.mobil i{
    width:50px;
    line-height: 50px;
    margin:0;
    font-size:24px;
}
header .logo .basket:hover i{
    width:50px;
    line-height: 50px;
    margin:0;
    font-size:24px;
}
header .logo .basket small{
    position: absolute;
    width:20px;
    height:20px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    font-weight: 700;
    left:-4px;
    top:-4px;
    background-color: var(--primary-color);
    border: 5px var(--secondary-color) solid;
    border-radius: 50%;
    opacity:1;
    transition: opacity .3s, left .3s;
    /*transition: width .3s, height .3s, line-height .3s, font-size .3s;*/
}
header .logo .basket:hover small{
    opacity:0;
    left:-24px;
    /*width:50px;
    height:50px;
    line-height:50px;
    font-size:16px;*/
}
header .menu{
    position: relative;
    background-color: var(--primary-color);
    z-index: 2;
}
header .menu ul.mainmenu{
    display: flex;
    justify-content: start;
}
header .menu ul.mainmenu li{
    position: relative;
}
header .menu ul.mainmenu li a{
    display: block;
    height: 60px;
    line-height: 60px;
    font-size:16px;
    padding:0 20px;
    color:var(--primary-text-color);
    transition: background-color .3s;
}
header .menu ul.mainmenu li a:hover{
    background-color: rgba(255,255,255,0.1);
}
header .menu ul.mainmenu li a i{
    font-size:20px;
}
header .menu ul.mainmenu li.sub > a:after{
    content: "\f078";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right:0px;
    top:0px;
    line-height: 60px;
    width:20px;
    text-align: center;
    font-size: 12px;
}
header .menu ul.mainmenu li ul{
    position: absolute;
    display: none;
    flex-direction: column;
    width: 200px;;
    left:0;
    top:60px;
    background-color: var(--primary-text-color);
    /*border:2px var(--primary-color) solid;
    border-top:none;
    border-bottom-right-radius: 10px;;*/
    overflow: hidden;
}
header .menu ul.mainmenu li:hover ul{
    display: block;
}
header .menu ul.mainmenu li ul li a{
    padding:0 30px;
    color:var(--primary-color);
    transition: background-color .3s, color .3s;
}

header .menu ul.mainmenu li ul li a:hover{
    background-color:var(--primary-color);
    color:var(--primary-text-color)
}
header .menu ul.mainmenu li ul li a:before{
    content: '';
    position: absolute;
    width:8px;
    height: 8px;
    background-color: var(--primary-color);
    left:16px;
    top:26px;
    transition: background-color .3s, transform .6s;
}
header .menu ul.mainmenu li ul li a:hover:before{
    background-color: var(--primary-text-color);
    transform: rotate(360deg);
}
header .mobil ul.mobilmenu{
    position:absolute;
    display:none;
    top:80px;
    right:0;
    left:0;
    background-color: rgba(0,0,0,0.9);
    z-index:99;
}
header .mobil ul.mobilmenu li{
    width:100%;
}
header .mobil ul.mobilmenu li a{
    display:block;
    width:90%;
    margin:0 5%;
    line-height:60px;
    color:#fff;
    font-size:20px;
    text-align:center;
    border-bottom:1px rgba(255,255,255,0.4) solid;
}
header .mobil ul.mobilmenu li ul li a{
    font-size:18px;
    color:#eee;
    border-bottom:0;
}
.main .slider{
    height:350px;
    z-index: 0;
    border-bottom:5px var(--primary-color) solid;
    overflow: hidden;
}
.main .slider .slidercover{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:350px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    /*animation: bganimate 5s linear infinite;*/
    z-index: 1;
}
@keyframes bganimate {

    0%{
        transform: translateX(-50vw);
        opacity: 1;
    }

    50%{
        transform: translateX(0);
        opacity: 1;
    }

    100%{
        transform: translateX(-50vw);
        opacity: 1;
    }

}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

/*.main .slider .video{
    position: absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    object-fit: cover;
    z-index: 0;
}*/
.main .slider img{
    position: absolute;
    height:300px;
    width:auto;
    right:0;
    top:25px;
    z-index: 2;
    animation-name: float2;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-delay: initial;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;
}
@keyframes float2{
    0% {transform: scale(1) rotate(0deg);}
    50% {transform: scale(1.1) rotate(2deg);}
    100% {transform: scale(1) rotate(0deg);}
    }
@keyframes float{
    0% {transform: translateY(0px) rotate(0deg);}
    50% {transform: translateY(-20px) rotate(2deg);}
    100% {transform: translateY(0px) rotate(0deg);}
    }
.main .slider .text{
    position: absolute;
    display: flex;
    left:30px;
    top:120px;
    width:600px;
    z-index: 2;
    color:var(--white);
    font-size:48px;
    font-weight: 900;
}
.main .slider .text strong{
    line-height: 70px;
    font-size:32px;
}
.animation {
  height:70px;
  overflow:hidden;
  margin-left: 10px;
}

.animation > div > h2 {
    display:inline-block;
  padding: 0 10px;
  font-size:32px;
  line-height: 70px;;
  height:70px;
  margin-bottom: 20px;
  display:inline-block;
  color:var(--white)
}

.animation div:first-child {
  animation: text-animation 12s infinite;
}

.first h2 {
  background-color:#20a7d8;
}
.second h2 {
  background-color:#CD921E;
}
.third h2 {
  background-color:#c10528;
}

@keyframes text-animation {
  0% {margin-top: 0;}
  10% {margin-top: 0;}
  20% {margin-top: -90px;}
  30% {margin-top: -90px;}
  40% {margin-top: -180px;}
  60% {margin-top: -180px;}
  70% {margin-top: -90px;}
  80% {margin-top: -90px;}
  90% {margin-top: 0;}
  100% {margin-top: 0;}
}
.main .slider span{
    position: absolute;
    left:30px;
    top:200px;
    z-index: 2;
    color:var(--primary-text-color);
    font-size:24px;
    font-weight:300;
    width:600px;
}
.main section.yazilim{
    padding:20px 0 20px;
    margin:0px 0 20px;
}
.main section.yazilim .container{
    justify-content: center;
    flex-wrap: wrap;
    gap:20px;
}
.main section.yazilim.digerhizmetler .container{
    flex-direction: column;
    gap:12px;
}
.main section.yazilim .container div{
    padding:8px 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    width:200px;
    overflow: hidden;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.main section.yazilim.digerhizmetler .container div{
    width:100%;
    display: flex;
    justify-content: space-between;
    gap:10px;
}
.main section.yazilim .container div img{
    width:200px;
    height:156px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 1px 1px 0px, rgba(14, 30, 37, 0.32) 0px 1px 4px 0px;
    transition: transform .3s, border-radius .3s;
}
.main section.yazilim.digerhizmetler .container div img{
    width:80px;
    height:62px;
}
.main section.yazilim .container div a:hover img{
    border-radius: 6px;
}
.main section.yazilim .container div h4{
    font-size: 20px;
    line-height: 50px;
    font-weight: 800;
    text-align: center;
    color: var(--secondary-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.main section.yazilim.digerhizmetler .container div h4{
    flex:2;
    text-align: left;
    line-height: 40px;
}
.main section.yazilim .container div small{
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 36px;
    font-weight: 800;
    border-radius: 4px;
    background-color: var(--secondary-color);
    color:var(--primary-text-color);
    transition: background-color .3s, color .3s;
}
.main section.yazilim.digerhizmetler .container div small{
    text-align: left;
    line-height: 20px;
    background-color: #f9f9f9;
    color:#666;
}
.main section.yazilim.digerhizmetler .container div span{
    display: block;
    text-align: center;
    font-size: 24px;
    line-height: 60px;
    font-weight: 800;
}
.main section.yazilim.digerhizmetler .container div a{
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 60px;
    width:60px;
    font-weight: 800;
    background-color: var(--primary-color);
    color:#fff;
    border-radius: 10px;
    transition: background-color .3s;
}
.main section.yazilim.digerhizmetler .container div a:hover{
    background-color: var(--secondary-color);
}
.main section.yazilim .container div a:hover small{
    background-color: var(--primary-text-color);
    color: var(--primary-color);
}
.main section.yazilim .digerbtn{
    display: block;
    position: relative;
    margin:40px auto 0;
    text-align: center;
    border:2px var(--primary-color) solid;
    line-height: 60px;
    width:400px;
    font-size: 20px;
    font-weight: 900;
    color: var(--primary-color);
    transition: color .3s, background-color .3s;
}
.main section.yazilim .digerbtn:hover{
    color:var(--primary-text-color);
    background-color: var(--primary-color);
}
.main section.nedenbiz{
    background-color: var(--primary-color);
    padding:50px 0 80px;
    margin:50px 0;
}
.main section.nedenbiz:before{
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: url('../img/nedenbiz.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    background-size: cover;
}
.main section.nedenbiz span{
    color:var(--primary-text-color);
    font-size:22px;
    line-height:40px;
    text-align: center;
}
.main section.nedenbiz strong{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 36px;
    font-weight: 800;
    line-height: 120px;
    color: var(--primary-text-color);
  }
.main section.list{
    background-color: #333;
    padding:50px 0 80px;
    margin:50px 0 0;
}
.main section.list:before{
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image: url('../img/whoami.png');
    background-repeat: repeat;
    background-position: 50% 20%;
    background-size: fit;
}
.main section.list .container{
    position: relative;
    gap:10px;
    text-align: center;
    padding: 10px 0;
}
.main section.list strong{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 36px;
    font-weight: 800;
    line-height: 120px;
    color: var(--primary-text-color);
  }
.main section.list .container div{
    overflow: hidden;
}
.main section.list .container div{
    padding:10px;
}
.main section.list img{
    border-radius: 50%;
    width:200px;
    height: 200px;
    border: 6px var(--primary-color) solid;
    transition: transform .3s, opacity .3s;
    z-index: -1;
}
.main section.list .container div:hover img{
    transform: scale(5);
    opacity: 0.1;
}
.main section.list h2{
    display: block;
    width:100%;
    font-size:24px;
    line-height: 48px;
    font-weight: 600;
    color:var(--primary-color);
    z-index: 1;
}
.main section.list span{
    display: block;
    width:100%;
    font-size:16px;
    line-height: 20px;
    font-weight: 300;
    z-index: 1;
}
.main .web{
    padding: 20px 0;
    background-color: var(--section1-color);
}
.main .mobil{
    padding: 20px 0;
    background-color: var(--section2-color);
}
.main .whoami{
    padding: 20px 0;
    background-color: var(--section2-color);
}
.main .title h3{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin:30px 0 10px;
    font-size:24px;
    font-weight: 800;
    line-height: 60px;
    background: #f6f6f6;
    border: 1px #e6e6e6 solid;
}
.main section.desc{
    margin:10px 0 50px;
    padding: 20px 0 50px;
}
.main section.desc .container{
    flex-direction: column;
}
/*.main section.desc .container h5{
    font-size: 24px;
    line-height: 48px;
    font-weight: 700;
}
.main section.desc .container p{
    font-size: 18px;
    line-height: 26px;
}*/
.main.product .container.title,
.main.page .container.title{
    flex-direction: column;
    position: relative;
    display: block;
    margin-bottom:30px;
    width:100%;
    height:50px;
    padding:24px 0;
    text-align: center;
    background:#f6f6f6;
    border-bottom:1px #e6e6e6 solid;
    margin-left:0;
}
.main.product .container.title h1,
.main.page .container.title h1{
    font-weight: 900;
    font-size:30px;
    line-height: 30px;
    color:var(--primary-color);
}
.main.product .container.title h2,
.main.page .container.title h2{
    margin-top: 2px;
    font-size:16px;
    line-height:20px;
    height:20px;
    color:#555;
}
.main.product .container.detail{
    gap:20px;
}
.main.product .container.detail .gallery{
    flex:1;
}
.main.product .container.detail .gallery img{
    width:100%;
    height:auto;
}
.main.product .container.detail .buy{
    flex:1;
    user-select: none;
}
.main.product .container.detail .buy .buytitle{
    position: relative;
    display: block;
    margin-bottom:6px;
    width:100%;
    height:60px;
    line-height:60px;
    font-size:18px;
    font-weight: 600;
    text-align: center;
    background:var(--primary-color);
    border:1px var(--secondary-color) solid;
    color: var(--primary-text-color);
}
.main.product .container.detail .buy input{
    display:none;
}
.main.product .container.detail .buy .aylikodeme{
    position: relative;
    display: block;
    margin-top: 5px;
    width: 100%;
    padding:6px 0;
    line-height: 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #555;
}
.main.product .container.detail .buy label{
    position: relative;
    display: flex;
    gap:10px;
    margin-top: 5px;
    margin-bottom:2px;
    width:100%;
    height:60px;
    line-height:60px;
    font-size:18px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    border:1px #e9e9e9 solid;
    background: #fcfcfc;
    padding: 10px 0;
    border-radius: 15px;
}
.main.product .container.detail .buy label span i{
    display: block;
    width:60px;
    height:60px;
    line-height:60px;
}
.main.product .container.detail .buy label span i:before{
    content: "\f00d";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    font-size: 24px;
    line-height:60px;
    color: #E57373;
}
.main.product .container.detail .buy input:checked + label span i:before{
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    font-size: 24px;
    line-height:60px;
    color: #00897b;
}
.main.product .container.detail .buy input:disabled + label span i:before{
    color: #999;
}

.main.product .container.detail .buy label .desc{
    display: flex;
    flex-direction: column;
    text-align: left;
    padding:10px 0;
}
.main.product .container.detail .buy label .desc > strong{
    height:20px;
    line-height:20px;
    font-size:16px;
    color:#555;
}
.main.product .container.detail .buy label .desc select{
    width:300px;
    height:28px;
    border:1px #c9c9c9 solid;
    border-radius:0;
    padding:5px;
}
.main.product .container.detail .buy label .desc small{
    height:20px;
    line-height:20px;
    font-size:12px;
    color:#888;
}
.main.product .container.detail .buy label mark{
    background:none;
    height:60px;
    line-height: 60px;
    padding:0 10px;
    min-width:92px;
    font-weight: 700;
    color:#666;
}
.main.product .container.detail .buy label mark,
.main.product .container.detail .buy label mark.discount{
    font-size:24px;
    line-height: 60px;
    color: var(--primary-color);
    text-align: right;
    text-shadow: 1px 1px 0 rgba(200,200,200,1);
}
.main.product .container.detail .buy label mark.discount{
    line-height: 40px;
}
.main.product .container.detail .buy label mark span{
    font-size:14px;
}
/*.main.product .container.detail .buy input:checked + label mark{
    color: #00897b;
}*/
.main.product .container.detail .buy input:checked + label mark small{
    display:block;
    color:#666;
    line-height:20px;
    font-size: 14px;
    text-decoration: line-through;
}
.main.product .container.detail .buy .demoarea a{
    position: relative;
    display: flex;
    justify-content: start;
    gap:6px;
    margin-top:5px;
    width:100%;
    font-size:18px;
    font-weight: 600;
    color: #fff;
    border-radius: 15px;
    background-image: -moz-linear-gradient( 180deg, rgb(52,42,102) 0%, rgb(63,55,124) 100%);
    background-image: -webkit-linear-gradient( 180deg, rgb(52,42,102) 0%, rgb(63,55,124) 100%);
    background-image: -ms-linear-gradient( 180deg, rgb(52,42,102) 0%, rgb(63,55,124) 100%);
    height: 85px;
    line-height: 85px;
    box-sizing: border-box;
    padding:0 20px;
}
.main.product .container.detail .buy .demoarea a img{
    margin:8.5px;
}
.main.product .container.detail .buy .demoarea a div{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main.product .container.detail .buy .demoarea a div strong{
    font-size: 24px;
    font-weight: 900;
    line-height: 24px;
}
.main.product .container.detail .buy .demoarea a div span{
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}
.main.product .container.detail .buy .buyarea a{
    position: relative;
    display: block;
    margin-top:5px;
    width:100%;
    font-size:18px;
    font-weight: 600;
    text-align: center;
    background:var(--buyBtnBg);
    border:1px var(--buyBtnBorder) solid;
    color: #fff;
    border-radius: 15px;
    background-image: -moz-linear-gradient( 180deg, #D32F2F 0%, #B71C1C 100%);
    background-image: -webkit-linear-gradient( 180deg, #D32F2F 0%, #B71C1C 100%);
    background-image: -ms-linear-gradient( 180deg, #D32F2F 0%, #B71C1C 100%);
    height: 85px;
    line-height: 85px;
}
.main.product .container.detail .buy .buyarea a.notforsale{
    border:1px #e9e9e9 solid;
    background: #f9f9f9;
    color:#666;
}
.main.product .container.bankalar{
    margin:20px auto;
    justify-content: space-between;
}
.main.product .container.bankalar img{
    border: 1px #f6f6f6 solid;
}
.main.product .container.taksit{
    margin:20px auto;
    justify-content: space-between;
}
.main.product .container.aciklama{
    margin:20px auto;
    display:flex;
    flex-direction: row;
    gap:10px;
}
.main.product .container.aciklama .yazilim-aciklama{
    width:50%;
}
.main.product .container.aciklama .hesaplama{
    width:50%;
}
.main.product .container.aciklama .hesaplama h4{
    clear: both;
    font-weight: bold;
    margin: 8px 0;
}
.main.product .container.aciklama .hesaplama p,
.main.product .container.aciklama .hesaplama span{
    font-size:16px;
    line-height: 20px;
}

.main.product .container.aciklama .hesaplama span{
    font-size:14px;
}
.main.product .container.haber-yazilimi{
    margin:40px auto;
    flex-wrap: wrap;
    gap: 0.625%
}
.main.product .container.haber-yazilimi > div{
    width:19.5%;
    display:flex;
    position: relative;
    flex-direction: column;
    gap:6px;
    text-align: center;
    border:1px #3F377C1C solid;
    background-color: #3F377C0D;
    border-radius: 5px;
    padding:55px 5px 5px;
    margin-top:55px;
    margin-bottom:5px;
    box-sizing: border-box;
}
.main.product .container.haber-yazilimi div i{
    font-size:48px;
    margin:10px 0;
    color: var(--primary-color);
}
.main.product .container.haber-yazilimi div strong{
    font-size:24px;
    line-height:32px;
    margin-bottom:10px;
    color:var(--secondary-color);
}
.main.product .container.haber-yazilimi div span{
    font-size:13px;
    line-height: 18px;
    color:#666;
}
.main.product .container.haber-yazilimi div span strong{
    font-size:13px;
    line-height: 18px;
}
.main.product .container.haber-yazilimi div hr{
    width:60%;
    margin:0 auto;
    height:1px;
    background-color: #3F377C4F;
    border: none;
    border-bottom: 1px #fff solid;
}
.main.product .container.haber-yazilimi div .icon{
    position: absolute;
    width:100px;
    height:100px;
    left:65px;
    top:-50px;
    border-radius: 50%;
    background-color: #3F377C40;
    border:none;
}
.main.product .container.haber-yazilimi div .icon > div{
    position: absolute;
    width:80px;
    height:80px;
    left:10px;
    top:10px;
    border-radius: 50%;
    background-color: #3F377C99;
    border:none;
}
.main.product .container.haber-yazilimi div .icon > div > div{
    position: absolute;
    width:60px;
    height:60px;
    left:10px;
    top:10px;
    border-radius: 50%;
    background-color: #3F377C;
    border:none;
    padding:0;
    transition: transform .3s;
}
.main.product .container.haber-yazilimi div:hover .icon > div > div{
    transform: scale(1.66);
}
.main.product .container.haber-yazilimi div .icon > div > div i{
    color:#fff;
    width:60px;
    height:60px;
    line-height: 60px;
    text-align: center;
    font-size: 36px;
    margin:0;
    padding:0;
}
.main.cart .subtitle{
    display:block;
    position:relative;
    width:100%;
    line-height:60px;
    font-size:18px;
    text-align: center;
    background-color: #f9f9f9;
    border:1px #e9e9e9 solid;
    color:#666;
}
.main.cart .subtitle i{
    margin-right:8px;
}
.main.cart form{
    width:100%;
}
.main.cart ul.cart{
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.main.cart ul.cart li{
    border:1px #e9e9e9 solid;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    position: relative;
    padding:2px;
    gap:6px;
}
.main.cart ul.cart li img{
    border:1px #e9e9e9 solid;
    width:200px;
    height:auto;
}
.main.cart ul.cart li .item{
    display: flex;
    flex-direction: column;
    gap: 2px;
    width:600px;
}
.main.cart ul.cart li .item .itemname{
    font-size:20px;
    font-weight: 600;
    line-height: 56px;
}
.main.cart ul.cart li .item input{
    display:none;
}
.main.cart ul.cart li .item label{
    border:1px #e9e9e9 solid;
    background-color: #fff;
    padding:0 4px;
    width: 100%;
    line-height:30px;
    font-size:16px;
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
}
.main.cart ul.cart li .item label:before{
    content: "\f00d";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    line-height: 1;
    font-size: 14px;
    line-height: 20px;
    color: #E57373;
    margin-right:5px;
    width:16px;
    display:inline-block;
}
.main.cart ul.cart li .item label.disabled:before{
    content: "\f00c";
    color:#666;
}
.main.cart ul.cart li .item label.info:before{
    content: "\f05a";
    color:#039BE5;
}
.main.cart ul.cart li .item input:checked + label:before{
    content: "\f00c";
    color: #00897b;
}
.main.cart ul.cart li .item label mark{
    background: none;
}
.main.cart ul.cart li .item label mark small{
    font-size: 14px;
    margin-right:6px;
    text-decoration:line-through;
}
.main.cart ul.cart li > mark{
    width:140px;
    text-align: right;
    background: none;
    font-size:24px;
    font-weight: 800;
    color: #00897b;
    white-space: nowrap;
}
.main.cart ul.cart li .delete{
    width:60px;
    text-align: center;
}
.main.cart ul.cart li .delete i{
    width:40px;
    height:40px;
    line-height: 40px;
    font-size:20px;
    color:#fff;
    background-color: var(--buyBtnBg);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s;
}
.main.cart ul.cart li .delete i:hover{
    background-color: var(--buyBtnBorder);
}
.main.cart .hesapla{
    margin:20px 0;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.main.cart .hesapla span{
    font-size:24px;
    line-height: 48px;
    color: #00897b;
    width:300px;
    border:1px #00897b solid;
    display: flex;
    justify-content: space-between;
}
.main.cart .hesapla span strong{
    display: inline-block;
    background-color: #00897b;
    color:#fff;
    padding:0 10px;
    line-height: 48px;
}
.main.cart .hesapla span div{
    padding:0 10px;
    font-weight: bold;
}
.main.cart .hesapla input{
    position: relative;
    display: block;
    margin-top: 5px;
    width: 300px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background: var(--buyBtnBg);
    border: 1px var(--buyBtnBorder) solid;
    color: var(--buyBtnText);
    cursor: pointer;
}
.main .login{
    margin:20px 0;
    display:block;
    position: relative;
    width:100%;
}
.main .login .alertbox{
    width:368px;
    margin:0 auto;
    margin-bottom:10px;
}
.main .login form{
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: right;
    width:400px;
    margin:0 auto;
}
.main .login.register form{
    width:820px;
    display: flex;
    flex-direction: row;
    gap:20px;
}
.main .login.register form section{
    width:400px;
}
.main .login.register form section .sectionspace{
    display:block;
    width:100%;
    height:62px;
}
.main .login form input,
.main .login form button{
    font-family: "Source Sans Pro",Arial,sans-serif;
    margin-bottom:10px;
    border:1px #e9e9e9 solid;
    background-color: #f9f9f9;
    line-height: 50px;
    font-size:16px;
    font-weight: 700;
    padding: 0 20px;
    width:358px;
}
.main .login form button{
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    cursor: pointer;
    width:400px;
    transition: background-color .3s;
}
.main .login form button:hover{
    background-color: var(--secondary-color);
}

.main .login form label{
    font-family: "Source Sans Pro",Arial,sans-serif;
    display:block;
    margin-top:10px;
    line-height: 26px;
    font-size:16px;
    font-weight: 700;
}
.main .login form .hesapturleri{
    display: flex;
    width:100%;
}
.main .login form .kurumsaldetay{
    width:100%;
    display:none;
}
.main .login form .kurumsaldetay.show{
    display: block;
}
.main .login form .hesapturleri label{
    width:50%;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    border-bottom: 2px #e9e9e9 solid;
}
.main .login form .hesapturleri input:checked + label{
    color:var(--primary-color);
    border-bottom: 2px var(--primary-color) solid;
}
.main .login form .hesapturleri input{
    display:none;
}
.main .login form .linkler{
    display: flex;
    justify-content: end;
    padding:0 2px;
}
.main .login form .linkler a{
    position: relative;
    display: inline-block;
    line-height:26px;
    color:#333;
    font-size:16px;
}
.main .login form .linkler a:after{
    content: '';
    position: absolute;
    width:0%;
    height:1px;
    background:#333;
    bottom:0;
    left:0;
    transition: width .3s;
}
.main .login form .linkler a:hover:after{
    width:100%;
}
.main .login form .code{
    display: flex;
    justify-content: start;
    gap: 10px;;
    margin-bottom:10px;
}
.main .login form a.yenile{
    line-height: 50px;
    padding: 0 5px;
    font-weight: 600;
}
.main.panel .paneldetail{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap:10px;
    width:100%;
}
.main.panel .paneldetail .info{
    flex:1;
    display:flex;
    flex-wrap: wrap;
}
.main.panel .paneldetail .info .subtitle,
.main.panel .paneldetail .items .subtitle{
    font-size:16px;
    line-height: 50px;
    padding:0 1%;
    font-weight: 600;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    width:98%;
}
.main.panel .paneldetail .items .subtitle a i{
    color: var(--primary-text-color);
    width:30px;
    height:50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
}
.main.panel .paneldetail .info strong,
.main.panel .paneldetail .info span{
    display:block;
    position: relative;
    font-size:16px;
    line-height: 50px;
    padding:0 1%;
    font-weight: 600;
    width:38%;
    border-bottom:1px #e9e9e9 solid;
}
.main.panel .paneldetail .info span.nodestek{
    width:98%;
    border:none;
    color:var(--buyBtnBg);
    text-align: center;
}
.main.panel .paneldetail .info a{
    display:block;
    position: relative;
    font-size:16px;
    line-height: 50px;
    padding:0 1%;
    font-weight: 600;
    width:98%;
    text-align: center;
    border:1px #e9e9e9 solid;
    background-color: #f9f9f9;
    margin-bottom:8px;
}
.main.panel .paneldetail .info a.newticket{
    background-color: #00897b;
    color:#fff;
}
.main.panel .paneldetail .info strong:after{
    content:':';
    position:absolute;
    right:4px;
    top:0;
    line-height: 50px;
}
.main.panel .paneldetail .info span{
    width:58%
}
.main.panel .paneldetail .info span.address{
    line-height:25px;
    padding: 12px 1%;
}
.main.panel .paneldetail .items{
    flex:2;
}
.main.panel .paneldetail .items .empty,
.main.panel .paneldetail .items ul.hizmet div.empty,
.main.panel .paneldetail .items ul.fatura div.empty,
.main.panel .paneldetail .items ul.supports div.empty{
    font-size:16px;
    font-weight: 600;
    color:#333;
    border:1px #e9e9e9 solid;
    line-height:50px;
    text-align: center;
    margin:4px 0;
}
.main.panel .paneldetail .items .faturaselect{
    font-size:16px;
    font-weight: 600;
    color:#333;
    border-bottom:1px #e9e9e9 solid;
    background-color: #f9f9f9;
    line-height:50px;
    text-align: center;
    margin:0 0 4px;
    display: flex;
    justify-content: space-between;
}
.main.panel .paneldetail .items .faturaselect label{
    padding:0 1%;
    width:18%;
    border-right:1px #e9e9e9 solid;
    cursor:pointer;
}
.main.panel .paneldetail .items .faturaselect label.select{
    background-color: #e9e9e9;
}
.main.panel .paneldetail .items ul.fatura li,
.main.panel .paneldetail .items ul.hizmet li,
.main.panel .paneldetail .items ul.supports li{
    display:flex;
    flex-wrap: wrap;
    border: 1px #e9e9e9 solid;
    margin-bottom:4px;
}
.main.panel .paneldetail .items ul.fatura li i,
.main.panel .paneldetail .items ul.fatura li .id,
.main.panel .paneldetail .items ul.fatura li .date,
.main.panel .paneldetail .items ul.fatura li .total,
.main.panel .paneldetail .items ul.fatura li .status,
.main.panel .paneldetail .items ul.fatura li .action,
.main.panel .paneldetail .items ul.fatura li .detail,
.main.panel .paneldetail .items ul.hizmet li span,
.main.panel .paneldetail .items ul.hizmet li i,
.main.panel .paneldetail .items ul.supports li span,
.main.panel .paneldetail .items ul.supports li label{
    line-height:50px;
    font-size:14px;
    font-weight: 600;
    width:120px;
    text-align:center;
}
.main.panel .paneldetail .items ul.fatura li i,
.main.panel .paneldetail .items ul.hizmet li i{
    width:40px;
    cursor:pointer;
    background-color: #f9f9f9;
}
.main.panel .paneldetail .items ul.fatura li .date{
    width:170px;
}
.main.panel .paneldetail .items ul.fatura li .total{
    color: #111;
    font-weight:900;
}
.main.panel .paneldetail .items ul.fatura li .action{
    width:208px;
    display:flex;
    justify-content: end;
}
.main.panel .paneldetail .items ul.fatura li .action a{
    background-color: var(--primary-color);
    color:var(--primary-text-color);
    border:1px var(--secondary-color) solid;
    padding:0 6px;
    line-height: 38px;
    margin:5px 5px 5px 0;
}
.main.panel .paneldetail .items ul.fatura li .action a.cancelorder{
    background-color: #f9f9f9;
    color: #333;
    border:1px #ddd solid;
}
.main.panel .paneldetail .items ul.fatura li .action a.fatura{
    background-color: #f9f9f9;
    color: #333;
    border:1px #ddd solid;
}
.main.panel .paneldetail .items ul.fatura li .action a.fatura i{
    background-color: #f9f9f9;
    width:16px;
    line-height: 38px;
}
.main.panel .paneldetail .items ul.fatura li .action a.fatura.notready{
    background-color: #fcfcfc;
    color: #aaa;
    border:1px #f0f0f0 solid;
}
.main.panel .paneldetail .items ul.fatura li .detail{
    width:758px;
    display: none;
    flex-direction: column;
    text-align: left;
    line-height: 20px;
    background-color: #e9e9f9;
    padding:10px;
}
.main.panel .paneldetail .items ul.fatura li .detail small{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
.main.panel .paneldetail .items ul.hizmet li span{
    width:120px;
}
.main.panel .paneldetail .items ul.hizmet li span.name,
.main.panel .paneldetail .items ul.hizmet li span.domain{
    width:309px;
}
.main.panel .paneldetail .items ul.hizmet li .detailx,
.main.panel .paneldetail .items ul.hizmet li .detaily{
    width:758px;
    display: none;
    flex-direction: column;
    text-align: left;
    line-height: 20px;
    background-color: #e9e9f9;
    padding:10px;
}
.main.panel .paneldetail .items ul.hizmet li .detailx label,
.main.panel .paneldetail .items ul.hizmet li .detaily label{
    line-height:30px;
    font-size:16px;
    font-weight: 600;
    border-bottom:1px #d9d9e9 solid;
    display: block;
    width:100%;
    margin-bottom:6px;
}
.main.panel .paneldetail .items ul.hizmet li .detailx ul.surumler li{
    margin:4px 0;
}
.main.panel .paneldetail .items ul.hizmet li .detailx ul.surumler li a{
    display: flex;
    width: 100%;
    font-size:16px;
    line-height:30px;
    font-weight: 600;
    border-bottom:1px #d9d9e9 solid;
}
.main.panel .paneldetail .items ul.hizmet li .detailx ul.surumler li a i{
    background:none;
    color: #666;
    line-height:30px;
}
.main.panel .paneldetail .items ul.hizmet li .detailx ul.surumler li a.active i{
    background:none;
    color: #00897b;
}
.main.panel .paneldetail .items ul.hizmet li .detailx ul.surumler li a small{
    font-size:14px;
}
.main.panel .paneldetail .items ul.hizmet li .detaily input,
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure a{
    font-family: "Source Sans Pro",Arial,sans-serif;
    width:98%;
    display: block;
    margin:4px auto;
    line-height:40px;
    padding: 0 1%;
    font-weight: 600;
}
.main.panel .paneldetail .items ul.hizmet li .detaily input[type=button]{
    background-color: var(--primary-color);
    border-color: var(--secondary-color);
    color: var(--primary-text-color);
    cursor:pointer;
}
.main.panel .paneldetail .items ul.hizmet li .detaily small{
    font-size:12px;
    display:block;
    text-align: center;
}
.main.panel .paneldetail .items ul.hizmet li .detaily small.red{
    color: var(--buyBtnBg);
    font-weight: 600;
}
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure{
    display:none;
}
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure .yesdomain,
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure .nodomain,
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure .yestransfer,
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure .notransfer{
    width:46%;
    margin:1%;
    text-align: center;
    background-color: var(--buyBtnBg);
    color:#fff;
    display:inline-block;
}
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure .yesdomain,
.main.panel .paneldetail .items ul.hizmet li .detaily .areyousure .yestransfer{
    background-color: #00897b;
}
.main.panel.destek .paneldetail .items form.talep{
    width:100%;
}
.main.panel.destek .paneldetail .items form.talep label{
    display: block;
    position: relative;
    font-size: 16px;
    line-height: 50px;
    padding: 0 1%;
    font-weight: 600;
    width: 98%;
    border-bottom: 1px #e9e9e9 solid;
}
.main.panel.destek .paneldetail .items form.talep input,
.main.panel.destek .paneldetail .items form.talep select,
.main.panel.destek .paneldetail .items form.talep textarea{
    font-family: "Source Sans Pro",Arial,sans-serif;
    display: block;
    position: relative;
    font-size: 16px;
    line-height: 50px;
    padding: 0 1%;
    font-weight: 600;
    width: 98%;
    border: 1px #e9e9e9 solid;
}
.main.panel.destek .paneldetail .items form.talep select{
    height:50px;
    width:100%;
}
.main.panel.destek .paneldetail .items form.talep input[type=submit]{
    width:100%;
    cursor:pointer;
    background-color: var(--buyBtnBg);
    color: var(--primary-text-color);
    border:1px var(--buyBtnBorder) solid;
}
.main.panel.destek .paneldetail .items form.talep textarea{
    line-height: 24px;
    min-height: 240px;
    resize: none;
}
.main.panel.destek .paneldetail .items ul.supports li a{
    display: flex;
    cursor:pointer;
}
.main.panel.destek .paneldetail .items ul.supports li label{
    width:536px;
    line-height: 24px;
    padding: 13px 0;
    text-align: left;
    cursor:pointer;
}
.main.panel.destek .paneldetail .items .mesajinfo{
    display: flex;
    position: relative;
    gap:10px;
    font-size: 16px;
    line-height: 50px;
    padding: 0 1%;
    font-weight: 600;
    width: 98%;
    border: 1px #e9e9e9 solid;
    margin:2px 0;
}
.main.panel.destek .paneldetail .items .mesaj{
    display: block;
    position: relative;
    font-size: 16px;
    line-height: 50px;
    padding: 0 1%;
    font-weight: 600;
    width: 93%;
    border: 1px #e9e9e9 solid;
    background-color: #f9f9f9;
    margin:2px 0 5px;
    margin-left:5%;
    border-radius: 4px;
}
.main.panel.destek .paneldetail .items .mesaj.type1{
    margin-left:0;
    margin-right:5%;
    border: 1px #c1ccc1 solid;
    background-color: #e1eee1;
}
.main.panel.destek .paneldetail .items .mesaj .userd{
    display:flex;
    justify-content: space-between;
    border-bottom: 1px #e9e9e9 solid;
    line-height: 32px;
}
.main.panel.destek .paneldetail .items .mesaj.type1 .userd{
    border-bottom: 1px #c1ccc1 solid;
}
.main.panel.destek .paneldetail .items .mesaj .mesajdetay{
    line-height:24px;
    padding:10px 2px;
}
.main.panel.destek .paneldetail .items .mesajinfo span.status0,
.main.panel .paneldetail .items ul.supports li span.status0,
.main.panel .paneldetail .items ul.fatura li .status0{
    color: #E91E63;
}
.main.panel.destek .paneldetail .items .mesajinfo span.status1,
.main.panel .paneldetail .items ul.supports li span.status1,
.main.panel .paneldetail .items ul.fatura li .status1{
    color: #00897b;
}
.main.panel.destek .paneldetail .items .mesajinfo span.status2,
.main.panel .paneldetail .items ul.supports li span.status2,
.main.panel .paneldetail .items ul.fatura li .status2{
    color: #1565C0;
}
footer{
    margin-top:20px;
    padding: 40px 0 0;
    border-top:5px var(--secondary-color) solid;
    background-color: var(--primary-color);
}
footer .container{
    gap: 20px;
}
footer .footerleft{
    flex:1;
    padding:10px;
}
footer .footerleft img{
    position: relative;
    display: block;
    margin:0 auto 20px;
}
footer .footerleft p{
    color: var(--primary-text-color);
    font-size:16px;
    line-height: 32px;
}
footer .footerright{
    flex:2;
    display: flex;
}
footer .footerright h5{
    color:var(--primary-text-color);
    line-height:50px;
    font-size:18px;
    font-weight: 800;
}
footer .footerright li{
    margin-left:4%;
    list-style-type: disc;
    color: var(--primary-text-color);
}
footer .footerright li a{
    display: inline-block;
    position: relative;
    color:var(--primary-text-color);
    line-height:40px;
}
footer .footerright li a:after{
    content: '';
    display: block;
    position: relative;
    bottom:0;
    left:0;
    height:2px;
    width:0%;
    background-color:var(--primary-text-color);
    transition: width .3s;
}
footer .footerright li a:hover:after{
    width:100%;
}
footer .footerright .kurumsal{
    flex:1;
}
footer .footerright .linkler{
    flex:2;
}
footer .footerright .linkler ul{
    display: flex;
    flex-wrap: wrap;
}
footer .footerright .linkler ul li{
    margin-left: 3%;;
    width:47%;
}
footer .copyright{
    height: 40px;
    line-height: 40px;
    background-color: var(--secondary-color);
    color: var(--primary-text-color);
}
footer .copyright .container{
    justify-content: space-around;
}
footer .copyright .container span,
footer .copyright .container a{
    color:#fff !important;
}
footer .copyright i{
    margin-right:6px;
}
.alertbox{
	color: #111;
	background-color: #eee;
	border: 1px solid #ddd;
	padding: 15px;
	line-height:20px;
	font-size:18px;
	border-radius: 4px;
	margin-bottom:20px;
    width:100%;
	transition: opacity .15s linear;
}
.alertbox strong{
	font-weight:600;
	margin-right:6px;
}
.alertbox a.close{
    position: relative;
    color: inherit;
    text-decoration: none !important;
    font-size: 30px !important;
    line-height: 20px;
    float: right;
    font-weight: 700;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.alertbox a.close:hover{
	opacity:1;
}
.alertbox.warning{
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
}
.alertbox.danger{
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}
.alertbox.info{
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}
.alertbox.success{
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
#cookie{
	width:400px;
	border: 1px solid var(--secondary-color);
	background: var(--primary-color);
	color: #eee;
	line-height: 30px;
	font-size:15px;
	position: fixed;
	display: block;
	padding:15px;
	border-radius: 5px;
	bottom:5px;
	right:15vw;
	padding-right:35px;
    box-sizing: border-box;
}
#cookie.hidden{
    display:none;
}
#cookie a{
	color:#eee;
	font-weight: bold;
}
#cookie i{
	display: block;
	position: absolute;
	right:5px;
	top:15px;
	cursor:pointer;
	font-size:24px;
    width:32px;
    text-align: center;
	line-height:32px;
}
.irs--modern .irs-bar,
.irs--modern .irs-single{
    background: var(--primary-color) !important;
}
.irs--modern .irs-single::before{
    border-top-color: var(--primary-color) !important;
}
.irs--modern .irs-bar,
.irs--modern .irs-line{
    height:14px !important;
}
@media screen and (max-width: 1200px) {
    .container{
        width:800px;
    }
    .main .slider img{
        height:300px;
    }
    .main .slider .text{
        left:10px;
    }
    .main .slider span{
        left:10px;
        width:400px;
        max-width:90%;
    }
    .main .slider .text strong{
        font-size:26px;
    }
    .animation > div > h2{
        font-size:26px;
    }
    footer .copyright{
        height:auto;
        text-align:center;
        line-height: 24px;
        padding:10px 0;
    }
    footer .container{
        flex-direction: column;
    }
    .main.product .container.detail{
        flex-direction: column;
    }
    .main.product .container.detail .gallery{
        text-align:center;
    }
    .main.product .container.detail .gallery img{
        width:500px;
    }
    .main.panel .paneldetail{
        flex-direction: column;
    }
    .main.panel .paneldetail .info,
    .main.panel .paneldetail .items{
        width: 100%;
    }
    .main.product .container.haber-yazilimi{
        gap:1%;
    }
    .main.product .container.haber-yazilimi div{
        width:49.5%;
    }
    .main.product .container.aciklama{
        flex-direction: column;
    }
    .main.product .container.aciklama .hesaplama,
    .main.product .container.aciklama .yazilim-aciklama{
        width:100%;
    }
    .main.product .container.haber-yazilimi div .icon{
        left:148px;
    }
}
@media screen and (max-width: 820px) {
    .container{
        width:94%;
        margin:0 3%;
    }
    header .topbar .container ul li.removable{
        display:none;
    }
    header .topbar .container ul{
        justify-content: end;
    }
    header .menu{
        display:none;
    }
    header .logo .basket.mobil,
    header .logo .mobilmenu{
        display:block;
    }
    .main .slider img{
        display:none;
    }
    .main .slider{
        height:300px;
    }
    .main .slider .text{
        top:60px;
    }
    .main .slider span{
        top:150px;
    }
    .main section.yazilim .container{
        gap: 2%;
    }
    .main section.yazilim .container div{
        padding: 8px 2.5%;
        width: 44%;
        margin-bottom: 10px
    }
    .main section.yazilim .container div img{
        width:100%;
        height:auto;
    }

    footer .container{
        flex-direction: column;
    }
    footer .footerright{
        flex-direction: column;
    }
    footer .footerright .linkler{
        display:none;
    }
    footer .footerright h5{
        display:none;
    }
    footer .footerright ul{
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .main.cart ul.cart li img{
        width:60px;
    }
    .main .login.register form{
        flex-direction: column;
        width:100%;
    }
    .main .login.register form section{
        margin:0 auto;
    }
    .main .login.register form section .sectionspace{
        display: none;;
    }
    .main.panel .paneldetail .items ul.fatura li i, .main.panel .paneldetail .items ul.hizmet li i{
        display:none;
    }
    .main.panel .paneldetail .items ul.hizmet li span{
        width:20%;
    }
    .main.panel .paneldetail .items ul.hizmet li span.name,
    .main.panel .paneldetail .items ul.hizmet li span.domain{
        width:40%;
    }
    .main.panel .paneldetail .items ul.fatura li .action{
        width:100%;
    }
    .main.panel .paneldetail .items ul.supports li span.id{
        display:none;
    }
    .main.panel .paneldetail .items ul.supports li{
        display: block;
    }
    .main.panel.destek .paneldetail .items ul.supports li a{
        justify-content: space-between;
    }
    .main.panel.destek .paneldetail .items ul.supports li label{
        padding:13px 4px;
    }
    .main.product .container.haber-yazilimi div .icon{
        left:calc((49.5vw - 120px) / 2);
    }
}
@media screen and (max-width: 680px) {
    .main.cart ul.cart{
        gap:50px;
    }
    .main.cart ul.cart li{
        flex-direction: column;
    }
    .main.cart ul.cart li .item{
        width:94%;
    }
    .main.cart ul.cart li .item label{
        flex-direction: column;
    }
    .main.cart ul.cart li .item .itemname{
        text-align: center;
    }
    .main.cart ul.cart li .delete{
        width:100%;
    }
    .main.cart ul.cart li .delete i{
        width:50%;
        border-radius: 5px;
        margin: 10px 0 20px;
    }
    .main.panel .paneldetail .items .faturaselect,
    .main.panel .paneldetail .items ul.fatura li .id{
        display:none;
    }
    .main.panel .paneldetail .items ul.fatura li span.date{
        width:40%;
    }
    .main.panel .paneldetail .items ul.fatura li span.total,
    .main.panel .paneldetail .items ul.fatura li span.status{
        width:30%;
    }
}
@media screen and (max-width: 540px) {
    .main.product .container.detail .gallery img{
        width:100%;
    }
    .main.product .container.detail .buy label{
        height:auto;
    }
    .main.product .container.detail .buy label .desc small{
        height:auto;
    }
    .main.product .container.detail .buy label span i{
        width:36px;
    }
    .main.product .container.detail .buy label mark{
        font-size:14px;
        height:auto;
    }
    .main.product .container.detail .buy label .desc > strong{
        font-size:12px;
        height:auto;
    }
    .main.product .container.detail .buy label .desc small{
        font-size:11px;
    }
    .main.product .container.detail .buy label mark{
        padding:0 2px;
    }
    .main.product .container.detail .buy label mark.discount{
        padding:10px 2px;
    }
    .main.cart .hesapla span{
        max-width: 100%;
    }
    .main.cart .hesapla input{
        max-width:100%;
    }
    .main .login form{
        width:100%;
    }
    .main .login form input, .main .login form button{
        margin:0 auto 10px;
        width:100%;
        box-sizing: border-box;
    }
    .main .login .alertbox{
        box-sizing: border-box;
        width:100%;
    }
    .main .login.register form section{
        width:100%;
    }
    .main .login form .hesapturleri{
        flex-direction: column;
        width:80%;
    }
    .main .login form .hesapturleri label{
        position: relative;
        width:100%;
        text-align: left;
        padding-left:40px;
    }
    .main .login form .hesapturleri label:before{
        content:'';
        position:absolute;
        left:0;
        top:8px;
        display:inline-block;
        height:32px;
        width:32px;
        margin:2px;
        box-sizing: border-box;
        border:2px #e9e9e9 solid;
    }
    .main .login form .hesapturleri input:checked + label:before{
        border:6px #fff solid;
        background: var(--primary-color);
        outline: 2px var(--primary-color) solid;
        width:28px;
        height:28px;
        margin-left:4px;
    }
    .main .login form .hesapturleri label:after{
        content:' HESAP';
    }
    #cookie{
        left:15vw;
        right:15vw;
        width:70vw;
    }
}
@media screen and (max-width: 380px) {
    header .logo img{
        width:100%;
        height:auto;
    }
    header .logo .container{
        align-items: center;
    }
    .main .slider .text strong{
        font-size:16px;
    }
    .animation > div > h2{
        font-size:16px;
    }
}