/* #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: 'Poppins', sans-serif;*/ font-family: 'Roboto', sans-serif; font-size: .9rem; /* (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: 2; background-color: #f9f9f9; /* #fdfdfd; */ color: #777; letter-spacing: 1px; } /* Typography ------------------------------------- */ h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 1rem; font-family: inherit; font-weight: 500; line-height: 2; color: inherit;} h1 {font-size: 1.4rem; color: #000;} h2 {font-size: 1.2rem; color: #333;} h3 {font-size: 1.1rem; color: #555;} h4 {font-size: 1rem;} h5 {font-size: .9rem;} h6 {font-size: .9rem;} p {margin-top: 0; margin-bottom: 1rem;} b, strong {font-weight: 500; color:#555;} small, .small {font-size: 80%;} @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) 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:600px) { 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 {margin-bottom: 0;} /* 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: #333; text-decoration: none;} a:hover {text-decoration: none;} /* table (dikey yatay border) –––––––––––––––––––––––––––––––––––––––––––––––––– */ table {background-color:#fff;border-collapse:collapse;width:100%;font-size:.9rem;border:1px solid #eee;border-left:none;margin:10px 0px} table thead tr{background-color:#eee;border-bottom:1px solid #eee;} table thead th{border-left:1px solid #eee;color:#222;text-align:left;padding:2px;font-weight:bold} table tbody tr{background-color:#fff;border-bottom:1px solid #eee} table tbody td{color:#222;padding:5px;text-align:left;border-left:1px solid #eee} .table-bordered{border:1px solid #eee} table p {margin:0;} /* 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;border:none; cursor:pointer;} 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:.9rem} .formum .form-grup::after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} .formum .form-grup.form50 {width:50%;} .formum input,.formum button,.formum select,.formum optgroup,.formum textarea{padding:.5rem 1rem;;border:1px solid #eee;border-radius:5px} .formum input,.formum select,.formum textarea{color:#000;font-size:.9rem} .formum input[type="checkbox"]{margin:.2rem .5rem 0 0;width:16px;height:16px} .formum label{display:block;font-weight:400;font-size:.9rem; color:#888;} .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 urun bilgi –––––––––––––––––––––––––––––––––––––––––––––––––– */ .formUrunBilgi{margin:0} .formUrunBilgi .form-grup{position:relative;float:left;width:100%;padding:0;margin-bottom:0.5rem;font-size:.9rem;color:#fff} .formUrunBilgi .form-grup::after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} .formUrunBilgi .form-grup50{position:relative;float:left;width:50%;padding:0 1% 0 0;margin-bottom:0.5rem;font-size:.9rem;color:#fff;box-sizing:border-box;} .formUrunBilgi .form-grup50::after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} .formUrunBilgi input,.formUrunBilgi select,.formUrunBilgi optgroup,.formUrunBilgi textarea{ padding:0.3rem 0.3rem;border:1px solid #ccc;border-radius:5px} .formUrunBilgi input,.formUrunBilgi select,.formUrunBilgi textarea{ color:#000;font-size:.9rem; line-height:1.2; width:100%;max-width:100%} .formUrunBilgi input[type="checkbox"]{margin:.2rem .5rem;width:16px;height:16px} .formUrunBilgi label{display:block;font-weight:400;font-size:.9rem;color:#fff} .formUrunBilgi fieldset{border:none;border-top:1px dashed #ccc;margin:0.3rem 0;padding:0.5rem 0} .formUrunBilgi legend{font-weight:500;background-color:#000;border:1px dashed #ccc;color:#eee;padding:.5rem 0.5rem;margin-bottom:.5rem;font-size:1.2rem;border-radius:5px} .formUrunBilgi a{text-decoration:underline;color:#fff; } .formUrunBilgi .form-grup.kvkkOnayMetni {font-size:0.8rem; line-height:1.2;} #urunBilgiFormFixed{position:fixed;padding:10px; box-sizing: border-box; margin:0;right:-100%;bottom:0;height:100%;width:340px; z-index:11;border-left:5px solid #dc3545;background:#222;} #urunBilgiFormKutu { width: 100%; height: 100%; overflow-y: auto; display: block; } #urunBilgiFormKutuIc { padding: 1rem 0.5rem; margin: 0; width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } #urunBilgiFormKutuIc h3{color:#fff;margin-bottom:1rem;} #urunBilgiFormKutuIc table{margin:0; background-color: #fff;} #urunBilgiFormKutuIc table th{margin:0;vertical-align:middle;text-align:left; padding:0 5px; color:#222;} #urunBilgiFormKutuIc table td{margin:0;vertical-align:middle;text-align:left; padding:0 5px; color:#222;} #urunBilgiFormKutuIc table td p{color:#ddd;font-size:.8rem;line-height:1.2;margin:0;padding:0 .5rem} #urunBilgiFormKutuIc table td input{border:none;} .urunBilgiFormKapat { display: flex; justify-content: flex-end; margin: 0; padding: 0.5rem 0; color: #fff; cursor: pointer; } .urunBilgiFormKapat span{font-size:1.5rem;line-height:1.5rem;margin:0;display:block} #teklifSepeti {width:100%; color:#fff; margin-bottom:10px;} /* input:required {background: #eee;} input:invalid {background: red;} */ /* 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;margin:.5rem 0;padding:0 1em;font-size:.9rem;line-height:2.5rem;transition:all 0.2s;cursor:pointer;background-color:#ddd;color:#222;cursor:pointer} .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:1440px; max-width:96%; margin:0 auto; padding:0;} .container {position:relative; width:1200px; max-width:96%; margin:0 auto; padding:0;} .container-dar {position:relative; width:800px; max-width:96%; padding:10px 0; margin:30px 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:1199px) { .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%);} /* .banner-kap {background-color:#000; text-align:center;} .banner-kap h1 {line-height:6rem; color:white; margin:0;} */ .headerKap {background-color:#000; padding:16px 0; background-image: radial-gradient(circle, #2e2e2e, #242424, #1a1a1a, #101010, #000000); /*background-image: radial-gradient(circle, #000000, #281016, #4a1420, #6d1727, #91192a, #91192a, #91192a, #91192a, #6d1727, #4a1420, #281016, #000000);*/ } .headerFlex {display: flex; width:100%; /*justify-content: flex-start; */ justify-content: space-between; align-items: center;} .icerikBody {margin:12px auto; background-color:#fff; padding:12px 0; box-sizing: border-box; border-top:1px solid #eee; } #logo {height: 80px; padding:0; z-index:10; width:100%;} #logo img {max-height:100%; margin:0 auto;} /* headerMenu **************************** */ #headerMenu-kutu {margin:1.6rem 0 0 0; padding:0;} ul.headerMenu {padding:0; list-style:none; margin:0; float:right;} ul.headerMenu li {position:relative; padding:0 .5rem; color:#fff; float:left; display:block; padding:0; font-size:2rem; line-height:2.4rem; 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:#fff; 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: #c02126; color:#fff; border-radius:5px;} ul.headerMenu li:hover {color:#c02126;} ul.headerMenu li:hover a {color:#c02126;} ul.headerMenu li:first-child {} ul.headerMenu li#aramaiconum {display:none;} ul.headerMenu li#menuac {display:none;} .dilMenumSelect {float:left; margin:0; padding:0;} ul.dilMenum {position: absolute; right:0; padding:0; list-style:none; /*border:1px solid #999;*/ margin:0;} ul.dilMenum li {float:left; margin:0 0 0 .5rem; padding:0; list-style:none; border:2px solid #eee;} ul.dilMenum li a {padding:.5rem; margin:0; font-size: 1rem; line-height: 1; color:#eee; display:block; font-weight:500;} ul.dilMenum li a.dilSel {background-color: rgba(255,255,255,0.3);} #aramaformum {position:relative; margin:1.2rem 0 0; width:240px; border:2px solid rgba(255,255,255,1); z-index:3; padding:3px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border-radius:5px;} #aramaformum .input {float:left; width:100%; padding:0 3rem 0 .5rem; background:#000; margin:0px; font-size:1rem; line-height:2.4rem; border:none; color:#fff; } #aramaformum .search-but {position: absolute; right:.5rem; padding:0 .5rem; margin:0; color:#fff; background:#000; border:none; cursor:pointer; font-size:1rem; line-height:2.4rem;} #respblok {position:fixed; top:0; left:0; z-index:20; width:100%; height:100%; background:rgba(0,0,0,.7); display:none;} #respblok .mainNav {width:320px; height:100%; } #respblok .menuBasligim {position:relative; width:320px; padding:10px; font-size:1.2rem; color:#333; background:#eee; 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-kutu {display: flex; width:100%; /*justify-content: flex-start; */ justify-content: space-between; align-items: center;} #sf-kutu .sf-menu {position:relative; margin:0 auto;} /* .nav-menu -> ikonluMultilevelMenu() **************************** */ .nav-menu-kap {background-color: #f8f8f8;} .nav-menu-kutu {padding: 0; display: flex; justify-content: center; padding:.2rem 0;} /* nav */ .nav-menu,.nav-menu ul,.nav-menu li,.nav-menu a { margin: 0; padding: 0; line-height: normal; list-style: none; display: block; position: relative; z-index:9;} .nav-menu ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 999; -webkit-transition: opacity .3s; transition: opacity .3s; } .nav-menu li:hover > ul { left: 0; opacity: 1; z-index: 1000; } .nav-menu ul li:hover > ul { top: 0; left: 100%; } .nav-menu li { cursor: default; float: left; white-space: wrap;} .nav-menu ul li { float: none; } /* sub width */ .nav-menu 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-menu a {color: #333; font-weight: normal; font-size: 1rem; text-decoration: none; font-weight:500;} /* root: active */ .nav-menu > li > .nav-active { background-color: rgba(0,0,0,0.05); } /* root: hover/persistence */ .nav-menu a:hover,.nav-menu a:focus,.nav-menu li:hover a { background: #000; color: #fff;} /* 2 */ .nav-menu li li a,.nav-menu li:hover li a { padding: .5rem; background: #000; color: #fff; font-size: 1rem; line-height: normal; font-weight:400;} /* 2: hover/persistence */ .nav-menu li:hover li a:hover,.nav-menu li:hover li a:focus,.nav-menu li:hover li:hover a { background: #555; } /* 3 */ .nav-menu li:hover li:hover li a { background: #555; } /* 3: hover/persistence */ .nav-menu li:hover li:hover li a:hover,.nav-menu li:hover li:hover li a:focus,.nav-menu li:hover li:hover li:hover a { background: #999; } /* 4 */ .nav-menu li:hover li:hover li:hover li a { background: #999; } /* 4: hover */ .nav-menu li:hover li:hover li:hover li a:hover,.nav-menu li:hover li:hover li:hover li a:focus { background: #777; } /* özel */ .nav-menu li {text-align:left;} .nav-menu li li {width:auto; white-space: nowrap; text-align:left; } .nav-menu li li a {border-radius: 0;} .nav-menu .navImg { float:left; height:3rem; width:3rem; overflow:hidden; display: flex; justify-content: center; align-items:center;} .nav-menu img {width:100%;} .nav-menu span {max-width:130px; padding:0 .5rem; margin:0; float:left; font-size:.8rem; height:3rem; line-height:1.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; } .nav-menu a:hover span, .nav-menu a:focus span, .nav-menu li:hover a span { background: #000; color: #FFF; } .nav-menu a:hover img, .nav-menu a:focus img, .nav-menu li:hover a img {animation: headShake; animation-duration: 1s; filter: brightness(0) invert(100%);} .nav-menu a:hover .navImg, .nav-menu a:focus .navImg, .nav-menu li:hover a .navImg {background: #000;} @media only screen and (min-width:1200px) and (max-width:1299px) { .nav-menu .navImg {height:2rem; width:2rem;} .nav-menu span {max-width:90px; font-size:.7rem; line-height:1rem; height:2rem;} } @media only screen and (min-width:998px) and (max-width:1199px) { .nav-menu .navImg {height:2rem; width:2rem;} .nav-menu span {max-width:90px; font-size:.7rem; line-height:1rem; height:2rem;} } @media only screen and (min-width:601px) and (max-width:997px) { .nav-menu-kap {display:none;} } @media only screen and (min-width:0px) and (max-width:600px) { .nav-menu-kap {display:none;} } /* .nav-menu2 -> multilevelMenu() **************************** */ .nav-menu-kap2 {position:relative; background-color: #0a0a0a; } .nav-menu-kap2:before {content:""; position:absolute; z-index:2; box-shadow:0 5px 10px rgba(0,0,0,0.3); bottom:0; top:0; left:0; right:0; /*left:5px; right:5px; border-radius:100px / 5px;*/} .nav-menu-kutu2 {padding: 0; display: flex; justify-content: center; padding:0;} /* 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:9;} .nav-menu2 ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 10; -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: #fff; font-size: .9rem; line-height:1.5rem; text-decoration: none; font-weight:400;} /* 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: #ce0f15; color: #fff;} /* 2 */ .nav-menu2 li li a,.nav-menu li:hover li a { padding: .5rem; background: #280608; color: #fff; font-size: .9rem; line-height: normal; font-weight:400;} /* 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: #555; } /* 3 */ .nav-menu2 li:hover li:hover li a { background: #555; } /* 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 */ .nav-menu2 li {text-align:center;} .nav-menu2 li a span {padding:.5rem .5rem; font-size: .9rem; width:150px; height:4rem; border-right:1px solid rgba(255,255,255,0.25); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .nav-menu2 li:first-child a span{border-left:1px solid rgba(255,255,255,0.25);} .nav-menu2 li li {text-align:left;} @media only screen and (min-width:1200px) and (max-width:1299px) { .nav-menu2 li a span {padding:0 .2rem; font-size: .8rem; width:140px; height:3rem;} } @media only screen and (min-width:998px) and (max-width:1199px) { .nav-menu2 li a span {padding:0 .2rem; font-size: .7rem; width:110px; height:3rem;} } @media only screen and (min-width:601px) and (max-width:997px) { .nav-menu-kap2 {display:none;} } @media only screen and (min-width:0px) and (max-width:600px) { .nav-menu-kap2 {display:none;} } #katalogum {position:absolute; right:250px; top:0; width: 4rem; height: 4rem; line-height:1; color:#fff; background-color: #c02126; text-align:center; padding:0; z-index:9; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:2px solid #fff; border-radius: 50% 50% 50% 0; transition: all .5s; } #katalogum:hover {top:0;} #katalogum span {font-size:.6rem; line-height:1rem; margin-top:1.2rem; display:block; color:#fff;} #katalogum i {font-size:1rem; line-height:1rem; display:block; color:#fff;} @media only screen and (min-width:998px) and (max-width:1199px) { #logo {} } @media only screen and (min-width:601px) and (max-width:997px) { #logo {height: 60px;} #logo img {margin:0;} #headerMenu-kutu {margin:1rem 0 0 0;} ul.headerMenu li {margin:0 0 0 .7rem; font-size:1.6rem; line-height:2rem;} ul.headerMenu li#menuac {display:block;} ul.headerMenu li#aramaiconum {display:block;} #aramaformum {display:none; width:98%; margin:1rem 0;} #sf-kutu {display:none;} #katalogum {top:-1rem;} .headerKap {padding:5px 0;} .headerSol {width:100%;} .headerOrta {width:50%;} .headerSag {width:50%;} } @media only screen and (min-width:0px) and (max-width:600px) { #logo {height: 72px;} #logo img {margin:0;} #headerMenu-kutu {margin:1rem 0 0 0;} ul.headerMenu li {margin:0 0 0 .7rem; font-size:1.4rem; line-height:2rem;} ul.headerMenu li#menuac {display:block;} ul.headerMenu li#aramaiconum {display:block;} ul.headerMenu li#aramaiconum {display:block;} #aramaformum {display:none; width:98%; margin:1rem 0;} #sf-kutu {display:none; width:98%; margin:1rem 0;} #katalogum {top:6rem; right:0;} #katalogum:hover {top:6.5rem;} .headerKap {padding:5px 0;} .headerSol {width:100%;} .headerOrta {width:50%;} .headerSag {width:50%;} } /* ana sayfa */ /* Full Slayt ================================================= */ #slaytim {position:relative; width:100%; padding:0; z-index:1;} .slaytimg {position:relative; padding:0; margin:0; } .slaytimg img {height:540px; /*760*/ object-fit: cover;} .bilgikutusu {position:absolute; top:0; left:0; height:100%; width:100%; padding:0; z-index:6;} .bilgikutusu .container-genis {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:40%; float:left;} .bilgikutusu .slaytClass3 {width:40%; float:right;} .bilgikutusu h1 {color:#fff; font-size:2.4rem; line-height:1.5; font-weight:700; margin-bottom:0; padding:0 1rem; display: block; letter-spacing: 2px; text-shadow:1px 1px 4px rgb(0,0,0,0.2); } .bilgikutusu p {color:#eee; font-size:1.2rem; line-height:1.5; font-weight:400; margin:1rem 0 0 0; padding:0 1rem; display: block; letter-spacing: 0; text-shadow:1px 1px 4px rgb(0,0,0,0.2); } .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: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; } .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:16px; line-height:16px; width:50px; height:50px; color:#fff; background:rgba(255,255,255,0.3); -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; } #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:1199px) { .slaytimg img {height:480px; } .bilgikutusu {} .bilgikutusu h1 {font-size:2rem; letter-spacing: 0; padding-top:6rem;} .bilgikutusu p {font-size:1.2rem;} .bilgikutusu .btnSlayt {} } @media only screen and (min-width:601px) and (max-width:997px) { .slaytimg img {height:400px; } .bilgikutusu {} .bilgikutusu h1 {font-size:1.6rem; letter-spacing: 0; padding-top:6rem;} .bilgikutusu p {font-size:1rem;} .bilgikutusu .btnSlayt {} } @media only screen and (min-width:0px) and (max-width:600px) { .slaytimg img {height:340px; } .bilgikutusu {} .bilgikutusu h1 {font-size:1.2rem; letter-spacing: 0; padding-top:4rem;} .bilgikutusu p {font-size:.8rem;} .bilgikutusu .btnSlayt {} .bilgikutusu .slaytClass2 {width:70%;} .bilgikutusu .slaytClass3 {width:70%;} } /* Banner ================================================= */ #bannerim {position:relative; width:100%; padding:0; /*border-bottom:5px solid #d93131;*/} #bannerim .bannerimg {position:relative; padding:0; margin:0;} #bannerim .bannerimg img {max-height:180px; 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;} /* bannner'ın aktif olmadığı sayfalarda */ #noBanner {position:relative; width:100%; padding:0;} #noBanner .bannerimg {position:relative; padding:0; margin:0;} #noBanner .bannerimg img {height:180px; object-fit: cover;} #noBanner .bilgikutusuBanner {position:absolute; top:50%; left:0; margin-top:-1rem; width:100%; padding:0; z-index:6; text-align:left; } #noBanner .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);} #noBanner .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;} @media only screen and (min-width:998px) and (max-width:1199px) { #bannerim .bilgikutusuBanner span {font-size:2rem;} #noBanner .bilgikutusuBanner span {font-size:2rem;} } @media only screen and (min-width:601px) and (max-width:997px) { #bannerim .bilgikutusuBanner span {font-size:1.8rem;} #noBanner .bilgikutusuBanner span {font-size:1.8rem;} } @media only screen and (min-width:0px) and (max-width:600px) { #bannerim .bannerimg img {height:150px;} #bannerim .bilgikutusuBanner span {font-size:1.6rem;} #noBanner .bannerimg img {height:150px;} #noBanner .bilgikutusuBanner span {font-size:1.6rem;} } /* anaSayfUrnKat - anasayfa anaSayfUrnKat modul */ .anaSyfKatKutu {padding:0; margin-top:32px; margin-bottom:32px; z-index:10;} .flexKap {display: flex; width:100%; justify-content: center; align-items: center; flex-wrap:wrap;} .boxAnaSayfKat1 {margin-bottom:2rem; width:200px; float:left;} /* alt kat. listeleme 3-4 sutun*/ .boxAnaSayfKat1 .content {margin:0px 10px;} .boxAnaSayfKat1 img {filter: grayscale(100%); transition: filter 0.15s ease-in-out; } .boxAnaSayfKat1 .capt {width:100%; padding:.5rem 0; background-color: rgb(0,0,0,.9); transition: background-color 0.15s ease-in-out;} .boxAnaSayfKat1 .capt span.title-capt {height: 3rem; text-align: center; color:#fff; padding:0; margin:0 .5rem; line-height:1.5rem; font-size:.9rem; letter-spacing: 2px; font-weight:500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxAnaSayfKat1 .capt span.title-capt a {color:#fff; display:block;} .boxAnaSayfKat1:hover .capt {background-color: rgba(158,115,62,.9); /* #d93131 */} .boxAnaSayfKat1:hover img {filter: grayscale(0); } /* ürün detay tab */ ul.modulTabs {margin:0px 0px 20px 0px; padding:0px; list-style: none;} ul.modulTabs li {float:left; list-style:none; font-size:1.4rem; line-height:2; background: #fff; color: #333; padding: .5rem .5rem; margin:0 2rem 0 0 ; cursor: pointer; border-bottom:5px solid #ccc; } ul.modulTabs li.current {border-bottom:5px solid #c02126;} .modulTabs-content { position:relative; width:100%; display: none; border:none; padding:20px 0px; margin-bottom:32px; } .modulTabs-content.current { display: inherit; } @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { .boxAnaSayfKat1 {width:50%;} ul.modulTabs li {width:100%; margin:0; } } .boxAnaSayfKat2 {margin-bottom:32px; width:33.33%} /* alt kat. listeleme 3-4 sutun*/ .boxAnaSayfKat2 .content {} .boxAnaSayfKat2 .sol {} .boxAnaSayfKat2 img {} .boxAnaSayfKat2 .capt {padding:1.5rem;} .boxAnaSayfKat2 .capt span.title-capt {padding:0; margin:0; line-height:1.5; font-size:1.2rem; font-weight:600; } .boxAnaSayfKat2 .capt span.title-capt a {color:#333;} .boxAnaSayfKat2 .capt p {margin-top:.5rem; color:#333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;} @media only screen and (min-width:998px) and (max-width:1199px) { .boxAnaSayfKat2 .capt {padding:1rem;} .boxAnaSayfKat2 .capt p {-webkit-line-clamp: 2;} } @media only screen and (min-width:601px) and (max-width:997px) { .boxAnaSayfKat2 {width:80%;} .boxAnaSayfKat2 .capt {padding:1rem;} .boxAnaSayfKat2 .sol {width:50%;} .boxAnaSayfKat2 .capt {width:50%;} .boxAnaSayfKat2 .capt p {-webkit-line-clamp: 2;} } @media only screen and (min-width:0px) and (max-width:600px) { .boxAnaSayfKat2 {width:70%;} .boxAnaSayfKat2 .capt {padding:1rem;} .boxAnaSayfKat2 .capt p {display:none;} .boxAnaSayfKat2 .capt .btn {display:none;} } /* owl1 - anasayfa modul */ .owl-secme {margin-top:20px; margin-bottom:10px;} .owl-secme .owl-nav {} .owl-secme .owl-nav button.owl-prev, .owl-secme .owl-nav button.owl-next {position:absolute; top:30%; font-size:16px; width:20px; height:30px; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer;} .owl-secme .owl-nav button.owl-prev {left:-10px;} .owl-secme .owl-nav button.owl-next {right:-10px;} .owl-secme .owl-nav button.owl-prev:hover, .owl-secme .owl-nav button.owl-next:hover {background:rgba(0,0,0,0.7); color:#fff;} .owl-secme .boxUrn2, .owl-secme .boxSyf2 {width:100%;} /* ANA SAYFA */ .icAnaH {position:relative; color:#333; font-size:1.4rem; line-height:2; margin:1rem 0 2rem 0; display: inline-block; z-index:2; font-weight: 500; letter-spacing: 0;} .icAnaH a {position:relative; color:#333; display: block; padding: 0.2em 0; text-decoration: none;} .icAnaH::before {position:absolute; content:""; bottom:-.5rem; left:0; width:0; height:5px; border-top:5px solid #c02126; left:0; width:100%; } .anaBanner-kap { /*background:#d47f07 url("../img/anaBannerBG3.jpg") no-repeat center center; */ background:#eae2e7 url("../img/destekBG.png") no-repeat left center; padding:4px 0; color:#333; font-size: .9rem; line-height: 1.5;} .anaBanner {padding:2rem 0;} .anaBanner h3 {position:relative; text-align:center; color:#333; 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:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { } /* ÜRÜN KATEGORİLERİ */ h1.icUrnKatH1 {position:relative; color:#000; font-size:1.6rem; line-height:2; margin-bottom:1rem; display: inline-block; z-index:2; font-weight: 500; letter-spacing: 0;} h1.icUrnKatH1 a {position:relative; color:#000; } h2.icUrnKatH2 {position:relative; color:#333; font-size:1.4rem; line-height:2; margin-bottom:1rem; display: inline-block; z-index:2; font-weight: 500; letter-spacing: 0;} h1.icUrnKatH2 a {position:relative; color:#333; } h2.icUrnKatH2b {position:relative; color:#333; font-size:1.4rem; line-height:2; margin-bottom:1rem;} h2.icUrnKatH2b a {color:#333;} @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { h1.icUrnKatH1 {font-size:1.4rem; margin-bottom:1rem;} h2.icUrnKatH2 {font-size:1.2rem; margin-bottom:1rem;} h2.icUrnKatH2b {font-size:1.2rem; margin-bottom:1rem;} } @media only screen and (min-width:0px) and (max-width:600px) { h1.icUrnKatH1 {font-size:1.4rem; margin-bottom:1rem;} h2.icUrnKatH2 {font-size:1.2rem; margin-bottom:1rem;} h2.icUrnKatH2b {font-size:1.2rem; margin-bottom:1rem;} } /* ÜRÜN Kategori Liste Görünümleri */ /*-> alt kategoriler */ .boxUrnK1 {margin-bottom:2rem;} /* alt kat listeleme 1 sutun*/ .boxUrnK1 .content {} .boxUrnK1 .capt {margin-bottom: 1.5rem;} .boxUrnK1 .capt span.title-capt {color:#4096ca; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:700;} .boxUrnK1 .capt span.title-capt a {color:#4096ca; display:block;} .boxUrnK1 .sol {} .boxUrnK1 .sag {} .boxUrnK2 {margin-bottom:2rem;} /* alt kat. listeleme 3-4 sutun*/ .boxUrnK2 .content {} .boxUrnK2 .capt {width:100%; padding:.5rem 0; background-color: rgb(0,0,0,0.9); transition: background-color 0.15s ease-in-out;} .boxUrnK2 .capt span.title-capt {height: 3rem; text-align: center; color:#fff; padding:0; margin:0 .5rem; line-height:1.5rem; font-size:.9rem; letter-spacing: 2px; font-weight:700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxUrnK2 .capt span.title-capt a {color:#fff; display:block;} .boxUrnK2:hover .capt {background-color: rgba(158,115,62,.9);} /* #d93131 */ .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; } .urunHizliButonlar {position: relative;display:flex; align-items:center;justify-content:center;background-color: #eee; width: 100%; margin:0; padding: .5rem 0; gap:5px;} .urunHizliButonlar button.urunBilgiFormBut{font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;margin:0;padding:0;font-size:.9rem;line-height:1.5rem;border-radius: 0px;transition:all 0.2s;cursor:pointer;color:#222;background-color: #eee;cursor:pointer} .urunHizliButonlar .btn{font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;margin:0;padding:0;font-size:.9rem;line-height:1.5rem;border-radius: 0px; transition:all 0.2s;cursor:pointer;color:#222;background-color: #eee;cursor:pointer;} /*-> urunler */ .boxUrn1 {margin-bottom:2rem;} /* alt kat listeleme 1 sutun*/ .boxUrn1 .content {} .boxUrn1 .capt {margin-bottom: 1rem;} .boxUrn1 .capt span.title-capt {color:#555; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:600;} .boxUrn1 .capt span.title-capt a {color:#555; display:block;} .boxUrn1 .fyt {width:100%; margin-bottom: 1rem;} .boxUrn1 .fyt span.fiyat {text-align: left; /* center */ color:#555; 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:#555; 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;} .boxUrn2 .ozt {margin-bottom: 1rem;} .boxUrn1 .sol {} .boxUrn1 .sag {} .boxUrn2 {margin-bottom:2rem; text-align:center;} /* alt ürün listeleme 3-4 sutun*/ .boxUrn2 .content {border:1px solid #ddd;} .boxUrn2 .capt {width:100%; padding:.5rem 1rem 0 1rem; } .boxUrn2 .capt span.title-capt {height: 3.6rem; color:#555; padding:0; margin:0; line-height:1.2rem; font-size:.9rem; letter-spacing: 2px; font-weight:600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn2 .capt span.title-capt a {color:#555; display:block;} .boxUrn2 .fyt {width:100%; height:3.4rem; padding:.5rem 1rem;} .boxUrn2 .fyt span.fiyat {color:#555; 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:#555; 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;} .uIndirim {position:absolute; top:10px; right:-5px; background-color: #333; 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:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { /*-> alt kategoriler */ .boxUrnK1 .sol {width:30%;} .boxUrnK1 .sag {width:70%;} .boxUrnK2 {width:33.33%;} /*-> urunler */ .boxUrn1 .sol {width:30%;} .boxUrn1 .sag {width:70%;} .boxUrn2 {width:33.33%;} .boxUrn2 .capt {padding:.5rem .5rem; } .boxUrn2 .capt span.title-capt {font-size:.8rem; letter-spacing: 1px;} .boxUrn2 .capt span.fiyat {line-height:1.2rem; font-size:1rem; letter-spacing: 1px;} } @media only screen and (min-width:0px) and (max-width:600px) { /*-> alt kategoriler */ .boxUrnK1 .sol {width:100%;} .boxUrnK1 .sag {width:100%;} .boxUrnK1 .sag .content {padding:2rem 1rem 0 2rem; } .boxUrnK2 {width:50%;} /*-> urunler */ .boxUrn1 .sol {width:100%;} .boxUrn1 .sag {width:100%;} .boxUrn1 .sag .content {padding:2rem 1rem 0 2rem; } .boxUrn2 {width:50%;} .boxUrn2 .capt {padding:.5rem .5rem; } .boxUrn2 .capt span.title-capt {font-size:.8rem; letter-spacing: 1px;} .boxUrn2 .capt p {line-height:1.2rem; font-size:1rem; letter-spacing: 1px;} } /* ÜRÜN Detay Görünümleri */ h1.icUrnH1 {position:relative; color:#333; font-size:1.5rem; line-height:1.5; margin-bottom:1rem;} h1.icUrnH1 a {color:#333;} .urnDetayStandart {} .urnDetayStandart .markaImg {width:120px; border:1px solid #ccc; margin: 0 0 1rem 0; padding:.3rem;} .urnDetayStandart .fyt {width:100%; margin: 0 0 1rem 0;} .urnDetayStandart .fyt span.fiyat {color:#555; padding:0; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 0; font-weight:400; display:block;} .urnDetayStandart .fyt span.fiyattl {color:#555; 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;} .urnDetayStandart .urunBilgiButKap {display:flex; align-items:center;margin-bottom:16px; gap:10px;} .urnDetayStandart .urunBilgiFormBut {background-color: #ee3434; color:#fff; display:flex; align-items:center; transition: background-color 0.3s; font-size:1rem; line-height:1.2; padding:10px; } .urnDetayStandart .urunBilgiWhatBut {background-color: #4caf50; color:#fff; display:flex; align-items:center; transition: background-color 0.3s; font-size:1rem; line-height:1.2; padding:10px;} .urnDetayStandart .urunBilgiFormBut i {margin-right:10px; font-size:2rem;} .urnDetayStandart .urunBilgiWhatBut i {margin-right:10px; font-size:1.5rem;} .urnDetayStandart .urunBilgiFormBut span, .urnDetayStandart .urunBilgiWhatBut span {text-align: left;} .urnDetayStandart .urunBilgiFormBut small, .urnDetayStandart .urunBilgiWhatBut small {text-align: left;} .urnDetayStandart .urunDahaFazlaBut {background-color: #fff; color:#ee3434; margin-bottom:1rem; } @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { h1.icUrnH1 {font-size:1.4rem; margin-bottom:1rem;} } @media only screen and (min-width:0px) and (max-width:600px) { h1.icUrnH1 {font-size:1.3rem;} .urnDetayStandartSag .urunBilgiFormBut small, .urnDetayStandartSag .urunBilgiWhatBut small {display:none;} } /* SAYFA Kategori Liste Görünümleri */ /*-> alt kategoriler */ .boxSyfK1 {margin-bottom:2rem;} /* alt kat listeleme 1 sutun*/ .boxSyfK1 .content {} .boxSyfK1 .capt {margin-bottom: 1.5rem;} .boxSyfK1 .capt span.title-capt {color:#4096ca; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:700;} .boxSyfK1 .capt span.title-capt a {color:#4096ca; display:block;} .boxSyfK1 .sol {} .boxSyfK1 .sag {} .boxSyfK2 {margin-bottom:2rem;} /* alt kat. listeleme 3-4 sutun*/ .boxSyfK2 .content {} .boxSyfK2 .capt {position:absolute; bottom:0; left:0; width:100%; padding:.5rem 0; background-color: rgb(0,0,0,0.4); transition: background-color 0.15s ease-in-out;} .boxSyfK2 .capt span.title-capt {height: 3rem; text-align: center; color:#fff; padding:0; margin:0 .5rem; line-height:1.5rem; font-size:.9rem; letter-spacing: 2px; font-weight:700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxSyfK2 .capt span.title-capt a {color:#fff; display:block;} .boxSyfK2:hover .capt {background-color: rgba(64, 150, 202, 0.8);} /*-> alt sayfalar */ .boxSyf1 {margin-bottom:2rem;} /* alt kat listeleme 1 sutun*/ .boxSyf1 .content {} .boxSyf1 .capt {margin-bottom: 1.5rem;} .boxSyf1 .capt span.title-capt {color:#555; margin:0; line-height:2rem; font-size:1.2rem; letter-spacing: 2px; font-weight:600;} .boxSyf1 .capt span.title-capt a {color:#555; display:block;} .boxSyf1 .sol {} .boxSyf1 .sag {} .boxSyf2 {margin-bottom:2rem;} /* alt ürün listeleme 3-4 sutun*/ .boxSyf2 .content {border:1px solid #ddd;} .boxSyf2 .capt {width:100%; padding:.5rem 2rem; } .boxSyf2 .capt span.title-capt {height: 3rem; text-align: left; /* center */ color:#555; margin:.5rem 0; padding:0; line-height:1.5rem; font-size:.9rem; letter-spacing: 2px; font-weight:600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxSyf2 .capt span.title-capt a {color:#555; display:block;} @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { /*-> alt kategoriler */ .boxSyfK1 .sol {width:30%;} .boxSyfK1 .sag {width:70%;} .boxSyfK2 {width:50%;} /*-> alt sayfalar */ .boxSyf1 .sol {width:30%;} .boxSyf1 .sag {width:70%;} .boxSyf2 {width:50%;} .boxSyf2 .capt {padding:.5rem; } .boxSyf2 .capt span.title-capt {font-size:.8rem; letter-spacing: 1px;} } @media only screen and (min-width:0px) and (max-width:600px) { /*-> alt kategoriler */ .boxSyfK1 .sol {width:100%;} .boxSyfK1 .sag {width:100%;} .boxSyfK1 .sag .content {padding:2rem 1rem 0 2rem; } .boxSyfK2 {width:50%;} /*-> alt sayfalar */ .boxSyf1 .sol {width:100%;} .boxSyf1 .sag {width:100%;} .boxSyf1 .sag .content {padding:2rem 1rem 0 2rem; } .boxSyf2 {width:50%;} .boxSyf2 .capt {padding:.5rem; } .boxSyf2 .capt span.title-capt {font-size:.8rem; letter-spacing: 1px;} } /* SAYFA Detay Görünümleri */ h1.icSayfH1 {position:relative; color:#000; font-size:1.6rem; line-height:2; margin-bottom:1rem; display: inline-block; z-index:2; font-weight: 500; letter-spacing: 0;} h1.icSayfH1 a {position:relative; color:#000; } @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { h1.icSayfH1 {font-size:1.4rem; margin-bottom:1rem;} } @media only screen and (min-width:0px) and (max-width:600px) { h1.icSayfH1 {font-size:1.4rem; margin-bottom:1rem;} } /* ürün detay tab */ ul.urnTabs {width:100%; margin:0px 0px 20px 0px; padding:0px; list-style: none;} ul.urnTabs li {float:left; list-style:none; font-size:1.2rem; line-height:2; background: #fff; color: #333; padding: .5rem 1rem; margin:0 2rem 0 0 ; cursor: pointer; border-bottom:2px solid #eee; } ul.urnTabs li.current {border-bottom:2px solid #a50120;} .urnTabs-content { position:relative; width:100%; display: none; border:none; padding:20px 0px; margin-bottom:32px; } .urnTabs-content.current { display: inherit; } @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { ul.urnTabs li {width:90%; } } /* 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 #333;} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { } /* #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:1239px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { } /* #slaytGaleri*/ #slaytGaleri {width:100%; margin-bottom:20px;} #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 {height: 100%; margin:0 auto; max-height:400px; } #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:1239px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { } /* #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 {height: 100%; max-height:400px; object-fit: contain;} #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:1239px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { } /* #sutunluGaleri*/ #sutunluGaleri {width:100%; margin-bottom:20px;} #sutunluGaleri .galeri-oge {float:left; width:25%;} #sutunluGaleri .galeri-oge .oge-capt { width:100%; height: 3rem; margin:2px 0;} #sutunluGaleri .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;} #sutunluGaleri .galeri-oge .img-k {} #sutunluGaleri .galeri-oge .img-k img{} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:601px) and (max-width:997px) { #sutunluGaleri .galeri-oge {float:left; width:50%;} } @media only screen and (min-width:0px) and (max-width:600px) { #sutunluGaleri .galeri-oge {float:left; width:50%;} } /* #referansgaleri*/ #referansgaleri {width:100%; margin-bottom:20px;} #referansgaleri .galeri-oge {float:left; width:20%; margin-bottom:1rem;} #referansgaleri .galeri-oge .oge-capt { width:100%; height: 3rem; 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:1239px) { } @media only screen and (min-width:601px) and (max-width:997px) { #referansgaleri .galeri-oge {float:left; width:20%;} } @media only screen and (min-width:0px) and (max-width:600px) { #referansgaleri .galeri-oge {float:left; width:25%;} } /* GALERİ GÖRÜNÜMLERİ SON *********************************** */ /* anasayfaa marka Kutu */ .markaKutu {padding:0; width: 200px; text-align: center; } .markaKutu img {/*border-radius: 50%;*/} .markaKutu span {display:none; padding:0; margin:0; line-height: 1; font-size: .8rem; font-weight: 300; color: #bbb;} .owl-marka {margin-top:10px; margin-bottom:0;} .owl-marka .owl-nav {} .owl-marka .owl-nav button.owl-prev, .owl-marka .owl-nav button.owl-next {position:absolute; top:45%; font-size:16px; width:20px; height:30px; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer;} .owl-marka .owl-nav button.owl-prev {left:-10px;} .owl-marka .owl-nav button.owl-next {right:-10px;} .owl-marka .owl-nav button.owl-prev:hover, .owl-marka .owl-nav button.owl-next:hover {background:rgba(0,0,0,0.7); color:#fff;} .owl-marka .markaKutu {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;} .cozumOrtakKutu {padding:0; width: 280px; text-align: center;} .cozumOrtakKutu img {border:1px solid #ddd;} @media only screen and (min-width:998px) and (max-width:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:600px) { .etiketlerKutu span {padding:.3rem; margin:.3rem .3rem .3rem 0;} .etiketlerKutu a {font-size:.7rem;} } /* gezgin*/ p.gezgin {margin:0; color:#bbb; font-size:.8rem;} p.gezgin a {color:#999;} /* pager*/ .pager {display: flex; background:#f9f9f9; align-items: center; justify-content: center; margin:10px auto; padding:10px; color:#333; width:100%;} .pagerIc {margin: 0 .5rem;} .pagerIc select {border:1px solid #333; border-radius:5px; height:2rem; padding:0 .5rem; margin:0; font-size:1rem; line-height:2rem; cursor: pointer; color:#333;} .pagerIc i {font-size:1.5rem; line-height:2rem;} /* FOOTER */ .footer-kap {background:#000; /*background:#515151 url("../img/footerBG.jpg") no-repeat center center;*/ margin-top:32px; padding:32px; color:#eee; font-size: .9rem; line-height: 1.5;} .footer {margin-top:32px; /*background-color:rgba(255,255,255,1);*/ padding:48px 32px 0 32px;} .footer .col-3-12, .footer .col-4-12, .footer .col-6-12 {margin-bottom:2rem;} .footer p {color:#eee; font-size: .9rem; line-height: 1.5;} .footerLogo {width:200px; margin-top:10px; filter: brightness(0) invert(1);} .footer h3 {position:relative; color:#fff; margin-bottom:1.5rem; font-size:.9rem; line-height:1.5; font-weight:600; letter-spacing: 2px;} .footer h3 a{color:#fff;} /*.footer h3::after {position:absolute; content:""; background:#1a2e60; bottom:-10px; left:0; width:30px; 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: .9rem; line-height: 1.6rem; color:#ddd; display:block; font-weight:200;} .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 {display:none;} .footermenu ul li li {padding:0 0 0 1rem; padding:0;} .footermenu ul li li a {padding:.3rem .5rem; margin:0; font-size: .9rem; line-height: 1.2rem; color:#ddd; font-weight:100;} ul.sosyal-link {list-style:none; margin:0 0 12px 0; padding:0; float:left;} ul.sosyal-link li {position:relative; display:block; float:left; list-style:none; width:2rem; height:2rem; margin:0 3px 3px 3px; padding:0; background:rgba(255,255,255,1); color:#333; text-align:center; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; } ul.sosyal-link li a {color:#333; display:block; font-size:1.4rem; line-height:2rem;} ul.sosyal-link li a span {color:#333;} ul.sosyal-link li:hover {background:rgba(0,0,0,.1);} .footeraltkap {background-color:rgba(64,150,202,.01); padding:6px 0px; color:#eee; } .footeraltkap p {margin:0; color:#eee; font-size:.9rem; line-height:2;} .footeraltkap p a {color:#eee;} p.avinga {position: absolute; right:0; top:0; margin-bottom:32px; color:#ddd; font-weight:100;} p.avinga a {color:#ddd;} #yanBlok {} #yanBlok h4 {border:1px solid #bbb; border-radius:5px; padding:.5rem; color:#000; margin-top:10px;} #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:1199px) { } @media only screen and (min-width:601px) and (max-width:997px) { #yanMenuAc {display:block;} #yanBlok .mainNav {display:none;} } @media only screen and (min-width:0px) and (max-width:600px) { #yanMenuAc {display:block;} #yanBlok .mainNav {display:none;} } /* ********************************** 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: #333; display: block; font-size: .9rem; line-height: 1.5; padding: 12px 10px; text-decoration: none;} .mainNav ul li a:hover {color:#000; 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: .8rem; line-height: 1.5; padding: 8px 0px 8px 16px;} .mainNav ul ul li a:hover {color:#000;} /* 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: .7rem; padding: 8px 0px 8px 24px;} /* Accordion Button */ ul li.has-subnav .accordion-btn {color:#333;} ul li.has-subnav .accordion-btn:hover {font-size:20px;} .mainNav ul li a.aktif { font-weight: 600; } /* ********************************** jQuery Nice Select - v1.0 https://github.com/hernansartorio/jquery-nice-select Made by Hernán Sartorio *********************************** */ .nice-select {-webkit-tap-highlight-color: transparent; background-color: #fff; border-radius: 5px; border: solid 1px #bbb; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: 400; height: 42px; line-height: 40px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto;} .nice-select:hover {border-color: #dbdbdb;} .nice-select:active, .nice-select.open, .nice-select:focus {border-color: #999;} .nice-select:after {border-bottom: 2px solid #999; border-right: 2px solid #999; content: ''; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; width: 5px; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .nice-select.open:after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg);} .nice-select.open .list {opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0);} .nice-select.disabled {border-color: #bbb; color: #999; pointer-events: none;} .nice-select.disabled:after {border-color: #bbb;} .nice-select.wide {width: 100%;} .nice-select.wide .list {left: 0 !important; right: 0 !important;} .nice-select.right {float: right;} .nice-select.right .list {left: auto; right: 0;} .nice-select.small {font-size: 12px; height: 36px; line-height: 34px;} .nice-select.small:after {height: 4px; width: 4px;} .nice-select.small .option {line-height: 34px; min-height: 34px;} .nice-select .list {background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; z-index: 9; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;} .nice-select .list:hover .option:not(:hover) {background-color: transparent !important;} .nice-select .option {cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s;} .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: #bbb;} .nice-select .option.selected {font-weight: bold;} .nice-select .option.disabled {background-color: transparent; color: #999; cursor: default;} .no-csspointerevents .nice-select .list {display: none;} .no-csspointerevents .nice-select.open .list {display: block;} /* v3 -> cookie */ .cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 800px; background-color: #fff; padding: 20px 32px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 20; display: none; } .cookie-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .cookie-content p { margin: 0; font-size: 14px; color: #444; line-height: 1.5; } .cookie-content a { color: #007bff; text-decoration: underline; } .cookie-btn { background-color: #333; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; white-space: nowrap; transition: background 0.3s; } .cookie-btn:hover { background-color: #000; } @media (max-width: 600px) { .cookie-content { flex-direction: column; text-align: center; } } /* v3 -> FANCYBOX class ekle /* FANCYBOX */ .inlineFancy {background: transparent; border:none;} .fancybox-slide--html .fancybox-content { width: 80vw; height: 80vh; overflow: auto !important; } /* v3 -> son /* 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: #d93131;} .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: #6c757d;} .bg-gray-dark {background-color: #343a40;} .bg-primary {background-color: #0d6efd;} .bg-secondary {background-color: #6c757d;} .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;} .color-blue {color: #4096ca;} .color-indigo {color: #6610f2;} .color-purple {color: #6f42c1;} .color-pink {color: #d63384;} .color-red {color: #d93131;} .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: #0d6efd;} .color-secondary {color: #6c757d;} .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 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;}