@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');


:root { --baslik-fontu: "Poppins", "Helvetica Neue", sans-serif; --icerik-fontu: "Poppins", "Helvetica Neue", sans-serif; --baslik-font-boyutu: 20px; --icerik-font-boyutu: 14px; --baslik-font-weight: 400; --icerik-font-weight: 300; --tema-renk1: #0a707c; --tema-renk2: #3396b6; --tema-renk3: #111; }

body { font-size: var(--icerik-font-boyutu); font-family: var(--icerik-fontu); margin: 0; padding: 0; background: #f4f4f4; color: #111; font-weight: var(--icerik-font-weight); }

*,
*::before,
*::after { box-sizing: border-box; }
header { background: #fff; padding: 10px 0 9px 0; }
header ul {display: flex;justify-content: flex-end;margin: 7px 0 0 0;}
header ul li { position: relative; height: 40px; list-style: none; text-align: left; margin-left: 10px; }
header ul li span {line-height: 23px;display: block;font-size: 12px;padding: 10px 0 0 0;}
header ul li a {color: blue;display: block;font-size: 12px;margin-left: 15px;font-weight: 400;}
a { text-decoration: none }
/******login page***/
form{
    min-height: calc(100vh - 238px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.row { display: flex; }
/***kolon yapisi***/
*,
*::before,
*::after { box-sizing: border-box; }
.container { margin: 0 auto; position: relative }
.container:after, .container:before { display: table; content: " "; }
.container:after { clear: both; }
.xs4, .xs6, .xs8, .cl1, .cl2, .cl3, .cl4, .cl5, .cl6, .cl7, .cl8, .cl9, .cl10, .cl11, .cl12 { float: left; padding: .1px 15px; position: relative; }
.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% }
/***kolon yapisi***/

.pakla { clear: both; }
/*******/

.loginForm { overflow: hidden; margin-top: 40px; display: flex; }

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

/********/
.maviKisim { background: #0975b8; position: relative; padding: 182px 0 0 50px; overflow: hidden; border-radius: 5px 0 0 5px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15); }
.maviKisim #daire { position: absolute; height: 600px; width: 600px; left: -294px; top: -438px; background: #08629a; border-radius: 50%; }

.maviKisim .ozet { margin: 25px 0; font-size: 13px; color: #74bfee; padding-right: 85px; }
.maviKisim a { color: #fff; font-size: 13px; border-radius: 7px; border: solid 2px #04578a; padding: 9px 55px 10px 13px; display: inline-block; letter-spacing: .5px; }
.maviKisim a:hover { background: rgba(255, 255, 255, 0.2); }
.uyeGirisKismi { background: #fff; padding: 40px 0 85px 70px; border-radius: 0 5px 5px 0; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15); width: 450px; max-width: 96%; margin: 0 auto; }
/********/
.loginForm input[type="text"], .loginForm input[type="password"] { color: #7b8e98; border: none; width: 100%; padding: 13px 10px 13px 42px; background: #eaf0f3; font-weight: 400; font-size: 12px; }
.loginForm input:hover, .loginForm input:focus { }

.loginForm a.unuttum { margin: 10px 0 30px 0; font-size: 12px; color: blue; text-decoration: underline; display: block; font-weight: 400; }
.loginButonu { animation: all ease .3s; position: relative; display: inline-block; }
.loginButonu:after { animation: all ease .3s; content: ''; position: absolute; right: 15px; top: 18px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid white; }

.loginButonu:hover input { background-color: var(--tema-renk1); }

.loginButonu input { padding: 12px 75px 12px 16px; margin: 0; color: #fff; background: var(--tema-renk2); border: none; font-size: 14px; font-weight: 400; letter-spacing: 1px; border-radius: 4px; cursor: pointer; transition: background-color ease .3s; }

.loginForm .loginBtnOff {padding: 7px 0px;color: #00746c;font-size: 13px;font-weight: 400;margin: 23px 0 0 0;display: block;}
.loginForm .faceileGir { display: block; font-size: 13px; padding: 0; color: blue; margin-top: 26px; font-weight: 400; }
.loginForm .faceileGir i { margin-right: 12px; }

.loginForm label { vertical-align: top; font-weight: normal; font-size: 12px; width: 90%; margin-left: 10px; }
.loginForm .satir { margin: 7px 0px 25px 0px; position: relative; padding: 0; width: 301px; }
.loginForm .sifreOnOff { position: absolute; right: 10px; top: 13px; color: #868686; font-family: Arial; font-size: 12px; font-weight: bold; }
.loginForm .uyeolDialogAc { color: blue; }

/******login page***/
#CBuyelik { position: absolute; top: -3px; }
label[for="CBuyelik"] { padding-left: 15px }

.satirSifre:after, .satirEposta:after { content: " "; background-size: contain; position: absolute; width: 15px; height: 19px; z-index: 99; top: 10px; left: 15px; }
.satirEposta:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAgCAMAAABemGpIAAAAt1BMVEUAAAD////////////MzMzV1dXR0dHV1dXJycnT09PMzMzR0dHR0dHMzMzJycnKysrOzs7MzMzKysrKysrMzMzLy8vLy8vJycnLy8vKysrJycnLy8vKysrLy8vKysrLy8vKysrKysrKysrKysrJycnKysrKysrJycnKysrKysrJycnJycnKysrKysrJycnKysrJycnKysrJycnKysrJycnJycnJycnKysrKysrJycnKysrKysrJycn8I01DAAAAPHRSTlMAAQMEBQYLDBMXGRwhIyYrLzI1Q0ZKT1pdZW1wdISHl5uerrG1tru9wMTHyNPU1tnj5u7v8fP3+Pn8/f5uN7t8AAABCUlEQVR4AeXU11LCQBSH8S+g9N5D74UoPShw3v+53DkZURghybW/i53M7nebP2DZjis+XMe2MFIzCWSWAkvbQLWFLYHZOOacpPGRnpjMwTWntj61yVzEyLWiPBVt5cTQeCyrCk9UVibxYs8oywPZkSgv9nx04/wh3v2Um7h/1u9tw+KO1djq07l/jSkuRC1L3CgtRS2K/MRQ3+jtZZDkKjm46OWmDjcxsc5RXw7tF9Rr+6AXx06M+xgyQ1HrKkZ1LWqYgftYld9FjfP5sai3MjyIiTR38suuGeFxDIne6Ts99RLwNIbCXNS8AL4x1Kb7/bQGgWLPv4zD/LChpiDUyISar1DDGGpyvwCrC55UXBlp6wAAAABJRU5ErkJggg==); height: 13px; width: 18px; top: 14px; }
.satirSifre:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAmCAMAAADkx9tQAAAAyVBMVEUAAAD////////////////b29vf39/R0dHb29vMzMzJycnOzs7R0dHT09POzs7Q0NDPz8/MzMzJycnLy8vMzMzOzs7Ozs7MzMzNzc3Ly8vLy8vKysrKysrLy8vLy8vJycnLy8vLy8vKysrKysrJycnJycnJycnJycnJycnKysrJycnJycnKysrKysrJycnJycnJycnKysrJycnKysrJycnKysrKysrJycnKysrKysrKysrKysrJycnJycnKysrKysrKysrKysrJyclMtK3VAAAAQnRSTlMAAQIDBAcICw4PExUWFxobICMmJygqLzI4RE9gYWJnbXB6fH6Jio6YpqirsLK3ucfIzdDX29zd3+Xn6uzx8/T4+v6cYyy1AAAA7UlEQVR4Ae2SR1PDMBBGlyQm9C4KmNBBgVAgMpgCsvb//yg+PEascREXbnkHj96+0figpR/m4qvx24e5OVimKtNH71yQnc/+rgv3LHhaK9f5hEu8rMs6dZ3Pjjdn+huHjwweIpH3GIyKP0YXX3YiLo/htz3vl9DXvtcdBtvkWbHwfa+nsCEJzjDQ3u5guzJvYZB6S2FLMnczZtf9Ngj3SPKMyWJxjnC2VCLBaPVPWQ25lpEiEFtuwMa4i9rYFWluQZPBd9ChCp0BgiEGooqO4PJMtTCY5P/IrvVJAg8aWIfAMgVWEShtXLU5o3H3EwlSfMp4azqJAAAAAElFTkSuQmCC); }

/**********/
footer { font-size: 14px; margin-top: 40px; background: #fff; padding: 20px 0 30px 0; }
footer .copy { text-align: right; color: #aeaeae; font-weight: 400; letter-spacing: .8px; }
/*******/
span.hata { font-size: 12px; color: #b70a0a; font-weight: 600; }
/*******/
/**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***/
/***********/
.loaderInner { position: absolute; z-index: 99; border-radius: 7px; left: 0; top: 20px; width: 100%; height: 37px; }
.loaderInner .circle { position: absolute; left: 50%; top: 1px; transform: translate(-50%,-50%); fill: transparent; stroke: #fff; 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; }
}
/***********/
a.logo {display: block;width: 200px;}
a.logo img {max-width: 100%;display: block;}

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

.yanyana2 {}
@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% }
    /********/
    header { padding: 10px 10px; background: #f9f9f9; 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; }

    .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; }
    a.logo {height: auto;background: #f9f9f9;padding: 5px 10px;margin: 0 -10px;}
    a.logo img {max-width: 185px;top: 5px;position: relative;}
    header ul li a{margin:0}
.row { display: block }
.yanyana1{margin:0 0 18px  0}
}