/* Biomicro shared visual theme: use on every future page */
:root{--bio-bg:#0b1020;--bio-panel:#101a30;--bio-panel-raised:#131f38;--bio-ink:#f2f6ff;--bio-muted:#9eabc4;--bio-line:#293854;--bio-blue:#4ea1ff;--bio-cyan:#5ce1e6;--bio-pink:#e60070}
body{background:radial-gradient(ellipse at 80% 4%,#142b4c 0,transparent 34%),var(--bio-bg);color:var(--bio-ink)}
.vport-page{background:transparent;color:var(--bio-ink)}.vport-detail{color:var(--bio-ink)}.vport-detail .eyebrow{color:var(--bio-cyan)}.detail-head p{color:var(--bio-muted)}
.detail-layout{background:linear-gradient(145deg,var(--bio-panel-raised),var(--bio-panel));border-color:var(--bio-line);box-shadow:0 20px 55px #0003}.detail-product{background:radial-gradient(ellipse,#203d5c 0%,#13243a 57%,#0c1525 100%);border:1px solid #304768}.detail-product img{filter:drop-shadow(0 20px 22px #0008)}.detail-content h2{color:var(--bio-ink)}.detail-content>p{color:var(--bio-muted)}
.detail-specs div{background:#0c1628;border-left-color:var(--bio-pink)}.detail-specs b{color:#e8f0fb}.detail-specs span{color:var(--bio-muted)}.size-table{border-color:var(--bio-line)}.size-row{background:#0d1729;border-top-color:var(--bio-line);color:#c2cde0}.size-header{background:#1a2a43;color:#f2f6ff}.detail-contact{color:var(--bio-blue)}.detail-contact:hover{color:var(--bio-cyan)}.back-home{color:var(--bio-blue)}.back-home:hover{color:var(--bio-cyan)}
/* Keep the supplied Biomicro navigation consistent across pages. */
.site-head{background:#f4f5f7;color:#28364a}.topline{background:#344765;color:#fff}.product-nav{background:#eef0f3;color:#263953}

/* Keep the full V-PORT cutout inside its frame at every viewport size. */
.detail-product{min-width:0;min-height:420px;aspect-ratio:1/1;padding:16px}.detail-product img{display:block;width:380px;height:380px;max-width:100%;max-height:100%;padding:16px;object-fit:contain;box-sizing:border-box}.detail-product{overflow:hidden}
@media(max-width:800px){.detail-product{min-height:320px;padding:12px}.detail-product img{width:290px;height:290px;padding:14px}}
@media(max-width:450px){.detail-product{min-height:280px;padding:10px}.detail-product img{width:260px;height:260px;padding:12px}}


/* Responsive layout baseline for desktop, tablets, Android and iPhone */
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{width:100%;min-width:320px;overflow-x:hidden}.wrap{width:100%;max-width:1200px;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}img,svg,video{max-width:100%}button,a,input{touch-action:manipulation}button,.btn,.navbtn,.quote-list{min-height:44px}.searchbox button{min-width:44px}.product-nav{max-width:100%;overflow:hidden}.product-nav .nav-inner{width:100%;max-width:none;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#7587a1 #e7eaf0}.product-nav .nav-inner::-webkit-scrollbar{height:4px}.product-nav .nav-inner::-webkit-scrollbar-thumb{background:#7587a1;border-radius:8px}.nav-item{flex:0 0 auto}.all-products{flex:0 0 auto}.top-in{max-width:100%}.top-in>div{flex-wrap:wrap}.mainbar{min-width:0}.searchbox{min-width:0}.detail-layout{min-width:0}.detail-product{min-width:0}.detail-content{min-width:0}.detail-specs>div{min-width:0;overflow-wrap:anywhere}.size-table{width:100%;max-width:100%}.size-row{min-width:0;grid-template-columns:1fr 1fr 1fr}.size-row>*{min-width:0;overflow-wrap:anywhere}.tile,.feature,.contact{min-width:0}.foot{display:flex;flex-wrap:wrap;gap:8px 18px}
@media(max-width:1100px){.mainbar{height:auto;min-height:73px;flex-wrap:wrap;gap:10px 14px;padding-top:10px;padding-bottom:10px}.mainbar .brand{flex:0 0 auto;min-width:190px}.mainbar .searchbox{flex:1 1 260px;max-width:none}.mainbar .quick{display:none}.quote-list{flex:0 0 auto}.product-nav .nav-inner{justify-content:flex-start}}
@media(max-width:800px){.hero.slider>.slides{height:410px;min-height:410px}.banner-copy{padding:30px clamp(20px,5vw,32px)}.banner-copy h1{font-size:clamp(34px,7vw,54px);letter-spacing:-1.8px}.banner-copy p{font-size:15px;max-width:95%}.slider-controls{padding-left:20px;padding-right:20px}.vport-slide .banner-copy{width:100%;max-width:100%;margin:0;padding:30px clamp(20px,5vw,32px)}.detail-intro{max-width:none}.detail-layout{gap:22px}.detail-product{aspect-ratio:auto;width:100%}.detail-content{width:100%}.detail-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.sectionhead p{max-width:none}.brands{justify-content:flex-start}.contact{gap:20px}.top-in{padding-left:16px;padding-right:16px}}
@media(max-width:650px){.topline{height:auto}.top-in{min-height:36px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding-top:2px;padding-bottom:2px}.top-in>div{width:100%;justify-content:center;gap:10px}.top-in>div:last-child{margin-left:0}.top-in .pink{padding:7px 9px}.mainbar{padding:10px 16px;gap:8px 12px}.mainbar .brand{min-width:0;flex:1 1 auto}.logo-word{font-size:clamp(24px,7vw,30px)}.mainbar .quote-list{font-size:10px;padding:7px 9px}.mainbar .searchbox{order:3;flex:1 0 100%;height:42px}.nav-inner{height:46px}.hero.slider>.slides{height:390px;min-height:390px}.hero.slider{padding-bottom:14px}.banner-copy h1{font-size:clamp(32px,8vw,43px);line-height:1.04}.banner-copy p{font-size:14px}.banner-copy .btn{margin-top:10px}.slider-arrows{gap:7px}.detail-head h1{font-size:clamp(27px,7vw,34px)}.detail-layout{padding:18px;grid-template-columns:minmax(0,1fr)}.detail-intro{grid-column:1}.detail-product{min-height:300px;aspect-ratio:1/1}.detail-content{grid-column:1}.detail-specs{grid-template-columns:1fr 1fr}.size-row{padding:9px 8px;font-size:11px}.foot{font-size:10px}.contact{display:block;padding:24px}.contact .btn{display:inline-block;margin-top:10px}}
@media(max-width:430px){.top-in>div{gap:5px;font-size:10px}.top-in .pink{padding:7px 6px}.mainbar .quote-list{max-width:118px}.quote-list span{white-space:normal}.hero.slider>.slides{height:380px;min-height:380px}.banner-copy{padding:24px 18px}.banner-copy h1{font-size:clamp(30px,8.8vw,38px);letter-spacing:-1.3px}.banner-copy p{font-size:13px;line-height:1.5}.banner-copy .eyebrow{font-size:9px;letter-spacing:1.3px}.slider-arrows{display:none}.dots{gap:7px}.hero.slider .dot{width:9px;height:9px}.hero.slider .dot.active{width:9px}.detail-layout{padding:14px;gap:17px}.detail-intro h2{font-size:19px}.detail-intro p{font-size:13px;line-height:1.65}.detail-product{min-height:265px}.detail-product img{width:250px;height:250px;padding:10px}.detail-specs{grid-template-columns:1fr}.size-row{font-size:10px}.detail-head{margin-bottom:16px}.detail-head .btn{font-size:12px;padding:11px 14px}.vport-page{padding-top:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Align the category submenu start with the Biomicro logo across all pages. */
.product-nav .nav-inner{width:100%;max-width:1200px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px);justify-content:flex-start;box-sizing:border-box}
@media(max-width:1100px){.product-nav .nav-inner{max-width:100%;margin:0 auto}}


/* Align the top utility links with the logo and product navigation. */
.topline .top-in{width:100%;max-width:1200px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px);box-sizing:border-box;justify-content:space-between}
@media(max-width:650px){.topline .top-in{max-width:100%;padding-left:16px;padding-right:16px}}


/* Slider pagination: visible circular indicators with accessible tap targets. */
.hero.slider .slider-controls{position:relative;display:flex;align-items:center;justify-content:center;min-height:60px;margin:0 auto;padding:8px clamp(16px,3vw,32px);border:0}.hero.slider .dots{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 auto}.hero.slider .dot{appearance:none;-webkit-appearance:none;position:relative;display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;opacity:1;cursor:pointer}.hero.slider .dot:before{content:"";display:block;width:9px;height:9px;border-radius:99px;background:#91a2ba;transition:width .22s ease,background-color .22s ease,transform .22s ease,box-shadow .22s ease}.hero.slider .dot:hover:before{background:#e8f4ff;transform:scale(1.2)}.hero.slider .dot.active:before{width:25px;height:9px;background:#e60070;box-shadow:0 0 0 3px #e6007040,0 0 14px #e6007060}.hero.slider .dot:focus-visible{outline:2px solid #5ce1e6;outline-offset:0}.hero.slider .slider-arrows{position:absolute;right:clamp(16px,3vw,32px);top:50%;transform:translateY(-50%)}
@media(max-width:650px){.hero.slider .slider-controls{min-height:54px;padding:6px 12px}.hero.slider .slider-arrows{display:none}.hero.slider .dots{gap:2px}.hero.slider .dot{width:34px;height:34px;min-width:34px;min-height:34px}}

.site-head{position:sticky;top:0;z-index:1000;box-shadow:0 5px 18px #06101f22}



/* Keep the full Biomicro header visible while browsing long subpages. */
.site-head{position:sticky;top:0;z-index:1000;box-shadow:0 5px 18px #06101f22}


/* One consistent real logo size across home and all product pages. */
.site-head .brand{width:1140px;min-width:1140px;height:184px;flex:0 0 1140px;display:flex;align-items:center;gap:0}
.site-head .brand-logo-image{display:block;width:1140px;height:184px;max-width:100%;object-fit:contain;object-position:left center}
@media(max-width:1100px){.site-head .brand{width:1140px;min-width:1140px;height:184px;flex-basis:1140px}.site-head .brand-logo-image{width:1140px;height:184px}}
@media(max-width:650px){.site-head .brand{width:1140px;min-width:0;height:184px;flex:0 1 1140px}.site-head .brand-logo-image{width:1140px;height:184px;max-width:100%}}



/* Align the logo with the left edge of the top "Sertifikalar" link. */
.site-head .mainbar{max-width:1200px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}
.site-head .brand{margin-left:0}

/* Align the logo with the utility links shown on the reference header. */
.site-head .mainbar{width:100%;max-width:1200px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px);box-sizing:border-box}
.site-head .brand{margin:0}

/* Match the live site content rails marked in the supplied reference. */
.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{width:100%;max-width:1260px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.site-head .top-in{padding-left:0;padding-right:0}
.site-head .mainbar{padding-left:0;padding-right:0}
.site-head .nav-inner{padding-left:0;padding-right:0}
@media(max-width:1320px){.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{max-width:calc(100% - 32px)}}
@media(max-width:650px){.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{max-width:calc(100% - 24px)}.site-head .top-in{padding-left:0;padding-right:0}.site-head .mainbar{padding-left:0;padding-right:0}}

/* Match the live Biomicro header alignment from the supplied reference. */
.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{width:100%;max-width:1236px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;box-sizing:border-box}
.site-head .top-in{justify-content:space-between}
.site-head .mainbar{height:73px;min-height:73px;display:flex;align-items:center;flex-wrap:nowrap;gap:20px;padding-top:0;padding-bottom:0}
.site-head .brand{position:relative;display:block;overflow:hidden;width:300px;min-width:300px;height:73px;flex:0 0 300px;margin:0;padding-left:4px;box-sizing:border-box}
.site-head .brand-logo-image{position:absolute;left:-51px;top:0;display:block;width:400px;height:73px;max-width:none;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.site-head .mainbar .searchbox{flex:1 1 345px;width:auto;max-width:345px;min-width:200px}
.site-head .mainbar .quick{display:flex;flex:0 0 auto}
.site-head .mainbar .quote-list{flex:0 0 auto}
.site-head .nav-inner{justify-content:flex-start;overflow-x:auto;overflow-y:hidden}
@media(max-width:1320px){.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{max-width:calc(100% - 40px)}}
@media(max-width:1100px){.site-head .mainbar{height:auto;min-height:73px;flex-wrap:wrap;gap:10px 16px;padding-top:8px;padding-bottom:8px}.site-head .brand{width:300px;min-width:300px;height:73px;flex:0 0 300px}.site-head .mainbar .searchbox{flex:1 1 300px;max-width:none}.site-head .mainbar .quick{display:none}.site-head .mainbar .quote-list{flex:0 0 auto}}
@media(max-width:650px){.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{max-width:calc(100% - 24px)}.site-head .top-in{padding:0}.site-head .mainbar{height:auto;min-height:0;display:flex;flex-wrap:wrap;gap:8px 12px;padding:8px 0}.site-head .brand{width:250px;min-width:250px;height:61px;flex:0 0 250px}.site-head .brand-logo-image{left:-42px;width:333px;height:61px}.site-head .mainbar .searchbox{order:3;flex:1 0 100%;width:100%;max-width:none}.site-head .mainbar .quote-list{margin-left:auto}.site-head .top-in>div{gap:8px}.site-head .nav-inner{height:46px}}

/* Alternative refined header concept for review. */
.site-head{box-shadow:0 3px 16px #20324a12}
.site-head .topline{height:34px}
.site-head .top-in{min-height:34px;font-size:12px;letter-spacing:.1px}
.site-head .mainbar{justify-content:space-between;background:#f4f5f7}
.site-head .mainbar .searchbox{height:42px;max-width:345px;border:1px solid #dce2e9;border-radius:4px;background:#fff;box-shadow:0 2px 7px #20324a08;transition:border-color .18s,box-shadow .18s}
.site-head .mainbar .searchbox:focus-within{border-color:#7898bd;box-shadow:0 0 0 3px #4e7ca21b}
.site-head .mainbar .searchbox input{font-size:13px;padding-left:14px}
.site-head .mainbar .quick{line-height:1.45}
.site-head .mainbar .quick b{color:#344765;font-size:13px}
.site-head .mainbar .quote-list{min-height:44px;padding:7px 11px;border:1px solid #dce2e9;border-radius:4px;background:#fff;box-shadow:0 2px 7px #20324a08;transition:border-color .18s,box-shadow .18s}
.site-head .mainbar .quote-list:hover{border-color:#e60070;box-shadow:0 3px 12px #e6007018}
.site-head .nav-inner{min-height:48px}
.site-head .nav-item>a{transition:background-color .15s,color .15s}
.site-head .nav-item:hover>a{color:#e60070}
.site-head .dropdown{border-radius:0 0 5px 5px}
@media(max-width:1100px){.site-head .mainbar .searchbox{max-width:none}}

/* Use the live site rails: Sertifikalar on the left, İletişim on the right. */
.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{width:100%;max-width:1236px;margin-inline:auto;padding-inline:0;box-sizing:border-box}
.site-head .top-in{justify-content:space-between}
.site-head .top-in>div:last-child{margin-left:auto;justify-content:flex-end}
.site-head .mainbar{justify-content:space-between}
.site-head .nav-inner{display:flex;justify-content:flex-start}
.site-head .nav-inner>.all-products{margin-left:auto}
@media(max-width:1320px){.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{max-width:calc(100% - 40px)}}
@media(max-width:650px){.site-head .top-in,.site-head .mainbar,.site-head .nav-inner{max-width:calc(100% - 24px)}.site-head .top-in>div:last-child{margin-left:0}}

/* Align the product solutions section with the same live site rails. */
#urunler>.wrap{width:100%;max-width:1236px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;box-sizing:border-box}
@media(max-width:1320px){#urunler>.wrap{max-width:calc(100% - 40px)}}
@media(max-width:650px){#urunler>.wrap{max-width:calc(100% - 24px)}}

/* Keep every page section on the same left and right alignment rails. */
.wrap{width:100%;max-width:1236px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;box-sizing:border-box}
@media(max-width:1320px){.wrap{max-width:calc(100% - 40px)}}
@media(max-width:650px){.wrap{max-width:calc(100% - 24px)}}

/* Align every top utility label vertically and use clear location/phone symbols. */
.site-head .top-in>div{height:100%;align-items:center}
.site-head .top-in>div>a{display:inline-flex;align-items:center;align-self:center;min-height:34px}
.site-head .top-in .pink{height:34px;min-height:34px;padding-top:0;padding-bottom:0}
.site-head .pin,.site-head .phone{display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;color:#344765;font-size:0;line-height:0}
.site-head .pin svg,.site-head .phone svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.site-head .top-in>div>a{min-height:30px}.site-head .top-in .pink{height:30px;min-height:30px}}
