@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Manrope:wght@400;500;600;700;800&display=swap'); /* Paket L asama 2 (30 Eyl): olcu eslemeli yedek yazi tipleri — tek kaynak yedek_font.py (kayma olmasin; gorunum ayni) */ @font-face{font-family:'Cormorant Yedek T';src:local('Times New Roman'),local('TimesNewRomanPSMT');size-adjust:97.95%;ascent-override:94.33%;descent-override:29.3%;line-gap-override:0%} @font-face{font-family:'Cormorant Yedek D';src:local('DejaVu Serif Bold'),local('DejaVuSerif-Bold');font-weight:500 900;size-adjust:69.34%;ascent-override:133.26%;descent-override:41.39%;line-gap-override:0%} @font-face{font-family:'Manrope Yedek A';src:local('Arial'),local('ArialMT');size-adjust:105.82%;ascent-override:100.74%;descent-override:28.35%;line-gap-override:0%} @font-face{font-family:'Manrope Yedek D';src:local('DejaVu Sans'),local('DejaVuSans');size-adjust:92.13%;ascent-override:115.71%;descent-override:32.56%;line-gap-override:0%} :root{--serif:'Cormorant Garamond','Cormorant Yedek T','Cormorant Yedek D',Georgia,'Times New Roman',serif;--sans:'Manrope','Manrope Yedek A','Manrope Yedek D',system-ui,sans-serif; --paper:#f5f1e8;--card:#fffdf8;--ink:#211d18;--ink2:#6c635a;--line:#e2dbcc;--gold:#b99b62;--dark:#16130e; --accent:#7a6a45;--wa:#128c4b;--wa2:#0f7a41} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* Paket H: hareket azaltma */ body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} img{display:block;max-width:100%} .top{position:sticky;top:0;z-index:50;background:var(--dark);color:#efe9db;display:flex;align-items:center;gap:18px;padding:12px clamp(16px,4vw,44px)} .brand{text-decoration:none;line-height:1.15} .brand b{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.18em;display:block;white-space:nowrap} .brand span{font-size:9px;letter-spacing:.22em;color:#bdb29b;font-weight:700} .brand-by{display:flex;direction:ltr;align-items:center;gap:6px;margin-top:5px} .brand-by i{font-style:normal;line-height:1} .brand-by img{display:block;height:20px;width:auto} .top nav{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .top nav a{text-decoration:none;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#d9d1bf} .top nav a:hover,.top nav a.on{color:#fff} .wab{background:#25D366;color:#08331c!important;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px} .thbtn{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(245,241,232,.35);color:#efe9db;background:rgba(245,241,232,.08);cursor:pointer;transition:.2s} .thbtn:hover{background:rgba(245,241,232,.2)} .crumb{max-width:1200px;margin:0 auto;padding:16px clamp(16px,4vw,44px) 0;font-size:12px;color:var(--ink2);display:flex;gap:6px;flex-wrap:wrap;align-items:center} .crumb a{color:var(--ink2);text-decoration:none;font-weight:700} .crumb a:hover{color:var(--accent)} .crumb .sep{opacity:.5} .crumb .cur{color:var(--ink);font-weight:700} /* ---------- full site footer (matches template.html) ---------- */ footer{background:var(--dark);color:#cfc7b8;margin-top:58px} .fin{max-width:1200px;margin:0 auto;padding:52px clamp(16px,4vw,44px) 24px;display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr;gap:34px} .fin .fb b{font-family:var(--serif);font-size:21px;letter-spacing:.13em;color:#f0e8d6;font-weight:600;display:block} .fin .fb span{font-size:9px;letter-spacing:.34em;color:var(--gold);font-weight:800;display:block;margin-top:3px} /* height:auto olmazsa ozniteligi kutuyu belirler ve logo ezilir. */ .fin .fb img{width:158px;height:auto;opacity:.9;margin-top:15px} .fin p{font-size:13px;line-height:1.65;margin-top:13px;max-width:330px;color:#a99f8c} .fin h4{font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:#8f8674;margin-bottom:11px} .fin a{display:block;color:#cfc7b8;text-decoration:none;font-size:13.5px;padding:4px 0;font-weight:600} .fin a:hover{color:#f0e8d6} .fin a i{font-style:normal;font-size:11px;font-weight:700;opacity:.55;margin-inline-start:6px} .copy{border-top:1px solid rgba(245,241,232,.12);padding:18px clamp(16px,4vw,44px) 26px;text-align:center;font-size:12px;color:#8f8674} .copy .lgl{display:inline-flex;gap:16px;margin-top:8px;flex-wrap:wrap;justify-content:center} .copy .lgl a{color:#8f8674;text-decoration:none;font-weight:600} .copy .lgl a:hover{color:#cfc7b8} .copy .lang-foot{max-width:760px;margin-left:auto;margin-right:auto;color:#a99f8c} @media(max-width:900px){.fin{grid-template-columns:1fr 1fr;gap:26px}.fin .fb{grid-column:1/-1}} @media(max-width:520px){.fin{grid-template-columns:1fr;gap:22px}} html[data-theme="dark"]{--paper:#16130e;--card:#221e16;--ink:#ece5d3;--ink2:#a89d88;--line:#3a3427;--gold:#dcc79a} html[data-theme="dark"] footer{background:#100e0a} /* RTL */ [dir=rtl] .top nav{margin-left:0;margin-right:auto} /* cookie banner */ .cookiebar{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:120;background:#221d15;color:#e8e1d0; border-radius:14px;padding:14px 18px;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px;box-shadow:0 12px 40px rgba(0,0,0,.35)} .cookiebar.show{display:flex} .cookiebar .ck-text{flex:1;min-width:220px} .cookiebar .ck-text a{color:#dcc79a} .ck-accept{border:none;border-radius:999px;padding:9px 18px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;background:#dcc79a;color:#221e17} .ck-essential{border:1px solid rgba(220,199,154,.45);border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;background:transparent;color:#dcc79a} /* first-visit welcome card: trust line + browser-language suggestion (shown once) */ .wlc{position:fixed;inset:0;z-index:118;display:none;align-items:center;justify-content:center;padding:20px; background:rgba(15,12,9,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s} .wlc.in{opacity:1} .wlc-card{position:relative;max-width:508px;width:100%;background:#1b1712;color:#f2ecdd;border:1px solid rgba(185,155,98,.42); border-radius:22px;padding:36px 38px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden; transform:translateY(16px);transition:transform .38s cubic-bezier(.2,.7,.3,1)} .wlc-card::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(340px 200px at 50% -8%,rgba(185,155,98,.22),transparent 70%)} .wlc.in .wlc-card{transform:none} .wlc-card>*{position:relative} .wlc-card img{height:40px;margin:0 auto 14px;display:block} .wlc-k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#b99b62;margin-bottom:10px} [dir=rtl] .wlc-k{letter-spacing:.06em} .wlc-card b{display:block;font-family:var(--serif);font-weight:700;font-size:25px;line-height:1.22;color:#eadfc6} .wlc-card p{margin-top:9px;font-size:13.5px;line-height:1.6;color:#c9bfa8} .wlc-stats{display:flex;justify-content:center;margin-top:16px;border-top:1px solid rgba(245,241,232,.13);border-bottom:1px solid rgba(245,241,232,.13);padding:12px 0} .wlc-stats div{padding:0 18px;border-right:1px solid rgba(245,241,232,.11)} .wlc-stats div:last-child{border-right:none} [dir=rtl] .wlc-stats div{border-right:none;border-left:1px solid rgba(245,241,232,.11)} [dir=rtl] .wlc-stats div:last-child{border-left:none} .wlc-stats b{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:20px;color:#dcc79a} .wlc-stats span{display:block;margin-top:2px;font-size:8.5px;font-weight:800;letter-spacing:.16em;color:#b3a892} [dir=rtl] .wlc-stats span{letter-spacing:.03em} .wlc-flags{display:flex;justify-content:center;gap:11px;margin-top:14px} .wlc-flags svg{width:21px;height:14.3px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(245,241,232,.16);display:block} .wlc-q{display:block;margin-top:16px;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#b99b62} [dir=rtl] .wlc-q{letter-spacing:.05em} .wlc-go{display:block;margin-top:9px;background:linear-gradient(120deg,#caa96b,#e6cf96 55%,#caa96b);color:#241d12; font-weight:800;font-size:15px;padding:13px 20px;border-radius:999px;text-decoration:none} .wlc-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px} .wlc-langs a,.wlc-langs em{font-style:normal;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;text-decoration:none; border:1px solid rgba(245,241,232,.22);color:#d9d0bc} .wlc-langs em{background:rgba(185,155,98,.2);border-color:rgba(185,155,98,.55);color:#ead9ab} .wlc-cta{display:block;margin-top:14px;font-weight:800;font-size:13.5px;padding:12px 20px;border-radius:999px;text-decoration:none; background:linear-gradient(120deg,#caa96b,#e6cf96 55%,#caa96b);color:#241d12} .wlc-cta.ghost{background:none;border:1px solid rgba(245,241,232,.35);color:#f2ecdd} .wlc-x{position:absolute;top:10px;right:12px;background:none;border:none;color:#8b8171;font-size:16px;cursor:pointer;padding:8px;line-height:1;z-index:1} [dir=rtl] .wlc-x{right:auto;left:12px} @media(max-width:480px){.wlc-card{padding:28px 20px 22px}.wlc-stats div{padding:0 12px}} @media(prefers-reduced-motion:reduce){.wlc,.wlc-card{transition:none}} /* ---- dil secici: basliktaki ACILIR MENU (24 Eyl D2 — eski 6 adli ikinci satirin yerine; tek kaynak page_chrome) ---- */ .hlang{position:relative;flex:none;display:inline-block} .hlang>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px 0 11px; border-radius:999px;border:1px solid var(--line2,#DDD3C6);background:var(--card,#fff);color:var(--ink,#26221E); font-weight:800;font-size:12.5px;letter-spacing:.02em;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap} .hlang>summary::-webkit-details-marker{display:none} .hlang>summary::marker{content:''} .hlang>summary svg{width:15px;height:15px;flex:none} .hlang>summary .hl-c{width:10px;height:10px;opacity:.6;transition:transform .2s} .hlang[open]>summary .hl-c{transform:rotate(180deg)} .hlang>summary:hover{background:var(--cream,#F4EEE6)} .hlang>summary:focus-visible{outline:2px solid var(--accent,#A94E33);outline-offset:2px} .hlang .hlang-m{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:176px;background:var(--card,#fff); border:1px solid var(--line,#E8E0D5);border-radius:14px;box-shadow:0 18px 44px rgba(38,34,30,.16);padding:6px;z-index:95; display:flex;flex-direction:column;gap:2px} .hlang .hlang-m a{display:block;padding:9px 12px;border-radius:9px;color:var(--ink,#26221E);text-decoration:none; font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;opacity:1} .hlang .hlang-m a:hover,.hlang .hlang-m a:focus-visible{background:var(--cream,#F4EEE6);outline:none} .hlang .hlang-m a.on{background:var(--accent-soft,#F6E4DC);color:var(--accent-h,#933F27);font-weight:800} @media(max-width:900px){ .hlang>summary{width:40px;height:40px;padding:0;justify-content:center} .hlang>summary b,.hlang>summary .hl-c{display:none} } /* ---- altbilgi dil satiri (duz baglantilar, her sayfada) ---- */ .lang-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px; width:100%;margin-top:20px;padding-top:16px;font-size:12px;border-top:1px solid var(--line,#E8E0D5)} .lang-foot .lf-globe{font-size:13px;opacity:.6;margin-inline-end:8px} .lang-foot a{color:var(--ink2,#5E564F);text-decoration:none;font-weight:600; padding:5px 11px;border-radius:100px;white-space:nowrap;transition:.15s} .lang-foot a:hover{color:var(--ink,#26221E);background:var(--cream,#F4EEE6)} .lang-foot a.on{color:var(--accent-h,#933F27);font-weight:800;background:var(--accent-soft,#F6E4DC)} /* kategori karti + hizli ekleme penceresi: urun_karti.CSS (Paket I-2b, katalogla tek kaynak; eski .qab/.qaov burada idi) */ /* ---------- kategori seridi: kategori_seridi.CSS (Paket I-2c — katalogla TEK kaynak; eski tam blok gorunumu kalkti) ---------- */ /* kategori_seridi (Paket I-2c) — tek serit + tek yapisma kurali (katalog ve kategori sayfasi) */ .catbar{position:relative;--cbg:var(--bg,#efe9db);background:var(--cbg);border-bottom:1px solid var(--line);z-index:40} html[data-theme="dark"] .catbar{--cbg:#1d1811} /* yapisma: ust kenar DSKS.yapis tan (--ks-top: gorunen sabit baslik yuksekligi ya da 0); JS gelmeden yedek degerler */ .catbar.stick{position:sticky;top:var(--ks-top,var(--hh,58px));transition:top .35s} @media(prefers-reduced-motion:reduce){.catbar.stick{transition:none}} .cb-scroll{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;max-width:1200px;margin:0 auto;padding:10px clamp(16px,4vw,44px);scroll-behavior:smooth} .cb-scroll::-webkit-scrollbar{display:none} /* auto margins: satir sigarsa ortada, tasarsa normal kaydirma (LTR ve RTL) */ .cb-scroll>a:first-child{margin-inline-start:auto} .cb-scroll>a:last-child{margin-inline-end:auto} .cb-scroll>a{flex:none;display:inline-flex;align-items:center;padding:7px 13px;border-radius:100px; border:1px solid var(--line2,#d9cfb8);background:var(--card,transparent); font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ink2,#6d6350); text-decoration:none;white-space:nowrap;transition:.16s} [dir=rtl] .cb-scroll>a{letter-spacing:0;font-size:12px} .cb-scroll>a:hover{border-color:var(--ink,#211d18);color:var(--ink,#211d18)} .cb-scroll>a.on,.cb-scroll>a.hub.on{background:var(--ink,#211d18);border-color:var(--ink,#211d18);color:#fff;box-shadow:none} .cb-scroll>a .ki{width:19px;height:19px;margin-inline-end:6px;stroke-width:2.3;vertical-align:0;flex:none} /* kontrast (AA): sayac rakamlari soluk (opacity) degil, --ink3 */ .cb-scroll>a i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:0;margin-inline-start:5px;opacity:1;color:var(--ink3,#6B625A)} .cb-scroll>a.on i,.cb-scroll>a.hub.on i{color:inherit;opacity:.8} /* Sonbahar-Kis ogesi: vurgulu cerceve; secili degilken de goze carpar (cizimi var, eski nokta yok) */ .cb-scroll>a.hub{border-color:var(--accent,#b99b62);color:var(--accent-h,#5b4520);background:var(--accent-soft,rgba(201,173,122,.14))} .cb-scroll>a.hub i{color:var(--accent-h,#5b4520)} html[data-theme="dark"] .cb-scroll>a.hub{border-color:var(--gold);color:var(--gold);background:rgba(201,173,122,.1)} html[data-theme="dark"] .cb-scroll>a{border-color:#3a3427;color:#a89d88} html[data-theme="dark"] .cb-scroll>a:hover{border-color:var(--gold);color:var(--gold)} html[data-theme="dark"] .cb-scroll>a.on{background:var(--gold);border-color:var(--gold);color:#191611} /* masaustu oklari + kenar solmalari (DSKS.bagla has-s / has-e) */ .cb-ar{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%; border:1px solid var(--line2,var(--line));background:var(--card);color:var(--ink);font-size:16px;line-height:1; cursor:pointer;display:none;place-items:center;z-index:3;box-shadow:0 2px 9px rgba(20,17,12,.16);font-family:var(--sans)} .cb-ar:hover{background:var(--paper,var(--card))} .cb-s{inset-inline-start:5px} .cb-e{inset-inline-end:5px} .cb-s::before{content:"\2039"} .cb-e::before{content:"\203A"} [dir=rtl] .cb-s::before{content:"\203A"} [dir=rtl] .cb-e::before{content:"\2039"} @media(min-width:861px){.catbar.has-s .cb-s,.catbar.has-e .cb-e{display:grid}} .catbar::before,.catbar::after{content:"";position:absolute;top:0;bottom:1px;width:44px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:2} .catbar::before{inset-inline-start:0;background:linear-gradient(to right,var(--cbg) 25%,transparent)} .catbar::after{inset-inline-end:0;background:linear-gradient(to left,var(--cbg) 25%,transparent)} [dir=rtl] .catbar::before{background:linear-gradient(to left,var(--cbg) 25%,transparent)} [dir=rtl] .catbar::after{background:linear-gradient(to right,var(--cbg) 25%,transparent)} .catbar.has-s::before{opacity:1} .catbar.has-e::after{opacity:1} @media(max-width:700px){ /* telefonda baslik kayar (statik) ya da gizlenir (katalog): ustte kalan oge seridin kendisi */ .catbar.stick{top:var(--ks-top,0px)} .cb-scroll{padding-top:8px;padding-bottom:8px} } /* ---------- giris uyelik penceresi: uye_penceresi.CSS (Paket I-3 — katalogla TEK kaynak) ---------- */ /* uye_penceresi (Paket I-3) — giris uyelik penceresi (katalog ve statik sayfalar, tek kaynak) */ .uyp{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(38,34,30,.46);opacity:0;transition:opacity .28s ease;overflow-y:auto;overscroll-behavior:contain; -webkit-tap-highlight-color:transparent; font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;letter-spacing:normal; text-transform:none;-webkit-font-smoothing:antialiased} .uyp[hidden]{display:none} .uyp.in{opacity:1} /* kapanis gecisinde (ve acilistan once) tiklama alttaki sayfaya gider — olu katman yok (bagimsiz denetim L) */ .uyp:not(.in){pointer-events:none} /* yazi tipi ve satir yuksekligi ACIK (.uyp kokunde): iki yuzeyin govde ayarlari farkli (--sans yedekleri, 1.55/1.6) */ .uyp-kart{position:relative;width:100%;max-width:440px;margin:auto;background:var(--card,#fff);color:var(--ink,#26221e); border:1px solid var(--line,#e8e0d5);border-radius:20px;padding:30px 28px 16px;text-align:center;outline:none; box-shadow:0 30px 80px rgba(38,34,30,.28);transform:translateY(16px) scale(.98);transition:transform .34s cubic-bezier(.2,.8,.2,1)} .uyp.in .uyp-kart{transform:none} .uyp-kart::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(380px 190px at 50% -12%,var(--accent-soft,#f6e4dc),transparent 72%)} .uyp-kart>*{position:relative} .uyp-kart>.uyp-x{position:absolute;top:10px;inset-inline-end:10px;width:40px;height:40px;border:0;border-radius:50%; background:none;color:var(--ink3,#6b625a);display:grid;place-items:center;cursor:pointer;padding:0;z-index:1;font:inherit} .uyp-x:hover{background:rgba(38,34,30,.06);color:var(--ink,#26221e)} .uyp-x svg{width:18px;height:18px} .uyp-rozet{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center; background:var(--card,#fff);color:var(--accent,#a94e33);box-shadow:0 0 0 1px var(--accent-soft,#f6e4dc),0 6px 18px rgba(169,78,51,.18)} .uyp-rozet svg{width:24px;height:24px} /* urun gorselleri: sayfadaki kartlardan 3 fotograf, ortadaki one cikar; fiyat etiketi kilitli (fiyat yalniz uyeye) */ .uyp-mozaik{display:flex;justify-content:center;align-items:flex-end;margin:0 auto 14px;height:122px} .uyp-m{position:relative;flex:none;width:80px;height:106px;border-radius:12px;overflow:hidden;background:var(--cream,#f4eee6); border:3px solid var(--card,#fff);box-shadow:0 8px 22px rgba(38,34,30,.18)} .uyp-m:nth-child(1){transform:rotate(-7deg) translate(12px,4px)} .uyp-m:nth-child(2){width:90px;height:120px;z-index:1} .uyp-m:nth-child(3){transform:rotate(7deg) translate(-12px,4px)} /* sagdan sola: yan fotograflar aynaya — ortadakinin altina egilir (bosluk kalmaz) */ [dir=rtl] .uyp-m:nth-child(1){transform:rotate(7deg) translate(-12px,4px)} [dir=rtl] .uyp-m:nth-child(3){transform:rotate(-7deg) translate(12px,4px)} .uyp-m img{width:100%;height:100%;object-fit:cover;display:block} .uyp-m i{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px; padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.93);color:var(--ink,#26221e);font-style:normal; font-size:10px;font-weight:800;letter-spacing:.14em;line-height:1.5;white-space:nowrap} .uyp-m i svg{width:10px;height:10px;flex:none} .uyp-k{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--goldink,#7a5c2b); margin-bottom:8px;line-height:1.5} [dir=rtl] .uyp-k{letter-spacing:.04em} .uyp-b{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.18;margin:0;padding:0;color:var(--ink,#26221e); letter-spacing:0;text-transform:none} .uyp-p{margin:10px auto 0;max-width:36ch;font-size:14px;line-height:1.55;color:var(--ink2,#5e564f)} .uyp-f{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;text-align:start} .uyp-f li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line,#e8e0d5);border-radius:14px; background:var(--paper,#fbf8f3);margin:0} .uyp-f .ik{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:var(--accent-soft,#f6e4dc);color:var(--accent-h,#933f27)} .uyp-f .ik svg{width:18px;height:18px} .uyp-f b{display:block;font-size:13.5px;font-weight:800;color:var(--ink,#26221e);line-height:1.3;margin-bottom:1px} .uyp-f small{display:block;font-size:12.5px;line-height:1.45;color:var(--ink2,#5e564f)} .uyp-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;min-height:50px;padding:12px 22px; border-radius:999px;background:var(--accent,#a94e33);color:#fff;font-weight:800;font-size:15px;text-decoration:none; box-shadow:0 10px 24px rgba(169,78,51,.28);transition:background .15s,transform .15s} .uyp-cta:hover{background:var(--accent-h,#933f27);color:#fff} .uyp-cta:active{transform:translateY(1px)} .uyp-cta.git{opacity:.82;cursor:progress} /* tiklandi: olay yola cikarken gecis bekleniyor */ .uyp-cta svg{width:18px;height:18px;flex:none} [dir=rtl] .uyp-cta svg{transform:scaleX(-1)} .uyp-gir{margin:12px 0 0;font-size:13.5px;color:var(--ink2,#5e564f)} .uyp-gir a{color:var(--accent-h,#933f27);font-weight:800;text-decoration:underline;text-underline-offset:3px; display:inline-block;padding:11px 4px;margin:-11px 0} /* dokunma alani >= 40 px, satir yuksekligi ayni */ .uyp-alt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:10px; border-top:1px solid var(--line,#e8e0d5)} .uyp-wa{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink,#26221e); text-decoration:none;padding:8px 2px;min-height:40px} .uyp-wa svg{width:18px;height:18px;flex:none;color:var(--wa,#0e7a40)} .uyp-wa:hover{color:var(--accent-h,#933f27)} .uyp-gec{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--ink3,#6b625a);cursor:pointer; padding:8px 2px;min-height:40px} .uyp-gec:hover{color:var(--ink,#26221e);text-decoration:underline} .uyp a:focus-visible,.uyp button:focus-visible{outline:2px solid var(--accent,#a94e33);outline-offset:2px} .uyp-cta:focus-visible{outline-offset:3px} @media(max-width:640px){ .uyp{align-items:flex-end;padding:0} .uyp-kart{max-width:none;margin:0;border-radius:22px 22px 0 0;border-bottom:0; padding:26px 18px calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(105%); max-height:calc(100% - 36px);overflow-y:auto;overscroll-behavior:contain} .uyp-kart::after{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px; background:var(--line2,#ddd3c6)} .uyp-kart>.uyp-x{top:12px} .uyp-rozet{width:44px;height:44px;margin-bottom:10px} .uyp-k{display:none} /* telefonda ust satir kalkar: baslik zaten "toptan" der, sayfa kisalir */ .uyp-mozaik{height:100px;margin-bottom:10px} .uyp-m{width:66px;height:88px} .uyp-m:nth-child(2){width:74px;height:98px} .uyp-rozet svg{width:21px;height:21px} .uyp-b{font-size:23px} .uyp-p{font-size:13.5px} .uyp-f{margin-top:14px;gap:8px} .uyp-f li{padding:9px 11px} .uyp-cta{margin-top:16px} } /* kisa ekran (kucuk telefon, yatay telefon, kucuk dizustu): gorseller ve fayda aciklamalari gizlenir — dugme ilk bakista gorunur; cok kisa ekranda (yatay telefon) fayda satirlari da */ @media(max-height:700px){.uyp-mozaik{display:none}.uyp-f small{display:none}.uyp-f li{align-items:center}} @media(max-height:560px){.uyp-f,.uyp-rozet{display:none}.uyp{padding:10px}.uyp-kart{padding:18px 22px 8px} .uyp-p{margin-top:6px}.uyp-cta{margin-top:12px}.uyp-alt{margin-top:10px;padding-top:4px}} @media(prefers-reduced-motion:reduce){.uyp,.uyp-kart{transition:none}} @media(max-width:700px){ /* the full header is 180-220px tall once the nav and the language row wrap: keeping it pinned would swallow a quarter of a phone screen, so on small viewports the category bar is the element that stays with the visitor instead. */ .top{position:relative;z-index:70;padding:10px 14px;row-gap:8px} .top .brand b{font-size:16px;letter-spacing:.12em} .top .brand span{font-size:8px;letter-spacing:.18em} .top .brand-by{gap:4px;margin-top:4px} .top .brand-by img{height:14px} .top nav{gap:7px 10px} /* hide the text links on phones — the category bar, breadcrumb and footer carry the same navigation, and the stacked links cost ~200px of screen */ .top nav>a:not(.wab){display:none} .top nav .lang-row a{display:inline-flex} .wab{padding:8px 14px;font-size:11.5px;margin-inline-start:auto} .top .lang-row{flex:0 0 100%;margin-inline-start:0} .top .lr-inner{flex-wrap:wrap;justify-content:center;row-gap:2px} } /* ---------- shared "never a dead end" blocks ---------- */ .sec{margin-top:46px} .sec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:15px} .sec-h h2{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.2} .sec-h .sl{margin-inline-start:auto;font-size:12.5px;font-weight:800;color:var(--accent);text-decoration:none;white-space:nowrap} .sec-h .sl:hover{text-decoration:underline;text-underline-offset:3px} .catlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px} .catlist a{display:flex;align-items:center;gap:8px;justify-content:space-between;text-decoration:none;color:inherit; background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:700;transition:.16s} .catlist a:hover{border-color:var(--ink);transform:translateY(-2px)} .catlist a i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--ink2)} .catlist a .ki{width:24px;height:24px;stroke-width:2;color:var(--accent-h)} .catlist a span{flex:1 1 auto;min-width:0} .backpair{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)} .backpair a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;background:var(--card);border:1px solid var(--line); border-radius:100px;padding:10px 18px;font-size:13px;font-weight:800;color:var(--ink);transition:.16s} .backpair a:hover{border-color:var(--ink);background:var(--paper)} .backpair a::before{content:"\2190";opacity:.55} [dir=rtl] .backpair a::before{content:"\2192"} .backpair a.top::before{content:"\2191"} /* ---------- beden tablosu modali (urun detay) ---------- */ .szc-open{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 16px;border:1px solid var(--line); border-radius:100px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700; cursor:pointer;transition:border-color .15s,background .15s;text-transform:none;letter-spacing:.01em} .szc-open:hover{border-color:var(--ink);background:var(--paper)} .szc-open svg{width:16px;height:16px;flex:none;color:var(--gold)} .szcov{position:fixed;inset:0;background:rgba(20,17,12,.55);z-index:120;display:flex;align-items:center;justify-content:center;padding:16px} .szcm{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;max-width:580px;width:100%; max-height:88vh;overflow:auto;padding:20px 20px 16px;box-shadow:0 24px 70px rgba(0,0,0,.35)} .szcm h3{font-family:var(--serif);font-size:21px;margin:0 0 4px;font-weight:600} .szcm .szsub{font-size:12px;color:var(--ink2);margin-bottom:12px} .szcm .szwrap{overflow-x:auto} .szcm table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px} /* 10 sutun (cm+inch) */ .szcm th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-align:center;padding:7px 6px;border-bottom:2px solid var(--ink);white-space:nowrap} .szcm td{text-align:center;padding:7px 6px;border-bottom:1px solid var(--line)} .szcm td:first-child{font-weight:800} .szcm tr.on td{background:rgba(201,173,122,.16);font-weight:700} .szcm tr.on td:first-child{color:var(--gold)} .szcm .sznote{font-size:11.5px;color:var(--ink2);line-height:1.55;margin-top:12px} .szcm .szx{margin-top:14px;width:100%;padding:10px;border:1px solid var(--line);background:none;color:inherit;border-radius:10px;font:inherit;font-weight:700;cursor:pointer} .szcm .szx:hover{border-color:var(--ink)} /* telefon menusu + masaustu acilir menu stilleri: BASLIK_CSS (24 Eyl D2 — ikincil sayfalar da kullanir) */ /* ---- genel sayfa seritleri (footer oncesi "cikmaz sokak yok" blogu) ---- */ .gen-strips{max-width:1200px;margin:34px auto 26px;padding:0 clamp(16px,4vw,44px)} .wrap{max-width:1200px;margin:0 auto;padding:18px clamp(16px,4vw,44px) 60px} /* ---------- product page ---------- */ .pgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:start} @media(max-width:860px){.pgrid{grid-template-columns:1fr;gap:18px}} @media(min-width:861px){.gal{position:sticky;top:calc(var(--hh,58px) + 14px)}} .gal-main{aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#ece5d5,#e0d6c0)} .gal-main img{width:100%;height:100%;object-fit:cover} .pcat{font-size:10.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)} .pname{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.12;margin-top:5px} /* big shareable style code + one-tap copy chips (the page's raison d'être: sharing codes/links) */ .codebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px} .bigcode{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.05em;color:var(--ink); background:var(--card);border:1px dashed var(--gold);border-radius:10px;padding:3px 12px 4px} .chipbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;font-weight:800;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:100px;padding:7px 13px;cursor:pointer;transition:.15s} .chipbtn:hover{border-color:var(--ink)} .chipbtn.ok{border-color:var(--wa);color:var(--wa)} .chipbtn svg{width:13px;height:13px;flex:none} .pcolour{font-size:13.5px;font-weight:700;color:var(--ink2);margin-top:10px} .pprice{font-family:var(--serif);font-size:29px;font-weight:700;margin-top:6px} .pprice small{font-size:12.5px;font-family:var(--sans);color:var(--ink2);font-weight:600;margin-inline-start:8px} .plab{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin:16px 0 8px} .pszrow{display:flex;gap:7px;flex-wrap:wrap} .pfav svg{width:14px;height:14px;margin-right:6px;vertical-align:-2px} .pfav.on{color:#e0607a;border-color:#e0607a} .pfav.on svg{fill:currentColor} .ob-lock{border:1px solid var(--line);border-radius:14px;padding:20px 18px;text-align:center;background:var(--card)} .ob-lock h2{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 7px} .ob-lock p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0 0 15px} .ob-lock .ob-add{display:inline-block;text-decoration:none} .pricelock a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:15px;font-weight:600} .cplock span{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:600} .psz{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:700;background:var(--card)} .psz i{font-style:normal;font-size:10px;font-weight:800;color:var(--ink2);margin-inline-start:5px;opacity:.85;unicode-bidi:isolate} /* colourway gallery */ .cwrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px} /* renk kartinda bekleyen secim rozeti (henuz siparise eklenmemis adet) */ .cw{position:relative} .cw .cwq{position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;padding:0 5px; display:grid;place-items:center;border-radius:99px;background:var(--dark);color:var(--gold); font-style:normal;font-size:10.5px;font-weight:800;line-height:1;box-shadow:0 1px 5px rgba(20,17,12,.35)} html[data-theme="dark"] .cw .cwq{background:var(--gold);color:#241e12} /* diger renklerde bekleyen secim satiri */ .ob-oth{font-size:11.5px;font-weight:700;color:var(--accent);background:rgba(122,106,69,.09); border:1px solid rgba(122,106,69,.28);border-radius:9px;padding:7px 11px;margin-top:10px} /* "eklemeden cikiyorsunuz" / kaydedilmemis degisiklik penceresi — Paket L: tek kaynak kayit_korumasi.CSS */ /* KAYIT KORUMASI penceresi (Paket L — tek kaynak kayit_korumasi.py; urun sayfasi "eklemeden cikiyorsunuz" ile ayni) */ .wexov{position:fixed;inset:0;z-index:200;background:rgba(20,17,12,.5);display:grid;place-items:center;padding:18px} .wexm{background:var(--card,var(--panel,#fffdf8));color:var(--ink,#1d1a14);border-radius:16px;padding:22px 22px 18px;max-width:380px;width:100%; box-shadow:0 24px 70px rgba(20,17,12,.4);text-align:center} .wexm h3{font-family:var(--serif,Georgia,serif);font-size:21px;font-weight:600;margin-bottom:8px} .wexm p{font-size:13px;color:var(--ink2,#6b6255);line-height:1.6;margin-bottom:16px} .wexm button{display:block;width:100%;font:inherit;font-size:13.5px;font-weight:800;border-radius:11px;min-height:46px; padding:12px;cursor:pointer;border:1px solid var(--line,#d8cfbd);background:var(--paper,transparent);color:var(--ink,#1d1a14);margin-top:8px} .wexm .wex-add{background:var(--dark,#1d1a14);color:#FBF8F3;border-color:var(--dark,#1d1a14);margin-top:0} /* 30 Eyl: krem yazi — Hesabim sayfasinda --gold #8a6d3f (koyu zeminde 3,4:1, AA alti); krem 14,9:1, .showmore ile ayni dil */ .wexm .wex-add:hover{filter:brightness(1.12)} .wexm .wex-add[disabled]{opacity:.6;cursor:progress} .wexm .wex-go:hover,.wexm .wex-stay:hover{border-color:var(--ink,#1d1a14)} .wexm .wex-stay{border:0;background:none;color:var(--ink2,#6b6255);font-size:12.5px;padding:8px} .wexm button:focus-visible{outline:2px solid var(--gold,#c69a55);outline-offset:2px} .cw{border:1px solid var(--line);background:var(--card);border-radius:11px;padding:0 0 7px;cursor:pointer; text-align:center;font:inherit;color:inherit;overflow:hidden;transition:.16s;display:block;width:100%} .cw:hover{border-color:var(--ink);transform:translateY(-2px)} .cw.on{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)} /* height:auto SART. uzerindeki width/height ozniteligi tarayiciya "yukseklik 900px" diye sunum ipucu verir; iki olcu de kesinlesince aspect-ratio YOK SAYILIR ve kutu 900px boyunda kalir (object-fit:cover da gorseli ince bir serit gibi kirpar). height:auto ipucunu ezip oran kuralini geri getirir. */ .cw img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#e6dfd0} .cw>span{display:block;width:16px;height:16px;border-radius:50%;margin:6px auto 3px;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)} .cw>b{display:block;font-size:10.5px;font-weight:700;line-height:1.25;padding:0 4px;color:var(--ink2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cw.on>b{color:var(--ink)} /* stogu biten renk: soluk + capraz cizgi + etiket (musteri tiklamadan gorur) */ .cw.soldout{opacity:.46} .cw.soldout img{filter:grayscale(.55)} .cw.soldout::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top right,transparent calc(50% - .6px),var(--line) 50%,transparent calc(50% + .6px))} .cw.soldout:hover{transform:none;border-color:var(--line)} .cw.soldout.on{opacity:.72;border-color:var(--ink)} /* beden satirinda "stokta yok" uyarisi */ .psz-out{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px; padding:7px 12px;font-size:12.5px;font-weight:800;color:var(--ink2);background:#f4efe4} .psz-out i{font-style:normal;font-weight:600;font-size:11.5px;opacity:.9} /* actions */ .pactions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .btn-wa{flex:1;min-width:190px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--wa); color:#fff;font-weight:800;font-size:14.5px;padding:15px;border-radius:12px;text-decoration:none;transition:.2s} .btn-wa:hover{background:var(--wa2)} .btn-wa svg{width:18px;height:18px} .btn-share{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--card); border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:13.5px;padding:15px 18px;border-radius:12px;cursor:pointer;position:relative} .btn-share:hover{border-color:var(--ink)} .btn-share svg{width:16px;height:16px} .copied{position:absolute;left:50%;top:-38px;transform:translateX(-50%);background:var(--dark);color:#efe9db;font-size:11.5px; font-weight:700;padding:7px 12px;border-radius:100px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s} .copied.show{opacity:1;top:-44px} /* spec block */ .specbox{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:2px 16px 12px} .pdesc-body{margin:8px 0 4px;font-size:14px;line-height:1.65;color:var(--ink)} .specbox h2{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin:12px 0 2px} .spec div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px} .spec div:last-of-type{border-bottom:0} .spec dt{color:var(--ink2);font-weight:700} .spec dd{font-weight:800;text-align:end} .spec dd a{color:var(--accent);text-decoration:none} .spec dd a:hover{text-decoration:underline;text-underline-offset:3px} .spnote{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:10px;line-height:1.5} /* order in 3 steps — slim horizontal band below the fold */ .stepband .steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(max-width:860px){.stepband .steps{grid-template-columns:1fr;gap:8px}} .steps li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px} .steps .n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--ink);color:var(--paper); display:grid;place-items:center;font-size:11.5px;font-weight:800} .steps strong{display:block;font-size:13.5px;font-weight:800;line-height:1.35} .steps span span{font-size:12.5px;color:var(--ink2);line-height:1.5;display:block;font-weight:500} /* trust points */ .trust{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .trust li{font-size:11.5px;font-weight:700;color:var(--ink2);background:var(--card);border:1px solid var(--line); border-radius:100px;padding:6px 12px;display:flex;align-items:center;gap:6px} .trust li::before{content:"\2713";color:var(--wa);font-weight:900} /* phones: the order widget is the primary CTA in the page flow; the floating cart bar is the fixed bottom element, so WhatsApp + Share stay a slim inline pair */ @media(max-width:700px){ body[data-t=p] .btn-wa{min-width:0;padding:13px 10px;font-size:13.5px} } /* ---------- ADD TO ORDER widget (series / koli logic) ---------- */ .obox{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:13px 14px} .obox:empty{display:none} .ob-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px} .ob-h h2{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)} .ob-stk{font-size:11.5px;font-weight:700;color:var(--ink2)} .stp{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:var(--card)} .stp button{width:30px;height:30px;border:0;background:none;color:var(--ink);font-size:17px;font-weight:800; cursor:pointer;line-height:1;display:grid;place-items:center;font-family:var(--sans);padding:0;transition:.15s} .stp button:disabled{opacity:.3;cursor:default} .stp b{min-width:26px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums} .ob-series{background:var(--dark);color:#efe9db;border-radius:12px;padding:12px 14px 11px} .ob-sr{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap} .ob-lab{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#bdb29b} .ob-per{margin-inline-start:auto;font-size:11.5px;font-weight:700;color:#dcc79a;white-space:nowrap} .ob-series .stp{border-color:rgba(240,232,214,.3);background:rgba(255,255,255,.06)} .ob-series .stp button{color:#efe9db} .ob-series .stp button.plus{color:#dcc79a} .ob-series .stp b{color:#fff;font-size:16px;min-width:30px} .ob-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px} .ob-chips span{font-size:10.5px;font-weight:700;color:#d9d1bf;background:rgba(255,255,255,.07); border:1px solid rgba(240,232,214,.18);border-radius:7px;padding:3px 8px;white-space:nowrap} .ob-chips span i{font-style:normal;color:#bdb29b;margin-inline-start:4px;unicode-bidi:isolate} .ob-dist{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden} .ob-dist summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 13px; font-size:11.5px;font-weight:800;color:var(--ink)} .ob-dist summary::-webkit-details-marker{display:none} .ob-dist summary i{font-style:normal;color:var(--ink2);font-weight:700} .ob-dist summary::after{content:"\203A";margin-inline-start:auto;transform:rotate(90deg);transition:.2s; font-size:16px;color:var(--ink2);line-height:1} .ob-dist[open] summary::after{transform:rotate(-90deg)} .ob-rows{padding:1px 13px 9px} .ob-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px dashed var(--line)} .ob-row:first-child{border-top:0} .ob-row>b{font-size:13px;min-width:36px} .ob-row .ob-st{font-size:11px;font-weight:700;color:var(--ink2)} .ob-row .stp{margin-inline-start:auto} .ob-row.dis>b,.ob-row.dis .ob-st{opacity:.45} .ob-foot{display:flex;align-items:center;gap:8px 14px;margin-top:12px;flex-wrap:wrap} .ob-tot{font-size:13.5px;font-weight:800;line-height:1.3} .ob-tot small{display:block;font-size:11px;color:var(--ink2);font-weight:700} .ob-sub{font-family:var(--serif);font-size:20px;font-weight:700} .ob-add{margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink); color:var(--paper);font:inherit;font-weight:800;font-size:14px;padding:13px 22px;border-radius:12px;border:0;cursor:pointer;transition:.2s} .ob-add:hover{background:var(--accent)} .ob-add:disabled{opacity:.45;cursor:default} @media(max-width:390px){.ob-add{flex:1 1 100%}} /* ---------- swipeable main-image gallery ---------- */ .gal-main{position:relative;touch-action:pan-y} .gal-track{display:flex;height:100%;transition:transform .28s ease} .gal-track.drag{transition:none} .gal-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover} .gal-ar{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0; background:rgba(22,19,14,.55);color:#f0e8d6;cursor:pointer;display:none;place-items:center;z-index:2; font-size:20px;line-height:1;font-family:var(--sans);opacity:0;transition:.18s} .gal-prev{inset-inline-start:10px} .gal-next{inset-inline-end:10px} .gal-prev::before{content:"\2039"} .gal-next::before{content:"\203A"} [dir=rtl] .gal-prev::before{content:"\203A"} [dir=rtl] .gal-next::before{content:"\2039"} @media(hover:hover){.gal-ar{display:grid}.gal-main:hover .gal-ar{opacity:1} .gal-ar:hover{background:rgba(22,19,14,.8)}} .gal-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2} .gal-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer; padding:0;box-shadow:0 0 3px rgba(0,0,0,.4);transition:.15s} .gal-dots button.on{background:#fff;transform:scale(1.25)} /* ---------- floating cart bar (shared cart, all generated pages) ---------- */ .cartbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:110;display:none;justify-content:center;pointer-events:none} .cartbar.show{display:flex} .cb-in{pointer-events:auto;display:flex;align-items:center;gap:4px;background:var(--dark);color:#efe9db; border-radius:100px;padding:7px 8px;box-shadow:0 12px 34px rgba(0,0,0,.35);max-width:560px;width:100%; border:1px solid rgba(240,232,214,.16)} .cb-go{flex:1;display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:#efe9db; font-size:13px;font-weight:800;padding:6px 6px 6px 12px;border-radius:100px;transition:.15s} [dir=rtl] .cb-go{padding:6px 12px 6px 6px} .cb-go:hover{background:rgba(240,232,214,.1)} .cb-go .cb-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cb-go .cb-n i{font-style:normal;color:#dcc79a} .cb-go .cb-v{margin-inline-start:auto;white-space:nowrap;color:#dcc79a} .cb-min{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(240,232,214,.1);color:#d9d1bf; cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;font-family:var(--sans);transition:.15s} .cb-min:hover{background:rgba(240,232,214,.22)} .cartfab{position:fixed;inset-inline-end:14px;bottom:14px;z-index:110;display:none;min-width:48px;height:48px; border-radius:100px;border:1px solid rgba(240,232,214,.2);background:var(--dark);color:#dcc79a;cursor:pointer; font:inherit;font-size:12.5px;font-weight:800;padding:0 13px;box-shadow:0 10px 26px rgba(0,0,0,.35); align-items:center;gap:6px;transition:.15s} .cartfab.show{display:inline-flex} .cartfab:hover{border-color:#dcc79a} .cartfab svg{width:17px;height:17px} body.hascb{padding-bottom:74px} body.hascb .cookiebar{bottom:84px} body.hascbf .cookiebar{inset-inline-end:80px} /* ---------- B8: kategori fiyat bandi satiri (semadaki AggregateOffer ile ayni sayilar) ---------- */ .catband{margin:10px auto 0;max-width:640px;display:flex;flex-direction:column;gap:3px;align-items:center} .catband b{font-size:13.5px;font-weight:800;color:var(--ink)} .catband span{font-size:11.5px;color:var(--ink2);line-height:1.5} @media(max-width:640px){.catband b{font-size:12.5px}} /* ---------- C11: "nasil siparis verilir" seridi (urun sayfasi, kayit oncesi de gorunur) ---------- 11 Eyl 2026 (sahip): serit siparis kutusunun USTUNDEYDI ve varyant/beden secerken araya giriyordu. Iki degisiklik: (1) secim alaninin ALTINA alindi (beden satirindan sonra), (2) KAPALI acilir kutuya donustu — kapaliyken ~40px yer kaplar. METIN DOM'DA DURUYOR:
icerigi HTML kaynaginda oldugu icin Google gorur (8 Eyl dersi bozulmaz). SPA ikizi (template.html) DEGISMEDI: orada serit yalniz ziyaretciye, kilitli kutunun ustunde cikiyor ve siparis akisini kesmiyor. */ .phow{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:18px 0 0;background:var(--card)} .phow h2{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:0 0 9px} .phow-d>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:22px} .phow-d>summary::-webkit-details-marker{display:none} .phow-d>summary::marker{content:""} .phow-d>summary h2{margin:0;flex:1 1 auto} .phow-d>summary:after{content:"";flex:none;width:7px;height:7px;margin-top:-3px; border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2); transform:rotate(45deg);transition:transform .18s ease} .phow-d[open]>summary:after{transform:rotate(-135deg);margin-top:2px} .phow-d[open]>summary{margin-bottom:10px} .phow-d>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} .phow ul{list-style:none;margin:0;padding:0;display:grid;gap:7px} .phow li{position:relative;padding-inline-start:17px;font-size:12.8px;line-height:1.55;color:var(--ink)} .phow li:before{content:"";position:absolute;inset-inline-start:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold)} .phow li b{font-weight:800} .phow-faq{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:var(--accent,#A94E33);text-decoration:none} .phow-faq:hover{text-decoration:underline} /* ---------- yan tuslar: geri + yukari (sahip 8 Eyl) ---------- */ /* z-index cerez bandinin (120) USTUNDE: bant tam genislikte alt seridi kapliyor ve ilk ziyarette iki tus da tiklanamiyordu (8 Eyl). Konum JS ile de yukari itilir (initSideNav -> yer()); asagidaki kurallar JS calismazsa devreye giren yedektir. */ /* Paket L (29 Eyl, sahip: "buyusun, biraz yukari alinsin, rengi de degisebilir"): 42/38 -> 52/48 px (dokunma alani >= 48), 14/10 -> 28/22 px yukari + alt guvenli alan (iPhone ev cubugu), acik kart yerine paletin koyu dolgusu + altin halka (koyu: #26221E, zemin #FBF8F3 uzerinde kontrast 15:1). SPA ikizi template.html (ayni boyut/renk; konum yuzeye gore). */ /* Paket L asama 2 (30 Eyl, sahip karari): iki yuzeyde AYNI taraf — SAGDA (mantiksal son; SPA ikizi template.html). Telefonda sayfa sonuna (kategori listesi #s-cats + sayilari, .backpair, altbilgi) yaklasinca gizlenir (.sn-alt, initSideNav). */ .sidenav{position:fixed;inset-inline-end:16px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:125;display:flex;flex-direction:column;gap:10px; transition:opacity .2s,visibility .2s,transform .2s} body.hascb .sidenav,body.hascbf .sidenav{bottom:calc(86px + env(safe-area-inset-bottom,0px))} .sn-b{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(185,155,98,.62);background:var(--dark,#26221E);color:#FBF8F3; cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px rgba(38,34,30,.30);transition:background .15s,border-color .15s,opacity .2s,transform .2s;padding:0} .sn-b:hover{background:var(--accent,#A94E33);border-color:var(--accent,#A94E33);color:#fff} .sn-b:focus-visible{outline:3px solid var(--gold,#B99B62);outline-offset:3px} .sn-b svg{width:22px;height:22px} [dir=rtl] .sidenav .sn-b[data-a=back] svg{transform:scaleX(-1)} .sn-top{opacity:0;visibility:hidden;transform:translateY(6px)} .sn-top.on{opacity:1;visibility:visible;transform:none} @media(max-width:860px){.sidenav{inset-inline-end:12px;bottom:calc(22px + env(safe-area-inset-bottom,0px))} .sidenav.sn-alt{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)} body.hascb .sidenav,body.hascbf .sidenav{bottom:calc(80px + env(safe-area-inset-bottom,0px))} .sn-b{width:48px;height:48px}.sn-b svg{width:20px;height:20px}} @media print{.sidenav{display:none}} /* beden tablosu inch sutunlari: birim etiketi kucuk, inch sutunlari soluk */ .szcm th i{font-style:normal;opacity:.6;font-size:9.5px} .szcm td.szin{color:var(--ink2)} /* ---------- toast ---------- */ .dsmtoast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(14px);background:var(--dark); color:#efe9db;font-size:13px;font-weight:700;padding:11px 20px;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0;pointer-events:none;transition:.25s;z-index:130;max-width:calc(100vw - 40px);text-align:center} .dsmtoast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- related strips ---------- */ .rrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .rcard{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.2s} .rcard:hover{box-shadow:0 8px 22px rgba(20,17,12,.14);transform:translateY(-3px)} .rcard img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#e6dfd0} .rcard .rb{padding:9px 10px 11px} .rcard b{display:block;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rcard span{display:block;font-size:11px;color:var(--ink2);font-weight:700;margin-top:2px} @media(max-width:700px){ .scrollrow{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:6px;margin-inline:calc(clamp(16px,4vw,44px)*-1);padding-inline:clamp(16px,4vw,44px)} .scrollrow::-webkit-scrollbar{display:none} .scrollrow>.rcard{flex:0 0 45%;scroll-snap-align:start} } /* ---------- category page ---------- */ /* 24 Eyl (D2): ferah — koyu kategori bandi acik kremaya dondu */ .chead{background:var(--cream);color:var(--ink);padding:24px clamp(16px,4vw,44px) 22px;border-bottom:1px solid var(--line)} .chead .chin{max-width:1200px;margin:0 auto;display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap} .chead h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.08} /* Paket G: basligin YANINDA kategori/koleksiyon cizimi (kategori_ikon; aria-hidden).

'in ICINE konmaz: basligi okuyan araclar (llms.txt, testler, arama motoru) duz metin bekler — 24 Eyl ilk denemede llms.txt 0 kategori cikardi. Cizim + baslik tek grup (.chd): baslik iki satira kirilsa da cizim yalniz basina bir satirda kalmaz; grubun taban cizgisi basligin taban cizgisidir (sayi yazisi basligin hizasinda kalir). */ .chead .chd{display:flex;align-items:baseline;gap:10px;min-width:0;flex:0 1 auto} .chead .chd h1{min-width:0} .chead .kih{width:clamp(30px,3.4vw,40px);height:clamp(30px,3.4vw,40px);align-self:center;flex:none; stroke-width:1.5;color:var(--accent-h)} @media(max-width:820px){.chead .chd{gap:8px}} .chead .cnt{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--goldink);white-space:nowrap} .chead p{color:var(--ink2);flex:1 1 100%;margin-top:2px;font-size:13.5px;max-width:760px;line-height:1.55} /* Paket G (24 Eyl, sahip: "yazi ile bogulunuyor ... tiklayinca acilan tiklayinca kapanan"): tanitim, fiyat bandi ve ilgili koleksiyonlar KATLANIR kutuda — ilk ekranda baslik + sayi + (varsa) "bu kategoride" cipleri, sonra urunler */ .chead .cabout{flex:0 0 auto;margin-left:auto;position:relative;min-width:0} [dir=rtl] .chead .cabout{margin-left:0;margin-right:auto} .chead .cabout>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12px; font-weight:800;letter-spacing:.04em;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:6px 12px; background:var(--card);user-select:none;white-space:nowrap} .chead .cabout>summary::-webkit-details-marker{display:none} .chead .cabout>summary::after{content:'';width:7px;height:7px;border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s} .chead .cabout[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)} .chead .cabout>summary:hover,.chead .cabout>summary:focus-visible{color:var(--ink);border-color:var(--ink3);outline:none} /* MASAUSTU: kutu dugmenin altinda ACILIR PANEL — dugme yerinden oynamaz, sayfa kaymaz (bagimsiz denetim: eskiden dugme yeni satira ~90 px asagi sicriyordu). Disari tiklama / Esc kapatir (pages.js initCabout). */ .chead .cabout-in{display:flex;flex-direction:column;gap:6px} @media(min-width:821px){ .chead .cabout-in{position:absolute;top:calc(100% + 8px);right:0;z-index:45;width:min(760px,calc(100vw - 48px)); background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 54px rgba(38,34,30,.16); padding:14px 18px 16px} [dir=rtl] .chead .cabout-in{right:auto;left:0} .chead .cabout-in p{max-width:none} } /* TELEFON/TABLET: kutu asagi dogru acilir (tam genislik), dugme SAGDA kalir. min-width:0 — icerideki kayan cip satiri kutuyu sayfadan genis yapmasin (bagimsiz denetim: 390 px'te sayfa 1237 px'e cikiyordu). */ @media(max-width:820.98px){ /* 820,98: tarayici yakinlastirmasinda kesirli genislik (820,5) iki kurala da dusmesin */ .chead .cabout[open]{flex:1 1 100%;max-width:100%} .chead .cabout[open]>summary{display:flex;width:max-content;margin-inline-start:auto;margin-bottom:8px} } .chead .cabout-in .catband{align-items:flex-start;margin:4px 0 0;max-width:none} .chead .cabout-in .relcols{margin-top:6px} /* 23 Eyl 2026: fiyat/minimum satiri (.catband) koyu bantin ICINDE; --ink acik temada koyu oldugundan yazi zeminle ayni renkteydi (kontrast 1,11:1 — gorunmuyordu). Bant rengine baglandi. */ .chead .catband b{color:var(--ink)}.chead .catband span{color:var(--ink2)} @media(max-width:820px){.chead{padding:16px clamp(14px,4vw,44px) 15px} .chead .chin{gap:5px 12px}.chead p{font-size:12.5px;line-height:1.5} .relcols{margin-top:7px}} /* Paket I-2a (25 Eyl): arac cubugu + filtre paneli katalogla AYNI — gorunum arac_cubugu.CSS (tek kaynak, asagida). Katman: cerez seridinin (120) ve yan tuslarin (125) ustunde, bildirim (130), hizli ekleme (140) ve cekmecenin (170) altinda. */ :root{--fpz:126} .wrap>.toolbar{margin-top:14px} /* ===== Paket I-2a (25 Eyl): TEK ARAC CUBUGU + TEK FILTRE PANELI — kaynak arac_cubugu.py (katalog + kategori) ===== */ .toolbar{background:var(--bg);padding:12px 0 10px;border-bottom:1px solid var(--line)} /* :where() ozgulluk 0 — tek sinifli dugme kurallarini (.filtbtn .fpill .fpk .fchip ...) EZMEZ (bagimsiz denetim MEDIUM-3) */ :where(.toolbar,.filtpanel) button{font-family:inherit;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent} /* panel acikken yan tuslar (geri/yukari) panelin ustune binmesin — katalogda ayni katmandaydi (denetim LOW) */ body.fp-on .sidenav{visibility:hidden} .trow{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .toolbar .search{flex:1 1 240px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line2); border-radius:100px;padding:10px 18px;min-width:200px;margin:0;cursor:text} .toolbar .search:focus-within{border-color:var(--ink)} .toolbar .search svg{width:16px;height:16px;color:var(--ink2);flex:none} .toolbar .search input{border:none;outline:none;background:none;width:100%;min-width:0;font:inherit;font-size:14px;color:var(--ink);padding:0} .toolbar .search input::placeholder,.fsearch input::placeholder{color:var(--ink2);opacity:.85} .filtbtn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line2);border-radius:100px; padding:10px 18px;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;flex:none} .filtbtn:hover{border-color:var(--ink)} .filtbtn svg{width:16px;height:16px;color:var(--ink2);flex:none} .filtbtn .fnum{background:var(--dark);color:#efe9db;border-radius:100px;min-width:18px;height:18px;display:inline-flex; align-items:center;justify-content:center;font-size:11px;font-weight:800;padding:0 5px} .filtbtn .fnum[hidden]{display:none} .gdens{display:inline-flex;align-items:center;gap:6px} .gdens>span{font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:.04em} .gdens button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);background:var(--card); border-radius:8px;color:var(--ink2);transition:.16s} .gdens button:hover{border-color:var(--ink);color:var(--ink)} .gdens button.on{background:var(--dark);border-color:var(--dark);color:var(--gold)} .gdens svg{width:15px;height:15px;display:block} .pkview-btn{font-size:12px;font-weight:800;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:100px; padding:7px 13px;transition:.15s;white-space:nowrap} .pkview-btn.on{background:var(--dark);color:var(--gold);border-color:var(--dark)} .pkview-btn[hidden]{display:none} .fchips{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow-x:auto;padding:10px 1px 2px;scrollbar-width:none; -webkit-overflow-scrolling:touch} .fchips::-webkit-scrollbar{display:none} .fchips[hidden]{display:none} .fchip{display:inline-flex;align-items:center;gap:7px;flex:none;background:var(--card);border:1px solid var(--ink);border-radius:100px; padding:6px 10px 6px 13px;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap} .fchip i{font-style:normal;font-size:15px;line-height:1;color:var(--ink2)} .fchip:hover i{color:var(--accent)} .fchip-clr{flex:none;background:none;border:0;padding:6px;font-size:12px;font-weight:800;color:var(--accent);text-decoration:underline; white-space:nowrap} body.fp-on{overflow:hidden} .filtscrim{position:fixed;inset:0;z-index:var(--fpz,98);background:rgba(20,17,12,.55);-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.25s} .filtscrim.open{opacity:1;pointer-events:auto} .filtpanel{position:fixed;z-index:calc(var(--fpz,98) + 1);left:50%;top:50%;width:min(880px,94vw);max-height:min(88vh,780px); background:var(--bg);color:var(--ink);border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.4);display:flex;flex-direction:column; overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-47%) scale(.97);text-align:start; transition:opacity .22s,transform .26s cubic-bezier(.2,.7,.3,1),visibility .26s} .filtpanel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%); transition:opacity .22s,transform .26s cubic-bezier(.2,.7,.3,1),visibility 0s} .fphead{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex:none} .fphead h3{font-family:var(--serif);font-size:23px;font-weight:600;flex:1;margin:0;color:var(--ink);outline:none} .fphead button{background:none;border:0;padding:6px;color:var(--ink2);display:grid;place-items:center;border-radius:50%} .fphead button:hover{color:var(--ink);background:var(--cream)} .fpbody{padding:18px 24px 16px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:22px;overscroll-behavior:contain} .fplabel{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px;text-align:center} .fplabel label{cursor:inherit} .fsearch{display:flex;align-items:center;gap:11px;background:var(--card);border:1.5px solid var(--line);border-radius:14px; padding:13px 16px;transition:border-color .2s;margin:0;cursor:text} .fsearch:focus-within{border-color:var(--accent)} .fsearch svg{width:17px;height:17px;color:var(--ink2);flex:none} .fsearch input{border:none;outline:none;background:none;width:100%;min-width:0;font:inherit;font-size:14.5px;color:var(--ink);padding:0} .fpcats,.fsizes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .fpk{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:11px; padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--ink2);text-decoration:none;white-space:nowrap;transition:.18s} .fpk:hover{color:var(--ink);border-color:var(--ink)} .fpk.on{background:var(--ink);border-color:var(--ink);color:#fff} .fpk small{font-size:10.5px;font-weight:800;opacity:.72} .fpk .ki{width:16px;height:16px;flex:none} .fpill{flex:none;background:var(--cream);border:1px solid transparent;border-radius:11px;padding:8px 15px;min-width:46px; font-size:12px;font-weight:700;color:var(--ink2);transition:.18s} .fpill:hover{color:var(--ink);border-color:var(--ink)} .fpill.on{background:var(--dark);border-color:var(--dark);color:#fff} .fpfams{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 4px} .swn{display:flex;flex-direction:column;align-items:center;gap:6px;width:80px;background:none;border:0;padding:4px 2px;color:var(--ink2); border-radius:10px} .swn i{display:block;width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line2);transition:.18s} .swn i.multi{background:conic-gradient(#b3222c,#c9962e,#2e5c3f,#2d5aa6,#6a4a8c,#b3222c)} .swn span{font-size:11px;font-weight:600;line-height:1.25;text-align:center} .swn:hover i{transform:scale(1.1)} .swn.on i{box-shadow:0 0 0 2px var(--ink)} .swn.on span{color:var(--ink);font-weight:800} .fpduo{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cursw{display:flex;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:3px;gap:2px} .cursw button{flex:1;background:none;border:0;border-radius:100px;padding:8px 13px;font-size:12.5px;font-weight:800;color:var(--ink2);transition:.15s} .cursw button.on{background:var(--dark);color:#efe9db} .fpsel{width:100%;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:10px 16px;font:inherit;font-size:13.5px; font-weight:600;color:var(--ink);outline:none;cursor:pointer} .fpfoot{padding:14px 24px 18px;border-top:1px solid var(--line);display:flex;gap:10px;flex:none;background:var(--card)} .fpb-line{flex:0 0 auto;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);border-radius:12px;padding:12px 20px; font-size:14px;font-weight:800} .fpb-dark{flex:1;background:var(--dark);border:1.5px solid var(--dark);color:#efe9db;border-radius:12px;padding:12px 20px;font-size:14px; font-weight:800} .fpb-dark:hover{filter:brightness(1.12)} @media(max-width:760px){.gdens button[data-d="s"]{display:none}} @media(max-width:740px){ .fpcats{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .fpcats::-webkit-scrollbar{display:none}} @media(max-width:700px){ .swn{width:calc(25% - 3px)} .filtpanel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:92vh;border-radius:20px 20px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.35); transform:translateY(105%)} .filtpanel.open{transform:none} .fphead{padding:14px 18px} .fpbody{padding:16px 18px 14px} .fpduo{grid-template-columns:1fr} .fpfoot{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}} [dir=rtl] .fplabel,[dir=rtl] .fpill,[dir=rtl] .fpk,[dir=rtl] .gdens>span{letter-spacing:0} @media(prefers-reduced-motion:reduce){.filtpanel,.filtscrim{transition:none}} .nores{font-size:13.5px;font-weight:700;color:var(--ink2);padding:24px 0;text-align:center} /* ---- Paket I-2b (26 Eyl): KART + IZGARA YOGUNLUGU + HIZLI EKLEME PENCERESI katalogla AYNI — urun_karti.CSS (tek kaynak, asagidaki isaret derlemede degistirilir). Burada yalniz kategori sayfasina ozgu izgara davranisi kalir. ---- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cmin,225px),1fr));gap:26px 18px;margin-top:18px} body[data-dens="l"]{--cmin:300px;--ccol:1} body[data-dens="s"]{--cmin:170px;--ccol:2} .card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px; overflow:hidden;box-shadow:none;transition:box-shadow .28s,transform .28s;color:inherit;text-decoration:none} .card:hover{box-shadow:var(--sh);transform:translateY(-4px)} .cimg{position:relative;aspect-ratio:3/4;background:var(--cream);overflow:hidden} .cimga{display:block;width:100%;height:100%} .cimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s} .card:hover .cimg img{transform:scale(1.045)} @supports not (aspect-ratio: 3 / 4){.cimg{height:0;padding-top:133.333%}.cimga{position:absolute;top:0;right:0;bottom:0;left:0}} .ctag{position:absolute;top:10px;left:10px;z-index:1;background:rgba(255,255,255,.94);color:var(--ink);font-size:10px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:100px;pointer-events:none;max-width:calc(100% - 100px); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfav,.cshare{position:absolute;top:9px;width:32px;height:32px;border-radius:50%;z-index:2;display:grid;place-items:center; background:rgba(25,22,17,.66);color:#fff;border:0;padding:0;cursor:pointer;opacity:0;transform:translateY(-4px);transition:.18s} .cfav{right:47px}.cshare{right:9px} [dir=rtl] .cfav{right:auto;left:47px}[dir=rtl] .cshare{right:auto;left:9px}[dir=rtl] .ctag{left:auto;right:10px} .cfav svg{width:15px;height:15px}.cshare svg{width:14px;height:14px} .cfav:hover,.cshare:hover{background:rgba(25,22,17,.92)} .card:hover .cfav,.card:hover .cshare,.cfav:focus-visible,.cshare:focus-visible,.cfav.on{opacity:1;transform:none} .cfav.on svg{fill:currentColor;color:#e0607a} @media(hover:none){.cfav,.cshare{opacity:1;transform:none}} .cbody{padding:13px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0} /* Paket L (29 Eyl, sahip: ilk acilista 100 urun "sayfayi yormadan"): EKRAN DISINDAKI kartin yazi govdesi (noktalar, ad, fiyat, dugme) olculmez/cizilmez — tarayici yaklasinca cizer. Telefon (4x yavas CPU) autumn-winter: 100 kartla duzen+stil suresi 48 kartlik eski acilis duzeyinde kalir. Gorsel kutusu (aspect-ratio) normal duzende: tembel yukleme mesafesi DEGISMEZ. Yer tutucu boyu olculen medyan govde boyu. .cvk: statik sayfa Geri/yenile ile donuste kapatir (pages.js) — tarayicinin geri yukledigi konum yer tutuculu izgaraya gore kaymasin (SPA kendi kart capasiyla geri yukler: GERI_ANK). */ .grid>.card>.cbody{content-visibility:auto;contain-intrinsic-height:auto 205px} .grid.cvk>.card>.cbody{content-visibility:visible} .cdots{display:flex;gap:5px;align-items:center;min-height:16px;flex-wrap:wrap} .dot{display:block;width:15px;height:15px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:transform .15s;flex:none} .dot:hover{transform:scale(1.2)} .dot.on{box-shadow:0 0 0 2px var(--ink)} .cdots .more{font-size:10.5px;color:var(--ink2);font-weight:700;margin-inline-start:2px;text-decoration:none} .cname{display:block;font-size:13.5px;font-weight:600;line-height:1.35;min-height:36px;color:inherit;text-decoration:none} .cname:hover{color:var(--accent);text-decoration:underline} .cref{font-size:10.5px;color:var(--ink3,#6B625A);font-weight:700;letter-spacing:.04em} .cmeta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .cprice{font-family:var(--serif);font-size:20px;font-weight:700} .cprice .ask{font-size:13px;font-family:var(--sans);font-weight:700;color:var(--accent);text-decoration:none} a.cprice .ask:hover,.cprice a.ask:hover{text-decoration:underline} .csizes{font-size:11px;color:var(--ink2);font-weight:700;letter-spacing:.06em} .cpkbox:empty{display:none} .cpk{margin:2px 0 4px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--cream)} .cpk>b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:5px} .cpkrows{display:flex;flex-direction:column;gap:3px} .cpkrows span{display:flex;align-items:baseline;gap:6px;font-size:14px;font-weight:800;font-family:var(--serif);white-space:nowrap} .cpkrows span i{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink2);flex:1} .cpkrows span small{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--accent2)} .cpklock{font-size:11.5px;font-weight:700;color:var(--accent)} .cpkbtn{display:block;margin-top:7px;text-align:center;font-size:12px;font-weight:800;border:1px solid var(--ink);color:var(--ink); border-radius:9px;padding:7px 10px;text-decoration:none} .cpkbtn:hover{background:var(--ink);color:var(--card)} .cact{display:flex;gap:8px;margin-top:auto;min-width:0} .cact .add{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit; background:var(--dark);color:#efe9db;font-weight:800;font-size:13px;padding:10px 8px;border-radius:9px;border:1px solid var(--dark); cursor:pointer;transition:background .2s} .cact .add span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cact .add:hover{background:#000} .cact .add svg{width:16px;height:16px;flex:none} @media(max-width:560px){ .grid{grid-template-columns:repeat(var(--ccol,2),1fr);gap:18px 10px} .cbody{padding:10px 10px 12px} .grid>.card>.cbody{contain-intrinsic-height:auto 220px} .cname{font-size:12px;min-height:32px} .cprice{font-size:17px} .cact .add{font-size:11px;padding:9px 4px}} @media(prefers-reduced-motion:reduce){.card,.cimg img,.dot,.cfav,.cshare{transition:none}.card:hover{transform:none}} /* hizli ekleme penceresi (iki yuzey): telefonda alttan, genis ekranda ortada; ceride urun sayfasinin siparis kutusu */ .qsov{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--qsz,140);background:rgba(20,17,12,.45);display:flex;align-items:flex-end;justify-content:center} .qsov[hidden]{display:none} .qsheet{position:relative;background:var(--card);color:var(--ink);width:100%;max-width:540px;max-height:88vh;overflow:auto; overscroll-behavior:contain;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding:14px 16px 18px;outline:0} @media(min-width:701px){.qsov{align-items:center;padding:24px}.qsheet{border-radius:18px;max-height:86vh}} .qshead{display:flex;align-items:center;gap:11px;margin:0 0 12px} .qsimg{width:44px;height:58px;object-fit:cover;border-radius:8px;background:var(--cream);flex:none} .qsimg[hidden]{display:none} .qsti{flex:1;min-width:0} .qsti b{display:block;font-size:14px;font-weight:700;line-height:1.3} .qsti small{display:block;font-size:11.5px;color:var(--ink2);font-weight:700;margin-top:2px} .qsx{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink); font:inherit;font-size:14px;font-weight:800;cursor:pointer;line-height:1} .qsx:hover{border-color:var(--ink)} body.qs-on{overflow:hidden} /* kutunun alt satiri pencerede iki yuzeyde ayni: dar telefonda "Siparise ekle" tam genislik (urun sayfasi kurali) */ @media(max-width:390px){.qsbody .ob-add{flex:1 1 100%}} /* kategori sayfasi ekrani doldursun — urun sayfasindaki okuma genisligi degismez */ body[data-t="c"] .wrap{max-width:min(1680px,96vw)} .card.hid{display:none} /* Paket F: pages.js izgarayi devralana (.gh) kadar yalniz ilk kartlar — 900 kartlik sayfada telefonun duzen/stil suresi. Paket L (29 Eyl): 48 -> 100 (pages.js initGrid STEP ile ayni sayi). JS'siz ziyaretci: