/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/
:root {
    --g: #4caf50;
    --g2: #388e3c;
    --g-lite: #e8f5e9;
    --g-mid: #c8e6c9;
    --dark: #333333;
    --mid: #555555;
    --muted: #888888;
    --border: #e0e0e0;
    --white: #ffffff;
    --bg: #f9f9f9;
    --r: 10px;

    ::selection {
        color: #fff;
        text-shadow: none;
        background: #333;
    }

    .halfscreen {
        width: 100%;
        height: 72%;
        overflow: hidden;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        min-height: 60vh !important;
    }
    /*table*/
    /*
mobile!
*/

    .tableTh {
        font-weight: 700 !important;
    }

    .elekseImage {
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    table th {
        font-weight: 700 !important;
    }

    .nav-link h5 {
        color: #84b943 !important
    }

    .odemeLink li {
        box-shadow: 0 12px 6px rgb(0 0 0 / 15%);
    }

    .box-kurum-top > h5 {
        color: #323331 !important;
        overflow: hidden;
    }

    .box-kurum-top {
        overflow: hidden;
        max-width: 150px !important;
    }

    .alert span {
        font-weight: 500;
    }

    .taksit-table {
        overflow-x: auto;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

    .custom-row {
        display: flex;
        width: 100%;
    }

        .custom-row .row-mounth, .row-year {
            padding-left: 6px;
            padding-right: 5px;
        }

    .tumunuSec {
        padding-left: 14px;
    }

    .svg-size {
        width: 60px;
        height: 64px;
    }

    .devamBtn {
        float: right;
        margin-right: 5px;
    }

        .devamBtn:hover {
            color: #84b943 !important;
            background-color: #fff !important;
            border-color: #84b943;
        }

    .sorgu-btn:hover {
        background-color: #fff !important;
        border-color: #e06567 !important;
        color: #e06567 !important;
    }

    .sms-btn {
        color: #fff;
        background-color: #84b943 !important;
        border-color: #84b943 !important;
        display: block;
        margin: 0 auto;
    }

        .sms-btn:hover {
            color: #84b943 !important;
            background-color: #fff !important;
            border-color: #84b943;
        }

    .odeme-btn {
        float: right;
    }

        .odeme-btn:hover {
            color: #84b943 !important;
            background-color: #fff !important;
            border-color: #84b943;
        }

    .kurum-sorgu-image {
        width: 209px;
        height: 200px;
        position: absolute;
        right: 65px;
        top: 155px;
    }

    @media (max-width:360px) {
        .faturaAdet p {
            font-size: 1rem !important;
        }
    }

    @media only screen and (width:768px) {

        .ipad-custom {
            justify-content: center;
        }

        .ipad-icon-box {
            width: auto;
        }

        .odemeLink {
            display: flex !important;
        }

        .kurum-grid {
            display: grid;
            grid-column-gap: 21px;
            grid-template-columns: auto auto !important;
        }

        .nav-link {
            justify-content: center;
        }
    }

    @media screen and (max-width: 600px) {
        .kurum-logo {
            display: none;
        }

        .odeme-btn {
            display: block !important;
            margin: 0 auto !important;
            float: inherit;
        }

        .devamBtn {
            display: block !important;
            margin: 0 auto !important;
            float: inherit;
        }

        .tumunuSec {
            padding-left: 4px !important;
        }

        .custom-control-label {
            font-size: .9rem !important;
        }

        .custom-container {
            padding: 0 !important;
        }

        .mobile-screen {
            margin-bottom: -300px !important;
        }

        .odemeLink {
            margin-left: 9px;
        }

        .nav-item .active {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 115px;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        }

        #loader {
            left: 54% !important;
        }

        .maviTabAlan .nav-pills {
            display: flex !important;
        }

        .kurum-grid {
            display: grid;
            grid-column-gap: 21px;
            grid-template-columns: auto auto;
        }

        .box-icon-title {
            display: contents !important;
        }

        .maviTabAlan .odemeLink li a svg {
            margin-right: 0 !important;
        }

        p {
            font-size: .85rem !important;
        }

        .form-group label:not(.error) {
            font-size: 11px !important;
        }

        input.form-control {
            font-size: 11px !important;
        }

        .sonuc {
            padding-right: 0 !important;
            padding-left: 0 !important;
        }

        .sonucContent {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .tumunuSec {
        }
    }

    .customInput {
        margin: 0 12px 0 0;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }
    /*end mobile table*/

    @media (max-width: 1024px) {

        .post-item-description .container {
            padding: 0 !important;
        }

        .post-item-description .tableOnlineIslemler {
            padding: 0 !important;
        }

        .greyTitle {
            font-size: 20px !important;
            font-weight: 500 !important;
            padding: 10px !important;
            text-align: center;
        }

        .text-right {
            text-align: left !important;
        }
    }

    @media (max-width: 767px) {
        .faturaAdet {
            display: block !important;
            text-align: center;
        }

        .toplamTutar {
            text-align: center !important;
        }
    }

    .faturaAdet > p {
        font-weight: 600 !important;
        font-size: 1rem !important;
    }

    .maviTabAlan .nav-pills .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
    }

    .page-section {
        background: url(/images/pos.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
    }


    @media only screen and (max-width: 768px) {
        .kurum-sorgu-image {
            display: none;
        }

        .svg-size {
            width: 32px !important;
            height: 32px !important;
        }

        #page-title .page-title > h1 {
            font-family: "Poppins", sans-serif;
            font-size: 1.5rem !important;
            line-height: 1.2;
            font-weight: 400 !important;
            margin-bottom: 1rem;
        }

        .icon-boxes .icon-boxx {
            box-sizing: content-box;
        }

        .icon-boxes .icon-box-content > h3 {
            font-size: 1.1rem !important;
        }

        .nav-link {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .kurum-grid {
            display: grid;
            grid-column-gap: 21px;
            grid-template-columns: auto;
        }

        .nav-link h5 {
            margin-left: 10px !important;
            margin-bottom: 0;
        }

        .box-kurum-top {
            text-align: left;
            overflow: visible;
        }

            .box-kurum-top small {
                margin-left: 10px;
            }

        .box-kurum {
            max-width: 75px !important;
            min-width: 75px !important;
        }
    }

    @media only screen and (max-width: 720px) {
        .icon-boxes {
            justify-content: center;
            margin: 0;
            padding: 0;
        }

            .icon-boxes .icon-boxx {
                box-sizing: content-box;
            }

            .icon-boxes .icon-box-content > h3 {
                font-size: 1.5rem !important;
            }

        .lisans {
            justify-content: center !important;
        }
    }

    @media only screen and (max-width:420px) {
        .lisans {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    @media only screen and (max-width: 768px) {
        .maviTabAlan .odemeLink li a img {
            display: inline-block;
            width: 40px !important;
            margin: 0;
            height: 40px !important;
        }
    }

    .logo-default {
        width: 160px;
        margin-top: 8px;
    }

    .box-kurum {
        padding: 20px;
        border: 2px solid #84b943;
        border-radius: 20px;
        margin-bottom: 5px;
        transition: 0.3s;
        max-width: 150px;
        min-width: 150px;
    }

        .box-kurum svg {
            fill: white;
        }

        .box-kurum h5 {
            color: white;
        }

        .box-kurum:hover {
            background-color: #84b9434d !important;
            -webkit-transform: translateY(-2px);
        }

    .box-icon-title {
        display: grid;
        text-align: center;
        justify-items: center;
        margin-bottom: 5px;
    }

        .box-icon-title:hover {
            color: #119977 !important;
        }

        .box-icon-title:active {
            color: #119977 !important;
        }

    .form-bg {
        border-color: #84b943 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .label-bold {
        font-weight: 600 !important;
    }

    .kurum-icon {
        height: 35px;
        width: 35px;
        line-height: 37px;
        margin-bottom: 5px;
        background-color: #333;
        text-align: center;
        color: #fff;
        transition: all .2s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .submitBtn {
        background-color: #e06567 !important;
        border-color: #e06567 !important;
    }

    .kvkk-form a:hover {
        color: #71A7FD !important;
    }

    .kvkk-form a {
        text-decoration: underline !important;
        outline: none;
        color: #1a1b1e !important
    }

    .bt {
        background-color: #84b943 !important;
        border-color: #84b943 !important;
    }

    .list li a:hover {
        color: #84b943 !important;
    }

    .dropdown-menu li a:hover {
        color: #84b943 !important;
    }

    .dropdown-menu li a:focus {
        color: #84b943 !important;
    }

    .new5 {
        border: 3px solid #84b943;
        border-radius: 5px;
        width: 20%;
    }

    .ptext {
        font-size: 11.0pt;
        color: black;
    }

    .lisans-logo {
        height: 55px !important;
        background-color: #bfbfc1 !important;
        padding: 10px !important;
        border-radius: 10px;
    }

    .lisans {
        justify-content: space-between;
    }

    .topHalf {
        width: 100%;
        color: white;
        overflow: hidden;
        min-height: 250px;
        position: relative;
        padding: 40px 0;
        background: rgb(0,0,0);
        background: #84b943;
        text-align: center;
        border-radius: 5px;
    }

    .bottomHalf {
        text-align: center;
        border: 1px solid #84b943;
        margin-top: 10px;
        border-radius: 5px;
        padding: 10px;
        color: #84b943 !important;
    }

    .contentAlert {
        flex-direction: column;
        display: flex;
    }

    .bottomHalf:hover {
        background: #84b943;
        color: #fff !important;
    }
    /*loader*/
    .form-control:focus {
        color: #495057 !important;
        background-color: #fff !important;
        border-color: #84b943 !important;
        outline: 0;
        box-shadow: 0 0 0 0.1rem rgb(0 123 255 / 20%) !important;
    }

    #loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 120px;
        height: 120px;
        margin: -76px 0 0 -76px;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #84b943;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    #myDiv {
        display: none;
    }

  

    p {
        color: #07183d;
        font-weight: 400;
        line-height: 30px
    }

    a {
        color: #07183d;
        text-decoration: none;
        -ms-transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -o-transition: .3s;
        transition: .3s
    }

        a:hover {
            text-decoration: none
        }

    pre,
    code,
    kbd,
    samp {
        color: #07183d
    }

    input[type=checkbox] {
        border: 1px solid #ced4da;
        background: #fff;
        height: 16px;
        width: 16px
    }


    .nU {
        text-decoration: none !important;
        font-size: 14px !important
    }

    .g-recaptcha {
        transform: scale(.95);
        transform-origin: left top
    }

    .date input.form-control {
        border-right: none
    }

        .date input.form-control:focus {
            box-shadow: none
        }

    .date .input-group-addon {
        width: 40px;
        padding: 8px 4px;
        background: #fff;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        border: 1px solid #ced4da;
        border-left: none
    }

    .griCalendar {
        background: transparent !important;
        border: none !important
    }

    .text-muted {
        color: #e94d4d !important;
        font-size: 10px;
        font-weight: 300;
        font-style: italic;
        padding: 0 16px
    }

    .resImg {
        max-width: 100%;
        height: auto
    }

    .yuvarla {
        border-radius: 15px
    }



    #clients img {
        max-width: 80%;
        opacity: .5;
        transition: .3s;
        padding: 15px 0
    }

    #clients .owl-nav,
    #clients .owl-dots {
        margin-top: 5px;
        text-align: center
    }

    #clients .owl-dot {
        display: inline-block;
        margin: 0 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ddd
    }

        #clients .owl-dot.active {
            background-color: #1bb1dc
        }


    #back2Top {
        overflow: hidden;
        z-index: 999;
        display: none;
        cursor: pointer;
        position: fixed;
        bottom: 50px;
        right: 50px;
        background-color: #fff;
        color: #003f9b;
        border-radius: 50px;
        padding: 0 12px;
        text-align: center;
        font-size: 40px;
        text-decoration: none;
        box-shadow: 0 0 8px #a0a0a0 !important
    }

        #back2Top:hover {
            background-color: #ebf6f9
        }

    .view a .mask {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: visibility .3s, opacity .3s linear
    }

    .view a:hover .mask {
        visibility: visible;
        opacity: 1
    }

    .pattern-9 {
        background: url(../../Content/images/pattern.png)
    }

    .table {
        color: #07183d;
        text-align: center;
        width: 100%
    }

        .table .thead-light th {
            color: #07183d;
            background-color: transparent;
            border: none;
            font-weight: 400;
            font-size: 15px
        }

        .table tr:first-child td {
            border-top: none
        }

        .table tr td {
            font-size: 15px;
            color: #07183d
        }

        .table a:hover {
            color: #4285f4
        }

        .table .greyBg {
            background-color: #ececec !important;
            padding: 6px;
            border-radius: 24px
        }

    .tableOnlineIslemler {
        color: #07183d;
        text-align: center;
        width: 100%
    }

        .tableOnlineIslemler .thead-light th {
            color: #07183d;
            background-color: transparent;
            font-weight: 400;
            border-bottom: 1px solid #dee2e6;
            font-size: 15px
        }

        .tableOnlineIslemler tr:first-child td {
            padding-top: 20px
        }


        .tableOnlineIslemler tr td {
            color: #07183d;
            font-size: 15px
        }

        .tableOnlineIslemler .greyBg {
            background-color: #ececec;
            padding: 10px 34px;
            margin: 8px;
            border-radius: 24px;
            white-space: nowrap
        }

        .tableOnlineIslemler .blueBg {
            background-color: #0160e7;
            padding: 10px 34px;
            margin: 8px;
            border-radius: 24px;
            color: #fff
        }

        .tableOnlineIslemler .whiteBg {
            background-color: #fff;
            padding: 8px 34px;
            border-radius: 24px;
            border: 1px solid #707070;
            color: #07183d;
            text-align: left;
            margin: 8px
        }

        .tableOnlineIslemler .date input.form-control {
            background: transparent;
            border: none
        }

            .tableOnlineIslemler .date input.form-control:focus {
                box-shadow: none
            }

        .tableOnlineIslemler .date .input-group-addon {
            width: 40px;
            padding: 8px 4px
        }

    .tableTaksit {
        color: #07183d;
        text-align: center;
        width: 100%
    }

        .tableTaksit .thead-light th {
            color: #07183d;
            background-color: transparent;
            font-weight: 400;
            border: none;
            font-size: 15px
        }

        .tableTaksit tr:first-child td {
            padding-top: 20px
        }

        .tableTaksit tr td {
            color: #07183d;
            font-size: 14px;
            font-weight: 300;
            border-bottom: 1px solid #dee2e6;
            padding: 12px
        }

        .tableTaksit tr:last-child td {
            border: none
        }

    .toggle.ios,
    .toggle-on.ios,
    .toggle-off.ios {
        border-radius: 20px
    }

        .toggle.ios .toggle-handle {
            border-radius: 20px
        }

    .form-group {
        margin-bottom: 1rem
    }

    .alert,
    .form-control {
        border-radius: 12px
    }

    .alert {
        font-size: 14px;
        font-weight: 300
    }

    input.form-control {
        font-size: 12px !important;
        font-weight: 300;
        padding: 10px 14px;
        height: 45px !important
    }

    textarea.form-control {
        font-size: 14px;
        font-weight: 300;
        padding: 10px 14px
    }

    .form-group label {
        font-size: 14px;
        font-weight: 300;
        color: #495057
    }

    input.form-control-file {
        font-size: 14px;
        font-weight: 300;
        padding: 6px 14px;
        height: 42px;
        background: #fff;
        border-radius: 30px;
        border: 1px solid #ced4da
    }

    select.form-control {
        font-size: 14px;
        font-weight: 300;
        padding: 10px 14px;
        height: 45px !important
    }

    .bigCheck {
        margin-top: 0;
        width: 20px;
        height: 20px
    }



    .bayilikBasvuru {
        display: block
    }

    .bayilikBasvuruSari {
        display: block
    }

    .badge {
        box-shadow: none;
        color: #655e5e !important;
        background: #f7f7f7;
        border-radius: 12px;
        padding: 12px 8px;
        margin: 0 6px;
        font-weight: 500;
        font-size: .9rem;
    }

    .uyari .modal-body {
        padding: 0 50px 36px 20px
    }

        .uyari .modal-body p {
            color: #6f6f6e;
            line-height: 22px;
            margin-bottom: 0
        }

    .modal-body a {
        text-decoration: underline
    }

    @media(min-width:576px) {
        .modal-dialog {
            max-width: 570px
        }
    }

    @media(min-width:1200px) {
        .modal-dialog.modal-dialog-mainpage {
            max-width: 1024px
        }
    }

    .kvk {
        color: #b20000;
        font-weight: 100;
        font-size: 10px;
        text-decoration: underline
    }

    .kvk2 {
        color: #07183d;
        font-weight: 100;
        font-size: 10px;
        text-decoration: underline
    }

    .greyTitle {
        font-size: 24px;
        font-weight: 500;
        background: #f7f7f7;
        border-radius: 15px;
        padding: 15px 28px;
        margin-bottom: 20px;
        text-align: center;
        border-bottom: 3px solid #84b943;
    }

    .greyButton {
        background: #f7f7f7;
        color: #07183d;
        font-size: 21px;
        font-weight: 500;
        display: block;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        line-height: 1.2em;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s
    }

        .greyButton i.fa {
            color: #1d5eeb
        }

    .detay {
        padding: 18px 0;
        font-size: 16px;
        font-weight: 500;
        display: inline-block
    }

        .detay:hover {
            color: #003ec7
        }

    .detayMavi {
        background-color: #003dc6 !important;
        background-image: linear-gradient(to right, #003dc6, #0068e5);
        color: #fff;
        padding: 6px 8px 6px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .detayMavi:hover,
        .detayMavi:focus,
        .detayMavi:active {
            background: #0068e5 !important
        }

        .detayMavi:not([disabled]):not(.disabled):active,
        .detayMavi:not([disabled]):not(.disabled).active,
        .show > .detayMavi.dropdown-toggle {
            background-color: #064eb7 !important
        }

        .detayMavi i {
            background: #fff;
            color: #003ec7;
            padding: 10px;
            border-radius: 20px
        }

    .detayTuruncu {
        background-color: #f7941d !important;
        background-image: linear-gradient(to right, #f7941d, #fbb040);
        color: #fff;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        padding: 6px 8px 6px 24px;
        margin: 0;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .detayTuruncu:hover,
        .detayTuruncu:focus,
        .detayTuruncu:active {
            background: #fbb040 !important
        }

        .detayTuruncu:not([disabled]):not(.disabled):active,
        .detayTuruncu:not([disabled]):not(.disabled).active,
        .show > .detayTuruncu.dropdown-toggle {
            background-color: #de8d13 !important
        }

        .detayTuruncu i {
            background: #fff;
            color: #f89b26;
            padding: 10px;
            border-radius: 20px
        }

    .showslider .detayTuruncu {
        padding: 10px 24px
    }

    .maviBarAlan .detayTuruncu {
        padding: 10px 24px
    }

    .detayMaviTek {
        background-color: #003dc6 !important;
        background-image: linear-gradient(to right, #003dc6, #0068e5);
        color: #fff;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .detayMaviTek:hover,
        .detayMaviTek:focus,
        .detayMaviTek:active {
            background: #0068e5 !important
        }

        .detayMaviTek:not([disabled]):not(.disabled):active,
        .detayMaviTek:not([disabled]):not(.disabled).active,
        .show > .detayMaviTek.dropdown-toggle {
            background-color: #064eb7 !important
        }

    .duzSari {
        background-color: #e9c200 !important;
        color: #000;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .duzSari:hover,
        .duzSari:focus,
        .duzSari:active {
            background: #b99b08 !important;
            box-shadow: none;
            color: #000
        }

        .duzSari i.fa {
            margin-right: 10px;
            font-size: 18px;
            color: #000
        }

        .duzSari:not([disabled]):not(.disabled):active,
        .duzSari:not([disabled]):not(.disabled).active,
        .show > .duzSari.dropdown-toggle {
            background-color: #b99b08 !important;
            box-shadow: none
        }

    .duzMavi {
        background-color: #e06567 !important;
        border-color: #e06567 !important;
        color: #fff;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .duzMavi:hover,
        .duzMavi:focus,
        .duzMavi:active {
            background: #da7273 !important;
            border-color: #dd6c6e !important;
            box-shadow: none
        }

        .duzMavi i.fa {
            margin-right: 10px;
            font-size: 18px
        }

        .duzMavi:not([disabled]):not(.disabled):active,
        .duzMavi:not([disabled]):not(.disabled).active,
        .show > .duzMavi.dropdown-toggle {
            background-color: #064eb7 !important;
            box-shadow: none
        }

    .duzYesil {
        background-color: #00bb32 !important;
        color: #fff;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .duzYesil:hover,
        .duzYesil:focus,
        .duzYesil:active {
            background: #0a942f !important;
            box-shadow: none
        }

        .duzYesil i.fa {
            margin-right: 10px;
            font-size: 18px
        }

        .duzYesil:not([disabled]):not(.disabled):active,
        .duzYesil:not([disabled]):not(.disabled).active,
        .show > .duzYesil.dropdown-toggle {
            background-color: #0a942f !important;
            box-shadow: none
        }

    .duzGri {
        background-color: #f7f7f7 !important;
        color: #07183d;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 400;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        text-decoration: underline
    }

        .duzGri:hover,
        .duzGri:focus,
        .duzGri:active {
            background: #ececec !important;
            box-shadow: none;
            color: #07183d
        }

        .duzGri:not([disabled]):not(.disabled):active,
        .duzGri:not([disabled]):not(.disabled).active,
        .show > .duzGri.dropdown-toggle {
            background-color: #ececec !important;
            box-shadow: none;
            color: #07183d
        }

    .duzTuruncu {
        background-color: #ff9113 !important;
        color: #fff;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .duzTuruncu:hover,
        .duzTuruncu:focus,
        .duzTuruncu:active {
            background: #d97c11 !important;
            box-shadow: none
        }

        .duzTuruncu i.fa {
            margin-right: 10px;
            font-size: 18px
        }

        .duzTuruncu:not([disabled]):not(.disabled):active,
        .duzTuruncu:not([disabled]):not(.disabled).active,
        .show > .duzTuruncu.dropdown-toggle {
            background-color: #d97c11 !important;
            box-shadow: none
        }

    .duzKirmizi {
        background-color: red !important;
        color: #fff;
        padding: 10px 24px 10px 24px;
        margin: 0;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .duzKirmizi:hover,
        .duzKirmizi:focus,
        .duzKirmizi:active {
            background: #d20a0a !important;
            box-shadow: none
        }

        .duzKirmizi i.fa {
            margin-right: 10px;
            font-size: 18px
        }

        .duzKirmizi:not([disabled]):not(.disabled):active,
        .duzKirmizi:not([disabled]):not(.disabled).active,
        .show > .duzKirmizi.dropdown-toggle {
            background-color: #d20a0a !important;
            box-shadow: none
        }

    .header {
        position: relative;
        overflow: hidden
    }

    .innerHeader {
        height: 300px;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover
    }

    .innerBar {
        position: absolute;
        bottom: 22px
    }

        .innerBar .breadcrumb {
            background: none;
            padding: 0
        }

    .bayilikHeader {
        background-image: url(../../Content/images/pazarlama/bayilik.png);
        height: 700px
    }

    .bayilikBar {
        margin-top: 224px
    }

        .bayilikBar h2 {
            color: #fff;
            font-size: 48px;
            font-weight: 500;
            margin-left: 30px
        }

        .bayilikBar ul {
            padding: 0;
            list-style: none;
            margin-bottom: 30px
        }

            .bayilikBar ul li {
                color: #fff;
                font-size: 24px;
                line-height: 50px;
                padding-left: 36px;
                background: url(../../Content/images/pazarlama/ico.png) left center no-repeat
            }

    .header .menu {
        border: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #fff !important;
        padding: 0
    }

        .header .menu .logo {
            background: url(../../Content/images/faturamatikLogo1.svg) left center no-repeat;
            width: 200px;
            margin: 0 0 0 190px;
            text-indent: -9999px
        }

        .header .menu .navbar-collapse > ul {
        }

        .header .menu .navbar-collapse ul > li > a {
            color: #fff !important;
            background: none;
            padding: 32px !important;
            font-weight: 500;
            display: flex
        }

            .header .menu .navbar-collapse ul > li > a.badgeLink {
                color: #ee780e !important
            }

                .header .menu .navbar-collapse ul > li > a.badgeLink:hover {
                    color: #fbb040 !important
                }

            .header .menu .navbar-collapse ul > li > a:hover {
                color: #e4effa !important
            }

            .header .menu .navbar-collapse ul > li > a > img {
                width: 30px;
                height: 30px;
                margin-right: 20px
            }

        .header .menu .navbar-collapse ul > li > h6 {
            color: #868686;
            margin-top: 20px
        }

        .header .menu .navbar-collapse ul li {
        }

            .header .menu .navbar-collapse ul li:hover > ul {
                visibility: visible;
                opacity: 1;
                box-shadow: 0 16px 80px rgba(168, 178, 200, .3)
            }

        .header .menu .navbar-collapse ul ul {
            width: 340px;
            padding: 23px 0;
            margin-top: 6px;
            border: none;
            background: #fff;
            display: block;
            visibility: hidden;
            opacity: 0;
            transition: visibility .3s, opacity .3s linear
        }

            .header .menu .navbar-collapse ul ul:before {
                position: absolute;
                top: -28px;
                width: 48px;
                color: #fff;
                display: inline-block;
                text-align: right;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: 43px;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: ""
            }

            .header .menu .navbar-collapse ul ul > li {
                padding: 0 30px !important
            }

                .header .menu .navbar-collapse ul ul > li > a {
                    color: #173750 !important;
                    display: block !important;
                    padding: 26px 0 !important;
                    border-bottom: 2px solid #eff0f4
                }

                .header .menu .navbar-collapse ul ul > li:last-child > a {
                    border: none
                }

                .header .menu .navbar-collapse ul ul > li > a:hover {
                    color: #1d4594 !important;
                    font-weight: 500 !important;
                    transform: translateX(5px)
                }

            .header .menu .navbar-collapse ul ul ul {
                position: absolute;
                top: 0;
                left: 100%;
                margin-top: 0;
                padding: 22px 0 22px 0 !important;
                min-height: 100%;
                width: 440px;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
                background: #f6f9fd;
                transition: none
            }

                .header .menu .navbar-collapse ul ul ul:before {
                    content: none
                }

                .header .menu .navbar-collapse ul ul ul > li > a {
                    border-bottom: none;
                    padding: 6px 0 !important
                }

    .maviBarAlan {
        background: url(../../Content/images/blueBar.png) left center no-repeat;
        background-size: cover;
        padding: 0;
        margin: 0;
        box-shadow: 0 0 20px #a0a0a0 !important;
        text-align: center;
        position: relative;
        z-index: 999
    }

        .maviBarAlan .row {
            height: 180px
        }

        .maviBarAlan h2 {
            color: #fff
        }

        .maviBarAlan h6 {
            color: #fff
        }

        .maviBarAlan p {
            color: #fff;
            margin: 0
        }

        .maviBarAlan .mobilEl {
        }

            .maviBarAlan .mobilEl img {
                margin-top: -34px
            }

    .koyuBarAlan {
        background: url(../../Content/images/pazarlama/greyBar.png) left center no-repeat;
        background-size: cover
    }

    .header .menu.scrolled {
        -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
        background-color: #fff !important;
        transition: background-color .1s linear
    }

        .header .menu.scrolled .logo {
            background: url(../../Content/images/faturamatikLogo2.svg) left center no-repeat;
            transition: background .3s linear
        }

        .header .menu.scrolled .navbar-collapse ul li a {
            color: #07183d !important
        }

        .header .menu.scrolled .navbar-collapse ul > li > a:hover {
            color: #1d4594 !important
        }

        .header .menu.scrolled .navbar-collapse ul ul {
            background: #f7f7f7;
            display: block;
            visibility: hidden;
            opacity: 0;
            transition: visibility .3s, opacity .3s linear;
            box-shadow: 0 3px 12px #a0a0a0 !important
        }

            .header .menu.scrolled .navbar-collapse ul ul:before {
                color: #f7f7f7
            }

            .header .menu.scrolled .navbar-collapse ul ul ul {
                background: #f6f9fd;
                transition: none
            }

    .header .menu .search {
        margin-right: 30px
    }

        .header .menu .search input {
            position: absolute;
            top: 0;
            right: 212px;
            width: 280px;
            border-radius: 26px;
            height: 48px;
            border: 1px solid #4285f4;
            opacity: 0;
            visibility: hidden;
            padding-left: 36px;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .header .menu .search:hover input,
            .header .menu .search input:focus {
                animation: search 1s ease-in-out;
                animation-fill-mode: forwards;
                box-shadow: none
            }

        .header .menu .search .btn {
            background: #003dc6;
            background-image: linear-gradient(to right, #003dc6, #0068e5);
            font-weight: 500;
            text-transform: none;
            padding: 9px 16px 9px 16px;
            margin: 0;
            border-radius: 26px !important;
            font-size: 20px !important;
            box-shadow: none !important;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .header .menu .search .btn:hover,
            .header .menu .search .btn:focus,
            .header .menu .search .btn:active {
                background: #0068e5 !important
            }

    @keyframes search {
        from {
            transform: translate(200px, 0);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(200px, 0);
            opacity: 1;
            visibility: visible
        }
    }

    .ozelMenu li {
        display: inline-block;
        width: 47%
    }

    .header .menu .temsilciGirisi {
        background: url("../../Content/images/butonParalel.png") center center no-repeat;
        padding: 12px 20px;
        margin: 0;
        margin-right: 40px;
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        display: inline-block;
        visibility: visible;
        opacity: 1;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

        .header .menu .temsilciGirisi:hover {
            opacity: .8
        }

    .temsilciGirisi .giris {
        display: inline-block;
        transform: translate(82px, 0);
        font-size: 16px
    }

    .temsilciGirisi:hover .giris {
        animation: giris .3s ease-in-out;
        animation-fill-mode: forwards
    }

    .temsilciGirisi .utGiris {
        opacity: 0;
        visibility: hidden;
        display: inline-block;
        font-size: 14px
    }

        .temsilciGirisi .utGiris a {
            color: #fff;
            font-size: 13px
        }

            .temsilciGirisi .utGiris a:hover {
                text-decoration: underline
            }

    .temsilciGirisi:hover .utGiris {
        animation: utGiris .3s ease-in-out;
        animation-fill-mode: forwards
    }

    @keyframes giris {
        from {
            transform: translate(82px, 0);
            opacity: 1;
            visibility: visible
        }

        to {
            transform: translate(-60px, 0);
            opacity: 0;
            visibility: hidden
        }
    }

    @keyframes utGiris {
        from {
            transform: translate(0, 0);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(-40px, 0);
            opacity: 1;
            visibility: visible
        }
    }

    .header .menu .onlineIslemler {
        margin-right: 30px;
        display: none
    }

        .header .menu .onlineIslemler .btn {
            background: #003dc6;
            background-image: linear-gradient(to right, #003dc6, #0068e5);
            border-radius: 24px;
            font-weight: 400;
            text-transform: none;
            font-size: 18px;
            box-shadow: none !important;
            padding: 10px 24px 10px 24px;
            margin: 0;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .header .menu .onlineIslemler .btn:hover,
            .header .menu .onlineIslemler .btn:focus,
            .header .menu .onlineIslemler .btn:active {
                background: #0068e5 !important
            }

        .header .menu .onlineIslemler .duzSari {
            background: #e9c200 !important;
            color: #000
        }

            .header .menu .onlineIslemler .duzSari:hover,
            .header .menu .onlineIslemler .duzSari:focus,
            .header .menu .onlineIslemler .duzSari:active {
                background: #b99b08 !important
            }

        .header .menu .onlineIslemler .dropdown-menu {
            left: auto;
            display: block;
            visibility: hidden;
            opacity: 0;
            transition: visibility .3s, opacity .3s linear
        }

        .header .menu .onlineIslemler:hover .dropdown-menu {
            visibility: visible;
            opacity: 1
        }

        .header .menu .onlineIslemler ul > li > a {
            padding: 10px 22px !important
        }

        .header .menu .onlineIslemler ul.dropdown-menu > li > a {
            color: #07183d !important;
            font-weight: normal
        }

        .header .menu .onlineIslemler ul.dropdown-menu > li > a {
            color: #1d4594 !important
        }

    .header .menu.scrolled .onlineIslemler {
        display: block;
        visibility: visible;
        opacity: 1;
        transition: visibility .3s linear
    }

    .header .menu.scrolled .temsilciGirisi {
        display: none;
        visibility: hidden;
        opacity: 0;
        transition: visibility .3s linear
    }

    .header .showsliderBayilik {
    }

        .header .showsliderBayilik .slick-dots {
            width: auto;
            left: 190px
        }

            .header .showsliderBayilik .slick-dots li button {
                color: #1a1b1e;
                font-size: 18px;
                font-weight: 500;
                padding-bottom: 14px
            }

                .header .showsliderBayilik .slick-dots li button:before {
                    content: none
                }

            .header .showsliderBayilik .slick-dots li.slick-active button {
                border-bottom: 4px solid #00c3ff
            }

    .header .sari .slick-dots li.slick-active button {
        border-bottom: 4px solid #e9c200
    }

    .header .showsliderBayilik .sliderArea {
        height: 640px;
        position: relative;
        outline: none;
        background-position: right top;
        background-repeat: no-repeat;
        margin-top: 90px
    }

    .header .showsliderBayilik .sliderArea {
    }

    .header .links {
        max-width: 456px;
        position: absolute;
        top: 16%;
        margin-left: 190px;
        z-index: 9
    }

        .header .links a {
            font-size: 16px;
            color: #3c3c3b;
            text-decoration: none;
            width: 140px;
            display: inline-block
        }

            .header .links a:hover {
                text-decoration: none;
                border-bottom: 3px solid #1a4478;
                padding-bottom: 8px;
                font-weight: 500
            }

            .header .links a.active {
                text-decoration: none;
                border-bottom: 3px solid #1a4478;
                padding-bottom: 8px;
                font-weight: 500
            }

    .header .sariLink a:hover,
    .header .sariLink a.active {
        border-bottom: 3px solid #e9c200
    }

    .header .showsliderBayilik .sliderArea .odul {
        max-width: 456px;
        color: #1a1b1e;
        position: absolute;
        top: 30%;
        margin-left: 170px;
        padding: 0 14px
    }

    .header .showsliderBayilik .sliderArea .duzMavi:hover,
    .header .showsliderBayilik .sliderArea .duzSari:hover {
        opacity: .8
    }

    .header .showslider {
        background: url(../../Content/images/bannerBG.png) left top no-repeat;
        background-size: cover
    }

        .header .showslider .sliderArea {
            height: 100vh;
            position: relative;
            outline: none
        }

            .header .showslider .sliderArea .image1 {
                position: absolute;
                left: 60%;
                top: 68%;
                z-index: 2
            }

            .header .showslider .sliderArea .image2 {
                position: absolute;
                top: 34%;
                right: 28%;
                animation: telefon 5s linear infinite alternate
            }

            .header .showslider .sliderArea .finish {
                position: absolute;
                top: 34%;
                right: 35%
            }

            .header .showslider .sliderArea .image3 {
                position: absolute;
                top: 72%;
                left: 45%
            }

            .header .showslider .sliderArea h2 {
                max-width: 456px;
                color: #fff;
                position: absolute;
                top: 40%;
                margin-left: 190px;
                z-index: 999
            }

            .header .showslider .sliderArea p {
                max-width: 600px;
                color: #fff;
                position: absolute;
                top: 50%;
                margin-left: 190px;
                z-index: 999
            }

            .header .showslider .sliderArea .detayTuruncu {
                position: absolute;
                top: 60%;
                margin-left: 190px;
                z-index: 999
            }

                .header .showslider .sliderArea .detayTuruncu:hover {
                    opacity: .8
                }

            .header .showslider .sliderArea .detayFinish {
                position: absolute;
                top: 60%;
                margin-left: 190px;
                z-index: 999
            }

                .header .showslider .sliderArea .detayFinish:hover {
                    color: #1867c9
                }

            .header .showslider .sliderArea .detayFinish2 {
                position: absolute;
                top: 60%;
                margin-left: 360px;
                z-index: 999
            }

                .header .showslider .sliderArea .detayFinish2:hover {
                    opacity: .8
                }

    @keyframes telefon {
        0% {
            transform: translate(0, 0)
        }

        100% {
            transform: translate(10px, 20px) rotate(5deg)
        }
    }

    .header .altButonlar {
        position: absolute;
        bottom: 50px;
        margin-left: 190px
    }

        .header .altButonlar a {
            color: #fff;
            font-weight: 400
        }

        .header .altButonlar .kampanya {
        }

        .header .altButonlar .konum {
        }

        .header .altButonlar a:hover {
            color: #de9e4c
        }

    .header .svgYukseklik0 {
        width: 60px;
        height: 60px;
        margin-right: 20px
    }

    .header .svgYukseklik1 {
        width: 60px;
        height: 60px;
        margin-right: 6px
    }

    .header .svgYukseklik2 {
        width: 70px;
        float: left
    }

    .header .buyukButonlar {
        position: absolute;
        right: -100px;
        top: 30%;
        height: 70%;
        overflow: hidden
    }

        .header .buyukButonlar .tr {
            position: relative;
            width: 790px;
            height: 82px;
            margin-bottom: 20px;
            padding-left: 78px;
            background: url(../../Content/images/sliderMenuBar.png) center left no-repeat;
            background-size: contain;
            right: 0;
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s
        }

            .header .buyukButonlar .tr a.btr {
                height: 84px;
                padding: 6px;
                padding-left: 11px;
                display: block;
                color: #fff
            }

                .header .buyukButonlar .tr a.btr .trLink {
                    display: inline-block;
                    padding-left: 20px;
                    padding-top: 14px;
                    font-weight: 400;
                    font-size: 24px
                }

                    .header .buyukButonlar .tr a.btr .trLink:hover {
                        text-decoration: underline
                    }

                .header .buyukButonlar .tr a.btr .link2 {
                    color: #fff;
                    text-decoration: underline;
                    display: block;
                    font-size: 14px;
                    font-weight: 300
                }

        .header .buyukButonlar .buton1 {
            position: relative;
            right: -82px
        }

            .header .buyukButonlar .buton1:hover {
                right: -41px
            }

            .header .buyukButonlar .buton1 a {
            }

        .header .buyukButonlar .buton2 {
            right: -164px
        }

            .header .buyukButonlar .buton2:hover {
                right: -123px
            }

            .header .buyukButonlar .buton2 a {
            }

        .header .buyukButonlar .buton3 {
            right: -246px
        }

            .header .buyukButonlar .buton3:hover {
                right: -204px
            }

            .header .buyukButonlar .buton3 a {
            }

        .header .buyukButonlar .buton4 {
            right: -246px;
            bottom: 0;
            background: url(../../Content/images/sliderMenuBarAlt.png) center left no-repeat;
            background-size: contain;
            padding-top: 10px
        }

            .header .buyukButonlar .buton4:hover {
                right: -204px
            }

            .header .buyukButonlar .buton4 a {
                display: inline-block;
                color: #fff;
                font-size: 44px;
                margin-left: 20px;
                padding: 0
            }

    .miniGreyBoxArea {
        background: #f7f7f7;
        color: #6f6f6e;
        border-radius: 15px;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        margin-bottom: 20px;
        padding: 30px !important;
    }

        .miniGreyBoxArea.active {
            margin-left: -300px
        }

        .miniGreyBoxArea ul.components {
            padding: 0
        }

        .miniGreyBoxArea ul li {
        }

            .miniGreyBoxArea ul li > ul {
                margin-left: 10px
            }

                .miniGreyBoxArea ul li > ul li {
                }

            .miniGreyBoxArea ul li a {
                padding: 18px 0;
                display: block;
                color: #6f6f6e;
                border-bottom: 1px solid #d9d9d9
            }

            .miniGreyBoxArea ul li:last-child a {
                border: none
            }

            .miniGreyBoxArea ul li a:hover {
                color: #84b943 !important
            }

            .miniGreyBoxArea ul li.active > a {
                background: 0 0;
                color: #84b943 !important
            }

    .icerik {
        padding-top: 72px;
        padding-bottom: 72px
    }

        .icerik h3 {
            text-align: left;
            color: #07183d
        }

        .icerik p {
            text-align: justify;
            color: #07183d
        }

        .icerik img {
            width: 100%;
            margin-bottom: 20px
        }

        .icerik .galeriGosterim {
            position: relative;
            border: 1px solid #d9d9d9;
            border-radius: 15px
        }

            .icerik .galeriGosterim .hDBefekt {
                margin-bottom: 20px;
                overflow: hidden;
                border-top-right-radius: 15px;
                border-top-left-radius: 15px
            }

                .icerik .galeriGosterim .hDBefekt img {
                    width: 100%;
                    margin-bottom: 0;
                    height: 15vw;
                    object-fit: contain;
                    transition: transform .2s
                }

            .icerik .galeriGosterim:hover .hDBefekt img {
                transform: scale(1.1)
            }

            .icerik .galeriGosterim .hDBtext {
                padding: 20px;
                padding-top: 0
            }

            .icerik .galeriGosterim .hDBkategori {
                background: #0160e7;
                color: #fff;
                padding: 6px 24px;
                position: absolute;
                top: 22px;
                right: 22px;
                z-index: 2
            }

    a.devam {
        text-decoration: underline !important;
        font-weight: 500
    }

    a.devamMedya {
        text-decoration: underline !important;
        font-weight: 400;
        font-size: 18px;
        text-align: center;
        display: block
    }

    a.devamRegular {
        text-decoration: underline !important;
        font-weight: 400
    }

    .icerik .galeriGosterim .tarih {
        color: #cacaca;
        display: block;
        text-align: right
    }

    .icerik .tab-content .tab-pane {
        padding: 0
    }

    .icerik .nav-pills .nav-link {
        background-color: #f7f7f7;
        border-radius: 20px;
        margin: 0 6px
    }

        .icerik .nav-pills .nav-link.active,
        .icerik .nav-pills .show > .nav-link {
            color: #fff;
            background-color: #ffffff;
            border-radius: 20px
        }

    .greyArea {
        background: #f7f7f7;
        padding-bottom: 72px;
        padding-top: 72px
    }

    .icerik .greyArea img {
        border-radius: 15px
    }

    .greyBoxArea {
        background: #f7f7f7;
        border-radius: 12px;
        margin-bottom: 15px;
    }

    .grey-box-area {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .bayilik {
        padding-top: 72px;
        padding-bottom: 72px
    }

    ul.enson {
        margin: 0;
        padding: 0;
        list-style: none
    }

        ul.enson li {
            display: block;
            border-bottom: 2px solid #f7f7f7;
            padding-bottom: 20px;
            margin-bottom: 20px
        }

            ul.enson li:last-child {
                border: none
            }

            ul.enson li a {
            }

                ul.enson li a img {
                    display: block;
                    width: auto
                }

        ul.enson .ensonyazi {
            font-size: 12px;
            font-weight: 600;
            display: inline-block
        }

        ul.enson .ensonyazitarih {
            font-size: 12px;
            font-weight: 400;
            color: #cacaca;
            margin-bottom: 12px;
            display: inline-block
        }

    .etiket {
        color: #fff;
        background-color: #0160e7;
        border-radius: 20px;
        margin-top: 12px;
        margin-right: 6px;
        margin-bottom: 12px;
        padding: 10px 22px;
        display: inline-block;
        font-size: 14px
    }

    .etiketGri {
        color: #07183d;
        background-color: #f7f7f7;
        border-radius: 20px;
        margin-top: 12px;
        margin-right: 6px;
        margin-bottom: 12px;
        padding: 10px 22px;
        display: inline-block;
        font-size: 14px
    }

    .avantaj {
        padding-top: 72px;
        padding-bottom: 72px
    }

    ul.avantajIkon {
        list-style: none
    }

        ul.avantajIkon li {
            padding: 14px 0
        }

            ul.avantajIkon li .fa-check-square-o {
                color: #0160e7;
                font-size: 22px
            }

    .projeFikri {
    }

        .projeFikri img {
            border-radius: 15px
        }

    .bircard {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .paysafe {
    }

    .sukart {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .odeme {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .mobilContainer {
        max-width: 1340px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
    }

    .mobilReklam {
        background: url(../../Content/images/reklamBG.png) repeat;
        min-height: 820px;
        padding-top: 200px
    }

        .mobilReklam .title {
            color: #565656;
            font-size: 42px;
            font-weight: 500;
            margin-bottom: 20px
        }

        .mobilReklam .miniTitle {
            color: #565656;
            font-size: 12px;
            font-weight: 400
        }

    .mobilTanitim {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .mobilHizmetler {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .card {
        box-shadow: none;
        border: none;
        border-radius: 0
    }

    .card-header {
        padding: 0;
        background: #fff
    }

    .accordion > .card > .card-header {
        margin-bottom: 0
    }

    .card-header {
        border-bottom: 1px solid #d9d9d9
    }

        .card-header .btn-link {
            margin: 0 !important;
            padding: 20px !important;
            padding-left: 0 !important;
            font-size: 18px;
            font-weight: 400;
            color: #6f6f6e;
            text-transform: none;
            width: 100%;
            text-align: left
        }

            .card-header .btn-link:after {
                content: "";
                font-size: 18px;
                float: right;
                text-align: right;
                font-family: FontAwesome;
                margin-top: 0
            }

            .card-header .btn-link:before {
                content: "";
                font-size: 22px;
                display: inline-block;
                text-align: left;
                font-family: FontAwesome;
                margin-top: 0;
                margin-right: 20px;
                line-height: normal
            }

            .card-header .btn-link:hover,
            .card-header .btn-link:focus,
            .card-header .btn-link:active {
                color: #0160e7;
                text-decoration: none
            }

    .accordion > .card:last-child .card-header {
        border-bottom: none
    }

    .mobilLink:hover {
        opacity: .8
    }

    .tabCihaz {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .cihazTab {
    }

        .cihazTab img {
            width: 100%
        }

    .tabCihaz .tab-content .tab-pane {
        padding: 0
    }

    .tabCihaz .nav-pills {
    }

        .tabCihaz .nav-pills .nav-item {
        }

        .tabCihaz .nav-pills .yavas {
            border: #f7f7f7 6px solid;
            background: #f7f7f7;
            color: #07183d;
            border-radius: 15px;
            margin: 0 6px;
            overflow: auto
        }

            .tabCihaz .nav-pills .yavas.active,
            .tabCihaz .nav-pills .show > .yavas {
                background: #ff8301;
                border: #feeedd 6px solid;
                box-shadow: #ff8301 0 0 20px;
                color: #fff;
                border-radius: 15px
            }

            .tabCihaz .nav-pills .yavas .cerceve {
            }

                .tabCihaz .nav-pills .yavas .cerceve img {
                    width: 100%
                }

            .tabCihaz .nav-pills .yavas span {
                margin-top: 20px;
                display: block
            }

    .page-item.active .page-link {
        background-color: #003f9b;
        border-color: #003f9b
    }

    .page-link {
        color: #003f9b
    }

    .history-slider {
        padding: 0 63px
    }

    @media screen and (max-width:767px) {
        .history-slider {
            padding: 0 30px
        }
    }

    .history-slider:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 100%;
        height: 1px;
        background-color: #b5bbbb
    }

    .history-slider .owl-item.current .item a {
        background-color: #0160e7;
        border: 0;
        color: #fff
    }

        .history-slider .owl-item.current .item a:after {
            content: "";
            border-top: 6px solid #0160e7;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent
        }

    .history-slider .owl-item.current .item:after {
        background-color: #e2e7e8
    }

    .history-slider .item {
        padding: 32px 0;
        text-align: center
    }

        .history-slider .item a {
            display: inline-block;
            width: 56px;
            color: #424b50;
            font-size: 14px;
            line-height: normal;
            border: 1px solid #b5bbbb;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            height: 24px;
            position: relative;
            top: -30px;
            text-align: center;
            padding: 3px 0;
            cursor: pointer
        }

            .history-slider .item a:after {
                content: "";
                border-top: 6px solid #b5bbbb;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                position: absolute;
                left: 0;
                right: 0;
                bottom: -6px;
                margin: auto;
                width: 11px;
                background-color: #fff;
                color: #b5bbbb
            }

        .history-slider .item:after {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border: 1px solid #b5bbbb;
            border-radius: 50px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            -ms-border-radius: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            cursor: pointer
        }

    .history-slider .owl-nav .owl-prev,
    .history-slider .owl-nav .owl-next {
        font-size: 2.05rem !important;
        border: 2px solid #b5bbbb !important;
        border-radius: 100% !important;
        -webkit-border-radius: 100% !important;
        -moz-border-radius: 100% !important;
        -ms-border-radius: 100% !important;
        width: 48px;
        height: 48px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: #fff !important;
        outline: none
    }

        .history-slider .owl-nav .owl-prev::before,
        .history-slider .owl-nav .owl-next::before {
            content: "";
            font-family: FontAwesome;
            position: absolute;
            left: -2px;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            color: #b5bbbb;
            width: 20px;
            height: 28px;
            text-align: center;
            line-height: 30px
        }

    @media screen and (max-width:767px) {

        .history-slider .owl-nav .owl-prev::before,
        .history-slider .owl-nav .owl-next::before {
            width: 8px;
            height: 17px;
            left: 0;
            line-height: 20px
        }

        #back2Top {
            display: none
        }
    }

    @media screen and (max-width:767px) {

        .history-slider .owl-nav .owl-prev,
        .history-slider .owl-nav .owl-next {
            width: 24px;
            height: 24px;
            font-size: 1.2rem;
            border-width: 1px
        }
    }

    .history-slider .owl-nav .owl-next {
        left: auto;
        right: 0
    }

        .history-slider .owl-nav .owl-next:before {
            content: "";
            left: 2px
        }

    @media screen and (max-width:767px) {
        .history-slider .owl-nav .owl-next:before {
            width: 8px;
            height: 17px;
            left: -3px
        }
    }

    .history-content .item + .item {
        display: none
    }

    .cihazslider {
    }

        .cihazslider .slick-slide {
            padding: 1.4rem
        }

            .cihazslider .slick-slide img {
                display: inline-block
            }

    .haberslider {
        margin: 20px 0;
        padding: 0
    }

        .haberslider .linkler {
            display: block;
            border-bottom: 1px solid #b2c1d9
        }

            .haberslider .linkler a {
            }

    .cozum {
        padding-top: 72px;
        padding-bottom: 36px
    }

        .cozum .overflow-hidden {
            padding-bottom: 40px;
            padding-top: 40px
        }

    .ozellik {
        padding-top: 72px;
        padding-bottom: 36px
    }

    .isModelleri {
        padding-top: 72px;
        padding-bottom: 36px
    }

        .isModelleri .isMadde {
            margin-bottom: 40px
        }

            .isModelleri .isMadde h6 {
                font-size: 16px;
                color: #606060;
                margin-bottom: 10px
            }

            .isModelleri .isMadde p {
                font-size: 14px;
                color: #606060;
                line-height: 24px
            }

    .hizmetler {
        padding-top: 1.5rem !important;
        padding-bottom: 0;
        background: #f7f7f7
    }

        .hizmetler ul.avantajIkon {
            padding: 0
        }

        .hizmetler .ok1 {
            background: url(../../Content/images/pazarlama/ok1.png) center right no-repeat;
            min-height: 330px;
            text-align: left
        }

        .hizmetler .ok2 {
            background: url(../../Content/images/pazarlama/ok2.png) center left no-repeat;
            min-height: 330px;
            text-align: right
        }

    .koyuPlan {
        background: #3c3c3b
    }

        .koyuPlan h2,
        .koyuPlan ul.avantajIkon li {
            color: #fff
        }

            .koyuPlan ul.avantajIkon li .fa-check-square-o {
                color: #e9c200
            }

    .neden {
        padding-top: 72px;
        padding-bottom: 36px
    }

    .bayiCihazTab {
        padding-top: 72px;
        padding-bottom: 72px
    }

        .bayiCihazTab ul.avantajIkon {
            border-right: 1px solid #707070
        }

        .bayiCihazTab .tab-content .tab-pane {
            padding: 0
        }

        .bayiCihazTab .nav-pills {
            box-shadow: 0 0 10px 2px rgba(42, 67, 113, .15);
            -webkit-box-shadow: 0 0 10px 2px rgba(42, 67, 113, .15);
            -moz-box-shadow: 0 0 10px 2px rgba(42, 67, 113, .15);
            padding: 8px 4px;
            border-radius: 30px
        }

            .bayiCihazTab .nav-pills .nav-link {
                background-color: #fff;
                border-radius: 20px;
                margin: 0 6px
            }

                .bayiCihazTab .nav-pills .nav-link.active,
                .bayiCihazTab .nav-pills .show > .nav-link {
                    color: #fff;
                    background-color: #0160e7;
                    border-radius: 20px;
                    box-shadow: 0 2px 6px 3px rgba(3, 5, 8, .25);
                    -webkit-box-shadow: 0 2px 6px 3px rgba(3, 5, 8, .25);
                    -moz-box-shadow: 0 2px 6px 3px rgba(3, 5, 8, .25)
                }

    .deger {
        padding-top: 36px;
        padding-bottom: 0;
        background: #f7f7f7
    }

        .deger .ok {
            background: url(../../Content/images/pazarlama/430.png) center right no-repeat;
            min-height: 430px
        }

        .deger ul.avantajIkon {
            padding: 0
        }

    .magazaAvantaj {
        padding-top: 72px;
        padding-bottom: 72px;
        background: #f7f7f7
    }

        .magazaAvantaj ul.avantajIkon {
            padding: 0
        }

            .magazaAvantaj ul.avantajIkon li .fa-check-square-o {
                color: #e9c200
            }

        .magazaAvantaj .boxArea {
            background: #3c3c3b;
            padding: 20px !important;
            border-radius: 15px;
            display: block;
            box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15)
        }

            .magazaAvantaj .boxArea h2 {
                color: #fff
            }

    .yapabilirim {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .evrak {
        padding-top: 72px;
        padding-bottom: 72px;
        background: #f7f7f7
    }

        .evrak ul.avantajIkon {
            padding: 0
        }

        .evrak .boxArea {
            box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            background: #fff;
            padding: 40px !important
        }

        .evrak .ok {
            background: url(../../Content/images/pazarlama/387.png) center center no-repeat #fff;
            min-height: 387px
        }

    .kazanc {
        padding-top: 72px;
        padding-bottom: 72px;
        background: #f7f7f7
    }

        .kazanc .tableOnlineIslemler {
            min-width: 800px
        }

            .kazanc .tableOnlineIslemler .greyBg {
                background-color: #ececec
            }

        .kazanc .text-primary {
            width: 54px
        }

    .tableOnlineIslemler .blueBg {
        padding: 4px 34px;
        font-size: 22px
    }

    .ucAdim {
        background: #f7f7f7;
        padding-top: 72px;
        padding-bottom: 72px
    }

        .ucAdim .container {
            background: url(../../Content/images/ok1.svg) left center no-repeat;
            background-size: contain
        }

        .ucAdim h4 {
            margin-left: 50px;
            font-size: 20px
        }

    .adim {
        max-height: 140px;
        margin-bottom: 20px
    }

    .faturalar {
        max-height: 80px;
        margin-bottom: 20px
    }

    .faturaLink {
        display: block
    }

        .faturaLink h5 {
            -ms-transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -o-transition: .3s;
            transition: .3s
        }

    .sorgulamaOdeme {
        background-color: #84b943;
    }

        .sorgulamaOdeme .detay {
            font-size: 18px;
            font-weight: 400;
            display: inline-block
        }

        .sorgulamaOdeme .maviTabAlan {
        }

    .faturaAdet {
        display: flex;
    }

    .ftadet {
    }

    .faturaAdet span {
        color: #00bb32;
        display: block
    }

    .toplamTutar {
        text-align: right
    }

        .toplamTutar span {
            color: #84b943;
            font-size: 24px;
            display: block;
            font-weight: 500;
        }

    ul.sepetFatura {
        font-size: 12px;
        font-weight: 300;
        color: #6f6f6e;
        padding: 0;
        margin: 0;
        list-style: none
    }

        ul.sepetFatura li {
            border-bottom: 1px solid #e4e4e4;
            padding-bottom: 12px;
            margin-bottom: 12px
        }

            ul.sepetFatura li:last-child {
                border: none
            }

        ul.sepetFatura i {
            color: #00bb32
        }

    .y1 {
        font-size: 18px;
        font-weight: 300
    }

    .y2 {
        font-size: 18px;
        font-weight: 400
    }

    .y3 {
        font-size: 24px;
        font-weight: 300
    }

    .y4 {
        font-size: 10px;
        font-weight: 300
    }

    .y5 p {
        font-size: 16px;
        font-weight: 300;
        color: #6f6f6e
    }

    .y5 h5 {
        color: #6f6f6e
    }

    .y6 {
        font-size: 12px;
        font-weight: 300
    }

    .magazaTeklif {
        padding-bottom: 72px;
        padding-top: 72px
    }

        .magazaTeklif table {
            font-size: 18px;
            color: #07183d
        }

            .magazaTeklif table tr td {
                padding: 8px
            }

            .magazaTeklif table tr th {
                padding: 8px;
                font-weight: 500
            }

    .maviTabAlan .tab-content .tab-pane {
        padding: 0
    }

    .maviTabAlan .nav-pills .nav-link {
        border-radius: 15px;
        margin: 0 6px;
        color: #fff;
        padding: 10px 0
    }

        .maviTabAlan .nav-pills .nav-link.active,
        .maviTabAlan .nav-pills .show > .nav-link {
            color: #84b943;
            transition: 0.3s;
            border-radius: 20px;
            padding: 10px 0;
            height: 100%;
            background-color: transparent;
        }

    .maviTabAlan .nav-justified .nav-item {
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 20px;
        margin-right: 10px;
    }

        .maviTabAlan .nav-justified .nav-item:hover {
            background-color: #e6e8eb;
        }


    .maviTabAlan .odemeLink svg {
        width: 60px;
        max-height: 64px;
        margin-bottom: 10px
    }

    .maviTabAlan .odemeLink li a svg {
        fill: white
    }

    .maviTabAlan .odemeLink li a.active svg {
        fill: #ffffff
    }

    .maviTabAlan .odemeLink li a h5 {
        color: #fff;
        margin-bottom: 0;
        font-size: 17px;
    }

    .maviTabAlan .odemeLink li a.active h5 {
        color: #ffffff;
        font-size: 15px;
    }

    .faturaLink svg {
        width: auto;
        max-height: 100px;
        margin-bottom: 20px
    }

        .faturaLink svg .gradient1 {
            fill: url("#grad1")
        }

        .faturaLink svg .gradient2 {
            fill: url("#grad2")
        }

        .faturaLink svg use {
            transition: .5s;
            opacity: 0
        }

    .faturaLink:hover svg use {
        opacity: 1
    }

    .faturaLink:hover h5 {
        color: #003dc6
    }

    #su {
        animation: su 3s ease-in-out infinite
    }

    @keyframes su {
        from {
            transform: translate(0, -9px);
            opacity: 0
        }

        to {
            transform: translate(0, 3px);
            opacity: 1
        }
    }

    #net2 {
        animation: net2 3s ease-in-out infinite
    }

    @keyframes net2 {
        from {
            transform: translate(-3px, 0);
            opacity: 0
        }

        to {
            transform: translate(0, 0);
            opacity: 1
        }
    }

    #net3 {
        animation: net3 3s ease-in-out infinite;
        animation-delay: 1s;
        visibility: hidden
    }

    @keyframes net3 {
        from {
            transform: translate(-3px, 0);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible
        }
    }

    #net4 {
        animation: net4 3s ease-in-out infinite;
        animation-delay: 2s;
        visibility: hidden
    }

    @keyframes net4 {
        from {
            transform: translate(-3px, 0);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible
        }
    }

    #net7 {
        animation: net7 3s ease-in-out infinite
    }

    @keyframes net7 {
        from {
            transform: translate(0, 3px);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible
        }
    }

    #net6 {
        animation: net6 3s ease-in-out infinite;
        animation-delay: 1s;
        visibility: hidden
    }

    @keyframes net6 {
        from {
            transform: translate(0, 3px);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible
        }
    }

    #net5 {
        animation: net5 3s ease-in-out infinite;
        animation-delay: 2s;
        visibility: hidden
    }

    @keyframes net5 {
        from {
            transform: translate(0, 3px);
            opacity: 0;
            visibility: hidden
        }

        to {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible
        }
    }

    .line {
        padding-bottom: 20px;
        border-bottom: 2px solid #07183d;
        margin-bottom: 58px
    }

    .magaza {
        padding-top: 72px;
        padding-bottom: 72px
    }

        .magaza .bolum1 {
            background: url(../../Content/images/ok2.svg) right center no-repeat;
            background-size: contain
        }

        .magaza .bolum2 {
            background: url(../../Content/images/ok1.svg) left center no-repeat;
            background-size: contain
        }

    .cihazCozum {
        background: #f7f7f7;
        padding-top: 72px;
        padding-bottom: 36px
    }

        .cihazCozum .container {
            background: url(../../Content/images/ok1.svg) left center no-repeat;
            background-size: contain
        }

    .kurumsalCozum {
        padding-top: 72px;
        padding-bottom: 72px
    }

        .kurumsalCozum .bgPoint {
        }

        .kurumsalCozum .point {
            margin-left: 40px;
            padding-bottom: 40px;
            position: relative
        }

            .kurumsalCozum .point:after {
                content: "";
                position: absolute;
                left: -45px;
                top: 0;
                background-color: #f0f6ff;
                border: 4px solid #707070;
                width: 30px;
                height: 30px;
                border-radius: 15px
            }

            .kurumsalCozum .point:before {
                content: "";
                position: absolute;
                left: -31px;
                border-left: 2px dashed #a7a9ac;
                height: 100%;
                width: 2px
            }

            .kurumsalCozum .point:first-child:before {
                top: 6px
            }

            .kurumsalCozum .point:last-child:before {
                height: 6px
            }

            .kurumsalCozum .point p {
                text-align: justify
            }

            .kurumsalCozum .point a {
                text-align: left
            }

        .kurumsalCozum .kutular {
            position: relative;
            display: block;
            width: 100%;
            height: 100%
        }

            .kurumsalCozum .kutular .kutu1 {
                display: inline-block;
                position: absolute;
                top: 0;
                left: 136px;
                animation: kutu1 6s linear infinite alternate
            }

            .kurumsalCozum .kutular .kutu2 {
                display: inline-block;
                position: absolute;
                top: 10%;
                left: 40%
            }

            .kurumsalCozum .kutular .kutu3 {
                display: inline-block;
                position: absolute;
                bottom: 316px;
                right: 0;
                animation: kutu3 12s linear infinite alternate
            }

    @keyframes kutu1 {
        0% {
            transform: translate(0, 0) rotate(0deg)
        }

        50% {
            transform: translate(0, 30px) rotate(10deg)
        }

        100% {
            transform: translate(20px, 0) rotate(20deg)
        }
    }

    @keyframes kutu3 {
        0% {
            transform: translate(0, 0) rotate(0deg)
        }

        50% {
            transform: translate(0, -30px) rotate(-20deg)
        }

        100% {
            transform: translate(-20px, 0) rotate(10deg)
        }
    }

    .haber {
        padding-bottom: 72px;
        padding-top: 72px
    }

        .haber .container {
            background: url(../../Content/images/ok2.svg) center center no-repeat;
            background-size: contain
        }

        .haber .boxArea h5 {
            font-size: 16px;
            font-weight: 500
        }

        .haber .boxArea p {
            font-size: 14px
        }

    .giris {
    }

    .boxArea {
        padding: 3rem !important;
        border-radius: 15px;
        display: block;
        -webkit-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -o-transition: all .3s linear;
        transition: all .3s linear
    }

        .boxArea:hover {
            box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15)
        }

            .boxArea:hover span.detay {
                color: #003ec7
            }

            .boxArea:hover span.detayMavi {
                opacity: .8
            }

        .boxArea p {
        }

        .boxArea .detay {
            font-weight: 500
        }

    .odeme .boxArea {
        box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        background: #f7f7f7;
        padding: 30px 70px !important
    }

    .haberAkisi .boxArea {
        box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        background: #f7f7f7;
        padding: 40px !important
    }

    .duyuru .boxArea {
        box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
        background: #f7f7f7;
        padding: 20px !important
    }

    .magazaFirsat {
    }

        .magazaFirsat .boxArea {
            box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, .15);
            background: #f7f7f7;
            padding: 26px 14px !important;
            position: relative
        }

            .magazaFirsat .boxArea img {
                width: 100%;
                margin-bottom: 10px
            }

            .magazaFirsat .boxArea .detayMaviTek {
                position: absolute;
                bottom: -12px;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                right: 0;
                width: 114px
            }

            .magazaFirsat .boxArea .duzMavi {
                position: absolute;
                bottom: -12px;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                right: 0;
                width: 130px
            }

    .magazaArama {
        padding-bottom: 72px;
        padding-top: 72px
    }

    .textAreaForm {
        position: relative
    }

        .textAreaForm .textAreaDipNot {
            position: absolute;
            bottom: -12px;
            right: 20px;
            color: #07183d;
            font-size: 10px
        }

    .textArea {
    }

        .textArea p {
            text-align: justify
        }

    .genelMudurAdres {
        padding-top: 72px
    }

        .genelMudurAdres ul.gnAdres {
            margin: 0;
            padding: 0;
            list-style: none
        }

            .genelMudurAdres ul.gnAdres li {
                padding: 20px;
                padding-left: 54px;
                border-bottom: 1px solid #e4e4e4;
                height: 85px
            }

                .genelMudurAdres ul.gnAdres li.konumIkon {
                    background: url(../../Content/images/konum.png) left center no-repeat
                }

                .genelMudurAdres ul.gnAdres li.telIkon {
                    background: url(../../Content/images/tel.png) left center no-repeat
                }

                .genelMudurAdres ul.gnAdres li.mailIkon {
                    background: url(../../Content/images/mail.png) left center no-repeat
                }

                .genelMudurAdres ul.gnAdres li.mhIkon {
                    background: url(../../Content/images/ms.png) left center no-repeat
                }

                .genelMudurAdres ul.gnAdres li:last-child {
                    border: none
                }

    .genelMudurForm {
        padding-bottom: 72px;
        padding-top: 72px
    }

    .genelMudurluk {
        max-width: 770px;
        margin: 0 auto
    }

    .adresBolumu {
        position: relative;
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 16px;
        margin-bottom: 16px
    }

        .adresBolumu .il {
            font-weight: 500
        }

            .adresBolumu .il i {
                color: #0160e7;
                position: absolute;
                left: -18px;
                font-size: 22px
            }

        .adresBolumu p {
            font-size: 14px;
            line-height: 20px;
            text-align: left
        }

        .adresBolumu a {
            font-weight: 500
        }

    #map {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 650px;
        margin-bottom: 20px
    }

    #mapMini {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 320px;
        margin-bottom: 20px
    }


    .telefonSifre {
        padding-bottom: 72px;
        padding-top: 72px
    }

    .miniLink {
        font-size: 10px;
        font-weight: 300;
        text-decoration: underline
    }

    .sure {
        font-size: 20px;
        font-weight: 300
    }

        .sure b {
            font-weight: 500
        }

    .kod {
        font-size: 16px;
        font-weight: 400;
        text-decoration: underline
    }

    .cizgi {
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e4e4
    }

    .uA {
        font-size: 18px;
        color: #07183d
    }

    .dipNot {
        line-height: 16px;
        font-size: 14px;
        font-weight: 400;
        text-align: justify
    }

    .profil {
        padding-bottom: 72px;
        padding-top: 72px
    }

        .profil .profilImg {
            display: inline-block;
            text-align: center
        }

            .profil .profilImg img {
                width: 130px;
                height: 130px;
                border: 4px solid #0160e7;
                border-radius: 70px
            }

        .profil .maviProfilAlan {
            background: #0160e7;
            color: #6f6f6e;
            border-radius: 15px;
            height: 140px;
            margin-bottom: 30px;
            padding: 20px
        }

            .profil .maviProfilAlan img {
                width: 100px;
                height: 100px;
                border: 4px solid #ef8022
            }

            .profil .maviProfilAlan span.karsilama {
                font-size: 26px;
                color: #fff;
                font-weight: 400;
                margin-left: 40px
            }

    .modal-dialog .modal-content {
        border-radius: 15px;
        background: #f7f7f7
    }

        .modal-dialog .modal-content .modal-header {
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            background: #84b943
        }

    .modal-title {
        color: #fff;
        font-weight: 500
    }

    .modal-header .close {
        color: #fff;
        opacity: 1
    }

    .footer {
        background: #003f9b;
        padding: 40px 0
    }

        .footer h5 {
            color: #fff
        }

        .footer a,
        .footer p {
           
            font-size: 14px;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -o-transition: .3s;
            transition: .3s
        }

            .footer a:hover {
                color: #e4effa
            }

        .footer ul.footLinks {
            list-style: none;
            margin: 0;
            padding: 0
        }

            .footer ul.footLinks li {
            }

        .footer .adres h5 {
            text-align: right
        }

        .footer .adres p,
        .footer .adres a {
            text-align: right
        }

        .footer .social a {
            margin-right: 12px
        }

            .footer .social a i {
                font-size: 46px
            }

        .footer hr {
            border: 1px solid #fff;
            margin-bottom: 10px
        }

        .footer .white-text {
            margin: 0;
            font-size: 12px
        }

    .koyuFooter {
        background: #3c3c3b
    }

    .mobilenavbar-collapse {
        display: none
    }

    @media only screen and (max-width:1600px) {
        .header .showsliderBayilik .sliderArea .saydam {
            background-color: #fff;
            opacity: .8;
            padding: 20px;
            border-radius: 15px;
            height: 700px
        }
    }

    @media only screen and (max-width:1400px) {
        .header .menu .logo {
            margin: 0 0 0 40px
        }

        .header .showslider .sliderArea h2 {
            margin-left: 40px
        }

        .header .showslider .sliderArea p {
            margin-left: 40px;
            max-width: 476px
        }

        .header .showslider .sliderArea .detayTuruncu {
            margin-left: 20px
        }

        .header .showslider .sliderArea .image1 {
            top: 80%
        }

        .header .showslider .sliderArea .finish {
            top: 30% !important
        }

        .header .showslider .sliderArea .image3 {
            top: 85%;
            left: 36%
        }

        .header .buyukButonlar .buton1 {
            right: -142px
        }

        .header .buyukButonlar .buton2 {
            right: -224px
        }

        .header .buyukButonlar .buton3 {
            right: -316px
        }

        .header .buyukButonlar .buton4 {
            right: -316px;
            bottom: -24%
        }

        .header .buyukButonlar .buton1:hover {
            right: -101px
        }

        .header .buyukButonlar .buton2:hover {
            right: -183px
        }

        .header .buyukButonlar .buton3:hover {
            right: -264px
        }

        .header .buyukButonlar .buton4:hover {
            right: -264px
        }

        .header .altButonlar {
            margin-left: 40px
        }
    }

    @media only screen and (max-width:1240px) {
        .header .showsliderBayilik .sliderArea {
            margin-top: 56px
        }

        .header .showslider .sliderArea h2 {
            top: 20%
        }

        .header .showslider .sliderArea .detayTuruncu {
            top: 78%
        }

        .header .showslider .sliderArea .image1,
        .header .showslider .sliderArea .image2,
        .header .showslider .sliderArea .image3 {
            display: none
        }

        .header .showslider {
            background-size: auto
        }

            .header .showslider .sliderArea {
                height: 420px
            }

        .header .buyukButonlar {
            position: relative;
            right: 0;
            top: 0;
            height: auto
        }

            .header .buyukButonlar .tr {
                position: relative;
                right: 0 !important;
                width: 100%;
                height: 82px;
                margin-bottom: 1px;
                background: #ec7610;
                padding-left: 10px
            }

        .header .altButonlar {
            bottom: 300px;
            right: 20px;
            margin-left: 40px
        }

        .header .svgYukseklik1 {
            width: 40px;
            height: 40px
        }

        .header .altButonlar a {
            font-size: 14px
        }

        .header .buyukButonlar .buton4 {
            display: none
        }

        .footer .adres h5 {
            text-align: left
        }

        .footer .adres p,
        .footer .adres a {
            text-align: left
        }

        .tabCihaz .nav-pills {
            display: block
        }

            .tabCihaz .nav-pills .yavas .cerceve {
                float: left;
                width: 46px
            }

            .tabCihaz .nav-pills .nav-item {
                margin-bottom: 10px
            }

            .tabCihaz .nav-pills .yavas span {
                margin-top: 8px
            }

        .cihazTab img {
            margin-bottom: 20px
        }

        .navbar-expand-lg .navbar-collapse {
            display: none !important
        }

        .navbar-expand-lg .mobilenavbar-collapse {
            display: block !important;
            flex: auto
        }

        .mobilenavbar-collapse .btn-group .searchButton {
            box-shadow: none;
            border-radius: 20px !important;
            padding: 6px 15px;
            margin: 0
        }

        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: #f7f7f7;
            overflow-x: hidden;
            padding-top: 60px
        }

            .sidenav a {
                padding: 8px 16px;
                text-decoration: none;
                font-size: 18px;
                color: #07183d;
                display: block;
                background-color: transparent;
                border: none;
                font-weight: 500
            }

            .sidenav .step a {
                padding-left: 22px;
                font-weight: 300
            }

            .sidenav .step .step a {
                padding-left: 28px
            }

            .sidenav img {
                width: 30px;
                height: 20px;
                margin-right: 10px
            }

            .sidenav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 36px;
                margin-left: 50px
            }

        .navbar-collapse .list-group.panel > .list-group-item {
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px
        }

        .navbar-collapse .list-group-submenu {
            margin-left: 20px
        }

        .mobilMenuButton {
            font-size: 30px;
            cursor: pointer;
            float: right;
            color: #07183d
        }
    }

    @media only screen and (max-width:768px) {
        .header .menu .mobilMenuButton {
            color: #fff
        }

        .header .menu.scrolled .mobilMenuButton {
            color: #07183d
        }

        .profil .maviProfilAlan span.karsilama {
            font-size: 16px;
            margin-left: 14px
        }

        .tableOnlineIslemler {
            display: block;
            overflow-x: auto
        }

        .kazanc .tableOnlineIslemler {
            display: table
        }

        .hizmetler .ok1 {
            background: none;
            min-height: auto;
            text-align: left
        }

        .hizmetler .ok2 {
            background: none;
            min-height: auto;
            text-align: left
        }

        .bayilikBar {
            margin-top: 110px
        }

            .bayilikBar h2 {
                font-size: 32px;
                text-align: center;
                padding: 0;
                margin-left: 0
            }

            .bayilikBar ul li {
                font-size: 18px;
                background: none;
                padding: 0;
                text-align: center;
                line-height: 40px
            }

            .bayilikBar .pl-5 {
                padding: 0 !important;
                padding-top: 60px !important
            }

        .bayilikHeader {
            background-image: url(../../Content/images/pazarlama/bayilikMobil.png);
            height: auto
        }

        .sorgulamaOdeme .maviTabAlan {
        }

        .maviTabAlan .nav-pills {
            display: block;
            flex: none
        }

            .maviTabAlan .nav-pills .nav-item {
            }

            .maviTabAlan .nav-pills .nav-link {
                border-radius: 0;
                margin: 6px 6px;
                color: #fff;
                padding: 10px 0
            }

        .maviTabAlan .odemeLink li a svg {
            display: inline-block;
            width: 40px;
            margin: 0;
            height: 40px;
            margin-right: 20px
        }

        .maviTabAlan .odemeLink li a h5 {
            display: inline-block;
            width: 120px
        }

        .maviTabAlan .nav-pills .nav-link.active,
        .maviTabAlan .nav-pills .show > .nav-link {
            border-radius: 0;
            margin-left: auto;
            margin-right: auto;
        }

        .icerik .nav-justified .nav-item {
            flex: none;
            display: block;
            width: 100%;
            margin-bottom: 14px
        }

        .icerik .galeriGosterim .hDBefekt img {
            height: auto
        }

        .bayiCihazTab .nav-justified .nav-item {
            flex: none;
            display: block;
            width: 100%;
            margin-bottom: 14px
        }

        .bayiCihazTab ul.avantajIkon {
            border: none
        }

        .header .showsliderBayilik .sliderArea .saydam {
            background-color: #fff;
            opacity: .8;
            padding: 20px;
            border-radius: 15px;
            height: 700px
        }

        .header .links {
            margin-left: 20px;
            margin-right: 20px
        }

        .header .showsliderBayilik .sliderArea .odul {
            margin: 0
        }

        .ucAdim h4 {
            margin-left: 7px;
            font-size: 14px
        }

        .kurumsalCozum .kutular .kutu1 {
            position: relative;
            top: 0;
            left: 0;
            animation: kutu1 6s linear infinite alternate
        }

        .kurumsalCozum .kutular .kutu2 {
            position: relative;
            top: 0;
            left: 0;
            text-align: center
        }

        .kurumsalCozum .kutular .kutu3 {
            position: relative;
            bottom: 0;
            right: 0;
            animation: kutu3 12s linear infinite alternate
        }

        .maviBarAlan {
            background-image: linear-gradient(to right, #003dc6, #0068e5);
            padding: 20px
        }

            .maviBarAlan .row {
                height: auto
            }

            .maviBarAlan h2 {
                font-size: 20px
            }

            .maviBarAlan p {
                line-height: 18px
            }

            .maviBarAlan .mobilEl {
                display: none
            }

        .bayilikBasvuru {
            display: none
        }

        .bayilikBasvuruSari {
            display: none
        }

        .bayilikBasvuruMobil {
            display: block;
            background: url(../../Content/images/pazarlama/basvuruMobil.png) top center no-repeat #0061df;
            text-align: center;
            height: 106px;
            width: 100%
        }

        .bayilikBasvuruSariMobil {
            display: block;
            background: url(../../Content/images/pazarlama/basvuruSariMobil.png) top center no-repeat #e9c200;
            text-align: center;
            height: 106px;
            width: 100%
        }

        .adresBolumu .il i {
            position: relative;
            left: 0;
            margin-right: 18px
        }
    }

    .loader {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: "proxima-nova-soft", sans-serif;
        -webkit-user-select: none;
        overflow: hidden
    }

        .loader .vertical-centered-box {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            z-index: 2
        }

            .loader .vertical-centered-box:after {
                content: '';
                display: inline-block;
                height: 100%;
                vertical-align: middle;
                margin-right: -.25em
            }

            .loader .vertical-centered-box .content {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                display: inline-block;
                vertical-align: middle;
                text-align: left;
                font-size: 0;
                background: #fff;
                width: 130px;
                height: 130px;
                border-radius: 50%
            }

                .loader .vertical-centered-box .content > img {
                    transform: translate(-50%, -50%);
                    top: 50%;
                    position: relative;
                    left: 50%
                }

        .loader #prism-logo path {
            stroke: #fff;
            stroke-width: 10px
        }

        .loader .loader-circle {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            box-shadow: inset 0 0 0 5px rgba(1, 91, 231, .1);
            margin-left: -60px;
            margin-top: -60px
        }

        .loader .loader-line-mask {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 60px;
            height: 120px;
            margin-left: -60px;
            margin-top: -60px;
            overflow: hidden;
            -webkit-transform-origin: 60px 60px;
            -moz-transform-origin: 60px 60px;
            -ms-transform-origin: 60px 60px;
            -o-transform-origin: 60px 60px;
            transform-origin: 60px 60px;
            -webkit-mask-image: -webkit-linear-gradient(top, #000, rgba(0, 0, 0, 0));
            -webkit-animation: rotate 1.2s infinite linear;
            -moz-animation: rotate 1.2s infinite linear;
            -o-animation: rotate 1.2s infinite linear;
            animation: rotate 1.2s infinite linear
        }

            .loader .loader-line-mask .loader-line {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                box-shadow: inset 0 0 0 5px rgba(0, 56, 120, .8)
            }

        .loader #particles-background,
        .loader #particles-foreground {
            left: -51%;
            top: -51%;
            width: 200%;
            height: 202%;
            -webkit-transform: scale3d(.5, .5, 1);
            -moz-transform: scale3d(.5, .5, 1);
            -ms-transform: scale3d(.5, .5, 1);
            -o-transform: scale3d(.5, .5, 1);
            transform: scale3d(.5, .5, 1)
        }

        .loader #particles-background {
            background: rgba(255, 255, 255, .5)
        }

        .loader lesshat-selector {
            -lh-property: 0
        }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotate {
        0% {
            -moz-transform: rotate(0deg)
        }

        100% {
            -moz-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotate {
        0% {
            -o-transform: rotate(0deg);
        }

        100% {
            -o-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    [not-existing] {
        zoom: 1
    }

    lesshat-selector {
        -lh-property: 0
    }

    @-webkit-keyframes fade {
        0% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    @-moz-keyframes fade {
        0% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    @-o-keyframes fade {
        0% {
            opacity: 1;
        }

        50% {
            opacity: .25;
        }
    }

    @keyframes fade {
        0% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    [not-existing] {
        zoom: 1
    }

    lesshat-selector {
        -lh-property: 0
    }

    @-webkit-keyframes fade-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @-moz-keyframes fade-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @-o-keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    [not-existing] {
        zoom: 1
    }

    .dropdown-menu {
        left: 28px
    }

    .dropdown-menu,
    .header .menu .navbar-collapse ul ul {
        border-radius: .5rem;
        left: 28px
    }

        .header .menu .navbar-collapse ul ul ul {
            left: 98%;
            border-top-right-radius: .5rem;
            border-bottom-right-radius: .5rem
        }

    .mobilTanitimSlide .slick-dots li button {
        width: 10px;
        height: 10px;
        background: #6c757d;
        border-radius: 50%
    }

        .mobilTanitimSlide .slick-dots li button:before {
            display: none
        }

    .mobilTanitimSlide .slick-dots li.slick-active button {
        background: #0160e7
    }

    .boxArea {
        padding: 2rem !important
    }

    .cihazslider .slick-slide {
        padding: 2rem
    }

    .cozum .overflow-hidden {
        overflow: unset !important
    }

    .news-title {
        text-overflow: ellipsis;
        height: 48px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .ucAdimd h4 {
        margin-left: 40px;
        font-size: 1.25em
    }

    .bayilikBar .duzTuruncu {
        padding: 5px 24px 5px 24px;
        line-height: 18px
    }

    .bayilikBar .duzMavi {
        padding: 5px 24px 5px 24px;
        line-height: 18px
    }

    .detayTuruncu {
        background-color: #f7941d !important;
        background-image: linear-gradient(to right, #f7941d, #fbb040);
        color: #fff;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        padding: 6px 8px 6px 24px;
        margin: 0;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

        .detayTuruncu:hover,
        .detayTuruncu:focus,
        .detayTuruncu:active {
            background: #fbb040 !important
        }

        .detayTuruncu:not([disabled]):not(.disabled):active,
        .detayTuruncu:not([disabled]):not(.disabled).active,
        .show > .detayTuruncu.dropdown-toggle {
            background-color: #de8d13 !important
        }

    .detayFinish {
        background-color: #fff !important;
        color: #1867c9;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        padding: 6px 8px 6px 6px;
        margin: 0;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

    .detayFinish2 {
        background-color: #f7941d !important;
        background-image: linear-gradient(to right, #f7941d, #fbb040);
        color: #fff;
        border-radius: 24px;
        font-weight: 500;
        box-shadow: none;
        padding: 6px 8px 6px 6px;
        margin: 0;
        text-transform: none;
        font-size: 14px;
        min-width: 150px
    }

    .imgFonleft {
        height: 422px
    }

    .imgFonright {
        height: 422px
    }

        .imgFonleft img,
        .imgFonright img {
            width: 100%
        }

    .temsilciListesi .adresBolumu {
        border: none
    }

        .temsilciListesi .adresBolumu .il i {
            left: -15px
        }

    .temsilciListesi .harita-link {
        border-bottom: 1px solid #e4e4e4
    }

        .temsilciListesi .harita-link a {
            left: 0;
            color: #0056b3;
            margin-bottom: 10px
        }

    .table {
        white-space: nowrap
    }

    .temsilciListesi .adresBolumu .il i {
        left: 0;
        margin-right: 0
    }

    .temsilciListesi .adresBolumu .il i {
        left: -10px;
        margin-right: 0;
        text-indent: -10px
    }

    #faturalistesi .form-check {
        padding-left: 1.5rem
    }

    #prism-logo path {
        stroke: #fff;
        stroke-width: 10px
    }

    .loader-circle {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 5px rgba(1, 91, 231, .1);
        margin-left: -60px;
        margin-top: -60px
    }

    .loader-line-mask {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        overflow: hidden;
        -webkit-transform-origin: 60px 60px;
        -moz-transform-origin: 60px 60px;
        -ms-transform-origin: 60px 60px;
        -o-transform-origin: 60px 60px;
        transform-origin: 60px 60px;
        -webkit-mask-image: -webkit-linear-gradient(top, #000, rgba(0, 0, 0, 0));
        -webkit-animation: rotate 1.2s infinite linear;
        -moz-animation: rotate 1.2s infinite linear;
        -o-animation: rotate 1.2s infinite linear;
        animation: rotate 1.2s infinite linear
    }

        .loader-line-mask .loader-line {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            box-shadow: inset 0 0 0 5px rgba(0, 56, 120, .8)
        }

    #particles-background,
    #particles-foreground {
        left: -51%;
        top: -51%;
        width: 202%;
        height: 202%;
        -webkit-transform: scale3d(.5, .5, 1);
        -moz-transform: scale3d(.5, .5, 1);
        -ms-transform: scale3d(.5, .5, 1);
        -o-transform: scale3d(.5, .5, 1);
        transform: scale3d(.5, .5, 1)
    }

    #particles-background {
        background: #fff
    }

    lesshat-selector {
        -lh-property: 0
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotate {
        0% {
            -moz-transform: rotate(0deg)
        }

        100% {
            -moz-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotate {
        0% {
            -o-transform: rotate(0deg);
        }

        100% {
            -o-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    [not-existing] {
        zoom: 1
    }

    lesshat-selector {
        -lh-property: 0
    }

    @-webkit-keyframes fade {
        0% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    @-moz-keyframes fade {
        0% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    @-o-keyframes fade {
        0% {
            opacity: 1;
        }

        50% {
            opacity: .25;
        }
    }

    @keyframes fade {
        0% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    [not-existing] {
        zoom: 1
    }

    lesshat-selector {
        -lh-property: 0
    }

    @-webkit-keyframes fade-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @-moz-keyframes fade-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @-o-keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    [not-existing] {
        zoom: 1
    }
    /*mask*/

    .wf-form {
        display: inline-block;
        width: 70%;
        margin: 0;
        margin: 0;
    }

        .wf-form .bt {
            width: 100%;
            height: 38px;
            line-height: 38px;
            padding: 0;
        }

        .wf-form legend {
            font-size: 20px;
            border-bottom: 1px solid #ccc;
            display: block;
            width: 100%;
            padding: 10px 0;
            text-align: center;
        }

        .wf-form label {
            display: block;
            width: 100%;
            position: relative;
        }

        .wf-form .focus {
            border-radius: 1px solid #888;
        }

            .wf-form .focus .lbl {
                transform: translate(0px, -12px) scale(0.85);
                padding: 0 10px !important;
                margin-left: 10px;
                transform-origin: left;
                width: auto;
            }

        .wf-form .lbl {
            position: absolute;
            background: #fff;
            display: inline-block;
            margin: 2px 10px;
            transition: all 0.2s;
            padding: 12px 10px;
            width: 300px;
            cursor: text;
        }

        .wf-form .ipt {
            border: 0px;
            /* width: 80%; */
            font-size: 1.5rem;
            color: #666;
            border: 1px solid #999;
            cursor: text;
            margin-bottom: 15px;
        }

            .wf-form .ipt:focus {
                outline: none;
            }

    .it-fs {
        margin-bottom: 20px;
    }
    /* floating label */
    .wf-form .form-control {
        height: calc(1em + .75rem + 15px);
    }

    .wf-form span.options {
        font-size: 1rem;
        line-height: 30px;
    }

    .wf-form select.form-control {
        height: calc(1.5em + .75rem + 15px);
        border: 1px solid #999;
    }
    /*
custom
*/
    table {
        overflow-y: auto;
        height: 3em;
    }

    .frame::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .frame::-webkit-scrollbar {
        -webkit-appearance: none;
    }

        .frame::-webkit-scrollbar:vertical {
            width: 11px;
        }

        .frame::-webkit-scrollbar:horizontal {
            height: 11px;
        }

    .frame::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white; /* should match background, can't be transparent */
        background-color: rgba(0, 0, 0, .5);
    }

    .modal-p {
        margin-bottom: 0 !important;
        color: #fff;
        margin-left: 15px;
        font-size: 17px;
    }

    .custom-modal {
        display: flex !important;
        align-items: center;
    }
    /* ──────────────────────────────────────────
     BLOG SECTION WRAPPER
  ────────────────────────────────────────── */
    .blog-section {
        max-width: 1100px;
        margin: 0 auto;
        padding: 48px 20px 56px;
    }
    /* ──────────────────────────────────────────
     BÖLÜM BAŞLIĞI
  ────────────────────────────────────────── */
    .blog-section__header {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 32px;
    }

    .blog-section__title-wrap {
        display: flex;
        flex-direction: column;
        gap: 3px;
        flex-shrink: 0;
    }

    .blog-section__eyebrow {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: #1565c0;
    }

    .blog-section__title {
        font-size: 22px;
        font-weight: 700;
        color: #1a237e;
        line-height: 1.2;
    }

    .blog-section__divider {
        flex: 1;
        height: 2px;
        background: linear-gradient(to right, #1565c0 0%, #e3eaf8 100%);
        border-radius: 2px;
    }
    /* ──────────────────────────────────────────
     KART GRID
  ────────────────────────────────────────── */
    .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    @media (max-width: 820px) {
        .blog-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 540px) {
        .blog-grid {
            grid-template-columns: 1fr;
        }
    }
    /* ──────────────────────────────────────────
     BLOG KARTI
  ────────────────────────────────────────── */
    .blog-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid #dde3f0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        text-decoration: none;
        color: inherit;
    }

        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 32px rgba(21, 101, 192, .13);
            border-color: #1565c0;
        }
    /* Görsel */
    .blog-card__img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #e3eaf8;
    }

        .blog-card__img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .35s ease;
        }

    .blog-card:hover .blog-card__img-wrap img {
        transform: scale(1.06);
    }
    /* Kategori rozeti */
    .blog-card__badge {
        position: absolute;
        top: 11px;
        left: 11px;
        background: #1565c0;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 20px;
    }
    /* Gövde */
    .blog-card__body {
        padding: 18px 20px 20px;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 10px;
    }

    .blog-card__title {
        font-size: 14.5px;
        font-weight: 700;
        color: #1a237e;
        line-height: 1.45;
    }

    .blog-card__excerpt {
        font-size: 13px;
        color: #546e7a;
        line-height: 1.65;
        flex: 1;
    }
    /* Alt çizgi + link */
    .blog-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid #eef1f8;
        margin-top: auto;
    }

    .blog-card__date {
        font-size: 11.5px;
        color: #90a4ae;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .blog-card__date svg {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }

    .blog-card__read-more {
        font-size: 12px;
        font-weight: 700;
        color: #1565c0;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: gap .18s ease;
    }

        .blog-card__read-more:hover {
            gap: 8px;
        }

        .blog-card__read-more svg {
            width: 14px;
            height: 14px;
        }
    /* ──────────────────────────────────────────
     TÜM YAZILAR BUTONU
  ────────────────────────────────────────── */
    .blog-section__footer {
        margin-top: 30px;
        text-align: center;
    }

    .blog-section__all-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 28px;
        background: #fff;
        border: 1.5px solid #1565c0;
        border-radius: 8px;
        color: #1565c0;
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        transition: background .18s, color .18s;
    }

        .blog-section__all-btn:hover {
            background: #1565c0;
            color: #fff;
        }

        .blog-section__all-btn svg {
            width: 16px;
            height: 16px;
        }
    /* ══════════════════════════
       AVANTAJ KARTLARI
       — siteyle aynı "Hizmetlerimiz"
         bölüm dili: ikon üste, başlık,
         açıklama metin, beyaz zemin
    ══════════════════════════ */
    .sfo-avantaj-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        padding: 0 16px;
        margin-bottom: 48px;
    }

    .sfo-avantaj {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--r);
        padding: 30px 24px;
        text-align: center;
    }

    .sfo-avantaj-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--g-lite);
        border: 2px solid var(--g-mid);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

        .sfo-avantaj-icon svg {
            width: 30px;
            height: 30px;
            stroke: var(--g);
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .sfo-avantaj h3 {
        font-size: .97rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 8px;
    }

    .sfo-avantaj p {
        font-size: .84rem;
        color: var(--mid);
        line-height: 1.65;
    }
    /* ══════════════════════════
       SEO METİN BLOĞU
    ══════════════════════════ */
    .sfo-text {
      
        margin: 0 auto;
        padding: 0 16px;
    }

        .sfo-text h2 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--dark);
            margin: 32px 0 10px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--border);
        }

            .sfo-text h2:first-child {
                margin-top: 0;
            }

        .sfo-text h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--g2);
            margin: 22px 0 8px;
        }

        .sfo-text p {
            font-size: .92rem;
            line-height: 1.8;
            color: var(--mid);
            margin-bottom: 12px;
        }

        .sfo-text strong {
            color: var(--dark);
        }

    .sfo-check {
        columns: 2;
        column-gap: 20px;
        list-style: none;
        padding: 0;
        margin: 0 0 14px;
    }

        .sfo-check li {
            font-size: .87rem;
            color: var(--mid);
            padding: 3px 0;
            break-inside: avoid;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

            .sfo-check li::before {
                content: "✓";
                color: var(--g);
                font-weight: 700;
                flex-shrink: 0;
            }
    /* Karşılaştırma tablosu */
    .sfo-tbl-wrap {
        overflow-x: auto;
        margin: 0 0 20px;
    }

    .sfo-tbl {
        width: 100%;
        border-collapse: collapse;
        font-size: .85rem;
    }

        .sfo-tbl th {
            background: var(--g);
            color: var(--white);
            padding: 10px 14px;
            text-align: left;
            font-weight: 700;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .3px;
        }

        .sfo-tbl td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
            color: var(--mid);
        }

        .sfo-tbl tr.hl td {
            font-weight: 700;
            color: var(--dark);
            background: var(--g-lite);
        }

    .sfo-badge {
        display: inline-block;
        background: var(--g-lite);
        color: var(--g2);
        border-radius: 4px;
        padding: 2px 8px;
        font-size: .77rem;
        font-weight: 700;
    }
    /* ══════════════════════════
       SSS
    ══════════════════════════ */
    .sfo-faq {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 16px;
        margin-bottom: 48px;
    }

    .sfo-faq-item {
        border-bottom: 1px solid var(--border);
        padding: 16px 0;
    }

        .sfo-faq-item:last-child {
            border-bottom: none;
        }

    .sfo-faq-q {
        font-size: .93rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 7px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        .sfo-faq-q::before {
            content: "S";
            background: var(--g);
            color: var(--white);
            font-size: .72rem;
            font-weight: 800;
            min-width: 20px;
            height: 20px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

    .sfo-faq-a {
        font-size: .87rem;
        line-height: 1.7;
        color: var(--mid);
        padding-left: 30px;
    }
    /* ══════════════════════════
       GÜVEN BANDI
       (siteye uygun: beyaz bg,
        yeşil sol border aksanı)
    ══════════════════════════ */
    .sfo-trust {
        background: var(--g-lite);
        border: 1px solid var(--g-mid);
        border-radius: var(--r);
        padding: 28px 32px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        margin: 0 16px 48px;
    }

    .sfo-trust-text {
        flex: 1 1 260px;
    }

        .sfo-trust-text h4 {
            font-size: .95rem;
            font-weight: 700;
            color: var(--g2);
            margin-bottom: 6px;
        }

        .sfo-trust-text p {
            font-size: .82rem;
            color: var(--mid);
            line-height: 1.6;
        }

    .sfo-trust-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sfo-trust-badge {
        background: var(--white);
        border: 1px solid var(--g-mid);
        border-radius: 6px;
        padding: 6px 13px;
        font-size: .76rem;
        font-weight: 700;
        color: var(--g2);
    }

    @media (max-width: 600px) {
        .sfo-cat {
            width: calc(33% - 10px);
        }

        .sfo-check {
            columns: 1;
        }

        .sfo-trust {
            padding: 20px 16px;
            margin: 0 0 32px;
        }
    }