/* ── yazı tipleri: yerelden servis ediliyor ────────────────────────────── Önce fonts.googleapis.com'dan bir stil dosyası çekiliyordu; o dosya RENDER ENGELLİYOR ve iki ayrı üçüncü taraf bağlantısı (DNS + TLS) açtırıyordu. Artık dosyalar assets/fonts altında ve Türkçe için gereken karakterlere daraltılmış: Inter 130 KB → 52 KB, Manrope 39 KB → 34 KB. İkisi de DEĞİŞKEN yazı tipi; tek dosya bütün kalınlıkları veriyor. */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(/assets/fonts/inter-latinext.woff2) format('woff2');unicode-range:U+0100-017F, U+018F, U+0192, U+01FA-01FF} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+20BA, U+2122, U+2190-2193, U+2212, U+00D7, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap; src:url(/assets/fonts/manrope-latinext.woff2) format('woff2');unicode-range:U+0100-017F, U+018F, U+0192, U+01FA-01FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap; src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+20BA, U+2122, U+2190-2193, U+2212, U+00D7, U+FEFF, U+FFFD} /* ============================================================ Doğal Domuz Yağı — ortak stil ============================================================ */ :root{ --ink:#132428; --ink-2:#1b343a; --ink-3:#25464e; --gold:#c9a24a; --gold-2:#e0c281; --gold-3:#a37f2f; --cream:#f8f3ea; --paper:#fff; --paper-2:#fdfaf5; --tx:#17242a; --tx-2:#4d5c60; --tx-3:#8a9599; --line:#e9e1d3; --line-2:#f1ebe0; --wa:#25d366; --wa-2:#128c7e; /* kampanya vurgusu — koyu zümrüt; neon yeşil bilinçli olarak kullanılmıyor */ --yesil:#0f8f68; --yesil-2:#4bd6a4; --yesil-3:#0a6b4e; --tel:#2f7fd4; --tel-2:#1b5fa8; --tel-3:#144982; --r:18px; --r-sm:12px; --r-lg:26px; --sh:0 1px 2px rgba(19,36,40,.04), 0 8px 28px rgba(19,36,40,.06); --sh-lg:0 2px 4px rgba(19,36,40,.05), 0 20px 50px rgba(19,36,40,.12); /* Başlık ve fiyatlar Manrope (dolgun, kurumsal), gövde metni Inter. */ --baslik:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --govde:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } *{margin:0;padding:0;box-sizing:border-box} /* display veren sınıf kuralları [hidden]'ı yeniyordu; öznitelik her zaman kazansın */ [hidden]{display:none!important} .hp-v,.hp-k-yeni,.hp-k-eski,.p-price .v,.pdp-price .v,.sum-ara,.sum-toplam,.sum-kargo,.mbar-v,.mrow-p,.buy-v,.rel-b i,.mini i,.p-sub,.cart-row .p{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--yapiskan-h,120px)} /* ⛔ body'ye overflow-x:hidden EKLEME: html'de de olduğu için body kaydırma kabına dönüşür ve yapışkan duyuru şeridi + başlık yapışmayı bırakır. Yatay taşma koruması aşağıda yalnızca html'de duruyor. */ body{font-family:var(--govde);color:var(--tx);background:var(--paper);line-height:1.7;font-size:16px;font-weight:400} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} ul{list-style:none} .container{max-width:1200px;margin:0 auto;padding:0 24px} .ico{width:1em;height:1em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ico-f{fill:currentColor;stroke:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* ── duyuru şeridi ── */ .announce{position:sticky;top:0;z-index:899;background:linear-gradient(90deg,var(--ink) 0%,var(--ink-3) 50%,var(--ink) 100%);color:#f4ecdc;font-size:.8rem;letter-spacing:.02em} .announce .container{display:flex;align-items:center;justify-content:center;gap:26px;min-height:38px;flex-wrap:wrap;text-align:center} .announce span{display:inline-flex;align-items:center;gap:7px} .announce .ico{width:14px;height:14px;color:var(--gold-2)} .announce b{color:var(--gold-2);font-weight:600} .announce .nabiz{display:inline-block;font-weight:700;letter-spacing:.045em;transform-origin:center;animation:duyuruNabiz 2.4s var(--ease) infinite} @keyframes duyuruNabiz{ 0%,68%,100%{transform:scale(1);color:var(--gold-2);text-shadow:0 0 0 rgba(224,194,129,0)} 80%{transform:scale(1.07);color:#fbeecb;text-shadow:0 0 15px rgba(224,194,129,.65)} 90%{transform:scale(1.02);color:#f3ddb0;text-shadow:0 0 7px rgba(224,194,129,.3)} } .announce .nabiz-ic{transform-origin:center;animation:duyuruIkon 2.4s var(--ease) infinite} @keyframes duyuruIkon{ 0%,68%,100%{transform:translateX(0)} 78%{transform:translateX(3px)} 88%{transform:translateX(0)} } @media(prefers-reduced-motion:reduce){ .announce .nabiz,.announce .nabiz-ic{animation:none} } .announce .sep{opacity:.28} @media(max-width:640px){.announce .sep,.announce .a-hide{display:none}.announce .container{gap:0;padding:7px 16px}} /* ── header ── */ .hdr{position:sticky;top:var(--duyuru-h,38px);z-index:900;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);transition:box-shadow .3s} .hdr.stuck{box-shadow:0 4px 24px rgba(19,36,40,.08)} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px} .logo{display:flex;align-items:center;gap:12px} .logo img{width:46px;height:46px;object-fit:contain} .logo-t{display:block;font-family:var(--baslik);font-size:1.152rem;font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:.01em} .logo-s{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3);font-weight:600;margin-top:1px} .nav>ul{display:flex;align-items:center;gap:2px} .nav>ul>li{position:relative} .nav a{display:block;padding:9px 14px;font-size:.9rem;font-weight:500;color:var(--tx-2);border-radius:9px;transition:.2s var(--ease)} .nav a:hover,.nav a.on{color:var(--ink);background:var(--cream)} .nav .caret{width:11px;height:11px;margin-left:5px;vertical-align:-1px;opacity:.6} .drop{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s var(--ease)} .has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)} .drop a{padding:10px 14px;font-size:.86rem;border-radius:9px} .hdr-cta{display:flex;align-items:center;gap:10px} .hdr-tel{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:#fff;padding:9px 14px;border-radius:10px;transition:.2s;background:linear-gradient(135deg,var(--tel) 0%,var(--tel-2) 100%);box-shadow:0 3px 12px rgba(47,127,212,.28)} .hdr-tel:hover{background:linear-gradient(135deg,var(--tel-2) 0%,var(--tel-3) 100%);color:#fff;box-shadow:0 6px 18px rgba(47,127,212,.4)} .hdr-tel .ico{width:16px;height:16px;color:#fff} .burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--ink);cursor:pointer} .burger .ico{width:20px;height:20px} /* ── butonlar ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:12px;font-family:var(--govde);font-size:.94rem;font-weight:600;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;transition:.25s var(--ease);white-space:nowrap} .btn .ico{width:17px;height:17px} .btn-wa{background:linear-gradient(135deg,var(--wa) 0%,var(--wa-2) 100%);color:#fff;box-shadow:0 4px 16px rgba(37,211,102,.28)} .btn-wa:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(37,211,102,.4)} .btn-gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-3) 100%);color:#fff;box-shadow:0 4px 16px rgba(201,162,74,.3)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(201,162,74,.42)} .btn-ink{background:var(--ink);color:#fff} .btn-ink:hover{background:var(--ink-3);transform:translateY(-2px)} .btn-line{background:transparent;border-color:var(--line);color:var(--ink)} .btn-tel{background:linear-gradient(135deg,var(--tel) 0%,var(--tel-2) 100%);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(47,127,212,.3)} .btn-tel:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(47,127,212,.42);color:#fff} .btn-tel .ico{color:#fff} .btn-line:hover{border-color:var(--gold);color:var(--gold-3);background:var(--paper-2)} .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(6px)} .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:var(--gold-2);transform:translateY(-2px)} .btn-sm{padding:11px 18px;font-size:.86rem} .btn-lg{padding:17px 34px;font-size:1rem} .btn-block{width:100%} /* ── bölüm başlığı ── */ .sec{padding:96px 0} .sec-cream{background:var(--cream)} .sec-paper{background:var(--paper-2)} .sec-ink{background:linear-gradient(165deg,var(--ink) 0%,#0c1c1f 100%);color:#fff;position:relative;overflow:hidden} .sec-ink::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 62vw at 84% 26%,rgba(201,162,74,.10) 0%,rgba(201,162,74,0) 60%);pointer-events:none} .sec-ink>.container{position:relative;z-index:1} .sec-h{text-align:center;max-width:760px;margin:0 auto 60px} .tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3);margin-bottom:16px} .sec-ink .tag{color:var(--gold-2)} .sec-h h2{font-family:var(--baslik);font-size:clamp(1.7rem,3.57vw,2.32rem);font-weight:700;line-height:1.16;letter-spacing:-.024em;color:var(--ink)} .sec-ink .sec-h h2{color:#fff} .sec-h p{margin-top:16px;color:var(--tx-2);font-size:1.02rem} .sec-ink .sec-h p{color:rgba(255,255,255,.68)} .rule{width:62px;height:2px;margin:24px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* ── hero ── */ .hero{position:relative;background:linear-gradient(160deg,var(--ink) 0%,#0d1e21 62%,#0a1719 100%);color:#fff;overflow:hidden;padding:76px 0 86px} .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 78% 40%,rgba(201,162,74,.14) 0%,transparent 62%)} .hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5} .hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr; grid-template-areas:'tx art' 'buy art';gap:0 64px;align-items:center} .hero-tx{grid-area:tx;align-self:end} .hero-art{grid-area:art} .hero-buy{grid-area:buy;align-self:start} .hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(201,162,74,.14);border:1px solid rgba(201,162,74,.34);color:var(--gold-2);padding:8px 17px;border-radius:100px;font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:26px} .hero-badge .ico{width:14px;height:14px} .hero h1{font-family:var(--baslik);font-size:clamp(2rem,4.76vw,3.2rem);font-weight:800;line-height:1.06;letter-spacing:-.028em;margin-bottom:22px} .hero h1 em{font-style:normal;color:var(--gold-2)} .hero-lead{font-size:1.09rem;color:rgba(255,255,255,.78);max-width:560px;margin-bottom:14px} .hero-sub{font-size:.94rem;color:rgba(255,255,255,.55);max-width:560px;margin-bottom:30px} .hero-price{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:16px;margin-bottom:22px;width:100%} .hp-item{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:13px 12px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:.25s var(--ease);position:relative;width:100%;text-align:left;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .hp-item:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px} /* Seçili kutu: sepette adedi olan ürün. Altın çerçeve + sağ üstte adet rozeti. */ .hp-item.is-secili{background:rgba(201,162,74,.16);border-color:rgba(201,162,74,.62);box-shadow:0 0 0 1px rgba(201,162,74,.28) inset} .hp-item.is-secili .hp-g{color:rgba(255,255,255,.72)} /* Adet rozeti sayı-only: 'N adet' yazısı dar kutuda gramaj satırının üstüne biniyordu. Yer daima ayrılır (.hp-g padding), seçince satır kaymaz. */ .hp-ad{position:absolute;top:8px;right:8px;display:none;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;background:var(--gold);color:#17100a;font-family:var(--baslik);font-size:.68rem;font-weight:800;border-radius:100px;line-height:1} .hp-item.is-secili .hp-ad{display:inline-flex} .hp-kmp:focus-visible{outline:2px solid var(--yesil-2);outline-offset:3px} .hp-kmp:hover{border-color:rgba(75,214,164,.8)} .hp-kmp.is-secili{border-color:rgba(75,214,164,.95); background:linear-gradient(150deg,rgba(15,143,104,.55) 0%,rgba(10,107,78,.22) 100%)} .hp-kmp.is-secili .hp-ad{display:inline-flex} .hp-item:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-2px)} .hp-item:active{transform:translateY(0)} .hp-item.is-secili:hover{background:rgba(201,162,74,.22);border-color:rgba(201,162,74,.75)} .hp-g{padding-right:22px;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;line-height:1.3} .hp-v{font-family:var(--baslik);font-size:clamp(1.064rem,1.7vw,1.278rem);font-weight:700;color:var(--gold-2);line-height:1.1;white-space:nowrap} .hero-cta{display:flex;align-items:stretch;gap:13px;flex-wrap:wrap;margin-bottom:38px} .hero-art{position:relative} /* Köşe yarıçapı afişe göre küçültüldü: --r-lg (26px) sağ üstteki 'Aynı Gün' rozetinin köşesini kesiyordu. 12px yalnız düz zemin köşesini yuvarlıyor. */ .hero-frame{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.42);border:1px solid rgba(201,162,74,.24)} /* Hero görseli 2026-08-30'dan beri fotoğraf değil, üstünde yazı olan bir AFİŞ. object-fit:cover ile kırpılınca üstteki başlık ve alttaki telefon bandı kesiliyordu → tam en boy oranıyla, kırpmasız gösteriliyor. */ .hero-frame img{width:100%;height:auto;aspect-ratio:1185/1327} /* .hero-frame::after (alttan karartma) kaldırıldı: fotoğrafı koyu zemine bağlamak içindi, afişin alt bandını okunmaz yapıyordu. */ .hero-chip{position:absolute;z-index:3;background:rgba(255,255,255,.97);border-radius:14px;padding:13px 18px;box-shadow:0 12px 34px rgba(0,0,0,.26);display:flex;align-items:center;gap:11px} .hero-chip .ico{width:19px;height:19px;color:var(--gold-3)} .hc-tx b{display:block;font-size:.88rem;color:var(--ink);font-weight:700;line-height:1.2} .hc-tx{display:block} .hc-tx span{display:block;font-size:.72rem;color:var(--tx-3)} .chip-a{top:22px;left:-24px} .chip-b{bottom:24px;right:-22px} @media(max-width:960px){ /* mobilde sıra: metin → görsel → fiyat/CTA */ .hero-in{grid-template-columns:1fr;grid-template-areas:'tx' 'art' 'buy';gap:34px} .hero-tx,.hero-buy{align-self:auto} .hero-art{max-width:420px;margin:0 auto;width:100%} .chip-a{left:-12px}.chip-b{right:-10px} } /* ── güven şeridi ── */ /* ═══ tanıtım şeridi — hero'nun altı, tıklanınca telefon açar ═══ Görsel doğal boyutunun (1922 px) üstüne BÜYÜTÜLMEZ; daha geniş ekranda yanlarda kalan boşluk hero ile aynı koyu zemin olur, dikiş görünmez. */ .hero-band{background:var(--ink);line-height:0} .hb-l{position:relative;display:block;max-width:1922px;margin:0 auto} .hb-l img{width:100%;height:auto;aspect-ratio:1922/936} .hb-call{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);color:var(--ink);font-family:var(--baslik);font-size:.86rem;font-weight:700;line-height:1;padding:10px 15px;border-radius:100px;box-shadow:0 8px 24px rgba(10,23,25,.3);transition:.25s var(--ease)} .hb-call .ico{width:15px;height:15px;color:var(--gold-3)} .hb-l:hover .hb-call{background:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,23,25,.38)} /* Dar ekranda şerit 208 px'e iniyor; rozet başlığın üstüne biniyordu. Numara görselin alt şeridinde zaten yazılı, görselin tamamı da tel: bağlantısı. */ @media(max-width:760px){.hb-call{display:none}} .trust{background:var(--paper);border-bottom:1px solid var(--line-2);padding:30px 0} .trust-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .tr-i{display:flex;align-items:center;gap:14px} .tr-ic{width:46px;height:46px;border-radius:13px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line)} .tr-ic .ico{width:21px;height:21px;color:var(--gold-3)} .tr-tx b{display:block;font-size:.9rem;color:var(--ink);font-weight:700;line-height:1.3} .tr-tx span{display:block;font-size:.79rem;color:var(--tx-3)} @media(max-width:860px){.trust-g{grid-template-columns:repeat(2,1fr);gap:20px 14px}} @media(max-width:460px){.trust-g{grid-template-columns:1fr}} /* ── ürünler ── */ .prod-g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start} .prod{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);transition:.35s var(--ease);position:relative;display:flex;flex-direction:column} .prod:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(201,162,74,.45)} .prod.hot{border-color:var(--gold);box-shadow:0 2px 6px rgba(201,162,74,.12),0 22px 54px rgba(201,162,74,.18)} .prod.hot::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-3));z-index:3} /* Kampanya rozeti kartın sağ üst köşesinden ÇAPRAZ geçer. .prod'da overflow:hidden olduğu için şeridin uçları köşede kesilir. */ .p-badge{ position:absolute;top:24px;right:-58px;width:210px;z-index:4; transform:rotate(45deg);transform-origin:center; text-align:center;padding:7px 0; background:linear-gradient(135deg,var(--yesil-2) 0%,var(--yesil) 55%,var(--yesil-3) 100%); color:#04291d;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase; pointer-events:none; } /* Kampanya ürününün şeridi "çok basit" duruyordu (kullanıcı geri bildirimi). Yalnız öne çıkan kartta: daha kalın yazı, derin gölge ve yavaş bir parıltı. Parıltı ::after ile geçer; şerit overflow:hidden olmalı yoksa kartın dışına taşar. */ .prod.hot .p-badge{ padding:9px 0;font-size:.75rem;letter-spacing:.17em;color:#f2fffa; background:linear-gradient(135deg,#0c6d4c 0%,#15c98d 50%,#0c6d4c 100%); box-shadow:0 7px 20px rgba(8,58,42,.42); overflow:hidden; } .prod.hot .p-badge::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%); transform:translateX(-130%); animation:kmpParilti 4.6s var(--ease) infinite; } @keyframes kmpParilti{0%,64%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}} @media(prefers-reduced-motion:reduce){.prod.hot .p-badge::after{animation:none;opacity:0}} /* Asıl dikkat çeken unsur kazanç tutarı: "tek tek alsanız şu kadar" karşılaştırması. ⚠ Bu bir indirim/eski fiyat iddiası DEĞİL — aynı malın tek tek alınma tutarı. */ .p-kar{ display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap; font-size:.76rem;font-weight:700;color:#0a6349; background:rgba(21,201,141,.13);border:1px solid rgba(21,201,141,.36); border-radius:100px;padding:4px 11px; } .p-kar s{font-weight:600;color:var(--tx-3);opacity:.85} .p-img{position:relative;background:linear-gradient(165deg,var(--cream) 0%,var(--paper-2) 100%);height:290px;display:block;overflow:hidden} .p-img img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)} .prod:hover .p-img img{transform:scale(1.05)} .p-zoom{position:absolute;bottom:12px;right:12px;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:.25s;box-shadow:0 3px 10px rgba(0,0,0,.14)} .p-zoom .ico{width:15px;height:15px;color:var(--ink)} .prod:hover .p-zoom{opacity:1} .p-body{padding:26px 24px 24px;display:flex;flex-direction:column;flex-grow:1} .p-body h3{font-family:var(--baslik);font-size:1.377rem;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:10px;letter-spacing:-.005em} .p-price{display:flex;align-items:baseline;gap:11px 10px;flex-wrap:wrap;margin-bottom:15px;padding-bottom:16px;border-bottom:1px solid var(--line-2)} .p-price .v{font-family:var(--baslik);font-size:2.08rem;font-weight:700;color:var(--gold-3);line-height:1;letter-spacing:-.01em} .p-desc{font-size:.88rem;color:var(--tx-2);margin-bottom:16px;flex-grow:1} .p-feat{display:flex;flex-direction:column;gap:9px;margin-bottom:20px} .p-feat li{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--tx-2)} .p-feat .ico{width:15px;height:15px;color:var(--wa-2);margin-top:4px} .p-qty{display:flex;align-items:center;gap:12px;margin-bottom:13px} .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--paper-2)} .qty button{width:38px;height:42px;background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.2s} .qty button:hover{background:var(--cream);color:var(--gold-3)} .qty button:disabled{opacity:.3;cursor:not-allowed} .qty .ico{width:15px;height:15px} .qty input{width:44px;height:42px;border:none;background:none;text-align:center;font-family:var(--govde);font-size:.98rem;font-weight:700;color:var(--ink);-moz-appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .p-sub{font-size:.83rem;color:var(--tx-3)} .p-sub b{color:var(--ink);font-weight:700} .p-btns{display:grid;grid-template-columns:1fr auto;gap:9px} @media(max-width:980px){.prod-g{grid-template-columns:repeat(2,1fr);gap:22px}} @media(max-width:660px){.prod-g{grid-template-columns:1fr}.p-img{height:260px}} /* ── birleşik sipariş bölümü ── */ .cekout{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);margin-top:48px} .cekout-h{background:linear-gradient(160deg,var(--ink) 0%,#0d1e21 100%);color:#fff;padding:26px 36px;position:relative;overflow:hidden} .cekout-h::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 34vw at 92% 40%,rgba(201,162,74,.16) 0%,rgba(201,162,74,0) 62%);pointer-events:none} .cekout-h h3{font-family:var(--baslik);font-size:1.377rem;font-weight:700;margin-bottom:4px;position:relative} .cekout-h p{font-size:.87rem;color:rgba(255,255,255,.62);position:relative} .cekout-g{display:grid;grid-template-columns:1.12fr .88fr;max-width:none;margin:0;background:none;border:none;border-radius:0;padding:0;box-shadow:none} .cekout-sol{padding:30px 34px} .cekout-sag{padding:30px;background:var(--cream);border-left:1px solid var(--line)} .cekout-sol h4,.cekout-sag h4{font-family:var(--baslik);font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:18px} .cekout-sol .of-g{margin-bottom:0} .cekout-tek{padding:14px 0 16px;border-bottom:1px solid var(--line);margin-bottom:16px} .cekout-tek .of-ozet-v{font-size:.95rem;font-weight:600;color:var(--ink)} /* ── sipariş bölümündeki ürün seçici ── */ .pick{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)} .pick-n{font-size:.85rem;color:var(--tx-2);margin:-12px 0 16px;line-height:1.55} .pick-l{display:flex;flex-direction:column;gap:10px} .pick-i{display:flex;align-items:center;gap:13px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--paper-2);transition:.22s var(--ease)} .pick-i.is-aktif{border-color:var(--gold-2);background:var(--cream)} .pick-i.is-secili{border-color:var(--gold);background:var(--paper);box-shadow:0 2px 10px rgba(201,162,74,.16)} .pick-g{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--cream);display:block} .pick-g img{width:100%;height:100%;object-fit:cover} .pick-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px} .pick-t b{font-family:var(--baslik);font-size:0.978rem;font-weight:700;color:var(--ink);line-height:1.25} .pick-t b a:hover{color:var(--gold-3)} .pick-t>span{font-size:.82rem;font-weight:700;color:var(--gold-3)} .pick-b{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;color:var(--yesil-3);background:rgba(75,214,164,.14);border:1px solid rgba(15,143,104,.45);border-radius:100px;padding:2px 8px;margin-left:6px;vertical-align:middle} .qty-sm{flex-shrink:0} .qty-sm button{width:32px;height:36px} .qty-sm input{width:36px;height:36px;font-size:.9rem} /* Dar ekranda esnek sarma kullanılıyordu; uzun ürün adı (5'li paket) görseli kendi satırına itip kartı diğerlerinden farklı gösteriyordu. Izgara ile yerleşim ada bağlı olmaktan çıktı: görsel + metin üstte, adet altta. */ @media(max-width:460px){ .pick-i{ display:grid;grid-template-columns:52px minmax(0,1fr); grid-template-areas:'gorsel metin' 'adet adet'; align-items:center;gap:10px 13px; } .pick-g{grid-area:gorsel} .pick-t{grid-area:metin;min-width:0} .qty-sm{grid-area:adet;justify-self:end;margin-left:0} } .cekout-alt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);text-align:center} .cekout-alt>span{display:block;font-size:.78rem;color:var(--tx-3);margin-bottom:10px} .cekout-alt-b{display:flex;gap:9px} .cekout-alt-b .btn{flex:1;padding:11px 12px} @media(max-width:900px){ .cekout-g{grid-template-columns:1fr} .cekout-sag{border-left:none;border-top:1px solid var(--line)} .cekout-sol{padding:26px 22px} .cekout-sag{padding:26px 22px} .cekout-h{padding:22px} } /* seçilen ürün listesi */ .cart-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;min-height:46px} .cart-empty{font-size:.85rem;color:var(--tx-3);font-style:italic;padding:12px 0;line-height:1.55} .cart-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:.87rem} .cart-row .n{color:var(--tx-2)} .cart-row .n i{font-style:normal;color:var(--gold-3);font-weight:700} .cart-row .p{font-weight:700;color:var(--ink);white-space:nowrap;margin-left:auto} .cart-row .rm{background:none;border:none;color:var(--tx-3);cursor:pointer;padding:2px;display:flex;transition:.2s} .cart-row .rm:hover{color:#c0392b} .cart-row .rm .ico{width:14px;height:14px} /* ücretsiz kargo çubuğu */ .ship-bar{margin-bottom:16px} .ship-txt{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--gold-3);margin-bottom:8px;font-weight:500} .ship-txt .ico{width:16px;height:16px;flex-shrink:0} .ship-txt.done{color:var(--wa-2)} .ship-track{height:6px;background:var(--line);border-radius:100px;overflow:hidden} .ship-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-3),var(--gold-2));border-radius:100px;transition:width .5s var(--ease)} .ship-fill.done{background:linear-gradient(90deg,var(--wa-2),var(--wa))} /* toplamlar */ .sum-row{display:flex;justify-content:space-between;align-items:center;font-size:.87rem;color:var(--tx-2);padding:7px 0} .sum-row b{color:var(--ink);font-weight:600} .sum-row.free b{color:var(--wa-2)} .sum-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)} .sum-tot span{font-size:.88rem;color:var(--tx-2)} .sum-tot b{font-family:var(--baslik);font-size:1.657rem;font-weight:700;color:var(--ink);line-height:1} /* ── adımlar ── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;text-align:center;position:relative;transition:.3s var(--ease)} .step:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(201,162,74,.4)} .step-n{width:52px;height:52px;margin:0 auto 18px;border-radius:16px;background:linear-gradient(140deg,var(--ink),var(--ink-3));color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-family:var(--baslik);font-size:1.278rem;font-weight:700} .step h3{font-family:var(--baslik);font-size:1.17rem;font-weight:700;color:var(--ink);margin-bottom:9px} .step p{font-size:.89rem;color:var(--tx-2)} @media(max-width:800px){.steps{grid-template-columns:1fr;gap:16px}} /* ── bilgi bloğu ── */ .info-g{display:grid;grid-template-columns:.92fr 1.08fr;gap:68px;align-items:center} .info-fr{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)} .info-fr img{width:100%;height:480px;object-fit:cover} .info-fr::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(19,36,40,.42) 0%,transparent 52%)} .info-lbl{position:absolute;bottom:22px;left:22px;z-index:2;background:var(--gold);color:#fff;padding:9px 19px;border-radius:100px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .info-tx h2{font-family:var(--baslik);font-size:clamp(1.615rem,3.06vw,2.08rem);font-weight:700;color:var(--ink);line-height:1.16;margin-bottom:20px} .info-tx p{color:var(--tx-2);margin-bottom:16px;font-size:.98rem} .use-box{margin-top:26px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px} .use-box h4{font-family:var(--baslik);font-size:1.116rem;font-weight:700;color:var(--ink);margin-bottom:16px} .use-box ul{display:grid;grid-template-columns:1fr 1fr;gap:11px 20px} .use-box li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--tx-2)} .use-box .ico{width:8px;height:8px;fill:var(--gold);stroke:none;margin-top:9px;flex-shrink:0} @media(max-width:900px){.info-g{grid-template-columns:1fr;gap:36px}.info-fr img{height:330px}.use-box ul{grid-template-columns:1fr}} /* ── makaleler ── */ .art-g{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .art{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.32s var(--ease)} .art:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:rgba(201,162,74,.4)} .art-i{height:180px;overflow:hidden;background:var(--cream)} .art-i img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)} .art:hover .art-i img{transform:scale(1.06)} .art-b{padding:22px;display:flex;flex-direction:column;flex-grow:1} .art-b h3{font-family:var(--baslik);font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.28;margin-bottom:9px} .art-b p{font-size:.85rem;color:var(--tx-2);margin-bottom:16px;flex-grow:1} .art-l{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;font-weight:600;color:var(--gold-3);transition:.2s} .art-l .ico{width:14px;height:14px;transition:.25s var(--ease)} .art:hover .art-l .ico{transform:translateX(4px)} @media(max-width:1000px){.art-g{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.art-g{grid-template-columns:1fr}} /* ── yorumlar ── */ .rev-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px} .rev{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:26px;transition:.3s var(--ease)} .rev:hover{background:rgba(255,255,255,.09);border-color:rgba(201,162,74,.32);transform:translateY(-4px)} .rev-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .rev-n{font-weight:600;color:#fff;font-size:.94rem} .rev-s{display:flex;gap:2px} .rev-s .ico{width:14px;height:14px;fill:var(--gold-2);stroke:none} .rev-t{font-size:.89rem;color:rgba(255,255,255,.74);line-height:1.72;margin-bottom:14px} .rev-d{font-size:.76rem;color:rgba(255,255,255,.38)} /* ── SSS ── */ .faq-w{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:.25s} .faq.open{border-color:rgba(201,162,74,.5);box-shadow:var(--sh)} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;cursor:pointer;transition:.25s;background:none;border:none;width:100%;text-align:left;font-family:var(--govde)} .faq-h{margin:0;font-weight:400} .faq-q>span:first-child{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.45} .faq.open .faq-q{background:var(--ink)} .faq.open .faq-q>span:first-child{color:#fff} .faq-ic{width:30px;height:30px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s var(--ease);color:var(--ink)} .faq-ic .ico{width:14px;height:14px} .faq.open .faq-ic{background:rgba(255,255,255,.16);color:#fff;transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .faq-a div{padding:20px 24px 24px;font-size:.93rem;color:var(--tx-2);border-top:1px solid var(--line-2)} .faq-a strong{color:var(--ink)} /* ── iletişim ── */ .ct-g{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .ct{text-align:center;padding:34px 24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);transition:.3s var(--ease)} .ct:hover{background:rgba(255,255,255,.08);border-color:rgba(201,162,74,.3)} .ct-ic{width:58px;height:58px;margin:0 auto 18px;border-radius:17px;background:rgba(201,162,74,.13);border:1px solid rgba(201,162,74,.28);display:flex;align-items:center;justify-content:center} .ct-ic .ico{width:24px;height:24px;color:var(--gold-2)} .ct h3{font-family:var(--baslik);font-size:1.152rem;font-weight:700;color:#fff;margin-bottom:13px} .ct a{display:block;font-size:1.02rem;font-weight:600;color:var(--gold-2);margin-bottom:5px;transition:.2s} .ct a:hover{color:#fff} .ct p{font-size:.87rem;color:rgba(255,255,255,.62);margin-top:5px} .ct p strong{color:#fff} @media(max-width:820px){.ct-g{grid-template-columns:1fr;gap:16px}} /* ── footer ── */ .ftr{background:var(--ink);color:rgba(255,255,255,.66);padding:64px 0 0} .ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;padding-bottom:44px} .ftr-lg{display:flex;align-items:center;gap:12px;margin-bottom:18px} .ftr-lg img{width:46px;height:46px;object-fit:contain} .ftr-lg span{font-family:var(--baslik);font-size:1.17rem;font-weight:700;color:#fff} .ftr-g p{font-size:.88rem;line-height:1.75} .ftr h4{font-family:var(--baslik);font-size:1.083rem;font-weight:700;color:#fff;margin-bottom:18px} .ftr li{margin-bottom:11px;font-size:.88rem} .ftr li a{transition:.2s} .ftr li a:hover{color:var(--gold-2)} .ftr-c li{display:flex;align-items:center;gap:10px} .ftr-c .ico{width:15px;height:15px;color:var(--gold-3);flex-shrink:0} .ftr-bt{border-top:1px solid rgba(255,255,255,.1);padding:26px 0 30px;text-align:center} .ftr-bt p{font-size:.8rem;color:rgba(255,255,255,.44);margin-bottom:6px} @media(max-width:820px){.ftr-g{grid-template-columns:1fr;gap:34px}} /* ── sabit butonlar / mobil bar ── */ .fab{position:fixed;right:22px;bottom:26px;z-index:800;display:flex;flex-direction:column;gap:11px} .fab a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.24);transition:.28s var(--ease)} .fab a:hover{transform:scale(1.09) translateY(-2px)} .fab .ico{width:23px;height:23px} .fab-wa{background:linear-gradient(135deg,var(--wa),var(--wa-2))} .fab-tel{background:linear-gradient(135deg,var(--gold),var(--gold-3))} .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:850;flex-direction:column;background:rgba(255,255,255,.975);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);box-shadow:0 -6px 28px rgba(19,36,40,.14)} /* sepet özeti — tıklanınca liste açılır */ .mbar-sum{display:flex;align-items:center;gap:11px;width:100%;padding:9px 14px;background:none;border:none;border-bottom:1px solid var(--line-2);cursor:pointer;text-align:left;font-family:var(--govde);color:var(--ink)} .mbar-ic{position:relative;width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--cream);border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .mbar-ic .ico{width:18px;height:18px;color:var(--gold-3)} .mbar-n{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:100px;background:linear-gradient(140deg,var(--gold) 0%,var(--gold-3) 100%);color:#fff;font-size:.66rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(163,127,47,.45),0 0 0 2px #fff} .mbar-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .mbar-ad{font-size:.85rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mbar-alt{font-size:.72rem;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} .mbar-v{font-family:var(--baslik);font-size:1.116rem;font-weight:700;color:var(--ink);line-height:1;white-space:nowrap} .mbar-ok{display:flex;color:var(--tx-3);transition:transform .3s var(--ease);transform:rotate(180deg)} .mbar-ok .ico{width:16px;height:16px} .mbar-sum[aria-expanded="true"] .mbar-ok{transform:rotate(0deg)} /* açılır sepet listesi */ .mbar-list{max-height:min(44vh,290px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--paper-2);border-bottom:1px solid var(--line-2)} .mrow{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line-2)} /* sepette olmayan ürün de listede durur — sönük görünür, artı ile eklenir */ .mrow:not(.dolu) .mrow-n{color:var(--tx-2);font-weight:500} .mrow:not(.dolu) .mrow-p{color:var(--tx-3);font-weight:600} .mrow.dolu{background:var(--paper)} .mrow-bos{width:30px;flex-shrink:0} /* çöp kutusu yokken sütun hizası kaymasın */ .mrow-n{flex:1;min-width:0;font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mrow-p{font-size:.81rem;font-weight:700;color:var(--gold-3);white-space:nowrap;min-width:58px;text-align:right} .mrow-x{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:none;border:1px solid var(--line);color:var(--tx-3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s} .mrow-x:hover,.mrow-x:active{background:#fdecea;border-color:#f0b8b2;color:#c0392b} .mrow-x .ico{width:14px;height:14px} .qty-xs{display:flex;align-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--paper)} .qty-xs button{width:28px;height:28px;background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.18s} .qty-xs button:hover{background:var(--cream);color:var(--gold-3)} .qty-xs button:disabled{opacity:.32;cursor:not-allowed} .qty-xs .ico{width:13px;height:13px} .qty-xs b{min-width:24px;text-align:center;font-size:.85rem;font-weight:700;color:var(--ink)} .mbar-bosalt{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;background:none;border:none;cursor:pointer;font-family:var(--govde);font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--tx-3);transition:.2s} .mbar-bosalt:hover,.mbar-bosalt:active{color:#c0392b} .mbar-bosalt .ico{width:14px;height:14px} /* çağrı butonları — kendi tam genişlik satırında, sepet yazısı bunları daraltmaz */ .mbar-b{display:flex;gap:9px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))} .mbar-b .btn{flex:1} @media(max-width:760px){ .fab{display:none} .mbar{display:flex} body{padding-bottom:var(--mbar-h,74px)} } /* ── çevrimiçi bildirim balonu ── */ .onl{position:fixed;left:22px;bottom:26px;z-index:820;width:min(322px,calc(100vw - 44px));display:flex;align-items:flex-start;gap:13px;padding:16px 42px 16px 17px;background:linear-gradient(158deg,#1a3035 0%,#0c1c1f 100%);border:1px solid rgba(255,255,255,.11);border-radius:18px;box-shadow:0 2px 6px rgba(0,0,0,.18),0 18px 48px rgba(12,28,31,.42);color:#fff;opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s} .onl.on{opacity:1;visibility:visible;transform:none} .onl::before{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle 15vw at 12% 0%,rgba(37,211,102,.16) 0%,rgba(37,211,102,0) 62%);pointer-events:none} .onl-dot{position:relative;width:11px;height:11px;margin-top:7px;flex-shrink:0;border-radius:50%;background:var(--wa);box-shadow:0 0 12px rgba(37,211,102,.85)} .onl-dot::before,.onl-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:onlNabiz 2.2s var(--ease) infinite} .onl-dot::after{animation-delay:1.1s} @keyframes onlNabiz{0%{transform:scale(1);opacity:.62}70%{opacity:.12}100%{transform:scale(3.6);opacity:0}} .onl-t{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0} .onl-t b{font-family:var(--baslik);font-size:1.045rem;font-weight:700;letter-spacing:.01em} .onl-t>span{font-size:.83rem;color:rgba(255,255,255,.66);line-height:1.5} .onl-no{display:inline-flex;align-items:center;gap:8px;margin-top:9px;padding:9px 15px;border-radius:11px;background:linear-gradient(135deg,var(--wa) 0%,var(--wa-2) 100%);color:#fff;font-size:1rem;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 16px rgba(37,211,102,.3);transition:.22s var(--ease);align-self:flex-start} .onl-no:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.42);color:#fff} .onl-no .ico{width:15px;height:15px} .onl-x{position:absolute;top:11px;right:11px;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;z-index:1} .onl-x:hover{background:rgba(255,255,255,.16);color:#fff} .onl-x .ico{width:14px;height:14px} @media(max-width:1040px){ .onl{left:14px;right:14px;width:auto;bottom:calc(var(--mbar-h,74px) + 14px)} } @media(prefers-reduced-motion:reduce){.onl-dot::before,.onl-dot::after{animation:none}} /* ── lightbox ── */ .lb{position:fixed;inset:0;z-index:1000;background:rgba(10,20,22,.94);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;backdrop-filter:blur(6px)} .lb.on{display:flex} .lb img{max-width:min(920px,92vw);max-height:88vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain} .lb-x{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .lb-x .ico{width:20px;height:20px} .lb-cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:.9rem;background:rgba(0,0,0,.4);padding:8px 18px;border-radius:100px} /* ── mobil menü ── */ @media(max-width:1040px){ .burger{display:flex} .hdr-tel span{display:none} /* ⛔ Mobilde başlıkta backdrop-filter KULLANMA. Bulanıklık, sabit menü panelinin içeren bloğunu viewport yerine BAŞLIK yapıyor; panel kapalıyken sağda park ettiği için sayfanın kaydırma genişliği 390 px yerine 780 px oluyordu (html'deki overflow-x:hidden bunu yalnız gizler, iOS'ta sayfa yine yana kayar). Bulanıklık olmayınca panel gerçekten viewport'a sabitlenir ve sabit öğeler sayfa taşmasına katılmaz. Başlık zaten neredeyse opak, görsel kayıp yok. */ .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)} .bf .nav{top:0} /* 100vh mobilde adres çubuğunun altına taşıyor → dvh varsa o kullanılır. overscroll-behavior: panelin sonuna gelince kaydırma arkadaki sayfaya zincirlenmesin. visibility: kapalı panel sekme sırasına girmesin. */ .nav{position:fixed;top:0;right:-100%;width:min(320px,86vw);height:100vh;height:100dvh;background:#fff;box-shadow:-14px 0 46px rgba(19,36,40,.28);border-left:1px solid var(--line);padding:88px 22px calc(30px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;transition:right .34s var(--ease),visibility .34s;z-index:950} .nav.on{right:0;visibility:visible} .nav>ul{flex-direction:column;align-items:stretch;gap:3px} .nav a{padding:13px 15px;font-size:.96rem} .drop{position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;border:none;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 15px;padding:0 0 0 6px;min-width:0} .drop a{font-size:.86rem;padding:9px 10px} .nav-x{position:absolute;top:22px;right:22px;background:none;border:1px solid var(--line);border-radius:10px;padding:9px;cursor:pointer;color:var(--ink);display:flex} .nav-x .ico{width:19px;height:19px} /* perde: menünün açık olduğunu belli eder, dokunarak kapatma alanı sağlar. touch-action:none → perde üzerindeki parmak hareketi sayfayı kaydırmaz. */ .scrim{position:fixed;inset:0;background:rgba(19,36,40,.34);z-index:890;opacity:0;visibility:hidden;touch-action:none;transition:opacity .3s var(--ease),visibility .3s} .scrim.on{opacity:1;visibility:visible} } @media(min-width:1041px){.nav-x,.scrim{display:none}} @media(max-width:520px){ .hdr-cta .btn-gold{display:none} .hdr-in{min-height:66px} .logo img{width:40px;height:40px} .logo-t{font-size:1.12rem} .sec{padding:64px 0} .container{padding:0 18px} .hero{padding:52px 0 62px} .hero-price{width:100%;gap:18px;padding:15px 18px} .hero-cta .btn{flex:1 1 46%;justify-content:center;padding-left:14px;padding-right:14px} .order{padding:26px 20px} } /* ── giriş animasyonu ── */ .fx{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .fx.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} .fx{opacity:1;transform:none} html{scroll-behavior:auto} } /* ── iç sayfa ortak ── */ .pg-hero{background:linear-gradient(160deg,var(--ink) 0%,#0c1c1f 100%);color:#fff;padding:62px 0 70px;position:relative;overflow:hidden;text-align:center} .pg-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 56% 76% at 50% 12%,rgba(201,162,74,.13) 0%,transparent 62%)} .pg-hero>.container{position:relative;z-index:1} .crumb{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:18px;flex-wrap:wrap} .crumb a{transition:.2s} .crumb a:hover{color:var(--gold-2)} .crumb .ico{width:12px;height:12px;opacity:.5} .pg-hero h1{font-family:var(--baslik);font-size:clamp(1.785rem,3.91vw,2.56rem);font-weight:700;line-height:1.12;letter-spacing:-.026em;max-width:900px;margin:0 auto} .pg-hero p{margin-top:18px;font-size:1.02rem;color:rgba(255,255,255,.7);max-width:720px;margin-left:auto;margin-right:auto} .pg-body{max-width:860px;margin:0 auto} .pg-body h2{font-family:var(--baslik);font-size:clamp(1.377rem,2.635vw,1.836rem);font-weight:700;color:var(--ink);line-height:1.22;margin:44px 0 16px} .pg-body h2:first-child{margin-top:0} .pg-body h3{font-family:var(--baslik);font-size:1.206rem;font-weight:700;color:var(--ink);margin:30px 0 12px} .pg-body p{color:var(--tx-2);margin-bottom:16px} .pg-body ul,.pg-body ol{margin:0 0 20px;padding-left:0} .pg-body ul li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--tx-2)} .pg-body ul li::before{content:'';position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--gold)} .pg-body ol{counter-reset:n;list-style:none} .pg-body ol li{position:relative;padding-left:34px;margin-bottom:12px;color:var(--tx-2);counter-increment:n} .pg-body ol li::before{content:counter(n);position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:7px;background:var(--cream);border:1px solid var(--line);color:var(--gold-3);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center} .pg-body strong{color:var(--ink);font-weight:600} .pg-body img{border-radius:var(--r);margin:22px 0;box-shadow:var(--sh)} /* Dikey çekilmiş gerçek fotoğraf: 860 px'lik gövdeyi baştan aşağı kaplamasın */ .pg-body img.foto-dik{max-width:min(100%,420px);margin-left:auto;margin-right:auto} .pg-body a:not(.btn){color:var(--gold-3);font-weight:500;border-bottom:1px solid rgba(201,162,74,.35);transition:.2s} .pg-body a:not(.btn):hover{color:var(--ink);border-color:var(--ink)} .note{background:var(--cream);border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:22px 26px;margin:26px 0} .note p:last-child{margin-bottom:0} .note b{color:var(--ink)} .tbl-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--r-sm)} .tbl-wrap table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:460px} .tbl-wrap th{background:var(--ink);color:#fff;font-weight:600;text-align:left;padding:14px 18px;font-size:.85rem} .tbl-wrap td{padding:13px 18px;border-top:1px solid var(--line-2);color:var(--tx-2)} .tbl-wrap tr:nth-child(even) td{background:var(--paper-2)} .cta-strip{background:linear-gradient(160deg,var(--ink) 0%,#0d1e21 100%);border-radius:var(--r-lg);padding:44px 46px;color:#fff;text-align:center;margin:52px 0 0;position:relative;overflow:hidden} .cta-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 38vw at 12% 45%,rgba(201,162,74,.15) 0%,rgba(201,162,74,0) 62%);pointer-events:none} .cta-strip>*{position:relative;z-index:1} .cta-strip h3{font-family:var(--baslik);font-size:1.581rem;font-weight:700;margin-bottom:10px} .cta-strip p{color:rgba(255,255,255,.66);margin-bottom:24px;font-size:.96rem} .cta-strip .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} @media(max-width:560px){.cta-strip{padding:32px 22px}.cta-strip .row .btn{flex:1}} /* ── ürün detay sayfası (PDP) ── */ .pdp{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start} .pdp-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(165deg,var(--cream) 0%,var(--paper-2) 100%);border:1px solid var(--line);cursor:zoom-in;box-shadow:var(--sh)} .pdp-img img{width:100%;height:auto;object-fit:cover;transition:.5s var(--ease)} .pdp-img:hover img{transform:scale(1.03)} .pdp-img .p-zoom{opacity:1;bottom:16px;right:16px} .pdp-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--yesil-2),var(--yesil));color:#04291d;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:100px;margin-bottom:16px} /* kampanyalı ürün: koyu zemin + altın "%N avantaj" eki, düz haptan ayrışsın */ .pdp-badge.kmp{ background:linear-gradient(135deg,#0c6d4c 0%,#15c98d 52%,#0c6d4c 100%); color:#f2fffa;font-size:.72rem;padding:8px 8px 8px 15px;letter-spacing:.14em; box-shadow:0 7px 20px rgba(8,58,42,.3); } .pdp-badge.kmp .ico{width:15px;height:15px;flex:none} .pdp-badge.kmp i{ font-style:normal;letter-spacing:.04em;font-size:.72rem; background:var(--gold-2);color:#2c1e05;border-radius:100px;padding:3px 10px; } .pdp-kar{ display:flex;align-items:flex-start;gap:9px; margin:-8px 0 20px;padding:11px 14px;font-size:.88rem;color:var(--tx-2); background:rgba(21,201,141,.09);border:1px solid rgba(21,201,141,.3);border-radius:12px; } .pdp-kar .ico{width:15px;height:15px;color:var(--yesil-3);margin-top:3px;flex:none} .pdp-kar s{color:var(--tx-3)} .pdp-kar b{color:#0a6349} .pdp-price{display:flex;align-items:baseline;gap:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)} .pdp-price .v{font-family:var(--baslik);font-size:2.32rem;font-weight:700;color:var(--ink);line-height:1} .pdp-desc{color:var(--tx-2);margin-bottom:20px} .pdp-info .p-feat{margin-bottom:20px} .pdp-stok{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.87rem;color:var(--tx-2);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 17px;margin-bottom:22px} .pdp-stok .ico{width:16px;height:16px;color:var(--wa-2)} .pdp-stok b{color:var(--wa-2)} .buy{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)} .buy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px} .buy-tot{text-align:right} .buy-tot span{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3);font-weight:600} .buy-tot b{font-family:var(--baslik);font-size:1.657rem;color:var(--ink);line-height:1.1} .buy-kargo{font-size:.82rem;color:var(--gold-3);margin-bottom:14px;display:flex;align-items:center;gap:7px} .buy-kargo.done{color:var(--wa-2)} .buy-kargo:empty{display:none} .buy .btn{margin-bottom:9px} .buy .btn:last-child{margin-bottom:0} .pdp-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2)} .pdp-trust span{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--tx-3)} .pdp-trust .ico{width:16px;height:16px;color:var(--gold-3)} @media(max-width:900px){.pdp{grid-template-columns:1fr;gap:32px}.pdp-img{max-width:460px;margin:0 auto}} /* PDP bilgi tablosu — başlık sütunu solda */ .pg-body .tbl-wrap th{width:34%;background:var(--paper-2);color:var(--ink);border-top:1px solid var(--line-2);font-weight:600} .pg-body .tbl-wrap tr:first-child th{border-top:none} .pg-body .tbl-wrap tr:nth-child(even) td{background:transparent} /* ── diğer ürünler ── */ .rel-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:820px;margin:0 auto} .rel{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:.3s var(--ease);box-shadow:var(--sh)} .rel:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(201,162,74,.45)} .rel img{width:88px;height:88px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0;background:var(--cream)} .rel-b b{display:block;font-family:var(--baslik);font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.2} .rel-b>span{display:block;font-size:.78rem;color:var(--tx-3);margin:3px 0 7px} .rel-b i{font-style:normal;font-family:var(--baslik);font-size:1.188rem;font-weight:700;color:var(--gold-3)} /* ürün kartı başlığı artık bağlantı */ .p-body h3 a{transition:.2s} .p-body h3 a:hover{color:var(--gold-3)} .p-img{text-decoration:none} /* ── açık zeminli breadcrumb şeridi ── */ .crumb-bar{background:var(--cream);border-bottom:1px solid var(--line)} .crumb-bar .crumb{justify-content:flex-start;color:var(--tx-3);margin:0;padding:14px 0;font-size:.81rem} .crumb-bar .crumb a{color:var(--tx-2)} .crumb-bar .crumb a:hover{color:var(--gold-3)} .crumb-bar .crumb span{color:var(--ink);font-weight:500} .crumb-bar .crumb .ico{color:var(--tx-3)} .pdp-info h1{font-family:var(--baslik);font-size:clamp(1.615rem,3.06vw,2rem);font-weight:700;color:var(--ink);line-height:1.14;margin-bottom:16px} /* ── footer yasal bağlantılar + sağlık uyarısı ── */ .ftr-yasal{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.1)} .ftr-yasal a{font-size:.83rem;color:rgba(255,255,255,.64);transition:.2s} .ftr-yasal a:hover{color:var(--gold-2)} .ftr-uyari{border-top:1px solid rgba(255,255,255,.1);padding:20px 0} .ftr-uyari p{font-size:.78rem;line-height:1.7;color:rgba(255,255,255,.44);max-width:840px;margin:0 auto;text-align:center} .ftr-uyari b{color:rgba(255,255,255,.7)} /* ── sipariş formu ── */ .oform{max-width:760px;margin:0 auto} .of-tuzak{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .of-g{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-bottom:22px} .of-f{display:flex;flex-direction:column;gap:7px} .of-tam{grid-column:1/-1} .of-f>span{font-size:.83rem;font-weight:600;color:var(--ink);letter-spacing:.01em} .of-f>span i{font-style:normal;color:#c0392b} .of-f input,.of-f textarea{width:100%;font-family:var(--govde);font-size:.94rem;color:var(--tx);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:.2s var(--ease);resize:vertical} .of-f input:focus,.of-f textarea:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,162,74,.14)} .of-f.err input,.of-f.err textarea{border-color:#c0392b;background:#fdf6f5} .of-hata{display:none;font-style:normal;font-size:.78rem;color:#c0392b} .of-f.err .of-hata,.of-kvkk.err .of-hata{display:block} .of-ozet{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 19px;margin-bottom:20px} .of-ozet>span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);font-weight:600} .of-ozet-v{font-size:.94rem;color:var(--ink);font-weight:600;text-align:right} .of-kvkk{display:flex;align-items:flex-start;gap:11px;margin-bottom:20px;cursor:pointer;position:relative;flex-wrap:wrap} .of-kvkk input{width:19px;height:19px;margin-top:2px;accent-color:var(--gold-3);flex-shrink:0;cursor:pointer} .of-kvkk>span{font-size:.84rem;color:var(--tx-2);line-height:1.6;flex:1;min-width:200px} .of-kvkk a{color:var(--gold-3);border-bottom:1px solid rgba(201,162,74,.4)} .of-kvkk .of-hata{width:100%;margin-left:30px} .of-durum{margin-top:14px;font-size:.88rem;text-align:center;display:none} .of-durum.on{display:block} .of-durum.ok{color:var(--wa-2);font-weight:600} .of-durum.no{color:#c0392b} .of-alt{margin-top:18px;text-align:center;font-size:.85rem;color:var(--tx-3)} .of-alt a{color:var(--gold-3);font-weight:600} .of-gonder[disabled]{opacity:.6;cursor:not-allowed} @media(max-width:640px){.of-g{grid-template-columns:1fr}} /* ── makale sayfası: ürün şeridi ── */ .mini-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:820px;margin:0 auto} .mini{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px;transition:.3s var(--ease);box-shadow:var(--sh);min-width:0} .mini:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(201,162,74,.45)} .mini img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex-shrink:0;background:var(--cream)} .mini>span{display:flex;flex-direction:column;gap:3px;min-width:0} .mini b{font-family:var(--baslik);font-size:0.969rem;font-weight:700;color:var(--ink);line-height:1.2} .mini i{font-style:normal;font-family:var(--baslik);font-size:1.08rem;font-weight:700;color:var(--gold-3)} .art-g .art{text-decoration:none} .pg-hero .crumb{margin-bottom:18px} .pg-ozet{font-size:1.04rem;color:var(--tx-2);margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)} /* ── makale içi adım listesi ── */ .adim{display:flex;gap:18px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:0 0 14px} .adim-n{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:linear-gradient(140deg,var(--ink),var(--ink-3));color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-family:var(--baslik);font-size:1.083rem;font-weight:700} .adim-i{min-width:0} .adim-i h4{font-family:var(--baslik);font-size:1.083rem;font-weight:700;color:var(--ink);margin-bottom:8px} .adim-i p:last-child{margin-bottom:0} .pg-body .faq-w{max-width:none;margin:24px 0} @media(max-width:560px){.adim{padding:18px 16px;gap:13px}} /* ══════════════════════════════════════════════ MOBİL TAŞMA KORUMASI ══════════════════════════════════════════════ */ /* 1) Yatay taşmayı kökte de kes — yalnız body'de olması iOS'ta yetmiyor */ html{overflow-x:hidden;max-width:100%} body{max-width:100%} /* 1b) Menü veya galeri açıkken sayfa arkada kaymasın. ÖNEMLİ: kök elemanda overflow-x:hidden olduğu için tarayıcı taşma değerini KÖKTEN alır; body'ye overflow:hidden yazmak hiçbir işe yaramaz — kilit bu yüzden html'e kurulur. Gövde SABİTLENMİYOR (position:fixed): sabitlenirse yapışkan başlık referansını kaybeder. iOS için JS ayrıca panel dışındaki touchmove'u iptal ediyor (site.js → dokunmaEngeli). */ html.kilit{overflow:hidden;overscroll-behavior:none} /* 2) Uzun kelime/URL satır kırsın */ body{overflow-wrap:break-word;word-break:normal} /* anywhere uzun URL'ler için; tabloda sütunu daraltıp "Sipariş"i "Sipari/iş" diye ortadan bölüyordu — hücre içindeki bağlantılar normal kelime kuralına döner. */ .pg-body a:not(.btn),.ftr-c a,.ct a{overflow-wrap:anywhere} .tbl-wrap a{overflow-wrap:break-word;white-space:nowrap} /* 3) Esnek/ızgara çocukları daralabilsin (min-width:auto varsayılanı taşırır) */ .hdr-in>*,.hero-in>*,.info-g>*,.cekout-g>*,.pdp>*,.trust-g>*,.of-g>*, .p-body,.art-b,.rel-b,.tr-tx,.hc-tx,.cart-row .n,.sum-row,.sum-tot, .steps>*,.ct,.ftr-g>*,.mbar>*,.mbar-b>*{min-width:0} /* 4) Buton metinleri dar ekranda kırılabilsin */ @media(max-width:560px){ .btn{white-space:normal;text-align:center} .btn-lg{padding:15px 20px;font-size:.94rem} .cekout-alt-b{flex-direction:column} .cekout-alt-b .btn{width:100%} } /* 5) Tüm tablolar kaydırılabilir kutuda kalsın; kaçak varsa da taşmasın */ .pg-body table{max-width:100%} .tbl-wrap{max-width:100%} @media(max-width:560px){ .tbl-wrap th,.tbl-wrap td{padding:10px 12px} .pg-body .tbl-wrap th{width:auto} /* 5 sütunlu fiyat tablosu 390 px'e sığmıyordu: yatay kaydırma yerine her satır kendi kartına dönüşür, hücre başlıkları td[data-l]'den basılır. display:block SADECE bu sorgunun içinde; masaüstünde normal tablo kalır. */ .tbl-wrap{overflow-x:visible;border:none;border-radius:0} .tbl-wrap table{min-width:0;display:block;font-size:.88rem} .tbl-wrap thead{display:none} .tbl-wrap tbody{display:block} .tbl-wrap tr{display:block;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--paper);margin-bottom:10px;overflow:hidden} .tbl-wrap tr:nth-child(even) td{background:transparent} .tbl-wrap td{display:flex;align-items:center;justify-content:space-between;gap:16px; border-top:1px solid var(--line-2);padding:9px 14px;text-align:right} .tbl-wrap tr>td:first-child{border-top:none;background:var(--cream); font-family:var(--baslik);font-weight:700;color:var(--ink);justify-content:flex-start} .tbl-wrap td::before{content:attr(data-l);font-weight:600;color:var(--tx-3); font-size:.78rem;letter-spacing:.02em;text-align:left;flex:0 0 auto} .tbl-wrap tr>td:first-child::before{content:none} /* iki sütunlu teknik tablolarda satır başlığı th'dir, data-l yok */ .tbl-wrap tbody th{display:block;padding:9px 14px 0;text-align:left;background:none; color:var(--tx-3);font-size:.78rem} .tbl-wrap tbody th+td{border-top:none;justify-content:flex-start;text-align:left} } /* 6) Görseller hiçbir yerde kutusunu aşmasın */ img,svg,video,iframe{max-width:100%;height:auto} .logo img,.ftr-lg img,.ico,.fab .ico{height:auto} .ico{height:1em} /* 7) Hero rozetleri dar ekranda kapsayıcı içine çekilsin */ @media(max-width:600px){ .hero-chip{padding:10px 13px} .hero-chip .ico{width:16px;height:16px} .chip-a{top:12px;left:8px} .chip-b{bottom:12px;right:8px} } @media(max-width:380px){ .hero-chip{display:none} } /* 8) Başlık çubuğu 360px'te sığsın */ @media(max-width:400px){ .hdr-in{gap:10px} .logo{gap:9px} .logo-t{font-size:1rem} .logo-s{font-size:.6rem;letter-spacing:.12em} .hdr-tel{padding:8px} } /* 9) Sipariş özeti satırları uzun ürün adında bozulmasın */ .cart-row{flex-wrap:wrap} .cart-row .n{flex:1 1 auto} .sum-tot b{font-size:clamp(1.5rem,7vw,1.95rem)} .pdp-price .v{font-size:clamp(2.1rem,9vw,2.9rem)} .hp-v{font-size:clamp(1.3rem,6vw,1.62rem)} /* 10) Mobil alt çubuk dar ekranda taşmasın */ @media(max-width:400px){ .mbar-sum{padding:8px 11px;gap:9px} .mbar-v{font-size:1.1rem} .mbar-b{padding:9px 11px calc(9px + env(safe-area-inset-bottom));gap:7px} .mbar-b .btn{padding:11px 10px;font-size:.84rem} .mrow{padding:8px 11px;gap:7px} } /* 11) Bal küpü alanı düzeni hiç etkilemesin */ .of-tuzak{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden} /* ══════════════════════════════════════════════ ÜCRETSİZ KARGO ROZETİ + NOT ══════════════════════════════════════════════ */ /* kampanya kendi kartında: ne aldığın, normal fiyatı ve kazancın açıkça yazar */ .hp-kmp{ position:relative;isolation:isolate; /*