@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900&subset=latin-ext,latin);
:root {
    --primary-color:#3F377C;
    --secondary-color:#342A66;
    --third-color:rgba(63,55,124,0.3);
    --text-color:#3c3c3c;
    --primary-text-color:#eee;
    --section1-color:#fcfcfc;
    --section2-color:#f9f9f9;
    --section3-color:#fcfcfc;

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

    --white:#fff;

    --primary-light: #3F377C;
    --primary-dark: #3F377C;
    --background: #0f172a;
    --surface: #1e293b;
    --surface-light: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border: #334155;
    --success: #10b981;
    --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    --shadow: rgba(0, 0, 0, 0.25);
}
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: "Poppins",Arial,sans-serif;
	background-color: #fff;
	font-size:16px;
	color:#333;
}
html,body
{
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}
button, input, textarea{
    font-family: "Poppins",Arial,sans-serif;
    font-size: 16px;
    color: #333;
}
section{
    position: relative;
}
.d-none{
    display: none !important;
}
.direction-column{
    flex-direction: column;
}
.container{
    position: relative;
    display:flex;
    width:1180px;
    max-width: 100%;
    margin:0 auto;
}
.flexspace{
    flex:2;
}
.btn{
    display: inline-block;
    height:38px;
    line-height: 38px;
    background-color:transparent;
    color:var(--primary-color);
    padding:0 10px;
    border-radius: 4px;
    font-size:14px;
    border:1px var(--primary-color) solid;
    transition: color .2s, background-color .2s;
    cursor:pointer;
    white-space: nowrap;
}
.btn.secondary,
.btn:hover{
    background-color:var(--primary-color);
    color:#fff;
}
header{
    color:var(--primary-text-color);
}
header .topbar{
    padding:20px 0;
}
header .topbar .container ul{
    height:40px;
    width:100%;
    line-height: 40px;;
    display:flex;
    justify-content: space-between;
    gap: 6px;
    color:var(--text-color);
    font-weight: 500;
}
header .topbar .container ul.mobilemenu{
    position: absolute;
    overflow:hidden;
    opacity:0;
    top:30px;
    right:5px;
    border:1px #f1f1f1 solid;
    background-color: #fff;
    z-index:-1;
    flex-direction: column;
    width:200px;
    height: auto;
    padding: 10px;
    border-radius: 4px;
    transition: top .3s, opacity .3s;
}
header .topbar .container ul.mobilemenu.active{
    top:50px;
    opacity:1;
    z-index:9;
}
header .topbar li.deremovable,
header .topbar li.deremovable2{
    display: none;
}
header .topbar li.deremovable2 i,
header .topbar li.icononly i{
    margin-right:0;
    padding:0 4px;
}
header .topbar li i{
    margin-right:6px;
}
header .topbar li a{
    position: relative;
    display: block;
    height:38px;
    color:var(--text-color);
    line-height: 38px;
    padding:0 10px;
}
header .topbar li.panel a{
    background-color:var(--primary-color);
    color:#fff;
    padding:0 10px;
    border-radius: 4px;
    font-size:14px;
    border:1px var(--primary-color) solid;
    transition: color .2s, background-color .2s;
}
header .topbar li.panel a:hover{
    background-color:#fff;
    color:var(--primary-color);
}
header .topbar li.tel a{
    background-color:#fff;
    color:var(--primary-color);
    padding:0 10px;
    border-radius: 4px;
    font-size:14px;
    border:1px var(--primary-color) solid;
    transition: color .2s, background-color .2s;
}
header .topbar li a img{
    margin:7px 0;
}
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:240px;
    z-index: 0;
    overflow: hidden;
    background-color: #fafafa;
    margin-bottom:40px;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.05);
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles li:nth-child(1){
    left: 25%;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}

.circles li:nth-child(2){
    left: 10%;
    width: 10px;
    height: 10px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 10px;
    height: 10px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 30px;
    height: 30px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 10px;
    height: 10px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 50px;
    height: 50px;
    animation-delay: 3s;
}

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

