/* #Reset & Basics ================================================== */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } * { padding: 0; margin: 0; box-sizing: border-box; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* font-size:14px; */ } body { margin:0; padding:0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; /* (tarayıcının varsayılan font-size değeri 16px. Öyleyse 1rem = 16px. Ancak bu değer html içindeki font size ile değiştirilebilir.) */ font-weight: 400; line-height: 1.5; background-color: #fff; /* #f9f9f9; */ color: #222; letter-spacing: 1px; } /* Typography ------------------------------------- */ h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 1rem; font-weight: 600; line-height: 2; color: inherit; font-family: "Oswald", sans-serif;} h1 {font-size: 1.4rem; color: #000;} h2 {font-size: 1.2rem; color: #111;} h3 {font-size: 1.1rem; color: #222;} h4 {font-size: 1rem;} h5 {font-size: .9rem;} h6 {font-size: .9rem;} p {margin-top: 0; margin-bottom: 1rem;} b, strong {font-weight: 700;} small, .small {font-size: 80%;} .title-capt {font-family: "Oswald", sans-serif;} /* ürün başlıkları */ @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { h1 {font-size: 1.6rem;} h2 {font-size: 1.4rem;} h3 {font-size: 1.2rem;} } @media only screen and (min-width:0px) and (max-width:599px) { h1 {font-size: 1.6rem;} h2 {font-size: 1.4rem;} h3 {font-size: 1.2rem;} } /* List –––––––––––––––––––––––––––––––––––––––––––––––––– */ ol,ul, dl {margin-top: 0; margin-bottom: 1rem;} ol ol, ul ul, ol ul, ul ol {} /* HR –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr {box-sizing: content-box; height: 0; overflow: visible; margin-top: .5rem; margin-bottom: .5rem; border: 0; border-top: 1px solid #ddd; } hr.dashed {box-sizing: content-box; height: 0; overflow: visible; margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px dashed #ccc; } img {border:none; padding:0; margin:0; display:block;} /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a {color: #074576; text-decoration: none;} a:hover {text-decoration: none;} /* placeholder –––––––––––––––––––––––––––––––––––––––––––––––––– */ ::placeholder { color: #aaa; text-transform: uppercase; } /* Table 1 (yatay border) –––––––––––––––––––––––––––––––––––––––––––––––––– */ .aTable { width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: collapse; } .aTable thead tr { background: #fff; border:none; border-bottom: 1px solid rgb(0, 0, 0); } .aTable thead th { padding: 0.5rem; vertical-align: bottom; font-weight:700; } .aTable tbody { border-bottom: 1px solid #000; } .aTable tbody tr { border-bottom: 1px solid #ddd; } .aTable tbody td { padding: 0.5rem; vertical-align: top; } .table-bordered { border: 1px solid #ddd; } /* table 2 (dikey yatay border) –––––––––––––––––––––––––––––––––––––––––––––––––– */ .aTable2 { background-color:#fff; border-collapse: collapse; width: 100%; font-size:12px; border: 1px solid #ddd; border-left:none; margin:10px 0px;} .aTable2 thead tr { background-color:#eee; border-bottom: 1px solid #ddd;} .aTable2 thead th { border-left: 1px solid #ddd; color:#000; text-align:center; padding:2px;font-weight: bold;} .aTable2 tbody tr { background-color:#fff; border-bottom: 1px solid #ddd;} .aTable2 tbody td { color:#414141; padding:5px; text-align:center; border-left: 1px solid #ddd;} /* Form –––––––––––––––––––––––––––––––––––––––––––––––––– */ input, button, select, optgroup, textarea {margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; border:1px solid #aaa;} label {display: block; font-weight:400;} button {border-radius: 0;} button, input {overflow: visible;} button, select {text-transform: none;} button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;} button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none;} input[type="radio"], input[type="checkbox"] {box-sizing: border-box; padding: 0;} input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {-webkit-appearance: listbox;} textarea {overflow: auto; resize: vertical; background-color:#fff;} fieldset {border: 1px solid #bbb;} legend {font-weight:500;} textarea:focus, input:focus{ outline: none; } /* input:required {background: #eee;} input:invalid {background: red;} */ /* Form Custom –––––––––––––––––––––––––––––––––––––––––––––––––– */ .formum {margin:0; } .formum .form-grup {position:relative; width:100%; padding:0; margin-bottom:.5rem; font-size:1rem;} .formum .form-grup::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .formum input, .formum button, .formum select, .formum optgroup, .formum textarea {padding:.5rem 1rem;; border:1px solid #ccc; border-radius:5px;} .formum input, .formum select, .formum textarea {color: #000; font-size:1rem;} .formum input[type="checkbox"] {margin: .2rem .5rem 0 0; width: 16px; height: 16px; } .formum label {display: block; font-weight:400; font-size:1rem;} .formum fieldset {border:none; border-top: 1px dashed #ccc; margin: 20px 0; padding:1rem 0;} .formum legend {font-weight:500; background-color: #000; border: 1px dashed #ccc; color:#eee; padding:.5rem 1rem; margin-bottom:.5rem; font-size:1.2rem; border-radius:5px;} .formum a {text-decoration: underline; color:#397aff;} .formOgeXS {width:70px; padding:.3rem .3rem;} .formOgeS {width:120px;} .formOgeM {width:220px;} .formOgeL {width:340px; max-width:100%;} .formOgeXL {width:80%;} /* Form teklif urun bilgi –––––––––––––––––––––––––––––––––––––––––––––––––– */ .formUrunBilgi {margin:0; } .formUrunBilgi .form-grup {position:relative; width:100%; padding:0; margin-bottom:.5rem; font-size:1rem; color:#fff;} .formUrunBilgi .form-grup::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .formUrunBilgi input, .formUrunBilgi select, .formUrunBilgi optgroup, .formUrunBilgi textarea {padding:.5rem 1rem; border:1px solid #ccc; border-radius:5px;} .formUrunBilgi input, .formUrunBilgi select, .formUrunBilgi textarea {color: #000; font-size:1rem; width:100%; max-width:100%;} .formUrunBilgi input[type="checkbox"] {margin: .2rem .5rem 0 0; width: 16px; height: 16px; } .formUrunBilgi label {display: block; font-weight:400; font-size:1rem; color:#fff;} .formUrunBilgi fieldset {border:none; border-top: 1px dashed #ccc; margin: 20px 0; padding:1rem 0;} .formUrunBilgi legend {font-weight:500; background-color: #000; border: 1px dashed #ccc; color:#eee; padding:.5rem 1rem; margin-bottom:.5rem; font-size:1.2rem; border-radius:5px;} .formUrunBilgi a {text-decoration: underline; color:#fff;} #urunBilgiFormFixed {position:fixed; padding:0; margin:0; right: -100%; bottom: 0; height:100%; width:360px; z-index:11; border-left:5px solid #ff5e15; background: #074576;} #urunBilgiFormKutu {width:100%; height:100%; display:flex; align-items:center; overflow: hidden;} #urunBilgiFormKutuIc {padding:1rem 1.5rem; margin:0; width:100%;} #urunBilgiFormKutuIc h3 {color:#fff; margin-bottom:1rem;} #urunBilgiFormKutuIc table {margin:0;} #urunBilgiFormKutuIc table td {margin:0; vertical-align: middle;} #urunBilgiFormKutuIc table td p {color:#ddd; font-size:.8rem; line-height:1.5; margin:0; padding:0 .5rem;} .urunBilgiFormKapat {position:absolute; right:2rem; top:2rem; margin:0; padding:0; color:#fff; cursor:pointer; z-index:3;} .urunBilgiFormKapat span {font-size:2rem; line-height:2rem; margin:0; display:block;} button.urunBilgiFormBut {position: relative; float:left; border:none; /*border:5px solid #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);*/ color:#fff; background-color:#ff5e15; font-weight:500; font-size:1.3rem; line-height:1.5rem; letter-spacing:1px; transition: all .3s; cursor: pointer; padding:.5rem 1rem; margin:.5rem 0; } button#urunBilgiFormBut:hover {background-color: #074576; } /* Table –––––––––––––––––––––––––––––––––––––––––––––––––– */ .aTable { width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: collapse; } .aTable thead tr { background: #fff; border:none; border-bottom: 1px solid rgb(0, 0, 0); text-align: left; } .aTable thead th { padding: .5rem; vertical-align: bottom; font-weight:500; } .aTable tbody { border-bottom: 1px solid #000; } .aTable tbody tr { border-bottom: 1px solid #ddd; text-align: left;} .aTable tbody td { padding: .5rem; vertical-align: center; } .table-bordered { border: 1px solid #ddd; } button .btn, .btn {display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border:1px solid #fff; margin: .5rem 0; padding: .5rem 1rem; font-size: 1.2rem; line-height: 1.5; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; cursor:pointer; background-color:#ddd; color:#074576;} .btn:hover {color: #fff; background-color: #5a6268; border-color: #545b62; text-decoration: none;} .btn:focus, .btn.focus {box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);} .btn.disabled, .btn:disabled {color: #fff; background-color: #6c757d; border-color: #6c757d;} .btn span{margin-right: 0;} p.hata {background-color: #eee; color:#dc3545; padding:.5rem; margin:1rem 0; border-radius:5px;} p.onay {background-color: #eee; color:#198754; padding:.5rem; margin:1rem 0; border-radius:5px;} p.hata a {color:#88242d; font-weight:500; text-decoration: underline; } p.onay a {color:#0f4e31; font-weight:500; text-decoration: underline; } /* GRID */ .container-full {position:relative; width:100%; margin:0 auto; padding:0;} .container-genis {position:relative; width:1600px; max-width:98%; margin:0 auto; padding:0;} .container {position:relative; width:1440px; max-width:98%; margin:0 auto; padding:0;} .container-dar {position:relative; width:1140px; max-width:98%; padding:10px 0; margin:0 auto;} .grid {position:relative; width:100%; padding:0; margin:0; /* background:#ddd; */ /*display: flex; align-items: center; justify-content: center; */} .grid::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .col-1-12, .col-2-12, .col-3-12, .col-4-12, .col-5-12, .col-6-12, .col-7-12, .col-8-12, .col-9-12, .col-10-12, .col-11-12, .col-12-12, .col-1-5, .col-2-5, .col-3-5, .col-4-5 { position:relative; float:left; /* border:1px solid rgba(221,221,221,1); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; background-color:#ddd; */} .col-1-12 {width:8.33%;} .col-2-12 {width:16.66%;} .col-3-12 {width:25%;} .col-4-12 {width:33.33%;} .col-5-12 {width:41.66%;} .col-6-12 {width:50%;} .col-7-12 {width:58.33%;} .col-8-12 {width:66.66%;} .col-9-12 {width:75%;} .col-10-12 {width:83.33%;} .col-11-12 {width:91.66%;} .col-12-12 {width:100%;} /* --- */ .col-1-5 {width:20%;} .col-2-5 {width:40%;} .col-3-5 {width:60%;} .col-4-5 {width:80%;} /* .col-5-4 -> .col-12-12 */ .content {position:relative; /* background:#fff; */ margin:0px 20px; padding:0;} .content::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} /* 998-1139 | 600-997 | 0-599 */ @media only screen and (min-width:998px) and (max-width:1439px) { .content {margin:0px 16px;} } @media only screen and (min-width:0px) and (max-width:997px) { .col-1-12 {width:100%;} .col-2-12 {width:100%;} .col-3-12 {width:100%;} .col-4-12 {width:100%;} .col-5-12 {width:100%;} .col-6-12 {width:100%;} .col-7-12 {width:100%;} .col-8-12 {width:100%;} .col-9-12 {width:100%;} .col-10-12 {width:100%;} .col-11-12 {width:100%;} .col-12-12 {width:100%;} .col-1-5 {width:100%;} .col-2-5 {width:100%;} .col-3-5 {width:100%;} .col-4-5 {width:100%;} .content {margin:0px 16px;} } /* FIX --------------------------------*/ .clearfix::after {display:block; font-size:0; content:" "; clear:both; height:0;} * html .clearfix {zoom:1;} /* IE6 */ *:first-child+html .clearfix {zoom:1;} /* IE7 */ .clear {clear:both; padding:0 !important; margin:0 !important;} .fRight {float:right;} .fLeft {float:left;} /* İMG --------------------------------*/ .img {} .img img {object-fit: contain; max-width:100%;} /* En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.*/ /* kare */ .img-k {position:relative; width:100%; padding-top:100%; overflow:hidden; }/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */ .img-k img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* yatay */ .img-k-Yatay {position:relative; width:100%; padding-top:75%; overflow:hidden; }/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */ .img-k-Yatay img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* dikey */ .img-k-Dikey {position:relative; width:100%; padding-top:125%; overflow:hidden; }/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */ .img-k-Dikey img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #headerFixed {position:fixed; z-index:2; width:100%; margin:0 auto; padding:0;} /* .banner-kap {background-color:#000; text-align:center;} .banner-kap h1 {line-height:6rem; color:white; margin:0;} */ .headerFlex {display: flex; justify-content:space-between; align-items: center;} .icerikBody {margin:12px auto; background-color:#fff; padding:14px 0; box-sizing: border-box;} .headerUstKap {padding:0; /*border-bottom:1px solid #eee;*/ } .headerUstKap .headerUstKapFlex { height:3rem; display: flex; /* justify-content:space-between;*/ justify-content: flex-end; align-items: center; } .headerUstKapP {color:#eee; margin:0;} .nav-menu-ilet { margin: 0; padding: 0; line-height: normal; list-style: none; display: block; position: relative; z-index:6;} .nav-menu-ilet li { position:relative; cursor: default; float: left; color: #fff; font-weight: normal; font-size: 1.2rem; line-height: 2rem; text-decoration: none; font-weight:500; letter-spacing: 0; padding: 0 .5rem; -webkit-transition: all .3s; transition: all .3s; } .nav-menu-ilet a {color: #fff; } .nav-menu-ilet i {float:left; font-size: 1rem; line-height: 2rem; } .nav-menu-ilet span {float:left; padding:0 .5rem;} .nav-menu-ilet li:hover { color: #fff; background-color: #074576;} .nav-menu-ilet li:hover a { color: #fff;} .dilMenumSelect {float:left; margin:.3rem 0 0 0; padding:0;} ul.dilMenum {float:right; margin:0; padding:0; list-style:none; /*border:1px solid #999;*/ margin:0;} ul.dilMenum li {float:left; margin:0; padding:0 .5rem; list-style:none; border:none; font-size: .9rem; background-color: rgb(255,255,255,.01); line-height: 2rem; font-weight:500;} ul.dilMenum li a { color:#fff; display:flex; align-items: center; align-content: center;} ul.dilMenum li.dilSel {background-color: rgb(255,255,255,.1);} ul.dilMenum li img {width:32px; margin-right:5px;} .headerKap {background-color:#fff; padding:0;} .headerKap:before {content:""; position:absolute; z-index:3; box-shadow:0 5px 10px rgba(0,0,0,0.1); bottom:0; top:0; left:0; right:0; /*left:5px; right:5px; border-radius:100px / 5px;*/} #logoKap {position:relative; top:-3rem; margin-bottom:-3rem; height:8rem; padding:0; z-index:5; display:flex; } #logoKap .logo {background-color: #074576;display: flex; align-items: center; padding:0 30px;} #logoKap .logo img {height:6rem;} #logoKap .sol { background-color: #074576; position:absolute; left:-820px; width:820px; height:100%;} #logoKap .sag { width: 0px; height: 0px; border-style: solid; border-width: 8rem 3rem 0 0; border-color: #074576 transparent transparent transparent; transform: rotate(0deg); } /* headerMenu **************************** */ #headerMenu-kutu {margin:0; padding:0; padding:0 .5rem; z-index:4;} ul.headerMenu {padding:0; list-style:none; margin:0; float:left; } ul.headerMenu li {position:relative; padding:0 .5rem; color:#074576; float:left; display:block; padding:0; font-size:1.5rem; line-height:5rem; margin:0 0 0 1.4rem; cursor:pointer; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; } ul.headerMenu li a {margin:0; color:#074576; display:block;} ul.headerMenu li i {padding-right:5px;} ul.headerMenu li span.menuMetin {display:none;} ul.headerMenu li span.menuCount {position: absolute; top:-5px; right:-3px; padding:5px; line-height:1; font-size: .8rem; background-color: #000; color:#fff; border-radius:5px;} ul.headerMenu li:hover {color:#074576;} ul.headerMenu li:hover a {color:#074576;} ul.headerMenu li:first-child {} ul.headerMenu li#aramaiconum {} ul.headerMenu li#menuac {display:none;} #aramaformum {position:relative; display: none; padding:5px; margin:.5rem 0; width:80%; max-width:400px; border:none; border:1px solid #bbb; z-index:3; border-radius: 5px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; z-index:8; background-color: #fff;} #aramaformum .input {float:left; width:100%; padding:0 3rem 0 0; background:#fff; margin:0px; font-size:1.2rem; line-height:2rem; border:none; color:#000; } #aramaformum .search-but {position: absolute; right:10px; padding:0; margin:0; color:#000; background:#fff; border:none; cursor:pointer; font-size:1.4rem; line-height:2rem;} /* #aramaformum {position:relative; padding:0; margin:0; width:400px; border:none; border-bottom:5px solid #000; z-index:3; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} #aramaformum .input {float:left; width:100%; padding:0 3rem 0 0; background:#fff; margin:0px; font-size:1rem; line-height:4.6rem; border:none; color:#000; } #aramaformum .search-but {position: absolute; right:0; padding:0; margin:0; color:#000; background:#fff; border:none; cursor:pointer; font-size:1.4rem; line-height:4.6rem;} */ /* respblok **************************** */ #respblok {position:fixed; top:0; left:0; z-index:20; width:100%; height:100%; background:rgba(7, 69, 118, .9); display:none;} #respblok .mainNav {width:320px; height:100%; padding:20px; } #respblok .menuBasligim {display:none; position:relative; width:320px; padding:10px 20px; font-size:1.2rem; color:#fff; background:rgba(7, 69, 118, 1); border-bottom:1px solid #222;} #menukapat {position:absolute; left:340px; padding:16px; color:#fff; cursor:pointer; z-index:3;} #menukapat span {font-size:1.6rem; line-height:1; } /* .sf-menu -> menu() **************************** */ .sf-menu {z-index:10; font-family: "Oswald", sans-serif; letter-spacing: 1.5px; margin:0 0 0 0; list-style: none; margin-bottom:0;} /*** DEMO SKIN ***/ .sf-menu ul {position: absolute; display: none; top: 100%; left: 0px; z-index: 99; min-width: 180px; /* allow long menu items to determine submenu width */ *width: 200px; /* no auto sub width for IE7, see white-space comment below */} .sf-menu li {text-align:left; position: relative; background: transparent; white-space: nowrap; /* no need for Supersubs plugin */ *white-space: normal; /* ...unless you support IE7 (let it wrap) */ margin:0px 8px; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease;} .sf-menu li a {display: block; position: relative; color: #074576; font-weight:500; font-size:1rem; line-height:5rem; text-decoration: none; zoom: 1; /* IE7 */ } .sf-menu ul ul {top: 0; left: 100%;} /**/ .sf-menu li a:before {position:absolute; content:""; background-color:#074576; bottom:0px; left:50%; width:0%; height:6px; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; } .sf-menu li:hover a:before {width:100%; left:0;} .sf-menu li li a:before {display:none;} .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; } .sf-menu > li { float: left; } .sf-menu ul li { background: #074576; border:none; margin-right:0; margin-left:0;} .sf-menu ul ul li { background: #333;} .sf-menu li.sfHover { /* only transition out, not in */ -webkit-transition: none; transition: none; } .sf-menu li li.sfHover { background: #333; /* only transition out, not in */ -webkit-transition: none; transition: none; } .sf-menu li:hover { /* only transition out, not in */ -webkit-transition: none; transition: none; } .sf-menu li li:hover { background: #333; /* only transition out, not in */ -webkit-transition: none; transition: none; } .sf-menu li li li:hover { background: #555555; /* only transition out, not in */ -webkit-transition: none; transition: none; } .sf-menu li li a {font-size:.9rem; line-height:2rem; padding: 0px 30px; color: #fff; padding: 5px 8px; text-decoration: none; zoom: 1; /* IE7 */ } /*** arrows (for all except IE7) **/ .sf-arrows .sf-with-ul { padding-right: 24px; *padding-right: 10px; /* no CSS arrows for IE7 (lack pseudo-elements) */} /* styling for both css and generated arrows */ .sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 8px; margin-top: -3px; height: 0; width: 0; /* order of following 3 rules important for fallbacks to work */ border: 5px solid transparent; border-top-color: #fff; /* edit this to suit design (no rgba in IE8) */ border-top-color: rgba(0,0,0,.3);} .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #ccc; /* IE8 fallback colour */} /* styling for right-facing arrows */ .sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #ccc; /* edit this to suit design (no rgba in IE8) */ border-left-color: rgba(0,0,0,.3); } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #ccc; } @media only screen and (min-width:998px) and (max-width:1439px) { #logoKap {top:-2rem; margin-bottom:-2rem; height:6rem;} #logoKap .logo {padding:0 10px;} #logoKap .logo img {height:5rem;} #logoKap .sag {border-width: 6rem 2rem 0 0;} .headerUstKap .headerUstKapFlex { height:2rem;} ul.headerMenu li {line-height:4rem;} .sf-menu li {margin:0px 6px;} .sf-menu li a {font-size:.8rem; line-height:4rem; } } @media only screen and (min-width:600px) and (max-width:997px) { #logoKap {top:-2rem; margin-bottom:-2rem; height:6rem;} #logoKap .logo {padding:0 10px;} #logoKap .logo img {height:5rem;} #logoKap .sag {border-width: 6rem 2rem 0 0;} .headerUstKap .headerUstKapFlex { height:2rem;} .nav-menu-ilet {display:none;} ul.headerMenu li {line-height:4rem;} .sf-menu {display:none;} ul.headerMenu li#menuac {display:block;} .headerUstKapP {display:none;} } @media only screen and (min-width:0px) and (max-width:599px) { #logoKap {top:-2rem; margin-bottom:-2rem; height:6rem;} #logoKap .logo {padding:0 10px;} #logoKap .logo img {height:4rem;} #logoKap .sag {border-width: 6rem 2rem 0 0;} .headerUstKap .headerUstKapFlex { height:2rem;} .nav-menu-ilet {display:none;} ul.headerMenu li {line-height:4rem;} .sf-menu {display:none;} ul.headerMenu li#menuac {display:block;} .headerUstKapP {display:none;} } .menuKutum {background-color: #fff;} /* .nav-menu2 -> multilevelMenu() // ürün kategorileri için **************************** */ .nav-menu-kutu2 {padding: 0; display: flex; justify-content: center; } /* nav */ .nav-menu2, .nav-menu2 ul, .nav-menu2 li, .nav-menu2 a { margin: 0; padding: 0; line-height: normal; list-style: none; display: block; position: relative; z-index:8; } .nav-menu2 ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 9; -webkit-transition: opacity .3s; transition: opacity .3s; } .nav-menu2 li:hover > ul { left: 0; opacity: 1; z-index: 1000; } .nav-menu2 ul li:hover > ul { top: 0; left: 100%; } .nav-menu2 li { cursor: default; float: left; white-space: wrap;} .nav-menu2 ul li { float: none; } /* sub width */ .nav-menu2 ul { min-width: 15rem; -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.25); box-shadow: 2px 2px 2px rgba(0,0,0,0.25); } /* root */ .nav-menu2 a {color: #000; font-size: 1rem; line-height:4rem; text-decoration: none; font-weight:500; padding: 0 .8rem; /* text-shadow: 1px 1px 1px rgb(0,0,0,.4); */ letter-spacing: 0;} /* arrow - alt kategori varsa arrow göstermek için a.arrow classı ekleniyor */ .nav-menu2 li a.arrow::after { margin:0 5px 0 10px; display:inline-block; content:"\203A"; transform: rotate(90deg); } .nav-menu2 li li a.arrow::after {float:right; margin:0 5px 0 10px; content: "\203A"; transform: rotate(0);} /* root: active */ .nav-menu2 > li > .nav-active { background-color: rgba(0,0,0,0.05); } /* root: hover/persistence */ .nav-menu2 a:hover,.nav-menu2 a:focus, .nav-menu2 li:hover a {background: #f0ce00; color: #fff; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; } /* 2 */ .nav-menu2 li li a, .nav-menu li:hover li a { background: #f0ce00; color: #fff; font-size: .9rem; padding: 0 1rem; font-weight:400; line-height:3rem; } /* 2: hover/persistence */ .nav-menu2 li:hover li a:hover, .nav-menu2 li:hover li a:focus, .nav-menu2 li:hover li:hover a { background: #222; } /* 3 */ .nav-menu2 li:hover li:hover li a { background: #222; } /* 3: hover/persistence */ .nav-menu2 li:hover li:hover li a:hover, .nav-menu2 li:hover li:hover li a:focus, .nav-menu2 li:hover li:hover li:hover a { background: #999; } /* 4 */ .nav-menu2 li:hover li:hover li:hover li a { background: #999; } /* 4: hover */ .nav-menu2 li:hover li:hover li:hover li a:hover, .nav-menu2 li:hover li:hover li:hover li a:focus { background: #777; } /* özel */ @media only screen and (min-width:998px) and (max-width:1439px) { .nav-menu2 {display:none;} } @media only screen and (min-width:600px) and (max-width:997px) { .nav-menu2 {display:none;} } @media only screen and (min-width:0px) and (max-width:599px) { .nav-menu2 {display:none;} } /* ana sayfa */ .headerPay {position: relative; height:8rem;} /* Full Video ================================================= */ #videokap {position: relative; overflow: hidden;} #fullScreenDiv {min-height: 100%; height: 100vh; height: var(--doc-height); /* mobil 100vh fix */ width: 100vw; padding:0; margin: 0; background-color: gray; position: relative;} #video {width: 100vw; height: auto; margin: auto; display: block;} @media (min-aspect-ratio: 16/9) { #video{width: 100vw; height:auto;}} @media (max-aspect-ratio: 16/9) { #video {height: 100vh; width:auto; margin-left: 50vw; transform: translate(-50%);}} #vidContent {width: 100%; height:100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: rgba(0, 0, 0, .4); padding:24px;} #vidContent h1 {margin-top:8rem; color:#fff; font-size:2.4rem; text-align: center;} #vidContent p {color:#fff; font-size:1.6rem; text-align: center;} button.git {position:absolute; left:50%; margin-left:-2.5rem; bottom:40px; margin-top:30px; border:none; color:white; background:transparent; font-size: 2.5rem; width:5rem; line-height:5rem; cursor:pointer;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { #vidContent h1 {font-size:1.6rem;} #vidContent p {font-size:1.2rem;} } /* Full Slayt ================================================= */ #slaytim {position:relative; /**/ width:100%; max-width:1920px; padding:0; z-index:1; margin:0 auto;} .slaytimg {position:relative; padding:0; margin:0; width:100%;} .slaytimg img {/*height:480px; */ width:100%; object-fit: cover;} .bilgikutusu {position:absolute; top:0; left:0; height:100%; width:100%; z-index:6;} .bilgikutusu .container {display:flex; height:100%; align-items: center; } /* SLAYT dsyGorunum slatyClass çeşidini belirliyor slaytClass0 -> 0 - Başlık ve Açıklama Yok slaytClass1 -> 1 - Başlık ve Açıklama (Ortada) slaytClass2 -> 2 - Başlık ve Açıklama (Solda) slaytClass3 -> 3 - Başlık ve Açıklama (Sağda) */ .bilgikutusu .slaytClass0 {display:none;} .bilgikutusu .slaytClass1 {width:70%; margin: 0 auto; text-align:center;} .bilgikutusu .slaytClass2 {width:50%; float:left; } .bilgikutusu .slaytClass3 {width:50%; float:right; text-align:right;} .bilgikutusu h2 {color:#074576; font-size:2.4rem; line-height:1.5; font-weight:500; margin:0 0 0 0; padding:0 2rem; display: block; letter-spacing: 2px; /*text-shadow:1px 1px 4px rgb(0,0,0,0.5); */} .bilgikutusu p {color:#074576; font-size:1.4rem; line-height:1.5; font-weight:400; margin:1rem 0 0 0; padding:0 2rem; display: block; letter-spacing: 0; /*text-shadow:1px 1px 4px rgb(0,0,0,0.5); */} .bilgikutusu .btnSlayt {color:#fff; display: inline-block; font-weight: 600; text-align: center; white-space: nowrap; vertical-align: middle; border:1px solid #fff; padding: .3rem 1rem; margin:2rem 2rem 2rem 2rem; font-size: 1rem; line-height: 1.5; border-radius: 1px; transition: all .2s; cursor:pointer; /*text-shadow:1px 1px 4px rgb(0,0,0,0.5);*/ background-color: #074576;} .owl-item.active .bilgikutusu {} .owl-item.active .bilgikutusu h1 {animation:1s .1s backInUp both;} .owl-item.active .bilgikutusu p {animation:2s .1s backInUp both;} .owl-item.active .bilgikutusu .btnSlayt {animation:3s .1s backInUp both;} #slaytim .owl-dots {display:none;} #slaytim .owl-nav {} #slaytim .owl-nav button.owl-prev, #slaytim .owl-nav button.owl-next {position:absolute; top:50%; transform:translateY(-50%); opacity:0; font-size:30px; line-height:30px; width:50px; height:50px; color:#fff; background:rgba(0,0,0,0.5); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; cursor:pointer; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; } #slaytim .owl-nav button.owl-prev {left:50px;} #slaytim .owl-nav button.owl-next {right:50px;} #slaytim .owl-nav button.owl-prev:hover, #slaytim .owl-nav button.owl-next:hover {background:rgba(0,0,0,0.8); color:#fff;} #slaytim:hover .owl-nav button.owl-prev {opacity:0.8; left:10px;} #slaytim:hover .owl-nav button.owl-next {opacity:0.8; right:10px;} @media only screen and (min-width:998px) and (max-width:1439px) { .slaytimg img {/*height:400px; */} .bilgikutusu {} .bilgikutusu h2 {font-size:2rem; letter-spacing: 0; padding-top:6rem;} .bilgikutusu p {font-size:1.3rem;} .bilgikutusu .btnSlayt {} } @media only screen and (min-width:600px) and (max-width:997px) { .slaytimg img {height:340px;} .bilgikutusu {} .bilgikutusu h2 {font-size:1.6rem; letter-spacing: 0; } .bilgikutusu p {font-size:1.2rem;} .bilgikutusu .btnSlayt {} } @media only screen and (min-width:0px) and (max-width:599px) { .slaytimg img {height:240px;} .bilgikutusu {} .bilgikutusu h2 {padding:0 .5rem; font-size:1.2rem; letter-spacing: 0; } .bilgikutusu p {padding:0 .5rem; font-size:1rem;} .bilgikutusu .btnSlayt {margin:1rem .5rem 1rem .5rem;} .bilgikutusu .slaytClass2 {width:60%; float:left; } .bilgikutusu .slaytClass3 {width:60%; float:right; text-align:right;} } /* SLAYTCOKLU **************************** */ #slaytimCoklu {position:relative; width:98%; max-width:1620px; padding:0; z-index:1; margin:0 auto 30px auto; } .slaytimgC {position:relative; padding:0; margin:0; overflow: hidden;} .slaytimgC img {width:100%;} .slaytimgC::before{ content: ''; position: absolute; width: 100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; right: 0; transition: all .3s; } .slaytimgC:hover::before{height: 0;} .slaytimgC:hover img {animation:1s .1s pulse;} .bilgikutusu2 {position:absolute; top:0; left:0; height:100%; width:100%; padding:0; z-index:6;} .bilgikutusu2 .content {display:flex; height:100%; align-items: center;} /* SLAYT dsyGorunum slatyClass çeşidini belirliyor slaytClass0 -> 0 - Başlık ve Açıklama Yok slaytClass1 -> 1 - Başlık ve Açıklama (Ortada) slaytClass2 -> 2 - Başlık ve Açıklama (Solda) slaytClass3 -> 3 - Başlık ve Açıklama (Sağda) */ .bilgikutusu2 h1 {color:#fff; font-size:2rem; line-height:1.5; font-weight:700; margin-bottom:0; padding:0 1rem; display: block; letter-spacing: -1px; text-shadow:1px 1px 4px rgb(0,0,0,0.8); font-family: "Oswald", sans-serif;} .bilgikutusu2 p {color:#eee; font-size:1rem; line-height:1.5; font-weight:400; margin:0 0 0 0; padding:0 1rem; display: block; letter-spacing: 0; text-shadow:1px 1px 4px rgb(0,0,0,0.8); } .bilgikutusu2 .btnSlayt {color:#fff; display: inline-block; font-weight: 600; text-align: center; white-space: nowrap; vertical-align: middle; border:1px solid #fff; padding: .3rem 1rem; margin:1rem; font-size: 1rem; line-height: 1.5; border-radius: 30px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; cursor:pointer; text-shadow:1px 1px 4px rgb(0,0,0,0.8);} .bilgikutusu2 .slaytClass0 {display:none;} .bilgikutusu2 .slaytClass1 {width:100%; text-align:center;} .bilgikutusu2 .slaytClass1 h1, .bilgikutusu2 .slaytClass1 p, .bilgikutusu2 .slaytClass1 .btnSlayt {float:none; } .bilgikutusu2 .slaytClass1 h1, .bilgikutusu2 .slaytClass1 p {width:100%; } .bilgikutusu2 .slaytClass2 {width:100%;} .bilgikutusu2 .slaytClass2 h1, .bilgikutusu2 .slaytClass2 p, .bilgikutusu2 .slaytClass2 .btnSlayt {float:left; text-align:left;} .bilgikutusu2 .slaytClass2 h1, .bilgikutusu2 .slaytClass2 p {width:70%;} .bilgikutusu2 .slaytClass3 {width:100%;} .bilgikutusu2 .slaytClass3 h1, .bilgikutusu2 .slaytClass3 p, .bilgikutusu2 .slaytClass3 .btnSlayt {float:right; text-align:right;} .bilgikutusu2 .slaytClass3 h1, .bilgikutusu2 .slaytClass3 p {width:70%;} .owl-item.active .bilgikutusu2 {} .owl-item.active .bilgikutusu2 h1 {/*animation:1s .1s backInUp both;*/} .owl-item.active .bilgikutusu2 p {/*animation:2s .1s backInUp both;*/} .owl-item.active .bilgikutusu2 .btnSlayt {/*animation:3s .1s backInUp both;*/} #slaytimCoklu .owl-dots {display:none;} #slaytimCoklu .owl-nav {} #slaytimCoklu .owl-nav button.owl-prev, #slaytimCoklu .owl-nav button.owl-next {position:absolute; top:50%; transform:translateY(-50%); opacity:0; font-size:30px; line-height:30px; width:50px; height:50px; color:#fff; background:rgba(0,0,0,0.5); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; cursor:pointer; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; } #slaytimCoklu .owl-nav button.owl-prev {left:50px;} #slaytimCoklu .owl-nav button.owl-next {right:50px;} #slaytimCoklu .owl-nav button.owl-prev:hover, #slaytimCoklu .owl-nav button.owl-next:hover {background:rgba(0,0,0,0.8); color:#fff;} #slaytimCoklu:hover .owl-nav button.owl-prev {opacity:0.8; left:10px;} #slaytimCoklu:hover .owl-nav button.owl-next {opacity:0.8; right:10px;} @media only screen and (min-width:998px) and (max-width:1439px) { .bilgikutusu2 h1 {font-size:1.6rem; padding:0 .5rem; } .bilgikutusu2 p {font-size:1rem; padding:0 .5rem; } .bilgikutusu2 .btnSlayt {font-size: .8rem;} } @media only screen and (min-width:600px) and (max-width:997px) { .bilgikutusu2 h1 {font-size:1.4rem; padding:0 .5rem; } .bilgikutusu2 p {font-size:.9rem; padding:0 .5rem; } .bilgikutusu2 .btnSlayt {font-size: .8rem;} } @media only screen and (min-width:0px) and (max-width:599px) { .bilgikutusu2 h1 {font-size:1.2rem; font-weight:500; padding:0 .5rem; } .bilgikutusu2 p {font-size:.8rem; padding:0 .5rem; } .bilgikutusu2 .btnSlayt {font-size: .8rem;} } /* Banner ================================================= */ #bannerim {position:relative; width:100%; padding:0; margin:0 auto; /*border-bottom:5px solid #000;*/} #bannerim .bannerimg {position:relative; padding:0; margin:0;} #bannerim .bannerimg img {height:200px; object-fit: cover;} #bannerim .bilgikutusuBanner {position:absolute; top:50%; left:0; margin-top:-1rem; width:100%; padding:0; z-index:6; text-align:left; } #bannerim .bilgikutusuBanner span {position:relative; text-align:center; color:#fff; font-size:1.8rem; line-height:1.5; margin:0; display: block; z-index:2; font-weight: 700; letter-spacing: 0; text-shadow:1px 1px 4px rgb(0,0,0,0.5);} #bannerim .bilgikutusuBanner p {font-size:1.6rem; line-height:1.5; font-weight:400; margin:1rem 0 0 0; padding:0; color:#eee; text-shadow:1px 1px 4px #000;} .owl-item.active .bilgikutusuBanner {} .owl-item.active .bilgikutusuBanner span {animation:1s .1s backInUp both;} .owl-item.active .bilgikutusuBanner p {animation:3s .1s backInUp both;} #bannerim .owl-dots {display:none;} #bannerim .owl-nav {display:none;} @media only screen and (min-width:998px) and (max-width:1439px) { #bannerim .bannerimg img, #noBanner .bannerimg img {height:180px;} #bannerim .bilgikutusuBanner span, #noBanner .bilgikutusuBanner span {font-size:2rem;} } @media only screen and (min-width:600px) and (max-width:997px) { #bannerim .bannerimg img, #noBanner .bannerimg img {height:160px;} #bannerim .bilgikutusuBanner span, #noBanner .bilgikutusuBanner span {font-size:1.8rem;} } @media only screen and (min-width:0px) and (max-width:599px) { #bannerim .bannerimg img, #noBanner .bannerimg img {height:140px;} #bannerim .bilgikutusuBanner span, #noBanner .bilgikutusuBanner span {font-size:1.6rem;} } /* Hakkımızda vb */ .flexKapCenter {display: flex; width:100%; justify-content: center; flex-wrap: wrap;} /* anaSayfUrnKat - anasayfa anaSayfUrnKat modul */ .anaSyfKatKutu {padding:0; margin-top:32px; margin-bottom:32px; z-index:10;} .boxAnaSayfKat1 {margin-bottom:2rem; width:25%; float:left;} /* alt kat. listeleme 3-4 sutun*/ .boxAnaSayfKat1 .content {margin-bottom:10px;} .boxAnaSayfKat1 img {z-index:1;} /* .anaKatImgKap::before { content: ''; position: absolute; width: 100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; right: 0; transition: all .3s; z-index:2;} */ .boxAnaSayfKat1:hover .anaKatImgKap::before {height: 0;} .boxAnaSayfKat1 .capt {position: absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items: center; z-index:3; } .boxAnaSayfKat1 .capt span.title-capt {width:80%; padding:0; margin:0 auto; text-align:center; /* border:2px solid #fff; border-radius: 5px;*/ } .boxAnaSayfKat1 .capt span.title-capt a {color:#fff; display:block; padding:1rem; line-height:1.5; font-size:1.4rem; font-weight:700; text-shadow:1px 1px 4px rgb(0,0,0,0.8);} .boxAnaSayfKat1:hover .capt span.title-capt a {animation:1s .1s pulse;} .boxAnaSayfKat2 {margin-bottom:32px; width:40%; } /* alt kat. listeleme 3-4 sutun*/ .boxAnaSayfKat2 .content { /*background-color: #ddd;*/} .boxAnaSayfKat2 .sol {float:left; width:50%; background-color: #fff; /*border:1px solid #eee;*/} .boxAnaSayfKat2 img {} .boxAnaSayfKat2 .capt {float:left; width:50%; padding:1.5rem; height: 100%;} .boxAnaSayfKat2 .capt span.title-capt {display:block; padding:0; margin:0 0 .5rem 0; line-height:1.5; font-size:1.2rem; font-weight:500; color:#000;} .boxAnaSayfKat2 .capt span.title-capt a {color:#000;} .boxAnaSayfKat2 .capt p {margin:0 0 .5rem 0; line-height:1.5; letter-spacing:0; font-size:.9rem; color:#fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;} .boxAnaSayfKat2 .capt .btn {} @media only screen and (min-width:998px) and (max-width:1439px) { .anaSyfKatFlex {padding:0;} .boxAnaSayfKat2 {width:50%;} .boxAnaSayfKat2 .sol {width:50%;} .boxAnaSayfKat2 .capt {width:50%; padding:1rem; } .boxAnaSayfKat2 .capt span.title-capt {font-size:1rem;} .boxAnaSayfKat2 .capt p {font-size:.9rem; -webkit-line-clamp: 3;} } @media only screen and (min-width:600px) and (max-width:997px) { .anaSyfKatFlex {padding:0;} .boxAnaSayfKat1 {width:50%;} .boxAnaSayfKat2 {width:80%;} .boxAnaSayfKat2 .sol {width:50%;} .boxAnaSayfKat2 .capt {padding:1rem; width:50%;} .boxAnaSayfKat2 .capt span.title-capt {font-size:1rem;} .boxAnaSayfKat2 .capt p {font-size:.9rem; -webkit-line-clamp: 3;} } @media only screen and (min-width:0px) and (max-width:599px) { .anaSyfKatFlex {padding:0;} .boxAnaSayfKat1 {width:50%;} .boxAnaSayfKat1 .capt span.title-capt a {padding:.5rem; line-height:1.5; font-size:1.2rem; font-weight:500;} .boxAnaSayfKat2 {width:50%;} .boxAnaSayfKat2 .sol {width:100%; background-color: #fff; /*border:1px solid #eee;*/} .boxAnaSayfKat2 .capt {width:100%; padding:1rem; padding:1rem;} .boxAnaSayfKat2 .capt span.title-capt {font-size:1rem;} .boxAnaSayfKat2 .capt p {font-size:.8rem; -webkit-line-clamp: 3;} } /* anasayfa ürün tab */ ul.modulTabs {width:100%; margin:32px 0 8px 0; padding:0px; list-style: none; display: flex; justify-content: center; } ul.modulTabs li {list-style:none; font-family: "Oswald", sans-serif; font-size:1rem; font-weight:500; line-height:2; color: #074576; padding:.5rem 1rem; margin:0 .5rem; cursor: pointer; border:1px solid #ccc; text-align:center;} ul.modulTabs li.current {background-color: #074576; color:#fff;} .modulTabs-content { position:relative; width:100%; display: none; border:none; padding:20px 0; border-top:1px solid #ccc; text-align: justify;} .modulTabs-content.current { display: inherit;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { ul.modulTabs li {width:90%; } } /* owl1 - anasayfa modul */ .owl-secme {margin-top:20px; margin-bottom:10px; padding:0 2rem;} .owl-secme .owl-nav {} .owl-secme .owl-nav button.owl-prev, .owl-secme .owl-nav button.owl-next {position:absolute; top:50%; margin-top:-1rem; font-size:2rem; width:2rem; height:2rem; line-height:2rem; color:#074576; cursor:pointer; } .owl-secme .owl-nav button.owl-prev {left:0;} .owl-secme .owl-nav button.owl-next {right:0;} .owl-secme .owl-nav button.owl-prev:hover, .owl-secme .owl-nav button.owl-next:hover {color:#000;} .owl-secme .boxUrn2, .owl-secme .boxSyf2 {width:100%;} /* sepet sayfalarında */ .sptOzet {padding:1rem; background-color: #eee;} .sptOzet p {font-size:.9rem} /*odeme sayfalarında */ .kartKap {border:1px solid #ccc; width:380px; padding:2rem 1rem; border-radius:5px;} .formum .kartKap input#kartNo, .formum .kartKap input#kartName {width:100%; margin-bottom:1rem;} /* modal*/ .modal::before {content: ""; display: none; background: rgb(0,0,0,0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .opened::before {display: block;} .opened .modal-dialog {transform: translate(0, 0); top: 20%; } .modal-dialog {padding: 20px; background: #fefefe; border: #074576 solid 0px; border-radius: 5px; margin-left: -40%; text-align:left; position: fixed; left: 50%; top: 0; z-index: 11; width: 80%; max-height:60%; overflow: scroll; box-shadow:0 5px 10px rgba(0,0,0,0.3); transform: translate(0, -500%); transition: transform 0.3s ease-out;} a.openmodal {cursor: pointer;} a.closemodal {text-align:center; width:2rem; font-size:1.6rem; line-height:2rem; cursor: pointer; position:fixed; right:1rem; top:1rem; background:#000; color:#fff; text-decoration:none; border-radius: 50%;} .lognFormKap {float:left; width:100%; min-height:340px; background-color: white; margin-bottom:30px; padding:30px; } /*uye sayfalarında */ .menukap {background-color:#eee; border-radius:5px; padding:1rem 0; margin: 0 16px; border:1px solid #ddd; box-sizing: border-box;} .menukap ul { margin:0px; padding:0; border-top:1px solid #ddd;} .menukap ul li {background:none; float:left; margin:0; padding:0; list-style:none; width:100%; } .menukap ul li:first-child {} .menukap ul li:last-child {} .menukap ul li a {padding:0.3rem 0.7rem; margin:0; font-size: 1rem; line-height: 1.5; color:#074576; display:block; border-bottom:1px solid #ddd; font-weight:500;} .menukap ul li i {margin:0 1rem 0 0; padding:0; } .menukap ul li:hover, .menukap ul li.select {background-color:#999; border-bottom:1px solid #ddd; color:#fff;} .menukap ul li:hover a, .pnlKap ul li.select a {color:#fff;} .menukap ul li ul {margin:0; padding:0;} .menukap ul li ul li {padding:0 0 0 36px; padding:0;} .menukap ul li ul li a {padding:0.3rem 3rem; margin:0; font-size: .9rem; line-height: 1.2; color:#bbb; font-weight:300;} .pnlKap {border-radius:5px; padding:1rem 0; margin: 0 16px; box-sizing: border-box;} .pnlKap ul { margin:0px; padding:0;} .pnlKap ul li {background:none; float:left; margin:10px 1%; padding:0; list-style:none; width:23%; border:1px solid #ddd; background-color:#eee; border-radius:5px; box-sizing: border-box; text-align:center;} .pnlKap ul li:first-child {} .pnlKap ul li:last-child {} .pnlKap ul li a {padding:3rem 1rem; margin:0; font-size: 1rem; line-height: 1.5; color:#074576; display:block; font-weight:500; } .pnlKap ul li i {margin:0 1rem 0 0; padding:0; } .pnlKap ul li:hover, .pnlKap ul li.select {background-color:#999; color:#fff;} .pnlKap ul li:hover a, .pnlKap ul li.select a {color:#fff;} .pnlKap ul li ul {margin:0; padding:0;} .pnlKap ul li ul li {padding:0 0 0 36px; padding:0;} .pnlKap ul li ul li a {padding:0.3rem 3rem; margin:0; font-size: .9rem; line-height: 1.2; color:#bbb; font-weight:300;} @media only screen and (min-width:998px) and (max-width:1439px) { .pnlKap ul li {margin:10px 1%; width:31%;} } @media only screen and (min-width:0px) and (max-width:997px) { .pnlKap ul li {margin:10px 1%; width:48%;} } /* ANA SAYFA ve DİĞER SAYFALARDA ... */ .icAnaPUst {position:relative; text-align:center; color:#074576; font-family: "Oswald", sans-serif; font-size:1.2rem; line-height:1.5; margin:2rem 0 0 0; display: block; font-weight: 500; letter-spacing: 0;} .icAnaH {position:relative; text-align:center; color:#074576; font-size:2.4rem; line-height:1.5; margin:1rem 0 2rem 0; display: block; font-weight: 500; letter-spacing: 0;} .icAnaH a {position:relative; color:#074576; display: block; padding: 0.2em 0; text-decoration: none;} /**/ .icAnaH::before {position:absolute; content:""; top:-.5rem; left:50%; margin-left:-25px; width:50px; height:3px; background:#ff5e15; } .anaBanner-kap { /*background:#d47f07 url("../img/anaBannerBG3.jpg") no-repeat center center; */ background:#eae2e7; padding:4px 0; color:#074576; font-size: .9rem; line-height: 1.5;} .anaBanner {padding:2rem 0; background:#eae2e7 url("../img/destekBG.png") no-repeat left center; } .anaBanner h3 {position:relative; text-align:center; color:#074576; font-size:1.5rem; line-height:1.5; margin:0 0 .5rem 0; display: block; z-index:2; font-weight: 700; letter-spacing: 0;} .anaBanner p {position:relative; text-align:center; color:#666; font-size:1.2rem; line-height:1.5; margin:0 0 1rem 0; display: block; z-index:2; font-weight: 400; letter-spacing: 0;} .anaBanner .btn {margin:0 auto;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { .icAnaPUst {font-size:1rem;} .icAnaH {font-size:1.8rem;} } @media only screen and (min-width:0px) and (max-width:599px) { .icAnaPUst {font-size:.9rem;} .icAnaH {font-size:1.6rem;} } /* ÜRÜN KATEGORİLERİ */ .icUrnKatH1 {position:relative; color:#074576; font-size:1.5rem; line-height:1.5; margin-bottom:1.5rem; display: inline-block; font-weight: 500; letter-spacing: 0;} .icUrnKatH1 a {position:relative; color:#074576; } .icUrnKatH2 {position:relative; color:#074576; font-size:1.5rem; line-height:1.5; margin-bottom:1.5rem; display: inline-block; font-weight: 500; letter-spacing: 0;} .icUrnKatH2 a {position:relative; color:#074576; } .icUrnKatH2b {position:relative; color:#074576; font-size:1.5rem; line-height:1.5; margin-bottom:1.5rem;} .icUrnKatH2b a {color:#074576;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { .icUrnKatH1 {font-size:1.4rem;} .icUrnKatH2 {font-size:1.4rem;} .icUrnKatH2b {font-size:1.4rem;} } @media only screen and (min-width:0px) and (max-width:599px) { .icUrnKatH1 {font-size:1.2rem;} .icUrnKatH2 {font-size:1.2rem;} .icUrnKatH2b {font-size:1.2rem;} } /* ÜRÜN Kategori Liste Görünümleri */ /*-> alt kategoriler */ .boxUrnK1 {margin-bottom:1rem;} /* alt kat listeleme 1 sutun*/ .boxUrnK1 .content2 {margin:16px; padding:16px; transition: all 0.3s; border:1px solid #eee;} .boxUrnK1 .content {margin:0px 10px;} .boxUrnK1 .capt {margin-bottom: 1.5rem;} .boxUrnK1 .capt span.title-capt {color:#222; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:600;} .boxUrnK1 .capt span.title-capt a {color:#222; display:block;} .boxUrnK1 .sol {} .boxUrnK1 .sag {} .boxUrnK1:hover .content2 {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ .boxUrnK2 {margin-bottom:1rem;} /* alt kat. listeleme 3-4 sutun*/ .boxUrnK2 .content {margin:0px 10px; transition: all 0.3s; border:1px solid #eee;} .boxUrnK2 .content2 {padding:12px;} .boxUrnK2 .capt {width:100%; margin:1rem 0; height: 4rem; padding:0; background-color: #ff5e15; transition: all 0.3s; display: flex; align-items: center; justify-content: center;} .boxUrnK2 .capt span.title-img {height: 4rem; width:4rem; background:#074576 url("../img/urunlogo.png") no-repeat center center; background-size: 80%;} .boxUrnK2 .capt span.title-capt {padding: 0 .5rem; margin: 0; width: calc(100% - 4rem); text-align: center; line-height: 1.5rem; font-size: 1rem; letter-spacing: 2px; font-weight: 500; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;} .boxUrnK2 .capt span.title-capt a {color:#fff; display:block;} .boxUrnK2 .descript {line-height:1.6rem; height:4.8rem; margin:.5rem; overflow: hidden; text-align:center; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;} .boxUrnK2:hover .capt {background-color: #074576;} /* #000 */ .boxUrnK2:hover .content {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ .boxUrnKButon { float:left; margin:0 .5rem 1rem 0; padding:0;} .boxUrnKButon a {background-color: #666; color:#fff; padding:.5rem; border-radius:5px; border:1px solid #666; display:block; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease;} .boxUrnKButon a:hover {background-color: #eee; color:#666; } /*-> urunler */ .boxUrn1 {margin-bottom:1rem;} /* alt kat listeleme 1 sutun*/ .boxUrn1 .content2 {margin:16px; padding:16px; transition: all 0.3s; border:1px solid #eee;} .boxUrn1 .content {margin:0px 10px;} .boxUrn1 .capt {margin-bottom: 1.5rem;} .boxUrn1 .capt span.title-capt {color:#222; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:600;} .boxUrn1 .capt span.title-capt a {color:#222; display:block;} .boxUrn1 .fyt {width:100%; margin-bottom: 1rem;} .boxUrn1 .fyt span.fiyat {text-align: left; /* center */ color:#222; padding:0; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 0; font-weight:400; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn1 .fyt span.fiyattl {text-align: left; /* center */ color:#222; padding:0; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 0; font-weight:500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn1 .ozt {margin-bottom: 1rem;} .boxUrn1 .ozt ul {list-style: circle inside;} .boxUrn1 .ozt ul li {margin:0 10px 0 0; padding:0; font-size:.8rem; } .boxUrn1 .sol {} .boxUrn1 .sag {} .boxUrn1:hover .content2 {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ .boxUrn2 {margin-bottom:1rem;} /* alt kat. listeleme 3-4 sutun*/ .boxUrn2 .content {margin:0px 10px; transition: all 0.3s; border:1px solid #eee;} .boxUrn2 .content2 {padding:12px;} .boxUrn2 .capt {width:100%; margin:1rem 0; height: 5rem; padding:0; background-color: #eee; transition: all 0.3s; display: flex; align-items: center; justify-content: center;} .boxUrn2 .capt span.title-capt {padding: 0 .5rem; margin: 0; width: calc(100% - 4rem); text-align: center; line-height: 1.5rem; font-size: 1rem; letter-spacing: 1px; font-weight: 500; color: #074576; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;} .boxUrn2 .capt span.title-capt a {color:#074576; display:block;} .boxUrn2:hover .capt {background-color: #074576;} /* #000 */ .boxUrn2:hover .capt span.title-capt a {color: #fff;} /* #000 */ .boxUrn2:hover .content {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ .boxUrn2 .fyt {width:100%; height:3.4rem; padding:.5rem 1rem;} .boxUrn2 .fyt span.fiyat {color:#222; padding:0; margin:0; line-height:1.2rem; font-size:1rem; letter-spacing: 0; font-weight:400; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn2 .fyt span.fiyattl {color:#222; padding:0; margin:0; line-height:1.2rem; font-size:1rem; letter-spacing: 0; font-weight:500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn2 .img-k img, .boxUrn2 .img-k-dikey img, .boxUrn2 .img-k-yatay img {width:auto;} .uIndirim {position:absolute; top:10px; right:-5px; background-color: #074576; color:#fff; text-align:center; padding: 0 10px; line-height:30px; border-radius: 10px 0 0 10px; font-size: .8rem; overflow: hidden;} .uYeni {position:absolute; top:5px; left:5px; background-color: #666; color:#fff; height:50px; width:50px; line-height:50px; text-align:center; border-radius: 50%; font-size: .8rem; overflow: hidden;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { /*-> alt kategoriler */ .boxUrnK1 .sol {width:30%;} .boxUrnK1 .sag {width:70%;} .boxUrnK2 {width:33.33%;} .boxUrnK2 .content {margin:0px 5px;} .boxUrnK2 .content2 {padding:6px;} .boxUrnK2 .capt {height: 5rem; margin:.5rem 0;} .boxUrnK2 .capt span.title-img {height: 5rem; width:3rem;} .boxUrnK2 .capt span.title-capt {padding: 0 .2rem; margin: 0; width: calc(100% - 3rem); font-size: .9rem; letter-spacing: 0; -webkit-line-clamp: 3; line-clamp: 3;} .boxUrnK2 .descript {line-height:1.2rem; height:3.6rem; font-size:1.1rem;} /*-> urunler */ .boxUrn1 .sol {width:30%;} .boxUrn1 .sag {width:70%;} .boxUrn2 {width:33.33%;} .boxUrn2 .content {margin:0px 5px;} .boxUrn2 .content2 {padding:6px;} .boxUrn2 .capt {height: 6rem; margin:.5rem 0;} .boxUrn2 .capt span.title-capt {padding: 0 .2rem; line-height: 1.5rem; font-size: .9rem; -webkit-line-clamp: 4; line-clamp: 4;} } @media only screen and (min-width:0px) and (max-width:599px) { /*-> alt kategoriler */ .boxUrnK1 .sol {width:100%;} .boxUrnK1 .sag {width:100%;} .boxUrnK1 .sag .content {padding:2rem 1rem 0 2rem; } .boxUrnK2 {width:50%;} .boxUrnK2 .content {margin:0px 5px;} .boxUrnK2 .content2 {padding:6px;} .boxUrnK2 .capt {height: 5rem; margin:.5rem 0;} .boxUrnK2 .capt span.title-img {height: 5rem; width:3rem;} .boxUrnK2 .capt span.title-capt {padding: 0 .2rem; margin: 0; width: calc(100% - 3rem); font-size: .9rem; letter-spacing: 0; -webkit-line-clamp: 3; line-clamp: 3;} .boxUrnK2 .descript {line-height:1.2rem; height:3.6rem; font-size:1rem;} /*-> urunler */ .boxUrn1 .sol {width:100%;} .boxUrn1 .sag {width:100%;} .boxUrn1 .sag .content {padding:2rem 1rem 0 2rem; } .boxUrn2 {width:50%;} .boxUrn2 .content {margin:0px 5px;} .boxUrn2 .content2 {padding:6px;} .boxUrn2 .capt {height: 6rem; margin:.5rem 0;} .boxUrn2 .capt span.title-capt {padding: 0 .2rem; line-height: 1.5rem; font-size: .9rem; -webkit-line-clamp: 4; line-clamp: 4;} } /* ÜRÜN Detay Görünümleri */ .icUrnH1 {position:relative; color:#074576; font-size:1.5rem; line-height:1.5; margin-bottom:1.5rem;} .icUrnH1 a {color:#074576;} .urnDetayStandart {padding-top:2rem;} .urnDetayStandartSol {} .urnDetayStandartSag {} .urnDetayStandartSag .content {} .urnDetayStandartSag .markaAndKategori {background-color: #eee; width:100%; margin-bottom:24px; display: flex; align-items: center; justify-content:flex-start} .urnDetayStandartSag .markaAndKategori p {margin:0 0 0 10px;} .urnDetayStandartSag .markaAndKategori .markaImg {position:relative; width:100px; background-color:#074576; text-align: center; overflow: hidden;} .urnDetayStandartSag .markaAndKategori .markaImg img {width:100%;} .urnDetayStandartSag .markaAndKategori .markaImg span {font-size:1rem; position:absolute; top:0; left:0; z-index:-1;} .urnDetayStandartSag .markaAndKategori .markaAdi {position:relative; width:100px; height:80px; background-color:#074576; display: flex; justify-content: center; align-items: center;} .urnDetayStandartSag .markaAndKategori .markaAdi span {font-size:1rem; color:#fff;} .urnDetayStandartSag .urnOzet {float:left; text-align: justify; width:100%; margin-bottom:24px; } .urnDetayStandartSag .fyt {width:100%; margin: 0 0 1rem 0;} .urnDetayStandartSag .fyt span.fiyat {color:#222; padding:0; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 0; font-weight:400; display:block;} .urnDetayStandartSag .fyt span.fiyattl {color:#222; padding:0; margin:0; line-height:2rem; font-size:1.4rem; letter-spacing: 0; font-weight:500; display:block;} .sIconKutu {margin-bottom:1rem;} /* indirimli - yeni vb. küçük resimler için */ .sIconKutu img {float:left; border:1px solid #ccc; padding:3px; margin:3px;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { .icUrnH1 {font-size:1.4rem;} } @media only screen and (min-width:0px) and (max-width:599px) { .icUrnH1 {font-size:1.2rem;} } /* SAYFA Kategori Liste Görünümleri */ /*-> alt kategoriler */ .boxSyfK1 {margin-bottom:1rem;} /* alt kat listeleme 1 sutun*/ .boxSyfK1 .content2 {margin:16px; padding:16px; transition: all 0.3s; border:1px solid #eee;} .boxSyfK1 .content {margin:0px 10px;} .boxSyfK1 .capt {margin-bottom: 1.5rem;} .boxSyfK1 .capt span.title-capt {color:#222; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:600;} .boxSyfK1 .capt span.title-capt a {color:#222; display:block;} .boxSyfK1 .sol {} .boxSyfK1 .sag {} .boxSyfK1:hover .content2 {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ .boxSyfK2 {margin-bottom:1rem;} /* alt kat. listeleme 3-4 sutun*/ .boxSyfK2 .content {margin:0px 10px; transition: all 0.3s; border:1px solid #eee;} .boxSyfK2 .content2 {padding:12px;} .boxSyfK2 .capt {width:100%; margin:1rem 0; height: 4rem; padding:0; background-color: #ff5e15; transition: all 0.3s; display: flex; align-items: center; justify-content: center;} .boxSyfK2 .capt span.title-img {height: 4rem; width:4rem; background:#074576 url("../img/urunlogo.png") no-repeat center center; background-size: 80%;} .boxSyfK2 .capt span.title-capt {padding: 0 .5rem; margin: 0; width: calc(100% - 4rem); text-align: center; line-height: 1.5rem; font-size: 1rem; letter-spacing: 2px; font-weight: 500; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;} .boxSyfK2 .capt span.title-capt a {color:#fff; display:block;} .boxSyfK2:hover .capt {background-color: #074576;} /* #000 */ .boxSyfK2:hover .content {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ /*-> alt sayfalar */ .boxSyf1 {margin-bottom:1rem;} /* alt kat listeleme 1 sutun*/ .boxSyf1 .content2 {margin:16px; padding:16px; transition: all 0.3s; border:1px solid #eee;} .boxSyf1 .content {margin:0px 10px;} .boxSyf1 .capt {margin-bottom: 1.5rem;} .boxSyf1 .capt span.title-capt {color:#222; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:600;} .boxSyf1 .capt span.title-capt a {color:#222; display:block;} .boxSyf1 .sol {} .boxSyf1 .sag {} .boxSyf1:hover .content2 {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ .boxSyf2 {margin-bottom:1rem;} /* alt ürün listeleme 3-4 sutun*/ .boxSyf2 .content {margin:0px 10px; transition: all 0.3s; border:1px solid #eee;} .boxSyf2 .content2 {padding:12px;} .boxSyf2 .capt {width:100%; margin:1rem 0; height: 5rem; padding:0; background-color: #eee; transition: all 0.3s; display: flex; align-items: center; justify-content: center;} .boxSyf2 .capt span.title-capt {padding: 0 .5rem; margin: 0; width: calc(100% - 4rem); text-align: center; line-height: 1.5rem; font-size: 1rem; letter-spacing: 1px; font-weight: 500; color: #074576; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;} .boxSyf2 .capt span.title-capt a {color:#074576; display:block;} .boxSyf2:hover .capt {background-color: #074576;} /* #000 */ .boxSyf2:hover .capt span.title-capt a {color: #fff;} /* #000 */ .boxSyf2:hover .content {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);} /* #000 */ @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { /*-> alt kategoriler */ .boxSyfK1 .sol {width:30%;} .boxSyfK1 .sag {width:70%;} .boxSyfK2 {width:33.33%;} .boxSyfK2 .content {margin:0px 5px;} .boxSyfK2 .content2 {padding:6px;} .boxSyfK2 .capt {height: 5rem; margin:.5rem 0;} .boxSyfK2 .capt span.title-img {height: 5rem; width:3rem;} .boxSyfK2 .capt span.title-capt {padding: 0 .2rem; margin: 0; width: calc(100% - 3rem); font-size: .9rem; letter-spacing: 0; -webkit-line-clamp: 3; line-clamp: 3;} /*-> alt sayfalar */ .boxSyf1 .sol {width:30%;} .boxSyf1 .sag {width:70%;} .boxSyf2 {width:33.33%;} .boxSyf2 .content {margin:0px 5px;} .boxSyf2 .content2 {padding:6px;} .boxSyf2 .capt {height: 6rem; margin:.5rem 0;} .boxSyf2 .capt span.title-capt {padding: 0 .2rem; line-height: 1.5rem; font-size: .9rem; -webkit-line-clamp: 4; line-clamp: 4;} } @media only screen and (min-width:0px) and (max-width:599px) { /*-> alt kategoriler */ .boxSyfK1 .sol {width:100%;} .boxSyfK1 .sag {width:100%;} .boxSyfK1 .sag .content {padding:2rem 1rem 0 2rem; } .boxSyfK2 {width:50%;} .boxSyfK2 .content {margin:0px 5px;} .boxSyfK2 .content2 {padding:6px;} .boxSyfK2 .capt {height: 5rem; margin:.5rem 0;} .boxSyfK2 .capt span.title-img {height: 5rem; width:3rem;} .boxSyfK2 .capt span.title-capt {padding: 0 .2rem; margin: 0; width: calc(100% - 3rem); font-size: .9rem; letter-spacing: 0; -webkit-line-clamp: 3; line-clamp: 3;} .boxSyfK2 .descript {line-height:1.2rem; height:3.6rem; font-size:1rem;} /*-> alt sayfalar */ .boxSyf1 .sol {width:100%;} .boxSyf1 .sag {width:100%;} .boxSyf1 .sag .content {padding:2rem 1rem 0 2rem; } .boxSyf2 {width:50%;} .boxSyf2 .content {margin:0px 5px;} .boxSyf2 .content2 {padding:6px;} .boxSyf2 .capt {height: 6rem; margin:.5rem 0;} .boxSyf2 .capt span.title-capt {padding: 0 .2rem; line-height: 1.5rem; font-size: .9rem; -webkit-line-clamp: 4; line-clamp: 4;} } /* SAYFA Detay Görünümleri */ .icSayfH1 {position:relative; text-align:center; color:#074576; font-size:2.4rem; line-height:1.5; margin:1rem 0 4rem 0; display: block; font-weight: 500; letter-spacing: 0;} .icSayfH1 a {position:relative; color:#074576; display: block; padding: 0.2em 0; text-decoration: none;} /**/ .icSayfH1::before {position:absolute; content:""; bottom:-.5rem; left:50%; margin-left:-50px; width:100px; height:3px; background:#ff5e15; } .customH2 {position:relative; color:#074576; margin-bottom:.5rem; padding-left: 2rem; font-size:2rem; line-height:1.5; font-weight:600; letter-spacing: 2px;} .customH2 a {color:#074576; } .customH2::after {position:absolute; content:""; background:#ff5e15; top:50%; margin-top:-.5rem; left:0; width:1rem; height:1rem;} .customH3 {position:relative; color:#074576; margin-bottom:.5rem; padding-left: 1.4rem; font-size:1.4rem; line-height:1.5; font-weight:600; letter-spacing: 2px;} .customH3 a {color:#074576; } .customH3::after {position:absolute; content:""; background:#ff5e15; top:50%; margin-top:-.35rem; left:0; width:.7rem; height:.7rem;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { .icSayfH1 {font-size:1.8rem;} .customH2 { padding-left: 1.6rem; font-size:1.6rem; line-height:1.5; letter-spacing: 1px;} .customH2::after {margin-top:-.4rem; width:.8rem; height:.8rem;} .customH3 { padding-left: 1.4rem; font-size:1.4rem; line-height:1.5; letter-spacing: 1px;} .customH3::after {margin-top:-.35rem; left:0; width:.7rem; height:.7rem;} } @media only screen and (min-width:0px) and (max-width:599px) { .icSayfH1 {font-size:1.6rem;} .customH2 { padding-left: 1.4rem; font-size:1.4rem; line-height:1.5; letter-spacing: 1px;} .customH2::after {margin-top:-.35rem; width:.7rem; height:.7rem;} .customH3 { padding-left: 1.2rem; font-size:1.2rem; line-height:1.5; letter-spacing: 1px;} .customH3::after {margin-top:-.3rem; left:0; width:.6rem; height:.6rem;} } /* ürün detay tab */ ul.urnTabs {width:100%; margin:32px 0 8px 0; padding:0px; list-style: none; display: flex; justify-content: center; } ul.urnTabs li {list-style:none; font-family: "Oswald", sans-serif; font-size:1rem; font-weight:500; line-height:2; color: #074576; padding:.5rem 1rem; margin:0 .5rem; cursor: pointer; border:1px solid #ccc; text-align:center;} ul.urnTabs li.current {background-color: #074576; color:#fff;} .urnTabs-content { position:relative; width:100%; display: none; border:none; padding:20px 0; border-top:1px solid #ccc; text-align: justify;} .urnTabs-content.current { display: inherit;} .urnTabs-content ul { list-style: circle inside; } .urnTabs-content ol { list-style: decimal inside; } .urnTabs-content table { background-color:#fff; border-collapse: collapse; width: auto; font-size:1.2rem; border: 1px solid #ccc; border-left:none; margin:10px 0px;} .urnTabs-content table thead tr { background-color:#eee; border-bottom: 1px solid #ccc; text-align: left;} .urnTabs-content table thead th { border-left: 1px solid #ccc; color:#000; padding:2px; font-weight: bold;} .urnTabs-content table tbody tr { background-color:#fff; border-bottom: 1px solid #ccc;} .urnTabs-content table tbody td { color:#222; padding:5px; border-left: 1px solid #ccc;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { ul.urnTabs li {width:90%; } } /* GALERİ TAB İCERİK *********************************** */ #galeriTabIcerik {width:100%; margin-bottom:20px; display: flex; flex-wrap: wrap; justify-content: center;} #galeriTabIcerik .galeriTab-oge {margin: 10px; background-color: #074576; width:260px; border:1px solid #ccc;} #galeriTabIcerik .galeriTab-oge .imgTab {width:100%; height:360px; } #galeriTabIcerik .galeriTab-oge .imgTab img {margin: 0; width:100%; height:100%; object-fit: cover;} #galeriTabIcerik .galeriTab-oge .oge-capt { width:100%; height: 3rem; margin:2px 0;} #galeriTabIcerik .galeriTab-oge .oge-capt p {text-align:center; line-height:1.5rem; font-size:.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} /* GALERİ GÖRÜNÜMLERİ BAŞLANGIÇ *********************************** */ /* #urnGaleri -> tablı + LİGHTBOX EFEKT*/ #urnGaleri {position:relative; margin:0 0 10px 0; padding:0px; float:left; width:100%;} #urnGaleri .img-g {position:relative; width:100%; padding-top:100%; overflow:hidden; }/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */ #urnGaleri .img-g img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .gtab-content {display:none; padding:0px; float:right; width:100%;} .gtab-content.current {display:block;} .gtab-content p {position:relative; margin:0; color:#999; text-align:center; width:100%; line-height:2; font-size:.9rem;} ul.gals {position:relative; margin:0 0 10px 0; padding:0; list-style:none; float:left; width:100%;} ul.gals li {position:relative; color:#222; float:left; padding:.3rem; margin:0 5px 10px 5px; cursor:pointer; width:18%; border:1px solid #aaa; box-sizing: border-box; } ul.gals li img {} ul.gals li.current {border:1px solid #074576;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* #urnGaleri2 -> TABSIZ + DİREK LİGHTBOX EFEKT */ #urnGaleri2 {position:relative; margin:0 0 10px 0; padding:0px; float:left; width:100%;} #urnGaleri2 .img-g {position:relative; width:100%; padding-top:100%; overflow:hidden; max-height:400px; }/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */ #urnGaleri2 .img-g img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #urnGaleri2 p {position:relative; margin:0; color:#999; text-align:center; width:100%; line-height:2; font-size:.9rem;} ul.gals2 {position:relative; margin:0 0 10px 0; padding:0; list-style:none; float:left; width:100%;} ul.gals2 li {position:relative; color:#222; float:left; padding:.3rem; margin:0 5px 10px 5px; cursor:pointer; width:18%; border:1px solid #aaa; box-sizing: border-box; } ul.gals2 li img {} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* #slaytGaleri*/ #slaytGaleri {width:100%; margin:0 auto 20px auto; max-width:600px;} #slaytGaleri .galeri-oge {margin: 0; width:100%;} #slaytGaleri .galeri-oge .oge-capt { width:100%; height: 3rem; margin:2px 0;} #slaytGaleri .galeri-oge .oge-capt p {text-align:center; line-height:1.5rem; font-size:.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} #slaytGaleri .galeri-oge .img {width:100%;} #slaytGaleri .galeri-oge .img img { width: 100%; margin:0 auto; } #slaytGaleri .owl-nav {} #slaytGaleri .owl-nav button.owl-prev, #slaytGaleri .owl-nav button.owl-next {position:absolute; top:48%; transform:translateY(-50%); opacity:0; font-size:16px; line-height:16px; width:50px; height:50px; color:#fff; background:rgba(0,0,0,0.5); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; cursor:pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; border-radius:12px;} #slaytGaleri .owl-nav button.owl-prev {left:50px;} #slaytGaleri .owl-nav button.owl-next {right:50px;} #slaytGaleri .owl-nav button.owl-prev:hover, #slaytGaleri .owl-nav button.owl-next:hover {background:rgba(14,35,67,.8); color:#fff;} #slaytGaleri:hover .owl-nav button.owl-prev {opacity:0.8; left:10px;} #slaytGaleri:hover .owl-nav button.owl-next {opacity:0.8; right:10px;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* #slaytGaleriFull*/ #slaytGaleriFull {width:100%; margin-bottom:20px;} #slaytGaleriFull .galeri-oge {position:relative; margin: 0; width:100%; border:2px solid #fff;} #slaytGaleriFull .galeri-oge .oge-capt { position: absolute; bottom:0; margin:0; width:100%; background:rgba(0, 0, 0, 0.2);} #slaytGaleriFull .galeri-oge .oge-capt p {width:100%; text-align:center; color:#eee; margin:0; line-height:2; font-size:.9rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;} #slaytGaleriFull .img-g {position: relative;} #slaytGaleriFull .img-g img {width: 100%;} #slaytGaleriFull .owl-nav {} #slaytGaleriFull .owl-nav button.owl-prev, #slaytGaleriFull .owl-nav button.owl-next {position:absolute; top:48%; transform:translateY(-50%); opacity:0; font-size:16px; line-height:16px; width:50px; height:50px; color:#fff; background:rgba(0,0,0,0.5); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; cursor:pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; border-radius:12px;} #slaytGaleriFull .owl-nav button.owl-prev {left:50px;} #slaytGaleriFull .owl-nav button.owl-next {right:50px;} #slaytGaleriFull .owl-nav button.owl-prev:hover, #slaytGaleriFull .owl-nav button.owl-next:hover {background:rgba(14,35,67,.8); color:#fff;} #slaytGaleriFull:hover .owl-nav button.owl-prev {opacity:0.8; left:10px;} #slaytGaleriFull:hover .owl-nav button.owl-next {opacity:0.8; right:10px;} /*tek resim varsa */ #slaytGaleriFullTek {width:100%; margin-bottom:20px; } #slaytGaleriFullTek .galeri-oge {position:relative; margin: 0; width:100%; background-color: #f9f9f9; } #slaytGaleriFullTek .galeri-oge .oge-capt { position: absolute; bottom:0; margin:0; width:100%; display: flex; justify-content: center;} #slaytGaleriFullTek .galeri-oge .oge-capt p {display:inline-block; background:rgba(0, 0, 0, 0.2); margin:0; padding: 0 1rem; color:#eee; line-height:2; font-size:.9rem;} #slaytGaleriFullTek .img-g {position: relative; display: flex; justify-content: center;} #slaytGaleriFullTek .img-g img {height: 100%; max-height:400px; object-fit: contain;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* #sutunluGaleri*/ #sutunluGaleri {width:100%; margin-bottom:20px; display: flex; justify-content: center; flex-wrap: wrap;} #sutunluGaleri .galeri-oge {width:25%;} #sutunluGaleri .galeri-oge .oge-capt { width:100%; height: 4.5rem; margin:5px 0;} #sutunluGaleri .galeri-oge .oge-capt p {text-align:center; color:#074576; line-height:1.5rem; font-size:1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;} #sutunluGaleri .galeri-oge .img-k {} #sutunluGaleri .galeri-oge .img-k img{} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { #sutunluGaleri .galeri-oge {float:left; width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { #sutunluGaleri .galeri-oge {float:left; width:50%;} } /* #referansgaleri*/ #referansgaleri {width:80%; margin-left:10%; margin-right:10%; margin-bottom:20px;} #referansgaleri .galeri-oge {float:left; width:33.3%; margin-bottom:1rem;} #referansgaleri .galeri-oge .oge-capt { width:100%; height: 5rem; margin:2px 0;} #referansgaleri .galeri-oge .oge-capt p {text-align:center; line-height:1.5rem; font-size:.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} #referansgaleri .galeri-oge .img-k {} #referansgaleri .galeri-oge .img-k img{width: 90%; transition: all .3s;} #referansgaleri .galeri-oge .img-k img:hover {width: 100%; border:2px solid #ddd;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { #referansgaleri .galeri-oge {float:left; width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { #referansgaleri .galeri-oge {float:left; width:80%; margin:2px 10%;} } /* #kataloggaleri*/ #kataloggaleri {width:100%; margin-bottom:20px;} #kataloggaleri .galeri-oge {float:left; width:25%;} #kataloggaleri .galeri-oge .oge-capt { width:100%; height: 8rem; margin:2px 0;} #kataloggaleri .galeri-oge .oge-capt p {text-align:center; line-height:1.5rem; font-size:.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} #kataloggaleri .galeri-oge .img-k {} #kataloggaleri .galeri-oge .img-k img{} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { #kataloggaleri .galeri-oge {float:left; width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { #kataloggaleri .galeri-oge {float:left; width:50%;} } /* GALERİ GÖRÜNÜMLERİ SON *********************************** */ /* anasayfaa marka Kutu */ /*markalar için */ .markaKutu {padding:0; margin:5px 0; width:240px; text-align: center; padding:0 5px;} .markaKutu .img-k { width:100%; height:auto; /*border-radius: 50%;*/ } .markaKutu .img-k img { width:100%; height:auto; /*border-radius: 50%;*/} .markaKutu span {display:none; padding:0; margin:0; line-height: 1; font-size: .8rem; font-weight: 300; color: #bbb;} /*cozumortakları için */ .cozumOrtakKutu {padding:0; width: 140px; text-align: center;} .cozumOrtakKutu img {width: 80%; /*border:1px solid #ddd;*/} /* referanslar için */ .refKutu {padding:0; width: 12.5%; text-align: center;} .refKutu img {width: 80%; /*border:1px solid #ddd;*/transition: all .3s;} .refKutu img:hover {width: 100%;} .owl-marka {margin-top:10px; margin-bottom:0; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .owl-marka .owl-nav {} .owl-marka .owl-nav button.owl-prev, .owl-marka .owl-nav button.owl-next {position:absolute; top:50%; margin-top:-1rem; font-size:1.2rem; width:2rem; height:2rem; line-height:2rem; color:#074576; cursor:pointer; } .owl-marka .owl-nav button.owl-prev {left:-.5rem;} .owl-marka .owl-nav button.owl-next {right:-.5rem;} .owl-marka .owl-nav button.owl-prev:hover, .owl-marka .owl-nav button.owl-next:hover {color:#000;} .owl-marka .markaKutu {width:100%;} .owl-marka .cozumOrtakKutu {width:100%;} .owl-marka .refKutu {width:100%;} /* etiketler */ .etiketlerKutu {position:relative; width:100%;} .etiketlerKutu span {float:left; padding:.5rem; margin:.5rem .5rem .5rem 0; border-radius:5px; border:1px dashed #bbb;} .etiketlerKutu a {text-decoration: underline;} @media only screen and (min-width:998px) and (max-width:1439px) { .refKutu {} .markaKutu {} } @media only screen and (min-width:600px) and (max-width:997px) { .refKutu {width: 15%;} } @media only screen and (min-width:0px) and (max-width:599px) { .refKutu {width: 25%;} .etiketlerKutu span {padding:.3rem; margin:.3rem .3rem .3rem 0;} .etiketlerKutu a {font-size:.7rem;} } /* gezgin*/ p.gezgin {margin:0; padding: 5px; color:#074576; font-size:1rem; background-color: #f5f5f5; text-align: center;} p.gezgin a {color:#074576;} /* pager*/ .pager {display: flex; background:#f9f9f9; align-items: center; justify-content: center; margin:10px auto; padding:10px; color:#074576; width:100%;} .pagerIc {margin: 0 .5rem;} .pagerIc select {border:1px solid #074576; border-radius:5px; height:2rem; padding:0 .5rem; margin:0; font-size:1rem; line-height:2rem; cursor: pointer; color:#074576;} .pagerIc i {font-size:1.5rem; line-height:2rem;} /* FOOTER */ .footer-kap {/* background:#3b4045 url("../img/footerBG.jpg") no-repeat center center; */ background-color: #074576; padding:32px 0 16px 0; margin-top:32px; color:#eee; font-size: .9rem; line-height: 1.5;} .footer {/*background-color:rgba(255,255,255,1);*/ padding:0;} .footer .col-2-12, .footer .col-3-12, .footer .col-4-12, .footer .col-6-12 {margin-bottom:2rem;} .footer a {color:#fff;} .footer p {color:#eee; font-size: 1rem; line-height: 1.5;} .footerLogo {width:160px; margin-top:0; margin-bottom:10px; /*border:2px solid #fff;*/ filter: brightness(0) invert(1); } .footer h3 {position:relative; color:#fff; margin-bottom:1.5rem; font-size:1rem; line-height:1.5; font-weight:600; letter-spacing: 2px;} .footer h3 a{color:#fff;} .footer h3::after {position:absolute; content:""; background:#ff5e15; bottom:-10px; left:0; width:50px; height:3px;} .footermenu ul { margin:0px; padding:0; } .footermenu ul li {position:relative; background:none; float:left; margin:0; padding:0 0 0 14px; list-style:none; width:100%; } .footermenu ul li:first-child {} .footermenu ul li:last-child {} .footermenu ul li a {padding:.3rem 0; margin:0; font-size: 1rem; line-height: 1.6rem; color:#eee; display:block; font-weight:400;} .footermenu ul li a:hover {text-decoration: underline;} .footermenu ul li::before {position:absolute; content:"▸"; top:.4rem; left:0; width:0; } .footermenu ul li ul {} .footermenu ul li li {padding:0 0 0 1rem; padding:0;} .footermenu ul li li a {padding:.3rem 1rem; margin:0; font-size: 1rem; line-height: 1rem; color:#eee; font-weight:100;} ul.sosyal-link {list-style:none; margin:12px 0 12px 0; padding:0; float:left;} ul.sosyal-link li {position:relative; display:block; float:left; list-style:none; height:2.5rem; width:2.5rem; line-height:2.5rem; font-size:1.5rem; margin:3px; padding:0; background:#ff5e15; color:#fff; text-align:center; transition:all 0.15s; } ul.sosyal-link li a {color:#fff; display:block; } ul.sosyal-link li a span {line-height:2.5rem; font-size:1.5rem; } ul.sosyal-link li:hover {border-radius:50%;} ul.sosyal-link li:hover a {color:#fff;} .footeralt-kap {background-color:#074576; padding:6px 0px; color:#eee; border-top:1px solid #09548e;} .footeralt p {margin:0; color:#eee; font-size:1rem; line-height:2;} .footeralt p a {color:#eee;} p.avinga {position: absolute; right:0; top:0; margin-bottom:32px; color:#eee; font-weight:100;} p.avinga a {color:#eee;} #yanBlok {} #yanBlok h4 {border:1px solid #bbb; border-radius:5px; padding:.5rem; color:#fff; margin-top:10px; background-color:#074576;} #yanBlok h4 a {color:#000;} #yanMenuAc {display:none; float:right; padding:10px 0 0 0; cursor:pointer;} @media only screen and (min-width:998px) and (max-width:1439px) { } @media only screen and (min-width:600px) and (max-width:997px) { #yanMenuAc {display:block;} #yanBlok .mainNav {display:none;} } @media only screen and (min-width:0px) and (max-width:599px) { #yanMenuAc {display:block;} #yanBlok .mainNav {display:none;} .footeralt p {font-size:.8rem; letter-spacing: -.7px;} } /* ********************************** Nav Accordion Plugin v1.1.2 *********************************** */ .mainNav {background: #fff; width: 100%; border:1px solid #ddd;} /* First Level */ .mainNav ul {margin: 0; padding: 0; list-style: none;} .mainNav ul li {border-top: 1px solid #ddd; margin:0; padding:0;} .mainNav ul li:first-child {border-top: none;} .mainNav ul li a {color: #074576; font-weight:500; display: block; font-size: 1.1rem; line-height: 1.5; padding:12px 10px; text-decoration: none; } .mainNav ul li a:hover {color:#ff5e15; text-decoration: underline;} /* Second Level */ .mainNav ul ul {border-bottom: none;} .mainNav ul ul li {border-top: 1px solid #ddd; background: #eee;} .mainNav ul ul li a {color: #666; display: block; font-size: 1rem; line-height: 1.5; padding: 8px 0px 8px 16px;} .mainNav ul ul li a:hover {color:#ff5e15;} /* Third Level */ .mainNav ul ul ul {border-top:1px solid #f1f1f1;} .mainNav ul ul ul li {border:none; background: #ddd;} .mainNav ul ul ul li a {color: #999; font-size: .9rem; padding: 8px 0px 8px 24px;} /* Accordion Button */ ul li.has-subnav .accordion-btn {color:#074576;} ul li.has-subnav .accordion-btn:hover {font-size:20px;} .mainNav ul li a.aktif { font-weight: 700; color:#ff5e15;} /* -> whatsappAra */ .custom-quick-contact {position: fixed; width: 80px; bottom: 20px; right: 20px; z-index: 10; text-align: center;} .wp-box {width: 60px; height: 60px; position: relative; display: inline-block; margin:5px 0;} .wp-box .box-fx {text-align: center; transform-origin: center; border-radius: 500px; z-index: 60; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -30px;} .bgwhats {background-color: #4caf50;} .bgtels {background-color: #558ed5;} .wp-box .box-fx i {line-height: 60px; font-size: 24px; color: #fff; font-weight: normal;} /* Ortak halka stili */ .wp-box .box-1, .wp-box .box-2 { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); animation: ringExpand 1.5s ease-out infinite; } /* WhatsApp halkaları */ .bordwhats { border: 4px solid rgba(76, 175, 80, 0.6); } /* Telefon halkaları */ .bordtels { border: 4px solid rgba(85, 142, 213, 0.6); } /* İkinci halkanın gecikmeli başlaması */ .wp-box .box-2 { animation-delay: 0.75s; } @keyframes ringExpand { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 70% { opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } /* -> hizmet yılı */ .hizmetYil {position:absolute; top:1rem; left:210px; z-index:10; width: 120px; height:120px; border-radius: 50%;; background:transparent url("../img/hizmetYil.png") no-repeat center center; background-size: 100%; display:flex; align-items: center; justify-content: center; box-shadow: 0px 0px 5px rgba(0, 0, 0, .15); animation:pulseAnimation 5s infinite; } .hizmetYil span {margin-bottom:1rem; font-size: 3rem; font-weight:bold; line-height:1; color: #fff;} @media only screen and (min-width:998px) and (max-width:1439px) { .hizmetYil {top:.8rem; left:130px; width: 100px; height:100px;} .hizmetYil span {font-size: 2.5rem;} } @media only screen and (min-width:600px) and (max-width:997px) { .hizmetYil {top:-1.5rem; left:50%; margin-left: -60px; width: 100px; height:100px;} .hizmetYil span {font-size: 2.5rem;} } @media only screen and (min-width:0px) and (max-width:599px) { .hizmetYil {top:-1rem; left:50%; margin-left: -50px; width: 100px; height:100px;} .hizmetYil span {font-size: 2.5rem;} } @keyframes pulseAnimation { 0% { transform: scale(1); box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); } 90% { transform: scale(1); box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); } 95% { transform: scale(1.15); box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); } 100% { transform: scale(1); box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); } } /* BACKGROUND - COLOR –––––––––––––––––––––––––––––––––––––––––––––––––– */ .bg-blue {background-color: #4096ca;} .bg-indigo {background-color: #6610f2;} .bg-purple {background-color: #6f42c1;} .bg-pink {background-color: #d63384;} .bg-red {background-color: #ec1414;} .bg-orange {background-color: #fd7e14;} .bg-yellow {background-color: #ffc107;} .bg-green {background-color: #198754;} .bg-teal {background-color: #20c997;} .bg-cyan {background-color: #0dcaf0;} .bg-white {background-color: #fff;} .bg-gray {background-color: #eee;} .bg-gray-dark {background-color: #343a40;} .bg-primary {background-color: #074576;} .bg-secondary {background-color: #ff5e15;} .bg-success {background-color: #198754;} .bg-info {background-color: #0dcaf0;} .bg-warning {background-color: #ffc107;} .bg-danger {background-color: #dc3545;} .bg-light {background-color: #eee;} .bg-dark {background-color: #212529;} .bg-turuncu {background-color: #a50120;} .bg-black {background-color: #000;} .color-blue {color: #4096ca;} .color-indigo {color: #6610f2;} .color-purple {color: #6f42c1;} .color-pink {color: #d63384;} .color-red {color: #ec1414;} .color-orange {color: #fd7e14;} .color-yellow {color: #ffc107;} .color-green {color: #198754;} .color-teal {color: #20c997;} .color-cyan {color: #0dcaf0;} .color-white {color: #fff;} .color-gray {color: #6c757d;} .color-gray-dark {color: #343a40;} .color-primary {color: #074576} .color-secondary {color: #ff5e15;} .color-success {color: #198754;} .color-info {color: #0dcaf0;} .color-warning {color: #ffc107;} .color-danger {color: #dc3545;} .color-light {color: #eee;} .color-dark {color: #212529;} .color-turuncu {color:#a50120;} .color-black {color:#000;} /* color bg ozel */ .custom-bg-color1 {background-color: #fca049;} .custom-bg-color2 {background-color: #ba71da;} .custom-bg-color3 {background-color: #64b1fe;} .custom-bg-color4 {background-color: #efa61c;} .custom-bg-color5 {background-color: #1bbc9b;} .custom-bg-color6 {background-color: #e67a08;} .custom-bg-color7 {background-color: #f76570;} .custom-bg-color8 {background-color: #ffd205;} .custom-color1 {color: #fca049;} .custom-color2 {color: #ba71da;} .custom-color3 {color: #64b1fe;} .custom-color4 {color: #efa61c;} .custom-color5 {color: #1bbc9b;} .custom-color6 {color: #e67a08;} .custom-color7 {color: #f76570;} .custom-color8 {color: #ffd205;}