/* 3S Sızdırmazlık — ana sayfa düzeni.
   Ölçüler canlı Framer sitesinden (1440 masaüstü, 810–1199 tablet, <810 telefon). Yapı:
   .wrap > .hero-sec (hero, intro, klingrit, markalar) + .foot-fixed (sabit footer) + .work (üç yapışkan bölüm:
   salmastralar / kumaşlar / levhalar; yükseklikleri 6720 px'in %33'ü) + .foot-space (footer için 100vh boşluk).
   Kaydırmaya bağlı hareketler build.py'nin ürettiği home-fx.css'te (CSS scroll-driven animations). */
.wrap{timeline-scope:--smask;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;overflow:clip;background:var(--bg)}
.wrap img{display:block}

/* ---- hero ---- */
.hero-sec{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;background:var(--bg)}
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100vh;overflow:clip}
.hero-img{position:relative;flex:none;width:100%;aspect-ratio:1.5;mix-blend-mode:lighten}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-ban{position:absolute;top:217px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;width:81%;padding:19px;border-radius:16px;background:#242424bf;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);overflow:clip;will-change:transform}
.hero-ban::after{content:"";position:absolute;inset:0;border:.3px solid #ffffff80;border-radius:inherit;pointer-events:none}
.hero-ban h1{position:relative;z-index:1;width:100%;margin:0;font-family:var(--f-m7);font-weight:400;font-size:45px;line-height:1.2em;text-align:center;color:#fff;white-space:pre-wrap;word-break:break-word}
.hero-ban h1 b{font-family:var(--f-m9);font-weight:400;color:var(--blue)}
.hero-ban h1 .nw{white-space:nowrap}
.bar{flex:none;width:100%;height:5px;background:#141414}

/* ---- sığdırılmış satır: Framer'ın ölçtüğü viewBox ile SVG içinde metin (yazı tipi aynı olduğundan ölçüler birebir) ---- */
.fit{display:block;flex:none;position:relative;width:100%;height:auto;white-space:pre}
.fit foreignObject{overflow:visible}
.fit p{margin:0;white-space:pre;font-weight:400}

/* ---- intro: ürün grubu görseli + beş satır ---- */
.intro{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1500px;overflow:clip}
.pgroup{position:relative;flex:1 0 0;width:1px;height:394px;transform-origin:center}
.pgroup img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.intro .lines{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1 0 0;width:1px;max-width:650px;padding:77px 100px;overflow:clip}
.lines .fit p{font-family:var(--f-m7);font-size:16px;line-height:1.2em;text-align:center;color:#fff}
.lines .fit.bl p{color:var(--blue)}
.lines .fit p b{font-weight:400;color:var(--blue)}

/* ---- klingrit yazıları + markalar ---- */
.kl{display:flex;flex-direction:column;align-items:center;gap:44px;width:100%;padding:77px;overflow:clip}
.kl-text{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.kl-text .tx{width:100%}
.kl-text p{margin:0;font-family:var(--f-dinm);font-weight:400;font-size:29px;line-height:1.3em;text-align:center;color:var(--blue);white-space:pre-wrap;word-break:break-word}
.kl-text p.wh{font-size:24px;color:#fff}
.kl-text .gap{height:31px}
.brands{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;overflow:clip}
.brands img{flex:none;height:auto}
.brands .b-ias{width:9%;min-width:92px}
.brands .b-ducork{width:17%;min-width:100px}
.brands .b-donit,.brands .b-tesnit{width:19%;min-width:100px}
.brands .b-ferolite{width:8%;min-width:72px}

/* ---- sabit footer (üç bölümün arkasında durur, sayfa sonunda görünür) ---- */
.foot-fixed{position:fixed;top:0;left:0;right:0;z-index:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;height:100vh;background:var(--bg)}
.foot-fixed .foot{flex:none;width:100%}
.foot-space{position:relative;z-index:-1;width:100%;height:100vh}

/* ---- çalışma bölümü ---- */
.work{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;height:6720px;timeline-scope:--t4,--t5,--t6,--t7}   /* overflow kırpılmaz: zoom'lu kumaş/levha görselleri 1200 px'lik kolonun dışına taşabilsin (kullanıcı isteği; canlıda kırpılıyordu), yatay taşmayı .wrap kırpar */
.work .tg{position:absolute;z-index:2;width:100px;opacity:0;pointer-events:none;view-timeline-axis:block}
.work .t4{top:3000px;left:calc(50% - 50px);height:13%;view-timeline-name:--t4}
.work .t5{top:3500px;left:calc(50% - 150px);width:300px;height:6%;view-timeline-name:--t5}
.work .t6{top:4480px;left:calc(50% - 50px);height:16%;view-timeline-name:--t6}
.work .t7{top:4260px;left:calc(10.5833% - 50px);height:2393px;view-timeline-name:--t7}   /* masaüstü/tablet: yakınlaştırma tam levha bölümünün yukarı kaymaya başladığı anda biter (alt kenar = .sheets alt kenarı 6653) */
.sect{position:sticky;top:0;display:flex;width:100%;height:33%;padding:0 77px 77px}
.sect .fit p{font-family:var(--f-dinb);color:#89c6e0;text-align:left}
.sect .par{margin:0;font-family:var(--f-dinl);font-weight:400;font-size:27px;color:#fff;white-space:pre-wrap;word-break:break-word}
.sect .par b{font-family:var(--f-dinb);font-weight:400;color:var(--blue)}
.sect .par p{margin:0}
.sect .par p+p{margin-top:1em}
.zoom{position:relative;z-index:1;transform-origin:center}
.zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* salmastralar: başlık + 8 parallax görsel + paragraf; üstüne soldan gelen kumaş örtüsü */
.pack{flex-direction:column;align-items:center;gap:10px;background:var(--bg)}
.pack-row{position:relative;display:flex;justify-content:center;align-items:center;gap:178px;width:100%;height:100vh}   /* içerik ekrana dikey ortalı (kullanıcı isteği; canlıda üstten 130 px) */
.pack-title{display:flex;flex-direction:column;align-items:center;flex:1 0 0;width:1px;overflow:clip}
.pack-title .fit:nth-child(2),.pack-title .fit:nth-child(4){z-index:1;mix-blend-mode:exclusion}
.pack-title .fit:nth-child(6){z-index:1;mix-blend-mode:difference}
.pack-imgs{position:absolute;top:550px;left:0;width:41%;min-height:615px;pointer-events:none;user-select:none;-webkit-user-select:none}
.pack-imgs .pimg{position:absolute;left:0;width:100%}
.pack-imgs .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pack-imgs .p1{top:0;left:-.1166%;height:442px}
.pack-imgs .p2{top:219px;height:453px}
.pack-imgs .p3{top:441px;height:460px}
.pack-imgs .p4{top:688px;height:469px}
.pack-imgs .p5{top:928px;height:470px}
.pack-imgs .p6{top:1164px;height:464px}
.pack-imgs .p7{top:1401px;height:462px}
.pack-imgs .p8{top:1650px;left:-.1166%;height:503px}
.pack .par{flex:1 0 0;width:1px;line-height:1.9em;text-align:right}
.fab-cover{position:absolute;top:0;left:0;right:0;z-index:0;height:100vh;background:var(--bg);overflow:clip}   /* kumaş satırının ilk çocuğu; yazı (z1) ve görsel (z1) üstünde kalır */

/* kumaşlar */
.fab{z-index:1;align-items:flex-start}
.fab-row{display:flex;justify-content:center;align-items:center;gap:10px;flex:1 0 0;width:1px;height:100vh}
.fab-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;flex:1 0 0;width:1px;overflow:clip}
.fab-title{display:flex;flex-direction:column;width:60%;overflow:clip}
.fab-title .fit:nth-child(2),.fab-title .fit:nth-child(3),.fab-title .fit:nth-child(5){z-index:1}
.fab .par{line-height:1.3em}
.fab-imgbox{display:flex;justify-content:center;align-items:center;gap:10px;flex:1 0 0;width:1px;padding-top:18px}
.fab-img{flex:1 0 0;width:1px;aspect-ratio:.6639}

/* levhalar */
.sheets{z-index:1;flex-direction:column;align-items:center;gap:10px}
.sheets-row{position:sticky;top:0;z-index:2;flex:none;display:flex;justify-content:center;align-items:center;gap:239px;width:100%;height:100vh;mix-blend-mode:difference;overflow:clip}
.sheets-title{display:flex;flex-direction:column;flex:1 0 0;width:1px;overflow:clip}
.sheets .par{flex:1 0 0;width:1px;line-height:1.4em;text-align:right}
.sheets-imgbox{display:flex;justify-content:flex-start;align-items:center;gap:10px;width:100%;height:55%}
.sheets-img{width:50%;aspect-ratio:.44593}

/* ---- levhalar → footer geçişi (≥810): son ekran yukarı kayarken footer, saydam levha görselinin kenarlarından belirir.
   Bölümün son 100vh'si ve .work'ün sonu saydam; orada .sheets-mask yazı bloğunun arkasını hep örter (yazılar footer'la karışmaz),
   alt katmanı (i) kayma başlayınca 250 px içinde solar (home-fx.css). Telefonda eski düzen. */
@media (min-width:810px){
  .work{background:linear-gradient(var(--bg) calc(100% - 100vh),transparent 0)}
  .pack{background:none}
  /* levha bölümü yukarı kaymaya, kullanıcının işaretlediği konumda (yakınlaştırma ölçeği ~1,58) başlar: sabit kalma süresi 488 px kısaltıldı.
     Bölüm yükseklikleri canlıdaki %33 (=2217,6 px) yerine px; görsel kutusu eski ölçüde kalır ki konum/yakınlaştırma değerleri bozulmasın */
  .work{height:6653px}   /* fab, levhalar üst kenarı ekran üstüne gelene (tam örtülene) kadar yapışık kalır; sonra birlikte kalkar */
  .sheets{position:relative}   /* levha bölümü yapışmaz: görsel hiç durup aşağı kaymaz */
  .pack,.fab{height:2218px}   /* 2217,6 yerine tam sayı: yapışkan bölümlerin belge konumu kesirli olmasın (sabit yazıda alt piksel titremesi; NOTLAR 2026-11-04) */
  .sheets{height:2217px}
  .sheets-imgbox{height:1220px}
  .sheets-mask{position:absolute;left:-100vw;right:-100vw;bottom:max(0px,calc(50vh - 305px));z-index:0;height:100vh;pointer-events:none;background:var(--bg)}
  .sheets-mask{view-timeline:--smask block}
  /* footer içeriği, bölümün alt kenarının hemen altından kaymaya başlar ve scroll ile yerine yükselir: kenar footer'ı hiç kesmez,
     levhaların doğrudan üzerinden çekildiği görünür. --ft: footer'ın en üst öğesinin (katalog sekmesi) konumu */
  .foot-fixed .foot{--ft:372px;animation:fxFootUp linear both;animation-timeline:--smask;animation-range:exit 0% exit calc(100% + 10vh)}
  .foot-space{height:calc(125vh + max(0px,100vh - 699px) + 24px)}
  @keyframes fxFootUp{from{transform:translateY(calc(100vh - var(--ft) + 12px))}to{transform:none}}
  @media (max-height:900px){.foot-fixed .foot{--ft:max(41.3vh,314px)}}   /* .foot min-height 760 → 0,413×760 */
   /* tam opak: bölüm yukarı kayarken footer yalnız bölümün alt kenarından sonra görünür */
}
.sheets-mask{display:none}
@media (min-width:810px){.sheets-mask{display:block}}

/* ---- tablet 810–1199 ---- */
@media (min-width:810px) and (max-width:1199.98px){
  .sheets-mask{bottom:max(0px,calc(50vh - 365px))}   /* sağ paragraf bu genişlikte daha uzun */
  .kl-text p,.kl-text p.wh{font-size:25px}
  .kl-text .gap{height:32.5px}
  .pack-row{gap:49px}
  .sheets-row{gap:77px;--sg:77px}
  .sheets-imgbox{height:auto}
}

/* ---- telefon <810 ---- */
@media (max-width:809.98px){
  .hero{justify-content:flex-end}
  .hero-ban h1{font-size:38px}
  .intro{flex-direction:column}
  .pgroup{flex:none;width:100%}
  .intro .lines{flex:none;width:100%;padding:77px 40px}
  .kl{padding:31px}
  .kl-text p{font-size:20px}
  .kl-text p.wh{font-size:20px}
  .brands{flex-direction:column;justify-content:center;gap:49px}
  .brands .b-ias{width:28%}
  .brands .b-ducork,.brands .b-donit,.brands .b-tesnit{width:48%}
  .brands .b-ferolite{width:22%}
  .work .t4{top:2549px;left:calc(12.8205% - 50px);height:997px}
  .work .t5{top:2498px}
  .work .t6,.work .t7{top:3950px;height:2585px}
  .sect .par{font-size:18px;text-align:center}
  .pack{padding:90px 20px 0}
  .pack-row{flex-direction:column;justify-content:flex-start;align-items:center;gap:23px}
  .pack-title{flex:none;justify-content:flex-start;width:80%}
  .pack-imgs{width:100%}
  .pack .par{flex:none;width:100%;line-height:1.3em}
  .fab{flex-direction:column;align-items:center;gap:10px;padding:90px 20px 0}
  .fab-row{flex-direction:column;justify-content:flex-start;flex:none;width:100%}
  .fab-text{z-index:2;flex:none;align-items:center;width:100%;overflow:visible}
  .fab-title{width:80%;overflow:visible}
  .fab-title .fit{mix-blend-mode:exclusion}
  .fab .par{line-height:2em}
  .fab-imgbox{flex:none;width:100%}
  .sheets{position:relative;top:auto;padding:90px 20px 20px}
  .sheets-row{flex-direction:column;justify-content:flex-start;align-items:center;gap:33px}
  .sheets-title{flex:none;width:80%;mix-blend-mode:difference}
  .sheets-title .fit{mix-blend-mode:difference}
  .sheets .par{flex:none;width:100%;line-height:1.4em}
  .sheets-imgbox{justify-content:center;height:auto}
}

/* ---- sabit bölümler (pack, fab, levha satırı): GERÇEK sabit katman (Ekol yöntemi) ----
   Önceki yöntemler (sticky; her karede scroll'u telafi eden translateY) pin evresinde her karede dönüşüm değiştiriyor, kompozitörün yarım piksel
   yuvarlaması yazıyı titretiyordu (kullanıcı kayıtları). Şimdi ≥810'da satırlar position:fixed: bölümler (.pack/.fab/.sheets) akışta yalnız yükseklik tutar;
   satır GELİŞTE translateY(100vh→0) ile (bölümün üst kenarı ekran altından ekran üstüne; akışla birebir aynı hareket) gelir, PİN boyunca dönüşümü
   sabit (0) kalır (hiçbir şey değişmez), ÇIKIŞTA translateY(0→−100vh) ile akış gibi yukarı akar. Alttan gelen satır bir öncekinin üstüne biner
   (z: pack < fab < sheets, DOM sırası). Telefonda ve desteklemeyen tarayıcıda sticky kalır.
   --wk: .work görünüm zaman çizelgesi; 'cover 0px' = .work üstü ekran altında, 'cover 100vh' = .work üstü ekran üstünde (= pack pin başlangıcı);
   fab doğal konumu 2218 (cover 2218px..+100vh gelişi); pack ve fab 4435'te (levha bölümü tam oturunca) birlikte yukarı akar: cover 4435px+100vh..+200vh. */
/* İlk boyama koruması: zaman çizelgesi bağlanana kadar (yenilemede ilk kare) fixed satırlar gizli; görünürlük anahtar karelerde (rowIn/colIn) verilir. */
@supports (animation-timeline:scroll()){
@media (min-width:810px){
  .work{view-timeline:--wk block}
  .sheets{view-timeline:--sh block}
  .pack,.fab{position:relative}
  .pack-row,.fab-row{position:fixed;top:0;left:calc(50% - min(50%,600px) + 77px);width:calc(min(100%,1200px) - 154px);height:100vh;flex:none;will-change:transform;visibility:hidden;animation:rowIn linear both,rowOff linear forwards;animation-timeline:--wk,--wk;pointer-events:none}   /* kapanınca visibility:hidden (opacity 0 hâlâ tıklamayı yutuyordu: footer'a ulaşılamıyordu) */
  .pack-row{animation-timeline:--wk,--t4;animation-range:cover 0px cover 100vh,cover 870px cover 874px}   /* her şey kapandıktan sonra satırın kendisi (görseller dahil) kapanır */
  /* salmastra yazısı kumaş görseli örterken anında kapanır (maske/silikleşme yok; kullanıcı tarifi): önce sol mavi başlık (t4 620 px, kumaş yazısı aynı anda açılır), sonra sağ paragraf (t4 860 px, görsel son konuma oturunca) */
  .pack-title{animation:rowOff linear forwards;animation-timeline:--t4;animation-range:cover 620px cover 624px}
  .pack .par{animation:rowOff linear forwards;animation-timeline:--t4;animation-range:cover 860px cover 864px}
  .fab-cover{display:none}   /* soldan süpürme örtüsü kaldırıldı */
  .fab-row{animation-range:cover 2218px cover calc(2218px + 100vh),cover max(calc(2735px + 250vh),calc(1035px + 400vh)) cover calc(4px + max(calc(2735px + 250vh),calc(1035px + 400vh)))}   /* açılma yok: levha görseli yazı alanını tam örttüğü anda kapanır; ölçüldü: tam örtme d = 2,5·vh − 1800 (d = levha bölümünün ekrana girişinden bu yana kaydırma; 700-1440 px yükseklik), +100 px pay */
  /* levha satırı: satır akışta ve static kalır (100vh'lik yer tutucu; fixed satır kendi yığın bağlamını kurup başlığın harmanını görselden koparıyordu);
     BAŞLIK ve PARAGRAF tek tek fixed: harmanlanan öğenin kendisi sabit katman, üst bağlamı .sheets → difference levha görseliyle doğrudan çalışır.
     Geometri satırın flex düzeniyle aynı: iki eşit sütun, arada --sg boşluğu, dikeyde ortalı (translateY(-50%) anahtar karelerde). Paragraf harmansız. */
  .sheets-row{position:static;z-index:auto;overflow:visible;mix-blend-mode:normal;--sg:239px}   /* static şart: sticky satır içindeki fixed başlık Chromium'da hiç boyanmıyor (ölçüldü) */
  .sheets-title,.sheets .par{position:fixed;top:50%;z-index:2;width:calc((min(100%,1200px) - 154px - var(--sg)) / 2);will-change:transform;visibility:hidden;animation:colIn linear both,colOut linear forwards;animation-timeline:--sh,--sh;animation-range:entry 0% entry 100%,exit 0% exit 100%}
  .sheets-title{left:calc(50% - min(50%,600px) + 77px);mix-blend-mode:difference}
  .sheets .par{left:calc(50% - min(50%,600px) + 77px + (min(100%,1200px) - 154px + var(--sg)) / 2);color:#fff}
  .sheets .par b{color:var(--blue)}
  @keyframes rowIn{from{transform:translateY(100vh);visibility:visible}to{transform:none;visibility:visible}}
  @keyframes rowOut{from{opacity:1}to{opacity:0}}
  @keyframes rowOff{from{visibility:visible}to{visibility:hidden}}   /* opacity animasyonu .pack-title'ı yığın bağlamı yapıp başlığın görselle mix-blend'ini kesiyordu; visibility bağlam oluşturmaz */   /* önceki bölüm yazısı yukarı KAYMAZ (sabit kalır); levha üst kenarı ekran üstüne gelirken son %35'te kapanır */
  @keyframes colIn{from{transform:translateY(calc(100vh - 50%));visibility:visible}to{transform:translateY(-50%);visibility:visible}}
  @keyframes colOut{from{transform:translateY(-50%)}to{transform:translateY(calc(-50% - 100vh))}}
}}