@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Outfit:wght@100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Hubot+Sans:ital,wght@0,200..900;1,200..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
  --sb-track-color: #efefef;
  --sb-thumb-color: #888888;
  --sb-size: 8px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}
.margin5 {margin-top:5px;}
.margin10 {margin-top:10px;}
.margin15 {margin-top:15px;}
.margin20 {margin-top:20px;}
.margin24 {margin-top:24px;}
.margin25 {margin-top:25px;}
.margin30 {margin-top:30px;}
.margin32 {margin-top:32px;}
.margin40 {margin-top:40px;}
.margin48 {margin-top:48px}
.margin50 {margin-top:50px;}
.margin60 {margin-top:60px;}
.margin70 {margin-top:20px;}
.margin80 {margin-top:80px;}
.margin90 {margin-top:90px;}
.margin100 {margin-top:100px;}
.temiz {clear: both;}
.temiz2 {clear: both;}
.center {text-align: center;} 
.bold {font-weight:500;}
.bold2 {font-weight: 500;}
.thin {font-weight: 300;}
.tright {text-align: right;}
.tleft {text-align: left;}

.cnavy {color: #00124F;}
.c800{color: #0521C6;}
.c700{color: #0627F2;}
.c600{color: #1533F8;}
.c500{color: #375AF8;}
.c400{color: #6B8EFA;}
.c300{color: #9DB9FB;}
.c200{color: #C7D9FD;}
.c100{color: #E1EAFE;}
.c50{color: #EFF6FE;}
.cprimary{color: #081C9E;}
.csecondary{color: #6B72B8;}
.cfourly{color: #E1E4EB;}
.cnavygri{color: #8D93A5;}
.cred50 {color:#FEE1E4;}
.cred100 {color:#B55B6E}
.corange {color:#FF9035}
.cgreen {color:#49A684}

.title-text20 {font-size:24px;}  
.title-text16 {font-size:20px;}  


.bg-white {width: 100%;  padding:72px; margin-top:-20px}

a {text-decoration: none !important}

header {width: 100%; height:auto;}
header h1 {font-size:48px; margin-top:36px; -webkit-font-smoothing: antialiased; color:#000; font-weight:500;  text-align: center; line-height:4.4rem}
header p{ font-size:20px; line-height: 2.6rem;-webkit-font-smoothing: antialiased; }
header h2 span {opacity: .4; font-style: italic;}

.modal-footer {border:none;}

.btn100 {width: 100%; display: inline-block; padding:16px 12px;border:none; font-weight: 500; font-size:13px; text-align: center; border-radius: 100px; background-color:var(--bs-100); color: var(--bs-800);}
.btn100:hover {background-color:var(--bs-700); color:var(--bs-white); transition: .4s}
.btnwhite {width: 100%;  padding:16px 32px; font-weight: 500; font-size:12px; text-align: center; border-radius: 100px; background-color:var(--bs-white); color: var(--bs-navy);}
.btnwhite:hover {background-color:var(--bs-700); color:var(--bs-white); transition: .4s}
.btn200 {width: 100%; display: inline-block; padding:16px 12px; font-weight: 500; font-size:13px; text-align: center; border-radius: 100px; background-color:var(--bs-200); color: var(--bs-800);}
.btn200:hover {background-color:var(--bs-700); color:var(--bs-white); transition: .4s}

.btnnavy {width: 100%; display: inline-block; padding:16px 12px; font-weight: 500; font-size:13px; text-align: center; border-radius: 100px; background-color:var(--bs-navy); color: var(--bs-white);}
.btnnavy:hover {background-color:var(--bs-700); color:var(--bs-white); transition: .4s}

.btn800 {width: 100%; display: inline-block; border:none; padding:16px 12px; font-weight:500 !important; font-size:13px; text-align: center; border-radius: 100px; background-color:var(--bs-800); color: var(--bs-white);}
.btn800:hover {background-color:var(--bs-200); color:var(--bs-800); transition: .4s}

.btnform2 {width: 100%; display: inline-block; padding:16px 12px; font-weight:400; font-size:14px; text-align: center; border-radius:8px; background-color:var(--bs-white); color: var(--bs-navy);}
.btnform2:hover {color:var(--bs-500); transition: .4s}


main {padding:48px 0px; background-color:var(--bs-background); border-radius: 24px; height: auto; width:98%; margin:0 auto}
.header-title {width: 100%; height: auto; text-align: center; padding:20px 0px; }
.header-title span { font-size:18px; letter-spacing:2px; font-weight:500; color:var(--bs-secondary); }
.header-title h1 {font-size:36px !important; font-weight: 500 !important; line-height: 3.4rem; padding:0px 30%;margin-top:12px;}

.header-title ol {width: 100%; margin:0; padding:0; display: flex;justify-content: center; gap:32px}
.header-title ol li { list-style:circle; font-weight:500 }
.header-title ol li a {color:var(--bs-navygri); font-weight:400}
.bg-header {display: flex; width: 100%; padding:24px;justify-content: space-between; align-items: center}

.logo {font-size:24px; font-weight: 500; color:var(--bs-primary);}
.logo a {color: var(--bs-primary);}
.logo a span {font-size:18px; opacity: .6;}
.menu ul {margin:0; padding:0;display: flex;}
.menu ul li {list-style: none; }
.menu ul li a {padding:12px 16px; font-size:14px; color:var(--bs-primary); opacity: .5}
.menu ul li a:hover {opacity: 1}


.ozelfirsat {padding:12px 24px 12px 20px; border-radius: 100px; font-size:14px; color: var(--bs-primary); border:2px solid var(--bs-background); background: var(--bs-background);display: flex;align-items: center; gap:8px;}
.ozelfirsat:hover {background-color: var(--bs-white); border:2px solid var(--bs-secondary); color: var(--bs-secondary);}

.header-category {width: 100%; margin-top:12px; display: flex; gap:24px;}
.header-category a {color: var(--bs-navy); display: inline-block; width: 100%;border:2px solid var(--bs-white); background-color:var(--bs-white); padding:36px 24px 32px 24px; border-radius:16px;}
.header-category div {display: inline-block; width: 20%; text-align: center; font-size:17px; font-weight: 500; line-height:1.6rem}
.header-category svg {margin-bottom:20px; width: 54px;}
.header-category span {font-size:12px; display: inline-block; font-weight:400;letter-spacing: 3px; opacity: .5}

.header-category a:hover {border:2px solid var(--bs-primary); color: var(--bs-primary); }
.header-all {width: 100%; text-align: center; margin-top:32px;}
.header-all a {padding:16px 32px; color: var(--bs-navy); font-size:16px !important;}
.header-all a:hover {color: var(--bs-secondary);}

.gbanner {width: 100%; margin-top:64px; display: flex;justify-content: space-between;align-items: center; background: #02024F;
background: linear-gradient(180deg, rgba(2, 2, 79, 1) 0%, rgba(51, 46, 177, 1) 100%); border-radius:32px; color:var(--bs-white);}
.gbanner1 h3 { font-size:32px; font-weight:300; line-height:3.2rem }
.gbanner1 p {font-size:18px; font-weight: 300;}
.gbanner1 {width:60%; padding:48px}
.gbanner1 div {margin-top:40px}
.gbanner1 a {padding:18px 32px; font-size:16px; color:#fff; font-weight: 300; background:#423FAA; border-radius: 111px;}
.gbanner2 img {margin-top:-48px; margin-right:64px; width:260px}

.why {width: 100%; margin-top:54px; text-align: center;}
.a-title h3 { font-size:28px; }
.a-title p {font-size:16px; font-weight: 300;}

.why-div {width: 100%; margin-top:32px; display: flex; gap:24px;}
.why-div div {padding:36px 24px 42px 24px; text-align: left; background: var(--bs-white); border-radius: 16px;}
.why-div h4 {font-size:20px; line-height:1.8rem}
.why-div svg {margin-bottom:24px; width: 54px;}
.why-div p {font-size:13px; font-weight: 300; margin-top:12px; margin-bottom:32px}
.buttonone {padding:12px 24px; background: var(--bs-primary); border-radius: 100px; font-size:13px; font-weight:300; color:var(--bs-white);}
.buttonone:hover {background-color: var(--bs-secondary); transition: .4s;}

.onerilenler {width: 100%; margin-top:48px; color:var(--bs-navy);}
.onerilenler h3 {font-weight: 500; font-size:24px;}

.onerilenler ul {margin:0; padding:0; display: flex;flex-wrap: wrap; gap:24px; margin-top:24px}
.onerilenler ul li { width:32%; list-style: none; }
.onerilenler ul li a {font-size:20px; line-height:2.2rem; font-weight:500; border-radius: 16px; background: var(--bs-white); padding:24px; display: flex; border:2px solid #fff; justify-content: space-between; align-items: center; color:var(--bs-navy);}
.onerilenler ul li span {font-weight: 400; font-size:16px; opacity: .5}
.onerilenler ul li a:Hover {border:2px solid var(--bs-secondary); color: var(--bs-secondary); transition: .4s;}



.blog-home {width: 100%; margin-top:64px; color:var(--bs-navy); }
.blog-title {display: flex; justify-content: space-between; align-items: center;}
.blog-title h3 {font-weight: 500; font-size:24px;}
.blog-title a {font-size:14px; color: var(--bs-navy);}

.blog-home-list ul {margin:0; padding:0; display: flex; gap:24px; margin-top:24px}
.blog-home-list ul li { width: 33%; list-style: none; }
.blog-home-list ul li a {display: inline-block; line-height:2.5rem; font-weight:500; border-radius: 16px; background: var(--bs-white); padding:20px 24px; border:2px solid #fff; color:var(--bs-navy);}
.blog-home-list ul li span {font-weight: 400; font-size:14px; opacity: .5}
.blog-home-list ul li h5 {font-size:20px; line-height:1.8rem}
.blog-home-list ul li a:Hover {border:2px solid var(--bs-secondary); color: var(--bs-secondary); transition: .4s;}


.blog-home-list2 ul {margin:0; padding:0; display: flex; flex-wrap: wrap; gap:24px; margin-top:24px}
.blog-home-list2 ul li { width: 32%; list-style: none; }
.blog-home-list2 ul li a {display: inline-block; line-height:2.5rem; font-weight:500; border-radius: 16px; background: var(--bs-white); padding:20px 24px; border:2px solid #fff; color:var(--bs-navy);}
.blog-home-list2 ul li span {font-weight: 400; font-size:14px; opacity: .5}
.blog-home-list2 ul li h5 {font-size:20px; line-height:1.8rem}
.blog-home-list2 ul li a:Hover {border:2px solid var(--bs-secondary); color: var(--bs-secondary); transition: .4s;}

.b-slider {width: 100%; margin-top:32px; display: flex; gap:24px; justify-content: space-between;}
.bs-1 {width: 56%;}
.bs-1 img {width: 100%; height:440px; border-radius: 16px; object-fit: cover;}
.bs-2 {width: 42%;}

.bs-2 ul {margin:0; padding:0; display: flex;flex-direction: column; gap:24px;}
.bs-2 ul li {list-style: none;}
.bs-2 ul li a {padding:20px; background: var(--bs-white); display: flex; justify-content: space-between; align-items: center; border-radius:16px; gap: 16px; color: var(--bs-navy); font-size:18px; font-weight: 500;}
.bs-2 ul li a span {font-size:13px; font-weight: 400; color: var(--bs-navygri);}
.bs-2 ul li a img {height:90px; width:120px; border-radius:12px; object-fit: cover;}

.fo-description {width: 100%; margin-top:54px; font-size:13px; font-weight:300; color: var(--bs-navy); line-height: 1.4rem;}
.fo-description h3 {font-size:24px; font-weight: 400;}


.footer-menu {display: flex; gap:24px; margin-top:40px; justify-content: space-between; }
.footer-menu ul {margin:0; padding:0;}
.footer-menu ul li {list-style: none; line-height: 1.7rem; text-align: left;}
.footer-menu ul li a {font-size:14px; font-weight: 500; color: var(--bs-navy);}
.footer-menu ul li a:hover {color: var(--bs-secondary);}
.footer-menu ul li span {font-size:12px; color: var(--bs-navygri);}


.footer-bottom { width:100%; margin-top:24px; padding:32px 0px; border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1; display:flex; align-items: center; justify-content: space-between;}
.fo-logo {font-size:20px; font-weight: 500; color: var(--bs-primary);}
.fo-social { }
.fo-social ul {display: flex; gap:20px; align-items: center; margin:0; padding:0; justify-content: space-between;}
.fo-social ul li {list-style: none;}
.fo-social ul li a:hover {color: var(--bs-secondary) !important;} 


.copyright {padding:20px; text-align: center; width:100%;}
.mm-header {width: 100%; padding:24px; display: flex; color: var(--bs-navy); justify-content: space-between; align-items: center;}
.mm-header h5 {margin:0px}
.mm-header button {background-color: var(--bs-100); color: var(--bs-primary); border:none; border-radius: 100px; font-size:12px; padding:12px 24px}
.mm-header button i {margin-right: 4px}
.offcanvas-body ul {padding:0px; margin:0px; margin-bottom:24px}
.offcanvas-body ul li {list-style: none;}
.offcanvas-body ul li a {font-size: 16px; color: var(--bs-navy); padding:20px 0px; width: 100%; display: inline-block; border-bottom:1px solid #f1f1f1;}
.offcanvas {background-color:var(--bs-white) !important;}
.mobilac {display: none !important;}
.mobilmenu {display: none;}
.mmenu {padding:16px 0px; border-radius: 100px; display: flex; gap:8px; border:none; color: var(--bs-navy); font-size:16px; background: rgba(255, 255, 255, 0.13)}


.kredi-hesaplama {width: 100%; display: flex; gap: 24px;}
.kredi-hesaplama div {width:32%}

.linput { display: inline-block; border-radius: 10px; border:var(--bs-white);}
.hesap-button {padding:26px; margin-top:0px; width: 100%; border-radius: 8px; text-align: center; display: inline-block; font-weight: 400; font-size:14px; border:none; background: var(--bs-primary); color: var(--bs-white);}
.hesaplabtn {width: 200px !important}

.asq {width: 100%; margin-top:48px}
.asq h3 {font-size:24px; font-weight: 500; color: var(--bs-navy); margin-bottom:24px}
.asq .accordion-button {padding:24px !important}

.bank-credit {width: 1005; margin-top:48px;}
.bank-title {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.bank-title p {font-size:20px !important; opacity: .5; color: var(--bs-navy);}
.bank-title h3 {color: var(--bs-navy);}

.bank-payi {margin-top:12px; display: flex; gap: 12px;flex-direction: column;}
.bank-list {width: 100%; font-size:18px; font-weight: 500; color: var(--bs-navy); background: var(--bs-white); padding:20px 24px; display: flex;justify-content: space-between; align-items: center; border-radius:16px; }
.bankimg img {height:64px}
.bank-list span {font-size:14px; opacity: .5}

.bankincele a {padding:16px 32px; margin-top:0px; width: 100%; border-radius:100px; text-align: center; display: inline-block; font-weight: 400; font-size:14px; border:none; background: var(--bs-primary); color: var(--bs-white);}
.bankincele a:Hover {background-color: var(--bs-secondary);}

.credit-info { display:flex; justify-content: space-between; align-items: center; width:60%;}
.credit-blog {width: 100%; margin-top:96px; display: flex; gap:48px; justify-content: space-between; align-items: center;}
.creditimg {border-radius: 12px;  object-fit: cover}
.creditimg2 {border-radius: 12px; height:440px; width: 500px; margin-left:60px;  object-fit: cover}
.credit-blog p {font-size:18px}

.hesap-sonuc {width: 100%; background: var(--bs-white);font-size:20px; color: var(--bs-navy); margin-top:32px; padding:24px 48px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between;}
.hesap-sonuc div {width: auto}
.hesap-sonuc span {font-size:14px; opacity: .5}
.hesaph5 {font-size:18px; line-height: 1.6rem; margin-bottom:0px; margin-top:4px}

.hsonuc {width: 100%; margin-top:48px; text-align: center;}
.hesap-sonuc2 {width: 100%; background: var(--bs-white);font-size:16px; color: var(--bs-navy); margin-top:32px; padding:36px; border-radius: 12px;}

.hesap-category {width: 100%; margin-top:32px}
.category h3 {font-size:20px; margin-bottom:24px}
.category {margin-top:32px}

.mevduat-hesaplama {width:100%; margin-top:24px; display: flex; justify-content: space-between;}
.mevduat-title {display: flex; justify-content: space-between; align-items: center;}
.mevduat-title h3 { font-size:20px; color: var(--bs-navy);}
.mevduat-title p {font-size:16px; color: var(--bs-navygri) !important;}
.m-liste {padding-left:24px; width: 78%; border-left:1px solid #fff}
.m-arama {width:20%; display: flex; flex-direction: column; gap: 16px}
.mselect {font-size:14px; padding:16px 40px 16px 16px; border:none; border-radius:10px !important}

.mev-box {width: 100%; gap:16px; margin-top:12px; background: var(--bs-white); padding:20px; border-radius: 12px; display: flex; flex-direction:column; }
.mev-box1 {width: 100%; gap:16px; display: flex; align-items: center; justify-content: space-between;}
.mev-box2 {width: 100%; padding-top:12px; border-top:1px solid #f1f1f1; display: inline-block; text-align: center !important; font-size:14px;}
.mev-bank img {height:54px}
.mev-bank {display: flex; width: 30%; justify-content: space-between; align-items: center;}
.mev-bilgi {padding-left:12px; width: 40%; border-left:1px solid #f1f1f1; display: flex; justify-content: space-between; align-items: center;}
.mev-bilgi span {font-size:20px; color: var(--bs-secondary); font-weight: 500}
.about {font-size:24px; font-weight: 300; text-align: center; margin-top:48px}
.credit-blog h1 {font-size:40px; line-height: 3.6rem; font-weight: 300; margin-bottom:16px}
.sozlesme h3 {font-size:24px; font-weight: 500;}
.sozlesme h4 {margin-top:24px; font-size:20px}


.blog-bilgi {width: 100%; margin-top:-12px}
.blog-bilgi ul {margin:0; padding:0; display: flex; gap:20px;}
.blog-bilgi ul li {list-style: none; gap:12px; display: flex; justify-content: space-between; align-items: center;}
.blog-bilgi ul li a {font-weight: 500; color: var(--bs-secondary);}
.blog-img {margin-top:32px}
.blog-img img {width: 100%; height:440px; object-fit: cover; border-radius: 12px; object-position: top}
.blog-icerik {width: 100%; margin-top:32px;}
.blog-icerik p {font-size:18px; font-weight: 400}
.iletisim {width: 100%; display: flex; gap: 24px; justify-content: space-between;}
.i-bilgi {width:45%; display: flex; flex-direction: column; gap: 16px}
.i-mesaj {width:55%; background: var(--bs-white); padding:32px; display: flex; flex-direction: column; gap: 16px; border-radius: 16px;}
.i-mesaj input {border:1px solid #f1f1f1}
.i-mesaj textarea {padding:24px; height: 160px !important}
.i-mesaj h4 {font-size:18px}

.ib2 {width: 100%; padding:20px; display: flex; color: var(--bs-navy); align-items: center; gap: 16px; font-size:20px; border-radius: 12px; background:var(--bs-white);}
.ib2 span {font-size:14px; color: var(--bs-navygri);}
.ib2 svg {height:64px; width: 64px;}

.maps {width: 100%; background: var(--bs-white); padding:16px; border-radius: 12px;}
.ib3 {width: 100%; padding:20px; display: flex; color: var(--bs-navy); align-items: center; gap: 16px; font-size:13px; border-radius: 12px; background:var(--bs-white);}
.ib3 span {font-size:14px; color: var(--bs-navygri);}
.ib3 svg {height:64px; width: 64px;}



@media (max-width: 990px) {
.credit-blog h1 {font-size:28px; line-height:2.6rem; font-weight: 300; margin-bottom:16px}
.iletisim {flex-direction: column;}
.i-mesaj {width: 100%;}
.i-bilgi {width: 100%;}
.creditimg2 {width: 100%; margin-left:0px}
.bankincele {width: 100%;}
.mevduat-hesaplama {flex-direction: column;}
.m-arama {width: 100%;}
.m-liste {width: 100%; margin-top:48px; padding-left:0px; border:none;}
.mev-box1 {flex-direction: column; width: 100%;}
.mev-bank {width: 100%;}
.mev-bilgi {width: 100%; padding-left:0px; padding-top:12px; border-top:1px solid #f1f1f1; border-left:0px}
.credit-blog {flex-direction: column-reverse}
.bank-info {text-align: center;}
.bank-title {flex-direction: column;}
.bank-list { gap:12px; flex-wrap: wrap; font-size:14px}
.bank-list div {width: 100%; }
.bank-list span {font-size:12px;}
.credit-info {width: 100%; gap:20px}
.credit-info div {width: auto}
.bankimg {text-align: center;}

.mobilmenu {display: inline !important;}
.mobilac {display: inline !important;}
.header-all {display: none;}
.logo {font-size:20px}
.header-category a {padding:20px 4px 16px 4px; line-height: 1.6rem}
.header-category a svg {height: 40px; margin-bottom:16px}
.menu {display: none;}
.msag {display: none;}
.why-div {overflow-y: auto;}
.header-title h1 {padding:0px; font-size:24px !important; line-height: 2.6rem;}
.header-category {flex-wrap: wrap; gap:12px}
.header-category div {width:48%; font-size:16px;}
.gbanner2 {display: none;}
.gbanner1 {width: 100%; padding:24px 24px 44px 24px; }
.gbanner {border-radius: 20px}
.gbanner1 h3 {font-size:20px; line-height: 2.4rem}
.gbanner1 p {font-size:14px}
.onerilenler ul {flex-direction: column; gap:12px;}
.onerilenler ul li {width: 100%;}
.blog-home-list ul li {width: 100%;}
.blog-home-list ul li a {width:300px}
.blog-home-list ul {overflow-y: auto; padding-bottom:20px}
.why-div h4 {width:248px}
.why-div {padding-bottom:20px}
.footer-menu {display: none;}
.fo-logo {display: none;}
.fo-social ul {justify-content: center;}
.fo-social {width: 100%;}

.kredi-hesaplama {flex-direction: column; gap:12px}
.kredi-hesaplama div {width: 100% !important}



}

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



}

@media only screen and (min-width:768px) and (max-width:990px) {


}

@media only screen and (min-width:1141px) and (max-width:1200px) {

}

@media only screen and (min-width:1201px) and (max-width:1400px) {


}

@media only screen and (min-width:1401px) and (max-width:1600px) {

}

@media only screen and (min-width:1601px) and (max-width:1800px) {


}

@media only screen and (min-width:1801px) and (max-width:2000px) {

}

@media only screen and (min-width:2001px) and (max-width:2200px) {

}

@media only screen and (min-width:2201px) and (max-width:2560px) {

}