/* JetFood Shop (retail raf) — mockup: claude artifact 9ea07d02 */ .shop-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px 56px 20px; color: rgb(25,25,25); } /* HERO: kendi zemini var. Krem (#FFF6EE) markanin kendi zemini; sayfanin varsayilan grisi bandi olu bir slab gibi gosteriyordu. Negatif margin + padding ile kenardan kenara akiyor, icerik .shop-wrap hizasinda kaliyor. */ .shop-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin: 0 -20px 0 -20px; padding: 26px 20px 24px 20px; background: #FFF6EE; border-bottom: 1px solid rgba(255,0,60,.10); } .shop-hero__t { min-width: 0; } /* 36px -> 30px: URL'in zaten soyledigi bir basliga 42px satir yuksekligi fazlaydi; kazanilan alan aramaya gitti. */ .shop-hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; line-height: 34px; margin: 0; } .shop-hero .shop-sub { font-size: 14.5px; color: rgb(102,96,90); margin-top: 5px; max-width: 46ch; } /* Gercek katalog fotograflarindan serit. mix-blend-mode: multiply ayni ders -- urun fotolarinin zemini beyaz, krem uzerinde beyaz kutu gibi dururlardi. */ .shop-hero__strip { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .shop-hero__cell { width: 56px; height: 56px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; padding: 6px; flex: 0 0 auto; } .shop-hero__cell img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .shop-ship-line { padding: 12px 0 2px; } .shop-ship-pill { display: inline-flex; align-items: center; gap: 9px; background: rgb(255,230,235); border-radius: 24px; padding: 10px 20px; font-size: 13.5px; font-weight: 600; color: rgb(255,0,60); white-space: nowrap; } .shop-cats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; } .shop-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; background: rgb(245,245,245); border-radius: 14px; padding: 18px 6px; text-decoration: none; color: rgb(25,25,25); transition: background .15s ease; } .shop-cat-tile:hover { background: rgb(238,238,238); color: rgb(25,25,25); } .shop-cat-tile .cat-name { font-size: 13px; font-weight: 600; text-align: center; } .shop-cat-tile .cat-count { font-size: 11px; color: rgb(163,163,163); } .shop-cat-tile svg { stroke: rgb(25,25,25); } .shop-section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 34px 0 14px 0; } .shop-section-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin: 0; } .shop-section-head a { font-size: 13.5px; font-weight: 600; color: rgb(255,0,60); text-decoration: none; } .shop-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; } .shop-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } .shop-card { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: rgb(25,25,25); } .shop-card:hover { color: rgb(25,25,25); } .shop-card .card-img { position: relative; aspect-ratio: 1; background: rgb(250,250,250); border: 1px solid rgb(234,234,234); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .shop-card .card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .shop-card .card-price { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .shop-card .card-title { font-size: 13px; color: rgb(118,118,118); line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .shop-card .card-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgb(163,163,163); } .shop-card .card-meta svg { flex-shrink: 0; } .shop-card .card-add { position: absolute; bottom: 10px; right: 10px; width: 34px; height: 34px; background: #fff; border: 1px solid rgb(234,234,234); border-radius: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); } .shop-badge { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 600; border-radius: 10px; padding: 2px 8px; background: rgb(255,243,205); color: #9a6b00; } .shop-crumb { font-size: 12.5px; color: rgb(163,163,163); padding-top: 26px; } .shop-cat-title { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 4px 0; } .shop-cat-title h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; } .shop-cat-title .cat-total { font-size: 13.5px; color: rgb(118,118,118); } .shop-chipbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 0 18px 0; } .shop-chip { border: 1px solid rgb(234,234,234); border-radius: 18px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: rgb(25,25,25); text-decoration: none; } .shop-chip:hover { border-color: rgb(200,200,200); color: rgb(25,25,25); } .shop-chip--active { background: rgb(40,40,40); border-color: rgb(40,40,40); color: #fff; } .shop-chip--active:hover { color: #fff; } /* Success sayfasi seridi */ .shop-success-strip { margin-top: 34px; border-top: 1px solid rgb(234,234,234); padding-top: 26px; } .shop-success-strip .strip-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .shop-success-strip .strip-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0; } .shop-success-strip .strip-head .strip-sub { font-size: 12.5px; color: rgb(118,118,118); } .shop-success-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; } @media (max-width: 980px) { .shop-cats { grid-template-columns: repeat(3, minmax(0,1fr)); } .shop-grid, .shop-grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } .shop-success-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 640px) { .shop-hero h1 { font-size: 24px; line-height: 28px; } .shop-hero__strip { display: none; }  /* mobilde dikey alan para */ .shop-hero .shop-sub { font-size: 13.5px; } .shop-cats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } .shop-grid, .shop-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .shop-success-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Add-to-cart buton durumlari */ .shop-card .card-add { cursor: pointer; padding: 0; min-width: 40px; min-height: 40px; transition: transform .16s ease; } .shop-card .card-add:active { transform: scale(0.94); } .shop-card .card-add .ico-check { display: none; } .shop-card .card-add.is-added .ico-plus { display: none; } .shop-card .card-add.is-added .ico-check { display: block; } .shop-card .card-add.is-adding { opacity: .55; } /* Mini sepet cubugu — JetChat FAB sag-alt kosede, cubuk ORTADA durur */ .shop-cart-bar { position: fixed; left: 0; right: 0; bottom: 18px; display: none; justify-content: center; z-index: 990; pointer-events: none; padding: 0 84px; } .shop-cart-bar.is-visible { display: flex; } .shop-cart-bar-inner { pointer-events: auto; display: flex; align-items: center; gap: 8px; background: rgb(255,0,60); color: #fff; border-radius: 26px; padding: 13px 24px; font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 16px rgba(255,0,60,.35); min-height: 44px; } .shop-cart-bar-inner:hover { color: #fff; background: rgb(225,0,53); } .shop-cart-bar .bar-count { background: rgba(255,255,255,.25); border-radius: 12px; padding: 1px 9px; font-variant-numeric: tabular-nums; } .shop-cart-bar .bar-dot { opacity: .7; } /* Sepet sayfasi */ .shop-cart-list { display: flex; flex-direction: column; } .shop-cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgb(234,234,234); } .shop-cart-row .row-img { width: 64px; height: 64px; flex-shrink: 0; border: 1px solid rgb(234,234,234); border-radius: 10px; background: rgb(250,250,250); overflow: hidden; } .shop-cart-row .row-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .shop-cart-row .row-main { flex: 1; min-width: 0; } .shop-cart-row .row-title { font-size: 13.5px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .shop-cart-row .row-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; } .shop-qty { display: flex; align-items: center; gap: 0; border: 1px solid rgb(234,234,234); border-radius: 20px; overflow: hidden; } .shop-qty button { width: 40px; height: 40px; border: 0; background: #fff; font-size: 17px; cursor: pointer; color: rgb(25,25,25); } .shop-qty button:active { background: rgb(245,245,245); } .shop-qty .qty-val { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Sepetten silme. Stepper'in disinda, sessiz gri; dokununca kirmizi. Yuksekligi stepper hapiyle ayni (40px) ki satir hizasi bozulmasin. */ .shop-cart-row .row-del { width: 40px; height: 40px; flex-shrink: 0; border: 0; background: none; padding: 0; cursor: pointer; color: rgb(163,163,163); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .shop-cart-row .row-del:hover { color: rgb(255,0,60); background: rgb(255,240,243); } .shop-cart-row .row-del:active { background: rgb(255,230,235); } /* ---- Shop aramasi ---- */ .shop-search { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 6px 6px 6px 14px; background: #fff; border: 1px solid rgb(234,234,234); border-radius: 26px; } .shop-search__icon { flex-shrink: 0; color: rgb(140,140,140); } .shop-search__input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: rgb(25,25,25); padding: 8px 0; } .shop-search__input::placeholder { color: rgb(163,163,163); } .shop-search__input::-webkit-search-cancel-button { cursor: pointer; } .shop-search:focus-within { border-color: rgb(25,25,25); } .shop-search__btn { flex-shrink: 0; border: 0; cursor: pointer; background: rgb(255,0,60); color: #fff; font: inherit; font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 22px; } .shop-search__btn:hover { background: rgb(224,0,54); } .shop-search__clear { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgb(140,140,140); text-decoration: none; } .shop-search__clear:hover { color: rgb(25,25,25); background: rgb(245,245,245); } .shop-search-empty { padding: 26px 0 10px; } .shop-search-empty p { margin: 0 0 8px; font-size: 15px; } .shop-search-empty__note { color: rgb(118,118,118); font-size: 13.5px; } .shop-elsewhere { margin: 8px 0 2px; font-size: 13.5px; color: rgb(118,118,118); } .shop-elsewhere a { color: rgb(255,0,60); text-decoration: none; } .shop-elsewhere a:hover { text-decoration: underline; } /* ---- Arama: diger raf seridi ---- */ /* KENDI sinif seti: prod'un shop.css'i "shop-success-*" alaninda conf2'den ayrisik oldugu icin o kalibi yeniden kullanmak canlida CSS'siz kart uretiyordu (kartlar tam ekran boyunda ciziliyordu). */ .shop-xrail { margin: 26px 0 6px; padding-top: 20px; border-top: 1px solid rgb(234,234,234); } .shop-xrail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .shop-xrail .xrail-head__t { min-width: 0; } .shop-xrail h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 3px; color: rgb(25,25,25); } .shop-xrail .xrail-sub { display: block; font-size: 12.5px; line-height: 1.4; color: rgb(118,118,118); } .shop-xrail .xrail-all { flex-shrink: 0; margin-top: 2px; font-size: 13px; font-weight: 700; color: rgb(255,0,60); text-decoration: none; white-space: nowrap; } .shop-xrail .xrail-all:hover { text-decoration: underline; } .shop-xrail__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 2px 4px; margin: 0 -2px; scrollbar-width: none; -ms-overflow-style: none; } .shop-xrail__track::-webkit-scrollbar { display: none; } /* <a> icindeki span'ler inline: blok yapilmazsa fiyat ve baslik yan yana akip karti bozar. */ .xrail-card { flex: 0 0 128px; width: 128px; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; } .xrail-card__img { display: block; position: relative; height: 0; padding-bottom: 100%; border: 1px solid rgb(234,234,234); border-radius: 12px; background: rgb(250,250,250); overflow: hidden; } .xrail-card:hover .xrail-card__img { border-color: rgb(200,200,200); } .xrail-card__img img { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; mix-blend-mode: multiply; } .xrail-card__price { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: rgb(25,25,25); font-variant-numeric: tabular-nums; } .xrail-card__title { display: block; margin-top: 2px; font-size: 12px; line-height: 15px; color: rgb(90,90,90); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (max-width: 480px) { .xrail-card { flex-basis: 116px; width: 116px; } } /* Sepet onerileri: yatay izde TAM kart ("+" butonu ile). Grid kartinin genisligi normalde grid'den gelir; iz icinde sabitlenmesi gerekiyor. */ .shop-xrail__track--cards .shop-card { flex: 0 0 168px; width: 168px; scroll-snap-align: start; } @media (max-width: 480px) { .shop-xrail__track--cards .shop-card { flex-basis: 148px; width: 148px; } } @media (max-width: 480px) { .shop-search { padding-left: 12px; } .shop-search__btn { padding: 10px 14px; } } /* Dar ekranda urun adi iki satira sigsin: silme butonu 40 -> 32 ve satir boslugu kisaliyor. Dokunma hedefi hala 32px + cevresindeki bosluk. */ @media (max-width: 480px) { .shop-cart-row { gap: 10px; } .shop-cart-row .row-del { width: 32px; } } .shop-cart-summary { margin-top: 20px; background: rgb(245,245,245); border-radius: 14px; padding: 18px 20px; } .shop-cart-summary .sum-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; } .shop-cart-summary .sum-row.total { font-weight: 700; font-size: 16px; padding-top: 10px; margin-top: 6px; border-top: 1px solid rgb(224,224,224); } .shop-freeship-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgb(118,118,118); margin-top: 10px; } .shop-freeship-note.ok { color: rgb(0,128,0); font-weight: 600; } .shop-checkout-btn { display: block; width: 100%; margin-top: 16px; background: rgb(255,0,60); color: #fff; border: 0; border-radius: 26px; padding: 15px; font-size: 15.5px; font-weight: 700; font-family: inherit; cursor: pointer; min-height: 48px; } .shop-checkout-btn[disabled] { background: rgb(200,200,200); cursor: default; } /* --- Bekleme karti ----------------------------------------------------- "Continue to payment" sunucuya gidiyor ve orada sepetteki her urunun stogu tek tek sorulyor. Eskiden bu surede butonun YALNIZCA disabled ozelligi degisiyordu: telefonda bu neredeyse gorunmez bir fark, musteri hicbir seyin olmadigini sanip tekrar dokunuyor, sonra sayfayi kapatiyordu. Kart butonun YERINE geciyor -- yaninda degil: bir sey oldugunu anlatmanin en kisa yolu, dokunulan seyin degismesi. Metin tarafinda tek kural: FIYATTAN SOZ ETMEZ. Musteriye "fiyati dogruluyoruz" demek, fiyati baskasindan aldigimizi soylemektir. */ /* Kart BUTONUN YERINE, BUTONUN DURDUGU YERDE acilmali. Buton position:sticky (asagida) -- yani musteri formun ortasindayken buton ekranin altinda yuzuyor. Kart duz akista kalsaydi panelin dibinde, fold'un ALTINDA acilirdi: olculdu, 844px ekranda kart 1030px'te kaliyordu, yani dokununca buton kayboluyor ve ekranda hicbir sey belirmiyordu -- duzeltmeye calistigimiz hatanin ta kendisi. Ayni sticky degerleri, ayni golge: dokunulan sey yerinde donusuyor, sayfa ziplamiyor. */ .shop-wait { margin-top: 16px; border-radius: 16px; border: 1px solid rgb(255,219,226); background: rgb(255,247,248); padding: 14px; animation: shopWaitRise 320ms cubic-bezier(.22,1,.36,1) both; position: sticky; bottom: 16px; z-index: 5; box-shadow: 0 6px 18px rgba(10,14,20,.18); } .shop-wait__top { display: flex; align-items: center; gap: 13px; } .shop-wait__mark { width: 60px; height: 60px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; } .shop-wait__halo { position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border-radius: 50%; background: rgb(220,240,251); animation: shopWaitHalo 2.6s ease-in-out infinite; } .shop-wait__img { position: relative; width: 50px; height: 50px; object-fit: contain; animation: shopWaitFloat 2.6s ease-in-out infinite; } .shop-wait__tick { position: relative; width: 48px; height: 48px; border-radius: 50%; background: rgb(21,128,61); display: flex; align-items: center; justify-content: center; animation: shopWaitPop 420ms cubic-bezier(.34,1.56,.64,1) both; } .shop-wait__body { flex-grow: 1; min-width: 0; } .shop-wait__head { font-size: 14.5px; font-weight: 700; line-height: 1.25; } .shop-wait__sub { font-size: 12px; color: rgb(90,90,90); line-height: 1.42; margin-top: 3px; } .shop-wait__bar { height: 4px; border-radius: 4px; background: rgb(255,217,225); overflow: hidden; margin-top: 12px; } .shop-wait__bar span { display: block; width: 32%; height: 100%; border-radius: 4px; background: rgb(255,0,60); animation: shopWaitBar 1.35s cubic-bezier(.65,0,.35,1) infinite; } .shop-wait__item { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 10px; margin-top: 12px; position: relative; overflow: hidden; } .shop-wait__item img { width: 30px; height: 30px; object-fit: contain; position: relative; } .shop-wait__itembody { flex-grow: 1; min-width: 0; position: relative; } .shop-wait__title { font-size: 12.5px; font-weight: 600; line-height: 1.2; } .shop-wait__count { font-size: 11px; color: rgb(107,107,107); line-height: 1.3; } .shop-wait__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(90deg, rgba(255,0,60,0) 0%, rgba(255,0,60,0.09) 50%, rgba(255,0,60,0) 100%); animation: shopWaitSweep 1.6s ease-in-out infinite; } .shop-wait__minitick { position: relative; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: rgb(21,128,61); display: flex; align-items: center; justify-content: center; animation: shopWaitPop 420ms cubic-bezier(.34,1.56,.64,1) both; } /* Cozuldu: ayni kart, yesil. Yeni bir kutu acmiyoruz -- goz ayni yerde kaliyor. */ .shop-wait--ok { border-color: rgb(207,232,215); background: rgb(240,248,242); } .shop-wait--ok .shop-wait__head { color: rgb(21,128,61); } .shop-wait--ok .shop-wait__bar { background: rgb(215,236,221); } .shop-wait--ok .shop-wait__bar span { width: 100%; background: rgb(21,128,61); animation: none; } @keyframes shopWaitFloat { 0%, 100% { transform: translateY(2px) rotate(-7deg); } 50% { transform: translateY(-5px) rotate(7deg); } } @keyframes shopWaitHalo  { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.14); opacity: .9; } } @keyframes shopWaitBar   { 0% { transform: translateX(-105%); } 100% { transform: translateX(340%); } } @keyframes shopWaitSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(240%); } } @keyframes shopWaitPop   { 0% { transform: scale(.45); opacity: 0; } 62% { transform: scale(1.09); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes shopWaitRise  { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .shop-wait, .shop-wait__halo, .shop-wait__img, .shop-wait__tick, .shop-wait__bar span, .shop-wait__sweep, .shop-wait__minitick { animation: none; } .shop-wait__sweep { display: none; } } /* CTA GORUNUR KALSIN. Adres formu uzun (5 kayitli adres + yeni adres formu + telefon + JetPoints + Turnstile): "Continue to payment" ekranin cok altinda kaliyordu ve musteri onu bulmak icin kaydirmak zorundaydi. position:sticky secildi, fixed DEGIL: buton akista kaliyor, yani panel bitince yerine oturuyor ve icerigin ustune binmiyor. Ata zincirinde overflow/float YOK, yani sticky olmuyor (bkz sticky-ray tuzagi). */ .shop-panel .shop-checkout-btn { position: sticky; bottom: 16px; z-index: 5; box-shadow: 0 6px 18px rgba(10,14,20,.18); } @media (max-width: 768px) { /* JetChat balonu sag-altta 76x76 SABIT ve z-index'i en ustte: buton tam alta yapissa sag kenari onun altinda kalirdi. Alt sepet cubugu da ayni sebeple bottom:90px kullaniyor -- ayni hizada duruyoruz. */ .shop-panel .shop-checkout-btn, .shop-panel .shop-wait { bottom: 88px; } } /* --- Bos sepet --------------------------------------------------------- Eskisi `.shop-cart-empty` idi: ortalanmis tek gri cumle + tek link, 70px bosluk icinde. Bilgi veriyordu ama is gormuyordu. Simdi isaret + vaat + gercek bir kapi, altinda da raflar (vitrin kartlari ana sayfayla ortak). Baska hicbir view `.shop-cart-empty` kullanmiyordu, o yuzden kaldirildi. */ .shop-empty { display: flex; align-items: center; gap: 30px; background: #fff; border: 1px solid rgb(234,234,234); border-radius: 16px; padding: 34px 40px; } .shop-empty-mark { flex: 0 0 auto; width: 132px; height: 132px; position: relative; display: flex; align-items: center; justify-content: center; } /* Isaretin arkasindaki disk: 3D PNG beyaz zeminde havada kaliyordu. */ .shop-empty-mark::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, rgba(255,255,255,0) 62%), rgb(243,244,246); } .shop-empty-mark img { position: relative; width: 104px; height: 104px; object-fit: contain; } .shop-empty-body { min-width: 0; } .shop-empty-body h2 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; } .shop-empty-body p { margin: 8px 0 0 0; font-size: 15px; color: rgb(90,90,90); line-height: 1.55; max-width: 480px; } .shop-empty-actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; } .shop-empty-actions .shop-linklike { margin-top: 0; } .shop-empty-cta { display: inline-block; background: rgb(255,0,60); color: #fff; border-radius: 26px; padding: 14px 30px; font-size: 15px; font-weight: 700; text-decoration: none; min-height: 22px; } .shop-empty-head { padding-top: 26px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .shop-empty-head .shop-linklike { margin-top: 0; white-space: nowrap; } /* Kart genisligi kolon SAYISINDAN degil minimumdan turesin: bu sayfanin kabi ana sayfanin yarisi, sabit 5 kolon burada karti 125 px'e ezip vitrin adini iki satira kiriyordu. auto-fill masaustunde 4, telefonda 2 kolon veriyor -- ayri bir kirilim kuralina gerek kalmiyor. */ .shop-empty-head + .shop-stores-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @media (max-width: 680px) { /* Telefonda yan yana duzen 132px'lik isarete yer birakmiyor; dikey ve ortali. CTA tam genislik: tek elle ulasilan tek hedef. */ .shop-empty { flex-direction: column; text-align: center; gap: 4px; padding: 26px 20px; } .shop-empty-mark { width: 116px; height: 116px; margin-bottom: 4px; } .shop-empty-mark img { width: 92px; height: 92px; } .shop-empty-body h2 { font-size: 21px; letter-spacing: -0.5px; } .shop-empty-body p { font-size: 13.5px; margin-top: 4px; } .shop-empty-actions { flex-direction: column; gap: 12px; margin-top: 16px; } .shop-empty-cta { display: block; width: 100%; box-sizing: border-box; padding: 15px; font-size: 15.5px; } /* "See all storefronts" telefonda gizli: hemen ustundeki "Browse the shop" ile AYNI yere gidiyor, ve yanindaki basligi "Start from a / storefront" diye ikiye kiriyordu. Masaustunde yer var, orada duruyor. */ .shop-empty-head .shop-linklike { display: none; } } @media (max-width: 640px) { .shop-cart-bar { padding: 0 16px; bottom: 90px; } /* JetChat FAB'in ustunde */ .shop-cart-bar-inner { width: 100%; justify-content: center; } .shop-hero { padding-top: 22px; } .shop-ship-pill { font-size: 12px; padding: 8px 14px; } .shop-cat-tile { padding: 14px 4px; } .shop-section-head { padding-top: 24px; } } /* Checkout */ .shop-checkout-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } .shop-panel { background: #fff; border: 1px solid rgb(234,234,234); border-radius: 14px; padding: 20px; margin-bottom: 16px; } .shop-panel .panel-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; } .shop-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .shop-form-grid .ff { display: flex; flex-direction: column; gap: 5px; } .shop-form-grid .ff.full { grid-column: 1 / -1; } .shop-form-grid .ff span { font-size: 12px; font-weight: 600; color: rgb(118,118,118); } .shop-form-grid .ff span em { font-weight: 400; font-style: normal; color: rgb(163,163,163); } .shop-form-grid .ff input { border: 1px solid rgb(224,224,224); border-radius: 10px; padding: 12px 14px; font-size: 14px; font-family: inherit; min-height: 44px; } .shop-form-grid .ff input:focus { outline: none; border-color: rgb(255,0,60); } .shop-form-err { color: rgb(255,0,0); font-size: 12.5px; min-height: 18px; margin-top: 8px; } /* Alan-alti hata satiri. Mesaj sorunlu inputun HEMEN altinda durur ki musteri sayfayi asagi kaydirip hangi alanin eksik oldugunu aramasin. */ .shop-form-grid .ff-err { display: block; color: rgb(214,0,50); font-size: 12px; line-height: 1.35; margin-top: 2px; } .shop-form-grid .ff-err:empty { display: none; } .shop-form-grid .ff input.is-err { border-color: rgb(214,0,50); } .shop-form-grid .ff input.is-err:focus { border-color: rgb(214,0,50); } /* Sepet paneli uyarisi: stoktan dusen urun / degisen fiyat. KALICI -- musterinin sepeti gozden gecirmesi gerekiyor, kendiliginden kaybolmamali. */ .shop-cart-alert { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff4f4; border: 1px solid rgb(255,205,205); color: rgb(150,0,30); font-size: 12.5px; line-height: 1.45; } .shop-linklike { display: inline-block; background: none; border: 0; color: rgb(255,0,60); font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 12px; text-decoration: none; padding: 0; font-family: inherit; } #payment-element { margin: 6px 0 4px 0; } .side-item { display: flex; gap: 10px; align-items: center; padding: 7px 0; } .side-item img { width: 42px; height: 42px; object-fit: contain; border: 1px solid rgb(234,234,234); border-radius: 8px; background: rgb(250,250,250); mix-blend-mode: multiply; } .side-item-title { font-size: 12.5px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .side-item-meta { font-size: 12px; color: rgb(118,118,118); font-variant-numeric: tabular-nums; } .side-note { font-size: 12px; color: rgb(163,163,163); margin-top: 10px; } /* Tahmini vergi aciklamasi: vergi satirinin hemen altinda, toplamdan once — musteri odemeye basmadan once okumali. */ .sum-taxnote { font-size: 11.5px; line-height: 1.45; color: rgb(118,118,118); margin: 2px 0 8px; } /* Shop order success */ .shop-order-success { text-align: center; padding-top: 26px; } .sos-icon { width: 64px; height: 64px; border-radius: 32px; background: rgb(0,128,0); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px auto; } .shop-order-success h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 6px 0; } .sos-sub { color: rgb(118,118,118); font-size: 14px; line-height: 20px; margin: 0 0 14px 0; } .sos-number { display: inline-block; background: rgb(245,245,245); border-radius: 10px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 18px; } .sos-addr { font-size: 13.5px; line-height: 19px; } @media (max-width: 860px) { .shop-checkout-cols { grid-template-columns: 1fr; } /* TELEFONDA ONCE YAPILACAK IS, SONRA SEPET. Burada `order: -1` vardi, yani sepet ozeti formun da odemenin de USTUNDE duruyordu. Iki zarari birden: musteri odeme adimina gectiginde sayfanin tepesinde yine sepeti goruyordu (adim degisti ama ekranda hicbir sey degismemis gibi), ve kart alanina ulasmak icin her seferinde kaydirmasi gerekiyordu. Sepeti bir onceki sayfada zaten gordu; burada gereken sey elindeki isi bitirmek. Masaustu iki kolon ve sag ray degismedi. */ .shop-checkout-side { order: 2; } .shop-form-grid { grid-template-columns: 1fr 1fr; } .shop-form-grid .ff.ff-sm { grid-column: auto; } } /* Sol kategori sidebar'i (menu sayfasi kalibi) */ .shop-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; } .shop-main { min-width: 0; } .shop-sidebar { position: sticky; top: 90px; } .shop-sidebar-title { font-size: 11.5px; font-weight: 700; color: rgb(163,163,163); text-transform: uppercase; letter-spacing: .5px; padding: 0 12px 8px 12px; } .shop-sidebar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: rgb(25,25,25); text-decoration: none; } .shop-sidebar-row:hover { background: rgb(245,245,245); color: rgb(25,25,25); } .shop-sidebar-row.is-active { background: rgb(255,230,235); color: rgb(255,0,60); font-weight: 700; } .shop-sidebar-row em { font-style: normal; font-size: 11.5px; color: rgb(163,163,163); font-variant-numeric: tabular-nums; } .shop-sidebar-row.is-active em { color: rgb(255,0,60); } .shop-chipbar--mobile { display: none; } /* Kart: tiklanabilir overlay + spinner'li ekle butonu */ .shop-card .card-overlay { position: absolute; inset: 0; z-index: 1; border-radius: 12px; } .shop-card .card-add { z-index: 2; } .shop-card a.card-title { color: rgb(118,118,118); text-decoration: none; } .shop-card a.card-title:hover { color: rgb(25,25,25); } .shop-card .card-add.is-adding .ico-plus, .shop-card .card-add.is-adding .ico-check { display: none; } .shop-card .card-add.is-adding::after { content: ""; width: 15px; height: 15px; border: 2px solid rgb(234,234,234); border-top-color: rgb(255,0,60); border-radius: 50%; animation: jfspin .7s linear infinite; } @keyframes jfspin { to { transform: rotate(360deg); } } /* Free-shipping progress */ .shop-fs { margin-top: 12px; } .shop-fs-label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgb(25,25,25); } .shop-fs-label b { color: rgb(255,0,60); } .shop-fs--ok .shop-fs-label { color: rgb(0,128,0); } .shop-fs--ok .shop-fs-label b { color: rgb(0,128,0); } .shop-fs-bar { height: 7px; background: rgb(234,234,234); border-radius: 4px; margin-top: 7px; overflow: hidden; } .shop-fs-bar span { display: block; height: 100%; background: rgb(255,0,60); border-radius: 4px; transition: width .3s ease; } .shop-fs--ok .shop-fs-bar span { background: rgb(0,128,0); } /* Urun detay (PDP) */ .shop-pdp { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 14px; } .shop-pdp-img { position: relative; aspect-ratio: 1; background: rgb(250,250,250); border: 1px solid rgb(234,234,234); border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .shop-pdp-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .shop-pdp-title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 28px; margin: 0 0 8px 0; } .shop-pdp-stars { display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgb(118,118,118); margin-bottom: 10px; } .shop-pdp-price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 6px; } .shop-pdp-ship { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgb(118,118,118); margin-bottom: 18px; } .shop-pdp-buy { display: flex; gap: 12px; align-items: center; max-width: 420px; } .shop-pdp-add { position: relative; } .shop-pdp-add .pdp-add-spinner { display: none; } .shop-pdp-add.is-adding .pdp-add-label { opacity: .5; } .shop-pdp-add.is-adding .pdp-add-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: jfspin .7s linear infinite; margin-left: 8px; vertical-align: -2px; } .shop-pdp-desc { margin-top: 26px; border-top: 1px solid rgb(234,234,234); padding-top: 18px; } .shop-pdp-desc-text { font-size: 13.5px; line-height: 21px; color: rgb(80,80,80); } @media (max-width: 980px) { .shop-layout { grid-template-columns: 1fr; gap: 0; } .shop-sidebar { display: none; } .shop-chipbar--mobile { display: flex; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 12px; } .shop-chipbar--mobile .shop-chip { white-space: nowrap; flex-shrink: 0; } .shop-pdp { grid-template-columns: 1fr; gap: 18px; } .shop-pdp-buy { max-width: none; } } /* Karttaki "sepette N adet" rozeti: + yerine sayi */ .shop-card .card-add.has-qty { background: rgb(255,0,60); border-color: rgb(255,0,60); } .shop-card .card-add.has-qty .ico-plus, .shop-card .card-add.has-qty .ico-check { display: none; } .shop-card .card-add.has-qty.is-added .ico-check { display: none; } .shop-card .card-add .card-add-qty { color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .shop-card .card-add.is-adding .card-add-qty { display: none; } /* Sanal vitrinler */ .shop-stores-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; } /* Vitrin karti = CAMEKAN + govde. Eskiden yalniz govde vardi (renkli zeminde uc satir metin) ve raf adi tek basina soyut kaliyordu; kartin uzerinde gercek urun gorunce restoran karti gibi okunuyor. Recete lists.php'deki .scard'dan geliyor, orada kanitlandi. */ .shop-store-card { display: flex; flex-direction: column; border-radius: 14px; padding: 0; overflow: hidden; text-decoration: none; min-height: 44px; background: var(--tint); transition: transform .16s ease; } .store-card-case { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 58%), var(--tint); display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 10px 10px 12px; } /* Urun fotograflarinin zemini BEYAZ; tint uzerinde beyaz dikdortgen gibi dururlardi. multiply beyazi seffaflastirir, urun kendi rengini korur. min-width/min-height:0 SART: grid ogesinin varsayilan min boyutu auto, yani <img>'in DOGAL boyutu -- satirlar sisip aspect-ratio kutusunu asar ve overflow:hidden urunlerin altini keser. */ .store-card-item { position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2,.8,.3,1.1); } .store-card-item:first-child { grid-row: span 2; } .shop-store-card:hover .store-card-item { transform: translateY(-3px); } .shop-store-card:hover .store-card-item:nth-child(2) { transition-delay: .04s; } .shop-store-card:hover .store-card-item:nth-child(3) { transition-delay: .08s; } /* Fotograf yoksa (yeni vitrin): ikon, vitrinin accent renginde. */ .store-card-mark { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; color: var(--acc); opacity: .5; } .store-card-mark svg { width: 44%; height: 44%; } .store-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; } /* Ikon + ad ayni satirda. Ikon vitrinin accent renginde ve 18px: adin optik boyutuna esit, buyugu basligi bastiriyor. */ .store-card-top { display: flex; align-items: center; gap: 7px; } /* Isaret 20px: 3D PNG dolu govdeli oldugu icin ince konturlu SVG'den daha fazla varlik gosteriyor ve 18px'te bile okunuyor; 20px adin optik boyutuna denk. SVG fallback hala currentColor aliyor. */ .store-card-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--acc); display: inline-flex; align-items: center; } .store-card-ico svg { width: 100%; height: 100%; } .store-card-ico img { width: 20px; height: 20px; display: block; object-fit: contain; } .store-card-name { color: var(--acc); } .shop-store-card:active { transform: scale(.98); } .store-card-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; } .store-card-tag { font-size: 11.5px; color: rgb(80,80,80); line-height: 15px; } .store-card-meta { font-size: 10.5px; color: rgb(118,118,118); margin-top: 4px; } .store-byjf { font-weight: 700; } .shop-store-hero { border-radius: 16px; padding: 26px 24px; margin-top: 8px; } .store-hero-name { font-size: 30px; font-weight: 700; letter-spacing: -0.8px; } .store-hero-tag { font-size: 14.5px; color: rgb(80,80,80); margin-top: 3px; } .store-hero-meta { display: flex; gap: 8px; font-size: 12.5px; color: rgb(118,118,118); margin-top: 10px; flex-wrap: wrap; } @media (max-width: 980px) { /* YATAY KAYDIRMA KALDIRILDI -> GRID. Ray, 9 vitrinin 6'sini ekran disinda sakliyordu ve var olduklarina dair hicbir isaret vermiyordu. Ray IKINCIL oneri icin dogru arac ("bunlar da ilgini cekebilir"); BIRINCIL raf dizini icin degil -- Amazon'un mobil "Shop by category"si de grid, ray degil. Dikey kaydirma tarayicinin dogal hareketi; yatay kaydirma ogrenilmesi gereken bir jest. */ .shop-stores-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; overflow: visible; } .shop-store-card { width: auto; min-width: 0; } .store-card-case { aspect-ratio: 16 / 10; padding: 8px 8px 10px; } .store-card-body { padding: 10px 12px 12px; } } /* sum-row: checkout/success panellerinde de calissin (eskiden yalniz .shop-cart-summary altinda tanimliydi — etiket+deger ust uste biniyordu) */ .shop-wrap .sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; } .shop-wrap .sum-row.total { font-weight: 700; font-size: 16px; padding-top: 10px; margin-top: 6px; border-top: 1px solid rgb(224,224,224); } /* Kayitli adres kartlari */ .shop-addr-saved { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .shop-addr-card { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid rgb(224,224,224); border-radius: 12px; padding: 11px 14px; cursor: pointer; font-family: inherit; min-height: 48px; } .shop-addr-card:hover { border-color: rgb(180,180,180); } .shop-addr-card.is-selected { border-color: rgb(255,0,60); background: rgb(255,247,249); } .shop-addr-card svg { color: rgb(118,118,118); flex-shrink: 0; } .shop-addr-card.is-selected svg { color: rgb(255,0,60); } .addr-card-main { display: flex; flex-direction: column; min-width: 0; } .addr-card-main b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .addr-card-main i { font-style: normal; font-size: 12px; color: rgb(118,118,118); } .shop-addr-divider { display: flex; align-items: center; gap: 10px; color: rgb(163,163,163); font-size: 11.5px; margin: 4px 0 12px 0; } .shop-addr-divider::before, .shop-addr-divider::after { content: ""; flex: 1; height: 1px; background: rgb(234,234,234); } /* Yan panel mini stepper */ .shop-qty--sm button { width: 30px; height: 30px; font-size: 14px; } .shop-qty--sm .qty-val { min-width: 20px; font-size: 13px; } .side-item { gap: 8px; } /* Checkout yan panel: baslik esner, stepper sabit kalir (tasma/kirilma fix) */ .side-item-main { flex: 1; min-width: 0; } .side-item .shop-qty--sm { flex-shrink: 0; display: flex; } /* ---- Vitrin bolum sonu "See all" (ustteki link 24 urun kaydirinca kayboluyordu) ---- */ .shop-section-more { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 0 4px; } .shop-section-more__btn { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid #191919; border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 700; color: #191919; text-decoration: none; background: #fff; transition: background .15s ease, color .15s ease, transform .12s cubic-bezier(.23,1,.32,1); } .shop-section-more__btn:hover { background: #191919; color: #fff; } .shop-section-more__btn:active { transform: scale(.98); } .shop-section-more__btn svg { transition: transform .16s cubic-bezier(.23,1,.32,1); } .shop-section-more__btn:hover svg { transform: translateX(3px); } .shop-section-more__hint { font-size: 12.5px; color: #767676; } /* ---- Kategori sayfasi "Load more" ---- */ .shop-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0 6px; } .shop-more[hidden] { display: none; } .shop-more__btn { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid #191919; border-radius: 999px; padding: 12px 30px; font-family: inherit; font-size: 14.5px; font-weight: 700; color: #191919; background: #fff; cursor: pointer; transition: background .15s ease, color .15s ease, transform .12s cubic-bezier(.23,1,.32,1); } .shop-more__btn:hover { background: #191919; color: #fff; } .shop-more__btn:active { transform: scale(.98); } .shop-more__btn[disabled] { opacity: .6; cursor: default; } .shop-more__btn.is-loading svg { animation: shopMoreSpin .7s linear infinite; } @keyframes shopMoreSpin { to { transform: rotate(360deg); } } .shop-more__count { margin: 0; font-size: 12.5px; color: #767676; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .shop-more__btn.is-loading svg { animation: none; } } /* ---- Kargo & iade politikasi (/shop/policy) ---- */ .shop-policy { max-width: 760px; } .shop-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #767676; margin: 0 0 18px; } .shop-crumb a { color: #767676; text-decoration: none; } .shop-crumb a:hover { color: rgb(255,0,60); } .shop-policy h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 12px; color: #191919; } .shop-policy__lede { font-size: 16px; line-height: 1.6; color: #4b5563; margin: 0 0 34px; max-width: 62ch; } .shop-policy__sec { padding: 26px 0 0; border-top: 1px solid #eee; margin-top: 26px; } .shop-policy__sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; } .shop-policy h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 14px; color: #191919; } .shop-policy h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: #191919; } .shop-policy p { font-size: 15px; line-height: 1.65; color: #4b5563; margin: 0 0 12px; max-width: 66ch; } .shop-policy p strong { color: #191919; font-weight: 600; } .shop-policy a { color: rgb(255,0,60); } .shop-policy__facts { margin: 0; display: grid; gap: 14px; } .shop-policy__facts > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: start; } .shop-policy__facts dt { font-size: 14px; font-weight: 700; color: #191919; } .shop-policy__facts dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: #4b5563; } .shop-policy__list { margin: 0 0 12px; padding-left: 20px; } .shop-policy__list li { font-size: 15px; line-height: 1.65; color: #4b5563; margin-bottom: 7px; } .shop-policy__note { font-size: 14px; color: #767676; font-style: italic; } @media (max-width: 640px) { .shop-policy h1 { font-size: 26px; } .shop-policy__facts > div { grid-template-columns: 1fr; gap: 4px; } } .shop-policy-link { margin: 12px 0 0; font-size: 12.5px; color: #767676; text-align: center; } /* JF-SHOP-GUEST-NOTE: Checkout butonunun hemen alti */ .shop-guest-note { margin: 8px 0 0; font-size: 13px; color: #4b5563; text-align: center; } /* Misafir checkout: e-posta alaninin altindaki aciklama + giris kisayolu. Kasitli olarak SESSIZ: hesap acmak bir SECENEK, engel degil. */ .shop-guest-note { margin: 8px 0 0; font-size: 12.5px; color: #767676; line-height: 1.6; } .shop-guest-note a { color: rgb(255,0,60); text-decoration: underline; margin-left: 6px; white-space: nowrap; } /* Contact bloguyla Shipping address blogu ayni panelde: aralarinda gorunur bir nefes olmazsa not, bir sonraki basligin alt yazisi gibi okunuyor. */ .shop-guest-sep { height: 1px; background: rgb(234,234,234); margin: 18px 0 16px; } /* Fiyat dususu bildirimi: iyi haber, dikkat cekmeli ama alarm gibi degil. */ .sum-notice { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #ecfdf5; color: #065f46; font-size: 12.5px; line-height: 1.45; } /* JF-SHOP-RESUME-V1: hatirlatma linkinden donen musteriye ilk satir. Yesil "iyi haber" tonu (sum-notice ile ayni aile), formun en ustunde. */ .shop-resume-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #ecfdf5; color: #065f46; font-size: 13.5px; font-weight: 600; line-height: 1.45; } .shop-policy-link a { color: #767676; text-decoration: underline; } .shop-policy-link a:hover { color: rgb(255,0,60); } /* ---- JetPoints kutusu (checkout) ---- */ .shop-jp { display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 16px; padding: 13px 15px; border: 1px solid #cfe9e4; background: #f2faf8; border-radius: 12px; cursor: pointer; } .shop-jp:hover { border-color: #0f766e; } .shop-jp input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: #0f766e; flex-shrink: 0; cursor: pointer; } .shop-jp__body { display: flex; flex-direction: column; gap: 2px; } .shop-jp__body b { font-size: 14px; font-weight: 700; color: #0f766e; } .shop-jp__body i { font-style: normal; font-size: 12.5px; color: #4b5563; } /* Ayni kutu sag ozet kolonunda (340px): dar sutunda 13/15 dolgu satirlari birbirine yapistiriyordu. Yalnizca olculer degisiyor -- renk, kenar ve yazi tipi ortak kalsin ki iki yerde ayri ayri bakim gerekmesin. Ustunde vergi notu, altinda indirim satiri var: dikey bosluk simetrik. */ .shop-jp--side { margin: 12px 0 10px; padding: 11px 12px; gap: 9px; } .shop-jp--side .shop-jp__body i { line-height: 1.4; } /* ---- Iade / sorun bildirimi formu ---- */ .shop-select, .shop-textarea { font-family: inherit; font-size: 14px; color: #191919; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 12px; outline: none; box-sizing: border-box; } .shop-select:focus, .shop-textarea:focus { border-color: #191919; } .shop-textarea { resize: vertical; min-height: 74px; line-height: 1.5; } /* ============================================================ MOBIL FILTRE (buton + alt sheet). Desktop'ta tamami gizli -- orada sol sidebar var. Sheet, sidebar'in mobil karsiligi: 13 kategori + 8 mutfak rafi yatay kaydirmada saklaniyordu ve musteri filtrelerin tamamini hic goremiyordu. ============================================================ */ .shop-fbar { display: none; } .shop-sheet { display: none; } @media (max-width: 980px) { .shop-fbar { display: block; padding: 0 0 10px; } /* 46px yuksek: dokunma hedegi 44px altina inmiyor. */ .shop-fbtn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px; border-radius: 23px; background: #fff; border: 1.5px solid rgb(224,224,224); font: inherit; font-size: 14.5px; font-weight: 600; color: rgb(25,25,25); cursor: pointer; max-width: 100%; } .shop-fbtn:active { background: rgb(248,248,248); } .shop-fbtn__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kac secenek oldugunu ACMADAN gostermek: butonun uzerinde sayi. */ .shop-fbtn__n { flex: 0 0 auto; min-width: 22px; padding: 0 6px; height: 22px; border-radius: 11px; background: rgb(255,230,235); color: rgb(255,0,60); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .shop-sheet { display: block; position: fixed; inset: 0; z-index: 2147483000; } .shop-sheet[hidden] { display: none; } .shop-sheet__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s ease; } .shop-sheet.is-open .shop-sheet__scrim { opacity: 1; } .shop-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; /* Ekranin %86'si: arkadaki sayfa gorunur kalsin ki musteri nerede oldugunu kaybetmesin (tam ekran modal degil). */ max-height: 86vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.25,1); box-shadow: 0 -8px 30px rgba(0,0,0,.18); } .shop-sheet.is-open .shop-sheet__panel { transform: translateY(0); } .shop-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: rgb(220,220,220); margin: 10px auto 2px; } .shop-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; border-bottom: 1px solid rgb(238,238,238); } .shop-sheet__head h2 { margin: 0; font-size: 17px; font-weight: 700; } .shop-sheet__x { width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgb(245,245,245); display: inline-flex; align-items: center; justify-content: center; color: rgb(60,60,60); cursor: pointer; } /* Liste KENDI ICINDE kayiyor; sayfa arkada kilitli. */ .shop-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px calc(14px + env(safe-area-inset-bottom, 0px)); } .shop-sheet__group { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: rgb(150,150,150); padding: 14px 12px 6px; } .shop-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px; text-decoration: none; color: rgb(25,25,25); font-size: 15.5px; } .shop-sheet__row em { font-style: normal; font-size: 13.5px; color: rgb(150,150,150); font-variant-numeric: tabular-nums; } .shop-sheet__row:active { background: rgb(246,246,246); } .shop-sheet__row.is-active { background: rgb(255,230,235); color: rgb(255,0,60); font-weight: 700; } .shop-sheet__row.is-active em { color: rgb(255,0,60); } } @media (prefers-reduced-motion: reduce) { .shop-sheet__panel, .shop-sheet__scrim { transition: none; } } /* ============================================================ VITRIN GRIDI -- tek/cift sayida vitrinde oksuz satir yok. Vitrin sayisi VERIDEN geliyor (adedi 0 olan elenir), yani bugun 9 yarin 8 olabilir. Son oge tek basina kaliyorsa iki kolonu birden kapsiyor ve YATAY duzene geciyor -- bosluk birakan oksuz kutu yerine kasitli genis bir kart. Sabit bir sayiya bel baglamiyoruz. ============================================================ */ @media (max-width: 640px) { .shop-stores-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; } .shop-store-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .shop-store-card:last-child:nth-child(odd) .store-card-case { flex: 0 0 44%; aspect-ratio: auto; grid-template-columns: 1.4fr 1fr; } .shop-store-card:last-child:nth-child(odd) .store-card-body { flex: 1 1 auto; justify-content: center; } .store-card-name { font-size: 15px; } .store-card-tag { font-size: 12.5px; } } /* 3 kolonda da ayni kural: 7 vitrin -> son satirda 1 kalirsa genisler. */ @media (min-width: 641px) and (max-width: 980px) { .shop-store-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .shop-store-card:last-child:nth-child(3n+1) .store-card-case { flex: 0 0 34%; aspect-ratio: auto; grid-template-columns: 1.4fr 1fr; } .shop-store-card:last-child:nth-child(3n+1) .store-card-body { flex: 1 1 auto; justify-content: center; } } /* ---------------------------------------------------------------- hero v2 + marks */ .shop-hero--v2 { align-items: center; gap: 24px; padding: 34px 20px 30px; border-radius: 0 0 22px 22px; background: linear-gradient(135deg, #FFF6EE 0%, #FFEEDD 100%); border-bottom: 0; position: relative; overflow: hidden; } .shop-hero--v2::after { content: ""; position: absolute; right: -6%; top: -40%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,0,60,.10) 0%, rgba(255,0,60,0) 70%); pointer-events: none; } .shop-hero--v2 h1 { font-size: 36px; line-height: 40px; letter-spacing: -1px; } .shop-hero--v2 .shop-sub { font-size: 15px; margin-top: 8px; max-width: 48ch; } .shop-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .shop-hero__facts span { display: inline-flex; align-items: center; background: #fff; border-radius: 24px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: rgb(25,25,25); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .shop-hero__facts span:first-child { color: rgb(255,0,60); } .shop-hero__marks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 62px); gap: 10px; flex: 0 0 auto; } .shop-hero__marks span { width: 62px; height: 62px; border-radius: 16px; background: var(--tint, #fff); display: grid; place-items: center; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); } .shop-hero__marks img { width: 42px; height: 42px; object-fit: contain; } .shop-hero__marks span:nth-child(even) { transform: translateY(8px); } .store-card-badge { position: absolute; left: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 13px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.14); } .store-card-badge img { width: 30px; height: 30px; object-fit: contain; display: block; } .store-card-case { padding-top: 14px; } .kc-tiles--marked .kc-tile__ph { background: rgb(238,242,246); } .kc-tile__mark { width: 34px; height: 34px; object-fit: contain; } @media (max-width: 980px) { .shop-hero__marks { grid-template-columns: repeat(5, 52px); } .shop-hero__marks span { width: 52px; height: 52px; border-radius: 14px; } .shop-hero__marks img { width: 34px; height: 34px; } } @media (max-width: 640px) { .shop-hero--v2 { padding: 24px 16px 22px; } .shop-hero--v2 h1 { font-size: 27px; line-height: 31px; } .shop-hero__marks { grid-template-columns: repeat(5, 44px); gap: 8px; } .shop-hero__marks span { width: 44px; height: 44px; border-radius: 12px; transform: none !important; } .shop-hero__marks img { width: 30px; height: 30px; } .shop-hero__facts span { font-size: 12.5px; padding: 7px 12px; } } /* ---------------------------------------------------------------- boxes */ .shop-boxes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 8px; } .shop-boxes--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .shop-boxes--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .shop-boxgroup { display: flex; align-items: baseline; gap: 10px; padding: 18px 0 10px; } .shop-boxgroup b { font-size: 15px; font-weight: 700; letter-spacing: -.2px; } .shop-boxgroup span { font-size: 13px; color: rgb(118,118,118); } .box-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; text-decoration: none; background: #fff; border: 1px solid rgb(238,236,236); transition: transform .18s ease, box-shadow .18s ease; } .box-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(0,0,0,.35); } .box-card__case { position: relative; height: 150px; background: var(--tint); overflow: hidden; } .box-card__label { position: absolute; left: 12px; top: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.12); } .box-card__label img { width: 27px; height: 27px; object-fit: contain; } /* three items rise out of the box: middle one tallest, outer two tilted */ .box-card__fan { position: absolute; left: 0; right: 0; bottom: 26px; height: 118px; display: flex; align-items: flex-end; justify-content: center; z-index: 2; } .box-card__fan img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); } .box-card__fan img:nth-child(1) { transform: rotate(-9deg) translate(10px, 8px); } .box-card__fan img:nth-child(2) { width: 84px; height: 84px; z-index: 1; transform: translateY(-4px); } .box-card__fan img:nth-child(3) { transform: rotate(9deg) translate(-10px, 8px); } .box-card:hover .box-card__fan img:nth-child(2) { transform: translateY(-10px); } .box-card:hover .box-card__fan img:nth-child(1) { transform: rotate(-11deg) translate(8px, 4px); } .box-card:hover .box-card__fan img:nth-child(3) { transform: rotate(11deg) translate(-8px, 4px); } .box-card__fan img { transition: transform .25s cubic-bezier(.2,.8,.3,1.1); } /* the box's front lip: a darker band the items stand behind */ .box-card__lip { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 3; background: color-mix(in srgb, var(--acc) 22%, var(--tint)); border-top: 2px solid color-mix(in srgb, var(--acc) 38%, #fff); } .box-card__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; } .box-card__for { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); } .box-card__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; color: rgb(25,25,25); } .box-card__brands { font-size: 12px; color: rgb(100,100,100); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .box-card__meta { font-size: 12.5px; color: rgb(118,118,118); margin-top: 5px; font-variant-numeric: tabular-nums; } .box-card__meta b { color: rgb(25,25,25); font-weight: 700; } .box-card__meta em { font-style: normal; color: rgb(19,115,51); font-weight: 700; } .box-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 8px -20px 0; padding: 34px 28px 32px; border-radius: 0 0 24px 24px; background: linear-gradient(135deg, #fff 0%, var(--tint) 100%); position: relative; overflow: hidden; } .box-hero__t { flex: 1 1 420px; min-width: 0; position: relative; z-index: 1; } .box-hero__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); background: #fff; border-radius: 20px; padding: 6px 12px 6px 6px; } .box-hero__kicker img { width: 22px; height: 22px; object-fit: contain; } .box-hero h1 { font-size: 38px; font-weight: 700; letter-spacing: -1.1px; line-height: 42px; margin: 14px 0 0; } .box-hero__tag { font-size: 16px; color: rgb(80,80,80); margin: 8px 0 0; } .box-hero__why { font-size: 14.5px; color: rgb(100,100,100); line-height: 1.55; margin: 12px 0 0; max-width: 54ch; padding-left: 14px; border-left: 3px solid var(--acc); } .box-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .box-hero__facts span { display: inline-flex; align-items: center; background: #fff; border-radius: 24px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: rgb(25,25,25); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .box-hero__facts .is-free { color: rgb(19,115,51); } .box-hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; } .box-add { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; background: rgb(255,0,60); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; padding: 15px 26px; border-radius: 28px; transition: background .16s ease, transform .12s ease; min-width: 260px; } .box-add:hover { background: rgb(214,0,54); } .box-add:active { transform: translateY(1px) scale(.985); } .box-add.is-busy { opacity: .8; cursor: progress; } .box-hero__flowers { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: rgb(25,25,25); text-decoration: underline; text-underline-offset: 4px; } .box-hero__flowers img { width: 22px; height: 22px; } .box-hero__note { font-size: 12.5px; color: rgb(118,118,118); margin: 12px 0 0; max-width: 56ch; } /* the opened box: a tinted tray with the components standing in it */ .box-hero__tray { position: relative; z-index: 1; flex: 0 0 auto; width: 380px; height: 300px; } .box-hero__tray::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; border-radius: 22px; background: color-mix(in srgb, var(--acc) 26%, var(--tint)); box-shadow: inset 0 14px 30px -20px rgba(0,0,0,.35); } .box-hero__tray::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--acc) 40%, var(--tint)); border-top: 2px solid rgba(255,255,255,.55); } .box-hero__items { position: absolute; left: 0; right: 0; bottom: 48px; height: 200px; display: flex; align-items: flex-end; justify-content: center; gap: 0; z-index: 2; } .box-hero__items img { width: 112px; height: 112px; object-fit: contain; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 12px 26px -14px rgba(0,0,0,.4); } .box-hero__items img:nth-child(1) { transform: rotate(-10deg) translate(26px, 14px); } .box-hero__items img:nth-child(2) { width: 136px; height: 136px; z-index: 1; transform: translateY(-6px); } .box-hero__items img:nth-child(3) { transform: rotate(10deg) translate(-26px, 14px); } .box-hero__items img:nth-child(4) { position: absolute; width: 84px; height: 84px; right: 18px; top: 0; transform: rotate(14deg); } .box-hero__items img:nth-child(5) { position: absolute; width: 84px; height: 84px; left: 18px; top: 0; transform: rotate(-14deg); } .box-hero__stamp { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 56px; height: 56px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); } .box-hero__stamp img { width: 36px; height: 36px; object-fit: contain; } /* ---------------------------------------------------------------- category hero */ .cat-hero { display: flex; align-items: center; gap: 18px; margin: 10px 0 4px; padding: 22px 24px; border-radius: 18px; background: var(--tint); } .cat-hero__mark { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); } .cat-hero__mark img { width: 44px; height: 44px; object-fit: contain; } .cat-hero__t { min-width: 0; } .cat-hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; line-height: 1.1; } .cat-hero p { font-size: 13.5px; color: rgb(100,100,100); margin: 6px 0 0; } .cat-hero p a { color: var(--acc); font-weight: 600; text-decoration: none; } .cat-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cat-hero__chips a { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 20px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: rgb(25,25,25); text-decoration: none; border: 1.5px solid transparent; } .cat-hero__chips a em { font-style: normal; color: rgb(163,163,163); font-weight: 500; } .cat-hero__chips a.is-active { border-color: var(--acc); color: var(--acc); } @media (max-width: 980px) { .shop-boxes { grid-template-columns: repeat(2, minmax(0,1fr)); } .box-hero__pics { grid-template-columns: repeat(2, 104px); } .box-hero__pics span { width: 104px; height: 104px; } } @media (max-width: 640px) { .shop-boxes, .shop-boxes--2 { grid-template-columns: 1fr; } .box-hero { margin: 8px -16px 0; padding: 24px 16px 22px; flex-direction: column; align-items: flex-start; } .box-hero h1 { font-size: 28px; line-height: 32px; } .box-hero__pics { grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; } .box-hero__pics span { width: auto; height: auto; aspect-ratio: 1; } .box-hero__pics span:nth-child(5) { display: grid; } .box-add { width: 100%; } .cat-hero { padding: 16px; gap: 14px; } .cat-hero__mark { width: 52px; height: 52px; border-radius: 14px; } .cat-hero__mark img { width: 36px; height: 36px; } .cat-hero h1 { font-size: 24px; } } @media (max-width: 980px) { .shop-boxes { grid-template-columns: repeat(2, minmax(0,1fr)); } .box-hero__tray { width: 300px; height: 250px; } .box-hero__items img { width: 88px; height: 88px; } .box-hero__items img:nth-child(2) { width: 108px; height: 108px; } .box-hero__items img:nth-child(4), .box-hero__items img:nth-child(5) { display: none; } } @media (max-width: 640px) { .shop-boxes, .shop-boxes--2, .shop-boxes--3 { grid-template-columns: 1fr 1fr; gap: 10px; } .box-card__case { height: 124px; } .box-card__fan img { width: 56px; height: 56px; } .box-card__fan img:nth-child(2) { width: 66px; height: 66px; } .box-card__brands { display: none; } .box-hero { margin: 8px -16px 0; padding: 24px 16px 22px; flex-direction: column; align-items: stretch; gap: 22px; } .box-hero h1 { font-size: 28px; line-height: 32px; } .box-hero__tray { width: 100%; height: 210px; } .box-hero__items img { width: 80px; height: 80px; } .box-hero__items img:nth-child(2) { width: 96px; height: 96px; } .box-add { width: 100%; } } /* ---------------------------------------------------------------- box rows in cart */ .shop-cart-row.is-box .row-img { background: var(--tint); border-radius: 12px; display: grid; place-items: center; } .shop-cart-row.is-box .row-img img { width: 60%; height: 60%; object-fit: contain; } .row-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin-bottom: 2px; } .row-box-items { display: flex; align-items: center; gap: 4px; margin: 6px 0 4px; flex-wrap: wrap; } .row-box-items img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; border: 1px solid rgb(238,236,236); padding: 2px; background: #fff; } .row-box-items span { font-size: 12px; color: rgb(118,118,118); margin-left: 4px; } /* ---------------------------------------------------------------- what's inside (box page) */ .box-inside { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .box-inside__item { display: grid; grid-template-columns: auto 64px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid rgb(238,236,236); text-decoration: none; color: rgb(25,25,25); transition: border-color .15s ease; } .box-inside__item:hover { border-color: rgb(206,206,206); color: rgb(25,25,25); } .box-inside__n { width: 24px; height: 24px; border-radius: 50%; background: rgb(245,245,245); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: rgb(100,100,100); } .box-inside__item img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; } .box-inside__t b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; } .box-inside__t small { display: block; font-size: 12px; color: rgb(118,118,118); margin-top: 2px; line-height: 1.35; } @media (max-width: 640px) { .box-inside { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- product page v2 */ .shop-pdp--v2 { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; } .pdp-stage { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--tint); display: grid; place-items: center; } .pdp-stage__img { position: relative; z-index: 2; width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transform: translateY(-4%); } .pdp-stage__label { position: absolute; left: 16px; top: 16px; z-index: 3; width: 52px; height: 52px; border-radius: 15px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.14); } .pdp-stage__label img { width: 34px; height: 34px; object-fit: contain; } .pdp-stage__badge { position: absolute; right: 16px; top: 16px; z-index: 3; } .pdp-stage__lip { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 1; background: color-mix(in srgb, var(--acc) 22%, var(--tint)); border-top: 2px solid color-mix(in srgb, var(--acc) 38%, #fff); } .pdp-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); text-decoration: none; background: var(--tint); border-radius: 20px; padding: 6px 12px 6px 6px; margin-bottom: 12px; } .pdp-kicker img { width: 22px; height: 22px; object-fit: contain; } .shop-pdp--v2 .shop-pdp-title { font-size: 26px; line-height: 31px; letter-spacing: -.6px; } .pdp-sub { font-size: 14px; color: rgb(100,100,100); line-height: 1.45; margin: 0 0 10px; } .pdp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; } .pdp-facts span { display: inline-flex; align-items: center; background: rgb(248,248,248); border-radius: 20px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: rgb(25,25,25); } .pdp-facts .is-free { color: rgb(19,115,51); background: rgb(230,244,234); } .pdp-inbox { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--tint); text-decoration: none; color: rgb(25,25,25); border: 1px solid color-mix(in srgb, var(--acc) 18%, #fff); transition: transform .15s ease; } .pdp-inbox:hover { transform: translateY(-2px); color: rgb(25,25,25); } .pdp-inbox__mark { width: 48px; height: 48px; border-radius: 14px; background: #fff; display: grid; place-items: center; } .pdp-inbox__mark img { width: 32px; height: 32px; object-fit: contain; } .pdp-inbox__t small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); } .pdp-inbox__t b { display: block; font-size: 15px; font-weight: 700; margin-top: 1px; } .pdp-inbox__t i { display: block; font-style: normal; font-size: 12.5px; color: rgb(100,100,100); margin-top: 2px; } .pdp-inbox__go { font-size: 13px; font-weight: 700; color: var(--acc); white-space: nowrap; } @media (max-width: 860px) { .shop-pdp--v2 { grid-template-columns: 1fr; gap: 20px; } .pdp-stage { aspect-ratio: 4 / 3; } .pdp-inbox { grid-template-columns: auto 1fr; } .pdp-inbox__go { grid-column: 2; } } /* ===================== SEZON (Season::isHalloween) ===================== Yalniz sezon acikken cizilen ogelerin stili; kapali sezonda hicbir eleman bu siniflari tasimaz. Marka kirmizisi yerinde kalir, sezonu 3D isaretler ve tek bir turuncu vurgu tasir. */ .season-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1c1414; border-radius: 999px; padding: 5px 15px 5px 5px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px -10px rgba(234,106,18,.6); margin: 0 0 12px; } .season-chip:hover { color: #1c1414; } .season-chip img { width: 28px; height: 28px; } .season-chip b { color: #C2410C; font-weight: 800; } .season-band { background: linear-gradient(180deg,#FFF3E6 0%,#FFF9F3 100%); border: 1px solid #F8DEC4; border-radius: 18px; padding: 22px 22px 8px; margin: 0 0 30px; scroll-margin-top: 90px; } .season-band__h { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .season-band__h img { width: 54px; height: 54px; flex: none; } .season-band__h > div { min-width: 0; } .season-band__h h2 { margin: 0; font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #1c1414; } .season-band__h p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #7A4A22; } .shop-sidebar-row--season { font-weight: 800; color: #C2410C; background: #FFF3E6; justify-content: flex-start; } .shop-sidebar-row--season:hover { background: #FFE9D3; color: #C2410C; } .shop-sidebar-row--season span { display: inline-flex; align-items: center; gap: 8px; } .shop-chip--season { display: inline-flex; align-items: center; gap: 6px; background: #FFF3E6; color: #C2410C; font-weight: 800; } @media (max-width: 700px) { .season-band { padding: 16px 14px 4px; } .season-band__h { align-items: flex-start; gap: 10px; } .season-band__h img { width: 40px; height: 40px; } .season-band__h h2 { font-size: 20px; } }