/* ───────────────────────────────────────────────────────────── NATROCUP — örnek çalışma · BiloCom Konsept: "ölçü ve hat". Karton bardak üreticisinin dili ölçüdür: ons, mililitre, ağız çapı, taban, yükseklik. Sayfanın tamamı bir ölçü tezgâhı gibi kurgulandı. Zemin karton kâğıt tonunda. ───────────────────────────────────────────────────────────── */ /* Yazı tipleri natrocup.com.tr ile aynı: Poppins başlık, Roboto gövde (HTML'de bağlanıyor). */ :root{ color-scheme:light; --ters: #101B24; /* koyu zeminli kutular (teklif, dip, sepet) */ --ters-yazi: #FAF8F4; --beyaz: #FFFFFF; /* hover zemini */ --cam: rgba(242,238,230,.9); /* .72 iken koyu dip bilgi kapsülün içinden okunuyordu */ --fon-cizgi: #E9E2D6; /* açılıştaki dev marka adı konturu */ --dev-cizgi: #2A3A47; /* dipteki dev marka adı konturu */ --dip-yazi: #C9D2DB; --dip-not: #4E5E6C; --golge: 16,27,36; /* rgb, gölgelerde */ --isik: 255,255,255; /* markadan ölçülen renkler */ --yesil: #4CAF50; --yesil-koyu: #007758; --lacivert: #203656; --gri: #606976; /* açık temada 4,5 kontrast eşiği: eski #707A88 kâğıtta 3,76 kalıyordu */ --gri-acik: #5E6878; /* ikincil etiketler: #9FAABB kâğıtta 2,03 kalıyordu */ /* kâğıt paleti — karton bardak sektörüne ait */ --kagit: #F2EEE6; --kagit-ac: #FAF8F4; --karton: #E4DCCD; --murekkep: #101B24; --murekkep-2: #1B2A36; --cizgi: #DDD5C6; --cizgi-koyu: #2C3E4C; --tas: clamp(15px, 1.05vw, 17px); /* Tek aile üstünde kurulu sistem. Sayılar tabular rakamla hizalanıyor, daktilo fontu kullanılmıyor. */ --olcu: 'Roboto', system-ui, sans-serif; --baslik: 'Poppins', system-ui, sans-serif; --govde: 'Roboto', system-ui, sans-serif; --kenar: clamp(20px, 5vw, 86px); --hiz: cubic-bezier(.22,.61,.36,1); } /* ══════════ KOYU TEMA ══════════ Aynı isimler, ters değerler. Geçiş sıvı perdeyle (betik.js) yapılır; o yüzden renklerin kendisinde geçiş yok, sıçrama perdenin arkasında kalır. */ html[data-tema="dark"]{ color-scheme:dark; --kagit:#0E1419; --kagit-ac:#151C23; --karton:#1E2830; --murekkep:#EEF1F3; --murekkep-2:#D5DCE2; --cizgi:#263139; --cizgi-koyu:#33424E; --gri:#9AA6B2; --gri-acik:#8894A1; --ters:#070B0E; --ters-yazi:#EEF1F3; --beyaz:#1B242C; --cam:rgba(14,20,25,.9); --fon-cizgi:#1C262E; --dev-cizgi:#1E2A34; --dip-yazi:#B9C3CC; --dip-not:#6C7986; --golge:0,0,0; --isik:255,255,255; --yesil-koyu:#3FBF8F; } html[data-tema="dark"] body{background-image:none} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--kagit); color:var(--murekkep); font-family:var(--govde); font-size:var(--tas); line-height:1.66; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; letter-spacing:-.006em; /* kâğıt dokusu: çok ince, iki katman çapraz tarama */ background-image: repeating-linear-gradient(122deg, rgba(var(--golge),.014) 0 1px, transparent 1px 4px), repeating-linear-gradient(38deg, rgba(var(--golge),.012) 0 1px, transparent 1px 5px); } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--baslik);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0} p{margin:0 0 1em} ::selection{background:var(--yesil);color:#fff} /* ══════════ AÇILIŞ ══════════ Ölçü seçici kaldırıldı (o iş Ürünler sayfasının). Sinematik tek sahne: arkada dev marka adı, önde bardak, altta tek cümle. Kaydırınca bardak çekiliyor, ad açılıyor. */ .acilis{ position:relative; min-height:100svh; display:grid; align-content:center; padding:calc(96px + clamp(10px,3vh,34px)) var(--kenar) clamp(28px,5vh,54px); overflow:hidden;overflow:clip; /* clip: kaydırma kabı olmaz, içindeki view() çizelgesi sayfaya bağlı kalır */ } .acilis-fon{ position:absolute; left:0; right:0; top:41%; transform:translateY(-50%); display:grid; place-items:center; pointer-events:none; user-select:none; } .acilis-fon span{ font-family:var(--baslik); font-weight:700; letter-spacing:-.055em; line-height:.82; font-size:clamp(52px,15.4vw,268px); color:transparent; -webkit-text-stroke:1.1px var(--fon-cizgi); white-space:nowrap; } .acilis-sahne{position:relative;display:grid;place-items:center;margin:clamp(-10px,-1vh,0px) 0 clamp(18px,3vh,38px)} .acilis-sahne img{ width:min(40vw,392px); max-height:47svh; object-fit:contain; filter:drop-shadow(0 44px 66px rgba(var(--golge),.24)); transform:translateY(var(--hy,0px)) scale(var(--hs,1)); } .acilis-alt{display:flex;gap:clamp(20px,5vw,72px);align-items:flex-end;justify-content:space-between;flex-wrap:wrap;position:relative} .acilis-alt h1{font-size:clamp(28px,4.2vw,54px);font-weight:500;max-width:16ch;letter-spacing:-.035em;position:relative} .acilis-alt h1 em{font-style:normal;color:var(--yesil-koyu);font-weight:700} .acilis-alt p{color:var(--gri);max-width:40ch;margin:0;font-size:14.6px} @supports (animation-timeline: view()){ .acilis-sahne img{animation:heroCek linear both;animation-timeline:view();animation-range:exit 0% exit 96%} @keyframes heroCek{from{transform:none;opacity:1}to{transform:translateY(-64px) scale(.78);opacity:.3}} .acilis-fon span{animation:heroAd linear both;animation-timeline:view();animation-range:exit 0% exit 96%} @keyframes heroAd{from{letter-spacing:-.055em;opacity:1}to{letter-spacing:.03em;opacity:.4}} } /* ══════════ BÖLÜM ORTAK ══════════ */ .bolum{padding:clamp(48px,8vh,88px) var(--kenar);position:relative} .bolum-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,4vh,52px);flex-wrap:wrap} .bolum-bas h2{font-size:clamp(25px,3.5vw,44px);font-weight:500;max-width:19ch} .bolum-bas p{color:var(--gri);max-width:40ch;margin:0;font-size:14.6px} /* ══════════ İKİ SERİ — bölünmüş sahne ══════════ Kart yok. Tek sahne, ortadan bölünmüş; kaydırdıkça sınır kayıyor. */ .seri{position:relative;border:1px solid var(--cizgi);background:var(--kagit-ac);overflow:hidden} .seri-ic{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,560px)} .seri-yan{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;position:relative} .seri-yan:first-child{background:var(--ters);color:var(--ters-yazi)} .seri-yan:first-child .seri-alt{color:#96A5B4} /* kart zemini iki temada da koyu (--ters); açık temadaki --gri-acik burada 3,0 kalıyordu */ .seri-yan h3{font-size:clamp(24px,3.2vw,40px);font-weight:500;margin:14px 0 12px} .seri-yan p{font-size:14.4px;max-width:34ch;margin:0} .seri-alt{color:var(--gri);font-size:12.6px;font-family:var(--olcu);letter-spacing:.02em;margin-top:auto;padding-top:22px} .seri-gorsel{position:absolute;right:clamp(-30px,-2vw,-10px);bottom:0;width:min(58%,300px);opacity:.96;} /* koyu yanda bardak, kâğıt renginde bir numune plakasının üstünde duruyor */ /* koyu yanda bardak doğrudan duruyor, arkasında levha yok */ .seri-yan:first-child .seri-gorsel{ right:clamp(6px,1.6vw,22px); filter:drop-shadow(0 22px 40px rgba(0,0,0,.55)) brightness(1.04); } /* sınır çizgisi kaydırmayla kayıyor */ .seri-sinir{position:absolute;top:0;bottom:0;width:1px;background:var(--yesil);left:50%;z-index:3} /* ══════════ AYRIŞMA — dolan çubuk karşılaştırma ══════════ */ .ayrisma{display:grid;gap:clamp(18px,3vw,34px)} .ay-satir{display:grid;grid-template-columns:minmax(96px,168px) 1fr auto;gap:clamp(12px,2.5vw,26px);align-items:center;padding:18px 0;border-bottom:1px solid var(--cizgi)} .ay-ad{font-family:var(--olcu);font-size:12.4px;letter-spacing:.03em} .ay-ad b{display:block;font-family:var(--baslik);font-size:17px;font-weight:600;letter-spacing:-.02em} .ay-ray{height:9px;background:var(--karton);position:relative;overflow:hidden} .ay-dolu{position:absolute;inset:0 auto 0 0;width:var(--w,10%);background:var(--renk,var(--yesil-koyu));transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--hiz)} .ay-satir.gor .ay-dolu{transform:scaleX(1)} .ay-sure{font-family:var(--olcu);font-size:13px;white-space:nowrap;color:var(--gri)} .ay-satir.gor .ay-sure{color:var(--murekkep)} /* ══════════ ÖLÇÜ TABLOSU — gerçek filtre ══════════ */ .suzgec{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px} .suzgec button{ font-family:var(--olcu); font-size:11.4px; letter-spacing:.06em; cursor:pointer; background:transparent; border:1px solid var(--cizgi); color:var(--gri); padding:8px 15px; border-radius:2px; position:relative; overflow:hidden; transition:color .3s var(--hiz), border-color .3s var(--hiz); } /* düğme dolgusu alttan yukarı doluyor — bardak dolumu */ .suzgec button::before{ content:''; position:absolute; inset:0; background:var(--murekkep); transform:translateX(-101%); transition:transform .38s var(--hiz); z-index:-1; } .suzgec button{z-index:0;isolation:isolate} .suzgec button:hover{border-color:var(--murekkep);color:var(--murekkep)} .suzgec button.acik{color:var(--kagit);border-color:var(--murekkep)} .suzgec button.acik::before{transform:translateX(0)} .tablo{width:100%;border-collapse:collapse;font-family:var(--olcu);font-size:12.8px} .tablo th{ text-align:left; font-weight:500; font-size:10.4px; letter-spacing:.16em; color:var(--gri); border-bottom:2px solid var(--murekkep); padding:0 10px 9px; } .tablo th.s,.tablo td.s{text-align:right} .tablo td{border-bottom:1px solid var(--cizgi);padding:11px 10px;vertical-align:middle} .tablo tbody tr{transition:background .22s} .tablo tbody tr:hover{background:var(--kagit-ac)} .tablo tr.gizli{display:none} .tablo .tk{display:flex;align-items:center;gap:12px;font-family:var(--baslik);font-size:14.6px;font-weight:600;letter-spacing:-.02em} .tablo .tk img{width:44px;height:44px;object-fit:contain;flex:none} .tablo .rozet{font-family:var(--olcu);font-size:9.6px;letter-spacing:.1em;padding:3px 7px;border:1px solid currentColor;color:var(--yesil-koyu)} .tablo .rozet.pe{color:var(--gri)} .tablo-not{font-size:11.8px;color:var(--gri-acik);margin-top:14px;font-family:var(--govde)} /* ══════════ BASKI — desen şeridi ══════════ */ .baski{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)} .baski figure{margin:0;background:var(--kagit-ac);padding:clamp(18px,3vw,32px);position:relative;overflow:hidden} .baski img{width:100%;transition:transform .7s var(--hiz)} .baski figure:hover img{transform:scale(1.06) rotate(-1.2deg)} .baski figcaption{font-family:var(--olcu);font-size:10.6px;letter-spacing:.12em;color:var(--gri);margin-top:14px} /* zeminden yükselen ince yeşil şerit */ .baski figure::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yesil);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--hiz)} .baski figure:hover::after{transform:scaleX(1)} /* ══════════ TEKLİF SATIRI — cümle formu ══════════ İki sütunlu klasik form değil. Doldurulan tek cümle. */ .teklif{background:var(--ters);color:var(--ters-yazi);border-radius:2px;padding:clamp(28px,5vw,64px)} .teklif h2{color:var(--ters-yazi);font-size:clamp(23px,3vw,38px);font-weight:500;max-width:20ch;margin-bottom:26px} .cumle{font-family:var(--baslik);font-size:clamp(19px,2.5vw,31px);line-height:1.75;font-weight:300;letter-spacing:-.02em} .cumle select,.cumle input{ font:inherit; font-weight:600; color:var(--yesil); background:transparent; border:0; border-bottom:2px solid rgba(76,175,80,.4); padding:0 6px 3px; appearance:none; cursor:pointer; transition:border-color .3s; min-width:2ch; } .cumle input{cursor:text;width:6ch} .cumle select:focus,.cumle input:focus{outline:none;border-bottom-color:var(--yesil)} .cumle select option{background:var(--ters);color:var(--ters-yazi)} .teklif-alt{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--cizgi-koyu)} .gonder{ position:relative; overflow:hidden; isolation:isolate; cursor:pointer; font-family:var(--olcu); font-size:12px; letter-spacing:.14em; background:transparent; color:var(--ters-yazi); border:1px solid var(--yesil); padding:14px 30px; border-radius:2px; transition:color .32s var(--hiz); } /* düğme dolgusu: iki kenardan ortaya değil, alttan yukarı — bardak dolumu */ /* düğme dolgusu: imlecin girdiği noktadan büyüyen daire (--bx/--by betikten) */ .gonder::before{content:'';position:absolute;left:var(--bx,50%);top:var(--by,50%);width:260%;aspect-ratio:1;margin:-130% 0 0 -130%;border-radius:50%;background:var(--yesil);transform:scale(0);transition:transform .55s var(--hiz);z-index:-1} .gonder:hover{color:#101B24} .gonder:hover::before{transform:scale(1)} .teklif-not{font-size:12.4px;color:var(--dip-yazi);max-width:40ch} .kod-teklif .teklif-not{color:var(--gri-acik)} /* bu kutu açık zeminli */ /* ══════════ SEVKİYAT ══════════ */ .sevk{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:1px solid var(--cizgi)} .sevk div{padding:24px clamp(14px,2vw,28px) 24px 0;border-bottom:1px solid var(--cizgi)} .sevk dt{font-family:var(--olcu);font-size:10.4px;letter-spacing:.16em;color:var(--gri);margin-bottom:7px} .sevk dd{margin:0;font-family:var(--baslik);font-size:18px;font-weight:600;letter-spacing:-.02em} .sevk small{display:block;font-family:var(--govde);font-size:12.6px;color:var(--gri);font-weight:400;letter-spacing:0;margin-top:4px;line-height:1.5} /* ══════════ DİP BİLGİ ══════════ Koli etiketi değil, bir sevkiyat künyesi: marka, hücreler, özet şerit ve kaydırınca soldan çizilen dev marka adı. */ .dip{background:var(--ters);color:var(--ters-yazi);padding:clamp(46px,8vh,92px) var(--kenar) 30px;position:relative;overflow:hidden;overflow:clip} .dip::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 60% at 12% 0%,rgba(76,175,80,.10),transparent 60%);pointer-events:none} .dip>*{position:relative} .dip::after{content:'';position:absolute;left:var(--kenar);right:var(--kenar);top:0;height:2px;background:var(--yesil);transform-origin:left;transform:scaleX(0);pointer-events:none} .yedek .dip::after,.yedek .dip-serit::before{transform:none} .dip-ust{display:flex;gap:clamp(20px,4vw,60px);align-items:flex-start;justify-content:space-between; flex-wrap:wrap;padding-bottom:clamp(24px,3.5vh,40px);border-bottom:1px solid var(--cizgi-koyu);margin-bottom:clamp(22px,3vh,34px)} .dip-marka{display:flex;align-items:center;gap:14px} .dip-marka{width:max-content} .dip-marka img{width:auto;height:44px;object-fit:contain;content:url("gorsel/logo-koyu.png")} /* dip zemini hep koyu: açık yazılı türev, yastık yok */ .dip-marka b{font-family:var(--baslik);font-size:20px;font-weight:700;letter-spacing:-.04em;display:block;line-height:1.1} .dip-marka span{font-size:12.6px;color:var(--dip-not)} .dip-cumle{max-width:48ch;color:var(--dip-yazi);font-size:14.4px;margin:0} .dip-etiket{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(18px,2.6vw,38px);margin:0} .dip-h dt{font-family:var(--baslik);font-size:10.4px;font-weight:600;letter-spacing:.19em;color:var(--yesil);margin-bottom:11px} .dip-h dd{margin:0;font-size:13.8px;line-height:1.68;color:var(--dip-yazi)} .dip-h a{transition:color .25s} .dip-h a:hover{color:var(--yesil)} .dip-ulke{color:var(--dip-yazi);display:inline-block;min-width:76px} .dip-yol{display:inline-block;margin-top:9px;font-size:12px;color:var(--yesil);position:relative} .dip-yol::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .38s var(--hiz)} .dip-yol:hover::after{transform:scaleX(1);transform-origin:left} .dip-menu{display:flex;flex-direction:column;gap:5px;align-items:flex-start} .dip-menu a{position:relative;padding-left:0;transition:padding-left .3s var(--hiz),color .25s} .dip-menu a:hover{padding-left:12px} .dip-menu a::before{content:'';position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--yesil);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hiz)} .dip-menu a:hover::before{transform:scaleX(1)} /* özet şerit: rakam üçlüsü değil, dört alan tek satırda */ .dip-serit{display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,54px);margin-top:clamp(26px,4vh,44px); padding-top:clamp(18px,2.6vh,28px);border-top:1px solid var(--cizgi-koyu)} .dip-serit{position:relative} .dip-serit::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--yesil);transform-origin:left;transform:scaleX(0)} .dip-serit span{display:flex;align-items:baseline;gap:8px} .dip-serit b{font-family:var(--baslik);font-size:clamp(20px,2.4vw,29px);font-weight:600;letter-spacing:-.035em} .dip-serit i{font-style:normal;font-size:12.6px;color:var(--dip-yazi)} /* dev marka adı: kesilmiyor, kutuya sığıyor, soldan çiziliyor */ .dip-dev-sar{margin-top:clamp(24px,4vh,46px);overflow:hidden;overflow:clip} .dip-dev{ font-family:var(--baslik); font-weight:700; letter-spacing:-.055em; line-height:.86; font-size:clamp(38px,17.2vw,340px); color:transparent; -webkit-text-stroke:1px var(--dev-cizgi); white-space:nowrap; user-select:none; width:max-content; max-width:100%; } .dip-alt{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap; margin-top:clamp(16px,2.4vh,26px);padding-top:18px;border-top:1px solid var(--cizgi-koyu)} .dip-imza{font-family:var(--baslik);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--dip-yazi)} .dip-gizlilik{color:var(--dip-yazi);border-bottom:1px solid transparent;padding-block:4px;margin-left:6px;transition:color .3s,border-color .3s} .dip-gizlilik:hover{color:var(--ters-yazi);border-color:currentColor} /* gizlilik sayfası: okunur tek sütun */ .gzl-tarih{font-family:var(--olcu);font-size:10.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--yesil-koyu);margin:0 0 26px} .gzl-liste{display:grid;gap:clamp(24px,3.4vh,38px);max-width:70ch} .gzl-oge h2{font-family:var(--baslik);font-size:clamp(17px,2.1vw,21px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px} .gzl-oge p{margin:0;font-size:15px;line-height:1.75;color:var(--gri)} .gzl .satir-git{margin-top:clamp(30px,5vh,52px)} .dip-yapan{display:flex;align-items:center;gap:11px;font-family:var(--baslik);font-size:10.4px;font-weight:600;letter-spacing:.15em;color:var(--dip-yazi);transition:color .25s} .dip-yapan:hover{color:var(--ters-yazi)} .dip-yapan img{height:17px;filter:brightness(0) invert(1);opacity:.86} .dip-not{font-size:11.4px;color:var(--dip-not);margin:16px 0 0;line-height:1.6;max-width:74ch} @media (max-width:760px){ .dip-serit{gap:14px 26px} .dip-serit span{flex-direction:column;gap:0} } /* ══════════ HAREKETLER ══════════ Beş ayrı hareket, hepsi kaydırma zaman çizelgesine bağlı. */ @supports (animation-timeline: view()){ /* 1 · satır maskesi: alttan sıyrılarak açılan başlık */ .h-satir{animation:hSatir linear both;animation-timeline:view();animation-range:entry 8% cover 26%} @keyframes hSatir{from{clip-path:inset(0 0 100% 0);transform:translateY(14px)}to{clip-path:inset(0 0 -8% 0);transform:none}} /* 2 · kelime kelime mürekkep: her kelime kendi çizelgesiyle koyulaşıyor */ .h-kelime w{display:inline-block;color:var(--gri-acik);animation:hKelime linear both;animation-timeline:view();animation-range:entry 18% cover 46%} @keyframes hKelime{to{color:var(--murekkep)}} /* 3 · çizilen çerçeve: kenar soldan sağa uzuyor */ .h-cerceve{position:relative} .h-cerceve::after{content:'';position:absolute;left:0;top:0;height:2px;background:var(--yesil-koyu);width:100%;transform:scaleX(0);transform-origin:left;animation:hCerceve linear both;animation-timeline:view();animation-range:entry 12% cover 34%} @keyframes hCerceve{to{transform:scaleX(1)}} /* 4 · sıyrılan görsel: perde yukarı kalkıyor */ .h-perde{animation:hPerde linear both;animation-timeline:view();animation-range:entry 4% cover 32%} @keyframes hPerde{from{clip-path:inset(0 0 100% 0 round var(--kose,22px))}to{clip-path:inset(0 0 0 0 round var(--kose,22px))}} /* 5 · yükselen satır: tablo satırları sırayla */ .h-yukselen{animation:hYuk linear both;animation-timeline:view();animation-range:entry 0% cover 18%} @keyframes hYuk{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* 5b · dip bilgi: üst çizgi mürekkep gibi soldan çekiliyor, şerit çizgisi de */ .dip::after{animation:hCizgi linear both;animation-timeline:view();animation-range:entry 0% entry 55%} .dip-serit::before{animation:hCizgi linear both;animation-timeline:view();animation-range:entry 0% entry 100%} @keyframes hCizgi{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* 6 · dev marka adı: kaydırınca soldan çiziliyor, sayfa sonunda TAMAMLANIYOR */ .dip-dev{animation:hDev linear both;animation-timeline:view();animation-range:entry 0% entry 92%} @keyframes hDev{from{clip-path:inset(0 100% 0 0);transform:translateX(-3%)}to{clip-path:inset(0 -2% 0 0);transform:none}} } /* desteklemeyen tarayıcı için yedek — betik.js açar */ .yedek .h-satir,.yedek .h-perde,.yedek .h-yukselen{opacity:0;transform:translateY(16px);transition:opacity .7s var(--hiz),transform .7s var(--hiz)} .yedek .h-satir.gor,.yedek .h-perde.gor,.yedek .h-yukselen.gor{opacity:1;transform:none} .yedek .h-kelime w{color:var(--murekkep)} .yedek .h-cerceve::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--yesil-koyu);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--hiz)} .yedek .h-cerceve.gor::after{transform:scaleX(1)} .yedek .dip-dev{clip-path:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} html{scroll-behavior:auto} } /* ══════════ TELEFON ══════════ */ @media (max-width:1080px){ .acilis{grid-template-columns:1fr 1.15fr;grid-template-areas:"ust ust" "olcu sahne" "kunye kunye";gap:26px} .kunye{position:static} .seri-ic{grid-template-columns:1fr} .seri-sinir{display:none} } @media (max-width:760px){ .acilis{grid-template-columns:1fr;grid-template-areas:"ust" "sahne" "olcu" "kunye";min-height:auto;padding-top:calc(72px + 26px)} .sahne{aspect-ratio:1/.8} .kunye{position:static} .ay-satir{grid-template-columns:1fr;gap:9px} .ay-sure{text-align:right} .tablo{font-size:11.4px} .tablo:not(.mrd-tablo) th:nth-child(4),.tablo:not(.mrd-tablo) td:nth-child(4), .tablo:not(.mrd-tablo) th:nth-child(5),.tablo:not(.mrd-tablo) td:nth-child(5){display:none} .cumle{font-size:19px;line-height:1.9} } /* ══════════ ALT SAYFA ORTAK ══════════ */ .sayfa-bas{ padding:calc(72px + clamp(34px,6vh,74px)) var(--kenar) clamp(20px,3vh,34px); display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,60px); flex-wrap:wrap; } .sayfa-bas h1{font-size:clamp(30px,4.6vw,58px);font-weight:500;margin-top:10px} .sayfa-bas p{color:var(--gri);max-width:44ch;margin:0;font-size:14.6px} /* ══════════ KARŞILAŞTIRMA TEZGÂHI ══════════ */ .tezgah-sar{padding:0 var(--kenar)} .tezgah{ border:1px solid var(--cizgi); background:var(--kagit-ac); border-top:2px solid var(--murekkep); min-height:96px; position:relative; } .tezgah-bos{ padding:34px 26px; text-align:center; font-family:var(--olcu); font-size:12.4px; letter-spacing:.04em; color:var(--gri); transition:color .3s, transform .3s var(--hiz); } .tezgah-bos.uyar{color:var(--yesil-koyu);transform:scale(1.03)} .tz-kafalar{display:grid;grid-template-columns:minmax(120px,168px) repeat(var(--n),1fr);border-bottom:1px solid var(--cizgi)} .tz-kafalar::before{content:''} .tz-kafa{padding:18px clamp(12px,2vw,22px);border-left:1px solid var(--cizgi);display:flex;flex-direction:column;gap:6px;align-items:flex-start} .tz-kafa img{width:56px;height:56px;object-fit:contain;} .tz-kafa b{font-family:var(--baslik);font-size:19px;font-weight:600;letter-spacing:-.025em} .tz-kafa em{font-style:normal;font-family:var(--olcu);font-size:10.4px;letter-spacing:.08em;color:var(--gri)} .tz-satirlar{display:block} .tz-satir{display:grid;grid-template-columns:minmax(120px,168px) repeat(var(--n),1fr);border-bottom:1px solid var(--cizgi);align-items:center} .tz-satir:last-child{border-bottom:0} .tz-ad{font-family:var(--olcu);font-size:11.4px;letter-spacing:.06em;color:var(--gri);padding:12px clamp(12px,2vw,22px)} .tz-deger{font-family:var(--olcu);font-size:13px;padding:12px clamp(12px,2vw,22px);border-left:1px solid var(--cizgi)} .tz-deger i{font-style:normal;color:var(--gri-acik);font-size:11px} /* farklı olan satır işaretleniyor: solda yeşil tırnak */ .tz-satir.farkli{background:rgba(76,175,80,.055)} .tz-satir.farkli .tz-ad{color:var(--yesil-koyu);position:relative} .tz-satir.farkli .tz-ad::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--yesil-koyu)} .tz-temizle{ display:block; margin:0 0 0 auto; font-family:var(--olcu); font-size:10.6px; letter-spacing:.14em; background:none; border:0; border-top:1px solid var(--cizgi); color:var(--gri); padding:12px clamp(12px,2vw,22px); cursor:pointer; width:100%; text-align:right; transition:color .25s, background .25s; } .tz-temizle:hover{color:var(--murekkep);background:var(--kagit)} /* ══════════ KATALOG KUTULARI ══════════ Kart ızgarası değil: kenarları paylaşan tek bir tabaka. */ .katalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;border:1px solid var(--cizgi)} .kt{ background:var(--kagit-ac); border:0; box-shadow:0 0 0 1px var(--cizgi); cursor:pointer; text-align:left; padding:0; display:flex; flex-direction:column; position:relative; overflow:hidden; font-family:var(--govde); color:var(--murekkep); transition:background .3s var(--hiz); } .kt.gizli{display:none} .kt:hover{background:var(--beyaz)} .kt-gorsel{display:block;padding:20px 20px 6px;background:transparent} .kt-gorsel img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .55s var(--hiz)} .kt:hover .kt-gorsel img{transform:translateY(-5px) scale(1.04)} .kt-ust{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 20px 4px} .kt-ust b{font-family:var(--baslik);font-size:22px;font-weight:600;letter-spacing:-.03em} .kt-ust b i{font-style:normal;font-size:13px;font-weight:400;color:var(--gri)} .kt-ust em{font-style:normal;font-family:var(--olcu);font-size:10px;letter-spacing:.06em;color:var(--gri-acik)} .kt-alt{display:flex;gap:12px;padding:0 20px 16px;font-family:var(--olcu);font-size:10.8px;color:var(--gri);flex-wrap:wrap} .kt-eylem{ font-family:var(--olcu); font-size:9.8px; letter-spacing:.14em; text-transform:uppercase; padding:11px 20px; border-top:1px solid var(--cizgi); color:var(--gri-acik); margin-top:auto; transition:color .25s, background .25s; } .kt:hover .kt-eylem{color:var(--murekkep)} .kt.secili{background:var(--beyaz)} .kt.secili .kt-eylem{background:var(--murekkep);color:var(--kagit-ac);border-top-color:var(--murekkep)} /* seçili kutunun üstünde ölçü tırnağı */ .kt.secili::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--yesil-koyu);z-index:2} @media (max-width:760px){ .tz-kafalar,.tz-satir{grid-template-columns:minmax(88px,104px) repeat(var(--n),1fr)} .tz-ad{font-size:10.4px;padding:10px 10px} .tz-deger{font-size:11.6px;padding:10px 10px} .tz-kafa{padding:13px 10px} .tz-kafa img{width:42px;height:42px} .katalog{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .kt-ust b{font-size:18px} } /* ══════════ ÜRETİM SAYFASI ══════════ */ .genis{margin:0;border:1px solid var(--cizgi);background:var(--kagit-ac)} .genis img{width:100%;height:min(58vh,470px);object-fit:cover;filter:saturate(.92) contrast(1.05)} .genis figcaption{display:flex;justify-content:space-between;gap:16px;padding:15px clamp(16px,2.4vw,26px); font-family:var(--olcu);font-size:11.4px;letter-spacing:.06em;color:var(--gri);border-top:1px solid var(--cizgi)} .genis figcaption .sag{color:var(--murekkep);font-weight:500} /* hat adımları: numara yok, ölçü tırnağı var */ .hatt{list-style:none;margin:0;padding:0;border-top:1px solid var(--cizgi)} .hatt-adim{display:grid;grid-template-columns:28px minmax(120px,210px) 1fr;gap:clamp(12px,2.5vw,30px); align-items:baseline;padding:16px 0;border-bottom:1px solid var(--cizgi)} .hatt-tirnak{position:relative;height:1px;top:8px} .hatt-tirnak::before{content:'';position:absolute;left:0;top:-6px;width:2px;height:13px;background:var(--yesil-koyu)} .hatt-tirnak::after{content:'';position:absolute;left:6px;top:-2px;width:16px;height:1px;background:var(--cizgi)} .hatt-ad{font-family:var(--baslik);font-size:18px;font-weight:600;letter-spacing:-.025em} .hatt-aciklama{color:var(--gri);font-size:14.4px;max-width:56ch} .hatt-adim:hover .hatt-tirnak::after{background:var(--yesil-koyu)} .ikili{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--cizgi);background:var(--kagit-ac)} .ikili figure{margin:0} .ikili figure img{width:100%;height:100%;min-height:300px;object-fit:cover} .ikili figcaption{padding:13px clamp(14px,2vw,22px);font-family:var(--olcu);font-size:10.8px;letter-spacing:.08em;color:var(--gri);border-top:1px solid var(--cizgi)} .ikili-yazi{padding:clamp(22px,3.4vw,46px);border-left:1px solid var(--cizgi)} .ikili-yazi h3{font-size:clamp(21px,2.6vw,31px);font-weight:500;margin-bottom:16px;max-width:20ch} .ikili-yazi p{color:var(--gri);font-size:14.6px;max-width:44ch} /* ══════════ İLETİŞİM SAYFASI ══════════ */ .ofisler{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)} .ofis{background:var(--kagit-ac);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:9px} .ofis-yer{font-family:var(--olcu);font-size:10px;letter-spacing:.18em;color:var(--yesil-koyu)} .ofis h3{font-size:24px;font-weight:600;margin-bottom:2px} .ofis p{color:var(--gri);font-size:13.8px;margin:0;max-width:32ch} .ofis-tel{font-family:var(--olcu);font-size:16px;letter-spacing:-.01em;margin-top:auto;padding-top:14px;position:relative;width:fit-content} .ofis-tel::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--murekkep);transform:scaleX(0);transform-origin:right;transition:transform .38s var(--hiz)} .ofis-tel:hover::after{transform:scaleX(1);transform-origin:left} .ofis-mail{font-family:var(--olcu);font-size:12.4px;color:var(--gri);width:fit-content} .ofis-mail:hover{color:var(--yesil-koyu)} /* ── yumuşak köşe sistemi: sert köşeli "acemi" görünüm bitti (Bilo 8 Eyl) ── */ :root{--kose:22px} figure.genis,.h-perde,.fabrika-foto figure,.fabrika-dis,.ur-izgara,.ofisler,.paket-cizim,.kat-liste,.serit-kutu img{border-radius:var(--kose);overflow:hidden} figure.genis,.fabrika-dis{box-shadow:0 30px 70px -42px rgba(var(--golge),.55)} /* hakkında: dergi düzeni — metin görselin üstüne taşar, iç fotoğraflar asimetrik */ .hak-metin{margin-top:clamp(-84px,-6vw,-40px);position:relative;z-index:2;background:var(--kagit);border-radius:var(--kose) var(--kose) 0 0;padding:clamp(26px,4vw,46px) clamp(22px,3.4vw,46px) 0} .fabrika-foto{align-items:start} .fabrika-foto figure:nth-child(2){margin-top:clamp(26px,4.5vw,72px)} .fabrika-dis{position:relative} .fabrika-metin{margin-top:30px} .zaman{position:relative;padding-top:26px} .zaman::before{content:'';position:absolute;top:0;left:0;height:1px;width:100%;background:var(--cizgi-koyu);transform:scaleX(0);transform-origin:left} @supports (animation-timeline: view()){.zaman::before{animation:cizgiCek linear both;animation-timeline:view();animation-range:entry 10% cover 45%}} @keyframes cizgiCek{to{transform:scaleX(1)}} /* iletişim: kartlar ayrık, yuvarlak, hover'da yükselir */ .ofisler{gap:clamp(14px,1.8vw,24px);background:none;border:0;overflow:visible} .ofis{border:1px solid var(--cizgi);border-radius:var(--kose);transition:translate .5s var(--hiz),box-shadow .5s var(--hiz)} .ofis:hover{translate:0 -6px;box-shadow:0 30px 60px -36px rgba(var(--golge),.5)} @supports (animation-timeline: view()){.dagitim-liste li{animation:hYuk linear both;animation-timeline:view();animation-range:entry 0% cover 22%}} /* başlıklar: kelimeler maskeden yükselir (JS: yaziKur) */ .ak-blok i{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .16em .12em;margin:-.08em -.16em -.12em} .ak-blok i b{display:inline-block;font-weight:inherit;translate:0 108%;transition:translate .8s var(--hiz);transition-delay:calc(var(--k,0)*55ms)} .ak-blok.gor i b{translate:0 0} @media (prefers-reduced-motion:reduce){.ak-blok i b{translate:0 0;transition:none}.zaman::before{animation:none;transform:none}} /* hakkında: büyük giriş paragrafı kaydırdıkça mürekkeple dolar */ @supports (animation-timeline: view()){ .hak-ilk{background:linear-gradient(90deg,var(--murekkep) 50%,var(--gri-acik) 50%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hakDol linear both;animation-timeline:view();animation-range:entry 20% cover 55%} @keyframes hakDol{to{background-position:0 0}} } .hatt-adim{transition:translate .45s var(--hiz)} .hatt-adim:hover{translate:6px 0} /* hero: OK compost HOME rozeti — "sitenin en başında görülmeli" (müşteri 8 Eyl) */ .acilis-foto{position:relative} .acilis-rozet{position:absolute;left:14px;bottom:14px;z-index:3;line-height:0;background:#fff;border-radius:12px;padding:7px 10px;box-shadow:0 14px 34px -18px rgba(0,0,0,.45);opacity:0;translate:0 12px;transition:opacity .6s var(--hiz) 1.3s,translate .7s var(--hiz) 1.3s,scale .35s var(--hiz)} body.hazir .acilis-rozet,body.acildi .acilis-rozet{opacity:1;translate:0 0} .acilis-rozet:hover{scale:1.06} .acilis-foto .acilis-rozet img{display:block;width:118px;height:auto} @media (max-width:860px){.acilis-foto .acilis-rozet img{width:96px}} /* hakkında: sertifika duvarı — OK compost öne çıkan yatay kart + 3'lü dengeli ızgara */ .ser-one{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,40px);background:var(--kagit-ac);border:1px solid var(--cizgi);border-radius:var(--kose);padding:clamp(16px,2.4vw,28px) clamp(16px,2.6vw,34px);margin-bottom:clamp(14px,2vw,24px);color:inherit;text-decoration:none;transition:translate .45s var(--hiz),box-shadow .45s var(--hiz),border-color .3s} .ser-one:hover{translate:0 -5px;border-color:var(--yesil-koyu);box-shadow:0 28px 54px -34px rgba(var(--golge),.5)} .ser-one-rozet{width:clamp(120px,14vw,170px);height:auto;background:#fff;border-radius:12px;padding:8px 10px;box-shadow:0 10px 26px -16px rgba(0,0,0,.4)} .ser-one-yazi b{display:block;font-size:clamp(16px,1.6vw,20px);font-weight:600} .ser-one-yazi small{display:block;font-family:var(--olcu);font-size:11px;letter-spacing:.05em;color:var(--gri);margin:6px 0 10px} .ser-one-yazi em{font-style:normal;font-family:var(--olcu);font-size:10.5px;letter-spacing:.12em;color:var(--yesil-koyu)} .ser-one-gorsel{width:clamp(70px,7vw,96px);border-radius:10px;overflow:hidden;border:1px solid var(--cizgi);background:#fff;rotate:3deg;transition:rotate .45s var(--hiz)} .ser-one:hover .ser-one-gorsel{rotate:0deg} .ser-one-gorsel img{display:block;width:100%;height:auto} @media (max-width:700px){.ser-one{grid-template-columns:auto 1fr}.ser-one-gorsel{display:none}} .ser-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px)} @media (max-width:900px){.ser-izgara{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.ser-izgara{grid-template-columns:1fr 1fr;gap:10px}} .ser-kart{display:flex;flex-direction:column;gap:8px;background:var(--kagit-ac);border:1px solid var(--cizgi);border-radius:16px;padding:12px 12px 14px;color:inherit;text-decoration:none;transition:translate .45s var(--hiz),box-shadow .45s var(--hiz),border-color .3s} .ser-kart:hover{translate:0 -6px;border-color:var(--yesil-koyu);box-shadow:0 26px 50px -32px rgba(var(--golge),.5)} .ser-gorsel{border-radius:10px;overflow:hidden;border:1px solid var(--cizgi);background:#fff} .ser-gorsel img{display:block;width:100%;height:auto;transition:transform .8s var(--hiz)} .ser-kart:hover .ser-gorsel img{transform:scale(1.04)} .ser-kart b{font-size:13.6px;font-weight:600;line-height:1.35} .ser-kart small{font-family:var(--olcu);font-size:10.5px;letter-spacing:.05em;color:var(--gri)} .ser-kart em{font-style:normal;font-family:var(--olcu);font-size:10.5px;letter-spacing:.12em;color:var(--yesil-koyu);margin-top:auto} /* sertifika penceresi: sağ üstten zımbalı belge, sayfalar zımba ekseninde çevrilir */ .ser-pencere{position:fixed;inset:0;z-index:120;display:grid;place-items:center;visibility:hidden;pointer-events:none} .ser-pencere.acik{visibility:visible;pointer-events:auto} .ser-pencere .pencere-arka{opacity:0;transition:opacity .4s} .ser-pencere.acik .pencere-arka{opacity:1} .ser-sahne{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:center} .ser-kagit-sar{position:relative;height:min(70vh,760px);aspect-ratio:700/990;max-width:86vw;perspective:1400px} .ser-kagit{position:absolute;inset:0;background:#fff;border-radius:6px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);overflow:hidden;transform-origin:7% 3.2%;will-change:transform} /* kalkan yaprağın üstüne kıvrım gölgesi: çıplak beyaz dikdörtgen hissini kırar */ .ser-kagit::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(0,0,0,.16),transparent 34%),linear-gradient(0deg,rgba(0,0,0,.05),transparent 30%);opacity:0;transition:opacity .45s} .ser-kagit.kalkiyor::after{opacity:.95} .ser-kagit canvas{display:block;width:100%;height:100%} .ser-kagit.ust{z-index:2} .ser-zimba{position:absolute;left:4.5%;top:1.8%;z-index:5;rotate:-38deg;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} .ser-zimba i{display:block;width:26px;height:4.5px;border-radius:3px;background:linear-gradient(180deg,#d8dcdf,#9aa1a6 60%,#7c848a);margin-bottom:2px} .ser-zimba i:last-child{width:22px;margin-left:2px;opacity:.85} .ser-bar{display:flex;align-items:center;gap:18px;background:var(--kagit-ac);border:1px solid var(--cizgi);border-radius:99px;padding:9px 18px;box-shadow:0 16px 40px -24px rgba(0,0,0,.5);opacity:0;translate:0 10px;transition:opacity .45s var(--hiz) .35s,translate .5s var(--hiz) .35s} .ser-pencere.acik .ser-bar{opacity:1;translate:0 0} .ser-bar b{font-size:13.6px;font-weight:600;max-width:34ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ser-sayfa{display:flex;align-items:center;gap:8px} .ser-sayfa em{font-style:normal;font-family:var(--olcu);font-size:11px;letter-spacing:.08em;color:var(--gri);white-space:nowrap} .ser-sayfa button{width:30px;height:30px;border-radius:50%;border:1px solid var(--cizgi-koyu);background:none;color:var(--murekkep);font-size:17px;line-height:1;cursor:pointer;transition:background .3s,color .3s,opacity .3s} .ser-sayfa button:hover:not(:disabled){background:var(--yesil-koyu);border-color:var(--yesil-koyu);color:#fff} .ser-sayfa button:disabled{opacity:.3;cursor:default} .ser-bar a{font-family:var(--olcu);font-size:10.5px;letter-spacing:.12em;color:var(--yesil-koyu);text-transform:uppercase;white-space:nowrap} .ser-kapat{position:absolute;top:-52px;right:-6px} @media (max-width:640px){.ser-bar{gap:10px;padding:8px 12px}.ser-bar b{display:none}.ser-kapat{top:-46px;right:0}} /* telefonda süzgeç: ekranı kaplayan şeritler yerine alttan açılan ÇEKMECE (Bilo 9 Eyl) */ .amb-cekmece-bas{display:none} @media (max-width:760px){ .amb-cekmece{position:fixed;left:0;right:0;bottom:0;z-index:96;background:var(--kagit);border-radius:22px 22px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.45);padding:14px var(--kenar) calc(18px + env(safe-area-inset-bottom));max-height:72vh;overflow-y:auto;translate:0 104%;transition:translate .55s cubic-bezier(.3,.9,.3,1);visibility:hidden} .amb-cekmece.acik{translate:0 0;visibility:visible} .amb-cekmece-bas{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .amb-cekmece-bas b{font-size:17px;font-weight:600} .amb-cekmece-bas::before{content:'';position:absolute;top:7px;left:50%;translate:-50% 0;width:44px;height:4px;border-radius:3px;background:var(--cizgi-koyu)} .amb-cekmece-kapat{padding:9px 18px;font-size:12px;background:var(--yesil-koyu);color:#fff;border:0;border-radius:99px} .amb-cekmece .amb-suzgec{margin-bottom:6px} .amb-cekmece .amb-malzeme{margin-top:4px;border-top:1px dashed var(--cizgi);padding-top:12px} .amb-cekmece-arka{position:fixed;inset:0;z-index:95;background:rgba(8,12,16,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s;pointer-events:none} .amb-cekmece-arka.acik{opacity:1;pointer-events:auto} .amb-suz-dugme{position:fixed;left:14px;bottom:14px;z-index:58;display:inline-flex;align-items:center;gap:8px;background:var(--murekkep);color:var(--kagit-ac);border:0;border-radius:99px;padding:12px 18px;font-family:var(--olcu);font-size:12px;letter-spacing:.1em;box-shadow:0 14px 34px -16px rgba(0,0,0,.5);transition:translate .35s var(--hiz)} .amb-suz-dugme:active{translate:0 2px} .amb-suz-dugme svg{width:15px;height:15px} .amb-suz-dugme b{background:var(--yesil-koyu);color:#fff;border-radius:99px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px} body:has(#sepet:not([hidden])) .amb-suz-dugme{bottom:96px} } .ap-buyutec-arka{position:fixed;inset:0;z-index:135;opacity:0;transition:opacity .4s} .ap-buyutec-arka.acik{opacity:1} /* baskı önizleme: slogan girişi */ .onizleme-slogan{display:flex;gap:8px;margin-top:12px;max-width:420px} .onizleme-slogan input{flex:1;min-width:0;font:inherit;font-size:13.6px;padding:10px 14px;border:1px solid var(--cizgi-koyu);border-radius:99px;background:var(--kagit-ac);color:var(--murekkep);outline:none;transition:border-color .3s,box-shadow .3s} .onizleme-slogan input:focus{border-color:var(--yesil-koyu);box-shadow:0 0 0 3px rgba(76,175,80,.18)} /* sosyal medya: masaüstünde sağda dikey ray, dipte satır (müşteri 8 Eyl) */ .sosyal-ray{position:fixed;right:20px;top:50%;translate:0 -50%;z-index:56;display:flex;flex-direction:column;align-items:center;gap:12px} .sosyal-cizgi{width:1px;height:34px;background:var(--cizgi-koyu);transform:scaleY(0);transition:transform .8s var(--hiz) .9s} body.acildi .sosyal-cizgi{transform:scaleY(1)} .sosyal-dugme{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--murekkep);background:var(--kagit-ac);border:1px solid var(--cizgi);opacity:0;translate:18px 0;transition:opacity .5s var(--hiz),translate .6s var(--hiz),background .3s,color .3s,border-color .3s,scale .3s var(--hiz);transition-delay:calc(.7s + var(--s)*.12s),calc(.7s + var(--s)*.12s),0s,0s,0s,0s} body.acildi .sosyal-dugme{opacity:1;translate:0 0} .sosyal-dugme{position:relative;will-change:translate} .sosyal-dugme.miknatis{transition:background .3s,color .3s,border-color .3s} /* mıknatıs sürerken translate geçişi kapalı, yay JS'te */ .sosyal-dugme svg{width:17px;height:17px;transition:rotate .4s var(--hiz),scale .4s var(--hiz)} .sosyal-dugme:hover{background:var(--yesil-koyu);border-color:var(--yesil-koyu);color:#fff} .sosyal-dugme:hover svg{rotate:-10deg;scale:1.08} /* isim etiketi: maskeden sola kayarak çıkar */ .sosyal-dugme::after{content:attr(aria-label);position:absolute;right:calc(100% + 12px);top:50%;translate:8px -50%;background:var(--murekkep);color:var(--kagit-ac);font-family:var(--olcu);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:99px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s var(--hiz),translate .45s var(--hiz)} .sosyal-dugme:hover::after{opacity:1;translate:0 -50%} /* sıralı nabız: markanın nokta-dalga dili, 7 sn'de bir düğmeleri sırayla dolaşır */ .sosyal-dugme::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1.4px solid var(--yesil-koyu);opacity:0;scale:.6;animation:sosyalDalga 7s ease-out infinite;animation-delay:calc(2.6s + var(--s)*.5s)} @keyframes sosyalDalga{0%,86%{scale:.6;opacity:0}90%{scale:1;opacity:.8}100%{scale:1.7;opacity:0}} .sosyal-dugme:hover::before{animation-play-state:paused;opacity:0} /* tıklama halkası */ .sosyal-dugme i{position:absolute;inset:0;border-radius:50%;pointer-events:none} .sosyal-dugme.dalga i{animation:sosyalTik .5s ease-out} @keyframes sosyalTik{from{box-shadow:0 0 0 0 rgba(76,175,80,.55)}to{box-shadow:0 0 0 16px rgba(76,175,80,0)}} /* ray çizgileri hover'da yeşile dolarak düğmeye akar */ .sosyal-ray:hover .sosyal-cizgi{background:linear-gradient(var(--cizgi-koyu),var(--yesil-koyu))} .sosyal-ray:hover .sosyal-cizgi:last-child{background:linear-gradient(var(--yesil-koyu),var(--cizgi-koyu))} @media (max-width:1100px){.sosyal-ray{display:none}} @media (prefers-reduced-motion:reduce){.sosyal-dugme::before{animation:none}.sosyal-dugme{transition:none}} .dip-sosyal{display:flex;gap:10px;margin:18px 0 6px} .dip-sosyal-dugme{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--dip-yazi);border:1px solid rgba(255,255,255,.18);transition:background .3s,color .3s,border-color .3s,translate .35s var(--hiz)} .dip-sosyal-dugme svg{width:17px;height:17px} .dip-sosyal-dugme:hover{background:#4CAF50;border-color:#4CAF50;color:#08110B;translate:0 -3px} /* ana sayfa: Squeezy Cup vitrini (müşteri isteği 8 Eyl) */ .squeezy-kutu{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,44px);align-items:center;background:var(--kagit-ac);border:1px solid var(--cizgi);border-radius:var(--kose);padding:clamp(24px,3.6vw,52px)} .squeezy-yazi p{color:var(--gri);max-width:52ch;margin:14px 0 20px} .squeezy-not{font-family:var(--olcu);font-size:11px!important;letter-spacing:.05em;color:var(--gri-acik)!important;margin-top:16px!important} .squeezy-gorsel{margin:0;display:grid;place-items:center;position:relative} .squeezy-gorsel::before{content:'';position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(76,175,80,.16),transparent 70%)} .squeezy-gorsel img{width:min(320px,70%);height:auto;position:relative;animation:squeezyNefes 5.5s ease-in-out infinite} @keyframes squeezyNefes{0%,100%{translate:0 0}50%{translate:0 -12px}} @media (max-width:860px){.squeezy-kutu{grid-template-columns:1fr}.squeezy-gorsel{order:-1}.squeezy-gorsel img{width:min(230px,60%)}} @media (prefers-reduced-motion:reduce){.squeezy-gorsel img{animation:none}} .amb-malzeme{margin-top:-16px;padding-top:10px;border-top:1px dashed var(--cizgi)} /* ambalaj: tüm ürünler tarayıcısı */ .amb-suzgec{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px} .amb-cip{font-family:var(--olcu);font-size:12px;letter-spacing:.04em;color:var(--murekkep);background:var(--kagit-ac);border:1px solid var(--cizgi);padding:8px 13px;border-radius:99px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:background .3s,color .3s,border-color .3s,translate .3s var(--hiz)} .amb-cip b{font-weight:600;color:var(--gri);transition:color .3s} .amb-cip:hover{border-color:var(--yesil-koyu);translate:0 -2px} .amb-cip.acik{background:var(--yesil-koyu);border-color:var(--yesil-koyu);color:#fff} .amb-cip.acik b{color:rgba(255,255,255,.75)} .ur.kapali,.ur.beklemede{display:none} .ur[data-kod]{cursor:pointer} .ur.ur-bardak{color:inherit;text-decoration:none} /* kare kutu + cover: görünen alan = çizilen alan; pencereye uçuş piksel piksel oturur */ .ur-bardak .ur-gorsel{aspect-ratio:1} .ur-bardak .ur-gorsel img{object-fit:cover} .ur-bardak .ur-yazi small{color:var(--gri);font-family:var(--olcu);font-size:11px;letter-spacing:.05em} .amb-rehber{margin:-8px 0 22px} .ap-sahne img{object-fit:contain;background:#fff} .ap-kat{font-family:var(--olcu);font-size:12px;letter-spacing:.06em;color:var(--gri);margin:2px 0 10px} .ap-ekle.cikarilacak{background:transparent;color:var(--murekkep);box-shadow:inset 0 0 0 1.4px var(--cizgi-koyu)} html[data-tema="dark"] .ap-ekle.cikarilacak{color:var(--ters-yazi)} @keyframes urGel{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}} .ur.gel{animation:urGel .55s var(--hiz) both;animation-delay:calc(min(var(--g,0),11)*45ms)} .amb-nobet{display:flex;justify-content:center;gap:8px;padding:34px 0 8px} .amb-nobet i{width:7px;height:7px;border-radius:50%;background:var(--yesil-koyu);opacity:.35;animation:nobetAtim 1.2s ease-in-out infinite} .amb-nobet i:nth-child(2){animation-delay:.18s}.amb-nobet i:nth-child(3){animation-delay:.36s} .amb-nobet.bitti{visibility:hidden} @keyframes nobetAtim{50%{opacity:1;translate:0 -5px}} /* yukarı çık düğmesi: sağ altta, kaydırınca belirir; sepet çubuğu varken üstüne biner */ .yukari{position:fixed;right:18px;bottom:18px;z-index:58;width:46px;height:46px;border-radius:50%;border:1px solid var(--cizgi-koyu);background:var(--kagit-ac);color:var(--murekkep);display:grid;place-items:center;cursor:pointer;opacity:0;translate:0 14px;pointer-events:none;transition:opacity .4s,translate .4s var(--hiz),background .3s,color .3s;box-shadow:0 10px 26px -14px rgba(var(--golge),.5)} .yukari.gorunur{opacity:1;translate:0 0;pointer-events:auto} .yukari:hover{background:var(--yesil-koyu);color:#fff;border-color:var(--yesil-koyu)} .yukari svg{transition:translate .35s var(--hiz)} .yukari:hover svg{translate:0 -2px} body:has(#sepet:not([hidden])) .yukari{bottom:84px} @media (max-width:760px){.yukari{width:42px;height:42px;right:14px;bottom:14px}body:has(#sepet:not([hidden])) .yukari{bottom:96px}} /* tüm fotoğraflara ince nefes: görünür figürlerde hover'da hafif yaklaşma */ .h-perde img,.fabrika-foto img,.fabrika-dis img,figure.genis img{transition:transform 1s var(--hiz)} .h-perde:hover img,.fabrika-foto figure:hover img,.fabrika-dis:hover img,figure.genis:hover img{transform:scale(1.025)} @media (prefers-reduced-motion:reduce){.ur.gel{animation:none}.amb-nobet i{animation:none}.h-perde:hover img,.fabrika-foto figure:hover img,.fabrika-dis:hover img,figure.genis:hover img{transform:none}} /* hakkında: fabrika bölümü — dış cephe + gerçek makine salonu fotoğrafları */ .fabrika-dis img{width:100%;height:auto;display:block} .fabrika-metin{margin:26px 0 18px;max-width:60ch} .fabrika-metin p{color:var(--gri);margin:10px 0 0} .fabrika-foto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,22px)} .fabrika-foto figure{margin:0} .fabrika-foto img{width:100%;height:auto;display:block} @media (max-width:760px){.fabrika-foto{grid-template-columns:1fr}} /* ürün sayfası: paketleme çizimi (koli verisinden) */ .paket-cizim{margin:14px 0 6px;padding:16px 10px 8px;border:1px solid var(--cizgi);background:var(--kagit-ac);color:var(--gri);max-width:560px} .paket-cizim svg{display:block;width:100%;height:auto} .pc-yazi{font-family:var(--olcu);font-size:12.5px;fill:var(--gri);letter-spacing:.03em} .pc-vurgu{fill:var(--yesil-koyu);font-weight:600;font-size:14px} .ofis-yol{font-family:var(--olcu);font-size:10px;letter-spacing:.14em;border:1px solid var(--cizgi);padding:9px 14px;width:fit-content;margin-top:8px;transition:background .28s,color .28s,border-color .28s} .ofis-yol:hover{background:var(--murekkep);color:var(--kagit-ac);border-color:var(--murekkep)} /* distribütörler tek kartta: ülke satırları, aralarında ince çizgi */ .ofisler{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .dagitim-liste{list-style:none;margin:4px 0 0;padding:0} .dagitim-liste li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--cizgi)} .dagitim-liste li:last-child{border-bottom:0} .dagitim-liste b{font-size:17px;font-weight:600} .dagitim-liste span{font-family:var(--olcu);font-size:11px;letter-spacing:.06em;color:var(--gri);text-align:right} .dagitim-not{margin-top:auto!important;padding-top:12px;font-size:12.4px!important} /* numune seçici */ .numune{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:clamp(18px,3vw,38px);align-items:start} .nm-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)} .nm-kutu{background:var(--kagit-ac);border:0;cursor:pointer;padding:14px 12px 12px;display:flex;flex-direction:column; align-items:center;gap:4px;position:relative;font-family:var(--govde);color:var(--murekkep);transition:background .28s} .nm-kutu img{width:60%;aspect-ratio:1;object-fit:contain;transition:transform .45s var(--hiz)} .nm-kutu b{font-family:var(--baslik);font-size:15.5px;font-weight:600;letter-spacing:-.02em} .nm-kutu b i{font-style:normal;color:var(--gri);font-weight:500} .nm-kutu em{font-style:normal;font-family:var(--olcu);font-size:9.4px;letter-spacing:.06em;color:var(--gri-acik)} .nm-kutu:hover{background:var(--beyaz)} .nm-kutu:hover img{transform:scale(1.07)} .nm-isaret{position:absolute;top:9px;right:9px;width:14px;height:14px;border:1px solid var(--cizgi);border-radius:2px;transition:background .25s,border-color .25s} .nm-kutu.secili{background:var(--beyaz)} .nm-kutu.secili .nm-isaret{background:var(--yesil-koyu);border-color:var(--yesil-koyu)} .nm-kutu.secili .nm-isaret::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--kagit-ac);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)} .nm-ozet{border:1px solid var(--cizgi);border-top:2px solid var(--murekkep);background:var(--kagit-ac);padding:22px 20px;position:sticky;top:92px} .nm-sayi{font-family:var(--olcu);font-size:11.6px;letter-spacing:.06em;color:var(--gri);margin-bottom:14px} .nm-sayi b{font-family:var(--baslik);font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--murekkep);display:block;line-height:1} .nm-secilenler{list-style:none;margin:0 0 20px;padding:0;max-height:230px;overflow:auto} .nm-secilenler li{display:flex;justify-content:space-between;gap:10px;font-family:var(--olcu);font-size:11.8px;padding:7px 0;border-bottom:1px solid var(--cizgi)} .nm-secilenler li span{color:var(--gri-acik)} .nm-secilenler li.bos{color:var(--gri-acik);border-bottom:0;justify-content:flex-start} .nm-ozet .gonder{width:100%;color:var(--murekkep);border-color:var(--murekkep)} .nm-ozet .gonder::before{background:var(--murekkep)} .nm-ozet .gonder:hover{color:var(--kagit-ac)} .nm-not{font-size:11.6px;color:var(--gri-acik);margin:14px 0 0;line-height:1.5} @media (max-width:860px){ .ikili{grid-template-columns:1fr} .ikili-yazi{border-left:0;border-top:1px solid var(--cizgi)} .numune{grid-template-columns:1fr} .nm-ozet{position:static} .hatt-adim{grid-template-columns:22px 1fr;gap:12px} .hatt-aciklama{grid-column:2} } /* ölçü tablosu telefonda kendi içinde yatay kayar, sayfayı genişletmez */ /* masaüstünde tablo sığar; kaydırma kabı yapılırsa satırların view() çizelgesi o kaba bağlanır ve son satırlar saydam kalır */ /* ölçü merdiveni: 12 boy ölçekli, raf çizgisinde hizalı; seçilen boyun ölçü kartı altta */ .mrd{margin-top:4px} .mrd-ipucu{font-family:var(--olcu);font-size:10.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--gri);margin:0 0 10px} .mrd-sar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(-1*var(--kenar));padding:0 var(--kenar);scroll-snap-type:x proximity} .mrd-sar::-webkit-scrollbar{display:none} .mrd-sira{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(72px,1fr);gap:0;align-items:end;--buyut:1.7} .mrd-bas{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;display:grid;justify-items:center;position:relative;color:var(--gri);font-family:var(--olcu);text-align:center;scroll-snap-align:center;width:100%;max-width:150px;justify-self:center;min-width:0} .mrd-bas::before{content:'';position:absolute;left:-1px;right:-1px;bottom:44px;height:1px;background:var(--cizgi-koyu);transition:background .3s,height .3s} .mrd-bas img{width:calc(var(--buyut)*100%);max-width:none;height:auto;aspect-ratio:1;display:block;margin-bottom:calc(var(--dip,.2)*var(--buyut)*-100%);position:relative;transition:translate .5s var(--hiz),filter .3s;filter:saturate(.9) contrast(1.02)} .mrd-bas b{display:block;font-weight:600;font-size:12.6px;color:var(--murekkep);letter-spacing:-.01em;margin-top:11px;line-height:1.2;transition:color .3s} .mrd-bas b i,.mrd-kart-bas b i{font-style:normal;font-weight:400;font-size:.8em;color:var(--gri)} .mrd-bas span{display:block;font-size:10px;letter-spacing:.04em;line-height:1.3;height:14px;white-space:nowrap} .mrd-bas:hover img{translate:0 -5px} .mrd-bas.secili::before{background:var(--yesil-koyu);height:2px} .mrd-bas.secili b{color:var(--yesil-koyu)} .mrd-bas:focus-visible{outline:2px solid var(--yesil-koyu);outline-offset:2px} .mrd-kartlar{margin-top:22px;min-height:150px} .mrd-kart{animation:mrdKart .5s var(--hiz) both} @keyframes mrdKart{from{opacity:0;translate:0 10px}} .mrd-kart-bas{display:flex;align-items:baseline;gap:14px;margin-bottom:8px} .mrd-kart-bas b{font-family:var(--baslik);font-size:26px;font-weight:600;letter-spacing:-.03em} .mrd-kart-bas span{font-family:var(--olcu);font-size:12px;color:var(--gri);letter-spacing:.04em} .mrd-tablo{max-width:720px} .mrd-tablo td a{font-family:var(--baslik);font-weight:600;font-size:14px;letter-spacing:-.01em;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s,color .3s} .mrd-tablo td a:hover{color:var(--yesil-koyu);border-color:var(--yesil-koyu)} .mrd-tum{color:var(--yesil-koyu);margin-left:6px;text-decoration:underline;text-underline-offset:3px} .tablo-sar{overflow:visible} .tablo-sar .tablo{min-width:430px} @media (max-width:760px){ .tablo-sar{margin-inline:calc(var(--kenar) * -1);padding-inline:var(--kenar)} } /* ══════════════════════════════════════════════════════════════ HAREKET KATMANI ══════════════════════════════════════════════════════════════ */ /* açılış dizilişi */ .ac-gir{opacity:0;transform:translateY(20px); transition:opacity .78s var(--hiz),transform .78s var(--hiz)} body.hazir .ac-gir{opacity:1;transform:none} .acilis-sahne.ac-gir{transform:translateY(30px) scale(.94)} body.hazir .acilis-sahne.ac-gir{transform:none} .acilis-fon.ac-gir{transform:none;opacity:0;transition:opacity 1.5s var(--hiz) .1s} body.hazir .acilis-fon.ac-gir{opacity:1} /* başlıklarda kelime kelime yükselme */ .kl-sar .kl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em} .kl-sar .kl i{display:inline-block;font-style:normal;transform:translateY(112%); transition:transform .82s cubic-bezier(.16,.84,.3,1)} .kl-sar.kl-ac .kl i{transform:none} .kl-sar .kl:nth-child(1) i{transition-delay:0ms} .kl-sar .kl:nth-child(2) i{transition-delay:52ms} .kl-sar .kl:nth-child(3) i{transition-delay:104ms} .kl-sar .kl:nth-child(4) i{transition-delay:156ms} .kl-sar .kl:nth-child(5) i{transition-delay:208ms} .kl-sar .kl:nth-child(6) i{transition-delay:260ms} .kl-sar .kl:nth-child(n+7) i{transition-delay:312ms} /* bardağın eğilmesi ve paralaksı */ .sahne.egilir{perspective:1000px} .sahne img{ transform:translateY(var(--py,0px)) rotateX(var(--erx,0deg)) rotateY(var(--ery,0deg)) translateX(var(--etx,0px)); transform-style:preserve-3d; will-change:transform; } .sahne-hacim,.seri-gorsel,.genis img,.dip-dev{transform:translateY(var(--py,0px))} .dip-dev{will-change:transform} /* manyetik düğmeler */ .manyetik{transition:transform .42s var(--hiz),color .3s var(--hiz),background .3s var(--hiz),border-color .3s var(--hiz)} .manyetik:active{transition-duration:.1s} /* kart eğilmesi */ .egik{transform-style:preserve-3d; transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--pz,0px)); transition:transform .5s var(--hiz),background .3s var(--hiz),box-shadow .4s var(--hiz)} .kt.egik:hover,.nm-kutu.egik:hover{box-shadow:0 22px 44px -22px rgba(var(--golge),.34);z-index:2} /* düğme ve satır mikro tepkileri */ .olculer button{transition:color .28s var(--hiz),padding-left .28s var(--hiz),background .28s} .olculer button:hover{background:var(--beyaz)} .tablo tbody tr{transition:background .22s,transform .32s var(--hiz)} .tablo tbody tr:hover{transform:translateX(4px)} .dip-serit b{transition:color .3s} .dip-serit span:hover b{color:var(--yesil)} /* seri sahnesinde ışık, kaydırınca kayıyor */ .seri{position:relative} .seri::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(104deg,transparent 42%,rgba(var(--isik),.30) 50%,transparent 58%); transform:translateX(-30%);} /* koyu temada gri süpürme kirli duruyordu (Bilo 9 Eyl): yumuşak yeşil ışık + geniş dağılım */ html[data-tema="dark"] .seri::after{ background:linear-gradient(104deg,transparent 34%,rgba(76,175,80,.10) 47%,rgba(255,255,255,.05) 52%,rgba(76,175,80,.06) 58%,transparent 72%); filter:blur(6px)} @supports (animation-timeline: view()){ .seri::after{animation:seriIsik linear both;animation-timeline:view();animation-range:entry 10% exit 90%} @keyframes seriIsik{from{transform:translateX(-46%)}to{transform:translateX(46%)}} /* katalog kutuları sırayla yükseliyor */ .kt{animation:ktGir linear both;animation-timeline:view();animation-range:entry 0% cover 14%} @keyframes ktGir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* baskı kutuları ve ofisler */ .baski figure{animation:ktGir linear both;animation-timeline:view();animation-range:entry 0% cover 16%} /* dip şeridi soldan */ .dip-serit span{animation:seritGir linear both;animation-timeline:view();animation-range:entry 0% cover 22%} @keyframes seritGir{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}} /* ürün sahnesinin zemini genişliyor */ .sahne-zemin{animation:zeminAc linear both;animation-timeline:view();animation-range:entry 0% cover 30%} @keyframes zeminAc{from{transform:scaleY(.86);opacity:.4}to{transform:none;opacity:1}} } .yedek .kt,.yedek .baski figure,.yedek .dip-serit span,.yedek .sahne-zemin{opacity:1;transform:none} .yedek .seri::after{display:none} @media (prefers-reduced-motion:reduce){ .kl-sar .kl i{transform:none !important} .ac-gir{opacity:1 !important;transform:none !important} } /* ══════════════════════════════════════════════════════════════ AÇILIŞ VE SAYFA GEÇİŞ PERDESİ İki kâğıt yaprağı ortada birleşiyor, arasında marka rozeti ve dolan bir çizgi. Sayfa hazır olunca yapraklar ayrılıyor. ══════════════════════════════════════════════════════════════ */ .perde{position:fixed;inset:0;z-index:150;pointer-events:none} .perde-yaprak{position:absolute;left:0;right:0;height:50.5%;background:var(--ters);z-index:1; transition:transform .78s cubic-bezier(.76,0,.24,1)} .perde-yaprak.yukari{top:0;transform:translateY(0)} .perde-yaprak.asagi{bottom:0;transform:translateY(0)} .perde-orta{position:absolute;inset:0;z-index:2;display:grid;place-items:center;gap:18px; align-content:center;transition:opacity .34s ease .06s} .perde-amblem{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;background:#fff; animation:perdeNefes 2.4s ease-in-out infinite} .perde-amblem img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)} @keyframes perdeNefes{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}} /* dolan bardak: yüklenirken sıvı yükselir, dalgası hafif salınır */ .perde-bardak{width:34px;height:40px;color:rgba(var(--isik),.5)} .pb-sivi{fill:var(--yesil);transform:translateY(40px);animation:pbDol 1.6s cubic-bezier(.4,.1,.3,1) infinite} @keyframes pbDol{0%{transform:translateY(34px)}55%{transform:translateY(8px)}80%{transform:translateY(6px)}100%{transform:translateY(34px)}} /* yaprak kenarlarında akan sıvı dalgası (maskeyle: renk temadan gelir) */ .perde-yaprak::after{content:'';position:absolute;left:0;right:0;height:22px;background:var(--ters); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M0 11C36 0 74 22 110 11S184 0 220 11V0H0Z'/%3E%3C/svg%3E") repeat-x 0 0/220px 22px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M0 11C36 0 74 22 110 11S184 0 220 11V0H0Z'/%3E%3C/svg%3E") repeat-x 0 0/220px 22px; animation:perdeAk 3.4s linear infinite} .perde-yaprak.yukari::after{top:99.5%} .perde-yaprak.asagi::after{bottom:99.5%;transform:scaleY(-1)} /* dalga yalnız geçiş sırasında görünsün; açık sayfada alttan sızmasın (Bilo 8 Eyl) */ .perde-yaprak::after{opacity:0;transition:opacity .2s} body.yukleniyor .perde-yaprak::after,body.gidiyor .perde-yaprak::after{opacity:1} @keyframes perdeAk{to{-webkit-mask-position:220px 0;mask-position:220px 0}} @media (prefers-reduced-motion:reduce){.pb-sivi,.perde-yaprak::after{animation:none}} /* perde açık (sayfa göründü) */ body.acildi .perde{pointer-events:none} body.acildi .perde-yaprak.yukari{transform:translateY(-101%)} body.acildi .perde-yaprak.asagi{transform:translateY(101%)} body.acildi .perde-orta{opacity:0} /* perde kapanıyor (başka sayfaya geçiliyor) */ body.gidiyor .perde-yaprak.yukari,body.gidiyor .perde-yaprak.asagi{transform:translateY(0)} body.gidiyor .perde-orta{opacity:1;transition-delay:.34s} body.gidiyor .perde{pointer-events:all} /* sayfa içeriği perde açılınca yükseliyor */ main,.dip{transition:opacity .6s var(--hiz) .12s,transform .6s var(--hiz) .12s} body:not(.acildi) main,body:not(.acildi) .dip{opacity:0;transform:translateY(14px)} /* ══════════════════════════════════════════════════════════════ GERÇEK SİTE EKLERİ · dört dil, bardak sayfaları, ambalaj kataloğu ══════════════════════════════════════════════════════════════ */ .atla{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ters);color:var(--ters-yazi);padding:10px 16px;font-size:13px} .atla:focus{left:8px} i.istek,.istek{font-style:normal;color:var(--gri-acik);font-size:.92em;letter-spacing:.02em} .tablo td i{font-style:normal;color:var(--gri-acik);font-size:10.6px} /* dil menüsü: bağlantılar */ .dil{display:flex;border:1px solid var(--cizgi);border-radius:99px;overflow:hidden;flex:none;background:var(--kagit-ac)} .dil a{font-family:var(--baslik);font-size:10.6px;font-weight:600;letter-spacing:.09em;color:var(--gri);padding:7px 11px;transition:background .3s,color .3s} .dil a:hover{color:var(--murekkep)} .dil a.acik{background:var(--murekkep);color:var(--kagit)} /* ── açılış: sol cümle, sağ ölçülü fotoğraf ── */ .acilis{padding-top:calc(96px + clamp(14px,4vh,44px))} .acilis-fon{top:38%} .acilis-ic{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:end} .acilis-yazi h1{font-size:clamp(30px,4.4vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1.02;max-width:14ch} .acilis-yazi h1 em{font-style:normal;color:var(--yesil-koyu);font-weight:700} .acilis-yazi p{color:var(--gri);max-width:42ch;font-size:15px;margin:22px 0 26px} .acilis-git,.satir-git{display:inline-flex;align-items:center;font-family:var(--olcu);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--murekkep);padding:6px 0;position:relative;clip-path:inset(6px 0 4px 0)} .acilis-git>span,.satir-git>span{display:block;position:relative;transition:transform .5s cubic-bezier(.16,.84,.3,1)} .acilis-git>span::after,.satir-git>span::after{content:attr(data-yazi);position:absolute;left:0;top:100%;color:var(--yesil-koyu);white-space:nowrap} .acilis-git::after,.satir-git::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--murekkep);transform-origin:left;transition:transform .5s var(--hiz),background .3s} .acilis-git:hover>span,.satir-git:hover>span{transform:translateY(-100%)} .acilis-git:hover::after,.satir-git:hover::after{transform:scaleX(.5);background:var(--yesil-koyu)} .satir-git{margin-top:26px} /* açılış çağrısı: SIVI DOLUM düğmesi (Bilo 9 Eyl — yuvarlanma/parlama yok, marka imzası) hover'da çerçeveli hap alttan dalga kenarlı yeşille dolar, yazı beyaza döner */ .acilis-git{background:transparent;color:var(--murekkep);padding:15px 30px;border-radius:99px;clip-path:none;border:1.6px solid var(--yesil-koyu);overflow:hidden;isolation:isolate;transition:color .35s var(--hiz) .12s,translate .35s var(--hiz)} .acilis-git>span{transition:none} .acilis-git:hover>span{transform:none} .acilis-git>span::after{display:none} .acilis-git::after{display:none} .acilis-git::before{content:'';position:absolute;left:-4%;right:-4%;top:-14px;bottom:0;z-index:-1;background:var(--yesil-koyu);translate:0 103%;transition:translate .65s cubic-bezier(.3,.85,.3,1); -webkit-mask:linear-gradient(#000,#000) 0 14px/100% calc(100% - 14px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M0 11C36 0 74 22 110 11S184 0 220 11V22H0Z'/%3E%3C/svg%3E") repeat-x 0 0/110px 14px; mask:linear-gradient(#000,#000) 0 14px/100% calc(100% - 14px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M0 11C36 0 74 22 110 11S184 0 220 11V22H0Z'/%3E%3C/svg%3E") repeat-x 0 0/110px 14px} .acilis-git:hover{color:#fff;translate:0 -2px} .acilis-git:hover::before{translate:0 0} html[data-tema="dark"] .acilis-git{color:var(--ters-yazi)} /* satır bağlantılarında yazı yuvarlanması da azaltıldı: yalnız alt çizgi tepkisi kalır */ .satir-git:hover>span{transform:none} /* açılış sahnesi: kelimeler maskeden yükselir, fotoğraf perde gibi açılır, sonra yavaşça nefes alır; bardakların üstünde ölçü noktaları belirir; fare hafif paralaks */ .ak{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em} .ak i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform .95s var(--hiz)} body.hazir .ak i{transform:none} .acilis-yazi,.acilis-foto{translate:var(--px,0px) var(--py,0px)} .acilis-foto{margin:0;position:relative;padding:0;overflow:hidden;overflow:clip} .acilis-foto img{width:100%;height:auto;aspect-ratio:3/2;max-height:min(58svh,560px);object-fit:cover;display:block;filter:saturate(.94);transform:translateY(var(--hy,0px));scale:1.02;transform-origin:50% 60%} .acilis-foto.ac-gir{transform:none;opacity:1;clip-path:inset(0 100% 0 0)} .acilis-foto.ac-gir img{scale:1.16} body.hazir .acilis-foto.ac-gir{clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.18,1)} body.hazir .acilis-foto.ac-gir img{scale:1.02;transition:scale 1.9s cubic-bezier(.2,.7,.2,1)} body.hazir .acilis-resim{animation-name:heroNefes;animation-duration:16s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:2s} @keyframes heroNefes{from{scale:1.02}to{scale:1.07}} .acilis-nokta{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none} .acilis-nokta li{position:absolute;left:calc(var(--nx)*100%);top:calc(var(--ny)*100%);translate:-5px -5px;opacity:0;scale:.3;transform-origin:5px 5px; transition:opacity .55s var(--hiz),scale .8s cubic-bezier(.2,1.5,.4,1);transition-delay:calc(1.15s + var(--sira)*120ms)} body.hazir .acilis-nokta li{opacity:1;scale:1} .acilis-nokta li.sol{translate:-50% calc(-100% + 5px);transform-origin:50% calc(100% - 5px)} .acilis-nokta li.sol a{flex-direction:column-reverse;align-items:center;gap:6px} .acilis-nokta a{pointer-events:auto;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--murekkep);font-family:var(--olcu);font-size:11px;letter-spacing:.08em;position:relative} /* etiket 17px; telefonda dokunma hedefi 24px'e görünmez alanla tamamlanır */ .acilis-nokta a::before{content:'';position:absolute;inset:-7px -5px} .acilis-nokta i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--yesil-koyu);box-shadow:0 0 0 2px rgba(255,255,255,.85);position:relative} .acilis-nokta i::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.2px solid var(--yesil-koyu);opacity:0;animation:noktaDalga 3.4s ease-out infinite;animation-delay:calc(2s + var(--sira)*.68s)} @keyframes noktaDalga{0%{scale:.45;opacity:.75}70%,100%{scale:1.5;opacity:0}} .acilis-nokta span{background:rgba(255,255,255,.86);color:#101B24;padding:3px 7px 2px;border:1px solid rgba(0,0,0,.08);line-height:1.2;white-space:nowrap;transition:background .3s,color .3s,border-color .3s} /* zemin sabit beyaz olduğu için yazı da sabit koyu — koyu temada --murekkep açığa döner, beyaz hapta kaybolur */ .acilis-nokta a:hover span{background:var(--yesil-koyu);color:#fff;border-color:var(--yesil-koyu)} .acilis-kaydir{position:absolute;left:var(--kenar);bottom:clamp(18px,3vh,34px);display:flex;align-items:center;gap:10px;font-family:var(--olcu);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gri)} .acilis-kaydir i{display:block;width:34px;height:1px;background:var(--cizgi-koyu);position:relative;overflow:hidden} .acilis-kaydir i::after{content:'';position:absolute;inset:0;background:var(--yesil-koyu);transform-origin:left;animation:kaydirCiz 2.2s cubic-bezier(.7,0,.2,1) infinite} @keyframes kaydirCiz{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}} .acilis-kaydir.ac-gir{transform:none} @media (prefers-reduced-motion:reduce){.acilis-resim,.acilis-nokta i::after,.acilis-kaydir i::after{animation:none !important}.ak i{transform:none !important}} @supports (animation-timeline: view()){ .acilis-foto{animation:heroFoto linear both;animation-timeline:view();animation-range:exit 0% exit 100%} @keyframes heroFoto{to{transform:translateY(46px) scale(1.04)}} } /* ── ikili sahne: yazı + fotoğraf ── */ .ikili figure{position:relative;overflow:hidden} .ikili figure img{transform:translateY(var(--py,0px)) scale(1.08)} .ikili.ters{grid-template-columns:1fr 1.05fr} .ikili.ters .ikili-yazi{border-left:0;border-right:1px solid var(--cizgi)} .ikili-yazi .ayrisma{gap:0} .ikili-yazi .tablo-not{margin-top:18px} .liste{list-style:none;margin:0 0 6px;padding:0;font-family:var(--olcu);font-size:13px} .liste li{padding:10px 0 10px 18px;border-bottom:1px solid var(--cizgi);position:relative} .liste li::before{content:'';position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--yesil-koyu)} .amb-foto img{transform:translateY(var(--py,0px)) scale(1.08)} /* ── kapasite: adımlar ve rakamlar yan yana ── */ .kap-ic{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(24px,4vh,44px);align-items:start} .kap-ic .hatt{border-top:0} .kap-ic .hatt-adim{grid-template-columns:22px minmax(90px,140px) 1fr} .kap-ic .sevk{grid-template-columns:1fr} .kap-ic .sevk dd{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em} .suzgec-ad{font-family:var(--olcu);font-size:10.4px;letter-spacing:.16em;color:var(--gri-acik);align-self:center;margin:0 4px 0 10px;text-transform:uppercase} .suzgec-ad:first-child{margin-left:0} .tablo-bos{font-family:var(--olcu);font-size:12.6px;color:var(--gri);padding:26px 0;border-bottom:1px solid var(--cizgi);margin:0} .tablo .tk{color:inherit} /* ── ambalaj özeti: fotoğraf + kategori listesi ── */ .amb-ozet{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,48px);align-items:start} .amb-foto{margin:0;position:sticky;top:90px;border:1px solid var(--cizgi);overflow:hidden;background:var(--kagit-ac)} .amb-foto img{width:100%;height:100%;min-height:360px;object-fit:cover} .kat-liste{display:flex;flex-direction:column;border-top:1px solid var(--murekkep)} .kat-satir{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--cizgi); font-size:14.4px;transition:padding-left .3s var(--hiz),color .25s;position:relative} .kat-satir b{font-family:var(--olcu);font-size:11.6px;color:var(--gri-acik);font-weight:500} .kat-satir::before{content:'';position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--yesil-koyu);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hiz)} .kat-satir:hover{padding-left:18px;color:var(--yesil-koyu)} .kat-satir:hover::before{transform:scaleX(1)} .kat-liste-genis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));column-gap:clamp(20px,4vw,60px)} /* ── teklif formu ekleri ── */ .teklif-ek{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin-top:22px} .teklif-ek input,.kod-alanlar input,.kod-alanlar textarea,.nm-alanlar input{ font:inherit;font-size:14px;background:transparent;border:0;border-bottom:1px solid var(--cizgi-koyu);color:inherit;padding:10px 0;width:100%;border-radius:0;transition:border-color .3s} .teklif-ek input::placeholder{color:var(--gri)} .teklif-ek input:focus,.kod-alanlar :focus,.nm-alanlar input:focus{outline:none;border-bottom-color:var(--yesil)} .tuzak{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0} .cumle input[name="eposta"]{width:min(14ch,60vw)} .cumle input::placeholder{color:rgba(76,175,80,.5);font-weight:400} .gonder.koyu{color:var(--murekkep);border-color:var(--murekkep);display:inline-flex;align-items:center;gap:10px} .gonder.koyu::before{background:var(--murekkep)} .gonder.koyu:hover{color:var(--kagit-ac)} .gonder:disabled{opacity:.6;cursor:wait} .gonder.bekliyor::after{content:'';display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;margin-left:10px;animation:don .8s linear infinite;vertical-align:middle} @keyframes don{to{transform:rotate(360deg)}} .teklif-not.uyar{color:#E8A33D} .teklif-not.tamam{color:var(--yesil)} form.gitti .cumle,form.gitti .teklif-ek,form.gitti .kod-alanlar,form.gitti .nm-liste{opacity:.45;pointer-events:none} .kod-teklif{border:1px solid var(--cizgi);background:var(--kagit-ac);padding:clamp(22px,4vw,52px)} .kod-teklif .bolum-bas{margin-bottom:34px} .kod-alanlar{display:grid;grid-template-columns:1.4fr 1fr;gap:14px 28px} .kod-alanlar label{display:flex;flex-direction:column;gap:2px} .kod-alanlar label:first-child{grid-row:span 2} .kod-alanlar label span{font-family:var(--olcu);font-size:10.4px;letter-spacing:.16em;color:var(--gri);text-transform:uppercase} .kod-alanlar input,.kod-alanlar textarea{border-bottom-color:var(--cizgi);color:var(--murekkep);resize:vertical;font-family:var(--olcu)} .kod-teklif .teklif-alt{border-top-color:var(--cizgi)} .kod-teklif .teklif-not.tamam{color:var(--yesil-koyu)} .nm-alanlar{display:grid;gap:4px;margin-bottom:18px} .nm-alanlar input{border-bottom-color:var(--cizgi);font-size:13.4px;color:var(--murekkep)} .nm-not.uyar{color:#B7791F} .nm-not.tamam{color:var(--yesil-koyu)} /* ── bardaklar sayfası ── */ .tezgah-bas{padding:12px 20px 0} .tz-tek{padding:0 20px 20px;font-family:var(--olcu);font-size:12px;color:var(--gri)} .tezgah-bos[hidden]{display:none} .kt-git{display:flex;flex-direction:column;color:inherit;flex:1} .kt-eylem{background:none;border:0;border-top:1px solid var(--cizgi);cursor:pointer;text-align:left;font-family:var(--olcu);width:100%} .kt:hover .kt-eylem{color:var(--murekkep)} .kt .kt-eylem:hover{background:var(--kagit)} /* ── bardak sayfası ── */ .urun-bas{padding-bottom:clamp(18px,3vh,28px)} .urun-bas h1 span{font-weight:400;color:var(--gri);font-size:.6em;letter-spacing:-.02em} .geri{display:flex;width:max-content;align-items:center;gap:8px;font-family:var(--olcu);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gri);margin-bottom:18px;transition:color .25s} .geri::before{content:'';width:18px;height:1px;background:currentColor;transition:width .3s var(--hiz)} .geri:hover{color:var(--murekkep)} .geri:hover::before{width:30px} .urun-kod{font-family:var(--olcu);font-size:12px;letter-spacing:.12em;color:var(--gri)} .tezgah-ad{font-family:var(--baslik);font-size:13px;font-weight:600;letter-spacing:-.01em} .urun-isik{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 30%,rgba(var(--isik),.35),transparent 70%);opacity:0;transition:opacity 1.2s var(--hiz)} html[data-tema="dark"] .urun-isik{opacity:.5} .urun{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);padding:0 var(--kenar) clamp(40px,6vh,72px);align-items:start} .urun-sahne{margin:0;position:relative;padding:18px 0 0 18px;background:var(--kagit-ac);border:1px solid var(--cizgi)} .urun-sahne img{width:min(100%,520px);aspect-ratio:1;object-fit:contain;margin:0 auto;padding:clamp(20px,4vw,48px);filter:drop-shadow(0 30px 40px rgba(var(--golge),.18))} .urun-sahne figcaption{font-family:var(--olcu);font-size:10.6px;letter-spacing:.16em;color:var(--gri);padding:10px 16px;border-top:1px solid var(--cizgi);text-align:right} .urun-bilgi h2{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.025em;margin:26px 0 12px} .urun-bilgi h2:first-child{margin-top:0} .urun-bilgi p{color:var(--gri);font-size:14.6px;max-width:52ch} .urun-olcu{grid-template-columns:repeat(3,1fr)} .urun-olcu dd i{font-style:normal;font-size:12px;color:var(--gri);font-weight:400} .urun-dugmeler{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px} .urun-dugmeler .satir-git{margin-top:0} .urun-diger{margin-top:22px;font-family:var(--olcu);font-size:12.6px} .urun-diger a{display:inline-flex;align-items:center;gap:6px;color:var(--yesil-koyu);font-weight:600} .serit-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--kenar) * -1);padding-inline:var(--kenar);scrollbar-width:thin} .serit{display:flex;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);width:max-content;min-width:100%} .serit-kutu{flex:none;width:132px;background:var(--kagit-ac);padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .25s} .serit-kutu img{width:64%;aspect-ratio:1;object-fit:contain;transition:transform .45s var(--hiz)} .serit-kutu b{font-family:var(--baslik);font-size:15px;font-weight:600;letter-spacing:-.02em} .serit-kutu b i{font-style:normal;font-size:11px;font-weight:400;color:var(--gri)} .serit-kutu em{font-style:normal;font-family:var(--olcu);font-size:9.4px;letter-spacing:.06em;color:var(--gri-acik)} .serit-kutu:hover{background:var(--beyaz)} .serit-kutu:hover img{transform:translateY(-4px) scale(1.05)} /* ── ambalaj: kategori ızgarası ── */ .kat-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;border:1px solid var(--cizgi)} .kat-kutu{background:var(--kagit-ac);box-shadow:0 0 0 1px var(--cizgi);display:grid;grid-template-columns:104px 1fr auto;gap:16px;align-items:center;padding:16px 18px 16px 16px;color:inherit;position:relative;transition:background .3s} .kat-kutu:hover{background:var(--beyaz)} .kat-gorsel{width:104px;height:78px;background:var(--beyaz);border:1px solid var(--cizgi);display:grid;place-items:center;overflow:hidden} .kat-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--hiz)} .kat-kutu:hover .kat-gorsel img{transform:scale(1.06)} .kat-yazi{display:flex;flex-direction:column;gap:2px;min-width:0} .kat-yazi b{font-family:var(--baslik);font-size:16.5px;font-weight:600;letter-spacing:-.025em} .kat-yazi em{font-style:normal;font-family:var(--olcu);font-size:10.4px;letter-spacing:.1em;color:var(--gri-acik);text-transform:uppercase} .kat-yazi span{font-size:12.4px;color:var(--gri);line-height:1.5;margin-top:4px} .kat-git{width:22px;height:1px;background:var(--gri-acik);transition:background .25s,width .3s var(--hiz)} .kat-kutu:hover .kat-git{background:var(--yesil-koyu);width:34px} .kat-kutu::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--yesil-koyu);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--hiz)} .kat-kutu:hover::before{transform:scaleY(1)} .kat-diger{padding-top:0} /* ── ambalaj: ürün ızgarası ── */ .ur-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;border:1px solid var(--cizgi)} .ur{background:var(--kagit-ac);box-shadow:0 0 0 1px var(--cizgi);display:flex;flex-direction:column;position:relative;transition:background .3s} .ur:hover{background:var(--beyaz)} .ur-gorsel{display:grid;place-items:center;background:var(--beyaz);aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--cizgi)} .ur-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--hiz)} /* Ambalaj ve ürün görsellerinin çoğunda beyaz zemin dosyanın içine pişmiş (197 görselin 194'ü alfasız). Koyu temada kabı koyu yapınca sayfada sert beyaz levhalar çıkıyordu; kap da beyaz kalınca görselle aynı renk olup sınır görünmüyor. */ /* Koyu temada AYRIM (Bilo 9 Eyl): beyaz zemini DOSYAYA PİŞMİŞ ambalaj görselleri beyaz kapta kalır; SAYDAM bardak görselleri ise cups sayfasındaki dil ile koyu kap + tepe ışığı + hafif karartma alır. */ html[data-tema="dark"] .kat-gorsel, html[data-tema="dark"] .ur:not(.ur-bardak) .ur-gorsel, html[data-tema="dark"] .pencere-gorunum button{background:#FAF8F4;border-color:rgba(0,0,0,.12)} .ur-bardak .ur-gorsel{background-image:radial-gradient(70% 55% at 50% 8%,rgba(var(--isik),var(--isik-a)),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(76,175,80,var(--isik-b)),transparent 70%);transition:--isik-a 1.4s var(--hiz),--isik-b 1.4s var(--hiz),background-color .3s var(--hiz)} html[data-tema="dark"] .ur-bardak .ur-gorsel img{filter:brightness(.84) contrast(1.05)} /* saydamlaştırılmış ambalajlar da koyu kap + tepe ışığı alır (9 Eyl boru hattı) */ html[data-tema="dark"] .ur[data-saydam] .ur-gorsel{background:var(--beyaz)} .ur[data-saydam] .ur-gorsel{background-image:radial-gradient(70% 55% at 50% 8%,rgba(var(--isik),var(--isik-a)),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(76,175,80,var(--isik-b)),transparent 70%)} html[data-tema="dark"] .ur[data-saydam] .ur-gorsel img{filter:brightness(.86) contrast(1.04)} .ap-sahne.saydam{background:var(--beyaz);background-image:radial-gradient(70% 55% at 50% 8%,rgba(var(--isik),var(--isik-a)),transparent 70%)} .ap-sahne.saydam img{background:transparent} .ur:hover .ur-gorsel img{transform:scale(1.05)} .ur.dusuk .ur-gorsel img{width:58%;height:auto;object-fit:contain;image-rendering:auto;filter:saturate(.9)} .ur-yazi{display:flex;flex-direction:column;gap:3px;padding:14px 16px 12px;flex:1} .ur-yazi em{font-style:normal;font-family:var(--olcu);font-size:11px;letter-spacing:.1em;color:var(--yesil-koyu);font-weight:600} .ur-yazi b{font-family:var(--baslik);font-size:14.4px;font-weight:500;letter-spacing:-.015em;line-height:1.35} .ur-yazi small{font-size:10.8px;color:var(--gri-acik);line-height:1.4;margin-top:4px} .ur-ekle{display:flex;align-items:center;gap:8px;background:none;border:0;border-top:1px solid var(--cizgi);cursor:pointer; font-family:var(--olcu);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;color:var(--gri);text-align:left;transition:color .25s,background .25s} .ur-ekle:hover{color:var(--murekkep);background:var(--kagit)} .ur.secili{background:var(--beyaz)} .ur.secili::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--yesil-koyu);z-index:2} .ur.secili .ur-ekle{background:var(--murekkep);color:var(--kagit-ac);border-top-color:var(--murekkep)} .ur.secili .ur-ekle svg{transform:rotate(45deg)} .ur-ekle svg{transition:transform .3s var(--hiz)} /* kod sepeti: sayfa altında yapışık şerit */ .sepet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ters);color:var(--ters-yazi);border-top:1px solid var(--cizgi-koyu); transform:translateY(0);animation:sepetGel .45s var(--hiz)} @keyframes sepetGel{from{transform:translateY(100%)}} .sepet-ic{display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:12px var(--kenar)} .sepet-sayi{font-family:var(--olcu);font-size:11.6px;letter-spacing:.08em;white-space:nowrap} .sepet-sayi b{font-family:var(--baslik);font-size:20px;letter-spacing:-.03em;margin-right:4px} .sepet-kodlar{font-family:var(--olcu);font-size:11.6px;color:var(--gri-acik);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sepet .gonder{color:var(--ters-yazi);border-color:var(--yesil);padding:11px 18px;font-size:11px;white-space:nowrap} .sepet .gonder::before{background:var(--yesil)} .sepet .gonder:hover{color:#101B24} .sepet-temizle{background:none;border:1px solid var(--cizgi-koyu);color:var(--gri-acik);width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none;transition:color .25s,border-color .25s} .sepet-temizle:hover{color:var(--ters-yazi);border-color:var(--ters-yazi)} body.sepet-var .dip{padding-bottom:90px} /* ── hakkında ── */ .hak{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vh,44px)} .hak-metin{columns:2;column-gap:clamp(30px,5vw,80px);max-width:1100px} .hak-metin p{font-size:15.4px;color:var(--murekkep-2);line-height:1.72;break-inside:avoid} .hak-ilk{font-family:var(--baslik);font-size:clamp(19px,2vw,24px) !important;font-weight:500;letter-spacing:-.025em;line-height:1.4 !important;column-span:all;max-width:36ch;margin-bottom:24px !important} .hak .hatt{border-top:1px solid var(--murekkep)} .zaman{list-style:none;margin:0;padding:clamp(22px,3vh,34px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);position:relative} .zaman li{position:relative;padding-top:18px} .zaman li::before{content:'';position:absolute;left:0;top:0;width:1px;height:12px;background:var(--yesil-koyu)} .zaman li::after{content:'';position:absolute;left:0;right:calc(clamp(14px,2vw,30px) * -1);top:0;height:1px;background:var(--cizgi)} .zaman li:last-child::after{right:0} .zaman b{display:block;font-family:var(--baslik);font-size:22px;font-weight:600;letter-spacing:-.03em;margin-bottom:6px} .zaman span{font-size:13.4px;color:var(--gri);line-height:1.5;display:block;max-width:26ch} #zaman .h-cerceve::after{top:clamp(22px,3vh,34px)} /* ── dip ekleri ── */ .dip-dil{display:flex;gap:14px;font-size:11.6px;color:var(--dip-yazi)} .dip-dil a:hover{color:var(--ters-yazi)} .dip-yapan b{font-family:var(--baslik);font-weight:700;letter-spacing:-.02em;font-size:12px;color:var(--dip-yazi)} .dip-serit b{font-size:11px;letter-spacing:.19em;font-weight:600;color:var(--yesil)} .dip-serit i{font-size:14px;color:var(--dip-yazi)} .dip-serit span{gap:12px} /* ── ekran genişlikleri ── */ @media (max-width:1080px){ .acilis-ic{grid-template-columns:1fr;gap:26px} .acilis-yazi{order:2} .acilis-foto{order:1} .acilis-kaydir{display:none} .mrd-sira{grid-auto-columns:minmax(86px,1fr);gap:0;--buyut:1.5} .mrd-sar{scroll-snap-type:none} .mrd-bas::before{bottom:54px} .mrd-bas span{white-space:normal;height:24px;font-size:9.6px;padding:0 3px} .mrd-tablo{font-size:10.6px;table-layout:fixed;width:100%} .mrd-tablo th:first-child,.mrd-tablo td:first-child{width:25%} .mrd-tablo th,.mrd-tablo td{padding:9px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mrd-tablo .istek{font-size:9.8px} .mrd-tablo th:first-child,.mrd-tablo td:first-child{padding-left:0} .mrd-tablo td a{font-size:12.6px} .mrd-tablo .rozet{display:none} .mrd-kart-bas b{font-size:22px} .acilis-nokta a{font-size:10px;gap:6px} .acilis-nokta i{width:8px;height:8px} .acilis-nokta span{padding:2px 5px 1px} /* Telefonda parmak hedefleri: satır içi bağlantılarda dikey dolgu satır yüksekliğini DEĞİŞTİRMEZ, yalnız dokunulabilir alanı 24px'e tamamlar. Nokta etiketlerinde dolgu noktayı kaydıracağı için görünmez bir ::before alanı kullanılıyor. */ .acilis-nokta a{position:relative} .acilis-nokta a::before{content:'';position:absolute;inset:-9px -7px} .dip-h dd a,.dip-yol{padding-block:5px} .geri{padding-block:4px} .dip-menu a{padding-block:2px} .dip-dil a{padding-block:4px} .dip-yapan{padding-block:3px} .ofis-mail,.ofis-tel{padding-block:3px} .mrd-tum{padding-block:6px} .mrd-tablo td a{padding-block:4px} .acilis-foto img{aspect-ratio:4/3.1;object-position:72% 50%;max-height:min(46svh,420px)} .acilis-fon{top:30%} .kap-ic,.amb-ozet{grid-template-columns:1fr} .amb-foto{position:static} .amb-foto img{min-height:240px;max-height:340px} .urun{grid-template-columns:1fr} .zaman{grid-template-columns:repeat(2,1fr);row-gap:26px} .zaman li:nth-child(2n)::after{right:0} } @media (max-width:860px){ .ikili.ters{grid-template-columns:1fr} .ikili.ters .ikili-yazi{border-right:0;border-top:1px solid var(--cizgi);order:2} .hak-metin{columns:1} .kod-alanlar{grid-template-columns:1fr} .teklif-ek{grid-template-columns:1fr} } @media (max-width:760px){ .acilis{padding-top:calc(72px + 22px);min-height:auto} .acilis-yazi h1{font-size:clamp(28px,8.4vw,38px)} .sayfa-bas{padding-top:calc(72px + 30px)} .kat-kutu{grid-template-columns:78px 1fr auto;gap:12px;padding:12px} .kat-gorsel{width:78px;height:60px} .kat-yazi span{display:none} .ur-izgara{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .ur-yazi{padding:10px 12px} .ur-yazi b{font-size:13px} .sepet-kodlar{display:none} .sepet-ic{padding:10px var(--kenar);gap:10px} .sepet .gonder{padding:10px 12px;font-size:10px} .sepet .gonder svg{display:none} .urun-olcu{grid-template-columns:repeat(2,1fr)} .urun-dugmeler{gap:14px} .urun-dugmeler .gonder{width:100%;justify-content:center} .tablo th:nth-child(4),.tablo td:nth-child(4){display:table-cell} .tablo th:nth-child(6),.tablo td:nth-child(6),.tablo th:nth-child(7),.tablo td:nth-child(7){display:none} .tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch} .tablo tbody tr{animation:none;opacity:1;transform:none} .tablo-sar .tablo{min-width:0} .tablo th:nth-child(8),.tablo td:nth-child(8){display:none} .tablo .rozet{display:none} .tablo td{padding:10px 6px} .tablo th{padding-inline:6px} .tablo .tk{gap:8px;font-size:13.4px} .tablo .tk img{width:38px;height:38px} .kap-ic .hatt-adim{grid-template-columns:18px 1fr} .kap-ic .hatt-aciklama{grid-column:2} .serit-kutu{width:110px} .nm-alanlar input{font-size:16px} .cumle input,.cumle select{font-size:18px} } /* ══════════ TELEFON DÜZELTMELERİ (kare denetimi sonrası) ══════════ */ @media (max-width:760px){ /* iki seri: bardak yazının üstüne binmesin, yazının altına otursun */ .seri-yan p{max-width:none} .seri-gorsel{position:static;width:46%;max-width:190px;align-self:flex-end;margin:-6px -8px 0 0;order:1} .seri-yan:first-child .seri-gorsel{right:auto;margin-right:0} .seri-alt{order:2;padding-top:14px} } /* ══════════ 404 ══════════ */ .sayfa-404 .sayfa-bas{min-height:52vh} .dyd-bag{display:flex;flex-wrap:wrap;gap:14px 34px;margin-bottom:34px} .dyd-dil{color:var(--gri);font-size:13.4px} .dyd-dil a{color:inherit;text-decoration:underline;text-underline-offset:3px} .dyd-dil a:hover{color:var(--murekkep)} /* ══════════════════════════════════════════════════════════════ V3 · üst bant, iki tema, sıvı geçiş, telefon menüsü, imleç, belirme, süzgeç paneli, ürün penceresi, hacim tezgâhı, baskı önizleme, canlı sayaç, sevkiyat haritası, katman sahnesi. ══════════════════════════════════════════════════════════════ */ /* katman sırası: zemin tuvali en altta, içerik üstte */ .fon{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;width:100%;height:100%} main,.dip{position:relative;z-index:1} /* ── üst bant ── Sayfa üstünde geniş, saydam bir çubuk. Kaydırınca ortada camdan bir kapsüle çekiliyor; menüde kayan bir işaret, hover'da yazıya soldan yeşil dolan bir renk var. */ .ust{position:fixed;inset:0 0 auto 0;z-index:70;padding:0;pointer-events:none} .ust-ic{ pointer-events:auto; display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); height:96px; padding:0 var(--kenar); margin:0 auto; max-width:100%; position:relative; background:transparent; border:1px solid transparent; border-radius:0; transition:height .5s var(--hiz),max-width .6s var(--hiz),margin .6s var(--hiz),padding .6s var(--hiz), border-radius .6s var(--hiz),background .5s var(--hiz),border-color .5s var(--hiz),box-shadow .5s var(--hiz); } .ust.kucuk .ust-ic{ height:64px; max-width:min(1180px,calc(100% - 2*var(--kenar))); margin:12px auto 0; padding:0 10px 0 22px; border-radius:99px; background:var(--cam); border-color:var(--cizgi); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 12px 40px -22px rgba(var(--golge),.35); } .marka{display:flex;align-items:center;flex:none} .marka img{height:40px;width:auto;transition:height .5s var(--hiz),filter .5s} .ust.kucuk .marka img{height:30px} /* Koyu temada logoyu filtreyle çevirmek marka renklerini bozuyordu (mor CUP fuşyaya, koyu yeşil neona kayıyordu). Marka rengi kontrast için değiştirilmez: logo olduğu gibi kalır, arkasına açık bir yastık konur. */ /* Koyu temada yastık kutu "ekran görüntüsü" gibi duruyordu (Bilo, 8 Eyl); yastık yerine yazısı aydınlatılmış logo türevi kullanılır (amblem aynı, marka tonu korunur). */ html[data-tema="dark"] .marka img:not(.marka-amblem){content:url("gorsel/logo-koyu.png")} .gezinti{display:flex;align-items:center;gap:2px;margin-left:auto;position:relative;flex:none;flex-wrap:nowrap} .gezinti a{position:relative;font-family:var(--baslik);font-size:13.6px;font-weight:500;padding:9px 13px;color:var(--murekkep);border-radius:99px;z-index:1;white-space:nowrap} .gezinti a span{ background:linear-gradient(90deg,var(--yesil-koyu) 50%,var(--murekkep) 50%); background-size:210% 100%;background-position:100% 0; -webkit-background-clip:text;background-clip:text;color:transparent; transition:background-position .5s var(--hiz); } .gezinti a:hover span,.gezinti a.acik span{background-position:0 0} .gez-isaret{position:absolute;top:50%;left:var(--gx,0px);width:var(--gw,0px);height:34px;transform:translateY(-50%); border-radius:99px;background:var(--karton);opacity:var(--go,0);transition:left .45s var(--hiz),width .45s var(--hiz),opacity .3s;z-index:0} /* ── okuma ilerlemesi: kapsülün ÜST kenarında soldan sağa dolan çizgi. Önce kapsülün dört kenarını dolanıyordu; alt kenara inince kartların üstünde asılı kalıyordu ve dağınık duruyordu (Bilo, 5 Eyl: "yukarıdan sağa oturmalı"). ── */ .ust-iz{position:absolute;left:30px;right:30px;top:-1px;height:2px;border-radius:2px;pointer-events:none; opacity:0;transition:opacity .45s var(--hiz);overflow:hidden} .ust-iz::after{content:'';position:absolute;inset:0;border-radius:2px;background:var(--yesil-koyu); transform-origin:left;transform:scaleX(var(--ilerleme,0));transition:transform .14s linear} .ust.kucuk .ust-iz{opacity:1} /* marka: geniş hâlde yazılı logo, kapsülde kaydırmayla dönen yuvarlak amblem */ .marka{position:relative} .marka-amblem{position:absolute;left:0;top:50%;height:34px;width:34px;border-radius:50%;transform:translateY(-50%) scale(.4);opacity:0;transition:opacity .4s var(--hiz),transform .5s var(--hiz);object-fit:cover;background:#fff} .ust.kucuk .marka-yazi{opacity:0;transform:translateX(-10px);transition:opacity .3s var(--hiz),transform .5s var(--hiz),height .5s var(--hiz)} .ust.kucuk .marka-amblem{opacity:1;transform:translateY(-50%) scale(1);transition:opacity .4s var(--hiz) .1s,transform .5s var(--hiz)} .ust.kucuk .marka{width:34px;overflow:visible} .ust.kucuk .marka-yazi{width:34px;object-fit:cover;object-position:left} html[data-tema="dark"] .marka-amblem{filter:none} /* bölüm göstergesi: o an okunan bölümün başlığı, alttan kayarak değişir */ .ust-bolum{display:none;align-items:center;gap:10px;min-width:0;max-width:230px;flex:0 1 auto;overflow:hidden;font-family:var(--olcu);font-size:11.2px;letter-spacing:.1em;text-transform:uppercase;color:var(--gri);opacity:0;transition:opacity .4s var(--hiz)} .ust-bolum-cizgi{display:block;width:22px;height:1px;background:var(--yesil-koyu);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--hiz)} .ust-bolum-yazi{position:relative;display:block;height:16px;overflow:hidden;white-space:nowrap;min-width:0;text-overflow:ellipsis} .ust-bolum-yazi b{display:block;font-weight:500;line-height:16px;transition:transform .55s var(--hiz),opacity .4s;overflow:hidden;text-overflow:ellipsis} .ust-bolum-yazi #ustBolumEski{position:absolute;left:0;top:0;transform:translateY(0)} .ust-bolum.degisiyor #ustBolumEski{transform:translateY(-110%);opacity:0} .ust-bolum.degisiyor #ustBolumYeni{transform:translateY(0)} .ust-bolum #ustBolumYeni{transform:translateY(110%)} .ust-bolum.sabit #ustBolumYeni{transform:translateY(0);transition:none} .ust-bolum.sabit #ustBolumEski{opacity:0;transition:none} @media(min-width:1420px){.ust-bolum{display:flex}} .ust.kucuk .ust-bolum.var{opacity:1} .ust.kucuk .ust-bolum.var .ust-bolum-cizgi{transform:scaleX(1)} .ust-sag{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto} .tema{width:38px;height:38px;border-radius:50%;border:1px solid var(--cizgi);background:var(--kagit-ac);cursor:pointer;padding:0;display:grid;place-items:center;color:var(--murekkep);transition:border-color .3s,transform .4s var(--hiz)} .tema:hover{border-color:var(--murekkep);transform:rotate(-18deg)} .tema-ic{position:relative;width:18px;height:18px;display:block;transition:transform .7s cubic-bezier(.68,-.4,.27,1.4)} .tema-ic svg{position:absolute;inset:0;width:18px;height:18px;transition:opacity .35s,transform .5s var(--hiz)} .tema-ic svg:last-child{opacity:0;transform:scale(.6) rotate(-90deg)} html[data-tema="dark"] .tema-ic svg:first-child{opacity:0;transform:scale(.6) rotate(90deg)} html[data-tema="dark"] .tema-ic svg:last-child{opacity:1;transform:none} .gez-teklif{position:relative;overflow:hidden;isolation:isolate;font-family:var(--baslik);font-size:12.4px;font-weight:600;letter-spacing:.02em; border:1px solid var(--murekkep);border-radius:99px;padding:10px 18px;color:var(--murekkep);transition:color .35s var(--hiz)} .gez-teklif::before{content:'';position:absolute;inset:-1px;background:var(--murekkep);transform:translateX(-104%) skewX(-16deg);transform-origin:right;transition:transform .45s var(--hiz);z-index:-1} .gez-teklif:hover{color:var(--kagit)} .gez-teklif:hover::before{transform:translateX(0) skewX(0)} .gez-teklif span{display:block} .ust-menu{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--cizgi);background:var(--kagit-ac);cursor:pointer;padding:0;position:relative;transition:border-color .3s,background .3s} .ust-menu i{position:absolute;left:12px;right:12px;height:1.6px;background:var(--murekkep);top:50%;transition:transform .45s cubic-bezier(.68,-.4,.27,1.3),background .3s} .ust-menu i:first-child{transform:translateY(-4px)} .ust-menu i:last-child{transform:translateY(3px)} .ust-menu.acik i:first-child{transform:rotate(45deg)} .ust-menu.acik i:last-child{transform:rotate(-45deg)} body.menu-acik .ust-menu{border-color:rgba(255,255,255,.28);background:transparent} body.menu-acik .ust-menu i{background:#FAF8F4} body.menu-acik .marka img:not(.marka-amblem){content:url("gorsel/logo-koyu.png")} /* menü perdesi koyu */ body.menu-acik .gezinti,body.menu-acik .ust-ic .dil,body.menu-acik .tema,body.menu-acik .gez-teklif{visibility:hidden} body.menu-acik .ust.kucuk .ust-ic{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} .dolum{position:absolute;left:0;bottom:-1px;height:2px;width:var(--dolum,0%);background:linear-gradient(90deg,var(--yesil-koyu),var(--yesil))} .ust.kucuk .dolum{opacity:0} .dolum{transition:opacity .4s} /* ── telefon menüsü (Bilo, 5 Eyl: düğme sağ üstte, daha şık, ekranı doldursun, açılış ve kapanış animasyonu daha zarif olsun) ── Perde yukarıdan iner (clip-path), satırlar kendi maskesinden yükselir; kapanışta satırlar sırayla geri iner, perde yukarı toplanır. 01/02/03 numaraları kaldırıldı. */ .tel-menu{position:fixed;inset:0;z-index:65;color:#FAF8F4;visibility:hidden;pointer-events:none} .tel-menu.acik{visibility:visible;pointer-events:auto} .tel-menu-perde{position:absolute;inset:0;background:#101B24; background-image:radial-gradient(120% 70% at 82% 0%,rgba(76,175,80,.16),transparent 60%), radial-gradient(90% 60% at 0% 100%,rgba(76,175,80,.08),transparent 62%); clip-path:inset(0 0 100% 0);transition:clip-path .62s cubic-bezier(.76,0,.24,1)} .tel-menu.acik .tel-menu-perde{clip-path:inset(0 0 0 0)} .tel-menu.kapaniyor .tel-menu-perde{clip-path:inset(0 0 100% 0);transition-duration:.5s;transition-delay:.16s} .tel-menu-ic{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center; padding:calc(76px + env(safe-area-inset-top,0px)) var(--kenar) calc(28px + env(safe-area-inset-bottom,0px));gap:clamp(22px,4vh,40px);overflow:auto} .tel-gez{display:flex;flex-direction:column} .tel-gez a{display:block;padding:clamp(7px,1.1vh,12px) 0;border-bottom:1px solid rgba(255,255,255,.09);color:inherit;text-decoration:none} .tel-gez a span{display:block;overflow:hidden} .tel-gez a b{display:block;font-family:var(--baslik);font-size:clamp(29px,8.4vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.16; transform:translateY(108%);transition:transform .62s cubic-bezier(.2,.7,.2,1),color .3s} .tel-menu.acik .tel-gez a b{transform:none;transition-delay:calc(220ms + var(--i,0) * 62ms)} .tel-menu.kapaniyor .tel-gez a b{transform:translateY(108%);transition-duration:.34s;transition-delay:calc(var(--i,0) * 26ms)} .tel-gez a.acik b{color:#4CAF50} .tel-gez a:active b{color:#4CAF50} /* alt blok: teklif düğmesi, diller, iletişim — hepsi sırayla belirir */ .tel-alt{display:flex;flex-direction:column;gap:16px;align-items:flex-start;font-family:var(--olcu);font-size:14px;color:#9FAABB} .tel-alt > *{opacity:0;transform:translateY(16px);transition:opacity .45s var(--hiz),transform .5s var(--hiz)} .tel-menu.acik .tel-alt > *{opacity:1;transform:none;transition-delay:calc(220ms + var(--i,0) * 62ms)} .tel-menu.kapaniyor .tel-alt > *{opacity:0;transform:translateY(10px);transition-duration:.24s;transition-delay:0ms} .tel-teklif{display:inline-block;font-family:var(--baslik);font-size:16px;font-weight:500;color:#FAF8F4;text-decoration:none} .tel-teklif span{display:block;border:1px solid rgba(76,175,80,.9);border-radius:99px;padding:12px 26px;position:relative;overflow:hidden;transition:color .35s} .tel-teklif span::before{content:'';position:absolute;inset:0;background:#4CAF50;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--hiz);z-index:-1} .tel-teklif:active span{color:#101B24} .tel-teklif:active span::before{transform:scaleX(1)} .tel-alt .dil{background:transparent;border-color:rgba(255,255,255,.2);width:max-content} .tel-alt .dil a{color:#9FAABB} .tel-alt .dil a.acik{background:#FAF8F4;color:#101B24} .tel-iletisim{display:flex;flex-direction:column;gap:7px} .tel-iletisim a{color:#9FAABB;padding-block:4px;transition:color .3s} .tel-iletisim a:active{color:#4CAF50} @media (prefers-reduced-motion:reduce){ .tel-menu-perde,.tel-gez a b,.tel-alt > *{transition-duration:.01ms !important} } body.menu-acik{overflow:hidden} @media (max-width:980px){ .gezinti{display:none} .ust-menu{display:block} .gez-teklif{display:none} .ust-ic{height:76px} .ust.kucuk .ust-ic{height:60px;margin-top:8px;padding:0 8px 0 16px} .ust-ic .dil{display:none} } @media (max-width:760px){ .ust-ic{gap:8px} .marka img{height:32px} .ust.kucuk .marka img{height:26px} .tema{width:36px;height:36px} } /* ── tema geçişi: alttan yükselen sıvı ── */ .tema-sivi{position:fixed;inset:0;z-index:140;pointer-events:none;background:var(--sivi,#0E1419);transform:translateY(102%);visibility:hidden} .tema-dalga{position:absolute;left:0;right:0;top:-88px;height:90px;width:100%;display:block} .tema-dalga path{fill:var(--sivi,#0E1419)} .tema-sivi.yukseliyor{visibility:visible;transform:translateY(0);transition:transform .72s cubic-bezier(.65,0,.2,1)} .tema-sivi.iniyor{visibility:visible;transform:translateY(0);opacity:0;transition:opacity .5s ease} .tema-sivi.yukseliyor .tema-dalga{animation:dalga 1.1s ease-in-out infinite alternate} @keyframes dalga{from{transform:translateX(-12px) scaleY(1)}to{transform:translateX(12px) scaleY(.6)}} /* bardaklar: tema değişince ışık yukarıdan yumuşakça kayıyor */ @property --isik-a{syntax:'';inherits:true;initial-value:.55} @property --isik-b{syntax:'';inherits:true;initial-value:0} :root{--isik-a:.55;--isik-b:0} /* .05 çok sönüktü ve geniş radialde bantlaşıp kirli gri huzme gibi görünüyordu (Bilo 9 Eyl); koyu temada tepe ışığı belirgin ve dar odaklı */ html[data-tema="dark"]{--isik-a:.15;--isik-b:.10} html[data-tema="dark"] .seri-yan{background-image:radial-gradient(46% 34% at 50% 0%,rgba(var(--isik),.13),transparent 60%),radial-gradient(60% 40% at 50% 100%,rgba(76,175,80,.08),transparent 70%)} .kt-gorsel,.seri-yan,.pencere-sahne,.urun-sahne,.nm-kutu,.serit-kutu,.tz-kafa{ background-image:radial-gradient(70% 55% at 50% 8%,rgba(var(--isik),var(--isik-a)),transparent 70%), radial-gradient(60% 40% at 50% 100%,rgba(76,175,80,var(--isik-b)),transparent 70%); transition:--isik-a 1.4s var(--hiz),--isik-b 1.4s var(--hiz),background-color .3s var(--hiz); } .kt-gorsel img,.seri-gorsel,.urun-sahne img,.tablo .tk img,.pencere-sahne img,.nm-kutu img,.serit-kutu img,.tz-kafa img{transition:filter 1.4s var(--hiz),transform .55s var(--hiz)} html[data-tema="dark"] .kt-gorsel img,html[data-tema="dark"] .urun-sahne img,html[data-tema="dark"] .tablo .tk img,html[data-tema="dark"] .pencere-sahne img, html[data-tema="dark"] .nm-kutu img,html[data-tema="dark"] .serit-kutu img,html[data-tema="dark"] .tz-kafa img{filter:brightness(.84) contrast(1.05)} /* ── belirme: her sayfada, aynı dil ── */ .gr{opacity:0;transform:translateY(22px);transition:opacity .85s var(--hiz),transform .85s var(--hiz);transition-delay:calc(var(--gk,0) * 65ms)} .gr.gr-ac{opacity:1;transform:none} .gr-perde{clip-path:inset(0 0 100% 0);transform:none;transition:clip-path 1s var(--hiz),opacity .6s var(--hiz);transition-delay:calc(var(--gk,0) * 65ms)} .gr-perde.gr-ac{clip-path:inset(0 0 -2% 0)} /* imleci izleyen ışık parıltısı KALDIRILDI (Bilo, 5 Eyl: katalogda parıltı istemiyorum). Kartlar yalnız çerçeve ve hafif yükselme ile tepki verir. */ .kt,.ur,.kat-kutu,.ofis,.nm-kutu,.serit-kutu,.hacim-kart{position:relative} .kt.secili::before{z-index:2} /* ── süzgeç paneli (bardaklar sayfası) ── */ .panel{border:1px solid var(--cizgi);background:var(--kagit-ac);margin-bottom:26px} .panel-bas{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--cizgi);flex-wrap:wrap} .panel-bas h2{font-size:clamp(18px,2vw,22px);font-weight:600} .panel-sonuc{font-family:var(--olcu);font-size:12.4px;color:var(--gri)} .panel-ic{display:grid;grid-template-columns:auto auto minmax(220px,1.2fr) minmax(160px,.9fr) auto auto;gap:18px clamp(16px,2.6vw,34px);padding:18px clamp(16px,2.4vw,28px) 20px;align-items:end} .panel-grup{display:flex;flex-direction:column;gap:9px;min-width:0} .panel-ad{font-family:var(--olcu);font-size:10.4px;letter-spacing:.16em;color:var(--gri-acik);text-transform:uppercase} .panel-sec{display:flex;gap:6px;flex-wrap:wrap} .panel-sec button{ font-family:var(--olcu);font-size:11.6px;letter-spacing:.04em;cursor:pointer;background:transparent;border:1px solid var(--cizgi);color:var(--gri); padding:8px 13px;border-radius:99px;position:relative;overflow:hidden;isolation:isolate;z-index:0;transition:color .3s var(--hiz),border-color .3s var(--hiz); } .panel-sec button::before{content:'';position:absolute;inset:0;background:var(--murekkep);transform:translateX(-101%);transition:transform .38s var(--hiz);z-index:-1;border-radius:99px} .panel-sec button:hover{border-color:var(--murekkep);color:var(--murekkep)} .panel-sec button.acik{color:var(--kagit);border-color:var(--murekkep)} .panel-sec button.acik::before{transform:translateX(0)} /* çift kollu ölçü aralığı */ .aralik{position:relative;height:34px;transform-origin:var(--esne-kok,50% 50%);transform:scaleX(var(--esne,1)) scaleY(calc(1 - (var(--esne,1) - 1) * 1.6));transition:transform .55s cubic-bezier(.22,1.6,.36,1)} .aralik.cekiliyor{transition:none} .aralik-ray{position:absolute;inset:0;border-radius:99px;background:var(--karton);border:1px solid var(--cizgi);overflow:hidden;box-shadow:inset 0 1px 2px rgba(var(--golge),.08)} .aralik-dolu{position:absolute;top:0;bottom:0;left:var(--a,0%);right:var(--b,0%);background:var(--yesil-koyu);border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .aralik-dolu::before,.aralik-dolu::after{content:'';position:absolute;top:50%;width:3px;height:12px;margin-top:-6px;border-radius:2px;background:rgba(255,255,255,.55)} .aralik-dolu::before{left:9px}.aralik-dolu::after{right:9px} .aralik input[type=range]{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:34px} .aralik input[type=range]::-webkit-slider-runnable-track{background:transparent;height:34px} .aralik input[type=range]::-moz-range-track{background:transparent;height:34px} .aralik input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:30px;height:34px;margin-top:0;border-radius:99px;background:transparent;border:0;cursor:grab} .aralik input[type=range]::-moz-range-thumb{pointer-events:auto;width:30px;height:34px;border-radius:99px;background:transparent;border:0;cursor:grab} .aralik input[type=range]:active::-webkit-slider-thumb{cursor:grabbing} .aralik input[type=range]:focus-visible{outline:none} .aralik:has(input:focus-visible) .aralik-ray{border-color:var(--yesil-koyu)} .aralik-deger{display:flex;justify-content:space-between;font-family:var(--olcu);font-size:12.4px;color:var(--murekkep)} .panel-kutu{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--cizgi);padding:4px 0;color:var(--gri);transition:border-color .3s} .panel-kutu:focus-within{border-color:var(--murekkep);color:var(--murekkep)} .panel-kutu input{font:inherit;font-family:var(--olcu);font-size:14px;background:transparent;border:0;color:var(--murekkep);width:100%;padding:6px 0;outline:none;min-width:0} .panel-kutu input::-webkit-search-cancel-button{-webkit-appearance:none} .panel-temizle{align-self:end;background:none;border:0;cursor:pointer;font-family:var(--olcu);font-size:11.4px;letter-spacing:.08em;color:var(--gri);padding:8px 0;position:relative;transition:color .3s} .panel-temizle::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .4s var(--hiz)} .panel-temizle:hover{color:var(--murekkep)} .panel-temizle:hover::after{transform:scaleX(1)} .kt.gizli{display:none} .kt.siralaniyor{transition:transform .4s var(--hiz),opacity .3s} /* dikey süzgeç: aynı #panel sağa yaslanır */ .panel.yan{position:fixed;right:18px;top:50%;transform:translateY(-50%);width:238px;max-height:calc(100vh - 110px);overflow:auto;z-index:60;margin:0;box-shadow:0 34px 60px -34px rgba(var(--golge),.4);animation:panelGel .65s cubic-bezier(.22,1,.36,1);scrollbar-width:thin} @keyframes panelGel{from{transform:translate(130%,-50%)}to{transform:translate(0,-50%)}} .panel.yan .panel-bas{padding:12px 16px;gap:6px} .panel.yan .panel-bas h2{font-size:14px} .panel.yan .panel-sonuc{font-size:11px} .panel.yan .panel-ic{grid-template-columns:1fr;gap:13px;padding:14px 16px 16px} .panel.yan .panel-aralik{grid-column:auto} .panel.yan .panel-sec{gap:5px} .panel.yan .panel-sec button{padding:6px 10px;font-size:10.6px} .panel.yan .aralik{height:28px} .panel.yan .aralik input{height:28px} .panel.yan .panel-temizle{align-self:start;justify-self:start;text-align:left;padding:6px 0 10px} .katalog{transition:margin .55s var(--hiz)} #katalog-bolum:has(.panel.yan) .katalog{margin-right:272px} body.pencere-acik .panel.yan{visibility:hidden} @media (max-width:1100px){.panel-ic{grid-template-columns:1fr 1fr}.panel-aralik{grid-column:span 2}} @media (max-width:640px){.panel-ic{grid-template-columns:1fr}.panel-aralik{grid-column:auto}.panel-sec button{padding:8px 11px}} /* ── ürün penceresi ── */ .pencere{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(12px,3vw,40px);visibility:hidden;pointer-events:none} .pencere.acik{visibility:visible;pointer-events:auto} .pencere-arka{position:absolute;inset:0;background:rgba(var(--golge),.5);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);opacity:0;transition:opacity .5s var(--hiz),backdrop-filter .6s var(--hiz),-webkit-backdrop-filter .6s var(--hiz)} .pencere.acik .pencere-arka{opacity:1;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)} .pencere-kutu{position:relative;width:min(980px,100%);max-height:calc(100svh - 2*clamp(12px,3vw,40px));overflow:auto;background:var(--kagit-ac);border:1px solid var(--cizgi); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); clip-path:inset(48% 6% 48% 6% round 4px);opacity:0;transform:translateY(18px); transition:clip-path .7s cubic-bezier(.7,0,.2,1),opacity .4s var(--hiz),transform .7s cubic-bezier(.7,0,.2,1)} .pencere.acik .pencere-kutu{clip-path:inset(0 0 0 0 round 4px);opacity:1;transform:none} .pencere-kapat{position:absolute;right:14px;top:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--cizgi);background:var(--kagit-ac);color:var(--murekkep);cursor:pointer;display:grid;place-items:center;transition:transform .4s var(--hiz),border-color .3s} .pencere-kapat:hover{transform:rotate(90deg);border-color:var(--murekkep)} .pencere-gorsel{position:relative;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:16px;align-items:center;border-right:1px solid var(--cizgi)} .pencere-sahne{position:relative;width:min(100%,420px);aspect-ratio:1;display:grid;place-items:center} .pencere-sahne img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(var(--golge),.2));transition:opacity .35s,transform .6s var(--hiz),filter 1.4s var(--hiz)} .pencere-sahne.degisiyor img{opacity:0;transform:translateY(10px)} /* dolum: bardağın kendi silüetiyle maskelenen kahve rengi, alttan yukarı */ .pencere-dolgu{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,#8A5A3A 0,#5A3520 30%,#3A2214 100%); -webkit-mask:var(--maske) center/contain no-repeat;mask:var(--maske) center/contain no-repeat; mix-blend-mode:multiply;opacity:.92; clip-path:inset(100% 0 0 0);transition:clip-path 1.5s cubic-bezier(.3,.8,.3,1)} .pencere-sahne.dolu .pencere-dolgu{clip-path:inset(var(--dolu-ust,20%) 0 0 0)} .pencere-sahne.dolu .pencere-dolgu::after{content:'';position:absolute;left:8%;right:8%;top:var(--dolu-ust,20%);height:6%;border-radius:50%;background:rgba(255,255,255,.18);transform:translateY(-50%)} .pencere-dolu{font-family:var(--olcu);font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--cizgi);border-radius:99px;padding:10px 18px;cursor:pointer;color:var(--murekkep);position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s} .pencere-dolu::before{content:'';position:absolute;inset:0;background:var(--murekkep);transform:translateY(101%);transition:transform .4s var(--hiz);z-index:-1} .pencere-dolu:hover{color:var(--kagit);border-color:var(--murekkep)} .pencere-dolu:hover::before{transform:translateY(0)} .pencere-dugmeler{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} /* sahne fotoğrafı (elde, dolum): gölge yok, yumuşak köşe */ .pencere-sahne.foto img{filter:none;border-radius:10px;object-fit:cover} .pencere-sahne img{cursor:zoom-in} .pencere-buyut{position:absolute;right:6px;bottom:6px;width:36px;height:36px;border-radius:50%;border:1px solid var(--cizgi);background:var(--kagit-ac);color:var(--murekkep);display:grid;place-items:center;cursor:zoom-in;opacity:.85;transition:opacity .3s,transform .4s var(--hiz),border-color .3s} .pencere-sahne:hover .pencere-buyut,.pencere-buyut:focus-visible{opacity:1;transform:scale(1.08);border-color:var(--murekkep)} /* görünüm şeridi: küçük kareler, seçili olanın altı çizili */ .pencere-gorunum{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .pencere-gorunum[hidden]{display:none} .pencere-gorunum button{width:56px;height:56px;padding:4px;border:1px solid var(--cizgi);border-radius:8px;background:var(--kagit);cursor:pointer;position:relative;overflow:hidden;transition:border-color .3s,transform .35s var(--hiz)} .pencere-gorunum button img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block} .pencere-gorunum button:hover{transform:translateY(-2px);border-color:var(--gri-acik)} .pencere-gorunum button[aria-selected="true"]{border-color:var(--murekkep)} .pencere-gorunum button[aria-selected="true"]::after{content:'';position:absolute;left:18%;right:18%;bottom:0;height:2px;background:var(--yesil-koyu)} .pencere-not{margin:8px 0 0;font-size:10.6px;line-height:1.5;color:var(--gri-acik);max-width:44ch} /* büyüteç: görsel pencereden kalkıp ekranı dolduran kareye uçar (Bilo, 5 Eyl) */ .buyutec{position:fixed;inset:0;z-index:140;visibility:hidden;pointer-events:none} .buyutec.acik{visibility:visible;pointer-events:auto} .buyutec-arka{position:absolute;inset:0;background:rgba(var(--golge),.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--hiz)} .buyutec.acik .buyutec-arka{opacity:1} .buyutec.kapaniyor .buyutec-arka{opacity:0} .buyutec img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;object-fit:contain;border-radius:8px;cursor:zoom-out;background:transparent;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))} .buyutec-kapat{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--hiz)} .buyutec.yerlesti .buyutec-kapat{opacity:1;transform:none} .buyutec-kapat:hover{transform:rotate(90deg)} .buyutec-alt{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center;color:rgba(255,255,255,.85);font-family:var(--olcu);font-size:11.6px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--hiz)} .buyutec.yerlesti .buyutec-alt{opacity:1;transform:none} .pencere-karsi{display:inline-flex;align-items:center;gap:8px} .pencere-karsi svg{width:14px;height:14px} .pencere-karsi.secili{background:var(--murekkep);color:var(--kagit);border-color:var(--murekkep)} .pencere-karsi.secili::before{display:none} /* uçan bardak: karttan pencereye, pencereden karta (Bilo, 5 Eyl) */ .ucan-bardak{position:fixed;left:0;top:0;z-index:130;pointer-events:none;object-fit:contain;transform-origin:0 0;will-change:transform;filter:drop-shadow(0 18px 26px rgba(var(--golge),.22));transition:opacity .35s} .ucan-bardak.sonuyor{opacity:0} .pencere-sahne.ucus img,.pencere-sahne.ucus .pencere-dolgu{opacity:0!important;transition:none} .kt.ucmus .kt-gorsel img{opacity:0;transition:none} .ur.ucmus .ur-gorsel img{opacity:0;transition:none} .pencere-yazi{padding:clamp(24px,4vw,48px) clamp(24px,4vw,48px) clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:14px} .pencere-yazi em{font-style:normal;font-family:var(--olcu);font-size:11.6px;letter-spacing:.14em;color:var(--yesil-koyu);text-transform:uppercase} .pencere-yazi h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.03em} .pencere-yazi h2 i{font-style:normal;font-weight:400;color:var(--gri);font-size:.6em} .pencere-olcu{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:8px 0 0;border-top:1px solid var(--cizgi);padding-top:16px} .pencere-olcu div{display:flex;flex-direction:column;gap:2px} .pencere-olcu dt{font-family:var(--olcu);font-size:10.4px;letter-spacing:.14em;color:var(--gri-acik);text-transform:uppercase} .pencere-olcu dd{margin:0;font-family:var(--baslik);font-size:17px;font-weight:600} .pencere-olcu dd i{font-style:normal;font-size:11.6px;font-weight:400;color:var(--gri)} .pencere-eylem{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px} .pencere-eylem .satir-git[hidden]{display:none} /* panelden eklenen ürünün ayrı sayfası yok */ .pencere-eylem .gonder{color:var(--murekkep);border-color:var(--murekkep);text-decoration:none;display:inline-block} .pencere-eylem .gonder::before{background:var(--murekkep)} .pencere-eylem .gonder:hover{color:var(--kagit)} .pencere-eylem .satir-git{margin-top:0} .pencere-gez{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--cizgi)} .pencere-gez button{background:none;border:0;cursor:pointer;font-family:var(--olcu);font-size:11.4px;letter-spacing:.08em;color:var(--gri);padding:6px 0;transition:color .3s;display:flex;align-items:center;gap:8px} .pencere-gez button::before,.pencere-gez button::after{content:'';width:14px;height:1px;background:currentColor;transition:width .3s var(--hiz)} .pencere-gez button:first-child::after{display:none} .pencere-gez button:last-child::before{display:none} .pencere-gez button:hover{color:var(--murekkep)} .pencere-gez button:hover::before,.pencere-gez button:hover::after{width:26px} body.pencere-acik{overflow:hidden} @media (max-width:760px){ .pencere{padding:0;align-items:end} .pencere-kutu{grid-template-columns:1fr;max-height:94svh;border-radius:14px 14px 0 0;clip-path:inset(100% 0 0 0 round 14px 14px 0 0)} .pencere.acik .pencere-kutu{clip-path:inset(0 0 0 0 round 14px 14px 0 0)} .pencere-gorsel{border-right:0;border-bottom:1px solid var(--cizgi);padding:26px 22px 18px} .pencere-sahne{width:min(100%,240px)} .pencere-yazi{padding:22px 22px 26px} } /* ── hacim tezgâhı ── */ .hacim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,60px);border:1px solid var(--cizgi);background:var(--kagit-ac);padding:clamp(22px,3.4vw,44px)} .hacim-buyuk{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .hacim-buyuk b{font-family:var(--baslik);font-size:clamp(64px,9vw,120px);font-weight:600;letter-spacing:-.05em;line-height:.95} .hacim-buyuk i{font-style:normal;font-family:var(--olcu);font-size:18px;color:var(--gri)} .hacim-buyuk span{width:100%;font-family:var(--olcu);font-size:14px;color:var(--gri);margin-top:4px} .hacim-kaydir{width:100%;margin:26px 0 22px;-webkit-appearance:none;appearance:none;height:2px;background:linear-gradient(90deg,var(--yesil-koyu) var(--p,50%),var(--cizgi) var(--p,50%));outline:none} .hacim-kaydir::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--kagit-ac);border:2px solid var(--murekkep);cursor:grab;transition:transform .25s var(--hiz)} .hacim-kaydir::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--kagit-ac);border:2px solid var(--murekkep);cursor:grab} .hacim-kaydir:active::-webkit-slider-thumb{transform:scale(1.2)} .hacim-yakin>span{display:block;font-family:var(--olcu);font-size:10.4px;letter-spacing:.16em;color:var(--gri-acik);text-transform:uppercase;margin-bottom:8px} .hacim-yakin div{display:flex;gap:8px;flex-wrap:wrap} .hacim-yakin a{font-family:var(--olcu);font-size:12px;border:1px solid var(--cizgi);border-radius:99px;padding:7px 13px;transition:border-color .3s,color .3s,transform .3s var(--hiz)} .hacim-yakin a:hover{border-color:var(--yesil-koyu);color:var(--yesil-koyu);transform:translateY(-2px)} .hacim-sag{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);align-self:stretch} .hacim-kart{background:var(--kagit-ac);padding:20px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden} .hacim-kart b{font-family:var(--baslik);font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1} .hacim-kart span{font-family:var(--olcu);font-size:12px;color:var(--gri);line-height:1.4} .hacim-cizim{height:110px;display:flex;align-items:flex-end;position:relative} /* espresso: küçük fincan noktaları */ #hacimEspresso{flex-wrap:wrap;gap:5px;align-content:flex-end} #hacimEspresso i{width:13px;height:11px;border:1.5px solid var(--murekkep);border-top:0;border-radius:0 0 5px 5px;opacity:0;transform:scale(.4);animation:fincanGel .4s var(--hiz) forwards;animation-delay:calc(var(--i) * 28ms)} #hacimEspresso i.yarim{opacity:.4} @keyframes fincanGel{to{opacity:1;transform:none}} /* kutu ve şişe: dolan silüet */ .hacim-kart[data-tur="kutu"] .hacim-cizim,.hacim-kart[data-tur="sise"] .hacim-cizim{justify-content:center} .hacim-kart[data-tur="kutu"] .hacim-cizim::before{content:'';width:48px;height:92px;border:1.5px solid var(--murekkep);border-radius:6px;position:absolute;left:50%;bottom:0;transform:translateX(-50%)} .hacim-kart[data-tur="sise"] .hacim-cizim::before{content:'';width:40px;height:100px;border:1.5px solid var(--murekkep);border-radius:12px 12px 6px 6px;position:absolute;left:50%;bottom:0;transform:translateX(-50%); clip-path:polygon(30% 0,70% 0,70% 12%,100% 26%,100% 100%,0 100%,0 26%,30% 12%)} .hacim-dolgu{position:absolute;left:50%;bottom:0;width:48px;height:var(--h,50%);background:var(--yesil-koyu);opacity:.55;transform:translateX(-50%);transition:height .7s var(--hiz);border-radius:0 0 5px 5px;max-height:92px} .hacim-kart[data-tur="sise"] .hacim-dolgu{width:40px;max-height:100px;clip-path:polygon(30% 0,70% 0,70% 12%,100% 26%,100% 100%,0 100%,0 26%,30% 12%);border-radius:12px 12px 6px 6px} @media (max-width:860px){.hacim{grid-template-columns:1fr}.hacim-sag{grid-template-columns:repeat(3,1fr)}} @media (max-width:520px){.hacim-sag{grid-template-columns:1fr 1fr}.hacim-kart[data-tur="espresso"]{grid-column:span 2}} /* ── baskı önizleme ── */ .onizleme{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vh,48px);border:1px solid var(--cizgi);background:var(--kagit-ac);padding:clamp(20px,3vw,40px);align-items:center} .onizleme-yazi h3{font-size:clamp(22px,2.6vw,32px);font-weight:500;margin-bottom:12px;max-width:18ch} .onizleme-yazi p{color:var(--gri);font-size:14.6px;max-width:44ch} .onizleme-eylem{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 10px} .onizleme-sec{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;font-family:var(--olcu);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--murekkep);color:var(--murekkep);padding:13px 24px;border-radius:2px;transition:color .35s var(--hiz)} .onizleme-sec input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0} .onizleme-sec::before{content:'';position:absolute;left:var(--bx,50%);top:var(--by,50%);width:260%;aspect-ratio:1;margin:-130% 0 0 -130%;border-radius:50%;background:var(--murekkep);transform:scale(0);transition:transform .55s var(--hiz);z-index:-1} .onizleme-sec:hover{color:var(--kagit)} .onizleme-sec:hover::before{transform:scale(1)} .onizleme-ipucu{font-family:var(--olcu);font-size:12px;color:var(--gri-acik)} .onizleme-ornek,.onizleme-temizle{background:none;border:0;cursor:pointer;font-family:var(--olcu);font-size:11.6px;letter-spacing:.08em;color:var(--gri);padding:6px 0;border-bottom:1px solid var(--cizgi);transition:color .3s,border-color .3s} .onizleme-ornek:hover,.onizleme-temizle:hover{color:var(--murekkep);border-color:var(--murekkep)} .onizleme-hata{font-family:var(--olcu);font-size:12.4px;color:#B7791F;margin:0 0 8px} .onizleme-sahne{position:relative;aspect-ratio:1;border:1px solid var(--cizgi);background:var(--kagit);display:grid;place-items:center;overflow:hidden;transition:border-color .3s,background .3s} .onizleme-sahne.uzerinde{border-color:var(--yesil-koyu);background:var(--kagit-ac)} .onizleme-sahne canvas{width:100%;height:100%;display:block} @media (max-width:860px){.onizleme{grid-template-columns:1fr}.onizleme-sahne{max-width:420px;margin:0 auto;width:100%}} /* ── canlı sayaç ── */ .sayac-sar{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,56px);align-items:center;margin-top:clamp(28px,4vh,52px);padding-top:clamp(22px,3vh,34px);border-top:1px solid var(--murekkep)} .sayac-sayi{font-family:var(--baslik);font-size:clamp(42px,7.4vw,112px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .sayac-yazi{display:flex;flex-direction:column;gap:6px;max-width:44ch} .sayac-yazi b{font-family:var(--baslik);font-size:17px;font-weight:600} .sayac-yazi span{font-size:13.6px;color:var(--gri);line-height:1.55} .sayac-yazi em{font-style:normal;font-family:var(--olcu);font-size:11.6px;letter-spacing:.1em;color:var(--yesil-koyu);text-transform:uppercase;display:flex;align-items:center;gap:8px} .sayac-yazi em::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--yesil);animation:nabiz 1.6s ease-in-out infinite} @keyframes nabiz{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}} @media (max-width:760px){.sayac-sar{grid-template-columns:1fr;gap:12px}} /* ── sevkiyat haritası (Leaflet, isteğe bağlı yüklenir) ── */ .harita-sar{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr);gap:clamp(18px,3vw,40px);align-items:stretch} .harita{position:relative;height:clamp(340px,52vh,540px);border:1px solid var(--cizgi);background:var(--karton);overflow:hidden;isolation:isolate;z-index:0} .harita-bekle{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--olcu);font-size:12px;letter-spacing:.1em;color:var(--murekkep);text-transform:uppercase} .harita.hazir .harita-bekle{display:none} .harita .leaflet-container{background:var(--karton);font-family:var(--olcu)} .harita .leaflet-control-attribution{font-size:9.6px;background:var(--cam);color:var(--gri)} .harita .leaflet-control-attribution a{color:var(--gri)} .harita-etiket{font-family:var(--baslik);font-size:11.6px;font-weight:600;letter-spacing:.02em;color:var(--murekkep);background:var(--kagit-ac);border:1px solid var(--cizgi);border-radius:99px;padding:3px 9px;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(var(--golge),.4)} .harita-etiket.sol{display:inline-block;transform:translate(calc(-100% - 12px),9px)} /* Belgrad: sola + hafif aşağı; Bükreş ve Milano kutularıyla binmesin */ .harita-etiket i{font-style:normal;color:var(--yesil-koyu);margin-left:6px;font-family:var(--olcu);font-weight:500} .harita-etiket.merkez{background:var(--murekkep);color:var(--kagit);border-color:var(--murekkep)} .harita .leaflet-tile-pane{filter:saturate(.7) contrast(1.02)} @media(max-width:760px){.harita{height:min(62vh,420px)}.harita-etiket:not(.merkez):not(.vurgu){display:none}.harita-etiket i{display:none}.harita-etiket.vurgu{transform:translateY(-2px)}.harita-etiket.merkez{display:inline-block;transform:translateX(calc(-100% - 18px))}} .harita-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--murekkep);display:flex;flex-direction:column} .harita-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--cizgi);cursor:default;position:relative;transition:padding-left .3s var(--hiz)} .harita-liste li::before{content:'';position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--yesil-koyu);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hiz)} .harita-liste li:hover,.harita-liste li.vurgu{padding-left:18px} .harita-liste li:hover::before,.harita-liste li.vurgu::before{transform:scaleX(1)} .harita-liste li span{font-family:var(--baslik);font-size:15px;font-weight:500} .harita-liste li b{font-family:var(--olcu);font-size:13px;font-weight:500;white-space:nowrap} .harita-liste li b i{font-style:normal;color:var(--gri);font-size:11px} @media (max-width:860px){.harita-sar{grid-template-columns:1fr}.harita{height:min(60vw,420px)}} /* ── katman sahnesi: kaydırınca parçalanan bardak ── */ .kare-sar{position:relative;height:260vh;z-index:1} .kare-yapisik{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(20px,4vw,70px);padding:80px var(--kenar) 40px;overflow:hidden} .kare-tuval{width:min(100%,600px);aspect-ratio:1;height:auto;justify-self:center;display:block} /* Kareler videonun kendi zeminiyle geliyor (Bilo, 5 Eyl: "arka planını kaldırma gerek yok"). Sahne beyaz bir kutu: yuvarlak köşe ve yumuşak gölge ile sayfadan ayrılıyor. */ .kare-tuval.kare-video{background:#fff;border-radius:28px;box-shadow:0 40px 90px -40px rgba(20,30,20,.35); width:min(100%,600px);height:auto;aspect-ratio:1} html[data-tema="dark"] .kare-tuval.kare-video{box-shadow:0 40px 90px -40px rgba(0,0,0,.7)} .kare-yazi h2{font-size:clamp(28px,4vw,54px);font-weight:500;max-width:14ch;letter-spacing:-.035em} .kare-yazi p{color:var(--gri);font-size:15px;max-width:38ch;margin:18px 0 26px} .kare-katman{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .kare-katman li{font-family:var(--olcu);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gri-acik);padding:10px 0 10px 26px;position:relative;transition:color .4s,padding-left .4s var(--hiz)} .kare-katman li::before{content:'';position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--cizgi);transition:background .4s,width .4s var(--hiz)} .kare-katman li.acik{color:var(--murekkep);padding-left:34px} .kare-katman li.acik::before{background:var(--yesil-koyu);width:22px} @media (max-width:860px){ .kare-sar{height:220vh} .kare-yapisik{grid-template-columns:1fr;align-content:center;gap:10px;padding:72px var(--kenar) 24px} .kare-tuval{width:min(70vw,360px)} .kare-tuval.kare-video{width:min(78vw,380px);height:auto} .kare-yazi h2{font-size:clamp(24px,7vw,34px)} .kare-yazi p{margin:10px 0 14px} .kare-katman{flex-direction:row;flex-wrap:wrap;gap:4px 16px} .kare-katman li{padding-left:18px;font-size:11px} .kare-katman li.acik{padding-left:24px} } @media (prefers-reduced-motion:reduce){ .gr,.gr-perde{opacity:1;transform:none;clip-path:none} .imlec{display:none} .fon{display:none} .kare-sar{height:auto} .kare-yapisik{position:static;height:auto} } /* harita: rota çizgisi belirerek çizilir, etiket kutusu Leaflet varsayılanını ezer */ .harita .harita-ikon{background:none;border:0} .harita .leaflet-marker-icon.harita-ikon{width:auto !important;height:auto !important} .harita-rota{stroke-dasharray:6 6;stroke-dashoffset:0;animation:rotaAk 1.2s linear infinite} @keyframes rotaAk{to{stroke-dashoffset:-24}}