:root {
	--bgrenk: #ffffff;
	--metinrenk : #444444;
	--renkbir: #0174a2;
	--renkbira: #0174a2d9;
	--renkiki: #74656a;
	--renkikia: #74656ad9;
	--renkuc: #0b2238;
	--renkuca: #0b2238d9;
	--sitefont: 'lato', sans-serif;
}
* {margin:0px; padding:0px; box-sizing:border-box;outline:none}
html,body{width:100%;min-height:100%;}
body{overflow-x:hidden;background-color:var(--bgrenk);font-family: 'lato', sans-serif; font-size:1em;font-size-adjust: 0.5;color:var(--metinrenk)}
::selection {color: var(--bgrenk);background: var(--metinrenk)}
::placeholder {color: var(--metinrenk);opacity: 1}
img {border:none;max-width:100%;height:auto;vertical-align:middle}
a {text-decoration:none;color:var(--renkbir)}
p {padding-bottom:7px;line-height:150%}
.gizli {display:none !important}
.renkbir{color:var(--renkbir) !important}
	.renkbirbg {background-color:var(--renkbir) !important}
.renkiki{color:var(--renkiki) !important}
	.renkikibg {background-color:var(--renkiki) !important}
.renkuc{color:var(--renkuc) !important}
	.renkucbg {background-color:var(--renkuc) !important}