.circles li:nth-child(8){
    left: 50%;
    width: 12px;
    height: 12px;
    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: 45px;
    height: 45px;
    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 .container{
    z-index:1;
}
.main .slider img{
    position: absolute;
    height:240px;
    width:auto;
    right:0;
    top:22px;
    z-index: 2;
}
.main .slider .text{
    position: absolute;
    display: flex;
    left:10px;
    top:45px;
    width:100%;
    z-index: 2;
    color:var(--white);
    font-size:48px;
    font-weight: 900;
}
.main .slider .text strong{
    line-height: 50px;
    font-size:32px;
    color:var(--primary-color);
    margin-right:10px;
}
.main .slider .text h2{
    line-height: 50px;
    font-size:32px;
    color:var(--primary-color);
}
.main .slider span{
    position: absolute;
    left:10px;
    top:100px;
    z-index: 2;
    color:var(--text-color);
    font-size:18px;
    font-weight:300;
    line-height: 24px;
    width:600px;
}
.main .slider a{
    position: absolute;
    left:10px;
    top:160px;
    height:38px;
    line-height: 38px;
    background-color:transparent;
    color:var(--primary-color);
    padding:0 10px;
    border-radius: 4px;
    font-size:14px;
    border:1px var(--primary-color) solid;
    transition: color .2s, background-color .2s;
}
.main .slider a:hover{
    background-color:var(--primary-color);
    color:#fff;
}
.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.haber{
    margin-bottom:80px;
}
.main section.haber .buttons{
    display:flex;
    flex-direction: row;
    justify-content: start;
    gap:6px;
    margin-top:20px;
}
.main section.yazilim .digerbtn,
.main section.haber .detay,
.main section.haber .ucretsizbtn{
    display: inline-block;
    height:38px;
    line-height: 38px;
    background-color:transparent;
    color:var(--primary-color);
    padding:0 10px;
    border-radius: 4px;
    font-size:14px;
    border:1px var(--primary-color) solid;
    transition: color .2s, background-color .2s;
}
.main section.haber .ucretsizbtn,
.main section.yazilim .digerbtn:hover,
.main section.haber .detay:hover{
    background-color:var(--primary-color);
    color:#fff;
}
.main section.haber .container{
    gap:10px;
}
.main section.haber img{
    width:580px;
    height: 454px;
}
.main section.haber h3{
    font-weight: 900;
    font-size: 20px;
    line-height: 30px;
    color: var(--primary-color);
}
.main section.haber ul{
    display: flex;
    flex-wrap: wrap;
    width:100%;
}
.main section.haber ul li{
    line-height:30px;
    width:50%;
}
.main section.haber ul li:before{
    content:'';
    width:10px;
    height:10px;
    background: var(--primary-color);
    display:inline-block;
    margin-right:8px;
}
.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.25;
    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:18px;
    line-height:32px;
    text-align: center;
}
.main section.nedenbiz strong{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 30px;
    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: row;
}
.main section.desc img{
    width:450px;
    height: 360px;
}
.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;
    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.blog .container.title h1{
    font-weight: 900;
    font-size:24px;
    line-height: 24px;
    color:var(--primary-color);
    border-bottom:1px var(--primary-color) solid;
}
.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;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.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 #f1f1f1 solid;
    background: #fafafa;
    padding: 10px 0;
    border-radius: 4px;
}
.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:32px;
    line-height: 42px;
    color: #3F377C;
    text-align: right;
    text-shadow: 1px 1px 0 rgba(200,200,200,1);
}
.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;
    height: 85px;
    line-height: 85px;
    box-sizing: border-box;
    padding:0 20px;
    border-color: transparent;
}
.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: 32px;
}
.main.product .container.detail .buy .demoarea a div span{
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}
.main.product .container.detail .buy .buyarea{
    display: flex;
    justify-content: end;
    gap:2px;
}
/*.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.title.subtitle{
    margin:40px 0 0;
}
.main.product .container.title h4{
    font-weight: 900;
    font-size:30px;
    line-height: 30px;
    color:var(--primary-color);
    padding:0 10px;
}
.main.product .container.title span{
    margin-top: 2px;
    font-size:16px;
    line-height:20px;
    height:20px;
    color:#555;
}
.main.product .container.product-ozellikler{
    margin:20px auto;
    flex-direction: column;
    gap:50px
}
.main.product .container.product-ozellikler > div{
    display:flex;
    align-items: center;
    gap:10px;
}
.main.product .container.product-ozellikler > div:nth-child(2n){
    flex-direction: row-reverse;
}
.main.product .container.product-ozellikler img{
    outline: 1px #f1f1f1 solid;
    border: 5px #fff solid;
    border-radius: 6px;
    box-shadow: 6px 6px 10px #c9c9c9;
}
.main.product .container.product-ozellikler .detail *{
    display:block;
    text-align: center;
    margin-bottom:10px;
}
.main.product .container.product-ozellikler .detail strong,
.main.product .container.product-ozellikler .detail span{
    font-size:18px;
    line-height: 24px;
}
.main.product .container.product-ozellikler .detail span{
    font-weight: 300;
}
.main.product .container.product-ozellikler h3,
.main.product .container.product-ozellikler h4,
.main.product .container.product-ozellikler h5{
    display:block;
    width:100%;
    font-weight: 900;
    font-size: 24px;
    line-height: 40px;
    color: var(--primary-color);
    text-align: center;
}
.main.product .container.packages{
    flex-direction: column;
}
.main.product .container.packages > div{
    display:flex;
    flex-direction: row;
}
.main.product .container.packages > div.subtitle{
    display:flex;
    flex-direction: column;
    background-color: var(--primary-color);
    color:#fff;
    line-height:20px;
    padding:20px 0;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.main.product .container.packages > div.subtitle small{
    line-height: 14px;
    font-weight: normal;
}
.main.product .container.packages span{
    width:33.333%;
    line-height: 30px;
    min-height: 30px;
    text-align: center;
    padding: 15px 8px;
}
.main.product .container.packages span small{
    display:block;
    line-height:18px;
    font-size:14px;
    margin-bottom:4px;
    font-weight: 300;
}
.main.product .container.packages span p{
    display:block;
    line-height:18px;
    font-size:14px;
    margin-bottom:4px;
    font-weight: 300;
}
.main.product .container.packages span mark{
    display:block;
    line-height:20px;
    font-size:20px;
    margin-bottom:4px;
    font-weight: 700;
    background-color: transparent;
    text-decoration: line-through;
    color:#777;
}
.main.product .container.packages span:nth-child(1){
    text-align:left;
    font-weight: 600;
}
.main.product .container.packages .ozellik:nth-child(2n){
    background-color: #f5f5f5;
}
.main.product .container.packages .title span{
    color:#fff;
    font-weight: bold;
    border:2px #fff solid;
}
/*.main.product .container.packages .title span:nth-child(2){
    background-color: #689F38;
}*/
.main.product .container.packages .title span:nth-child(2){
    background-color: #0288D1;
}
/*.main.product .container.packages .title span:nth-child(4){
    background-color: #C2185B;
}*/
.main.product .container.packages .title span:nth-child(3){
    background-color: #512DA8;
}
.main.product .container.packages .price span{
    position:relative;

    margin:8px 0;
    line-height: 34px;
}
.main.product .container.packages .price span em{
    position:absolute;
    right:0;
    top:-70px;
    font-size:10px;
    line-height:12px;
    font-weight: 600;
    background-color: rgba(255,255,255,0.2);
    color:rgba(0,0,0,0.4);
    text-align: center;
    transform: rotate(20deg);
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.main.product .container.packages span i{
    font-size: 28px;
    color:#aaa;
}
/*.main.product .container.packages .price span:nth-child(2),
.main.product .container.packages span:nth-child(2) i.fa-circle-check{
    color: #689F38;
}*/
.main.product .container.packages .price span:nth-child(2),
.main.product .container.packages span:nth-child(2) i.fa-circle-check{
    color: #0288D1;
}
/*.main.product .container.packages .price span:nth-child(4),
.main.product .container.packages span:nth-child(4) i.fa-circle-check{
    color: #C2185B;
}*/
.main.product .container.packages .price span:nth-child(3),
.main.product .container.packages span:nth-child(3) i.fa-circle-check{
    color: #512DA8;
}
.main.product .container.packages .price span{
    font-size: 36px;
    font-weight: bold;
}
.main.product .container.sss{
    flex-direction: column;
    gap:6px;
}
.main.product .container.sss > div{
    background-color: #f7f7f7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.main.product .container.sss > div > strong{
    line-height:30px;
    font-size:18px;
    padding:15px 10px;
    cursor: pointer;
}
.main.product .container.sss > div > span{
    line-height:30px;
    font-size:16px;
    padding:10px;
    display:none;
}
.main.product .container.sss > div.active > span{
    display: block;
}
.main.product .container.haber-yazilimi{
    margin:40px auto;
    flex-wrap: wrap;
    gap: 0.625%;
    justify-content: space-between;
}
.main.product .container.haber-yazilimi > div{
    width:32%;
    display:flex;
    position: relative;
    flex-direction: column;
    gap:6px;
    text-align: center;
    border:1px #3F377C1C solid;
    background-color: #3F377C0D;
    border-radius: 5px;
    padding:35px 5px 5px;
    margin-top:32px;
    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:20px;
    line-height:24px;
    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:70px;
    height:70px;
    left:15px;
    top:-35px;
    border-radius: 50%;
    background-color: #3F377C40;
    border:none;
}
.main.product .container.haber-yazilimi div .icon > div{
    position: absolute;
    width:50px;
    height:50px;
    left:10px;
    top:10px;
    border-radius: 50%;
    background-color: #3F377C99;
    border:none;
}
.main.product .container.haber-yazilimi div .icon > div > div{
    position: absolute;
    width:30px;
    height:30px;
    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:30px;
    height:30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    margin:0;
    padding:0;
}
.main.cart .subtitle{
    display:flex;
    justify-content: space-between;
    position:relative;
    width:100%;
    line-height:60px;
    font-size:18px;
    text-align: center;
    background-color: #f9f9f9;
    border:1px #e9e9e9 solid;
    color:#666;
    box-sizing: border-box;
    padding:0 10px;
}
.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;
    flex:1;
}
.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;
    line-height:30px;
    font-size:16px;
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
    user-select: none;
}
.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 label.gift:before{
    content: "\f06b";
    color:#E91E63;
}
.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:22px;
    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 5px;
    line-height: 48px;
}
.main.cart .hesapla span div{
    padding:0 5px;
    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.cart .hesapla input:disabled{
    background: #666;
    border: 1px #444 solid;
}
.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 select,
.main .login form button,
.main .login form textarea,
.main.cart input,
.main.cart select,
.odemebildirimi input,
.odemebildirimi textarea,
#extendModal select,
#changeModal select,
#upgradeModal select,
#addonModal select,
#addHostingModal select{
    font-family: "Poppins",Arial,sans-serif;
    margin-bottom:10px;
    border:1px #f1f1f1 solid;
    background-color: #fcfcfc;
    line-height: 50px;
    font-size:15px;
    font-weight: 400;
    padding: 0 20px;
    width:358px;
}
.main .login form input:read-only,
.main .login form select:disabled{
    background-color: #e1e1e1;
}
.main .login form select,
.main.cart select,
#extendModal select,
#changeModal select,
#upgradeModal select,
#addonModal select,
#addHostingModal select{
    height:50px;
    width:100%;
}
#changeModal label,
#extendModal label,
#upgradeModal label,
#addonModal label,
#addHostingModal label{
    line-height:40px;
    width:100%;
}
.odemebildirimi input,
.odemebildirimi textarea,
.main .login form textarea{
    border:1px #e9e9e9 solid;
    width:100%;
    box-sizing: border-box;
    resize: none;
    height:auto;
}
.main .login form textarea{
    line-height: 30px;
}
.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: "Poppins",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 .login form .remember{
    display:flex;
    justify-content: start;
    align-items: center;
    gap:4px;
    margin-bottom:10px;
}
.main .login form .remember input{
    width:24px;
    height:24px;
    margin:1px 0;
}
.main .login form .remember label{
    margin-top:0;
}
.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 2%;
    font-weight: 600;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    width:100%;
    box-sizing: border-box;
    border-radius: 4px;
}
.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 .items .subtitle{
    display:flex;
    justify-content: space-between;
}
.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;
    width:100%;
    margin-bottom:8px;
}
.main.panel .paneldetail .info form{
    width:100%;
}
.main.panel .paneldetail .info button{
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    font-weight: 600;
    text-align: left;
    cursor:pointer;
}
.main.panel .paneldetail .info a.newticket{
    background-color: #00897b;
    border-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 .info .row{
    display:flex;
    width:100%;
    justify-content: space-between;
    gap:4px;
}
.main.panel .paneldetail .info .row .col{
    width:100%;
}
.main.panel .paneldetail .info .row .col a{
    box-sizing: border-box;
}
.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.hizmet li .detail{
    display:flex;
}
.main.panel .paneldetail .items ul.hizmet li a.detail i{
    
    width:80px;
}
.main.panel .paneldetail .items ul.hizmet li i{
    display:flex;
    justify-content: center;
    align-items: center;
}
.main.panel .paneldetail .items .links{
    display:flex;
    gap:2px;
    justify-content: end;
}
.main.panel .paneldetail .items .links .page-btn{
    min-width:38px;
    text-align: center;
}
.main.panel .paneldetail .items .links .page-btn.active{
    background-color: var(--primary-color);
    color:#fff;
}
.main.panel .paneldetail .hosting-warning,
.main.panel .paneldetail .hosting-danger{
    display:block;
    width:100%;
    text-align:center;
    padding:4px 10px;
    line-height:32px;
    font-size:15px;
    background-color: #fcf8e3;
    box-sizing: border-box;
}
.main.panel .paneldetail .hosting-danger{
    background-color: #fce8ef;
}
.main.panel .paneldetail .items ul.fatura li .date{
    width:170px;
}
.main.panel .paneldetail .items ul.fatura li .total{
    color: #111;
    font-weight:700;
}
.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:86px;
}
.main.panel .paneldetail .items ul.hizmet li span.name,
.main.panel .paneldetail .items ul.hizmet li span.domain{
    line-height:20px;
    padding:15px 0;
    width:306px;
}
.main.panel .paneldetail .items ul.hizmet li span.name small,
.main.panel .paneldetail .items ul.hizmet li span.domain small{
    display:block;
    line-height: 20px;
    font-size: 12px;
    font-weight: 400;
}
.main.panel .paneldetail .items ul.hizmet li span.domain small.end{
    color: #c51111
}
.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: "Poppins",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: "Poppins",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;
}
.kurumsal{
    display:block;
    position: relative;
}
.kurumsal .items{
    display:flex;
    flex-wrap: wrap;
    gap:0.5%
}
.kurumsal .items div{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width:33%;
    box-sizing: border-box;
    border:1px #e9e9e9 solid;
    background: #f9f9f9;
    border-radius: 5px;
    text-align: center;
    margin-bottom:10px;
    min-height:100px;
    padding:10px;
}
.sozlesme{
    display:flex;
    flex-wrap: wrap;
    line-height:24px;
    margin:5px 0;
}
.sozlesme input{
    display:none;
}
.sozlesme label{
    position: relative;
    display:inline-block;
    width:24px;
    height:24px;
    margin-right:8px;
    box-sizing: border-box;
    border:3px #999 solid;
    border-radius: 2px;
    cursor:pointer;
}
.sozlesme label:after{
    content: '';
    position: absolute;
    left:2px;
    top:2px;
    width:14px;
    height:14px;
    border-radius: 2px;
    background-color: transparent;
}
.sozlesme label:hover{
    border-color:var(--primary-color);
}
.sozlesme input:checked+label{
    border-color:var(--primary-color);
}
.sozlesme input:checked+label:after{
    background-color:var(--primary-color);
}
footer{
    margin-top:20px;
    padding: 40px 0 0;
    border-top:1px var(--primary-text-color) solid;
}
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-color);
    font-size:16px;
    line-height: 32px;
}
footer .footerright{
    flex:2;
    display: flex;
}
footer .footerright h5{
    color:var(--primary-color);
    line-height:50px;
    font-size:18px;
    font-weight: 800;
}
footer .footerright li{
    margin-left:4%;
    list-style-type: disc;
    color: var(--text-color);
}
footer .footerright li a{
    display: inline-block;
    position: relative;
    color:var(--text-color);
    line-height:40px;
    transition: color .3s;
}
footer .footerright li a:after{
    content: '';
    display: block;
    position: relative;
    bottom:0;
    left:0;
    height:2px;
    width:0;
    background-color:var(--primary-color);
    transition: width .3s;
}
footer .footerright li a:hover{
    color:var(--primary-color);
}
footer .footerright li a:hover:after{
    width:100%;
}
footer .footerright .kurumsal{
    flex:2;
}
footer .footerright .linkler{
    flex:1;
}
footer .footerright .kurumsal ul{
    display: flex;
    flex-wrap: wrap;
}
footer .footerright .kurumsal ul li{
    margin-left: 3%;;
    width:47%;
}
footer .copyright{
    height: 60px;
    line-height: 60px;
    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,
.alertbox.error{
	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: 18px;
	font-size:14px;
	position: fixed;
	display: block;
	padding:5px;
	border-radius: 5px;
	bottom:5px;
	left: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;
}
/*a.whatsapp{
    position: fixed;
    left:140px;
    bottom:50px;
}
a.whatsapp img{
    width:80px;
    height:auto;
}*/
#whatsapp{
    position:fixed;
    right:10px;
    bottom:10px;
}
#whatsapp a{
    position: relative;
    display:block;
    z-index:999;
}
#whatsapp a i{
    display:block;
    width:72px;
    height:72px;
    line-height: 72px;
    font-size:36px;
    text-align: center;
    color:#fff;
    background-color:#25D366;
    border-radius: 50%;
    opacity: 0.8;
}
#whatsapp a:hover i{
    opacity:1;
}
#whatsapp a .chat{
    position:absolute;
    width:250px;
    bottom:80px;
    right:-400px;
    background:#f9f9f9;
    box-shadow: 6px -1px 16px 0 rgba(196,206,213,0.68);
    border:1px rgba(0,0,0,0.1) solid;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity:0;
    transition: right .4s, opacity 1s;
}
#whatsapp a .chat.active{
    right:0;
    opacity:1;
}
#whatsapp a .chat .title{
    background-color:#25D366;
    padding:10px;
    display:flex;
    gap:10px;
    border-bottom:5px #f9f9f9 solid;
}
#whatsapp a .chat .title img{
    width:40px;
    height:40px;
    border-radius: 50%;
    border:3px #116831 solid;
    -moz-box-sizing: border-box;
}
#whatsapp a .chat .title > div{
    display:flex;
    flex-direction: column;
}
#whatsapp a .chat .title > div strong{
    font-size:16px;
    line-height: 18px;
    color:#fff;
}
#whatsapp a .chat .title > div small{
    font-size:11px;
    line-height: 18px;
    color:#116831;
}
#whatsapp a .chat .messages{
    padding:2px 6px;
    background-color: #f9f9f9;
    height:auto;
    max-height:124px;
    overflow-y: scroll;
    display:flex;
    flex-direction: column;
    align-items: end;
    gap:4px;
}
#whatsapp a .chat .messages span{
    background:#fff;
    padding:10px;
    font-size:15px;
    line-height: 20px;
    max-width:80%;
    border-radius: 5px;
    border-bottom-right-radius: 0;
}
#whatsapp a .chat .send{
    padding:5px;
    display: flex;
    justify-content: space-between;
    background:#fff;
    border-top:15px #f9f9f9 solid;
}
#whatsapp a .chat .send input{
    height:30px;
    line-height: 30px;
    border:none;
    border-radius: 15px;
    width:76%;
    background-color: #e9e9e9;
    padding:0 10px;
}
#whatsapp a .chat .send span{
    height:30px;
    line-height: 30px;
    width:30px;
    text-align: center;
    background-color:#116831;
    color:#fff;
    border-radius: 50%;
}
#whatsapp .yaziyor{
    position:absolute;
    height:20px;

    width:50px;
    right:10px;
    bottom:40px;
    display:flex;
    justify-content: end;
    align-items: center;
    gap:2px;
}
#whatsapp .yaziyor span{
    display:block;
    width:7px;
    height:7px;
    background:#c9c9c9;
    border-radius: 50%;
    animation: scrolldown-anim 1.5s infinite;
}
#whatsapp .yaziyor span:nth-child(2){
    animation-delay: 0.5s;
}
#whatsapp .yaziyor span:nth-child(3){
    animation-delay: 1s;
}
@keyframes scrolldown-anim {
    0% {
        margin-top:0px;
    }
    40% {
        margin-top:-12px;
    }
    80% {
        margin-top:0;
    }
    100% {
        margin-top:0;
    }
}
#whatsapp #closechat{
    position:absolute;
    right:4px;
    top:4px;
    border-radius: 5px;
    font-size:14px;
    width:30px;
    height:30px;
    line-height: 30px;
    text-align: center;
}
.teklif{
    width:100%;
    display: flex;
    gap:1%;
    flex-direction: column;
    overflow: hidden;
}
.teklif h3 {
    font-weight: 900;
    font-size: 20px;
    line-height: 30px;
    color: var(--text-color);
    margin:10px 0;
}
.teklif span,
.teklif small{
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    font-family: "Poppins",Arial,sans-serif;
    color: #333;
    margin-bottom:10px;
}
.teklif small{
    font-size:14px;
    line-height: 20px;
}
.teklif textarea{
    width:100%;
    min-width:100%;
    max-width:100%;
    min-height:120px;
    padding:12px;
    box-sizing: border-box;
    border:1px #f1f1f1 solid;
    background-color: #fafafa;
    margin:20px 0;
}
.teklif input[type="text"]{
    width:100%;
    padding:0 12px;
    height:50px;
    line-height: 50px;
    box-sizing: border-box;
    border:1px #f1f1f1 solid;
    background-color: #fafafa;
    margin-bottom:10px;
}
.teklif .btn{
    height:50px;
    line-height: 50px;
    margin-top:20px;
    cursor: pointer;
}
.teklif ul{
    margin-bottom:20px;
}
.teklif ul li input{
    display:none;
}
.teklif ul li label{
    display:block;
    width:100%;
    border:1px #f1f1f1 solid;
    background:#fafafa;
    line-height: 50px;
    margin:2px 0;
    padding:0 10px;
    box-sizing: border-box;
    cursor:pointer;
}
.teklif ul li input:checked + label{
    background-color: var(--primary-color);
    color:#fff;
}
.teklif .detay{
    display:none;
}
.teklif .detay ul{
    display:none;
}
.ucretsiz{
    display: flex;
    justify-content: space-between;
    width:100%;
    align-items: center;
}
.ucretsiz form{
    width:50%;
}
.ucretsiz img{
    max-width:45%;
    height:auto;
}
.ozel{
    width:100%;
}
#ozelyazilim{
    width:100%;
}
#ozelyazilim strong{
    line-height:40px;
    font-size:18px;
    display: block;
    text-align: center;
}
#ozelyazilim > span{
    line-height:40px;
    font-size:16px;
    display: block;
    text-align: center;
}
#ozelyazilim > div{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:8px;
    margin-bottom: 10px;
}
#ozelyazilim > div label{
    font-size: 16px;
    line-height: 32px;
    padding:0 8px;
    background: #CFD8DC;
    cursor: pointer;
}
#ozelyazilim > div input{
    display:none;
}
#ozelyazilim > div input:checked + label{
    background: #C8E6C9;
}
#result{
    font-size:24px;
    line-height:60px;
    font-weight:bold;
    text-align: center;
}
#result span{
    color:#2E7D32;
}
.ozel-tasarim{
    flex-direction: row;
    justify-content: space-between;
    gap:10px;
}
.ozel-tasarim > img{
    width:450px;
    height:360px;
}
.ozel-tasarim > div{
    padding: 50px 0;
}
.ozel-tasarim h1{
    font-weight: 900;
    font-size: 24px;
    line-height: 30px;
    color: var(--primary-color);
}
.ozel-tasarim h2 {
    margin-top: 2px;
    font-size: 16px;
    line-height: 20px;
    height: auto;
    color: #555;
    margin-bottom:30px;
}
.ozel-tasarim h3{
    font-weight: 900;
    font-size: 20px;
    line-height: 30px;
    color: var(--text-color);
}
.ozel-tasarim .price{
    font-weight: 700;
    font-size: 24px;
    line-height: 40px;
    color: var(--primary-color);
}
.ozel-tasarim .buttons{
    display:flex;
    justify-content: start;
    gap:6px;
    margin:6px 0 36px;
}
.referans{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
}
.referans span{
    display:block;
    border:1px #f1f1f1 solid;
    background-color:#fafafa;
    cursor:pointer;
}
.referans img{
    width:285px;
    height:150px;
}
.referans.diger img{
    width:95px;
    height:auto;
}
.referans .reference-name{
    font-weight: 800;
    font-size: 16px;
    line-height: 24px;
    color: #444;
    text-align: center;
    margin:10px 0;
}
.referanspage h3{
    font-weight: 900;
    font-size: 20px;
    line-height: 30px;
    color: var(--text-color);
    text-align: center;
    margin:30px 0;
}
.hosting-list {
    --primary-color: #6366f1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    user-select: none;
}

