/* ============================================================ beecher2go — magaza stilleri Renkler yonetim panelinden geliyor; :root degiskenleri icinde ayarlardan basiliyor. ============================================================ */ :root{ --brand:#FC445E; --pop:#FFE500; --ink:#0B0B0C; --paper:#fff; --smoke:#F4F3F1; --smoke-2:#E8E6E2; --mute:#6E6C68; --line:rgba(11,11,12,.14); --line-soft:rgba(11,11,12,.08); --f-disp:"Archivo",Impact,sans-serif; --f-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --pad:clamp(14px,4vw,44px); --sect:clamp(48px,7vw,104px); --hdr:62px; --ez:cubic-bezier(.2,.7,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden} body.lock{overflow:hidden} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--brand);outline-offset:2px} ::selection{background:var(--pop);color:var(--ink)} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:fixed;top:8px;left:8px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;transform:translateY(-200%)} .skip:focus{transform:none} /* ---------- tipografi ---------- */ .mono{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.13em;text-transform:uppercase} .dsp{font-family:var(--f-disp);font-weight:900;font-style:italic;line-height:.88;letter-spacing:-.025em;text-transform:uppercase} .t-xl{font-size:clamp(44px,9vw,124px)} .t-l{font-size:clamp(32px,5.4vw,72px)} .t-m{font-size:clamp(24px,3.4vw,44px)} .t-s{font-size:clamp(18px,2.2vw,26px)} h1,h2,h3,h4{margin:0} .mark{background:var(--pop);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone} /* ---------- logo ---------- */ .wm{display:inline-flex;align-items:center;background:var(--brand);padding:5px 11px 6px;line-height:1} .wm span{font-family:var(--f-disp);font-weight:900;font-style:italic;font-size:21px;letter-spacing:-.03em;color:var(--ink);-webkit-text-stroke:0} .wm span i{font-style:italic;color:var(--pop);-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill} .wm--lg span{font-size:44px} .wm--lg span i{-webkit-text-stroke-width:3px} /* ---------- kayan bant ---------- */ .tick{background:var(--ink);color:var(--pop);overflow:hidden} .tick__t{display:flex;width:max-content;animation:tk 30s linear infinite} .tick__t span{padding:7px 24px;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap} @keyframes tk{to{transform:translateX(-50%)}} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:2px solid var(--ink)} .hdr__in{height:var(--hdr);display:flex;align-items:center;gap:18px;padding:0 var(--pad)} .nav{display:flex;gap:20px;margin-left:8px} .nav a{font:600 12px/1 var(--f-body);letter-spacing:.04em;text-transform:uppercase;padding:7px 0;border-bottom:3px solid transparent} .nav a:hover,.nav a.on{border-bottom-color:var(--brand)} .hdr__r{margin-left:auto;display:flex;align-items:center;gap:2px} .ib{width:40px;height:40px;display:grid;place-items:center;position:relative;border:2px solid transparent} .ib:hover{border-color:var(--ink)} .ib svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none} .dot{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;background:var(--brand);color:#fff;font:700 10px/17px var(--f-mono);text-align:center} .burger{display:none} /* ---------- butonlar ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border:2px solid var(--ink);background:var(--ink);color:#fff;font:700 12px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;transition:.16s var(--ez);text-align:center} .btn:hover{background:var(--pop);color:var(--ink);transform:translateY(-2px)} .btn--brand{background:var(--brand);border-color:var(--brand);color:#fff} .btn--brand:hover{background:var(--pop);border-color:var(--ink);color:var(--ink)} .btn--wa{background:#25D366;border-color:#0B0B0C;color:#0B0B0C} .btn--wa:hover{background:var(--pop)} .btn--gh{background:transparent;color:var(--ink)} .btn--gh:hover{background:var(--ink);color:#fff} .btn--wide{width:100%} .btn--sm{padding:10px 16px;font-size:11px} .btn[disabled],.btn.is-off{opacity:.42;pointer-events:none} .btn svg{width:17px;height:17px;fill:currentColor} /* ---------- hero / banner (dinamik) ---------- --hh yükseklik, --hfit sığdırma, --hfocus odak, --hov karartma, --halign hiza, --htxt yazı rengi, --hcol tek renk. Hepsi PHP'den geliyor. */ .hero{ position:relative;overflow:hidden;isolation:isolate; background:var(--hcol,var(--brand));color:#fff; border-bottom:2px solid var(--ink); padding:clamp(30px,5vw,72px) var(--pad); display:flex;flex-direction:column;justify-content:center; } .hero--media{ min-height:var(--hh,68vh); color:var(--htxt,#fff); align-items:stretch; } .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img,.hero__bg video{ width:100%;height:100%; object-fit:var(--hfit,cover); object-position:var(--hfocus,50% 50%); /* contain seçilirse boşluk tek renkle dolsun */ background:var(--hcol,var(--brand)); } .hero__ov{position:absolute;inset:0;z-index:-1;background:#000;opacity:var(--hov,.38)} .hero__mob{display:none} .hero__in{position:relative;width:100%;display:flex;flex-direction:column;align-items:var(--halign,flex-start); text-align:start} .hero--media .hero__in{justify-content:center;flex:1} .hero__in[style*="center"],.hero__in{} .hero__k{display:inline-block;background:var(--ink);color:var(--pop);padding:6px 12px;margin-bottom:16px} .hero h1{max-width:16ch;text-shadow:4px 4px 0 var(--ink)} .hero p{max-width:44ch;margin:18px 0 0;font-size:clamp(15px,1.6vw,18px);color:inherit;opacity:.95} .hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} .hero__cta .btn{border-color:var(--ink)} .hero__stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px;padding-top:20px; border-top:2px solid rgba(255,255,255,.35);width:100%} .hero__stats b{display:block;font-family:var(--f-disp);font-style:italic;font-weight:900;font-size:30px;line-height:1} /* hiza ortada/sağdaysa metinler de ona uysun */ .hero__in{--ta:start} .hero:has(.hero__in[data-align="orta"]) .hero__in,.hero__in[data-align="orta"]{text-align:center} .hero__in[data-align="orta"] .hero h1,.hero__in[data-align="orta"] p{margin-left:auto;margin-right:auto} .hero__in[data-align="sag"]{text-align:right} /* ---------- bolum basligi ---------- */ .sect{padding:var(--sect) var(--pad)} .sect--tight{padding-top:clamp(28px,4vw,52px)} .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding-bottom:12px;margin-bottom:clamp(20px,3vw,34px)} .sh p{margin:8px 0 0;color:var(--mute);max-width:42ch} /* ---------- filtre rayi ---------- */ .rail{position:sticky;top:var(--hdr);z-index:60;background:var(--paper);border-bottom:2px solid var(--ink);padding:10px var(--pad);display:flex;gap:10px;align-items:center} .rail__s{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none} .rail__s::-webkit-scrollbar{display:none} .chip{flex:none;padding:9px 15px;border:2px solid var(--line);font:600 11px/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:.14s var(--ez)} .chip:hover{border-color:var(--ink)} .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)} .chip b{font-weight:400;opacity:.55;margin-left:6px} .sel{position:relative;flex:none} .sel select{appearance:none;padding:9px 32px 9px 14px;border:2px solid var(--line);background:transparent;font:600 11px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer} .sel::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none} /* ---------- urun izgarasi ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)} .card{background:var(--paper);position:relative;display:flex;flex-direction:column} .card__m{position:relative;aspect-ratio:1/1.18;background:var(--smoke);overflow:hidden} .card__m img,.card__m video{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ez),opacity .3s var(--ez)} .card__m .alt{position:absolute;inset:0;opacity:0} .card:hover .card__m .alt{opacity:1} .card:hover .card__m img,.card:hover .card__m video{transform:scale(1.05)} .card__ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--smoke)} .card__ph svg{width:70%;height:70%} .badges{position:absolute;top:9px;left:9px;z-index:3;display:flex;flex-direction:column;gap:4px;align-items:flex-start} .bdg{padding:5px 9px;font:700 9.5px/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--ink)} .bdg--pop{color:var(--ink)} .card__vid{position:absolute;top:9px;right:9px;z-index:3;background:var(--ink);color:var(--pop);padding:4px 7px;font:700 9px/1 var(--f-mono);letter-spacing:.1em} .card__i{padding:13px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1} .card__br{color:var(--mute)} .card__n{font:700 15px/1.25 var(--f-body);letter-spacing:-.01em} .card__sb{color:var(--mute);font-size:12.5px} .card__f{margin-top:auto;padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:10px} .card__p{font-family:var(--f-disp);font-style:italic;font-weight:900;font-size:22px;line-height:1} .card__p s{font-family:var(--f-mono);font-style:normal;font-size:11px;font-weight:400;color:var(--mute);margin-left:7px} .card__sz{color:var(--mute);font:500 10px/1 var(--f-mono);letter-spacing:.09em} .card__sz i{font-style:normal;opacity:.35;text-decoration:line-through} .card__lnk{position:absolute;inset:0;z-index:1} .card.out .card__m{filter:grayscale(1);opacity:.6} .empty{padding:70px 20px;text-align:center;color:var(--mute);grid-column:1/-1;background:var(--paper)} .empty .t-s{color:var(--ink);margin-bottom:8px} /* ---------- urun detay ---------- */ .pdp{display:grid;grid-template-columns:1.1fr .9fr;border-bottom:2px solid var(--ink)} .gal{border-right:2px solid var(--ink);background:var(--smoke);position:relative} .gal__stage{position:relative;aspect-ratio:1/1.1;background:var(--smoke);overflow:hidden} .gal__stage img,.gal__stage video{width:100%;height:100%;object-fit:cover} .gal__thumbs{display:flex;gap:2px;padding:2px;background:var(--ink);overflow-x:auto;scrollbar-width:none} .gal__thumbs::-webkit-scrollbar{display:none} .gal__thumbs button{flex:none;width:78px;aspect-ratio:1/1.15;background:var(--smoke);position:relative;overflow:hidden;border:3px solid transparent} .gal__thumbs button.on{border-color:var(--pop)} .gal__thumbs img,.gal__thumbs video{width:100%;height:100%;object-fit:cover} .gal__thumbs .tag{position:absolute;bottom:2px;right:2px;background:var(--ink);color:var(--pop);font:700 8px/1 var(--f-mono);padding:2px 3px} .pnl{padding:clamp(20px,3vw,46px) var(--pad)} .pnl__eb{display:flex;gap:12px;flex-wrap:wrap;color:var(--mute);margin-bottom:10px} .pnl__pr{display:flex;align-items:baseline;gap:12px;margin:14px 0 6px;flex-wrap:wrap} .pnl__pr .v{font-family:var(--f-disp);font-style:italic;font-weight:900;font-size:clamp(32px,4.2vw,52px);line-height:1} .pnl__pr s{color:var(--mute);font:400 14px var(--f-mono)} .pnl__pr .off{background:var(--brand);color:#fff;padding:4px 9px;font:700 11px/1 var(--f-mono)} .blk{margin-top:24px;border-top:3px solid var(--ink);padding-top:12px} .blk__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;color:var(--mute)} .szs{display:flex;flex-wrap:wrap;gap:6px} .sz{min-width:56px;padding:12px 13px;border:2px solid var(--line);font:700 12px/1 var(--f-body);letter-spacing:.05em;transition:.14s var(--ez)} .sz:hover{border-color:var(--ink)} .sz.on{background:var(--ink);color:#fff;border-color:var(--ink)} .sz[disabled]{opacity:.3;text-decoration:line-through;pointer-events:none} .sz small{display:block;font:500 8.5px/1 var(--f-mono);color:var(--brand);margin-top:4px} .sz.on small{color:var(--pop)} .feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .feat{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;background:var(--smoke);font:600 11px/1 var(--f-body)} .feat::before{content:"";width:6px;height:6px;background:var(--brand)} .spec{width:100%;border-collapse:collapse} .spec td{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:top} .spec td:first-child{width:40%;font:500 10.5px/1.6 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)} .cta{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap} .cta .btn{flex:1;min-width:170px} .note{margin-top:12px;color:var(--mute);font-size:12.5px} /* ---------- sepet ---------- */ .scrim{position:fixed;inset:0;z-index:100;background:rgba(11,11,12,.55);opacity:0;pointer-events:none;transition:opacity .26s var(--ez)} .scrim.on{opacity:1;pointer-events:auto} .dw{position:fixed;top:0;right:0;bottom:0;z-index:110;width:min(430px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(101%);transition:transform .32s var(--ez);border-left:3px solid var(--ink)} .dw.on{transform:none} .dw--l{right:auto;left:0;transform:translateX(-101%);border-left:0;border-right:3px solid var(--ink);width:min(340px,100%)} .dw__h{display:flex;align-items:center;justify-content:space-between;padding:15px var(--pad);border-bottom:3px solid var(--ink)} .dw__b{flex:1;overflow-y:auto;padding:0 var(--pad)} .dw__f{border-top:3px solid var(--ink);padding:15px var(--pad) calc(15px + env(safe-area-inset-bottom))} .ship{margin-bottom:12px} .ship__b{height:4px;background:var(--smoke-2);margin-top:6px;overflow:hidden} .ship__b i{display:block;height:100%;background:var(--brand);transition:width .35s var(--ez)} .ln{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-soft)} .ln__t{aspect-ratio:1/1.15;background:var(--smoke);overflow:hidden} .ln__t img,.ln__t video{width:100%;height:100%;object-fit:cover} .ln__n{font:700 13.5px/1.3 var(--f-body)} .ln__m{color:var(--mute);margin-top:3px} .ln__r{display:flex;flex-direction:column;align-items:flex-end;gap:8px} .ln__p{font:600 13px var(--f-mono)} .qty{display:flex;border:2px solid var(--line)} .qty button{width:28px;height:28px;display:grid;place-items:center;font:600 14px/1 var(--f-mono)} .qty button:hover{background:var(--smoke)} .qty span{width:30px;display:grid;place-items:center;font:700 11px var(--f-mono);border-left:2px solid var(--line);border-right:2px solid var(--line)} .rmv{color:var(--mute);font:500 10px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px} .rmv:hover{color:var(--brand)} .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px} .tot .v{font-family:var(--f-disp);font-style:italic;font-weight:900;font-size:30px;line-height:1} /* ---------- kategori kartlari ---------- */ .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)} .cats a{background:var(--ink);color:#fff;padding:clamp(16px,2.2vw,26px);min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;position:relative;overflow:hidden;transition:background .2s var(--ez)} .cats a:hover{background:var(--brand)} .cats .n{font-family:var(--f-disp);font-style:italic;font-weight:900;font-size:clamp(22px,2.6vw,32px);line-height:.9;text-transform:uppercase} .cats .c{color:var(--pop)} /* ---------- footer ---------- */ .ftr{background:var(--ink);color:#fff;padding:var(--sect) var(--pad) 24px} .ftr__g{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(18px,3vw,44px);padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.18)} .ftr h4{margin:0 0 13px;font:500 10.5px/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)} .ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .ftr ul a{font-size:13.5px;color:rgba(255,255,255,.82)} .ftr ul a:hover{color:var(--pop)} .ftr__b{padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:rgba(255,255,255,.5)} /* ---------- sayfa metni ---------- */ .page{max-width:72ch;padding:var(--sect) var(--pad)} .page h2{margin:30px 0 8px} .page p,.page li{color:#2A2A2C;font-size:14.5px;line-height:1.65} .page ul{padding-left:18px} /* ---------- bildirim ---------- */ .toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 28px));pointer-events:none} .toast{background:var(--ink);color:#fff;padding:13px 16px;display:flex;gap:11px;align-items:center;font-size:13.5px;animation:tp .28s var(--ez);border-left:5px solid var(--pop)} .toast.err{border-left-color:var(--brand)} @keyframes tp{from{opacity:0;transform:translateY(12px)}} /* ---------- whatsapp yuzen dugme ---------- */ .wafab{position:fixed;right:16px;bottom:16px;z-index:90;width:54px;height:54px;background:#25D366;border:3px solid var(--ink);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink)} .wafab:hover{background:var(--pop)} .wafab svg{width:26px;height:26px;fill:var(--ink)} /* ---------- responsive ---------- */ @media(max-width:980px){ .pdp{grid-template-columns:1fr} .gal{border-right:0;border-bottom:2px solid var(--ink)} .ftr__g{grid-template-columns:1fr 1fr} } @media(max-width:720px){ .nav{display:none} /* mobilde video yerine hafif gorsel varsa onu goster */ .hero__mob{display:block;position:absolute;inset:0;width:100%;height:100%; object-fit:var(--hfit,cover);object-position:var(--hfocus,50% 50%)} .hero__mob + .hero__vid{display:none} .hero--media{min-height:min(var(--hh,68vh),74vh)} .hero__in{align-items:flex-start!important;text-align:left!important} .hero__in[data-align] p,.hero__in[data-align] h1{margin-left:0;margin-right:0} .hero__stats{gap:18px;margin-top:26px} .hero__stats b{font-size:24px} .hero__cta{width:100%} .hero__cta .btn{flex:1;min-width:140px} .burger{display:grid} .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))} .card__i{padding:10px 11px 13px} .card__p{font-size:18px} .card__n{font-size:13.5px} .ftr__g{grid-template-columns:1fr} .hero h1{text-shadow:3px 3px 0 var(--ink)} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} .hero__vid{display:none} .hero__mob{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:var(--hfit,cover)} }