* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

/* NATIVE SNACK BAR */
/* The snackbar - position it at the bottom and in the middle of the screen */
#v-SnackBar { width: 300px; max-width: 90%; background-color: #95519f; color: #fff; border-radius: 4px; padding: 25px; position: fixed; z-index: 1010; left: 100%; top: 15px; }
#v-SnackBar.error { background-color: #c60c31 !important; }
#v-SnackBar i { position: absolute; right: 2px; top: 5px; font-size: 16px; padding: 5px; cursor: pointer; }
#v-SnackBar .message { padding-right: 15px; font-size: 14px; line-height: 20px; }

/** ERROR AREA*/
.err-title {font-size:85px !important;padding:5px !important;}
.err-desc {padding:5px !important;}
.err-button {font-size:14px !important;}

.show-on-phone { display: none; }
.show-on-mobile { display: none; }
#mobile-menu { display: none; }
div,h1,h2,h3,h4,h5,h6,p,ul,li { box-sizing: border-box; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-family: circularBold; }
h3.section-title { font-size: 24px; color: #344683; }
ul, li { padding: 0; margin: 0; list-style: none; }
.dflex { display: flex; }
.as-center { align-self: center; }
.fd-row { flex-direction: row; }
.fd-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-grid-container { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.ovf-auto { overflow: auto; }
.h200 { height: 200px; }
.h235 { height: 235px; }
.check-color-blue { color: #4866C8; }
.check-color-gray { color: #ccc; }
b, strong { font-family: circularBold; }

.symbol-1 {
    position: absolute;
    right: 0;
    bottom: 0 !important;
}

.yr3 {
    width: 100px !important;
    margin-top: auto;
}

.content ul { margin: 15px 0; }
.content ul li, .content ol li { font-family: circularBook; padding: 0px 0 10px 20px; list-style: none; position: relative; font-size: 16px; line-height: 150%; color: #636279; }
.content ol, .content ol li { list-style: decimal; padding-left: 0px; margin-left: 25px; }
.content ul li::before, .content ol li::before { color: #4866C8; font-size: 16px; display: block; line-height: 26px; width: 8px; position: absolute; top: 0; left: 0; }
.content ul li::before { content: "\2022 "; }
.content h5 { font-size: 12px; border-bottom: #d4d4d4 1px solid; padding-bottom: 15px; color: #999; margin-bottom: 10px; }
.content > h5:first-child { background-color: #cc0001 !important; }
.content > h5:last-child { border-bottom: transparent 0px solid !important;}
.content p strong { color: #100D3D; }
.content .file-list { padding: 30px 0 0 0 ; }
.content .file-list a:link, .content .file-list a:visited { font-size: 16px; font-family: circularBold; display: block; background-color: #f5f9fd; position: relative; border-radius: 6px; padding: 15px 20px; margin-bottom: 10px; text-decoration: none; color: #100D3D; }
.content .file-list a:hover { background-color: #eff3f6; }
.content .file-list a i { position: absolute; right: 15px; top: 15px; color: #100D3D; }
.map { border: #d4d4d4  1px solid; }
.map iframe { height: 300px; display: block; }

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    background-color: #f1f6fa;
    color: #636279;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
}

section { padding-top: 50px; }
section.page { padding-top: 0; }
/*section.page.inner-page { margin-top: 0px; min-height: 400px; padding-bottom: 50px; }*/
.inner-page .main { flex: 1; padding-right: 30px; }
.inner-page .main.box-list { overflow: hidden; }
.inner-page .main.box-list .swiper-wrapper { display: block; }
.inner-page .main.box-list .box { width: 50%; float: left; padding: 15px 0; }
.inner-page .main.box-list .box.x2 { width: 100%; }
.inner-page .main.box-list .box.x2 h2 { width: 65%;  font-size: 28px; color: #100D3D; line-height: 40px; margin-bottom: 40px; }
.inner-page .main.box-list .swiper-slide:nth-child(1n) .box { padding-right: 7.5px; }
.inner-page .main.box-list .swiper-slide:nth-child(2n) .box { padding-left: 7.5px; }
.inner-page .main.box-list .box:nth-child(2n) { padding-left: 15px; }
.inner-page .main.box-list .box.x2:nth-child(2n) { padding-left: 0; }
.inner-page .main.box-list .box .portled { cursor: pointer; min-height: 200px; color:#100D3D; max-height:200px; overflow:auto; scrollbar-width:none; }
.inner-page .main.box-list .box .portled:hover { box-shadow: 0 4px 10px 0 #ccc; }
.inner-page .main.box-list .box .portled .box-icon { position: absolute; right: 20px; top: 20px; max-height: 120px; }
.inner-page .main.box-list .box .portled h4 { font-size: 17px; color: #100D3D; }
.inner-page .side { width: 380px; padding-top: 15px; }
.inner-page .side h4 { font-size: 18px; color: #100D3D }
.inner-page .side p.desc {font-size: 14px; margin: 
                              10px 0 20px 0; padding: 0; }
.inner-page .side hr { border:none; border-top: #f0f0f0 1px solid; height: 0; margin: 30px 0; }

.container { max-width: 1200px; margin: 0 auto; display: flex; flex: 1; }
.container.page { flex-direction: column; background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0px 0px 5px #e8e8e8;/* min-height: 500px;*/ margin-top: 30px; }

#logo { align-self: center; margin: 24px 0; display: flex; }
#logo img { align-self: center; }
#main-menu { display: flex; flex: 1; flex-direction: column; }
#main-menu ul { align-self: flex-end; }
#main-menu li { float: left; }

#inner-page-header { min-height: 220px; background-image:linear-gradient(315deg, #0093d3 0%, #185d99 70%); font-family: circularBold; }
#inner-page-header .container { flex-direction: column; }
#inner-page-header .container h1 { font-size: 36px; color: #fff; margin: 0; padding: 50px 0 20px 0; }
#inner-page-header .container label { display: block; color: #DEE4FF; font-size: 14px; font-family: 'circularBold'; }

#inner-promo { display: flex; height: 520px; /*background-image:linear-gradient(315deg, #00ffb7 0%, #185d99 50%);*/  background-image:linear-gradient(315deg, #00ffb7 0%, #002c53 40%)}
#inner-promo .container { flex-direction: column; position: relative; }
#inner-promo .container img.cover { position: absolute; right: -125px; bottom: 0; }
#inner-promo .container .content { width: 50%; }
#inner-promo .container .content h1 { margin: 60px 0 16px 0; padding: 0; color: #fff; font-size: 29px; }
#inner-promo .container .content label { color: #F2F7FD; font-size: 13px; display: block; margin-bottom: 10px; }
#inner-promo .container .content p { margin: 0 0 44px 0; padding: 0; color: #fff; font-size: 18px; line-height: 30px; }
#inner-promo .container .content a.pink { font-size: 12px; padding:15px 30px }

#brand-bar {/*background-image: linear-gradient(to right, #000, #0093d3);*/ /*background:#185199;*/ background:#002c53; position: relative; box-shadow: 0 2px 10px 0 rgba(23,52,112,0.07) }
#brand-bar .search-box { width: 150px; position: relative; display: flex; flex-direction: column; padding-top: 20px; margin: 0 15px; cursor: pointer; }
#brand-bar .search-box p { padding: 15px 10px 15px 40px; border-radius: 30px; margin: 0; border: transparent 0px solid; background-color: #fff; color: #000; font-family: circularBook, helvetica, arial; font-size: 14px; }
#brand-bar .search-box i { position: absolute; left: 14px; top: 35px; color: #000; font-size: 20px; }
#brand-bar .search-panel { transition: all .25s; box-shadow: 0px 0px 5px #d4d4d4; position: absolute; left: 0; top: -100px; width: 100%; height: 100%; background-color: #fff; z-index: 110; padding: 20px 0; }
#brand-bar .search-panel.show { top: 0; }
#brand-bar .search-panel i { color: #949FB6; align-self: center; }
#brand-bar .search-panel i.close { cursor: pointer; }
#brand-bar .search-panel input { border: #fff 1px solid; background-color: #fff; color: #100D3D; flex: 1; font-size: 22px; font-family: circularBold; }
#brand-bar .search-panel input::placeholder { color: #92989E; opacity: 1; }
#brand-bar .search-panel input:-ms-input-placeholder { color: #92989E; }
#brand-bar .search-panel input::-ms-input-placeholder {  color: #92989E; }
#brand-bar .search-panel input:focus { border: #fff 1px solid; outline: #fff 1px solid; }

#brand-bar .language-box { display: flex; align-items: center; }
#brand-bar a { font-family: circularBold; }
#brand-bar .language-box a:link, #brand-bar .language-box a:visited { color: #fff; text-decoration: none; display: inline-block; border-left: #7e9aeb 1px solid; padding-left: 15px; line-height: 25px; }
#brand-bar .language-box a:hover { color: #fdb832; }
/*#brand-bar .container { position: relative; }*/

.main-col { flex: 1; overflow: hidden; }
.side-bar { width: 410px; padding-left: 30px; }
.side-bar .swiper-wrapper { display: block; }
.side-bar .swiper-wrapper .swiper-slide { height: auto; }
.side-bar .swiper-wrapper .swiper-slide:nth-child(2) { margin: 32px 0; }

.portled { 
    box-shadow: 0 4px 6px 0 rgba(99,98,121,0.05);
    padding: 25px;
    border-radius: 5px;
    position: relative;
}
.portled p { margin: 0; margin-top:10px;  line-height: 1.5; color: #636259; font-size:13px }
.portled.no-padd { padding: 0; }
.portled.pink { background-image: linear-gradient(-135deg, #D822CA 0%, #FF7BDF 100%); color: #fff; }
.portled.purple { background-image: linear-gradient(-133deg, #6149F9 0%, #9787FB 99%, #1D1778 100%); color: #fff; }
.portled.blue {/*background-image:linear-gradient(315deg, #0093d3 0%, #185d99 70%);*/ background-image:linear-gradient(315deg, #0093d3 0%, #002c53 70%); color: #fff; }
.portled.white { background-color: #fff; }

.portled.container { flex-direction: column;} 
.portled h2.portled-header { font-size: 18px; color: #100D3D; border-bottom: #f2f2f2 1px solid; padding: 24px 0 24px 24px; }
.portled h2.portled-header.no-border { border-bottom: transparent 0px solid; }

.portled.video h3 { font-size: 20px; color: #fff; margin-bottom: 10px; }
.portled.video label { font-size: 12px; color: #fff; opacity: .6; display: block; text-transform: uppercase; }

section.promo .portled { height: 130px; padding-right: 70px; position: relative; overflow: hidden; box-shadow: 0 6px 25px rgba(57,85,167,0.2) }
section.promo .portled .triangle { position: absolute; right: 0; bottom: 0; z-index: 10; }
section.promo .portled i { position: absolute; right: 20px; bottom: 20px; padding: 5px; background-color: #fff; border-radius: 50%; text-align: center; box-shadow: -1px 1px 5px rgba(0,0,0,.2); font-size: 18px; z-index: 20; cursor: pointer; }
section.promo .portled:nth-child(2) { margin: 20px 0; }
section.promo .portled.pink i { color: #FF7BDF; }
section.promo .portled.purple i { color: #6149F9; }
section.promo .portled.blue i { color: #3A5BD7; }
section.promo label { font-size: 18px; font-family: circularBold; }
section.promo p { font-size: 14px; margin: 5px 0 0 0; color:#fff; }
ul.one-cikan, ul.one-cikan li { margin: 0; list-style: none; margin-top: 10px; }
ul.one-cikan li { float: left; margin-right: 9px; }
ul.one-cikan li span { font-size: 16px; display: block; padding: 2px 0; }
ul.one-cikan li span:first-child { font-weight:bold; font-family:circularBold;}
ul.one-cikan li span.value { font-size: 14px; padding-right: 26px; background-position: right center; background-repeat: no-repeat; }
ul.one-cikan li span.value.up { background-image: url(../img/icon/up.png); }
ul.one-cikan li span.value.down { background-image: url(../img/icon/down.png); }

.promo .main-slider { overflow: hidden; flex-direction: column; height: 100%; position: relative; }
.promo .main-slider .swiper-slide { display: flex; flex-direction: row; }
.main-slider-pagination {
    bottom: 0px;
    position: absolute;
    z-index: 1;
}
.promo .main-slider .swiper-pagination-bullet, #fon-gundem-slider .swiper-pagination-bullet {
    margin: 0 6px 2px 6px;
    background-color: #979797;
}
.promo .main-slider .swiper-pagination-bullet-active, #fon-gundem-slider .swiper-pagination-bullet-active {
    background-color: #fff;
    margin: 0 6px;
    width: 12px;
    height: 12px;
}

.main-slider .swiper-slide { position: relative; }
.main-slider .swiper-slide .text  { width: 60%; }
.main-slider .swiper-slide .text { flex-direction: column; }
.main-slider .swiper-slide .text h2 { padding: 50px 0px 15px 0px; margin: 0; font-size: 28px; color: #fff; }
.main-slider .swiper-slide .image { position: absolute; right: 20px; }
.main-slider .swiper-slide .text div { margin-top: 30px; }
.main-slider .swiper-slide .text p { font-size: 18px; color: #fff; margin: 0; line-height: 26px; padding: 0 50px 20px 0; }
.main-slider .swiper-slide .text a { padding: 15px 30px; }

section.giris .col { padding: 24px 100px 24px 24px; position: relative; overflow: hidden; min-height: 200px; }
section.giris .col:nth-child(2) { border-left: #e8e8e8 1px solid; border-right: #e8e8e8 1px solid; }
section.endgiris .col:nth-child(2) { border-left: none !important; border-right: none !important; }
.col label { display: block; font-size: 18px; margin-bottom: 10px; }
.portled .title { color: #100D3D; font-family: circularBold; font-size: 18px; }
.portled .description { color: #636279; }
section.giris .col p { margin: 0; color: #636279; font-size: 14px; }
section.giris .col a { position: absolute; bottom: 25px; left: 25px; }
.home-link-box { background-repeat: no-repeat; background-position: 95% bottom; background-image: url(); background-size:contain }

section.yatirimci-rehberi .col-8 { height: 235px; }

#fon-gundem-slider .swiper-container { height: 90px; }
#fon-gundem-slider .swiper-container .swiper-slide { font-size: 18px; padding-top: 20px; text-align: center; font-family:circularBook; }

#footer { /*margin-top: 25px; */}
#footer .link-set { border-bottom: rgba(164,169,174,.2) 1px solid; }
#footer .link-set a:link, #footer .link-set a:visited { text-decoration: none; line-height: 44px; color: inherit; font-size: 13px; margin-right: 24px; }
#footer .link-set a:hover { color: #4866C8; }
#footer .link-set a.tel:link, #footer .link-set a.tel:visited { font-family: circularBold; font-size: 28px; color: #4866C8; float: right; margin-right: 0;  }
#footer .link-set a.tel:hover { color: #242424; }
#footer .info { padding-top: 10px; }
#footer .info label { float: right; color: #636279; font-size: 13px; margin-top: 10px; }
#footer p { margin: 30px 0; font-size: 13px; line-height: 1.5; }

.search-result-header { display: flex; flex-direction: row; padding-bottom: 30px; border-bottom: #e8e8e8 1px solid; }
.search-result-header * { display: flex; }
.search-result-header p { flex: 1; color: #414F63; font-size: 15px; font-family: 'circularBook'; }
.search-result-header .search-box-inner { width: 360px; position: relative; }
.search-result-header .search-box-inner i { display: inline-block; position: absolute; top: 13px; left: 15px; color: #949FB6; }
.search-result-header .search-box-inner input { width: 100%; border-radius: 30px; font-family: 'circularBook'; font-size: 14px; color: #636279; outline: none; padding-left: 45px; }

.datepicker-box { width: 210px; position: relative; overflow: hidden; cursor: pointer;  border-radius: 30px; border: #d4d4d4 1px solid; }
.datepicker-box i { display: inline-block; position: absolute; top: 13px; right: 15px; color: #949FB6; }
.datepicker-box i.show-on-phone { display: none; }
.datepicker-box input { cursor: pointer; width: 100%; font-family: 'circularBook'; border: transparent 1px solid; font-size: 14px; color: #636279; outline: none; padding-left: 20px; padding-right: 45px; }

.search-result-item { margin-top: 50px; border-bottom: #e8e8e8 1px solid; padding-bottom: 50px; }
.search-result-item h3 { margin: 0; font-size: 22px; color: #100D3D; padding: 0 0 10px 0; font-family: circularBold; }
.search-result-item label { display: block; color: #949FB6; font-size: 13px; font-family: circularBold; }
.search-result-item p { margin: 20px 0 0 0; color: #414F63; font-size: 15px; font-family: 'circularBook'; padding: 0 30% 0 0; }

.pagination { text-align: center; padding: 25px 0; font-family: circularBook; }
.pagination a:link, .pagination a:visited { padding: 10px; display: inline-block; width: 16px; line-height: 16px; text-decoration: none; font-size: 14px; color: #344683; margin: 0 0px; border-radius: 50%; }
.pagination a:hover { background-color: #d4d4d4; }
.pagination a.active { background-color: #516FEB; color: #fff; }
.pagination i { font-size: 24px; }

ul.prop-list { border-bottom: #e8e8e8 1px solid; overflow: hidden; margin-bottom: 40px; }
ul.prop-list li { float: left; width: 33%; margin-bottom: 40px; border-right: #e8e8e8 1px solid; padding: 5px 0 5px 20px; }
ul.prop-list li:nth-child(3n) { border-right: transparent 0px solid; }
ul.prop-list li:before { content: none; }
ul.prop-list li span { display: block; font-family: circularBook; position: relative; font-size: 12px; color: #636279; }
ul.prop-list li span i { cursor: pointer; position: absolute; top: -3px; font-size: 18px; margin-left: 2px; }
ul.prop-list li label { display: block; font-family: circularBold; font-size: 20px; color: #100D3D; padding-top: 5px; }
.fon-detay h3 { font-family: circularBold; color: #100D3D; font-size: 26px; margin: 0; }
.fon-detay p { font-family: circularBook; font-size: 16px; color: #636279; line-height: 26px; }
.fon-detay .seperator { background-color: #F2F7FD; height: 6px; margin: 10px 0; }
.fon-detay .seperator.line { background-color: #eaeaea; height: 1.5px; margin: 10px 0; }
.fon-detay.portled { padding: 0; }
.fon-detay.portled .content { padding: 40px; }
.fon-detay.portled .content.thin { padding: 20px; }
.fon-detay .tab-group { display: flex; padding: 15px 0; border-bottom: #e8e8e8 1px solid; margin-bottom: 15px; }
.fon-detay .tab-group span { text-align: center; border-radius: 32px; font-family: circularBold; color: #636279; font-size: 11px; display: inline-block; padding: 10px 15px; margin: 3px 6px 3px 0; }
.fon-detay .tab-group span:hover { cursor: pointer; background-color: #e8e8e8; }
.fon-detay .tab-group span.selected { color: #fff; cursor: default; background-image: linear-gradient(-135deg, #4866C8 0%, #6681EF 100%); }

.row-link-group { cursor: pointer; font-family: circularBook; position: relative; font-size: 16px; display: block; background-color: #F5F9FD; text-decoration: none; margin-bottom: 15px; padding: 20px; border-radius: 5px; color: #100D3D; }
.row-link-group i { position: absolute; right: 15px; top: 20px; }
.row-link-group:hover { background-color: #eef3f7; }
.row-link-group-content { padding: 0 20px 20px 20px; }
.side-link-list { padding: 10px 0 0 0; }
.side-link-list i { position: absolute; left: 0; top: 7px; font-size: 18px; }
.side .seperator { height: 1px; background-color: #e8e8e8; margin: 20px 0; }
.container.fon-detail .main { padding-top: 15px; }
.inner-page .side .row-link-group { display: none; }
.side-bar-menu.dspNone { display: block; }

#fon-compare-area { background-color: #fff; padding: 20px 0; position:fixed; width: 100%; bottom: 0; box-shadow: 0 0 10px #d4d4d4; }
#fon-compare-area .container { display: block; text-align: center; }
#fon-compare-area .list, #fon-compare-area .buttons { display: inline-block; }
#fon-compare-area .list span { display: inline-block; margin: 5px; background-color: #F5F9FD; padding: 10px 34px 10px 18px; border-radius: 32px; position: relative; color: #4866C8; font-family: circularBold; }
#fon-compare-area .list span i { position: absolute; font-size: 17px; right: 5px; cursor: pointer; }

ul.compared-fon-list { margin-top: 5px; }
ul.compared-fon-list li { float: left; position: relative; padding: 15px; border-radius: 7px; background-color: #F5F9FD; margin: 5px 15px 5px 0; }
ul.compared-fon-list li:before { content: none; }
ul.compared-fon-list li label { margin-bottom: 8px; display: block; color: #03274A; font-size: 16px; font-family: circularBold; padding-left: 15px; }
ul.compared-fon-list li span { color: #636279; font-size: 12px; font-family: circularBook; display: block; padding-left: 15px; }
ul.compared-fon-list li i { position: absolute; left: 10px; top: 11px; font-size: 18px; }

.portled.call-box { text-align: center; }
.portled.call-box label { font-family: circularMedium; font-size: 12px; display: block; padding: 35px 0 10px 0; }
.portled.call-box h4 { font-family: circularBold; font-size: 36px; padding-bottom: 25px; }

.side .portled p { margin-bottom: 20px; }
.side .portled a.rlink { margin: 0 0 0 -5px; }

.portled.white.landing-portled { padding: 40px; }
.portled.white.landing-portled h3 { font-family: circularBold; font-size: 26px; color: #100D3D; }
.portled.white.landing-portled p {}
.portled.white.landing-portled p.description { font-family: circularBook; font-size: 18px; color: #100D3D; margin-bottom: 20px; }

.boxed-label { padding: 10px 0 30px 0; display: flex; position: relative; }
.boxed-label label { font-size: 15px; flex: 1; margin: 10px; display: flex; flex-direction: column; justify-content: flex-end; padding: 15px; background-color: #f7f7f7; border-radius: 4px; min-height: 60px; }
.boxed-label label:first-child { margin-left: 0; color: #fff; }
.boxed-label label span:first-child { font-family: circularBold; }
.boxed-label.skala label { font-size: 11px; text-align: center; min-height: 90px; margin: 5px 5px; padding: 8px; position: relative; color:#fff; cursor:pointer;}
.boxed-label.skala label em { position: absolute; top: 0; left: 0; right: 0; font-style: normal; font-size: 36px; font-family: circularBold; padding-top: 20px; color: #fff; }
.boxed-label label:first-child em { color: #fff; }
.boxed-label.skala label span { font-size: 11px; }
.boxed-label.skala label span:first-child { font-size: 13px; font-family: circularBook; }
.sticky-topbar { z-index: 10; position: -webkit-sticky; position: sticky; top: 0px; }
.sticky-side { position: -webkit-sticky; position: sticky; top: 110px; }
#yonetim-kadro { margin: 20px 0 30px 0; }
#yonetim-kadro .person { min-height: 330px; }
#yonetim-kadro .image { margin-bottom: 10px; height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 4px; overflow: hidden; }
#yonetim-kadro label { display: block; text-align: center; line-height: 30px; font-family: circularBold; font-size: 16px; }
#yonetim-kadro span { display: block; text-align: center; color: #999; font-size: 15px; }
.tippy-box { margin-top: -20px; background-color: #fff; box-shadow: 0 0 20px #d4d4d4; color: #707070; font-size: 13px; line-height: 20px; }
.tippy-box .tippy-content { padding: 25px; }

.accordion-row { border-radius: 4px; position: relative; background-color: #f5f9fd; margin-bottom: 10px; }
.accordion-row:hover { background-color: #eff3f6; }
.accordion-row label { display: block; padding: 20px 40px 17px 20px; font-size: 15px; cursor: pointer; }
.accordion-row label i { position: absolute; right: 17px; top: 17px; }
.accordion-row label span { display: block; padding-top: 5px; font-size: 12px; color: #999; }
.accordion-row .content { display: none; padding: 0 25px 20px 20px; }
.accordion-row.open { background-color: #fff; box-shadow: 0 0 5px #d4d4d4; }
.accordion-row.open:hover { background-color: transparent; }
.accordion-row.open .content { display: block; }

.video-box-container { display: flex; flex-direction: column; width: 33.3%; padding: 20px; }
.video-box { background: #FFFFFF; box-shadow: 0 4px 6px 0 rgba(99,98,121,0.05); border-radius: 5px; overflow: hidden; transition: all .5s; }
.video-box:hover { box-shadow: 0 0 15px #d4d4d4; }
.video-box .image { display: flex; height: 160px; background-color: #f5f5f5; background-size: cover; background-repeat: no-repeat; background-position: center; align-items: center; justify-content: center; }
.video-box a:link, .video-box a:hover { font-family: circularBold; font-size: 16px; color: #100D3D; text-decoration: none; }
.video-box a:hover { color: #4866C8; }
.load-more-button { padding: 20px 0; height: 90px; text-align: center; }

.fon-chart-1 { position: relative; margin-top: 30px; overflow: hidden; min-height: 250px; }
.fon-chart-1 canvas { position: absolute; max-width: 70%; left: -100px; }
.fon-chart-1 .legend { padding-left: 310px; display: flex; align-items: center; min-height: 250px; }
.fon-chart-1 .legend ul li { font-size: 14px; color: #242424; position: relative; }
.fon-chart-1 .legend ul li:before { display: none; }
.fon-chart-1 .legend ul li span {position: absolute; left: 0; display: inline-block; width: 12px; height: 12px; border-radius: 50px; top: 2px; }


* {
    margin: 0;
    padding: 0;
}


    section .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: url(../img/wave.png);
        background-size: 1000px 100px;
    }

/*    30 15 30 5*/ 
        section .wave.wave1 {
            animation: animate 30s linear infinite;
            z-index: 1000;
            opacity: 1;
            animation-delay: 0s;
            bottom: 0;
        }

        section .wave.wave2 {
            animation: animate2 20s linear infinite;
            z-index: 999;
            opacity: 0.5;
            animation-delay: -5s;
            bottom: 10px;
        }

        section .wave.wave3 {
            animation: animate3 30s linear infinite;
            z-index: 998;
            opacity: 0.2;
            animation-delay: 2s;
            bottom: 15px;
        }

        section .wave.wave4 {
            animation: animate2 8s linear infinite;
            z-index: 997;
            opacity: 0.7;
            animation-delay: -5s;
            bottom: 10px;
        }

@keyframes animate {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 1000px;
    }
}

@keyframes animate2 {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -1000px;
    }
}


@import url("https://fonts.googleapis.com/css2?family=Baloo+2&display=swap");
/* This pen */

.dark {
    background: #110f16;
}

.light {
    background: #f3f5f7;
}

a,
a:hover {
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

#pageHeaderTitle {
    margin: 2rem 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 2.5rem;
}

/* Cards */
.postcard {
    flex-wrap: wrap;
    display: flex;
    box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
    border-radius: 10px;
    margin: 0 0 2rem 0;
    overflow: hidden;
    position: relative;
    color: #ffffff;
}

    .postcard.dark {
        background-color: #18151f;
    }

    .postcard.light {
        background-color: #e1e5ea;
    }

    .postcard .t-dark {
        color: #18151f;
    }

    .postcard a {
        color: inherit;
    }

    .postcard h1,
    .postcard .h1 {
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .postcard .small {
        font-size: 80%;
    }

    .postcard .postcard__title {
        font-size: 1.75rem;
    }

    .postcard .postcard__img {
        max-height: 180px;
        width: 100%;
        object-fit: cover;
        position: relative;
        margin-bottom: -80px;
        margin-top: -20px;
        margin-left: -30px;
    }

    .postcard .postcard__img_link {
        display: contents;
    }

    .postcard .postcard__bar {
        width: 50px;
        height: 10px;
        margin: 10px 0;
        border-radius: 5px;
        background-color: #424242;
        transition: width 0.2s ease;
    }

    .postcard .postcard__text {
        padding: 1.5rem;
        position: relative;
        display: flex;
        flex-direction: column;
        z-index: 2;
    }

    .postcard .postcard__preview-txt {
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        height: 100%;
    }

    .postcard .postcard__tagbox {
        display: flex;
        flex-flow: row wrap;
        font-size: 14px;
        margin: 20px 0 0 0;
        padding: 0;
        justify-content: center;
    }

        .postcard .postcard__tagbox .tag__item {
            display: inline-block;
            background: rgba(83, 83, 83, 0.4);
            border-radius: 3px;
            /*padding: 2.5px 10px;*/
            padding: 10px 2px;
            /*margin: 0 5px 5px 0;*/
            margin: 0 2px 3px 0;
            cursor: default;
            user-select: none;
            transition: background-color 0.3s;
        }

            .postcard .postcard__tagbox .tag__item:hover {
                background: rgba(83, 83, 83, 0.8);
            }

    .postcard:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(-70deg, #424242, transparent 50%);
        opacity: 1;
        border-radius: 10px;
    }

    .postcard:hover .postcard__bar {
        width: 100px;
    }

@media (max-width: 1100px) {
    .kvkk-container, .kvkk-approval {
        display: block;
        width: 100%; 
        margin-top: 10px;
    }

    .kvkk-approval {
        margin-top: 100px;
    }
}

@media (max-width: 769px) {

    .kvkk-approval {
        margin-top: 0px;
    }
}



@media screen and (min-width: 769px) {
    .postcard {
        flex-wrap: inherit;
    }

        .postcard .postcard__title {
            z-index: 1;
            font-size: 2rem;
        }

        .postcard .postcard__tagbox {
            justify-content: start;
        }

        .postcard .postcard__img {
            max-width: 470px;
            max-height: 100%;
            transition: transform 0.3s ease;
        }

        .postcard .postcard__text {
            padding: 3rem;
            width: 100%;
        }

        .postcard .media.postcard__text:before {
            content: "";
            position: absolute;
            display: block;
            background: #18151f;
            top: -20%;
            height: 130%;
            width: 55px;
        }

        .postcard:hover .postcard__img {
            transform: scale(1.1);
        }

        .postcard:nth-child(2n+1) {
            flex-direction: row;
        }

        .postcard:nth-child(2n+0) {
            flex-direction: row-reverse;
        }

        .postcard:nth-child(2n+1) .postcard__text::before {
            left: -12px !important;
            transform: rotate(4deg);
        }

        .postcard:nth-child(2n+0) .postcard__text::before {
            right: -12px !important;
            transform: rotate(-4deg);
        }
}

@media screen and (min-width: 1024px) {
    .postcard__text {
        padding: 2rem 3.5rem;
    }

        .postcard__text:before {
            content: "";
            position: absolute;
            display: block;
            top: -20%;
            height: 130%;
            width: 55px;
        }

    .postcard.dark .postcard__text:before {
        background: #18151f;
    }

    .postcard.light .postcard__text:before {
        background: #e1e5ea;
    }
}
/* COLORS */


.postcard .postcard__tagbox .blue.play:hover {
    background: #0076bd;
}

.blue .postcard__title:hover {
    color: #0076bd;
}

.blue .postcard__bar {
    background-color: #0076bd;
}

.blue::before {
    background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}

.blue:nth-child(2n)::before {
    background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}




@media screen and (min-width: 769px) {
  

    .blue::before {
        background-image: linear-gradient(-80deg, rgb(24, 93, 153), transparent 50%);
    }

    .blue:nth-child(2n)::before {
        background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
    }
}



@media screen and (max-width: 769px) {
    .postcard .postcard__img {
        max-height: 620px;
        width: 100%;
        object-fit: cover;
        position: relative;
        margin: 20px;
        margin-top: 0px;
        margin-left: 0px;
        margin-bottom: -30px;
    }


    .app-buttons {
        margin: 0 auto;
        display: flex;
        margin-bottom: -20px;
    }

        .app-buttons a { 
            margin-right: 5px;
            white-space: nowrap;
        }
}










/*socialmediaicons*/
.market-btn {
    display: inline-block;
    padding: 0.3125rem 0.875rem;
    padding-left: 2.8125rem;
    -webkit-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    border: 1px solid #e7e7e7;
    background-position: center left 0.75rem;
    background-color: #fff;
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    text-decoration: none;
}

    .market-btn .market-button-title {
        display: block;
        color: #222;
        font-size: 1.125rem;
    }

    .market-btn .market-button-subtitle {
        display: block;
        margin-bottom: -0.25rem;
        color: #888;
        font-size: 0.75rem;
    }

    .market-btn:hover {
        background-color: #f7f7f7;
        text-decoration: none;
    }

.apple-btn {
    background-image: url('/asset/img/icon/apple-logo-png-dallas-shootings-don-add-are-speech-zones-used-4.png');
}

.google-btn {
    background-image: url('/asset/img/icon/867-8678850_google-play-store-transparent-google-play-icon.jpg');
}
/*socialmediaicons*/

/* Card Container */
.card-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Card Style */
.card {
    display: flex;
    flex-direction: row;
    box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    height: 450px;
    border-radius: 10px;
}

.card-left {
    background-color: white;
    padding: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title {
    font-size: 24px;
    color: #0076bd;
    margin-bottom: 0px;
}
.steps-title {
    font-size: 0.95rem; /* Biraz daha küçük boyut */
    color: #0076bd; 
    margin-bottom: 10px;
    font-weight: 600;
}
.card-separator {
    width: 50px;
    height: 4px;
    background-color: #0076bd;
    margin-bottom: 20px;
}


.card-right {
    background-color: white; /* Arka plan rengi */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 40%; /* Sağ taraf %40 genişlik */
    position: relative;
}

    /* Resmin card-right'ı tam olarak kaplaması */
    .card-right img {
        width: 100%;
        height: auto; /* Yüksekliği otomatik ayarlanır */
        object-fit: cover; /* Resmin düzgün ölçeklenmesi ve tam kapsaması için */
    }

/* Card Text */
.card-text {
    font-size: 16px; /* Daha okunabilir bir boyut */
    color: #18151f; /* Yazı rengi */
    line-height: 1.6; /* Satır yüksekliği */
    font-weight: 400; /* Normal kalınlık */
    margin-bottom: 20px; /* Paragrafın altına boşluk */
    text-align: justify; /* Yazının iki yana yaslanması */
}

    .card-text span {
        font-weight: bold; /* Vurgulamak için kelimeleri kalın yap */
    }

/* Mobile View */
@media screen and (max-width: 768px) {

    .card .postcard__bar{
        display: none;
    }
    .card {
        flex-direction: column-reverse;
        height: auto; /* Mobilde yükseklik otomatik */
    }

    .card-right {
        display: flex;
        justify-content: center; /* Resmi yatayda ortalar */
        align-items: center; /* Resmi dikeyde ortalar */
        width: 100%; /* Resmin yer aldığı alanın genişliğini %100 yapar */
        height: auto; /* Yüksekliği otomatik olarak ayarlar */
        padding: 10px;
    }

        .card-right img {
            width: 100%; /* Genişlik otomatik ayarlanır */
            height: 100%; /* Yüksekliği %100 ayarlanır */
            max-width: 100%; /* Görüntünün kapsayıcıdan taşmasını önler */
            object-fit: cover; /* Görüntünün düzgün ölçeklenmesi ve tam kapsaması için */
        }

    .card-left {
        padding: 10px; /* Metin kısmının padding'ini de küçültüyoruz */
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Yatayda ortalama */
        align-items: center; /* Dikeyde ortalama */
        text-align: center; /* Metni yatayda ortalar */
    }

    .card-title {
        font-size: 18px
    }

    .card-text {
        font-size: 12px;
        margin-bottom: 0px;
    }

    .postcard__title {
        font-size: 12px; /* Başlık yazı boyutunu mobil için küçültüyoruz */
    }

    .postcard__preview-txt {
        font-size: 14px; /* Metin yazı boyutunu mobil için küçültüyoruz */
    }

    .card .postcard__tagbox_{
        margin-left: 10px;
    }

    .card .app-buttons {
        margin-top: -20px;
    }

    .card .market-btn {
        display: inline-block;
        padding: 0.3125rem 0.875rem;
        padding-left: 2.8125rem;
        -webkit-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
        transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
        border: 1px solid #e7e7e7;
        background-position: center left 0.75rem;
        background-color: #fff;
        background-size: 1rem 1rem;
        background-repeat: no-repeat;
        text-decoration: none;
    }

        .card .market-btn .market-button-title {
            display: block;
            color: #222;
            font-size: 0.8rem;
        }

        .card .market-btn .market-button-subtitle {
            display: block;
            margin-bottom: -0.25rem;
            color: #888;
            font-size: 0.7rem;
        }

        .card .rlink {
            font-size: 12px;
        }

    #link1 {
        margin-right: 15px; /* İlk bağlantıya özel margin */
        background-image: linear-gradient(to right, #ec0000, #bf0091, #bf0091, #ec0000);
    }

    #link2 {
        margin-right: 40px; /* İkinci bağlantıda margin sıfır */
        background-color: transparent;
    }
}

.card .postcard__tagbox_ {
    margin-top: 20px;
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px; /* Elemanlar arasında boşluk */
}

.card .tag__item {
    background: none;
    display: inline-block;
}

.card .rlink {
    font-size: 16px;
    border: 2px solid #fff;
    border-radius: 5px;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease-in-out;
}

.gradient-btn {
    background-image: linear-gradient(to right, #ec0000, #bf0091, #bf0091, #ec0000);
    margin-left: 15px;
}

.blue-pink {
    background-color: transparent;
    margin-left: 0;
}

/* Hover efekti */
.rlink:hover {
    background-color: #e7e7e7;
    color: #000;
}

.blue-pink:hover {
    background-color: #bf0091;
    color: white;
}


.card .postcard__bar {
    width: 50px;
    height: 3px;
    margin: 10px 0;
    border-radius: 0px;
    background-color: #424242;
    transition: width 0.2s ease;
}

.card:hover .postcard__bar {
    width: 100px;
}

.card .postcard__bar {
    background-color: #0076bd;
}

#link1 {
    margin-left: 5px; /* İlk bağlantıya özel margin */
    background-image: linear-gradient(to right, #ec0000, #bf0091, #bf0091, #ec0000);
}

#link2 {
    margin-left: 0; /* İkinci bağlantıda margin sıfır */
    background-color: transparent;
}

@media screen and (max-width: 414px) {
    .card .market-btn {
        padding: 0.2rem 0.4rem;
        padding-left: 1.8rem;
        background-position: center left 0.5rem;
        background-color: #fff;
        background-size: 1em 1rem;
    }

        .card .market-btn .market-button-title {
            display: block;
            color: #222;
            font-size: 0.7rem;
        }

        .card .market-btn .market-button-subtitle {
            display: block;
            margin-bottom: -0.25rem;
            color: #888;
            font-size: 0.6rem;
        }

    .card .rlink {
        font-size: 12px;
    }

    #link2 {
        margin-right: 20px;
    }

    #link1 {
        margin-right: 0;
    }

    .full-width-button .rlink {
        width: 90%;
        font-size: 16px;
        border: 2px solid #fff;
        border-radius: 5px;
        color: white;
        padding: 5px 10px;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.3s ease-in-out;
        text-align: center;
    }
}

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

    #link1{
        margin-right: 5px;
    }

    #link1 {
        margin-left: 0px;
    }
}

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

        .card .market-btn .market-button-subtitle {
            display: block;
            margin-bottom: -0.25rem;
            color: #888;
            font-size: 0.5rem;
        }

    .card .rlink {
        font-size: 10px;
    }
}