.hosting-list .item {
    background: var(--surface);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border);
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow:
            0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hosting-list .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hosting-list .item:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow:
            0 20px 25px -5px rgba(0, 0, 0, 0.2),
            0 10px 10px -5px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(99, 102, 241, 0.1),
            0 0 20px rgba(99, 102, 241, 0.2);
}

.hosting-list .item:hover::before {
    opacity: 1;
}

.hosting-list .item:nth-child(2) {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
    border-color: var(--primary-color);
    position: relative;
}

.hosting-list .item:nth-child(2)::before {
    opacity: 1;
}

.hosting-list .item:nth-child(2)::after {
    content: 'POPÜLER';
    position: absolute;
    top: 1rem;
    right: -0.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    transform: rotate(2deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.hosting-list .item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-align: center;
}

.hosting-list .item strong {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.hosting-list .item strong sup {
    font-size: 1rem;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}

.hosting-list .item small {
    display: block;
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size:14px;
}

.hosting-list .addhost {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    text-decoration: none;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.hosting-list .addhost::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.hosting-list .addhost:hover::before {
    left: 100%;
}

.hosting-list .addhost:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.hosting-list .item > span {
    display: block;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-style: italic;
    padding: 0 1rem;
    line-height: 1.2em;
}

.hosting-list .item ul {
    list-style: none;
}

.hosting-list .item li {
    padding: 1rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 2rem;
    transition: all 0.2s ease;
}

.hosting-list .item li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    font-weight: bold;
    font-size: 1.1rem;
    width: 20px;
    height: 20px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.hosting-list .item li:hover {
    color: var(--text-primary);
    padding-left: 2.5rem;
}

.hosting-list .border-color-transparent-dark-very-light {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.hosting-list .border-bottom {
    border-bottom: none !important;
}

@media (max-width: 768px) {
    .hosting-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .hosting-list .item {
        padding: 1.5rem;
    }

    .hosting-list .item:nth-child(2) {
        transform: none;
    }

    .hosting-list .item strong {
        font-size: 2.5rem;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hosting-list .item {
    animation: fadeInUp 0.6s ease forwards;
}

.hosting-list .item:nth-child(1) { animation-delay: 0.1s; }
.hosting-list .item:nth-child(2) { animation-delay: 0.2s; }
.hosting-list .item:nth-child(3) { animation-delay: 0.3s; }
@media screen and (max-width: 1200px) {
    .container{
        width:800px;
    }
    header .topbar .container ul.topmenu li.removable{
        display:none;
    }
    header .topbar li.deremovable{
        display: block;
    }
    .main .slider img{
        display:none;
    }
    .main .slider .text{
        left:10px;
    }
    .main .slider span{
        left:10px;
        right:10px;
        width:calc(100% - 20px);
    }
    .main .slider .text h2,
    .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-reverse;
    }
    .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:163px;
    }
    .main section.desc img,
    .main section.haber img{
        display: none;
    }
    a.whatsapp{
        left:20px;
        bottom:20px;
    }
    a.whatsapp img{
        width:60px;
        height:auto;
    }
    .main.product .container.product-ozellikler > div{
        flex-direction: column !important;
    }
    .main.product .container.product-ozellikler > div img{
        max-width:98%;
        height: auto;
    }
    .main.product .container.packages .price span{
        font-size: 32px;
    }
    .main.product .container.packages .price span em{
        transform: rotate(0);
        top:-28px;
        width: 120px;
        height: unset;
        line-height: 20px;
        border-radius: 0;
        background-color: #fff;
        color:#111;
    }
}
@media screen and (max-width: 820px) {
    .container{
        width:94%;
        margin:0 3%;
    }
    header .topbar li.removable2{
        display:none;
    }
    header .topbar li.deremovable2{
        display: block;
    }
    header .topbar .container ul.topmenu{
        justify-content: end;
    }
    header .menu{
        display:none;
    }
    header .logo .basket.mobil,
    header .logo .mobilmenu{
        display:block;
    }

    .main .slider{
        height:300px;
    }
    .main .slider .text{
        top:60px;
    }
    .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 - 90px) / 2);
    }
    .kurumsal .items{
        flex-direction: column;
    }
    .kurumsal .items div{
        width:100%;
    }
    .ozel-tasarim{
        flex-direction: column-reverse;
    }
    .ozel-tasarim > img{
        max-width: 100%;
        height: auto;
        margin:0 auto;
    }
    .ucretsiz img{
        display:none;
    }
    .ucretsiz form{
        width:100%;
    }
    .main.product .container.packages{
        width:98vw;
        /*overflow-y: scroll;*/
        margin:0 auto;
    }
    .main.product .container.packages > div{
        width:100%;
        flex-wrap: wrap;
    }
    .main.product .container.packages span{
        width:50%;
        box-sizing: border-box;
    }
    /*.main.product .container.packages span:nth-child(2){
        display:none;
    }*/
    .main.product .container.packages .title span:nth-child(1),
    .main.product .container.packages .price span:nth-child(1){
        display:none;
    }
    .main.product .container.packages span:nth-child(1){
        width:100%;
        text-align:center;
        background-color:#f5f5f5;
    }
    .main.product .container.packages .ozellik:nth-child(2n){
        background-color: transparent;
    }
    .main.product .container.title{
        height:auto;
    }
}
@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%;
    }
    .main .slider .text h2, .main .slider .text strong{
        font-size: 18px;
    }
    .main .slider span{
        font-size:14px;
        line-height: 20px;
    }

}
@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 input:checked + label mark small{
        font-size:15px;
    }
    .main.product .container.detail .buy label mark.discount{
        padding:10px 2px;
        font-size:24px;
    }
    .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 select,
    .main .login form textarea,
    .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';
    }
    .main section.haber ul li{
        width:100%;
    }
    .main .slider a{
        top:180px;
    }
    .main.product .container.detail .buy .demoarea a div strong{
        font-size:18px;
    }
    .main.product .container.detail .buy .demoarea a div span{
        font-size: 14px;
    }
    .main.product .container.detail .buy .demoarea a img{
        margin:21.5px 8.5px;
    }
    #cookie{
        left:2vw;
        right:30vw;
        width:68vw;
    }
}
@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;
    }
    .ozel-tasarim .buttons{
        flex-direction: column;
    }
}

