/* 3S Sızdırmazlık — statik site stilleri (canlı Framer sitesinin 1440 px masaüstü ölçülerinden) */
:root{
  --bg:#232323; --bg2:#3b3b3b; --blue:#009fe3; --g1:#d4d4d4; --g2:#b6b8ba; --ink:#5c5c61;
  --sheet:#5c5c61; --line:#474d50; --pink:#d98b8b; --olive:#c4c98f; --teal:#49b3a4;
  --f-din:'DINPro Regular','Titillium Web',Arial,sans-serif; --f-dinl:'DINPro Light','DINPro Regular',Arial,sans-serif;
  --f-dinm:'DINPro Medium','DINPro Regular',Arial,sans-serif; --f-dinb:'DINPro Bold',Arial,sans-serif; --f-dink:'DINPro Black','DINPro Bold',Arial,sans-serif;
  --f-m7:'Museo 700','Museo 900',Arial,sans-serif; --f-m9:'Museo 900','Museo 700',Arial,sans-serif; --f-m3:'Museo 300','Museo 500',Arial,sans-serif;
  --f-inter:'Inter',Arial,sans-serif; --f-sat:'Satoshi','Inter',Arial,sans-serif; --f-tit:'Titillium Web',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html{scrollbar-color:var(--blue) var(--bg)}   /* kaydırma çubuğu: sitenin mavisi (Chrome 121+, Firefox) */
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:6px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#26b4f0}   /* Safari */
body{background:var(--bg);color:var(--g1);font-family:var(--f-din);font-size:16px;line-height:1.2;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@font-face{font-family:'Museo 300';font-weight:300;src:url(fonts/museo300.otf) format('opentype');font-display:swap}
@font-face{font-family:'Museo 500';font-weight:500;src:url(fonts/museo500.otf) format('opentype');font-display:swap}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:75px;z-index:60;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:height .35s ease,background .35s}
.nav .inner{position:relative;width:1100px;max-width:100%;height:100%;margin:0 auto}
.nav a.lk{position:absolute;font-family:var(--f-dinb);font-size:17px;line-height:20px;color:var(--g1);transition:color .25s,left .35s,top .35s;white-space:nowrap}
.nav a.lk:hover,.nav a.lk.on{color:var(--blue)}
.nav .l1{left:0;top:16px}.nav .l2{left:99px;top:16px}
.nav .r1{right:150px;top:14px;}.nav .r2{right:0;top:14px}
.nav .srch{position:absolute;left:0;top:44px;width:20px;height:20px;color:var(--blue);display:block;transition:top .35s}
.nav .srch svg{width:20px;height:20px;display:block}
.nav .lang{position:absolute;right:0;top:43px;width:58px;height:26px;transition:top .35s}
.nav .lang button{width:58px;height:26px;border-radius:10px;border:1px solid transparent;background:#dddddd;color:var(--ink);font-family:var(--f-dinm);font-size:15px;display:flex;align-items:center;gap:8px;padding:0 0 0 11px;cursor:pointer}
.nav .lang button svg{width:11px;height:11px;color:var(--ink)}
/* dil menüsü: nav'ın mavi çizgisinin ALTINDAN kayarak çıkar (PDF 'İndir' sekmesi gibi); ince mavi çerçeve, üstü açık */
.nav .lang .menu{position:absolute;right:0;top:var(--lm,28px);width:58px;overflow:hidden;pointer-events:none;visibility:hidden;transition:visibility 0s .45s}
.nav .lang.open .menu{visibility:visible;pointer-events:auto;transition-delay:0s}
.nav .lang .menu .mi{background:#dddddd;border:1px solid var(--blue);border-top:0;border-radius:0 0 10px 10px;padding:3px 0;transform:translateY(-102%);transition:transform .45s cubic-bezier(.65,0,.35,1)}
.nav .lang.open .menu .mi{transform:none}
.nav .lang .menu a{display:block;padding:4px 11px;font-family:var(--f-dinm);font-size:15px;color:var(--ink);transition:color .25s}
.nav .lang .menu a:hover{color:var(--blue)}
.nav .logo{position:absolute;left:50%;top:33px;width:85px;margin-left:-42.5px;transition:all .35s ease}
.nav .logo img{width:85px;height:auto}
.nav .logo .h{display:none}
.nav .line{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(84,84,84,0) 6%,#009fe3 33.4%,rgba(0,159,227,0) 44.9%,rgba(0,159,227,0) 55.2%,#009fe3 70.2%,rgba(84,84,84,0) 100%);transition:opacity .35s}
.nav.sc{height:65px;background:rgba(35,35,35,.8)}   /* koyu sayfada arkadan geçen fotoğraf renkleri (kahve/altın) menüden sızmasın */
.nav.sc .l1{left:53px;top:23px}.nav.sc .l2{left:130px;top:23px}
.nav.sc .srch{top:22px}
.nav.sc .r1{top:23px;right:142px}.nav.sc .r2{top:23px;right:75px}
.nav.sc .lang{top:21px}
.nav.sc .logo{top:12px;width:130px;margin-left:-65px}
.nav.sc .logo .v{display:none}.nav.sc .logo .h{display:block;width:130px}
.nav.sc .line{background:linear-gradient(90deg,rgba(84,84,84,0) 0%,#009fe3 50.7%,rgba(84,84,84,0) 100%)}
.nav.lt a.lk{color:var(--ink)}.nav.lt a.lk.on,.nav.lt a.lk:hover{color:var(--blue)}
.nav.lt .burger i{background:var(--ink)}
.nav.lt.sc{background:rgba(212,212,212,.35)}
@media (hover:none){.nav a.lk:hover{color:inherit}}

/* ---------- COOKIE ---------- */
.cookie{position:fixed;left:20px;bottom:20px;width:350px;padding:20px;background:var(--g1);border-radius:14px;z-index:90;box-shadow:0 4px 20px rgba(0,0,0,.25);color:var(--bg);display:none}
.cookie.show{display:block}
.cookie h4{font-family:var(--f-dinb);font-size:16px;color:var(--blue);margin-bottom:10px}
.cookie p{font-size:14px;line-height:16.5px;margin-bottom:16px;font-family:var(--f-din)}
.cookie .btns{display:flex;gap:10px}
.cookie button{flex:1;height:36px;border:0;border-radius:8px;font-family:var(--f-din);font-size:14px;cursor:pointer}
.cookie .no{background:#eee;color:#555}.cookie .ok{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(0,159,227,.4)}   /* canlı: görsel -16° döndürülmüş, küçük (piksel eşlemesiyle ölçüldü: ölçek 0,82, merkez aynı) */
@keyframes prodHero{0%{transform:translateY(-230px) rotate(0deg) scale(1.4);opacity:0}25%{opacity:1}100%{transform:translateY(0) rotate(-16deg) scale(.82);opacity:1}}
@keyframes rvIn{from{opacity:0;translate:0 26px}}
@media (hover:hover){   /* canlı hover zeminleri (ölçüldü) */
}   /* hafif yazı en son söner: iki katman toplam kapsamı hiç düşmez (solma çukuru = 'ton atlama') */

/* ---------- FOOTER ---------- */
.foot{position:relative;height:100vh;min-height:760px;background:var(--bg)}
.cat{position:absolute;left:50%;top:372px;width:552px;margin-left:-276px;height:260px;font-family:var(--f-sat)}
.cat .tab{position:absolute;left:87px;top:0;width:378px;height:30px;border:1px solid rgba(212,212,212,.7);border-bottom:0;border-radius:13px 13px 0 0;text-align:center;font-weight:300;font-size:16px;line-height:26px;color:var(--g1);transition:border-color .25s}
.cat .card{position:absolute;top:30px;width:271px;height:164px}
.cat .card.tr{left:0}.cat .card.en{left:281px}
.cat .card .im{position:absolute;z-index:2;inset:0;border-radius:13px;border:1px solid var(--blue);overflow:hidden;background:var(--bg);transition:border-color .35s ease-in-out,background-color .35s ease-in-out}
.cat .card:hover .im,.cat .card.hv .im{background-color:#525256}   /* canlı: üstüne gelince kutunun içi grileşir (rgb 82,82,86) */
.cat .card .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat .card .im .hv{opacity:1;z-index:0}   /* gri zemin görseli ALTTA, hep açık */
.cat .card .im img{will-change:opacity;backface-visibility:hidden}   /* iki görsel hep kendi katmanında: geçiş başında/sonunda yeniden rasterleme (sayfa içeriği titremesi) olmaz */
/* taban görsel hover'da sönerken hover görseli açılır; iki yarı saydam gölge üst üste kalırsa gölge koyulaşır (koyu zemin gölgesi siyah, gri zemin gölgesi gri) */
.cat .card .im img:not(.hv){z-index:1;transition:opacity .35s ease-in-out}   /* koyu zemin görseli ÜSTTE; hover'da opacity ile kaybolup alttakini açar (içerik aynı olduğundan sayfalar değişmez, yalnız gölge) */
.cat .card:hover .im img:not(.hv),.cat .card.hv .im img:not(.hv){opacity:0}
.cat .card.done .im img:not(.hv){opacity:1}
.cat .card .dl{position:absolute;left:21px;top:164px;width:229px;height:33px;border:1px solid var(--blue);border-top:0;border-radius:0 0 13px 13px;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 13px;color:var(--g1);font-weight:300;font-size:16px;z-index:1;transform:translateY(-34px);transition:transform .45s cubic-bezier(.65,0,.35,1),border-color .25s}   /* canlı: kartın ALTINDAN (arkasından) çıkar; kartın alt çizgisi kesintisiz */
.cat .card .dl svg{width:26px;height:26px}
.cat .card:hover .dl,.cat .card.hv .dl,.cat .card.done .dl{transform:none}
.cat .card .ty{position:absolute;left:36px;top:198px;width:199px;height:26px;border:1px solid var(--blue);border-top:0;border-radius:0 0 13px 13px;display:flex;align-items:center;gap:20px;padding:0 0 0 14px;font-weight:300;font-size:13px;color:var(--g1);background:var(--bg);z-index:0;transform:translateY(-62px);transition:transform .45s cubic-bezier(.65,0,.35,1),border-color .25s;pointer-events:none}   /* dl'nin altından çıkar */
.cat .card .ty svg{width:20px;height:20px}
.cat .card.done .ty{transform:none}
.cat .card.done .im{background-color:var(--bg)}   /* tamamlanınca iç gri kalkar */
.cat .card.done .im,.cat .card.done .dl{border-color:#d4d4d4}
.cat:has(.card.done) .tab{border-color:#e6e6e6}
.foot .co{position:absolute;left:0;right:0;top:705px;text-align:center;font-family:var(--f-dinm);font-size:20px;line-height:24px;color:#fff}
.foot .co b{font-family:var(--f-dinb);color:var(--blue);font-weight:700}
.foot .legal{position:absolute;left:0;right:0;top:812px;text-align:center;font-family:var(--f-tit);font-style:italic;font-weight:300;font-size:13px;color:var(--g1);display:flex;justify-content:center;gap:9px}
.foot .legal a:hover,.foot .legal button:hover{color:var(--blue)}
.foot .legal button{background:none;border:0;color:inherit;font:inherit;font-style:italic;cursor:pointer}
.foot .cp{position:absolute;left:0;right:0;top:853px;text-align:center;font-family:var(--f-tit);font-weight:300;font-size:13px;color:var(--g2);display:flex;justify-content:center;gap:12px;align-items:baseline}
.foot .cp span:first-child{font-family:'Inter Tight',Arial,sans-serif;font-weight:500;color:#fff}
.foot .cp span:last-child{font-style:italic}
@media (max-height:900px){.foot .cat{top:41.3%}.foot .co{top:78.3%}.foot .legal{top:90.2%}.foot .cp{top:94.8%}}

/* ---------- SHEET (panel sayfalar) ---------- */
/* Alt köşe geçişi (canlı videodan kare kare ölçüldü, 404 px: R≈80 px): sheet'in alt kenarı ekranın alt yarısındayken köşeler AŞAĞI dönük (t=0), üst yarıya çıkınca radius YUKARI döner (t=1):
   sheet köşesi düzleşir, altında R boyunda 'kulaklar' (ışık zemin) belirir; koyu bölümün üst köşeleri yuvarlak görünür. Geçiş KAYDIRMAYA BAĞLI DEĞİL, zamanla oynar
   (canlıda hızlı başlayıp yavaşlayan eğri: 0,35 sn'de %90, ≈0,8 sn'de biter); tetik: alt kenar ekranın tam ortasını (%50) geçince (site.js, IntersectionObserver).
   --t kayıtlı özellik; yarıçap ve kulaklar --t'den türetilir, geçişi tek `transition` sürer. */
@property --t{syntax:'<number>';inherits:true;initial-value:0}   /* köşe boşluğunda görünen zemin, hemen alttaki ürün bölümüyle (#3b3b3b) aynı olsun; footer kendi zeminini taşır */
.sheet{--R:80px;--sbg:var(--sheet);position:relative;background:var(--sbg);border-radius:0 0 var(--R) var(--R) / 0 0 calc(var(--R) * max(0, 1 - 2 * var(--t))) calc(var(--R) * max(0, 1 - 2 * var(--t)));z-index:5;padding-bottom:50px;color:var(--g1);transition:--t .7s cubic-bezier(.6,0,.3,1)}
.sheet.up{--t:1}
.sheet.light{--sbg:var(--g1);color:var(--ink)}
.sheet::before{content:'';position:absolute;left:0;right:0;top:calc(100% - 2px);   /* sheet'in alt 2 px'i + çizginin altı 1 px */height:calc(var(--R) * max(0, 2 * var(--t) - 1) + 3px);pointer-events:none;
  /* üstteki 2 px sheet'in alt satırıyla örtüşür: kesirli piksel konumunda koyu zeminle karışıp kulakların üstünde kıl çizgi bırakmasın */
  background:linear-gradient(var(--sbg),var(--sbg)) left top / calc(var(--R) * min(1, 20 * max(0, 2 * var(--t) - 1))) 3px no-repeat,
             linear-gradient(var(--sbg),var(--sbg)) right top / calc(var(--R) * min(1, 20 * max(0, 2 * var(--t) - 1))) 3px no-repeat,
             radial-gradient(ellipse farthest-side at 100% 100%,transparent calc(100% - .5px),var(--sbg) 100%) left bottom 1px / var(--R) calc(var(--R) * max(0, 2 * var(--t) - 1)) no-repeat,
             radial-gradient(ellipse farthest-side at 0 100%,transparent calc(100% - .5px),var(--sbg) 100%) right bottom 1px / var(--R) calc(var(--R) * max(0, 2 * var(--t) - 1)) no-repeat}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.sheet h1{font-family:var(--f-dinb)}
.sheet .wrap{position:relative;width:1100px;max-width:94%;margin:0 auto}
.ph{background:rgba(255,255,255,.18);border:2px dashed rgba(92,92,97,.45);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(92,92,97,.6);font-family:var(--f-inter);font-size:13px;text-align:center;padding:10px}

/* tablolar */
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #5d5d62;border-radius:20px;overflow:hidden;font-family:var(--f-m3);font-weight:300;color:#5c5c61;font-size:18px;line-height:1.15;table-layout:auto}
.tbl th,.tbl td{border-right:1px solid #5d5d62;border-bottom:1px solid #5d5d62;padding:2px 6px;text-align:center;font-weight:300;vertical-align:middle}
.tbl tr>*:last-child{border-right:0}.tbl tr:last-child>*{border-bottom:0}
.tbl .h{background:#bce4fa}
.tbl .z{background:#eaf6fe}
.tbl .l{text-align:left}.tbl .r{text-align:right}
.tbl sup,.tbl sub{font-size:.65em}
.tbl caption{display:none}
.tbl th.h{font-weight:300}
.sheet:not(.light) .tbl{color:#5c5c61}
@media(max-width:1200px){.tbl{font-size:14px}}

/* static sayfalar */
.pol .tx{width:600px;max-width:92%;margin:0 auto;text-align:center;font-size:18px;line-height:21.6px}
.pol h1{font-size:24px;font-family:var(--f-dinm);font-weight:400;text-transform:none;padding-top:313px}
.pol .tx{padding-top:3px}
.pol .tx p,.pol .tx ul{margin-top:24px}.pol .tx ul{list-style:none}
.pol .tx li{margin-bottom:0}

/* montaj / örgü (mutlak yerleşim, 1440 tasarım) */
.abs{position:relative;margin:0 auto;width:1440px;max-width:100%}
.abs .a{position:absolute}
.abs .a.t{font-family:var(--f-din);font-size:18px;line-height:21.6px;color:var(--g1);text-align:left}
.abs .a.s{font-size:22px;font-weight:700;text-align:center;font-family:var(--f-dinb);color:#fff}
.abs .a.b{color:var(--blue)}
.abs .a.i{object-fit:cover}

/* ---------- RESPONSIVE (tablet + telefon) ---------- */
@media (max-width:1199px){
  .nav .inner{width:calc(100% - 60px)}
}
@media (max-width:809px){
  body{font-size:15px}
  .nav .inner{width:calc(100% - 32px)}
  .nav .l1{left:0}.nav .l2{left:82px}
  .cookie{left:10px;right:10px;width:auto;bottom:10px}
}
/* örgü tipleri */
/* montaj */
/* ürünler bölümü ikonları */
.ic{display:inline-block;width:21px;height:21px;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic.rope{--m:url(img/ic-rope.svg);color:#d98b8b;width:30px;height:12px;transform:rotate(-28deg)}
.ic.weave{--m:url(img/ic-weave.svg);color:#c4c98f}
.ic.roll{--m:url(img/ic-roll.svg);color:#49b3a4}

.tbl.dense{font-size:14px;letter-spacing:-.2px}.tbl.dense td{padding:2px 2px}.tbl td.vt{writing-mode:vertical-rl;transform:rotate(180deg);width:1%;white-space:nowrap}
.tbl .in1{padding-left:10px}.tbl .in2{padding-left:52px}
.tbl-side{display:flex;gap:60px;align-items:flex-start}.tbl-side .tbl{flex:1;width:auto}
.tbl.dk td:not(.h):not(.z){color:#d4d4d4}

/* ---------- TELEFON / TABLET TABAN DÜZENİ ---------- */
@media (max-width:1199px){
  .tbl{min-width:900px}
  .tbl-side{flex-direction:column;min-width:0}
  
}
@media (max-width:809px){
  .cat{transform:scale(.62);transform-origin:top center}
  .foot{min-height:640px}
  .foot .co{top:440px}.foot .legal{top:520px;flex-wrap:wrap;padding:0 10px}.foot .cp{top:580px;flex-direction:column;align-items:center;gap:4px}
  .foot .cat{top:230px}
  .nav .l2,.nav .srch{display:none}
  .nav .r1{right:96px}.nav .lang{display:block}
}

.foot{overflow:hidden}
p{overflow-wrap:anywhere}


/* bilgi sayfaları: görsel ile metin arasındaki mavi çizgi (canlıda rotateX -90 → 0 açılır) */
.vl{display:block;flex:none;width:2px;align-self:stretch;min-height:120px;background:linear-gradient(rgba(212,212,212,0),#009fe3 50%,rgba(212,212,212,0));transform-origin:50% 50%}


/* ---------- telefon nav (canlı ölçüm 390 px) ---------- */
.nav .burger{display:none}
@media (max-width:809px){
  .nav .inner{width:100%}
  .nav a.lk,.nav .srch,.nav .lang{display:none!important}
  .nav .logo{top:33px}
  .nav .burger{display:block;position:absolute;right:50px;top:30px;width:40px;height:40px;background:none;border:0;cursor:pointer;z-index:3}
  .nav .burger i{position:absolute;left:10px;width:20px;height:1.5px;background:#d4d4d4;border-radius:1px;transition:transform .3s,top .3s}
  .nav .burger i:first-child{top:14px}.nav .burger i:last-child{top:24px}
  .nav.sc .burger{top:12px}
  .nav .line{background:linear-gradient(90deg,rgba(84,84,84,0) 6%,#009fe3 33%,rgba(0,159,227,0) 34%,rgba(0,159,227,0) 66%,#009fe3 67%,rgba(84,84,84,0) 100%)}
  .nav.open{height:100vh!important;background:rgba(35,35,35,.55)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .nav.open .logo{top:12px;width:130px;margin-left:-65px}.nav.open .logo .v{display:none}.nav.open .logo .h{display:block;width:130px}
  .nav.open .burger{top:10px}
  .nav.open .burger i:first-child{top:19px;transform:rotate(45deg)}.nav.open .burger i:last-child{top:19px;transform:rotate(-45deg)}
  .nav.open .line{opacity:0}
  .nav.open a.lk,.nav.open .srch,.nav.open .lang{display:block!important;left:50%!important;right:auto!important;transform:translateX(-50%);text-align:center}
  .nav.open a.lk{font-size:20px;line-height:26px}
  .nav.open .srch{top:91px!important}
  .nav.open .l1{top:137px!important}.nav.open .l2{top:197px!important}.nav.open .r1{top:257px!important}.nav.open .r2{top:318px!important}
  .nav.open .lang{top:372px!important}
}

/* ---------- nav: canlıdaki Desktop_out ↔ Desktop_in geçişi (konumlar site.js'te yayla) ---------- */
.nav .logo{display:block}
.nav .logo img{position:absolute;max-width:none}
.nav .logo .lm{width:85px;height:auto}.nav .logo .lt{width:83px;height:auto;margin-top:-1.1px}   /* logo-text SVG'sinin mavi S'si 1 px büyütüldü; viewBox üstten 1,4 birim genişledi (S taşmasın), görüntü 1,1 px yukarı alınarak yazı aynı yerde kalır */
.nav .line{position:absolute;left:0;right:0;bottom:0;height:1px;transition:none}
.nav .l-out{background:linear-gradient(90deg,rgba(84,84,84,0) 0%,#009fe3 29.84%,rgba(0,159,227,0) 44.85%,rgba(0,159,227,0) 55.2%,#009fe3 70.16%,rgba(84,84,84,0) 100%)}
.nav .l-in{background:linear-gradient(90deg,rgba(84,84,84,0) 0%,#009fe3 50.71%,rgba(84,84,84,0) 100%);opacity:0}
.nav.js a.lk,.nav.js .srch,.nav.js .lang,.nav.js .logo{transition:color .25s}

.nav.js.sc{background:transparent}
/* telefon: logo dikey (kare + alt yazı), açık menüde yatay */
@media (max-width:809px){
  .nav .logo{position:absolute;left:50%;top:33px;width:85px;height:130px;margin-left:-42.5px}
  .nav .logo .lm{left:0;top:0;width:85px}.nav .logo .lt{left:1px;top:90px;width:83px}
  .nav.sc .logo{top:12px;width:130px;margin-left:-65px;height:40px}.nav.sc .logo .lm{width:41px}.nav.sc .logo .lt{left:47px;top:.5px}
  .nav.open .logo{top:12px;width:130px;margin-left:-65px;height:40px}.nav.open .logo .lm{width:41px}.nav.open .logo .lt{left:47px;top:.5px}
  .nav .l-in{opacity:0}.nav.sc .l-out{opacity:0}.nav.sc .l-in{opacity:1}
}

.nav.js{transition:none}

/* ---- nav yüklenme animasyonu (canlı Framer: amblem+yazı birlikte solarak/büyüyerek gelir, sonra bağlantılar sırayla) ----
   html.ni: sayfa yenilendi ya da dışarıdan açıldı (site içi geçişte oynamaz; head'deki betik koyar).
   Masaüstünde logo, JS konumlandırana (.js) kadar gizli: konumlanmamış hâli bir an görünüyordu. */
@media (min-width:810px){.nav:not(.js) .logo{visibility:hidden}html.gc .nav:not(.js) .logo{visibility:visible}}   /* geçişle gelinen sayfada logo JS gelmeden de görünür (yoksa ilk karede nav'da logo yok = 'patlama') */
@keyframes nvLogo{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes nvLink{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}   /* canlıda ölçüldü: ~11 px aşağıdan yukarı, yavaşlayarak */
html.ni .nav .logo img{animation:nvLogo 1s cubic-bezier(.44,0,.56,1) both}
html.ni .nav .lk,html.ni .nav .srch,html.ni .nav .lang{animation:nvLink .8s cubic-bezier(.44,0,.56,1) both}
html.ni .nav .r2{animation-delay:.5s}html.ni .nav .l1{animation-delay:.55s}
html.ni .nav .l2,html.ni .nav .r1{animation-delay:.7s}
html.ni .nav .srch,html.ni .nav .lang{animation-delay:.85s}
@media (prefers-reduced-motion:reduce){html.ni .nav *{animation:none!important}}

/* ---------- FOOTER: f2 (B, varsayılan) ve f1 (A). html[data-ft="1"] A'yı gösterir; seçici yalnız yerel önizlemede ---------- */
.foot.f1,.foot.f2{--g1:#e6e6e6;--g2:#d2d4d6;display:flex;align-items:center;justify-content:center;padding:110px 0 100px;font-family:var(--f-sat);background:var(--bg)}
html[data-ft="1"] .foot.f2,html:not([data-ft="1"]) .foot.f1{display:none}   /* yalnız seçili footer görünür (B varsayılan, A seçilebilir) */   /* üstte büyük nav logosu için pay */
.fx-in{position:relative;width:1100px;max-width:calc(100% - 48px)}
.fx-in .cat{position:relative;left:auto;top:auto;margin:0;flex:none;height:200px}   /* açılan sekmeler altındaki boşluğa biner */
.fx-logo img{width:221.6px;height:auto}
.fx-co{margin-top:22px;width:221.6px;color:#fff}
.fx-fit{display:block;white-space:nowrap;font-size:14px}
.fx-l1{font-family:var(--f-dinb);line-height:1.05;letter-spacing:.02em}.fx-l1 b{color:var(--blue);font-weight:700;font-size:calc(1em + 1px);line-height:0}   /* mavi S 1 px büyük (kullanıcı isteği); satır yüksekliği değişmesin */
.fx-l2{font-family:var(--f-dinm);line-height:1.2;letter-spacing:.02em;margin-top:5px}
.fx-tag{width:221.6px;margin-top:9px;line-height:1.3;color:var(--g2)}
.fx-c h5{font-family:var(--f-dinm);font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:13px}
.fx-c li{margin-bottom:7px}
.fx-c a,.fx-addr a{font-size:17px;line-height:24px;color:var(--g1);transition:color .25s}
.fx-c a:hover,.fx-addr a:hover{color:var(--blue)}
.fx-addr{font-style:normal;font-size:16px;line-height:24px;color:var(--g2)}
.fx-addr p{margin-bottom:8px}.fx-addr b{display:block;font-family:var(--f-dinm);font-weight:400;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g2);opacity:.95;margin-bottom:2px}
.fx-bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;align-items:last baseline;gap:20px;padding:22px 40px 20px;border-top:1px solid rgba(212,212,212,.14);background:var(--bg)}
.fx-cp{justify-self:start}.fx-legal{justify-self:center}.fx-rr{justify-self:end;display:flex;align-items:end;align-items:last baseline;gap:30px}
.fx-legal{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--f-sat);font-style:normal;font-weight:400;font-size:15.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g1)}
.fx-legal a:hover,.fx-legal button:hover{color:var(--blue)}.fx-legal button{background:none;border:0;color:inherit;font:inherit;font-style:normal;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.fx-cp{font-family:var(--f-sat);font-weight:400;font-size:15.5px;letter-spacing:.06em;line-height:1.35;color:var(--g2);white-space:nowrap}
.fx-ay{display:inline-flex;align-items:center;position:relative;top:5px;gap:8px;font-family:var(--f-sat);font-weight:400;font-size:17.5px;color:var(--g2);opacity:.75;transition:opacity .3s,color .3s}.fx-ay:hover{opacity:1;color:#fff}.fx-ay img{height:20px;width:auto}
.fx-top{font-family:var(--f-sat);font-weight:400;font-size:17.5px;color:var(--g1);transition:color .25s}.fx-top:hover{color:var(--blue)}
/* f1: katalog üstte ortada, altında 4 sütun */
.f1 .fx-in{--fh:600px}
.f1 .cat{margin:0 auto 64px}
.f1 .fx-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.7fr;gap:48px;padding-top:34px;border-top:1px solid rgba(212,212,212,.14)}
/* f2: solda marka + katalog, sağda bağlantılar ve iletişim */
.f2 .fx-in{--fh:640px;display:grid;grid-template-columns:552px 1fr;gap:0 90px}
.f2 .fx-left{grid-row:1}.f2 .fx-left .cat{margin-top:38px}
.f2 .fx-right{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.f2 .fx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.f2 .fx-ct{padding-top:18px;border-top:1px solid rgba(212,212,212,.14)}
.f2 .fx-ct .fx-addr{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.f2 .fx-bar{grid-column:1/-1}
@media (min-width:810px){
  .foot-fixed .foot.f1,.foot-fixed .foot.f2{--ft:max(70px,calc((max(100vh,760px) - var(--fh,600px)) / 2))}
}
@media (max-width:1139px) and (min-width:810px){
  .fx-bar{flex-direction:column;align-items:center;text-align:center;gap:12px}.fx-r{flex-direction:column;align-items:center;gap:10px}.fx-legal{justify-content:center}
  .f1 .fx-grid{grid-template-columns:1fr 1fr;gap:34px}.f2 .fx-in{grid-template-columns:1fr;gap:34px}.f2 .fx-left .cat{margin:38px auto 0}
  .foot.f1,.foot.f2{height:auto;min-height:760px;padding:90px 0 120px}
}
@media (max-width:809px){
  .foot.f1,.foot.f2{height:auto;min-height:0;padding:70px 0 150px}
  .fx-in{max-width:calc(100% - 40px)}
  .f1 .fx-grid,.f2 .fx-cols{grid-template-columns:1fr;gap:28px}
  .f2 .fx-in{display:block}.f2 .fx-right{margin-top:26px}.f2 .fx-ct .fx-addr{display:block}
  .fx-in .cat{margin:0 0 -80px calc((100% - 552px) / 2);transform:scale(.62);transform-origin:top center;height:260px}
  .fx-bar{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:14px 20px}.fx-r{flex-direction:column;align-items:center;gap:10px}.fx-legal{justify-content:center}
}

@media (max-width:1279px){
  .fx-bar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:16px 20px}
  .fx-cp,.fx-legal,.fx-rr{justify-self:center}.fx-legal{justify-content:center}.fx-rr{flex-direction:column;gap:10px}
}
@media (min-width:1140px) and (max-height:780px){   /* kısa ekranlarda taslak B alt çubuğa binmesin */
  .fx-c a,.fx-addr a{font-size:16px;line-height:22px}.fx-c li{margin-bottom:4px}.fx-addr{font-size:15px;line-height:21px}.fx-addr p{margin-bottom:5px}
  .fx-c h5{margin-bottom:9px}.f2 .fx-right{gap:14px}.f2 .fx-ct{padding-top:12px}
}

/* kurumsal sayfa belirmesi: data-rv'li öğeler görünüme girince sıra sıra yukarı kayar (site.js .in ekler) */

/* ürün sayfasındaki 'Teklif / Bilgi Al' düğmesi */
/* ürün sayfası 'Teklif / Bilgi Al': sakin, kenarlıklı düğme; mavi yalnız üzerine gelince */
.tf-cta{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;margin-top:18px;height:46px;padding:0 20px 0 22px;border-radius:12px;border:1.5px solid var(--ink);color:var(--ink);background:rgba(255,255,255,0);transition:background-color .4s ease-in-out,border-color .4s ease-in-out,color .4s ease}
.tf-cta-t{font-family:var(--f-dinb);font-size:16px;line-height:1}
.tf-cta-t small{display:none}
.tf-cta svg{flex:none;width:18px;height:18px;transition:transform .4s ease-in-out}
.tf-cta:hover{background-color:rgba(255,255,255,.2)}   /* dolgu, üstteki açıklama kutularının (.sec) açık gri tonuyla aynı; çerçeve ve yazı rengi sabit */
.tf-cta:hover svg{transform:translateX(4px)}

/* iletişim sayfası belirmesi */

/* bilgi sayfaları belirmesi */

/* ---------- NAV ARAMA ---------- */
.ar-ov{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:16vh 20px 0;background:rgba(35,35,35,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.ar-ov.on{opacity:1;visibility:visible;transition-delay:0s}
.ar-box{width:720px;max-width:100%;transform:translateY(-14px);transition:transform .45s cubic-bezier(.22,.9,.28,1)}
.ar-ov.on .ar-box{transform:none}
.ar-in{display:flex;align-items:center;gap:16px;padding:0 4px 16px;border-bottom:1px solid rgba(0,159,227,.7)}
.ar-in svg{width:26px;height:26px;color:var(--blue);flex:none}
.ar-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:var(--f-din);font-size:30px;line-height:1.2;-webkit-appearance:none;appearance:none}
.ar-in input::placeholder{color:#8d9195}
.ar-in input::-webkit-search-cancel-button{display:none}
.ar-x{flex:none;height:30px;padding:0 10px;border-radius:8px;border:1px solid #5a6064;background:none;color:var(--g2);font-family:var(--f-dinm);font-size:12px;letter-spacing:.08em;cursor:pointer;transition:border-color .25s,color .25s}
.ar-x:hover{border-color:var(--blue);color:#fff}
.ar-l{margin-top:14px;max-height:56vh;overflow-y:auto}
.ar-l li{list-style:none}
.ar-h{padding:12px 16px 8px;font-family:var(--f-dinb);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.ar-n{padding:22px 16px;font-size:18px;color:var(--g2)}
.ar-l a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:14px 16px;border-radius:12px;font-family:var(--f-dinm);font-size:19px;color:#fff;transition:background .25s ease,color .25s ease}
.ar-l a.on{background:rgba(255,255,255,.1);color:var(--blue)}
.ar-s{flex:none;font-family:var(--f-din);font-size:14px;color:var(--g2);text-align:right}
@media (max-width:640px){.ar-ov{padding-top:12vh}.ar-in input{font-size:22px}.ar-l a{font-size:17px;flex-direction:column;gap:3px}.ar-s{text-align:left}}
@media (prefers-reduced-motion:reduce){.ar-ov,.ar-box{transition:none}}

/* Sayfa içi belirişler: [data-rv] öğeleri görünüme girince sırayla belirir (site.js); kökler: kurumsal .kpv, iletişim .ikv, bilgi .bkv, ürünler .ukv, ürün sayfası .pkv, politikalar .pov */
html.js :is(.kpv,.ikv,.bkv,.ukv,.pkv,.pov) [data-rv]:not(.in){opacity:0;translate:0 26px}
html.js :is(.kpv,.ikv,.bkv,.ukv,.pkv,.pov) [data-rv].in{animation:rvIn .9s cubic-bezier(.22,.9,.28,1) backwards}
@media (prefers-reduced-motion:reduce){html.js :is(.kpv,.ikv,.bkv,.ukv,.pkv,.pov) [data-rv]:not(.in){opacity:1;translate:none}html.js :is(.kpv,.ikv,.bkv,.ukv,.pkv,.pov) [data-rv].in{animation:none}}
body:has(.uk2){background:var(--bg2)}   /* sayfa köşelerinde görünen zemin, hemen alttaki ürünler bölümüyle (#3b3b3b) aynı olsun; footer kendi zeminini taşır */

/* Sayfa geçişi (Logos Mühendislik'teki geçişin 3S uyarlaması, kullanıcı kararı): nav yerinde sabit kalır; çıkışta sayfa içeriği yukarı kayıp nav'ın altına girer (site.js 'sayfa geçişi'),
   girişte yeni içerik 120 px aşağıdan yükselip solukluktan açılır. Örtü/snapshot YOK: ara karelerde yalnız gerçek zemin (html/body #232323) ve nav görünür; beyaz 'patlama' olmasın diye
   <head>'de stil dosyasından önce satır içi html{background:#232323;color-scheme:dark} vardır. html.gc: bu sayfaya geçişle gelindi (head betiği, sessionStorage 3s-gecis). */
html.gc body>:not(.nav,script,style,.cookie,.ar-ov){animation:gIn .6s cubic-bezier(.22,.61,.36,1) backwards}   /* 'both' DEĞİL: biten animasyon transform etkisini tutarsa position:fixed torunlar (ana sayfadaki pinli satırlar) .wrap'e bağlanıp kaydırmayla çıkıyordu */
@keyframes gIn{from{opacity:0;transform:translateY(120px)}}
@media (prefers-reduced-motion:reduce){html.gc body>*{animation:none!important}}
/* Önizleme panelinde (iframe) belge değişirken Chrome eski sayfayı tutmaz; yeni belge boyanana kadar 1-3 kare nav'sız boş zemin görünür ('patlama').
   Çözüm (Medisan'da bulundu): belgeler arası görünüm geçişi eski belgenin SON karesini (koyu zemin + nav) yeni belge çizilene kadar tutar, sonra anında değiştirir (çapraz solma yok);
   <link rel=expect href=#pt-end blocking=render> + nav'dan sonraki <i id=pt-end hidden> yeni belgenin İLK boyamasının nav dahil olmasını sağlar. nav'a view-transition-name VERİLMEZ
   (backdrop-filter anlık görüntüde bozulur). Geçişsiz gezintilerde (geri/ileri, Ctrl+tık) site.js pageswap ile atlanır. Desteklemeyen tarayıcı (Firefox) kuralları yok sayar. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none;opacity:0}
::view-transition-new(root){animation:none}