.ufak{font-size:calc(1em - 0.2vw)}
.kucuk{font-size:calc(1em - 0.1vw)}
.buyuk{font-size:calc(1em + 0.4vw)}
.cokbuyuk{font-size:calc(1em + 0.7vw)}
#imgbekletme{display:none}
body.bekletme{pointer-events:none}
body.bekletme #anacerceve{opacity:0.7}
body.bekletme #imgbekletme{display: block;position: fixed;z-index: 1000;top: 50%;left: 50%;z-index:10000}
ul.none, ol.none{margin:0px;padding:0px;list-style-type:none}
ul,ol{margin-left:25px;padding-left: 25px}
.temizle {clear:both;}
.dskyok {display:none}
.hizala{margin-left:auto;margin-right:auto}
.ortala{text-align:center}
.soladayali{text-align:left !important}
.sagadayali{text-align:right !important}
.pad{padding:10px}
.nopad{padding:0px}
.mar{margin:10px}
.nomar{margin:0px}
.maxgenislik{width:100%;}
.tamgenislik{width:100%;max-width:1200px;margin:0 auto}
#mobilyanlogoalan{display:none;width:100%;text-align:center;margin:7px 0px;}
#logo a img{max-width:300px;height:auto}
#t_mobillogoalan{text-align:center}
#t_logoalan a{display:table;width:100%;}
.txtlogo {display:table-cell; vertical-align: middle;text-align:center;width:100%;height:100%;font-size:22px;font-size:calc(1em + 0.5vw)}
#t_mobillogoalan .txtlogo, #mobilyanlogoalan .txtlogo{font-size:30px;font-size:calc(1em + 1vw)}
#t_footer {}
#cpyr,#yapimcibilgisi{text-align:left;color:var(--renkbir)}
#cpyr{font-family:verdana;font-size:14px}
#yapimcibilgisi{text-align:right;}
#yapimcibilgisi a{color:var(--renkbir)}
#anatasiyici figure {position:relative}
#anatasiyici figure figcaption {position: absolute;bottom: 0.2vw;left: 0.2vw;background-color: #fff;padding: 1%;opacity: 0.5;font-size: 0.8em}
#aramaformu {display: inline-block;float: right;margin-top: 15px;position: relative}
#aramaformu input {border: #ccc 1px solid;padding: 5px;height:48px}
#aramaformu button {border: #ccc 1px solid;border-left: none;background: #f2f2f2;cursor: pointer;vertical-align: top;width: 48px;height: 48px;position: relative;left: -5px}
#aramaformu button span {font-family: monospace;font-size: 35px;line-height: 20px;transform: rotate(110deg);display: inline-block}
.saklimetin:not(.gosteriliyor) span:after {content: attr(data-before) attr(data-baglam) attr(data-after);display: none}
.saklimetin:hover span:nth-child(1) {display:none}
.saklimetin:not(.gosteriliyor):hover span:after {display: inline-block}
#formcaptcha {position:relative}
#formcaptcha input {font-size:0.8em}
#formcaptcha div {position:absolute;top:1px;right:1px;border:#000 1px solid}
#formcaptcha span#imgCaptcha {background-color: #f7c386;padding: 2px 10px;display: inline-block;font-weight: bold;letter-spacing: -6px;font-size: 22px;font-family: verdana;transition: all 0.5s}
#formcaptcha:hover span#imgCaptcha {letter-spacing:2px}
#t_iletisimformu input[type="text"], input[type="email"], textarea {background-color: rgba(247, 250, 253, 1);border: #ebebeb 1px solid;padding: 10px;margin-bottom: 10px;width: 100%;font-size: 1em;font-family: var(--sitefont)}
#t_iletisimformu input[type="submit"] {border: var(--renkbir) 1px solid;background-color: var(--renkbira);padding: 10px 20px;color: var(--bgrenk);font-family: var(--sitefont);font-size: 0.9em;cursor:pointer}
#t_sayfayolu {font-size:0.9em}
#t_sayfayolu div {display:inline;line-height:1em;vertical-align:middle}
#t_sayfayolu span {display: inline-block;margin-bottom: 7px;margin-right: 10px}
#t_sayfayolu span.t_anasayfa {font-size: 1.2em}
#t_sayfayolu div a span {max-width: 32%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
body:has(#resultsList) {height:100vh;overflow:hidden}/*
#0174A2
#74656A
#0B2238
*/
* {font-variant-numeric: lining-nums}
body {}
svg {vertical-align:middle}
h1,h2,h3 {margin:0;padding:0}
h1 {font-size:2.2em}
h2 {font-size:2em}
h3 {font-size:1.8em}
.anim, .animall * {-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s}
.butonlastir {display: inline-block;padding: 10px 20px;background-color:var(--renkbir);color:#fff;font-weight: 600;border-radius: 5px;box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2)}
.butonlastir:hover {background-color: var(--renkuc)}
.butonlastir2 {font-family: 'Roboto', sans-serif;font-size: 16px;color: white;background: linear-gradient(45deg, #0066cc, #00ccff);padding: 8px 16px;border-radius: 30px;display: inline-block;margin: 5px;text-decoration: none;transition: box-shadow 0.3s ease, transform 0.3s ease}
.butonlastir2:hover {box-shadow: 0px 4px 15px rgba(0, 102, 204, 0.4);transform: translateY(-3px)}
.aragenisalan {width: calc(100vw - 8px);position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw}
.marka {font-weight:bold;font-size:1.1em;letter-spacing:0.5px}
.marka span:nth-child(1) {color:var(--renkbir)}
.marka span:nth-child(2) {color:var(--renkiki)}
img.anim:hover {transform: scale(1.03)}
.ikilitbl {display:flex;flex-direction: row;flex-wrap: wrap;align-items: center}
#altalan .ikilitbl {align-items:flex-start}
.ikilitbl .sutun {flex-basis:50%;padding:10px}
#ustalan {background-color:#FFF;padding:10px 0;border-bottom:#e5e5e5 1px solid;box-shadow: 0 2px 5px rgba(16, 16, 16, .08)}
#ustalan .tamgenislik {display:flex;flex-direction: row;flex-wrap: wrap;align-items: center}
#logoalan {flex-basis:200px;max-height:65px}
#logoalan img {height:50px;width:auto}
#ustalan #logoalan {transition: all 0.5s ease}
#ustalan.sticky #logoalan {transform:scale(0.7)}
#ustmenualan {flex-basis:calc(100% - 330px);padding-right: 25px}
#ustsag {flex-basis:130px}
#ustmenualan ul:first-of-type {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end}
#ustmenualan li {margin: 7px 14px}
#ustmenualan li a {color:var(--renkuc);font-weight:500}
#ustmenualan li a:hover {color:var(--renkbir);}
#ustalan.sticky {position: fixed;z-index:10000;top: 0;left: 0;width: 100%;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);transform: translateY(-100%);animation: slideDown 0.5s forwards}
@keyframes slideDown {from {transform: translateY(-100%);}to {transform: translateY(0);}}
#urunleralan hgroup, #blogalan hgroup {text-align:center}
#urunleralan {padding:100px 0;position:relative;background-color:#f9fafa}
#urunleralan .gykkSlide-main {height:auto !important}
#urunleralan .gykkItem {margin-top:17px;border-radius:10px;overflow:hidden;transition: all 0.4s ease-in-out;border: #ddd 1px solid;}
#urunleralan .gykkItem:hover {margin-top:0;box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, 0.09);} 
#urunleralan .rackkabin {background-color:#fff}
#urunleralan .ugorsel {aspect-ratio: 16 / 9;align-items: center}
#urunleralan .ubaslik {background-color:#fff;position:relative;top:-17px;border-radius:10px;border-top:#ddd 1px solid;padding:15px 10px 0 10px;}
#urunleralan .ubaslik a {color: var(--renkuc);font-weight: 500;font-size: 1.2em;line-height: 1.3em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;letter-spacing: -1.5px}
#urunleralan .ubaslik a:hover {color:var(--renkbir)}
#urunleralan .umetin {font-size: 0.9em;line-height: 1.3em;margin: 0 10px 10px 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical}
#urunleralan .rackkabin a.devami {border: #dde1de 1px solid;border-radius: 10px;background-color: var(--renkbir);color: #fff;font-size: 0.8em;padding: 7px 14px;display: inline-block;margin: 5px;font-weight: 500}
#urunleralan .rackkabin a.devami:hover {background-color: var(--renkuc)}
#urunleralan .rackkabin .ulink {padding:0 10px 10px 0;text-align:right}
#urunleralan .gykkSlide-navs {position: absolute;top: -50px;left:0;right: 0}
#urunleralan .gykkSlide-navs .nav-button {transition:all 0.5s ease;font-size: 40px;background-color: #f0f0f0;width: 40px;height: 40px;border-radius: 100%;display: inline-block;text-align: center;line-height: 36px;margin: 0 5px}
#urunleralan .gykkSlide-navs .prev:hover, #urunleralan .gykkSlide-navs .next:hover {background-color:var(--renkbir);color:#fff}
#urunleralan .gykkSlide-navs .prev {position: absolute;left: calc(40% - 145px)}
#urunleralan .gykkSlide-navs .next {position: absolute;right: calc(40% - 145px)}
.dahalink {margin-top:40px;text-align:right}
#degerler .ikilitbl {align-items: flex-start}
#degerler .sutun.sag p:nth-child(2) {font-weight:600;font-size:1.1em}
#cozumortaklari {position: relative;padding:55px 0 135px 0;background-color:#f9fafa}
#cozumortaklari:after {content: " ";position: absolute;z-index: 10;bottom: -1px;display: block;width: 100%;height: 140px;background-image: url(https://patchpanel.com.tr/tasarim/img/dalgabg2.webp);background-position: top center;background-repeat: repeat-x;background-size: cover}
#cozumortaklari .gykkItem {transition:all 0.5s;padding: 10px;filter: grayscale(1);border: #e5e5e5 1px solid;border-radius: 15px;background-color: #fff}
#cozumortaklari .gykkItem:hover {filter: grayscale(0);transform:scale(1.2)}
@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}
#altalan {padding:50px 10px;background-color:#212529}
#altalan * {color:#ddd}
#yapimcibar {border-top:#333 1px solid;padding:15px 0}
#yapimcibar .tamgenislik {display: flex;flex-direction: row;justify-content: space-between}
#yapimcibar * {color:#A3B3B3}
#t_sayfayolu {width:100%;max-width:1200px;margin:0 auto;display: flex;align-items: center;padding: 10px;border-radius: 8px;justify-content: flex-start}
#t_sayfayolu svg {padding:1.5px;width:15px;height:15px;fill: #fff}
#t_sayfayolu div:first-child a {background-color: var(--renkuc);border-radius: 55px 0 0 55px;transition: transform 0.5s ease-in-out}
#t_sayfayolu div a {display: flex;max-width: 100px;white-space: nowrap;text-overflow: ellipsis;background-color: #015C84;color: white;padding: 10px;transition: max-width 1s ease}
#t_sayfayolu div:first-child a:hover svg {transform: scale(1.3)}
#t_sayfayolu div a:hover {max-width: 500px;transition: max-width 0.3s ease}
#t_sayfayolu span {margin: 0}
#t_sayfayolu div a span {max-width:500px}
#t_sayfayolu div:last-child a {max-width: 500px;border-radius: 0 55px 55px 0}
.marka {animation: glow 1.5s ease-in-out infinite;}
@keyframes glow {
  0% {
    text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff;
  }
  50% {
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
  }
  100% {
    text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff;
  }
}
@media (max-width: 960px) {
	.aragenisalan {width:100vw}
	.ikilitbl .sutun {min-width: 310px;flex-grow: 1}
	#ustsag {display:none}
	#ustmenualan {flex-grow: 1}
	#ustmenualan ul:first-of-type {justify-content: center}
    #t_sayfayolu {overflow-x: auto}
	#t_sayfayolu div a {padding:5px;font-size: 0.85em;max-width: unset}
}
@media (max-width: 820px) {
	.dahalink {text-align:center}
}
@media (max-width: 720px) {
	#ustalan .tamgenislik {flex-direction: column;font-size: 0.9em}
	#ustmenualan {padding-right: 0}
}
@media (max-width: 640px) {
	.aragenisalan {width:100vw}
	h1 {font-size:calc(1.5em + 1.5vw)}
	#logoalan {transform: scale(0.9);max-height: 50px}
	#degerler {text-align:center}
}
#cerezpolitikasi {text-align:center;transition: all 1.5s ease-in-out;position:fixed;z-index:9999;left:2%;bottom:2%;border-radius:10px;width:320px;background-color:#000000;background-color:rgb(0 0 0 / 75%);color:#ffffff;padding:1%;box-shadow: #000 0px 0px 10px 0px}
#cerezpolitikasi * {font-family:Helvetica;font-size:12px;line-height:15px;}
#cerezpolitikasi span.clspad{padding:4px}
#cerezpolitikasi.aktif{left:0}
#cerezpolitikasi.kapali{left:-310px}
#cerezpolitikasi.kapali #cerezgizlegoster{display: block;position: absolute;top: calc(50% - 20px);right: -13px;width: 40px;height: 40px;background-color: #000;color: #fff;font-size: 50px !important;border-radius: 100%;padding: 9px 0 0 4px;cursor: pointer}
#cerezpolitikasi.kapali:hover {left:0}
#cerezpolitikasi.kapali:hover #cerezgizlegoster {zoom:0.5}
#cerezpolitikasi .gizli {display:none}
#cerezgizlegoster{display:none}
#cerezkapat{cursor: pointer;color: #fff;background-color: #000;position: absolute;top: -10px;right: -10px;border: #fff 1px solid;padding: 4px 7px;border-radius: 100%}
#cerezozellestirdiv{transition: all 1.5s ease-in-out;height:1px;overflow:hidden;text-align:left;color:#000;background-color: #f0f0f0;border-radius: 10px;padding:0px;}
#cerezozellestirdiv input[type="checkbox"] {width:15px;height:15px}
#cerezozellestirdiv label {font-weight:bold}
#cerezozellestirdiv.aktif {height:340px;padding:15px}
#cerezozellestirdiv.kabul {height:1px;padding:0px}
#cerezpolitikasi .tus {transition:all 250ms;text-align:center;padding:5px;border-radius:3px;cursor:pointer;display:inline-block;min-width: 110px;border: #ccc 1px solid;color:#fff}
#cerezpolitikasi .tus:hover {box-shadow: #888 5px 5px 10px -5px;text-shadow: #000000 0px 0px 3px}
#cerezpolitikasi .notral {background-color: #804D0A}
#cerezpolitikasi .kabul {background-color: #008000}
#cerezpolitikasi .ret {background-color: #ff0000}
/* diğer sayfalar */
.cerezizinuyarisi {position:relative;display: block;width: 100%;height: 100%;border:orangered 1px dashed;background-color: #fff8f8;text-align: center;color: orangered;text-shadow: #818181 1px 1px 2px}
.cerezizinuyarisi:before {content:attr(data-before);display:block;padding:10px}
.cerezizinuyarisi:after {content:attr(data-after);font-weight:bold}
.cerezizinuyarisi .cerezizintusu {cursor: pointer;display: block;padding:10px}
.cerezizinuyarisi .cerezizintusu:before{display:block;content:attr(data-izin);}
.cerezizinuyarisi .cerezizintusu:after{display:block;content:attr(data-after);}
.cerezizinuyarisi:before, .cerezizinuyarisi .cerezizintusu, .cerezizinuyarisi:after{position: relative;top: 35%}
#cerezlerkabul.mod1 {padding:4px 15px;border-radius:5px;cursor:pointer}#tinymce {font-family: sans-serif;padding:50px 0;width: 100%;max-width: 1200px;margin: 0 auto}
#tinymce {display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;gap: 20px}
#tinymce h1, #tinymce h2, #tinymce h3, #tinymce h4, #tinymce h5, #tinymce h6 {color: var(--renkbir);font-weight: 300;font-size: 1.8em;margin:15px 0}
#tinymce h3, #tinymce h4, #tinymce h5, #tinymce h6 {color: var(--renkbir);font-weight: 300;font-size: 1.5em;margin:15px 0}
#tinymce .ikilitbl {align-items: flex-start}
#etiketler {border: #e5e5e5 1px solid;background-color: #f7f7f7;padding: 10px}
#etiketler .baslik {font-weight: 500;font-size: 1.3em;padding: 0 10px;color: var(--renkbir)}
a.etiket {font-family: 'Segoe UI', sans-serif;font-size: 15px;color: #333;background-color: #fff;padding: 6px 12px;border-radius: 50px;display: inline-block;margin: 5px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);text-decoration: none;transition: box-shadow 0.3s ease}
a.etiket:hover {box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);}
#hashtagler {margin-top:25px}
.hashtag {font-family: 'Helvetica Neue', sans-serif;font-size: 14px;letter-spacing:1px;user-select: none;color: #0073e6;border: 1px solid #0073e6;padding: 6px 10px;border-radius: 20px;display: inline-block;margin: 5px;text-decoration: none;transition: background-color 0.5s ease, color 0.3s ease;cursor: default}
.hashtag:hover {background-color: #0073e6;color: white}
#tinymce {display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;gap: 20px}
#tinymce .ualan {flex-basis: 420px;flex-grow: 1;padding: 15px;border-bottom: #ddd 1px solid}
#tinymce .ualan:has(table) {border-bottom:none}
#tinymce .ualan:nth-child(1) {flex-basis: 100%;border: none}
#tinymce .ualan ul, #tinymce .ualan ol {margin:0}
#tinymce .ualan li {padding:7px 0}
#tinymce .ualan table {display: flex;border: #ddd 1px solid;background-color: #f9fafa}
#tinymce .ualan table td, #tinymce .ualan table th {padding: 5px 10px;border-bottom: #ccc 1px dashed}
#tinymce .ualan table tr:last-child td, #tinymce .ualan table tr:last-child th {border-bottom: none !important}
#tinymce .ualan table td:nth-child(1), #tinymce .ualan table th {font-weight: 600;text-align: left;}
#tinymce .ualan table td:nth-child(2) {font-size: 0.9em;letter-spacing: 1px}
#tinymce .ualan dt {display: flex;justify-content: space-between;font-weight: bold;line-height: 1.5em;padding: 7px;border: #ccc 1px solid;border-bottom: none;background-color: #f9fafa;cursor: pointer}
#tinymce dt:after {content: "\002B";font-size: 1.5em;color: #626262;font-weight: normal;border: #e5e5e5 1px solid;border-radius: 100%;width: 25px;height: 25px;line-height: 25px;display: inline-block;text-align: center}
#tinymce .ualan dd {transition: all 0.5s ease-in-out;font-size:0.9em;margin-bottom: 25px;border: #ccc 1px solid;border-top: none;max-height:1px;overflow: hidden}
#tinymce .ualan dt:hover + dd, #tinymce .ualan dd:hover {max-height:100px;padding: 7px}
.dahaaksesuar {position: relative;
    display: inline-block;
    padding: 5px 25px 5px 10px;
    background-color: var(--renkbir);
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
.dahaaksesuar:hover {
    background-color: var(--renkuc);
}
.dahaaksesuar:after {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTN2MTBoLTIxdi0xOWgxMnYyaC0xMHYxNWgxN3YtOGgyem0zLTEyaC0xMC45ODhsNC4wMzUgNC02Ljk3NyA3LjA3IDIuODI4IDIuODI4IDYuOTc3LTcuMDcgNC4xMjUgNC4xNzJ2LTExeiIvPjwvc3ZnPg==);
    display: block;
    width: 24px;
    height: 24px;
    filter: invert(1);
    transform: scale(0.6);
    position: absolute;
    top: 1px;
    right: 0;
}
/* BLOG */
.bolmeli {display:flex;margin-top:20px}
.bolmeli .bsol, .bolmeli .bsag {}
.bolmeli .bsol {flex-basis:calc(100% - 300px);padding-right:20px}
.bolmeli .bsag {flex-basis:300px}
/* MODULER */
#icerik {padding:50px 10px}
#icerik h1, #icerik h2, #icerik h3, #icerik h4, #icerik h5, #icerik h6 {color: var(--renkbir);font-weight: 400;font-size: 1.8em;margin:15px 0}
#icerik h3, #icerik h4, #icerik h5, #icerik h6 {color: var(--renkbir);font-weight: 300;font-size: 1.5em;margin:15px 0}
#icerik .ikilitbl {align-items: flex-start}
.ustgorsel {position: relative;border-radius: 15px;overflow: hidden;background-color: var(--renkiki)}
.ustgorselmetin {background-color: var(--renkiki);color: #fff;position: absolute;bottom: 0;top: 0;right: 0;width: 47%;padding-right: 10px;text-align: right;font-size: calc(1.2em + 1.2vw);text-shadow: #000 1px 1px 1px;display: flex;flex-direction: column;justify-content: center;overflow:hidden}
.ustgorselmetin h1 {font-size: calc(0.7em + 0.7vw);font-weight: 400}
.ustgorselmetin span {display:block;font-size: calc(0.5em + 0.5vw)}
.ustgorsel figure {position:relative;aspect-ratio: 16 / 9;max-height: 360px;display: flex;justify-content: center;align-items: center;overflow: hidden;filter: brightness(0.5)}
.blogposting .ustgorsel figure {aspect-ratio: 1.91 / 1}
.ustgorsel figure img {width: 100%;height: auto;object-fit: cover;object-position: center}
#ustgorselyok {background-color: #e5f1f6;padding: 90px 0 55px 0;overflow: visible}
#etiketler {border: #e5e5e5 1px solid;background-color: #f7f7f7;padding: 10px}
#etiketler .baslik {font-weight: 500;font-size: 1.3em;padding: 0 10px;color: var(--renkbir)}
a.etiket {font-family: 'Segoe UI', sans-serif;font-size: 15px;color: #333;background-color: #fff;padding: 6px 12px;border-radius: 50px;display: inline-block;margin: 5px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);text-decoration: none;transition: box-shadow 0.3s ease}
a.etiket:hover {box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);}
#hashtagler {margin-top:25px}
#hashtagler.enustmenu3 .hashtag {font-family: 'Helvetica Neue', sans-serif;font-size: 14px;letter-spacing:1px;cursor: default;user-select: none;color: #0073e6;border: 1px solid #0073e6;padding: 6px 10px;border-radius: 20px;display: inline-block;margin: 5px;text-decoration: none;transition: background-color 0.5s ease, color 0.3s ease}
#hashtagler.enustmenu3 .hashtag:hover {background-color: #0073e6;color: white}
#hashtagler.enustmenu4 .hashtag {cursor:default;user-select:none;font-family: 'Roboto', sans-serif;font-size: 13px;color: white;background: linear-gradient(45deg, #0066cc, #00ccff);padding: 5px 10px;border-radius: 30px;display: inline-block;margin: 5px;text-decoration: none;transition: box-shadow 0.3s ease, transform 0.3s ease}
#hashtagler.enustmenu4 .hashtag:hover {box-shadow: 0px 4px 15px rgba(0, 102, 204, 0.4);transform: translateY(-3px)}
body.product #menusayfasi img {cursor:pointer}
.t_aramaformu {position: absolute;bottom: -25px;left: 0;right: 0;text-align: center}
.t_aramaformu {display: flex;justify-content: center;align-items: center}
.t_aramaformu #genelarama {display: flex;border: 2px solid #ddd;border-radius: 50px;overflow: hidden;background-color: white;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);max-width: 400px;width: 100%}
.t_aramaformu #aranacak {flex: 1;border: none;padding: 15px 20px;font-size: 16px;outline: none;border-radius: 50px 0 0 50px;background-color: transparent}
.t_aramaformu #aranacak::placeholder {color: #545454;font-style: italic}
.t_aramaformu .btn {background-color: var(--renkbir);border: none;color: white;cursor: pointer;padding: 0 10px;display: flex;align-items: center;justify-content: center;font-size: 20px;transition: background-color 0.3s;border-radius: 0 50px 50px 0}
.t_aramaformu .btn span {display:none}
.t_aramaformu .btn::before {content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-search" viewBox="0 0 16 16"%3E%3Cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001a1.007 1.007 0 0 0-.057.057l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.057-.057zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3E%3C/svg%3E');margin-right: 8px}
.t_aramaformu .btn:hover {background-color: var(--renkuc)}
.t_aramaformu #aranacak:focus {background-color: #f9fafa}
/* ÜRÜN SAYFA */
#icerik {display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;gap: 20px}
#icerik .ualan {flex-basis: 420px;flex-grow: 1;padding: 15px;border-bottom: #ddd 1px solid}
#icerik .ualan:has(table) {border-bottom:none}
#icerik .ualan:nth-child(1) {flex-basis: 100%;border: none}
#icerik .ualan ul, #icerik .ualan ol {margin:0}
#icerik .ualan li {padding:7px 0}
#icerik .ualan table {display: flex;border: #ddd 1px solid;background-color: #f9fafa}
#icerik .ualan table td, #icerik .ualan table th {padding: 5px 10px;border-bottom: #ccc 1px dashed}
#icerik .ualan table tr:last-child td, #icerik .ualan table tr:last-child th {border-bottom: none !important}
#icerik .ualan table td:nth-child(1), #icerik .ualan table th {font-weight: 600;text-align: left;}
#icerik .ualan table td:nth-child(2) {font-size: 0.9em;letter-spacing: 1px}
#icerik .ualan dt {display: flex;justify-content: space-between;font-weight: bold;line-height: 1.5em;padding: 7px;border: #ccc 1px solid;border-bottom: none;background-color: #f9fafa;cursor: pointer}
#icerik .ualan dt:after {content: "\002B";font-size: 1.5em;color: #626262;font-weight: normal;border: #e5e5e5 1px solid;border-radius: 100%;width: 25px;height: 25px;line-height: 25px;display: inline-block;text-align: center}
#icerik .ualan dd {transition: all 0.5s ease-in-out;font-size:0.9em;margin-bottom: 25px;border: #ccc 1px solid;border-top: none;max-height:1px;overflow: hidden}
#icerik .ualan dt:hover + dd, #icerik .ualan dd:hover {max-height:100px;padding: 7px}
.yenipencerebtn {position: relative;display: inline-block;padding: 5px 25px 5px 10px;background-color: var(--renkbir);color: #fff;font-weight: 600;border-radius: 5px;box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s}
.yenipencerebtn:hover {background-color: var(--renkuc)}
.yenipencerebtn:after {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTN2MTBoLTIxdi0xOWgxMnYyaC0xMHYxNWgxN3YtOGgyem0zLTEyaC0xMC45ODhsNC4wMzUgNC02Ljk3NyA3LjA3IDIuODI4IDIuODI4IDYuOTc3LTcuMDcgNC4xMjUgNC4xNzJ2LTExeiIvPjwvc3ZnPg==);
	display: block;width: 24px;height: 24px;filter: invert(1);transform: scale(0.6);position: absolute;top: 1px;right: 0}
/* BLOG */
.bolmeli {display:flex;margin-top:20px}
.bolmeli .bsol, .bolmeli .bsag {}
.bolmeli .bsol {flex-basis:calc(100% - 300px);padding-right:20px}
.bolmeli .bsag {flex-basis:300px;padding-top:50px}
#altmenuler {padding-bottom:50px}
#altmenuler ul {display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;justify-content: center}
#altmenuler ul li {flex-basis: calc(33.33% - 20px);min-width: 260px;flex-grow: 1;max-width: 640px;display:flex;flex-direction: column;justify-content: space-between;margin: 7px 10px;border-radius: 10px;overflow: hidden;transition: all 0.4s ease-in-out;border: #ddd 1px solid}
#altmenuler .altmenugorsel {aspect-ratio: 16 / 9;display: inline-flex;align-items: center;filter: brightness(0.8);transition: all 0.5s ease}
.menu4 #altmenuler .altmenugorsel {aspect-ratio: 1.91 / 1}
#altmenuler .altmenugorsel.gorselyok {display: none}
#altmenuler ul li:hover .altmenugorsel {filter: brightness(1);}
#altmenuler .altmenubaslik {background-color: #fff;position: relative;top: -17px;border-radius: 10px;border-top: #ddd 1px solid;padding: 15px 10px 0 10px}
#altmenuler:has(.gorselyok) .altmenubaslik {top:-5px}
#altmenuler ul li:hover .altmenubaslik a {color:var(--renkbir)}
#altmenuler .altmenubaslik a {transition: color 0.5s ease;color: var(--renkuc);font-weight: 500;font-size: 1.2em;line-height: 1.3em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;letter-spacing: -1.5px}
#altmenuler .altmenuicerik {font-size: 0.95em;line-height: 1.6em;margin: 0 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical}
#altmenuler .altmenulink:before {content: attr(aria-label)}
#altmenuler .altmenulink {text-align: right;border: #dde1de 1px solid;border-radius: 10px;background-color: var(--renkbir);color: #fff;font-size: 0.8em;padding: 7px 14px;display: inline-block;margin: 5px;font-weight: 500;width: calc(100% - 10px)}
#formcaptcha {position:relative}
#formcaptcha input {font-size:0.8em}
#formcaptcha div {position:absolute;top:4px;right:1px;border:#000 1px solid}
#hizliform {width:95%;max-width:640px;margin:0 auto;text-align:center}
#hizliform input[type="text"], input[type="email"], textarea {background-color: #f9fafa;border: #ebebeb 1px solid;padding: 10px;margin-bottom: 10px;width: 100%;font-size: 1em;font-family: var(--sitefont);border-radius: 10px;}
#hizliform input[type="submit"] {width:100%;border:none}
#hizliform .iformonay {text-align: left;padding: 15px 0}
#hizliform .ikilitbl .sutun {padding:0;flex-basis: calc(50% - 20px);margin: 10px}
.iformadsoyad, .iformmesaj, #formcaptcha {padding: 0 10px}
.iformadsoyad, .iformeposta, .iformtelefon, .iformmesaj, #formcaptcha {position:relative}
.floating-placeholder {position: absolute;left: 20px;top: 20px;transform: translateY(-50%);color: #545454;font-size: 0.95em;pointer-events: none;transition: 0.5s ease all}
form div input:focus + .floating-placeholder, 
form div input:not(:placeholder-shown) + .floating-placeholder, 
form div textarea:focus + .floating-placeholder, 
form div textarea:valid + .floating-placeholder 
{top: -1px;font-size: 0.85em;color: #444;;opacity:1}
form div select .floating-placeholder {opacity:0}
body:has(.modal.show) {overflow:hidden}
.modal{position:fixed;z-index:10001;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.6s,visibility 0.6s}.show{opacity:1;visibility:visible}.modal-content{max-width:80%;max-height:80%;transform:scale(0.8);transition:transform 0.4s}.show .modal-content{transform:scale(1)}.close{position:absolute;top:10px;right:20px;color:white;font-size:30px;font-weight:bold;cursor:pointer}
.modal.show img {mix-blend-mode: luminosity;filter: grayscale(1);border-radius: 40px;border: #fff 4px solid}
@media (min-width: 720px) {
	#ustgorselyok:before {content: " ";position: absolute;z-index: 10;top: 0;display: block;width: 100%;height: 160px;background-image: url(https://patchpanel.com.tr/tasarim/img/dalgabg2.webp);background-position: top center;background-repeat: repeat-x;background-size: cover;transform: rotate(180deg);opacity: 0.5}
}
@media (max-width: 840px) {
	.bolmeli .bsol {flex-grow:1}
	.bolmeli .bsag {flex-basis:140px;text-align:center}
}
@media (max-width: 720px) {
	.bolmeli {flex-direction: column}
	.bolmeli .bsol {padding-right:0}
}
@media (max-width: 640px) {
	#ustgorselyok {padding: 45px 0 35px 0}
    .t_aramaformu {bottom:-20px}
    .t_aramaformu #aranacak {padding:10px 20px}
	.ustgorselmetin {display: block;position: relative;width: 100%;text-align: center;padding: 15px 0}
}
@media (max-width: 480px) {
	#formcaptcha {padding-bottom: 45px}
	#formcaptcha div {top:45px;right: 15px;border: none}
}
/* animasyon mobilde yok */
.kutular {display:none}
@media (min-width: 900px) {
.kutular{display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden}
.kutular li{position: absolute;display: block;list-style: none;width: 20px;height: 20px;background: rgba(255, 255, 255, 0.2);animation: kutuanim 25s linear infinite;bottom: -150px}
.kutular li:nth-child(1){left: 20%;width: 40px;height: 40px;animation-delay: 6s}
.kutular li:nth-child(2){left: 45%;width: 60px;height: 60px;animation-delay: 4s}
.kutular li:nth-child(3){left: 75%;width: 110px;height: 110px;animation-delay: 2s}
.kutular li:nth-child(4){left: 55%;width: 150px;height: 150px;animation-delay: 0s}
.kutular li:nth-child(5){left: 85%;width: 150px;height: 150px;animation-delay: 16s;animation-duration: 21s}
@keyframes kutuanim {0%{transform: translateY(0) rotate(0deg);opacity: 1;border-radius: 0;}100%{transform: translateY(-1000px) rotate(720deg);opacity: 0;border-radius: 50%;}}
}