html { scroll-behavior: smooth; }
body { font-size: var(--icerik-font-boyutu); font-family: var(--icerik-fontu); margin: 0; padding: 0; background: #e1e1e1; color: var(--tema-renk3); font-weight: var(--icerik-font-weight); position: relative; min-height: 100vh; }
a, a:active, a:hover, a:visited { text-decoration: none; color: var(--tema-renk3); }
h1, h2, .h2, .h3, .h4, h3, h4 { font-family: var(--baslik-fontu); font-weight: var(--baslik-font-weight); color: var(--tema-renk1); font-size: var(--baslik-font-boyutu); }
:focus, input:focus { outline: 0 !important; }
::placeholder { color: #797979; opacity: 1; font-weight: 200 }
ul, p { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
figure { margin: 0; padding: 0 }
::selection { color: #ffffff; background: #0095da; }
/***/
*,
*::before,
*::after { box-sizing: border-box; }
.container { width: 1170px; margin: 0 auto; max-width: 100%; position: relative; z-index: 5; }
.row { display: flex; }
.wrap { flex-wrap: wrap }
/******/
.cl1, .cl2, .cl3, .cl4, .cl5, .cl6, .cl7, .cl8, .cl9, .cl10, .cl11, .cl12 { position: relative; padding: 0; }
.cl1 { width: 8.333333% }
.cl2 { width: 16.666667% }
.cl3 { width: 25% }
.cl4 { width: 33.333333%; }
.cl5 { width: 41.666667% }
.cl6 { width: 50% }
.cl7 { width: 58.333333% }
.cl8 { width: 66.666667% }
.cl9 { width: 75% }
.cl10 { width: 83.333333% }
.cl11 { width: 91.666667% }
.cl12 { width: 100% }
/********/
figure.loading { position: relative; background: #eee; overflow: hidden; }
figure.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/*************/
header { padding-top: 5px; position: relative; z-index: 6; }
header .logo img { max-width: 270px; max-height: 120px; }
header .kapsul { padding: 7px 0; }
header nav { flex-grow: 1; }
header .kapsul .row { align-items: center; justify-content: space-between; width: 100%; flex-wrap: nowrap; }
header .kapsul .logo { width: fit-content; }
header .kapsul nav { width: fit-content; }
header nav .ul1 { display: flex; margin: 0; line-height: 46px; font-weight: 700; width: 100%; flex-wrap: nowrap; justify-content: flex-end; }
header nav .li1, header nav a { position: relative }
header nav .li1 { line-height: 4px; }
header nav .ul1 .li1:nth-child(1) a { padding-left: 0; margin-left: 0; }
header nav .li1 > a { color: #3c3c3c; margin: 10px 10px; display: block; line-height: 21px; font-weight: 400; font-size: 15px; }
header nav .li1 > a:hover:after { opacity: 1; width: 100%; }
header nav .li1 > a:after { transition: all ease .3s; /* content: ''; */ position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; z-index: 9; background: var(--tema-renk2); opacity: 0; }
header nav .li1 > a > i { color: #D14D42; font-size: 20px; display: block; margin-top: 2px; }
header nav .li1:hover > a { color: var(--tema-renk2); opacity: 1; }
header nav .li1:last-child a { padding-right: 0; margin-right: 0; }
header .li1.okKoy { position: relative; }
/****/
header nav .ulWrap2 { display: none; background: #fff; position: absolute; top: 41px; left: -81px; z-index: 1453; width: 259px; padding: 10px 0; text-align: left; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09); border-top: solid 4px var(--tema-renk2); border-radius: 6px; }
header nav .ulWrap2:after { position: absolute; top: -11px; left: 50%; margin-left: -4px; width: 0; height: 0; border: 8px solid transparent; border-top: 0; border-bottom: 7px solid var(--tema-renk2); content: ""; }
header nav .ul2 { position: relative; }
header nav .li1:hover > .ulWrap2 { display: block; }
header nav .ul2 .li2 { line-height: initial; position: relative; }
header nav .ul2 .li2 > a { padding: 1px 15px; color: #2d2c19 !important; white-space: normal; font-weight: 400; font-size: 16px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 51px; }
header nav .ul2 .li2:hover > a { background: var(--tema-renk2); }
/****/
header nav .ulWrap3 { display: none; position: absolute; z-index: 100; text-align: left; width: 265px; left: 100%; top: 0; padding-left: 15px; }
header nav .ul3 { position: relative; padding: 10px 0; background: #ffffff; box-shadow: 0 2px 15px rgba(33, 67, 99, 0.19); border-radius: 5px; }
header nav .ulWrap3:after { content: ''; position: absolute; width: 0; top: 10px; height: 0; border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 8px solid #333; left: 0; }
header nav .li2:hover > .ulWrap3 { display: block; }
header nav .ul3 .li3 { line-height: initial; }
header nav .ul3 .li3 > a { padding: 7px 15px; font-size: 12px; font-weight: 500; color: #2d2c19 !important; letter-spacing: 0; white-space: normal; display: block; }
header nav .ul3 .li3:hover > a { color: #111 !important; }
header nav .li2:hover > .ulWrap3 { display: block; }
header nav .ul3 .li3 { line-height: initial; }
header nav .ul3 .li3 > a { padding: 7px 15px; font-size: 13px; color: #2d2c19 !important; letter-spacing: 0; white-space: normal; display: block; font: 400 15px 'Raleway'; }
header nav .ul3 .li3:hover > a { color: #D14D42 !important; }
/****/
header nav .ulWrap4 { display: none; position: absolute; z-index: 100; text-align: left; width: 265px; left: 100%; top: 0; padding-left: 15px; }
header nav .ul4 { position: relative; padding: 10px 0; background: #ffffff; box-shadow: 0 2px 15px rgba(33, 67, 99, 0.19); border-radius: 5px; }
header nav .ulWrap4:after { content: ''; position: absolute; width: 0; top: 10px; height: 0; border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 8px solid #f39500; left: 0; }
header nav .li3:hover > .ulWrap4 { display: block; }
header nav .ul4 .li4 { line-height: initial; }
header nav .ul4 .li4 > a { padding: 7px 15px; font-size: 13px; font-weight: 500; color: #2d2c19 !important; letter-spacing: 0; white-space: normal; display: block; font: 600 12px 'Raleway'; }
header nav .ul4 .li4:hover > a { color: #D14D42 !important; }
/****/
.pakla { clear: both; }
.goster-xs { display: none !important; }
.gizle-xs { display: block !important; }
/*******/
#hamburger { cursor: pointer; position: absolute; left: 0; top: 0; width: 79px; height: 79px; z-index: 9; }
#hamburger:After { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; background: url(/d/r/noktalar.jpg); opacity: .18; }
#hamburger .inner { position: relative; width: 79px; height: 79px; background: var(--tema-renk1); }
#hamburger span { display: block; height: 2px; width: 100%; background: #fff; opacity: 1; left: 0; transition: .25s ease-in-out; position: absolute; }
#hamburger span:nth-child(1) { top: 0; display: none; }
#hamburger span:nth-child(2) { top: 41px; width: 20px; left: 17px; }
#hamburger span:nth-child(3) { top: 33px; width: 33px; left: 17px; }
#hamburger span:nth-child(4) { top: 33px; width: 20px; left: 10px; display: none; }
#hamburger.open span:nth-child(1), #hamburger.open span:nth-child(4) { top: 10px; width: 0; left: 50%; }
#hamburger.open span:nth-child(2) { transform: rotate(45deg); background: #fff; top: 35px; width: 33px; left: 17px; }
#hamburger.open span:nth-child(3) { transform: rotate(-45deg); background: #fff; top: 35px; }
#hamburger.open { background: var(--tema-renk1); }
#hamburger.open .inner:after { color: #fff }
/*******/

.kartlar { text-align: center; margin: 15px auto 0 auto; max-width: 448px; background: #1a1a18; padding: 10px 0; }
.kartlar img { max-width: 234px; }
.odeme { }
.odeme h2 { margin: 0 0 8px 0; font-size: 17px; }
.odeme .kartbilgileri { background: #f2f2f2; padding: 15px 15px; margin-right: 20px; border-radius: 4px; }
.odeme input[type=text] { background: #fff; padding: 10px 15px; border: 1px solid #ccc; border-radius: 4px; width: 264px; max-width: 100%; }
#cvv { width: 90px; }
.odeme .ustyatay { background: #f2f2f2; padding: 15px 20px; width: fit-content; margin-top: 20px; margin-right: 20px; border-radius: 4px; }
.odeme .ustyatay .satir { width: 33%; display: block; }
.odeme .ustyatay .satirodemeyapan { width: calc(50% - 8px); margin: 0 16px 5px 0; }
.odeme .ustyatay .satirtutar { width: calc(50% - 8px); }
.odeme .ustyatay .satiraciklama { width: 100%; }
.odeme .ustyatay .satir label { display: block; margin: 5px 0 3px 0; width: auto; }
.odeme .ustyatay .satir input { width: 100%; }
.odeme .satir { margin: 0 0 15px 0; position: relative; display: flex; }
.odeme .satir.marginbottom0 { margin-bottom: 0 }
.odeme .satir.skt { margin-right: 15px }
.odeme .ikiliyanyana input { width: 85px; }
.odeme .ikiliyanyana select { width: 90px; margin-right: 10px; }
input[type=text]:focus, select:focus { border-color: #3e87d8 }
.odeme .satir label { width: 150px; vertical-align: top; margin: 10px 10px 5px 0; font-size: 14px; flex-shrink: 0; }
select { background: #fff; padding: 10px 15px; width: 90px; border: 1px solid #ccc; border-radius: 4px; }
.odeme textarea { width: 204px; height: 73px; border: 1px solid #ccc; border-radius: 4px; }
button { text-transform: uppercase; cursor: pointer; border: none; padding: 16px 15px; z-index: 10; width: calc(100% - 20px); margin: 25px 0 0 0; display: block; background: var(--tema-renk1); color: #fff; font-weight: 600; font-family: var(--icerik-fontu); letter-spacing: 2px; }
button:hover { background: var(--tema-renk2); color: #111 }
button span { position: relative; z-index: 6; }

.odeme .taksitFull { text-align: center; border: solid 1px #e0e0e0; width: 100%; }
.odeme .taksitFull .deepth1.parlasin { order: 1; }

.odeme .taksitFull .deepth1.parlasin .deepth2 { }

.odeme .taksitFull .title, .odeme .taksitFull .taksittitle { line-height: 60px !important; background: #fff !important; }
.odeme .taksitFull figure { height: 60px; text-align: center; display: flex; align-items: center; justify-content: center; }
.odeme .taksitFull figure img { height: auto; width: 85px; display: inline-block; }
.odeme .taksitFull .deepth1:has(.taksittitleUl) { order: 0 }
.odeme .taksitFull .deepth1 { border-right: solid 1px #e0e0e0; flex-grow: 1; order: 2; }
.odeme .taksitFull .deepth1:last-child { border-right: none; }
.odeme .taksitFull .taksittitle { background: white !important; }
.odeme .taksitFull .deepth1 > ul { border-top: solid 1px #e0e0e0; }

.odeme .taksitFull .deepth2:last-child { border-bottom: none; }
.odeme .taksitFull .deepth2.title { }
.odeme .taksitFull .deepth2 { border-bottom: solid 1px #e0e0e0; background: #f6f6f6; font-size: 12px; line-height: 15px; position: relative; height: 60px; }
.odeme .taksitFull .deepth2 .taksithicyok { background: white; height: 60px; padding: 4px 10px; }
.odeme .taksitFull .deepth2 .artitaksityok { height: 60px; padding: 4px 10px; }
.odeme .taksitFull .deepth2 .artitaksitvar { height: 60px; overflow-y: auto; position: absolute; left: 0; top: 0; z-index: 4; width: 100%; }
.odeme .taksitFull .deepth2 .artitaksitvar:has(.cokmu1):hover,
.odeme .taksitFull .deepth2 .artitaksitvar:has(.cokmu99):hover { position: absolute; overflow: visible; box-shadow: 1px 1px 20px #383838; z-index: 9; background: #fff; width: 100%; height: auto; }
.odeme .taksitFull .deepth2 .artitaksitvar div.cokmu99 { background: #ffffff; }
.odeme .taksitFull .deepth2 .artitaksitvar:hover div { height: 60px }
.odeme .taksitFull .deepth2 .artitaksitvar div { position: relative; padding: 4px 10px; }
.odeme .taksitFull .deepth2 .artitaksitvar .cokmu1 { background: #e8e8e8; }
.odeme .taksitFull .deepth2 .oran { display: block; }
.odeme .taksitFull .deepth2 .balon { width: 18px; height: 18px; border-radius: 50%; background: green; color: #fff; display: block; position: absolute; right: 5px; top: 4px; font-size: 12px; line-height: 18px; text-align: center; }
.odeme .taksitFull .deepth2 .taksit { display: block; }
.odeme .taksitFull .deepth2 .toplam { display: block; }
.odeme .taksitFull .deepth2 .toplam strong { font-weight: 400; font-size: 10px; }
.odeme .taksitFull .deepth1 .taksittitleUl { border-top: none }
/******/
#ode89 { margin: 0 auto; }
#ode89 a { color: blue }
#garantiPay { line-height: 31px; font-size: 15px; color: #333; }
#garantiPay > div { padding: 38px 0; }
#garantiPay > div .satir { margin: 0 0 25px 0 }
#garantiPay label { display: block; }
#garantiPay input[type=text] { background: #fff; padding: 10px 15px; border: 1px solid #ccc; border-radius: 4px; width: 100%; }
#garantiPay select { width: 100%; }
#garantiPay button { width: 100%; letter-spacing: 0; }
/***loading***/

.gizle { display: none; }
.loader { left: 0; top: 0; width: 100%; height: 100%; position: fixed; z-index: 1000; background: rgba(0,0,0,0.8); }
.loader .circle { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); fill: transparent; stroke: #fff; stroke-width: 5; animation: dash 2s ease infinite,rotate 2s linear infinite; }

@keyframes dash {
    0% { stroke-dasharray: 1,95; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 85,95; stroke-dashoffset: -25; }
    100% { stroke-dasharray: 85,95; stroke-dashoffset: -93; }
}

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

main { min-height: 66vh; position: relative; z-index: 5; }

.loaderButton { text-align: center; position: relative; background: #fff; width: 105px }
.loaderButton .circle { fill: transparent; stroke: #1a73e8; stroke-width: 3; animation: dash 2s ease infinite,rotate 2s linear infinite; }

/***loading***/
/*******/
.hata { display: block; padding-left: 5px; color: red; font-weight: 700; margin: 3px 0 0 0; }


footer .logolar { margin: 0 0 10px 0; }
footer .logolar ul { display: flex; justify-content: center; align-items: center; }
footer .logolar ul li { margin: 0 10px; }
footer .logolar ul li img { max-width: 146px; max-height: 41px; width: initial !important; }
a { text-decoration: none }
iYapan { position: absolute; right: 15px; top: 15px; width: fit-content; margin: 0 auto; }
#giriYapan { position: absolute; right: 15px; display: flex; color: #ddd; font-size: 14px; top: 10px; }
#giriYapan > strong { text-align: center; display: block; margin: 0 15px; color: var(--tema-renk1); }
#giriYapan > span { color: #000; display: block; text-align: center; }
#giriYapan a { display: block; color: #000; text-align: right; font-size: 16px; }
#giriYapan a > strong { display: block; color: #fff; font-size: 26px; font-weight: 400; margin: -8px 0 0 0; }
#giriYapan a:hover strong { color: #ccc }

#installment { }
#odemeSecim { margin: 25px 0 0 0; display: flex; }
#odemeSecim a { border-radius: 0; display: block; border: none; font-size: 12px; padding: 8px 14px; font-weight: 600; margin-right: 15px; color: #0975b8; position: relative; }
#odemeSecim a.aktif { color: #fff; background: #0975b8; position: relative; }
#odemeSecim a.aktif:after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; border-top: 10px solid #0975b8; border-right: 10px solid transparent; border-left: 10px solid transparent; transform: translateX(-50%); }
#odemeSecim a.aktif #havaleIndirimi { color: #fff }
#odemeSecim a.aktif #havaleIndirimi:after { color: #fff }
#odemeSecim a.aktif #havaleIndirimi:before { color: #fff }

#odemeSecim a.havale { padding-right: 38px; display: none; }
#odemeSecim a.garantipay { }
#odemeSecim a.kredikarti { }
#odemeSecim a #havaleIndirimi { color: #0975b8; padding: 5px; border-radius: 50%; height: 25px; width: 28px; display: block; text-align: center; line-height: 15px; position: absolute; top: -2px; right: 8px; padding-left: 9px; }
#odemeSecim a #havaleIndirimi:before { content: '%'; position: absolute; top: 6px; left: 2px; font: 600 11px Arial; color: #0975b8; }
#odemeSecim a #havaleIndirimi:after { content: 'indirim'; position: absolute; bottom: -5px; left: 0; font: 400 10px Arial; color: #333; }
/**********/
/***nav-tab***/

.etezgahTab a { }
.etezgahTab a.aktif { color: #c81518 }
.tabcontent { border: 1px solid #dadada; display: none; padding: 20px 20px; background: #fff; box-shadow: 3px 3px 60px -20px rgb(0 0 0 / 32%); }
.aktifTab { display: block }
/***nav-tab***/
.loginForm { overflow: hidden; margin-top: 20px; }

.loginForm h1 { font-size: var(--baslik-font-boyutu); font-weight: 600; color: var(--tema-renk1); margin: 0 0 15px 0; }
.loginForm h2 { font-size: 26px; font-weight: 600; color: #044e7b; margin: 0 0 35px 0; }

#uyeGiris { }
/********/
.maviKisim { background: var(--tema-renk1); position: relative; padding: 30px 0 80px 25px !important; overflow: hidden; height: 100%; display: flex; flex-wrap: wrap; align-content: flex-end; border-radius: 8px 0 0 8px; }
.maviKisim figure img { position: absolute; right: 0; bottom: 0; opacity: 0.15; z-index: 0; }
.maviKisim .ozet { margin: 0 0 28px; font-size: 16px; color: #ffffff; padding-right: 35px; font-weight: 400; position: relative; z-index: 5; line-height: 28px; }
.maviKisim a { position: relative; color: #4588d7; border-radius: 50px; padding: 8px 45px 6px 17px; display: inline-block; background: #fff; font-size: 17px; font-weight: 400; z-index: 5; }
.maviKisim a:before { content: ""; position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; background: #559bea; border-radius: 50%; }
.maviKisim a:after { content: "\276F"; position: absolute; right: 24px; top: 8px; width: 0; height: 0; color: #fff; font-weight: 400; }
.maviKisim a:hover { background: rgb(3 43 67); color: #fff; }
/**************/
.uyeGirisKismi { background: #fff; padding: 30px 64px 30px; height: 100%; border-radius: 0 8px 8px 0; }
.uyeGirisKismi h1 { font-size: 19px; text-transform: uppercase; font-weight: 600; color: var(--tema-renk1); }
/********/
.loginForm input[type="text"], .loginForm input[type="password"], .loginForm input[type="email"] { color: #868686; border: none; width: 100%; padding: 0 56px; background: #f2f2f2; font-weight: 400; font-size: 16px; border-radius: 26px; height: 60px; }
.loginForm input:hover, .loginForm input:focus { }
.loginButonu { animation: all ease .3s; position: relative; display: inline-block; margin-top: 15px; width: 486px; height: 58px; max-width: 100%; }
.loginButonu:hover input[type="submit"] { background-color: #1e538f; }
.loginButonu input[type="submit"] { color: #fff; background: var(--tema-renk2); border: none; font-size: 20px; font-weight: 400; cursor: pointer; transition: background-color ease .3s; width: 100%; height: 100%; text-transform: uppercase; font-family: var(--icerik-fontu); border-radius: 26px; }
.loginForm label { vertical-align: top; font-weight: normal; font-size: 12px; width: 90%; margin-left: 10px; }
.loginForm label a { color: blue }
.loginForm .satir { margin: 0 0 25px; position: relative; padding: 0; width: 486px; max-width: 100%; }
.loginForm a.unuttum { font-size: 16px; color: #585858; display: block; width: fit-content; margin: 25px auto 0 auto; }
.loginForm .sifreOnOff { position: absolute; right: 25px; top: 50%; color: #797979; font-family: Arial; font-size: 12px; font-weight: bold; transform: translateY(-50%); text-transform: uppercase; }
/**********/
.satirSifre:after, .satirEposta:after { content: " "; background-size: contain; position: absolute; width: 15px; height: 19px; z-index: 99; top: 10px; left: 15px; }
.satirEposta:after { top: 5px; content: "\2709"; font-size: 32px; color: #cbc9c9; }
.satirSifre:after { content: ""; display: block; position: absolute; border: 3px solid #cbc9c9; top: 15px; left: 23.5px; width: 16px; height: 15px; border-radius: 35px 35px 0 0; }
.satirSifre:before { content: ""; background: #cbc9c9; border-radius: 3px; width: 25px; height: 17px; position: absolute; top: 53%; left: 19px; transform: translateY(-50%); }
/**********/
footer { padding: 80px 0; }
footer .row { justify-content: space-between; }
footer .copy { text-align: right; color: #aeaeae; font-weight: 400; letter-spacing: .8px; width: fit-content; }
footer .copy a {  color: #aeaeae; }
footer .logolar { width: fit-content; }
footer .logolar img { max-width: 329px; }
footer .imza { text-align: right; }
footer .imza a { display: inline-block; }
footer .imza img { max-width: 100px; }
/******login page***/
#CBuyelik { position: absolute; top: -3px; }
label[for="CBuyelik"] { padding-left: 15px }
/*******/
span.hata { font-size: 12px; color: #b70a0a; font-weight: 600; position: absolute; z-index: 5; }
/*******/
/**urun sepete ekle sonrasi***/
#dialogPen h3 { padding: 5px 15px }
#dialogPen #detayPen { margin-right: 22px; font-size: 14px; line-height: 25px; padding: 0 15px; color: #444; }
#modalUrun, #silAdres, #dialogPen { display: none; background: rgba(0,0,0,.2); width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; }
#modalUrun #urunic, #silAdres #adresic, #dialogPen #dialogic { background: #fff; z-index: 1001; position: fixed; padding: 15px 0; width: 600px; max-width: 96%; box-shadow: 0 5px 15px rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.2); border-radius: 6px; left: 50%; top: 50%; transform: translate(-50%,-70%); }

#dialogPen #dialogic { top: 15px; transform: translateX(-50%); position: absolute; }
#dialogPen #detayPen { overflow-y: scroll; max-height: 400px }
#dialogPen #detayPen::-webkit-scrollbar-track { background-color: #fff; }
#dialogPen #detayPen::-webkit-scrollbar { width: 5px; background-color: #fff; }
#dialogPen #detayPen::-webkit-scrollbar-thumb { background-color: #c81518; }

#modalUrun .kapat, #modalTavsiye .kapat, #silAdres .kapat, #dialogPen .kapat { font-size: 36px; position: absolute; right: 15px; top: 0; color: #000; }
#aurunAdi { font-size: 16px; margin: 10px 0 50px 0; text-align: center; }
.atext { text-align: center; margin-bottom: 15px; font-size: 22px; font-weight: 600; color: #000 }
i.aikon { border-radius: 30px; background-color: #39B54A; height: 50px; width: 50px; margin: 20px auto 10px auto; font-size: 25px; color: #fff; padding: 14px 0; display: block; text-align: center; }
#modalUrun hr { border-top: 1px solid #ccc; width: 40%; margin-bottom: 15px }
a.adevamET { float: left; font-weight: 400; position: relative; text-align: right; padding: 8px 25px; margin: 10px 20px; font-size: 16px; width: 42%; background: none; border: 1px solid #ec6e00; border-radius: 5px; color: #ec6e00 !important; }
a.adevamET span { display: inline-block; padding-left: 15px; border-radius: 5px; color: #ec6e00 !important; }
a.adevamET i { position: absolute; left: 21px; top: 10px; }
a.atamamla { float: right; font-weight: 400; position: relative; text-align: left; padding: 8px 25px; margin: 10px 20px; font-size: 16px; width: 42%; background: #39B54A; border: 1px solid transparent; border-radius: 5px; color: #fff !important; }
a.atamamla span { display: inline-block; padding-right: 15px; border-radius: 5px; color: #fff !important; }
a.atamamla i { position: absolute; right: 21px; top: 10px; }
a.atamamla:hover { opacity: .7 }
a.adevamET:hover { opacity: .7 }
/**urun sepete ekle sonrasi***/

/***********/
a.logo { display: block; width: 200px; margin: 5px auto 20px auto; }
a.logo img { max-width: 100%; display: block; }

.yanyana1 { margin-right: 10px; }
.yanyana2 { }

.yanyana2 { }


.icerik { background: #ffffffe6; padding: 30px; line-height: 30px; }
.icerik p { margin-bottom: 30px }

ul.profil { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 10; }
ul.profil > li { float: left; position: relative; display: block; color: #888; }

ul.profil > li ul.profilalt { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); z-index: 1000; display: none; position: absolute; width: 275px; right: 0; top: 39px; padding: 15px; border-radius: 5px; background: #fdfdfd; }
ul.profil > li ul.profilalt li { float: none }
ul.profil > li ul.profilalt li div.info { padding: 15px 10px 20px 10px; border-bottom: solid 1px #f1f1f1; margin: 0 -15px 10px -15px; }

ul.profil li ul { padding: 5px 0; display: none; position: absolute; right: -38px; width: 225px; background: #fff; z-index: 99; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); border: solid 1px #dfdfdf; }
ul.profil li ul:after { content: ''; position: absolute; right: 15px; top: -7px; width: 0; height: 0; border-left: 7px solid transparent; border-bottom: 7px solid #ffffff; border-right: 7px solid transparent; }
ul.profil li ul li { float: none; }
ul.profil li ul li a { padding: 12px 15px; display: block; font-weight: 400; color: #666; }
ul.profil li ul li a:hover { background: #999; color: #f9f9f9 !important; }
ul.profil li:hover ul { display: block }


.userAdi { text-align: center; margin: 10px 0 0 0; }
.userAdi span { display: block; font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--tema-renk1); }
.userAdi small { display: block; font-size: 14px; font-weight: 400; color: #444 }
#profilBilgi { border-radius: 50%; padding: 5px; color: #fff; margin: 0 0 0 0; background: var(--tema-renk1); width: 40px; height: 40px; display: block; line-height: 33px; text-align: center; font-size: 20px; }

#krediKartOrnegi { z-index: 1; position: relative; height: 239px; }
#krediKartOrnegi #onYuz { background-image: url(/d/r/creditCard.png); background-repeat: no-repeat; background-position: 0 0; z-index: 2; height: 217px; width: 335px; position: absolute; transition: all 1s ease-out; max-width: 100%; }
#krediKartOrnegi #onYuz .cardBank { z-index: 1; width: 160px; height: 34px; top: 20px; left: 20px; background-repeat: no-repeat; background-size: contain; }
#krediKartOrnegi #onYuz .cardNo { top: 110px; left: 40px; z-index: 2; font-size: 20px; }
#krediKartOrnegi #onYuz .visaMi { z-index: 1; bottom: 15px; right: 15px; line-height: initial; }

#krediKartOrnegi #onYuz .cardDate { left: 166px; top: 155px; z-index: 3; }
#krediKartOrnegi #onYuz .cardName { left: 40px; top: 180px; z-index: 4; max-width: 155px; overflow: hidden; height: 20px; word-break: break-all; line-height: 20px; }
#krediKartOrnegi #onYuz .cvc { font-size: 15px; top: 77px; left: 130px; display: none; }
#krediKartOrnegi #cardType { display: none; height: 34px; width: 57px; right: 20px; bottom: 20px; z-index: 5; background: url(/d/r/spriteABC.png) no-repeat; }
#krediKartOrnegi span { color: #0975b8; font-size: 14px; font-weight: 600; position: absolute; }
#krediKartOrnegi #arkaYuz { background-image: url(/d/r/creditCard.png); background-repeat: no-repeat; background-position: 0 -220px; top: 15px; left: 20px; z-index: 1; height: 217px; width: 335px; position: absolute; transition: all 1s ease-out; }
#krediKartOrnegi #arkaYuz .cvc { font-size: 18px; top: 85px; left: 130px; }
#krediKartOrnegi .validCards { position: absolute; top: 230px; left: 128px; white-space: nowrap; }
#krediKartOrnegi .validCards p { font-size: 11px; color: gray; float: right; }
#krediKartOrnegi .validCards .cardType { top: 6px; left: 0; background-image: url(/d/r/sprite-64.png); background-position: -518px -410px; width: 97px; height: 19px; }
#krediKartOrnegi.showBack #arkaYuz { z-index: 2; top: 0; left: 0 }
#krediKartOrnegi.showBack #onYuz, #krediKartOrnegi.showFront #arkaYuz { z-index: 1; top: 15px; left: 20px }
#krediKartOrnegi.showFront #onYuz { z-index: 2; top: 0; left: 0 }

#kartNoO { width: 161px }
.kart4 { }
.kart4 input[type=text] { height: 37px; width: 58px; font-size: 14px; margin-right: 7px; padding: 5px 9px; box-sizing: border-box; -webkit-box-sizing: border-box; }
.kart4 input[type=text]:last-child { margin-right: 0; }

.loaderInner { position: absolute; z-index: 99; border-radius: 7px; left: 0; top: 0; width: 100%; height: 100vh; background: #00000087; }
.loaderInner .circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); fill: transparent; stroke: #1a73e8; stroke-width: 4; animation: dash 2s ease infinite,rotate 2s linear infinite; }

@keyframes dash {
    0% { stroke-dasharray: 1,95; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 85,95; stroke-dashoffset: -25; }
    100% { stroke-dasharray: 85,95; stroke-dashoffset: -93; }
}


.tusTakimi { position: absolute; left: 0; bottom: 0; }
.tusTakimi a { color: #06c; text-align: right; font-size: 11px; display: block; margin-right: 15px; }

#sayisalTuslar { display: none; top: 53px; left: 151px; position: absolute; height: 155px; width: 134px; padding: 10px 15px; background: #f7f7f7; z-index: 1; border: solid 1px #e0e0e0; }

#sayisalTuslar a { height: 31px; width: 31px; text-align: center; text-decoration: none; color: #fff; padding-top: 9px; margin-bottom: 3px; margin-right: 3px; float: left; background: #909090; line-height: 11px; background-position: 0 -188px; font-size: 13px; border: solid 1px #8a8a8a; }
#sayisalTuslar a.kapatSanal { display: block; font-size: 9px; }
#sayisalTuslar a.clear { font-size: 11px; }

/****/
#dialogPen { display: none; background: rgba(0,0,0,.2); width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1001; }
#dialogPen #dialogic { background: #fff; z-index: 1001; position: fixed; padding: 15px 0; width: 600px; max-width: 96%; box-shadow: 0 5px 15px rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.2); border-radius: 6px; left: 50%; top: 50%; transform: translate(-50%,-70%); }

#dialogPen #dialogic { width: 800px; top: 15px; transform: translateX(-50%); position: absolute; }
#dialogPen #detayPen { overflow-y: scroll; max-height: 400px; min-height: 300px; }
#dialogPen #detayPen::-webkit-scrollbar-track { background-color: #cfcfcf; }
#dialogPen #detayPen::-webkit-scrollbar { width: 5px; background-color: #cfcfcf; }
#dialogPen #detayPen::-webkit-scrollbar-thumb { background-color: #075e93; }

#odenecektutar { }

.sozlesmeMenu .dropdown { position: relative; }

.sozlesmeMenu .dropdown-toggle { display: flex; align-items: center; gap: 7px; }


.sozlesmeMenu .ul2 { position: absolute; top: calc(100% + 0px); left: 0; min-width: 240px; padding: 8px; margin: 0; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 12px 35px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 1000; }

.sozlesmeMenu .dropdown:hover .ul2 { opacity: 1; visibility: visible; transform: translateY(0); }


.sozlesmeMenu .li2 { display: block; }

.sozlesmeMenu .li2 a { display: block; padding: 10px 12px; white-space: nowrap; border-radius: 5px; transition: background .2s ease; }

.sozlesmeMenu .li2 a:hover { background: #f5f5f5; }

@media (min-width: 1901px) {
    .container { width: 1200px; }
}


@media (min-width:1601px) and (max-width: 1900px) {
    .container { width: 1200px; }
}

@media (min-width:1401px) and (max-width: 1600px) {
    .container { width: 1200px; }
}

@media (min-width:1200px) and (max-width: 1400px) {
    .container { width: 1200px; }
}

@media (min-width:992px) and (max-width:1199px) {
}

@media (min-width:768px) and (max-width:991px) {
    .gizle-xs { display: none !important; }
    #hamburger { display: block; }
}

@media (max-width: 767px) {
    .container { width: 100%; padding: 0 }
    .gizle-xs { display: none !important; }
    .goster-xs { display: block !important; }
    .xs4, .xs5, .xs6, .xs7, .xs8, .xs12 { padding: 0 }
    .xs4 { width: 33.333333%; }
    .xs5 { width: 41.666667% }
    .xs6 { width: 50% }
    .xs7 { width: 58.333333% }
    .xs8 { width: 66.666667% }
    .xs12 { width: 100% }
    .xs12 { width: 100% }
    .odeme { padding: 25px 0; background: #fbfbfb; box-shadow: none; }
    .odeme .satir label { width: 100%; display: block; }

    /********/
    header { padding: 5px 0 0px 10px; text-align: center; }
    header ul { margin: 22px 0 0 0; padding: 0; }
    header ul li { float: none; margin: 0 10px; text-align: center; display: inline-block; }
    header ul li span { line-height: initial; display: block; padding: 0; }
    a.logo { }
    a.logo img { max-width: 207px; }
    .uyeGirisKismi { padding: 15px; max-width: 96%; margin-left: 2%; padding: 40px 10px 85px 10px !important; }

    .loginForm .satir { margin: 7px 0px 18px 0; width: 100%; }
    .loginButonu { display: initial; }
    .loginButonu:after { top: 6px; }

    .loginButonu input { width: 100%; }
    footer .copy { text-align: center; letter-spacing: 0; margin: 15px 0; }
    footer { text-align: center; padding: 20px 10px; position: relative; }
    a.logo { height: auto; background: #f9f9f9; padding: 5px 10px; }
    a.logo img { max-width: 185px; top: 5px; position: relative; }
    header nav .li1 > a { margin: 10px 4px !important; font-size: 14px !important; }

    .yanyana1 { margin: 0 0 18px 0 }
    header nav { white-space: nowrap; overflow-x: auto; }
    .tabcontent { padding: 15px 5px; }
    footer .logolar ul { display: block }
    body { padding: 0 }
    #sayfaBread, .icerik { padding: 0 10px }
    .odeme .satir { display: block; }
    .row { display: block; }
    #GuncelTutarliTaksitBilgileri .row { display: flex; overflow-x: auto; }
    .odeme .taksitFull .deepth1 { flex-shrink: 0 }
}