/* #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: 'Roboto', sans-serif; font-size: 1rem; /* (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.6; background-color: #f5f5f5; /* #f9f9f9; */ color: #222; letter-spacing: normal; } /* Typography ------------------------------------- */ h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 1rem; font-weight: 600; line-height: 1.25; color: inherit; font-family: "Oswald", sans-serif;} h1 {font-size: 1.75rem; color: #000;} h2 {font-size: 1.4rem; color: #111;} h3 {font-size: 1.15rem; 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:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { h1 {font-size: 1.6rem;} h2 {font-size: 1.3rem;} h3 {font-size: 1.1rem;} } @media only screen and (min-width:0px) and (max-width:599px) { h1 {font-size: 1.4rem;} h2 {font-size: 1.2rem;} h3 {font-size: 1.05rem;} } /* 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;} /* 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 (statik formlar) –––––––––––––––––––––––––––––––––––––––––––––––––– */ .formum{margin:0} .formum .satir { display: flex; flex-direction: column; margin: 0 0 8px 0; width: 100%; } .formum .satir.form50 { width: 50%; } .formum .satir-grup { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; } .formum .satir-grup .satir { flex: 1; min-width: 120px; } .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:.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:#222} .formum .formOgeXS{width:70px;padding:.3rem .3rem} .formum .formOgeS{width:120px} .formum .formOgeM{width:220px} .formum .formOgeL{width:340px;max-width:100%} .formum .formOgeXL{width:80%;max-width:100%} .formum .checkboxKutu { display: flex; align-items: flex-start; gap: 8px; } .formum input.checkbox { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; } .formum span.checkbox-label { font-size: .8rem; color: #222; line-height: 1.2; } .formum .telAlani { display: flex; gap: 8px; align-items: flex-start; } .formum .telUlkeKod { width: 180px; flex-shrink: 0; } .formum .telNumarasi { flex: 1; min-width: 0; } .formum .captchaAlani { display: flex; align-items: center; gap: 10px; } .formum .captchaAlani img { height: 32px; width: auto; border-radius: 5px; } /* v3 -> 2806 - > güncelle */ /* Form urun bilgi (açılır formlar) –––––––––––––––––––––––––––––––––––––––––––––––––– */ .formUrunBilgi{margin:0} .formUrunBilgi .satir { display: flex; flex-direction: column; margin: 0 0 8px 0; width: 100%; } .formUrunBilgi .satir.form50 { width: 50%; } .formUrunBilgi .satir-grup { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; } .formUrunBilgi .satir-grup .satir { flex: 1; min-width: 60px; } .formUrunBilgi input,.formUrunBilgi button,.formUrunBilgi select,.formUrunBilgi optgroup,.formUrunBilgi textarea {padding:.3rem .3rem;;border:1px solid #ccc;border-radius:5px} .formUrunBilgi input,.formUrunBilgi select,.formUrunBilgi textarea{color:#000;font-size:.8rem} .formUrunBilgi input[type="checkbox"]{margin:.2rem .5rem 0 0;width:16px;height:16px} .formUrunBilgi label{display:block;font-weight:400;font-size:.8rem; color:#eee;} .formUrunBilgi fieldset{border:none;border-top:1px dashed #ccc;margin:10px 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:#222} .formUrunBilgi .formOgeXS{width:70px;padding:.3rem .3rem} .formUrunBilgi .formOgeS{width:120px} .formUrunBilgi .formOgeM{width:220px} .formUrunBilgi .formOgeL{width:340px;max-width:100%} .formUrunBilgi .formOgeXL{width:80%;max-width:100%} .formUrunBilgi .checkboxKutu { display: flex; align-items: flex-start; gap: 8px; } .formUrunBilgi input.checkbox { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; } .formUrunBilgi span.checkbox-label { font-size: .7rem; color: #eee; line-height: 1.2; } .formUrunBilgi span.checkbox-label a {color: #eee;} .formUrunBilgi .telAlani { display: flex; gap: 8px; align-items: flex-start; } .formUrunBilgi .telUlkeKod { width: 100px; flex-shrink: 0; } .formUrunBilgi .telNumarasi { flex: 1; min-width: 0; } .formUrunBilgi .captchaAlani { display: flex; align-items: center; gap: 10px; } .formUrunBilgi .captchaAlani img { height: 32px; width: auto; border-radius: 5px; } #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; box-sizing: border-box; justify-content: flex-start; } #urunBilgiFormKutuIc h3{color:#fff;margin-bottom:1rem;} /* v3 -> 2106 */ #urunBilgiFormKutuIc p{color:#fff;} /* v3 -> son */ #urunBilgiFormKutuIc table{margin:0; font-size:.8rem; line-height:1.2;} #urunBilgiFormKutuIc table th{margin:0;vertical-align:middle;text-align:left; padding:0 5px; color:#222; border:1px solid #ccc;} #urunBilgiFormKutuIc table td{margin:0;vertical-align:middle;text-align:left; padding:0 5px; color:#222; border:1px solid #ccc;} #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} #urunBilgiFormKutuIc #teklifSepeti {width:100%; background-color: #fff; margin-bottom:10px;} /* v3- > güncelle -SON */ /* 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; padding: .4rem .8rem; font-size: 1rem; line-height: 1.5; border-radius: 5px; 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; margin: .5rem 0; background-color:#ddd; color:#333;} .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 */ :root { --aralik: 32px; /* yatay aralıklar */ --aralikTopBottom: 32px; /* dikey aralıklar */ } .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:1240px; max-width:96%; margin:0 auto; padding:0;} .container-dar {position:relative; width:800px; max-width:96%; padding:10px 0; margin:30px auto;} /* container kenarı: x = 0 .grid (margin-left: -16px): x = -16 ← .grid'in border-box'ı burada başlıyor (taşma BU) .col-12-12 (padding-left: 16px): içerik = -16 + 16 = 0 ← .content burada başlıyor Yani: .grid -16'ya taşıyor, .col-12-12'nin padding'i içeriği +16 geri itiyor, ikisi toplanınca 0 — content tam container kenarında. Margin taşmayı "önlemedi", padding'in yarattığı iç-çekilmeyi (indent) tam olarak dengeledi. */ .grid {position:relative; padding:0; /* background:#ddd; */ display: flex; flex-wrap: wrap; align-items: flex-start; margin-left: calc(var(--aralik) / -2); margin-right: calc(var(--aralik) / -2);} .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; flex: 0 0 auto; /* .grid'in çocuğu olan her .col-X-12, kendi içine aralik/2 (16px) padding alır. Bu iki şeyi sağlar: - Yan yana duran sütunlar arasında eşit boşluk (aralık) oluşur. - .col-X-12'nin border-box'ı container'dan taşsa bile (görünmez, çünkü arka planı yok), padding'in içindeki gerçek içerik container kenarına tam hizalı kalır. */ padding-left: calc(var(--aralik) / 2); padding-right: calc(var(--aralik) / 2);} .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; */ padding:0; /* flex item olarak kullanildiginda (grid/col-X-12'nin dogrudan cocugu), icerige-gore-boyutlanma yerine eskisi gibi tam genislik kaplasin diye. Flex-item olmayan (normal blok) baglamlarda bu iki ozellik hicbir etki yaratmaz, o yuzden her yerde tanimlamak guvenli. */ flex: 0 0 auto; width:100%;} /* .content HER ZAMAN bir .col-X-12'nin (dogrudan) cocugu olarak kullanilir - aralik padding'ini (sol/sag) o col-X-12'den miras alir, .content'in kendisi hicbir zaman .grid'in veya bir kart class'inin (boxUrnK1 vb.) DOGRUDAN cocugu olarak kullanilmaz. Bu sayede burada ayrica bir ".grid > .content" istisna kurali gerekmiyor - bkz. col-X-12 kurallari icin ~253. satir. */ .kenarHizala { width: calc(100% - var(--aralik)); margin-left: calc(var(--aralik) / 2); margin-right: calc(var(--aralik) / 2);} .marginTop {margin-top:var(--aralikTopBottom);} .marginBottom {margin-bottom:var(--aralikTopBottom);} .paddingTop {padding-top:var(--aralikTopBottom);} .paddingBottom {padding-bottom:var(--aralikTopBottom);} @media only screen and (min-width:998px) and (max-width:1239px) { :root { --aralik: 24px; /* yatay aralıklar */ --aralikTopBottom: 24px; /* dikey aralıklar */ } .marginTop {margin-top:var(--aralikTopBottom);} .marginBottom {margin-bottom:var(--aralikTopBottom);} .paddingTop {padding-top:var(--aralikTopBottom);} .paddingBottom {padding-bottom:var(--aralikTopBottom);} } @media only screen and (min-width:600px) 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%;} :root { --aralik: 24px; /* yatay aralıklar */ --aralikTopBottom: 24px; /* dikey aralıklar */ } /* .col-12-12{width:100%} yukarida ayni ozelligi (width) ayni specificity ile ama SONRA tanimladigi icin, .kenarHizala'nin kendi width:calc(100% - aralik) kuralini (~296. satir) eziyordu - ayni width kuralini burada tekrar tanimlayip (media query icinde SONRA gelerek) kazanmasini sagliyoruz (bkz. asagidaki 599px blogundaki ayni mantik). */ .kenarHizala {width: calc(100% - var(--aralik));} .marginTop {margin-top:var(--aralikTopBottom);} .marginBottom {margin-bottom:var(--aralikTopBottom);} .paddingTop {padding-top:var(--aralikTopBottom);} .paddingBottom {padding-bottom:var(--aralikTopBottom);} } @media (max-width:599px){ .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%;} :root { --aralik: 16px; /* yatay aralıklar */ --aralikTopBottom: 16px; /* dikey aralıklar */ } /* .col-12-12{width:100%} yukarida ayni ozelligi (width) ayni specificity ile ama SONRA tanimladigi icin, .kenarHizala'nin kendi width:calc(100% - aralik) kuralini (~296. satir) eziyordu - kart width:100%'e donuyor ama kendi pozitif margin'i (aralik/2 her yanda) hala uygulaniyor, bu da karti kapsayicidan tam --aralik kadar (16px) tasiriyordu. Ayni width kuralini burada tekrar tanimlayip (media query icinde SONRA gelerek) kazanmasini sagliyoruz. */ .kenarHizala {width: calc(100% - var(--aralik));} .marginTop {margin-top:var(--aralikTopBottom);} .marginBottom {margin-bottom:var(--aralikTopBottom);} .paddingTop {padding-top:var(--aralikTopBottom);} .paddingBottom {padding-bottom:var(--aralikTopBottom);} } /* FIX --------------------------------*/ .clear {clear:both; padding:0 !important; margin:0 !important;} /* İMG --------------------------------*/ .img img {object-fit: contain; max-width:100%;} img {border:none; padding:0; margin:0; display:block;} .img-k {position: relative; width: 100%; overflow: hidden; aspect-ratio: 1 / 1;} .img-k-Yatay {position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 3;} /* yatay */ .img-k-Dikey {position: relative; width: 100%; overflow: hidden; aspect-ratio: 3 / 4;} /* dikey */ .img-k img, .img-k-Yatay img, .img-k-Dikey img {width: 100%; height: 100%; object-fit: contain; display: block;} .img-k a, .img-k-Yatay a, .img-k-Dikey a {display: block; width: 100%; height: 100%;} /* .banner-kap {background-color:#000; text-align:center;} .banner-kap h1 {line-height:6rem; color:white; margin:0;} */ .headerFlex {display: flex; /*justify-content: flex-start; */ justify-content: space-between; align-items: center; } .headerUstKap {padding:3px 0; border-bottom:1px solid #eee; background:#fff;} .headerUstKap .headerUstKapFlex { display: flex; justify-content:space-between; align-items: center; } .headerUstKapP {color:#333; margin:0;} .headerUstNavbar {padding: 0;} .headerUstNavbar > ul {display: flex;list-style: none;margin: 0;padding: 0;font-family: "Oswald", sans-serif; letter-spacing: 0.5px; } .headerUstNavbar ul a {text-decoration: none;color: #222;font-weight: 500;display: block;transition: color 0.2s ease;} .headerUstNavbar ul a:hover {color: #dc3545;} .headerUstNavbar > ul > li {position: relative; border-left:1px solid #ddd; padding: 0 0.5rem; font-size: 0.8rem;line-height:2rem; } .headerUstNavbar > ul > li:first-child {border-left:none; padding: 0 0.5rem 0 0;} .headerUstNavbar ul li ul {display:none;} .nav-menu-ilet { margin:0; padding:0; line-height:normal; list-style:none; display:flex; align-items:center; position:relative; z-index:6; font-family: "Oswald", sans-serif; letter-spacing: 0.5px;} .nav-menu-ilet li { position:relative; cursor:default; display:flex; align-items:center; color:#333; font-weight:500; font-size:0.8rem; line-height:2rem; text-decoration:none; letter-spacing:0; padding:0 .5rem; margin:0; transition:all .3s; border-left:1px solid #ddd; padding: 0 0.5rem;} .nav-menu-ilet a { display:flex; align-items:center; color:#333; line-height:2rem; } .nav-menu-ilet i { display:flex; align-items:center; line-height:2rem; } .nav-menu-ilet span { display:flex; align-items:center; padding:0 .5rem; line-height:2rem; } .nav-menu-ilet li:hover { color:#dc3545; } .nav-menu-ilet li:hover a { color:#dc3545; } .headerKap {background-color:#fff; padding:0;} .headerKap:before { display:none; 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; pointer-events:none; } #logo {position:relative; padding:0; z-index:5;} #logo img {height:4rem; margin:.5rem 0;} /* headerMenu **************************** */ #headerMenu-kutu { display: flex; align-items: center; justify-content: center;} ul.headerMenu { display: flex; padding: 0; list-style: none; margin: 0; } ul.headerMenu li { position: relative; display: flex; align-items: center; padding: 0; color: #333; font-size: 1.5rem; line-height: 3rem; margin: 0 1.4rem 0 0; cursor: pointer; transition: all .3s ease; } ul.headerMenu li a { display: flex; align-items: center; margin: 0; color: #333; } ul.headerMenu li i { padding-right: 5px; } ul.headerMenu li span.menuMetin { display: none; } ul.headerMenu li span.menuCount { position: absolute; top: -10px; right: -3px; padding: 5px; line-height: 1; font-size: .8rem; background-color: #000; color: #fff; border-radius: 5px; } ul.headerMenu li:hover { color: #333; } ul.headerMenu li:hover a { color: #333; } ul.headerMenu li#menuac { display: none; } ul.headerMenu li#aramaiconum {display:none;} #aramaformum{padding:0;margin:0;width:100%;max-width:440px;border:1px solid #ddd;z-index:3;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; border-radius:999px;} #aramaformum form{display:flex; align-items:stretch; width:100%;} #aramaformum .input{width:calc(100% - 3rem);padding:0 1rem;margin:0px;background:#fff;font-size:.9rem;line-height:3rem;border:none; border-radius:999px 0 0 999px; } #aramaformum .search-but{width:3rem;padding:0;margin:0;color:#fff;background:#065598;border:none;cursor:pointer;font-size:1.1rem;line-height:3rem; border-radius:0 999px 999px 0;} .dilMenumSelect {margin:0; padding:0;} ul.dilMenum { display:flex; padding:0; list-style:none; margin:0;} ul.dilMenum li { margin:0; padding:0; list-style:none; border:none; } ul.dilMenum li a { display:flex; align-items:center; padding:0 .5rem; margin:0; font-size:.9rem; line-height:2rem; color:#333; font-weight:500; } ul.dilMenum li a.dilSel { background-color:rgb(0, 0, 0, .05); } /* respblok **************************** */ #respblok {position:fixed; top:0; left:0; z-index:20; width:100%; height:100%; background:rgba(0,0,0,.7); display:none;} /* #respblok .mainNav: bu, #yanBlok'taki gibi yuzen bir kart degil, ekranin tam boyunda sabit bir cekmece - o yuzden .mainNav'in genel (yanBlok icin tasarlanmis) yuvarlatilmis-alt-kose/border/golge kart stili burada anlamli degil, sifirlaniyor. Menu linkleri/hover/aktif renkler ise .mainNav'in paylasilan kurallarindan (marka mavisi hover/aktif) miras alinmaya devam ediyor - boylece #yanBlok ile ayni gorsel dili tasiyor. */ #respblok .mainNav { width:280px; height:100%; overflow-y:auto; /* içerik taşarsa dikey kaydırma çubuğu çıkar */ overflow-x:hidden; /* yatay taşmayı engeller */ -webkit-overflow-scrolling: touch; /* iOS'ta yumuşak kaydırma */ border:none; border-radius:0; box-shadow:none; margin-bottom:0; } #respblok .menuBasligim {position:relative; box-sizing: border-box; width:280px; height:3.5rem; padding:0 1.1rem; display:flex; align-items:center; font-size:1rem; font-weight:700; letter-spacing:.5px; color:#fff; background:#065598; border-bottom:none;} #menukapat {position:absolute; box-sizing: border-box; left:280px; top:0; width:3.5rem; height:3.5rem; display:flex; align-items:center; justify-content:center; padding:0; background-color: #04243d; color:#fff; cursor:pointer; z-index:3; transition:background-color .2s ease;} #menukapat:hover {background-color:#03192b;} #menukapat span {font-size:1.4rem; line-height:1; } /* MENÜ TİPİ 1 -SUPERFİSH MENU *************************************** */ .ustMenumKap {position:relative;background-color: #065598;} .ustMenumKap: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; pointer-events: none; /* tıklamaları alttaki öğelere geçirir */} #ustMenuOzel {position:relative; display: flex; justify-content: center; } .sf-menu {z-index:10; font-family: "Oswald", sans-serif; letter-spacing: 0.5px; margin:0; list-style: none; margin-bottom:0; display:flex; align-items:flex-start;} /*** 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: #fff; font-weight:400; font-size:0.9rem; line-height:3; text-decoration: none; zoom: 1; /* IE7 */ } .sf-menu ul ul {top: 0; left: 100%;} .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; } .sf-menu > li { } .sf-menu ul li { background: #000000; 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; } /* MENÜ TİPİ 2 - KATEGORİ ICON MENU (SWIPER) *************************************** */ .customMenumSWPKap { position: relative; background-color: #065598; padding: 0; } .customMenumSWPKap: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; pointer-events: none; } #customMenumSWP { width: 100%; position: relative; padding:0 45px} #customMenumSWP .swiper-wrapper { display: flex; } #customMenumSWP .swiper-slide { display: flex; height: auto; } #customMenumSWP .swiper-slide > div { display: flex; width: 100%; } .menuUrnKatKutu { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border-left: 1px solid rgba(255, 255, 255, 0.2); text-align: center; transition: all 0.25s ease; } .menuUrnKatKutu .navImg { display: flex; flex-direction: column; align-items: center; justify-content: center; } .menuUrnKatKutu .navImg img { padding-top: 10px; width: 30px; } .menuUrnKatKutu span { display: flex; align-items: center; justify-content: center; width: 100%; padding: 8px; box-sizing: border-box; } .menuUrnKatKutu span a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal; color: #eee; font-size: 0.9rem; font-weight: 500; text-decoration: none; line-height: 1.2; word-break: break-word; } .menuUrnKatKutu span a:hover { color: #fff; } .menuUrnKatKutu.selected { background-color: #4096ca; } #customMenumSWP .swp-nav .swp-prev, #customMenumSWP .swp-nav .swp-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: #fff; border: 1px solid #ddd; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #customMenumSWP .swp-nav .swp-prev { left: 0; } #customMenumSWP .swp-nav .swp-next { right: 0; } #customMenumSWP .swp-nav .disabled, #customMenumSWP .swp-nav .swiper-button-disabled { opacity: 0.5; cursor: default; } /* MENÜ TİPİ 3 - İKONLU MENU *************************************** */ .ikonluMenu-kap { background-color: #ddd; border-top: 1px solid #ccc; } .ikonluMenu-kap: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; pointer-events: none; } .ikonluMenu-kutu { padding: 0; display: flex; justify-content: center; } .ikonluMenu, .ikonluMenu ul, .ikonluMenu li, .ikonluMenu a { margin: 0; padding: 0; line-height: normal; list-style: none; position: relative; } .ikonluMenu { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; justify-content: center; align-items: stretch; } .ikonluMenu > li { cursor: default; flex: 1; max-width: 200px; display: flex; border-left: 1px solid rgba(255, 255, 255, 0.2); } .ikonluMenu > li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.2); } .ikonluMenu > li > a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; width: 100%; padding: .5rem; box-sizing: border-box; } .ikonluMenu ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 999; transition: opacity .3s; min-width: 15rem; box-shadow: 2px 2px 2px rgba(0,0,0,0.25); } .ikonluMenu li:hover > ul { left: 0; opacity: 1; z-index: 1000; } .ikonluMenu ul li:hover > ul { top: 0; left: 100%; } .ikonluMenu ul li { width: 100%; } .ikonluMenu ul li a { display: block; white-space: nowrap; text-align: left; padding: .5rem; background: #444; color: #fff; font-size: 1rem; font-weight: 400; } .ikonluMenu a { color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem; } .ikonluMenu > li > .nav-active { background-color: rgba(0,0,0,0.05); } .ikonluMenu a:hover, .ikonluMenu a:focus, .ikonluMenu li:hover a { background: #444; color: #fff; } .ikonluMenu li:hover li a { background: #444; color: #fff; } .ikonluMenu li:hover li a:hover, .ikonluMenu li:hover li a:focus, .ikonluMenu li:hover li:hover a { background: #555; } .ikonluMenu li:hover li:hover li a { background: #555; } .ikonluMenu li:hover li:hover li a:hover, .ikonluMenu li:hover li:hover li a:focus, .ikonluMenu li:hover li:hover li:hover a { background: #666; } .ikonluMenu li:hover li:hover li:hover li a { background: #666; } .ikonluMenu li:hover li:hover li:hover li a:hover, .ikonluMenu li:hover li:hover li:hover li a:focus { background: #777; } .ikonluMenu .navImg { height: 3rem; width: 3rem; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .ikonluMenu img { width: 100%; } .ikonluMenu span { max-width: 100%; padding: 0 .2rem; box-sizing: border-box; margin: 0; font-size: .8rem; line-height: 1.2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ikonluMenu a:hover span, .ikonluMenu a:focus span, .ikonluMenu li:hover a span { background: #444; color: #FFF; } .ikonluMenu a:hover img, .ikonluMenu a:focus img, .ikonluMenu li:hover a img { animation: headShake 1s; filter: brightness(0) invert(100%); } .ikonluMenu a:hover .navImg, .ikonluMenu a:focus .navImg, .ikonluMenu li:hover a .navImg { background: #444; } @media only screen and (min-width:998px) and (max-width:1239px) { #logo {} #logo img {height:3rem; margin:.5rem 0;} .headerKap:before {display:block;} ul.headerMenu li#menuac {display:block;} #aramaformum{max-width:340px;} .ustMenumKap {display:none;} .ikonluMenu-kap {display:none;} .customMenumSWPKap {display:none;} } @media only screen and (min-width:600px) and (max-width:997px) { #logo {} #logo img {height:3rem; margin:.5rem 0;} .nav-menu-ilet {display:none;} .headerKap:before {display:block;} ul.headerMenu li#menuac {display:block;} ul.headerMenu li#aramaiconum {display:block;} #aramaformum{display:none; position:absolute; bottom:-3.1rem; right:0;} .ustMenumKap {display:none;} .customMenumSWPKap {display:none;} .ikonluMenu-kap {display:none;} .headerUstKapP {display:none;} } @media only screen and (min-width:0px) and (max-width:599px) { #logo {} #logo img {height:3rem; margin:.5rem 0;} .headerUstKap .headerFlex {flex-direction: column;} .headerUstNavbar > ul {gap: .3rem;} .headerUstNavbar ul a {font-size: 0.7rem;} .nav-menu-ilet {display:none;} .headerKap:before {display:block;} ul.headerMenu li {font-size:1.2rem;} ul.headerMenu li#menuac {display:block;} ul.headerMenu li#aramaiconum {display:block;} #aramaformum{display:none; position:absolute; bottom:-3.1rem; max-width:100%;} .ustMenumKap {display:none;} .customMenumSWPKap {display:none;} .ikonluMenu-kap {display:none;} .headerUstKapP {display:none;} } /* Swiper geçişi: .swiper-wrapper'a kütüphane z-index:1 veriyor, swp-nav butonları bunun altında kalıp tıklanamaz hale gelmesin diye */ .swp-nav button.swp-prev, .swp-nav button.swp-next, .swp-nav .swp-prev, .swp-nav .swp-next { z-index: 10; } /* ana sayfa */ /* Full Slayt ================================================= */ #slaytimKap {background: #ddd; background: radial-gradient(circle,rgb(197, 197, 197) 0%, rgb(239, 239, 239) 100%);} #slaytim {position:relative; /**/ width:100%; max-width:1240px; padding:0; z-index:1; margin:0 auto; background-color: #eee;} .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%; padding:0; z-index:6;} .bilgikutusu .content {display:flex; height:100%; align-items: center; width:1240px; max-width:96%; margin:0 auto; /* eskiden .container>.grid>.col-12-12>.content idi: .grid, .container'in (display:flex) flex-item'i olunca genislik tanimsiz kaliyor (flex-basis:auto -> icerige gore kucculuyor), bu yuzden slaytClass'larin %50/%70 genislikleri 1240px'e degil o kucculmus kutuya gore hesaplaniyordu. container'in genislik/ortalama davranisi burada .content'e direkt tasindi. */} /* 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%;} .bilgikutusu .slaytClass3 {width:50%; margin-left:auto; text-align:right;} .bilgikutusu h1 {color:#222; font-size:2.4rem; line-height:1.5; font-weight:400; margin-bottom:0; padding:0 1rem; display: block; letter-spacing: 2px; text-shadow:1px 1px 4px rgb(0,0,0,0.5); } .bilgikutusu p {color:#555; 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.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: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.5);} .swiper-slide-active .bilgikutusu {} .swiper-slide-active .bilgikutusu h1 {animation:1s .1s backInUp both;} .swiper-slide-active .bilgikutusu p {animation:2s .1s backInUp both;} .swiper-slide-active .bilgikutusu .btnSlayt {animation:3s .1s backInUp both;} #slaytim .swp-dots {display:none;} #slaytim .swp-nav {} #slaytim .swp-nav button.swp-prev, #slaytim .swp-nav button.swp-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; display:flex; align-items:center; justify-content:center; border-radius:50%; } #slaytim .swp-nav button.swp-prev {left:50px;} #slaytim .swp-nav button.swp-next {right:50px;} #slaytim .swp-nav button.swp-prev:hover, #slaytim .swp-nav button.swp-next:hover {background:rgba(0,0,0,0.8); color:#fff;} #slaytim:hover .swp-nav button.swp-prev {opacity:0.8; left:10px;} #slaytim:hover .swp-nav button.swp-next {opacity:0.8; right:10px;} @media only screen and (min-width:998px) and (max-width:1239px) { .slaytimg img {/*height:400px; */} .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:600px) and (max-width:997px) { .slaytimg img {/*height:340px; */} .bilgikutusu {} .bilgikutusu h1 {font-size:1.6rem; letter-spacing: 0; } .bilgikutusu p {font-size:1rem;} .bilgikutusu .btnSlayt {} } @media only screen and (min-width:0px) and (max-width:599px) { .slaytimg img {/*height:280px;*/} .bilgikutusu {} .bilgikutusu h1 {font-size:1.2rem; letter-spacing: 0; } .bilgikutusu p {font-size:.8rem;} .bilgikutusu .btnSlayt {} .bilgikutusu .slaytClass2 {width:70%;} .bilgikutusu .slaytClass3 {width:70%; margin-left:auto; 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 {width:100%; } .bilgikutusu2 .slaytClass2 {width:100%; display:flex; flex-direction:column; align-items:flex-start;} .bilgikutusu2 .slaytClass2 h1, .bilgikutusu2 .slaytClass2 p, .bilgikutusu2 .slaytClass2 .btnSlayt {text-align:left;} .bilgikutusu2 .slaytClass2 h1, .bilgikutusu2 .slaytClass2 p {width:70%;} .bilgikutusu2 .slaytClass3 {width:100%; display:flex; flex-direction:column; align-items:flex-end;} .bilgikutusu2 .slaytClass3 h1, .bilgikutusu2 .slaytClass3 p, .bilgikutusu2 .slaytClass3 .btnSlayt {text-align:right;} .bilgikutusu2 .slaytClass3 h1, .bilgikutusu2 .slaytClass3 p {width:70%;} .swiper-slide-active .bilgikutusu2 {} .swiper-slide-active .bilgikutusu2 h1 {/*animation:1s .1s backInUp both;*/} .swiper-slide-active .bilgikutusu2 p {/*animation:2s .1s backInUp both;*/} .swiper-slide-active .bilgikutusu2 .btnSlayt {/*animation:3s .1s backInUp both;*/} #slaytimCoklu .swp-dots {display:none;} #slaytimCoklu .swp-nav {} #slaytimCoklu .swp-nav button.swp-prev, #slaytimCoklu .swp-nav button.swp-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 .swp-nav button.swp-prev {left:50px;} #slaytimCoklu .swp-nav button.swp-next {right:50px;} #slaytimCoklu .swp-nav button.swp-prev:hover, #slaytimCoklu .swp-nav button.swp-next:hover {background:rgba(0,0,0,0.8); color:#fff;} #slaytimCoklu:hover .swp-nav button.swp-prev {opacity:0.8; left:10px;} #slaytimCoklu:hover .swp-nav button.swp-next {opacity:0.8; right:10px;} @media only screen and (min-width:998px) and (max-width:1239px) { .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 ================================================= */ #bannerimKap {background: #ddd; background: radial-gradient(circle,rgb(197, 197, 197) 0%, rgb(239, 239, 239) 100%);} #bannerim {position:relative; width:100%; max-width:1240px; padding:0; margin:0 auto; /*border-bottom:5px solid #000;*/} #bannerim .bannerimg {position:relative; padding:0; margin:0;} #bannerim .bannerimg img {width:100%; height:140px; 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;} .swiper-slide-active .bilgikutusuBanner {} .swiper-slide-active .bilgikutusuBanner span {animation:1s .1s backInUp both;} .swiper-slide-active .bilgikutusuBanner p {animation:3s .1s backInUp both;} #bannerim .swp-dots {display:none;} #bannerim .swp-nav {display:none;} @media only screen and (min-width:998px) and (max-width:1239px) { #bannerim .bannerimg img, #noBanner .bannerimg img {height:140px;} #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:120px;} #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:100px;} #bannerim .bilgikutusuBanner span, #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:25%;} /* 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;} /* anasayfa ürün tab */ /* ul.modulTabs li: .icAnaH ile (bkz asagida "ANA SAYFA" bolumu) ayni gorsel dili kullansin diye uyumlu hale getirildi - Oswald font, ayni font-size/weight/renk, kutu/arkaplan yerine ayni 5px siyah alt-cizgi vurgusu (sadece aktif sekmede - .icAnaH'da hep gorunen cizgiye karsilik gelir). */ ul.modulTabs {margin:0px 0px 20px 0px; padding:0px; list-style: none; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;} ul.modulTabs li {list-style:none; font-family:"Oswald", sans-serif; font-size:1.4rem; line-height:2; font-weight:400; letter-spacing:0; background: transparent; color: #333; padding: 0 .5rem; margin:0 1rem; cursor: pointer; border-bottom:5px solid transparent; text-align:center; transition:border-color .2s ease;} ul.modulTabs li.current {border-bottom:5px solid #000;} .modulTabs-content { position:relative; width:100%; display: none; border:none; padding:0;} .modulTabs-content.current { display: inherit; } @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { .boxAnaSayfKat1 {width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { .boxAnaSayfKat1 {width:50%;} .boxAnaSayfKat1 .capt span.title-capt a {padding:.5rem; line-height:1.5; font-size:1.2rem; font-weight:500;} ul.modulTabs li {width:100%; margin:0; } } /* .boxAnaSayfKat2: eskiden .capt p ve .btn.bg-white beyaz metin/beyaz zemin uzerinde GORUNMUYORDU (kart arkaplani hic tanimlanmamisti, sayfanin beyaz zeminine dusuyordu - ozet yazisi ve "DETAY" butonu fiilen görünmez haldeydi). Sitedeki kart diline (beyaz zemin, 14px radius, golge, hover kalkma, marka mavisi buton) tasindi. */ .boxAnaSayfKat2 {margin-bottom:32px; width:40%; padding:0 calc(var(--aralik) / 2); box-sizing:border-box; } /* alt kat. listeleme 3-4 sutun - kart (.content) bu padding icinde oturuyor, boylece yan yana duran kartlar arasinda aralik kadar bosluk olusuyor (once padding hic yoktu, kartlar birbirine yapisik/ust uste biniyormus gibi goruniyordu) */ .boxAnaSayfKat2 .content { display:flex; flex-wrap:wrap; align-items:stretch; background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.07); transition: box-shadow .25s ease, transform .25s ease;} .boxAnaSayfKat2:hover .content {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} .boxAnaSayfKat2 .sol {width:50%; background-color: #fff; padding:0 !important;} .boxAnaSayfKat2 img {transition: transform .35s ease;} .boxAnaSayfKat2:hover img {transform: scale(1.05);} .boxAnaSayfKat2 .capt {width:50%; padding:1.5rem; height: 100%; display:flex; flex-direction:column; justify-content:center;} .boxAnaSayfKat2 .capt span.title-capt {display:-webkit-box; padding:0; margin:0 0 .5rem 0; line-height:1.4; font-size:1.15rem; font-weight:700; color:#1a1a1a; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .boxAnaSayfKat2 .capt span.title-capt a {color:#1a1a1a; transition:color .2s ease;} .boxAnaSayfKat2:hover .capt span.title-capt a {color:#065598;} .boxAnaSayfKat2 .capt p {margin:0 0 1rem 0; line-height:1.5; letter-spacing:0; font-size:.9rem; color:#666; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;} .boxAnaSayfKat2 .capt .btn.bg-white {background:#065598; color:#fff; border:1px solid #065598; border-radius:999px; display:inline-block; padding:.5rem 1.1rem; font-size:.9rem; font-weight:600; transition:all .25s ease; align-self:flex-start;} .boxAnaSayfKat2 .capt .btn.bg-white:hover {background:#054579; border-color:#054579; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px);} @media only screen and (min-width:998px) and (max-width:1239px) { .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) { .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) { .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;} } /* swp1 - anasayfa modul */ /* .swp-secme, kutuphanenin kendi .swiper{overflow:hidden} kuralini tasiyor (carousel'in yatayda kaydirilan slaytlari disari tasmasin diye gerekli) - ama bu ayni zamanda kart iceriginin (border/box-shadow, hover'da translateY ile yukari kalkma) DIKEYDE tasan kismini da kesiyordu, cunku swiper autoHeight ozelligi .swiper-wrapper'i tam kart yuksekligine (fazladan bosluk olmadan) ayarliyor. Kart ustte/altta net gorunmuyordu (asd8.png) - kartin gölgesi/border'i ve hover kalkma efekti clip'leniyordu. Cozum: .swp-secme'ye dikey padding eklemek - overflow:hidden kirpma sinirini padding-box kenarina tasir, boylece gölge/kalkma payi icin bosluk acilir (.swp-nav butonlari bu elemanin kendi yuzde-50 dikey ortalamasina gore konumlandigi icin simetrik padding onlarin konumunu bozmaz). */ .swp-secme {padding:16px 0 20px;} .swp-secme .swp-nav {} .swp-secme .swp-nav button.swp-prev, .swp-secme .swp-nav button.swp-next {position:absolute; top:50%; margin-top:-1.25rem; font-size:1.3rem; width:2.5rem; height:2.5rem; line-height:2.5rem; color:#999; cursor:pointer; background:#fff; border:1px solid #e2e6ea; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.1); display:flex; align-items:center; justify-content:center; transition:all .2s ease; } .swp-secme .swp-nav button.swp-prev {left:.5rem;} .swp-secme .swp-nav button.swp-next {right:.5rem;} .swp-secme .swp-nav button.swp-prev:hover, .swp-secme .swp-nav button.swp-next:hover {color:#fff; background:#065598; border-color:#065598; box-shadow:0 6px 14px rgba(6,85,152,.25);} /* Sadece gerçek carousel modunda (.swp-secme.swiper): burada .boxUrn2 ayni zamanda .swiper-slide'dir ve genisligini Swiper kendi JS'i ile (slidesPerView'e gore) yonetir - o yuzden .col-3-12'nin %25 genisligini degil, kendi slide'inin tamamini (%100) kaplamasi gerekir. .swp-secme-statik (az urun varken swiper'a hic sarilmayan dusuk moddaki hal) bu kurala dahil DEGIL - orada .col-3-12'nin normal %25 genisligi gecerli kalmali, aksi halde kartlar satir yerine tam genislikte alt alta diziliyor. */ .swp-secme.swiper .boxUrn2, .swp-secme.swiper .boxSyf2 {width:100%;} /* .swp-secme-statik: urun sayisi slidesPerView'i (4) doldurmuyorsa PHP tarafinda (page-fonks.php, secmeUrnler()) Swiper'a hic sarilmiyor - bunun yerine sade, CSS ile ortalanmis bir satir olarak render ediliyor. Boylece Swiper'in loop:true + az-slaytla dogru boyutlanmama/ortalanmama sorunu (bkz "1 markam ve çok geniş" hatasi) JS'e hic gerek kalmadan cozuluyor. Bu eleman .modulTabs-content icinde normal bir blok (bir .grid'in DOGRUDAN flex-item'i degil), o yuzden width:auto + negatif margin (satirin kendi -yarim-aralik tasmasi) burada güvenli - col-X-12'lerin kendi padding'i satirin kenarlarinda dengeleniyor. */ .swp-secme-statik {display:flex; flex-wrap:wrap; justify-content:center; width:auto; margin-left:calc(var(--aralik) / -2); margin-right:calc(var(--aralik) / -2);} /* 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: 400; 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 #000; left:0; width:100%; } .anaBanner-kap { /*background:#d47f07 url("../img/anaBannerBG3.jpg") no-repeat center center; */ background:#eae2e7; padding:4px 0; color:#333; 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:#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; display:inline-flex; align-items:center; gap:.5rem; border:none; border-radius:999px; padding:.65rem 1.3rem; font-size:1rem; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.1); transition:all .25s ease;} .anaBanner .btn:hover {transform:translateY(-2px); color:#fff;} .anaBanner .btn.bg-green {background-color:#25d366;} .anaBanner .btn.bg-green:hover {background-color:#1eb958; box-shadow:0 6px 14px rgba(37,211,102,.3);} .anaBanner .btn.bg-blue {background-color:#065598;} .anaBanner .btn.bg-blue:hover {background-color:#054579; box-shadow:0 6px 14px rgba(6,85,152,.25);} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* Ü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:1239px) { } @media only screen and (min-width:600px) 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:599px) { 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:1.5rem; display:flex; flex-wrap:wrap; align-items:flex-start; background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); overflow:hidden; transition: box-shadow .25s ease, transform .25s ease;} /* alt kat listeleme 1 sutun*/ .boxUrnK1:hover {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} .boxUrnK1 .content {} .boxUrnK1 .sol .img-k, .boxUrnK1 .sol .img-k-Yatay, .boxUrnK1 .sol .img-k-Dikey {border-radius:10px; overflow:hidden;} .boxUrnK1 .sol .img-k img, .boxUrnK1 .sol .img-k-Yatay img, .boxUrnK1 .sol .img-k-Dikey img {transition: transform .35s ease;} .boxUrnK1:hover .sol img {transform: scale(1.05);} .boxUrnK1 .capt {margin-bottom: 1rem;} .boxUrnK1 .capt span.title-capt {color:#1a1a1a; margin:0; line-height:1.4; font-size:1.15rem; letter-spacing: .5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .boxUrnK1 .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxUrnK1:hover .capt span.title-capt a {color:#065598;} .boxUrnK1 .sol {} .boxUrnK1 .sag {padding:.5rem 0;} .boxUrnK2 {margin-bottom:1.5rem;} /* alt kat. listeleme 3-4 sutun*/ .boxUrnK2 .content {position:relative; border:1px solid rgba(0,0,0,.14); border-radius:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.07); transition: box-shadow .25s ease, transform .25s ease;} .boxUrnK2:hover .content {box-shadow:0 7px 15px rgba(0,0,0,.16); transform:translateY(-3px);} .boxUrnK2 .img-k img, .boxUrnK2 .img-k-Yatay img, .boxUrnK2 .img-k-Dikey img {transition: transform .35s ease;} .boxUrnK2:hover .img-k img, .boxUrnK2:hover .img-k-Yatay img, .boxUrnK2:hover .img-k-Dikey img {transform: scale(1.05);} .boxUrnK2 .capt {position:absolute; bottom:0; left:0; width:100%; padding:1rem .75rem .75rem; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%); transition: background .25s ease;} .boxUrnK2 .capt span.title-capt {text-align: center; color:#fff; padding:0; margin:0; line-height:1.3; font-size:.95rem; letter-spacing: .5px; font-weight:600; 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: linear-gradient(to top, rgba(6,85,152,.92) 0%, rgba(6,85,152,.5) 60%, rgba(6,85,152,0) 100%);} .boxUrnKButon { margin:0 .5rem 1rem 0; padding:0;} .boxUrnKButon a {background-color: #f4f6f8; color:#333; padding:.6rem 1.1rem; border-radius:999px; border:1px solid #e2e6ea; display:block; font-weight:500; transition:all .25s ease;} .boxUrnKButon a:hover {background-color: #065598; color:#fff; border-color:#065598; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-2px);} /*-> urunler */ .boxUrn1 {margin-top:.6rem; margin-bottom:.6rem; padding:1rem; border:1px solid rgba(0,0,0,.14); border-radius:14px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07); display:flex; flex-wrap:wrap; align-items:flex-start; transition: box-shadow .25s ease, transform .25s ease;} /* alt kat listeleme 1 sutun*/ .boxUrn1:hover {box-shadow:0 6px 13px rgba(0,0,0,.12); transform:translateY(-2px);} .boxUrn1 .content {} .boxUrn1 .sol .img-k, .boxUrn1 .sol .img-k-Yatay, .boxUrn1 .sol .img-k-Dikey {border-radius:10px; overflow:hidden;} .boxUrn1 .sol .img-k img, .boxUrn1 .sol .img-k-Yatay img, .boxUrn1 .sol .img-k-Dikey img {transition: transform .35s ease;} .boxUrn1:hover .sol img {transform: scale(1.05);} .boxUrn1 .capt {margin-bottom: .75rem;} .boxUrn1 .capt span.title-capt {color:#1a1a1a; margin:0; line-height:1.4; font-size:1.15rem; letter-spacing: .5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .boxUrn1 .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxUrn1:hover .capt span.title-capt a {color:#065598;} .boxUrn1 .fyt {width:100%; margin-bottom: .75rem;} .boxUrn1 .fyt span.fiyat {text-align: left; color:#065598; padding:0; margin:0; line-height:1.6; font-size:1.15rem; letter-spacing: 0; font-weight:700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn1 .fyt span.fiyattl {text-align: left; color:#065598; padding:0; margin:0; line-height:1.6; font-size:1.15rem; letter-spacing: 0; font-weight:700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn1 .ozt {margin-bottom: 1rem; color:#555;} .boxUrn1 .ozt ul {list-style: circle inside;} .boxUrn1 .ozt ul li {margin:0 10px 0 0; padding:0; font-size:.85rem; } .boxUrn1 .sol {} .boxUrn1 .sol .content {} .boxUrn1 .sag {} .boxUrn2 {margin-bottom:1.5rem; text-align:center;} /* alt ürün listeleme 3-4 sutun*/ /* .content: height:100% -> min-height:100% (aşağıda "min-height" olarak degistirildi). Eskiden sabit height:100% + .fyt'nin sabit height:2.4rem'i + line-clamp:1 birlesince, "Fiyat/Stok Sorunuz" gibi tek satira sigmayan bir metin GORUNMEZ sekilde kirpiliyor (Fiyat/Stok...), VE bazi genislik/satir kombinasyonlarinda buton satiri kartin sabit yuksekligini asip kenardan tasabiliyordu (asd9.png). Simdi .content min-height:100% (satir icindeki esit-yukseklik hizalamasi bozulmadan, ama gerekirse icerik kadar uzayabilir), .fyt sabit height yerine min-height, fiyat metni 2 satira kadar sarabiliyor (kisaltilmiyor), ve buton satiri sigmazsa alt satira sarabiliyor (flex-wrap) - kartin disina taşmiyor. */ .boxUrn2 .content {border:1px solid rgba(0,0,0,.14); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07); display:flex; flex-direction:column; min-height:100%; transition: box-shadow .25s ease, transform .25s ease;} .boxUrn2:hover .content {box-shadow:0 7px 15px rgba(0,0,0,.14); transform:translateY(-4px);} .boxUrn2 .img-k img, .boxUrn2 .img-k-Yatay img, .boxUrn2 .img-k-Dikey img {transition: transform .35s ease;} .boxUrn2:hover .img-k img, .boxUrn2:hover .img-k-Yatay img, .boxUrn2:hover .img-k-Dikey img {transform: scale(1.05);} .boxUrn2 .capt {width:100%; padding:.9rem .9rem .25rem; } .boxUrn2 .capt span.title-capt {height: 2.6rem; color:#1a1a1a; padding:0; margin:0; line-height:1.3; font-size:.95rem; letter-spacing: .3px; font-weight:600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn2 .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxUrn2:hover .capt span.title-capt a {color:#065598;} .boxUrn2 .fyt {width:100%; min-height:2.4rem; padding:.25rem .9rem .5rem;} .boxUrn2 .fyt span.fiyat {color:#065598; padding:0; margin:0; line-height:1.4; font-size:1.05rem; letter-spacing: 0; font-weight:700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxUrn2 .fyt span.fiyattl {color:#065598; padding:0; margin:0; line-height:1.4; font-size:1.05rem; letter-spacing: 0; font-weight:700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .uIndirim {position:absolute; top:10px; right:-5px; background-color: #e8483b; color:#fff; text-align:center; padding: 0 10px; line-height:28px; border-radius: 999px 0 0 999px; font-size: .75rem; font-weight:600; letter-spacing:.5px; overflow: hidden; box-shadow:0 2px 6px rgba(0,0,0,.15);} .uYeni {position:absolute; top:8px; left:8px; background-color: #065598; color:#fff; height:44px; width:44px; line-height:44px; text-align:center; border-radius: 50%; font-size: .7rem; font-weight:600; letter-spacing:.3px; overflow: hidden; box-shadow:0 2px 6px rgba(0,0,0,.15);} @media only screen and (min-width:998px) and (max-width:1239px) { } @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%;} /*-> 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:599px) { /*-> 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:#1a1a1a; font-weight:700; font-size:1.5rem; line-height:1.4; margin-bottom:1rem;} h1.icUrnH1 a {color:#1a1a1a;} .urnDetayStandart{padding-top:2rem} .urnDetayStandartSol{} .urnDetayStandartSag{} .urnDetayStandartSag .content{} .urnDetayStandartSag .markaAndKategori{background-color:#fff; width:100%;margin-bottom:16px;display:flex;align-items:center;justify-content:flex-start; border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:.6rem .9rem;} .urnDetayStandartSag .markaAndKategori p{margin:0 0 0 12px; color:#555;} .urnDetayStandartSag .markaAndKategori p a{color:#065598; font-weight:600; transition:color .2s ease;} .urnDetayStandartSag .markaAndKategori p a:hover{color:#054579; text-decoration:underline;} .urnDetayStandartSag .markaAndKategori .markaImg{position:relative;width:80px; padding-right:12px;border-right:1px solid #eee; text-align:center;overflow:hidden;} .urnDetayStandartSag .markaAndKategori .markaImg img{width:100%; padding-right:10px;} .urnDetayStandartSag .markaAndKategori .markaImg span{font-size:.9rem;position:absolute;top:0;left:0;z-index:-1} .urnDetayStandartSag .markaAndKategori .markaAdi{position:relative;width:80px;height:60px;background-color:#f4f6f8;border-radius:8px;display:flex;justify-content:center;align-items:center} .urnDetayStandartSag .markaAndKategori .markaAdi span{font-size:.85rem;color:#999;font-weight:600} .urnDetayStandartSag .urnOzet{text-align:justify;width:100%;font-size:.95rem;color:#555; margin-bottom:.5rem; } .urnDetayStandartSag .fyt{width:100%;margin:0 0 1rem 0} .urnDetayStandartSag .fyt span.fiyat{color:#065598;padding:0;margin:0;line-height:1.6;font-size:1.5rem;letter-spacing:0;font-weight:700;display:block} .urnDetayStandartSag .fyt span.fiyattl{color:#065598;padding:0;margin:0;line-height:1.6;font-size:1.6rem;letter-spacing:0;font-weight:700;display:block} .sIconKutu{margin-bottom:1rem; display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem;} /* indirimli - yeni vb. küçük resimler için */ .sIconKutu img{border:1px solid #eee;border-radius:8px;padding:3px;margin:0} .urnDetayStandartSag .urunBilgiButKap {display:flex; flex-wrap:wrap; align-items:center;margin-bottom:16px; gap:10px; } .urnDetayStandartSag .urunBilgiFormBut {background-color: #065598; color:#fff; display:flex; align-items:center; transition: all .25s ease; font-size:1rem; line-height:1.2; padding:.7rem 1.1rem; border-radius:12px; cursor: pointer; box-shadow:0 1px 4px rgba(0,0,0,.07); } .urnDetayStandartSag .urunBilgiFormBut:hover {background-color: #054579; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px);} .urnDetayStandartSag .urunBilgiWhatBut {background-color: #25d366; color:#fff; display:flex; align-items:center; transition: all .25s ease; font-size:1rem; line-height:1.2; padding:.7rem 1.1rem; border-radius:12px; cursor: pointer; box-shadow:0 1px 4px rgba(0,0,0,.07);} .urnDetayStandartSag .urunBilgiWhatBut:hover {background-color: #1eb958; box-shadow:0 6px 14px rgba(37,211,102,.3); transform:translateY(-1px);} .urnDetayStandartSag .urunBilgiFormBut i {margin-right:10px; font-size:2rem;} .urnDetayStandartSag .urunBilgiWhatBut i {margin-right:10px; font-size:1.5rem;} .urnDetayStandartSag .urunBilgiFormBut span, .urnDetayStandartSag .urunBilgiWhatBut span {text-align: left;} .urnDetayStandartSag .urunBilgiFormBut small, .urnDetayStandartSag .urunBilgiWhatBut small {text-align: left;} .urnDetayStandartSag .urunDahaFazlaBut {border:none; background-color: transparent; color:#065598; font-weight:600; margin-bottom:1rem; transition:color .2s ease; cursor:pointer;} .urnDetayStandartSag .urunDahaFazlaBut:hover {color:#054579; text-decoration:underline;} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { h1.icUrnH1 {font-size:1.4rem; margin-bottom:1rem;} } @media only screen and (min-width:0px) and (max-width:599px) { 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:1.5rem; display:flex; flex-wrap:wrap; align-items:flex-start; background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); overflow:hidden; transition: box-shadow .25s ease, transform .25s ease;} /* alt kat listeleme 1 sutun*/ .boxSyfK1:hover {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} .boxSyfK1 .content {} .boxSyfK1 .sol .img-k, .boxSyfK1 .sol .img-k-Yatay, .boxSyfK1 .sol .img-k-Dikey {border-radius:10px; overflow:hidden;} .boxSyfK1 .sol .img-k img, .boxSyfK1 .sol .img-k-Yatay img, .boxSyfK1 .sol .img-k-Dikey img {transition: transform .35s ease;} .boxSyfK1:hover .sol img {transform: scale(1.05);} .boxSyfK1 .capt {margin-bottom: 1rem;} .boxSyfK1 .capt span.title-capt {color:#1a1a1a; margin:0; line-height:1.4; font-size:1.15rem; letter-spacing: .5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .boxSyfK1 .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxSyfK1:hover .capt span.title-capt a {color:#065598;} .boxSyfK1 .sol {} .boxSyfK1 .sag {padding:.5rem 0;} .boxSyfK2 {margin-bottom:1.5rem;} /* alt kat. listeleme 3-4 sutun*/ .boxSyfK2 .content {position:relative; border:1px solid rgba(0,0,0,.14); border-radius:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.07); transition: box-shadow .25s ease, transform .25s ease;} .boxSyfK2:hover .content {box-shadow:0 7px 15px rgba(0,0,0,.16); transform:translateY(-3px);} .boxSyfK2 .img-k img, .boxSyfK2 .img-k-Yatay img, .boxSyfK2 .img-k-Dikey img {transition: transform .35s ease;} .boxSyfK2:hover .img-k img, .boxSyfK2:hover .img-k-Yatay img, .boxSyfK2:hover .img-k-Dikey img {transform: scale(1.05);} .boxSyfK2 .capt {position:absolute; bottom:0; left:0; width:100%; padding:1rem .75rem .75rem; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%); transition: background .25s ease;} .boxSyfK2 .capt span.title-capt {text-align: center; color:#fff; padding:0; margin:0; line-height:1.3; font-size:.95rem; letter-spacing: .5px; font-weight:600; 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: linear-gradient(to top, rgba(6,85,152,.92) 0%, rgba(6,85,152,.5) 60%, rgba(6,85,152,0) 100%);} /*-> alt sayfalar */ .boxSyf1 {margin-bottom:1.5rem; display:flex; flex-wrap:wrap; align-items:flex-start; background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); overflow:hidden; transition: box-shadow .25s ease, transform .25s ease;} /* alt kat listeleme 1 sutun*/ .boxSyf1:hover {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} .boxSyf1 .content {} .boxSyf1 .sol .img-k, .boxSyf1 .sol .img-k-Yatay, .boxSyf1 .sol .img-k-Dikey {border-radius:10px; overflow:hidden;} .boxSyf1 .sol .img-k img, .boxSyf1 .sol .img-k-Yatay img, .boxSyf1 .sol .img-k-Dikey img {transition: transform .35s ease;} .boxSyf1:hover .sol img {transform: scale(1.05);} .boxSyf1 .capt {margin-bottom: 1rem;} .boxSyf1 .capt span.title-capt {color:#1a1a1a; margin:0; line-height:1.4; font-size:1.15rem; letter-spacing: .5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .boxSyf1 .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxSyf1:hover .capt span.title-capt a {color:#065598;} .boxSyf1 .sol {} .boxSyf1 .sag {padding:.5rem 0;} .boxSyf2 {margin-bottom:1.5rem;} /* alt ürün listeleme 3-4 sutun*/ .boxSyf2 .content {border:1px solid rgba(0,0,0,.14); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07); transition: box-shadow .25s ease, transform .25s ease;} .boxSyf2:hover .content {box-shadow:0 7px 15px rgba(0,0,0,.14); transform:translateY(-4px);} .boxSyf2 .img-k img, .boxSyf2 .img-k-Yatay img, .boxSyf2 .img-k-Dikey img {transition: transform .35s ease;} .boxSyf2:hover .img-k img, .boxSyf2:hover .img-k-Yatay img, .boxSyf2:hover .img-k-Dikey img {transform: scale(1.05);} .boxSyf2 .capt {width:100%; padding:.9rem; } .boxSyf2 .capt span.title-capt {height: auto; text-align: left; color:#1a1a1a; margin:0; padding:0; line-height:1.3; font-size:.95rem; letter-spacing: .3px; font-weight:600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} .boxSyf2 .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxSyf2:hover .capt span.title-capt a {color:#065598;} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:600px) 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:599px) { /*-> 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;} } /* ARAMA SONUÇLARI (google tarzi tek sutun liste) -------------------------------------------------- Sayfa/urun/kategori farketmeksizin TUM arama sonucu turleri (urn, urnk, syf, syfK) ayni tek class'i (.boxAramaSonuc) kullanir: kucuk sabit-genislikte tanitim resmi solda, baslik + birkac satirlik ozet metni sagda - klasik arama motoru sonuc listesi gorunumu. */ .boxAramaSonuc {margin-bottom:1rem; display:flex; flex-wrap:nowrap; align-items:flex-start; gap:1rem; background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); padding:1rem; transition: box-shadow .25s ease, transform .25s ease;} .boxAramaSonuc:hover {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} .boxAramaSonuc .sol {width:160px; flex-shrink:0;} .boxAramaSonuc .sol .img-k, .boxAramaSonuc .sol .img-k-Yatay, .boxAramaSonuc .sol .img-k-Dikey {border-radius:10px; overflow:hidden;} .boxAramaSonuc .sol .img-k img, .boxAramaSonuc .sol .img-k-Yatay img, .boxAramaSonuc .sol .img-k-Dikey img {transition: transform .35s ease;} .boxAramaSonuc:hover .sol img {transform: scale(1.05);} .boxAramaSonuc .sag {flex:1; min-width:0;} .boxAramaSonuc .capt {margin-bottom:.4rem;} .boxAramaSonuc .capt span.title-capt {color:#1a1a1a; margin:0; line-height:1.4; font-size:1.15rem; letter-spacing:.5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .boxAramaSonuc .capt span.title-capt a {color:#1a1a1a; display:block; transition: color .2s ease;} .boxAramaSonuc:hover .capt span.title-capt a {color:#065598;} .boxAramaSonuc .ozet {margin:0; color:#555; font-size:.9rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} @media only screen and (min-width:0px) and (max-width:599px) { .boxAramaSonuc {gap:.75rem; padding:.75rem;} .boxAramaSonuc .sol {width:90px;} .boxAramaSonuc .capt span.title-capt {font-size:1rem;} .boxAramaSonuc .ozet {font-size:.85rem; -webkit-line-clamp:2;} } /* 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:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { h1.icSayfH1 {font-size:1.4rem; margin-bottom:1rem;} } @media only screen and (min-width:0px) and (max-width:599px) { h1.icSayfH1 {font-size:1.4rem; margin-bottom:1rem;} } /* ürün detay tab */ ul.urnTabs {width:100%; margin:24px 0 0 0; padding:0px; list-style: none; display: flex; justify-content: center; border-bottom:1px solid #eee; } ul.urnTabs li {list-style:none; font-size:1.05rem; font-weight:600; line-height:2; color: #888; padding:0 2rem; margin:0 0 -1px 0; cursor: pointer; border-bottom:3px solid transparent; text-align:center; transition:color .2s ease, border-color .2s ease;} ul.urnTabs li:hover {color:#065598;} ul.urnTabs li.current {color:#065598; border-bottom:3px solid #065598;} .urnTabs-content { position:relative; width:100%; display: none; border:none; padding:20px 0; } .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:12px; border: 1px solid #ddd; border-left:none; margin:10px 0px;} .urnTabs-content table thead tr { background-color:#eee; border-bottom: 1px solid #ddd; text-align: left;} .urnTabs-content table thead th { border-left: 1px solid #ddd; color:#000; padding:2px; font-weight: bold;} .urnTabs-content table tbody tr { background-color:#fff; border-bottom: 1px solid #ddd;} .urnTabs-content table tbody td { color:#414141; padding:5px; border-left: 1px solid #ddd;} @media only screen and (min-width:998px) and (max-width:1239px) { } @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İ GÖRÜNÜMLERİ BAŞLANGIÇ *********************************** */ /* #urnGaleri -> tablı + LİGHTBOX EFEKT*/ #urnGaleri {position:relative; margin:0 0 10px 0; padding:0px; 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; 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; width:100%; display:flex; flex-wrap:wrap; align-items:flex-start;} ul.gals li {position:relative; color:#222; 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:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* #urnGaleri2 -> ürün detay galerisi: küçük görsele tıklayınca büyük görsel değişir (bkz custom41.js .urnGaleriKucukLink click), büyük görsele tıklayınca fancybox açılır. Eski ".img-g" mutlak-konumlu ortalama tekniği yerine object-fit:contain kullanılıyor (sitedeki diğer .img-k gorseller ile tutarli). */ .urnGaleriYeni {width:100%;} .urnGaleriAnaKap {position:relative; width:100%; padding-top:100%; overflow:hidden; border-radius:14px; border:1px solid rgba(0,0,0,.14); background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07);} .urnGaleriAna {position:absolute; inset:0; display:block;} .urnGaleriAna img {width:100%; height:100%; object-fit:contain;} ul.gals2 {position:relative; margin:1rem 0 0 0; padding:0; list-style:none; width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; margin-left:calc(var(--aralik) / -2); margin-right:calc(var(--aralik) / -2);} ul.gals2 li.urnGaleriKucuk {width:33.33%; padding:calc(var(--aralik) / 2); box-sizing:border-box;} ul.gals2 .urnGaleriKucukLink {display:block; position:relative; cursor:pointer;} ul.gals2 .urnGaleriKucukLink .img-k {position:relative; width:100%; padding-top:100%; overflow:hidden; border-radius:10px; border:2px solid transparent; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07); transition: border-color .2s ease, box-shadow .2s ease;} ul.gals2 .urnGaleriKucukLink .img-k img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain;} ul.gals2 .urnGaleriKucukLink:hover .img-k {box-shadow:0 4px 10px rgba(0,0,0,.12);} ul.gals2 li.urnGaleriKucuk.current .img-k {border-color:#065598; box-shadow:0 4px 10px rgba(6,85,152,.2);} @media only screen and (min-width:600px) and (max-width:997px) { ul.gals2 li.urnGaleriKucuk {width:40%;} } @media only screen and (min-width:0px) and (max-width:599px) { ul.gals2 li.urnGaleriKucuk {width:50%;} } @media only screen and (min-width:998px) and (max-width:1239px) { } @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-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 .swp-nav {} #slaytGaleri .swp-nav button.swp-prev, #slaytGaleri .swp-nav button.swp-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 .swp-nav button.swp-prev {left:50px;} #slaytGaleri .swp-nav button.swp-next {right:50px;} #slaytGaleri .swp-nav button.swp-prev:hover, #slaytGaleri .swp-nav button.swp-next:hover {background:rgba(14,35,67,.8); color:#fff;} #slaytGaleri:hover .swp-nav button.swp-prev {opacity:0.8; left:10px;} #slaytGaleri:hover .swp-nav button.swp-next {opacity:0.8; right:10px;} @media only screen and (min-width:998px) and (max-width:1239px) { } @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 {height: 100%; max-height:400px; object-fit: contain;} #slaytGaleriFull .swp-nav {} #slaytGaleriFull .swp-nav button.swp-prev, #slaytGaleriFull .swp-nav button.swp-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 .swp-nav button.swp-prev {left:50px;} #slaytGaleriFull .swp-nav button.swp-next {right:50px;} #slaytGaleriFull .swp-nav button.swp-prev:hover, #slaytGaleriFull .swp-nav button.swp-next:hover {background:rgba(14,35,67,.8); color:#fff;} #slaytGaleriFull:hover .swp-nav button.swp-prev {opacity:0.8; left:10px;} #slaytGaleriFull:hover .swp-nav button.swp-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:600px) and (max-width:997px) { } @media only screen and (min-width:0px) and (max-width:599px) { } /* #sutunluGaleri - normal blok baglaminda bir satir (.content'in dogrudan cocugu, bir .grid'in flex-item'i DEGIL), o yuzden .grid'le ayni "width:auto + negatif margin" tekniği burada da guvenli (bkz. css45.css ust taraflardaki uzun aciklama). Onceden .galeri-oge'nin hic padding'i yoktu - gorseller birbirine yapisik duruyordu; simdi --aralik degiskeniyle hem yatayda hem dikeyde tekdüze bosluk var, ve her oge site genelindeki kart dilinde (beyaz zemin, 14px radius, hover'da golge+kalkma) modernize edildi. */ #sutunluGaleri {width:auto; margin-bottom:20px; display:flex; flex-wrap:wrap; align-items:flex-start; margin-left:calc(var(--aralik) / -2); margin-right:calc(var(--aralik) / -2);} #sutunluGaleri .galeri-oge {width:25%; padding:calc(var(--aralik) / 2);} #sutunluGaleri .galeri-oge .content {background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); padding:1rem; height:100%; transition: box-shadow .25s ease, transform .25s ease;} #sutunluGaleri .galeri-oge .content:hover {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} #sutunluGaleri .galeri-oge .oge-capt { width:100%; height: 3rem; margin:.5rem 0 0 0;} #sutunluGaleri .galeri-oge .oge-capt p {text-align:center; line-height:1.5rem; font-size:.9rem; font-weight:600; color:#1a1a1a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;} #sutunluGaleri .galeri-oge .img-k, #sutunluGaleri .galeri-oge .img-k-Yatay, #sutunluGaleri .galeri-oge .img-k-Dikey {border-radius:10px; overflow:hidden;} #sutunluGaleri .galeri-oge .img-k img, #sutunluGaleri .galeri-oge .img-k-Yatay img, #sutunluGaleri .galeri-oge .img-k-Dikey img {transition: transform .35s ease;} #sutunluGaleri .galeri-oge .content:hover img {transform: scale(1.05);} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { #sutunluGaleri .galeri-oge {width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { #sutunluGaleri .galeri-oge {width:50%;} } /* #referansgaleri (referanslar + temsilcilikler sayfalari, syfGorunum=6) - dis cerceve (%80 + %10/%10 ortalama) bilinçli bir tasarim, dokunulmadi; onceden .galeri-oge'de hic padding olmadigi icin logolar birbirine yapisikti - simdi --aralik ile bosluk var ve her oge site genelindeki kart diline (beyaz zemin, 14px radius, hover golge+kalkma) tasindi. "Web Sitesi" linki (.btn) genel/gri buton yerine marka mavisi pill stiline getirildi. */ #referansgaleri {width:80%; margin-left:10%; margin-right:10%; margin-bottom:20px; display:flex; flex-wrap:wrap; align-items:flex-start;} #referansgaleri .galeri-oge {width:33.3%; padding:calc(var(--aralik) / 2);} #referansgaleri .galeri-oge .content {background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); padding:1.25rem 1rem; text-align:center; height:100%; transition: box-shadow .25s ease, transform .25s ease;} #referansgaleri .galeri-oge .content:hover {box-shadow:0 7px 15px rgba(0,0,0,.12); transform:translateY(-3px);} #referansgaleri .galeri-oge .oge-capt { width:100%; height: 5rem; margin:.5rem 0 0 0;} #referansgaleri .galeri-oge .oge-capt p {text-align:center; line-height:1.5rem; font-size:.9rem; font-weight:600; color:#1a1a1a; 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%;} #referansgaleri .galeri-oge .oge-capt .btn {border:1px solid #065598; color:#065598; background:#fff; border-radius:999px; font-size:.85rem; font-weight:500; padding:.4rem 1.1rem; margin-top:.4rem; transition:all .25s ease;} #referansgaleri .galeri-oge .oge-capt .btn:hover {background:#065598; color:#fff; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px);} @media only screen and (min-width:998px) and (max-width:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { #referansgaleri .galeri-oge {width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { #referansgaleri .galeri-oge {width:80%; margin:0 10%; padding:calc(var(--aralik) / 2) 0;} } /* #kataloggaleri*/ #kataloggaleri {width:100%; margin-bottom:20px; display:flex; flex-wrap:wrap; align-items:flex-start;} #kataloggaleri .galeri-oge {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:1239px) { } @media only screen and (min-width:600px) and (max-width:997px) { #kataloggaleri .galeri-oge {width:50%;} } @media only screen and (min-width:0px) and (max-width:599px) { #kataloggaleri .galeri-oge {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%;} .swp-marka {margin-top:10px; margin-bottom:0; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .swp-marka .swp-nav {} .swp-marka .swp-nav button.swp-prev, .swp-marka .swp-nav button.swp-next {position:absolute; top:50%; margin-top:-1rem; font-size:1.2rem; width:2rem; height:2rem; line-height:2rem; color:#999; cursor:pointer; } .swp-marka .swp-nav button.swp-prev {left:-.5rem;} .swp-marka .swp-nav button.swp-next {right:-.5rem;} .swp-marka .swp-nav button.swp-prev:hover, .swp-marka .swp-nav button.swp-next:hover {color:#000;} .swp-marka .markaKutu {width:100%;} .swp-marka .cozumOrtakKutu {width:100%;} .swp-marka .refKutu {width:100%;} /* .swp-marka-statik: marka sayisi slidesPerView'i (6) doldurmuyorsa PHP tarafinda (page-fonks.php, markalar()) Swiper'a hic sarilmiyor - sade, CSS ile ortalanmis bir satir. Ayni ".swp-secme-statik" mantigi (bkz. yukarida) - JS'e dokunmadan, az sayida marka olan durumu CSS ile çözüyor. Buradaki .markaKutu, .swp-marka ile ortak class tasidigi icin bir ust satirdaki "width:100%" kuralini SPESIFIK olarak override etmesi gerekiyor (kendi sabit 240px genisligine donmesi icin - swiper-slide'a sarilan halinde oldugu gibi satirin tamamini doldurmasin, dogal genisliginde kalip ortalansin). */ .swp-marka-statik {display:flex; flex-wrap:wrap; justify-content:center; width:auto; margin-left:calc(var(--aralik) / -2); margin-right:calc(var(--aralik) / -2); box-sizing:border-box;} .swp-marka-statik .markaKutu {width:240px; max-width:100%;} /* etiketler */ .etiketlerKutu {position:relative; width:100%; display:flex; flex-wrap:wrap; align-items:flex-start;} .etiketlerKutu span {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:1239px) { .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:#333; font-size:.7rem; background-color: #f5f5f5;} p.gezgin a {color:#333;} /* 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 - #00559f yerine sitenin genelinde kullanilan marka mavisi #065598 kullanildi (renk tutarliligi); baslik altina modern bir vurgu cizgisi, menu linklerine hover'da kayma+renk gecisi, sosyal ikonlara camsi (yari-saydam beyaz) dinlenme durumu + dolu-beyaz hover eklendi - sitenin geri kalanindaki yuvarlatilmis/golgeli/hover-gecisli dile uyumlu hale getirildi. */ .footer-kap {background-color: #065598; padding:32px 0 16px 0; color:#eee; font-size: .9rem; line-height: 1.5;} .footer {/*background-color:rgba(255,255,255,1);*/ padding:32px 0;} .footer [class^="col-"] { margin-bottom: 1.5rem; } .footer a {color:#fff; transition:color .2s ease;} .footer p {color:#cfe0ef; font-size: .8rem; line-height: 1.6;} .footer p a:hover {color:#fff;} .footerLogo {width:160px; margin-top:0; margin-bottom:16px; /*border:2px solid #fff;*/ filter: brightness(0) invert(1); } .footer h3 {position:relative; color:#fff; margin-bottom:1.75rem; padding-bottom:.85rem; font-size:1rem; line-height:1.4; font-weight:600; letter-spacing: 1px;} .footer h3 a{color:#fff;} .footer h3::after {position:absolute; content:""; bottom:0; left:0; width:32px; height:3px; border-radius:999px; background:#fff;} .footermenu ul { margin:0px; padding:0; } .footermenu ul li {position:relative; background:none; margin:0; padding:0; list-style:none; width:100%; } .footermenu ul li:first-child {} .footermenu ul li:last-child {} .footermenu ul li a {padding:.35rem 0 .35rem 14px; margin:0; font-size: .8rem; line-height: 1.4; color:#cfe0ef; display:block; font-weight:400; transition:color .2s ease, transform .2s ease, padding-left .2s ease;} .footermenu ul li a:hover {color:#fff; text-decoration: none; padding-left:20px;} .footermenu ul li::before {position:absolute; content:"›"; top:.2rem; left:0; width:0; font-weight:700; color:#7fb1de; transition:color .2s ease;} .footermenu ul li:hover::before {color:#fff;} .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: .8rem; line-height: 1.2; color:#cfe0ef; font-weight:100;} ul.sosyal-link {list-style:none; margin:0 0 12px 0; padding:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem;} ul.sosyal-link li {position:relative; display:block; list-style:none; height:2.5rem; width:2.5rem; line-height:2.5rem; font-size:1.2rem; margin:0; padding:0; background:rgba(255,255,255,.12); color:#fff; text-align:center; transition:all 0.2s ease; border-radius:50%; } ul.sosyal-link li a {color:#fff; display:block; } ul.sosyal-link li a span {line-height:2.5rem; font-size:1.2rem; } ul.sosyal-link li:hover {background:#fff; transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.2);} ul.sosyal-link li:hover a {color:#065598;} .footeralt-kap {background-color:#04243d; padding:10px 0px; color:#cfe0ef; } .footeralt p {margin:0; color:#cfe0ef; font-size:.8rem; line-height:2;} .footeralt p a {color:#cfe0ef; transition:color .2s ease;} .footeralt p a:hover {color:#fff;} .footeralt p.avinga {position: absolute; right:0; top:0; color:#cfe0ef; font-weight:400;} .footeralt p.avinga a {color:#cfe0ef;} #yanBlok {} #yanBlok h4 {margin:0; padding:.9rem 1.1rem; color:#fff; background:#065598; border-radius:14px 14px 0 0; display:flex; justify-content:space-between; align-items:center; font-size:1rem; letter-spacing:.5px;} #yanBlok h4 a {color:#fff;} #yanMenuAc {display:none; color:#fff; font-size:1.1rem; cursor:pointer; transition:transform .2s ease;} #sagBlok {} @media only screen and (min-width:998px) and (max-width:1239px) { .footer {/*background-color:rgba(255,255,255,1);*/ padding:24px 0;} } @media only screen and (min-width:600px) and (max-width:997px) { #yanBlok {width:100%;} #yanMenuAc {display:block;} #yanBlok .mainNav {display:none;} #sagBlok {width:100%;} .footer {/*background-color:rgba(255,255,255,1);*/ padding:16px 0;} } @media only screen and (min-width:0px) and (max-width:599px) { #yanBlok {width:100%;} #yanMenuAc {display:block;} #yanBlok .mainNav {display:none;} #sagBlok {width:100%;} .footer {/*background-color:rgba(255,255,255,1);*/ padding:16px 0;} } /* ********************************** Nav Accordion Plugin v1.1.2 - modernize edildi: #yanBlok h4 (mavi baslik bar) ile ayni karti tamamlayan, alt koseleri yuvarlatilmis, hafif golgeli bir "liste karti" gorunumu. .aktif durumu artik marka mavisiyle vurgulaniyor (box-shadow:inset ile sol kenar cizgisi - padding degistirmedigi icin ic ice gecmis (2./3. seviye) menulerde de genislik hesaplarini bozmadan calisir). Accordion plugin'i buton konum/genislik/display'ini kendi JS'i icinde INLINE style olarak ayarliyor (bkz navAccordion.js) - o yuzden burada sadece renk/tipografi gibi inline'in dokunmadigi ozellikler degistirildi, position/width'e dokunulmadi. *********************************** */ .mainNav {background: #fff; width: 100%; border:1px solid #e2e6ea; border-top:none; border-radius:0 0 14px 14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.07); margin-bottom:1.5rem;} /* First Level */ .mainNav ul {margin: 0; padding: 0; list-style: none;} .mainNav ul li {border-top: 1px solid #f0f0f0; margin:0; padding:0;} .mainNav ul li:first-child {border-top: none;} .mainNav ul li a {color: #333; display: flex; align-items:center; gap:.6rem; font-size: .9rem; line-height: 1.5; padding: .75rem 1.1rem; text-decoration: none; transition:all .2s ease;} .mainNav ul li a:hover {color:#065598; background:#f4f8fc; text-decoration: none;} .mainNav ul li a > i {flex-shrink:0; width:1.2rem; font-size:1.1rem; color:#065598; text-align:center;} /* Second Level */ .mainNav ul ul {border-bottom: none;} .mainNav ul ul li {border-top: 1px solid #eef1f4; background: #f8f9fb;} .mainNav ul ul li a {color: #666; display: block; font-size: .8rem; line-height: 1.5; padding: .6rem 1.1rem .6rem 1.6rem;} .mainNav ul ul li a:hover {color:#065598; background:#eef4fa;} /* Third Level */ .mainNav ul ul ul {border-top:1px solid #eef1f4;} .mainNav ul ul ul li {border:none; background: #f1f3f5;} .mainNav ul ul ul li a {color: #888; font-size: .75rem; padding: .55rem 1.1rem .55rem 2.1rem;} .mainNav ul ul ul li a:hover {color:#065598; background:#e9f1f9;} /* Accordion Button - genislik/yukseklik/konum/display (none<->inline-block ile ac/kapa) navAccordion.js tarafindan INLINE style ile yonetiliyor - .accordion-btn'in KENDI display'ine dokunmak (ör. !important ile flex yapmak) JS'in "+"yi gizleyip "-"yi gosterme (ve tam tersi) mantigini bozar (ikisi ayni anda gorunur/kaybolmaz kalirdi). Bunun yerine glyph'i custom41.js'te ayri bir ile sarip, SADECE o ic span'i mutlak-konumla tam ortaliyoruz - disaridaki .accordion-btn'in display'i JS'e ait kalmaya devam ediyor. */ ul li.has-subnav .accordion-btn {position:relative; color:#065598; font-weight:700; font-size:1.1rem; background:#f4f8fc; transition: background .2s ease, color .2s ease;} ul li.has-subnav .accordion-btn:hover {background:#065598; color:#fff;} ul li.has-subnav .accBtnIcon {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); line-height:1;} .mainNav ul li a.aktif { font-weight: 600; color:#065598; background:#eaf2fa; box-shadow: inset 3px 0 0 #065598; } .boxUrn1 .urunHizliButonlar {position: relative;display:flex; flex-wrap:wrap; align-items:center; width: 100%; margin:0; padding: .3rem 0; gap:.5rem;} .boxUrn1 button.urunBilgiFormBut{border:1px solid #065598; background: #fff;font-weight:600;text-align:center;white-space:nowrap;vertical-align:middle; margin:0;padding:.5rem 1rem;font-size:.9rem;line-height:1.4;border-radius:999px;transition:all .25s ease;cursor:pointer;color:#065598;} .boxUrn1 button.urunBilgiFormBut:hover{background:#065598; color:#fff; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px);} .boxUrn1 .btn{border:1px solid #065598; background: #065598; font-weight:600;text-align:center;white-space:nowrap;vertical-align:middle; margin:0;padding:.5rem 1rem;font-size:.9rem;line-height:1.4;border-radius:999px; transition:all .25s ease;cursor:pointer;color:#fff;} .boxUrn2 .urunHizliButonlar {position: relative;display:flex; flex-wrap:wrap; align-items:center;justify-content:center; width: 100%; margin:0; padding: .3rem .9rem .9rem; gap:.4rem;} .boxUrn2 button.urunBilgiFormBut{border:1px solid #065598; background: #fff;font-weight:600;text-align:center;white-space:nowrap;vertical-align:middle; margin:0;padding:.4rem .7rem;font-size:.8rem;line-height:1.4;border-radius:999px; transition:all .25s ease;cursor:pointer;color:#065598;} .boxUrn2 button.urunBilgiFormBut:hover{background:#065598; color:#fff; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px);} .boxUrn2 .btn{border:1px solid #065598; background: #065598; font-weight:600;text-align:center;white-space:nowrap;vertical-align:middle; margin:0;padding:.4rem .7rem;font-size:.8rem;line-height:1.4;border-radius:999px; transition:all .25s ease;cursor:pointer;color:#fff;} .boxUrn1 .btn:hover,.boxUrn2 .btn:hover{background:#054579; border-color:#054579; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px);} /* -> whatsappAra ve telAra */ .customAra{position:fixed;right:0;color:#fff;z-index:2;border-radius:9999px 0 0 9999px;cursor:pointer;letter-spacing:-1px;overflow:hidden;width:3.5rem;transition:width 0.4s ease} .whatsappAra{background-color:#4caf50;bottom:80px} .telAra{background-color:#fd7e14;bottom:25px} .customAra a{display:flex;align-items:center;text-decoration:none;color:#fff;height:3rem;padding:0 1rem} .customAra i{font-size:1.8rem;line-height:3rem;min-width:1.8rem;text-align:center;animation:blink 1.5s infinite} .customAra span{font-size:1.2rem;line-height:3rem;margin-left:1rem;white-space:nowrap;opacity:0;transition:opacity 0.3s ease 0.1s} .customAra:hover{width:14rem} .customAra:hover span{opacity:1} /* Yanıp sönme animasyonu */ @keyframes blink{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.1;transform:scale(1.1)} } /* 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: #065598; text-decoration: underline; } .cookie-btn { background-color: #065598; color: #fff; border: none; padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: bold; white-space: nowrap; transition: all 0.25s ease; box-shadow:0 1px 4px rgba(0,0,0,.1); } .cookie-btn:hover { background-color: #054579; box-shadow:0 6px 14px rgba(6,85,152,.25); transform:translateY(-1px); } @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: #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-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;} .bg-primary {background-color: #065598;} .bg-secondary {background-color: #5177d6;} .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-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-primary {color: #065598} .color-secondary {color: #5177d6;} /* 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;}