.indirim{
    margin-top:50px;
    display:flex;
    flex-direction: column;
    gap:4px;
    align-items: center;
}
.indirim .flipdown {
    margin: auto;
}

.indirim strong {
    font-weight: 900;
    font-size: 30px;
    line-height: 48px;
    color: var(--primary-color);
    text-align: center;
}

.indirim p {
    margin-top: 2px;
    font-size: 16px;
    line-height: 20px;
    height: 20px;
    color: #555;
}

.odeme{
    gap:10px;
}
.odeme .eft{
    display:none;
    gap:2px;
    width:500px;
    max-width:96vw;
    margin:4px auto;
    border:1px #e9e9e9 solid;
    background: #f9f9f9;
}
.odeme .eft span{
    position: relative;
    padding:10px;
}
.odeme .eft span i{
    position:absolute;
    right:2px;
    top:2px;
    background-color:#e9e9e9;
    min-width:32px;
    line-height: 32px;
    border:1px #e1e1e1 solid;
    text-align:center;
    cursor:pointer;
    border-radius: 3px;
    color:#999;
}

.odeme .paymentmethods{
    margin:40px 0;
    display:flex;
    justify-content: center;
    gap:20px;
}
.odeme .paymentmethods a{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:4px;
    padding:50px 20px;
    border:1px #e9e9e9 solid;
    background-color:#f9f9f9;
    color:#555;
    font-size:16px;
    line-height: 18px;
    min-width:150px;
    max-width:40vw;
    transition: background-color .3s;
}
.odeme .paymentmethods a:hover{
    background-color:#eaeaea;
}
.odeme .paymentmethods a i{
    font-size:48px;
    line-height:48px;
}
.odemebildirimialindi{
    display:flex;
    margin:50px 0;
    flex-direction: column;
    gap:12px;
    align-items: center;
}
@media(max-width: 550px) {

    .indirim strong {
        font-size: 2.5em;
    }

    .indirim p {
        margin-bottom: 25px;
    }
}
.content.kredi .paketler{
    display:flex;
    flex-wrap: wrap;
    gap:10px;
    margin:10px 0;
}
.content.kredi .paketler .paket{
    width:calc((100% - 30px) / 4);
    display:flex;
    flex-direction: column;
    padding: 10px;
    gap:8px;
    text-align: center;
    box-sizing: border-box;
    border:1px #e9e9e9 solid;
}
.content.kredi .paketler .paket strong{
    font-size:24px;
    line-height: 32px;
}
.content.kredi .paketler .paket span{
    position: relative;
    font-size:18px;
    line-height:24px;
    font-weight: bold;
    color:#D32F2F;
    padding-top:10px;
}
.content.kredi .paketler .paket span small{
    position: absolute;
    top:0;
    left:0;
    right:0;
    font-size:14px;
    line-height:14px;
    text-decoration: line-through;
    color:#333;
    font-weight: normal;
}
.content.kredi .paketler .paket mark{
    background-color: transparent;
}
.invalid-feedback{
    margin:10px 0;
    color:red;
}
.change-hosting{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin:10px 0;
    border: 1px #e9e9e9 solid;
    background-color: #f9f9f9;
    padding: 10px;
}
.change-hosting span{
    display:flex;
    align-items: center;
    justify-content: space-between;
}