@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap');

/* CSS Document */
html {scroll-behavior: smooth;}
body {font-family: 'Nunito', sans-serif; background-color: #f7f8fe;}

::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#13216a}

.btn.focus, .btn:focus, .form-control:focus, button:focus  { box-shadow: none; outline:0;}

a, img, i, div, input, button, ::after, ::before, li {transition: all 0.5s!important;}

a {color: #3e3d3e;}
i {color: #fff;}

a:hover, img:hover, i:hover, div:hover, input:hover, button:hover, li:hover {transition: all 0.5s!important; text-decoration: none;}

i:hover { transform: scale(1.2); }

.btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active { background: linear-gradient(90deg, rgb(45, 123, 190), rgb(92, 199, 216)); }

p{font-size: 12px; color:#212529!important;}

h1, h2, h3, h4, h5, h6 {font-weight: 800;}

.card {border:none; background-color: inherit;}

hr { margin-top: 3rem; margin-bottom: 3rem; }
ul { margin: 0; padding: 0; list-style: none; color: #212529;}
.gradient-btn {
    background: linear-gradient(90deg, rgb(45, 123, 190), rgb(92, 199, 216)); 
    color: #fff!important;
    text-align: center;
    border-radius: 30px;
    border: 0;
}

.gradient-btn:hover, .navbar-toggler:hover  {
    -webkit-box-shadow: 0px 0px 7px 1px rgb(57, 143, 197);
    box-shadow: 0px 0px 7px 1px rgb(57, 143, 197);
}
.gradient-yazi {
    background-color: rgb(92, 199, 216);
    background: -webkit-linear-gradient(0,rgb(48, 121, 183) 0%,rgb(92, 198, 216) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cerez-sozlesme {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2000;
    background: url(../images/bg/sizi-arayalim-bg.png) no-repeat center;
    background-size: cover;
    width: 100%;
    padding: 20px 30px;
}
.cerez-sozlesme p, .cerez-sozlesme p a {
    color: #fff!important;
    padding-top: 10px;
}
.cerez-sozlesme p a { text-decoration: underline;}
.cerez-sozlesme .btn-sozlesme {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #fff;
    border-radius: 50px;
    font-weight: 700;
	font-size: 12px;
    color: #2771b5!important;
    text-decoration: none;
}
.renk1-bg {background-color: #3182c1!important;}
.renk1-text {color: #3182c1!important;}
.renk2-bg {background-color: #00c9da!important;}
.renk2-text {color: #00c9da!important;}

/********** ANIMATED ***********/
@-webkit-keyframes bounce{20%,53%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{20%,53%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}
.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; }

@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn;}

@-webkit-keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; }

@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@-webkit-keyframes fadeIninfinit{0%{opacity:0}50%{opacity:1}100%{opacity: 0;}}@keyframes fadeIninfinit{0%{opacity:0}50%{opacity:1}100%{opacity: 0;}}
@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

@-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

.tada { -webkit-animation-name: tada; animation-name: tada; }

@-webkit-keyframes rotateIn{0%{left:0;top:0}25%{left:20px}50%{left:50px;top:20px}75%{left:20px}100%{left:0;top:0}}@keyframes rotateIn{0%{left:0;top:0}25%{left:20px}50%{left:50px;top:20px}75%{left:20px}100%{left:0;top:0}}

.rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; }
@-webkit-keyframes border{0%{border-color:#f6faff}20%{border-top-color:#e8eff7}40%{border-right-color:#e8eff7}60%{border-bottom-color:#e8eff7}80%{border-left-color:#e8eff7}100%{border-color:#e8eff7}}@keyframes border{0%{border-color:#f6faff}20%{border-top-color:#e8eff7}40%{border-right-color:#e8eff7}60%{border-bottom-color:#e8eff7}80%{border-left-color:#e8eff7}100%{border-color:#e8eff7}}

@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

@media (print),
(prefers-reduced-motion:reduce) {
    .animated {
        -webkit-animation-duration: 1ms!important;
        animation-duration: 1ms!important;
        -webkit-transition-duration: 1ms!important;
        transition-duration: 1ms!important;
        -webkit-animation-iteration-count: 1!important;
        animation-iteration-count: 1!important
    }
}

.navbar-expand-lg .navbar-nav,
.show > .navbar-nav > .nav-item > .nav-link,
.sloganBaslik,
.sloganYazi,
.abonelik .form-group,
.login,
.menu,
.active .kutu,
.modem, img.iko1,img.iko2,img.iko3,img.iko4,img.iko5,img.iko6,img.iko7,img.iko8,img.iko9,img.iko10,img.iko11,img.iko12,img.iko13,
.sag-kanat, .sol-kanat, .noktalar,
.internet-paylasim.active .numarali-slider,
.dropdown-menu.show, .nokta,
section.nasil-calisiyor iframe,
.cerez-sozlesme,
.kurumsal-git,
.sol-resim, .sag-resim{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }


/********** animasyon name ***********/
.abonelik .form-group,
.login,
.menu,
.nasil-calisiyor.active .modem,
.nasil-calisiyor.active img.iko1,
.nasil-calisiyor.active img.iko2,
.nasil-calisiyor.active img.iko3,
.nasil-calisiyor.active img.iko4,
.nasil-calisiyor.active img.iko5,
.nasil-calisiyor.active img.iko6,
.nasil-calisiyor.active img.iko7,
.nasil-calisiyor.active img.iko8,
.nasil-calisiyor.active img.iko9,
.nasil-calisiyor.active img.iko10,
.nasil-calisiyor.active img.iko11,
.nasil-calisiyor.active img.iko12,
.nasil-calisiyor.active img.iko13,
section.nasil-calisiyor iframe,
.kurumsal-git{ -webkit-animation-name: bounceIn; animation-name: bounceIn; }

.yatay .tablet-dash .tab-pane .cihaz-bg,
.internet-paylasim.active .numarali-slider,
.dropdown-menu.show { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

.sag-kanat, .sol-kanat { -webkit-animation-name: fadeIninfinit; animation-name: fadeIninfinit; /*infinite kısmına da ekleme yap*/}

.navbar-expand-lg .navbar-nav,
.sloganBaslik,
.sloganYazi,
.nokta { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

.show > .navbar-nav > .nav-item > .nav-link,
.active .kutu,
.panel-ekran.active .list-group-item,
.owl-item.active .sol-resim{ -webkit-animation-name: fadeInLeft;  animation-name: fadeInLeft; }

.mobil-dash .owl-item.active .card .cihaz-bg, .owl-item.active .sag-resim { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
.cerez-sozlesme{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

.noktalar { -webkit-animation-name: rotateIn; animation-name: rotateIn; }

/********** animasyonun süresi ***********/
.active .kutu,
.panel-ekran.active .list-group-item:nth-child(1),
.dropdown-menu.show { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; }

.kutu:nth-child(1),
.mobil-dash .owl-item.active .card .cihaz-bg,
.yatay .tablet-dash .tab-pane .cihaz-bg { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; }

.navbar-expand-lg .navbar-nav,
.login,
.kutu:nth-child(2),
.panel-ekran.active .list-group-item:nth-child(2),
.nasil-calisiyor.active .modem { -webkit-animation-duration: 1s; animation-duration: 1s; }

.sloganBaslik,
.sloganYazi,
.abonelik .form-group,
.menu,
.kutu:nth-child(3),
.panel-ekran.active .list-group-item:nth-child(3) { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

.kutu:nth-child(4),
.panel-ekran.active .list-group-item:nth-child(4) { -webkit-animation-duration: 2s; animation-duration: 2s; }

.kutu:nth-child(5),
.panel-ekran.active .list-group-item:nth-child(5) { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; }

.panel-ekran.active .list-group-item:nth-child(6) { -webkit-animation-duration: 3s;   animation-duration: 3s; }

.noktalar{ -webkit-animation-duration: 5s; animation-duration: 5s;}

.sag-kanat, .sol-kanat { -webkit-animation-duration: 6.5s; animation-duration: 6.5s;}


/********** animasyon gecikme süresi ***********/
.login, img.iko1  { -webkit-animation-delay: 1s; animation-delay: 1s; }

img.iko2, img.iko3{ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

img.iko4, img.iko5{ -webkit-animation-delay: 2s; animation-delay: 2s; }

img.iko6, img.iko11 { -webkit-animation-delay: 2.5s;   animation-delay: 2.5s; }

img.iko8, img.iko13 { -webkit-animation-delay: 3s;   animation-delay: 3s;}

img.iko9,img.iko7 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s;}

img.iko12, img.iko10 { -webkit-animation-delay: 4s;   animation-delay:4s;}

/********** animasyon sonsuzluk ***********/
.sag-kanat, .sol-kanat, .noktalar, .nokta{ -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }



/********** ANIMATED ***********/
.container-wifi { margin: 0 auto;}
.container-wifi > .row { margin: 0;}
header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1050;
}
.navbar-brand {
    width: 70%;
    z-index: 52;
}
.navbar-collapse {
    background-color: #f7f8fe;
    padding: 0 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding-top: 100px;
    opacity: 0;
    z-index: 51;
}
.navbar-collapse.show {
    opacity: 1;
    z-index: 51;
    overflow-x: scroll;
}
.navbar-nav .nav-link {
    font-weight: 800;
}
.navbar-toggler {
    background: linear-gradient(90deg, rgb(45, 123, 190), rgb(92, 199, 216));
    border-radius: 50%;
    padding: 12px 14px;
    border: 0;
    z-index: 52;
}
.navbar-nav > .nav-item > .nav-link:hover, .navbar-nav > .show > .nav-link{
    background-color: rgb(92, 199, 216);
    background: -webkit-linear-gradient(0,rgb(48, 121, 183) 0%,rgb(92, 198, 216) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login.show {
    display: block;
}
.login { 
    position: absolute;
    z-index: 52;
    top: 80vh;
    right: 0;
    padding: 0 10px;
    width: 100%;
    display: none;
}
.login li {    
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    
}
.login .loginlink { 
    display: block;
    width: 100%;    
    padding: 12px;
    text-align: center;
}
.nav-item > .loginlink.gradient-yazi { font-weight: 900; }
.nav-item > .loginlink.gradient-btn img {margin-right: 10px;}
.nav-item:last-child { padding: 10px 0;}
.nav-item > .loginlink.gradient-btn { padding: 10px;}

.giris-sabit{
    position: relative;
    width: 100%;
    height: 100vh;
}
.giris {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 50;
    padding-top: 100px;
}

.giris .slogan {
	padding-top: 50px;
}
.giris .sloganBaslik {
    text-align: center;
    font-size: 1.5em;
    color: #484748;
}

.giris .sloganYazi {
    display: block;
    text-align: center;
    font-size: 12px;
}
.abonelik {
    position: relative;
    z-index: 50;
    width: 90%;
    margin: 0 auto;
}
.abonelik .form-group {
    margin-top: 20px;
    border-radius: 30px;
    background-color: #fff;
    padding: 5px!important;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #fff;
    -webkit-box-shadow: 0px 26px 36px 0px rgba(43, 83, 118, 0.1);
    box-shadow: 0px 26px 36px 0px rgba(43, 83, 118, 0.1);
}

.abonelik .form-group:hover {
    border:1px solid #e0e0e0;
}

.abonelik .form-group input {
    width: 60%;
    float: left;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    color: #383838;
    font-weight: 600;
}
.abonelik .form-group button {
    width: 40%;
    font-size: 12px;
    padding: 15px;
}

.hareketli {width: 100%;}

.hareketli .sol-kanat, .hareketli .sag-kanat {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 50vh;
    display: block;
    position: absolute;
}

.hareketli .sol-kanat {
    background-image: url(../images/sol-kanat.png);
    background-position: left;
    left: 0;
    bottom:0;
}
.hareketli .sag-kanat {
    background-image: url(../images/sag-kanat.png);
    background-position: right;
    right: 0;
    top: 0;
}

.owl-carousel .hareketli .noktalar {
    background-size: contain!important;
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.owl-carousel .hareketli .sag-resim {
    display: none;
    width: 50%;
    position: absolute;
    bottom: 5%;
    right: 0;
    -webkit-animation-delay: .5s;
    animation-delay: .5 s;
}
.owl-carousel .hareketli .sol-resim {
    width: 70%;
    display: block;
    position: absolute;
    left: 10px;
    bottom: 5%;
    z-index: 9;
}
.kurumsal-git {
    display: none;
    position: absolute;
    background: linear-gradient(90deg, rgb(45, 123, 190), rgb(92, 199, 216));
    width: 34px;
    height: 50px;
    border-radius: 20px;
    padding: 3px;
    margin: 0 auto;
    bottom: 20px;
    left: 50%;
    z-index: 10;
}
#scrollGit {
    cursor: pointer;
    display: block;
    background-color: #f4f8ff;
    height: 44px;
    border-radius: 20px;
}
.kurumsal-git a i {
    border: 1px solid #fff;
    height: 45px;
    width: 30px;
    border-radius: 20px;
    background: #fff;
}
.kurumsal-git a .nokta {
    display: block;
    position: absolute;
    width: 4px;
    height: 8px;
    left: 47.5%;
    top: 10px;
    background: linear-gradient(90deg, rgb(45, 123, 190), rgb(92, 199, 216));
    border-radius: 5px;
    
}

main {
    background: url(../images/bg/wifi-bg.png) no-repeat;
    background-position-y: -222px;
    padding-left: 10px;
    padding-right: 10px;
}
/******************* Section Wifi *****************/
main section.wifi {
    padding: 50px 0;
}

section.wifi .card {
    margin: 10px 0;
}
section.wifi .card-body {
    padding: 10px 0;
}
section.wifi .kutu {
    border-radius: 10px;
    padding: 20px;
}
section.wifi .kutu:hover {
    background-color: #fff;
    -webkit-box-shadow: 20px 20px 40px 0px rgba(43, 83, 118, 0.15);
    box-shadow: 20px 20px 40px 0px rgba(43, 83, 118, 0.15);
}
section.wifi .kutu:hover img{
    -webkit-filter: hue-rotate(330deg); /* Safari 6.0 - 9.0 */
    filter: hue-rotate(330deg);
}
section.wifi .kutu:hover .card-title  { 
    color: #00c9da;
}
section.wifi .kutu:hover .card-text { 
    color: #484748;
}

section.wifi .wifi-paralax {
    display: none;
}
/******************* Section Wifi *****************/


/******************* Section panel-ekran *****************/
main section.panel-ekran {
    padding: 100px 15px 15px 15px;
    background: url(../images/bg/ekranlar-bg.png) no-repeat top;
}
section.panel-ekran .mobil-dash .card .cihaz-bg {
    position: relative;
    background-size: contain!important;
    width: 90%;
    height: 50vh;
    margin: 0 auto;
    
}

.owl-carousel .owl-item .cihaz-bg > img { 
    position: absolute;
    width: 44%;
    top: 50%;
    left: 49.8%;
    transform: translate(-48%, -45%);
}
section.panel-ekran .mobil-dash .owl-nav .owl-prev {position: absolute; top: 50%;}
section.panel-ekran .mobil-dash .owl-nav .owl-next {position: absolute; top: 50%;right: 0;}
main section.panel-ekran .yatay {display: none;}
/******************* Section panel-ekran *****************/

/******************* Section Video *****************/

/******************* Section Video *****************/

/******************* Section Nasıl Çalışıyor *****************/
main section.nasil-calisiyor {
    background: #edf3fc;
    background-size: cover;
    padding-top: 100px;
    background-position-y: 50px;
    position: relative;
	height: 100vh;
}
section.nasil-calisiyor .modem { 
    display: block;
    width: 80%;
	bottom: 10%;
	position: absolute;
}
section.nasil-calisiyor iframe { 
    display: none;
    border: 10px solid #3588c3;
    border-radius: 50px;
}
.kurulum-video{
    margin-top: 300px;
    z-index: 1;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-pack: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

img.iko1,img.iko2,img.iko3,img.iko4,img.iko5,img.iko6,img.iko7,img.iko8,img.iko9,img.iko10,img.iko11,img.iko12,img.iko13 {
    position: absolute;
    cursor: pointer;
    z-index: 0;
}
img.iko1:hover,
img.iko2:hover,
img.iko3:hover,
img.iko4:hover,
img.iko5:hover,
img.iko6:hover,
img.iko7:hover,
img.iko8:hover,
img.iko9:hover,
img.iko10:hover,
img.iko11:hover,
img.iko12:hover,
img.iko13:hover {
   -webkit-animation-name: tada!important; animation-name: tada!important;
   -webkit-animation-delay: .1s!important; animation-delay: .1s!important;
}
img.iko1{ top: 33%; left: 42%; }
img.iko2{ top: 38%; left: 23%; }
img.iko3{ top: 33%; left: 7%;  }
img.iko4{ top: 37%; left: 65%; }
img.iko5{ top: 49%; left: 7%;  }
img.iko6{ top: 49%; left: 77%; }
img.iko7{ top: 49%; left: 36%; }
img.iko8{ top: 30%; left: 77%; }
img.iko9  { display: none; } 
img.iko10 { display: none; } 
img.iko11 { display: none; } 
img.iko12 { display: none; }  
img.iko13 { display: none; } 

/******************* Section Nasıl Çalışıyor *****************/

/******************* Section İnterenet Paylaşımı *****************/
main section.internet-paylasim {
    padding: 50px 0 15px 0;
    background-color: #f4f8fd;
}
section.internet-paylasim .numarali-slider {
    padding: 20px 10px;
    border-radius: 20px;
    background-color: #fff;
    background-image: url(../images/bg/slayt-bg.png);
    background-repeat: repeat;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
.numarali-slider button.owl-dot {
    border-radius: 50%;
    background-color: #eff6ff;
    color: #2c7abe;
    padding: 8px 15px !important;
    margin: 5px;
}

.numarali-slider button.owl-dot:hover, .numarali-slider button.owl-dot.active { 
    background: linear-gradient(90deg, rgb(45, 123, 190), rgb(92, 199, 216));
    color: #fff;
    
}
/******************* Section İnterenet Paylaşımı *****************/


/******************* Section referanslar *****************/
main .referanslar {
    background-color: #f4f8fd;
}/******************* Section referanslar *****************/
main .referanslar .owl-stage-outer {
    padding: 20px 0;
}
.referanslar .ref { text-align: center;}
.referanslar .ref:hover {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 7px 15px 0px rgba(0, 0, 0, 0.23);
}
.referanslar .ref img { filter: grayscale(1);}
.referanslar .ref:hover img { filter: grayscale(0);}

.refmuset .owl-nav {
    text-align: right;
}

.refmuset .owl-nav button{
    margin: 0 10px;
}

/******************* Section referanslar *****************/

/******************* Section Sektörler *****************/
main section.sektorler {
    padding: 50px 0 15px 0;
    margin-top: -1rem;
    background-color: #f4f8fd;
}

section.sektorler .sektor .metin {
    color: #fff;
    position: absolute;
    top: 5%;
    left: 5%;
    padding: 0;
}

section.sektorler .sektor .metin p {
    display: none;
}
.sag .metin h4 {
    font-size: 12px;
}
.sektor .card {
    margin-bottom: 1rem;
    padding: 0;
    padding-right: 5px;
}
section.sektorler .sektor .card img { border-radius: 10px;}
section.sektorler .sektor .card img:hover { 
    -webkit-box-shadow: 5px 7px 15px 0px rgba(0, 0, 0, 0.23);
    box-shadow: 5px 7px 15px 0px rgba(0, 0, 0, 0.23);
}
section.sektorler .sektor .card:hover .metin { transform: translateX(10px); }
.sektor .sektorResim { width: 100%; padding: 0;}
.owl-carousel.sektor .owl-nav button.owl-next,
.owl-carousel.sektor .owl-nav button.owl-prev {
    background: #eff6ff;
    border: 5px solid #e4ebf4;
    padding: 10px!important;
    margin: 5px;
    border-radius: 50%;
}
.owl-carousel.sektor .owl-nav button.owl-next span img,
.owl-carousel.sektor .owl-nav button.owl-prev span img {
    opacity: 0.2;
}
.owl-carousel.sektor .owl-nav button.owl-next:hover,
.owl-carousel.sektor .owl-nav button.owl-prev:hover {
    background: #fff;
    border: 5px solid #fff;    
    -webkit-box-shadow: 5px 7px 15px 0px rgba(0, 0, 0, 0.23);
    box-shadow: 5px 7px 15px 0px rgba(0, 0, 0, 0.23);
}
.owl-carousel.sektor .owl-nav button.owl-next:hover span img,
.owl-carousel.sektor .owl-nav button.owl-prev:hover span img {
    opacity: 1;
}
.sektor  .owl-nav {
    position: absolute;
    right: 0;
    top: -100%;
}
/******************* Section Sektörler *****************/

/******************* Section Sizi arayalım *****************/

main .sizi-arayalim { background-color: #f4f8fd;}
main .sizi-arayalim .row{
    color: #fff;
    background: linear-gradient(90deg, rgb(92, 199, 216), rgb(45, 123, 190)); 
    padding: 20px 0;
    border-radius: 10px;
}
main .sizi-arayalim .form-inline { 
    background-color: #fff;
    padding: 5px;
    border-radius: 40px;
    overflow: auto;
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
    
}
main .sizi-arayalim .form-inline .form-group {
    width: 40%;
    float: left;
    margin-bottom: 0;
}
main .sizi-arayalim .form-inline .form-group:nth-child(1) {
    border-right: 1px solid #cecece;
}
main .sizi-arayalim .form-inline .form-group:nth-child(3) {
    width: 90%;
    position: absolute;
    left: 5%;
    bottom: -10%;
	font-size: 12px;
}
main .sizi-arayalim .form-inline .form-group:nth-child(3) input { 
    width: 20px;
	display: inline-block;
}
main .sizi-arayalim .form-inline .form-group:nth-child(3) span { 
    width: 80%;
    color: #fff;
}
main .sizi-arayalim .form-inline .form-group:nth-child(3) span a{ 
    color: #fff;
    text-decoration: underline;
}
main .sizi-arayalim .form-inline .form-control {
    border: 0;
    width: 100%;
    height: auto!important;
    font-size: 12px;
    padding: 10px;
}
.sizi-arayalim .form-inline span.btn-yazi {display: none;}
.sizi-arayalim .gradient-btn {
    padding: 7px 15px;
}
.sizi-arayalim .siziarayalim-text {
    margin-top: 30px;
}
.sizi-arayalim .metin {font-size: 20px;}
.sizi-arayalim .metin h4 img {display: none;}
.sizi-arayalim .metin a,
.sizi-arayalim .metin p { color: #fff!important; }
.sizi-arayalim .metin  .urun-btn {
    display: none;
    background-color: #fff;
    padding: 10px 15px;
    border:1px solid #fff;
    border-radius: 50px;
    font-weight: 700;
    margin-top: 10px;
    color: #2771b5!important;
}
/******************* Section Sizi arayalım *****************/

/******************* Footer *****************/

.footer {background-color: #f4f8fd;}
.footer .container-wifi > .row:nth-child(1) {
    color: #3e3d3e;
    background: #e5f1ff; 
    border-radius: 10px;
    padding-bottom: 30px;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}

.footer .container-wifi > .row:nth-child(1) > div:nth-child(1) {
    text-align: center; 
}
.footer .container-wifi > .row > div {
    margin-top: 20px;
    margin-bottom: 20px;
}
.sosyal {
    text-align: center;
}
.sosyal .btn-floating {
    width: 37px;
    height: 37px;
    position: relative;
    z-index: 1;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    margin: 0 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0;
    border: none;
    cursor: pointer;    
    background-color: #c9d7e8;
}
.sosyal .btn-floating i {
    font-size: 1.25rem;
    line-height: 37px;
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #fff;
}
footer .footerMenu {
    margin-top: 20px;
    padding: 0;
}

footer .footerMenu li {
    list-style: none;
}
footer .footerMenu li a{ 
    display: block;
    padding: 5px;
    font-weight: 400;
    font-size: 10px;
}
footer .footerMenu li a:hover {
    transform: translateX(5px);
}
footer .footerMenu li a img {
    filter: invert(1);
    margin-right: 10px;
    width: 15px;
} 
footer .mapIlet .nav-tabs {
    border: 0;
}
footer .mapIlet .nav-tabs .nav-item .nav-link{
    border:2px solid #fff;
    border-radius: 30px;
    background-color: #fff;
    color: #3e3d3e;
    margin: 0 10px;
}
footer .mapIlet .nav-tabs .nav-item.show .nav-link,
footer .mapIlet .nav-tabs .nav-item .nav-link:hover,
footer .mapIlet .nav-tabs .nav-link.active {
    border-color: #2871b5;
    background-color: rgba(0, 0, 0, 0);
    color:#2871b5;
}
footer .mapIlet .tab-pane .map { 
    margin: 20px 0;
    overflow: hidden;
    border-radius: 30px;
}

footer .mapIlet img{ float: left;}
footer .mapIlet .adres {
    margin-top: 20px;
    padding: 0;
    margin-left: 90px;
}

footer .mapIlet .adres li { 
    list-style: none;
}

footer .mapIlet .adres li a{ 
    font-weight: 900;
}
footer .copyright {
    padding-top: 20px;
}
/******************* Footer *****************/

/******************* Detay *****************/

    /******************* Turuncu *****************/
    .turuncu,
    .turuncu h1,
    .turuncu h2,
    .turuncu h3,
    .turuncu h4,
    .turuncu h5,
    .turuncu h6 { color:#fc573b; }
    .turuncu h1.alt-cizgi::before,
    .turuncu h2.alt-cizgi::before,
    .turuncu h3.alt-cizgi::before,
    .turuncu h4.alt-cizgi::before,
    .turuncu h5.alt-cizgi::before,
    .turuncu h6.alt-cizgi::before {background-color:#fc573b;}
	section.turuncu ul li::before { background:url(../images/ikonlar/li-ikon1.png) center center!important;}
    /******************* Mor *****************/
    .mor,
    .mor h1,
    .mor h2,
    .mor h3,
    .mor h4,
    .mor h5,
    .mor h6  { color:#c16bf9; }
    .mor h1.alt-cizgi::before,
    .mor h2.alt-cizgi::before,
    .mor h3.alt-cizgi::before,
    .mor h4.alt-cizgi::before,
    .mor h5.alt-cizgi::before,
    .mor h6.alt-cizgi::before {background-color:#c16bf9;}
	section.mor ul li::before { background:url(../images/ikonlar/li-ikon2.png) center center!important;}

    /******************* Mavi *****************/
    .mavi,
    .mavi h1,
    .mavi h2,
    .mavi h3,
    .mavi h4,
    .mavi h5  { color:#307cbf; }
    .mavi h1.alt-cizgi::before,
    .mavi h2.alt-cizgi::before,
    .mavi h3.alt-cizgi::before,
    .mavi h4.alt-cizgi::before,
    .mavi h5.alt-cizgi::before,
    .mavi h6.alt-cizgi::before {background-color:#307cbf;}
	section.mavi ul li::before { background:url(../images/ikonlar/li-ikon2.png) center center!important;}

    /******************* Turkuaz *****************/
    .turkuaz,
    .turkuaz h1,
    .turkuaz h2,
    .turkuaz h3,
    .turkuaz h4,
    .turkuaz h5  { color:#5dc8d8; }
    .turkuaz h1.alt-cizgi::before,
    .turkuaz h2.alt-cizgi::before,
    .turkuaz h3.alt-cizgi::before,
    .turkuaz h4.alt-cizgi::before,
    .turkuaz h5.alt-cizgi::before,
    .turkuaz h6.alt-cizgi::before {background-color:#5dc8d8;}
	section.turkuaz ul li::before { background:url(../images/ikonlar/li-ikon2.png) center center!important;}

    /******************* Sari *****************/
    .sari,
    .sari h1,
    .sari h2,
    .sari h3,
    .sari h4,
    .sari h5  { color:#ffd200; }
    .sari h1.alt-cizgi::before,
    .sari h2.alt-cizgi::before,
    .sari h3.alt-cizgi::before,
    .sari h4.alt-cizgi::before,
    .sari h5.alt-cizgi::before,
    .sari h6.alt-cizgi::before {background-color:#ffd200;}
	section.sari ul li::before { background:url(../images/ikonlar/li-ikon2.png) center center!important;}

    /******************* Gri *****************/
    .gri,
    .gri h1,
    .gri h2,
    .gri h3,
    .gri h4,
    .gri h5  { color:#767c7d; }
    .gri h1.alt-cizgi::before,
    .gri h2.alt-cizgi::before,
    .gri h3.alt-cizgi::before,
    .gri h4.alt-cizgi::before,
    .gri h5.alt-cizgi::before,
    .gri h6.alt-cizgi::before {background-color:#767c7d;}
	/*section.detay ul li::before {filter: grayscale(1);}*/
    .gri {filter: grayscale(1);}


.ozellik-kutular{
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important; 
}

.ozellik-kutular > .ozellik-kutu {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.detay-sayfa .ozellik-kutular > .ozellik-kutu .card { text-align: center; }
/******************* Detay *****************/
main.detay-sayfa {
    background: none;
}
.girisDetay {
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 50;
    height: 100vh;
    left: 0;
}

.detay-sayfa section h2 {
    -webkit-animation-delay: .5s; animation-delay: .5s;
    -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
.detay-sayfa section p {
    -webkit-animation-delay: .75s; animation-delay: .75s;
    -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}

.detay-sayfa section .sol h2 { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
.detay-sayfa section .sag h2 { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

.detay-sayfa section .sol p { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
.detay-sayfa section .sag p { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

.detay-sayfa .navBrand {
    height: 30vh;
    position: relative;
    z-index: 1045;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-align: end!important;
    -ms-flex-align: end!important;
    align-items: flex-end!important;
}
.detay-sayfa .navBrand .ortala {
    margin: 0 auto 50px auto;
    width: 70%;
    text-align: center;
}
.detay-sayfa .navBrand .ortala a {
    margin: 0 20px;
}

.detay-sayfa section.detay {
    padding-top: 100px;
    padding-bottom: 200px; 
    background-color: rgba(255, 255, 255, 0.68);
    background-image: url(../images/bg/detay-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative;
    z-index: 1040;
}

.detay-sayfa section h2.yan-cizgi {
    padding-left: 55px;
    position: relative;
}

.detay-sayfa section h2.yan-cizgi::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 5%;
    height: 6px;
    border-radius: 5px;
    background-color: #000;
}
section.detay ul li {
	padding-left: 25px;
	position: relative;
	font-size:12px;
}
section.detay ul li::before {
	content:'';
	position: absolute;
	width: 17px;
	height: 17px;
	left: 0;
	top: 3px;
}
/******************* Detay Kurumsal *****************/



/******************* Detay Özellikler *****************/
.owl-carousel.kaydirmaNav {
    width: 100%;
	z-index: 55;
}
.kaydirmaNav .owl-item {
    margin-top: 50px;
    margin-bottom: 50px;
}
.kaydirmaNav .owl-item ul {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}
.kaydirmaNav .owl-item div {
    width: 80%;
    margin: 0 auto;
}
.kaydirmaNav .owl-item div .kaydirmaLink {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid rgb(57, 143, 197);
    padding: 5px 15px;
    font-weight: 800;
    font-size: 0.9em;
    background-color: #fff;
}
.owl-carousel .owl-item img { width: inherit; display: inline-block;}
.owl-carousel .owl-item .kaydirmaLink img{ width: 40px; }
.kaydirmaLink.turuncu { border-color: #fc573b!important; color: #fc573b!important;}
.kaydirmaLink.mor { border-color: #be63f9!important;color: #be63f9!important;}
.kaydirmaLink.turkuaz { border-color: #26c6da!important;color: #26c6da!important;}
.kaydirmaLink.sari { border-color: #ffd200!important;color: #ffd200!important;}

.kaydirmaNav .owl-item div .kaydirmaLink:hover { 
    -webkit-box-shadow: 20px 20px 40px 0px rgba(43, 83, 118, 0.15);
    box-shadow: 20px 20px 40px 0px rgba(43, 83, 118, 0.15);
}
.kaydirmaNav .owl-item div .kaydirmaLink img {
    float: left;
    margin-right: 20px
}
.kaydirmaNav .owl-nav button.owl-prev{
    position: absolute;
    top: 40%
}
.kaydirmaNav .owl-nav button.owl-next{
    position: absolute;
    right: 0;
    top: 40%
}
section.ozellikler .ozellik-ikon {
    margin-bottom: 10px;
}
.detay-sayfa section ul, .form-alt-liste {
    margin: 0;
    padding: 0;
    border:none;
    list-style: none;
    position: relative;
    z-index: 1045;
}

.detay-sayfa .abonelik{ 
    position: relative;
    z-index: 1045;
}
.detay-sayfa section ul li img,
.form-alt-liste li img,
.table tbody img { 
    margin-right: 10px;
}

.form-alt-liste li { 
    float: left;
    padding: 10px;
    width: 33.333%;
    margin: auto;
    text-align: center;
}

/******************* Detay Özellikler *****************/

/******************* Detay Kurulum *****************/
.detay.kurulum .satir1 .metin {
    text-align: center;
    width: 100%;
    margin: auto;
}

.detay-sayfa .kurulum .ozellik-kutular > .ozellik-kutu .card img { 
    margin: auto;
    width: 200px;
    height: auto;
}

.detay.kurulum  .satir2 {
    padding: 150px 0;
}

.detay.kurulum  .satir2 .video {
    position: relative;
    width: 100%;
}
.detay.kurulum .satir2 .video:before {
    content: '';
    background: url(../images/bg/iframe-before-ikon.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 500px;
    height: 400px;
    left: -50px;
    top: -100px;
    z-index: 0;
}
.detay.kurulum .satir2 .video:after {
    content: '';
    background: url(../images/bg/iframe-after-ikon.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: -200px;
    bottom: -50px;
    width: 400px;
    height: 300px;
    z-index: 0;
}
.detay.kurulum .satir2 .video iframe {
    position: relative;
    z-index: 1;
    -webkit-box-shadow: 20px 20px 40px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 20px 20px 40px 0px rgba(0, 0, 0, 0.15);
    
}

/******************* Detay Kurulum *****************/

/******************* Detay Fiyatlar *****************/
.detay.fiyatlar .satir1 .metin {
    text-align: center;
    width: 60%;
    margin: auto;
}
.ac-kapa {
    position: relative;
    width: 140px;
    height: 60px;
    border-radius: 30px;
    margin: 50px auto;
    background: -webkit-linear-gradient(left, rgb(92, 199, 216), rgb(45, 123, 190));
    background: -o-linear-gradient(left, rgb(92, 199, 216), rgb(45, 123, 190));
    background: linear-gradient(to right, rgb(92, 199, 216), rgb(45, 123, 190));
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}
.ac-kapa span:nth-child(1) {
    position: absolute;
    left: -95px;
    top: 20px;
    font-size: 14px;
}
.ac-kapa span:nth-child(2){
    display: inline-block;
    background-color: #fff;
    border-radius: 30px;
    margin: 3px;
    height: 54px;
    width: 134px;
}
.ac-kapa span:nth-child(2):before{ 
    content: '';
    position: absolute;
    left:calc(100% - 60px);
    top: 10px;
    width: 50px;
    height: 40px;
    border-radius: 30px;
    background: -webkit-linear-gradient(left, rgb(45, 123, 190), rgb(92, 199, 216));
    background: -o-linear-gradient(left, rgb(45, 123, 190), rgb(92, 199, 216));
    background: linear-gradient(to right, rgb(45, 123, 190), rgb(92, 199, 216));
}

.ac-kapa.acik span:nth-child(2):before{
    left: 10px;
}
.ac-kapa span:nth-child(3){ 
    position: absolute;
    right: -95px;
    top: 20px;
    font-size: 14px;  
}
.paketler .paket { 
    background-color: #fff;
    border-radius: 20px;
    -webkit-box-shadow: 10px 20px 40px 0px rgba(43, 83, 118, 0.15);
    box-shadow: 10px 20px 40px 0px rgba(43, 83, 118, 0.15);
    padding: 25px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    height: min-content;
}
.paketler .paket:nth-child(1) .paket-ust .card-title,
.paketler .paket:nth-child(2) .paket-ust .fty-ay,
.paketler .paket:nth-child(2) .paket-ust .fty-yil { color: #5dc8d8;}
.paketler .paket:nth-child(3) .paket-ust .card-title { color: #FD5A49;}

.paketler .paket:nth-child(1) .paket-ust .fty-ay,
.paketler .paket:nth-child(1) .paket-ust .fty-yil,
.paketler .paket:nth-child(2) .paket-ust .card-title { color: #307cbf;}
.paketler .paket:nth-child(3) .paket-ust .fty-ay,
.paketler .paket:nth-child(3) .paket-ust .fty-yil { color: #FD5A49;}

.paketler .paket:nth-child(1) .paket-ust .fty-ay .bilgi,
.paketler .paket:nth-child(1) .paket-ust .fty-yil .bilgi,
.paketler .paket:nth-child(2) .paket-ust .fty-ay .bilgi,
.paketler .paket:nth-child(2) .paket-ust .fty-yil .bilgi,
.paketler .paket:nth-child(3) .paket-ust .fty-ay .bilgi,
.paketler .paket:nth-child(3) .paket-ust .fty-yil .bilgi  { color: #495057;}

.paketler .paket:nth-child(1) .paket-ust .card-title.alt-cizgi::before { background-color: #5dc8d8;}
.paketler .paket:nth-child(1)::after {background: url(../images/ikonlar/fiyat-kart-turkuaz.png) no-repeat center;}

.paketler .paket:nth-child(3) .paket-ust .card-title.alt-cizgi::before { background-color: #FDDC98;}
.paketler .paket:nth-child(3)::after {background: url(../images/ikonlar/fiyat-kart-turuncu.png) no-repeat center;}

.paketler .paket:nth-child(2) .paket-ust .card-title.alt-cizgi::before { background-color: #307cbf;}
.paketler .paket:nth-child(2)::after {background: url(../images/ikonlar/fiyat-kart-mavi.png) no-repeat center;}


.paketler .paket:hover { 
    z-index: 3;
}
.paketler .paket::after { 
    content: '';
	background-size: contain!important;
    position: absolute;
    width: 140px;
    height: 134px;
    top: 0;
    right: 0;
    background-color: #000;
}
.paketler .paket {margin-bottom: 75px;}

.paketler .paket .fty-ay { display: none; }
.paketler .paket .fty-yil { display: block; }

.paketler .paket .fty-ay, .paketler .paket .fty-yil {
    font-size: 3em;
    font-weight: 800;
}
.paketler .paket .fty-ay > .tl, .paketler .paket .fty-yil > .tl {
    font-size: 0.4em;
    font-weight: 800;
    position: absolute;
    margin-top: 10px;
}
.paketler .paket .fty-ay > .bilgi, .paketler .paket .fty-yil > .bilgi {
    font-size: 0.4em;
    font-weight: 800;
}
.paketler .paket.acik .fty-ay { display: block; }
.paketler .paket.acik .fty-yil { display: none; }

.paketler .paket hr { margin: 10px 0;}

.paketler .paket .paket-icerik { 
    margin: 20px 0;
    font-size: 14px;
}
.paketler .paket .paket-icerik .gradient-btn {
    display: block;
    padding: 10px 15px;
}
.paketler .paket:nth-child(3) .gradient-btn {
    background: linear-gradient(45deg, rgb(253, 90, 73), rgb(253, 220, 152));
}
.paketler .paket:nth-child(3) .gradient-btn:hover {
    -webkit-box-shadow: 0px 0px 7px 1px rgb(253, 90, 73);
    box-shadow: 0px 0px 7px 1px rgb(253, 90, 73);
}
.paketler .paket .paket-icerik .form-group .form-control {
    border: 2px solid #FD5A49;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0);
    color: #3c3c3c;
}
.paketler .paket .paket-icerik .paket-liste li {
    padding-bottom: 10px;
}
.paketler .paket .paket-alt { 
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}
.paketler .paket .paket-alt .gradient-btn { 
    padding: 10px 20px;
}
.paketler .paket .paket-alt .paket-detay-btn {
    margin: 10px;
    font-weight: 900;
}

.fiyatlar .paket-ozellikleri {
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 55;
}
.paket-ozellikleri .table-responsive::before {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 74px;
    left: 0;
    z-index: 1;
    border-radius: 50px;
    background: -webkit-linear-gradient(left, rgb(242, 246, 251), rgb(222, 232, 245));
    background: -o-linear-gradient(left, rgb(242, 246, 251), rgb(222, 232, 245));
    background: linear-gradient(to right, rgb(242, 246, 251), rgb(222, 232, 245));
}
.paket-ozellikleri table {
    position: relative;
    z-index: 2;
}
.paket-ozellikleri table th {
    border-top: 0;
    border-right: 1px solid #fff;
    border-bottom: 0;
    padding: 21px;
}

.paket-ozellikleri table th h4, .paket-ozellikleri table td { font-size: 10px; }
.paket-ozellikleri .alert a{font-size: 10px; }
.paket-ozellikleri table th:last-child { 
    border-right: 0;
}
.paket-ozellikleri table tbody {
    background-color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #dee2e6;
}
.paket-ozellikleri .alert {
    border-radius: 50px;
    border:1px solid #cecece;
}
/******************* Detay Fiyatlar *****************/

/******************* Detay Detay içerik *****************/

.detay.detay-icerik h2 {
    color: #3182c1;
}
.detay.detay-icerik img {
    border-radius: 15px;
}
.detay.detay-icerik .once-sonra .once, .detay.detay-icerik .once-sonra .sonra {
    display: block;
    padding: 15px 20px;
    margin-right:10px;
    float: left;
    border-radius: 35px;
    border:2px solid #dbdcdd;
}
.detay.detay-icerik .once-sonra .once img { filter: grayscale(1); margin: 0; }
.detay.detay-icerik .once-sonra .sonra img{ filter: grayscale(1); margin: 0 0 0 10px; }
.detay.detay-icerik .once-sonra .once:hover,
.detay.detay-icerik .once-sonra .sonra:hover {
    border:2px solid #3182c1;
}
.detay.detay-icerik .once-sonra .once:hover img,
.detay.detay-icerik .once-sonra .sonra:hover img{
    filter: grayscale(0);
}
.detay.detay-icerik ul.detay-sosyal {
    position: absolute;
    left: 0;
    top: 20px;
}
.detay.detay-icerik ul.detay-sosyal li {
    float: left;
}
.detay.detay-icerik ul.detay-sosyal li a {
    width: 37px;
    height: 37px;
    position: relative;
    z-index: 1;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    margin: 5px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0;
    border: none;
    cursor: pointer; 
    background-color: #f3f3f7;
}
.detay.detay-icerik ul.detay-sosyal li a i {
    font-size: 1rem;
    line-height: 37px;
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #43414f!important;
}

.detay.detay-icerik ul.detay-sosyal li a:hover { background-color: #43414f;}
.detay.detay-icerik ul.detay-sosyal li a:hover i { color: #f3f3f7!important;}

/******************* Detay Detay içerik *****************/

/******************* Detay Yardım *****************/

.yardim .soru-dis {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important; 
    padding: 30px 40px;
    margin: 50px 0;
    border-radius: 15px;
    -webkit-box-shadow: 10px 10px 40px 0px rgba(43, 83, 118, 0.15);
    box-shadow: 10px 10px 40px 0px rgba(43, 83, 118, 0.15);
    cursor: pointer;
}
.yardim .soru-ic {
    overflow: hidden;
    height: 110px;
    width: 90%;
}
.yardim .soru-dis h3 { color: #307cbf;}
.yardim .soru-dis h3.alt-cizgi:before { background-color: #307cbf;}
.yardim .soru-dis:hover { background-color: #307cbf; transform: scale(1.1);}
.yardim .soru-dis:hover .soru-ic{ height: auto; color: #fff; }
.yardim .soru-dis:hover h3 { color: #fff;}
.yardim .soru-dis:hover h3.alt-cizgi:before { background-color: #fff;}
.yardim .soru-dis:hover p { color: #fff!important;}
.yardim .soru-dis:hover ul li { color: #fff!important;}
.yardim .soru-dis:hover .yardim-btn {filter: invert(0);}
.yardim .soru-dis .yardim-btn {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: invert(1);
    transform: rotate(90deg);
}
.yardim .nav-tabs .nav-link {
    padding: 10px 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    border: 2px solid #dbdcdd; 
    border-radius: 25px;  
    font-weight: 900; 
}

.yardim .nav-tabs .nav-item.show .nav-link,
.yardim .nav-tabs .nav-link.active,
.yardim .nav-tabs .nav-link:focus,
.yardim .nav-tabs .nav-link:hover {
    border: 2px solid #307cbf;
    color: #307cbf;
    padding: 10px 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    border-radius: 25px;
}
.nav-tabs {
    border-bottom: 0;
}
/******************* Detay Yardım *****************/

/******************* Detay Giris Detay *****************/

.girisYap, .uyeOl { 
    padding-top: 100px;
}
.uyelikForm {
    background: linear-gradient(45deg, rgb(92, 199, 216), rgb(45, 123, 190));
    padding: 50px 15px;
    color: #fff;
}
.uyelikForm p { color: #fff!important; }

form .form-text {
    color:#fff;
    padding-left: 10px;
    font-size: 14px;
}
form h4, form p {
    margin-bottom: 30px;
}
.uyelikForm .form-group {
    border-radius:30px;
    padding: 10px 15px!important;
    background-color: #fff;
    position: relative;
}
.uyelikForm .form-group .form-control{
    border: none;
    padding-left: 30px;
}
.form-group.mail::before,
.form-group.ad::before,
.form-group.sifre::before,
.form-group.adres::before,
.form-group.sehir::before,
.form-group.ilce::before,
.form-group.tel::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 18%);
    left: 15px;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}
.form-group.mail::before   { background-image: url(../images/ikonlar/mail-ikon.jpg);        }
.form-group.ad::before     { background-image: url(../images/ikonlar/kullanici-ikon.jpg);   }
.form-group.sifre::before  { background-image: url(../images/ikonlar/soru-ikon.jpg);        }
.form-group.adres::before  { background-image: url(../images/ikonlar/konum-ikon.jpg);       }
.form-group.sehir::before  { background-image: url(../images/ikonlar/konum-dunya-ikon.jpg); }
.form-group.ilce::before   { background-image: url(../images/ikonlar/konum-ev-ikon.jpg);    }
.form-group.tel::before    { background-image: url(../images/ikonlar/tel-ikon.jpg);         }
.form-btn {
    border: 2px solid #fff;
    border-radius: 30px;
    padding: 10px 25px;
    margin-top: 20px;
    color:#fff;
    background-color: rgba(0,0,0,0.00);
    cursor: pointer;
}
.form-btn:hover {
    transform: translateX()
}
.girisYap .yazi, .uyeOl .yazi {
    margin: 50px 0;
}

/******************* Detay Giris Detay *****************/

/******************* Detay Üyelik Detay *****************/
.uyelik .tabNum { 
    padding-top: 30px;
    margin: auto;
}
.uyelik .tabNum .uyelik .nav-tabs .nav-item.show .nav-link, 
.uyelik .tabNum .nav-tabs .nav-link.active, 
.uyelik .tabNum .nav-tabs .nav-link:focus, 
.uyelik .tabNum .nav-tabs .nav-link:hover{
    margin-left: 0;
    padding: 10px 0;
    background: none;
}
.uyelik .nav-tabs .nav-link span {
    padding: 10px;
    border-radius: 50%;
    border: 2px solid #000; 
}
.uyelik .nav-tabs .nav-link {
    padding: 10px 0;
    margin-left: 0;
    margin-bottom: 15px;
    border: 0;
    border-radius: 25px;  
    font-weight: 900;
    font-size: 10px;
}

.uyelik .nav-tabs .nav-item.show .nav-link span,
.uyelik .nav-tabs .nav-link.active span,
.uyelik .nav-tabs .nav-link:focus span,
.uyelik .nav-tabs .nav-link:hover span {
    background: linear-gradient(45deg, rgb(92, 199, 216), rgb(45, 123, 190));
    border: 2px solid #fff; 
    color: #fff;
}
.uyelik .nav-tabs {
    border-bottom: 0;
}
.uyeOl .uyelikForm {
    margin-top: 50px;
}

/******************* Detay Üyelik Detay *****************/

/******************* Detay İş ortağı *****************/

.is-ortagi .bayi-talep-form {
    background: linear-gradient(45deg, rgb(92, 199, 216), rgb(45, 123, 190));
    padding: 70px 30px;
    color: #fff;
    border-radius: 15px;
}


.is-ortagi .bayi-talep-form h4, .is-ortagi .bayi-talep-form .form-btn {margin-left: 10px;}
.is-ortagi .bayi-talep-form .alt-cizgi::before { 
    background-color: #fff;
}
.detay.is-ortagi .form-group {
    margin: 10px;
}

.is-ortagi .bayi-talep-form .form-group {
    position: relative;
    border-radius: 30px;
    background-color: #fff;
    padding: 5px 5px 5px 30px;
}
.is-ortagi .bayi-talep-form .form-group.sehir { 
    padding-bottom: 3px;
}
.is-ortagi .bayi-talep-form .form-group .form-control {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    color: #383838;
    height: 35px!important;
}
.is-ortagi .bayi-talep-form .form-group:nth-child(5) {
    background: rgba(0, 0, 0, 0);
    padding-left: 10px;
    width: 90%;
}
.is-ortagi .bayi-talep-form .form-group:nth-child(5) input { 
    width: 20px;
    float: left;
}
.is-ortagi .bayi-talep-form .form-group:nth-child(5) span { 
    width: 80%;
    color: #fff;
    top: 5px;
    position: relative;
    left: 10px;
}
.is-ortagi .bayi-talep-form .form-group:nth-child(5) span a{ 
    color: #fff;
    text-decoration: underline;
}
.is-ortagi .bayi-talep-form .gradient-btn{
    background: rgba(0, 0, 0, 0);
    padding: 10px 25px;
    border: 2px solid white;
    margin-left: 15px;
}
/******************* Detay İş ortağı *****************/





main section.videobox {
    padding-top: 0;
    padding-bottom: 25px;
    position: relative;
}


.videobox iframe{
    width: 100%;
    height: 200px;
    border-radius: 25px;
    border: 10px solid white;
    box-shadow: 3px 3px 16px 6px #e8e5e5;
}

.videobox .col-lg-4{
    padding-top: 25px;
}

.pdr{
	padding:10px;
}
.uli {margin-top: 20px;}
.uli li{
	float:left;
	margin:2px;
}


/******************* Responsive *****************/

@media (min-width: 576px) {
    /******************* Ortak *****************/
    p, section.detay ul li {font-size: 10px; }
	.cerez-sozlesme {
		display: flex;
		justify-content: center;
		padding: 10px;
	}
	.cerez-sozlesme p { margin: 0;}
	.cerez-sozlesme .btn-sozlesme {width: 20%;}
    /******************* Menü *****************/
    
        
    /******************* Login *****************/

    /******************* Giriş Slider *****************/
    .owl-carousel .hareketli .sol-resim, .kurumsal-git { display: none;}
    .owl-carousel .hareketli .sag-resim { display: block;}
    .giris .sloganBaslik { margin-top: 150px; }
    
    /******************* Section Wifi *****************/
    
    /******************* Section panel-ekran *****************/
    main section.panel-ekran .dikey {display: none;}
    main section.panel-ekran .yatay {display: flex;}
    .list-group-item, .list-group-item.active {
        color: #484748;
        background-color: rgba(0,0,0,0.00);
        border: 0;
        padding: 5px 0;
    }
    .list-group-item.active h5, .list-group-item:hover h5 { 
        background-color: rgb(92, 199, 216);
        background: -webkit-linear-gradient(0,rgb(48, 121, 183) 0%,rgb(92, 198, 216) 60%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .list-group-item h5{ font-size: 12px; }
    .list-group-item p{ display: none; }
    
    .yatay .tablet-dash .tab-pane .cihaz-bg {
        position: relative;
        background-size: contain!important;
        width: 100%;
        height: 70vh;
        margin: 0 auto;

    }
     .yatay .tablet-dash .tab-pane .cihaz-bg > img { 
        position: absolute;
        width: 44%;
        top: 50%;
        left: 49.8%;
        transform: translate(-38%, -50%);
    }
    
    /******************* Section nasil-calisiyor *****************/
    main section.nasil-calisiyor .metin { width: 50%; text-align: left;}
    section.nasil-calisiyor .modem { width: 40%; left: 50%; }
    section.nasil-calisiyor iframe { left: 50%; }
    img.iko1{ top: 60%; left: 40%; }
    img.iko2{ top: 90%; left: 23%; }
    img.iko3{ top: 68%; left: 17%; }
    img.iko4{ top: 85%; left: 40%; }
    img.iko5{ top: 49%; left: 7%;  }
    img.iko6{ top: 55%; left: 30%; }
    img.iko7{ top: 80%; left: 10%; }
    img.iko8{ top: 45%; left: 45%; }
    
    /******************* Section sektorler *****************/
    .sektorler .metin { width: 70%;}
    .sektor .owl-nav { top: -14%; }
    
    /******************* Section Sizi Arayalım *****************/
    
    /******************* Footer *****************/
    
    .is-ortagi .bayi-talep-form .form-group {
        width: 45%;
        float: left;
    }
    .uyelikForm {
        margin: 0 auto;
        max-width: 70%;
    }
    
    .uyeOl .uyelikForm {
        margin-top: 75px;
    }
    .uyelik .nav-tabs .nav-link {
        margin-left: 15px; 
        font-size: 12px;
    }

}

@media (min-width: 760px) {
    /******************* Ortak *****************/
    p, section.detay ul li {font-size: 14px; }
	.cerez-sozlesme {padding: 15px 20px;}
    /******************* Menü *****************/
    
        
    /******************* Login *****************/
    .login > .loginlink.gradient-btn { display: inline-block; padding: 15px 20px; }
    
    
    /******************* Giriş Slider *****************/
    h2.gradient-yazi {font-size: 1.5em;}
    .owl-carousel .hareketli .sol-resim, .kurumsal-git { display: block;}
    .owl-carousel .hareketli .sol-resim { width: 45%; }
    .slogan { width: 70%; margin: auto; }  
    
    /******************* Section Wifi *****************/
    main section.wifi { padding-top: 150px;}
    
    /******************* Section panel-ekran *****************/
    .panel-ekran .yatay .list-group {margin-top: 50px;}
    .panel-ekran .yatay .list-group-item h5{ font-size: 14px; }
    .panel-ekran .yatay .list-group-item h5 img{ width: 30px; }
    .panel-ekran .yatay .tablet-dash .tab-pane .cihaz-bg { height: 500px; }
    
    /******************* Section nasil-calisiyor *****************/
    main section.nasil-calisiyor .metin { width: 100%; margin-top: 60px;}
    section.nasil-calisiyor .modem { width: 60%; left: 20%; }
    section.nasil-calisiyor iframe { left: 20%; }
    img.iko1{ top: 33%; left: 42%; }
    img.iko2{ top: 38%; left: 23%; }
    img.iko3{ top: 33%; left: 7%;  }
    img.iko4{ top: 37%; left: 65%; }
    img.iko5{ top: 49%; left: 7%;  }
    img.iko6{ top: 49%; left: 77%; }
    img.iko7{ top: 49%; left: 36%; }
    img.iko8{ top: 30%; left: 77%; }
    .kurulum-video{ width: 700px;}
    
    /******************* Section sektorler *****************/
    .sektor .owl-nav { top: -150px; }
    
    /******************* Section Sizi Arayalım *****************/
    main .sizi-arayalim .row {background: url(../images/bg/sizi-arayalim-bg.png)  no-repeat center; background-size: cover;}
	main .sizi-arayalim .form-inline .form-group:nth-child(3) {bottom: -5%;}

    
    /******************* Footer *****************/
    .footer .container-wifi > .row > div {padding-right: 5px;padding-left: 5px;}
    .footer .container-wifi > .row > div:nth-child(1) { max-width: 24%;}
    .footer .container-wifi > .row > div:nth-child(2) { max-width: 20%;}
    .footer .container-wifi > .row > div:nth-child(3) { max-width: 22%;}
    .footer .container-wifi > .row > div:nth-child(4) { max-width: 25%;}
    /* Detay Modülleri */
    .ozellik-kutular > .ozellik-kutu {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    
    section .alt-cizgi {
        margin-bottom: 30px;
        position: relative;
    }
    section .alt-cizgi::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -15px;
        width: 50px;
        height: 8px;
        border-radius: 5px;
        background-color: #000;
    }
    
    .girisYap .yazi, .uyeOl .yazi {
        margin: 50px 0;
        z-index: 1;
    }

    .uyelik .sayfaResim {
        display: none;
        position: absolute;
        right: -15%;
        top: 25%;
        z-index: 0;
        width: 40%;
    }
    
    .uyelik .nav-tabs .nav-item.show .nav-link,
    .uyelik .nav-tabs .nav-link.active,
    .uyelik .nav-tabs .nav-link:focus,
    .uyelik .nav-tabs .nav-link:hover {
        color: #307cbf;
        margin-left: 15px;
        background: none;
    }
    .uyelik .nav-tabs .nav-link span {
        padding: 13.5px 15px;
    }
	.ac-kapa span:nth-child(1){
		left: -110px;
		top: 15px;
		font-size: 18px;
	}
	.ac-kapa span:nth-child(3){
		right: -110px;
		top: 15px;
		font-size: 18px;
	}
    .paketler { 
        position: relative;
        width: 100%;
        margin: 100px auto!important;
        z-index: 55;
    }
    .paketler .paket {
        width: 55%;
        margin-right:auto;
        margin-left: auto;
    }
    .paketler .paket:nth-child(1) {margin-top: 75px;}
    .paketler .paket:nth-child(2) {z-index: 2; }
    .paketler .paket:nth-child(3) {margin-top: 75px;}
    footer .copyright {
        -webkit-box-pack: justify!important;
        -ms-flex-pack: justify!important;
        justify-content: space-between!important;
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex;
    }
    
    .videobox iframe{
        width: 100%;
        height: 300px;
        border-radius: 25px;
        border: 10px solid white;
        box-shadow: 3px 3px 16px 6px #e8e5e5;
    }
	
	
}

@media (min-width:992px) {
    /******************* Ortak *****************/
    .container-wifi { max-width: 100%;}
    p, section.detay ul li {font-size: 16px; }
		
	.cerez-sozlesme p {font-size: 12px;padding: 5px 0;}
	.cerez-sozlesme .btn-sozlesme { width: 100px; margin-left: 10px;}
    /******************* Menü *****************/
    header .navbar-expand-lg .navbar-nav .nav-item { padding-right: .5rem; padding-left: .5rem;font-size: 13px;}
    .navbar-expand-lg .navbar-nav .nav-link { padding: 0; }
    .navbar-brand { width: 18%; }
    .uyelik .navbar-collapse { display: none!important;}
    .navbar-collapse { 
        background: none;
        opacity: 1;
        position: relative;
        height: auto;
        padding-top: 20px;
        -webkit-box-pack: end;
        -ms-flex-pack: center;
        justify-content: flex-end;
        z-index: 1050;
    }
    .dropdownMega .dropdown-menu { 
        left: 0;
    }
    .dropdown-menu { 
        left: -100px;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        border-radius: 20px;
        border: 0;
        -webkit-box-shadow: 20px 20px 40px 0px #2b537626;
        box-shadow: 20px 20px 40px 0px #2b537626;
        padding: 20px 0;
    }
    .dropdown-menu::after { 
        content: '';
        position: absolute;
        top: -27px;
        width: 20px;
        height: 20px;
        border-width: 20px;
		border-style: solid;
		border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff rgba(0,0,0,0);
    }
    .navbar-nav > .nav-item:hover .dropdown-menu {display: block;}
    .dropdownMega .dropdown-menu::after { left: 10%;}
    .dropdown-menu::after { left: 80%;}

    .dropdown-menu ul li {
        padding: 5px 0;
    }
    .dropdown-menu ul li img{
        margin-right: 10px;
    }
    .dropdown-menu ul li a{
        font-weight: 800;
    }
    .dropdown-item.active, .dropdown-item:active { background-color: rgba(0,0,0,0.00); color: #2e7ebf; }
    /******************* Login *****************/
    .nav-item:last-child { padding: 0;}


    /******************* Giriş Slider *****************/
    .giris .sloganBaslik, .metin h2 { font-size: 2em;}
    .hareketli .sol-kanat, .hareketli .sag-kanat { width: 50%; height: 100vh;}
    .owl-carousel .hareketli .sol-resim { width: 40%; }
    .giris .sloganBaslik { margin-top: 75px; }
    .slogan { width: 50%; }
     /******************* Section Wifi *****************/
    main section.wifi { background: none; height: auto; }
    section.wifi .wifi-paralax { display: block; }
    .wifi-paralax {
        background: url(../images/bg/wifi-golgeli.png) no-repeat;
        background-size: contain;
    }
    .wifi-logo-paralax, .wifi-paralax-ikon, .wifi-logo-paralax-golge{display: none;}
    
    /******************* Section panel-ekran *****************/
    .owl-baslik h5, .owl-baslik p {width: 50%;}
    .list-group-item h5{ font-size: 18px; }
    .list-group-item h5 img{ width: 40px; }
    .yatay .tablet-dash .tab-pane .cihaz-bg > img { top: 49%; }
    .list-group-item.active p{ 
         display: block;    
        -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
    }
    
    /******************* Section nasil-calisiyor *****************/
    img.iko1{ top: 41%; left: 47%; }
    img.iko2{ top: 58%; }
    img.iko3{ top: 83%; }
    img.iko4{ top: 60%; }
    img.iko5{ top: 100%; left: 20%;  }
    img.iko6{ top: 90%; }
    img.iko7{ top: 73%; }
    img.iko8{ top: 67%; left: 84%; }
    section.nasil-calisiyor .modem { width: 40%; left: 30%; }
    section.nasil-calisiyor iframe { left: 30%; }
    main section.nasil-calisiyor .metin {margin-top: 0;}
    .kurulum-video{ width: 950px;}
    
    
    /******************* Section Sizi Arayalım *****************/
    .sektor .card-text h4 { font-size: 1em;}
	.sizi-arayalim .metin h4 img {display: inline-block; margin-right: 10px;}
	
    /******************* Footer *****************/
    .footer .container-wifi > .row:nth-child(1) {padding: 40px 10px; background: url(../images/bg/footer-bg.png) no-repeat center; background-size: cover;}

    
    /* Detay Modülleri */
    .ozellik-kutular > .ozellik-kutu {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .owl-carousel.kaydirmaNav { width: 80%; margin: 0 auto;}
    .detay-sayfa .navBrand .ortala { width: 40%; }
    .detay.kurulum .satir1 .metin {width: 60%;}
    .detay.kurulum .satir2 .video {width: 40%;}
    
    .paketler .paket {
        width: 30%;
        float: left;
    }
    .paket-ozellikleri { padding: 50px; width: 90%;}
    .fiyatlar .paketler::after,
    .fiyatlar .paketler::before,
    .fiyatlar .paket-ozellikleri::after,
    .fiyatlar .paket-ozellikleri::before { 
        content: '';
        background: url(../images/bg/iframe-before-ikon.png) no-repeat;
        background-size: contain;
        position: absolute;
        width: 500px;
        height: 500px;
        z-index: 0;
    }
    .fiyatlar .paketler::after,
    .fiyatlar .paket-ozellikleri::after { 
        bottom: 0; right: 0;        
    }
    .fiyatlar .paketler::before,
    .fiyatlar .paket-ozellikleri::before { 
        top:0; left: 0;
    }
    .paket-ozellikleri table th h4, .paket-ozellikleri table td {
        font-size: 14px;
    }
	.paket-ozellikleri .alert a{font-size: 14px; }
    .ac-kapa span:nth-child(1) {left: -130px;}
    .ac-kapa span:nth-child(3) {right: -130px;}
    
    .detay.detay-icerik .container-wifi{ padding: 0 300px; position: relative; }
    .detay.detay-icerik ul.detay-sosyal {
        position: absolute;
        left: 13%;
        top: 13%;
    }
    .detay.detay-icerik ul.detay-sosyal li a {
        width: 37px;
        height: 37px;
        position: relative;
        z-index: 1;
        vertical-align: middle;
        display: inline-block;
        overflow: hidden;
        margin: 5px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        padding: 0;
        border: none;
        cursor: pointer; 
        background-color: #f3f3f7;
    }
    .detay.detay-icerik ul.detay-sosyal li a i {
        font-size: 1rem;
        line-height: 37px;
        display: inline-block;
        width: inherit;
        text-align: center;
        color: #43414f!important;
    }

    .detay.detay-icerik ul.detay-sosyal li a:hover { background-color: #43414f;}
    .detay.detay-icerik ul.detay-sosyal li a:hover i { color: #f3f3f7!important;}
    
    .detay.detay-icerik img { margin: 20px -15px; }
    
    .detay.yardim .container-wifi{
        padding: 0 300px;
        position: relative; 
    }
    .kaydirmaNav .owl-nav button.owl-next {
        right: -40px;
    }
    .girisYap, .uyeOl {
        background: url(../images/bg/girisYap-bg.png) no-repeat center;
        background-size:cover;
        height: 100vh;
        padding-top: 150px;
    }
       
    .girisYap .row, .uyeOl .row{  
        -webkit-box-align: center!important;
        -ms-flex-align: center!important;
        align-items: center!important;
    }
	.kaydirmaNav .owl-nav button.owl-prev { left: -40px;}
	.kurulum .ozellik-kutular .ozellik-kutu:nth-child(1)::after, .kurulum .ozellik-kutular .ozellik-kutu:nth-child(2)::after {
		content: '';
		position: absolute;
		width: 100px;
		height: 30px;
		top: 50%;
		right: -35%;
		background: url(../images/ikonlar/ozellik-kutu-before-ok.png) no-repeat center;
	}
}

@media (min-width:1024px) { 
    .uyelik header .login {
        position: absolute;
        left: calc(100% - 20%);
        width: fit-content;
        top: 10px;
    }
    .uyelikForm {
        margin: 0;
        max-width: 40%;
        padding: 50px 40px;
    }
    .girisYap .yazi, .uyeOl .yazi { max-width: 30%; }
    .uyelik .sayfaResim {display: block;}
    .uyelik .tabNum {margin: 0;}

    footer .footerMenu li a{ 
        font-size: 12px;
    }
	
	.paketler {
		display: flex;
		display: -ms-flexbox!important;
		justify-content: center;
		-ms-flex-pack: center!important;
	}
}
@media (min-width:1200px) {
    /******************* Ortak *****************/
	.container-wifi { max-width: 1150px;}
    .form-control {font-size: 14px;}
    
    /******************* Menü *****************/
    header .navbar-expand-lg .navbar-collapse { margin-left: 10%; width: 65%; }
    
    /******************* Login *****************/
    .login > .loginlink.gradient-btn { padding: 10px; font-size: 12px; }
    .login > .loginlink.gradient-yazi {  margin-top: 3px; }

    /******************* Giriş Slider *****************/
    .giris .sloganYazi { font-size: 18px;}
    .owl-carousel .hareketli .sol-resim { width: 26%; }
    .owl-carousel .hareketli .sag-resim { width: 35%; }
    .slogan { width: 40%; }
    
    /******************* Section panel-ekran *****************/
    .yatay .tablet-dash .tab-pane .cihaz-bg { height: 100vh; margin-top: -100px; }
    .yatay .tablet-dash .tab-pane .cihaz-bg > img { top: 47%; }
    .panel-ekran .yatay .tablet-dash .tab-pane .cihaz-bg { height: 700px;}
        
    /******************* Section nasil-calisiyor *****************/
    section.nasil-calisiyor .modem { width: 30%; left: 36%; }    
    section.nasil-calisiyor iframe { left: 36%; }    
    main section.nasil-calisiyor .metin {margin: 0;}
    img.iko9, img.iko10, img.iko11, img.iko12, img.iko13 { display: block; }
    img.iko1{ top: 35%; left: 48%; width: 80px; }
    img.iko2{ top: 45%; left: 29%; width: 80px; }
    img.iko3{ top: 52%; left: 14%; width: 80px; }
    img.iko4{ top: 42%; left: 65%; width: 80px; }
    img.iko5{ top: 64%; left: 10%; width: 80px; }
    img.iko6{ top: 75%; left: 89%; width: 80px; }
    img.iko7{ top: 52%; left: 58%; width: 0px; }
    img.iko8{ top: 92%; left: 90%; width: 50px; }
    img.iko9{ top: 71%; left: 17%; width: 50px; }
    img.iko10{ top: 76%; left: 23%; width: 80px }
    img.iko11{ top: 72%; left: 72%; width: 80px; transform: rotate(-15deg);}
    img.iko12{ top: 87%; left: 74%; width: 80px; }
    img.iko13{ top: 83%; left: 8%; width: 80px; }
    .kurulum-video { width: 100%;}
    
    /******************* Section Numaralı Slider *****************/
    section.internet-paylasim .numarali-slider {padding: 100px 50px;}   
    
    /******************* Section Sektörler *****************/
    section.sektorler .sektor .sol.kutu {padding-left:0; }
    section.sektorler .sektor .kutu {padding: 10px; }
    section.sektorler .sektor .metin { top: 10%; left: 8%;  }
    section.sektorler .sektor .metin p { display: block;  }
    section.sektorler .sag .metin h4 {font-size: 18px;}
    section.sektorler .sag .metin p {font-size: 12px;}
    .sektorler .metin { width: 50%;}

    
    /******************* Section İnternet Paylaşımı *****************/
    section.internet-paylasim .numarali-slider .slider-yazi h2 { font-size: 3em; margin-bottom: 20px;}
    
    /******************* Section Sizi Arayalım *****************/
    main .sizi-arayalim .row { padding: 30px 100px;}
    
    /******************* Footer *****************/
    footer .footerMenu li a { padding: 4px 5px; font-size: 15px;}
    footer .container-wifi > .row:nth-child(1) {padding: 50px;}
    
    .paketler {width: 90%;}
    .fiyatlar .paket-ozellikleri { width: 80%; }
    
    
    .uyelikForm {max-width: 25%; }
    
    .uyelik .sayfaResim {
        right: 0%;
    }

}

@media (min-width:1360px) {
    /******************* Ortak *****************/
	.container-wifi { max-width: 1300px;}
    main {padding: 0;}
    /******************* Menü *****************/

    .dropdownMega .dropdown-menu {
        left: -53%;
        padding: 20px 0;
        width: max-content;
    }
    .dropdown-menu {
        padding: 20px 0;
        left: 0;
    }

    .dropdownMega .dropdown-menu::after { left: 40%;}
    .dropdown-menu::after { left: 10%;}
    .dropdownMega .dropdown-menu ul {
        border-right: 2px solid #f6f7fe;
        padding-right: 60px;
    }
    .dropdownMega .dropdown-menu ul:nth-last-child(1) {
        border-right:0; 
    }
    .menuStunDis {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .dropdown-menu ul li {
        padding: 5px 0;
    }
    .dropdown-menu ul li img{
        margin-right: 10px;
    }
    .dropdown-menu ul li a{
        font-weight: 800;
    }
    .dropdown-item.active, .dropdown-item:active { background-color: rgba(0,0,0,0.00); color: #2e7ebf; }
    
    /******************* Login *****************/
    .login { width: 40%; position: relative; padding: 20px 0 0 0; }
    .login > .loginlink.gradient-yazi { padding-right: 2.5rem;}

    /******************* Giriş Slider *****************/
    .giris .sloganBaslik, .metin h2 { font-size: 2.2em;}
    
    .panel-ekran .yatay .list-group-item h5 { font-size: 1.25rem;}
    h2.gradient-yazi { font-size: 2em; }
    
    /******************* Footer *****************/

    .abonelik .form-group input { padding-left: 20px;}
    .paketler {width: 80%;}
    
    main section.videobox {
        padding-top: 60px;
        padding-bottom: 60px;
        position: relative;
    }

   .videobox iframe{
    width: 70%;
    height: 300px;
    border-radius: 25px;
    border: 10px solid white;
    box-shadow: 3px 3px 16px 6px #e8e5e5;
    }


}

@media (min-width:1440px) {
    /******************* Ortak *****************/
	.container-wifi { max-width: 1300px;}
    
    /******************* Menü *****************/
    header .navbar-expand-lg .navbar-nav .nav-item { padding-right: .8rem; padding-left: .8rem; }
    
    /******************* Login *****************/
    .login { width: 36%;}
    /******************* Giriş Slider *****************/
    main section.nasil-calisiyor { height: 1180px;}
    .panel-ekran .yatay .list-group {margin-top: 100px;}
    
}

@media (min-width:1600px) {
    /******************* Ortak *****************/
	.container-wifi { max-width: 1550px;}
    
    /******************* Menü *****************/
    header .navbar-expand-lg .navbar-nav .nav-item {font-size: 1em;  padding-right: 1rem; padding-left: 1rem;}
    header .navbar-expand-lg .navbar-collapse { width: 75%;}
    .dropdownMega .dropdown-menu { left: -35%; }
	.dropdownMega .dropdown-menu::after { left: 38%; }
    /******************* Login *****************/
    .login { width: 38%;}
    
    /******************* Giriş Slider *****************/
    .giris .sloganBaslik {  margin-top: 150px; }
    .slogan { width: 35%; }
    
    /******************* Nasıl Çalışıyor *****************/
    main section.nasil-calisiyor .metin { margin: 50px 0;}
	section.nasil-calisiyor iframe {margin-top: 110px;margin-bottom: 50px;}

    /******************* Sektörler *****************/
    .sektor .owl-nav { top: -56%; }
    img.iko1{  top: 32%; }
    img.iko2{  top: 42%; }
    img.iko3{  top: 50%; }
    img.iko4{  top: 40%; }
    img.iko5{  top: 62%; }
    img.iko6{  top: 72%; }
    img.iko7{  top: 50%; }
    img.iko8{  top: 90%; }
    img.iko9{  top: 88%; }
    img.iko10{ top: 74%; }
    img.iko11{ top: 69%; }
    img.iko12{ top: 85%; }
    img.iko13{ top: 80%; }
    .fiyatlar .paket-ozellikleri { width: 65%; }
    
    .detay.is-ortagi .container-wifi{
        padding: 0 100px;
        position: relative;
    }
    
    
}

@media (min-width:1900px) {
    /******************* Ortak *****************/
	.container-wifi { max-width: 1700px;}
    .gradient-btn { padding: 17px 20px; border-radius: 30px;}
    
    /******************* Menü *****************/
    
    /******************* Login *****************/
    
    /******************* Giriş Slider *****************/
    .abonelik .form-group { border-radius: 45px; }
    .abonelik .form-group input {width: 65%;}
    .abonelik .form-group button { font-size: 16px;  width: 35%;}
    
	
    /******************* Nasıl Çalışıyor *****************/
	.kurulum-video { margin-top: 400px;}
	
    /******************* Sizi Arayalım *****************/
	
	.kaydirmaNav .owl-item div { width: 90%;}
        
main section.videobox {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

.videobox iframe{
    width: 70%;
    height: 400px;
    border-radius: 25px;
    border: 10px solid white;
    box-shadow: 3px 3px 16px 6px #e8e5e5;
}



}
@media (min-width:2100px) {
    /******************* Ortak *****************/
    
    /******************* Menü *****************/
    
    /******************* Login *****************/
    
    /******************* Giriş Slider *****************/
    main { background-size: contain;}
    
    
    /******************* Panel Ekran *****************/
    main section.panel-ekran { background-size: cover;}
    
    /******************* Nasıl Çalışıyor *****************/
    main section.nasil-calisiyor {height: 120vh;}
	.kurulum-video { margin-top: 600px;}
	
    
}