html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0;} ins { text-decoration: none;} del { text-decoration: line-through;} table { border-collapse: collapse; border-spacing: 0; } ul, li { float:left; display:inline; } h1, h2, h3, h4, h5 { font-weight:normal; } i, em { font-style:normal; } button, select { border:none; margin:0; padding:0; background:transparent; } figure { margin:0; padding:0; } * { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* Finish RESET */ body { margin:0; color:#000000; font-size:13px; font-family:'Inter Tight', Arial; letter-spacing:0.25px; line-height:20px; -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-text-size-adjust:100%; background-color:#f2f2f2; } *::-moz-selection { background:rgba(0, 0, 0, 0.1); } *::selection { background:rgba(0, 0, 0, 0.1); } a { color:var(--color-secondary); text-decoration:none; } a:hover { color:var(--color-primary); text-decoration:none; } :root { --color-primary:#FC464E; --color-secondary:#162A4C; --color-green:#093; --input-background-color: #FFF; --input-border-color: #A1AAB7; --input-border-color-inline: #FFF; --input-border-color-checked: #00A678; --input-background-color-checked: #093; --input-border-color-inline-checked: #093; --input-border-color-disabled: #A1AAB7; --input-background-color-disabled: #efefef; --input-border-color-inline-disabled: #A1AAB7; --input-border-color-hover: #093; --input-background-color-hover: #FFF; --input-border-color-inline-hover: #A1AAB7; --input-border-color-focus: #00A678; } /* Reset Css */ input, select, textarea, input[type='checkbox'], input[type='radio'] { border:none; position:relative; -webkit-appearance:none; margin:0px; padding:0px; } input:focus, select:focus, textarea:focus, input[type='checkbox']:focus, input[type='radio']:focus { outline:0; } input[type='submit'], button { border:none; position:relative; -webkit-appearance:none; margin:0px; padding:0px; outline:0; } /* Customization checkbox & radio */ input[type='checkbox'], input[type='radio'] { width:18px; height:18px; line-height:18px; min-width:1px !important; margin:1px 7px -1px 0; padding:0; } input[type='checkbox']::before, input[type='radio']::before { display:block; position:absolute; content:""; width:calc(100% - 2px); height:calc(100% - 2px); background-color:var(--input-background-color); transition:background-color 500ms, border-color 500ms; } input[type='checkbox']::after, input[type='radio']::after { display:block; position:absolute; content:""; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition:background-color 500ms, border-color 250ms; } /* Customization checbox */ input[type='checkbox']::before { border-radius:4px; border:solid 1px; border-color:var(--input-border-color); } input[type='checkbox']::after { border:solid; border-color:var(--input-border-color-inline); border-width:0 2px 2px 0; width:5px; height:10px; left:7px; bottom:5px; } input[type='checkbox']:not(:checked)::before { border-color:var(--input-border-color); } input[type='checkbox']:not(:checked)::after { border-color:var(--input-border-color-inline); } input[type='checkbox']:checked:not(:disabled)::before { border-color:var(--input-border-color-checked); background-color:var(--input-background-color-checked); } input[type='checkbox']:read-only::before, input[type='checkbox']:-moz-read-only::before { border-color:var(--input-border-color-inline-checked); } input[type='checkbox']:disabled::before { border-color:var(--input-border-color-disabled); background-color:var(--input-background-color-disabled); } input[type='checkbox']:disabled::after { border-color:var(--input-border-color-inline-disabled); } input[type='checkbox']:checked:not(:disabled):focus::before, input[type='checkbox']:not(:checked):not(:disabled):focus::before { border-color:var(--input-border-color-hover); } input[type='checkbox']:not(:checked):not(:disabled):hover::before { border-color:var(--input-border-color-hover); background-color:var(--input-background-color-hover); } input[type='checkbox']:not(:checked):not(:disabled):hover:not(:checked)::after { border-color:var(--input-border-color-inline-hover); } /* Customization radio */ input[type='radio']::before { border-radius: 50%; border: solid 1px; } input[type='radio']::after { border: solid; border-color: var(--input-border-color-inline-checked); border-width: 5px; border-radius: 50%; width: 0px; height:0px; left:4px; bottom:4px; } input[type='radio']:not(:checked)::before { border-color:var(--input-border-color); } input[type='radio']:not(:checked)::after { border-color:var(--input-border-color-inline); } input[type='radio']:checked:not(:disabled)::before { border-color: var(--input-border-color-checked); background-color: var(--input-background-color); } input[type='radio']:read-only::before, input[type='checkbox']:-moz-read-only::before { border-color:var(--input-border-color-inline-checked); } input[type='radio']:disabled::before {} input[type='radio']:disabled::after { border-color:var(--input-border-color-inline-disabled); } input[type='radio']:checked:not(:disabled):focus::before, input[type='radio']:not(:checked):not(:disabled):focus::before { border-color:var(--input-border-color-hover); } input[type='radio']:not(:checked):not(:disabled):hover::before { border-color:var(--input-border-color-hover); background-color: var(--input-background-color); } input[type='radio']:not(:checked):not(:disabled):hover:not(:checked)::after { border-color:var(--input-border-color-inline-hover); } input, textarea, select { float:left; font-size:13px; font-family:'Inter Tight', Arial; font-weight:500; border-radius:0; border:0; } select { font-weight:600; } button { border:none; padding:0; margin:0; cursor:pointer; border-radius:0; font-family:'Inter Tight', Arial; font-size:18px; font-weight:700; letter-spacing:1px; } .input { width:100%; height:30px; padding:0 10px; border:1px solid rgba(20,42,76,0.4); transition:ease 0.3s; background-color:#FFF; border-radius:6px; } .select { padding-right:29px; background:url(../images/arrow-select.png) no-repeat right center; background-size:auto 5px; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .input:focus , .select:focus { border-color:var(--color-green); } textarea.input { padding-top:10px !important; padding-bottom:10px !important; } .button { float:none; height:60px; display:inline-block; padding:0 50px 0 25px; cursor:pointer; position:relative; color:#FFF; background-color:var(--color-green); transition:all 0.25s; border-radius:6px; overflow:hidden; text-align:left; } .button:hover { background-color:#006C23; } .button::after { content:""; position:absolute; top:0; bottom:0; right:20px; width:20px; background:url(../images/arrow-white-right.png) no-repeat right center / 20px; transition:all 0.25s; } .button:hover::after { right:15px; } a.button { color:#FFF; font-weight:600; font-size:14px; line-height:50px; } .wa { width:100px !important; } .mt20 { margin-top:20px; } .mt5 { margin-top:5px; } .mr10 { margin-right:10px; } .muhasebetr { float:left; width:100%; position:relative; } .wrap { margin:0 auto; width:1000px; min-height:10px; position:relative; } /* Start TOP */ .header { float:left; width:100%; padding:20px 40px; position:relative; display:flex; align-items:center; } #logo { float:left; } #logo img { float:left; height:60px; } #logo img.logo-mobile { display:none; } .header-security { float:right; margin-left:auto; display:flex; align-items:center; } .header-security section { flex:1; padding-right:16px; text-align:right; } .header-security section strong { display:block; margin-top:8px; font-size:20px; color:var(--color-primary); } .header-security section small { display:block; font-size:11px; font-weight:500; letter-spacing:0; } .header-security picture { float:right; } .header-security picture img { float:left; width:66px; } .payment-box { float:left; width:100%; padding:40px; background-color:#FFF; box-shadow:0 4px 6px rgba(20,42,76,0.06); border-radius:8px; } .payment { float:left; width:calc(100% - 240px); } .eft { float:none; max-width:550px; margin:0 auto; } .payment-block { float:left; width:100%; margin-bottom:15px; position:relative; } .payment-step { float:left; width:100%; margin-bottom:2px; position:relative; display:flex; align-items:center; } .payment-no { float:left; width:45px; height:45px; margin-right:15px; background-color:var(--color-primary); font-size:24px; font-weight:700; color:#FFF; line-height:45px; text-align:center; border-radius:50%; } .payment-title { float:left; width:200px; font-size:20px; font-weight:700; letter-spacing:0; line-height:30px; } .payment-label { float:left; flex:1; } .payment-label label { font-weight:700; color:var(--color-green); } .payment-form { float:left; width:100%; max-width:550px; padding-left:60px; position:relative; } .form-item { float:left; width:100%; position:relative; margin-bottom:6px; display:flex; align-items:center; } .form-item-title { float:left; width:200px; font-weight:500; line-height:15px; } .form-item-title small { color:var(--color-primary); } .form-item-input { float:left; flex:1; } .security { float:right; width:150px; padding:15px; position:relative; background-color:#FFF; box-shadow:0 4px 6px rgba(20,42,76,0.06); border-radius:8px; } .security img { float:left; width:100%; } .security::after { content:""; position:absolute; left:0; right:0; bottom:0; top:0; border-radius:8px; border:1px solid var(--color-secondary); opacity:0.1; } .t-18 { font-size:16px; } .t-20 { font-size:18px; } .t-red { color:var(--color-primary); } .t-green { color:var(--color-green); } .t-yellow { color:#FF9933; } .info-box { float:left; width:100%; padding:10px 15px; margin:-10px 0 20px 0; font-weight:700; font-size:15px; background-color:#FF9; border-radius:6px; } .installment { float:left; width:calc(100% + 10px); margin-left:-5px; position:relative; } .installment label { float:left; width:33.33334%; padding:0 5px; position:relative; } .installment label:last-child { margin-bottom:0; } .installment label section { float:left; width:100%; height:60px; padding-left:40px; position:relative; border:1px solid rgba(20,42,76,0.4); border-radius:6px; cursor:pointer; font-weight:700; letter-spacing:0; line-height:16px; transition:all 0.3s; display:flex; align-items:center; } .installment label input { position:absolute; left:19px; top:calc(50% - 10px); z-index:10; } .installment label input[type="radio"]:checked + section { color:var(--color-green); border-color:var(--color-green); background-color:#DFFFDF; } .agreement , .buy-cta { float:left; width:100%; text-align:center; } .agreement label { display:inline-block; margin:20px 0; } .agreement a { color:var(--color-green); font-weight:600; } .agreement a:hover { text-decoration:underline; } .eft-text { float:left; width:100%; padding:20px; font-size:18px; line-height:24px; text-align:center; } .blog-text { float:left; width:100%; padding:20px 20px 15px 20px; font-size:16px; line-height:23px; } .blog-text p { margin-bottom:5px; } .blog-text h1 , .blog-text h2 { margin-bottom:5px; font-size:32px; font-weight:700; line-height:36px; } .blog-text h2 { font-size:24px; line-height:28px; } .agreement-text { float:left; width:100%; } .agreement-text h4 { display:block; margin-bottom:20px; font-size:20px; font-weight:700; color:var(--color-green); text-align:center; } .footer { float:left; width:100%; padding:35px 0; position:relative; text-align:center; } input.button { padding:0 50px 0 25px !important; position:relative; font-size:18px; font-weight:700; letter-spacing:1px; background-image:url(../images/arrow-white-right.png); background-size:20px; background-repeat:no-repeat; background-position:right 20px center; } @media only screen and (max-width:1023px) { .wrap { float:left; width:100%; padding:0 20px; } .header { padding:20px; } #logo img { height:50px; } .payment-box { padding:20px; } .payment { width:100%; } .payment-form { max-width:initial; } .security { display:none; } } @media only screen and (max-width:767px) { .wrap { padding:0; } .header { width:100%; height:55px; padding:2px 0 0 0; margin-bottom:35px; display:block; text-align:center; background-color:#D62424; } #logo { width:100%; } #logo img { float:none; display:none; } #logo img.logo-mobile { height:48px; margin-left:17px; display:inline-block !important; } .header-security { width:100%; margin-top:5px; position:relative; } .header-security::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:rgba(0,0,0,0.15); } .header-security section { float:left; width:100%; padding-top:0; padding-right:0; text-align:center; } .header-security section strong { padding-left:16px; margin-top:0; font-size:15px; color:#000; text-align:left; line-height:35px; } .header-security section small { display:none; } .header-security picture { display:none; } .payment-box { padding:16px; box-shadow:none; border-radius:0; } .payment-title { font-size:20px; } .payment-step { margin-bottom:15px; } .payment-step-invoice { padding-bottom:20px; } .payment-step-invoice .payment-label { position:absolute; left:120px; bottom:0; } .payment-form { padding-left:0; } .payment-no { width:40px; height:40px; margin-right:15px; font-size:23px; line-height:40px; } .form-item { margin-bottom:7px; } .form-item-title { width:120px; letter-spacing:0; } .wa { width:90px !important; } .w50 { width:60px !important; } .installment label section { padding-left:33px; padding-right:3px; } .installment label input { left:14px; } .buy-cta .button { width:100%; } .eft-text { padding:10px; font-size:16px; } .t-18 { font-size:15px; } .t-20 { font-size:17px; } .eft { max-width:initial; } .blog-text { font-size:16px; line-height:23px; } .blog-text h1 { font-size:24px; line-height:28px; } .blog-text h2 { font-size:20px; line-height:24px; } } @media only screen and (max-width:640px) { } @media only screen and (max-width:540px) { } @media only screen and (max-width:440px) { .payment-label label { font-size:12px; letter-spacing:0; } .agreement label { font-size:11px; } } @media only screen and (max-width:374px) { }